@charset "utf-8";

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 200;
    src: url(/fonts/Roboto/Roboto-Thin.woff2) format('woff2'), url(/fonts/Roboto/Roboto-Thin.woff) format('woff'), url(/fonts/Roboto/Roboto-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src: url(/fonts/Roboto/Roboto-Light.woff2) format('woff2'), url(/fonts/Roboto/Roboto-Light.woff) format('woff'), url(/fonts/Roboto/Roboto-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(/fonts/Roboto/Roboto-Regular.woff2) format('woff2'), url(/fonts/Roboto/Roboto-Regular.woff) format('woff'), url(/fonts/Roboto/Roboto-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    src: url(/fonts/Roboto/Roboto-Medium.woff2) format('woff2'), url(/fonts/Roboto/Roboto-Medium.woff) format('woff'), url(/fonts/Roboto/Roboto-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/Roboto/Roboto-Bold.woff2) format('woff2'), url(/fonts/Roboto/Roboto-Bold.woff) format('woff'), url(/fonts/Roboto/Roboto-Bold.otf) format('opentype');
}


@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}





/* 260813 리뉴얼 시작 */
/* 공통 */
/* 기본값 초기화 */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    overflow-x: clip;
}

html,
body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
}

body {
    font-family: 'Pretendard', sans-serif;
    line-height: 1.5;
    color: #111;
    background: #fff;
    overflow-x: clip;
}

ul,
ol,
li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
    border: 0;
    background: none;
}

button {
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

/* 공통 */
.in {
    position: relative;
    width: min(88.54vw, 1700px);
    height: 100%;
    margin: 0 auto;
}

.item-img {
    position: relative;
    overflow: hidden;
}

.item-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}



.sect-txt {
    text-align: center;
}

.sect-name {
    font-size: 20px;
    font-weight: 600;
}

.sect-title {
    margin-top: 45px;
    font-size: 56px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.05em;
}

.sect-des {
    margin-top: 25px;
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -.04em;
}




/* intro 전용 */
.intro-sect {
    position: relative;
    min-height: 720px;
    height: 100vh;
}

.intro-sect .in {
    position: relative;
    width: 1700px;
    height: 100%;
    margin: 0 auto;
}

.intro-title {
    position: absolute;
    left: 0;
    top: 122px;
    z-index: 2;
    margin: 0;
    font-size: 5rem;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.15rem;
}

.intro-title span {
    display: block;
}

.intro-sect .item-img {
    position: absolute;
    left: 21.47%;
    top: clamp(150px, 11.5vw, 255px);
    width: 54.41%;
    overflow: visible;
}


/* 인트로 포인트 컬러 */
.intro-title .intro-point {
    color: #3484ef;
    font-style: normal;
    font-weight: inherit;
}

/* 하단 문구 마지막 마침표 */
.intro-des .intro-dot {
    display: inline-block;

    margin-left: 2px;

    color: #3484ef;

    font-size: 1.35em;
    line-height: 0;
    font-weight: 800;

    vertical-align: -0.03em;
}

/* ==============================
   INTRO TYPING
============================== */

.intro-title .typing-line {
    display: block;
    min-height: 1.2em;

    /* JS 실행 전 원본 텍스트 숨김 */
    visibility: hidden;
}

.intro-title .typing-line.is-typing,
.intro-title .typing-line.is-complete {
    visibility: visible;
}

.intro-title .intro-point {
    color: #3484ef;
    font-style: normal;
    font-weight: inherit;
}


/* 현재 타이핑 중인 줄 커서 */
.intro-title .typing-line.is-typing::after {
    content: "";

    display: inline-block;

    width: 4px;
    height: .85em;

    margin-left: 8px;

    background: #3484ef;

    vertical-align: -.02em;

    animation: introCursor .65s infinite;
}

@keyframes introCursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }
}


/* 마지막 마침표 */
.intro-des .intro-dot {
    display: inline-block;

    margin-left: 2px;

    color: #3484ef;

    font-size: 1.35em;
    line-height: 0;
    font-weight: 800;

    vertical-align: -0.03em;
}


/* 처음에는 숨김 */
.intro-des-typing {
    opacity: 0;
    transform: translateX(40px);

    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.22, 1, .36, 1);
}

/* 타이핑 종료 후 등장 */
.intro-des-typing.is-show {
    opacity: 1;
    transform: translateX(0);
}

/* 의료진 이미지 */
.intro-sect .item-img img {
    display: block;
    width: 100%;
    height: auto;
}


/* 하단만 자연스럽게 흰색으로 페이드 */
.intro-sect .item-img::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;

    height: 22%;

    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .25) 30%,
            rgba(255, 255, 255, .65) 65%,
            #fff 100%);

    pointer-events: none;
}

.intro-des {
    position: absolute;
    right: 0;
    bottom: 100px;
    font-size: 4rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.1rem;
}



/* ==================================================
   진료과목 메뉴 리디자인 A안
   ================================================== */

.menu-sect {
    padding: 120px 0 160px;
    background: #fff;
}

.menu-title {
    position: relative;
    margin-bottom: 70px;
    text-align: center;
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -.04em;
}

/* 제목 하단 포인트 */
.menu-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 2px;
    margin: 20px auto 0;
    background: #111;
}

.menu-list {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 12px;
    overflow: visible;
}

.menu-item {
    position: relative;
    width: calc((100% - 24px) / 3);
    height: 540px;
    overflow: hidden;
    background: #111;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1),
        box-shadow .45s ease;
}



/* 이미지 */
.menu-bg {
    position: absolute;
    inset: 0;
}

.menu-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1),
        filter .5s ease;
}


/* 기존 단순 오버레이 교체 */
.menu-bg::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .08) 0%,
            rgba(0, 0, 0, .17) 42%,
            rgba(0, 0, 0, .50) 100%);

    mix-blend-mode: normal;

    transition: background .4s ease;
}


/* 텍스트 */
.menu-txt {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    padding: 0 25px;

    transform: translate(-50%, -50%);

    color: #fff;
    text-align: center;

    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}


/* 영문 */
.menu-txt span {
    display: block;

    font-size: 17px;
    line-height: 1.2;
    font-weight: 500;

    letter-spacing: .02em;

    opacity: .78;
}


/* 한글 타이틀 */
.menu-txt strong {
    display: block;

    margin-top: 12px;

    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;

    letter-spacing: -.055em;
}


/* 바로가기 버튼 */
.menu-txt em {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 130px;
    height: 46px;

    margin-top: 32px;
    padding: 0 20px;

    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 30px;

    background: rgba(255, 255, 255, .06);

    color: #fff;

    font-size: 15px;
    line-height: 1;
    font-style: normal;
    font-weight: 500;

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    transition:
        color .3s ease,
        background .3s ease,
        border-color .3s ease,
        padding .3s ease;
}


/* 화살표 */
.menu-txt em::after {
    content: "→";

    margin-left: 8px;

    font-size: 17px;

    transition: transform .3s ease;
}


/* 카드 하단 포인트 */
.menu-item::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;

    width: 100%;
    height: 4px;

    transform: scaleX(.35);
    transform-origin: center;

    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* 교정 */
.menu-item:nth-child(1)::after {
    background: #3484ef;
}

/* 임플란트 */
.menu-item:nth-child(2)::after {
    background: #ffd400;
}

/* 심미 */
.menu-item:nth-child(3)::after {
    background: #3484ef;
}


/* ===============================
   HOVER
   =============================== */

.menu-item:hover {
    z-index: 5;

    transform: translateY(-10px);

    box-shadow:
        0 25px 55px rgba(0, 0, 0, .16);
}





/* 이미지 줌 */
.menu-item:hover .menu-bg img {
    transform: scale(1.07);
}


/* 오버레이 조금 진하게 */
.menu-item:hover .menu-bg::after {
    background:
        linear-gradient(to bottom,
            rgba(0, 0, 0, .10) 0%,
            rgba(0, 0, 0, .23) 40%,
            rgba(0, 0, 0, .58) 100%);
}


/* 텍스트 살짝 위 */
.menu-item:hover .menu-txt {
    transform: translate(-50%, calc(-50% - 7px));
}


/* 버튼 */
.menu-item:hover .menu-txt em {
    background: #fff;
    border-color: #fff;

    color: #111;
}


/* 화살표 이동 */
.menu-item:hover .menu-txt em::after {
    transform: translateX(4px);
}


/* 하단 포인트 확장 */
.menu-item:hover::after {
    transform: scaleX(1);
}



/* ==================================================
   SIDE QUICK MENU
================================================== */

.side-quick-menu {
    position: fixed;

    right: 28px;
    top: 50%;
    z-index: 100;

    display: flex;
    flex-direction: column;

    gap: 8px;

    transform:
        translateY(-50%) translateX(25px);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease,
        transform .45s cubic-bezier(.22, 1, .36, 1);
}


/* 메뉴 노출 */
.side-quick-menu.is-visible {
    transform:
        translateY(-50%) translateX(0);

    opacity: 1;
    visibility: visible;

    pointer-events: auto;
}


/* 개별 메뉴 */
.side-quick-item {
    position: relative;

    display: flex;
    align-items: center;

    width: 58px;
    height: 58px;

    overflow: hidden;

    padding: 0 18px;

    border: 1px solid rgba(14, 50, 108, .12);
    border-radius: 30px;

    background: rgba(255, 255, 255, .94);

    box-shadow:
        0 6px 22px rgba(17, 47, 91, .09);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transition:
        width .4s cubic-bezier(.22, 1, .36, 1),
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


/* 번호 */
.side-quick-num {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 22px;

    color: #0e326c;

    font-size: 12px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: -.02em;
}


/* 텍스트 */
.side-quick-txt {
    display: flex;
    flex-direction: column;

    flex-shrink: 0;

    margin-left: 15px;

    opacity: 0;

    transform: translateX(5px);

    transition:
        opacity .25s ease,
        transform .3s ease;
}


.side-quick-txt small {
    color: #7790b2;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;

    letter-spacing: .02em;
}


.side-quick-txt strong {
    margin-top: 4px;

    color: #17243a;

    font-size: 15px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: -.04em;

    white-space: nowrap;
}


/* hover */
.side-quick-item:hover {
    width: 150px;

    border-color: rgba(52, 132, 239, .25);

    box-shadow:
        0 10px 28px rgba(17, 58, 112, .14);
}


.side-quick-item:hover .side-quick-txt {
    opacity: 1;

    transform: translateX(0);
}


/* 현재 보고 있는 진료과목 */
.side-quick-item.active {
    width: 150px;

    background:
        linear-gradient(135deg,
            #0e326c 0%,
            #1757aa 100%);

    border-color: transparent;

    box-shadow:
        0 12px 30px rgba(14, 50, 108, .25);
}


.side-quick-item.active .side-quick-num {
    color: #8fc3ff;
}


.side-quick-item.active .side-quick-txt {
    opacity: 1;

    transform: translateX(0);
}


.side-quick-item.active .side-quick-txt small {
    color: rgba(255, 255, 255, .6);
}


.side-quick-item.active .side-quick-txt strong {
    color: #fff;
}



/* 치아교정 시작 */
/* 교정전후1 시작 */
/* orthodontics 시작 */
.ortho {
    position: relative;
}

.ortho-intro-sect {
    padding: 50px 0 150px;
}

/* 전후 슬라이드 */
.ortho-ba-wrap {
    position: relative;
    width: 1220px;
    margin: 75px auto 0;
}

.ortho-ba-swiper {
    width: 1080px;
    margin: 0 auto;
}

.ortho-ba-swiper .item-img {
    width: 100%;
}

.ortho-ba-swiper .item-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* 좌우 버튼 */
.ortho-ba-prev,
.ortho-ba-next {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 42px;
    height: 42px;

    border-top: 1px solid #555;
    border-right: 1px solid #555;

    cursor: pointer;
}

.ortho-ba-prev {
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
}

.ortho-ba-next {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
}


/* 페이지네이션 */
.ortho-ba-pagination {
    position: relative;
    bottom: auto !important;
    margin-top: 30px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ortho-ba-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;

    margin: 0 6px !important;

    background: #666;
    opacity: 1;
}

.ortho-ba-pagination .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;

    background: #3484ef;
}


/* 교정장치 시작 */
/* braces */
.braces-sect {
    padding: 140px 0 160px;
}

.braces-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 45px;
    width: 1240px;
    margin: 80px auto 0;
}

.braces-list .item {
    position: relative;
    height: 370px;
    padding: 32px 45px;
    background: #f7f7f7;
    border-radius: 15px;
}

.braces-list .item-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 88px;
    height: 32px;
    padding: 0 16px;

    border-radius: 30px;

    background: #3b82e8;
    color: #fff;

    font-size: 14px;
    font-weight: 700;
}

.braces-list .item h3 {
    margin-top: 26px;

    font-size: 28px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.05em;
}

.braces-list .item p {
    margin-top: 10px;
    color: #555;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -.03em;
    word-break: keep-all;
}

.braces-list .item .item-img {
    position: absolute;
    left: 50%;
    bottom: 25px;

    width: 65%;
    height: 145px;

    transform: translateX(-50%);

    overflow: visible;
}

.braces-list .item .item-img img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* 스캔장비 시작 */
/* scan */
.scan-sect {
    padding: 100px 0 0;
    background-image: url('/img/landding/bg1.png');
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.scan-visual {
    position: relative;
    height: 650px;
    margin: 40px auto 0;
}


/* 장비 공통 */
.scan-item {
    position: absolute;
    z-index: 1;

    cursor: pointer;

    opacity: .28;
    filter: grayscale(.7) brightness(1.15) blur(.5px);

    transition:
        opacity .5s ease,
        filter .5s ease,
        transform .5s ease;
}

.scan-item.active {
    z-index: 5;

    opacity: 1;
    filter: none;

    transform: scale(1.03);
}


/* 이미지 */
.scan-item .item-img {
    overflow: visible;
}

.scan-item .item-img img {
    width: 100%;
    height: auto;
}


/* 설명 */
.scan-info {
    position: absolute;
    left: 50%;
    top: -40px;

    transform: translate(-50%, 10px);

    width: 260px;
    padding: 16px 20px;

    background: rgba(255, 255, 255, .88);
    opacity: 0;
    visibility: hidden;

    transition: .4s ease;
    border-radius: 10px;
    word-break: keep-all;
    border: 1px solid #bdd8ff;
    box-shadow:
        0 0 12px rgba(124, 180, 255, .45),
        0 0 28px rgba(124, 180, 255, .28),
        0 0 55px rgba(124, 180, 255, .16);
}

/* 01 iTero Lumina */
.scan-item-01 .scan-info {
    left: 35%;
    top: -55px;
}

/* 02 TRIOS 3 */
.scan-item-02 .scan-info {
    left: 135%;
    top: 20px;
}

/* 03 PrimeScan */
.scan-item-03 .scan-info {
    left: 60%;
    top: -75px;
}

/* 04 3D Morpheus */
.scan-item-04 .scan-info {
    left: 5%;
    top: 45px;
}

.scan-item.active .scan-info {
    opacity: 1;
    visibility: visible;

    transform: translate(-50%, 0);
}

.scan-info strong {
    display: block;

    font-size: 18px;
    font-weight: 700;
    color: #2768c9;
}

.scan-info p {
    margin-top: 7px;

    font-size: 13px;
    line-height: 1.5;
    color: #555;
}


/* 시안에 맞춰 위치 조정 */
.scan-item-01 {
    left: 4%;
    bottom: 15%;
    width: min(22.86%, 320px);
}

.scan-item-02 {
    left: 27%;
    top: 3%;
    width: min(20.29%, 284px);
}

.scan-item-03 {
    left: 48%;
    bottom: 18%;
    width: min(21.5%, 301px);
}

.scan-item-04 {
    right: 3%;
    top: 3%;
    width: min(28.79%, 403px);
}

/* 교정비용 시작 */
/* 교정 비용 */
.price-sect {
    padding: 140px 0 130px;
    background: #f8faff;
}


/* 가격 리스트 */
.price-sect .price-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 0 24px;

    width: 1220px;
    margin: 85px auto 0;
}


/* 각 컬럼 */
.price-sect .price-col {
    display: flex;
    flex-direction: column;

    gap: 14px;

    border-top: 0;
}


/* 가격 아이템 */
.price-sect .price-col .item {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    height: 120px;

    padding: 0 34px 0 40px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fbfdff 100%);

    border: 1px solid rgba(14, 50, 108, .09);
    border-radius: 16px;

    box-shadow:
        0 7px 24px rgba(20, 55, 105, .035);

    transition:
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


/* 왼쪽 블루 포인트 */
.price-sect .price-col .item::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 4px;
    height: 34px;

    transform: translateY(-50%);

    border-radius: 0 5px 5px 0;

    background: #3484ef;

    opacity: .65;

    transition:
        height .35s ease,
        opacity .35s ease;
}


/* 항목명 */
.price-sect .price-col .item>strong {
    color: #17243a;

    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.05em;

    transition: color .3s ease;
}


/* 가격 영역 */
.price-sect .price-col .price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


/* 가격 */
.price-sect .price-col .price b {
    color: #0e326c;

    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.05em;
}


/* 가격 부가설명 */
.price-sect .price-col .price span {
    display: inline-flex;
    align-items: center;

    margin-top: 7px;

    padding: 3px 10px;

    border-radius: 20px;

    background: #edf4ff;

    color: #58739b;

    font-size: 13px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -.02em;
}


/* hover
   item 자체 transform 사용하지 않음
   → AOS fade-left / fade-right와 충돌 방지
*/
.price-sect .price-col .item:hover {
    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #f2f7ff 100%);

    border-color: rgba(52, 132, 239, .25);

    box-shadow:
        0 12px 32px rgba(32, 88, 160, .08);
}


.price-sect .price-col .item:hover::before {
    height: 58px;
    opacity: 1;
}


.price-sect .price-col .item:hover>strong {
    color: #175dbd;
}

/* 가격 안내문 */
.price-notice {
    display: flex;
    justify-content: center;

    margin-top: 38px;

    text-align: center;
}


/* 안내 박스 */
.price-notice-mark {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 13px 22px 13px 48px;

    background: rgba(237, 244, 255, .75);

    border: 1px solid rgba(52, 132, 239, .13);
    border-radius: 30px;

    color: #536a8c;

    font-size: 15px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -.025em;
}


/* 왼쪽 info 아이콘 */
.price-notice-mark::before {
    content: "i";

    position: absolute;

    left: 17px;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    transform: translateY(-50%);

    border-radius: 50%;

    background: #3484ef;

    color: #fff;

    font-family: Arial, sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
}

/* 치료전후 시작 */
/* ==================================================
   ORTHO BEFORE & AFTER
================================================== */

.ortho-bna-sect {
    position: relative;
    padding: 140px 0 150px;
    background: #fff;
    color: #111;
    overflow: hidden;
}

.ortho-bna-sect .ba-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    margin-top: 65px;
}

.ortho-bna-sect .ba-menu button {
    position: relative;
    padding: 0 0 12px;
    border: 0;
    background: none;
    color: #333;
    font-size: 21px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;
    cursor: pointer;
    transition: color .3s ease, font-weight .3s ease;
}

.ortho-bna-sect .ba-menu button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #3484ef;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.ortho-bna-sect .ba-menu button:hover,
.ortho-bna-sect .ba-menu button.active {
    color: #111;
}

.ortho-bna-sect .ba-menu button.active {
    font-weight: 700;
}

.ortho-bna-sect .ba-menu button.active::after {
    transform: scaleX(1);
}

.ortho-bna-sect .ba-wrap {
    position: relative;
    width: 1220px;
    margin: 45px auto 0;
}

.ortho-bna-sect .ba-swiper {
    width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
}

.ortho-bna-sect .ba-swiper.is-changing {
    opacity: 0;
    transform: translateY(7px);
}

.ortho-bna-sect .ba-swiper .swiper-slide,
.ortho-bna-sect .ba-swiper .item-img {
    width: 100%;
}

.ortho-bna-sect .ba-swiper .item-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.ortho-bna-sect .ba-prev,
.ortho-bna-sect .ba-next {
    position: absolute;
    top: 50%;
    z-index: 5;
    width: 42px;
    height: 42px;
    border-top: 1px solid #555;
    border-right: 1px solid #555;
    cursor: pointer;
    transition: border-color .3s ease, opacity .3s ease;
}

.ortho-bna-sect .ba-prev {
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
}

.ortho-bna-sect .ba-next {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
}

.ortho-bna-sect .ba-prev:hover,
.ortho-bna-sect .ba-next:hover {
    border-color: #111;
}

.ortho-bna-sect .ba-pagination {
    position: relative;
    bottom: auto !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
}

.ortho-bna-sect .ba-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
    background: #777;
    opacity: 1;
    transition: width .25s ease, height .25s ease, background .25s ease;
}

.ortho-bna-sect .ba-pagination .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;
    background: #3484ef;
}


/* ==================================================
   의료진
================================================== */

.dentists-sect {
    padding: 140px 0 160px;
    background: #fff;
    overflow: hidden;
}


.dentists-slide {
    margin-top: 70px;
}


.dentists-swiper {
    width: 100%;

    padding: 32px 0 55px;

    overflow: visible;

    cursor: grab;

    user-select: none;
    -webkit-user-select: none;
}


.dentists-swiper:active {
    cursor: grabbing;
}


