html {font-size: calc((100vw / 1920) * 100 );}



html, body, input, select, input, textarea, button{font-family:  'Microsoft Yahei',  'PingFangSC Regular', 'Arial';}



body {font-size: 16px; }



::-ms-clear, ::-ms-reveal{display: none;}



select::-ms-expand{ display: none; } 



input, button {border: 0; outline: none;}



dt {font-weight: normal;}



h1, h2, h3 {margin-top: 0;}



a:hover, a:active, a:link, a:visited {text-decoration: none;}



/* a:active, a:link, a:visited {color: #cf263a;} */



img {max-width: 100%;}



ul {list-style: none; padding: 0;}



.rel {position: relative;}



.abs {position: absolute;}



.fixed {position: fixed;}



.overhide {overflow: hidden;}



.trans-3 {transition: all .3s;}



.trans-8 {transition: all .8s;}



.fl{float: left;}



.fr{float: right;}



.block {display: block;}



.iblock {display: inline-block;}



.mg0 {margin: 0 !important;}



.mt0 {margin-top: 0 !important;}



.ml0 {margin-left: 0 !important;} 



.mr0 {margin-right: 0 !important;}



.mb0 {margin-bottom: 0 !important;}



.pd0 {padding: 0 !important;}



.pt0 {padding-top: 0 !important;}



.pl0 {padding-left: 0 !important;}



.pr0 {padding-right: 0 !important;}



.pb0 {padding-bottom: 0 !important;}



.pt60{padding-top: 30px; }



.pb60{padding-bottom: 30px; }



.pl60{padding-left: 30px;}



.pr60{padding-right: 30px;}



.pt80-pb100{padding-top: 30px; padding-bottom: 40px;}



.mt20{margin-top: 20px;}



.mt28{margin-top: 0.20rem;}



.mb40{margin-bottom: 0.36rem !important;}



.f12,.f14,.f15{font-size: 12px;}



.f16{font-size: 14px;}



.f18{font-size: 16px;}



.f20{font-size: 16px;}



.f22{font-size: .22rem;}



.f28{font-size: 0.28rem;}



.f26{font-size: 0.26rem;}



.f28{font-size: calc(16px + 0.63vw);}



/* .f32{font-size: calc(16px + 1.15vw);} */



.f32{font-size: calc(16px + 0.835vw);}



.f36{font-size: calc(16px + 1.045vw);}



.f40{font-size: calc(16px + 1.25vw);}

.f44{font-size: calc(16px + 1.459vw);}

.f46{font-size: calc(18px + 1.459vw);}



.f47{font-size: calc(18px + 1.515vw);}

.f48{font-size: calc(16px + 1.667vw);}



.f52{font-size: 20px;}







.icon16x16{width: .16rem; height: .16rem;}



