.ser_process{
	width: 1200px;
	margin:35px auto 0;
}
.ser_process li{
	width:208px;
	height:300px;
	float:left;
	border:1px #d8d8d8 solid;
	margin-right:-1px;
	position: relative;
	text-align: center;
	cursor: pointer;
	transition: all .5s;
}
.ser_process li:hover{
	width:330px;
}
.ser_process .ser_current{
	width:330px;
}
.ser_process .ser_current .ser_icon{
	margin-top:80px;
	transition: all .5s;
}
.ser_process .ser_current .ser_icon img:nth-child(2){
	z-index: 2;
}
.ser_process .ser_current .ser_pro_title{
	color:#175a9e;
}
.ser_process li .ser_num{
	background:url('../img/server_process_round.png') no-repeat;
	position:absolute;
	width:71px;
	height:71px;
	left:33%;
	top:-35px;
	font-size:28px;
	line-height: 70px;
	color:#fff;
	font-style: italic;
	text-align: left;
	padding-left: 16px;
}
.ser_process .ser_current .ser_num{
	left:38%;
}
.ser_process li:hover .ser_num{
	left:38%;
}

.ser_process .ser_icon{
	width:60px;
	heigth:60px;
	margin:100px auto 0;
	position:relative;
}
.ser_icon img{
	width:60px;
	height:60px;
	position:absolute;
	left:0;
	top:0;
}
.ser_icon img:nth-child(2){
	z-index: -1;
	transition: all .5s;
}
.ser_process li:hover .ser_icon img:nth-child(2){
	z-index: 2;
}
.ser_process .ser_pro_title{
	font-size: 20px;
	/* line-height: 24px; */
	font-weight: 700;
	color:#222;
	position:relative;
	top:80px;
	transition: all .5s;
}
.ser_process li:hover .ser_pro_title {
	color: #175a9e;
}
.ser_process li .ser_pro_intro {
	font-size: 16px;
	line-height: 24px;
	color: #222;
	margin-top: 100px;
	display: none;
	padding:0 10%;
}
.ser_process li:hover .ser_pro_intro {
	display: block;
	animation: comeUp .5s forwards;
}
@keyframes comeUp{
	0%{
		margin-top:120px;
	}
	100%{
		margin-top:100px;
	}
}
.ser_process .ser_current .ser_pro_intro {
	display: block;
}