@charset "UTF-8";



.animated {animation-duration: 1s; animation-fill-mode: both;}
.animated.infinite {animation-iteration-count: infinite;}
.animated.hinge { animation-duration: 2s;}




/* ㅡㅡㅡ바운스(위아래흔들)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounce {animation-name: bounce;}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0);}
  40% {transform: translateY(-30px);}
  60% {transform: translateY(-15px);}
  }




/* ㅡㅡㅡ플래시(깜박거림)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.flash { animation-name: flash;}

@keyframes flash {
  0%, 50%, 100% { opacity: 1;}
  25%, 75% { opacity: 0;}
  }

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



/* ㅡㅡㅡpulse(잠시 크게 확대)ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.pulse {animation-name: pulse;}

@keyframes pulse {
  0% {transform: scale(1); }
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}


/* ㅡㅡㅡ가로로 늘어남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rubberBand {animation-name: rubberBand;}

@keyframes rubberBand {
  0% {transform: scale(1);}
  30% {transform: scaleX(1.25) scaleY(0.75);}
  40% { transform: scaleX(0.75) scaleY(1.25);}
  60% {transform: scaleX(1.15) scaleY(0.85); }
  100% {transform: scale(1);}
}



/* ㅡㅡㅡ좌우 흔들림ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.shake { animation-name: shake; }

@keyframes shake {
  0%, 100% { transform: translateX(0);}
  10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
  20%, 40%, 60%, 80% {transform: translateX(10px);}
}



/* ㅡㅡㅡ위 중심점 기준 흔들림ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.swing {transform-origin: top center; animation-name: swing;}

@keyframes swing {
  20% { transform: rotate(15deg); }
  40% { transform: rotate(-10deg);}
  60% {transform: rotate(5deg);}
  80% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}



/* ㅡㅡㅡ살짝 회전하며 흔들림ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.tada { animation-name: tada; }
@keyframes tada {
  0% {transform: scale(1);}
  10%, 20% {transform: scale(0.9) rotate(-3deg);}
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  100% {transform: scale(1) rotate(0);}
}



/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */



