@charset "utf-8";

.hero-swiper{
  width: 100%;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
}

.hero-swiper::after{
  content: '';
  display: block;
  padding-top: calc(741 / 1400 * 100%);
}

@media all and (max-width: 896px) {
  .hero-swiper::after{
    padding-top: calc(672 / 375 * 100%);
  }
}

@media all and (max-width: 896px) {
  .hero-swiper{
    margin-top: 69px;
    padding-top: 0;
    height: 100%;
  }
}

.hero-swiper-wrapper{
  width: 100%;
  height: 95%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

@media all and (max-width: 896px) {
  .hero-swiper-wrapper{
    height: 100%;
  }
}

.slider__nav{
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  z-index: 15;
}

@media all and (max-width: 896px) {
  .slider__nav{
    right: 24px;
  }
}

.slider-bullet{
  background-color: #DBDBDB;
  width: 4px;
  height: 26px;
  margin-bottom: 5px;
  transition: 3s cubic-bezier(0.65, 0.0, 0.35, 1.0);
  cursor: pointer;
}

@media all and (max-width: 896px) {
  .slider-bullet{
    width: 1px;
  }
}

.slider-bullet-active{
  background-color: #F69602;
}

.hero-slide{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zINdex-10{
  z-index: 10;
}

.slide-prev{
  animation: slide-prev 3s cubic-bezier(0.65, 0.0, 0.35, 1.0) forwards;
  z-index: 5;
}

.slide-active{
  animation: slide-active 3s cubic-bezier(0.65, 0.0, 0.35, 1.0) forwards;
  z-index: 10;
}

.slide-next{
  animation: slide-next 3s cubic-bezier(0.65, 0.0, 0.35, 1.0) forwards;
  opacity: 0;
}

@keyframes slide-prev {
  0%{
    left: 0;
  }
  100%{
    left: -33%;
  }
}

@keyframes slide-active {
  0%{
    left: 33%;
  }
  100%{
    left: 0;
  }
}

@keyframes slide-next {
  0%{
    left: 66%;
  }
  100%{
    left: 33%;
  }
}

.slide-prev .filter-image{
  animation: slide-prev-filter 3s cubic-bezier(0.65, 0.0, 0.35, 1.0) forwards;
}
.slide-active .filter-image{
  animation: slide-active-filter 3s cubic-bezier(0.65, 0.0, 0.35, 1.0) forwards;
}

@keyframes slide-prev-filter {
  0%{
    opacity: 1;
    filter: blur(0);
  }
  100%{
    opacity: 0;
    filter: blur(10px);
  }
}

@keyframes slide-active-filter {
  0%{
    opacity: 0;
    filter: blur(10px);
  }
  50%{
  }
  100%{
    opacity: 1;
    filter: blur(0);
  }
}