.l-article  {
    position: relative;
    width: 100%;
}

/* S : 팝업 영역 */
[id^="sample-modal-"].popup-wrap {
    min-height:auto !important;
    padding: calc(48 * var(--ratio)) 0 calc(40 * var(--ratio));
    max-width: 780px;   
    max-height: 100dvh;

    .relative-area {
        position: relative;
    }

    .pop-conts  {
        padding: 0;
        img {width: 100%;}
        &.no-footer{
        max-height: calc(95dvh - (88 * var(--ratio)));
            &:after{padding: 0;}
        }
    }
    .button002_06 {
        position: absolute;
        width: 92%;
        height: 12%;
        left: 4%;
        bottom: -1%;

        @media screen and (max-width: 767px) {
            width: 93%;
            height: 11.5%;
            left: 4%;
        }
    }
    &>.btn-close{
        width: clamp(16px, 4.105vw, 32px);
        height: clamp(16px, 4.105vw, 32px);
        &::before{
            width: 100%;
            height: 100%;
            background-size: 150%;
            background-position: center;
        }
    }
}

/* #sample-modal-01-01.popup-wrap {
    max-width: 36%;
    min-height: 90% !important;

    @media screen and (max-width: 767px) {
        max-width: 100%;
        min-height: 100% !important;
        top: 0% !important;
    }

    .pop-conts  {
        max-height: 80%;

        img {width: 100%;}
    }
}

#sample-modal-01-02.popup-wrap {
    max-width: 28%;
    min-height: 90% !important;

    @media screen and (max-width: 767px) {
        max-width: 100%;
        min-height: 100% !important;
        top: 0% !important;
    }

    .pop-conts  {
        max-height: 80%;

        img {width: 100%;}
    }
}

#sample-modal-02-01.popup-wrap {
    max-width: 36%;
    min-height: 90% !important;

    @media screen and (max-width: 767px) {
        max-width: 100%;
        min-height: 100% !important;
    }

    .pop-conts  {
        max-height: 80%;

        img {width: 100%;}
    }
}

#sample-modal-02-02.popup-wrap {
    max-width: max-content;

    @media screen and (max-width: 767px) {
        max-width: 100%;
    }

    .pop-conts  {
        max-height: 80%;

        img {width: 100%;}
    }
}

#sample-modal-02-03.popup-wrap {
    max-width: 33%;
    min-height: 90% !important;

    @media screen and (max-width: 767px) {
        max-width: 100%;
        min-height: 100% !important;
    }

    .pop-conts  {
        max-height: 80%;

        img {width: 100%;}

        
    }
} */

/* E : 팝업 영역 */

