.center{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/*page0*/
.start{
	display:block;
	width: 100%;
	height: 100%;
	background: url(../img/upanddownsplice.gif) top center no-repeat;
	background-size: 100% 100%;
}
.babylogo{
	width:15%;
	height: 16%;
	position: absolute;
	top: 3%;
	right:12%;
}
.startbtn{
	width: 56.2%;
	height: 17.1%;
	position: absolute;
	bottom:9%;
	left: 22.4%;
}
.startbtn img{
	width: 100%;
	height: 100%;
	-webkit-animation: startbtnChange 2s .5s infinite;
}
@-webkit-keyframes startbtnChange{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
/*page0结束*/
/*page1*/
.climbmountain{
	display: none;
	width: 100%;
	height: 100%;
	background: url(../img/climbmountainbackground.png) top center no-repeat;
	background-size: 100% 100%;
}
.sun{
	width: 32%;
	height: 17.4%;
	position: absolute;
	top: 2%;
	left: 2%;
	background: url(../img/suntwo_03.png) 0 0 no-repeat;
	background-size: 100% 100%;
	/*-webkit-animation: sunChange 3s .8s infinite;*/
}
/*@-webkit-keyframes sunChange{
0%{ background-image:url(../img/suntwo_03.png);}
20%{ background-image:url(../img/sunone1_03.png);}
40%{ background-image:url(../img/suntwo_03.png);}
60%{ background-image:url(../img/sunone1_03.png);}
80%{ background-image:url(../img/suntwo_03.png);}
100%{ background-image:url(../img/sunone1_03.png);}
}*/
.mark0{
	width:13.3%;
	height: 12.7%;
	position: absolute;
	bottom:60%;
	left:44% ;
	z-index: 99;
	opacity: 0;
}
.climbmountainboy{
	width: 17.3%;
	height: 16.7%;
	position:absolute ;
	bottom: 19%;
	left: -2%;
	background: url(../img/climbmountain1-1.png) 0 0 no-repeat;
	background-size: 100% 100%;
}
.rightarrows{
	display: none;
	width: 13.8%;
	height: 7%;
	position: absolute;
	top: 35.6%;
	left: 21.8%;
}
.text{
	font-size:0.5rem;
	font-weight: bolder;
}
.text1{
	display: none;
	color: #fff;
	position: absolute;
	top: 29%;
	left: 10%;
}
.leftarrows{
	display: none;
	width: 13.8%;
	height: 7%;
	position: absolute;
	top: 35.6%;
	right: 21.8%;
}
.text2{
	display: none;
	color: #FFFFFF;
	position: absolute;
	top: 29%;
	right: 10%;
}
.next{
	width: 16%;
	height: 8%;
	position: absolute;
	bottom: 2%;
	right: 3%;
}
.reset{
	width: 16%;
	height: 8%;
	position: absolute;
	bottom: 2%;
	left: 43%;
}
.return{
	width: 16%;
	height: 8%;
	position: absolute;
	bottom: 2%;
	left: 3%;
}
/*page2*/
.slide{
	display: none;
	width: 100%;
	height: 100%;
	background: url(../img/page2-1.gif)top center no-repeat;
	background-size: 100% 100%;
}
.slide_before{
	width: 85%;
	height: 25%;
	position: absolute;
	z-index: 1;
	top: 50%;
	left: 10%;
}
.slide_before img{
	width: 100%;
	height: 100%;
}
.slide_after{
	width: 70%;
	height: 26%;
	position: absolute;
	top: 48%;
	left: 9%;
}
.slide_after img{
	width: 100%;
	height: 100%;
}
.text6{
	display: none;
	position: absolute;
	z-index: 2;
	bottom: 66%;
	left: 16%;
	color: #285808;
	font-size: 46px;
}
.mark1{
	width:18%;
	height:16%;
	position: absolute;
	left:57%;
	bottom:46%;
	z-index: 99;
	opacity: 0;
	/*background-color: #285808;*/
}
.slideGril{
	width: 18%;
	height: 20%;
	position: absolute;
	left: 84%;
	bottom: 30%;
	z-index: 99;
	background: url(../img/slidegrilnew.png) 0 0 no-repeat;
	background-size:100% 100%;
}
.text3{
	display: none;
	position: absolute;
	top: 29%;
	left: 15%;
	color: #285808;
	font-size: 46px;
}
.leftline{
	display: none;
	position: absolute;
	top: 30%;
	left: 11%;
}
.rightline{
	display: none;
	position: absolute;
	top: 30%;
	right: 10%;
}
/*page3*/
.flyBall{
	display: none;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: url(../img/background1111.gif)top center no-repeat;
	background-size: 100% 100%;
}
.text4{
	display: none;
	width:77.6%;
	height: 4.8%;
	position: absolute;
	bottom: 16.9%;
	left: 11.2%;
}
.text4 img{
	width: 100%;
	height: 100%;
}
.sun2{
	width: 46.6%;
	height: 25.7%;
	position: absolute;
	top:34%;
	left: 20%;
}
.sun2 img{
	width: 100%;
	height: 100%;
	opacity:0;
	filter:alpha(opacity=0);
	z-index: 0;
}
.topleftballon {
    width: 53%;
    height: 70%;
    position: absolute;
    top: 23%;
    left: 1%;
    z-index: 999;
    background: url(../img/rightbloon1-1.png) 0 0 no-repeat;
    -webkit-animation: topChange 4s .8s infinite;
}
@-webkit-keyframes topChange{
0%{ background-image:url(../img/rightbloon1-1.png);}
20%{ background-image:url(../img/rightbloon2-2.png);}
40%{ background-image:url(../img/rightbloon1-1.png);}
60%{ background-image:url(../img/rightbloon2-2.png);}
80%{ background-image:url(../img/rightbloon1-1.png);}
100%{ background-image:url(../img/rightbloon2-2.png);}
}
.topleftballon img{
	width: 100%;
	height: 100%;
}
.bottomleftballon {
    width: 41%;
    height: 47%;
    position: absolute;
    top: 16%;
    left: 21%;
    z-index: 990;
    background: url(../img/centerbloon1-1.png) 0 0 no-repeat;
    -webkit-animation: bottomChange 4s .8s infinite;
}
@-webkit-keyframes bottomChange{
0%{ background-image:url(../img/centerbloon1-1.png);}
20%{ background-image:url(../img/centebloon2-2.png);}
40%{ background-image:url(../img/centerbloon1-1.png);}
60%{ background-image:url(../img/centebloon2-2.png);}
80%{ background-image:url(../img/centerbloon1-1.png);}
100%{ background-image:url(../img/centebloon2-2.png);}
}
.bottomleftballon img{
	width: 100%;
	height: 100%;
}
.rightballon {
    width: 63%;
    height: 53%;
    position: absolute;
    top: 27%;
    right:0%;
    z-index: 999;
    background: url(../img/leftbloon1-1.png) 0 0 no-repeat;
    -webkit-animation: rightChange 4s .8s infinite;
}
@-webkit-keyframes rightChange{
0%{ background-image:url(../img/leftbloon1-1.png);}
20%{ background-image:url(../img/leftbloon2-2.png);}
40%{ background-image:url(../img/leftbloon1-1.png);}
60%{ background-image:url(../img/leftbloon2-2.png);}
80%{ background-image:url(../img/leftbloon1-1.png);}
100%{ background-image:url(../img/leftbloon2-2.png);}
}
.rightballon img{
	width: 100%;
	height: 100%;
}

/*page4*/
.mapleLeaf{
	display: none;
	width: 100%;
	height: 100%;
	background: url(../img/page4-1.gif)top center no-repeat;
	background-size: 100% 100%;
}
.enjoy{
	width: 28%;
	height: 18%;
	position: absolute;
	top: 1%;
	right: 2%;
	-webkit-animation: enjoyChange 3s .8s infinite;
}
.enjoy img{
	width: 100%;
	height: 100%;
}
@-webkit-keyframes enjoyChange{
	from{-webkit-transform: translateY(0.3rem);}
	to{-webkit-transform: translateY(-0.3rem);}
}
.text5{
	display: none;
	position: absolute;
	left: 7%;
	bottom: 28%;
	font-size: 40px;
	color: #df6e00;
}
.brach{
	width: 48%;
	height: 34%;
	position: absolute;
	z-index: 2;
	top: 11%;
	left: 0;
}
.brach img{
	width: 100%;
	height: 100%;
}
.brach2{
	width: 74%;
	height: 35.5%;
	position: absolute;
	z-index: 1;
	top: 5%;
	left: 0;
}
.brach2 img{
	width: 100%;
	height: 100%;
}
.leaf {
    width: 38%;
    height: 19%;
    position: absolute;
    top: 22%;
    z-index: 999;
    left: 32%;
    background: url(../img/maple1-1.png) 0 0 no-repeat;
    -webkit-animation: leafChange 4s .8s infinite;
}
@-webkit-keyframes leafChange{
0%{ background-image:url(../img/maple1-1.png);}
20%{ background-image:url(../img/maple2-2.png);}
40%{ background-image:url(../img/maple1-1.png);}
60%{ background-image:url(../img/maple2-2.png);}
80%{ background-image:url(../img/maple1-1.png);}
100%{ background-image:url(../img/maple2-2.png);}
}
.leaf img{
	width: 100%;
	height: 100%;
}
.leaf1 {
    width: 39%;
    height: 21%;
    position: absolute;
    top: 29%;
    left: 10%;
    z-index: 999;
    background: url(../img/maple1-1.png) 0 0 no-repeat;
    -webkit-animation: leaf1Change 3s .8s infinite;
}
@-webkit-keyframes leaf1Change{
0%{ background-image:url(../img/maple1-1.png);}
20%{ background-image:url(../img/maple2-2.png);}
40%{ background-image:url(../img/maple1-1.png);}
60%{ background-image:url(../img/maple2-2.png);}
80%{ background-image:url(../img/maple1-1.png);}
100%{ background-image:url(../img/maple2-2.png);}
}
.leaf1 img{
	width: 100%;
	height: 100%;
}
/*.brachSlide{
	width: 48%;
	height: 34%;
	position: absolute;
	z-index: 2;
	top: 11%;
	left: 0;
}
.brachSlide img{
	width: 100%;
	height: 100%;
	-webkit-animation: joggle .3s  .3s infinite;
}
@-webkit-keyframes joggle{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
}*/