/* ========================================================== LEEPEEM PLASTIC SURGERY — treatment-sub.css 시술 상세 페이지(treatment-legacy) 본문 전용 스타일. 원본 leepeemps.co.kr 의 common.css(Meyer 리셋) + style__v=260116.css(공통 유틸) + sub__v=260119.css(.sub_common*) + sub3__v=260119.css(fulllift/facelift) 를 1:1 이식하되, 전역 오염을 막기 위해 본문 래퍼 `.legacy-sub` 하위로 스코프한다. ⚠ 전역 오염 방지: - 원본의 `html, body, div, h1.., p, a, ul, li, img...` Meyer 리셋과 `body{...}` 규칙은 그대로 두면 chrome(.site-header/.site-footer)· breadcrumb(Tailwind) 까지 오염시킨다. - 따라서 전역 선택자는 모두 `.legacy-sub` 하위로 재스코프했다. - sub__v / sub3__v 규칙은 원본부터 100% 클래스/ID 스코프(.sub_common*, .fulllift*, #sub_visual...)라 그대로 두어도 누수 없음 → verbatim. - 이 CSS 는 LegacyChrome 처럼 로만 로드되어 다른 라우트로 클라이언트 네비게이션 시 DOM 에서 제거된다(JS import 금지). ========================================================== */ /* ---------------------------------------------------------- 0. renew.css 전역 토큰 폴리필 (renew.css 미로드 cascade 대비) renew.css 가 함께 로드되면 동일 값이므로 무해. 색 팔레트/폰트 불변. ---------------------------------------------------------- */ :root { --color-bg: #f7f7f5; --color-accent: #0abab5; --color-accent-2: #107977; --color-accent-tint: #e3f4f3; --color-accent-text: #0e4c4b; --color-text: #181818; --color-white: #FFF; --color-border-hair: rgba(42, 42, 38, .12); --section-pad-wide: clamp(96px, 11vw, 160px); --section-pad-tight: clamp(72px, 8vw, 120px); --display-weight: 500; --display-ls: -.01em; --display-lh: 1.12; --body-lh: 1.72; --body-ls: -0.015em; --overline-ls: .22em; --ease-lux: cubic-bezier(.22, 1, .36, 1); --transition-lux: all .6s var(--ease-lux); --reveal-dur: .7s; --measure: 68ch; } /* ---------------------------------------------------------- 1. 본문 컨테이너 리셋 (원본 common.css Meyer reset → .legacy-sub 스코프) ---------------------------------------------------------- */ .legacy-sub, .legacy-sub div, .legacy-sub span, .legacy-sub applet, .legacy-sub object, .legacy-sub iframe, .legacy-sub h1, .legacy-sub h2, .legacy-sub h3, .legacy-sub h4, .legacy-sub h5, .legacy-sub h6, .legacy-sub p, .legacy-sub blockquote, .legacy-sub pre, .legacy-sub a, .legacy-sub abbr, .legacy-sub acronym, .legacy-sub address, .legacy-sub big, .legacy-sub cite, .legacy-sub code, .legacy-sub del, .legacy-sub dfn, .legacy-sub em, .legacy-sub img, .legacy-sub ins, .legacy-sub kbd, .legacy-sub q, .legacy-sub s, .legacy-sub samp, .legacy-sub small, .legacy-sub strike, .legacy-sub strong, .legacy-sub sub, .legacy-sub sup, .legacy-sub tt, .legacy-sub var, .legacy-sub u, .legacy-sub i, .legacy-sub center, .legacy-sub dl, .legacy-sub dt, .legacy-sub dd, .legacy-sub ol, .legacy-sub ul, .legacy-sub li, .legacy-sub fieldset, .legacy-sub form, .legacy-sub label, .legacy-sub legend, .legacy-sub table, .legacy-sub caption, .legacy-sub tbody, .legacy-sub tfoot, .legacy-sub thead, .legacy-sub tr, .legacy-sub th, .legacy-sub td, .legacy-sub article, .legacy-sub aside, .legacy-sub canvas, .legacy-sub details, .legacy-sub embed, .legacy-sub figure, .legacy-sub figcaption, .legacy-sub footer, .legacy-sub header, .legacy-sub hgroup, .legacy-sub menu, .legacy-sub nav, .legacy-sub output, .legacy-sub ruby, .legacy-sub section, .legacy-sub summary, .legacy-sub time, .legacy-sub mark, .legacy-sub audio, .legacy-sub video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } .legacy-sub article, .legacy-sub aside, .legacy-sub details, .legacy-sub figcaption, .legacy-sub figure, .legacy-sub footer, .legacy-sub header, .legacy-sub hgroup, .legacy-sub menu, .legacy-sub nav, .legacy-sub section { display: block; } .legacy-sub ol, .legacy-sub ul, .legacy-sub li { list-style: none; } .legacy-sub blockquote, .legacy-sub q { quotes: none; } .legacy-sub blockquote:before, .legacy-sub blockquote:after, .legacy-sub q:before, .legacy-sub q:after { content: ''; content: none; } .legacy-sub table { border-collapse: collapse; border-spacing: 0; } .legacy-sub img { vertical-align: middle; } .legacy-sub .clearfix:after { content: ""; display: block; clear: both; } .legacy-sub a { color: inherit; text-decoration: none; outline: none; } /* ---------------------------------------------------------- 2. 본문 기준 타이포 (원본 style__v=260116.css body{} → .legacy-sub 스코프) ---------------------------------------------------------- */ .legacy-sub { line-height: 1; font-size: 18px; color: var(--color-text); /* 사이트 전역 폰트 통일 — Freesentation 단독 사용 제거, chrome(:root) 토큰을 따른다 (ko=Pretendard, 비ko=로케일별 Noto) */ font-family: var(--font-sans, 'Pretendard'), sans-serif; font-weight: 400; letter-spacing: var(--body-ls); } .legacy-sub * { box-sizing: border-box; } /* [A] 본문 컨테이너 line-height 복원 (L81 전역 line-height:1 → 본문 단위 var(--body-lh)) */ .legacy-sub .row_con p, .legacy-sub .txt_box p, .legacy-sub .text_box p { line-height: var(--body-lh); } /* [A] 장문 단락 가독 폭 제한 */ .legacy-sub .sub_common1_item_box .txt_box p, .legacy-sub .sub_common6_con .txt_box p, .legacy-sub .sub_common7 .item .txt_box p, .legacy-sub .sub_common12 .circle_list li p { max-width: var(--measure); } /* ---------------------------------------------------------- 3. 원본 공통 유틸 (common.css + style__v=260116.css) — .legacy-sub 스코프 ---------------------------------------------------------- */ .legacy-sub #sub_wrap { width: 100%; overflow: hidden; } .legacy-sub .row_con { width: 1200px; margin: 0 auto; position: relative; } /* ────────────────────────────────────────────────────────── 전 메뉴 페이지 공통 톤 (내시경 페이지에서 확립한 기준을 전체로 통일). ① 헤딩 폰트 = Freesentation(깔끔한 한글 산세리프) — 2026-06-15 본문·제목 단일 통일. 전역 토큰과 동일하지만, renew.css/legacy-chrome.css 미로드 cascade 대비 폴리필로 유지. self-host(next/font, --font-free) 1순위 — CDN @import(treatment-fonts.css) 제거됨. ② 배경 = 홈(#f7f7f5)과 브랜드 틸을 잇는 톤. (대부분 섹션이 background:var(--color-bg) → 변수 1줄로 일괄 적용) ────────────────────────────────────────────────────────── */ .legacy-sub { --font-serif: var(--font-free), "Freesentation", "Pretendard", "Noto Sans KR", sans-serif; /* 2026-06-09: 칙칙한 민트(#E9F2EC) → 화사한 화이트로 통일(메인 제외 전 세부페이지). color_white 텍스트는 위쪽 라이트화 규칙이 다크로 강제하므로 흰 배경에서도 가독 안전. */ --color-bg: #FFFFFF; background-color: var(--color-bg); } .legacy-sub #sub_wrap { background-color: var(--color-bg); } .legacy-sub .only_m { display: none; } .legacy-sub .only_pc { display: block; } .legacy-sub .view_1200 { display: none; } .legacy-sub .hide_1200 { display: block; } /* ========================================================== [FIX] Tailwind preflight 가 img/video 를 display:block 으로 강제해 원본 레거시의 text-align:center 기반 이미지 중앙정렬이 전부 깨진다 (이미지가 block 이 되어 좌측으로 쏠림). 레거시 스코프 안에서만 inline-block 으로 복원 → 래퍼 div 의 text-align:center 가 다시 작동해 원본 동작 1:1 회복. 명시적 display:block / margin:auto / flex 규칙은 명시도 우위라 그대로 우선한다. ========================================================== */ .legacy-sub img, .legacy-sub video { display: inline-block; vertical-align: middle; } /* [WRAP-fix] 한글 제목이 단어 중간에서 끊겨(예: "설계"→"설"/"계") 어색해지는 것 방지 */ .legacy-sub h2, .legacy-sub h3, .legacy-sub h4 { word-break: keep-all; } .legacy-sub .text-center { text-align: center; } .legacy-sub .text-left { text-align: left; } .legacy-sub .text-right { text-align: right; } .legacy-sub .color_white * { color: var(--color-white) !important; } /* [B2] 틸/형광 텍스트 → accent-text(밝은 배경) */ .legacy-sub .color1, .legacy-sub .color4, .legacy-sub .color5 { color: var(--color-accent-text); } .legacy-sub .color2, .legacy-sub .color7 { color: var(--color-accent-text); } /* #49fffc/#77fffb 형광 제거 */ /* [B2-fix] .color3 는 "리핌만의 노하우!" 오버라인 전용 — 밝은(크림) 배경 위라 흰색이면 안 보인다. 강조 틸(accent)로 바꿔 가독성 + 강조효과 동시 확보. */ .legacy-sub .color3 { color: var(--color-accent); font-weight: 700; } /* [C] 과도 세로 패딩 → 토큰 clamp */ .legacy-sub .pd150 { padding: var(--section-pad-wide) 0; } /* [트렌디 인퓨전] 스크롤 리빌 (TreatmentReveal.tsx). .reveal-on 은 JS 가 부여 → JS 실패/비활성 시 콘텐츠는 항상 보임(점진적 향상). */ .legacy-sub.reveal-on .rv { opacity: 0; transform: translateY(48px); transition: opacity .85s var(--ease-lux), transform .85s var(--ease-lux); will-change: opacity, transform; } .legacy-sub.reveal-on .rv.is-inview { opacity: 1; transform: none; } /* 이미지 줌아웃 리빌(에디토리얼) — 컨테이너 페이드 + 내부 img scale 1.1→1 */ .legacy-sub.reveal-on .rv-img { opacity: 0; overflow: hidden; transition: opacity .9s var(--ease-lux); will-change: opacity; } .legacy-sub.reveal-on .rv-img img { transform: scale(1.1); transition: transform 1.2s var(--ease-lux); will-change: transform; } .legacy-sub.reveal-on .rv-img.is-inview { opacity: 1; } .legacy-sub.reveal-on .rv-img.is-inview img { transform: none; } @media (prefers-reduced-motion: reduce) { .legacy-sub.reveal-on .rv, .legacy-sub.reveal-on .rv-img, .legacy-sub.reveal-on .rv-img img { opacity: 1 !important; transform: none !important; transition: none !important; } } .legacy-sub .all_img_con { width: 100%; text-align: center; } /* 중앙정렬은 컨테이너 text-align 으로 — 과거 transform(left:50%+translateX) 은 스크롤 리빌(.rv-img img{transform})이 덮어써 우측 쏠림 버그, display:block 은 .only_m{display:none} 보다 우선해 모바일 이미지가 PC 에 노출되는 버그가 있었음. text-align:center 는 둘 다 회피(인라인 img 유지 → only_m 숨김 보존, transform 미사용 → reveal 무충돌). */ .legacy-sub .all_img_con img { max-width: 2000px; width: 100%; } .legacy-sub .mt30 { margin-top: 30px; } .legacy-sub .mt50 { margin-top: 50px; } .legacy-sub .mt60 { margin-top: 60px; } .legacy-sub .mt70 { margin-top: 70px; } .legacy-sub .mt80 { margin-top: 80px; } .legacy-sub .mt90 { margin-top: 90px; } .legacy-sub .mt100 { margin-top: 100px; } .legacy-sub .mb20 { margin-bottom: 20px; } .legacy-sub .mb40 { margin-bottom: 40px; } .legacy-sub .mb80 { margin-bottom: 80px; } .legacy-sub .pt150 { padding-top: var(--section-pad-wide); } @media all and (max-width: 1200px) { .legacy-sub .row_con { width: 800px; } .legacy-sub .view_1200 { display: block; } .legacy-sub .hide_1200 { display: none; } } @media all and (max-width: 800px) { .legacy-sub { font-size: max(3vw, 13px); } .legacy-sub .row_con { width: 90%; } .legacy-sub .only_m { display: block; } .legacy-sub .only_pc { display: none; } /* [C] pd150 모바일 override 제거 — clamp 토큰이 반응형 */ .legacy-sub .mt30 { margin-top: 5vw; } .legacy-sub .mt50 { margin-top: 6vw; } .legacy-sub .mt60 { margin-top: 7vw; } .legacy-sub .mt70 { margin-top: 8vw; } .legacy-sub .mt80 { margin-top: 10vw; } .legacy-sub .mt90 { margin-top: 12vw; } .legacy-sub .mt100 { margin-top: 13vw; } .legacy-sub .mb20 { margin-bottom: 3vw; } .legacy-sub .mb40 { margin-bottom: 6vw; } .legacy-sub .mb80 { margin-bottom: 10vw; } /* [C] pt120/pt130/pt150 모바일 override 제거 — clamp 토큰이 반응형 */ } /* ========================================================== 4. sub__v=260119.css 원본 1:1 (이미 .sub_common / #sub_visual 스코프) ========================================================== */ /*---------------------------------------------------------- SUB_COMMON -------------------------------------------------------*/ #sub_visual{width:100%;height:800px;overflow:hidden;position:relative;} #sub_visual .row_con{height:100%;} .sub_visual_bg{ /* 원본 board_v.png 는 미포팅 자산(404) — 동일 보드 비주얼 계열인 bna_v.webp 로 대체 */ position:absolute;top:0; left:0; width:100%; height:100%; background: url("/board/common/img/bna_v.webp") 50% 50%/cover no-repeat; overflow:hidden; transform:scale(1.06) rotate(.001deg); -webkit-transform:scale(1.06) rotate(.001deg); animation: sub1_1_top_view_bg forwards 1.2s 0.2s var(--ease-lux); -webkit-animation: sub1_1_top_view_bg forwards 1.2s 0.2s var(--ease-lux); } @keyframes sub1_1_top_view_bg { 0% { transform:scale(1.06) rotate(.001deg); -webkit-transform:scale(1.06) rotate(.001deg); } 100% { transform:scale(1) rotate(.001deg); -webkit-transform:scale(1) rotate(.001deg); } } /* [HERO-fix] 히어로 배경 사진이 밝아(크림/연틸) 흰 글자가 안 보이는 문제 → 배경 위에 다크 스크림을 깔아 모든 히어로에서 흰 텍스트 가독성을 보장한다. 데스크탑은 텍스트가 우측, 모바일은 중앙이라 우측을 더 진하게 + 전체 베이스 틴트. */ .sub_visual_bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(8,16,18,.22) 0%, rgba(8,16,18,.34) 45%, rgba(8,16,18,.62) 100%); } /* 중앙 정렬 히어로(aftercare 등 .center 텍스트) — 우측 편중 스크림으로는 중앙 텍스트를 못 덮어 밝은 사진(라운지 블라인드 등) 위 흰 글자가 씻겨 보임 → 균일 스크림으로 교체 */ .pimcare#sub_visual .sub_visual_bg::after{ background:linear-gradient(180deg, rgba(8,16,18,.38) 0%, rgba(8,16,18,.5) 100%); } /* 모바일(<=800)은 텍스트가 중앙 — 우측 편중 그라데이션이 무력하므로 균일/세로 스크림 */ @media all and (max-width:800px){ .sub_visual_bg::after{ background:linear-gradient(180deg, rgba(8,16,18,.32) 0%, rgba(8,16,18,.48) 55%, rgba(8,16,18,.4) 100%); } } .sub_visual_text_wrap{position:absolute; top:50%; right:0; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%);color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45);z-index:1;} .sub_visual_text_wrap.center{right:auto;left:50%;transform:translate(-50%,-50%);} .sub_visual_text_wrap .sub_tit{overflow:hidden;} .sub_visual_text_wrap .title{overflow:hidden;margin:40px 0 50px;} .sub_visual_text_wrap .text_box{overflow:hidden;} .sub_visual_text_wrap .sub_tit h4{ font-family: var(--font-montserrat); font-size:clamp(11px,.9vw,13px); letter-spacing:var(--overline-ls); font-weight:600; /* [HERO-fix] 히어로는 다크 스크림 위 흰 텍스트 통일 — 오버라인도 밝은 틸틴트로 */ color:var(--color-accent-tint); } .sub_visual_text_wrap .title h2{ text-shadow:none; font-family:var(--font-serif); font-size:clamp(38px,4.5vw,60px); font-weight:var(--display-weight); letter-spacing:var(--display-ls); line-height:var(--display-lh); animation-delay:0.35s; } .sub_visual_text_wrap .text_box .line{width:24px;height:1px;background:#fff;box-shadow:none;margin-bottom:20px;animation-delay:0.35s;display:inline-block;} .sub_visual_text_wrap .text_box p{font-size:22px;line-height:var(--body-lh);text-shadow:none;animation-delay:0.35s;} .sub_visual_text_ani{ transform:translateY(24px); -webkit-transform:translateY(24px); opacity:0; animation: sub_visual_text_ani forwards .9s 0.2s var(--ease-lux); -webkit-animation: sub_visual_text_ani forwards .9s 0.2s var(--ease-lux); } @keyframes sub_visual_text_ani { 0% {transform:translateY(24px);opacity:0;} 100% {transform: translateY(0);opacity:1;} } .img_box.w100 img{width:100%;} .sub_title h4{font-size:clamp(11px,.9vw,13px);font-family: var(--font-montserrat);letter-spacing:var(--overline-ls);font-weight:500;color:var(--color-accent-text);text-shadow:none;} .sub_title h3{font-family:var(--font-serif);font-size:clamp(38px,4.5vw,60px);padding:24px 0 0;font-weight:var(--display-weight);letter-spacing:var(--display-ls);line-height:var(--display-lh);white-space:normal;text-shadow:none;} .sub_title p{font-size:22px;line-height:var(--body-lh);margin-top:75px;} .sub_common1_con{position:relative;} .sub_common1_con .bg_box{width:100%;height:370px;background:var(--color-accent-tint);position:absolute;bottom:0;z-index:-1;border-radius:0 150px 0 0;} .sub_common1_item_box{display:flex;align-items:center;justify-content:space-between;} .sub_common1_item_box.align_top{align-items:flex-start;} .sub_common1_item_box .txt_box p{margin-top:75px;font-size:22px;} /* 안면거상술 인트로 문단 — 좌측 쏠림 제거: 타이틀+이미지 아래 전체 폭 중앙 정렬(.fulllift1_con 스코프) */ .legacy-sub .fulllift1_con .fulllift1_intro{max-width:780px;margin:clamp(40px,4vw,64px) auto clamp(8px,1.5vw,24px);text-align:center;font-size:22px;line-height:1.62;word-break:keep-all;} /* 아래 섹션과의 과한 빈 간격 축소 — 하단 패딩·배경 틴트 높이 조정 */ .legacy-sub .fulllift1_con.pd150{padding-bottom:clamp(48px,5vw,72px);} .legacy-sub .fulllift1_con .bg_box{height:clamp(180px,20vw,250px);} .sub_common2_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);} .sub_common2_con .sub_title h4 .line{width:559px;height:2px;background:var(--color-accent);display:inline-block;margin:0 17px;} .sub_common2_item_list{margin-top:120px;} .sub_common2_item_list li{width:1020px;height:170px;border:2px solid var(--color-accent);border-radius:30px;overflow:hidden;display:flex;align-items:center;position:relative;} .sub_common2_item_list li:nth-child(even){float:right;} .sub_common2_item_list li:not(:last-child){margin-bottom:clamp(40px,5vw,80px);} .sub_common2_item_list li > div{width:50%;} .sub_common2_item_list li .left_item{} .sub_common2_item_list li .right_item{padding-left:30px;} .sub_common2_item_list li .right_item .icon{position:absolute;top:12px;right:20px;} .sub_common2_item_list li .right_item .tit{font-size:24px;color:var(--color-accent-text);font-weight:700;line-height:1.2em;} .sub_common2_item_list li .right_item .line{width:20px;height:1px;background:var(--color-border-hair);margin:20px 0 15px;} .sub_common2_item_list li .right_item .txt > p{font-size:18px;} .sub_common4_con{background:var(--color-accent-tint);border-radius:0 0 90px 90px;} .sub_common5_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);} .sub_common5_item_box .item{display:flex;justify-content:center;align-items:center;gap:100px;} .sub_common5_item_box .item:not(:first-child){margin-top:var(--section-pad-tight);} .sub_common5_item_box .item:nth-child(even){flex-direction:row-reverse;} .sub_common5_item_box .item .txt_box h3{color:var(--color-accent-text);font-size:30px;font-weight:700;line-height:1.2em;display:inline-block;margin-bottom:25px;} .sub_common5_item_box .item .txt_box h3:after{content:"";width:100%;height:2px;background:var(--color-accent);display:block;margin-top:5px;} .sub_common5_item_box .item .txt_box p{font-size:24px;} .sub_common5_item_box .item .img_box{} .sub_common6_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);text-align:center;} .sub_common6_con .img_box{display:flex;justify-content:center;gap:140px;} .sub_common6_con .txt_box p{color:var(--color-text);font-size:22px;margin-top:40px;} /* 목거상·이마거상 인트로 문단 — 중앙 정렬 균형 줄바꿈·줄간격 통일(섹션 스코프 → 공유 클래스 무영향) */ .legacy-sub .necklift9_con .txt_box p, .legacy-sub .foreheadlift7_con .txt_box p{max-width:760px;margin-left:auto;margin-right:auto;line-height:1.7;word-break:keep-all;text-wrap:balance;} .legacy-sub .necklift9_con .txt_box p + p, .legacy-sub .foreheadlift7_con .txt_box p + p{margin-top:32px;} .sub_common7_item_box{} .sub_common7_item_box .item{position:relative;} .sub_common7_item_box .item > div{display:flex;justify-content:space-between;align-items:center;position:static;} .sub_common7_item_box .item:not(:first-child){margin-top:var(--section-pad-tight);} .sub_common7_item_box .item:nth-child(even) > div{flex-direction:row-reverse;} .sub_common7_item_box .item .txt_box .num{color:var(--color-accent-text);letter-spacing:0;font-weight:500;font-family: var(--font-montserrat);font-size:70px;} .sub_common7_item_box .item .txt_box .num span{position:relative;} .sub_common7_item_box .item .txt_box .num span:after{content:"";width:30px;height:2px;background:var(--color-accent);position:absolute;bottom:5px;left:50%;transform:translateX(-50%);} .sub_common7_item_box .item .txt_box h3{font-size:30px;font-weight:700;margin:20px 0 35px;} .sub_common7_item_box .item .txt_box p{font-size:22px;} .sub_common7_item_box .item .txt_box.color_white .num span:after{background:#fff;} .sub_common7_item_box .video_wrap{width:600px;height:481px;overflow:hidden;border-radius:300px;} .sub_common7_item_box .video_wrap video{width:100%;height:100%;object-fit:cover;object-position: center;} .sub_common8_item_box{display:flex;align-items:center;box-shadow:0 12px 32px rgba(0,0,0,.1);border-radius:30px;overflow:hidden;} .sub_common8_item_box > div{width:50%;} .sub_common8_item_box .img_box{} .sub_common8_item_box .img_box img{} /* Personalized 패널 — 브라이트 틸(#0abab5) 면+흰 텍스트(대비 ~2.2:1)는 구 브랜드 잔재 → 딥틸(#107977)로 전환해 메인 컬러 규율·흰 텍스트 대비(~5.9:1) 동시 충족 */ .sub_common8_item_box .txt_box{background:var(--color-accent-2);height:auto;min-height:0;padding:var(--section-pad-tight) clamp(24px,4vw,56px);color:#fff;border-radius:0 30px 30px 0;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 12px 32px rgba(0,0,0,.1);} /* 'Hearth Stone'(서드파티 CDN 스크립트체) 제거 — 통일된 본문 폰트(Freesentation)로 장식 텍스트 렌더 */ .sub_common8_item_box .txt_box h3{font-family: var(--font-serif);font-size:95px;opacity:.3;} .sub_common8_item_box .txt_box .line{width:1px;height:100px;background:#fff;display:inline-block;margin:20px 0 95px;} .sub_common8_item_box .txt_box p{font-size:24px;} .sub_common10_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);text-align:center;} .sub_common10_item_box{display:flex;gap:30px;justify-content:center;} .sub_common10_item_box .item{} .sub_common10_item_box .item img{} .sub_common10_item_box .item h3{color:var(--color-accent-text);font-size:30px;font-weight:700;margin:20px 0;} .sub_common10_item_box .item p{color:var(--color-text);} .sub_common11_con{position:relative;} .sub_common11_con.bg_view{background:url("/common/images/sub/sub_common11_bg.webp?v=1") center/cover no-repeat;}/*인물배경이 있을때,.bg_view 사용*/ .sub_common11_con.bg_view:after{filter: opacity(0.7);}/*인물배경이 있을때,.bg_view 사용*/ .sub_common11_con .row_con{z-index:2;} .sub_common11_con:after{content:"";width:100%;height:374px;background:var(--color-accent-tint);position:absolute;z-index:1;bottom:0;} .sub_common11_con .graph_box{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:40px;} .sub_common11_con .graph_box .box_list{display:flex;justify-content:center;gap:30px;} .sub_common11_con .graph_box .box_list .img{text-align:center;} .sub_common11_con .graph_box .box_list .img img{margin-bottom:30px;} .sub_common11_con .graph_box .box_list .txt{width:381px;min-height:173px;height:auto;background:var(--color-white);border:1px solid var(--color-border-hair);box-shadow:none;border-radius:10px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;} .sub_common11_con .graph_box .box_list .txt h3{font-size:30px;margin-bottom:10px;font-weight:700;} .sub_common11_con .graph_box .box_list .txt p{} /* [B6] sub_common11 bg_view PNG 무력화 → 라이트 */ .legacy-sub .sub_common11_con.bg_view{background-image:none;background-color:var(--color-bg);color:var(--color-text);} /* [ALIGN-fix] margin-top 146px 는 그래프 없는 "1:1 맞춤설계 / INFORMATION" 레이아웃에서 제목과 박스 사이 큰 빈공간을 만들어 다수 페이지에서 데드존 발생 → 적정 간격으로 축소. */ .sub_common11_con .information_box{width:100%;height:411px;background:var(--color-white);border:1px solid var(--color-border-hair);box-shadow:none;border-radius:10px;text-align:center;margin-top:clamp(48px,5vw,72px);padding-top:55px;} .sub_common11_con .information_box .title{font-size:60px;font-weight:var(--display-weight);font-family:var(--font-serif);letter-spacing:var(--display-ls);color:var(--color-accent-text);} .sub_common11_con .information_box .icon_list{display:flex;align-items:center;justify-content:center;margin:55px 0 40px;} .sub_common11_con .information_box .icon_list li{width:20%;} .legacy-sub .sub_common11_con .information_box .icon_list li:not(:last-child){border-right:1px solid var(--color-border-hair);} .sub_common11_con .information_box .icon_list li img{} .sub_common11_con .information_box .icon_list li h5{font-weight:700;font-size:22px;letter-spacing:0;margin-top:20px;} .sub_common11_con .information_box .icon_list li p{font-size:22px;letter-spacing:0;} .sub_common11_con .information_box .etc{color:#333;} .sub_common12_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);} /* [ALIGN-fix] 모든 sub_common12 사용처가 이미지 없이 txt_box(추천 원형 리스트)만 가진다. 원래 2단(이미지+텍스트)용 width:50% 가 남아 원형들이 좌측 절반에 몰리고 우측이 비었다 → 전체폭·중앙정렬로 교정(추천 섹션 의도에 맞게 직관적으로). */ .sub_common12_item_box{display:flex;justify-content:center;} .sub_common12_item_box .txt_box{width:100%;max-width:1060px;text-align:center;} .sub_common12_item_box .circle_list{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;} .sub_common12_item_box .circle_list li{width:221px;height:221px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;} .sub_common12_item_box .circle_list li p{font-size:20px;font-weight:bold;} .legacy-sub .sub_common12 .circle_list li{background:var(--color-accent-2);color:var(--color-white);} .sub_common12_item_box .circle_list li:nth-child(1){background:var(--color-accent-2);color:var(--color-white);} .sub_common12_item_box .circle_list li:nth-child(2){background:var(--color-accent-2);color:var(--color-white);} .sub_common12_item_box .circle_list li:nth-child(3){background:var(--color-white);color:var(--color-accent-text);} .sub_common12_item_box .circle_list li:nth-child(4){background:var(--color-white);color:var(--color-accent-text);} /* [ALIGN-fix] 흰색 원(3·4번)이 연두 배경 위에서 거의 안 보임 → 틸 테두리로 채움 원과 짝 맞춤 */ .sub_common12_item_box .circle_list li:nth-child(3), .sub_common12_item_box .circle_list li:nth-child(4){border:2px solid var(--color-accent-2);} .sub_common13_con .sub_title h3:nth-child(2):after{content:"";width:1px;height:100px;background:var(--color-accent);display:block;margin:60px auto;} .sub_common13_con .sub_title h3 .underline{display:inline-block;} .sub_common13_con .sub_title h3 .underline:after{content:"";width:100%;height:14px;background:url("/common/images/sub/sub_common13_underline.png") center/contain no-repeat;display:block;} .sub_common13_item_box{display:flex;flex-wrap:wrap;justify-content:center;row-gap: 20px;column-gap: 30px;} .sub_common13_item_box .item{width:585px;height:270px;position:relative;isolation:isolate;color:#fff;box-shadow:0 12px 32px rgba(0,0,0,.14);border-radius:14px;overflow:hidden;} .sub_common13_item_box .item img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:-2;} /* 밝은 사진(수술포·장비 하이라이트) 위 흰 본문이 씻겨 보임 → 하단 가중 다크 그라데이션. isolation:isolate 스택 내에서 img(-2) 위, 텍스트 아래에 깔린다. */ .sub_common13_item_box .item::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top, rgba(8,38,35,.72) 0%, rgba(8,38,35,.28) 55%, rgba(8,38,35,.06) 100%);} .sub_common13_item_box .item .txt{position:absolute;left:40px;bottom:30px;} .sub_common13_item_box .item .txt h3{font-size:30px;font-weight:700;} .sub_common13_item_box .item .txt p{line-height:1.5em;margin-top:20px;} .sub_common14_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);} .sub_common14_con .sub_title{color:var(--color-text);} /* 주치의 CTA — 원장 사진을 위로, 글을 사진 아래로, 전체 중앙정렬. 두 마크업 구조 모두 대응: img_box 가 sub_title 의 형제(A형) / 자식(B형). order:-1 로 사진을 맨 앞(위)으로 올린다. */ .sub_common14_con .row_con{display:flex;flex-direction:column;align-items:center;text-align:center;} .sub_common14_con .sub_title{display:flex;flex-direction:column;align-items:center;text-align:center;width:100%;} .sub_common14_con .img_box{order:-1;margin:0 0 50px;} .sub_common14_con .img_box img{margin:0 auto;} /*---------------------------------------------------------- 01.병원소개 -------------------------------------------------------*/ #sub_visual.about .sub_visual_bg{background-image:url("/page/about/img/about_v.webp");} #sub_visual.info .sub_visual_bg{background-image:url("/page/about/img/info_v.webp");} /* 인사말 */ .intro1_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);} .intro2_con{background:var(--color-accent-tint);} .intro2_item_box{display:flex;justify-content:center;align-items:flex-start;gap:40px;} .intro2_item_box .item{text-align:center;} .intro2_item_box .item img{width:210px;height:auto;margin:0 auto;} .intro2_item_box .item p{font-size:27px;line-height:1.5em; margin-top:34px;} .interior_slider{margin-top:50px;} .interior_slider .item img{width:100%;} .interior_slider .item p{display:none;} .intro3_con .interior_slider .slick-arrow{width:23px;height:41px;background-size:contain;background-position:center;background-repeat:no-repeat;text-indent:-9999em;position:absolute;top:50%;transform:translateY(-50%);z-index:10;background-color:transparent;border:none;transition:var(--transition-lux);} .intro3_con .interior_slider .slick-arrow.slick-prev{background-image:url('/page/about/img/interior_prev.png');left:-80px;margin-left:0;} .intro3_con .interior_slider .slick-arrow.slick-next{background-image:url('/page/about/img/interior_next.png');right:-80px;margin-right:0;} /*의료진소개*/ .doctor1_con{padding:var(--section-pad-wide) 0;} .doctor_profile_con{display:flex;justify-content:center;flex-wrap:wrap;gap:30px;} .doctor_profile_item{position:relative;} .doctor_pop_item{/*position:fixed;background:rgba(0,0,0,.3);top:0;left:0;right:0;bottom:0;z-index:999999;display:none;*/display:block;position:relative;} .doctor_pop_box{width:1306px;/*height:1261px;max-height:90vh;*/height:auto;background:#fff;/*position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);*/display:flex;position:relative;} .doctor_pop_box .img_box{position:relative;width:564px;} .doctor_pop_box .img_box img{width:100%;height:100%;object-fit: cover;} .doctor_pop_box .img_box p{font-size:24px;color:#fff;line-height:1.5em;position:absolute;bottom:45px;left:50%;transform:translateX(-50%);width:100%;text-align:center;} .doctor_pop_box .txt_box{position:relative;width:calc(100% - 564px);padding-top:45px;/*overflow-y:auto;*/} .doctor_pop_box .txt_box .name{font-size:45px;font-weight:700;padding-left:60px;} .doctor_pop_box .txt_box .name span{font-size:22px;display:block;font-weight:400;padding-top:20px;} .doctor_pop_box .txt_box h4{font-size:22px;font-weight:700;} .doctor_pop_box .txt_box .history{padding-left:60px;margin-top:30px;} .doctor_pop_box .txt_box .history li span{line-height: 1.5em;display: inline-block;vertical-align: top;} .doctor_pop_box .txt_box .history li p{font-size:22px;line-height:1.5em;display:inline-block;padding-left:5px;max-width: calc(100% - 10px);vertical-align: middle;} .doctor_pop_box .txt_box .bottom_banner{background:var(--color-accent-2);color:#fff;font-weight:var(--display-weight);font-size:35px;letter-spacing:var(--display-ls);font-family:var(--font-serif);width:100%;padding:25px 0;text-align:center;position:relative;margin-top:50px;} .doctor2_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);} .doctor2_con .tit_box h3{font-family:var(--font-serif);font-weight:var(--display-weight);font-size:clamp(40px,6vw,70px);line-height:1.2em;} .doctor2_con .tit_box h3 b{font-family:var(--font-serif);font-weight:var(--display-weight);font-size:clamp(40px,6vw,70px);} .doctor2_con .tit_box .line{width:25px;height:1px;background:var(--color-border-hair);margin:40px auto 20px;} .doctor2_con .tit_box p{font-size:30px;line-height:var(--body-lh);} .doctor3_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);} /*보유장비*/ .equipment1_con{position:relative;} .equipment1_con .bg_txt{position:absolute;opacity:0.05;font-size:clamp(120px,18vw,260px);letter-spacing:0;font-family: var(--font-montserrat);font-weight:700;line-height:0.7em;text-indent: -0.1em;z-index:-1;writing-mode: vertical-rl;} .equipment1_con .bg_txt.top{top:0;left:-0.05em;} .equipment1_con .bg_txt.bottom{bottom:-0.1em;right:-0.05em;} .equipment_item{display:flex;align-items:center;} .equipment_item:nth-child(even){flex-direction:row-reverse;} .equipment_item:not(:first-child){margin-top:100px;} .equipment_item > div{width:50%;} .equipment_item .img{} .equipment_item .txt{padding-left:55px;} /* [ALIGN-fix] 짝수 항목은 row-reverse(텍스트가 좌측) → 안쪽(우측) 간격이 맞도록 패딩 반전 */ .equipment_item:nth-child(even) .txt{padding-left:0;padding-right:55px;} .equipment_item .txt .sub_tit > *{display:inline-block;font-family: var(--font-montserrat);font-weight:700;font-style:italic;letter-spacing:0;vertical-align: bottom;} .equipment_item .txt .num{font-size:40px;color:var(--color-accent-text);text-decoration:underline;text-underline-offset: 5px;line-height:1.2;} .equipment_item .txt h4{font-size:14px;margin-left:10px;} .equipment_item .txt .tit{font-size:24px;font-weight:700;color:var(--color-accent-text);margin:40px 0 20px;} .equipment_item .txt p{} /*진료안내/오시는길*/ .info_item_con{display:flex;justify-content:space-between;flex-wrap:wrap;} .info_item_con:not(:first-child){margin-top:100px;} .info_item_con .info_tit_box{} .info_item_con .info_tit_box h3{color:var(--color-accent-text);font-family:var(--font-serif);font-weight:var(--display-weight);font-size:40px;} .info_item_box .inner_con{display:flex;gap:24px;} /* 프리미엄 카드 — 핵심가치(strength-item) 카드 언어를 진료안내에 적용: 틸/크림 교차 면 + 세리프 제목 + 헤어라인 + 소프트 섀도우 + hover lift */ .info_item_box .item{ position:relative; display:flex; flex-direction:column; width:301px; height:auto; min-height:230px; border:1px solid transparent; border-radius:22px; padding:44px 34px; box-shadow:0 16px 40px rgba(24,24,24,0.10); transition:transform var(--transition-lux),box-shadow var(--transition-lux); } .info_item_box .item:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(42,42,38,0.16);} /* 1·3번째 = 딥틸(화이트 텍스트 5.2:1 — #0abab5 는 2.4:1 미달), 2번째 = 소프트틸 틴트(딥틸 텍스트) */ .info_item_box .item:nth-child(odd){background:var(--color-accent-2);color:#fff;} .info_item_box .item:nth-child(even){background:#e3f4f3;color:var(--color-accent-text);} .info_item_box .item .title{font-family:var(--font-serif);font-size:26px;font-weight:var(--display-weight);line-height:1.3;letter-spacing:0.005em;margin-bottom:0;} .info_item_box .item .title img{margin-left:7px;vertical-align:middle;} /* 제목 아래 헤어라인 (카드 색에 맞춰 반투명) */ .info_item_box .item .title::after{content:"";display:block;width:46px;height:1px;margin-top:22px;background:currentColor;opacity:0.45;} /* 틸 카드 위 아이콘은 화이트로 반전 (teal 아이콘이 묻히지 않도록) */ .info_item_box .item:nth-child(odd) .title img{filter:brightness(0) invert(1);} .info_item_box .item p{font-weight:500;font-size:21px;letter-spacing:0;margin-top:auto;padding-top:24px;} /* 딥틸 카드 위 휴진 표기 — #ffd9d4 는 4.0:1 로 AA 근소 미달 → 더 밝은 살구빛 */ .info_item_box .item p.off{color:#ffece9;font-weight:600;} /* 라이트 틴트 카드 위에선 웜 핑크 가독 불가 — 기존 휴진 레드로 교체 */ .info_item_box .item:nth-child(even) p.off{color:#ce5555;} .info_item_box .item.link{padding:0;} .info_item_box .item.link a{display:flex;flex-direction:column;height:100%;padding:44px 34px;color:inherit;} /*---------------------------------------------------------- 04.이마거상 -------------------------------------------------------*/ #sub_visual.foreheadlift .sub_visual_bg{background-image:url("/page/forehead/img/foreheadlift_v.webp");} #sub_visual.foreheadrelift .sub_visual_bg{background-image:url("/page/forehead/img/foreheadrelift_v.webp");} .foreheadrelift10_con{padding-top:0;} .foreheadlift10_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);text-align:center;} .foreheadlift10_con .img_box h5{font-size:40px;font-weight:700;color:var(--color-accent-text);width:173px;height:53px;line-height:49px;border:2px solid var(--color-accent);border-radius:30px;margin:0 auto 40px;} .foreheadlift10_con .img_box .arrow{margin:0 40px;} .foreheadlift10_con .card_box h3{font-size:40px;margin:60px 0 100px;} .foreheadlift10_con .card_box h3 em{font-weight:700;position:relative;z-index:2;display:inline-block;} .foreheadlift10_con .card_box h3 em:after{content:"";width:103%;height:21px;background:var(--color-accent);opacity:0.2;position:absolute;z-index:1;bottom:0;left:-1%;} /*---------------------------------------------------------- 10.커뮤니티 -------------------------------------------------------*/ #sub_visual.bna .sub_visual_bg{background-image:url("/board/common/img/bna_v.webp");} /*---------------------------------------------------------- media 1200 -------------------------------------------------------*/ @media all and (max-width:1200px){ /*common*/ .sub_common1_item_box{flex-direction:column-reverse;justify-content:center;gap:3em;} .sub_common1_item_box.align_top{align-items:center;} .sub_common1_item_box .txt_box{text-align:center;} .sub_common2_con .sub_title h4 .line{width:359px;} .sub_common2_item_list li{width:100%;} .sub_common2_item_list li .left_item{width:40%;height:100%;} .sub_common2_item_list li .left_item img{width:100%;height:100%;object-fit:cover;} .sub_common2_item_list li .right_item .icon{width:30px;} .sub_common2_item_list li .right_item .tit{font-size:22px;} .sub_common5_item_box{ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 80px 30px; } .sub_common5_item_box .item{flex-direction:column-reverse;gap:40px;} .sub_common5_item_box .item:nth-child(even){flex-direction:column-reverse;} .sub_common5_item_box .item:not(:first-child){margin-top:0;} .sub_common5_item_box .item .txt_box{text-align:center;} .sub_common5_item_box .item .img_box img{width:360px;} .sub_common7_item_box .item > div{flex-direction:column-reverse;} .sub_common7_item_box .item:nth-child(even) > div{flex-direction:column-reverse;} .sub_common7_item_box .item .txt_box{text-align:center;margin-top:3em;} .sub_common8_item_box{flex-direction: column;justify-content:center;} .sub_common8_item_box > div{width:100%;} .sub_common8_item_box .img_box img{width:100%;} .sub_common8_item_box .txt_box{border-radius: 0 0 30px 30px;margin-top:-35px;width:100%;} .sub_common10_item_box{flex-wrap:wrap;row-gap:50px;} .sub_common11_con .graph_box{flex-direction:row;} .sub_common11_con .graph_box .box_list{flex-direction:column;gap:205px;} .sub_common11_con .graph_box .box_list li{display:flex;align-items:center;gap:1em;flex-direction: column;} .sub_common11_con .graph_box .box_list .img img{margin-bottom:0;} .sub_common11_con .information_box{height:auto;padding-bottom:55px;} .sub_common11_con .information_box .icon_list{flex-wrap:wrap;row-gap:3em;} .sub_common11_con .information_box .icon_list li{width:30%;} .sub_common11_con .information_box .icon_list li:nth-child(3){border-right:0;} .sub_common12_item_box .txt_box{width:60%;} .sub_common14_con{text-align:center;background-position:70%;} /*병원소개*/ .intro2_item_box{flex-wrap:wrap;} .doctor_pop_box{width:800px;flex-direction:column;/*height:auto;max-height:80vh;*/} .doctor_pop_box .img_box{width:100%;height:300px;} .doctor_pop_box .img_box img{width:100%;height:100%;object-fit:cover;} .doctor_pop_box .txt_box{width:100%;height:calc(100% - 300px);padding-top:50px;padding-bottom:0;text-align:center;/*overflow-y:auto;*/} .doctor_pop_box .txt_box .name{padding-left:0;} .doctor_pop_box .txt_box .history{padding-left:0;width:80%;display:inline-block;text-align:left;} .doctor_pop_box .txt_box .bottom_banner{position:relative;margin-top:50px;} .doctor2_con{background-position:left;} .equipment_item{flex-direction:column;gap:2.5em;} .equipment_item:nth-child(even){flex-direction:column;} .equipment_item > div{width:100%;text-align:center;} .equipment_item .txt{padding-left:0;} .info_item_con{gap:2em;} .info_item_box .inner_con{flex-wrap:wrap;} .info_item_box .item{width:390px;} .info_item_box .item.w100{width:100%;} /*이마거상*/ .foreheadlift10_con .img_box img{display:block;margin:0 auto;} .foreheadlift10_con .img_box .arrow{margin:40px auto;transform:rotate(90deg);} }/*media1200*/ /*---------------------------------------------------------- media 800 -------------------------------------------------------*/ @media all and (max-width:800px){ /*common*/ #sub_visual{height:100vh;min-height:300px;max-height:600px;} .sub_visual_bg{background-position:30% 50%;filter: brightness(0.9);} .sub_visual_text_wrap{position:absolute; top:50%; right:auto; left:50%;transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);color:#fff;width:100%;text-align:center;} .sub_visual_text_wrap .title{margin:40px 0 50px;} .sub_visual_text_wrap .sub_tit h4{ text-shadow:2px 2px 2px rgba(110,146,161,.14); font-size:max(2vw,10px); } .sub_visual_text_wrap .title h2{ text-shadow:2px 2px 2px rgba(110,146,161,.14); font-size:8vw; } .sub_visual_text_wrap .text_box .line{width:4vw;height:1px;box-shadow:2px 2px 2px rgba(110,146,161,.14);margin:0 auto 3vw;} .sub_visual_text_wrap .text_box p{font-size:max(4vw,13px);text-shadow:2px 2px 2px rgba(110,146,161,.14);} .sub_title h4{font-size:max(2vw,10px);} .sub_title h3{font-size:7vw;padding:5vw 0 0;white-space:normal;} .sub_title p{font-size:max(3vw,13px);margin-top:9vw;} .sub_common1_con .bg_box{height:35vw;border-radius:0 17vw 0 0;} .sub_common1_item_box .img_box{width:80%;} .sub_common1_item_box .img_box img{width:100%;} .sub_common1_item_box .txt_box p{margin-top:9vw;font-size:max(3vw,13px);} .sub_common2_con .sub_title h4 .line{width:30vw;margin:0 2vw;} .sub_common2_item_list{margin-top:13vw;} .sub_common2_item_list li{border-radius:5vw;height:45vw;} .sub_common2_item_list li:not(:last-child){margin-bottom:9vw;} .sub_common2_item_list li .left_item{} .sub_common2_item_list li .right_item{padding-left:5vw;} .sub_common2_item_list li .right_item .txt{text-align:center;} .sub_common2_item_list li .right_item .icon{width:5vw;top:2vw;right:3vw;} .sub_common2_item_list li .right_item .tit{font-size:max(4vw,14px);word-break:keep-all;} .sub_common2_item_list li .right_item .line{width:3vw;margin:3vw auto 2vw;} .sub_common2_item_list li .right_item .txt > p{font-size:max(3vw,13px);word-break:keep-all;} .sub_common2_item_list li .right_item .txt > p br{display:none;} .sub_common4_con{border-radius:0 0 11vw 11vw;} .sub_common5_item_box{gap:3em;} .sub_common5_item_box .item{gap:3em;} .sub_common5_item_box .item .txt_box h3{font-size:5vw;margin-bottom:4vw;} .sub_common5_item_box .item .txt_box h3:after{margin-top:2px;} .sub_common5_item_box .item .txt_box p{font-size:max(4vw,13px);} .sub_common5_item_box .item .img_box{width:100%;text-align:center;} .sub_common5_item_box .item .img_box img{width:80%;} .sub_common6_con .img_box{flex-direction:column;gap:2em;} .sub_common6_con .img_box img{width:100%;} .sub_common6_con .txt_box img{width:5vw;} .sub_common6_con .txt_box p{font-size:max(3vw,13px);margin-top:6vw;} .sub_common7_item_box .item:not(:first-child){margin-top:17vw;} .sub_common7_item_box .item .txt_box .num{font-size:8vw;} .sub_common7_item_box .item .txt_box .num span:after{width:5vw;height:1px;bottom:2px;} .sub_common7_item_box .item .txt_box h3{font-size:5vw;margin:3vw 0 5vw;} .sub_common7_item_box .item .txt_box p{font-size:max(3vw,13px);} .sub_common7_item_box .item .img_box{text-align:center;width:100%;} .sub_common7_item_box .item .img_box img{width:90%;} .sub_common7_item_box .video_wrap{width:90%;height:65vw;border-radius:31vw;margin:0 auto;} .sub_common8_item_box{border-radius:5vw;} .sub_common8_item_box .txt_box{height:auto;border-radius:0 0 5vw 5vw;margin-top:-5.5vw;padding:10vw 0;} .sub_common8_item_box .txt_box h3{font-size:12vw;} .sub_common8_item_box .txt_box .line{width:1px;height:13vw;margin:3vw 0 12vw;} .sub_common8_item_box .txt_box p{font-size:max(4vw,13px);} .sub_common10_item_box .item img{width:80%;} .sub_common10_item_box .item h3{font-size:5vw;margin:3vw 0;} .sub_common11_con:after{height:45vw;} .sub_common11_con .graph_box{gap:5vw;} .sub_common11_con .graph img{height:180vw;} .sub_common11_con .graph_box .box_list{gap:0;height:auto;min-height:200vw;justify-content: space-between;gap:5vw;} .sub_common11_con .graph_box .box_list .img img {width: 30vw;} /*.sub_common11_con .graph_box .box_list li:not(:first-child) .img img{margin-top:-100px;}*/ .sub_common11_con .graph_box .box_list .txt{width:65vw;min-height:35vw;height:auto;} .sub_common11_con .graph_box .box_list .txt h3{font-size:max(4.5vw,14px);line-height:1.2em;margin-bottom:2vw;} .sub_common11_con .information_box{margin-top:16vw;padding-top:10vw;padding-bottom:10vw;} .sub_common11_con .information_box .title{font-size:8vw;} .sub_common11_con .information_box .icon_list{margin:6vw 0 5vw;} .sub_common11_con .information_box .icon_list li img{width:8vw;} .sub_common11_con .information_box .icon_list li h5{font-size:max(3vw,13px);margin-top:3vw;} .sub_common11_con .information_box .icon_list li p{font-size:max(3vw,13px);} .sub_common12_item_box .txt_box{width:100%;} .sub_common12_item_box .circle_list{gap:2vw;} .sub_common12_item_box .circle_list li{width:35vw;height:35vw;} .sub_common12_item_box .circle_list li p{font-size:max(3vw,13px);} .sub_common13_con .sub_title h3 .underline:after{width:100%;height:2vw;} .sub_common13_item_box{row-gap:3vw;column-gap:5vw;flex-direction:column;} .sub_common13_item_box .item{width:100%;height:40vw;} .sub_common13_item_box .item .txt{left:6vw;bottom:5vw;} .sub_common13_item_box .item .txt h3{font-size:5vw;} .sub_common13_item_box .item .txt p{margin-top:3vw;} /*병원소개*/ .intro1_con .sub_title .dot{width:2.5vw;} .intro1_con .sub_title .sign{width:30vw;} .intro2_item_box .item img{width:80%;} .intro2_item_box .item p{font-size:max(4vw,13px);} .intro3_con .interior_slider .slick-arrow{width:6vw;height:2vw;} .intro3_con .interior_slider .slick-arrow.slick-prev{background-image:url('/page/about/img/interior_prev.png');left:3vw;margin-left:0;} .intro3_con .interior_slider .slick-arrow.slick-next{background-image:url('/page/about/img/interior_next.png');right:3vw;margin-right:0;} .intro3_con .interior_slider .slick-arrow.slick-prev:hover{margin-left:0;} .intro3_con .interior_slider .slick-arrow.slick-next:hover{margin-right:0;} /* [C] doctor1 모바일 padding override 제거 — clamp 토큰이 반응형 */ .doctor1_con .sub_title h4 img{width:20vw;} .doctor1_con .sub_title > img{width:100%;} .doctor_profile_con{gap:5vw;} .doctor_profile_item{width:80%;} .doctor_pop_box{width:100%;/*height:auto;max-height:80vh;*/} .doctor_pop_box .img_box{height:40vw;} .doctor_pop_box .img_box p{font-size:max(3vw,13px);bottom:3vw;} .doctor_pop_box .txt_box{height:calc(100% - 40vw);padding-top:6vw;} .doctor_pop_box .txt_box .name{font-size:6vw;} .doctor_pop_box .txt_box .name span{font-size:max(3vw,13px);padding-top:1vw;} .doctor_pop_box .txt_box h4{font-size:max(3.5vw,12px);} .doctor_pop_box .txt_box .history{margin-top:7vw;} .doctor_pop_box .txt_box .history li p{font-size:max(3vw,13px);padding-left:2px;} .doctor_pop_box .txt_box .bottom_banner{font-size:max(4vw,13px);padding:2vw 0;margin-top:6vw;} /*.doctor2_con{padding:9vw 0 17vw;}*/ .doctor2_con .tit_box h3{font-size:7vw;} .doctor2_con .tit_box h3 b{font-size:8vw;} .doctor2_con .tit_box .line{width:4vw;height:2px;margin:4vw auto 3vw;} .doctor2_con .tit_box p{font-size:5vw;} .equipment1_con .bg_txt{font-size:20vw;} .equipment_item:not(:first-child){margin-top:13vw;} .equipment_item .img img{width:100%;} .equipment_item .txt .num{font-size:6vw;} .equipment_item .txt h4{font-size:max(2vw,12px);margin-left:1vw;} .equipment_item .txt .tit{font-size:max(4vw,14px);margin:6vw 0 3vw;} .info_item_con:not(:first-child){margin-top:13vw;} .info_item_con .info_tit_box h3{font-size:6vw;} .info_item_box{width:100%;} .info_item_box .inner_con{gap:3vw 3%;} .info_item_box .item{width:48.5%;height:auto;min-height:34vw;border-radius:4vw;padding:7vw 5vw;} .info_item_box .item .title{font-size:max(4.6vw,14px);margin-bottom:0;} .info_item_box .item .title img{margin-left:1.5vw;width:4.5vw;} .info_item_box .item .title::after{width:9vw;margin-top:4vw;} .info_item_box .item p{font-size:max(4vw,13px);padding-top:4vw;} .info_item_box .item.link{padding:0;} .info_item_box .item.link a{padding:7vw 5vw;} /*이마거상*/ .foreheadlift10_con .img_box h5{font-size:6vw;width:25vw;height:8vw;line-height:calc(8vw - 4px);border:2px solid var(--color-accent);border-radius:5vw;margin:0 auto 6vw;} .foreheadlift10_con .img_box .arrow{margin:6vw auto;width:4vw;} .foreheadlift10_con .img_box img:not(:nth-child(3)){width:100%;} .foreheadlift10_con .card_box h3{font-size:6vw;margin:8vw 0 13vw;} .foreheadlift10_con .card_box h3 em:after{height:3vw;} .foreheadlift10_con .card_box .card{width:100%;} .foreheadlift10_con .card_box .arrow{width:7vw;} }/*media800*/ /* ========================================================== 5. sub3__v=260119.css 원본 1:1 (fulllift/facelift, .sub_common_sub3_* 스코프) ========================================================== */ /*---------------------------------------------------------- SUB_COMMON -------------------------------------------------------*/ .only_tab{display:none;} .sub_common_sub3_1_con .img_box {position: relative;display: flex; justify-content: center;gap: 43px; flex-wrap: wrap;} .sub_common_sub3_1_con .img_box .img_box_sub{box-shadow: 4px 4px 6px rgba(0, 0, 0, .1);border-radius: 20px;} .sub_common_sub3_1_con .txt_box {height:134px; width:100%;background:#fff;display: flex; justify-content: center; align-items: center; border-radius: 0 0 20px 20px;text-align: center;} .sub_common_sub3_1_con .txt_box p {font-size:24px; line-height:31px;} .sub_common_sub3_1_con .arrow {position:absolute;top:139px;} .sub_common_sub3_1_con .arrow1 {left: 339px;} .sub_common_sub3_1_con .arrow2 {right:330px} .sub_common_sub3_1_con .desc_big{display:block;font-size:30px; line-height:34px;text-align:center;} .sub_common_sub3_1_con.common .img_box{gap:20px;} .sub_common_sub3_1_con.common .txt_box {flex-direction: column; height: 231px;} .sub_common_sub3_1_con.common .txt_box p {font-size: 30px; line-height: 47px;border-bottom: 2px solid var(--color-accent);} .sub_common_sub3_1_con.common .txt_box span{display:block;font-size:24px; line-height:34px;} .sub_common_sub3_1_con.common.lowerlift_common .txt_box {height: 200px;} .sub_common_sub3_1_con.lowerlift_common .desc_big{line-height:44px;} .sub_common_sub3_1_con.lowerlift_common .desc_big:before{content:''; display:block; width:2px; height:90px;margin: 50px auto; background:#63d6d2;} .sub_common_sub3_1_con .txt_box.single_line p{margin-top: -43px;} .sub_common_sub3_2_con{background-image:none;background-color:var(--color-bg);color:var(--color-text);text-align:center;} .sub_common_sub3_2_con .color1{color:var(--color-accent-text);} .sub_common_sub3_2_con .txt_box{font-size:24px; line-height:34px;} .lowerlift_common {background:var(--color-accent-tint);} .rounded_section {background-color: #f9f9f9;border-radius: 0 0 90px 90px;color: #191919; box-shadow: -43px 115px 0 50px rgba(25, 25, 25, 1);} /*---------------------------------------------------------- 안면거상술 -------------------------------------------------------*/ #sub_visual.fulllift .sub_visual_bg{background-image:url("/page/facelift/img/fulllift_v.webp");} .facelift01 .txt_box .desc{font-size:24px; line-height:34px;text-align: center;} /*---------------------------------------------------------- 목거상술 -------------------------------------------------------*/ #sub_visual.necklift .sub_visual_bg{background-image:url("/page/facelift/img/necklift_v.webp");} .necklift11_con.sub_common8_con{background:#f9f7f7;} /*---------------------------------------------------------- 미니거상술 -------------------------------------------------------*/ /*---------------------------------------------------------- 하안검 중안면부거상 -------------------------------------------------------*/ #sub_visual.lowereyelift .sub_visual_bg{background-image:url("/page/facelift/img/lowereyelift_v.webp");} .lowereyelift .title p{position:relative;color: #f9f7f7;font-size: 50px;padding: 0 0 22px 7px;} .lowereyelift .title p span{color:#77fffb;} /* [HERO-fix] 텍스트보다 넓게 삐져나오던 초록 반투명 하이라이트 박스 제거 — 다른 히어로와 동일하게 깔끔한 텍스트만 노출 */ .lowereyelift .title p:after {display:none;} /*---------------------------------------------------------- 측두부 중안면부거상 -------------------------------------------------------*/ #sub_visual.temporallift .sub_visual_bg{background-image:url("/page/facelift/img/temporallift_v.webp");} .temporallift7_con.sub_common_sub3_1_con.common .img_box{width: 800px;margin-left: auto; margin-right: auto;} /*---------------------------------------------------------- 하안면부 목거상 -------------------------------------------------------*/ /*---------------------------------------------------------- media 1200 -------------------------------------------------------*/ @media all and (max-width:1200px){ .only_tab{display:block;} .sub_common_sub3_1_con .arrow{display:none;} .sub_common_sub3_2_con .img_box{width:100%;} .sub_common_sub3_2_con .img_box img{width:100%;} .sub_common6_con .img_box.one {width:100%;} .sub_common6_con .img_box.one img{width:100%;} } /*---------------------------------------------------------- media 800 -------------------------------------------------------*/ @media all and (max-width:800px){ .sub_common_sub3_1_con .txt_box p {font-size: max(4vw,13px); line-height: 1.5;} .sub_common_sub3_1_con .img_box {gap: 7vw;} .sub_common_sub3_1_con .img_box .img_box_sub {width: 80%;} .sub_common_sub3_1_con .img_box .img_box_sub img{width: 100%;} .sub_common_sub3_1_con .txt_box {height: 27vw;} .sub_common_sub3_1_con .desc_big {font-size: max(4.5vw,14px);line-height: 1.35;} .sub_common_sub3_1_con .txt_box.single_line p {margin-top: -6vw;} .sub_common_sub3_1_con.common .txt_box {height: 37vw;} .sub_common_sub3_1_con.common .txt_box p {font-size: max(4.5vw,14px);line-height: 1.78;} .sub_common_sub3_1_con.common .txt_box span {font-size: max(3.5vw,12px); line-height: 1.45;} .sub_common_sub3_1_con.common.lowerlift_common .txt_box {height: 32vw;} .sub_common_sub3_1_con.lowerlift_common .desc_big {line-height: 1.35;} .sub_common_sub3_1_con.lowerlift_common .desc_big:before {height: 11vw; margin: 7vw auto;} .sub_common_sub3_2_con .txt_box {font-size: max(4vw,13px);line-height: 1.5;} .rounded_section{border-radius: 0 0 11vw 11vw;} .facelift01 .txt_box .desc {font-size: max(4vw,13px);line-height: 1.5;} .lowereyelift .title p {font-size: 8vw;padding: 0 0 4vw 0vw;} .lowereyelift .title p:after {width: 77%;height: 12vw; top: -2vw; left: 50%; transform: translateX(-50%);} .temporallift7_con.sub_common_sub3_1_con.common .img_box { width: 100%;} }/*media800 sub3 닫기 — sub2/sc_map 섹션이 @media 내부에 잘못 중첩되던 구조 버그 수정*/ /* ========================================================== 6. sub2__v=2601192.css 원본 1:1 (지방·항노화·쁘띠 6시술) sub_visual 배경 + active 섹션 전용 스타일(.eyesurgery1_con / .sub_title2 / .skinbooster4_con / .skinbooster5_con / .botox3_con / .stemcell5_con). 모두 클래스/ID 스코프이지만 파일 컨벤션에 맞춰 .legacy-sub 하위로 둔다. ========================================================== */ .legacy-sub #sub_visual.liposuction .sub_visual_bg{background-image:url("/page/liposurgery/img/liposuction_v.webp");} .legacy-sub #sub_visual.fatgraft .sub_visual_bg{background-image:url("/page/liposurgery/img/fatgraft_v.webp");} .legacy-sub #sub_visual.skinbooster .sub_visual_bg{background-image:url("/page/petite/img/skinbooster_v.webp");} .legacy-sub #sub_visual.botox .sub_visual_bg{background-image:url("/page/petite/img/botox_v.webp");} .legacy-sub #sub_visual.hifu .sub_visual_bg{background-image:url("/page/petite/img/hifu_v.webp");} .legacy-sub #sub_visual.stemcell .sub_visual_bg{background-image:url("/page/antiaging/img/stemcell_v.webp");} /* 눈성형 4종 — 히어로 여자모델 배경 정의 누락분 보강(이미지는 존재했으나 CSS 미연결) */ .legacy-sub #sub_visual.uppereyelid .sub_visual_bg{background-image:url("/page/eyesurgery/img/uppereyelid_v.webp");} .legacy-sub #sub_visual.lowereyelid .sub_visual_bg{background-image:url("/page/eyesurgery/img/lowereyelid_v.webp");} .legacy-sub #sub_visual.browlift .sub_visual_bg{background-image:url("/page/eyesurgery/img/browlift_v.webp");} .legacy-sub #sub_visual.sunkeneye .sub_visual_bg{background-image:url("/page/eyesurgery/img/sunkeneye_v.webp");} /* 사후관리 — 히어로를 병원 인테리어(라운지) 사진으로(병원소개 갤러리 자산 재사용) */ .legacy-sub #sub_visual.pimcare .sub_visual_bg{background-image:url("/common/images/main/interior09.webp");background-position:50% 50%;} .legacy-sub .sub_common6_con.eyesurgery1_con .img_box{align-items:center;gap:40px;} .legacy-sub .sub_title.sub_title2 p{margin-top:35px;} .legacy-sub .skinbooster4_con img{width:100%;} .legacy-sub .skinbooster5_con{background-color:var(--color-accent-tint);} .legacy-sub .skinbooster5_con .skinbooster5_con_item{margin-top:75px;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul{display:flex;gap:80px;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li{box-shadow:4px 4px 6px rgba(0,0,0,.1);border-radius:30px;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li .box_wrap{position:relative;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li .txt_box{position:relative;margin-top:-100px;left:0;right:0;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li .txt_box h3{position:absolute;top:-30px;left:50%;transform:translateX(-50%);border-radius:10px;background-color:#fff;color:var(--color-accent-text);font-weight:700;font-size:30px;width:280px;padding:15px 0;text-align:center;} /* 카드 캡션 — 흰 24px 텍스트가 #0abab5 위 2.4:1(대형 3:1 미달) → 딥틸 면(5.2:1) */ .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li .txt_box p{text-align:center;padding:50px 0 20px;background-color:var(--color-accent-2);border-radius: 0 0 30px 30px;display:flex;align-items:center;color:var(--color-white);justify-content:center;line-height:34px;font-size:24px;} .legacy-sub .botox3_con{padding-top:var(--section-pad-wide);} .legacy-sub .botox3_con .sub_title h3{padding:30px 0 0;} .legacy-sub .botox3_con .sub_title.sub_title2 p{margin-top:0;} .legacy-sub .botox3_con ul{margin:35px 0 75px;} .legacy-sub .botox3_con ul li p{font-size:24px;font-weight:700;color:var(--color-accent-text);line-height:32px;display:flex;align-items:center;} .legacy-sub .botox3_con ul li p span{width:8px;height:8px;border-radius:50%;background-color:var(--color-accent);display:inline-block;margin-right:8px;} .legacy-sub .botox3_con .botox3_con_item{position:relative;padding:var(--section-pad-tight) 0;background-color:var(--color-accent-tint);} .legacy-sub .botox3_con .botox3_con_item .row_con p{font-size:22px;line-height:32px;} .legacy-sub .botox3_con .botox3_con_item .img_con{position:relative;right:0;top:auto;} .legacy-sub .stemcell5_con.sub_common11_con:after{display:none;} .legacy-sub .stemcell5_con.sub_common11_con .information_box{margin-top:0;} .legacy-sub .stemcell5_con.sub_common11_con .information_box .icon_list li{width:33.33%;} @media all and (max-width:1200px){ .legacy-sub .skinbooster5_con .skinbooster5_con_item ul{flex-direction: column;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li{width:70%;margin:0 auto;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li img{width:100%;} .legacy-sub .botox3_con .botox3_con_item .img_con{width: 260px;} .legacy-sub .botox3_con .botox3_con_item .row_con p{font-size:18px;line-height:28px;} } @media all and (max-width:800px){ .legacy-sub .sub_title.sub_title2 p{margin-top:5vw;} .legacy-sub .sub_common6_con.eyesurgery1_con .img_box{gap:8vw;} .legacy-sub .sub_common6_con.eyesurgery1_con .img_box img.arrow_img{width:8vw;transform: rotate(90deg);} .legacy-sub .skinbooster5_con .skinbooster5_con_item{margin-top:7vw;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul{gap:10vw;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li{box-shadow: 1vw 1vw 2vw rgba(0, 0, 0, .1);border-radius: 4vw;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li img{border-radius: 4vw;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li .txt_box{margin-top:-10vw;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li .txt_box h3{top:-4vw;border-radius:2vw;font-size:max(4vw,14px);width:35vw;padding:2vw 0;} .legacy-sub .skinbooster5_con .skinbooster5_con_item ul li .txt_box p{padding:6vw 0 3vw;line-height:1.5;width:100%;font-size:max(3vw,13px);border-radius:0 0 4vw 4vw;} .legacy-sub .botox3_con{text-align:center;} .legacy-sub .botox3_con .sub_title h3{padding:3vw 0 0;} .legacy-sub .botox3_con ul {margin: 3vw 0 7vw; display: inline-block;} .legacy-sub .botox3_con ul li p{font-size:max(3vw,13px);line-height:1.5;} .legacy-sub .botox3_con ul li p span{width:1vw;height:1vw;margin-right:1vw;} .legacy-sub .botox3_con .botox3_con_item{padding:6vw 0 13vw;} .legacy-sub .botox3_con .botox3_con_item .row_con{display: flex;flex-wrap: wrap;flex-direction: column-reverse; justify-content: center;} .legacy-sub .botox3_con .botox3_con_item .row_con p{font-size:max(3vw,13px);line-height:1.5;word-break:keep-all;} .legacy-sub .botox3_con .botox3_con_item .img_con{position: static;width: 26vw;margin: 0 auto 5vw;} } /* ========================================================== 7. info(진료안내/오시는길) footer_map(sc_map) 원본 1:1 원본 main.css 의 .footer_map/.sc_map/root_daum 규칙을 .legacy-sub 스코프로 이식(info 페이지가 footer_map 을 본문에 직접 포함하므로 필요). notice_icon 은 __v 제거 stripped 파일명 사용. ========================================================== */ .legacy-sub .footer_map{background-image:none;background-color:var(--color-bg);color:var(--color-text);} .legacy-sub .sc_map .guide_con{display:flex;justify-content:space-between;margin-top:55px;} .legacy-sub .sc_map h2{position:relative;font-size:50px;font-family:var(--font-serif);font-weight:var(--display-weight);letter-spacing:var(--display-ls);text-transform:uppercase;} .legacy-sub .sc_map h2:after{content:'';display:inline-block;width:424px;height:1px;background:var(--color-border-hair);position:absolute;right:0;top:50%;transform:translateY(-50%);} .legacy-sub .sc_map h2 b{letter-spacing:0em;text-shadow:none;color:var(--color-accent-text);} .legacy-sub .sc_map h2 .blue1{letter-spacing:0em;} .legacy-sub .sc_map .map_tit{font-size:30px;font-weight:700;margin-bottom:30px;} .legacy-sub .sc_map .tel a{display:block;} /* 'Roboto' 는 웹폰트 미로드(OS 별 렌더 상이) — 영문 숫자 공용 Montserrat 토큰으로 통일 */ .legacy-sub .sc_map .tel .call{margin-bottom:17px;font-family:var(--font-montserrat);font-weight:700;font-size:50px;letter-spacing:0em;} .legacy-sub .sc_map .map_link{width:182px;height:52px;display:inline-block;font-size:18px;color:#0dc960;text-align:center;background:#fff;border:1px solid #0dc960;line-height:52px;transition:var(--transition-lux);border-radius:15px;} .legacy-sub .sc_map .map_link:hover{color:#fff;background:#0dc960;} .legacy-sub .sc_map .map_link.kakao{margin-left:30px;color:#5f3300;text-align:center;border:1px solid #ffcc00;border-radius:15px;} .legacy-sub .sc_map .map_link.kakao:hover{color:#181818;text-align:center;background:#ffcc00;} .legacy-sub .sc_map .address{margin-top:60px;} .legacy-sub .sc_map .address_txt{display:block;font-size:22px;line-height:26px;} .legacy-sub .sc_map .sub{display:flex;align-items:flex-start;margin-top:15px;font-size:18px;line-height:26px;font-weight:600;} .legacy-sub .sc_map .sub:before{content:'';display:inline-block;width:20px;height:20px;background-image:url('/common/images/main/notice_icon.png');background-size:cover;background-position:center;margin-right:10px;margin-top:2px;} .legacy-sub .sc_map .time_table{margin-top:60px;} .legacy-sub .sc_map .time_etc{font-size:22px;margin-top:30px;} .legacy-sub .sc_map .guide_con .time_table .day{display:inline-block;letter-spacing:0.2em;font-size:22px;line-height:33px;} .legacy-sub .sc_map .guide_con .time_table .day .w2{letter-spacing:3.9em;} .legacy-sub .sc_map .guide_con .time_table .day .w3{letter-spacing:1.5em;} .legacy-sub .sc_map .guide_con .time_table .hour{margin-left:15px;display:inline-block;letter-spacing:0.03em;font-size:22px;} .legacy-sub .sc_map .guide_con .time_table .rest{margin-left:15px;display:inline-block;letter-spacing:0.03em;font-size:22px;color:#ce5555;} .legacy-sub .sc_map .map_link_box{margin-top:150px;} @media all and (max-width:1200px){ .legacy-sub .item.main_contact_con .txt{text-align:center;} .legacy-sub .item.main_map_con{margin-top:55px;} .legacy-sub .sc_map .guide_con{flex-direction:column;} .legacy-sub .sc_map h2{text-align:center;} .legacy-sub .sc_map h2:after{display:none;} .legacy-sub .sc_map .tel a{margin:0 auto;} .legacy-sub .sc_map .sub{justify-content:center;} .legacy-sub .root_daum_roughmap.root_daum_roughmap_landing{width:800px !important;} } /* 네이버 지도 임베드 — 기존 카카오 roughmap 과 동일한 박스 크기 */ .legacy-sub .naver-map-embed{width:800px;max-width:100%;height:430px;margin:0 auto;border-radius:4px;overflow:hidden;} @media all and (max-width:800px){ .legacy-sub .naver-map-embed{width:100%;height:78vw;min-height:300px;} .legacy-sub .sc_map h2{font-size:6vw;} .legacy-sub .sc_map .guide_con{margin-top:7vw;} .legacy-sub .sc_map .map_tit{font-size:5vw;margin-bottom:4vw;} .legacy-sub .sc_map .tel .call{margin-bottom:3vw;font-size:7vw;} .legacy-sub .sc_map .map_link{width:36vw;height:11vw;font-size:max(3vw,13px);line-height:11vw;} .legacy-sub .sc_map .address{margin-top:7vw;} .legacy-sub .sc_map .address_txt{font-size:max(4vw,13px);line-height:1.4;} .legacy-sub .sc_map .sub{margin-top:3vw;font-size:max(3vw,13px);line-height:1.35;} .legacy-sub .sc_map .sub:before{width:3vw;height:3vw;margin-right:2vw;} .legacy-sub .sc_map .time_table{margin-top:5vw;} .legacy-sub .sc_map .guide_con .time_table .day{font-size:max(3.5vw,12px);line-height:2.3;} .legacy-sub .sc_map .guide_con .time_table .hour{margin-left:2vw;font-size:max(3.5vw,12px);} .legacy-sub .sc_map .guide_con .time_table .rest{margin-left:2vw;font-size:max(3.5vw,12px);} .legacy-sub .sc_map .map_link_box{margin-top:5vw;} .legacy-sub .sc_map .map_link.kakao{margin-left:5vw;} .legacy-sub .item.main_map_con{margin-top:7vw;} .legacy-sub .root_daum_roughmap.root_daum_roughmap_landing{width:100% !important;height:100vw !important;} } /* ========================================================== 8. 리파인 공통 마감 — 섹션 구분 헤어라인 / 라이트 전환 텍스트 복원 / 모션 ========================================================== */ /* [B6] 라이트 전환 섹션 내부 텍스트색 복원 (color_white 컨텍스트 → 본문색) */ .legacy-sub .sub_common2_con .color_white .sub_title h4, .legacy-sub .sub_common2_con .color_white .sub_title h3, .legacy-sub .sub_common2_con .color_white .txt_box p, .legacy-sub .sub_common3_con .color_white .sub_title h4, .legacy-sub .sub_common3_con .color_white .sub_title h3, .legacy-sub .sub_common3_con .color_white .txt_box p, .legacy-sub .sub_common5_con .color_white .sub_title h4, .legacy-sub .sub_common5_con .color_white .sub_title h3, .legacy-sub .sub_common5_con .color_white .txt_box p, .legacy-sub .sub_common6_con .color_white .sub_title h4, .legacy-sub .sub_common6_con .color_white .sub_title h3, .legacy-sub .sub_common6_con .color_white .txt_box p, .legacy-sub .sub_common10_con .color_white .sub_title h4, .legacy-sub .sub_common10_con .color_white .sub_title h3, .legacy-sub .sub_common10_con .color_white .txt_box p, .legacy-sub .sub_common11_con.bg_view .color_white .sub_title h4, .legacy-sub .sub_common11_con.bg_view .color_white .sub_title h3, .legacy-sub .sub_common11_con.bg_view .color_white .txt_box p, .legacy-sub .sub_common12_con .color_white .sub_title h4, .legacy-sub .sub_common12_con .color_white .sub_title h3, .legacy-sub .sub_common12_con .color_white .txt_box p, .legacy-sub .sub_common14_con .color_white .sub_title h4, .legacy-sub .sub_common14_con .color_white .sub_title h3, .legacy-sub .sub_common14_con .color_white .txt_box p, .legacy-sub .intro1_con .color_white .sub_title h4, .legacy-sub .intro1_con .color_white .sub_title h3, .legacy-sub .intro1_con .color_white .txt_box p, .legacy-sub .doctor2_con .color_white .sub_title h4, .legacy-sub .doctor2_con .color_white .sub_title h3, .legacy-sub .doctor2_con .color_white .txt_box p, .legacy-sub .doctor3_con .color_white .sub_title h4, .legacy-sub .doctor3_con .color_white .sub_title h3, .legacy-sub .doctor3_con .color_white .txt_box p, .legacy-sub .foreheadlift10_con .color_white .sub_title h4, .legacy-sub .foreheadlift10_con .color_white .sub_title h3, .legacy-sub .foreheadlift10_con .color_white .txt_box p, .legacy-sub .sub_common_sub3_2_con .color_white .sub_title h4, .legacy-sub .sub_common_sub3_2_con .color_white .sub_title h3, .legacy-sub .sub_common_sub3_2_con .color_white .txt_box p { color: var(--color-text) !important; } /* 라이트 전환 섹션의 오버라인만 accent-text */ .legacy-sub .sub_common2_con .color_white .sub_title h4, .legacy-sub .sub_common3_con .color_white .sub_title h4, .legacy-sub .sub_common5_con .color_white .sub_title h4, .legacy-sub .sub_common6_con .color_white .sub_title h4, .legacy-sub .sub_common10_con .color_white .sub_title h4, .legacy-sub .sub_common11_con.bg_view .color_white .sub_title h4, .legacy-sub .sub_common12_con .color_white .sub_title h4, .legacy-sub .sub_common14_con .color_white .sub_title h4, .legacy-sub .intro1_con .color_white .sub_title h4, .legacy-sub .doctor2_con .color_white .sub_title h4, .legacy-sub .doctor3_con .color_white .sub_title h4, .legacy-sub .foreheadlift10_con .color_white .sub_title h4, .legacy-sub .sub_common_sub3_2_con .color_white .sub_title h4 { color: var(--color-accent-text) !important; } /* 다크 배경(color_white 컨텍스트) 위 틸/형광 강조는 흰색으로 한정 (다크 유지 슬롯) */ .legacy-sub .color_white .color1, .legacy-sub .color_white .color2, .legacy-sub .color_white .color7 { color: var(--color-white) !important; } /* [C] 섹션 구분 헤어라인 (다크 유지 슬롯 online1/reserv1 직전·직후 제외) */ .legacy-sub section + section { border-top: 1px solid var(--color-border-hair); } /* [E] prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .legacy-sub .sub_visual_bg { animation: none; transform: none; } .legacy-sub .sub_visual_text_ani { animation: none; transform: none; opacity: 1; } } /* [B6-fix] 라이트 전환 섹션의 .color_white 내부 중첩 인라인(b/strong/span 등)까지 본문색 강제 — 147줄 `.color_white *` 흰색 !important 잔존으로 제목 가 안 보이던 문제 수정. (이브로우 h4 는 위 .sub_title h4 규칙이 명시도 우위라 accent-text 유지, 녹색 원형 배지 .circle_list 는 .color_white 외부라 영향 없음) */ .legacy-sub .sub_common2_con .color_white *, .legacy-sub .sub_common3_con .color_white *, .legacy-sub .sub_common5_con .color_white *, .legacy-sub .sub_common6_con .color_white *, .legacy-sub .sub_common10_con .color_white *, .legacy-sub .sub_common11_con.bg_view .color_white *, .legacy-sub .sub_common12_con .color_white *, .legacy-sub .sub_common14_con .color_white *, .legacy-sub .intro1_con .color_white *, .legacy-sub .doctor2_con .color_white *, .legacy-sub .doctor3_con .color_white *, .legacy-sub .foreheadlift10_con .color_white *, .legacy-sub .sub_common_sub3_2_con .color_white * { color: var(--color-text) !important; } /* ============================================================ 내시경클리닉(/system/4k-endoscope) 페이지 전용 ① 예쁜 폰트(Freesentation) ② 거상 4종 세로 정렬 ③ FAQ 가운데 정렬 ④ 강점 4종 가운데 정렬 scopintro* 전용 CSS 가 원본에 없어 이 블록에서 신규 정의. ============================================================ */ /* ⓪ 페이지 톤 — 예쁜 파스텔 그린. --color-bg 를 페이지 스코프에서 오버라이드 → background:var(--color-bg) 를 쓰는 모든 본문 섹션이 일괄로 파스텔 그린이 된다. (히어로·풀배너 이미지 섹션은 영향 없음) 살짝 더 진한 그린 띠(botox3_con_item=accent-tint)는 그대로 두어 결을 살림. */ .scopintro-page { --color-bg: #FFFFFF; background-color: #FFFFFF; } .scopintro-page #sub_wrap { background-color: #FFFFFF; } /* ① 폰트 — 본문/제목 Freesentation, 영문 오버라인(.en)은 Montserrat 유지 */ .scopintro-page h2, .scopintro-page h3, .scopintro-page h4, .scopintro-page h5, .scopintro-page h6, .scopintro-page p, .scopintro-page li, .scopintro-page a, .scopintro-page b, .scopintro-page span:not(.en) { font-family: var(--font-free), "Freesentation", "Pretendard", "Noto Sans KR", sans-serif !important; } .scopintro-page .en { font-family: var(--font-montserrat) !important; } /* ② 거상 4종 아이콘 — 가로 4열 정렬 + 균등 간격 */ .scopintro-page .scopintro4_item_box .first_ul_box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(20px, 3vw, 48px); } .scopintro-page .scopintro4_item_box .first_ul_box > li { flex: 1 1 0; min-width: 0; max-width: 240px; } .scopintro-page .scopintro4_item_box .first_ul_box .box { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .scopintro-page .scopintro4_item_box .first_ul_box .box img { width: clamp(110px, 9vw, 150px); height: auto; } .scopintro-page .scopintro4_item_box .first_ul_box .box p { font-size: 21px; font-weight: 700; color: var(--color-accent-text); } /* ⑥ 히어로(내시경클리닉 소개) 배경 — 검은색 + 은은한 민트 글로우 */ .scopintro-page #sub_visual .sub_visual_bg { background: #000; } .scopintro-page #sub_visual .sub_visual_bg::after { background: radial-gradient(120% 80% at 50% 38%, rgba(45,147,137,0.22), rgba(0,0,0,0) 60%), radial-gradient(90% 60% at 50% 120%, rgba(45,147,137,0.14), rgba(0,0,0,0) 55%); } /* ⑥-2 히어로 감성 타이포 — 검은 배경에 어울리는 프리미엄 내시경 톤 */ .scopintro-page #sub_visual .sub_tit h4 { color: #7fdccd; font-size: clamp(11px, 1vw, 14px); letter-spacing: 0.42em; font-weight: 600; margin-bottom: 30px; opacity: 0.95; } .scopintro-page #sub_visual .title h2 { font-size: clamp(40px, 5.2vw, 70px); letter-spacing: 0.015em; color: #fff; text-shadow: 0 4px 40px rgba(45, 147, 137, 0.45); } .scopintro-page #sub_visual .text_box .line { width: 64px; height: 2px; margin: 30px auto; background: linear-gradient(90deg, rgba(127, 220, 205, 0) 0%, #7fdccd 50%, rgba(127, 220, 205, 0) 100%); } .scopintro-page #sub_visual .text_box p { color: rgba(255, 255, 255, 0.76); font-size: clamp(16px, 1.5vw, 20px); line-height: 2.05; letter-spacing: 0.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); } .scopintro-page #sub_visual .text_box p b { color: #8fe6d7; font-weight: 700; } /* ⑤ "4K 내시경으로 더 정교하게"(botox3_con) — 가운데 정렬 */ .scopintro-page .botox3_con .sub_title { text-align: center; } .scopintro-page .botox3_con ul li p { justify-content: center; } .scopintro-page .botox3_con .botox3_con_item .row_con { text-align: center; } .scopintro-page .botox3_con .botox3_con_item .row_con p { text-align: center; } .scopintro-page .botox3_con .botox3_con_item .img_con { margin-left: auto; margin-right: auto; } /* ⑤-b scopintro1 섹션 상하 패딩·글자간격 압축 — .botox3_con 은 보톡스 페이지와 공유되므로 .scopintro1_con 으로만 스코프. (인트로 영상 복원 후에도 압축 패딩 유지) */ .scopintro-page .scopintro1_con.botox3_con { padding-top: clamp(48px, 5vw, 72px); } .scopintro-page .scopintro1_con .sub_title h3 { padding-top: 18px; line-height: 1.32; } /* ⑤-c Stryker 1688 본문 — 검은 배경 밴드 + 다크 톤 타이포(4K 내시경 톤) */ .scopintro-page .scopintro1_con.botox3_con .botox3_con_item { background-color: #0d0d0d; } .scopintro-page .scopintro1_con .botox3_con_item .row_con p { color: rgba(255, 255, 255, .82); letter-spacing: -0.005em; line-height: 1.85; } .scopintro-page .scopintro1_con .botox3_con_item .row_con p b { color: #5ff0e6; font-weight: 600; } .scopintro-page .scopintro1_con .scop-scroll-hint__mouse { border-color: rgba(255, 255, 255, .55); } .scopintro-page .scopintro1_con .scop-scroll-hint__wheel { background: #fff; } .scopintro-page .scopintro1_con .scop-scroll-hint__label { color: rgba(255, 255, 255, .65); } .scopintro-page .scopintro1_con ul { margin: 22px 0 0; } .scopintro-page .scopintro1_con ul li p { line-height: 1.7; } .scopintro-page .scopintro1_con .botox3_con_item { padding: clamp(36px, 4vw, 56px) 0; } .scopintro-page .scopintro1_con .botox3_con_item .row_con p { line-height: 1.6; } /* ⑤-d scopintro1 인트로 영상 — 원본 video/scopintro1_video.mp4 복원. 다크 밴드(#0d0d0d) 안, 본문 아래 풀폭 라운드 카드로 배치(원본 .vide_wrap 대체; .img_con 은 260px 소형 이미지용이라 미사용). */ .scopintro-page .scopintro1_con .scop-intro-video { width: 100%; max-width: 880px; margin: clamp(26px, 3vw, 42px) auto 0; border-radius: 16px; overflow: hidden; background-color: #000; box-shadow: 0 18px 48px rgba(0, 0, 0, .45); } .scopintro-page .scopintro1_con .scop-intro-video video { display: block; width: 100%; height: auto; } /* ⑤-e scop-scope — phone 촬영본에서 중앙 내시경 화면만 추출·정렬한 정사각(700×700) 영상을, 실제 내시경처럼 "원형 포트홀(중앙 포커스)" 로 표시. (.scop-intro-video 의 와이드 카드 스타일을 4-class 특이도로 덮어씀) */ .scopintro-page .scopintro1_con .scop-intro-video.scop-scope { width: clamp(260px, 62vw, 440px); max-width: 440px; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #000; /* 내시경 경통 느낌 — 얇은 teal 링 + 다크 베젤 + 부드러운 글로우 */ box-shadow: 0 0 0 1px rgba(95, 240, 230, .22), 0 0 0 9px #0d0d0d, 0 0 40px 4px rgba(95, 240, 230, .14), 0 26px 60px rgba(0, 0, 0, .55); } .scopintro-page .scopintro1_con .scop-intro-video.scop-scope video { width: 100%; height: 100%; object-fit: cover; /* 원형 피드가 포트홀을 가득 채우도록 살짝 확대(외곽 black 여백 최소화) */ transform: scale(1.08); } @media all and (max-width: 800px) { /* row_con 이 공유 규칙으로 column-reverse 라 본문·영상·스크롤 순서가 뒤집히는 것을 scopintro1 에서만 정상 흐름(본문→영상→스크롤)으로 복원 */ .scopintro-page .scopintro1_con .botox3_con_item .row_con { flex-direction: column; } .scopintro-page .scopintro1_con .scop-intro-video { border-radius: 3vw; } .scopintro-page .scopintro1_con .scop-intro-video.scop-scope { width: clamp(220px, 72vw, 360px); } } /* 스크롤 유도 힌트 — 마우스 휠이 아래로 흐르며 전체가 살짝 바운스 */ .scopintro-page .scop-scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: clamp(26px, 3vw, 40px); animation: scopScrollBounce 1.8s ease-in-out infinite; } .scopintro-page .scop-scroll-hint__mouse { width: 26px; height: 42px; border: 2px solid var(--color-accent); border-radius: 14px; display: flex; justify-content: center; padding-top: 7px; box-sizing: border-box; } .scopintro-page .scop-scroll-hint__wheel { width: 4px; height: 8px; border-radius: 2px; background: var(--color-accent); animation: scopScrollWheel 1.8s ease-in-out infinite; } .scopintro-page .scop-scroll-hint__label { /* --font-en 은 어디서도 정의되지 않던 죽은 토큰 — 영문 라벨 공용 Montserrat 토큰으로 교체 */ font-family: var(--font-montserrat); font-size: 11px; letter-spacing: 0.28em; font-weight: 700; color: var(--color-accent); opacity: 0.85; } @keyframes scopScrollWheel { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateY(12px); opacity: 0; } 100% { transform: translateY(12px); opacity: 0; } } @keyframes scopScrollBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @media (prefers-reduced-motion: reduce) { .scopintro-page .scop-scroll-hint, .scopintro-page .scop-scroll-hint__wheel { animation: none; } } /* ⑦ "편안한 수술 과정" 6종(scopintro6) — 홈 strength-item 프리미엄 카드 스타일. 레거시 sub_common13(이미지가 카드 전체를 덮는 배경형)을 흰 카드형으로 재정의. */ .scopintro-page .scopintro6_item_box { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2vw, 30px); } .scopintro-page .scopintro6_item_box .item { width: auto; height: auto; position: relative; isolation: auto; display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--color-text); background: #fff; border: 1px solid var(--color-border-hair); border-radius: 22px; box-shadow: 0 16px 40px rgba(42, 42, 38, 0.08); padding: clamp(36px, 3vw, 48px) clamp(24px, 2.4vw, 36px); transition: transform var(--transition-lux), box-shadow var(--transition-lux); } /* 레거시 배경형(sub_common13)의 어두운 teal 그라데이션 오버레이(::before)를 제거. 흰 카드 위에 깔리면 딥 teal 본문이 묻혀 안 보이던 문제. */ .scopintro-page .scopintro6_item_box .item::before { display: none; } .scopintro-page .scopintro6_item_box .item:hover { transform: translateY(-5px); box-shadow: 0 24px 50px rgba(42, 42, 38, 0.14); } .scopintro-page .scopintro6_item_box .item img { position: static; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; z-index: auto; box-shadow: 0 6px 18px rgba(42, 42, 38, 0.14); } .scopintro-page .scopintro6_item_box .item .txt { position: static; left: auto; bottom: auto; } .scopintro-page .scopintro6_item_box .item .txt h3 { margin-top: 24px; font-size: clamp(20px, 1.9vw, 25px); font-weight: 400; color: var(--color-accent-text); } .scopintro-page .scopintro6_item_box .item .txt h3::after { content: ""; display: block; width: 46px; height: 1px; margin: 22px auto 0; background: var(--color-accent); opacity: 0.5; } .scopintro-page .scopintro6_item_box .item .txt p { margin-top: 24px; font-size: 15px; line-height: 1.8; color: var(--color-text-muted); } /* V6 의 어두운 text-shadow(사진 위 흰 글자용)는 흰 카드에선 글자만 뭉개므로 제거 */ .scopintro-page .scopintro6_item_box .item .txt h3, .scopintro-page .scopintro6_item_box .item .txt p { text-shadow: none; } @media (max-width: 980px) { .scopintro-page .scopintro6_item_box { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .scopintro-page .scopintro6_item_box { grid-template-columns: 1fr; } } /* ②-2 프로세스 3종(보다 작은 맞춤 절개 등) — 가로 3열 정렬 + 균등 간격 */ .scopintro-page .scopintro3_item_box > ul { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(24px, 4vw, 64px); } .scopintro-page .scopintro3_item_box > ul > li { flex: 1 1 0; min-width: 0; max-width: 300px; } .scopintro-page .scopintro3_item_box .box { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .scopintro-page .scopintro3_item_box .box img { width: clamp(90px, 8vw, 120px); height: auto; } .scopintro-page .scopintro3_item_box .box h3 { font-size: clamp(18px, 1.7vw, 22px); } .scopintro-page .scopintro3_item_box .box p { font-size: 15px; line-height: 1.7; color: var(--color-text-muted); } /* ④ 리핌의 거상술 강점 4종 — 카드(좌) / 기기(우) 2열 + 세련된 모션 */ .scopintro-page .scopintro9_item_box { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "cards1 device" "cards2 device"; align-items: center; column-gap: clamp(32px, 4.2vw, 76px); row-gap: clamp(18px, 2vw, 26px); max-width: 1120px; margin: 0 auto; text-align: left; } .scopintro-page .scopintro9_item_box .item_ul1 { grid-area: cards1; } .scopintro-page .scopintro9_item_box .item_ul2 { grid-area: cards2; } .scopintro-page .scopintro9_item_box .item_ul { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 22px); } .scopintro-page .scopintro9_item_box .item_ul .item { text-align: left; margin: 0; max-width: none; } .scopintro-page .scopintro9_item_box .item_ul .item h3 { font-size: clamp(19px, 1.45vw, 23px); margin-bottom: 10px; } .scopintro-page .scopintro9_item_box .item_ul .item p { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.7; color: var(--color-text-muted); } .scopintro-page .scopintro9_item_box .item_ul_img { grid-area: device; align-self: center; /* 카드가 세로형 이미지를 딱 감싸도록(좌측 카드 높이에 늘어나 생기던 상하 여백 제거) */ justify-self: stretch; margin: 0; display: flex; } .scopintro-page .scopintro9_item_box .item_ul_img li { width: 100%; display: flex; border-radius: 22px; box-shadow: 0 26px 60px rgba(0, 0, 0, .32); overflow: hidden; } .scopintro-page .scopintro9_item_box .item_ul_img img { width: 100%; height: auto; display: block; object-fit: contain; } @keyframes scop9-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } @media (prefers-reduced-motion: reduce) { .scopintro-page .scopintro9_item_box .item_ul_img img { animation: none; } } @media (max-width: 900px) { .scopintro-page .scopintro9_item_box { grid-template-columns: 1fr; grid-template-areas: "device" "cards1" "cards2"; text-align: center; row-gap: clamp(20px, 4vw, 34px); max-width: 560px; } .scopintro-page .scopintro9_item_box .item_ul .item { text-align: center; } .scopintro-page .scopintro9_item_box .item_ul_img, .scopintro-page .scopintro9_item_box .item_ul_img li { display: block; } .scopintro-page .scopintro9_item_box .item_ul_img img { height: auto; object-fit: contain; } } /* ③ FAQ — 가운데 정렬 + Q/A 가독성 */ .scopintro-page .scopintro7_item_box { max-width: 920px; margin: 70px auto 0; } .scopintro-page .scopintro7_item_box > li { text-align: center; } .scopintro-page .scopintro7_item_box .item { text-align: center; } .scopintro-page .scopintro7_item_box .item span { display: inline-block; font-family: var(--font-montserrat) !important; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; /* Q/A 라벨 — 흰 배경 위 #0abab5 는 2.4:1 → 딥틸(5.2:1) */ color: var(--color-accent-2); margin-bottom: 12px; } .scopintro-page .scopintro7_item_box .item h4 { font-size: 18px; line-height: 1.75; } /* 질문(Q = item1·3·5) 강조 */ .scopintro-page .scopintro7_item_box .item1 h4, .scopintro-page .scopintro7_item_box .item3 h4, .scopintro-page .scopintro7_item_box .item5 h4 { font-size: 22px; font-weight: 700; color: var(--color-accent-text); } /* 질문 위 여백 / 답변 아래 구분선 */ .scopintro-page .scopintro7_item_box > li:nth-child(odd) { margin-top: 44px; } .scopintro-page .scopintro7_item_box > li:nth-child(even) { margin-top: 14px; padding-bottom: 44px; border-bottom: 1px solid var(--color-border-hair); } .scopintro-page .scopintro7_item_box > li:last-child { border-bottom: none; } /* ============================================================ [ALIGN-fix 2026-06] 팀 정렬 점검 후속 — 페이지별 정렬/여백 보정. 모든 규칙은 섹션 고유 클래스로 스코프(공유 클래스 전역 변경 없음). ============================================================ */ /* full-facelift: 더블딥플레인 본문 폭 제한(역삼각형 좌측쏠림 방지) */ .legacy-sub .fulllift7_con .txt_box{max-width:780px;margin-left:auto;margin-right:auto;word-break:keep-all;} /* full-facelift: 수술범위 본문 폭 제한·균형 줄바꿈(좌측쏠림처럼 보이는 넓은 줄 방지) */ .legacy-sub .fulllift9_con .txt_box p{max-width:820px;margin-left:auto;margin-right:auto;word-break:keep-all;text-wrap:balance;line-height:1.7;} /* neck-lift: before/after 사이 plus 아이콘 절대배치(옛 클래스라 미적용→가로 오버플로 해소) */ /* 증상 2컷(570px×2)은 공유 gap:140px 적용 시 1280px>row_con(1200px) 로 넘쳐 중앙 타이틀보다 넓게 벌어져(잘림) 비중앙처럼 보였음 → gap 축소로 컨테이너 안 중앙정렬. plus 아이콘은 절대배치로 두 컷 사이를 가로질러 겹침. */ .legacy-sub .necklift9_con .img_box{position:relative;gap:48px;} .legacy-sub .necklift9_con .img_box .plus{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;margin:0;} /* lower-mid: 수술방법 5카드 마지막 줄(2개) 중앙 정렬 */ .legacy-sub .lowereyelift8_con .img_box{justify-content:center;} /* temporal-mid: 누락 영상 박스 제거 후 제목↔설명 간격 정리(과한 구분선 여백 축소) */ .legacy-sub .temporallift7_con.lowerlift_common .desc_big:before{height:64px;margin:36px auto;} /* forehead-lift: 자가진단 제목과 리스트(이미지) 사이 120px 과대 간격 → 축소(위로 당김) */ .legacy-sub .foreheadlift2_con .sub_common2_item_list{margin-top:clamp(48px,5vw,72px);} /* forehead-lift: 자가진단(CHECK LIST) 섹션 전체를 조금 위로 — 상단 패딩 축소 */ .legacy-sub .foreheadlift2_con.pd150{padding-top:clamp(56px,6vw,100px);} /* lower-mid: 인트로 — 이미지 확대(큰 제목과 균형) + 설명 전체폭 중앙 분리 */ .legacy-sub .lowereyelift1_con .sub_common1_item_box{align-items:center;} .legacy-sub .lowereyelift1_con .sub_common1_item_box .txt_box{flex:1;} .legacy-sub .lowereyelift1_con .sub_common1_item_box .img_box{flex:0 0 56%;max-width:720px;} .legacy-sub .lowereyelift1_con .sub_common1_item_box .img_box img{width:100%;} .legacy-sub .lowereyelift1_con .lowereyelift1_intro{max-width:860px;margin:clamp(40px,4vw,64px) auto clamp(8px,1.5vw,24px);text-align:center;font-size:22px;line-height:1.7;word-break:keep-all;} /* lower-mid: 추천 원형 글씨 넘침 → 원 확대 + 폰트 정리 */ .legacy-sub .lowereyelift13_con .circle_list li{width:250px;height:250px;} .legacy-sub .lowereyelift13_con .circle_list li p{font-size:17px;line-height:1.55;font-weight:600;word-break:keep-all;} /* lower-mid: INFORMATION 안내문구가 아이콘에 붙어 보여 간격 확보 */ .legacy-sub .lowereyelift12_con .information_box .etc{margin-top:clamp(32px,3.5vw,56px);} /* upper-bleph: 노하우 3카드 상단 기준 정렬 */ .legacy-sub .uppereyelid5_con .sub_common10_item_box{align-items:flex-start;} /* lower-bleph: 절개 텍스트 박스 장식선 하단 과여백 축소 */ .legacy-sub .lowereyelid4_con .sub_common8_item_box .txt_box .line{margin-bottom:40px;} /* brow: 추천→신뢰 섹션 여백 축소 / 1:1설계 하단 틴트밴드 축소 */ .legacy-sub .browlift7_con.sub_common12_con{padding-bottom:clamp(48px,5vw,80px);} .legacy-sub .browlift6_con.sub_common11_con:after{height:220px;} /* forehead-reduction: INFORMATION→추천 과여백 축소 */ .legacy-sub .foreheadrelift10_con.pd150{padding-bottom:var(--section-pad-tight);} /* fat-graft: 1:1설계 하단 틴트밴드 축소 */ .legacy-sub .fatgraft5_con.sub_common11_con:after{height:200px;} /* stem-cell · blood-derived-stem-cell: INFORMATION→추천 과여백 축소 (stemcell5/6 공유) */ .legacy-sub .stemcell5_con.sub_common11_con{padding-bottom:var(--section-pad-tight);} .legacy-sub .stemcell6_con.sub_common12_con{padding-top:var(--section-pad-tight);} .legacy-sub .stemcell2_con .txt_box p{max-width:900px;margin-left:auto;margin-right:auto;} /* skin-booster: 노하우 3카드 제목 높이 통일(본문 시작선 정렬) */ .legacy-sub .skinbooster6_con .sub_common10_item_box .item h3{min-height:2.4em;} /* apolex-tight: 텍스트 전용 항목 좌측 쏠림 → 중앙 (apolex2_con 클래스는 JSX에서 부여) */ .legacy-sub .apolex2_con .sub_common7_item_box .item > div{justify-content:center;} .legacy-sub .apolex2_con .sub_common7_item_box .item .txt_box{width:100%;max-width:760px;margin:0 auto;text-align:center;} /* 4k-endoscope: 프로세스 하단 아이콘 중앙 / 섹션 여백 축소 */ .scopintro-page .scopintro3_item_box .bt_box{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;} .scopintro-page .scopintro3_item_box .bt_box img{margin:0 auto;} .scopintro-page .scopintro2_con.pd150{padding-bottom:var(--section-pad-tight);} /* about-intro: 인사말 하단 여백 축소 */ .legacy-sub .intro1_con.pd150{padding-bottom:clamp(64px,7vw,96px);} /* about-doctor: 본문 좌측정렬 / 프로필박스 폭 정렬 / 마무리 섹션 여백 축소 */ /* about-doctor: 본문 중앙정렬(요청) + 상단 로고가 히어로에 붙어 보여 상단 여백 확보 */ .legacy-sub .doctor1_con{padding-top:clamp(72px,7vw,112px);} .legacy-sub .doctor1_con .sub_title p{text-align:center;word-break:keep-all;} .legacy-sub .doctor1_con .doctor_pop_box{max-width:1200px;width:100%;} .legacy-sub .doctor2_con.pd150{padding:var(--section-pad-tight) 0;} /* about-equipment: 장비 이미지 높이 정규화(짧은 텍스트 항목의 키 큰 이미지 정돈) */ .legacy-sub .equipment_item .img{display:flex;align-items:center;justify-content:center;} .legacy-sub .equipment_item .img img{max-height:340px;width:auto;max-width:100%;object-fit:contain;} /* about-info: 길찾기 버튼 과여백 축소 / footer_map 상단 여백 축소 */ .legacy-sub .sc_map .map_link_box{margin-top:60px;} .legacy-sub .footer_map.pd150{padding-top:clamp(64px,7vw,96px);} /* aftercare: 사후관리 항목 텍스트 상단 기준 정렬(빈 항목 떠보임 방지) */ .legacy-sub .pimcare2_con .sub_common7_item_box .item > div{align-items:flex-start;} /* --- 데스크톱 전용(모바일 레이아웃 영향 차단) --- */ @media all and (min-width:1025px){ /* botox: 아이젝 자동주입 텍스트+이미지 좌우 배치 (4k scopintro1 제외) */ .legacy-sub .botox3_con:not(.scopintro1_con) .botox3_con_item .row_con{display:flex;align-items:center;justify-content:space-between;gap:60px;} .legacy-sub .botox3_con:not(.scopintro1_con) .botox3_con_item .img_con{flex-shrink:0;width:380px;position:static;margin:0;} /* about-info: 지도 빈 박스 최소높이(외부 지도 미로드 시 빈칸 방지) */ .legacy-sub .item.main_map_con{min-height:430px;} /* about-intro·gallery: 7장 그리드 외톨이 카드 가운데 칸으로 */ .legacy-sub .intro3_con .grid > *:last-child:nth-child(3n+1){grid-column:2 / 3;} .legacy-sub .gallery1_con .grid > *:last-child:nth-child(3n+1){grid-column:2 / 3;} } /* ════════════════════════════════════════════════════════════ 2026-06-09 눈성형(상안검·하안검·눈썹거상)·얼굴지방이식 섹션 다듬기 ──────────────────────────────────────────────────────────── */ /* [중앙정렬 원인픽스 — 전 상세페이지] sub_common6 인트로

는 max-width(--measure)만 있고 margin:auto 가 없어, 블록이 좌측에 붙고 텍스트만 내부에서 가운데 정렬돼 전체가 왼쪽으로 치우쳐 보였음(상안검·하안검·눈썹·지방이식·이마축소거상·풀페이스 등 공통). → sub_common6_con 전체에 블록 중앙 정렬 적용(모든 sub_common6 섹션은 text-align:center). */ .legacy-sub .sub_common6_con .txt_box p{margin-left:auto;margin-right:auto;} /* [성형테크닉 03 — 독립 풀폭 배너 섹션] sub_common7 에서 분리. #sub_wrap(100%) 직속이라 뷰포트 풀폭. 배경 이미지는 섹션 전체(inset:0) cover, 텍스트는 row_con(1200px) 안에서 좌측 정렬. */ .legacy-sub .tech03_con{position:relative;width:100%;min-height:clamp(420px,30vw,560px);display:flex;align-items:center;overflow:hidden;} .legacy-sub .tech03_con .tech03_bg{position:absolute;inset:0;z-index:0;} .legacy-sub .tech03_con .tech03_bg img{width:100%;height:100%;object-fit:cover;object-position:center;} .legacy-sub .tech03_con .row_con{position:relative;z-index:1;} .legacy-sub .tech03_con .txt_box{text-align:left;} .legacy-sub .tech03_con .txt_box .num{color:#fff;letter-spacing:0;font-weight:500;font-family:var(--font-montserrat);font-size:70px;line-height:1;} .legacy-sub .tech03_con .txt_box .num span{position:relative;} .legacy-sub .tech03_con .txt_box .num span:after{content:"";width:30px;height:2px;background:#fff;position:absolute;bottom:5px;left:50%;transform:translateX(-50%);} /* 배너 플랫 면 #0abab5→#107977 에셋 보정에 맞춰 다크 텍스트 → 흰색(~5.9:1) */ .legacy-sub .tech03_con .txt_box h3{font-size:30px;font-weight:700;margin:20px 0 35px;color:#fff;} .legacy-sub .tech03_con .txt_box p{font-size:22px;color:#fff;} @media (max-width:800px){ .legacy-sub .tech03_con{min-height:0;padding:14vw 0;} .legacy-sub .tech03_con .tech03_bg img{filter:brightness(.7);object-position:65%;} .legacy-sub .tech03_con .txt_box{text-align:center;} .legacy-sub .tech03_con .txt_box .num{font-size:8vw;} .legacy-sub .tech03_con .txt_box .num span:after{width:5vw;height:1px;bottom:2px;} .legacy-sub .tech03_con .txt_box h3{font-size:5vw;margin:3vw 0 5vw;color:#fff;} .legacy-sub .tech03_con .txt_box p{font-size:max(3vw,13px);color:#fff;} } /* [상안검] '리핌만의 노하우' 섹션만 검정 배경 (uppereyelid5 스코프 — 하안검/눈썹/지방이식 무영향) */ .legacy-sub .uppereyelid5_con.sub_common10_con{background-color:#111;} .legacy-sub .uppereyelid5_con.sub_common10_con .sub_title .color2{color:var(--color-accent-tint);} .legacy-sub .uppereyelid5_con.sub_common10_con .sub_title .color3{color:var(--color-accent);} .legacy-sub .uppereyelid5_con.sub_common10_con .item h3{color:var(--color-accent-tint);} .legacy-sub .uppereyelid5_con.sub_common10_con .item p{color:#d8d8d8;} /* [상안검 추천대상] 원형 리스트 박스 간격 확대(붙어있던 박스 여유 — 모바일은 자동 축소) */ .legacy-sub .uppereyelid7_con .circle_list{gap:clamp(16px,2.4vw,36px);} /* [눈썹거상술 히어로] 텍스트를 살짝 우측으로 이동(데스크톱 전용 — 모바일 중앙정렬 유지) */ @media all and (min-width:1025px){ .legacy-sub #sub_visual.browlift .sub_visual_text_wrap{right:-32px;} } /* [Personalized 카드 밸런스 — 전 상세페이지] sub_common8(개인 맞춤 절개) 좌이미지/우텍스트 50:50 카드에서 이미지가 자기 높이만큼만 차지해 우측 텍스트 박스와 높이가 안 맞고 빈 공간이 생기던 문제 → 두 칼럼 높이를 맞추고(stretch) 이미지가 자기 영역을 꽉 채우도록(cover) 통일. 데스크톱 전용(모바일 세로적층 보존). */ @media all and (min-width:1025px){ .legacy-sub .sub_common8_item_box{align-items:stretch;} /* 이미지를 절대배치(inset:0)로 카드(=텍스트 박스) 높이에 정확히 맞춰 채움 → 좌/우 동일 높이 */ .legacy-sub .sub_common8_item_box .img_box{position:relative;overflow:hidden;} /* img(replaced)는 height:auto + inset 으로는 안 늘어나므로 100% 강제(Next inline style 덮어쓰기) */ .legacy-sub .sub_common8_item_box .img_box img{position:absolute;inset:0;width:100% !important;height:100% !important;object-fit:cover;} } /* [INFORMATION 주석] '*이는 개인에 따라…' 문구를 아이콘 리스트에서 조금 더 아래로 */ .legacy-sub .sub_common11_con .information_box .etc{margin-top:18px;} /* [병원둘러보기 히어로] '병원둘러보기' 타이틀 제거 → LEEPEEM 로고(오버라인 h4)를 메인 타이틀처럼 확대 */ .legacy-sub #sub_visual.about .gallery-hero .sub_tit h4{font-size:clamp(30px,3.6vw,48px);letter-spacing:0.03em;line-height:1.25;color:#fff;} /* ════════ 2026-06-09 4K 내시경(scopintro) — 원본 배경/효과/카드 복원 (화이트 기조 유지) ════════ 원본 scopintro.html 은 레이어드(히어로 사진·카드·다크 클로징 밴드)인데 포팅 시 전부 평평한 흰색으로 납작해졌음 → 깊이(사진 히어로·그림자 카드·틸 포인트·다크 북엔드) 복원. 에셋은 로컬 존재. */ /* ① 히어로: 검정 단색 → 원본 인물 사진 + 가독 스크림 */ .scopintro-page #sub_visual .sub_visual_bg{background:#0c1a1c url("/page/endoscopy/img/scopintro_v.webp") center/cover no-repeat;} .scopintro-page #sub_visual .sub_visual_bg::after{background:linear-gradient(180deg,rgba(8,16,18,.48),rgba(8,16,18,.30) 45%,rgba(8,16,18,.58));} /* ② scopintro2(실시간 모니터링): 라이트 카드 + 닫는 약속줄 틸 알약 */ .scopintro-page .scopintro2_item_box ul li{background:#fff;border:1px solid var(--color-border-hair);border-radius:16px;padding:clamp(24px,2.4vw,34px);box-shadow:0 12px 30px rgba(42,42,38,.07);} .scopintro-page .scopintro2_item_box h4.mt80{display:inline-block;background:var(--color-accent-2);color:#fff;padding:16px 32px;border-radius:999px;box-shadow:0 12px 28px rgba(45,147,137,.25);} .scopintro-page .scopintro2_item_box h4.mt80 b{color:#fff !important;} /* ③ scopintro3(프로세스): 그림자 카드 + 중앙 단차 + 틸 CTA 바 */ .scopintro-page .scopintro3_item_box > ul{align-items:stretch;} .scopintro-page .scopintro3_item_box > ul > li > .box{background:#fff;border:1px solid var(--color-border-hair);border-radius:16px;padding:clamp(28px,3vw,40px);box-shadow:0 14px 34px rgba(42,42,38,.08);height:100%;} .scopintro-page .scopintro3_item_box > ul > li.sec > .box{margin-top:-26px;background:#f7faf9;} .scopintro-page .scopintro3_item_box .bt_box{background:var(--color-accent-2);color:#fff;border-radius:43px;padding:20px 30px;margin-top:48px;box-shadow:0 14px 32px rgba(45,147,137,.22);} .scopintro-page .scopintro3_item_box .bt_box h4{color:#fff !important;} /* ④ scopintro4(안티에이징·윤곽): 아이콘군 둥근 카드 + 구분선 + '거상술' 배지 */ .scopintro-page .scopintro4_item_box .first_ul_box{border:1px solid var(--color-border-hair);border-radius:30px;background:#fff;padding:clamp(40px,4vw,64px) clamp(20px,3vw,44px);position:relative;box-shadow:0 18px 44px rgba(42,42,38,.07);} .scopintro-page .scopintro4_item_box .first_ul_box > li:not(:last-child){border-right:1px solid var(--color-border-hair);} .scopintro-page .scopintro4_item_box .first_ul_box::before{content:"거상술";position:absolute;top:-17px;left:50%;transform:translateX(-50%);background:#fff;padding:5px 24px;border-radius:20px;border:1px solid var(--color-accent);color:var(--color-accent-text);font-weight:700;font-size:clamp(15px,1.4vw,18px);} /* ④-bg: scopintro4 섹션 — 틸 성운 배경 + 다크 톤 카드/타이포 */ .scopintro-page .scopintro4_con{background:#0e3b39 url("/page/endoscopy/img/scopintro4_bg.webp") center/cover no-repeat;} .scopintro-page .scopintro4_con .sub_title .en{color:#9fe7df !important;} .scopintro-page .scopintro4_con .sub_title h3{color:#fff !important;} .scopintro-page .scopintro4_con .sub_title h3 b{color:#5ff0e6 !important;} .scopintro-page .scopintro4_con .sub_title p, .scopintro-page .scopintro4_con .sub_title p b{color:rgba(255,255,255,.92) !important;} .scopintro-page .scopintro4_con .scopintro4_item_box .first_ul_box{background:rgba(255,255,255,.04);border-color:rgba(170,238,231,.4);box-shadow:none;} .scopintro-page .scopintro4_con .scopintro4_item_box .first_ul_box > li:not(:last-child){border-right-color:rgba(170,238,231,.28);} .scopintro-page .scopintro4_con .scopintro4_item_box .first_ul_box::before{background:#103f3c;border-color:rgba(120,230,219,.7);color:#fff;} .scopintro-page .scopintro4_con .scopintro4_item_box .first_ul_box .box p{color:#eafffb;} /* ⑤ scopintro9(리핌의 거상술): 틸 글로우 배경 + 4개 강점 플로팅 화이트 카드 */ .scopintro-page .scopintro9_con{background:#1f7a72 url("/page/endoscopy/img/scopintro9_bg.webp") center/cover no-repeat;padding-bottom:clamp(80px,9vw,150px);} .scopintro-page .scopintro9_con .sub_title h3, .scopintro-page .scopintro9_con .sub_title h3 b, .scopintro-page .scopintro9_con .sub_title p, .scopintro-page .scopintro9_con .sub_title p b{color:#fff !important;} .scopintro-page .scopintro9_con .sub_title .en{color:#bff0ea !important;} .scopintro-page .scopintro9_item_box .item_ul .item{background:#fff;border:1px solid var(--color-border-hair);border-radius:20px;padding:clamp(26px,2.6vw,36px);box-shadow:0 14px 36px rgba(42,42,38,.08);transition:transform var(--transition-lux),box-shadow var(--transition-lux);} .scopintro-page .scopintro9_item_box .item_ul .item:hover{transform:translateY(-5px);box-shadow:0 22px 48px rgba(42,42,38,.14);} /* ⑥ 닫는 섹션(sub_common14): 원본 다크 클로징 밴드 — 히어로와 북엔드 */ .scopintro-page .scopintro8_con{background:#13201f url("/common/images/sub/sub_common14_bg.webp") center/cover no-repeat;} .scopintro-page .scopintro8_con .sub_title h3, .scopintro-page .scopintro8_con .sub_title p{color:#fff !important;} .scopintro-page .scopintro8_con .sub_title .color2{color:#8fe6d7 !important;} .scopintro-page .scopintro8_con .sub_title h4.en{color:#8fe6d7 !important;} /* ════════════════════════════════════════════════════════════ 2026-06-09 원본 섹션 배경 복원 (팀에이전트 grounded) — leepeemps.co.kr 원본의 sub_common 섹션별 배경 이미지를 되살림. 라이트화로 평평해진 섹션에 원본 색감/깊이 복구. light(2/5/11): 배경만 / dark(3/6/10/12/14): 배경 + 흰 텍스트 오버라이드. 에셋 로컬 존재. ════════════════════════════════════════════════════════════ */ /* sub_common2_con — light: 라이트 그리드, 다크 텍스트 유지 */ .legacy-sub .sub_common2_con{background:url("/common/images/sub/sub_common2_bg.webp") center/cover no-repeat !important;background-color:transparent !important;} /* sub_common5_con — light: 워터컬러(하단 민트), 다크 텍스트 유지 */ .legacy-sub .sub_common5_con{background:url("/common/images/sub/sub_common5_bg.webp") bottom/cover no-repeat !important;background-color:transparent !important;} /* sub_common11_con.bg_view — light: 하이키 인물, 다크 텍스트 유지 (흰 카드 내부는 그대로) */ .legacy-sub .sub_common11_con.bg_view{background:url("/common/images/sub/sub_common11_bg.webp") center/cover no-repeat !important;background-color:transparent !important;} /* sub_common6_con — dark(차콜): 배경 + 흰 텍스트 */ .legacy-sub .sub_common6_con{background:url("/common/images/sub/sub_common6_bg.webp") center/cover no-repeat !important;text-align:center;} .legacy-sub .sub_common6_con .sub_title h3, .legacy-sub .sub_common6_con .txt_box p, .legacy-sub .sub_common6_con .color_white .sub_title h3, .legacy-sub .sub_common6_con .color_white .txt_box p, .legacy-sub .sub_common6_con .color_white *{color:#fff !important;} .legacy-sub .sub_common6_con .sub_title h4, .legacy-sub .sub_common6_con .color_white .sub_title h4, .legacy-sub .sub_common6_con .color1{color:var(--color-accent-tint) !important;} /* sub_common10_con — dark(딥틸): 배경 + 흰 텍스트 (노하우 카드 포함) */ .legacy-sub .sub_common10_con{background:url("/common/images/sub/sub_common10_bg.webp") center/cover no-repeat !important;background-color:transparent !important;color:#fff !important;text-align:center;} .legacy-sub .sub_common10_con .sub_title h3, .legacy-sub .sub_common10_con .sub_title h3 b, .legacy-sub .sub_common10_con .sub_title h3 span, .legacy-sub .sub_common10_con .sub_title p, .legacy-sub .sub_common10_con .color_white .sub_title h3, .legacy-sub .sub_common10_con .color_white .txt_box p, .legacy-sub .sub_common10_con .color_white *{color:#fff !important;} .legacy-sub .sub_common10_con .sub_title h4, .legacy-sub .sub_common10_con .color_white .sub_title h4, .legacy-sub .sub_common10_con .sub_title .color3, .legacy-sub .sub_common10_con .item h3{color:var(--color-accent-tint) !important;} .legacy-sub .sub_common10_con .sub_title .color2{color:#fff !important;} .legacy-sub .sub_common10_con .item p{color:#d8d8d8 !important;} /* sub_common12_con — dark(틸 인물): 배경 + 흰 제목 (단, circle_list 카드는 자체색 유지) */ .legacy-sub .sub_common12_con{background:url("/common/images/sub/sub_common12_bg.webp") center/cover no-repeat !important;background-color:transparent !important;color:#fff !important;} .legacy-sub .sub_common12_con .color_white .sub_title h3, .legacy-sub .sub_common12_con .color_white .sub_title h3 b, .legacy-sub .sub_common12_con .color_white .txt_box p, .legacy-sub .sub_common12_con .sub_title.color_white h3, .legacy-sub .sub_common12_con .sub_title.color_white h3 b{color:#fff !important;} .legacy-sub .sub_common12_con .color_white .sub_title h4, .legacy-sub .sub_common12_con .sub_title.color_white h4{color:var(--color-accent-tint) !important;} /* [추천 좌측배치 — 삭제됨] V5에서 모든 sub_common12 배경을 솔리드 딥틸로 통일하면서 모델 보호용 좌측배치는 목적을 잃었고, :not(.fulllift14_con) 특이성이 V5 중앙정렬을 덮어써 데스크톱에서 콘텐츠가 좌측 절반에 몰리는 버그를 만들어 제거. */ /* sub_common14_con — dark(주치의 인물): 배경 + 흰 텍스트 (클로징 밴드) */ .legacy-sub .sub_common14_con{background:url("/common/images/sub/sub_common14_bg.webp") center/cover no-repeat !important;background-position:70% !important;background-color:transparent !important;text-align:center;color:#fff !important;} .legacy-sub .sub_common14_con .sub_title, .legacy-sub .sub_common14_con .sub_title h3, .legacy-sub .sub_common14_con .sub_title p, .legacy-sub .sub_common14_con .txt_box p, .legacy-sub .sub_common14_con .color_white .sub_title h3, .legacy-sub .sub_common14_con .color_white .sub_title p, .legacy-sub .sub_common14_con .color_white *{color:#fff !important;} .legacy-sub .sub_common14_con .sub_title h4, .legacy-sub .sub_common14_con .color_white .sub_title h4{color:var(--color-accent-tint) !important;} .legacy-sub .sub_common14_con .color2, .legacy-sub .sub_common14_con .sub_title .color2{color:#fff !important;} /* ===== full-facelift 페이지 전용 배경 재정의 (요청: 검은 배경 / 모델·원장 배경 제거) ===== */ /* ② 더블딥플레인 안면거상 — 블랙 배경 + 글씨 가독성 (full-facelift / 측두부 중안면거상 공통) */ .legacy-sub .fulllift7_con.sub_common_sub3_2_con, .legacy-sub .temporallift5_con.sub_common_sub3_2_con{background:#0d0d0d !important;color:#fff !important;} .legacy-sub .fulllift7_con.sub_common_sub3_2_con .sub_title h3, .legacy-sub .fulllift7_con.sub_common_sub3_2_con .txt_box, .legacy-sub .fulllift7_con.sub_common_sub3_2_con .txt_box *, .legacy-sub .temporallift5_con.sub_common_sub3_2_con .sub_title h3, .legacy-sub .temporallift5_con.sub_common_sub3_2_con .txt_box, .legacy-sub .temporallift5_con.sub_common_sub3_2_con .txt_box *{color:#fff !important;} .legacy-sub .fulllift7_con.sub_common_sub3_2_con .sub_title h4.en, .legacy-sub .fulllift7_con.sub_common_sub3_2_con .color1, .legacy-sub .temporallift5_con.sub_common_sub3_2_con .sub_title h4.en, .legacy-sub .temporallift5_con.sub_common_sub3_2_con .color1{color:#5ff0e6 !important;} /* ③ 이런 분들께 추천 — 여자 모델 배경 제거, 클린 틸 배경. 흰 타이틀이 올라가는 면이므로 #0abab5(2.4:1) 대신 딥틸(5.2:1). */ .legacy-sub .fulllift14_con.sub_common12_con{background:#107977 !important;background-image:none !important;} /* ④ 프리미엄 안티에이징 주치의 — 원장 사진 배경 제거, 클린 다크 배경 */ .legacy-sub .fulllift16_con.sub_common14_con{background:#141414 !important;background-image:none !important;} /* ===== [쁘띠·케어 스텝 카드] sub_common7_item_box.cards — 01/02/03 스텝을 가로 그리드 중앙정렬 카드로 ===== 한 줄에 나란히(모바일 1단), 각 카드는 [상단 이미지 + 번호·제목·설명] 중앙정렬. 비수술(petite·anti-aging) 전용 opt-in. */ .legacy-sub .sub_common7_item_box.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); align-items:stretch;gap:clamp(20px,2vw,30px); max-width:1200px;margin:0 auto; } .legacy-sub .sub_common7_item_box.cards .item{margin:0 !important;padding:0 !important;width:auto;} .legacy-sub .sub_common7_item_box.cards .item > div{ /* row_con → 세로 카드, 콘텐츠 중앙 (지그재그 해제) */ display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start; width:auto;max-width:100%;height:100%;margin:0; /* 전역 .row_con{width:1200px;margin:auto} 무력화 — 카드 밖 우측 오버플로(쏠림) 원인 / height:100% 로 가로 정렬 시 카드 높이 균일 */ background:#fff;border:1px solid #ededed;border-radius:20px;overflow:hidden; box-shadow:0 16px 38px rgba(0,0,0,.06); } .legacy-sub .sub_common7_item_box.cards .item:nth-child(even) > div{flex-direction:column;} /* 이미지 상단 — banner-item 의 absolute 포지셔닝/필터도 무력화 */ .legacy-sub .sub_common7_item_box.cards .item .img_box, .legacy-sub .sub_common7_item_box.cards .item.banner-item .img_box{ order:-1;position:static !important;inset:auto !important;width:100%;height:auto;text-align:center; } .legacy-sub .sub_common7_item_box.cards .item .img_box img, .legacy-sub .sub_common7_item_box.cards .item.banner-item .img_box img{ position:static !important;inset:auto !important;z-index:auto !important; width:100% !important;height:clamp(200px,18vw,260px) !important; object-fit:cover !important;object-position:center !important;display:block;border-radius:0;filter:none !important; } /* 텍스트 영역 — 중앙정렬 */ .legacy-sub .sub_common7_item_box.cards .item .txt_box{ padding:clamp(22px,2vw,34px) !important;text-align:center !important;margin:0 !important; } .legacy-sub .sub_common7_item_box.cards .item .txt_box .num{font-size:clamp(38px,3vw,48px) !important;margin:0 auto;} .legacy-sub .sub_common7_item_box.cards .item .txt_box h3{font-size:clamp(20px,1.5vw,24px) !important;margin:8px 0 12px !important;color:var(--color-text);} .legacy-sub .sub_common7_item_box.cards .item .txt_box p{font-size:clamp(14px,1vw,16px) !important;line-height:1.7;color:var(--color-text-muted);} .legacy-sub .sub_common7_item_box.cards .item .txt_box p br{display:none;} /* 카드 폭에 맞춰 자연 줄바꿈 */ .legacy-sub .sub_common7_item_box.cards .item .txt_box.color_white, .legacy-sub .sub_common7_item_box.cards .item .txt_box.color_white *{color:var(--color-text) !important;} @media (max-width:800px){ .legacy-sub .sub_common7_item_box.cards{max-width:440px;gap:16px;} .legacy-sub .sub_common7_item_box.cards .item .img_box img{height:200px !important;} } /* [카드 순차 등장] 세로 스택이라 스크롤하며 01→02→03→04 가 차례로 페이드업. 각 카드는 뷰포트 진입 시 is-inview (TreatmentReveal IO) + JS 형제 스태거(120ms)로 한 장씩 등장. JS 미동작 시(.reveal-on 없음) 즉시 노출(점진적 향상). */ .legacy-sub.reveal-on .sub_common7_item_box.cards .item.rv{ opacity:0;transform:translateY(42px); transition:opacity .6s var(--ease-lux), transform .6s var(--ease-lux); } .legacy-sub.reveal-on .sub_common7_item_box.cards .item.rv.is-inview{opacity:1;transform:none;} /* 가로 정렬(한 줄에 다 보임) 시 또렷한 순차 등장: nth-child 딜레이 강화 (JS 인라인 스태거 덮어씀) */ .legacy-sub.reveal-on .sub_common7_item_box.cards .item:nth-child(1){transition-delay:.05s !important;} .legacy-sub.reveal-on .sub_common7_item_box.cards .item:nth-child(2){transition-delay:.22s !important;} .legacy-sub.reveal-on .sub_common7_item_box.cards .item:nth-child(3){transition-delay:.39s !important;} .legacy-sub.reveal-on .sub_common7_item_box.cards .item:nth-child(4){transition-delay:.56s !important;} @media (prefers-reduced-motion: reduce){ .legacy-sub.reveal-on .sub_common7_item_box.cards .item.rv{opacity:1 !important;transform:none !important;transition:none !important;} } /* ════════ 2026-06-10 모바일 QA 수정 (M6·M7·M8·N6) — 모두 max-width:800px 한정, PC 무영향 ════════ */ /* [M6] 추천(sub_common12) 모바일 — 모델 배경 위 흰 제목·틸 원형카드가 얼굴과 겹쳐 저대비 → full-facelift(fulllift14_con, 2197행)에서 이미 적용된 솔리드 틸 패턴을 모바일에만 동일 적용. PC(>=801px)는 기존 모델 배경 + 좌측배치(2160행) 그대로 유지. */ @media (max-width:800px){ /* 흰 7vw 타이틀·본문이 올라가는 솔리드 면 — #0abab5(2.4:1)→딥틸(5.2:1) */ .legacy-sub .sub_common12_con:not(.fulllift14_con){background:#107977 !important;background-image:none !important;} } /* [M7] tech03 풀폭 배너 모바일 — cover 배경 도해·라벨 pill 위에 텍스트가 직접 겹침 → 세로 분리: 틸 밴드(이미지 배경색 #0abab5 와 동일) 위 텍스트, 아래 도해 이미지(일반 블록). tech-band 모바일 패턴(2007행)과 동일 결. 도해(우측 65~82%)가 보이도록 68% 크롭. */ @media (max-width:800px){ /* 배너 이미지 플랫 면을 #0abab5→#107977 로 재칠(에셋 일괄 보정)하면서 밴드색도 동기화 */ .legacy-sub .tech03_con{flex-direction:column;background:#107977;padding:12vw 0 0;} .legacy-sub .tech03_con .row_con{order:1;} .legacy-sub .tech03_con .tech03_bg{order:2;position:static;inset:auto;width:100%;height:92vw;margin-top:8vw;} .legacy-sub .tech03_con .tech03_bg img{filter:none;object-fit:cover;object-position:68% center;} /* 딥틸 위 다크 텍스트는 불가독 → 흰색(#107977 대비 ~5.9:1)으로 전환 */ .legacy-sub .tech03_con .txt_box h3, .legacy-sub .tech03_con .txt_box p{color:#fff;} .legacy-sub .tech03_con .txt_box .num{color:#fff;} } /* [M8-1] scopintro3 프로세스 3카드 — flex:1 1 0 가로 3열이 390px 에서 글자 단위 세로 줄바꿈 → 모바일 세로 스택 + 중앙 단차(-26px, 2067행) 리셋. */ @media (max-width:800px){ .scopintro-page .scopintro3_item_box > ul{flex-direction:column;align-items:center;} .scopintro-page .scopintro3_item_box > ul > li{flex:none;width:100%;max-width:320px;} .scopintro-page .scopintro3_item_box > ul > li.sec > .box{margin-top:0;} } /* [M8-2] scopintro4 거상 4종 — 가로 4열이 ~62px 폭으로 깨짐 → 2×2 그리드 전환. 구분선(2073행 border-right)은 그리드에서 우측 열 세로선 잔존하므로 제거. */ @media (max-width:800px){ .scopintro-page .scopintro4_item_box .first_ul_box{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;row-gap:36px;} .scopintro-page .scopintro4_item_box .first_ul_box > li{max-width:none;width:100%;} .scopintro-page .scopintro4_item_box .first_ul_box > li:not(:last-child){border-right:none;} } /* [N6] full-facelift 수술범위 와이드 도해(1206px) — 통째 축소로 라벨 4~6px 판독 불가 → 모바일에서 가로 스크롤 컨테이너로 감싸 최소폭 760px 보장(라벨 가독). 원본 에셋·PC 무변경. */ @media (max-width:800px){ .legacy-sub .fulllift9_con .img_box.one{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;} .legacy-sub .fulllift9_con .img_box.one img{width:760px !important;max-width:none !important;height:auto !important;display:block;} } /* ════════════════ 2026-06-12 상세페이지 전수 시각 검수 패치 ════════════════ */ /* [V1] 추천 원형 리스트(sub_common12) — 솔리드 틸 섹션(fulllift14_con 등)에서 1·2번 원 채움색(#107977)이 배경과 동색으로 묻혀 원 없이 '맨글자'처럼 보이고, 장문 캡션(스킨부스터·지방이식)이 원 둘레 밖으로 흘러넘침. → 네 항목 모두 흰 카드 + 딥틸 텍스트(5.2:1)로 통일, keep-all·패딩으로 넘침 방지. */ .legacy-sub .sub_common12_con .circle_list li, .legacy-sub .sub_common12_item_box .circle_list li{ background:#fff !important; color:#107977 !important; border:2px solid rgba(16,121,119,.3) !important; padding:20px; box-sizing:border-box; } .legacy-sub .sub_common12_item_box .circle_list li p{ word-break:keep-all; overflow-wrap:break-word; } @media (max-width:800px){ /* 390px 에서 35vw(≈136px) 고정 원은 장문 수용 불가 → 라운드 카드로 전환(높이 가변) */ .legacy-sub .sub_common12_item_box .circle_list{gap:3vw;} .legacy-sub .sub_common12_item_box .circle_list li{ width:44vw;height:auto;min-height:36vw;border-radius:24px;padding:6vw 4vw; } } /* [V2] 한국어 본문 어절 보존 — 다크 인용부·Personalized 패널 등에서 "변/화시킵니다", "다." 단독 행 같은 음절 단위 줄바꿈 제거 (전 시술 페이지 공통). */ :root[lang^="ko"] .legacy-sub p{ word-break:keep-all; overflow-wrap:break-word; } /* [V3] 모바일 히어로 가독 — 밝은 인물 사진 위 흰 카피(눈성형·지방흡입 등) 대비 부족. 텍스트가 중앙 하단으로 내려오는 모바일에서만 하단 그라데이션 스크림 추가. */ @media (max-width:800px){ .legacy-sub #sub_visual .sub_visual_bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,.08) 30%,rgba(0,0,0,.42)); } } /* [V4] full-facelift 수술범위 와이드 도해 — [N6] 가로 스크롤 컨테이너가 스크롤 가능함을 알 수 없어 '잘린 이미지'로 오인됨 → 스와이프 힌트 캡션 표기. */ @media (max-width:800px){ .legacy-sub .fulllift9_con .row_con::after{ content:"← 좌우로 밀어 전체 범위를 확인하세요"; display:block;text-align:center;font-size:13px;color:#767676;margin-top:10px; } } /* [V5] 추천 섹션(sub_common12) 배경 — 모델 사진 배경(sub_common12_bg)은 하단에 흰 테이블 영역이 포함된 에셋이라 cover 배치 시 섹션 하단에 '잘린 팔/흰 띠'가 노출됨(안티에이징 4페이지 외 공통). full-facelift(fulllift14_con)에서 확립한 솔리드 딥틸 배경으로 전 페이지 통일. */ .legacy-sub .sub_common12_con{ background:#107977 !important; background-image:none !important; } /* 모델 보호용 좌측배치(min-width:801px) 해제 — 배경이 솔리드가 되어 중앙 정렬 복원 */ @media all and (min-width:801px){ .legacy-sub .sub_common12_con .sub_common12_item_box{justify-content:center;} .legacy-sub .sub_common12_con .sub_common12_item_box .txt_box{ width:100%;max-width:1060px;margin:0 auto;text-align:center; } .legacy-sub .sub_common12_con .sub_common12_item_box .sub_title{text-align:center;} .legacy-sub .sub_common12_con .circle_list{justify-content:center;} } /* [V6] 기술이 만드는 차이(sub_common13) 카드 — 밝은 사진 위 흰 본문 가독 보강 */ .legacy-sub .sub_common13_item_box .item p{ text-shadow:0 1px 6px rgba(0,0,0,.55); } .legacy-sub .sub_common13_item_box .item h3{ text-shadow:0 1px 6px rgba(0,0,0,.45); } /* [V7] sub_common13 도입부 세로 구분선 — 모바일에서 100px 선+60px 마진이 '빈 화면'처럼 보임 → 모바일만 절반 축소 */ @media (max-width:800px){ .legacy-sub .sub_common13_con .sub_title h3:nth-child(2):after{ height:48px;margin:24px auto; } }