/* ㅡㅡㅡ아래 중심점 기준 흔들림ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.wobble { animation-name: wobble;}

@keyframes wobble {
  0% {transform: translateX(0%);}
  15% {transform: translateX(-25%) rotate(-5deg);}
  30% { transform: translateX(20%) rotate(3deg);}
  45% { transform: translateX(-15%) rotate(-3deg);}
  60% { transform: translateX(10%) rotate(2deg);}
  75% { transform: translateX(-5%) rotate(-1deg);}
  100% {transform: translateX(0%);}
}



/* ㅡㅡㅡ점차 커지며 바운스ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceIn { animation-name: bounceIn;}

@keyframes bounceIn {
  0% {opacity: 0; transform: scale(.2);}
  50% { opacity: 1;  transform: scale(1.05);}
  70% {transform: scale(.9);}
  100% {opacity: 1; transform: scale(1);}
}



/* ㅡㅡㅡ내려오며 바운스ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceInDown {animation-name: bounceInDown;}

@keyframes bounceInDown {
  0% {opacity: 0; transform: translateY(-2000px);}
  60% {opacity: 1;  transform: translateY(30px);}
  80% {transform: translateY(-10px);}
  100% {transform: translateY(0);}
}



/* ㅡㅡㅡ좌측에서 들어오며 바운스ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceInLeft {animation-name: bounceInLeft; }

@keyframes bounceInLeft {
  0% {opacity: 0; transform: translateX(-2000px);}
  60% {opacity: 1; transform: translateX(30px);}
  80% {transform: translateX(-10px);}
  100% { transform: translateX(0);}
}


/* ㅡㅡㅡ우측에서 들어오며 바운스ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceInRight {animation-name: bounceInRight;}

@keyframes bounceInRight {
  0% {opacity: 0; transform: translateX(2000px);}
  60% {opacity: 1; transform: translateX(-30px);}
  80% {transform: translateX(10px);}
  100% {transform: translateX(0);}
}


/* ㅡㅡㅡ올라오며 바운스ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceInUp {animation-name: bounceInUp;}

@keyframes bounceInUp {
  0% {opacity: 0; transform: translateY(2000px);}
  60% {opacity: 1; transform: translateY(-30px);}
  80% {transform: translateY(10px);}
  100% {transform: translateY(0);}
}


/* ㅡㅡㅡ바운스 후 작아지며 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceOut { animation-name: bounceOut;}

@keyframes bounceOut {
  0% {transform: scale(1);}
  25% {transform: scale(.95);}
  50% {opacity: 1; transform: scale(1.1);}
  100% {opacity: 0; transform: scale(.3);}
}


/* ㅡㅡㅡ바운스 아래로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceOutDown { animation-name: bounceOutDown;}

@keyframes bounceOutDown {
  0% {transform: translateY(0);}
  20% {opacity: 1; transform: translateY(-20px);}
  100% { opacity: 0; transform: translateY(2000px);}
}


/* ㅡㅡㅡ바운스 좌측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceOutLeft { animation-name: bounceOutLeft;}

@keyframes bounceOutLeft {
  0% {transform: translateX(0);}
  20% { opacity: 1; transform: translateX(20px);}
  100% {opacity: 0; transform: translateX(-2000px);}
}


/* ㅡㅡㅡ바운스 우측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceOutRight {animation-name: bounceOutRight;}

@keyframes bounceOutRight {
  0% {transform: translateX(0);}
  20% {opacity: 1; transform: translateX(-20px);}
  100% {opacity: 0; transform: translateX(2000px);}
}


/* ㅡㅡㅡ바운스 위로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.bounceOutUp {animation-name: bounceOutUp;}

@keyframes bounceOutUp {
  0% {transform: translateY(0);}
  20% { opacity: 1; transform: translateY(20px);}
  100% {opacity: 0; transform: translateY(-2000px);}
}




/* ㅡㅡㅡ제자리 서서히 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeIn { animation-name: fadeIn;}

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


/* ㅡㅡㅡ살짝 내려오며 서서히 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInDown { animation-name: fadeInDown;}

@keyframes fadeInDown {
  0% { opacity: 0; transform: translateY(-40px);}
  100% { opacity: 1; transform: translateY(0);}
}


/* ㅡㅡㅡ많이 내려오며 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInDownBig { animation-name: fadeInDownBig;}

@keyframes fadeInDownBig {
  0% {opacity: 0;  transform: translateY(-2000px);}
  100% {opacity: 1; transform: translateY(0);}
}


/* ㅡㅡㅡ살짝 좌측에서 서서히 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInLeft {animation-name: fadeInLeft;}

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



/* ㅡㅡㅡ많이 좌측에서 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInLeftBig {animation-name: fadeInLeftBig;}

@keyframes fadeInLeftBig {
  0% {opacity: 0; transform: translateX(-2000px);}
  100% {opacity: 1;  transform: translateX(0);}
}



/* ㅡㅡㅡ살짝 우측에서 서서히 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInRight { animation-name: fadeInRight;}

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



/* ㅡㅡㅡ많이 우측에서 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInRightBig {animation-name: fadeInRightBig;}

@keyframes fadeInRightBig {
  0% {opacity: 0;  transform: translateX(2000px);}
  100% { opacity: 1; transform: translateX(0);}
}



/* ㅡㅡㅡ살짝 아래에서 서서히 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInUp {animation-name: fadeInUp;}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(40px);}
  100% { opacity: 1; transform: translateY(0);}
}


/* ㅡㅡㅡ많이 아래에서 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeInUpBig {animation-name: fadeInUpBig;}

@keyframes fadeInUpBig {
  0% { opacity: 0; transform: translateY(2000px);}
  100% {opacity: 1; transform: translateY(0);}
}


/* ㅡㅡㅡ제자리 서서히 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOut { animation-name: fadeOut;}

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



/* ㅡㅡㅡ아래로 서서히 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutDown {animation-name: fadeOutDown;}

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



/* ㅡㅡㅡ많이 아래로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutDownBig {animation-name: fadeOutDownBig;}

@keyframes fadeOutDownBig {
  0% {opacity: 1; transform: translateY(0);}
  100% {opacity: 0; transform: translateY(2000px);}
}



/* ㅡㅡㅡ좌측으로 서서히 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutLeft {animation-name: fadeOutLeft;}

@keyframes fadeOutLeft {
  0% {opacity: 1; transform: translateX(0);}
  100% { opacity: 0; transform: translateX(-20px);}
}



/* ㅡㅡㅡ많이 좌측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutLeftBig { animation-name: fadeOutLeftBig;}

@keyframes fadeOutLeftBig {
  0% {opacity: 1; transform: translateX(0);}
  100% {opacity: 0;  transform: translateX(-2000px);}
}



/* ㅡㅡㅡ우측으로 서서히 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutRight {animation-name: fadeOutRight;}

@keyframes fadeOutRight {
  0% { opacity: 1; transform: translateX(0);}
  100% { opacity: 0;  transform: translateX(20px);}
}


/* ㅡㅡㅡ많이 우측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutRightBig {animation-name: fadeOutRightBig;}

@keyframes fadeOutRightBig {
  0% {opacity: 1; transform: translateX(0);}
  100% { opacity: 0; transform: translateX(2000px);}
}



/* ㅡㅡㅡ위로 서서히 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutUp {animation-name: fadeOutUp;}

@keyframes fadeOutUp {
  0% {opacity: 1; transform: translateY(0);}
  100% {opacity: 0; transform: translateY(-20px);}
}


/* ㅡㅡㅡ많이 위로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.fadeOutUpBig {animation-name: fadeOutUpBig;}

@keyframes fadeOutUpBig {
  0% {opacity: 1;  transform: translateY(0);}
  100% { opacity: 0;  transform: translateY(-2000px);}
}



.animated.flip {
  backface-visibility: visible;
  animation-name: flip;
}

@keyframes flip {
  0% {
    transform: perspective(400px) translateZ(0) rotateY(-360deg) scale(1);
    animation-timing-function: ease-out;
  }

  40% {
    transform: perspective(400px) translateZ(150px) rotateY(-190deg) scale(1);
    animation-timing-function: ease-out;
  }

  50% {
    transform: perspective(400px) translateZ(150px) rotateY(-170deg) scale(1);
    animation-timing-function: ease-in;
  }

  80% {
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.95);
    animation-timing-function: ease-in;
  }

  100% {
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(1);
    animation-timing-function: ease-in;
  }
}



/* ㅡㅡㅡX 축으로 회전 살짝 기울어지며 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.flipInX {
  backface-visibility: visible !important;
  animation-name: flipInX;
}

@keyframes flipInX {
  0% {transform: perspective(400px) rotateX(90deg);  opacity: 0;}
  40% {transform: perspective(400px) rotateX(-10deg);}
  70% {transform: perspective(400px) rotateX(10deg);}
  100% {transform: perspective(400px) rotateX(0deg); opacity: 1;}
}


/* ㅡㅡㅡY 축으로 회전 ㅡ살짝 기울어지며ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.flipInY {
  backface-visibility: visible !important;
  animation-name: flipInY;
}

@keyframes flipInY {
  0% { transform: perspective(400px) rotateY(90deg); opacity: 0;}
  40% { transform: perspective(400px) rotateY(-10deg);}
  70% { transform: perspective(400px) rotateY(10deg);}
  100% { transform: perspective(400px) rotateY(0deg); opacity: 1;}
}



/* ㅡㅡㅡX 축으로 회전하며 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.flipOutX {
  animation-name: flipOutX;
  backface-visibility: visible !important;
}

@keyframes flipOutX {
  0% {transform: perspective(400px) rotateX(0deg); pacity: 1;}
  100% {transform: perspective(400px) rotateX(90deg); opacity: 0;}
}


/* ㅡㅡㅡY 축으로 회전하며 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.flipOutY {
  backface-visibility: visible !important;
  animation-name: flipOutY;
}

@keyframes flipOutY {
  0% {transform: perspective(400px) rotateY(0deg); opacity: 1;}
  100% {transform: perspective(400px) rotateY(90deg); opacity: 0;}
}


/* ㅡㅡㅡ우측에서 기울어지며 나타남 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.lightSpeedIn {
  animation-name: lightSpeedIn;
  animation-timing-function: ease-out;
}

@keyframes lightSpeedIn {
  0% {transform: translateX(100%) skewX(-30deg); opacity: 0;}
  60% {transform: translateX(-20%) skewX(30deg); opacity: 1;}
  80% {transform: translateX(0%) skewX(-15deg); opacity: 1;}
  100% {transform: translateX(0%) skewX(0deg); opacity: 1;}
}


/* ㅡㅡㅡ기울어지며 우측으로 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.lightSpeedOut {
  animation-name: lightSpeedOut;
  animation-timing-function: ease-in;
}

@keyframes lightSpeedOut {
  0% {transform: translateX(0%) skewX(0deg); opacity: 1;}
  100% {transform: translateX(100%) skewX(-30deg); opacity: 0;}
}



/* ㅡㅡㅡ시계방향 회전하며 나타남 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateIn { animation-name: rotateIn;}

@keyframes rotateIn {
  0% { transform-origin: center center; transform: rotate(-200deg);  opacity: 0;}
  100% {transform-origin: center center; transform: rotate(0);  opacity: 1;}
}


/* ㅡㅡㅡ왼쪽 하단 중심점 기준, 위>아래 회전하며 나타남 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateInDownLeft { animation-name: rotateInDownLeft;}

@keyframes rotateInDownLeft {
  0% {transform-origin: left bottom; transform: rotate(-90deg); opacity: 0;}
  100% {transform-origin: left bottom; transform: rotate(0); opacity: 1;}
}


/* ㅡㅡㅡ오른쪽 하단 중심점 기준 , 위>아래 회전하며 나타남 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateInDownRight { animation-name: rotateInDownRight;}

@keyframes rotateInDownRight {
  0% {transform-origin: right bottom; transform: rotate(90deg); opacity: 0;}
  100% {transform-origin: right bottom; transform: rotate(0); opacity: 1;}
}



/* ㅡㅡㅡ왼쪽 하단 중심점 기준, 아래>위 회전하며 나타남 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateInUpLeft {animation-name: rotateInUpLeft;}

@keyframes rotateInUpLeft {
  0% { transform-origin: left bottom;  transform: rotate(90deg); opacity: 0;}
  100% {transform-origin: left bottom; transform: rotate(0); opacity: 1;}
}



/* ㅡㅡㅡ오른쪽 하단 중심점 기준, 아래>위 회전하며 나타남 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateInUpRight {animation-name: rotateInUpRight;}

@keyframes rotateInUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }
}



/* ㅡㅡㅡ시계방향 회전하며 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateOut { animation-name: rotateOut;}

@keyframes rotateOut {
  0% {
    transform-origin: center center;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: center center;
    transform: rotate(200deg);
    opacity: 0;
  }
}



/* ㅡㅡ왼쪽 하단 중심점 기준, 위>아래 회전하며 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateOutDownLeft {animation-name: rotateOutDownLeft;}
@keyframes rotateOutDownLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}




/* ㅡㅡ오른쪽 하단 중심점 기준, 위>아래 회전하며 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateOutDownRight { animation-name: rotateOutDownRight;}

@keyframes rotateOutDownRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}




/* ㅡㅡ왼쪽 하단 중심점 기준, 아래>위 회전하며 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateOutUpLeft {animation-name: rotateOutUpLeft;}

@keyframes rotateOutUpLeft {
  0% {
    transform-origin: left bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: left bottom;
    transform: rotate(-90deg);
    opacity: 0;
  }
}




/* ㅡ오른쪽 하단 중심점 기준, 아래>위 회전하며 사라짐 ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rotateOutUpRight { animation-name: rotateOutUpRight;}

@keyframes rotateOutUpRight {
  0% {
    transform-origin: right bottom;
    transform: rotate(0);
    opacity: 1;
  }

  100% {
    transform-origin: right bottom;
    transform: rotate(90deg);
    opacity: 0;
  }
}





/* ㅡㅡ위에서 아래로 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideInDown { animation-name: slideInDown;}

@keyframes slideInDown {
  0% {opacity: 0; transform: translateY(-2000px);}
  100% {transform: translateY(0);}
}



/* ㅡㅡ많이 좌측에서 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideInLeft {animation-name: slideInLeft;}

@keyframes slideInLeft {
  0% {opacity: 0; transform: translateX(-2000px);}
  100% { transform: translateX(0);}
}


/* ㅡㅡ많이 우측에서 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideInRight {animation-name: slideInRight;}

@keyframes slideInRight {
  0% { opacity: 0; transform: translateX(2000px);}
  100% {transform: translateX(0);}
}


/* ㅡㅡ많이 좌측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideOutLeft {animation-name: slideOutLeft;}

@keyframes slideOutLeft {
  0% {transform: translateX(0);}
  100% {opacity: 0;  transform: translateX(-2000px); }
}

/* ㅡㅡ많이 우측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideOutRight {
  animation-name: slideOutRight;
}
@keyframes slideOutRight {
  0% {  transform: translateX(0); }
  100% { opacity: 0; transform: translateX(2000px);}
}



/* ㅡㅡ많이 위로 빠르게 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideOutUp { animation-name: slideOutUp;}

@keyframes slideOutUp {
  0% {transform: translateY(0);}
  100% { opacity: 0; transform: translateY(-2000px);}
}




/* ㅡㅡ아래에서 위로 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideInUp {animation-name: slideInUp;}

@keyframes slideInUp {
  0% { opacity: 0;  transform: translateY(2000px);}
  100% {opacity: 1; transform: translateY(0);}
}



/* ㅡㅡ많이 아래로 빠르게 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.slideOutDown {animation-name: slideOutDown;}

@keyframes slideOutDown {
  0% { transform: translateY(0); }
  100% { opacity: 0; transform: translateY(2000px);}
}





/* ㅡㅡ좌측 중심점 기준 떨어지는 효과, 흔들리다 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */

