@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes downUp {
  from {
    opacity: 0;
    transform: translate3d(0, 2rem, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
@keyframes downUp2 {
  0%,
  60%,
  75%,
  90%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, 500%, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -8px, 0);
  }
  75% {
    opacity: 1;
    transform: translate3d(0, 4px, 0);
  }
  90% {
    opacity: 1;
    transform: translate3d(0, -2px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.active.page1 .mid-box .elm-types {
  animation: downUp 0.3s linear 0.6s 1 normal forwards;
}
.active.page1 .elm-btns {
  animation: fadeIn 0.5s linear 1s 1 normal forwards;
}
.active.page1 .elm-logo {
  animation: fadeIn 0.3s linear 0s 1 normal forwards;
}
.active.page2 .mid-box .elm-music {
  animation: downUp 0.3s linear 0.6s 1 normal forwards;
}
.active.page2 .mid-box .elm-note {
  animation: downUp 0.3s linear 0.7s 1 normal forwards;
}
.active.page3 .mid-box .elm-game {
  animation: downUp 0.3s linear 0.6s 1 normal forwards;
}
.active.page3 .mid-box .elm-smile {
  animation: downUp 0.3s linear 0.7s 1 normal forwards;
}
.active.page3 .mid-box .elm-fear {
  animation: downUp 0.3s linear 0.8s 1 normal forwards;
}
.active.page4 .mid-box .elm-micro {
  animation: downUp 0.3s linear 0.6s 1 normal forwards;
}
.active.page4 .mid-box .elm-game {
  animation: downUp 0.3s linear 0.7s 1 normal forwards;
}
.active.page5 .mid-box .elm-soap {
  animation: downUp 0.3s linear 0.6s 1 normal forwards;
}
.active.page5 .mid-box .elm-bomb {
  animation: downUp 0.3s linear 0.7s 1 normal forwards;
}
.active.page5 .mid-box .elm-friend {
  animation: downUp 0.3s linear 0.8s 1 normal forwards;
}
.active.page5 .mid-box .elm-love {
  animation: downUp 0.3s linear 0.9s 1 normal forwards;
}
.active.page6 .mid-box .elm-love {
  animation: downUp 0.3s linear 0.6s 1 normal forwards;
}
.active.page6 .mid-box .elm-mouth {
  animation: downUp 0.3s linear 0.7s 1 normal forwards;
}
.active.page6 .mid-box .elm-tab {
  animation: downUp 0.3s linear 0.8s 1 normal forwards;
}
.active.page6 .page-info {
  animation: fadeIn 0.4s linear 1s 1 normal forwards;
}
.active.page1 .mid-box .elm-center,
.active.page2 .mid-box .elm-center,
.active.page3 .mid-box .elm-center,
.active.page4 .mid-box .elm-center,
.active.page5 .mid-box .elm-center,
.active.page6 .mid-box .elm-center {
  animation: downUp 0.3s linear 0.3s 1 normal forwards;
}
.active.page1 .elm-tit,
.active.page2 .elm-tit,
.active.page3 .elm-tit,
.active.page4 .elm-tit,
.active.page5 .elm-tit,
.active.page6 .elm-tit {
  animation: downUp 0.5s linear 0s 1 normal forwards;
}
.active.page1 .elm-info,
.active.page2 .elm-info,
.active.page3 .elm-info,
.active.page4 .elm-info,
.active.page5 .elm-info,
.active.page6 .elm-info {
  animation: fadeIn 0.5s linear 0.5s 1 normal forwards;
}
.active.page1 .elm-download,
.active.page2 .elm-download,
.active.page3 .elm-download,
.active.page4 .elm-download,
.active.page5 .elm-download,
.active.page6 .elm-download {
  animation: fadeIn 0.5s linear 0.8s 1 normal forwards;
}