.page1_dialog1 {
  opacity: 0;
  transform: translateX(-100px);
}

.swiper-slide-active .page1_dialog1 {
  transform: none;
  opacity: 1;
  transition: transform 1s ease 3s,
    opacity 1s ease 3s;
}

.page1_dialog2 {
  opacity: 0;
  transform: translateX(100px);
}

.swiper-slide-active .page1_dialog2 {
  transform: none;
  opacity: 1;
  transition: transform 1s ease 1s,
    opacity 1s ease 1s;
}

.page1_dialog3 {
  opacity: 0;
  transform: translateX(100px);
}

.swiper-slide-active .page1_dialog3 {
  transform: none;
  opacity: 1;
  transition: transform 1s ease 2s,
    opacity 1s ease 2s;
}

.page1_wave img {
  opacity: 0;
}

.swiper-slide-active .page1_wave img:nth-child(1) {
  animation: page1_wave1 3s linear infinite;
}

.swiper-slide-active .page1_wave img:nth-child(2) {
  animation: page1_wave2 3s linear infinite;
}

.swiper-slide-active .page1_wave img:nth-child(3) {
  animation: page1_wave3 3s linear infinite;
}

.swiper-slide-active .page1_wave img:nth-child(4) {
  animation: page1_wave4 3s linear infinite;
}

.swiper-slide-active .page1_wave img:nth-child(5) {
  animation: page1_wave5 3s linear infinite;
}

@keyframes page1_wave1 {
  from, 20% {
    opacity: 0;
  }
  25%, to {
    opacity: 1;
  }
}

@keyframes page1_wave2 {
  from, 30% {
    opacity: 0;
  }
  35%, to {
    opacity: 1;
  }
}

@keyframes page1_wave3 {
  from, 40% {
    opacity: 0;
  }
  45%, to {
    opacity: 1;
  }
}

@keyframes page1_wave4 {
  from, 50% {
    opacity: 0;
  }
  55%, to {
    opacity: 1;
  }
}

@keyframes page1_wave5 {
  from, 60% {
    opacity: 0;
  }
  65%, to {
    opacity: 1;
  }
}

/* .page2_txt1 {
  opacity: 0;
  transform: translateY(-100px);
}

.page2_txt2 {
  opacity: 0;
  transform: translateY(-100px);
}

.swiper-slide-active .page2_txt1 {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease .6s, transform 1s ease .6s;
}

.swiper-slide-active .page2_txt2 {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease 1.2s, transform 1s ease 1.2s;
} */

@keyframes shake{
  0%, 100%{
    transform:translateX(0)
  }
  10%, 30%, 50%, 70%, 90%{
    transform:translateX(-10px)
  }
  20%, 40%, 60%, 80%{
    transform:translateX(10px)
  }
}

.swiper-slide-active .page3_wave img:nth-child(1) {
  animation: shake 11s linear infinite;
}

.swiper-slide-active .page3_wave img:nth-child(2) {
  animation: shake 7s linear infinite;
}

.swiper-slide-active .page3_wave img:nth-child(3) {
  animation: shake 17s linear infinite;
}

.page4_dialog1 {
  opacity: 0;
  transform: translateX(-50px);
}

.page4_dialog2 {
  opacity: 0;
  transform: translateX(50px);
}

.page4_dialog3 {
  opacity: 0;
  transform: translateX(-50px);
}

.page4_dialog4 {
  opacity: 0;
  transform: translateX(50px);
}

.swiper-slide-active .page4_dialog1 {
  opacity: 1;
  transform: none;
  transition: all 2s ease .5s;
}

.swiper-slide-active .page4_dialog2 {
  opacity: 1;
  transform: none;
  transition: all 2s ease 2s;
}

.swiper-slide-active .page4_dialog3 {
  opacity: 1;
  transform: none;
  transition: all 2s ease 3.5s;
}

.swiper-slide-active .page4_dialog4 {
  opacity: 1;
  transform: none;
  transition: all 2s ease 5s;
}

.page4_name h6 {
  opacity: 0;
}

.swiper-slide-active .page4_name h6:nth-child(1) {
  animation: page4_name 6s linear infinite;
}

.swiper-slide-active .page4_name h6:nth-child(2) {
  animation: page4_name 6s linear 1.5s infinite;
}

.swiper-slide-active .page4_name h6:nth-child(3) {
  animation: page4_name 6s linear 3s infinite;
}

.swiper-slide-active .page4_name h6:nth-child(4) {
  animation: page4_name 6s linear 4.5s infinite;
}

