html {
    height: 100%;
}

.html {
    width     : 100%;
    position  : absolute;
    left      : 0;
    top       : 0;
    transition: top .5s ease-in-out;
}

body {
    height  : 100%;
    overflow: hidden;
    position: relative;
}

.body {
    width   : 100%;
    height  : 100vh;
    overflow: auto;
}

.body-inner {
    margin-top: 90px;
}

.banner .swiper-slide {
    position: relative;
}

.banner-wrap {
    width   : 100%;
    height  : 100vh;
    overflow: hidden !important;
    position: relative;
}

#banner {
    height: 100vh;
}

#banner .swiper-slide {
    position: relative;
    overflow: hidden;
}

#banner .swiper-slide .banner-text-img {
    width    : 100%;
    position : absolute;
    left     : 50%;
    top      : 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

#banner .swiper-slide .banner-text-img img {
    width: 100% ;
}

#banner .swiper-slide .banner-img.for-height {
    height   : 100%;
    position : absolute;
    left     : 50%;
    top      : 0;
    transform: translateX(-50%);
}

#banner .swiper-slide .banner-img.for-width {
    width    : 100%;
    position : absolute;
    left     : 0;
    top      : 50%;
    transform: translateY(-50%);
}

.swiper-container-horizontal>.swiper-pagination-bullets {
    width          : 20px;
    height         : 300px;
    display        : flex;
    flex-direction : column;
    justify-content: space-around;
    align-items    : center;
    position       : absolute;
    right          : 5%;
    top            : 50%;
    transform      : translateY(-50%);
    z-index        : 100;
    bottom         : auto;
    left           : auto;
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    width        : 20px;
    height       : 20px;
    border-radius: 50%;
    border       : solid 3px #fff;
    cursor       : pointer;
    transition   : all .5s ease-in-out;
    background   : none;
    opacity      : 1;
}

.swiper-pagination-clickable .swiper-pagination-bullet-active {
    background  : #FFC001;
    border-color: #FFC001;
}

.scroll-lock {
    width        : 40px;
    height       : 60px;
    border       : solid 3px #fff;
    border-radius: 20px;
    position     : absolute;
    left         : 50%;
    transform    : translateX(-50%);
    bottom       : 50px;
    z-index      : 100;
    cursor       : pointer;
}

.scroll-lock-spot {
    width        : 6px;
    height       : 6px;
    border-radius: 50%;
    background   : #fff;
    position     : absolute;
    top          : 15px;
    left         : 50%;
    transform    : translateX(-50%);
    z-index      : 100;
    animation    : spotRun 3s ease-in-out infinite alternate;
}

@keyframes spotRun {
    30% {
        top: 35px;
    }

    50% {
        top: 30px;
    }

    60% {
        top: 35px;
    }

    100% {
        top: 15px;
    }
}

@media screen and (max-width:600px) {
    #banner .swiper-slide .banner-text-img img{
        width:150%;
        position: absolute;
        left:50%;
        top:50%;
        transform: translate(-50%,-50%);
    }
    .swiper-pagination-clickable .swiper-pagination-bullet{
        width:12px;
        height:12px;
    }
}