/* 에니메이션 효과 */
@keyframes float {
    0%  {transform: translateY(0px);}
    50% {transform: translateY(8px);}
    100%{transform: translateY(0px);}
}

@keyframes show_up {
    0%  {transform: translateY(200%);}
    100%{transform: translateY(0px);}
}

.show_up {
    animation: show_up 1.1s ease-in;
}

.on_show_up,
.on_fade_in,
.on_fade_in_down,
.on_fade_in_up,
.on_fade_in_left,
.on_fade_in_right,
.on_fade_in_right500 {
    visibility: hidden;
}

@keyframes fade_in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fade_in {
    animation: fade_in 1.5s ease;
}

@keyframes fade_in_down {
    from{
        opacity: 0;
        transform: translate3d(0, -20px, 0);
    }
    to  {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade_in_down {
    animation: fade_in_down 1.5s ease;
}

@keyframes fade_in_left {
    from{
        opacity: 0;
        transform: translate3d(-20px, 0, 0);
    }
    to  {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade_in_left {
    animation: fade_in_left 1.5s ease;
}

@keyframes fade_in_right {
    from{opacity: 0;
        transform: translate3d(20px, 0, 0);}
    to  {opacity: 1;
        transform: translate3d(0, 0, 0);}
}

.fade_in_right {
    animation: fade_in_right 1.5s ease;
}

@keyframes fade_in_up {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to  {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.fade_in_up {
    animation: fade_in_up 1.5s ease;
}