@charset "utf-8";

/* 내용관리 */
#ctt {margin:0;padding:0;background:#fff}
.ctt_admin {text-align:right; width: 1400px; margin: 0 auto}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:0;text-align:center;font-family:"Noto Sans KR",sans-serif;}
#ctt_con img {max-width:100%;height:auto;}

/* ==========================================================================
   충치치료 (sub511) — 반응형
   메인·제목·STEP 목록의 공통 모양은 /css/wd_imp_info.css (sub312 · sub318 과 공유)
   기존 페이지 이미지(1900px) 기준 크기를 clamp(모바일, PC/19 vw, PC) 로 이었다.
   ========================================================================== */
.s511 {--navy:#1d3a6e;--sky:#4dbfe8;font-family:"Noto Sans KR",sans-serif;color:#333;letter-spacing:-.03em;}
.s511 *, .s511 *::before, .s511 *::after {box-sizing:border-box;word-break:keep-all;}
.s511 :where(h2,h3,p) {margin:0;padding:0;}


/* 섹션 소제목은 공통 .ii-subtitle (/css/wd_imp_info.css) */
/* ---------- 충치치료 시기 ---------- */
.s511-when {padding:clamp(60px,6.8vw,130px) 20px clamp(60px,5.2vw,100px);background:#f3f5f8 no-repeat center / cover;}
.s511-when__in {display:flex;align-items:center;justify-content:center;gap:clamp(24px,3.2vw,60px);max-width:1160px;margin:clamp(30px,2.6vw,50px) auto 0;text-align:left;}
.s511-when__txt {flex:0 1 580px;}
.s511 .s511-when__q {display:flex;align-items:center;gap:.4em;font-size:clamp(19px,1.72vw,33px);font-weight:300;color:#222;text-align:left;}
.s511-when__q span {padding:.02em .55em .12em;border-radius:2em;background:var(--navy);font-size:.9em;font-weight:500;color:#fff;}
.s511-when__q b {font-weight:700;color:var(--navy);}
.s511-when__point {margin-top:1.1em !important;font-size:clamp(16px,1.35vw,26px);line-height:1.35;color:var(--sky);}
.s511-when__point u {text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px;}
.s511-when__point b {font-weight:700;}
.s511-when__p {margin-top:.9em !important;font-size:clamp(13.5px,1.04vw,20px);font-weight:300;line-height:1.7;color:#444;}
.s511-when__p + .s511-when__point {margin-top:2em !important;}
.s511-when__img {flex:0 1 523px;width:45% !important;max-width:523px;height:auto;align-self:center;}

@media screen and (max-width:860px) {
	.s511-when__in {flex-direction:column;}
	.s511-when__txt {flex:none;}
	/* 세로로 쌓이면 flex 기준값(523px)이 '높이'로 적용돼 비율이 깨지므로 해제 */
	.s511-when__img {flex:none;width:min(80%,420px) !important;height:auto !important;}
	.s511 .pc {display:none;}
}