/* Native secondary-page designs, 1440px canvas / 1260px content. */
.secondary-page { --sp-blue:#1e3c78; --sp-ink:#183a54; --sp-link:#216caf; --sp-muted:#536b7c; --sp-cyan:#00bddb; --sp-line:#dbe7ed; --sp-pale:#eaf2f6; --sp-mint:#e3f2ee; width:100%; min-width:0; background:#fff; color:var(--sp-ink); font:16px/1.75 "Noto Sans SC",sans-serif; }
.secondary-page,.secondary-page * { box-sizing:border-box; }
.secondary-page :is(h1,h2,h3,h4,h5,h6,p,ul) { margin:0; padding:0; }
body[data-page] #app .secondary-page.secondary-page :is(h1,h2,h3,h4,h5,h6) { font-family:"Noto Sans SC",sans-serif!important; }
body[data-page] #app .secondary-page.secondary-page :is(.sp-title,.sp-section-title,.sp-footer-brand h3,.sp-training-list-title,.sp-training-calendar-title) { font-family:"Noto Serif SC",serif!important; }
.secondary-page a { color:inherit; text-decoration:none; }
.secondary-page button { appearance:none; padding:0; border:0; border-radius:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.secondary-page :is(input,select) { font:inherit; }
.secondary-page a:focus-visible,.secondary-page button:focus-visible,.secondary-page select:focus-visible { outline:2px solid var(--sp-cyan); outline-offset:4px; }
.secondary-page [hidden] { display:none!important; }
.secondary-page img { display:block; max-width:100%; }
.secondary-page svg { display:inline-block; width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
.secondary-page .sp-container { width:calc(100% - 64px); max-width:1260px; margin:0 auto; }
.secondary-page .sp-section { padding:48px 0; }
.secondary-page .sp-heading { min-height:58px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.secondary-page .sp-section-title { font-size:30px; line-height:42px; font-weight:700; }
.secondary-page .sp-heading-en { font-size:11px; line-height:16px; letter-spacing:1.2px; color:var(--sp-muted); }
.secondary-page .sp-heading>a { display:flex; gap:20px; align-items:center; color:var(--sp-link); font-size:14px; font-weight:500; }
.secondary-page .sp-button { display:inline-flex; align-items:center; justify-content:space-between; gap:16px; min-height:40px; padding:7px 16px; border-radius:5px; background:var(--sp-blue); color:#fff; font-size:14px; font-weight:500; line-height:24px; }
.secondary-page .sp-button:hover { background:#31538d; }
.secondary-page .sp-arrow { width:20px; height:20px; }
.secondary-page .sp-banner { height:150px; background:var(--sp-pale); }
.secondary-page .sp-banner>.sp-container { height:100%; position:relative; padding-top:44px; }
.secondary-page .sp-breadcrumb { position:absolute; top:16px; right:0; display:flex; align-items:center; gap:6px; color:var(--sp-muted); font-size:13px; line-height:21px; }
.secondary-page .sp-breadcrumb a:hover { color:var(--sp-link); }
.secondary-page .sp-title { color:var(--sp-blue); font-size:36px; line-height:50px; font-weight:700; margin-top:0; }
.secondary-page .sp-banner-en { font-size:12px; line-height:20px; letter-spacing:1.8px; color:var(--sp-muted); margin:3px 0 0 1px; }
.secondary-page .sp-banner-line { display:block; width:28px; height:2px; background:var(--sp-cyan); margin:0; position:absolute; top:130px; }
.secondary-page .sp-tabs { background:#fff; }
.secondary-page .sp-tabs>.sp-container { display:flex; align-items:stretch; min-height:56px; border-bottom:1px solid var(--sp-line); overflow-x:auto; }
.secondary-page .sp-tab { position:relative; display:flex; align-items:center; padding:0 24px; min-height:55px; flex-shrink:0; color:#506b7d; font-size:16px; white-space:nowrap; }
.secondary-page .sp-tab.is-active { font-weight:700; color:var(--sp-link); }
.secondary-page .sp-tab.is-active::after { content:""; height:2px; background:var(--sp-cyan); position:absolute; left:24px; right:24px; bottom:0; }
.secondary-page .sp-header { position:relative; height:96px; z-index:20; background:#fff; }
.secondary-page .sp-header-inner { max-width:1290px; width:calc(100% - 48px); height:100%; margin:auto; display:flex; align-items:center; }
.secondary-page .sp-brand { display:flex; align-items:center; gap:13px; width:365px; flex-shrink:0; }
.secondary-page .sp-brand-logo { display:block; width:100%; height:auto; aspect-ratio:368.938721 / 69.078979; object-fit:contain; object-position:left center; }
.secondary-page .sp-brand-mark { width:82px; height:73px; object-fit:contain; }
.secondary-page .sp-brand-wordmark { width:270px; height:73px; object-fit:contain; }
.secondary-page .sp-nav { margin-left:auto; }
.secondary-page .sp-nav ul { list-style:none; }
.secondary-page .sp-nav>ul { display:flex; gap:10px; }
.secondary-page .sp-nav li { position:relative; }
.secondary-page .sp-nav>ul>li>a { display:flex; align-items:center; justify-content:center; position:relative; width:90px; height:48px; color:var(--sp-blue); font-size:16px; font-weight:700; white-space:nowrap; }
.secondary-page .sp-nav>ul>li>a[aria-current] { background:var(--sp-pale); }
.secondary-page .sp-nav>ul>li>a[aria-current]::after { content:""; position:absolute; bottom:0; height:2px; width:26px; background:var(--sp-cyan); }
.secondary-page .sp-submenu { display:none; position:absolute; left:0; top:100%; min-width:180px; padding:8px 0; background:#fff; box-shadow:0 6px 24px #163e7825; }
.secondary-page .sp-submenu .sp-submenu { left:100%; top:0; }
.secondary-page .sp-nav li:hover>.sp-submenu,.secondary-page .sp-nav li:focus-within>.sp-submenu { display:block; }
.secondary-page .sp-submenu a { display:block; padding:10px 18px; white-space:nowrap; color:var(--sp-blue); font-size:14px; }
.secondary-page .sp-submenu a:hover { background:var(--sp-pale); }
.secondary-page .sp-header-actions { display:flex; align-items:center; gap:22px; margin-left:31px; margin-right:33px; }
.secondary-page .sp-search { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--sp-line); border-radius:5px; color:var(--sp-blue); }
.secondary-page .sp-search svg { width:16px; height:16px; }
.secondary-page .sp-login { width:122px; height:40px; display:flex; gap:9px; align-items:center; justify-content:center; border-radius:5px; color:#fff; background:var(--sp-blue); font-size:14px; }
.secondary-page .sp-login svg:first-child { width:18px; height:18px; }
.secondary-page .sp-login svg:last-child { width:12px; height:12px; margin-left:12px; }
.secondary-page .sp-menu-toggle,.secondary-page .sp-mobile-ethics { display:none; }
.secondary-page .sp-footer { position:relative; color:#fff; background:var(--sp-blue); }
.secondary-page .sp-footer-main { position:relative; min-height:380px; padding-top:58px; }
.secondary-page .sp-footer-main>.sp-wrap { position:relative; z-index:1; width:calc(100% - 64px); max-width:1260px; margin:0 auto; display:grid; grid-template-columns:430px 390px 360px; gap:40px; }
.secondary-page .sp-footer-main>.sp-wrap::before { content:""; width:423px; height:4px; position:absolute; top:-58px; left:0; background:linear-gradient(to right,#00bddb 0 58.15%,#40b990 58.15% 87.23%,#b9de00 87.23%); }
.secondary-page .sp-footer-brand>a { display:block; width:372px; height:74px; }
.secondary-page .sp-footer-brand img { width:100%; height:100%; object-fit:contain; }
.secondary-page .sp-footer-brand h3 { margin-top:31px; font-size:22px; line-height:35px; font-weight:700; }
.secondary-page .sp-footer-brand p { margin-top:15px; color:#b9cce1; font-size:14px; line-height:23px; }
.secondary-page .sp-footer-brand>div { display:flex; gap:18px; margin-top:31px; }
.secondary-page .sp-footer-brand button { display:flex; align-items:center; justify-content:center; gap:8px; width:144px; height:42px; border:1px solid #7191b0; border-radius:22px; background:#2d527f; color:#fff; font-size:15px; font-weight:500; }
.secondary-page .sp-footer-brand button svg { width:18px; height:18px; }
.secondary-page .sp-footer :is(.sp-footer-contact,.sp-footer-links)>h3 { font-size:21px; line-height:34px; font-weight:700; margin-bottom:26px; position:relative; }
.secondary-page .sp-footer :is(.sp-footer-contact,.sp-footer-links)>h3::after { content:""; position:absolute; left:0; bottom:-5px; width:36px; height:2px; background:var(--sp-cyan); }
.secondary-page .sp-footer-links>h3::after { background:#40b990!important; }
.secondary-page .sp-footer .sp-footer-contact>h3 { margin-bottom:16px; }
.secondary-page .sp-footer .sp-footer-links>h3 { margin-bottom:32px; }
.secondary-page .sp-contact-item { display:flex; align-items:center; gap:15px; min-height:67px; }
.secondary-page .sp-contact-item>span { display:grid; place-items:center; width:34px; height:34px; border-radius:9px; color:#9bcbdd; background:#2d527f; flex-shrink:0; }
.secondary-page .sp-contact-item svg { width:18px; height:18px; }
.secondary-page .sp-contact-item small { display:block; color:#99b5d1; font-size:11px; line-height:18px; }
.secondary-page .sp-contact-item p { font-size:15px; line-height:24px; margin-top:3px; }
.secondary-page .sp-footer-links>a { height:40px; margin-bottom:8px; padding:7px 14px; display:flex; justify-content:space-between; align-items:center; border:1px solid #6083a6; border-radius:8px; background:#2d527f; font-size:14px; }
.secondary-page .sp-footer-links>a>span { color:#a7c9d8; }
.secondary-page .sp-footer-campus { position:absolute; left:0; bottom:0; width:100%; height:auto; max-height:134px; object-fit:fill; pointer-events:none; }
.secondary-page .sp-copyright { min-height:58px; position:relative; z-index:1; background:#17345f; text-align:center; padding:10px 24px 7px; color:#abc4da; font-size:11px; line-height:20px; }
.secondary-page .sp-copyright small { color:#7896b7; font-size:10px; }
@media(min-width:1440px) { .secondary-page .sp-header-inner { width:1290px; } }
@media(max-width:1320px) { .secondary-page .sp-brand { width:300px; gap:10px; } .secondary-page .sp-brand-mark { width:68px; } .secondary-page .sp-brand-wordmark { width:222px; } .secondary-page .sp-nav>ul { gap:4px; } .secondary-page .sp-nav>ul>li>a { width:80px; font-size:15px; } .secondary-page .sp-header-actions { margin-left:20px; margin-right:0; gap:15px; } .secondary-page .sp-footer-main>.sp-wrap { grid-template-columns:1.1fr 1fr 1fr; gap:32px; } .secondary-page .sp-footer-brand>a { width:100%; max-width:372px; } }
@media(max-width:1050px) { .secondary-page .sp-header { height:86px; } .secondary-page .sp-header-actions { margin-left:auto; } .secondary-page .sp-menu-toggle { display:grid; place-items:center; width:32px; height:40px; color:var(--sp-blue); } .secondary-page .sp-nav { display:none; position:absolute; top:100%; left:0; width:100%; background:white; box-shadow:0 6px 24px #163e7825; padding:16px 24px; max-height:65vh; overflow:auto; } .secondary-page .sp-nav.is-open { display:block; } .secondary-page .sp-nav>ul { display:grid; grid-template-columns:repeat(3,1fr); } .secondary-page .sp-nav>ul>li>a { width:100%; } .secondary-page .sp-submenu { position:static; display:block; box-shadow:none; min-width:0; } .secondary-page .sp-submenu a { white-space:normal; padding:6px 12px; } .secondary-page .sp-mobile-ethics { display:block; color:var(--sp-link); padding:12px; } .secondary-page .sp-footer-main { padding:48px 0 154px; } .secondary-page .sp-footer-main>.sp-wrap { grid-template-columns:1fr 1fr; } .secondary-page .sp-footer-links { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:8px 24px; } .secondary-page .sp-footer-links>h3 { grid-column:1/-1; margin-bottom:15px; } .secondary-page .sp-footer-links>a { margin:0; } .secondary-page .sp-footer-main>.sp-wrap::before { top:-48px; max-width:100%; } }
@media(max-width:640px) { .secondary-page .sp-container { width:calc(100% - 36px); } .secondary-page .sp-section { padding:32px 0; } .secondary-page .sp-header { height:76px; } .secondary-page .sp-header-inner { width:calc(100% - 28px); } .secondary-page .sp-brand { width:min(222px, calc(100% - 114px)); min-width:0; gap:8px; flex-shrink:1; } .secondary-page .sp-brand-mark { width:48px; height:54px; flex-shrink:0; } .secondary-page .sp-brand-wordmark { width:auto; min-width:0; flex:1; height:54px; object-position:left center; } .secondary-page .sp-login { width:36px; height:36px; } .secondary-page .sp-login :is(span,svg:last-child) { display:none; } .secondary-page .sp-search { display:grid; width:32px; height:36px; } .secondary-page .sp-header-actions { gap:7px; } .secondary-page .sp-nav>ul { grid-template-columns:repeat(2,1fr); } .secondary-page .sp-title { font-size:34px; line-height:50px; } .secondary-page .sp-tab { padding:0 18px; min-height:64px; font-size:14px; } .secondary-page .sp-tabs>.sp-container { min-height:65px; } .secondary-page .sp-tab.is-active::after { left:18px; right:18px; } .secondary-page .sp-section-title { font-size:26px; line-height:38px; } .secondary-page .sp-heading { gap:12px; } .secondary-page .sp-heading>a { font-size:12px; gap:8px; } .secondary-page .sp-footer-main>.sp-wrap { width:calc(100% - 36px); grid-template-columns:minmax(0,1fr); } .secondary-page .sp-footer-brand>div { flex-wrap:wrap; } .secondary-page .sp-footer-links { display:block; } .secondary-page .sp-footer-links>a { margin-bottom:8px; } .secondary-page .sp-footer-contact h3 { margin-bottom:15px; } .secondary-page .sp-footer-campus { height:auto; max-height:90px; object-fit:fill; } .secondary-page .sp-footer-main { padding-bottom:110px; } }
