@charset "utf-8";

/* main sticky tab */
.event-benefit-template .content-wrap .tab_wrap {
    position: sticky;
    top: 0;
    right: 0;
    left: 0;
    z-index: 20;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
}

.event-benefit-template .tab_wrap .tab_inner {
    display: flex;
    justify-content: center;
    background-color: #fff;
}

.event-benefit-template .tab_wrap .tab_inner ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    overflow-x: auto;
}

.event-benefit-template .tab_wrap [role='presentation'] {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center;
}

.event-benefit-template .tab_wrap [role='presentation']::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    content: '';
    background-color: rgba(0, 0, 0, 0.1);
}

.event-benefit-template .tab_wrap [role='presentation'].active::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    content: '';
    background-color: #000;
}

.event-benefit-template .tab_wrap .tab_inner li a {
    position: relative;
    display: flex;
    align-items: center;
    width: max-content;
    height: 100%;
    padding: 0 20px;
    font-size: 26px;
    font-weight: 600;
    line-height: 140%;
    color: #696969;
    text-align: center;
    text-align: center;
    letter-spacing: -0.52px;

    transition: color 0.3s;
}

.event-benefit-template .tab_wrap .tab_inner li.active a {
    font-weight: 700;
    color: #1a1a1a;
}

@container article-area (max-width: 999px) {
    .event-benefit-template .tab_wrap .tab_inner li a {
        padding: 0 calc(40 / 999 * 100vw);
        font-size: 20px;
    }
}

@media screen and (max-width: 767px) {
    .event-benefit-template .content-wrap .tab_wrap {
        top: 56px;
    }

    .header.helloBar ~ .container .event-benefit-template .content-wrap .tab_wrap {
        top: 98px;
    }

    .event-benefit-template .tab_wrap .tab_inner ul {
        height: calc(108 / 720 * 100vw);
        border-top: 1px solid #fff;
        border-bottom: 1px solid #fff;
    }

    .event-benefit-template .tab_wrap [role='presentation'].active::after {
        height: calc(8 / 720 * 100vw);
    }

    .event-benefit-template .tab_wrap .tab_inner li a {
        padding: 0 calc(32 / 720 * 100vw);
        font-size: calc(28 / 720 * 100vw);
        line-height: 1.42857;
        text-align: center;
        letter-spacing: calc(-0.56em / 28);
    }
}
/* // main sticky tab */

/* small sticky switching tab */
.tab_wrap3 {
    position: sticky;
    top: 90px;
    z-index: 9;
}
.tab_wrap3 .tab_inner {
    max-width: 100%;
    padding: 10px calc(190 / 1380 * 100%);
    margin: 0 auto 42px;
    background-color: #f7f5f0;
}
.tab_wrap3 .tab_inner ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}
.tab_wrap3 .tab_inner li {
    position: relative;
    height: 48px;
    background-color: transparent;
    border: 1px solid #404040;
    border-radius: 32px;
    transition: background-color 0.3s;
}
.tab_wrap3 .tab_inner li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 18px;
    font-size: 20px;
    font-weight: 500;
    line-height: 120%;
    color: #1a1a1a;
}
.tab_wrap3 .tab_inner li.active {
    background-color: #1a1a1a;
    border-color: #2e2e33;
}
.tab_wrap3 .tab_inner li.active a {
    color: #fff;
}
@media screen and (max-width: 767px) {
    .tab_wrap3 {
        top: calc(56px + calc(108 / 720 * 100vw));
    }
    .header.helloBar ~ .container .event-benefit-template .tab_wrap3 {
        top: calc(98px + calc(108 / 720 * 100vw));
    }
    .tab_wrap3 .tab_inner {
        padding: 0;
        margin: 0 0 calc(16 / 720 * 100vw);
    }

    .tab_wrap3 .tab_inner ul {
        gap: calc(16 / 720 * 100vw);
        padding: 10px calc(48 / 720 * 100vw);
    }

    .tab_wrap3 .tab_inner li {
        height: auto;
    }

    .tab_wrap3 .tab_inner li a {
        padding: calc(16 / 720 * 100vw) calc(24 / 720 * 100vw);
        font-size: calc(28 / 720 * 100vw);
        font-weight: 500;
        line-height: 1.1428;
    }
}
.tab_container .tab_con {
    display: none;
    margin: 0 auto;
}
.tab_container .tab_con:focus {
    outline: none;
}
.tab_container .tab_con:focus-visible {
    outline-offset: -3px;
}

.tab_container .tab_con.active {
    display: block;
}
/* // small sticky switching tab */

