.base-wrap{float:left; width:100%; margin:0;background-image: url("../images/serviceBg.jpg"); background-position: center center; background-repeat: no-repeat;background-size: cover}
.base-content{width:1300px; margin:90px auto 100px}
.service-left{ width: 50%; float: left; margin: 0;}
.service-left h2{margin:0 0 15px 0;  font-size:18px;}
.service-left h3{margin:0;  font-size:46px; color: #222; line-height: 1.2em;}
.servicebox{ width: 100%; float: left; margin: 0;padding: 60px 0 0 60px; box-shadow:2px 3px 10px #ccc;background-color: #f8f8f8}
.service-right{ width:50%; float: left; margin: 0}
.top-info{float:left;width:94%; margin:0 3% 70px;line-height:1.8em; font-size:17px;text-align:justify;}
.flowico{width: 18%;float:left;margin-right: 5%;position: relative}
.iconp{float:left;width:80px; height:80px;margin:0; background: #fff;padding:8px; border-radius: 50px;box-shadow:2px 3px 10px #ccc}   
.iconp{opacity: 0;-moz-transform: translateX(20px);-ms-transform: translateX(20px);-webkit-transform: translateX(20px);transform: translateX(20px);-moz-transition: opacity 0.8s, -moz-transform 0.8s;-o-transition: opacity 0.8s, -o-transform 0.8s;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;}
.iconp.show{opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.iconp img{max-width:100%; height:auto;margin:0; display: block;text-align: center;display: block}
.arrowp{width:77%; float:left;margin:0;}
.arrowp{opacity: 0;-moz-transform: translateX(-20px);-ms-transform: translateX(-20px);-webkit-transform: translateX(-20px);transform: translateX(-20px);-moz-transition: opacity 0.8s, -moz-transform 0.8s;-o-transition: opacity 0.8s, -o-transform 0.8s;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;}
.arrowp.show{opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.arrowp-title{ width: 100%; margin: 0 0 15px; font-size: 18px;font-weight: 500;}
.arrowp-title span{ font-size:32px; font-style: italic}
.serviceinfo{ width: 100%; margin: 0 0 10px; line-height: 1.6em; font-size: 15px;text-align:justify; }
.service-leftmain{width:100%; float: left; margin:0; }
.service-leftmain ul{ margin:0; padding:0; list-style:none; font-size:0; text-align: left;} 
.service-leftmain li {width:88%;height: 180px;margin:0 12% 0 0} 
.service-main{width:100%; float: left; margin:0; }
.service-main ul{ margin:0; padding:0; list-style:none; font-size:0; text-align: left;} 
.service-main li {width:88%;height: 180px;margin:0 12% 0 0} 
.serviceline{width: 1px;height: 120px;background-color: #ccc;position: absolute;top:80px;left:40px;}
.serviceline{opacity: 0;-moz-transform: translateY(30px);-ms-transform: translateY(30px);-webkit-transform: translateY(30px);transform: translateY(30px);-moz-transition: opacity 0.8s, -moz-transform 0.8s;-o-transition: opacity 0.8s, -o-transform 0.8s;-webkit-transition: opacity 0.8s, -webkit-transform 0.8s;transition: opacity 0.8s, transform 0.8s;}
.serviceline.show{opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.service-mobline{display: none}

@media screen and (max-width: 1600px) {
.base-content{width:88%; margin:70px auto 80px}
}
@media screen and (max-width: 1200px) {
.base-content{width: 90%; margin:60px auto 70px}
.top-info{margin:0 3% 60px}
.servicebox{padding: 50px 0 0 50px}
.flowico{width:22%}
.arrowp{width:73%}
.service-main li {width:88%;height:200px;margin:0 12% 0 0} 
.service-leftmain li {width:88%;height:200px;margin:0 12% 0 0} 
.serviceline{height: 140px}
}
@media screen and (max-width: 980px) {
.base-content{width: 90%; margin:45px auto 55px}
.top-info{margin:0 3% 40px}
.servicebox{padding: 50px 0}
.service-right{ width:74%;margin: 0 13%}
.service-mobline{width: 1px;height: 120px;background-color: #ccc;position: absolute;top:80px;left:40px;display: block}
.service-leftmain li {width:100%;height:165px;margin:0} 
.service-main li {width:100%;height:165px;margin:0} 
.service-main li:last-child{height:auto} 
}
@media screen and (max-width: 550px) {
.base-content{width: 90%; margin:30px auto 40px}
.top-info{ margin:0 3% 30px;line-height:1.7em}
.servicebox{padding: 20px 25px 20px 20px}
.service-right{ width:100%;margin: 0}
.flowico{width:19%}
.iconp{width:50px; height:50px;padding:8px}   
.arrowp{width:76%}
.service-mobline{height: 150px;position: absolute;top:50px;left:24px}
.serviceline{height: 150px;position: absolute;top:50px;left:24px;}
.service-leftmain li {height:170px} 
.service-main li {height:170px} 
.arrowp-title{ margin: 0 0 8px}
.arrowp-title span{ font-size:26px}
}