/* ==========================================================
   dbmanager.kr 서브페이지 공통 스타일 (반응형 단일본)
   브랜드: #171767(네이비) / #5a5aaf / #b9b9ff / Noto Sans KR
   ========================================================== */

/* 로고 자산이 2배 해상도(480x122)로 교체됨 — 표시 크기를 고정해 레티나에서 선명하게 */
.Top .con_box .t_logo img { width: 240px; height: auto; }
.popup_01 .info_box .left_ib .logo img { width: 100%; height: auto; }

/* GNB 메뉴 증가 대응 (홈 포함 공통) — 로고 22% + 메뉴 78% 로 한 줄 유지 */
.Top .con_box .t_logo { width: 22%; }
.Top .con_box .t_menu { width: 78%; }
.Top .con_box .t_menu > ul > li { margin: 0 13px; }
.Top .con_box .t_menu > ul > li > a { font-size: 17px; }

/* 핵심: 이 사이트는 모든 섹션(.commonBox)이 float:left 라 일반 흐름이 비어 있음.
   신규 in-flow 섹션은 clear:both 로 float 아래에 배치해야 함 (없으면 페이지 상단을 덮어버림) */
.guideSection, .subVisual, .crumb, .subPage { clear: both; }

/* 시각적 숨김 h1 (홈 전용 — 검색엔진·스크린리더용) */
.blindH1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; }

