@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:#21bd3b url(../images/topImg_bg5.jpg) center center no-repeat;
	background-size: 100% 100%;
	position: relative;
}
/* beginPage */
.beginPage {
	width: 100%;
	height: 100%;
	background: url(../images/startPage.jpg) center center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	/*display: none;*/
	z-index: 9999;
}
.beginPage p:nth-child(1) {
	width: 56%;
	height: 11.31%;
	background: url(../images/btn_start.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top:81.5%;
	left: 22%;
}
/* 上图 */
.topImg {
	width: 100%;
	height: 100%;
	/*background-color: rgba(0, 183, 239, 0.8);*/
	background-image: url(../images/topImg_bg1.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	display: none;
}
.topImg p {
	width: 100%;
	position: absolute;
	left: 0;
	z-index: 1;
	display: none;
}
.topImg p:nth-child(1) {
	display: block;
}
.topImg p:nth-child(1) {
	height: 18.66%;
	top: 8.47%;
	background:url(../images/giraffe_top.png) bottom center no-repeat;
	background-size:auto 100%;
}
.topImg p:nth-child(2) {
	height: 14.61%;
	top: 14.54%;
	background:url(../images/elephant_top.png) bottom center no-repeat;
	background-size:auto 100%;
}
.topImg p:nth-child(3) {
	height: 10.79%;
	top: 20.46%;
	background:url(../images/crocodile_top.png) bottom center no-repeat;
	background-size:auto 100%;
}
.topImg p:nth-child(4) {
	height: 12.14%;
	top: 20.38%;
	background:url(../images/chameleon_top.png) bottom center no-repeat;
	background-size:auto 100%;
}
.topImg p:nth-child(5) {
	height: 17.69%;
	top: 13.71%;
	background:url(../images/parrot_top.png) bottom center no-repeat;
	background-size:auto 100%;
}
/* 下图 */
.swiper-container {
	width:100%;
	height: 100%;
	position: absolute;
	left: 0;
	overflow:hidden;
	z-index: -2;
	/*display: none;*/
}
.swiper-wrapper {
	width: 100%;
	height: 100%;
}
.swiper-slide {
	width: 100%;
	height: 100%;
}
.swiper-container1 {
	top: 27.13%;
	/*display: block;*/
	/*display: none;*/
}
.swiper-container1 .swiper-slide1 {
	width: 100%;
	height:17.69%;
	background:url(../images/parrot_bottom.png) top center no-repeat;
	background-size:auto 100%;
}
.swiper-container1 .swiper-slide2 {
	width: 100%;
	height:12.06%;
	background:url(../images/chameleon_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container1 .swiper-slide3 {
	width: 100%;
	height:18.59%;
	background:url(../images/giraffe_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container1 .swiper-slide4 {
	width: 100%;
	height:14.61%;
	background:url(../images/elephant_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container1 .swiper-slide5 {
	width: 100%;
	height: 10.79%;
	background:url(../images/crocodile_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 {
	top: 29.15%;
}
.swiper-container2 .swiper-slide1 {
	width: 100%;
	height: 10.79%;
	background:url(../images/crocodile_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide2 {
	width: 100%;
	height:17.69%;
	background:url(../images/parrot_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide3 {
	width: 100%;
	height:18.59%;
	background:url(../images/giraffe_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide4 {
	width: 100%;
	height:14.61%;
	background:url(../images/elephant_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide5 {
	width: 100%;
	height:12.06%;
	background:url(../images/chameleon_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 {
	/*display: none;*/
	top: 31.25%;
}
.swiper-container3 .swiper-slide1 {
	width: 100%;
	height:14.61%;
	background:url(../images/elephant_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide2 {
	width: 100%;
	height: 10.79%;
	background:url(../images/crocodile_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide3 {
	width: 100%;
	height:18.59%;
	background:url(../images/giraffe_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide4 {
	width: 100%;
	height:12.06%;
	background:url(../images/chameleon_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide5 {
	width: 100%;
	height:17.69%;
	background:url(../images/parrot_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 {
	/*display: none;*/
	top: 32.52%;
}
.swiper-container4 .swiper-slide1 {
	width: 100%;
	height: 10.79%;
	background:url(../images/crocodile_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide2 {
	width: 100%;
	height:18.59%;
	background:url(../images/giraffe_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide3 {
	width: 100%;
	height:17.69%;
	background:url(../images/parrot_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide4 {
	width: 100%;
	height:12.06%;
	background:url(../images/chameleon_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide5 {
	width: 100%;
	height:14.61%;
	background:url(../images/elephant_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 {
	/*display: none;*/
	top: 31.4%;
}
.swiper-container5 .swiper-slide1 {
	width: 100%;
	height:14.61%;
	background:url(../images/elephant_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide2 {
	width: 100%;
	height: 10.79%;
	background:url(../images/crocodile_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide3 {
	width: 100%;
	height:18.59%;
	background:url(../images/giraffe_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide4 {
	width: 100%;
	height:12.06%;
	background:url(../images/chameleon_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide5 {
	width: 100%;
	height:17.69%;
	background:url(../images/parrot_bottom.png) top center no-repeat;
	background-size:auto 100%; 
}
/* 文字 */
.text {
	width: 100%;
	height: 39.58%;
	background:url(../images/textBg.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 52%;
	left: 0;
	/*display: none;*/
}
.text p:nth-child(1) {
	/*display: block;*/
}
.text p {
	width: 90%;
	height: auto;
	font-size: 1.05rem;
	color: #434343;
	font-weight: bold;
	text-align: center;
	line-height: 1.5rem;
	position: absolute;
	top: 48%;
	left: 5%;
	display: none;
}
.text p:nth-child(3) {
	font-size: 0.95rem;
}
.text h5:nth-child(6) {
	width: 40%;
	height: 20%;
	background: url(../images/horn.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 26%;
	left: 30%;
	z-index: 1000;
}
/* wholeImg */
.wholeImg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	z-index: 999;
}
.wholeImg p {
	position: absolute;
	display: none;
	z-index: 2;
}
.wholeImg p:nth-child(1) {
	/*display: block;*/
}
.wholeImg p:nth-child(1) {
	width: 100%;
	height: 46%;
	background: url(../images/giraffe.png) center center no-repeat;
	background-size: auto 100%;
	top: 2%;
	left: 0;
}
.wholeImg p:nth-child(2) {
	width: 100%;
	height: 42%;
	background: url(../images/elephant.png) center center no-repeat;
	background-size: auto 100%;
	top: 6%;
	left: 0;
}
.wholeImg p:nth-child(3) {
	width: 100%;
	height: 34%;
	background: url(../images/crocodile.png) top center no-repeat;
	background-size: auto 100%;
	top: 10%;
	left: 0;
}
.wholeImg p:nth-child(4) {
	width: 100%;
	height: 32%;
	background: url(../images/chameleon.png) top center no-repeat;
	background-size: auto 100%;
	top: 14%;
	left: 0;
}
.wholeImg p:nth-child(5) {
	width: 100%;
	height: 40%;
	background: url(../images/parrot.png) top center no-repeat;
	background-size: auto 100%;
	top: 8%;
	left: 0;
}
.wholeImg em {
	display: block;
	width: 100%;
	height: 54.12%;
	background: url(../images/whole_light.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.wholeImg-em-animate {
	-webkit-animation: rotate360 5s linear infinite;
}
@-webkit-keyframes rotate360 {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
/*.wholeImg span {
	display: block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.8;
	top: 0;
	left: 0;
	z-index: 1;
}*/

.indexClick {
	width: 20%;
	height: 9.82%;
	background: url(../images/next.png) center center no-repeat;
	background-size: auto 100%;
	position: absolute;
	bottom: 10px;
	right: 2%;
	z-index: 99;
}
/* clearance */
.clearance {
	width:100%;
	height: 100%;
	background:url(../images/clearanceBg.png) top center no-repeat;
	background-size:100% 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:9;
	display: none;
}
.clearance span {
	display: block;
	position:absolute;
}
/*.clearance span:nth-child(1) {
	width:23%;
	height: 16%;
	background:url(../images/logo_babyfs.png) top center no-repeat;
	background-size:auto 100%;	
	top:3%;
	left:3%;
}*/
.clearance span:nth-child(1) {
	width:22%;
	height: 11%;
	/*background:url(../images/code.png) top center no-repeat;
	background-size:auto 100%;	*/
	top:3%;
	left:3%;
}
.clearance span:nth-child(1) img {
	width: auto;
	height: 100%;
}
.clearance span:nth-child(2) {
	width:18%;
	height: 8%;
	background:url(../images/share_arrow.png) top center no-repeat;
	background-size:auto 100%;	
	top:1.5%;
	right:2%;
}
.share-arrow-animate { -webkit-animation:fadeInUp01 1.4s .1s ease infinite;}
/* animate */
@-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)}
}
.onceMore {
	width:55%;
	height:11.61%;
	background:url(../images/btn_onceMore.png) top center no-repeat;
	background-size:auto 100%;
	position:absolute;
	top:76%;
	left:27.5%;
}
.clearance-animate {
	-webkit-animation:bounceInDown 1s 0s 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)}
}

.slideHint {
	width:100%;
	height:100%;
	background-image:url(../images/slideTutorial.png);
	background-position: top right;
	background-repeat: no-repeat;
	background-size:100% 100%;
	position:absolute;
	top:0;
	right:0;
	display: none;
	z-index: 9999;
}
.slideHint span {
	display: block;
	width: 26%;
	height: 15.06%;
	background:url(../images/hand.png) top center no-repeat;
	background-size:auto 100%;
	position: absolute;
	top: 37.93%;
	right: 3.5%;
}
.slideHint-span-animate {
	-webkit-animation:rightToLeft 1s 0s ease infinite alternate;
}
@-webkit-keyframes rightToLeft{
0%{-webkit-transform:translateX(0)}
100%{-webkit-transform:translateX(-200px)}
}

/* sony+mi */
@media only screen and (min-width: 360px) and (max-width: 383px) {
	.text p {
		font-size: 1rem;
	}
	.text p:nth-child(3) {
		font-size: 0.85rem;
	}
}
/* 5s*/
@media only screen and (max-width: 359px) {
	.text p {
		/*border: 1px solid red;*/
		font-size: 0.9rem;
	}
	.text p:nth-child(3) {
		font-size: 0.75rem;
	}
}