/*通用标题*/
.home-title{width:100%;overflow: hidden;margin-bottom: 20px;position: relative;color: #fff;height: 40px;background: #00b2b2;position: relative;z-index: 2;}
.home-title::before,
.home-title::after{content: "";width: 6px;height: 6px;background: #fff;position: absolute;}
.home-title::before{left: 15px;top: 14px;}
.home-title::after{left: 21px;bottom: 14px;}
.home-title p{font-size: 16px;line-height: 42px;height: 40px;font-weight: 600;float: left;padding-left: 40px;}
.home-title a{font-size: 30px;width: 50px;height: 40px;color: #fff;text-align: center;line-height: 42px;float: right;}
.home-title a:hover{-webkit-transform: rotateZ(720deg);transform: rotateZ(720deg);}

/* probox */
.probox{padding-top: 25px;}
.probox .listbox{padding: 15px;background: #3285c7;text-align: center;margin-top: 10px;}
.probox .listbox .titl{font-size: 24px;font-weight: 600;line-height: 30px;padding: 10px;}
.probox .listbox .titl a{color: #fff;}

.probox .listbox .list{width: 100%;overflow: hidden;padding: 5px 0 10px;}
.probox .listbox .list ul{margin: 0 -5px;}
.probox .listbox .list ul li{width: 25%;float: left;padding: 5px;}
.probox .listbox .list ul li a{display: block;width: 100%;padding: 10px;background: #fff;overflow: hidden;position: relative;}
.probox .listbox .list ul li p{width: 100%;height: 0;padding-bottom: 75%;overflow: hidden;position: relative;}
.probox .listbox .list ul li p img{width: 100%;min-height: 100%;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,50%);-moz-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.probox .listbox .list ul li h3{line-height: 30px;padding: 5px;display: block;width: calc(100% - 20px);overflow: hidden;white-space: nowrap;text-overflow: ellipsis;background: rgba(0,0,0,.5);color: #fff;position: absolute;left: 10px;bottom: 10px;}
.probox .listbox .list2 ul li p img{width: auto;min-width: auto;height: 100%;}

.probox .listbox .pics{width: 100%;padding: 10px 0 15px;}
.probox .listbox .pics p{width: 100%;overflow: hidden;background: #fff;padding: 10px;}
.probox .listbox .pics p img{width: 100%;}

@media only screen and (max-width:768px){
.probox{display: block;}
.probox .listbox .list ul li{width: 50%;}
}
@media only screen and (max-width:480px){
.probox{padding-top: 15px;}
.probox .listbox .titl{font-size: 20px;}
.probox .listbox{padding: 10px;}
.probox .listbox .list{padding-top: 3px;}
.probox .listbox .list ul{margin: 0 -2px;}
.probox .listbox .list ul li{padding: 2px;}
.probox .listbox .list ul li a{padding: 5px;}
.probox .listbox .list ul li h3{font-size: 13px;width: calc(100% - 10px);left: 5px;bottom: 5px;padding: 0 5px;}
.probox .listbox .pics{padding-top: 3px;}
.probox .listbox .pics p{padding: 5px;}
}
@media only screen and (max-width:425px){
.probox .listbox{padding: 7px;}
.probox .listbox .list{padding-top: 0;}
.probox .listbox .list ul li a{padding: 3px;}
.probox .listbox .list ul li h3{width: calc(100% - 6px);left: 3px;bottom: 3px;line-height: 24px;}
.probox .listbox .pics{padding-top: 0;}
.probox .listbox .pics p{padding: 3px;}
}

/*company*/
.companybox{padding:35px 0 30px;}
.companybox .company{width: 58%;float: left;}
.companybox .company .cont{width: 100%;position: relative;margin-top: -5px;}
.companybox .company .pic{width: 100%;margin-bottom: 10px;}
.companybox .company .pic p{width: 100%;padding-bottom: 120px;position: relative;}
.companybox .company .pic img{min-height: 100%;width: 100%;position: absolute;left: 0;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);transform: translateY(-50%);}
.companybox .company .txt{width: 100%;font-size: 13px;line-height: 20px;color: #666;}
.companybox .company .txt em{font-style: normal;color: #00b2b2;font-weight: 600;font-size: 15px;}

.youshibox{width: 40%;float: right;}
.youshibox ul{width: calc(100% + 4px);margin: -2px;}
.youshibox ul li{width: 50%;border: 2px solid #fff;float: left;text-align: center;color: #fff;position: relative;overflow: hidden;height: 152px;padding: 0 3%;background: #00b3b3;}
.youshibox ul li p{width: 100%;position: absolute;left: 0;top: 50%;-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.youshibox ul li .tit{width: 100%;height: 100%;position: relative;overflow: hidden;}
.youshibox ul li .tit p{padding: 0 2%;font-size: 24px;line-height: 30px;}
.youshibox ul li .txt{width: 100%;height: 0;position: relative;overflow: hidden;opacity: 0;}
.youshibox ul li .txt p{font-size: 15px;max-height: 96%;overflow: hidden;}
.youshibox ul li:hover .tit{height: 0;opacity: 0;}
.youshibox ul li:hover .txt{height: 100%;opacity: 1;}
.youshibox ul li.txt1{background: #419ad9;}
.youshibox ul li.txt2{background: #00b3b3;}
.youshibox ul li.txt3{background: #43bf77;}
.youshibox ul li.txt4{background: #335980;}

@media only screen and (max-width:1100px){
.companybox .company{width: 59%;}
.youshibox{width: 40%;}
.companybox .company .pic p{padding-bottom: 35%;}
}
@media only screen and (max-width:1024px){
.companybox .company,
.youshibox{width: 100%;}
.companybox .company .cont{margin: 0;}
.companybox .company .txt{font-size: 14px;line-height: 25px;padding: 10px 0 15px;}
.companybox .company .txt p{padding-bottom: 5px;}
}
@media only screen and (max-width:768px){
.companybox .company .pic{margin-bottom: 5px;}
}
@media only screen and (max-width:480px){
.companybox{padding:25px 0 20px;}
.companybox .company .cont{margin-top: -5px;}
}
@media only screen and (max-width:425px){
.youshibox ul li{width: 100%;padding: 0 5%;height: 120px;}
}

/*advantage1*/
.advantage1{padding: 35px 0;background: #00b2b2 url(../image/bg1.jpg) center no-repeat;text-align: center;}
.advantage1 p{width: 75%;max-width: 820px;float: left;line-height: 50px;font-size: 40px;color: #fff;padding: 0 3%;}
.advantage1 span{width: 25%;max-width: 360px;float: right;padding: 0 3%;display: block;line-height: 30px;font-size: 16px;font-weight: 600;}
.advantage1 span a{display: inline-block;border: 1px solid #fff;color: #fff;padding: 9px 45px;border-radius: 25px;letter-spacing: 1px;}
.advantage1 span a:hover{background: #fff;color: #00b2b2;}

@media only screen and (max-width:1024px){
.advantage1 p,
.advantage1 span{width: 100%;max-width: 100%;padding: 10px 3%;}
.advantage1 span a{font-size: 18px;padding: 9px 50px;}
}
@media only screen and (max-width:768px){
.advantage1 p{font-size: 30px;font-weight: 600;line-height: 40px;}
}
@media only screen and (max-width:560px){
.advantage1 p{font-size: 25px;}
}
@media only screen and (max-width:480px){
.advantage1{padding: 25px 0 30px;}
.advantage1 p{font-size: 22px;}
.advantage1 span a{font-size: 16px;padding: 5px 45px;}
}
@media only screen and (max-width:425px){
.advantage1 p{font-size: 18px;line-height: 30px;}
.advantage1 span{padding: 5px 5%;}
}

/*product*/
.productbox{padding:30px 0;position: relative;}
.productbox .home-title{margin: 0;}
.productbox .cont{width: 100%;height: 350px;overflow: hidden;}

.proclabox{width: 16%;max-width: 200px;float: left;}
.proclabox .cont{border: 1px solid #00b2b2;border-top: 0;padding: 5px 9px 9px;}
.proclabox .cont ul li{width: 100%;height: 36px;border-bottom: 1px dashed #ccc;line-height: 36px;position: relative;color: #aaa;}
.proclabox .cont ul li::after{content: "\e662";position: absolute;width: 15px;height: 35px;line-height: 35px;left: 0;top: 0;font-size: 12px;text-align: center;}
.proclabox .cont ul li a{display: block;width: 100%;height: 35px;padding-left: 12%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.proclabox .cont ul li:hover{color: #00b2b2;}

.prolistbox{width: 64%;float: left;height: 390px;padding: 0 1.3%;}
.prolistbox ul{width: 100%;}
.prolistbox ul li{width: 25%;float: left;text-align: center;height: 200px;padding: 0 5px;}
.prolistbox ul li p{width: 100%;overflow: hidden;border: 1px solid #e6e6e6;}
.prolistbox ul li em{display: block;position: relative;height: 0;padding-bottom: 155px;}
.prolistbox ul li img{max-width: 90%;max-height: 90%;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.prolistbox ul li h3{display: block;height: 35px;line-height: 36px;color: #666;font-size: 13px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.prolistbox ul li:hover p{border-color: #00b2b2;}
.prolistbox ul li:hover h3{color: #00b2b2;}

.honorbox{width: 20%;max-width: 250px;float: right;}
.honorbox ul{margin: 5px 0;height: 305px;width: 200%;display: flex;flex-wrap: nowrap;}
.honorbox ul li{width: 50%;position: relative;float: left;flex-shrink: 0;text-align: center;}
.honorbox ul li a{display: block;padding: 4px;border: 1px solid #00b2b2;overflow: hidden;height: 305px;}
.honorbox ul li p{width: 100%;height: 295px;overflow: hidden;}
.honorbox ul li p em{width: 100%;height: 0;padding-bottom: 295px;position: relative;display: block;}
.honorbox ul li p img{max-width: 100%;max-height: 100%;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}
.honorbox ul li h3{width: 100%;height: 0;position: relative;line-height: 35px;}
.honorbox ul li h3 span{display: block;width: 100%;height: 35px;background: rgba(0,0,0,.75);color: #fff;position: absolute;left: 0;bottom: 0;}
.honorbox ul li:hover h3 span{background: #00b2b2;}
.honorbox .btn{width: 100%;height: 35px;}
.honorbox .btn input{width: 49%;height: 100%;display: block;background: #454545;color: #fff;font-size: 16px;text-align: center;line-height: 35px;}
.honorbox .btn .btn_l{float: left;}
.honorbox .btn .btn_r{float: right;}
.honorbox .btn input:hover{background: #00b2b2;}

@media only screen and (max-width:1200px){
.prolistbox{padding: 0 .8%;}
}
@media only screen and (max-width:1024px){
.productbox .home-title{margin-bottom: 10px;}
.proclabox{width: 100%;max-width: 100%;}
.proclabox .cont{height: auto;border: 0;padding: 0 0 15px;}
.proclabox .cont ul li{width: 20%;text-align: center;float: left;padding: 2px 5px;border: 0;}
.proclabox .cont ul li::after{content: none;}
.proclabox .cont ul li a{padding: 0;}
.prolistbox{width: 100%;height: auto;padding: 0 0 10px;}
.prolistbox ul li{height: auto;padding: 0 5px 10px;}
.prolistbox ul li em{padding-bottom: 100%;}
.honorbox{width: 100%;max-width: 100%;}
.honorbox .cont{height: auto;}
.honorbox ul{height: auto;}
.honorbox ul li{width: 12.5%;}
.honorbox ul li a{width: 96%;margin: 0 auto;height: auto;}
.honorbox ul li p{height: auto;}
.honorbox ul li p em{padding-bottom: 120%;}
.honorbox ul li p img{max-width: 90%;max-height: 90%;}
.honorbox .btn{max-width: 250px;margin: 0 auto;}
}
@media only screen and (max-width:768px){
.proclabox .cont ul li{width: 25%;}
.prolistbox ul li{width: 50%;}
.honorbox ul li{width: 25%;}
}
@media only screen and (max-width:480px){
.productbox{padding:25px 0 30px;}
.proclabox .cont ul li{width: 33.33%;}
}

/*process*/
.processbox{padding: 45px 0 50px;background: #335980 url(../image/bg2.jpg) center no-repeat;color: #fff;}
.processbox .tit{width: 90%;max-width: 500px;margin: 0 auto;position: relative;}
.processbox .tit p{font-size: 36px;line-height: 45px;text-align: center;}
.processbox .tit em,
.processbox .tit span{width: 120px;display: block;height: 1px;background: #00b2b2;position: absolute;top: 22px;}
.processbox .tit em{left: 0;}
.processbox .tit span{right: 0;}
.processbox .tit em::after,
.processbox .tit span::after{content: "";width: 5px;height: 5px;background: #00b2b2;position: absolute;top: -2px;border-radius: 50%;}
.processbox .tit em::after{right: 0;}
.processbox .tit span::after{left: 0;}

.processbox .cont{padding: 35px 3.5% 0;text-align: center;}
.processbox ul li{font-size: 20px;line-height: 24px;color: #00b2b2;font-weight: 600;width: 12.5%;float: left;height: 0;padding-bottom: 12.5%;position: relative;background: rgba(0,180,180,.5);border-radius: 50%;cursor: pointer;}
.processbox ul li::after{content: "";width: 86%;height: 86%;position: absolute;border-radius: 50%;background: rgba(255,255,255,.9);left: 7%;top: 7%;z-index: 1;-webkit-transition: .5s;transition: .5s;}
.processbox ul li span{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%,-50%);transform: translate(-50%,-50%);z-index: 2;display: block;width: 80px;}
.processbox ul p{width: 5%;float: left;height: 0;padding-bottom: 11.3%;position: relative;font-size: 30px;line-height: 30px;color: #78dddd;}
.processbox ul p::after{content: "\e609";width: 100%;position: absolute;left: 0;top: 50%;margin-top: -15px;}
.processbox ul li:hover::after{width: 96%;height: 96%;left: 2%;top: 2%;}

.processbox ul li.li7,
.processbox ul li.li8,
.processbox ul li.li9,
.processbox ul li.li10,
.processbox ul li.li11,
.processbox ul p.p6,
.processbox ul p.p7,
.processbox ul p.p8,
.processbox ul p.p9,
.processbox ul p.p10{float: right;}
.processbox ul p.p6::after,
.processbox ul p.p7::after,
.processbox ul p.p8::after,
.processbox ul p.p9::after,
.processbox ul p.p10::after{content: "\e60a";}
.processbox ul p.p6{width: 8.6%;}
.processbox ul p.p6::after{padding-right: 40%;}

@media only screen and (max-width:1024px){
.processbox ul li{font-size: 17px;}
.processbox ul p{font-size: 24px;}
}
@media only screen and (max-width:768px){
.processbox ul li{width: 28%;border-radius: 5px;background: #00b2b2;color: #fff;padding-bottom: 60px;font-size: 18px;line-height: 20px;font-size: 18px;}
.processbox ul li::after{content: none;}
.processbox ul li span{width: 100%;padding: 0 5%;}
.processbox ul p{width: 8%;padding-bottom: 60px;}
.processbox ul li.li4,
.processbox ul li.li5,
.processbox ul p.p4,
.processbox ul p.p5{float: right;}
.processbox ul li.li7,
.processbox ul li.li8,
.processbox ul li.li9,
.processbox ul p.p7,
.processbox ul p.p8{float: left;}
.processbox ul li.li10,
.processbox ul li.li11{width: 46%;}
.processbox ul p.p3,
.processbox ul p.p9,
.processbox ul p.p6{width: 100%;padding-bottom: 40px;}
.processbox ul p.p3::after,
.processbox ul p.p9::after{width: 28%;content: "\e60c";left: auto;right: 0;}
.processbox ul p.p6::after{width: 28%;content: "\e60c";padding: 0;}
.processbox ul p.p4::after,
.processbox ul p.p5::after{content: "\e60a";}
.processbox ul p.p7::after,
.processbox ul p.p8::after{content: "\e609";}
}
@media only screen and (max-width:600px){
.processbox{padding: 35px 0;}
.processbox .tit em,
.processbox .tit span{width: 20%;}
.processbox .cont{padding-top: 25px;}
}
@media only screen and (max-width:480px){
.processbox .tit p{font-size: 30px;font-weight: 600;}
.processbox ul p.p3,
.processbox ul p.p6,
.processbox ul p.p9{padding-bottom: 30px;}
}
@media only screen and (max-width:480px){
.processbox .tit em,
.processbox .tit span{display: none;}
.processbox ul li,
.processbox ul p{padding-bottom: 50px;}
}
@media only screen and (max-width:425px){
.processbox ul li{font-size: 16px;}
}

/*news*/
.zixunbox{padding: 30px 0;}

.newsbox{width: 30%;float: left;padding-right: 2%;}
.newsbox .home-title{margin: 0;}
.newsbox .list{width: 100%;height: 310px;border: 1px solid #00b2b2;border-top: 0;padding:10px 4% 15px;}
.newsbox .list ul{overflow: hidden;height: 100%;}
.newsbox .list ul li{width: 100%;height: 40px;border-bottom: 1px dashed #ccc;line-height: 40px;background: url(../image/newsico.png) 3px center no-repeat;padding: 0 80px 0 25px;position: relative;}
.newsbox .list ul li a{display: block;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.newsbox .list ul li span{display: block;position: absolute;right: 0;top: 0;max-width: 80px;color: #787878;}

/*order*/
.orderbox{width: 28%;float: right;}
.orderbox .title{width: 100%;height: 40px;margin-bottom: 15px;background: #00b2b2;display: block;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;color: #fff;padding: 0 15px;font-weight: 600;font-size: 16px;line-height: 40px;}
.orderbox .title:hover{background: #ffb01f;}
.orderbox .cont{height: 295px;width: 100%;}
.orderbox ul li{width: 100%;height: 35px;margin-bottom: 10px;float: left;overflow: hidden;position: relative;border: 1px solid #ddd;background: #fafafa;border-radius: 3px;}
.orderbox ul li .tit{display: block;width: 65px;text-align: center;line-height: 34px;position: absolute;left: 0;top: 0;color: #787878;}
.orderbox ul li .red{display: block;width: 15px;line-height: 34px;position: absolute;top: 50%;right: 0;text-align: center;margin-top: -15px;color: #e00;}
.orderbox ul li .txt,
.orderbox ul li .area,
.orderbox ul li .code{display: block;width: 100%;height: 100%;padding: 4px 14px 4px 60px;line-height: 24px;overflow: hidden;background: none;}
.orderbox ul li.li_2{height: 110px;margin-bottom: 15px;}
.orderbox ul li.li_3{width: 65%;max-width: 210px;margin-right: 10px;}
.orderbox ul li.li_3 img{position: absolute;right: 15px;top: 7px;cursor: pointer;}
.orderbox ul li.li_4{width: 30%;border: 0;background: none;}
.orderbox ul li.li_4 p{width: 100%;background: #00b2b2;}
.orderbox ul li.li_4 p input{display: block;width: 100%;height: 100%;font-size: 16px;font-weight: 600;text-align: center;color: #fff;line-height: 35px;cursor: pointer;background: none;}
.orderbox ul li.li_4 p:hover{background: #ffb01f;}

/*map*/
.mapbox{width: 40%;float: left;border: 1px solid #ddd;height: 350px;}
.mapbox iframe{position: relative;z-index: -1;}
.mapbox:hover iframe{z-index: 1;}

@media only screen and (max-width:1024px){
.newsbox{width: 57%;padding: 0;margin-bottom: 25px;}
.orderbox{width: 40%;margin-bottom: 25px;}
.mapbox{width: 100%;}
}
@media only screen and (max-width:600px){
.newsbox,
.orderbox{width: 100%;}
}
@media only screen and (max-width:425px){
.mapbox{height: 280px;}
}