.event-benefit-template {

    .change-up-cont01   {
        background: black;

        .c-title    {
            text-align: left;

            .c-title__main  {
                color: #FFF;
            }
            .c-title__eyebrow   {color: #A7A7A7;}
        }

        .swiper-container-wrap {
            .swiper-container   {
                padding: 0;
            }

            .swiper-wrapper {

                @media screen and (max-width: 767px) {
                    gap:0px;
                }

                .swiper-slide   {
                    display: flow;
                    height: 100%;
                    width: 100%;

                    .j-responsive-video {
                        max-height: 100%;
                        border-radius: 16px;
                        overflow: hidden;
                        height: 100%;
        
                        @media screen and (max-width: 767px) {
                            width: 100%;
                        }
                    
                        .j-responsive-video {width: 100%; height: 100%;}
                    }
            
                    .video-text {
                        text-align: left;
                        padding-top: 10px;
            
                        h3  {
                            color: #fff;
                            font-size: calc(16 * var(--ratio));
                            font-style: normal;
                            font-weight: 600;
                            line-height: 140%;
                            letter-spacing: -0.32px;
                        }
            
                        p   {
                            color: #A7A7A7;
                            font-size: calc(16 * var(--ratio));
                            font-style: normal;
                            font-weight: 400;
                            line-height: 140%; /* 22.4px */
                            letter-spacing: -0.32px;
                        }
                    }
                }   
            }

            .c-swiper__controls {


                @media screen and (max-width: 767px) {
                    .swiper-pagination-bullet-active    {
                        background: black;
                        border: 3px solid white;
                        width: max(14px, calc(14 / 390 * 100vw));
                        height: max(14px, calc(14 / 390 * 100vw));
                    }
                }
            }
            
        }

    }

    .change-up-cont02   {
        row-gap: 12px;

        article {
            display: grid;
            row-gap: 20px;

            picture {
                width: fit-content;
                margin: 0 auto;
            }
        }
    }

    .change-up-cont03   {
        
        .change-cont-wrap   {

            article {position: relative;}

            .button001_01    {
                position: absolute;
                width: 18.8%;
                height: 3.3%;
                left: 40.5%;
                top: 27.5%;

                @media screen and (max-width: 767px) {
                    width: 19.8%;
                    height: 3.8%;
                    left: 40%;
                    top: 27.5%;
                }
            }

            .button001_02    {
                cursor: pointer;
                position: absolute;
                width: calc(145 * var(--ratio));
                height: calc(44 * var(--ratio));
                left: calc(44 * var(--ratio));
                top: calc(142 * var(--ratio));

                @media screen and (max-width: 767px) {
                    width: 37.6%;
                    height: 7.8%;
                    left: 10.9%;
                    top: 19.2%;
                }
            }

            .button001_03    {
                position: absolute;
                width: calc(145 * var(--ratio));
                height: calc(44 * var(--ratio));
                right: calc(44 * var(--ratio));
                top: calc(142 * var(--ratio));

                @media screen and (max-width: 767px) {
                    width: 37.6%;
                    height: 7.8%;
                    right: 10.9%;
                    top: 19.2%;
                }
            }

            .button001_04   {
                position: absolute;
                width: 24.3%;
                height: 16%;
                top: 82%;
                left: 7.1%;
            }

            .button001_05   {
                position: absolute;
                width: 24.3%;
                height: 16%;
                top: 82%;
                left: 37.8%;
            }

            .button001_06   {
                position: absolute;
                width: 24.3%;
                height: 16%;
                top: 82%;
                left: 68.6%;
            }


            .button002_01    {
                position: absolute;
                width: 18.8%;
                height: 3.3%;
                left: 40.5%;
                top: 27%;

                @media screen and (max-width: 767px) {
                    width: 19.8%;
                    height: 3.8%;
                    left: 40%;
                    top: 27.7%;
                }
            }
            
            .button002_02    {
                cursor: pointer;
                position: absolute;
                width: calc(145 * var(--ratio));
                height: calc(44 * var(--ratio));
                left: calc(44 * var(--ratio));
                top: calc(142 * var(--ratio));

                @media screen and (max-width: 767px) {
                    width: 37.6%;
                    height: 7.8%;
                    left: 10.9%;
                    top: 19.2%;
                }
            }

            .button002_03    {
                position: absolute;
                width: calc(145 * var(--ratio));
                height: calc(44 * var(--ratio));
                right: calc(44 * var(--ratio));
                top: calc(142 * var(--ratio));

                @media screen and (max-width: 767px) {
                    width: 37.6%;
                    height: 7.8%;
                    right: 10.9%;
                    top: 19.2%;
                }
            }

            .button002_04    {
                position: absolute;
                width: 39.7%;
                height: 14.8%;
                left: 7.1%;
                top: 82.5%;
            }

            .button002_05    {
                position: absolute;
                width: 39.7%;
                height: 14.8%;
                left: 53.2%;
                top: 82.5%;
            }

        }
    }

    .change-up-sub-cont {
        position: relative;
        max-width: 1380px;
        margin: 0 auto;
        padding-left: 20px;
        padding-right: 20px;

        @media screen and (max-width: 767px) {
            padding-left: 0px;
            padding-right: 0px;
        }

        .button003_01   {
            position: absolute;
            width: 47.5%;
            height: 10.3%;
            left: 26.2%;
            top: 76.3%;

            @media screen and (max-width: 767px) {
                width: 47.5%;
                height: 10%;
                left: 26.2%;
                top: 76.5%;
            }
        }
    }

    .change-up-cont06 {

        .c-title--normal    {
            text-align: center;
        }

        .l-article__content {

            ul  {
                display: grid;
                gap: 16px;
                justify-content: center;

                @media screen and (max-width: 767px) {
                    display: grid;
                }
            }
        }
    }
}

.c-custom-accordion__area--fade {
    height: calc(188 * var(--ratio));

    &::after {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.70) 39.93%, #FFF 85.22%);
    }
}

.change-up-cont03.c-custom-accordion__area--fade    {height: 0;}

.change-up-cont03-more-btn  {
    position: absolute;
    margin: 0px;
    padding: var(--spacing-article-split) 0;
    margin-top: -30% !important;
}

.change-up-cont03-more-btn.c-button--box-outlined-white   {
    background: black;
    margin: 0 !important;
}
.l-tab {
    &:has( > .c-tab--3depth[data-tab-sticky="2depth"]),
    &:has( > .c-tab--3depth[data-tab-sticky="3depth"]) {
        row-gap: 0;
    }    
}