.swiper-banner {
    width: 100vw;
    height: 1200px;
    max-height: 90vh;
  }
  .swiper-slide{
    background: #000000;
    color: #FFFFFF;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .contents{
      position: absolute;
      top: 50%;
      left: 15%;
      transform: translateY(-50%);
      width: 80%;
      h2{
        margin: 0;
        font-size: clamp(1.3rem, 2vw, 2rem);
        font-weight: 400;
      }
      h1{
        margin: 10px 0;
        font-size: clamp(3rem, 4vw, 5rem);
      }
      p{
        font-size: clamp(1rem, 2vw, 1.6rem);
        width: 100%;
        max-width: 600px;
      }
      button{
        margin-top: 20px;
        background: none;
        border: none;
        color:#FFFFFF;
        font-size: clamp(1rem, 2vw, 1.4rem);
        position: relative;
      }
      button::after{
        z-index: -1;
        position: absolute;
        left: -10px;
        top: 50%;
        transform: translateY(-50%);
        content: "";
        width: 50px;
        height: 50px;
        border: 1px solid #FFFFFF;
        border-radius: 50px;
        transition: all 0.8s ease;
      }
      button:hover{
        color: #000000;
      }
      button:hover::after{
        width: 120%;
        background: #ffffff;
      }
    }
  }
.swiper-button-next::after, .swiper-button-prev::after {
  content: "";
}

.swiper-button-next {
  width: 10vw;
  background-image: url(/assets/icons/arrow-next.svg) !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.swiper-button-prev {
  width: 10vw;
  background-image: url(/assets/icons/arrow-prev.svg) !important;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.contents h2, .contents h1, .contents p, .contents button {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.6s ease-in-out;
}

.swiper-slide-active .contents h2 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.swiper-slide-active .contents h1 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}

.swiper-slide-active .contents p {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.6s;
}

.swiper-slide-active .contents button {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.8s;
}