.header3{background: rgba(4,14,35,0.3); position:fixed; left: 0; top: 0; width: 100%;height: 80px; z-index:9999;}
.header3:hover{ /*background: #000;*/}
.header3 *{ color:#FFF; font-size: 14px;}
.header3 .logo{ display: block;float: left;width: 160px;height: 80px;line-height:80px;font-size: 24px;position: relative; margin-left: 50px;}
.header3 .logo:hover{color: #fff;}
.header3 .logo span{ font-family: "arial"; font-size: 24px; display:block; height: 80px; line-height: 78px; float: right; padding-left: 5px; font-weight: 100;}
.header3 .hot-tel{ float: right; height: 80px; line-height: 80px; display: block;}
.header3 .hot-tel span{font-family: 'georgia', 'serif'; font-size: 20px; letter-spacing: 2px; }
.header3 .nav {float: left;margin-left: 325px;height: 78px;transition: all .5s;}
.header3 .nav-l {margin-left: 150px;}
.header3 .nav li{  float: left;padding-right: 60px;}
.header3 .nav li a{     color: #fff;display: block;font-size: 15px;line-height: 78px;    position: relative;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;}
.header3 .nav li a span {display: block;float: left;height: 1px;width: 0px;position: relative;top: 38px;transition: all .5s;}
.header3 .nav li a span:before {transition: all 1s;position: absolute;content: '';width: 0px;height: 1px;background: rgba(255,255,255,0.4);right: 5px;top: 50%;}
.header3 .nav li.active a span:before,.header3 .nav li:hover a span:before,.header3 .nav li:hover a span,.header3 .nav li.active a span {width: 20px;}
.header3 .nav li.active .fir,
.header3 .nav li .fir:hover{ color:#fff;}
.header3 .nav-search {float: right;margin-right: 45px;width: 42px;height: 80px;background: url(/upload/20/01/searchW.png) no-repeat center center;cursor: pointer;-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;position: relative;}
.header3 .nav-search .search-box {position: absolute;right: 0;top: 22px;font-size: 0;width: 0px;height: 36px;z-index: 100;border-radius: 30px;border: solid 1px rgba(255,255,255,0.2);-webkit-transition: all .5s;-o-transition: all .5s;transition: all .5s;opacity: 0;overflow: hidden;}
.header3 .nav-search .search-box .search {width: 196px;border: none;height: 36px;float: left;font-size: 14px;color: #fff;height: 38px;margin-top: -2px;margin-left: -2px;background: none;padding: 3px 20px;box-sizing: border-box; }
.header3 .nav-search.on .search-box .butt {width: 40px;height: 35px;background: url(/upload/20/01/searchW.png) no-repeat center;float: right;outline: none;border: none;cursor: pointer;transition: all .3s;}
.header3 .nav-search.on .search-box {width: 240px;opacity: 1;}
.header3.scroll {background: white;border-bottom: solid 1px #dbdbdb;}
.header3.scroll .nav li a{color: #666;}
.header3.scroll .nav li.active .fir, .header3.scroll .nav li .fir:hover {color: #FB7E22;}
.header3.scroll .logo{color: #FB7E22;}
.header3.scroll .nav li a span:before {background: rgba(248,109,13);}
.header3.scroll .nav-search {background: url(/upload/20/01/searchH.png) no-repeat left center;}
.header3.scroll .search-box {border-color: #dbdbdb;}
.header3.scroll .search-box .search {color: #666;}
.header3.scroll .search-box .butt {background: url(/upload/20/01/searchH.png) no-repeat -1px 7px;}
@media  all and (max-width: 1560px){
    .header3 .logo {margin-left: 40px;}
    .header3 .nav {margin-left: 250px;}
    .header3 .nav-l {margin-left: 90px;}
    .header3 .nav-search {margin-right: 35px;}
}
@media all and (max-width: 1440px) {
    .header3 .logo {margin-left: 30px;}
    .header3 .nav-l {margin-left: 30px;}
    .header3 .nav {margin-left: 150px;}
}
@media all and (max-width: 1340px) {
    .header3 .logo {margin-left: 10px;}
    .header3 .nav {margin-left: 50px;}
    .header3 .nav-l {margin-left: 20px;}

}

footer{ }
.footer-top{  background: #333;padding: 10px 0 10px 0px;font-size: 12px;line-height: 20px;}
.footer-top a{ display: block; float: left; margin-right: 15px;     color: #AAA;}
.footer-top a:hover{ color:#fff;}
.footer-mid{ background: #222; padding: 30px 0;}
.footer-mid dl{ float: left; margin-left: 30px;}
.footer-mid dl:first-child{margin-left: 0;}
.footer-mid dl *{ line-height: 2;}
.footer-mid dt{ margin-top: -8px;}
.footer-mid dt a{ font-size: 16px; color:#EEE;}
.footer-mid dd a{ font-size: 12px; color:#AAA;}
.footer-mid dl a:hover{ color:#FFF;}
@media all and (max-width: 767px) {
    .footer-mid dl{ margin-right: 0; width: 45%; margin-left:5%; margin-bottom: 20px;}
    .footer-mid dl:nth-child(2n+1){ clear: both;}
    .footer-mid dl *{ line-height: 1.7;}
}
footer .qrcode{ float: right;}
footer .qrcode .item{ float: left; margin: 20px 20px 0 0;}
footer .qrcode .item img{ display: block; width: 120px;}
footer .qrcode .item p{ text-align: center; font-size: 12px; line-height: 2; padding: 10px 0; color:#AAA;}
footer .copyright{ width: 780px; float:left; padding: 20px 0px;}
.footer-btm{ background: #000;}
.footer-btm *{ color:#AAA; line-height: 2; font-size: 12px;}
footer .cnzz-box{ float: right;}
@media all and (max-width: 1340px) {
    footer .qrcode{margin-right: 30px;}
}


.volist{margin: 0 -15px; position: relative;}
.volist .item{ width: 33.33333333%; float: left;}
.volist .item:nth-child(3n+1){ clear: both;}
.volist .item .box{ display: block; padding:15px;}
.volist .item .inner-box{ display: block;}
.volist .item .img-box{ display: block; overflow: hidden; max-height: 300px;position: relative;}
.volist .item .inner-box img{ display: block; width: 100%;min-height: 100%;}
/*@media only screen and (min-width: 1601px) and (max-width: 1920px){
.volist .item{ width: 20%;}
.volist .item:nth-child(5n+1){ clear: both;}
}
@media only screen and (min-width: 1201px) and (max-width: 1600px){

.volist{ width: 1200px; margin: 0 auto;}
}*/
.custom-service-control {position: fixed;bottom: 10px;right: 10px;z-index: 9;}
.custom-service-control .cs-box {width: 50px;}
.custom-service-control .cs-box .item {width: 50px;height: 50px;margin-top: 1px;float: left;position: relative;}
.custom-service-control .cs-box .item .box {width: 50px;height: 50px;background: #333;float: left;cursor: pointer;position: absolute;top: 0;left: 0;}
.custom-service-control .cs-box .item .box .icon{display: block;width: 50px;height: 50px; text-align: center;  line-height: 50px;float: left;color: #FFF;font-size: 24px;}
.custom-service-control .cs-box .cs-top .icon{    transform: rotate(-90deg);}
.custom-service-control .cs-box .item:hover .box {background: #FB7E22;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;}
.menu-btn {display: none;margin: 0 15px;}
.menu-btn i{font-size: 28px;color: #fff;line-height: 60px;    transition: all .5s;}
.menu-btn.on i{color:#FB7E22;}
@media only screen and (max-width: 768px){
    .phone-height{height:60px;}
    .main{width: 100%;}
    .menu-btn{display: block;height: 40px;}
    .header3{height: 60px;background: #333;}
    .header3.scroll {background:#333;border-bottom:none;}
    .header3.scroll .logo {color: #fff;}
    .header3 .logo {height: 60px;line-height: 60px;}
    .header3 .nav-search{display: none;}
    .header3 .nav{float: none;background: #fff;margin: 0;position: fixed;left: 0;right: 0;top: 60px;display: none;height: 100%; transition: all 0s;}
    .header3 .nav li {float:none;margin:0 20px;padding: 0;    border-bottom: 1px solid #ccc;}
    .header3 .nav li a {color: #333;font-size: 16px;line-height: 44px;}
    .header3 .nav li.active .fir, .header3 .nav li .fir:hover {color:#FB7E22;}
    .header3 .nav li a span{display: none;}
    .background-media {height: auto;}
    .volist { margin: 0 1%;}
    .volist .item {width: 50%;float: left;}
    .volist .item .box {padding: 3%;}
    .volist .item:nth-child(3n+1) {clear: none;}
    .volist .item:nth-child(2n+1) {clear: both;}
    .page-front{padding:6% 3%;}
    .content {padding:5%;background: #FFF;}
    .footer-top {padding: 10px 20px 10px 10px;}
    footer .copyright {width: 100%;padding: 20px 10px;box-sizing: border-box;}
}
@media only screen and (max-width: 450px){
    .volist .item {width: 100%;float:none;}
}