﻿.section_01,.section_03,.section_05{
	background: -moz-linear-gradient(330deg, #68d7ca 5%, #123c8a 73%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(5%,#68d7ca), color-stop(73%,#123c8a));
    background: -webkit-linear-gradient(330deg, #68d7ca 5%,#123c8a 73%);
    background: -o-linear-gradient(330deg, #68d7ca 5%,#123c8a 73%);
    background: -ms-linear-gradient(330deg, #68d7ca 5%,#123c8a 73%);
	background: linear-gradient(330deg, #68d7ca 5%,#123c8a 73%);
}
.section_02,.section_04,.section_06{
	background: -moz-linear-gradient(30deg, #5733c6 30%, #c184eb 90%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(30%,#5733c6), color-stop(90%,#c184eb));
    background: -webkit-linear-gradient(30deg, #5733c6 30%,#c184eb 90%);
    background: -o-linear-gradient(30deg, #5733c6 30%,#c184eb 90%);
    background: -ms-linear-gradient(30deg, #5733c6 30%,#c184eb 90%);
	background: linear-gradient(30deg, #5733c6 30%,#c184eb 90%);
}

.section-title{
	position: relative;
	left: 0;
	top: 0;
	text-align: left;
	margin-bottom: 40px;
}
.section-title span:before{
	display: none;
}
.section_01{
	padding: 80px 0 50px 0;
}

.imgbox{
	position: relative;
}
.appkaifa .imgbox{
	margin-top: -130px;
	width: 450px;
}
.imgbox img{
	width: 100%;
}
.infobox{
	padding-left: 40px;
	padding-right:50px;
}
.infobox .info{
	margin-bottom: 28px;
}
.infobox .info h3{
	color: #fff;
	font-size: 1.2rem;
	margin-bottom: 10px;
}
.infobox .info p{
	color:#d9e4ed;
	line-height: 1.8rem;
}

.appserver .imgbox{
	margin-left: -30px;
	margin-top: 165px;
	width: 355px;
}
.appserver .infobox{
	padding-left: 10px;
	padding-right: 0;
}

.section_02{
	padding: 80px 0 100px 0;
}

.webserver{
	padding-bottom: 30px;
}
.webserver .imgbox{
	width: 330px;
	margin-left: -20px;
	margin-top: 60px;
	box-shadow: 20px 20px 1px rgba(255, 255, 255, 0.47);
}
.webserver .infobox{
	padding-left: 10px;
	padding-right: 0;
}

.webconstruc{
	margin-top: 120px;
}

.webconstruc .imgbox{
	width: 330px;
	margin-top: 100px;
	margin-left: 50px;
}
.webconstruc .infobox{
	padding-right: 0;
}
.webconstruc .info{
	float: left;
	width: 47%;
}
.webconstruc .info:nth-child(2n+1){
	margin-right: 6%;
}

.info.ico{
	padding-left: 66px;
}
.infobox .info.ico:before{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background-image: url(../image/webconstruc_ico.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	width: 50px;
	height: 50px;
}
.webconstruc .info:nth-child(1):before{
	background-position: -0px 0px;
}
.webconstruc .info:nth-child(2):before{
	background-position: -50px 0px;
}
.webconstruc .info:nth-child(3):before{
	background-position: -100px 0px;
}
.webconstruc .info:nth-child(4):before{
	background-position: -150px 0px;
}


.section_03{
	padding: 130px 0 100px 0;
	overflow: hidden;
}

.gongzhong .imgbox{
	width: 220px;
	margin-top: -40px;
	margin-left: 80px;
}
.gongzhong .infobox{
	padding-right: 20px;
}
.gongzhong .info:before{
	background-position: -200px 0px;
}

.xchengxu{
	margin-top: 160px;
}
.xchengxu .imgbox{
	width: 220px;
	margin-top: -30px;
	margin-left: 20px;
}
.xchengxu .infobox{
	padding-right: 0;
	padding-left: 0;
	margin-left: -34px;
}
.xchengxu .info:before{
	background-position: -250px 0px;
}


.wxstate{
	padding: 40px 0 40px 0;
	background: -moz-linear-gradient(320deg, #68d7ca 5%, #123c8a 73%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(5%,#68d7ca), color-stop(73%,#123c8a));
    background: -webkit-linear-gradient(320deg, #68d7ca 5%,#123c8a 73%);
    background: -o-linear-gradient(320deg, #68d7ca 5%,#123c8a 73%);
    background: -ms-linear-gradient(320deg, #68d7ca 5%,#123c8a 73%);
	background: linear-gradient(320deg, #5dbeb5 5%,#347497 73%);
}
.wxstate:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(../image/bg_weixin.png);
	background-size: 100% auto;
	background-position: center center;
	opacity: .4;
}
.wxstate .wxstatebox{
	width: 760px;
	margin: 0 auto;
	color: #fff;
	text-align: center;
}
.wxstate .wxstatebox h3{
	font-size: 1.3rem;
	margin-bottom: 17px;
}
.wxstate .wxstatebox p{
	line-height: 1.7rem;
	font-size: 1.03rem;
	color: #f1f1f1;
}

.section_04{
	padding: 80px 0 0px 0;
}
.section_04 .section-title{
	text-align: center;
	margin-bottom: 90px;
}
.character{
	height: 470px;
	margin: 0 auto;
}
.character .circular01{
	width: 450px;
	height: 450px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	margin: 0 auto;
	border-radius: 50%;

	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -225px;
	margin-top: -225px;
	z-index: 0;
}
.character .circular02{
	width: 340px;
	height: 340px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	margin: 55px;
	border-radius: 50%;
}
.character .circular03{
	width: 260px;
	height: 260px;
	border: 1px solid rgba(255, 255, 255, 0.65);
	margin: 40px;
	border-radius: 50%;
}
.character .circular03 .center{
	color: #6a41cd;
	width: 120px;
	height: 120px;
	margin: 70px;
	background: #e8e0f7;
	border-radius: 50%;
	line-height: 120px;
	text-align: center;
	font-size: 1.8rem;
	letter-spacing: 4px;
}

.character .infobox{
	margin-top: 25px;
	padding:0 100px;
}
.character .infobox .info{
	width: 100%;
	margin-bottom: 80px;
}
.character .info.left{
	text-align: right;
	padding-left: 0;
	padding-right: 70px;
}

.character .info.right{
	padding-right: 0;
	padding-left: 70px;
}
.character .info .sort{
	position: absolute;
	top: -2px;
	width: 54px;
	height: 54px;
	background: #fff;
	border-radius: 50%;
	text-align: center;
	line-height: 54px;
	font-size: 1.8rem;
	font-weight: 600;
	color: #fff;
}
.character .info.left .sort{
	right: 0;
}
.character .info.right .sort{
	left: 0;
}

.character .info.left:nth-child(1){
	position: relative;
	left: 0px;
}
.character .info.left:nth-child(2){
	position: relative;
	left: -60px;
}

.character .info.left:nth-child(3){
	position: relative;
	left: 40px;
	top: -20px;
}

.character .info.right:nth-child(1){
	position: relative;
	left: -10px;
	top: -10px;
}
.character .info.right:nth-child(2){
	position: relative;
	left: 62px;
	top: -13px;
}

.character .info.right:nth-child(3){
	position: relative;
	left: 6px;
    top: -30px;
}

.character .info.left:nth-child(1) .sort{
	background: #e93f52;
	background: linear-gradient(150deg, #ef6449 20%,#e93f52 80%);
}
.character .info.left:nth-child(2) .sort{
	background: #3abe29;
	background: linear-gradient(150deg, #7ddb73 20%,#3abe29 80%);
}
.character .info.left:nth-child(3) .sort{
	background: #f34aef;
	background: linear-gradient(150deg, #f086f0 20%,#f34aef 80%);
}
.character .info.right:nth-child(1) .sort{
	background: #2999ea;
	background: linear-gradient(150deg, #24dddc 20%,#2999ea 80%);
}
.character .info.right:nth-child(2) .sort{
	background: #32a272;
	background: linear-gradient(150deg, #39e296 20%,#32a272 80%);
}
.character .info.right:nth-child(3) .sort{
	background: #db3343;
	background: linear-gradient(150deg, #eb5a3e 20%,#db3343 80%);
}



.section_05{
	padding: 90px 0 100px 0;
}
.section_05 .section-title{
	text-align: center;
}

.process .process-item{
	width: 92px;
	height: 106px;
	margin: 0 auto;
	margin-top: 80px;
}
.process .process-item .process-name{
	height: 100%;
	text-align: center;
    padding: 27px 20px;
	font-size: 1.4rem;
	color: #1c4d91;
	background: url(../image/bg_process.png);
}
.process .process-item:last-child .process-name{
	padding-top: 40px;
}
.process .process-item:first-child{
	margin-top: 60px;
}
.process .process-item:first-child .process-line{
	display: none;
}
.process .process-item .process-line{
	content: "";
	height: 80px;
	position: absolute;
	top: -80px;
	width: 2px;
	left: 50%;
	margin-left: -1px;
	background: rgba(255,255,255,.4);
}

.process .process-info{
	width: 400px;
	padding: 0 40px;
	position: absolute;
	left: 100%;
	top: 20px;
}
.process .process-info .info h3{
	font-size: 1.3rem;
}
.process .process-info .info .tags{
	width: 230px;
}
.process .process-info .info .tags span{
	display: inline-block;
	width: 80px;
	background: #c9d8e5;
	color: #1c4f92;
	text-align: center;
	font-size: 1.1rem;
	padding: 5px 11px;
	margin-right: 7px;
	margin-top: 4px;
	margin-bottom: 7px;
	border-radius: 4px;
}

.process .process-item:nth-child(2n) .process-info{
	text-align: right;
	left: unset;
	right: 100%;
}
.process .process-item:nth-child(2n) .process-info .tags{
	float: right;
}