.loading-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
}

.loading-page>.bg {
    position: relative;
    width: 100%;
    height: 100%;
}

.loading-page>.bg {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: #f2f2f2;
    opacity: 1;
    transition: transform .7s cubic-bezier(1, 0, .55, 1);
}

.loading-page .loading-content {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-page.inprocess .loader-text {
    opacity: 0;
    transform: translateY(2rem);
}

/** Logo */
.loading-page .logo-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    padding: .5rem 0;
    max-width: 282px;
    transform: scale(1.2);
    animation: showLogo .5s ease-in-out;
}
@keyframes showLogo {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.loading-page .logo>img.part {
    position: absolute;
    width: auto;
}
.loading-page .logo>img.part.part-01 {
    top: 32.2%;
    left: 0;
    height: 16%;
    max-height: 15.5px;
}
.loading-page .logo>img.part.part-02 {
    top: 21%;
    left: 33.52%;
    height: 14%;
    max-height: 13.5px;
}
.loading-page .logo>img.part.part-03 {
    top: 21%;
    left: 89.93%;
    height: 18%;
    max-height: 17px;
}
.loading-page .logo>img.part.part-01 {
    animation: logoPart011 .6s ease-in-out;
    animation-delay: 0.1s;
}

.loading-page .logo.new-logo>img:not(.part) {
    width: 250px;
}
.loading-page .logo.new-logo>img.part.part-01 {
    top: 38.2%; left: 0; height: 16%; max-height: 15.5px;
}
.loading-page .logo>img.part.part-02 {
    top: 29%; left: 36.5%; height: 12%;
}
.loading-page .logo>img.part.part-03 {
    top: 29%; left: 91.2%; height: 12%;
}

.loading-page .logo>img.part.part-02 {
    animation: logoPart02 .6s ease-in-out;
    animation-delay: 0.1s;
}

.loading-page .logo>img.part.part-03 {
    animation: logoPart03 .6s ease-in-out;
    animation-delay: 0.1s;
}


.loading-page.inprocess .logo-wrapper {
    opacity: 0;
    /* transform: translateY(-20vh);
    transition: transform ease-in-out .6s, opacity ease-in-out .5s; */
}
/* .loading-page.inprocess-2 .logo-wrapper {
    opacity: 1;
    margin-bottom: 7rem;
    transition: ease-in-out .4s;
    transform: translateY(0);
    transition: transform ease-in-out .6s, opacity ease-in-out .5s;
}
.loading-page.inprocess-2 .logo>img.part.part-01 {
    animation: logoPart11 .6s ease-in-out;
    animation-delay: 0.5s;
}
.loading-page.inprocess-2 .logo>img.part.part-02 {
    animation: logoPart12 .6s ease-in-out;
    animation-delay: 0.5s;
}

.loading-page.inprocess-2 .logo>img.part.part-03 {
    animation: logoPart13 .6s ease-in-out;
    animation-delay: 0.5s;
} */


/** slogan */
.loading-page .loading-slogan {
    position: absolute;
    display: inline-flex;
    gap: 0px 20px;
    flex-wrap: wrap;
    /* animation: waviy 1s;
    animation-delay: 0.1s; */
    /* padding-top: 2rem; */
}
.loading-page.inprocess-2 .loading-slogan span {
    display: inline-block;
    /* animation: waviy 1s ease-in-out; */
    /* animation-delay: 0.1s; */
    /* animation-delay: calc(.05s * var(--i)); */
    text-shadow: 1.5px 1.5px #c3c3c3 ;
    /* transform: scale(0.8); */
}
.loading-page .loading-slogan .text-1,
.loading-page .loading-slogan .text-2 {
    opacity: 0;
}
.loading-page.inprocess .loading-slogan .text-1,
.loading-page.inprocess .loading-slogan .text-2 {
    opacity: 1;
}
.loading-page.inprocess .loading-slogan .text-1 {
    animation: moveTop 1s;
}
.loading-page.inprocess .loading-slogan .text-2 {
    animation: moveBottom 1s;
}

@keyframes moveTop {
    0% {
        /* opacity: 1; */
        transform: translateY(-55vh);
    }

    100% {
        /* opacity: 1; */
        transform: translateY(0);
    }
}

@keyframes moveBottom {
    0% {
        opacity: 1;
        transform: translateY(55vh);
    }

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

@keyframes waviy {
    /* 0%,40%,100% {
    }
    20% {
        transform: scale(1.3);
    } */
    0% {transform: scale(0.8);}
    50% {transform: scale(1.2);letter-spacing: 0.75rem;}
    100% {transform: scale(0.8);}
}

@keyframes logoPart11{
    0% {transform:rotate(0);}
    30% {transform:rotate(-15deg);}
    60% {transform:rotate(0);}
    100% {transform:rotate(0);}
}
@keyframes logoPart12{
    0% {transform:translateY(0);}
    30% {transform:translateY(-45%);}
    60% {transform:translateY(0);}
    100% {transform:translateY(0);}
}
@keyframes logoPart13{
    0% {transform:translateY(0);}
    30% {transform:translateY(-45%);}
    60% {transform:translateY(0);}
    100% {transform:translateY(0);}
}