.hinge {animation-name: hinge;}

@keyframes hinge {
  0% {
    transform: rotate(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  20%, 60% {
    transform: rotate(80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  40% {
    transform: rotate(60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
  }

  80% {
    transform: rotate(60deg) translateY(0);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

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




/* ㅡㅡ크게 회전하며 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rollIn {animation-name: rollIn;}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }

  100% {
    opacity: 1;
    transform: translateX(0px) rotate(0deg);
  }
}




/* ㅡㅡ크게 회전하며 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.rollOut { animation-name: rollOut;}

@keyframes rollOut {
  0% {opacity: 1; transform: translateX(0px) rotate(0deg);}
  100% {opacity: 0; transform: translateX(100%) rotate(120deg);}
}





/* ㅡㅡ서서히 확대대며 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomIn { animation-name: zoomIn;}

@keyframes zoomIn {
  0% { opacity: 0;  transform: scale(.3);}
  50% { opacity: 1;}
}




/* ㅡㅡ서서히 확대+내려오며 밀려오듯 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomInDown { animation-name: zoomInDown;}

@keyframes zoomInDown {
  0% {
    opacity: 0;
    transform: scale(.1) translateY(-2000px);
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    transform: scale(.475) translateY(60px);
    animation-timing-function: ease-out;
  }
}




/* ㅡㅡ서서히 확대 좌측에서 날아오듯 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomInLeft {animation-name: zoomInLeft;}


@keyframes zoomInLeft {
  0% {
    opacity: 0;
    transform: scale(.1) translateX(-2000px);
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    transform: scale(.475) translateX(48px);
    animation-timing-function: ease-out;
  }
}



/* ㅡㅡ서서히 확대 우측에서 날아오듯 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomInRight { animation-name: zoomInRight;}

@keyframes zoomInRight {
  0% {
    opacity: 0;
    transform: scale(.1) translateX(2000px);
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    transform: scale(.475) translateX(-48px);
    animation-timing-function: ease-out;
  }
}





/* ㅡㅡ서서히 확대 아래에서 떠오르듯 나타남ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomInUp { animation-name: zoomInUp;}

@keyframes zoomInUp {
  0% {
    opacity: 0;
    transform: scale(.1) translateY(2000px);
    animation-timing-function: ease-in-out;
  }

  60% {
    opacity: 1;
    transform: scale(.475) translateY(-60px);
    animation-timing-function: ease-out;
  }
}




/* ㅡㅡ서서히 작아지며 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomOut {animation-name: zoomOut;}

@keyframes zoomOut {
  0% {opacity: 1; transform: scale(1);}
  50% { opacity: 0; transform: scale(.3);}
  100% { opacity: 0;}
}





/* ㅡㅡ서서히 작아지며 아래로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomOutDown {animation-name: zoomOutDown;}

@keyframes zoomOutDown {
  40% {
    opacity: 1;
    transform: scale(.475) translateY(-60px);
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    transform: scale(.1) translateY(2000px);
    transform-origin: center bottom;
  }
}




/* ㅡㅡ서서히 작아지며 좌측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomOutLeft {animation-name: zoomOutLeft;}

@keyframes zoomOutLeft {
  40% {
    opacity: 1;
    transform: scale(.475) translateX(42px);
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    transform: scale(.1) translateX(-2000px);
    transform-origin: left center;
  }
}



/* ㅡㅡ서서히 작아지며 우측으로 사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomOutRight { animation-name: zoomOutRight;}

@keyframes zoomOutRight {
  40% {
    opacity: 1;
    transform: scale(.475) translateX(-42px);
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    transform: scale(.1) translateX(2000px);
    transform-origin: right center;
  }
}




/* ㅡㅡ서서히 작아지며 위로사라짐ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ */
.zoomOutUp {animation-name: zoomOutUp; }

@keyframes zoomOutUp {
  40% {
    opacity: 1;
    transform: scale(.475) translateY(60px);
    animation-timing-function: linear;
  }

  100% {
    opacity: 0;
    transform: scale(.1) translateY(-2000px);
    transform-origin: center top;
  }
}





/* Animation Timers  시간차 조절 ---------------------------------*/
/* Animation Timers  시간차 조절 ---------------------------------*/
/* Animation Timers  시간차 조절 ---------------------------------*/

.delay-02s { animation-delay: 0.2s; }
.delay-03s { animation-delay: 0.3s; }
.delay-04s { animation-delay: 0.4s; }
.delay-05s { animation-delay: 0.5s; }
.delay-06s { animation-delay: 0.6s; }
.delay-07s { animation-delay: 0.7s; }
.delay-08s { animation-delay: 0.8s; }
.delay-09s { animation-delay: 0.9s; }
.delay-10s { animation-delay: 1.0s; }
.delay-12s { animation-delay: 1.2s; }
.delay-14s { animation-delay: 1.4s; }