.header-warp{
    position: fixed;
    background: url('../images/home/header-bg.png') no-repeat top / 100% 100%;
}
.header-warp .header-nav-link{
    transition: all .3s;
}
.header-warp.white .header-nav-link{
    color: #ffffff;
}
.header-warp.white .logo-img{
    background: url('../images/home/logo-white.png') no-repeat top / 100% 100%;
}
.header-warp.white .header-nav-link{
    border-color: #ffffff!important;
}

.bg-primary-he, .footer-warp{
    display: none;
}


/*section-screen*/
.section-screen{
    /*display: none;*/
    opacity: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    transition: .2s;
}
.section-screen.show{
    /*display: block;*/
    opacity: 1;
    z-index: 4;
}


/*home-screen1*/
.home-screen1.animation:before{
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    animation: home-screen1-before 2s ease-out;
    animation-fill-mode: forwards;
    pointer-events: none;
}
@keyframes home-screen1-before {
    0%{
        background: rgba(255, 255, 255, 1);
    }
    39%{
        background: rgba(255, 255, 255, 1);
    }
    40%{
        background: rgba(255, 255, 255, 0);
    }
    100%{
        background: rgba(255, 255, 255, 0);
        /*display: none;*/
        z-index: 0;
    }
}

.home-screen1.animation:after{
    content: '';
    width: 0;
    height: 100%;
    background: var(--primary-color);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    animation: home-screen1-after 2s ease-out;
    animation-fill-mode: forwards;
}
@keyframes home-screen1-after {
    0%{
        width: 0;
        height: 100%;
    }
    40%{
        width: 100%;
        height: 100%;
        right: 0;
    }
    60%{
        width: 100%;
        height: 100%;
        right: calc(100% - 550px);
    }
    100%{
        width: 100%;
        height: 128px;
        right: calc(100% - 550px);
        z-index: 0;
    }
}

.home-screen1.animation .screen1-swiper-warp{
    animation: screen1-swiper-warp 2.5s ease-out;
    animation-fill-mode: forwards;
}
@keyframes screen1-swiper-warp {
    0%{
        opacity: 0;
    }
    80%{
        opacity: 0;
        z-index: 6;
    }
    100%{
        opacity: 1;
        z-index: 6;
    }
}

.home-screen1.animation .screen1-swiper-warp .swiper-button-next{
    animation: swiper-button-prev-next 2.5s ease-out;
    animation-fill-mode: forwards;
}
@keyframes swiper-button-prev-next {
    0%{
        width: 0;
    }
    80%{
        width: 0;
    }
    100%{
        width: 50px;
    }
}


/*home-screen2*/
.home-screen2{
    background: #20a8cb;
}
.home-screen2 .screen2-box img{
    height: 100vh;
    object-fit: fill;
}

/*home-screen3*/
.home-screen3.animation:before{
    content: '';
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 1);
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 4;
    animation: home-screen3-before 2s ease-out;
    animation-fill-mode: forwards;
    pointer-events: none;
}
@keyframes home-screen3-before {
    0%{
        background: rgba(255, 255, 255, 1);
    }
    39%{
        background: rgba(255, 255, 255, 1);
    }
    40%{
        background: rgba(255, 255, 255, 0);
    }
    100%{
        background: rgba(255, 255, 255, 0);
        z-index: 0;
    }
}

.home-screen3.animation:after{
    content: '';
    width: 0;
    height: 100%;
    background: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    animation: home-screen3-after 2s ease-out;
    animation-fill-mode: forwards;
}
@keyframes home-screen3-after {
    0%{
        width: 0;
        height: 100%;
    }
    50%{
        width: 100%;
        height: 100%;
        left: 0;
    }
    100%{
        width: 194px;
        height: 100%;
        left: calc(100% - 194px);
        z-index: 0;
    }
}

.home-screen3.animation .swiper-button-map{
    animation: swiper3-button-map 2.5s ease-out;
    animation-fill-mode: forwards;
}
@keyframes swiper3-button-map {
    0%{
       opacity: 0;
    }
    80%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}


.home-screen3.animation .screen3-swiper-warp .swiper-button-prev{
    animation: swiper3-button-prev-next 2.5s ease-out;
    animation-fill-mode: forwards;
}
@keyframes swiper3-button-prev-next {
    0%{
        width: 0;
    }
    80%{
        width: 0;
    }
    100%{
        width: 70px;
    }
}


/*home-screen5*/
.home-screen5 .screen5-box-1 img,
.home-screen5 .screen5-box-2 img
{
    height: 100vh;
    object-fit: fill;
}



/*all*/
.animation .animation-up{
    transform: translateY(100%);
    animation: home-screen-up 1.0s ease-out;
    animation-fill-mode: forwards;
}

@keyframes home-screen-up {
    0%{
        transform: translateY(100%);
    }
    100%{
        transform: translateY(0%);
    }
}

.animation .animation-down{
    transform: translateY(-100%);
    animation: home-screen-down 1.0s ease-out;
    animation-fill-mode: forwards;
}
@keyframes home-screen-down {
    0%{
        transform: translateY(-100%);
    }
    100%{
        transform: translateY(0%);
    }
}

.animation .animation-to-big{
    transform: scale(0);
    animation: home-screen-to-big 1.0s ease-out;
    animation-fill-mode: forwards;
}
@keyframes home-screen-to-big {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(1);
    }
}

.animation .animation-to-op1{
    opacity: 0;
    animation: home-screen-top-op1 1.0s ease-out;
    animation-fill-mode: forwards;
}

@keyframes home-screen-top-op1 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

.animation .animation-delay-1{
    animation-delay: 1s;
}
.animation .animation-delay-2{
    animation-delay: 2s;
}