{"id":606,"date":"2026-05-04T10:59:00","date_gmt":"2026-05-04T02:59:00","guid":{"rendered":"https:\/\/new.365ycs.com\/?p=606"},"modified":"2026-04-24T11:37:09","modified_gmt":"2026-04-24T03:37:09","slug":"%e4%ba%94%e5%9b%9b%e9%9d%92%e5%b9%b4%e8%8a%82-%c2%b7-%e8%87%b4%e7%87%83%e7%83%a7%e7%9a%84%e9%9d%92%e6%98%a5","status":"publish","type":"post","link":"https:\/\/www.365ycs.com\/index.php\/2026\/05\/04\/%e4%ba%94%e5%9b%9b%e9%9d%92%e5%b9%b4%e8%8a%82-%c2%b7-%e8%87%b4%e7%87%83%e7%83%a7%e7%9a%84%e9%9d%92%e6%98%a5\/","title":{"rendered":"\u4e94\u56db\u9752\u5e74\u8282 \u00b7 \u81f4\u71c3\u70e7\u7684\u9752\u6625"},"content":{"rendered":"\n
\n
\n\n\n\n \n \n \u4e94\u56db\u9752\u5e74\u8282 \u00b7 \u81f4\u71c3\u70e7\u7684\u9752\u6625<\/title>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;700;900&family=Syne:wght@400;700;800&display=swap\" rel=\"stylesheet\">\n <style>\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CSS VARIABLES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n :root {\n --orange: #ff4500;\n --orange-light: #ff6b35;\n --orange-pale: #fff0e6;\n --yellow: #ffd700;\n --cyan: #00c4e8;\n --pink: #ff3366;\n --bg: #fffaf5;\n --bg-warm: #fff5ee;\n --bg-section: #ffffff;\n --bg-dark: #1a0500;\n --text: #1a1008;\n --text-muted: #6b5a48;\n --text-light: #a09080;\n --shadow-sm: 0 2px 12px rgba(255,69,0,0.10);\n --shadow-md: 0 8px 32px rgba(255,69,0,0.15);\n --shadow-lg: 0 20px 60px rgba(255,69,0,0.20);\n --shadow-glow: 0 0 40px rgba(255,69,0,0.25);\n --radius: 16px;\n --radius-lg: 24px;\n --font-display: 'ZCOOL QingKe HuangYou', 'Noto Sans SC', sans-serif;\n --font-body: 'Noto Sans SC', sans-serif;\n --font-en: 'Syne', sans-serif;\n --nav-h: 72px;\n --gradient-hero: linear-gradient(135deg, #ff4500 0%, #ff6b35 40%, #ffd700 100%);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESET\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n html { scroll-behavior: smooth; }\n body {\n background: var(--bg);\n color: var(--text);\n font-family: var(--font-body);\n overflow-x: hidden;\n line-height: 1.6;\n }\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: var(--bg); }\n ::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n NAVBAR\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .navbar {\n position: fixed;\n top: 0; left: 0; right: 0;\n height: var(--nav-h);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 48px;\n transition: background 0.4s, box-shadow 0.4s, backdrop-filter 0.4s;\n }\n .navbar.scrolled {\n background: rgba(255,250,245,0.88);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 1px 0 rgba(255,69,0,0.1), 0 4px 20px rgba(0,0,0,0.05);\n }\n .nav-brand {\n font-family: var(--font-display);\n font-size: 22px;\n color: var(--text);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: 10px;\n }\n .nav-brand .brand-icon {\n width: 36px; height: 36px;\n background: var(--gradient-hero);\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n color: white;\n font-weight: 900;\n }\n .nav-links {\n display: flex;\n align-items: center;\n gap: 8px;\n list-style: none;\n }\n .nav-links a {\n text-decoration: none;\n color: var(--text-muted);\n font-size: 14px;\n padding: 6px 16px;\n border-radius: 100px;\n transition: all 0.3s;\n font-weight: 400;\n }\n .nav-links a:hover,\n .nav-links a.active {\n color: var(--orange);\n background: rgba(255,69,0,0.08);\n }\n .nav-cta {\n background: var(--gradient-hero) !important;\n color: white !important;\n font-weight: 700 !important;\n box-shadow: 0 4px 16px rgba(255,69,0,0.3);\n }\n .nav-cta:hover {\n transform: translateY(-1px);\n box-shadow: 0 6px 24px rgba(255,69,0,0.4) !important;\n }\n\n \/* Mobile nav toggle *\/\n .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }\n .nav-toggle span {\n display: block; width: 24px; height: 2px;\n background: var(--text); margin: 5px 0;\n border-radius: 2px;\n transition: all 0.3s;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n HERO\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .hero {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n overflow: hidden;\n background: var(--bg);\n }\n\n \/* Decorative blobs *\/\n .blob {\n position: absolute;\n border-radius: 50%;\n filter: blur(80px);\n pointer-events: none;\n animation: blobFloat 8s ease-in-out infinite;\n }\n .blob-1 {\n width: 600px; height: 600px;\n background: rgba(255,69,0,0.12);\n top: -200px; right: -100px;\n animation-delay: 0s;\n }\n .blob-2 {\n width: 400px; height: 400px;\n background: rgba(255,215,0,0.12);\n bottom: -100px; left: -50px;\n animation-delay: -3s;\n }\n .blob-3 {\n width: 300px; height: 300px;\n background: rgba(0,196,232,0.08);\n top: 40%; left: 40%;\n animation-delay: -5s;\n }\n @keyframes blobFloat {\n 0%, 100% { transform: translate(0, 0) scale(1); }\n 33% { transform: translate(20px, -30px) scale(1.05); }\n 66% { transform: translate(-10px, 20px) scale(0.95); }\n }\n\n \/* Grid dots pattern *\/\n .hero-dots {\n position: absolute;\n inset: 0;\n background-image: radial-gradient(circle, rgba(255,69,0,0.08) 1px, transparent 1px);\n background-size: 40px 40px;\n pointer-events: none;\n }\n\n \/* Floating geo shapes *\/\n .hero-geo {\n position: absolute;\n pointer-events: none;\n }\n .hg-1 {\n top: 15%; right: 8%;\n width: 80px; height: 80px;\n border: 2px solid rgba(255,69,0,0.2);\n border-radius: 50%;\n animation: geoSpin 20s linear infinite;\n }\n .hg-2 {\n bottom: 20%; left: 5%;\n width: 60px; height: 60px;\n border: 2px solid rgba(255,215,0,0.25);\n transform: rotate(30deg);\n animation: geoSpin 15s linear infinite reverse;\n }\n .hg-3 {\n top: 35%; left: 8%;\n width: 40px; height: 40px;\n border: 2px solid rgba(0,196,232,0.2);\n animation: geoSpin 10s linear infinite;\n }\n @keyframes geoSpin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n \/* Giant 5.4 number *\/\n .hero-num {\n position: absolute;\n font-family: var(--font-display);\n font-size: clamp(220px, 38vw, 480px);\n font-weight: 900;\n color: transparent;\n -webkit-text-stroke: 1.5px rgba(255,69,0,0.12);\n line-height: 1;\n user-select: none;\n top: 50%;\n right: 5%;\n transform: translateY(-50%);\n animation: numPulse 4s ease-in-out infinite;\n pointer-events: none;\n z-index: 0;\n }\n @keyframes numPulse {\n 0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(1); }\n 50% { opacity: 0.7; transform: translateY(-50%) scale(1.04); }\n }\n\n \/* Particles *\/\n .hero-particles {\n position: absolute;\n inset: 0;\n pointer-events: none;\n overflow: hidden;\n }\n .h-particle {\n position: absolute;\n border-radius: 50%;\n animation: hFloat linear infinite;\n }\n @keyframes hFloat {\n 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }\n }\n\n \/* Hero content *\/\n .hero-content {\n position: relative;\n z-index: 2;\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 48px;\n padding-top: var(--nav-h);\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n width: 100%;\n }\n .hero-left { display: flex; flex-direction: column; gap: 28px; }\n\n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,69,0,0.08);\n border: 1px solid rgba(255,69,0,0.2);\n border-radius: 100px;\n padding: 6px 18px;\n font-size: 12px;\n color: var(--orange);\n font-weight: 700;\n letter-spacing: 2px;\n text-transform: uppercase;\n width: fit-content;\n opacity: 0;\n animation: slideInLeft 0.7s ease forwards 0.2s;\n }\n .hero-badge-dot {\n width: 6px; height: 6px;\n background: var(--orange);\n border-radius: 50%;\n animation: dotPulse 2s ease-in-out infinite;\n }\n @keyframes dotPulse {\n 0%, 100% { transform: scale(1); opacity: 1; }\n 50% { transform: scale(0.6); opacity: 0.5; }\n }\n\n .hero-title {\n font-family: var(--font-display);\n font-size: clamp(48px, 6vw, 80px);\n font-weight: 900;\n line-height: 1.15;\n color: var(--text);\n opacity: 0;\n animation: slideInLeft 0.7s ease forwards 0.4s;\n }\n .hero-title .accent {\n background: var(--gradient-hero);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .hero-title .outline {\n color: transparent;\n -webkit-text-stroke: 2px var(--orange);\n }\n\n .hero-desc {\n font-size: 17px;\n color: var(--text-muted);\n line-height: 1.9;\n max-width: 480px;\n opacity: 0;\n animation: slideInLeft 0.7s ease forwards 0.6s;\n }\n\n .hero-actions {\n display: flex;\n gap: 16px;\n flex-wrap: wrap;\n opacity: 0;\n animation: slideInLeft 0.7s ease forwards 0.8s;\n }\n @keyframes slideInLeft {\n from { opacity: 0; transform: translateX(-40px); }\n to { opacity: 1; transform: translateX(0); }\n }\n\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n border-radius: 100px;\n font-size: 15px;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n border: none;\n font-family: var(--font-body);\n text-decoration: none;\n }\n .btn-primary {\n background: var(--gradient-hero);\n color: white;\n box-shadow: 0 4px 20px rgba(255,69,0,0.35);\n }\n .btn-primary:hover {\n transform: translateY(-3px) scale(1.02);\n box-shadow: 0 8px 32px rgba(255,69,0,0.45);\n }\n .btn-outline {\n background: white;\n color: var(--text);\n border: 1.5px solid rgba(255,69,0,0.25);\n }\n .btn-outline:hover {\n border-color: var(--orange);\n color: var(--orange);\n transform: translateY(-3px);\n box-shadow: var(--shadow-sm);\n }\n .btn-ghost {\n background: transparent;\n color: var(--text-muted);\n padding: 14px 24px;\n }\n .btn-ghost:hover { color: var(--orange); }\n\n \/* Hero right \u2014 card preview *\/\n .hero-right {\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n animation: slideInRight 0.9s ease forwards 0.5s;\n }\n @keyframes slideInRight {\n from { opacity: 0; transform: translateX(40px); }\n to { opacity: 1; transform: translateX(0); }\n }\n .hero-card {\n width: 340px;\n background: white;\n border-radius: var(--radius-lg);\n padding: 36px;\n box-shadow: var(--shadow-lg);\n border: 1px solid rgba(255,69,0,0.08);\n position: relative;\n overflow: hidden;\n animation: cardFloat 6s ease-in-out infinite;\n }\n @keyframes cardFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-12px) rotate(0.5deg); }\n }\n .hero-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 5px;\n background: var(--gradient-hero);\n }\n .hero-card-date {\n font-family: var(--font-en);\n font-size: 64px;\n font-weight: 800;\n background: var(--gradient-hero);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1;\n }\n .hero-card-label {\n font-size: 13px;\n color: var(--text-muted);\n margin-top: 4px;\n font-weight: 300;\n }\n .hero-card-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n margin-top: 20px;\n }\n .hero-card-tag {\n background: var(--orange-pale);\n color: var(--orange);\n font-size: 12px;\n padding: 4px 12px;\n border-radius: 100px;\n font-weight: 700;\n }\n .hero-card-nums {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n margin-top: 20px;\n }\n .hero-stat {\n background: var(--bg);\n border-radius: 12px;\n padding: 16px;\n text-align: center;\n }\n .hero-stat-num {\n font-family: var(--font-display);\n font-size: 28px;\n color: var(--orange);\n }\n .hero-stat-label {\n font-size: 11px;\n color: var(--text-muted);\n margin-top: 2px;\n }\n\n \/* Hero scroll indicator *\/\n .hero-scroll {\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n z-index: 2;\n opacity: 0;\n animation: fadeUp 0.7s ease forwards 1.2s;\n cursor: pointer;\n }\n .hero-scroll span {\n font-size: 11px;\n letter-spacing: 3px;\n color: var(--text-muted);\n text-transform: uppercase;\n }\n .scroll-arrow {\n width: 20px; height: 20px;\n border-right: 2px solid var(--orange);\n border-bottom: 2px solid var(--orange);\n transform: rotate(45deg);\n animation: arrowBounce 2s ease-in-out infinite;\n }\n @keyframes arrowBounce {\n 0%, 100% { transform: rotate(45deg) translateY(0); opacity: 1; }\n 50% { transform: rotate(45deg) translateY(6px); opacity: 0.5; }\n }\n @keyframes fadeUp {\n from { opacity: 0; transform: translate(-50%, 20px); }\n to { opacity: 1; transform: translate(-50%, 0); }\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SECTION BASE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .section {\n padding: 100px 48px;\n max-width: 1200px;\n margin: 0 auto;\n }\n .section-header {\n text-align: center;\n margin-bottom: 64px;\n }\n .section-label {\n font-family: var(--font-en);\n font-size: 11px;\n letter-spacing: 5px;\n text-transform: uppercase;\n background: var(--gradient-hero);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 12px;\n display: block;\n }\n .section-title {\n font-family: var(--font-display);\n font-size: clamp(32px, 4.5vw, 52px);\n font-weight: 900;\n color: var(--text);\n line-height: 1.2;\n }\n .section-title em {\n font-style: normal;\n background: var(--gradient-hero);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .section-sub {\n font-size: 16px;\n color: var(--text-muted);\n max-width: 540px;\n margin: 16px auto 0;\n line-height: 1.8;\n }\n\n \/* Reveal animation *\/\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.7s ease, transform 0.7s ease;\n }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n .reveal-delay-1 { transition-delay: 0.1s; }\n .reveal-delay-2 { transition-delay: 0.2s; }\n .reveal-delay-3 { transition-delay: 0.3s; }\n .reveal-delay-4 { transition-delay: 0.4s; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n COUNTER STRIP\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .counter-strip {\n background: var(--bg-dark);\n padding: 48px;\n position: relative;\n overflow: hidden;\n }\n .counter-strip::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--gradient-hero);\n opacity: 0.08;\n }\n .counter-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 40px;\n position: relative;\n }\n .counter-item {\n text-align: center;\n }\n .counter-num {\n font-family: var(--font-display);\n font-size: clamp(40px, 5vw, 64px);\n background: var(--gradient-hero);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n line-height: 1;\n }\n .counter-label {\n font-size: 13px;\n color: rgba(255,255,255,0.5);\n margin-top: 8px;\n letter-spacing: 1px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n TIMELINE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .timeline-section {\n background: var(--bg-section);\n }\n .timeline-outer {\n position: relative;\n overflow: hidden;\n }\n .timeline-track {\n position: relative;\n padding: 40px 0;\n }\n .timeline-line {\n position: absolute;\n top: 50%;\n left: 0; right: 0;\n height: 3px;\n background: linear-gradient(90deg, transparent, var(--orange), var(--yellow), var(--cyan), transparent);\n border-radius: 2px;\n }\n .timeline-items {\n display: flex;\n gap: 0;\n overflow-x: auto;\n padding: 0 20px;\n cursor: grab;\n scrollbar-width: none;\n -ms-overflow-style: none;\n }\n .timeline-items::-webkit-scrollbar { display: none; }\n .timeline-items:active { cursor: grabbing; }\n .tl-item {\n min-width: 220px;\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n padding: 0 20px;\n }\n .tl-item.even { flex-direction: column-reverse; }\n .tl-year-badge {\n background: var(--gradient-hero);\n color: white;\n font-family: var(--font-en);\n font-size: 14px;\n font-weight: 800;\n padding: 4px 16px;\n border-radius: 100px;\n margin: 16px 0;\n box-shadow: 0 4px 16px rgba(255,69,0,0.3);\n transition: transform 0.3s;\n }\n .tl-item:hover .tl-year-badge {\n transform: scale(1.1);\n }\n .tl-connector {\n width: 2px;\n height: 40px;\n background: linear-gradient(var(--orange), transparent);\n }\n .tl-item.even .tl-connector {\n background: linear-gradient(transparent, var(--orange));\n }\n .tl-dot {\n width: 16px; height: 16px;\n border-radius: 50%;\n background: white;\n border: 3px solid var(--orange);\n position: relative;\n z-index: 1;\n transition: all 0.3s;\n flex-shrink: 0;\n }\n .tl-item:hover .tl-dot {\n background: var(--orange);\n box-shadow: 0 0 0 6px rgba(255,69,0,0.15), 0 0 20px rgba(255,69,0,0.4);\n transform: scale(1.3);\n }\n .tl-content {\n background: var(--bg);\n border-radius: var(--radius);\n padding: 20px;\n text-align: center;\n margin: 16px 0;\n border: 1.5px solid rgba(255,69,0,0.08);\n transition: all 0.3s;\n }\n .tl-item:hover .tl-content {\n border-color: rgba(255,69,0,0.25);\n box-shadow: var(--shadow-sm);\n transform: translateY(-4px);\n }\n .tl-content h4 {\n font-family: var(--font-display);\n font-size: 18px;\n color: var(--text);\n margin-bottom: 6px;\n }\n .tl-content p {\n font-size: 13px;\n color: var(--text-muted);\n line-height: 1.6;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n POEM\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .poem-section {\n background: var(--bg-warm);\n position: relative;\n overflow: hidden;\n }\n .poem-section::before {\n content: '';\n position: absolute;\n top: -100px; left: -100px;\n width: 500px; height: 500px;\n background: radial-gradient(circle, rgba(255,69,0,0.06) 0%, transparent 70%);\n pointer-events: none;\n }\n .poem-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 32px;\n }\n .poem-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 48px 40px;\n position: relative;\n border: 1.5px solid rgba(255,69,0,0.08);\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n overflow: hidden;\n }\n .poem-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-lg), var(--shadow-glow);\n border-color: rgba(255,69,0,0.25);\n }\n .poem-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 4px;\n background: var(--gradient-hero);\n }\n .poem-card::after {\n content: '\\201C';\n position: absolute;\n top: 10px; right: 24px;\n font-family: Georgia, serif;\n font-size: 120px;\n color: rgba(255,69,0,0.05);\n line-height: 1;\n }\n .poem-era-badge {\n display: inline-block;\n background: var(--orange-pale);\n color: var(--orange);\n font-size: 11px;\n font-weight: 700;\n padding: 3px 12px;\n border-radius: 100px;\n letter-spacing: 1px;\n margin-bottom: 16px;\n }\n .poem-title {\n font-family: var(--font-display);\n font-size: 28px;\n color: var(--text);\n margin-bottom: 4px;\n }\n .poem-author {\n font-size: 13px;\n color: var(--text-light);\n margin-bottom: 24px;\n }\n .poem-lines {\n font-size: 17px;\n color: var(--text);\n line-height: 2.2;\n font-weight: 300;\n }\n .poem-lines p { margin-bottom: 4px; }\n .poem-highlight {\n color: var(--orange);\n font-weight: 700;\n background: var(--orange-pale);\n padding: 1px 4px;\n border-radius: 3px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SPIRIT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .spirit-section {\n background: var(--bg-section);\n }\n .spirit-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n }\n .spirit-card {\n background: var(--bg);\n border-radius: var(--radius-lg);\n padding: 40px 32px;\n text-align: center;\n border: 1.5px solid rgba(255,69,0,0.06);\n cursor: default;\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n overflow: hidden;\n }\n .spirit-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--gradient-hero);\n opacity: 0;\n transition: opacity 0.4s;\n }\n .spirit-card:hover {\n transform: translateY(-10px);\n box-shadow: var(--shadow-lg);\n border-color: transparent;\n }\n .spirit-card:hover::before { opacity: 0.05; }\n .spirit-icon {\n font-size: 44px;\n margin-bottom: 16px;\n display: block;\n transition: transform 0.4s;\n }\n .spirit-card:hover .spirit-icon {\n transform: scale(1.2) rotate(-5deg);\n }\n .spirit-word {\n font-family: var(--font-display);\n font-size: 26px;\n color: var(--text);\n margin-bottom: 4px;\n }\n .spirit-en {\n font-family: var(--font-en);\n font-size: 11px;\n color: var(--orange);\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 12px;\n }\n .spirit-desc {\n font-size: 14px;\n color: var(--text-muted);\n line-height: 1.7;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GALLERY\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .gallery-section {\n background: var(--bg-warm);\n }\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 280px 280px;\n gap: 20px;\n }\n .gallery-item {\n border-radius: var(--radius-lg);\n overflow: hidden;\n position: relative;\n cursor: pointer;\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .gallery-item:hover { transform: scale(1.03); z-index: 1; }\n .gallery-item:nth-child(1) { grid-column: span 2; }\n .gallery-item:nth-child(5) { grid-column: span 2; }\n .gallery-bg {\n position: absolute;\n inset: 0;\n transition: transform 0.6s ease;\n }\n .gallery-item:hover .gallery-bg { transform: scale(1.06); }\n .gi-1 { background: linear-gradient(135deg, #ff4500, #ff8c00, #ffd700); }\n .gi-2 { background: linear-gradient(135deg, #00c4e8, #0051a8); }\n .gi-3 { background: linear-gradient(135deg, #ff3366, #ff6b35); }\n .gi-4 { background: linear-gradient(135deg, #6b35ff, #00c4e8); }\n .gi-5 { background: linear-gradient(135deg, #ff6b35, #ffd700, #00c4e8); }\n .gallery-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 24px;\n }\n .gallery-overlay h3 {\n font-family: var(--font-display);\n font-size: 22px;\n color: white;\n }\n .gallery-overlay p {\n font-size: 13px;\n color: rgba(255,255,255,0.7);\n margin-top: 4px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n QUOTES\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .quotes-section {\n background: var(--bg-section);\n }\n .quotes-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 24px;\n }\n .quote-card {\n background: white;\n border-radius: var(--radius-lg);\n padding: 36px;\n border: 1.5px solid rgba(255,69,0,0.08);\n position: relative;\n transition: all 0.4s ease;\n overflow: hidden;\n }\n .quote-card:hover {\n transform: translateY(-6px);\n box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,69,0,0.15);\n border-color: rgba(255,69,0,0.2);\n }\n .quote-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0;\n width: 60px; height: 60px;\n background: var(--gradient-hero);\n opacity: 0.08;\n border-radius: 0 0 100% 0;\n }\n .quote-emoji {\n font-size: 40px;\n margin-bottom: 16px;\n }\n .quote-text {\n font-size: 16px;\n color: var(--text);\n line-height: 1.9;\n margin-bottom: 24px;\n font-weight: 300;\n }\n .quote-text .highlight {\n color: var(--orange);\n font-weight: 700;\n }\n .quote-author-row {\n display: flex;\n align-items: center;\n gap: 14px;\n padding-top: 20px;\n border-top: 1px solid rgba(0,0,0,0.05);\n }\n .quote-avatar {\n width: 44px; height: 44px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n font-family: var(--font-display);\n color: white;\n flex-shrink: 0;\n }\n .qa-1 { background: linear-gradient(135deg, #ff4500, #ff6b35); }\n .qa-2 { background: linear-gradient(135deg, #0051a8, #00c4e8); }\n .qa-3 { background: linear-gradient(135deg, #ffd700, #ff6b35); }\n .quote-author-name {\n font-size: 15px;\n font-weight: 700;\n color: var(--text);\n }\n .quote-author-role {\n font-size: 12px;\n color: var(--text-light);\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n CTA\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .cta-section {\n position: relative;\n padding: 100px 48px;\n text-align: center;\n overflow: hidden;\n }\n .cta-bg {\n position: absolute;\n inset: 0;\n background: var(--bg-dark);\n }\n .cta-bg::before {\n content: '';\n position: absolute;\n inset: 0;\n background: var(--gradient-hero);\n opacity: 0.06;\n }\n .cta-bg::after {\n content: '';\n position: absolute;\n inset: 0;\n background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);\n background-size: 30px 30px;\n }\n .cta-content {\n position: relative;\n z-index: 1;\n max-width: 700px;\n margin: 0 auto;\n }\n .cta-title {\n font-family: var(--font-display);\n font-size: clamp(36px, 6vw, 64px);\n font-weight: 900;\n color: white;\n line-height: 1.2;\n margin-bottom: 20px;\n }\n .cta-title em {\n font-style: normal;\n background: var(--gradient-hero);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .cta-sub {\n font-size: 16px;\n color: rgba(255,255,255,0.6);\n line-height: 1.8;\n margin-bottom: 40px;\n }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FOOTER\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .footer {\n background: var(--bg-dark);\n padding: 60px 48px 40px;\n }\n .footer-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n flex-wrap: wrap;\n gap: 32px;\n }\n .footer-brand { display: flex; flex-direction: column; gap: 8px; }\n .footer-logo {\n font-family: var(--font-display);\n font-size: 26px;\n color: white;\n }\n .footer-logo em {\n background: var(--gradient-hero);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n font-style: normal;\n }\n .footer-tagline {\n font-size: 13px;\n color: rgba(255,255,255,0.4);\n }\n .footer-nav { display: flex; gap: 40px; flex-wrap: wrap; }\n .footer-nav-group h4 {\n font-size: 12px;\n color: rgba(255,255,255,0.3);\n letter-spacing: 2px;\n text-transform: uppercase;\n margin-bottom: 12px;\n }\n .footer-nav-group a {\n display: block;\n color: rgba(255,255,255,0.5);\n text-decoration: none;\n font-size: 14px;\n margin-bottom: 8px;\n transition: color 0.3s;\n }\n .footer-nav-group a:hover { color: var(--orange); }\n .footer-bottom {\n max-width: 1200px;\n margin: 40px auto 0;\n padding-top: 24px;\n border-top: 1px solid rgba(255,255,255,0.06);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 12px;\n }\n .footer-bottom p {\n font-size: 12px;\n color: rgba(255,255,255,0.3);\n }\n .footer-bottom em { color: var(--orange); font-style: normal; }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n RESPONSIVE\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n @media (max-width: 900px) {\n .hero-content { grid-template-columns: 1fr; padding: 0 24px; padding-top: var(--nav-h); }\n .hero-right { display: none; }\n .hero-num { font-size: 150px; right: 0; opacity: 0.3; }\n .section { padding: 80px 24px; }\n .counter-inner { grid-template-columns: repeat(2, 1fr); }\n .poem-grid { grid-template-columns: 1fr; }\n .spirit-grid { grid-template-columns: repeat(2, 1fr); }\n .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }\n .gallery-item:nth-child(1),\n .gallery-item:nth-child(5) { grid-column: span 1; }\n .navbar { padding: 0 24px; }\n .nav-links { display: none; }\n .nav-toggle { display: block; }\n .counter-strip { padding: 32px 24px; }\n .footer { padding: 48px 24px 32px; }\n .footer-inner { flex-direction: column; }\n .cta-section { padding: 80px 24px; }\n }\n @media (max-width: 600px) {\n .spirit-grid { grid-template-columns: 1fr; }\n .gallery-grid { grid-template-columns: 1fr; }\n .counter-inner { grid-template-columns: 1fr 1fr; gap: 24px; }\n }\n <\/style>\n<\/head>\n<body>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 NAVBAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<nav class=\"navbar\" id=\"navbar\">\n <a href=\"#\" class=\"nav-brand\">\n <div class=\"brand-icon\">\u4e94\u56db<\/div>\n <span>\u9752\u5e74\u8282<\/span>\n <\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#history\" class=\"active\">\u5386\u53f2<\/a><\/li>\n <li><a href=\"#poem\">\u8bd7\u6587<\/a><\/li>\n <li><a href=\"#spirit\">\u7cbe\u795e<\/a><\/li>\n <li><a href=\"#gallery\">\u56fe\u96c6<\/a><\/li>\n <li><a href=\"#quotes\">\u5bc4\u8bed<\/a><\/li>\n <li><a href=\"#cta\" class=\"nav-cta\">\u7acb\u5373\u53c2\u4e0e<\/a><\/li>\n <\/ul>\n <button class=\"nav-toggle\" id=\"navToggle\" aria-label=\"Toggle menu\">\n <span><\/span><span><\/span><span><\/span>\n <\/button>\n<\/nav>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"hero\" id=\"hero\">\n <div class=\"hero-dots\"><\/div>\n <div class=\"blob blob-1\"><\/div>\n <div class=\"blob blob-2\"><\/div>\n <div class=\"blob blob-3\"><\/div>\n <div class=\"hero-geo hg-1\"><\/div>\n <div class=\"hero-geo hg-2\"><\/div>\n <div class=\"hero-geo hg-3\"><\/div>\n <div class=\"hero-particles\" id=\"heroParticles\"><\/div>\n <div class=\"hero-num\">5.4<\/div>\n\n <div class=\"hero-content\">\n <div class=\"hero-left\">\n <div class=\"hero-badge\">\n <div class=\"hero-badge-dot\"><\/div>\n \u4e94\u56db\u9752\u5e74\u8282 \u00b7 May 4th Youth Day \u00b7 1919-2026\n <\/div>\n <h1 class=\"hero-title\">\n \u81f4 \u00b7 <span class=\"accent\">\u71c3\u70e7<\/span>\u7684<br>\n <span class=\"outline\">\u9752\u6625<\/span>\n <\/h1>\n <p class=\"hero-desc\">\n \u4e00\u767e\u96f6\u516d\u5e74\u98ce\u96e8\u517c\u7a0b\uff0c\u4e94\u56db\u7cbe\u795e\u85aa\u706b\u76f8\u4f20\u3002<br>\n \u6bcf\u4e00\u4ee3\u9752\u5e74\uff0c\u90fd\u6709\u81ea\u5df1\u7684\u4f7f\u547d\u4e0e\u62c5\u5f53\u3002<br>\n \u4eca\u5929\uff0c\u8ba9\u6211\u4eec\u4ee5\u521b\u610f\u4e3a\u7b14\uff0c\u4e66\u5199\u65b0\u65f6\u4ee3\u7684\u9752\u6625\u7b54\u5377\u3002\n <\/p>\n <div class=\"hero-actions\">\n <a href=\"#history\" class=\"btn btn-primary\">\ud83d\udd25 \u63a2\u7d22\u5386\u53f2<\/a>\n <a href=\"#spirit\" class=\"btn btn-outline\">\u2728 \u9752\u5e74\u7cbe\u795e<\/a>\n <\/div>\n <\/div>\n\n <div class=\"hero-right\">\n <div class=\"hero-card\">\n <div class=\"hero-card-date\">5.4<\/div>\n <div class=\"hero-card-label\">\u4e2d\u56fd\u9752\u5e74\u8282 \u00b7 \u6cd5\u5b9a\u8282\u65e5<\/div>\n <div class=\"hero-card-tags\">\n <span class=\"hero-card-tag\">\u70ed\u8840<\/span>\n <span class=\"hero-card-tag\">\u521b\u65b0<\/span>\n <span class=\"hero-card-tag\">\u62c5\u5f53<\/span>\n <span class=\"hero-card-tag\">\u6c42\u771f<\/span>\n <span class=\"hero-card-tag\">\u6210\u957f<\/span>\n <span class=\"hero-card-tag\">\u591a\u5143<\/span>\n <\/div>\n <div class=\"hero-card-nums\">\n <div class=\"hero-stat\">\n <div class=\"hero-stat-num\">106<\/div>\n <div class=\"hero-stat-label\">\u5468\u5e74\u7eaa\u5ff5<\/div>\n <\/div>\n <div class=\"hero-stat\">\n <div class=\"hero-stat-num\">1919<\/div>\n <div class=\"hero-stat-label\">\u8fd0\u52a8\u53d1\u6e90<\/div>\n <\/div>\n <div class=\"hero-stat\">\n <div class=\"hero-stat-num\">5\u67084\u65e5<\/div>\n <div class=\"hero-stat-label\">\u6cd5\u5b9a\u8282\u65e5<\/div>\n <\/div>\n <div class=\"hero-stat\">\n <div class=\"hero-stat-num\">14-28<\/div>\n <div class=\"hero-stat-label\">\u5c81\u9002\u7528<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-scroll\" onclick=\"document.getElementById('history').scrollIntoView({behavior:'smooth'})\">\n <span>\u5411\u4e0b\u63a2\u7d22<\/span>\n <div class=\"scroll-arrow\"><\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 COUNTER STRIP \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"counter-strip\">\n <div class=\"counter-inner\">\n <div class=\"counter-item reveal\">\n <div class=\"counter-num\" data-target=\"106\">0<\/div>\n <div class=\"counter-label\">\u5468\u5e74\u7eaa\u5ff5<\/div>\n <\/div>\n <div class=\"counter-item reveal reveal-delay-1\">\n <div class=\"counter-num\" data-target=\"1919\">0<\/div>\n <div class=\"counter-label\">\u8fd0\u52a8\u53d1\u6e90\u5e74<\/div>\n <\/div>\n <div class=\"counter-item reveal reveal-delay-2\">\n <div class=\"counter-num\" data-target=\"5\">0<\/div>\n <div class=\"counter-label\">\u6708\u91cd\u8981\u8282\u65e5<\/div>\n <\/div>\n <div class=\"counter-item reveal reveal-delay-3\">\n <div class=\"counter-num\" data-target=\"4\">0<\/div>\n <div class=\"counter-label\">\u65e5\u94ed\u8bb0\u5386\u53f2<\/div>\n <\/div>\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 TIMELINE \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"section timeline-section\" id=\"history\">\n <div class=\"section-header\">\n <span class=\"section-label reveal\">Historical Timeline<\/span>\n <h2 class=\"section-title reveal reveal-delay-1\">\n \u767e\u5e74<em>\u4e94\u56db<\/em>\uff0c\u7cbe\u795e\u6c38\u7eed\n <\/h2>\n <p class=\"section-sub reveal reveal-delay-2\">\n \u4ece1915\u52302026\uff0c\u7a7f\u8d8a\u4e16\u7eaa\u7684\u957f\u6cb3\uff0c\u611f\u53d7\u6bcf\u4e00\u4ee3\u9752\u5e74\u4eba\u7684\u70ed\u8840\u4e0e\u62c5\u5f53\n <\/p>\n <\/div>\n\n <div class=\"timeline-outer reveal\">\n <div class=\"timeline-track\">\n <div class=\"timeline-line\"><\/div>\n <div class=\"timeline-items\" id=\"timelineItems\">\n <div class=\"tl-item\">\n <div class=\"tl-year-badge\">1915<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u65b0\u6587\u5316\u8fd0\u52a8<\/h4>\n <p>\u4ee5\u6c11\u4e3b\u4e0e\u79d1\u5b66\u4e3a\u65d7\u5e1c\uff0c\u9752\u5e74\u77e5\u8bc6\u5206\u5b50\u5f00\u59cb\u89c9\u9192<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item even\">\n <div class=\"tl-year-badge\">1919<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u4e94\u56db\u8fd0\u52a8\u7206\u53d1<\/h4>\n <p>\u5317\u4eac\u5b66\u751f\u8d70\u4e0a\u8857\u5934\uff0c\u6297\u8bae\u5df4\u9ece\u548c\u7ea6\uff0c\u6380\u8d77\u53cd\u5e1d\u53cd\u5c01\u5efa\u6d6a\u6f6e<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-year-badge\">1921<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u4e2d\u56fd\u5171\u4ea7\u515a\u6210\u7acb<\/h4>\n <p>\u9752\u5e74\u515a\u5458\u5f15\u9886\u9769\u547d\uff0c\u5de5\u4eba\u9636\u7ea7\u767b\u4e0a\u5386\u53f2\u821e\u53f0<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item even\">\n <div class=\"tl-year-badge\">1935<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u4e00\u4e8c\u00b7\u4e5d\u8fd0\u52a8<\/h4>\n <p>\u5317\u5e73\u5b66\u751f\u53d1\u8d77\u6297\u65e5\u6551\u4ea1\u8fd0\u52a8\uff0c\u5ef6\u7eed\u4e94\u56db\u7cbe\u795e<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-year-badge\">1949<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u65b0\u4e2d\u56fd\u6210\u7acb<\/h4>\n <p>\u9752\u5e74\u6295\u8eab\u5efa\u8bbe\uff0c\u5404\u884c\u5404\u4e1a\u6d8c\u73b0\u9752\u5e74\u699c\u6837<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item even\">\n <div class=\"tl-year-badge\">1977<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u6062\u590d\u9ad8\u8003<\/h4>\n <p>\u65e0\u6570\u9752\u5e74\u91cd\u65b0\u83b7\u5f97\u901a\u8fc7\u77e5\u8bc6\u6539\u53d8\u547d\u8fd0\u7684\u673a\u4f1a<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-year-badge\">1994<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u4e92\u8054\u7f51\u65f6\u4ee3<\/h4>\n <p>\u4e2d\u56fd\u63a5\u5165\u4e92\u8054\u7f51\uff0c\u6570\u5b57\u65f6\u4ee3\u7684\u9752\u5e74\u5f00\u59cb\u6539\u53d8\u4e16\u754c<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item even\">\n <div class=\"tl-year-badge\">2020+<\/div>\n <div class=\"tl-connector\"><\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-content\">\n <h4>\u65b0\u65f6\u4ee3\u7684\u9752\u5e74<\/h4>\n <p>\u79d1\u6280\u3001\u6587\u5316\u3001\u521b\u65b0\u2014\u2014\u65b0\u65f6\u4ee3\u7684\u9752\u5e74\u4e66\u5199\u65b0\u7bc7\u7ae0<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 POEM \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"section poem-section\" id=\"poem\">\n <div class=\"section-header\">\n <span class=\"section-label reveal\">Classical Poetry<\/span>\n <h2 class=\"section-title reveal reveal-delay-1\">\u4ee5\u8bd7\u8a00\u5fd7\uff0c<em>\u9752\u6625<\/em>\u4e0d\u673d<\/h2>\n <p class=\"section-sub reveal reveal-delay-2\">\u7a7f\u8d8a\u767e\u5e74\u7684\u6587\u5b57\uff0c\u4eca\u5929\u8bfb\u6765\u4f9d\u7136\u70ed\u8840\u6cb8\u817e<\/p>\n <\/div>\n <div class=\"poem-grid\">\n <div class=\"poem-card reveal\">\n <div class=\"poem-era-badge\">\u6bdb\u6cfd\u4e1c \u00b7 1929\u5e74<\/div>\n <div class=\"poem-title\">\u300a\u4e03\u5f8b\u00b7\u957f\u5f81\u300b\u8282\u9009<\/div>\n <div class=\"poem-author\">\u6bdb\u6cfd\u4e1c \u00b7 \u4f1f\u5927\u7684\u65e0\u4ea7\u9636\u7ea7\u9769\u547d\u5bb6<\/div>\n <div class=\"poem-lines\">\n <p>\u7ea2\u519b\u4e0d\u6015\u8fdc\u5f81\u96be\uff0c<\/p>\n <p>\u4e07\u6c34\u5343\u5c71\u53ea\u7b49\u95f2\u3002<\/p>\n <p><span class=\"poem-highlight\">\u4e94\u5cad\u9036\u8fe4\u817e\u7ec6\u6d6a\uff0c<\/p>\n <p>\u4e4c\u8499\u78c5\u7934\u8d70\u6ce5\u4e38\u3002<\/span><\/p>\n <p>\u91d1\u6c99\u6c34\u62cd\u4e91\u5d16\u6696\uff0c<\/p>\n <p>\u5927\u6e21\u6865\u6a2a\u94c1\u7d22\u5bd2\u3002<\/p>\n <p>\u66f4\u559c\u5cb7\u5c71\u5343\u91cc\u96ea\uff0c<\/p>\n <p>\u4e09\u519b\u8fc7\u540e\u5c3d\u5f00\u989c\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"poem-card reveal reveal-delay-1\">\n <div class=\"poem-era-badge\">\u674e\u5927\u948a \u00b7 1916\u5e74<\/div>\n <div class=\"poem-title\">\u300a\u9752\u6625\u300b\uff08\u8282\u9009\uff09<\/div>\n <div class=\"poem-author\">\u674e\u5927\u948a \u00b7 \u4e94\u56db\u8fd0\u52a8\u91cd\u8981\u9886\u8896<\/div>\n <div class=\"poem-lines\">\n <p>\u9752\u5e74\u4e4b\u5b57\u5178\uff0c\u65e0\u300c\u56f0\u96be\u300d\u4e4b\u5b57\uff1b<\/p>\n <p>\u9752\u5e74\u4e4b\u53e3\u5934\uff0c\u65e0\u300c\u969c\u788d\u300d\u4e4b\u8bed\uff1b<\/p>\n <p><span class=\"poem-highlight\">\u60df\u77e5\u8dc3\u8fdb\uff0c\u60df\u77e5\u96c4\u98de\uff0c<\/p>\n <p>\u60df\u77e5\u672c\u5176\u81ea\u7531\u4e4b\u7cbe\u795e\uff0c<\/p>\n <p>\u5947\u50fb\u4e4b\u601d\u60f3\uff0c<\/p>\n <p>\u9510\u654f\u4e4b\u76f4\u89c9\uff0c<\/p>\n <p>\u6d3b\u6cfc\u4e4b\u751f\u547d\uff0c<\/span><\/p>\n <p>\u4ee5\u521b\u9020\u73af\u5883\uff0c\u5f81\u670d\u5386\u53f2\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SPIRIT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"section spirit-section\" id=\"spirit\">\n <div class=\"section-header\">\n <span class=\"section-label reveal\">Core Values<\/span>\n <h2 class=\"section-title reveal reveal-delay-1\">\u9752\u5e74\u7cbe\u795e\u7684<em>\u516d\u4e2a\u7ef4\u5ea6<\/em><\/h2>\n <p class=\"section-sub reveal reveal-delay-2\">\u4e94\u56db\u7cbe\u795e\u7a7f\u8d8a\u767e\u5e74\uff0c\u5728\u6bcf\u4e00\u4ee3\u9752\u5e74\u8eab\u4e0a\u95ea\u8000\u7740\u4e0d\u540c\u7684\u5149\u8292<\/p>\n <\/div>\n <div class=\"spirit-grid\">\n <div class=\"spirit-card reveal\">\n <span class=\"spirit-icon\">\ud83d\udd25<\/span>\n <div class=\"spirit-word\">\u70ed\u8840<\/div>\n <div class=\"spirit-en\">Passion<\/div>\n <div class=\"spirit-desc\">\u5fc3\u6000\u70ed\u7231\uff0c\u4e0d\u8d1f\u97f6\u534e\uff0c\u7528\u6fc0\u60c5\u70b9\u71c3\u751f\u547d\u7684\u6bcf\u4e00\u523b<\/div>\n <\/div>\n <div class=\"spirit-card reveal reveal-delay-1\">\n <span class=\"spirit-icon\">\ud83d\udca1<\/span>\n <div class=\"spirit-word\">\u521b\u65b0<\/div>\n <div class=\"spirit-en\">Innovation<\/div>\n <div class=\"spirit-desc\">\u6562\u60f3\u6562\u505a\uff0c\u6253\u7834\u5e38\u89c4\uff0c\u7528\u521b\u9020\u529b\u6539\u53d8\u4e16\u754c<\/div>\n <\/div>\n <div class=\"spirit-card reveal reveal-delay-2\">\n <span class=\"spirit-icon\">\u270a<\/span>\n <div class=\"spirit-word\">\u62c5\u5f53<\/div>\n <div class=\"spirit-en\">Responsibility<\/div>\n <div class=\"spirit-desc\">\u80a9\u625b\u8d23\u4efb\uff0c\u52c7\u4e8e\u627f\u62c5\uff0c\u5728\u65f6\u4ee3\u6d2a\u6d41\u4e2d\u7825\u783a\u524d\u884c<\/div>\n <\/div>\n <div class=\"spirit-card reveal reveal-delay-1\">\n <span class=\"spirit-icon\">\ud83d\udd0d<\/span>\n <div class=\"spirit-word\">\u6c42\u771f<\/div>\n <div class=\"spirit-en\">Truth-seeking<\/div>\n <div class=\"spirit-desc\">\u5d07\u5c1a\u79d1\u5b66\uff0c\u8ffd\u6c42\u771f\u7406\uff0c\u7528\u7406\u6027\u7167\u4eae\u524d\u884c\u7684\u8def<\/div>\n <\/div>\n <div class=\"spirit-card reveal reveal-delay-2\">\n <span class=\"spirit-icon\">\ud83c\udf31<\/span>\n <div class=\"spirit-word\">\u6210\u957f<\/div>\n <div class=\"spirit-en\">Growth<\/div>\n <div class=\"spirit-desc\">\u6c38\u4e0d\u6b62\u6b65\uff0c\u6301\u7eed\u7cbe\u8fdb\uff0c\u5728\u6311\u6218\u4e2d\u9047\u89c1\u66f4\u597d\u7684\u81ea\u5df1<\/div>\n <\/div>\n <div class=\"spirit-card reveal reveal-delay-3\">\n <span class=\"spirit-icon\">\ud83c\udf08<\/span>\n <div class=\"spirit-word\">\u591a\u5143<\/div>\n <div class=\"spirit-en\">Diversity<\/div>\n <div class=\"spirit-desc\">\u62e5\u62b1\u5dee\u5f02\uff0c\u517c\u5bb9\u5e76\u84c4\uff0c\u7528\u5f00\u653e\u5fc3\u6001\u62e5\u62b1\u591a\u5f69\u4e16\u754c<\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 GALLERY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"section gallery-section\" id=\"gallery\">\n <div class=\"section-header\">\n <span class=\"section-label reveal\">Image Gallery<\/span>\n <h2 class=\"section-title reveal reveal-delay-1\">\u5386\u53f2\u7684<em>\u77ac\u95f4<\/em><\/h2>\n <p class=\"section-sub reveal reveal-delay-2\">\u4ece\u65e7\u65f6\u5149\u5230\u65b0\u65f6\u4ee3\uff0c\u9752\u5e74\u529b\u91cf\u4ece\u672a\u7f3a\u5e2d<\/p>\n <\/div>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item reveal\">\n <div class=\"gallery-bg gi-1\"><\/div>\n <div class=\"gallery-overlay\">\n<img decoding=\"async\" src=\"https:\/\/www.365ycs.com\/wp-content\/uploads\/2026\/04\/lishi3.jpg\">\n <h3>\u9752\u5e74\u529b\u91cf<\/h3>\n <p>\u65b0\u65f6\u4ee3\uff0c\u65b0\u9752\u5e74<\/p>\n <\/div>\n <\/div>\n <div class=\"gallery-item reveal reveal-delay-1\">\n <div class=\"gallery-bg gi-2\"><\/div>\n <div class=\"gallery-overlay\">\n<img decoding=\"async\" src=\"https:\/\/www.365ycs.com\/wp-content\/uploads\/2026\/04\/juxingshidai2.jpg\">\n <h3>\u89c9\u9192\u5e74\u4ee3<\/h3>\n <p>\u65b0\u6587\u5316\u8fd0\u52a8\u65d7\u624b<\/p>\n <\/div>\n <\/div>\n <div class=\"gallery-item reveal reveal-delay-2\">\n <div class=\"gallery-bg gi-3\"><\/div>\n <div class=\"gallery-overlay\">\n<img decoding=\"async\" src=\"https:\/\/www.365ycs.com\/wp-content\/uploads\/2026\/04\/qingnianliliang2.jpg\">\n <h3>\u79d1\u6280\u5f3a\u56fd<\/h3>\n <p>\u822a\u5929\u4e8b\u4e1a\u4e2d\u7684\u9752\u5e74\u529b\u91cf<\/p>\n <\/div>\n <\/div>\n <div class=\"gallery-item reveal reveal-delay-1\">\n <div class=\"gallery-bg gi-4\"><\/div>\n <div class=\"gallery-overlay\">\n<img decoding=\"async\" src=\"https:\/\/www.365ycs.com\/wp-content\/uploads\/2026\/04\/guochaoxinshili2.jpg\">\n <h3>\u6587\u5316\u51fa\u6d77<\/h3>\n <p>\u56fd\u6f6e\u4e0e\u9752\u5e74\u521b\u610f<\/p>\n <\/div>\n <\/div>\n <div class=\"gallery-item reveal reveal-delay-2\">\n <div class=\"gallery-bg gi-5\"><\/div>\n <div class=\"gallery-overlay\">\n <h3>\u6570\u5b57\u65f6\u4ee3\u7684\u65b0\u9752\u5e74<\/h3>\n <p>AI \u00b7 \u4e92\u8054\u7f51 \u00b7 \u5143\u5b87\u5b99<\/p>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 QUOTES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"section quotes-section\" id=\"quotes\">\n <div class=\"section-header\">\n <span class=\"section-label reveal\">Words of Wisdom<\/span>\n <h2 class=\"section-title reveal reveal-delay-1\">\u5bc4\u8bed<em>\u9752\u5e74<\/em><\/h2>\n <p class=\"section-sub reveal reveal-delay-2\">\u767e\u5e74\u524d\u7684\u58f0\u97f3\uff0c\u81f3\u4eca\u4ecd\u632f\u804b\u53d1\u8069<\/p>\n <\/div>\n <div class=\"quotes-grid\">\n <div class=\"quote-card reveal\">\n <div class=\"quote-emoji\">\ud83d\udcdc<\/div>\n <p class=\"quote-text\">\n \u9752\u5e74\u5982\u521d\u6625\uff0c\u5982\u671d\u65e5\uff0c\u5982\u767e\u5349\u4e4b\u840c\u52a8\uff0c\u5982\u5229\u5203\u4e4b\u65b0\u53d1\u4e8e\u784e\uff0c<span class=\"highlight\">\u4eba\u751f\u6700\u53ef\u5b9d\u8d35\u4e4b\u65f6\u671f\u4e5f\u3002<\/span>\n <\/p>\n <div class=\"quote-author-row\">\n <div class=\"quote-avatar qa-1\">\u9648<\/div>\n <div>\n <div class=\"quote-author-name\">\u9648\u72ec\u79c0<\/div>\n <div class=\"quote-author-role\">\u300a\u9752\u5e74\u6742\u5fd7\u300b\u53d1\u520a\u8bcd \u00b7 1915\u5e74<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quote-card reveal reveal-delay-1\">\n <div class=\"quote-emoji\">\ud83c\udf05<\/div>\n <p class=\"quote-text\">\n \u4ee5\u9752\u6625\u4e4b\u6211\uff0c\u521b\u5efa<span class=\"highlight\">\u9752\u6625\u4e4b\u5bb6\u5ead\uff0c\u9752\u6625\u4e4b\u56fd\u5bb6\uff0c\u9752\u6625\u4e4b\u6c11\u65cf\uff0c<\/span>\u9752\u6625\u4e4b\u4eba\u7c7b\uff0c\u9752\u6625\u4e4b\u5730\u7403\uff0c\u9752\u6625\u4e4b\u5b87\u5b99\u3002\n <\/p>\n <div class=\"quote-author-row\">\n <div class=\"quote-avatar qa-2\">\u674e<\/div>\n <div>\n <div class=\"quote-author-name\">\u674e\u5927\u948a<\/div>\n <div class=\"quote-author-role\">\u300a\u9752\u6625\u300b \u00b7 1916\u5e74<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quote-card reveal reveal-delay-2\">\n <div class=\"quote-emoji\">\u2600\ufe0f<\/div>\n <p class=\"quote-text\">\n \u4e16\u754c\u662f\u4f60\u4eec\u7684\uff0c\u4e5f\u662f\u6211\u4eec\u7684\uff0c\u4f46\u662f\u5f52\u6839\u7ed3\u5e95\u662f\u4f60\u4eec\u7684\u3002<span class=\"highlight\">\u4f60\u4eec\u9752\u5e74\u4eba\u671d\u6c14\u84ec\u52c3\uff0c\u6b63\u5728\u5174\u65fa\u65f6\u671f\uff0c\u597d\u50cf\u65e9\u6668\u516b\u4e5d\u70b9\u949f\u7684\u592a\u9633\u3002<\/span>\n <\/p>\n <div class=\"quote-author-row\">\n <div class=\"quote-avatar qa-3\">\u6bdb<\/div>\n <div>\n <div class=\"quote-author-name\">\u6bdb\u6cfd\u4e1c<\/div>\n <div class=\"quote-author-role\">\u83ab\u65af\u79d1\u6f14\u8bb2 \u00b7 1957\u5e74<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"cta-section\" id=\"cta\">\n <div class=\"cta-bg\"><\/div>\n <div class=\"cta-content\">\n <h2 class=\"cta-title reveal\">\n \u4ee5\u9752\u6625\u4e4b\u6211<br>\u594b\u6597<em>\u65b0\u65f6\u4ee3<\/em>\n <\/h2>\n <p class=\"cta-sub reveal reveal-delay-1\">\n \u4e0d\u7ba1\u4f60\u8eab\u5904\u4f55\u65b9\uff0c\u4e0d\u7ba1\u4f60\u662f\u51e0\u96f6\u540e\uff0c<br>\n \u53ea\u8981\u5fc3\u4e2d\u6709\u706b\uff0c\u773c\u91cc\u6709\u5149\uff0c<strong style=\"color:white\">\u4f60\u5c31\u662f\u9752\u5e74\uff01<\/strong>\n <\/p>\n <div class=\"hero-actions reveal reveal-delay-2\" style=\"justify-content:center;\">\n <button class=\"btn btn-primary\" onclick=\"window.scrollTo({top:0,behavior:'smooth'})\">\ud83d\udd25 \u56de\u5230\u8d77\u70b9<\/button>\n <button class=\"btn btn-outline\" style=\"border-color:rgba(255,255,255,0.3);\" onclick=\"document.getElementById('spirit').scrollIntoView({behavior:'smooth'})\">\u2728 \u63a2\u7d22\u7cbe\u795e<\/button>\n <\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 FOOTER \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<footer class=\"footer\">\n <div class=\"footer-inner\">\n <div class=\"footer-brand\">\n <div class=\"footer-logo\">\u4e94\u56db \u00b7 <em>Youth<\/em><\/div>\n <div class=\"footer-tagline\">\u4ee5\u5386\u53f2\u4e4b\u5149\u7167\u4eae\u524d\u884c\u4e4b\u8def \u00b7 \u81f4\u656c\u6bcf\u4e00\u4ee3\u9752\u5e74<\/div>\n <\/div>\n <div class=\"footer-nav\">\n <div class=\"footer-nav-group\">\n <h4>\u5bfc\u822a<\/h4>\n <a href=\"#history\">\u5386\u53f2\u65f6\u95f4\u8f74<\/a>\n <a href=\"#poem\">\u7ecf\u5178\u8bd7\u6587<\/a>\n <a href=\"#spirit\">\u9752\u5e74\u7cbe\u795e<\/a>\n <\/div>\n <div class=\"footer-nav-group\">\n <h4>\u76f8\u5173<\/h4>\n <a href=\"#gallery\">\u5386\u53f2\u56fe\u96c6<\/a>\n <a href=\"#quotes\">\u540d\u4eba\u5bc4\u8bed<\/a>\n <a href=\"#cta\">\u7acb\u5373\u884c\u52a8<\/a>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <p>\u4e94\u56db\u9752\u5e74\u8282 \u00b7 May 4th Youth Day \u00b7 <em>\u81f4\u656c\u6bcf\u4e00\u4ee3\u9752\u5e74<\/em><\/p>\n <p>Made with <em>\u2665<\/em> & Code \u00b7 2026<\/p>\n <\/div>\n<\/footer>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 SCRIPTS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n \/\/ \u2500\u2500 1. PARTICLES \u2500\u2500\n (function() {\n const c = document.getElementById('heroParticles');\n const colors = ['#ff4500','#ff6b35','#ffd700','#ff8c00','#ff3366','#00c4e8'];\n for (let i = 0; i < 28; i++) {\n const p = document.createElement('div');\n p.className = 'h-particle';\n const sz = Math.random() * 4 + 2;\n const color = colors[Math.floor(Math.random() * colors.length)];\n p.style.cssText = `\n width:${sz}px;height:${sz}px;\n background:${color};\n left:${Math.random()*100}%;\n opacity:${Math.random()*0.5+0.2};\n animation-duration:${Math.random()*8+5}s;\n animation-delay:${Math.random()*8}s;\n border-radius:${Math.random()>0.5?'50%':'2px'};\n `;\n c.appendChild(p);\n }\n })();\n\n \/\/ \u2500\u2500 2. NAVBAR SCROLL \u2500\u2500\n (function() {\n const navbar = document.getElementById('navbar');\n window.addEventListener('scroll', () => {\n navbar.classList.toggle('scrolled', window.scrollY > 40);\n }, { passive: true });\n\n \/\/ Active nav link\n const sections = document.querySelectorAll('section[id]');\n const navLinks = document.querySelectorAll('.nav-links a:not(.nav-cta)');\n const obs = new IntersectionObserver((entries) => {\n entries.forEach(e => {\n if (e.isIntersecting) {\n navLinks.forEach(a => a.classList.remove('active'));\n const active = document.querySelector(`.nav-links a[href=\"#${e.target.id}\"]`);\n if (active) active.classList.add('active');\n }\n });\n }, { threshold: 0.4 });\n sections.forEach(s => obs.observe(s));\n })();\n\n \/\/ \u2500\u2500 3. TIMELINE DRAG \u2500\u2500\n (function() {\n const el = document.getElementById('timelineItems');\n let d = false, sx = 0, sl = 0;\n el.addEventListener('mousedown', e => { d=true; sx=e.pageX-el.offsetLeft; sl=el.scrollLeft; el.style.userSelect='none'; });\n ['mouseleave','mouseup'].forEach(ev => el.addEventListener(ev, () => { d=false; el.style.userSelect=''; }));\n el.addEventListener('mousemove', e => { if(!d) return; e.preventDefault(); el.scrollLeft = sl-(e.pageX-el.offsetLeft-sx)*1.8; });\n \/\/ Touch support\n el.addEventListener('touchstart', e => { sx = e.touches[0].pageX - el.offsetLeft; sl = el.scrollLeft; }, { passive: true });\n el.addEventListener('touchmove', e => { el.scrollLeft = sl - (e.touches[0].pageX - el.offsetLeft - sx) * 1.5; }, { passive: true });\n })();\n\n \/\/ \u2500\u2500 4. SCROLL REVEAL \u2500\u2500\n (function() {\n const obs = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n \/\/ Counter animation\n const numEl = entry.target.querySelector('.counter-num');\n if (numEl && !numEl.dataset.done) {\n numEl.dataset.done = '1';\n const target = parseInt(numEl.dataset.target);\n let current = 0;\n const step = target \/ 60;\n const interval = setInterval(() => {\n current = Math.min(current + step, target);\n numEl.textContent = Math.floor(current);\n if (current >= target) clearInterval(interval);\n }, 25);\n }\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' });\n document.querySelectorAll('.reveal').forEach(el => obs.observe(el));\n })();\n\n \/\/ \u2500\u2500 5. SMOOTH ANCHOR WITH OFFSET \u2500\u2500\n (function() {\n document.querySelectorAll('a[href^=\"#\"]').forEach(a => {\n a.addEventListener('click', e => {\n e.preventDefault();\n const target = document.querySelector(a.getAttribute('href'));\n if (!target) return;\n const offset = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--nav-h')) || 72;\n const top = target.getBoundingClientRect().top + window.scrollY - offset;\n window.scrollTo({ top, behavior: 'smooth' });\n });\n });\n })();\n\n \/\/ \u2500\u2500 6. MOBILE NAV \u2500\u2500\n (function() {\n const toggle = document.getElementById('navToggle');\n const links = document.getElementById('navLinks');\n toggle.addEventListener('click', () => {\n const isOpen = links.style.display === 'flex';\n links.style.display = isOpen ? 'none' : 'flex';\n links.style.flexDirection = 'column';\n links.style.position = 'fixed';\n links.style.top = '72px';\n links.style.left = '0';\n links.style.right = '0';\n links.style.background = 'rgba(255,250,245,0.98)';\n links.style.backdropFilter = 'blur(20px)';\n links.style.padding = '16px';\n links.style.gap = '4px';\n links.style.boxShadow = '0 8px 32px rgba(0,0,0,0.08)';\n links.style.borderRadius = '0 0 16px 16px';\n });\n })();\n<\/script>\n\n<\/body>\n<\/html>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u4e94\u56db\u9752\u5e74\u8282 \u00b7 \u81f4\u71c3\u70e7\u7684\u9752\u6625 \u4e94\u56db \u9752\u5e74\u8282 \u5386\u53f2 \u8bd7\u6587 \u7cbe\u795e \u56fe\u96c6 \u5bc4\u8bed \u7acb\u5373\u53c2\u4e0e 5.4 \u4e94\u56db\u9752\u5e74\u8282 \u00b7 M […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[],"class_list":["post-606","post","type-post","status-publish","format-standard","hentry","category-10"],"brizy_media":[],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/comments?post=606"}],"version-history":[{"count":28,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/606\/revisions"}],"predecessor-version":[{"id":675,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/606\/revisions\/675"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}