@charset "UTF-8";

.top_fadeIn {
  animation-name: top_fadeIn;
  animation-duration: 0.6s;
  animation-delay: .5s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes top_fadeIn {
  0% {
    transform: scale(0.95);
    opacity: 0;
  }

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

.top_zoomIn {
  animation-name: top_zoomIn;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes top_zoomIn {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }

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

.top_slideInLeft {
  opacity: 0;
  animation-name: top_slideInLeft;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

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

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

.top_slideInRight {
  opacity: 0;
  animation-name: top_slideInRight;
  animation-duration: 1s;
  animation-delay: 1s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes top_slideInRight {
  from {
    transform: translate(20%, 0);
    opacity: 0;
  }

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

.zoomIn {
  animation-name: zoomIn;
  animation-duration: .6s;
  animation-delay: 1.2s;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: rotate(50deg) scale(0.3);
}

@keyframes zoomIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }

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

.zoomOut {
  animation-name: zoomOut;
  animation-duration: 1.4s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes zoomOut {
  0% {
    filter: blur(50px);
    transform: scale(3);
    opacity: 0;
  }

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

.slideInLeft {
  opacity: 0;
  animation-name: slideInLeft;
  animation-duration: .6s;
  animation-delay: 0s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes slideInLeft {
  from {
    transform: translate(-50%, 0);
    opacity: 0;
  }

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

.slideInRight {
  opacity: 0;
  animation-name: slideInRight;
  animation-duration: 1s;
  animation-delay: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes slideInRight {
  from {
    transform: translate(50%, 0);
    opacity: 0;
  }

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

.slideInUP {
  opacity: 1;
  animation-name: slideInUP;
  animation-duration: 0.8s;
  animation-delay: 0.3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

@keyframes slideInUP {
  from {
    transform: translate(0, 50%);
    opacity: 0;
  }

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

.blur {
  filter: blur(50px);
  animation: blur-anime 1.2s linear forwards;
}

@keyframes blur-anime {
  100% {
    filter: blur(0);
  }
}