.top-content{float:left; width:100%; margin:70px 0 100px}
.service-wrap{width:1400px; margin:0 auto}
.service-box{float:left;width:100%; margin:0; font-size:17px;}
.flow-item{float:left;width:24%; margin:0 .5% 0;position:relative}
.flow-item img{max-width:100%;height: auto;margin:0;display: block;border-top-left-radius: 30px}
.service-tx{width:100%; position:absolute; left:0; bottom:0; z-index:2; text-align: center;background-color: rgba(0,0,0,.4);padding: 15px 0}
.service-tx h3{margin:0; line-height:1.6em; font-size:18px; font-weight:500;letter-spacing:0.2em;text-indent:0.2em;color: #fff}
.service-tx p{line-height: 1.8em; font-size: 13px;margin:0 0 0 .7em; text-indent:-.35em;font-weight: 400;color: #ddd}
.service-cor{width:100%;float:left;font-size: 18px; margin-bottom:0}
.service-cor i{font-size: 16px;margin-right: 10px}
.service-title{width:100%; float:left; margin:0 0 80px 0;text-align: center}
.service-title h2{margin:0; line-height:1.6em; font-size:22px; font-weight:500;letter-spacing:0.2em;text-indent:0.2em;}
.service-line{position: relative;float:left; width:100%;height: 8px;background-color: #333333; margin-bottom:80px;}

@media only screen and (max-width:1600px) {
.top-content{margin:60px 0 80px}
.service-wrap{width:85%}
.service-title{margin:0 0 60px}
}
@media only screen and (max-width:1200px) {
.top-content{margin:50px 0 60px}
.service-wrap{width:90%}
.service-title{margin:0 0 40px}
}
@media only screen and (max-width:980px) {
.top-content{margin:40px 0}
.service-wrap{width:90%}
.service-title{margin:0 0 30px}
.flow-item{width:48%; margin:0 1% 15px}
}
@media only screen and (max-width:767px) {
.service-title{margin:0 0 30px}
.service-title h2{font-size:24px}
}
@media only screen and (max-width:550px) {
.top-content{margin:25px 0 20px}
.service-wrap{width:92%}
.service-cor{font-size: 17px; margin-bottom:10px}
.service-title{margin:0 0 20px}
.service-title h2{font-size:18px}
.service-tx p{line-height: 1.5em; font-size:11px;margin:0 0 0 .7em; text-indent:-.35em}
}

.base-wrap{float:left; width:100%; margin:0}
.base-content{width:1400px; margin:70px auto 20px}
.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;}
.flowbox{ width: 100%; float: left; margin:0 0 100px}
.flowtitle{ width: 100%; float: left; margin:0 0 80px;position:relative;letter-spacing:.4em;font-weight: 500; font-size: 17px}
.flowtitle:before{content: ''; position: absolute;top: 52%;background: #bbb;width:92%;height: 1px;left: 0;left:8%;}
.flowleft{ width:38%; float: left; margin:0 6%}
.flowright{ width:38%; float: left; margin:0 6%}
.flowico{width: 18%;float:left;margin-right: 5%;position: relative}
.iconp{float:left;width:90px; height:90px;margin:0; background: #fff;padding:17px; border-radius: 50px;box-shadow:2px 3px 10px #ccc;text-align: center; line-height: 90px}   
.iconp img{max-width:56px; height:auto;margin:0 auto; display: block}
.arrowp{width:77%; float:left;margin:0;}
.arrowp-title{ width: 100%; margin: 0 0 15px; font-size: 18px;font-weight: 500;}
.arrowp-title span{ font-size:17px}
.flow-tx{ width: 100%;float: left}
.flow-tx p{line-height: 1.8em; font-size: 15px;margin:0 0 0 .7em; text-indent:-.35em;font-weight: 400;color: #444}
.flow-tx i{font-size: 14px;margin-right:0 5px 0 0; color: #666}
.flowbase{ width: 100%; float: left; margin: 0}
.flowbottom{width: 100%; float: left; margin: 0 0 80px;padding:60px 0; background-color: #f4f3f1}

@media only screen and (max-width:1600px) {
.base-content{width:85%;margin:60px auto 10px}
.flowbox{margin:0 0 70px}
.flowtitle{margin:0 0 60px}
.flowbottom{margin: 0 0 60px;padding:60px 0}
}
@media only screen and (max-width:1200px) {
.base-content{width:90%;margin:50px auto 10px}
.flowtitle{margin:0 0 50px}
.flowtitle:before{content: ''; position: absolute;top: 52%;background: #bbb;width:88%;left: 0;left:12%;}
.flowleft{ width:44%; margin:0 3%}
.flowright{ width:44%; margin:0 3%}
.flowico{width:20%;margin-right: 5%;position: relative}
.arrowp{width:75%}
.iconp{width:76px; height:76px;line-height: 76px}   
.iconp img{max-width:42px;}
.flowbox{margin:0 0 50px}
.flowbottom{margin: 0 0 50px;padding:50px 0}
}
@media only screen and (max-width:980px) {
.base-content{width:90%;margin:40px auto 10px}
.flowtitle{margin:0 0 40px}
.flowtitle:before{content: ''; position: absolute;top: 52%;background: #bbb;width:85%;left: 0;left:15%;}
.flowleft{ width:46%; margin:0 2%}
.flowright{ width:46%; margin:0 2%}
.flowico{width:25%;margin-right: 5%}
.arrowp{width:70%}
.flowbox{margin:0 0 40px}
.flowbottom{margin: 0 0 40px;padding:40px 0}
}
@media only screen and (max-width:767px) {
.flowleft{width:96%; margin:0 2% 25px}
.flowright{width:96%; margin:0 2% 25px}
.flowico{width:15%;margin-right: 5%}
.arrowp{width:80%}
.flowbox{margin:0 0 30px}
.flowbottom{margin: 0 0 40px;padding:30px 0}
}
@media only screen and (max-width:550px) {
.base-content{margin:25px auto 0}
.iconp{width:50px; height:50px;line-height: 50px;padding:12px; }   
.iconp img{max-width:26px;}
.flowleft{margin:0 2% 25px}
.flowright{margin:0 2% 25px}
.flowtitle{margin:0 0 30px}
.flowtitle:before{content: ''; position: absolute;top: 52%;background: #bbb;width:70%;left: 0;left:30%;}
.flowico{width:17%;margin-right: 5%}
.arrowp{width:78%}
.flowbox{margin:0 0 15px}
.flowbottom{margin: 0 0 30px;padding:30px 0 10px}

}