html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,p{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}

/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
html,body{position:relative;width: 100%;/*height: 100%;*/font-size:14px;line-height:normal;font-family:"微软雅黑","宋体",Verdana,Arial,Helvetica,sans-serif;margin:0 auto; background: #333;}
ol,ul{list-style:none;}
a{text-decoration:none; color:#ffffff;}
a:hover{ color:#505050;}
img{border:0px;vertical-align:middle;display: block;}
em{ font-style:normal;}
input,button,select,textarea{ margin:0; padding:0; outline:none;}

.wrap {
	width: 100%;
	height: 100%;
	position: relative;
}
/* 第一屏 */
.screen1 {
	width: 100%;
	height: 700px;
	background: url(../images/screen1/bg.jpg) center center no-repeat #666;
	background-size: cover;
	position: relative;
	overflow: hidden;
	padding-top: 80px;
}
.content1,.content2,.content3,.content4 {
	width: 1200px;
	height: 700px;
	margin: 0 auto;
	position: relative;
}
.content4 {
	background: url(../images/screen4/row.png) center center no-repeat;
	background-size: contain;
}
.screen1 .man {
	position: absolute;
	bottom: 120px;
	left: 0px;
}
.active > .content1 .man {
	-webkit-animation: src1_man 0.7s linear 1.3s both infinite alternate;
    animation: src1_man 0.7s linear 1.3s both infinite alternate;
}
.screen1 .btn-list {
	width: 300px;
	height: 300px;
	padding-top: 40px;
}
.screen1 .btn-list li {
	width: 176px;
	height: 39px;
	overflow: hidden;
	margin-top: 10px;
	background: url(../images/screen1/btn1.png) left top no-repeat;
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	-ms-transition: all 500ms;
	-o-transition: all 500ms;
	transition: all 500ms;
}
.active > .content1 .btn-list li:nth-child(1) {
	-webkit-animation: src1_List 1s linear 1s both;
    animation: src1_List 1s linear 1s both;
}
.active > .content1 .btn-list li:nth-child(2) {
	-webkit-animation: src1_List 1s linear 1.2s both;
    animation: src1_List 1s linear 1.2s both;
}
.active > .content1 .btn-list li:nth-child(3) {
	-webkit-animation: src1_List 1s linear 1.4s both;
    animation: src1_List 1s linear 1.4s both;
}
.active > .content1 .btn-list li:nth-child(4) {
	-webkit-animation: src1_List 1s linear 1.6s both;
    animation: src1_List 1s linear 1.6s both;
}

.screen1 .btn-list li a {
	display: block;
	width: 176px;
	height: 39px;
	line-height: 40px;
	position: absolute;
	color: #333;
	padding-left: 50px;
	font-size: 14px;
	background: url(../images/screen1/icon.png) 10px 0px no-repeat;
	-webkit-transition: all 500ms;
	-moz-transition: all 500ms;
	-ms-transition: all 500ms;
	-o-transition: all 500ms;
	transition: all 500ms;
}
.screen1 .btn-list li:hover a {
	margin-left: 20px;
}
.screen1 .btn-list li:hover {
	width: 226px;
	background: url(../images/screen1/btn2.png) left top no-repeat;
}
.screen1 .shoe {
	position: absolute;
	top: 90px;
    left: 470px;
    z-index: 5;
}
.active > .content1 .shoe {
	-webkit-animation: src_shoe 0.8s ease both;
    animation: src_shoe 0.8s ease both;
}
.screen1 .text1 {
	position: absolute;
	left: 255px;
    top: 278px;
    z-index: 3;
}
.active > .content1 .text1 {
	-webkit-animation: src1_text1 1s ease 0.4s both;
    animation: src1_text1 1s ease 0.4s both;
}
.screen1 .text2 {
	position: absolute;
	left: 350px;
    top: 160px;
    z-index: 2;
}
.active > .content1 .text2 {
	-webkit-animation: src1_text2 0.8s ease 0.4s both;
    animation: src1_text2 0.8s ease 0.4s both;
}
.screen1 .text3 {
	position: absolute;
	left: 760px;
    top: 300px;
    z-index: 2;
}
.active > .content1 .text3 {
	-webkit-animation: src1_text3 0.8s ease  both;
    animation: src1_text3 0.8s ease  both;
}
.screen1 .storm {
	position: absolute;
	left: 720px;
    top: 60px;
}
.active > .content1 .storm {
	 -webkit-animation: src1_storm 1.3s  linear infinite both;
    animation: src1_storm 1.3s linear infinite both;
}
.screen1 .ball {
	position: absolute;
	left: 780px;
    top: 160px;
    z-index: 3;
}
.screen1 .money {
	position: absolute;
	left: 316px;
    bottom: 55px;
    z-index: 4;
}
.screen1 .wow5 {
	position: absolute;
	left: 316px;
	bottom: 110px;
	z-index: 4;
}
.active > .content1 .wow5 {
	-webkit-animation: src1_money 1.8s ease 0.7s both;
	animation: src1_money 1.8s ease 0.7s both;
}
.active > .content1 .money {
	-webkit-animation: src1_money 1.8s ease 0.9s both;
    animation: src1_money 1.8s ease 0.9s both;
}
.screen1 .btn {
	position: absolute;
	left: 548px;
	bottom: 58px;
    z-index: 4;
    width: 160px;
    height: 57px;
    background: url(../images/screen1/btn.png) center center no-repeat;
    background-size: cover;
    display: block;
}
.active > .content1 .btn {
	-webkit-animation: src1_money 2s ease 1.2s both;
    animation: src1_money 2s ease 1.2s both;
}

/* 第二屏 */
.screen2 {
	width: 100%;
	height: 700px;
	padding-top: 80px;
	background: url(../images/screen2/bg.jpg) center center no-repeat #666;
	background-size: cover;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.screen2 .shoe1 {
	position: absolute;
	right: 170px;
    bottom: 30px;
    z-index: 2;
}
.screen2 .shoe2 {
	position: absolute;
	left: 100px;
    bottom: 70px;
    z-index: 1;
}
.screen2 .title {
	width: 670px;
	height: 190px;
	position: absolute;
	right: 90px;
    top: 0px;
	text-align: right;
}
.active > .content2 .title img {
	-webkit-animation: src2_title 1.3s ease 0.8s both;
    animation: src2_title 1s ease 0.8s both;
}
.screen2 .title img {
	display: inline-block;
	margin-right: -20px;
	opacity: 0;
}
.screen2 .title p {
	font-style: italic;
	font-size: 14px;
	color: #fff; 
	line-height: 25px; 
	letter-spacing: 1px;
	opacity: 0;
}
.active > .content2 .title p {
	-webkit-animation: src2_p 1.3s ease 0.9s both;
    animation: src2_p 1s ease 0.9s both;
}
.screen2 .point-list {
	position: absolute;
	z-index: 13;
}
.screen2 .point-list li {
	width: 840px;
	height: 195px;
	position: absolute;
	display: none;
}
.screen2 .point-list li.active {
	display: block;
}
.screen2 .point-list li span {
	float: left;
}
.screen2 .point-list li span strong {
	font-size: 22px;
	color: #F6F631;
	line-height: 32px;
} 
.screen2 .point-list li span p {
	font-size: 16px;
	color: #fff; 
	line-height: 22px; 
	letter-spacing: 1px;
	padding-top: 6px;
}
.screen2 .point-list li img {
	float: left;
}
.screen2 .point-list li:nth-child(1) {
	left: 65px;
    top: 305px;
}
.screen2 .point-list li:nth-child(1) span {
	width: 460px;
}
.screen2 .point-list li:nth-child(2) {
	left: -65px;
    top: 250px;
}
.screen2 .point-list li:nth-child(2) span {
	width: 280px;
}
.screen2 .point-list li:nth-child(3) {
	left: 80px;
    top: 240px;
}
.screen2 .point-list li:nth-child(3) span {
	width: 280px;
}
.screen2 .point-list li:nth-child(4) {
	left: 216px;
    top: 274px;
}
.screen2 .point-list li:nth-child(4) span {
	width: 280px;
}
.screen2 .point-list li:nth-child(5) {
	left: 320px;
    top: 185px;
}
.screen2 .point-list li:nth-child(5) span {
	width: 280px;
}
.screen2 .point-list li:nth-child(6) {
	left: 47px;
    top: 188px;
}
.screen2 .point-list li:nth-child(6) span {
	width: 460px;
}
.screen2 .point-list li:nth-child(7) {
	left: 330px;
    top: 200px;
}
.screen2 .point-list li:nth-child(7) span {
	width: 275px;
}
.screen2 .point-list li:nth-child(8) {
	left: 480px;
    top: 266px;
}
.screen2 .point-list li:nth-child(8) span {
	width: 340px;
}
.screen2 .disc {
	position: absolute;
	width: 100%;
	height: 400px;
	z-index: 10;
	top: 365px;
}
.screen2 .disc li {
	width: 36px;
	height: 36px;
	position: relative;
	z-index: 12;
	background: rgba(220,220,220,0.9);
	-webkit-border-radius: 18px;
	   -moz-border-radius: 18px;
		-mz-border-radius: 18px;
		 -o-border-radius: 18px;
		 	border-radius: 18px;
}
.screen2 .disc li span {
	display: block;
	width: 24px;
	height: 24px;
	position: absolute;
	z-index: 11;
	left: 0px;
	top: 0px;
	bottom: 0px;
	cursor: pointer;
	right: 0px;
	margin: auto;
	background: #FFFF33;
	-webkit-border-radius: 12px;
	   -moz-border-radius: 12px;
		-mz-border-radius: 12px;
		 -o-border-radius: 12px;
		 	border-radius: 12px;
}
.active > .content2 .disc li span {
	-webkit-animation: src2_aspan 1.3s linear infinite alternate;
    animation: src2_aspan 1s linear infinite alternate;
}
.screen2 .disc li em {
	width: 32px;
    height: 32px;
    top: -6px;
    left: -6px;
	border: #fff solid 14px;
	display: block;
	position: absolute;
	border-radius: 50%;
}
.active > .content2 .disc li em {
	-webkit-animation: gyFadeOut 1s ease infinite;
    animation: gyFadeOut 1s ease infinite;
}
.screen2 .disc li:nth-child(1){
	left: 230px;
    top: 175px;
}
.screen2 .disc li:nth-child(2){
	left: 380px;
    top: 85px;
}
.screen2 .disc li:nth-child(3){
	left: 525px;
    top: 40px;
}
.screen2 .disc li:nth-child(4){
	left: 660px;
    top: 35px;
}
.screen2 .disc li:nth-child(5){
	left: 793px;
	top: -79px;
}
.screen2 .disc li:nth-child(6){
	left: 800px;
    top: -220px;
}
.screen2 .disc li:nth-child(7){
	left: 920px;
    top: -257px;
}
.screen2 .disc li:nth-child(8){
	left: 980px;
    top: -125px;
}

/* 第三屏 */
.screen3 {
	width: 100%;
	height: 700px;
	padding-top: 80px;
	background: url(../images/screen3/bg.jpg) center center no-repeat #666;
	background-size: cover;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.screen3 .shoe {
	display: block;
	width: 756px;
	position: absolute;
	left: 50%;
	margin-left: -378px;
	bottom: 55px;
	z-index: 5;
}
.active > .content3 .shoe {
	-webkit-animation: scr3_shoe 1s ease 1s both;
    animation: scr3_shoe 1s ease 1s both;
}
.screen3 .storm {
	position: absolute;
	top: 0px;
    right: 40px;
	opacity: 0;
}
.active > .content3 .storm {
	-webkit-animation: src1_storm 2.8s linear;
    animation: src1_storm 2.8s linear;
}
.screen3 .ball {
	position: absolute;
	top: 140px;
    right: 120px;
	z-index: 3;
	opacity: 0;
}
.active > .content3 .ball {
	-webkit-animation: src1_ball 2.8s linear;
	animation: src1_ball 2.8s linear;
}
.screen3 .title {
	width: 600px;
	height: 300px;
	position: absolute;
	left: 50px;
	top: 0px;
}
.screen3 .title p {
	font-style: italic;
	font-size: 14px;
	color: #fff; 
	line-height: 20px; 
	letter-spacing: 1px;
	padding-left: 12px;
	opacity: 0;
}
.active > .content3 .title p {
	-webkit-animation: scr3_titlep 1s ease 0.7s both;
    animation: scr3_titlep 1s ease 0.7s both;
}
.content3 .title img {
	opacity: 0;
}
.active > .content3 .title img {
	-webkit-animation: scr3_title 1s ease 0.5s both;
    animation: scr3_title 1s ease 0.5s both;
}
.screen3 .img.active {
	opacity: 0;
}
.screen3 .step {
	position: absolute;
	left: 50%;
	margin-left: -295px;
	bottom: 40px;
}
.content3 .step1 {
	opacity: 0;
}
.active > .content3 .step1 {
	z-index: 19;
	-webkit-animation: scr3_step1 1.3s ease 1.4s both;
    animation: scr3_step1 1.3s ease 1.4s both;
}
.content3 .step2 {
	opacity: 0;
}
.active > .content3 .step2 {
	z-index: 18;
	-webkit-animation: scr3_step2 1.3s ease 1.4s both;
    animation: scr3_step2 1.3s ease 1.4s both;
}
.content3 .step3 {
	opacity: 0;
}
.active > .content3 .step3 {
	z-index: 17;
	-webkit-animation: scr3_step3 1.3s ease 1.4s both;
    animation: scr3_step3 1.3s ease 1.4s both;
}
.content3 .step4 {
	opacity: 0;
}
.active > .content3 .step4 {
	z-index: 16;
	-webkit-animation: scr3_step4 1.3s ease 1.4s both;
    animation: scr3_step4 1.3s ease 1.4s both;
}
.content3 .step5 {
	opacity: 0;
}
.active > .content3 .step5 {
	z-index: 15;
	-webkit-animation: scr3_step5 1.3s ease 1.4s both;
    animation: scr3_step5 1.3s ease 1.4s both;
}
.screen3 .line1 {
	position: absolute;
	left: 782px;
    top: 110px;
    z-index: 20;
}
.content3 .line1 {
	opacity: 0;
}
.active > .content3 .line1 {
	-webkit-animation: scr3_line 1s ease 2.7s both;
    animation: scr3_line 1s ease 2.7s both;
}
.screen3 .line2 {
	position: absolute;
	left: 790px;
    top: 180px;
    z-index: 20;
}
.content3 .line2 {
	opacity: 0;
}
.active > .content3 .line2 {
	-webkit-animation: scr3_line 1s ease 2.6s both;
    animation: scr3_line 1s ease 2.6s both;
}
.screen3 .line3 {
	position: absolute;
	left: 790px;
    top: 295px;
    z-index: 20;
}
.content3 .line3 {
	opacity: 0;
}
.active > .content3 .line3 {
	-webkit-animation: scr3_line 1s ease 2.5s both;
    animation: scr3_line 1s ease 2.5s both;
}
.screen3 .line4 {
	position: absolute;
	left: 590px;
    top: 355px;
    z-index: 20;
}
.content3 .line4 {
	opacity: 0;
}
.active > .content3 .line4 {
	-webkit-animation: scr3_line 1s ease 2.4s both;
    animation: scr3_line 1s ease 2.4s both;
}
.screen3 .line5 {
	position: absolute;
	left: 70px;
    top: 420px;
    z-index: 20;
}
.content3 .line5 {
	opacity: 0;
}
.active > .content3 .line5 {
	-webkit-animation: scr3_line 1s ease 2.3s both;
    animation: scr3_line 1s ease 2.3s both;
}
.screen3 .line6 {
	position: absolute;
	left: 870px;
    top: 465px;
    z-index: 20;
}
.content3 .line6 {
	opacity: 0;
}
.active > .content3 .line6 {
	-webkit-animation: scr3_line 1s ease 2.2s both;
    animation: scr3_line 1s ease 2.2s both;
}
.screen3 .line7 {
	position: absolute;
	left: 35px;
    top: 510px;
    z-index: 20;
}
.content3 .line7 {
	opacity: 0;
}
.active > .content3 .line7 {
	-webkit-animation: scr3_line 1s ease 2.1s both;
    animation: scr3_line 1s ease 2.1s both;
}
.screen3 .line8 {
	position: absolute;
	left: 195px;
    top: 585px;
    z-index: 20;
}
.content3 .line8 {
	opacity: 0;
}
.active > .content3 .line8 {
	-webkit-animation: scr3_line 1s ease 2s both;
    animation: scr3_line 1s ease 2s both;
}

/* 第四屏 */
.screen4 {
	width: 100%;
	height: 700px;
	padding-top: 80px;
	background: url(../images/screen4/bg.jpg) center center no-repeat #666;
	background-size: cover;
	position: relative;
	overflow: hidden;
	margin: 0 auto;
}
.screen4 .title {
	position: absolute;
	right: 80px;
    top: 0;
}
.content4 .title {
	opacity: 0;
}
.active > .content4 .title {
	-webkit-animation: src2_title 1.3s ease both;
    animation: src2_title 1s ease both;
}
.screen4 .money {
	position: absolute;
	left: 510px;
    bottom: 50px;
}
.content4 .money {
	opacity: 0;
}
.active > .content4 .money {
	-webkit-animation: scr4_money 1.3s ease 1.1s both;
    animation: scr4_money 1.3s ease 1.1s both;
}
.screen4 .text {
	position: absolute;
	left: 350px;
    bottom: 40px;
}
.content4 .text {
	opacity: 0;
}
.active > .content4 .text {
	-webkit-animation: scr4_text 1.3s ease 1s both;
    animation: scr4_text 1s ease 1s both;
}
.screen4 .btn {
	position: absolute;
	left: 640px;
    bottom: 50px;
}
.content4 .btn {
	opacity: 0;
}
.active > .content4 .btn {
	-webkit-animation: scr4_btn 1.3s ease 1.2s both;
    animation: scr4_btn 1s ease 1.2s both;
}
.scr_shoe3 {
	position: absolute;
	left: 380px;
    bottom: 280px;
    z-index: 2;
    opacity: 0.6;
    transform: scale(0.5);
}
.scr_shoe4 {
	position: absolute;
	left: 790px;
	bottom: 200px;
	z-index: 3;
	opacity: 0.8;
	transform: scale(0.75);
}
.scr_shoe1  {
	position: absolute;
	left: 65px;
	right: 0px;
	margin: auto;
	bottom: 160px;
	z-index: 5;
}
.scr_shoe2 {
	position: absolute;
	left: 160px;
	bottom: 200px;
	z-index: 4;
	opacity: 0.8;
	transform: scale(0.75);
}


/* 右侧导航栏 */
#pointList {
	width: 60px;
	position: fixed;
	top: 350px;
	right: 0;
	z-index: 400;
 }
#pointList li.current {
	background: #EC4046;
	-webkit-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-o-transform: scale(1.5);
	transform: scale(1.5);
}
#pointList li {
	width: 14px;
	height: 14px;
	display: block;
	background: #FFFFFF;
	cursor: pointer;
	margin-top: 15px;
	-webkit-border-radius: 7px;
	 -moz-border-radius: 7px;
	  -ms-border-radius: 7px;
	   -o-border-radius: 7px;
			border-radius: 7px;
	-webkit-transition: all 1s;
	   -moz-transition: all 1s;
		-ms-transition: all 1s;
		 -o-transition: all 1s;
			transition: all 1s;
}


/*添加的样式*/
.screen4 .prev, .screen4 .next {
	width: 450px;
	height: 500px;
	position: absolute;
	top: 50px;
	background-color: #fff;
	opacity: 0;
	cursor: pointer;
	z-index: 10;
}
.screen4 .prev {
	left: 0;
}
.screen4 .next {
	right: 0;
}
.screen4 .shoes img {
	position: absolute;
	-webkit-transition: 700ms all ease;
	transition: 700ms all ease;
}
.screen4 .shoes img.sh1 {
	top: 125px;
	left: 465px;
	z-index: 5;
}
.screen4 .shoes img.sh2 {
	top: 100px;
	left: 735px;
	z-index: 4;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}
.screen4 .shoes img.sh3 {
	top: 50px;
	left: 940px;
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0.8;
}
.screen4 .shoes img.sh4 {
	top: 30px;
	left: 610px;
	-webkit-transform: scale(0.6);
	transform: scale(0.7);
	opacity: 0.7;
}
.screen4 .shoes img.sh5 {
	top: 30px;
	left: 330px;
	-webkit-transform: scale(0.6);
	transform: scale(0.7);
	opacity: 0.7;
}
.screen4 .shoes img.sh6 {
	top: 60px;
	left: -10px;
	-webkit-transform: scale(0.7);
	transform: scale(0.7);
	opacity: 0.8;
}
.screen4 .shoes img.sh7 {
	top: 100px;
	left: 200px;
	z-index: 4;
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}