@charset "utf-8"; /* 서브타이틀 공통 */
.con-hd-outer { background: var(--main-color); padding: var(--typeB-space-r) var(--typeB-space-safe); overflow: hidden; } 

/* 바위치과의 특별함 ================ */
.con01 { background-color: #f7f7f7; } 
.special-li { display: flex; flex-direction: column; gap: var(--typeB-space-s); max-width: 1100px; margin: 0 auto; } 
.special-li li { padding: var(--typeB-space-s) var(--typeB-gap-xl); border-radius: 2rem; overflow: hidden; box-shadow: 2px 6px 12px rgba(0, 0, 0, 0.15); } 
.special-li .idx { display: inline-block; padding: var(--typeB-gap-sm) var(--typeB-gap-lg); background: var(--main-color); border-radius: 50em; margin-bottom: var(--typeB-gap-r); } 
.special-li h3 { margin-bottom: var(--typeB-gap-sm); } 
.special-li .li01 { background-image: url('/wp-content/uploads/2026/05/special01.webp'); } 
.special-li .li02 { background-image: url('/wp-content/uploads/2026/05/special02.webp'); } 
.special-li .li03 { background-image: url('/wp-content/uploads/2026/05/special03.webp'); } 
.special-li .li04 { background-image: url('/wp-content/uploads/2026/05/special04.webp'); } 
.special-li .li05 { background-image: url('/wp-content/uploads/2026/05/special05-1.webp'); } 
.con01-02 { background: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(230, 245, 255, 1) 100%); } 
.con01-02 h3 { padding-bottom: var(--typeB-gap-r); } 
.con01-02 .con-inner > p { padding-bottom: var(--typeB-space-r); } 
.con01-02 ul { justify-content: center; align-items: flex-start; gap: var(--typeB-space-s); } 
.con01-02 li { gap: var(--typeB-gap-sm); } 
.con01-02 .icon { max-width: 32px; margin: 0 auto; } 
.con01-02 .icon img { filter: brightness(0) saturate(100%) invert(15%) sepia(59%) saturate(3038%) hue-rotate(193deg) brightness(91%) contrast(102%); } 

