@charset "UTF-8";
/******************
animation
******************/

@keyframes fade {
 0% {
  opacity: 0;
 }
 100% {
  opacity: 1;
 }
}
@keyframes fade_btm {
 0% {
  opacity: 0;
  transform: translateY(25px);
 }
 100% {
  opacity: 1;
  transform: translateY(0);
 }
}
@keyframes fade_left {
 0% {
  opacity: 0;
  transform: translateX(-120px);
 }
 30% {
  opacity: 0;
 }
 100% {
  opacity: 1;
  transform: translateX(0);
 }
}


@keyframes hand_anime {
 0% {
  transform: translate(0, 0);
 }
 10% {
  transform: translate(0, 0);
 }
 25% {
  transform: translate(-80%, -80%) rotate(0);
 }
 30% {
  transform: translate(-80%, -80%) rotate(-10deg);
 }
 35% {
  transform: translate(-80%, -80%) rotate(0);
 }
 100% {
  transform: translate(-80%, -80%);
 }
}



@keyframes step_click {
 0% {
  transform: scale(1.0);
  opacity: 0;
 }
 20% {
  opacity: 1;
 }
 30% {
 transform: scale(1.0);
 opacity: 1;
 }
 45% {
  transform: scale(1.1, 1.1);
  opacity: 0;
 }
  100% {
  transform: scale(1.1, 1.1);
  opacity: 0;
 }
}

/* BK
@keyframes step_click {
 0% {
  transform: scale(1.1, 1.5) translateX(00px);
  border: 3px solid #F2F610;
 }
 25% {
  transform: scale(1.0);
  border: 3px solid #F2F610;
  opacity: 1;
 }
 45% {
  transform: scale(1.0);
  opacity: 0;
 }
 100% {
  transform: scale(1.0);
  opacity: 0;
 }
}
*/