body {
  background-color: #FFFDED;
  width: 100%;
}

#contents .page {
  position: relative;
  margin: 0 auto 80px;
  width: 320px;
  overflow: hidden;
}
#contents .page .text {
  opacity: 0;
}
#contents .page.show .text {
  opacity: 1;
}

#page1 {
  height: 290px;
}
#page1 div {
  position: absolute;
}
#page1 .base {
  z-index: 0;
}
#page1 .text {
  z-index: 5;
}
#page1 .t1 {
  top: 56px;
  left: 38px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page1 .t2 {
  top: 72px;
  left: 41px;
  -webkit-transition: opacity 2s linear 2s;
  transition: opacity 2s linear 2s;
}
#page1 .baseCloud {
  top: 102px;
  left: 0;
  z-index: 3;
}
#page1 .luna {
  top: 202px;
  left: 85px;
  z-index: 2;
  -webkit-transform-origin: -35px 18px;
  -ms-transform-origin: -35px 18px;
  transform-origin: -35px 18px;
  -webkit-transition: -webkit-transform 2s ease 3s;
  transition: transform 2s ease 3s;
  -webkit-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  transform: rotate(40deg);
}
#page1 .lunaBg {
  top: 192px;
  left: 62px;
  z-index: 1;
}
#page1 .main {
  top: 110px;
  left: 156px;
  z-index: 5;
}
#page1 .blink1, #page1 .blink2 {
  top: 97px;
  left: 145px;
}
#page1 .blink2 {
  opacity: 0;
}
#page1 .star {
  z-index: 5;
}
#page1 .s1 {
  top: 110px;
  left: 0;
}
#page1 .s2 {
  top: 93px;
  left: 17px;
}
#page1 .s3 {
  top: 107px;
  left: 114px;
}
#page1.show .s1 {
  -webkit-animation: p1-star 4s linear 0s infinite;
  animation: p1-star 4s linear 0s infinite;
}
#page1.show .s2 {
  -webkit-animation: p1-star 4s linear 1.2s infinite;
  animation: p1-star 4s linear 1.2s infinite;
}
#page1.show .s3 {
  -webkit-animation: p1-star 4s linear 2.4s infinite;
  animation: p1-star 4s linear 2.4s infinite;
}
#page1.show .blink1 {
  -webkit-animation: p1-blink 4s ease 0s infinite;
  animation: p1-blink 4s ease 0s infinite;
}
#page1.show .blink2 {
  -webkit-animation: p1-blink 4s ease -2s infinite;
  animation: p1-blink 4s ease -2s infinite;
}
#page1.show .luna {
  -webkit-transform: rotate(0);
  -ms-transform: rotate(0);
  transform: rotate(0);
}

#page2 {
  height: 246px;
}
#page2 div {
  position: absolute;
}
#page2 .base {
  top: 0;
  left: 40px;
  z-index: 0;
}
#page2 .main {
  top: 49px;
  left: 50px;
  z-index: 2;
}
#page2 .text {
  z-index: 5;
}
#page2 .t1 {
  top: 216px;
  left: 20px;
  -webkit-transition: opacity 2s linear 0s;
  transition: opacity 2s linear 0s;
}
#page2 .t2 {
  top: 233px;
  left: 82px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page2 .star {
  z-index: 1;
  opacity: 0;
  top: 0;
  left: 24px;
}
#page2.show .s1 {
  -webkit-animation: p2-fall 5s linear 0s infinite;
  animation: p2-fall 5s linear 0s infinite;
}
#page2.show .s2 {
  -webkit-animation: p2-fall 5s linear 0s infinite;
  animation: p2-fall 5s linear 0s infinite;
}