@keyframes page4_name {
  from {
    opacity: 0;
  }
  5%, 25% {
    opacity: 1;
  }
  30%, to {
    opacity: 0;
  }
}

.page5_btn1,
.page5_btn2 {
  opacity: 1;
}

.page5_btn1_active,
.page5_btn2_active {
  opacity: 0;
}

.active .page5_btn1,
.active .page5_btn2 {
  opacity: 0;
}

.active .page5_btn1_active,
.active .page5_btn2_active {
  opacity: 1;
  animation: page5_btn_active 2s ease infinite;
}

.active #page5_btn1:hover,
.active #page5_btn2:hover {
  /* opacity: .8; */
  filter: brightness(1.1);
  cursor: pointer;
}

.play .page5_wave1 {
  filter: none;
}

.play .page5_wave2 {
  filter: none;
}

.play .page5_wave3 {
  filter: none;
}

.play .page5_btn1,
.play .page5_btn2 {
  opacity: 0;
}

.play .page5_btn1_active,
.play .page5_btn2_active {
  opacity: 1!important;
  /* animation: page5_btn_active 2s ease infinite; */
}

.page5_after {
  opacity: 0;
  transform: translateY(-50px);
}

.page5_after.show {
  opacity: 1;
  transform: none;
  transition: all 1.5s ease;
}

@keyframes page5_btn_active {
  from, to {
    opacity: 1;
    transform: scale3d(1,1,1);
  }
  50% {
    transform: scale3d(1.15,1.15,1);
  }
}

.page6_wave1 div::after {
  transform: scale3d(0,0,1);
}

.page6_wave2 div::after {
  transform: scale3d(0,0,1);
}

.swiper-slide-active .page6_wave1 div:nth-child(1)::after {
  animation: page6_wave 2s ease-out infinite, 
    page6_wave1_color 4s linear infinite;
}

.swiper-slide-active .page6_wave1 div:nth-child(2)::after {
  animation: page6_wave 2s ease-out .5s infinite,
    page6_wave1_color 4s linear infinite;
}

.swiper-slide-active .page6_wave1 div:nth-child(3)::after {
  animation: page6_wave 2s ease-out 1s infinite,
  page6_wave1_color 4s linear infinite;
}

.swiper-slide-active .page6_wave1 div:nth-child(4)::after {
  animation: page6_wave 2s ease-out 1.5s infinite,
  page6_wave2_color 4s linear infinite;
}

.swiper-slide-active .page6_wave2 div:nth-child(1)::after {
  animation: page6_wave 2s ease-out infinite,
  page6_wave2_color 4s linear infinite;
}

.swiper-slide-active .page6_wave2 div:nth-child(2)::after {
  animation: page6_wave 2s ease-out .5s infinite,
  page6_wave2_color 4s linear infinite;
}

.swiper-slide-active .page6_wave2 div:nth-child(3)::after {
  animation: page6_wave 2s ease-out 1s infinite,
  page6_wave2_color 4s linear infinite;
}

.swiper-slide-active .page6_wave2 div:nth-child(4)::after {
  animation: page6_wave 2s ease-out 1.5s infinite,
  page6_wave2_color 4s linear infinite;
}

.page6_name h6 {
  opacity: 0;
}

.swiper-slide-active .page6_name h6:first-child {
  animation: page6_name 4s linear infinite;
}

.swiper-slide-active .page6_name h6:last-child {
  animation: page6_name 4s linear 2s infinite;
}

@keyframes page6_wave {
  0% {
    transform: scale(0) translate3d(0, 0, 0);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1) translate3d(0, 0, 0);
  }
}

@keyframes page6_wave1_color {
  0%, 0.1%, 50% {
    background: radial-gradient(
      farthest-corner at center center, 
      rgba(255, 0, 5, 0.24) 0%, 
      rgba(255, 0, 5, 0.24) 70%,
      rgba(255, 0, 5, 0) 100%
    );
  }
  50.1%, 99.9%, 100% {
    background: radial-gradient(
      farthest-corner at center center,
      rgba(0, 152, 253, 0.24) 0%,
      rgba(0, 152, 253, 0.24) 70%,
      rgba(0, 152, 253, 0) 100%
    );
  }
}

