.c-tab--1depth {
    .c-tab__button {
        padding: calc(3 * var(--ratio)) 0;
        line-height: 120%;
    }
}

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

.c-title--normal {
    .c-title__main {
        font-size: calc(26 / 1160 * 100vw);

        @media screen and (max-width: 767px) {
            font-size: calc(26 * var(--ratio));
        }
    }
}

/* S : 팝업 영역 */
#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%;}

        .button002_06    {
            position: absolute;
            width: 78.2%;
            height: 7.8%;
            left: 11%;
            top: 79.8%;

            @media screen and (max-width: 767px) {
                width: 82.5%;
                height: 5.5%;
                left: 9%;
                top: 55.5%;
            }
        }
    }
}

/* E : 팝업 영역 */

.event-benefit-template {

    .change-up-cont01   {
        background: black;

        .c-title    {
            text-align: left;

            .c-title__main  {
                color: #FFF;
                font-size: calc(26 / 1160 * 100vw);

                @media screen and (max-width: 767px) {
                    font-size: calc(26 * var(--ratio));
                }
            }
            .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: auto;
                    width: 100%;

                    .j-responsive-video {
                        max-height: 100%;
                        border-radius: 16px;
                        overflow: hidden;
                        height: calc(173 / 1160 * 100vw);
        
                        @media screen and (max-width: 767px) {
                            width: 100%;
                            height: calc(173 / 390 * 100vw);
                        }
                    
                        .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: 28%;
                
                @media screen and (max-width: 767px) {
                    width: 19.8%;
                    height: 3.8%;
                    left: 40%;
                    top: 27.7%;
                }
            }

            .button001_02    {
                cursor: pointer;
                position: absolute;
                width: 38%;
                height: 6.4%;
                left: 11%;
                top: 20.3%;

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

            .button001_03    {
                position: absolute;
                width: 38%;
                height: 6.4%;
                left: 51%;
                top: 20.3%;

                @media screen and (max-width: 767px) {
                    width: 37.6%;
                    left: 51.5%;
                    height: 6.4%;
                    top: 20.2%;
                }
            }

            .button001_04   {
                position: absolute;
                width: 24.3%;
                height: 11.6%;
                top: 71.8%;
                left: 7.1%;

                @media screen and (max-width: 767px) {
                    width: 24%;
                    height: 12%;
                    top: 71.5%;
                    left: 7.3%;
                }
            }

            .button001_05   {
                position: absolute;
                width: 24.3%;
                height: 11.6%;
                top: 71.8%;
                left: 37.8%;

                @media screen and (max-width: 767px) {
                    width: 24%;
                    height: 12%;
                    top: 71.5%;
                    left: 38%;
                }
            }

            .button001_06   {
                position: absolute;
                width: 24.3%;
                height: 11.6%;
                top: 71.8%;
                left: 68.6%;

                @media screen and (max-width: 767px) {
                    width: 24%;
                    height: 12%;
                    top: 71.5%;
                    left: 69%;
                }
            }


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

                @media screen and (max-width: 767px) {
                    width: 19.8%;
                    height: 3.8%;
                    left: 40%;
                    top: 27.7%;
                }
            }
            
            .button002_02    {
                cursor: pointer;
                position: absolute;
                width: 38%;
                height: 6.4%;
                left: 11%;
                top: 20.3%;

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

            .button002_03    {
                position: absolute;
                width: 38%;
                height: 6.4%;
                left: 51%;
                top: 20.3%;

                @media screen and (max-width: 767px) {
                    width: 37.6%;
                    left: 51.5%;
                    height: 6.4%;
                    top: 20.2%;
                }
            }

            .button002_04    {
                position: absolute;
                width: 39.7%;
                height: 10.8%;
                left: 7.1%;
                top: 73.5%;

                @media screen and (max-width: 767px) {
                    width: 39.9%;
                    height: 11.5%;
                    left: 7%;
                    top: 73.1%;
                }
            }

            .button002_05    {
                position: absolute;
                width: 39.7%;
                height: 10.8%;
                left: 53.2%;
                top: 73.5%;

                @media screen and (max-width: 767px) {
                    position: absolute;
                    width: 39.9%;
                    height: 11.5%;
                    left: 53.2%;
                    top: 73.1%;
                }
            }

        }
    }

    .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-cont05 {

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

    }

    .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-more-btn:has([aria-expanded="false"])  {
    position: absolute;
    left: 0;
    margin-top: -23%;
}

.c-custom-more-btn:has([aria-expanded="true"])  {
    padding: var(--spacing-article-split) 0;
    background: black;
}

.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;
}