@charset "utf-8";

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

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

.mask_txt {
    position: relative;
    color: rgba(14,14,14,.25);
    contain: content;
    opacity: 1;
}
.mask_txt::after {
    content: attr(data-text);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-mask-image: linear-gradient(to right, #fff, #fff 95%, rgba(255, 255, 255, 0));
    mask-image: linear-gradient(to right, #fff, #fff 95%, rgba(255, 255, 255, 0));
    -webkit-mask-size: 110% 100%;
    mask-size: 110% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 1100% 0%;
    mask-position: 1100% 0%;
    transition-property: -webkit-mask-position;
    transition-property: mask-position;
    transition-property: mask-position, -webkit-mask-position;
    transition-duration: 1.4s;
    transition-timing-function: cubic-bezier(0.4, 0.1, 0.05, 1);
}
/*---------------- 
   Loading
------------------*/
.loading_text {
    animation: loading_text 1s ease-in-out 0s 1 forwards;
}
@keyframes loading_text {
    0% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/*---------------- 
   Headeer_Navi
------------------*/
.body_fix .menu-wrap {
    animation: fadein 0.3s ease-in-out forwards;
}
@keyframes fadein {
    0% {
        opacity: 0;
        visibility: hidden;
    }
    100% {
        opacity: 1;
        visibility: visible;
    }
}
.body_scroll .menu-wrap {
    animation: fadeout 0.3s ease-in-out forwards;
}
@keyframes fadeout {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
/*---------------- 
   MV
------------------*/
.header_end .header_logo,
.header_end .menu-mobile {
    animation: header_end 1s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}

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

.mv_img_box_end {
    animation: mv_img_box_end 2s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}

@keyframes mv_img_box_end {
    0% {
        transform: scale(1.5);
        opacity: 0;
    }
    100% {
        transform: scale(1.2);
        opacity: 1;
    }
}
.mv_text_box_end h1 span::after,
.mv_text_box_end .text::after{
    animation: mask_txt 2s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}

@keyframes mask_txt {
    0% {
        -webkit-mask-position: 1100% 0%;
        mask-position: 1100% 0%;
    }
    100% {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
}
@media screen and (max-width: 768px) {
    .mv_text_box_end h1::after {
    animation: mask_txt 2s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}
}
/*---------------- 
   MAIN SECTION
------------------*/
.mask_txt.animated::after{
    animation: mask_txt 2s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}
.animateImg.animation {
    opacity: 1;
}
.animateImg.animated {
    animation: animateImg 1s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}
@keyframes animateImg {
    0% {
        transform: scale(1.2) rotate(4deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

.animateBox.animated .box {
    animation: fadeUp 1s cubic-bezier(0.32, 0.94, 0.6, 1) 0s 1 forwards;
}

@keyframes fadeUp {
    0% {
        transform: translateY(50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.newsWrap.animated li:nth-of-type(1) {
    animation: fadeInleft 1s ease-in-out 0s 1 forwards;
}
.newsWrap.animated li:nth-of-type(2) {
    animation: fadeInleft 1s ease-in-out 0.2s 1 forwards;
}
.newsWrap.animated li:nth-of-type(3) {
    animation: fadeInleft 1s ease-in-out 0.4s 1 forwards;
}
@keyframes fadeInleft {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(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%;
    }
}