@charset 'utf-8';
/*20180806 ZYRCC for zoneding.cn Header&Footer*/
/*topbar*/
.topbar { height: 40px; line-height: 40px; background: #ea5219; 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;}
/*Header*/
.header { position: relative; }
.header .container { overflow: visible; }
.logo { line-height: 0; margin: 25px 0; background-size: auto 50px; }
.logo h1 { width: 252px; height: 50px; }
.logo a { text-indent: -99em; }
/*navbar*/
.navbar { width: 78%; }
.nav { }
.nav > li { width: 12.2%; float: left; text-align: center; position: relative; }
.nav > li.proli { position: static; }
.nav > li > a { position: relative; font-size: 1.2em; line-height: 120px; }
.nav > li > a::after { content: ''; position: absolute; bottom: -15px; left: 0; display: block; width: 0%; margin-left: 50%; height: 3px; background: #ea5219; -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; background: rgba(53, 62, 77, .9); }
.subpro a { color: #fff; }
.pronav { float: left; text-align: left; margin-right: 30px; }
.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; }
/*footer*/
.footer { padding: 20px 0; background: #ea5219; overflow: hidden; }
.footer a { color: #fff; }
.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: #fff;}
.foottel span { display: block; font-size: 1.8em; }
.footcode { 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;  padding:0px 20px;}
.code img { display: block; width: 100px; margin-bottom: 5px; }
.copyright, .friendlinks { margin-top: -1px;padding: 5px 0; line-height: 2em; text-align: center; background: #2c3241; color: #fff; }
.friendlinks{text-align: left;}
.friendlinks a,.copyright a{padding-right: 10px;color: #C3C5CA;}
.friendlinks a:hover{color: #eee;}
/*----------------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,.friendlinks { 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-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%; }
}