@charset "UTF-8";


/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/

.animated { -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;}

.animated.hinge { -webkit-animation-duration: 2s;
  animation-duration: 2s;}
/***튀다***/
@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0);}
  40% { -webkit-transform: translateY(-30px); transform: translateY(-30px);}

  60% { -webkit-transform: translateY(-15px); transform: translateY(-15px);}
}

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

  60% { -webkit-transform: translateY(-15px);  -ms-transform: translateY(-15px); transform: translateY(-15px);}
}

.bounce { -webkit-animation-name: bounce; animation-name: bounce;}
/***플래쉬***/
@-webkit-keyframes flash {
  0%, 50%, 100% { opacity: 1;}

  25%, 75% { opacity: 0;}
}

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

  25%, 75% { opacity: 0;}
}

.flash { -webkit-animation-name: flash; animation-name: flash;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
/***맥박***/
@-webkit-keyframes pulse {
  0% { -webkit-transform: scale(1); transform: scale(1);}

  50% { -webkit-transform: scale(1.1); transform: scale(1.1);}
  100% { -webkit-transform: scale(1); transform: scale(1);}
}

@keyframes pulse {
  0% { -webkit-transform: scale(1);  -ms-transform: scale(1); transform: scale(1);}

  50% { -webkit-transform: scale(1.1);  -ms-transform: scale(1.1); transform: scale(1.1);}
  100% { -webkit-transform: scale(1);  -ms-transform: scale(1); transform: scale(1);}
}

.pulse { -webkit-animation-name: pulse; animation-name: pulse;}
/***털다***/
@-webkit-keyframes shake {
  0%, 100% { -webkit-transform: translateX(0); transform: translateX(0);}

  10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px); transform: translateX(-10px);}
  20%, 40%, 60%, 80% { -webkit-transform: translateX(10px); transform: translateX(10px);}
}

@keyframes shake {
  0%, 100% { -webkit-transform: translateX(0);  -ms-transform: translateX(0); transform: translateX(0);}

  10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px);  -ms-transform: translateX(-10px); transform: translateX(-10px);}
  20%, 40%, 60%, 80% { -webkit-transform: translateX(10px);  -ms-transform: translateX(10px); transform: translateX(10px);}
}

.shake { -webkit-animation-name: shake; animation-name: shake;}
/*****흔들다*****/
@-webkit-keyframes swing {
  20% { -webkit-transform: rotate(15deg); transform: rotate(15deg);}
  40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg);}

  60% { -webkit-transform: rotate(5deg); transform: rotate(5deg);}
  80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg);}
  100% { -webkit-transform: rotate(0deg); transform: rotate(0deg);}
}

@keyframes swing {
  20% { -webkit-transform: rotate(15deg);  -ms-transform: rotate(15deg); transform: rotate(15deg);}
  40% { -webkit-transform: rotate(-10deg);  -ms-transform: rotate(-10deg); transform: rotate(-10deg);}

  60% { -webkit-transform: rotate(5deg);  -ms-transform: rotate(5deg); transform: rotate(5deg);}
  80% { -webkit-transform: rotate(-5deg);  -ms-transform: rotate(-5deg); transform: rotate(-5deg);}
  100% { -webkit-transform: rotate(0deg);  -ms-transform: rotate(0deg); transform: rotate(0deg);}
}

.swing { -webkit-transform-origin: top center; -ms-transform-origin: top center;  transform-origin: top center;
  -webkit-animation-name: swing; animation-name: swing;}
/*****털고흔들다*****/
@-webkit-keyframes tada {
  0% { -webkit-transform: scale(1); transform: scale(1);}

  10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg);}

  30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg);}
  100% { -webkit-transform: scale(1) rotate(0); transform: scale(1) rotate(0);}
}

@keyframes tada {
  0% { -webkit-transform: scale(1);  -ms-transform: scale(1); transform: scale(1);}

  10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg);  -ms-transform: scale(0.9) rotate(-3deg); transform: scale(0.9) rotate(-3deg);}

  30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg);  -ms-transform: scale(1.1) rotate(3deg); transform: scale(1.1) rotate(3deg);}
  40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg);  -ms-transform: scale(1.1) rotate(-3deg); transform: scale(1.1) rotate(-3deg);}
  100% { -webkit-transform: scale(1) rotate(0);  -ms-transform: scale(1) rotate(0); transform: scale(1) rotate(0);}
}

