body{
	font-family: 'Microsoft YaHei';
}
.width1200{
	width: 1200px;
	margin: 0 auto;
}
.yx-head-banner{
	position: relative;
}
.yx-head-banner>div{
	position: absolute;
	width: 1200px;
	top: 40px;
	left: 50%;
	margin-left: -600px;
}
.yx-task-process-box{
	display: flex;
	justify-content: space-between;
	padding: 80px 0 60px;
	background: url(../img/xcx-bj.png) bottom right no-repeat;
}
.yx-task-left-process-box{
	width: 60%;
	margin-top: 120px;
}
.yx-task-right-process-box{
	width: 40%;
	position: relative;
}
.yx-task-left-process-title{
	font-size: 20px;
    color: #333333;
    line-height: 20px;
    font-weight: 300;
	margin-bottom: 18px;
}
.yx-task-left-process-subtitle{
	font-size: 30px;
	color: #333;
	line-height: 30px;
    margin: 0;
}
.yx-task-left-process-list-box{
	display: flex;
	align-items: center;
	margin-top: 100px;
}
.yx-task-left-process-list-box>span{
	margin: 0 20px;
}
.yx-task-left-process-list{
	width: 120px;
	height: 120px;
	box-shadow:3px 4px 20px 0px rgba(87,109,151,0.2);
	border-radius:5px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	background: #fff;
}
.yx-task-left-process-list>div>img{
	display: block;
	margin: 0 auto;
	transition: all .5s;
}
.yx-task-left-process-list>div>p{
	margin: 16px 0 0 0;
	color: #444444;
	font-size: 14px;
	line-height: 14px;
}
.yx-task-process-img-active{
	display: none !important;
}
.yx-task-left-process-list.active>div>.yx-task-process-img-active{
	display: block !important;
}
.yx-task-left-process-list.active>div>.yx-task-process-img{
	display: none !important;
}
.yx-task-right-process-img-box{
	position: relative;
	height: 560px;
}
.yx-task-right-process-img-box>img{
	position: absolute;
	left: 50%;
    transform: translate(-50%, 0px);
	opacity: 0;
	transition: all .5s;
}
.yx-task-right-process-img-box>img.active{
	opacity: 1;
}
.yx-task-right-process-img-subscript{
	position: absolute;
	right: 50px;
    bottom: 100px;
}
.yx-task-right-process-img-subscript>span{
	display: block;
	width:6px;
	height:40px;
	background: #FFFFFF;
	opacity: .2;
	margin-bottom: 16px;
	cursor: pointer;
	transition: all .5s;
}
.yx-task-right-process-img-subscript>span:last-child{
	margin-bottom: 0;
}
.yx-task-right-process-img-subscript>span.active{
	opacity: 1;
}
.yx-shop-box{
	background: #282828;
}
.yx-shop-process-box{
	background: url(../img/xcx-bj1.png) bottom right no-repeat;
}
.yx-shop-process-box .yx-task-left-process-title,.yx-shop-process-box .yx-task-left-process-subtitle{
	color: #fff;
}
.yx-info-box{
	background: #F0F0F0;
}
.yx-info-content-box{
	padding: 80px 0 60px;
}
.yx-info-content-title{
	text-align: center;
}
.yx-info-content-title>p{
	font-size: 20px;
	color: #333333;
	line-height: 20px;
	font-weight: 300;
	margin-bottom: 18px;
}
.yx-info-content-title>h3{
	font-size: 30px;
	color: #333;
	line-height: 30px;
	margin: 0;
}
.yx-info-content{
	display: flex;
	justify-content: space-between;
	margin-top: 60px;
}
.yx-info-content>div{
	width: 49%;
	background: #fff;
	padding-bottom: 60px;
}
.yx-info-content>div>img{
	display: block;
	margin:30px auto 0;
}
.yx-info-content>div>h4{
	font-size: 18px;
	line-height: 18px;
	text-align: center;
	color: #333333;
	font-weight: bold;
	margin-bottom: 20px;
}
.yx-info-content>div>p{
	color: #333333;
	font-size: 14px;
	text-align: center;
	line-height: 14px;
	margin: 0;
}