@charset "utf-8";

:root {
    --nav-height: clamp(58rem, calc(75 / var(--container) * 100vw), 75rem);
}

.page-header {
    position: relative;
    z-index: 7;
    display: grid;
    grid-template-rows: calc(var(--header-height) + 40rem) 1fr var(--nav-height);
    height: clamp(400rem, calc(700 / var(--container) * 100vw), 700rem);
    contain: content;
    color: #fff;
    isolation: isolate;

    &::before {
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--black) no-repeat 50% / cover;
        content: "";
    }

    &.nav-about::before {
        background-image: url("/assets/images/pages/page-header-about.webp");
    }

    &.nav-specialty-center::before {
        background-image: url("/assets/images/pages/page-header-specialty-center.webp");
    }

    &.nav-dog::before {
        background-image: url("/assets/images/pages/page-header-dog.webp");
    }

    &.nav-cat::before {
        background-image: url("/assets/images/pages/page-header-cat.webp");
    }

    &.nav-specialty-hospital::before {
        background-image: url("/assets/images/pages/page-header-specialty-hospital.webp");
    }

    &.nav-legal {
        background-image: url("/assets/images/pages/page-header-about.webp");
    }

    .page-header-container {
        grid-row: 2 / 3;
        align-content: center;
        padding-bottom: 3.8%;
    }

    .heading {
        margin-bottom: 0.33333333em;
        font: var(--font-size-75) var(--font-hanam);
        letter-spacing: -0.025em;
    }

    .description {
        font-size: var(--font-size-18-to-14);
    }

    @media (prefers-reduced-motion: no-preference) {
        &::before {
            animation: page-header-bg 1.8s both;
        }

        .heading {
            opacity: 0;
            animation: slide-up 0.6s 0.2s both;
        }
    }
}

@keyframes page-header-bg {
    0% {
        scale: 1.05;
    }

    100% {
        scale: 1;
    }
}

@keyframes slide-up {
    0% {
        translate: 0 40rem;
        opacity: 0;
    }

    100% {
        translate: 0;
        opacity: 1;
    }
}

@keyframes slide-right {
    0% {
        translate: -40rem;
        opacity: 0;
    }

    100% {
        translate: 0;
        opacity: 1;
    }
}

