@charset "utf-8";

:root {
  --color: rgba(255, 255, 255, 0.7);
}


.vs_wrap {width:100%;height:100%;position:relative;margin:0 auto;}

.vs_swiper .image_box {width:100%;height:100%;overflow: hidden;}
.vs_swiper .image_box img {width:100%;height:100%;object-fit: cover;z-index:-1;}

.vs_slide_btn button {background:transparent;border:none;font-size:2rem;position:absolute;margin-top:2px;}

.vs_swiper {width:100%;height:100%;}
.vs_swiper .swiper-container {width:100%;height:100%;}
.vs_swiper .swiper-slide {width:100%;height:100%;position:relative;overflow: hidden;}
.vs_slide_btn button.d_start {display:none;}
.nav_wrap {display:flex;}
.vs_slide_btn {margin-left:1rem;}

.navigator-wrap {width:17rem;height:2rem;position:absolute;bottom:6%;right:5%;}
.vs_pager {position:relative;width:100%;}
.vs-next,.vs-prev {width:auto !important;height:auto !important;position:absolute !important;top:50% !important;transform:translateY(-50%) !important;z-index:100 !important;cursor:pointer;margin-top:0 !important}
.vs-next{right:0 !important}
.vs-prev{left:0 !important}
.vs-next img, .vs-prev img {height:1.5rem;opacity: 0.5;}
.vs_swiper .swiper-pagination {font-size:1.6rem;line-height:1.6rem;font-weight:600;color:#eee;letter-spacing: -0.025em;}
.vs_main_cont_wrap {
  pointer-events: none;
  position:absolute;left:50%;
  transform:translateX(-50%);
  top:22%;
  color:#fff;z-index: 100;
  text-align: right;
}
.vs_main_cont_wrap img {height:42rem;}
.swiper-button-next, .swiper-container-rtl, .swiper-button-prev {background-image:none !important}

@keyframes scaleX {
0% { transform: scaleX(0); }
100% { transform: scaleX(1); }
}

.vs_swiper .progress-bar-wrap {width:45rem;height:2px;position:absolute;bottom:10rem;left:12.5%;}
.vs_swiper .swiper-progress-bar {
    position: relative;
    width: 100%;
    display: block;
    z-index: 100;
    height: 2px;
    position: absolute;
    bottom:20%;right:0%;
    z-index: 100;
  }
  .vs_swiper .swiper-progress-bar .slide_progress-bar {
    position: absolute;
    height: 2px;
    background: #fff;
    width: auto;
    clear: both;
    opacity: 0;
    bottom:10%;right:0;left:0;
    
  }
  .vs_swiper .swiper-progress-bar .slide_progress-bar:after {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    height: 100%;
    width: 0;
    content: "";
    transition: 0.1s width linear;
  }
  .vs_swiper .swiper-progress-bar.active .slide_progress-bar {
    opacity: 1;
  }
  .vs_swiper .swiper-progress-bar.animate .slide_progress-bar:after {
    transition: width linear;
    transition-delay: unset;
    width: 100%;
    transition-duration: 5s;
  }

  
.scroll-down {
  position:absolute;left:50%;bottom:5%;
  z-index: 1000;
  transform:translateX(-50%);
}

.container_mouse {
  text-align: center;
  color: var(--color);
  font-weight: bold;
  font-size:1.5rem;
  text-transform: uppercase;
  padding-top: 2rem;
  cursor: pointer;
}

.container_mouse .mouse-btn {
  margin: 10px auto;
  width: 4rem;
  height: 8rem;
  border: 0.3rem solid var(--color);
  border-radius: 3rem;
  display: flex;
}

.container_mouse .mouse-btn .mouse-scroll {
  display: block;
  width: 2rem;
  height: 2rem;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7));
  border-radius: 50%;
  margin: auto;
  animation: scrolling 1s linear infinite;
}


@keyframes scrolling {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }

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