@charset "utf-8";

/* =========================================
   [공통] PC/MO 표시 제어 (.pc / .mo)
   - 페이지 전체에서 사용하는 디바이스별 노출 제어
   ========================================= */

.event-benefit-template .pc {
    display: block;
}

.event-benefit-template .mo {
    display: none;
}

@media screen and (max-width: 767px) {
    .event-benefit-template .pc {
        display: none;
    }

    .event-benefit-template .mo {
        display: block;
    }
}

/* =========================================
   [상단 고정 탭] 메인 스티키 탭 영역
   - .c-tab--main-sticky 하단 밑줄 강조
   ========================================= */

.event-benefit-template .c-tab--main-sticky .c-tab__item.active .c-tab__button::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: "";
    background-color: #111111;
}

/* =========================================
   스와이퍼 공통 레이아웃
   - .tab-carousel-wrap
   - 탭 버튼, 탭 패널, 스와이퍼 슬라이드, 페이지네이션
   ========================================= */
/* 탭 */
/* 탭 + 슬라이더 전체 래퍼 */
.event-benefit-template .tab-carousel-wrap {
    width: 100%;
    margin: 0 auto;
}

/* 탭 메뉴(상단 버튼 리스트) */
.event-benefit-template .tab-carousel-wrap .tab-list {
    display: flex;
    justify-content: start;
    list-style: none;
    padding: 0;
    margin: 0 auto 22px auto;
}

/* 탭 버튼 기본 스타일 */
.event-benefit-template .tab-carousel-wrap .tab-button {
    border: 1px solid #DEE1E5;
    padding: 10px 16px;
    color: #111111;
    cursor: pointer;
    border-radius: 50px;
    margin-right: 8px;
    font-size: 16px;
}

/* 활성 탭 버튼 스타일 */
.event-benefit-template .tab-carousel-wrap .tab-button.is-active {
    background-color: #111111;
    color: #ffffff;
}

/* 탭 패널(각 Swiper 영역을 감싸는 컨테이너) */
.event-benefit-template .tab-carousel-wrap .tab-panel {
/*     position: relative;
    overflow: hidden;
    padding: 0 0 2% 0; */
}

/* 탭 패널 내 제목(스와이퍼 상단 이미지 타이틀) */
.event-benefit-template .tab-carousel-wrap .tab-panel .swiper-center-title {
    margin: 2% 0;
}

/* 비활성 탭 패널 숨김 처리 */
.event-benefit-template .tab-carousel-wrap .tab-panel.is-hidden {
    display: none !important;
}
/* // 탭 */


/* Swiper 슬라이드 */
/* Swiper 기본 화살표 아이콘 ::after
    - 현재는 Swiper 기본 CSS를 그대로 사용 (display 주석 처리 상태)
    - 필요 시 PC/MO 구분하여 display 설정 가능 */
.event-benefit-template .tab-carousel-wrap .swiper-button-prev::after,
.event-benefit-template .tab-carousel-wrap .swiper-button-next::after {
    display: none;
}

/* 페이지네이션 채워지는 바 색상 */
.event-benefit-template .tab-carousel-wrap .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background-color: #111111;
}

/* 스와이퍼 슬라이드 버튼 첫, 마지막 버튼 */
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
    opacity: 0;
}

/* 페이지네이션 클릭 및 드래그 활성화 */
/* 회색 전체 트랙 */
.event-benefit-template .tab-carousel-wrap .swiper-pagination {
    position: absolute;
    bottom: 0;
    top: 107%;
    left: 50%;
    transform: translateX(-50%);
    width: 16%;
    height: 5px;
    background-color: #EBEBEB;
    border-radius: 5px;
    display: flex;
    padding: 0;
    overflow: hidden;
    z-index: 10;
}

/* 움직이는 검은색 바 (Thumb) */
.event-benefit-template .tab-carousel-wrap .custom-scroll-slider__scrollbar-thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #111;
    border-radius: 5px;
    z-index: 11;
    will-change: transform, width;
    pointer-events: none; 
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.3s;
}