.local-nav {
    --color-border: #e5e5e5;
    --bg-white: linear-gradient(0deg, var(--color-border) 1px, #fff 1px);
    position: relative;
    z-index: 7;
    margin-top: calc(var(--nav-height) * -1);

    .container {
        position: relative;
        display: grid;
    }

    .container::before {
        position: absolute;
        inset: 0 100% 0 -100vw;
        background: var(--bg-white);
        content: "";
    }

    details {
        position: relative;
    }

    summary {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--nav-height);
        padding-inline: clamp(10rem, calc(39 / var(--container) * 100vw), 39rem) clamp(10rem, calc(45 / var(--container) * 100vw), 45rem);
        font: 600 var(--font-size-18-to-12) var(--font-sans);
        background: var(--bg-white);
        border-left: 1px solid var(--color-border);
    }

    .arrow {
        position: relative;
        display: block;
        width: 0.94444444em;
        aspect-ratio: 1;
    }

    .arrow::before {
        position: absolute;
        inset: 0;
        border: clamp(1px, calc(2 / var(--container) * 100vw), 2px) solid currentColor;
        border-radius: 50%;
        content: "";
    }

    .arrow::after {
        position: absolute;
        inset: 0;
        display: block;
        width: 44.44444444%;
        aspect-ratio: 8 / 4;
        margin: auto;
        background: currentColor;
        clip-path: polygon(0 0, 100% 0, 50% 100%);
        content: "";
    }

    [open] .arrow::after {
        clip-path: polygon(0 100%, 100% 100%, 50% 0);
    }

    details:last-child summary {
        color: #fff;
        background: var(--primary);
    }

    .nav-menu {
        position: absolute;
        inset: 100% -1px auto 0;
        display: grid;
        gap: 0.6875em;
        padding: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem) clamp(16rem, calc(38 / var(--container) * 100vw), 38rem) clamp(16rem, calc(28 / var(--container) * 100vw), 28rem);
        font-weight: 500;
        font-size: var(--font-size-16-to-12);
        background: #fff;
        border: 1px solid var(--primary);
        box-shadow: 0 20rem 30rem hsla(0, 0%, 0%, 0.1);
    }

    details:nth-last-child(2) .nav-menu {
        right: -2px;
    }

    details:last-child .nav-menu {
        left: 1px;
    }

    @media (any-hover) {
        .nav-link:hover {
            color: var(--primary);
            text-decoration: underline;
            text-underline-offset: 3rem;
        }
    }

    @media (width >=1280px) {
        .container {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (width < 1280px) {
        .container {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

.sub-page {
    min-height: 300px;
    padding-block: clamp(var(--section-block), calc(140 / var(--container) * 100vw), 140rem);

    .legal-document .page-heading,
    .page-heading-block {
        margin-bottom: calc(var(--font-size-35) * 1.76);
        text-align: center;
    }

    .page-subheading {
        font: var(--font-size-17-to-14) var(--font-hanam);
        letter-spacing: 0;
        text-align: center;
        color: var(--secondary);
        text-transform: uppercase;
    }

    .page-heading {
        margin-top: 0.4em;
        font: 600 var(--font-size-50) / 1.2 var(--font-sans);
        letter-spacing: -0.025em;
        text-align: center;
    }

    /* 멤버 페이지는 각 페이지가 타이틀을 가진 경우가 많아서 공통 서브 타이틀 숨기기 */
    #main:has(.join_area) .sub_title {
        display: none;
    }
}

.section-separator {
    height: 7rem;
    background: url("/assets/images/pages/separator.png");
}

.ui-checked-list {
    display: grid;
    gap: 10rem;
    font: var(--font-size-18) / 1.5 var(--font-sans);

    ._checked-item {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: start;
        gap: 13rem;
        padding: clamp(16rem, calc(34.5 / var(--container) * 100vw), 34.5rem) clamp(16rem, calc(39 / var(--container) * 100vw), 39rem);
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 10rem;

        &::before {
            display: block;
            width: 1em;
            aspect-ratio: 1;
            margin-top: 0.27777778em;
            background: url("/assets/images/pages/checked.svg") no-repeat 50% / contain;
            content: "";
        }
    }

    ._checked-desc {
        strong {
            font-weight: 700;
            color: var(--secondary);
        }
    }
}

.page-team-message {
    contain: content;

    .section-separator {
        margin-top: clamp(var(--section-block), calc(112 / var(--container) * 100vw), 112rem);
    }

    /* #region local component */
    ._eyebrow {
        display: block;
        margin-bottom: 0.64705882em;
        font: var(--font-size-17) var(--font-hanam);
        text-align: center;
        color: var(--secondary);
    }

    ._heading {
        font: 600 var(--font-size-40) var(--font-sans);
        text-align: center;
    }

    ._description {
        font: var(--font-size-18) / 1.5 var(--font-sans);
        letter-spacing: -0.025em;
        color: #444;

        strong {
            font-weight: 700;
            color: #000;
        }
    }

    ._title-decorator {
        position: relative;

        &::before,
        &::after {
            display: block;
            aspect-ratio: 1;
            font-size: max(30rem, 1em);
            font-size: var(--font-size-40);
            border-radius: 50%;
            content: "";
        }

        &::before {
            width: 0.2em;
            margin-bottom: 0.35em;
            background: var(--secondary);
            box-shadow: 0.65em 0 0 #dadada;
        }

        &::after {
            position: absolute;
            top: 0.1em;
            left: 0.35em;
            width: 0.15em;
            background: #aaa;
            translate: 0 -50%;
        }

        &._title-decorator--center {
            text-align: center;

            &::before {
                margin-inline: auto;
                translate: -0.325em;
            }

            &::after {
                left: 50%;
                translate: -50% -50%;
            }
        }
    }

    /* #endregion local component */
    .section-brand-story {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
        text-align: center;

        .slogan {
            margin-top: 1.13333333em;
            font: clamp(30rem, calc(60 / var(--container) * 100vw), 60rem) var(--font-hanam);
        }

        .description {
            margin-top: 1.6em;
            font: var(--font-size-20) / 1.6 var(--font-sans);
            color: #333;

            b {
                font-weight: 700;
                color: #111;
            }
        }

        .visual {
            height: clamp(200rem, calc(500 / var(--container) * 100vw), 500rem);
            margin-top: clamp(24rem, calc(52 / var(--container) * 100vw), 52rem);
            background: #e5e5e5 url("/assets/images/team-message/brand-story-visual.webp") no-repeat 50% / cover;
            border-radius: 20rem;
        }
    }

    .section-brand {
        @media (width >=1280px) {
            padding-top: clamp(var(--section-block), calc(51 / var(--container) * 100vw), 51rem);
        }

        .section-logo {
            position: relative;
            display: grid;
            row-gap: 36rem;
            margin-top: 43rem;
            padding-block: clamp(50rem, calc(62.5 / var(--container) * 100vw), 62.5rem);

            @media (width >=768px) {
                grid-template-columns: repeat(2, 1fr);
            }

            &::before {
                --bg-color: #f7f7f7;
                position: absolute;
                left: 50%;
                inset-block: 0;
                z-index: -1;
                width: 1920rem;
                background: linear-gradient(90deg, #0000 0%, var(--bg-color) 31.25%, var(--bg-color) 68.75%, #0000 100%);
                translate: -50%;
                content: "";
            }

            .logo-area {
                align-content: center;
            }

            .logo {
                display: block;
                width: 70%;
                max-width: 510rem;
                height: auto;
                margin-inline: auto;

                @media (width >=1280px) {
                    translate: 7.5%;
                }
            }

            .info-area {
                @media (width >=768px) {
                    padding: clamp(16rem, 8.93333333%, 67rem) clamp(16rem, 8.93333333%, 67rem) 0;
                }
            }

            .title {
                margin-bottom: 1em;
                font: 700 var(--font-size-30) var(--font-sans);
                letter-spacing: -0.025em;
            }
        }

        .section-color {
            display: flex;
            row-gap: 36rem;
            max-width: 1200rem;
            margin: clamp(var(--section-block), calc(80 / var(--container) * 100vw), 80rem) auto 0;
            box-shadow: 0 0 30rem hsla(0, 0%, 0%, 0.15);

            @media (width >=768px) {
                padding: 20rem 20rem 18rem;
            }

            @media (width < 1280px) {
                flex-direction: column;
            }

            @media (width < 768px) {
                padding: 16rem;
            }

            .color-area {
                display: grid;
                flex-shrink: 0;
                align-content: end;
                align-items: end;
                row-gap: 0.25lh;
                width: 100%;
                max-width: 420rem;
                height: clamp(120rem, calc(210 / var(--container) * 100vw), 210rem);
                padding: 36rem clamp(24rem, calc(38 / var(--container) * 100vw), 38rem) clamp(24rem, calc(36 / var(--container) * 100vw), 36rem);
                font: var(--font-size-18) var(--font-sans);
                color: #fff;
                background: #5281a8;

                @media (width >=768px) {
                    grid-template-columns: repeat(2, 1fr);
                }

                .item {
                    display: flex;
                    gap: 1.4ch;
                }

                .key,
                .value {
                    letter-spacing: -0.025em;
                }

                .key {
                    font-weight: 700;
                    text-transform: uppercase;
                }

                .value {
                    color: color-mix(in srgb, currentColor 70%, #0000);
                }
            }

            .info-area {
                @media (width >=1280px) {
                    padding: 46rem 0 0 79rem;
                }

                .title {
                    margin-bottom: 1em;
                    font: 700 var(--font-size-30) var(--font-sans);
                    letter-spacing: -0.025em;
                }
            }
        }
    }
}

.page-distinctiveness {
    * {
        letter-spacing: -0.025em;
    }

    .intro {
        margin-top: -1.35em;
        font: var(--font-size-20) / 1.6 var(--font-sans);
        letter-spacing: -0.025em;
        text-align: center;

        strong {
            font-weight: 700;
        }
    }

    .special-list {
        margin-top: clamp(var(--content-top), calc(72 / var(--container) * 100vw), 72rem);
        counter-reset: index;

        &>section {
            --separator-height: 7px;
            display: grid;
            gap: 40rem clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);
            counter-increment: index;

            @media (width >=768px) {
                grid-template-columns: 24% 1fr;
            }
        }

        &>section+section {
            margin-top: clamp(var(--content-top), calc(72 / var(--container) * 100vw), 72rem);
            padding-top: clamp(calc(var(--content-top) + var(--separator-height)), calc(82 / var(--container) * 100vw), 82rem);
            background: url("/assets/images/pages/separator.png") repeat-x 0 0 / var(--separator-height);
        }
    }

    .special-title {
        position: sticky;
        top: calc(var(--header-height) + 1.5lh);
        font: 700 var(--font-size-30) / 1.33333333 var(--font-sans);
        color: #111;

        &::before,
        &::after {
            font: var(--font-size-17) var(--font-hanam);
            color: var(--secondary);
        }

        &::before {
            position: relative;
            display: block;
            width: fit-content;
            min-width: 2.55ch;
            margin-bottom: calc(var(--font-size-30) * 0.66666667);
            padding-right: 0.85ch;
            letter-spacing: 0;
            background: #fff;
            translate: -1px -2px;
            content: counter(index, decimal-leading-zero);
        }

        &::after {
            position: absolute;
            top: 0.5lh;
            left: 0;
            z-index: -1;
            width: 7.76470588em;
            border-top: 1px solid currentColor;
            translate: 0 -2px;
            content: "";
        }
    }

    .feature-list {
        display: grid;
        gap: clamp(40rem, calc(54 / var(--container) * 100vw), 54rem) clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);

        @media (width >=768px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .visual {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 530 / 305;
        border-radius: 10rem;
    }

    .content {
        padding: 1em 0 0 0.40909091em;
        font-size: var(--font-size-22);
    }

    .feature-title {
        margin-bottom: 0.77272727em;
        font: 700 var(--font-size-22) var(--font-sans);
        color: var(--secondary);
    }

    .detail-list {
        display: grid;
        gap: 0.3lh;
        font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
        color: #444;

        &>li {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.6ch;
        }

        &>li::before {
            align-self: start;
            font: 700 0.55555556em var(--font-sans);
            color: var(--secondary);
            translate: 0 58.5%;
            content: "○";
        }

        b {
            color: #000;
        }
    }
}

.page-hospital-facilities {
    contain: content;

    * {
        letter-spacing: -0.025em;
    }

    .layout {
        display: grid;
        gap: 40rem clamp(16rem, calc(150 / var(--container) * 100vw), 150rem);

        @media (width >=768px) {
            grid-template-columns: clamp(200rem, calc(350 / var(--container) * 100vw), 350rem) 1fr;
        }

        @media (768px <=width < 1280px) {
            align-items: center;
            column-gap: clamp(16rem, calc(40 / var(--container) * 100vw), 40rem);
        }
    }

    .control {
        @media (width >=1280px) {
            padding-top: clamp(0px, calc(52 / var(--container) * 100vw), 52rem);
        }
    }

    .logo {
        display: block;
        width: 100%;
        max-width: 207rem;
        height: auto;
        margin-inline: auto;
    }

    .tablist-scroll {
        @media (width < 768px) {
            display: inline-block;
            width: 100vw;
            overflow: auto visible;
            margin-inline: calc(var(--container-edge-offset) * -1);
            padding-inline: var(--container-edge-offset);
        }
    }

    .tablist {
        gap: 10rem;
        margin-top: 40rem;

        @media (width >=768px) {
            display: grid;
        }

        @media (width < 768px) {
            display: flex;
            width: fit-content;
            white-space: nowrap;
        }
    }

    .tab {
        display: flex;
        padding: 1.08333333em clamp(2ch, calc(30 / var(--container) * 100vw), 30rem);
        font: 500 var(--font-size-18-to-14) var(--font-sans);
        color: #999;
        background: #eee;
        border-radius: 5em;
        cursor: pointer;

        @media (768px < width < 1280px) {
            padding-inline: clamp(1ch, calc(30 / var(--container) * 100vw), 30rem);
        }
    }

    .tab[aria-selected="true"] {
        font-weight: 700;
        color: #fff;
        background: linear-gradient(90deg, var(--secondary), var(--primary));
    }

    .tabpanel-block {
        overflow: auto clip;
        margin-block: -20rem;
        margin-inline: calc(calc((1 - var(--container-scale)) / 2 * 100vw) * -1);
        padding-block: 20rem;
        padding-inline: calc((1 - var(--container-scale)) / 2 * 100vw);
    }

    .floor-plan {
        position: relative;
        aspect-ratio: 100 / 62;
        background: no-repeat 50% / contain;

        &.floor-plan--1f {
            background-image: url("/assets/images/hospital-facilities/floor-plan-1f.svg");
        }

        &.floor-plan--2f {
            background-image: url("/assets/images/hospital-facilities/floor-plan-2f.svg");
        }

        &.floor-plan--3f {
            background-image: url("/assets/images/hospital-facilities/floor-plan-3f.svg");
        }

        &.floor-plan--4f {
            background-image: url("/assets/images/hospital-facilities/floor-plan-4f.svg");
        }

        &.floor-plan--5f {
            background-image: url("/assets/images/hospital-facilities/floor-plan-5f.svg");
        }
    }

    .action-button {
        position: absolute;
        font: 700 clamp(8rem, calc(20 / var(--container) * 100vw), 20rem) var(--font-sans);
        translate: -50% -50%;

        &:not(:has(.cta)) {
            cursor: auto;
        }

        &.action-button--horizontal {
            display: inline-flex;
            align-items: center;
            gap: 8rem;

            .cta {
                margin-bottom: 0;
            }
        }

        /* #region 1f */
        &.action-button--visiting-room {
            top: 24.5%;
            left: 22%;
        }

        &.action-button--family-lounge {
            top: 74.5%;
            left: 22%;
        }

        /* #endregion 1f */
        /* #region 2f */
        &.action-button--응급혈액투석센터 {
            top: 8.3%;
            left: 19.1%;
        }

        &.action-button--강아지일반환자입원실 {
            top: 37.2%;
            left: 6.3%;
        }

        &.action-button--입원환자관리실 {
            top: 31.3%;
            left: 31.2%;
        }

        &.action-button--2층접수처 {
            top: 27%;
            left: 62.8%;
        }

        &.action-button--강아지중환자입원실 {
            top: 69.5%;
            left: 6.3%;
        }

        &.action-button--강아지처치실 {
            top: 54.6%;
            left: 35.1%;
        }

        &.action-button--2층진료실 {
            top: 62%;
            left: 71.2%;
        }

        &.action-button--강아지대기실 {
            top: 62%;
            left: 89%;
        }

        &.action-button--대형견입원실 {
            top: 78.7%;
            left: 23.5%;
        }

        &.action-button--X-ray실 {
            top: 78.3%;
            left: 53.2%;
        }

        &.action-button--초음파실 {
            top: 92.2%;
            left: 52.5%;
        }

        &.action-button--대형견진료실 {
            top: 93.5%;
            left: 68.7%;
        }

        &.action-button--대형견대기실 {
            top: 94.5%;
            left: 88.5%;
        }

        /* #endregion 2f */
        /* #region 3f */
        &.action-button--안과검사실1 {
            top: 5.3%;
            left: 5.9%;
        }

        &.action-button--안과검사실2 {
            top: 22.5%;
            left: 5.9%;
        }

        &.action-button--안치한재처치실 {
            top: 14.6%;
            left: 18%;
        }

        &.action-button--3층진료실-1 {
            top: 15%;
            left: 30.5%;
        }

        &.action-button--안치한재대기실 {
            top: 15%;
            left: 49.5%;
        }

        &.action-button--3층접수처 {
            top: 29.6%;
            left: 72.9%;
        }

        &.action-button--약제실 {
            top: 36.7%;
            left: 7.9%;
        }

        &.action-button--임상병리실 {
            top: 52.5%;
            left: 7.9%;
        }

        &.action-button--암치료센터 {
            top: 73.2%;
            left: 7.9%;
        }

        &.action-button--고양이응급의료센터 {
            top: 37.4%;
            left: 51.7%;
        }

        &.action-button--고양이중환자입원실 {
            top: 49%;
            left: 28.2%;
        }

        &.action-button--고양이일반환자입원실 {
            top: 70.3%;
            left: 28.2%;
        }

        &.action-button--고양이처치실 {
            top: 60.3%;
            left: 44.7%;
        }

        &.action-button--음압격리입원실 {
            top: 59.4%;
            left: 62.1%;
        }

        &.action-button--3층입원환자관리실 {
            top: 74.2%;
            left: 61.1%;
        }

        &.action-button--3층진료실-2 {
            top: 65.6%;
            left: 79.6%;
        }

        &.action-button--고양이대기실 {
            top: 72.4%;
            left: 92.8%;
            white-space: nowrap;
        }

        &.action-button--3층X-ray실 {
            top: 95.2%;
            left: 61.8%;
        }

        &.action-button--3층초음파실 {
            top: 94.1%;
            left: 78.1%;
        }

        /* #endregion 3f */
        /* #region 4f */
        &.action-button--CT실 {
            top: 11.9%;
            left: 24.5%;
        }

        &.action-button--영상조정실 {
            top: 29.1%;
            left: 24.5%;
        }

        &.action-button--MRI실 {
            top: 48.3%;
            left: 19%;
        }

        &.action-button--한방재활치료실 {
            top: 68.7%;
            left: 19%;
        }

        &.action-button--치과수술실 {
            top: 31.6%;
            left: 51.3%;
        }

        &.action-button--제4수술실 {
            top: 31.6%;
            left: 66.9%;
        }

        &.action-button--마취모니터링실 {
            top: 49.6%;
            left: 65.7%;
        }

        &.action-button--수술준비실 {
            top: 58.6%;
            left: 54.7%;
        }

        &.action-button--제1수술실 {
            top: 87.8%;
            left: 58%;
        }

        &.action-button--안과수술실 {
            top: 46.6%;
            left: 89.2%;
        }

        &.action-button--제3수술실 {
            top: 64%;
            left: 89.2%;
        }

        &.action-button--제2수술실 {
            top: 87.7%;
            left: 89.2%;
        }

        /* #endregion 4f */
        /* #region 5f */
        &.action-button--세미나실 {
            top: 76.9%;
            left: 81%;
        }

        /* #endregion 5f */
    }

    .cta {
        display: block;
        width: 1.59090909em;
        aspect-ratio: 1;
        margin: 0 auto 0.31818182em;
        background:
            linear-gradient(#fff) no-repeat 50% / 3rem 48.5%, linear-gradient(#fff) no-repeat 50% / 48.5% 3rem, var(--secondary);
        border-radius: 50%;
        box-shadow: 0 0 0 5rem rgb(from var(--secondary) r g b / 30%);

        @media (prefers-reduced-motion: no-preference) {
            animation: cta-shadow 1.3s ease-in-out infinite;
        }
    }

    .legend-list {
        display: flex;
        gap: 5.7ch;
        margin-top: 20rem;
        font: 500 var(--font-size-16) var(--font-sans);
        color: #777;

        li {
            display: flex;
            align-items: center;
            gap: 1.1ch;
        }

        .color {
            width: 3.125em;
            aspect-ratio: 5 / 3;
            border: 2rem solid;
            border-radius: 6rem;

            &.color--1 {
                background: #e3f9ff;
                border-color: #95def2;
            }

            &.color--2 {
                background: #ffedcc;
                border-color: #ffc863;
            }

            &.color--3 {
                background: #edffe1;
                border-color: #aded83;
            }
        }
    }

    .popover {
        --close-size: clamp(37rem, calc(60 / var(--container) * 100vw), 60rem);

        & {
            max-width: 1000rem;
            max-height: min(711rem, 100dvh);
            overflow: hidden;
            padding: 35rem 0 37rem;
            text-align: center;
            background: #fff;
            border: 3rem solid var(--primary);
            border-radius: 20rem;
            box-shadow: 20rem 30rem 50rem hsla(0, 0%, 0%, 0.2);

            @media (height >=800px) {
                width: 100%;
            }
        }

        .title-block {
            padding-inline: calc(var(--close-size) * 1.5);
        }

        .eyebrow {
            font: 600 var(--font-size-16) var(--font-sans);
            color: var(--secondary);
        }

        .eyebrow+.title {
            margin-top: 0.32em;
        }

        .title {
            font: 700 var(--font-size-25) var(--font-sans);
        }

        .swiper-block {
            position: relative;
            margin-top: 31rem;
            padding-inline: 8rem;

            @media (width >=768px) {
                padding-inline: clamp(8rem, calc(87 / var(--container) * 100vw), 87rem);
            }
        }

        .nav-button {
            @media (width >=1024px) {
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 2;
                translate: -50% -50%;

                &.nav-button--prev {
                    transform: translateX(calc(-38px + (var(--offset) * -1)));
                }

                &.nav-button--next {
                    transform: translateX(calc(38px + var(--offset)));
                }

                &::before {
                    display: block;
                    width: 16rem;
                    aspect-ratio: 16 / 28;
                    background: url("/assets/images/hospital-facilities/nav-arrow.svg") no-repeat 50% / contain;
                    content: "";
                }

                &.nav-button--prev::before {
                    margin-left: auto;
                }

                &.nav-button--next::before {
                    rotate: 180deg;
                }

                @media (prefers-reduced-motion: no-preference) {
                    transition: transform 300ms;

                    .popover:not([data-initialized="true"]) & {
                        transition: none;
                    }
                }
            }

            @media (width < 1024px) {
                display: none;
            }
        }

        .swiper {
            --calc-height: calc(131rem + var(--font-size-16) + var(--font-size-25) + calc(var(--font-size-25) * 0.32));
            width: 100%;
            max-width: 820rem;
            max-height: min(520rem, calc(100dvh + (var(--calc-height) * -1)));
            margin-inline: auto;

            @media (width >=768px) {
                aspect-ratio: 82 / 52;
            }

            /* @media (width < 768px) { aspect-ratio: 347 / 520;
				&:not(:has([width="347"])) { aspect-ratio: 820 / 520; }
			} */
        }

        .swiper-slide {
            align-content: center;
        }

        .photo {
            display: block;
            object-fit: contain;
            margin-inline: auto;
            border-radius: 10rem;
            user-select: none;

            &[width="820"] {
                width: 100%;
                max-width: 820rem;
                height: auto;
            }

            &[width="347"] {
                width: auto;
                max-width: 347rem;
                height: 100%;
            }
        }

        .swiper-pagination {
            all: initial;
            display: flex;
            justify-content: center;
            gap: 8rem;
            margin-top: 15rem;
        }

        .swiper-pagination-bullet {
            all: initial;
            display: block;
            width: 10rem;
            aspect-ratio: 1;
            background: #ddd;
            border-radius: 50%;
        }

        .swiper-pagination-bullet-active {
            background: var(--primary);
        }

        .close-button {
            position: absolute;
            top: clamp(5rem, calc(17 / var(--container) * 100vw), 17rem);
            right: clamp(5rem, calc(17 / var(--container) * 100vw), 17rem);
            width: var(--close-size);
            aspect-ratio: 1;
            background:
                linear-gradient(#fff) no-repeat 50% 50% / 3rem 51.11111111%, linear-gradient(#fff) no-repeat 50% 50% / 51.11111111% 3rem, var(--primary);
            border-radius: 50%;
            rotate: 45deg;
        }
    }
}

@keyframes cta-shadow {

    0%,
    10% {
        box-shadow: 0 0 0 0 rgb(from var(--secondary) r g b / 1);
    }

    100% {
        box-shadow: 0 0 0 10.5rem rgb(from var(--secondary) r g b / 0);
    }
}

.page-departments-guide {
    * {
        letter-spacing: -0.025em;
    }

    .dept-list {
        --column-gap: clamp(8rem, calc(29 / var(--container) * 100vw), 29rem);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: start;
        gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem) var(--column-gap);
        background: #fff;

        @media (width >=1280px) {
            max-height: 830rem;

            .dept-item {
                width: calc((100% - (var(--column-gap) * 4)) / 5);
            }
        }

        @media (1024px <=width < 1280px) {
            max-height: clamp(850rem, 80vw, 950rem);

            .dept-item {
                width: calc((100% - (var(--column-gap) * 3)) / 4);
            }
        }

        @media (768px <=width < 1024px) {
            max-height: 820rem;

            .dept-item {
                width: calc((100% - (var(--column-gap) * 3)) / 4);
            }
        }

        @media (width < 768px) {
            max-height: 1600rem;

            .dept-item {
                width: calc((100% - (var(--column-gap) * 1)) / 2);
            }
        }
    }

    .dept-item {
        box-shadow: 3.56rem 8rem 20rem hsla(0, 0%, 0%, 0.1);
    }

    .title {
        align-content: center;
        height: 3.33333333em;
        contain: content;
        padding: 0.9lh clamp(8rem, calc(27 / var(--container) * 100vw), 27rem);
        font: 600 var(--font-size-24) var(--font-sans);
        color: #fff;
        background: var(--bg-color, var(--primary));
        isolation: isolate;

        &.title--내과 {
            --bg-color: #0e369c;
            --icon-url: url("/assets/images/departments-guide/내과.svg");
        }

        &.title--외과 {
            --bg-color: #07579a;
            --icon-url: url("/assets/images/departments-guide/외과.svg");
        }

        &.title--영상의학과 {
            --bg-color: #3b8ed3;
            --icon-url: url("/assets/images/departments-guide/영상의학과.svg");
        }

        &.title--내시경센터 {
            --bg-color: #059189;
            --icon-url: url("/assets/images/departments-guide/내시경센터.svg");
        }

        &.title--암치료센터 {
            --bg-color: #229144;
            --icon-url: url("/assets/images/departments-guide/암치료센터.svg");
        }

        &.title--한방재활의학과 {
            --bg-color: #229144;
            --icon-url: url("/assets/images/departments-guide/한방재활의학과.svg");
        }

        &.title--혈액투석센터 {
            --bg-color: #a30000;
            --icon-url: url("/assets/images/departments-guide/혈액투석센터.svg");
        }

        &.title--인터벤션센터 {
            --bg-color: #dc6800;
            --icon-url: url("/assets/images/departments-guide/인터벤션센터.svg");
        }

        &.title--마취통증의학과 {
            --bg-color: #dcb000;
            --icon-url: url("/assets/images/departments-guide/마취통증의학과.svg");
        }

        &.title--응급의학과 {
            --bg-color: #dc5f5f;
            --icon-url: url("/assets/images/departments-guide/응급의학과.svg");
        }

        &.title--치과 {
            --bg-color: #9d0d51;
            --icon-url: url("/assets/images/departments-guide/치과.svg");
        }

        &.title--안과 {
            --bg-color: #8433b2;
            --icon-url: url("/assets/images/departments-guide/안과.svg");
        }

        &::before {
            position: absolute;
            inset: 0;
            z-index: -1;
            background: var(--icon-url) no-repeat 100% 100% / auto 100%;
            translate: 10rem 10rem;
            opacity: 0.15;
            content: "";
        }
    }

    .detail-list {
        padding: 16.5rem 1.5em;
        font: var(--font-size-20-to-14) var(--font-sans);
        text-align: center;

        &>li+li {
            margin-top: 16.6rem;
            padding-top: 16.6rem;
            border-top: 1px dashed #ddd;
        }
    }
}

.page-directions {
    * {
        letter-spacing: -0.025em;
    }

    .heading {
        font: 700 var(--font-size-40) var(--font-sans);

        &::before {
            display: inline-block;
            width: 1em;
            aspect-ratio: 1;
            margin-right: 0.5ch;
            vertical-align: middle;
            background: no-repeat 50% / contain;
            translate: 0 -7%;
            content: "";
        }

        &.heading--hours::before {
            background-image: url("/assets/images/directions/hours.svg");
        }

        &.heading--directions::before {
            background-image: url("/assets/images/directions/directions.svg");
        }
    }

    .section-hours {
        .hours-layout {
            display: grid;
            gap: 20rem 16rem;
            margin-top: clamp(24rem, calc(36 / var(--container) * 100vw), 36rem);

            @media (width >=768px) {
                grid-template: "h n" minmax(calc(50% - 10rem), auto) "h f" "t f" 1fr / 1fr 1.2fr;

                .hours-list {
                    grid-area: h;
                }

                .contact-tel {
                    grid-area: t;
                }

                .reservation--new {
                    grid-area: n;
                }

                .reservation--followup {
                    grid-area: f;
                }
            }

            @media (width >=1280px) {
                grid-template-columns: 63fr 82fr;
                column-gap: clamp(16rem, calc(50 / var(--container) * 100vw), 50rem);
            }
        }

        .hours-list {
            background: #e8f0f7;
            border: 5rem solid #e8f0f7;
            border-radius: 10rem;

            .hours-dl {
                padding: 1.65em clamp(2ch, calc(47 / var(--container) * 100vw), 47rem) 2em;
                font-size: var(--font-size-20);
                background: #fff;
                border-radius: 5rem;
            }

            .hours-item {
                display: grid;
                grid-template-columns: auto 1fr;
                gap: clamp(2ch, calc(54 / var(--container) * 100vw), 54rem);

                &+.hours-item {
                    margin-top: 1.15em;
                    padding-top: 1.1em;
                    border-top: 1px dashed #ccc;
                }
            }

            dt {
                font: 800 1em var(--font-sans);
                color: var(--secondary);
            }

            dd {
                display: flex;
                flex-wrap: wrap;
                gap: 0.25lh 4.7ch;
                font: var(--font-size-18-to-14) var(--font-sans);
                color: #444444;

                @media (width >=1280px) {
                    margin-top: clamp(0px, calc(2 / var(--container) * 100vw), 2rem);
                }
            }

            dd b {
                color: #000;
            }

            .caution-block {
                padding: 29rem 2ch 23rem;
                text-align: center;
                text-wrap: balance;
            }

            .caution-icon {
                width: 35rem;
                aspect-ratio: 35 / 31;
                margin-inline: auto;
                font-size: var(--font-size-20);
                background: url("/assets/images/directions/caution.svg") no-repeat 50% / contain;
            }

            .caution {
                margin-block: 9rem 1em;
                font: 500 var(--font-size-20) var(--font-sans);
                color: #000;
            }

            .notice {
                font: var(--font-size-16) var(--font-sans);
                color: #777;
            }
        }

        .contact-tel {
            & {
                display: block;
                display: flex;
                align-items: center;
                padding: 0.83333333em 1ch 0.83333333em clamp(1ch, calc(47 / var(--container) * 100vw), 47rem);
                font: 700 clamp(14rem, calc(30 / var(--container) * 100vw), 30rem) var(--font-sans);
                color: #fff;
                background: #0053ba url("/assets/images/directions/tel-bg.webp") no-repeat 50% / cover;
                border-radius: 10rem;

                @media (width < 768px) {
                    justify-content: center;
                }
            }

            .icon {
                display: block;
                width: 2.33333333em;
                aspect-ratio: 1;
                background: #fff url("/assets/images/directions/tel-icon.svg") no-repeat 50% 50% / auto 50%;
                border-radius: 50%;
            }

            .label {
                margin-inline: 1ch 0.9ch;
            }

            .number {
                font: 800 1.33333333em var(--font-sans);
            }
        }

        .reservation {
            padding: clamp(24rem, calc(50 / var(--container) * 100vw), 50rem) clamp(24rem, calc(50 / var(--container) * 100vw), 50rem) clamp(30rem, calc(77 / var(--container) * 100vw), 77rem);
            background: var(--color) var(--bg-url, none);
            border-radius: 10rem;

            &.reservation--new {
                --color: #07689a;
                --bg-url: url("/assets/images/directions/reservation-bg-1.png");
            }

            &.reservation--followup {
                --color: #007886;
                --bg-url: url("/assets/images/directions/reservation-bg-2.png");
            }

            .title {
                width: fit-content;
                margin-bottom: 1.4em;
                padding: 0.4em 1.42em;
                font: 700 var(--font-size-25) var(--font-sans);
                color: var(--color);
                background: #fff;
                border-radius: 5rem;
            }

            .description {
                margin-top: 1.94444444em;
                font: 300 var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
                color: #fff;

                b {
                    font-weight: 700;
                }
            }
        }
    }

    .section-separator {
        margin-block: clamp(var(--content-top), calc(120 / var(--container) * 100vw), 120rem) clamp(var(--content-top), calc(116 / var(--container) * 100vw), 116rem);
    }

    .section-directions {
        .map-block {
            margin-top: clamp(24rem, calc(36 / var(--container) * 100vw), 36rem);

            .root-map {
                & {
                    z-index: 0;
                    width: 100%;
                    overflow: hidden;
                    border-radius: 20rem;

                    @media (width < 768px) {
                        aspect-ratio: 1;
                    }
                }

                .wrap_map {
                    height: 100%;

                    @media (width >=768px) {
                        height: 600rem;
                    }
                }

                svg {
                    pointer-events: none;
                }

                .map_border,
                .wrap_controllers,
                .cont {
                    display: none;
                }
            }

            .map-link-block {
                --block-height: 5em;
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 1lh clamp(2ch, calc(51 / var(--container) * 100vw), 51rem);
                max-width: min(676rem, calc(100% - clamp(32rem, calc(80 / var(--container) * 100vw), 80rem)));
                height: var(--block-height);
                margin: calc(var(--block-height) * -0.55) auto 0;
                padding: 1ch;
                font-size: var(--font-size-16-to-12);
                color: #fff;
                background: var(--secondary);
                border-radius: 10rem;
            }

            .map-link {
                display: inline-flex;
                align-items: center;
                gap: 10rem;
            }

            .map-link::before {
                display: inline-block;
                width: 1.875em;
                aspect-ratio: 1;
                background: no-repeat 50% / contain;
                content: "";
            }

            .map-link-naver::before {
                background-image: url("/assets/images/home/contact-naver.png");
            }

            .map-link-kakao::before {
                background-image: url("/assets/images/home/contact-kakao.png");
            }

            .map-link-google::before {
                background-image: url("/assets/images/home/contact-google.png");
            }
        }

        .layout {
            & {
                display: grid;
                gap: var(--content-top) clamp(8rem, calc(70 / var(--container) * 100vw), 70rem);
                margin-top: clamp(var(--content-top), calc(58 / var(--container) * 100vw), 58rem);

                @media (width >=768px) {
                    grid-template-columns: 639fr 1px 860fr;
                }
            }

            .separator {
                border-top: 1px dashed #ccc;

                @media (width >=768px) {
                    border-left: 1px dashed #ccc;
                }
            }

            .title {
                margin-bottom: 20rem;
                font: var(--font-size-18-to-14) var(--font-hanam);
                color: #aaa;
                text-transform: uppercase;
            }

            .office-address {
                margin-bottom: 20rem;
                font: 600 var(--font-size-25) var(--font-sans);
                color: var(--primary);
            }

            .parking {
                font: var(--font-size-18-to-14) var(--font-sans);
                color: #444;
            }

            .directions-list {
                display: grid;
                gap: 1.85em;
                margin-top: 37rem;
                font-size: var(--font-size-18-to-14);

                .directions-item {
                    display: grid;
                    gap: 0.5lh 1em;
                }

                .directions-label {
                    position: relative;
                    display: inline-flex;
                    align-items: center;
                    gap: 0.5em;
                    padding-left: 2.72222222em;
                    font-weight: 700;
                }

                .directions-label::before {
                    position: absolute;
                    top: 50%;
                    left: 0;
                    display: block;
                    flex-shrink: 0;
                    width: 2.22222222em;
                    aspect-ratio: 1;
                    background: #fff no-repeat 50% / auto 40%;
                    border: 1px solid var(--secondary);
                    border-radius: 50%;
                    translate: 0 -50%;
                    content: "";
                }

                .directions-label-bus::before {
                    background-image: url("/assets/images/home/contact-bus.png");
                }

                .directions-label-subway::before {
                    background-image: url("/assets/images/home/contact-subway.png");
                }
            }
        }
    }
}

.page-checkup-center {
    * {
        letter-spacing: -0.025em;
    }

    .layout {
        display: grid;
        gap: 0 clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);

        @media (width >=768px) {
            grid-template-columns: 1fr 1fr;
        }
    }

    .section-separator {
        margin-block: clamp(var(--content-top), calc(95 / var(--container) * 100vw), 95rem);

        @media (width >=768px) {
            display: none;
        }
    }

    .heading {
        position: relative;
        margin-bottom: 0.66666667em;
        padding-right: 3.5em;
        font: 700 var(--font-size-30) var(--font-sans);

        &::before {
            position: absolute;
            top: 50%;
            right: 0;
            width: 2.4em;
            aspect-ratio: 72 / 64;
            background: no-repeat 50% / contain;
            translate: -28% -44%;
            content: "";
        }

        &.heading--dog::before {
            background-image: url("/assets/images/checkup-center/dog.svg");
        }

        &.heading--cat::before {
            background-image: url("/assets/images/checkup-center/cat.svg");
            transform: translateY(-4%);
        }
    }

    table {
        --radius: 5rem;
        width: 100%;
        text-align: center;

        col:nth-child(1) {
            width: 20.83333333%;
        }

        col:nth-child(2) {
            width: 19.16666667%;
        }

        col:nth-child(n + 4):nth-child(-n + 7) {
            width: 8.33333333%;
        }

        th {
            padding: 0.7lh 0.7ch;
            font-size: var(--font-size-18-to-14);
            color: #fff;
            background: #00325c;
            border: 1px dashed rgb(from currentColor r g b / 0.2);
        }

        thead tr:first-child {
            th:first-child {
                border-top-left-radius: var(--radius);
                border-bottom-left-radius: var(--radius);
            }

            th:last-child {
                border-top-right-radius: var(--radius);
            }
        }

        thead tr:last-child th:last-child {
            border-bottom-right-radius: var(--radius);
        }

        td {
            padding: 0.7lh 0.7ch;
            font-size: var(--font-size-18-to-14);
            background: #f7f7f7;
            border: 1px solid #e5e5e5;
        }

        td:last-child {
            border-right: 0;
        }

        td:nth-last-child(n + 1):nth-last-child(-n + 4):not(.spacer) {
            background: #f3f3f3;
        }

        tbody tr:first-child {
            td {
                border-top: 0;
            }

            td:first-child {
                border-top-left-radius: var(--radius);
            }

            td:last-child {
                border-top-right-radius: var(--radius);
            }
        }

        .category {
            font: 700 var(--font-size-20) var(--font-sans);
            background: #fbfbfb;
            border-left: 0;
        }

        .spacer {
            height: clamp(8rem, calc(25 / var(--container) * 100vw), 25rem);
            padding: 0;
            background: #fff;
            border-inline: 0;
        }
    }

    .notice-list {
        display: grid;
        gap: 0.4375em;
        margin-top: 2.25em;
        color: #888;
    }
}

.page-medical-staff {
    * {
        letter-spacing: -0.025em;
    }

    .scroll-block {
        overflow: visible auto;
    }

    .category-list {
        display: flex;
        gap: 0.77777778em;
        font: 500 var(--font-size-18-to-14) var(--font-sans);
        white-space: nowrap;
        color: #999;
        width: 100%;
    }

    .category-button {
        flex: 0 1 auto;
        padding: 1.08333333em 2ch;
        background: #eee;
        border-radius: 5em;
        white-space: nowrap;
        width: 100%;

        @media (width >=1024px) {
            /*min-width: 5.722222em;*/
        }
    }

    .category-button--active {
        color: #fff;
        background: linear-gradient(90deg, var(--secondary), var(--primary));
    }

    button.category-button.is-short {
        width: fit-content;
        min-width: 6em;
    }

    .separator {
        margin-block: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem) clamp(var(--content-top), calc(80 / var(--container) * 100vw), 80rem);
        border-top: 1px solid #e5e5e5;
    }

    .staff-list {
        display: grid;
        gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem) clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);

        @media (width >=1280px) {
            grid-template-columns: repeat(6, 1fr);
        }

        @media (1024px <=width < 1280px) {
            grid-template-columns: repeat(5, 1fr);
        }

        @media (768px <=width < 1024px) {
            grid-template-columns: repeat(4, 1fr);
        }

        @media (width < 768px) {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    .show-popover {
        & {
            --radius: 10rem;
            position: relative;
            width: 100%;

            @media (any-hover) {
                &::before {
                    position: absolute;
                    inset: 0;
                    z-index: 1;
                    border: 3rem solid var(--secondary);
                    border-radius: var(--radius);
                    opacity: 0;
                    content: "";
                }

                &:hover::before {
                    opacity: 1;
                }
            }

            @media (prefers-reduced-motion: no-preference) {
                &::before {
                    transition: 0.3s;
                }
            }
        }

        .photo-block {
            aspect-ratio: 1;
            contain: content;
            background: #afafaf;
            border-radius: var(--radius) var(--radius) 0 0;
        }

        .photo {
            position: absolute;
            top: 0;
            left: 50%;
            display: block;
            width: 129%;
            height: auto;
            text-indent: -1000vw;
            translate: -50%;
            user-select: none;
        }

        .content {
            position: relative;
            padding: 1.61111111em 1ch 1em;
            font: 500 var(--font-size-18-to-14) var(--font-sans);
            background: #fff;
            border: solid #e5e5e5;
            border-width: 0 1px 1px;
            border-radius: 0 0 var(--radius) var(--radius);

            &::before {
                position: absolute;
                inset: auto 0 calc(100% - 1px);
                height: 1.08333333em;
                background: url("/assets/images/staff/bg-shape.svg") no-repeat 50% 100% / contain;
                content: "";
            }

            &::after {
                position: absolute;
                inset: auto 0 100%;
                width: 1.22222222em;
                aspect-ratio: 1;
                margin: auto;
                background: url("/assets/images/staff/magnifier.svg") no-repeat 50% / contain;
                translate: 0 54%;
                content: "";
            }

            @media (prefers-reduced-motion: no-preference) {
                &::after {
                    transition: 0.3s;
                }
            }

            @media (any-hover) {
                &::after {
                    filter: grayscale(1);
                }

                .show-popover:hover &::after {
                    filter: grayscale(0);
                }
            }
        }

        .name {
            font-size: 1.08333333em;
            letter-spacing: 0.4ch;
            color: #000;
        }

        .position {
            color: var(--secondary);
        }
    }

    .popover {
        &:popover-open {
            display: grid;
        }

        & {
            --close-size: clamp(37rem, calc(60 / var(--container) * 100vw), 60rem);
            gap: 40rem clamp(8rem, calc(80 / var(--container) * 100vw), 80rem);
            width: 100%;
            max-width: 1500rem;
            max-height: min(720rem, 100dvh);
            padding-bottom: clamp(40rem, calc(87 / var(--container) * 100vw), 87rem);
            border: 3rem solid var(--primary);
            border-radius: 20rem;
            box-shadow: 0 20rem 30rem hsla(0, 0%, 0%, 0.1);

            @media (width >=768px) {
                grid-template-columns: 34.7% 1fr;
                overflow: clip;
                padding-top: clamp(35rem, calc(47 / var(--container) * 100vw), 47rem);
                padding-inline: clamp(8rem, calc(48 / var(--container) * 100vw), 48rem);

                @media (height < 720px) {
                    overflow-y: auto;
                }
            }

            @media (width < 768px) {
                overflow: clip auto;
                padding-top: calc(var(--close-size) * 1.3);
                padding-inline: 8rem;
            }
        }

        .photo {
            position: sticky;
            top: 0;
            display: block;
            width: 100%;
            height: auto;
            text-indent: -1000vw;
            background: #afafaf;
            border-radius: 10rem;
        }

        .identity {
            margin-bottom: 1.05714286em;
            padding-right: var(--close-size);
            padding-bottom: 0.74285714em;
            font: 600 var(--font-size-35) var(--font-sans);
            border-bottom: 3rem solid #ddd;

            @media (width >=768px) {
                padding-top: 26rem;
            }
        }

        .name {
            letter-spacing: 0.3ch;
            color: #000;
        }

        .position {
            font: 500 0.85714286em var(--font-sans);
            color: var(--secondary);
        }

        .career {
            display: grid;
            gap: clamp(20rem, calc(60 / var(--container) * 100vw), 60rem);
            max-height: 447rem;
            overflow: auto;

            &::-webkit-scrollbar {
                width: 5rem;
            }

            &::-webkit-scrollbar-thumb {
                background: var(--primary);
            }

            &::-webkit-scrollbar-track {
                background: #eee;
            }
        }

        .category {
            margin-bottom: 0.77272727em;
            font: 700 var(--font-size-22) var(--font-sans);
            color: var(--primary);
        }

        .details {
            display: grid;
            gap: 0.44444444em;
            padding-left: 1.05555556em;
            font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
            color: #444;

            &>li {
                display: grid;
                grid-template-columns: auto 1fr;
                gap: 0.7ch;
            }

            &>li::before {
                align-self: start;
                font: 700 0.55555556em var(--font-sans);
                color: var(--secondary);
                translate: 0 58.5%;
                content: "○";
            }
        }

        .close-button {
            position: absolute;
            top: clamp(5rem, calc(17 / var(--container) * 100vw), 17rem);
            right: clamp(5rem, calc(17 / var(--container) * 100vw), 17rem);
            width: var(--close-size);
            aspect-ratio: 1;
            background:
                linear-gradient(#fff) no-repeat 50% 50% / 3rem 51.11111111%, linear-gradient(#fff) no-repeat 50% 50% / 51.11111111% 3rem, var(--primary);
            border-radius: 50%;
            rotate: 45deg;
        }
    }
}

.page-shared {
    &:not(.page-team-message) {
        padding-bottom: 0;
    }

    .shared-heading {
        font: 700 var(--font-size-35) var(--font-sans);
        text-align: center;
        color: #111;

        &::before {
            display: block;
            width: 1.14285714em;
            height: clamp(3rem, 0.14285714em, 5rem);
            margin: 0 auto 0.42857143em;
            background: var(--secondary);
            border-radius: 5em;
            content: "";
        }
    }

    .scroll-block {
        overflow: visible auto;

        .tablist {
            display: flex;
            gap: 0.77777778em;
            width: fit-content;
            margin-inline: auto;
            font: 500 var(--font-size-18-to-14) var(--font-sans);
            white-space: nowrap;
            color: #999;
        }

        .tab {
            padding: 1.08333333em 2ch;
            background: #eee;
            border-radius: 5em;

            @media (width >=1024px) {
                min-width: 13.22222222em;
            }
        }

        .is-selected {
            color: #fff;
            background: linear-gradient(90deg, var(--secondary), var(--primary));
        }
    }

    .section-intro {
        --visual-height: clamp(200rem, calc(480 / var(--container) * 100vw), 480rem);
        text-align: center;
        isolation: isolate;

        &:has(+ .section-key-treatments) {
            margin-bottom: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
        }

        * {
            letter-spacing: -0.025em;
        }

        .visual {
            max-width: min(94%, 1300rem);
            height: var(--visual-height);
            margin-inline: auto;
            background: #afafaf no-repeat 50% / cover;
            border-radius: 10rem;

            &.visual--endoscopy {
                background-image: url("/assets/images/intro/visual-endoscopy.webp");
            }

            &.visual--intervention {
                background-image: url("/assets/images/intro/visual-intervention-2.webp");
            }

            &.visual--hemodialysis {
                background-image: url("/assets/images/intro/visual-hemodialysis.webp");
            }

            &.visual--ophthalmology {
                background-image: url("/assets/images/intro/visual-ophthalmology.webp");
            }

            &.visual--dental {
                background-image: url("/assets/images/intro/visual-dental.webp");
            }

            &.visual--korean {
                background-image: url("/assets/images/intro/visual-korean.webp");
            }

            &.visual--rehabilitation {
                background-image: url("/assets/images/intro/visual-rehabilitation.webp");
            }
        }

        .player {
            display: block;
            /* max-width: min(94%, 800rem); */
            max-width: 800rem;
            aspect-ratio: 16 / 9;
            margin-inline: auto;
            background: #000;
            border-radius: 10rem;
            width: 100%;
            height: auto;
        }

        .content {
            --padding-block: clamp(24rem, calc(62 / var(--container) * 100vw), 62rem);
            position: relative;
            z-index: -1;
            margin-top: calc(var(--visual-height) * -0.4166666667);
            padding: calc(var(--visual-height) * 0.4166666667 + var(--padding-block)) 2ch var(--padding-block);
            font: 300 var(--font-size-18-to-14) / 1.77777778 var(--font-sans);
            text-wrap: balance;
            color: #fff;
            background: #001532 url("/assets/images/intro/content-bg.webp") no-repeat 50% / cover;
            border-radius: 20rem;

            strong {
                font-weight: 700;
            }
        }

        .slogan {
            margin-bottom: 1.32em;
            font: 700 var(--font-size-25) / 1.28 var(--font-sans);
        }
    }

    .section-message-intro {
        .player-block {
            position: relative;
            font: clamp(50rem, calc(100 / var(--container) * 100vw), 100rem) / 1.2 var(--font-hanam);
            text-align: center;
            color: hsla(0, 0%, 0%, 0.05);
            text-transform: uppercase;
            isolation: isolate;

            &::before,
            &::after {
                position: absolute;
                top: 50%;
                z-index: -1;
                width: 8ch;
                user-select: none;
            }

            &::before {
                left: 0;
                translate: -31% -50%;
                content: "human & animal";
            }

            &::after {
                right: 0;
                translate: 31% -50%;
                content: "medical center";
            }
        }

        .player {
            display: block;
            max-width: 800rem;
            aspect-ratio: 80 / 45;
            margin-inline: auto;
            border-radius: 10rem;
        }

        .player-block+.description {
            margin-top: 3.1em;
        }

        .description {
            margin-top: 1.25em;
            font: 500 var(--font-size-20) / 1.6 var(--font-sans);
            letter-spacing: -0.025em;
            text-align: center;
        }

        .signature {
            position: relative;
            margin-top: 3.4em;
            color: #aaa;

            &::before {
                position: absolute;
                inset: -0.8em 0 auto;
                width: 3em;
                height: clamp(2rem, calc(3 / var(--container) * 100vw), 3rem);
                margin: auto;
                background: var(--secondary);
                content: "";
            }
        }
    }

    .section-feature {
        padding-block: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        text-align: center;

        * {
            letter-spacing: -0.025em;
        }

        .container,
        .layout {
            display: grid;
            row-gap: var(--content-top);

            @media (width >=768px) {
                grid-template-columns: repeat(2, 1fr);
                align-items: center;
            }
        }

        .content {
            padding-inline: 2ch;

            @media (width >=768px) {
                padding-top: 1%;
            }
        }

        .description {
            margin-top: 1.33333333em;
            font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
            color: #444;

            strong {
                font-weight: 700;
                color: #000;
            }

            @media (width < 1024px) {
                br {
                    display: none;
                }
            }
        }

        .photo {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 10rem;

            @media (width >=768px) {
                .section-feature--reverse & {
                    order: -1;
                }
            }
        }
    }

    .section-advantage {
        padding-block: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        text-align: center;
        background: #00457f no-repeat 50% / cover;

        &.section-advantage--endoscopy {
            background-image: url("/assets/images/advantage/bg-endoscopy.webp");
        }

        &.section-advantage--hemodialysis {
            background-image: url("/assets/images/advantage/bg-hemodialysis.webp");
        }

        &.section-advantage--dog {
            background-image: url("/assets/images/advantage/bg-dog.webp");
        }

        &.section-advantage--cat {
            background-image: url("/assets/images/advantage/bg-cat.webp");
        }

        &.section-advantage--imaging {
            background-image: url("/assets/images/advantage/bg-imaging.webp");
        }

        &.section-advantage--imaging {
            background-image: url("/assets/images/advantage/bg-imaging.webp");
        }

        &.section-advantage--surgery {
            background-image: url("/assets/images/advantage/bg-surgery.webp");
        }

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.71428571em;
            color: #fff;
        }

        .shared-heading::before {
            background: #8ef0ff;
        }

        .subheading {
            font: 300 var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
            text-wrap: balance;
            color: #fff;
        }

        .list {
            display: grid;
            gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
            margin-top: 39rem;
            text-wrap: balance;

            @media (width >=768px) {
                grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));

                &.list--item-5 {
                    grid-template-columns: repeat(6, 1fr);

                    .item {
                        grid-column-end: span 2;
                    }

                    .item:nth-child(n + 4) {
                        grid-column-end: span 3;
                    }
                }
            }

            @media (width < 768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .item {
            padding: clamp(24rem, calc(40 / var(--container) * 100vw), 40rem) 1ch clamp(20rem, calc(34 / var(--container) * 100vw), 34rem);
            background: #fff;
            border-radius: 10rem;
        }

        .icon {
            width: 5em;
            aspect-ratio: 1;
            margin-inline: auto;
            font-size: var(--font-size-20);
            background: var(--primary) no-repeat 50% / contain;
            border-radius: 50%;

            &.icon--1 {
                background-image: url("/assets/images/advantage/icon-1.svg");
            }

            &.icon--2 {
                background-image: url("/assets/images/advantage/icon-2.svg");
            }

            &.icon--3 {
                background-image: url("/assets/images/advantage/icon-3.svg");
            }

            &.icon--4 {
                background-image: url("/assets/images/advantage/icon-4.svg");
            }

            &.icon--5 {
                background-image: url("/assets/images/advantage/icon-5.svg");
            }

            &.icon--6 {
                background-image: url("/assets/images/advantage/icon-6.svg");
            }

            &.icon--7 {
                background-image: url("/assets/images/advantage/icon-7.svg");
            }

            &.icon--8 {
                background-image: url("/assets/images/advantage/icon-8.svg");
            }

            &.icon--9 {
                background-image: url("/assets/images/advantage/icon-9.svg");
            }

            &.icon--10 {
                background-image: url("/assets/images/advantage/icon-10.svg");
            }

            &.icon--11 {
                background-image: url("/assets/images/advantage/icon-11.svg");
            }

            &.icon--12 {
                background-image: url("/assets/images/advantage/icon-12.svg");
            }
        }

        .title {
            margin-block: 27rem 12rem;
            font: 700 var(--font-size-20) var(--font-sans);
        }

        .description {
            font: var(--font-size-16) / 1.5 var(--font-sans);
            color: #444;
        }

        .description strong {
            font-weight: 700;
            color: #000;
        }
    }

    .section-key-features {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);

        * {
            letter-spacing: -0.025em;
        }

        .visual {
            height: clamp(200rem, calc(500 / var(--container) * 100vw), 500rem);
            margin-block: clamp(24rem, calc(45.5 / var(--container) * 100vw), 45.5rem);
            background: #afafaf no-repeat 50% / cover;
            border-radius: 20rem;
            border-radius: 20rem;

            &.visual--endoscopy {
                background-image: url("/assets/images/key-features/visual-endoscopy.webp");
            }

            &.visual--intervention {
                background-image: url("/assets/images/key-features/visual-intervention.webp");
            }

            &.visual--cardiology {
                background-image: url("/assets/images/key-features/visual-cardiology.webp");
            }

            &.visual--kidney {
                background-image: url("/assets/images/key-features/visual-kidney.webp");
            }

            &.visual--specialty-hospital-introduction {
                background-image: url("/assets/images/key-features/visual-specialty-hospital-introduction.webp");
            }

            &.visual--orthopedics {
                background-image: url("/assets/images/key-features/visual-orthopedics.webp");
            }

            &.visual--emergency {
                background-image: url("/assets/images/key-features/visual-emergency.webp");
            }
        }

        .description {
            font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
            text-align: center;
            color: #444;
        }

        .list {
            display: grid;
            gap: clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);

            @media (width >=768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .item {
            padding: clamp(16rem, calc(34 / var(--container) * 100vw), 34rem) clamp(2ch, calc(34 / var(--container) * 100vw), 34rem) clamp(16rem, calc(34 / var(--container) * 100vw), 34rem) clamp(5ch, calc(71 / var(--container) * 100vw), 71rem);
            border: 1px solid #e5e5e5;
            border-radius: 10rem;
        }

        .title {
            position: relative;
            font: var(--font-size-18) / 1.5 var(--font-sans);
            color: #444;
        }

        .title::before {
            position: absolute;
            top: 0.5lh;
            left: -3ch;
            display: block;
            width: 1em;
            aspect-ratio: 1;
            background: url("/assets/images/pages/checked.svg") no-repeat 50% / contain;
            translate: 0 -45%;
            content: "";
        }

        strong {
            font-weight: 700;
            color: #000;
        }
    }

    .section-medical-technology {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);

        &.section-medical-technology--bg-noise {
            background: #f5f5f5 url("/assets/images/pages/gray-bg.png");
        }

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.85714286em;
        }

        .subheading {
            font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
            text-align: center;
            color: #444;
        }

        .list {
            display: grid;
            margin-top: clamp(var(--content-top), calc(45 / var(--container) * 100vw), 45rem);

            @media (width >=768px) {
                gap: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem);
            }

            @media (width < 768px) {
                gap: 60rem;
            }
        }

        ol.list {
            counter-reset: index;

            .eyebrow::before {
                counter-increment: index;
                content: counter(index, decimal-leading-zero);
            }
        }

        .item {
            display: grid;
            align-items: center;
            row-gap: calc(var(--font-size-25) * 1.5);

            @media (width >=768px) {
                --padding-inline: clamp(8rem, calc(79 / var(--container) * 100vw), 79rem);
                grid-template-columns: repeat(2, 1fr);

                &:nth-child(odd) .content {
                    padding-left: var(--padding-inline);
                }

                &:nth-child(even) .content {
                    order: -1;
                    padding-right: var(--padding-inline);
                }
            }
        }

        .photo {
            display: block;
            width: 100%;
            height: auto;
            text-indent: -1000vw;
            background: #afafaf;
            border-radius: 10rem;
        }

        .eyebrow {
            font: var(--font-size-17-to-14) var(--font-hanam);
            letter-spacing: 0;
            color: var(--secondary);
            text-transform: uppercase;
        }

        .title {
            margin-block: 0.48em 1.6em;
            padding-bottom: 1.04em;
            font: 600 var(--font-size-25) var(--font-sans);
            text-wrap: balance;
            border-bottom: 1px solid #e5e5e5;
        }

        .subtitle {
            margin-bottom: 0.45em;
            font: 700 var(--font-size-20) / 1.4 var(--font-sans);
            text-wrap: balance;
            color: var(--primary);
        }

        .description {
            font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
            color: #444;

            strong {
                font-weight: 700;
                color: #000;
            }

            @media (width < 1280px) {
                br {
                    display: none;
                }
            }
        }

        .disc-list {
            display: grid;
            gap: 0.5em;
            margin-top: 0.77777778em;
            font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
            color: #444;
        }

        .disc-item {
            position: relative;
            padding-left: 1.4ch;
        }

        .disc-item::before {
            position: absolute;
            top: 0;
            left: 0;
            font: 700 0.55555556em var(--font-sans);
            color: var(--secondary);
            translate: -14% 58.5%;
            content: "○";
        }

        dt {
            font-weight: 700;
            color: var(--secondary);
        }

        dt::after {
            color: #444;
            content: " : ";
        }

        dt,
        dd {
            display: inline;
        }
    }

    .section-key-treatments {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        text-align: center;
        background: #f5f5f5 url("/assets/images/pages/gray-bg.png");

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.68571429em;
        }

        .lead {
            margin-bottom: 0.24em;
            font: 700 var(--font-size-25) / 1.5 var(--font-sans);
            color: var(--secondary);
        }

        .subheading {
            font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
            text-wrap: balance;
            color: #444;
        }

        .list {
            gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
            margin-top: clamp(36rem, calc(44 / var(--container) * 100vw), 44rem);

            &.list--column-2 {
                display: grid;
                grid-template-columns: repeat(2, 1fr);

                .item--col-end-3 {
                    grid-column-end: span 2;
                }
            }

            &.list--column-3 {
                display: grid;
                grid-template-columns: repeat(2, 1fr);

                @media (width >=768px) {
                    grid-template-columns: repeat(3, 1fr);

                    &.list--item-5 {
                        grid-template-columns: repeat(6, 1fr);

                        >.item {
                            grid-column-end: span 2;
                        }

                        >.item:nth-child(n + 4) {
                            grid-column-end: span 3;
                        }
                    }
                }
            }

            &.list--column-4 {
                display: grid;
                grid-template-columns: repeat(2, 1fr);

                @media (width >=768px) {
                    grid-template-columns: repeat(4, 1fr);
                }
            }

            &.list--column-5 {
                display: flex;
                flex-wrap: wrap;

                @media (width >=768px) {
                    .item {
                        flex: 1 25%;
                    }
                }

                @media (width < 768px) {
                    .item {
                        flex: 1 40%;
                    }
                }
            }
        }

        .item {
            padding: clamp(24rem, calc(39 / var(--container) * 100vw), 39rem) 1ch clamp(20rem, calc(34 / var(--container) * 100vw), 34rem);
            background: #fff;
            border-radius: 10rem;
        }

        .icon {
            height: 3.6em;
            font-size: var(--font-size-20);
            background: no-repeat 50% / auto 97.22222222%;

            &.icon--1 {
                background-image: url("/assets/images/key-treatments/icon-1.svg");
            }

            &.icon--2 {
                background-image: url("/assets/images/key-treatments/icon-2.svg");
            }

            &.icon--3 {
                background-image: url("/assets/images/key-treatments/icon-3.svg");
            }

            &.icon--4 {
                background-image: url("/assets/images/key-treatments/icon-4.svg");
                background-size: auto 100%;
            }

            &.icon--5 {
                background-image: url("/assets/images/key-treatments/icon-5.svg");
                background-size: auto 98.61111111%;
            }

            &.icon--6 {
                background-image: url("/assets/images/key-treatments/icon-6.svg");
            }

            &.icon--7 {
                background-image: url("/assets/images/key-treatments/icon-7.svg");
            }

            &.icon--8 {
                background-image: url("/assets/images/key-treatments/icon-8.svg");
            }

            &.icon--9 {
                background-image: url("/assets/images/key-treatments/icon-9.svg");
            }

            &.icon--10 {
                background-image: url("/assets/images/key-treatments/icon-10.svg");
            }

            &.icon--11 {
                background-image: url("/assets/images/key-treatments/icon-11.svg");
            }

            &.icon--12 {
                background-image: url("/assets/images/key-treatments/icon-12.svg");
            }

            &.icon--13 {
                background-image: url("/assets/images/key-treatments/icon-13.svg");
            }

            &.icon--14 {
                background-image: url("/assets/images/key-treatments/icon-14.svg");
            }

            &.icon--15 {
                background-image: url("/assets/images/key-treatments/icon-15.svg");
            }

            &.icon--16 {
                background-image: url("/assets/images/key-treatments/icon-16.svg");
            }

            &.icon--17 {
                background-image: url("/assets/images/key-treatments/icon-17.svg");
            }

            &.icon--18 {
                background-image: url("/assets/images/key-treatments/icon-18.svg");
            }

            &.icon--19 {
                background-image: url("/assets/images/key-treatments/icon-19.svg");
            }

            &.icon--20 {
                background-image: url("/assets/images/key-treatments/icon-20.svg");
            }

            &.icon--21 {
                background-image: url("/assets/images/key-treatments/icon-21.svg");
            }

            &.icon--22 {
                background-image: url("/assets/images/key-treatments/icon-22.svg");
            }

            &.icon--23 {
                background-image: url("/assets/images/key-treatments/icon-23.svg");
            }

            &.icon--24 {
                background-image: url("/assets/images/key-treatments/icon-24.svg");
            }

            &.icon--25 {
                background-image: url("/assets/images/key-treatments/icon-25.svg");
            }

            &.icon--26 {
                background-image: url("/assets/images/key-treatments/icon-26.svg");
            }

            &.icon--27 {
                background-image: url("/assets/images/key-treatments/icon-27.svg");
                background-size: auto 97.22222222%;
            }
        }

        .title {
            margin-block: 1.75em 0.75em;
            font: 700 var(--font-size-20) var(--font-sans);
        }

        .description {
            font: var(--font-size-16) / 1.5 var(--font-sans);
            text-wrap: balance;
            color: #444;
            /*max-width: 70ch;*/
            margin-inline: auto;

            @media (width < 768px) {
                br {
                    display: none;
                }
            }

            p+p {
                margin-top: 0.45lh;
            }

            strong {
                font-weight: 700;
                color: #000;
            }
        }

        .mt-0_5lh {
            margin-top: 0.5lh;
        }
    }

    .section-info-list {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        text-align: center;
        background: #f5f5f5 url("/assets/images/pages/gray-bg.png");

        &.section-info-list--no-bg {
            background: 0;
        }

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.68571429em;
        }

        .subheading {
            font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
            text-wrap: balance;
            color: #444;
        }

        .subheading b {
            font-weight: 700;
            color: #000;
        }

        .list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
            margin-top: clamp(36rem, calc(44 / var(--container) * 100vw), 44rem);

            &.list--bg-black .content {
                color: #fff;
                background: #222;

                strong {
                    color: #fff;
                }
            }

            &.list--bg-white .content {
                background: #fff;

                .description {
                    font-weight: 400;
                    color: #444;
                }
            }

            &.list--bg-transparent {
                .photo {
                    border-radius: 10rem;
                }

                .description {
                    font-weight: 400;
                    color: #444;
                }
            }

            &.list--border .content {
                border: solid #e5e5e5;
                border-width: 0 1px 1px;
            }

            &.list--column-3 {
                @media (width >=768px) {
                    grid-template-columns: repeat(6, 1fr);

                    li {
                        grid-column-end: span 2;
                    }

                    &.list--item-5 li:nth-child(4) {
                        grid-column-start: 2;
                    }
                }
            }

            &.list--column-4 {
                @media (width >=768px) {
                    grid-template-columns: repeat(4, 1fr);
                }
            }

            &.list--column-5 {
                @media (width >=768px) {
                    grid-template-columns: repeat(3, 1fr);
                }

                @media (width >=1280px) {
                    grid-template-columns: repeat(5, 1fr);
                    gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
                }
            }

            &.list--item-7 {
                @media (width >=768px) {
                    grid-template-columns: repeat(3, 1fr);
                }

                @media (width >=1280px) {
                    display: flex;
                    flex-wrap: wrap;

                    li:nth-child(-n + 3) {
                        flex: 1 30%;
                    }

                    li:nth-child(n + 4) {
                        flex: 1 20%;
                    }
                }
            }
        }

        figure {
            display: grid;
            grid-template-rows: auto 1fr;
            height: 100%;
        }

        .photo {
            display: block;
            width: 100%;
            height: auto;
            text-indent: -1000vw;
            background: #afafaf;
            border-radius: 10rem 10rem 0 0;
        }

        .content {
            padding: 26.5rem 1ch;
            border-radius: 0 0 10rem 10rem;
        }

        .title {
            font: 700 var(--font-size-20) var(--font-sans);

            &:has(+ .description) {
                margin-bottom: 0.65em;
            }
        }

        .description {
            font: 300 var(--font-size-16) / 1.5 var(--font-sans);
            text-wrap: balance;
            text-wrap: balance;
            color: rgb(from currentColor r g b / 0.7);

            &+.description {
                margin-top: 0.625em;
            }

            strong {
                font-weight: 700;
                color: #000;
            }

            @media (width < 768px) {
                br {
                    display: none;
                }
            }
        }
    }

    .section-conclusion {
        padding-block: clamp(var(--section-block), calc(91 / var(--container) * 100vw), 90rem);
        text-align: center;
        text-wrap: balance;
        color: #fff;
        background: #000 no-repeat 50% / cover;

        &.section-conclusion--diagnosis-process {
            background-image: url("/assets/images/conclusion/bg-diagnosis-process.webp");
        }

        &.section-conclusion--dog {
            background-image: url("/assets/images/conclusion/bg-dog.webp");
        }

        &.section-conclusion--cat {
            background-image: url("/assets/images/conclusion/bg-cat.webp");
        }

        &.section-conclusion--specialty-hospital-introduction {
            background-image: url("/assets/images/conclusion/bg-specialty-hospital-introduction.webp");
        }

        &.section-conclusion--surgery {
            background-image: url("/assets/images/conclusion/bg-surgery.webp");
        }

        &.section-conclusion--emergency {
            background-image: url("/assets/images/conclusion/bg-emergency.webp");
        }

        * {
            letter-spacing: -0.025em;
        }

        .quote {
            width: 0.95em;
            aspect-ratio: 38 / 25;
            margin-inline: auto;
            font-size: var(--font-size-40);
            background: url("/assets/images/pages/double-quote.svg") no-repeat 50% / contain;
        }

        .quote--opening {
            margin-bottom: 0.775em;
        }

        .quote--closing {
            margin-top: 0.775em;
            rotate: 180deg;
        }

        .slogan {
            margin-bottom: 0.2em;
            font: 600 var(--font-size-40) / 1.375 var(--font-sans);
        }

        .lead {
            margin-bottom: 1.31818182em;
            font: 500 var(--font-size-22) / 1.59090909 var(--font-sans);
        }

        .description {
            font: 600 var(--font-size-30) / 1.5 var(--font-sans);
        }
    }

    .section-crrt {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);

        &.section-crrt--bg-gray {
            background: #f5f5f5 url("/assets/images/pages/gray-bg.png");

            .item {
                background: #fff;
            }
        }

        * {
            letter-spacing: -0.025em;
        }

        .subheading {
            margin-top: 1.04em;
            font: 700 var(--font-size-25) var(--font-sans);
            text-align: center;
            color: var(--primary);
        }

        .layout {
            display: grid;
            gap: 8rem clamp(8rem, calc(81 / var(--container) * 100vw), 81rem);
            margin-top: clamp(var(--content-top), calc(46 / var(--container) * 100vw), 46rem);

            @media (width >=768px) {
                grid-template-columns: 50% 1fr;
            }
        }

        .photo-block {
            position: relative;
        }

        .photo {
            position: sticky;
            top: calc(var(--header-height) + 40rem);
            display: block;
            width: 100%;
            height: auto;
            background: #f5f5f5;
            border-radius: 10rem;
        }

        .list {
            display: grid;
            gap: clamp(8rem, calc(10 / var(--container) * 100vw), 10rem);
        }

        .item {
            padding: clamp(16rem, calc(37 / var(--container) * 100vw), 37rem) clamp(2ch, calc(34 / var(--container) * 100vw), 34rem) clamp(16rem, calc(34 / var(--container) * 100vw), 34rem) clamp(5ch, calc(71 / var(--container) * 100vw), 71rem);
            border: 1px solid #e5e5e5;
            border-radius: 10rem;

            &:not(:has(+ .description)) {
                padding: clamp(16rem, calc(37 / var(--container) * 100vw), 37rem) clamp(2ch, calc(34 / var(--container) * 100vw), 34rem) clamp(16rem, calc(38 / var(--container) * 100vw), 38rem) clamp(5ch, calc(71 / var(--container) * 100vw), 71rem);

                .title {
                    font: var(--font-size-18-to-14) var(--font-sans);
                    color: var(--black);
                }

                .title::before {
                    left: -3ch;
                    width: 1em;
                    translate: 0 -44%;
                }
            }
        }

        .title {
            position: relative;
            font: 700 var(--font-size-20) var(--font-sans);
            color: var(--primary);
        }

        .title:has(+ .description) {
            margin-bottom: 0.8em;
        }

        .title::before {
            position: absolute;
            top: 0.5lh;
            left: -2.4ch;
            display: block;
            width: 0.9em;
            aspect-ratio: 1;
            background: url("/assets/images/pages/checked.svg") no-repeat 50% / contain;
            translate: 0 -55.5%;
            content: "";
        }

        .description {
            font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
            color: #444;
        }
    }

    .section-main-equipment {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(140 / var(--container) * 100vw), 140rem);

        * {
            letter-spacing: -0.025em;
        }

        .layout {
            display: grid;
            gap: 12rem clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);
            margin-top: clamp(var(--content-top), calc(44 / var(--container) * 100vw), 44rem);

            @media (width >=768px) {
                grid-template-columns: auto 1fr auto;

                .nav-btn--prev {
                    order: -1;
                }
            }

            @media (width < 768px) {
                grid-template-columns: 1fr 1fr;

                .swiper-shadow {
                    grid-column: 1 / -1;
                }
            }
        }

        .swiper-shadow {
            min-width: 0;
            max-width: min(1300rem, 100%);
            margin-inline: auto;
            border-radius: 10rem;
            box-shadow: 0 10rem 40rem hsla(0, 0%, 0%, 0.15);
        }

        .swiper {
            contain: content;
            border-radius: 10rem;
        }

        .swiper-slide {
            display: grid;
            gap: var(--content-top) clamp(16rem, calc(60 / var(--container) * 100vw), 60rem);
            padding: clamp(12rem, calc(20 / var(--container) * 100vw), 20rem);
            background: #fff;

            @media (width >=768px) {
                grid-template-columns: 55fr 65fr;
            }
        }

        .content {
            align-self: center;
        }

        .photo {
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 55 / 37;
            text-indent: -1000vw;
            background: #f5f5f5;
        }

        .eyebrow {
            font: var(--font-size-16) var(--font-hanam);
            letter-spacing: 0;
            color: var(--secondary);
        }

        .title {
            margin-top: 0.65em;
            font: 700 var(--font-size-20) var(--font-sans);
        }

        .title:has(+ .description) {
            margin-bottom: clamp(0.5lh, calc(33 / var(--container) * 100vw), 33rem);
        }

        .description {
            font: var(--font-size-15) / 1.46666667 var(--font-sans);
            color: #666;

            @media (width < 768px) {
                text-wrap: balance;
            }
        }

        .nav-btn {
            align-self: center;
            width: clamp(45rem, calc(60 / var(--container) * 100vw), 60rem);
            aspect-ratio: 1;
            background: #fff url("/assets/images/main-equipment/nav-arrow.svg") no-repeat 50% / 18.33333333%;
            border: 1px solid #333;
            border-radius: 50%;

            @media (width >=768px) {
                translate: 0 39%;
            }
        }

        .nav-btn--prev {
            rotate: 180deg;
        }

        .nav-btn--next {
            justify-self: end;
        }

        .swiper-button-disabled {
            opacity: 0.3;
        }
    }
}

