@charset "utf-8";
/* responsive.css 는 main.css/sub.css/board.css 의 반응형을 전부 포함한다.
 main/sub/board 는 자체 @media 를 두지 않는다. 2026-09-04 골격 반응형 분리.
 구간 구분 주석(「layout : responsive」「main : responsive」「sub : responsive」)을
 유지한다 — 어느 파일에서 옮겨온 규칙인지 다음 사람이 바로 읽을 수 있어야 한다. */

/* ═════════════════════════════════════════════
 layout : responsive (헤더·GNB·푸터·퀵버튼 — 원본 responsive.css)
═════════════════════════════════════════════ */
@media (max-width:1600px){
	.hero-steps-pc{left: 5%; width: 90%; margin: 0 auto; display: flex; align-items:center; justify-content: center;}
}

@media (max-width:1400px){
	#gnb{padding:0 180px;}
	#gnb > ul{gap:40px;}
	.gnb__link{font-size:var(--fs-body);}
	#footer .inner{gap:40px;}
}

@media (max-width:1280px){
	/* 데스크톱 기준 분기 — GNB 간격·폰트 2차 조정 (RWD-01) */
}
@media (max-width:1200px){
	#gnb > ul{gap:28px;}
}

@media (max-width:1024px){
	/* [RWD-01] PC ↔ 모바일 분기점 : GNB·Mega 숨김, 사이트맵이 모바일 메뉴 역할 */
	:root{--h-header:70px;}
	#gnb{display:none;}
	.gnb__mega{display:none;}   /* #gnb 자체가 숨으므로 이중 안전장치 */
	#header .logo img{width:120px;}
	#header .head-util{gap:10px;}
	/* [서브 반응형 검증] ≥1025 에서는 #gnb(line-height=--h-header)가 .container 의 높이를 만들어 주지만 ≤1024 는 #gnb 가
 숨어 .container 높이가 0 이 된다 — 로고·언어·햄버거(top:50%)가 y=0 에 걸려 위쪽 절반이 화면 밖으로 잘렸다(메인·서브 공통,
 ≤1024 전 폭). 컨테이너를 헤더 높이에 맞춰 준다 — 새 요소·새 모양 없음, 위치만 헤더 세로 중앙(시안 1920 은 중앙 정렬). */
	#header > .container{height:100%;}
	.mo{display:block;}

	#footer{padding:60px 0;}
	#footer .inner{flex-wrap:wrap;gap:30px;}
	#footer .ft_logo{flex:0 0 auto;}
	#footer .right{width:100%;flex:0 0 100%;gap:24px;}   /* 데스크톱 1920 전용 gap:40px(시안 실측)을 모바일까지 끌고 가지 않는다 — 줄바꿈 스택에서는 과한 여백이 된다 */
	/* TOP 버튼: 1920 시안 절대 위치(텍스트 열 오른쪽 위)는 줄바꿈 스택에서 글줄과 겹친다 — 새 요소·새 모양 없이
 흐름 안(콘텐츠 아래 오른쪽 끝)으로 옮긴다. 크기·모양은 시안 값 그대로. */
	.quick-top{position:static;display:flex;justify-content:flex-end;margin-top:32px;}
}

@media (max-width:768px){
	#footer .terms > ul{flex-wrap:wrap;gap:12px 32px;}
	#footer .info ul{gap:4px;}
	#footer .info ul li{font-size:var(--fs-label);line-height:1.7;letter-spacing:-.45px;}
	#footer .copyright{font-size:var(--fs-label);line-height:1.6;letter-spacing:-.45px;}
	#footer .terms{margin:0;}
	#footer .terms > ul > li{line-height:1.6;}

	.btn-lang__current span{display:none;}   /* 좁은 화면 — 국기/globe 아이콘만, 라벨은 숨김(alt 텍스트로 접근성 유지) */
	.btn-lang__current{padding:0 10px;gap:0;}
	
	
	.hero-steps-pc{display: none;}

	
	
}

@media (max-width:480px){
	:root{--h-header:60px;}
	#header .logo img{width:100px;}
	#footer{padding:40px 0;}
	#footer .copyright{font-size:var(--fs-caption);line-height:1.6;letter-spacing:-.39px;}
}

/* ═════════════════════════════════════════════
 main : responsive (주)퓨어앤케이 — main-hero/main-about/main-solution/main-contact
 [RWD-01] 시안이 1920 단일 폭이라 폭별 시안 근거가 없다 — 규칙
 브레이크포인트를 그대로 쓴다. §목표: 절대좌표 스캐터(main-about)·다열 그리드
 (main-contact)가 좁은 폭에서 QA-RWD(가로 스크롤 0) 를 어기지 않게 흐름으로 되돌린다.
═════════════════════════════════════════════ */
@media (max-width:1400px){
	.main-solution{padding:150px 0;}
	.main-contact{padding:120px 0 150px;}
	.main-solution__inner{gap:60px;}
	/* bg02는 1920 기준 left:1470px 이라 이 폭에서는 섹션 밖이다. 박스를 남겨 두면 가로로 밀리므로 장식만 뺀다. */
	.main-solution:before{content:none;}
}

@media (max-width:1280px){
	/* 데스크톱 기준 분기 — 컨테이너 2차 축소 (RWD-01) */
	/* [고도화 2차 · 폭별 점검] 여기 있던 `.main-contact__body{grid-template-columns:1fr 360px}` 를 걷었다 — 카드 열 360px 은 Download 카드 내용(제목+버튼 ≥ 473px)보다 좁아
 View More 버튼이 카드 밖으로 5px 튀어나오고 제목 「Download」를 가렸다(1025~1280 실측). 열 비율은 main.css 의 766fr/644fr 이 그대로 따라 줄어든다. */
}
@media (max-width:1200px){
	/* 1200~1025 에서 카드 열이 521→441px 로 줄어 기본 안쪽 여백(50)·간격(16)이면 내용이 473px 필요 — 441px 에서도 들어가게 여백 30·간격 12(내용 430px) */
	.main-contact__link{padding:0 30px;gap:12px;}
	/* [고도화 2차 · 폭별 점검 · SOLUTION] 이미지 766px 고정 + 간격 60 이면 우측 글 열이 1200 에서 344 → 1025 에서 169px 로 줄어 제목 「SOLUTION」·탭이 .main-solution{overflow:hidden} 에 잘렸다
 (1025 에서 「SOLUTI」 · 「Service」만 보임). 글 열 최소 340px(가장 긴 줄 「Service (Validation / PM)」 292px · 설명 줄 327px 이 들어가는 폭)를 지키고 이미지가 그만큼 줄어든다 — 1201 이상은 값 그대로 */
	.main-solution__media{flex:0 1 766px;min-width:0;}
	.main-solution__copy{min-width:340px;}
}