.dentists-swiper img {
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* ==================================================
   의료진 슬라이드
================================================== */

.dentists-swiper .swiper-slide {
    width: 310px;

    transform: scale(.92);

    transition:
        transform .55s ease;

    cursor: pointer;
}


/* 양옆 */
.dentists-swiper .swiper-slide-prev,
.dentists-swiper .swiper-slide-next {
    transform: scale(.96);
}


/* 중앙 활성 */
.dentists-swiper .swiper-slide-active {
    z-index: 3;

    transform: scale(1);
}


/* ==================================================
   의료진 카드
================================================== */

.dentists-swiper .item {
    position: relative;

    overflow: hidden;

    background:
        linear-gradient(180deg,
            #f5f8fc 0%,
            #ffffff 100%);

    border: 1px solid rgba(14, 50, 108, .07);
    border-radius: 26px;

    box-shadow:
        0 8px 24px rgba(22, 49, 92, .03);

    transition:
        background .55s ease,
        border-color .55s ease,
        box-shadow .55s ease;
}


/* 상단 블루 포인트 */
.dentists-swiper .item::before {
    content: "";

    position: absolute;

    left: 50%;
    top: 0;
    z-index: 5;

    width: 50px;
    height: 3px;

    transform: translateX(-50%);

    border-radius: 0 0 4px 4px;

    background: #3484ef;

    opacity: 0;

    transition:
        width .55s ease,
        opacity .55s ease;
}


/* 중앙 카드 강조 */
.dentists-swiper .swiper-slide-active .item {
    background: #fff;
    /* linear-gradient(
            180deg,
            #f4f8ff 0%,
            #ffffff 100%
        ); */

    border-color: rgba(52, 132, 239, .22);

    box-shadow:
        0 18px 42px rgba(22, 49, 92, .13);
}


.dentists-swiper .swiper-slide-active .item::before {
    width: 72px;
    opacity: 1;
}


/* ==================================================
   의료진 이미지
================================================== */

.dentists-swiper .doctor-img {
    position: relative;

    width: 100%;

    overflow: hidden;
}


/* 비활성 의료진 */
.dentists-swiper .doctor-img img {
    display: block;

    width: 100%;
    height: auto;

    opacity: .42;

    filter: saturate(.82);

    transition:
        opacity .55s ease,
        filter .55s ease;
}


/* 중앙만 선명 */
.dentists-swiper .swiper-slide-active .doctor-img img {
    opacity: 1;

    filter: none;
}


/* 인물 하단 자연스러운 화이트 그라데이션 */
.dentists-swiper .doctor-img::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    height: 31%;

    background:
        linear-gradient(to bottom,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, .18) 28%,
            rgba(255, 255, 255, .58) 62%,
            rgba(255, 255, 255, .9) 84%,
            #fff 100%);

    pointer-events: none;
}


/* ==================================================
   의료진 이름
================================================== */

.doctor-txt {
    position: absolute;

    left: 50%;
    bottom: 22px;

    z-index: 3;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 126px;

    padding: 10px 17px;

    transform: translateX(-50%);

    background: rgba(255, 255, 255, .88);

    border: 1px solid rgba(14, 50, 108, .09);
    border-radius: 50px;

    box-shadow:
        0 5px 18px rgba(20, 50, 90, .05);

    color: #24364f;

    text-align: center;
    white-space: nowrap;

    opacity: .42;

    transition:
        opacity .55s ease,
        color .55s ease,
        background .55s ease,
        border-color .55s ease,
        box-shadow .55s ease;
}


.doctor-txt div {
    display: block;

    font-size: 18px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.04em;
}


/* 중앙 활성 이름 */
.dentists-swiper .swiper-slide-active .doctor-txt {
    opacity: 1;

    background: #0e326c;

    border-color: #0e326c;

    color: #fff;

    box-shadow:
        0 8px 22px rgba(14, 50, 108, .18);
}

/* review */
.review-sect {
    padding: 140px 0 120px;
    overflow: hidden;
}

.review-slide {
    margin-top: 75px;
}

.review-swiper {
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}

.review-swiper:active {
    cursor: grabbing;
}

.review-swiper img {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.review-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

.review-swiper .swiper-slide {
    width: 370px;
}

.review-swiper .item {
    min-height: 260px;
    padding: 35px 35px 40px;
    border-radius: 22px;
}

.review-swiper .item.cream {
    background: #fff7e9;
}

.review-swiper .item.blue {
    background: #dceefa;
}

.review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #eee;
}

.review-star {
    color: #ffb400;
    font-size: 20px;
    letter-spacing: 1px;
}

.review-txt {
    margin-top: 35px;

    font-size: 18px;
    line-height: 1.55;
    font-weight: 500;
    letter-spacing: -.04em;
    word-break: keep-all;
}

.review-notice {
    margin-top: 25px;

    text-align: center;
    color: #aaa;
    font-size: 14px;
}


/* 임플란트 시작 */
.imp {
    position: relative;
}


/* 임플란트 인트로 */
.imp-intro-sect {
    padding: 120px 0 100px;
    background: #0a2961;
    color: #fff;
}

.imp-intro-sect .sect-name,
.imp-intro-sect .sect-title,
.imp-intro-sect .sect-des {
    color: #fff;
}


/* 임플란트 전후 슬라이드 */
.imp-ba-wrap {
    position: relative;
    width: 1500px;
    margin: 80px auto 0;
}

.imp-ba-swiper {
    width: 1320px;
    margin: 0 auto;
}

.imp-ba-swiper .item-img {
    width: 100%;
}

.imp-ba-swiper .item-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* 좌우 버튼 */
.imp-ba-prev,
.imp-ba-next {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 42px;
    height: 42px;

    border-top: 1px solid rgba(255, 255, 255, .7);
    border-right: 1px solid rgba(255, 255, 255, .7);

    cursor: pointer;
}

.imp-ba-prev {
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
}

.imp-ba-next {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
}


/* 페이지네이션 */
.imp-ba-pagination {
    position: relative;
    bottom: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 35px;
}

.imp-ba-pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;

    margin: 0 7px !important;

    background: rgba(255, 255, 255, .35);
    opacity: 1;
}

.imp-ba-pagination .swiper-pagination-bullet-active {
    width: 15px;
    height: 15px;

    background: #fff;
}




/* 맞춤형 임플란트 */
/* 맞춤임플란트 전체 */
/* 맞춤형 임플란트 */
.imp-custom-sect {
    position: relative;

    background: linear-gradient(to bottom,
            #0a2961 0%,
            #12366f 50%,
            #002663 100%);

    overflow: clip;
}


/* 부모 그라데이션이 보이게 */
.imp-custom-sticky {
    position: sticky;
    top: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;
    background: transparent;
}


.imp-custom-detail {
    position: relative;
    z-index: 2;

    padding: 140px 0 180px;

    background: transparent;
    color: #fff;
}


/* 다음 3D 섹션까지 자연스럽게 연결 */
.imp-3d-sect {
    position: relative;
    padding: 130px 0 150px;

    background: #002663;

    color: #fff;
    overflow: hidden;
}


/* 스크롤 애니메이션 길이 */
.imp-custom-scroll {
    position: relative;
    height: 480vh;
}





/* 원 전체 영역 */
.imp-custom-circle-wrap {
    position: absolute;
    left: 50%;
    top: 58%;

    width: 1500px;
    height: 520px;

    transform: translate(-50%, -50%);
}


.imp-custom-title {
    position: absolute;
    left: 50%;
    top: -260px;
    z-index: 20;

    width: 100%;

    transform:
        translateX(-50%) translateY(var(--title-y, 35vh));

    text-align: center;

    font-size: 64px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: -.06em;

    will-change: transform;
}


/* 한 줄씩 개별 색 채우기 */
.imp-custom-title .title-line {
    display: block;

    width: fit-content;
    margin: 0 auto;

    color: transparent;

    background-repeat: no-repeat;

    -webkit-background-clip: text;
    background-clip: text;
}


/* 첫 번째 줄 */
.imp-custom-title .line-01 {
    background-image: linear-gradient(to right,
            #ffd400 0%,
            #ffd400 var(--line1-fill, 0%),
            #3a5586 var(--line1-fill, 0%),
            #3a5586 100%);
}


/* 두 번째 줄 */
.imp-custom-title .line-02 {
    background-image: linear-gradient(to right,
            #ffd400 0%,
            #ffd400 var(--line2-fill, 0%),
            #3a5586 var(--line2-fill, 0%),
            #3a5586 100%);
}


/* 원 공통 */
.imp-custom-circle {
    position: absolute;
    left: 50%;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 430px;
    height: 430px;

    border: 1px solid #ffd400;
    border-radius: 50%;

    background: rgba(255,
            212,
            0,
            var(--circle-fill, .05));

    color: #ffd400;
    text-align: center;

    opacity: var(--circle-opacity, 0);

    transform:
        translate(-50%, -50%) translateX(var(--circle-x)) scale(var(--circle-scale, 1));

    will-change: transform, opacity, background;
}


.circle-01 {
    --circle-x: -470px;
}

.circle-02 {
    --circle-x: 0px;
}

.circle-03 {
    --circle-x: 470px;
}


/* 원 안 텍스트 */
.circle-txt {
    opacity: var(--circle-txt-opacity, 1);
}

.circle-txt strong {
    display: block;
    font-size: 32px;
    line-height: 1.3;
    font-weight: 700;
}

.circle-txt p {
    margin-top: 20px;
    font-size: 16px;
    line-height: 1.6;
}


/* 최종 노란 원 */
.imp-custom-result {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 15;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background: #ffd400;
    color: #0f3270;

    text-align: center;

    opacity: var(--result-opacity, 0);

    transform:
        translate(-50%, -50%) scale(var(--result-scale, .7));

    will-change: opacity, transform;
}

.imp-custom-result strong {
    font-size: 38px;
    line-height: 1.4;
    font-weight: 800;
}


/* ==================================================
   IMP CUSTOM DETAIL
================================================== */



/* 제목 */
.imp-custom-detail .sect-name,
.imp-custom-detail .sect-title,
.imp-custom-detail .sect-des {
    color: #fff;
}


/* 전체 비주얼 영역 */
.imp-custom-detail-wrap {
    position: relative;

    width: 1360px;
    height: 720px;

    margin: 80px auto 0;
}


/* ==================================================
   중앙 임플란트
================================================== */

.imp-custom-model {
    position: absolute;
    left: 50%;
    top: 20px;
    z-index: 5;

    width: 400px;
    height: 660px;

    transform: translateX(-50%);
}


/* 각 임플란트 파트 */
.imp-custom-part {
    position: absolute;
    left: 50%;

    display: block;

    padding: 0;
    border: 0;
    background: none;

    transform: translateX(-50%);

    cursor: pointer;

    z-index: 5;

    opacity: .3;
    transition: opacity .3s ease;
}


/* hover 시 100% */
.imp-custom-part:hover,
.imp-custom-part:focus {
    opacity: 1;
}


/* 이미지 강조 */
.imp-custom-part:hover img,
.imp-custom-part:focus img {
    filter: brightness(1.08);
    transform: scale(1.025);
}


/* 이미지 공통 */
.imp-custom-part .item-img {
    width: 100%;
    height: 100%;

    overflow: visible;
}

.imp-custom-part .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    transition:
        filter .3s ease,
        transform .3s ease;
}


/* 크라운 */
.imp-custom-part-01 {
    top: 0;

    width: 250px;
    height: 230px;
    z-index: 3;
}


/* 지대주 */
.imp-custom-part-02 {
    top: 205px;

    width: 155px;
    height: 210px;
    z-index: 2;
}


/* 픽스처 */
.imp-custom-part-03 {
    top: 380px;

    width: 120px;
    height: 265px;
    z-index: 1;
}


/* hover 시 파트 살짝 강조 */
.imp-custom-part:hover img,
.imp-custom-part:focus img {
    filter: brightness(1.08);
    transform: scale(1.025);
}


/* ==================================================
   번호 + 이름
================================================== */

.imp-custom-point {
    position: absolute;
    z-index: 10;

    display: flex;
    align-items: center;
    gap: 14px;

    pointer-events: auto;
    cursor: pointer;
}


/* 번호 */
.imp-custom-point .point-num {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 48px;
    height: 48px;

    border: 2px solid #86a2d4;
    border-radius: 50%;

    background: #a6bdea;
    color: #0f3270;

    font-size: 16px;
    line-height: 1;
    font-weight: 800;

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* 이름 */
.imp-custom-point strong {
    color: #829cc9;

    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -.04em;

    word-break: keep-all;

    transition: color .3s ease;
}


/* 01 */
.imp-custom-point-01 {
    left: -85px;
    top: 95px;

    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* 02 */
.imp-custom-point-02 {
    left: 325px;
    top: 285px;
}


/* 03 */
.imp-custom-point-03 {
    left: -80px;
    top: 455px;

    flex-direction: column;
    align-items: center;

    text-align: center;
}


/* ==================================================
   활성 포인트
================================================== */

.imp-custom-detail.is-01 .imp-custom-point-01 .point-num,

.imp-custom-detail.is-02 .imp-custom-point-02 .point-num,

.imp-custom-detail.is-03 .imp-custom-point-03 .point-num {
    background: #ffd400;
    border-color: #ffd400;

    color: #0f3270;

    transform: scale(1.08);

    box-shadow:
        0 0 12px rgba(255, 212, 0, .5),
        0 0 26px rgba(255, 212, 0, .25);
}


.imp-custom-detail.is-01 .imp-custom-point-01 strong,

.imp-custom-detail.is-02 .imp-custom-point-02 strong,

.imp-custom-detail.is-03 .imp-custom-point-03 strong {
    color: #ffd400;
}


/* ==================================================
   설명 카드
================================================== */

.imp-custom-info {
    position: absolute;
    z-index: 3;

    width: 330px;

    overflow: hidden;

    border-radius: 12px;

    background: #fff;

    opacity: 0;
    visibility: hidden;

    transform: translateY(18px);

    pointer-events: none;

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease;
}


/* 카드 이미지 */
.imp-custom-info .item-img {
    width: 100%;
    height: 190px;

    overflow: hidden;
}

.imp-custom-info .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* 카드 텍스트 */
.imp-custom-info .info-txt {
    padding: 24px 26px 27px;

    background: #fff;
}


/* 제목 */
.imp-custom-info .info-txt strong {
    display: block;

    color: #222;

    font-size: 20px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: -.04em;

    word-break: keep-all;
}


/* 설명 */
.imp-custom-info .info-txt p {
    margin-top: 14px;

    color: #555;

    font-size: 13px;
    line-height: 1.65;
    font-weight: 400;
    letter-spacing: -.025em;

    word-break: keep-all;
}


/* 01 카드 */
.imp-custom-info-01 {
    left: 40px;
    top: 80px;
}


/* 02 카드 */
.imp-custom-info-02 {
    right: 20px;
    top: 260px;
}


/* 03 카드 */
.imp-custom-info-03 {
    left: 40px;
    bottom: 0;
}


/* ==================================================
   해당 카드만 표시
================================================== */

.imp-custom-detail.is-01 .imp-custom-info-01,

.imp-custom-detail.is-02 .imp-custom-info-02,

.imp-custom-detail.is-03 .imp-custom-info-03 {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* autoplay / hover 활성 시 중앙 파트도 ON */
.imp-custom-detail.is-01 .imp-custom-part-01,
.imp-custom-detail.is-02 .imp-custom-part-02,
.imp-custom-detail.is-03 .imp-custom-part-03 {
    opacity: 1;
}

.imp-custom-detail.is-01 .imp-custom-part-01 img,
.imp-custom-detail.is-02 .imp-custom-part-02 img,
.imp-custom-detail.is-03 .imp-custom-part-03 img {
    filter: brightness(1.08);
    transform: scale(1.025);
}


/* 중앙 임플란트 위 포인트 원 */
.imp-custom-part::after {
    content: "";
    position: absolute;
    z-index: 10;

    width: 18px;
    height: 18px;

    border-radius: 50%;

    background: #8fa9d7;
    border: 3px solid rgba(255, 255, 255, .22);

    box-shadow: 0 0 0 4px rgba(143, 169, 215, .12);

    transition:
        background .3s ease,
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease;
}


/* 크라운 포인트 위치 */
.imp-custom-part-01::after {
    left: 50%;
    top: 42%;

    transform: translate(-50%, -50%);
}


/* 지대주 포인트 위치 */
.imp-custom-part-02::after {
    left: 50%;
    top: 43%;

    transform: translate(-50%, -50%);
}


/* 임플란트 포인트 위치 */
.imp-custom-part-03::after {
    left: 50%;
    top: 38%;

    transform: translate(-50%, -50%);
}


/* autoplay / hover 활성 시 노란색 ON */
.imp-custom-detail.is-01 .imp-custom-part-01::after,
.imp-custom-detail.is-02 .imp-custom-part-02::after,
.imp-custom-detail.is-03 .imp-custom-part-03::after {
    background: #ffd400;
    border-color: rgba(255, 230, 90, .65);

    box-shadow:
        0 0 0 5px rgba(255, 212, 0, .15),
        0 0 18px rgba(255, 212, 0, .8);

    transform: translate(-50%, -50%) scale(1.15);
}




/* ==================================================
   IMP 3D DIGITAL
================================================== */



/* 제목 */
.imp-3d-sect .sect-name,
.imp-3d-sect .sect-title,
.imp-3d-sect .sect-des {
    color: #fff;
}


/* ==================================================
   전체 비주얼 영역
================================================== */

.imp-3d-wrap {
    position: relative;

    width: min(88.54vw, 1500px);
    height: 760px;

    margin: 55px auto 0;
}


/* ==================================================
   중앙 3D 비주얼
================================================== */

.imp-3d-visual {
    position: absolute;
    left: 50%;
    top: 40px;
    z-index: 5;

    width: 900px;
    height: 700px;

    transform: translateX(-50%);
}


/* 중앙 이미지 */
.imp-3d-bg {
    position: absolute;
    left: 50%;
    top: 57%;
    z-index: 3;

    width: 780px;
    height: 600px;

    transform: translate(-50%, -50%);

    overflow: visible;
}

/* 중앙 3D 이미지 앞쪽 원형 블러 */
.imp-3d-bg::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 54%;
    z-index: 2;

    width: 105%;
    height: 82%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: radial-gradient(ellipse at center,
            rgba(93, 196, 255, .20) 0%,
            rgba(57, 160, 255, .15) 30%,
            rgba(31, 106, 215, .08) 52%,
            rgba(0, 38, 100, 0) 75%);

    filter: blur(38px);
    mix-blend-mode: screen;

    pointer-events: none;
}


/* 실제 이미지보다 블러가 위에 오도록 */
.imp-3d-bg img {
    position: relative;
    z-index: 1;
}

.imp-3d-bg img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* ==================================================
   중앙 이미지 주변 원형 라인
================================================== */

/* 중앙 3D 이미지 전체를 감싸는 희미한 원형 라인 */
.imp-3d-ring {
    position: absolute;
    left: 50%;
    top: 65%;
    z-index: 1;

    width: 900px;
    height: 900px;

    transform: translate(-50%, -50%);

    border: 4px solid rgba(55, 125, 255, .09);
    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(55, 125, 255, .08),
        0 0 30px rgba(55, 125, 255, .05);

    filter: blur(2px);

    pointer-events: none;
}


/* ==================================================
   01 ~ 05 포인트
================================================== */

.imp-3d-point {
    position: absolute;
    z-index: 15;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0;

    border: 0;
    background: none;

    text-align: center;
    cursor: pointer;
}


/* 숫자 원 */
.imp-3d-point span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #819dcd;
    color: #12366f;

    font-size: 17px;
    line-height: 1;
    font-weight: 700;

    transition:
        background .35s ease,
        color .35s ease,
        box-shadow .35s ease,
        transform .35s ease;
}


/* 포인트 명칭 */
.imp-3d-point strong {
    display: block;

    margin-top: 9px;

    color: #fff;

    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.04em;

    white-space: nowrap;

    transition: color .35s ease;
}


/* ==================================================
   포인트 위치
================================================== */

/* 01 - 좌측 하단 */
.imp-3d-point.point-01 {
    left: 30px;
    top: 495px;
}


/* 02 - 좌측 중앙 */
.imp-3d-point.point-02 {
    left: 95px;
    top: 215px;
}


/* 03 - 중앙 상단 */
.imp-3d-point.point-03 {
    left: 50%;
    top: 55px;

    transform: translateX(-50%);
}


/* 04 - 우측 중앙 */
.imp-3d-point.point-04 {
    right: 95px;
    top: 215px;
}


/* 05 - 우측 하단 */
.imp-3d-point.point-05 {
    right: 10px;
    top: 485px;
}


/* ==================================================
   ACTIVE POINT
================================================== */

.imp-3d-sect.is-01 .imp-3d-point.point-01 span,
.imp-3d-sect.is-02 .imp-3d-point.point-02 span,
.imp-3d-sect.is-03 .imp-3d-point.point-03 span,
.imp-3d-sect.is-04 .imp-3d-point.point-04 span,
.imp-3d-sect.is-05 .imp-3d-point.point-05 span {
    background: #ffd400;
    color: #12366f;

    transform: scale(1.08);

    box-shadow:
        0 0 12px rgba(255, 212, 0, .45),
        0 0 28px rgba(255, 212, 0, .22);
}


.imp-3d-sect.is-01 .imp-3d-point.point-01 strong,
.imp-3d-sect.is-02 .imp-3d-point.point-02 strong,
.imp-3d-sect.is-03 .imp-3d-point.point-03 strong,
.imp-3d-sect.is-04 .imp-3d-point.point-04 strong,
.imp-3d-sect.is-05 .imp-3d-point.point-05 strong {
    color: #ffd400;
}


/* ==================================================
   설명 카드 전체 영역
================================================== */

.imp-3d-info-box {
    position: absolute;
    inset: 0;
    z-index: 20;

    width: 100%;
    height: 100%;

    pointer-events: none;
}


/* 카드 공통 */
.imp-3d-info-item {
    position: absolute;

    width: 290px;

    overflow: hidden;

    border-radius: 14px;
    background: #fff;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    pointer-events: none;

    transition:
        opacity .4s ease,
        visibility .4s ease,
        transform .4s ease;
}


/* 카드 이미지 */
.imp-3d-info-item .item-img {
    width: 100%;
    height: 170px;

    overflow: hidden;

    background: #aab7cc;
}

.imp-3d-info-item .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* 카드 텍스트 */
.imp-3d-info-item .info-txt {
    min-height: 115px;

    padding: 20px 25px 23px;

    background: #fff;
}


/* 카드 제목 */
.imp-3d-info-item .info-txt strong {
    display: block;

    color: #111;

    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.04em;
}


/* 카드 설명 */
.imp-3d-info-item .info-txt p {
    margin-top: 9px;

    color: #333;

    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -.025em;

    word-break: keep-all;
}


/* ==================================================
   설명 카드 위치
   캡처 기준
================================================== */

/* 01 - 좌측 하단 */
.imp-3d-info-item.info-01 {
    left: 0;
    top: 330px;
}


/* 02 - 좌측 중앙 */
.imp-3d-info-item.info-02 {
    left: 70px;
    top: 150px;
}


/* 03 - 좌측 상단 */
.imp-3d-info-item.info-03 {
    left: 350px;
    top: -60px;
}


/* 04 - 우측 중앙 */
.imp-3d-info-item.info-04 {
    right: 70px;
    top: 150px;
}


/* 05 - 우측 하단 */
.imp-3d-info-item.info-05 {
    right: 0;
    top: 330px;
}


/* ==================================================
   ACTIVE INFO
================================================== */

.imp-3d-sect.is-01 .imp-3d-info-item.info-01,
.imp-3d-sect.is-02 .imp-3d-info-item.info-02,
.imp-3d-sect.is-03 .imp-3d-info-item.info-03,
.imp-3d-sect.is-04 .imp-3d-info-item.info-04,
.imp-3d-sect.is-05 .imp-3d-info-item.info-05 {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}


/* ==================================================
   ALL-ON-X
================================================== */

.imp-allonx-sect {
    position: relative;

    padding: 140px 0 150px;

    background: #e7eef7;
    color: #12366f;
}


/* 제목 */
.imp-allonx-sect .sect-name {
    color: #12366f;
}

.imp-allonx-sect .sect-title {
    color: #12366f;
}

.imp-allonx-sect .sect-des {
    color: #64728b;
}


/* ==================================================
   메인 이미지
================================================== */

.imp-allonx-main {
    width: 820px;
    margin: 70px auto 0;
}


/* 임시 박스 */
.imp-allonx-main .item-img {
    width: 100%;
    height: 460px;

    border-radius: 20px;

    background: rgba(255, 255, 255, .65);

    box-shadow:
        inset 0 0 45px rgba(255, 255, 255, .7);

    overflow: hidden;
}


/* 실제 이미지 넣을 때 */
.imp-allonx-main .item-img img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==================================================
   중간 강조 문구
================================================== */

.imp-allonx-message {
    margin-top: 70px;

    text-align: center;

    color: #526a8e;

    font-size: 24px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -.04em;
}

.imp-allonx-message p+p {
    margin-top: 4px;
}

/* 올온엑스 강조문구 */
.allonx-em {
    display: inline;

    color: #123d78;
    font-weight: 800;
    line-height: 1.45;
}


/* 각각의 형광펜 문장 */
.allonx-em .line {
    display: inline-block;

    padding: 0 .06em;

    background-image:
        linear-gradient(rgba(255, 226, 74, .78),
            rgba(255, 226, 74, .78));

    background-repeat: no-repeat;

    /* 글자 하단에 살짝 걸치도록 */
    background-position: left 84%;

    /* 최초에는 가로폭 0 */
    background-size: 0% .58em;

    will-change: background-size;
}


/* 위쪽 강조문구 */
.imp-allonx-message.is-animated .line-01 {
    animation: allonxMarker .85s cubic-bezier(.22, 1, .36, 1) forwards;
}

.imp-allonx-message.is-animated .line-02 {
    animation: allonxMarker .7s cubic-bezier(.22, 1, .36, 1) .48s forwards;
}


@keyframes allonxMarker {

    from {
        background-size: 0% .58em;
    }

    to {
        background-size: 100% .58em;
    }

}

/* ==================================================
   장점 3개
================================================== */

.imp-allonx-list {
    display: flex;
    justify-content: center;
    gap: 55px;

    margin-top: 55px;
}


.imp-allonx-list .item {
    width: 200px;

    text-align: center;
}


/* 원형 이미지 영역 */
.imp-allonx-list .item .item-img {
    width: 180px;
    height: 180px;

    margin: 0 auto;

    border-radius: 50%;

    background: #fff;

    overflow: hidden;
}


/* 실제 이미지 넣을 때 */
.imp-allonx-list .item .item-img img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* 하단 설명 */
.imp-allonx-list .item p {
    margin-top: 25px;

    color: #38527b;

    font-size: 17px;
    line-height: 1.5;
    font-weight: 600;
    letter-spacing: -.04em;

    word-break: keep-all;
}

/* 아래 올온엑스 문구 - 1번째 */
.allonx-message-bottom.is-animated .marker-01 {
    animation:
        allonxMarker .75s cubic-bezier(.22, 1, .36, 1) forwards;
}


/* 2번째 */
.allonx-message-bottom.is-animated .marker-02 {
    animation:
        allonxMarker .7s cubic-bezier(.22, 1, .36, 1) .4s forwards;
}


/* 3번째 */
.allonx-message-bottom.is-animated .marker-03 {
    animation:
        allonxMarker .8s cubic-bezier(.22, 1, .36, 1) .8s forwards;
}






/* ==================================================
   IMPLANT PRICE
================================================== */

.imp-price-sect {
    position: relative;

    padding: 140px 0 170px;

    background: #12366f;
    color: #fff;

    overflow: hidden;
}


/* 제목 */
.imp-price-sect .sect-name,
.imp-price-sect .sect-title {
    color: #fff;
}


/* ==================================================
   좌측 큰 원형 라인
================================================== */

.imp-price-sect::before {
    content: "";

    position: absolute;
    left: -520px;
    top: 50%;

    width: 700px;
    height: 700px;

    transform: translateY(-50%);

    border: 3px solid rgba(57, 154, 255, .22);
    border-radius: 50%;

    box-shadow:
        0 0 22px rgba(57, 154, 255, .13),
        0 0 55px rgba(57, 154, 255, .08);

    pointer-events: none;
}


/* 원 바깥쪽 번짐 */
.imp-price-sect::after {
    content: "";

    position: absolute;
    left: -545px;
    top: 50%;

    width: 750px;
    height: 750px;

    transform: translateY(-50%);

    border: 1px solid rgba(57, 154, 255, .08);
    border-radius: 50%;

    filter: blur(2px);

    pointer-events: none;
}

/* ==================================================
   IMP PRICE - RING LIGHT ANIMATION
================================================== */

/* 안쪽 메인 링 */
.imp-price-sect::before {
    transform-origin: center;

    animation:
        impPriceRingGlow 4.8s ease-in-out infinite;

    will-change:
        transform,
        opacity,
        border-color,
        box-shadow;
}


/* 바깥쪽 빛 번짐 */
.imp-price-sect::after {
    transform-origin: center;

    animation:
        impPriceRingWave 4.8s ease-out infinite;

    will-change:
        transform,
        opacity;
}


/* 메인 원 : 빛이 생겼다가 다시 잦아드는 효과 */
@keyframes impPriceRingGlow {

    0%,
    100% {
        transform:
            translateY(-50%) scale(.96);

        opacity: .5;

        border-color:
            rgba(89, 169, 255, .18);

        box-shadow:
            0 0 12px rgba(89, 169, 255, .08),
            0 0 30px rgba(89, 169, 255, .05);
    }


    38% {
        transform:
            translateY(-50%) scale(1);

        opacity: 1;

        border-color:
            rgba(104, 181, 255, .5);

        box-shadow:
            0 0 18px rgba(92, 173, 255, .38),
            0 0 45px rgba(70, 158, 255, .25),
            0 0 90px rgba(55, 145, 255, .14);
    }


    58% {
        transform:
            translateY(-50%) scale(1.015);

        opacity: .82;

        border-color:
            rgba(89, 169, 255, .32);

        box-shadow:
            0 0 15px rgba(92, 173, 255, .22),
            0 0 38px rgba(70, 158, 255, .14),
            0 0 70px rgba(55, 145, 255, .08);
    }
}


/* 바깥 원 : 빛이 바깥으로 한 번 퍼졌다 사라짐 */
@keyframes impPriceRingWave {

    0% {
        transform:
            translateY(-50%) scale(.93);

        opacity: 0;
    }


    25% {
        opacity: .45;
    }


    58% {
        transform:
            translateY(-50%) scale(1.035);

        opacity: .18;
    }


    82%,
    100% {
        transform:
            translateY(-50%) scale(1.09);

        opacity: 0;
    }
}

/* ==================================================
   가격 영역
================================================== */

.imp-price-wrap {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 45px;

    width: 100%;
    margin-top: 80px;
}


/* 가격 이미지 카드 */
.imp-price-item {
    position: relative;

    width: 480px;
    height: 280px;

    overflow: hidden;

    background: #fff;
}


/* 이미지 영역 전체 사용 */
.imp-price-item .item-img {
    width: 100%;
    height: 100%;

    overflow: hidden;
}


/* 실제 이미지 */
.imp-price-item .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}




/* ==================================================
   IMPLANT BEFORE & AFTER
================================================== */

.imp-bna-sect {
    position: relative;

    padding: 140px 0 150px;

    background: #0e326c;
    color: #fff;

    overflow: hidden;
}


/* 제목 */
.imp-bna-sect .sect-name,
.imp-bna-sect .sect-title,
.imp-bna-sect .sect-des {
    color: #fff;
}


/* ==================================================
   메뉴
================================================== */

.imp-bna-sect .ba-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 55px;

    margin-top: 65px;
}


.imp-bna-sect .ba-menu button {
    position: relative;

    padding: 0 0 12px;

    border: 0;
    background: none;

    color: rgba(255, 255, 255, .65);

    font-size: 21px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;

    cursor: pointer;

    transition:
        color .3s ease,
        opacity .3s ease;
}


.imp-bna-sect .ba-menu button::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: 0;

    width: 100%;
    height: 3px;

    background: #72aaff;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform .3s ease;
}


