@import "reset.css";
/*  */
#loading {
	display:block;
	background:#1a1a1a url(http://live.babyfs.cn/web/H5/wjy/foundail20170308/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(http://live.babyfs.cn/web/H5/wjy/foundail20170308/bg.gif) top center no-repeat;
	background-size: 100% 100%;
	position: relative;
}
.star{
	width: 100%;
	height: 100%;
	background: url(../images/STAR.gif)  center center no-repeat;
	background-size: 100% 100%;
	position: relative;
	/*display: none;*/
}
.logo{
	width:32%;
    height: 19.11%;
    background: url(http://live.babyfs.cn/web/H5/wjy/foundail20170308/logo_01.png) top center no-repeat;
    background-size: auto 100%;
    position: absolute;
    z-index: 1;
    top: 1%;
    left: 10px;
}
.startbutton{
	width: 46.6%;
    height: 10.9%;
    position: absolute;
    top: 83.21%;
    left: 27%;
    background: url(../images/start.png) top center no-repeat;
    background-size: auto 100%;
}
/*rule*/
.rule{
	display: none;
	width: 100%;
	height: 100%;
	position:relative;
	background: url(../images/RULE.gif)top center no-repeat;
	background-size: 100% 100%;  
}
.close{
	width: 40%;
    height: 12.24%;
    position: absolute;
    z-index: 1;
    top: 84%;
    right: 30%;
    background: url(../images/but.png) top center no-repeat;
    background-size: auto 100%;
}
.finger{
	width: 22.6%;
    height: 11.02%;
    background: url(../images/finger.png) top center no-repeat;
    background-size: auto 100%;
    position: absolute;
    top: 89%;
    left: 25.5%;
    -webkit-animation: fingersport 1.6s 0.4s infinite;
    z-index: 2;
}
@-webkit-keyframes fingersport{
	from{-webkit-transform: translateY(3%);}
	to{-webkit-transform: translateY(-3%);}
}
.part1{
	display: none;
	width: 100%;
	height: 100%;
	position: relative;
	background: url(../images/PART1.gif) top center no-repeat;
	background-size:100% 100%;
	overflow: hidden;
}
.finger1{
	width: 22.6%;
    height: 11.02%;
    position: absolute;
    top:85%;
    left:27.5%;
    background: url(../images/finger.png) top center no-repeat;
    background-size: auto 100%;
    z-index: 2;
}
.text1{
	width: 84%;
    height: 6.8%;
    position: absolute;
    top: 0.9%;
    left: 5.9%;
    background: url(../images/canyou-.png) top center no-repeat;
    background-size: auto 100%;
}
.topTriangledotted{
	width: 23.16%;
    height: 4.5%;
    position: absolute;
    top: 12.07%;
    left: 54.07%;
    background: url(../images/topTriangledooted.png) top center no-repeat;
    background-size: auto 100%;
}
.topTriangledotted.topTriangledottedChange{
	background: url(../images/topTriangle.png) top center no-repeat;
	background-size: auto 100%;
}
.leftTriangledotted{
	width:26.53%;
	height:23.91%;
	position: absolute;
	top:16.49%;
	left:26.53%;
	background: url(../images/leftTriangledotted.png) top center no-repeat;
	background-size: auto 100%; 
}
.leftTriangledotted.leftTriangledottedChange{
	background: url(../images/leftTriangle.png) top center no-repeat;
	background-size: auto 100%;
}
.rightTriangledotted{
	width: 21.6%;
	height:23.91%;
	position: absolute;
	top:16.49%;
	left:53.07%;
	background: url(../images/rightTriangledotted.png) top center no-repeat;
	background-size: auto 100%;
}
.rightTriangledotted.rightTriangledottedChange{
	background: url(../images/rightTriangle.png) top center no-repeat;
	background-size: auto 100%;
}
.bottomRectangledotted{
	width: 77.8%;
    height: 6.14%;
    position: absolute;
    top: 41.15%;
    left: 10.93%;
    background: url(../images/bottomRectangledotted2.png) top center no-repeat;
    background-size: auto 100%;
}
.bottomRectangledotted.bottomRectangledottedChange{
	background: url(../images/bottomRectangledotted.png) top center no-repeat;
	background-size: auto 100%;
}
.bottomRectangle{
	width: 93.47%;
    height: 7.5%;
    position: absolute;
    top: 56.07%;
    left:3.5%;
    background: url(../images/bottomRectangledotted.png)top center no-repeat;
    background-size: auto 100%;
}
.topTriangle{
	width: 38.4%;
    height: 7.3%;
    position: absolute;
    top: 66.22%;
    left: 52.8%;
    background: url(../images/topTriangle.png) top center no-repeat;
    background-size: auto 100%;
}
.leftTriangle{
	width:24.13%;
	height:22.11%;
	position: absolute;
	top:70.39%;
	left:3.5%;
	background: url(../images/leftTriangle.png) top center no-repeat;
	background-size: auto 100%;
}
.rightTriangle{
	width:20.8%;
	height:23.69%;
	position: absolute;
	top:72.04%;
	left:39.6%;
	background: url(../images/rightTriangle.png) top center no-repeat;
	background-size: auto 100%;
}
.part2{
	display: none;
	width: 100%;
	height: 100%;
	position:absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	background-size: 100% 100%;
	z-index: 999;
	overflow: hidden;
}
.text2{
	width: 81.93%;
    height: 10.04%;
    position: absolute;
    top: 13.9%;
    left: 400px;
    z-index: 999;
    background: url(../images/itsboat.png) top center no-repeat;
    background-size: auto 100%;
}
.shap{
	width: 100%;
	height: 45%;
	position: absolute;
	top:27.14%;
	left:400px;
	background: url(../images/boat.gif) top center no-repeat;
	background-size: auto 100%;
}
.part3{
	width: 100%;
	height: 100%;
	position: relative;
	background: url(../images/PART1.gif) top center no-repeat;
	background-size: 100% 100%;
	overflow: hidden;
}
.text3{
	width: 84%;
    height: 6.8%;
    position: absolute;
    top: 0.9%;
    left: 5.9%;
	background: url(../images/canyoutrain.png) top center no-repeat;
	background-size: auto 100%;
}
.heart{
	width: 24.87%;
    height: 10.57%;
    position: absolute;
    top: 54.72%;
    left: 6.3%;
    background: url(../images/Heart1.png) top center no-repeat;
    background-size: auto 100%;
}
.heartdotted{
	width: 12.67%;
    height: 5.5%;
    position: absolute;
    top: 29.2%;
    left: 35.67%;
    background: url(../images/heartdoote.png) top center no-repeat;
    background-size: auto 100%;
    z-index: 2;
}
.heartdotted.heartdottedChange{
	background: url(../images/Heart1.png) top center no-repeat;
	background-size: auto 100%;
}
.bigRectangle1{
	width: 39.6%;
    height: 11.8%;
    position: absolute;
    top: 69.79%;
    left: 57%;
    background: url(../images/Rectangle3.png) top center no-repeat;
    background-size: auto 100%;
    z-index: auto;3
}
.bigRectangle2{
	width: 39.6%;
    height: 11.8%;
    position: absolute;
    top: 69.79%;
    left: 57%;
    background: url(../images/Rectangle3.png) top center no-repeat;
    background-size: auto 100%;
    z-index: 2;
}
.bigRectangle3{
	width: 39.6%;
    height: 11.8%;
    position: absolute;
    top: 69.79%;
    left: 57%;
    background: url(../images/Rectangle3.png) top center no-repeat;
    background-size: auto 100%;
    z-index: 1;
}
.centerRectangle{
	width:15.47%;
	height:13.12%;
	position: absolute;
	top:69.72%;
	left:11.2%;
	background: url(../images/Rectangle1.png) top center no-repeat;
	background-size: auto 100%;
}
.smallRectangle{
	width:8.3%;
	height:8.3%;
	position: absolute;
	top:71.96%;
	left:39.07%;
	background: url(../images/Rectangle2.png) top center no-repeat;
	background-size: auto 100%;
}
.smallTriangle{
	width:20.67%;
	height:6.6%;
	position: absolute;
	top:55.62%;
	left:36.8%;
	background: url(../images/Triangle1.png) top center no-repeat;
	background-size: auto 100%;
}
.bigTriangle{
	width: 22%;
    height: 9.8%;
    position: absolute;
    top: 53.97%;
    left: 67.6%;
    background: url(../images/Triangle2.png) top center no-repeat;
    background-size: auto 100%;
}
.circle1{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 2.87%;
    background: url(../images/Round.png) top center no-repeat;
    background-size: auto 100%;
}
.circle2{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 2.87%;
    background: url(../images/Round.png) top center no-repeat;
    background-size: auto 100%;
}
.circle3{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 2.87%;
    background: url(../images/Round.png) top center no-repeat;
    background-size: auto 100%;
}
.circle4{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 31.87%;
    background: url(../images/_circle2.png) top center no-repeat;
    background-size: auto 100%;
}
.circle5{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 31.87%;
    background: url(../images/_circle2.png) top center no-repeat;
    background-size: auto 100%;
}
.circle6{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 31.87%;
    background: url(../images/_circle2.png) top center no-repeat;
    background-size: auto 100%;
}
.circle7{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 63.87%;
    background: url(../images/_circle3.png) top center no-repeat;
    background-size: auto 100%;
}
.circle8{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 63.87%;
    background: url(../images/_circle3.png) top center no-repeat;
    background-size: auto 100%;
}
.circle9{
	width: 25.47%;
    height: 11.29%;
    position: absolute;
    top: 84.78%;
    left: 63.87%;
    background: url(../images/_circle3.png) top center no-repeat;
    background-size: auto 100%;
}
.bigRectangledotted1{
	width: 25.67%;
    height: 8.5%;
    position: absolute;
    top: 26.99%;
    left: 3.1%;
    background: url(../images/Rectangulardotted.png) top center no-repeat;
    background-size: auto 100%;
}
.bigRectangledotted1.bigRectangledotted1Change{
	background: url(../images/Rectangle3.png) top center no-repeat;
	background-size: auto 100%;
}
.bigRectangledotted2{
	width: 25.67%;
    height: 8.5%;
    position: absolute;
    top: 26.99%;
    left: 29.87%;
    background: url(../images/Rectangulardotted.png) top center no-repeat;
    background-size: auto 100%;
}
.bigRectangledotted2.bigRectangledotted2Change{
	background: url(../images/Rectangle3.png) top center no-repeat;
	background-size: auto 100%;
}
.bigRectangledotted3{
	width: 25.67%;
    height: 8.5%;
    position: absolute;
    top: 26.99%;
    left: 57.2%;
    background: url(../images/Rectangulardotted.png) top center no-repeat;
    background-size: auto 100%;
}
.bigRectangledotted3.bigRectangledotted3Change{
	background: url(../images/Rectangle3.png) top center no-repeat;
	background-size: auto 100%;
}
.centerRectangledotted{
	width: 8.4%;
    height: 7.6%;
    position: absolute;
    top: 18.57%;
    left: 60%;
    background: url(../images/Triangledotted.png) top center no-repeat;
    background-size: auto 100%;
}
.centerRectangledotted.centerRectangledottedChange{
	background: url(../images/Rectangle1.png) top center no-repeat;
	background-size: auto 100%;
}
.smallRectangledotted{
	width: 6.1%;
    height: 5.1%;
    position: absolute;
    top: 21.04%;
    left: 75%;
    background: url(../images/Triangledotted.png) top center no-repeat;
    background-size: auto 100%;
}
.smallRectangledotted.smallRectangledottedChange{
	background: url(../images/Rectangle2.png) top center no-repeat;
	background-size: auto 100%;
}
.bigTriangledotted{
	width: 15.27%;
    height: 7.1%;
    position: absolute;
    top: 32.08%;
    left: 84.4%;
    background: url(../images/Triangledotted2.png) top center no-repeat;
    background-size: auto 100%;
}
.bigTriangledotted.bigTriangledottedChange{
	background: url(../images/Triangle2.png) top center no-repeat;
	background-size: auto 100%;
}
.smallTriangledotted{
	width: 15.07%;
    height: 4.6%;
    position: absolute;
    top: 12.92%;
    left: 56.67%;
    background: url(../images/Triangledotted1.png) top center no-repeat;
    background-size: auto 100%;
}
.smallTriangledotted.smallTriangledottedChange{
	background: url(../images/Triangle1.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted1{
	width: 7.8%;
    height: 4.12%;
    position: absolute;
    top: 37.03%;
    left: 2%;
    background: url(../images/circle1-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted1.circledotted1Change{
	background: url(../images/Round.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted2{
	width: 7.8%;
    height: 4.12%;
    position: absolute;
    top: 37.03%;
    left: 11.07%;
    background: url(../images/circle1-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted2.circledotted2Change{
	background: url(../images/Round.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted3{
	width: 7.8%;
    height: 4.12%;
    position: absolute;
    top: 37.48%;
    left: 19.2%;
    background: url(../images/circle1-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted3.circledotted3Change{
	background: url(../images/Round.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted4{
	width: 7.8%;
    height: 4.12%;
    position: absolute;
    top: 37.03%;
    left: 29.2%;
    background: url(../images/circle2-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted4.circledotted4Change{
	background: url(../images/_circle2.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted5{
	width: 7.8%;
    height: 4.12%;
    position: absolute;
    top: 37.03%;
    left: 37%;
    background: url(../images/circle2-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted5.circledotted5Change{
	background: url(../images/_circle2.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted6{
	width: 8.8%;
    height: 4.12%;
    position: absolute;
    top: 37.48%;
    left: 45.6%;
    background: url(../images/circle2-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted6.circledotted6Change{
	background: url(../images/_circle2.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted7{
	width: 10.67%;
    height: 5.8%;
    position: absolute;
    top: 36.73%;
    left: 56.07%;
    background: url(../images/circle3-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted7.circledotted7Change{
	background: url(../images/_circle3.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted8{
	width: 7.8%;
    height: 4.12%;
    position: absolute;
    top: 37.03%;
    left: 67.6%;
    background: url(../images/circle3-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted8.circledotted8Change{
	background: url(../images/_circle3.png) top center no-repeat;
	background-size: auto 100%;
}
.circledotted9{
	width: 7.8%;
    height: 4.12%;
    position: absolute;
    top: 37.48%;
    left: 76.07%;
    background: url(../images/circle3-1.png) top center no-repeat;
    background-size: auto 100%;
}
.circledotted9.circledotted9Change{
	background: url(../images/_circle3.png) top center no-repeat;
	background-size: auto 100%;
}
.part4{
	display: none;
	width: 100%;
	height: 100%;
	position:absolute;
	top: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	background-size: 100% 100%;
	z-index: 999;
	overflow: hidden;
}
.text4{
	display: none;
	width: 81.93%;
    height: 10.04%;
    position: absolute;
    top: 13.9%;
    left: 400px;
    z-index: 999;
	background: url(../images/itstrain.png) top center no-repeat;
	background-size: auto 100%;
}
.train{
	width: 100%;
	height: 45%;
	position: absolute;
	top:27.14%;
	left:400px;
	background: url(../images/train.gif) top center no-repeat;
	background-size: auto 100%;
}
.playagain{
	display: none;
	width:23.07%;
	height:12.67%;
	position: absolute;
	top:79.84%;
	left:37.73%;
	background: url(../images/playagain.png) top center no-repeat;
	background-size: auto 100%;
	-webkit-animation: playagainSport 3s 0s infinite;
}
@-webkit-keyframes playagainSport{
	from{-webkit-transform: rotate(0deg);}
	to{-webkit-transform: rotate(360deg);}
}