/* 굵은 줄(시술명) — 사이트 NanumSquareNeo 는 400 한 굵기뿐이라 원본 이미지의 아주 굵은 글씨가 안 나온다 · 사이트에 있는 Noto Sans KR Black 을 쓴다(같은 이름 woff2 는 브라우저가 해석을 거부해 woff 를 쓴다) */ @font-face { font-family:'HxHeavy'; src:url('/assets/fonts/NotoSansKR-Black.woff') format('woff'); font-weight:800; font-style:normal; font-display:swap } @font-face { font-family:'HxBold'; src:url('/assets/fonts/NotoSansKR-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap } /* 외국어 홈 첫 화면 글자층 — 원래 글자 이미지(2120x1070 · 모바일 820x1260)와 같은 자리·크기·굵기로 그린다 */ .hx { position:absolute; width:max-content; font-size:16px; color:#f5fdff; line-height:1.36; letter-spacing:-0.01em; font-family:'NanumSquareNeo','Noto Sans','Noto Sans KR','Noto Sans JP','Noto Sans SC',system-ui,-apple-system,'Segoe UI',sans-serif; word-break:keep-all; overflow-wrap:normal; pointer-events:none; text-align:start } .hx .hx-ln { display:block; text-wrap:balance } .hx .hx-l { font-weight:300 } .hx .hx-b { font-weight:800; font-family:'HxHeavy','NanumSquareNeo','Noto Sans','Noto Sans JP','Noto Sans SC',system-ui,-apple-system,'Segoe UI',sans-serif } .hx .hx-h { font-weight:300; font-style:italic; opacity:.95 } .hx .hx-em { font-size:1.36em; line-height:1; font-style:italic; font-weight:400; color:#fffcac } :lang(ja) .hx .hx-em, :lang(zh-CN) .hx .hx-em, :lang(zh-TW) .hx .hx-em, :lang(th) .hx .hx-em, :lang(ar) .hx .hx-em { font-style:normal; font-weight:700 } :lang(ja) .hx .hx-h, :lang(zh-CN) .hx .hx-h, :lang(zh-TW) .hx .hx-h, :lang(th) .hx .hx-h, :lang(ar) .hx .hx-h { font-style:normal } .hx .hx-ln.hx-b { margin-top:.28em } .hx .hx-ln.hx-l .hx-b { font-weight:800 } /* PC — 글자층 원점 = .wrap(2120x1070) 왼쪽 위. 좌측 묶음은 화면 왼쪽 밖으로 나가지 않게, 우측 묶음은 화면 오른쪽 안에서 줄바꿈 */ #mc_special .hx-mv_txt_0101 { left:max(360px, calc(1084px - 50vw)); top:458px } #mc_special .hx-mv_txt_0101 .hx-ln + .hx-ln { padding-inline-start:125px } #mc_special .hx-mv_txt_0102 { left:1372px; top:462px } #mc_special .hx-mv_txt_0201 { left:max(446px, calc(1084px - 50vw)); top:376px } #mc_special .hx-mv_txt_0301 { left:max(389px, calc(1084px - 50vw)); top:424px } #mc_special .hx-mv_txt_0301 .hx-ln.hx-b { margin-top:.12em } #mc_special .hx-mv_txt_0302 { left:1411px; top:510px } #mc_special .hx-mv_txt_0401 { left:max(468px, calc(1084px - 50vw)); top:394px } #mc_special .hx-mv_txt_0501 { left:max(468px, calc(1084px - 50vw)); top:393px } /* 모바일 — 원점 = .wrap(820x1260 비율) 왼쪽 위 · 1단위 = 100cqw/820 */ #mc_special_m .gp_typo, #mc_special_m .gp_bg1 { container-type:inline-size } #mc_special_m .hx { --u:calc(100cqw / 820) } #mc_special_m .hx-m_mv_txt_0101 { left:calc(182 * var(--u)); top:calc(712 * var(--u)) } #mc_special_m .hx-m_mv_txt_0101 .hx-ln + .hx-ln { padding-inline-start:calc(160 * var(--u)) } #mc_special_m .hx-m_mv_txt_0102 { left:calc(228 * var(--u)); top:calc(910 * var(--u)); opacity:.72 } #mc_special_m .hx-m_mv_txt_0201 { left:calc(154 * var(--u)); top:calc(790 * var(--u)) } #mc_special_m .hx-m_mv_txt_0301 { left:calc(150 * var(--u)); top:calc(704 * var(--u)) } #mc_special_m .hx-m_mv_txt_0301 .hx-ln.hx-l { margin-top:.4em } #mc_special_m .hx-m_mv_txt_0401 { left:calc(150 * var(--u)); top:calc(788 * var(--u)) } #mc_special_m .hx-m_mv_txt_0501 { left:calc(149 * var(--u)); top:calc(788 * var(--u)) } /* 오른쪽→왼쪽 언어 — 메인비주얼 틀(1920 고정 폭 가운데 정렬 · 슬라이드 순서)은 왼쪽 기준이라 틀만 왼쪽 기준으로 두고 글자는 오른쪽→왼쪽으로 쓴다 */ [dir="rtl"] #mc_special, [dir="rtl"] #mc_special_m { direction:ltr } [dir="rtl"] #mc_special .hx, [dir="rtl"] #mc_special_m .hx { direction:rtl } /* 일본어·중국어 — 낱말 사이 띄어쓰기가 없어 keep-all 이면 한 줄이 끊기지 않고 밖으로 나간다 · 글자 단위 줄바꿈(문장부호 규칙 지킴) */ :lang(ja) .hx, :lang(zh-CN) .hx, :lang(zh-TW) .hx, :lang(zh) .hx { word-break:normal; line-break:strict } :lang(ja) #mc_special_m .hx-m_mv_txt_0101 .hx-ln + .hx-ln, :lang(zh-CN) #mc_special_m .hx-m_mv_txt_0101 .hx-ln + .hx-ln, :lang(zh-TW) #mc_special_m .hx-m_mv_txt_0101 .hx-ln + .hx-ln { padding-inline-start:calc(60 * var(--u)); white-space:nowrap } /* 베트남어 — NanumSquareNeo·Noto Sans KR 에 없는 성조 글자(ẹ·ờ·ặ 등)만 다른 서체로 섞여 보인다 · 성조 글자를 다 가진 서체를 먼저 쓴다 */ :lang(vi) .hx, :lang(vi) .hx .hx-b { font-family:'Noto Sans',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif } /* 일본어 PC 첫 슬라이드 둘째 줄(ライン が90%) — 강조 글자가 커서 줄이 갈라진다 · 한 줄로 둔다(화면 안에서 사진 쪽으로 조금 더 나갈 뿐) */ :lang(ja) #mc_special .hx-mv_txt_0101 .hx-ln + .hx-ln { white-space:nowrap } /* 아랍어 모바일 첫 슬라이드 — 둘째 줄이 들여쓰기 때문에 두 줄로 갈라져 아래 작은 문구와 겹친다 · 들여쓰기를 줄인다 */ :lang(ar) #mc_special_m .hx-m_mv_txt_0101 .hx-ln + .hx-ln { padding-inline-start:calc(40 * var(--u)) } /* 한국어 1장 작은 줄 — 원래 이미지의 굵은 줄은 Black 이 아니라 Bold 굵기다 */ :lang(ko) #mc_special .hx-mv_txt_0102 .hx-b { font-family:'HxBold','Noto Sans KR',sans-serif; font-weight:700 } :lang(ko) #mc_special .hx-mv_txt_0102 .hx-ln.hx-b { margin-top:0 } /* 한국어 가는 줄 — 원래 이미지처럼 가는 굵기(Noto Sans KR Light) */ @font-face { font-family:'HxLight'; src:url('/assets/fonts/NotoSansKR-Light.woff') format('woff'); font-weight:300; font-style:normal; font-display:swap } :lang(ko) .hx .hx-l, :lang(ko) .hx .hx-s { font-family:'HxLight','Noto Sans KR',sans-serif; font-weight:300 } /* 홈 둘째 묶음(시술 슬라이드) 왼쪽 목록 — main.css 가 한국어 시술명을 ::after 글자로 넣는다 · 외국어 지면은 그 언어 시술명(메뉴 사전 표기)으로 바꾼다 */ :lang(en) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI One-Day Eye Surgery"} :lang(en) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. Men's Eye Surgery"} :lang(en) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. Canthoplasty"} :lang(en) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. Canthoplasty revision"} :lang(en) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. Middle-Aged Eye Surgery"} :lang(en) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. Line-Lowering Revision"} :lang(ja) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI ワンデー目の整形"} :lang(ja) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. 男性の目の整形"} :lang(ja) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. 切開系の目元整形"} :lang(ja) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. 切開修正"} :lang(ja) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. 中年の目の整形"} :lang(ja) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. ライン下げ再手術"} :lang(zh-CN) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI 一日眼部整形"} :lang(zh-CN) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. 男士眼部整形"} :lang(zh-CN) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. 开眼角手术"} :lang(zh-CN) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. 开眼角复原"} :lang(zh-CN) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. 中年眼部整形"} :lang(zh-CN) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. 降低双眼皮线修复手术"} :lang(zh-TW) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI 一日眼部整形"} :lang(zh-TW) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. 男性眼部整形"} :lang(zh-TW) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. 開眼角手術"} :lang(zh-TW) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. 開眼角修復"} :lang(zh-TW) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. 中年眼部整形"} :lang(zh-TW) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. 降低雙眼皮線修復手術"} :lang(ru) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI Пластика век за один день"} :lang(ru) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. Мужская пластика век"} :lang(ru) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. Кантопластика"} :lang(ru) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. Восстановительная операция после кантопластики"} :lang(ru) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. Пластика век в зрелом возрасте"} :lang(ru) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. Повторная операция: понижение линии"} :lang(th) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI ศัลยกรรมตาแบบวันเดียว"} :lang(th) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. ศัลยกรรมตาผู้ชาย"} :lang(th) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. ศัลยกรรมเปิดมุมตา"} :lang(th) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. แก้ไขการเปิดหัวตา/หางตา"} :lang(th) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. ศัลยกรรมตาวัยกลางคน"} :lang(th) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. แก้ไขลดความสูงแนวชั้นตา"} :lang(vi) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI Phẫu thuật mắt trong ngày"} :lang(vi) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. Phẫu thuật mắt nam"} :lang(vi) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. Mở rộng góc mắt"} :lang(vi) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. Phục hồi mở góc mắt"} :lang(vi) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. Phẫu thuật mắt trung niên"} :lang(vi) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. Chỉnh sửa hạ đường mí"} :lang(mn) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI Нэг өдрийн нүдний мэс засал"} :lang(mn) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. Эрэгтэйн нүдний мэс засал"} :lang(mn) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. Нүдний булан нээх мэс засал"} :lang(mn) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. Нүдний булангийн нээлтийг сэргээх"} :lang(mn) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. Дунд насны нүдний мэс засал"} :lang(mn) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. Шугам доошлуулах давтан мэс засал"} :lang(ar) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI تجميل العيون في يوم واحد"} :lang(ar) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. تجميل عيون الرجال"} :lang(ar) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. توسيع زوايا العين"} :lang(ar) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. ترميم زوايا العين بعد جراحة توسيعها"} :lang(ar) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. تجميل العيون لمنتصف العمر"} :lang(ar) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. جراحة تصحيحية لخفض الخط"} :lang(ms) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI Pembedahan Mata Sehari"} :lang(ms) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. Pembedahan Mata Lelaki"} :lang(ms) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. Kantoplasti"} :lang(ms) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. Pemulihan kantoplasti"} :lang(ms) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. Pembedahan Mata Usia Pertengahan"} :lang(ms) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. Pembedahan revisi merendahkan garisan"} :lang(id) .mcnt2_owl .owl-dots .owl-dot:after{content:"01. HANI Bedah Mata Satu Hari"} :lang(id) .mcnt2_owl .owl-dots .owl-dot:nth-child(2):after{content:"02. Bedah Plastik Mata Pria"} :lang(id) .mcnt2_owl .owl-dots .owl-dot:nth-child(3):after{content:"03. Kantoplasti"} :lang(id) .mcnt2_owl .owl-dots .owl-dot:nth-child(4):after{content:"04. Revisi kantoplasti"} :lang(id) .mcnt2_owl .owl-dots .owl-dot:nth-child(5):after{content:"05. Bedah Mata Usia Paruh Baya"} :lang(id) .mcnt2_owl .owl-dots .owl-dot:nth-child(6):after{content:"06. Operasi revisi menurunkan garis"} /* 모바일 두 칸 목록 — 외국어 시술명은 한 칸에서 두 줄이 되기 쉽다 · 줄 높이(55px)를 줄이고 칸 높이를 맞춰 줄이 어긋나지 않게 한다 */ @media all and (max-width:820px){ html:not([lang="ko"]) .mcnt2_owl .owl-dots .owl-dot { min-height:76px; display:flex; align-items:center; box-sizing:border-box } html:not([lang="ko"]) .mcnt2_owl .owl-dots .owl-dot:after { line-height:1.3 } } /* 아랍어 — 시술 슬라이드 틀은 왼쪽 기준(슬라이더가 왼쪽→오른쪽으로 움직인다)이라 틀만 왼쪽 기준으로 두고 목록 글자는 오른쪽→왼쪽으로 쓴다 */ [dir="rtl"] .mcnt2_owl { direction:ltr } [dir="rtl"] .mcnt2_owl .owl-dots .owl-dot:after { unicode-bidi:plaintext }