@charset "utf-8";



/*=================================*/
/* 전체 공통 커스텀 (2026.03.19 기준 - 신규 템플릿과 결이 다르다고 하여, 공통 소스 상쇄) */
/*=================================*/

/* 작업용 */
/* a, button {
    background-color: #2d90217a !important;
} */
/* // 작업용 */

.c-title {
    row-gap: 4px;
    .c-title__main {
        color: var(--primary-black);
        font-size: 32px;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: -1.28px;
    }
    .c-title__eyebrow {
        color: var(--lge-gray-g70);
        font-size: 16px;
        font-weight: 400;
        line-height: 130%;
        letter-spacing: -0.64px;
    }

    @media (max-width: 767px) {
        .c-title__main {
            font-size: calc(26 / 390 * 100vw);
            letter-spacing: calc(-1.04 / 390 * 100vw);
        }
        .c-title__eyebrow {
            font-size: calc(14 / 390 * 100vw);
            letter-spacing: calc(-0.52 / 390 * 100vw);
        }
    }
}

.c-tab--1depth-type02 {
    .c-tab__list {
        border-bottom: none;
    }
}


.l-section {
    display: flex;
    flex-direction: column;
    row-gap: 72px;
    padding:72px 0;

    @media (max-width: 767px) {
        row-gap: calc(40 / 390 * 100vw);
        padding: calc(40 / 390 * 100vw) 0;
    }
}

.l-article {
    .l-article__inner {
        padding-top:0;
        padding-bottom:0;
        row-gap: 24px;
    }
    .l-article__content {
        row-gap: 16px;
        @media (max-width: 767px) {
            row-gap: calc(16 / 390 * 100vw);
        }
    }
}

.c-tab--round {
    @media (max-width: 767px) {
        .c-tab__list {
            gap: calc(8 / 390 * 100vw);
            padding: 0 0 calc(30 / 390 * 100vw) 0;
        }

        .c-tab__button {
            font-size: calc(13 / 390 * 100vw);
        }
    }
}
.c-toggle {
    .c-toggle__title {
        color: #000;
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
        letter-spacing: -0.26px;
    }
    .c-toggle__content {
        max-width: 820px;
        margin: 0 auto;
        padding: 20px 16px;
        border-radius: 8px;
        background: #F4F4F4;
    }
}

.c-toggle--qna {
    .c-toggle__btn {
        padding: 16px 40px 16px 12px;
        color: #181818;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        letter-spacing: -0.28px;
    }
    .c-toggle__content {
        max-width: 1146px;
    }

    @media (max-width: 767px) {
        .c-toggle__btn {
            font-size: calc(14 / 390 * 100vw);
            letter-spacing: calc(-0.28 / 390 * 100vw);
        }
    }
}

.c-list {
    .c-list__item {
        color: #000;
        font-size: 13px;
        font-weight: 400;
        line-height: 18px;
        letter-spacing: -0.26px;
    }
    .c-list .c-list__item  {
        padding-left:0;
        &::before {
            display:none;
            
        }
    }
    @media (max-width: 767px) {
        margin:0;
    }
}