.imp-bna-sect .ba-menu button:hover {
    color: #fff;
}


.imp-bna-sect .ba-menu button.active {
    color: #fff;
    font-weight: 700;
}


.imp-bna-sect .ba-menu button.active::after {
    transform: scaleX(1);
}


/* ==================================================
   슬라이드
================================================== */

.imp-bna-sect .ba-wrap {
    position: relative;

    width: 1320px;

    margin: 45px auto 0;
}


.imp-bna-sect .ba-swiper {
    width: 1160px;
    margin: 0 auto;

    overflow: hidden;
}


.imp-bna-sect .ba-swiper .swiper-slide {
    width: 100%;
}


.imp-bna-sect .ba-swiper .item-img {
    width: 100%;
    overflow: hidden;
}


.imp-bna-sect .ba-swiper .item-img img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* 카테고리 변경 시 자연스럽게 */
.imp-bna-sect .ba-swiper {
    opacity: 1;

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.imp-bna-sect .ba-swiper.is-changing {
    opacity: 0;

    transform: translateY(8px);
}


/* ==================================================
   좌우 화살표
================================================== */

.imp-bna-sect .ba-prev,
.imp-bna-sect .ba-next {
    position: absolute;
    top: 50%;
    z-index: 10;

    width: 42px;
    height: 42px;

    border-top: 1px solid rgba(255, 255, 255, .75);
    border-right: 1px solid rgba(255, 255, 255, .75);

    cursor: pointer;

    transition:
        border-color .3s ease,
        opacity .3s ease;
}


.imp-bna-sect .ba-prev {
    left: 0;

    transform:
        translateY(-50%) rotate(-135deg);
}


.imp-bna-sect .ba-next {
    right: 0;

    transform:
        translateY(-50%) rotate(45deg);
}


.imp-bna-sect .ba-prev:hover,
.imp-bna-sect .ba-next:hover {
    border-color: #fff;
}


/* ==================================================
   페이지네이션
================================================== */

.imp-bna-sect .ba-pagination {
    position: relative;
    bottom: auto !important;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 30px;
}


.imp-bna-sect .ba-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;

    margin: 0 6px !important;

    background: rgba(255, 255, 255, .35);

    opacity: 1;

    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease;
}


.imp-bna-sect .ba-pagination .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;

    background: #72aaff;
}

/* ==================================================
   IMPLANT POINT
================================================== */

.imp-point-sect {
    position: relative;

    padding: 140px 0 160px;

    background: #06255a;
    color: #fff;
}


/* 제목 */
.imp-point-sect .sect-title {
    margin-top: 0;

    color: #fff;

    font-size: 56px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.05em;
}


/* ==================================================
   4개 카드
================================================== */

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

    gap: 25px;

    width: 1200px;

    margin: 75px auto 0;
}


/* 카드 */
.imp-point-list .item {
    position: relative;

    height: 350px;

    overflow: hidden;

    border-radius: 16px;

    background: #09285c;
}


/* 이미지 */
.imp-point-list .item-img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


.imp-point-list .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}


/* 하단 어두운 그라데이션 */
.imp-point-list .item::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 1;

    background: linear-gradient(to bottom,
            rgba(0, 22, 57, 0) 35%,
            rgba(0, 22, 57, .25) 55%,
            rgba(0, 22, 57, .88) 100%);

    pointer-events: none;
}


/* 텍스트 */
.imp-point-list .item-txt {
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 28px;
    z-index: 2;

    color: #fff;
}


/* 제목 */
.imp-point-list .item-txt strong {
    display: block;

    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.045em;
}


/* 설명 */
.imp-point-list .item-txt p {
    margin-top: 12px;

    color: rgba(255, 255, 255, .9);

    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -.025em;

    word-break: keep-all;
}


/* hover */
.imp-point-list .item:hover .item-img img {
    transform: scale(1.05);
}




/* ==================================================
   IMPLANT COMFORT
================================================== */

.imp-comport-sect {
    position: relative;

    padding: 140px 0 160px;

    background: #06255a;
    color: #fff;
}


/* 제목 */
.imp-comport-sect .sect-name,
.imp-comport-sect .sect-title,
.imp-comport-sect .sect-des {
    color: #fff;
}


/* ==================================================
   3개 카드
================================================== */

.imp-comport-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 28px;

    width: 1450px;

    margin: 80px auto 0;
}


.imp-comport-list .item {
    text-align: center;
}


/* 이미지 */
.imp-comport-list .item-img {
    width: 100%;
    height: 365px;

    border-radius: 28px;

    background: #fff;

    overflow: hidden;
}


.imp-comport-list .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .5s ease;
}


/* 가운데 1,2번처럼 제품 이미지면 contain */
.imp-comport-list .item:nth-child(1) .item-img img,
.imp-comport-list .item:nth-child(2) .item-img img {
    object-fit: contain;
}


/* ==================================================
   텍스트
================================================== */

.imp-comport-list .item-txt {
    margin-top: 32px;
}


.imp-comport-list .item-txt strong {
    display: block;

    color: #fff;

    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.05em;
}


.imp-comport-list .item-txt p {
    margin-top: 12px;

    color: rgba(255, 255, 255, .88);

    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -.035em;

    word-break: keep-all;
}


/* hover */
.imp-comport-list .item:hover .item-img img {
    transform: scale(1.035);
}



/* =========================================
   imp-count-sect
========================================= */
.imp-count-sect {
    position: relative;
    overflow: clip;
    /* hidden 삭제 */
    background: linear-gradient(180deg, #00235d 0%, #042b6d 100%);
    color: #fff;
}

.imp-count-scroll {
    position: relative;
    height: 400vh;
}

.imp-count-sticky {
    position: sticky;
    top: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;
}

.imp-count-sect .sect-title,
.imp-count-sect .sect-des {
    color: #fff;
}

.imp-count-stage {
    display: grid;
    grid-template-columns: 380px 1fr 390px;
    gap: 55px;
    align-items: center;
    margin-top: 120px;
}


/* =========================
   left number
========================= */
.imp-count-left {
    position: relative;
    height: 360px;
}

.imp-count-num-item {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 10px;

    opacity: 0;
    transform: translateY(-50%) translateY(40px);
    transition: opacity .55s ease, transform .7s ease, filter .55s ease;
}

.imp-count-num-item strong {
    font-size: 13rem;
    line-height: .85;
    font-weight: 700;
    letter-spacing: -.07em;
    color: #fff;
}

.imp-count-num-item span {
    margin-bottom: 10px;
    font-size: 5rem;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.05em;
    color: #fff;
}

.imp-count-num-item.is-current {
    opacity: 1;
    transform: translateY(-50%) translateY(0);
    z-index: 3;
}

/* 왼쪽 숫자 - 지나간 항목 완전히 숨김 */
.imp-count-num-item.is-past {
    opacity: 0;
    visibility: hidden;
    filter: none;
    pointer-events: none;
}


/* 오른쪽 설명 - 지나간 항목 완전히 숨김 */
.imp-count-info-item.is-past {
    opacity: 0;
    visibility: hidden;
    filter: none;
    pointer-events: none;
}

.imp-count-num-item.is-future {
    opacity: 0;
    transform: translateY(calc(-50% + 40px));
}

/* =========================
   center stack image
========================= */

.imp-count-center {
    display: flex;
    justify-content: center;
}


.imp-count-stack {
    position: relative;

    width: 800px;
    height: 500px;

    margin: 0 auto;
}


/* 카드 공통 */
.imp-count-card {
    position: absolute;

    left: 50%;
    top: 0;

    width: 800px;
    height: 450px;

    border-radius: 28px;

    overflow: hidden;

    transform-origin: center top;

    transition:
        transform .55s ease,
        opacity .55s ease,
        filter .55s ease;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .12);
}


.imp-count-card .item-img,
.imp-count-card .item-img img {
    display: block;

    width: 100%;
    height: 100%;
}


.imp-count-card .item-img img {
    object-fit: cover;
}


/* 현재 카드 */
.imp-count-card.is-current {
    opacity: 1;

    transform:
        translateX(-50%) translateY(0) scaleX(1);

    filter: brightness(1);

    z-index: 5;
}


/* 지나간 카드 */
.imp-count-card.is-past {
    opacity: .22;

    transform:
        translateX(-50%) translateY(calc(-18px * var(--depth))) scaleX(.94);

    filter:
        brightness(.52) saturate(.8);

    z-index: 2;
}


/* 아직 안 나온 카드 */
.imp-count-card.is-future {
    opacity: 0;

    transform:
        translateX(-50%) translateY(55px) scale(.98);

    z-index: 1;
}


/* =========================
   right text
========================= */
.imp-count-right {
    position: relative;
    height: 360px;
}

.imp-count-info-item {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;

    opacity: 0;
    transform: translateY(-50%) translateY(40px);
    transition: opacity .55s ease, transform .7s ease, filter .55s ease;
}

.imp-count-info-item strong {
    display: block;
    font-size: 1.85rem;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
}

.imp-count-info-item p {
    margin-top: 10px;
    font-size: 1.2rem;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -.01em;
    color: rgba(255, 255, 255, .88);
    word-break: keep-all;
}

.imp-count-info-item.is-current {
    opacity: 1;
    transform: translateY(-50%) translateY(0);
    z-index: 3;
}

.imp-count-info-item.is-past {
    opacity: .16;
    filter: blur(1px);
    transform: translateY(calc(-50% - (12px * var(--depth))));
    z-index: 1;
}

.imp-count-info-item.is-future {
    opacity: 0;
    transform: translateY(calc(-50% + 40px));
}


/* =========================
   bg light
========================= */
.imp-count-sect::before,
.imp-count-sect::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.imp-count-sect::before {
    left: -8%;
    bottom: -8%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(43, 128, 255, .28) 0%, rgba(43, 128, 255, 0) 70%);
    filter: blur(40px);
}

.imp-count-sect::after {
    right: -4%;
    top: 10%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 1px solid rgba(140, 190, 255, .18);
    box-shadow:
        0 0 60px rgba(70, 140, 255, .10),
        inset 0 0 60px rgba(70, 140, 255, .05);
}




.imp {
    background:
        linear-gradient(180deg, #2656ab 0%, #193b79 50%, #05122b 100%)
}

.imp-price-sect,
.imp-bna-sect,
.imp-point-sect,
.imp-comport-sect,
.imp-count-sect {
    background: transparent;
}



/* ==================================================
   IMPLANT SECTION - ALTERNATE RING PATTERN
   LEFT → RIGHT → LEFT → RIGHT → LEFT
================================================== */


/* 공통 원형 장식 */
.imp-bna-sect::before,
.imp-point-sect::before,
.imp-comport-sect::before,
.imp-count-sect::before {
    content: "";

    position: absolute;
    z-index: 0;

    top: 50%;

    width: 700px;
    height: 700px;

    border: 3px solid rgba(86, 165, 255, .18);
    border-radius: 50%;

    box-shadow:
        0 0 20px rgba(70, 155, 255, .12),
        0 0 55px rgba(57, 145, 255, .07);

    pointer-events: none;

    animation:
        impSectionRingGlow 5.5s ease-in-out infinite;

    will-change:
        transform,
        opacity,
        box-shadow;
}


/* ==================================================
   01 PRICE
   기존 ::before 사용
   LEFT
================================================== */

/* 기존 위치 그대로 */


/* ==================================================
   02 B&A
   RIGHT
================================================== */

.imp-bna-sect::before {
    left: auto;
    right: -520px;

    transform: translateY(-50%);

    animation-delay: .5s;
}


/* ==================================================
   03 POINT
   LEFT
================================================== */

.imp-point-sect::before {
    left: -520px;
    right: auto;

    transform: translateY(-50%);

    animation-delay: 1s;
}


/* ==================================================
   04 COMPORT
   RIGHT
================================================== */

.imp-comport-sect::before {
    left: auto;
    right: -520px;

    transform: translateY(-50%);

    animation-delay: 1.5s;
}


/* ==================================================
   05 COUNT
   기존 radial glow 대신 동일한 원형 패턴
   LEFT
================================================== */

.imp-count-sect::before {
    left: -520px;
    right: auto;

    top: 50%;
    bottom: auto;

    width: 700px;
    height: 700px;

    transform: translateY(-50%);

    /* 기존 count radial-gradient 초기화 */
    background: none;
    filter: none;

    animation-delay: 2s;
}


/* 기존 오른쪽 count 원 제거 */
.imp-count-sect::after {
    display: none;
}


/* ==================================================
   RING ANIMATION
================================================== */

@keyframes impSectionRingGlow {

    0%,
    100% {
        opacity: .45;

        box-shadow:
            0 0 12px rgba(70, 155, 255, .08),
            0 0 30px rgba(57, 145, 255, .04);
    }


    45% {
        opacity: 1;

        border-color:
            rgba(105, 181, 255, .36);

        box-shadow:
            0 0 22px rgba(84, 169, 255, .25),
            0 0 55px rgba(65, 153, 255, .15),
            0 0 95px rgba(50, 140, 255, .08);
    }


    70% {
        opacity: .65;

        box-shadow:
            0 0 16px rgba(84, 169, 255, .15),
            0 0 40px rgba(65, 153, 255, .08);
    }
}




/* ==================================================
   SMILE
================================================== */

.smile {
    position: relative;
    background: #fff;
}



/* ==================================================
   SMILE INTRO
================================================== */

.smile-intro-sect {
    position: relative;

    padding: 150px 0;

    background: #fff;
}

/* ==================================================
   SMILE - 기존 CSS 유지 + 비주얼 디테일만 추가
================================================== */


/* 인트로 : 아래쪽으로 아주 연한 블루톤 */
.smile-intro-sect {
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f7faff 100%);
}


/* WHY : 인트로와 자연스럽게 이어지면서 다시 화이트 */
.smile-why-sect {
    background:
        linear-gradient(180deg,
            #f7faff 0%,
            #ffffff 100%);
}


/* WHY 카드에 아주 살짝 입체감 */
.smile-why-list .item {
    border: 1px solid rgba(14, 50, 108, .08);

    box-shadow:
        0 12px 32px rgba(20, 55, 105, .07);
}




/* Difference
   기존 흰색 느낌은 유지하면서
   오른쪽에 아주 은은한 블루 조명 느낌 */
.smile-differe-sect {
    background:
        radial-gradient(circle at 88% 18%,
            rgba(52, 132, 239, .07) 0%,
            rgba(52, 132, 239, .025) 20%,
            rgba(255, 255, 255, 0) 42%),
        #fff;
}


/* 심미 가격 영역은 현재 구조 유지
   기존 회색을 아주 약간 블루그레이 쪽으로만 */
.smile-price-sect {
    background:
        linear-gradient(180deg,
            #f4f6f9 0%,
            #eef3f8 100%);
}


/* 마지막 B&A도 완전 흰색보다 살짝 깊이감 */
.smail-bna-sect {
    background:
        linear-gradient(180deg,
            #ffffff 0%,
            #f8fbff 100%);
}

/* ==================================================
   SMILE BEFORE & AFTER
================================================== */

.smile-ba-wrap {
    position: relative;

    width: 1220px;
    margin: 75px auto 0;
}


/* 슬라이드 */
.smile-ba-swiper {
    width: 1080px;
    margin: 0 auto;

    overflow: hidden;
}


.smile-ba-swiper .swiper-slide {
    width: 100%;
}


.smile-ba-swiper .item-img {
    width: 100%;
}


.smile-ba-swiper .item-img img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* ==================================================
   좌우 화살표
================================================== */

.smile-ba-prev,
.smile-ba-next {
    position: absolute;
    top: 50%;
    z-index: 5;

    width: 42px;
    height: 42px;

    border-top: 1px solid #555;
    border-right: 1px solid #555;

    cursor: pointer;

    transition:
        border-color .3s ease,
        opacity .3s ease;
}


.smile-ba-prev {
    left: 0;

    transform:
        translateY(-50%) rotate(-135deg);
}


.smile-ba-next {
    right: 0;

    transform:
        translateY(-50%) rotate(45deg);
}


.smile-ba-prev:hover,
.smile-ba-next:hover {
    border-color: #111;
}


/* ==================================================
   페이지네이션
================================================== */

.smile-ba-pagination {
    position: relative;
    bottom: auto !important;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 30px;
}


.smile-ba-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;

    margin: 0 6px !important;

    background: #777;

    opacity: 1;

    transition:
        width .25s ease,
        height .25s ease,
        background .25s ease;
}


.smile-ba-pagination .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;

    background: #3484ef;
}

/* ==================================================
   SMILE WHY
================================================== */

.smile-why-sect {
    position: relative;

    padding: 130px 0 130px;

    background: #fff;
    color: #111;
}


/* =========================
   제목
========================= */

.smile-why-sect .sect-title {
    margin-top: 0;

    color: #111;

    font-size: 52px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.055em;
}


.smile-why-sect .sect-des {
    margin-top: 38px;

    color: #222;

    font-size: 18px;
    line-height: 1.6;
    font-weight: 500;
    letter-spacing: -.035em;
}


/* =========================
   4개 카드
========================= */

.smile-why-list {
    display: grid;

    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    width: min(88vw, 1500px);

    margin: 65px auto 0;
}


.smile-why-list .item {
    position: relative;

    aspect-ratio: 1.13 / 1;

    overflow: hidden;

    border-radius: 26px;

    background: #eee;
}

/* =========================
   이미지
========================= */

.smile-why-list .item-img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;
}


