/* swiper 가로 길이 1400px 설정 및 중앙 정렬 */
    .swiper-container-wrapper {
      max-width: 1600px;
      margin: 20px auto;
    }

    /* 슬라이더 영역 */
    .swiper {
      width: 100%;
      height: 100%;
      /* 하단 여백 28px 설정 (점 높이 약 8px + 실제 원하는 간격 20px = 28px) */
      padding-bottom: 28px; 
    }

    /* 각 슬라이드의 정렬 설정 */
    .swiper-slide {
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      height: auto; /* 내용물(이미지+텍스트)에 맞춰 높이 자동 조절 */
      box-sizing: border-box;
    }

    /* =========================================
       새로 추가된 이미지 마우스 오버 확대 효과
       ========================================= */
    /* 1. 이미지를 감싸는 a 태그 영역 (틀 역할) */
    .swiper-slide a {
      display: block;
      width: 100%;
      overflow: hidden; /* 확대된 이미지가 틀 밖으로 삐져나오지 않게 숨김 */
      border-radius: 0px; /* 기존 img에 있던 둥글기 속성을 밖(틀)으로 이동 */
    }

    /* 2. 실제 이미지 기본 스타일 및 애니메이션 시간 설정 */
    .swiper-slide img.thumb_list_pic {
      display: block;
      width: 100%;
      height: auto;
      transition: transform 0.3s ease; /* 0.3초 동안 부드럽게 움직임 */
    }

    /* 3. a 태그에 마우스가 올라갔을 때 이미지 살짝 확대 (1.05배) */
    .swiper-slide a:hover img.thumb_list_pic {
      transform: scale(1.05);
    }
    /* ========================================= */

    /* 텍스트 설명 스타일 */
.swiper-slide .desc {
  font-size: 10pt;
  color: #000000;
  line-height: 1.5;
  margin-top: 10px;
  
  display: block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

    /* 텍스트가 비어있는 span 태그는 공간(여백)을 차지하지 않도록 숨김 처리 */
    .swiper-slide .desc:empty {
      display: none;
    }

    /* =========================================
       좌우 화살표 커스텀 설정
       ========================================= */
    .swiper-button-next,
    .swiper-button-prev {
      width: 20px !important;
      height: 20px !important;
      color: #fff !important;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.8));
      
      opacity: 0;                   /* 평상시 숨김 */
      transition: opacity 0.3s ease;/* 부드럽게 나타나고 사라지는 효과 */
      
      margin-top: -30px; /* 화살표 위치를 위로 살짝 올려서 이미지 중앙 쯤 오도록 조정 */
    }

    /* 화살표 아이콘 폰트 크기 축소 */
    .swiper-button-next::after,
    .swiper-button-prev::after {
      font-size: 14px !important;
      font-weight: bold;
    }

    /* 스와이퍼 영역에 마우스 오버 시 화살표 나타남 */
    .swiper:hover .swiper-button-next,
    .swiper:hover .swiper-button-prev {
      opacity: 1;
    }

    /* 모바일 해상도(767px 이하)에서는 화살표 아예 숨김 */
    @media (max-width: 767px) {
      .swiper-button-next,
      .swiper-button-prev {
        display: none !important;
      }
      .swiper-slide .desc { font-size: 9pt; }
    }
    /* ========================================= */

    /* 하단 점(Pagination) 위치 커스텀 */
    .swiper-pagination {
      bottom: 0 !important; /* 위에서 확보한 padding-bottom 영역 가장 밑바닥에 딱 붙게 위치 */
    }
    
    /* 선택된 점 색상을 #333으로 변경 */
    .swiper-pagination-bullet-active {
      background-color: #333 !important;
    }