@charset "utf-8";

/*
    강남점 슬라이드 배너 CSS

    원본 참고:
    - /ons/main/main_slide_bnr.css

    유지보수 기준:
    - 카페24 모듈을 사용하지 않습니다.
    - 배너매니저를 사용하지 않습니다.
    - 모든 선택자는 .branchSlideBanner 하위로만 작성합니다.

    수정 가능:
    - 섹션 여백
    - 배너 이미지 크기
    - 이미지 라운드
    - 페이지네이션 색상/간격/이미지 안쪽 위치

    수정 금지:
    - section, h1, .swiper, .ons_inner, #contents 같은 전역 선택자
    - branchSlideBanner__* 클래스명
*/

.branchSlideBanner {
    margin-top: 80px;
    padding: 0 16px;
    background: var(--mono-ff);
    box-sizing: border-box;
    /*
        [공통 이동 보정 예정]
        탭메뉴나 앵커 이동을 연결할 경우 sticky header에 섹션 제목이 가려지지 않게 하는 값입니다.
        현재 탭메뉴에는 연결하지 않지만, 여러 지점에서 완전히 동일할 때만 나중에 common CSS로 이동합니다.
    */
    scroll-margin-top: 120px;
}

.branchSlideBanner .branchSlideBanner__inner {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
}

.branchSlideBanner .branchSlideBanner__title {
    margin-bottom: 22px;
}

.branchSlideBanner .branchSlideBanner__swiper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-bottom: 0;
    touch-action: pan-y;
}

.branchSlideBanner .branchSlideBanner__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.branchSlideBanner .branchSlideBanner__item {
    height: auto;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.branchSlideBanner .branchSlideBanner__link {
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-8);
    background: var(--mono-5-f6);
    text-decoration: none;
    box-sizing: border-box;
    user-select: none;
    -webkit-user-drag: none;
}

.branchSlideBanner .branchSlideBanner__link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/*
    16:9 직사각형 배너 기준입니다.
    이미지 전체가 잘리지 않아야 하는 배너라면 아래처럼 변경합니다.
    .branchSlideBanner .branchSlideBanner__link img { object-fit: contain; background: var(--mono-5-f6); }
*/

.branchSlideBanner .swiper-pagination {
    position: static;
    width: 100%;
    margin-top: 12px;
    transform: none;
    z-index: 2;
}

.branchSlideBanner .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 5px;
    background: var(--point-color-primary);
    opacity: 1;
}

.branchSlideBanner .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: var(--point-color-primary);
}

@media (max-width: 767px) {
    .branchSlideBanner {
        margin-top: 60px;
        padding: 0 16px;
        scroll-margin-top: 150px;
    }

    .branchSlideBanner .branchSlideBanner__title {
        margin-bottom: 18px;
    }

    .branchSlideBanner .branchSlideBanner__swiper {
        padding-bottom: 0;
    }
}
/* Branch-B hardcoded visibility adapter */
.branchSlideBanner .swiper-pagination[hidden] {
    display: none !important;
}