@charset "utf-8";

/**
 * 홈(index.php) 반응형·제목 크기.
 *
 * 껍데기 유동화는 dair-fluid.css 가 맡는다. 다만 그 파일은 서브 지면 껍데기
 * (.subtop_wrap · .sub_1300_wrap · .ft_wrap)만 알고 홈의 .main_wrap_1300 은 모른다.
 * 여기서 그 하나를 더 유동으로 바꾸고, 홈 고유의 칸 수·글자 크기를 폭에 맞춰 줄인다.
 *
 * 지면 안쪽 <style> 이 이 파일보다 뒤에 실리므로, 그와 겨루는 규칙은
 * 선택자를 한 단계 더 붙여 특이도를 올린다 (미디어쿼리는 특이도를 안 올린다).
 */

/* ── 1. 홈 껍데기를 유동으로 ─────────────────────────────────── */
.main_wrap_1300 {
	width: auto;
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
}

/* ── 2. 띠 제목 — 60px 는 지나치게 크다. 폭에 따라 줄인다 ────────
   clamp 로 두면 구간마다 다시 적을 필요가 없다. */
body #main_business h2, body #main_solution h2, body #main_technology h2,
body #main_products h2, body #main_op h2, body #main_partners h2 {
	font-size: clamp(28px, 3.1vw, 42px);
	letter-spacing: -.5px;
}
body #main_business h3, body #main_solution h3, body #main_technology h3,
body #main_products h3, body #main_op h3, body #main_partners h3 {
	font-size: clamp(15px, 1.3vw, 17px);
}
body #main_business .mbz-lead, body #main_op .mbz-lead,
body #main_partners .mpt-d {
	font-size: clamp(15px, 1.3vw, 17px);
}
/* 히어로·문의 띠도 같이 줄인다 — 홈에서 가장 큰 글자들이다 */
body .visual .swiper-slide h2 { font-size: clamp(28px, 3.4vw, 46px); }
body #main_contact h2 { font-size: clamp(20px, 2.2vw, 30px); line-height: 1.5; }

/* ── 3. 칸 수 — 폭이 줄면 접는다 ─────────────────────────────── */
@media (max-width: 1180px) {
	body #main_technology .mtc-grid { grid-template-columns: repeat(3, 1fr); }
	body #main_op .mkd-grid { grid-template-columns: repeat(2, 1fr); }
	body #main_partners .mpt-list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
	body #main_business .mbz-axes,
	body #main_solution .msol-grid { grid-template-columns: repeat(2, 1fr); }
	body #main_products .mprd-grid,
	body #main_service .msvc-grid,
	body #main_op .mop-grid { grid-template-columns: repeat(2, 1fr); }
	body #main_technology .mtc-grid { grid-template-columns: repeat(2, 1fr); }
	body #main_partners .mpt-list { grid-template-columns: repeat(3, 1fr); }
	/* 띠 사이 여백도 함께 줄인다 — 넓은 화면 기준 104 는 좁은 폭에서 과하다 */
	body #main_business, body #main_solution, body #main_products,
	body #main_service, body #main_op { padding-top: 72px; }
	body #main_technology { padding: 72px 0; margin-top: 72px; }
	body #main_partners { padding: 72px 0; }
}
@media (max-width: 640px) {
	body #main_business .mbz-axes,
	body #main_solution .msol-grid,
	body #main_products .mprd-grid,
	body #main_service .msvc-grid,
	body #main_op .mop-grid,
	body #main_op .mkd-grid,
	body #main_technology .mtc-grid { grid-template-columns: 1fr; }
	body #main_partners .mpt-list { grid-template-columns: repeat(2, 1fr); }
	.main_wrap_1300 { padding-left: 20px; padding-right: 20px; }
}

/* ── 5. 수행 중인 서비스 ──
   요약 띠들과 같은 카드 문법이다. 홈에서 서비스로 가는 길이 히어로 슬라이드뿐이었다. */
#main_service{ padding:104px 0 0; }
body #main_service h3{ font-size:clamp(15px,1.3vw,17px); font-weight:300; color:#6b7684; text-align:center; }
body #main_service h2{ font-size:clamp(28px,3.1vw,42px); font-weight:700; color:#111; text-align:center;
	letter-spacing:-.5px; margin-bottom:46px; }
#main_service .msvc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
#main_service .msvc{ display:block; overflow:hidden; background:#fff; border:1px solid #dfe6ee;
	border-radius:16px; color:inherit; text-decoration:none;
	transition:transform .2s, box-shadow .2s, border-color .2s; }
#main_service .msvc:hover{ transform:translateY(-3px); border-color:#bfe2f2;
	box-shadow:0 14px 32px rgba(20,50,80,.12); }
#main_service .msvc-shot{ display:block; height:184px; background-size:cover; background-position:center;
	background-color:#f4f6f9; }
#main_service .msvc-shot--ndt   { background-image:url('/img/sub/ndt-dual-drone.jpg?v=20260807'); }
#main_service .msvc-shot--wt    { background-image:url('/img/sub/wind-rotating.jpg?v=20260821'); }
#main_service .msvc-shot--dock  { background-image:url('/img/sub/dock-industrial.jpg?v=20260811'); }
#main_service .msvc-shot--survey{ background-image:url('/img/sub/content0301_01.jpg?v=20260821'); }
#main_service .msvc-t{ display:block; padding:22px 18px 24px; text-align:center;
	font-size:18px; font-weight:700; line-height:1.45; color:#111; word-break:keep-all; }

