/* ========================================
Loading
======================================== */

.loading{
    position: fixed;
    inset: 0;
    z-index: 9999;

    background: #fff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.loading.is-hide{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}



/* ========================================
Loading Animation
======================================== */

.loading-animation{
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-bottom: 100px;

    background: #003894;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .6s ease,
        visibility .6s ease;
}

.loading-animation.is-show{
    opacity: 1;
    visibility: visible;
}

.loading-animation img{
    width:280px;
    margin:0;
}





.kv-f1{
opacity:0;
}
.loaded .kv-f1.ose{
opacity:1;
transition:opacity 1s 0s;
}
.kv-f2{
opacity:0;
}
.loaded .kv-f2.ose{
opacity:1;
transition:opacity 1.4s .4s;
}
.kv-f3{
opacity:0;
}
.loaded .kv-f3.ose{
opacity:1;
transition:opacity 1.2s 1.4s;
}
.kv-mu{
opacity:0;
transform: translateY(60px);
}
.loaded .kv-mu.ose{
opacity:1;
transform: translateY(0);
transition:opacity 1s 0.8s,transform 1s 0.8s;
}
.kv-sc{
transform: scale(0);
}
.loaded .kv-sc.ose{
transform: scale(1);
transition:transform 1s 1.4s;
}



.sc{
transform: scale(0);
}
.sc.scrolled{
transform: scale(1);
transition:transform 0.7s 0s;
}
.loaded .sc.ose{
transform: scale(1);
transition:transform 0.7s ;
}


.f0{
opacity:0;
}
.f0.scrolled,
.loaded .f0.ose{
opacity:1;
transition:opacity 1s 0s;
}
.f1{
opacity:0;
}
.f1.scrolled,
.loaded .f1.ose{
opacity:1;
transition:opacity 1s .4s;
}
.f2{
opacity:0;
}
.f2.scrolled,
.loaded .f2.ose{
opacity:1;
transition:opacity 1s .8s;
}
.f3{
opacity:0;
}
.f3.scrolled,
.loaded .f3.ose{
opacity:1;
transition:opacity 1s 1.2s;
}
.f4{
opacity:0;
}
.f4.scrolled,
.loaded .f4.ose{
opacity:1;
transition:opacity 1s 1.4s;
}
.f5{
opacity:0;
}
.f5.scrolled{
opacity:1;
transition:opacity 1s 1.8s;
}




.cl{
clip-path: inset(0 100% 0 0);
}
.cl.scrolled{
clip-path: inset(0);
transition:clip-path 2s;
}


.mu1-no{
transform: translateY(40px);
}
.mu1-no.scrolled{
transform: translateY(0);
transition:transform 0.9s 0s;
}
.mu1{
opacity:0;
transform: translateY(40px);
}
.mu1.scrolled,
.loaded .mu1.ose{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0s,transform 0.9s 0s;
}
.mu2{
opacity:0;
transform: translateY(40px);
}
.mu2.scrolled,
.loaded .mu2.ose{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0.4s,transform 0.9s 0.4s;
}
.mu3{
opacity:0;
transform: translateY(40px);
}
.mu3.scrolled,
.loaded .mu3.ose{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 0.8s,transform 0.9s 0.8s;
}
.mu4{
opacity:0;
transform: translateY(40px);
}
.mu4.scrolled,
.loaded .mu4.ose{
opacity:1;
transform: translateY(0);
transition:opacity 0.9s 1.2s,transform 0.9s 1.2s;
}

.tl{
opacity:0;
transform: translateX(40px);
transition:opacity 1s 0s,transform 1s 0s;
}
.tl.scrolled{
opacity:1;
transform: translateX(0);
transition:opacity 1s 0s,transform 1s 0s;
}
.tr{
opacity:0;
transform: translateX(-40px);
transition:opacity 1s 0s,transform 1s 0s;
}
.tr.scrolled{
opacity:1;
transform: translateX(0);
transition:opacity 1s 0s,transform 1s 0s;
}
.tl-no{
transform: translateX(40px);
transition:transform 1s 0s;
}
.tl-no.scrolled{
transform: translateX(0);
transition:transform 1s 0s;
}
.tr-no{
transform: translateX(-40px);
transition:transform 1s 0s;
}
.tr-no.scrolled{
transform: translateX(0);
transition:transform 1s 0s;
}
.cly{
clip-path: inset(0 0 100% 0);
}
.cly.scrolled{
clip-path: inset(0);
transition:clip-path 1s 0s;
}


a:hover{
opacity:0.7;
transition: .4s opacity;
}
.slick-prev:hover, .slick-next:hover,
.swiper-button-next:hover,.swiper-button-prev:hover,
.entry-modal-close-box:hover,
.menu-btn-box:hover{
opacity:0.7;
cursor: pointer;
transition: .4s opacity;
}


@media (max-width: 1000px) {

}
@media (max-width: 767px) {  
.loading-animation img{
    width:200px;
    margin:0;
}
.f0.scrolled,
.f1.scrolled,
.f2.scrolled,
.f3.scrolled,
.f4.scrolled,
.f5.scrolled{
opacity:1;
transition:opacity 1s 0s;
}
.mu2.scrolled{
transition:opacity 0.9s 0s,transform 0.9s 0s;
}
.slick-prev:hover, .slick-next:hover, .swiper-button-next:hover, .swiper-button-prev:hover, .entry-modal-close-box:hover, .menu-btn-box:hover {
    opacity: 1;
}


}