@charset "UTF-8";

/* Myriad Pro : 유료 폰트(Adobe) → 파일/Adobe Fonts 없으면 무료 대체폰트 Source Sans 3(Adobe 오픈소스, 유사 서체)로 표시 */
@font-face { font-family: 'Myriad Pro'; font-weight: 700; src: local('Myriad Pro Bold'), local('MyriadPro-Bold'); }
@font-face { font-family: 'Myriad Pro'; font-weight: 600; src: local('Myriad Pro Semibold'), local('MyriadPro-Semibold'); }

/* G마켓 산스 Medium (눈누 CDN) */
@font-face { font-family: 'GmarketSansMedium'; font-weight: 500; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff'); }

/* reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; vertical-align: top; border: 0; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } /* 이미지 드래그 방지 */
button { border: 0; background: none; cursor: pointer; }
body { font-family: 'Noto Sans KR', sans-serif; color: #333; background: #fff; min-width: 320px; }

/* ===== 헤더 ===== */
#header { position: relative; display: flex; align-items: center; justify-content: space-between; height: 90px; padding: 0 138px 0 70px; background: #0f193e; z-index: 100; transition: background-color .25s ease; }
#header .logo img, .aside .as-logo img { display: block; width: auto; height: auto; }   /* 새 로고 116×48 원본 크기 그대로 */
#header .gnb { position: absolute; left: 50%; top: 0; z-index: 2; height: 100%; transform: translateX(-50%); }
#header .gnb ul { display: flex; height: 100%; }
#header .gnb li a { display: flex; align-items: center; justify-content: center; width: auto; padding: 0 57.5px; height: 100%;   /* 대메뉴 글자 사이 115px */ font-size: 18px; font-weight: 400; color: #fff; transition: color .25s ease; }
/* 메뉴 호버 : 글자가 아래로 굴러가고 같은 글자가 위에서 내려옴 (전체 메뉴와 같은 방식) */
#header .gnb .roll { position: relative; display: block; height: 1.5em; overflow: hidden; line-height: 1.5em; -webkit-font-smoothing: antialiased; }
#header .gnb .lb { display: block; transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
#header .gnb .lb-clone { position: absolute; inset: 0; color: #2fa7dc; transform: translateY(-110%); opacity: 0; }   /* 굴러 들어오는 글자는 하늘색 · 평소엔 완전히 숨김 (맥·레티나에서 글자 끝이 삐져나와 보이지 않게) */
#header .gnb a:hover .lb:first-child, #header .gnb a:focus-visible .lb:first-child { transform: translateY(110%); opacity: 0; }
#header .gnb a:hover .lb-clone, #header .gnb a:focus-visible .lb-clone { transform: none; opacity: 1; }
/* 하위 메뉴 (상림디엠텍 방식) : 메뉴에 마우스를 올리면 헤더가 흰색으로 바뀌고(로고·글자 어둡게), 바로 아래 흰 띠에 모든 하위 메뉴가 이어져 펼쳐짐 */
#header:has(.gnb:hover), #header:has(.gnb :focus-visible) { background: #fff; }
#header:has(.gnb:hover) .gnb li > a, #header:has(.gnb :focus-visible) .gnb li > a { color: #222; }
#header .logo img, #header .btn-ham img { transition: filter .25s ease; }
#header:has(.gnb:hover) .logo img, #header:has(.gnb:hover) .btn-ham img, #header:has(.gnb :focus-visible) .logo img, #header:has(.gnb :focus-visible) .btn-ham img { filter: brightness(0) opacity(.85); }
/* 메뉴 아래 짧은 남색 선 (마우스 올린 메뉴) */
#header .gnb li > a { position: relative; }
#header .gnb li > a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 110px; height: 2px; margin-left: -55px; background: #0f193e; transform: scaleX(0); transition: transform .3s ease; }
#header .gnb li:hover > a::after { transform: scaleX(1); }
/* 흰 띠 : 헤더와 띠 사이 얇은 회색 선 */
#header::after { content: ""; position: absolute; z-index: 1; left: 0; right: 0; top: 100%; height: 280px; background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e3e5e8; box-shadow: 0 8px 14px rgba(0,0,0,.04); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; }
#header:has(.gnb:hover)::after, #header:has(.gnb :focus-visible)::after { opacity: 1; visibility: visible; transition: opacity .25s ease; }
#header .gnb li { position: relative; }
#header .gnb-sub { position: absolute; left: 0; right: 0; top: 100%; z-index: 1; height: 280px; padding: 36px 0 0; text-align: center; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s ease, transform .3s ease, visibility 0s linear .3s; }
#header .gnb:hover .gnb-sub, #header .gnb:has(:focus-visible) .gnb-sub { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .3s ease; }
#header .gnb .gnb-sub a { display: block; width: auto; height: auto; padding: 5px 0; font-size: 15px; font-weight: 400; line-height: 1.5; letter-spacing: -.02em; color: #222; white-space: nowrap; transition: color .2s; }   /* 블랙톤 */
#header .gnb .gnb-sub a:hover { color: #0f193e; font-weight: 500; }
#header .btn-ham img { display: block; width: auto; height: 22px; }   /* 햄버거 원본 35×25 → 살짝 줄임 (약 31×22, 높이 정수 px) */
#header .btn-tel { display: none; }
.m-br { display: none; }
/* ===== 전체 메뉴 (aside) : 남색 전체 화면 + 가운데 메뉴(한글 / 영문) ===== */
body.menu-open { overflow: hidden; }
.aside { position: fixed; inset: 0; z-index: 2000; visibility: hidden; transition: visibility 0s linear .5s; }
body.menu-open .aside { visibility: visible; transition: none; }
.aside .as-bg { position: absolute; inset: 0; background: #0f193e; opacity: 0; transition: opacity .45s ease; }
body.menu-open .aside .as-bg { opacity: 1; }
/* 상단 바 : 헤더와 같은 자리에 로고 · 닫기 */
.aside .as-top { position: relative; margin-right: var(--sbw, 0px); display: flex; align-items: center; justify-content: space-between; height: 90px; padding: 0 138px 0 70px; opacity: 0; transition: opacity .4s ease; }
body.menu-open .aside .as-top { opacity: 1; }
.aside .as-logo img { display: block; }
.aside .as-close { position: relative; width: 35px; height: 35px; }   /* 햄버거(35px) 자리와 같게 */
.aside .as-close i { position: absolute; left: 50%; top: 50%; width: 34px; height: 2px; margin: -1px 0 0 -17px; background: #fff; border-radius: 2px; transition: transform .5s cubic-bezier(.22,1,.36,1) .15s; }
body.menu-open .aside .as-close i:first-child { transform: rotate(45deg); }
body.menu-open .aside .as-close i:last-child { transform: rotate(-45deg); }
/* 메뉴 */
.aside .as-gnb { position: absolute; left: 0; right: var(--sbw, 0px); top: 90px; bottom: 120px; display: flex; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; }   /* 낮은 화면에선 스크롤은 되지만 스크롤바는 안 보이게 */
.aside .as-gnb::-webkit-scrollbar { display: none; }
.aside .as-gnb ul { width: min(560px, calc(100% - 48px)); margin: auto; text-align: center; }   /* 원래대로 세로 가운데 (펼칠 때 위치 고정은 main.js) */
/* 닫힐 때 : 제자리에서 사라지기만 (위치는 사라진 뒤 원위치) */
.aside .as-gnb li { opacity: 0; transform: translateY(20px); transition: opacity .3s ease, transform 0s linear .5s; }
.aside .as-gnb li { display: flow-root; border-bottom: 1px solid rgba(255,255,255,.2); }
body.menu-open .aside .as-gnb li { opacity: 1; transform: none; transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1); }
body.menu-open .aside .as-gnb li:nth-child(1) { transition-delay: .12s; }
body.menu-open .aside .as-gnb li:nth-child(2) { transition-delay: .18s; }
body.menu-open .aside .as-gnb li:nth-child(3) { transition-delay: .24s; }
body.menu-open .aside .as-gnb li:nth-child(4) { transition-delay: .30s; }
body.menu-open .aside .as-gnb li:nth-child(5) { transition-delay: .36s; }
/* 검단 방식 : 줄마다 얇은 구분선, 마우스 올리면 글자가 아래로 굴러가고 같은 글자가 위에서 파랗게 내려옴 */
.aside .as-gnb li > a { position: relative; display: block; width: 100%; height: 48px; margin: clamp(14px, 2.6vh, 24px) 0; overflow: hidden; font-size: 34px; font-weight: 700; line-height: 48px; letter-spacing: -.03em; color: #fff; }
.aside .as-gnb .lb { display: block; transition: transform .8s cubic-bezier(.22,1,.36,1), opacity .4s ease; }
.aside .as-gnb .lb-clone { position: absolute; inset: 0; color: #2fa7dc; transform: translateY(-110%); opacity: 0; }   /* 평소엔 완전히 숨김 */
.aside .as-gnb a:hover .lb:first-child, .aside .as-gnb a:focus-visible .lb:first-child { transform: translateY(110%); opacity: 0; }
.aside .as-gnb a:hover .lb-clone, .aside .as-gnb a:focus-visible .lb-clone { transform: none; opacity: 1; }
/* 하위 메뉴 : 마우스 올리면 그 줄 아래로 펼쳐짐 (터치 기기는 항상 펼침) */
.aside .as-has-sub > .as-toggle { position: relative; display: block; width: 100%; margin: clamp(14px, 2.6vh, 24px) 0; font: inherit; color: #fff; cursor: pointer; }
.aside .as-toggle .roll { position: relative; display: block; height: 48px; overflow: hidden; font-size: 34px; font-weight: 700; line-height: 48px; letter-spacing: -.03em; }
.aside .as-toggle:hover .lb:first-child, .aside .as-has-sub.is-open .as-toggle .lb:first-child { transform: translateY(110%); opacity: 0; }
.aside .as-toggle:hover .lb-clone, .aside .as-has-sub.is-open .as-toggle .lb-clone { transform: none; opacity: 1; }
/* 오른쪽 끝 화살표 : 펼치면 위로 */
.aside .as-toggle::after { content: ""; position: absolute; right: 12px; top: 50%; width: 10px; height: 10px; border-right: 2px solid rgba(255,255,255,.7); border-bottom: 2px solid rgba(255,255,255,.7); transform: translateY(-70%) rotate(45deg); transition: transform .5s cubic-bezier(.22,1,.36,1); }
.aside .as-has-sub.is-open .as-toggle::after { transform: translateY(-30%) rotate(225deg); }
/* 하위 메뉴 : 세로로, 줄이 늘어나며 나타남 */
.aside .as-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s cubic-bezier(.22,1,.36,1); }   /* 메인 애니와 같은 감속 곡선 */
.aside .as-has-sub.is-open .as-sub { grid-template-rows: 1fr; }
.aside .as-sub-in { min-height: 0; overflow: hidden; }
/* 하위 메뉴 글자 : 메인처럼 하나씩 차례로 아래에서 올라옴 */
.aside .as-sub-in li { opacity: 0 !important; transform: translateY(14px) !important; transition: opacity .25s ease, transform 0s linear .3s !important; }
.aside .as-has-sub.is-open .as-sub-in li { opacity: 1 !important; transform: none !important; transition: opacity .5s ease, transform .6s cubic-bezier(.22,1,.36,1) !important; }
.aside .as-has-sub.is-open .as-sub-in li:nth-child(1) { transition-delay: .08s !important; }
.aside .as-has-sub.is-open .as-sub-in li:nth-child(2) { transition-delay: .13s !important; }
.aside .as-has-sub.is-open .as-sub-in li:nth-child(3) { transition-delay: .18s !important; }
.aside .as-has-sub.is-open .as-sub-in li:nth-child(4) { transition-delay: .23s !important; }
.aside .as-has-sub.is-open .as-sub-in li:nth-child(5) { transition-delay: .28s !important; }
.aside .as-has-sub.is-open .as-sub-in li:nth-child(6) { transition-delay: .33s !important; }
.aside .as-sub-in { display: flex; justify-content: center; column-gap: 34px; row-gap: 4px; padding-bottom: 0; }   /* 3개 이하 : 한 줄 가운데 */
.aside .as-sub-in:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(3, auto); justify-content: center; }   /* 4개 이상 : 3칸씩 */
.aside .as-sub-in li { flex: none; border: 0; }
.aside .as-gnb .as-sub-in a { white-space: nowrap; }
.aside .as-sub-in li:nth-last-child(-n+3) { padding-bottom: 18px; }   /* 마지막 줄 아래 여백 (안쪽 칸에 둬야 접힐 때 0) */
.aside .as-gnb .as-sub-in a { display: block; width: auto; height: auto; margin: 0; overflow: visible; font-weight: 400; padding: 4px 12px; font-size: 18px; line-height: 1.45; letter-spacing: -.045em; color: rgba(255,255,255,.72); transition: color .25s; }   /* 검단과 동일 */
.aside .as-gnb .as-sub-in a:hover { color: #2fa7dc; }
/* PC 마우스 : 펼침은 main.js 가 살짝 머문 뒤에만 (스치듯 지나가면 안 열림 → 깜빡임 방지) */
/* 하단 : 전화 · 카피라이트 */
.aside .as-info { position: absolute; left: 0; right: var(--sbw, 0px); bottom: 45px; text-align: center; font-size: 15px; color: rgba(255,255,255,.4); opacity: 0; transition: opacity .5s ease; }
body.menu-open .aside .as-info { opacity: 1; transition-delay: .42s; }
.aside .as-info a { display: inline-block; margin-bottom: 8px; font-size: 17px; color: rgba(255,255,255,.75); letter-spacing: .02em; }
.aside .as-info p { font-size: 13px; letter-spacing: .02em; }
@media (max-width: 1600px) {
	.aside .as-top { padding: 0 50px; }
}
/* 낮은 화면(노트북) : 전체 메뉴를 한 화면에 (하위 메뉴 펼쳐도 잘리지 않게) */
@media (min-width: 1024px) and (max-height: 800px) {
	.aside .as-gnb { bottom: 90px; }
	.aside .as-gnb li > a, .aside .as-toggle .roll { height: 40px; font-size: 28px; line-height: 40px; }
	.aside .as-gnb li > a, .aside .as-has-sub > .as-toggle { margin: 14px 0; }
	.aside .as-gnb .as-sub-in a { font-size: 16px; }
	.aside .as-sub-in li:nth-last-child(-n+3) { padding-bottom: 12px; }
	.aside .as-info { bottom: 24px; }
}
/* 태블릿 이하 : 헤더와 같게 닫기 버튼 왼쪽 · 로고 가운데 */
@media (max-width: 1023px) {
	.aside .as-top { height: 64px; padding: 0 16px; flex-direction: row-reverse; justify-content: flex-end; }
	.aside .as-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
	.aside .as-logo img { width: 96px; height: auto; }
	.aside .as-close { width: 25px; height: 25px; }
	.aside .as-close i { width: 24px; height: 2px; margin: -1px 0 0 -12px; }
	.aside .as-gnb { top: 64px; bottom: 90px; }
	.aside .as-gnb li > a, .aside .as-has-sub > .as-toggle { height: 36px; margin: 18px 0; font-size: 24px; line-height: 36px; }
	.aside .as-toggle .roll { height: 36px; font-size: 24px; line-height: 36px; }
	.aside .as-gnb .as-sub-in a { font-size: 16px; }
	.aside .as-sub-in { column-gap: 20px; row-gap: 2px; }
	.aside .as-sub-in li:nth-last-child(-n+3) { padding-bottom: 12px; }
	.aside .as-info { bottom: 28px; }
	.aside .as-info a { font-size: 14px; margin-bottom: 4px; }
	.aside .as-info p { font-size: 10px; }
}
@media (max-width: 767px) {
	.aside .as-top { padding: 0 calc(100vw * 40 / 842); }
}

/* ===== 메인 1단 : 비주얼 ===== */
.main-visual { position: relative; overflow: hidden; }
/* PC·태블릿 : main-01_n.jpg (헤더 자리 여백 없음) 그대로 헤더 아래에 / 모바일은 main-01.jpg 를 아래 모바일 규칙에서 잘라 씀 */
.main-visual picture { display: block; }
.main-visual .bg { display: block; width: 100%; }
/* 1단 영상 : 기존 이미지와 같은 1920×850 비율 안에 꽉 채움 (위아래 살짝 잘림) */
.main-visual .bg-video { aspect-ratio: 1920 / 850; height: auto; object-fit: cover; object-position: center; }
/* 영상 시작 버벅임 방지 : 받는 동안은 같은 장면 이미지를 깔아두고, 실제로 재생이 시작되면 영상을 부드럽게 겹쳐 보여줌 + 영상엔 줌 효과 안 씀(무거움) */
@media (min-width: 768px) { .main-visual { background: #0f193e url('../images/main-01_n.jpg') center top / cover no-repeat; } }
.js .main-visual .bg-video, .js .main-visual .bg-video-m { opacity: 0; transform: none !important; transition: opacity 1s ease; }
.js .main-visual .bg-video.is-playing, .js .main-visual .bg-video-m.is-playing { opacity: 1; }
.main-visual .bg-video-m { display: none; }
/* 1920 모니터 : 원본(1920px) 그대로 가운데, 스크롤바 폭만큼 양끝 몇 px 만 가림 → 축소로 흐려지지 않게
   (아이맥처럼 1920 보다 넓은 화면은 화면 폭에 꽉 차게 — 양옆 빈 띠 안 생기게) */
@media (min-width: 1880px) and (max-width: 1960px) {
	.main-visual .bg { width: 1920px; max-width: none; margin-left: calc(50% - 960px); }
}
.main-visual .mv-left { position: absolute; left: 7.2%; top: 18%; color: #fff; font-family: 'Myriad Pro', 'Source Sans 3', 'Noto Sans KR', sans-serif; }
.main-visual .mv-tit { font-size: min(109px, 5.68vw); font-weight: 700; line-height: .9; letter-spacing: -.01em; }
.main-visual .mv-sub { margin-top: .35em; font-size: min(32px, 1.67vw); font-weight: 600; letter-spacing: -.01em; }
.main-visual .mv-right { position: absolute; z-index: 1; left: 65%; bottom: 18%; color: #fff; text-shadow: 0 1px 3px rgba(10,16,40,.55), 0 2px 18px rgba(10,16,40,.5); font-family: 'Noto Serif KR', 'Noto Serif CJK KR', serif; font-weight: 400; --fs: min(53px, 2.76vw); }
/* 카피 뒤 아주 옅은 남색 그늘 (경계 없이 번지게) → 밝은 배경에서도 글자 또렷 */
.main-visual .mv-right::before { content: ""; position: absolute; z-index: -1; inset: -35% -18% -30% -14%; background: radial-gradient(ellipse at 45% 50%, rgba(10,16,40,.38) 0%, rgba(10,16,40,.18) 45%, rgba(10,16,40,0) 72%); pointer-events: none; }
.main-visual .mv-copy { font-size: var(--fs); line-height: 1.25; letter-spacing: -.02em; }
/* "신" = "공" 아래, "리스크" 의 "리" = "신" 시작점 → 첫 글자(성) 폭만큼 들여쓰기 */
.main-visual .mv-copy .indent { display: inline-block; padding-left: .946em; }
.main-visual .mv-desc { margin-top: .9em; padding-left: calc(var(--fs) * .946); font-size: min(19px, 0.99vw); line-height: 1.45; letter-spacing: -.03em; }

/* ===== 메인 2단 : 카피 ===== */
.main-intro { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 400px; background: #fff; padding: 0 20px; }
.main-intro .intro-txt { margin-top: 40px; font-family: 'GmarketSansMedium', 'Noto Sans KR', sans-serif; font-size: 24px; color: #595857; line-height: 1.4; letter-spacing: -.03em; text-align: center; }

/* ===== 메인 3단 : 바로가기 3칸 ===== */
.main-biz { position: relative; overflow: hidden; }
.main-biz picture { display: block; }
.main-biz .bg { display: block; width: 100%; }
.main-biz .biz-list { position: absolute; top: 0; bottom: 0; left: 8.55%; right: 8.55%; display: flex; }
.main-biz .biz-list li { flex: 1; border-right: 2px solid rgba(255,255,255,.6); }
.main-biz .biz-list li:first-child { border-left: 2px solid rgba(255,255,255,.6); }
.main-biz .biz-list a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #fff; text-align: center; transition: background-color 1.2s ease; }
.main-biz .biz-list a:hover { background-color: rgba(47,167,220,.85); transition-duration: .35s; }
/* 사업분야 → 업무실적 → 업무의뢰 순으로 파란색이 천천히 돌아감 (main.js .is-active) / 마우스 올리면 멈추고 올린 칸만 파란색 */
.main-biz .biz-list a.is-active { background-color: rgba(47,167,220,.85); }
.main-biz .biz-list:hover a.is-active:not(:hover) { background-color: transparent; transition-duration: .35s; }

/* ===== 메인 4단 : 다운로드 / 온라인 문의 ===== */
.main-cs { display: flex; align-items: center; height: 440px; background: #fff; }
.main-cs .cs-wrap { display: flex; width: 100%; padding: 0 8.55%; }
.main-cs .cs-box { position: relative; flex: 1; height: 295px; padding: 75px 0 0 100px; }
/* 세로 구분선 : 애니메이션용으로 가상요소 사용 */
.main-cs .cs-box::before,
.main-cs .cs-box:last-child::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1px; background: #c9c9c9; transform-origin: top; }
.main-cs .cs-box::before { left: 0; }
.main-cs .cs-box:last-child::after { right: 0; }
.main-cs .cs-icon { position: absolute; right: 100px; bottom: 20px; height: auto; }
/* 다운로드 자료실 : 제목~아이콘 사이 면적만 클릭 */
.main-cs .cs-hit { position: absolute; z-index: 2; top: 75px; left: 100px; right: 100px; bottom: 20px; }

/* ===== 푸터 ===== */
/* 푸터 : 참고 사이트처럼 작고 단정하게 */
#footer { display: flex; align-items: center; height: 150px; padding: 0 70px; background: #211815; }   /* 글자 매끄럽게 처리(antialiased) 빼서 얇은 글자가 더 가늘고 흐려지지 않게 */
#footer .f-logo { flex-shrink: 0; width: 220px; }
#footer .f-logo img { display: block; width: 128px; height: auto; }
#footer .f-info { font-size: 14px; font-weight: 400; color: #b3b3b3; line-height: 1.8; letter-spacing: 0; }   /* 흐려 보여서 한 단계 밝게 */
#footer .addr span { margin-right: 22px; }
#footer .addr span:last-child { margin-right: 0; }
#footer .addr b { margin-right: 6px; font-weight: 700; }
#footer .copy { margin-top: 4px; font-size: 14px; font-weight: 500; color: #a0a0a0; letter-spacing: .02em; }   /* 너무 얇고 연하면 깨져 보임 → 한 단계 굵고 밝게 */

/* ===== 애니메이션 (JS 있을 때만 숨김 → 스크롤로 보이면 .is-in) ===== */
.js [data-ani] { opacity: 0; transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1); transition-delay: var(--d, 0s); }
.js [data-ani="up"] { transform: translateY(40px); }
.js [data-ani="down"] { transform: translateY(-20px); }
.js [data-ani].is-in { opacity: 1; transform: none; }
/* LEADING / THE WAY : 줄 단위로 아래에서 밀려 올라옴 */
.main-visual .mv-tit .line { display: block; overflow: hidden; padding-top: .08em; margin-top: -.08em; }
.main-visual .mv-tit .line > span { display: inline-block; }
.js [data-ani="mask"] { opacity: 1; transform: translateY(105%); transition: transform 1.1s cubic-bezier(.22,.61,.36,1) var(--d, 0s); }
.js [data-ani="mask"].is-in { transform: none; }
.js .main-visual [data-ani] { transition-duration: 1.1s; }   /* 메인 1단 카피 : 헤더가 다 내려온 뒤 시작, 속도는 보통 */
.js .main-visual [data-ani="mask"] { transition-duration: 1.2s; }
/* 메인 비주얼 배경 : 천천히 줌아웃 */
.js .main-visual .bg { transform: scale(1.08); transition: transform 6s cubic-bezier(.22,.61,.36,1); }
.js .main-visual.is-loaded .bg { transform: none; }
/* 3단 글자 : 등장 후 transform 해제 */
.main-biz .biz-list a > [data-ani] { display: block; }
/* 섹션 재진입 대비 초기화 : 화면 밖에서 즉시 원위치 */
.ani-reset, .ani-reset *, .ani-reset *::before, .ani-reset *::after { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
	.js [data-ani], .js .main-visual .bg, .js [data-ani] *, .js [data-ani]::before, .js [data-ani]::after { opacity: 1 !important; transform: none !important; translate: none !important; transition: none !important; }
}

/* ===== 반응형 (노트북/태블릿 : 잘림·겹침 방지) ===== */
@media (max-width: 1600px) {
	#header { padding: 0 50px; }
	#header .gnb li a { padding: 0 40px; }
	.main-cs .cs-box { padding-left: 60px; }
	.main-cs .cs-icon { right: 60px; }
	.main-cs .cs-hit { left: 60px; right: 60px; }
}
@media (max-width: 1200px) {
	#header .gnb li a { padding: 0 24px; font-size: 17px; }
	.main-cs .cs-box { padding: 50px 0 0 40px; }
	.main-cs .cs-txt { max-width: 70%; }
	.main-cs .cs-icon { right: 30px; }
	.main-cs .cs-hit { top: 50px; left: 40px; right: 30px; }
	#footer { flex-direction: column; justify-content: center; align-items: flex-start; height: auto; padding: 40px 50px; gap: 20px; }
}
/* 태블릿 이하 : 모바일 헤더 (햄버거 좌 · 로고 중앙 · 전화 우) */
@media (max-width: 1023px) {
	#header { height: 64px; padding: 0 16px; }
	#header .gnb { display: none; }
	#header .logo { position: absolute; left: 0; right: 0; pointer-events: none; }
	#header .logo a { display: block; width: auto; display: table; margin: 0 auto; pointer-events: auto; }
	#header .logo img { width: auto; height: 40px; }
	#header .btn-ham img { width: auto; height: 18px; }   /* 높이를 정수 px 로 → 반 픽셀 어긋남 없이 가운데 */
	#header .btn-tel { display: block; }
	#header .btn-tel img { display: block; width: auto; height: 22px; }
	@media (max-width: 767px) { #header .btn-tel img { height: 20px; } }   /* m_tel_icon (가이드 45 ≒ 20px) */
	#header .logo[data-ani], #header .btn-ham[data-ani], #header .btn-tel[data-ani] { --d: .1s !important; }   /* 햄버거·로고·전화가 같이 내려오게 (등장 중에도 줄 맞음) */
}

/* ===== 모바일 (모바일 가이드 기준) ===== */
@media (max-width: 767px) {
	.m-br { display: inline; }

	/* 헤더 : 햄버거·전화 좌우 여백 40 (가이드 842px 기준) */
	#header { padding: 0 calc(100vw * 40 / 842); }
	/* 로고 : m_logo 187px (가이드 842px 기준) */
	#header .logo a { width: auto; display: table; }
	#header .logo img, .aside .as-logo img { width: auto !important; height: 34px !important; }   /* m_logo (가이드 187 ≒ 83×34) 정수 높이 */

	/* 1단 */
	/* 모바일 : 모바일 전용 영상 (받는 동안은 첫 장면 이미지를 깔아둠) */
	.main-visual { background: #0f193e url('../images/m/m_main-01_poster.jpg') center / cover no-repeat; }
	.main-visual .bg-video { display: none; }
	.main-visual .bg-video-m { display: block; width: 100%; height: auto; aspect-ratio: 750 / 780; object-fit: cover; }
	.main-visual .mv-left { left: calc(100vw * 65 / 842); top: calc(100vw * 65 / 842); }   /* 좌측·상단 여백 65 (가이드 842px 기준) */
	.main-visual .mv-tit { font-size: 55px; }
	.main-visual .mv-sub { margin-top: .6em; font-size: 16px; line-height: 1.25; }
	.main-visual .mv-right { left: auto; right: calc(100vw * 50 / 842); top: auto; bottom: calc(100vw * 70 / 842);   /* 우측 50 · 하단 70 (가이드 기준) */ white-space: nowrap; --fs: 24px; }
	.main-visual .mv-desc { margin-top: .7em; font-size: 10px; letter-spacing: -.04em; }

	/* 2단 */
	.main-intro { height: auto; padding: 45px 16px; }
	.main-intro .intro-txt { display: none; }   /* 모바일 : 카피가 m_main-02-copy 이미지에 포함 */

	/* 3단 : 세로 3칸 */
	.main-biz .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
	/* 3칸 : 칸 1개 높이 400 + 위·아래 남는 여백 각 100 = 전체 1400 (가이드 842px 기준), 배경은 cover */
	.main-biz { height: calc(100vw * 1400 / 842); }
	.main-biz .biz-list { position: absolute; top: 0; bottom: 0; left: 0; right: 0; flex-direction: column; justify-content: center; padding: 0; }
	.main-biz .biz-list li { flex: none; height: calc(100vw * 400 / 842); border: 0 !important; border-top: 1px solid rgba(255,255,255,.6) !important; }
	.main-biz .biz-list li:last-child { border-bottom: 1px solid rgba(255,255,255,.6) !important; }
	/* 3칸 이미지 : 가이드 842px 기준 크기 */
	.main-biz .biz-list .biz-txt img { width: calc(100vw * var(--w) / 842); height: auto; }

	/* 4단 : 세로 2박스 */
	.main-cs { display: block; height: auto; }
	.main-cs .cs-wrap { flex-direction: column; padding: 0; }
	.main-cs .cs-box { flex: none; height: calc(100vw * 348 / 842); padding: 0; border: 0 !important; }
	.main-cs .cs-box::before, .main-cs .cs-box::after { display: none; }
	.main-cs .cs-box + .cs-box { border-top: 1px solid #d9d9d9 !important; }
	/* 가이드 842px 기준 : 문구 이미지 왼쪽 60 · 아래 90 / 아이콘은 문구 이미지 아래 끝선에 맞추고 오른쪽 60 */
	.main-cs .cs-txt { position: absolute; left: calc(100vw * 60 / 842); bottom: calc(100vw * 90 / 842); max-width: none; width: calc(100vw * var(--w) / 842); height: auto; }
	.main-cs .cs-icon { right: calc(100vw * 60 / 842); bottom: calc(100vw * 90 / 842); }
	.main-cs .cs-hit { top: calc(100vw * 91 / 842); left: calc(100vw * 60 / 842); right: calc(100vw * 60 / 842); bottom: calc(100vw * 90 / 842); }
	.main-cs .cs-box:first-child .cs-icon { width: calc(100vw * 95 / 842); }   /* m_ 아이콘 95px */
	.main-cs .cs-box:last-child .cs-icon { width: calc(100vw * 81 / 842); }    /* m_ 아이콘 81px */

	/* 푸터 : 가운데 정렬 */
	#footer { align-items: center; padding: 30px 16px 28px; gap: 14px; text-align: center; }
	#footer .f-logo { width: auto; }
	#footer .f-logo img { width: 82px; height: auto; }
	#footer .f-info { font-size: 11px; line-height: 1.7; }
	#footer .copy { font-size: 10px; }
	#footer .addr span { margin-right: 12px; }
	#footer .addr span:first-child { display: block; margin-right: 0; }
	#footer .addr b { margin-right: 5px; }
}