/* 구독 혜택 */
.event-benefit-template .benefit-list-swiper-wrap {
    overflow: hidden;
}

.event-benefit-template .benefit-list-swiper {
    margin: 0 auto;
    overflow: visible;
}

.event-benefit-template .benefit-list-swiper .swiper-wrapper {
    display: flex;
    align-items: flex-end;
}

@media screen and (max-width: 767px) {
    .event-benefit-template .benefit-list-swiper {
        padding: 0 calc(32 / 720 * 100%);
    }
    .event-benefit-template .benefit-list-swiper {
        margin: 0;
        overflow: hidden;
    }
    .event-benefit-template .benefit-list-swiper .swiper-wrapper {
        display: flex;
        flex-wrap: nowrap;
        column-gap: initial;
        align-items: initial;
    }

    .event-benefit-template .benefit-list-swiper .swiper-slide {
        width: calc(460 / 720 * 100vw);
        padding: 0 calc(16 / 720 * 100vw);
        margin: 0;
    }
}
/* // 구독 혜택 */

/* 구독료가 이렇게 달라집니다! */
.event-benefit-template .cont02_btn {
    position: absolute;
    bottom: 7.7%;
    left: 29%;
    width: 42%;
    height: 10.3%;
}
@media screen and (max-width: 767px) {
    .event-benefit-template .cont02_btn {
        bottom: 4.7%;
        left: 11%;
        width: 78%;
        height: 7.3%;
    }
}
/* // 구독료가 이렇게 달라집니다! */


/* 제품 리스트 */
.event-benefit-template .summary-content--product-list {
    padding-bottom: calc(80 / 1380 * 100%);
    background-color: #f7f5f0;
}
.event-benefit-template .relative_wrap {
    position: relative;
}
.event-benefit-template .product-list__img {
    display: block;
    width: 100%;
    padding: 10px calc(205 / 1380 * 100%);
    margin: 0 auto;
}
.event-benefit-template .tab_content {
    position: relative;
}

.event-benefit-template .product__linker {
    position: absolute;
    width: 23%;
}

.tab01_btn_grid .product__linker {
    height: 1%;
}
.tab01_btn_grid .product__linker:nth-child(1){top:15.5%;left:14%;}
.tab01_btn_grid .product__linker:nth-child(2){top:15.5%;left:38.6%;}
.tab01_btn_grid .product__linker:nth-child(3){top:15.5%;left:63.1%;}

.tab01_btn_grid .product__linker:nth-child(4){top:32.2%;left:14%;}
.tab01_btn_grid .product__linker:nth-child(5){top:32.2%;left:38.6%;}
.tab01_btn_grid .product__linker:nth-child(6){top:32.2%;left:63.1%;}

.tab01_btn_grid .product__linker:nth-child(7){top:48.9%;left:14%;}
.tab01_btn_grid .product__linker:nth-child(8){top:48.9%;left:38.6%;}
.tab01_btn_grid .product__linker:nth-child(9){top:48.9%;left:63.1%;}

.tab01_btn_grid .product__linker:nth-child(10){top:65.5%;left:14%;}
.tab01_btn_grid .product__linker:nth-child(11){top:65.5%;left:38.6%;}
.tab01_btn_grid .product__linker:nth-child(12){top:65.5%;left:63.1%;}

.tab01_btn_grid .product__linker:nth-child(13){top:82.2%;left:14%;}
.tab01_btn_grid .product__linker:nth-child(14){top:82.2%;left:38.6%;}
.tab01_btn_grid .product__linker:nth-child(15){top:82.2%;left:63.1%;}

.tab01_btn_grid .product__linker:nth-child(16){top: 98.9%;left:14%;}


.tab02_btn_grid .product__linker {
    height: 6%;
}
.tab02_btn_grid .product__linker:nth-child(1){top: 93.5%;left:14%;}
.tab02_btn_grid .product__linker:nth-child(2){top: 93.5%;left:38.6%;}
.tab02_btn_grid .product__linker:nth-child(3){top: 93.5%;left:63.1%;}


.tab03_btn_grid .product__linker {
    height: 6.7%;
}
.tab03_btn_grid .product__linker:nth-child(1){top: 93.5%;left:14%;}
.tab03_btn_grid .product__linker:nth-child(2){top: 93.5%;left:38.6%;}
.tab03_btn_grid .product__linker:nth-child(3){top: 93.5%;left:63.1%;}

