@charset "utf-8";
/* CSS Document */
.swiper-container {
  width:100%;
  height:100%;
  overflow:hidden;
}
* {
  -webkit-tap-highlight-color:rgba(255,255,255,0);
}
#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;
}
.logo {
  width: 28%;
  height: 17.09%;
  background:url(../images/logo_babyfs.png) top center no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 1%;
  left: 0;
  z-index: 999999;
}
.swiper-slide {
  position: relative;
}
/* page1 */
.swiper-slide1 {
  background: url(../images/animal_bg.jpg) center center no-repeat;
  background-size:100% 100%;
}
.homePage {
  width: 100%;
  height: 100%;
  background: url(../images/homePage.jpg) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*display: none;*/
}
.homePage p:nth-child(1) {
  width: 41%;
  height: 9.59%;
  background: url(../images/btn_start.png) top center no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 82.45%;
  left: 29.5%;
}
.homePage a:nth-child(2) {
  display: block;
  width: 18%;
  height: 9.22%;
  background:url(../images/btn_back2.png) top right no-repeat;
  background-size:auto 100%;
  position: absolute; 
  top: 3%;
  right: 6%;
}
.rule {
  width: 100%;
  height: 100%;
  background: url(../images/rule.jpg) top center no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.rule p:nth-child(1) {
  width: 21%;
  height: 9.97%;
  background: url(../images/btn_go.png) top center no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 84.4%;
  left: 40.5%;
}
/* content */
.content {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.content-animate {
  -webkit-animation: fadeInOut 1.6s infinite;
}
@-webkit-keyframes fadeInOut {
  0% { opacity: 1;}
  50% { opacity: 0.2;}
  100% { opacity: 1;}
}
.content p:nth-child(1) {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.part1-animate {
  -webkit-animation: fadeIn 1s both;
}
.part2-animate {
  -webkit-animation: fadeIn 1s 1s both;
}
.part3-animate {
  -webkit-animation: fadeIn 1s 2s both;
}
.part4-animate {
  -webkit-animation: fadeIn 1s 3s both;
}
.part5-animate {
  -webkit-animation: fadeIn 1s 4s both;
}
@-webkit-keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}
.content1 {
  display: none;
}
.content p:nth-child(1) em {
  display: block;
  width: 33.33%;
  height: 18.74%;
  position: absolute;
}
.content p:nth-child(1) em:nth-child(1) {
  top: 20%;
  left: 0;
}
.content p:nth-child(1) em:nth-child(2) {
  top: 20%;
  left: 33.22%;
  opacity: 0;
}
.content p:nth-child(1) em:nth-child(3) {
  top: 20%;
  left: 66.5%;
}
.content p:nth-child(1) em:nth-child(4) {
  top: 38.7%;
  left: 0;
  opacity: 0;
}
.content p:nth-child(1) em:nth-child(5) {
  top: 38.7%;
  left: 33.22%;
}
.content p:nth-child(1) em:nth-child(6) {
  top: 38.7%;
  left: 66.5%;
  opacity: 0;
}
.content p:nth-child(1) em:nth-child(7) {
  top: 57.3%;
  left: 0;
}
.content p:nth-child(1) em:nth-child(8) {
  top: 57.3%;
  left: 33.22%;
  opacity: 0;
}
.content p:nth-child(1) em:nth-child(9) {
  top: 57.3%;
  left: 66.5%;
  opacity: 0;
}
.content h5:nth-child(2) {
  width: 20%;
  height: 10.64%;
  background-image: url(../images/time5.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 6%;
  right: 6%;
  display: none;
}
.time-animate {
  -webkit-animation: timeImgChange 5s 1s linear both;
}
@-webkit-keyframes timeImgChange {
  0% {
    /*background-image: url(../images/time5.png);*/
  }
  20% {
    background-image: url(../images/time4.png);
  }
  40% {
    background-image: url(../images/time3.png);
  }
  60% {
    background-image: url(../images/time2.png);
  }
  80% {
    background-image: url(../images/time1.png);
  }
  100% {
    background-image: none;
  }
}
.content h6:nth-child(3) {
  width: 20%;
  height: 12%;
  background: url(../images/button.png) top center no-repeat;
  background-size: auto 100%;
  position: absolute;
  bottom: 12%;
  left: 40%;
  z-index: 5;
}
.content p:nth-child(4) {
  width: 100%;
  height: 3.6%;
  background: url(../images/text.png) top center no-repeat;
  background-size: auto 100%;
  position: absolute;
  bottom: 5%;
  left: 0;
  display: none;
}
.content span:nth-child(5) {
  display: block;
  width: 100%;
  height: 72.47%;
  background: url(../images/light.png) top center no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 14%;
  z-index: 0;
  display: none;
  -webkit-animation: rotate360 6s linear infinite;
}
@-webkit-keyframes rotate360 {
  0% { -webkit-transform: rotate(0deg);}
  100% { -webkit-transform: rotate(360deg);}
}
/* content1 */
.content1 p:nth-child(1) em:nth-child(1) {
  background: url(../images/seal_01.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(2) {
  background: url(../images/seal_02.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(3) {
  background: url(../images/seal_03.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(4) {
  background: url(../images/seal_04.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(5) {
  background: url(../images/seal_05.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(6) {
  background: url(../images/seal_06.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(7) {
  background: url(../images/seal_07.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(8) {
  background: url(../images/seal_08.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 p:nth-child(1) em:nth-child(9) {
  background: url(../images/seal_09.png) top center no-repeat;
  background-size: 100% 100%;
}
.content1 span:nth-child(5) {
  left: -9%;
}
/* content2 */
.swiper-slide2 {
  background: url(../images/animal_bg.jpg) center center no-repeat;
  background-size:100% 100%;
}
.content2 p:nth-child(1) em:nth-child(1) {
  background: url(../images/penguin_01.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(2) {
  background: url(../images/penguin_02.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(3) {
  background: url(../images/penguin_03.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(4) {
  background: url(../images/penguin_04.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(5) {
  background: url(../images/penguin_05.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(6) {
  background: url(../images/penguin_06.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(7) {
  background: url(../images/penguin_07.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(8) {
  background: url(../images/penguin_08.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 p:nth-child(1) em:nth-child(9) {
  background: url(../images/penguin_09.png) top center no-repeat;
  background-size: 100% 100%;
}
.content2 span:nth-child(5) {
  left: 0;
}
/* content3 */
.swiper-slide3 {
  background: url(../images/animal_bg.jpg) center center no-repeat;
  background-size:100% 100%;
}
.content3 p:nth-child(1) em:nth-child(1) {
  background: url(../images/crab_01.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(2) {
  background: url(../images/crab_02.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(3) {
  background: url(../images/crab_03.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(4) {
  background: url(../images/crab_04.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(5) {
  background: url(../images/crab_05.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(6) {
  background: url(../images/crab_06.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(7) {
  background: url(../images/crab_07.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(8) {
  background: url(../images/crab_08.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 p:nth-child(1) em:nth-child(9) {
  background: url(../images/crab_09.png) top center no-repeat;
  background-size: 100% 100%;
}
.content3 span:nth-child(5) {
  left: 4%;
}/* content4 */
.swiper-slide4 {
  background: url(../images/animal_bg.jpg) center center no-repeat;
  background-size:100% 100%;
}
.content4 p:nth-child(1) em:nth-child(1) {
  background: url(../images/lobster_01.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(2) {
  background: url(../images/lobster_02.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(3) {
  background: url(../images/lobster_03.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(4) {
  background: url(../images/lobster_04.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(5) {
  background: url(../images/lobster_05.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(6) {
  background: url(../images/lobster_06.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(7) {
  background: url(../images/lobster_07.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(8) {
  background: url(../images/lobster_08.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 p:nth-child(1) em:nth-child(9) {
  background: url(../images/lobster_09.png) top center no-repeat;
  background-size: 100% 100%;
}
.content4 span:nth-child(5) {
  left: -4%;
}
/* end */
.swiper-slide5 { 
  background: url(../images/end_bg.jpg) top center no-repeat;
  background-size: 100% 100%;
}
.end {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.end span, .end em {
  display: block;
  position: absolute;
}
.end span:nth-child(1) {
  width: 17%;
  height: 8.47%;
  background: url(../images/star.png) top left no-repeat;
  background-size: auto 100%;
  top: 51%;
  left: 26%;
  -webkit-transform:rotate(-10deg);
}
.end span:nth-child(2) {
  width: 17%;
  height: 8.47%;
  background: url(../images/star.png) top left no-repeat;
  background-size: auto 100%;
  top: 49.02%;
  left: 43.2%;
}
.end span:nth-child(3) {
  width: 17%;
  height: 8.47%;
  background: url(../images/star.png) top left no-repeat;
  background-size: auto 100%;
  top: 51.49%;
  left: 59.06%;
  -webkit-transform:rotate(15deg);
}
.end em:nth-child(4) {
  width: 20%;
  height: 10.41%;
  background: url(../images/btn_onceMore.png) top center no-repeat;
  background-size: auto 100%;
  bottom: 6%;
  left: 7.5%;
  -webkit-animation:rotate360 3s linear infinite;
}
@-webkit-keyframes rotate360{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
.end em:nth-child(5) {
  width: 30%;
  height: 15%;
  background: url(../images/btn_showShare.png) top left no-repeat;
  background-size: auto 100%;
  top: 2%;
  right: 2%;
}
.showShare-animate {
  -webkit-animation:pulse 1.6s ease infinite;
}
@-webkit-keyframes pulse{
0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
.end a:nth-child(6) {
  display: block;
  width: 18%;
  height: 9.22%;
  background:url(../images/btn_back2.png) top right no-repeat;
  background-size:auto 100%;
  position: absolute; 
  bottom: 6%;
  right: 7.5%;
}
@-webkit-keyframes movement {
  0%{-webkit-transform: translateX(0)}
  30%{-webkit-transform: translateX(3px)}
  60%{-webkit-transform: translateX(0px)}
  100%{-webkit-transform: translateX(-3px)}
}
.star1-animate {
  -webkit-animation:star1Animate 1s .2s ease-out both;
}
.star2-animate {
  -webkit-animation:star2Animate 1s .6s ease-out both;
}
.star3-animate {
  -webkit-animation:star3Animate 1s 1.2s ease-out both;
}
@-webkit-keyframes star1Animate {
  0%{-webkit-transform: translate(-300px,500px)}
  100%{-webkit-transform: translate(0)}
}
@-webkit-keyframes star2Animate {
  0%{-webkit-transform: translate(300px,500px)}
  100%{-webkit-transform: translate(0)}
}
@-webkit-keyframes star3Animate {
  0%{-webkit-transform: translate(500px,500px)}
  100%{-webkit-transform: translate(0)}
}
/* 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: 9999999999;
  display: none;
}
.sharePage em {
  display: block;
  position: absolute;
}
.sharePage p:nth-child(1) {
  width: 53%;
  height: 28.93%;
  position: absolute;
  top: 44.9%;
  left: 23.5%;
  z-index: 2;
}
.sharePage p:nth-child(1) img {
  width: auto;
  height: 100%;
}
.sharePage p:nth-child(2) {
  width: 36%;
  height: 11.84%;
  background: url(../images/btn_share.png) top right no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 2%;
  right: 1%;
  -webkit-animation:fadeInUp01 1.6s ease infinite;
}
.sharePage em:nth-child(3) {
  display: block;
  width: 11%;
  height: 5.24%;
  background: url(../images/close.png) top left no-repeat;
  background-size: auto 100%;
  position: absolute;
  top: 1.5%;
  left: 2.5%;
}
@-webkit-keyframes fadeInUp01{
0%{
-webkit-transform:translateY(-10px)}
50%{
-webkit-transform:translateY(0px)}
100%{
-webkit-transform:translateY(-10px)}
}
.sharePage-animate {
  -webkit-animation:shareSizeChange 1s .2s ease both;
}
@-webkit-keyframes shareSizeChange {
  0%{opacity:1;-webkit-transform:scale(1) translate(0)}
  100%{opacity:0;-webkit-transform:scale(0.3) translate(300px,-1600px)}
}