/* ==========================================================================
CSS Variables & Reset (Strict Figma Mapping)
========================================================================== */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
:root {
--font-family: 'Pretendard', sans-serif;
--header-height: 160px;
--max-width: 1920px;
/* Colors */
--bg-white: #ffffff;
--text-black: #000000;
--border-line: #e5e5e5;
--card-bg: #f9f9f9;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 10px; overflow-x: hidden; width: 100%; max-width: 100%; }
body { font-family: var(--font-family); background-color: var(--bg-white); color: var(--text-black); overflow-x: hidden; width: 100%; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { background: none; border: none; cursor: pointer; font-family: inherit; }
.m-br { display: none !important; }
.pc-br { display: inline !important; }
/* ==========================================================================
Layout
========================================================================== */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }
.section { padding: 100px 0; scroll-margin-top: var(--header-height); }
/* ==========================================================================
Typography (Strictly from Figma)
========================================================================== */
.section-subtitle { font-size: 20px; font-weight: 600; text-align: center; margin-bottom: 10px; color: #DCB37B; letter-spacing: 1px; }
.section-title { font-size: 60px; font-weight: 800; text-align: center; margin-bottom: 60px; color: #111; line-height: 1.2; letter-spacing: -2px; }
.section-desc { font-size: 30px; font-weight: 400; text-align: center; margin-bottom: 80px; line-height: 1.5; }
.section-highlight { font-size: 30px; font-weight: 700; text-align: center; margin-bottom: 30px; }
/* ==========================================================================
Header & Navigation
========================================================================== */
.header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: rgba(255,255,255,0.95); border-bottom: 1px solid var(--border-line); z-index: 1000; }
.header-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 40px; }
.logo { display: flex; align-items: center; justify-content: center; margin-top: 25px; margin-bottom: 32px; }
.logo-img { max-height: 35px; width: auto; object-fit: contain; } /* Adjust max-height based on your logo */
.nav { width: 100%; display: flex; justify-content: center; margin-bottom: 20px; }
.nav-menu { display: flex; justify-content: space-between; width: 100%; max-width: 1300px; }
.nav-menu li a { font-size: 19px; font-weight: 400; color: #000; white-space: nowrap; transition: color 0.2s; }
.nav-menu li a:hover { color: #555; }
.hamburger-btn { display: none; width: 40px; height: 30px; position: absolute; right: 40px; top: 50%; transform: translateY(-50%); z-index: 1001; }
.hamburger-btn span { position: absolute; width: 100%; height: 3px; background: #000; left: 0; transition: 0.3s; }
.hamburger-btn span:nth-child(1) { top: 0; }
.hamburger-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hamburger-btn span:nth-child(3) { bottom: 0; }
.hamburger-btn.active span:nth-child(1) {
top: 50% !important;
left: 0 !important;
transform: translateY(-50%) rotate(45deg) !important;
width: 100% !important;
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0 !important;
}
.hamburger-btn.active span:nth-child(3) {
top: 50% !important;
bottom: auto !important;
left: 0 !important;
transform: translateY(-50%) rotate(-45deg) !important;
width: 100% !important;
}
/* ==========================================================================
Tabs
========================================================================== */
.tab-container { margin-top: 60px; }
.tab-buttons { display: flex; justify-content: center; gap: 20px; margin-bottom: 80px; }
.tab-btn { padding: 25px 50px; font-size: 30px; font-weight: 700; color: #888; border: 2px solid #ccc; border-radius: 23px; transition: 0.3s; }
.tab-btn.active { background: #000; color: #fff; border-color: #000; }
.tab-buttons.text-style { display: flex; width: 100%; max-width: 1000px; margin: 0 auto 20px; gap: 0; border-bottom: 2px solid #ddd; position: relative; }
.tab-buttons.text-style .tab-btn { flex: 1; text-align: center; background: transparent; border: none; padding: 20px 0; color: #555; font-weight: 500; font-size: 24px; border-radius: 0; position: relative; transition: all 0.2s; }
.tab-buttons.text-style .tab-btn.active { color: #122b5e; font-weight: 700; background: transparent; border: none; }
.tab-buttons.text-style .active-indicator { position: absolute; bottom: -2px; left: 0; height: 4px; background: #122b5e; transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2; pointer-events: none; }
.tab-pane { display: none; }
.tab-pane.active { display: block; animation: fadeIn 0.4s; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ==========================================================================
Placeholders & Cards
========================================================================== */
.placeholder-box { width: 100%; min-height: 500px; background: var(--card-bg); border: 2px dashed #ccc; border-radius: 23px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #888; margin: 0 auto; max-width: 1600px; }
.hero-placeholder { height: 80vh; border: none; background: #e0f2fe; color: #0284c7; }
.card-placeholder { background: var(--card-bg); padding: 100px; border-radius: 23px; text-align: center; font-size: 40px; font-weight: 700; max-width: 1600px; margin: 0 auto; border: 1px solid var(--border-line); }
/* ==========================================================================
Footer
========================================================================== */
.footer { padding: 100px 0; border-top: 1px solid var(--border-line); }
.footer-links { display: flex; justify-content: center; gap: 50px; }
.footer-links a { font-size: 25px; font-weight: 400; }
/* ==========================================================================
Responsive (Mobile specific requests)
========================================================================== */
@media screen and (max-width: 1024px) {
/* Hamburger toggle */
.nav-menu { display: none; flex-direction: column; position: absolute; top: var(--header-height); left: 0; width: 100%; background: #fff; padding: 20px 40px; border-bottom: 1px solid var(--border-line); }
.nav-menu.active { display: flex; }
.nav-menu li a { font-size: 24px; padding: 15px 0; display: block; }
.hamburger-btn { display: block; }
/* Scaling down massive typography safely */
.section-title { font-size: 50px; }
.section-subtitle, .section-desc, .section-highlight { font-size: 20px; }
.tab-btn { font-size: 18px; padding: 15px 30px; }
/* 2-line layout or horizontal scroll for tabs as requested */
.tab-buttons { flex-wrap: wrap; justify-content: flex-start; gap: 2px; }
.tab-btn { flex: 1 1 calc(50% - 10px); text-align: center; }
.placeholder-box { font-size: 20px; min-height: 300px; }
.card-placeholder { font-size: 24px; padding: 50px 20px; }
}
/* 추가된 섹션 디자인 (특별함, 의료진, 임플란트) */
/* 공통 클래스 보완 */
.mb-20 { margin-bottom: 20px !important; }
.mb-35 { margin-bottom: 35px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-45 { margin-bottom: 45px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-60 { margin-bottom: 60px !important; }
.mb-80 { margin-bottom: 80px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-60 { margin-top: 60px !important; }
.mt-80 { margin-top: 80px !important; }
.mt-100 { margin-top: 100px !important; }
/* 2. 자인치과 소개 */
.intro-section { padding-top: var(--header-height); margin-bottom: 30px; }
.intro-container { display: flex; align-items: stretch; max-width: 100%; margin: 0; min-height: 700px; width: 100%; }
.intro-left-img { flex: 1.2; background: url('../image/intro_left.jpg') no-repeat center/cover; }
.intro-right-content { flex: 1; padding: 100px 5%; display: flex; flex-direction: column; justify-content: center; background: #fff; }
.intro-subtitle { font-size: 20px; color: #dcb37b; font-weight: 600; letter-spacing: 1px; margin-bottom: 10px; }
.intro-title { font-size: 60px; font-weight: 800; color: #111; line-height: 1.2; margin-bottom: 50px; margin-top: 0; letter-spacing: -2px; }
.intro-title .gold-text { color: #dcb37b; }
.intro-desc-1 { font-size: 20px; color: #555; line-height: 1.7; margin-bottom: 20px; }
.intro-desc-2 { font-size: 20px; color: #555; line-height: 1.7; margin-bottom: 25px; }
.intro-desc-3 { font-size: 20px; color: #555; line-height: 1.7; }
.intro-desc-3 .gold-text { color: #dcb37b; font-weight: 700; }
/* 3. 자인치과 특별함 */
#special { padding-bottom: 80px; }
.special-top { background: #0b1732; color: #fff; padding: 60px 0 0 0; margin-top: 20px; margin-bottom: 110px; }
.special-top-flex { display: flex; align-items: center; justify-content: space-between; gap: 50px; margin-bottom: 0; max-width: 1000px; margin-left: auto; margin-right: auto; }
.special-top-flex.reverse { margin-bottom: -90px; margin-top: -40px; }
.special-top-flex.reverse .special-top-text { margin-top: -20px; }
.special-top-flex:first-child .special-top-text { margin-top: 35px; }
.special-top-flex:first-child .special-top-text h3 { font-size: 33px; }
.special-top-text { flex: 1; text-align: left; }
.special-top-text h3 { font-size: 28px; font-weight: 700; margin-bottom: 5px; line-height: 1.4; color:#fff; letter-spacing: -1px; }
.special-top-text h3 strong { font-weight: 800; color: #dcb37b; }
.special-top-text p { font-size: 20px; line-height: 1.7; margin-bottom: 20px; color: #d0d4df; }
.special-top-text p.highlight-gold { color: #dcb37b; font-weight: 600; }
.special-top-img { width: 450px; height: 450px; border-radius: 20px; flex-shrink: 0; }
.special-top-flex:nth-child(1) .special-top-img { background: url('../image/special_right1.png') no-repeat center/contain; }
.special-top-flex:nth-child(2) .special-top-img { background: url('../image/special_right2.png') no-repeat center/contain; }
.tscan-content { text-align: center; margin-top: 0px; }
.tab-hero-container { position: relative; max-width: 1000px; margin: 0 auto 80px; }
.tab-hero-bg { width: 100%; display: block; border-radius: 0; }
.tab-hero-device { position: absolute; z-index: 2; }
.device-rayface { bottom: -12%; left: calc(8% - 80px); width: 50%; }
.device-panorama { bottom: -10%; left: calc(-3% + 30px); width: 34%; }
.device-tscan { bottom: -18%; left: 0%; width: 42%; }
.tscan-badge { display: inline-block; background: #122b5e; color: #fff; padding: 5px 30px; border-radius: 30px; font-size: 20px; font-weight: 700; margin-bottom: 20px; }
.tscan-content h4 { font-size: 28px; font-weight: 700; color: #111; margin-bottom: 40px; }
.tscan-desc { font-size: 20px; line-height: 1.8; color: #444; margin-bottom: 50px; }
.tscan-boxes { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; margin: 0 auto 40px; }
.tscan-box { display: flex; background: #f8f9fa; border-radius: 10px; padding: 20px 30px; text-align: left; align-items: flex-start; }
.tscan-box h5 { font-size: 20px; font-weight: 700; color: #122b5e; width: 200px; flex-shrink: 0; position: relative; padding-left: 20px; margin: 8px 0 0 0; }
.tscan-box h5::before { content: ''; position: absolute; left: 0; top: 6px; width: 8px; height: 8px; border-radius: 50%; border: 3px solid #122b5e; }
.tscan-box ul { list-style: none; padding: 0; margin: 0; flex: 1; }
.tscan-box ul li { font-size: 20px; color: #333; line-height: 1.8; position: relative; padding-left: 12px; margin-bottom: 5px; }
.tscan-box ul li::before { content: '·'; position: absolute; left: 0; top: 0; font-weight: bold; color: #666; }
.tscan-footer { font-size: 22px; font-weight: 700; color: #111; margin-top: 40px; }
/* 4. 의료진 소개 */
#doctors { background: #fff; }
.doctors-list { display: flex; flex-direction: column; gap: 80px; margin-top: 50px; }
.doctor-card { display: flex; align-items: center; justify-content: space-between; max-width: 1000px; width: 100%; margin: 0 auto; gap: 40px; position: relative; padding: 60px 0; z-index: 1; }
.doctor-card::before { content: ''; position: absolute; left: 50%; top: calc(50% + 25px); transform: translate(-50%, -50%); width: 100vw; height: 410px; background: #f8f9fa; z-index: -1; }
.doctor-card.reverse { flex-direction: row-reverse; margin-top: -100px; }
.doc-img { width: 340px; height: 420px; background: #e9ecef; flex-shrink: 0; }
.doc-img img { width: 100%; height: 100%; object-fit: cover; }
.doc-info { flex: none; width: 620px; text-align: left; transform: translateY(25px); }
.doc-name { font-size: 20px; font-weight: 500; color: #333; margin-bottom: 15px; border-bottom: 2px solid #122b5e; padding-bottom: 10px; display: block; width: 100%; }
.doc-name strong { font-size: 40px; color: #122b5e; font-weight: 800; margin-right: 15px; letter-spacing: -1px; }
.doc-history { list-style: none; padding: 0; margin: 0; }
.doc-history li { font-size: 20px; color: #111; line-height: 1.6; position: relative; padding-left: 14px; margin-bottom: 4px; letter-spacing: -0.5px; }
.doc-history li::before { content: '·'; position: absolute; left: 0; top: 0; font-weight: bold; color: #111; }
/* 5. 임플란트 */
.implant-intro { text-align: center; margin-bottom: 50px; }
.implant-intro .implant-desc { font-size: 20px; line-height: 1.6; color: #333; margin-bottom: 20px; }
.implant-intro .implant-desc.highlight { color: #333333; }
.implant-intro .implant-desc.highlight strong,
#implant .implant-intro .implant-desc.highlight strong { color: #122b5e !important; font-weight: 700 !important; }
.implant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.ig-item { display: flex; background: #fff; border: 1px solid #eee; box-shadow: 0 4px 15px rgba(0,0,0,0.05); border-radius: 0; overflow: hidden; }
.ig-img { width: 200px; flex-shrink: 0; background: #f0f0f0; background-size: cover; background-position: center; }
.ig-text { padding: 30px; flex: 1; text-align: left; }
.ig-text h4 { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 15px; line-height: 1.4; margin-top:0; word-break: keep-all; }
.ig-text p { font-size: 18px; color: #555; line-height: 1.6; margin-bottom:0;}
.text-blue { color: #122b5e; }
.text-center { text-align: center !important; }
.tab-buttons.line-style { background: transparent; padding: 0; display: flex; border-bottom: 2px solid #ddd; border-radius: 0; max-width: 800px; margin: 0 auto 40px; }
.tab-buttons.line-style .tab-btn { flex: 1; background: transparent; color: #555; border-radius: 0; padding: 15px 0; font-size: 18px; font-weight: 600; position: relative; }
.tab-buttons.line-style .tab-btn.active { background: transparent; color: #122b5e; }
.tab-buttons.line-style .tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 3px; background: #122b5e; }
.implant-tab-hero { width: 100%; max-width: 1000px; height: 548px; background: #eee; margin: 0 auto 50px; border-radius: 0; }
.implant-tab-title { font-size: 26px; font-weight: 700; color: #111; text-align: center; margin-bottom: 20px; }
.implant-tab-desc { font-size: 20px; line-height: 1.6; color: #444; text-align: center; margin-bottom: 30px; }
.sinus-info-box { background: #f9f9f9; border-radius: 15px; padding: 25px 40px; max-width: 1000px; margin: 0 auto; display: flex; align-items: flex-start; gap: 20px; text-align: left; }
.sinus-badge { background: #122b5e; color: #fff; font-size: 20px; font-weight: 700; padding: 8px 20px; border-radius: 8px; white-space: nowrap; flex-shrink: 0; line-height: 1.4; }
.sinus-desc { font-size: 20px; color: #111; line-height: 1.6; padding-top: 5px; }
.implant-target-box { background: #f9f9f9; border-radius: 15px; padding: 40px; max-width: 1000px; margin: 0 auto; text-align: left; }
.implant-target-box ul { list-style: none; padding: 0; margin: 0; }
.implant-target-box ul li { display: flex; align-items: center; font-size: 20px; color: #111; margin-bottom: 15px; }
.implant-target-box ul li:last-child { margin-bottom: 0; }
.implant-target-box ul li .num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #122b5e; color: #fff; font-size: 14px; font-weight: bold; border-radius: 0; margin-right: 15px; }
.implant-pros { max-width: 1000px; margin: 0 auto; list-style: none; padding: 0 40px; text-align: left; }
.implant-pros li { display: flex; margin-bottom: 10px; align-items: flex-start; }
.implant-pros li .pro-title { width: 300px; flex-shrink: 0; font-size: 20px; font-weight: 700; color: #111; display: flex; align-items: center; }
.implant-pros li .pro-title .num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #122b5e; color: #fff; font-size: 14px; font-weight: bold; border-radius: 0; margin-right: 15px; }
.implant-pros li .pro-desc { flex: 1; font-size: 20px; color: #444; line-height: 1.6; padding-top: 2px; }
.implant-process-section { background: #f9f9f9; padding: 80px 0; width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1000px; margin: 40px auto 0; }
.process-item { text-align: center; }
.process-item .process-img { width: 100%; height: 300px; background: #ddd; margin-bottom: 0; }
.process-item .process-step { background: #122b5e; color: #fff; padding: 12px 0; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.process-item .process-step.bg-gold { background: #dcb37b; }
.process-item p { font-size: 18px; color: #444; line-height: 1.6; word-break: keep-all; letter-spacing: -0.5px; }
/* 6. 심미치료 */
.aesthetic-intro { text-align: center; margin-bottom: 50px; }
.aesthetic-intro p { font-size: 20px; line-height: 1.7; color: #444; }
.aesthetic-intro .mb-10 { margin-bottom: 10px; }
.aesthetic-intro .highlight,
#aesthetic .aesthetic-intro .highlight { color: #555555 !important; font-size: 20px; }
.aesthetic-intro .highlight strong,
#aesthetic .aesthetic-intro .highlight strong { color: #122b5e !important; font-weight: 700 !important; }
.aesthetic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.ae-card { background: #fff; border: 1px solid #eee; text-align: center; overflow: hidden; border-radius: 0; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.ae-img { width: 100%; height: 250px; background: #eee; }
.ae-text { padding: 30px; }
.ae-text h4 { font-size: 20px; font-weight: 700; color: #122b5e; margin-bottom: 10px; margin-top:0;}
.ae-text p { font-size: 18px; color: #555; line-height: 1.6; margin:0; word-break: keep-all; letter-spacing: -0.5px;}
.ae-tab-hero { display: flex; gap: 2px; width: 100%; max-width: 1000px; height: 498px; margin: 0 auto 50px; }
.ae-half-img { flex: 1; height: 100%; background: #ddd; }
.ae-info-section { text-align: center; margin-bottom: 40px; }
.ae-info-section h4 { font-size: 26px; font-weight: 700; color: #111; margin-bottom: 20px; }
.ae-info-section p { font-size: 20px; line-height: 1.6; color: #444; }
.ae-cause-list { display: flex; flex-direction: column; gap: 2px; max-width: 1000px; margin: 0 auto; padding-left: 30px; }
.ae-cause-item { display: flex; align-items: flex-start; background: transparent; padding: 5px 0; border-radius: 0; border-bottom: none; text-align: left; }
.ae-cause-item:last-child { border-bottom: none; }
.ae-cause-item.no-bg { background: transparent; padding: 5px 0; border-bottom: none; border-radius: 0; }
.ae-cause-item.no-bg:last-child { border-bottom: none; }
.num-badge { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #122b5e; color: #fff; font-size: 14px; font-weight: bold; border-radius: 0; margin-right: 15px; flex-shrink: 0; margin-top: 4px; }
.cause-title { width: 260px; font-size: 20px; font-weight: 700; color: #111; flex-shrink: 0; line-height: 1.6; }
.cause-title.badge-title { width: 280px; display:flex; align-items:flex-start; }
.cause-desc { flex: 1; font-size: 20px; color: #222; line-height: 1.6; }
.flex-1 { flex: 1; }
.ae-pros-list { display: flex; flex-direction: column; gap: 15px; max-width: 1000px; margin: 10px auto 0; text-align: left; }
.ae-pros-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; max-width: 1000px; margin: 40px auto 0; text-align: left; }
.ae-pro-item { display: flex; align-items: center; background: #f9f9f9; padding: 20px 30px; border-radius: 10px; font-size: 20px; font-weight: 400; color: #111; }
/* PC ONLY: Shift .ae-pro-item description text downward relative to badge by 3px (0px Mobile Drift) */
@media screen and (min-width: 769px) {
.ae-pro-item .num-badge,
#aesthetic .ae-pro-item .num-badge {
transform: translateY(-3px) !important;
}
/* PC ONLY: Shift #ae-2 badges 1 and 4 UP by 3px further to 0px (0px Mobile Drift) */
#aesthetic #ae-2 .ae-pros-list .ae-pro-item:nth-child(1) .num-badge,
#aesthetic #ae-2 .ae-pros-list .ae-pro-item:nth-child(4) .num-badge,
#ae-2 .ae-pros-list .ae-pro-item:nth-child(1) .num-badge,
#ae-2 .ae-pros-list .ae-pro-item:nth-child(4) .num-badge {
transform: translateY(0px) !important;
margin-top: 0px !important;
}
/* PC ONLY: Shift #ae-3 badges 2, 3, and 4 DOWN by 10px (0px Mobile Drift) */
#aesthetic #ae-3 .ae-pros-list .ae-pro-item:nth-child(2) .num-badge,
#aesthetic #ae-3 .ae-pros-list .ae-pro-item:nth-child(3) .num-badge,
#aesthetic #ae-3 .ae-pros-list .ae-pro-item:nth-child(4) .num-badge,
#ae-3 .ae-pros-list .ae-pro-item:nth-child(2) .num-badge,
#ae-3 .ae-pros-list .ae-pro-item:nth-child(3) .num-badge,
#ae-3 .ae-pros-list .ae-pro-item:nth-child(4) .num-badge {
transform: translateY(10px) !important;
margin-top: 10px !important;
}
}
/* 7. 투명교정 */
.bg-light { background-color: #f9f9f9 !important; }
.ca-intro { text-align: center; margin-bottom: 40px; }
.ca-intro .highlight-blue { color: #122b5e; font-size: 20px; font-weight: 700; margin-bottom: 0; }
.ca-intro p { font-size: 20px; line-height: 1.6; color: #444; }
.ca-hero-img { width: 100%; max-width: 1000px; height: 548px; background: #ddd; margin: 0 auto; border-radius: 0; }
.ca-info-section { text-align: center; max-width: 1000px; margin-left: auto; margin-right: auto; }
.ca-info-section h4 { font-size: 26px; font-weight: 700; color: #111; margin-bottom: 20px; }
.ca-info-section p { font-size: 20px; line-height: 1.7; color: #444; }
.ca-features-box { background: #f9f9f9; border-radius: 15px; padding: 40px; text-align: left; }
.ca-features-box ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.ca-features-box ul li { display: flex; align-items: flex-start; }
.feat-title { width: 200px; font-size: 20px; font-weight: 700; color: #111; display: flex; align-items: center; flex-shrink: 0;}
.feat-desc { flex: 1; font-size: 20px; color: #444; padding-top: 1px; padding-left: 10px; }
.ca-note { font-size: 13px !important; color: #888 !important; text-align: center; margin-top: 20px !important; }
.ca-recommend-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 30px; }
.ca-rec-item { text-align: center; }
.ca-rec-img { width: 100%; height: 160px; background: transparent; margin-bottom: 0; }
.ca-rec-title { padding: 12px 0; color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 15px; }
.ca-rec-title.bg-blue { background: #122b5e; }
.ca-rec-title.bg-gold { background: #dcb37b; }
.ca-rec-item p { font-size: 18px; color: #444; line-height: 1.5; }
.ca-process-bg { background: #f9f9f9; padding: 80px 0; }
.ca-process-list { display: flex; flex-direction: column; gap: 20px; max-width: 1000px; margin: 0 auto; }
.ca-proc-item { display: flex; align-items: stretch; background: #fff; padding: 0; border-radius: 0; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.02); }
.ca-proc-img { width: 160px; background: #eee; position: relative; flex-shrink: 0; }
.proc-num { position: absolute; top: 0; left: 0; width: 30px; height: 30px; font-size: 17px; background: #122b5e; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.proc-num.bg-gold { background: #dcb37b; }
.ca-proc-text { padding: 30px 50px 30px 40px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.ca-proc-text h5 { font-size: 20px; font-weight: 700; color: #111; margin-bottom: 10px; margin-top:0; }
.ca-proc-text p { font-size: 18px; color: #555; line-height: 1.5; margin:0;}
/* 8. 치아보존/잇몸보존 */
.con-hero-img { width: 100%; max-width: 1000px; height: 548px; background: #ddd; margin: 0 auto 50px; border-radius: 0; }
.con-info-section { text-align: center; max-width: 1000px; margin-left: auto; margin-right: auto; }
.con-info-section h4 { font-size: 26px; font-weight: 700; color: #111; margin-bottom: 20px; }
.con-info-section p { font-size: 20px; line-height: 1.6; color: #444; }
.py-80 { padding-top: 80px; padding-bottom: 80px; }
.pb-80 { padding-bottom: 80px; }
.con-method-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; }
.con-method-item { text-align: center; }
.con-method-item .method-img { width: 100%; height: 300px; background: #ddd; margin-bottom: 0; }
.con-method-item.prev-item .method-img { height: 280px; }
.method-title { padding: 15px 0; color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 20px; }
.method-title.bg-blue { background: #122b5e; }
.method-title.bg-gold { background: #dcb37b; }
.con-method-item p { font-size: 18px; color: #444; line-height: 1.6; word-break: keep-all; }
#con-1 .con-method-item p { font-size: 18px; }
#con-1 .con-method-item .method-img { height: 300px; }
#con-1 .con-method-item.prev-item .method-img { height: 280px; }
.con-jain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1000px; margin: 0 auto; }
.jain-card { background: #fff; border: 1px solid #eaeaea; text-align: center; border-radius: 0; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.03); }
.jain-card .jc-img { width: 100%; height: 270px; background: #eee; }
.jain-card .jc-text { padding: 30px; }
.jain-card .jc-text h5 { font-size: 20px; font-weight: 700; color: #122b5e; margin-bottom: 15px; margin-top:0;}
.jain-card .jc-text p { font-size: 18px; color: #555; line-height: 1.6; margin:0;}
/* 9. 턱관절 진료 */
.tmj-hero { background: url('../image/jain_section8_hero.png') no-repeat center/cover; min-height: 500px; padding: 50px 0; display: flex; align-items: center; justify-content: flex-start; position: relative; }
.tmj-hero::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: transparent; }
.tmj-hero-content { position: relative; z-index: 1; max-width: 500px; text-align: left; margin-left: -500px; }
.tmj-badge { background: #122b5e; color: #fff; padding: 10px 22px; display: inline-block; font-size: 18px; margin-bottom: 5px; }
.tmj-hero-content h2 { font-size: 46px; font-weight: 700; color: #122b5e; margin-top: 0; margin-bottom: 20px; }
.tmj-hero-content p { font-size: 20px; color: #333; line-height: 1.6; margin-bottom: 10px; }
.tmj-hero-list { list-style: none; padding: 0; display: grid; grid-template-columns: 160px 1fr; gap: 10px 25px; }
.tmj-hero-list li { display: flex; align-items: center; font-size: 21px; font-weight: 400; color: #111; background: none; padding: 5px 0; }
.chk-icon { width: 37px; height: 37px; background: #122b5e; border-radius: 50%; margin-right: 12px; display: inline-block; position: relative; flex-shrink: 0; }
/* PC ONLY: Hide 1st br tag (.tmj-br-pc-hide) in .tmj-hero-content p to render 2 lines on PC while preserving 3 lines on mobile (0px Mobile Drift) */
@media screen and (min-width: 769px) {
.tmj-hero-content p br.tmj-br-pc-hide,
#tmj .tmj-hero-content p br.tmj-br-pc-hide {
display: none !important;
}
}
.tmj-info-section { max-width: 1000px; margin-left: auto; margin-right: auto; }
.tmj-info-section h4 { font-size: 26px; font-weight: 700; color: #111; margin-bottom: 20px; }
.tmj-info-section p { font-size: 20px; line-height: 1.6; color: #444; }
.tmj-info-section p strong { color: #122b5e; font-weight: 700; }
.tmj-cause-icons { display: flex; justify-content: center; gap: 15px; max-width: 1050px; margin-left: auto; margin-right: auto; }
.tc-icon-item { text-align: center; width: 182px; }
.tc-img { width: 182px; height: 182px; background: #f5f5f5; border-radius: 12px; margin: 0 auto 2px; }
.tc-title { background: #122b5e; color: #fff; padding: 10px 0; border-radius: 30px; font-size: 17px; }
.tmj-symp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; max-width: 1000px; margin: 0 auto; }
.symp-item { background: #f9f9f9; padding: 15px 25px; border-radius: 10px; display: flex; align-items: center; font-size: 20px; color: #111; text-align: left; }
.tmj-diag-grid { display: flex; justify-content: center; gap: 20px; }
.diag-item { text-align: center; width: 320px; }
.diag-img { width: 100%; height: 210px; background: #eee; margin-bottom: 0; }
.diag-title { background: #122b5e; color: #fff; padding: 10px 0; font-size: 20px; }
.tmj-inj-list { display: flex; flex-direction: column; gap: 40px; max-width: 1000px; margin: 0 auto; text-align: left; }
.tmj-inj-item { display: flex; align-items: center; gap: 30px; background: transparent; padding: 0; border: none; }
.tmj-inj-icon { position: relative; width: 120px; height: 120px; border-radius: 50%; background: #f5f5f5; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.inj-overlay-img { position: absolute; top: 50%; left: calc(50% + 10px); transform: translate(-50%, -50%); width: 100%; max-width: none; z-index: 2; pointer-events: none; }
.tmj-inj-text { flex: 1; }
.tmj-inj-item .inj-title { font-size: 22px; font-weight: 700; color: #122b5e; margin-bottom: 10px; display: inline-block; border-bottom: 2px solid #122b5e; padding-bottom: 5px; }
.tmj-inj-item .inj-desc { font-size: 18px; color: #444; line-height: 1.6; word-break: keep-all; letter-spacing: -0.5px; }
.tmj-tab-hero {
border-radius: 0 !important;
height: 548px;
overflow: hidden;
}
.tmj-tab-hero img {
border-radius: 0 !important;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center bottom;
}
.tmj-tab-badge {
display: inline-block;
background: #122b5e;
color: #fff;
font-size: 20px;
font-weight: 700;
padding: 10px 30px;
border-radius: 50px;
margin-top: 15px;
margin-bottom: 8px;
}
.tmj-injection-grid { display: flex; flex-direction: column; gap: 40px; max-width: 900px; margin: 0 auto; text-align: left; }
.tmj-injection-grid .injection-item { display: flex; align-items: center; gap: 40px; }
.tmj-injection-grid .injection-img-wrap { position: relative; width: 120px; height: 120px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.tmj-injection-grid .injection-circle { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: #f4f6f8; z-index: 1; }
.tmj-injection-grid .injection-img-wrap img { position: relative; z-index: 2; width: 80%; }
.tmj-injection-grid .injection-content { flex: 1; }
.tmj-injection-grid .injection-title { font-size: 22px; font-weight: 700; color: #122b5e; margin-bottom: 15px; display: inline-block; border-bottom: 2px solid #122b5e; padding-bottom: 8px; }
.tmj-injection-grid .injection-divider { display: none; }
.tmj-injection-grid .injection-desc { font-size: 18px; color: #444; line-height: 1.6; word-break: keep-all; }
/* 불편함 리스트 */
.discomfort-container { position: relative; background: #f9f9f9; border-radius: 10px; padding: 40px 40px 30px; max-width: 1000px; margin: 40px auto 0; text-align: left; }
.discomfort-title-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: #122b5e; color: #fff; font-size: 18px; font-weight: 700; padding: 6px 24px; border-radius: 30px; }
.discomfort-list { display: flex; flex-direction: column; gap: 12px; }
.discomfort-item { display: flex; align-items: center; gap: 15px; }
.discomfort-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: #122b5e; color: #fff; font-size: 14px; font-weight: bold; border-radius: 0; flex-shrink: 0; }
.discomfort-text { font-size: 20px; color: #111; }
/* Location Phone Slash & BR Controls (PC: Hide Slash, Show BR) */
.phone-slash { display: none; }
.phone-br { display: block; }
/* Mobile Only Master Treatment Section Control (PC: 0px Drift - Hidden) */
.mobile-only-section { display: none !important; }
/* 지르코니아 장점 리스트 */
.zirconia-adv-list { display: flex; flex-direction: column; gap: 15px; margin: 0 auto; max-width: 900px; }
.zirconia-adv-item { background: #fff; border-radius: 10px; padding: 20px 30px; display: flex; align-items: center; gap: 15px; text-align: left; }
.zirconia-adv-text { font-size: 20px; color: #111; }
.zirconia-adv-text strong { font-weight: 700; color: #111; }
/* Before/After Section */
.ba-images { display: flex; max-width: 1000px; margin: 0 auto; gap: 2px; justify-content: center; }
.ba-box { flex: 1; display: flex; flex-direction: column; }
.ba-img { background-color: #ddd !important; aspect-ratio: 4 / 3; width: 100%; }
.ba-label { padding: 8px 0; text-align: center; font-size: 18px; font-weight: 500; }
.lbl-before { background-color: #dcb37b; color: #111; }
.lbl-after { background-color: #122b5e; color: #fff; }
/* FAQ Accordion */
.faq-list { max-width: 1000px; margin: 0 auto; border-top: 2px solid #111; border-bottom: 2px solid #111; }
.faq-item { border-bottom: 1px solid #ddd; }
.faq-item:last-child { border-bottom: none; }
.faq-question { padding: 20px; display: flex; align-items: center; cursor: pointer; font-size: 18px; font-weight: 500; color: #111; background: #fff; transition: background 0.2s; }
.faq-question:hover { background: #fafafa; }
.faq-q-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #122b5e; color: #fff; font-weight: bold; margin-right: 15px; flex-shrink: 0; font-size: 16px; }
.faq-toggle-icon { display: none; }
.faq-answer { display: none; padding: 25px 20px 25px 20px; background: #f4f4f4; border-top: 1px solid #eee; align-items: flex-start; }
.faq-item.active .faq-answer { display: flex; }
.faq-a-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #dcb37b; color: #fff; font-weight: bold; margin-right: 15px; flex-shrink: 0; font-size: 16px; }
.faq-a-text { font-size: 17px; line-height: 1.6; color: #333; padding-top: 2px; }
/* Floating Banner */
.floating-banner {
display: none; /* Temporarily hidden */
position: fixed;
right: 200px;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
transition: transform 0.3s ease;
}
.floating-banner:hover {
transform: translateY(calc(-50% - 5px));
}
.floating-banner img {
width: 100%;
max-width: 115px;
height: auto;
/* Removed border-radius and box-shadow */
}
@media (max-width: 768px) {
.floating-banner {
display: none;
}
}
/* Custom HTML Floating Banner */
.custom-floating-banner {
position: fixed;
right: 100px;
top: 50%;
transform: translateY(-50%);
width: 105px;
background: transparent;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
z-index: 9999;
overflow: hidden;
}
.floating-menu {
list-style: none;
padding: 0;
margin: 0;
background: #fff;
}
.floating-menu li {
border-bottom: 1px solid #eee;
}
.floating-menu li:last-child {
border-bottom: none;
}
.floating-menu a {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 5px;
text-decoration: none;
color: #333;
transition: background 0.2s;
}
.floating-menu a:hover {
background: #f9f9f9;
}
.floating-icon {
width: 40px;
height: 40px;
object-fit: contain;
margin-bottom: 5px;
}
.floating-menu span {
font-size: 13px;
font-weight: 500;
text-align: center;
word-break: keep-all;
line-height: 1.2;
}
.floating-top {
display: block;
margin: 0 -1px -1px -1px;
background: #1c2b59;
color: #fff;
text-align: center;
padding: 15px 0;
font-size: 14px;
font-weight: 700;
text-decoration: none;
border-radius: 0 0 15px 15px;
}
.floating-top:hover {
background: #111b3d;
color: #fff;
}
@media (max-width: 768px) {
.custom-floating-banner {
display: none; /* Hide on mobile */
}
}
.intro-right-content p.intro-desc-1,
.intro-right-content p.intro-desc-2,
.intro-right-content p.intro-desc-3 {
text-align: left;
word-break: keep-all;
padding-right: 160px; /* 플로팅 배너 가림 방지 */
line-height: 1.8;
}
@media (max-width: 768px) {
.intro-right-content p.intro-desc-1,
.intro-right-content p.intro-desc-2,
.intro-right-content p.intro-desc-3 {
padding-right: 0;
}
}
/* ==========================================================================
MOBILE RESPONSIVE OVERHAUL & ISOLATION STYLES (PC UNTOUCHED)
========================================================================== */
/* 1. PC Hide Rules (Guarantees 0% Impact on Desktop > 1024px) */
@media screen and (min-width: 1025px) {
.hamburger-btn {
display: none !important;
}
.mobile-bottom-bar {
display: none !important;
}
}
/* 2. Mobile Bottom Quick Bar Styles */
.mobile-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: #ffffff;
z-index: 10000;
display: flex;
align-items: center;
justify-content: space-around;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
border-top: 1px solid #e5e5e5;
padding: 5px 0;
box-sizing: border-box;
}
.mobile-bottom-bar .m-bar-btn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #333333;
font-size: 11px;
font-weight: 600;
}
.mobile-bottom-bar .m-bar-btn img {
width: 22px;
height: 22px;
object-fit: contain;
margin-bottom: 2px;
}
.mobile-bottom-bar .m-bar-btn.m-top-btn {
color: #122b5e;
}
.mobile-bottom-bar .m-bar-btn.m-top-btn .top-arrow {
font-size: 14px;
line-height: 22px;
font-weight: bold;
}
/* 3. Hamburger Button Styles */
.hamburger-btn {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 28px;
height: 20px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1002;
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
.hamburger-btn span {
display: block;
width: 100%;
height: 3px;
background-color: #122b5e;
border-radius: 2px;
transition: all 0.3s ease;
}
.hamburger-btn.active span:nth-child(1) {
top: 50% !important;
left: 0 !important;
transform: translateY(-50%) rotate(45deg) !important;
width: 100% !important;
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0 !important;
}
.hamburger-btn.active span:nth-child(3) {
top: 50% !important;
bottom: auto !important;
left: 0 !important;
transform: translateY(-50%) rotate(-45deg) !important;
width: 100% !important;
}
/* 4. Responsive Overrides for Tablet (max-width: 1024px) */
@media screen and (max-width: 1024px) {
:root {
--header-height: 80px;
}
.header {
height: 80px !important;
}
.header-inner {
height: 80px !important;
padding: 0 20px !important;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-img, .logo img, .header-logo img {
width: 180px !important;
height: auto !important;
}
.nav-menu {
display: none;
flex-direction: column;
position: fixed;
top: 80px;
left: 0;
width: 100%;
height: calc(100vh - 80px);
background: #ffffff;
padding: 30px 20px;
box-sizing: border-box;
overflow-y: auto;
z-index: 1001;
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.nav-menu.active {
display: flex !important;
}
.nav-menu ul {
flex-direction: column;
gap: 20px;
width: 100%;
}
.nav-menu li a {
font-size: 18px !important;
display: block;
padding: 10px 0;
border-bottom: 1px solid #f0f0f0;
}
}
/* 5. Comprehensive Mobile Overrides (max-width: 768px) */
@media screen and (max-width: 768px) {
html, body {
overflow-x: hidden !important;
width: 100% !important;
position: relative !important;
}
body {
padding-bottom: 65px !important; /* Safety padding for bottom bar */
}
/* Remove 125 hard line breaks on mobile so text flows naturally */
br {
display: none !important;
}
/* Hide desktop floating right banner on mobile */
.custom-floating-banner, .floating-banner {
display: none !important;
}
/* Global Containment for Fixed Px Containers */
.container, .section, main, div, section {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Override Inline & Fixed Widths */
*[style*="width: 1000px"],
*[style*="width: 900px"],
*[style*="width: 800px"],
*[style*="width: 620px"],
*[style*="width: 450px"],
*[style*="width: 340px"],
*[style*="width: 330px"],
*[style*="width: 300px"],
*[style*="width: 220px"],
*[style*="max-width: 1000px"],
*[style*="max-width: 920px"],
*[style*="max-width: 900px"],
*[style*="max-width: 800px"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Override Inline & Fixed Heights */
*[style*="height: 548px"],
*[style*="height: 498px"],
*[style*="height: 420px"],
*[style*="height: 250px"],
*[style*="height: 270px"],
*[style*="min-height: 500px"] {
height: auto !important;
min-height: 0 !important;
}
/* Section 1: Intro */
.intro-container {
flex-direction: column !important;
padding: 40px 20px !important;
}
.intro-right-content {
padding: 0 !important;
width: 100% !important;
}
.intro-right-content p.intro-desc-1,
.intro-right-content p.intro-desc-2,
.intro-right-content p.intro-desc-3 {
padding-right: 0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
word-break: keep-all !important;
}
/* Section 2: 5D Special Analysis */
.special-top-flex {
flex-direction: column !important;
gap: 20px !important;
padding: 0 20px !important;
}
.special-top-img {
width: 100% !important;
max-width: 320px !important;
height: auto !important;
aspect-ratio: 1/1 !important;
margin: 0 auto !important;
}
.tab-hero-container, .implant-tab-hero, .ae-tab-hero, .ca-hero-img, .con-hero-img {
height: auto !important;
min-height: 220px !important;
aspect-ratio: 16/9 !important;
background-size: cover !important;
}
.tscan-boxes {
padding: 0 20px !important;
}
.tscan-box h5 {
width: 100% !important;
margin-bottom: 6px !important;
}
/* Section 3: Doctors */
.doctor-card {
flex-direction: column !important;
gap: 20px !important;
padding: 30px 20px !important;
}
.doctor-card::before {
width: 100% !important;
left: 0 !important;
transform: none !important;
border-radius: 15px !important;
}
.doctor-card.reverse {
margin-top: 0 !important;
flex-direction: column !important;
}
.doc-img {
width: 100% !important;
max-width: 300px !important;
height: auto !important;
aspect-ratio: 340/420 !important;
margin: 0 auto !important;
}
.doc-info {
width: 100% !important;
transform: none !important;
}
.doc-history li {
font-size: 15px !important;
line-height: 1.5 !important;
}
/* Section 4: Implant */
.implant-grid, .aesthetic-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 0 20px !important;
}
.pro-title {
width: 100% !important;
margin-bottom: 8px !important;
font-size: 18px !important;
}
.implant-pros li {
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
}
.process-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
padding: 0 20px !important;
}
.sinus-info-box, .implant-target-box {
padding: 20px !important;
flex-direction: column !important;
}
/* Section 6: Clear Aligner 7 Steps */
div[style*="display:flex"][style*="flex-direction:column"][style*="gap:15px"] {
padding: 0 20px !important;
}
div[style*="width:220px"] {
width: 100% !important;
min-height: auto !important;
}
/* Section 7: Conservation */
.con-method-grid {
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 0 20px !important;
}
/* Section 8: TMJ */
.tmj-hero {
padding: 40px 20px !important;
min-height: 300px !important;
}
div[style*="width:330px"] {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
font-size: 16px !important;
}
div[style*="gap:60px"] {
gap: 20px !important;
padding: 0 20px !important;
}
.tmj-symp-grid, .tmj-diag-grid {
grid-template-columns: 1fr !important;
gap: 15px !important;
}
/* Section 10: Clinic Tour */
#clinic-tour,
section#clinic-tour {
padding-top: 45px !important;
padding-bottom: 50px !important;
}
#clinic-tour .container {
padding-left: 10px !important;
padding-right: 10px !important;
}
.tour-slider {
margin-top: 20px !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
position: relative !important;
}
.tour-arrow.left {
left: 8px !important;
z-index: 5 !important;
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(2px) !important;
border-radius: 50% !important;
width: 38px !important;
height: 38px !important;
top: 50% !important;
transform: translateY(-50%) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
.tour-arrow.right {
right: 8px !important;
z-index: 5 !important;
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(2px) !important;
border-radius: 50% !important;
width: 38px !important;
height: 38px !important;
top: 50% !important;
transform: translateY(-50%) !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
}
.tour-arrow svg {
width: 14px !important;
height: 24px !important;
}
.tour-arrow svg path {
stroke: #222222 !important;
stroke-width: 2.2 !important;
}
.tour-thumbs {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
gap: 6px !important;
margin-top: 8px !important;
}
.tour-thumb {
flex: 1 !important;
width: auto !important;
height: auto !important;
aspect-ratio: 4/3 !important;
border-radius: 0 !important; /* Removed rounded corners -> sharp square */
overflow: hidden !important;
}
.tour-thumb img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
}
/* Section 11: Location (진료안내 · 오시는길) Option A (Info Top, Map Bottom) */
#location .container[style*="margin-bottom"] {
margin-bottom: 25px !important;
}
#location .location-wrapper,
.location-wrapper {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin: 0 auto !important;
}
#location .loc-info,
.loc-info {
order: 1 !important;
width: 100% !important;
min-width: 100% !important;
flex: none !important;
padding: 42px 18px 42px 18px !important;
margin-top: 0 !important;
box-sizing: border-box !important;
}
#location .loc-inner-wrap,
.loc-inner-wrap {
padding-top: 0 !important;
transform: translateY(-4px) !important;
}
/* Mobile Vertical 1-Column Stacked Layout for Section 11 Consult, Hours & Location (Centering & Gold Pill Button, 0px PC Drift) */
#location .loc-info,
.loc-info {
order: 1 !important;
width: 100% !important;
min-width: 100% !important;
flex: none !important;
padding: 35px 20px 45px 20px !important;
margin-top: 0 !important;
box-sizing: border-box !important;
background-color: #0b2559 !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
#location .loc-info > div,
.loc-info > div {
max-width: 330px !important;
margin: 0 auto !important;
width: 100% !important;
}
#location .loc-top-row,
.loc-top-row {
display: flex !important;
flex-direction: column !important;
gap: 28px !important;
align-items: flex-start !important;
margin-left: 0 !important;
width: 100% !important;
}
#location .loc-box-consult,
.loc-box-consult {
width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
}
#location .loc-box-hours,
.loc-box-hours {
width: 100% !important;
min-width: 100% !important;
margin-left: 0 !important;
transform: none !important;
}
#location .loc-box-consult h4,
#location .loc-box-hours h4,
#location .loc-header-wrap h4,
.loc-info h4 {
font-size: 18.5px !important;
font-weight: 700 !important;
color: #C69D5D !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
}
/* Gold Bullet Dot (●) Title Prefix */
#location .loc-box-consult h4::before,
#location .loc-box-hours h4::before,
#location .loc-header-wrap h4::before {
content: "●" !important;
font-size: 11px !important;
color: #C69D5D !important;
}
#location .loc-phone-numbers,
.loc-phone-numbers {
font-size: 27px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
color: #ffffff !important;
margin-bottom: 0 !important;
white-space: nowrap !important;
letter-spacing: 0.5px !important;
}
#location .loc-consult-note,
.loc-consult-note {
display: none !important;
}
#location .loc-box-hours ul,
.loc-box-hours ul {
font-size: 15px !important;
line-height: 2.1 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
#location .loc-box-hours ul li,
.loc-box-hours ul li {
white-space: nowrap !important;
display: flex !important;
justify-content: space-between !important;
width: 100% !important;
color: #ffffff !important;
}
#location .loc-box-hours ul li span[style*="width"],
.loc-box-hours ul li span[style*="width"] {
width: auto !important;
font-size: 15px !important;
color: #b0c2de !important;
white-space: nowrap !important;
}
#location .loc-bottom-row,
.loc-bottom-row {
margin-top: 28px !important;
padding-top: 0 !important;
border-top: none !important;
position: static !important;
width: 100% !important;
}
#location .loc-header-wrap,
.loc-header-wrap {
display: block !important;
margin-bottom: 12px !important;
}
#location .loc-address-text,
.loc-address-text {
font-size: 14.5px !important;
line-height: 1.65 !important;
word-break: keep-all !important;
margin-bottom: 14px !important;
margin-top: 0 !important;
color: #e0e6ed !important;
}
#location .loc-kakao-btn-wrap,
.loc-kakao-btn-wrap {
position: static !important;
margin-top: 14px !important;
margin-bottom: 16px !important;
display: block !important;
}
/* Original Gold Round Pill Kakao Map Button */
#location .loc-kakao-btn,
.loc-kakao-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #C69D5D !important;
color: #000000 !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 8px 20px !important;
border-radius: 20px !important;
text-decoration: none !important;
position: static !important;
margin: 0 !important;
width: auto !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.15) !important;
border: none !important;
}
#location .loc-parking-info,
.loc-parking-info {
font-size: 14.5px !important;
line-height: 1.5 !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-top: 14px !important;
color: #cccccc !important;
}
#location .loc-map,
.loc-map {
order: 2 !important;
width: 100% !important;
min-width: 100% !important;
flex: none !important;
height: 320px !important;
min-height: 320px !important;
position: relative !important;
}
.root_daum_roughmap .roughmap_maker_label {
top: -46px !important;
left: -14px !important;
transform: none !important;
height: auto !important;
overflow: visible !important;
}
.root_daum_roughmap .roughmap_maker_label:after,
.root_daum_roughmap .roughmap_maker_label:before,
.root_daum_roughmap [class*="label"]:after,
.root_daum_roughmap [class*="label"]:before {
display: none !important;
content: none !important;
background: none !important;
border: none !important;
}
.root_daum_roughmap .roughmap_maker_label a {
display: inline-block !important;
text-decoration: none !important;
width: 100% !important;
height: 100% !important;
}
.root_daum_roughmap .roughmap_lebel_text,
.root_daum_roughmap [class*="lebel"],
.root_daum_roughmap [class*="label"] {
display: inline-block !important;
height: auto !important;
line-height: 1.3 !important;
padding: 5px 12px !important;
text-align: center !important;
vertical-align: middle !important;
box-sizing: border-box !important;
}
/* Footer Mobile Adjustments */
.footer .footer-links {
justify-content: center !important;
}
.footer .footer-links a {
font-size: 15px !important;
}
.footer .footer-info,
.footer .footer-info p {
font-size: 13px !important;
line-height: 1.5 !important;
margin-bottom: 3px !important;
}
.footer .footer-info .copyright {
font-size: 12px !important;
margin-top: 10px !important;
}
/* Global Headings Scaling for Mobile */
h2 {
font-size: 26px !important;
line-height: 1.3 !important;
}
h3 {
font-size: 22px !important;
}
h4 {
font-size: 20px !important;
}
}
/* ==========================================================================
MOBILE VERTICAL TEXT & WORD BREAK COMPLETE OVERHAUL (PC UNTOUCHED)
========================================================================== */
@media screen and (max-width: 768px) {
/* Global Korean Word Break & Wrapping Rule for Mobile */
h1, h2, h3, h4, h5, h6, p, span, li, a, div, td, th {
word-break: keep-all !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Reset Overly Large Inline Paddings on Mobile Containers */
.ca-proc-text,
.sinus-info-box,
.implant-target-box,
.ae-card,
.card-placeholder,
*[style*="padding: 80px 60px"],
*[style*="padding:25px 30px"],
*[style*="padding: 25px 40px"],
*[style*="padding: 40px"] {
padding: 20px 15px !important;
box-sizing: border-box !important;
}
/* Reset Inline 20px/21px Font Sizes for Mobile List Items & Badges -> 15px Unified */
li[style*="font-size:20px"],
li[style*="font-size: 20px"],
div[style*="font-size:20px"],
div[style*="font-size:21px"],
p[style*="font-size:20px"] {
font-size: 15px !important;
line-height: 1.6 !important;
}
/* Flex List Items with Number Badges */
.ae-cause-item,
.con-cause-item,
li[style*="display:flex"][style*="align-items:flex-start"] {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
width: 100% !important;
padding-left: 0 !important;
box-sizing: border-box !important;
}
/* Prevent Badge Shrinking */
.num-badge, .num, .chk-icon, .proc-num {
flex-shrink: 0 !important;
}
/* Location Section Parking Info & Text Padding Reset */
.loc-info p, .loc-info div {
font-size: 12px !important;
line-height: 1.6 !important;
}
/* Section 8 TMJ Badge White Space Reset */
.tmj-badge, *[style*="white-space:nowrap"] {
white-space: normal !important;
}
}
/* ==========================================================================
100% PC DESIGN ELEMENT REPRODUCTION ON MOBILE (PC UNTOUCHED)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. BR Tag Space Restoration (Prevents Word Gluing) */
br {
display: inline !important;
content: " " !important;
}
/* 2. Section 2 (#special) Exact PC Design Reproduction */
#special {
padding-top: 0px !important;
padding-bottom: 40px !important;
margin-top: -35px !important;
background: #ffffff !important; /* Base section background is clean white like PC */
}
.special-top {
background: #0b1732 !important; /* Top 5D analysis part is dark navy like PC */
padding: 40px 20px !important;
color: #ffffff !important;
}
.special-top-text h3 {
color: #ffffff !important;
font-size: 24px !important;
margin-bottom: 15px !important;
}
.special-top-text p {
color: #e0e0e0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
margin-bottom: 15px !important;
}
.special-top-text p.highlight-gold {
color: #dcb37b !important;
}
/* Bottom Equipment Tabs Part on Mobile - Clean White background like PC */
.special-bottom, .tab-hero-container, .tscan-boxes {
background: #ffffff !important;
color: #333333 !important;
padding: 20px 10px !important;
}
.tab-buttons.text-style {
display: flex !important;
justify-content: center !important;
gap: 10px !important;
max-width: 100% !important;
margin: 20px auto !important;
border-bottom: 2px solid #eee !important;
}
.tab-buttons.text-style .tab-btn {
font-size: 15px !important;
padding: 10px 8px !important;
color: #666666 !important;
}
.tab-buttons.text-style .tab-btn.active {
color: #122b5e !important;
font-weight: 700 !important;
}
.tscan-box {
background: #f8f9fa !important;
border: 1px solid #e5e5e5 !important;
border-radius: 12px !important;
padding: 20px !important;
margin-bottom: 15px !important;
}
.tscan-box h5 {
color: #122b5e !important;
font-size: 17px !important;
font-weight: 700 !important;
}
.tscan-box ul li {
font-size: 15px !important;
color: #444444 !important;
line-height: 1.5 !important;
}
/* 3. GNB Dynamic Viewport Height */
.nav-menu {
top: 70px !important;
height: calc(100dvh - 70px) !important;
}
}
/* ==========================================================================
PERFECT MOBILE OVERHAUL (PC 100% UNTOUCHED & PRESERVED)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Word Gluing Prevention (Convert
to Standard Space) */
br {
display: inline !important;
content: " " !important;
}
.pc-br {
display: none !important;
}
.m-br {
display: block !important;
content: normal !important;
}
/* 2. Header & Logo Size (135px Balanced Size) */
.header {
height: 70px !important;
}
.header-inner {
height: 70px !important;
padding: 0 15px !important;
}
.logo-img, .logo img, .header-logo img {
width: 155px !important;
height: auto !important;
}
/* 2. Mobile Hamburger Touch Target (Refined Sleek Icon) & Navigation Layering */
.header, .header-inner, .header .nav {
overflow: visible !important;
}
.header .nav {
width: auto !important;
margin: 0 !important;
}
.hamburger-btn {
display: block !important;
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 40px !important;
height: 40px !important;
padding: 0 !important;
box-sizing: border-box !important;
background: transparent !important;
border: none !important;
cursor: pointer !important;
z-index: 10001 !important;
pointer-events: auto !important;
}
.hamburger-btn span {
position: absolute !important;
left: 8px !important;
width: 24px !important;
height: 2.2px !important;
background: #111111 !important;
border-radius: 2px !important;
transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease !important;
transform-origin: center !important;
pointer-events: none !important;
}
.hamburger-btn span:nth-child(1) { top: 10px !important; }
.hamburger-btn span:nth-child(2) { top: 19px !important; }
.hamburger-btn span:nth-child(3) { top: 28px !important; }
/* Refined Compact X Close Icon for Active Mobile Menu */
.hamburger-btn.active span:nth-child(1) {
top: 19px !important;
transform: rotate(45deg) !important;
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0 !important;
}
.hamburger-btn.active span:nth-child(3) {
top: 19px !important;
transform: rotate(-45deg) !important;
}
/* GNB Menu Drawer - Single Screen All 10 Items View (No Scroll Required) */
.nav-menu {
display: none !important;
position: fixed !important;
top: 70px !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: calc(100dvh - 70px) !important;
padding: 10px 20px 70px 20px !important;
box-sizing: border-box !important;
background: #ffffff !important;
overflow-y: auto !important;
z-index: 999999 !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.2) !important;
}
.nav-menu.active {
display: flex !important;
flex-direction: column !important;
visibility: visible !important;
opacity: 1 !important;
}
.nav-menu li a {
font-size: 16.5px !important;
font-weight: 600 !important;
padding: 8.5px 0 !important;
line-height: 1.2 !important;
color: #111111 !important;
display: block !important;
width: 100% !important;
}
.nav-menu li {
border-bottom: 1px solid #f2f2f2 !important;
}
/* 3. Section 1 Intro Desk Photo & Typography */
.intro-container {
padding: 30px 15px !important;
flex-direction: column !important;
}
.intro-left-img {
width: 100% !important;
height: 230px !important;
aspect-ratio: 16 / 9 !important;
background-position: center center !important;
background-size: cover !important;
margin-bottom: 25px !important;
border-radius: 12px !important;
flex: none !important;
}
.intro-title {
font-size: 25px !important;
line-height: 1.35 !important;
margin-bottom: 20px !important;
}
.intro-right-content p.intro-desc-1,
.intro-right-content p.intro-desc-2,
.intro-right-content p.intro-desc-3 {
font-size: 15px !important;
line-height: 1.6 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
}
/* 4. Section 2 (#special) 100% PC Design Reproduction */
#special {
padding-top: 30px !important;
padding-bottom: 30px !important;
background: #ffffff !important;
}
.special-top {
background: #0b1732 !important;
padding: 35px 20px !important;
color: #ffffff !important;
border-radius: 16px !important;
margin-bottom: 25px !important;
}
.special-top-text h3 {
color: #ffffff !important;
font-size: 23px !important;
margin-bottom: 15px !important;
}
.special-top-text p {
color: #e0e0e0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
margin-bottom: 15px !important;
}
.special-top-text p.highlight-gold {
color: #dcb37b !important;
}
.special-bottom, .tab-hero-container, .tscan-boxes {
background: #ffffff !important;
color: #333333 !important;
padding: 15px 0 !important;
}
.tscan-box {
background: #f8f9fa !important;
border: 1px solid #e5e5e5 !important;
border-radius: 12px !important;
padding: 18px !important;
margin-bottom: 15px !important;
}
.tscan-box h5 {
color: #122b5e !important;
font-size: 16px !important;
font-weight: 700 !important;
}
}
@media screen and (max-width: 768px) {
.logo-img, .logo img {
width: 155px !important;
max-height: 34px !important;
height: auto !important;
object-fit: contain !important;
}
.logo {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* ==========================================================================
MOBILE LOGO 10% ENLARGED (170px) & PERFECT VERTICAL CENTERING (PC UNTOUCHED)
========================================================================== */
@media screen and (max-width: 768px) {
.header {
height: 70px !important;
}
.header-inner {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
height: 70px !important;
padding: 0 20px !important;
box-sizing: border-box !important;
}
.logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
}
.logo a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 100% !important;
}
.logo-img, .logo img {
width: 170px !important;
max-height: 38px !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
margin: auto 0 !important;
transform: none !important;
}
}
/* ==========================================================================
STANDARDIZED MOBILE TYPOGRAPHY (16.5px BODY TEXT ACROSS ALL SECTIONS)
(PC WEB VERSION 100% UNTOUCHED & PRESERVED)
========================================================================== */
@media screen and (max-width: 768px) {
/* Global Mobile Body Paragraphs & List Items */
p, li, .intro-desc-1, .intro-desc-2, .intro-desc-3,
.special-top-text p, .tscan-box ul li,
.doctor-desc, .implant-desc, .feature-card p, .pro-card p,
.aesthetic-card p, .aligner-step p, .conservation-box p,
.tmj-card p, .tour-desc, .location-info p {
font-size: 16.5px !important;
line-height: 1.7 !important;
word-break: keep-all !important;
}
/* Fine Print / Credentials Sub-text */
.doctor-history li, .credentials li, .sub-text, .caption {
font-size: 14.5px !important;
line-height: 1.6 !important;
}
/* Section Subheadings & Card Titles */
h3, h4, h5, .card-title, .feature-title, .pro-title, .tscan-box h5 {
font-size: 19px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
/* Section Main Titles */
h2, .section-title, .intro-title {
font-size: 25px !important;
line-height: 1.35 !important;
}
}
/* ==========================================================================
MOBILE FONT-SIZE ONLY ADJUSTMENTS (COLORS & WEIGHTS 100% PRESERVED)
(PC WEB VERSION 100% UNTOUCHED & PRESERVED)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Main Titles -> 32px Only */
h2, .section-title, .intro-title, .special-top-text h3 {
font-size: 32px !important;
}
/* 2. Unified Subtitles, Card Headings & Tab Titles Across ALL Sections -> 21px (100% Uniform) */
h3, h4, h5, .card-title, .feature-title, .pro-title,
.tscan-box h5, .tscan-badge, .tscan-content h4,
.ig-text h4, .ae-text h4, .ae-info-section h4,
.implant-tab-title, .sinus-badge, .tmj-behavior-title {
font-size: 21px !important;
}
/* Reduce Gap Between English Subtitle & Main Title on Mobile */
.intro-subtitle, .section-subtitle {
font-size: 20px !important;
margin-bottom: 4px !important;
}
.intro-title, .section-title {
margin-top: 0 !important;
}
/* Center align & reduce line spacing for Intro Title & Subtitle on Mobile */
.intro-subtitle {
text-align: center !important;
margin-bottom: 2px !important;
}
.intro-title {
text-align: center !important;
line-height: 1.2 !important;
margin-bottom: 20px !important;
}
/* Tab Buttons Font Size -> 21px */
.tab-btn, .tab-buttons .tab-btn, .tab-buttons.text-style .tab-btn, .tab-buttons.line-style .tab-btn {
font-size: 21px !important;
}
/* 3. General Body Text & FAQ -> 15px Unified */
p, li, .intro-desc-1, .intro-desc-2, .intro-desc-3,
.special-top-text p, .tscan-box ul li, .tscan-desc,
.doctor-desc, .implant-desc, .feature-card p, .pro-card p,
.aesthetic-card p, .aligner-step p, .conservation-box p,
.tmj-card p, .tour-desc, .location-info p,
.con-info-section p, .tmj-info-section p, .ae-info-section p,
.faq-question, .faq-a-text {
font-size: 15px !important;
word-break: keep-all !important;
}
/* Section 1 Intro Description Paragraphs -> 15px */
.intro-right-content p,
.intro-right-content p.intro-desc-1,
.intro-right-content p.intro-desc-2,
.intro-right-content p.intro-desc-3 {
font-size: 15px !important;
}
}
/* ==========================================================================
MOBILE GNB MENU OVERHAUL: CLEAN X CLOSE ICON & 19.5px MENU FONT (PC PRESERVED)
========================================================================== */
@media screen and (max-width: 1024px) {
/* 1. Symmetrical Clean X Close Icon */
.hamburger-btn.active span:nth-child(1) {
top: 50% !important;
left: 0 !important;
transform: translateY(-50%) rotate(45deg) !important;
width: 100% !important;
}
.hamburger-btn.active span:nth-child(2) {
opacity: 0 !important;
}
.hamburger-btn.active span:nth-child(3) {
top: 50% !important;
bottom: auto !important;
left: 0 !important;
transform: translateY(-50%) rotate(-45deg) !important;
width: 100% !important;
}
/* 2. Mobile Menu Font Size 19.5px & Weight 600 & Touch Padding */
.nav-menu li a {
font-size: 19.5px !important;
font-weight: 600 !important;
padding: 16px 0 !important;
color: #111111 !important;
display: block !important;
letter-spacing: -0.5px !important;
}
.nav-menu li {
border-bottom: 1px solid #f2f2f2 !important;
}
}
/* ==========================================================================
SECTION 1 INTRO MOBILE LAYOUT ADJUSTMENTS (PC PRESERVED)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Intro Container & Desk Image: Remove top margin, remove border-radius, increase height to 267px */
.intro-container {
padding-top: 0 !important;
}
.intro-left-img {
width: 100% !important;
height: 267px !important; /* 230px + 37px */
aspect-ratio: auto !important;
border-radius: 0 !important;
margin-top: 0 !important;
margin-bottom: 25px !important;
background-position: center center !important;
background-size: cover !important;
}
/* 2. English Subtitle Top Margin +10px */
.intro-subtitle {
margin-top: 15px !important;
margin-bottom: 2px !important;
text-align: center !important;
}
/* 3. Main Title Bottom Margin +10px (20px -> 30px) */
.intro-title {
margin-bottom: 30px !important;
line-height: 1.2 !important;
text-align: center !important;
}
}
/* ==========================================================================
SECTION 2 (5D ANALYSIS): 1 SINGLE SEAMLESS DARK NAVY BOX WITHOUT RADIUS (PC PRESERVED)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Single Seamless Dark Navy Box with Zero Border-Radius & Wide Side Padding */
.special-top {
background: #0b1732 !important;
padding: 40px 15px !important;
color: #ffffff !important;
border-radius: 0 !important; /* Zero border-radius per user instruction */
margin-left: -15px !important;
margin-right: -15px !important;
width: calc(100% + 30px) !important;
box-sizing: border-border-box !important;
}
.special-top-flex {
flex-direction: column !important;
gap: 35px !important;
padding: 0 !important; /* Remove double padding so text spreads out cleanly */
}
.special-top-flex.reverse {
margin-top: 40px !important;
margin-bottom: 0 !important;
padding-top: 35px !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important; /* Subtle inner separator */
}
.special-top-text {
width: 100% !important;
}
.special-top-text p {
font-size: 15px !important;
line-height: 1.65 !important;
color: #e0e4ee !important;
word-break: keep-all !important;
}
/* 2. special_right2 Graphic Image Enlarged to 380px */
.special-top-img {
width: 100% !important;
max-width: 380px !important; /* Prominent size per user instruction */
height: auto !important;
aspect-ratio: 1/1 !important;
margin: 15px auto 0 auto !important;
background-size: contain !important;
}
}
/* ==========================================================================
SECTION 2 (5D ANALYSIS): 100% FULL-BLEED DARK NAVY BOX (0PX SIDE MARGINS)
========================================================================== */
@media screen and (max-width: 768px) {
#special {
padding-left: 0 !important;
padding-right: 0 !important;
overflow-x: hidden !important;
}
#special > .container {
padding-left: 15px !important;
padding-right: 15px !important;
}
/* 100% Edge-to-Edge Full Bleed Dark Navy Box with ZERO White Side Margins */
.special-top {
width: 100vw !important;
position: relative !important;
left: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: #0b1732 !important;
padding: 40px 20px !important;
color: #ffffff !important;
border-radius: 0 !important; /* Zero border-radius */
box-sizing: border-box !important;
}
.special-top .container {
padding: 0 !important;
max-width: 100% !important;
}
.special-top-flex {
flex-direction: column !important;
gap: 35px !important;
padding: 0 !important;
}
.special-top-flex.reverse {
margin-top: 40px !important;
margin-bottom: 0 !important;
padding-top: 35px !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.special-top-text {
width: 100% !important;
}
.special-top-text p {
font-size: 15px !important;
line-height: 1.65 !important;
color: #e0e4ee !important;
word-break: keep-all !important;
}
.special-top-img {
width: 100% !important;
max-width: 380px !important;
height: auto !important;
aspect-ratio: 1/1 !important;
margin: 15px auto 0 auto !important;
background-size: contain !important;
}
}
/* ==========================================================================
SECTION 2 (#special) 7 EXPLICIT LAYOUT DIRECTIVES (PC PRESERVED)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1 & 2. Section 2 Subtitle: Font Size 20px & Color #dcb37b (Matches Section 1 Intro), Gap Reduced */
#special .section-subtitle {
font-size: 20px !important;
color: #dcb37b !important;
margin-bottom: 4px !important;
}
#special .section-title {
margin-top: 0 !important;
margin-bottom: 25px !important;
}
/* 3. Hide forced
tags in navy box paragraphs so text flows naturally */
.special-top-text p br {
display: none !important;
}
.special-top-text p {
font-size: 15px !important;
line-height: 1.65 !important;
color: #e0e4ee !important;
word-break: keep-all !important;
}
/* 4. Move special_right1 UP by 60px */
.special-top-flex:nth-child(1) .special-top-img {
margin-top: -60px !important;
}
/* 5. Move separator line below special_right1 UP by 60px */
.special-top-flex.reverse {
margin-top: -20px !important;
padding-top: 20px !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
/* 6. Move special_right2 UP by 120px */
.special-top-flex:nth-child(2) .special-top-img {
margin-top: -120px !important;
}
/* 7. Reduce bottom navy box padding below special_right2 */
.special-top {
width: 100vw !important;
position: relative !important;
left: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: #0b1732 !important;
padding-top: 35px !important;
padding-bottom: 10px !important; /* Reduced bottom padding */
padding-left: 20px !important;
padding-right: 20px !important;
color: #ffffff !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
DEFINITIVE 18PX UNIFIED SPEC FOR ALL SECTION ENGLISH SUBTITLES (MOBILE ONLY)
========================================================================== */
@media screen and (max-width: 768px) {
.section-subtitle,
.intro-subtitle,
#special .section-subtitle,
section .section-subtitle,
p.section-subtitle,
p.intro-subtitle {
font-family: inherit !important;
font-size: 18px !important; /* Strictly set to 18px per user directive */
font-weight: 600 !important;
color: #dcb37b !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-align: center !important;
}
}
/* ==========================================================================
SECTION 2 DARK NAVY BOX CARD TITLES (5D 정밀분석, 보이는 치아만이 아니라): 23PX
========================================================================== */
@media screen and (max-width: 768px) {
.special-top-text h3,
.special-top-text h3 strong,
.special-top-text h3 span,
.special-top-flex h3,
.special-top h3 {
font-size: 23px !important; /* Strictly set to 23px per user directive */
line-height: 1.35 !important;
}
}
/* ==========================================================================
SECTION 2 DIRECTIVES: IMAGE 1 (-10% SIZE, -20PX LEFT) & BLOCK 2 (+40PX DOWN)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. First attached image (special_right1.jpg): 10% smaller, moved 20px left */
.special-top-flex:nth-child(1) .special-top-img {
max-width: 290px !important;
width: 90% !important;
transform: translateX(-20px) !important;
}
/* 2. Second attached block (.special-top-flex.reverse): moved 40px down */
.special-top-flex.reverse {
margin-top: 20px !important; /* Moved down by 40px (-20px -> +20px) */
padding-top: 25px !important;
}
}
/* ==========================================================================
DIRECTIVES: SPECIAL_RIGHT1 DOWN 10PX & SEPARATOR LINE UP 10PX
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Move special_right1.jpg DOWN by 10px (-60px -> -50px) */
.special-top-flex:nth-child(1) .special-top-img {
margin-top: -50px !important;
max-width: 290px !important;
width: 90% !important;
transform: translateX(-20px) !important;
}
/* 2. Move separator line below UP by 10px (+20px -> +10px) */
.special-top-flex.reverse {
margin-top: 25px !important; /* Shifted DOWN by 15px */
padding-top: 25px !important;
}
}
/* ==========================================================================
DIRECTIVE: MOVE SEPARATOR LINE UP BY 20PX (+10PX -> -10PX)
========================================================================== */
@media screen and (max-width: 768px) {
/* Move separator line UP by 20px */
.special-top-flex.reverse {
margin-top: -10px !important; /* Shifted UP 20px */
padding-top: 25px !important;
}
}
/* ==========================================================================
DIRECTIVE: MOVE CONTENT BELOW SEPARATOR LINE DOWN BY 30PX (PADDING-TOP 25PX -> 55PX)
========================================================================== */
@media screen and (max-width: 768px) {
/* Move ONLY text & image below separator line DOWN by 30px */
.special-top-flex.reverse {
padding-top: 55px !important; /* +30px padding-top pushes contents down while line stays fixed */
}
}
/* ==========================================================================
DIRECTIVE: REDUCE NAVY BOX BOTTOM VERTICAL HEIGHT BELOW SPECIAL_RIGHT2 BY 15PX
========================================================================== */
@media screen and (max-width: 768px) {
.special-top {
padding-bottom: 0px !important;
}
.special-top-flex.reverse .special-top-img {
margin-bottom: -15px !important;
}
}
/* ==========================================================================
SECTION 2 TAB EQUIPMENT IMAGES RESTORATION & TSCAN-BOX 1-COLUMN STACK (MOBILE)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Restore Tab Main Cover Images & Device Graphics */
.tscan-img {
height: 240px !important;
background-size: contain !important;
background-position: center center !important;
margin: 0 auto 30px !important;
border-radius: 8px !important;
position: relative !important;
overflow: hidden !important;
}
/* Center RAYFace main banner graphic on mobile matching 3D CT banner image size */
#special-1 .tscan-img {
background-position: center center !important;
background-size: contain !important;
}
.tscan-img img {
bottom: 0 !important;
left: 10px !important;
max-height: 85% !important;
max-width: 45% !important;
clip-path: none !important;
transform: none !important;
object-fit: contain !important;
position: absolute !important;
}
/* 2. Convert tscan-box from 2-column row to 1-column vertical stack (No text clipping) */
.tscan-boxes {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto 30px auto !important;
padding: 0 !important;
}
.tscan-box {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
width: 100% !important;
box-sizing: border-box !important;
background: #f8f9fa !important;
border: 1px solid #e5e5e5 !important;
border-radius: 12px !important;
padding: 20px 18px !important;
margin-bottom: 20px !important;
}
.tscan-box h5 {
width: 100% !important;
margin-top: 0 !important;
margin-bottom: 14px !important;
padding-left: 16px !important;
font-size: 18px !important;
font-weight: 700 !important;
color: #122b5e !important;
}
.tscan-box ul {
width: 100% !important;
flex: none !important;
padding: 0 !important;
margin: 0 !important;
}
.tscan-box ul li {
font-size: 15px !important;
line-height: 1.65 !important;
color: #333333 !important;
word-break: keep-all !important;
margin-bottom: 8px !important;
}
}
/* ==========================================================================
DIRECTIVE: SET ALL TAB BOX LIST ITEMS (.TSCAN-BOX UL LI) FONT SIZE TO 17PX
========================================================================== */
@media screen and (max-width: 768px) {
.tscan-box ul li,
.tscan-boxes ul li,
.tscan-box li,
.tab-pane .tscan-box ul li {
font-size: 15px !important;
line-height: 1.65 !important;
color: #333333 !important;
word-break: keep-all !important;
margin-bottom: 8px !important;
}
}
/* ==========================================================================
DIRECTIVE: SLIGHTLY NARROW THE GAP BETWEEN TAB BOX LIST ITEMS (MARGIN-BOTTOM 8PX -> 4PX)
========================================================================== */
@media screen and (max-width: 768px) {
.tscan-box ul li,
.tscan-boxes ul li,
.tscan-box li,
.tab-pane .tscan-box ul li {
font-size: 15px !important;
line-height: 1.5 !important;
color: #333333 !important;
word-break: keep-all !important;
margin-bottom: 4px !important; /* Slightly narrowed from 8px to 4px */
}
}
/* ==========================================================================
DIRECTIVE: SCALE DOWN RAY PANORAMA / 3D CT DEVICE IMAGE BY 20% ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#special-2 .tscan-img img,
.tab-pane#special-2 .tscan-img img,
img[src*="raypanorama-1.png"] {
transform: scale(0.8) !important; /* Scaled down by 20% */
transform-origin: left bottom !important;
}
}
/* ==========================================================================
DIRECTIVE: SCALE UP RAYFACE DEVICE IMAGE BY 10% ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#special-1 .tscan-img img,
.tab-pane#special-1 .tscan-img img,
img[src*="rayface-1.png"] {
transform: scale(1.1) !important; /* Scaled up by 10% */
transform-origin: left bottom !important;
}
}
/* ==========================================================================
DIRECTIVE: SET ALL TAB FOOTERS (.TSCAN-FOOTER) TO 18PX AND MOVE UP BY 30PX
========================================================================== */
@media screen and (max-width: 768px) {
.tscan-footer,
.tab-pane .tscan-footer,
p.tscan-footer {
font-size: 15px !important; /* Set to 15px per user directive */
margin-top: 10px !important; /* Moved UP by 30px (40px -> 10px) */
margin-bottom: 20px !important;
font-weight: 700 !important;
color: #111111 !important;
text-align: center !important;
line-height: 1.65 !important;
}
}
/* ==========================================================================
DIRECTIVE: MOVE TAB FOOTERS (.TSCAN-FOOTER) UP BY AN ADDITIONAL 20PX (+10PX -> -10PX)
========================================================================== */
@media screen and (max-width: 768px) {
.tscan-footer,
.tab-pane .tscan-footer,
p.tscan-footer {
margin-top: -10px !important; /* Shifted UP by an additional 20px */
font-size: 15px !important;
margin-bottom: 20px !important;
font-weight: 700 !important;
color: #111111 !important;
text-align: center !important;
line-height: 1.65 !important;
}
}
/* ==========================================================================
SECTION 3 DOCTOR CARDS: 100VW FULL-BLEED GREY BOX & EXPANDED PHOTO (MOBILE)
========================================================================== */
@media screen and (max-width: 768px) {
/* Doctor Card Container */
.doctor-card,
.doctor-card.reverse {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 60px !important;
width: 100% !important;
position: relative !important;
background: transparent !important;
}
.doctor-card::before {
display: none !important; /* Hide old pseudo element background */
}
/* 100vw Expanded Profile Photo */
.doc-img {
width: 100vw !important;
position: relative !important;
left: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
max-width: 100vw !important;
height: auto !important;
aspect-ratio: 340/400 !important;
margin: 0 0 0 0 !important;
overflow: hidden !important;
background: #e9ecef !important;
}
.doc-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
display: block !important;
}
/* 100vw Full-Bleed Grey Box (0px round, 0px side margins) */
.doc-info {
width: 100vw !important;
position: relative !important;
left: 50% !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
background: #f8f9fa !important;
border-radius: 0 !important;
padding: 30px 24px 35px 24px !important;
box-sizing: border-box !important;
transform: none !important;
margin-top: 0 !important;
}
.doc-name {
font-size: 18px !important;
color: #333333 !important;
font-weight: 500 !important;
border-bottom: 2px solid #122b5e !important;
padding-bottom: 12px !important;
margin-bottom: 18px !important;
display: block !important;
width: 100% !important;
}
.doc-name strong {
font-size: 26px !important;
color: #122b5e !important;
font-weight: 800 !important;
margin-right: 12px !important;
letter-spacing: -0.5px !important;
}
.doc-history li {
font-size: 16px !important;
color: #111111 !important;
line-height: 1.65 !important;
margin-bottom: 6px !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
CLEAN & STABLE 100% FULL-BLEED DOCTOR CARDS & EXPANDED PHOTO (MOBILE)
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Unset container padding for #doctors section */
#doctors > .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* 2. Doctor Card Container */
.doctor-card,
.doctor-card.reverse {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 0 !important;
margin-top: 0 !important;
margin-bottom: 60px !important;
width: 100% !important;
position: relative !important;
background: transparent !important;
}
.doctor-card::before {
display: none !important;
}
/* 3. Clean 100% Expanded Profile Photo (No offset / no right shift) */
.doc-img {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
margin: 0 !important;
transform: none !important;
position: relative !important;
height: auto !important;
aspect-ratio: 340/400 !important;
overflow: hidden !important;
background: #e9ecef !important;
}
.doc-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0 !important;
display: block !important;
}
/* 4. Clean 100% Full-Bleed Grey Box (0px round, 0px side margins, no right shift) */
.doc-info {
width: 100% !important;
left: 0 !important;
margin: 0 !important;
transform: none !important;
position: relative !important;
background: #f8f9fa !important;
border-radius: 0 !important;
padding: 30px 20px 35px 20px !important;
box-sizing: border-box !important;
}
.doc-name {
font-size: 18px !important;
color: #333333 !important;
font-weight: 500 !important;
border-bottom: 2px solid #122b5e !important;
padding-bottom: 12px !important;
margin-bottom: 18px !important;
display: block !important;
width: 100% !important;
}
.doc-name strong {
font-size: 26px !important;
color: #122b5e !important;
font-weight: 800 !important;
margin-right: 12px !important;
letter-spacing: -0.5px !important;
}
.doc-history li {
font-size: 16px !important;
color: #111111 !important;
line-height: 1.65 !important;
margin-bottom: 6px !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: SLIGHTLY NARROW THE GAP BETWEEN DOCTOR HISTORY LIST ITEMS (MARGIN-BOTTOM 6PX -> 3PX)
========================================================================== */
@media screen and (max-width: 768px) {
.doc-history li,
.doctor-card .doc-history li {
font-size: 16px !important;
line-height: 1.5 !important;
color: #111111 !important;
word-break: keep-all !important;
margin-bottom: 3px !important; /* Narrowed from 6px to 3px */
}
}
/* ==========================================================================
DIRECTIVE: MOVE SECTION 4 IMPLANT (#IMPLANT) UP ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#implant,
section#implant {
padding-top: 15px !important;
margin-top: -18px !important; /* Shifted UP by 23px */
}
.implant-intro,
#implant .implant-intro {
margin-top: 15px !important; /* Shifted intro text block slightly DOWN */
}
}
/* ==========================================================================
SECTION 4 IMPLANT 4 FEATURE CARDS: OPTION B (1-COLUMN STACK, SHARP 0PX ROUND)
========================================================================== */
@media screen and (max-width: 768px) {
.implant-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
padding: 0 20px !important;
max-width: 100% !important;
margin: 0 auto !important;
}
.ig-item {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
background: #ffffff !important;
border: 1px solid #e9ecef !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05) !important;
border-radius: 0 !important; /* Sharp 0px corners as requested */
overflow: hidden !important;
margin-bottom: 0 !important;
}
.ig-img {
width: 100% !important;
height: 200px !important;
flex-shrink: 0 !important;
background-size: cover !important;
background-position: center !important;
border-radius: 0 !important;
}
.ig-text {
width: 100% !important;
padding: 24px 20px !important;
box-sizing: border-box !important;
text-align: left !important;
}
.ig-text h4 {
font-size: 19px !important;
font-weight: 700 !important;
color: #111111 !important;
line-height: 1.45 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
word-break: keep-all !important;
}
.ig-text p {
font-size: 15px !important;
color: #555555 !important;
line-height: 1.6 !important;
margin-bottom: 0 !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE IMPLANT GRID SIDE PADDING FROM 20PX TO 10PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.implant-grid,
#implant .implant-grid {
padding: 0 10px !important; /* Reduced side padding to 10px */
}
}
/* ==========================================================================
DIRECTIVE: REDUCE IMPLANT GRID SIDE PADDING OUTSIDE CARDS TO EXACTLY 5PX
========================================================================== */
@media screen and (max-width: 768px) {
#implant > .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
.implant-grid,
#implant .implant-grid {
padding: 0 5px !important; /* Reduced side margin outside cards to 5px */
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
DIRECTIVE: SET IMPLANT GRID SIDE PADDING OUTSIDE CARDS TO EXACTLY 10PX
========================================================================== */
@media screen and (max-width: 768px) {
#implant > .container {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
.implant-grid,
#implant .implant-grid {
padding: 0 10px !important; /* Set side margin outside cards to 10px */
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
DIRECTIVE: APPLY UNIFIED 10PX SIDE PADDING ACROSS ENTIRE SECTION 4 IMPLANT
========================================================================== */
@media screen and (max-width: 768px) {
#implant > .container,
#implant .container {
padding-left: 10px !important;
padding-right: 10px !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.implant-grid,
#implant .implant-grid {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
DIRECTIVE: ADD 5PX MORE SIDE PADDING (TOTAL 15PX) ACROSS SECTION 4 IMPLANT
========================================================================== */
@media screen and (max-width: 768px) {
#implant > .container,
#implant .container {
padding-left: 15px !important; /* Total 15px side padding (10px + 5px) */
padding-right: 15px !important;
max-width: 100% !important;
width: 100% !important;
box-sizing: border-box !important;
}
.implant-grid,
#implant .implant-grid {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================================
DIRECTIVE: SET DOCTOR HISTORY LIST ITEMS FONT-SIZE TO 17PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.doc-history li,
.doctor-card .doc-history li {
font-size: 15px !important;
line-height: 1.5 !important;
color: #111111 !important;
word-break: keep-all !important;
margin-bottom: 4px !important;
}
}
/* ==========================================================================
DIRECTIVE: IMPLANT FEATURE CARDS TITLE 21PX (NO FORCED BR) & CONTENT 17PX
========================================================================== */
@media screen and (max-width: 768px) {
.ig-text h4 {
font-size: 21px !important; /* Updated card title font size to 21px */
line-height: 1.4 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
word-break: keep-all !important;
}
.ig-text h4 br:not(.m-br) {
display: none !important; /* Hide forced line breaks inside card titles */
}
.ig-text p {
font-size: 15px !important;
line-height: 1.65 !important;
color: #555555 !important;
margin-bottom: 0 !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: IMPLANT FEATURE CARD TITLE FONT-SIZE UPDATE TO 20PX
========================================================================== */
@media screen and (max-width: 768px) {
.ig-text h4 {
font-size: 20px !important; /* Updated from 21px to 20px */
line-height: 1.4 !important;
margin-top: 0 !important;
margin-bottom: 12px !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: HARMONIZE SECTION 4 IMPLANT TABS WITH SECTION 2 & FULL-BLEED GREY BOX
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Treatment Process Full-Bleed Grey Box Fix */
.implant-process-section,
#implant .implant-process-section {
position: static !important;
left: auto !important;
right: auto !important;
margin-left: -15px !important;
margin-right: -15px !important;
width: calc(100% + 30px) !important;
max-width: none !important;
padding: 40px 15px !important;
background: #f8f9fa !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
/* 2. Tab Buttons Font & Style Harmonization (matching Section 2) */
#implant .tab-buttons .tab-btn,
#implant .tab-btn {
font-size: 17px !important;
font-weight: 700 !important;
padding: 12px 8px !important;
color: #666666 !important;
}
#implant .tab-buttons .tab-btn.active,
#implant .tab-btn.active {
color: #0b1732 !important;
font-weight: 800 !important;
}
/* 3. Tab Main Hero Image Size Harmonization (matching Section 2) */
.implant-tab-hero,
#implant .implant-tab-hero {
height: 260px !important;
border-radius: 0 !important;
margin-bottom: 30px !important;
background-size: cover !important;
background-position: center !important;
}
/* 4. Tab Body Typography Harmonization (matching Section 2) */
.implant-tab-title,
#implant .implant-tab-title {
font-size: 21px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #0b1732 !important;
}
.implant-tab-desc,
#implant .implant-tab-desc {
font-size: 15px !important;
line-height: 1.65 !important;
color: #555555 !important;
}
}
/* ==========================================================================
DIRECTIVE: UPDATE SECTION 4 IMPLANT TAB BUTTONS FONT-SIZE TO 21PX (MATCHING SECTION 2)
========================================================================== */
@media screen and (max-width: 768px) {
#implant .tab-buttons .tab-btn,
#implant .tab-btn {
font-size: 21px !important; /* Updated from 17px to 21px to match Section 2 */
font-weight: 700 !important;
padding: 12px 6px !important;
color: #666666 !important;
word-break: keep-all !important;
}
#implant .tab-buttons .tab-btn.active,
#implant .tab-btn.active {
color: #0b1732 !important;
font-weight: 800 !important;
}
}
/* ==========================================================================
DIRECTIVE: OPTION B (2X2 GRID FOR TREATMENT PROCESS) & TYPOGRAPHY UPDATE
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Sub-Headings -> 21px */
.implant-tab-title {
font-size: 21px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #0b1732 !important;
margin-bottom: 16px !important;
}
/* 2. Treatment Process Step Badges -> 19px */
.process-item .process-step {
font-size: 19px !important;
font-weight: 700 !important;
padding: 10px 4px !important;
line-height: 1.3 !important;
word-break: keep-all !important;
margin-bottom: 12px !important;
}
/* 3. Body Text & Details -> 15px */
.implant-tab-desc,
.implant-pros li .pro-desc,
.process-item p {
font-size: 15px !important;
line-height: 1.6 !important;
color: #333333 !important;
word-break: keep-all !important;
}
/* 4. Option B: 2x2 Grid Layout for Treatment Process */
.implant-process-section .process-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px 12px !important;
width: 100% !important;
}
.process-item {
width: 100% !important;
margin-bottom: 0 !important;
}
.process-item .process-img {
height: 130px !important;
border-radius: 0 !important;
background-size: cover !important;
background-position: center !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE SIDE MARGINS/PADDING FOR IMPLANT PROS & TREATMENT PROCESS
========================================================================== */
@media screen and (max-width: 768px) {
/* Reduce side padding for "즉시 임플란트의 장점" (.implant-pros) */
.implant-pros,
#implant .implant-pros {
padding-left: 5px !important;
padding-right: 5px !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Reduce side padding for "즉시 임플란트 치료 과정" (.implant-process-section) */
.implant-process-section,
#implant .implant-process-section {
padding-left: 5px !important;
padding-right: 5px !important;
margin-left: -15px !important;
margin-right: -15px !important;
width: calc(100% + 30px) !important;
box-sizing: border-box !important;
}
.implant-process-section .process-grid {
gap: 16px 8px !important; /* Slightly tighter grid gap for 2x2 grid */
padding: 0 !important;
}
}
/* ==========================================================================
DIRECTIVE: TOP-LEFT SQUARE COLORED NUMBER BADGES (01, 02, 03, 04) ON PROCESS IMAGES
========================================================================== */
.process-item {
position: relative !important;
}
.process-item .process-img {
position: relative !important;
overflow: hidden !important;
}
.process-item .process-img::before {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 36px !important;
height: 36px !important;
background: #0b1732 !important; /* Deep Navy Signature Color */
color: #ffffff !important;
font-size: 16px !important;
font-weight: 800 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 0 !important; /* Sharp 0px corners */
box-shadow: 2px 2px 8px rgba(0,0,0,0.2) !important;
z-index: 5 !important;
letter-spacing: 0 !important;
}
.process-item:nth-child(1) .process-img::before { content: '01' !important; }
.process-item:nth-child(2) .process-img::before { content: '02' !important; }
.process-item:nth-child(3) .process-img::before { content: '03' !important; }
.process-item:nth-child(4) .process-img::before { content: '04' !important; }
@media screen and (max-width: 768px) {
.process-item .process-img::before {
width: 32px !important;
height: 32px !important;
font-size: 15px !important;
}
}
/* ==========================================================================
DIRECTIVE: FINE-TUNE TREATMENT PROCESS STEP BADGES (10% SMALLER, SEMIBOLD), 18PX TITLES, & NO BR DESCRIPTIONS
========================================================================== */
/* Step Number Badge 10% Size Reduction & Semibold */
.process-item .process-img::before {
width: 32px !important;
height: 32px !important;
font-size: 15px !important;
font-weight: 600 !important; /* Semibold font weight */
}
@media screen and (max-width: 768px) {
/* Mobile Step Number Badge 10% Reduction (29px x 29px) & Semibold */
.process-item .process-img::before {
width: 29px !important;
height: 29px !important;
font-size: 14px !important;
font-weight: 600 !important; /* Semibold font weight */
}
/* Step Title 15px & Reduced Vertical Padding */
.process-item .process-step {
font-size: 15px !important;
font-weight: 700 !important;
padding: 7px 4px !important; /* Reduced top/bottom padding */
line-height: 1.3 !important;
margin-bottom: 10px !important;
}
/* Step Description: Hide forced
line breaks */
.process-item p br:not(.m-br) {
display: none !important; /* Remove forced line breaks in step description */
}
.process-item p {
font-size: 15px !important;
line-height: 1.55 !important;
color: #333333 !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: ADD 10PX MORE SIDE PADDING (TOTAL 15PX) & INCREASE PROCESS IMAGE HEIGHT BY +50PX (TOTAL 180PX)
========================================================================== */
@media screen and (max-width: 768px) {
/* Add 10px more side padding to treatment process section (total 15px) */
.implant-process-section,
#implant .implant-process-section {
padding-left: 15px !important;
padding-right: 15px !important;
margin-left: -15px !important;
margin-right: -15px !important;
width: calc(100% + 30px) !important;
box-sizing: border-box !important;
}
/* Increase treatment process image height by 50px (130px -> 180px) */
.process-item .process-img,
#implant .process-item .process-img {
height: 180px !important; /* Increased by +50px for rich visual detail */
border-radius: 0 !important;
background-size: cover !important;
background-position: center !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE GAP BETWEEN NUMBER BADGES (.num, .num-badge) AND ADJACENT TEXT (15PX -> 8PX)
========================================================================== */
.implant-target-box ul li .num,
.implant-pros li .pro-title .num,
.num-badge,
.num,
.proc-num {
margin-right: 12px !important; /* Reduced from 15px to 8px to bring number badge and text closer */
}
@media screen and (max-width: 768px) {
.implant-target-box ul li .num,
.implant-pros li .pro-title .num,
.num-badge,
.num,
.proc-num {
margin-right: 8px !important;
}
}
/* ==========================================================================
DIRECTIVE: SET ALL DESCRIPTION PARAGRAPHS IN SECTION 4 IMPLANT TABS TO 17PX
========================================================================== */
@media screen and (max-width: 768px) {
.implant-tab-desc,
.implant-tab-desc p,
#implant .implant-tab-desc,
.sinus-box p,
.implant-target-desc,
.implant-intro p,
.implant-target-box p,
#implant p {
font-size: 15px !important;
line-height: 1.65 !important;
color: #444444 !important;
}
}
/* ==========================================================================
DIRECTIVE: HIDE ALL FORCED
LINE BREAKS IN SECTION 4 IMPLANT TABS ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#implant p br:not(.m-br),
#implant .implant-tab-desc br:not(.m-br),
#implant .sinus-desc br:not(.m-br),
#implant .sinus-info-box br:not(.m-br),
#implant .implant-intro br:not(.m-br) {
display: none !important;
}
}
/* ==========================================================================
DIRECTIVE: SET .sinus-badge ("상악동이란?") AND .sinus-desc FONT-SIZE TO 17PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.sinus-badge,
#implant .sinus-badge,
.sinus-desc,
#implant .sinus-desc {
font-size: 15px !important;
line-height: 1.6 !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT .pro-desc UP BY ~13PX TO GROUP TITLE & DESCRIPTION INTO A SINGLE BLOCK
========================================================================== */
@media screen and (max-width: 768px) {
.implant-pros li {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
margin-bottom: 24px !important; /* Spacing between separate items */
}
.implant-pros li .pro-title {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
line-height: 1.3 !important;
}
.implant-pros li .pro-desc {
margin-top: -6px !important; /* Shifted up by ~13px for tight single-block grouping */
padding-top: 0 !important;
line-height: 1.55 !important;
}
}
/* ==========================================================================
DIRECTIVE: ADJUST .pro-desc SPACING DOWN (+4PX) & ENFORCE EXACT 17PX ON NUMBER BADGE ADJACENT TEXT
========================================================================== */
@media screen and (max-width: 768px) {
/* Enforce 15px on number badge adjacent titles & lists */
.implant-target-box ul li,
.implant-pros li .pro-title,
#implant .implant-pros li .pro-title {
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
color: #111111 !important;
}
.implant-pros li {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
gap: 0 !important;
margin-bottom: 22px !important;
}
.implant-pros li .pro-title {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.implant-pros li .pro-desc {
margin-top: 4px !important; /* Adjusted down to +4px for natural, comfortable grouping */
padding-top: 0 !important;
font-size: 15px !important;
line-height: 1.6 !important;
color: #444444 !important;
}
}
/* ==========================================================================
DIRECTIVE: SET .implant-target-box ul li FONT WEIGHT TO REGULAR (400) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.implant-target-box ul li,
#implant .implant-target-box ul li {
font-weight: 400 !important; /* Changed from 700 (Bold) to 400 (Regular) */
color: #333333 !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT .implant-target-box UP BY ~10PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.implant-target-box,
#implant .implant-target-box {
margin-top: 10px !important; /* Reduced margin-top by 10px~15px to shift box up */
}
}
/* ==========================================================================
DIRECTIVE: SHIFT .implant-target-box UP BY ANOTHER 10PX (MARGIN-TOP: 0PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.implant-target-box,
#implant .implant-target-box {
margin-top: 0px !important; /* Reduced margin-top by another 10px to shift box higher */
}
}
/* ==========================================================================
DIRECTIVE: REDUCE SIDE PADDING OF .implant-target-box BY ~5PX-10PX (PADDING 0 5PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.implant-target-box,
#implant .implant-target-box {
padding-left: 5px !important;
padding-right: 5px !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
DIRECTIVE: TAB 2 TARGET ITEM 2 CUSTOM LINE BREAK ("...식립해야 / 하는 경우")
========================================================================== */
.mobile-br {
display: none;
}
@media screen and (max-width: 768px) {
.mobile-br {
display: inline !important;
}
.implant-target-box ul li {
letter-spacing: -0.6px !important;
}
}
/* ==========================================================================
DIRECTIVE: EXACT LINE BREAK FOR TAB 2 TARGET ITEM 2 ("...식립해야 / 하는 경우")
========================================================================== */
@media screen and (max-width: 768px) {
.implant-target-box ul li {
font-size: 15px !important;
letter-spacing: -1px !important;
word-break: keep-all !important;
align-items: flex-start !important;
}
.implant-target-box ul li .num {
margin-top: -1px !important; /* Shifted badge UP 3px so right description text drops 3px down relative to badge */
margin-right: 6px !important;
flex-shrink: 0 !important;
}
.implant-target-box ul li .target-text {
display: inline-block !important;
word-break: keep-all !important;
}
.implant-target-box ul li br.mobile-br {
display: block !important;
content: "" !important;
}
}
/* ==========================================================================
DIRECTIVE: RESTORE LETTER-SPACING TO NORMAL (-0.2PX) FOR .implant-target-box ul li
========================================================================== */
@media screen and (max-width: 768px) {
.implant-target-box ul li,
#implant .implant-target-box ul li {
font-size: 15px !important;
letter-spacing: -0.2px !important; /* Restored from -1px to comfortable normal spacing */
line-height: 1.45 !important;
}
}
/* ==========================================================================
DIRECTIVE: ENFORCE JAIN DENTAL CLINIC SUBTITLE COLOR #DCB37B ACROSS ALL SECTIONS
========================================================================== */
.section-subtitle,
.intro-subtitle,
#implant .section-subtitle,
#implant p.section-subtitle {
color: #DCB37B !important;
}
@media screen and (max-width: 768px) {
.section-subtitle,
.intro-subtitle,
#implant .section-subtitle,
#implant p.section-subtitle {
color: #DCB37B !important;
}
}
/* ==========================================================================
DIRECTIVE: WIDEN SPACING BETWEEN .pro-title AND .pro-desc BY ~5PX (MARGIN-TOP: 9PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.implant-pros li .pro-desc,
#implant .implant-pros li .pro-desc {
margin-top: 7px !important; /* Shifted UP 2px (9px -> 7px) */
padding-top: 0 !important;
}
}
/* ==========================================================================
DIRECTIVE: ADD INNER PADDING (20PX 18PX) TO .implant-target-box SO BADGES SIT INSIDE GREY BOX
========================================================================== */
@media screen and (max-width: 768px) {
.implant-target-box,
#implant .implant-target-box {
padding: 20px 18px !important; /* Inner padding so badges sit nicely inside the grey box */
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
DIRECTIVE: TAB 2 & TAB 3 TARGET BOXES SPECIFICALLY REDUCE SIDE PADDING TO 5PX
========================================================================== */
@media screen and (max-width: 768px) {
#implant-2 .implant-target-box,
#implant-3 .implant-target-box {
padding-left: 5px !important;
padding-right: 5px !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT TAB 2 & TAB 3 TARGET BOXES UP BY ~15PX (MARGIN-TOP: -15PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#implant-2 .implant-target-box,
#implant-3 .implant-target-box {
margin-top: -15px !important; /* Shifted box UP by ~15px */
}
}
/* ==========================================================================
DIRECTIVE: SHIFT .sinus-desc UP BY ~8PX (MARGIN-TOP: -8PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.sinus-desc,
#implant .sinus-desc {
margin-top: -8px !important;
padding-top: 0 !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT SECTION 5 (#aesthetic) UP SLIGHTLY ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#aesthetic,
section#aesthetic {
padding-top: 20px !important;
margin-top: -15px !important;
}
}
/* ==========================================================================
DIRECTIVE: MATCH SECTION 5 (#aesthetic) SIDE PADDING TO SECTION 4 (15PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#aesthetic .container,
#aesthetic .aesthetic-intro,
#aesthetic .aesthetic-grid,
#aesthetic .ae-card {
padding-left: 15px !important;
padding-right: 15px !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
DIRECTIVE: HIDE ALL FORCED
TAGS IN SECTION 5 INTRO (.aesthetic-intro) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#aesthetic .aesthetic-intro br:not(.m-br),
.aesthetic-intro br:not(.m-br) {
display: none !important;
}
.aesthetic-intro p {
word-break: keep-all !important;
line-height: 1.65 !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE SIDE PADDING OUTSIDE .AE-CARD TO 5PX & HIDE
IN .AE-TEXT ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#aesthetic .aesthetic-grid,
.aesthetic-grid {
padding-left: 5px !important;
padding-right: 5px !important;
}
.ae-text br:not(.m-br),
#aesthetic .ae-text br:not(.m-br) {
display: none !important;
}
.ae-text p,
#aesthetic .ae-text p {
word-break: keep-all !important;
line-height: 1.6 !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE .AESTHETIC-GRID OUTSIDE PADDING BY 5PX (0PX) & REDUCE .AE-TEXT BOTTOM PADDING (15PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#aesthetic .aesthetic-grid,
.aesthetic-grid {
padding-left: 0px !important;
padding-right: 0px !important;
}
.ae-text,
#aesthetic .ae-text {
padding: 20px 15px 15px 15px !important; /* Reduced bottom padding from 30px to 15px to make vertical height compact */
}
}
/* ==========================================================================
DIRECTIVE: REDUCE .AE-CARD VERTICAL HEIGHT BY ~20PX (.AE-IMG HEIGHT: 190PX, .AE-TEXT PADDING: 15PX 10PX 10PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ae-img,
#aesthetic .ae-img {
height: 190px !important; /* Reduced image height by 20px for compact box vertical size */
}
.ae-text,
#aesthetic .ae-text {
padding: 15px 10px 10px 10px !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT .AE-TEXT TITLE & DESC BLOCK DOWN SLIGHTLY (PADDING-TOP: 22PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ae-text,
#aesthetic .ae-text {
padding-top: 22px !important; /* Shifted text block DOWN slightly */
padding-bottom: 15px !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT .AE-TEXT DOWN BY 10PX MORE (PADDING-TOP: 32PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ae-text,
#aesthetic .ae-text {
padding-top: 25px !important;
padding-bottom: 6px !important;
}
}
/* ==========================================================================
DIRECTIVE: SET .AE-PRO-ITEM CONTENT FONT SIZE TO 17PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ae-pro-item,
#aesthetic .ae-pro-item {
font-size: 15px !important;
line-height: 1.5 !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE .AE-PRO-ITEM LEFT PADDING BY ~10PX (PADDING-LEFT: 18PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ae-pro-item,
#aesthetic .ae-pro-item {
padding-top: 12px !important;
padding-bottom: 12px !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
.ae-pro-item .num-badge,
#aesthetic .ae-pro-item .num-badge {
transform: translateY(-3px) !important; /* Shifted badge UP 3px so description text on the right drops 3px down relative to badge */
}
}
/* ==========================================================================
DIRECTIVE: SHIFT TAB 2 (#ae-2) BADGE 1 AND BADGE 4 UP BY 16PX
========================================================================== */
#ae-2 .ae-pros-list .ae-pro-item:nth-child(1) .num-badge,
#ae-2 .ae-pros-list .ae-pro-item:nth-child(4) .num-badge {
transform: translateY(-13px) !important; /* Shifted badges 1 and 4 DOWN by 3px (-16px -> -13px) */
}
/* ==========================================================================
DIRECTIVE: SHIFT TAB 3 (#ae-3) BADGE 2, 3, AND 4 UP BY 16PX
========================================================================== */
#ae-3 .ae-pros-list .ae-pro-item:nth-child(2) .num-badge,
#ae-3 .ae-pros-list .ae-pro-item:nth-child(3) .num-badge,
#ae-3 .ae-pros-list .ae-pro-item:nth-child(4) .num-badge {
transform: translateY(-13px) !important; /* Shifted badges 2, 3, and 4 DOWN by 3px (-16px -> -13px) */
}
/* ==========================================================================
DIRECTIVE: REMOVE FORCED
IN .AE-INFO-SECTION P ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#aesthetic .ae-info-section p br:not(.m-br),
.ae-info-section p br:not(.m-br) {
display: none !important;
}
#aesthetic .ae-info-section p,
.ae-info-section p {
word-break: keep-all !important;
line-height: 1.6 !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT SECTION 6 (#CLEAR-ALIGNER) UP SLIGHTLY ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#clear-aligner {
padding-top: 20px !important;
margin-top: -15px !important;
}
}
/* ==========================================================================
DIRECTIVE: SYNC SECTION 6 (#CLEAR-ALIGNER) SIDE PADDING TO MATCH SECTION 5 (15PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#clear-aligner .container {
padding: 0 15px !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE GREY BOX BOTTOM INNER PADDING & REMOVE LAST-CHILD MARGIN-BOTTOM
========================================================================== */
.implant-pros li:last-child,
#clear-aligner .implant-pros li:last-child {
margin-bottom: 0 !important;
}
#clear-aligner .implant-target-box,
.ca-info-section .implant-target-box {
padding-bottom: 12px !important;
}
/* PC ONLY: Increase left and bottom inner padding for Section 6 Clear Aligner feature grey box (0px Mobile Drift) */
@media screen and (min-width: 769px) {
#clear-aligner .implant-target-box,
.ca-info-section .implant-target-box {
padding-top: 30px !important;
padding-bottom: 30px !important;
padding-left: 35px !important;
padding-right: 35px !important;
}
}
/* ==========================================================================
DIRECTIVE: CONVERT SECTION 6 CA-RECOMMEND-GRID TO 2X3 GRID ON MOBILE WITH OPTIMIZED IMAGE HEIGHT
========================================================================== */
@media screen and (max-width: 768px) {
.ca-recommend-grid {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
.ca-rec-img {
height: 180px !important;
background-position: center center !important;
background-size: cover !important;
}
.ca-rec-title {
font-size: 16px !important;
padding: 10px 5px !important;
margin-bottom: 10px !important;
}
.ca-rec-item p {
font-size: 15px !important;
line-height: 1.4 !important;
word-break: keep-all !important;
margin-top: 6px !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 6 RECOMMEND CARDS: IMAGE HEIGHT 167PX (-13PX), TITLE 18PX, DESC 17PX
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 167px !important; /* Reduced height by 13px (180px - 13px = 167px) */
}
.ca-rec-title {
font-size: 16px !important; /* Title font size: 16px */
}
.ca-rec-item p {
font-size: 15px !important; /* Description font size: 15px */
}
}
/* ==========================================================================
DIRECTIVE: ALIGN .CA-REC-IMG FLUSH DOWN TO COLOR BOX (BACKGROUND-POSITION: CENTER BOTTOM)
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 167px !important;
background-position: center bottom !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT RECOMMENDATION CARD IMAGES DOWN TO CENTER 85% TO ELIMINATE TOP GAP ABOVE COLOR BOX
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 167px !important;
background-position: center 85% !important; /* Pushes background image DOWN by 85% position */
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE .CA-REC-IMG HEIGHT BY 20PX (167PX - 20PX = 147PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 147px !important; /* Reduced height by 20px (167px -> 147px) */
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* ==========================================================================
DIRECTIVE: OVERLAP .CA-REC-TITLE BY -3PX TO ELIMINATE ANY IMAGE GAP LINE 100%
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-title {
margin-top: -10px !important; /* Seamlessly overlaps image bottom edge by 3px to eliminate white line gap */
}
}
/* ==========================================================================
DIRECTIVE: SHIFT INNER BACKGROUND IMAGE DOWN BY 10PX INSIDE .CA-REC-IMG
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 147px !important;
background-position: center calc(50% + 10px) !important; /* Container stays 147px, inner image moves down by 10px */
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE .CA-REC-IMG HEIGHT BY ANOTHER 10PX (147PX -> 137PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 137px !important; /* Reduced height by another 10px (147px -> 137px) */
}
}
/* ==========================================================================
DIRECTIVE: REMOVE GREY BACKGROUND (#DDD) & ENFORCE COVER FIT (NO GREY EMPTY SPACE)
========================================================================== */
.ca-rec-img {
background-color: transparent !important;
}
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 137px !important;
background-color: transparent !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE .CA-REC-IMG HEIGHT BY 20PX (137PX -> 117PX) ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ca-rec-img {
height: 117px !important; /* Reduced height by 20px (137px -> 117px) */
background-color: transparent !important;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
}
}
/* ==========================================================================
DIRECTIVE: ZOOM JAIN_SECTION6_1_2.PNG BY 10% (BACKGROUND-SIZE: 110% AUTO)
========================================================================== */
.ca-recommend-grid .ca-rec-item:nth-child(2) .ca-rec-img {
background-size: 110% auto !important;
}
@media screen and (max-width: 768px) {
.ca-recommend-grid .ca-rec-item:nth-child(2) .ca-rec-img {
background-size: 110% auto !important;
}
}
/* ==========================================================================
DIRECTIVE: OVERLAP ALL 6 RECOMMENDATION COLOR TITLE BOXES UP BY 10PX ON TOP OF IMAGE
========================================================================== */
.ca-rec-title {
margin-top: -10px !important;
position: relative !important;
z-index: 2 !important;
}
@media screen and (max-width: 768px) {
.ca-rec-title {
margin-top: -10px !important;
position: relative !important;
z-index: 2 !important;
}
}
/* ==========================================================================
DIRECTIVE: FIX SECTION 6 CLEAR ALIGNER PROCESS STEP CARDS ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ca-proc-item,
#clear-aligner .ca-proc-item {
flex-direction: column !important;
align-items: stretch !important;
border-radius: 12px !important;
overflow: hidden !important;
margin-bottom: 15px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}
.ca-proc-img,
#clear-aligner .ca-proc-img,
div[style*="width:220px"] {
width: 100% !important;
height: 180px !important;
min-height: 180px !important;
background-position: center center !important;
background-size: cover !important;
}
.proc-num {
top: 10px !important;
left: 10px !important;
width: 28px !important;
height: 28px !important;
line-height: 28px !important;
font-size: 15px !important;
font-weight: 700 !important;
border-radius: 4px !important;
}
.ca-proc-text,
#clear-aligner .ca-proc-text {
padding: 20px 18px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.ca-proc-text h5 {
font-size: 18px !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
color: #0b2559 !important;
}
.ca-proc-text p {
font-size: 15px !important;
line-height: 1.55 !important;
color: #555555 !important;
word-break: keep-all !important;
}
.ca-proc-text p br:not(.m-br) {
display: none !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 6 PROCESS CARDS: 1-COLUMN, NO BORDER-RADIUS (0), REDUCED SIDE PADDING (10PX)
========================================================================== */
@media screen and (max-width: 768px) {
.ca-process-list,
#clear-aligner .ca-process-list,
#clear-aligner .ca-process-section .container {
padding: 0 10px !important;
}
.ca-proc-item,
#clear-aligner .ca-proc-item {
flex-direction: column !important;
align-items: stretch !important;
border-radius: 0 !important;
overflow: hidden !important;
margin-bottom: 15px !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
}
.ca-proc-img,
#clear-aligner .ca-proc-img,
div[style*="width:220px"] {
width: 100% !important;
height: 180px !important;
min-height: 180px !important;
border-radius: 0 !important;
background-position: center center !important;
background-size: cover !important;
}
.proc-num {
top: 0 !important;
left: 0 !important;
width: 26px !important;
height: 26px !important;
line-height: 26px !important;
font-size: 14px !important;
font-weight: 700 !important;
border-radius: 0 !important;
}
.ca-proc-text,
#clear-aligner .ca-proc-text {
padding: 20px 15px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.ca-proc-text h5 {
font-size: 18px !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
color: #0b2559 !important;
}
.ca-proc-text p {
font-size: 15px !important;
line-height: 1.55 !important;
color: #555555 !important;
word-break: keep-all !important;
}
.ca-proc-text p br:not(.m-br) {
display: none !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 6 PROCESS CARDS: TITLE FONT 21PX, CONTENT FONT 17PX
========================================================================== */
@media screen and (max-width: 768px) {
.ca-proc-text h5,
#clear-aligner .ca-proc-text h5 {
font-size: 21px !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
color: #0b2559 !important;
}
.ca-proc-text p,
#clear-aligner .ca-proc-text p {
font-size: 15px !important;
line-height: 1.55 !important;
color: #555555 !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE GAP BETWEEN [미리보는 치료과정] TITLE AND 7 CARDS (MARGIN-BOTTOM: 25PX)
========================================================================== */
@media screen and (max-width: 768px) {
.ca-process-section h4,
#clear-aligner .ca-process-section h4 {
margin-bottom: 25px !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT SECTION 7 (#CONSERVATION) SLIGHTLY UPWARDS ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#conservation {
padding-top: 20px !important;
margin-top: -15px !important;
}
}
/* ==========================================================================
DIRECTIVE: SYNC SECTION 7 (#CONSERVATION) SIDE PADDING TO 15PX (SAME AS SECTION 5)
========================================================================== */
@media screen and (max-width: 768px) {
#conservation .container {
padding: 0 15px !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 7 (#CONSERVATION) PRESERVE CLIENT APPROVED TEXT-STYLE TABS (2X2 GRID)
========================================================================== */
@media screen and (max-width: 768px) {
#conservation .tab-buttons.text-style {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 12px 10px !important;
border-bottom: none !important;
padding: 0 !important;
margin: 15px auto 25px auto !important;
}
#conservation .tab-buttons.text-style .tab-btn {
padding: 8px 0 !important;
font-size: 15px !important;
color: #666666 !important;
background: transparent !important;
border: none !important;
border-bottom: 2px solid #eeeeee !important;
border-radius: 0 !important;
text-align: center !important;
word-break: keep-all !important;
}
#conservation .tab-buttons.text-style .tab-btn.active {
color: #122b5e !important;
font-weight: 700 !important;
border-bottom: 3px solid #122b5e !important;
}
#conservation .active-indicator {
display: none !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 7 (#CONSERVATION) RESTORE 1-LINE HORIZONTAL SLIDING TAB BAR
========================================================================== */
@media screen and (max-width: 768px) {
#conservation .tab-buttons.text-style {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: flex-start !important;
align-items: center !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
position: relative !important;
border-bottom: 2px solid #eeeeee !important;
margin: 15px auto 25px auto !important;
padding: 0 5px !important;
width: 100% !important;
box-sizing: border-box !important;
}
#conservation .tab-buttons.text-style::-webkit-scrollbar {
display: none !important;
}
#conservation .tab-buttons.text-style .tab-btn {
flex: 0 0 auto !important;
white-space: nowrap !important;
font-size: 14px !important;
padding: 10px 10px !important;
color: #666666 !important;
background: transparent !important;
border: none !important;
border-bottom: none !important;
border-radius: 0 !important;
text-align: center !important;
}
#conservation .tab-buttons.text-style .tab-btn.active {
color: #122b5e !important;
font-weight: 700 !important;
border-bottom: none !important;
}
#conservation .active-indicator {
display: block !important;
position: absolute !important;
bottom: -2px !important;
height: 4px !important;
background: #122b5e !important;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 2 !important;
pointer-events: none !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 7 (#CONSERVATION) 15PX FONT (SAME AS SECTION 5) & 2-LINE WRAP FOR EMDOGAIN TAB
========================================================================== */
/* PC (>1024px): Hide line break in tab button */
.tab-btn .m-tab-br {
display: none;
}
@media screen and (max-width: 768px) {
.tab-btn .m-tab-br {
display: block !important;
}
#conservation .tab-buttons.text-style {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
border-bottom: 2px solid #eeeeee !important;
margin: 15px auto 25px auto !important;
padding: 0 !important;
overflow: visible !important;
}
#conservation .tab-buttons.text-style .tab-btn {
flex: 1 !important;
font-size: 15px !important; /* 100% identical to Section 5 */
padding: 6px 2px !important;
color: #666666 !important;
background: transparent !important;
border: none !important;
border-bottom: none !important;
border-radius: 0 !important;
text-align: center !important;
line-height: 1.25 !important;
white-space: normal !important;
}
#conservation .tab-buttons.text-style .tab-btn.active {
color: #122b5e !important;
font-weight: 700 !important;
border-bottom: none !important;
}
#conservation .active-indicator {
display: block !important;
position: absolute !important;
bottom: -2px !important;
height: 4px !important;
background: #122b5e !important;
transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
z-index: 2 !important;
pointer-events: none !important;
}
}
/* ==========================================================================
DIRECTIVE: UPDATE TEXT-STYLE TAB BUTTON FONT SIZE TO 19PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.tab-buttons.text-style .tab-btn,
#aesthetic .tab-buttons.text-style .tab-btn,
#conservation .tab-buttons.text-style .tab-btn {
font-size: 19px !important;
}
}
/* ==========================================================================
DIRECTIVE: UPDATE ALL TAB BUTTON FONT SIZES ACROSS ALL SECTIONS TO 19PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.tab-btn,
.tab-buttons .tab-btn,
.tab-buttons.text-style .tab-btn,
.tab-buttons.line-style .tab-btn,
#special .tab-buttons .tab-btn,
#implant .tab-buttons .tab-btn,
#aesthetic .tab-buttons .tab-btn,
#clear-aligner .tab-buttons .tab-btn,
#conservation .tab-buttons .tab-btn,
#tmj .tab-buttons .tab-btn {
font-size: 19px !important;
}
}
/* ==========================================================================
DIRECTIVE: OVERRIDE SPECIFICITY TO GUARANTEE 19PX FONT SIZE FOR #CONSERVATION TABS ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#conservation .tab-buttons.text-style .tab-btn,
#conservation .tab-buttons.text-style button.tab-btn {
font-size: 19px !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 7 CON-INFO-SECTION TEXT FONT 17PX & HIDE FORCED BR BREAKS ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.con-info-section p,
.con-info-section .highlight-blue,
#conservation .con-info-section p,
#conservation .con-info-section .highlight-blue,
p[style*="font-size:20px"] {
font-size: 15px !important;
line-height: 1.6 !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
.con-info-section p br:not(.m-br),
#conservation .con-info-section p br:not(.m-br) {
display: none !important;
}
}
/* ==========================================================================
DIRECTIVE: HIDE FORCED BR BREAKS & ENABLE KEEP-ALL FOR CLEAR ALIGNER INTRO DESC ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#clear-aligner p br:not(.m-br),
#clear-aligner .section-desc br:not(.m-br),
#clear-aligner div p br:not(.m-br) {
display: none !important;
}
#clear-aligner p,
#clear-aligner .section-desc {
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 7 CONSERVATION CAUSE PRO-DESC FONT SIZE 17PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.implant-pros .pro-desc,
#conservation .implant-pros .pro-desc {
font-size: 15px !important;
line-height: 1.55 !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 7 CONSERVATION PREVENTION SECTION BACKGROUND COLOR -> WHITE (#FFFFFF)
========================================================================== */
.implant-process-section.con-prev-section,
#conservation .implant-process-section.con-prev-section {
background: #ffffff !important;
background-color: #ffffff !important;
}
@media screen and (max-width: 768px) {
.implant-process-section.con-prev-section,
#conservation .implant-process-section.con-prev-section {
background: #ffffff !important;
background-color: #ffffff !important;
}
}
/* ==========================================================================
DIRECTIVE: HIDE NUMBER BADGES (01, 02, 03, 04) FOR SECTION 7 PREVENTION CARDS
========================================================================== */
.con-prev-section .process-item .process-img::before,
#conservation .con-prev-section .process-item .process-img::before {
display: none !important;
content: none !important;
}
/* ==========================================================================
DIRECTIVE: DISCOMFORT BOX TEXT FONT SIZE 17PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.discomfort-text,
.discomfort-item .discomfort-text,
.discomfort-container .discomfort-text {
font-size: 15px !important;
line-height: 1.5 !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE SIDE PADDING FOR DISCOMFORT BOX & NARROW GAP BETWEEN NUMBER BADGE AND TEXT
========================================================================== */
.discomfort-item {
gap: 10px !important;
}
.discomfort-container {
padding-left: 20px !important;
padding-right: 20px !important;
}
@media screen and (max-width: 768px) {
.discomfort-item {
gap: 10px !important;
}
.discomfort-container {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* ==========================================================================
DIRECTIVE: HIDE FORCED BR BREAKS & SET FONT 17PX FOR DISCOMFORT CONTAINER P ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.discomfort-container p,
#conservation .discomfort-container p {
font-size: 15px !important;
line-height: 1.6 !important;
word-break: keep-all !important;
overflow-wrap: break-word !important;
}
.discomfort-container p br:not(.m-br),
#conservation .discomfort-container p br:not(.m-br) {
display: none !important;
}
}
/* ==========================================================================
DIRECTIVE: ZIRCONIA ADVANTAGE CARDS TEXT FONT SIZE 17PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.zirconia-adv-text,
.zirconia-adv-item .zirconia-adv-text {
font-size: 15px !important;
line-height: 1.5 !important;
word-break: keep-all !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT SECTION 6 CLEAR ALIGNER IMPLANT-PROS LIST 5PX TO THE LEFT ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#clear-aligner .implant-pros,
#clear-aligner ul.implant-pros {
position: relative !important;
left: -5px !important;
}
}
/* ==========================================================================
DIRECTIVE: ADJUST TOP AND BOTTOM PADDING FOR DISCOMFORT BOX (.DISCOMFORT-CONTAINER)
========================================================================== */
/* PC ONLY: Adjust left and bottom inner padding for .discomfort-container grey box (0px Mobile Drift) */
@media screen and (min-width: 769px) {
.discomfort-container,
#conservation .discomfort-container {
padding-top: 40px !important;
padding-bottom: 35px !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
}
@media screen and (max-width: 768px) {
.discomfort-container {
padding-top: 30px !important;
padding-bottom: 20px !important;
}
}
/* ==========================================================================
DIRECTIVE: DISCOMFORT TITLE BADGE (ZIRCONIA & MAIN DISCOMFORT) FONT SIZE 19PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.discomfort-title-badge,
.discomfort-container .discomfort-title-badge {
font-size: 19px !important;
}
}
/* ==========================================================================
DIRECTIVE: REDUCE INTERNAL PADDING & GAP FOR ZIRCONIA ADVANTAGE CARDS (.ZIRCONIA-ADV-ITEM)
========================================================================== */
/* PC ONLY: Equalize inner padding & shift badges 2 and 4 DOWN by 13px for .zirconia-adv-item (0px Mobile Drift) */
@media screen and (min-width: 769px) {
.zirconia-adv-item {
padding: 20px 30px !important;
gap: 15px !important;
}
.zirconia-adv-item:nth-child(2) .discomfort-num,
.zirconia-adv-item:nth-child(4) .discomfort-num {
position: relative !important;
top: 0px !important; /* Shifted badges 2 and 4 DOWN by 13px on PC (-13px -> 0px) */
}
.zirconia-adv-item:nth-child(3) .discomfort-num {
position: relative !important;
top: 0px !important;
}
}
@media screen and (max-width: 768px) {
.zirconia-adv-item {
padding: 12px 10px !important;
gap: 10px !important;
}
.zirconia-adv-item:nth-child(2) .discomfort-num,
.zirconia-adv-item:nth-child(4) .discomfort-num {
position: relative !important;
top: -13px !important;
}
.zirconia-adv-item:nth-child(3) .discomfort-num {
position: relative !important;
top: 0px !important;
}
}
/* ==========================================================================
DIRECTIVE: BEFORE / AFTER LABELS (.ba-label) FONT SIZE 16PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
.ba-label,
.lbl-before,
.lbl-after {
font-size: 16px !important;
padding: 6px 0 !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT SECTION 7 TAB 3 (EMDOGAIN) IMPLANT-TARGET-BOX 15PX TO THE LEFT ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#con-3 .implant-target-box,
#conservation #con-3 .implant-target-box {
position: relative !important;
left: -15px !important;
top: -15px !important;
margin-top: 0 !important;
}
}
/* ==========================================================================
DIRECTIVE: WIDEN LETTER SPACING FOR PROCESS STEP TITLE BADGE ON MOBILE
@media screen and (max-width: 768px) {
.process-item .process-step,
.process-grid .process-step,
#conservation .process-item .process-step,
#implant .process-item .process-step {
font-size: 16px !important;
letter-spacing: 0 !important; /* Widened from -0.6px for breathable comfort */
white-space: nowrap !important;
padding-left: 2px !important;
padding-right: 2px !important;
}
}
/* ==========================================================================
DIRECTIVE: UNIFORM COLOR BOX HEIGHT ONLY FOR SECTION 7 TAB 3 (EMDOGAIN) PROCESS STEPS
========================================================================== */
#con-3 .process-item .process-step {
min-height: 58px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all !important;
line-height: 1.3 !important;
padding: 6px 4px !important;
}
@media screen and (max-width: 768px) {
#con-3 .process-item .process-step {
font-size: 16px !important;
letter-spacing: -0.5px !important;
min-height: 42px !important;
padding: 4px 2px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all !important;
line-height: 1.3 !important;
padding: 6px 4px !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 8 (#TMJ) 100% MOBILE RESPONSIVE LAYOUT & BUG FIXES
========================================================================== */
@media screen and (max-width: 768px) {
/* 1. Hero Banner: Reset -500px margin-left & center content */
#tmj .tmj-hero,
.tmj-hero {
min-height: auto !important;
padding: 40px 15px !important;
background-position: center !important;
}
#tmj .tmj-hero-content,
.tmj-hero-content {
margin-left: 0 !important; /* Fix off-screen text bug */
max-width: 100% !important;
text-align: center !important;
}
#tmj .tmj-badge,
.tmj-badge {
width: 100% !important;
max-width: 320px !important;
font-size: 15px !important;
padding: 10px 5px !important;
white-space: nowrap !important;
margin: 0 auto 15px !important;
display: block !important;
}
#tmj .tmj-hero-content h2,
.tmj-hero-content h2 {
font-size: 30px !important;
margin-top: 15px !important;
margin-bottom: 15px !important;
}
#tmj .tmj-hero-content p,
.tmj-hero-content p {
margin-top: 20px !important;
font-size: 15px !important;
line-height: 1.6 !important;
word-break: keep-all !important;
}
/* 2. Hide forced
tags in Section 8 info text */
#tmj .tmj-info-section p br:not(.m-br),
.tmj-info-section p br:not(.m-br) {
display: none !important;
}
#tmj .tmj-info-section p,
.tmj-info-section p {
font-size: 15px !important;
line-height: 1.65 !important;
word-break: keep-all !important;
}
#tmj .tmj-info-section h4,
.tmj-info-section h4 {
font-size: 22px !important;
line-height: 1.4 !important;
word-break: keep-all !important;
}
/* 3. Cause 5 Icons: 2 / 2 / 1 Equal-Width Pyramid Grid Layout */
#tmj .tmj-cause-icons,
.tmj-cause-icons {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 18px 8px !important;
padding: 0 !important;
margin-top: 25px !important;
}
/* All 5 items get equal width: 2 items per row, 5th item automatically centered on 3rd row */
#tmj .tc-icon-item,
.tc-icon-item {
width: calc(50% - 6px) !important;
max-width: 175px !important;
}
/* Remove Grey Box Background + Enlarge Image */
#tmj .tc-img,
.tc-img {
width: 100px !important;
height: 100px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin: 0 auto 4px !important;
}
#tmj .tc-img img,
.tc-img img {
width: 100% !important;
height: 100% !important;
object-fit: contain !important;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08)) !important;
}
#tmj .tc-title,
.tc-title {
font-size: 16px !important;
font-weight: 500 !important;
letter-spacing: -0.7px !important;
padding: 8px 4px !important;
border-radius: 30px !important;
background: #122b5e !important;
color: #ffffff !important;
white-space: nowrap !important;
text-align: center !important;
}
/* 4. Symptoms 6 Grid: Match Image 2 (레진치료 장점 ae-pro-item) layout while preserving outer margins */
#tmj .tmj-symp-grid,
.tmj-symp-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 0 !important;
margin-top: 25px !important;
}
#tmj .symp-item,
.symp-item {
display: flex !important;
align-items: center !important;
background: #f9f9f9 !important;
border-radius: 12px !important;
padding: 12px 20px !important; /* Reduced top/bottom padding to 12px */
font-size: 15px !important;
font-weight: 400 !important;
color: #111 !important;
line-height: 1.5 !important;
}
#tmj .symp-item .num-badge,
.symp-item .num-badge {
margin-right: 8px !important; /* Brought description text left by 7px */
transform: translateY(-3px) !important; /* Shifted badge UP 3px so right description text drops 3px down relative to badge */
flex-shrink: 0 !important;
}
/* 5. Diagnosis 3 Grid: 1-column responsive cards */
#tmj .tmj-diag-grid,
.tmj-diag-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 20px !important;
padding: 0 !important;
}
#tmj .diag-item,
.diag-item {
width: 100% !important;
}
#tmj .diag-img,
.diag-img {
height: 200px !important;
}
#tmj .diag-title,
.diag-title {
font-size: 17px !important;
padding: 10px 0 !important;
}
/* 6. Treatment Tab Hero & Badges */
#tmj .tmj-tab-hero,
.tmj-tab-hero {
height: 220px !important;
}
#tmj .tmj-tab-badge,
.tmj-tab-badge {
font-size: 17px !important;
padding: 8px 20px !important;
margin-bottom: 8px !important;
}
#tmj .tmj-tab-badge + p,
.tmj-tab-badge + p {
margin-top: 8px !important;
}
/* 7. Treatment Tab 3 Injection 3 Grid: 1-column responsive cards */
#tmj .tmj-injection-grid,
.tmj-injection-grid {
gap: 25px !important;
padding: 0 !important;
}
#tmj .tmj-injection-grid .injection-item,
.tmj-injection-grid .injection-item {
flex-direction: column !important;
text-align: center !important;
gap: 15px !important;
}
#tmj .tmj-injection-grid .injection-title,
.tmj-injection-grid .injection-title {
font-size: 18px !important;
}
#tmj .tmj-injection-grid .injection-content,
.tmj-injection-grid .injection-content {
width: 100% !important;
}
#tmj .tmj-injection-grid .injection-desc,
.tmj-injection-grid .injection-desc {
font-size: 15px !important;
line-height: 1.6 !important;
word-break: keep-all !important;
text-align: center !important;
padding: 0 5px !important;
width: 100% !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
DIRECTIVE: SHIFT SECTION 8 (#TMJ) UPWARD & REDUCE SIDE PADDING TO 5PX ON MOBILE
========================================================================== */
@media screen and (max-width: 768px) {
#tmj,
section#tmj {
padding-top: 15px !important; /* Shifted Section 9 UPWARD on mobile */
margin-top: -15px !important;
}
#tmj .container {
padding-left: 15px !important; /* Single 15px container padding matching Section 6 (#clear-aligner) */
padding-right: 15px !important;
}
#tmj .tmj-cause-icons,
#tmj .tmj-symp-grid,
#tmj .tmj-diag-grid,
#tmj .tmj-injection-grid,
#tmj .discomfort-container,
#tmj .tmj-info-section,
.tmj-info-section {
padding-left: 0 !important; /* Prevent double padding to align 100% with Section 6 */
padding-right: 0 !important;
}
#tmj .tmj-behavior-container,
.tmj-behavior-container {
padding-left: 15px !important;
padding-right: 15px !important;
box-sizing: border-box !important;
}
}
/* ==========================================================================
DIRECTIVE: SECTION 8 TMJ HERO (NO DIVIDERS + INDIVIDUAL ICON SCALING: MATCHUM +20% 38PX, NON-SURGERY -10% 29PX)
========================================================================== */
@media screen and (max-width: 768px) {
#tmj .tmj-hero,
.tmj-hero {
min-height: auto !important;
padding: 32px 0 32px 10px !important; /* Slightly reduced hero vertical size */
background-position: calc(62% + 30px) center !important; /* Woman image shifted 30px to the right */
background-size: cover !important;
opacity: 1 !important;
filter: none !important;
}
#tmj .tmj-hero-content,
.tmj-hero-content {
margin-left: 0 !important;
position: relative !important;
left: 0 !important;
transform: translateX(-65px) !important; /* Shifted 15px further to the left (-50px -> -65px) */
padding-top: 15px !important; /* Shifted entire content block DOWN slightly */
width: 100% !important;
max-width: 320px !important;
text-align: left !important;
padding-left: 0 !important;
}
#tmj .tmj-badge,
.tmj-badge {
width: auto !important;
max-width: 100% !important;
font-size: 15px !important;
padding: 4px 10px !important;
white-space: nowrap !important;
margin: 0 0 5px 0 !important;
display: inline-block !important;
text-align: left !important;
box-sizing: border-box !important;
}
#tmj .tmj-hero-content h2,
.tmj-hero-content h2 {
font-size: 28px !important;
white-space: nowrap !important;
margin-top: 0 !important;
margin-bottom: 8px !important;
text-align: left !important;
}
#tmj .tmj-hero-content p,
.tmj-hero-content p {
margin-top: 25px !important; /* Shifted DOWN by 15px */
font-size: 15px !important;
line-height: 1.55 !important;
word-break: keep-all !important;
text-align: left !important;
margin-bottom: 4px !important; /* Reduced bottom margin so list moves UP immediately below text */
max-width: 100% !important;
}
#tmj .tmj-hero-content p br {
display: inline !important;
}
#tmj .tmj-hero-list,
.tmj-hero-list {
display: flex !important;
flex-direction: column !important; /* 1-Column Vertical Pure List */
gap: 2px !important; /* Ultra-compact vertical spacing */
margin-top: 0px !important; /* Zero margin top - moved UP tight under text */
width: 100% !important;
max-width: 175px !important;
background: transparent !important; /* No background box */
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-shadow: none !important;
box-sizing: border-box !important;
position: relative !important;
left: -5px !important; /* Shifted 5px further to the left as requested */
}
#tmj .tmj-hero-list li,
.tmj-hero-list li {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
background: transparent !important;
border: none !important; /* NO horizontal divider lines */
padding: 0 !important;
font-size: 15px !important;
font-weight: 400 !important; /* Regular weight */
color: #222222 !important; /* Crisp Black Text */
box-shadow: none !important;
white-space: nowrap !important;
}
#tmj .chk-icon,
.chk-icon {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
background: transparent !important;
border-radius: 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
margin-right: 3px !important;
margin-bottom: 0 !important;
}
#tmj .chk-icon img,
.chk-icon img {
width: 32px !important; /* Standard 32px icon */
height: 32px !important;
object-fit: contain !important;
filter: brightness(0) saturate(100%) invert(14%) sepia(85%) saturate(1600%) hue-rotate(195deg) brightness(95%) contrast(98%) !important; /* Deep Navy #0d2b5b icon */
}
/* Individual Icon Custom Scaling */
#tmj .chk-icon img[alt="맞춤형 치료"],
.chk-icon img[alt="맞춤형 치료"] {
width: 42px !important; /* +10% further enlarged (42px) */
height: 42px !important;
}
#tmj .chk-icon img[alt="비수술 우선"],
.chk-icon img[alt="비수술 우선"] {
width: 29px !important; /* -10% reduced */
height: 29px !important;
}
/* Section 8 TMJ Behavior Section (상담 및 행동요법) Mobile 2x2 Grid Layout & 17px Button Font */
#tmj .tmj-behavior-section,
.tmj-behavior-section {
padding-top: 35px !important;
padding-bottom: 40px !important;
}
#tmj .tmj-behavior-title,
.tmj-behavior-title {
font-size: 22px !important;
margin-bottom: 12px !important;
}
#tmj .tmj-behavior-desc br:not(.m-br),
.tmj-behavior-desc br:not(.m-br) {
display: none !important;
}
#tmj .tmj-behavior-desc,
.tmj-behavior-desc {
font-size: 15px !important; /* Set description text size to 15px */
line-height: 1.55 !important;
margin-bottom: 22px !important;
word-break: keep-all !important;
}
#tmj .tmj-behavior-grid,
.tmj-behavior-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* 2x2 Grid Layout */
gap: 16px 6px !important;
width: calc(100% + 24px) !important; /* Expands grid further sideways */
max-width: calc(100% + 24px) !important;
margin-left: -12px !important; /* Reduces side margin specifically for attached 4-icon grid to ultra-thin 3px */
margin-right: -12px !important;
}
#tmj .tmj-behavior-item,
.tmj-behavior-item {
min-width: 0 !important;
width: 100% !important;
flex: none !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
align-items: center !important;
}
#tmj .tmj-behavior-img-wrap,
.tmj-behavior-img-wrap {
width: 100% !important;
max-width: 95px !important; /* Enlarged 3D icons to 95px matching tmj-cause section proportion */
margin-bottom: 8px !important;
}
#tmj .tmj-behavior-btn,
.tmj-behavior-btn {
font-size: 16px !important;
font-weight: 600 !important;
padding: 10px 0 !important;
width: 100% !important;
max-width: 100% !important;
border-radius: 30px !important;
text-align: center !important;
white-space: nowrap !important;
box-sizing: border-box !important;
}
/* Section 8 TMJ Consult Banner Mobile Responsive */
#tmj .tmj-consult-banner,
.tmj-consult-banner {
background-color: #0b2559 !important; /* Base navy color prevents white leakage at bottom */
background-position: 73% -20px !important; /* Shifted background image UP by another 10px to -20px */
background-size: 290% auto !important; /* Scaled up 2x to enlarge consultation elements clearly */
min-height: 400px !important;
}
#tmj .tmj-consult-banner > div:first-child,
.tmj-consult-banner > div:first-child {
/* Rich smooth navy gradient: starts gentle at top, darkens smoothly by 35%-50% to cover the white desk reflection seamlessly */
background: linear-gradient(to bottom, rgba(11, 37, 89, 0.35) 0%, rgba(11, 37, 89, 0.78) 35%, rgba(11, 37, 89, 0.94) 60%, rgba(11, 37, 89, 0.97) 100%) !important;
}
#tmj .tmj-consult-banner .container,
.tmj-consult-banner .container {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
min-height: 400px !important;
padding: 130px 20px 35px !important;
box-sizing: border-box !important;
}
#tmj .tmj-consult-banner .container > div,
.tmj-consult-banner .container > div {
margin-left: 0 !important; /* Resets desktop 400px margin overflow */
width: 100% !important;
max-width: 320px !important;
margin: 0 auto !important;
text-align: center !important;
}
#tmj .tmj-consult-banner h3,
.tmj-consult-banner h3 {
font-size: 22px !important;
line-height: 1.4 !important;
text-align: center !important;
margin-bottom: 20px !important;
}
#tmj .tmj-consult-banner a,
.tmj-consult-banner a {
font-size: 17px !important;
padding: 12px 0 !important;
}
/* ==========================================================================
MOBILE MASTER TREATMENT TAB SECTION (2x3 GRID) & SECTION VISIBILITY CONTROL
========================================================================== */
.mobile-only-section {
display: block !important;
padding-top: 0 !important;
margin-top: -65px !important; /* Shifted UP by 50px further (-15px -> -65px) */
padding-bottom: 20px !important;
background: #ffffff !important;
}
#mobile-treatment-section .container,
.mobile-only-section .container {
padding-left: 10px !important;
padding-right: 10px !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Master Treatment Section Header (32px / 18px) */
#mobile-treatment-section .section-subtitle {
font-size: 18px !important;
font-weight: 600 !important;
color: #dcb37b !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-align: center !important;
margin-bottom: 4px !important;
}
#mobile-treatment-section .section-title {
font-size: 32px !important;
font-weight: 800 !important;
line-height: 1.35 !important;
letter-spacing: -1px !important;
text-align: center !important;
color: #111111 !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
}
/* Individual Tab Treatment Section Headers (H3 Sub-level: 25px / 14px) */
#implant .section-subtitle,
#aesthetic .section-subtitle,
#clear-aligner .section-subtitle,
#conservation .section-subtitle,
#tmj .section-subtitle {
font-size: 14px !important;
font-weight: 600 !important;
color: #dcb37b !important;
letter-spacing: 1px !important;
text-transform: uppercase !important;
text-align: center !important;
margin-bottom: 2px !important;
}
#implant .section-title,
#aesthetic .section-title,
#clear-aligner .section-title,
#conservation .section-title,
#tmj .section-title {
font-size: 25px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
letter-spacing: -0.5px !important;
text-align: center !important;
color: #111111 !important;
margin-top: 0 !important;
margin-bottom: 15px !important;
}
.mobile-treatment-tabs-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 10px 12px !important;
width: 100% !important;
box-sizing: border-box !important;
margin-top: 15px !important;
margin-bottom: 25px !important;
}
.m-tab-btn {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 48px !important;
padding: 0 8px !important;
background: #ffffff !important;
border: none !important;
border-bottom: 1px solid #e2e8f0 !important; /* Subtle 1px grey bottom baseline */
border-radius: 0 !important;
font-size: 19px !important; /* Updated to 19px */
font-weight: 700 !important; /* Bold for Inactive */
color: #555555 !important; /* Updated to #555555 for Inactive */
cursor: pointer !important;
outline: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
white-space: nowrap !important;
overflow: hidden !important;
transition: color 0.25s ease, background-color 0.25s ease !important;
}
.m-tab-btn .m-tab-text {
position: relative !important;
z-index: 2 !important;
white-space: nowrap !important;
letter-spacing: -0.5px !important;
}
.m-tab-btn.active {
background: #ffffff !important;
border: none !important;
border-bottom: 1px solid #e2e8f0 !important;
border-radius: 0 !important;
color: #122b5e !important; /* Updated to #122b5e for Active */
font-weight: 800 !important; /* Extra Bold for Active */
box-shadow: none !important;
}
.m-tab-btn .tab-indicator {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 3px !important;
background-color: #122b5e !important; /* Updated to #122b5e for Active Bar */
border-radius: 0 !important;
width: 0% !important;
margin: 0 auto !important;
opacity: 0 !important;
z-index: 3 !important; /* Overlays directly on top of the 1px grey line */
transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.2s ease !important;
}
.m-tab-btn.active .tab-indicator {
width: 100% !important;
opacity: 1 !important;
}
.m-tab-empty {
background: transparent !important;
border: none !important;
pointer-events: none !important;
visibility: hidden !important;
}
/* Hiding Sections 4-8 on Mobile when not selected in Master Tab */
.m-treatment-hidden,
.m-treatment-section-hidden {
display: none !important;
}
.m-treatment-active,
.m-treatment-section-active {
display: block !important;
animation: mTabFadeIn 0.3s cubic-bezier(0.25, 1, 0.5, 1) !important;
}
}
@keyframes mTabFadeIn {
0% {
opacity: 0;
transform: translateY(6px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* ==========================================================================
FOOTER LEGAL BUTTONS & COMMON LAYER MODAL (이용약관 및 개인정보처리방침)
========================================================================== */
/* Footer Legal Buttons */
.footer-legal-btn {
background: transparent;
border: none;
padding: 0;
margin: 0;
color: #e5e5e5;
font-size: 16px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
}
.footer-legal-btn:hover,
.footer-legal-btn:focus-visible {
color: #ffffff;
opacity: 0.9;
outline: none;
}
/* Modal Backdrop Overlay */
.legal-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1);
outline: none;
}
.legal-modal-overlay.active {
opacity: 1;
visibility: visible;
}
/* Modal Card Box */
.legal-modal-card {
background-color: #ffffff;
border-radius: 14px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
width: 90%;
max-width: 760px;
max-height: 82vh;
display: flex;
flex-direction: column;
overflow: hidden;
transform: scale(0.94) translateY(12px);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
}
.legal-modal-overlay.active .legal-modal-card {
transform: scale(1) translateY(0);
}
/* Modal Header */
.legal-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 28px 18px;
border-bottom: 2px solid #122b5e;
background-color: #ffffff;
flex-shrink: 0;
}
.legal-modal-title {
margin: 0;
font-size: 22px;
font-weight: 700;
color: #122b5e;
letter-spacing: -0.5px;
}
.legal-modal-close-btn {
background: transparent;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #555555;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
padding: 0;
}
.legal-modal-close-btn:hover {
background-color: #f1f5f9;
color: #111111;
}
.legal-modal-close-btn:focus-visible {
outline: 2px solid #122b5e;
outline-offset: 2px;
}
/* Modal Body */
.legal-modal-body {
padding: 24px 28px;
overflow-y: auto;
flex: 1;
font-size: 15px;
line-height: 1.75;
color: #333333;
word-break: keep-all;
background-color: #ffffff;
}
/* Custom Scrollbar for Modal Body */
.legal-modal-body::-webkit-scrollbar {
width: 6px;
}
.legal-modal-body::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 4px;
}
.legal-modal-body::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
.legal-modal-body::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
/* Legal Content Typography */
.legal-content-section .legal-chapter-title {
color: #122b5e;
font-size: 19px;
font-weight: 700;
margin-top: 28px;
margin-bottom: 12px;
padding-bottom: 6px;
border-bottom: 1px solid #e2e8f0;
letter-spacing: -0.5px;
}
.legal-content-section .legal-chapter-title:first-child {
margin-top: 0;
}
.legal-content-section h4 {
color: #122b5e;
font-size: 17px;
font-weight: 700;
margin-top: 20px;
margin-bottom: 8px;
letter-spacing: -0.3px;
}
.legal-content-section h4:first-child {
margin-top: 0;
}
.legal-content-section p {
margin-top: 0;
margin-bottom: 12px;
color: #444444;
}
.legal-content-section ul {
margin: 0 0 14px 0;
padding-left: 20px;
color: #444444;
}
.legal-content-section ul li {
margin-bottom: 6px;
}
.legal-content-section .legal-intro {
font-size: 15px;
color: #ffffff;
background: #122b5e;
padding: 16px 20px;
border-radius: 8px;
border-left: none;
margin-bottom: 20px;
line-height: 1.6;
}
.legal-content-section .legal-contact-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px 18px;
margin-top: 10px;
margin-bottom: 14px;
}
.legal-content-section .legal-contact-box p {
margin-bottom: 4px;
font-size: 14px;
}
.legal-content-section .legal-contact-box p:last-child {
margin-bottom: 0;
}
.legal-content-section .legal-date {
margin-top: 24px;
margin-bottom: 0;
font-size: 14px;
color: #64748b;
font-weight: 500;
}
/* Modal Footer */
.legal-modal-footer {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 16px 28px 20px;
background-color: #ffffff;
border-top: 1px solid #f1f5f9;
flex-shrink: 0;
}
.legal-modal-confirm-btn {
background-color: #122b5e;
color: #ffffff;
border: none;
border-radius: 8px;
padding: 10px 28px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.legal-modal-confirm-btn:hover {
background-color: #0d1e44;
}
.legal-modal-confirm-btn:focus-visible {
outline: 2px solid #122b5e;
outline-offset: 2px;
}
/* Mobile Responsive Adjustments */
@media screen and (max-width: 768px) {
.legal-modal-card {
width: calc(100% - 32px);
max-width: calc(100% - 32px);
max-height: 85vh;
border-radius: 12px;
}
.legal-modal-header {
padding: 18px 20px 14px;
}
.legal-modal-title {
font-size: 19px;
}
.legal-modal-close-btn {
width: 44px;
height: 44px;
}
.legal-modal-body {
padding: 18px 20px;
font-size: 14px;
line-height: 1.65;
}
.legal-content-section h4 {
font-size: 16px;
margin-top: 16px;
}
.legal-modal-footer {
padding: 14px 20px 16px;
}
.legal-modal-confirm-btn {
width: 100%;
padding: 12px 0;
font-size: 15px;
}
}