@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/belowImg_bg5.jpg) center center no-repeat;*/
	background-color: #eee;
	background-size: 100% 100%;
	position: relative;
}
/* logo */
.logo {
	width: 28%;
	height: 17.09%;
	background: url(../images/logo_babyfs.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 1%;
	left: 0;
	z-index: 999999999;
}
/* 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: 41%;
	height: 9.97%;
	background: url(../images/btn_start.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 85%;
	left: 29.5%;
}
/* 下图 */
.belowImg {
	width: 100%;
	height: 100%;
	background-color: #eee;
	/*background-image: url(../images/belowImg_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;
}
.belowImg p {
	width: 100%;
	height: 18.74%;
	position: absolute;
	top: 27.32%;
	left: 0;
	z-index: 1;
	display: none;
}
.belowImg p:nth-child(1) {
	display: block;
}
.belowImg p:nth-child(1) {
	background:url(../images/img_purple_02.png) bottom center no-repeat;
	background-size:auto 100%;
}
.belowImg p:nth-child(2) {
	background:url(../images/img_white_02.png) bottom center no-repeat;
	background-size:auto 100%;
}
.belowImg p:nth-child(3) {
	background:url(../images/img_green_02.png) bottom center no-repeat;
	background-size:auto 100%;
}
.belowImg p:nth-child(4) {
	background:url(../images/img_yellow_02.png) bottom center no-repeat;
	background-size:auto 100%;
}
.belowImg p:nth-child(5) {
	background:url(../images/img_red_02.png) bottom center no-repeat;
	background-size:auto 100%;
}
.belowImg p:nth-child(6) {
	background:url(../images/img_pink_02.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 */
.swiper-container1 {
	height: 18.74%;
	top: 8.62%;
}
.swiper-container1 .swiper-slide1 {
	width: 100%;
	background:url(../images/img_pink_01.png) top center no-repeat;
	background-size:auto 100%;
}
.swiper-container1 .swiper-slide2 {
	width: 100%;
	background:url(../images/img_white_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container1 .swiper-slide3 {
	width: 100%;
	background:url(../images/img_green_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container1 .swiper-slide4 {
	width: 100%;
	background:url(../images/img_yellow_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container1 .swiper-slide5 {
	width: 100%;
	background:url(../images/img_red_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container1 .swiper-slide6 {
	width: 100%;
	background:url(../images/img_purple_01.png) top center no-repeat;
	background-size:auto 100%; 
}
/* swiper-container2 */
.swiper-container2 {
	height: 18.74%;
	top: 8.62%;
}
.swiper-container2 .swiper-slide1 {
	width: 100%;
	background:url(../images/img_yellow_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide2 {
	width: 100%;
	background:url(../images/img_purple_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide3 {
	width: 100%;
	background:url(../images/img_pink_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide4 {
	width: 100%;
	background:url(../images/img_green_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide5 {
	width: 100%;
	background:url(../images/img_white_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container2 .swiper-slide6 {
	width: 100%;
	background:url(../images/img_red_01.png) top center no-repeat;
	background-size:auto 100%; 
}
/* swiper-container3 */
.swiper-container3 {
	height: 18.74%;
	top: 8.62%;
}
.swiper-container3 .swiper-slide1 {
	width: 100%;
	background:url(../images/img_pink_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide2 {
	width: 100%;
	background:url(../images/img_red_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide3 {
	width: 100%;
	background:url(../images/img_green_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide4 {
	width: 100%;
	background:url(../images/img_yellow_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide5 {
	width: 100%;
	background:url(../images/img_purple_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container3 .swiper-slide6 {
	width: 100%;
	background:url(../images/img_white_01.png) top center no-repeat;
	background-size:auto 100%; 
}
/* swiper-container4 */
.swiper-container4 {
	height: 18.74%;
	top: 8.62%;
}
.swiper-container4 .swiper-slide1 {
	width: 100%;
	background:url(../images/img_purple_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide2 {
	width: 100%;
	background:url(../images/img_red_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide3 {
	width: 100%;
	background:url(../images/img_white_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide4 {
	width: 100%;
	background:url(../images/img_yellow_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide5 {
	width: 100%;
	background:url(../images/img_pink_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container4 .swiper-slide6 {
	width: 100%;
	background:url(../images/img_green_01.png) top center no-repeat;
	background-size:auto 100%; 
}
/* swiper-container5 */
.swiper-container5 {
	height: 18.74%;
	top: 8.62%;
}
.swiper-container5 .swiper-slide1 {
	width: 100%;
	background:url(../images/img_green_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide2 {
	width: 100%;
	background:url(../images/img_pink_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide3 {
	width: 100%;
	background:url(../images/img_purple_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide4 {
	width: 100%;
	background:url(../images/img_white_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide5 {
	width: 100%;
	background:url(../images/img_yellow_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container5 .swiper-slide6 {
	width: 100%;
	background:url(../images/img_red_01.png) top center no-repeat;
	background-size:auto 100%; 
}
/* swiper-container6 */
.swiper-container6 {
	height: 18.74%;
	top: 8.62%;
}
.swiper-container6 .swiper-slide1 {
	width: 100%;
	background:url(../images/img_green_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container6 .swiper-slide2 {
	width: 100%;
	background:url(../images/img_red_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container6 .swiper-slide3 {
	width: 100%;
	background:url(../images/img_purple_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container6 .swiper-slide4 {
	width: 100%;
	background:url(../images/img_yellow_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container6 .swiper-slide5 {
	width: 100%;
	background:url(../images/img_white_01.png) top center no-repeat;
	background-size:auto 100%; 
}
.swiper-container6 .swiper-slide6 {
	width: 100%;
	background:url(../images/img_pink_01.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: 2rem;
	position: absolute;
	top: 52%;
	left: 5%;
	display: none;
}
.text h5:nth-child(7) {
	width: 40%;
	height: 20%;
	background: url(../images/horn.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 28%;
	left: 30%;
	z-index: 1000;
}
/* wholeImg */
.wholeImg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
	z-index: 999;
}
.wholeImg p {
	width: 100%;
	height: 40%;
	position: absolute;
	top: 4%;
	left: 0;
	display: none;
	z-index: 2;
}
.wholeImg p:nth-child(1) {
	background: url(../images/img_purple.png) center center no-repeat;
	background-size: auto 100%;
}
.wholeImg p:nth-child(2) {
	background: url(../images/img_white.png) center center no-repeat;
	background-size: auto 100%;
}
.wholeImg p:nth-child(3) {
	background: url(../images/img_green.png) top center no-repeat;
	background-size: auto 100%;
}
.wholeImg p:nth-child(4) {
	background: url(../images/img_yellow.png) top center no-repeat;
	background-size: auto 100%;
}
.wholeImg p:nth-child(5) {
	background: url(../images/img_red.png) top center no-repeat;
	background-size: auto 100%;
}
.wholeImg p:nth-child(6) {
	background: url(../images/img_pink.png) top center no-repeat;
	background-size: auto 100%;
}
.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: 5%;
	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);}
}
.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:26%;
	height: 11%;
	top:3%;
	left:40%;
}
.clearance span:nth-child(1) img {
	width: auto;
	height: 100%;
}
.clearance span:nth-child(2) {
	width: 30%;
	height: 12%;
	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: 26%;
	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;
	}
}