.page .btn{
	position: absolute;
	display: block;
	width: 26%;
}

.page .down{
	position: absolute;
	bottom: 3%;
	left: 45.3%;
	width: 8.59%;
	opacity: 0;
}


/*****page1*****/
.pageWraper .page1{
	background: url("../img/page1/bg.jpg") center 0 no-repeat;
	background-size:cover;
}
.page1 img{
	position: absolute;
}
.page1 .zi1{
	top:11.2% ;
	left: 12.5%;
}
.page1 .zi2{
	top:13% ;
	right: 11.7%;
}
.page1 .zi3{
	top:27% ;
	right: 11.7%;
}
.page1 .zi4{
	top:30% ;
	right: 11.7%;
}
.page1 .zi5{
	bottom:3% ;
	right: 8%;
}
.page1 .shoes{
	bottom:10% ;
	left: 8%;
	z-index: 10;
}
.page1 .shoes_b{
	bottom:13% ;
	left: 38%;
	z-index: 5;
}
.page1 .btn{
	top:37% ;
	left: 12.5%;
}


/*****page2*****/
.pageWraper .page2{
	background: url("../img/page2/bg.jpg") center 0 no-repeat;
	background-size:cover;
}
.page2 p{
	position: absolute;
	width: 90%;
	color: #fff;
	font-size: 0.5em;
	bottom: 8%;
	left: 5%;
	line-height: 160%;
	font-family: "微软雅黑";
	text-align:justify;
}
.page2 .btn{
	right: 5%;
	bottom: 30%;
}

/*****page3*****/
.pageWraper .page3{
	background: url("../img/page3/bg.jpg") center 0 no-repeat;
	background-size:cover;
}
.page3 img{
	position: absolute;
}
.page3 .xian1{
	top:42%;
	left: 5%;
}
.page3 .xian2{
	top:59%;
	left: 8%;
}
.page3 .shoes1{
	top:33%;
	right: 5%;
}
.page3 .shoes2{
	top:48%;
	left: 2%;
}
.page3 .shoes3{
	bottom:4%;
	right: 5%;
}
.page3 .zi1{
	top:12%;
	right: 4%;
}
.page3 .zi2{
	top:28%;
	left: 5%;
}
.page3 .zi3{
	bottom:27.6%;
	right: 3%;
}
.page3 .btn{
	bottom: 25%;
	left: 6%;
}
/*光晕*/
#gylist li{
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	cursor: pointer;
}
#gylist li.gy1{
	top: 57.5%;
	left: 36%;
}
#gylist li.gy2{
	top: 89.5%;
	left: 77%;
}
#gylist li span,#gylist li em,#gylist li bdo{
	display: block;
	position: absolute;
	border-radius: 50%;
}
#gylist li span{
	width: 20px;
	height: 20px;
	top: 9px;
	left: 9px;
	background-color: #fff;
}
#gylist li em{
	width: 25px;
	height: 25px;
	top: 2px;
	left: 2px;
	border: #fff solid 5px;
}
#gylist li bdo{
	width: 30px;
	height: 30px;
	top: -3px;
	left: -4px;
	border: #fff solid 0;
	opacity: 0;
}
/*放大镜*/
.layer_glass{
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 500;
	background: rgba(0,0,0,0.6);
	display: none;
}
.layer_glass article{
	position: absolute;
	top: 25%;
	left: 0;
	width: 100%;
}
.layer_glass article img:nth-of-type(1){
	display: block;
	position: absolute;
	top: 0;
	right: 7%;
	z-index: 2;
}
.layer_glass article img:nth-of-type(2){
	margin: 0 auto;
}
.layer_glass article img.glass1{
	background: url("../img/screen4_pic05.png") 0 0 no-repeat;
	background-size: 100%;
}
.layer_glass article img.glass2{
	background: url("../img/screen4_pic06.png") 0 0 no-repeat;
	background-size: 100%;
}

