@charset "utf-8";

/*---------------- 
   BASE 
------------------*/

.animation {
    opacity: 0;
}

.word,
.char {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}

/*---------------- 
   Loading
------------------*/
.loading_text {
    animation: loading_text 1s ease-in-out 0s 1 alternate;
}
@keyframes loading_text {
    0% {
        transform: translate(-50%, -50%) skew(0deg, 8deg);
    }
    100% {
        transform: translate(-50%, -50%) skew(0deg, 0deg);
    }
}
.loading_text .word {
    overflow: hidden;
}

.loading_text .word .char {
    animation: loading_start 1s ease-in-out 0s 1 alternate;
}

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

/*---------------- 
   MV
------------------*/
.header_end .menu-container,
.header_end .menu-mobile {
    animation: header_end 2s cubic-bezier(0.600, 0.000, 0.000, 1.000) 0s 1 forwards;
}

@keyframes header_end {
    0% {
        transform: translateY(-30px);
        opacity: 0;
    }
    100% {
        transform: translateY(0px);
        opacity: 1;
    }
}

.mv_left_end .mv_leftImg_bg {
    animation: mv_leftImg_bg 1s ease-in-out 0s 1 forwards;
}

@keyframes mv_leftImg_bg {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

.mv_right_end .animateTtl {
    animation: animateTtl 1s ease-in-out 0s 1 forwards;
}
.mv_right_end .animateTtl .word .char {
    animation: animateTtl_char 1s ease-in-out 0s 1 forwards;
}
@media screen and (max-width: 768px) {
    
}

/*---------------- 
   MAIN SECTION
------------------*/

.animateTtl.animated,
.is_show .animateTtl {
    animation: animateTtl .7s ease-in-out 0s 1 forwards;
}

@keyframes animateTtl {
    0% {
        transform: skew(0deg, 8deg);
        opacity: 0;
    }
    100% {
        transform: skew(0deg, 0deg);
        opacity: 1;
    }
}
.mv_right_end .animateTtl .word .char,
.animateTtl.animated .word .char,
.is_show .animateTtl .word .char {
    animation: animateTtl_char .7s ease-in-out 0s 1 forwards;
}

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

.animateTxt.animated,
.is_show .animateTxt {
    animation: animateTxt .7s ease-in-out 0s 1 forwards;
}

@keyframes animateTxt {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.animatebd::before {
    width: 0;
}
.animatebd.animated::before {
    animation: animatebd .7s ease-in-out 0.5s 1 forwards;
}
@keyframes animatebd {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.animateImg.animated {
    animation: animateImg .7s ease-in-out 0s 1 forwards;
}
@keyframes animateImg {
    0% {
        transform: scale(1.2) rotate(4deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

.modal_grid_img.animated {
    animation: animateImg .7s ease-in-out 0s 1 backwards;
    transform: scale(1) rotate(0);
    opacity: 1
}
@keyframes animateImg {
    0% {
        transform: scale(1.2) rotate(4deg);
        opacity: 0;
    }
    100% {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}