.popup-wrap {
    max-width: 800px;
    .l-article {
        height: auto;
        max-height: 706px;
        padding-bottom: 0;
        overflow-y: auto;
        padding: 32px 0px 20px;
        max-height: initial;

        &::after {
            display: none;
        }
    }

    img {
        width: 100%;
    }

    .btn-close {
        top: 34px;
        right: 34px;
        background: url(/kr/event/2026/03/20_more_buy_more_save_odd/resources/icon_close_btn.svg) no-repeat;
        background-size: contain;
    }

    .relative-area {
        position: relative;
    }
    .hidden-pc {
        display: none;
    }

    .l-article__content {
        padding: 0;
    }

    .c-title {
        flex-direction: row;
        margin: 0 auto;
        width: 100%;
        max-width: 760px;
        padding: 0 20px 16px 20px;
    }
    .c-title__main {
        position: relative;
        padding-left: 34px;
        color: #111;
        font-size: 22px;
        font-weight: 700;
        line-height: 140%;
        letter-spacing: -0.88px;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
    }
    .c-title__main--point {
        &::before {
            width: 26px;
            height: 26px;
            background-image: url(/kr/event/2026/03/20_more_buy_more_save_odd/resources/icon_membership_point.svg);
        }
    }
    .c-title__main--cash {
        &::before {
            width: 26px;
            height: 26px;
            background-image: url(/kr/event/2026/03/20_more_buy_more_save_odd/resources/icon_cash_back_point.svg);
        }
    }
    .c-title__main--gift {
        &::before {
            width: 26px;
            height: 26px;
            background-image: url(/kr/event/2026/03/20_more_buy_more_save_odd/resources/icon_gift_red.svg);
        }
    }
    .c-title__main--percent {
        &::before {
            width: 26px;
            height: 26px;
            background-image: url(/kr/event/2026/03/20_more_buy_more_save_odd/resources/icon_percent_red.svg);

        }
    }

    @media (max-width: 767px) {
        .hidden-mo {
            display: none;
        }
        .hidden-pc {
            display: block;
        }

        .l-article {
            height: calc(100% - 62px);
            max-height: calc(100% - 62px);
            padding: calc(32 / 390 * 100vw) calc(20 / 390 * 100vw) calc(40 / 390 * 100vw);
        }

        .btn-close {
            top: calc(32 / 390 * 100vw);
            right: calc(28 / 390 * 100vw);
            width: calc(24 / 390 * 100vw);
            height: calc(24 / 390 * 100vw);
            &::before {
                width: calc(24 / 390 * 100vw);
                height: calc(24 / 390 * 100vw);
                background-size: contain;
            }
        }

        .c-title {
            padding: 0 0 calc(12 / 390 * 100vw) 0;
        }
        .c-title__main {
            padding-left: calc(34 / 390 * 100vw);
            font-size: calc(22 / 390 * 100vw);
            letter-spacing: calc(-0.88 / 390 * 100vw);
        }
        .c-title__main--point {
            &::before {
                width: calc(26 / 390 * 100vw);
                height: calc(26 / 390 * 100vw);
            }
        }
        .c-title__main--cash {
            &::before {
                width: calc(26 / 390 * 100vw);
                height: calc(26 / 390 * 100vw);
            }
        }
        .c-title__main--gift {
            &::before {
                width: calc(26 / 390 * 100vw);
                height: calc(26 / 390 * 100vw);
            }
        }
        .c-title__main--percent {
            &::before {
                width: calc(26 / 390 * 100vw);
                height: calc(26 / 390 * 100vw);
            }
        }
    }
}

.reward-benefits__back-btn:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
}
.reward-benefits__back-btn {
    display: inline-flex;
}
.reward-benefits__back-btn {
    --ai-icon-top: 116px;
    --bottom-gap: 20px;
    position: fixed;
    right: 48px;
    bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px));
    z-index: 110;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    color: #FFF;
    font-size: 14px;
    font-weight: 700;
    line-height: 100%;
    letter-spacing: -0.28px;
    border-radius: 200px;
    background: #111;
}
body:has(.btn-floating-wrap.scroll) .reward-benefits__back-btn {
    --ai-icon-top: 170px;
    --bottom-gap: 20px;
    bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px));
}
@media screen and (width <= 767px) {
    /* 앱인 경우 */
    .reward-benefits__back-btn {
        --bottom-gap: 8px;
        --ai-icon-top: 160px;
        right: 14px;
        bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
        z-index: 97;
        width: 40px;
        height: 40px;
        font-size: 10px;
        letter-spacing: -0.4px;
    }
    body:has(.btn-floating-wrap.scroll) .reward-benefits__back-btn {
        --bottom-gap: 8px;
        --ai-icon-top: 210px;
        bottom: calc(var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
    }
    /* // 앱인 경우 */

    /* 웹인 경우 */
    .mdevice:not(.app) .reward-benefits__back-btn {
        --bottom-gap: 8px;
        --ai-icon-top: 110px;
        --mobile-status-bar-height: 56px;
        bottom: calc(var(--mobile-status-bar-height, 0px) + var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
    }

    .mdevice:not(.app) body:has(.btn-floating-wrap.scroll) .reward-benefits__back-btn {
        --ai-icon-top: 160px;
        --mobile-status-bar-height: 56px;
        --bottom-gap: 8px;
        bottom: calc(var(--mobile-status-bar-height, 0px) + var(--ai-icon-top, 0px) + var(--bottom-gap, 0px) + env(safe-area-inset-bottom));
    }
    /* // 웹인 경우 */
}


/*=================================*/
/* // 전체 공통 커스텀 (2026.03.19 기준 - 신규 템플릿과 결이 다르다고 하여, 공통 소스 상쇄) */
/*=================================*/


/*=================================*/
/* 개별 영역 처리 */
/*=================================*/

/* 모달 */
#multi-buy-benefit-modal-03 {
    .c-tab__list {
        overflow-x: initial;
        flex-wrap: wrap;
    }
}

#multi-buy-benefit-modal-04 {

    .l-article {
        padding-bottom: 0;
    }

    .l-article__content {
        row-gap: 0;
    }
    
    .payment-benefits-body {
        padding: 12px 20px 40px;
        background-color: var(--lge-gray-g10);
    }
}
/* // 모달 */

