:root { color: #17202b; background: #f6f3ed; font-family: "Noto Serif SC", "Songti SC", "STSong", "Microsoft YaHei", serif; }
* { box-sizing: border-box; } html { min-width: 320px; scroll-behavior: smooth; } body { margin: 0; min-width: 320px; background: #f6f3ed; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } button { cursor: pointer; }
.wrap { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }.topbar { height: 82px; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 20; }.brand { display: inline-flex; align-items: center; gap: 12px; font-family: "Microsoft YaHei", sans-serif; color: #121b26; font-size: 19px; font-weight: 800; letter-spacing: .08em; line-height: 1; }.brand small { display: block; margin-top: 6px; font-family: Arial, sans-serif; font-size: 7px; letter-spacing: .27em; color: #9f7b43; }.brand-mark { width: 32px; height: 34px; display: flex; gap: 2px; align-items: flex-end; justify-content: center; padding-bottom: 2px; background: #b8955d; position: relative; }.brand-mark::after { content: ""; position: absolute; width: 9px; height: 9px; left: 11px; top: -4px; border: 2px solid #b8955d; transform: rotate(45deg); background: #f6f3ed; }.brand-mark i { width: 3px; background: #f8f3e9; display: block; }.brand-mark i:nth-child(1) { height: 11px; }.brand-mark i:nth-child(2) { height: 19px; }.brand-mark i:nth-child(3) { height: 14px; }
.nav-links { display: flex; align-items: center; gap: 26px; height: 100%; font-family: "Microsoft YaHei", sans-serif; }.nav-links a { position: relative; font-size: 13px; color: #34404c; padding: 8px 0; white-space: nowrap; }.nav-links a::after { content: ""; position: absolute; inset: auto 0 2px; height: 1px; background: #ac8243; transform: scaleX(0); transition: transform .25s ease; }.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }.nav-links a.active { color: #8a642c; }.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }.menu-toggle span { display: block; width: 23px; height: 1px; margin: 6px; background: #17202b; }
.hero { min-height: 670px; position: relative; isolation: isolate; overflow: hidden; padding: 108px max(32px, calc((100vw - 1180px) / 2)) 76px; background: #172431; color: #fbf7ed; }.hero::before { content: ""; z-index: -2; position: absolute; inset: 0; background: linear-gradient(112deg, #13232f 4%, #1b2c39 48%, #1f303c 100%); }.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; z-index: -1; background: linear-gradient(transparent, rgba(9,16,21,.42)); }.hero-inner { position: relative; z-index: 2; }.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: #9d7540; font-family: Arial, sans-serif; font-size: 10px; letter-spacing: .21em; font-weight: 700; }.eyebrow span { width: 27px; height: 1px; display: inline-block; background: currentColor; }.eyebrow.light { color: #d9b575; }.hero h1 { margin: 0; max-width: 700px; font-size: clamp(48px, 6vw, 83px); font-weight: 500; letter-spacing: -.05em; line-height: 1.14; }.hero h1 em, .materials-lead em, .about-statement em { color: #e4bf79; font-style: normal; }.hero-lead { margin: 27px 0 0; color: #c1cad0; font-family: "Microsoft YaHei", sans-serif; font-size: 16px; line-height: 2; }.hero-actions { display: flex; gap: 13px; margin-top: 37px; }.button { min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 48px; padding: 0 20px; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; transition: transform .2s, background .2s, border .2s; }.button:hover { transform: translateY(-2px); }.button.primary { background: #d9b475; color: #192735; }.button.primary b { font-size: 20px; font-weight: 400; }.button.ghost { border: 1px solid rgba(230,237,239,.38); color: #f7f5ef; }.button.dark { background: #1c2934; color: #f6f2e8; margin-top: 25px; }
.hero-visual { position: absolute; right: max(22px, calc((100vw - 1280px) / 2)); top: 53px; width: 500px; height: 500px; z-index: 1; }.visual-halo { position: absolute; inset: 40px; border: 1px solid rgba(225,192,132,.18); border-radius: 50%; box-shadow: 0 0 0 54px rgba(225,192,132,.025), 0 0 0 108px rgba(225,192,132,.02); }.golden-sphere { display: grid; place-items: center; position: absolute; left: 120px; top: 116px; width: 236px; height: 236px; border-radius: 50%; background: radial-gradient(circle at 32% 26%, #fff7d6 0 3%, #d2ac69 19%, #9b7440 48%, #523d27 80%); color: #fff3c7; box-shadow: inset -34px -30px 64px rgba(43,26,15,.75), 0 0 60px rgba(232,192,111,.16); transform: rotate(-15deg); }.golden-sphere span { margin-top: 20px; font-family: Georgia, serif; font-size: 79px; font-style: italic; text-shadow: 0 3px 4px rgba(50,30,15,.2); }.golden-sphere small { margin-top: -48px; margin-left: 116px; font-family: Arial, sans-serif; font-size: 14px; }.orbit { position: absolute; border: 1px solid rgba(236,210,162,.32); border-radius: 50%; }.orbit-a { width: 400px; height: 124px; left: 35px; top: 172px; transform: rotate(-31deg); }.orbit-b { width: 332px; height: 170px; left: 69px; top: 148px; transform: rotate(43deg); }.visual-card { position: absolute; padding: 14px 16px; border: 1px solid rgba(249,240,216,.2); background: rgba(17,32,43,.58); backdrop-filter: blur(12px); color: #f6eedb; font-family: "Microsoft YaHei", sans-serif; }.card-top { top: 19px; right: -11px; width: 168px; }.visual-card small { display: block; color: #d9b575; font-size: 10px; letter-spacing: .12em; margin-bottom: 8px; }.visual-card strong { font-size: 12px; font-weight: 500; }.card-bottom { left: -14px; bottom: 39px; display: flex; align-items: center; gap: 12px; }.card-bottom span { color: #e1bd79; font-family: Georgia, serif; font-size: 30px; }.card-bottom p { margin: 0; font-size: 11px; line-height: 1.6; }.hero-footnote { position: absolute; bottom: 25px; left: max(32px, calc((100vw - 1180px) / 2)); color: rgba(223,230,229,.38); font-family: Arial, sans-serif; letter-spacing: .12em; font-size: 8px; }.stars i { position: absolute; z-index: -1; width: 2px; height: 2px; border-radius: 50%; background: #e6d4a4; box-shadow: 0 0 9px #e6d4a4; animation: pulse 3.5s infinite ease-in-out; } @keyframes pulse { 50% { opacity: .2; transform: scale(.6); } }
.intro-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 9%; padding: 126px 0 128px; }.section-heading h2, .materials-lead h2, .content-intro h2, .resource-filter h2, .contact-layout h2 { margin: 0; font-weight: 500; font-size: clamp(36px, 4vw, 57px); letter-spacing: -.055em; line-height: 1.25; }.intro-copy { align-self: end; max-width: 525px; padding-bottom: 3px; }.intro-copy p { margin: 0 0 19px; color: #657078; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 2.05; }.intro-copy .lead-copy { color: #28343e; font-family: inherit; font-size: 22px; line-height: 1.65; }.text-link { display: inline-flex; gap: 28px; align-items: center; margin-top: 10px; color: #9a733c; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; font-weight: 700; }.text-link b { font-size: 21px; font-weight: 400; transition: transform .2s; }.text-link:hover b { transform: translateX(5px); }
.path-section { padding: 100px 0 105px; background: #e9e2d6; }.row-heading { display: flex; justify-content: space-between; align-items: flex-end; }.row-heading h2 { margin: 0; font-size: clamp(36px,4vw,57px); font-weight: 500; line-height: 1.25; letter-spacing: -.055em; }.path-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 53px; }.path-card { min-height: 353px; position: relative; padding: 31px 29px; background: #f4f0e9; transition: transform .25s, box-shadow .25s; }.path-card:hover { transform: translateY(-7px); box-shadow: 0 18px 30px rgba(48,38,24,.13); }.path-no { position: absolute; top: 27px; right: 28px; color: #b89158; font-family: Arial, sans-serif; font-size: 11px; }.course-icon { position: relative; width: 62px; height: 52px; margin-bottom: 27px; color: #a67d43; }.course-icon.cube { border: 1px solid currentColor; transform: skewY(-25deg) rotate(30deg) scale(.67); }.course-icon.cube i { display: none; }.course-icon.lines i { position: absolute; display: block; height: 1px; background: currentColor; transform: rotate(-32deg); }.course-icon.lines i:nth-child(1) { width: 60px; top: 18px; }.course-icon.lines i:nth-child(2) { width: 42px; top: 31px; left: 16px; }.course-icon.lines i:nth-child(3) { width: 25px; top: 42px; left: 34px; }.course-icon.rings { border: 1px solid currentColor; border-radius: 50%; transform: scale(.64); }.course-icon.rings::before, .course-icon.rings::after { content: ""; position: absolute; border: 1px solid currentColor; border-radius: 50%; }.course-icon.rings::before { inset: 9px; }.course-icon.rings::after { inset: 18px; }.card-overline { color: #a77e44!important; font-family: Arial, sans-serif!important; font-size: 9px!important; letter-spacing: .16em; }.path-card h3 { margin: 12px 0; font-size: 24px; font-weight: 500; }.path-card p { color: #6d7478; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; line-height: 1.8; }.path-card > a { position: absolute; left: 29px; bottom: 28px; color: #8b6837; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; }.path-card > a b { margin-left: 15px; font-size: 16px; }
.materials-section { display: grid; grid-template-columns: .78fr 1.22fr; gap: 9%; padding: 125px 0 123px; }.materials-lead > p:not(.eyebrow) { max-width: 300px; margin: 25px 0 0; color: #667077; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 2; }.note-stack { display: grid; grid-template-columns: 1.1fr .9fr; gap: 14px; }.note-card { min-height: 187px; padding: 25px; position: relative; background: #e4d4ba; color: #293542; }.large-note { grid-row: span 2; min-height: 387px; background: #b99761; color: #17232e; }.note-meta { display: flex; justify-content: space-between; color: rgba(24,39,49,.7); font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .13em; }.large-note h3 { margin: 80px 0 18px; font-size: 29px; font-weight: 500; line-height: 1.45; }.large-note p { max-width: 245px; color: #3c4850; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; line-height: 1.8; }.large-note a { position: absolute; bottom: 28px; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; font-weight: 700; }.large-note a b { margin-left: 25px; font-size: 17px; }.small-note { display: flex; flex-direction: column; justify-content: space-between; background: #263741; color: #f3efe5; }.small-note span { color: #d7b77b; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .14em; }.small-note strong { font-size: 21px; font-weight: 500; line-height: 1.4; }.small-note i { position: absolute; right: 25px; bottom: 24px; color: rgba(229,213,181,.65); font-family: Georgia, serif; font-size: 32px; font-style: normal; }.muted-note { background: #d5c3a5; color: #26323b; }.muted-note span { color: #8b6b3d; }.muted-note i { color: rgba(68,60,47,.48); }
.disclaimer-section { background: #192733; color: #f5f1e8; }.disclaimer-box { min-height: 278px; display: grid; grid-template-columns: 82px .92fr 1.4fr; column-gap: 30px; align-items: center; position: relative; }.disclaimer-box::after { content: ""; position: absolute; left: 111px; right: 0; bottom: 53px; height: 1px; background: rgba(239,222,186,.18); }.disclaimer-symbol { width: 57px; height: 57px; border: 1px solid rgba(230,198,138,.75); border-radius: 50%; display: grid; place-items: center; color: #e3bb75; font-family: Georgia, serif; font-size: 33px; }.disclaimer-box .eyebrow { margin-bottom: 13px; }.disclaimer-box h2 { max-width: 300px; margin: 0; font-size: 28px; font-weight: 500; line-height: 1.45; }.disclaimer-box > p { max-width: 490px; margin: 0; color: #c8d0d1; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; line-height: 2; }.disclaimer-box > a { position: absolute; bottom: 18px; right: 0; color: #ddb978; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; }.disclaimer-box > a b { margin-left: 18px; font-size: 17px; }
.page-hero { min-height: 276px; display: flex; align-items: center; position: relative; overflow: hidden; color: #f7f2e7; background: #1b2a35; }.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 35%, rgba(192,153,87,.3), transparent 22%), linear-gradient(110deg, #172631, #213641); }.page-hero-lines { position: absolute; right: 9%; width: 260px; height: 260px; border: 1px solid rgba(229,196,128,.22); transform: rotate(45deg); }.page-hero-lines::before, .page-hero-lines::after { content: ""; position: absolute; inset: 38px; border: 1px solid rgba(229,196,128,.14); }.page-hero-lines::after { inset: 76px; }.page-hero .wrap { position: relative; z-index: 1; }.page-hero h1 { margin: 0 0 14px; font-size: clamp(42px, 5vw, 63px); font-weight: 500; letter-spacing: -.04em; }.page-hero .wrap > p:last-child { max-width: 650px; margin: 0; color: #cbd3d2; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 1.9; }.page-content { padding: 95px 0 120px; }
.content-intro { display: grid; grid-template-columns: .9fr 1.1fr; column-gap: 12%; align-items: end; margin-bottom: 58px; }.content-intro > p { color: #667077; font-family: "Microsoft YaHei", sans-serif; line-height: 2; font-size: 14px; }.course-list { border-top: 1px solid #d7d0c5; }.course-list article { display: grid; grid-template-columns: 85px 1fr 120px; gap: 22px; align-items: center; padding: 28px 8px; border-bottom: 1px solid #d7d0c5; transition: padding .2s, background .2s; }.course-list article:hover { padding-left: 18px; background: #efeae1; }.course-list article > span { color: #9f7d4b; font-family: Arial, sans-serif; font-size: 13px; }.course-list p { margin: 0; color: #677177; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; line-height: 1.75; }.course-list div > p:first-child { color: #a47d42; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .14em; }.course-list h3 { margin: 7px 0; font-size: 23px; font-weight: 500; }.course-list em { color: #8b8d8a; font-family: "Microsoft YaHei", sans-serif; font-style: normal; font-size: 12px; text-align: right; }.info-callout { display: grid; grid-template-columns: 90px 1fr; gap: 20px; margin-top: 44px; padding: 27px 30px; background: #e6dccb; }.info-callout b { color: #9b743d; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; }.info-callout p { margin: 0; color: #5d676d; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; line-height: 1.9; }
.resource-filter { display: flex; flex-wrap: wrap; gap: 16px 8%; align-items: end; margin-bottom: 49px; }.resource-filter .eyebrow { flex-basis: 100%; margin-bottom: 0; }.resource-filter h2 { flex: 1; }.resource-filter > span { padding-bottom: 7px; color: #8e734b; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; }.resource-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.resource-card { min-height: 272px; padding: 28px; position: relative; background: #ece5d9; transition: transform .22s; }.resource-card:nth-child(3n+2) { background: #d1bf9f; }.resource-card:nth-child(3n) { background: #263842; color: #f4efe4; }.resource-card:hover { transform: translateY(-6px); }.resource-card > span, .resource-card > p:first-of-type { font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .13em; }.resource-card > span { color: #9d7540; }.resource-card > p:first-of-type { float: right; margin: 0; color: #768084; }.resource-card h3 { clear: both; margin: 76px 0 10px; font-size: 23px; font-weight: 500; line-height: 1.45; }.resource-card > p:nth-of-type(2) { margin: 0; color: #657076; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; line-height: 1.8; }.resource-card a { position: absolute; left: 28px; bottom: 25px; color: #8d6937; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; font-weight: 700; }.resource-card a b { margin-left: 20px; font-size: 16px; }.resource-card:nth-child(3n) > span, .resource-card:nth-child(3n) > p:nth-of-type(2) { color: #d4d8d3; }.resource-card:nth-child(3n) a { color: #e7bf79; }
.prose { width: min(740px, 100%); margin: auto; }.prose h2 { margin: 48px 0 16px; font-size: 29px; font-weight: 500; }.prose p, .prose li { color: #5d686e; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 2.1; }.prose ul { padding-left: 21px; }.prose li { padding-left: 6px; margin: 8px 0; }.prose b { color: #29343d; }.quote-block { margin-bottom: 48px; padding: 34px 40px; border-left: 3px solid #b68e50; background: #ece3d4; color: #25313c; font-size: 25px; line-height: 1.65; }.updated { color: #a3804d!important; font-size: 12px!important; }.risk-prose h2:first-of-type { margin-top: 0; }.about-layout { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12%; }.about-statement h2 { margin: 0; font-size: clamp(35px, 4vw, 54px); font-weight: 500; line-height: 1.43; letter-spacing: -.05em; }.about-layout .prose { margin: 0; }.about-layout .prose h2 { margin-top: 43px; }.contact-layout { display: grid; grid-template-columns: 1fr .9fr; gap: 12%; }.contact-layout > div > p:not(.eyebrow) { max-width: 430px; margin: 26px 0 40px; color: #657077; font-family: "Microsoft YaHei", sans-serif; font-size: 14px; line-height: 2; }.contact-item { display: grid; grid-template-columns: 100px 1fr; padding: 17px 0; border-top: 1px solid #d8d0c2; font-family: "Microsoft YaHei", sans-serif; }.contact-item span { color: #967342; font-size: 12px; }.contact-item strong { color: #27313a; font-size: 13px; }.contact-form { padding: 34px; background: #e8dfd1; }.contact-form label { display: block; margin-bottom: 19px; color: #7f653d; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; }.contact-form input, .contact-form textarea { width: 100%; display: block; margin-top: 9px; padding: 12px 0; border: 0; border-bottom: 1px solid #c5b9a8; outline: 0; background: transparent; color: #26313a; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; }.contact-form textarea { min-height: 90px; resize: vertical; }.contact-form input::placeholder, .contact-form textarea::placeholder { color: #aaa195; }.contact-form button { width: 100%; height: 48px; margin-top: 9px; border: 0; background: #20313d; color: #f7f1e5; font-family: "Microsoft YaHei", sans-serif; font-size: 13px; }
.footer { background: #172430; color: #d9dfe0; }.footer-top { min-height: 192px; display: grid; grid-template-columns: 1.4fr 1fr 1.55fr; align-items: center; gap: 28px; }.footer-brand { color: #f5f2e9; }.footer-brand .brand-mark::after { background: #172430; }.footer-top > p { color: #aeb9ba; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; line-height: 1.9; }.footer-top > div { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px 21px; }.footer-top > div a { color: #d9dfdc; font-family: "Microsoft YaHei", sans-serif; font-size: 12px; }.footer-top > div a:hover { color: #dfb873; }.footer-bottom { min-height: 58px; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(235,235,225,.12); color: #89999d; font-family: Arial, sans-serif; font-size: 9px; letter-spacing: .08em; }
@media (max-width: 900px) { .hero-visual { opacity: .45; right: -75px; }.disclaimer-box { grid-template-columns: 68px 1fr; padding: 40px 0 62px; }.disclaimer-box > p { grid-column: 2; margin-top: 20px; }.disclaimer-box::after { left: 0; }.materials-section { gap: 5%; }.content-intro, .about-layout, .contact-layout { column-gap: 7%; } }
@media (max-width: 700px) { .wrap { width: min(100% - 36px, 1180px); }.topbar { height: 71px; }.nav-links { position: absolute; right: 0; top: 64px; min-width: 215px; height: auto; padding: 12px 19px; display: none; flex-direction: column; align-items: stretch; gap: 0; background: #f6f3ed; box-shadow: 0 14px 28px rgba(20,27,30,.15); }.nav-links.open { display: flex; }.nav-links a { padding: 12px 0; }.menu-toggle { display: block; }.hero { min-height: 610px; padding: 88px 18px 80px; }.hero h1 { font-size: 49px; }.hero-lead br { display: none; }.hero-visual { transform: scale(.76); transform-origin: top right; right: -125px; top: 123px; opacity: .35; }.hero-footnote { left: 18px; bottom: 19px; font-size: 7px; }.hero-actions { flex-direction: column; align-items: flex-start; }.button { min-width: 176px; }.intro-section, .materials-section { grid-template-columns: 1fr; gap: 35px; padding: 78px 0; }.section-heading h2, .materials-lead h2, .content-intro h2, .resource-filter h2, .contact-layout h2 { font-size: 39px; }.path-section { padding: 74px 0; }.row-heading { display: block; }.row-heading .text-link { margin-top: 25px; }.path-grid, .resource-grid { grid-template-columns: 1fr; margin-top: 38px; }.path-card { min-height: 300px; }.note-stack { grid-template-columns: 1fr; }.large-note { min-height: 320px; }.large-note h3 { margin-top: 50px; }.disclaimer-box { display: block; padding: 53px 0 68px; }.disclaimer-symbol { margin-bottom: 24px; }.disclaimer-box h2 { margin-bottom: 21px; }.disclaimer-box::after { bottom: 47px; }.page-hero { min-height: 237px; }.page-content { padding: 65px 0 85px; }.content-intro { display: block; margin-bottom: 35px; }.content-intro > p:last-child { margin-top: 23px; }.course-list article { grid-template-columns: 37px 1fr; padding: 22px 0; }.course-list em { grid-column: 2; text-align: left; }.info-callout { grid-template-columns: 1fr; gap: 10px; padding: 23px; }.resource-filter { display: block; }.resource-filter h2 { margin-top: 15px; }.resource-filter > span { display: block; margin-top: 20px; }.about-layout, .contact-layout { grid-template-columns: 1fr; gap: 45px; }.quote-block { padding: 28px 24px; font-size: 21px; }.footer-top { grid-template-columns: 1fr; gap: 20px; padding: 43px 0; }.footer-top > p { margin: 0; }.footer-top > div { justify-content: flex-start; }.footer-bottom { min-height: 80px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 9px; } }