.tada { -webkit-animation-name: tada; animation-name: tada;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
/*****뒤뚱뒤뚱*****/
@-webkit-keyframes wobble {
  0% { -webkit-transform: translateX(0%); transform: translateX(0%);}

  15% { -webkit-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg);}

  30% { -webkit-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg);}

  45% { -webkit-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg);}

  60% { -webkit-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg);}

  75% { -webkit-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg);}
  100% { -webkit-transform: translateX(0%); transform: translateX(0%);}
}

@keyframes wobble {
  0% { -webkit-transform: translateX(0%);  -ms-transform: translateX(0%); transform: translateX(0%);}

  15% { -webkit-transform: translateX(-25%) rotate(-5deg);  -ms-transform: translateX(-25%) rotate(-5deg); transform: translateX(-25%) rotate(-5deg);}

  30% { -webkit-transform: translateX(20%) rotate(3deg);  -ms-transform: translateX(20%) rotate(3deg); transform: translateX(20%) rotate(3deg);}

  45% { -webkit-transform: translateX(-15%) rotate(-3deg);  -ms-transform: translateX(-15%) rotate(-3deg); transform: translateX(-15%) rotate(-3deg);}

  60% { -webkit-transform: translateX(10%) rotate(2deg);  -ms-transform: translateX(10%) rotate(2deg); transform: translateX(10%) rotate(2deg);}

  75% { -webkit-transform: translateX(-5%) rotate(-1deg);  -ms-transform: translateX(-5%) rotate(-1deg); transform: translateX(-5%) rotate(-1deg);}
  100% { -webkit-transform: translateX(0%);  -ms-transform: translateX(0%); transform: translateX(0%);}
}

.wobble { -webkit-animation-name: wobble; animation-name: wobble;}
/*****제자리 확대*****/
@-webkit-keyframes bounceIn {
  0% { opacity: 0;  -webkit-transform: scale(.3); transform: scale(.3);}

  50% { opacity: 1;  -webkit-transform: scale(1.05); transform: scale(1.05);}

  70% { -webkit-transform: scale(.9); transform: scale(.9);}
  100% { -webkit-transform: scale(1); transform: scale(1);}
}

@keyframes bounceIn {
  0% { opacity: 0;  -webkit-transform: scale(.3);  -ms-transform: scale(.3); transform: scale(.3);}

  50% { opacity: 1;  -webkit-transform: scale(1.05);  -ms-transform: scale(1.05); transform: scale(1.05);}

  70% { -webkit-transform: scale(.9);  -ms-transform: scale(.9); transform: scale(.9);}
  100% { -webkit-transform: scale(1);  -ms-transform: scale(1); transform: scale(1);}
}

.bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn;}