.smile-why-list .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /* 기본 transform을 명시 */
    transform: translateZ(0) scale(1);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change: transform;

    transition:
        transform .7s cubic-bezier(.22, 1, .36, 1);
}


/* =========================
   하단 검정 그라데이션
========================= */

.smile-why-list .item::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 1;

    height: 62%;

    background:
        linear-gradient(to top,
            rgba(0, 0, 0, .78) 0%,
            rgba(0, 0, 0, .55) 28%,
            rgba(0, 0, 0, .22) 58%,
            rgba(0, 0, 0, 0) 100%);

    pointer-events: none;
}


/* =========================
   하단 텍스트
========================= */

.smile-why-list .item-txt {
    position: absolute;

    left: 20px;
    right: 20px;
    bottom: 30px;

    z-index: 2;

    color: #fff;

    text-align: center;
}


/* 01, 02 ... */
.smile-why-list .item-txt span {
    display: block;

    margin-bottom: 5px;

    color: rgba(255, 255, 255, .95);

    font-size: 15px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .04em;
}


/* 제목 */
.smile-why-list .item-txt strong {
    display: block;

    color: #fff;

    font-size: 23px;
    line-height: 1.25;
    font-weight: 700;

    letter-spacing: -.045em;

    word-break: keep-all;

    text-shadow:
        0 2px 10px rgba(0, 0, 0, .28);
}


/* =========================
   Hover
========================= */

.smile-why-list .item:hover .item-img img {
    transform: translateZ(0) scale(1.04);
}


/* ==================================================
   SMILE DIFFERENCE
================================================== */

.smile-differe-sect {
    position: relative;

    padding: 140px 0 0;

    background: #fff;
    color: #111;
}


/* 상단 타이틀 */
.smile-differe-sect .sect-title {
    color: #111;
}

.smile-differe-sect .sect-des {
    color: #222;
}


/* ==================================================
   Difference List
================================================== */

.smile-differe-list {
    width: 100%;
    margin-top: 110px;
}


/* 한 덩어리 */
.smile-differe-list .item {
    display: flex;

    width: 100%;
    height: 655px;
}


/* ==================================================
   이미지 영역
================================================== */

.smile-differe-list .item-img {
    width: 50%;
    height: 100%;

    flex-shrink: 0;

    background: #d3d3d3;

    overflow: hidden;
}


/* 실제 이미지 넣을 때 */
.smile-differe-list .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==================================================
   텍스트 영역
================================================== */

.smile-differe-list .item-txt {
    display: flex;
    align-items: center;

    width: 50%;
    height: 100%;

    padding: 0 75px;

    background: #fff;
}


.smile-differe-list .txt-inner {
    width: 100%;
    max-width: 560px;
}


/* 제목 */
.smile-differe-list .item-txt strong {
    display: block;

    color: #111;

    font-size: 3.5rem;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -.03em;

    word-break: keep-all;
}

/* ==================================================
   SMILE DIFFERENCE - TEXT POINT
================================================== */

.smile-differe-list .item-txt .txt-inner {
    position: relative;
}


/* 상단 번호 */
.smile-differe-list .item-txt .txt-inner::before {
    display: block;

    margin-bottom: 24px;

    color: #3484ef;

    font-size: 15px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .08em;
}


/* 자동 번호 */
.smile-differe-list .item:nth-child(1) .txt-inner::before {
    content: "01";
}

.smile-differe-list .item:nth-child(2) .txt-inner::before {
    content: "02";
}

.smile-differe-list .item:nth-child(3) .txt-inner::before {
    content: "03";
}


/* 제목 아래 포인트 라인 */
.smile-differe-list .item-txt strong::after {
    content: "";

    display: block;

    width: 42px;
    height: 3px;

    margin-top: 26px;

    border-radius: 10px;

    background: #3484ef;
}


/* 설명 간격 조정 */
.smile-differe-list .item-txt p {
    margin-top: 24px;
}


/* 설명 */
.smile-differe-list .item-txt p {
    margin-top: 28px;
    color: #222;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -.02em;
    word-break: keep-all;
}

/* ==================================================
   SMILE POINT
================================================== */

.smile-point-sect {
    position: relative;

    padding: 150px 0;

    background: #fff;
    color: #111;
}


/* 제목 */
.smile-point-sect .sect-title {
    margin-top: 0;

    color: #111;

    font-size: 3rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.05em;
}


/* ==================================================
   3개 원칙
================================================== */

.smile-point-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 24px;

    width: 1450px;

    margin: 70px auto 0;
}


/* 카드 */
.smile-point-list .item {
    text-align: center;
}


/* 이미지 */
.smile-point-list .item-img {
    width: 100%;
    height: 370px;

    border-radius: 28px;

    background: #d3d3d3;

    overflow: hidden;
}


/* 실제 이미지 넣을 때 */
.smile-point-list .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==================================================
   텍스트
================================================== */

.smile-point-list .item-txt {
    margin-top: 42px;
}


.smile-point-list .item-txt strong {
    display: block;

    color: #111;

    font-size: 2rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.05em;
}


.smile-point-list .item-txt p {
    margin-top: 14px;

    color: #222;

    font-size: 20px;
    line-height: 1.55;
    font-weight: 400;
    letter-spacing: -.04em;

    word-break: keep-all;
}



/* ==================================================
   SMILE PRICE
================================================== */

.smile-price-sect {
    position: relative;
    padding: 120px 0 140px;
    background: #f3f3f3;
    color: #111;
}

.smile-price-sect .smile-price-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 120px;
    width: 1220px;
    margin: 0 auto;
}


/* 왼쪽 */
.smile-price-sect .price-left {
    width: 42%;
}

.smile-price-sect .price-title {
    margin: 0;
    font-size: 62px;
    line-height: 1.28;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #111;
    word-break: keep-all;
}


/* 오른쪽 */
.smile-price-sect .price-right {
    flex: 1;
    min-width: 0;
}

.smile-price-sect .price-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
}

.smile-price-sect .price-item.laminate {
    padding-bottom: 42px;
    margin-bottom: 42px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.9);
}


/* 항목명 */
.smile-price-sect .price-name {
    flex-shrink: 0;
    width: 180px;
}

.smile-price-sect .price-name strong {
    position: relative;

    display: inline-block;

    font-size: 34px;
    line-height: 1.35;
    font-weight: 700;
    letter-spacing: -.05em;

    color: #111;
}

.smile-price-sect .price-name strong::before {
    content: "";

    position: absolute;

    left: -18px;
    top: 7px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #3484ef;
}


/* 가격 영역 */
.smile-price-sect .price-value {
    flex: 1;
    text-align: right;
}

.smile-price-sect .price-value>strong {
    display: block;
    font-size: 52px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.05em;
    color: #111;
}

.smile-price-sect .price-value>p {
    margin-top: 10px;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.03em;
    color: #666;
}

/* 치아미백 가격 리스트 */
.smile-price-sect .price-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.smile-price-sect .price-list li {
    display: grid;

    /* 회차 / 가격 */
    grid-template-columns: 42px 180px;

    justify-content: end;
    align-items: center;

    column-gap: 16px;
}

.smile-price-sect .price-list li+li {
    margin-top: 20px;
}

.smile-price-sect .price-list span {
    width: 42px;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;

    color: #555;

    text-align: right;
}

.smile-price-sect .price-list strong {
    width: 180px;

    font-size: 52px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.05em;

    color: #111;

    text-align: right;
}

.smile-price-sect .price-value>strong,
.smile-price-sect .price-list strong {
    color: #0e326c;
}



/* ==================================================
   SMAIL BEFORE & AFTER
================================================== */

.smail-bna-sect {
    position: relative;
    padding: 140px 0 0;
    background: #fff;
    color: #111;
    overflow: hidden;
}

.smail-bna-sect .ba-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    margin-top: 65px;
}

.smail-bna-sect .ba-menu button {
    position: relative;
    padding: 0 0 12px;
    border: 0;
    background: none;
    color: #222;
    font-size: 21px;
    line-height: 1;
    font-weight: 500;
    letter-spacing: -.04em;
    cursor: pointer;
    transition: color .3s ease, font-weight .3s ease;
}

.smail-bna-sect .ba-menu button::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    background: #3484ef;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.smail-bna-sect .ba-menu button:hover,
.smail-bna-sect .ba-menu button.active {
    color: #111;
}

.smail-bna-sect .ba-menu button.active {
    font-weight: 700;
}

.smail-bna-sect .ba-menu button.active::after {
    transform: scaleX(1);
}

.smail-bna-sect .ba-wrap {
    position: relative;
    width: 1320px;
    margin: 45px auto 0;
}

.smail-bna-sect .ba-swiper {
    width: 1160px;
    margin: 0 auto;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s ease;
}

.smail-bna-sect .ba-swiper.is-changing {
    opacity: 0;
    transform: translateY(7px);
}

.smail-bna-sect .ba-swiper .swiper-slide,
.smail-bna-sect .ba-swiper .item-img {
    width: 100%;
}

.smail-bna-sect .ba-swiper .item-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.smail-bna-sect .ba-prev,
.smail-bna-sect .ba-next {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 42px;
    height: 42px;
    border-top: 1px solid #555;
    border-right: 1px solid #555;
    cursor: pointer;
    transition: border-color .3s ease, opacity .3s ease;
}

.smail-bna-sect .ba-prev {
    left: 0;
    transform: translateY(-50%) rotate(-135deg);
}

.smail-bna-sect .ba-next {
    right: 0;
    transform: translateY(-50%) rotate(45deg);
}

.smail-bna-sect .ba-prev:hover,
.smail-bna-sect .ba-next:hover {
    border-color: #111;
}

.smail-bna-sect .ba-pagination {
    position: relative;
    bottom: auto !important;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 28px;
}

.smail-bna-sect .ba-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0 6px !important;
    background: #666;
    opacity: 1;
    transition: width .25s ease, height .25s ease, background .25s ease;
}

.smail-bna-sect .ba-pagination .swiper-pagination-bullet-active {
    width: 14px;
    height: 14px;
    background: #559cf5;
}


/* ==================================================
   BOTTOM MARQUEE
================================================== */

.smail-bna-marquee {
    width: 100%;

    margin-top: 120px;

    overflow: hidden;

    white-space: nowrap;
}


.smail-bna-marquee-track {
    display: flex;

    width: max-content;

    will-change: transform;

    animation: smailBnaMarquee 32s linear infinite;
}


.smail-bna-marquee .marquee-group {
    display: flex;
    flex-shrink: 0;
}


.smail-bna-marquee span {
    display: block;

    padding-right: 35px;

    color: #050505;

    font-size: clamp(80px, 7.2vw, 140px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.055em;
}


@keyframes smailBnaMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}



/* ==================================================
   INFO
================================================== */

.info {
    position: relative;
}


/* ==================================================
   INFO LOCATION
================================================== */

.info-location {
    position: relative;

    padding: 120px 0 150px;

    background: #fff;
    color: #111;
}


.info-location .sect-title {
    margin-top: 0;

    font-size: 58px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.055em;

    color: #111;
}


.info-location .sect-des {
    margin-top: 50px;

    font-size: 20px;
    line-height: 1.65;
    font-weight: 500;

    color: #222;
}


/* ==================================================
   MAP + INFO
================================================== */

.info-location-wrap {
    display: grid;
    grid-template-columns: 1.05fr 1fr;

    gap: 90px;

    width: 1420px;

    margin: 90px auto 0;
}


/* ==================================================
   LEFT MAP
================================================== */

.info-map-wrap {
    width: 100%;
}


/* ==================================================
   NAVER MAP
================================================== */

.info-map {
    position: relative;

    width: 100%;
    height: 500px;

    border-radius: 28px;

    overflow: hidden;

    background: #ddd;
}


/* 정적 지도 이미지를 직접 넣는 경우에만 적용 */
.info-map>img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.info-map img {
    max-width: none;
}


/* ==================================================
   NAVER MAP CUSTOM MARKER
================================================== */

.sb-map-marker {
    position: relative;

    width: 230px;

    cursor: pointer;
}


/* 메인 마커 박스 */
.sb-map-marker-box {
    display: flex;
    align-items: center;

    width: 230px;
    height: 66px;

    padding: 0 20px;

    background: #0a2961;

    border-radius: 4px;

    box-shadow:
        0 7px 22px rgba(0, 0, 0, .18);
}


/* 로고 */
.sb-map-marker-logo {
    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    width: 42px;
    height: 42px;

    margin-right: 12px;
}


.sb-map-marker-logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;

    max-width: none;
}


/* 치과명 */
.sb-map-marker-txt {
    display: flex;
    flex-direction: column;

    justify-content: center;
}


.sb-map-marker-txt strong {
    color: #fff;

    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;

    letter-spacing: -.04em;

    white-space: nowrap;
}


.sb-map-marker-txt span {
    display: block;

    margin-top: 4px;

    color: rgba(255, 255, 255, .65);

    font-size: 8px;
    line-height: 1;

    letter-spacing: .02em;

    white-space: nowrap;
}


/* 아래 위치 포인터 */
.sb-map-marker-arrow {
    position: absolute;

    left: 50%;
    bottom: -10px;

    width: 0;
    height: 0;

    transform: translateX(-50%);

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 11px solid #0a2961;
}


/* 지도 링크 */
.info-map-links {
    display: flex;
    gap: 12px;

    margin-top: 22px;
}


.info-map-links a {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    min-width: 130px;
    height: 48px;

    padding: 0 20px;

    border-radius: 30px;

    background: #f6f6f6;

    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.03em;

    transition:
        background .25s ease,
        transform .25s ease;
}


.info-map-links a:hover {
    background: #eee;
    transform: translateY(-2px);
}


/* 임시 지도 아이콘 */
.map-icon {
    display: flex;
    align-items: center;

    width: 19px;
    height: 19px;
}


/* ==================================================
   RIGHT INFO
================================================== */

.info-location-detail {
    display: flex;
    flex-direction: column;

    justify-content: center;

    gap: 42px;
}


/* 각 정보 */
.info-location-item {
    display: grid;
    grid-template-columns: 42px 1fr;

    gap: 20px;

    align-items: flex-start;
}


/* 좌측 아이콘 */
.info-location-item .info-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    color: #000;

    font-size: 28px;
    line-height: 1;
    font-weight: 700;
}


/* 주차 P */
.info-location-item.parking .info-icon {
    width: 34px;
    height: 34px;

    margin: 3px 4px 0;

    border-radius: 5px;

    background: #000;
    color: #fff;

    font-size: 22px;
}


/* 기본 정보 */
.info-location-item .info-txt {
    padding-top: 2px;
}


.info-location-item .info-txt>strong {
    display: block;

    font-size: 25px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: -.04em;
}


/* 전화번호 */
.info-location-item .phone-num {
    font-size: 42px !important;
    line-height: 1 !important;
    font-weight: 600 !important;
    letter-spacing: -.03em !important;
}


/* 주소 포인트 */
.info-location-item.address .point {
    margin-top: 7px;

    color: #1760d0;

    font-size: 26px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: -.045em;
}


/* ==================================================
   진료시간
================================================== */

.info-location-item.time .info-txt {
    width: 100%;
}


.time-row {
    display: grid;
    grid-template-columns: 125px auto 1fr;

    align-items: center;

    column-gap: 18px;

    min-height: 50px;
}


.time-row strong {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.04em;
}


.time-row span {
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -.04em;
}


.time-row em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: start;

    height: 28px;

    padding: 0 10px;

    border-radius: 20px;

    background: #277be4;
    color: #fff;

    font-size: 12px;
    line-height: 1;
    font-style: normal;
    font-weight: 600;

    white-space: nowrap;
}




/* ==================================================
   INFO INTERIOR
================================================== */

.info-interior {
    position: relative;

    padding: 140px 0 130px;

    background: #fff;
    color: #111;

    overflow: hidden;
}


.info-interior .sect-title {
    margin-top: 0;

    color: #111;
}


.info-interior .sect-des {
    margin-top: 38px;

    color: #222;
}


/* ==================================================
   INTERIOR SLIDE
================================================== */

.info-interior-slide {
    position: relative;

    width: 100%;

    margin-top: 75px;
}


.info-interior-swiper {
    width: 100%;

    overflow: visible;

    cursor: grab;
}


.info-interior-swiper:active {
    cursor: grabbing;
}


/* 자동재생을 일정한 속도로 */
.info-interior-swiper .swiper-wrapper {
    transition-timing-function: linear !important;
}


/* 각 슬라이드 */
.info-interior-swiper .swiper-slide {
    width: 640px;
}


/* 이미지 */
.info-interior-swiper .item-img {
    width: 100%;
    height: 430px;

    border-radius: 28px;

    background: #d4d4d4;

    overflow: hidden;
}


/* 실제 이미지 넣을 때 */
.info-interior-swiper .item-img img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    pointer-events: none;
    user-select: none;
}


/* ==================================================
   PAGINATION
================================================== */

.info-interior-pagination {
    position: relative;
    bottom: auto !important;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 42px;
}


.info-interior-pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;

    margin: 0 7px !important;

    background: #555;

    opacity: 1;
}


.info-interior-pagination .swiper-pagination-bullet-active {
    width: 15px;
    height: 15px;

    background: #559cf5;
}















/* ==================================================
   SWIPER PAGINATION LAYOUT SHIFT FIX
================================================== */

/* 기본 10px 그룹 */
.ortho-ba-pagination .swiper-pagination-bullet,
.ba-category-sect .ba-pagination .swiper-pagination-bullet,
.smile-ba-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;

    transform: scale(1);

    transition:
        transform .25s ease,
        background .25s ease,
        opacity .25s ease;
}


/* active도 실제 크기는 그대로 */
.ortho-ba-pagination .swiper-pagination-bullet-active,
.ba-category-sect .ba-pagination .swiper-pagination-bullet-active,
.smile-ba-pagination .swiper-pagination-bullet-active {
    width: 10px;
    height: 10px;

    transform: scale(1.4);
}


/* 11px 그룹 */
.imp-ba-pagination .swiper-pagination-bullet,
.info-interior-pagination .swiper-pagination-bullet {
    width: 11px;
    height: 11px;

    transform: scale(1);

    transition:
        transform .25s ease,
        background .25s ease;
}


.imp-ba-pagination .swiper-pagination-bullet-active,
.info-interior-pagination .swiper-pagination-bullet-active {
    width: 11px;
    height: 11px;

    transform: scale(1.36);
}





/* ==================================================
   LOCATION INFO ICON - IMAGE
================================================== */

.info-location-item .info-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    flex-shrink: 0;

    /* 기존 문자 아이콘 스타일 초기화 */
    color: inherit;
    font-size: 0;
}


/* 실제 아이콘 이미지 */
.info-location-item .info-icon img {
    display: block;

    width: 34px;
    height: 34px;

    object-fit: contain;
    filter: brightness(0) saturate(100%);
}


/* 기존 parking P 스타일 덮어쓰기 */
.info-location-item.parking .info-icon {
    width: 42px;
    height: 42px;

    margin: 0;

    background: none;
    border-radius: 0;
}


/* 모든 아이콘 크기 통일 */
.info-location-item.parking .info-icon img {
    width: 34px;
    height: 34px;
}








/* 섹션 영문명 */
.smile .sect-name,
.ortho .sect-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #1f5fae;

    font-weight: 700;
}


/* 영문명 양옆 라인 */
.smile .sect-name::before,
.smile .sect-name::after,
.ortho .sect-name::before,
.ortho .sect-name::after {
    content: "";

    display: block;

    width: 28px;
    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(52, 132, 239, .15),
            rgba(52, 132, 239, .85));
}


.smile .sect-name::after,
.ortho .sect-name::after {
    transform: scaleX(-1);
}


/* 메인 타이틀 하단 포인트 */
.smile .sect-title::after,
.ortho .sect-title::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin: 28px auto 0;

    border-radius: 20px;

    background: #3484ef;
}


/* ==================================================
   IMP - DARK BACKGROUND TITLE POINT
================================================== */


/* 영문 타이틀 */
.imp-intro-sect .sect-name,
.imp-custom-detail .sect-name,
.imp-3d-sect .sect-name,
.imp-price-sect .sect-name,
.imp-bna-sect .sect-name,
.imp-comport-sect .sect-name,
.imp-count-sect .sect-name {
    color: #ffd400;
}


/* 영문명 양옆 라인 */
.imp-intro-sect .sect-name::before,
.imp-intro-sect .sect-name::after,
.imp-custom-detail .sect-name::before,
.imp-custom-detail .sect-name::after,
.imp-3d-sect .sect-name::before,
.imp-3d-sect .sect-name::after,
.imp-price-sect .sect-name::before,
.imp-price-sect .sect-name::after,
.imp-bna-sect .sect-name::before,
.imp-bna-sect .sect-name::after,
.imp-comport-sect .sect-name::before,
.imp-comport-sect .sect-name::after,
.imp-count-sect .sect-name::before,
.imp-count-sect .sect-name::after {
    background:
        linear-gradient(90deg,
            rgba(255, 212, 0, .15),
            rgba(255, 212, 0, .9));
}


/* 큰 제목 아래 포인트 */
.imp-intro-sect .sect-title::after,
.imp-custom-detail .sect-title::after,
.imp-3d-sect .sect-title::after,
.imp-price-sect .sect-title::after,
.imp-bna-sect .sect-title::after,
.imp-point-sect .sect-title::after,
.imp-comport-sect .sect-title::after,
.imp-count-sect .sect-title::after {
    background: #ffd400;

    box-shadow:
        0 0 14px rgba(255, 212, 0, .28);
}






/* ==================================================
   IMP SECTION TITLE POINT
================================================== */


/* --------------------------------------------------
   DARK BG - 영문명
-------------------------------------------------- */

.imp-intro-sect .sect-name,
.imp-custom-detail .sect-name,
.imp-3d-sect .sect-name,
.imp-price-sect .sect-name,
.imp-bna-sect .sect-name,
.imp-comport-sect .sect-name,
.imp-count-sect .sect-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #ffd400;

    font-weight: 700;
}


