@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/bg.jpg) top center no-repeat;
	background-size: 100% 100%;
	position: relative;
}
/* logo */
.logo {
	width: 28%;
	height: 17.09%;
	background: url(../images/logo_babyfs.png) top right no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 1%;
	left: 0;
}
/* homgPage */
.homePage {
	width: 100%;
	height: 100%;
	background: url(../images/homePage.jpg) top center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	/*display: none;*/
}
.homePage p:nth-child(1) {
	width: 100%;
	height: 8.24%;
	background: url(../images/title.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 53.07%;
	left: 0;
	opacity: 1;
	-webkit-animation:titlePulse .8s .5s ease both;
}
@-webkit-keyframes titlePulse{
0%{opacity:0;-webkit-transform:scale(0.2)}
60%{opacity:1;-webkit-transform:scale(1.2)}
100%{opacity:1;-webkit-transform:scale(1)}
}
.homePage p:nth-child(2) {
	width: 41%;
	height: 9.97%;
	background: url(../images/btn_start.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 85.08%;
	left: 29.5%;
}
/* rule */
.rule {
	width: 100%;
	height: 100%;
	background: url(../images/rule.jpg) top center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.rule p:nth-child(1) {
	width: 19.73%;
	height: 9.97%;
	background: url(../images/btn_go.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 87.1%;
	left: 40.5%;
}
.rule em:nth-child(2) {
	display: block;
	width: 14%;
	height: 8.77%;
	background: url(../images/hint_hand.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 89%;
	left: 32%;
	-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: url(../images/bg.jpg) top center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.horn {
	display: block;
	width: 12%;
	height: 5.2%;
	background: url(../images/horn.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0%;
	z-index: 99;
}
/* seedsChange */
.seedsChange {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.seedsChange em {
	display: block;
	width: 32%;
	height: 23.91%;
	position: absolute;
	top: 32%;
}
.seedsChange em:nth-child(1) {
	background: url(../images/seeds_vegetable.png) top left no-repeat;
	background-size: auto 100%;
	left: 4%;
}
.vegetable-animate {
	-webkit-animation: vegetable 1s .2s ease both;
}
@-webkit-keyframes vegetable {
	0% {
		-webkit-transform: scale(1) translate(0);
	}
	100% {
		-webkit-transform: scale(2) translate(70px,30px);
	}
}
.seedsChange em:nth-child(2) {
	background: url(../images/seeds_fruit.png) top left no-repeat;
	background-size: auto 100%;
	left: 36.26%;
}
.fruit-animate {
	-webkit-animation: fruit 1s .2s ease both;
}
@-webkit-keyframes fruit {
	0% {
		-webkit-transform: scale(1) translate(0);
	}
	100% {
		-webkit-transform: scale(2) translate(0px,30px);
	}
}
.seedsChange em:nth-child(3) {
	background: url(../images/seeds_flower.png) top left no-repeat;
	background-size: auto 100%;
	left: 68.4%;
}
.flower-animate {
	-webkit-animation: flower 1s .2s ease both;
}
@-webkit-keyframes flower {
	0% {
		-webkit-transform: scale(1) translate(0);
	}
	100% {
		-webkit-transform: scale(2) translate(-70px,30px);
	}
}
.seedsChange p:nth-child(4) {
	width: 100%;
	font-size: 1.5rem;
	color: #000;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 3%;
	left: 0;
}
/* plant */
.plant {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.plant em, .plant span {
	display: block;
	position: absolute;
}
.plant em:nth-child(1) {
	width: 24%;
	height: 16.41%;
	background: url(../images/hole.png) top center no-repeat;
	background-size: auto 100%;
	top: 18.81%;
	left: 67.2%;
	z-index: 2;
}
.hole-animate {
	-webkit-animation: holeChangeBig 5s .2s ease both;
}
@-webkit-keyframes holeChangeBig {
	0% {
		-webkit-origin: center center;
		-webkit-transform: scale(1) rotate(0deg) translate(0px);
	}
	40% {
		-webkit-origin: center center;
		-webkit-transform: scale(2) rotate(0deg) translate(-20px,60px);
	}
	52% {
		-webkit-origin: center center;
		-webkit-transform: scale(2) rotate(0deg) translate(-20px,60px);
	}
	64% {
		-webkit-origin: center center;
		-webkit-transform: scale(2) rotate(20deg) translate(-30px,65px);
	}
	76% {
		-webkit-origin: center center;
		-webkit-transform: scale(2) rotate(0deg) translate(-20px,60px);
	}
	88% {
		-webkit-origin: center center;
		-webkit-transform: scale(2) rotate(20deg) translate(-30px,65px);
	}
	100% {
		-webkit-origin: center center;
		-webkit-transform: scale(2) rotate(0deg) translate(-20px,60px);
	}
}
.plant em:nth-child(2) {
	width: 14%;
	height: 8.77%;
	background: url(../images/hint_hand.png) top left no-repeat;
	background-size: auto 100%;
	top: 26%;
	left: 53%;
	z-index: 3;
	-webkit-animation: moveUpDown2 1s infinite;
}
@-webkit-keyframes moveUpDown2 {
	0% { -webkit-transform: rotate(40deg) translateX(0px);}
	100% { -webkit-transform: rotate(40deg) translateX(20px);}
}
.plant p:nth-child(3) {
	width: 100%;
	font-size: 1.5rem;
	color: #000;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 3%;
	left: 0;
}
.plant em:nth-child(4) {
	width: 33%;
	height: 8.39%;
	background: url(../images/hollow.png) top left no-repeat;
	background-size: auto 100%;
	top: 67.01%;
	left: 33.86%;
	z-index: 1;
	display: none;
}
.plant em:nth-child(5) {
	width: 67%;
	height: 17.61%;
	background: url(../images/hollow.png) top left no-repeat;
	background-size: auto 100%;
	top: 62.21%;
	left: 17.2%;
	z-index: 1;
	display: none;
}
.plant span:nth-child(6) {
	width: 26%;
	height: 18%;
	background-image: url(../images/seeds_vegetable.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	top: 22.93%;
	left: 1%;
	display: none;
}
.plant span:nth-child(7) {
	width: 14%;
	height: 8.77%;
	background: url(../images/hint_hand.png) top left no-repeat;
	background-size: auto 100%;
	top: 28.33%;
	left: 20%;
	display: none;
	-webkit-animation: moveUpDown3 1s infinite;
}
@-webkit-keyframes moveUpDown3 {
	0% { -webkit-transform: rotate(-120deg) translateX(-20px);}
	100% { -webkit-transform: rotate(-120deg) translateX(0px);}
}
.plant span:nth-child(8) {
	width: 61%;
	height: 35.38%;
	background-image: url(../images/seeding_vegetable.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	top: 20.91%;
	left: 41%;
	display: none;
}
.seeding-animate {
	-webkit-animation: seeding 1s .2s both;
}
@-webkit-keyframes seeding {
	0% {
		-webkit-transform: translate(0);
	}
	25% {
		-webkit-transform: translate(-10px,10px);
	}
	50% {
		-webkit-transform: translate(10px,-10px);
	}
	75% {
		-webkit-transform: translate(-10px,10px);
	}
	100% {
		-webkit-transform: translate(0);
	}
}
.plant span:nth-child(9) {
	width: 26%;
	height: 11%;
	background: url(../images/seeds.png) top left no-repeat;
	background-size: auto 100%;
	top: 61%;
	left: 39%;
	z-index: 2;
	-webkit-transform: rotate(40deg);
	display: none;
}
.plant em:nth-child(10) {
	width: 38%;
	height: 6.44%;
	background: url(../images/hollowFilling.png) top left no-repeat;
	background-size: auto 100%;
	top: 69.56%;
	left: 31.73%;
	z-index: 1;
	display: none;
}
.plant em:nth-child(11) {
	width: 24%;
	height: 16.41%;
	background: url(../images/hole.png) top center no-repeat;
	background-size: auto 100%;
	top: 18.81%;
	left: 67.2%;
	z-index: 2;
	display: none;
}
.plant em:nth-child(11) {
	width: 24%;
	height: 16.41%;
	background: url(../images/hole.png) top center no-repeat;
	background-size: auto 100%;
	top: 18.81%;
	left: 67.2%;
	z-index: 2;
	display: none;
}
/* watering */
.watering {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	display: none;
}
.watering em, .watering span {
	display: block;
	position: absolute;
}
.watering em:nth-child(1) {
	width: 32%;
	height: 13.64%;
	background: url(../images/wateringCansHint.png) top left no-repeat;
	background-size: auto 100%;
	top: 22.03%;
	left: 56.13%;
}
.watering em:nth-child(2) {
	width: 14%;
	height: 8.77%;
	background: url(../images/hint_hand.png) top left no-repeat;
	background-size: auto 100%;
	top: 26%;
	left: 53%;
	z-index: 3;
	-webkit-animation: moveUpDown2 1s infinite;
}
.watering span:nth-child(3) {
	width: 46%;
	height: 27.21%;
	background: url(../images/wateringCans.png) top left no-repeat;
	background-size: auto 100%;
	top: 32.23%;
	left: 71.33%;
	z-index: 9;
	display: none;
}
.watering span:nth-child(4) {
	width: 43%;
	height: 21.81%;
	background: url(../images/drip1.png) top left no-repeat;
	background-size: auto 100%;
	top: 52.84%;
	left: 34.8%;
	z-index: 9;
	display: none;
}
.watering span:nth-child(5) {
	width: 13%;
	height: 7.79%;
	background: url(../images/drip2.png) top left no-repeat;
	background-size: auto 100%;
	top: 64.76%;
	left: 44.66%;
	opacity: 0;
	z-index: 9;
	display: none;
	-webkit-animation: fadeInOut 1s infinite;
}
@-webkit-keyframes fadeInOut {
	0% { opacity: 0;}
	100% { opacity: 1;}
}
.watering p {
	width: 100%;
	font-size: 1.5rem;
	color: #000;
	font-weight: bold;
	text-align: center;
	position: absolute;
	top: 3%;
	left: 0;
}
.watering em:nth-child(7) {
	width: 24%;
	height: 12.21%;
	background: url(../images/sprout.png) top left no-repeat;
	background-size: auto 100%;
	top: 61.61%;
	left: 38.8%;
	display: none;
}
.watering em:nth-child(8) {
	width: 32%;
	height: 13.64%;
	background: url(../images/wateringCansHint.png) top left no-repeat;
	background-size: auto 100%;
	top: 22.03%;
	left: 56.13%;
	display: none;
}
.watering em:nth-child(9) {
	width: 32%;
	height: 13.64%;
	background: url(../images/wateringCansHint.png) top left no-repeat;
	background-size: auto 100%;
	top: 22.03%;
	left: 56.13%;
	display: none;
}

/* vegetable */
.vegetable {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.vegetable em, .vegetable span {
	display: block;
	position: absolute;
}
.vegetable em:nth-child(1) {
	width: 50%;
	height: 19.56%;
	background: url(../images/vegetable_sprout.png) top left no-repeat;
	background-size: auto 100%;
	top: 53.29%;
	left: 25.46%;
	display: none;
}
.vegetable em:nth-child(2) {
	width: 51%;
	height: 35.53%;
	background: url(../images/vegetable_cabbage.png) top left no-repeat;
	background-size: auto 100%;
	top: 37.63%;
	left: 24.8%;
	display: none;
}
.vegetable em:nth-child(3) {
	width: 27%;
	height: 3.67%;
	background: url(../images/soil.png) top left no-repeat;
	background-size: auto 100%;
	top: 70.46%;
	left: 37.2%;
}
/* fruit */
.fruit {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.fruit em, .fruit span {
	display: block;
	position: absolute;
}
/*.fruit em:nth-child(1) {
	width: 19%;
	height: 11.46%;
	background: url(../images/fruit_sprout2.png) top left no-repeat;
	background-size: auto 100%;
	top: 60.94%;
	left: 40.8%;
	display: none;
}*/
.fruit em:nth-child(1) {
	width: 30%;
	height: 18.89%;
	background: url(../images/fruit_sprout3.png) top left no-repeat;
	background-size: auto 100%;
	top: 54.19%;
	left: 35.6%;
	display: none;
}
.fruit em:nth-child(2) {
	width: 54%;
	height: 36.5%;
	background: url(../images/fruit_stalk.png) top left no-repeat;
	background-size: auto 100%;
	top: 36.88%;
	left: 16.26%;
	display: none;
}
.fruit em:nth-child(3) {
	width: 66%;
	height: 21.06%;
	background: url(../images/fruit_strawberry.png) top left no-repeat;
	background-size: auto 100%;
	top: 43.62%;
	left: 10.26%;
	display: none;
}
.fruit em:nth-child(4) {
	width: 27%;
	height: 3.67%;
	background: url(../images/soil.png) top left no-repeat;
	background-size: auto 100%;
	top: 70.46%;
	left: 37.2%;
}
/* flower */
.flower {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.flower em, .flower span {
	display: block;
	position: absolute;
}
.flower em:nth-child(1) {
	width: 26%;
	height: 10.49%;
	background: url(../images/flower_sprout2.png) top left no-repeat;
	background-size: auto 100%;
	top: 62.51%;
	left: 44.53%;
	display: none;
}
.flower em:nth-child(2) {
	width: 44%;
	height: 31.63%;
	background: url(../images/flower_stalk.png) top left no-repeat;
	background-size: auto 100%;
	top: 41.67%;
	left: 30.53%;
	display: none;
}
.flower em:nth-child(3) {
	width: 61%;
	height: 25.03%;
	background: url(../images/flower_flower.png) top left no-repeat;
	background-size: auto 100%;
	top: 29.76%;
	left: 20.66%;
	display: none;
}
.flower em:nth-child(4) {
	width: 27%;
	height: 3.67%;
	background: url(../images/soil.png) top left no-repeat;
	background-size: auto 100%;
	top: 70.46%;
	left: 37.2%;
}

/* sharePage */
.sharePage {
	width:100%;
	height: 100%;
	background:url(../images/share_bg.jpg) top center no-repeat;
	background-size:100% 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:999999;
	display: none;
}
.sharePage span:nth-child(1) {
	display: block;
	width:26%;
	height: 13%;
	background:url(../images/share_arrow.png) top center no-repeat;
	background-size:auto 100%;	
	position:absolute;
	top:1.5%;
	right:0%;
}
.share-arrow-animate {
	-webkit-animation:fadeInUp01 1.4s .1s ease infinite;
}
@-webkit-keyframes fadeInUp01{
0%{opacity:0.5;
-webkit-transform:translateY(-10px)}
50%{opacity:1;
-webkit-transform:translateY(0px)}
100%{opacity:0.5;
-webkit-transform:translateY(-10px)}
}
.sharePage p:nth-child(2) {
	width: 53%;
	height: 28.93%;
	position: absolute;
	top: 45%;
	left: 28%;
}
.sharePage p:nth-child(2) img {
	width: auto;
	height: 100%;
}
.onceMore {
	width:56%;
	height:10.11%;
	background:url(../images/btn_onceMore.png) top center no-repeat;
	background-size:auto 100%;
	position:absolute;
	top:88%;
	left:20.5%;
}
.sharePage-animate {
	-webkit-animation:bounceInDown 1s .2s ease both;
}
@-webkit-keyframes bounceInDown{
0%{opacity:0;
-webkit-transform:translateY(-2000px)}
60%{opacity:1;
-webkit-transform:translateY(30px)}
80%{opacity:1;-webkit-transform:translateY(-10px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}