/* 클릭 영역 역할을 하는 투명 불릿 */
.event-benefit-template .tab-carousel-wrap .swiper-pagination-bullet {
    flex: 1;
    height: 100%;
    margin: 0;
    background-color: transparent;
    opacity: 1;
    border-radius: 0;
    z-index: 12;
    pointer-events: auto; 
    cursor: pointer;
}

/* 슬라이드 좌우버튼 */
.swiper-button-prev,
.swiper-button-next {
    width: 48px;
    height: 48px;
    cursor: pointer;
    border-radius: 100px;
    box-shadow: 0 0 1px 0 rgba(33, 39, 49, 0.36), 0 2px 8px 0 rgba(33, 39, 49, 0.08);
    transform: translateY(-50%);
    background: #fff url(/kr/event/promotions/images/icon-line-chervron-left-black.svg) no-repeat;
    background-size: 7px 12px;
    background-position: center;
    transition: background-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.swiper-button-next {
    transform: translateY(-50%) rotate(180deg);
}

@media screen and (max-width: 767px) {
    /* 모바일 탭 버튼 크기/폰트 조정 */
    .event-benefit-template .tab-carousel-wrap .tab-button {
        padding: calc(10/390*100vw) calc(16/390*100vw);
        color: #111111;
        cursor: pointer;
        border-radius: 50px;
        margin: 0;
        font-size: calc(13/390*100vw);
    }
    /* 모바일에서 페이지네이션 너비 확대 */
    .event-benefit-template .tab-carousel-wrap .swiper-pagination {
        width: 25%;
        display: none;
    }
    .event-benefit-template .tab-carousel-wrap .tab-list {
        gap: calc(8/390*100vw);
        justify-content: center;
        margin: calc(15/390*100vw) auto  calc(22/390*100vw) auto;
    }
    .swiper-button-prev {
        left: 5px
    }
    .swiper-button-next {
        right: 5px
    }
    .swiper-button-prev,
    .swiper-button-next {
        width: calc(32/390*100vw);
        height: calc(32/390*100vw);
    }
    .swiper-button-prev,
    .swiper-button-next {
        width: calc(32 / 390 * 100vw);
        height: calc(32 / 390 * 100vw);
        background: #fff url(/kr/event/promotions/images/icon-line-chervron-left-black-mo.svg) no-repeat;
        background-position: center;
        background-size: calc(5 / 390 * 100vw) calc(8 / 390 * 100vw);

    }
}


/* 페이지네이션 클릭 시 발생하는 브라우저 하이라이트/반짝임 제거 */
.event-benefit-template .tab-carousel-wrap .swiper-pagination,
.event-benefit-template .tab-carousel-wrap .swiper-pagination-bullet {
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* 추가로 검은색 바(Thumb)에서도 혹시 모를 하이라이트 제거 */
.event-benefit-template .tab-carousel-wrap .custom-scroll-slider__scrollbar-thumb {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

/* =========================================
   메인 탭 앵커
   - 레이아웃 조정
   ========================================= */
/* 메인 탭 앵커 */
.c-tab__panel:focus {
    outline-offset: -4px;
}

/* 메인 탭 앵커 모바일 */
@media screen and (max-width: 767px) {
    .event-benefit-template .c-tab--main-sticky .c-tab__list {
        padding: 0;
        column-gap: 0;
    }
    .event-benefit-template .c-tab--main-switch .c-tab__list {
        padding: 0;
        column-gap: 0;
    }
}

/* =========================================
   페이지 레이아웃 및 디자인
   - 개별 페이지 수정용
   ========================================= */
/* 해택1 */
.furi-participation__btn {
    font-size: 13px;
    font-weight: 400;
    text-decoration: underline;
}
.c-button-group.auth-btn-wrap-01 {
    margin-top: 0;
}
.c-button-group.auth-btn-wrap-02 {
    margin-top: 16px;
}

/* 해택2 */
.article__benefit-02 .article__inner {
    padding-top: 0;
}
.article__benefit-02 .c-button-group {
    margin-top: 0;
}
/* 해택3 */
.article__benefit-03 .article__inner {
    padding-bottom: calc(32 / 1146 * 100vw);
}
.event-benefit-template .exclusive-purchase-benefits__hyundai-card-banner {
    margin-top: 32px;
}
/* new */
.c-badge--new {
    background-color: #EA1917 !important;
}
/* 카톡 */
.kakao-talk-friend-only-coupon .c-title-area {
    display: none;
}
/* article__benefit-06 */
.article__benefit-06 .c-title-area--center .c-title {
    text-align: center;
}
.article__benefit-06 .c-title__main-title--big {
    margin : 32px 0 32px 0;
}

@media screen and (max-width: 767px) {
    .c-button-group.auth-btn-wrap-02 {
        margin-top: calc(14 / 390 * 100vw);
    }
    /* article__benefit-06 */
    .event-benefit-template .c-title-area {
        margin-bottom: calc(16 / 390 * 100vw);
    }
    .article__benefit-06 .c-title__main-title--big {
        margin-bottom: calc(16 / 390 * 100vw);
    }
    /* 해택1 */
    .furi-participation__btn {
        font-size: calc(13 / 390 * 100vw);
    }
    .article__benefit-02 .article__inner {
        padding-top: calc(25 / 390 * 100vw);
    }
    /* tip */
    .article__benefit-02 .c-button-group {
        flex-direction: column;
    }
    /* 해택3 */
    .article__benefit-03 .article__inner {
    padding-bottom: calc(32 / 390 * 100vw);
    }
    /* 카톡 */
.kakao-talk-friend-only-coupon .c-title-area {
    display: block;
}
}


/* 1. 슬라이더 영역 정의 */
.event-benefit-template .tab-carousel-wrap .tab-panel {
    position: relative;
    /* 버튼 노출을 위해 overflow 해제 */
    overflow: visible !important; 
    padding: 0; /* 하단 페이지네이션 여백 */
}

/* 2. 내비게이션 래퍼: 버튼을 밖으로 빼기 위한 여백 확보 */
.event-benefit-template .swiper-navigation-wrapper {
    position: relative;
    /* PC 기준: 버튼 크기(48px)와 여백을 고려해 좌우 패딩 설정 */
    box-sizing: border-box;
}

/* 3. 실제 슬라이드 마스크 */
.event-benefit-template .swiper-container-inner {
    position: relative;
    overflow: hidden; /* 슬라이드 본체만 자름 */
    border-radius: 20px; /* 이미지의 라운드값이 있다면 여기에 적용 */
}

/* 4. 버튼 위치 상세 제어 */
.event-benefit-template .swiper-button-prev,
.event-benefit-template .swiper-button-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    margin: 0; /* 기존 마진값 초기화 */
}

.event-benefit-template .swiper-button-prev { left: -14px; }
.event-benefit-template .swiper-button-next { right: -14px; transform: translateY(-50%) rotate(180deg); }

/* 5. 모바일 예외 처리 */
@media screen and (max-width: 767px) {
    .event-benefit-template .swiper-navigation-wrapper {
        padding: 0; /* 모바일은 화면 공간 부족으로 버튼을 안으로 넣음 */
    }
    .event-benefit-template .swiper-button-prev { left: calc(6 / 390 * 100vw); }
    .event-benefit-template .swiper-button-next { right: calc(6 / 390 * 100vw); }
    
}

/* =========================================
   비디오 슬라이드
   - 영상 오버레이 스타일
   ========================================= */

.video-overlay__btn:focus-visible {
    outline: 2px solid #ff0000;
    outline-offset: 2px;
}

/* 컨테이너 */
.event-benefit-template .video-image-area {
    position: relative;
    width: 100%;
}

/* 이미지 설정 */
.event-benefit-template .video-image-area picture img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 767px) {
    .video-mo {
        display: none;
    }
    
}

@media screen and (max-width: 767px) {
    .video-pc {
        display: none;
    }
    
}

/* =========================================
   비디오 슬라이드 컨트롤러
   ========================================= */

/* 비디오 오버레이 기본 레이아웃 */
.event-benefit-template .video-overlay {
    position: absolute;
    top: 5.7px;
    left: 8px;
    width: 49.4%;
    height: 95.8%;
    /* aspect-ratio: 16 / 10.01; */ /* 영상 비율 */
    z-index: 5;
    overflow: hidden;
    border-radius: 15px 0 0 15px;
    /* background-color: #000; */
}

@media screen and (max-width: 767px) {
    .event-benefit-template .video-overlay {
        top: calc(9.5 / 390 * 100vw);
        left: calc(20 / 390 * 100vw);
        width: 89.9%;
        height: 58.7%;
        border-radius: 10px 10px 0 0;
    }
}

/* 레이아웃 내 영상위치 */
.event-benefit-template .video-overlay__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #fff;
    object-position: 0px 0px; /* left top */
}

