@charset "UTF-8";

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2014 Daniel Eden
*/

.animated{
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animated.infinite{-webkit-animation-iteration-count: infinite;animation-iteration-count: infinite;}
.animated.duration2{-webkit-animation-duration:2s;animation-duration:2s;}
.animated.duration3{-webkit-animation-duration:3s;animation-duration:3s;}
.animated.duration4{-webkit-animation-duration:4s;animation-duration:4s;}
.animated.duration5{-webkit-animation-duration:5s;animation-duration:5s;}
.animated.delay1{-webkit-animation-delay:1s;animation-delay:1s;}
.animated.delay2{-webkit-animation-delay:2s;animation-delay:2s;}
.animated.delay3{-webkit-animation-delay:3s;animation-delay:3s;}
.animated.delay4{-webkit-animation-delay:4s;animation-delay:4s;}
.animated.delay5{-webkit-animation-delay:5s;animation-delay:5s;}
.wait-animation{-webkit-animation-play-state:paused;animation-play-state:paused;}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}


/*애니메이션*/
.animated {animation-fill-mode: both;}

.fade-out {animation: fade-out 1s; animation-timing-function: ease-out;}
.fade-in{animation: fade-in 1.2s; animation-timing-function: ease-in-out;}
.fade-in-up {animation: fade-in-up 1s; animation-timing-function: ease-out;}
.fade-in-down {animation: fade-in-down 1s; animation-timing-function: ease-out;}
.fade-in-right{animation: fade-in-right 1s;animation-timing-function: ease-out;}
.fade-in-left {animation: fade-in-left 1s;animation-timing-function: ease-out;}

.nar_l {animation: nar_l 1s; animation-timing-function: ease-out;}
.nar_r {animation: nar_r 1s; animation-timing-function: ease-out;}

.scale-in {animation: scale-in 1.5s;}
.heartbeat {animation: heartbeat 8s; animation-timing-function: ease-out; animation-iteration-count: infinite;}
.wabble {transform-origin: 50% 0 0;animation: wabble 1.2s;}
.wabble2 {transform-origin: 50% 0 0;animation: wabble2 1.2s;}
.float {animation: float 1.6s; animation-iteration-count: infinite;} /*둥둥*/
.float2 {animation: float2 1.6s; animation-iteration-count: infinite;} /*양옆으로- 오른쪽부터*/
.float3 {animation: float2 1.6s; animation-iteration-count: infinite;} /*양옆으로- 왼쪽부터*/
.slide-in-up {animation: slide-in-up 1.2s; animation-timing-function: ease;}
.slide-in-down {animation: slide-in-down 1.2s; animation-timing-function: ease;}
.rotate {animation: rotate 5s; animation-iteration-count: infinite; animation-timing-function: linear;} /*회전*/
.fanfare {animation: fanfare 1.2s;} /*커지면서 나타나기*/
.fanfare2 {animation: fanfare2 1.2s;} /*커지면서 나타나기*/

.bounce-in {animation: bounce-in 1.2s;animation-timing-function: ease-out;}
.bounce-in-up {animation: bounce-in-up 1.2s;animation-timing-function: ease-out;}
.bounce-in-down {animation: bounce-in-down 1.2s;animation-timing-function: ease-out;}
.bounce-in-right {animation: bounce-in-right 1.2s;animation-timing-function: ease-out;}
.bounce-in-left {animation: bounce-in-left 1.2s; animation-timing-function: ease-out;}

.up-ani {animation: up-ani 1s; animation-timing-function: ease-out;}
.down-ani {animation: down-ani 1s; animation-timing-function: ease-out;}

/*반짝반짝*/
.blinking{-webkit-animation:blink 0.7s ease-in-out infinite alternate; -moz-animation:blink 0.7s ease-in-out infinite alternate; animation:blink 0.7s ease-in-out infinite alternate;}

/*회원가는 애니메이션*/
@keyframes rotation {
  from {
	transform: rotate(0deg);
  }
  to {
	transform: rotate(360deg);
  }
}

.rotation {animation: rotation 2s infinite linear;}


@keyframes nar_l
{
  0%{transform: translate(-1000%,500%);}
  100%{transform: translate(0,0);}
}

@keyframes nar_r
{
  0%{transform: translate(1000%,500%);}
  100%{transform: translate(0,0);}
}

@keyframes blink{
    0% {opacity:0}
    100% {opacity:1}
}

/*s 키보드 치듯이 css*/
@keyframes type{
  from { width: 0; }
}
@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; }
}

@keyframes blink{
  to{opacity: .0;}
}
/*e 키보드 치듯이 css*/

@keyframes fade-out
{
  0%{opacity: 1;}
  100%{opacity: 0;}
}