@media (max-width:1024px){
	/* 여기 있던 `:root{--h-header:70px}` 는 layout 절(≤1024 70px · ≤480 60px)과 같은 값을 뒤에서 다시 선언해
 ≤480 의 60px 을 덮어 375px 헤더가 70px 로 나왔다(원인 확인 — 이 줄만 지우면 375px 에서 60px). 헤더 높이 토큰은
 layout 절 한 곳에서만 정한다. */
	/* 절대좌표 스캐터(main-about) → 흐름형 2열 그리드로 전환(예외: 새 요소 없는
 반응형 재배치). 장식 전용 블러 이미지(--4·--6, aria-hidden)는 좁은 화면에서 숨긴다
 — 배경 장식이 본문 위로 겹쳐 가독성을 해치는 것을 막는다. */
	.main-about{min-height:0;padding:100px 0;}
	.main-about__text{padding-top:0;max-width:none;}
	.main-about__img{
		position:static;width:100%;height:auto;aspect-ratio:4/3;
		border-radius:var(--r-md);filter:none;opacity:1;
	}
	.main-about__img--4,.main-about__img--6{display:none;}
	.main-about{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding-left:var(--pad-side);padding-right:var(--pad-side);}
	.main-about__text{grid-column:1 / -1;margin-top:0px;order:-1;}
	.main-about__img--5{grid-column:1 / -1;}

	.main-solution{padding:100px 0;}
	.main-solution__inner{flex-direction:column;gap:40px;}
	.main-solution__media{width:100%;flex:0 0 auto;}
	/* 세로 쌓기에서는 글 열이 폭 1%(기본 width:1% — 가로 배치에서 flex:1 로 늘어나는 값)로 남아 9px 짜리 열에 제목·탭이 한 글자씩 접혀 내려갔다(1024·768·375 실측: 폭 9.9·7.4·3.4px) — 전폭으로 */
	.main-solution__copy{width:100%;flex:0 0 auto;min-width:0;}
	.main-solution__tit{font-size:var(--fs-head-ml);}
	.main-solution__tab-wrap{margin-top:32px;}
	.main-solution__connector{display:none;}   /* 이미지-탭 사이 가로 여백이 사라져 커넥터 위치 기준을 잃는다 */

	.main-contact__tit{font-size:var(--fs-head-ml);}
	.main-contact__body{grid-template-columns:minmax(0,1fr);}   /* 1fr 은 자식 최소 내용폭(≈348px)까지 열이 줄지 않아 320~377px 에서 카드가 화면 밖으로 밀렸다 */
	.main-contact__map,.main-contact__addr{grid-column:1;}
	.main-contact__addr{text-align:left;}
	/* 카드 둘을 가로로 나란히 두면(이전 row) 폭 900 아래에서 한 카드가 내용(473 · 421px)보다 좁아져 제목과 버튼이 겹친다(900 에서 맞닿고 그 아래 겹침) — 1024 부터 세로로 쌓는다(768 이하와 같은 모양, 새 요소 없는 재배치) */
	.main-contact__links{grid-column:1;grid-row:auto;flex-direction:column;}
	.main-contact__link{padding:0 50px;gap:16px;}   /* ≤1200 에서 줄인 여백을 전폭 카드에서는 시안 값(50·16)으로 되돌린다 */
}

@media (max-width:768px){
	.btn-line,.btn-fill,.btn-fill-invert,.btn-outline-white{padding:8px 22px 8px 20px;}

	.main-about{padding-top:70px;padding-bottom:70px;}   /* [작업 문서] 단축 속성이 :128 의 좌우 padding(--pad-side)을 0으로 되돌리던 것을 장축으로 교체 — 좌우값 상속 유지 */
	.main-about__tit{font-size:var(--fs-head-ms);letter-spacing:-.96px; line-height: 1.5;} 
	.main-about__inner,
	.main-about{grid-template-columns:1fr;}
	.main-about__desc{font-size: 18px; line-height: 1.5;}
	
	.main-about__img--3{grid-column:1;}
	.main-about__img {display: none;}	
	.main-about__more{margin-top: 40px;}
	

	.main-solution{padding:0px 0 70px;}
	.main-solution__tit{font-size:var(--fs-head-sm); line-height: 1.5;}
	.main-solution__tab{font-size:var(--fs-head-2xs);line-height:1.4; font-size: 18px;}
	.main-solution__tabs{flex-direction: row; flex-wrap:wrap;}
	.main-solution__more{right: 30px; }
	.main-contact{padding:70px 0 90px;}
	.main-contact__tit{font-size:var(--fs-head-sm);}
	.main-contact__links{flex-direction:column;}
	.main-contact__link{padding: 20px;	}
	.main-contact__link-tit{font-size: 20px;}
	.btn-top{width: 40px; height: 40px;}

}

@media (max-width:480px){
	.main-about__tit{font-size:var(--fs-head-2xs);letter-spacing:-.66px;}
	.main-solution__tit{font-size:var(--fs-head-xs);}
	.main-contact__tit{font-size:var(--fs-head-xs);}
	.main-contact__link{padding:22px;}
	/* 카드 안 폭 301px(375)·246px(320)에서 제목(189)+버튼(131)+간격은 335px 가 필요해 버튼이 제목을 덮고(375 에서 16px) 카드가 화면 끝까지 밀렸다 — 카드 안에서 제목 아래로 버튼을 내린다(고정 높이 175 안에서 38+16+48) */
	.main-contact__link{flex-direction:column;align-items:flex-start;justify-content:center;gap:16px;}
	
	.main-hero__slide--04 .main-hero__bg{display: none;}
	.main-hero__slide--04 .main-hero__bg-m{display: block;}
	
	.main-hero__content{align-items:center;}
}

