@charset "utf-8";
/* =====================================================
   메인 — main/css/main.css
   ===================================================== */

/* ── 메인: 히어로 (배경 이미지 슬라이드 + 슬로건) ── */
/* 상단바(.appTop)가 투명하게 올라타므로 위쪽 여백에 상단바 높이(64px)를 포함시킨다 */
.mainHero {
	position:relative; z-index:0; overflow:hidden;	/* 영상·스크림이 뒤 콘텐츠 위로 올라오지 않도록 쌓임맥락 생성 */
	display:flex; align-items:flex-end;
	height:74vh; height:74svh;	/* svh 미지원 브라우저는 vh 로 폴백 */
	min-height:420px;
	max-height:640px;
	background:var(--c_base2);
}
/* 배경 이미지 슬라이드 — 여러 장을 겹쳐 두고 .on 한 장만 페이드로 노출 */
.mainHero .heroSlide {
	position:absolute; inset:0; z-index:0;
	pointer-events:none;
}
.mainHero .heroSlide img,
.mainHero .heroImg,
.mainHero .heroVideo {
	position:absolute; inset:0; z-index:0;
	width:100%; height:100%;
	object-fit:cover; display:block;
	pointer-events:none;
}
.mainHero .heroSlide img {
	opacity:0;
	transition:opacity 1.6s ease-in-out;
	will-change:opacity;
}
.mainHero .heroSlide img.on { opacity:1; }
/* 상단(상단바 가독성) · 하단(슬로건 가독성) 두 방향 스크림 */
.mainHero .cover {
	position:absolute; inset:0; z-index:1;
	background:
		linear-gradient(180deg, rgba(10,22,44,.8) 0%, rgba(10,22,44,0) 26%),
		linear-gradient(0deg, rgba(10,22,44,.5) 0%, rgba(10,22,44,.5) 36%, rgba(10,22,44,.44) 58%, rgba(10,22,44,.06) 84%);
}
.mainHero .mainHeroIn {
	position:relative; z-index:2;
	width:100%;
	padding:64px 18px 25rem;   /* 하단 여백에 .catNav 버튼 박스가 겹쳐 올라오는 높이 포함 */
}
.mainHero .eyebrow {
	display:block; margin-bottom:11px;
	color:#fff; font-size:var(--fs14); font-family: var(--f_en); font-weight:800; letter-spacing:.09em;
}
.mainHero .slogan {
	color:#fff; font-size:var(--fs36); font-weight:700; letter-spacing:0; line-height:1.28;
	text-shadow:0 2px 18px rgba(6,14,30,.45); font-family: var(--f_title);
}
.mainHero .sub {
	margin-top:12px;
	color:rgba(255,255,255,.82); font-size:var(--fs14); line-height:1.65;
	text-shadow:0 2px 14px rgba(6,14,30,.4);
}

/* 모션 최소화 설정 시 전환 없이 첫 장만 노출 (JS 에서도 타이머를 걸지 않는다) */
@media (prefers-reduced-motion: reduce) {
	.mainHero .heroVideo { display:none; }
	.mainHero .heroSlide img { transition:none; }
	.mainHero .heroSlide img:not(.on) { display:none; }
}

