/* title */
.home-title{width:100%;overflow: hidden;padding: 0 10px 40px;position: relative;text-align: center;text-align: center;line-height: 1;}
.home-title p{font-size: 36px;font-weight: 600;}
.home-title span{display: block;width: 100%;padding: 12px 10px 10px;color: #808080;line-height: 1.3;font-size: 15px;}
.home-title em{display: block;width: 100%;height: 10px;color: #808080;overflow: hidden;}
.home-title em svg{height: 14px;line-height: 14px;margin-top: -2px;}

@media only screen and (max-width:1440px){
.home-title{padding-bottom: 35px;}
}
@media only screen and (max-width:1200px){
.home-title{padding-bottom: 30px;}
}
@media only screen and (max-width:1024px){
.home-title{padding-bottom: 25px;}
.home-title p{font-size: 30px;}
}
@media only screen and (max-width:768px){
.home-title span{padding: 10px 10px 8px;}
}
@media only screen and (max-width:480px){
.home-title{padding-bottom: 20px;}
.home-title p{font-size: 24px;}
.home-title span{font-size: 14px;}
}

/* service */
.servicebox{padding: 60px 0;}
.servicebox ul{text-align: center;flex-wrap: nowrap;margin: 0 -15px;}
.servicebox ul li{width: 25%;padding: 15px;float: left;flex-shrink: 0;}
.servicebox ul li div{width: 100%;height: 100%;background: #0270bf;border-radius: 5px;padding: 40px 5%;color: #fff;cursor: pointer;}
.servicebox ul li div em{display: block;width: 100%;font-size: 50px;line-height: 50px;}
.servicebox ul li div em svg{height: 50px;}
.servicebox ul li div p{font-size: 24px;line-height: 30px;padding: 15px 0 10px;}
.servicebox ul li div span{display: block;max-height: 30px;line-height: 20px;}

.servicebox ul li:hover div{background: #e52e2e;}

@media only screen and (max-width:1440px){
.servicebox{padding: 55px 0;}
.servicebox ul{margin: 0 -10px;}
.servicebox ul li{padding: 10px;}
}
@media only screen and (max-width:1200px){
.servicebox{padding: 50px 0;}
.servicebox ul{margin: 0 -10px;}
.servicebox ul li{padding: 10px;}
}
@media only screen and (max-width:1024px){
.servicebox{padding: 45px 0;}
.servicebox ul{margin: 0 -5px;}
.servicebox ul li{padding: 5px;}
}
@media only screen and (max-width:768px){
.servicebox ul{flex-wrap: wrap;}
.servicebox ul li{width: 50%;}
}
@media only screen and (max-width:480px){
.servicebox{padding: 40px 0;}
.servicebox ul li div{padding: 15% 5%;}
}
@media only screen and (max-width:360px){
.servicebox ul{margin: 0 -2px;}
.servicebox ul li{padding: 2px;}
.servicebox ul li div p{padding: 10px 0 5px;font-size: 22px;}
}

/* product */
.productbox{padding: 65px 0;background: #f5f5f5;}
.productbox .home-title{padding-bottom: 0;}

.productbox .clabox{width: 100%;text-align: center;padding: 35px 0;}
.productbox .clabox ul{margin: 0 -5px;flex-wrap: wrap;justify-content: center;}
.productbox .clabox ul li{padding: 5px;float: left;flex-shrink: 1;width: 14.285%;}
.productbox .clabox ul li a{display: block;padding: 10px;background: #0270bf;color: #fff;font-size: 15px;font-weight: 600;border-radius: 30px;line-height: 30px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.productbox .clabox ul li:hover a{background: #e52e2e;}

.productbox .probox{width: 100%;padding: 10px 0 35px;}
.productbox .probox ul{margin: 0 -10px;}
.productbox .probox ul li{width: 25%;float: left;text-align: center;padding: 10px;}
.productbox .probox ul li a{display: block;width: 100%;overflow: hidden;}
.productbox .probox ul li p{width: 100%;overflow: hidden;background: #fff;}
.productbox .probox ul li p em{padding-bottom: 100%;}
.productbox .probox ul li p img{width: 100%;min-height: 100%;max-height: none;}
.productbox .probox ul li h3{display: block;width: 100%;height: 50px;padding: 0 5px;font-size: 15px;line-height: 60px;font-weight: 600;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.productbox .probox ul li a:hover h3{background: #e52e2e;color: #fff;line-height: 50px;}

.productbox .tel{width: 400px;margin: 0 auto 5px;position: relative;line-height: 40px;color: #fff;}
.productbox .tel a{position: absolute;left: 5px;top: 5px;width: 120px;background: #fff;border-radius: 20px;text-align: center;font-size: 16px;font-weight: 600;color: #e52e2e;}
.productbox .tel p{padding: 5px 5px 5px 140px;border-radius: 25px;background: #0270bf;overflow: hidden;}
.productbox .tel span{float: left;}
.productbox .tel em{float: left;font-style: normal;font-size: 24px;font-weight: 600;font-family: Arial;}
.productbox .tel:hover p{background: #da251c;}

@media only screen and (max-width:1440px){
.productbox{padding: 60px 0;}
.productbox .probox{padding-top: 5px;}
}
@media only screen and (max-width:1200px){
.productbox{padding: 55px 0;}
.productbox .clabox{padding: 30px 0;}
.productbox .clabox ul li{width: 16.66%;}
.productbox .probox{padding-bottom: 25px;}
.productbox .probox ul li{padding: 5px;}
.productbox .probox ul li h3{line-height: 55px;font-size: 14px;}
}
@media only screen and (max-width:1024px){
.productbox{padding: 50px 0;}
.productbox .clabox ul,
.productbox .probox ul{margin: 0 -1px;justify-content: left;}
.productbox .clabox ul li{width: 20%;padding: 1px;}
.productbox .clabox ul li a{border-radius: 3px;}
.productbox .probox{padding-top: 10px;}
.productbox .probox ul li{padding: 1px;}
.productbox .probox ul li h3{line-height: 45px;}
.productbox .probox ul li a:hover h3{background: #f5f5f5;color: #e52e2e;line-height: 45px;}
}
@media only screen and (max-width:768px){
.productbox{padding: 45px 0;}
.productbox .clabox{padding: 25px 0;}
.productbox .clabox ul li{width: 33.33%;}
.productbox .probox{padding-bottom: 20px;}
.productbox .probox ul li{width: 50%;}
}
@media only screen and (max-width:480px){
.productbox{padding: 40px 0;}
.productbox .clabox{padding: 20px 0;}
.productbox .clabox ul li{width: 50%;}
.productbox .probox{padding-bottom: 10px;}
.productbox .probox ul li h3{line-height: 40px;height: 45px;font-size: 13px;}
.productbox .probox ul li a:hover h3{line-height: 40px;}
.productbox .tel{margin-bottom: 0;width: 320px;border-radius: 20px;line-height: 30px;}
.productbox .tel p{padding-left: 108px;}
.productbox .tel a{width: 90px;border-radius: 15px;font-size: 15px;}
.productbox .tel em{font-size: 18px;}
}
@media only screen and (max-width:360px){
.productbox .clabox ul li a{padding: 5px;}
.productbox .probox ul li h3{line-height: 36px;height: 40px;}
}

/* company */
.companybox{padding: 65px 0;background: #191919 url(../images/bg1.jpg) center no-repeat;background-attachment: fixed;}
.companybox .title{text-align: center;color: #fff;line-height: 1;}
.companybox .title span{font-size: 30px;text-transform: uppercase;color: rgba(255,255,255,.75);}
.companybox .title a{font-size: 36px;padding: 15px 0;color: #fff;display: inline-block;}
.companybox .title em{color: #fff;font-size: 17px;margin-top: -3px;display: block;}

.companybox .txt{width: 100%;max-width: 1310px;font-size: 15px;margin: 0 auto;text-align: center;color: #fff;line-height: 2;padding: 35px 0;text-indent: 2em;}

.companybox .more{font-size: 15px;line-height: 30px;text-align: center;padding: 5px;}
.companybox .more a{display: block;width: 200px;padding: 9px;border: 1px solid rgba(255,255,255,.5);border-radius: 25px;margin: 0 auto;color: #fff;}
.companybox .more a:hover{width: 180px;border-color: #fff;background: #fff;color: #e52e2e;}

.companybox .list{padding-top: 50px;margin: 0 -10px;}
.companybox .list li{width: 25%;float: left;padding: 0 10px;overflow: hidden;text-align: center;position: relative;}
.companybox .list li p{width: 100%;overflow: hidden;position: relative;background: #000;cursor: pointer;}
.companybox .list li p img{position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.companybox .list li p em{display: block;width: 100%;height: 0;padding-bottom: 70%;position: relative;}
.companybox .list li p em img{max-width: 100%;max-height: 100%;}
.companybox .list li p .videoed{display: none;}
.companybox .list li span{display: block;width: 100%;position: relative;}
.companybox .list li h3{display: block;width: 100%;padding: 0 5px;line-height: 50px;height: 40px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;color: #fff;}

@media only screen and (max-width:1200px){
.companybox{padding: 60px 0;}
.companybox .more{padding: 0;}
.companybox .list{margin: 0 -5px;}
.companybox .list li{padding: 0 5px;}
}
@media only screen and (max-width:1024px){
.companybox{padding: 55px 0;}
.companybox .txt{padding: 30px 0;}
.companybox .list{margin: 0 -1px;}
.companybox .list li{padding: 0 1px;}
}
@media only screen and (max-width:768px){
.companybox{padding: 50px 0;background-size: auto 100%;}
.companybox .title span{font-size: 24px;}
.companybox .title a{font-size: 30px;}
.companybox .title em{font-size: 15px;margin-top: -4px;}
.companybox .txt{font-size: 14px;line-height: 1.8;}
.companybox .more a{padding: 4px;width: 180px;}
.companybox .more a:hover{width: 150px;}
.companybox .list{padding-top: 40px;margin: 0 -5px;}
.companybox .list li{width: 50%;padding: 5px;}
.companybox .list li span{height: 0;}
.companybox .list li h3{position: absolute;line-height: 40px;left: 0;bottom: 0;background: rgba(255,255,255,.3);}
}
@media only screen and (max-width:480px){
.companybox{padding: 40px 0 45px;}
.companybox .title span{font-size: 18px;}
.companybox .title a{font-size: 22px;padding: 12px 0;}
.companybox .title em{font-size: 14px;}
.companybox .txt{padding: 20px 0 25px;}
.companybox .list{padding-top: 30px;margin: 0 -1px;}
.companybox .list li{padding: 1px;}
.companybox .list li h3{line-height: 30px;height: 30px;}
}

/* news */
.newsbox{padding-top: 65px;}
.newsbox ul{margin: 0 -1px;}
.newsbox ul li{float: left;padding: 1px;overflow: hidden;width: 50%;}
.newsbox ul li .txt{background: #f5f5f5;padding: 20px 25px;color: #666;}
.newsbox ul li .titl{font-size: 18px;font-weight: 600;padding: 5px 0;}
.newsbox ul li .text{line-height: 20px;padding-top: 5px;height: 45px;overflow: hidden;}
.newsbox ul li .time{line-height: 20px;padding-top: 10px;}
.newsbox ul li .time em{float: left;margin-right: 5px;width: 20px;height: 20px;}
.newsbox ul li .time em svg{height: 18px;line-height: 18px;font-size: 17px;}

.newsbox ul li .txt:hover{background: #e52e2e;color: #fff;}
.newsbox ul li .txt:hover .titl a,
.newsbox ul li .txt:hover .more a{color: #fff;}

@media only screen and (max-width:1440px){
.newsbox{padding-top: 60px;}
}
@media only screen and (max-width:1200px){
.newsbox{padding-top: 55px;}
.newsbox ul li .txt{padding: 15px 20px;}
.newsbox ul li .text{padding-top: 0;height: 40px;}
}
@media only screen and (max-width:1024px){
.newsbox{padding-top: 50px;}
.newsbox ul li{width: 100%;}
.newsbox ul li .text{line-height: 25px;height: 50px;font-size: 15px;}
}
@media only screen and (max-width:768px){
.newsbox{padding-top: 45px;}
.newsbox ul li .text{line-height: 20px;height: auto;font-size: 14px;}
}
@media only screen and (max-width:480px){
.newsbox{padding-top: 40px;}
.newsbox ul li .txt{padding: 5px 15px;background: #0270bf;color: #fff;position: relative;}
.newsbox ul li .titl{font-size: 15px;line-height: 30px;padding-right: 80px;}
.newsbox ul li .titl a{color: #fff;}
.newsbox ul li .time{position: absolute;right: 10px;top: 50%;margin-top: -15px;padding: 0;line-height: 30px;font-size: 15px;}
.newsbox ul li .time em,
.newsbox ul li .text{display: none;}
}
@media only screen and (max-width:360px){
.newsbox ul li .txt{padding: 0 10px;}
.newsbox ul li .titl{font-size: 14px;padding-right: 0;}
.newsbox ul li .time{display: none;}
}

/* order */
.orderbox{padding: 65px 0;}
.orderbox .w1440{padding: 50px 45px 60px;background: #191919 url(../images/bg2.jpg) center no-repeat;background-size: 100% auto;margin-bottom: 10px;}
.orderbox ul{width: 100%;overflow: hidden;}
.orderbox ul li{width: 50%;overflow: hidden;float: left;padding: 0 10px;margin-bottom: 10px;position: relative;}
.orderbox ul li .tit{line-height: 20px;color: rgba(255,255,255,.75);padding: 0 10px 5px;display: block;}
.orderbox ul li .txt{width: 100%;border: 1px solid rgba(255,255,255,.5);border-radius: 3px;background: rgba(255,255,255,.1);padding: 9px 14px;line-height: 20px;color: #fff;float: left;}
.orderbox ul li .red{color: #f00;position: absolute;left: 10px;top: 3px;}

.orderbox ul li.li_1 .txt{height: 265px;}
.orderbox ul li.li_3{width: 25%;}
.orderbox ul li.li_3 img{position: absolute;right: 16px;top: 31px;padding: 5px;background: #fafafa;border-radius: 2px;cursor: pointer;}
.orderbox ul li.li_4{width: 25%;padding-top: 25px;}
.orderbox ul li.li_4 p{float: right;max-width: 100%;}
.orderbox ul li.li_4 p input{width: 150px;background: #0270bf;line-height: 30px;padding: 5px;color: #fff;font-size: 15px;font-weight: 600;border-radius: 3px;cursor: pointer;}
.orderbox ul li.li_4 p input:hover{width: 180px;background: #e52e2e;}

@media only screen and (max-width:1440px){
.orderbox{padding: 60px 0;}
.orderbox .w1440{padding: 45px 40px 55px;}
}
@media only screen and (max-width:1200px){
.orderbox{padding: 55px 0;}
}
@media only screen and (max-width:1024px){
.orderbox{padding: 50px 0;}
.orderbox .w1440{padding: 40px 3% 50px;}
.orderbox ul li{margin-bottom: 7px;}
.orderbox ul li .tit{padding: 0 10px 2px;}
.orderbox ul li .txt{padding: 7px 14px;}
.orderbox ul li.li_1 .txt{height: 233px;}
.orderbox ul li.li_3{width: 30%;}
.orderbox ul li.li_3 img{top: 26px;right: 14px;}
.orderbox ul li.li_4{padding-top: 22px;width: 20%;}
.orderbox ul li.li_4 p{width: 100%;max-width: 150px;}
.orderbox ul li.li_4 p input{width: 100%;padding: 3px;}
.orderbox ul li.li_4 p input:hover{width: 100%;}
}
@media only screen and (max-width:768px){
.orderbox{padding: 45px 0;}
.orderbox .w1440{padding: 35px 5% 45px;background-size: auto 100%;}
.orderbox ul li{width: 100%;padding: 0;}
.orderbox ul li .red{left: 0;}
.orderbox ul li.li_1 .txt{height: 150px;}
.orderbox ul li.li_3{width: 60%;max-width: 250px;}
.orderbox ul li.li_3 img{right: 4px;}
.orderbox ul li.li_4{width: 37%;float: right;}
}
@media only screen and (max-width:480px){
.orderbox{padding: 40px 0;}
.orderbox .w1440{padding: 25px 5% 35px;}
.orderbox ul li.li_1 .txt{height: 120px;}
}

/* links */
.linkbox{padding-bottom: 25px;line-height: 25px;margin-top: -5px;}
.linkbox ul{width: 100%;overflow: hidden;padding-left: 85px;position: relative;min-height: 30px;}
.linkbox ul p{position: absolute;left: 0;top: 0;font-weight: 600;font-size: 15px;}
.linkbox ul li{display: inline;padding: 0 5px;}
.linkbox ul li a{white-space: nowrap;}

@media only screen and (max-width:1024px){
.linkbox{padding-bottom: 20px;}
.linkbox ul{padding-left: 75px;}
}
@media only screen and (max-width:768px){
.linkbox{display: none;}
}

@media only screen and (min-width:1025px){
.productbox .tel a:hover,
.companybox .title a:hover,
.servicebox ul li:hover div{-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)}
}