@import url(common.css);

/*********************************************************************  
* :root 변수 설정 + 공통
*********************************************************************/
:root {

    /* btn-transparent 공통 설정 */
    --btn-transparent-height: clamp(50px, 9.375vw, 60px);
}

@media screen and (max-width: 1320px) {
    :root {
        --info-section-height: auto;
        --doctor-section-height: auto;
    }
}
@media screen and (max-width: 1100px) {
    :root {
        --clinic-box-height: auto;
    }
}
@media screen and (max-width: 1020px) {
    :root {
        --news-inner-gap: 40px;
    }
}


/*********************************************************************  
* 메인 섹션 타이틀 박스 (공통)
*********************************************************************/
.main-section-title-box {
    & {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    &.center {align-items: center;}
    
    & .main-section-sub-title {
        font-size: var(--font-main-sub-title-size);
        font-weight: var(--font-weight-bold);
        color: var(--color-main-03);
        letter-spacing: 3px;
    }
    & h2 {
        font-size: var(--font-main-h2-size);
        font-weight: var(--font-weight-extra-bold);
        line-height: var(--hero-main-title-line-height);
    }
    & strong {color: var(--color-main-03);}
    & .main-section-text {
        font-size: var(--font-size-18);
        color: var(--color-text-03);
        line-height: 1.5;
        word-break: keep-all;
    }
    &.white, 
    &.white .main-section-sub-title, 
    &.white .main-section-text {color: var(--color-main-white);}
}
@media screen and (max-width: 640px) {
    .main-section-title-box {
        align-items: center;
        text-align: center;
    }
}

.btn-more-mb {
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: clamp(15px, 3.90625vw, 25px);
    margin: 
        clamp(20px, 4.6875vw, 30px) 
        auto 
        clamp(30px, 6.25vw, 40px)
    ;
    border: 1px solid var(--color-line-01);
    font-family: var(--font-family-granville);
    font-size: var(--font-size-16);
    letter-spacing: 0.035rem;
    transform: scaleY(0.9);
}

/*********************************************************************  
* HERO 이미지 섹션 (#hero)
*********************************************************************/
#hero {

    /* HERO 섹션 */
    /* --hero-section-height: calc(100dvh - var(--header-total-height)); */
    --hero-section-height: 100dvh;
    --hero-txt-box-gap: 15px;
    --hero-main-title-line-height: 1.3;

    height: var(--hero-section-height);
    background-color: #062132;
    color: var(--color-main-white);

    @media screen and (max-width: 1100px) {
        height: calc(var(--hero-section-height) - var(--simple-reservation-height));
    }

    & .swiper {
        width: 100%;
        height: 100%;
        margin: 0 auto;

        & .swiper-slide {
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
    
        & a {
            width: 100%;
            height: 100%;

            & .text-inner {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
        
                & .hero-txt-box {
                    --gap: 26px;

                    flex-grow: 1;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: var(--gap);
                    font-family: var(--font-family-gowoondodum);

                    @media screen and (max-width: 640px) {
                        flex-direction: column;
                    }
                
                    & .hero-main-title {
                        position: relative;
                        font-size: var(--font-hero-h2-size);
                        font-weight: var(--font-weight-thin);
                        /* line-height: var(--hero-main-title-line-height); */
                        line-height: 1;
                        letter-spacing: 0.1rem;

                        &::after {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            right: calc(var(--gap) / -2);
                            width: 1px;
                            height: calc(var(--font-hero-h2-size) * 0.8);
                            background-color: var(--color-main-white);
                            content: '';

                            @media screen and (max-width: 640px) {
                                display: none;
                            }
                        }
                    }
                    
                    & .hero-rotating-text {
                        --hero-rotating-text-height: 42px;
                        position: relative;
                        display: flex;
                        align-items: center;
                        width: 100%;
                        max-width: 270px;
                        height: var(--hero-rotating-text-height);
                        overflow: hidden;

                        & .hero-line {
                            position: absolute;
                            left: 0;
                            top: 0;
                            opacity: 0;
                            display: flex;
                            align-items: center;
                            height: var(--hero-rotating-text-height);
                            font-size: var(--font-size-16);
                            font-weight: var(--font-weight-light);
                            line-height: var(--hero-main-title-line-height);
                            letter-spacing: 0.05rem;
                            transition: opacity 1s ease;

                            &.active {opacity: 1;}
    
                            @media screen and (max-width: 1320px) {
                                font-size: var(--font-size-14);
                            }
                            @media screen and (max-width: 640px) {
                                justify-content: center;
                                width: 100%;
                                text-align: center;
                            }
                        }
                    }
                    
                    @media screen and (max-width: 1320px) {
                        & {
                            align-items: center;
                        }
                    }
                }
                
            }
        }
    }

    & .scroll-icon-group {
        --scroll-icon-group-bottom-pos: 40px;

        z-index: 10;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(var(--simple-reservation-height) + var(--scroll-icon-group-bottom-pos));
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        width: fit-content;

        & .scroll-icon {
            --scroll-icon-height: 32px;

            position: relative;
            height: var(--scroll-icon-height);
            aspect-ratio: 0.625/1;
            border-radius: 10px;
            border: 2px solid var(--color-main-white);

            &::before {
                position: absolute;
                top: 4px;
                left: 50%;
                transform: translateX(-50%);
                width: 2px;
                height: calc(var(--scroll-icon-height) * 0.25);
                border-radius: 3px;
                background-color: var(--color-main-white);
                content: '';
                animation: scrollDown 1.5s ease-in-out infinite alternate-reverse;
            }
        }
        & p {
            font-family: var(--font-family-granville);
            font-size: var(--font-size-12);
            font-weight: var(--font-weight-light);
            letter-spacing: 0.02rem;

            &::after {content: 'SCROLL DOWN';}
        }
    }
}

@keyframes scrollDown {
    0% {top: 4px}
    50% {top: 14px}
    100% {top: 4px}
}


/*********************************************************************  
* 밀락씨의원의 기준 (#standard), 특별함 (#special) 섹션
*********************************************************************/
:root {
    /* 1300px 기준 */
    --slide-nav-button-gap: clamp(10px, 1.53846154vw, 20px);
    --slide-nav-margin-top: clamp(25px, 3.84615385vw, 50px);
    --slide-btn-box-height: clamp(34px, 3.38461538vw, 44px);
}

#standard, #special {
    --height: 100vh;

    position: relative;
    height: var(--height);

    & .inner {
        --max-height: 514px;

        display: flex;
        align-items: center;
        height: 100%;

        & .slide-text-box {
            flex: 0 0 auto; 
            display: flex;
            flex-direction: column;
            justify-content: center;

            /* 1500px 기준 */
            width: clamp(300px, 43.2vw, 648px);
            height: var(--max-height);

            & .text-wrap {
                --text-wrap-padding-left: 50px;

                position: relative;
                padding-left: var(--text-wrap-padding-left);

                @media screen and (max-width: 1300px) {
                    padding-bottom: clamp(25px, 3.84615385vw, 50px);
                }

                & .text-group {

                    /* 640px 기준 */
                    --group-gap: clamp(15px, 4.6875vw, 30px);

                    display: flex;
                    flex-direction: column;
                    gap: var(--group-gap);
                
                    & h2 {
                        font-size: var(--font-size-34);
                        line-height: 1.4;

                        @media screen and (max-width: 1300px) {
                            font-size: var(--font-size-28);
                        }
                        @media screen and (max-width: 640px) {
                            font-size: var(--font-size-24);
                        }
                    }
                    & em {
                        font-size: var(--font-size-20);
                        font-weight: var(--font-weight-regular);
                        color: var(--color-main-02);

                        @media screen and (max-width: 640px) {
                            font-size: var(--font-size-18);
                        }
                    }
                    & p {
                        font-size: var(--font-size-16);
                        color: var(--color-text-03);
                        line-height: 1.8;
                        word-break: keep-all;
                    }
                }
                & .slide-nav-buttons {

                    display: flex;
                    align-items: center;
                    gap: var(--slide-nav-button-gap);
                    width: 100%;
                    height: var(--slide-btn-box-height);
                    margin-top: var(--slide-nav-margin-top);

                    & .swiper-button-prev,
                    & .swiper-button-next {
                        position: static;
                        width: var(--slide-btn-box-height);
                        /* aspect-ratio: 1/1; */
                        height: var(--slide-btn-box-height);
                        margin-top: 0;
                        border: 1px solid var(--color-line-01);
                        border-radius: 50%;

                        &::after {
                            font-size: calc(var(--slide-btn-box-height) * 0.45);
                            color: var(--color-text-01);
                        }
                    }
                    & .swiper-button-prev {
                        &::after {content: '←';}
                    }
                    & .swiper-button-next {
                        &::after {content: '→';}
                    }
                }
            }
        }
        & .slide-array {
            flex: 1 1 auto; 
            width: 100%;
            height: var(--max-height);

            & .standardSwiper {
                width: 100%;

                & .swiper-wrapper {

                    & .swiper-slide {
                        --standard-slide-gap: 20px;

                        display: flex;
                        flex-direction: column;
                        gap: var(--standard-slide-gap);
                        
                        & .img-bx {
                            width: 100%;
                            aspect-ratio: 1/0.6875;

                            & img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        & .title-bx {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            padding-bottom: var(--standard-slide-gap);
                            border-bottom: 1px solid var(--color-text-01);
                            
                            & .title-group {
                                --title-gap: 12px;

                                display: flex;
                                flex-direction: column;
                                gap: var(--title-gap);

                                & em {
                                    font-family: var(--font-family-granville);
                                    font-size: var(--font-size-14);
                                    color: var(--color-main-02);
                                }
                                & h3 {
                                    font-size: var(--font-size-20);
                                }
                            }
                            & .title-arrow {
                                width: 15px;
                                aspect-ratio: 1/1;

                                & img {width: 100%;}
                            }
                        }
                        & .list-bx {
                            --gap: 12px;

                            display: flex;
                            flex-direction: column;
                            gap: var(--gap);

                            & .list-item {
                                
                                & a {
                                    --gap: clamp(10px, 3.125vw, 20px);

                                    display: flex;
                                    align-items: center;
                                    gap: var(--gap);

                                    &:hover {

                                        & h4 {color: var(--color-main-02);}
                                    }

                                    & .list-img {
                                        --width: 70px;

                                        flex-shrink: 0;
                                        width: var(--width);
                                        aspect-ratio: 1/1;

                                        & img {
                                            width: 100%;
                                            object-fit: cover;
                                        }
                                    }
                                    & .list-txt {
                                        --gap: 10px;

                                        display: flex;
                                        flex-direction: column;
                                        gap: var(--gap);

                                        & h4 {
                                            font-size: var(--font-size-16);
                                            font-weight: var(--font-weight-bold);
                                            line-height: 1.3;
                                            word-break: keep-all;
                                            transition: var(--color-transition);
                                        }
                                        & p {
                                            font-size: var(--font-size-14);
                                            color: var(--color-text-03);
                                            line-height: 1.3;
                                            word-break: keep-all;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            & .specialSwiper {

                & .swiper-wrapper {

                    & .swiper-slide {
                        --special-slide-gap: clamp(15px, 2.69230769vw, 35px);

                        display: flex;
                        flex-direction: column;
                        gap: var(--special-slide-gap);

                        & .img-bx {
                            /* 1500px 기준 */
                            width: clamp(400px, 53.6vw, 804px);
                            aspect-ratio: 1/0.422885572;

                            & img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }
                        & .title-bx {

                            & .title-group {
                                --title-gap: 12px;

                                display: flex;
                                flex-direction: column;
                                gap: var(--title-gap);

                                & h3 {
                                    font-size: var(--font-size-20);
                                    line-height: 1.3;
                                    word-break: keep-all;

                                    @media screen and (max-width: 640px) {
                                        font-size: var(--font-size-18);
                                    }
                                }
                                & p {
                                    font-size: var(--font-size-16);
                                    color: var(--color-text-03);
                                    line-height: 1.3;
                                    word-break: keep-all;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}


/*********************************************************************  
* 밀락씨의원의 기준
*********************************************************************/
#standard {
    overflow: hidden;

    & svg.circle-shape {

        /* 1500px 기준 */
        --circle-w: clamp(400px, 32.2222222vw, 580px);
        bottom: calc(var(--circle-w) / -3);
        left: calc(var(--circle-w) / -3);

        @media screen and (max-width: 1100px) {
            --circle-w: clamp(400px, 54.5454545vw, 600px);

            top: calc(var(--circle-w) / -6);
            right: calc(var(--circle-w) / -3);
            bottom: unset;
            left: unset;
        }
    }

    @media screen and (max-width: 1100px) {
        height: auto;
        padding: var(--mobile-content-vertical-gap-mid) 0;
    }

    & .inner {

        @media screen and (max-width: 1300px) {
            gap: 30px;
        }
        @media screen and (max-width: 1100px) {
            flex-direction: column;
            align-items: flex-start;
            padding: 0;

            & .slide-text-box {
                width: 100%;
                height: auto;

                & br {display: block;}

                & .text-wrap {
                    padding: 0 var(--content-inner-padding);
                }
            }

            & .slide-array {
                padding-left: var(--content-inner-padding);

                @media screen and (max-width: 1100px) {
                    height: auto;
                }

                & .standardSwiper {

                    & .swiper-wrapper {

                        & .swiper-slide {

                            & .img-bx {
                                width: 100%;
                            }
                        }
                    }
                }
            }
        }
        @media screen and (max-width: 440px) {
            & .slide-text-box {

                & br {display: none;}
            }
        }

    }
}


/*********************************************************************  
* PHILOSOPHY
*********************************************************************/
#philosophy {
    --philosophy-height: 100vh;

    height: var(--philosophy-height);
    background: url('/img/main/philosophy/bg-philosophy.webp') no-repeat center/cover;

    @media screen and (max-width: 900px) {
        height: auto;
        padding: var(--content-vertical-gap-big) 0;
        background-position: 70%;
    }
    @media screen and (max-width: 480px) {
        background-position: 66%;
    }
    
    & .inner {
        --philosophy-inner-gap: clamp(30px, 6.25vw, 40px);

        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: var(--philosophy-inner-gap);
        width: 100%;
        height: 100%;
        color: var(--color-text-04);

        & .p-logo {
            max-width: 84px;
            width: 100%;

            @media screen and (max-width: 640px) {
                max-width: 120px;
            }

            & img {
                width: 100%;
            }
        }
        & .p-title {
            font-family: var(--font-family-granville);
            font-size: var(--font-size-42);
            font-weight: var(--font-weight-light);
        }
        & .p-chinese {
            --chinese-gap: 20px;

            display: grid;
            grid-template-columns: repeat(2, 1fr);
            column-gap: var(--chinese-gap);
            width: fit-content;

            & .p-chinese-item {
                display: flex;
                align-items: flex-end;

                & .chinese-character {
                    font-family: var(--font-family-nanum-myeongjo);
                    font-size: var(--font-size-32);
                    line-height: 0.75;
                }
                & .korean-character {
                    font-size: var(--font-size-18);
                    font-weight: var(--font-weight-bold);
                    line-height: 1;
                }
            }
        }
        & .p-text-group {
            display: flex;
            flex-direction: column;
            gap: var(--philosophy-inner-gap);
            text-align: center;

            & .p-text {
                line-height: 1.75;
                word-break: keep-all;
            
                & strong {font-weight: var(--font-weight-bold);}
            }
        }

        & .p-btn-more {
            margin-top: 15px;
            font-family: var(--font-family-granville);
            font-size: var(--font-size-14);
            letter-spacing: 0.035rem;
            transform: scaleY(0.9);
        }
    }
}


/*********************************************************************  
* 밀락씨의원의 특별함 - 밀락씨의원은 분명한 철학과 취향을 가진 곳입니다.
*********************************************************************/
@keyframes bg_special_move1 {
    0% {transform: translate(0%, -49%);}
    50% {transform: translate(-3%, -50%);}
    100% {transform: translate(0%, -51%);}
}
@keyframes bg_special_move2 {
    0% {transform: translate(-3%, -49%);}
    50% {transform: translate(-0%, -50%);}
    100% {transform: translate(-3%, -51%);}
}

#special {
    --special-height: 100vh;

    position: relative;
    height: var(--special-height);

    & .bg-special-bx1,
    & .bg-special-bx2 {
        position: absolute;
        top: 50%;
        transform: translate(-3%, -50%);
    }
    & .bg-special-bx1 {
        animation: bg_special_move1 6s ease-in-out infinite alternate-reverse;
    }
    & .bg-special-bx2 {
        animation: bg_special_move2 6s ease-in-out infinite alternate-reverse;
    }

    @media screen and (max-width: 1300px) {
        height: auto;
        padding: var(--mobile-content-vertical-gap-mid) 0;

        & .inner {
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            height: auto;
            padding-left: 0;
            padding-right: 0;
            
            & .slide-text-box {

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

                & .text-wrap {
                    padding: 0 var(--content-inner-padding) var(--slide-nav-margin-top);
                }
            }

            & .slide-array {
                padding-left: var(--content-inner-padding);

                @media screen and (max-width: 1300px) {
                    height: auto;
                }

                & .specialSwiper {

                    & .swiper-slide {

                        & .img-bx {
                            width: 100% !important;

                            @media screen and (max-width: 640px) {
                                aspect-ratio: 5/3.1 !important;
                            }
                        }
                    }
                }
            }
        }
    }
}


/*********************************************************************  
* 밀락씨의원의 공간
*********************************************************************/
#space {
    --space-height: 100vh;

    position: relative;
    display: flex;
    align-items: center;
    height: var(--space-height);

    & svg.circle-shape {
        --circle-w: 625px;
        top: calc(var(--circle-w) / -3);
        right: calc(var(--circle-w) / -3);

        @media screen and (max-width: 1080px) {
            --circle-w: clamp(360px, 41.6666667vw, 450px);
        }
        @media screen and (max-width: 640px) {
            display: none;
        }
    }

    @media screen and (max-width: 1080px) {
        height: auto;
        padding: var(--mobile-content-vertical-gap-mid) 0;
    }

    & .inner {
        display: flex;
        align-items: flex-end;

        @media screen and (max-width: 1080px) {
            flex-direction: column;
            padding: 0;

            & .btn-more-mb {
                display: flex;
                width: calc(100% - (var(--content-inner-padding) * 2));
            }
        }

        & .slide-main-bx {
            flex: 1;
            min-width: 0;
            align-self: stretch;

            @media screen and (max-width: 1080px) {
                max-width: 100%;
                margin-bottom: 10px;
            }

            & .swiper-wrapper {

                & .swiper-slide {
                    
                    @media screen and (max-width: 1080px) {
                        width: 100%;
                    }

                    & img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
        }

        & .slide-thumb-bx {
            --thumb-bx-padding: clamp(30px, 4.375vw, 70px);

            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding-left: var(--thumb-bx-padding);
            min-width: 0;

            @media screen and (max-width: 1080px) {
                max-width: 100%;
                padding-left: 0;
            }

            & .space-txt-group {
                position: relative;
                display: flex;
                flex-direction: column;

                /* 1300px 기준 */
                gap: clamp(15px, 2.30769231vw, 30px);

                @media screen and (max-width: 1080px) {
                    padding: 0 var(--content-inner-padding) var(--slide-nav-margin-top);
                }

                & h2 {
                    font-size: var(--font-size-34);
                
                    @media screen and (max-width: 1300px) {
                        font-size: var(--font-size-28);
                    }
                    @media screen and (max-width: 640px) {
                        font-size: var(--font-size-24);
                    }
                }
                & p {
                    font-size: var(--font-size-16);
                    color: var(--color-text-03);
                    line-height: 1.7;
                    word-break: keep-all;
                }

                & .slide-btn-bx {

                    /* 1600px 기준 */
                    --margin-top: clamp(20px, 3.125vw, 50px);

                    display: flex;
                    align-items: center;
                    gap: var(--slide-nav-button-gap);
                    margin-top: var(--margin-top);
                    height: var(--slide-btn-box-height); 

                    @media screen and (max-width: 1300px) {
                        margin-top: 0;
                    }

                    & .space-button-prev,
                    & .space-button-next {
                        position: static;
                        width: var(--slide-btn-box-height);
                        height: var(--slide-btn-box-height);
                        margin-top: 0;
                        border-radius: 50%;
                        border: 1px solid var(--color-line-01);

                        &::after {
                            font-size: calc(var(--slide-btn-box-height) * 0.45);
                            color: var(--color-text-01);
                        }
                    }
                    & .space-button-prev {
                        &::after {content: '←';}
                    }
                    & .space-button-next {
                        &::after {content: '→';}
                    }
                }
            }

            & .space-btn-more {
                display: flex;
                justify-content: flex-end;
                height: 40px;
                font-family: var(--font-family-granville);
                font-size: var(--font-size-14);
                letter-spacing: 0.035rem;
                transform: scaleY(0.9);

                @media screen and (max-width: 1080px) {
                    display: none;
                }
            }

            & .thumb-list {
                display: flex;
                align-items: center;
                gap: 20px;
                width: 100%;

                & .swiper-wrapper {
                    width: 100%;

                    & .thumb-item {
                        width: 100%;
                        max-width: 235px;
                        min-width: 0;

                        @media screen and (max-width: 1080px) {
                            max-width: unset;
                        }
    
                        & img {
                            width: 100%;
                        }
                    }
                }
            }
        }
    }
}


/*********************************************************************  
* 밀락씨의원의 이벤트 및 공지
*********************************************************************/
#event {
    --event-height: 100vh;

    position: relative;
    display: flex;
    align-items: center;
    height: var(--event-height);
    background: url('/img/main/event/bg-event.webp') no-repeat center/cover;

    @media screen and (max-width: 640px) {
        height: auto;
        padding: 0 0 var(--mobile-content-vertical-gap-mid);
        background: none;
    }

    & svg.circle-shape {
        --circle-w: 625px;
        top: calc(var(--circle-w) / -4);
        right: calc(var(--circle-w) / -3);
        display: none;

        @media screen and (max-width: 1080px) {
            --circle-w: clamp(360px, 41.6666667vw, 450px);
            display: block;
        }
    }

    & .inner {
        /* --article-padding: clamp(30px, 5.625vw, 90px); */
        --article-padding: clamp(30px, 2.77777778vw, 50px);
        --margin-bottom: 15px;

        display: grid;
        grid-template-columns: repeat(2, 1fr);

        @media screen and (max-width: 640px) {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        /**** 공통 *******************************************/
        & .event-title-bx {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            margin-bottom: var(--margin-bottom);

            & h2 {
                font-family: var(--font-family-granville);
                font-size: var(--font-size-34);
                font-weight: var(--font-weight-light);

                @media screen and (max-width: 1300px) {
                    font-size: var(--font-size-28);
                }
                @media screen and (max-width: 640px) {
                    font-size: var(--font-size-24);
                }
            }
            & .btn-more {
                font-family: var(--font-family-granville);
                font-size: var(--font-size-14);
                letter-spacing: 0.035rem;
                transform: scaleY(0.9);

                @media screen and (max-width: 640px) {
                    display: none;
                }
            }
        }
        & .btn-more-mb {

            @media screen and (max-width: 640px) {
                display: flex;
            }
        }
        /*****************************************************/

        & .promotion {
            min-width: 0;
            padding-right: var(--article-padding);
            border-right: 1px solid var(--color-line-01);

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

            & .promotion-list {
                position: relative;
                width: 100%;
                max-width: 100%;
                overflow: hidden;

                & .swiper-wrapper {
                    width: 100%;
                    max-width: 100%;

                    & .swiper-slide {
                        padding-bottom: 30px;

                        & .promotion-img-bx {

                            & img {
                                width: 100%;
                                aspect-ratio: 1/0.75;
                                display: block;
                                object-fit: cover;
                            }
                        }
                        & h3 {
                            padding-top: var(--margin-bottom);

                            /* 텍스트 줄바꿈 방지 */
                            white-space: nowrap;
                            
                            /* 넘치는 내용 숨김 */
                            overflow: hidden;
                            
                            /* 숨겨진 내용에 말줄임표 적용 */
                            text-overflow: ellipsis;
                        }
                    }
                }
            }
        }
        & .notice {
            min-width: 0;
            padding-left: var(--article-padding);

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

            & .notice-list {

                /* 640px 기준 */
                --anchor-vertical-padding: clamp(10px, 2.34375vw, 15px);
                --anchor-left-padding: 10px;

                display: flex;
                flex-direction: column;

                & .notice-list-item {

                    & a {
                        position: relative;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: var(--anchor-vertical-padding) 0;
                        padding-left: var(--anchor-left-padding);
                        color: var(--color-text-03);

                        &::before {
                            position: absolute;
                            left: 0;
                            width: 3px;
                            aspect-ratio: 1/1;
                            border-radius: 50%;
                            background-color: var(--color-text-03);
                            content: '';
                        }

                        & h3 {
                            font-size: var(--font-size-16);
                            font-weight: var(--font-weight-regular);
                            
                            /* 텍스트 줄바꿈 방지 */
                            white-space: nowrap;
                            
                            /* 넘치는 내용 숨김 */
                            overflow: hidden;
                            
                            /* 숨겨진 내용에 말줄임표 적용 */
                            text-overflow: ellipsis;
                        }

                        & p {
                            flex-shrink: 0;
                            padding-left: 15px;
                            line-height: 1.3;
                            word-break: keep-all;
                        }
                    }
                }
            }
        }
    }
}


/*********************************************************************  
* 진료시간 및 병원안내
*********************************************************************/
#info {
    --info-height: 478px;

    display: flex;
    align-items: center;
    height: var(--info-height);
    background: url('/img/main/info/bg-info.webp') no-repeat center/cover;
    color: var(--color-main-white);

    @media screen and (max-width: 900px) {
        height: auto;
        padding: var(--mobile-content-vertical-gap-mid) 0;
        background-position: 95%;
    }
    @media screen and (max-width: 400px) {
        background-position: 92%;
    }

    & .inner {
        --inner-vertical-gap: 20px;

        display: grid;
        grid-template-columns: repeat(2, 1fr);

        @media screen and (max-width: 900px) {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--mobile-content-vertical-gap-mid);
        }

        & .info-title-bx {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: var(--inner-vertical-gap);

            @media screen and (max-width: 900px) {
                justify-content: center;
            }
            
            & h2 {
                font-family: var(--font-family-granville);
                font-size: var(--font-size-22);
                font-weight: var(--font-weight-light);
            }
        }

        & .info-time-wrap {

            & .time-list-bx {
                --list-gap: clamp(10px, 3.125vw, 20px);
                
                display: flex;
                flex-direction: column;
                gap: var(--list-gap);

                & li {
                    

                    display: flex;
                    align-items: center;
                    gap: var(--list-gap);
                    font-size: var(--font-size-18);

                    @media screen and (max-width: 900px) {
                        justify-content: center;
                    }

                    & .schedule-title {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        width: 68px;
                    }
                    & .schedule-time {

                        /* 640px 기준 */
                        --schedule-time-width: clamp(68px, 12.5vw, 80px);
                        --schedule-time-center-width: clamp(10px, 3.125vw, 20px);

                        display: grid;
                        grid-template-columns: 
                            var(--schedule-time-width) 
                            var(--schedule-time-center-width) 
                            var(--schedule-time-width)
                        ;

                        & div:nth-child(2) {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                        }
                        &:last-child {
                            font-weight: var(--font-weight-bold);
                        }
                    }
                    & .schedule-note {
                        display: flex;
                        flex-direction: column;
                        font-size: var(--font-size-14);
                        color: var(--color-text-05);
                        line-height: 2;

                        @media screen and (max-width: 900px) {
                            text-align: center;
                            line-height: 1.5;
                        }
                    }
                }
            }
        }

        & .info-location-wrap {

            & .address-group {
                display: flex;
                align-items: center;
                gap: 10px;

                @media screen and (max-width: 640px) {
                    justify-content: center;
                }

                & address {
                    font-size: var(--font-size-20);
                    font-weight: var(--font-weight-bold);
                    word-break: keep-all;

                    @media screen and (max-width: 640px) {
                        font-size: var(--font-size-16);
                    }
                }
            }
            & .location-map-bx {
                --map-bx-max-width: 410px;
                --map-bx-gap: clamp(3px, 0.78125vw, 5px);

                display: grid;
                /* grid-template-columns: repeat(4, 1fr); */
                gap: var(--map-bx-gap);
                width: 100%;
                max-width: var(--map-bx-max-width);
                margin-top: var(--inner-vertical-gap);

                /* &.col-1 {grid-template-columns: 1fr;}
                &.col-2 {grid-template-columns: repeat(2, 1fr);}
                &.col-3 {grid-template-columns: repeat(3, 1fr);}
                &.col-4 {grid-template-columns: repeat(4, 1fr);} */

                grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));

                & a {

                    /* 640px 기준 */
                    --map-item-vertical-padding: clamp(5px, 1.25vw, 8px);

                    display: flex;
                    justify-content: center;
                    align-items: center;
                    gap: 3px;
                    padding: var(--map-item-vertical-padding) 6px;
                    border: 1px solid var(--color-line-transparent-01);
                    border-radius: var(--border-radius-map);
                    background-color: rgba(0, 0, 0, 0.27);
                    font-size: var(--font-size-13);

                    @media screen and (max-width: 380px) {
                        font-size: 10px;
                    }
                    @media screen and (max-width: 350px) {
                        font-size: 9px;
                    }

                    & img {

                        /* 640px 기준 */
                        max-width: clamp(10px, 1.875vw, 12px);
                    }
                }
            }
        }
    }
}


/************************************************************** 
* 팝업 슬라이드
**************************************************************/
:root {
    --popup-main-top-pos: 8vh;
    /* --popup-width: clamp(40vw, 70vw, 1000px); */
    --popup-width: clamp(60vw, 44.4444444vw, 800px);
    --slide-btn-height: 70px;
}
@media screen and (max-height: 700px) {
    :root {
        --popup-width: clamp(30vw, 55vw, 800px);
    }
}

.hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

/* 팝업 틀 */
.popup-slide-container {
    z-index: 10000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);

    & .popup-main {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 40px;
        background-color: transparent;
    
        @media screen and (max-width: 940px) {
            & {
                top: auto;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                flex-direction: column;
            }
        }
        @media screen and (max-width: 640px) {
            width: 100%;
        }
    
        & .popup-slide-box {

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

            & .swiper-container {
                --slide-max-width: 528px;

                position: relative;
                overflow: hidden;
                width: var(--popup-width);
                max-width: var(--slide-max-width);
                border-top-left-radius: var(--border-radius-popup);
                border-top-right-radius: var(--border-radius-popup);

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

                & .swiper-wrapper {

                    & .popup-slide a {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 100%;
                        height: 100%;


                        & img {
                            width: var(--popup-width);
                            max-width: var(--slide-max-width);
                            /* aspect-ratio: 1/1.252; */
                            aspect-ratio: 4/5;
                            border-bottom: 1px solid var(--color-line-01);

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

            /* 팝업 닫기 버튼 */
            & .popup-close-btn {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                padding: 5px 15px;
                border-radius: var(--border-radius-default);
                background-color: var(--color-text-01);
                color: var(--color-main-white);
                cursor: pointer;
            }

            /* 슬라이드 버튼 */
            & .slide-btn-box {
                display: flex;
                width: 100%;
                height: var(--slide-btn-height);
                margin-top: -1px;

                & button {
                    flex: 1;
                    opacity: 1;
                    height: 100%;
                    margin: 0 !important;
                    padding: 0px 5px;
                    border-radius: 0;
                    border-right: 1px solid #ccc !important;
                    background-color: #fff;
                    font-size: clamp(12.5px, 0.833333333vw, 15px);
                    color: #333;
                    word-break: keep-all;

                    &:last-child {border-right: 0;}
                    &.swiper-pagination-bullet-active {
                        background-color: var(--color-main-02);
                        font-weight: 500;
                        color: #fff;
                    }
                }

                &.style-grid {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    grid-template-rows: repeat(2, 1fr);
                    height: calc(var(--slide-btn-height) * 2);
                    background-color: #000;

                    &.row-2 {
                        grid-template-rows: repeat(2, 1fr);
                        height: calc(var(--slide-btn-height) * 2);
                    }
                    &.row-3 {
                        grid-template-rows: repeat(3, 1fr);
                        height: calc(var(--slide-btn-height) * 3);
                    }

                    & button {
                        width: 100%;

                        &:nth-child(-n+10) {
                            border-bottom: 1px solid #ccc;
                        }
                    }
                }

                @media screen and (max-width: 940px) {
                    &.swiper-pagination-fraction {
                        z-index: 1;
                        position: absolute;
                        top: 15px;
                        left: auto;
                        right: 15px;
                        display: flex;
                        align-items: center;
                        width: fit-content;
                        height: 24px;
                        padding: 0 12px;
                        border-radius: 12px;
                        background-color: #333;
                        color: #fff;
                
                        &.row-2 {height: 24px;}
                        &.row-3 {height: 24px;}

                        & .fraction-div {
                            position: relative;
                            padding: 0 5px;

                            &::after {
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                width: 1px;
                                height: 12px;
                                background-color: #ccc;
                                transform: translate(-50%, -50%);
                                content: '';
                            }
                        }
                    }
                }
            }

            /* 오늘 하루동안 보이지 않음 */
            & .slide-close-allday {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 3px;
                height: 50px;
                padding: 10px;
                border-top: 1px solid var(--color-line-01);
                border-radius: 
                    0 
                    0
                    var(--border-radius-popup) 
                    var(--border-radius-popup) 
                ;
                background-color: #fff;
                font-size: 14px;
                color: var(--color-text-01);
                letter-spacing: -0.05em;

                @media screen and (max-width: 940px) {
                    border-radius: 0;
                }
                @media screen and (max-width: 480px) {
                    height: 60px;
                    padding-bottom: 20px;
                }

                & .checkbox-wrap {
                    display: flex;
                    align-items: center;
                    user-select: none;
            
                    & .close-allday-chkbox {
                        position: absolute;
                        opacity: 0;
                        width: 0;
                        height: 0;
                    }
            
                    & label {
                        cursor: pointer;
                        display: flex; 
                        align-items: center;
                        gap: 8px; 
                        color: #333; 
                        transition: color 0.2s;
                    }
            
                    & label .custom-checkbox {
                        display: inline-block;
                        flex-shrink: 0; 
                        width: 16px;
                        height: 16px;
                        border: 1px solid var(--color-line-01);
                        border-radius: 50%; 
                        background-color: #fff;
                        position: relative;
                        transition: border-color 0.2s, background-color 0.2s;
                    }
            
                    & .close-allday-chkbox:checked + label {
                        font-weight: var(--font-weight-regular);
                        color: var(--color-main-02); 
                    }
            
                    & .close-allday-chkbox:checked + label .custom-checkbox {
                        border-color: var(--color-main-02);
                        background-color: var(--color-main-02);
                    }
                    
                    & .close-allday-chkbox:checked + label .custom-checkbox::after {
                        content: '';
                        display: block;
                        width: 6px; 
                        height: 6px;
                        border-radius: 50%;
                        background: #fff;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                    }
                }

            }
        }
    }
}