@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

.bgtextend {
    animation-name: fvCopy;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-delay: 1.2s;
    /* opacity: 0; */
    color: rgba(231, 84, 0, 0);
}

@keyframes fvCopy {
    from {
        color: rgba(26, 26, 26, 0);
    }
    to {
        color: rgba(26, 26, 26, 1);
    }
}

.bgtextend::before {
    animation-name: bgextendAnimeBase;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    animation-timing-function: ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: #fff;
    opacity: 0;
}

@keyframes bgextendAnimeBase {
    0% {
        width: 0;
        opacity: 0;
    }
    40% {
        opacity: 1;
        width: 0;
    }
    100% {
        opacity: 1;
        width: 100%;
    }
}

.bgtexture-anime {
    animation-name: bgtextureAnime;
    animation-duration: 0.6s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    animation-timing-function: ease;
    transform: translate(-50%, 100%);
}

@keyframes bgtextureAnime {
    0% {
        opacity: 0;
        transform: translate(-50%, 100%);
    }
    1% {
        opacity: 1;
        transform: translate(-50%, 100%);
    }
    100% {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

.bgimg-anime {
    &::before {
        animation-name: bgimgAnime;
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-delay: 0.6s;
        animation-timing-function: ease;
        transform: translate(32px, 32px);
        opacity: 0;
    }
}

@keyframes bgimgAnime {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    1% {
        transform: translate(0, 0);
        opacity: 1;
    }
    100% {
        transform: translate(32px, 32px);
        opacity: 1;
    }
}

@media screen and (max-width: 900px) {
    @keyframes bgimgAnime {
        0% {
            transform: translate(0, 0);
            opacity: 0;
        }
        100% {
            transform: translate(16px, 16px);
            opacity: 1;
        }
    }
}

.delay1 {
    animation-delay: 0.2s;
}

.delay2 {
    animation-delay: 0.3s;
}

.delay3 {
    animation-delay: 0.4s;
}

.delay4 {
    animation-delay: 0.5s;
}

.delay5 {
    animation-delay: 0.6s;
}

.delay6 {
    animation-delay: 0.7s;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeUpAnime {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeIn {
    animation-name: fadeInAnime;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeInAnime {
    0% {
        filter: blur(10px);
        opacity: 0;
    }
    70% {
        filter: blur(0px);
        opacity: 1;
    }
    100% {
        filter: blur(0px);
        opacity: 1;
    }
}

.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadeDownAnime {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadel-r {
    animation-name: fadel-rAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fadel-rAnime {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fader-l {
    animation-name: fader-lAnime;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    opacity: 0;
}

@keyframes fader-lAnime {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}