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

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

body {font-size: 16px; word-break: break-word;}

::-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{font-size: 12px;}

.f14{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);}

.f43{font-size: calc(16px + 1.415vw);}

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

.f48{font-size: 0.48rem;}





.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: 74.75%;   padding: 0;}

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

}


@media (min-width: 993px){
  .container2 {  width: 83.1%;  padding: 0; margin: auto;}

  .f12{font-size: 0.12rem;}

  .f14{font-size: 0.14rem;}

  .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;}

  .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: 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.90rem; line-height: 0.90rem; border-bottom: 1px solid rgba(255,255,255,0.2); position: fixed;z-index: 15; width: 100%; left: 0; top: 0;  background: transparent; display: flex; align-items: center; justify-content: space-between; padding: 0 5.25vw;}

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

.header_logo img{display: block; height: 0.30rem;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; justify-content: center;}

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

.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: 0; left: 50%;transform: translateX(-50%); height: 3px; background: #CA3935; width: 0; transition: width 0.36s linear; opacity: 0;}

.nav .nav-item .sub-nav{width:100vw; left: 0; top: 0.90rem;  display: none;  z-index: 15; height: 1.1rem;

  background: rgba(97, 97, 97, 0.45);filter: blur(0px);

  box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.08);}

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





.sub-nav  ul{display: flex; align-items: center; justify-content: center; width: 100%;}

.sub-nav  ul li{ cursor: pointer; line-height: initial; border-radius: 0.04rem; background: transparent; padding: 0.18rem 0.22rem; flex-direction: column;}

.sub-nav  ul li .nav-icon-box{width: 0.40rem; height: 0.40rem; position: relative;margin-right: 0.09rem;}

.sub-nav  ul li .nav-icon-box img{position: absolute; left: 0; top: 0; width: 100%; }

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

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