/*****위에서 아래로 빠르게*****/
@-webkit-keyframes bounceInDown {
  0% { opacity: 0;  -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}

  60% { opacity: 1;  -webkit-transform: translateY(30px); transform: translateY(30px);}
  80% { -webkit-transform: translateY(-10px); transform: translateY(-10px);}
  100% { -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes bounceInDown {
  0% { opacity: 0;  -webkit-transform: translateY(-2000px);  -ms-transform: translateY(-2000px); transform: translateY(-2000px);}

  60% { opacity: 1;  -webkit-transform: translateY(30px);  -ms-transform: translateY(30px); transform: translateY(30px);}
  80% { -webkit-transform: translateY(-10px);  -ms-transform: translateY(-10px); transform: translateY(-10px);}
  100% { -webkit-transform: translateY(0);  -ms-transform: translateY(0); transform: translateY(0);}
}

.bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown;}

/*좌에서 우로 빠르게*/
@-webkit-keyframes bounceInLeft {
  0% { opacity: 0;  -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}

  60% { opacity: 1;  -webkit-transform: translateX(30px); transform: translateX(30px);}
  80% { -webkit-transform: translateX(-10px); transform: translateX(-10px);}
  100% { -webkit-transform: translateX(0); transform: translateX(0);}
}

/*좌에서 우로 빠르게*/
@keyframes bounceInLeft {
  0% { opacity: 0;  -webkit-transform: translateX(-2000px);  -ms-transform: translateX(-2000px); transform: translateX(-2000px);}

  60% { opacity: 1;  -webkit-transform: translateX(30px);  -ms-transform: translateX(30px); transform: translateX(30px);}
  80% { -webkit-transform: translateX(-10px);  -ms-transform: translateX(-10px); transform: translateX(-10px);}
  100% { -webkit-transform: translateX(0);  -ms-transform: translateX(0); transform: translateX(0);}
}

.bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft;}

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

  60% { opacity: 1;  -webkit-transform: translateX(-30px); transform: translateX(-30px);}
  80% { -webkit-transform: translateX(10px); transform: translateX(10px);}
  100% { -webkit-transform: translateX(0); transform: translateX(0);}
}
/*우에서 좌로 빠르게*/
@keyframes bounceInRight {
  0% { opacity: 0;  -webkit-transform: translateX(2000px);  -ms-transform: translateX(2000px); transform: translateX(2000px);}

  60% { opacity: 1;  -webkit-transform: translateX(-30px);  -ms-transform: translateX(-30px); transform: translateX(-30px);}
  80% { -webkit-transform: translateX(10px);  -ms-transform: translateX(10px); transform: translateX(10px);}
  100% { -webkit-transform: translateX(0);  -ms-transform: translateX(0); transform: translateX(0);}
}

.bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight;}

/***아래서 위로 빠르게***/
@-webkit-keyframes bounceInUp {
  0% { opacity: 0;  -webkit-transform: translateY(2000px); transform: translateY(2000px);}

  60% { opacity: 1;  -webkit-transform: translateY(-30px); transform: translateY(-30px);}
  80% { -webkit-transform: translateY(10px); transform: translateY(10px);}
  100% { -webkit-transform: translateY(0); transform: translateY(0);}
}

@keyframes bounceInUp {
  0% { opacity: 0;  -webkit-transform: translateY(2000px);  -ms-transform: translateY(2000px); transform: translateY(2000px);}

  60% { opacity: 1;  -webkit-transform: translateY(-30px);  -ms-transform: translateY(-30px); transform: translateY(-30px);}
  80% { -webkit-transform: translateY(10px);  -ms-transform: translateY(10px); transform: translateY(10px);}
  100% { -webkit-transform: translateY(0);  -ms-transform: translateY(0); transform: translateY(0);}
}

.bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp;}
/***작아지면서 사라짐***/
@-webkit-keyframes bounceOut {
  0% { -webkit-transform: scale(1); transform: scale(1);}

  25% { -webkit-transform: scale(.95); transform: scale(.95);}

  50% { opacity: 1;  -webkit-transform: scale(1.1); transform: scale(1.1);}
  100% { opacity: 0;  -webkit-transform: scale(.3); transform: scale(.3);}
}

@keyframes bounceOut {
  0% { -webkit-transform: scale(1);  -ms-transform: scale(1); transform: scale(1);}

  25% { -webkit-transform: scale(.95);  -ms-transform: scale(.95); transform: scale(.95);}

  50% { opacity: 1;  -webkit-transform: scale(1.1);  -ms-transform: scale(1.1); transform: scale(1.1);}
  100% { opacity: 0;  -webkit-transform: scale(.3);  -ms-transform: scale(.3); transform: scale(.3);}
}

.bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut;}
/***위에서 아래로 사라짐***/
@-webkit-keyframes bounceOutDown {
  0% { -webkit-transform: translateY(0); transform: translateY(0);}
  20% { opacity: 1;  -webkit-transform: translateY(-20px); transform: translateY(-20px);}
  100% { opacity: 0;  -webkit-transform: translateY(2000px); transform: translateY(2000px);}
}

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

.bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown;}
/***우에서 좌로 사라짐***/
@-webkit-keyframes bounceOutLeft {
  0% { -webkit-transform: translateX(0); transform: translateX(0);}
  20% { opacity: 1;  -webkit-transform: translateX(20px); transform: translateX(20px);}
  100% { opacity: 0;  -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}
}

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

.bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft;}
/***좌에서 우로 사라짐***/
@-webkit-keyframes bounceOutRight {
  0% { -webkit-transform: translateX(0); transform: translateX(0);}
  20% { opacity: 1;  -webkit-transform: translateX(-20px); transform: translateX(-20px);}
  100% { opacity: 0;  -webkit-transform: translateX(2000px); transform: translateX(2000px);}
}

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

.bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight;}
/***아래서 위로 사라짐***/
@-webkit-keyframes bounceOutUp {
  0% { -webkit-transform: translateY(0); transform: translateY(0);}
  20% { opacity: 1;  -webkit-transform: translateY(20px); transform: translateY(20px);}
  100% { opacity: 0;  -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}
}

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

.bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp;}

/*****제자리에서 등장*****/
@-webkit-keyframes fadeIn {
  0% { opacity: 0;}
  100% { opacity: 1;}
}

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

.fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn;}
/***아래로 등장***/
@-webkit-keyframes fadeInDown {
  0% { opacity: 0;  -webkit-transform: translateY(-20px); transform: translateY(-20px);}
  100% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
}

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

.fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown;}

/******아래로 크게 등장*****/
@-webkit-keyframes fadeInDownBig {
  0% { opacity: 0;  -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}
  100% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
}

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

.fadeInDownBig { -webkit-animation-name: fadeInDownBig; animation-name: fadeInDownBig;}

/*****우로 등장*****/
@-webkit-keyframes fadeInLeft {
  0% { opacity: 0;  -webkit-transform: translateX(-20px); transform: translateX(-20px);}
  100% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
}

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

.fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft;}

/*****우로 크게 등장*****/
@-webkit-keyframes fadeInLeftBig {
  0% { opacity: 0;  -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}
  100% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
}

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

.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig;}
/*****좌로 등장*****/
@-webkit-keyframes fadeInRight {
  0% { opacity: 0;  -webkit-transform: translateX(20px); transform: translateX(20px);}
  100% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
}

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

.fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight;}
/*****좌로 크게 등장*****/
@-webkit-keyframes fadeInRightBig {
  0% { opacity: 0;  -webkit-transform: translateX(2000px); transform: translateX(2000px);}
  100% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
}

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

.fadeInRightBig { -webkit-animation-name: fadeInRightBig; animation-name: fadeInRightBig;}
/*****아래서 등장*****/
@-webkit-keyframes fadeInUp {
  0% { opacity: 0;  -webkit-transform: translateY(20px); transform: translateY(20px);}
  100% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
}

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

.fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp;}
/***위로 크게 등장***/
@-webkit-keyframes fadeInUpBig {
  0% { opacity: 0;  -webkit-transform: translateY(2000px); transform: translateY(2000px);}
  100% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
}

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

.fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig;}
/***사라짐***/
@-webkit-keyframes fadeOut {
  0% { opacity: 1;}
  100% { opacity: 0;}
}

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

.fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut;}
/***아래로 사라짐***/
@-webkit-keyframes fadeOutDown {
  0% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
  100% { opacity: 0;  -webkit-transform: translateY(20px); transform: translateY(20px);}
}

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

.fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown;}
/***아래로 크게 사라짐***/
@-webkit-keyframes fadeOutDownBig {
  0% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
  100% { opacity: 0;  -webkit-transform: translateY(2000px); transform: translateY(2000px);}
}

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

.fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig;}
/***좌로 사라짐***/
@-webkit-keyframes fadeOutLeft {
  0% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
  100% { opacity: 0;  -webkit-transform: translateX(-20px); transform: translateX(-20px);}
}

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

.fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft;}
/***좌로 크게 사라짐***/
@-webkit-keyframes fadeOutLeftBig {
  0% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
  100% { opacity: 0;  -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}
}

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

.fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig;}
/***우로 사라짐***/
@-webkit-keyframes fadeOutRight {
  0% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
  100% { opacity: 0;  -webkit-transform: translateX(20px); transform: translateX(20px);}
}

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

.fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight;}
/***우로 크게 사라짐***/
@-webkit-keyframes fadeOutRightBig {
  0% { opacity: 1;  -webkit-transform: translateX(0); transform: translateX(0);}
  100% { opacity: 0;  -webkit-transform: translateX(2000px); transform: translateX(2000px);}
}

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

.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig;}
/***위로 사라짐***/
@-webkit-keyframes fadeOutUp {
  0% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
  100% { opacity: 0;  -webkit-transform: translateY(-20px); transform: translateY(-20px);}
}

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

.fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp;}
/***위로 크게 사라짐***/
@-webkit-keyframes fadeOutUpBig {
  0% { opacity: 1;  -webkit-transform: translateY(0); transform: translateY(0);}
  100% { opacity: 0;  -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}
}

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

.fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig;}
/***홱 뒤집다***/
@-webkit-keyframes flip {
  0% { -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1); transform: perspective(400px) translateZ(0) rotateY(0) scale(1);  -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
  40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);  -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}

  50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);  -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);  -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);  -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
}

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

  50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);  -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1); transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);  -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  80% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);  -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);  -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
  100% { -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);  -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1); transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);  -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
}

.animated.flip { -webkit-backface-visibility: visible;
  -ms-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip; animation-name: flip;}
/***홱 뒤집다 아래로***/
@-webkit-keyframes flipInX {
  0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg);  opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotateX(-10deg); transform: perspective(400px) rotateX(-10deg);}

  70% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg);}
  100% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg);  opacity: 1;}
}

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

  70% { -webkit-transform: perspective(400px) rotateX(10deg);  -ms-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg);}
  100% { -webkit-transform: perspective(400px) rotateX(0deg);  -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg);  opacity: 1;}
}

.flipInX { -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX; animation-name: flipInX;}
/***홱 뒤집다 좌로***/
@-webkit-keyframes flipInY {
  0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg);  opacity: 0;}
  40% { -webkit-transform: perspective(400px) rotateY(-10deg); transform: perspective(400px) rotateY(-10deg);}

  70% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg);}
  100% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg);  opacity: 1;}
}

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

  70% { -webkit-transform: perspective(400px) rotateY(10deg);  -ms-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg);}
  100% { -webkit-transform: perspective(400px) rotateY(0deg);  -ms-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg);  opacity: 1;}
}

.flipInY { -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY; animation-name: flipInY;}

@-webkit-keyframes flipOutX {
  0% { -webkit-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg);  opacity: 1;}
  100% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg);  opacity: 0;}
}
/***홱 뒤집으며 아래로 사라짐***/
@keyframes flipOutX {
  0% { -webkit-transform: perspective(400px) rotateX(0deg);  -ms-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg);  opacity: 1;}
  100% { -webkit-transform: perspective(400px) rotateX(90deg);  -ms-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg);  opacity: 0;}
}

.flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;}
/***홱 뒤집으며 좌로사라짐***/
@-webkit-keyframes flipOutY {
  0% { -webkit-transform: perspective(400px) rotateY(0deg); transform: perspective(400px) rotateY(0deg);  opacity: 1;}
  100% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg);  opacity: 0;}
}

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

.flipOutY { -webkit-backface-visibility: visible !important;
  -ms-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY; animation-name: flipOutY;}
/***좌로 스피드있게 등장***/
@-webkit-keyframes lightSpeedIn {
  0% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg);  opacity: 0;}

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

@keyframes lightSpeedIn {
  0% { -webkit-transform: translateX(100%) skewX(-30deg);  -ms-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg);  opacity: 0;}

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

.lightSpeedIn { -webkit-animation-name: lightSpeedIn; animation-name: lightSpeedIn;  -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;}
/***우로 스피드있게 사라짐***/
@-webkit-keyframes lightSpeedOut {
  0% { -webkit-transform: translateX(0%) skewX(0deg); transform: translateX(0%) skewX(0deg);  opacity: 1;}
  100% { -webkit-transform: translateX(100%) skewX(-30deg); transform: translateX(100%) skewX(-30deg);  opacity: 0;}
}

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

