/* ================================ */
/*  KV */
/* ================================ */
.event-benefit-template .main-kv__img {
    aspect-ratio: 780 / 872; /* gt.yang 260606 : CLS 방지 및 스크롤 로직 작동을 위해 추가 */
}

@media screen and (min-width: 767px) {
    
.contents.exhibition.ex-module-wrap .ev-detail-con .ev-cont .component-wrap.layer-btn {
    top: 80px!important;
}
}
/* ================================ */
/*  // KV */
/* ================================ */

/* 3. 혜택 더보기 클릭 시 스크롤 위치 보정 (3depth 탭 높이 반영) */
.event-benefit-template [data-expand-scroll-dest] {
    scroll-margin-top: calc(var(--header-height) + var(--sticky-main-switch-height) + var(--sticky-main-sticky-height) + var(--sticky-2depth-height) - calc(4 * var(--ratio))) !important;
}


.c-tab {
    .c-tab__inner {
        display: flex;
        justify-content: center;
        background: #fff;
    }
}

/* ================================ */
/*  헤딩 배너 영역 */
/* ================================ */
.l-article__banner-container{
    &.banner_txt_type01 {
        .l-article__banner-content{
            background-color: #e8dddb;
            border-radius: calc(24 * var(--ratio)) calc(24 * var(--ratio)) 0px 0px;
            .l-article__banner-inner {
                min-height: calc(120 * var(--ratio));
                display: flex;
                align-items: center;
                .l-banner__title {
                    display: flex;
                    flex-direction: column;
                    gap: calc(2 * var(--ratio));
                    margin-left: calc(36 * var(--ratio));
                    .l-banner_title_desc {
                        font-size: calc(16 * var(--ratio));
                        font-weight: 700;
                        line-height: 1.4;
                        letter-spacing: -0.04em;
                        color: #9D0A09;
                    }
                    .l-banner_title_title {
                        font-size: calc(26 * var(--ratio));
                        font-weight: 700;
                        line-height: 1.4;
                        letter-spacing: -0.04em;
                        color: #262626;
                    }
                }
                .l-banner__ico {
                    margin-left: auto;
                    width: calc(94*var(--ratio));
                    img{
                        display: block;
                        width: 100%;
                    }
                }
            }
        }
    }
    &.banner_txt_type02 {
        .l-article__banner-content{
            background-color: #e8dddb;
            border-radius: calc(24 * var(--ratio)) calc(24 * var(--ratio)) 0px 0px;
            height: calc(206 * var(--ratio));
            .l-article__banner-inner {
                padding-top: calc(13 * var(--ratio));
                .l-article__banner-inner-top{
                    display: flex;
                    flex-direction: row;
                    width: 100%;
                    .l-banner__title {
                        display: flex;
                        height: unset;
                        flex-direction: column;
                        gap: calc(2 * var(--ratio));
                        justify-content: center;
                        margin-left: calc(36 * var(--ratio));
                        min-width: 0;
                        
                        .l-banner_title_desc {
                            font-size: calc(16 * var(--ratio));
                            font-weight: 700;
                            line-height: 1.4;
                            letter-spacing: -0.04em;
                            color: #9D0A09;
                        }
                        
                        .l-banner_title_title {
                            font-size: calc(26 * var(--ratio));
                            font-weight: 700;
                            line-height: 1.4;
                            letter-spacing: -0.04em;
                        color: #262626;
                        }
                    }
                    .l-banner__ico {
                        margin-left: auto;
                    width: calc(94*var(--ratio));
                        img{
                            display: block;
                            width: 100%;
                        }
                        margin-right: calc(21*var(--ratio));
                    }
                }
                
                .c-timer {
                    max-width: calc(342 * var(--ratio));
                    flex: 0 0 100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-top: calc(13 * var(--ratio));
                    margin-bottom: calc(32 * var(--ratio));
                }
            }
        }
    }
    &.banner_txt_type03 {
        .l-article__banner-content{
            .l-article__banner-inner {
                .c-timer {
                    max-width: calc(342 * var(--ratio));
                    flex: 0 0 100%;
                    margin-left: auto;
                    margin-right: auto;
                    margin-bottom: calc(32 * var(--ratio));
                }
            }
        }
    }
}



