.step{
	width:550px;
	padding: 110px 0 60px 0;
	margin:0 auto;
}
.step>li{
	color:#C2A5B2;
	position: relative;
	display: inline-block;
	text-align: center;
	width:80px;
	margin:0 50px;
}
.step>li.pass{
	color:#33BB44;
}
.step>li.curr{
	color:#33BB44;
}
.step>li::before{
	font-family: "xiconfont" !important;
	content: attr(data-index);
	display: block;
	box-sizing: border-box;
	width:25px;
	height:25px;
	line-height:22px;
	border:2px solid #CCCCCC;
	border-radius: 50%;
	
	position: absolute;
	left: 50%;
	top:-35px;
	margin-left:-12px;
	
	font-size: 14px;
}
.step>li.curr::before{
	content: attr(data-index);
	border:2px solid #33BB44;
	color:#33BB44;
}
.step>li.pass::before{
	content: "\eaf1";
	border:2px solid #33BB44;
	color:#33BB44;
}

.step>li::after{
	content: '';
	display: inline-block;
	width: 124px;
	height: 9px;
	overflow: hidden;
	position: absolute;
	left: 70px;
	top:-28px;
	background-image: url(../step.png);
	background-position: 0 0;
	background-repeat: no-repeat;
}
.step>li.pass::after{
	background-position: 0 -9px;
}
.step>li:last-child::after{
	display: none;
}




.terms-dialog{
	position: fixed;
	z-index: 100;
	left:0;
	top:0;
	width:100%;
	height: 100%;
	background-color: rgba(0,0,0, 0.3);
	display: none;
}
.terms-dialog>.dialog{
	box-sizing: border-box;
	border-radius: 5px;
	position:absolute;
	left:50%;
	top:50%;
	width:900px;
	height:500px;
	margin-left:-450px;
	margin-top:-250px;
	background-color: #fff;
	border:5px solid #C3C3C3;
}
.terms-dialog>.dialog>.title{
	line-height: 40px;
	font-size: 16px;
	color:#656565;
	padding-left: 20px;
	background-color: #F3F3F3;
}
.terms-dialog>.dialog>.content{
	box-sizing: border-box;
	height: 380px;
	line-height: 160%;
	font-size: 14px;
	color:#656565;
	padding: 10px 20px;
	overflow-y: auto;
}

.terms-dialog>.dialog>.btn-agreement{
	display: block;
	width:240px;
	height:50px;
	line-height:50px;
	background-color: #FF7333;
	margin:10px auto;

	font-size: 20px;
	color:#fff;
	text-align: center;
}
.terms-dialog>.dialog>.btn-agreement:hover{
	opacity: 0.8;
}


.step-con{
	width:400px;
	margin: 0 auto;
}
.step1 .form-item, .step2 .form-item{
	position: relative;
	margin-bottom:32px;
}
.step1 .form-item>span,.step2 .form-item>span{
	position: absolute;
	left:22px;
	top:0;
	line-height:52px;
	z-index: 1;

	font-size: 14px;
	color: #7D6695;
	letter-spacing: 5px;

	pointer-events: none;
}
.step1 .form-item>.btn-get-smscode,.step2 .form-item>.btn-get-smscode{
	position: absolute;
	right:5px;
	top:10px;
	z-index: 1;


}
.step1 .form-item>input,.step2 .form-item>input{
	box-sizing: border-box;
	width:400px;
	height: 55px;
	line-height: 55px;
	padding-left: 130px;
}


.step1 .form-item ::-webkit-input-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step1 .form-item -moz-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step1 .form-item ::-ms-input-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step1 .form-item ::input-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step2 .form-item ::-webkit-input-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step2 .form-item -moz-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step2 .form-item ::-ms-input-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step2 .form-item ::input-placeholder {
	font-size: 14px;
	color: #CCCCCC;
}

.step-con .btn-next{
	margin:20px 0 380px 0;
	display: block;
	line-height: 55px;
	background: #E2231A;

	text-align: center;
	color:#FFFFFF;
	font-size: 16px;
}
.step-con .btn-next:hover{
	opacity: 0.8;
}
.step3{
	width:500px;
}
.step3 .form-item{
	position: relative;
	margin-bottom:32px;
}
.step3>div{
	line-height:100px;
	font-size: 18px;
	color: #7D6695;	
	text-align: center;
}
.step3 td.title{
	line-height:60px;
	z-index: 1;

	font-size: 14px;
	color: #7D6695;
	letter-spacing: 5px;

}
.step3 td input[type=text]{
	box-sizing: border-box;
	width:400px;
	height: 40px;
	line-height: 40px;
	padding:0 6px;
}

.step4{
	padding-bottom: 300px;
}
.step4>div{
	padding:30px 0 50px 0;
	text-align: center;
	font-size: 20px;
	color: #67C23A;
}
.step4>div .icon{
	display: inline-block;
}
.step4>div .icon::before{
	content: "\e608";
	display: inline-block;
	color: #67C23A;
	font-size: 56px;
	margin-right: 10px;
	vertical-align:-10px;
}