/* 컨트롤 공통 버튼 */
.event-benefit-template .video-overlay__btn {
    position: absolute;
    z-index: 10;
    border: none;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.5);
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s, background-color 0.2s;
}

.event-benefit-template .video-overlay__btn:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* 중앙 재생 버튼 */
.event-benefit-template .video-overlay__btn--play {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M8 5v14l11-7z"/></svg>');
    background-size: 18px;
    opacity: 0; /* 기본 숨김 */
}

/* 일시정지 상태 아이콘 변경 */
.event-benefit-template .video-overlay__btn--play.is-paused {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6 5h4v14H6zm8 0h4v14h-4z'/%3E%3C/svg%3E");
    opacity: 1;
}

/* 영상 호버 시 재생버튼 노출 */
.event-benefit-template .video-overlay:hover .video-overlay__btn--play {
    opacity: 1;
}

/* 음소거 버튼 */
.event-benefit-template .video-overlay__btn--mute {
    position: relative;
    bottom: auto;
    left: auto;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>');
    background-size: 16px;
}
@media screen and (max-width: 767px) {
    .event-benefit-template .video-overlay__btn--mute {
        width: calc(25 / 390 * 100vw);
        height: calc(25 / 390 * 100vw);
        background-size: calc(12 / 390 * 100vw);
    }
}