/*****page4*****/
.pageWraper .page4{
	background: url("../img/page4/bg.jpg") center 0 no-repeat;
	background-size:cover;
}
.page4 img{
	position: absolute;
}
.page4 .textcon{
	position: absolute;
	width: 50%;
	left: 5%;
	top: 35%;
	height: 40%;
}
.page4 .textcon p{
	color: #fff;
	font-size: 23px;
	position: absolute;
}
.page4 .textcon .gif1{
	top: 10%;
	left: 0;
}
.page4 .textcon .gif2{
	top: 50%;
	left: 0;
}
.page4 .textcon .zi11{
	top: 5%;
	left: 8%;
}
.page4 .textcon .zi22{
	top: 46%;
	right: 15%;
}
.page4 .textcon .p1{
	top:10%;
	left:30% ;
}
.page4 .textcon .p2{
	top:50%;
	left:30% ;
}
.page4 .iphone{
	bottom: 0;
	right: -5%;
}
/*.page4 .gif1{
	top: 40%;
	left: 50%;
}
.page4 .gif2{
	top: 56%;
	left: 50%;
}*/
.page4 .xian{
	width: 40%;
	position: absolute;
	top: 51%;
	left: 5%;
	height: 2px;
	background: #fff;
	border-radius: 2px;
	opacity: 0.8;
}
.page4 .zi1{
	position: absolute;
	width: 45%;
	left: 5%;
	top: 15%;
	color: #fff;
	font-size: 0.5em;
	text-align: justify;
	line-height: 150%;
	font-family: "微软雅黑";
}
.page4 .btn{
	bottom: 25%;
	left: 5%;
}
.page4 .wenzi1{
	top: 41%;
	right: 5%;
}
.page4 .wenzi2{
	top: 56%;
	right: 5%;
}





/*****page5*****/
.pageWraper .page5{
	background: url("../img/page5/bg.jpg") center 0 no-repeat;
	background-size:cover;
}
.page5 img{
	position: absolute;
}
.page5 .zi{
	position: absolute;
	color: #000;
	font-size: 0.5em;
	top: 17%;
	right:3%;
	font-family: "微软雅黑";
}
.page5 .btn{
	top: 27%;
	right: 6%;
}
.page5 .shoes{
	bottom:7%;
	left: 0;
}
/*光晕2*/
#gylist2 li{
	display: block;
	width: 30px;
	height: 30px;
	position: absolute;
	cursor: pointer;
}
#gylist2 li.gy5_1{
	top: 70%;
	right: 10%;
}
#gylist2 li.gy5_2{
	top: 65%;
	left: 7%;
}
#gylist2 li.gy5_3{
	top: 76%;
	right: 7%;
}
#gylist2 li.gy5_4{
	top: 65%;
	left: 77%;
}
#gylist2 li span,#gylist2 li em,#gylist2 li bdo{
	display: block;
	position: absolute;
	border-radius: 50%;
}
#gylist2 li span{
	width: 20px;
	height: 20px;
	top: 9px;
	left: 9px;
	background-color: #fff;
}
#gylist2 li em{
	width: 25px;
	height: 25px;
	top: 2px;
	left: 2px;
	border: #fff solid 5px;
}
#gylist2 li bdo{
	width: 30px;
	height: 30px;
	top: -3px;
	left: -4px;
	border: #fff solid 0;
	opacity: 0;
}
.page5 .box_big{
	width: 48%;
	position: absolute;
	left: 3%;
	top: 18%;
}
.page5 .box{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.page5 .box img{
	position: relative;
}
.page5 .box p{
	color: #000;
	text-align: center;
	font-size: 0.55em;
	margin-top: 4%;
}

/*****page6*****/
.pageWraper .page6{
	background: url("../img/page6/bg.jpg") center 0 no-repeat;
	background-size:cover;
}
.page6 img{
	position: absolute;
}
.page6 .shoes1{
	top:-10%;
	left: 0;
	z-index: 10;
}
.page6 .shoes2{
	top:-10%;
	right: 0;
	z-index: 20;
}
.page6 p{
	color: #fff;
	font-size: 0.5em;
	position: absolute;
	bottom: 20%;
}
.page6 p.zi1{
	left: 3%;
	text-align: left;
}
.page6 p.zi2{
	right:1%;
	text-align: right;
}
.page6 .btn1{
	bottom: 15%;
	left: 3%;
}
.page6 .btn2{
	bottom: 15%;
	right: 3%;
}


/*****page7*****/
.pageWraper .page7{
	background: url("../img/page7/bg.jpg") center 0 no-repeat;
	background-size:cover;
}
.page7 img{
	position: absolute;
}
.page7 .showshoes2{
	position: relative;
}
.page7 .showshoes2 .logo7{
	position: absolute;
	display: block;
	top:37%;
	left: 0;
}
.page7 .showshoes2 .zi1{
	top: 15%;
	right: 10%;
}
.page7 .showshoes2 .btn{
	left: 35%;
	bottom: 15%;
}
.page7 .shoes2 .pic{
	top:37%;
	left: 0;
	z-index: 1;
}

#change2 {
	position: absolute;
	top: 70%;
	left: 18%;
	width: 280px;
	z-index: 500;
}
#change2 li{
	display: block;
	width: 44px;
	height: 21px;
	float: left;
	margin: 0 19px 18px 0;
	background: url("../img/page7/screen7_btnpic2.png") 0 0 no-repeat;
	overflow: hidden;
	cursor: pointer;
}
#change2 .f2{
	background-position: -63px 0;
}
#change2 .f3{
	background-position: -126px 0;
}
#change2 .f4{
	background-position: -187px 0;
}
#change2 .f5{
	background-position: 0 -39px;
}
#change2 .f6{
	background-position: -63px -39px;
}
#change2 .f7{
	background-position: -126px -39px;
}
#change2 .f8{
	background-position: -189px -39px;
}
.page7 .shoes1 .pic{
	top:37%;
	left: 0;
	z-index: 1;
}
#change1 {
	position: absolute;
	top: 70%;
	left: 18%;
	width: 280px;
	z-index: 500;
}
#change1 li{
	display: block;
	width: 44px;
	height: 21px;
	float: left;
	margin: 0 19px 18px 0;
	background: url("../img/page7/screen7_btnpic1.png") 0 0 no-repeat;
	overflow: hidden;
	cursor: pointer;
}
#change1 .f2{
	background-position: -63px 0;
}
#change1 .f3{
	background-position: -126px 0;
}
#change1 .f4{
	background-position: -189px 0;
}
#change1 .f5{
	background-position: 0 -39px;
}
#change1 .f6{
	background-position: -63px -39px;
}
#change1 .f7{
	background-position: -126px -39px;
}
#change1 .f8{
	background-position: -189px -39px;
}