/* ═════════════════════════════════════════════
 main-hero : responsive
 1920×960 절대배치를 1600·1200 에서는 비율로 줄이고,
 1024 아래는 한 스테이지 높이 안에서 위(슬로건)·아래(단계·기능·파트너)로 다시 쌓는다.
 고정 px(제품 806/507, 단계 아이콘 102, 기능 313/376, 파트너 308)가 슬라이드 밖으로 나가지 않게 한다.
═════════════════════════════════════════════ */
@media (max-width:1600px){
	.m-visual{margin-top: 80px;}
	.main-hero__slogan{left:8%;gap:18px;max-width:62%;}
	.main-hero__slogan--01,.main-hero__slogan--02,.main-hero__slogan--03,.main-hero__slogan--04,.main-hero__slogan--05{top:12%;}
	.main-hero__eyebrow{font-size:20px;line-height:28px;}
	.main-hero__eyebrow--lg{font-size:22px;line-height:30px;}
	.main-hero__tit{font-size:46px;line-height:54px;letter-spacing:-1.2px;}
	.main-hero__tit--42{font-size:36px;line-height:44px;}
	.main-hero__tit--50{font-size:42px;line-height:48px;}
	.main-hero__tit-line--grad05{font-size:54px;line-height:60px;}
	.main-hero__desc{font-size:18px;line-height:28px;}
	.main-hero__cta{left:8%;top:48%;width:auto;}
	.hero-steps{left:6%;width:88%;top:64%;}
	.hero-steps__icon{width:84px;height:88px;}
	.hero-steps__icon img{max-width:64%;max-height:64%;}
	.hero-steps__num{font-size:16px;line-height:24px;}
	.hero-steps__label{font-size:14px;}
	.hero-steps:before{top:40px;}
	.hero-media--ob01{left:6%;top:56%;width:44%;height:auto;}
	.hero-media--ob02{left:auto;right:4%;top:16%;width:28%;height:auto;}
	.hero-media--ob01 img,.hero-media--ob02 img{width:100%;height:auto;}
	.hero-brand--lepure03{left:8%;top:58%;width:108px;height:auto;}
	.hero-feats{left:8%;right:4%;top:68%;}
	.hero-feats__item,.hero-feats__item1,.hero-feats__item2{flex:1 1 0;width:auto;min-width:0;gap:16px;}
	.hero-feats__ico{flex-basis:64px;width:64px;height:64px;}
	.hero-feats__tit{font-size:16px;line-height:24px;}
	.hero-feats__desc{font-size:14px;line-height:20px;}
	.hero-flow{left:8%;top:34%;width:min(420px,46%);}
	.hero-flow img{width:100%;height:auto;}
	.hero-partners{left:8%;top:62%;gap:28px;}
	.hero-card,.hero-card--welkin{width:min(240px,22vw);}
	.hero-card__logo{max-width:100%;height:auto;}
	.main-hero__controls{left:0;right:0;bottom:30px;}
}

@media (max-width:1200px){
	.main-hero__slogan{left:5%;gap:12px;max-width:58%;}
	.main-hero__slogan--01,.main-hero__slogan--02,.main-hero__slogan--03,.main-hero__slogan--04,.main-hero__slogan--05{top:8%;}
	.main-hero__eyebrow{font-size:16px;line-height:24px;}
	.main-hero__eyebrow--lg{font-size:18px;line-height:26px;}
	.main-hero__tit{font-size:34px;line-height:42px;letter-spacing:-.9px;}
	.main-hero__tit--42{font-size:28px;line-height:34px;}
	.main-hero__tit--50{font-size:32px;line-height:38px;}
	.main-hero__tit-line--grad05{font-size:40px;line-height:46px;}
	.main-hero__tit-row{gap:8px;}
	.main-hero__desc{font-size:15px;line-height:24px;}
	.main-hero__cta{left:5%;top:44%;padding:8px 18px;gap:12px;font-size:14px;}
	.hero-steps{left:3%;width:94%;top:62%;}
	.hero-steps__item{max-width:none;}
	.hero-steps__icon{width:64px;height:68px;}
	.hero-steps__icon img{max-width:70%;max-height:58%;}
	.hero-steps__num{margin-top:4px;font-size:14px;line-height:20px;}
	.hero-steps__label{font-size:12px;}
	.hero-steps:before{top:30px;}
	.hero-media--ob01{left:4%;top:auto;bottom:7%;width:46%;}
	.hero-media--ob02{right:3%;top:auto;bottom:8%;width:26%;}
	.hero-brand--lepure03{left:5%;top:54%;width:96px;}
	.hero-feats{left:5%;right:3%;top:66%;}
	.hero-feats__ico{flex-basis:52px;width:52px;height:52px;}
	.hero-feats__tit{font-size:15px;line-height:22px;}
	.hero-feats__desc{margin-top:4px;font-size:13px;line-height:18px;}
	.hero-flow{left:5%;top:32%;width:min(360px,48%);}
	.hero-partners{left:5%;top:60%;gap:20px;}
	.hero-card,.hero-card--welkin{width:min(200px,24vw);}
	.main-hero__controls{left:0;right:0;bottom:30px;}
}

@media (max-width:1024px){
	.m-visual .visual{aspect-ratio:auto;height:640px;}
	.main-hero__ui{inset:0;height:auto;aspect-ratio:auto;}
	.main-hero__scroll{display:none;}
	.main-hero__content{
		display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;
		gap:14px;padding:28px 28px 58px;
	}
	.main-hero__slogan,
	.main-hero__cta,
	.hero-steps,
	.hero-brand,
	.hero-feats,
	.hero-flow,
	.hero-partners{
		position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:none;
	}
	.main-hero__slogan--01,.main-hero__slogan--02,.main-hero__slogan--03,.main-hero__slogan--04,.main-hero__slogan--05{top:auto;gap:8px;}
	.main-hero__eyebrow{font-size:14px;line-height:20px;}
	.main-hero__eyebrow--lg{font-size:15px;line-height:22px;}
	.main-hero__tit{font-size:30px;line-height:38px;}
	.main-hero__tit--42{font-size:24px;line-height:30px;}
	.main-hero__tit--50{font-size:26px;line-height:32px;}
	.main-hero__tit-line--grad05{font-size:34px;line-height:40px;}
	.main-hero__desc{font-size:14px;line-height:22px;}
	.main-hero__cta{width:fit-content;margin-top:4px;padding:8px 18px;font-size:14px;}
	.hero-steps{margin-top:auto;align-items:flex-start;}
	.hero-steps__icon{width:52px;height:56px;}
	.hero-steps__num{font-size:13px;line-height:18px;}
	.hero-steps__label{font-size:11px;}
	.hero-steps:before{top:24px;}
	.hero-brand,.hero-brand--lepure03{margin-top:auto;width:88px;height:auto;}
	.hero-feats{margin-top:10px;}
	.hero-feats__item,.hero-feats__item1,.hero-feats__item2{gap:10px;}
	.hero-feats__ico{flex-basis:44px;width:44px;height:44px;}
	.hero-feats__tit{font-size:14px;line-height:20px;}
	.hero-feats__desc{font-size:12px;line-height:17px;}
	.hero-flow{margin-top:auto;width:min(420px,100%);}
	.hero-flow i{display:block;width:100%;}
	.hero-partners{margin-top:12px;gap:16px;}
	.hero-card,.hero-card--welkin{width:min(180px,42%);}
	.hero-media--ob01{width:min(420px,54%);bottom:18%;}
	.hero-media--ob02{width:min(200px,28%);bottom:20%;}
	.main-hero__controls{left:0;right:0;bottom:30px;}
}

@media (max-width:768px){
	.m-visual .visual{height:600px;}
	.main-hero__content{padding:22px 20px 52px;gap:10px;}
	.main-hero__desc br,.hero-feats__desc br{display:none;}
	.main-hero__eyebrow{font-size:13px;line-height:18px;}
	.main-hero__eyebrow--lg{font-size:13px;line-height:18px;}
	.main-hero__tit{font-size:26px;line-height:32px;letter-spacing:-.7px;}
	.main-hero__tit--42{font-size:20px;line-height:26px;}
	.main-hero__tit--50{font-size:22px;line-height:28px;}
	.main-hero__tit-line--grad05{font-size:28px;line-height:34px;}
	.main-hero__desc{font-size:14px;line-height:21px;}
	.main-hero__cta{padding:8px 16px;gap:10px;font-size:13px;}
	.hero-steps__icon{width:44px;height:46px;}
	.hero-steps__num{font-size:12px;line-height:16px;}
	.hero-steps__label{font-size:10px;letter-spacing:-.3px;}
	.hero-steps:before{top:20px;}
	.hero-feats{flex-wrap:wrap;gap:8px 12px;}
	.hero-feats__item,.hero-feats__item1,.hero-feats__item2{flex:1 1 200px;width:auto;}
	.hero-card__logo{max-width:100%;}
	.hero-media--ob01{left:4%;width:min(340px,62%);bottom:14%;}
	.hero-media--ob02{right:4%;width:min(150px,30%);bottom:16%;}
	.main-hero__controls{left:0;right:0;bottom:30px;}
	.visual-pagination__item.is-active{width:48px;}
}

@media (max-width:480px){
	.m-visual .visual{height:400px;}
	.main-hero__content{padding:60px 16px 30px;gap:8px; }
	.main-hero__tit{font-size:22px;line-height:28px;}
	.main-hero__tit--42{font-size:18px;line-height:24px;}
	.main-hero__tit--50{font-size:20px;line-height:26px;}
	.main-hero__tit-line--grad05{font-size:24px;line-height:30px;}
	.main-hero__desc{font-size:13px;line-height:19px;}
	.main-hero__cta{max-width:100%;}
	.hero-steps{flex-wrap:wrap;row-gap:8px;}
	.hero-steps:before{display:none;}
	.hero-steps__item{flex:1 1 22%;max-width:25%;}
	.hero-steps__icon{width:36px;height:38px;}
	.hero-steps__icon img{max-width:78%;max-height:70%;}
	.hero-steps__label{font-size:10px;}
	.hero-feats{flex-direction:column;gap:10px; padding-bottom: 9vw;}
	.hero-feats__item,.hero-feats__item1,.hero-feats__item2{flex:1 1 auto;width:100%;}
	.hero-partners{flex-wrap:wrap;gap:10px;}
	.hero-card,.hero-card--welkin{width:46%;}
	.hero-media--ob01{width:90%;bottom:40%;}
	
	
	.hero-media--ob02{width: 43%; bottom: 1%;}
	.main-hero__controls{left:0;right:0;bottom:30px;}
	.visual-pagination__item.is-active{width:36px;}
	
	.hero-media--ob01{display: none;}
	.hero-media--ob02{display: none;}
	.hero-steps{display: none;}
	.hero-brand, .hero-brand--lepure03{display: none;}
	.hero-feats{display: none;}
	.hero-flow{display: none;}
	.hero-partners{display: none;}
}

@media (max-width:320px){
	.m-visual .visual{height:680px;}
	.main-hero__content{padding:16px 14px 48px;}
	.main-hero__eyebrow,.main-hero__eyebrow--lg{font-size:11px;line-height:16px;}
	.main-hero__tit{font-size:18px;line-height:24px;letter-spacing:-.4px;}
	.main-hero__tit--42{font-size:16px;line-height:21px;}
	.main-hero__tit--50{font-size:17px;line-height:22px;}
	.main-hero__tit-line--grad05{font-size:20px;line-height:26px;}
	.main-hero__desc{font-size:12px;line-height:17px;}
	.main-hero__cta{padding:7px 12px;gap:8px;font-size:12px;}
	.hero-steps__item{flex-basis:22%;}
	.hero-steps__icon{width:30px;height:32px;}
	.hero-steps__num{font-size:11px;line-height:14px;}
	.hero-steps__label{font-size:9px;}
	.hero-feats__ico{flex-basis:36px;width:36px;height:36px;}
	.hero-feats__tit{font-size:13px;line-height:18px;}
	.hero-feats__desc{font-size:11px;line-height:15px;}
	.hero-brand,.hero-brand--lepure03{width:72px;}
	.main-hero__controls{left:0;right:0;bottom:30px;}
	.visual-pagination{gap:6px;}
	.visual-pagination__item.is-active{width:28px;}
}

