.right-ins {
    animation: right-in 1s cubic-bezier(.04,.73,.26,.98) 0.5s both;
}
.left-ins {
    animation: left-in 1s cubic-bezier(.04,.73,.26,.98) 0.5s both;
}
.top-ins {
    animation: top-in 1s cubic-bezier(.04,.73,.26,.98) 0.5s both;
}
.bottom-ins {
    animation: bottom-in 1s cubic-bezier(.04,.73,.26,.98) 0.5s both;
}
/* 기본 키프레임 */
@keyframes left-in {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes right-in {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes top-in {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bottom-in {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes bottomin {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}


@keyframes topin {
    0% {
        transform: translateY(-100%);
    }

    100% {
        transform: translateY(0%);
    }
}

@keyframes leftin {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}

@keyframes rightin {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0%);
    }
}


@keyframes texup {
    0% {
        opacity: 0;
        transform: translateY(200px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes bot-in {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bot-in2 {
    0% {
        opacity: 0;
        transform: translateY(200px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rightIn-over {
    0% {
        transform: translateX(100%);
        opacity: 1;
    }
    40% {
        transform: translateX(0%);
        opacity: 1;
    }
    60% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 1;
    }
}

@keyframes rightIn-over2 {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    40% {
        transform: translateX(0%);
        opacity: 1;
    }
    60% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 1;
    }
}
@keyframes leftIn-over {
    0% {
        transform: translateX(-100%);
        opacity: 1;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}