/* ---------- 서브페이지 골격 ---------- */
.subVisual { background: linear-gradient(135deg, #171767 0%, #5a5aaf 100%); padding: 64px 20px 56px; text-align: center; }
.subVisual .sv_cat { display: inline-block; color: #b9b9ff; font-size: 15px; font-weight: 500; letter-spacing: 0; margin-bottom: 14px; }
.subVisual h1 { color: #fff; font-size: 34px; line-height: 1.35; font-weight: 700; max-width: 860px; margin: 0 auto; word-break: keep-all; }
.subVisual .sv_sub { color: #d9d9ff; font-size: 17px; margin-top: 16px; word-break: keep-all; }

.crumb { max-width: 960px; margin: 0 auto; padding: 16px 20px 0; font-size: 13px; color: #888; }
.crumb a { color: #888; }
.crumb a:hover { color: #171767; }
.crumb span { margin: 0 6px; color: #bbb; }

.subPage { max-width: 960px; margin: 0 auto; padding: 28px 20px 70px; }
.subPage h2 { font-size: 25px; color: #171767; margin: 46px 0 16px; line-height: 1.4; word-break: keep-all; }
.subPage h2:first-child { margin-top: 10px; }
.subPage h3 { font-size: 20px; color: #333; margin: 30px 0 12px; word-break: keep-all; }
.subPage p { font-size: 16px; line-height: 1.8; color: #444; margin: 0 0 16px; word-break: keep-all; }
.subPage ul.dot { margin: 0 0 18px 4px; }
.subPage ul.dot li { font-size: 16px; line-height: 1.75; color: #444; padding-left: 18px; margin-bottom: 6px; word-break: keep-all; }
.subPage ul.dot li:before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #5a5aaf; position: absolute; left: 2px; top: 11px; }
.subPage .lead { font-size: 17px; color: #333; }
.subPage .artImg { display: block; max-width: 620px; width: 100%; margin: 26px auto; border-radius: 14px; box-shadow: 0 4px 18px rgba(23,23,103,.10); }
.subPage .quoteBox { background: #f9f9ff; border-left: 4px solid #5a5aaf; padding: 18px 20px; border-radius: 0 10px 10px 0; margin: 0 0 18px; }
.subPage .quoteBox p { margin: 0; color: #333; }

/* 비교(전/후) 박스 */
.vsWrap { display: flex; gap: 16px; margin: 0 0 20px; }
.vsWrap .vs { flex: 1; border-radius: 12px; padding: 18px 20px; }
.vsWrap .vs .vs_t { font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.vsWrap .vs p { margin: 0; font-size: 15px; }
.vsWrap .bad { background: #f7f7f7; border: 1px solid #e1e1e1; }
.vsWrap .bad .vs_t { color: #888; }
.vsWrap .good { background: #f0f0ff; border: 1px solid #b9b9ff; }
.vsWrap .good .vs_t { color: #171767; }

/* CTA 박스 */
.ctaBox { background: #171767; border-radius: 16px; text-align: center; padding: 42px 24px; margin: 54px 0 0; }
.ctaBox .cta_t { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 10px; word-break: keep-all; }
.ctaBox .cta_s { color: #c9c9f5; font-size: 15px; margin-bottom: 24px; word-break: keep-all; }
.ctaBox .cta_btns a { display: inline-block; margin: 6px 8px; padding: 13px 30px; border-radius: 30px; font-size: 16px; font-weight: 700; cursor: pointer; }
.ctaBox .cta_btns .b1 { background: #fff; color: #171767; }
.ctaBox .cta_btns .b2 { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.45); }
.ctaBox .cta_tel { margin-top: 16px; color: #b9b9ff; font-size: 14px; }
.ctaBox .cta_tel b { color: #fff; font-size: 17px; }

/* 카드 그리드 (칼럼 목록/기능) */
.cardGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 26px 0 10px; }
.cardGrid .card { border: 1px solid #e7e7f2; border-radius: 14px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .2s; display: block; }
.cardGrid .card:hover { box-shadow: 0 10px 26px rgba(23,23,103,.13); transform: translateY(-3px); }
.cardGrid .card img { width: 100%; display: block; }
.cardGrid .card .c_body { padding: 18px 18px 22px; }
.cardGrid .card .c_cat { font-size: 12px; color: #5a5aaf; font-weight: 700; margin-bottom: 8px; }
.cardGrid .card .c_tit { font-size: 17px; font-weight: 700; color: #222; line-height: 1.45; margin-bottom: 10px; word-break: keep-all; }
.cardGrid .card .c_txt { font-size: 14px; color: #777; line-height: 1.6; word-break: keep-all; }

/* 기능 그리드 */
.featGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 22px 0 8px; }
.featGrid .feat { border: 1px solid #e7e7f2; border-radius: 14px; padding: 24px 24px 20px; background: #fff; }
.featGrid .feat .f_no { font-size: 13px; font-weight: 700; color: #b9b9ff; margin-bottom: 6px; }
.featGrid .feat h3 { margin: 0 0 10px; font-size: 19px; color: #171767; }
.featGrid .feat ul li { font-size: 14.5px; color: #555; line-height: 1.65; padding-left: 14px; margin-bottom: 5px; word-break: keep-all; }
.featGrid .feat ul li:before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #b9b9ff; position: absolute; left: 0; top: 10px; }

/* 표 */
.tableWrap { overflow-x: auto; margin: 0 0 20px; }
.tableWrap table { width: 100%; border-collapse: collapse; min-width: 520px; }
.tableWrap th { background: #171767; color: #fff; font-size: 15px; padding: 13px 14px; font-weight: 500; }
.tableWrap td { border-bottom: 1px solid #e7e7f2; font-size: 15px; color: #444; padding: 13px 14px; text-align: center; word-break: keep-all; }
.tableWrap tr td:first-child { font-weight: 700; color: #171767; }

/* 스텝(도입 절차) */
.stepList { counter-reset: step; margin: 24px 0 8px; }
.stepList .step { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid #f0f0f5; }
.stepList .step .s_no { flex: 0 0 40px; height: 40px; border-radius: 50%; background: #f0f0ff; color: #171767; font-weight: 700; text-align: center; line-height: 40px; }
.stepList .step .s_body b { display: block; font-size: 16.5px; color: #222; margin-bottom: 4px; }
.stepList .step .s_body p { margin: 0; font-size: 14.5px; color: #777; }

/* 후기 그리드 */
.revGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 22px 0 8px; }
.revGrid .rev { background: #f9f9ff; border-radius: 14px; padding: 22px; }
.revGrid .rev p { margin: 0 0 12px; font-size: 15px; color: #444; }
.revGrid .rev .r_tag { font-size: 13px; color: #5a5aaf; font-weight: 700; }

/* FAQ 페이지 */
.faqNav { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 10px; }
.faqNav a { display: inline-block; padding: 9px 16px; border: 1px solid #e7e7f2; border-radius: 30px; font-size: 14.5px; color: #444; background: #fff; }
.faqNav a:hover { border-color: #171767; color: #171767; }
.faqNav a span { color: #b9b9ff; font-weight: 700; margin-left: 4px; }
.faqItem { border-bottom: 1px solid #f0f0f5; padding: 22px 0; }
.faqItem:last-child { border-bottom: 0; }
.faqQ { font-size: 18px; color: #171767; margin: 0 0 10px; padding-left: 26px; line-height: 1.5; word-break: keep-all; }
.faqQ:before { content: "Q"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: #171767; color: #fff; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }
.faqA { font-size: 15.5px; line-height: 1.85; color: #555; padding-left: 26px; word-break: keep-all; }
.faqA:before { content: "A"; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: #ebebf7; color: #5a5aaf; font-size: 12px; font-weight: 700; text-align: center; line-height: 20px; }

/* 홈 칼럼 섹션 */
.guideSection { padding: 70px 20px; background: #fafafa; }
.guideSection .gs_inner { max-width: 1140px; margin: 0 auto; }
.guideSection h2 { text-align: center; font-size: 30px; color: #171767; margin-bottom: 8px; }
.guideSection .gs_sub { text-align: center; font-size: 16px; color: #888; margin-bottom: 34px; }
.guideSection .cardGrid { grid-template-columns: repeat(3, 1fr); }
.guideSection .gs_more { text-align: center; margin-top: 30px; }
.guideSection .gs_more a { display: inline-block; padding: 12px 34px; border: 1px solid #171767; color: #171767; border-radius: 30px; font-weight: 700; }
.guideSection .gs_more a:hover { background: #171767; color: #fff; }

/* ==========================================================
   반응형 — 서브페이지 전용 (html.resp)
   홈(/)은 본문이 1200px 고정 디자인이고 모바일 UA는 /m/ 로 리다이렉트되므로
   반응형 규칙을 적용하지 않고 원본 고정폭 동작을 그대로 유지한다.
   ========================================================== */

/* ~1200px : 고정폭 골격을 유동폭으로 (불필요한 가로 스크롤 제거) */
@media (max-width: 1200px) {
	.resp, .resp body { min-width: 0; }
	.resp .commonBox { min-width: 0; }
	.resp .commonBox > div { width: 100%; padding: 0 16px; }
	/* 로고는 고정폭 컨테이너로 (퍼센트면 좁은 폭에서 이미지가 컨테이너를 넘침) */
	.resp .Top .con_box .t_logo { width: 210px; }
	.resp .Top .con_box .t_logo img { width: 195px; }
	.resp .Top .con_box .t_menu { width: calc(100% - 210px); }
	.resp .Top .con_box .t_menu > ul > li { margin: 0 10px; }
	.resp .Top .con_box .t_menu > ul > li > a { font-size: 15.5px; }
}

/* ~980px : 카드 2열 */
@media (max-width: 980px) {
	.resp .cardGrid { grid-template-columns: repeat(2, 1fr); }
}

/* ~860px : 헤더 스택(로고 위 / 메뉴 아래 줄바꿈), 푸터 세로 쌓기 */
@media (max-width: 860px) {
	.resp .Top .con_box { display: block; }
	.resp .Top .con_box .t_logo { width: 100%; text-align: center; padding: 6px 0 0; }
	.resp .Top .con_box .t_logo img { width: 190px; float: none; }
	/* 가로스크롤로 감추면 '상담 및 체험문의'·FAQ 가 화면 밖에 남는다 → 줄바꿈으로 전 항목 노출 */
	.resp .Top .con_box .t_menu { width: 100%; overflow: visible; }
	.resp .Top .con_box .t_menu > ul { float: none; display: flex; flex-wrap: wrap; justify-content: center; width: auto; margin: 0 auto; }
	.resp .Top .con_box .t_menu > ul > li { float: none; line-height: 40px; margin: 0 11px; white-space: nowrap; }
	.resp .Top .con_box .t_menu > ul > li > a { font-size: 15px; }

	.resp .footer .left, .resp .footer .right { width: 100%; }
	.resp .footer .right { margin-top: 14px; }
	.resp .footer .right > li > select { width: 100%; max-width: 275px; }
}

/* ~760px : 본문 타이포·그리드 축소 */
@media (max-width: 760px) {
	.resp .subVisual { padding: 44px 16px 38px; }
	.resp .subVisual h1 { font-size: 24px; }
	.resp .subVisual .sv_sub { font-size: 15px; }
	.resp .subPage h2 { font-size: 21px; }
	.resp .subPage h3 { font-size: 18px; }
	.resp .subPage p, .resp .subPage ul.dot li { font-size: 15px; }
	.resp .vsWrap { display: block; }
	.resp .vsWrap .vs { margin-bottom: 12px; }
	.resp .cardGrid, .resp .featGrid, .resp .revGrid { grid-template-columns: 1fr; }
	.resp .ctaBox .cta_t { font-size: 20px; }
	.resp .faqQ { font-size: 17px; }
	.resp .faqA { font-size: 15px; }
}

/* ==========================================================
   홈(/) 반응형 — 루트 단일 URL 통합 (html.resp)
   PC(1200px 초과)는 원본 고정폭 레이아웃 그대로, 이하에서만 재배치
   ========================================================== */
@media (max-width: 1200px) {
	/* 히어로 슬라이더 — 2000px 원본 이미지를 컨테이너에 맞춤 */
	.resp .main_visual .bg_img { height: 52vw; max-height: 700px; }
	.resp .main_visual .bg_img > img { width: 100%; height: 100%; object-fit: cover; }
	.resp .main_visual .con_txt { top: 14%; padding: 0 18px; }
	.resp .main_visual .con_txt > ul > li.tt,
	.resp .main_visual .con_txt > ul > li.tt > span { font-size: 4.4vw; line-height: 1.28; }
	.resp .main_visual .con_txt > ul > li.ts { font-size: 1.9vw; line-height: 1.5; margin-top: 2vw; }
	.resp .main_visual .con_txt > ul > li.tl > span { height: 6vw; }
	.resp .main_visual .con_txt > ul > li.tl { margin: 1.4vw 0; }

	/* sub_01 — 아이콘 원 + 특징 슬라이드 */
	.resp .sub_01 .icon_circle > div { width: 100%; max-width: 696px; height: auto; }
	.resp .sub_01 .slide_box > div { width: 100%; margin-left: 0; }
	.resp .sub_01 .slide_box .sb_img img { width: 100%; height: auto; }

	/* sub_05 — 탭 캐러셀 오프셋을 px → % 로 전환 */
	.resp .sub_05 .tap_box { width: 100%; }
	.resp .sub_05 .tap_box .con_txt > div { padding: 30px 24px; }
	.resp .sub_05 .tap_box .con_txt > div > div { width: 300%; }
	.resp .sub_05 .tap_box .con_txt > div > div > div { width: 33.3333%; margin-right: 0; padding-right: 24px; }
	.resp .sub_05 .tap_box .con_txt > div > div.con_auth1 { margin-left: 0; }
	.resp .sub_05 .tap_box .con_txt > div > div.con_auth2 { margin-left: -100%; }
	.resp .sub_05 .tap_box .con_txt > div > div.con_auth3 { margin-left: -200%; }

	/* sub_04 — 고정 마진 제거 */
	.resp .sub_04 .circle_box > div > div > .icon_img { margin: 0 auto; }
	.resp .sub_04 .circle_box > .line { display: none; }

	/* 공통 이미지 안전장치 */
	.resp .sub_box img { max-width: 100%; }
}

@media (max-width: 980px) {
	.resp .sub_03 .spci_box > ul { width: 46%; margin: 0 2% 18px; }
	.resp .sub_04 .circle_box > div > div { width: 50%; margin-bottom: 26px; }
	.resp .sub_06 .circleI_box > ul { width: 50%; margin-bottom: 26px; }
	.resp .sub_07 .circleR_box > ul { width: 46%; margin: 0 2% 18px; }
}

@media (max-width: 760px) {
	/* 히어로 — vw 기반이 너무 작아지지 않도록 하한 고정 */
	.resp .main_visual .bg_img { height: 420px; }
	.resp .main_visual .con_txt { top: 90px; }
	.resp .main_visual .con_txt > ul > li.tt,
	.resp .main_visual .con_txt > ul > li.tt > span { font-size: 23px; line-height: 1.35; }
	.resp .main_visual .con_txt > ul > li.ts { font-size: 13.5px; margin-top: 14px; }
	.resp .main_visual .con_txt > ul > li.tl > span { height: 34px; }

	/* 특징 슬라이드 — 이미지/텍스트 세로 스택 */
	.resp .sub_01 .slide_box .sb_img,
	.resp .sub_01 .slide_box .sb_txt { width: 100%; }
	.resp .sub_01 .slide_box .sb_txt { padding: 22px 18px; }
	.resp .sub_01 .icon_circle > div > ul { width: 25%; margin: 0 0 10px; }

	/* 그리드 전부 1열 */
	.resp .sub_03 .spci_box > ul,
	.resp .sub_04 .circle_box > div > div,
	.resp .sub_06 .circleI_box > ul,
	.resp .sub_07 .circleR_box > ul { width: 100%; margin: 0 0 16px; }
	.resp .sub_02 .con_box > ul > li.tl > span { max-width: 70%; }

	/* 탭 메뉴·본문 여백 축소 */
	.resp .sub_05 .tap_box .con_txt > div { padding: 22px 16px; }
	.resp .sub_09 .rev_slide { padding: 0 10px 30px; }
}

/* --- 홈 반응형 보정 (측정 기반) --- */
@media (max-width: 1200px) {
	/* 탭 캐러셀 트랙이 페이지를 넓히지 않도록 클리핑 */
	.resp .sub_05 .tap_box .con_txt > div { overflow: hidden; }
	/* 후기 슬라이더 화살표가 화면 밖으로 나가지 않도록 */
	.resp .sub_09 .rev_slide { padding-left: 34px; padding-right: 34px; }
	.resp .sub_09 .rev_slide > .arrow > li.left  { left: -26px; }
	.resp .sub_09 .rev_slide > .arrow > li.right { right: -26px; }
	.resp .sub_09 .rev_slide .slick-slide { height: auto; }
}
@media (max-width: 620px) {
	.resp .sub_09 .rev_slide { padding-left: 26px; padding-right: 26px; }
	/* slick 이 슬라이드 폭을 인라인으로 계산하므로 width 는 건드리지 않는다 */
	.resp .sub_09 .rev_slide .rev_box { height: auto; }
	.resp .sub_09 .rev_slide .rev_box .it_box { height: auto; min-height: 300px; }
}

/* --- 홈 반응형 보정 2차 (측정 기반) --- */
@media (max-width: 1200px) {
	/* sub_01: 슬라이드가 1000px 고정이라 트랙(1000%)과 어긋남 → 트랙의 10% 로 */
	.resp .sub_01 .slide_box > div > div > div { width: 10%; }
}
@media (max-width: 760px) {
	/* sub_05: 라벨 25% 가 60px 로 눌려 글자가 세로로 쪼개짐 → 라벨/본문 세로 배치 */
	.resp .sub_05 .tap_box .con_txt > div > div > div > ul > li:first-child {
		width: auto; max-width: 100%; padding: 4px 16px; white-space: nowrap;
	}
	.resp .sub_05 .tap_box .con_txt > div > div > div > ul > li:last-child {
		width: 100%; padding-left: 0; margin-top: 7px;
	}
	.resp .sub_05 .tap_box .con_txt > div > div > div > ul { margin-bottom: 26px; }
}

/* --- 홈 반응형 보정 3차 --- */
@media (max-width: 760px) {
	/* sub_01 슬라이드 화살표: 세로 스택 후 본문을 가리지 않도록 축소·상단 배치 */
	.resp .sub_01 .slide_box > .arrow > li { bottom: auto; top: 70px; }
	.resp .sub_01 .slide_box > .arrow > li > i { font-size: 38px; }
	.resp .sub_01 .slide_box > .arrow > li.left  { left: 2px; }
	.resp .sub_01 .slide_box > .arrow > li.right { right: 2px; }
}

/* --- 홈 반응형 보정 4차: sub_01 이미지 li 폭 --- */
@media (max-width: 1200px) {
	.resp .sub_01 .slide_box .sb_img > li { width: 100%; float: none; }
	.resp .sub_01 .slide_box .sb_img img { width: 100%; height: auto; display: block; }
}

/* --- 홈 반응형 보정 5차: 푸터 셀렉트 넘침(1024px대) --- */
@media (max-width: 1200px) {
	.resp .footer .right > li > select { width: 100%; max-width: 275px; }
}

/* ==========================================================================
   [2026-09-02 2차] 홈 레거시 섹션 모바일 붕괴 수정
   1차에서 sub_01 슬라이드·sub_05·sub_09 만 손봤고 나머지를 놓쳤다.
   아래는 390px 실측으로 확인된 붕괴 5건 + 플로팅 버튼 겹침 수정.
   ========================================================================== */
@media (max-width: 1199px) {

	/* ── sub_01 아이콘 원형 : 컨테이너 높이 0(float 미해제) + 둘째 줄 좌측 쏠림 ── */
	.resp .sub_01 .icon_circle > div {
		width: 100%; max-width: 696px; height: auto;
		display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
	}
	.resp .sub_01 .icon_circle > div > ul { float: none; width: auto; margin: 0 6px 12px; }
	.resp .sub_01 .icon_circle > div > ul > li.ci { margin: 0 auto; }
	.resp .sub_01 .icon_circle > div > ul > li.ct { margin-left: auto; margin-right: auto; }

	/* ── sub_02 검은 배너 : height 490px 고정 + overflow hidden 으로 글자 잘림 ── */
	.resp .sub_02 { height: auto; min-height: 0; padding: 60px 0; }
	.resp .sub_02 .con_box > ul > li.st { font-size: 19px; line-height: 1.4; }
	.resp .sub_02 .con_box > ul > li.tt { font-size: 30px; line-height: 1.3; }
	.resp .sub_02 .con_box > ul > li.ss { font-size: 15px; line-height: 22px; }
	.resp .sub_02 .con_box > ul > li.tl > span { width: 80%; max-width: 300px; }

	/* ── sub_05 탭 : 클리퍼의 좌우 패딩(16px) 밖으로 다음 카드가 삐져나옴 ──
	   패딩을 클리퍼에서 떼어 카드 안쪽으로 옮겨 클리핑 경계와 카드 폭을 일치시킨다 */
	.resp .sub_05 .tap_box .con_txt > div { padding-left: 0; padding-right: 0; overflow: hidden; }
	.resp .sub_05 .tap_box .con_txt > div > div > div {
		padding-left: 18px; padding-right: 18px; box-sizing: border-box;
	}

	/* ── sub_07 인물 카드 : .r_txt 가 absolute(h260) 인데 ul 높이는 165 → 79px 겹침 ── */
	.resp .sub_07 { min-height: 0; }
	.resp .sub_07 .circleR_box > ul { width: 100%; float: none; margin: 0 0 22px; }
	.resp .sub_07 .circleR_box > ul > li.r_txt {
		position: static; height: auto; min-height: 0;
		margin-top: -52px; padding: 64px 18px 26px;
	}

	/* ── sub_08 서비스 안내 : width 25% 고정 → 칸당 85px, 글자 세로 분해 ── */
	.resp .sub_08 { min-height: 0; }
	.resp .sub_08 .cs_box > ul { width: 50%; padding: 0 14px; margin-bottom: 26px; }
	.resp .sub_08 .cs_box > ul:nth-child(2n) { border-right: 0; }
	.resp .sub_08 .cs_box > ul > li.tn { font-size: 26px; }
	.resp .sub_08 .cs_box > ul > li > p.tt { font-size: 19px; }

	/* ── 플로팅 버튼 : absolute 로 본문 위에 얹힘. 인라인 top 을 !important 로 무력화 ── */
	.resp #floatingMenuWrap {
		position: fixed !important; top: auto !important;
		right: 12px; left: auto !important; bottom: 16px;
		width: 92px; z-index: 9999;
	}
}

/* ~460px */
@media (max-width: 460px) {
	.resp .sub_02 .con_box > ul > li.tt { font-size: 26px; }
}

/* ==========================================================================
   [2026-09-02 3차] 원본 모바일 페이지(/m/) 배치에 맞춤
   - 햄버거 메뉴 (/m/ 의 menu + top 구조 이식)
   - 한국어 줄바꿈을 어절 단위로 (원본 /m/ 와 동일한 인상)
   - sub_03 이미지 2x2, sub_04 아이콘 2x2, sub_06 가로 바, sub_07 2x2, sub_08 2x2
   - 탭 라벨 "(최고)관리자"
   ========================================================================== */

/* ── 햄버거 메뉴 : PC 에서는 완전히 숨김 ── */
.mNav, .mTop { display: none; }
.mTxt { display: none; }
.pcTxt { display: inline; }

@media (max-width: 860px) {

	/* 데스크톱 GNB 숨기고 모바일 상단 바로 교체 */
	.resp .Top { display: none !important; }

	.resp .mTop {
		display: block; position: sticky; top: 0; z-index: 900;
		width: 100%; background: #fff; border-bottom: 1px solid #ececf3;
	}
	.resp .mTop > ul { display: flex; align-items: center; width: 100%; }
	.resp .mTop .mTop_ic { flex: 0 0 58px; text-align: center; }
	.resp .mTop .mTop_ic a { display: block; padding: 16px 0; color: #171767; }
	.resp .mTop .mTop_ic i { font-size: 22px; }
	.resp .mTop .mTop_lg { flex: 1 1 auto; text-align: center; }
	.resp .mTop .mTop_lg img { width: 172px; height: auto; vertical-align: middle; }

	/* 오버레이 패널 — /m/ 와 동일하게 왼쪽에서 밀려 들어온다 */
	.resp .mNav {
		display: block; position: fixed; top: 0; left: 0; z-index: 9998;
		width: 100%; height: 100%; background: rgba(0,0,0,.5);
		transition: margin-left 300ms ease-in-out;
	}
	.resp .mNav.mn_none  { margin-left: -100%; }
	.resp .mNav.mn_block { margin-left: 0; }
	.resp .mNav .mNav_wrap {
		width: 80%; max-width: 340px; height: 100%; float: left;
		background: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch;
	}
	.resp .mNav .mNav_logo { text-align: center; padding: 16px 0; }
	.resp .mNav .mNav_logo img { width: 62%; height: auto; }

	.resp .mNav .mNav_tap { background: #171767; }
	.resp .mNav .mNav_tap ul { display: flex; width: 100%; text-align: center; }
	.resp .mNav .mNav_tap li { flex: 1 1 33.33%; border-right: 1px solid rgba(255,255,255,.5); }
	.resp .mNav .mNav_tap li:last-child { border-right: 0; }
	.resp .mNav .mNav_tap a { display: block; color: #fff; font-size: 14px; padding: 16px 2px; line-height: 1.5; }
	.resp .mNav .mNav_tap i { font-size: 21px; margin-bottom: 8px; color: #fff; }

	.resp .mNav .mNav_list li { border-bottom: 1px solid #e1e1e1; }
	.resp .mNav .mNav_list a { display: block; padding: 17px 0 17px 22px; font-size: 17px; font-weight: 500; color: #333; }

	.resp .mNav .mNav_call { padding: 18px; }
	.resp .mNav .mNav_call ul { border: 6px solid #f1f1f1; padding: 18px 0; text-align: center; }
	.resp .mNav .mNav_call li { margin-bottom: 4px; }
	.resp .mNav .mNav_call li.m_tit  { font-size: 17px; font-weight: 500; }
	.resp .mNav .mNav_call li.m_call { font-size: 25px; color: #171767; font-weight: 900; letter-spacing: 0; }
	.resp .mNav .mNav_call li.m_call a { color: #171767; }
	.resp .mNav .mNav_call li.m_sub  { color: #666; font-size: 13px; }

	.resp .mNav .mNav_close { width: 20%; float: left; padding: 14px 10px; }
	.resp .mNav .mNav_close i { color: #fff; font-size: 38px; cursor: pointer; }
}

@media (max-width: 1199px) {

	/* ── 줄바꿈 : 한국어를 어절 단위로 끊어 원본 /m/ 와 같은 인상으로 ── */
	.resp .sub_box .con_title > ul > li,
	.resp .sub_box .con_title > ul > li > span,
	.resp .main_visual .con_txt > ul > li,
	.resp .sub_02 .con_box > ul > li,
	.resp .sub_01 .slide_box .sb_txt > li,
	.resp .sub_04 .circle_box .icon_txt > li,
	.resp .sub_06 .circleI_box > ul > li,
	.resp .sub_07 .circleR_box > ul > li,
	.resp .sub_08 .cs_box > ul > li,
	.resp .sub_03 .spci_box > ul > .sb_ts {
		word-break: keep-all; overflow-wrap: break-word;
	}

	/* ── 탭 라벨 : 원본 /m/ 와 동일하게 "(최고)관리자" ── */
	.resp .mTxt { display: inline; }
	.resp .pcTxt { display: none; }
	.resp .sub_05 .tap_box .menu_box > ul > li.tn { font-size: 16px; padding: 15px 2px; }

	/* ── sub_03 : 이미지 4장을 2 x 2 (원본 /m/ 배치) ── */
	.resp .sub_03 .spci_box {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
	}
	.resp .sub_03 .spci_box > ul {
		width: calc(50% - 5px); height: auto; float: none; margin: 0;
	}
	.resp .sub_03 .spci_box > ul > li { height: auto; }
	.resp .sub_03 .spci_box > ul > .sb_ts {
		top: auto; bottom: 0; padding: 12px 8px;
		font-size: 13.5px; line-height: 19px;
	}
	.resp .sub_03 .spci_box > ul > .sb_ts > span { font-size: 13.5px; }

	/* ── sub_04 : 아이콘 4개를 2 x 2 (원본 /m/ 배치). 연결선은 숨김 ── */
	.resp .sub_04 .circle_box > .line { display: none; }
	.resp .sub_04 .circle_box > div > div { width: 50%; margin-bottom: 28px; }
	.resp .sub_04 .circle_box > div > div > .icon_img { margin: 0 auto; }
	.resp .sub_04 .circle_box > div > div > .icon_txt { padding: 0 10px; }

	/* ── sub_06 : 원본 /m/ 처럼 아이콘 왼쪽 + 문구 오른쪽 가로 바 ── */
	.resp .sub_06 { padding: 60px 0; min-height: 0; }
	.resp .sub_06 .circleI_box > ul {
		width: 100%; float: none; display: flex; align-items: center;
		gap: 14px; margin-bottom: 14px;
	}
	.resp .sub_06 .circleI_box > ul > li {
		width: auto; float: none; text-align: left;
		font-size: 17px; line-height: 22px;
	}
	.resp .sub_06 .circleI_box > ul > li:first-child { flex: 0 0 78px; }
	.resp .sub_06 .circleI_box > ul > li > img { width: 78px; height: auto; }
	.resp .sub_06 .circleI_box > ul > li > span { font-size: 13.5px; }

	/* ── sub_07 : 인물 카드 2 x 2 (원본 /m/ 배치) ── */
	.resp .sub_07 .circleR_box {
		display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
	}
	.resp .sub_07 .circleR_box > ul {
		width: calc(50% - 7px); float: none; margin: 0;
	}
	.resp .sub_07 .circleR_box > ul > li.c_img > img { max-width: 74%; height: auto; }
	.resp .sub_07 .circleR_box > ul > li.r_txt {
		font-size: 14.5px; line-height: 20px; padding: 52px 10px 20px;
		margin-top: -42px;
	}
	.resp .sub_07 .circleR_box > ul > li.r_txt > span { font-size: 14.5px; }

	/* ── sub_08 : 서비스 안내 2 x 2 (원본 /m/ 배치) ── */
	.resp .sub_08 .cs_box { display: flex; flex-wrap: wrap; padding: 0; }
	.resp .sub_08 .cs_box > ul {
		width: 50%; float: none; margin: 0; padding: 28px 12px;
		border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1;
	}
	.resp .sub_08 .cs_box > ul:nth-child(2n) { border-right: 0; }
	.resp .sub_08 .cs_box > ul:nth-last-child(-n+2) { border-bottom: 0; }
	.resp .sub_08 .cs_box > ul > li.tn { font-size: 24px; }
	.resp .sub_08 .cs_box > ul > li > p.tt { font-size: 17px; }
	.resp .sub_08 .cs_box > ul > li > p.ss { font-size: 12.5px; }
}

/* ==========================================================================
   [2026-09-02 4차] 원본 /m/ 와의 잔여 차이 6건 교정
   측정 근거(390px):
   ① .main_visual > div 에 padding 0 16px → 히어로가 343px 로 좌우 여백. /m/ 는 전폭.
   ② sub_01 : /m/ 는 [제목 → 슬라이드 → 점] 인데 여기는 [제목 → 아이콘원 → 슬라이드] + 화살표 겹침
   ③ sub_03 : 캡션이 absolute 로 이미지 위 62% 를 덮음. /m/ 는 이미지 전체 + 아래 별도 캡션
   ④ sub_04 : .icon_img 가 float:left 라 margin:auto 무효 → 아이콘이 칸 왼쪽에 붙음(L=16, 중앙 아님)
   ⑤ .tri 삼각형 left:143px 하드코딩 → 탭 폭 114px 에서 L=159 로 이탈
   ⑥ 푸터 : 좌측정렬이라 "|" 구분자가 줄 끝에 매달림. /m/ 는 중앙정렬.
   ========================================================================== */
@media (max-width: 1199px) {

	/* ① 히어로 전폭 (원본 /m/ 의 .slide 와 동일하게 좌우 여백 제거) */
	.resp .main_visual > div { padding-left: 0; padding-right: 0; }
	.resp .main_visual .con_txt { padding-left: 22px; padding-right: 22px; }

	/* ② 주요특징 : 순서를 /m/ 와 동일하게 [제목 → 슬라이드 → 점] 으로 */
	.resp .sub_01 > div > div { display: flex; flex-direction: column; }
	.resp .sub_01 > div > div > .con_title  { order: 1; }
	.resp .sub_01 > div > div > .slide_box  { order: 2; width: 100%; margin-top: 30px; }
	.resp .sub_01 > div > div > .icon_circle{ order: 3; margin-top: 26px; }

	/* 아이콘 원 6개 → /m/ 처럼 점(dot) 네비게이션으로 */
	.resp .sub_01 .icon_circle > div { height: auto; gap: 0; }
	.resp .sub_01 .icon_circle > div > ul { margin: 0 6px; }
	.resp .sub_01 .icon_circle > div > ul > li.ci {
		width: 13px; height: 13px; padding: 0; margin: 0;
		border: 1px solid #c3c3d6; background: #dcdce8; border-radius: 50%;
	}
	.resp .sub_01 .icon_circle > div > ul > li.ci > img { display: none; }
	.resp .sub_01 .icon_circle > div > ul > li.ct { display: none !important; }
	.resp .sub_01 .icon_circle > div > ul > li.active {
		background: #171767; border: 1px solid #171767 !important;
	}
	.resp .sub_01 .icon_circle > div > ul:hover > li.ci { border: 1px solid #171767; }

	/* /m/ 에는 좌우 화살표가 없고, 여기선 이미지 위에 겹쳐 있었다 */
	.resp .sub_01 .slide_box > .arrow { display: none; }
	/* 이미지는 /m/ 와 동일하게 80% 폭 중앙 */
	.resp .sub_01 .slide_box .sb_img > li { width: 80%; margin: 0 10%; }

	/* ③ sub_03 : 캡션을 흐름 안으로 → 이미지 전체가 보인다 (원본 /m/ 방식) */
	.resp .sub_03 .spci_box { gap: 0; }
	.resp .sub_03 .spci_box > ul {
		width: 49%; margin: 0 2% 2% 0; overflow: visible;
	}
	.resp .sub_03 .spci_box > ul:nth-child(2n) { margin-right: 0; }
	.resp .sub_03 .spci_box > ul > li > img { display: block; float: none; }
	/* display:flex 는 <span> 과 텍스트노드를 각각 flex 아이템으로 갈라 가로로 늘어놓는다 → block 유지 */
	.resp .sub_03 .spci_box > ul > .sb_ts {
		position: static; height: auto; min-height: 82px;
		display: block; padding: 16px 8px; text-align: center;
	}

	/* ④ sub_04 : float 때문에 margin:auto 가 먹지 않던 아이콘 중앙정렬 + 칸 사이 간격 */
	.resp .sub_04 .circle_box > div { display: flex; flex-wrap: wrap; }
	.resp .sub_04 .circle_box > div > div { width: 49%; margin: 0 2% 26px 0; float: none; }
	.resp .sub_04 .circle_box > div > div:nth-child(2n) { margin-right: 0; }
	.resp .sub_04 .circle_box > div > div > .icon_img {
		float: none; margin: 0 auto; display: block;
	}
	.resp .sub_04 .circle_box > div > div > .icon_img > li { float: none; margin: 0 auto; }
	.resp .sub_04 .circle_box > div > div > .icon_txt > li.tt { font-size: 17px; }
	.resp .sub_04 .circle_box > div > div > .icon_txt > li.ss { font-size: 13.5px; line-height: 18px; }

	/* ⑤ 탭 아래 삼각형 : left:143px 하드코딩 → 활성 탭 하단 중앙으로 */
	.resp .sub_05 .tap_box .menu_box > ul { position: relative; }
	.resp .sub_05 .tap_box .menu_box > ul > li.tri {
		top: 100%; left: 50%; margin-left: -10px;
	}

	/* ⑥ 푸터 : /m/ 처럼 중앙정렬 + Family solution 한 줄
	   .left/.right 를 100% 로 풀지 않으면 1024px 에서 select 가 6px 밖으로 밀린다 */
	.resp .footer { padding: 40px 10px; }
	.resp .footer .left, .resp .footer .right { width: 100%; float: none; }
	.resp .footer .left, .resp .footer .right { text-align: center; }
	.resp .footer .left > li { font-size: 13px; line-height: 21px; word-break: keep-all; }
	.resp .footer .left > li.crt { margin-top: 12px; color: #888; }
	.resp .footer .right { margin-top: 18px; }
	.resp .footer .right > li {
		display: flex; align-items: center; justify-content: center; gap: 10px;
	}
	.resp .footer .right > li > span { flex: 0 0 auto; font-size: 13px; }
	.resp .footer .right > li > select { width: auto; max-width: 220px; flex: 0 1 auto; }
}

/* 원본 /m/ 는 활성 탭 글자를 #fff 로 두고 밑줄만 #b9b9ff 로 표시한다 (.s05_tap ul li{color:#fff}) */
@media (max-width: 1199px) {
	.resp .sub_05 .tap_box .menu_box > ul.active > li.tn,
	.resp .sub_05 .tap_box .menu_box > ul:hover > li.tn { color: #fff; }
}

/* ==========================================================================
   [2026-09-04] 상담신청 팝업 모바일 대응
   원인: .popup_01 > .wbox_popup 이 width:1000px / min-height:700px 고정.
        390px 화면에서 좌우로 각 312px 씩 넘치고, 세로도 878px 로 화면(844)을 벗어난다.
        특히 닫기 버튼(li.bt)이 L=611 로 화면 밖 + 높이 0 이라 팝업을 닫을 수 없었다.
   ========================================================================== */
@media (max-width: 1199px) {

	/* ── 팝업 박스 : 화면 안에 넣고, 내용이 길면 박스 안에서 스크롤 ── */
	.resp .popup_01 > .wbox_popup {
		width: calc(100% - 24px);
		max-width: 560px;
		min-height: 0;
		/* 모바일 브라우저는 100vh 가 주소창에 가리는 영역까지 포함한다.
		   dvh(동적 뷰포트)를 쓰고, 미지원 브라우저용으로 vh 를 먼저 선언한다. */
		max-height: calc(100vh - 28px);
		max-height: calc(100dvh - 28px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		border-radius: 6px;
	}

	/* ── 타이틀바 : 스크롤해도 닫기 버튼이 항상 보이게 상단 고정 ── */
	.resp .popup_01 .title_bar {
		height: 54px; padding-left: 16px;
		position: sticky; top: 0; z-index: 3;
	}
	.resp .popup_01 .title_bar > ul > li { line-height: 54px; font-size: 17px; }
	.resp .popup_01 .title_bar > ul > li.tt { width: 78%; }
	.resp .popup_01 .title_bar > ul > li.bt { width: 22%; max-width: 56px; }
	.resp .popup_01 .title_bar > ul > li.bt > i { font-size: 24px; }

	/* ── 폼 : 고정 높이 553px 해제, 1열 배치 ── */
	.resp .popup_01 .form_bar { height: auto; padding: 18px 16px; overflow: visible; }
	.resp .popup_01 .form_bar > div { margin-bottom: 18px; }
	.resp .popup_01 .form_bar > div > p { font-size: 16px; padding: 8px 2px; }
	.resp .popup_01 .form_bar .wr_form { padding: 0; }
	.resp .popup_01 .form_bar .wr_form > ul > li { width: 100%; margin-top: 12px; }
	.resp .popup_01 .form_bar .wr_form .tt { width: 26%; font-size: 15px; line-height: 42px; }
	/* .ts 는 구분자가 아니라 '상담내용' 라벨이다(전화번호 칸엔 .ts 가 없음).
	   좁게 잡으면 글자가 세로로 쪼개지므로 textarea 위에 한 줄로 올린다 */
	.resp .popup_01 .form_bar .wr_form .ts {
		width: 100%; font-size: 15px; font-weight: 500; line-height: 22px;
		margin-bottom: 6px; word-break: keep-all;
	}
	.resp .popup_01 .form_bar .wr_form .tt { word-break: keep-all; }
	.resp .popup_01 .form_bar .wr_form input { width: 74%; height: 42px; font-size: 15px; }
	/* 전화번호 3칸 : 라벨 26% + (3칸 × 22%) + 여백 */
	.resp .popup_01 .form_bar .wr_form .calltxt input { width: 22%; height: 42px; margin-right: 3px; }
	.resp .popup_01 .form_bar .wr_form .calltxt input:last-child { margin-right: 0; }
	.resp .popup_01 .form_bar .wr_form .context textarea { width: 100%; height: 140px; font-size: 15px; }
	.resp .popup_01 .form_bar > div > .checkbox { padding: 14px 0 0; }
	.resp .popup_01 .form_bar .checkbox .labeltext { font-size: 14px; }
	.resp .popup_01 .form_bar .checkbox .privacybox { height: 84px; font-size: 12px; line-height: 1.6; }

	/* ── 안내영역 : 좌 60% / 우 40% 분할 해제 → 세로로 쌓기 ── */
	.resp .popup_01 .info_box { padding: 0 16px; }
	.resp .popup_01 .info_box > div { padding: 14px 16px; border-width: 3px; }
	.resp .popup_01 .info_box .left_ib {
		width: 100%; border-right: 0; border-bottom: 1px solid #f1f1f1; padding-bottom: 12px;
	}
	.resp .popup_01 .info_box .left_ib .logo { width: 20%; }
	.resp .popup_01 .info_box .left_ib .text .st { font-size: 14px; }
	.resp .popup_01 .info_box .left_ib .text .st > span { font-size: 14px; }
	.resp .popup_01 .info_box .left_ib .text .tt { font-size: 18px; }
	.resp .popup_01 .info_box .right_ib { width: 100%; padding: 12px 0 0; }
	.resp .popup_01 .info_box .right_ib .nt { width: 34%; font-size: 14px; }
	.resp .popup_01 .info_box .right_ib .nn { width: 66%; font-size: 24px; line-height: 26px; padding-top: 0; }
	.resp .popup_01 .info_box .right_ib .nn > span { font-size: 13px; }

	/* ── 버튼 : 40/50px 여백 축소, 두 개가 한 줄에 들어가게 ── */
	.resp .popup_01 .button_box { padding: 22px 16px 26px; }
	.resp .popup_01 .button_box button {
		width: calc(50% - 6px); max-width: 190px; height: 48px; font-size: 16px; margin: 0 2px;
	}
}

/* ~420px : 더 좁은 화면에서 전화번호 칸이 눌리지 않게 라벨을 위로 */
@media (max-width: 420px) {
	.resp .popup_01 .form_bar .wr_form .calltxt .tt { width: 100%; line-height: 24px; margin-bottom: 4px; }
	.resp .popup_01 .form_bar .wr_form .calltxt input { width: 30%; }
}