/* ═════════════════════════════════════════════
 main-hero ≤640 — Figma Mobile-메인비주얼 (780×800)
 가로 약 640px 부터 시안 비율로 다시 쌓는다. 그 위 폭은 기존 히어로를 유지.
═════════════════════════════════════════════ */
@media (max-width:640px){
	#main #header,
	#main #header:after{background:transparent;}
	#main .m-visual{margin-top:0;}
	#main .m-visual .visual{
		height:calc(100vw * 800 / 780) !important;
		aspect-ratio:auto;
	}
	#main .main-hero__ui{inset:0;height:auto;aspect-ratio:auto;}
	#main .main-hero__scroll{display:none;}
	#main .main-hero__bg,
	#main .main-hero__bg-m,
	#main .main-hero__scrim,
	#main .hero-steps,
	#main .hero-steps-pc,
	#main .hero-media,
	#main .hero-brand,
	#main .hero-feats,
	#main .hero-flow,
	#main .hero-partners{display:none;}
	#main .hero-m{display:block;}

	#main .main-hero__content{
		display:block;
		padding:0;
		gap:0;
	}
	#main .main-hero__slogan,
	#main .main-hero__cta{
		position:absolute;
		left:10.256%;
		right:auto;
		width:auto;
		max-width:none;
		margin:0;
	}
	#main .main-hero__slogan{top:22.375%;gap:2.564vw;}
	#main .main-hero__slogan--01,
	#main .main-hero__slogan--02,
	#main .main-hero__slogan--03,
	#main .main-hero__slogan--04,
	#main .main-hero__slogan--05{top:22.375%;gap:2.564vw;}
	#main .main-hero__eyebrow{
		font-weight:600;
		font-size:2.821vw;
		line-height:4.359vw;
		letter-spacing:-0.085vw;
	}
	#main .main-hero__eyebrow--lg{
		font-size:3.077vw;
		line-height:4.359vw;
		letter-spacing:-0.092vw;
	}
	#main .main-hero__tit{
		font-size:6.41vw;
		line-height:7.949vw;
		letter-spacing:-0.192vw;
		gap:0;
	}
	#main .main-hero__tit--42{
		font-size:5.641vw;
		line-height:6.667vw;
		letter-spacing:-0.169vw;
	}
	#main .main-hero__tit--50{
		font-size:5.128vw;
		line-height:6.667vw;
		letter-spacing:-0.154vw;
	}
	#main .main-hero__tit-line{white-space:nowrap;}
	#main .main-hero__tit-row{flex-wrap:nowrap;gap:0.769vw;}
	#main .main-hero__tit-line--grad05{
		font-size:7.692vw;
		line-height:7.949vw;
		letter-spacing:-0.231vw;
	}
	#main .main-hero__desc{
		font-size:2.821vw;
		line-height:3.846vw;
		letter-spacing:-0.085vw;
	}
	#main .main-hero__desc br{display:block;}
	#main .main-hero__slide--01 .main-hero__desc{max-width:55.13vw;}
	#main .main-hero__slide--02 .main-hero__desc{max-width:63.21vw;}
	#main .main-hero__slide--03 .main-hero__desc{max-width:63.59vw;}
	#main .main-hero__slide--04 .main-hero__desc{max-width:62.05vw;}
	#main .main-hero__cta{
		top:63.875%;
		padding:1.282vw 4.103vw;
		gap:2.564vw;
		font-family:'Pretendard',sans-serif;
		font-weight:500;
		font-size:2.821vw;
		line-height:4.359vw;
		letter-spacing:-0.085vw;
		border-color:#0051c6;
		color:#0036aa;
	}
	#main .main-hero__cta .btn-line__ico{width:3.333vw;height:auto;}
	#main .main-hero__controls{
		left:0;
		right:0;
		bottom:30px;
	}
	#main .visual-pagination__item{background:rgba(47,67,93,.35);}
	#main .visual-pagination__item.is-active{width:10.256vw;background:#2f435d;}
	#main .visual-nav__btn img{filter:brightness(0) saturate(100%) invert(18%) sepia(18%) saturate(900%) hue-rotate(176deg);}

	#main .hero-m-bg{position:absolute;inset:0;overflow:hidden;z-index:0;}
	#main .hero-m-bg img{position:absolute;max-width:none;display:block;}
	#main .hero-m-bg--01 img{width:285.36%;height:134.94%;left:-77.38%;top:-22.06%;}
	#main .hero-m-bg--01:after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.05);}
	#main .hero-m-bg--02 img{inset:0;width:100%;height:100%;object-fit:cover;object-position:bottom;}
	#main .hero-m-bg--03 .hero-m-bg__crop{position:absolute;left:-41.538%;top:-7.125%;width:238.974%;height:116.5%;}
	#main .hero-m-bg--03 img{width:108.27%;height:113.86%;left:-6.89%;top:-10.18%;}
	#main .hero-m-bg--04 img{left:-65.897%;top:-14.25%;width:246.154%;height:120%;object-fit:cover;object-position:bottom;}
	#main .hero-m-bg--05 img{left:-43.846%;top:-6.625%;width:246.154%;height:120%;object-fit:cover;object-position:bottom;}
	#main .visual.is-hero-motion .swiper-slide-active .hero-m-bg img{animation:hero-zoom-out 4.5s ease both;transform-origin:center center;}

	#main .hero-m-steps{position:absolute;left:10.256%;top:79.375%;width:79.2%;height:6.41vw;z-index:2;}
	#main .hero-m-steps__line{position:absolute;left:7.5%;top:50%;width:85%;height:auto;transform:translateY(-50%);}
	#main .hero-m-steps__row{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;height:100%;}
	#main .hero-m-steps__row img{height:100%;width:auto;display:block;}

	#main .hero-m-ob{position:absolute;z-index:2;}
	#main .hero-m-ob img{display:block;width:100%;height:auto;}
	#main .hero-m-ob--lab{left:9.231%;top:67.906%;width:53.397%;}
	#main .hero-m-ob--bio{left:63.271%;top:52.875%;width:26.637%;z-index:3;}
	#main .hero-m-brand{
		position:absolute;z-index:4;
		display:flex;flex-direction:column;align-items:center;text-align:center;
	}
	#main .hero-m-brand img{display:block;width:100%;height:auto;}
	#main .hero-m-brand span{
		font-family:'Pretendard',sans-serif;font-weight:600;
		font-size:1.667vw;line-height:2.821vw;letter-spacing:-0.05vw;white-space:nowrap;
	}
	#main .hero-m-brand--evonik{left:16.923%;top:60%;width:13.974%;}
	#main .hero-m-brand--evonik span{color:#951285;}
	#main .hero-m-brand--lepure{left:39.231%;top:60.875%;width:10%;}
	#main .hero-m-brand--lepure span{color:#0186b5;}

	#main .hero-m-icons{
		position:absolute;left:15.513%;top:64.625%;width:65.641%;z-index:2;
		display:flex;justify-content:space-between;align-items:flex-start;
	}
	#main .hero-m-icons__item{display:flex;flex-direction:column;align-items:center;text-align:center;width:10.769vw;}
	#main .hero-m-icons__item:nth-child(1),
	#main .hero-m-icons__item:nth-child(2){margin-top:6.41vw;}
	#main .hero-m-icons__ico{width:10.769vw;height:auto;display:block;}
	#main .hero-m-icons__logo{width:11.538vw;height:auto;display:block;margin-bottom:2.564vw;}
	#main .hero-m-icons__item strong{
		margin-top:1.6vw;
		font-family:'Pretendard',sans-serif;font-weight:600;
		font-size:2.564vw;line-height:4.103vw;letter-spacing:-0.077vw;
		color:#0186b5;white-space:nowrap;
	}
	#main .hero-m-icons__item em{
		font-family:'Pretendard',sans-serif;font-style:normal;font-weight:500;
		font-size:1.795vw;line-height:1.538vw;letter-spacing:-0.054vw;color:#0186b5;
	}

	#main .hero-m-cell{position:absolute;left:4.231%;top:81.375%;width:14.359%;z-index:2;}
	#main .hero-m-cell img{display:block;width:100%;height:auto;}
	#main .hero-m-column{position:absolute;left:20.256%;top:57.875%;width:8.718%;height:31.375%;z-index:2;}
	#main .hero-m-column__pic{position:absolute;inset:0;overflow:hidden;opacity:.8;}
	#main .hero-m-column__pic img{position:absolute;width:1067.82%;height:116.36%;left:-52.87%;top:-14.77%;max-width:none;}
	#main .hero-m-column__sh{position:absolute;left:6.7%;top:92%;width:93%;height:auto;}
	#main .hero-m-skid{position:absolute;left:61.795%;top:57.875%;width:25.256%;height:28.875%;z-index:2;}
	#main .hero-m-skid__pic{position:absolute;inset:0;overflow:hidden;}
	#main .hero-m-skid__pic img{position:absolute;width:395.94%;height:346.32%;left:-252.79%;top:-197.4%;max-width:none;}
	#main .hero-m-skid__sh{position:absolute;left:-4%;top:84%;width:104%;height:auto;}
	#main .hero-m-bubble{position:absolute;z-index:3;text-align:center;}
	#main .hero-m-bubble__shape{position:absolute;inset:0;width:100%;height:100%;}
	#main .hero-m-bubble strong{
		position:absolute;left:0;right:0;
		font-family:'Pretendard',sans-serif;font-weight:600;
		font-size:2.051vw;line-height:2.564vw;letter-spacing:-0.062vw;white-space:nowrap;
	}
	#main .hero-m-bubble--nano{left:32.179%;top:55.75%;width:26.923%;height:14.125%;}
	#main .hero-m-bubble--nano strong{top:56.6%;color:#609d35;}
	#main .hero-m-bubble__logo--nano{position:absolute;left:12.86%;top:24.46%;width:67.3%;height:27%;overflow:hidden;}
	#main .hero-m-bubble__logo--nano img{position:absolute;width:107.49%;height:130.61%;left:-4.85%;top:-10.2%;max-width:none;}
	#main .hero-m-bubble--lisure{left:32.179%;top:73.625%;width:26.923%;height:14.75%;}
	#main .hero-m-bubble--lisure strong{top:57.6%;color:#01a097;}
	#main .hero-m-bubble__logo--lisure{position:absolute;left:27.6%;top:25.4%;width:45.2%;height:auto;}

	#main .hero-m-flow{
		position:absolute;left:10.256%;top:40.625%;width:51.1%;height:11.837%;z-index:2;
		display:flex;justify-content:space-between;align-items:flex-start;
	}
	#main .hero-m-flow__step{
		position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:8.06vw;
	}
	#main .hero-m-flow__step img{width:8.06vw;height:auto;display:block;}
	#main .hero-m-flow__step span{
		position:absolute;top:calc(100% + 1.2vw);left:50%;transform:translateX(-50%);
		font-family:'Pretendard',sans-serif;font-weight:600;
		font-size:1.538vw;line-height:1.2;letter-spacing:-0.062vw;white-space:nowrap;
	}
	#main .hero-m-flow__step:nth-child(4) span{color:#16594e;}
	#main .hero-m-flow__step:nth-child(5) span{color:#0b69a2;}
	#main .hero-m-flow__step:nth-child(6) span{color:#17558c;}
	#main .hero-m-flow__step:nth-child(7) span{color:#249b8d;}
	#main .hero-m-flow__c{position:absolute;top:29.9%;height:auto;z-index:0;}
	#main .hero-m-flow__c1{left:15%;width:12.6%;}
	#main .hero-m-flow__c2{left:41.8%;width:11.8%;}
	#main .hero-m-flow__c3{left:67.8%;width:12.9%;}

	#main .hero-m-partner{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;}
	#main .hero-m-partner strong{
		font-family:'Pretendard',sans-serif;font-weight:600;
		font-size:2.308vw;line-height:4.103vw;letter-spacing:-0.069vw;
	}
	#main .hero-m-partner--bio{left:12.692%;top:72.875%;width:30.897%;}
	#main .hero-m-partner--bio strong{color:#1b5433;}
	#main .hero-m-partner--wel{left:53.846%;top:72.375%;width:33.59%;}
	#main .hero-m-partner--wel strong{color:#3e6ab3;}
	#main .hero-m-partner__logo{display:block;overflow:hidden;margin:0 auto 1.4vw;}
	#main .hero-m-partner__logo--bio{width:18.462vw;height:5vw;position:relative;}
	#main .hero-m-partner__logo--bio img{position:absolute;width:121.64%;height:139.13%;left:-12.87%;top:-19.57%;max-width:none;}
	#main .hero-m-partner__logo--wel{width:20.513vw;height:5.513vw;position:relative;}
	#main .hero-m-partner__logo--wel img{position:absolute;width:113.16%;height:137.25%;left:-8.95%;top:-25.49%;max-width:none;}
}

