body {
        padding-bottom: 0;
    }

/* 인트로 페이지 스타일 */
#intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: opacity; /* 애니메이션 성능 최적화 */
    transform: translateZ(0); /* 하드웨어 가속 */
}

#intro-overlay.intro-hidden {
    display: none;
}

.intro-content {
    text-align: center;
    color: white;
    /* max-width: 900px; */
    padding: 40px;
}

/* 인트로 텍스트 애니메이션 성능 최적화 */
.intro-line,
.intro-text-2 {
    will-change: transform, opacity; /* 애니메이션 성능 최적화 */
    transform: translateZ(0); /* 하드웨어 가속 */
}

.intro-line.active,
.intro-text-2.active {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.8s ease;
}

.intro-text-1 {
    font-family: var(--mainFont);
    font-size: calc(70vw/var(--mainWidth));
    line-height: 1.2;
}

.intro-text-1 .intro-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    font-weight: 100;
}
.intro-text-1 .intro-line svg {
    width: calc(50vw/var(--mainWidth));
    height: auto;
}
.intro-text-1 .intro-line strong {
    color: #fbb8cc;
    font-weight: 500;
}
.intro-text-1 span:nth-of-type(1) {
    display: block;
    margin-bottom: calc(30vw/var(--mainWidth));
}
.intro-text-1 span:nth-of-type(3) {
    font-size: calc(146vw/var(--mainWidth));
    font-weight: 700;
    color: white;
}

.intro-text-2 {
    margin-top: calc(20vw/var(--mainWidth));
    opacity: 0;
    transform: translateY(30px);
    cursor: pointer;
    width: calc(177vw/var(--mainWidth));
    height: calc(44vw/var(--mainWidth));
    background-color: #f37097;
    border-radius: calc(22vw/var(--mainWidth));
    font-family: var(--mainFont);
    font-size: calc(28vw/var(--mainWidth));
    font-weight: 400;
    color: white;
    text-align: center;
    line-height: 1;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-top: calc(35vw/var(--mainWidth));
    border-top: 3px solid rgba(255, 255, 255, 0.5);
    border-left: 3px solid rgba(255, 255, 255, 0.5);
    border-bottom: 3px solid rgba(0, 0, 0, 0.3);
    border-right: 3px solid rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}