.multi-buy-benefit {
    .multi-buy-benefit__btn {
        position: absolute;
    }
    .multi-buy-benefit__btn--01 {
        top: 72%;
        left: 1.8%;
        width: 17.2%;
        height: 18%;
    }
    .multi-buy-benefit__btn--02 {
        top: 72%;
        left: 21.7%;
        width: 17.2%;
        height: 18%;
    }
    .multi-buy-benefit__btn--03 {
        top: 72%;
        left: 41.5%;
        width: 17.2%;
        height: 18%;
    }
    .multi-buy-benefit__btn--04 {
        top: 72%;
        left: 61.3%;
        width: 17.2%;
        height: 18%;
    }
    .multi-buy-benefit__btn--05 {
        top: 72%;
        left: 81%;
        width: 17.2%;
        height: 18%;
    }
    .c-toggle__content {
        max-width: 820px;
        margin: 0 auto;
    }

    .lg-only-purchase-benefits__linker {
        position: absolute;
    }

    .lg-only-purchase-benefits__linker-01 {
        top: 36%;
        left: 11.8%;
        width: 6.8%;
        height: 18%;
    }
    .lg-only-purchase-benefits__linker-02 {
        top: 36%;
        left: 18.7%;
        width: 10.2%;
        height: 18%;
    }
    .lg-only-purchase-benefits__linker-03 {
        top: 38.7%;
        left: 46%;
        width: 8.2%;
        height: 15%;
    }
    .lg-only-purchase-benefits__linker-04 {
        top: 61%;
        left: 3%;
        width: 17.2%;
        height: 18%;
    }
    .lg-only-purchase-benefits__linker-05 {
        top: 38%;
        left: 79%;
        width: 9.2%;
        height: 15%;
    }

    @media (max-width: 767px) {
        .multi-buy-benefit__btn--01 {
            top: 32%;
            left: 6%;
            width: 41.2%;
            height: 12%;
        }
        .multi-buy-benefit__btn--02 {
            top: 32%;
            left: 52.3%;
            width: 40.2%;
            height: 11%;
        }
        .multi-buy-benefit__btn--03 {
            top: 50%;
            left: 71.3%;
            width: 22.2%;
            height: 11%;
        }
        .multi-buy-benefit__btn--04 {
            top: 67%;
            left: 71.6%;
            width: 22.2%;
            height: 12%;
        }
        .multi-buy-benefit__btn--05 {
            top: 86%;
            left: 72.7%;
            width: 21.2%;
            height: 11%;
        }
        .c-toggle__content {
            max-width: 820px;
            margin: 0 auto;
        }

        .lg-only-purchase-benefits__linker {
            position: absolute;
        }

        .lg-only-purchase-benefits__linker-01 {
            top: 36%;
            left: 11.8%;
            width: 6.8%;
            height: 18%;
        }
        .lg-only-purchase-benefits__linker-02 {
            top: 36%;
            left: 18.7%;
            width: 10.2%;
            height: 18%;
        }
        .lg-only-purchase-benefits__linker-03 {
            top: 38.7%;
            left: 46%;
            width: 8.2%;
            height: 15%;
        }
        .lg-only-purchase-benefits__linker-04 {
            top: 61%;
            left: 3%;
            width: 17.2%;
            height: 18%;
        }
        .lg-only-purchase-benefits__linker-05 {
            top: 38%;
            left: 79%;
            width: 9.2%;
            height: 15%;
        }
    }
}

.best-multi-item-fit {
    .swiper-container-wrap {
        width: 100%;
        position: relative;
        max-width: 1150px;
        margin: 0 auto;
    }
    .swiper-slide {
        width: 372px;
    }

    .best-muulti-item-fit__desc {
        color: var(--lge-gray-g50);
        font-size: 14px;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: -0.56px;
    }

    .best-multi-item-fit__link {
        position: absolute;
        bottom: 0%;
        left: 0%;
        width: 100%;
        height: 20%;
    }
    .swiper-container-wrap .swiper-navigation-button {
        top: calc((100% - 106px) / 2);
    }
    .swiper-container-wrap .swiper-navigation-button--next {
        right: -24px;
    }
    .swiper-container-wrap .swiper-navigation-button--prev {
        left: -24px;
    }

    @media screen and (max-width: 767px) {
        .swiper-container-wrap .swiper-navigation-button {
            top: calc((100% - 15vw) / 2);
        }
        .swiper-container-wrap .swiper-navigation-button--next {
            right: 4vw;
        }
        .swiper-container-wrap .swiper-navigation-button--prev {
            left: 4vw;
        }

        .c-tab__list {
            padding: 0 calc(20/390*100vw) calc(16/390*100vw);
            flex-wrap: wrap;
            overflow: initial;
            justify-content: center;
            .c-tab__item {
                &:first-child {
                    margin-left: initial !important;
                }
                &:last-child {
                    margin-right: initial !important;
                }
            }
        }



        .swiper-container-wrap {
            width: 100%;
        }
        .swiper-container {
            padding: 0 calc(20/390*100vw);
        }
        .swiper-slide {
            width: calc(316/390*100vw);
            padding: 0 calc(8/390*100vw);
        }
        .best-muulti-item-fit__desc {
            margin: 0 calc(20 / 390 * 100vw);
            color: var(--lge-gray-g50);
            font-size: calc(12 / 390 * 100vw);
            letter-spacing: calc(-0.48em/12);
        }

        .best-multi-item-fit__link {
            bottom: 0%;
            left: 0%;
            width: 100%;
            height: 20%;
        }
    }
}