/* main : 모션 끔 — 히어로 줌아웃·페이드업은 모션이라 끔 상태에서는 최종 모습만 둔다 */
@media (prefers-reduced-motion:reduce){
	.visual.is-hero-motion .main-hero__bg,
	.visual.is-hero-motion .swiper-slide-active .main-hero__bg,
	.visual.is-hero-motion .swiper-slide-active .main-hero__eyebrow,
	.visual.is-hero-motion .swiper-slide-active .main-hero__tit,
	.visual.is-hero-motion .swiper-slide-active .main-hero__desc,
	.visual.is-hero-motion .swiper-slide-active .main-hero__cta,
	.visual.is-hero-motion .swiper-slide-active .hero-steps:before,
	.visual.is-hero-motion .swiper-slide-active .hero-steps__item,
	.visual.is-hero-motion .swiper-slide-active .hero-media,
	.visual.is-hero-motion .swiper-slide-active .hero-brand,
	.visual.is-hero-motion .swiper-slide-active .hero-feats__item,
	.visual.is-hero-motion .swiper-slide-active .hero-flow,
	.visual.is-hero-motion .swiper-slide-active .hero-card{
		animation:none;opacity:1;transform:none;transition:none;
	}
}

/* ═════════════════════════════════════════════
 sub : responsive [ 이관 · 원본 css/sub.css]
 시안(서브)도 1920 단일 폭이라 폭별 시안 근거가 없다 — 규칙 브레이크포인트(1400·1280·1024·768·480)로
 흐름 재배치·글자 단계만 줄인다(새 요소 없음). 보이는 비주얼 높이·탭 크기는 sub.css 의
 --h-visual · --h-lnb · --m-lnb 세 값만 바꿔 조절한다(헤더 높이는 --h-header 가 따로 정한다).
═════════════════════════════════════════════ */
@media (max-width:1600px){
	/* s2_2 — Block 폭 1600 이 화면 폭과 같아지는 구간: 3depth 열을 줄이고 설명 줄바꿈(br)을 풀어 본문 열(≥260)을 지킨다 */
	.s2-2-side{flex-basis:240px;}
	.s2-2-list{gap:24px;}
	.s2-2-card{gap:30px;}
	.s2-2-card__desc .br-pc{display:none;}
}