#page3 {
  height: 250px;
}
#page3 div {
  position: absolute;
}
#page3 .base {
  top: 0;
  left: 40px;
  z-index: 0;
}
#page3 .main {
  top: 47px;
  left: 33px;
  z-index: 2;
}
#page3 .text {
  z-index: 3;
}
#page3 .t1 {
  top: 3px;
  left: 94px;
  -webkit-transition: opacity 2s linear 0s;
  transition: opacity 2s linear 0s;
}
#page3 .t2 {
  top: 20px;
  left: 68px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page3 .t3 {
  top: 218px;
  left: 32px;
  -webkit-transition: opacity 2s linear 2s;
  transition: opacity 2s linear 2s;
}
#page3 .t4 {
  top: 235px;
  left: 36px;
  -webkit-transition: opacity 2s linear 3s;
  transition: opacity 2s linear 3s;
}
#page3 .star {
  z-index: 1;
  opacity: 0;
}
#page3 .s1 {
  top: 23px;
  left: 200px;
}
#page3 .s2 {
  top: 41px;
  left: 90px;
}
#page3 .s3 {
  top: 43px;
  left: 285px;
}
#page3 .s4 {
  top: 165px;
  left: 306px;
}
#page3 .s5 {
  left: 125px;
  top: 175px;
}
#page3 .s6 {
  top: 85px;
  left: 85px;
}
#page3 .s7 {
  top: 0;
  left: 95px;
}
#page3 .s8 {
  top: 205px;
  left: 185px;
}
#page3 .s1 {
  -webkit-animation: shStar 5s ease-out 0s infinite;
  animation: shStar 5s ease-out 0s infinite;
}
#page3 .s2 {
  -webkit-animation: shStar 5s ease-out 1s infinite;
  animation: shStar 5s ease-out 1s infinite;
}
#page3 .s3 {
  -webkit-animation: shStar 5s ease-out 2s infinite;
  animation: shStar 5s ease-out 2s infinite;
}
#page3 .s4 {
  -webkit-animation: shStar 5s ease-out 3s infinite;
  animation: shStar 5s ease-out 3s infinite;
}
#page3 .s5 {
  -webkit-animation: shStar 5s ease-out 4s infinite;
  animation: shStar 5s ease-out 4s infinite;
}
#page3 .s6 {
  -webkit-animation: shStar 5s ease-out 5s infinite;
  animation: shStar 5s ease-out 5s infinite;
}
#page3 .s7 {
  -webkit-animation: shStar 5s ease-out 6s infinite;
  animation: shStar 5s ease-out 6s infinite;
}
#page3 .s8 {
  -webkit-animation: shStar 5s ease-out 7s infinite;
  animation: shStar 5s ease-out 7s infinite;
}

#page4 {
  height: 240px;
}
#page4 div {
  position: absolute;
}
#page4 .base {
  top: 0;
  left: 0;
  z-index: 0;
}
#page4 .main {
  top: 53px;
  left: 67px;
  z-index: 3;
}
#page4 .small {
  top: 142px;
  left: 24px;
  z-index: 1;
}
#page4 .middle {
  top: 45px;
  left: 211px;
  z-index: 1;
}
#page4 .large1 {
  top: 50px;
  left: 44px;
  z-index: 2;
}
#page4 .large2 {
  top: 118px;
  left: 134px;
  z-index: 2;
}
#page4 .text {
  z-index: 4;
}
#page4 .t1 {
  top: 192px;
  left: 40px;
  -webkit-transition: opacity 2s linear 0s;
  transition: opacity 2s linear 0s;
}
#page4 .t2 {
  top: 210px;
  left: 19px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page4 .t3 {
  left: 29px;
  top: 227px;
  -webkit-transition: opacity 2s linear 2s;
  transition: opacity 2s linear 2s;
}
#page4.show .main {
  -webkit-animation: p4-float-1 4s ease-in-out 0s infinite alternate;
  animation: p4-float-1 4s ease-in-out 0s infinite alternate;
}
#page4.show .small {
  -webkit-animation: p4-float-3 4s ease-in-out 0s infinite alternate;
  animation: p4-float-3 4s ease-in-out 0s infinite alternate;
}
#page4.show .middle {
  -webkit-animation: p4-float-3 4s ease-in-out 0s infinite alternate;
  animation: p4-float-3 4s ease-in-out 0s infinite alternate;
}
#page4.show .large1 {
  -webkit-animation: p4-float-2 4s ease-in-out -2s infinite alternate;
  animation: p4-float-2 4s ease-in-out -2s infinite alternate;
}
#page4.show .large2 {
  -webkit-animation: p4-float-2 4s ease-in-out 0s infinite alternate;
  animation: p4-float-2 4s ease-in-out 0s infinite alternate;
}