.check-more-next-tab {
    .check-more-next-tab__linker {
        position: absolute;
    }
    .check-more-next-tab__linker--01 {
        top: 0%;
        left: 0%;
        width: 50%;
        height: 100%;
    }
    .check-more-next-tab__linker--02 {
        top: 0%;
        left: 50%;
        width: 50%;
        height: 100%;
    }

    @media (max-width: 767px) {
        .check-more-next-tab__linker--01 {
            top: 0%;
            left: 0%;
            width: 100%;
            height: 50%;
        }
        .check-more-next-tab__linker--02 {
            top: 50%;
            left: 0%;
            width: 100%;
            height: 50%;
        }
    }
}

.another-way-get-benefit {
    .swiper-container-wrap {
        max-width: 1146px;
        margin: 0 auto;
    }
    .synced-tab-slider {
        max-width: 1146px;
        margin: 0 auto;
    }
    .swiper-wrapper {
        display:flex;
        gap:16px;
        margin-bottom: 16px;
    }
    .swiper-slide {
        width: 372px;
    }

    .best-muulti-item-fit__desc {
        color: var(--lge-gray-g50);
        font-size: 14px;
        font-weight: 500;
        line-height: 140%;
        letter-spacing: -0.56px;
    }
    
    @media screen and (max-width: 767px) {
        .c-tab__list {
            padding-bottom: 16px;
        }
        .synced-tab-slider {
            width: 100%;
        }
        .swiper-container {
            padding: 0 calc(20/390*100vw);
        }
        .swiper-wrapper {
            gap:0;
            margin-bottom: 0;
        }
        .swiper-slide {
            width: calc(350/390*100vw);
            padding: 0 calc(10/390*100vw);
        }
        .best-muulti-item-fit__desc {
            margin: 0 calc(20 / 390 * 100vw);
            color: var(--lge-gray-g50);
            font-size: calc(12 / 390 * 100vw);
            letter-spacing: calc(-0.48em/12);
        }
        .swiper-navigation-button {
            top: 28vw !important;
            right: 4vw !important;
        }
        .swiper-navigation-button--prev {
            right: 0 !important; 
            left: 5vw !important;
        }
    }    
}

.go-multi-shopping {
    .go-multi-shopping__linker {
        position: absolute;
    }
    .go-multi-shopping__linker--01 {
        top: 0%;
        left: 0%;
        width: 50%;
        height: 50%;
    }
    .go-multi-shopping__linker--02 {
        top: 0%;
        left: 50%;
        width: 50%;
        height: 50%;
    }
    .go-multi-shopping__linker--03 {
        top: 50%;
        left: 0%;
        width: 50%;
        height: 50%;
    }
    .go-multi-shopping__linker--04 {
        top: 50%;
        left: 50%;
        width: 50%;
        height: 50%;
    }

    @media (max-width: 767px) {
        .go-multi-shopping__linker--01 {
            top: 0%;
            left: 0%;
            width: 100%;
            height: 25%;
        }
        .go-multi-shopping__linker--02 {
            top: 25%;
            left: 0%;
            width: 100%;
            height: 25%;
        }
        .go-multi-shopping__linker--03 {
            top: 50%;
            left: 0%;
            width: 100%;
            height: 25%;
        }
        .go-multi-shopping__linker--04 {
            top: 75%;
            left: 0%;
            width: 100%;
            height: 25%;
        }
    }
}

.multi-faq {
    .l-article__content {
        width: 100%;
        max-width: 1146px;
        margin: 0 auto;
    }
}
/*=================================*/
/* // 개별 영역 처리 */
/*=================================*/