.page-endoscopy-center {
    .section-endoscopy-equipment {
        padding-block: clamp(var(--section-block), calc(116 / var(--container) * 100vw), 116rem) clamp(var(--section-block), calc(91 / var(--container) * 100vw), 91rem);
        text-align: center;
        color: #fff;
        background: #111 url("/assets/images/endoscopy-equipment/bg.png");

        * {
            letter-spacing: -0.025em;
        }

        .container {
            display: grid;
            gap: clamp(var(--section-block), calc(113 / var(--container) * 100vw), 113rem);
        }

        .heading {
            font: 700 var(--font-size-25) var(--font-sans);
        }

        .list {
            margin-top: clamp(var(--content-top), calc(47 / var(--container) * 100vw), 47rem);

            &.list--1 {
                gap: 30rem clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);

                @media (width >=1280px) {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                }

                @media (width < 1280px) {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    max-width: 600rem;
                    margin-inline: auto;
                }
            }

            &.list--2 {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 30rem clamp(8rem, calc(110 / var(--container) * 100vw), 110rem);

                li {
                    display: grid;
                    grid-template: "photo-1 arrow photo-2" "content-1 empty content-2" / 1fr auto 1fr;
                    gap: 0 clamp(8rem, calc(16 / var(--container) * 100vw), 16rem);

                    figure {
                        display: grid;
                        grid-template-rows: subgrid;
                    }

                    figure:first-of-type {
                        grid-area: 1 / 1 / 3 / 2;
                    }

                    figure:last-of-type {
                        grid-area: 1 / 3 / 3 / 4;
                    }
                }
            }
        }

        .photo {
            display: block;
            width: 100%;
            max-width: 276rem;
            height: auto;
            border-radius: 50%;
        }

        .title {
            margin-top: 1.15em;
            font: 500 var(--font-size-20) var(--font-sans);
        }

        .description {
            margin-top: 0.5em;
            font: 300 var(--font-size-16) var(--font-sans);
            color: #ddd;
        }

        .arrow {
            grid-area: arrow;
            align-self: center;
            width: clamp(24rem, calc(38 / var(--container) * 100vw), 38rem);
            aspect-ratio: 38 / 31;
            background: url("/assets/images/endoscopy-equipment/arrow.svg") no-repeat 50% / contain;
        }
    }
}

