@charset 'utf-8';
/*20180806 ZYRCC for zoneding.cn Header&Footer*/
/*topbar*/
.topbar { height: 40px; line-height: 40px; background: #002B46; color: #fff; }
.topbar a { color: #fff; }
.language { margin-left: 10px; padding-left: 30px; background: url("../images/icon-language.png") no-repeat left center; }
.ttel { margin-left: 10px; padding-left: 30px; background: url("../images/icon-telt.png") no-repeat left center; }
/*Header*/
.header { position: relative; }
.header .container { overflow: visible; }
.logo { line-height: 0; margin: 25px 0; background: url(../images/logo.png) no-repeat left center; background-size: auto 50px; }
.logo h1 { width: 252px; height: 50px; }
.logo a { text-indent: -99em; }
/*navbar*/
.navbar { width: 70%; }
.nav { }
.nav > li { width: 14.2%; float: left; text-align: center; position: relative; }
.nav > li.proli { position: static; }
.nav > li > a { position: relative; font-size: 1.2em; line-height: 100px; }
.nav > li > a::after { content: ''; position: absolute; bottom: 0; left: 0; display: block; width: 0%; margin-left: 50%; height: 3px; background: #eb0013; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; transition: .3s; }
.nav > li:hover > a::after { width: 100%; margin-left: 0; }
/*subnav*/
.subnav { display: none; position: absolute; z-index: 9; width: 120%; left: 0; top: 100px; background: rgba(53, 62, 77, .9); }
.subnav li a { padding: 10px 0; color: #fff; }
.subnav li a:hover { text-decoration: underline; }
/*products nav*/
.subpro { display: none;position: absolute; z-index: 99; width: 100%; left: 0; top: 100px; padding: 20px 0 0; background: rgba(53, 62, 77, .9); }
.subpro a { color: #fff; }
.pronav { float: left; text-align: left; margin-right: 30px; margin-bottom: 15px;}
.pronav ul { margin-right: 30px; }
.pronav ul.rows{width:220px;overflow: hidden;}
.pronav ul.wrows{width:320px;overflow: hidden;}
ul.rows > li,ul.wrows > li{float:left;width: 50%;}
.pronav p a { font-size: 1.25em; padding: 10px 0 5px; font-weight: bold; }
.pronav a { padding: 5px 0; /*color: #fff;*/
-webkit-transition: .3s; transition: .3s; }
.pronav a:hover { -webkit-transform: translateX(3px); transform: translateX(3px); text-decoration: underline; }
.nav > li:hover .subpro, .nav > li:hover .subnav { display: block; }
.servicenav{
    padding: 20px 0;
    line-height: 2.5em;
    background: rgba(0,0,0,.3);
    color: #fff;
    text-align: left;
}
.servicenav .container{overflow:hidden;}
.servicenav span{float:left;font-size:1.25em;font-weight:bold;}
.servicenav a{float:left;margin: 0 10px;}
.servicenav a:hover{
    text-decoration: underline;}
/*footer*/
.footer { padding: 20px 0; background: url("../images/map.png") no-repeat center top #353E4D; overflow: hidden; }
.footer a { color: #C3C5CA; }
.footer a:hover { text-decoration: underline; }
.footnav dl { float: left; margin-right: 5%; line-height: 2em; }
.footnav dt { font-size: 1.3em; font-weight: bold; line-height: 2.5em; }
.foottel { color: #eb0013; }
.foottel span { display: block; font-size: 2.5em; }
.footcode { float:right;padding: 10px; font-size: .8em; color: #fff; background: rgba(0, 0, 0, .1);  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000, endColorstr=#19000000);
overflow: hidden; }
.code { float: left; margin: 10px; text-align: center; }
.code img { display: block; width: 100px; margin-bottom: 5px; }
.copyright { padding: 5px 0; line-height: 2em; text-align: center; background: #2c3241; color: #fff; }
.copyright a{color: #eee;padding:0 10px;}
.friendlink{
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,.1);
    background: #2c3241;
    color: #fff;
}
.friendlink a{
    padding: 0 5px;
    color: #fff;
}
.friendlink a:hover{
    text-decoration: underline;
}
/*----------------mobile----------------*/
/*footer*/
.m_footer { display: none; position: fixed; left: 0; bottom: 0; width: 100%; height: 50px; background: #e6e6e6; }
.m_footer li { float: left; width: 33.3%; text-align: center; }
.m_footer li a { padding-top: 30px; line-height: 1.4em; border-top: 1px solid #ccc; border-right: 1px solid #ccc; }
.m_footer li.m-tel a { border: none; color: #fff; border-color: #eb0013; background-color: #eb0013; }
.m-home a, .m-pro a, .m-tel a { background: url("../images/icon-home.png") no-repeat top center; }
.m-pro a { background-image: url(../images/icon-prom.png); }
.m-tel a { background-image: url(../images/icon-telm.png); }

@media screen and (max-width: 999px){
    /*.navbar,.header .container{width: 100%;}*/
    .logo h1{height:40px;width:200px;}
    .nav > li:hover .subpro, .nav > li:hover .subnav,.nav > li > a > span,.footer,.copyright, .friendlink{ display: none; }
    body{padding-bottom: 50px;}
    .m_footer{display:block;}
    .nav > li > a{line-height:50px;}
    .logo{margin:10px auto;background-size:auto 40px;}
}
@media screen and (max-width: 767px) {
    .logo h1{height:30px;width:150px;}
    .logo{background-size:auto 30px;}
    .topbar,.iatxt h4,.iatxt h3{display:none;}
    .iavideo,.iatxt{width:100%;}
.mlogo { width: 200px; height: 40px; background: url(../images/logo.png) no-repeat left center; background-size: contain; text-indent: -99em; margin-top: 5px; }
.mlogo h1 { font-size: 16px; line-height: 1em; width: 100%; height: 100%; }


}
@media screen and (max-width: 599px) {
    .navbar,.header .container{width:100%; }
}