.centre{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/*start*/
.start{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/startbackground.gif)no-repeat;
	background-size: 100% 100%;
}
.bride{
	width: 12%;
	height: 6%;
	position: absolute;
	top: 62%;
	left: 34%;
	background: url(../img/bride_03.png) no-repeat;
	background-size: 100% 100%;
}
.cloudbtn{
	position: absolute;
	top: 64%;
	left: 33%;
}
/*start结束*/
/*page1*/
.climbMountain{
	display: none;
	width: 100%;
	height: 100%;
	background: url(../img/page0_02.gif) top center no-repeat;
	background-size: 100% 100%;
}
.sun{
	width: 43%;
	height:23.27%;
	position: absolute;
	top: 2.7%;
	left: 3%;
	z-index: 2;
	-webkit-animation: sunChange 5s infinite;
}
.sun img{
	width: 100%;
	height: 100%;
}
@-webkit-keyframes sunChange{
	0%{-webkit-transform: rotateZ(0deg);}
	25%{-webkit-transform: rotateZ(45deg);}
	50%{-webkit-transform: rotateZ(0deg);}
	75%{-webkit-transform: rotateZ(-45deg);}
	100%{-webkit-transform: rotateZ(0deg);}
	
}
.clounds{
	height: 12.9%;
	position:absolute;
	left: 18%;
    top: 19.8%;
	z-index: 1;
	-webkit-animation: cloudsChange 5s infinite;
}
@-webkit-keyframes cloudsChange{
	0%{-webkit-transform: translateX(0.5rem);}
	25%{-webkit-transform: translateX(-0.5rem);}
	50%{-webkit-transform: translateX(0.5rem);}
	75%{-webkit-transform: translateX(-0.5rem);}
	100%{-webkit-transform: translateX(0.5rem);}
}
.clounds img{
	width: 100%;
	height: 100%;
}
.mark{
	width: 6%;
	height: 4%;
	position: absolute;
	z-index: 2;
	left: 51%;
	top: 39%;
	background-color: #ccd3d4;
	-webkit-transform: rotateZ(30deg);
}
.arrows{
	width: 30%;
	height: 20%;
	position: absolute;
	bottom: 27%;
    left: 20%;
}
.arrows img{
	width: 46%;
    height: 24%;
	-webkit-animation: arrowsChange .8s .5s infinite;
	/*position: absolute;
	top: -104%;
    left: 107%;*/
}
.arrows0 img{
	display: block !important;
	position: absolute;
	top: -104%;
    left: 37%;
}
@-webkit-keyframes arrowsChange{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.climbMountainBoy{
	width:15.2%;
	height: 10.6%;
	background-color: orange;
	position: absolute;
	bottom: 58%;
    left: 43%;
	background: url(../img/climmountainboy_03.png) no-repeat;
	background-size: 100% 100%;
}
.next{
	width: 14%;
	height: 8%;
	position: absolute;
	bottom: 0;
	right: 0;
}
.return{
	width: 14%;
	height: 8%;
	position: absolute;
	z-index: 5;
	bottom: 0;
	left: 0;
}
/*page1  end*/
/*page2*/
.goWater{
	display: none;
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	background: url(../img/bg.png) 0 0 no-repeat;
	background-size: cover;
}
.mark-2{
	width: 100%;
    height: 6%;
    position: absolute;
    z-index: 2;
    top: 67%;
    background-color: #74dff6;
	opacity: 0.6;
}
.crossRiverBoy{
	width: 20.2%;
    height: 18.6%;
    background-color: orange;
    position: absolute;
    z-index: 20;
    bottom: 22%;
    left: 68%;
    z-index: 999;
    background: url(../img/wood-2_03.png) no-repeat;
    background-size: cover;
}
.mountain{
	width: 100%;
}
.mountain img{
	width: 100%;
	height: 100%;
}
.cloud{
	width: 100%;
    height: 17%;
    position: absolute;
    top: 11%;
}
.cloud img{
	width: 100%;
	height: 100%;
}
.greenland{
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.greenland img{
	width: 100%;
	height: 100%;
}
.river{
	width: 100%;
	position: absolute;
	top: 53%;
	left: 0;
}
.river img{
	width: 120%;
	height: 120%;
	-webkit-animation: riverChange 1.5s .8s infinite;
}
@-webkit-keyframes riverChange{
	from{-webkit-transform: translateY(0.05rem);}
	to{-webkit-transform: translateY(-0.05rem);}
}
.leftGrass{
	width: 50%;
	height: 30%;
	position: absolute;
	z-index: 3;
	bottom: 0;
	left: 0;
}
.leftGrass img{
	width: 100%;
	height: 100%;
}
.rightGrass{
	width: 37%;
    height: 24%;
    position: absolute;
    z-index: 3;
    bottom: 13%;
    right: 0;
}
.rightGrass img{
	width: 100%;
	height: 100%;
}
.bridge{
	 width: 66%;
    height: 20%;
    position: absolute;
    z-index: 4;
    bottom: 11%;
    left: 14%;
}
.bridge img{
	width: 100%;
	height: 100%;
}
.arrows1 img{
	display: block !important;
	position: absolute;
	top: 34%;
    left: 225%;
    z-index: 99;
}
/*page2 end*/
/*page3*/
.crossWood{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	background: url(../img/page3background.gif) 0 0 no-repeat;
	background-size: cover;
}
.arrows2{
	width: 30%;
	height: 20%;
	position: absolute;
	bottom: 38%;
	right: 9%;
	-webkit-transform: rotateZ(-90deg);
}
.arrows2 img{
	width: 46%;
    height: 24%;
	display: block !important;
	position: relative;
    top: 44%;
    left: 29%;
    -webkit-animation: arrowsChange1 .8s .5s infinite;
}
@-webkit-keyframes arrowsChange1{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.crossWoodBoy{
	width:20%;
	height: 16%;
	position: absolute;
	bottom: 26%;
	left: 60%;
	background: url(../img/wood-1_03.png) no-repeat;
	background-size: 100% 100%;
}
/*page4*/
.lookBen{
	display: none;
	width: 100%;
	height: 100%;
	background: url(../img/page4.gif) top center no-repeat;
	background-size: 100% 100%;
	
}
.ben{
	width: 48.8%;
    height: 13.06%;
    position: absolute;
    bottom: 27%;
    left: -5%;
}
.house{
	width: 51%;
    height: 29%;
    position: absolute;
    z-index: 2;
    top: 38%;
    left: 41%;
}
.house img{
	width: 100%;
	height: 100%;
}
.arrows3 img{
	display: block !important;
	position: absolute;
    left: -28%;
    top: 20%;
}
.smallBoy{
	width: 30%;
    height: 24%;
    position: absolute;
    bottom: 21%;
    left: 20%;
    background: url(../img/run-1_03.png) 0 0 no-repeat;
    background-size: 100% 100%;
    
}
/*end*/
.end{
	display: none;
	width: 100%;
	height: 100%;
	background: url(../img/endbackground.gif) no-repeat;
	background-size: 100% 100%;
}
.sign{
	width: 42%;
    height: 32%;
	position: absolute;
	z-index: 3;
	top:1%;
	right:0%;
	
}
.sign img{
	width: 100%;
	height:100%;
	-webkit-animation: overturn 1s .8s infinite;
}
.child {
   width: 32%;
    height: 25%;
    position: absolute;
    z-index: 3;
    top: 4%;
    left: 4%;
}
.child img{
	width: 75%;
	height: 70%;
}
@-webkit-keyframes overturn{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
} 
.finger{
	width: 10.1%;
	height: 8%;
	position: absolute;
	top: 47%;
	left: 21%;
}
.finger img{
	width: 100%;
	height: 100%;
	-webkit-animation: fingerChange 2s .5s infinite;
}
@-webkit-keyframes fingerChange{
	from{-webkit-transform:translateX(0.1rem);} 
	to{-webkit-transform:translateX(-0.1rem);}  
}
.playagain{
	width: 18.4%;
	height: 10%;
	position: absolute;
	bottom: 12%;
	left: 38.9%;
}
.playagain img{
	width: 100%;
	height: 100%;
}