/* 양옆 라인 */
.imp-intro-sect .sect-name::before,
.imp-intro-sect .sect-name::after,
.imp-custom-detail .sect-name::before,
.imp-custom-detail .sect-name::after,
.imp-3d-sect .sect-name::before,
.imp-3d-sect .sect-name::after,
.imp-price-sect .sect-name::before,
.imp-price-sect .sect-name::after,
.imp-bna-sect .sect-name::before,
.imp-bna-sect .sect-name::after,
.imp-comport-sect .sect-name::before,
.imp-comport-sect .sect-name::after,
.imp-count-sect .sect-name::before,
.imp-count-sect .sect-name::after {
    content: "";

    display: block;

    width: 28px;
    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(255, 212, 0, .15),
            rgba(255, 212, 0, .95));
}


/* 오른쪽 라인 방향 반전 */
.imp-intro-sect .sect-name::after,
.imp-custom-detail .sect-name::after,
.imp-3d-sect .sect-name::after,
.imp-price-sect .sect-name::after,
.imp-bna-sect .sect-name::after,
.imp-comport-sect .sect-name::after,
.imp-count-sect .sect-name::after {
    transform: scaleX(-1);
}


/* --------------------------------------------------
   DARK BG - 큰 제목 아래 포인트
-------------------------------------------------- */

.imp-intro-sect .sect-title::after,
.imp-custom-detail .sect-title::after,
.imp-3d-sect .sect-title::after,
.imp-price-sect .sect-title::after,
.imp-bna-sect .sect-title::after,
.imp-point-sect .sect-title::after,
.imp-comport-sect .sect-title::after,
.imp-count-sect .sect-title::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin: 28px auto 0;

    border-radius: 20px;

    background: #ffd400;

    box-shadow:
        0 0 14px rgba(255, 212, 0, .28);
}


/* ==================================================
   LIGHT BG - ALL ON X
================================================== */

.imp-allonx-sect .sect-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #1f5fae;

    font-weight: 700;
}


.imp-allonx-sect .sect-name::before,
.imp-allonx-sect .sect-name::after {
    content: "";

    display: block;

    width: 28px;
    height: 1px;

    background:
        linear-gradient(90deg,
            rgba(52, 132, 239, .15),
            rgba(52, 132, 239, .85));
}


.imp-allonx-sect .sect-name::after {
    transform: scaleX(-1);
}


.imp-allonx-sect .sect-title::after {
    content: "";

    display: block;

    width: 34px;
    height: 3px;

    margin: 28px auto 0;

    border-radius: 20px;

    background: #3484ef;
}





/* ==================================================
   LANDING FOOTER
================================================== */

.landing-footer {
    position: relative;

    padding: 90px 0 55px;

    overflow: hidden;

    background:
        linear-gradient(135deg,
            #071a35 0%,
            #092449 55%,
            #071b37 100%);

    color: #fff;
}


/* 아주 은은한 배경 빛 */
.landing-footer::before {
    content: "";

    position: absolute;

    right: -180px;
    top: -260px;

    width: 650px;
    height: 650px;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(52, 132, 239, .12) 0%,
            rgba(52, 132, 239, .04) 38%,
            rgba(52, 132, 239, 0) 70%);

    pointer-events: none;
}


.footer-inner {
    position: relative;
    z-index: 2;

    width: min(88.54vw, 1500px);
}


/* ==================================================
   TOP
================================================== */

.footer-top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    padding-bottom: 42px;

    border-bottom:
        1px solid rgba(255, 255, 255, .13);
}


.footer-brand {
    display: flex;
    align-items: center;
}

.footer-brand img {
    display: block;

    width: 220px;
    height: auto;

    object-fit: contain;

    filter: brightness(0) invert(1);
}


.footer-brand strong {
    color: #fff;

    font-family: 'Roboto', sans-serif;

    font-size: 42px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: -.045em;
}


.footer-brand span {
    margin-top: 9px;

    color: rgba(255, 255, 255, .45);

    font-family: 'Roboto', sans-serif;

    font-size: 12px;
    line-height: 1;
    font-weight: 500;

    letter-spacing: .18em;
}


/* 전화번호 */
.footer-tel {
    display: flex;
    flex-direction: column;

    align-items: flex-end;
}


.footer-tel span {
    color: #ffd400;

    font-family: 'Roboto', sans-serif;

    font-size: 11px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: .15em;
}


.footer-tel strong {
    margin-top: 10px;

    color: #fff;

    font-family: 'Roboto', sans-serif;

    font-size: 30px;
    line-height: 1;

    font-weight: 600;

    letter-spacing: -.025em;

    transition:
        color .25s ease;
}


.footer-tel:hover strong {
    color: #ffd400;
}


/* ==================================================
   INFO
================================================== */

.footer-info {
    padding: 38px 0 42px;

    border-bottom:
        1px solid rgba(255, 255, 255, .1);
}


.footer-info-row {
    display: flex;
    align-items: center;

    flex-wrap: wrap;

    gap: 16px 42px;
}


.footer-info-row+.footer-info-row {
    margin-top: 14px;
}


.footer-info-item {
    display: flex;
    align-items: center;

    gap: 11px;
}


.footer-info-item span {
    flex-shrink: 0;

    color: rgba(255, 255, 255, .4);

    font-size: 13px;
    line-height: 1.5;

    font-weight: 500;

    letter-spacing: -.02em;
}


.footer-info-item strong {
    color: rgba(255, 255, 255, .8);

    font-size: 15px;
    line-height: 1.5;

    font-weight: 500;

    letter-spacing: -.025em;
}


.footer-info-item.address {
    margin-right: 20px;
}


/* ==================================================
   COPYRIGHT NOTICE
================================================== */

.footer-copy {
    padding: 32px 0 38px;
}


.footer-copy p {
    color: rgba(255, 255, 255, .38);

    font-size: 13px;
    line-height: 1.75;

    font-weight: 400;

    letter-spacing: -.02em;

    word-break: keep-all;
}


/* ==================================================
   BOTTOM
================================================== */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 25px;

    border-top:
        1px solid rgba(255, 255, 255, .08);
}


.footer-bottom p {
    color: rgba(255, 255, 255, .3);

    font-family: 'Roboto', 'Pretendard', sans-serif;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 400;

    letter-spacing: .035em;
}



/* ==================================================
   FOOTER RESPONSIVE
================================================== */

@media (max-width: 900px) {

    .landing-footer {
        padding:
            65px 0 40px;
    }


    .footer-top {
        align-items: flex-start;

        gap: 30px;
    }


    .footer-brand strong {
        font-size: 32px;
    }


    .footer-tel strong {
        font-size: 24px;
    }


    .footer-info-row {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }


    .footer-info-row+.footer-info-row {
        margin-top: 10px;
    }


    .footer-info-item.address {
        margin-right: 0;
    }

}


@media (max-width: 600px) {

    .footer-top {
        flex-direction: column;
    }


    .footer-tel {
        align-items: flex-start;
    }


    .footer-info-item {
        align-items: flex-start;
    }


    .footer-info-item.address {
        flex-direction: column;

        gap: 4px;
    }


    .footer-copy p br {
        display: none;
    }


    .footer-bottom {
        align-items: flex-end;

        gap: 20px;
    }

}



/* ==================================================
   SCROLL TOP
================================================== */

.scroll-top-btn {
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;

    border: 1px solid rgba(14, 50, 108, .15);
    border-radius: 50%;

    background: rgba(255, 255, 255, .95);

    box-shadow:
        0 8px 28px rgba(14, 50, 108, .16);

    color: #0e326c;

    opacity: 0;
    visibility: hidden;

    transform: translateY(15px);

    pointer-events: none;

    transition:
        opacity .3s ease,
        visibility .3s ease,
        transform .3s ease,
        background .25s ease;
}


/* ★ 실제 노출 */
body .scroll-top-btn.is-visible {
    opacity: 1 !important;
    visibility: visible !important;

    transform: translateY(0) !important;

    pointer-events: auto !important;
}


.scroll-top-btn span {
    margin-top: 7px;

    font-family: 'Roboto', sans-serif;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;

    letter-spacing: .08em;
}


.scroll-top-btn i {
    position: absolute;
    left: 50%;
    top: 16px;

    width: 8px;
    height: 8px;

    border-top: 1.5px solid #0e326c;
    border-left: 1.5px solid #0e326c;

    transform:
        translateX(-50%) rotate(45deg);
}


.scroll-top-btn:hover {
    background: #0e326c;
    color: #fff;

    transform: translateY(-3px) !important;
}


.scroll-top-btn:hover i {
    border-color: #fff;
}


























/* ==================================================
   RESPONSIVE
   TABLET / MOBILE
   PC 기존 CSS는 수정하지 않음
================================================== */


/* ==================================================
   TABLET
   768px ~ 1279px
================================================== */

@media (min-width: 768px) and (max-width: 1279px) {


    /* ------------------------------
       COMMON
    ------------------------------ */

    .in {
        width: calc(100% - 64px);
        max-width: 1100px;
    }


    .sect-name {
        font-size: 18px;
    }


    .sect-title {
        margin-top: 36px;

        font-size: 44px;
        line-height: 1.28;
    }


    .sect-des {
        margin-top: 22px;

        font-size: 18px;
        line-height: 1.6;
    }



    /* ------------------------------
       INTRO
    ------------------------------ */

    .intro-sect {
        min-height: 700px;
        height: 100svh;

        overflow: hidden;
    }


    .intro-sect .in {
        width: calc(100% - 64px);
        max-width: 1100px;
    }


    .intro-title {
        left: 0;
        top: 90px;

        font-size: clamp(52px, 6vw, 68px);
        line-height: 1.18;

        letter-spacing: -.07em;
    }


    .intro-sect .item-img {
        left: 18%;
        top: 210px;

        width: 66%;
    }


    .intro-des {
        right: 0;
        bottom: 70px;

        font-size: clamp(38px, 4.3vw, 50px);
        line-height: 1.15;

        letter-spacing: -.06em;
    }



    /* ------------------------------
       MAIN MENU
    ------------------------------ */

    .menu-sect {
        padding: 90px 0 120px;
    }


    .menu-title {
        margin-bottom: 55px;

        font-size: 34px;
    }


    .menu-item {
        height: 420px;
    }


    .menu-txt {
        padding: 0 18px;
    }


    .menu-txt span {
        font-size: 15px;
    }


    .menu-txt strong {
        margin-top: 10px;

        font-size: 30px;
    }


    .menu-txt em {
        min-width: 110px;
        height: 42px;

        margin-top: 25px;

        font-size: 14px;
    }




    /* ------------------------------
       SCROLL TOP
    ------------------------------ */

    .scroll-top-btn {
        right: 24px;
        bottom: 24px;

        width: 56px;
        height: 56px;
    }


    .scroll-top-btn i {
        top: 14px;
    }

}



/* ==================================================
   TABLET INTRO
   768px ~ 1024px
================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

    .intro-sect {
        min-height: 780px;
        height: 100svh;
        overflow: hidden;
    }

    .intro-sect .in {
        width: calc(100% - 48px);
        max-width: none;
    }


    /* 타이틀 */
    .intro-title {
        left: 0;
        top: clamp(70px, 7vw, 95px);

        font-size: clamp(48px, 5.1vw, 54px);
        line-height: 1.18;

        letter-spacing: -.065em;
    }


    /* 의료진 이미지 */
    .intro-sect .item-img {
        left: 13%;
        top: clamp(255px, 28vw, 305px);

        width: 74%;
    }


    /* 하단 문구 */
    .intro-des {
        left: auto;
        right: 0;
        text-align: right;

        bottom: clamp(55px, 6vw, 80px);

        width: 100%;

        font-size: clamp(34px, 3.8vw, 40px);
        line-height: 1.15;

        letter-spacing: -.055em;
    }

}


/* ==================================================
   MOBILE
   ~ 767px
================================================== */

@media (max-width: 767px) {


    /* ------------------------------
       COMMON
    ------------------------------ */

    .in {
        width: calc(100% - 36px);
        max-width: none;
    }


    .sect-name {
        font-size: 14px;
    }


    .sect-title {
        margin-top: 26px;

        font-size: 32px;
        line-height: 1.32;

        letter-spacing: -.055em;

        word-break: keep-all;
    }


    .sect-des {
        margin-top: 18px;

        font-size: 16px;
        line-height: 1.65;

        letter-spacing: -.035em;

        word-break: keep-all;
    }


    /* PC용 강제 줄바꿈 해제 */
    .sect-title br,
    .sect-des br {
        display: none;
    }



    /* 하단 상담바를 제외한 실제 화면 높이에 맞춤 */
    .intro-sect {
        position: relative;

        min-height: 0 !important;
        max-height: none !important;

        height: calc(100svh - 58px - env(safe-area-inset-bottom)) !important;

        overflow: hidden;
    }

    .intro-sect .in {
        width: calc(100% - 30px);
        height: 100%;
    }


    /* 메인 타이틀 */
    .intro-title {
        top: clamp(55px, 7svh, 72px);

        font-size: clamp(34px, 10vw, 42px);
        line-height: 1.2;
    }


    /* 의료진 이미지 */
    .intro-sect .item-img {
        left: -16%;

        /* 휴대폰 세로 길이에 맞춰 자동 이동 */
        top: clamp(220px, 28svh, 270px);

        width: 132%;
    }


    /* 하단 화이트 페이드 */
    .intro-sect .item-img::after {
        height: 28%;
    }


    /* 바로, 서울브라운치과입니다. */
    .intro-des {
        left: 0;
        right: auto;

        /* 기존 50px → 충분히 위로 */
        bottom: clamp(78px, 10svh, 105px);

        width: 100%;

        font-size: clamp(25px, 7.5vw, 32px);
        line-height: 1.15;

        letter-spacing: -.055em;

        word-break: keep-all;
        text-align: right;
    }



    /* ==================================================
       MAIN MENU
    ================================================== */

    .menu-sect {
        padding: 75px 0 90px;
    }


    .menu-title {
        margin-bottom: 38px;

        font-size: 27px;
        line-height: 1.35;
    }


    .menu-title::after {
        width: 36px;

        margin-top: 15px;
    }


    .menu-list {
        flex-direction: column;

        gap: 12px;
    }


    .menu-item {
        width: 100%;

        height: clamp(220px, 58vw, 290px);

        border-radius: 10px;
    }


    .menu-txt {
        padding: 0 20px;
    }


    .menu-txt span {
        font-size: 13px;
    }


    .menu-txt strong {
        margin-top: 7px;

        font-size: 28px;
    }


    .menu-txt em {
        min-width: 100px;
        height: 38px;

        margin-top: 20px;
        padding: 0 16px;

        font-size: 13px;
    }


    .menu-txt em::after {
        margin-left: 6px;

        font-size: 15px;
    }


    /* 모바일 hover 효과 제거 */
    .menu-item:hover {
        transform: none;

        box-shadow: none;
    }


    .menu-item:hover .menu-bg img {
        transform: none;
    }


    .menu-item:hover .menu-txt {
        transform: translate(-50%, -50%);
    }


    .menu-item::after {
        height: 3px;

        transform: scaleX(1);
    }


    .side-quick-menu {
        position: fixed !important;

        right: 8px !important;
        top: 50% !important;
        bottom: auto !important;
        left: auto !important;

        z-index: 700 !important;

        display: flex !important;
        flex-direction: column !important;

        gap: 4px;

        width: auto !important;
        padding: 5px;

        border: 1px solid rgba(14, 50, 108, .10);
        border-radius: 15px;

        background: rgba(255, 255, 255, .96);

        box-shadow:
            0 8px 26px rgba(12, 38, 78, .14);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);

        /* 처음에는 숨김 */
        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-50%) translateX(18px);

        pointer-events: none;

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .35s cubic-bezier(.22, 1, .36, 1);
    }


    /* menu-sect 통과 + 열림 상태 */
    .side-quick-menu.is-visible:not(.is-closed) {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(-50%) translateX(0);

        pointer-events: auto;
    }


    /* 사용자가 닫은 상태 */
    .side-quick-menu.is-closed {
        opacity: 0 !important;
        visibility: hidden !important;

        transform:
            translateY(-50%) translateX(18px) !important;

        pointer-events: none !important;
    }


    /* 닫기버튼 */
    .mobile-quick-close {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 58px;
        height: 32px;

        margin-bottom: 2px;

        border: 0;
        border-radius: 9px;

        background: #eef3f9;

        color: #56677e;

        font-size: 21px;
        line-height: 1;
        font-weight: 300;
    }


    /* ==============================
       QUICK 다시 열기 버튼
    ============================== */

    .mobile-quick-toggle {
        position: fixed;

        right: 8px;
        top: 50%;

        z-index: 699;

        display: flex;

        align-items: center;
        justify-content: center;

        width: 52px;
        height: 52px;

        border: 1px solid rgba(14, 50, 108, .12);
        border-radius: 50%;

        background: #0e326c;

        box-shadow:
            0 7px 22px rgba(14, 50, 108, .22);

        color: #fff;

        font-size: 9px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: .03em;

        opacity: 0;
        visibility: hidden;

        transform:
            translateY(-50%) translateX(14px);

        pointer-events: none;

        transition:
            opacity .3s ease,
            visibility .3s ease,
            transform .3s ease;
    }


    /* 퀵메뉴를 직접 닫았을 때만 QUICK 표시 */
    .mobile-quick-toggle.is-visible {
        opacity: 1;
        visibility: visible;

        transform:
            translateY(-50%) translateX(0);

        pointer-events: auto;
    }

    .side-quick-item,
    .side-quick-item:hover,
    .side-quick-item.active {
        display: flex;

        align-items: center;
        justify-content: center;

        width: 60px !important;
        min-width: 60px;
        height: 52px;

        padding: 0 5px;

        border: 0;
        border-radius: 11px;

        box-shadow: none;

        transform: none;
    }


    .side-quick-item.active {
        width: 58px !important;

        background:
            linear-gradient(135deg,
                #0e326c 0%,
                #1757aa 100%) !important;
    }

    .side-quick-item.active .side-quick-txt strong {
        color: #fff !important;
    }



    .side-quick-item {
        background: transparent;
    }

    .side-quick-num {
        display: none;
    }

    .side-quick-txt {
        display: flex;
        align-items: center;
        justify-content: center;

        margin: 0;

        opacity: 1;

        transform: none;

        text-align: center;
    }

    .side-quick-txt small {
        display: none;
    }

    .side-quick-txt strong {
        margin: 0;

        color: #526279;

        font-size: 11px;
        line-height: 1.25;
        font-weight: 650;

        white-space: normal;
        word-break: keep-all;
    }

    .side-quick-item.active {
        background:
            linear-gradient(135deg,
                #0e326c 0%,
                #1757aa 100%);
    }

    .side-quick-item.active .side-quick-txt strong {
        color: #fff;
    }

    /* ==================================================
       SCROLL TOP
       하단 퀵메뉴 위쪽에 위치
    ================================================== */

    .scroll-top-btn {
        right: 18px;
        bottom: 88px;

        width: 50px;
        height: 50px;
    }


    .scroll-top-btn span {
        margin-top: 6px;

        font-size: 9px;
    }


    .scroll-top-btn i {
        top: 12px;

        width: 7px;
        height: 7px;
    }

}


/* PC에서는 필요 없음 */
@media (min-width: 768px) {

    .mobile-quick-close,
    .mobile-quick-toggle {
        display: none !important;
    }
}

/* ==================================================
   SMALL MOBILE
   ~ 480px
================================================== */

@media (max-width: 480px) {


    /* ------------------------------
       COMMON
    ------------------------------ */

    .in {
        width: calc(100% - 30px);
    }


    .sect-title {
        font-size: 29px;
    }


    .sect-des {
        font-size: 15px;
    }



    /* ------------------------------
       INTRO
    ------------------------------ */

    .intro-sect .in {
        width: calc(100% - 30px);
    }


    .intro-title {
        top: 62px;

        font-size: clamp(34px, 10vw, 41px);
    }


    .intro-sect .item-img {
        left: -16%;
        top: 235px;

        width: 132%;
    }


    .intro-des {
        bottom: 50px;

        font-size: clamp(26px, 7.7vw, 32px);
    }



    /* ------------------------------
       MAIN MENU
    ------------------------------ */

    .menu-sect {
        padding: 65px 0 80px;
    }


    .menu-title {
        font-size: 25px;
    }


    .menu-item {
        height: 235px;
    }


    .menu-txt strong {
        font-size: 25px;
    }


    /* ------------------------------
       SIDE QUICK MENU
       480px 이하에서도 우측 중앙 3단 유지
    ------------------------------ */

    .side-quick-menu {
        left: auto;
        right: 8px;
        top: 50%;
        bottom: auto;

        width: auto;
        padding: 4px;

        border-radius: 13px;

        transform: translateY(-50%) translateX(14px);
    }

    .side-quick-menu.is-visible {
        transform: translateY(-50%) translateX(0);
    }

    .side-quick-item,
    .side-quick-item:hover,
    .side-quick-item.active {
        width: 56px !important;
        min-width: 56px;
        height: 48px;
    }

    .side-quick-txt strong {
        font-size: 10px;
        line-height: 1.2;
    }



    /* ------------------------------
       SCROLL TOP
    ------------------------------ */

    .scroll-top-btn {
        right: 14px;
        bottom: 80px;

        width: 46px;
        height: 46px;
    }

}

















/* ==================================================
   RESPONSIVE - ORTHODONTICS
================================================== */


/* ==================================================
   TABLET
   768px ~ 1279px
================================================== */

@media (min-width: 768px) and (max-width: 1279px) {


    /* ==================================================
       ORTHO INTRO / B&A
    ================================================== */

    .ortho-intro-sect {
        padding: 60px 0 110px;
    }


    .ortho-ba-wrap {
        width: 100%;
        max-width: 1050px;

        margin-top: 60px;
    }


    .ortho-ba-swiper {
        width: calc(100% - 100px);
    }


    .ortho-ba-prev,
    .ortho-ba-next {
        width: 32px;
        height: 32px;
    }


    .ortho-ba-prev {
        left: 12px;
    }


    .ortho-ba-next {
        right: 12px;
    }



    /* ==================================================
       BRACES
    ================================================== */

    .braces-sect {
        padding: 110px 0 125px;
    }


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

        gap: 24px;

        width: 100%;
        max-width: 900px;

        margin-top: 60px;
    }


    .braces-list .item {
        height: 350px;

        padding: 30px 32px;
    }


    .braces-list .item h3 {
        margin-top: 22px;

        font-size: 25px;
    }


    .braces-list .item p {
        font-size: 14px;
    }


    .braces-list .item .item-img {
        bottom: 22px;

        width: 62%;
        height: 135px;
    }



    /* ==================================================
       DIGITAL SCAN
       기존 PC 배치 형태 유지
    ================================================== */

    .scan-sect {
        padding-top: 90px;
    }


    .scan-visual {
        height: 540px;

        margin-top: 35px;
    }


    .scan-item-01 {
        left: 2%;

        width: 23%;
    }


    .scan-item-02 {
        left: 25%;

        width: 21%;
    }


    .scan-item-03 {
        left: 47%;

        width: 22%;
    }


    .scan-item-04 {
        right: 1%;

        width: 29%;
    }


    .scan-info {
        width: 220px;

        padding: 14px 16px;
    }


    .scan-info strong {
        font-size: 16px;
    }


    .scan-info p {
        font-size: 12px;
    }



    /* ==================================================
       PRICE
    ================================================== */

    .price-sect {
        padding: 110px 0 105px;
    }


    .price-sect .price-list {
        width: 100%;
        max-width: 1050px;

        gap: 0 16px;

        margin-top: 65px;
    }


    .price-sect .price-col .item {
        height: 105px;

        padding: 0 24px 0 28px;
    }


    .price-sect .price-col .item>strong {
        font-size: 24px;
    }


    .price-sect .price-col .price b {
        font-size: 27px;
    }


    .price-sect .price-col .price span {
        font-size: 11px;

        padding: 3px 8px;
    }


    .price-notice {
        margin-top: 32px;
    }


    .price-notice-mark {
        font-size: 14px;
    }



    /* ==================================================
       ORTHO BEFORE & AFTER
    ================================================== */

    .ortho-bna-sect {
        padding: 110px 0 120px;
    }


    .ortho-bna-sect .ba-menu {
        gap: 38px;

        margin-top: 50px;
    }


    .ortho-bna-sect .ba-menu button {
        font-size: 18px;
    }


    .ortho-bna-sect .ba-wrap {
        width: 100%;
        max-width: 1050px;

        margin-top: 40px;
    }


    .ortho-bna-sect .ba-swiper {
        width: calc(100% - 100px);
    }


    .ortho-bna-sect .ba-prev,
    .ortho-bna-sect .ba-next {
        width: 32px;
        height: 32px;
    }


    .ortho-bna-sect .ba-prev {
        left: 12px;
    }


    .ortho-bna-sect .ba-next {
        right: 12px;
    }



    /* ==================================================
       DENTISTS
    ================================================== */

    .dentists-sect {
        padding: 110px 0 120px;
    }


    .dentists-slide {
        margin-top: 55px;
    }


    .dentists-swiper {
        padding: 25px 0 45px;
    }


    .dentists-swiper .swiper-slide {
        width: 270px;
    }


    .dentists-swiper .item {
        border-radius: 22px;
    }


    .doctor-txt {
        bottom: 18px;

        min-width: 115px;

        padding: 9px 15px;
    }


    .doctor-txt div {
        font-size: 16px;
    }



    /* ==================================================
       REVIEW
    ================================================== */

    .review-sect {
        padding: 110px 0 100px;
    }


    .review-slide {
        margin-top: 55px;
    }


    .review-swiper .swiper-slide {
        width: 330px;
    }


    .review-swiper .item {
        min-height: 235px;

        padding: 30px 30px 35px;
    }


    .review-txt {
        margin-top: 28px;

        font-size: 16px;
    }

}