.tab04_btn_grid .product__linker {
    height: 6.7%;
}
.tab04_btn_grid .product__linker:nth-child(1){top: 93.5%;left:14%;}
.tab04_btn_grid .product__linker:nth-child(2){top: 93.5%;left:38.6%;}

.tab05_btn_grid .product__linker {
    height: 6.7%;
}
.tab05_btn_grid .product__linker:nth-child(1){top: 93.5%;left:14%;}
.tab05_btn_grid .product__linker:nth-child(2){top: 93.5%;left:38.6%;}
.tab05_btn_grid .product__linker:nth-child(3){top: 93.5%;left:63.1%;}

@media screen and (max-width: 767px) {
    .event-benefit-template img {
        width: 100%;
    }

    .event-benefit-template .summary-content--product-list {
        padding-bottom: calc(64 / 720 * 100vw);
    }

    .event-benefit-template .product-list__img {
        padding: 0;
    }

    .cont02_btn {
        bottom: 28.7%;
        left: 9%;
        width: 82%;
        height: 9.3%;
    }

    .event-benefit-template .product__linker {
        width: 48%;
    }

    .event-benefit-template .summary-content--product-list .tab_container {
        padding: calc(48 / 720 * 100vw) calc(48 / 720 * 100vw) 0;
    }

    .tab01_btn_grid .product__linker{height:0.8%;}
    .tab01_btn_grid .product__linker:nth-child(1){top:11.5%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(2){top:11.5%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(3){top:24.06%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(4){top:24.06%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(5){top:36.55%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(6){top:36.55%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(7){top:49.04%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(8){top:49.04%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(9){top:61.7%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(10){top:61.7%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(11){top:74.2%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(12){top:74.2%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(13){top:86.7%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(14){top:86.7%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(15){top:99.3%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(16){top:99.3%;left:52%;}

    .tab01_btn_grid .product__linker:nth-child(17){top:99.3%;left:0%;}
    .tab01_btn_grid .product__linker:nth-child(18){top:99.3%;left:52%;}


    .tab02_btn_grid .product__linker{height:2.7%;}
    .tab02_btn_grid .product__linker:nth-child(1){top:46.9%;left:0%;}
    .tab02_btn_grid .product__linker:nth-child(2){top:46.9%;left:52%;}

    .tab02_btn_grid .product__linker:nth-child(3){top:97.5%;left:0%;}

    .tab03_btn_grid .product__linker{height:3.4%;}
    .tab03_btn_grid .product__linker:nth-child(1){top:46.34%;left:0%;}
    .tab03_btn_grid .product__linker:nth-child(2){top:46.34%;left:52%;}

    .tab03_btn_grid .product__linker:nth-child(3){top:96.92%;left:0%;}


    .tab04_btn_grid .product__linker{height:5.4%;}
    .tab04_btn_grid .product__linker:nth-child(1){top:94.68%;left:0%;}
    .tab04_btn_grid .product__linker:nth-child(2){top:94.68%;left:52%;}


    .tab05_btn_grid .product__linker{height:3.4%;}
    .tab05_btn_grid .product__linker:nth-child(1){top:46.18%;left:0%;}
    .tab05_btn_grid .product__linker:nth-child(2){top:46.18%;left:52%;}

    .tab05_btn_grid .product__linker:nth-child(3){top:97.18%;left:0%;}
}
/* // 제품 리스트 */

/* 결합 & 제휴카드 혜택 */
.cont04_btn01 {
    position: absolute;
    top: 30.7%;
    left: 13%;
    width: 37%;
    height: 29.3%;
}
.cont04_btn02 {
    position: absolute;
    top: 30.7%;
    left: 51%;
    width: 37%;
    height: 29.3%;
}
.cont04_btn03 {
    position: absolute;
    top: 74.5%;
    left: 13%;
    width: 74%;
    height: 24.3%;
}

.cont06_btn {
    position: absolute;
    bottom: 7.7%;
    left: 34%;
    width: 32%;
    height: 6.8%;
}

@media screen and (max-width: 767px) {
    .event-benefit-template .cont04_btn01 {
        top: 17.7%;
        left: 5%;
        width: 90.4%;
        height: 20.7%;
    }
    .event-benefit-template .cont04_btn02 {
        top: 48.7%;
        left: 5%;
        width: 89.4%;
        height: 20.7%;
    }
    .event-benefit-template .cont04_btn03 {
        top: 80.7%;
        left: 5%;
        width: 89.4%;
        height: 18.7%;
    }

    .event-benefit-template .cont06_btn {
        bottom: 6.7%;
        left: 11%;
        width: 78%;
    }
}
/* // 결합 & 제휴카드 혜택 */