.page-intervention-center {
    .section-concept {
        padding-block: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        text-align: center;

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.65714286em;
        }

        .subheading {
            margin-bottom: 0.24em;
            font: 700 var(--font-size-25) / 1.5 var(--font-sans);
            text-wrap: balance;
            color: var(--secondary);
        }

        .description {
            font: var(--font-size-18) / 1.5 var(--font-sans);
            color: #444;
        }

        .list {
            display: grid;
            row-gap: 16rem;
            margin-top: clamp(36rem, calc(46 / var(--container) * 100vw), 46rem);
            text-align: center;
            counter-reset: index;

            @media (width >=768px) {
                grid-template-columns: 42fr 12fr 42fr 12fr 42fr;
            }
        }

        .item {
            background: #f7f7f7;
            border-radius: 10rem;

            @media (width >=768px) {
                padding: 39rem 16rem 34rem;
            }

            @media (width < 768px) {
                padding: 24rem 16rem;
            }
        }

        .step {
            font: var(--font-size-17) var(--font-hanam);
            color: var(--secondary);
            counter-increment: index;

            &::before {
                content: "STEP. " counter(index, decimal-leading-zero);
            }
        }

        .icon {
            display: block;
            height: 3em;
            margin-top: 1.8em;
            font-size: var(--font-size-20);
            background: no-repeat 50% / contain;

            &.icon--1 {
                background-image: url("/assets/images/intervention/concept-icon-1.svg");
            }

            &.icon--2 {
                background-image: url("/assets/images/intervention/concept-icon-2.svg");
            }

            &.icon--3 {
                background-image: url("/assets/images/intervention/concept-icon-3.svg");
            }
        }

        .title {
            margin-top: 1.7em;
            font: 700 var(--font-size-20) / 1.5 var(--font-sans);
        }

        .arrow {
            place-self: center;
            width: 1.9em;
            aspect-ratio: 38 / 31;
            font-size: var(--font-size-20);
            background: url("/assets/images/intervention/arrow.svg") no-repeat 50% / contain;

            @media (width < 768px) {
                rotate: 90deg;
            }
        }
    }

    .section-indications {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        background: #f5f5f5 url("/assets/images/pages/gray-bg.png");

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.71428571em;
        }

        .description {
            font: var(--font-size-18) / 1.5 var(--font-sans);
            text-align: center;
            color: #444;
        }

        .layout {
            display: grid;
            row-gap: 24rem;
            margin-top: clamp(36rem, calc(45 / var(--container) * 100vw), 45rem);

            @media (width >=768px) {
                grid-template-columns: repeat(2, 1fr);
                align-items: start;
            }
        }

        .visual {
            aspect-ratio: 75 / 50;
            background: url("/assets/images/intervention/indications-visual.webp") no-repeat 50% / cover;
            border-radius: 10rem;
        }

        .ui-checked-list {
            @media (width >=768px) {
                margin-left: 10.8%;
            }
        }
    }

    .section-treatments {
        padding-block: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        text-align: center;

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.82857143em;
        }

        .subheading {
            font: var(--font-size-18) / 1.5 var(--font-sans);
            text-wrap: balance;
            color: #444;
        }

        .list {
            display: grid;
            gap: clamp(16rem, calc(30 / var(--container) * 100vw), 30rem);
            margin-top: clamp(36rem, calc(44 / var(--container) * 100vw), 44rem);

            @media (width >=768px) {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .item {
            padding: 39rem clamp(16rem, calc(19 / var(--container) * 100vw), 19rem) 19rem;
            border: 1px solid #e5e5e5;
            border-radius: 10rem;
        }

        .icon {
            height: 2.95833333em;
            font-size: var(--font-size-24);
            background: no-repeat 50% / contain;

            &.icon--1 {
                background-image: url("/assets/images/key-treatments/icon-5.svg");
            }

            &.icon--2 {
                background-image: url("/assets/images/key-treatments/icon-7.svg");
            }

            &.icon--3 {
                background-image: url("/assets/images/key-treatments/icon-28.svg");
            }
        }

        .title {
            margin-top: 1.375em;
            font: 700 var(--font-size-24) / 1.5 var(--font-sans);
        }

        .detail-list {
            display: grid;
            gap: 5rem;
            margin-top: 22rem;
            font: var(--font-size-18) / 1.5 var(--font-sans);
            color: #444;
        }

        .detail-item {
            padding: 6.5rem 1ch;
            background: #f5f5f5;
            border-radius: 5rem;
        }
    }

    .section-medical-technology {
        ol.list .eyebrow::before {
            text-transform: uppercase;
            content: "step. " counter(index, decimal-leading-zero);
        }
    }
}