@keyframes page6_wave2_color {
  0%, 0.1%, 50% {
    background: radial-gradient(
      farthest-corner at center center, 
      rgba(215, 215, 215, 0.24) 0%,
      rgba(215, 215, 215,0.24) 70%, 
      rgba(215, 215, 215, 0) 100%
    );
  }
  50.1%, 99.9%, 100% {
    background: radial-gradient(
        farthest-corner at center center,
        rgba(0, 152, 253, 0.24) 0%,
        rgba(0, 152, 253, 0.24) 70%,
        rgba(0, 152, 253, 0) 100%
    );
  }
}

@keyframes page6_name {
  from, 0.1%, 49.9% {
    opacity: 1;
  }
  50%, 99.9%, to {
    opacity: 0;
  }
}

.page8_logo img {
  opacity: 0;
}

.swiper-slide-active .page8_logo img {
  animation-name: page8_logo;
  animation-duration: 1.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

.swiper-slide-active .page8_logo10 {
  animation-delay: .3s;
}

.swiper-slide-active .page8_logo9 {
  animation-delay: .4s;
}

.swiper-slide-active .page8_logo8 {
  animation-delay: .5s;
}

.swiper-slide-active .page8_logo7 {
  animation-delay: .6s;
}

.swiper-slide-active .page8_logo6 {
  animation-delay: .7s;
}

.swiper-slide-active .page8_logo5 {
  animation-delay: .8s;
}

.swiper-slide-active .page8_logo4 {
  animation-delay: .9s;
}

.swiper-slide-active .page8_logo3 {
  animation-delay: 1s;
}

.swiper-slide-active .page8_logo2 {
  animation-delay: 1.1s;
}

.swiper-slide-active .page8_logo1 {
  animation-delay: 1.2s;
}

@keyframes page8_logo {
  0% {
    transform: scale(-1);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.page9_dot {
  transform-origin: 28px 102px;
  transform: translate3d(-540px, -80px, 0) rotateZ(40deg);
  opacity: 0;
}

.swiper-slide-active .page9_dot {
  opacity: 1;
  animation: page9_dot 6s linear 1s forwards;
}

@keyframes page9_dot {
  0% {
    transform: translate3d(-540px, -80px, 0) rotateZ(40deg);
  }
  14% {
    transform: translate3d(-360px, -110px, 0) rotateZ(40deg);
  }
  28% {
    transform: translate3d(-360px, -110px, 0) rotateZ(140deg);
  }
  42% {
    transform: translate3d(-390px, 30px, 0) rotateZ(140deg);
  }
  56% {
    transform: translate3d(-390px, 30px, 0) rotateZ(60deg);
  }
  70% {
    transform: translate3d(-30px, 110px, 0) rotateZ(60deg);
  }
  84% {
    transform: translate3d(-30px, 110px, 0) rotateZ(0deg);
  }
  98%, to {
    transform: translate3d(0, 0, 0) rotateZ(0deg);
  }
}

.page9_wifi img {
  opacity: 0;
}

.swiper-slide-active .page9_wifi img:nth-child(1) {
  animation: page9_wifi 2s linear .5s infinite;
}

.swiper-slide-active .page9_wifi img:nth-child(2) {
  animation: page9_wifi 2s linear 1s infinite;
}

.swiper-slide-active .page9_wifi img:nth-child(3) {
  animation: page9_wifi 2s linear 1.5s infinite;
}

@keyframes page9_wifi {
  from, 25% {
    opacity: 0;
  }
  25.1%, 50% {
    opacity: 1;
  }
  50.1%, to {
    opacity: 0;
  }
}

/* .page10_title {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
} */

.page10_txt {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
}

/* .swiper-slide-active .page10_title {
  opacity: 1;
  transform: none;
  transition: all 2s ease .5s;
} */

.swiper-slide-active .page10_txt {
  opacity: 1;
  transform: none;
  transition: all 2s ease .5s;
}

/* .page11_title {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
} */

.page11_txt1 {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
}

.page11_txt2 {
  opacity: 0;
  transform: translate3d(0, -40px, 0);
}

/* .swiper-slide-active .page11_title {
  opacity: 1;
  transform: none;
  transition: all 2s ease .5s;
} */

.swiper-slide-active .page11_txt1 {
  opacity: 1;
  transform: none;
  transition: all 2s ease .5s;
}

.swiper-slide-active .page11_txt2 {
  opacity: 1;
  transform: none;
  transition: all 2s ease 1.5s;
}

.swiper-slide-active .arrow {
  animation: arrow 1s ease infinite;
}

@keyframes arrow {
  from, to {
    transform: none;
  }
  50% {
    transform: translate3d(0, -1.5vw, 0);
  }
}