.event-benefit-template .video-overlay__btn--mute.is-muted {
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v1.79l2.48 2.48c.01-.08.02-.16.02-.24zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3z"/></svg>');
}

/* 하단 컨트롤 그룹 (오른쪽 하단 정렬) */
.event-benefit-template .video-controls-group {
    position: absolute;
    left: 12px; /* 오른쪽 여백 */
    bottom: 12px; /* 하단 여백 */
    display: flex;
    align-items: center;
    z-index: 10;
}

/* 볼륨 조절 슬라이더 */
.event-benefit-template .video-volume-wrap {
    width: 60px;
    display: flex;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .event-benefit-template .video-controls-group {
        left: calc(10 / 390 * 100vw);
        bottom: calc(10 / 390 * 100vw);
    }
}

/* 음량 조절 슬라이더 (Range Custom) */
.event-benefit-template .video-overlay__volume {
    position: absolute;
    width: 55px;
    height: 4px;
    cursor: pointer;
    bottom: 11px;
    left: 45px;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    outline: none;
    z-index: 10;
}

/* 슬라이더 손잡이 (Thumb) */
.event-benefit-template .video-overlay__volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: #f0f0f0;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 2px rgba(0,0,0,0.5);
}

.event-benefit-template .video-overlay__volume::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

@media screen and (max-width: 767px) {
    .event-benefit-template .video-overlay__volume {
        width: calc(40 / 390 * 100vw);
        left: calc(33 / 390 * 100vw);
        bottom: calc(10 / 390 * 100vw);
    }

    .event-benefit-template .video-overlay__volume::-webkit-slider-thumb {
        width: calc(8 / 390 * 100vw);
        height: calc(8 / 390 * 100vw);
        border-radius: 50%;
    }
}