@charset "utf-8";

/* iconfont*/
@import url("../font/iconfont/iconfont.css");


/* CSS Document*/
html, body {font-size: 12px;margin: 0;padding: 0;text-decoration: none; background: #fff; width:100%; height: 100%; -webkit-text-size-adjust: 100%;}
html{font-size: 62.5%;}
body{ position: relative; overflow-x:hidden; transition-property:all;}
a {	color: #666;text-decoration: none;outline:none;  }
a:hover, a:active { color:#002fa7;}
* { margin: 0;padding: 0;list-style: none;outline:none;box-sizing:border-box;font-family: 'sourcehansans', sans-serif;}
table {	border-collapse: collapse;}
ul, li {list-style: none;border: 0 none;padding: 0;margin:0;}
form {margin: 0;}
img {border: 0 none;text-align-last: center;vertical-align: middle;  outline:none; max-width:100%; width:auto; height:auto;}
center {text-align: left;	color: #999;height: 50px;}
#clear, .clear {clear: both;float: none!important;background: none;width: 0 !important;	height: 0 !important;margin:0 !important;padding:0 !important;}
#noData, .noData {color: #ccc;font-size: 14px;text-align: left;padding: 50px 0;}
.fl-left, .fl{ float:left;}
.fl-right, .fr{ float:right;}
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.mob{display:none;}
.hide{display: none;}
.show{display: block!important;}
.bsTop{width: 208px!important;}
.bsFrameDiv>div{height: 208px!important; width: 208px!important;}
.bsFrameDiv>div img{width: 100%; height: auto;}
.wrap{ width: 86%; max-width: 1440px; margin: 0 auto;}
::-webkit-scrollbar {width:8px;height: 1px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background:#666;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 10px;background: #ededed;}



/* head*/

#head{ position: fixed;z-index: 1000; left: 0; top: 0;width: 100%;height: 86px; background: #fff; border-bottom: 1px solid #e6e6e6; transition: all .35s;}
#head .logo{width: 200px; text-align: left; line-height: 86px;}
#head .toolbar{display: flex; width: 200px; line-height: 86px;justify-content: flex-end; align-items:center;}
#head .toolbar>div{display: inline-block; margin-left: 24px;}
#head .toolbar>div>a{ transition: all .35s;}
#head .toolbar>div>a img{filter: grayscale(100%); transition: all .35s;}
#head .toolbar>div>a:hover img{filter: grayscale(0);}
#head .toolbar .consult{display: none;}
#head .toolbar .navbar-toggler { display: none; cursor: pointer; overflow: hidden; box-sizing: border-box;width:24px;height:24px; -webkit-tap-highlight-color: transparent;-ms-touch-action: manipulation;touch-action: manipulation;}
#head .toolbar .navbar-toggler >span { position: relative; display:block;margin-top:10px; }
#head .toolbar .navbar-toggler >span,#head .toolbar .navbar-toggler >span:after,#head .toolbar .navbar-toggler >span:before { display: block;width:24px;height: 2px; border-radius: 4px; background-color: #1c1c1c;transition-duration: .4s;-webkit-transition-property: background-color,-webkit-transform;-moz-transition-property: background-color,-moz-transform; -o-transition-property: background-color,-o-transform; transition-property: background-color,transform;}
#head .toolbar .navbar-toggler >span:after,#head .toolbar .navbar-toggler >span:before { position: absolute; content: "";}
#head .toolbar .navbar-toggler >span:before {top: -8px;}
#head .toolbar .navbar-toggler >span:after {top: 8px; }
#head .toolbar .navbar-toggler .active span { background-color: transparent;}
#head .toolbar .navbar-toggler .active span:after,#head .toolbar .navbar-toggler .active span:before {}
#head .toolbar .navbar-toggler .active span:before {transform: translateY(8px)rotate(45deg);}
#head .toolbar .navbar-toggler .active span:after {transform: translateY(-8px)rotate(-45deg);}
#head .menu{ position: absolute;z-index: 60; left: 50%; top: 50%; transform: translate(-50%,-50%); width:60%; height: 86px; line-height: 86px;}
#head .menu>ul{margin:  0 auto;display: flex; justify-content: center; align-items: center;}
#head .menu>ul>li{display: inline-block; margin: 0 20px;}
#head .menu>ul>li>a{display: block; font-size: 1.5rem; color: #000; transition: all .35s;}
#head .menu>ul>li>a>span{position: relative;display: inline-block; height: 40px; line-height: 40px;}
#head .menu>ul>li>a>span:after{ position: absolute;z-index: 1; left: 50%;bottom: 0;width: 0;height: 1px; transform: translateX(-50%); background: #002fa7; content: '';transition: all .35s;}
#head .menu>ul>li>div{ display: none; position: absolute;z-index: 50; left: 0;width: 100%; line-height: 70px;  text-align: center;}
#head .menu>ul>li>div>a{display: inline-block; font-size: 1.5rem; color: #8b8b8b; margin: 0 15px; transition: all .35s;}
#head .menu>ul>li>div>a:hover{ color: #fff;}
#head .menu>ul>li.active>a>span:after, #head .menu>ul>li>a.active>span:after{width: 100%;}
#head .menubg{ display: none; position: absolute;z-index: 10; left: 0;top:86px; width: 100%; height: 70px; background: #000;}




/* end*/

/* navbar*/


#navbar{position: fixed;z-index: 1021; right: -100%; width: 100%; height: 100%; box-sizing: border-box; transition: all .35s;}
#navbar .mask{ display: none; position: absolute;z-index: 1; left: -50px; top: 0; width: 100%;height: 100%; background: rgba(0,0,0,.7); content: ''; }
#navbar .display{ position: absolute; right: 0; top: 0; z-index: 50; width: 76%;max-width: 500px; background: #000; height: 100%; padding: 50px 30px;  box-shadow:-3px 5px 20px rgba(0,0,0,.3);}
#navbar .display>.close{position: absolute;z-index: 50; top: 20px; right: 20px; width: 40px;height: 40px; line-height: 40px; text-align: center; cursor: pointer;}
#navbar .display>.close>i{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; font-weight: bold; transition: all .35s;}
#navbar .display>.close:hover i{transform:translate(-50%,-50%) rotate(180deg);}
#navbar .display>.menu{ position: relative;z-index: 50; margin: 0 auto;}
#navbar .display>.menu>ul>li{display: block; border-bottom: 1px solid rgba(255,255,255,.1);}
#navbar .display>.menu>ul>li:last-child{border: 0;}
#navbar .display>.menu>ul>li>a{ position: relative; display: block; height: 50px; line-height: 50px; font-size: 1.6rem; color: #fff;transition: all .35s;}
#navbar .display>.menu>ul>li>a.on:after{ position: absolute;z-index: 20; right: 0;top: 50%; transform: translateY(-50%);height: 40px; line-height: 40px; color: #fff; font-family: iconfont; font-size: 1.6rem; content: '\e686'; transition: all .35s;}
#navbar .display>.menu>ul>li>a.active:after{ content: '\e693';}
#navbar .display>.menu>ul>li>a.active{ }
#navbar .display>.menu>ul>li>div{ display: none; text-align: left; padding: 0 5px 10px 5px;}
#navbar .display>.menu>ul>li>div>a{display: block;font-size: 1.5rem; color: rgba(255,255,255,.8); padding: 5px 0;}
#navbar .display>.toolbar{ padding: 30px 0; text-align: left;}
#navbar .display>.toolbar>div{display: inline-block; margin-right: 20px;}
#navbar .display>.toolbar>div a{ transition: all .35s;}
#navbar .display>.toolbar>div a img{filter: grayscale(100%); transition: all .35s;}
#navbar .display>.toolbar>div a:hover img{filter: grayscale(0);}
#navbar .display>.toolbar .consult{display: none;}
#navbar .display>.lang{  position: absolute;z-index: 50; left: 30px; bottom: 30px; box-sizing: border-box;}
#navbar .display>.lang>a{ position: relative; display: block; line-height: 36px; transition: all .35s;}
#navbar .display>.lang>a:after{position: absolute;z-index: 1; right: 0;top: 50%; transform: translateY(-50%); height: 20px; line-height: 20px; font-family: iconfont; font-size: 1.6rem; content: '\e64e'; transition: all .35s;}
#navbar .display>.lang>a>i{display: inline-block;  vertical-align: top; font-size:1.8rem; color: #999; margin-right: 6px;}
#navbar .display>.lang>a>span{display: inline-block;vertical-align: top; font-size: 1.2rem; color: #999;}
#navbar .display>.lang>div{ display: none; position: absolute;z-index: 90; bottom: 50px; width: 180px; box-sizing: border-box;padding:10px; background: #f7f7f7;}
#navbar .display>.lang>div>a{display: block;text-align: left; padding: 5px 0; font-size: 1.2rem; color: #333;transition: all .35s;}
#navbar .display>.lang>div>a>img{height: 16px;width: auto; margin-right: 6px;}
#navbar .display>.lang>a.active span, #navbar .display>.lang>a.active i{color: #333;}
#navbar .display>.lang>a.active:after{transform: translateY(-50%) rotate(180deg);}
#navbar.active{right: 0;}
#navbar.active .mask{display: block;}


/* end*/







/* search*/

#search{ display: none; position: fixed;z-index: 1001; left: 0; top: 0; width: 100%;height: 100%; background: rgba(0,0,0,.9);}
#search>.display{ width: 76%; max-width:800px; height:100px; position:fixed; left:0; right:0; top:0; bottom:0; margin:auto; z-index:99;}
#search>.display .form{ margin: 0 auto; border-bottom: 1px solid rgba(255,255,255,.8); }
#search>.display .form>input{width:80%; height:40px; background:none;line-height:40px; padding:0 5px; color: #fff; box-sizing:border-box; font-size:2.4rem; float:left; border: 0;}
#search>.display .form>input::placeholder{color:#999; font-size: 2.4rem; font-weight:300;}
#search>.display .form>a{display:block; width:40px; height:40px; float:right; text-align:center; color:#fff; line-height:40px; transition:all .2s;}
#search>.display .form>a.search>i{font-size:2rem;}
#search>.display .form>a.close>i{font-size:1.6rem;}
#search>.display .form>a.search{background:none;}
#search>.display .form>a.search:hover{background:none;}
#search>.display .close{ padding-top: 30px; text-align: center;}
#search>.display .close>a{display: inline-block; width: 42px; height: 42px; line-height: 42px; border: 1px solid rgba(255,255,255,.5); border-radius: 100%; color: rgba(255,255,255,.8); transition: all .35s;}
#search>.display .close>a>i{font-size: 2rem;}
#search>.display .close>a:hover{ color: #fff; border-color: #fff; transform: rotate(180deg);}



/* end*/









/* path*/

#path{margin: 0 auto; padding: 25px 0;}
#path .wrap{display: flex;}
#path i{ position: relative; display: inline-block; font-size: 2rem; vertical-align: middle; margin-right: 6px;}
#path a{ position: relative; display: inline-block; vertical-align: middle; font-size: 1.4rem; color: #666; padding-right: 30px; text-transform: capitalize; transition: all .35s;}
#path a:after{position: absolute;z-index: 10; right: 0;top: 50%; width: 30px; text-align: center; font-family: iconfont; font-size: 1.2rem; font-weight: normal; content: '\e65f'; color: #999; transform: translateY(-50%);}
#path a:last-child{ padding-right: 0;}
#path a:last-child:after{display: none;}
#path a:hover{ color: #333; text-decoration: underline;}

/* end*/


/* banner*/

#banner{width:100%; position:relative; z-index:1; left:0; top:0;}
#banner>.inner{ position: relative; margin: 0 auto;}
#banner>.inner>.info{ position: absolute;z-index: 800; left: 50%;top: 50%;  transform: translate(-50%,-30%); text-align: left; }
#banner>.inner>.info>h3{ color: #fff;font-size: 3.6rem; font-weight: 400;}
#banner>.inner>.info>p{font-size: 1.4rem; color: #fff; text-transform: uppercase;}
#banner>.inner>.bg{ position: relative;z-index: 1; background-size: cover; background-position: 50% 50%;}
#banner>.inner>.bg img{ width: 100%; height: auto;}
#banner>.inner>.search{ position: absolute;z-index: 900; width: 100%; left: 50%;bottom:18%;  transform: translateX(-50%); text-align: center; }
#banner>.inner>.search .form{position: relative; width: 100%; margin: 0 auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.8); }
#banner>.inner>.search .form>input{width:100%; height:60px; background:none;line-height:60px; padding:0 5px; color: #fff; text-align: center; box-sizing:border-box; font-size:1.8rem; border: 0;}
#banner>.inner>.search .form>input::placeholder{color:#999; font-size: 1.8rem; font-weight:300;}
#banner>.inner>.search .form>a{display:block; width:60px; height:60px; line-height:60px; position: absolute;z-index: 10; right: 20px; top: 50%; transform: translateY(-50%); text-align:center; color:#fff; transition:all .2s;}
#banner>.inner>.search .form>a.go>i{font-size:3rem;}
#banner>.inner>.search .types{ display: flex;justify-content: center;align-items: center; padding: 20px 0; margin: 0 auto}
#banner>.inner>.search .types>.row{display: inline-block; position: relative; margin:0 30px;}
#banner>.inner>.search .types>.row>a{ position: relative; display: block; padding-left: 32px; font-size: 1.8rem; color: #fff;transition: all .35s;}
#banner>.inner>.search .types>.row>a:after{position: absolute;z-index: 1; left: 0; top: 50%; transform: translateY(-50%); width: 20px;height: 20px; border: 2px solid #fff;  border-radius: 100%; content: ''; transition: all .35s;}
#banner>.inner>.search .types>.row>a.active:after{ background: #fff;}



/* end*/


/* nav*/

#nav{ position: relative;z-index: 30; width: 100%; margin: 0 auto; border-bottom: 2px solid #efeff1;}
#nav ul>li{display: inline-block; float: left; margin-right: 40px;}
#nav ul>li>a{ position: relative; display: block;color: #000;font-size: 1.7rem; height: 70px; line-height:70px; transition: all .35s;}
#nav ul>li>a:after{position: absolute;z-index: 2; left: 0; bottom: 0; width: 100%;height: 4px;background: #002fa7; content: ''; opacity: 0; transition: all .35s;}
#nav ul>li>a.active{}
#nav ul>li>a.active:after{opacity: 1;}
#nav ul>li>a:hover{color: #002fa7;}
#nav .pgwMenu { position: relative; padding: 0;margin: 0; text-align: left; }
#nav .pgwMenu ul { list-style: none; white-space: nowrap;}
#nav .pgwMenu .pm-dropDown{ display: none;position: relative; width: 100%;margin: 0 auto; text-align: left; border-radius: 3px; }
#nav .pgwMenu .pm-dropDown>a{position: relative; display: flex; justify-content: flex-start; align-items: center;  color: #000; font-size: 1.8rem;  height: 60px; line-height: 60px;  text-decoration: none;}
#nav .pgwMenu .pm-dropDown>a>i{ display: inline-block; margin-left: -10px; width: 15px; overflow: hidden; font-size: 2rem; color: #002fa7;}

#nav .pgwMenu .pm-links{display: block;}
#nav .pgwMenu .pm-links.mob{ position: absolute;z-index:100; left: 0; width: 100%; background: rgba(0,0,0,.9); padding: 20px; box-shadow: 0 3px 8px rgba(0,0,0,.1); overflow: hidden; }
#nav .pgwMenu .pm-links.mob>li{ display:block!important; float: none; padding: 0;margin: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
#nav .pgwMenu .pm-links.mob>li:last-child{border-bottom: 0;}
#nav .pgwMenu .pm-links.mob>li>a{display: block; height: 50px;line-height: 50px; border: 0; border-radius: 0; color: #fff;}
#nav .pgwMenu .pm-links.mob>li>a:after{display: none;}
#nav .pgwMenu .pm-links.mob>li>a:hover{color:rgba(255,255,255,.8);}
#nav .pgwMenu .pm-viewMore{ display: none;position: relative;vertical-align:top;}
#nav .pgwMenu .pm-viewMore>a{position: relative; display: inline-block; text-align: center; font-size: 1.4rem;  margin-left: 10px; width: 70px; height: 70px; line-height: 70px; color: #888; text-decoration: none;}
#nav .pgwMenu .pm-viewMore>a>i{font-size: 2.4rem;}
#nav .pgwMenu .pm-viewMore>ul{ position: absolute;z-index: 3; right: 0; margin-top: 10px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.1); }
#nav .pgwMenu .pm-viewMore>ul>li{ display:block!important; padding: 0 20px;margin: 0; background: #fff;}
#nav .pgwMenu .pm-viewMore>ul>li:after{display: none!important;}
#nav .pgwMenu .pm-viewMore>ul>li>a{display: block; color: #666; border: 0; border-radius: 0; height: 60px; line-height: 60px; border-bottom: 1px solid rgba(0, 0, 0, .1); transition: all .35s;}
#nav .pgwMenu .pm-viewMore>ul>li>a:hover{color: #002fa7;}
#nav .pgwMenu .pm-viewMore>ul>li:last-child>a{border-bottom: 0;}

/* end*/





/* page */

.page{ position: relative; top: -20px; display: flex;margin: 0 auto; justify-content: center; align-items: center;}
.page .pagenum{ display: inline-block;vertical-align: middle; text-align: center;}
.page .pagenum>a{display:inline-block; border:1px solid transparent; margin: 0 5px; background: #fff; width:32px;height:32px; line-height:32px;text-align:center; font-size:1.4rem; color:#676767; transition:all .35s;}
.page .pagenum>a:hover{color: #002fa7; }
.page .pagenum>a.active{ border-color: #002fa7;  color: #002fa7;}
.page .prev, .page .next{display: inline-block;vertical-align: middle;}
.page .prev>a, .page .next>a{display: inline-block; margin: 0 5px; background: #fff; width:32px;height:32px; line-height:32px; text-align: center; font-size: 1.4rem; color: #676767;transition: all .35s;}
.page .prev>a>span, .page .next>a>span{display: none;}
.page .prev>a:hover, .page .next>a:hover{color: #002fa7;}
.page .null{ opacity: .3; color: #666!important; background: #fff!important; border-color: #ddd!important;}
.page .pagenum>a.pageell{ background: none; color: #676767; border: 0!important;}
.page .pagesmall{display: none; vertical-align: middle; font-size: 1.4rem; color: #999; padding: 6px 20px; text-align: center;}
.page .pagesmall>span{color: #002fa7;}



/* end*/






/* foot*/


#foot{ position: relative;z-index: 3; margin: 0 auto; padding: 30px 0 10px 0; background: #000;}
#foot .main{ display: block; padding: 20px 0; margin: 0 auto;}
#foot .main>.intro{ display:block;}
#foot .main>.intro>.logo{ text-align: left;}
#foot .main>.intro>.info{text-align: left; padding: 15px 0;}
#foot .main>.intro>.info>p{ font-size: 1.4rem; color: rgba(255,255,255,1); margin-top: 10px;}
#foot .main>.nav{ display: inline-block; box-sizing: border-box; width: 50%;}
#foot .main>.nav>ul{ display: flex;justify-content: space-between; flex-direction: row;}
#foot .main>.nav>ul>li{display:inline-block;}
#foot .main>.nav>ul>li>.tit{display: block; font-size: 1.6rem; color: #999;transition: all .35s;}
#foot .main>.nav>ul>li>.tit>a{display: block;color: #999;}
#foot .main>.nav>ul>li>.box{display: block;padding-top: 10px;}
#foot .main>.nav>ul>li>.box>a{display: block;font-size: 1.2rem;padding-bottom: 8px; color: #999; transition: all .35s;}
#foot .main>.nav>ul>li>.box>a:hover{color:#fff;}

#foot .contact{margin: 0 auto; padding: 10px 0;}
#foot .contact>.hotline{ display: block;}
#foot .contact>.hotline>.row{display: inline-block; margin-right: 45px;}
#foot .contact>.hotline>.row>p{ display: block; font-size: 1.4rem; color: #fff;}
#foot .contact>.hotline>.row>h3{font-size: 2.4rem; font-weight: 700; color: #fff;}
#foot .contact>.social{ width: 50%; display: flex; text-align: left;}
#foot .contact>.social>.row{ position: relative; display: inline-block; margin-right: 60px;}
#foot .contact>.social>.row>a{display: block;}
#foot .contact>.social>.row>a>.ico{text-align: center; transition: all .35s;}
#foot .contact>.social>.row .box{ display: none; position: absolute;z-index: 30; left: 50%; bottom:55px; transform: translate(-50%,0); width: 130px;height: 130px; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,.3);}
#foot .contact>.social>.row .box:after{ position: absolute;z-index: 12; left: 50%; bottom: -8px; transform: translateX(-50%); width:0;height:0;border-left:8px solid transparent; border-right:8px solid transparent;border-top:8px solid #fff; content: ''; }
#foot .contact>.social>.row>a:hover .ico{opacity: .3;}
#foot .contact>.social>.row>a:hover .box{display: block;}

#foot .copy{margin: 10px auto 0  auto; padding: 10px 0;font-size: 1.2rem;color: #666; text-align: left; border-top: 1px solid #555;}
#foot .copy a{display: inline-block; margin-right: 10px; color: #666;transition: all .35s;}
#foot .copy a:hover{text-decoration: underline;}

/* end*/

@media only screen and (min-width: 1500px){

    #banner>.inner{  background: none!important;}

}

@media only screen and (max-width: 1460px){


    #head .logo img{height: 26px;}
    #head .menu>ul>li{ margin-left: 40px;}


}

@media only screen and (max-width: 1280px){

    #banner>.inner>.info>h3{ font-size: 2.8rem; }
    #banner>.inner>.info>p{font-size: 1.3rem;}
    #banner>.inner>.bg img{object-fit: cover; object-position:center; aspect-ratio:2;}

}







@media only screen and (max-width: 1200px){

    #head {height: 60px;}
    #head .menu{ display: none;}
    #head .logo{width: auto; line-height: 60px;}
    #head .logo img{height: 20px!important;}
    #head .toolbar {line-height: 60px; height: 60px;}
    #head .toolbar .navbar-toggler  { display: block; top: 30px;}
    #head .toolbar .store{display: none;}
    #head .toolbar .shop{display: none;}
    #head .toolbar .search{display: none;}

    #banner>.inner>.search{ bottom:16%; }
    #banner>.inner>.search .types>.row>a{ padding-left: 28px; font-size: 1.6rem;}
    #banner>.inner>.search .types>.row>a:after{width: 18px;height: 18px;}


    #foot .main{ display: block; padding: 50px 0;}
    #foot .main>.intro{ display: block; width: 100%; float: none;}
    #foot .main>.intro>.hotline {padding: 10px 0; }
    #foot .main>.nav{ display: block; width: 100%; float: none; padding: 0 0 50px 0;}



}


@media only screen and (max-width: 1080px){

    #banner>.inner>.search{ bottom:12%; }
    #banner>.inner>.search .form>input{height:50px; line-height:50px;}
    #banner>.inner>.search .form>a{width:50px; height:50px; line-height:50px;}
    #banner>.inner>.search .types>.row{margin:0 20px;}



    #foot .main>.intro>.logo { display: none;}
    #foot .contact>.hotline { float: none;  }
    #foot .contact>.social{ width: 100%; float: none; padding-top: 20px;}
    #foot .contact>.social>.row{ margin-right: 30px;}
    #foot .contact>.social>.row .ico>img{width: 32px;}
}




@media only screen and (max-width: 960px){

    .page .pagenum>a{width:28px;height:28px; line-height:28px;font-size:1.3rem;}
    .page .prev>a, .page .next>a{ width:28px;height:28px; line-height:28px; font-size: 1.3rem;}
    .page .pagesmall{font-size: 1.3rem; }

}


@media only screen and (max-width: 860px){

    #banner>.inner>.info{ top: 52%; transform: translate(-50%,0); }
    #banner>.inner>.info>h3{ font-size: 1.8rem;}
    #banner>.inner>.info>p{font-size: 1.2rem;}
    #banner>.inner>.search{ bottom:6%; }
    #banner>.inner>.search .form>input{height:40px; line-height:40px;font-size: 1.5rem;}
    #banner>.inner>.search .form>a{width:40px; height:40px; line-height:40px;}
    #banner>.inner>.search .form>a.go>i {font-size: 2.4rem; }
    #banner>.inner>.search .types>.row{margin:0 15px;}
    #banner>.inner>.search .types>.row>a { padding-left: 26px; font-size: 1.4rem;}
    #banner>.inner>.search .types>.row>a:after {width: 16px; height: 16px;}



    #nav ul>li>a{ font-size: 1.6rem;}

    #foot .main>.nav{display: none;}
    #foot .main>.nav>ul{display: block;}
    #foot .main>.nav>ul>li{display: block; border-bottom: 1px solid rgba(255,255,255,.07);}
    #foot .main>.nav>ul>li:last-child{border-bottom: 0;}
    #foot .main>.nav>ul>li>.tit{font-size: 1.6rem;}
    #foot .main>.nav>ul>li>.tit>a{padding: 15px 0; position: relative;}
    #foot .main>.nav>ul>li>.tit>a:after{position: absolute;z-index: 1; right: 10px; top: 50%; height: 30px; line-height: 30px; transform: translateY(-50%); text-align: right;opacity: .5; font-family: iconfont; font-size: 1.4rem; content: '\e624';}
    #foot .main>.nav>ul>li>.box{display: none;}



}

@media only screen and (max-width: 780px){

    #banner>.inner>.search{ bottom:6%; }

}


@media only screen and (max-width: 640px){


    #banner>.inner>.info{ top: 48%; }
    #banner>.inner>.search .types>.row{margin:0 10px;}
    #banner>.inner>.search .types>.row>a { font-size: 1.2rem;}
    #banner>.inner>.search .types>.row>a:after {width: 14px; height: 14px;}


    #search>.display .form>input{ font-size:2rem;}
    #search>.display .form>input::placeholder{font-size: 2rem;}
    #search>.display .close>a{width: 36px; height: 36px; line-height: 36px;}
    #search>.display .close>a>i{font-size: 1.6rem;}


    #nav ul>li {margin-right: 20px; }

    .page .pagenum{display: none;}
    .page .pagesmall{display: inline-block;}


    #foot {padding: 20px 0;}
    #foot .copy>span{display: none;}
    #foot .main {padding: 20px 0 0 0; }
    #foot .main>.nav>ul>li>.tit{font-size: 1.4rem;}
    #foot .main>.nav>ul>li>.tit>a{padding: 10px 0;}
    #foot .main>.intro>.info{padding:5px 0; }
    #foot .main>.intro>.info>p {font-size: 1.3rem; margin-top: 5px; }
    #foot .main>.intro>.logo img{ height: 20px; }
    #foot .contact>.hotline>.row { margin-bottom: 10px;}
    #foot .contact>.hotline>.row>h3 { font-size: 2rem; }
    #foot .contact>.social { padding-top: 5px;}
    #foot .contact>.social>.row{ margin-right: 20px;}


}


@media only screen and (max-width: 540px){

    #banner>.inner>.search{bottom: 0;}
    #banner>.inner>.search .types{display: block; width: 70%;}
    #banner>.inner>.search .types>.row{margin:5px 10px; }

}

@media only screen and (max-width: 420px){

    #banner>.inner>.search .types{width: 100%;}

}