#page5 {
  height: 230px;
}
#page5 div {
  position: absolute;
}
#page5 .base {
  top: 0;
  left: 0;
  z-index: 0;
}
#page5 .main1 {
  top: 74px;
  left: 121px;
  z-index: 2;
  -webkit-transition: opacity 3s ease 3s;
  transition: opacity 3s ease 3s;
}
#page5 .main2 {
  top: 54px;
  left: 101px;
  z-index: 3;
  opacity: 0;
  -webkit-transition: opacity 3s ease 2s;
  transition: opacity 3s ease 2s;
}
#page5 .text {
  z-index: 4;
}
#page5 .t1 {
  top: 199px;
  left: 33px;
  -webkit-transition: opacity 2s linear 0s;
  transition: opacity 2s linear 0s;
}
#page5 .t2 {
  top: 216px;
  left: 44px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page5 .cloud1 {
  top: 53px;
  left: 67px;
  z-index: 1;
}
#page5 .cloud2 {
  top: 85px;
  left: 205px;
  z-index: 1;
}
#page5 .s1 {
  opacity: 0;
  top: 30px;
  left: 24px;
}
#page5 .s2 {
  opacity: 0;
  top: 29px;
  left: 43px;
}
#page5.show .s1 {
  -webkit-animation: p5-6-7-blink 4s ease 0s infinite;
  animation: p5-6-7-blink 4s ease 0s infinite;
}
#page5.show .s2 {
  -webkit-animation: p5-6-7-blink 4s ease -2s infinite;
  animation: p5-6-7-blink 4s ease -2s infinite;
}
#page5.show .cloud1 {
  -webkit-animation: p5-6-floatV 3s ease-in-out 0s infinite alternate;
  animation: p5-6-floatV 3s ease-in-out 0s infinite alternate;
}
#page5.show .cloud2 {
  -webkit-animation: p5-6-floatH 4s ease-in-out 0s infinite alternate;
  animation: p5-6-floatH 4s ease-in-out 0s infinite alternate;
}
#page5.show .main1 {
  opacity: 0;
}
#page5.show .main2 {
  opacity: 1;
}

#page6 {
  height: 236px;
}
#page6 div {
  position: absolute;
}
#page6 .base {
  top: 0;
  left: 0;
  z-index: 0;
}
#page6 .main1 {
  top: 60px;
  left: 111px;
  z-index: 3;
  -webkit-transition: opacity 3s ease 3s;
  transition: opacity 3s ease 3s;
}
#page6 .main2 {
  top: 60px;
  left: 111px;
  z-index: 4;
  opacity: 0;
  -webkit-transition: opacity 3s ease 2s;
  transition: opacity 3s ease 2s;
}
#page6 .text {
  z-index: 5;
}
#page6 .t1 {
  top: 188px;
  left: 60px;
  -webkit-transition: opacity 2s linear 0s;
  transition: opacity 2s linear 0s;
}
#page6 .t2 {
  top: 205px;
  left: 30px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page6 .t3 {
  top: 223px;
  left: 11px;
  -webkit-transition: opacity 2s linear 2s;
  transition: opacity 2s linear 2s;
}
#page6 .cloud1 {
  top: 83px;
  left: 53px;
  z-index: 2;
}
#page6 .cloud2 {
  top: 37px;
  left: 222px;
  z-index: 2;
}
#page6 .star {
  z-index: 1;
}
#page6 .s1 {
  top: 44px;
  left: 48px;
}
#page6 .s2 {
  top: 24px;
  left: 86px;
}
#page6.show .s1 {
  -webkit-animation: p5-6-7-blink 4s ease 0s infinite;
  animation: p5-6-7-blink 4s ease 0s infinite;
}
#page6.show .s2 {
  -webkit-animation: p5-6-7-blink 4s ease -2s infinite;
  animation: p5-6-7-blink 4s ease -2s infinite;
}
#page6.show .cloud1 {
  -webkit-animation: p5-6-floatV 3s ease-in-out 0s infinite alternate;
  animation: p5-6-floatV 3s ease-in-out 0s infinite alternate;
}
#page6.show .cloud2 {
  -webkit-animation: p5-6-floatH 4s ease-in-out 0s infinite alternate;
  animation: p5-6-floatH 4s ease-in-out 0s infinite alternate;
}
#page6.show .main1 {
  opacity: 0;
}
#page6.show .main2 {
  opacity: 1;
}