/* ==================================================
   MOBILE
   ~ 767px
================================================== */

@media (max-width: 767px) {


    /* ==================================================
       ORTHO INTRO / B&A
    ================================================== */

    .ortho-intro-sect {
        padding: 45px 0 80px;
    }


    .ortho-ba-wrap {
        width: 100%;

        margin-top: 42px;
    }


    .ortho-ba-swiper {
        width: 100%;
    }


    /* 모바일은 스와이프 사용 */
    .ortho-ba-prev,
    .ortho-ba-next {
        display: none;
    }


    .ortho-ba-pagination {
        margin-top: 20px;
    }


    .ortho-ba-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;

        margin: 0 5px !important;
    }


    .ortho-ba-pagination .swiper-pagination-bullet-active {
        width: 11px;
        height: 11px;
    }



    /* ==================================================
       BRACES
    ================================================== */

    .braces-sect {
        padding: 80px 0 90px;
    }


    .braces-list {
        grid-template-columns: 1fr;

        gap: 14px;

        width: 100%;

        margin-top: 42px;
    }


    .braces-list .item {
        height: 325px;

        padding: 26px 26px;

        border-radius: 14px;
    }


    .braces-list .item-label {
        min-width: 76px;
        height: 28px;

        padding: 0 13px;

        font-size: 12px;
    }


    .braces-list .item h3 {
        margin-top: 18px;

        font-size: 23px;
    }


    .braces-list .item p {
        margin-top: 8px;

        max-width: 90%;

        font-size: 14px;
        line-height: 1.55;
    }


    .braces-list .item .item-img {
        bottom: 18px;

        width: 62%;
        height: 125px;
    }



    /* ==================================================
       DIGITAL SCAN
       모바일에서는 겹침 방지를 위해 카드형으로만 변경
    ================================================== */

    .scan-sect {
        padding: 75px 0 70px;

        background-position: center bottom;
    }


    .scan-visual {
        display: grid;

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

        gap: 14px;

        height: auto;

        margin-top: 42px;
    }


    .scan-item,
    .scan-item-01,
    .scan-item-02,
    .scan-item-03,
    .scan-item-04 {
        position: relative;

        left: auto;
        right: auto;
        top: auto;
        bottom: auto;

        width: 100%;

        padding: 18px 12px;

        border: 1px solid rgba(52, 132, 239, .12);
        border-radius: 14px;

        background: rgba(255, 255, 255, .76);

        opacity: 1;
        filter: none;

        transform: none;
    }


    .scan-item.active {
        transform: none;

        border-color: rgba(52, 132, 239, .32);

        background: rgba(255, 255, 255, .94);
    }


    .scan-item .item-img {
        display: flex;
        align-items: center;
        justify-content: center;

        height: 150px;
    }


    .scan-item .item-img img {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /* 모바일에서는 장비 설명 항상 노출 */
    .scan-info,
    .scan-item-01 .scan-info,
    .scan-item-02 .scan-info,
    .scan-item-03 .scan-info,
    .scan-item-04 .scan-info {
        position: relative;

        left: auto;
        top: auto;

        width: 100%;

        margin-top: 10px;
        padding: 0;

        border: 0;

        background: transparent;

        box-shadow: none;

        opacity: 1;
        visibility: visible;

        transform: none;
    }


    .scan-info strong {
        font-size: 15px;
    }


    .scan-info p {
        margin-top: 5px;

        font-size: 12px;
        line-height: 1.5;
    }



    /* ==================================================
       PRICE
    ================================================== */

    .price-sect {
        padding: 80px 0 80px;
    }


    .price-sect .price-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        width: 100%;

        margin-top: 42px;
    }


    .price-sect .price-col {
        display: contents;
        gap: 12px;
    }

    /* 01. 3D 정밀진단 */
    .price-sect .price-col:nth-child(1) .item:nth-child(1) {
        order: 1;
    }

    /* 02. 부분교정 */
    .price-sect .price-col:nth-child(2) .item:nth-child(1) {
        order: 2;
    }

    /* 03. 전체교정 */
    .price-sect .price-col:nth-child(1) .item:nth-child(2) {
        order: 3;
    }

    /* 04. 세라믹 교정 */
    .price-sect .price-col:nth-child(2) .item:nth-child(2) {
        order: 4;
    }

    /* 05. 클리피씨 교정 */
    .price-sect .price-col:nth-child(1) .item:nth-child(3) {
        order: 5;
    }

    /* 06. 인비절라인 */
    .price-sect .price-col:nth-child(2) .item:nth-child(3) {
        order: 6;
    }

    .price-sect .price-col+.price-col {
        margin-top: 0;
    }


    .price-sect .price-col .item {
        height: 92px;

        padding: 0 20px 0 24px;

        border-radius: 13px;
    }


    .price-sect .price-col .item::before {
        width: 3px;
        height: 28px;
    }


    .price-sect .price-col .item>strong {
        font-size: 20px;
    }


    .price-sect .price-col .price b {
        font-size: 22px;
    }


    .price-sect .price-col .price span {
        margin-top: 4px;

        padding: 2px 7px;

        font-size: 10px;
    }


    .price-notice {
        margin-top: 24px;
    }


    .price-notice-mark {
        display: block;

        width: 100%;

        padding: 13px 16px 13px 42px;

        border-radius: 14px;

        font-size: 12px;
        line-height: 1.55;

        text-align: left;

        word-break: keep-all;
    }


    .price-notice-mark::before {
        left: 13px;

        width: 20px;
        height: 20px;
    }



    /* ==================================================
       ORTHO BEFORE & AFTER
    ================================================== */

    .ortho-bna-sect {
        padding: 80px 0 85px;
    }


    .ortho-bna-sect .ba-menu {
        justify-content: center;

        gap: 20px;

        margin-top: 38px;
    }


    .ortho-bna-sect .ba-menu button {
        padding-bottom: 9px;

        font-size: 15px;

        white-space: nowrap;
    }


    .ortho-bna-sect .ba-menu button::after {
        height: 2px;
    }


    .ortho-bna-sect .ba-wrap {
        width: 100%;

        margin-top: 30px;
    }


    .ortho-bna-sect .ba-swiper {
        width: 100%;
    }


    .ortho-bna-sect .ba-prev,
    .ortho-bna-sect .ba-next {
        display: none;
    }


    .ortho-bna-sect .ba-pagination {
        margin-top: 20px;
    }



    /* ==================================================
       DENTISTS
    ================================================== */

    .dentists-sect {
        padding: 80px 0 90px;
    }


    .dentists-slide {
        margin-top: 40px;
    }


    .dentists-swiper {
        padding: 20px 0 38px;
    }


    .dentists-swiper .swiper-slide {
        width: 235px;

        transform: scale(.94);
    }


    .dentists-swiper .swiper-slide-prev,
    .dentists-swiper .swiper-slide-next {
        transform: scale(.97);
    }


    .dentists-swiper .swiper-slide-active {
        transform: scale(1);
    }


    .dentists-swiper .item {
        border-radius: 18px;
    }


    .doctor-txt {
        bottom: 14px;

        min-width: 105px;

        padding: 8px 13px;
    }


    .doctor-txt div {
        font-size: 15px;
    }

    .dentists-swiper .doctor-txt {
        /* 기존 translateX 대신 GPU 레이어 고정 */
        transform: translate3d(-50%, 0, 0);

        background-color: rgba(255, 255, 255, .88);

        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;

        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;

        will-change: background-color, color;

        transition:
            background-color .65s ease,
            color .65s ease,
            border-color .65s ease;

        /* 모바일에서 그림자 transition 제거 */
        box-shadow: 0 5px 18px rgba(20, 50, 90, .05);
    }


    .dentists-swiper .swiper-slide-active .doctor-txt {
        opacity: 1;

        background-color: #0e326c;
        border-color: #0e326c;
        color: #fff;

        /* 값은 바뀌지만 transition시키지 않음 */
        box-shadow: 0 8px 22px rgba(14, 50, 108, .18);
    }


    /* 비활성 의료진 이미지 */
    .dentists-swiper .doctor-img img {
        opacity: .58;

        transition:
            opacity .85s cubic-bezier(.22, 1, .36, 1),
            filter .85s cubic-bezier(.22, 1, .36, 1);
    }

    /* 활성 의료진 이미지 */
    .dentists-swiper .swiper-slide-active .doctor-img img {
        opacity: 1;
    }


    /* 하단 화이트 그라데이션 */
    .dentists-swiper .doctor-img::after {
        height: 28%;

        background:
            linear-gradient(to bottom,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, .10) 28%,
                rgba(255, 255, 255, .38) 62%,
                rgba(255, 255, 255, .72) 84%,
                rgba(255, 255, 255, .92) 100%);

        opacity: .7;

        transition:
            opacity .85s cubic-bezier(.22, 1, .36, 1);

        will-change: opacity;
    }

    /* 중앙 활성 카드 */
    .dentists-swiper .swiper-slide-active .doctor-img::after {
        opacity: 1;
    }



    /* ==================================================
       REVIEW
    ================================================== */

    .review-sect {
        padding: 80px 0 75px;
    }


    .review-slide {
        margin-top: 40px;
    }


    .review-swiper .swiper-slide {
        width: 290px;
    }


    .review-swiper .item {
        min-height: 215px;

        padding: 26px 25px 30px;

        border-radius: 18px;
    }


    .review-avatar {
        width: 38px;
        height: 38px;
    }


    .review-star {
        font-size: 17px;
    }


    .review-txt {
        margin-top: 25px;

        font-size: 15px;
        line-height: 1.55;
    }


    .review-notice {
        margin-top: 18px;

        font-size: 12px;
    }

}





/* ==================================================
   SMALL MOBILE
   ~ 480px
================================================== */

@media (max-width: 480px) {


    /* 스캔 장비 */

    .scan-visual {
        grid-template-columns: 1fr 1fr;

        gap: 10px;
    }


    .scan-item,
    .scan-item-01,
    .scan-item-02,
    .scan-item-03,
    .scan-item-04 {
        padding: 14px 10px;
    }


    .scan-item .item-img {
        height: 125px;
    }


    .scan-info strong {
        font-size: 14px;
    }


    .scan-info p {
        font-size: 11px;
    }



    /* 가격 */

    .price-sect .price-col .item {
        height: 86px;

        padding-right: 16px;
        padding-left: 20px;
    }


    .price-sect .price-col .item>strong {
        font-size: 18px;
    }


    .price-sect .price-col .price b {
        font-size: 20px;
    }



    /* B&A 카테고리 */

    .ortho-bna-sect .ba-menu {
        gap: 14px;
    }


    .ortho-bna-sect .ba-menu button {
        font-size: 14px;
    }



    /* 의료진 */

    .dentists-swiper .swiper-slide {
        width: 215px;
    }



    /* 후기 */

    .review-swiper .swiper-slide {
        width: 270px;
    }

}









/* ==================================================
   RESPONSIVE - IMPLANT
================================================== */


/* ==================================================
   TABLET
   768px ~ 1279px
================================================== */

@media (min-width: 768px) and (max-width: 1279px) {


    /* ==================================================
       IMPLANT INTRO
    ================================================== */

    .imp-intro-sect {
        padding: 100px 0 90px;
    }


    .imp-ba-wrap {
        width: 100%;
        max-width: 1100px;

        margin-top: 60px;
    }


    .imp-ba-swiper {
        width: calc(100% - 100px);
    }


    .imp-ba-prev,
    .imp-ba-next {
        width: 32px;
        height: 32px;
    }


    .imp-ba-prev {
        left: 12px;
    }


    .imp-ba-next {
        right: 12px;
    }


    .imp-ba-pagination {
        margin-top: 28px;
    }



    /* ==================================================
       CUSTOM IMPLANT - SCROLL
       기존 애니메이션 구조 유지
    ================================================== */

    .imp-custom-scroll {
        height: 420vh;
    }


    .imp-custom-circle-wrap {
        transform:
            translate(-50%, -50%) scale(.68);
    }



    /* ==================================================
       CUSTOM IMPLANT DETAIL
    ================================================== */

    .imp-custom-detail {
        padding: 110px 0 130px;
    }


    .imp-custom-detail-wrap {
        width: 100%;
        max-width: 1000px;
        height: 650px;

        margin-top: 65px;
    }


    .imp-custom-model {
        top: 30px;

        width: 320px;
        height: 540px;
    }


    .imp-custom-part-01 {
        width: 200px;
        height: 185px;
    }


    .imp-custom-part-02 {
        top: 165px;

        width: 125px;
        height: 170px;
    }


    .imp-custom-part-03 {
        top: 305px;

        width: 98px;
        height: 220px;
    }


    .imp-custom-info {
        width: 280px;
    }


    .imp-custom-info .item-img {
        height: 155px;
    }


    .imp-custom-info .info-txt {
        padding: 20px 22px 23px;
    }


    .imp-custom-info .info-txt strong {
        font-size: 18px;
    }


    .imp-custom-info-01 {
        left: 0;
        top: 70px;
    }


    .imp-custom-info-02 {
        right: 0;
        top: 230px;
    }


    .imp-custom-info-03 {
        left: 0;
        bottom: 0;
    }


    .imp-custom-point .point-num {
        width: 42px;
        height: 42px;

        font-size: 14px;
    }


    .imp-custom-point strong {
        font-size: 16px;
    }


    .imp-custom-point-01 {
        left: -20px;
        top: 80px;
    }


    .imp-custom-point-02 {
        left: 255px;
        top: 230px;
    }


    .imp-custom-point-03 {
        left: -18px;
        top: 375px;
    }



    /* ==================================================
       DIGITAL IMPLANT
    ================================================== */

    .imp-3d-sect {
        padding: 110px 0 120px;
    }


    .imp-3d-wrap {
        width: 100%;
        max-width: 1050px;
        height: 680px;

        margin-top: 45px;
    }


    .imp-3d-visual {
        top: 40px;

        width: 700px;
        height: 580px;
    }


    .imp-3d-bg {
        width: 610px;
        height: 480px;
    }


    .imp-3d-ring {
        width: 700px;
        height: 700px;
    }


    .imp-3d-point span {
        width: 42px;
        height: 42px;

        font-size: 14px;
    }


    .imp-3d-point strong {
        font-size: 21px;
    }


    .imp-3d-point.point-01 {
        left: 25px;
        top: 410px;
    }


    .imp-3d-point.point-02 {
        left: 80px;
        top: 185px;
    }


    .imp-3d-point.point-03 {
        top: 45px;
    }


    .imp-3d-point.point-04 {
        right: 80px;
        top: 185px;
    }


    .imp-3d-point.point-05 {
        right: 15px;
        top: 400px;
    }


    .imp-3d-info-item {
        width: 250px;
    }


    .imp-3d-info-item .item-img {
        height: 145px;
    }


    .imp-3d-info-item .info-txt {
        min-height: 105px;

        padding: 17px 20px 20px;
    }


    .imp-3d-info-item .info-txt strong {
        font-size: 18px;
    }


    .imp-3d-info-item.info-01 {
        left: 0;
        top: 300px;
    }


    .imp-3d-info-item.info-02 {
        left: 40px;
        top: 130px;
    }


    .imp-3d-info-item.info-03 {
        left: 50%;
        top: -40px;

        transform: translateX(-50%) translateY(15px);
    }


    .imp-3d-sect.is-03 .imp-3d-info-item.info-03 {
        transform: translateX(-50%) translateY(0);
    }


    .imp-3d-info-item.info-04 {
        right: 40px;
        top: 130px;
    }


    .imp-3d-info-item.info-05 {
        right: 0;
        top: 300px;
    }



    /* ==================================================
       ALL ON X
    ================================================== */

    .imp-allonx-sect {
        padding: 110px 0 120px;
    }


    .imp-allonx-main {
        width: min(760px, 90%);

        margin-top: 55px;
    }


    .imp-allonx-main .item-img {
        height: auto;
        aspect-ratio: 820 / 460;
    }


    .imp-allonx-message {
        margin-top: 55px;

        font-size: 21px;
    }


    .imp-allonx-list {
        gap: 35px;

        margin-top: 50px;
    }


    .imp-allonx-list .item {
        width: 180px;
    }


    .imp-allonx-list .item .item-img {
        width: 155px;
        height: 155px;
    }


    .imp-allonx-list .item p {
        margin-top: 20px;

        font-size: 15px;
    }



    /* ==================================================
       IMPLANT PRICE
    ================================================== */

    .imp-price-sect {
        padding: 110px 0 130px;
    }


    .imp-price-wrap {
        gap: 24px;

        margin-top: 60px;
    }


    .imp-price-item {
        width: min(43vw, 430px);
        height: auto;

        aspect-ratio: 480 / 280;
    }



    /* ==================================================
       IMPLANT B&A
    ================================================== */

    .imp-bna-sect {
        padding: 110px 0 120px;
    }


    .imp-bna-sect .ba-menu {
        gap: 38px;

        margin-top: 50px;
    }


    .imp-bna-sect .ba-menu button {
        font-size: 18px;
    }


    .imp-bna-sect .ba-wrap {
        width: 100%;
        max-width: 1100px;

        margin-top: 40px;
    }


    .imp-bna-sect .ba-swiper {
        width: calc(100% - 100px);
    }


    .imp-bna-sect .ba-prev,
    .imp-bna-sect .ba-next {
        width: 32px;
        height: 32px;
    }


    .imp-bna-sect .ba-prev {
        left: 12px;
    }


    .imp-bna-sect .ba-next {
        right: 12px;
    }



    /* ==================================================
       4 POINT
    ================================================== */

    .imp-point-sect {
        padding: 110px 0 120px;
    }


    .imp-point-sect .sect-title {
        font-size: 44px;
    }


    .imp-point-list {
        width: 100%;
        max-width: 950px;

        gap: 20px;

        margin-top: 60px;
    }


    .imp-point-list .item {
        height: 310px;
    }


    .imp-point-list .item-txt {
        left: 24px;
        right: 24px;
        bottom: 24px;
    }


    .imp-point-list .item-txt strong {
        font-size: 24px;
    }


    .imp-point-list .item-txt p {
        font-size: 13px;
    }



    /* ==================================================
       COMFORT
    ================================================== */

    .imp-comport-sect {
        padding: 110px 0 120px;
    }


    .imp-comport-list {
        width: 100%;
        max-width: 1050px;

        gap: 20px;

        margin-top: 60px;
    }


    .imp-comport-list .item-img {
        height: 280px;

        border-radius: 22px;
    }


    .imp-comport-list .item-txt {
        margin-top: 25px;
    }


    .imp-comport-list .item-txt strong {
        font-size: 24px;
    }


    .imp-comport-list .item-txt p {
        font-size: 15px;
    }



    /* ==================================================
       COUNT
       기존 스크롤 JS 구조 유지
    ================================================== */

    .imp-count-scroll {
        height: 360vh;
    }


    .imp-count-stage {
        grid-template-columns: 210px minmax(0, 1fr) 240px;

        gap: 25px;

        margin-top: 80px;
    }


    .imp-count-left,
    .imp-count-right {
        height: 290px;
    }


    .imp-count-num-item strong {
        font-size: 7rem;
    }


    .imp-count-num-item span {
        margin-bottom: 6px;

        font-size: 2.8rem;
    }


    .imp-count-stack {
        width: 100%;
        height: 350px;
    }


    .imp-count-card {
        width: 100%;
        height: 315px;

        border-radius: 22px;
    }


    .imp-count-info-item strong {
        font-size: 1.5rem;
    }


    .imp-count-info-item p {
        font-size: 1rem;
    }

}





/* ==================================================
   MOBILE
   ~ 767px
================================================== */

