/* ------------------------------------------------------------------------------- */

/* 모달 영역-2 */
.modal-area-2 {
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  padding: 13.0rem 4.0rem 4.0rem;
  background: rgb(0, 0, 0, 0.8);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: none;
  z-index: 100;

}
.modal-area-2.active {
  display: block;
}
.modal-area-2 .modal {
  display: none;
}
.modal-area-2 .modal.active {
  display: block;
}
.modal-area-2 .close-btn {
  width: 5.2rem;
  position: absolute;
  top: 4.0rem;
  right: 4.0rem;
}
.modal-area-2 .close-btn:hover > img {
  content: url(../img/ico_close.svg);
}


.modal.video {
  width: 100%;
  max-width: 96rem;
  border-radius: 1.2rem;
  overflow: hidden;
  height: auto;
  display: none;
}

/* 영상 모달 */
.video-modal {
  width: 90.0rem;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.video-modal h1 {
  margin-top: 6.0rem;
  color: #fff;
  font-size: 3.2rem;
  text-align: center;
  word-break: keep-all;
}
.video-modal .youtube-box {
  margin-top: 2.8rem;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  position: relative;
  /* 21:9 */
  /* padding-bottom: 42.8571%; */
  /* 16:9 */
  padding-bottom: 56.25%;
  /* 4:3 */
  /* padding-bottom: 75%; */
}
.video-modal .youtube-box iframe {
  z-index: 1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
}

@media (max-width:1320px) {
  .modal-area-2 .x-btn {
      /* width: 52rem; */
      top: auto;
      right: auto;
      left: 50%;
      transform: translateX(-50%);
      bottom: 11.6rem;
  }
  .video-modal {
      width: 58.0rem;
  }
  .video-modal h1 {
      font-size: 2.4rem;
  }
  .video-modal .youtube-box {
      margin-top: 2.0rem;
  }
  .modal-area-2 .close-btn {
      width: 4.8rem;
  }
}

@media (max-width:768px) {
  .modal-area-2 {
      padding: 4.0rem;
  }
  .modal-area-2 .x-btn {
      bottom: 6.8rem;
  }
  .video-modal {
      width: calc(100% - 40px);
  }
  .video-modal h1 {
      font-size: 1.2rem;
  }
  .video-modal .youtube-box {
      margin-top: 1.8rem;
  }
  .modal-area-2 .close-btn {
      width: 3.2rem;
      top: 3.2rem;
      right: 3.2rem;
  }
}

@media (max-width:590px) {
  .modal-area-2 {
      padding: 2.0rem;
  }
  .modal-area-2 .close-btn {
      width: 2.4rem;
      top: 2.0rem;
      right: 2.0rem;
  }
}



/* 공통 */
.swiper-type-1 {
    margin-top: 10.0rem;
    box-sizing: border-box;
    padding-bottom: 6.0rem;
  }
  .swiper-type-1 .swiper .swiper-wrapper .swiper-slide {
    cursor: pointer;
    flex-direction: column;
    background: transparent;
    opacity: 0.6;
    z-index: 1;
    transition: all 0.3s;
  }
  .swiper-type-1 .swiper .swiper-wrapper .swiper-slide.swiper-slide-active {
    opacity: 1;
    z-index: 2;
  }
  .swiper-type-1 .swiper .swiper-wrapper .swiper-slide .img-box {
    width: 100%;
  }
  .swiper-type-1 .swiper .swiper-wrapper .swiper-slide > h1 {
    font-size: 2.8rem;
    width: 100%;
    margin-top: 4.0rem;
  }
  .swiper-pagination {
    position: relative;
    top: 4.0rem;
    bottom: 0 !important;
    z-index: 3 !important;
  }
  .swiper-pagination .swiper-pagination-bullet {
    width: 4.0rem !important;
    height: 1.0rem !important;
    background: #153A60 !important;
    opacity: 1 !important;
    margin: 0 1.6rem !important;
    border-radius: 0;
  }
  .swiper-pagination .swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #00ACFC !important;
    box-shadow: 0px 0px 10px 0px #00ACFC;
  }
  .swiper-button-prev,
  .swiper-button-next {
    transform: translateY(-50%) !important;
    width: 6.0rem !important;
    height: 6.0rem !important;
    margin-top: 0 !important;
    z-index: 3 !important;
  }
  .swiper-button-prev {
    left: 8.0rem !important;
    right: auto !important;
    top: 40%;
  }
  .swiper-button-next {
    left: auto !important;
    right: 8.0rem !important;
    top: 40%;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    display: none !important;
  }
  .swiper-button-prev::before,
  .swiper-button-next::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
  }
  .swiper-button-prev::before {
    background: url(../img/arrow-left.svg) no-repeat center center/cover;
  }
  .swiper-button-next::before {
    background: url(../img/arrow-right.svg) no-repeat center center/cover;
  }


  .swiper-slide {
    transition: filter 0.3s ease; /* 부드러운 전환 효과 */
  }
  /* 활성 슬라이드(중앙)는 블러 없음 */
  .ytb-area .swiper-slide-active {
    filter: none;
  }
  /* 비활성 슬라이드(좌우)에 블러 적용 */
  .ytb-area .swiper-slide:not(.swiper-slide-active) {
    filter: blur(15rem); 
    opacity: 0.7; 
  }
  .ytb-area .video-thumb {
    cursor: pointer;
  }

  .ytb-text {
    font-size: 2.0rem;
    padding-top: 2.0rem;
  }
  @media (max-width: 1200px) {
    .ytb-text {
      font-size: 1.7rem;
      padding-top: 1.6rem;
    }
  }

  @media (max-width: 767px) {
    .ytb-text {
      font-size: 1.5rem;
      padding-top: 1.2rem;
    }
  }

  @keyframes rotate1 {
    to {
      transform: rotate(360deg);
    }
  }
  
  @keyframes bounce1 {
    50% {
      transform: translate3d(0, 10%, 0);
    }
  }
  
  @media (max-width: 1400px) {
    .swiper-type-1 {
      padding: 0 8.0rem 6.0rem 8.0rem;
    }
    .swiper-button-prev {
      left: 0 !important;
    }
    .swiper-button-next {
      right: 0 !important;
    }
    .modal-area-3 .swiper-button-prev {
      left: 3.0rem !important;
      top: 30%
  }
  .modal-area-3 .swiper-button-next {
      right: 3.0rem !important;
      top: 30%
  }
  }
  
  @media (max-width: 1320px) {
    .swiper-type-1 {
      margin-top: 8.0rem;
      padding: 0 3.2rem 6.0rem 3.2rem;
      padding-bottom: 3.6rem;
    }
    .swiper-type-1 .swiper .swiper-wrapper .swiper-slide > h1 {
      font-size: 2.0rem;
      margin-top: 2.4rem;
      line-height: 140%;
    }
    .swiper-pagination .swiper-pagination-bullet {
      width: 1.1rem !important;
      height: 1.1rem !important;
      margin: 0 0.8rem !important;
    }
    .swiper-button-prev,
    .swiper-button-next {
      width: 4.4rem !important;
      height: 4.4rem !important;
    }
  }
  
  @media (max-width: 767px) {
    .swiper-type-1 {
      margin-top: 2.8rem;
      padding: 0 24px 60px 24px;
      padding-bottom: 3.2rem;
    }
    .swiper-type-1 .swiper .swiper-wrapper .swiper-slide > h1 {
      font-size: 1.5rem;
      margin-top: 1.6rem;
    }
    .swiper-pagination .swiper-pagination-bullet {
      width: 0.8rem !important;
      height: 0.8rem !important;
      margin: 0 0.4rem !important;
    }
    .swiper-pagination {
      top: 20rem;
    }
    .swiper-button-prev,
    .swiper-button-next {
      width: 2.8rem !important;
      height: 2.8rem !important;
    }
    .swiper-button-next {
      right: -1.0rem!important;
      top: 36%;
    }
    .swiper-button-prev{
      left: -1.0rem!important;
      top: 36%;
    }
  }