@media (max-width: 1100px) {
    .intro-text-1 {
        font-size: calc(82vw/var(--mainWidth));
    }
    .intro-text-1 span:nth-of-type(1) {
        margin-bottom: calc(50vw/var(--mainWidth));
    }
    .intro-text-1 span:nth-of-type(3) {
        font-size: calc(237vw/var(--mainWidth));
        line-height: 1.1;
    }
    .intro-text-2 {
        width: calc(326vw/var(--mainWidth));
        height: calc(81vw/var(--mainWidth));
        font-size: calc(53vw/var(--mainWidth));
        border-radius: calc(41vw/var(--mainWidth)); 
        margin-top: calc(70vw/var(--mainWidth));
    }
}
    .intro_wrap {
        position: relative;
    }
    .intro_logo {
        position: absolute;
        right: calc(86vw/var(--mainWidth));
        top: calc(38vw/var(--mainWidth));
        width: calc(258vw/var(--mainWidth));
    }
    .intro_logo img {
        width: 100%;
    }
    .main-row {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin: 0 auto;
        width: 100%;
    }
    .main-col > a {
        width: 100%;
        height: calc(456vw/var(--mainWidth));
        display: flex;
        align-items: center;
        gap: calc(40vw/var(--mainWidth));
        position: relative;
    }
    .main-col.upper {
        background: url('/img/intro/bg-clinic.png?ver=260403') no-repeat left top calc(-200vw/var(--mainWidth));
        background-size: calc(800vw/var(--mainWidth)) auto;
        border-bottom: 2px solid var(--color-black);
    }
    .main-col.upper > a {
        justify-content: flex-end;
        padding-right: calc(82vw/var(--mainWidth));
    }
    .main-col.lower {
        background: url('/img/intro/bg-spm.png?ver=260403') no-repeat right calc(-200vw/var(--mainWidth)) top calc(-250vw/var(--mainWidth));
        background-size: calc(815vw/var(--mainWidth)) auto;
        justify-content: flex-start;
    }
    .main-col.lower > a {
        justify-content: flex-start;
        padding-left: calc(120vw/var(--mainWidth));
        gap: calc(90vw/var(--mainWidth));
    }
    .main-col.left > a, .main-col.right > a {
        display: block;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }
    .intro_title {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        letter-spacing: -.06em;
        line-height: 1;
        gap: calc(35vw/var(--mainWidth));
    }
    .intro_title svg {
        width: calc(50vw/var(--mainWidth));
        height: auto;
    }
    .intro_title div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        letter-spacing: -.06em;
        line-height: 1;
        gap: calc(35vw/var(--mainWidth));
    }
    .intro_title div strong {
        font-size: calc(130vw/var(--mainWidth));
        font-weight: 700;
        color: var(--color-black);
    }
    .intro_title div span {
        font-family: var(--subFont1);
        font-size: calc(70vw/var(--mainWidth));
        font-weight: 100;
        color: var(--color-black);
        letter-spacing: 0.1em;
    }
    .main-col.lower .intro_title div span {
        font-size: calc(43vw/var(--mainWidth));
    }
    
    .main-btn-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: calc(9vw/var(--mainWidth)) calc(8vw/var(--mainWidth));
        position: relative;
        z-index: 5;
    }

    .main-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(151vw/var(--mainWidth));
        height: calc(41vw/var(--mainWidth));
        background: var(--color-black);
        color: #fff;
        font-family: var(--mainFont);
        font-weight: 400;
        font-size: calc(22vw/var(--mainWidth));
        cursor: pointer;
        text-align: center;
        border: none;
        border-radius: calc(21vw/var(--mainWidth));
        transition: background 0.3s, color 0.3s;
        overflow: hidden;
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }
    .main-btn a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        color: var(--color-black);
    }
    .main-btn:hover {
        color: var(--color-black);
        background-color: #fff;
        border: 1px solid var(--color-black);
    }

    @media (max-width: 800px) {
        .intro_wrap {
            height: 100vh;
        }
        .intro_logo {
            width: calc(293vw/var(--mainWidth));
            right: auto;
            left: calc(100vw/var(--mainWidth));
            top: calc(50vw/var(--mainWidth));
        }
        .main-col > a {
            height: calc(964vw/var(--mainWidth));
            flex-direction: column;
            gap: calc(48vw/var(--mainWidth));
        }
        .main-col.upper {
            background: url('/img/intro/bg-clinic.png?ver=260403') no-repeat right calc(-320vw/var(--mainWidth)) top calc(-200vw/var(--mainWidth));
            background-size: calc(1007vw/var(--mainWidth)) auto;
        }
        .main-col.upper > a {
            justify-content: flex-start;
            align-items: flex-start;
            padding-right: 0;
            padding-left: calc(95vw/var(--mainWidth));
            padding-top: calc(150vw/var(--mainWidth));
        }
        .main-col.lower {
            background: url('/img/intro/bg-spm.png?ver=260403') no-repeat left calc(-175vw/var(--mainWidth)) top calc(-120vw/var(--mainWidth));
            background-size: calc(1080vw/var(--mainWidth)) auto;
            justify-content: flex-start;
        }
        .main-col.lower > a {
            justify-content: flex-end;
            align-items: flex-end;
            padding-left: 0;
            padding-right: calc(70vw/var(--mainWidth));
            gap: calc(45vw/var(--mainWidth));
            padding-bottom: calc(180vw/var(--mainWidth));
        }
        .main-col.left > a, .main-col.right > a {
            display: block;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        .intro_title {
            gap: calc(20vw/var(--mainWidth));
        }
        .intro_title svg {
            width: calc(43vw/var(--mainWidth));
        }
        .intro_title div {
            gap: calc(20vw/var(--mainWidth));
            flex-direction: column-reverse;
        }
        .intro_title div span {
            font-size: calc(30vw/var(--mainWidth));
        }
        .main-col.lower .intro_title div span {
            font-size: calc(30vw/var(--mainWidth));
        }
        
        .main-btn-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-gap: calc(9vw/var(--mainWidth)) calc(8vw/var(--mainWidth));
            position: relative;
            z-index: 5;
        }
        .main-col.lower .main-btn-grid {
            padding-right: calc(50vw/var(--mainWidth));
        }
    }