.con01-03 { background-image: url('/wp-content/uploads/2026/05/go-to-blog.webp'); background-size: auto 100%; background-color: #fff; background-position: right center; } 
.con01-03 .con-inner { display: flex; flex-direction: column; gap: var(--typeB-gap-sm); } 
.c-btn { font-weight: 500; color: var(--white-color) !important; background: var(--main-color); align-self: flex-start; padding: 0.45em 0.9em 0.4em 1.2em; border-radius: 50em; font-size: 0.9em; } 
.c-btn:hover { background: var(--sub-color01); color: #232323; } 

/* 의료진 소개 ===================== */
.con02-01 { justify-content: center; gap: var(--typeB-space-xl); } 
.con02-01 .lf { width: 50%; gap: var(--typeB-gap-lg); } 
.con02-01 .lf h3 { } 
.con02-01 .rg { width: 50%; overflow: hidden; } 
.con02-01 .rg img { margin-bottom: -1em; max-width: 385px; width: 100%; } 

.con02-02 { background-image: url('/wp-content/uploads/2026/05/doc-intro-bg.jpg'); } 
.con02-02 .flx-col { gap: var(--typeB-gap-xl); } 
.con02-02 h3 { } 

/* 네비게이션 임플란트 ================== */
.con03-01 { background-image: url('/wp-content/uploads/2026/05/con03-01-bg.jpg'); } 
.con03-01 .p-tit { padding-bottom: var(--typeB-gap-xl); } 
.con03-01 .flx-row { gap: var(--typeB-gap-lg); } 
.con03-02 { background-color: #f2f9ff; } 
.con03-02 .con-inner { align-items: center; } 
.con03-02 .lf { width: 65%; gap: var(--typeB-gap-lg); padding-bottom: var(--typeB-gap-lg); } 
.con03-02 .rg { width: 45%; } 
.con03-01-sl { max-width: 563px; } 
.con03-01-sl .n2-ss-slide-limiter { max-width: 100% !important; } 
.con03-03 { background-color: #f5f0f4; } 
.con03-03 h3 { color: #d90800; padding-bottom: var(--typeB-gap-lg); } 
 .con03-03 .con-inner { align-items: center; } 
.con03-03 .con-inner > div { width: 50%; } 
.con03-03 .lf img { max-width: 408px; } 
.con03-03 ul { } 
.con03-03 li { display: flex; align-items: center; justify-content: flex-start; gap: var(--typeB-gap-sm); } 
.con03-03 ul .icon { display: inline-block; max-width: 16px; } 

.con03-04 .con-inner { gap: var(--typeB-gap-r); } 
.con03-04 p { padding-bottom: var(--typeB-gap-r); } 

/* 일반진료 ================== */
.con04-sub-tit { gap: var(--typeB-gap-lg); } 
.num-sl { overflow: hidden; width: 100%; } 
.num-sl .control-box { display: flex; align-items: center; gap: var(--typeB-gap-r); margin-bottom: var(--typeB-gap-xl); } 
.num-sl .control-box .nav-arrow { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--main-color); padding-bottom: 0.2em; border-radius: 50%; font-size: 1.3em; color: var(--main-color); cursor: pointer; transition: 0.3s; } 
.num-sl .control-box .nav-arrow:hover { background-color: var(--main-color); color: var(--white-color); } 
.num-sl .control-box .page-nums { display: flex; align-items: center; gap: var(--typeB-gap-r); } 
.num-sl .control-box .page-nums span { opacity: 0.4; } 
.num-sl .control-box .page-nums span.is-active { opacity: 1; } 
.num-sl .con { gap: var(--typeB-space-r); } 
.num-sl .lf { width: 50%; max-width: 540px; } 

.num-sl .rg { flex: auto; display: flex; flex-direction: column; justify-content: center; } 
.num-sl .rg .sub-txt { display: flex; align-items: center; justify-content: flex-start; gap: var(--typeB-gap-sm); padding-bottom: var(--typeB-gap-sm); } 
.num-sl .slide-texts .slide-text { display: none; } 
.num-sl .slide-texts .slide-text.active { display: block; } 
.num-sl .rg .badge { background: var(--main-color); color: var(--white-color); font-size: 0.76em; padding: 0.3em 0.75em 0.2em; border-radius: 50em; } 
.num-sl .rg .desc { } 

/* qna 공통 */

 .one-qna-li { margin-top: var(--typeB-gap-xl); width: 100%; list-style: none; display: flex; flex-direction: column; gap: var(--typeB-gap-r); /* 아이템 간 간격 */ } 
 
 .qna-li { overflow: hidden; border-radius: 8px; /* 개별 카드 형태 */ } 
 
 .qna-question { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--typeB-gap-lg); padding: var(--typeB-gap-lg) var(--typeB-gap-xl); background-color: var(--main-color); cursor: pointer; user-select: none; transition: background-color 0.25s ease; } 
 .qna-question:hover { background-color: #002d57; } 
 .qna-li.active .qna-question { background-color: #002050; } 
 
 .qna-question-text { display: flex; flex-direction: row; align-items: center; gap: var(--typeB-gap-r); color: var(--white-color); font-size: var(--typeB-body); /* --typeB-body */

 line-height: var(--typeB-lh-r); letter-spacing: -0.02em; word-break: keep-all; } 
 
 .qna-num { white-space: nowrap; flex-shrink: 0; } 
.qna-arrow { flex-shrink: 0; width: 28px; height: 28px; position: relative; display: flex; align-items: center; justify-content: center; transform: rotate(0deg); transform-origin: center center; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } 
 .qna-arrow::before,
 .qna-arrow::after { content: ''; position: absolute; width: 11px; height: 2px; background: var(--white-color); border-radius: 2px; top: 39%; } 
 .qna-arrow::before { left: 3px; transform: translateY(-50%) rotate(-45deg); transform-origin: right center; } 
 .qna-arrow::after { right: 3px; transform: translateY(-50%) rotate(45deg); transform-origin: left center; } 
 .qna-li.active .qna-arrow { transform: rotate(180deg); } 
 
 .qna-answer-wrap { max-height: 0; overflow: hidden; opacity: 0; transition:
 max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
 opacity 0.35s ease; } 
 .qna-li.active .qna-answer-wrap { max-height: 800px; opacity: 1; } 
 
 .qna-answer { color: var(--typeB-txt-color); font-size: var(--typeB-body); line-height: var(--typeB-lh-r); font-weight: 400; letter-spacing: -0.02em; word-break: keep-all; background-color: var(--sub-color02); padding: var(--typeB-gap-xl) var(--typeB-gap-xl) var(--typeB-gap-xl) calc(var(--typeB-gap-xl) + var(--typeB-gap-r) + 2.5em); border-top: 1px solid var(--sub-color01); } 
 
/* 충치치료 */
.con04-0101 { background-image: url('/wp-content/uploads/2026/05/con04-0101-bg.jpg'); } 
.con04-0102 { background-color: #f7f7f7; gap: var(--typeB-space-s); } 
.cavity-sl .swiper-slide { background-color: #f2f9ff; } 
.con04-0102 .flx-row { align-items: center; } 
.con04-0102 .lf { width: 65%; gap: var(--typeB-gap-lg); } 
.con04-0102 .rg { width : 45%; } 
.con04-0102 .rg img { max-width: 507px; } 
.con04-0103 { background-color: #f2f9ff; } 
.con04-0103 .con-inner { gap: var(--typeB-gap-lg); } 
.cavity-sl { margin-top: var(--typeB-gap-sm); } 

/* 신경치료 */
.con04-0201 { background-image: url('/wp-content/uploads/2026/05/con04-0201-bg.jpg'); } 
.con04-0202 { background-color: #f2f9ff; } 
.con04-0202 h3 { padding-bottom: var(--typeB-gap-xl); } 
.con04-0202 .desc { justify-content: center; gap: var(--typeB-gap-lg); } 
.con04-0202 .desc li { gap: var(--typeB-gap-r); background: #fff; padding: var(--typeB-gap-lg); border-radius: 1rem; border: 1px solid var(--typeB-txt-color); width: 33%; } 
.con04-0202 .desc .idx { color: #f2f4f6; font-size: 5em; line-height: 1em; } 

.con04-0202 .desc .txt { padding-bottom: var(--typeB-gap-lg); } 
/* 치주치료 */
.con04-0301 { background-image: url('/wp-content/uploads/2026/05/con04-0301-bg.jpg'); } 

.con04-0302 { background-color: #fbfbfb; } 
.con04-0302 .flx-row { } 
.con04-0302 .lf { width: 35%; } 
.con04-0302 .rg { flex: auto; } 
.con04-0302 .rg ul { display: flex; flex-direction: column; gap: var(--typeB-gap-lg); } 
.con04-0302 .rg li { background: #eef7ff; border-radius: 1rem; padding: var(--typeB-gap-lg); } 
.con04-0302 .rg li p:last-child { padding-left: 1.6em; } 
.con04-0302 .rg li.on { background: var(--main-color); color: var(--white-color); } 
.con04-0302 .rg li .p-tit { display: flex; align-items: center; justify-content: flex-start; gap: var(--typeB-gap-sm); } 
.con04-0302 .rg li .p-tit img { max-width: 0.85em; filter: brightness(0) saturate(100%) invert(15%) sepia(98%) saturate(1419%) hue-rotate(189deg) brightness(100%) contrast(102%); } 
.con04-0302 .rg li.on .p-tit img { filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7463%) hue-rotate(173deg) brightness(109%) contrast(95%); } 


/* =============================================
 태블릿 이하 (≤ 1024px)
 ============================================= */
@media all and (max-width: 1024px) { /* qna 공통 */
 .qna-answer { /* 태블릿: 좌 인덴트 완화 */
 padding-left: calc(var(--typeB-gap-xl) + 2em); } 
 }

/* =============================================
 모바일 (≤ 639px)
 ============================================= */
@media all and (max-width: 639px){
 .qna-arrow { width: 22px; height: 22px; } 
 .qna-arrow::before,
 .qna-arrow::after { width: 9px; } 
 
 /* 모바일: 좌 인덴트 제거 — 너비가 좁아 가독성 우선 */
 .qna-answer { padding-left: var(--typeB-gap-xl); } 
 }