/**/
#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-block;width: 0.6rem;height: 0.6rem;float: left;margin-top: 0.1rem;margin-right: 0.3rem;}
#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.4rem;
	background-color:#fff;
	line-height:0.9rem;
	overflow:hidden;
	height: 1.56rem;
	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)}

/* Default navigation icon */
.nav__trigger {
  display: flex; 
  align-items: center;
  position: fixed;
  /*height: 0.42rem;*/
  right: 0.3rem;
  top: 0.3rem;
  z-index: 999;
}
    .nav__trigger .imgclose { width:0.4rem; height:0.4rem; margin-top:0.4rem}
    .nav__trigger .nav__menu { display:block; padding:0.05rem 0.1rem;  border:1px solid #000; color:#000}
    .search_icn {
        width: 0.5rem;
        height: 0.5rem;
        position: fixed;
        top: 0.3rem;
        right: 1.8rem;
        display: block;
        z-index: 999;
        opacity: 1;
    }
.search_icn .icn{width:100%;height: 100%;}
.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);
}