#page7 {
  height: 244px;
}
#page7 div {
  position: absolute;
}
#page7 .base {
  top: 0;
  left: 0;
  z-index: 0;
}
#page7 .text {
  z-index: 5;
}
#page7 .t1 {
  top: 195px;
  left: 30px;
  -webkit-transition: opacity 2s linear 0s;
  transition: opacity 2s linear 0s;
}
#page7 .t2 {
  top: 212px;
  left: 36px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page7 .cloud {
  top: 37px;
  left: 188px;
  z-index: 2;
}
#page7 .star {
  opacity: 0;
  z-index: 1;
}
#page7 .s1 {
  top: 22px;
  left: 215px;
}
#page7 .s2 {
  top: 29px;
  left: 68px;
}
#page7.show .cloud {
  -webkit-animation: p7-cloud 8s linear 0s infinite alternate;
  animation: p7-cloud 8s linear 0s infinite alternate;
}
#page7.show .s1 {
  -webkit-animation: p5-6-7-blink 4s ease 0s infinite;
  animation: p5-6-7-blink 4s ease 0s infinite;
}
#page7.show .s2 {
  -webkit-animation: p5-6-7-blink 4s ease -2s infinite;
  animation: p5-6-7-blink 4s ease -2s infinite;
}

#page8 {
  height: 254px;
}
#page8 div {
  position: absolute;
}
#page8 .base {
  top: 0;
  left: 0;
  z-index: 0;
}
#page8 .main {
  top: 21px;
  left: 84px;
  z-index: 4;
}
#page8 .text {
  z-index: 5;
}
#page8 .t1 {
  top: 221px;
  left: 43px;
  -webkit-transition: opacity 2s linear 0s;
  transition: opacity 2s linear 0s;
}
#page8 .t2 {
  top: 239px;
  left: 44px;
  -webkit-transition: opacity 2s linear 1s;
  transition: opacity 2s linear 1s;
}
#page8 .cloud {
  top: 162px;
  left: 210px;
  z-index: 2;
}
#page8 .star {
  z-index: 1;
}
#page8 .s1 {
  top: 24px;
  left: 24px;
}
#page8 .s2 {
  top: 24px;
  left: 24px;
}
#page8.show .main {
  -webkit-animation: p8-flight-main 2s linear 0s infinite alternate;
  animation: p8-flight-main 2s linear 0s infinite alternate;
}
#page8.show .cloud {
  -webkit-animation: p8-flight-cloud 3s ease 0s infinite alternate;
  animation: p8-flight-cloud 3s ease 0s infinite alternate;
}
#page8.show .s1 {
  -webkit-animation: p8-stars 2s linear 0s infinite;
  animation: p8-stars 2s linear 0s infinite;
}
#page8.show .s2 {
  -webkit-animation: p8-stars 2s linear -1s infinite;
  animation: p8-stars 2s linear -1s infinite;
}