@keyframes fade-in2
{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

@keyframes fade-in
{
  0%{opacity: 0;}
  100%{opacity: 1;}
}

@keyframes fade-in-up
{
  0%{transform: translateY(20%); opacity: 0;}
  100%{transform: translateY(0%); opacity: 1;}
}

@keyframes fade-in-down
{
  0%{transform: translateY(0%); opacity: 0;}
  100%{transform: translateY(20%); opacity: 1;}
}

/*fade-in right*/
@keyframes fade-in-right
{
    0%{transform: translateX(-100%); opacity: 0;}
    100%{transform: translateX(0%); opacity: 1;}
}

/*fade-in left*/
@keyframes fade-in-left
{
    0% {transform: translateX(100%);opacity: 0;}
    100% {transform: translateX(0%);opacity: 1;}
}


@keyframes slide-in-up
{
  0% {transform: translateY(1000px);}
  100% {transform: translateY(0px);}
}

@keyframes slide-in-down
{
  0% {transform: translateY(0px);}
  100% {transform: translateY(1000px);}
}

@keyframes up-ani
{
  0%{transform: translateY(0);}
  100%{transform: translateY(-100%);}
}

@keyframes down-ani
{
  0%{transform: translateY(-100%);}
  100%{transform: translateY(0%);}
}

@keyframes left-ani
{
  0%{transform: translateX(0%);}
  100%{transform: translateX(-100%);}
}


@keyframes scale-in
{
  0%{transform: scale(0); opacity: 0;}
  100%{transform: scale(1); opacity: 1;}
}


@keyframes heartbeat
{
  0%, 20%, 40%, 60%, 80%, 100% {transform: scale(1);}
  10%, 30%, 50%, 70%, 90% {transform: scale(1.1);}
}


@keyframes wabble
{
  0%, 100% {transform-origin: bottom; transform: rotateZ(7deg);}
  12.5% {transform: rotateZ(-5deg);}
  25% {transform: rotateZ(7deg);}
  37.5% {transform: rotateZ(-5deg);}
  50% {transform: rotateZ(7deg);}
  62.5% {transform: rotateZ(-5deg);}
  75% {transform: rotateZ(7deg);}
  87.5% {transform: rotateZ(-5deg);}
}


@keyframes wabble2
{
  0%, 100% {transform-origin: top; transform: rotateZ(-7deg);}
  12.5% {transform: rotateZ(5deg);}
  25% {transform: rotateZ(-7deg);}
  37.5% {transform: rotateZ(5deg);}
  50% {transform: rotateZ(-7deg);}
  62.5% {transform: rotateZ(5deg);}
  75% {transform: rotateZ(-7deg);}
  87.5% {transform: rotateZ(5deg);}
}

@keyframes float
{
  0%, 100%{transform: translateY(0) rotate(3deg);}
  50%{transform: translateY(-5px) rotate(-3deg);}
}

@keyframes float2
{
  0%, 100%{transform: translatex(0);}
  50%{transform: translateX(20px);}
}

@keyframes float3
{
  0%, 100%{transform: translatex(20%);}
  50%{transform: translateX(0px);}
}


@keyframes rotate
{
  0%{transform: rotate(0deg) translate3d(0, 0, 0);}
  100%{transform: rotate(360deg) translate3d(0, 0, 0);}
}

@keyframes fanfare
{
  0%{opacity:0; transform: scale(1);}
  30% {transform: scale(0) rotateZ(0deg);}
  80% {transform: scale(1.15) rotateZ(0deg);}
  100% {opacity:1; transform: scale(1);}
}

@keyframes fanfare2
{
  0% {opacity:0; transform: scale(0);}
  100% {opacity:1; transform: scale(1);}
}

/* bounce-in */
@keyframes bounce-in
{
  0% {transform: scale(.8);opacity: 0;}
  50% {transform: scale(1.3);opacity: 1;}
  100% {transform: scale(1);}
}

/*bounce-in up*/
@keyframes bounce-in-up
{
    0% {transform: translateY(1000px);}
    25% {transform: translateY(50px);}
    30%, 55%, 70%, 80%, 90%, 100% {transform: translateY(0px);}
    45% {transform: translateY(25px);}
    63% {transform: translateY(15px);}
    75% {transform: translateY(7px);}
    85% {transform: translateY(4px);}
    95% {transform: translateY(2px);}
}

/* bounce-in-down */
@keyframes bounce-in-down
{
    0% {transform: translateY(-1000px);}
    25% {transform: translateY(-50px);}
    30%, 55%, 70%, 80%, 90%, 100% {transform: translateY(0px);}
    45% {transform: translateY(-25px);}
    63% {transform: translateY(-15px);}
    75% {transform: translateY(-7px);}
    85% {transform: translateY(-4px);}
    95% {transform: translateY(-2px);}
}

/*bounce-in-right*/
@keyframes bounce-in-right
{
    0% {transform: translateX(-2000px);}
    63% {transform: translateX(30px);}
    70%, 80%, 90%, 100% {transform: translateX(0px);}
    75% {transform: translateX(14px);}
    85% {transform: translateX(8px);}
    95%{transform: translateX(4px);}
}

/*bounce-in left*/
@keyframes bounce-in-left
{
    0% {transform: translateX(2000px);}
    63% {transform: translateX(-30px);}
    70%, 80%, 90%, 100% {transform: translateX(0px);}
    75% {transform: translateX(-14px);}
    85% {transform: translateX(-8px);}
    95% {transform: translateX(-4px);}
}

/**custom keyframes**/
@keyframes zoom-bg {
	0% {transform: scale(1)}
	100% {transform: scale(1.2)}
}
@keyframes goat {
	0% {
		left: 45%;
	}
	100% {
		left: 55%;
	}
}
@keyframes scale {
	0% {
		transform: scale(1) rotate(-15deg);
	}
	100% {
		transform: scale(0.85) rotate(15deg);
	}
}
@keyframes beep {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
@keyframes blinking {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 100%;
	}
}
@keyframes spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}

}
@keyframes flow_txt {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-50%);
	}

}