/* banner */
.bannerpic{padding-bottom: 700px;}

@media only screen and (max-width:1440px){
.bannerpic{padding-bottom:48%;}
}

/* title */
.home_title{width:100%;text-align: center;padding: 0 5px 45px;}
.home_title p{font-size: 42px;font-weight: 600;line-height: 1;text-transform: uppercase;}
.home_title span{display: block;font-size: 15px;color: #808080;padding-top: 13px;line-height: 20px;}

@media only screen and (max-width:1200px){
.home_title{padding-bottom: 40px;}
.home_title p{font-size: 36px;}
.home_title span{padding-top: 9px;}
}
@media only screen and (max-width:1024px){
.home_title p{font-size: 30px;}
.home_title span{padding-top: 10px;}
}
@media only screen and (max-width:768px){
.home_title{padding-bottom: 35px;}
.home_title span{padding-top: 11px;font-size: 14px;}
}
@media only screen and (max-width:480px){
.home_title{padding-bottom: 30px;}
.home_title p{font-size: 24px;}
.home_title span{padding-top: 7px;}
}

/* server */
.serverbox{padding: 80px 0;}
.serverbox ul{flex-wrap: nowrap;}
.serverbox ul li{width: 25%;float: left;flex-shrink: 0;text-align: center;border-right: 1px solid #ddd;position: relative;z-index: 1;}
.serverbox ul li:first-child{border-left: 1px solid #ddd;}
.serverbox ul li div{width: 100%;height: 100%;padding: 0 5%;cursor: pointer;}
.serverbox ul li p{width: 100%;height: 60px;position: relative;}
.serverbox ul li p i,
.serverbox ul li p em{width: 100%;height: 100%;position: absolute;left: 0;top: 0;padding: 5px;-webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.serverbox ul li p img{height: 100%;}
.serverbox ul li p em{opacity: 0;}
.serverbox ul li strong{display: block;font-size: 24px;color: #1461cc;line-height: 1;padding: 15px 0 5px;font-weight: normal;-webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.serverbox ul li span{display: block;color: #666;line-height: 25px;max-height: 25px;}

.serverbox ul li div:hover p i{opacity: 0;}
.serverbox ul li div:hover p em{opacity: 1;}
.serverbox ul li div:hover strong{color: #f20c0c;}

@media only screen and (max-width:1440px){
.serverbox{padding: 70px 0;}
.serverbox ul li,
.serverbox ul li:first-child{border: 0;}
}
@media only screen and (max-width:1200px){
.serverbox{padding: 60px 0;}
}
@media only screen and (max-width:1024px){
.serverbox{padding: 55px 0;}
.serverbox ul li{padding: 0 5px;}
.serverbox ul li div{padding: 15% 5%;background: #f5f5f5;}
.serverbox ul li:hover{z-index: 5;}
.serverbox ul li:hover div{box-shadow: 0 2px 15px rgba(0,0,0,.2);background: #fff;}
}
@media only screen and (max-width:768px){
.serverbox{padding: 45px 0;}
.serverbox ul{flex-wrap: wrap;}
.serverbox ul li{padding: 5px;width: 50%;}
}
@media only screen and (max-width:480px){
.serverbox{padding: 40px 0;}
.serverbox ul li{padding: 1px;}
.serverbox ul li div{padding: 10% 5%;}
.serverbox ul li p{height: 50px;}
.serverbox ul li strong{font-size: 18px;line-height: 20px;padding-top: 10px;font-weight: 600;}
.serverbox ul li span{line-height: 20px;font-size: 13px;}
}

/* product */
.productbox{padding: 75px 0;background: #f5f7f9;}
.productbox .clabox{width: 98%;padding-bottom: 45px;text-align: center;z-index: 5;}
.productbox .clabox ul{width: 100%;padding: 0 5px;flex-wrap: wrap;}
.productbox .clabox ul li{width: 16.66%;padding: 5px;float: left;flex-shrink: 0;position: relative;z-index: 1;}
.productbox .clabox ul li::after{content: "";width: 100%;height: 100%;position: absolute;left: 0;top: 0;-webkit-transition: .5s;-moz-transition: .5s;transition: .5s;z-index: 10;}
.productbox .clabox ul li a{display: block;width: 100%;line-height: 30px;position: relative;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.productbox .clabox ul li .f1 a{padding: 12px 5px;font-size: 15px;font-weight: 600;}

.productbox .clabox ul li dl{width: 100%;padding: 0 5px;position: absolute;left: 0;top: 60px;opacity: 0;}
.productbox .clabox ul li dl a{line-height: 45px;padding: 0 5px;height: 0;background: #1677d9;color: #fff;}
.productbox .clabox ul li dl a:hover{background: #f20c0c;}

.productbox .clabox ul li:hover{z-index: 5;}
.productbox .clabox ul li:hover::after{width: 0;}
.productbox .clabox ul li:hover .f1 a,
.productbox .clabox ul li.active .f1 a{background: #1461cc;color: #fff;}
.productbox .clabox ul li:hover dl{opacity: 1;}
.productbox .clabox ul li:hover dl a{height: 45px;margin-bottom: 1px;}

.productbox .probox{width: 98%;}
.productbox .prolist{width: 100%;flex-wrap: nowrap;}
.productbox .prolist ul{width: 100%;flex-wrap: wrap;float: left;overflow: hidden;flex-shrink: 0;}
.productbox .prolist ul li{width: 25%;float: left;padding: 10px;text-align: center;position: relative;z-index: 1;}
.productbox .prolist ul li a{display: block;width: 100%;overflow: hidden;background: #fff;padding: 10px;border: 1px solid #e6e6e6;box-shadow: 0 2px 10px rgba(0,0,0,.05);}
.productbox .prolist ul li p{width: 100%;overflow: hidden;}
.productbox .prolist ul li p img{max-width: 96%;max-height: 96%;}
.productbox .prolist ul li h3{display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 50px;padding: 15px 5px 5px;}

.productbox .prolist ul li:hover{z-index: 5;}
.productbox .prolist ul li:hover a{box-shadow: 0 2px 10px rgba(0,0,0,.1);}

@media only screen and (max-width:1440px){
.productbox{padding: 70px 0;}
.productbox .clabox{padding-bottom: 40px;}
}
@media only screen and (max-width:1200px){
.productbox{padding: 65px 0;}
.productbox .clabox{padding-bottom: 35px;}
.productbox .clabox ul{padding: 0;}
.productbox .clabox ul li{padding: 0 5px 5px;}
.productbox .clabox ul li .f1 a{padding: 10px 5px;}
.productbox .clabox ul li dl{top: 100%;}
.productbox .clabox ul li dl a{line-height: 40px;}
.productbox .clabox ul li:hover dl a{height: 40px;}
.productbox .prolist ul li{padding: 5px 5px 10px;}
.productbox .prolist ul li h3{padding: 5px 5px 0;}
}
@media only screen and (max-width:1024px){
.productbox{padding: 60px 0;}
.productbox .clabox ul li{width: 25%;padding: 1px;}
.productbox .clabox ul li .f1 a{background: #1461cc;color: #fff;}
.productbox .clabox ul li dl{padding: 0 1px;}
.productbox .prolist ul li{padding: 1px;}
.productbox .prolist ul li a{padding: 5px;}
.productbox .prolist ul li h3{line-height: 40px;font-size: 13px;}
.productbox .clabox ul li.active .f1 a{background: #f20c0c;}
}
@media only screen and (max-width:768px){
.productbox{padding: 55px 0;}
.productbox .clabox ul li{width: 33.33%;}
.productbox .clabox ul li .f1 a{font-size: 14px;}
.productbox .prolist ul li{width: 50%;}
.productbox .prolist ul li h3{font-size: 14px;margin: 10px 0;}
}
@media only screen and (max-width:480px){
.productbox{padding: 45px 0;}
.productbox .clabox ul li{width: 50%;}
.productbox .prolist ul li h3{font-size: 13px;margin: 0;}
}
@media only screen and (max-width:425px){
.productbox .clabox ul li .f1 a{padding: 8px 5px;}
.productbox .prolist ul li h3{line-height: 35px;}
}

/* process */
.processbox{padding: 85px 0;background: #164289 url(../images/bg1.jpg) center bottom no-repeat;background-attachment: fixed;}
.processbox .home_title,
.processbox .home_title span{color: #fff;}

.processbox .cont{padding: 25px 0;}
.processbox ul{width: 100%;padding-left: 150px;position: relative;text-align: center;color: #fff;flex-wrap: nowrap;}
.processbox ul li{position: relative;overflow: hidden;}
.processbox ul li i{width: 100%;height: 0;border-top: 1px dashed rgba(255,255,255,.5);position: absolute;right: 150px;top: 50%;margin-top: -32px;}
.processbox ul li div{width: 100%;max-width: 150px;float: right;}
.processbox ul li p{width: 100%;padding: 14px;border: 1px dashed rgba(255,255,255,.5);border-radius: 50%;}
.processbox ul li span{display: block;width: 100%;background: rgba(255,255,255,.3);border-radius: 50%;padding: 10px;cursor: pointer;}
.processbox ul li em{display: block;width: 100%;padding-bottom: 100%;background: rgba(255,255,255,.3);border-radius: 50%;position: relative;}
.processbox ul li em img{max-width: 70%;max-height: 70%;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.processbox ul li strong{display: block;width: 100%;font-size: 15px;line-height: 20px;padding-top: 25px;font-weight: normal;height: 65px;}

.processbox ul li p:hover{-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);transform: rotateZ(360deg);}

.processbox ul .txt1{width: 150px;position: absolute;left: 0;top: 0;}
.processbox ul .txt2{width: 20%;float: left;flex-shrink: 0;}

.processbox .telbox{width: 100%;text-align: center;padding: 20px 0 5px;}
.processbox .telbox p{display: inline-block;position: relative;color: #fff;overflow: hidden;line-height: 30px;position: relative;z-index: 1;}
.processbox .telbox p span{float: left;font-size: 24px;padding: 15px 5px 15px 30px;}
.processbox .telbox p em{float: left;font-size: 30px;font-style: normal;padding: 15px 15px 15px 0;}
.processbox .telbox p a{float: right;background: #fff;border-radius: 30px;font-size: 24px;color: #1461cc;padding: 15px 50px;}
.processbox .telbox p i{position: absolute;z-index: -1;width: 100%;height: 100%;border-radius: 30px;border: 1px solid rgba(255,255,255,.5);left: 0;top: 0;}

@media only screen and (max-width:1440px){
.processbox{padding: 75px 0;}
.processbox .cont{padding: 20px 0;}
}
@media only screen and (max-width:1200px){
.processbox{padding: 65px 0;}
.processbox .cont{padding: 15px 0;}
.processbox .telbox{padding-top: 30px;}
}
@media only screen and (max-width:1024px){
.processbox{padding: 60px 0;}
.processbox .cont{padding: 10px 0;}
.processbox ul{padding: 0;margin: 0 -5px;}
.processbox ul li{padding: 0 5px;}
.processbox ul li div{max-width: 140px;float: none;margin: 0 auto;}
.processbox ul li strong{font-size: 16px;padding-top: 20px;max-height: 60px;}
.processbox ul li i{display: none;}
.processbox ul .txt1{position: relative;width: 16.66%;float: left;flex-shrink: 0;}
.processbox ul .txt2{width: 16.66%;}
.processbox .telbox{padding: 25px 0 0;}
.processbox .telbox p span{font-size: 20px;padding: 10px 5px 10px 20px;}
.processbox .telbox p em{padding: 10px 10px 10px 0;}
.processbox .telbox p a{border-radius: 25px;font-size: 20px;padding: 10px 40px;}
}
@media only screen and (max-width:768px){
.processbox{padding: 55px 0;}
.processbox .cont{padding: 0;}
.processbox ul{flex-wrap: wrap;}
.processbox ul li{padding: 10px 5px;}
.processbox ul .txt1,
.processbox ul .txt2{width: 33.33%;}
.processbox ul li div{max-width: 150px;}
.processbox ul li strong{padding-top: 15px;max-height: 55px;}
.processbox .telbox p a{padding: 10px 35px;}
}
@media only screen and (max-width:480px){
.processbox{padding: 50px 0;}
.processbox ul li{padding: 0 5px 5px;}
.processbox ul li p{padding: 5px;border: 0;}
.processbox ul li strong{padding-top: 5px;font-size: 15px;max-height: 45px;}
.processbox .telbox{padding-top: 25px;}
.processbox .telbox p span{padding: 5px 5px 5px 15px;font-size: 18px;}
.processbox .telbox p em{padding: 5px 10px 5px 0;font-size: 24px;}
.processbox .telbox p a{border-radius: 20px;font-size: 18px;padding: 5px 25px;}
}
@media only screen and (max-width:425px){
.processbox ul li{padding-bottom: 10px;}
.processbox ul li p{padding: 0;}
.processbox ul li span{padding: 7%;}
.processbox ul li strong{padding-top: 10px;font-size: 14px;}
.processbox .telbox p em{padding-right: 5px;font-size: 21px;}
.processbox .telbox p a{padding: 5px 20px;}
}
@media only screen and (max-width:350px){
.processbox .telbox p span{font-size: 16px;}
.processbox .telbox p em{font-size: 20px;}
.processbox .telbox p a{font-size: 16px;}
}

/* company */
.companybox{padding-top: 75px;background: url(../images/bg2.jpg) center top no-repeat;}
.companybox .text{font-size: 15px;line-height: 2;width: 100%;max-width: 1310px;margin: 0 auto;text-align: center;}
.companybox .more{width: 100%;padding: 25px 0 45px;text-align: center;line-height: 30px;font-size: 15px;text-transform: uppercase;}
.companybox .more a:hover{text-decoration: underline;}

.companybox ul{background: #1461cc;color: #fff;padding: 60px 0;text-align: center;flex-wrap: nowrap;}
.companybox ul li{width: 25%;float: left;flex-shrink: 0;}
.companybox ul li p{width: 100%;border-left: 1px solid rgba(255,255,255,.3);padding: 0 5px;height: 100%;}
.companybox ul li:first-child p{border: 0;}
.companybox ul li span{display: block;font-size: 60px;line-height: 60px;}
.companybox ul li em{display: block;font-size: 16px;line-height: 20px;font-style: normal;padding-top: 20px;max-height: 45px;}

@media only screen and (max-width:1440px){
.companybox{padding-top: 70px;}
}
@media only screen and (max-width:1200px){
.companybox{padding-top: 65px;}
.companybox .more{padding: 20px 0 40px;}
.companybox ul{padding: 50px 0;}
}
@media only screen and (max-width:1024px){
.companybox{padding-top: 60px;}
.companybox .text{line-height: 1.6;font-size: 14px;}
.companybox .more{padding: 15px 0 35px;}
.companybox ul li span{font-size: 50px;}
.companybox ul li em{font-size: 14px;}
}
@media only screen and (max-width:768px){
.companybox{padding-top: 50px;background-size: 150% auto;}
.companybox .more{padding-bottom: 20px;}
.companybox ul{margin: 0 -5px;background: none;padding: 0;flex-wrap: wrap;}
.companybox ul li{width: 50%;padding: 10px 5px 0;}
.companybox ul li p{background: #1461cc;padding: 15% 5%;}
.companybox ul li:hover p{background: #f20c0c;}
.companybox ul li span{font-size: 60px;}
.companybox ul li em{font-size: 15px;}
}
@media only screen and (max-width:480px){
.companybox{padding-top: 45px;}
.companybox ul{margin: 0 -1px;}
.companybox ul li{padding: 2px 1px 0;}
.companybox ul li span{font-size: 40px;}
.companybox ul li em{font-size: 13px;padding-top: 5px;max-height: 25px;line-height: 18px;}
}

/* news */
.newsbox{padding-top: 75px;}
.news_cla{width: 98%;margin: 0 auto;max-width: 460px;padding-bottom: 20px;text-align: center;overflow: hidden;}
.news_cla p{width: 50%;float: left;padding: 0 10px;position: relative;}
.news_cla p a{display: block;width: 100%;font-size: 17px;border: 1px solid #e6e6e6;background: #fff;line-height: 52px;}
.news_cla p span{position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.news_cla p.active a{border-color: #1461cc;background: #1461cc;color: #fff;}
.news_cla p.active span{width: 0;}

.news_list{width: 100%;flex-wrap: nowrap;position: relative;}
.news_list .list{width: 100%;float: left;flex-shrink: 0;}
.news_list ul{margin: 0 -20px;}
.news_list ul li{width: 50%;padding: 25px 20px 0;float: left;position: relative;}
.news_list ul li .titl{width: 100%;font-size: 16px;line-height: 30px;font-weight: 600;}
.news_list ul li .titl a{display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.news_list ul li .date{color: #808080;line-height: 20px;padding-bottom: 5px;font-size: 15px;}
.news_list ul li .text{color: #666;line-height: 20px;height: 40px;overflow: hidden;}
.news_list ul li .line{width: 100%;margin-top: 23px;height: 2px;overflow: hidden;background: #e6e6e6;}
.news_list ul li .line span{float: left;width: 50px;height: 100%;background: #1461cc;}

.news_list ul li:hover .titl a{color: #1461cc;}
.news_list ul li:hover .line span{width: 100%;}

@media only screen and (max-width:1440px){
.newsbox{padding-top: 70px;}
.news_list ul{margin: 0 -15px;}
.news_list ul li{padding: 20px 15px 0;}
}
@media only screen and (max-width:1200px){
.newsbox{padding-top: 65px;}
.news_list ul{margin: 0 -10px;}
.news_list ul li{padding: 15px 10px 0;}
.news_list ul li .line{margin-top: 18px;}
}
@media only screen and (max-width:1024px){
.newsbox{padding-top: 60px;}
.news_cla{max-width: 420px;}
.news_cla p a{line-height: 48px;}
.news_list ul{margin: 0;}
.news_list ul li{width: 100%;padding: 20px 0 0;}
.news_list ul li .text{font-size: 15px;height: auto;}
}
@media only screen and (max-width:768px){
.newsbox{padding-top: 50px;}
.news_cla{max-width: 360px;}
.news_cla p{padding: 0 5px;}
.news_cla p a{line-height: 44px;}
.news_list ul li{padding: 15px 0 0;}
.news_list ul li .date{padding: 0 0 5px;}
.news_list ul li .text{font-size: 14px;}
.news_list ul li .line{margin-top: 13px;}
}
@media only screen and (max-width:480px){
.newsbox{padding-top: 45px;}
.news_cla{max-width: 320px;padding-bottom: 10px;margin-top: -5px;}
.news_cla p a{line-height: 40px;font-size: 15px;font-weight: 600;}
.news_list ul li .titl{font-size: 15px;}
.news_list ul li .date{margin-top: -3px;font-size: 14px;}
}

/* contact */
.orderbox{padding: 80px 0;}
.orderbox ::-webkit-input-placeholder{color: #fff;}
.orderbox :-moz-placeholder{color: #fff;}
.orderbox ::-moz-placeholder{color: #fff;}
.orderbox :-ms-input-placeholder{color: #fff;}

.orderbox ul{background: #191919 url(../images/bg3.jpg) center no-repeat;padding: 65px 4.5%;overflow: hidden;}
.orderbox ul li{width: 100%;padding: 5px 10px 15px;float: left;position: relative;}
.orderbox ul li .txt{display: block;width: 100%;border: 1px solid rgba(255,255,255,.5);background: rgba(255,255,255,.3);line-height: 20px;padding: 14px;color: #fff;}
.orderbox ul li .red{color: #fff;position: absolute;right: 20px;top: 50%;margin-top: -13px;}
.orderbox ul li img{background: #fafafa;padding: 5px;position: absolute;right: 30px;top: 50%;margin-top: -19px;cursor: pointer;}

.orderbox ul li.li_1{width: 33.33%;}
.orderbox ul li.li_2 .txt{height: 130px;}
.orderbox ul li.li_3{width: 40%;max-width: 430px;}
.orderbox ul li.li_4{width: 30%;max-width: 180px;float: right;}
.orderbox ul li.li_4 .tj{display: block;width: 100%;background: #1461cc;font-size: 15px;font-weight: 600;text-align: center;color: #fff;line-height: 30px;padding: 10px;cursor: pointer;}
.orderbox ul li.li_4 .tj:hover{background: #f20c0c;}

@media only screen and (max-width:1440px){
.orderbox{padding: 70px 0;}
}
@media only screen and (max-width:1200px){
.orderbox{padding: 60px 0;}
.orderbox ul{padding: 55px 4.5%;}
}
@media only screen and (max-width:1024px){
.orderbox{padding: 55px 0;}
.orderbox ul{padding: 40px 4%;}
.orderbox ul li{padding: 5px 5px 10px;}
.orderbox ul li .txt{padding: 9px;}
.orderbox ul li .red{right: 10px;margin-top: -11px;}
.orderbox ul li img{right: 20px;margin-top: -17px;}
.orderbox ul li.li_4{max-width: 150px;}
.orderbox ul li.li_4 .tj{padding: 5px;}
}
@media only screen and (max-width:768px){
.orderbox{padding: 50px 0;}
.orderbox ul{padding: 35px 25px;}
.orderbox ul li.li_1{width: 100%;}
.orderbox ul li.li_3{width: 80%;max-width: 250px;}
}
@media only screen and (max-width:480px){
.orderbox{padding: 45px 0;}
.orderbox ul{padding: 25px 15px;}
.orderbox ul li{padding-bottom: 5px;}
.orderbox ul li .red{margin-top: -9px;}
.orderbox ul li img{right: 20px;margin-top: -14px;}
.orderbox ul li.li_4{max-width: 100%;width: 100%;padding: 15px 5px;}
.orderbox ul li.li_4 .tj{padding: 8px;}
}
@media only screen and (max-width:425px){
.orderbox ul{padding: 25px 10px;}
}

/* links */
.linkbox{margin-top: -10px;padding-bottom: 20px;}
.linkbox .w1440{padding-left: 75px;line-height: 25px;}
.linkbox .tit{position: absolute;left: 0;top: 0;font-size: 18px;text-transform: uppercase;font-weight: 600;}

.linkbox ul{width: 100%;overflow: hidden;min-height: 30px;}
.linkbox ul li{display: inline;padding: 0 5px;}
.linkbox ul li a{white-space: nowrap;}

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

/*****************************************/

.home_title p:hover,
.companybox ul li:hover span,
.companybox ul li:hover em,
.processbox .telbox p a:hover{-webkit-animation: headShake 1s ease;animation: headShake 1s ease;}
@media only screen and (min-width:1025px){
.contactbox .txtbox .titl p:hover,
.contactbox .list p.qq:hover,
.contactbox .list p.dh:hover{-webkit-animation: headShake 1s ease;animation: headShake 1s ease;}
}

@-webkit-keyframes headShake{
    0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes headShake{
    0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}
}