@charset "utf-8";

/**
 * 고정 폭 껍데기를 유동으로 — 반응형을 켠 지면만 읽는다.
 *
 * 이 사이트의 PC 지면은 1300px 고정이라 창을 줄이면 가로 스크롤이 생긴다.
 * 껍데기(.subtop_wrap · .sub_1300_wrap · .ft_wrap)가 그 폭을 만들고 있어
 * 본문만 유동으로 바꿔서는 넘침이 사라지지 않는다.
 *
 * 지면별 본문 규칙은 각자의 파일에 둔다 (dair-products.css · dair-services.css).
 * 그쪽은 지면 안쪽 <style> 과 겨루므로 선택자에 #sub_content 를 붙여야 하지만,
 * 여기 규칙은 default.css 만 상대하므로 실린 순서로 이미 이긴다.
 *
 * 상단 헤더(.header)는 전 지면이 함께 쓰는 물건이라 여백·글자 크기만 줄인다.
 * 700px 아래에서 메뉴가 빡빡해지는 것은 헤더 자체를 손봐야 풀린다.
 */

/* ── 1. 고정 폭 껍데기를 유동으로 ───────────────────────────────── */
.subtop_wrap,
.sub_1300_wrap,
.ft_wrap {
	width: auto;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}

/* ── 2. 상단 헤더 — 여백과 글자만 줄인다 ───────────────────────── */
@media (max-width: 1200px) {
	.header { padding: 0 30px; }
	.header .logo { margin-left: 0; }
	.header .gnb { width: calc(100% - 190px); }
	.header .gnb > ul { transform: none; }
	.header .gnb > ul > li > a { padding: 0 22px; font-size: 18px; }
}
@media (max-width: 860px) {
	.header { padding: 0 18px; }
	.header .logo { width: 128px; background-size: contain; }
	.header .gnb { width: calc(100% - 140px); }
	.header .gnb > ul > li > a { padding: 0 11px; font-size: 15px; }
}

/* ── 3. 서브 배너 — 좁아질수록 높이와 글자를 줄인다 ───────────── */
/* 탭이 줄을 넘길 때 라벨끼리 포개지지 않게 한다.
   ul 은 flex-wrap:wrap 인데 li 에 flex 기본값(shrink:1)이 걸려 있어, 좁아지면 칸이
   글자보다 좁게 눌리고 넘친 글자가 아랫줄을 덮는다 — SERVICES 처럼 긴 라벨 넷이면
   390px 에서 네 개가 서로 겹쳐 읽을 수 없었다(2026-08-12 실측).
   칸을 글자 폭으로 고정하고 줄 간격을 준다. 모든 서브 배너에 함께 적용된다. */
#visual .tab_menu ul { row-gap: 10px; }
#visual .tab_menu ul li { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 1024px) {
	#visual,
	#visual .subtop { height: 470px; }
	#visual .subtop_wrap h2 { top: 290px; font-size: 40px; }
	#visual .tab_menu { top: 318px; }
	#visual .tab_menu ul li { margin-right: 46px; font-size: 18px; }
}
@media (max-width: 640px) {
	#visual,
	#visual .subtop { height: 390px; }
	#visual .subtop_wrap h2 { top: 220px; font-size: 31px; }
	#visual .tab_menu { top: 246px; }
	#visual .tab_menu ul li { margin-right: 26px; font-size: 16px; }
}

/* ── 8. 바닥글 ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.ft_wrap p { font-size: 14px; line-height: 22px; }
}

/* ── .sub_img_box ── 사진과 글을 나란히 두는 레거시 상자 ────────
   1300×535 로 못 박혀 있고 float 로 두 단을 만든다. 폭·높이를 풀고 flex 로
   바꾸면 좁아질 때 단을 세울 수 있다. 사진 없이 글만 든 자리(탭1)도 같은
   규칙으로 흘러간다 — 그때는 글 상자 하나뿐이라 한 단이 된다. */
#sub_content .sub_img_box {
	width: auto; height: auto; display: flex; align-items: center;
}
#sub_content .sub_img_box img {
	float: none; flex: 0 1 730px; width: 100%; max-width: 730px; height: auto; min-width: 0;
}
#sub_content .sub_img_box ul {
	float: none; flex: 1 1 420px; width: auto; min-width: 0; padding-top: 0; box-sizing: border-box;
}
/* 글만 든 상자는 줄이 지나치게 길어지지 않게 묶어 둔다 */
#sub_content .sub_img_box ul:only-child { flex: 1 1 auto; max-width: 900px; }

/* 1100px 에서 세운다 — 900px 까지 버티면 글 칸이 250px 남짓으로 눌려 네댓 낱말마다
   줄이 바뀐다. 사진(730)과 글(420)이 같은 비율로 줄어드는 탓이다. */
@media (max-width: 1100px) {
	/* 사진과 글을 나란히 두기엔 좁다 — 사진을 위로, 글을 아래로 세운다 */
	#sub_content .sub_img_box { flex-direction: column; align-items: stretch; }
	#sub_content .sub_img_box img { flex: none; max-width: 100%; order: -1; margin-bottom: 34px; }
	/* 한 단이 되면 두 단을 벌리려고 넣어 둔 여백과 사진 쪽으로 붙인 정렬이 쓸모없다.
	   회사소개는 이 값들을 지면 안 <style> 과 style= 속성으로 걸어 두어(이쪽이 나중에
	   실리고 속성은 특이도 밖이다) !important 없이는 덮이지 않는다. */
	#sub_content .sub_img_box ul,
	#sub_content .sub_img_box ul:first-child {
		padding-left: 0 !important; padding-right: 0 !important; text-align: left !important;
	}
}