@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#eaf7ff; --muted:#97b6cc; --navy:#06182f; --navy-2:#0b294a; --panel:#0d3158; --line:rgba(91,202,255,.34); --cyan:#37d7ff; --gold:#ffd36e; --gold-deep:#e19a16; --green:#45e3a2; --max:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--navy); }
body { margin:0; background:radial-gradient(circle at 82% 3%,#103f68 0,transparent 25rem),var(--navy); color:var(--ink); font-family:'Noto Sans TC',system-ui,sans-serif; line-height:1.65; }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.2; background-image:linear-gradient(rgba(104,212,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(104,212,255,.045) 1px,transparent 1px); background-size:46px 46px; mask-image:linear-gradient(to bottom,black,transparent 70%); }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
.section-shell { width:min(calc(100% - 48px),var(--max)); margin-inline:auto; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:100; background:#fff; color:#000; padding:8px 12px; border-radius:6px; }.skip-link:focus { top:12px; }
.site-header { position:sticky; top:0; z-index:50; height:76px; padding:0 max(24px,calc((100vw - var(--max))/2)); display:flex; align-items:center; gap:28px; background:rgba(5,20,40,.84); backdrop-filter:blur(18px); border-bottom:1px solid rgba(116,209,255,.14); }
.brand { display:inline-flex; align-items:center; gap:10px; min-width:max-content; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--cyan); color:var(--cyan); font-family:'Space Grotesk',sans-serif; font-weight:700; clip-path:polygon(17% 0,100% 0,100% 82%,83% 100%,0 100%,0 17%); }.brand strong,.brand small { display:block; line-height:1.1; }.brand strong { letter-spacing:.06em; font-size:13px; }.brand small { font-size:10px; color:var(--muted); margin-top:3px; }
nav { display:flex; gap:24px; margin-left:auto; } nav a { color:#b7cee1; font-size:13px; } nav a:hover { color:var(--cyan); }.header-apply,.button { display:inline-flex; gap:12px; align-items:center; justify-content:center; font-weight:800; letter-spacing:.03em; transition:transform .2s,box-shadow .2s; }.header-apply { border:1px solid var(--cyan); color:var(--cyan); padding:9px 14px; font-size:12px; }.header-apply:hover,.button:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.25); }
.hero { min-height:600px; position:relative; display:grid; grid-template-columns:45% 55%; align-items:center; overflow:hidden; padding-block:72px 46px; }.hero::after { content:''; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,transparent,var(--cyan),transparent); opacity:.55; }.hero-copy { position:relative; z-index:2; padding-block:34px; }.hero-plan,.eyeline { margin:0 0 12px; color:var(--cyan); font:600 12px/1 'Space Grotesk',sans-serif; letter-spacing:.15em; }.hero-plan { display:inline-block; padding:10px 15px; border:1px solid rgba(63,215,255,.7); clip-path:polygon(9px 0,100% 0,calc(100% - 9px) 100%,0 100%,0 9px); }
h1,h2,h3,p { margin-top:0; } h1,h2,h3 { letter-spacing:-.035em; line-height:1.08; } h1 { margin:0 0 22px; font-size:clamp(47px,6vw,84px); font-weight:900; text-shadow:0 6px 26px rgba(1,10,25,.5); } h1 em { color:var(--cyan); font-family:'Space Grotesk',sans-serif; font-style:normal; text-shadow:0 0 25px rgba(55,215,255,.65); }.hero-lead { font-size:19px; font-weight:700; letter-spacing:.04em; color:#d5e6f4; }.hero-actions { display:flex; align-items:center; gap:22px; margin:30px 0; }.button { min-height:50px; padding:0 25px; border:none; cursor:pointer; }.button-gold { background:linear-gradient(120deg,#ffe8a5,var(--gold),#eb9d17); color:#192237; box-shadow:0 9px 28px rgba(244,170,27,.24); }.text-button { border:0; background:none; color:#c9e4f6; padding:5px 0; cursor:pointer; font-size:14px; }.text-button:hover { color:var(--cyan); }.hero-partners { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:9px; flex-wrap:wrap; }.hero-partners strong { color:#e3f3ff; }.hero-partners i { height:14px; width:1px; background:var(--line); }.hero-image-wrap { position:absolute; inset:0 calc((100vw - min(100vw,var(--max)))/-2) 0 34%; z-index:0; overflow:hidden; }.hero-image { width:100%; height:100%; object-fit:cover; object-position:center; }.hero-corner { position:absolute; right:2px; top:42px; z-index:2; font:700 9px/1.5 'Space Grotesk'; letter-spacing:.17em; writing-mode:vertical-rl; color:rgba(139,217,255,.65); }
.metrics-wrap { position:relative; z-index:3; display:grid; grid-template-columns:repeat(5,1fr); margin-top:-26px; border:1px solid var(--line); background:#0a294a; box-shadow:0 26px 50px rgba(0,0,0,.25); }.metric-card { min-height:174px; padding:20px 16px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; border-right:1px solid var(--line); background:linear-gradient(145deg,rgba(32,103,153,.18),rgba(5,24,47,.25)); position:relative; }.metric-card:last-child { border-right:0; }.metric-card::before { content:''; position:absolute; inset:7px; border:1px solid rgba(74,207,255,.17); pointer-events:none; }.metric-card strong { display:block; font:700 58px/1 'Space Grotesk'; color:#fff; text-shadow:0 0 18px rgba(67,210,255,.35); }.metric-card strong span { font:700 24px 'Noto Sans TC'; }.metric-card>span:last-child { font-size:13px; color:#d8eafa; font-weight:700; }.metric-icon { color:var(--cyan); font-size:20px; margin-bottom:7px; }.metric-label { font-size:11px; color:#cde9fb; }.metric-gold strong,.metric-gold .metric-label { color:var(--gold); }.metric-green { background:linear-gradient(145deg,rgba(12,119,84,.53),rgba(6,42,52,.5)); }.metric-green strong,.metric-green .metric-label { color:var(--green); }
.intro-band { padding:132px 0 104px; background:linear-gradient(180deg,transparent,rgba(9,51,87,.54)); }.intro-grid { display:grid; grid-template-columns:180px 1.25fr .9fr; gap:50px; align-items:end; }.section-index { color:var(--cyan); font:600 15px 'Space Grotesk'; letter-spacing:.1em; }.section-index span { display:block; font-size:9px; margin-top:8px; color:var(--muted); }.intro-grid h2,.section-heading h2,.practice-content h2,.network-title h2,.career-copy h2,.apply-grid h2,.faq-section h2 { font-size:clamp(34px,4.5vw,59px); margin:0; font-weight:900; }.intro-grid h2 span,h2 span { color:#8acdf4; }.intro-copy,.section-heading>p,.network-title>p { color:#a8c5da; font-size:15px; margin:0; }
.program-section { padding:102px 0; }.section-heading { display:flex; justify-content:space-between; gap:45px; align-items:end; margin-bottom:34px; }.section-heading>p { width:min(330px,100%); }.curriculum-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.course-module { min-height:310px; padding:27px 22px; border:1px solid rgba(107,198,246,.28); background:linear-gradient(160deg,#10395e,#092441); display:flex; flex-direction:column; justify-content:space-between; clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px)); }.course-module.course-primary { background:linear-gradient(160deg,#155888,#0c2d50); }.course-module.course-compliance { background:linear-gradient(160deg,#193b50,#09283b); }.course-module span { color:var(--cyan); font:700 13px 'Space Grotesk'; }.course-module h3 { font-size:26px; margin:12px 0; }.course-module ul { list-style:none; margin:0; padding:17px 0 0; border-top:1px solid rgba(142,218,255,.25); font-size:13px; color:#c8deed; }.course-module li { margin:8px 0; padding-left:12px; position:relative; }.course-module li::before { content:'›'; position:absolute; left:0; color:var(--cyan); }
.practice-section { padding:104px 0; background:linear-gradient(140deg,#0c2644,#071a31 58%,#0b3a58); }.practice-grid { display:grid; grid-template-columns:1.08fr .92fr; gap:72px; align-items:center; }.practice-image-frame,.career-image-frame { border:1px solid var(--line); padding:8px; background:#06182f; box-shadow:18px 18px 0 rgba(29,165,220,.08); }.practice-image-frame img,.career-image-frame img { display:block; width:100%; aspect-ratio:1.08; object-fit:cover; }.practice-content>p:not(.eyeline),.career-copy>p:not(.eyeline),.apply-grid>div>p:not(.eyeline) { color:#b7d0e0; }.practice-content ol { list-style:none; padding:0; margin:31px 0 0; border-top:1px solid rgba(151,208,241,.24); }.practice-content li { display:grid; grid-template-columns:52px 1fr; gap:13px; padding:18px 0; border-bottom:1px solid rgba(151,208,241,.24); }.practice-content li>span { color:var(--cyan); font:600 12px 'Space Grotesk'; }.practice-content strong,.practice-content small { display:block; }.practice-content small { color:var(--muted); font-size:13px; margin-top:3px; }
.network-section { padding:113px 0 102px; }.network-title { max-width:735px; }.network-title>p { margin-top:18px; }.partner-rail { display:grid; grid-template-columns:repeat(3,1fr); margin-top:35px; border-top:1px solid var(--line); border-left:1px solid var(--line); }.partner-rail span { min-height:75px; display:grid; place-items:center; text-align:center; color:#c8def0; font-size:16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(130deg,rgba(35,118,171,.17),rgba(5,25,45,.08)); }.network-note { margin:17px 0 0; color:var(--muted); font-size:12px; }
.career-section { padding:102px 0; background:linear-gradient(90deg,#082744,#0b375a); }.career-grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:68px; align-items:center; }.career-list { margin-top:30px; border-top:1px solid rgba(154,218,249,.32); }.career-list>div { padding:12px 0; display:flex; gap:15px; border-bottom:1px solid rgba(154,218,249,.25); }.career-list span { color:var(--gold); font:600 12px 'Space Grotesk'; }.career-list strong { font-size:15px; }.career-image-frame img { aspect-ratio:1.35; }
.apply-section { padding:110px 0; background:radial-gradient(circle at 71% 40%,rgba(19,111,142,.4),transparent 18rem),#061a31; }.apply-grid { display:grid; grid-template-columns:1fr 320px; gap:80px; align-items:center; }.apply-steps { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:28px 0 31px; }.apply-steps span { border:1px solid rgba(115,204,248,.25); padding:9px 10px; color:#cde5f5; font-size:12px; }.qr-card { justify-self:end; width:276px; padding:23px; border:1px solid var(--cyan); background:rgba(8,42,68,.72); box-shadow:0 0 35px rgba(37,211,255,.13),inset 0 0 32px rgba(0,168,255,.06); text-align:center; }.qr-card p { margin:0 0 12px; font-weight:800; font-size:19px; color:#fff; }.qr-card a { display:block; padding:9px; background:#fff; }.qr-card img { display:block; width:100%; aspect-ratio:1; }.qr-card small { display:block; margin-top:12px; color:var(--muted); font-size:11px; }
.faq-section { padding:104px 0 110px; display:grid; grid-template-columns:.8fr 1.2fr; gap:62px; }.faq-list { border-top:1px solid rgba(137,204,240,.35); }.faq-list details { border-bottom:1px solid rgba(137,204,240,.27); }.faq-list summary { padding:20px 0; list-style:none; display:flex; justify-content:space-between; gap:20px; cursor:pointer; font-weight:700; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { color:var(--cyan); font-size:21px; transition:transform .2s; }.faq-list details[open] summary span { transform:rotate(45deg); }.faq-list p { margin:0 0 20px; color:#acc9db; font-size:14px; }
.site-footer { border-top:1px solid rgba(109,194,236,.3); background:#041225; padding:43px 0 90px; }.footer-grid { display:flex; justify-content:space-between; gap:40px; }.footer-grid>div:first-child>p { max-width:530px; color:var(--muted); font-size:12px; margin:16px 0 0; }.footer-grid>div:last-child { display:flex; flex-direction:column; align-items:flex-end; }.footer-grid>div:last-child>span,.footer-grid small { color:var(--muted); font-size:12px; }.phone-link { color:var(--gold); font:700 32px/1.3 'Space Grotesk'; letter-spacing:.03em; }.privacy-notice { margin-top:34px; padding-top:25px; border-top:1px solid rgba(109,194,236,.18); }.privacy-notice h2 { margin:0 0 12px; color:#e8f7ff; font-size:18px; line-height:1.4; }.privacy-notice p { max-width:1060px; margin:0; color:#9fb7ca; font-size:12px; line-height:1.9; }.mobile-apply { display:none; }
.poster-dialog { width:min(92vw,680px); max-height:92vh; padding:0; overflow:visible; border:1px solid var(--cyan); background:#06172d; }.poster-dialog::backdrop { background:rgba(0,8,19,.82); backdrop-filter:blur(5px); }.poster-dialog img { display:block; max-width:100%; max-height:88vh; margin:auto; }.dialog-close { position:absolute; right:-15px; top:-15px; width:36px; height:36px; border:1px solid var(--cyan); background:#06172d; color:#fff; border-radius:50%; font-size:25px; cursor:pointer; }
@media (max-width:900px) { .site-header { padding-inline:24px; }.hero { grid-template-columns:57% 43%; }.hero-image-wrap { left:24%; }.metrics-wrap { grid-template-columns:repeat(3,1fr); }.metric-card:nth-child(3) { border-right:0; }.metric-card:nth-child(-n+3) { border-bottom:1px solid var(--line); }.intro-grid { grid-template-columns:120px 1fr; }.intro-copy { grid-column:2; }.curriculum-grid { grid-template-columns:repeat(2,1fr); }.practice-grid,.career-grid { gap:38px; }.apply-grid { gap:35px; }.faq-section { gap:35px; } }
@media (max-width:640px) { body { padding-bottom:63px; }.section-shell { width:min(calc(100% - 32px),var(--max)); }.site-header { height:66px; padding-inline:16px; }.site-header nav,.header-apply { display:none; }.brand strong { font-size:12px; }.hero { min-height:690px; display:block; padding:35px 0 0; }.hero-copy { padding-top:18px; }.hero-image-wrap { inset:auto -16px 0 -16px; height:420px; }.hero-image { object-position:64% center; }.hero-copy { position:relative; z-index:2; }.hero-copy::after { content:''; position:absolute; z-index:-1; inset:-35px -16px 80px; background:linear-gradient(90deg,rgba(4,17,34,.96) 0%,rgba(4,17,34,.76) 65%,rgba(4,17,34,.05)); }.hero-plan { font-size:10px; padding:8px 11px; }.hero h1 { font-size:49px; margin-top:15px; }.hero-lead { font-size:16px; }.hero-actions { margin:22px 0; }.hero-partners { max-width:290px; font-size:10px; }.hero-corner { display:none; }.metrics-wrap { width:calc(100% - 24px); grid-template-columns:repeat(2,1fr); margin-top:-16px; }.metric-card { min-height:137px; padding:16px 8px; }.metric-card:nth-child(-n+3) { border-bottom:1px solid var(--line); }.metric-card:nth-child(2),.metric-card:nth-child(4) { border-right:0; }.metric-card:nth-child(3) { border-right:1px solid var(--line); }.metric-card strong { font-size:44px; }.metric-card strong span { font-size:19px; }.metric-card>span:last-child { font-size:11px; }.metric-card:last-child { grid-column:1 / -1; min-height:124px; }.intro-band,.program-section,.network-section,.career-section,.apply-section { padding:72px 0; }.intro-grid,.practice-grid,.career-grid,.apply-grid,.faq-section { display:block; }.section-index { margin-bottom:18px; }.intro-copy { margin-top:24px; }.section-heading { display:block; margin-bottom:24px; }.section-heading>p { margin-top:18px; }.curriculum-grid { grid-template-columns:1fr; }.course-module { min-height:220px; }.practice-image-frame { margin-bottom:38px; }.practice-image-frame img { aspect-ratio:1.07; }.partner-rail { grid-template-columns:repeat(2,1fr); }.partner-rail span { min-height:64px; font-size:14px; }.career-copy { margin-bottom:36px; }.career-image-frame img { aspect-ratio:1.05; object-position:72% center; }.apply-steps { grid-template-columns:1fr; }.qr-card { justify-self:auto; margin:34px auto 0; }.faq-section>div:first-child { margin-bottom:25px; }.footer-grid { display:block; }.footer-grid>div:last-child { align-items:flex-start; margin-top:28px; }.mobile-apply { display:flex; position:fixed; bottom:0; left:0; right:0; z-index:60; min-height:61px; align-items:center; justify-content:center; gap:12px; background:linear-gradient(90deg,#ffc95b,#f2a31e); color:#192235; font-weight:900; }.site-footer { padding-bottom:35px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }