{"id":600,"date":"2026-05-04T02:51:00","date_gmt":"2026-05-03T18:51:00","guid":{"rendered":"https:\/\/new.365ycs.com\/?p=600"},"modified":"2026-04-24T01:47:02","modified_gmt":"2026-04-23T17:47:02","slug":"600","status":"publish","type":"post","link":"https:\/\/www.365ycs.com\/index.php\/2026\/05\/04\/600\/","title":{"rendered":"\u4e94\u56db\u9752\u5e74\u8282"},"content":{"rendered":"\n

<\/p>\n\n\n\n\n\n\n\n \n \n \u4e94\u56db\u9752\u5e74\u8282 | \u81f4 \u00b7 \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\n RESET & 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 *\/\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\n\n :root {\n --bg: #080c14;\n --bg-2: #0d1525;\n --primary: #ff4500;\n --accent: #ffd700;\n --cyan: #00d4ff;\n --text: #f0e6d3;\n --muted: #8899aa;\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 }\n\n html { scroll-behavior: smooth; }\n\n body {\n background: var(--bg);\n color: var(--text);\n font-family: var(--font-body);\n overflow-x: hidden;\n cursor: default;\n }\n\n \/* Scrollbar *\/\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: var(--bg); }\n ::-webkit-scrollbar-thumb { background: var(--primary); 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\n HERO SECTION\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 *\/\n .hero {\n position: relative;\n height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n \/* Starfield background *\/\n .hero-bg {\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at 20% 50%, rgba(255,69,0,0.08) 0%, transparent 60%),\n radial-gradient(ellipse at 80% 30%, rgba(0,212,255,0.06) 0%, transparent 50%),\n radial-gradient(ellipse at 50% 80%, rgba(255,215,0,0.04) 0%, transparent 50%);\n }\n\n \/* Particle canvas *\/\n .particles {\n position: absolute;\n inset: 0;\n pointer-events: none;\n }\n\n \/* Geometric shapes *\/\n .geo {\n position: absolute;\n opacity: 0.07;\n animation: geoFloat 8s ease-in-out infinite;\n }\n .geo-1 {\n width: 300px; height: 300px;\n border: 2px solid var(--primary);\n border-radius: 50%;\n top: 10%; left: -5%;\n animation-delay: 0s;\n }\n .geo-2 {\n width: 200px; height: 200px;\n border: 2px solid var(--accent);\n top: 60%; right: 3%;\n transform: rotate(45deg);\n animation-delay: -3s;\n }\n .geo-3 {\n width: 150px; height: 150px;\n border: 2px solid var(--cyan);\n border-radius: 50%;\n bottom: 15%; left: 15%;\n animation-delay: -5s;\n }\n .geo-4 {\n width: 100px; height: 100px;\n border: 2px solid var(--primary);\n top: 20%; right: 20%;\n animation-delay: -2s;\n }\n @keyframes geoFloat {\n 0%, 100% { transform: translateY(0) rotate(0deg); }\n 50% { transform: translateY(-20px) rotate(10deg); }\n }\n\n \/* Large 5.4 *\/\n .hero-date {\n position: absolute;\n font-family: var(--font-display);\n font-size: clamp(180px, 30vw, 380px);\n font-weight: 900;\n color: transparent;\n -webkit-text-stroke: 1px rgba(255,69,0,0.15);\n line-height: 1;\n user-select: none;\n letter-spacing: -0.05em;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 0;\n animation: dateBreath 4s ease-in-out infinite;\n }\n @keyframes dateBreath {\n 0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }\n 50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.03); }\n }\n\n \/* Hero content *\/\n .hero-content {\n position: relative;\n z-index: 2;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 24px;\n }\n\n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(255,69,0,0.12);\n border: 1px solid rgba(255,69,0,0.35);\n border-radius: 100px;\n padding: 6px 20px;\n font-size: 13px;\n color: var(--primary);\n letter-spacing: 3px;\n text-transform: uppercase;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.3s;\n }\n .hero-badge::before {\n content: '';\n width: 6px; height: 6px;\n background: var(--primary);\n border-radius: 50%;\n animation: pulse 2s ease-in-out infinite;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(0.7); }\n }\n\n .hero-title {\n font-family: var(--font-display);\n font-size: clamp(42px, 8vw, 96px);\n font-weight: 900;\n line-height: 1.1;\n color: var(--text);\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.5s;\n }\n .hero-title span {\n color: var(--primary);\n position: relative;\n }\n .hero-title span::after {\n content: '';\n position: absolute;\n bottom: -4px; left: 0; right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--primary), var(--accent));\n border-radius: 2px;\n }\n\n .hero-subtitle {\n font-size: clamp(15px, 2vw, 20px);\n color: var(--muted);\n font-weight: 300;\n letter-spacing: 6px;\n text-transform: uppercase;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.7s;\n }\n\n .hero-desc {\n max-width: 560px;\n font-size: 16px;\n color: var(--muted);\n line-height: 1.8;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 0.9s;\n }\n\n .hero-scroll {\n position: absolute;\n bottom: 40px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n opacity: 0;\n animation: fadeUp 0.8s ease forwards 1.2s;\n cursor: pointer;\n }\n .hero-scroll span {\n font-size: 11px;\n letter-spacing: 3px;\n color: var(--muted);\n text-transform: uppercase;\n }\n .scroll-line {\n width: 1px;\n height: 50px;\n background: linear-gradient(to bottom, var(--primary), transparent);\n animation: scrollDown 2s ease-in-out infinite;\n }\n @keyframes scrollDown {\n 0% { transform: scaleY(0); transform-origin: top; }\n 50% { transform: scaleY(1); transform-origin: top; }\n 51% { transform: scaleY(1); transform-origin: bottom; }\n 100% { transform: scaleY(0); transform-origin: bottom; }\n }\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(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\n SECTION UTILITIES\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 *\/\n .section {\n padding: 120px 40px;\n max-width: 1200px;\n margin: 0 auto;\n }\n .section-label {\n font-family: var(--font-en);\n font-size: 11px;\n letter-spacing: 5px;\n text-transform: uppercase;\n color: var(--primary);\n margin-bottom: 16px;\n }\n .section-title {\n font-family: var(--font-display);\n font-size: clamp(32px, 5vw, 56px);\n font-weight: 900;\n color: var(--text);\n line-height: 1.2;\n margin-bottom: 20px;\n }\n .section-title em {\n font-style: normal;\n color: var(--primary);\n }\n\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n transition: opacity 0.8s ease, transform 0.8s ease;\n }\n .reveal.visible {\n opacity: 1;\n transform: translateY(0);\n }\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\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 *\/\n .timeline-section {\n background: var(--bg-2);\n padding: 0;\n overflow: hidden;\n }\n .timeline-header {\n padding: 80px 40px 0;\n max-width: 1200px;\n margin: 0 auto;\n }\n .timeline-wrapper {\n position: relative;\n padding: 60px 0 80px;\n overflow-x: auto;\n overflow-y: hidden;\n cursor: grab;\n -webkit-overflow-scrolling: touch;\n scrollbar-width: none;\n }\n .timeline-wrapper::-webkit-scrollbar { display: none; }\n .timeline-wrapper:active { cursor: grabbing; }\n\n .timeline {\n display: flex;\n gap: 0;\n min-width: max-content;\n padding: 0 60px;\n position: relative;\n }\n .timeline::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 60px; right: 60px;\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,69,0,0.4), rgba(0,212,255,0.4), transparent);\n }\n\n .tl-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n min-width: 220px;\n }\n .tl-item:nth-child(even) { flex-direction: column-reverse; }\n\n .tl-year {\n font-family: var(--font-en);\n font-size: 48px;\n font-weight: 800;\n color: transparent;\n -webkit-text-stroke: 1px var(--primary);\n line-height: 1;\n margin: 20px 0;\n transition: color 0.3s, text-shadow 0.3s;\n }\n .tl-item:hover .tl-year {\n color: var(--primary);\n text-shadow: 0 0 30px rgba(255,69,0,0.5);\n }\n\n .tl-dot {\n width: 14px; height: 14px;\n border-radius: 50%;\n background: var(--bg);\n border: 2px solid var(--primary);\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(--primary);\n box-shadow: 0 0 20px rgba(255,69,0,0.6);\n transform: scale(1.3);\n }\n\n .tl-text {\n padding: 16px 24px;\n text-align: center;\n }\n .tl-text h3 {\n font-family: var(--font-display);\n font-size: 20px;\n color: var(--text);\n margin-bottom: 8px;\n }\n .tl-text p {\n font-size: 13px;\n color: var(--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\n POEM SECTION\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 *\/\n .poem-section {\n background: var(--bg);\n position: relative;\n overflow: hidden;\n }\n .poem-section::before {\n content: '\"';\n position: absolute;\n top: -40px; left: 40px;\n font-family: var(--font-display);\n font-size: 400px;\n color: rgba(255,69,0,0.04);\n line-height: 1;\n pointer-events: none;\n }\n .poem-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 40px;\n margin-top: 60px;\n }\n .poem-card {\n background: var(--bg-2);\n border: 1px solid rgba(255,255,255,0.06);\n border-radius: 4px;\n padding: 48px 40px;\n position: relative;\n overflow: hidden;\n transition: border-color 0.3s, transform 0.3s;\n }\n .poem-card:hover {\n border-color: rgba(255,69,0,0.3);\n transform: translateY(-4px);\n }\n .poem-card::before {\n content: '';\n position: absolute;\n top: 0; left: 0; right: 0;\n height: 3px;\n background: linear-gradient(90deg, var(--primary), transparent);\n }\n .poem-era {\n font-family: var(--font-en);\n font-size: 11px;\n color: var(--primary);\n letter-spacing: 3px;\n text-transform: uppercase;\n margin-bottom: 20px;\n }\n .poem-title {\n font-family: var(--font-display);\n font-size: 28px;\n color: var(--text);\n margin-bottom: 8px;\n }\n .poem-author {\n font-size: 13px;\n color: var(--muted);\n margin-bottom: 28px;\n }\n .poem-body {\n font-size: 18px;\n color: var(--text);\n line-height: 2;\n font-weight: 300;\n }\n .poem-body p { margin-bottom: 8px; }\n .poem-highlight {\n color: var(--accent);\n font-weight: 400;\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\n SPIRIT SECTION\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 *\/\n .spirit-section {\n background: var(--bg-2);\n text-align: center;\n padding: 120px 40px;\n }\n .spirit-intro {\n font-size: 18px;\n color: var(--muted);\n max-width: 600px;\n margin: 0 auto 60px;\n line-height: 1.8;\n }\n .spirit-grid {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 24px;\n max-width: 900px;\n margin: 0 auto;\n }\n .spirit-word {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n padding: 28px 36px;\n background: rgba(255,255,255,0.03);\n border: 1px solid rgba(255,255,255,0.06);\n border-radius: 8px;\n cursor: default;\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n animation: floatWord 6s ease-in-out infinite;\n min-width: 140px;\n }\n .spirit-word:nth-child(2) { animation-delay: -1s; }\n .spirit-word:nth-child(3) { animation-delay: -2s; }\n .spirit-word:nth-child(4) { animation-delay: -3s; }\n .spirit-word:nth-child(5) { animation-delay: -0.5s; }\n .spirit-word:nth-child(6) { animation-delay: -1.5s; }\n @keyframes floatWord {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-8px); }\n }\n .spirit-word:hover {\n border-color: var(--primary);\n background: rgba(255,69,0,0.06);\n transform: translateY(-12px) scale(1.05);\n animation-play-state: paused;\n }\n .spirit-icon {\n width: 40px; height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n }\n .spirit-label {\n font-family: var(--font-display);\n font-size: 22px;\n color: var(--text);\n }\n .spirit-desc {\n font-size: 12px;\n color: var(--muted);\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\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 *\/\n .gallery-section { background: var(--bg); }\n .gallery-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n grid-template-rows: 300px 300px;\n gap: 16px;\n margin-top: 60px;\n }\n .gallery-item {\n border-radius: 6px;\n overflow: hidden;\n position: relative;\n cursor: pointer;\n }\n .gallery-item:nth-child(1) {\n grid-column: span 2;\n background: linear-gradient(135deg, #1a0500, #3d1500);\n }\n .gallery-item:nth-child(2) {\n background: linear-gradient(135deg, #001a2e, #003366);\n }\n .gallery-item:nth-child(3) {\n background: linear-gradient(135deg, #1a1a00, #333300);\n }\n .gallery-item:nth-child(4) {\n background: linear-gradient(135deg, #2d001a, #550033);\n }\n .gallery-item:nth-child(5) {\n grid-column: span 2;\n background: linear-gradient(135deg, #001a1a, #003333);\n }\n .gallery-item::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);\n }\n .gallery-label {\n position: absolute;\n bottom: 20px; left: 20px;\n z-index: 1;\n }\n .gallery-label h3 {\n font-family: var(--font-display);\n font-size: 20px;\n color: var(--text);\n }\n .gallery-label p {\n font-size: 12px;\n color: var(--muted);\n margin-top: 4px;\n }\n .gallery-item:hover {\n transform: scale(1.02);\n transition: transform 0.4s ease;\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\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 *\/\n .quotes-section {\n background: var(--bg-2);\n text-align: center;\n }\n .quotes-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: 24px;\n margin-top: 60px;\n max-width: 1100px;\n margin-left: auto;\n margin-right: auto;\n }\n .quote-card {\n background: rgba(255,255,255,0.02);\n border: 1px solid rgba(255,255,255,0.06);\n border-radius: 12px;\n padding: 36px 32px;\n text-align: left;\n position: relative;\n cursor: default;\n transition: all 0.4s ease;\n perspective: 800px;\n }\n .quote-card:hover {\n border-color: rgba(255,69,0,0.3);\n transform: translateY(-6px);\n box-shadow: 0 20px 60px rgba(0,0,0,0.3), 0 0 40px rgba(255,69,0,0.06);\n }\n .quote-mark {\n font-family: Georgia, serif;\n font-size: 80px;\n color: rgba(255,69,0,0.15);\n line-height: 1;\n position: absolute;\n top: 10px; left: 20px;\n }\n .quote-text {\n font-size: 16px;\n color: var(--text);\n line-height: 1.8;\n margin-bottom: 20px;\n font-weight: 300;\n position: relative;\n z-index: 1;\n }\n .quote-author {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n .quote-avatar {\n width: 36px; height: 36px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 18px;\n flex-shrink: 0;\n }\n .quote-author-info .name {\n font-size: 14px;\n color: var(--text);\n font-weight: 700;\n }\n .quote-author-info .role {\n font-size: 12px;\n color: var(--muted);\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\n CTA BANNER\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 *\/\n .cta-section {\n background: var(--bg);\n text-align: center;\n padding: 100px 40px;\n position: relative;\n overflow: hidden;\n }\n .cta-section::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at 50% 100%, rgba(255,69,0,0.12) 0%, transparent 60%);\n }\n .cta-title {\n font-family: var(--font-display);\n font-size: clamp(36px, 6vw, 72px);\n font-weight: 900;\n color: var(--text);\n line-height: 1.2;\n position: relative;\n }\n .cta-title em {\n font-style: normal;\n color: var(--primary);\n }\n .cta-sub {\n font-size: 16px;\n color: var(--muted);\n margin: 20px auto 40px;\n line-height: 1.8;\n max-width: 480px;\n }\n .cta-buttons {\n display: flex;\n gap: 16px;\n justify-content: center;\n flex-wrap: wrap;\n position: relative;\n }\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 36px;\n border-radius: 100px;\n font-size: 15px;\n font-weight: 700;\n cursor: pointer;\n transition: all 0.3s ease;\n border: none;\n font-family: var(--font-body);\n }\n .btn-primary {\n background: var(--primary);\n color: #fff;\n }\n .btn-primary:hover {\n background: #ff6030;\n transform: translateY(-2px);\n box-shadow: 0 10px 40px rgba(255,69,0,0.3);\n }\n .btn-outline {\n background: transparent;\n color: var(--text);\n border: 1px solid rgba(255,255,255,0.2);\n }\n .btn-outline:hover {\n border-color: var(--primary);\n color: var(--primary);\n transform: translateY(-2px);\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\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 *\/\n .footer {\n background: var(--bg-2);\n border-top: 1px solid rgba(255,255,255,0.05);\n padding: 60px 40px 40px;\n }\n .footer-inner {\n max-width: 1200px;\n margin: 0 auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 24px;\n }\n .footer-brand {\n display: flex;\n flex-direction: column;\n gap: 8px;\n }\n .footer-logo {\n font-family: var(--font-display);\n font-size: 24px;\n color: var(--text);\n }\n .footer-logo em { color: var(--primary); font-style: normal; }\n .footer-tagline {\n font-size: 13px;\n color: var(--muted);\n }\n .footer-links {\n display: flex;\n gap: 24px;\n flex-wrap: wrap;\n }\n .footer-links a {\n font-size: 13px;\n color: var(--muted);\n text-decoration: none;\n transition: color 0.3s;\n }\n .footer-links a:hover { color: var(--primary); }\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.04);\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: var(--muted);\n }\n .footer-bottom p em {\n color: var(--primary);\n font-style: normal;\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\n PARTICLES JS CANVAS (manual draw)\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 *\/\n .particle {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n animation: particleFade linear infinite;\n }\n @keyframes particleFade {\n 0% { opacity: 0; transform: translateY(0) scale(0); }\n 10% { opacity: 1; transform: translateY(0) scale(1); }\n 90% { opacity: 1; }\n 100% { opacity: 0; transform: translateY(-100vh) scale(0.5); }\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\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 *\/\n @media (max-width: 768px) {\n .section { padding: 80px 24px; }\n .poem-grid { grid-template-columns: 1fr; }\n .gallery-grid {\n grid-template-columns: 1fr;\n grid-template-rows: auto;\n }\n .gallery-item:nth-child(1),\n .gallery-item:nth-child(5) { grid-column: span 1; }\n .hero-date { font-size: 180px; -webkit-text-stroke: 1px rgba(255,69,0,0.1); }\n .footer-inner { flex-direction: column; align-items: flex-start; }\n .footer-bottom { flex-direction: column; align-items: flex-start; }\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\u2550\u2550\u2550 HERO \u2550\u2550\u2550\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-bg\"><\/div>\n <div class=\"particles\" id=\"particles\"><\/div>\n <div class=\"geo geo-1\"><\/div>\n <div class=\"geo geo-2\"><\/div>\n <div class=\"geo geo-3\"><\/div>\n <div class=\"geo geo-4\"><\/div>\n <div class=\"hero-date\">5.4<\/div>\n\n <div class=\"hero-content\">\n <div class=\"hero-badge\">\u4e94\u56db\u9752\u5e74\u8282 \u00b7 May 4th Youth Day<\/div>\n <h1 class=\"hero-title\">\u81f4 \u00b7 <span>\u71c3\u70e7<\/span>\u7684\u9752\u6625<\/h1>\n <p class=\"hero-subtitle\">Youth, Passion & The Future<\/p>\n <p class=\"hero-desc\">\n \u4e00\u767e\u96f6\u516d\u5e74\u524d\uff0c\u4e94\u56db\u8fd0\u52a8\u70b9\u71c3\u4e86\u4e00\u4ee3\u9752\u5e74\u7684\u70ed\u8840\u3002<br>\n \u4eca\u5929\uff0c\u6211\u4eec\u4ee5\u4ee3\u7801\u548c\u521b\u610f\uff0c\u8ba9\u9752\u6625\u7684\u5149\u8292\u7ee7\u7eed\u95ea\u8000\u3002\n <\/p>\n <\/div>\n\n <div class=\"hero-scroll\" onclick=\"document.getElementById('timeline').scrollIntoView({behavior:'smooth'})\">\n <span>\u5411\u4e0b\u63a2\u7d22<\/span>\n <div class=\"scroll-line\"><\/div>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\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\u2550\u2550\u2550 -->\n<section class=\"timeline-section\" id=\"timeline\">\n <div class=\"timeline-header\">\n <p class=\"section-label reveal\">Historical Timeline<\/p>\n <h2 class=\"section-title reveal\">\u767e\u5e74<em>\u4e94\u56db<\/em>\uff0c\u7cbe\u795e\u6c38\u7eed<\/h2>\n <\/div>\n <div class=\"timeline-wrapper\" id=\"timelineWrapper\">\n <div class=\"timeline\">\n <div class=\"tl-item\">\n <div class=\"tl-text\">\n <h3>\u65b0\u6587\u5316\u8fd0\u52a8<\/h3>\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 class=\"tl-dot\"><\/div>\n <div class=\"tl-year\">1915<\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-year\">1919<\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-text\">\n <h3>\u4e94\u56db\u8fd0\u52a8\u7206\u53d1<\/h3>\n <p>\u5317\u4eac\u5b66\u751f\u8d70\u4e0a\u8857\u5934\uff0c\u6297\u8bae\u5df4\u9ece\u548c\u7ea6\uff0c\u6380\u8d77\u4e86\u53cd\u5e1d\u53cd\u5c01\u5efa\u7684\u6d6a\u6f6e<\/p>\n <\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-text\">\n <h3>\u5de5\u4eba\u9636\u7ea7\u767b\u573a<\/h3>\n <p>\u4e0a\u6d77\u5de5\u4eba\u58f0\u63f4\u5b66\u751f\uff0c\u5de5\u4eba\u9636\u7ea7\u4f5c\u4e3a\u72ec\u7acb\u529b\u91cf\u767b\u4e0a\u5386\u53f2\u821e\u53f0<\/p>\n <\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-year\">1921<\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-year\">1935<\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-text\">\n <h3>\u4e00\u4e8c\u00b7\u4e5d\u8fd0\u52a8<\/h3>\n <p>\u5317\u5e73\u5b66\u751f\u518d\u6b21\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-text\">\n <h3>\u65b0\u4e2d\u56fd\u6210\u7acb<\/h3>\n <p>\u9752\u5e74\u4e00\u4ee3\u6295\u8eab\u5efa\u8bbe\uff0c\u65b0\u4e2d\u56fd\u5404\u884c\u5404\u4e1a\u6d8c\u73b0\u9752\u5e74\u699c\u6837<\/p>\n <\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-year\">1949<\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-year\">1977<\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-text\">\n <h3>\u6062\u590d\u9ad8\u8003<\/h3>\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-text\">\n <h3>\u4e92\u8054\u7f51\u65f6\u4ee3<\/h3>\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 class=\"tl-dot\"><\/div>\n <div class=\"tl-year\">1994<\/div>\n <\/div>\n <div class=\"tl-item\">\n <div class=\"tl-year\">2020+<\/div>\n <div class=\"tl-dot\"><\/div>\n <div class=\"tl-text\">\n <h3>\u65b0\u65f6\u4ee3\u7684\u9752\u5e74<\/h3>\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<\/section>\n\n<!-- \u2550\u2550\u2550\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\u2550\u2550\u2550 -->\n<section class=\"section poem-section\">\n <p class=\"section-label reveal\">Classical Poetry<\/p>\n <h2 class=\"section-title reveal\">\u4ee5\u8bd7\u8a00\u5fd7\uff0c<em>\u9752\u6625<\/em>\u4e0d\u673d<\/h2>\n <div class=\"poem-grid\">\n <div class=\"poem-card reveal reveal-delay-1\">\n <p class=\"poem-era\">\u6bdb\u6cfd\u4e1c \u00b7 1929\u5e74<\/p>\n <h3 class=\"poem-title\">\u300a\u4e03\u5f8b\u00b7\u957f\u5f81\u300b\u8282\u9009<\/h3>\n <p class=\"poem-author\">\u6bdb\u6cfd\u4e1c<\/p>\n <div class=\"poem-body\">\n <p>\u7ea2\u519b\u4e0d\u6015\u8fdc\u5f81\u96be\uff0c<br>\u4e07\u6c34\u5343\u5c71\u53ea\u7b49\u95f2\u3002<\/p>\n <p><span class=\"poem-highlight\">\u4e94\u5cad\u9036\u8fe4\u817e\u7ec6\u6d6a\uff0c<br>\u4e4c\u8499\u78c5\u7934\u8d70\u6ce5\u4e38\u3002<\/span><\/p>\n <p>\u91d1\u6c99\u6c34\u62cd\u4e91\u5d16\u6696\uff0c<br>\u5927\u6e21\u6865\u6a2a\u94c1\u7d22\u5bd2\u3002<\/p>\n <p>\u66f4\u559c\u5cb7\u5c71\u5343\u91cc\u96ea\uff0c<br>\u4e09\u519b\u8fc7\u540e\u5c3d\u5f00\u989c\u3002<\/p>\n <\/div>\n <\/div>\n <div class=\"poem-card reveal reveal-delay-2\">\n <p class=\"poem-era\">\u674e\u5927\u948a \u00b7 1916\u5e74<\/p>\n <h3 class=\"poem-title\">\u300a\u9752\u6625\u300b\uff08\u8282\u9009\uff09<\/h3>\n <p class=\"poem-author\">\u674e\u5927\u948a<\/p>\n <div class=\"poem-body\">\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<br>\u60df\u77e5\u672c\u5176\u81ea\u7531\u4e4b\u7cbe\u795e\uff0c<br>\u5947\u50fb\u4e4b\u601d\u60f3\uff0c<br>\u9510\u654f\u4e4b\u76f4\u89c9\uff0c<br>\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\u2550\u2550\u2550 SPIRIT \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"spirit-section\" id=\"spirit\">\n <p class=\"section-label reveal\">Core Values<\/p>\n <h2 class=\"section-title reveal\">\u9752\u5e74\u7cbe\u795e\u7684<em>\u516d\u4e2a\u7ef4\u5ea6<\/em><\/h2>\n <p class=\"spirit-intro reveal reveal-delay-1\">\n \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\u3002<br>\n \u8fd9\u4e9b\u5173\u952e\u8bcd\uff0c\u5b9a\u4e49\u4e86\u5c5e\u4e8e\u8fd9\u4e2a\u65f6\u4ee3\u7684\u9752\u5e74\u3002\n <\/p>\n <div class=\"spirit-grid\">\n <div class=\"spirit-word reveal reveal-delay-1\">\n <div class=\"spirit-icon\">\ud83d\udd25<\/div>\n <div class=\"spirit-label\">\u70ed\u8840<\/div>\n <div class=\"spirit-desc\">Passion<\/div>\n <\/div>\n <div class=\"spirit-word reveal reveal-delay-2\">\n <div class=\"spirit-icon\">\ud83d\udca1<\/div>\n <div class=\"spirit-label\">\u521b\u65b0<\/div>\n <div class=\"spirit-desc\">Innovation<\/div>\n <\/div>\n <div class=\"spirit-word reveal reveal-delay-3\">\n <div class=\"spirit-icon\">\u270a<\/div>\n <div class=\"spirit-label\">\u62c5\u5f53<\/div>\n <div class=\"spirit-desc\">Responsibility<\/div>\n <\/div>\n <div class=\"spirit-word reveal reveal-delay-1\">\n <div class=\"spirit-icon\">\ud83d\udd0d<\/div>\n <div class=\"spirit-label\">\u6c42\u771f<\/div>\n <div class=\"spirit-desc\">Truth-seeking<\/div>\n <\/div>\n <div class=\"spirit-word reveal reveal-delay-2\">\n <div class=\"spirit-icon\">\ud83c\udf31<\/div>\n <div class=\"spirit-label\">\u6210\u957f<\/div>\n <div class=\"spirit-desc\">Growth<\/div>\n <\/div>\n <div class=\"spirit-word reveal reveal-delay-3\">\n <div class=\"spirit-icon\">\ud83c\udf08<\/div>\n <div class=\"spirit-label\">\u591a\u5143<\/div>\n <div class=\"spirit-desc\">Diversity<\/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\u2550\u2550\u2550 GALLERY \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"section gallery-section\">\n <p class=\"section-label reveal\">Image Gallery<\/p>\n <h2 class=\"section-title reveal\">\u5386\u53f2\u7684<em>\u77ac\u95f4<\/em><\/h2>\n <div class=\"gallery-grid\">\n <div class=\"gallery-item reveal\">\n <div class=\"gallery-label\">\n <h3>1919\u5e74\u00b7\u5929\u5b89\u95e8\u5e7f\u573a<\/h3>\n <p>\u4e94\u56db\u8fd0\u52a8\u7206\u53d1\u00b7\u5317\u4eac<\/p>\n <\/div>\n <\/div>\n <div class=\"gallery-item reveal reveal-delay-1\">\n <div class=\"gallery-label\">\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-label\">\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-label\">\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-label\">\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\u2550\u2550\u2550 QUOTES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"section quotes-section\">\n <p class=\"section-label reveal\">Words of Wisdom<\/p>\n <h2 class=\"section-title reveal\">\u5bc4\u8bed<em>\u9752\u5e74<\/em><\/h2>\n <div class=\"quotes-grid\">\n <div class=\"quote-card reveal reveal-delay-1\">\n <div class=\"quote-mark\">\"<\/div>\n <p class=\"quote-text\">\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\u4eba\u751f\u6700\u53ef\u5b9d\u8d35\u4e4b\u65f6\u671f\u4e5f\u3002<\/p>\n <div class=\"quote-author\">\n <div class=\"quote-avatar\" style=\"background: rgba(255,69,0,0.15);\">\u9648<\/div>\n <div class=\"quote-author-info\">\n <div class=\"name\">\u9648\u72ec\u79c0<\/div>\n <div class=\"role\">\u300a\u9752\u5e74\u6742\u5fd7\u300b\u53d1\u520a\u8bcd \u00b7 1915<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quote-card reveal reveal-delay-2\">\n <div class=\"quote-mark\">\"<\/div>\n <p class=\"quote-text\">\u4ee5\u9752\u6625\u4e4b\u6211\uff0c\u521b\u5efa\u9752\u6625\u4e4b\u5bb6\u5ead\uff0c\u9752\u6625\u4e4b\u56fd\u5bb6\uff0c\u9752\u6625\u4e4b\u6c11\u65cf\uff0c\u9752\u6625\u4e4b\u4eba\u7c7b\uff0c\u9752\u6625\u4e4b\u5730\u7403\uff0c\u9752\u6625\u4e4b\u5b87\u5b99\u3002<\/p>\n <div class=\"quote-author\">\n <div class=\"quote-avatar\" style=\"background: rgba(0,212,255,0.15);\">\u674e<\/div>\n <div class=\"quote-author-info\">\n <div class=\"name\">\u674e\u5927\u948a<\/div>\n <div class=\"role\">\u300a\u9752\u6625\u300b \u00b7 1916<\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"quote-card reveal reveal-delay-3\">\n <div class=\"quote-mark\">\"<\/div>\n <p class=\"quote-text\">\u4e16\u754c\u662f\u4f60\u4eec\u7684\uff0c\u4e5f\u662f\u6211\u4eec\u7684\uff0c\u4f46\u662f\u5f52\u6839\u7ed3\u5e95\u662f\u4f60\u4eec\u7684\u3002\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<\/p>\n <div class=\"quote-author\">\n <div class=\"quote-avatar\" style=\"background: rgba(255,215,0,0.15);\">\u6bdb<\/div>\n <div class=\"quote-author-info\">\n <div class=\"name\">\u6bdb\u6cfd\u4e1c<\/div>\n <div class=\"role\">\u83ab\u65af\u79d1\u6f14\u8bb2 \u00b7 1957<\/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\u2550\u2550\u2550 CTA \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"cta-section\">\n <h2 class=\"cta-title reveal\">\u4ee5\u9752\u6625\u4e4b\u6211<br>\u594b\u6597<em>\u65b0\u65f6\u4ee3<\/em><\/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\u4f60\u5c31\u662f\u9752\u5e74\uff01\n <\/p>\n <div class=\"cta-buttons reveal reveal-delay-2\">\n <button class=\"btn btn-primary\" onclick=\"window.scrollTo({top:0,behavior:'smooth'})\">\n \ud83d\udd25 \u56de\u5230\u8d77\u70b9\n <\/button>\n <button class=\"btn btn-outline\" onclick=\"document.getElementById('spirit').scrollIntoView({behavior:'smooth'})\">\n \u2728 \u63a2\u7d22\u7cbe\u795e\n <\/button>\n <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\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\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<\/div>\n <\/div>\n <div class=\"footer-links\">\n <a href=\"#hero\">\u56de\u5230\u9876\u90e8<\/a>\n <a href=\"#timeline\">\u5386\u53f2\u65f6\u95f4\u8f74<\/a>\n <a href=\"#spirit\">\u9752\u5e74\u7cbe\u795e<\/a>\n <a href=\"#\">\u4e86\u89e3\u66f4\u591a<\/a>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <p>\u4e94\u56db\u9752\u5e74\u8282 \u00b7 May 4th Youth Day \u00b7 \u81f4\u656c\u6bcf\u4e00\u4ee3\u9752\u5e74<\/p>\n <p>Made with <em>\u2665<\/em> & Code<\/p>\n <\/div>\n<\/footer>\n\n<!-- \u2550\u2550\u2550\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\u2550\u2550\u2550 -->\n<script>\n \/\/ \u2500\u2500 Particle Generator \u2500\u2500\n (function() {\n const container = document.getElementById('particles');\n const colors = ['#ff4500', '#ffd700', '#00d4ff', '#ff6b35'];\n for (let i = 0; i < 30; i++) {\n const p = document.createElement('div');\n p.className = 'particle';\n const size = Math.random() * 3 + 1;\n const color = colors[Math.floor(Math.random() * colors.length)];\n p.style.cssText = `\n width: ${size}px;\n height: ${size}px;\n background: ${color};\n left: ${Math.random() * 100}%;\n bottom: ${Math.random() * 30}%;\n animation-duration: ${Math.random() * 6 + 4}s;\n animation-delay: ${Math.random() * 6}s;\n opacity: ${Math.random() * 0.6 + 0.2};\n `;\n container.appendChild(p);\n }\n })();\n\n \/\/ \u2500\u2500 Timeline Drag Scroll \u2500\u2500\n (function() {\n const wrapper = document.getElementById('timelineWrapper');\n let isDown = false, startX = 0, scrollLeft = 0;\n wrapper.addEventListener('mousedown', e => {\n isDown = true;\n wrapper.style.userSelect = 'none';\n startX = e.pageX - wrapper.offsetLeft;\n scrollLeft = wrapper.scrollLeft;\n });\n wrapper.addEventListener('mouseleave', () => { isDown = false; wrapper.style.userSelect = ''; });\n wrapper.addEventListener('mouseup', () => { isDown = false; wrapper.style.userSelect = ''; });\n wrapper.addEventListener('mousemove', e => {\n if (!isDown) return;\n e.preventDefault();\n const x = e.pageX - wrapper.offsetLeft;\n wrapper.scrollLeft = scrollLeft - (x - startX) * 1.5;\n });\n })();\n\n \/\/ \u2500\u2500 Scroll Reveal \u2500\u2500\n (function() {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n document.querySelectorAll('.reveal').forEach(el => observer.observe(el));\n })();\n<\/script>\n\n<\/body>\n<\/html>\n\n<div class=\"brz-root__container\"><\/div>","protected":false},"excerpt":{"rendered":"\u4e94\u56db\u9752\u5e74\u8282 | \u81f4 \u00b7 \u71c3\u70e7\u7684\u9752\u6625 5.4 \u4e94\u56db\u9752\u5e74\u8282 \u00b7 May 4th Youth Day \u81f4 \u00b7 \u71c3\u70e7\u7684 […]","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-600","post","type-post","status-publish","format-standard","hentry","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/600","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=600"}],"version-history":[{"count":6,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/600\/revisions"}],"predecessor-version":[{"id":1066,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/600\/revisions\/1066"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=600"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=600"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=600"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}