/*------------------- 3.5. Animation -------------------*/
.ripple-animation, .play-btn:after, .play-btn:before {
    animation-duration: var(--ripple-ani-duration);
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-name: ripple;
  }
  
  @keyframes ripple {
    0% {
      transform: scale(1);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    100% {
      transform: scale(2.1);
      opacity: 0;
    }
  }
  .movingX {
    animation: movingX 8s linear infinite;
  }
  
  @keyframes movingX {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(50px);
    }
    100% {
      transform: translateX(0);
    }
  }
  .moving {
    animation: moving 8s linear infinite;
  }
  
  @keyframes moving {
    0% {
      transform: translateX(0);
    }
    50% {
      transform: translateX(-50px);
    }
    100% {
      transform: translateX(0);
    }
  }
  .jump {
    animation: jumpAni 7s linear infinite;
  }
  
  .jump1 {
    animation: jumpAni 6s linear infinite;
  }
  
  .jump2 {
    animation: jumpAni 5s linear infinite;
  }
  
  .jump3 {
    animation: jumpAni 4s linear infinite;
  }
  
  @keyframes jumpAni {
    0% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-30px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .jump-reverse {
    animation: jumpReverseAni 7s linear infinite;
  }
  
  @keyframes jumpReverseAni {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(30px);
    }
    100% {
      transform: translateY(0);
    }
  }
  .spin {
    animation: spin 15s linear infinite;
  }
  
  .spin-slow {
    animation: spin 50s linear infinite;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes animate-positive {
    0% {
      width: 0;
    }
    100% {
      width: var(--progress-width);
    }
  }
  .scroll {
    animation: scroll 60s linear infinite;
    -webkit-animation: scroll 60s linear infinite;
  }
  
  .scroll2 {
    animation: scroll2 60s linear infinite;
    -webkit-animation: scroll2 60s linear infinite;
  }
  
  @keyframes scroll {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  @keyframes scroll2 {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-200%);
    }
  }
  .wave-anim {
    width: 105px;
    height: 69px;
    background-repeat: repeat;
    background-size: auto;
    animation: wave 70s linear infinite;
    -webkit-animation: wave 70s linear infinite;
  }
  
  @keyframes wave {
    0% {
      background-position: top left;
    }
    100% {
      background-position: top left -2000px;
    }
  }
  .rotate360 {
    animation: rotate360 10s linear infinite;
    -webkit-animation: rotate360 10s linear infinite;
  }
  
  @keyframes rotate360 {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(-360deg);
      -webkit-transform: rotate(-360deg);
      -moz-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
      -o-transform: rotate(-360deg);
    }
  }
  .img-shine {
    position: relative;
    overflow: hidden;
  }
  .img-shine:after {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: "";
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    transform: skewX(-20deg);
    opacity: 0;
  }
  .img-shine:hover:after {
    animation: imgShine 1s;
    opacity: 1;
  }
  
  @keyframes imgShine {
    100% {
      left: 125%;
    }
  }
  @keyframes stickyAni {
    0% {
      transform: translate3d(0, -40px, 0) scaleY(0.8);
      opacity: 0.7;
    }
    100% {
      transform: translate3d(0, 0, 0) scaleY(1);
      opacity: 1;
    }
  }
  .moveAround {
    animation: moveAround 200s linear infinite;
    -webkit-animation: moveAround 200s linear infinite;
  }
  
  @keyframes moveAround {
    0% {
      transform: translate(-100%, -100%) translate(-300px, 80px);
      -webkit-transform: translate(-100%, -100%) translate(-300px, 80px);
      -moz-transform: translate(-100%, -100%) translate(-300px, 80px);
      -ms-transform: translate(-100%, -100%) translate(-300px, 80px);
      -o-transform: translate(-100%, -100%) translate(-300px, 80px);
    }
    25% {
      transform: translate(50%, -60%) translate(1900px, 300px);
      -webkit-transform: translate(50%, -60%) translate(1900px, 300px);
      -moz-transform: translate(50%, -60%) translate(1900px, 300px);
      -ms-transform: translate(50%, -60%) translate(1900px, 300px);
      -o-transform: translate(50%, -60%) translate(1900px, 300px);
    }
    50% {
      transform: translate(-80%, -80%) translate(-150px, 0px);
      -webkit-transform: translate(-80%, -80%) translate(-150px, 0px);
      -moz-transform: translate(-80%, -80%) translate(-150px, 0px);
      -ms-transform: translate(-80%, -80%) translate(-150px, 0px);
      -o-transform: translate(-80%, -80%) translate(-150px, 0px);
    }
    75% {
      transform: translate(50%, 50%) translate(1160px, 550px);
      -webkit-transform: translate(50%, 50%) translate(1160px, 550px);
      -moz-transform: translate(50%, 50%) translate(1160px, 550px);
      -ms-transform: translate(50%, 50%) translate(1160px, 550px);
      -o-transform: translate(50%, 50%) translate(1160px, 550px);
    }
    100% {
      transform: translate(100%, 100%) translate(-800px, -50px);
      -webkit-transform: translate(100%, 100%) translate(-800px, -50px);
      -moz-transform: translate(100%, 100%) translate(-800px, -50px);
      -ms-transform: translate(100%, 100%) translate(-800px, -50px);
      -o-transform: translate(100%, 100%) translate(-800px, -50px);
    }
  }
  .moveAround2 {
    animation: moveAround2 160s linear infinite;
    -webkit-animation: moveAround2 160s linear infinite;
  }
  
  @keyframes moveAround2 {
    0% {
      transform: translate(30%, 60%) translate(1450px, 500px);
      -webkit-transform: translate(30%, 60%) translate(1450px, 500px);
      -moz-transform: translate(30%, 60%) translate(1450px, 500px);
      -ms-transform: translate(30%, 60%) translate(1450px, 500px);
      -o-transform: translate(30%, 60%) translate(1450px, 500px);
    }
    25% {
      transform: translate(-50%, -60%) translate(-100px, -290px);
      -webkit-transform: translate(-50%, -60%) translate(-100px, -290px);
      -moz-transform: translate(-50%, -60%) translate(-100px, -290px);
      -ms-transform: translate(-50%, -60%) translate(-100px, -290px);
      -o-transform: translate(-50%, -60%) translate(-100px, -290px);
    }
    50% {
      transform: translate(-50%, 0%) translate(150px, 0px);
      -webkit-transform: translate(-50%, 0%) translate(150px, 0px);
      -moz-transform: translate(-50%, 0%) translate(150px, 0px);
      -ms-transform: translate(-50%, 0%) translate(150px, 0px);
      -o-transform: translate(-50%, 0%) translate(150px, 0px);
    }
    75% {
      transform: translate(50%, -50%) translate(1160px, -50px);
      -webkit-transform: translate(50%, -50%) translate(1160px, -50px);
      -moz-transform: translate(50%, -50%) translate(1160px, -50px);
      -ms-transform: translate(50%, -50%) translate(1160px, -50px);
      -o-transform: translate(50%, -50%) translate(1160px, -50px);
    }
    100% {
      transform: translate(50%, 50%) translate(-80px, 50px);
      -webkit-transform: translate(50%, 50%) translate(-80px, 50px);
      -moz-transform: translate(50%, 50%) translate(-80px, 50px);
      -ms-transform: translate(50%, 50%) translate(-80px, 50px);
      -o-transform: translate(50%, 50%) translate(-80px, 50px);
    }
  }
  .moveAround3 {
    animation: moveAround3 120s linear infinite;
    -webkit-animation: moveAround3 120s linear infinite;
  }
  
  @keyframes moveAround3 {
    0% {
      transform: translate(-50%, -50%) translate(400px, 300px);
      -webkit-transform: translate(-50%, -50%) translate(400px, 300px);
      -moz-transform: translate(-50%, -50%) translate(400px, 300px);
      -ms-transform: translate(-50%, -50%) translate(400px, 300px);
      -o-transform: translate(-50%, -50%) translate(400px, 300px);
    }
    25% {
      transform: translate(50%, -60%) translate(1900px, -300px);
      -webkit-transform: translate(50%, -60%) translate(1900px, -300px);
      -moz-transform: translate(50%, -60%) translate(1900px, -300px);
      -ms-transform: translate(50%, -60%) translate(1900px, -300px);
      -o-transform: translate(50%, -60%) translate(1900px, -300px);
    }
    50% {
      transform: translate(-50%, 0%) translate(-150px, 0px);
      -webkit-transform: translate(-50%, 0%) translate(-150px, 0px);
      -moz-transform: translate(-50%, 0%) translate(-150px, 0px);
      -ms-transform: translate(-50%, 0%) translate(-150px, 0px);
      -o-transform: translate(-50%, 0%) translate(-150px, 0px);
    }
    75% {
      transform: translate(50%, 50%) translate(160px, 50px);
      -webkit-transform: translate(50%, 50%) translate(160px, 50px);
      -moz-transform: translate(50%, 50%) translate(160px, 50px);
      -ms-transform: translate(50%, 50%) translate(160px, 50px);
      -o-transform: translate(50%, 50%) translate(160px, 50px);
    }
    100% {
      transform: translate(50%, 50%) translate(-200px, 200px);
      -webkit-transform: translate(50%, 50%) translate(-200px, 200px);
      -moz-transform: translate(50%, 50%) translate(-200px, 200px);
      -ms-transform: translate(50%, 50%) translate(-200px, 200px);
      -o-transform: translate(50%, 50%) translate(-200px, 200px);
    }
  }
  .moveAround4 {
    animation: moveAround4 200s linear infinite;
    -webkit-animation: moveAround4 200s linear infinite;
  }
  
  @keyframes moveAround4 {
    0% {
      transform: translate(50%, -50%) translate(500px, 300px);
      -webkit-transform: translate(50%, -50%) translate(500px, 300px);
      -moz-transform: translate(50%, -50%) translate(500px, 300px);
      -ms-transform: translate(50%, -50%) translate(500px, 300px);
      -o-transform: translate(50%, -50%) translate(500px, 300px);
    }
    25% {
      transform: translate(50%, 60%) translate(-100px, -300px);
      -webkit-transform: translate(50%, 60%) translate(-100px, -300px);
      -moz-transform: translate(50%, 60%) translate(-100px, -300px);
      -ms-transform: translate(50%, 60%) translate(-100px, -300px);
      -o-transform: translate(50%, 60%) translate(-100px, -300px);
    }
    50% {
      transform: translate(50%, 0%) translate(150px, 0px);
      -webkit-transform: translate(50%, 0%) translate(150px, 0px);
      -moz-transform: translate(50%, 0%) translate(150px, 0px);
      -ms-transform: translate(50%, 0%) translate(150px, 0px);
      -o-transform: translate(50%, 0%) translate(150px, 0px);
    }
    75% {
      transform: translate(50%, 50%) translate(760px, 550px);
      -webkit-transform: translate(50%, 50%) translate(760px, 550px);
      -moz-transform: translate(50%, 50%) translate(760px, 550px);
      -ms-transform: translate(50%, 50%) translate(760px, 550px);
      -o-transform: translate(50%, 50%) translate(760px, 550px);
    }
    100% {
      transform: translate(50%, 50%) translate(-800px, 350px);
      -webkit-transform: translate(50%, 50%) translate(-800px, 350px);
      -moz-transform: translate(50%, 50%) translate(-800px, 350px);
      -ms-transform: translate(50%, 50%) translate(-800px, 350px);
      -o-transform: translate(50%, 50%) translate(-800px, 350px);
    }
  }
  @keyframes characters {
    0%, 75%, 100% {
      opacity: 0;
      transform: rotateY(-90deg);
    }
    25%, 50% {
      opacity: 1;
      transform: rotateY(0deg);
    }
  }
  .scalein.as-animated {
    --animation-name: scalein;
  }
  
  .slidetopleft.as-animated {
    --animation-name: slidetopleft;
  }
  
  .slidebottomright.as-animated {
    --animation-name: slidebottomright;
  }
  
  .slideinleft.as-animated {
    --animation-name: slideinleft;
  }
  
  .slideinright.as-animated {
    --animation-name: slideinright;
  }
  
  .slideinup.as-animated {
    --animation-name: slideinup;
  }
  
  .slideindown.as-animated {
    --animation-name: slideindown;
  }
  
  .rollinleft.as-animated {
    --animation-name: rollinleft;
  }
  
  .rollinright.as-animated {
    --animation-name: rollinright;
  }
  
  .scalein,
  .slidetopleft,
  .slidebottomright,
  .slideinleft,
  .slideinright,
  .slideindown,
  .slideinup,
  .rollinleft,
  .rollinright {
    opacity: 0;
    animation-fill-mode: both;
    animation-iteration-count: 1;
    animation-duration: 1s;
    animation-delay: 0.3s;
    animation-name: var(--animation-name);
  }
  
  .as-animated {
    opacity: 1;
  }
  
  @keyframes slideinup {
    0% {
      opacity: 0;
      transform: translateY(70px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes slideinright {
    0% {
      opacity: 0;
      transform: translateX(70px);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slideindown {
    0% {
      opacity: 0;
      transform: translateY(-70px);
    }
    100% {
      transform: translateY(0);
    }
  }
  @keyframes slideinleft {
    0% {
      opacity: 0;
      transform: translateX(-70px);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slidebottomright {
    0% {
      opacity: 0;
      transform: translateX(100px) translateY(100px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  @keyframes slidetopleft {
    0% {
      opacity: 0;
      transform: translateX(-100px) translateY(-100px);
    }
    100% {
      transform: translateX(0) translateY(0);
    }
  }
  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
    0% {
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-top-color: transparent;
      border-left-color: transparent;
    }
    75% {
      border-top-color: #fff;
      border-left-color: #fff;
      border-right-color: #fff;
      border-bottom-color: transparent;
    }
    100% {
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-top-color: transparent;
      border-left-color: transparent;
    }
  }
  .bg-anime-scratch {
    animation: scratch 4s linear infinite;
    overflow: hidden;
  }
  
  @keyframes scratch {
    0% {
      height: 0;
    }
    70% {
      height: 158px;
    }
    100% {
      height: 158px;
    }
  }
  @keyframes shine {
    0% {
      left: -100px;
    }
    60% {
      left: 100%;
    }
    to {
      left: 100%;
    }
  }
  .fadein,
  .scalein,
  .slidetopleft,
  .slidebottomright,
  .slideinleft,
  .slideinright,
  .slideindown,
  .slideinup,
  .rollinleft,
  .rollinright {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 1.3s;
    animation-delay: 0.3s;
    animation-name: var(--animation-name);
  }
  
  .swiper-slide-active .fadein {
    --animation-name: fadein;
  }
  
  .swiper-slide-active .scalein {
    --animation-name: scalein;
  }
  
  .swiper-slide-active .slidetopleft {
    --animation-name: slidetopleft;
  }
  
  .swiper-slide-active .slidebottomright {
    --animation-name: slidebottomright;
  }
  
  .swiper-slide-active .slideinleft {
    --animation-name: slideinleft;
  }
  
  .swiper-slide-active .slideinright {
    --animation-name: slideinright;
  }
  
  .swiper-slide-active .slideinup {
    --animation-name: slideinup;
  }
  
  .swiper-slide-active .slideindown {
    --animation-name: slideindown;
  }
  
  .swiper-slide-active .rollinleft {
    --animation-name: rollinleft;
  }
  
  .swiper-slide-active .rollinright {
    --animation-name: rollinright;
  }
  
  @keyframes fadein {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes scalein {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.3);
    }
  }
  @keyframes slideinup {
    0% {
      opacity: 0;
      transform: translateY(100px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slideinright {
    0% {
      opacity: 0;
      transform: translateX(180px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes slideindown {
    0% {
      opacity: 0;
      transform: translateY(-100px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @keyframes slideinleft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
  @keyframes slidebottomright {
    0% {
      opacity: 0;
      transform: translateX(120px) translateY(120px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0);
    }
  }
  @keyframes slidetopleft {
    0% {
      opacity: 0;
      transform: translateX(-100px) translateY(-100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0) translateY(0);
    }
  }