.l-article__banner-container {
    &.banner_txt_type02 {
        .l-article__banner-content {
            .l-article__banner-inner {
                margin: 0 auto;
                padding-left: 0;
                padding-right: 0;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                align-content: flex-start;
            }
        }
        .c-coupon__banner {
            background-color: #2b2b2b;
            mask-image: unset;
            height: calc(55 * var(--ratio));
            border-radius: calc(8 * var(--ratio));

            .c-coupon__benefit {
                width: calc(51 * var(--ratio));
                padding-left: calc(7 * var(--ratio));
            }
            
            .c-coupon__title {
                min-width: calc(239 * var(--ratio));
                margin: calc(15.5 * var(--ratio)) 0px;
            }
            
            .c-coupon__title-main {
                font-size: calc(15 * var(--ratio));
                color: var(--lge-gray-g00);
                line-height: calc(24 * var(--ratio));
            }
            
            .c-coupon__title-desc {
                color: var(--lge-gray-g00);
            }
            
            .c-coupon__button-box {
                width: calc(60 * var(--ratio));
            }
            
            .c-coupon__button-text {
                color: var(--lge-gray-g00);
            }
            
            .c-coupon__ico--coupon {
                background: url('/kr/event/2026/04/01_all_new_sale/images/icon-new-black-coupon.svg') center/calc(28 * var(--ratio)) no-repeat;
            }
        }
    }
}


/* ================================ */
/* // 헤딩 배너 영역 */
/* ================================ */





/********************************************/
/*  공통 - 타이머 */
/********************************************/

