@charset "utf-8";

/* base */
body,a{color: #333;}
.container .position p{border-bottom-color: #d90012;}
.page .pcurrent a,
.page a:hover{border-color: #d90012;color:#d90012;}
a:hover,
.container .position p span,
.foot-button em,
.foot-button i,
.foot-button a:hover span,
.foot-button a.active span,
.online_box p:hover::after,
.online_box p:hover svg,
.online_box p span:hover,
.online_box p.r_open:hover{color: #d90012;}
.navico span,
.navico span::before,
.navico span::after{background-color: #fff;}
.swiper-pagination-bullets .swiper-pagination-bullet-active{background-color: #d90012;}


/* top */
.topbox{height: 40px;background: #f5f5f5;font-size: 13px;line-height: 40px;color: #666;}

@media only screen and (max-width:1024px){
.topbox{display: none;}
}

/* headbox */
.headbox{height: 110px;}
.headbox .w1440,
.headbox .logo *{height:100%;}
.headbox .logo{height: 100%;float: left;line-height: 1;}
.headbox .logo a{display: block;overflow: hidden;position: relative;padding: 25px 0 25px 90px;}
.headbox .logo p{position: absolute;left: 0;top: 0;padding: 20px 0;}
.headbox .logo strong{font-size: 30px;color: #0053a6;}
.headbox .logo span{display: block;width: 345px;height: 26px;margin-top: 4px;background: #d90012;color: #fff;font-size: 18px;text-align: center;padding: 4px 0 4px 7px;letter-spacing: 7px;white-space: nowrap;}

.headbox .telbox{float: right;height: 100%;padding: 25px 0;}
.headbox .telbox p{white-space: nowrap;overflow: hidden;line-height: 30px;position: relative;padding-left: 30px;font-size: 15px;}
.headbox .telbox em{font-size: 18px;color: #d90012;position: absolute;left: 0;top: 0;}
.headbox .telbox em svg{height: 29px;}

@media only screen and (max-width:1024px){
.headbox{height: 60px;position: fixed;z-index: 999999;left: 0;top: 0;box-shadow: 0 3px 6px rgba(0,0,0,.2);background: #333;}
.headbox .w1440{width: 100%;}
.headbox .logo a{padding: 5px 0 5px 75px;}
.headbox .logo p{padding: 5px 0;left: 15px;}
.headbox .logo strong{color: #fff;line-height: 50px;}
.headbox .logo span,
.headbox .telbox{display: none;}
}
@media only screen and (max-width:768px){
.headbox{height: 50px;}
.headbox .logo a{padding-left: 60px;}
.headbox .logo p{left: 10px;}
.headbox .logo strong{line-height: 40px;font-size: 24px;}
}
@media only screen and (max-width:480px){
.headbox .logo a{padding-left: 50px;}
.headbox .logo p{left: 5px;}
.headbox .logo strong{font-size: 20px;letter-spacing: -.5px;}
}

/* nav */
.navbox ul li a{display: block;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 30px;color: #fff;}

@media only screen and (min-width:1025px){
.navbox{height: 50px;background: #d90012;box-shadow: 0 3px 6px rgba(128,128,128,.2);position: absolute;top: 150px;left: 0;z-index: 99999;}
.navbox ul{display: flex;flex-wrap: nowrap;height: 100%;}
.navbox ul li{float: left;text-align: center;position: relative;width: 12.5%;flex-shrink: 0;}
.navbox ul li > a{font-size: 15px;font-weight: 600;padding: 10px;}

.navbox ul li dl{width: 100%;position: absolute;left: 0;top: 100%;background: rgba(255,255,255,.75);opacity: 0;box-shadow: 0 2px 6px rgba(0,0,0,.2);}
.navbox ul li #navcla{width: 220px;}
.navbox ul li dl span{display: none;}
.navbox ul li dl dd > a{padding: 0 5px;height: 0;background: #f2182a;}
.navbox ul li dl div{width: 0;position: absolute;left: 100%;top: 1px;box-shadow: 0 3px 6px rgba(128,128,128,.2);background: #f2182a;margin-left: 1px;border-radius: 3px;overflow: hidden;text-align: left;opacity: 0;}
.navbox ul li dl div a{line-height: 25px;}
.navbox ul li dl div a:hover{color: #ff0;padding-left: 5px;}

.navbox ul li:hover dl{opacity: 1;}
.navbox ul li:hover dl dd > a{height: 44px;margin-top: 1px;padding: 7px 5px;}
.navbox ul li.active{background: #ff1a2d;}
.navbox ul li:hover,
.navbox ul li dl dd:hover > a{background: #ffbf00;}
.navbox ul li dl dd:hover div{width: 120%;padding: 7px 5px 8px 10px;opacity: 1;}
}

@media only screen and (max-width:1024px){
.navbox{height: 0;overflow: hidden;position:fixed;left: 0;top:0;background:rgba(15,15,15,.95);z-index: 99999;}
.navbox.nav_on{height:100%;}
.navbox ul{width:100%;height:calc(100vh - 130px);overflow-y:auto;position:absolute;left:0;top:70px;padding:0 3%;}
.navbox ul li{width:100%;border-bottom:1px solid rgba(255,255,255,.2);padding: 0;position: relative;z-index: 5;-webkit-transition: .5s;transition: .5s;}
.navbox ul li a{display: block;width: 100%;color: #fff;overflow: hidden;position: relative;z-index: 1;}
.navbox ul li > a{line-height: 50px;padding: 0 10px;}

.navbox ul li.active,
.navbox ul li:hover{z-index: 6;}
.navbox ul li.active > a{font-weight: 600;font-size: 15px;padding-left: 20px;color: #ff3c4c;}

.navbox ul li dl{width: 100%;position: absolute;left: 0;top: 100%;background: #a6111d;z-index: 2;}
.navbox ul li dl span{display: block;width: 50px;height: 50px;position: absolute;top: -50px;right: 0;text-align: center;line-height: 50px;color: #ccc;font-size: 16px;z-index: 0;-webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.navbox ul li dl span svg{height: 50px;line-height: 50px;}
.navbox ul li dl a{display: block;width: 100%;line-height: 40px;height: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #fff;font-size: 14px;background: #e63442;padding: 0 15px;}
.navbox ul li dl a:hover{background: #ffbf00;}
.navbox ul li.dl_show dl a{height: 40px;margin-bottom: 1px;}
.navbox ul li.dl_show dl span{-webkit-transform: rotateZ(-180deg);-moz-transform: rotateZ(-180deg);transform: rotateZ(-180deg);}
.navbox ul li.dl_show dl dd div{display: none;}
}
@media only screen and (max-width:768px){
.navbox ul{height:calc(100vh - 120px);top:60px;}
}

/*banner*/
.banner{padding-top: 50px;}
.bannerpic{height: 0;padding-bottom: 650px;}

#bannerpic .btn span{background: #aaa;border: 3px solid #fff;}
#bannerpic .btn span.on{border-color: #f34;}

.bannerbg{height: 250px;background: url(../bannerimages/banner-bg.jpg) center bottom no-repeat;}

@media only screen and (max-width:1440px){
.bannerpic{padding-bottom:45%;}
}
@media only screen and (max-width:1024px){
.bannerpic{padding-bottom:43%;}
#bannerpic .btn span.on{border-color: #fff;background: #f34;}
.bannerbg{height: 200px;background-position-x: 65%;}
}
@media only screen and (max-width:768px){
.bannerbg{height: 180px;background-position-x: 63%;background-size: auto 300px;}
}
@media only screen and (max-width:480px){
.bannerbg{height: 150px;background-position-x: 62%;background-size: auto 280px;}
}

/* foot */
.footbox{background:#002040;color: rgba(255,255,255,.6);text-align: center;line-height: 24px;}
.footbox .w1440{padding: 30px 0;}
.footbox a{color: rgba(255,255,255,.75);}
.footbox a:hover{color: #fff;}

.footbox .footnav{flex-wrap: nowrap;justify-content: center;padding: 10px 0 20px;}
.footbox .footnav p{flex-shrink: 1;float: left;height: 13px;border-left: 1px solid rgba(255,255,255,.5);padding: 0 25px;}
.footbox .footnav p:first-child{border: 0;}
.footbox .footnav p a{display: block;font-size: 15px;line-height: 1;margin: -1px 0;}

.footbox .foottxt{max-width: 850px;margin: 0 auto;}
.footbox .foottxt p{display: inline;padding: 0 5px;}

@media only screen and (max-width:1024px){
.footbox .w1440{padding: 20px 0;}
.footbox .footnav{flex-wrap: nowrap;justify-content: center;padding: 10px 0 15px;}
.footbox .footnav p{padding: 0 20px;}
}
@media only screen and (max-width:768px){
.footbox .footnav{display: none;}
}
@media only screen and (max-width:480px){
.footbox .w1440{padding: 15px 0;}
}