@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(-40%, 0, 0);
 }

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

@keyframes fadeInRight {
 from {
  opacity: 0;
  transform: translate3d(40%, 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;
}

.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.5s;
 --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: 1s;
 --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;
}


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