@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;}

/* 디오임플란트 과정(STEP 목록)은 공통 파일로 옮김 → /css/wd_imp_info.css (.ii-steps) , /_inc/implant/info_steps.php */
/* ==========================================================================
   임플란트 종류 (sub312) — 반응형
   글자 크기: clamp(모바일, PC값/19.2 vw, PC값) — PC 시안 1920 / 모바일 시안 422 기준
   ========================================================================== */
.s312 {
	--blue:#1f4f9a;
	--sky:#5aaddf;
	font-family:"Noto Sans KR",sans-serif;
	color:#333;
	letter-spacing:-.03em;
	text-align:center;
}
.s312 *, .s312 *::before, .s312 *::after {box-sizing:border-box;word-break:keep-all;}
.s312 :where(h2,h3,p,ul,ol) {margin:0;padding:0;list-style:none;}
.s312 b {font-weight:700;color:#222;}
.s312 h2 {text-align:center;}
.pc {display:inline;}

.s312-eng {font-size:clamp(10px,1.04vw,20px);font-weight:300;letter-spacing:.45em;color:#fff;}
.s312-eng--gray {font-size:clamp(9px,.73vw,14px);letter-spacing:.3em;color:#999;}



/* 메인 · "화이트드림 임플란트 종류" · { } 문구 모양은 공통 파일로 옮김 → /css/wd_imp_info.css , /_inc/implant/info_hero.php */
/* ---------- 정품 재료 ---------- */
.s312-genuine__desc {margin-top:.6em !important;font-size:clamp(14px,1.35vw,26px);font-weight:300;line-height:1.45;color:#fff;}
.s312-genuine__desc b {color:#fff;}
.s312-genuine__list {display:flex;justify-content:center;gap:clamp(12px,1.8vw,35px);max-width:980px;margin:clamp(40px,6.8vw,130px) auto 0 !important;}
.s312-genuine__list li {flex:0 1 219px;}
.s312-genuine__list img {display:block;width:100% !important;}

/* ---------- 브랜드별 설명 ---------- */
.s312-brand {max-width:1260px;margin:0 auto;padding:clamp(56px,6vw,115px) 20px clamp(56px,5.2vw,100px);border-bottom:1px solid #e5e5e5;}
.s312-brand__top {display:flex;align-items:flex-start;gap:clamp(20px,3.3vw,64px);text-align:left;}
.s312-brand__img {flex:0 0 42%;width:42% !important;max-width:530px;}
.s312-brand__txt {flex:1;min-width:0;padding-top:clamp(0px,1.8vw,35px);}
.s312 .s312-brand__title {font-size:clamp(26px,2.4vw,46px);font-weight:300;line-height:1.3;color:#222;text-align:left;}
.s312-brand__title b {font-weight:700;color:#222;}
.s312-brand__title::after {content:"";display:block;width:100px;height:4px;margin:.9em 0 1.1em;border-radius:2px;background:linear-gradient(90deg,var(--blue),var(--sky));}
.s312-brand__txt p {font-size:clamp(13.5px,1.04vw,20px);font-weight:300;line-height:1.5;color:#444;}
.s312-brand__txt p + p {margin-top:1.3em !important;}

/* 특징 4개 (원 + 사선 구분) */
.s312-points {display:flex;justify-content:space-between;margin-top:clamp(36px,3.1vw,60px) !important;}
.s312-points li {position:relative;flex:0 0 22%;display:flex;flex-direction:column;align-items:center;justify-content:center;aspect-ratio:1;border:max(4px,.42vw) solid var(--sky);border-radius:50%;background:#fff;}
.s312-points li + li::before {content:"";position:absolute;left:-9.1%; /* 원 사이 간격(4%)의 가운데 */top:50%;width:1px;height:26%;background:#a8cbe6;transform:translate(-50%,-50%) rotate(30deg);}
.s312-points span {display:inline-block;margin-bottom:.35em;padding-bottom:.05em;border-bottom:2px solid var(--sky);font-size:clamp(17px,1.46vw,28px);font-weight:500;line-height:1;color:#2a85c7;}
.s312-points p {font-size:clamp(12px,.94vw,18px);font-weight:300;line-height:1.4;color:#444;}


/* ==========================================================================
   반응형
   ========================================================================== */
@media screen and (max-width:1024px) {
	.s312-points li {border-width:4px;}
	.s312-points li + li::before {display:none;}
}

@media screen and (max-width:860px) {
	.pc {display:none;}


	/* 정품 재료: 2 × 2 */
	.s312-genuine__list {flex-wrap:wrap;gap:16px 6%;max-width:360px;}
	.s312-genuine__list li {flex:0 0 47%;}

	/* 브랜드: 로고+이미지 위, 글 아래 */
	.s312-brand__top {flex-direction:column;}
	.s312-brand__img {flex:none;width:100% !important;max-width:420px;align-self:center;}
	.s312-brand__txt {padding-top:0;}

	/* 특징: 2 × 2 */
	.s312-points {flex-wrap:wrap;justify-content:center;gap:14px 6%;max-width:380px;margin-left:auto !important;margin-right:auto !important;}
	.s312-points li {flex:0 0 47%;border-width:3px;}

}