.c-timer {
    /* 쿠폰타이머 방식 */
    &.c-timer--type01 {
        color: #fff;
        font-weight: 500;
        font-size: calc(11 * var(--ratio));
        gap: calc(4 * var(--ratio));
        line-height: 1.4;
        background: url('/kr/event/2026/04/01_all_new_sale/images/ico_white_bg_timer.svg') left center/calc(16 * var(--ratio)) no-repeat;
        padding-left: calc(20 * var(--ratio));
    }

    /* 특가 타이머 방식 type02 */
    &.c-timer--type02 {
        position: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #fff;
        font-weight: 800;
        background-color: #2B2B2B;
        font-size: calc(18 * var(--ratio));
        line-height: calc(20 * var(--ratio));
        left: calc(20 * var(--ratio));
        right: calc(20 * var(--ratio));
        bottom: calc(24 * var(--ratio));
        padding: calc(16 * var(--ratio)) calc(20 * var(--ratio));
        border-radius: calc(8 * var(--ratio));
        max-width: calc(350 * var(--ratio));
        width: 100%;
        height: auto;

        .c-timer__title {
            font-size: calc(15 * var(--ratio));
            font-weight: 600;
        }

        .c-timer__content-wrap {
            display: flex;
            gap: calc(8 * var(--ratio));

            .c-timer__icon {
                display: flex;
                width: calc(18 * var(--ratio));
                height: calc(18 * var(--ratio));
                background: url('/kr/event/2026/04/01_all_new_sale/images/ico_white_timer.svg') center/calc(18 * var(--ratio)) no-repeat;
                margin-top: calc(1 * var(--ratio));
            }

            .c-timer__content {
                display: flex;
                gap: calc(2 * var(--ratio));

                .c-timer__box {
                    display: flex;
                    flex-direction: row;
                    gap: calc(2 * var(--ratio));

                    &::after {
                        content: ':';
                        line-height: calc(16 * var(--ratio));
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .c-timer__unit {
                font-size: 0;
                display: none;
            }
        }
    }

    /* 특가 타이머 방식 type03 */
    &.c-timer--type03 {
        position: unset;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        color: #fff;
        font-weight: 800;
        background-color: #FD312E;
        font-size: calc(18 * var(--ratio));
        line-height: calc(20 * var(--ratio));
        left: calc(20 * var(--ratio));
        right: calc(20 * var(--ratio));
        bottom: calc(24 * var(--ratio));
        padding: calc(17.5 * var(--ratio)) calc(20 * var(--ratio));
        border-radius: calc(8 * var(--ratio));
        max-width: calc(350 * var(--ratio));
        width: 100%;
        height: auto;

        .c-timer__title {
            font-size: calc(14 * var(--ratio));
            font-weight: 600;
        }

        .c-timer__content-wrap {
            display: flex;
            gap: calc(6 * var(--ratio));

            .c-timer__icon {
                display: flex;
                width: calc(18 * var(--ratio));
                height: calc(18 * var(--ratio));
                background: url('/kr/event/2026/04/01_all_new_sale/images/ico_white_timer.svg') center/calc(18 * var(--ratio)) no-repeat;
                margin-top: calc(1 * var(--ratio));
            }

            .c-timer__content {
                display: flex;
                gap: calc(2 * var(--ratio));

                .c-timer__box {
                    display: flex;
                    flex-direction: row;
                    gap: calc(2 * var(--ratio));

                    &::after {
                        content: ':';
                        line-height: calc(20 * var(--ratio));
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .c-timer__unit {
                font-size: 0;
                display: none;
            }
        }
    }

    /* 특가 타이머 방식 type04 */
    &.c-timer--type04 {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        font-weight: 600;
        font-size: calc(14 * var(--ratio));
        line-height: calc(20 * var(--ratio));
        max-width: calc(350 * var(--ratio));
        width: 100%;
        height: calc(40 * var(--ratio));
        border: 1px solid #EA1917;
        border-radius: calc(8 * var(--ratio));
        padding: calc(10 * var(--ratio)) calc(20 * var(--ratio));
        margin: 0 calc(20 * var(--ratio)) calc(12 * var(--ratio));

        .c-timer__title {
            font-size: calc(14 * var(--ratio));
            font-weight: 600;
        }

        .c-timer__content-wrap {
            display: flex;
            gap: calc(4 * var(--ratio));

            .c-timer__icon {
                display: flex;
                width: calc(20 * var(--ratio));
                height: calc(20 * var(--ratio));
                background: url('/kr/event/2026/04/01_all_new_sale/images/ico_red_bg_timer.svg') center/calc(20 * var(--ratio)) no-repeat;
            }

            .c-timer__content {
                display: flex;
                gap: calc(2 * var(--ratio));

                .c-timer__box {
                    display: flex;
                    flex-direction: row;
                    gap: calc(1 * var(--ratio));

                    &::after {
                        content: ':';
                        line-height: calc(20 * var(--ratio));
                    }

                    &:last-child {
                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .c-timer__unit {
                font-size: 0;
                display: none;
            }
        }
    }
    
}


/********************************************/
/* // 공통 - 타이머 */
/********************************************/





/* ================================ */
/* 혜택 영역 */
/* ================================ */
.event-benefit-template{

    .l-article-sale-benefits {
        .link_preview_benefits {
            position: absolute;
        }
        .link_preview_benefits_01 {
            top: 35.5%;
            left: 7.3%;
            width: 39.5%;
            height: 10.5%;
        }
        .link_preview_benefits_02 {
            top: 35.5%;
            left: 53.3%;
            width: 39.5%;
            height: 10.5%;
        }
        .link_preview_benefits_03 {
            top: 87.2%;
            left: 7.3%;
            width: 24.2%;
            height: 10.5%;
        }
        .link_preview_benefits_04 {
            top: 87.2%;
            left: 38%;
            width: 24.2%;
            height: 10.5%;
        }
        .link_preview_benefits_05 {
            top: 87.2%;
            left: 68.8%;
            width: 24.2%;
            height: 10.5%;
        }
    }

    .l-article-more-benefits{
        .l-article__inner{
            .c-tab--3depth {
                & .c-tab__item {
                    &:first-child {
                        margin-left: auto;
                    }
                }
            }
            .c-tab--3depth {
                .c-tab__list {
                    padding: 0 calc(20 * var(--ratio));
                }
            }
        }

        .more-benefit-view {
            .l-article__content-wrap {
                gap: 0;
            }
            .more-benefit-view__coupon-event-link{
                position: absolute;
                left: 25.5%;
                bottom: 12%;
                width: 49%;
                height: 22%;
            }
            .coupon-benefits-list{
                display: flex;
                gap: calc(10 * var(--ratio)); 
                flex-direction: column;
            }
            
            .c-custom-accordion__area--fade {
                height: calc(208 * var(--ratio));
                position: relative;
                overflow: hidden;

                &::after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    height: calc(141 * var(--ratio));
                    top: calc(115 * var(--ratio));
                    bottom: 0;
                    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 23.37%, #FFF 65.76%);
                    z-index: 1;
                }
            }
            &.active {
                .c-custom-accordion__area--fade {
                    height: auto;
                    &::after {
                        display: none;
                    }
                }
                .c-custom-accordion__area--none {
                    display: block;
                }
            }
            .more-benefit-view-black{
                background-color: #000;
                .c-title__sub-main{
                    color: #fff;
                }
                .c-coupon {
                    .c-coupon__ico--link {
                        width: calc(20 * var(--ratio));
                        height: calc(20 * var(--ratio));
                        background: url(/kr/event/2026/06/09_thanks_festa/resource/icon-new-black-link.svg) center / calc(20 * var(--ratio)) no-repeat;
                    }
                }
                .c-button--text-arrow-down {
                    & .c-button__label {
                        color: #fff;
                        &::after {
                            width: calc(16 * var(--ratio));
                            height: calc(16 * var(--ratio));
                            background: url(/kr/event/2026/06/09_thanks_festa/resource/icon-new-line-chevron-up-white.svg) no-repeat;
                            background-size: contain;
                        }
                    }
                }
                .c-toggle--normal {
                    .c-toggle__content--box {
                        background-color: #262626;
                        margin: calc(16 * var(--ratio)) calc(20 * var(--ratio));
                        .c-toggle__title{
                            color: #fff;
                        }
                        .c-list{
                            margin-left: calc(6*var(--ratio));
                            color: #cacaca;
                        }
                        .c-list--normal{
                            .c-list__item{
                                color: #cacaca;
                                &::before {
                                    background-color: #cacaca;
                                }
                            }
                        }
                    }
                }
                
            }
            .subscription-basic-benefits{
                margin-bottom: calc(40*var(--ratio));
                .c-title{
                    display: none;
                }
                .l-article__content{
                    background-color: #fff;
                    .nested-accordion{
                        padding: 0;
                    }
                    .c-toggle--normal {
                        .c-toggle__content--box {
                            padding-bottom: 0;
                        }
                    }
                }
            }
            .c-tooltip--subscribecare{
                position: absolute;
                width: calc(16 * var(--ratio));
                height: calc(16 * var(--ratio));
                right: calc(22 * var(--ratio));
                top: calc(23 * var(--ratio));
                .tooltip-wrap {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: clamp(16px, calc(16 * var(--ratio)), 40px)!important;
                    height: clamp(16px, calc(16 * var(--ratio)), 40px)!important;
                    line-height: 1;
                }
                .ui_tooltip-target {
                    background: url(/kr/event/2026/05/01_lg_dot/images/ico_tooltip_black.svg) left center / calc(16 * var(--ratio)) no-repeat;
                    background-size: contain;
                    width: calc(16 * var(--ratio));
                    height: calc(16 * var(--ratio));
                }
                .tooltip-wrap.active .tooltip-box {
                    display: block;
                    left: calc(-312 * var(--ratio)) !important;
                    right: calc(-22 * var(--ratio)) !important;
                    top: calc(20 * var(--ratio)) !important;
                }
            }
            .c-toggle-subscription{
                position: relative;
                .img_toggle_off_img{
                    display: block;
                }
                .c-button{
                    position: absolute;
                    top: calc(88 * var(--ratio));
                    left: calc(91 * var(--ratio));
                }
                .img_toggle_on_img{
                    display: none;
                }
                &.on{
                    .img_toggle_off_img{
                        display: none;
                    }
                    .img_toggle_on_img{
                        display: block;
                    }
                }
            }
        }
        [data-accordion-toggle="true"] {
            .c-custom-accordion__btn-wrap:has([aria-expanded="true"]) {
                margin-top: calc(32 * var(--ratio));
            }
        }
    }

}



/* ================================ */
/* // 혜택 영역 */
/* ================================ */




/* ================================ */
/* 포인트 더블 혜택 */
/* ================================ */

.l-article-point-benefits {
    .l-tab{
        row-gap: 0!important;
    }
    .c-custom-accordion__area--fade {
        height: calc(200 * var(--ratio));
        position: relative;
        overflow: hidden;

        &::after {
            content: '';
            position: absolute;
            width: 100%;
            height: calc(141 * var(--ratio));
            top: calc(100 * var(--ratio));
            bottom: 0;
            background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 23.37%, #FFF 65.76%);
            z-index: 1;
        }
    }
    [data-accordion-toggle="true"] {
    .c-custom-accordion__btn-wrap:has([aria-expanded="true"]) {
            position: relative;
            margin-top: calc(32 * var(--ratio));
        }
    }
}


/* ================================ */
/* // 포인트 더블 혜택 */
/* ================================ */



.l-article-qna{
    .c-toggle__content{
        background-color: #f4f4f4;
    }
}



/* ================================ */
/* 다품목 혜택 배너 */
/* ================================ */
.l-article_bannner__box{
    .l-article__inner{
        padding-bottom: calc(32*var(--ratio));
    }
    .l-article__banner{
        position: relative;
        a{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            &.link_bottom_01{
                height: 47%;
            }
            &.link_bottom_02{
                top: 53%;
                height: 47%;
            }
            &.link_big_sale{
                width: 86%;
                height: 11%;
                bottom: 7.5%;
                top: unset;
                left: 7%;
            }
        }
    }
}
/* ================================ */
/* // 다품목 혜택 배너 */
/* ================================ */




/* ================================ */
/* 선착순 특가 */
/* ================================ */

.l-article-firstcome-special{
    .l-article__banner-inner{
        padding-bottom: calc(32*var(--ratio));
        position: relative;
        .c-timer{
            position: absolute;
            margin: 0!important;
            min-width: unset!important;
            width: calc(256 * var(--ratio));
            padding: calc(7.5*var(--ratio)) calc(20*var(--ratio));
            left: 50%;
            transform: translateX(-50%);
            bottom: calc(12*var(--ratio));
            line-height: calc(25 * var(--ratio));
            border-radius: calc(25 * var(--ratio));
            .c-timer__icon {
                display: flex;
                width: calc(20 * var(--ratio));
                height: calc(20 * var(--ratio));
                background: url(/kr/event/2026/04/01_all_new_sale/images/ico_white_timer.svg) center / calc(20 * var(--ratio)) no-repeat;
                margin-top: calc(2 * var(--ratio));
            }
        }
    }
    .c-tab__panel{
        display: block!important;
    }
    .c-product{
        padding: 0 calc(20*var(--ratio));
    }
}

/* ================================ */
/* // 선착순 특가 */
/* ================================ */








/* ================================ */
/* 가전 베스트 */
/* ================================ */
.l-article-appliances-best{
    .c-product{
        padding: 0 calc(20*var(--ratio));
    }
}
/* ================================ */
/* 가전 베스트 */
/* ================================ */






/* ================================ */
/* 구독 데이즈 */
/* ================================ */
.l-article-subscribe-days{
    .l-banner__ico{
        height: calc(107*var(--ratio));
        div{
            width: 100%;
            height: 100%;
        }
        img{
            object-fit: unset;
        }
    }
    .c-timer{
        margin-top: 0!important;
    }
    .c-button__icon{
        transform: rotate(-90deg);
    }
}

/* ================================ */
/* 구독 데이즈 */
/* ================================ */


.l-article-subscribe-more{
    .l-article__inner{
        gap: 0;
    }
}

.l-article-subscribe-half{
    .l-article__inner{
        gap: 0;
    }
}

.l-article-subscribe-water{
    .l-article__inner{
        gap: 0;
    }
    .c-button__icon{
        transform: rotate(-90deg);
    }
}