@charset "utf-8";
/* CSS Document */
#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;
}

.swiper-container {
	width:100%;
	height:100%;
	background-color:#999;
	overflow:hidden;
}
/* page0 */
.swiper-slide1 {
	background:url(../images/bg.jpg) top center no-repeat;
	background-size:100% 100%;
	position: relative;
}
.rule {
	width:100%;
	height: 100%;
	background:url(../images/rule.png) top center no-repeat;
	background-size:100% 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:11;
}
.start {
	width:42%;
	height:12%;
	background:url(../images/btn_start.png) top center no-repeat;
	background-size:auto 100%;
	position:absolute;
	top:79.4%;
	left:29%;
}
.number {
	width:100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow:hidden;
}
.number p {
	width: 32%;
	height: 26%;
	text-align: center;
	-webkit-tap-highlight-color:rgba(255,255,255,0);
	position:absolute;
}
.number p img {
	width: auto;
	height: 100%;
}
.number p.number5 {
	top:65%;
	left:9%;
}
.number p.number3 {
	top:5%;
	left:7%;
}
.number p.number2 {
	top:75%;
	left:62%;
}
.number p.number4 {
	top:15%;
	left:65%;
}
.number p.number1 {
	top:40%;
	left:35%;
}

.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: 28%;
	height: 17.09%;
	background:url(../images/logo_babyfs.png) top center no-repeat;
	background-size:auto 100%;	
	top:1%;
	left:1%;
}
.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:50%;
	height:11%;
	background:url(../images/btn_onceMore.png) top center no-repeat;
	background-size:auto 100%;
	position:absolute;
	top:76%;
	left:25%;
}
.clearance-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)}
}
.p-flash {
	-webkit-animation:flash .8s .1s ease both;
	/*-webkit-animation: turn .1s both;*/
}
@-webkit-keyframes flash{
2%,50%,100%{opacity: 1;}
25%,75%{opacity: 0;}
}
.p-shark {
	-webkit-animation:bounce 1s .2s ease both;
	/*-webkit-animation: turn .1s both;*/
}
@-webkit-keyframes bounce{
0%,20%,50%,80%,100%{-webkit-transform:translateY(0)}
40%{-webkit-transform:translateY(-30px)}
60%{-webkit-transform:translateY(-15px)}
}