/*******page8************/

.page8{
	background-color: #e6e6e6;
}
.page8 img{
	position: absolute;
}
.page8 .zi{
	top: 10%;
	right: 5%;
}
.page8 .provinces{
	position: absolute;
	top: 22%;
	left: 5%;
	width: 90%;
}
.page8 .city{
	position: absolute;
	top: 30%;
	left: 5%;
	width: 90%;
}
.page8 span{
	color: #000;
	font-size: 0.7em;
	padding-left: 2%;
}
.page8 select{
	margin: 0;
	padding: 0;
	background-color: #e6e6e6;
	color: #000;
	width: 75%;
	height: 30px;
	vertical-align: middle;
}
.page8 option{
	color: #000;
	line-height: 150%;
}
.page8 .btn{
	width: 40%;
	top: 40%;
	left: 30%;
}

.page8 li.swiper-slide div{
	width: 75%;
	margin-left: 10%;
}
.page8 li.swiper-slide  div p{
	width: 100%;
	margin: 10% 0;
	text-align: left;
	font-size: 14px;
}









/*光晕效果*/
@-webkit-keyframes gyFadeOut{
	0% {
		opacity: 0;
		-webkit-transform: scale(1);
		border-width: 0;
		top: 1px;
		left: 2px;
	}
	10% {
		opacity: 1;
		-webkit-transform: scale(1);
		border-width: 0;
		top: 1px;
		left: 2px;
	}
	90% {
		opacity: 0;
		-webkit-transform: scale(1.05);
		border-width: 10px;
	}
	91%, 100% {
		opacity: 0;
		-webkit-transform: scale(1);
		border-width: 0;
	}
}
.active>.gyFadeOut{
	-webkit-animation-name: gyFadeOut;
	-webkit-animation-timing-function: ease;
}

@-webkit-keyframes gycir{
	0% {
		opacity: 0;
		-webkit-transform: scale(0.9);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
	}
}
.active>.gycir{
	-webkit-animation-name: gycir;
	-webkit-animation-timing-function: ease;
	-webkit-animation-direction: alternate;
}

/*光晕*/
#gylist li{
	 -webkit-transform: scale(0.6) translate3d(-40%, -40%, 0);
	 transform: scale(0.6) translate3d(-40%, -40%, 0);
 }