@media (max-width: 767px) {


    /* ==================================================
       IMPLANT INTRO
    ================================================== */

    .imp-intro-sect {
        padding: 80px 0 75px;
    }


    .imp-ba-wrap {
        width: 100%;

        margin-top: 42px;
    }


    .imp-ba-swiper {
        width: 100%;
    }


    .imp-ba-prev,
    .imp-ba-next {
        display: none;
    }


    .imp-ba-pagination {
        margin-top: 20px;
    }


    .imp-ba-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;

        margin: 0 5px !important;
    }


    .imp-ba-pagination .swiper-pagination-bullet-active {
        width: 11px;
        height: 11px;
    }



    /* ==================================================
   CUSTOM IMPLANT - MOBILE
   스크롤 연동 애니메이션
   ~ 767px
================================================== */


    /*
        sticky 화면은 짧게 유지하고,
        바깥 scroll 영역만 길게 잡아 애니메이션 진행거리를 만든다.
    */
    .imp-custom-scroll {
        height: 50svh;
    }

    .imp-custom-sticky {
        height: 70svh;
        min-height: 540px;
    }

    .imp-custom-circle-wrap {
        left: 50%;
        top: 52%;

        width: 100%;
        height: 190px;

        transform: translate(-50%, -50%);
    }

    .imp-custom-title {
        top: -105px;
        width: 100%;

        font-size: clamp(21px, 6.5vw, 26px);
        line-height: 1.4;
        letter-spacing: -.055em;

        white-space: nowrap;
    }

    .imp-custom-circle {
        width: 112px;
        height: 112px;
    }

    .circle-01 {
        --circle-x: -30vw;
    }

    .circle-02 {
        --circle-x: 0px;
    }

    .circle-03 {
        --circle-x: 30vw;
    }

    .imp-custom-circle .circle-txt strong {
        display: block;
        font-size: 14px;
        line-height: 1.3;
        font-weight: 700;
    }

    /* 모바일: 임플란트 원형 카드 보조 설명 숨김 */
    .imp-custom-circle .circle-txt p {
        display: none;
    }

    .imp-custom-result {
        width: 152px;
        height: 152px;
    }

    .imp-custom-result strong {
        font-size: 1.2rem;
        line-height: 1.35;
    }


    /* ==================================================
       CUSTOM IMPLANT DETAIL
    ================================================== */

    .imp-custom-detail {
        padding: 100px 0 90px;
    }


    .imp-custom-detail-wrap {
        position: relative;

        width: 100%;
        height: 400px;

        margin-top: 45px;

        overflow: hidden;
    }


    /* ==========================================
       왼쪽 임플란트 모델
       중심점을 화면 왼쪽 끝에 둬서 절반만 노출
    ========================================== */

    .imp-custom-model {
        left: 17%;
        top: 50%;

        width: 210px;
        height: 350px;

        transform: translate(-50%, -50%);
    }



    /* 01 크라운 */
    .imp-custom-part-01 {
        top: 0;

        width: 132px;
        height: 122px;
    }


    /* 02 맞춤형 지대주 */
    .imp-custom-part-02 {
        top: 109px;

        width: 82px;
        height: 112px;
    }


    /* 03 픽스처 */
    .imp-custom-part-03 {
        top: 202px;

        width: 64px;
        height: 140px;
    }


    /* 모바일에서는 기존 포인트 텍스트 숨김 */
    .imp-custom-point {
        display: none;
    }



    /* ==========================================
       오른쪽 설명 카드
    ========================================== */

    .imp-custom-info,
    .imp-custom-info-01,
    .imp-custom-info-02,
    .imp-custom-info-03 {
        left: auto !important;
        right: 7% !important;
        top: 50% !important;
        bottom: auto !important;

        width: calc(100% - 135px);

        transform:
            translate(18px, -50%) !important;

        opacity: 0;
        visibility: hidden;

        border-radius: 14px;

        transition:
            opacity .45s ease,
            visibility .45s ease,
            transform .55s cubic-bezier(.22, 1, .36, 1);
        z-index: 6;
    }


    /* 활성 카드 */

    .imp-custom-detail.is-01 .imp-custom-info-01,
    .imp-custom-detail.is-02 .imp-custom-info-02,
    .imp-custom-detail.is-03 .imp-custom-info-03 {
        opacity: 1;
        visibility: visible;

        transform:
            translate(0, -50%) !important;
    }


    /* 카드 이미지 */

    .imp-custom-info .item-img {
        height: 125px;
    }


    /* 카드 텍스트 */

    .imp-custom-info .info-txt {
        padding: 18px 18px 20px;
    }

    .imp-custom-info .info-txt strong {
        font-size: 16px;
        line-height: 1.4;
    }

    .imp-custom-info .info-txt p {
        margin-top: 9px;

        font-size: 11px;
        line-height: 1.6;
    }



    /* ==================================================
       DIGITAL IMPLANT - MOBILE
       비주얼 / 포인트 / 설명카드 분리 배치
    ================================================== */

    .imp-3d-sect {
        padding: 80px 0 0;
    }


    .imp-3d-wrap {
        width: 100%;
        height: 570px;
        margin-top: 28px;
    }


    /* 3D 비주얼 영역 */
    .imp-3d-visual {
        left: 50%;
        top: 225px;

        width: 100%;
        height: 330px;

        transform: translateX(-50%);
    }


    /* PC 크기값이 모바일까지 내려오지 않도록 명시적으로 축소 */
    .imp-3d-bg {
        left: 50%;
        top: 61%;
        width: 350px;
        max-width: 108%;
        height: 285px;

        transform: translate(-50%, -50%);
    }

    .imp-3d-bg::after {
        width: 100%;
        height: 76%;
        filter: blur(22px);
    }

    .imp-3d-ring {
        left: 50%;
        top: 60%;

        width: 350px;
        height: 350px;

        border-width: 2px;

        transform: translate(-50%, -50%);
    }


    /* 01 ~ 05 포인트 */
    .imp-3d-point span {
        width: 34px;
        height: 34px;

        font-size: 11px;
    }

    .imp-3d-point strong {
        margin-top: 5px;

        font-size: 12px;
        line-height: 1.15;
    }

    .imp-3d-point.point-01 {
        left: 24px;
        top: 138px;
    }

    .imp-3d-point.point-02 {
        left: 60px;
        top: 52px;
    }

    .imp-3d-point.point-03 {
        left: 50%;
        top: 20px;
        transform: translateX(-50%);
    }

    .imp-3d-point.point-04 {
        right: 60px;
        top: 52px;
    }

    .imp-3d-point.point-05 {
        right: 24px;
        top: 138px;
    }


    /* 설명 카드: 비주얼 바로 아래 독립 배치 */
    .imp-3d-info-box {
        position: absolute;

        left: 12px;
        right: 12px;
        top: 0;
        bottom: auto;

        width: auto;
        height: 205px;
    }


    .imp-3d-info-item,
    .imp-3d-info-item.info-01,
    .imp-3d-info-item.info-02,
    .imp-3d-info-item.info-03,
    .imp-3d-info-item.info-04,
    .imp-3d-info-item.info-05 {
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;

        width: 80%;
        margin: 0 auto;

        transform: translateY(10px);
    }


    .imp-3d-sect.is-01 .imp-3d-info-item.info-01,
    .imp-3d-sect.is-02 .imp-3d-info-item.info-02,
    .imp-3d-sect.is-03 .imp-3d-info-item.info-03,
    .imp-3d-sect.is-04 .imp-3d-info-item.info-04,
    .imp-3d-sect.is-05 .imp-3d-info-item.info-05 {
        transform: translateY(0);
    }


    .imp-3d-info-item .item-img {
        height: 138px;
    }

    .imp-3d-info-item .info-txt {
        min-height: 88px;
        padding: 13px 16px 15px;
    }

    .imp-3d-info-item .info-txt strong {
        font-size: 15px;
        line-height: 1.35;
    }

    .imp-3d-info-item .info-txt p {
        margin-top: 6px;

        font-size: 10.5px;
        line-height: 1.5;
    }



    /* ==================================================
       ALL ON X
    ================================================== */

    .imp-allonx-sect {
        padding: 80px 0 85px;
    }


    .imp-allonx-main {
        width: 100%;

        margin-top: 42px;
    }


    .imp-allonx-main .item-img {
        width: 100%;
        height: auto;

        aspect-ratio: 820 / 460;

        border-radius: 14px;
    }


    .imp-allonx-message {
        margin-top: 42px;

        font-size: 17px;
        line-height: 1.65;

        word-break: keep-all;
    }


    .imp-allonx-message br {
        display: none;
    }


    .imp-allonx-list {
        display: grid;

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

        gap: 10px;

        margin-top: 38px;
    }


    .imp-allonx-list .item {
        width: 100%;
    }


    .imp-allonx-list .item .item-img {
        width: 90px;
        height: 90px;
    }


    .imp-allonx-list .item p {
        margin-top: 14px;

        font-size: 12px;
        line-height: 1.45;
    }



    /* ==================================================
       IMPLANT PRICE
    ================================================== */

    .imp-price-sect {
        padding: 80px 0 90px;
    }


    .imp-price-wrap {
        gap: 14px;
        margin-top: 42px;
    }


    .imp-price-item {
        width: 100%;
        height: auto;

        aspect-ratio: 480 / 280;
    }


    /*
       모바일에서는 큰 장식 원 크기만 축소
    */

    .imp-price-sect::before {
        left: -260px;

        width: 360px;
        height: 360px;
    }


    .imp-price-sect::after {
        left: -280px;

        width: 400px;
        height: 400px;
    }



    /* ==================================================
       IMPLANT B&A
    ================================================== */

    .imp-bna-sect {
        padding: 80px 0 85px;
    }


    .imp-bna-sect .ba-menu {
        gap: 14px;

        margin-top: 38px;
    }


    .imp-bna-sect .ba-menu button {
        padding-bottom: 9px;

        font-size: 14px;

        white-space: nowrap;
    }


    .imp-bna-sect .ba-menu button::after {
        height: 2px;
    }


    .imp-bna-sect .ba-wrap {
        width: 100%;

        margin-top: 30px;
    }


    .imp-bna-sect .ba-swiper {
        width: 100%;
    }


    .imp-bna-sect .ba-prev,
    .imp-bna-sect .ba-next {
        display: none;
    }


    .imp-bna-sect .ba-pagination {
        margin-top: 20px;
    }



    /* ==================================================
       4 POINT
    ================================================== */

    .imp-point-sect {
        padding: 80px 0 90px;

        overflow: hidden;
    }


    /*
       이 섹션은 자체적으로 56px을 다시 지정하고 있어서
       모바일 공통 sect-title보다 우선됨
    */
    .imp-point-sect .sect-title {
        font-size: 32px;
        line-height: 1.32;
    }


    .imp-point-list {
        grid-template-columns: 1fr;

        gap: 14px;

        width: 100%;

        margin-top: 42px;
    }


    .imp-point-list .item {
        width: 100%;
        height: 280px;

        border-radius: 14px;
    }


    .imp-point-list .item-txt {
        left: 22px;
        right: 22px;
        bottom: 22px;
    }


    .imp-point-list .item-txt strong {
        font-size: 22px;
    }


    .imp-point-list .item-txt p {
        margin-top: 8px;

        font-size: 13px;
        line-height: 1.5;
    }


    .imp-point-list .item:hover .item-img img {
        transform: none;
    }



    /* ==================================================
       COMFORT
    ================================================== */

    .imp-comport-sect {
        padding: 80px 0 90px;

        overflow: hidden;
    }


    .imp-comport-list {
        grid-template-columns: 1fr;

        gap: 40px;

        width: 100%;

        margin-top: 42px;
    }


    .imp-comport-list .item-img {
        width: 100%;
        height: auto;

        aspect-ratio: 1.3 / 1;

        border-radius: 18px;
    }


    .imp-comport-list .item-txt {
        margin-top: 20px;
    }


    .imp-comport-list .item-txt strong {
        font-size: 23px;
    }


    .imp-comport-list .item-txt p {
        margin-top: 8px;

        font-size: 14px;
    }


    .imp-comport-list .item:hover .item-img img {
        transform: none;
    }



    /* ==================================================
       COUNT
       스크롤 상태변경 JS는 그대로 사용
    ================================================== */

    .imp-count-scroll {
        height: 320vh;
    }


    .imp-count-sticky {
        height: 100svh;
    }


    .imp-count-sticky .in {
        display: flex;
        flex-direction: column;

        justify-content: center;
    }


    .imp-count-stage {
        display: block;

        width: 100%;

        margin-top: 42px;
    }


    /* 숫자 */

    .imp-count-left {
        position: relative;

        width: 100%;
        height: 80px;
    }


    .imp-count-num-item {
        justify-content: center;
    }


    .imp-count-num-item strong {
        font-size: 4.5rem;
        line-height: .9;
    }


    .imp-count-num-item span {
        margin-bottom: 3px;

        font-size: 2rem;
    }


    /* 이미지 */

    .imp-count-center {
        width: 85%;

        margin: 10px auto 0;
    }


    .imp-count-stack {
        width: 100%;
        height: 230px;
    }


    .imp-count-card {
        width: 100%;
        height: 210px;

        border-radius: 16px;
    }


    /* 설명 */

    .imp-count-right {
        position: relative;

        width: 100%;
        height: 110px;
        text-align: center;
    }


    .imp-count-info-item strong {
        font-size: 18px;
        line-height: 1.35;
    }


    .imp-count-info-item p {
        margin-top: 7px;

        font-size: 13px;
        line-height: 1.5;
    }



    /* ==================================================
       IMPLANT BACKGROUND RINGS
    ================================================== */

    .imp-bna-sect::before,
    .imp-point-sect::before,
    .imp-comport-sect::before,
    .imp-count-sect::before {
        width: 360px;
        height: 360px;

        border-width: 2px;
    }


    .imp-bna-sect::before,
    .imp-comport-sect::before {
        right: -285px;
    }


    .imp-point-sect::before,
    .imp-count-sect::before {
        left: -285px;
    }

}





/* ==================================================
   SMALL MOBILE
   ~ 480px
================================================== */

@media (max-width: 480px) {





    /* 올온엑스 */

    .imp-allonx-list .item .item-img {
        width: 82px;
        height: 82px;
    }


    .imp-allonx-list .item p {
        font-size: 11px;
    }


    /* 4가지 기준 */

    .imp-point-list .item {
        height: 260px;
    }


    /* 카운트 */

    .imp-count-num-item strong {
        font-size: 4rem;
    }


    .imp-count-num-item span {
        font-size: 1.7rem;
    }


    .imp-count-stack {
        height: 210px;
    }


    .imp-count-card {
        height: 190px;
    }

}







/* ==================================================
   RESPONSIVE - SMILE / LAMINATE
================================================== */


/* ==================================================
   TABLET
   768px ~ 1279px
================================================== */

@media (min-width: 768px) and (max-width: 1279px) {


    /* ------------------------------
       INTRO
    ------------------------------ */

    .smile-intro-sect {
        padding: 100px 0 110px;
    }

    .smile-ba-wrap {
        width: 100%;
        max-width: 1100px;
        margin-top: 60px;
    }

    .smile-ba-swiper {
        width: calc(100% - 100px);
    }

    .smile-ba-prev,
    .smile-ba-next {
        width: 32px;
        height: 32px;
    }

    .smile-ba-prev {
        left: 12px;
    }

    .smile-ba-next {
        right: 12px;
    }



    /* ------------------------------
       WHY
    ------------------------------ */

    .smile-why-sect {
        padding: 100px 0 110px;
    }

    .smile-why-sect .sect-title {
        font-size: 44px;
    }

    .smile-why-sect .sect-des {
        margin-top: 28px;
        font-size: 17px;
    }

    .smile-why-list {
        grid-template-columns: repeat(2, 1fr);

        gap: 18px;

        width: calc(100% - 64px);
        max-width: 1000px;

        margin-top: 55px;
    }

    .smile-why-list .item {
        aspect-ratio: 1.25 / 1;
        border-radius: 22px;
    }

    .smile-why-list .item-txt strong {
        font-size: 22px;
    }



    /* ------------------------------
       DIFFERENCE
    ------------------------------ */

    .smile-differe-sect {
        padding-top: 110px;
    }

    .smile-differe-list {
        margin-top: 75px;
    }

    .smile-differe-list .item {
        height: 500px;
    }

    .smile-differe-list .item-txt {
        padding: 0 45px;
    }

    .smile-differe-list .item-txt strong {
        font-size: 38px;
    }

    .smile-differe-list .item-txt p {
        margin-top: 22px;
        font-size: 17px;
    }



    /* ------------------------------
       3 POINT
    ------------------------------ */

    .smile-point-sect {
        padding: 110px 0;
    }

    .smile-point-sect .sect-title {
        font-size: 42px;
    }

    .smile-point-list {
        gap: 18px;

        width: calc(100% - 64px);
        max-width: 1050px;

        margin-top: 55px;
    }

    .smile-point-list .item-img {
        height: auto;
        aspect-ratio: 1.2 / 1;

        border-radius: 22px;
    }

    .smile-point-list .item-txt {
        margin-top: 28px;
    }

    .smile-point-list .item-txt strong {
        font-size: 27px;
    }

    .smile-point-list .item-txt p {
        font-size: 16px;
    }



    /* ------------------------------
       PRICE
    ------------------------------ */

    .smile-price-sect {
        padding: 100px 0 110px;
    }

    .smile-price-sect .smile-price-wrap {
        gap: 60px;

        width: 100%;
        max-width: 1050px;
    }

    .smile-price-sect .price-left {
        width: 38%;
    }

    .smile-price-sect .price-title {
        font-size: 44px;
    }

    .smile-price-sect .price-name {
        width: 140px;
    }

    .smile-price-sect .price-name strong {
        font-size: 27px;
    }

    .smile-price-sect .price-value>strong,
    .smile-price-sect .price-list strong {
        font-size: 40px;
    }

    .smile-price-sect .price-list li {
        grid-template-columns: 38px 145px;
    }

    .smile-price-sect .price-list strong {
        width: 145px;
    }



    /* ------------------------------
       B&A
    ------------------------------ */

    .smail-bna-sect {
        padding-top: 110px;
    }

    .smail-bna-sect .ba-menu {
        gap: 35px;
        margin-top: 50px;
    }

    .smail-bna-sect .ba-menu button {
        font-size: 18px;
    }

    .smail-bna-sect .ba-wrap {
        width: 100%;
        max-width: 1100px;
    }

    .smail-bna-sect .ba-swiper {
        width: calc(100% - 100px);
    }

    .smail-bna-sect .ba-prev,
    .smail-bna-sect .ba-next {
        width: 32px;
        height: 32px;
    }

    .smail-bna-sect .ba-prev {
        left: 12px;
    }

    .smail-bna-sect .ba-next {
        right: 12px;
    }

    .smail-bna-marquee {
        margin-top: 90px;
    }

    .smail-bna-marquee span {
        font-size: clamp(64px, 8vw, 90px);
    }

}




/* ==================================================
   MOBILE
   ~767px
================================================== */

@media (max-width: 767px) {


    /* ==================================================
       INTRO
    ================================================== */

    .smile-intro-sect {
        padding: 80px 0 85px;
    }

    .smile-intro-sect .sect-des {
        word-break: keep-all;
    }

    .smile-ba-wrap {
        width: 100%;
        margin-top: 40px;
    }

    .smile-ba-swiper {
        width: 100%;
    }

    .smile-ba-prev,
    .smile-ba-next {
        display: none;
    }

    .smile-ba-pagination {
        margin-top: 20px;
    }

    .smile-ba-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;

        margin: 0 5px !important;
    }

    .smile-ba-pagination .swiper-pagination-bullet-active {
        width: 11px;
        height: 11px;
    }



    /* ==================================================
       WHY
    ================================================== */

    .smile-why-sect {
        padding: 80px 0 90px;
    }

    .smile-why-sect .sect-title {
        font-size: 30px;
        line-height: 1.32;
    }

    .smile-why-sect .sect-des {
        margin-top: 22px;

        font-size: 15px;
        line-height: 1.65;

        word-break: keep-all;
    }

    .smile-why-sect .sect-des br {
        display: none;
    }


    /*
       4개 카드는 모바일에서 2 x 2
    */
    .smile-why-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 10px;

        width: calc(100% - 30px);

        margin-top: 38px;
    }

    .smile-why-list .item {
        width: 100%;

        aspect-ratio: 1 / 1.08;

        border-radius: 14px;
    }

    .smile-why-list .item-txt {
        left: 10px;
        right: 10px;
        bottom: 16px;
    }

    .smile-why-list .item-txt span {
        margin-bottom: 5px;

        font-size: 11px;
    }

    .smile-why-list .item-txt strong {
        font-size: 15px;
        line-height: 1.3;
    }

    /*
       터치기기에서 불필요한 hover zoom 제거
    */
    .smile-why-list .item:hover .item-img img {
        transform: translateZ(0) scale(1);
    }



    /* ==================================================
       DIFFERENCE
    ================================================== */

    .smile-differe-sect {
        padding: 80px 0 0;
    }

    .smile-differe-sect .sect-des {
        word-break: keep-all;
    }

    .smile-differe-sect .sect-des br {
        display: none;
    }

    .smile-differe-list {
        margin-top: 45px;
    }


    /*
       PC 50:50 가로형 →
       모바일 이미지 + 텍스트 세로형
    */
    .smile-differe-list .item,
    .smile-differe-list .item.reverse {
        display: flex;
        flex-direction: column;

        height: auto;
    }


    /*
       reverse도 모바일에서는 항상
       이미지 먼저 → 텍스트
    */
    .smile-differe-list .item-img {
        order: 1;

        width: 100%;
        height: auto;

        aspect-ratio: 1.35 / 1;
    }

    .smile-differe-list .item-txt {
        order: 2;

        width: 100%;
        height: auto;

        padding: 38px 24px 48px;
    }

    .smile-differe-list .txt-inner {
        max-width: none;
    }

    .smile-differe-list .item-txt .txt-inner::before {
        margin-bottom: 17px;

        font-size: 12px;
    }

    .smile-differe-list .item-txt strong {
        font-size: 27px;
        line-height: 1.35;
    }

    .smile-differe-list .item-txt strong br {
        display: none;
    }

    .smile-differe-list .item-txt strong::after {
        width: 32px;
        height: 2px;

        margin-top: 18px;
    }

    .smile-differe-list .item-txt p {
        margin-top: 18px;

        font-size: 15px;
        line-height: 1.65;
    }

    .smile-differe-list .item-txt p br {
        display: none;
    }



    /* ==================================================
       3 POINT
    ================================================== */

    .smile-point-sect {
        padding: 80px 0 90px;
    }

    .smile-point-sect .sect-title {
        font-size: 30px;
        line-height: 1.32;
    }

    .smile-point-list {
        grid-template-columns: 1fr;

        gap: 38px;

        width: 100%;

        margin-top: 42px;
    }

    .smile-point-list .item-img {
        width: 100%;
        height: auto;

        aspect-ratio: 1.35 / 1;

        border-radius: 16px;
    }

    .smile-point-list .item-txt {
        margin-top: 18px;
    }

    .smile-point-list .item-txt strong {
        font-size: 24px;
    }

    .smile-point-list .item-txt p {
        margin-top: 8px;

        font-size: 14px;
        line-height: 1.55;
    }



    /* ==================================================
       PRICE
    ================================================== */

    .smile-price-sect {
        padding: 75px 0 85px;
    }

    .smile-price-sect .smile-price-wrap {
        display: block;

        width: 100%;
    }

    .smile-price-sect .price-left {
        width: 100%;
    }

    .smile-price-sect .price-title {
        font-size: 30px;
        line-height: 1.35;
    }

    .smile-price-sect .price-right {
        width: 100%;

        margin-top: 45px;
    }

    .smile-price-sect .price-item {
        gap: 15px;
    }

    .smile-price-sect .price-item.laminate {
        padding-bottom: 30px;
        margin-bottom: 30px;
    }

    .smile-price-sect .price-name {
        width: auto;
    }

    .smile-price-sect .price-name strong {
        padding-left: 13px;

        font-size: 19px;
    }

    .smile-price-sect .price-name strong::before {
        left: 0;
        top: 8px;

        width: 5px;
        height: 5px;
    }

    .smile-price-sect .price-value>strong {
        font-size: 30px;
    }

    .smile-price-sect .price-value>p {
        margin-top: 6px;

        font-size: 11px;
    }


    /* 치아미백 리스트 */
    .smile-price-sect .price-list li {
        grid-template-columns: 30px auto;

        column-gap: 10px;
    }

    .smile-price-sect .price-list li+li {
        margin-top: 13px;
    }

    .smile-price-sect .price-list span {
        width: 30px;

        font-size: 13px;
    }

    .smile-price-sect .price-list strong {
        width: auto;

        font-size: 30px;
    }



    /* ==================================================
       BEFORE & AFTER
    ================================================== */

    .smail-bna-sect {
        padding: 80px 0 0;
    }

    .smail-bna-sect .sect-des {
        word-break: keep-all;
    }

    .smail-bna-sect .sect-des br {
        display: none;
    }

    .smail-bna-sect .ba-menu {
        gap: 13px;

        margin-top: 38px;
    }

    .smail-bna-sect .ba-menu button {
        padding-bottom: 9px;

        font-size: 13px;

        white-space: nowrap;
    }

    .smail-bna-sect .ba-menu button::after {
        height: 2px;
    }

    .smail-bna-sect .ba-wrap {
        width: 100%;

        margin-top: 28px;
    }

    .smail-bna-sect .ba-swiper {
        width: 100%;
    }

    .smail-bna-sect .ba-prev,
    .smail-bna-sect .ba-next {
        display: none;
    }

    .smail-bna-sect .ba-pagination {
        margin-top: 20px;
    }


    /* 하단 흐르는 텍스트 */
    .smail-bna-marquee {
        margin-top: 65px;
    }

    .smail-bna-marquee span {
        padding-right: 18px;

        font-size: 52px;
    }

}