/* ── 6. 캐시 ──
   홈 배경 셋은 default.css 가 버전 쿼리 없이 부른다. 파일을 갈아도 주소가 그대로라
   보던 사람의 브라우저에는 옛 그림이 계속 나온다. 주소에 판을 붙여 새로 받게 한다. */
#main_contact{ background-image:url('/img/main/main_contact_bg.jpg?v=20260821'); }
/* ── 7. 띠 간격 통일 ──
   섹션 규칙이 index.php 안쪽 <style> 과 여기 둘로 나뉘어 값이 어긋났다.
   한 값(76px)으로 못 박는다 — 색 띠(기술)만 위아래를 갖고 나머지는 위만 갖는다. */
body #main_business, body #main_solution, body #main_products,
body #main_service, body #main_op { padding-top: 76px; padding-bottom: 0; }
body #main_technology { padding: 76px 0; margin-top: 76px; }
body #main_partners { padding: 76px 0; }
@media (max-width: 900px) {
	body #main_business, body #main_solution, body #main_products,
	body #main_service, body #main_op { padding-top: 56px; }
	body #main_technology { padding: 56px 0; margin-top: 56px; }
	body #main_partners { padding: 56px 0; }
}

/* ── 8. 띠 소개 ──
   제목 다음이 바로 카드라 각 띠가 무엇을 말하는지 없이 링크 목록으로 읽혔다.
   문장과 대표 사진을 한 줄로 두어 카드가 그 아래에 놓이게 한다.
   사진은 각 지면이 실제로 쓰는 히어로·배너를 그대로 쓴다. */
#main_solution .mint, #main_technology .mint,
#main_products .mint, #main_service .mint, #main_op .mint {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 44px;
	margin: 0 0 48px;
}
.mint .mint-d {
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.85;
	color: #4a5560;
	margin: 0;
	word-break: keep-all;
	text-wrap: pretty;
}
.mint .mint-shot {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	background-color: #f4f6f9;
}
.mint .mint-shot--sol  { background-image: url('/img/sub/solution-hero.jpg?v=20260824'); }
.mint .mint-shot--tech { background-image: url('/img/sub/technology-hero.jpg?v=20260805'); }
.mint .mint-shot--prd  { background-image: url('/img/sub/content02_top_bg.jpg?v=20260821'); }
.mint .mint-shot--svc  { background-image: url('/img/main/service-intro.jpg?v=20260821'); }
.mint .mint-shot--edu  { background-image: url('/img/sub/edu-center.jpg?v=20260812'); }
/* 사업 분야는 개요 띠라 리드만 두고 사진을 얹지 않는다 — 네 카드가 이미 그림이다 */
body #main_business .mbz-lead { max-width: 760px; margin-left: auto; margin-right: auto; }

@media (max-width: 900px) {
	#main_solution .mint, #main_technology .mint,
	#main_products .mint, #main_service .mint, #main_op .mint {
		grid-template-columns: 1fr;
		gap: 24px;
		margin-bottom: 36px;
	}
	.mint .mint-d { text-align: center; }
}

/* ── 9. 띠 리듬 ──
   흰 바탕이 일곱 번 이어지고 띠 모양까지 같아, 내용이 있어도 지면이 허전하게 읽혔다.
   흰 카드가 흰 바탕 위에 놓여 가장자리도 안 보였다.
   배경을 교대로 깔아 띠 경계를 만들고, 그 위에서 카드가 뜨게 한다. */
#main_solution, #main_products, #main_op { background: #f2f6fa; }
#main_business, #main_service, #main_partners { background: #fff; }
/* 교대가 성립하려면 아래 여백도 각 띠가 가져야 한다 — 위만 갖던 것을 위아래로 바꾼다 */
body #main_business, body #main_solution, body #main_products,
body #main_service, body #main_op { padding: 76px 0; }
body #main_technology { padding: 76px 0; margin-top: 0; }
@media (max-width: 900px) {
	body #main_business, body #main_solution, body #main_products,
	body #main_service, body #main_op { padding: 56px 0; }
	body #main_technology { padding: 56px 0; margin-top: 0; }
}

/* 카드가 바탕 위에서 떠 보이게 — 그림자를 옅게 상시로 둔다 */
#main_business .mbz, #main_solution .msol, #main_technology .mtc,
#main_products .mprd, #main_service .msvc, #main_op .mop, #main_op .mkd {
	box-shadow: 0 2px 10px rgba(20, 50, 80, .05);
}
/* 사진을 조금 키운다 — 카드에서 그림이 차지하는 몫이 작아 밋밋했다 */
#main_solution .msol-shot, #main_technology .mtc-shot img,
#main_products .mprd-shot img, #main_service .msvc-shot,
#main_business .mbz-shot, #main_op .mop-shot { height: 200px; }
#main_solution .msol-t, #main_technology .mtc-t, #main_products .mprd-t,
#main_service .msvc-t, #main_business .mbz-t {
	font-size: clamp(16px, 1.35vw, 19px);
}
/* 소개 줄 — 사진 쪽을 넓혀 글과 그림의 무게를 맞춘다 */
#main_solution .mint, #main_technology .mint, #main_products .mint,
#main_service .mint, #main_op .mint { grid-template-columns: 1fr 1.15fr; }