/* ── 메인: 카테고리 바로가기 (아이콘 + 메뉴명 상하 배치 박스) ── */
/* 상단 고정(sticky) 하지 않고 본문과 함께 스크롤되어 올라감 */
/* 버튼 박스는 히어로 영상 위로 띄우고, 본문 시작부(둥근 흰 패널)는 그 아래에 둔다 */
.catNav {
	position:relative; z-index:2;
	margin-top:-16rem;
	padding:0 12px 6.6rem;
	background:transparent;
}
/* 히어로 위로 겹쳐 올라오는 콘텐츠 영역 시작부 — 둥근 모서리 */
.catNav::before {
	content:''; position:absolute; z-index:-1;
	left:0; right:0; bottom:-15px; height:6rem;
	background:#fff;
	border-radius:4rem 4rem 0 0;
}
/* 버튼 박스 아래 본문 영역 배경 (영상이 비쳐 보이지 않도록) */
body.isMain .appBody { position:relative; z-index:1; background:#fff; }
/* 버튼 박스 바로 아래에서 본문이 시작되도록 첫 섹션 상단 여백 축소 */
.catNav + .sec { padding-top:12px; }

/* 영상 위에 올라가는 흰색 반투명 박스 */
.catNav .catNavIn {
	display:grid; grid-template-columns:repeat(4, 1fr);
	padding:14px 6px; border-radius:14px; overflow:hidden;
	background:rgba(255,255,255,.58);
	-webkit-backdrop-filter:blur(4px) saturate(1.4);
	backdrop-filter:blur(4px) saturate(1.4);
	box-shadow:0 10px 26px rgba(8,18,38,.3);
}
.catNav .catNavIn a {
	position:relative;
	display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:9px;
	padding:6px 2px;
	color:#16306e; font-size:var(--fs16); font-weight:600; letter-spacing:-.04em; text-align:center; line-height:1.2;
	transition:background .2s; font-family:'Paperlogy';
}
/* 세로 구분줄 — 박스 높이의 2/3 길이로 가운데 정렬 */
.catNav .catNavIn a + a::before {
	content:''; position:absolute; left:0; top:50%; transform:translateY(-50%);
	width:1px; height:66%;
	background:rgba(39,62,130,.18);
}
.catNav .catNavIn a:active { background:#fff; border-radius:12px; }
.catNav .catNavIn a em { font-style:normal; }
.catNav .catNavIn .ic { display:block; width:29px; height:29px; }
/* backdrop-filter 미지원 브라우저 : 불투명도를 높여 가독성 확보 */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))) {
	.catNav .catNavIn { background:rgba(255,255,255,.86); }
}

/* ── 자동화설비 · 표준품 카드 (박스 라인 없는 형태) ── */
.solGrid { display:grid; grid-template-columns:1fr 1fr; gap:22px 14px; }
.solGrid a { display:block; }
.solGrid .ico { display:block; aspect-ratio:4/3; margin-bottom:12px; border-radius:12px; background:var(--bg1); overflow:hidden; }
.solGrid .ico img { width:100%; height:100%; object-fit:cover; display:block; mix-blend-mode: multiply;}
.solGrid strong { font-family:var(--f_en), var(--f_title), var(--f_base1), sans-serif; display:block; margin-bottom:6px; color:var(--c_ink); font-size:var(--fs20); font-weight:700; letter-spacing:-.03em; }
.solGrid p { color:var(--c_muted); font-size:var(--fs14); line-height:1.6; }
.sec.soft .solGrid .ico { background:#fff; }

/* ── 좁은 화면 (360px 이하) ── */
@media screen and (max-width: 400px) {
	.catNav .catNavIn a { gap:7px; font-size:var(--fs14); letter-spacing:-.06em; }
	.catNav .catNavIn .ic { width:26px; height:26px; }
	.solGrid strong {font-size:var(--fs18);}
}

/* ── 태블릿 이상 (600px~) ── */
@media screen and (min-width: 600px) {
	.mainHero { height:70vh; height:70svh; min-height:460px; max-height:720px; }
	.mainHero .mainHeroIn { padding:72px 26px 30rem; }
	.mainHero .sub { max-width:46ch; }

	.catNav { margin-top:-18rem; padding:0 22px 8.4rem; }
	.catNav + .sec { padding-top:16px; }
	.catNav .catNavIn { padding:12px 8px; border-radius:16px; }
	.catNav .catNavIn a { gap:10px; padding:6px 2px; }
	.catNav .catNavIn .ic { width:32px; height:32px; }

	.solGrid { gap:28px 18px; }
	.solGrid .ico { margin-bottom:14px; border-radius:14px; }
	.solGrid strong { font-size:var(--fs20); }
	.solGrid p { font-size:var(--fs14); }
}

/* ── PC (1024px~) ── */
@media screen and (min-width: 1024px) {
	.mainHero .mainHeroIn { padding:72px 40px 30rem; }
	.catNav { padding:0 40px 8.4rem; }
	.solGrid { gap:32px 28px; }
}