/* ==================================================
   RESPONSIVE - INFO
   진료안내
================================================== */


/* ==================================================
   TABLET
   768px ~ 1279px
================================================== */

@media (min-width: 768px) and (max-width: 1279px) {


    /* ==================================================
       LOCATION / 진료시간
    ================================================== */

    .info-location {
        padding: 100px 0 110px;
    }


    /*
       PC에서 58px을 별도로 지정하고 있어서
       태블릿에서 다시 축소
    */
    .info-location .sect-title {
        font-size: 44px;
        line-height: 1.3;
    }


    .info-location .sect-des {
        margin-top: 30px;

        font-size: 18px;
        line-height: 1.65;
    }


    /*
       PC 1420px 2열 →
       태블릿에서는 위아래 배치
    */
    .info-location-wrap {
        grid-template-columns: 1fr;

        gap: 55px;

        width: 100%;
        max-width: 950px;

        margin-top: 65px;
    }


    /* 지도 */

    .info-map {
        height: 430px;

        border-radius: 22px;
    }


    /* 지도 바로가기 */

    .info-map-links {
        justify-content: center;
        flex-wrap: wrap;

        gap: 10px;

        margin-top: 20px;
    }


    .info-map-links a {
        min-width: 125px;
        height: 46px;

        padding: 0 17px;

        font-size: 14px;
    }


    /* 오른쪽 정보 */

    .info-location-detail {
        gap: 32px;

        width: 100%;
        max-width: 760px;

        margin: 0 auto;
    }


    .info-location-item {
        grid-template-columns: 38px 1fr;

        gap: 17px;
    }


    .info-location-item .info-icon {
        width: 38px;
        height: 38px;
    }


    .info-location-item .info-icon img,
    .info-location-item.parking .info-icon img {
        width: 30px;
        height: 30px;
    }


    .info-location-item .info-txt>strong {
        font-size: 22px;
    }


    .info-location-item .phone-num {
        font-size: 36px !important;
    }


    .info-location-item.address .point {
        font-size: 21px;
    }


    /* 진료시간 */

    .time-row {
        grid-template-columns: 115px auto 1fr;
        column-gap: 15px;
        min-height: 46px;
    }

    .time-row strong,
    .time-row span {
        font-size: 20px;
    }




    /* ==================================================
       INTERIOR
    ================================================== */

    .info-interior {
        padding: 110px 0 105px;
    }


    .info-interior .sect-des {
        margin-top: 28px;
    }


    .info-interior-slide {
        margin-top: 55px;
    }


    .info-interior-swiper .swiper-slide {
        width: 480px;
    }


    .info-interior-swiper .item-img {
        height: 320px;

        border-radius: 22px;
    }


    .info-interior-pagination {
        margin-top: 32px;
    }

}




/* ==================================================
   MOBILE
   ~ 767px
================================================== */

@media (max-width: 767px) {


    /* ==================================================
       LOCATION
    ================================================== */

    .info-location {
        padding: 80px 0 90px;
    }


    /*
       PC의 58px 지정 덮어쓰기
    */
    .info-location .sect-title {
        font-size: 30px;
        line-height: 1.35;

        word-break: keep-all;
    }


    .info-location .sect-title br {
        display: none;
    }


    .info-location .sect-des {
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.65;

        word-break: keep-all;
    }


    .info-location .sect-des br {
        display: none;
    }



    /* ==================================================
       MAP + INFO
    ================================================== */

    .info-location-wrap {
        display: grid;
        grid-template-columns: 1fr;

        gap: 48px;

        width: 100%;

        margin-top: 42px;
    }


    /* 지도 */

    .info-map-wrap {
        width: 100%;
        min-width: 0;
    }


    .info-map {
        width: 100%;
        height: 320px;

        border-radius: 16px;
    }



    /* ==================================================
       지도 바로가기
       모바일 2 x 2
    ================================================== */

    .info-map-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;

        width: 100%;

        margin-top: 12px;
    }


    .info-map-links a {
        min-width: 0;
        width: 100%;
        height: 44px;

        gap: 7px;

        padding: 0 10px;

        border-radius: 12px;

        font-size: 13px;
    }


    .map-icon {
        width: 17px;
        height: 17px;

        flex-shrink: 0;
    }


    .map-icon img {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }


    /* 모바일 hover 제거 */

    .info-map-links a:hover {
        transform: none;
    }



    /* ==================================================
       LOCATION DETAIL
    ================================================== */

    .info-location-detail {
        gap: 27px;

        width: 100%;
        min-width: 0;
    }


    .info-location-item {
        grid-template-columns: 32px minmax(0, 1fr);

        gap: 12px;

        width: 100%;
    }


    /* 아이콘 */

    .info-location-item .info-icon,
    .info-location-item.parking .info-icon {
        width: 32px;
        height: 32px;
    }


    .info-location-item .info-icon img,
    .info-location-item.parking .info-icon img {
        width: 25px;
        height: 25px;
    }


    /* 일반 텍스트 */

    .info-location-item .info-txt {
        min-width: 0;

        padding-top: 1px;
    }


    .info-location-item .info-txt>strong {
        font-size: 18px;
        line-height: 1.45;

        word-break: keep-all;
    }


    /* 전화 */

    .info-location-item .phone-num {
        font-size: 28px !important;
        line-height: 1.1 !important;
    }


    /* 주소 포인트 */

    .info-location-item.address .point {
        margin-top: 5px;

        font-size: 16px;
        line-height: 1.45;
    }



    /* ==================================================
       진료시간
    ================================================== */

    .info-location-item.time .info-txt {
        width: 100%;
        min-width: 0;
    }


    .time-row {
        display: grid;

        grid-template-columns: 80px max-content max-content;
        justify-content: start;
        align-items: center;

        column-gap: 6px;
        row-gap: 0;

        min-height: 38px;
        padding: 3px 0;
    }

    .time-row strong {
        grid-column: 1;
        grid-row: 1;
        font-size: 18px;
    }

    .time-row span {
        grid-column: 2;
        grid-row: 1;
        font-size: 18px;
    }

    .time-row em {
        grid-column: 3;
        grid-row: 1;

        justify-self: start;
        align-self: center;

        margin: 0;
        height: 22px;
        padding: 0 7px;

        font-size: 9px;
        line-height: 1;
        white-space: nowrap;
    }



    /* ==================================================
       INTERIOR
    ================================================== */

    .info-interior {
        padding: 80px 0 80px;
    }


    .info-interior .sect-title {
        font-size: 30px;
        line-height: 1.35;

        word-break: keep-all;
    }


    .info-interior .sect-title br {
        display: none;
    }


    .info-interior .sect-des {
        margin-top: 20px;

        font-size: 15px;
        line-height: 1.65;

        word-break: keep-all;
    }


    .info-interior .sect-des br {
        display: none;
    }



    /* ==================================================
       INTERIOR SWIPER
    ================================================== */

    .info-interior-slide {
        margin-top: 40px;
    }


    /*
       JS는 slidesPerView:auto라
       슬라이드 CSS 폭만 바꾸면 됨
    */
    .info-interior-swiper .swiper-slide {
        width: calc(100vw - 54px);
        max-width: 360px;
    }


    .info-interior-swiper .item-img {
        width: 100%;
        height: auto;

        aspect-ratio: 1.48 / 1;

        border-radius: 16px;
    }


    .info-interior-pagination {
        margin-top: 26px;
    }


    .info-interior-pagination .swiper-pagination-bullet {
        width: 9px;
        height: 9px;

        margin: 0 5px !important;
    }


    .info-interior-pagination .swiper-pagination-bullet-active {
        width: 9px;
        height: 9px;

        transform: scale(1.3);
    }

}

/* 모바일 전용 - All-on-X 밑줄 애니메이션 속도 조정 */
@media (max-width: 767px) {
    .imp-allonx-message.is-animated .line-01 {
        animation: allonxMarker 1.15s cubic-bezier(.22, 1, .36, 1) .18s forwards;
    }

    .imp-allonx-message.is-animated .line-02 {
        animation: allonxMarker .95s cubic-bezier(.22, 1, .36, 1) .92s forwards;
    }
}










/* 하단 상담신청바 시작 260512 */
.event-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 36px;
    z-index: 90;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;
    box-sizing: border-box;

    transform: translate3d(0, 130%, 0);
    opacity: 0;
    pointer-events: none;

    transition:
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.35s ease;

    will-change: transform, opacity;
}

.event-bottom-bar.is-bottom-hidden {
    transform: translate3d(0, 130%, 0);
    opacity: 0;
    pointer-events: none;
}

.event-bottom-bar.is-bottom-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    pointer-events: auto;
}

.event-bottom-bar .quick-form {
    width: min(1280px, calc(100vw - 120px));
}

.event-bottom-bar .quick-form-inner {
    display: flex;
    align-items: center;

    width: 100%;
    height: 82px;
    padding: 0 26px 0 64px;
    box-sizing: border-box;

    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16);
}

.event-bottom-bar .quick-form-title {
    flex: 0 0 180px;

    color: #30415e;

    font-size: 1.28rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.event-bottom-bar .quick-field {
    position: relative;

    flex: 0 0 170px;
    height: 42px;
    margin-left: 26px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #d4d4d4;
}

.event-bottom-bar .quick-field input,
.event-bottom-bar .quick-field select {
    width: 100%;
    height: 100%;
    padding: 0;

    border: 0;
    outline: 0;
    background: transparent;

    color: #333;

    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    font-family: inherit;
}

.event-bottom-bar .quick-field input::placeholder {
    color: #999;
}

.event-bottom-bar .quick-field select {
    appearance: none;
    -webkit-appearance: none;

    color: #999;
    cursor: pointer;
}

.event-bottom-bar .quick-field-select::after {
    content: "\f107";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);

    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.8rem;
    color: #111;

    pointer-events: none;
}

/* 연락처 */
.event-bottom-bar .quick-phone {
    flex: 0 0 220px;
    gap: 10px;
}

.event-bottom-bar .quick-phone .phone-label {
    flex: 0 0 auto;

    color: #999;

    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.03em;
    white-space: nowrap;
}

.event-bottom-bar .quick-phone .phone-inputs {
    display: flex;
    align-items: center;
    flex: 1;

    min-width: 0;
}

.event-bottom-bar .quick-phone select {
    flex: 0 0 42px;
    width: 42px;

    color: #333;
}

.event-bottom-bar .quick-phone input {
    width: 42px;

    color: #333;
    text-align: center;
}

.event-bottom-bar .quick-phone .phone-dash {
    margin: 0 4px;

    color: #999;

    font-size: 0.95rem;
    font-weight: 500;
}

/* 개인정보 동의 */
.event-bottom-bar .quick-agree {
    flex: 0 0 190px;

    display: flex;
    align-items: center;

    margin-left: 36px;

    color: #999;

    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.event-bottom-bar .quick-agree .agree-check {
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;

    accent-color: #33489b;
    cursor: pointer;
}

.event-bottom-bar .quick-agree label {
    cursor: pointer;
}

/* 신청 버튼 */
.event-bottom-bar .btn-submit {
    flex: 0 0 150px;

    height: 50px;
    margin-left: auto;

    border: 0;
    border-radius: 999px;

    background: #263f83;
    color: #fff;

    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    font-family: inherit;

    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.event-bottom-bar .btn-submit:hover {
    background: #1f336c;
    transform: translateY(-2px);
}

/* 이벤트 개인정보 모달 */
.event-privacy-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;

    width: 100vw;
    height: 100vh;

    background: rgba(0, 0, 0, 0.6);
}

.event-privacy-modal .modal-content {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 50%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;

    padding: 70px 50px;
    box-sizing: border-box;

    background: #fff;
    color: #333;
}

.event-privacy-modal .sb-close {
    position: absolute;
    right: 15px;
    top: 10px;

    color: #ddd;
    font-size: 2.5em;
    cursor: pointer;
}

.event-privacy-modal .sb-close:hover {
    color: #000;
}

.event-privacy-modal .modal-content h3 {
    padding-bottom: 0.5rem;

    border-bottom: 2px dotted #ccc;

    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.08rem;
}

.event-privacy-modal .modal-content>.txt-box>ul {
    margin-top: 2rem;
}

.event-privacy-modal .modal-content>.txt-box>ul li {
    position: relative;

    margin-top: 0.4rem;
    padding-left: 0.7rem;

    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.3rem;
}

.event-privacy-modal .modal-content>.txt-box>ul>li::before {
    content: "\f111";
    position: absolute;
    top: -0.1rem;
    left: 0;

    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 0.5rem;
}

.event-privacy-modal .modal-content>.txt-box>ul>li>ul {
    margin-bottom: 0.5rem;
}

.event-privacy-modal .modal-content>.txt-box>ul>li>ul>li {
    position: relative;

    margin-top: 0.3rem;
    padding-left: 0.7rem;

    line-height: 1.2rem;
}

.event-privacy-modal .modal-content>.txt-box>ul>li>ul>li::before {
    content: "-";
    position: absolute;
    top: 0;
    left: 0;

    font-weight: 300;
}

/* 하단 상담신청바 끝 260512 */





/* ==================================================
   MOBILE CONTACT - DESKTOP HIDE
================================================== */
.mobile-contact-bar,
.mobile-db-close {
    display: none;
}

/* ==================================================
   MOBILE CONTACT / COUNSEL FINAL
   - 하단 3버튼 고정
   - 상담신청 클릭 시 DB폼 슬라이드업
================================================== */
@media (max-width: 767px) {


    .event-bottom-bar input,
    .event-bottom-bar select,
    .event-bottom-bar textarea {
        font-size: 16px !important;
    }

    .event-bottom-bar,
    .event-bottom-bar.is-bottom-hidden,
    .event-bottom-bar.is-bottom-visible {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;

        z-index: 900 !important;

        width: 100% !important;
        height: auto !important;

        padding: 0 !important;

        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;

        pointer-events: none !important;
    }


    /* 하단 3버튼 */
    .mobile-contact-bar {
        position: relative !important;

        left: auto !important;
        right: auto !important;
        bottom: auto !important;

        z-index: 1 !important;

        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;

        width: 100% !important;
        height: auto !important;

        padding-bottom: env(safe-area-inset-bottom);

        background: #fff;

        pointer-events: auto !important;

        box-shadow:
            0 -6px 24px rgba(14, 38, 74, .14);
    }




    /* DB폼은 별도로 화면 아래에 숨겨둠 */
    .event-bottom-bar .quick-form {
        position: fixed !important;

        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        z-index: 20 !important;

        width: 100% !important;

        transform: translateY(105%);
        opacity: 0;

        pointer-events: none;

        transition:
            transform .4s cubic-bezier(.22, 1, .36, 1),
            opacity .3s ease;
    }


    /* 상담신청 누르면 폼 등장 */
    .event-bottom-bar.is-mobile-open .quick-form {
        transform: translateY(0);
        opacity: 1;

        pointer-events: auto;
    }


    /* 폼 열리면 하단 3버튼 숨김 */
    .event-bottom-bar.is-mobile-open .mobile-contact-bar {
        opacity: 0;
        visibility: hidden;

        pointer-events: none;
    }


    .event-bottom-bar .quick-form-inner {
        position: relative;

        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;

        width: 100%;
        height: auto;

        padding:
            22px 18px calc(20px + env(safe-area-inset-bottom));

        background: #fff;

        border-radius: 22px 22px 0 0;

        box-shadow:
            0 -14px 38px rgba(0, 0, 0, .16);
    }

    .event-bottom-bar .quick-form-title {
        grid-column: 1 / -1;

        flex: none;

        margin: 0 38px 8px 0;

        color: #30415e;

        font-size: 21px;
        line-height: 1.2;
        font-weight: 750;
    }

    .mobile-db-close {
        position: absolute;

        right: 14px;
        top: 13px;

        z-index: 3;

        display: flex;
        align-items: center;
        justify-content: center;

        width: 36px;
        height: 36px;

        padding: 0;

        border: 0;
        border-radius: 50%;

        background: #f3f5f8;

        color: #536176;

        font-size: 25px;
        line-height: 1;
        font-weight: 300;
    }


    /* 입력 필드 공통 */
    .event-bottom-bar .quick-field {
        position: relative;

        flex: none;

        width: 100%;
        height: 48px;

        margin: 0;
        padding: 0 12px;

        display: flex;
        align-items: center;

        border: 1px solid #dfe3e9;
        border-radius: 10px;

        background: #fff;
    }

    .event-bottom-bar .quick-field input,
    .event-bottom-bar .quick-field select {
        width: 100%;
        height: 100%;

        padding: 0;

        font-size: 16px !important;
    }


    /* 상담내용 */
    .event-bottom-bar .quick-field-select {
        grid-column: 1 / 2;
        grid-row: 2;
    }

    /* 성함 */
    .event-bottom-bar .quick-field:not(.quick-field-select):not(.quick-phone) {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    /* 연락처 */
    .event-bottom-bar .quick-phone {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* 개인정보 */
    .event-bottom-bar .quick-agree {
        grid-column: 1 / 2;
        grid-row: 4;
    }

    /* 신청하기 */
    .event-bottom-bar .btn-submit {
        grid-column: 2 / 3;
        grid-row: 4;

        width: 100%;
        height: 46px;

        margin: 0;
        padding: 0 16px;

        border: 0;
        border-radius: 10px;

        background: linear-gradient(135deg, #263f83 0%, #3159b3 100%);
        color: #fff;

        font-size: 14px;
        line-height: 1;
        font-weight: 700;
        letter-spacing: -.03em;

        display: flex;
        align-items: center;
        justify-content: center;

        box-shadow: 0 5px 14px rgba(38, 63, 131, .18);

        cursor: pointer;

        transition:
            background .25s ease,
            box-shadow .25s ease,
            transform .2s ease;
    }

    .event-bottom-bar .btn-submit:hover {
        background: linear-gradient(135deg, #203671 0%, #294fa3 100%);
        transform: none;
    }

    .event-bottom-bar .btn-submit:active {
        transform: scale(.98);
    }

    .event-bottom-bar .quick-agree {
        grid-column: 1 / 2;
        grid-row: 4;

        display: flex;
        align-items: center;

        min-height: 46px;

        margin: 0;
        padding: 0 2px;

        font-size: 11px;
        line-height: 1.35;
    }
}


/* 폼 오픈 시 뒤 배경 */
body.db-form-open::before {
    content: "";

    position: fixed;
    inset: 0;

    z-index: 899;

    background: rgba(6, 19, 39, .42);
}

body.db-form-open {
    overflow: hidden;
}

/* DB폼 열렸을 때 주변 플로팅 UI 숨김 */
body.db-form-open .side-quick-menu,
body.db-form-open .scroll-top-btn {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}


/* ------------------------------
       개인정보 모달
    ------------------------------ */
.event-privacy-modal .modal-content {
    width: calc(100% - 32px);
    max-width: none;
    max-height: 78svh;

    padding: 52px 22px 30px;

    border-radius: 14px;
}

.event-privacy-modal .modal-content h3 {
    font-size: 18px;
    letter-spacing: -.04em;
}

.event-privacy-modal .modal-content>.txt-box>ul {
    margin-top: 18px;
}

.event-privacy-modal .modal-content>.txt-box>ul li {
    font-size: 12px;
    line-height: 1.55;
}


/* TOP 버튼은 하단 3버튼 위 */
.scroll-top-btn {
    right: 14px;
    bottom: calc(72px + env(safe-area-inset-bottom));

    width: 48px;
    height: 48px;
}
}



/* ==================================================
   MOBILE QUICK MENU FINAL OVERRIDE
   치아교정 / 임플란트 / 심미치료 / 진료안내 4단
================================================== */
@media (max-width: 767px) {
    .side-quick-menu {
        position: fixed !important;
        left: auto !important;
        right: 8px !important;
        top: 50% !important;
        bottom: auto !important;
        z-index: 700 !important;

        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;

        width: auto !important;
        padding: 4px !important;
        gap: 4px !important;

        border-radius: 14px !important;
        background: rgba(255, 255, 255, .96) !important;

        transform: translateY(-50%) translateX(12px) !important;
    }

    .side-quick-menu.is-visible {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(-50%) translateX(0) !important;
    }

    .side-quick-menu .side-quick-item,
    .side-quick-menu .side-quick-item:hover,
    .side-quick-menu .side-quick-item.active {
        display: flex !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 48px !important;
        padding: 0 4px !important;
        border-radius: 10px !important;
    }

    .side-quick-menu .side-quick-item:nth-child(4) {
        display: flex !important;
    }

    .side-quick-menu .side-quick-num,
    .side-quick-menu .side-quick-txt small {
        display: none !important;
    }

    .side-quick-menu .side-quick-txt {
        margin: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        text-align: center !important;
    }

    .side-quick-menu .side-quick-txt strong {
        margin: 0 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
    }
}


/* ==================================================
   MOBILE BOTTOM CONTACT FINAL OVERRIDE
================================================== */
@media (max-width: 767px) {
    .event-bottom-bar {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }

    .mobile-contact-bar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 9990 !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

        width: 100% !important;
        min-height: 58px !important;
        margin: 0 !important;
        padding: 0 0 env(safe-area-inset-bottom) !important;

        background: #fff !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;

        pointer-events: auto !important;

        box-shadow: 0 -6px 24px rgba(14, 38, 74, .14) !important;
    }

    .mobile-contact-bar.is-hidden {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 110%, 0) !important;
        pointer-events: none !important;
    }

    .mobile-contact-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        height: 58px !important;
        min-width: 0 !important;

        border: 0 !important;
        border-right: 1px solid #e8ebf0 !important;

        background: #fff !important;
        color: #30415e !important;

        font-size: 14px !important;
        font-weight: 700 !important;
        text-align: center !important;
    }

    .mobile-contact-btn.mobile-db-open {
        background: #263f83 !important;
        color: #fff !important;
    }

    .mobile-contact-btn:last-child {
        border-right: 0 !important;
    }

    .event-bottom-bar.is-mobile-open .mobile-contact-bar {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translate3d(0, 110%, 0) !important;
        pointer-events: none !important;
    }

    /* 본문이 하단바에 가리지 않도록 */
    body {
        padding-bottom: calc(58px + env(safe-area-inset-bottom));
    }
}