@charset "utf-8";

/**
 * COMPANY · CONTACT 지면 본문 반응형
 *   회사소개    sub/content0401.php
 *   연혁        sub/content0402.php
 *   인증과 실적 sub/content0403.php
 *   문의        sub/content0501.php
 *   오시는 길   sub/content0502.php
 *
 * 껍데기는 dair-fluid.css 가 맡는다. 두 파일을 함께 읽어야 한다.
 * .sub_img_box(회사소개의 사업 소개 네 칸)도 그쪽에 있다.
 *
 * 연혁의 타임라인과 인증과 실적의 카드 격자는 default.css·게시판 스킨에 이미
 * 좁은 폭 규칙이 있어 여기서는 글자 크기만 손본다.
 *
 * 선택자에 #sub_content 를 붙인 이유 : 지면 안쪽 <style> 이 이 파일보다 뒤에
 * 실려 특이도가 같으면 그쪽이 이긴다. 미디어쿼리는 특이도를 올려 주지 않는다.
 */

/* ── 공통 : 지면 제목 ─────────────────────────────────────────── */
@media (max-width: 1024px) {
	#sub_content .sub_tit50 { font-size: 38px; }
	#sub_content .sub_stit45 { font-size: 34px; line-height: 1.35; }
	#sub_content .sub_stit35 { font-size: 27px; line-height: 1.4; }
	#sub_content .sub_text27 { font-size: 20px; line-height: 1.7; }
}
@media (max-width: 620px) {
	#sub_content .sub_tit50 { font-size: 28px; }
	#sub_content .sub_stit45 { font-size: 25px; }
	#sub_content .sub_stit35 { font-size: 22px; }
	#sub_content .sub_text27 { font-size: 17px; }
	#sub_content .sub_text20 { font-size: 16px; line-height: 1.7; }
}

/* ── 회사소개 (content0401) ───────────────────────────────────── */
@media (max-width: 1024px) {
	/* 배너 문장은 46px 로 잡혀 있어 좁아지면 배너 밖으로 흘러 넘친다 */
	#sub_content .bl-lead { font-size: 30px; }
	#sub_content .greet { margin-bottom: 76px; }
	#sub_content .greet-welcome { font-size: 26px; }
	#sub_content .greet-p { font-size: 17px; line-height: 1.85; }
	#sub_content .greet-h { font-size: 22px; margin-top: 44px; }
}
/* 핵심 가치 셋은 오시는 길의 표처럼 [번호 | 이름 | 설명] 세 칸이다.
   이름 칸이 268px 로 고정이라 좁아지면 설명 칸만 눌린다 — 단계적으로 줄인다. */
@media (max-width: 1024px) {
	#sub_content .greet-values .gv { grid-template-columns: 38px 220px 1fr; gap: 0 16px; }
	#sub_content .greet-values .gv-no { font-size: 18px; line-height: 30px; }
	#sub_content .greet-values .gv-t { font-size: 20px; line-height: 30px; }
	#sub_content .greet-values .gv-d { font-size: 18px; line-height: 30px; }
}
@media (max-width: 820px) {
	/* 이름과 설명을 나란히 두기엔 좁다 — 번호와 이름을 한 줄에 두고 설명은 그 아래로 */
	#sub_content .greet-values .gv { grid-template-columns: 36px 1fr; gap: 0 14px; padding: 22px 2px 20px; }
	#sub_content .greet-values .gv-t { line-height: 1.5; }
	#sub_content .greet-values .gv-d { grid-column: 2; margin-top: 7px; line-height: 1.75; }
}
@media (max-width: 560px) {
	#sub_content .greet-values .gv { grid-template-columns: 30px 1fr; gap: 0 10px; }
	#sub_content .greet-values .gv-no { font-size: 16px; }
	#sub_content .greet-values .gv-t { font-size: 18px; }
	#sub_content .greet-values .gv-d { font-size: 17px; }
}
@media (max-width: 620px) {
	#sub_content .bl-lead { font-size: 22px; }
	#sub_content .greet-welcome { font-size: 21px; }
	#sub_content .greet-thanks,
	#sub_content .greet-sign { font-size: 18px; }
}

/* ── 연혁 (content0402) ───────────────────────────────────────── */
@media (max-width: 1024px) {
	.timeline-container .timeline__content-title { font-size: 48px; }
	.timeline-container .timeline__content-desc { font-size: 18px; }
	.timeline-container .timeline__content-desc em { line-height: 1.6; }
}
@media (max-width: 620px) {
	.timeline-container .timeline__content-title { font-size: 36px; }
	.timeline-container .timeline__content-desc { font-size: 16px; }
	/* 월 표시가 10% 라 좁아지면 두 자리 숫자가 눌린다 */
	.timeline-container .timeline__content-desc span { width: 42px; }
	.timeline-container .timeline__content-desc em { width: calc(100% - 42px); }
}

/* ── 인증과 실적 (content0403) ────────────────────────────────── */
@media (max-width: 620px) {
	#sub_content .cert-filter { gap: 7px; margin-bottom: 32px; }
	#sub_content .cert-filter button { font-size: 14px; padding: 8px 14px; }
}

/* ── 오시는 길 (content0502) ──────────────────────────────────── */
/* 지도 위젯은 mapWidth 를 100% 로 바꿔 두었지만(content0502.php) 그래도 제 나름의
   최소 폭을 잡는다. 넘치는 부분은 잘라 낸다 — 위치를 보여 주는 약도라 가장자리
   타일이 조금 잘려도 읽는 데 지장이 없다. */
#sub_content .root_daum_roughmap { width: 100% !important; max-width: 100%; overflow: hidden; }
#sub_content .root_daum_roughmap .wrap_map { width: 100% !important; }
@media (max-width: 1024px) {
	#sub_content .cs_table th { font-size: 21px; }
	#sub_content .cs_table td { font-size: 18px; }
	#sub_content .cs_table th,
	#sub_content .cs_table td { padding: 24px 12px; line-height: 1.6; }
}
@media (max-width: 620px) {
	/* 표를 두 칸으로 두기엔 좁다 — 항목 이름을 값 위로 올린다 */
	#sub_content .cs_table,
	#sub_content .cs_table tbody,
	#sub_content .cs_table tr,
	#sub_content .cs_table td { display: block; width: auto; }
	#sub_content .cs_table td { padding: 0 0 4px; border-bottom: 0; font-size: 16px; }
	#sub_content .cs_table td.td_ttl { padding-top: 18px; font-size: 15px; font-weight: 700; color: #8b93a1; }
	#sub_content .cs_table tr { padding-bottom: 16px; border-bottom: 1px solid rgba(0,0,0,.15); }
}