@media (max-width:1400px){
	:root{--h-visual:420px;}
	.real-cont{padding:100px 0 140px;}
	.page-header h1{font-size:var(--fs-head-l);line-height:var(--lh-head-l);letter-spacing:-1.56px;}
	#sub .section-header h2{font-size:var(--fs-head-ml);line-height:1.3;letter-spacing:-1.32px;}

	/* s1_1 — 두 열을 고정 px(696/640)에서 유동으로: 이미지 열은 46%, 텍스트 열이 나머지. 시안의 줄바꿈은
 696px 열에 맞춘 것이라 이 폭부터는 끄고(.br-pc) 글이 열 폭에 맞춰 흐르게 한다. */
	.real-cont.s1_1{padding:100px 0 0;}
	#sub .s1_1 .section-header{margin-bottom:80px;}
	.s1_1 .arti01{padding-bottom:160px;}
	.s1_1 .arti01 .container{gap:40px;}
	.s1_1 .arti01__cont{flex:1 1 0;min-width:0;}
	.s1_1 .arti01__fig{flex:0 0 46%;width:46%;}
	.br-pc{display:none;}

	/* s1_2 — 시안이 1920 단일 폭이라 새 요소 없는 흐름 재배치만 한다(예외) */
	.real-cont.s1_2{padding:100px 0 140px;}
	#sub .s1_2 .section-header{margin-bottom:80px;}

	/* s2_2 */
	.real-cont.s2_2{padding:100px 0 140px;}
	#sub .s2_2 .section-header{margin-bottom:80px;}
	.s2-2-side{flex-basis:210px;}
	.s2-2-list{gap:20px;}
	.s2-2-card{gap:24px;min-height:0;padding:23px;}                      /* 이미지 160 · 간격 24 — 카드 폭이 줄어 본문 열(≥265)을 지킨다 */
	.s2-2-card__pic{flex-basis:160px;width:160px;height:160px;}
}