#gylist2 li{
	-webkit-transform: scale(0.6) translate3d(-40%, -40%, 0);
	transform: scale(0.6) translate3d(-40%, -40%, 0);
}
/*Animation 动画*/
@-webkit-keyframes shoesRotate {
	0% {
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
	}
	100% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
}
@keyframes shoesRotate {
	0% {
		-webkit-transform: rotate(20deg);
		transform: rotate(20deg);
	}
	100% {
		-webkit-transform: rotate(0);
		transform: rotate(0);
	}
}
.active>.shoesRotate{
	-webkit-animation-name: shoesRotate;
	animation-name: shoesRotate;
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-transform-origin: 115px 438px;
	transform-origin: 115px 438px;
}

@-webkit-keyframes shoesDown {
	0% {
		opacity: 0;
		top: -20%;
	}
	100% {
		opacity: 1;
		top: -10%;
	}
}
@keyframes shoesDown {
	0% {
		opacity: 0;
		top: -20%;
	}
	100% {
		opacity: 1;
		top: -10%;
	}
}
.active>.shoesDown{
	-webkit-animation-name: shoesDown;
	animation-name: shoesDown;
}
@-webkit-keyframes shoes_blin{
	0%{
		opacity: 0;
		-webkit-transform: translate3d(-60%, 28%, 0);
		transform: translate3d(-60%, 28%, 0);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
		transform: none;}
}
@keyframes shoes_blin{
	0%{
		opacity: 0;
		-webkit-transform: translate3d(-60%, 28%, 0);
		transform: translate3d(-60%,28%, 0);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
		transform: none;}
}
.active>.shoes_blin{
	-webkit-animation-name: shoes_blin;
	animation-name: shoes_blin;}

@-webkit-keyframes zi1_r{
	0%{
		opacity: 0;
		-webkit-transform: translate3d(60%, 0, 45px);
		transform: translate3d(60%, 0, 45px);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
		transform: none;}
}
@keyframes zi1_r{
	0%{
		opacity: 0;
		-webkit-transform: translate3d(60%, 0, 45px);
		transform: translate3d(60%, 0, 45px);
	}
	100%{
		opacity: 1;
		-webkit-transform: none;
		transform: none;}
}
.active>.zi1_r{
	-webkit-animation-name: zi1_r;
	animation-name: zi1_r;}

@-webkit-keyframes xians1{
	0%{
		opacity: 0;
		top:35%;
		left: 25%;

	}
	100%{
		opacity: 1;
		top:42%;
		left: 5%;
	}
}
@keyframes xians1{
	0%{
		opacity: 0;
		top:35%;
		left: 25%;

	}
	100%{
		opacity: 1;
		top:42%;
		left: 5%;
	}
}
.active>.xians1{
	-webkit-animation-name: xians1;
	animation-name: xians1;}
@-webkit-keyframes xians2{
	0%{
		opacity: 0;
		top:50%;
		left: 0;

	}
	100%{
		opacity: 1;
		top:59%;
		left: 8%;
	}
}
@keyframes xians2{
	0%{
		opacity: 0;
		top:50%;
		left: 0;

	}
	100%{
		opacity: 1;
		top:59%;
		left: 8%;
	}
}
.active>.xians2{
	-webkit-animation-name: xians2;
	animation-name: xians2;}
@-webkit-keyframes shoes3_2{
	0%{
		opacity: 0;
		top:40%;
		left: 12%;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	100%{
		opacity: 1;
		top:48%;
		left: 2%;
		-webkit-transform: scale(1);
		transform: scale(1);}
}
@keyframes shoes3_2{
	0%{
		opacity: 0;
		top:40%;
		left: 12%;
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
	100%{
		opacity: 1;
		top:48%;
		left: 2%;
		-webkit-transform: scale(1);
		transform: scale(1);}
}
.active>.shoes3_2{
	-webkit-animation-name: shoes3_2;
	animation-name: shoes3_2;}

@-webkit-keyframes shoes3_3{
	0%{
		opacity: 0;
		bottom:15%;
		right: 25%;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	100%{
		opacity: 1;
		bottom:4%;
		right: 5%;
		-webkit-transform: scale(1);
		transform: scale(1);}
}
@keyframes shoes3_3{
	0%{
		opacity: 0;
		bottom:15%;
		right: 25%;
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	100%{
		opacity: 1;
		bottom:4%;
		right: 5%;
		-webkit-transform: scale(1);
		transform: scale(1);}
}
.active>.shoes3_3{
	-webkit-animation-name: shoes3_3;
	animation-name: shoes3_3;}