@import "reset.css";
/*  */
#loading {
	display:block;
	background:#1a1a1a url(../images/loading.gif) center no-repeat;
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:999999;
}
#loading p {
	width:100%;
	height:50px;
	text-align:center;
	position:absolute;
	top:50%;
	margin-top:-15px;
	left:0;
	font-family: Arial, Helvetica, sans-serif;
	font-size:1.5em;
	color:#999;
	z-index:999999999;
}
/* index */
.p-index {position:relative;height: 100%; width: 100%; min-width:320px;max-width:640px;margin:0 auto;overflow: hidden;display: none; transform-style: preserve-3d;-webkit-transform-origin: 0px 0px 0px;-webkit-perspective: 200px; -webkit-backface-visibility: hidden; }
.portrait .p-index { -webkit-transform: scale(0.4); margin-top: -44%; }
/* m- */
.m-page{position:absolute;left:0;top:0%;height:100%;width:100%;min-width:320px;max-width:640px;-webkit-transform-origin: 50px 0px 0px;display:none;}
.m-page.cur{ display:block;z-index:3;}

.m-img{width:100%;height:100%;}
/* page0 */
.m-img1 { 
	/*background: url(../images/page1.jpg) top center no-repeat;*/
	background-size: 100% 100%;
	position: relative;
}
.logo {
	width: 28%;
	height: 17.09%;
	background: url(../images/logo_babyfs.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 1%;
	left: 0;
	z-index: 99;
	/*display: none;*/
}
/* homePage */
.homePage {
	width: 100%;
	height: 100%;
	background: url(../images/homePage.jpg) center center no-repeat;
	background-size: 100% 100%;
	position: relative;
	/*display: none;*/
}
.homePage p:nth-child(1) {
	width: 100%;
	height: 16.34%;
	background: url(../images/homePage_title.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 18%;
	left: 0;
	opacity: 0;
}
.title-animate {
	-webkit-animation:bounceInDown 1.2s both;
}
@-webkit-keyframes bounceInDown{
0%{opacity:0;-webkit-transform:translateY(-2000px)}
30%{-webkit-transform:translateY(20px)}
60%{-webkit-transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0px)}
}
.homePage p:nth-child(2) {
	width: 100%;
	height: 29.31%;
	background: url(../images/homePage_bus.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 49.7%;
	left: 0;
	opacity: 0;
}
.bus-animate {
	-webkit-animation: sizeChange 1.6s linear both;
}
@-webkit-keyframes sizeChange {
	0% { opacity: 0.8; -webkit-transform: scale(0.3) translateY(80px);}
	100% { opacity: 1; -webkit-transform: scale(1.6) translateY(0);}
}
.homePage p:nth-child(3) {
	width: 41%;
	height: 9.97%;
	background: url(../images/homePage_start.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 68%;
	left: 29.5%;
	display: none;
}
.rule {
	width: 100%;
	height: 100%;
	background: url(../images/rule.jpg) center center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.rule p#btn-go {
	width: 21%;
	height: 9.97%;
	background: url(../images/btn_go.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 84.4%;
	left: 40.5%;
}
/* menuPage */
.menuPage {
	width: 100%;
	height: 100%;
	background: url(../images/menuPage.jpg) center center no-repeat;
	background-size: 100% 100%;
	position: relative;
	display: none;
}
.menuPage p:nth-child(1) {
	width: 100%;
	height: 6.89%;
	position: absolute;
	top: 0;
	left: 0;
}
.menuPage p:nth-child(2) {
	width: 100%;
	height: 6.89%;
	position: absolute;
	top: 6.89%;
	left: 0;
}
.menuPage p:nth-child(3) {
	width: 40.26%;
	height: 21.58%;
	position: absolute;
	top: 24.88%;
	left: 5.86%;
}
.menuPage p:nth-child(4) {
	width: 40.26%;
	height: 21.58%;
	position: absolute;
	top: 24.88%;
	left: 53.6%;
}
.menuPage p:nth-child(5) {
	width: 40.26%;
	height: 21.58%;
	position: absolute;
	top: 64.31%;
	left: 5.86%;
}
.menuPage p:nth-child(6) {
	width: 40.26%;
	height: 21.58%;
	position: absolute;
	top: 64.31%;
	left: 53.6%;
}
.menuPage em:nth-child(7) {
	display: block;
	width: 9.33%;
	height: 5.09%;
	position: absolute;
	top: 16.94%;
	left: 21.2%;
}
.menuPage em:nth-child(8) {
	display: block;
	width: 9.33%;
	height: 5.09%;
	position: absolute;
	top: 16.94%;
	left: 69.32%;
}
.menuPage em:nth-child(9) {
	display: block;
	width: 9.33%;
	height: 5.09%;
	position: absolute;
	top: 56.22%;
	left: 21.2%;
}
.menuPage em:nth-child(10) {
	display: block;
	width: 9.33%;
	height: 5.09%;
	position: absolute;
	top: 56.22%;
	left: 69.32%;
}
.menuPage span {
	display: block;
	position: absolute;
}
.menuPage span:nth-child(11) {
	width: 14%;
	height: 4.19%;
	background: url(../images/handClick.png) top left no-repeat;
	background-size: auto 100%;
	top: 31.5%;
	left: 20.5%;
	opacity: 0;
	-webkit-animation: fadeInOut 1s infinite;
}
@-webkit-keyframes fadeInOut {
	0% { opacity: 0;}
	60% { opacity: 0;}
	100% { opacity: 1;}
}
.menuPage span:nth-child(12) {
	width: 13%;
	height: 9.29%;
	background: url(../images/hand.png) top left no-repeat;
	background-size: auto 100%;
	top: 33%;
	left: 24%;
	-webkit-animation: moveUpDown 1s infinite;
}
@-webkit-keyframes moveUpDown {
	0% { -webkit-transform: translateY(20px);}
	100% { -webkit-transform: translateY(0);}
}

/* content */
.content {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.7);
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.content h6#close {
	width: 20%;
	height: 10.79%;
	background: url(../images/btn_close.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 3%;
	right: 0;
	z-index: 99;
}
.scenes {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.scenes li {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.scenesIn-aniamte {
	-webkit-animation: bounceInRight 1s ease both;
}
.scenesOut-aniamte {
	-webkit-animation: bounceOutLeft 1s 5.2s ease both;
}
@-webkit-keyframes bounceInRight {
	0% { -webkit-transform: translateX(2000px);}
	60% { -webkit-transform: translateX(-30px);}
	80% { -webkit-transform: translateX(10px);}
	100% { -webkit-transform: translateX(0);}
}
@-webkit-keyframes bounceOutLeft {
	0% { -webkit-transform: translateX(0);}
	20% { -webkit-transform: translateX(20px);}
	100% { -webkit-transform: translateX(-2000px);}
}
.scenes li:nth-child(1) {
	background: url(../images/scenes1.png) top center no-repeat;
	background-size: 100% 100%;
	z-index: 5;
}
.scenes li:nth-child(1) p {
	width: 30%;
	height: 20.53%;
	background-image: url(../images/scenes1_girl1.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 52.24%;
	left: 4.26%;
}
.girl1-animate {
	-webkit-animation: girl1ImgChange 0.6s linear infinite alternate;
}
@-webkit-keyframes girl1ImgChange {
	0% { background-image: url(../images/scenes1_girl1.png);}
	25% { background-image: url(../images/scenes1_girl2.png);}
	50% { background-image: url(../images/scenes1_girl3.png);}
	75% { background-image: url(../images/scenes1_girl4.png);}
	100% { background-image: url(../images/scenes1_girl5.png);}
}
.scenes li:nth-child(2) {
	background: url(../images/scenes2.png) top center no-repeat;
	background-size: 100% 100%;
	z-index: 4;
}
.scenes li:nth-child(2) p:nth-child(1) {
	width: 32%;
	height: 21.73%;
	background-image: url(../images/scenes2_girl1.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 53.52%;
	left: 3.6%;
}
.scenes li:nth-child(2) p:nth-child(2) {
	width: 26%;
	height: 19.79%;
	background: url(../images/scenes2_classmate1.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 51.27%;
	left: 37.46%;
	-webkit-animation: bounceInRight 1s ease both;
}
.scenes li:nth-child(2) p:nth-child(3) {
	width: 29%;
	height: 23.01%;
	background: url(../images/scenes2_classmate2.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 51.27%;
	left: 66.26%;
	-webkit-animation: bounceInRight 1s .6s ease both;
}
.girl2-animate {
	-webkit-animation: girl2ImgChange 0.4s linear infinite alternate;
}
@-webkit-keyframes girl2ImgChange {
	0% { background-image: url(../images/scenes2_girl1.png);}
	50% { background-image: url(../images/scenes2_girl2.png);}
	100% { background-image: url(../images/scenes2_girl3.png);}
}
.scenes li:nth-child(3) {
	background: url(../images/scenes3_first.png) top center no-repeat;
	background-size: 100% 100%;
	z-index: 3;
}
.scenes li:nth-child(4) {
	background: url(../images/scence3_second.png) top center no-repeat;
	background-size: 100% 100%;
	z-index: 3;
}
.scenes li:nth-child(5) {
	background: url(../images/scence3_third.png) top center no-repeat;
	background-size: 100% 100%;
	z-index: 3;
}
.scenes li:nth-child(6) {
	background: url(../images/scence3_fourth.png) top center no-repeat;
	background-size: 100% 100%;
	z-index: 3;
}
.scenes li:nth-child(7) {
	background: url(../images/scenes4.png) top center no-repeat;
	background-size: 100% 100%;
	z-index: 2;
}
.scenes li:nth-child(7) p:nth-child(1) {
	width: 32%;
	height: 21.73%;
	background-image: url(../images/scenes2_girl1.png);
	background-position: top left;
	background-repeat: no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 53.52%;
	left: 3.6%;
}