.sub-nav  ul li  .nav-text{ color: #fff; flex: 1;}

.sub-nav .sub-nav-box .sub-nav-r{width: 60%; padding: 0.20rem 0.34rem 0.38rem 0.30rem; border-left: 1px solid #e2e2e2;}

.sub-nav-r-content{display: none; }

.sub-nav-r-content.act{display: block; }

.sub-nav-r-content .title{ margin-bottom: 0.17rem; line-height: initial;}

.sub-nav-r-content .sub_r_img{ width: 100%; }

.sub-nav-r-content .txt{line-height: 0.28rem;  margin-top: 0.15rem;}

.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%;}

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

.header_search_icon{cursor: pointer; height: 100%; padding-right: .45rem;}

.header_search_icon >i,.header_lan >i{color: #fff;   }

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

.login-btn{display: flex; cursor: pointer; font-size: 0.16rem;height: 0.44rem;justify-content: center;align-items: center;

 border-radius: 0.08rem; align-items: center; color: #fff; }

.login-btn > i{font-size: 0.16rem !important; margin-left: 7px;}

.login-dropmenu{width: 100%; right: 0; top: 0.90rem;  display: none;  z-index: 15;

  background: #FFFFFF;box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.08);}

.login-dropmenu a{display: block; color: #333; text-align: center; line-height: .5rem;}



.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;}



@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_search_icon >i,.header.on .header_lan_txt a.on{color: #333;}

.header.active  .nav .nav-item >a,.header.active .header_lan >i,.header.active .header_search_icon >i,.header.active .header_lan_txt a.on{color: #333;}

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

.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);}



.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: #CA3935;}



.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{background: #4F84FF; } */

.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{color: #CA3935;}

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

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





}

@media (max-width: 993px){

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

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

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

.header .header_logo  .logo1,.header_logo  .logo1{display: none;}

 .header .header_logo  .logo2,.header_logo  .logo2{display: block;}

 .header.active .header_logo img{transform: translateY(0); }

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

.header .header_search_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 .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 .nav .nav-item .has_subnav::before{position: absolute;content: ''; transition: all .6s; width: 8px; height: 1px; right: 0; top: 50%; background-color: #333; transform: translateY(-50%); }
.header .nav .nav-item .has_subnav::after{position: absolute;content: '';  opacity: 1; transition: all .6s; width: 1px !important; height: 8px; left: unset; right: 4PX; top: 50%; background-color: #333; transform: translateY(-50%); }

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

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



.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 .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 .sub-nav-box .sub-nav-r{display: none;}

.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_search_icon{ padding-right: 0;}

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

}

/* footer */

.footer{background: #F5F5F5; padding: .6rem 0 .92rem;}

.footer-logo img{ height: 30px;}

.footer-list-left{margin-top: .6rem;}

.footer-list-left .item{width: 32px; height: 32px;position: relative; display: block; margin-right: .2rem; margin-bottom: .2rem; transition: all .3s; cursor: pointer;}

.footer-list-left .item > img{border-radius: 50%; overflow: hidden ; transition: all .3s;}

.footer-nav-list .footer-item{width: 23%;  color: #333; }

.footer-nav-list .footer-item:nth-child(2){width: 31%;}

.footer-nav-list .footer-item .footer-item-title{font-size: 16px; font-weight: 600; margin-bottom: 10px; line-height: 26px;}

.footer-nav-list .footer-item .footer-sublist a{font-size: 14px; color: #333;  display: block; padding: 8px 0; font-weight: 400; transition: all .3s;}

.copyright{border-top: 1px solid #E0E0E0;background: #F5F5F5; padding: .4rem 0 .58rem;font-size: 14px; }

.copyright a{color: #AAAAAA;margin-right:.4rem; transition: all .3s;}

.copyright-right{text-align: right;}

.code-img{position: absolute; left: 0; top: calc(100% + 5px);  border: 1px solid red; border-radius: 4px;  opacity: 0; visibility: hidden; width: 0; height: 0; transition:  height .36s;}

@media (min-width: 993px) {

  .footer-sublist a:hover{transform: translateX(10px);}

  .footer-list-left .item:hover img{ box-shadow: 0px 8px 16px 0px rgba(192, 192, 192, 1);}

  .copyright-right a:hover{color: #333;}

  .code:hover .code-img{width: 150px; height: 150px; opacity: 1; visibility: visible;}

}



@media (max-width: 993px) {

  .footer-logo img{height: 20px;}

  .copyright{padding: 15px 0;}

  .copyright ,.copyright-right{text-align: center;}

  .copyright  .d-flex{flex-wrap: wrap;}
  .search-box-div{padding: 0 5%;}
  .search-box-div input::placeholder{font-size: 12px;}

}

/* 侧边悬浮按钮 */

 .aside-box{position: fixed;  right:0px ; display: none;  text-align: center; bottom: 15vw;

   z-index: 50;  }

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

.aside-box ul {margin-bottom: 0;box-shadow: -4px 4px 14px 0px rgba(32,32,32,0.08);   background: #fff;border-radius: 0.08rem 0px 0px 0.08rem;}

.aside-box ul li,.aside-top{cursor: pointer;z-index: 6; padding:0.14rem 0.040rem 0.14rem; font-size: 12px;border-bottom: 1px solid #eee; width: .68rem;}

.aside-box ul li:first-child{border-top-left-radius: 0.08rem; }

.aside-box ul li:last-child{border-bottom: 0;padding: 0.09rem 0.10rem;border-bottom-left-radius: 0.08rem; }

.aside-box ul li .item,.aside-top .item{width: 100%; display: block;color: #333;}

.aside-box ul li .sub-aside{

text-align: left;

bottom: 0;right:0; opacity: 0;visibility: hidden;

box-shadow: 0px 4px 12px 0px rgba(51,51,51,0.1), inset 0px 2px 0px 0px #FFFFFF;

border-radius: 4px;

border: 1px solid #DDECFF;

pointer-events: none;

z-index: -1;

}

.aside-code{padding: 0.24rem 0.30rem;  width: 1.84rem;min-width: 140px; background-color: #fff; text-align: center !important; }

.aside-code  .aside-img{width: 1.20rem; height: 1.20rem;  }

.aside-tel{color: #0B1F2D;} */

/* .aside-box ul li:hover  .sub-aside{ right: calc( 72rem + 8rem); opacity: 1; visibility: visible;} */



.aside-tel-box{padding: 0.12rem 0.16rem;width:1.60rem; min-width: 140px; height: 100%;}

.aside-box ul  li:hover  .sub-aside{ pointer-events: all;right: calc( 100% + 0.08rem); opacity: 1; visibility: visible;}

.aside-top{  border-radius: 0.08rem 0 0 0.08rem; margin-top: 10px; background: #fff;box-shadow: -4px 4px 14px 0px rgba(32,32,32,0.08);}



@media (min-width: 993px) {

  .zixun-btn:hover{ background-color: #4F84FF ; color: #fff;}

  .footer-bd .d-flex-item dd a:hover{ color: rgba(255, 255, 255, 1);}

  .aside-box ul li:hover,.aside-top:hover{background: #E4091B; }

  .aside-box ul li:hover .item,.aside-top:hover .item{color: #fff;}

}

@media (max-width:993px) {

  .aside-box ul {display: none;}

  .aside-top{padding:4px 6px; width: 40px;}

  .aside-top .iconfont{font-size: 30px !important;}

}





.el-pagination {margin-top: 40px; padding: 2px 5px; text-align: center; color: #333;}

.el-pagination button {margin: 5px; background: none; line-height: 34px; font-size: 12px; color:#333; transition: all .3s;}

.el-pagination button i {padding: 0 5px; font-style: normal; font-family: serif; font-weight: bold;}

.el-pager {margin-left: 0.30rem; margin-right: 0.30rem; user-select: none; display: inline-block; vertical-align: top; font-size: 0;}

.el-pager a {padding: 0 4px; background: #fff; vertical-align: top; display: inline-block; font-size: 12px; color: #333; min-width: 34px; height: 34px; line-height: 34px; cursor: pointer; box-sizing: border-box; text-align: center; margin: 5px; transition: all .3s;}

.el-pager a.active {background: #cf263a; color: #fff; border-radius: 50%;} 



.ui-select-wrap > span{position: relative; display: block; margin-bottom: 5px; padding-right: 20px; overflow: hidden; height: 44px; line-height: 44px; color: #999; cursor: pointer;}

.ui-select-wrap > span::after{position: absolute; content: ''; display: block; right: 2px; top: 15px; width: 8px; height: 8px; border-right: 2px solid #333; border-bottom: 2px solid #333; transform: rotate(45deg); transition: all .3s;}

.ui-select-wrap > span.on::after{top: 19px; transform: rotate(-135deg);}

.ui-select-option {position: absolute; z-index: 10; left: 0; right: 0; top: 100%; display: none; max-height: 264px; overflow-y: auto; background: #fff; -webkit-overflow-scrolling: touch; border-radius: 0 0 10px 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, .1);}

.ui-select-option span {display: block; padding: 0 15px; height: 44px; font-size: 14px; line-height: 44px; color: #333; overflow: hidden; transition: all .3s; cursor: pointer;}



.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;}