@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-color: #a70d2a;
	background-size: 100% 100%;
	position: relative;
}
/* logo */
.logo {
	width: 28%;
	height: 17.09%;
	background: url(../images/logo_babyfs.png) top right no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 1%;
	left: 0;
	z-index: 999999999;
}
/* homgPage */
.homgPage {
	width: 100%;
	height: 100%;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	/*display: none;*/
}
.homgPage p:nth-child(1) {
	width:50%;
	height: 100%;
	background-color: #d41c3e;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.homeBgLeft-animate {
	-webkit-animation:fadeOutLeft 2s both;
}
@-webkit-keyframes fadeOutLeft{
0%{opacity:1;
-webkit-transform:translateX(0)}
100%{opacity:0;
-webkit-transform:translateX(-800px)}
}
.homgPage p:nth-child(2) {
	width:50%;
	height: 100%;
	background-color: #d41c3e;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
}
.homeBgRight-animate {
	-webkit-animation:fadeOutRight 2s both;
}
@-webkit-keyframes fadeOutRight{
0%{opacity:1;
-webkit-transform:translateX(0)}
100%{opacity:0;
-webkit-transform:translateX(800px)}
}
.homgPage p:nth-child(3) {
	width: 100%;
	height: 100%;
	background: url(../images/homePage_cover.png) top center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}
.homgPage p:nth-child(4) {
	width: 100%;
	height: 17.31%;
	background: url(../images/title.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 20.46%;
	left: 0;
	opacity: 0;
	z-index: 2;
}
.title-animate {
	-webkit-animation:titlePulse 1s 0.8s ease both;
}
@-webkit-keyframes titlePulse{
0%{opacity:0;-webkit-transform:scale(1)}
50%{opacity:1;-webkit-transform:scale(1.5)}
100%{opacity:1;-webkit-transform:scale(1)}
}
.homgPage p:nth-child(5) {
	width: 41%;
	height: 9.97%;
	background: url(../images/btn_start.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 80.35%;
	left: 29.5%;
	opacity: 0;
	z-index: 5;
	-webkit-animation: fadeIn 1s 2s both;
}
@-webkit-keyframes fadeIn{
0%{opacity:0;}
100%{opacity:1;}
}
/* rule */
.rule {
	width: 100%;
	height: 100%;
	background: url(../images/rule.jpg) top center no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 6;
	display: none;
}
.rule p {
	width: 19.73%;
	height: 9.97%;
	background: url(../images/btn_go.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 87.1%;
	left: 40.5%;
}
/* hand */
.hand {
	display: block;
	width: 100%;
	height: 32.75%;
	background: url(../images/Hand.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 81.4%;
	left: 0;
	z-index: 13;
	display: none;
}
/* part */
.part {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;
	display: none;
}
.part p:nth-child(1) {
	width: 31%;
	height: 23.38%;
	background: url(../images/cards_red.png) top left no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 42.5%;
	left: 12.8%;
	z-index: 12;
	opacity: 0;
}
.part p:nth-child(2) {
	width: 31%;
	height: 23.38%;
	background: url(../images/cards_back.png) top right no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 42.5%;
	right: 12.8%;
	z-index: 12;
	opacity: 0;
}
.cardsLeft-animate {
	-webkit-animation: rotateInDownL 1.2s .2s both;
}
.cardsRight-animate {
	-webkit-animation: rotateInDownR 1.2s .2s both;
}
@-webkit-keyframes rotateInDownL{
	0% {
		opacity:0;
		-webkit-transform-origin:center center;
		-webkit-transform: translate(100px,500px) rotate(360deg);
	}
	100% {
		opacity:1;
		-webkit-transform-origin:center center;
		-webkit-transform: translate(0) rotate(0);
	}
}
@-webkit-keyframes rotateInDownR{
	0% {
		opacity:0;
		-webkit-transform-origin:center center;
		-webkit-transform: translate(-100px,500px) rotate(-360deg);
	}
	100% {
		opacity:1;
		-webkit-transform-origin:center center;
		-webkit-transform: translate(0) rotate(0);
	}
}
.part p img {
	width: auto;
	height: 100%;
	position: absolute;
	top: 0;
}
.part p:nth-child(1) img {
	left: 0;
}
.part p:nth-child(2) img {
	right: 0;
}
/* hint */
.hint {
	width: 100%;
	height: 35.9%;
	background: url(../images/hind_cards.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: -5%;
	left: 0;
	z-index: 99;
	opacity: 0;
}
.hind-animate {
	-webkit-animation:bounceInDown 1s 3s ease-in-out both;
}
@-webkit-keyframes bounceInDown {
	0% {
		opacity:0;
		-webkit-transform:translateY(-1000px);
	}
	60% {
		opacity:1;
		-webkit-transform:translateY(10px);
	}
	80% {
		opacity:1;
		-webkit-transform:translateY(-30px);
	}
	100% {
		opacity:1;
		-webkit-transform:translateY(0);
	}
}
.hint em {
	display: block;
	width: 100%;
	height: 44%;
	background-image: ;
	background-position: top center;
	background-repeat: no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 45%;
	left: 0;
	opacity: 0;
}
.hintCards-show {
	-webkit-animation: fadeIn 1s 4.4s both;
}
/* right */
.right {
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9999;
	display: none;
}
.right span {
	display: block;
	position: absolute;
}
.right span:nth-child(1) {
	width: 100%;
	height: 100%;
	background: url(../images/right.png) center center no-repeat;
	background-size: 100% 100%;
	top: 0;
	left: 0;
}
/*.right span:nth-child(2) {
	width: 59%;
	height: 7.72%;
	background: url(../images/next.png) center center no-repeat;
	background-size: 100% 100%;
	top: 83.2%;
	left: 20.5%;
	display:none;
}*/
.right-animate {
	-webkit-animation:pulseRight 1s .6s ease both;
}
@-webkit-keyframes pulseRight{
0%{opacity:0;-webkit-transform:scale(0.3)}
40%{-webkit-transform:scale(1.6)}
80%{-webkit-transform:scale(0.8)}
90%{-webkit-transform:scale(1.2)}
100%{opacity:1;-webkit-transform:scale(1)}
}
/* wrong */
.wrong {
	width: 19%;
	height: 9.82%;
	background: url(../images/wrongFace.png) top center no-repeat;
	background-size: auto 100%;
	position: absolute;
	top: 70%;
	left: 40.5%;
	z-index: 999;
	display: none;
}
/* sharePage */
.sharePage {
	width:100%;
	height: 100%;
	background:url(../images/share_bg.jpg) top center no-repeat;
	background-size:100% 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:999999;
	display: none;
}
.sharePage span:nth-child(1) {
	display: block;
	width:26%;
	height: 13%;
	background:url(../images/share_arrow.png) top center no-repeat;
	background-size:auto 100%;	
	position:absolute;
	top:1.5%;
	right:0%;
}
.share-arrow-animate {
	-webkit-animation:fadeInUp01 1.4s .1s ease infinite;
}
@-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)}
}
.sharePage p:nth-child(2) {
	width: 53%;
	height: 28.93%;
	position: absolute;
	top: 45%;
	left: 28%;
}
.sharePage p:nth-child(2) img {
	width: auto;
	height: 100%;
}
.onceMore {
	width:56%;
	height:10.11%;
	background:url(../images/btn_onceMore.png) top center no-repeat;
	background-size:auto 100%;
	position:absolute;
	top:88%;
	left:20.5%;
}
.sharePage-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)}
}