@-webkit-keyframes p1-blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes p1-blink {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@-webkit-keyframes p1-star {
  0% {
    opacity: 1;
  }

  12.5% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
@keyframes p1-star {
  0% {
    opacity: 1;
  }

  12.5% {
    opacity: 0;
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}
@-webkit-keyframes shStar {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 100px, 0);
    transform: translate3d(-100px, 100px, 0);
  }
}
@keyframes shStar {
  0% {
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100px, 100px, 0);
    transform: translate3d(-100px, 100px, 0);
  }
}
@-webkit-keyframes p2-fall {
  0% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    opacity: 0;
  }
}
@keyframes p2-fall {
  0% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(0, 100px, 0);
    transform: translate3d(0, 100px, 0);
    opacity: 0;
  }
}
@-webkit-keyframes p4-float-1 {
  100% {
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
  }
}
@keyframes p4-float-1 {
  100% {
    -webkit-transform: translate3d(0, -8px, 0);
    transform: translate3d(0, -8px, 0);
  }
}
@-webkit-keyframes p4-float-2 {
  100% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes p4-float-2 {
  100% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}
@-webkit-keyframes p4-float-3 {
  100% {
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
  }
}
@keyframes p4-float-3 {
  100% {
    -webkit-transform: translate3d(0, -2px, 0);
    transform: translate3d(0, -2px, 0);
  }
}
@-webkit-keyframes p5-6-floatV {
  100% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }
}
@keyframes p5-6-floatV {
  100% {
    -webkit-transform: translate3d(0, -3px, 0);
    transform: translate3d(0, -3px, 0);
  }
}
@-webkit-keyframes p5-6-floatH {
  100% {
    -webkit-transform: translate3d(-3px, 0, 0);
    transform: translate3d(-3px, 0, 0);
  }
}
@keyframes p5-6-floatH {
  100% {
    -webkit-transform: translate3d(-3px, 0, 0);
    transform: translate3d(-3px, 0, 0);
  }
}
@-webkit-keyframes p5-6-7-blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes p5-6-7-blink {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@-webkit-keyframes p7-cloud {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }

  12.5% {
    -webkit-transform: translate3d(-8.5px, -6px, 0);
    transform: translate3d(-8.5px, -6px, 0);
  }

  25% {
    -webkit-transform: translate3d(-15px, -10px, 0);
    transform: translate3d(-15px, -10px, 0);
  }

  37.5% {
    -webkit-transform: translate3d(-23.5px, -8.5px, 0);
    transform: translate3d(-23.5px, -8.5px, 0);
  }

  50% {
    -webkit-transform: translate3d(-30px, -5px, 0);
    transform: translate3d(-30px, -5px, 0);
  }

  62.5% {
    -webkit-transform: translate3d(-37.5px, -11px, 0);
    transform: translate3d(-37.5px, -11px, 0);
  }

  75% {
    -webkit-transform: translate3d(-45px, -15px, 0);
    transform: translate3d(-45px, -15px, 0);
  }

  87.5% {
    -webkit-transform: translate3d(-52.5px, -13.5px, 0);
    transform: translate3d(-52.5px, -13.5px, 0);
  }

  100% {
    -webkit-transform: translate3d(-60px, -10px, 0);
    transform: translate3d(-60px, -10px, 0);
  }
}
@keyframes p7-cloud {
  0% {
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate3d(0px, 0, 0);
  }

  12.5% {
    -webkit-transform: translate3d(-8.5px, -6px, 0);
    transform: translate3d(-8.5px, -6px, 0);
  }

  25% {
    -webkit-transform: translate3d(-15px, -10px, 0);
    transform: translate3d(-15px, -10px, 0);
  }

  37.5% {
    -webkit-transform: translate3d(-23.5px, -8.5px, 0);
    transform: translate3d(-23.5px, -8.5px, 0);
  }

  50% {
    -webkit-transform: translate3d(-30px, -5px, 0);
    transform: translate3d(-30px, -5px, 0);
  }

  62.5% {
    -webkit-transform: translate3d(-37.5px, -11px, 0);
    transform: translate3d(-37.5px, -11px, 0);
  }

  75% {
    -webkit-transform: translate3d(-45px, -15px, 0);
    transform: translate3d(-45px, -15px, 0);
  }

  87.5% {
    -webkit-transform: translate3d(-52.5px, -13.5px, 0);
    transform: translate3d(-52.5px, -13.5px, 0);
  }

  100% {
    -webkit-transform: translate3d(-60px, -10px, 0);
    transform: translate3d(-60px, -10px, 0);
  }
}
@-webkit-keyframes p8-flight-main {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(6px, -6px, 0);
    transform: translate3d(6px, -6px, 0);
  }
}
@keyframes p8-flight-main {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(6px, -6px, 0);
    transform: translate3d(6px, -6px, 0);
  }
}
@-webkit-keyframes p8-flight-cloud {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(3px, -3px, 0);
    transform: translate3d(3px, -3px, 0);
  }
}
@keyframes p8-flight-cloud {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(3px, -3px, 0);
    transform: translate3d(3px, -3px, 0);
  }
}
@-webkit-keyframes p8-stars {
  0% {
    -webkit-transform: translate3d(-80px, -80px, 0);
    transform: translate3d(-80px, -80px, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(80px, 80px, 0);
    transform: translate3d(80px, 80px, 0);
    opacity: 0;
  }
}
@keyframes p8-stars {
  0% {
    -webkit-transform: translate3d(-80px, -80px, 0);
    transform: translate3d(-80px, -80px, 0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    -webkit-transform: translate3d(80px, 80px, 0);
    transform: translate3d(80px, 80px, 0);
    opacity: 0;
  }
}