@charset "utf-8";
/**
 * sub0701 병원 둘러보기 슬라이더 (Swiper thumbs)
 * 최대 폭 1400px · 원본 비율 1400×806
 * 블록 상·하 여백 150px, 메인↔썸네일 간격 35px
 */

/* sub02.css 전역 img(min-width:100%)보다 우선 */
.sub-inner.sub-inner-full #contents.sub02 .ds-sub0701-tour-gallery .ds-sub0701-tour-main-inner img,
.sub-inner.sub-inner-full #contents.sub02 .ds-sub0701-tour-gallery .ds-sub0701-tour-thumb-inner img {
    min-width: 0 !important;
    max-width: none;
}

/* 메인·썸네일 묶음: 뷰포트가 넓을 때 정확히 1400px (좌우 padding 없음 → 내부가 1400 그대로) */
#contents.sub02 .ds-sub0701-tour-gallery {
    width: 1400px;
    max-width: 100%;
    margin: 150px auto;
    padding: 0;
    box-sizing: border-box;
    line-height: 0;
}

@media (max-width: 768px) {
    #contents.sub02 .ds-sub0701-tour-gallery {
        width: 100%;
        max-width: 100%;
        margin: 18px auto 12px;
        padding: 0 12px;
    }
}

/* 슬라이더가 래퍼 높이를 불필요하게 키우지 않도록 (메인에 margin:0 금지: 하단 35px이 Swiper 기본보다 우선해야 함) */
#contents.sub02 .ds-sub0701-tour-main.swiper {
    margin: 0 0 15px;
    height: auto;
}

#contents.sub02 .ds-sub0701-tour-thumbs.swiper {
    margin: 0;
    height: auto;
}

#contents.sub02 .ds-sub0701-tour-main {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

#contents.sub02 .ds-sub0701-tour-main .swiper-wrapper {
    align-items: flex-start;
}

#contents.sub02 .ds-sub0701-tour-main .swiper-slide {
    height: auto;
}

/* 메인: 실제 이미지와 동일 비율 → 1:1 대비 약 43% 낮은 높이 */
#contents.sub02 .ds-sub0701-tour-main-inner {
    position: relative;
    width: 100%;
    aspect-ratio: 1400 / 806;
    overflow: hidden;
    background: #e8e8e8;
}

#contents.sub02 .ds-sub0701-tour-main-inner img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    object-position: center;
    vertical-align: top;
    box-sizing: border-box;
}

#contents.sub02 .ds-sub0701-tour-thumbs {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#contents.sub02 .ds-sub0701-tour-thumbs .swiper-wrapper {
    align-items: flex-start;
}

#contents.sub02 .ds-sub0701-tour-thumbs .swiper-slide {
    width: calc((100% - 48px) / 5);
    height: auto;
    box-sizing: border-box;
}

#contents.sub02 .ds-sub0701-tour-thumb-inner {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 2px solid transparent;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    background: #ddd;
    aspect-ratio: 1400 / 806;
    box-sizing: border-box;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

#contents.sub02 .ds-sub0701-tour-thumb-inner img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: cover;
    object-position: center;
    vertical-align: top;
    pointer-events: none;
}

#contents.sub02 .ds-sub0701-tour-thumbs .swiper-slide-thumb-active .ds-sub0701-tour-thumb-inner {
    border-color: #11a39b;
    opacity: 1;
}

#contents.sub02 .ds-sub0701-tour-thumbs .swiper-slide:not(.swiper-slide-thumb-active) .ds-sub0701-tour-thumb-inner {
    opacity: 0.88;
}

/* 리스트 아이템 안에서만 여백·라인하이트 정리 */
#contents.sub02 .sub02-problem-item--slider {
    margin: 0;
    padding: 0;
    line-height: 0;
}

@media (max-width: 768px) {
    #contents.sub02 .ds-sub0701-tour-thumbs .swiper-slide {
        width: calc((100% - 36px) / 3.5);
    }
}