{"id":1068,"date":"2026-05-04T21:09:03","date_gmt":"2026-05-04T13:09:03","guid":{"rendered":"https:\/\/www.365ycs.com\/?p=1068"},"modified":"2026-05-04T21:09:16","modified_gmt":"2026-05-04T13:09:16","slug":"%e4%ba%94%e5%9b%9b","status":"publish","type":"post","link":"https:\/\/www.365ycs.com\/index.php\/2026\/05\/04\/%e4%ba%94%e5%9b%9b\/","title":{"rendered":"\u4e94\u56db"},"content":{"rendered":"\n\n\n\n\n\n\n\u4e94\u56db \u00b7 \u9752\u5e74\u767e\u5e74<\/title>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+SC:wght@400;700;900&family=ZCOOL+KuaiLe&family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=Noto+Sans+SC:wght@300;400;700;900&family=ZCOOL+QingKe+HuangYou&family=Liu+Jian+Mao+Cao&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 { margin: 0; padding: 0; box-sizing: border-box; }\n\n:root {\n --era-color-1: #2c1810;\n --era-color-2: #d4a574;\n --era-accent: #c0392b;\n --transition-speed: 0.8s;\n}\n\nhtml {\n scroll-behavior: smooth;\n scrollbar-width: thin;\n scrollbar-color: rgba(255,255,255,0.3) transparent;\n}\n\nbody {\n background: #0a0a0a;\n color: #e0e0e0;\n font-family: 'Noto Sans SC', sans-serif;\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n}\n\n\/* Custom scrollbar *\/\n::-webkit-scrollbar { width: 6px; }\n::-webkit-scrollbar-track { background: transparent; }\n::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); 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 LOADING SCREEN\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.loading-screen {\n position: fixed;\n inset: 0;\n z-index: 9999;\n background: #0a0a0a;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n transition: opacity 0.8s ease, visibility 0.8s ease;\n}\n\n.loading-screen.hidden {\n opacity: 0;\n visibility: hidden;\n pointer-events: none;\n}\n\n.loading-char {\n font-family: 'Ma Shan Zheng', cursive;\n font-size: clamp(4rem, 12vw, 10rem);\n color: transparent;\n background: linear-gradient(135deg, #c0392b, #e74c3c, #f39c12);\n -webkit-background-clip: text;\n background-clip: text;\n animation: loadPulse 1.5s ease-in-out infinite;\n}\n\n.loading-text {\n margin-top: 1rem;\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 1rem;\n color: rgba(255,255,255,0.4);\n letter-spacing: 0.5em;\n}\n\n@keyframes loadPulse {\n 0%, 100% { opacity: 0.6; transform: scale(1); }\n 50% { opacity: 1; transform: scale(1.02); }\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 NAVIGATION - ERA INDICATOR\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.era-nav {\n position: fixed;\n right: 1.5rem;\n top: 50%;\n transform: translateY(-50%);\n z-index: 100;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n opacity: 0;\n transition: opacity 0.5s ease;\n}\n\n.era-nav.visible { opacity: 1; }\n\n.era-dot {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: 1.5px solid rgba(255,255,255,0.4);\n background: transparent;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n}\n\n.era-dot.active {\n background: #fff;\n border-color: #fff;\n transform: scale(1.4);\n box-shadow: 0 0 12px rgba(255,255,255,0.5);\n}\n\n.era-dot:hover {\n border-color: #fff;\n transform: scale(1.2);\n}\n\n.era-dot .era-label {\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n white-space: nowrap;\n font-size: 0.7rem;\n color: rgba(255,255,255,0.6);\n opacity: 0;\n transition: opacity 0.3s ease;\n pointer-events: none;\n font-family: 'ZCOOL XiaoWei', serif;\n}\n\n.era-dot:hover .era-label { opacity: 1; }\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 COMMON\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.era-section {\n min-height: 100vh;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n overflow: hidden;\n}\n\n.era-content {\n max-width: 900px;\n width: 100%;\n position: relative;\n z-index: 2;\n}\n\n.era-year {\n font-size: clamp(5rem, 15vw, 12rem);\n font-weight: 900;\n line-height: 1;\n opacity: 0;\n transform: translateY(60px);\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n.era-section.visible .era-year {\n opacity: 1;\n transform: translateY(0);\n}\n\n.era-subtitle {\n font-size: clamp(1rem, 3vw, 1.6rem);\n margin-top: 0.5rem;\n opacity: 0;\n transform: translateY(40px);\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;\n}\n\n.era-section.visible .era-subtitle {\n opacity: 1;\n transform: translateY(0);\n}\n\n.era-body {\n margin-top: 2.5rem;\n font-size: clamp(0.95rem, 2vw, 1.15rem);\n line-height: 2;\n opacity: 0;\n transform: translateY(40px);\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;\n}\n\n.era-section.visible .era-body {\n opacity: 1;\n transform: translateY(0);\n}\n\n.era-quote {\n margin-top: 2rem;\n padding: 1.5rem 2rem;\n border-left: 3px solid;\n font-style: italic;\n font-size: clamp(1rem, 2.5vw, 1.3rem);\n opacity: 0;\n transform: translateX(-30px);\n transition: all 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;\n}\n\n.era-section.visible .era-quote {\n opacity: 1;\n transform: translateX(0);\n}\n\n.era-decoration {\n position: absolute;\n pointer-events: none;\n opacity: 0.06;\n font-size: clamp(15rem, 40vw, 30rem);\n font-weight: 900;\n line-height: 1;\n z-index: 1;\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 ERA 1: 1919 - \u4e94\u56db\u8fd0\u52a8 (\u65e7\u62a5\u7eb8\u98ce)\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.era-1919 {\n background: linear-gradient(180deg, #1a1008 0%, #2c1810 40%, #1a1008 100%);\n color: #d4a574;\n}\n\n.era-1919::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(180,150,100,0.04) 28px, rgba(180,150,100,0.04) 29px),\n repeating-linear-gradient(90deg, transparent, transparent 28px, rgba(180,150,100,0.03) 28px, rgba(180,150,100,0.03) 29px);\n z-index: 1;\n}\n\n.era-1919::after {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(ellipse at 30% 50%, rgba(212,165,116,0.08) 0%, transparent 60%);\n z-index: 1;\n}\n\n.era-1919 .era-year {\n font-family: 'Ma Shan Zheng', cursive;\n color: transparent;\n background: linear-gradient(180deg, #d4a574, #a67c52);\n -webkit-background-clip: text;\n background-clip: text;\n text-shadow: none;\n}\n\n.era-1919 .era-subtitle {\n font-family: 'Noto Serif SC', serif;\n color: #c9a06c;\n letter-spacing: 0.3em;\n}\n\n.era-1919 .era-body {\n font-family: 'Noto Serif SC', serif;\n color: #b8956a;\n}\n\n.era-1919 .era-quote {\n border-color: #c0392b;\n color: #e8c89e;\n font-family: 'Noto Serif SC', serif;\n}\n\n.era-1919 .era-decoration {\n right: -5%;\n top: 10%;\n color: #d4a574;\n font-family: 'Ma Shan Zheng', cursive;\n}\n\n\/* Ink splash decoration *\/\n.ink-splash {\n position: absolute;\n width: 300px;\n height: 300px;\n border-radius: 50%;\n background: radial-gradient(circle, rgba(192,57,43,0.15) 0%, transparent 70%);\n filter: blur(40px);\n z-index: 1;\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 ERA 2: 1937 - \u6297\u6218\u70fd\u706b (\u6218\u65f6\u5ba3\u4f20\u753b\u98ce)\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.era-1937 {\n background: #0d0d0d;\n color: #e0e0e0;\n}\n\n.era-1937::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at 70% 30%, rgba(192,57,43,0.12) 0%, transparent 50%),\n radial-gradient(ellipse at 20% 80%, rgba(192,57,43,0.06) 0%, transparent 40%);\n z-index: 1;\n}\n\n.era-1937 .era-year {\n font-family: 'Noto Sans SC', sans-serif;\n color: transparent;\n background: linear-gradient(180deg, #e74c3c, #c0392b, #7b241c);\n -webkit-background-clip: text;\n background-clip: text;\n letter-spacing: -0.03em;\n}\n\n.era-1937 .era-subtitle {\n font-family: 'Noto Sans SC', sans-serif;\n color: #e74c3c;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.2em;\n}\n\n.era-1937 .era-body {\n font-family: 'Noto Serif SC', serif;\n color: #ccc;\n}\n\n.era-1937 .era-quote {\n border-color: #e74c3c;\n color: #f5b7b1;\n font-family: 'Noto Serif SC', serif;\n background: rgba(192,57,43,0.05);\n}\n\n.era-1937 .era-decoration {\n right: -3%;\n top: 5%;\n color: #c0392b;\n font-family: 'Noto Sans SC', sans-serif;\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 ERA 3: 1949 - \u65b0\u4e2d\u56fd (\u5ba3\u4f20\u753b\u98ce)\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.era-1949 {\n background: linear-gradient(180deg, #1a0a0a 0%, #2a1515 50%, #1a0a0a 100%);\n color: #f5e6cc;\n}\n\n.era-1949::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at 50% 20%, rgba(230,126,34,0.1) 0%, transparent 50%),\n radial-gradient(ellipse at 30% 70%, rgba(231,76,60,0.08) 0%, transparent 40%);\n z-index: 1;\n}\n\n.era-1949 .era-year {\n font-family: 'ZCOOL KuaiLe', cursive;\n color: transparent;\n background: linear-gradient(180deg, #f39c12, #e67e22, #d35400);\n -webkit-background-clip: text;\n background-clip: text;\n}\n\n.era-1949 .era-subtitle {\n font-family: 'ZCOOL KuaiLe', cursive;\n color: #f39c12;\n letter-spacing: 0.15em;\n}\n\n.era-1949 .era-body {\n font-family: 'Noto Serif SC', serif;\n color: #e8d5b5;\n}\n\n.era-1949 .era-quote {\n border-color: #f39c12;\n color: #fdebd0;\n font-family: 'Noto Serif SC', serif;\n background: rgba(243,156,18,0.05);\n}\n\n.era-1949 .era-decoration {\n left: -5%;\n bottom: 5%;\n color: #e67e22;\n font-family: 'ZCOOL KuaiLe', cursive;\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 ERA 4: 1978 - \u6539\u9769\u5f00\u653e (80\u5e74\u4ee3\u9713\u8679\u98ce)\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.era-1978 {\n background: #0a0015;\n color: #e0e0ff;\n}\n\n.era-1978::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n linear-gradient(135deg, rgba(155,89,182,0.08) 0%, transparent 50%),\n linear-gradient(225deg, rgba(52,152,219,0.06) 0%, transparent 50%),\n linear-gradient(45deg, rgba(46,204,113,0.05) 0%, transparent 40%);\n z-index: 1;\n}\n\n\/* Scanlines *\/\n.era-1978::after {\n content: '';\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 2px,\n rgba(0,0,0,0.08) 2px,\n rgba(0,0,0,0.08) 4px\n );\n z-index: 1;\n pointer-events: none;\n}\n\n.era-1978 .era-year {\n font-family: 'ZCOOL QingKe HuangYou', cursive;\n color: transparent;\n background: linear-gradient(180deg, #00ffff, #ff00ff, #ffff00);\n -webkit-background-clip: text;\n background-clip: text;\n text-shadow: none;\n filter: drop-shadow(0 0 20px rgba(0,255,255,0.3));\n}\n\n.era-1978 .era-subtitle {\n font-family: 'ZCOOL QingKe HuangYou', cursive;\n color: #00ffff;\n text-shadow: 0 0 10px rgba(0,255,255,0.5);\n letter-spacing: 0.2em;\n}\n\n.era-1978 .era-body {\n font-family: 'ZCOOL XiaoWei', serif;\n color: #c8c8e8;\n}\n\n.era-1978 .era-quote {\n border-color: #ff00ff;\n color: #e8c8ff;\n font-family: 'ZCOOL XiaoWei', serif;\n background: rgba(255,0,255,0.03);\n text-shadow: 0 0 5px rgba(255,0,255,0.2);\n}\n\n.era-1978 .era-decoration {\n right: -5%;\n top: 15%;\n color: #00ffff;\n font-family: 'ZCOOL QingKe HuangYou', cursive;\n opacity: 0.04;\n}\n\n\/* Neon border effect *\/\n.neon-border {\n position: absolute;\n border: 1px solid rgba(0,255,255,0.15);\n border-radius: 2px;\n pointer-events: none;\n z-index: 1;\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 ERA 5: 1997 - \u4e92\u8054\u7f51\u6d6a\u6f6e (CRT\/\u50cf\u7d20\u98ce)\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.era-1997 {\n background: #001a00;\n color: #33ff33;\n}\n\n.era-1997::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(ellipse at 50% 50%, rgba(51,255,51,0.03) 0%, transparent 70%);\n z-index: 1;\n}\n\n\/* CRT effect *\/\n.era-1997::after {\n content: '';\n position: absolute;\n inset: 0;\n background: repeating-linear-gradient(\n 0deg,\n transparent,\n transparent 1px,\n rgba(0,0,0,0.15) 1px,\n rgba(0,0,0,0.15) 2px\n );\n z-index: 1;\n pointer-events: none;\n}\n\n.era-1997 .era-year {\n font-family: 'ZCOOL QingKe HuangYou', monospace;\n color: #33ff33;\n text-shadow: 0 0 20px rgba(51,255,51,0.5), 0 0 40px rgba(51,255,51,0.2);\n}\n\n.era-1997 .era-subtitle {\n font-family: 'ZCOOL QingKe HuangYou', monospace;\n color: #66ff66;\n text-shadow: 0 0 8px rgba(51,255,51,0.4);\n letter-spacing: 0.15em;\n}\n\n.era-1997 .era-body {\n font-family: 'ZCOOL QingKe HuangYou', monospace;\n color: #88cc88;\n line-height: 1.8;\n}\n\n.era-1997 .era-quote {\n border-color: #33ff33;\n color: #aaffaa;\n font-family: 'ZCOOL QingKe HuangYou', monospace;\n background: rgba(51,255,51,0.02);\n}\n\n.era-1997 .era-decoration {\n right: 5%;\n top: 10%;\n color: #33ff33;\n font-family: 'ZCOOL QingKe HuangYou', monospace;\n opacity: 0.03;\n}\n\n\/* Blinking cursor *\/\n.cursor-blink {\n display: inline-block;\n width: 0.6em;\n height: 1.2em;\n background: #33ff33;\n margin-left: 4px;\n animation: blink 1s step-end infinite;\n vertical-align: text-bottom;\n}\n\n@keyframes blink {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 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 ERA 6: 2012 - \u79fb\u52a8\u4e92\u8054\u7f51 (\u73b0\u4ee3\u6241\u5e73\u98ce)\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.era-2012 {\n background: linear-gradient(135deg, #0c1445 0%, #1a237e 50%, #0d47a1 100%);\n color: #e3f2fd;\n}\n\n.era-2012::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n radial-gradient(circle at 80% 20%, rgba(66,165,245,0.15) 0%, transparent 40%),\n radial-gradient(circle at 20% 80%, rgba(156,39,176,0.1) 0%, transparent 40%);\n z-index: 1;\n}\n\n.era-2012 .era-year {\n font-family: 'Noto Sans SC', sans-serif;\n color: transparent;\n background: linear-gradient(135deg, #42a5f5, #7c4dff, #e040fb);\n -webkit-background-clip: text;\n background-clip: text;\n letter-spacing: -0.02em;\n}\n\n.era-2012 .era-subtitle {\n font-family: 'Noto Sans SC', sans-serif;\n color: #90caf9;\n font-weight: 300;\n letter-spacing: 0.1em;\n}\n\n.era-2012 .era-body {\n font-family: 'Noto Sans SC', sans-serif;\n color: #bbdefb;\n font-weight: 300;\n line-height: 2;\n}\n\n.era-2012 .era-quote {\n border-color: #7c4dff;\n color: #d1c4e9;\n font-family: 'Noto Sans SC', sans-serif;\n font-weight: 300;\n background: rgba(124,77,255,0.05);\n}\n\n.era-2012 .era-decoration {\n right: -3%;\n bottom: 10%;\n color: #42a5f5;\n font-family: 'Noto Sans SC', sans-serif;\n opacity: 0.04;\n}\n\n\/* Floating cards *\/\n.float-card {\n position: absolute;\n background: rgba(255,255,255,0.05);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n border: 1px solid rgba(255,255,255,0.08);\n padding: 1rem;\n z-index: 1;\n animation: floatCard 6s ease-in-out infinite;\n}\n\n@keyframes floatCard {\n 0%, 100% { transform: translateY(0px); }\n 50% { transform: translateY(-15px); }\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 ERA 7: 2026 - AI\u65f6\u4ee3 (\u8d5b\u535a\u670b\u514b\u98ce)\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.era-2026 {\n background: #050510;\n color: #e0e0ff;\n}\n\n.era-2026::before {\n content: '';\n position: absolute;\n inset: 0;\n background:\n linear-gradient(180deg, rgba(138,43,226,0.06) 0%, transparent 30%),\n linear-gradient(0deg, rgba(0,188,212,0.06) 0%, transparent 30%),\n radial-gradient(circle at 50% 50%, rgba(138,43,226,0.04) 0%, transparent 60%);\n z-index: 1;\n}\n\n\/* Grid pattern *\/\n.era-2026::after {\n content: '';\n position: absolute;\n inset: 0;\n background:\n linear-gradient(rgba(138,43,226,0.03) 1px, transparent 1px),\n linear-gradient(90deg, rgba(138,43,226,0.03) 1px, transparent 1px);\n background-size: 60px 60px;\n z-index: 1;\n pointer-events: none;\n}\n\n.era-2026 .era-year {\n font-family: 'Noto Sans SC', sans-serif;\n color: transparent;\n background: linear-gradient(135deg, #00e5ff, #d500f9, #ff1744, #00e5ff);\n background-size: 300% 300%;\n -webkit-background-clip: text;\n background-clip: text;\n animation: gradientShift 5s ease infinite;\n letter-spacing: -0.03em;\n}\n\n@keyframes gradientShift {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n.era-2026 .era-subtitle {\n font-family: 'Noto Sans SC', sans-serif;\n color: #00e5ff;\n text-shadow: 0 0 15px rgba(0,229,255,0.4);\n letter-spacing: 0.15em;\n font-weight: 300;\n}\n\n.era-2026 .era-body {\n font-family: 'Noto Sans SC', sans-serif;\n color: #b0bec5;\n font-weight: 300;\n}\n\n.era-2026 .era-quote {\n border-color: #d500f9;\n color: #e1bee7;\n font-family: 'Noto Sans SC', sans-serif;\n font-weight: 300;\n background: rgba(213,0,249,0.03);\n}\n\n.era-2026 .era-decoration {\n right: 5%;\n top: 5%;\n color: #d500f9;\n font-family: 'Noto Sans SC', sans-serif;\n opacity: 0.03;\n}\n\n\/* Glitch effect *\/\n.glitch {\n position: relative;\n}\n\n.glitch::before,\n.glitch::after {\n content: attr(data-text);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n opacity: 0;\n}\n\n.glitch:hover::before {\n animation: glitch1 0.3s linear;\n color: #00e5ff;\n opacity: 0.8;\n}\n\n.glitch:hover::after {\n animation: glitch2 0.3s linear;\n color: #d500f9;\n opacity: 0.8;\n}\n\n@keyframes glitch1 {\n 0% { clip-path: inset(20% 0 60% 0); transform: translate(-3px, 0); opacity: 0.8; }\n 20% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 0); opacity: 0.8; }\n 40% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, 0); opacity: 0.8; }\n 60% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 0); opacity: 0.8; }\n 80% { clip-path: inset(10% 0 70% 0); transform: translate(-1px, 0); opacity: 0.8; }\n 100% { clip-path: inset(50% 0 30% 0); transform: translate(0, 0); opacity: 0; }\n}\n\n@keyframes glitch2 {\n 0% { clip-path: inset(60% 0 20% 0); transform: translate(3px, 0); opacity: 0.8; }\n 20% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, 0); opacity: 0.8; }\n 40% { clip-path: inset(30% 0 40% 0); transform: translate(2px, 0); opacity: 0.8; }\n 60% { clip-path: inset(5% 0 80% 0); transform: translate(-2px, 0); opacity: 0.8; }\n 80% { clip-path: inset(70% 0 10% 0); transform: translate(1px, 0); opacity: 0.8; }\n 100% { clip-path: inset(30% 0 50% 0); transform: translate(0, 0); opacity: 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 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 min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n position: relative;\n background: radial-gradient(ellipse at 50% 50%, #1a0a0a 0%, #0a0a0a 100%);\n overflow: hidden;\n}\n\n.hero-title {\n font-family: 'Ma Shan Zheng', cursive;\n font-size: clamp(6rem, 20vw, 16rem);\n color: transparent;\n background: linear-gradient(180deg, #c0392b 0%, #e74c3c 40%, #f39c12 100%);\n -webkit-background-clip: text;\n background-clip: text;\n line-height: 1.1;\n text-align: center;\n animation: heroFadeIn 2s ease-out;\n}\n\n.hero-sub {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: clamp(1rem, 3vw, 1.8rem);\n color: rgba(255,255,255,0.3);\n margin-top: 1rem;\n letter-spacing: 0.8em;\n animation: heroFadeIn 2s ease-out 0.5s both;\n}\n\n.hero-scroll {\n position: absolute;\n bottom: 3rem;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n animation: heroFadeIn 2s ease-out 1s both;\n}\n\n.hero-scroll-text {\n font-family: 'ZCOOL XiaoWei', serif;\n font-size: 0.75rem;\n color: rgba(255,255,255,0.25);\n letter-spacing: 0.3em;\n}\n\n.hero-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);\n animation: scrollLine 2s ease-in-out infinite;\n}\n\n@keyframes scrollLine {\n 0% { transform: scaleY(0); transform-origin: top; }\n 50% { transform: scaleY(1); transform-origin: top; }\n 50.1% { transform: scaleY(1); transform-origin: bottom; }\n 100% { transform: scaleY(0); transform-origin: bottom; }\n}\n\n@keyframes heroFadeIn {\n from { opacity: 0; transform: translateY(30px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n\/* Floating particles *\/\n.particle {\n position: absolute;\n border-radius: 50%;\n pointer-events: none;\n animation: particleFloat linear infinite;\n}\n\n@keyframes particleFloat {\n 0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { transform: translateY(-10vh) rotate(720deg); opacity: 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 DIVIDER\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.era-divider {\n height: 1px;\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\n margin: 0 auto;\n width: 60%;\n max-width: 600px;\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 text-align: center;\n padding: 4rem 2rem;\n background: #050505;\n font-family: 'ZCOOL XiaoWei', serif;\n color: rgba(255,255,255,0.2);\n font-size: 0.85rem;\n letter-spacing: 0.2em;\n}\n\n.footer-highlight {\n color: rgba(192,57,43,0.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\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 .era-nav { right: 0.8rem; gap: 0.8rem; }\n .era-dot { width: 8px; height: 8px; }\n .era-section { padding: 3rem 1.5rem; }\n .era-decoration { display: none; }\n .float-card { display: none; }\n .neon-border { display: none; }\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 CONTAINER\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 {\n position: fixed;\n inset: 0;\n pointer-events: none;\n z-index: 0;\n overflow: hidden;\n}\n<\/style>\n<\/head>\n<body>\n\n<!-- Loading Screen -->\n<div class=\"loading-screen\" id=\"loadingScreen\">\n <div class=\"loading-char\">\u4e94\u56db<\/div>\n <div class=\"loading-text\">\u767e\u5e74\u7cbe\u795e \u00b7 \u85aa\u706b\u76f8\u4f20<\/div>\n<\/div>\n\n<!-- Particles -->\n<div id=\"particles\"><\/div>\n\n<!-- Era Navigation -->\n<nav class=\"era-nav\" id=\"eraNav\">\n <div class=\"era-dot\" data-target=\"hero\"><span class=\"era-label\">\u5e8f<\/span><\/div>\n <div class=\"era-dot\" data-target=\"era-1919\"><span class=\"era-label\">1919<\/span><\/div>\n <div class=\"era-dot\" data-target=\"era-1937\"><span class=\"era-label\">1937<\/span><\/div>\n <div class=\"era-dot\" data-target=\"era-1949\"><span class=\"era-label\">1949<\/span><\/div>\n <div class=\"era-dot\" data-target=\"era-1978\"><span class=\"era-label\">1978<\/span><\/div>\n <div class=\"era-dot\" data-target=\"era-1997\"><span class=\"era-label\">1997<\/span><\/div>\n <div class=\"era-dot\" data-target=\"era-2012\"><span class=\"era-label\">2012<\/span><\/div>\n <div class=\"era-dot\" data-target=\"era-2026\"><span class=\"era-label\">2026<\/span><\/div>\n<\/nav>\n\n<!-- Hero -->\n<section class=\"hero\" id=\"hero\">\n <h1 class=\"hero-title\">\u4e94\u56db<\/h1>\n <p class=\"hero-sub\">\u9752\u5e74\u767e\u5e74\u7cbe\u795e\u53f2<\/p>\n <div class=\"hero-scroll\">\n <span class=\"hero-scroll-text\">\u5411\u4e0b\u6eda\u52a8<\/span>\n <div class=\"hero-scroll-line\"><\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- ERA 1: 1919 \u4e94\u56db\u8fd0\u52a8 -->\n<section class=\"era-section era-1919\" id=\"era-1919\">\n <div class=\"era-decoration\">\u4e94<\/div>\n <div class=\"ink-splash\" style=\"left: 10%; top: 20%;\"><\/div>\n <div class=\"ink-splash\" style=\"right: 15%; bottom: 30%;\"><\/div>\n <div class=\"era-content\">\n <div class=\"era-year\">1919<\/div>\n <div class=\"era-subtitle\">\u89c9 \u9192 \u4e4b \u5e74<\/div>\n <div class=\"era-body\">\n \u5df4\u9ece\u548c\u4f1a\u7684\u6d88\u606f\u4f20\u6765\uff0c\u5317\u4eac\u4e09\u5343\u4f59\u540d\u5b66\u751f\u8d70\u4e0a\u8857\u5934\u3002\"\u5916\u4e89\u4e3b\u6743\uff0c\u5185\u9664\u56fd\u8d3c\"\u2014\u2014\u8fd9\u4e0d\u4ec5\u4ec5\u662f\u4e00\u53e5\u53e3\u53f7\uff0c\u800c\u662f\u4e00\u4ee3\u9752\u5e74\u5bf9\u56fd\u5bb6\u547d\u8fd0\u7684\u7b2c\u4e00\u6b21\u81ea\u89c9\u62c5\u5f53\u3002\u4ed6\u4eec\u7528\u8840\u8089\u4e4b\u8eaf\u649e\u5f00\u4e86\u65e7\u65f6\u4ee3\u7684\u95e8\uff0c\u6c11\u4e3b\u4e0e\u79d1\u5b66\u7684\u65d7\u5e1c\u4ece\u6b64\u63d2\u5728\u4e86\u4e2d\u56fd\u7684\u571f\u5730\u4e0a\u3002\n <\/div>\n <div class=\"era-quote\">\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\u3002\"<br>\n <small style=\"opacity: 0.6;\">\u2014\u2014\u9648\u72ec\u79c0\u300a\u656c\u544a\u9752\u5e74\u300b<\/small>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- ERA 2: 1937 \u6297\u6218\u70fd\u706b -->\n<section class=\"era-section era-1937\" id=\"era-1937\">\n <div class=\"era-decoration\">\u6218<\/div>\n <div class=\"era-content\">\n <div class=\"era-year\">1937<\/div>\n <div class=\"era-subtitle\">\u70fd \u706b \u9752 \u6625<\/div>\n <div class=\"era-body\">\n \u5362\u6c9f\u6865\u7684\u67aa\u58f0\u6495\u88c2\u4e86\u77ed\u6682\u7684\u548c\u5e73\u3002\u9752\u5e74\u4eec\u653e\u4e0b\u8bfe\u672c\uff0c\u8d70\u51fa\u6821\u56ed\uff0c\u6709\u7684\u5954\u8d74\u524d\u7ebf\uff0c\u6709\u7684\u6df1\u5165\u654c\u540e\u3002\u897f\u5357\u8054\u5927\u7684\u5e08\u751f\u5f92\u6b65\u5343\u91cc\uff0c\u5728\u8f70\u70b8\u4e2d\u575a\u6301\u6388\u8bfe\uff1b\u65e0\u6570\u9752\u5e74\u7528\u751f\u547d\u7b51\u8d77\u4e86\u8840\u8089\u957f\u57ce\u3002\u90a3\u4e00\u4ee3\u4eba\u7684\u9752\u6625\u6ca1\u6709\u82b1\u524d\u6708\u4e0b\uff0c\u53ea\u6709\u5bb6\u56fd\u5929\u4e0b\u3002\n <\/div>\n <div class=\"era-quote\">\n \"\u534e\u5317\u4e4b\u5927\uff0c\u5df2\u7ecf\u5b89\u653e\u4e0d\u5f97\u4e00\u5f20\u5e73\u9759\u7684\u4e66\u684c\u4e86\uff01\"<br>\n <small style=\"opacity: 0.6;\">\u2014\u2014\u6e05\u534e\u5b66\u751f\u6551\u56fd\u4f1a\u300a\u544a\u5168\u56fd\u6c11\u4f17\u4e66\u300b<\/small>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- ERA 3: 1949 \u65b0\u4e2d\u56fd -->\n<section class=\"era-section era-1949\" id=\"era-1949\">\n <div class=\"era-decoration\">\u65b0<\/div>\n <div class=\"era-content\">\n <div class=\"era-year\">1949<\/div>\n <div class=\"era-subtitle\">\u65ed \u65e5 \u4e1c \u5347<\/div>\n <div class=\"era-body\">\n \u5929\u5b89\u95e8\u57ce\u697c\u4e0a\u7684\u5ba3\u544a\uff0c\u8ba9\u6240\u6709\u4e2d\u56fd\u4eba\u7684\u547d\u8fd0\u4e3a\u4e4b\u6539\u5199\u3002\u9752\u5e74\u4eec\u6000\u7740\u5efa\u8bbe\u65b0\u4e16\u754c\u7684\u70ed\u5ff1\uff0c\u5954\u8d74\u7956\u56fd\u6700\u9700\u8981\u7684\u5730\u65b9\u2014\u2014\u8352\u539f\u4e0a\u7684\u6cb9\u7530\u3001\u6df1\u5c71\u91cc\u7684\u5de5\u5382\u3001\u6208\u58c1\u4e2d\u7684\u8bd5\u9a8c\u573a\u3002\u4ed6\u4eec\u76f8\u4fe1\uff0c\u81ea\u5df1\u7684\u53cc\u624b\u53ef\u4ee5\u6539\u53d8\u4e00\u5207\uff0c\u800c\u4e8b\u5b9e\u4e0a\uff0c\u4ed6\u4eec\u505a\u5230\u4e86\u3002\n <\/div>\n <div class=\"era-quote\">\n \"\u9752\u5e74\u4eec\u8981\u5145\u5206\u8ba4\u8bc6\u81ea\u5df1\u80a9\u8d1f\u7684\u8d23\u4efb\uff0c\u628a\u65b0\u4e2d\u56fd\u5efa\u8bbe\u597d\u3002\"<br>\n <small style=\"opacity: 0.6;\">\u2014\u2014\u4e00\u4e2a\u65f6\u4ee3\u7684\u9752\u5e74\u5ba3\u8a00<\/small>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- ERA 4: 1978 \u6539\u9769\u5f00\u653e -->\n<section class=\"era-section era-1978\" id=\"era-1978\">\n <div class=\"era-decoration\">\u6539<\/div>\n <div class=\"neon-border\" style=\"top: 15%; right: 10%; width: 120px; height: 80px; transform: rotate(12deg);\"><\/div>\n <div class=\"neon-border\" style=\"bottom: 20%; left: 8%; width: 90px; height: 60px; transform: rotate(-8deg);\"><\/div>\n <div class=\"era-content\">\n <div class=\"era-year\">1978<\/div>\n <div class=\"era-subtitle\">\u7834 \u51b0 \u4e4b \u6625<\/div>\n <div class=\"era-body\">\n \u9ad8\u8003\u6062\u590d\uff0c\u56fd\u95e8\u6253\u5f00\u3002\u7b2c\u4e00\u6279\u7559\u5b66\u751f\u8e0f\u4e0a\u5f02\u56fd\u7684\u571f\u5730\uff0c\u7b2c\u4e00\u6279\u4e2a\u4f53\u6237\u5728\u8857\u8fb9\u652f\u8d77\u4e86\u644a\u4f4d\uff0c\u7b2c\u4e00\u6279\u6253\u5de5\u8005\u6d8c\u5411\u5357\u65b9\u3002\u90a3\u662f\u4e00\u4e2a\u6bcf\u5929\u90fd\u5728\u53d1\u751f\"\u7b2c\u4e00\u6b21\"\u7684\u5e74\u4ee3\u2014\u2014\u9752\u5e74\u4eba\u7b2c\u4e00\u6b21\u77e5\u9053\uff0c\u547d\u8fd0\u53ef\u4ee5\u638c\u63e1\u5728\u81ea\u5df1\u624b\u4e2d\u3002\u4e00\u5207\u90fd\u5728\u89e3\u51bb\uff0c\u4e00\u5207\u90fd\u5728\u82cf\u9192\u3002\n <\/div>\n <div class=\"era-quote\">\n \"\u5b9e\u8df5\u662f\u68c0\u9a8c\u771f\u7406\u7684\u552f\u4e00\u6807\u51c6\u3002\"<br>\n <small style=\"opacity: 0.6;\">\u2014\u2014\u300a\u5149\u660e\u65e5\u62a5\u300b\u7279\u7ea6\u8bc4\u8bba\u5458<\/small>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- ERA 5: 1997 \u4e92\u8054\u7f51\u6d6a\u6f6e -->\n<section class=\"era-section era-1997\" id=\"era-1997\">\n <div class=\"era-decoration\">\u7f51<\/div>\n <div class=\"era-content\">\n <div class=\"era-year\">1997<span class=\"cursor-blink\"><\/span><\/div>\n <div class=\"era-subtitle\">\u6570 \u5b57 \u7eaa \u5143<\/div>\n <div class=\"era-body\">\n \u732b\u7684\u53eb\u58f0\uff0c\u62e8\u53f7\u7684\u65cb\u5f8b\u2014\u2014\u4e2d\u56fd\u63a5\u5165\u4e86\u4e16\u754c\u3002\u7f51\u5427\u5982\u96e8\u540e\u6625\u7b0b\u822c\u51fa\u73b0\u5728\u6bcf\u4e2a\u8857\u89d2\uff0cBBS\u4e0a\u7684\u4e89\u8bba\u901a\u5bb5\u8fbe\u65e6\u3002\u5e74\u8f7b\u7684\u7a0b\u5e8f\u5458\u4eec\u5728\u51fa\u79df\u5c4b\u91cc\u5199\u4e0b\u6539\u53d8\u4ebf\u4e07\u4eba\u751f\u6d3b\u7684\u4ee3\u7801\uff0c\u521b\u4e1a\u7684\u6545\u4e8b\u4ece\u7845\u8c37\u4f20\u5230\u4e2d\u5173\u6751\u3002\u7f51\u7edc\u4e0d\u53ea\u8fde\u63a5\u4e86\u7535\u8111\uff0c\u66f4\u8fde\u63a5\u4e86\u4e00\u4ee3\u4eba\u6e34\u671b\u6539\u53d8\u4e16\u754c\u7684\u91ce\u5fc3\u3002\n <\/div>\n <div class=\"era-quote\">\n \"> \u4e2d\u56fd\u7684\u4e92\u8054\u7f51\u65f6\u4ee3\uff0c\u624d\u521a\u521a\u5f00\u59cb\u3002<span class=\"cursor-blink\"><\/span>\"<br>\n <small style=\"opacity: 0.6;\">\u2014\u2014\u90a3\u4e2a\u5e74\u4ee3\u6bcf\u4e2a\u521b\u4e1a\u8005\u7684\u4fe1\u5ff5<\/small>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- ERA 6: 2012 \u79fb\u52a8\u4e92\u8054\u7f51 -->\n<section class=\"era-section era-2012\" id=\"era-2012\">\n <div class=\"era-decoration\">\u79fb<\/div>\n <div class=\"float-card\" style=\"top: 15%; right: 8%; animation-delay: 0s;\">\n <div style=\"font-size: 0.7rem; color: rgba(255,255,255,0.4);\">\ud83d\udcf1 \u79fb\u52a8\u7528\u6237<\/div>\n <div style=\"font-size: 1.4rem; color: #42a5f5; font-weight: 700;\">12\u4ebf+<\/div>\n <\/div>\n <div class=\"float-card\" style=\"bottom: 20%; right: 12%; animation-delay: 2s;\">\n <div style=\"font-size: 0.7rem; color: rgba(255,255,255,0.4);\">\ud83d\udcf2 \u65e5\u5747\u4f7f\u7528<\/div>\n <div style=\"font-size: 1.4rem; color: #e040fb; font-weight: 700;\">5.2h<\/div>\n <\/div>\n <div class=\"era-content\">\n <div class=\"era-year\">2012<\/div>\n <div class=\"era-subtitle\">\u638c \u4e0a \u4e16 \u754c<\/div>\n <div class=\"era-body\">\n \u667a\u80fd\u624b\u673a\u91cd\u5851\u4e86\u4e00\u5207\u2014\u2014\u793e\u4ea4\u3001\u652f\u4ed8\u3001\u51fa\u884c\u3001\u5a31\u4e50\uff0c\u751f\u6d3b\u7684\u6bcf\u4e2a\u89d2\u843d\u90fd\u88abApp\u91cd\u65b0\u5b9a\u4e49\u3002\u5e74\u8f7b\u4eba\u4e0d\u518d\u53ea\u662f\u4e92\u8054\u7f51\u7684\u4f7f\u7528\u8005\uff0c\u66f4\u6210\u4e3a\u4e86\u5185\u5bb9\u7684\u521b\u9020\u8005\u3002\u77ed\u89c6\u9891\u3001\u76f4\u64ad\u3001\u81ea\u5a92\u4f53\uff0c\u6bcf\u4e2a\u4eba\u90fd\u53ef\u4ee5\u88ab\u770b\u89c1\u3002\u8fd9\u662f\u5c5e\u4e8e\"\u8349\u6839\"\u7684\u65f6\u4ee3\uff0c\u4e5f\u662f\u5c5e\u4e8e\"\u6ce8\u610f\u529b\"\u7684\u65f6\u4ee3\u3002\n <\/div>\n <div class=\"era-quote\">\n \"\u4eba\u4eba\u90fd\u6709\u9ea6\u514b\u98ce\uff0c\u4eba\u4eba\u90fd\u662f\u81ea\u5a92\u4f53\u3002\"<br>\n <small style=\"opacity: 0.6;\">\u2014\u2014\u79fb\u52a8\u4e92\u8054\u7f51\u65f6\u4ee3\u7684\u5171\u8bc6<\/small>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- ERA 7: 2026 AI\u65f6\u4ee3 -->\n<section class=\"era-section era-2026\" id=\"era-2026\">\n <div class=\"era-decoration\">\u667a<\/div>\n <div class=\"era-content\">\n <div class=\"era-year glitch\" data-text=\"2026\">2026<\/div>\n <div class=\"era-subtitle\">\u91cd \u6784 \u672a \u6765<\/div>\n <div class=\"era-body\">\n AI\u4e0d\u518d\u662f\u79d1\u5e7b\u7535\u5f71\u91cc\u7684\u6982\u5ff5\uff0c\u800c\u662f\u6bcf\u5929\u6253\u5f00\u7535\u8111\u5c31\u80fd\u5bf9\u8bdd\u7684\u5b58\u5728\u3002\u8fd9\u4e00\u4ee3\u9752\u5e74\u7ad9\u5728\u4eba\u7c7b\u5386\u53f2\u7684\u62d0\u70b9\uff1a\u4ee3\u7801\u53ef\u4ee5\u81ea\u52a8\u751f\u6210\uff0c\u6587\u7ae0\u53ef\u4ee5\u4e00\u952e\u5199\u51fa\uff0c\u56fe\u50cf\u53ef\u4ee5\u51ed\u7a7a\u521b\u9020\u3002\u5f53\u673a\u5668\u80fd\u505a\u4e00\u5207\uff0c\u4eba\u4f55\u4ee5\u4e3a\u4eba\uff1f\u7b54\u6848\u6216\u8bb8\u5c31\u85cf\u5728\u4e94\u56db\u7cbe\u795e\u91cc\u2014\u2014\u72ec\u7acb\u601d\u8003\uff0c\u52c7\u6562\u8d28\u7591\uff0c\u6c38\u8fdc\u4e0d\u7518\u4e8e\u63a5\u53d7\u65e2\u5b9a\u7684\u7b54\u6848\u3002\n <\/div>\n <div class=\"era-quote\">\n \"\u5f53\u4e00\u5207\u90fd\u53ef\u4ee5\u88ab\u751f\u6210\uff0c\u552f\u4e00\u4e0d\u53ef\u66ff\u4ee3\u7684\uff0c\u662f\u4f60\u7684\u601d\u8003\u3002\"<br>\n <small style=\"opacity: 0.6;\">\u2014\u2014\u81f4AI\u65f6\u4ee3\u7684\u9752\u5e74<\/small>\n <\/div>\n <\/div>\n<\/section>\n\n<div class=\"era-divider\"><\/div>\n\n<!-- Footer -->\n<footer class=\"footer\">\n <span class=\"footer-highlight\">\u4e94\u56db<\/span> \u00b7 \u767e\u5e74\u7cbe\u795e\u85aa\u706b\u76f8\u4f20<br>\n <span style=\"font-size: 0.75rem; opacity: 0.5;\">1919 \u2014 2026<\/span>\n<\/footer>\n\n<script>\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\/\/ LOADING SCREEN\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\nwindow.addEventListener('load', () => {\n setTimeout(() => {\n document.getElementById('loadingScreen').classList.add('hidden');\n }, 1200);\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\/\/ SCROLL ANIMATIONS (Intersection Observer)\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\nconst observerOptions = {\n root: null,\n rootMargin: '0px 0px -15% 0px',\n threshold: 0.15\n};\n\nconst observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n}, observerOptions);\n\ndocument.querySelectorAll('.era-section').forEach(section => {\n observer.observe(section);\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\/\/ ERA NAVIGATION - Active State\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\nconst sections = ['hero', 'era-1919', 'era-1937', 'era-1949', 'era-1978', 'era-1997', 'era-2012', 'era-2026'];\nconst dots = document.querySelectorAll('.era-dot');\nconst eraNav = document.getElementById('eraNav');\n\nconst navObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const id = entry.target.id;\n dots.forEach(dot => {\n dot.classList.toggle('active', dot.dataset.target === id);\n });\n }\n });\n}, { threshold: 0.4 });\n\nsections.forEach(id => {\n const el = document.getElementById(id);\n if (el) navObserver.observe(el);\n});\n\n\/\/ Show\/hide nav\nconst heroObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n eraNav.classList.toggle('visible', !entry.isIntersecting);\n });\n}, { threshold: 0.5 });\n\nheroObserver.observe(document.getElementById('hero'));\n\n\/\/ Click navigation\ndots.forEach(dot => {\n dot.addEventListener('click', () => {\n const target = document.getElementById(dot.dataset.target);\n if (target) target.scrollIntoView({ behavior: 'smooth' });\n });\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\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\nconst particlesContainer = document.getElementById('particles');\nconst prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n\nif (!prefersReducedMotion) {\n function createParticle() {\n const particle = document.createElement('div');\n particle.className = 'particle';\n const size = Math.random() * 3 + 1;\n const duration = Math.random() * 15 + 10;\n const left = Math.random() * 100;\n const opacity = Math.random() * 0.15 + 0.05;\n\n particle.style.width = size + 'px';\n particle.style.height = size + 'px';\n particle.style.left = left + '%';\n particle.style.background = `rgba(255, 255, 255, ${opacity})`;\n particle.style.animationDuration = duration + 's';\n particle.style.animationDelay = Math.random() * 5 + 's';\n\n particlesContainer.appendChild(particle);\n\n setTimeout(() => {\n particle.remove();\n }, (duration + 5) * 1000);\n }\n\n \/\/ Initial batch\n for (let i = 0; i < 15; i++) {\n setTimeout(createParticle, Math.random() * 5000);\n }\n\n \/\/ Continuous\n setInterval(createParticle, 2000);\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\/\/ PARALLAX - subtle depth on scroll\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\nlet ticking = false;\nwindow.addEventListener('scroll', () => {\n if (!ticking) {\n requestAnimationFrame(() => {\n const scrollY = window.scrollY;\n document.querySelectorAll('.era-decoration').forEach(el => {\n const rect = el.getBoundingClientRect();\n const speed = 0.05;\n el.style.transform = `translateY(${scrollY * speed * -0.1}px)`;\n });\n ticking = false;\n });\n ticking = true;\n }\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\/\/ TYPING EFFECT for CRT era\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\nconst crtSection = document.getElementById('era-1997');\nlet hasTyped = false;\n\nconst crtObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting && !hasTyped) {\n hasTyped = true;\n const bodyEl = crtSection.querySelector('.era-body');\n const originalText = bodyEl.textContent;\n bodyEl.textContent = '';\n bodyEl.style.opacity = '1';\n bodyEl.style.transform = 'translateY(0)';\n\n let i = 0;\n function typeChar() {\n if (i < originalText.length) {\n bodyEl.textContent += originalText[i];\n i++;\n setTimeout(typeChar, 25 + Math.random() * 30);\n }\n }\n setTimeout(typeChar, 800);\n }\n });\n}, { threshold: 0.3 });\n\ncrtObserver.observe(crtSection);\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\/\/ GLITCH effect trigger for 2026\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\nconst glitchEl = document.querySelector('.glitch');\nif (glitchEl) {\n setInterval(() => {\n if (Math.random() > 0.7) {\n glitchEl.style.transform = `translate(${(Math.random() - 0.5) * 4}px, ${(Math.random() - 0.5) * 2}px)`;\n setTimeout(() => {\n glitchEl.style.transform = 'translate(0, 0)';\n }, 100);\n }\n }, 3000);\n}\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"\u4e94\u56db \u00b7 \u9752\u5e74\u767e\u5e74 \u4e94\u56db \u767e\u5e74\u7cbe\u795e \u00b7 \u85aa\u706b\u76f8\u4f20 \u5e8f 1919 1937 1949 1978 1997 201 […]","protected":false},"author":1,"featured_media":1069,"comment_status":"open","ping_status":"open","sticky":false,"template":"wp-custom-template-2","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-1068","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tupian","category-10"],"_links":{"self":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1068","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=1068"}],"version-history":[{"count":1,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1068\/revisions"}],"predecessor-version":[{"id":1070,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/posts\/1068\/revisions\/1070"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media\/1069"}],"wp:attachment":[{"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/media?parent=1068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/categories?post=1068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.365ycs.com\/index.php\/wp-json\/wp\/v2\/tags?post=1068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}