@charset "UTF-8";



/*위에서 아래로 떨어지는 효과*/
@keyframes toBottomFromTop {
  49% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}

/*오른쪽에서 왼쪽로 떨어지는 효과*/
@keyframes toLeftFromRight {
  49% {
    transform: translateX(-100%);
  }
  50% {
    opacity: 0;
    transform: translateX(100%);
  }
  51% {
    opacity: 1;
  }
}

/*왼쪽에서 오른쪽로 떨어지는 효과*/
@keyframes toRightFromLeft {
  49% {
    transform: translateX(100%);
  }
  50% {
    opacity: 0;
    transform: translateX(-100%);
  }
  51% {
    opacity: 1;
  }
}

/*사선방향으로 움직이는 효과*/
@-webkit-keyframes stripes {
  0% {background-position: 0 0;}
  100% {background-position: 60px 60px;}
}

@keyframes stripes {
  0% {background-position: 0 0;}
  100% {background-position: 60px 60px;}
}

/*반짝이는 효과*/
@keyframes sparkle {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}


/*read more button animation*/
@-webkit-keyframes qode-button-cap-out {
  0%,
  50% {
    -webkit-transform: translateX(-35px) scaleX(-1);
    transform: translateX(-35px) scaleX(-1);
  }
  100%,
  51% {
    -webkit-transform: translateX(-13px) scaleX(1);
    transform: translateX(-13px) scaleX(1);
  }
}
@keyframes qode-button-cap-out {
  0%,
  50% {
    -webkit-transform: translateX(-35px) scaleX(-1);
    transform: translateX(-35px) scaleX(-1);
  }
  100%,
  51% {
    -webkit-transform: translateX(-13px) scaleX(1);
    transform: translateX(-13px) scaleX(1);
  }
}
@-webkit-keyframes qode-button-cap-fake-out {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  49%,
  51% {
    -webkit-clip-path: inset(50% 0 50% 0);
    clip-path: inset(50% 0 50% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}
@keyframes qode-button-cap-fake-out {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
  49%,
  51% {
    -webkit-clip-path: inset(50% 0 50% 0);
    clip-path: inset(50% 0 50% 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
  }
}