.swiper-container {
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    .swiper-slide {
      position: relative;
    }

    .slide-1 {
      /* background-color: deeppink; */
      background-color: #fff0f0;
    }

    .slide-2 {
      /* background-color: dodgerblue; */
      background-color: #7df5a1;
    }

    .slide-3 {
      /* background-color: deepskyblue; */
      background-color: #fff0f0;
    }

    .slide-captions {
      position: absolute;
      top: 50%;
      left: 5%;
      transform: translateY(-50%);
      color: #fff;
      z-index: 99;
      width: 45%;
    }

    .slide-captions .current-title {
      margin: 0;
      font-size: 40px;
      font-weight: bold;
      color: #000000;
      /* width: 200px; */
    }

    .slide-captions .current-subtitle {
      margin: 10px 0 0;
      font-size: 28px;
      /* width: 150px; */
    }

    .slide-captions .btn {
      margin-top: 30px;
      padding: 10px;
      font-size: 15px;
      background-color: #5fcf80;
      text-align: center;
      display: inline-block;
      width: 160px;
      font-weight: bold;
      border-radius: 50px;
    }


    .slide-thumb {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      bottom: 0;
      right: 0;
      top: 0;
      width: 45vw;
      height: 100%;
      overflow: hidden;
      z-index: 2;
    }

    .slide-thumb img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .thumb-title {
      z-index: 9999;
      position: absolute;
      bottom: 0;
      left: 10px;
      color: #fff;
    }

    .swiper-pagination-bullet-active {
      background-color: #fff;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets {
      bottom: 50px;
    }

    .swiper-button-prev,
    .swiper-button-next {
      color: #fff;
    }