@charset "UTF-8";

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@keyframes turn {
  0% {
    transform: rotate(0deg);
    filter: brightness(1.1);
  }

  100% {
    transform: rotate(-360deg);
    filter: brightness(1);
  }
}

/*------------跑馬燈------------*/
@keyframes scrolltext01 {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scale_light {
  0% {
    transform: translate(-50%, -50%) scale(10);
  }

  100% {
    transform: translate(-50%, -50%) scale(0.1);
  }
}

/*------------跑馬燈反向------------*/
@keyframes scrolltext02 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0%);
  }
}

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

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
@keyframes fadeIn2 {
  0% {
    opacity: 0;
    filter: blur(2);
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.fadeIn2 {
  animation: fadeIn2 0.7s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

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

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUP {
  0% {
    opacity: 0;
    -webkit-transform: translateY(150px);
    -ms-transform: translateY(150px);
    transform: translateY(150px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.fadeInUP {
  -webkit-animation-name: fadeInUP;
  animation-name: fadeInUP;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    -ms-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

.mechaData {
  -webkit-animation-name: mechaData;
  animation-name: mechaData 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}

@keyframes mechaData {
  0% {
    opacity: 0;
    transform: scale(1.3);
  }

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

@keyframes blurfilter {
  0% {
    filter: blur(150px);
    opacity: 0;
    transition: 0.5s;
  }

  100% {
    filter: blur(0);
    opacity: 1;
    transition: 0.5s 0.3s;
  }
}

.blurfilter {
  -webkit-animation-name: blurfilter;
  animation: blurfilter 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes noise-1 {
  0%,
  20%,
  30%,
  40%,
  60%,
  68%,
  70%,
  90% {
    opacity: 0;
  }

  10% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.5;
    left: -6px;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.6;
    left: 2px;
  }
}

@keyframes noise-2 {
  0%,
  20%,
  30%,
  40%,
  60%,
  65%,
  70%,
  90% {
    opacity: 0;
  }

  10% {
    opacity: 0.1;
  }

  50% {
    opacity: 0.5;
    left: 6px;
  }

  80% {
    opacity: 0.3;
  }

  100% {
    opacity: 0.6;
    left: -2px;
  }
}

@keyframes noise {
  0%,
  3%,
  5%,
  42%,
  44%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }

  4.3% {
    opacity: 1;
    transform: scaleY(1.7);
  }

  43% {
    opacity: 1;
    transform: scaleX(1.5);
  }
}

@keyframes noise-3 {
  0%,
  3%,
  5%,
  42%,
  44%,
  100% {
    opacity: 1;
    transform: scaleY(1);
  }

  4.3% {
    opacity: 0.1;
    transform: scaleY(1);
  }

  43% {
    opacity: 1;
    transform: translateX(-15px);
  }
}

@keyframes slotbar {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(1.3);
  }
}
@keyframes slotbar_r {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg) scale(1.15);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg) scale(1.3);
    opacity: 0;
  }
}
@keyframes slotbar_r2 {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg) scale(1.15);
    opacity: 0.3;
  }
  100% {
    transform: rotate(360deg) scale(1.3);
    opacity: 0;
  }
}
@keyframes slotbar_r3 {
  0% {
    transform: rotate(0deg) scale(1.3);
    opacity: 0;
  }
  50% {
    transform: rotate(180deg) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: rotate(360deg) scale(0.8);
    opacity: 0;
  }
}

@keyframes float {
  0% {
    transform: translate3d(0, 0px, 0);
  }

  50% {
    transform: translate3d(0, 6px, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* KV */
@keyframes char_enter {
  0% {
    transform: translateY(55vw) scale(4);
  }

  100% {
    transform: translateY(-10px) scale(1.05);
  }
}
@keyframes char_loop {
  0% {
    transform: translateY(-10px) scale(1.05);
  }

  100% {
    transform: translateY(10px) scale(0.98);
  }
}
@keyframes kv_bg_enter {
  0% {
    background-size: 180%;
    background-position: center 40%;
    filter: brightness(0);
  }

  100% {
    background-size: 115%;
    background-position: center 40%;
    filter: brightness(1);
  }
}
@keyframes kv_bg_loop {
  0% {
    background-size: 115%;
    background-position: center 40%;
  }

  100% {
    background-size: 100%;
    background-position: center 60%;
  }
}
@keyframes kv_bg_enter_m {
  0% {
    background-size: 180%;
    background-position: center 40%;
    filter: brightness(0);
  }

  100% {
    background-size: 100%;
    background-position: center 60%;
    filter: brightness(1);
  }
}
@keyframes kv_bg_loop_m {
  0% {
    background-size: 100%;
    background-position: center 60%;
  }

  100% {
    background-size: 115%;
    background-position: center 40%;
  }
}
@keyframes cloud {
  0% {
    transform: translateX(-150%);
  }

  100% {
    transform: translateX(150%);
  }
}
@keyframes bottom_in {
  0% {
    transform: translateY(80%);
    filter: brightness(0);
  }

  100% {
    transform: translateY(0%);
    filter: brightness(1);
  }
}
@keyframes kv_m {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0px);
  }
}
@keyframes kv_login_txt {
  0% {
    filter: brightness(1);
    transform: translateY(0);
  }
  50% {
    filter: brightness(1.2);
    transform: translateY(2px);
  }
  100% {
    filter: brightness(1);
    transform: translateY(0);
  }
}
@keyframes light {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.4);
  }
  100% {
    filter: brightness(1);
  }
}
@keyframes light2 {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes animationloadingBg {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}