@charset "utf-8";
/* *******************************************************
 * filename : animation.css
 * description : 애니메이션 CSS
 * date : 2020-11-25
******************************************************** */

@keyframes show {
	0% {
		right:-80px;
	}
	100% {
		right:0;
	}
}

@-webkit-keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none
  }
  15% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -10deg)
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 3deg)
  }
  45% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -5deg)
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 2deg)
  }
  75% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -1deg)
  }
  100% {
    -webkit-transform: none;
    transform: none
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
  15% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -40deg);
    -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -40deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -40deg)
  }
  30% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 10deg);
    -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 10deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 10deg)
  }
  45% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -10deg);
    -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -10deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -10deg)
  }
  60% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 2deg);
    -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 2deg)
  }
  75% {
    -webkit-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -1deg);
    -ms-transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, -1deg)
  }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

@keyframes drop {
  0% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
  10% {
    -webkit-transform: translate3d(0, 10%, 0);
    -ms-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }
  15% {
    -webkit-transform: translate3d(0, -60%, 0);
    -ms-transform: translate3d(0, -60%, 0);
    transform: translate3d(0, -60%, 0);
  }
  50% {
    -webkit-transform: translate3d(0, 7%, 0);
    -ms-transform: translate3d(0,7%, 0);
    transform: translate3d(0, 7%, 0);
  }
  60% {
    -webkit-transform: translate3d(0, -5%, 0);
    -ms-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
  }
  70% {
    -webkit-transform: translate3d(0, 4%, 0);
    -ms-transform: translate3d(0, 4%, 0);
    transform: translate3d(0, 4%, 0);
  }
  80% {
    -webkit-transform: translate3d(0, -2%, 0);
    -ms-transform: translate3d(0, -2%, 0);
    transform: translate3d(0, -2%, 0);
  }
  85% {
    -webkit-transform: translate3d(0, 1%, 0);
    -ms-transform: translate3d(0, 1%, 0);
    transform: translate3d(0, 1%, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -1%, 0);
    -ms-transform: translate3d(0, -1%, 0);
    transform: translate3d(0, -1%, 0);
  }
  95% {
    -webkit-transform: translate3d(0, 1%, 0);
    -ms-transform: translate3d(0, 1%, 0);
    transform: translate3d(0, 1%, 0);
  }
  100% {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none
  }
}

@keyframes scrollupDown {
	0% {
		transform:  translateY(-2px);
	}
	50% {
		transform: translateY(2px);
	}
	100% {
		transform:  translateY(-2px);
	}
}

@keyframes imgupDown {
	0% {
		transform:  translateY(0px);
	}
	50% {
		transform: translateY(-0.5vw);
	}
	100% {
		transform:  translateY(0px);
	}
}

@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}
@keyframes text-up {
	from {
		transform: translateY(100%); 
	}
	to {
		transform: translateY(0); 
	}
}