@keyframes zoomin-anime {
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    70% {
        transform: scale(1.05);
        opacity: 1;
    }

    100% {
        transform: scale(1.0);
        opacity: 1;
    }
}

.anime-zoom-in {
    animation-name: zoomin-anime;
    animation-duration: .8s;
    animation-delay: .3s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-up {

    0% {
        -webkit-transform: translateY(80px);
        transform: translateY(80px);
        opacity: 0;
    }

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

}

.anime-fadein-up {
    animation-name: fadein-up;
    animation-duration: .4s;
    animation-delay: .3s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadein-left {

    0% {
        -webkit-transform: translateX(-200px);
        transform: translateX(-200px);
        opacity: 0;
    }

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

}

.anime-fadein-left {
    -webkit-animation: .6s fadein-left ease-out forwards;
    animation: .6s fadein-left ease-out forwards;
}

@keyframes fadein-right {

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

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

}

.anime-fadein-right {
    -webkit-animation: .4s fadein-right ease-out forwards;
    animation: .4s fadein-right ease-out forwards;
    opacity: 0;
}

.s_1 {
    animation-delay: 1s;
}

.s_2 {
    animation-delay: 1.2s;
}

.s_3 {
    animation-delay: 1.4s;
}

@keyframes fadein-anime {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.anime-fadein-left {
    -webkit-animation: .6s fadein-left ease-out forwards;
    animation: .6s fadein-left ease-out forwards;
}

.anime-fadein-in {
    animation-name: fadein-anime;
    animation-duration: 1s;
    animation-delay: .2s;
    animation-fill-mode: forwards;
    opacity: 0;
}

.rotation_right {
    animation: 6s linear infinite rotation_right;
}

@keyframes rotation_right {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.rotation_left {
    animation: 6s linear infinite rotation_left;
}

@keyframes rotation_left {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(-360deg);
    }
}

.anime-up-down {
    animation: 1s ease infinite up-down;
}

@keyframes up-down {

    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    50% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }

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

}