.page-dog-hospital {
    .section-facility {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);

        * {
            letter-spacing: -0.025em;
        }

        .shared-heading {
            margin-bottom: 0.68571429em;
        }

        .subheading {
            font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
            text-align: center;
            color: #444;

            strong {
                font-weight: 700;
                color: #000;
            }
        }

        .list {
            display: grid;
            gap: 8rem clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);
            margin-top: clamp(var(--content-top), calc(38 / var(--container) * 100vw), 38rem);

            @media (width >=768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .photo {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 10rem;
        }
    }
}

.page-cat-hospital {
    .section-isfm {
        padding-top: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);

        * {
            letter-spacing: -0.025em;
        }

        /* #region local component */
        ._sub-heading {
            margin-bottom: 0.84em;
            font: 700 var(--font-size-25) var(--font-sans);
            color: var(--primary);
        }

        ._desc {
            font: var(--font-size-18) / 1.5 var(--font-sans);

            strong {
                font-weight: 700;
            }
        }

        /* #endregion local component */
        .shared-heading {
            margin-bottom: 26rem;
        }

        .subheading {
            font: 700 var(--font-size-25) var(--font-sans);
            text-align: center;
            text-wrap: balance;
            color: var(--secondary);
        }

        .content-area {
            display: grid;
            row-gap: clamp(24rem, calc(75 / var(--container) * 100vw), 75rem);
            margin-top: clamp(36rem, calc(47 / var(--container) * 100vw), 47rem);
            background: #f5f5f5 url("/assets/images/cat-hospital/noise.png");
            border-radius: 20rem;

            @media (width >=768px) {
                grid-template-columns: repeat(2, 1fr);
                padding: clamp(36rem, calc(67 / var(--container) * 100vw), 67rem) clamp(16rem, calc(80 / var(--container) * 100vw), 80rem) 70rem;

                .section-about {
                    grid-column: 1 / -1;
                }

                .cfc-logo {
                    width: 89.55223881%;
                }
            }

            @media (width < 768px) {
                padding: 36rem 16rem;
            }
        }

        .section-about {
            @media (width >=768px) {
                text-align: center;
            }
        }

        .cfc-logo {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;

            @media (width >=768px) {
                aspect-ratio: 600 / 532;
                background: #fff;
                border-radius: 15rem;
            }
        }

        .section-level {
            @media (width >=768px) {
                margin-top: 16rem;
            }
        }

        .ui-checked-list {
            margin-top: 25rem;
        }
    }
}

