.scroll-ani {
    opacity: 0;
    transition: all 1s;
}

.scroll-ani.on.fade-left {
    animation: fade-left 1s 0.2s ease-in-out forwards;
}

.scroll-ani.on.fade-in {
    animation: fade-in 1s 0.2s ease-in-out forwards;
}

.scroll-ani.on.fade-up {
    animation: fade-up 1s 0.3s ease-in-out forwards;
}


/* 애니메이션 */
@keyframes infinite-txt {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

@keyframes fade-up {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fade-left {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

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

    100% {
        opacity: 1;
    }
}

@keyframes scale {
    0% {
        opacity: 0;
        scale: 1.4;
    }

    100% {
        opacity: 1;
        scale: 1;
    }
}