body{font-size: 16px;} 
.w90{ width: 92%;max-width: 1978px; margin: 0 auto; } 
.w80{ width: 80%; margin: 0 auto; max-width: 1480px;}
.banImg{ width: 100%; height: 100vh; object-fit: cover;}
.zw{ padding-top: 100px; margin-top: -100px;}
.zwDiv{ height: 100px;}
header{ width: 100%; position: fixed; top: 0;top: 0; z-index: 100; color: #fff;}
header::after{ transition:all .36s ; width: 100%; height: 1px; display: block; content: ''; background: rgba(255, 255, 255, .38); position: absolute; left: 0; bottom: 0; -webkit-transition:all .36s ; -moz-transition:all .36s ; -ms-transition:all .36s ; -o-transition:all .36s ; }
header .con{ padding: 0 3.6vw;}
.headerLogo{ font-size: 24px;}
.logoIcon{ filter: invert(100%) grayscale(100%) brightness(500%); -webkit-filter: invert(100%) grayscale(100%) brightness(500%);height:50px;}
.oneNav{ line-height: 100px; display: block; font-size: 18px; padding: 0 1.8vw; white-space: nowrap;}
.oneNav span{ position: relative; display: inline-block;}
.oneNav span::after{ width: 100%; height: 2px; display: block; content: ''; transform: scale(0,1); background: #fff; position: absolute; left: 0; bottom: 0; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; -webkit-transform: scale(0,1); -moz-transform: scale(0,1); -ms-transform: scale(0,1); -o-transform: scale(0,1); }
nav li.on .oneNav span::after,nav li:hover .oneNav span::after{ transform: scale(1,1); -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); }
nav:hover > li:not(:hover) .oneNav span::after{ transform: scale(0,1); }
.searchtopBtn{ padding-left: 3.6vw; border-left: 1px solid rgba(255, 255, 255, .38); height: 100px;}
nav li dl{ position: absolute; color: #333;pointer-events: none; 
           padding-left: 3.6vw; padding-right: 3.6vw;
           left: 50%; width: 100vw; margin-left: -50vw; top: 100px; background-color: #fff; box-shadow: 0 5px 5px rgba(0, 0, 0, .15); text-align: center; transition: all .36s; -webkit-transition: all .36s; -moz-transition: all .36s; -ms-transition: all .36s; -o-transition: all .36s; }
nav li dl{  visibility:hidden; opacity:0; transform: translateY(20px); }
nav li:hover dl{pointer-events: auto; visibility:visible; opacity:1; transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); }
.downNav .iconfont{ font-size: 14px;}
.downNav dd:hover{ color: #093e96;}
.downnavline{ height: 2px; width: 40px;}

header.scroll::after{ height: 100%; background: #fff;}
header.scroll{ color: #333; box-shadow: 0 0 15px rgba(0,0,0,.15);}
header.scroll li.on .oneNav{ color: #093e96;}
header.scroll .oneNav span::after{ background: #093e96;}
header.scroll li:hover { font-weight: bold;}
header.scroll .logoIcon{ filter: grayscale(0%) brightness(100%); -webkit-filter: grayscale(0%) brightness(100%); }
header.scroll .searchtopBtn{ border-color: rgba(0,0,0,.1);}
.searchBox{ background :  #8F8E94; z-index: 15; transform: translateY(-105%); transition:all .6s ; -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; -webkit-transform: translateY(-105%); -moz-transform: translateY(-105%); -ms-transform: translateY(-105%); -o-transform: translateY(-105%); }
.searchBox .form{ width: calc(100% - 80px);}
.searchBox .keys{ width: 80%; background: url(../images/search-w.png) no-repeat left center; }
.searchBox .submit{ width: 90px; height: 40px; border: 1px solid #fff;}
.searchBox input::-webkit-input-placeholder  {color:rgba(255, 255, 255, .65);}
.searchBox input:-moz-placeholder {color:rgba(255, 255, 255, .65);;}
.searchBox input::-moz-placeholder {color:rgba(255, 255, 255, .65);;}
.searchBox input:-ms-input-placeholder  {color: rgba(255, 255, 255, .65);;}
.searchBox.show{ transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); }
.h_nav{ height: 60px; width: 60px; background-color:#093e96; padding: 18px 8px ;    align-items: flex-end; display: flex;}
.h_nav .burger{ width: 100%;  height: 1px ; background: #fff;  transition: .8s; display:inline-block;       }
.h_nav .burger:first-child{ animation: long 2s linear infinite; -webkit-animation: long 2s linear infinite; }
.h_nav .burger:nth-of-type(2){  width: 50%;}
.h_nav .burger:nth-of-type(3){ animation: long 3s linear infinite; -webkit-animation: long 3s linear infinite; }
.h_nav.close .burger:first-child{ display: none;}
.h_nav.close .burger:nth-of-type(3){ display: none;}
.h_nav.close .burger:nth-of-type(2) {    position: relative;    z-index: 1; width: 80%;}
.h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after {      content: '';   position: absolute;      top: 0;      left: 0;      width: 100%;      height: 100%;      background: #fff;      opacity: 0;      z-index: 1;}
.h_nav.close .burger:nth-of-type(2) {    background: transparent;    transform: rotate(-180deg); }
.h_nav.close .burger:nth-of-type(2):before, .h_nav.close .burger:nth-of-type(2):after {      opacity: 1;      transition: all .3s; }
.h_nav.close .burger:nth-of-type(2):before {     transform: rotate(45deg); }   .h_nav .burger:nth-of-type(2):after {     transform: rotate(-45deg); }
.h_nav.close{align-items: center; justify-content: center;}
.nav{ color: #fff !important; width: 100%; height: calc(100vh - 60px) ; transition:all .6s ; transform: translateX(100%); background-color: #000; position: fixed; top: 60px; right: 0; flex-direction: column; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); -webkit-transition:all .6s ; -moz-transition:all .6s ; -ms-transition:all .6s ; -o-transition:all .6s ; }
.nav.show{ transform:translateX(0) ;  -webkit-transform:translateX(0) ; -moz-transform:translateX(0) ; -ms-transform:translateX(0) ; -o-transform:translateX(0) ; }
.nav li.go-child{ border-top: 1px solid rgba(255, 255, 255, 0.25); position: relative;}
.nav li.go-child>a{ line-height: 60px; padding: 0 20px; font-size: 16px;}
.nav{  overflow-y: scroll;  padding-bottom: 63px; }
.nav::-webkit-scrollbar {/*滚动条整体样式*/    /*高宽分别对应横竖滚动条的尺寸*/  width: 1px;}
.nav::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 3px; background: #000; width: 1px; }
.nav::-webkit-scrollbar-track {/*滚动条里面轨道*/border-radius: 3px; background: rgba(0,0,0,.1); width: 1px; }
.erji{ width: 60px; height: 60px; position: absolute; right: 0 ; top: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; z-index: 10;
       background: url(../images/jia.png) no-repeat center center; background-size: 40% auto;}
.nav li.go-child.on .erji{ background: url(../images/jian.png) no-repeat center center; background-size: 40% auto;}
.nav-down li a{ line-height: 50px; border-top: 1px solid rgba(255, 255, 255, 0.25); display: block; padding-left: 25px; font-size: 14px; opacity: 0.8; }

.zx-box {background-image: url(../images/zx_bg.jpg?v=1);background-size: cover;background-repeat: no-repeat;height: 150px;}
.zx-box>div {height: 100%;}
.zx-box a {color: #fff;width: 220px;border-radius: 23px;border: solid 1px #ffffff;line-height: 46px;text-align: center;display: inline-block;}

footer{background: #282f36;}
footer a:hover{ color: #fff;}
footer .top {     border-bottom: 1px solid rgba(255,255,255,0.09);}
footer .center dl dt:after{content: '';display: block;width: 14px;height: 2px;background: #fff;margin-top: 8px; margin-bottom: 8px;}
footer .center dl dd{ color: #757575; padding: 3px 0;}
footer .bottom{ background: #2e343a;}
.footlogoIcon{height: 50px;filter: invert(100%) grayscale(100%) brightness(500%);
    -webkit-filter: invert(100%) grayscale(100%) brightness(500%);}
.popCode{ width: 50px; height: 50px; color: #fff !important;}
.popCode .iconfont{ font-size: 24px;}
.popCode .img{width: 120px;position: absolute;left: 50%;top:calc(100% + 15px);z-index: 5;background: #fff;transform: translateX(-50%);display: none;box-shadow: 0 0 8px rgba(0,0,0,.15);padding: 2px;border-radius: 5px}
.popCode .img:before{content: '';border: 10px solid transparent;border-bottom-color: #fff;position: absolute;bottom: 100%;left: 50%;transform: translateX(-50%);}
.popCode:hover .img{display: block;}

@media screen and (max-width:1440px) {
    body{ font-size: 14px;}
    .w80{ width: 86%; }
    header .con{padding: 0 3vw;}
    .searchtopBtn{ padding-left: 3vw;}
    .oneNav{ line-height: 80px;}
    .searchtopBtn{ height: 80px;}
    .zw{ padding-top: 80px; margin-top: -80px;}
    .zwDiv{ height: 80px;}
    nav li dl{ top: 80px;}
}

@media screen and (max-width:1280px) { 
    .w80{ width: 90%;}
    .oneNav{ line-height: 70px; font-size: 16px;}
    .zw{ padding-top: 70px; margin-top: -70px;}
    .zwDiv{ height: 70px;}
    .searchtopBtn{ height: 70px;}
    nav li dl{ top: 70px;}
    .headertel .DIN{ display: none;}
    .searchtopBtn{ margin-left: 0;}
}

@media screen and (max-width:1040px) {
    .w80{ width: 96%;}
    .oneNav{ line-height: 60px; }
    .zw{ padding-top: 60px; margin-top: -60px;}
    .zwDiv{ height: 60px;}
    .searchtopBtn{ height: 60px;}
    nav li dl{ top: 60px;}
    nav li dl .img{max-width:50%;}
    .headertel{ display: none !important;}
    header .con{ padding: 0 0 0 20px;}
}

@media screen and (max-width:750px) {
    body{ font-size: 12px;}
    .w80{ width: 100%; padding: 0 20px;}
    header .right{ display: none !important;}
    .logoIcon, .footlogoIcon{ height: 40px;}
    .headerLogo{ font-size: 18px;}
    .zx-box{height: 80px;}
    .zx-box a {width: 104px;line-height: 38px;}
    footer .top .right{ display: none;}
    footer .bottom{ text-align: center; padding-bottom: 15px;}
    .popCode{ width: 36px; height: 36px;}
    .popCode .img{ width: 80px;} 
}