/**/
#searchPage{width:100%;height:100%;position:fixed;z-index:100000;background:rgba(0,0,0,0.9);color:#fff;box-sizing:border-box;padding:0.5rem 0.3rem;}
#searchPage .inp{width: 5.2rem;height:0.8rem;border:1px solid #fff;color:#fff;line-height:0.8rem;box-sizing: border-box;padding: 0 0.2rem;background-color:transparent;}
#searchPage .search_icn{position:relative;top:0;left:0;display: inline-flex;width: 0.6rem;height: 0.6rem;float: left;margin-top: 0.1rem;margin-right: 0.3rem;background: #999999;align-items: center;justify-content: center;}
#searchPage .search_icn:before{content:''}
#searchPage .search_icn .icn{position:relative;top:0}
#searchPage .nav__icon{top:0.15rem}
#searchPage .nav__icon:after{background:#fff;width:0.5rem}
#searchPage .nav__icon:before{background:#fff;width:0.5rem}
/**
* Navigation Defaults
*/
.nav {
  position: fixed;
  z-index: 100;
  opacity: 0;
  -webkit-transition-property: all;
  transition-property: all;
  -webkit-transition-duration: 300ms;
   transition-duration: 300ms;
	width: 100%;height: 100%;background: #FFFFFF;
    border-left:1px solid #eee;
}
.nav--active .nav {
  opacity: 1;
  background-color: #FFF;
}
.nav__list {
  width: 100%;
  height: auto;
  box-sizing: border-box;
  margin-top: 1.3rem;
}

.top_bar{width:100%;height: auto;padding: 0 0.3rem;box-sizing: border-box;}
.two_bar {
	display:none;
	width: 100%;
	height: auto;
}
.two_bar li{background: #f7f7f7;margin-bottom: 0.05rem;line-height: 1.2rem;width: 100%;box-sizing: border-box;padding-left: 0.9rem;font-size: 0.3rem;color: #333333;}
.two_bar li a{color: #000;font-size: 0.3rem;}
.one_bar {
	display:block;
	font-size: 0.36rem;
	background-color:#fff;
	line-height:0.9rem;
	overflow:hidden;
	height: 1.4rem;
	width:100%;
	padding: 0 0.4rem 0 0.5rem;
	color: #333333;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
	align-items: center;
	font-weight: 300;
	border-bottom: 1px solid #eeedeb;
}
.one_bar .icn{width: 0.37rem;height: 0.2rem;float: right;display: inline-block;background-image: url("../images/trun.png");background-size: contain;background-position: center;background-repeat: no-repeat;transform:rotate(0deg)}
.currnt-cate .icn{transform:rotate(180deg)}

.nav__trigger {
  display: flex;
  align-items: center;
  position: fixed;
  height: 0.42rem;
  right: 0.3rem;
  top: 0.5rem;
  z-index: 999;
}
/* Default navigation icon */
#searchPage .nav__trigger {
  display: flex;
  align-items: center;
  position: fixed;
  height: 0.42rem;
  right: 0.3rem;
  top: 0.7rem;
  z-index: 999;
}


.search_icn{width: 2.6rem;height: 0.54rem;position: fixed;top: 0.48rem;right: 1rem;display: block;z-index: 999;opacity: 1;background: #f5f5f5;box-sizing: border-box;border-radius: 0.54rem;padding: 0 0.2rem;font-size: 0.14rem;color: #999999;line-height: 0.54rem;}
.search_icn .icn{width: 0.32rem;height: 0.32rem;float: right;position:relative;top:0.1rem}
.search_icn::before{content:'Search..';font-size:0.3rem;line-height:0.54rem}

.nav__icon {
  display: inline-block;
  position: relative;
  width: 0.44rem;
  height: 0.04rem;
  background-color: #333333;
  -webkit-transition-property: background-color, -webkit-transform;
  transition-property: background-color, -webkit-transform;
  transition-property: background-color, transform;
  transition-property: background-color, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav__icon:before,
.nav__icon:after {
  content: '';
  display: block;
  width: 0.44rem;
  height: 0.04rem;
  position: absolute;
  background: #333333;
  -webkit-transition-property: margin, -webkit-transform;
  transition-property: margin, -webkit-transform;
  transition-property: margin, transform;
  transition-property: margin, transform, -webkit-transform;
  -webkit-transition-duration: 300ms;
          transition-duration: 300ms;
}
.nav__icon:before {
  margin-top: -8px;
}
.nav__icon:after {
  margin-top: 8px;
}
/* Don't nest if you don't have to. */
/**
* Style #1
*/
.style-1 .nav {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    width: 50%;
    height: 100%;
    overflow: scroll;
    position:fixed;
    right: 0px
}
.style-1 .one_bar {
  opacity: 0;
  -webkit-transition-delay: 500ms;
          transition-delay: 500ms;
}
.style-1 .nav--active .one_bar {
  opacity: 1;
}
.style-1 .nav--active .search_icn{opacity:1;}
.style-1 .nav--active .nav {
  -webkit-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.style-1 .nav--active .nav__icon {
  background: rgba(0, 0, 0, 0);
}
.style-1 .nav--active .nav__icon:before {
  margin-top: 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.style-1 .nav--active .nav__icon:after {
  margin-top: 0;
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}