body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: "Microsoft YaHei";
}

.page1 #fireworkCanvas {
  width: 640px;
  height: 1400px;
  z-index: 2;
}

.page7 canvas,
.page7 .posterimg {
  width: 640px;
  height: 1238px;

}

.page7 .posterimg {
  position: fixed;
  z-index: 2;
}

.page7 .btn-retry {
  z-index: 3;
}

#notification_area {
  z-index: 20000;
  padding: 0;
  margin: 0;
}

.notify_center {
  background: #1E211F;
}

.notification {
  clear: left;
  float: left;
  list-style: none;
}

.notification iframe {
  border: 0;
}

.notification iframe body {
  margin: 0;
}

.notify_content {
  float: left;
  background: #1E211F;
  color: #eee;
  padding: 20px;
  border-radius: 5px;
  opacity: .7;
  max-width: 450px;
  font-size: 30px;
}

.wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}

.wrap-inner {
  position: absolute;
  overflow-y: scroll;
  overflow-x: hidden;
  left: 0;
  width: 640px;
  height: 100%;
  top: 0;
  transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
}

.bg {
  background-size: 100% 100%;
}

.page {
  /* top: 50%;
  transform: translate(0, -50%); */
  overflow: unset;
  display: none;
}

.point {
  animation: point 1.5s linear infinite;
  -webkit-animation: point 1.5s linear infinite;
}

.cloud {
  animation: cloud 5s linear infinite;
  -webkit-animation: cloud 5s linear infinite;
}

.page1 .light {
  animation: point 2s linear infinite;
  -webkit-animation: point 2s linear infinite;
}

.page2 .water {
  animation: water 1.5s ease-out infinite;
  -webkit-animation: water 1.5s ease-out infinite;
}

.page2 .boat {
  animation: boat 1s linear infinite;
  -webkit-animation: boat 1s linear infinite;
}

.page3 .cloud2 {
  animation: cloud2 5s linear infinite;
  -webkit-animation: cloud2 5s linear infinite;
}

@keyframes cloud2 {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  50% {
    transform: translateY(-65px);
    opacity: 1;
  }

  90%,
  100% {
    transform: translateY(-130px);
    opacity: 0;
  }
}

@keyframes boat {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-3px, 2px);
  }
}

@keyframes water {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(20px, -10px);
  }
}

@keyframes cloud {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  50% {
    transform: translateY(50%);
    opacity: 1;
  }

  90%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@-webkit-keyframes cloud {
  0% {
    -webkit-transform: translateY(100%);
    opacity: 0;
  }

  50% {
    -webkit-transform: translateY(50%);
    opacity: 1;
  }

  90%,
  100% {
    -webkit-transform: translateY(0);
    opacity: 0;
  }
}

@keyframes light {

  0%,
  60%,
  100% {
    opacity: 0;
  }

  10%,
  50% {
    opacity: 1;
  }
}

@-webkit-keyframes light {

  0%,
  60%,
  100% {
    opacity: 0;
  }

  10%,
  50% {
    opacity: 1;
  }
}

@keyframes point {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

@-webkit-keyframes point {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}