@charset "utf-8";
/* animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; */


@keyframes fadeIn {
    0% {transform: translate3d(0px, 30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInDown {
    0% {transform: translate3d(0px, -30px, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInRight {
    0% { opacity: 0; transform: translate3d(30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes fadeInLeft {
    0% { opacity: 0; transform: translate3d(-30px, 0, 0px); }
    100% { opacity: 1; transform: translate3d(0px, 0px, 0px); }
}
@keyframes zoomIn {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}

/* 등장 애니메이션: .ani + IntersectionObserver(.on) */
.ani{ opacity: 0; }
.ani.on{ animation: fadeIn 0.5s ease-in-out 0s 1 forwards running; }
.ani.down.on{ animation-name: fadeInDown; }
.ani.left.on{ animation-name: fadeInLeft; }
.ani.right.on{ animation-name: fadeInRight; }
.ani.zoom.on{ animation-name: zoomIn; }

/* 순차 지연 */
.ani.delay1.on{ animation-delay: 0.1s; }
.ani.delay2.on{ animation-delay: 0.2s; }
.ani.delay3.on{ animation-delay: 0.3s; }
.ani.delay4.on{ animation-delay: 0.4s; }
.ani.delay5.on{ animation-delay: 0.5s; }