@charset "utf-8";
#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;
}
/* CSS Document */
.swiper-container { width:100%; height:100%; overflow:hidden;}
/* page0 */
.swiper-slide1 { background:url(../images/home_bg.jpg) top center no-repeat; background-size:100% 100%; position: relative;}
.logo-babyfs { width:28%; height: 17.09%; background:url(../images/logo_babyfs.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 1%; left: 1%;}
.home-img { width:72%; height: 52%; background:url(../images/home_img.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 23.1%; left: 16.5%; opacity:0;}
.home-img-animate { -webkit-animation:rotateIn 1s .3s ease both;}
/* 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)}
}
@-webkit-keyframes bounce{
0% { opacity:0;}
1% { opacity:1;}
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{ opacity:1;-webkit-transform:translateY(-30px)}
60%{ opacity:1;-webkit-transform:translateY(-15px)}
100% { opacity:1;}
}
/*.swiper-slide1, .swiper-slide2, .swiper-slide3, .swiper-slide4, .swiper-slide5, .swiper-slide6, .swiper-slide7 { display: none;}*/
/* page1 */
.swiper-slide2 { background:url(../images/page_bg.jpg) top center no-repeat; background-size:100% 100%;}
.btn-flip { width:24%; height: 13%; background:url(../images/btn_flip.png) top center no-repeat; background-size:auto 100%; position: absolute; bottom: 20px; left: 38%; -webkit-animation:fadeInUp01 1.6s .2s ease infinite;}
.expression { width:23%; height: 13%; background-repeat: no-repeat; background-position: top center; background-size:auto 100%; position: absolute; top: 68%; left: 38.5%; opacity:0;}
.quizzes { width: 70%; height: 56%; position: absolute; top:21.7%; left:15%; color: #22ac38; overflow:hidden;}
.quizzes h2 { width: 100%; font-size: 0.55rem; margin-bottom:5%; line-height: .8rem; text-align: center; font-weight: bold;}
.quizzes p { width: 100%; font-size: 0.5rem; margin:2% 0; text-align: center; font-weight: bold; line-height: .7rem;}
.quizzes p img { width:auto; height: 2.5rem;}
.quizzes strong { font-size: 0.55rem;}
.quizzes1 h2 {}
/*.quizzes1 p { line-height: 0.7rem;}*/
.expression-animate { opacity: 1; -webkit-animation:bounce 1s .2s ease both;}
/* page2 */
.swiper-slide3 { background:url(../images/page_bg.jpg) top center no-repeat; background-size:100% 100%;}
.quizzes2 h2 {}
/*.quizzes2 p { line-height: 0.7rem;}*/
/* page3 */
.swiper-slide4 { background:url(../images/page_bg.jpg) top center no-repeat; background-size:100% 100%; position: relative; /*display:none;*/}
.quizzes3 h2 { }
.quizzes3 p { line-height: 0.9rem;}
/* page4 */
.swiper-slide5 { background:url(../images/page_bg.jpg) top center no-repeat; background-size:100% 100%; position: relative; /*display:none;*/}
.quizzes4 h2 { }
/*.quizzes4 p { line-height: 1rem;}*/
/* page5 */
.swiper-slide6 { background:url(../images/page_bg.jpg) top center no-repeat; background-size:100% 100%; position: relative;}
.quizzes5 h2 { }
/* page6 */
.swiper-slide7 { background:url(../images/page_bg.jpg) top center no-repeat; background-size:100% 100%; position: relative;}
.quizzes6 h2 { }
/*.quizzes5 p { line-height: 1.2rem;}*/
/* page7 */
.swiper-slide8 { background-color:#ffbc3b; background-size:100% 100%; position: relative;}
/* clearance */
.clearance { width: 100%; height: 100%; background: url("../images/clearanceBg.jpg") top center no-repeat; background-size: 100% 100%; position: absolute; top: 0; left: 0; display: none;}
.clearance-img { width: 76%; height: 51%; background:url(../images/clearance_img.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 21.7%; left: 12%;}
.clearance-text { width: 72%; height: 12%; background:url(../images/clearance_text.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 73%; left: 14%; opacity: 0;}
.code { width: 30%; height: 15%; position: absolute; top: 84.2%; left: 4%; text-align: center;}
.code img { height: 100%; width:auto;}
.share-arrow { width: 21%; height: 10%; background:url(../images/share_arrow.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 1.5%; left: 77%;}
.btn-review { width: 37%; height: 12%; background:url(../images/btn_review.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 87.1%; left: 31.5%;}
.share-arrow-animate { -webkit-animation:fadeInUp01 1.4s .2s ease infinite;}
.clearance-img-animate { -webkit-animation:rotateIn 1s .2s ease both;}
.clearance-text-animate { -webkit-animation:bounceInDown 1s 1.2s ease both;}
/* animate */
@-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)}
}
@-webkit-keyframes lightImgChange{
0%{ background-image:url(../images/light1.png);}
20%{ background-image:url(../images/light2.png);}
40%{ background-image:url(../images/light1.png);}
60%{ background-image:url(../images/light2.png);}
80%{ background-image:url(../images/light1.png);}
100%{ background-image:url(../images/light2.png);}
}
@-webkit-keyframes rotateIn{
0%{-webkit-transform:scale(2);
-webkit-transform-origin:center center;
-webkit-transform:rotate(-200deg);
opacity:0}
100%{-webkit-transform:scale(1);
-webkit-transform-origin:center center;
-webkit-transform:rotate(0);
opacity:1}
}
@-webkit-keyframes fadeInUp{
0%{opacity:0;
-webkit-transform:translateY(20px)}
100%{opacity:1;
-webkit-transform:translateY(0)}
}
/* answers */
.answers { width: 100%; height: 0; background:url(../images/answersBg.jpg) top center no-repeat; background-size:100% 100%; position: absolute; top: 0; left: 0; overflow:hidden; display:none;}
.answersLight { width: 100%; height: 100%; background:url(../images/answersLight.png) top center no-repeat; background-size:100% 100%; position: absolute; top: 0; left: 0;}
.answers h3 { width: 92%; height:auto; padding:0 4%; font-size: 0.45rem; line-height: 0.5rem; text-align: center; font-weight: bold; color: #000;}
.answers p { width: 90%; height:auto; padding:0 5%; font-size: 0.4rem; line-height: 0.55rem; text-align: center; font-weight: bold; color: #f00;}
.answers p img { width:auto; height: 1.6rem;}
.answersClose { width: 20%; height: 11%; background:url(../images/ansersClose.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 1%; left: 82%;}
.answersLight-animate { -webkit-animation:flash 1.6s .2s ease infinite;}
@-webkit-keyframes flash{
0%,50%,100%{opacity: 1;}
25%,75%{opacity: 0;}
}
/* fail */
.fail { width: 100%; height: 100%; background:url(../images/failBg.jpg) top center no-repeat; background-size:100% 100%; position: absolute; top: 0; left: 0;  display: none;}
.fail-img { width: 74%; height: 50%; background:url(../images/fail_img.png) top center no-repeat; background-size:100% 100%; position: absolute; top: 20.9%; left: 13%;}
.fail-text { width: 28%; height: 11%; background:url(../images/fail_text.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 71.2%; left: 36%;opacity:0;}
.onceMore { width: 26%; height: 12%; background:url(../images/onceMore.png) top center no-repeat; background-size:auto 100%; position: absolute; top: 85.1%; left: 39%;}
.onceMore a { display: block; width: 100%; height: 100%;}
/*.icon-strawberry3 { top: 4.9%; left: 75%;}*/

.fail-img-animate { -webkit-animation:bounceInUp 1s .2s ease both;}
.fail-text-animate { -webkit-animation:fadeInUp 1s 1s ease both;}
.onceMore-animate { -webkit-animation:pulse 1s .2s ease infinite;}
@-webkit-keyframes bounceInUp{
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)}
}
@-webkit-keyframes pulse{
0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}