/* 현대백화점그룹 26하 신입사원 채용 마이크로페이지 (가안)
   기준: 피그마 PC 1920 (콘텐츠 폭 960). 모바일 시안 없음 → 1023px 이하는 PC 디자인 기반 임의 대응. */
:root{--navy:#001f5d;--blue:#0073cc;--main:#5cc5ff;--yellow:#fff8c2;--sky:#92d8ff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
main{overflow-x:clip}
body{margin:0;background:#fff;color:var(--navy);font-family:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif;overflow-x:hidden}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
p,h1,h2,h3,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
section{position:relative}
.wrap{position:relative;width:960px;margin:0 auto}
.gb{display:inline-flex;align-items:center;justify-content:center;width:15.42px;height:15.42px;border-radius:7.71px;background:var(--blue);color:var(--yellow);font-style:normal;font-weight:700;font-size:9.9px;line-height:1;letter-spacing:0;text-box:trim-both cap alphabetic;flex:none}

/* ---------- GNB ---------- */
.gnb{position:fixed;top:0;left:0;right:0;z-index:20;transition:background-color .3s}
.gnb__in{position:relative;width:1120px;height:136px;margin:0 auto;transition:height .3s}
.gnb.is-scrolled{background-color:rgba(0,31,93,.88);backdrop-filter:blur(8px)}
.gnb.is-scrolled .gnb__in{height:80px}
.logo{display:block;position:relative;width:120px;height:44px;flex:none}
.logo__a,.logo__b{position:absolute}
.logo__a{inset:85.85% 5.14% 0 5.14%}
.logo__b{inset:0 0 24.98% 0}
.logo img{width:100%;height:100%}
.gnb .logo{position:absolute;left:0;top:46px;transition:top .3s}
.gnb.is-scrolled .logo{top:18px}
.gnb__menu{position:absolute;right:0;top:47px;transition:top .3s;display:flex;align-items:center;gap:40px;font-size:18px;line-height:1.462;white-space:nowrap}
.gnb__menu a{font-weight:600;color:#fff;text-shadow:0 0 50px rgba(0,6,37,.1);transition:color .3s}
.gnb__menu a.on{font-weight:700;color:var(--yellow)}
.gnb__menu .gnb__apply{width:131px;padding:8.45px 14px;border:.352px solid #f0f0f0;border-radius:5px;background:var(--yellow);color:var(--blue);font-weight:700;text-align:center;text-shadow:none;backdrop-filter:blur(1.2px);box-shadow:4.934px 4.934px 4.934px rgba(0,0,0,.05)}
.gnb.is-scrolled .gnb__menu{top:18px}
.burger{display:none}
.mo{display:none}
.btn-navy.s-faq__ask,.idots{display:none}

/* ---------- 버튼 ---------- */
.btn-yellow{position:relative;display:flex;align-items:center;justify-content:center;width:291px;height:76.83px;border:.96px solid #fff;border-radius:51.86px;color:var(--blue);font-weight:700;font-size:29.5px;line-height:1.22;letter-spacing:-1.18px;white-space:nowrap;box-shadow:3.84px 3.84px 18.25px rgba(0,0,0,.25);background:linear-gradient(100deg,#fffce7,var(--yellow) 30%,#f5eca7 80%,#fffce7)}
.btn-navy{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;width:252px;height:70px;border:.83px solid var(--sky);border-radius:44.9px;color:#fff;font-weight:700;font-size:25.55px;line-height:1.22;letter-spacing:-1.02px;white-space:nowrap;box-shadow:3.33px 3.33px 15.8px rgba(0,0,0,.25);background:linear-gradient(100deg,#1e3665 0%,#0f224f 6%,#000f39 12%,#011c52 78%,#10295c 89%,#1e3665 100%)}
.btn-navy::after{content:"";position:absolute;left:50%;bottom:-20px;width:137px;height:41px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(146,216,255,.5),rgba(146,216,255,0));pointer-events:none}

/* ---------- 공통 타이틀 ---------- */
.s-head{display:flex;flex-direction:column;align-items:center;gap:13px;text-align:center}
.s-head__eyebrow{font-weight:600;font-size:28px;line-height:40.8px;letter-spacing:-.87px;color:var(--blue)}
.s-head__h{font-weight:700;font-size:50px;line-height:59.25px;letter-spacing:-.99px;color:var(--navy)}
.s-head--w .s-head__eyebrow{color:#fff}

/* ---------- 1) 메인 KV ---------- */
/* 넓은 화면 대응: 배경 이미지의 기준 폭보다 화면이 넓으면 --u(1px 단위)가 커져서 이미지가 화면 폭에 맞춰 같이 커짐 (섹션 높이도 같은 비율로 늘어 장면이 잘리지 않음. 1920 기준에선 기존과 동일) */
.s-kv{--u:max(1px,calc(100vw / 1994));height:calc(255px + 825 * var(--u));overflow:hidden;background:#5cc5ff}
/* KV 장면: 원본 비율(2400×1341) 그대로 두고, 예전 이미지 박스(2386.7×1012.7 cover)와 같은 자리에 오도록 위로 160.4 당김 */
.kv-scene{position:absolute;left:calc(50% - 1214 * var(--u));top:calc(255px - 160.4 * var(--u));width:calc(2386.7 * var(--u));height:calc(1333.6 * var(--u));overflow:hidden;-webkit-mask:linear-gradient(to bottom,transparent 0,#000 40.3%) calc(217 * var(--u)) calc(160.4 * var(--u))/calc(1994 * var(--u)) calc(825 * var(--u)) no-repeat;mask:linear-gradient(to bottom,transparent 0,#000 40.3%) calc(217 * var(--u)) calc(160.4 * var(--u))/calc(1994 * var(--u)) calc(825 * var(--u)) no-repeat}
/* 천천히 확대: 이미지와 효과를 한 묶음(.kv-stage)으로 키워서 효과 위치가 어긋나지 않게 */
.kv-stage{position:absolute;inset:0;transform-origin:50% 62%;animation:kv-zoom 24s ease-in-out infinite alternate}
.kv-scene__img{position:absolute;inset:0;width:100%;height:100%}
/* 효과 좌표: 원본 2400×1341 기준값을 장면 박스 %로 환산 (--ox·--oy 원점, --sx·--sy 1단위 크기). 모바일은 늘린 이미지에 맞춰 이 값만 바꿈 */
.kv-scene{--ox:0;--oy:0;--sx:.0416667;--sy:.0745712}
.kv-fx,.kv-cloud,.kv-light{position:absolute;left:calc((var(--ox) + var(--x) * var(--sx)) * 1%);top:calc((var(--oy) + var(--y) * var(--sy)) * 1%);width:calc(var(--w) * var(--sx) * 1%);height:calc(var(--h) * var(--sy) * 1%);pointer-events:none}
.kv-fx{transform:skewY(var(--sk,0deg));transform-origin:0 0}
/* 구름: 장면 왼쪽 밖에서 오른쪽 밖까지 천천히 흐름 */
.kv-cloud{opacity:.8;animation:kv-drift var(--dur) linear var(--delay) infinite}
@keyframes kv-drift{to{transform:translateX(calc(3020 / var(--w) * 100%))}}
/* 처마 조명: 은은하게 반짝 (위에서 내려다본 각도라 납작한 타원) */
.kv-light{--w:56;--h:26;margin:calc(-13 * var(--sx) * 1%) 0 0 calc(-28 * var(--sx) * 1%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,250,225,.95),rgba(255,240,190,.35) 45%,rgba(255,240,190,0));mix-blend-mode:screen;opacity:.25;animation:kv-twinkle 3.3s ease-in-out var(--d) infinite}
@keyframes kv-twinkle{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
/* ON AIR 네온 깜빡임 */
.kv-onair{border-radius:12%;background:rgba(255,120,150,.3);box-shadow:0 0 calc(var(--u, 1px) * 14) calc(var(--u, 1px) * 4) rgba(255,90,130,.6);mix-blend-mode:screen;animation:kv-neon 4s steps(1) infinite}
@keyframes kv-neon{0%,18%,24%,60%,100%{opacity:.9}20%,22%{opacity:.15}62%{opacity:.4}64%{opacity:.9}}
/* LIVE 배지 맥박 */
.kv-live{border-radius:30%;box-shadow:0 0 0 0 rgba(255,60,80,.7);animation:kv-pulse 1.4s ease-out infinite}
@keyframes kv-pulse{to{box-shadow:0 0 0 calc(var(--u, 1px) * 10) rgba(255,60,80,0)}}
/* 라이브 하트: 아래에서 위로 떠오르며 사라짐 */
.kv-hearts i{position:absolute;left:0;bottom:0;width:100%;aspect-ratio:1;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff6f91' d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 5 6.4 5c2 0 3.6 1.2 4.6 2.7C12 6.2 13.6 5 15.6 5 19 5 21.1 8.4 19.6 11.8 17.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;animation:kv-heart 3s ease-out infinite}
.kv-hearts i:nth-child(2){animation-delay:.6s;filter:hue-rotate(-20deg)}
.kv-hearts i:nth-child(3){animation-delay:1.2s;width:75%}
.kv-hearts i:nth-child(4){animation-delay:1.8s;filter:saturate(.4) brightness(1.6)}
.kv-hearts i:nth-child(5){animation-delay:2.4s;width:85%}
@keyframes kv-heart{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1;transform:translate(-10%,-60%) scale(1)}50%{transform:translate(25%,-320%)}100%{opacity:0;transform:translate(-20%,-650%) scale(.9)}}
/* 화면 빛: 사선 하이라이트가 화면을 훑고 지나감 */
.kv-shine{overflow:hidden;border-radius:var(--r)}
.kv-shine::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));transform:skewX(-15deg);animation:kv-sweep 5s ease-in-out var(--delay) infinite}
@keyframes kv-sweep{0%{left:-60%}35%,100%{left:130%}}
@keyframes kv-zoom{to{transform:scale(1.035)}}
.s-kv__txt{position:absolute;top:163.3px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;width:674px}
.s-kv__eyebrow{font-weight:700;font-size:33.8px;line-height:1.4;letter-spacing:-1.01px;color:var(--yellow);text-align:center;white-space:nowrap;text-shadow:0 0 22px rgba(0,6,37,.1)}
.s-kv__title{width:674px;height:77.45px;margin-top:29.8px}
.s-kv__copy{margin-top:39.8px;font-weight:500;font-size:33.2px;line-height:1.35;letter-spacing:-1.33px;text-align:center;color:#fff;white-space:nowrap;text-shadow:0 0 22px rgba(0,6,37,.1)}

/* 스크롤 안내: 첫 화면(뷰포트) 아래쪽에 두되 KV 섹션 밖으로는 안 나가게 */
.kv-scroll{position:fixed;left:50%;top:min(calc(100vh - 110px),calc(145px + 825 * var(--u)));z-index:3;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.8);backdrop-filter:blur(6px);box-shadow:0 4px 16px rgba(0,31,93,.15);transform:translateX(-50%);animation:kv-bob 1.6s ease-in-out infinite;transition:opacity .6s ease,visibility .6s}
.kv-scroll.is-out{opacity:0;visibility:hidden;pointer-events:none}
.kv-scroll i{width:10px;height:10px;margin-top:-5px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg)}
@keyframes kv-bob{0%,100%{transform:translate(-50%,-3px)}50%{transform:translate(-50%,5px)}}

/* ---------- 2) HERO ---------- */
.s-hero{--u:max(1px,calc(100vw / 2024));height:calc(275px + 805 * var(--u));overflow:hidden;background:linear-gradient(to bottom,#7dd1ff,#5cc5ff)}
.s-hero__bg{position:absolute;left:calc(50% + .5px);top:275px;width:calc(2024 * var(--u));height:calc(1129 * var(--u));transform:translateX(-50%);object-fit:cover}
.s-hero__rays{display:none}
.s-hero__stars{position:absolute;left:calc(50% + 1px);top:-310px;width:calc(2747 * var(--u));height:calc(1227 * var(--u));transform:translateX(-50%);object-fit:cover;mix-blend-mode:screen}
.s-hero__in{position:absolute;left:0;right:0;top:210px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-shadow:0 0 20px rgba(0,6,37,.1)}
.s-hero__run{position:relative;width:446.27px;height:114.71px}
.s-hero__run img{position:absolute;left:-4.48%;right:-4.48%;top:0;width:109%;height:auto;max-width:none}
.s-hero__year{padding-bottom:22px;font-weight:700;font-size:44px;line-height:56.7px;letter-spacing:-1.37px}
.s-hero__name{font-weight:800;font-size:74px;line-height:88.5px;letter-spacing:-2.21px;white-space:nowrap}
.s-hero__name b{font-weight:800;color:var(--yellow)}
.s-hero__corp{margin-top:40px;font-weight:500;font-size:38px;line-height:45.7px;letter-spacing:-1.14px;white-space:nowrap}
.s-hero__date{margin-top:80px;font-weight:500;font-size:34px;line-height:45.7px;letter-spacing:-1.37px;color:var(--navy);text-shadow:none;white-space:nowrap}
.s-hero .btn-yellow{margin-top:100px;text-shadow:none}

/* ---------- 3) 채용절차 ---------- */
.s-proc{min-height:1273px;padding:200px 0;background:linear-gradient(to bottom,#fff 44.5%,#ceedff)}
.s-proc__h{text-align:center;font-weight:700;font-size:50px;line-height:59.25px;letter-spacing:-.99px}
.info{display:flex;flex-direction:column;gap:60px;margin-top:60px}
.info__row{display:flex;align-items:center}
.info__row--top,.info__row--flow{align-items:flex-start}
.info__k{width:188.56px;flex:none;font-weight:700;font-size:25.7px;line-height:33.4px;letter-spacing:-.77px}
.info__v{width:720px;font-size:18px;line-height:25.7px;letter-spacing:-.51px}
.info__side{display:flex;flex-direction:column;gap:12.8px;align-items:flex-start;width:188.56px;flex:none}
.ptab{width:138px;padding:10.3px 20.6px;border:1px solid var(--main);border-radius:200px;background:rgba(255,255,255,.7);box-shadow:4px 4px 5px rgba(0,0,0,.1);font-weight:700;font-size:16.3px;line-height:19.9px;letter-spacing:-.65px;text-align:center;white-space:nowrap}
.ptab.on{background:var(--main);filter:drop-shadow(4px 4px 2.5px rgba(0,0,0,.1));box-shadow:none}
.info__main{width:720px;min-height:251px}
.ppanel{display:none}
.ppanel.on{display:block}
.flow__t{padding-bottom:20px;font-weight:700;font-size:18.9px;line-height:27.3px;letter-spacing:-.57px}
.grp{display:flex;flex-direction:column;flex:1 0 0;min-width:1px}
.grp:has(.st+.st){flex-grow:2}
.grp:has(.st+.st+.st){flex-grow:3}
.grp__st{display:flex}
/* 일정 칸: 단계 하나짜리 칸의 '26. 12월 ~ '27. 1월은 두 줄로 (아이콘 줄을 맞추려고 모든 칸 높이 통일) */
.flow__d{display:flex;align-items:center;justify-content:center;height:44px;margin:0 6.86px 20px 0;padding:0 6px;background:var(--main);color:#fff;font-weight:500;font-size:15.4px;line-height:1.2;letter-spacing:-.77px;text-align:center;word-break:keep-all;flex-wrap:wrap;align-content:center;column-gap:.3em}
.flow__d span{white-space:nowrap}
.flow__steps{display:flex}
.st{position:relative;flex:1 0 0;min-width:1px;padding:0 6.86px 16.6px 0;display:flex;flex-direction:column;align-items:center}
.st img{width:83.4px;height:83.4px}
.st p{padding-top:11px;text-align:center;font-weight:500;font-size:14px;line-height:15px;letter-spacing:-.6px;white-space:nowrap}
.grp:last-child .st:last-child::after{display:none}
.st::after{content:"";position:absolute;right:-1.7px;top:34.7px;width:9px;height:13px;background:url(../images/chev-b.svg) center/100% 100% no-repeat}
.flow__note{margin-top:2px;font-size:16px;line-height:21.6px;letter-spacing:-.46px}
.info__ul{width:720px;padding-left:25.7px;display:flex;flex-direction:column;gap:2px;font-size:18px;line-height:25.7px;letter-spacing:-.51px;list-style:disc}
.info__ul li::marker{font-size:17px}
.info__ul .note{list-style:none}

/* ---------- 4) 채용 분야 ---------- */
.s-field{min-height:1016px;padding:200px 0 100px;background:linear-gradient(to bottom,#bce7ff,#9edcff);z-index:2}
.s-field__glow{position:absolute;left:0;right:0;top:0;height:140px;background:radial-gradient(ellipse 50% 100% at 50% 0,rgba(255,255,255,.9),rgba(255,255,255,0));pointer-events:none}
.s-field__trav{position:absolute;left:calc(50% + 515px);top:-213.7px;width:242px;height:377px;object-fit:cover}
.s-field__shadow{position:absolute;left:calc(50% + 490px);top:69px;width:292px;height:45px;mix-blend-mode:overlay;pointer-events:none}
.fld{display:flex;gap:34.28px;align-items:flex-start;margin-top:60px}
.fld__side{width:188.56px;flex:none}
.fn{display:flex;align-items:center;justify-content:space-between;width:188.56px;height:42.84px;margin-bottom:6.84px;padding:0 15.4px;border-radius:25px;font-size:15.4px;line-height:21.6px;letter-spacing:-.62px}
.fn span{font-weight:600;color:rgba(0,31,93,.8)}
.fn em{font-style:normal;font-weight:500;color:var(--blue)}
.fn.on{background:linear-gradient(155deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 36%,rgba(255,255,255,.8) 100%);box-shadow:0 4px 20px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.08)}
.fn.on span{color:var(--navy)}
/* 흰색 직무 영역 바깥, 영역 왼쪽 선에 맞춤 */
.fld__note{margin:16px 0 0 222.84px;word-break:keep-all;font-size:14px;line-height:1.5;letter-spacing:-.42px;color:rgba(0,31,93,.7)}
.fld__note .gb{vertical-align:1px;margin-right:2px}
.fld__panel{position:relative;width:737.14px;overflow:hidden;border-radius:24px;background:radial-gradient(circle 88px at 0 0,rgba(92,197,255,.2),rgba(92,197,255,0) 44%) ,rgba(255,255,255,.93);backdrop-filter:blur(7px);box-shadow:0 22px 52px rgba(22,113,167,.14)}
.fp{display:none;padding:41.84px 27.43px 21.43px}
.fp.on{display:block}
.fp__t{font-weight:700;font-size:24px;line-height:28.3px;letter-spacing:-.72px}
.fp__d{margin-top:7.56px;padding-bottom:17.15px;font-size:15.4px;line-height:20.8px;letter-spacing:-.46px;color:rgba(0,31,93,.8)}
.fp__list li{border-top:1.167px solid #d0d0d0}
.fp__row{display:flex;align-items:center;gap:8px;width:100%;min-height:51.4px;font-weight:500;font-size:17.1px;line-height:20.6px;letter-spacing:-.51px;text-align:left}
.fp__row img{margin-left:auto;width:20.56px;height:20.56px;margin-right:5px}
.fp__list li.open .fp__row img{transform:rotate(90deg)}
.fp__acc{display:grid;grid-template-rows:0fr}
.fp__acc>div{min-height:0;overflow:hidden}
.fp__list li.open .fp__acc{grid-template-rows:1fr}
.fp__detail{display:flex;justify-content:space-between;align-items:flex-end;min-height:110px;margin-bottom:12px;position:relative;border:1px solid rgba(92,197,255,.5);border-radius:16px;background:rgba(92,197,255,.06);padding:16.5px;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.fp__copy{display:flex;flex-direction:column;gap:17.14px;padding-bottom:43.86px;max-width:654px}
.fp__dt{font-weight:600;font-size:18.9px;letter-spacing:-.57px}
.fp__dd{word-break:keep-all;font-weight:500;font-size:17.1px;line-height:22.3px;letter-spacing:-.51px;color:rgba(0,31,93,.8)}
.fp__btns{display:flex;gap:12.84px;flex:none}
/* 긴 설명(재경): 버튼이 아래쪽에 붙어 있어 글을 버튼 위 공간까지 넓힘(PC) — 버튼 2개 폭만큼 */
@media (min-width:1024px){.fp__copy--wide{margin-right:-218.52px}}
.b-navy{display:flex;align-items:center;justify-content:center;width:102.84px;height:31.7px;border:1px solid var(--navy);border-radius:65px;background:var(--navy);color:#fff;font-weight:700;font-size:12.3px;letter-spacing:-.49px;white-space:nowrap}

/* ---------- 5) 현직자 인터뷰 ---------- */
.s-intv{min-height:964px;padding:100px 0;overflow:hidden;background:linear-gradient(to bottom,#9edcff 15.4%,#60c6ff)}
.s-intv__fx{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.fx-mask{position:absolute;left:calc(50% - 1px);top:85px;width:1533px;height:559px;transform:translateX(-50%);opacity:.5;mix-blend-mode:plus-lighter}
.fx-glow{position:absolute;left:calc(50% + 440px);top:-120px;width:1602px;height:1233px;mix-blend-mode:hard-light}
.fx-arc{position:absolute;left:calc(50% + .14px);bottom:-1248.5px;width:2772.7px;height:1620px;transform:translateX(-50%)}
.s-intv .wrap{display:flex;flex-direction:column;align-items:center}
.s-intv .s-head__h{font-size:49.4px;line-height:1.2}
.s-intv__sub{margin-top:41px;text-align:center;font-size:20.6px;line-height:1.45;letter-spacing:-1.03px}
.itabs{display:flex;justify-content:center;margin-top:50px;padding:0 34px}
.itabs button{width:262.5px;height:42.84px;border-left:2px solid var(--blue);font-weight:500;font-size:24px;line-height:25.5px;letter-spacing:-.72px;color:rgba(6,47,84,.55)}
.itabs button:last-child{border-right:2px solid var(--blue)}
.itabs button.on{font-weight:700;color:var(--navy);text-shadow:0 0 18px rgba(146,216,255,.2)}
.cards{display:flex;gap:17.9px;width:918px;margin-top:51.3px}
.card{position:relative;flex:none;width:216.07px;height:291.93px;padding:29px 24.27px;border-radius:20px;overflow:hidden;cursor:pointer;box-shadow:5.99px 5.99px 25px rgba(0,5,20,.2);background:linear-gradient(to bottom,#fff,var(--end));transition:transform .25s}
.card[hidden]{display:none}
.card:hover{transform:translateY(-4px)}
.card__img{position:absolute;left:calc(var(--x)*1px);top:calc(var(--y)*1px);width:calc(var(--w)*1px);height:calc(var(--h)*1px);object-fit:cover}
.card__fade{position:absolute;left:0;right:0;bottom:0;height:69.9px;opacity:.8;background:linear-gradient(to bottom,transparent,var(--fade) 99%)}
.card__txt{position:relative;display:flex;flex-direction:column;gap:5.8px;width:165px;color:var(--navy)}
.card__role{font-weight:500;font-size:13.9px;line-height:17.2px;letter-spacing:-.28px}
.card__t{font-weight:700;font-size:16.2px;line-height:1.3;letter-spacing:-.32px;white-space:normal;word-break:keep-all}
.card__go{position:absolute;left:0;top:80.6px;width:30.14px;height:30.14px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#fff;box-shadow:0 2.5px 6.3px rgba(0,0,0,.15)}
.card__go img{width:18.84px;height:18.84px}
.s-intv__pb{margin-top:42px;font-size:18px;line-height:12px;letter-spacing:-.86px;color:#fff;text-align:center}

/* ---------- 6) 캠퍼스 리쿠르팅 ---------- */
.s-camp{min-height:1070px;padding:100px 0 200px;background:linear-gradient(to bottom,#62c7ff,#0399f6)}
.s-camp .s-head{gap:12.8px}
.s-camp .s-head__eyebrow{font-size:24px;font-weight:500;letter-spacing:-.72px}
.camp-cards{display:grid;grid-template-columns:465px 465px;gap:20px;width:950px;margin:60px auto 0}
.cc{position:relative;height:130px;padding:35.3px;overflow:hidden;border:1px solid rgba(255,255,255,.8);border-radius:24px;background:linear-gradient(114deg,rgba(255,255,255,.5) 6%,rgba(255,255,255,.1) 97%);box-shadow:0 4px 4px rgba(0,0,0,.25)}
.cc i{position:absolute;left:-1px;top:-124px;width:465px;height:376px;background:url(../images/camp-spark.svg) center/100% 100% no-repeat}
.cc::after{content:"";position:absolute;left:36px;top:-7px;width:616px;height:259px;background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,0));pointer-events:none}
.cc h3,.cc p{position:relative;z-index:1}
.cc h3{font-weight:700;font-size:27.4px;line-height:25.5px;letter-spacing:-.55px}
.cc p{margin-top:8.55px;font-weight:500;font-size:20.6px;line-height:25.5px;letter-spacing:-.41px}
.camp-note{margin-top:60px;display:flex;flex-direction:column;gap:3px;color:#fff;text-align:center;font-size:16px;line-height:24px;letter-spacing:-.4px}
.camp-note li::before{content:"※ "}

/* ---------- 7) FAQ ---------- */
.s-faq{min-height:1410px;padding:200px 0 100px;background:linear-gradient(to bottom,#fff,#6bcaff)}
.s-faq__bld{position:absolute;left:calc(50% - 786px);top:-95px;width:585px;height:189px;object-fit:fill;pointer-events:none}
.s-faq .wrap{display:flex;flex-direction:column;align-items:center}
.faq{width:960px;margin-top:60px;display:flex;flex-direction:column;gap:12.8px}
.faq li{position:relative;border:1px solid #bfeaff;border-radius:24px;background:#00a1ff;overflow:hidden}
.faq li.open{background:radial-gradient(560px 245px at 100% 0,rgba(255,255,255,.5),rgba(255,255,255,.15) 75%,rgba(255,255,255,0)),#00a1ff}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:17px;width:100%;min-height:75.14px;padding:12px 34.3px;text-align:left;color:#fff;font-weight:700;font-size:20.6px;line-height:25.7px;letter-spacing:-.41px}
.faq__qt b{font-weight:700;margin-right:3.4px}
.faq__ic{position:relative;flex:none;width:36.7px;height:36.7px;border-radius:50%;background:rgba(255,255,255,.5) url(../images/faq-caret.svg) center/15.3px no-repeat;backdrop-filter:blur(3px);box-shadow:0 0 10px rgba(0,0,0,.05)}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;left:50%;top:50%;width:22.28px;height:1.7px;margin:-.85px 0 0 -11.14px;border-radius:1px;background:var(--navy);opacity:0}
.faq__ic::before{transform:rotate(45deg)}
.faq__ic::after{transform:rotate(-45deg)}
.faq li.open .faq__ic{margin:-5px 0 -6px;background:none;box-shadow:none;backdrop-filter:none}
.faq li.open .faq__ic::before,.faq li.open .faq__ic::after{opacity:1}
.faq li.open .faq__q{align-items:flex-start;min-height:0;padding-top:25.7px;padding-bottom:0}
.faq__a{display:grid;grid-template-rows:0fr}
.faq__a>div{overflow:hidden;min-height:0}
.faq__a p{word-break:keep-all;padding:25.7px 87.3px 25.7px 34.3px;color:#fff;font-size:17.1px;line-height:25.7px;letter-spacing:-.34px}
.faq li.open .faq__a{grid-template-rows:1fr}
.s-camp .btn-navy{margin:60px auto 0}

/* ---------- 8) 카운트다운 ---------- */
.s-count{min-height:773px;padding:100px 0 200px;background:#6bcaff}
.s-count__fx{--u:max(1px,calc(100vw / 2186.8));position:absolute;inset:0;overflow:hidden;pointer-events:none}
.s-count__fx img{position:absolute;left:calc(50% - 1393 * var(--u));top:-49px;width:calc(2741.5 * var(--u));height:calc(1163 * var(--u));object-fit:cover;opacity:.2;mix-blend-mode:soft-light;-webkit-mask:linear-gradient(to bottom,transparent 0,#000 37%) calc(302 * var(--u)) calc(52.6 * var(--u))/calc(2186.8 * var(--u)) calc(904.8 * var(--u)) no-repeat;mask:linear-gradient(to bottom,transparent 0,#000 37%) calc(302 * var(--u)) calc(52.6 * var(--u))/calc(2186.8 * var(--u)) calc(904.8 * var(--u)) no-repeat}
.s-count__plane{position:absolute;left:calc(50% + 445px);top:12px;width:228px;height:109px}
.s-count__in{position:relative;display:flex;flex-direction:column;align-items:center}
.s-count__t{display:flex;flex-direction:column;align-items:center;font-size:49.4px;line-height:59.25px;letter-spacing:-1.97px;text-align:center}
.s-count__t span{font-weight:400}
.s-count__t b{font-weight:700}
.cd{display:flex;align-items:flex-start;justify-content:center;gap:25.7px;margin-top:42.85px}
.cd>div{display:flex;flex-direction:column;align-items:center;min-width:140px;width:163.66px}
.cd strong{font-weight:700;font-size:105.6px;line-height:105.6px;letter-spacing:-2.11px;font-variant-numeric:tabular-nums}
.cd span{margin-top:12px;font-weight:600;font-size:23.8px;line-height:35.8px;letter-spacing:2.38px;text-transform:uppercase}
.cd em{font-style:normal;font-weight:300;font-size:95.4px;line-height:105.6px;width:31.45px;text-align:center}
.s-count__btns{display:flex;gap:20px;margin-top:85.7px}

/* ---------- 푸터 ---------- */
.foot{display:flex;justify-content:center;height:147px;padding-top:40px;background:var(--navy)}
.logo--foot{width:184px;height:67.47px}

/* ---------- 인터뷰 팝업 ---------- */
.pop{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6)}
.pop[hidden]{display:none}
.pop__box{position:relative;width:800px;max-height:calc(100vh - 32px);overflow:auto;border-radius:10px;background:#fff;color:#000;overscroll-behavior:contain}
.pop__head{position:sticky;top:0;z-index:2;height:105.8px;background:var(--main)}
.pop__head p{position:absolute;left:50px;top:0;height:106.5px;display:flex;align-items:center;font-weight:700;font-size:34px;letter-spacing:-1.02px;color:#fff}
.pop__x{position:absolute;right:35px;top:37.4px;width:34.65px;height:34.65px}
.pop__x img{width:100%;height:100%}
.pop__body{padding:54px 48px 120px}
.pop__who{display:flex;gap:36px;align-items:flex-start}
.pop__ph{position:relative;flex:none;width:232.5px;height:232.5px;border-radius:50%;overflow:hidden;background:linear-gradient(to bottom,#fff,var(--end,#e7cfff))}
/* 카드(216×292)의 이미지 배치를 그대로 쓰고, 카드 위쪽 80px을 잘라 얼굴이 원 안에 오게 함 */
.pop__ph img{position:absolute;left:calc(var(--x) / 216 * 100%);top:calc((var(--y) - 80) / 216 * 100%);width:calc(var(--w) / 216 * 100%);height:calc(var(--h) / 216 * 100%);object-fit:cover}
.pop__who>div:last-child{width:435px;padding-top:20px}
.pop__role{font-weight:800;font-size:28px;line-height:60px;letter-spacing:-1.4px;color:var(--blue)}
.pop__name{margin-top:10px;font-weight:600;font-size:24px;line-height:39px;letter-spacing:-1.2px;color:#050e27}
.pop__desc{margin-top:14px;font-weight:700;font-size:22px;line-height:1.4;letter-spacing:-1.1px;color:var(--navy)}
/* PB 한 줄: 양옆 큰따옴표 장식 (글줄 높이를 키우지 않도록 line-height:0) */
.pop__desc::before,.pop__desc::after{font-weight:800;font-size:2em;line-height:0;color:var(--main);vertical-align:-.28em}
.pop__desc::before{content:"\201C";margin-right:.08em}
.pop__desc::after{content:"\201D";margin-left:.08em}
.pop__ch{margin-top:60px;display:flex;flex-direction:column;gap:25px;align-items:flex-start}
.pop__chip{display:flex;align-items:center;height:46px;padding:8px 20px;border-radius:100px;background:var(--yellow);color:var(--blue);font-weight:700;font-size:22px;line-height:30px;letter-spacing:-.66px}
.qa{display:flex;flex-direction:column;gap:7px}
.qa+.qa{margin-top:15px}
.qa__q{font-weight:700;font-size:20px;line-height:33px;letter-spacing:-1px;color:#000}
.qa__a{font-weight:400;font-size:18px;line-height:1.45;letter-spacing:-.18px;color:#000}
.pop:not([hidden]){animation:pop-bg .25s ease-out}
.pop:not([hidden]) .pop__box{animation:pop-box .3s ease-out}
.pop.closing{animation:pop-bg .2s reverse forwards}
.pop.closing .pop__box{animation:pop-box .2s reverse forwards}
@keyframes pop-bg{from{opacity:0}to{opacity:1}}
@keyframes pop-box{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* 스크롤 등장 모션 (js/main.js에서 .rv 부여) */
.rv{opacity:0;transform:translateY(60px);transition:opacity 1.2s cubic-bezier(.25,1,.5,1),transform 1.2s cubic-bezier(.25,1,.5,1)}
.rv.in{opacity:1;transform:none}
@media (min-width:1024px){
  .fp__acc,.faq__a{transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)}
  .fp__row img{transition:transform .3s}
  .faq__q{transition:padding .45s cubic-bezier(.4,0,.2,1)}
}
@media (prefers-reduced-motion:reduce){.pop,.pop *{animation:none!important}.card,.fp__acc,.faq__a,.fp__row img,.faq__q,.gnb,.gnb *{transition:none!important}.kv-scroll,.kv-scene *,.kv-scene *::after{animation:none!important}}

/* =====================================================================
   모바일 (피그마 MO 시안 390px 기준. 태블릿 폭은 추후 별도 조정)
   ===================================================================== */
@media (max-width:1023px){
  section{min-height:0!important}
  .pc{display:none}
  .mo{display:inline}
  html{scroll-padding-top:65px}
  .wrap{width:auto;padding:0 20px}
  .gnb,.gnb.is-scrolled{background:var(--main);border-bottom:1px solid rgba(6,47,84,.12);box-shadow:0 7px 12px rgba(22,113,167,.08);backdrop-filter:blur(7px)}
  .gnb__in,.gnb.is-scrolled .gnb__in{width:auto;height:64px}
  .gnb .logo,.gnb.is-scrolled .logo{left:20px;top:15.5px;width:90px;height:33px}
  .gnb.is-scrolled .gnb__menu{top:0}
  .gnb__menu{display:none;position:fixed;top:0;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:80px 20px 20px;background:rgba(0,70,130,.95);z-index:-1}
  .gnb__menu.open{display:flex}
  .gnb__menu a{padding:14px 0;font-size:16px;border-bottom:1px solid rgba(255,255,255,.2)}
  .gnb__menu .gnb__apply{width:auto;margin-top:12px;border-bottom:0}
  .burger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;position:absolute;right:20px;top:10px;width:44px;height:44px}
  .burger i{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
  .btn-yellow{width:200px;height:52px;font-size:20px}
  .btn-navy{width:190px;height:47px;border-width:.627px;border-radius:33.86px;font-size:19.26px;letter-spacing:-.77px;box-shadow:2.5px 2.5px 11.9px rgba(0,0,0,.25)}
  .s-head{gap:14px}
  .s-head__eyebrow{font-weight:700;font-size:17px;line-height:23.8px;letter-spacing:-.51px}
  .s-head__h{font-size:30px;line-height:37.5px;letter-spacing:-.6px}

  .s-kv{height:726px}
  /* 모바일 KV: 세로로 늘린 전용 이미지(kv-bg-mo.jpg). 원본 좌표 → 이 이미지 % 환산값(배율 2.785, 원점 -1308·278.5px / 4060×4096) */
  .kv-scene{--ox:-32.217;--oy:6.799;--sx:.068596;--sy:.067993;left:calc(50% - 347.97px);top:113.77px;width:689.1px;height:695.21px;-webkit-mask:linear-gradient(to bottom,transparent 205px,#000 271.6px);mask:linear-gradient(to bottom,transparent 205px,#000 271.6px)}
  .kv-cloud{display:none}
  .s-kv__txt{top:130px;width:328px}
  .s-kv__eyebrow{font-size:18.8px;letter-spacing:-.564px;text-shadow:0 0 10.8px rgba(0,6,37,.1)}
  .s-kv__title{width:328px;height:37.69px;margin-top:10.45px}
  .s-kv__copy{margin-top:31.33px;font-size:16.71px;letter-spacing:-.668px;text-shadow:0 0 10.8px rgba(0,6,37,.1)}
  .kv-scroll{top:min(calc(100vh - 50px),682px);width:24px;height:24px;background:none;box-shadow:none;backdrop-filter:none;border-radius:0}
  .kv-scroll i{width:13px;height:13px;border-color:#fff;border-width:0 2.5px 2.5px 0;border-radius:0 0 2px 0}

  .s-hero{height:680px;background:var(--main)}
  .s-hero__rays{display:block;position:absolute;right:0;top:0;width:742px;height:266px;mix-blend-mode:screen;pointer-events:none}
  .s-hero__bg{width:1146px;height:639px;top:173px}
  .s-hero__stars{width:1077px;height:481px;top:0}
  .s-hero__in{top:122.85px}
  .s-hero__run{width:234.3px;height:26.92px}
  .s-hero__run img{top:-10.5px}
  .s-hero__year{margin-top:30px;padding-bottom:5px;font-size:30px;line-height:38.1px;letter-spacing:-.9px}
  .s-hero__name{font-size:45px;line-height:54px;letter-spacing:-1.35px;white-space:normal}
  .s-hero__name b{display:block}
  .s-hero__corp{margin-top:30px;font-size:22px;line-height:28.6px;letter-spacing:-.66px}
  .s-hero__date{margin-top:40px;font-size:22px;line-height:30.69px;letter-spacing:-.88px}
  .s-hero .btn-yellow{margin-top:50px;width:190px;height:47px;border-radius:33.86px;font-size:19.26px;letter-spacing:-.77px}

  .s-proc{padding:80px 0;background:linear-gradient(to bottom,#f7fdff 57.9%,#ceedff)}
  .s-proc .wrap{padding:0 24px}
  .s-proc__h{font-size:32px;line-height:37.76px;letter-spacing:-.64px}
  .info{gap:35px;margin-top:35px}
  .info__row{flex-direction:column;align-items:flex-start;gap:12px}
  .info__row--top{padding-top:18px}
  .info__k{width:auto;font-size:18px;line-height:23.4px;letter-spacing:-.54px}
  .info__v,.info__ul,.info__main{width:100%}
  .info__v{font-size:14px;line-height:21px;letter-spacing:-.42px}
  .info__side{width:100%;flex-direction:row;flex-wrap:wrap;gap:8px}
  .info__side .info__k{width:100%}
  .info__main{min-height:0}
  .ptab{width:calc(50% - 4px);padding:11.5px 10px;font-size:19px;line-height:23.18px;letter-spacing:-.76px}
  .flow__t{padding-bottom:34.5px;font-size:15px;line-height:27.34px;letter-spacing:-.574px}
  /* 단계 묶음: 한 단계 = 폭 25%. 한 줄에 4단계씩 2줄로 접힘 (시안: 4단계 + 3단계) */
  .flow__steps{flex-wrap:wrap;row-gap:10px}
  .grp,.grp:has(.st+.st),.grp:has(.st+.st+.st){flex:0 0 25%}
  .grp:has(.st+.st){flex-basis:50%}
  .grp:has(.st+.st+.st){flex-basis:75%}
  /* 일정 칸: 단계 하나짜리 칸에 '26. 12월 ~ '27. 1월처럼 긴 일정이 들어가면 두 줄로 (줄 높이를 맞추려고 모든 칸 높이 통일) */
  .flow__d{height:34px;margin:0 7.2px 16.77px 0;padding:0 4px;font-size:12.91px;line-height:14px;letter-spacing:-.647px;white-space:normal;text-align:center;word-break:keep-all}
  .st{padding:0 5.75px 13.92px 0}
  .st img{width:69.94px;height:69.94px;margin-bottom:-1.43px;border-radius:50%}
  .st p{padding-top:9.22px;font-size:11.74px;line-height:12.58px;letter-spacing:-.5px}
  .st::after{right:-2px;top:29.5px;width:7.55px;height:10.9px}
  .flow__note{margin-top:0;padding-left:1.05em;text-indent:-1.05em;font-size:13px;line-height:18.2px;letter-spacing:-.39px}
  .info__ul{padding-left:30px;gap:0;font-size:14px;line-height:21px;letter-spacing:-.42px}
  .info__ul li::marker{font-size:13px}

  .s-field{padding:80px 0}
  .s-field .wrap{padding:0 25px}
  .s-field__trav{left:calc(50% + 72.93px);top:-58px;width:96.23px;height:149.77px}
  .s-field__shadow{left:calc(50% + 63px);top:54px;width:116px;height:17.88px}
  .fld{flex-direction:column;gap:20px;margin-top:50px}
  /* 계열사 탭 3개 + 글로벌 범례를 2×2로 */
  .fld__side{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .fld__nav{display:contents}
  .fn{width:100%;height:43.45px;margin:0;padding:0 8px;justify-content:center;gap:6px;border-radius:12px;background:rgba(255,255,255,.1);font-size:15px;line-height:21px;letter-spacing:-.6px}
  .fn:not(.on){opacity:.6}
  .fn span,.fn em{font-size:14px;letter-spacing:-.56px}
  .fn span{color:var(--navy)}
  .fld__note{margin:14px 4px 0;font-size:13px;letter-spacing:-.39px}
  .fld__panel{width:100%}
  .fp{padding:34px 20px 20px}
  .fp__t{font-size:18px;line-height:32.94px;letter-spacing:-.54px}
  .fp__d{margin-top:10px;padding-bottom:16px;font-size:15px;line-height:24.45px;letter-spacing:-.45px}
  .fp__list li{border-top-width:1px}
  .fp__row{gap:12px;min-height:60px;font-size:15px;line-height:18px;letter-spacing:-.45px}
  .fp__row .gb{width:14px;height:14px;border-radius:7px;background:#1cb8ff;color:var(--navy);font-size:9px}
  .fp__row img{width:18px;height:18px;margin-right:6px}
  .fp__detail{min-height:0;margin-bottom:14px;padding:19.25px;border-radius:16.04px}
  .fp__list li.open .fp__detail{flex-direction:column;align-items:stretch;gap:14px}
  .fp__copy{gap:11px;padding-bottom:0}
  .fp__dt{font-size:16px;letter-spacing:-.48px}
  .fp__dd{font-size:15px;line-height:19.5px;letter-spacing:-.45px}
  .fp__btns{justify-content:center;gap:10px}
  .b-navy{width:125.7px;height:37px;font-size:14.3px;letter-spacing:-.574px}

  .s-intv{padding:10px 0 80px}
  .s-intv__fx{display:none}
  .s-intv .wrap{padding:0 11px}
  .s-intv .s-head__h{font-size:30px;line-height:37.5px}
  .s-intv__sub{margin-top:24px;font-size:15px;line-height:20.25px;letter-spacing:-.75px}
  .itabs{width:320px;margin-top:50px;padding:0}
  .itabs button{position:relative;flex:1;width:auto;height:44px;border:0;font-size:15px;line-height:18px;letter-spacing:-.45px}
  .itabs button:last-child{border:0}
  .itabs button::before,.itabs button:last-child::after{content:"";position:absolute;left:0;top:13px;width:1px;height:18px;background:var(--blue)}
  .itabs button:last-child::after{left:auto;right:0}
  /* 카드: 옆으로 넘기는 슬라이드 (점 표시는 js/main.js) */
  .cards{width:100%;margin-top:24px;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 20px;margin-bottom:-20px}
  .cards::-webkit-scrollbar{display:none}
  .card{width:179.11px;height:242px;padding:24px 20px;border-radius:12px;scroll-snap-align:start;box-shadow:4.97px 4.97px 20.72px rgba(0,5,20,.2)}
  .card:hover{transform:none}
  .card__img{left:calc(var(--x) / 216 * 100%);top:calc(var(--y) / 292 * 100%);width:calc(var(--w) / 216 * 100%);height:calc(var(--h) / 292 * 100%)}
  .card__fade{height:57px}
  .card__txt{width:137px;gap:4.8px}
  .card__role{font-size:11.52px;line-height:14.29px;letter-spacing:-.23px}
  .card__t{font-size:13.44px;letter-spacing:-.27px;white-space:normal}
  .card__go{top:66.8px;width:25px;height:25px;box-shadow:0 2.08px 5.21px rgba(0,0,0,.15)}
  .card__go img{width:15.6px;height:15.6px}
  .idots{display:flex;justify-content:center;align-items:center;gap:13px;height:7.5px;margin-top:30px}
  .idots i{width:7.5px;height:7.5px;border-radius:67px;background:rgba(255,255,255,.4);transition:width .25s,background-color .25s}
  .idots i.on{width:20.46px;background:var(--yellow);box-shadow:0 2px 6.8px rgba(54,23,206,.15)}
  .s-intv__pb{margin-top:30px;font-size:11px;line-height:14px;letter-spacing:-.55px}

  .s-camp{padding:80px 0;overflow:hidden;background:var(--main)}
  /* 위쪽 호(arc): 큰 타원 + 양 끝이 흐려지는 흰 테두리 */
  /* 시안 타원(1075.5×910.7)의 윗부분 곡선은 그대로, 카드가 많아 길어져도 아래는 직선으로 섹션 끝까지 채움 */
  .s-camp::before,.s-camp::after{content:"";position:absolute;left:50%;top:5px;bottom:0;width:1075.5px;margin-left:-537.75px;border-radius:537.75px 537.75px 0 0/455.35px 455.35px 0 0;pointer-events:none}
  .s-camp::before{background:linear-gradient(to bottom,#60c6ff,#009bf5);box-shadow:inset 0 77.7px 242.9px #58c4ff,inset 0 29.1px 121.4px rgba(255,255,255,.5)}
  .s-camp::after{border:2px solid #fff;border-bottom:0;-webkit-mask:linear-gradient(to right,transparent,#000 40%,#000 60%,transparent);mask:linear-gradient(to right,transparent,#000 40%,#000 60%,transparent)}
  .s-camp .wrap{padding:0 16px}
  .s-camp .s-head__eyebrow{font-size:17px;font-weight:700;letter-spacing:-.51px}
  .camp-cards{grid-template-columns:1fr;width:auto;gap:14px;margin:50px 16px 0}
  .cc{display:flex;flex-direction:column;justify-content:center;height:100px;padding:24.04px;border-width:.7px;border-radius:16.83px;box-shadow:0 2.8px 2.8px rgba(0,0,0,.25)}
  .cc i{left:0;top:-82px;width:326px;height:264px}
  .cc::after{left:7.88%;top:-6px;width:432px;height:190px}
  .cc h3{font-size:20px;line-height:19.55px;letter-spacing:-.4px}
  .cc p{margin-top:5px;font-size:15px;line-height:21px;letter-spacing:-.3px}
  .camp-note{margin:30px 16px 0;gap:5px;text-align:left;font-size:12px;line-height:16.8px;letter-spacing:-.72px}
  .camp-note li{display:flex;gap:2px}
  .camp-note li::before{content:"※";flex:none}

  .s-faq{padding:70px 0 80px}
  .s-faq__bld{left:17px;top:-35px;width:208px;height:auto}
  .s-faq .wrap{padding:0 16px}
  .s-faq .s-head__eyebrow{font-size:18px;line-height:25.2px;letter-spacing:-.54px}
  .s-faq .s-head__h{font-size:32px;line-height:38.4px;letter-spacing:-.64px;color:#062f54}
  .faq{width:100%;margin-top:30px;gap:14px}
  .faq li{border-radius:15px}
  .faq__q{position:relative;display:block;min-height:0;padding:20px 54px 20px 18px;font-size:14.5px;line-height:20.3px;letter-spacing:-.29px}
  .faq__qt{display:flex;gap:4px;word-break:keep-all}
  .faq__qt b{flex:none;margin:0}
  .faq__ic{position:absolute;right:15px;top:19px;width:26px;height:26px}
  .faq__ic::before,.faq__ic::after{width:13.54px;height:1.28px;margin:-.64px 0 0 -6.77px}
  .faq li.open .faq__q{padding:20px 54px 0 18px}
  .faq li.open .faq__ic{right:18px;top:20px;width:22px;height:22px;margin:0}
  .faq__a p{padding:14.65px 18px 20px;font-size:13px;line-height:20.8px;letter-spacing:-.26px}
  .btn-navy.s-faq__ask{display:flex;margin-top:30px}
  .s-camp .btn-navy{margin-top:30px}

  .s-count{padding:120px 0}
  .s-count__fx img{left:-262.33px;top:163.14px;width:899.2px;height:381.54px;-webkit-mask:linear-gradient(to bottom,transparent 17px,#000 127px);mask:linear-gradient(to bottom,transparent 17px,#000 127px)}
  .s-count__plane{left:auto;right:25px;top:46.4px;width:90px;height:43px}
  .s-count__in{padding:0 16px}
  .s-count__t{font-size:26px;line-height:33.8px;letter-spacing:-1.04px}
  .cd{gap:8px;margin-top:28px}
  .cd>div{flex:none;min-width:68.19px;width:auto}
  .cd strong{font-size:44px;line-height:44px;letter-spacing:-.88px}
  .cd span{margin-top:6px;font-size:11px;line-height:15.4px;letter-spacing:1.1px}
  .cd em{width:14px;margin-right:-8px;font-size:36px;line-height:44px}
  .s-count__btns{margin-top:28px}
  .s-count__ask{display:none}

  .foot{height:85px;padding-top:0;align-items:center}
  .logo--foot{width:105.77px;height:38.78px}

  /* 팝업: 좌우 20px 여백의 카드, 안에서 스크롤 */
  .pop{padding:20px}
  .pop__box{width:350px;max-width:100%;max-height:calc(100vh - 40px);border-radius:10px}
  .pop__head{height:58.8px}
  .pop__head p{left:19px;height:58.8px;font-size:20px;line-height:1.4;letter-spacing:-.6px}
  .pop__x{right:23px;top:21.4px;width:15.94px;height:15.94px}
  .pop__body{padding:33px 19px 45px}
  .pop__who{gap:18px}
  .pop__ph{width:91px;height:91px;background:#bde6fe}
  .pop__who>div:last-child{width:auto;padding-top:0}
  .pop__role{font-size:14px;line-height:14px;letter-spacing:-.7px}
  .pop__name{margin-top:9px;font-size:14px;line-height:1.4;letter-spacing:-.7px;color:#0a1430}
  .pop__desc{margin-top:8px;font-size:14px;line-height:1.4;letter-spacing:-.7px}
  .pop__ch{margin-top:49px;gap:25px}
  .pop__ch+.pop__ch{margin-top:55px}
  .pop__chip{height:33.5px;padding:5.8px 14.6px;border-radius:73px;font-size:15px;line-height:21.9px;letter-spacing:-.45px}
  .qa{gap:5px}
  .qa+.qa{margin-top:0}
  .pop__ch{row-gap:25px}
  .qa__q{font-size:14px;line-height:1.45;letter-spacing:-.42px}
  .qa__a{font-size:13px;line-height:1.45;letter-spacing:-.39px}
}

/* 오픈 예정 안내 팝업 (.pop 시스템 재사용) */
.pop--notice .pop__box{width:480px;box-shadow:0 12px 40px rgba(0,31,93,.28)}
.pop--notice .pop__head{height:64px}
.pn__label{position:absolute;left:32px;top:0;height:64px;display:flex;align-items:center;font-weight:700;font-size:20px;letter-spacing:-.6px;color:var(--navy)}
.pop--notice .pop__x{right:22px;top:16px;width:32px;height:32px;padding:6px}
.pn__body{padding:44px 40px 40px;text-align:center;word-break:keep-all;text-wrap:balance}
.pn__date{margin-bottom:6px;font-weight:800;font-size:48px;line-height:1.2;letter-spacing:-1.9px;color:var(--blue)}
.pn__title{font-weight:800;font-size:30px;line-height:1.35;letter-spacing:-1.2px;color:var(--navy)}
.pn__desc{margin-top:16px;font-weight:500;font-size:18px;line-height:1.5;letter-spacing:-.36px;color:#000}
.pn__desc strong{font-weight:800}
.pn__ok{margin-top:32px;width:200px;height:56px;border:1px solid var(--sky);border-radius:999px;background:var(--navy);color:#fff;font-weight:700;font-size:20px;letter-spacing:-.8px;transition:background .12s}
.pn__ok:hover{background:var(--blue)}
.pn__ok:active{transform:scale(.97)}
.pn__ok:focus-visible,.pop--notice .pop__x:focus-visible{outline:3px solid var(--main);outline-offset:3px}
.pop--notice:not([hidden]) .pop__box{animation:pop-box-sm .22s ease-out}
.pop--notice.closing .pop__box{animation:pop-box-sm .2s reverse forwards}
@keyframes pop-box-sm{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:1023px){
  .pop--notice .pop__box{width:310px;box-shadow:0 8px 28px rgba(0,31,93,.28)}
  .pop--notice .pop__head{height:48px}
  .pn__label{left:20px;height:48px;font-size:15px;letter-spacing:-.45px}
  .pop--notice .pop__x{right:14px;top:8px;width:32px;height:32px;padding:8px}
  .pn__body{padding:30px 22px 26px}
  .pn__date{font-size:34px;letter-spacing:-1.36px}
  .pn__title{font-size:20px;line-height:1.4;letter-spacing:-.8px}
  .pn__desc{margin-top:12px;font-size:15px;letter-spacing:-.3px}
  .pn__ok{margin-top:24px;width:100%;max-width:220px;height:48px;font-size:17px;letter-spacing:-.68px}
}

/* 복리후생: 분야 아이콘 탭 + 아래 넓은 패널 (탭을 바꿔도 높이가 변하지 않게 패널을 한 칸에 겹쳐 쌓음) */
.s-bn{padding:100px 0;background:#60c6ff}
.s-bn .wrap{display:flex;flex-direction:column;align-items:center;gap:50px}
.s-bn .s-head__h{font-size:49.4px;line-height:normal}
.bt{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;width:100%;margin-bottom:-14px}
.bt__tab{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 10px;border-radius:22px;color:var(--navy);transition:background-color .2s}
.bt__tab .bfx{flex:none;width:76px;height:76px;opacity:.7;transition:opacity .2s,transform .2s,box-shadow .2s}
.bt__tab>span{position:relative;padding-bottom:10px;font-weight:700;font-size:15px;line-height:1.35;letter-spacing:-.4px;text-align:center;word-break:keep-all;opacity:.7;transition:opacity .2s}
.bt__tab>span::after{content:"";position:absolute;left:50%;bottom:0;width:0;height:4px;margin-left:-14px;border-radius:2px;background:var(--yellow);box-shadow:0 1px 4px rgba(0,31,93,.25);transition:width .2s,margin-left .2s}
.bt__tab:hover .bfx,.bt__tab:hover>span{opacity:1}
.bt__tab:hover{background:rgba(255,255,255,.18)}
.bt__tab[aria-selected="true"] .bfx,.bt__tab[aria-selected="true"]>span{opacity:1}
.bt__tab[aria-selected="true"] .bfx{transform:scale(1.08);box-shadow:0 0 0 3px var(--navy),0 8px 18px rgba(0,31,93,.22)}
.bt__tab[aria-selected="true"]>span::after{width:28px}
.bt__tab:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.bp-wrap{display:grid;width:100%}
.bp{grid-area:1/1;display:flex;align-items:center;gap:52px;padding:44px 56px;border:1px solid #e2ecfa;border-radius:28px;background:radial-gradient(520px 180px at 100% 100%,rgba(92,197,255,.2),rgba(92,197,255,0)),#fff;box-shadow:0 12px 24px rgba(51,94,155,.12);visibility:hidden;opacity:0;transition:opacity .3s,visibility .3s}
.bp[aria-labelledby].is-on{visibility:visible;opacity:1}
/* 복리후생 일러스트 모션: 탭 전환 시 등장 + 은은한 숨쉬기·링·점 (transform·opacity만, .is-on 토글이 트리거) */
.bp__fig{position:relative;flex:none;width:200px;height:200px}
.bp__fig .bfx{display:block;width:100%;height:100%}
.bp.is-on .bp__fig .bfx{animation:bp-pop .7s cubic-bezier(.25,1,.5,1) .08s both}
@keyframes bp-pop{from{opacity:0;transform:translateY(14px) scale(.92) rotate(-4deg)}to{opacity:1;transform:none}}
.bt__tab[aria-selected="true"] .bfx{animation:tab-pop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes tab-pop{from{transform:scale(.94)}to{transform:scale(1.08)}}
@media (hover:hover){.bt__tab[aria-selected="false"]:hover .bfx{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.bp,.bt__tab,.bt__tab .bfx{transition:none}.bp__fig .bfx,.bt__tab .bfx{animation:none!important}}
.bp__body{flex:1;min-width:0}
.bp h3{margin:0 0 24px;font-weight:800;font-size:30px;line-height:1.3;letter-spacing:-1.2px;color:var(--navy);word-break:keep-all}
.bp__items{display:grid;grid-template-columns:1fr 1fr;gap:18px 28px;margin:0}
.bp__items dt{position:relative;padding-left:30px;font-weight:700;font-size:17px;line-height:1.4;letter-spacing:-.43px;color:var(--navy)}
.bp__items dt::before{content:"";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--main)}
.bp__items dt::after{content:"";position:absolute;left:5.5px;top:6.5px;width:9px;height:4.5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.bp__items dd{margin:4px 0 0;padding-left:30px;font-size:15px;line-height:1.5;letter-spacing:-.38px;color:#000;word-break:keep-all}
.bp__items small{font-size:13px;color:#72839b}
.bp__note{margin-top:20px;font-size:13px;line-height:1.6;color:#72839b;word-break:keep-all}
@media (max-width:1023px){
  .s-bn{padding:64px 0 80px}
  .s-bn .wrap{gap:28px;padding:0 16px}
  .s-bn .s-head__h{font-size:30px;line-height:37.5px}
  .bt{display:flex;gap:8px;margin:0 -16px -8px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none;width:calc(100% + 32px)}
  .bt::-webkit-scrollbar{display:none}
  .bt__tab{flex:none;width:104px;gap:6px;padding:10px 6px 10px;border-radius:18px;align-items:center;justify-content:flex-start}
  .bt__tab .bfx{width:54px;height:54px}
  .bt__tab>span{font-size:12px;letter-spacing:-.3px}
  .bp{flex-direction:column;gap:18px;padding:28px 20px 26px;border-radius:22px}
  .bp__fig{width:132px;height:132px}
  .bp__body{width:100%}
  .bp h3{margin-bottom:18px;font-size:22px;text-align:center;letter-spacing:-.88px}
  .bp__items{grid-template-columns:1fr;gap:16px}
  .bp__items dt{font-size:15.5px;padding-left:28px}
  .bp__items dd{font-size:14px;padding-left:28px}
  .bp__note{font-size:12px}
}
@media (min-width:600px) and (max-width:1023px){
  /* 태블릿: 탭은 5칸 균등, 패널 항목은 2열 (모바일 세로 패널이 넓게 늘어나지 않도록) */
  .s-bn{padding:80px 0 96px}
  .s-bn .wrap{gap:40px;padding:0 32px}
  .bt{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0 0 -10px;padding:0;overflow:visible;width:100%}
  .bt__tab{width:auto;gap:8px;padding:12px 6px}
  .bt__tab .bfx{width:64px;height:64px}
  .bt__tab>span{font-size:13px}
  .bp{padding:36px 40px}
  .bp__items{grid-template-columns:1fr 1fr;gap:16px 24px}
  .bp__items dt{font-size:16px;padding-left:28px}
  .bp__items dd{font-size:14.5px;padding-left:28px}
  .bp__note{font-size:12.5px}
}
@media (min-width:720px) and (max-width:1023px){
  /* 태블릿 세로 이상: PC처럼 아이콘 왼쪽·내용 오른쪽 */
  .bp{flex-direction:row;align-items:center;gap:36px}
  .bp__fig{width:160px;height:160px}
  .bp__body{width:auto}
  .bp h3{margin-bottom:20px;font-size:26px;text-align:left;letter-spacing:-1.04px}
}
/* 복리후생 아이콘 요소 모션: 패널은 .bp.is-on, 탭은 .bt__tab.is-on(선택 탭)일 때만 재생. transform·opacity만 */
.bfx{display:block;--hz:#ff7a59;position:relative;border-radius:50%;overflow:hidden;background:#edf7fd;container-type:inline-size;isolation:isolate}
.bfx>img{position:absolute;top:0;left:0;width:100%;height:100%;display:block}
.bfx .p{position:absolute;opacity:0;pointer-events:none}
.bfx .h{width:5%;color:var(--hz)} .bfx .h svg{display:block;width:100%;height:auto;fill:currentColor}
.bfx .s{width:4%;height:0;padding-bottom:4%;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 2px #5cc5ff)}
.bfx .s.y{background:#ffd75e}
.bfx .o{width:2.4%;height:0;padding-bottom:2.4%;border-radius:50%;background:#fff;box-shadow:0 0 3px 1px rgba(92,197,255,.8)}
/* 전체 정지 상태 = 원본 그대로. .is-on 일 때만 움직임 */
.is-on .bfx .rise{animation:bfx-rise 3.6s ease-out var(--d,0s) infinite}
.is-on .bfx .twk{animation:bfx-twk 2.6s ease-in-out var(--d,0s) infinite}
.is-on .bfx .flk{animation:bfx-flk 1.8s ease-in-out var(--d,0s) infinite}
@keyframes bfx-rise{0%{opacity:0;transform:translateY(0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translateY(-6px) scale(1);transform:translateY(-6cqw) scale(1)}}
@keyframes bfx-twk{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
@keyframes bfx-flk{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.88)}}
/* 이미지 레이어 */
.bfx .l{transform-origin:var(--ox,50%) var(--oy,50%);will-change:transform}
/* 2 여성: 하트 박동, 포인트 선 깜빡임 */
.is-on .bfx--woman .heart{animation:bfx-beat 1.8s ease-in-out .3s infinite;--ox:72.1%;--oy:36.9%}
.is-on .bfx--woman .lines{animation:bfx-flk 2.2s ease-in-out .9s infinite;--ox:80%;--oy:72%}
@keyframes bfx-beat{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.28)}24%{transform:scale(1.08)}30%{transform:scale(1.2)}}
/* 3 능력: 톱니 좌우 회전(뒤쪽 레이어), 선 깜빡임 */
.is-on .bfx--skill .gear{animation:bfx-gear 4.5s ease-in-out infinite alternate;--ox:17.4%;--oy:49.6%}
.is-on .bfx--skill .lines{animation:bfx-flk 1.6s ease-in-out .5s infinite;--ox:94%;--oy:44%}
@keyframes bfx-gear{from{transform:rotate(-18deg)}to{transform:rotate(18deg)}}
/* 화살표: 어깨 뒤에서 오른쪽 위로 자라 나왔다가 사라짐 */
.is-on .bfx--skill .arrow{animation:bfx-arrow 3.2s linear .3s infinite}
@keyframes bfx-arrow{0%{opacity:0;transform:translate(-3.6%,4.1%);animation-timing-function:ease-out}4%{opacity:1;transform:translate(-3.6%,4.1%);animation-timing-function:cubic-bezier(.15,.9,.3,1)}16%,72%{opacity:1;transform:none}90%,100%{opacity:0;transform:none}}
/* 4 Refresh: 해 몸통 맥동, 빛줄기 연속 회전, 태그 흔들림 */
.is-on .bfx--refresh .leaf{animation:bfx-leaf 3.4s ease-in-out .2s infinite alternate;--ox:41.7%;--oy:65.8%}
.is-on .bfx--refresh .tag{animation:bfx-tag 2.6s ease-in-out .4s infinite alternate;--ox:75%;--oy:38.5%}
@keyframes bfx-leaf{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes bfx-tag{from{transform:rotate(-7deg)}to{transform:rotate(7deg)}}
/* 5 건강: 하트 박동(복사본이 베이스 하트 위에서 커졌다 줄어듦) */
.is-on .bfx--health .heart{animation:bfx-beat2 1.6s ease-in-out infinite;--ox:80%;--oy:71.8%}
@keyframes bfx-beat2{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.1)}24%{transform:scale(1.03)}30%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){.bfx .l,.bfx .p{animation:none!important}.bfx .p{display:none}}

/* ===== v17 검수 수정 (모바일·태블릿 검수 v16 상 2건·중 9건, 해당 폭 구간 전용) ===== */
/* 1 GNB: 1120px 고정 폭이 1024~1119 화면보다 넓어 지원하기 버튼이 잘림 */
@media (min-width:1024px) and (max-width:1119px){.gnb__in{width:auto;margin:0 32px}}
/* 2 KV: 모바일 장면(689px 고정)을 690~1023에서 화면 폭에 맞춰 키움 (섹션 높이·마스크·스크롤 화살표도 같은 비율) */
@media (min-width:690px) and (max-width:1023px){
  .s-kv{height:calc(113.77px + 88.84vw)}
  .kv-scene{left:0;width:100%;height:auto;aspect-ratio:689.1/695.21;-webkit-mask:linear-gradient(to bottom,transparent 29.5%,#000 39.07%);mask:linear-gradient(to bottom,transparent 29.5%,#000 39.07%)}
  .kv-scroll{top:min(calc(100vh - 50px),calc(70px + 88.84vw))}
}
/* 3·4·5·6 한 글자 줄바꿈·단어 중간 끊김: 어절 단위로 줄바꿈 */
@media (max-width:1023px){
  .pop__name,.pop__desc,.qa__q,.qa__a,.info__ul,.camp-note li,.bp__items dt{word-break:keep-all;text-wrap:pretty}
  /* 8 인터뷰 팝업 X: 보이는 아이콘(16px)은 그대로, 터치 영역만 44px */
  .pop:not(.pop--notice) .pop__x::before{content:"";position:absolute;inset:-14.1px}
}
/* 7 인터뷰 카드: 카드 4장(746px)이 한 줄에 다 들어오는 폭에서는 가운데 정렬 */
@media (min-width:768px) and (max-width:1023px){.cards{justify-content:center}}
/* 9·10 채용 절차 탭·캠퍼스 일정 카드/안내문 */
@media (min-width:600px) and (max-width:1023px){
  .ptab{width:240px}
  .camp-cards{grid-template-columns:1fr 1fr}
  .cc i{top:0;width:100%;height:auto;aspect-ratio:326/264;transform:translateY(-31.06%)}
  .camp-note{font-size:14px;line-height:20px;letter-spacing:-.42px}
  .camp-note li{justify-content:center;text-align:center}
}
/* 9 채용 절차 단계: 768 이상은 PC처럼 7단계 한 줄 (본문 폭 720px 기준) */
@media (min-width:768px) and (max-width:1023px){
  .flow__steps{flex-wrap:nowrap;max-width:720px}
  .grp,.grp:has(.st+.st),.grp:has(.st+.st+.st){flex:1 0 0}
  .grp:has(.st+.st){flex-grow:2}
  .grp:has(.st+.st+.st){flex-grow:3}
  .flow__d{height:44px;margin:0 6.86px 20px 0;padding:0 6px;font-size:15.4px;line-height:1.2;letter-spacing:-.77px}
  .st{padding:0 6.86px 16.6px 0}
  .st img{width:83.4px;height:83.4px;margin-bottom:0}
  .st p{padding-top:11px;font-size:14px;line-height:15px;letter-spacing:-.6px}
  .st::after{right:-1.7px;top:34.7px;width:9px;height:13px}
}
/* 11 채용 분야 여행자: 1439 이하에서 화면 안에 들어오게 (1440 이상은 기존 위치 그대로) */
@media (min-width:1024px) and (max-width:1439px){
  .s-field__trav{left:min(calc(50% + 515px),calc(100% - 205px))}
  .s-field__shadow{left:min(calc(50% + 490px),calc(100% - 230px))}
}

/* ===== v18 수정 ===== */
/* 1 인터뷰 팝업 전체: 어절 단위 줄바꿈 (긴 영문·URL만 칸을 넘을 때 끊김) */
.pop__name,.pop__desc,.pop__role,.pop__chip,.qa__q,.qa__a{word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
/* 2 인터뷰 카드 신규 여성 3장: 축소 후 좌우 가장자리가 보이지 않게 양끝을 부드럽게 */
.card__img--f,.pop__ph img.is-f{-webkit-mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent)}
/* 3 버튼 호버(PC 마우스 전용). 포커스(키보드)는 같은 수준으로 */
.btn-yellow::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:skewX(-20deg);pointer-events:none;opacity:0}
.btn-yellow{overflow:hidden}
@media (min-width:1024px){
  .btn-yellow,.btn-navy,.b-navy,.ptab{transition:transform .25s cubic-bezier(.25,1,.5,1),box-shadow .25s,background-color .25s,border-color .25s,color .25s,filter .25s}
  .btn-navy::after{transition:width .3s,bottom .3s,opacity .3s}
  .btn-yellow:focus-visible,.btn-navy:focus-visible,.b-navy:focus-visible,.ptab:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
  .btn-yellow:focus-visible{transform:translateY(-3px);box-shadow:3.84px 10px 24px rgba(0,31,93,.28)}
  .btn-navy:focus-visible{transform:translateY(-3px);filter:brightness(1.18);box-shadow:3.33px 10px 22px rgba(0,31,93,.35)}
  .b-navy:focus-visible{background:var(--blue);border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,31,93,.25)}
  .ptab:not(.on):focus-visible{transform:translateY(-2px);background:#e8f7ff;border-color:var(--blue);color:var(--blue)}
}
@media (hover:hover) and (min-width:1024px){
  .btn-yellow:hover{transform:translateY(-3px);box-shadow:3.84px 10px 24px rgba(0,31,93,.28)}
  .btn-yellow:hover::after{opacity:1;left:130%;transition:left .7s ease,opacity .2s}
  .btn-navy:hover{transform:translateY(-3px);filter:brightness(1.18);border-color:#fff;box-shadow:3.33px 10px 22px rgba(0,31,93,.35)}
  .btn-navy:hover::after{width:220px;bottom:-12px;opacity:1}
  .b-navy:hover{background:var(--blue);border-color:var(--blue);transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,31,93,.25)}
  .ptab:not(.on):hover{transform:translateY(-2px);background:#e8f7ff;border-color:var(--blue);color:var(--blue);box-shadow:4px 8px 10px rgba(0,0,0,.1)}
}
/* 4 채용 분야 계열사 탭(PC): 선택 유리 배경을 인디케이터 하나로 만들어 미끄러지듯 이동 */
.fn-ind{display:none}
@media (min-width:1024px){
  .fld__side{position:relative}
  .fn-ind{display:block;position:absolute;left:0;top:0;width:188.56px;height:42.84px;border-radius:25px;background:linear-gradient(155deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.1) 36%,rgba(255,255,255,.8) 100%);box-shadow:0 4px 20px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.08);transition:transform .45s cubic-bezier(.25,1,.5,1);pointer-events:none}
  .fn{position:relative;z-index:1}
  .fn.on{background:none;box-shadow:none}
  .fn span,.fn em{transition:color .3s}
}
@media (prefers-reduced-motion:reduce){.fn-ind{transition:none!important}}
/* 5 복리후생 탭: 아이콘-제목-노란 밑줄 간격 +6px (탭 레이아웃만) */
.bt__tab{gap:16px}
.bt__tab>span{padding-bottom:16px}
@media (max-width:1023px){.bt__tab{gap:12px}}
@media (min-width:600px) and (max-width:1023px){.bt__tab{gap:14px}}
/* 8 카운트다운 문구가 길어져도 어절 단위로 */
.s-count__t{word-break:keep-all}
/* 7 FAQ(PC) 펼침: 제목이 위로 갔다 내려오지 않게 닫힘·열림에서 제목 위치(위쪽 여백)를 같게 두고 높이만 변화 */
@media (min-width:1024px){
  .faq__q{align-items:flex-start;padding-top:24.72px;padding-bottom:12px;min-height:75.14px;transition:padding .45s cubic-bezier(.4,0,.2,1),min-height .45s cubic-bezier(.4,0,.2,1)}
  .faq__ic{margin:-5px 0 -6px}
  .faq li.open .faq__q{padding-top:24.72px;padding-bottom:0;min-height:0}
}
/* 복리후생 새 모션(PC 전용): 모자·선글라스 덜컹, 해 빛 번짐, 체크 순차, 선 반짝, 청진기 덜컹. 태블릿·모바일은 레이어가 그대로 정지 상태로 보임 */
.bfx .glow{left:22.6%;top:0.9%;width:40%;height:0;padding-bottom:40%;border-radius:50%;background:radial-gradient(circle,rgba(255,206,130,.7) 0%,rgba(255,206,130,0) 68%)}
@media (min-width:1024px){
  .is-on .bfx--refresh .glow{animation:bfx-glow 3.8s ease-in-out .2s infinite}
  .is-on .bfx--refresh .hat{animation:bfx-hat 4s ease-in-out .6s infinite}
  .is-on .bfx--refresh .glasses{animation:bfx-glasses 4s ease-in-out .66s infinite;--ox:53.5%;--oy:91%}
  .is-on .bfx--health .ck{animation-duration:5.2s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:ease-out}
  .is-on .bfx--health .ck1{animation-name:bfx-ck1;--ox:16.1%;--oy:37.7%}
  .is-on .bfx--health .ck2{animation-name:bfx-ck2;--ox:17.4%;--oy:47.3%}
  .is-on .bfx--health .ck3{animation-name:bfx-ck3;--ox:18.9%;--oy:56.9%}
  .is-on .bfx--health .ln{animation:bfx-ln 2.6s ease-in-out infinite}
  .is-on .bfx--health .ln1{--ox:67.7%;--oy:27.4%}
  .is-on .bfx--health .ln2{--ox:75.1%;--oy:26.2%}
  .is-on .bfx--health .ln3{--ox:82.3%;--oy:29.3%}
  .is-on .bfx--health .ln4{--ox:95.1%;--oy:56.2%;animation-delay:.9s}
  .is-on .bfx--health .steth{animation:bfx-rattle 6s ease-in-out 1.5s infinite;--ox:45%;--oy:83%}
}
@keyframes bfx-glow{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:.85;transform:scale(1.12)}}
@keyframes bfx-hat{0%,12%,100%{transform:none}3%{transform:translateY(-1.5%)}6%{transform:none}9%{transform:translateY(-1%)}}
@keyframes bfx-glasses{0%,12%,100%{transform:none}3%{transform:translateY(-1.8%) rotate(-1.5deg)}6%{transform:rotate(1deg)}9%{transform:translateY(-1.2%) rotate(-.8deg)}}
@keyframes bfx-ck1{0%,6%{opacity:0;transform:scale(.4)}10%{opacity:1;transform:scale(1.2)}13%,72%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1)}}
@keyframes bfx-ck2{0%,19%{opacity:0;transform:scale(.4)}23%{opacity:1;transform:scale(1.2)}26%,72%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1)}}
@keyframes bfx-ck3{0%,32%{opacity:0;transform:scale(.4)}36%{opacity:1;transform:scale(1.2)}39%,72%{opacity:1;transform:scale(1)}80%,100%{opacity:0;transform:scale(1)}}
@keyframes bfx-ln{0%,45%,100%{opacity:1;transform:scale(1)}12%{opacity:.2;transform:scale(.8)}26%{opacity:1;transform:scale(1.15)}}
@keyframes bfx-rattle{0%,10%,100%{transform:none}2%{transform:translateY(.9%) rotate(-1.2deg)}4%{transform:translateY(-.6%) rotate(1.2deg)}6%{transform:translateY(.5%) rotate(-.8deg)}8%{transform:translateY(-.3%) rotate(.5deg)}}
@media (prefers-reduced-motion:reduce){.bfx .glow{display:none}}

/* ===== v25 첫 화면 등장 모션 ===== */
/* 문구 3줄: 위에서 아래로 내려오며 페이드인(스태거), 장면(건물 포함 한 장)은 건물 하단 기준으로 살짝 커지며 페이드인. 이미지·폰트 준비 후 JS가 .kv-go를 붙여 시작 */
@keyframes kv-in{from{opacity:0;scale:var(--kv-s0,.91);translate:0 var(--kv-y0,0px)}to{opacity:1;scale:1;translate:0 0}}
@keyframes kv-txt-in{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
.kv-scene{transform-origin:50% 88%}
/* 태블릿(장면이 화면 폭과 거의 같음): 축소폭을 줄여 좌우 가장자리가 드러나는 폭을 최소화 */
@media (min-width:600px) and (max-width:1023px){.s-kv{--kv-s0:.96}}
@media (scripting:enabled){.s-kv:not(.kv-go) :is(.kv-scene,.s-kv__eyebrow,.s-kv__title,.s-kv__copy){opacity:0}}
.s-kv.kv-go .s-kv__eyebrow{animation:kv-txt-in .85s cubic-bezier(.25,1,.5,1) 0s backwards}
.s-kv.kv-go .s-kv__title{animation:kv-txt-in .85s cubic-bezier(.25,1,.5,1) .18s backwards}
.s-kv.kv-go .s-kv__copy{animation:kv-txt-in .85s cubic-bezier(.25,1,.5,1) .36s backwards}
.s-kv.kv-go .kv-scene{animation:kv-in 1.5s cubic-bezier(.25,1,.5,1) .45s backwards}
@media (prefers-reduced-motion:reduce){.s-kv.kv-go .kv-scene,.s-kv.kv-go .s-kv__eyebrow,.s-kv.kv-go .s-kv__title,.s-kv.kv-go .s-kv__copy{animation:none}}

/* ===== v26 ===== */
/* 1 GNB: 로드 직후 스크롤 복원 시 배경·높이 전환이 슬라이드처럼 보이지 않게 (JS가 .no-tr을 잠깐 붙임) */
.gnb.no-tr,.gnb.no-tr *{transition:none!important}
/* 2 히어로 구름: 문구 블록이 화면 가운데쯤 오면(JS가 .clouds-in 부여) 3겹이 뒤→가운데→앞 순서로 아래에서 위로 올라옴. 그 전에는 안 보임, 화면 밖으로 나갔다 다시 오면 재생 */
.s-hero__bg{--d:0px;transform:translate(-50%,0)}
.s-hero__bg--b{--d:40px;--dl:0s;-webkit-mask-image:linear-gradient(to bottom,#000 40%,transparent 58%);mask-image:linear-gradient(to bottom,#000 40%,transparent 58%)}
.s-hero__bg--m{--d:90px;--dl:.15s;-webkit-mask-image:linear-gradient(to bottom,transparent 38%,#000 55%,#000 65%,transparent 80%);mask-image:linear-gradient(to bottom,transparent 38%,#000 55%,#000 65%,transparent 80%)}
.s-hero__bg--f{--d:150px;--dl:.3s;-webkit-mask-image:linear-gradient(to bottom,transparent 62%,#000 80%);mask-image:linear-gradient(to bottom,transparent 62%,#000 80%)}
@media (max-width:1023px){.s-hero__bg--b{--d:20px}.s-hero__bg--m{--d:45px}.s-hero__bg--f{--d:75px}}
@keyframes cloud-up{from{opacity:0;transform:translate(-50%,var(--d))}to{opacity:1;transform:translate(-50%,0)}}
@media (scripting:enabled){.s-hero:not(.clouds-in) .s-hero__bg{opacity:0}}
.s-hero.clouds-in .s-hero__bg{animation:cloud-up 1.2s cubic-bezier(.25,1,.5,1) var(--dl) backwards}
@media (prefers-reduced-motion:reduce){.s-hero:not(.clouds-in) .s-hero__bg{opacity:1}.s-hero.clouds-in .s-hero__bg{animation:none}}

/* ===== v27 ===== */
/* 1 메뉴 이동 도착 위치: 인터뷰·복리후생 제목이 고정 메뉴에 붙던 것을 다른 메뉴(채용 절차·분야·FAQ)처럼 제목이 메뉴 아래 약 120px(PC)·80px(모바일)에 오도록 */
#interview,#benefit{scroll-margin-top:100px}
@media (max-width:1023px){#interview{scroll-margin-top:70px}#benefit{scroll-margin-top:16px}}
@media (min-width:600px) and (max-width:1023px){#benefit{scroll-margin-top:0}}
/* 3 넓은 화면: 장면의 보이는 구간(폭 약 1994px)이 화면 폭에 가까워져 축소 시작 때 좌우 끝이 잘린 경계로 드러남 → 시작 배율을 키우고(1994px 이상은 축소 없이 아래에서 올라옴) */
@media (min-width:1700px){.s-kv{--kv-s0:.97}}
@media (min-width:1994px){.s-kv{--kv-s0:1;--kv-y0:28px}}