.page-ophthalmology-hospital {
    .section-care-system {
        contain: content;
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
        background: #f5f5f5 url("/assets/images/pages/gray-bg.png");

        * {
            letter-spacing: -0.025em;
        }

        .swiper {
            overflow: visible;
            margin-top: clamp(var(--content-top), calc(45 / var(--container) * 100vw), 45rem);
        }

        .item {
            width: auto;
            counter-increment: index;
        }

        .item:has(.arrow) {
            display: grid;
            grid-template-columns: 420fr 78fr;
        }

        .content {
            padding: calc(var(--font-size-20) * 1.8) 2ch calc(var(--font-size-20) * 1.65);
            text-align: center;
            background: #fff;
            border-radius: 10rem;
        }

        .step::before {
            font: var(--font-size-17) var(--font-hanam);
            letter-spacing: 0;
            color: var(--secondary);
            text-transform: uppercase;
            content: "step. " counter(index, decimal-leading-zero);
        }

        .icon {
            height: 3em;
            margin-top: 1.7em;
            font-size: var(--font-size-20);
            background: no-repeat 50% / contain;

            &.icon--1 {
                background-image: url("/assets/images/care-system/icon-1.svg");
            }

            &.icon--2 {
                background-image: url("/assets/images/care-system/icon-2.svg");
            }

            &.icon--3 {
                background-image: url("/assets/images/care-system/icon-3.svg");
            }

            &.icon--4 {
                background-image: url("/assets/images/care-system/icon-4.svg");
            }
        }

        .title {
            margin-top: 1.85em;
            margin-bottom: 0.55em;
            font: 700 var(--font-size-20) var(--font-sans);
        }

        .description {
            font: var(--font-size-16) / 1.6875 var(--font-sans);
            color: #444;
        }

        .arrow {
            place-self: center;
            width: 1.9em;
            aspect-ratio: 38 / 31;
            margin-inline: 1em;
            font-size: var(--font-size-20);
            background: url("/assets/images/care-system/arrow.svg") no-repeat 50% / contain;
        }

        .scrollbar {
            height: 5rem;
            margin-top: 3em;
            font-size: var(--font-size-20);
            background: hsla(0, 0%, 0%, 0.1);
            border-radius: 5em;
        }

        .swiper-scrollbar-drag {
            background: #888;
        }
    }

    .section-treatment-cases {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);

        .before-after-list {
            display: grid;
            gap: clamp(30rem, calc(47 / var(--container) * 100vw), 47rem) clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
            margin-top: clamp(var(--content-top), calc(36 / var(--container) * 100vw), 36rem);

            @media (width >=768px) {
                grid-template-columns: repeat(3, 1fr);
            }

            .image-block {
                position: relative;

                &::before {
                    position: absolute;
                    inset: 0 auto 0 calc(var(--value, 50) * 1% + -1px);
                    z-index: 1;
                    border-left: 1px solid oklch(100% 0.00011 271.152 / 0.6);
                    content: "";
                    pointer-events: none;
                }

                &::after {
                    position: absolute;
                    top: 50%;
                    left: calc(var(--value, 50) * 1%);
                    z-index: 2;
                    width: 45rem;
                    aspect-ratio: 1;
                    background: url("/assets/images/treatment-cases/slider.png") no-repeat 50% / contain;
                    border-radius: 50%;
                    box-shadow: 0 0 10rem oklch(0% 0 0 / 0.15);
                    translate: -50% -50%;
                    content: "";
                    pointer-events: none;
                }
            }

            .image {
                display: block;
                width: 100%;
                height: auto;
                user-select: none;
            }

            .image--after {
                position: absolute;
                inset: 0 0 auto;
                clip-path: inset(0 0 0 calc(var(--value, 50) * 1%));
            }

            .slider {
                position: absolute;
                inset: 0 0 auto;
                aspect-ratio: 72 / 48;
                background: 0;
                appearance: none;
                cursor: grab;

                &:active {
                    cursor: grabbing;
                }

                &::-webkit-slider-thumb {
                    width: 45rem;
                    appearance: none;
                }
            }

            .label-block {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                font: 600 var(--font-size-18-to-14) var(--font-mont);
                white-space: nowrap;
                text-align: center;
                color: #fff;
                text-transform: uppercase;
                background: #222;
                user-select: none;
            }

            .label {
                padding-block: 0.91666667em;
            }

            .label--after {
                background: var(--primary);
            }

            .title {
                margin-top: 1.1em;
                font: 600 var(--font-size-20) var(--font-sans);
                text-align: center;
            }

            .title::before {
                content: "[ ";
            }

            .title::after {
                content: " ]";
            }
        }
    }
}