.cblack{color: #222;}

.gray222{color: #222;}



.gray333{color: #333;}



.gray666{color: #666;}



.gray777{color: #777;}



.gray999{color: #999;}



/* .cgray{color: #0E1421;} */



.cblack{color: #30364C;}



.cblue{color: #4F84FF;}



.cwhite100{color: rgba(255, 255, 255, 1);}



.cwhite50{color: rgba(255, 255, 255, 0.5);}



a.cwhite50:hover{color: rgba(255, 255, 255, 1);}



.tc{text-align: center;}



.tl{text-align: left;}



.tr{text-align: right;}



.bold{font-weight: bold;}



.clearfix {zoom: 1;}



.weui-cell {padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex;-webkit-box-align: center; -webkit-align-items: center; align-items: center;}



.weui-cell__bd {min-width: 1px; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}



.weui-cell__ft {text-align: right; color: #999999;}



.d-flex {display: -webkit-box; display: -webkit-flex; display: flex;}



.d-flex-item {min-width: 1px;-webkit-box-flex: 1; -webkit-flex: 1; flex: 1;}



.d-flex-wrap{display: flex; flex-wrap: wrap;}



.start {-webkit-box-align: start; -webkit-align-items: flex-start; align-items: flex-start;}



.middle {-webkit-box-align: center; -webkit-align-items: center; align-items: center;}



.end {-webkit-box-align: end; -webkit-align-items: flex-end; align-items: flex-end;}



.jcenter{justify-content: center;}



.jbetween{justify-content: space-between;}



.nobefore::before, .noafter::after {display: none !important;}



.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}



.line2 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-wrap: break-word;}



.line3 {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; word-wrap: break-word;}



.d-block{display: block;}



.img-cover{width: 100%; height: 100%; object-fit: cover;}



.img-contain{width: 100%; height: 100%; object-fit: contain;}



@media (min-width: 1600px) {



  .container { width: 84.35%;   padding: 0;}



  .container2 { width: 83.1%;   padding: 0; margin: auto;}



}





@media (min-width: 993px){

  .container { width: 84.35%;   padding: 0;}

  .container2 {  width: 83.1%;  padding: 0; margin: auto;}



  .f12{font-size: 0.12rem;}



  .f14{font-size: 0.14rem;}

  .f15{font-size: 0.15rem;}



  .f16{font-size: 0.16rem;}



  .f18{font-size: 0.18rem;}



  .f20{font-size: 0.20rem;}



  .f22{font-size: 0.22rem;}



  .f24{font-size: 0.24rem;}



  .f30{font-size: 0.30rem !important;}

  .f52{font-size: .52rem;}



  .pt60{padding-top: 0.60rem; }



  .pb60{padding-bottom: 0.60rem; }



  .pl60{padding-left: 0.60rem;}



  .pr60{padding-right: 0.60rem;}



  .pt80-pb100{padding-top: 0.80rem; padding-bottom: 1.00rem;}



  .container-fluid{padding-left: 0; padding-right: 0;}



}

@media (max-width: 1500px) {

  .f16{font-size: 14px;}

  .f22{font-size: 18px;}

}

@media (max-width: 993px) {



  html {font-size: calc((100vw / 768) * 100);}



  body {font-size: 16px; line-height: 1.5;}



  .d-warp-mobile{ flex-wrap: wrap;}



  .d-flex-w100{width: 100% !important;}



  .container2{



    padding-right: 15px;



    padding-left: 15px;



    margin-right: auto;



    margin-left: auto;



  }

  

}





/* header */



.header{

  height: 0.88rem; 

  line-height: 0.88rem;

  position: fixed;

  z-index: 15; 

  width: 100%; 

  left: 0; 

  top: 0;   

  display: flex; 

  align-items: center;

  justify-content: space-between; 

  border-bottom: 1px solid rgba(255,255,255,0.2);

  padding: 0 4.17vw;

}



.header_logo{overflow: hidden;height: 0.49rem;}



.header_logo img{display: block; height: 0.49rem;transform: translateY(0); transition: all .36s; }







.header.on .header_logo img,.header.active .header_logo img{transform: translateY(-100%);}



.nav{ flex: 1; display: flex;  align-items: center; padding-left: 5.05vw;}



.nav .nav-item{ padding:0 1.25vw 0; /*position: relative;*/ }



.nav .nav-item >a{color: #FFFFFF; display: block; height: 100%; position: relative; font-size: 0.18rem; }



.nav .nav-item >a::after{position: absolute; content: ''; bottom: .16rem; left: 50%;transform: translateX(-50%); height: 4px; background: #018A4E; width: 0; transition: width 0.36s linear; opacity: 0;}



.nav .nav-item .sub-nav{

  width:100vw; 

  left: 0; top: 0.88rem;  

  display: none;  

  z-index: 15;

  background-color: #FFFFFF;

  border-top: 1px solid #E5E5E5;

  padding: .6rem 6.3vw;

  box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.1);

  background-image: url(../images/logo-bg.png);

  background-repeat: no-repeat;

  background-position: calc(100% - .6rem) bottom;

  background-size: auto 3.2rem;

}



.nav .nav-item .sub-nav .sub-nav-box{  position: relative;  height: 100%; }

.nav .nav-item.active >a::after{opacity: 1  !important; width: 100% !important;}



.nav .nav-item .sub-nav .sub-nav-box .sub-nav-l{

  width: 34%;

  height: 3.2rem;

  overflow: hidden;

}

.nav .nav-item .sub-nav  .sub-nav-r{

  width: 66%;

  padding-left: 4.5vw;

}

.nav .nav-item .sub-nav  .sub-nav-r .sub-title{color: #018A4E; margin-bottom: .12rem;line-height: .34rem;}

.nav .nav-item .sub-nav  .sub-nav-r .sub-desc{color: #777777; margin-bottom: .24rem;line-height: .28rem;}

.sub-nav  .sub-nav-r  .pc-ul{display: flex; align-items: center; flex-wrap: wrap;}

.sub-nav  .sub-nav-r  .pc-ul li{padding: .15rem 0;line-height: 1; cursor: pointer; border-bottom: 1px solid  #CCCCCC; width: calc(33.333% - 0.54rem); margin-right: .54rem; margin-bottom: .1rem;}

.sub-nav  .sub-nav-r  .pc-ul li .sub-icon img:nth-child(1){display: block;}

.sub-nav  .sub-nav-r  .pc-ul li .sub-icon img:nth-child(2){display: none;}

.sub-nav  .sub-nav-r  .pc-ul li:hover{color: #018A4E;border-bottom: 1px solid  #018A4E;}

.sub-nav  .sub-nav-r  .pc-ul li:hover .sub-icon img:nth-child(1){display: none;}

.sub-nav  .sub-nav-r  .pc-ul li:hover .sub-icon img:nth-child(2){display: block;}





.about_sub_menu ul {width: 100%; margin-bottom: 0;}



.about_sub_menu ul  li{ border-bottom: 1px solid #e2e2e2; position: relative; cursor: pointer; color: #777777; font-size: 0.16rem; line-height: initial; padding: 0.20rem 0.16rem; }



.about_sub_menu ul  li i{opacity: 0; color: #fff;}



.header_right{height: 100%; }

.header_right .h-kefu .iconfont{

  font-size: .24rem;

  margin-right: 0.06rem;

  

}

.h-search-box{

  padding: 0 .24rem;

  position: relative;

  margin-left: .24rem;

  margin-right: .24rem; 

}



.h-search-box .iconfont{

  font-size: .16rem;

  transform: rotate(90deg);

  margin-left: 0.06rem;

}



.h-search-box::before,.h-search-box::after{

  position: absolute;

  content: '';  

  width: 1px; 

  height: .2rem;

  background: #fff;

  opacity: 0.5;

  top: 50%;

  transform: translate(0,-50%);

}

.h-search-box::before{

  left: 0;

}

.h-search-box::after{

  right: 0;

}

.site-group{

  left: 0;

  top: 100%;

  display: none;

  right: 0;

  border-radius: 0 0 .16rem 0.16rem;

  background: #fff;

  padding: .1rem 0;

  overflow: hidden;

  box-shadow: 0px 8px 16px 0px rgba(192, 192, 192, 0.1);

}

.site-group a{

  display: block;

  line-height: 2.5;

  text-align: center;

  color: #333;

}



.h-lan-box{

  width: .24rem;

  height: .24rem;

  margin-right: .02rem;

  font-size: .18rem;

}

.h-search-box  , .h-lan {

   color: #fff;

  cursor: pointer;

}
.header.active  .h-search-box,.header.active .h-lan{
  color: #333;
}


.h-lan .iconfont{

  font-size: .24rem;

  margin-right: 0.05rem; 

}

.h-lan:hover{

  color: #018A4E !important;

}

.lineh38-mt30{line-height: 38px; margin-bottom: .003rem;}

.h-kefu{display: flex;align-items: center; color: #fff;}

.header_kefu_icon{width: .2rem; height: .2rem; overflow: hidden; margin-right: 4px;}

.header_kefu_icon img{width: .2rem; height: .2rem;}

.header_kefu_icon img:nth-child(1){display: block;}

.header_kefu_icon img:nth-child(2){display: none;}

.login-btn-box{height: 0.90rem; display: flex; align-items: center;}

.fenge{margin-left: .24rem;margin-right: .17rem;color: #999;}

.lan{color: rgba(255, 255, 255, 0.5); cursor: pointer; font-size: .16rem;}

.lan span{padding: 0 3px;}

.lan span.active{color: rgba(255, 255, 255, 1);}



.nav-icon {



  display: block;



  position: absolute;



  right: 15px;



  top: 50%;



  margin-top: -7px;



}



 .nav-icon span {



  display: block;



  width: 22px;



  height: 2px;



  background: #333333;



  border-radius: 2px;



  transition: all .3s linear;



}



 .nav-icon span:not(:first-child) {



  margin-top: 4px;



}



 .nav-icon.on span:nth-of-type(1) {



  -webkit-transform: matrix(1,0,0,1,0,6) rotate(



45deg



);



  transform: matrix(1,0,0,1,0,6) rotate(



45deg



);



}



 .nav-icon.on span:nth-of-type(2) {



  width: 0;



}



 .nav-icon.on span:nth-of-type(3) {



  -webkit-transform: matrix(1,0,0,1,0,6) rotate(



45deg



);



  transform: matrix(1,0,0,1,0,-6) rotate(



-45deg



);



}



/* 索搜框 */



.search-box-div{

position: fixed;

background: #fff;

top: 0;

left: 0;

right: 0;

height: 0.90rem;

z-index: 1000;

padding: 0 23%;

display: flex;

opacity: 0;

justify-content: center;

align-items: center;

transform: translateY(-100%);

cursor: pointer;

transition: all .5s ease;

}

.search-close {

display: flex; 

align-items: center;

width: .0022rem;

margin-left: 13.8vw;

cursor: pointer;

transition: all .3s ease;



}



.search-box-div >input{ width: 25vw; border-bottom: 1px solid #d7d7d7;height: 50px;}

.search-box-div > img {width: 22px; height: 22px;}

.search-close:hover{transform: rotate(180deg);}

.search-box-div.on{transform: translateY(0%); opacity: 1;}











/* footer */

.footer{background: #222; color: #fff;}

.footer-logo{height: .49rem; margin-top: .42rem; margin-bottom: .3rem;}

.footer-mid{

  border-top: 1px solid rgba(255,255,255,0.12);

  padding: .6rem 0 .52rem;

}

.footer-mid-list{

  justify-content: space-between;

}

.footer-mid-list .list-l{

  max-width: 28%;

}

.footer-mid-list .list-l .item{margin-bottom: .24rem;}

.footer-mid-list .list-l .item .f-circle{

  width: .64rem;

  height: .64rem;

  border-radius: 50%;

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-right: .17rem;

  border: 1px solid rgba(255,255,255,0.18);

}

.footer-mid-list .list-l .item .f-circle > img{

  width: .36rem; height: .37rem;

}

.footer-mid-list .list-l .item .item-txt div:nth-child(1){margin-bottom: .1rem;}

.list-r-list .item{padding-left: 7vw;}

.list-r-list .item a{

  display: block;

  padding: .06rem 0;

  color: rgba(255,255,255,0.6);

}

.list-r-list .item .t{margin-bottom: .2rem;}

.footer-copyright{

  border-top: 1px solid rgba(255,255,255,0.12);

  padding: .55rem 0 .54rem;

}

.copyright-r{color: #fff; margin-left: .05rem;}

/* 侧边悬浮按钮 */



.aside-box{

  position: fixed;  

  right:.24rem ;  

  text-align: center; 

  bottom: 1rem;

  width: .70rem;

  padding:.18rem .1rem;

   z-index: 50;

   background: #018A4E;

   border-radius: 8px;  }



.aside-box.onshow{display: block;}

.aside-box .kefu{color: #fff;font-size: .16rem;padding-bottom: .16rem; display: flex; flex-direction: column;

align-items: center; justify-content: center;}

.aside-box .kefu .kefu-icon{ width: .2rem;height: .2rem; margin-bottom: .09rem;}

.aside-top{

  padding-top:.2rem;

  border-top: 1px solid rgba(255, 255, 255, 0.27);

  cursor: pointer;

}

.aside-top > img{

  width: .24rem;

  height: .23rem;

}

.aside-box .kefu:hover{color: #fff;}





@media (min-width: 993px){



  .header.on,.header.active{background: #FFFFFF; box-shadow: 0px 8px 16px 0px rgba(192, 192, 192, 0.1);}

  

  .header.on .header_lan_txt ,.header.on .header_lan_txt a,  .header.active .header_lan_txt ,.header.active .header_lan_txt a{color: rgba(51,51,51,0.4);}

  

  .header.on  .nav .nav-item >a,.header.on .header_lan >i,.header.on .header_lan_txt a.on ,.header.on .login-btn-box .fenge {color: #333;}

  

  .header.active  .nav .nav-item >a,.header.active .header_lan >i,.header.active .header_kefu_icon >i,.header.active .header_lan_txt a.on,.header.active .login-btn-box .fenge{color: #333;}

  

  .header.active .nav-item.active.on a{color: #018A4E !important;}

  

  .header.on .login-btn-box .lan span,.header.active .login-btn-box .lan span{color: rgba(51, 51, 51, .5);}

  .header.on .login-btn-box .lan span.active,.header.active .login-btn-box .lan span.active{color: #018A4E;}

  .lan .cn:hover,.lan .en:hover{color: #018A4E !important;}

  .header.on .nav .nav-item:hover >a, .header.active .nav .nav-item:hover >a{color: #018A4E;}

  

  .header.on .nav .nav-item:hover >a::after,.header.on .nav .nav-item .sub-nav a:hover::after{width: 100%;opacity: 1;}

  

  .header.active .nav .nav-item:hover >a::after,.header.active .nav .nav-item .sub-nav a:hover::after{width: 100%; opacity: 1;}

  

  .header.on .header_lan_txt a:hover,.header.active .header_lan_txt a:hover{color: rgba(51,51,51,1);}

  .header.on .header_kefu_icon img:nth-child(1),.header.active .header_kefu_icon img:nth-child(1){display: none;}

  .header.on .header_kefu_icon img:nth-child(2),.header.active .header_kefu_icon img:nth-child(2){display: block;}

  

  .header.on .h-kefu,.header.active .h-kefu,

  .header.on .h-lan,

  .header.active .h-lan,

  .header.on .h-search-box  {color: #333;}

  .header.on  .h-search-box::before,   .header.on  .h-search-box::after{background: rgba(0,0,0,0.16);}

  .nav .nav-item .sub-nav .sub-nav-box a:hover{ color: #fff; box-shadow: 2px 3px 4px 0px rgba(36,36,36,0.13);background: #018A4E;}

  

  .header.on .login-btn span,.header.active .login-btn span,.header.on .login-btn i,.header.active .login-btn i {color: rgba(51, 51, 51, 1);} 

  

  

  .sub-nav ul li:hover .menu_iconimg1{opacity: 0; z-index: 1;}

  

  .sub-nav ul li:hover .menu_iconimg2{opacity: 1; z-index: 4;}

  

  .sub-nav  ul li:hover  .nav-text, .site-group a:hover{color: #018A4E;}

  

  .about_sub_menu ul  li:hover,.login-dropmenu a:hover{background: #018A4E; color: #fff;}

  

  .about_sub_menu ul  li:hover i,.login-dropmenu ul li:hover i{opacity: 1;}

  

  .list-r-list .item a:hover{color: #fff;}

  .list-l .item:hover .f-circle > img{transform: rotate(360deg);}

  }

  

  @media (max-width: 993px){
    .h-search-box{display: none;}
    .aside-box{

      position: fixed;

      display: none;

      z-index: 10;

    }

  .m-lan{display: flex; flex-wrap: wrap;}

  

  .m-lan a{margin-right: 30px;}

  

  .header_logo img,.header_logo{height: 30px;}

  .footer-logo{height: 60px;}

  .footer-mid-list .list-l{max-width: 100%;}

  .list-r-list{display: none;}

  .footer-copyright{padding: 30px;}

  .h-kefu ,.h-lan{display: none;}

 

  .header{z-index: 50; height: 60px; background: #fff; line-height: 60px; padding:0  50px 0 4.89vw;}

  

  .header .header_kefu_icon .iconfont{color: #333;}

  

  .header .nav{display: block !important; padding: 0 30px; transform: translateX(100%); position: fixed;background: #fff; left: 0; right: 0; top: 60px; bottom: 0;}

  

  .header.active{box-shadow: 0px 8px 16px 0px rgba(192, 192, 192, 0.1);}

  

  .header .nav .nav-item >a{height: 55px; font-size: 14px;display: block; line-height: 55px;color: #333;}

  

  .header .nav .nav-item .has_subnav{position: relative;}

  

  .header .nav .nav-item:hover >a::after,.header.mactive .nav .nav-item:hover >a::after{width: 0; }

  

  .header .nav .nav-item .has_subnav::before{position: absolute;content: ''; transition: all .6s; width: 8px; height: 8px; right: 0; top: 50%; border-top: 1px solid #333; border-right: 1px solid #333; transform: rotate(45deg) translateY(-50%); }

  

  .header.mactive .nav{transform: translate(0);}

  

  .header .nav .nav-item.on .has_subnav::before{transform: rotate(135deg) translateY(100%);}

  

  

  

  /* .header.mactive .nav .nav-item:nth-child(1){border-top: 1px solid #C7C9C8;} */

  

  .header .nav .nav-item .header_lan_txt a,.header .nav .nav-item .header_lan_txt{color: #333;}

  

  .header .nav .nav-item .header_lan_txt a{padding-right: 10px; padding-left: 10px;}

  

  .header .nav .nav-item .header_lan_txt a:first-child { padding-left: 0px;}

  

  

  

  .header .nav .nav-item .sub-nav{position: relative;display: none; z-index: 18;text-align: left;box-shadow:none;  left: 0; right: 0; width: 100% !important; bottom: 0;  top: 100%; height: auto;   }

  

  

  

  .header .nav .nav-item .sub-nav a{height: 50px;  margin-right: 0; font-size: 14px;display: block;line-height: 50px;color: #333;}

  

  .header .nav .nav-item.on .sub-nav.on{transform: translateY(0);}

  

  

  

  .header .nav .nav-item.on .sub-nav.on a:nth-child(1){border-top: 1px solid #C7C9C8;}

  

  .sub-nav ul{flex-direction: column;}

  

  .sub-nav.on p,.login-dropmenu.on p{position: absolute; top: -60px; height: 59px;left: 0;padding-left: 30px; width: 40%; background: #fff;}

  

  .nav .nav-item .sub-nav{width: 100vw;}

  

  .search-box{height: 60px; line-height: 60px; padding: 0 30px;}

  

  .header_lan_txt{border-top: 1px solid #C7C9C8;border-bottom: 1px solid #C7C9C8; margin-top: 10px;}

  

  

  

  .nav .nav-item .sub-nav{width: 100%;}

  .nav .sub-nav .sub-nav-l,.nav .nav-item .sub-nav .sub-nav-r .sub-title,.nav .nav-item .sub-nav .sub-nav-r .sub-desc{display: none;}

  .nav .nav-item .sub-nav .sub-nav-r{width: 100%; padding: 0;}

  .sub-nav .sub-nav-r .pc-ul li{width: 100%; padding: 15px;}

  .nav .nav-item .sub-nav{padding: 0;}

  .nav .nav-item .sub-nav .sub-nav-box a{width: 49.5%;}

  

  

  

  .nav .nav-item .sub-nav,.nav .nav-item .sub-nav.pro_sub_menu{width: 100vw !important;}

  

  .about_sub_menu ul li{font-size: 14px; padding: 15px; border-bottom: 0;}

  

  .sub-nav  ul li .nav-text{font-size: 14px !important;}

  

  .sub-nav  ul li .nav-icon-box,.login-dropmenu ul li .login-dropmenu-icon{width: 20px; height: 20px;}

  

  .sub-nav  ul li,.login-dropmenu ul li{padding: 15px;}

  

  .login-btn{background: #fff;margin-left:10px; width: unset;}

  

  .login-btn > i{color: #333; font-size: 14px !important;}

  

  .login-dropmenu{

  

    position: relative;

  

    display: none;

  

    z-index: 18;

  

    text-align: left;

  

    box-shadow: none;

  

    left: 0;

  

    right: 0;

  

    top: 100%;

  

    width: 100%;

  

  }

  

  .header_kefu_icon{ padding-right: 0;}

  

  .search-box-div >input{width: 55vw;}



  

  }







.search-box{position: fixed; background: #fff; top: 0; left: 0; right: 0; z-index: 999; padding: 0 23%; display: flex; opacity: 0; justify-content: center; align-items: center; transform: translateY(-100%); cursor: pointer; transition: all .5s ease;}



.search-box .weui-cell {height: 1.14rem;}



.search-box input {border-bottom: 1px solid #d7d7d7; padding: 5px 0; width: 4.00rem; line-height: 36px; font-family: 'SourceHanSansCN-Regular';}



.search-box img {display: block; margin: 13px; width: 13px; height: 13px;}



.search-close {position: relative; margin-left: 8vw; width: 40px; height: 40px; transition: all .3s;}



.search-close::before, .search-close::after {position: absolute; top: 50%; left: 50%; display: block; content: ''; margin-top: -1px; margin-left: -8px; width: 16px; height: 2px; background-color: #333;}



.search-close::before {transform: rotate(45deg);}



.search-close::after {transform: rotate(-45deg);}



.search-close:hover {transform: rotate(180deg);}



.search-box.on {transform: translateY(0%); opacity: 1;}