/**************************
 * 名称：dsp页面
 * 日期：2016-06-20
 * 作者：nack800@163.com
 * 描述：dsp页面
 **************************/
@charset "UTF-8";
/* css reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{ font-size:12px; position:static; color:#000; font-family:'Microsoft YaHei';}
table{border-collapse:collapse;border-spacing:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
img{ border:none;}
a{ color:#a0a0a0; text-decoration:none;}
a:hover{ color:#e74c3c; text-decoration:none;}
a,area{ blr:expression(this.onFocus=this.blur());}
a:focus{ outline:0;}
input{ outline:0; outline:none;}
.left{float:left;}
.right{float:right;}
.clearfix:after{ display:block;font-size:0;content:".";clear:both;height:0;visibility:hidden;}
.clearfix{ *height:1%;}

/* main */
.step1{background:white;}
.header{height:76px;}
.w1100{width:1100px;margin:0 auto;}
.logo{float:left;margin:20px 0 0 40px;}
.header h1{float:left;margin:18px 0 0 15px;height:40px;font:bold 18px/40px 'Microsoft YaHei';color:#1899f4;padding-left:15px;border-left:1px solid #1899f4;}
.header-center{font:bold 18px/76px 'Microsoft YaHei';color:#1899f4;margin-left:218px;}
.header-right{margin-right:40px;}
.header-right a{font:18px/38px 'Microsoft YaHei';border:1px solid #1899f4;border-radius:5px;padding:0 12px;margin:18px 0 0 10px;color:#1899f4;}
.banner{height:774px;position:relative;}
.banner div{position:absolute;left:50%;}
.ad1{top:37%;margin-left:-440px;transform:translate3D(0, -180px, 0);-webkit-transform:translate3D(0, -180px, 0);opacity:0;transition:all 0.7s ease;-webkit-transition:all 0.7s ease;}
.ad2{top:48%;margin-left:-334px;transform:translate3D(0, 50px, 0);-webkit-transform:translate3D(0, 50px, 0);opacity:0;transition:all 0.7s ease 0.7s;-webkit-transition:all 0.7s ease 0.7s;}
.ad3{top:56%;margin-left:-334px;transform:translate3D(0, 50px, 0);-webkit-transform:translate3D(0, 50px, 0);opacity:0;transition:all 0.7s ease 1.4s;-webkit-transition:all 0.7s ease 1.4s;}
.step1 .active .ad1, .step1 .active .ad2, .step1 .active .ad3{transform:translate3D(0, 0, 0);-webkit-transform:translate3D(0, 0, 0);opacity:1;}

.step2{background:#f6f7fa;}
.step2 .w1100{padding-bottom:80px;}
.step-title{height:160px;line-height:160px;font-weight:bold;font-size:32px;color:#020202;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;}
.step2 dl{margin:0 98px 0 0;float:left;width:201px;}
.step2 dl dt{text-align:center;}
.step2 dl dt img{transition:all 1s ease;-webkit-transition:all 1s ease;height:380px;}
.step2 dl:first-child dt img{transform:translate3D(-1299px, 0, 0);-webkit-transform:translate3D(-1299px, 0, 0);}
.step2 dl:nth-child(2) dt img{transform:translate3D(-1000px, 0, 0);-webkit-transform:translate3D(-1000px, 0, 0);}
.step2 dl:nth-child(3) dt img{transform:translate3D(1000px, 0, 0);-webkit-transform:translate3D(1000px, 0, 0);}
.step2 dl:nth-child(4) dt img{transform:translate3D(1299px, 0, 0);-webkit-transform:translate3D(1299px, 0, 0);}
.step2 dl dd{font:20px/24px 'Microsoft YaHei';color:#8e8e8e;padding:35px 0 0;text-align:center;transform:translate3D(0, 30px, 0);-webkit-transform:translate3D(0, 30px, 0);opacity:0;transition:all 0.8s ease 1s;-webkit-transition:all 0.8s ease 1s;}
.step2 dl:last-child{margin-right:0;}
.step2 .active dl dt img{transform:translate3D(0, 0, 0);-webkit-transform:translate3D(0, 0, 0);}
.step2 .active dl dd{transform:translate3D(0, 0, 0);-webkit-transform:translate3D(0, 0, 0);opacity:1;}

.step3{background:white;}
.step3 .w1100{padding-bottom:80px;}
.step3 dl{margin:100px 0 0 34px;float:left;width:231px;transform:translate3D(0, -160px, 0);-webkit-transform:translate3D(0, -160px, 0);opacity:0;}
.step3 dl dt{}
.step3 dl dt img{}
.step3 dl dd{font:16px/20px 'Microsoft YaHei';color:#020202;padding-top:35px;text-align:center;}
.step3 dl dd.name{font:18px/22px 'Microsoft YaHei';color:#5d5d5d;}
.step3 dl dd span{display:inline-block;background:#47bafc;color:white;width:35px;height:35px;line-height:35px;background:url('../../images/dsp/arrow.png') no-repeat;opacity:0;transform:translate3D(-100px, 0, 0) rotate(0);-webkit-transform:translate3D(-100px, 0, 0) rotate(0);}
.step3 dl:first-child{transition:all 0.5s ease-out;-webkit-transition:all 0.5s ease-out;}
.step3 dl:nth-child(2){transition:all 0.5s ease-out 0.5s;-webkit-transition:all 0.5s ease-out 0.5s;}
.step3 dl:nth-child(3){transition:all 0.5s ease-out 1s;-webkit-transition:all 0.5s ease-out 1s;}
.step3 dl:last-child{transition:all 0.5s ease-out 1.5s;-webkit-transition:all 0.5s ease-out 1.5s;}

.step3 dl:first-child dd span{transition:all 0.5s ease-out 0.5s;-webkit-transition:all 0.5s ease-out 0.5s;}
.step3 dl:nth-child(2) dd span{transition:all 0.5s ease-out 1s;-webkit-transition:all 0.5s ease-out 1s;}
.step3 dl:nth-child(3) dd span{transition:all 0.5s ease-out 1.5s;-webkit-transition:all 0.5s ease-out 1.5s;}
.step3 dl:last-child dd span{transition:all 0.5s ease-out 2s;-webkit-transition:all 0.5s ease-out 2s;}
.step3 .active dl{transform:translate3D(0, 0, 0);opacity:1;}
.step3 .active dl dd span{opacity:1;transform:translate3D(0, 0, 0) rotate(359deg);-webkit-transform:translate3D(0, 0, 0) rotate(359deg);}

.step4{background:#f6f7fa;}
.step4 .w1100{padding-bottom:80px;}
.step4 dl{float:left;width:500px;margin:30px 100px 0 0;}
.step4 dl dt{font:24px/62px 'Microsoft YaHei';color:#747575;padding:0 0 0 100px;}
.step4 dl dd{padding:24px 0 0;color:#8e8e8e;font:16px/26px 'Microsoft YaHei';}
.step4 dl:first-child{transform:translate3D(-1000px, 0, 0);-webkit-transform:translate3D(-1000px, 0, 0);transition:all 0.7s ease-out;-webkit-transition:all 0.7s ease-out;}
.step4 dl:first-child dt{background:url('../../images/dsp/step4-1.png') no-repeat;}
.step4 dl:nth-child(2){margin-right:0;transform:translate3D(1000px, 0, 0);-webkit-transform:translate3D(1000px, 0, 0);transition:all 0.7s ease-out 0.7s;-webkit-transition:all 0.7s ease-out 0.7s;}
.step4 dl:nth-child(2) dt{background:url('../../images/dsp/step4-2.png') no-repeat;}
.step4 dl:nth-child(3){margin-top:110px;opacity:0;transition:all 0.7s ease-out 1.4s;-webkit-transition:all 0.7s ease-out 1.4s;}
.step4 dl:nth-child(3) dt{background:url('../../images/dsp/step4-3.png') no-repeat;}
.step4 dl:last-child{margin-right:0;margin-top:110px;opacity:0;transition:all 0.7s ease-out 2.1s;-webkit-transition:all 0.7s ease-out 2.1s;}
.step4 dl:last-child dt{background:url('../../images/dsp/step4-4.png') no-repeat;}
.step4 .active dl{transform:translate3D(0, 0, 0);opacity:1;}

.step5{background:white;}
.step5 .w1100{position:relative;text-align:center;padding-bottom:80px;}
.step5-img{width:80%;}
.circle{background:#7fcffe;width:16px;height:16px;border-radius:50%;position:absolute;left:750px;top:130px;-webkit-transform:scale(0.8);transform:scale(0.8);opacity:0.2;}
.step5 .active .circle{-webkit-animation:star 2.5s linear infinite;animation:star 2.5s linear infinite;}
@-webkit-keyframes star{
	0%{
		-webkit-transform:scale(0.8);
		opacity:0.6;
	}
	25%{
		-webkit-transform:scale(0.9);
		opacity:0.8;
	}
	50%{
		-webkit-transform:scale(1);
		opacity:1;
	}
	75%{
		-webkit-transform:scale(0.9);
		opacity:0.8;
	}
	100%{
		-webkit-transform:scale(0.8);
		opacity:0.6;
	}
}
@keyframes star{
	0%{
		transform:scale(0.8);
		opacity:0.6;
	}
	25%{
		transform:scale(0.9);
		opacity:0.8;
	}
	50%{
		transform:scale(1);
		opacity:1;
	}
	75%{
		transform:scale(0.9);
		opacity:0.8;
	}
	100%{
		transform:scale(0.8);
		opacity:0.6;
	}
}

.step6{background:#f6f7fa;}
.step6 .w1100{text-align:center;padding-bottom:80px;}
.step6-img{width:70%;}