@media (max-width:1280px){
	/* 데스크톱 기준 분기 — 컨테이너 2차 축소 (RWD-01) */

	/* s2_2 — 2depth 5개: 한 줄 유지, 넘치면 가로로 흐른다(줄바꿈이면 Sub_Visual 안 슬로건과 겹친다).
 위 일반 규칙(.page-header .lnb ul …, 1024·480 블록)과 같은 셀렉터라 소스 순서에 기대면 아래 폭 블록이 이 값을 되돌린다 —
 그래서 SOLUTION 비주얼(.type2)로 한정해 특이도로 이기게 했다(순서와 무관). 이 값은 ≤1024·≤480 까지 그대로 이어진다. */
	.page-header.type2 .lnb ul{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
	.page-header.type2 .lnb ul::-webkit-scrollbar{display:none;}
	.page-header.type2 .lnb ul li{flex:1 1 0;min-width:max-content;}   /* [고도화 2차 · 폭별 점검] 이전 flex:1 0 auto 는 글자 길이대로 폭이 달라져 1281 이상(5등분)과 달리 1280 부터 알약 폭이 제각각이었다(1280 에서 183~337px). 5등분을 유지하되 글자보다 좁아지지 않게(min-width) — 넘치면 가로 스크롤 */
	.page-header.type2 .lnb ul li a{padding:0 20px;white-space:nowrap;}
}
@media (max-width:1200px){
	.s2-2-list{grid-template-columns:minmax(0,1fr);}        /* s2_2 — 카드 폭 ≥ 640 이 되는 한 열 */
}
@media (max-width:1024px){
	:root{--h-visual:340px;--h-lnb:48px;--m-lnb:24px;}
	.real-cont{padding:70px 0 100px;}
	.page-header h1{font-size:var(--fs-head-m);line-height:var(--lh-head-m);letter-spacing:-1.08px;}
	.lnb ul{overflow-x:auto;-webkit-overflow-scrolling:touch;}
	.lnb ul li{flex:0 0 auto;}
	.lnb ul li a{height:56px;padding:0 20px;font-size:var(--fs-body-s);white-space:nowrap;}
	/* 비주얼 위 2depth 탭은 위 board 견본용 스크롤 트랙 규칙과 달리 2개가 한 줄을 반씩 나눈다 */
	.page-header .lnb ul{overflow-x:visible;}
	.page-header .lnb ul li a{padding:0 12px;font-size:var(--fs-body-s);line-height:24px;letter-spacing:-.48px;white-space:normal;}
	#sub .section-header{margin-bottom:40px;}
	#sub .section-header h2{font-size:var(--fs-head-m);line-height:1.3;letter-spacing:-1.08px;}
	.article-header h3{font-size:var(--fs-head-xs);}
	article ~ article{margin-top:70px;}

	/* s1_1 — 한 열로 쌓는다: 제목 → 이미지 → 본문. 회색 띠는 본문 블록이 직접 전폭으로 깐다
 (두 열일 때의 ::before 띠는 이 구간에서 끈다). */
	.real-cont.s1_1{padding:70px 0 0;}
	#sub .s1_1 .section-header{margin-bottom:60px;}
	.s1_1 .arti01{padding-bottom:0;}
	.s1_1 .arti01:before{display:none;}
	.s1_1 .arti01 .container{flex-direction:column;align-items:stretch;gap:0;}
	.s1_1 .arti01__cont{display:contents;}
	.s1_1 .arti01__head{order:1;}
	.s1_1 .arti01__tit{font-size:var(--fs-head-ms);line-height:1.4;letter-spacing:-.96px;}
	.s1_1 .arti01__fig{order:2;flex:none;width:100%;max-width:640px;margin:40px auto 60px;}   /* 아래 60 = 로고가 이미지 밖으로 나오는 만큼(≤40)보다 크게 */
	.s1_1 .arti01__txt{order:3;margin:0 calc(var(--pad-side) * -1);padding:48px var(--pad-side) 80px;background:var(--c-bg-weak);}

	/* s1_2 — Map 은 1440:460 비율로 줄이고 Txt/Btn 은 세로로 쌓는다 */
	.real-cont.s1_2{padding:70px 0 100px;}
	#sub .s1_2 .section-header{margin-bottom:60px;}
	.s1-2-map{height:auto;aspect-ratio:1440/460;}
	.s1-2-info{flex-direction:column;align-items:stretch;gap:30px;}
	.s1-2-txt{flex:none;}
	.s1-2-btns{align-self:flex-end;}

	/* s2_2 — 3depth 는 가로 스크롤이 아니라 줄바꿈(숨는 항목이 없다). 2depth 5개의 글자 단계는 위 ≤1280 한정 규칙과 같은 이유로 .type2 로 한정 */
	.real-cont.s2_2{padding:70px 0 100px;}
	#sub .s2_2 .section-header{margin-bottom:60px;}
	.s2-2-block{flex-direction:column;}
	.s2-2-side{flex:none;width:100%;margin-bottom:40px;}
	.s2-2-cat__list{display:flex;flex-wrap:wrap;gap:10px;}
	.s2-2-cat__btn:hover:after,
	.s2-2-cat__btn:focus-visible:after,
	.s2-2-cat__btn.is-active:after{margin-left:20px;}
	.s2-2-main{width:100%;max-width:none;}
	.page-header.type2 .lnb ul li a{font-size:var(--fs-body-s);line-height:24px;}
}

@media (max-width:768px){
	:root{--h-visual:260px;--h-lnb:44px;--m-lnb:20px;}
	.real-cont{padding:50px 0 80px;}
	.page-header h1{font-size:var(--fs-head-s);line-height:var(--lh-head-s);letter-spacing:-.84px;}
	#sub .section-header h2{font-size:var(--fs-head-sm);letter-spacing:-.9px;}
	.article-header h3{font-size:var(--fs-body-l);}

	.real-cont.s1_1{padding:50px 0 0;}
	#sub .s1_1 .section-header{margin-bottom:40px;}
	.s1_1 .arti01__tit{font-size:var(--fs-head-s);letter-spacing:-.84px;}
	.s1_1 .arti01__fig{margin:32px auto 48px;}
	.s1_1 .arti01__txt{padding:40px var(--pad-side) 60px;}
	.s1_1 .arti01__txt p{font-size:var(--fs-body-s);line-height:1.8;letter-spacing:-.48px;}
	.s1_1 .arti01__txt p + p{margin-top:1.8em;}
	.s1_1 .arti01__txt .arti01__sign{margin-top:28px;font-size:var(--fs-body-l);line-height:1.5;letter-spacing:-.6px;}

	/* s1_2 */
	.real-cont.s1_2{padding:50px 0 80px;}
	#sub .s1_2 .section-header{margin-bottom:40px;}
	/* 1440:460 비율을 375 까지 끌고 가면 높이 110px 로 지도로 쓸 수 없다(실측 345×110) — 비율 대신 고정 높이(시안 값 아님 · 확인 사항) */
	.s1-2-map{aspect-ratio:auto;height:280px;}
	.s1-2-txt dt,
	.s1-2-txt dd{font-size:var(--fs-body-s);line-height:30px;letter-spacing:-.48px;}
	.s1-2-btns{align-self:stretch;}
	.s1-2-btns__btn{flex:1 1 0;width:auto;min-width:0; font-size: 16px; height: 46px;}
	
	/* s2_2 */
	.real-cont.s2_2{padding:50px 0 80px;}
	#sub .s2_2 .section-header{margin-bottom:40px;}
	.s2-2-side{margin-bottom:32px;}
	.s2-2-top{flex-wrap:wrap;}
	.s2-2-top__form{flex:1 1 auto;justify-content:flex-end;}
	.s2-2-card{gap:20px;padding:19px;}
	.s2-2-card__pic{flex-basis:140px;width:140px;height:140px;}
	.s2-2-card__tit{font-size:var(--fs-head-xs);line-height:1.4;letter-spacing:-.72px;}
	.s2-2-card__desc{font-size:var(--fs-body-s);line-height:26px;letter-spacing:-.48px;}

	.s2-2-cat__btn{font-size: 16px;}
}

@media (max-width:480px){
	:root{--h-visual:200px;--h-lnb:40px;--m-lnb:16px;}
	.page-header h1{font-size:var(--fs-head-xs);line-height:1.4;letter-spacing:-.72px;}
	.page-header .lnb ul{gap:8px;}
	.lnb ul li a{height:48px;padding:0 14px;font-size:var(--fs-label);}
	.page-header .lnb ul li a{padding:0 8px;font-size:var(--fs-label);line-height:20px;letter-spacing:-.45px;}
	#sub .section-header h2{font-size:var(--fs-head-xs);letter-spacing:-.72px;padding-top:34px;}
	article ~ article{margin-top:50px;}

	.s1_1 .arti01__tit{font-size:var(--fs-head-xs);letter-spacing:-.72px;}

	/* s1_2 */
	.s1-2-map{height:240px;}

	/* s2_2 */
	.s2-2-top__total{width:100%;}
	.s2-2-top__form{width:100%;}
	.s2-2-field{flex:1 1 0;width:auto;min-width:0;}
	.s2-2-sort{flex:0 0 120px;width:120px;}
	.s2-2-card{flex-direction:column;gap:16px;}
	.s2-2-card__pic{flex:none;width:100%;max-width:220px;height:auto;aspect-ratio:1/1;}
	.s2-2-card__body{flex:none;width:100%;padding-top:0;}
	.s2-2-card__tit{font-size:var(--fs-head-2xs);}
	.s2-2-card__btn{margin-top:0;}
}

/* ═════════════════════════════════════════════
 motion : reduce [짝]
 AOS 는 reduce 에서 js 가 disable 해 data-aos 를 걷어내지만(main.js·sub.js 그대로) 그 전까지 aos.css 의
 `[data-aos]{opacity:0}` 가 칠해져 첫 화면 노출 영역이 비어 있다가 한 프레임에 나타났다(로컬 ≈140ms ·
 Fast 4G ≈1s — 스크립트가 body 끝이라). reduce 에서만 CSS 로 즉시 최종 상태를 준다. 속성 3중 겹침은
 aos.css `[data-aos^=fade][data-aos^=fade].aos-animate`(0,3,0)와 특이도를 맞추고 소스 순서(이 파일이 뒤)로 이긴다.
 모션 켬(reduce 아님)에서는 이 블록이 매칭되지 않아 값이 바뀌지 않는다. main.css/sub.css 는 @media 를 두지 않는다(CSS-02).
═════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
	[data-aos][data-aos][data-aos]{opacity:1;transform:none;transition:none;}
}