.page-critical-care-medicine-center {
    * {
        letter-spacing: -0.025em;
    }

    .separator {
        margin-block: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem) clamp(var(--content-top), calc(80 / var(--container) * 100vw), 80rem);
        border-top: 1px solid #e5e5e5;
    }

    .section-intro {
        .eyebrow {
            width: fit-content;
            margin-inline: auto;
            padding: 0.67647059em 1.67647059em;
            font: var(--font-size-17) var(--font-hanam);
            letter-spacing: 0;
            color: #fff;
            background: var(--secondary);
            border-radius: 5em;
        }

        .heading {
            margin-block: 0.6em 1.1em;
            font: 500 var(--font-size-40) var(--font-sans);
        }

        .heading strong {
            font-weight: 700;
        }
    }

    .section-clinic {
        padding-top: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);

        &>.container {
            * {
                letter-spacing: -0.025em;
            }

            & {
                display: grid;
                gap: clamp(8rem, calc(99 / var(--container) * 100vw), 99rem);

                @media (width >=768px) {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            .content {
                align-content: center;
                padding-block: 1lh;
                border-top: 3rem solid var(--primary);
                border-bottom: 1px solid #e5e5e5;
            }

            .heading {
                margin-bottom: 0.82222222em;
                font: var(--font-size-45) var(--font-hanam);
            }

            .description {
                font: var(--font-size-18-to-14) / 1.55555556 var(--font-sans);
                color: #444;
            }

            .list {
                display: grid;
                gap: 0.5em;
                margin-top: 0.77777778em;
                font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
                color: #444;
            }

            .item {
                position: relative;
                padding-left: 1.4ch;
            }

            .item::before {
                position: absolute;
                top: 0;
                left: 0;
                font: 700 0.55555556em var(--font-sans);
                color: var(--secondary);
                translate: -14% 58.5%;
                content: "○";
            }

            dt {
                font-weight: 700;
                color: var(--secondary);
            }

            dt::after {
                color: #444;
                content: " : ";
            }

            dt,
            dd {
                display: inline;
            }

            .photo {
                display: block;
                align-self: center;
                width: 100%;
                height: auto;
                text-indent: -1000vw;
                background: #afafaf;
                border-radius: 10rem;
            }
        }
    }

    #tumor-panel .section-medical-technology {
        padding-top: 0;
    }
}

