/*
 * 게임그래픽학과 페이지 스타일
 * 모든 규칙은 #gfxLanding 안에서만 적용됩니다 (사이트 공통 CSS와 충돌 방지).
 * 외부 폰트: Pretendard (jsDelivr CDN, 이 CSS 안 @font-face "GL Pre")
 */
/* 폰트: 사이트 공통 CSS 의 같은 이름 @font-face 와 섞이지 않도록 고유 이름(GL ...) 사용 */
@font-face{font-family:"GL Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GL Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GL Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"GL Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GL Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"GL Pre";src:url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Black.woff2") format("woff2");font-weight:900;font-display:swap}
#gfxLanding{scroll-behavior:smooth;--bg:#161617;--accent:#00bbff;--cyan:#00c4e0;--sub:#c3c6cf;
  background:var(--bg);color:#fff;font-family:"GL Pre",-apple-system,sans-serif;font-weight:400;line-height:1.4;letter-spacing:normal;overflow:hidden;overflow-wrap:normal;word-break:keep-all;-webkit-font-smoothing:antialiased}
#gfxLanding, #gfxLanding *, #gfxLanding, #gfxLanding *::before, #gfxLanding, #gfxLanding *::after{box-sizing:border-box}
#gfxLanding h1, #gfxLanding h2, #gfxLanding h3, #gfxLanding p, #gfxLanding ul, #gfxLanding ol, #gfxLanding table{margin:0;padding:0}
#gfxLanding ul, #gfxLanding ol{list-style:none}
#gfxLanding em{font-style:normal;font-weight:inherit}
#gfxLanding a{color:inherit;text-decoration:none}
#gfxLanding img{display:block;max-width:100%}
#gfxLanding button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none}
#gfxLanding .gl-in{max-width:1200px;margin:0 auto;padding:0 20px}
/* 등장 효과 — JS 가 켜질 때만 숨김 (스크립트 없으면 그냥 보임) */
/* 등장은 translate 속성으로 — 마우스 올림 효과(transform)와 따로 움직이게 */
#gfxLanding.gl-js .gl-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}
#gfxLanding.gl-js .gl-rv.is-in{opacity:1;translate:none}
/* 카드 묶음은 순서대로 0.1초씩 늦게 */
#gfxLanding.gl-js .gl-stages>.gl-rv:nth-child(2), #gfxLanding.gl-js .gl-tracks>.gl-rv:nth-child(2), #gfxLanding.gl-js .gl-faqs>.gl-rv:nth-child(2), #gfxLanding.gl-js .gl-bns>.gl-rv:nth-child(2), #gfxLanding.gl-js .gl-tabs>.gl-rv:nth-child(2){transition-delay:.1s,.1s,0s,0s,0s,0s}
#gfxLanding.gl-js .gl-stages>.gl-rv:nth-child(3), #gfxLanding.gl-js .gl-tracks>.gl-rv:nth-child(3), #gfxLanding.gl-js .gl-faqs>.gl-rv:nth-child(3), #gfxLanding.gl-js .gl-bns>.gl-rv:nth-child(3), #gfxLanding.gl-js .gl-tabs>.gl-rv:nth-child(3){transition-delay:.2s,.2s,0s,0s,0s,0s}
#gfxLanding.gl-js .gl-stages>.gl-rv:nth-child(4), #gfxLanding.gl-js .gl-tracks>.gl-rv:nth-child(4), #gfxLanding.gl-js .gl-faqs>.gl-rv:nth-child(4), #gfxLanding.gl-js .gl-bns>.gl-rv:nth-child(4), #gfxLanding.gl-js .gl-tabs>.gl-rv:nth-child(4){transition-delay:.3s,.3s,0s,0s,0s,0s}
#gfxLanding.gl-js .gl-tabs>.gl-rv:nth-child(5){transition-delay:.4s,.4s,0s,0s,0s,0s}
/* 숫자 띠: 칸마다 차례로 올라오며 숫자 카운트 */
#gfxLanding.gl-js .gl-stats li{opacity:0;transform:translateY(16px);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
#gfxLanding.gl-js .gl-stats.on li{opacity:1;transform:none}
#gfxLanding.gl-js .gl-stats.on li:nth-child(2){transition-delay:.1s}
#gfxLanding.gl-js .gl-stats.on li:nth-child(3){transition-delay:.2s}
#gfxLanding.gl-js .gl-stats.on li:nth-child(4){transition-delay:.3s}
/* 수강생 작품: 한 장씩 차례로 */
#gfxLanding.gl-js .gl-works.gl-rv{opacity:1;translate:none}
#gfxLanding.gl-js .gl-works>li{opacity:0;transform:translateY(24px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.22,1,.36,1)}
#gfxLanding.gl-js .gl-works.is-in>li{opacity:1;transform:none}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(2){transition-delay:.06s}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(3){transition-delay:.12s}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(4){transition-delay:.18s}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(5){transition-delay:.24s}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(6){transition-delay:.3s}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(7){transition-delay:.36s}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(8){transition-delay:.42s}
#gfxLanding.gl-js .gl-works.is-in>li:nth-child(9){transition-delay:.48s}
@keyframes gl-glUp{0%{opacity:0;transform:translateY(22px)}100%{opacity:1;transform:none}}
/* 버튼 */
#gfxLanding .gl-btn{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
#gfxLanding .gl-btn:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,187,255,.35)}
#gfxLanding .gl-btn-o{display:inline-flex;align-items:center;transition:background .2s ease,transform .2s ease}
#gfxLanding .gl-btn-o:hover{background:rgba(255,255,255,.12);transform:translateY(-3px)}
/* 섹션 타이틀 */
#gfxLanding .gl-chip{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:var(--accent)}
#gfxLanding .gl-h2{margin-top:16px;font-size:40px;line-height:1.35;font-weight:800;letter-spacing:-1.2px}
#gfxLanding .gl-eye{font-size:17px;font-weight:700;letter-spacing:1.36px;color:var(--accent)}
#gfxLanding .gl-eye+.gl-h2{margin-top:12px}
#gfxLanding .gl-center{text-align:center}
/* ── HERO ── */
#gfxLanding .gl-hero{position:relative;overflow:hidden;background:#111112}
/* 배경이 천천히 당겨지며(줌 아웃) 나타남 */
#gfxLanding .gl-hero-bg{position:absolute;inset:0;background:url("/2025/img/curriculum/gamegraphic/hero.jpg") center/cover no-repeat;animation:gl-glHeroZoom 9s cubic-bezier(.22,1,.36,1) both}
@keyframes gl-glHeroZoom{from{transform:scale(1.08)}to{transform:scale(1)}}
#gfxLanding .gl-hero .gl-in{position:relative;z-index:2;padding-top:150px;padding-bottom:48px}
/* 아래쪽은 다음 섹션 배경색으로 자연스럽게 이어지게 */
#gfxLanding .gl-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:1;height:320px;background:linear-gradient(0deg,#161617 0%,rgba(22,22,23,.85) 30%,rgba(22,22,23,0) 100%);pointer-events:none}
/* 히어로 글자는 위에서부터 차례로 */
#gfxLanding .gl-hero-anim>*{animation:gl-glUp .9s cubic-bezier(.22,1,.36,1) both}
#gfxLanding .gl-hero-anim>*:nth-child(2){animation-delay:.08s}
#gfxLanding .gl-hero-anim>*:nth-child(3){animation-delay:.16s}
#gfxLanding .gl-hero-anim>*:nth-child(4){animation-delay:.24s}
#gfxLanding .gl-hero-anim>*:nth-child(5){animation-delay:.34s}
#gfxLanding .gl-hero-eye{font-size:20px;font-weight:700;letter-spacing:4px;color:var(--accent)}
#gfxLanding .gl-hero h1{margin-top:22px;font-size:56px;line-height:1.3;font-weight:700;letter-spacing:-1.7px}
#gfxLanding .gl-hero h1 em{color:var(--accent)}
#gfxLanding .gl-hero-copy{margin-top:26px;font-size:22px;font-weight:500;color:#eee}
#gfxLanding .gl-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
#gfxLanding .gl-hero-btns a{height:62px;border-radius:80px;font-size:19px;font-weight:700;letter-spacing:-.6px;color:#fff}
#gfxLanding .gl-hero-btns .gl-btn{padding:0 34px;background:linear-gradient(59deg,#00bbff 22%,#008cbf 108%)}
#gfxLanding .gl-hero-btns .gl-btn-o{padding:0 30px;background:rgba(19,19,20,.6);border:1px solid rgba(255,255,255,.5)}
#gfxLanding .gl-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:96px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
/* 아래 숫자 띠처럼 칸 가운데 정렬 — 화면 중심 기준으로 위아래가 대칭이 되게 */
#gfxLanding .gl-points li{display:flex;align-items:baseline;justify-content:center;gap:12px}
#gfxLanding .gl-points i{font-style:normal;font-size:20px;font-weight:700;color:var(--accent)}
#gfxLanding .gl-points b{display:block;font-size:18px;font-weight:700}
#gfxLanding .gl-points span{display:block;margin-top:4px;font-size:15px;color:var(--sub)}
/* ── STATS ── */
#gfxLanding .gl-stats{border-bottom:1px solid #26272b}
#gfxLanding .gl-stats ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;padding:56px 0;text-align:center}
#gfxLanding .gl-stats b{display:block;font-size:44px;font-weight:800;line-height:1.15;letter-spacing:-1px;font-variant-numeric:tabular-nums}
#gfxLanding .gl-stats b small{margin-left:4px;font-size:22px;font-weight:800;color:var(--accent)}
#gfxLanding .gl-stats span{display:block;margin-top:6px;font-size:15px;color:#9aa0ac}
/* ── FIND YOUR START (탭) ── */
#gfxLanding .gl-start{padding-top:120px}
#gfxLanding .gl-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:end;margin-top:40px}
/* 탭: 국비지원 '저도 지원받을 수 있나요?' 방식 (일러스트/게임원화 랜딩과 동일)
   - 꺼진 탭: 카드 180px, 그림 흐리게 / 켜진 탭: 카드 220px로 커지고 테두리, 그림이 카드 위로 솟아오름
   - 국비지원은 캐릭터 누끼 PNG 를 썼지만 여기는 누끼가 없어 같은 그림을 위쪽만 남겨 띄움 */
#gfxLanding .gl-tab{position:relative;height:250px;text-align:left;color:#fff;border-radius:10px}
#gfxLanding .gl-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}
#gfxLanding .gl-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)}
#gfxLanding .gl-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))}
#gfxLanding .gl-tab .chw{position:absolute;inset:0;pointer-events:none;z-index:1}
#gfxLanding .gl-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)}
#gfxLanding .gl-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)}
#gfxLanding .gl-tab .tt em{font-weight:700;font-size:15px;line-height:1;color:var(--accent);letter-spacing:.5px}
#gfxLanding .gl-tab .tt b{font-weight:700;font-size:21px;line-height:1.3}
#gfxLanding .gl-tab:hover:not(.on) .tt{transform:translateY(-4px)}
#gfxLanding .gl-tab:hover:not(.on) .tb img{opacity:.75;transform:scale(1.04)}
#gfxLanding .gl-tab.on .tb{height:220px;border-color:var(--accent);box-shadow:0 7px 25px rgba(20,58,71,.4)}
#gfxLanding .gl-tab.on .tb img{opacity:.4}
#gfxLanding .gl-tab.on .chw img{opacity:1;transform:none;transition:opacity .45s ease .05s,transform .55s cubic-bezier(.22,1,.36,1)}
#gfxLanding .gl-tab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
#gfxLanding .gl-panel{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:40px;min-height:230px;margin-top:36px;padding:48px 80px 44px;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}
/* 탭을 바꾸면 왼쪽 글 → 오른쪽 목록 순서로 올라옴 (국비지원 방식) */
#gfxLanding .gl-panel.is-anim>div, #gfxLanding .gl-panel.is-anim li{animation:gl-glUp .55s cubic-bezier(.22,1,.36,1) both}
#gfxLanding .gl-panel.is-anim li:nth-child(2){animation-delay:.06s}
#gfxLanding .gl-panel.is-anim li:nth-child(3){animation-delay:.12s}
#gfxLanding .gl-panel>div{flex:1 1 380px;min-width:0}
#gfxLanding .gl-panel em{font-weight:700;font-size:16px;color:var(--accent)}
#gfxLanding .gl-panel h3{margin-top:14px;font-size:29px;line-height:1.25;font-weight:700}
#gfxLanding .gl-panel p{margin-top:18px;font-size:19px;line-height:1.6;color:var(--sub)}
#gfxLanding .gl-panel ul{display:flex;flex-direction:column;gap:12px;min-width:260px}
#gfxLanding .gl-panel li{display:flex;align-items:center;gap:14px;font-size:19px;color:#e6e8ee;white-space:nowrap}
#gfxLanding .gl-panel li::before{content:"✓";color:var(--accent);font-weight:800}
#gfxLanding .gl-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:24px;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}
#gfxLanding .gl-help b{font-size:18px;font-weight:800}
#gfxLanding .gl-help a{height:56px;padding:0 30px;border-radius:999px;background:var(--cyan);color:#0b2230;font-size:16px;font-weight:800;box-shadow:0 8px 22px rgba(0,196,224,.3)}
/* ── CURRICULUM ── */
#gfxLanding .gl-cur{padding:120px 0}
#gfxLanding .gl-stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:48px}
#gfxLanding .gl-stage{display:flex;flex-direction:column;background:#29292b;border:1px solid #464646;border-radius:10px;overflow:hidden;transition:border-color .3s,transform .3s}
#gfxLanding .gl-stage:hover{border-color:var(--accent);transform:translateY(-4px)}
#gfxLanding .gl-stage-img{position:relative;height:240px;overflow:hidden}
#gfxLanding .gl-stage-img img{width:100%;height:100%;object-fit:cover;object-position:center 20%;transition:transform .6s ease}
#gfxLanding .gl-stage:hover .gl-stage-img img{transform:scale(1.05)}
#gfxLanding .gl-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:var(--accent)}
#gfxLanding .gl-stage-bd{flex:1;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:22px 20px 20px}
#gfxLanding .gl-stage h3{font-size:22px;font-weight:700}
#gfxLanding .gl-stage p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--sub)}
#gfxLanding .gl-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#gfxLanding .gl-tags i{font-style:normal;padding:5px 10px;border-radius:6px;background:#3a3a3d;font-size:13px;color:#e6e8ee}
#gfxLanding .gl-stage a{display:flex;align-items:center;justify-content:center;height:46px;border-radius:8px;border:1px solid #5a5a5e;font-size:15px;font-weight:700;transition:background .2s,border-color .2s}
#gfxLanding .gl-stage a:hover{background:rgba(0,187,255,.12);border-color:var(--accent)}
/* ── ABOUT ── */
#gfxLanding .gl-about{background:#1b1d22;border-top:1px solid #26272b}
#gfxLanding .gl-about .gl-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center;padding-top:120px;padding-bottom:120px}
#gfxLanding .gl-about-eye{font-size:16px;font-weight:800;letter-spacing:2px;color:var(--cyan)}
#gfxLanding .gl-about-logo{margin-top:10px;font-size:64px;line-height:1.02;font-weight:900;letter-spacing:-1px}
#gfxLanding .gl-about-logo span{color:var(--cyan)}
#gfxLanding .gl-about h2{margin-top:30px;font-size:30px;line-height:1.45;font-weight:800;letter-spacing:-.8px}
#gfxLanding .gl-about-copy{margin-top:20px;font-size:17px;line-height:1.8;color:var(--sub)}
#gfxLanding .gl-win{border-radius:18px;overflow:hidden;background:#fff;color:#1b1d24;box-shadow:0 30px 70px rgba(0,0,0,.45)}
#gfxLanding .gl-win-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#eef0f4;border-bottom:1px solid #e0e3e9}
#gfxLanding .gl-win-bar i{width:11px;height:11px;border-radius:50%}
#gfxLanding .gl-win-bar b{margin-left:10px;font-size:13px;font-weight:700;color:#5d6270}
#gfxLanding .gl-win-bar small{margin-left:auto;font-size:12px;color:#9aa0ac}
#gfxLanding .gl-win-bd{padding:22px 24px 24px}
#gfxLanding .gl-win-tit{font-size:18px;font-weight:800}
#gfxLanding .gl-win-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:16px}
#gfxLanding .gl-win-img{position:relative;border-radius:12px;overflow:hidden;background:#f6f7f9;border:1px solid #e4e6eb}
#gfxLanding .gl-win-img{min-height:250px}
#gfxLanding .gl-win-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#gfxLanding .gl-win-img 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}
#gfxLanding .gl-win-side{display:flex;flex-direction:column;gap:12px}
#gfxLanding .gl-win-side h4{margin:0;font-size:12px;font-weight:800;color:#8a909c;letter-spacing:1px}
#gfxLanding .gl-flow{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px;font-size:13px;font-weight:700}
#gfxLanding .gl-flow span{padding:5px 9px;border-radius:6px;background:#eef0f4}
#gfxLanding .gl-flow span.on{background:#e6fafd;color:#00849c}
#gfxLanding .gl-flow i{font-style:normal;color:#00a6c8}
#gfxLanding .gl-mats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;margin-top:8px}
#gfxLanding .gl-mats i{height:34px;border-radius:6px}
#gfxLanding .gl-outl{display:flex;flex-direction:column;gap:4px;margin-top:6px;font-size:12.5px}
#gfxLanding .gl-outl span{padding:6px 9px;border-radius:6px;background:#f3f4f7}
#gfxLanding .gl-outl span.on{background:#e6fafd;color:#00849c;font-weight:700}
#gfxLanding .gl-win table{width:100%;margin-top:16px;border-collapse:collapse;font-size:13px}
#gfxLanding .gl-win th{padding:8px 10px;background:#f3f4f7;color:#5d6270;text-align:left;font-weight:700}
#gfxLanding .gl-win td{padding:8px 10px;border-bottom:1px solid #eef0f4}
#gfxLanding .gl-win tr:last-child td{border-bottom:0}
#gfxLanding .gl-win td:first-child{font-weight:700}
#gfxLanding .gl-win td:last-child{color:#00849c}
/* ── PORTFOLIO (흰 배경) ── */
#gfxLanding .gl-pf{background:#fff;color:#24272d;padding:120px 0}
#gfxLanding .gl-works{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:300px;gap:14px;margin-top:44px}
#gfxLanding .gl-works li{overflow:hidden;border-radius:12px;background:#222}
#gfxLanding .gl-works li.is-big{grid-column:span 2;grid-row:span 2}
#gfxLanding .gl-works img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s ease}
#gfxLanding .gl-works li:hover img{transform:scale(1.06)}
/* ── TRACKS ── */
#gfxLanding .gl-tracks-sec{background:#f4f6f9;color:#1b1d24;padding:120px 0}
#gfxLanding .gl-tracks-sec .gl-eye{color:#00a6c8}
#gfxLanding .gl-tracks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:stretch;margin-top:44px}
#gfxLanding .gl-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}
#gfxLanding .gl-track:hover{transform:translateY(-5px);border-color:var(--accent)}
#gfxLanding .gl-track.is-dark{background:#1f2025;border-color:#1f2025;color:#fff}
#gfxLanding .gl-track-ico{position:absolute;right:32px;top:36px;width:64px;height:64px;border-radius:18px;background:#e6fafd;display:flex;align-items:center;justify-content:center}
#gfxLanding .gl-track.is-dark .gl-track-ico{background:rgba(0,196,224,.12)}
#gfxLanding .gl-track-eye{font-size:15px;font-weight:800;letter-spacing:1px;color:#00a6c8}
#gfxLanding .gl-track.is-dark .gl-track-eye{color:var(--cyan)}
#gfxLanding .gl-track h3{margin-top:14px;padding-right:80px;font-size:28px;line-height:1.35;font-weight:800}
#gfxLanding .gl-track>p{margin-top:14px;font-size:16px;color:#5d6270}
#gfxLanding .gl-track.is-dark>p{color:var(--sub)}
#gfxLanding .gl-track ul{display:flex;flex-direction:column;gap:14px;margin-top:26px}
#gfxLanding .gl-track li{display:flex;align-items:center;gap:12px;font-size:16.5px;font-weight:600}
#gfxLanding .gl-track li::before{content:"";flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--cyan)}
#gfxLanding .gl-track-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
#gfxLanding .gl-track-tags span{padding:9px 14px;border-radius:8px;background:#e6fafd;color:#00849c;font-size:14px;font-weight:700}
#gfxLanding .gl-track.is-dark .gl-track-tags span{background:#1d3540;color:#5fdcef}
#gfxLanding .gl-track-btn{margin-top:auto;padding-top:28px}
#gfxLanding .gl-track-btn button{width:100%;height:56px;border-radius:12px;border:1px solid #1b1d24;background:#fff;color:#1b1d24;font-size:16px;font-weight:800}
#gfxLanding .gl-track.is-dark .gl-track-btn button{border:0;background:var(--cyan);color:#0b2230}
/* ── FAQ ── */
#gfxLanding .gl-faq-sec{background:linear-gradient(rgba(22,22,23,0) 68%,rgba(0,187,255,.2) 100%),#161617;border-top:1px solid #26272b;padding:120px 0}
#gfxLanding .gl-faqs{display:flex;flex-direction:column;gap:10px;margin-top:36px}
#gfxLanding .gl-faq{border-radius:15px;background:#1f2025;border:1px solid #2c2e34;transition:border-color .3s}
#gfxLanding .gl-faq.is-open{border-color:var(--accent)}
#gfxLanding .gl-faq button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:24px 26px;font-size:18px;line-height:1.2;font-weight:700;text-align:left}
#gfxLanding .gl-faq button b{margin-right:12px;color:var(--accent)}
#gfxLanding .gl-faq .pm{position:relative;flex:0 0 auto;width:16px;height:16px}
#gfxLanding .gl-faq .pm::before, #gfxLanding .gl-faq .pm::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;background:#9aa0ac;transition:transform .3s}
#gfxLanding .gl-faq .pm::after{transform:rotate(90deg)}
#gfxLanding .gl-faq.is-open .pm::after{transform:rotate(0)}
#gfxLanding .gl-faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
#gfxLanding .gl-faq.is-open .gl-faq-a{grid-template-rows:1fr}
#gfxLanding .gl-faq-a>div{overflow:hidden}
#gfxLanding .gl-faq-a p{padding:0 26px 24px 54px;font-size:16px;line-height:1.75;color:var(--sub)}
#gfxLanding .gl-faq-a b{margin:0 10px 0 -26px;color:var(--accent);font-weight:700}
/* ── 수강료 조회 신청 (실제 접수) ── */
#gfxLanding .gl-form-sec{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}
#gfxLanding .gl-form-sec .gl-in{display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:56px;align-items:center;padding-top:100px;padding-bottom:100px}
#gfxLanding .gl-form-eye{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--cyan)}
#gfxLanding .gl-form-eye::before{content:"";width:22px;height:2px;background:var(--cyan)}
#gfxLanding .gl-form-sec h2{margin-top:18px;font-size:40px;line-height:1.3;font-weight:900;letter-spacing:-1.5px}
#gfxLanding .gl-form-sec h2 em{color:var(--cyan)}
#gfxLanding .gl-bns{display:flex;flex-direction:column;gap:12px;margin-top:30px}
#gfxLanding .gl-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)}
#gfxLanding .gl-bn:hover{border-color:var(--cyan);background:rgba(0,196,224,.08);transform:translateY(-3px)}
#gfxLanding .gl-bn>b{flex:0 0 auto;font-size:26px;font-weight:900;line-height:1;color:var(--cyan);letter-spacing:-.5px}
#gfxLanding .gl-bn strong{display:block;font-size:18px;font-weight:800}
#gfxLanding .gl-bn p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--sub)}
#gfxLanding .gl-call{display:flex;align-items:center;gap:22px;margin-top:16px;padding:26px;border-radius:18px;background:#fff;color:#1b1d24}
#gfxLanding .gl-call-ico{flex:0 0 auto;width:60px;height:60px;border-radius:50%;background:#e6fafd;display:flex;align-items:center;justify-content:center}
#gfxLanding .gl-call-txt{flex:1 1 auto;min-width:0}
#gfxLanding .gl-call-txt strong{display:block;font-size:18px;font-weight:800}
#gfxLanding .gl-call-txt p{margin-top:4px;font-size:14px;color:#5d6270}
#gfxLanding .gl-call-txt b{display:block;margin-top:8px;font-size:32px;font-weight:900;letter-spacing:-.5px}
#gfxLanding .gl-call-txt small{display:block;margin-top:2px;font-size:13px;color:#8a909c}
#gfxLanding .gl-call a{flex:0 0 auto;height:48px;padding:0 22px;border-radius:999px;background:#1b1d24;color:#fff;font-size:15px;font-weight:800;white-space:nowrap}
#gfxLanding .gl-card{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:100px}
#gfxLanding .gl-card-badge{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--cyan);color:#0b2230;font-size:12px;font-weight:800}
#gfxLanding .gl-card h3{margin-top:12px;font-size:24px;font-weight:800;letter-spacing:-.6px}
#gfxLanding .gl-card-sub{margin-top:8px;font-size:14px;color:#5d6270}
#gfxLanding .gl-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:22px}
#gfxLanding .gl-row label{display:flex;flex-direction:column;gap:8px;font-size:14px;font-weight:700}
#gfxLanding .gl-row input{height:48px;padding:0 14px;border:1px solid #dfe2e8;border-radius:10px;font:inherit;font-size:15px;font-weight:400;color:#1b1d24;background:#fff;outline:0}
#gfxLanding .gl-row input::placeholder{color:#b0b5bf}
#gfxLanding .gl-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,196,224,.15)}
#gfxLanding .gl-row input.bad{border-color:#ff5a6e}
#gfxLanding .gl-lb{margin-top:16px;font-size:14px;font-weight:700}
#gfxLanding .gl-err+.gl-lb{margin-top:18px}
#gfxLanding .gl-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px}
#gfxLanding .gl-chips.is-place{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
#gfxLanding .gl-chips label{position:relative;cursor:pointer}
#gfxLanding .gl-chips input{position:absolute;opacity:0;pointer-events:none}
#gfxLanding .gl-chips 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;transition:border-color .2s ease,background .2s ease,color .2s ease}
#gfxLanding .gl-chips.is-place span{height:36px;padding:0 2px;border-radius:8px;font-size:13px;letter-spacing:-.4px;white-space:nowrap}
#gfxLanding .gl-chips label:hover span{border-color:var(--cyan)}
#gfxLanding .gl-chips input:checked+span{border-color:var(--cyan);background:#e6fafd;color:#0090a8;font-weight:800}
#gfxLanding .gl-chips input:focus-visible+span{outline:2px solid #1b1d24;outline-offset:2px}
#gfxLanding .gl-agree{display:flex;align-items:center;gap:8px;margin-top:16px;font-size:13px;color:#444;cursor:pointer}
#gfxLanding .gl-agree input{width:17px;height:17px;margin:0;accent-color:var(--cyan)}
#gfxLanding .gl-agree button{color:#5d6270;text-decoration:underline;font-size:13px}
#gfxLanding .gl-terms{display:none;margin-top:8px;padding:12px 14px;border-radius:10px;background:#f3f4f7;font-size:12.5px;line-height:1.7;color:#555}
#gfxLanding .gl-terms.is-on{display:block}
#gfxLanding .gl-err{display:block;margin-top:8px;font-size:12.5px;color:#e5394d}
#gfxLanding .gl-err:empty{display:none}
#gfxLanding .gl-submit{width:100%;height:58px;margin-top:14px;border-radius:999px;background:var(--cyan);color:#0b2230;font-size:17px;font-weight:800}
#gfxLanding .gl-submit:disabled{opacity:.6;cursor:wait}
#gfxLanding .gl-card-note{margin-top:12px;font-size:12px;color:#9aa0ac;text-align:center}
/* ── 반응형 ── */
/* 사이트 오른쪽 고정 퀵메뉴(#game-fix-bar, 오른쪽 24px·폭 96px, 1281px 이상)에 가리지 않도록 1600 이하에선 본문 폭을 줄임 */
@media (max-width:1600px){
  #gfxLanding .gl-in{max-width:min(1200px,calc(100vw - 240px))}
}
@media (max-width:1280px){
  #gfxLanding .gl-in{max-width:1200px}
}
@media (max-width:1100px){
  #gfxLanding .gl-tabs{gap:10px}
  #gfxLanding .gl-tab .tt{left:16px;right:10px}
  #gfxLanding .gl-tab .tt b{font-size:18px}
  #gfxLanding .gl-panel{padding:40px 40px 36px}
  #gfxLanding .gl-stages{grid-template-columns:repeat(2,minmax(0,1fr))}
  #gfxLanding .gl-about .gl-in{grid-template-columns:1fr;gap:48px}
  #gfxLanding .gl-form-sec .gl-in{grid-template-columns:1fr;gap:40px}
  #gfxLanding .gl-card{max-width:560px;width:100%;margin:0 auto}
}
@media (max-width:1000px){
  #gfxLanding .gl-hero .gl-in{padding-top:64px}
  #gfxLanding .gl-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,12,16,.85),rgba(10,12,16,.4))}
  #gfxLanding .gl-hero h1{font-size:46px}
  #gfxLanding .gl-hero-copy{font-size:19px}
  #gfxLanding .gl-points{margin-top:64px}
  #gfxLanding .gl-points li{justify-content:flex-start}
  #gfxLanding .gl-works{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:240px}
  #gfxLanding .gl-tracks{grid-template-columns:1fr}
}
@media (max-width:767px){
  #gfxLanding .gl-in{padding:0 16px}
  #gfxLanding .gl-h2{font-size:28px;letter-spacing:-.8px}
  #gfxLanding .gl-chip{font-size:13px;padding:6px 14px}
  #gfxLanding .gl-eye{font-size:14px}
/* 모바일 히어로: GNB 가 위에 따로 붙으므로 위 여백 60px(일러스트 랜딩과 같음), 글자 쪽을 어둡게 */
/* 모바일 히어로: 일러스트/게임원화 랜딩과 같은 값 (그림 전체 배경 + 왼쪽 어둡게, 위 여백 60px). 그림은 오른쪽 인물 얼굴이 보이게 */
  #gfxLanding .gl-hero-bg{background-position:90% center}
  #gfxLanding .gl-hero::before{background:linear-gradient(90deg,rgba(10,12,16,.9),rgba(10,12,16,.55))}
  #gfxLanding .gl-hero::after{height:180px}
  #gfxLanding .gl-hero .gl-in{padding-top:60px;padding-bottom:36px}
  #gfxLanding .gl-hero-eye{font-size:14px;letter-spacing:3px}
  #gfxLanding .gl-hero h1{margin-top:16px;font-size:32px;letter-spacing:-1px}
  #gfxLanding .gl-hero-copy{margin-top:18px;font-size:16px;line-height:1.6}
  #gfxLanding .gl-hero-btns{margin-top:28px;gap:8px}
  #gfxLanding .gl-hero-btns a{height:52px;font-size:16px}
  #gfxLanding .gl-hero-btns .gl-btn, #gfxLanding .gl-hero-btns .gl-btn-o{padding:0 22px}
  #gfxLanding .gl-points{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:48px}
  #gfxLanding .gl-points b{font-size:16px}
  #gfxLanding .gl-points span{font-size:14px}
  #gfxLanding .gl-stats ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px;padding:40px 0}
  #gfxLanding .gl-stats b{font-size:34px}
  #gfxLanding .gl-stats b small{font-size:18px}
  #gfxLanding .gl-stats span{font-size:14px}
  #gfxLanding .gl-start{padding-top:80px}
/* 탭: 국비지원 모바일과 같이 2열, 줄 사이 40px(솟아오르는 그림 자리). 5번째는 가운데 */
  #gfxLanding .gl-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;row-gap:40px;margin-top:28px}
  #gfxLanding .gl-tab{height:auto;aspect-ratio:305/240}
  #gfxLanding .gl-tab:nth-child(5){grid-column:1/-1;justify-self:center;width:calc(50% - 5px)}
  #gfxLanding .gl-tab .tb{height:81.8%}
  #gfxLanding .gl-tab.on .tb{height:100%}
  #gfxLanding .gl-tab .chw img{height:78%;bottom:24%}
  #gfxLanding .gl-tab .tt{left:14px;right:10px;bottom:12px;gap:5px}
  #gfxLanding .gl-tab .tt em{font-size:12px}
  #gfxLanding .gl-tab .tt b{font-size:16px}
  #gfxLanding .gl-panel{gap:24px;margin-top:24px;padding:28px 20px}
  #gfxLanding .gl-panel>div{flex-basis:100%}
  #gfxLanding .gl-panel em{font-size:14px}
  #gfxLanding .gl-panel h3{font-size:21px}
  #gfxLanding .gl-panel p{margin-top:12px;font-size:15px}
  #gfxLanding .gl-panel ul{min-width:0}
  #gfxLanding .gl-panel li{font-size:15px;white-space:normal}
  #gfxLanding .gl-help{padding:22px 20px;flex-direction:column;align-items:stretch;text-align:center}
  #gfxLanding .gl-help b{font-size:16px}
  #gfxLanding .gl-help a{justify-content:center;height:52px;font-size:15px;padding:0 16px}
  #gfxLanding .gl-cur{padding:80px 0}
/* 교육과정 카드: 국비지원 모바일과 같이 2개씩 */
  #gfxLanding .gl-stages{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:32px}
  #gfxLanding .gl-stage-img{height:160px}
  #gfxLanding .gl-stage-img span{left:10px;top:10px;font-size:11px;padding:3px 8px}
  #gfxLanding .gl-stage-bd{gap:14px;padding:14px 12px}
  #gfxLanding .gl-stage h3{font-size:17px;line-height:1.3}
  #gfxLanding .gl-stage p{margin-top:6px;font-size:13px;line-height:1.5}
  #gfxLanding .gl-tags{margin-top:10px;gap:4px}
  #gfxLanding .gl-tags i{padding:3px 7px;font-size:11.5px}
  #gfxLanding .gl-stage a{height:auto;min-height:40px;padding:6px 8px;font-size:13px;line-height:1.3;letter-spacing:-.3px;text-align:center}
  #gfxLanding .gl-about .gl-in{padding-top:80px;padding-bottom:80px;gap:36px}
  #gfxLanding .gl-about-logo{font-size:44px}
  #gfxLanding .gl-about h2{margin-top:20px;font-size:22px}
  #gfxLanding .gl-about-copy{font-size:15.5px}
  #gfxLanding .gl-win-bd{padding:16px}
  #gfxLanding .gl-win-tit{font-size:15px}
  #gfxLanding .gl-win-grid{grid-template-columns:1fr}
  #gfxLanding .gl-win-img{min-height:220px}
  #gfxLanding .gl-win-bar small{display:none}
  #gfxLanding .gl-pf{padding:80px 0}
  #gfxLanding .gl-works{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:160px;gap:8px;margin-top:28px}
  #gfxLanding .gl-tracks-sec{padding:80px 0}
  #gfxLanding .gl-tracks{gap:14px;margin-top:28px}
  #gfxLanding .gl-track{padding:28px 20px 22px;border-radius:16px}
  #gfxLanding .gl-track-ico{right:18px;top:22px;width:48px;height:48px;border-radius:14px}
  #gfxLanding .gl-track-ico svg{width:26px;height:26px}
  #gfxLanding .gl-track h3{padding-right:56px;font-size:22px}
  #gfxLanding .gl-track>p{font-size:14.5px}
  #gfxLanding .gl-track li{font-size:15px;align-items:flex-start}
  #gfxLanding .gl-track li::before{margin-top:7px}
  #gfxLanding .gl-track-tags span{padding:7px 11px;font-size:13px}
  #gfxLanding .gl-faq-sec{padding:80px 0}
  #gfxLanding .gl-faq button{padding:20px 18px;font-size:16px}
  #gfxLanding .gl-faq button b{margin-right:8px}
  #gfxLanding .gl-faq-a p{padding:0 18px 20px 40px;font-size:15px}
  #gfxLanding .gl-faq-a b{margin-left:-22px;margin-right:8px}
  #gfxLanding .gl-form-sec .gl-in{padding-top:72px;padding-bottom:72px}
  #gfxLanding .gl-form-sec h2{font-size:28px;letter-spacing:-1px}
  #gfxLanding .gl-bn{gap:16px;padding:18px}
  #gfxLanding .gl-bn>b{font-size:22px}
  #gfxLanding .gl-bn strong{font-size:16px}
  #gfxLanding .gl-bn p{font-size:14px}
  #gfxLanding .gl-call{flex-wrap:wrap;gap:14px;padding:20px}
  #gfxLanding .gl-call-txt b{font-size:28px}
  #gfxLanding .gl-call a{width:100%;justify-content:center}
  #gfxLanding .gl-card{padding:24px 18px 20px}
  #gfxLanding .gl-row{grid-template-columns:1fr}
  #gfxLanding .gl-chips.is-place{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){
  #gfxLanding, #gfxLanding *, #gfxLanding, #gfxLanding *::before, #gfxLanding, #gfxLanding *::after{animation:none!important;transition:none!important}
  #gfxLanding.gl-js .gl-rv{opacity:1;translate:none}
}