/*
 * 일러스트/게임원화학과 페이지 스타일
 * 모든 규칙은 #illustLanding 안에서만 적용됩니다 (사이트 공통 CSS와 충돌 방지).
 * 외부 폰트: Pretendard (jsDelivr CDN, ASP 본체 head 에서 불러옴)
 */
#illustLanding{scroll-behavior:smooth;font-family:'Pretendard','Noto Sans KR',-apple-system,sans-serif;background:#161617;color:#fff;word-break:keep-all;-webkit-font-smoothing:antialiased;overflow:hidden;line-height:normal;font-weight:400;overflow-wrap:normal}
/* 사이트 공통 CSS(body 500 16px/1.6, em 굵기 normal, th·td·input NEXON) 가 새어 들어오지 않게 */
#illustLanding em{font-weight:inherit}
#illustLanding :is(th, td, input, select, button, textarea){font-family:inherit}
#illustLanding .il-in::placeholder{font-family:inherit;font-size:15px;font-weight:400}
#illustLanding *{box-sizing:border-box}
/* 기본값 초기화는 :where() 로 우선순위 0 — 아래 클래스 스타일이 항상 이기도록 */
:where(#illustLanding) a{text-decoration:none;color:inherit}
:where(#illustLanding) :where(em, i){font-style:normal}
:where(#illustLanding) :where(h1, h2, h3, p, ul){margin:0;padding:0}
:where(#illustLanding) ul{list-style:none}
:where(#illustLanding) button{font-family:inherit}
#illustLanding .il-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
#illustLanding .il-sec{padding:120px 0}
#illustLanding .il-pill{display:inline-block;padding:7px 16px;border-radius:999px;border:1px solid rgba(0,187,255,.5);font-size:15px;font-weight:700;letter-spacing:1.36px;color:#00bbff}
#illustLanding .il-eyebrow{font-size:17px;font-weight:700;letter-spacing:1.36px;color:#00bbff}
#illustLanding .il-h2{font-size:40px;line-height:1.35;font-weight:800;letter-spacing:-1.2px}
#illustLanding .il-head-c{text-align:center}
#illustLanding .il-head-c .il-h2{margin-top:16px}
#illustLanding .il-eyebrow+.il-h2{margin-top:12px}
/* 버튼 */
#illustLanding .il-btn{display:inline-flex;align-items:center;justify-content:center;height:62px;padding:0 34px;border-radius:80px;background:linear-gradient(59deg,#00bbff 22%,#008cbf 108%);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.6px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
#illustLanding .il-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,187,255,.35)}
#illustLanding .il-btn-o{display:inline-flex;align-items:center;justify-content:center;height:62px;padding:0 30px;border-radius:80px;background:rgba(19,19,20,.6);border:1px solid rgba(255,255,255,.5);color:#fff;font-size:19px;font-weight:700;letter-spacing:-.6px;transition:background .2s ease,transform .2s ease}
#illustLanding .il-btn-o:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
/* HERO */
#illustLanding .il-hero{position:relative;overflow:hidden;background:#111112}
/* 배경은 따로 깔아 천천히 줌아웃 (국비지원 페이지와 같은 9초 모션) */
#illustLanding .il-hero-bg{position:absolute;inset:0;background:url('/2025/img/curriculum/illust/hero3.jpg') 70% 18%/cover no-repeat;animation:il-ilHeroZoom 9s cubic-bezier(.22,1,.36,1) both}
@keyframes il-ilHeroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
/* 아래쪽을 다음 섹션 배경색으로 자연스럽게 이어줌 */
#illustLanding .il-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:320px;z-index:1;pointer-events:none;background:linear-gradient(0deg,#161617 0%,rgba(22,22,23,.85) 30%,rgba(22,22,23,0) 100%)}
#illustLanding .il-hero .il-wrap{position:relative;z-index:2;padding-top:150px;padding-bottom:48px}
#illustLanding .il-hero-en{font-size:20px;font-weight:700;letter-spacing:4px;color:#00bbff}
#illustLanding .il-hero h1{margin-top:22px;font-size:56px;line-height:1.3;font-weight:700;letter-spacing:-1.7px}
#illustLanding .il-hero h1 em{color:#00bbff}
#illustLanding .il-hero-sub{margin-top:26px;font-size:22px;font-weight:500;color:#eee}
#illustLanding .il-hero-btns{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
#illustLanding .il-hero-pts{margin-top:96px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid rgba(255,255,255,.14);padding-top:22px}
/* 아래 숫자 띠처럼 칸 가운데 정렬 — 화면 중심 기준으로 좌우가 대칭이 되게 */
#illustLanding .il-hero-pts>div{display:flex;align-items:baseline;justify-content:center;gap:12px}
#illustLanding .il-hero-pts i{font-size:20px;font-weight:700;color:#00bbff}
#illustLanding .il-hero-pts b{display:block;font-size:18px;font-weight:700}
#illustLanding .il-hero-pts span{display:block;margin-top:4px;font-size:15px;color:#c3c6cf}
#illustLanding .il-hero-anim>*{animation:il-ilUp .9s cubic-bezier(.22,1,.36,1) both}
#illustLanding .il-hero-anim>*:nth-child(2){animation-delay:.08s}
#illustLanding .il-hero-anim>*:nth-child(3){animation-delay:.16s}
#illustLanding .il-hero-anim>*:nth-child(4){animation-delay:.24s}
#illustLanding .il-hero-anim>*:nth-child(5){animation-delay:.34s}
@keyframes il-ilUp{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}
/* STATS */
#illustLanding .il-stats{background:#161617;border-bottom:1px solid #26272b}
#illustLanding .il-stats .il-wrap{padding-top:56px;padding-bottom:56px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;text-align:center}
#illustLanding .il-stat b{display:block;font-size:44px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums}
#illustLanding .il-stat b small{margin-left:4px;font-size:22px;font-weight:800;color:#00bbff}
#illustLanding .il-stat span{display:block;margin-top:6px;font-size:15px;color:#9aa0ac}
/* FIND YOUR START (탭) */
#illustLanding .il-start .il-wrap{padding-top:120px}
#illustLanding .il-tabs{margin-top:40px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:end}
/* 탭: 국비지원 '저도 지원받을 수 있나요?' 방식 (게임그래픽학과 랜딩과 동일)
   - 꺼진 탭: 카드 180px, 그림 흐리게 / 켜진 탭: 카드 220px로 커지고 테두리, 그림이 카드 위로 솟아오름
   - 국비지원은 캐릭터 누끼 PNG 를 썼지만 여기는 누끼가 없어 같은 그림을 위쪽만 남겨 띄움 */
#illustLanding .il-tab{position:relative;height:250px;padding:0;border:0;background:transparent;cursor:pointer;text-align:left;color:#fff;border-radius:10px}
#illustLanding .il-tab .tb{position:absolute;left:0;right:0;bottom:0;height:180px;border-radius:10px;overflow:hidden;background:#222;border:1px solid transparent;transition:height .45s cubic-bezier(.4,0,.2,1),box-shadow .45s ease,border-color .45s ease}
#illustLanding .il-tab .tb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.5;transition:opacity .45s ease,transform .7s cubic-bezier(.22,1,.36,1)}
#illustLanding .il-tab .tb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:114px;background:linear-gradient(180deg,rgba(34,34,34,0),rgba(20,20,20,.93))}
#illustLanding .il-tab .chw{position:absolute;inset:0;pointer-events:none;z-index:1}
#illustLanding .il-tab .chw img{position:absolute;left:10%;bottom:58px;width:80%;height:200px;object-fit:cover;object-position:top;border-radius:10px 10px 0 0;-webkit-mask-image:linear-gradient(#000 55%,transparent 92%);mask-image:linear-gradient(#000 55%,transparent 92%);opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .45s cubic-bezier(.4,0,.2,1)}
#illustLanding .il-tab .tt{position:absolute;left:24px;right:16px;bottom:20px;z-index:2;display:flex;flex-direction:column;gap:8px;transition:transform .55s cubic-bezier(.22,1,.36,1)}
#illustLanding .il-tab .tt em{font-weight:700;font-size:15px;line-height:1;color:#00bbff;letter-spacing:.5px}
#illustLanding .il-tab .tt b{font-weight:700;font-size:21px;line-height:1.3}
#illustLanding .il-tab:hover:not(.on) .tt{transform:translateY(-4px)}
#illustLanding .il-tab:hover:not(.on) .tb img{opacity:.75;transform:scale(1.04)}
#illustLanding .il-tab.on .tb{height:220px;border-color:#00bbff;box-shadow:0 7px 25px rgba(20,58,71,.4)}
#illustLanding .il-tab.on .tb img{opacity:.4}
#illustLanding .il-tab.on .chw img{opacity:1;transform:none;transition:opacity .45s ease .05s,transform .55s cubic-bezier(.22,1,.36,1)}
#illustLanding .il-tab:focus-visible{outline:2px solid #00bbff;outline-offset:3px}
#illustLanding .il-panel{margin-top:36px;min-height:230px;border:1px solid rgba(0,187,255,.5);border-radius:10px;background:linear-gradient(0deg,rgba(0,187,255,.2) 46%,rgba(22,22,23,.2) 95%),#222;padding:48px 80px 44px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px}
/* 탭을 바꾸면 왼쪽 글 → 오른쪽 목록 순서로 올라옴 (국비지원 방식) */
#illustLanding .il-panel.swap .il-panel-txt, #illustLanding .il-panel.swap li{animation:il-ilUp .55s cubic-bezier(.22,1,.36,1) both}
#illustLanding .il-panel.swap li:nth-child(2){animation-delay:.06s}
#illustLanding .il-panel.swap li:nth-child(3){animation-delay:.12s}
#illustLanding .il-panel-txt{flex:1 1 380px;min-width:0}
#illustLanding .il-panel-txt em{font-weight:700;font-size:16px;color:#00bbff}
#illustLanding .il-panel-txt h3{margin-top:14px;font-size:29px;line-height:1.25;font-weight:700}
#illustLanding .il-panel-txt p{margin-top:18px;font-size:19px;line-height:1.6;color:#c3c6cf}
#illustLanding .il-panel ul{display:flex;flex-direction:column;gap:12px;min-width:260px}
#illustLanding .il-panel li{display:flex;align-items:center;gap:14px;font-size:19px;color:#e6e8ee;white-space:nowrap}
#illustLanding .il-panel li::before{content:"✓";color:#00bbff;font-weight:800}
#illustLanding .il-ask{margin-top:24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding:26px 26px 26px 30px;border-radius:18px;border:1px solid rgba(0,196,224,.45);background:linear-gradient(90deg,rgba(0,196,224,.16),rgba(0,196,224,.04)),#1f2226}
#illustLanding .il-ask b{font-size:18px;font-weight:800}
#illustLanding .il-ask a{display:inline-flex;align-items:center;height:56px;padding:0 30px;border-radius:999px;background:#00c4e0;color:#0b2230;font-size:16px;font-weight:800;box-shadow:0 8px 22px rgba(0,196,224,.3);transition:transform .2s ease,box-shadow .2s ease}
#illustLanding .il-ask a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,196,224,.4)}
/* CURRICULUM */
#illustLanding .il-stages{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
#illustLanding .il-stage{display:flex;flex-direction:column;background:#29292b;border:1px solid #464646;border-radius:10px;overflow:hidden;transition:border-color .3s,transform .3s}
#illustLanding .il-stage:hover{border-color:#00bbff;transform:translateY(-4px)}
#illustLanding .il-stage-img{position:relative;height:240px;overflow:hidden}
#illustLanding .il-stage-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block;transition:transform .6s ease}
#illustLanding .il-stage:hover .il-stage-img img{transform:scale(1.05)}
#illustLanding .il-stage-img span{position:absolute;left:16px;top:16px;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.6);font-size:12px;font-weight:700;letter-spacing:1px;color:#00bbff}
#illustLanding .il-stage-body{flex:1;padding:22px 20px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
#illustLanding .il-stage h3{font-size:22px;font-weight:700}
#illustLanding .il-stage p{margin-top:8px;font-size:15px;line-height:1.55;color:#c3c6cf}
#illustLanding .il-chips{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
#illustLanding .il-chips i{padding:5px 10px;border-radius:6px;background:#3a3a3d;font-size:13px;color:#e6e8ee}
#illustLanding .il-stage-go{display:flex;align-items:center;justify-content:center;height:46px;border-radius:8px;border:1px solid #5a5a5e;color:#fff;font-size:15px;font-weight:700;transition:border-color .2s,background .2s}
#illustLanding .il-stage-go:hover{border-color:#00bbff;background:rgba(0,187,255,.08)}
/* ABOUT */
#illustLanding .il-about{background:#1b1d22;border-top:1px solid #26272b}
#illustLanding .il-about .il-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
#illustLanding .il-about-en{font-size:16px;font-weight:800;letter-spacing:2px;color:#00c4e0}
#illustLanding .il-about-big{margin-top:10px;font-size:64px;line-height:1.02;font-weight:900;letter-spacing:-1px}
#illustLanding .il-about-big span{color:#00c4e0}
#illustLanding .il-about h2{margin-top:30px;font-size:30px;line-height:1.45;font-weight:800;letter-spacing:-.8px}
#illustLanding .il-about-desc{margin-top:20px;font-size:17px;line-height:1.8;color:#c3c6cf}
#illustLanding .il-win{border-radius:18px;overflow:hidden;background:#fff;color:#1b1d24;box-shadow:0 30px 70px rgba(0,0,0,.45)}
#illustLanding .il-win-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#eef0f4;border-bottom:1px solid #e0e3e9}
#illustLanding .il-win-bar>i{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
#illustLanding .il-win-bar b{margin-left:10px;font-size:13px;font-weight:700;color:#5d6270;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#illustLanding .il-win-bar small{margin-left:auto;font-size:12px;color:#9aa0ac;white-space:nowrap}
#illustLanding .il-win-body{padding:22px 24px 24px}
#illustLanding .il-win-tit{font-size:18px;font-weight:800}
#illustLanding .il-win-grid{margin-top:16px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px}
#illustLanding .il-win-pic{position:relative;border-radius:12px;overflow:hidden;background:#f6f7f9;border:1px solid #e4e6eb}
#illustLanding .il-win-pic img{width:100%;height:250px;object-fit:cover;object-position:top;display:block}
#illustLanding .il-win-pic span{position:absolute;left:10px;top:10px;padding:3px 9px;border-radius:6px;background:rgba(17,19,24,.75);color:#fff;font-size:11px;font-weight:700}
#illustLanding .il-win-side{display:flex;flex-direction:column;gap:12px}
#illustLanding .il-win-lb{font-size:12px;font-weight:800;color:#8a909c;letter-spacing:1px}
#illustLanding .il-flow{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:13px;font-weight:700}
#illustLanding .il-flow span{padding:5px 9px;border-radius:6px;background:#eef0f4}
#illustLanding .il-flow span.on{background:#e6fafd;color:#00849c}
#illustLanding .il-flow i{color:#00a6c8}
#illustLanding .il-pal{margin-top:8px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
#illustLanding .il-pal i{height:34px;border-radius:6px}
#illustLanding .il-layers{margin-top:6px;display:flex;flex-direction:column;gap:4px;font-size:12.5px}
#illustLanding .il-layers span{padding:6px 9px;border-radius:6px;background:#f3f4f7}
#illustLanding .il-layers span.on{background:#e6fafd;color:#00849c;font-weight:700}
#illustLanding .il-win table{margin-top:16px;width:100%;border-collapse:collapse;font-size:13px}
#illustLanding .il-win th{padding:8px 10px;text-align:left;font-weight:700;background:#f3f4f7;color:#5d6270}
#illustLanding .il-win td{padding:8px 10px;border-bottom:1px solid #eef0f4}
#illustLanding .il-win tr:last-child td{border-bottom:0}
#illustLanding .il-win td:first-child{font-weight:700}
#illustLanding .il-win td:last-child{color:#00849c}
/* PORTFOLIO */
#illustLanding .il-pf-sec{background:#fff;color:#24272d}
#illustLanding .il-pf{margin-top:44px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:300px;gap:14px}
#illustLanding .il-pf>div{overflow:hidden;border-radius:12px;background:#222}
#illustLanding .il-pf>div.big{grid-column:span 2;grid-row:span 2}
#illustLanding .il-pf img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .5s ease}
#illustLanding .il-pf>div:hover img{transform:scale(1.06)}
/* TRACKS */
#illustLanding .il-tracks-sec{background:#f4f6f9;color:#1b1d24}
#illustLanding .il-tracks-sec .il-eyebrow{color:#00a6c8}
#illustLanding .il-tracks{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch}
#illustLanding .il-track{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:44px 40px 40px;border-radius:22px;background:#fff;border:1px solid #e4e6eb;color:#1b1d24;transition:transform .25s cubic-bezier(.34,1.6,.64,1),border-color .2s ease}
#illustLanding .il-track:hover{transform:translateY(-5px);border-color:#00bbff}
#illustLanding .il-track.dark{background:#1f2025;border-color:#1f2025;color:#fff}
#illustLanding .il-track-ic{position:absolute;right:32px;top:36px;width:64px;height:64px;border-radius:18px;background:#e6fafd;display:flex;align-items:center;justify-content:center}
#illustLanding .il-track.dark .il-track-ic{background:rgba(0,196,224,.12)}
#illustLanding .il-track-en{font-size:15px;font-weight:800;letter-spacing:1px;color:#00a6c8}
#illustLanding .il-track.dark .il-track-en{color:#00c4e0}
#illustLanding .il-track h3{margin-top:14px;font-size:28px;line-height:1.35;font-weight:800;padding-right:76px}
#illustLanding .il-track-desc{margin-top:14px;font-size:16px;color:#5d6270}
#illustLanding .il-track.dark .il-track-desc{color:#c3c6cf}
#illustLanding .il-track ul{margin-top:26px;display:flex;flex-direction:column;gap:14px}
#illustLanding .il-track li{display:flex;align-items:center;gap:12px;font-size:16.5px;font-weight:600}
#illustLanding .il-track li::before{content:"";width:8px;height:8px;border-radius:50%;background:#00c4e0;flex:0 0 auto}
#illustLanding .il-tags{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px}
#illustLanding .il-tags span{padding:9px 14px;border-radius:8px;background:#e6fafd;color:#00849c;font-size:14px;font-weight:700}
#illustLanding .il-track.dark .il-tags span{background:#1d3540;color:#5fdcef}
#illustLanding .il-track-btn{margin-top:auto;padding-top:28px}
#illustLanding .il-track-btn a{display:flex;align-items:center;justify-content:center;height:56px;border-radius:12px;border:1px solid #1b1d24;background:#fff;color:#1b1d24;font-size:16px;font-weight:800;transition:transform .2s ease,box-shadow .2s ease}
#illustLanding .il-track.dark .il-track-btn a{border:0;background:#00c4e0;color:#0b2230}
#illustLanding .il-track-btn a:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,187,255,.3)}
/* FAQ */
#illustLanding .il-faq-sec{background:linear-gradient(rgba(22,22,23,0) 68%,rgba(0,187,255,.2) 100%),#161617;border-top:1px solid #26272b}
#illustLanding .il-faq{margin-top:36px;display:flex;flex-direction:column;gap:10px}
#illustLanding .il-faq-item{border-radius:15px;background:#1f2025;border:1px solid #2c2e34;transition:border-color .3s}
#illustLanding .il-faq-item.open{border-color:#00bbff}
#illustLanding .il-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 26px;background:transparent;border:0;color:#fff;font-size:18px;font-weight:700;text-align:left;cursor:pointer}
#illustLanding .il-faq-q i{color:#00bbff;margin-right:12px}
#illustLanding .il-faq-q .pm{position:relative;flex:0 0 auto;width:16px;height:16px}
#illustLanding .il-faq-q .pm::before, #illustLanding .il-faq-q .pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:#9aa0ac;transition:transform .3s}
#illustLanding .il-faq-q .pm::after{transform:rotate(90deg)}
#illustLanding .il-faq-item.open .pm::after{transform:rotate(0)}
#illustLanding .il-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
#illustLanding .il-faq-item.open .il-faq-a{grid-template-rows:1fr}
#illustLanding .il-faq-a>div{overflow:hidden}
#illustLanding .il-faq-a p{padding:0 26px 24px 54px;font-size:16px;line-height:1.75;color:#c3c6cf}
#illustLanding .il-faq-a p i{color:#00bbff;margin:0 10px 0 -26px;font-weight:700}
/* 상담 · 수강료 조회 */
#illustLanding .il-cta{position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 30%,rgba(0,196,224,.16),transparent 55%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/64px 64px,#1b1d22}
#illustLanding .il-cta .il-wrap{padding-top:100px;padding-bottom:100px;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:center}
#illustLanding .il-cta-en{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:#00c4e0}
#illustLanding .il-cta-en::before{content:"";width:22px;height:2px;background:#00c4e0}
#illustLanding .il-cta h2{margin-top:18px;font-size:40px;line-height:1.3;font-weight:900;letter-spacing:-1.5px}
#illustLanding .il-cta h2 span{color:#00c4e0}
#illustLanding .il-bns{margin-top:30px;display:flex;flex-direction:column;gap:12px}
#illustLanding .il-bn{display:flex;align-items:flex-start;gap:22px;padding:24px 26px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);transition:border-color .2s ease,background .2s ease,transform .25s cubic-bezier(.34,1.6,.64,1)}
#illustLanding .il-bn:hover{border-color:#00c4e0;background:rgba(0,196,224,.08);transform:translateY(-3px)}
#illustLanding .il-bn>b{flex:0 0 auto;font-size:26px;font-weight:900;line-height:1;color:#00c4e0;letter-spacing:-.5px}
#illustLanding .il-bn strong{display:block;font-size:18px;font-weight:800}
#illustLanding .il-bn span{display:block;margin-top:6px;font-size:15px;line-height:1.55;color:#c3c6cf}
#illustLanding .il-call{margin-top:16px;display:flex;align-items:center;gap:22px;padding:26px;border-radius:18px;background:#fff;color:#1b1d24}
#illustLanding .il-call-ic{flex:0 0 auto;width:60px;height:60px;border-radius:50%;background:#e6fafd;display:flex;align-items:center;justify-content:center}
#illustLanding .il-call-txt{flex:1 1 auto;min-width:0}
#illustLanding .il-call-txt strong{display:block;font-size:18px;font-weight:800}
#illustLanding .il-call-txt span{display:block;margin-top:4px;font-size:14px;color:#5d6270}
#illustLanding .il-call-txt b{display:block;margin-top:8px;font-size:32px;font-weight:900;letter-spacing:-.5px}
#illustLanding .il-call-txt small{display:block;margin-top:2px;font-size:13px;color:#8a909c}
#illustLanding .il-call>a{flex:0 0 auto;display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;background:#1b1d24;color:#fff;font-size:15px;font-weight:800;white-space:nowrap;transition:transform .2s ease}
#illustLanding .il-call>a:hover{transform:translateY(-3px)}
/* 폼 카드 (사이트 수강료 조회 폼과 같은 필드 · 같은 접수 주소) */
#illustLanding .il-fm{min-width:0;padding:30px 28px 24px;border-radius:22px;background:#fff;color:#1b1d24;box-shadow:0 30px 60px rgba(0,0,0,.35);scroll-margin-top:90px}
#illustLanding .il-fm-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:#00c4e0;color:#0b2230;font-size:12px;font-weight:800}
#illustLanding .il-fm h3{margin-top:12px;font-size:24px;font-weight:800;letter-spacing:-.6px}
#illustLanding .il-fm-sub{margin-top:8px;font-size:14px;color:#5d6270}
#illustLanding .il-fm-row{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#illustLanding .il-fm-row label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700}
#illustLanding .il-in{width:100%;height:48px;padding:0 14px;border:1px solid #dfe2e8;border-radius:10px;font-family:inherit;font-size:15px;color:#1b1d24;background:#fff;transition:border-color .2s,box-shadow .2s}
#illustLanding .il-in::placeholder{color:#a3a8b3}
#illustLanding .il-in:focus{outline:none;border-color:#00c4e0;box-shadow:0 0 0 3px rgba(0,196,224,.15)}
#illustLanding .il-in.bad{border-color:#ff5a6e}
#illustLanding .il-fm-lb{display:block;margin-top:16px;font-size:14px;font-weight:700}
#illustLanding .il-fm-lb small{font-weight:500;color:#9aa0ac;margin-left:4px}
#illustLanding .il-chipset{margin-top:8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#illustLanding .il-chipset.br{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#illustLanding .il-chip{position:relative;display:block}
#illustLanding .il-chip input{position:absolute;opacity:0;pointer-events:none}
#illustLanding .il-chip span{display:flex;align-items:center;justify-content:center;height:44px;border-radius:10px;border:1px solid #dfe2e8;background:#fff;color:#3d414c;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s ease,background .2s ease,color .2s ease}
#illustLanding .il-chipset.br .il-chip span{height:36px;padding:0 2px;border-radius:8px;font-size:13px;letter-spacing:-.4px;white-space:nowrap}
#illustLanding .il-chip:hover span{border-color:#00c4e0}
#illustLanding .il-chip input:checked+span{background:#e6fafd;border-color:#00c4e0;color:#0090a8;font-weight:800}
#illustLanding .il-chip input:focus-visible+span{outline:2px solid #00c4e0;outline-offset:2px}
#illustLanding .il-chipset.bad .il-chip span{border-color:#ffb3bd}
#illustLanding .il-agree{margin-top:16px;display:flex;align-items:center;gap:8px;font-size:13px;color:#444;cursor:pointer}
#illustLanding .il-agree input{width:17px;height:17px;margin:0;accent-color:#00c4e0}
#illustLanding .il-fm-btn{margin-top:14px;width:100%;height:58px;border:0;border-radius:999px;background:#00c4e0;color:#0b2230;font-size:17px;font-weight:800;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}
#illustLanding .il-fm-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,196,224,.35)}
#illustLanding .il-fm-btn:disabled{opacity:.6;cursor:wait;transform:none}
#illustLanding .il-fm-note{margin-top:12px;font-size:12px;color:#9aa0ac;text-align:center}
#illustLanding .il-err{display:block;margin-top:6px;color:#e5394f;font-size:12.5px}
#illustLanding .il-err:empty{display:none}
/* 등장 효과 — JS 가 켜질 때만 숨김 (스크립트 없으면 그냥 보임) */
/* 등장은 translate 속성으로 — 마우스 올림 효과(transform)와 따로 움직이게 */
#illustLanding.il-js .il-rv{opacity:0;translate:0 28px;transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1),transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease}
#illustLanding.il-js .il-rv.in{opacity:1;translate:none}
/* 카드 묶음은 순서대로 0.1초씩 늦게 */
#illustLanding.il-js :is(.il-stages, .il-tracks, .il-faq, .il-bns)>.il-rv:nth-child(2){transition-delay:.1s,.1s,0s,0s,0s,0s}
#illustLanding.il-js :is(.il-stages, .il-tracks, .il-faq, .il-bns)>.il-rv:nth-child(3){transition-delay:.2s,.2s,0s,0s,0s,0s}
#illustLanding.il-js :is(.il-stages, .il-tracks, .il-faq, .il-bns)>.il-rv:nth-child(4){transition-delay:.3s,.3s,0s,0s,0s,0s}
/* 숫자 띠: 칸마다 차례로 올라오며 숫자 카운트 */
#illustLanding.il-js .il-stat{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
#illustLanding.il-js .il-stats.on .il-stat{opacity:1;transform:none}
#illustLanding.il-js .il-stats.on .il-stat:nth-child(2){transition-delay:.1s}
#illustLanding.il-js .il-stats.on .il-stat:nth-child(3){transition-delay:.2s}
#illustLanding.il-js .il-stats.on .il-stat:nth-child(4){transition-delay:.3s}
/* 수강생 작품: 한 장씩 차례로 */
#illustLanding.il-js .il-pf.il-rv{opacity:1;translate:none}
#illustLanding.il-js .il-pf>div{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
#illustLanding.il-js .il-pf.in>div{opacity:1;transform:none}
#illustLanding.il-js .il-pf.in>div:nth-child(2){transition-delay:.06s}
#illustLanding.il-js .il-pf.in>div:nth-child(3){transition-delay:.12s}
#illustLanding.il-js .il-pf.in>div:nth-child(4){transition-delay:.18s}
#illustLanding.il-js .il-pf.in>div:nth-child(5){transition-delay:.24s}
#illustLanding.il-js .il-pf.in>div:nth-child(6){transition-delay:.3s}
#illustLanding.il-js .il-pf.in>div:nth-child(7){transition-delay:.36s}
#illustLanding.il-js .il-pf.in>div:nth-child(8){transition-delay:.42s}
#illustLanding.il-js .il-pf.in>div:nth-child(9){transition-delay:.48s}
/* 태블릿 */
@media (max-width:1100px){
  #illustLanding .il-tabs{gap:10px}
  #illustLanding .il-tab .tt{left:16px;right:10px}
  #illustLanding .il-tab .tt b{font-size:18px}
  #illustLanding .il-panel{padding:40px 44px}
  #illustLanding .il-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  #illustLanding .il-cta .il-wrap{grid-template-columns:minmax(0,1fr) 420px;gap:40px}
}
@media (max-width:1000px){
  #illustLanding .il-hero .il-wrap{padding-top:64px}
  #illustLanding .il-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,12,16,.85),rgba(10,12,16,.4))}
  #illustLanding .il-hero h1{font-size:46px}
  #illustLanding .il-hero-sub{font-size:19px}
/* 태블릿은 칸이 좁아 1번 설명이 두 줄로 꺾여 가운데 정렬이 들쭉날쭉 → 왼쪽 정렬 */
  #illustLanding .il-hero-pts>div{justify-content:flex-start}
  #illustLanding .il-about .il-wrap{grid-template-columns:minmax(0,1fr);gap:48px}
  #illustLanding .il-cta .il-wrap{grid-template-columns:minmax(0,1fr);gap:40px}
  #illustLanding .il-fm{max-width:560px;width:100%;margin:0 auto}
  #illustLanding .il-pf{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:260px}
}
/* 모바일 */
@media (max-width:768px){
  #illustLanding .il-sec{padding:80px 0}
  #illustLanding .il-h2{font-size:28px;letter-spacing:-.8px}
  #illustLanding .il-eyebrow{font-size:14px}
  #illustLanding .il-pill{font-size:13px;padding:6px 14px}
  #illustLanding .il-hero-bg{background-position:68% center}
  #illustLanding .il-hero::before{background:linear-gradient(90deg,rgba(10,12,16,.9),rgba(10,12,16,.55))}
  #illustLanding .il-hero::after{height:180px}
  #illustLanding .il-hero .il-wrap{padding-top:60px;padding-bottom:36px}
  #illustLanding .il-hero-en{font-size:14px;letter-spacing:3px}
  #illustLanding .il-hero h1{margin-top:16px;font-size:32px;letter-spacing:-1px}
  #illustLanding .il-hero-sub{margin-top:18px;font-size:16px;line-height:1.6}
  #illustLanding .il-hero-btns{margin-top:28px;gap:8px}
  #illustLanding .il-btn, #illustLanding .il-btn-o{height:52px;padding:0 22px;font-size:16px}
  #illustLanding .il-hero-pts{margin-top:48px;grid-template-columns:minmax(0,1fr);gap:14px}
  #illustLanding .il-hero-pts>div{justify-content:flex-start}
  #illustLanding .il-hero-pts b{font-size:16px}
  #illustLanding .il-hero-pts span{font-size:14px}
  #illustLanding .il-stats .il-wrap{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;padding-top:40px;padding-bottom:40px}
  #illustLanding .il-stat b{font-size:34px}
  #illustLanding .il-stat b small{font-size:18px}
  #illustLanding .il-stat span{font-size:14px}
  #illustLanding .il-start .il-wrap{padding-top:80px}
/* 탭: 국비지원 모바일과 같이 2열, 줄 사이 40px(솟아오르는 그림 자리). 5번째는 가운데 */
  #illustLanding .il-tabs{margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;row-gap:40px}
  #illustLanding .il-tab{height:auto;aspect-ratio:305/240}
  #illustLanding .il-tab:nth-child(5){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
  #illustLanding .il-tab .tb{height:81.8%}
  #illustLanding .il-tab.on .tb{height:100%}
  #illustLanding .il-tab .chw img{height:78%;bottom:24%}
  #illustLanding .il-tab .tt{left:14px;right:10px;bottom:12px;gap:5px}
  #illustLanding .il-tab .tt em{font-size:12px}
  #illustLanding .il-tab .tt b{font-size:16px}
  #illustLanding .il-panel{margin-top:24px;padding:28px 22px;gap:24px;min-height:0}
  #illustLanding .il-panel-txt{flex-basis:100%}
  #illustLanding .il-panel-txt em{font-size:14px}
  #illustLanding .il-panel-txt h3{font-size:22px;line-height:1.35}
  #illustLanding .il-panel-txt p{margin-top:12px;font-size:16px}
  #illustLanding .il-panel ul{min-width:0;gap:10px}
  #illustLanding .il-panel li{font-size:16px;white-space:normal}
  #illustLanding .il-ask{padding:22px 20px;flex-direction:column;align-items:stretch;text-align:center}
  #illustLanding .il-ask b{font-size:16px}
  #illustLanding .il-ask a{justify-content:center;height:52px;font-size:15px;padding:0 16px}
/* 교육과정 카드: 국비지원 모바일과 같이 2개씩 */
  #illustLanding .il-stages{margin-top:32px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  #illustLanding .il-stage-img{height:160px}
  #illustLanding .il-stage-img span{left:10px;top:10px;font-size:11px;padding:3px 8px}
  #illustLanding .il-stage-body{gap:14px;padding:14px 12px}
  #illustLanding .il-stage h3{font-size:17px;line-height:1.3}
  #illustLanding .il-stage p{margin-top:6px;font-size:13px;line-height:1.5}
  #illustLanding .il-stage .il-chips{margin-top:10px;gap:4px}
  #illustLanding .il-stage .il-chips i{padding:3px 7px;font-size:11.5px}
  #illustLanding .il-stage-go{height:auto;min-height:40px;padding:6px 8px;font-size:13px;line-height:1.3;letter-spacing:-.3px;text-align:center}
  #illustLanding .il-about-big{font-size:44px}
  #illustLanding .il-about h2{margin-top:22px;font-size:22px}
  #illustLanding .il-about-desc{font-size:15.5px}
  #illustLanding .il-win-body{padding:18px 16px 18px}
  #illustLanding .il-win-tit{font-size:16px}
  #illustLanding .il-pf{margin-top:28px;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:180px;gap:8px}
  #illustLanding .il-tracks{margin-top:28px;grid-template-columns:minmax(0,1fr);gap:16px}
  #illustLanding .il-track{padding:32px 22px 24px;border-radius:18px}
  #illustLanding .il-track-ic{right:20px;top:24px;width:52px;height:52px;border-radius:14px}
  #illustLanding .il-track-ic svg{width:28px;height:28px}
  #illustLanding .il-track h3{font-size:22px;padding-right:60px}
  #illustLanding .il-track-desc{font-size:15px}
  #illustLanding .il-track li{font-size:15px;align-items:flex-start}
  #illustLanding .il-track li::before{margin-top:7px}
  #illustLanding .il-tags span{font-size:13px;padding:7px 11px}
  #illustLanding .il-faq{margin-top:28px}
  #illustLanding .il-faq-q{padding:20px 18px;font-size:16px}
  #illustLanding .il-faq-q i{margin-right:8px}
  #illustLanding .il-faq-a p{padding:0 18px 20px 40px;font-size:15px}
  #illustLanding .il-faq-a p i{margin-left:-22px;margin-right:8px}
  #illustLanding .il-cta .il-wrap{padding-top:72px;padding-bottom:72px}
  #illustLanding .il-cta-en{font-size:14px}
  #illustLanding .il-cta h2{font-size:28px;letter-spacing:-1px}
  #illustLanding .il-bn{padding:20px;gap:16px}
  #illustLanding .il-bn>b{font-size:22px}
  #illustLanding .il-bn strong{font-size:16px}
  #illustLanding .il-bn span{font-size:14px}
  #illustLanding .il-call{flex-wrap:wrap;padding:22px 20px;gap:16px}
  #illustLanding .il-call-ic{width:48px;height:48px}
  #illustLanding .il-call-txt b{font-size:26px}
  #illustLanding .il-call>a{width:100%;justify-content:center}
}
@media (max-width:480px){
  #illustLanding .il-win-grid{grid-template-columns:minmax(0,1fr)}
  #illustLanding .il-win-pic img{height:220px}
  #illustLanding .il-win-bar small{display:none}
  #illustLanding .il-fm{padding:26px 18px 20px}
  #illustLanding .il-fm h3{font-size:21px}
  #illustLanding .il-fm-row{grid-template-columns:minmax(0,1fr)}
  #illustLanding .il-chipset.br{gap:4px}
  #illustLanding .il-chipset.br .il-chip span{font-size:12px;letter-spacing:-.6px}
}
@media (prefers-reduced-motion:reduce){
  #illustLanding *, #illustLanding *::before, #illustLanding *::after{animation:none!important;transition:none!important}
  #illustLanding.il-js .il-rv{opacity:1;translate:none}
}