.page-specialty-hospital-introduction {
    * {
        letter-spacing: -0.025em;
    }

    .page-team-message {
        padding-bottom: clamp(var(--section-block), calc(112 / var(--container) * 100vw), 112rem);

        .description {
            color: #333;
        }

        strong {
            font-weight: 700;
            color: #000;
        }
    }

    .heading-dots3 {
        position: relative;
        font: 600 var(--font-size-40) var(--font-sans);

        &::before,
        &::after {
            display: block;
            aspect-ratio: 1;
            font-size: max(30rem, 1em);
            border-radius: 50%;
            content: "";
        }

        &::before {
            width: 0.2em;
            margin-bottom: 0.35em;
            background: var(--secondary);
            box-shadow: 0.65em 0 0 #dadada;
        }

        &::after {
            position: absolute;
            top: 0.1em;
            left: 0.35em;
            width: 0.15em;
            background: #aaa;
            translate: 0 -50%;
        }

        &.heading-dots3--center {
            text-align: center;

            &::before {
                margin-inline: auto;
                translate: -0.325em;
            }

            &::after {
                left: 50%;
                translate: -50% -50%;
            }
        }
    }

    .section-expertise {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);

        .summaries {
            display: grid;
            gap: 0.77lh;
            margin-top: 2.11111111em;
            font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
            color: #444;
        }

        .summary-item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 0.83333333em;
        }

        .summary-item::before {
            display: block;
            width: 1em;
            aspect-ratio: 1;
            background: url("/assets/images/pages/checked.svg") no-repeat 50% / contain;
            translate: 0 28%;
            content: "";
        }

        .summary-item strong {
            font-weight: 700;
            color: #000;
        }

        .fields {
            display: grid;
            gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem) clamp(8rem, calc(41 / var(--container) * 100vw), 41rem);
            margin-top: clamp(var(--content-top), calc(56 / var(--container) * 100vw), 56rem);

            @media (width >=768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .field-item {
            display: grid;
            grid-template: "icon title" "icon description";
            gap: 0 clamp(8rem, calc(39 / var(--container) * 100vw), 39rem);
            padding: clamp(24rem, calc(40 / var(--container) * 100vw), 40rem) clamp(8rem, calc(40 / var(--container) * 100vw), 40rem);
            border: 1px solid #e5e5e5;
            border-radius: 10rem;
        }

        .field-icon {
            grid-area: icon;
            align-self: center;
            width: 5em;
            aspect-ratio: 1;
            font-size: var(--font-size-24);
            background: #f5f5f5 no-repeat 50% / contain;
            border-radius: 50%;
        }

        .field-icon--1 {
            background-image: url("/assets/images/expertise/field-1.svg");
        }

        .field-icon--2 {
            background-image: url("/assets/images/expertise/field-2.svg");
        }

        .field-icon--3 {
            background-image: url("/assets/images/expertise/field-3.svg");
        }

        .field-icon--4 {
            background-image: url("/assets/images/expertise/field-4.svg");
        }

        .field-title {
            grid-area: title;
            align-self: end;
            margin-block: 0.125em 0.66666667em;
            font: 700 var(--font-size-24) var(--font-sans);
        }

        .field-description {
            grid-area: description;
            font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
            color: #444;
        }

        .field-description strong {
            font-weight: 700;
            color: #000;
        }
    }

    .section-commitments {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem) clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);

        .list {
            display: grid;
            gap: clamp(8rem, calc(30 / var(--container) * 100vw), 30rem);
            margin-top: clamp(var(--content-top), calc(43 / var(--container) * 100vw), 43rem);
            font: 500 var(--font-size-20) var(--font-sans);
            counter-reset: index;

            @media (width >=768px) {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .item {
            display: grid;
            gap: 0.65em;
            padding: clamp(24rem, calc(35 / var(--container) * 100vw), 35rem) clamp(16rem, calc(28 / var(--container) * 100vw), 28rem);
            border: 1px solid #e5e5e5;
            border-radius: 10rem;
        }

        .index::before {
            font-family: var(--font-hanam);
            letter-spacing: 0;
            color: var(--secondary);
            counter-increment: index;
            content: counter(index, decimal-leading-zero) ".";
        }
    }
}

.page-surgery {
    * {
        letter-spacing: -0.025em;
    }

    .separator {
        margin-block: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem) clamp(var(--content-top), calc(80 / var(--container) * 100vw), 80rem);
        border-top: 1px solid #e5e5e5;
    }

    .section-intro {
        .eyebrow {
            width: fit-content;
            margin-inline: auto;
            padding: 0.67647059em 1.67647059em;
            font: var(--font-size-17) var(--font-hanam);
            letter-spacing: 0;
            color: #fff;
            background: var(--secondary);
            border-radius: 5em;
        }

        .heading {
            margin-block: 0.6em 1.1em;
            font: 500 var(--font-size-40) var(--font-sans);
        }

        .heading strong {
            font-weight: 700;
        }
    }

    .section-department-intro {
        padding-block: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem) clamp(var(--section-block), calc(115 / var(--container) * 100vw), 115rem);

        .section-separator+& {
            padding-top: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);
        }

        &:has(+ .section-advantage) {
            padding-bottom: clamp(var(--section-block), calc(64 / var(--container) * 100vw), 64rem);
        }

        .shared-heading--large {
            margin-bottom: 0.46666667em;
            font: var(--font-size-45) var(--font-hanam);

            &::before {
                width: 1.77777778em;
                height: 6rem;
                margin-bottom: 0.68888889em;
                background: var(--primary);
            }
        }

        .subheading {
            margin-top: 1.38888889em;
            font: var(--font-size-18) / 1.55555556 var(--font-sans);
            text-align: center;
            text-wrap: balance;
            color: #444;

            &+& {
                margin-top: 0.68lh;
            }
        }

        .layout {
            display: grid;
            gap: var(--content-top) clamp(8rem, calc(79 / var(--container) * 100vw), 79rem);
            margin-top: clamp(var(--content-top), calc(46 / var(--container) * 100vw), 46rem);

            .section-department-intro:has(.shared-heading--large) & {
                margin-top: clamp(var(--content-top), calc(64 / var(--container) * 100vw), 64rem);
            }

            &+& {
                margin-top: clamp(var(--content-top), calc(74 / var(--container) * 100vw), 74rem);
            }

            @media (width >=768px) {
                grid-template-columns: 600fr 821fr;
            }
        }

        .visual-block {
            position: relative;
        }

        .visual {
            position: sticky;
            top: calc(var(--header-height) + 1.5lh);
            display: block;
            width: 100%;
            height: auto;
            border-radius: 10rem;
        }

        .content,
        .list {
            align-items: start;
        }

        .index {
            margin-top: 1.11764706em;
            font: var(--font-size-17) var(--font-hanam);
            letter-spacing: 0;
            color: var(--secondary);
        }

        .lead {
            margin-top: 0.36em;
            padding-bottom: 0.84em;
            font: 600 var(--font-size-25) / 1.5 var(--font-sans);
            color: #222;
            border-bottom: 1px solid #e5e5e5;
        }

        .list {
            display: grid;
            gap: clamp(var(--content-top), calc(35 / var(--container) * 100vw), 35rem);
            margin-top: 20rem;

            .lead+& {
                margin-top: clamp(14rem, calc(44 / var(--container) * 100vw), 44rem);
            }
        }

        .title {
            width: fit-content;
            padding: 0.25em 0.7em;
            font: 700 var(--font-size-20) / 1.5 var(--font-sans);
            color: #fff;
            background: var(--secondary);
            border-radius: 5rem;
        }

        .value {
            margin-top: 0.83333333em;
            font: var(--font-size-18-to-14) / 1.5 var(--font-sans);
            color: #444;

            @media(width < 950px) {
                br {
                    display: none;
                }
            }
        }

        .value strong {
            font-weight: 700;
            color: #000;
        }

        .note {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: start;
            gap: 0.7ch;
            margin-top: 0.77777778em;

            &+& {
                margin-top: 0.55555556em;
            }

            &::before {
                position: relative;
                top: 0.9lh;
                font-size: 0.55555556em;
                color: var(--secondary);
                translate: 0 -50%;
                content: "○";
            }

            b {
                font-weight: 700;
            }
        }

        .detail-list {
            display: grid;
            gap: 0.25lh;
            margin-top: 7rem;
            padding-left: 1.3ch;

            .detail-item {
                position: relative;
                padding-left: 1ch;
            }

            .detail-item::before {
                position: absolute;
                top: 0;
                left: 0;
                font-weight: 700;
                color: #000;
                content: "-";
            }

            .detail-title,
            .detail-value {
                display: inline;
            }

            .detail-title {
                font-weight: 700;
                color: #000;
            }

            .detail-title::after {
                margin-inline: 0.4ch;
                font-weight: 400;
                content: ":";
            }
        }
    }

    .section-surgery-scope {
        padding-block: clamp(var(--section-block), calc(100 / var(--container) * 100vw), 100rem);

        .list {
            display: grid;
            gap: clamp(8rem, calc(20 / var(--container) * 100vw), 20rem);
            margin-top: 45rem;

            @media (width >=1280px) {
                grid-template-columns: repeat(5, 1fr);
            }

            @media (768px <=width < 1280px) {
                grid-template-columns: repeat(3, 1fr);
            }

            @media (width < 768px) {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .item {
            padding: min(12%, 33rem) min(9%, 24rem) min(11%, 30rem);
            border: 5rem solid #f1f1f1;
            border-radius: 10rem;
        }

        .index {
            font: var(--font-size-20-to-14) var(--font-hanam);
            letter-spacing: 0;
            color: var(--secondary);
        }

        .title {
            margin-top: 0.5em;
            font: 700 var(--font-size-20) / 1.5 var(--font-sans);
        }

        .desc {
            margin-top: 0.9375em;
            color: #444;
        }
    }
}

.page-about-treatment {
    .container {
        padding-bottom: clamp(var(--section-block), calc(120 / var(--container) * 100vw), 120rem);
    }
    .separator {
        margin-block: clamp(var(--content-top), calc(50 / var(--container) * 100vw), 50rem) clamp(var(--content-top), calc(80 / var(--container) * 100vw), 80rem);
        /*border-top: 1px solid #e5e5e5;*/
    }

    .board-category-tab {
        display: flex;
        gap: 0.77777778em;
        width: 100%;
        margin-inline: auto;
        font: 500 var(--font-size-18-to-14) var(--font-sans);
        white-space: nowrap;
        color: #999;
    }

    .common-button {
            padding: 1.08333333em 2ch;
            background: #eee;
            border-radius: 5em;
            border: none;
            min-width: 11em;
            color: #999;
    }

    .is-active {
        color: #fff;
        background: linear-gradient(90deg, var(--secondary), var(--primary));
    }
}