@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;
}
/* page1 */
.swiper-slide1 {
  background:#9bc100 url(../images/storyImg1.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
.home {
  width: 100%;
  height: 100%;
  background:#9bc100 url(../images/storyImg0.jpg) center center no-repeat;
  background-size:100% auto;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-flip {
  width:20%;
  height: 11%;
  background:url(../images/btn_flip.png) top center no-repeat;
  background-size:auto 100%;
  position: absolute;
  bottom: 20px;
  left: 72%;
  -webkit-animation:pulse 1.2s .2s ease infinite;
}
@-webkit-keyframes pulse{
0%{-webkit-transform:scale(1)}
50%{-webkit-transform:scale(1.1)}
100%{-webkit-transform:scale(1)}
}
/* page2 */
.swiper-slide2 {
  background:#9bc100 url(../images/storyImg2.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page3 */
.swiper-slide3 {
  background:#9bc100 url(../images/storyImg3.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page4 */
.swiper-slide4 {
  background:#9bc100 url(../images/storyImg4.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page5 */
.swiper-slide5 {
  background:#9bc100 url(../images/storyImg5.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page6 */
.swiper-slide6 {
  background:#9bc100 url(../images/storyImg6.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page7 */
.swiper-slide7 {
  background:#9bc100 url(../images/storyImg7.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page8 */
.swiper-slide8 {
  background:#9bc100 url(../images/storyImg8.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page9 */
.swiper-slide9 {
  background:#9bc100 url(../images/storyImg9.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page10 */
.swiper-slide10 {
  background:#9bc100 url(../images/storyImg10.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page11 */
.swiper-slide11 {
  background:#9bc100 url(../images/storyImg11.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page12 */
.swiper-slide12 {
  background:#9bc100 url(../images/storyImg12.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page13 */
.swiper-slide13 {
  background:#9bc100 url(../images/storyImg13.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page14 */
.swiper-slide14 {
  background:#9bc100 url(../images/storyImg14.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page15 */
.swiper-slide15 {
  background:#9bc100 url(../images/storyImg15.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}
/* page16 */
.swiper-slide16 {
  background:#9bc100 url(../images/storyImg16.jpg) center center no-repeat;
  background-size:100% auto;
  position: relative;
}


.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;
}

.player-button {
  display:block;
  position:absolute;
  z-index:10000;
  top:2%;
  right:0;
  width:20%;
  height:5.7%;
  background:url(../images/music.png) top center no-repeat;
  background-size:auto 100%;
  cursor:pointer;
}
.player-button-animate {
  -webkit-animation: music_disc 4s linear infinite;
}
@-webkit-keyframes music_disc {
0% { -webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}