.lightSpeedOut { -webkit-animation-name: lightSpeedOut; animation-name: lightSpeedOut;  -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;}
/***좌로 회전***/
@-webkit-keyframes rotateIn {
  0% { -webkit-transform-origin: center center;  transform-origin: center center;  -webkit-transform: rotate(-200deg); transform: rotate(-200deg);  opacity: 0;}
  100% { -webkit-transform-origin: center center;  transform-origin: center center;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
}

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

.rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn;}
/*****우회전 등장*****/
@-webkit-keyframes rotateInDownLeft {
  0% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);  opacity: 0;}
  100% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
}

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

.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft;}
/*****좌회전 등장***/
@-webkit-keyframes rotateInDownRight {
  0% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(90deg); transform: rotate(90deg);  opacity: 0;}
  100% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
}

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

.rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight;}
/*****좌회전 위로 등장***/
@-webkit-keyframes rotateInUpLeft {
  0% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(90deg); transform: rotate(90deg);  opacity: 0;}
  100% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
}

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

.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft;}
/*****우회전 위로 등장***/
@-webkit-keyframes rotateInUpRight {
  0% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);  opacity: 0;}
  100% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
}

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

.rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight;}
/*****위로 회전 사라짐***/
@-webkit-keyframes rotateOut {
  0% { -webkit-transform-origin: center center;  transform-origin: center center;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
  100% { -webkit-transform-origin: center center;  transform-origin: center center;  -webkit-transform: rotate(200deg); transform: rotate(200deg);  opacity: 0;}
}

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

.rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut;}
/*****아래로 우회전 사라짐***/
@-webkit-keyframes rotateOutDownLeft {
  0% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
  100% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(90deg); transform: rotate(90deg);  opacity: 0;}
}

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

.rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft;}
/*****아래로 좌회전 사라짐***/
@-webkit-keyframes rotateOutDownRight {
  0% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
  100% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);  opacity: 0;}
}

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

.rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight;}
/*****위로 좌회전 사라짐***/
@-webkit-keyframes rotateOutUpLeft {
  0% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
  100% { -webkit-transform-origin: left bottom;  transform-origin: left bottom;  -webkit-transform: rotate(-90deg); transform: rotate(-90deg);  opacity: 0;}
}

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

.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft;}
/*****위로 좌회전 사라짐***/
@-webkit-keyframes rotateOutUpRight {
  0% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(0); transform: rotate(0);  opacity: 1;}
  100% { -webkit-transform-origin: right bottom;  transform-origin: right bottom;  -webkit-transform: rotate(90deg); transform: rotate(90deg);  opacity: 0;}
}

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

.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight;}
/***위에서 심플 등장***/
@-webkit-keyframes slideInDown {
  0% { opacity: 0;  -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}
  100% { -webkit-transform: translateY(0); transform: translateY(0);}
}

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

.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown;}
/***좌에서 심플 등장***/
@-webkit-keyframes slideInLeft {
  0% { opacity: 0;  -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}
  100% { -webkit-transform: translateX(0); transform: translateX(0);}
}

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

.slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft;}
/***우에서 심플 등장***/
@-webkit-keyframes slideInRight {
  0% { opacity: 0;  -webkit-transform: translateX(2000px); transform: translateX(2000px);}
  100% { -webkit-transform: translateX(0); transform: translateX(0);}
}

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

.slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight;}
/***좌로 심플 사라짐***/
@-webkit-keyframes slideOutLeft {
  0% { -webkit-transform: translateX(0); transform: translateX(0);}
  100% { opacity: 0;  -webkit-transform: translateX(-2000px); transform: translateX(-2000px);}
}

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

.slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft;}
/***우로 심플 사라짐***/
@-webkit-keyframes slideOutRight {
  0% { -webkit-transform: translateX(0); transform: translateX(0);}
  100% { opacity: 0;  -webkit-transform: translateX(2000px); transform: translateX(2000px);}
}

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

.slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight;}
/***위로 심플 사라짐***/
@-webkit-keyframes slideOutUp {
  0% { -webkit-transform: translateY(0); transform: translateY(0);}
  100% { opacity: 0;  -webkit-transform: translateY(-2000px); transform: translateY(-2000px);}
}

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

.slideOutUp { -webkit-animation-name: slideOutUp; animation-name: slideOutUp;}
/***대각선 좌로***/
@-webkit-keyframes hinge {
  0% { -webkit-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  40% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  80% { -webkit-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0);  opacity: 1; -webkit-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  100% { -webkit-transform: translateY(700px); transform: translateY(700px);  opacity: 0;}
}

@keyframes hinge {
  0% { -webkit-transform: rotate(0);  -ms-transform: rotate(0); transform: rotate(0); -webkit-transform-origin: top left; -ms-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  20%, 60% { -webkit-transform: rotate(80deg);  -ms-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; -ms-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  40% { -webkit-transform: rotate(60deg);  -ms-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; -ms-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  80% { -webkit-transform: rotate(60deg) translateY(0);  -ms-transform: rotate(60deg) translateY(0); transform: rotate(60deg) translateY(0);  opacity: 1; -webkit-transform-origin: top left; -ms-transform-origin: top left;  transform-origin: top left;  -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;}
  100% { -webkit-transform: translateY(700px);  -ms-transform: translateY(700px); transform: translateY(700px);  opacity: 0;}
}

.hinge { -webkit-animation-name: hinge; animation-name: hinge;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
/***좌에서 말아올려 등장***/
@-webkit-keyframes rollIn {
  0% { opacity: 0;  -webkit-transform: translateX(-100%) rotate(-120deg); transform: translateX(-100%) rotate(-120deg);}
  100% { opacity: 1;  -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg);}
}

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

.rollIn { -webkit-animation-name: rollIn; animation-name: rollIn;}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
/***좌에서 말아내려 사라짐***/
@-webkit-keyframes rollOut {
  0% { opacity: 1;  -webkit-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg);}
  100% { opacity: 0;  -webkit-transform: translateX(100%) rotate(120deg); transform: translateX(100%) rotate(120deg);}
}

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

.rollOut { -webkit-animation-name: rollOut; animation-name: rollOut;
}

/********2023 NEW **************************************************/

/***반짝임***/
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}

/***********************무한회전**********************/
@keyframes rotate_img{
0% {transform:rotate(0deg);}
100% {transform:rotate(-360deg);}
}
.rotate_img {animation:rotate_img 20s 0.5s infinite linear;}

/***********************깜~박깜~박***********************/
@keyframes blink-effect {
  50% {
    opacity: 0;
  }
}
.blink-effect {animation:blink-effect 1s 0s infinite linear;}

/************************슬라이드 상하교차**************/
@keyframes slide_y{
	0%{transform:translate(0,0)}
	100%{transform:translate(0,-75%)}
}
@keyframes slide_x{
	0%{transform:translate(0,-75%)}
	100%{transform:translate(0,0)}
}
.slide_y {animation:slide_y 60s 0s infinite alternate linear}
.slide_x {animation:slide_x 60s 0s infinite alternate linear}

/************************슬라이드 좌우**************/
@keyframes slide_lr{
0% {background: url(/w/img/text04.png) no-repeat 0 0;} 
100%{ background: url(/w/img/text04.png) no-repeat  -1800px 0px;}
}
.slide_lr {animation: slide_lr 10s 0s infinite alternate linear;}

/************************텍스트 업다운**************/
@keyframes text_up{
	0%{margin-top:-10px;}
	100%{margin-top:0;}
}
.text_up{display: block;animation:text_up 0.5s 0s infinite alternate ease-in;}
/************************스팀**************/
@keyframes steam_ani{
	0% {transform:translate(0,0);opacity: 0;}
	50% {transform:translate(0,-50px);opacity: 1;}
	100% {transform:translate(0,-100px);opacity: 0;}
}
.steam_ani {animation:steam_ani 3s 0s infinite normal linear;}