@charset "UTF-8";

/*----------------------------------------------------
  01.keyframes
----------------------------------------------------*/
@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeBack {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    z-index: -1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

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

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translate(0, -70px);
  }

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

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

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

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

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

@keyframes scaleDown {
  0% {
    opacity: 0;
    transform: scale(1.5);
  }

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

@keyframes scaleUp {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

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

@keyframes bounce {
  from {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  20%,
  53%,
  to {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0) scaleY(1.05);
  }

  80% {
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, -4px, 0) scaleY(1.02);
  }
}

@keyframes bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: translate3d(0, -1000px, 0) scaleY(3);
  }

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0) scaleY(0.9);
  }

  75% {
    transform: translate3d(0, -10px, 0) scaleY(0.95);
  }

  90% {
    transform: translate3d(0, 5px, 0) scaleY(0.985);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;

    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn2 {
  0% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }

  72% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }

  75% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }

  85% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(0.8, 0.8, 0.8);
  }

  90% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  95% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  to {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes fadeInTopRight {
  from {
    opacity: 0;
    transform: translate3d(20%, -20%, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-30%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(30%, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.effect {
  opacity: 0;
}

.effect_on.scaleUp {
  --dur: 0.5s;
  --delay: 0s;
  animation: scaleUp var(--dur) ease-in-out var(--delay) 1 normal forwards;
}
@media (max-width: 767px) {
  .effect_on.scaleUp {
    --dur: 0.3s !important;
    --delay: 0s !important;
    animation: scaleUp var(--dur) ease-in-out 0 1 normal forwards;
  }
}

.effect_on.bounce {
  animation: bounce 0.5s ease 0s 1 normal forwards;
}

.effect_on.fadeInDown {
  --dur: 1s;
  --delay: 0s;
  animation: fadeInDown var(--dur) ease-out var(--delay) 1 normal forwards;
}

.effect_on.animate__bounceInDown {
  --dur: 0.5s;
  --delay: 0s;
  animation: bounceInDown var(--dur) ease var(--delay) 1 normal forwards;
}

.bounceIn2 {
  --dur: 0.5s;
  --delay: 0s;
  animation: bounceInDown var(--dur) ease var(--delay) 1 normal forwards, bounceIn2 5s ease-in 4s normal infinite;
}

.bounceIn3 {
  --dur: 0.5s;
  --delay: 0s;
  animation: bounceInDown var(--dur) ease var(--delay) 1 normal forwards, bounceIn2 3s ease-in 2s normal infinite;
}

.effect_on.fadeInUp {
  --dur: 0.6s;
  --delay: 0s;
  animation: fadeInUp var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.effect_on.scaleDown {
  --dur: 0.5s;
  --delay: 0s;
  animation: scaleDown var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.effect_on.scaleUp {
  --dur: 0.5s;
  --delay: 0s;
  animation: scaleUp var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.effect_on.fadeIn {
  --dur: 0.6s;
  --delay: 0.3s;
  animation: fadeIn var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.effect_on.bounceIn {
  --dur: 1s;
  --delay: 0s;
  animation: bounceIn var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.effect_on.fadeInTopRight {
  --dur: 1s;
  --delay: 0s;
  animation: fadeInTopRight var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.effect_on.fadeInLeft {
  --dur: 1s;
  --delay: 0s;
  animation: fadeInLeft var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.effect_on.fadeInRight {
  --dur: 1s;
  --delay: 0s;
  animation: fadeInRight var(--dur) ease-in-out var(--delay) 1 normal forwards;
}

.scaleDownBounceLoop {
  --dur: 0.5s;
  --delay: 0s;
  animation: scaleDown var(--dur) ease var(--delay) 1 normal forwards, bounceIn2 3s ease-in 1s normal infinite;
}