{"id":2,"date":"2017-06-19T05:41:37","date_gmt":"2017-06-19T05:41:37","guid":{"rendered":"https:\/\/websitedemos.net\/astra-lite-demo-1\/?page_id=2"},"modified":"2025-12-03T13:14:37","modified_gmt":"2025-12-03T13:14:37","slug":"%e7%a4%be%e5%9c%98%e6%b3%95%e4%ba%ba%e5%8f%b0%e7%81%a3%e6%a8%82%e9%bd%a1%e5%bb%ba%e7%af%89%e7%99%bc%e5%b1%95%e5%8d%94%e6%9c%83","status":"publish","type":"page","link":"https:\/\/taiwanloling.com\/","title":{"rendered":"\u9996\u9801"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n \u793e\u5718\u6cd5\u4eba\u53f0\u7063\u6a02\u9f61\u5efa\u7bc9\u767c\u5c55\u5354\u6703 | \u5b98\u65b9\u7db2\u7ad9<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+TC:wght@400;600;700&family=Noto+Sans+TC:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n \n <!-- Tailwind Custom Config -->\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n brand: {\n DEFAULT: '#43a8a4', \/\/ Teal\/Blue-Green\n light: '#e6f5f4', \/\/ Light Tint\n hover: '#358c89', \/\/ Hover\n dark: '#26615e', \/\/ Dark Accents\n footer: '#1F4E4B', \/\/ Footer Background\n },\n text: {\n main: '#44484c', \/\/ Global Dark Grey\n light: '#6B7280', \/\/ Secondary Text\n dark: '#1a202c', \/\/ Headings (Darker for contrast)\n },\n accent: {\n gold: '#C5A668', \/\/ Muted Gold\n bright: '#F0C665', \/\/ Footer Gold\n hover: '#FFD700', \/\/ Footer Hover Gold\n bg: '#fff9ef', \/\/ Very light cream background\n },\n fb: {\n blue: '#1877F2', \/\/ Facebook Blue\n bg: '#F0F2F5', \/\/ Facebook Gray\n }\n },\n fontFamily: {\n serif: ['\"Noto Serif TC\"', 'serif'],\n sans: ['\"Noto Sans TC\"', 'sans-serif'],\n },\n boxShadow: {\n 'soft': '0 20px 40px -15px rgba(0, 0, 0, 0.05)',\n 'glow': '0 0 20px rgba(67, 168, 164, 0.15)',\n },\n backgroundImage: {\n 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',\n }\n }\n }\n }\n <\/script>\n\n <style>\n body {\n font-family: 'Noto Sans TC', sans-serif;\n background-color: #FDFDFD;\n color: #44484c;\n overflow-x: hidden;\n }\n \n .chart-wrapper {\n position: relative;\n width: 100%;\n max-width: 800px;\n margin: 0 auto;\n height: 400px;\n max-height: 500px;\n }\n\n \/* Smooth Scroll *\/\n html { scroll-behavior: smooth; }\n\n \/* Navigation Hover Effect *\/\n .nav-link { position: relative; transition: color 0.3s; }\n .nav-link::after {\n content: '';\n position: absolute;\n width: 0;\n height: 2px;\n bottom: -4px;\n left: 50%;\n background-color: #43a8a4;\n transition: all 0.3s ease;\n transform: translateX(-50%);\n }\n .nav-link:hover::after { width: 100%; }\n\n \/* Card Hover Effects *\/\n .hover-card {\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n }\n .hover-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1);\n }\n\n \/* Chain Node Active State *\/\n .chain-node { transition: all 0.3s ease; }\n .chain-node.active {\n background-color: #43a8a4;\n color: white;\n border-color: #43a8a4;\n transform: scale(1.05);\n box-shadow: 0 10px 15px -3px rgba(67, 168, 164, 0.3);\n }\n \n .hide-scrollbar::-webkit-scrollbar { display: none; }\n .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }\n\n \/* Quiz Animation *\/\n .fade-in { animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1); }\n @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }\n .option-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }\n \n \/* Decorative Background Shapes *\/\n .blob {\n position: absolute;\n filter: blur(40px);\n z-index: 0;\n opacity: 0.4;\n animation: float 10s infinite ease-in-out;\n }\n @keyframes float {\n 0% { transform: translate(0, 0); }\n 50% { transform: translate(20px, -20px); }\n 100% { transform: translate(0, 0); }\n }\n <\/style>\n<\/head>\n<body class=\"flex flex-col min-h-screen\">\n\n <!-- Navigation -->\n <header class=\"bg-white\/90 backdrop-blur-md shadow-sm sticky top-0 z-50 border-t-4 border-brand transition-all duration-300\">\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n <div class=\"flex justify-between items-center h-24\">\n <!-- Logo Area -->\n <div class=\"flex-shrink-0 flex items-center cursor-pointer\" onclick=\"window.scrollTo(0,0)\">\n <div class=\"text-2xl font-serif font-bold text-brand tracking-widest\">\n TW<span class=\"text-accent-gold\">LAA<\/span>\n <\/div>\n <\/div>\n\n <!-- Desktop Menu -->\n <nav class=\"hidden md:flex space-x-8 lg:space-x-12\">\n <button onclick=\"scrollToSection('about')\" class=\"nav-link text-text-main hover:text-brand-dark font-medium text-lg tracking-wide\">\u95dc\u65bc\u5354\u6703<\/button>\n <button onclick=\"scrollToSection('quiz')\" class=\"nav-link text-text-main hover:text-brand-dark font-medium text-lg tracking-wide\">\u9000\u4f11\u6e2c\u9a57<\/button>\n <button onclick=\"scrollToSection('knowledge')\" class=\"nav-link text-text-main hover:text-brand-dark font-medium text-lg tracking-wide\">\u7522\u696d\u5730\u5716<\/button>\n <button onclick=\"scrollToSection('services')\" class=\"nav-link text-text-main hover:text-brand-dark font-medium text-lg tracking-wide\">\u5c08\u696d\u670d\u52d9<\/button>\n <button onclick=\"scrollToSection('trends')\" class=\"nav-link text-text-main hover:text-brand-dark font-medium text-lg tracking-wide\">\u8da8\u52e2\u6578\u64da<\/button>\n <button onclick=\"scrollToSection('news')\" class=\"nav-link text-text-main hover:text-brand-dark font-medium text-lg tracking-wide\">\u6700\u65b0\u6587\u7ae0<\/button>\n <\/nav>\n\n <!-- Mobile Menu Button -->\n <div class=\"md:hidden flex items-center\">\n <button id=\"mobile-menu-btn\" class=\"text-text-main hover:text-brand focus:outline-none p-2 rounded-md hover:bg-gray-100 transition\">\n <i class=\"fas fa-bars text-2xl\"><\/i>\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <!-- Mobile Menu -->\n <div id=\"mobile-menu\" class=\"hidden md:hidden bg-white border-t border-gray-100 shadow-xl absolute w-full z-50\">\n <div class=\"px-4 pt-4 pb-6 space-y-2\">\n <button onclick=\"scrollToSection('about')\" class=\"block w-full text-left px-4 py-4 text-xl font-medium text-text-main hover:bg-brand-light hover:text-brand-dark rounded-xl transition\">\u95dc\u65bc\u5354\u6703<\/button>\n <button onclick=\"scrollToSection('quiz')\" class=\"block w-full text-left px-4 py-4 text-xl font-medium text-text-main hover:bg-brand-light hover:text-brand-dark rounded-xl transition\">\u9000\u4f11\u6e2c\u9a57<\/button>\n <button onclick=\"scrollToSection('knowledge')\" class=\"block w-full text-left px-4 py-4 text-xl font-medium text-text-main hover:bg-brand-light hover:text-brand-dark rounded-xl transition\">\u7522\u696d\u5730\u5716<\/button>\n <button onclick=\"scrollToSection('services')\" class=\"block w-full text-left px-4 py-4 text-xl font-medium text-text-main hover:bg-brand-light hover:text-brand-dark rounded-xl transition\">\u5c08\u696d\u670d\u52d9<\/button>\n <button onclick=\"scrollToSection('trends')\" class=\"block w-full text-left px-4 py-4 text-xl font-medium text-text-main hover:bg-brand-light hover:text-brand-dark rounded-xl transition\">\u8da8\u52e2\u6578\u64da<\/button>\n <button onclick=\"scrollToSection('news')\" class=\"block w-full text-left px-4 py-4 text-xl font-medium text-text-main hover:bg-brand-light hover:text-brand-dark rounded-xl transition\">\u6700\u65b0\u6587\u7ae0<\/button>\n <\/div>\n <\/div>\n <\/header>\n\n <!-- Hero Section -->\n <section class=\"relative bg-gradient-to-br from-gray-50 via-white to-brand-light\/30 overflow-hidden pt-10 pb-20 lg:pt-20 lg:pb-28\">\n <!-- Decor Blob -->\n <div class=\"blob bg-brand\/10 w-96 h-96 rounded-full top-0 left-0 -translate-x-1\/2 -translate-y-1\/2\"><\/div>\n <div class=\"blob bg-accent-gold\/10 w-80 h-80 rounded-full bottom-0 right-0 translate-x-1\/3 translate-y-1\/3 animation-delay-2000\"><\/div>\n\n <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"lg:grid lg:grid-cols-12 lg:gap-16 items-center\">\n \n <!-- Text Content -->\n <div class=\"sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left\">\n <div class=\"inline-flex items-center px-4 py-2 rounded-full border border-brand\/30 bg-white shadow-sm mb-8 animate-fade-in-up\">\n <span class=\"flex h-2 w-2 rounded-full bg-brand mr-2\"><\/span>\n <span class=\"text-sm md:text-base font-medium text-brand-dark tracking-wide\">\u63a8\u52d5\u9ad8\u9f61\u793e\u6703\u6c38\u7e8c\u767c\u5c55<\/span>\n <\/div>\n \n <h1 class=\"text-5xl tracking-tight font-extrabold text-text-dark sm:text-6xl md:text-7xl font-serif leading-tight mb-8\">\n <span class=\"block\">\u6253\u9020\u91ab\u990a\u4f4f\u884c<\/span>\n <span class=\"block text-brand relative inline-block\">\n \u8de8\u754c\u6574\u5408\u65b0\u6a19\u6e96\n <!-- Underline decoration -->\n <svg class=\"absolute w-full h-3 -bottom-1 left-0 text-accent-gold opacity-60\" viewBox=\"0 0 100 10\" preserveAspectRatio=\"none\">\n <path d=\"M0 5 Q 50 10 100 5\" stroke=\"currentColor\" stroke-width=\"3\" fill=\"none\" \/>\n <\/svg>\n <\/span>\n <\/h1>\n \n <p class=\"mt-4 text-xl text-text-main leading-relaxed mb-10 font-light\">\n \u672c\u5354\u6703\u81f4\u529b\u65bc\u5efa\u7acb\u53f0\u7063\u9ad8\u9f61\u5c45\u4f4f\u7522\u696d\u6a19\u6e96\u3002<br class=\"hidden lg:block\">\u6211\u5011\u4e32\u806f\u91ab\u7642\u3001\u5efa\u7bc9\u8207\u904b\u71df\uff0c\u5c07\u300c\u88ab\u52d5\u7167\u8b77\u300d\u8f49\u5316\u70ba\u300c\u4e3b\u52d5\u8ce6\u80fd\u300d\u7684\u5171\u751f\u74b0\u5883\u3002\n <\/p>\n \n <div class=\"flex flex-col sm:flex-row gap-4 sm:justify-center lg:justify-start flex-wrap\">\n <button onclick=\"scrollToSection('quiz')\" class=\"px-8 py-4 bg-brand hover:bg-brand-hover text-white text-lg font-bold rounded-full shadow-lg hover:shadow-glow transition-all transform hover:-translate-y-1\">\n \u9000\u4f11\u9748\u9b42\u6e2c\u9a57\n <\/button>\n <button onclick=\"scrollToSection('knowledge')\" class=\"px-8 py-4 bg-white text-brand border-2 border-brand hover:bg-brand-light text-lg font-bold rounded-full transition-all transform hover:-translate-y-1\">\n \u63a2\u7d22\u7522\u696d\u5730\u5716\n <\/button>\n <\/div>\n <\/div>\n\n <!-- Image Content -->\n <div class=\"mt-16 lg:mt-0 lg:col-span-6 relative\">\n <div class=\"relative rounded-3xl overflow-hidden shadow-2xl transform lg:rotate-2 hover:rotate-0 transition duration-500\">\n <img decoding=\"async\" class=\"w-full h-full object-cover\" src=\"https:\/\/taiwanloling.com\/wp-content\/uploads\/2019\/03\/\u6a02\u9f61box-33.png\" alt=\"\u6a02\u9f61\u5efa\u7bc9\u4e3b\u8996\u89ba\">\n <!-- Glass Overlay Card -->\n <div class=\"absolute bottom-6 left-6 right-6 bg-white\/90 backdrop-blur-md p-6 rounded-2xl shadow-lg border border-white\/50 hidden md:block\">\n <div class=\"flex items-center space-x-4\">\n <div class=\"bg-brand\/10 p-3 rounded-full text-brand\">\n <i class=\"fas fa-home text-2xl\"><\/i>\n <\/div>\n <div>\n <p class=\"text-sm text-gray-500 font-medium\">Design for Senior Living<\/p>\n <p class=\"text-lg font-bold text-gray-800\">\u5168\u9f61\u53cb\u5584 \u2022 \u667a\u6167\u5171\u751f<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <!-- Decorative dots -->\n <div class=\"absolute -z-10 -top-10 -right-10 text-brand\/20\">\n <svg width=\"100\" height=\"100\" fill=\"currentColor\">\n <pattern id=\"dots\" x=\"0\" y=\"0\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\">\n <circle cx=\"2\" cy=\"2\" r=\"2\" \/>\n <\/pattern>\n <rect width=\"100\" height=\"100\" fill=\"url(#dots)\" \/>\n <\/svg>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- About Section -->\n <section id=\"about\" class=\"py-24 bg-white relative\">\n <div class=\"max-w-7xl mx-auto px-6 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-20\">\n <span class=\"text-brand font-bold tracking-widest uppercase text-sm bg-brand-light px-4 py-1 rounded-full\">About Us<\/span>\n <h2 class=\"mt-4 text-4xl md:text-5xl font-serif font-bold text-text-dark\">\u6211\u5011\u7684\u89d2\u8272\u8207\u9858\u666f<\/h2>\n <div class=\"w-24 h-1.5 bg-accent-gold mx-auto mt-6 rounded-full\"><\/div>\n <\/div>\n \n <div class=\"grid md:grid-cols-3 gap-8 lg:gap-12\">\n <!-- Card 1 -->\n <div class=\"hover-card bg-white p-10 rounded-3xl shadow-soft border border-gray-100 relative group overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-brand to-brand-light group-hover:h-full group-hover:opacity-5 transition-all duration-500\"><\/div>\n <div class=\"w-20 h-20 bg-brand-light text-brand rounded-2xl flex items-center justify-center text-4xl mb-8 group-hover:scale-110 transition-transform duration-300 shadow-sm\">\n <i class=\"fas fa-balance-scale\"><\/i>\n <\/div>\n <h4 class=\"text-2xl font-bold mb-4 text-text-dark\">\u6a19\u6e96\u63a8\u52d5\u8005<\/h4>\n <p class=\"text-text-main text-lg leading-relaxed\">\n \u5354\u52a9\u5efa\u6848\u5c0e\u5165\u516c\u4fe1\u529b\u8a8d\u8b49\u9ad4\u7cfb\uff0c\u78ba\u4fdd\u5c45\u4f4f\u74b0\u5883\u7b26\u5408\u300c\u5b89\u5168\u3001\u4fbf\u5229\u3001\u53cb\u5584\u300d\u7684\u786c\u9ad4\u8a2d\u8a08\u898f\u7bc4\u3002\n <\/p>\n <\/div>\n\n <!-- Card 2 -->\n <div class=\"hover-card bg-white p-10 rounded-3xl shadow-soft border border-gray-100 relative group overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-accent-gold to-yellow-200 group-hover:h-full group-hover:opacity-5 transition-all duration-500\"><\/div>\n <div class=\"w-20 h-20 bg-accent-bg text-accent-gold rounded-2xl flex items-center justify-center text-4xl mb-8 group-hover:scale-105 transition-transform duration-300 shadow-sm\">\n <i class=\"fas fa-link\"><\/i>\n <\/div>\n <h4 class=\"text-2xl font-bold mb-4 text-text-dark\">\u8cc7\u6e90\u6574\u5408\u5e73\u53f0<\/h4>\n <p class=\"text-text-main text-lg leading-relaxed\">\n \u4e32\u806f\u5efa\u8a2d\u516c\u53f8\u3001\u91ab\u7642\u6a5f\u69cb\u3001\u7cfb\u7d71\u5546\u8207\u91d1\u878d\u55ae\u4f4d\u3002\u6253\u7834\u7522\u696d\u5b64\u5cf6\uff0c\u4fc3\u9032\u8de8\u9818\u57df\u7684\u5408\u4f5c\u8207\u5c0d\u8a71\u3002\n <\/p>\n <\/div>\n\n <!-- Card 3 -->\n <div class=\"hover-card bg-white p-10 rounded-3xl shadow-soft border border-gray-100 relative group overflow-hidden\">\n <div class=\"absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-brand-dark to-brand group-hover:h-full group-hover:opacity-5 transition-all duration-500\"><\/div>\n <div class=\"w-20 h-20 bg-gray-50 text-brand-dark rounded-2xl flex items-center justify-center text-4xl mb-8 group-hover:scale-110 transition-transform duration-300 shadow-sm\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <\/div>\n <h4 class=\"text-2xl font-bold mb-4 text-text-dark\">\u77e5\u8b58\u6559\u80b2\u4e2d\u5fc3<\/h4>\n <p class=\"text-text-main text-lg leading-relaxed\">\n \u63d0\u4f9b\u5c08\u696d\u8ab2\u7a0b\u3001\u8ad6\u58c7\u8207\u570b\u5167\u5916\u53c3\u8a2a\u3002\u57f9\u80b2\u5177\u5099\u300c\u71df\u904b\u601d\u7dad\u300d\u7684\u5efa\u7bc9\u4eba\u624d\u8207\u300c\u7a7a\u9593\u601d\u7dad\u300d\u7684\u7167\u8b77\u4eba\u624d\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Quiz Section (Redesigned) -->\n <section id=\"quiz\" class=\"py-24 bg-brand-light\/30 relative overflow-hidden\">\n <!-- Background Pattern -->\n <div class=\"absolute inset-0 opacity-10\">\n <svg class=\"w-full h-full\" viewBox=\"0 0 100 100\" preserveAspectRatio=\"none\">\n <path d=\"M0 100 C 20 0 50 0 100 100 Z\" fill=\"white\" \/>\n <\/svg>\n <\/div>\n\n <div class=\"max-w-7xl mx-auto px-6 sm:px-6 lg:px-8 flex flex-col items-center relative z-10\">\n \n <div class=\"max-w-md w-full bg-white rounded-2xl shadow-xl overflow-hidden relative min-h-[600px] flex flex-col\">\n <!-- \u9802\u90e8\u88dd\u98fe -->\n <div class=\"h-2 bg-gradient-to-r from-brand to-accent-gold w-full flex-shrink-0\"><\/div>\n \n <!-- 1. \u958b\u59cb\u756b\u9762 (Start Screen) -->\n <div id=\"start-screen\" class=\"p-8 text-center fade-in flex-grow flex flex-col justify-center items-center\">\n <div class=\"w-24 h-24 bg-brand-light rounded-full flex items-center justify-center text-5xl mb-6 text-brand animate-bounce\">\n \ud83c\udf31\n <\/div>\n <h1 class=\"text-3xl font-bold text-gray-800 mb-3\">\u6e2c\u6e2c\u4f60\u7684<br><span class=\"text-brand\">\u9000\u4f11\u9748\u9b42\u52d5\u7269<\/span><\/h1>\n <p class=\"text-gray-500 mb-8 leading-relaxed\">\u9762\u5c0d\u672a\u4f86\u7684\u7b2c\u4e8c\u4eba\u751f\uff0c<br>\u4f60\u662f\u559c\u6b61\u7368\u8655\u7684\u8c93\uff1f\u9084\u662f\u71b1\u611b\u7fa4\u5c45\u7684\u871c\u8702\uff1f<br>\u82b1 30 \u79d2\uff0c\u627e\u51fa\u6700\u9069\u5408\u4f60\u7684\u751f\u6d3b\u65b9\u5f0f\uff01<\/p>\n <button onclick=\"quizStartGame()\" class=\"w-full bg-accent-bright hover:bg-accent-hover text-white font-bold py-4 rounded-xl text-xl shadow-lg transition transform active:scale-95 flex items-center justify-center group\">\n \u958b\u59cb\u6e2c\u9a57 <i class=\"fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform\"><\/i>\n <\/button>\n <\/div>\n \n <!-- 2. \u554f\u984c\u756b\u9762 (Question Screen) -->\n <div id=\"quiz-screen\" class=\"hidden p-8 fade-in flex-grow flex flex-col\">\n <!-- \u9032\u5ea6\u689d -->\n <div class=\"w-full bg-gray-200 rounded-full h-2.5 mb-8 flex-shrink-0\">\n <div id=\"progress-bar\" class=\"bg-brand h-2.5 rounded-full transition-all duration-500 ease-out\" style=\"width: 0%\"><\/div>\n <\/div>\n \n <div class=\"flex-grow flex flex-col justify-center\">\n <h2 id=\"question-text\" class=\"text-2xl font-bold text-gray-800 mb-8 text-center leading-relaxed min-h-[4rem] flex items-center justify-center\">\u984c\u76ee\u8f09\u5165\u4e2d...<\/h2>\n <div id=\"options-container\" class=\"space-y-4\">\n <!-- \u9078\u9805\u6309\u9215\u6703\u7531 JS \u751f\u6210 -->\n <\/div>\n <\/div>\n \n <div class=\"mt-6 text-center text-gray-400 text-sm\">\n \u554f\u984c <span id=\"current-q-num\">1<\/span> \/ 3\n <\/div>\n <\/div>\n \n <!-- 3. \u7d50\u679c\u756b\u9762 (Result Screen) -->\n <div id=\"result-screen\" class=\"hidden p-8 text-center fade-in flex-grow flex flex-col justify-center items-center\">\n <div id=\"result-icon\" class=\"text-7xl mb-4 animate-pulse\"><\/div>\n <h2 class=\"text-lg text-gray-500 font-medium\">\u4f60\u7684\u6e2c\u9a57\u7d50\u679c\u662f...<\/h2>\n <h1 id=\"result-title\" class=\"text-3xl font-bold text-brand-dark mb-4 mt-2\"><\/h1>\n \n <div class=\"bg-brand-light p-5 rounded-xl text-left mb-6 border border-brand\/20 w-full shadow-sm\">\n <p id=\"result-desc\" class=\"text-gray-700 text-sm leading-relaxed mb-3 text-justify\"><\/p>\n <div class=\"font-bold text-brand-dark text-sm border-t border-brand\/20 pt-3 mt-2 flex items-start\">\n <i class=\"fas fa-star text-accent-gold mt-1 mr-2\"><\/i>\n <span>\u63a8\u85a6\u65b9\u6848\uff1a<span id=\"result-recommend\"><\/span><\/span>\n <\/div>\n <\/div>\n \n <div class=\"space-y-3 w-full mt-auto\">\n <a href=\"https:\/\/docs.google.com\/forms\/d\/e\/1FAIpQLScgkI5o2p7CNcRsIUCkvi5FMM1W4yk0se5LSfgvaqMWa9sbew\/viewform\" target=\"_blank\" class=\"flex items-center justify-center w-full bg-brand hover:bg-brand-hover text-white font-bold py-3 rounded-lg shadow transition transform hover:-translate-y-0.5\">\n <i class=\"fas fa-calendar-check mr-2\"><\/i> \u9810\u7d04\u53c3\u89c0\u6211\u7684\u7406\u60f3\u751f\u6d3b\n <\/a>\n <button onclick=\"location.reload()\" class=\"w-full bg-white border-2 border-gray-200 text-gray-600 hover:bg-gray-50 hover:border-gray-300 font-bold py-3 rounded-lg transition flex items-center justify-center\">\n <i class=\"fas fa-redo mr-2\"><\/i> \u91cd\u65b0\u6e2c\u9a57\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Knowledge Hub -->\n <section id=\"knowledge\" class=\"py-24 bg-accent-bg border-t border-gray-100 relative overflow-hidden\">\n <!-- Background Pattern -->\n <div class=\"absolute inset-0 opacity-[0.03]\" style=\"background-image: radial-gradient(#43a8a4 1px, transparent 1px); background-size: 30px 30px;\"><\/div>\n \n <div class=\"max-w-7xl mx-auto px-6 sm:px-6 lg:px-8 relative z-10\">\n <div class=\"mb-16 md:text-center\">\n <span class=\"text-brand font-bold tracking-widest uppercase text-sm bg-white px-4 py-1 rounded-full shadow-sm\">Knowledge Hub<\/span>\n <h2 class=\"mt-4 text-4xl md:text-5xl font-serif font-bold text-text-dark\">\u5927\u5065\u5eb7\u7522\u696d\u5168\u5149\u8b5c<\/h2>\n <p class=\"mt-6 text-text-main text-xl max-w-3xl mx-auto leading-relaxed\">\n \u5354\u6703\u81f4\u529b\u65bc\u63a8\u52d5\u7522\u696d\u5404\u74b0\u7bc0\u7684\u7121\u7e2b\u929c\u63a5\u3002\u5f9e\u5065\u5eb7\u4fc3\u9032\u5230\u9577\u7167\u670d\u52d9\uff0c\u6211\u5011\u5354\u52a9\u6703\u54e1\u91d0\u6e05\u5e02\u5834\u5b9a\u4f4d\u3002\n <\/p>\n <\/div>\n\n <!-- Grid Step Navigation -->\n <div class=\"relative mb-12\">\n <div class=\"grid grid-cols-3 lg:grid-cols-4 gap-3 lg:gap-4\" id=\"chain-container\">\n <!-- JS will inject buttons here -->\n <\/div>\n <\/div>\n\n <!-- Dynamic Content Area -->\n <div class=\"bg-white rounded-3xl shadow-xl border border-gray-100 p-8 lg:p-12 grid md:grid-cols-2 gap-12 relative overflow-hidden transition-all duration-500\">\n <!-- Decorative Circle -->\n <div class=\"absolute -right-20 -top-20 w-80 h-80 bg-brand-light rounded-full opacity-50 blur-3xl\"><\/div>\n\n <div class=\"relative z-10 flex flex-col justify-center\">\n <div class=\"inline-block self-start mb-6\">\n <span id=\"stage-category\" class=\"text-sm font-bold text-white tracking-widest uppercase bg-brand px-4 py-1.5 rounded-full shadow-md\">\u7522\u696d\u74b0\u7bc0<\/span>\n <\/div>\n \n <h3 id=\"stage-title\" class=\"text-4xl font-bold text-brand-dark mb-6 leading-tight\">\u8acb\u9078\u64c7\u4e0a\u65b9\u968e\u6bb5<\/h3>\n <p id=\"stage-desc\" class=\"text-text-main text-xl leading-relaxed font-light mb-8\">\n \u9ede\u64ca\u4e0a\u65b9\u7684\u6d41\u7a0b\u5716\uff0c\u63a2\u7d22\u5927\u5065\u5eb7\u7522\u696d\u7684\u5b8c\u6574\u751f\u614b\u7cfb\u3002\u5354\u6703\u63d0\u4f9b\u6b64\u5730\u5716\u5354\u52a9\u516c\u773e\u7406\u89e3\u300c\u91ab\u990a\u5408\u4e00\u300d\u7684\u5fc5\u8981\u6027\u3002\n <\/p>\n \n <div class=\"bg-gray-50 p-6 rounded-2xl border-l-4 border-brand\">\n <h4 class=\"font-bold text-lg text-brand-dark mb-2 flex items-center\"><i class=\"fas fa-bullseye mr-2\"><\/i> \u5354\u6703\u63a8\u52d5\u91cd\u9ede\uff1a<\/h4>\n <p id=\"stage-focus\" class=\"text-lg text-text-main\">\u5efa\u7acb\u8de8\u754c\u5c0d\u8a71\u6a5f\u5236\uff0c\u907f\u514d\u7522\u696d\u65b7\u93c8\u3002<\/p>\n <\/div>\n <\/div>\n\n <div class=\"relative z-10 bg-white\/50 rounded-2xl p-6 md:p-8 border border-gray-100\">\n <h4 class=\"font-bold text-text-dark border-b border-gray-200 pb-4 mb-6 text-xl flex items-center\">\n <span class=\"w-2 h-8 bg-accent-gold rounded-full mr-3\"><\/span>\n \u76f8\u95dc\u9818\u57df\u8207\u4ee3\u8868\u6027\u7bc4\u7587\n <\/h4>\n <ul id=\"stage-examples\" class=\"space-y-4 text-lg text-text-main\">\n <li class=\"flex items-start\"><span class=\"mr-3 text-brand\"><i class=\"fas fa-check-circle\"><\/i><\/span> \u9078\u64c7\u968e\u6bb5\u4ee5\u67e5\u770b\u8a73\u7d30\u8cc7\u8a0a<\/li>\n <\/ul>\n \n <div class=\"mt-8 pt-6 border-t border-gray-200\">\n <h4 class=\"font-bold text-text-dark mb-3 text-lg\">\u26a0\ufe0f \u7522\u696d\u75db\u9ede\u8207\u7f3a\u53e3<\/h4>\n <p id=\"stage-gap\" class=\"text-lg text-gray-500 italic bg-red-50 p-4 rounded-xl border border-red-100\">\n \u5e02\u5834\u7f3a\u4e4f\u6574\u5408\u5e73\u53f0\uff0c\u5c0e\u81f4\u670d\u52d9\u4e0d\u9023\u7e8c\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Services Section -->\n <section id=\"services\" class=\"py-24 bg-white relative\">\n <div class=\"max-w-7xl mx-auto px-6 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-20\">\n <span class=\"text-brand font-bold tracking-widest uppercase text-sm bg-brand-light px-4 py-1 rounded-full\">Services<\/span>\n <h2 class=\"mt-4 text-4xl md:text-5xl font-serif font-bold text-text-dark\">\u5354\u6703\u6838\u5fc3\u670d\u52d9<\/h2>\n <p class=\"mt-6 text-xl text-text-main\">\u5354\u52a9\u6703\u54e1\u638c\u63e1\u9ad8\u9f61\u7522\u696d\u8da8\u52e2\uff0c\u63d0\u5347\u5c08\u696d\u7af6\u722d\u529b<\/p>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-8\">\n <!-- S1 -->\n <div class=\"service-card group bg-white p-8 rounded-3xl shadow-sm border border-gray-100 hover:shadow-xl hover:border-brand\/30 transition-all duration-300\">\n <div class=\"mb-6 w-16 h-16 bg-brand-light text-brand rounded-2xl flex items-center justify-center text-3xl group-hover:bg-brand group-hover:text-white transition-colors duration-300\">\n <i class=\"fas fa-medal\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-text-dark mb-4\">\u9280\u5149\u597d\u5c45\u8a8d\u8b49<\/h3>\n <p class=\"text-text-main mb-6 leading-relaxed\">\u5354\u52a9\u63a8\u5ee3\u300c\u9280\u5149\u597d\u5c45\u300d\u8a8d\u8b49\uff0c\u5354\u52a9\u6253\u9020\u300c\u5b89\u5168\u3001\u4fbf\u5229\u3001\u53cb\u5584\u300d\u7684\u6a02\u9f61\u5b89\u5c45\u6240\u3002<\/p>\n <a href=\"https:\/\/www.silverlightalliance.com\/%E8%AA%8D%E8%AD%98%E5%A5%BD%E5%B1%85%E8%AA%8D%E8%AD%89\" target=\"_blank\" class=\"inline-flex items-center text-brand font-bold hover:text-brand-dark transition-colors\">\n \u8a8d\u8b58\u597d\u5c45\u8a8d\u8b49 <i class=\"fas fa-arrow-right ml-2 text-sm\"><\/i>\n <\/a>\n <\/div>\n <!-- S2 -->\n <div class=\"service-card group bg-white p-8 rounded-3xl shadow-sm border border-gray-100 hover:shadow-xl hover:border-brand\/30 transition-all duration-300\">\n <div class=\"mb-6 w-16 h-16 bg-blue-50 text-blue-500 rounded-2xl flex items-center justify-center text-3xl group-hover:bg-blue-500 group-hover:text-white transition-colors duration-300\">\n <i class=\"fas fa-chalkboard-teacher\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-text-dark mb-4\">\u6559\u80b2\u57f9\u8a13<\/h3>\n <p class=\"text-text-main mb-6 leading-relaxed\">\u8209\u8fa6\u9577\u7167\u5efa\u7bc9\u898f\u5283\u5e2b\u3001\u71df\u904b\u7ba1\u7406\u5e2b\u8a8d\u8b49\u8ab2\u7a0b\u3002\u57f9\u80b2\u8de8\u9818\u57df\u5c08\u696d\u4eba\u624d\u3002<\/p>\n <a href=\"https:\/\/www.facebook.com\/taiwanloveling\" target=\"_blank\" class=\"inline-flex items-center text-blue-500 font-bold hover:text-blue-700 transition-colors\">\n \u8ffd\u8e64\u958b\u8ab2\u8a0a\u606f <i class=\"fas fa-arrow-right ml-2 text-sm\"><\/i>\n <\/a>\n <\/div>\n <!-- S3 -->\n <div class=\"service-card group bg-white p-8 rounded-3xl shadow-sm border border-gray-100 hover:shadow-xl hover:border-brand\/30 transition-all duration-300\">\n <div class=\"mb-6 w-16 h-16 bg-amber-50 text-amber-500 rounded-2xl flex items-center justify-center text-3xl group-hover:bg-amber-500 group-hover:text-white transition-colors duration-300\">\n <i class=\"fas fa-handshake\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-text-dark mb-4\">\u7522\u696d\u5a92\u5408<\/h3>\n <p class=\"text-text-main mb-6 leading-relaxed\">\u5b9a\u671f\u8209\u8fa6\u5a92\u5408\u6703\uff0c\u5354\u52a9\u5730\u4e3b\u5c0d\u63a5\u904b\u71df\u65b9\u3001\u5efa\u8a2d\u65b9\u5c0d\u63a5\u8a2d\u5099\u5546\u3002<\/p>\n <a href=\"tel:0423380002\" class=\"inline-flex items-center text-amber-500 font-bold hover:text-amber-700 transition-colors\">\n \u7533\u8acb\u5a92\u5408 <i class=\"fas fa-arrow-right ml-2 text-sm\"><\/i>\n <\/a>\n <\/div>\n <!-- S4 -->\n <div class=\"service-card group bg-white p-8 rounded-3xl shadow-sm border border-gray-100 hover:shadow-xl hover:border-brand\/30 transition-all duration-300\">\n <div class=\"mb-6 w-16 h-16 bg-red-50 text-red-500 rounded-2xl flex items-center justify-center text-3xl group-hover:bg-red-500 group-hover:text-white transition-colors duration-300\">\n <i class=\"fas fa-bullhorn\"><\/i>\n <\/div>\n <h3 class=\"text-2xl font-bold text-text-dark mb-4\">\u653f\u7b56\u5021\u8b70<\/h3>\n <p class=\"text-text-main mb-6 leading-relaxed\">\u4ee3\u8868\u7522\u696d\u5411\u653f\u5e9c\u5efa\u8a00\uff0c\u512a\u5316\u9577\u7167\u8207\u5efa\u7bc9\u6cd5\u898f\uff0c\u722d\u53d6\u7522\u696d\u88dc\u52a9\u3002<\/p>\n <a href=\"#\" class=\"inline-flex items-center text-red-500 font-bold hover:text-red-700 transition-colors\">\n \u95b1\u8b80\u767d\u76ae\u66f8 <i class=\"fas fa-arrow-right ml-2 text-sm\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Trends Section -->\n <section id=\"trends\" class=\"py-24 bg-gray-50 border-t border-gray-100\">\n <div class=\"max-w-7xl mx-auto px-6 sm:px-6 lg:px-8\">\n <div class=\"grid lg:grid-cols-2 gap-16 items-center\">\n <div>\n <span class=\"text-brand font-bold tracking-widest uppercase text-sm bg-white px-4 py-1 rounded-full shadow-sm\">Market Insights<\/span>\n <h2 class=\"mt-4 text-4xl font-serif font-bold text-text-dark mb-8 leading-tight\">\u70ba\u4ec0\u9ebc\u300c\u6a02\u9f61\u5efa\u7bc9\u300d<br>\u662f\u672a\u4f86\u525b\u9700\uff1f<\/h2>\n <p class=\"text-text-main text-xl mb-10 leading-relaxed font-light\">\n \u96a8\u8457\u53f0\u7063\u9032\u5165\u8d85\u9ad8\u9f61\u793e\u6703\uff0c\u50b3\u7d71\u7684\u300c\u990a\u8001\u9662\u300d\u5df2\u7121\u6cd5\u6eff\u8db3\u5e02\u5834\u9700\u6c42\u3002\u65b0\u4e00\u4ee3\u9577\u8005\u8ffd\u6c42\u7684\u662f<span class=\"font-bold text-brand\">\u300c\u8ce6\u80fd\u300d\u3001\u300c\u5171\u5c45\u300d\u8207\u300c\u6301\u7e8c\u793e\u6703\u53c3\u8207\u300d<\/span>\u3002\n <\/p>\n\n <ul class=\"space-y-6\">\n <li class=\"flex items-center text-text-main text-lg bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <span class=\"w-8 h-8 bg-brand-light text-brand rounded-full mr-4 flex items-center justify-center flex-shrink-0\"><i class=\"fas fa-chart-line\"><\/i><\/span>\n <span>2025\u5e74\u53f0\u7063\u9081\u5165\u8d85\u9ad8\u9f61\u793e\u6703 (20%\u4eba\u53e3 > 65\u6b72)<\/span>\n <\/li>\n <li class=\"flex items-center text-text-main text-lg bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <span class=\"w-8 h-8 bg-brand-light text-brand rounded-full mr-4 flex items-center justify-center flex-shrink-0\"><i class=\"fas fa-home\"><\/i><\/span>\n <span>\u300c\u5728\u5730\u8001\u5316\u300d\u653f\u7b56\u63a8\u52d5\u793e\u5340\u578b\u7167\u8b77\u8a2d\u65bd\u9700\u6c42<\/span>\n <\/li>\n <li class=\"flex items-center text-text-main text-lg bg-white p-4 rounded-xl shadow-sm border border-gray-100\">\n <span class=\"w-8 h-8 bg-brand-light text-brand rounded-full mr-4 flex items-center justify-center flex-shrink-0\"><i class=\"fas fa-sync-alt\"><\/i><\/span>\n <span>\u8cc7\u7522\u6d3b\u5316\u8da8\u52e2\uff1a\u5c07\u9592\u7f6e\u8cc7\u7522\u8f49\u578b\u70ba\u5eb7\u990a\u8a2d\u65bd<\/span>\n <\/li>\n <\/ul>\n <\/div>\n \n <div class=\"bg-white p-8 lg:p-12 rounded-3xl shadow-xl border border-gray-100 relative\">\n <div class=\"text-center mb-8\">\n <h4 class=\"text-xl font-bold text-gray-800\">\u9ad8\u9f61\u793e\u6703\u9700\u6c42\u8207\u4f9b\u7d66\u7f3a\u53e3\u793a\u610f<\/h4>\n <p class=\"text-sm text-gray-500 mt-2\">\u8cc7\u6599\u4f86\u6e90\uff1a\u570b\u5bb6\u767c\u5c55\u59d4\u54e1\u6703\u3001\u5167\u653f\u90e8\u7d71\u8a08\u8655<\/p>\n <\/div>\n <div class=\"chart-wrapper\">\n <canvas id=\"marketChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- FB Latest News -->\n <section id=\"news\" class=\"py-24 bg-white\">\n <div class=\"max-w-7xl mx-auto px-6 sm:px-6 lg:px-8\">\n <div class=\"text-center mb-20\">\n <span class=\"text-brand font-bold tracking-widest uppercase text-sm bg-brand-light px-4 py-1 rounded-full\">News<\/span>\n <h2 class=\"mt-4 text-4xl md:text-5xl font-serif font-bold text-text-dark\">\u6700\u65b0\u6587\u7ae0\u8207\u52d5\u614b<\/h2>\n <div class=\"w-24 h-1.5 bg-accent-gold mx-auto mt-6 rounded-full\"><\/div>\n <\/div>\n\n <!-- Changed grid to support 4 items properly -->\n <div class=\"grid md:grid-cols-2 lg:grid-cols-4 gap-6\">\n <!-- 1. Co-housing Website Link (New Feature) -->\n <div class=\"bg-white border border-gray-100 rounded-3xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-300 flex flex-col h-[600px] group relative\">\n <!-- Image\/Preview Area -->\n <div class=\"h-1\/2 bg-gray-100 relative overflow-hidden\">\n <!-- Using main image as preview placeholder -->\n <img decoding=\"async\" src=\"https:\/\/taiwanloling.com\/wp-content\/uploads\/2019\/03\/\u6a02\u9f61box-33.png\" alt=\"\u5408\u52e4\u5065\u5eb7\u5171\u751f\u5b85\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n <div class=\"absolute inset-0 bg-black\/20 group-hover:bg-black\/10 transition-colors\"><\/div>\n <div class=\"absolute inset-0 flex items-center justify-center\">\n <span class=\"w-16 h-16 bg-white\/90 rounded-full flex items-center justify-center text-brand text-2xl shadow-lg transform scale-0 group-hover:scale-100 transition-transform duration-300 delay-100\">\n <i class=\"fas fa-external-link-alt\"><\/i>\n <\/span>\n <\/div>\n <\/div>\n <!-- Content Area -->\n <div class=\"p-6 flex flex-col flex-grow bg-gradient-to-b from-white to-gray-50\">\n <div class=\"mb-3\">\n <span class=\"text-xs font-bold tracking-wider text-accent-gold uppercase bg-accent-bg px-2 py-1 rounded\">Official Website<\/span>\n <\/div>\n <h3 class=\"text-xl font-bold text-brand-dark mb-3 leading-tight\">\u5408\u52e4\u5065\u5eb7\u5171\u751f\u5b85<br>\u70cf\u65e5\u9928<\/h3>\n <p class=\"text-sm text-gray-500 mb-6 leading-relaxed line-clamp-4 flex-grow\">\n \u63a2\u7d22\u5168\u53f0\u9996\u5ea7\u5eb7\u990a\u5171\u751f\u5b85\uff01\u6574\u5408\u4f4f\u5bbf\u3001\u9910\u98f2\u3001\u5eb7\u990a\u8207\u793e\u5340\u6d3b\u52d5\uff0c\u70ba\u9280\u9aee\u65cf\u6253\u9020\u300c\u6d3b\u8e8d\u8001\u5316\u300d\u7684\u7406\u60f3\u751f\u6d3b\u5834\u57df\u3002\n <\/p>\n <a href=\"https:\/\/www.twhochin.com\/%e7%83%8f%e6%97%a5%e9%a4%a8\/\" target=\"_blank\" class=\"w-full block text-center bg-brand hover:bg-brand-hover text-white font-bold py-3 rounded-xl shadow-md transition-all transform group-hover:-translate-y-1\">\n \u524d\u5f80\u5b98\u65b9\u7db2\u7ad9 <i class=\"fas fa-arrow-right ml-1\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- 2. Hochin FB Feed -->\n <div class=\"bg-white p-2 border border-gray-100 rounded-3xl shadow-xl overflow-hidden h-[600px] hover:shadow-2xl transition-shadow duration-300\">\n <iframe src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fhochincohousingcompound&tabs=timeline&width=500&height=600&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId\" width=\"100%\" height=\"100%\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"><\/iframe>\n <\/div>\n\n <!-- 3. Association FB Feed -->\n <div class=\"bg-white p-2 border border-gray-100 rounded-3xl shadow-xl overflow-hidden h-[600px] hover:shadow-2xl transition-shadow duration-300\">\n <iframe src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2Ftaiwanloveling&tabs=timeline&width=500&height=600&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId\" width=\"100%\" height=\"100%\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"><\/iframe>\n <\/div>\n\n <!-- 4. SC158 Design FB Feed -->\n <div class=\"bg-white p-2 border border-gray-100 rounded-3xl shadow-xl overflow-hidden h-[600px] hover:shadow-2xl transition-shadow duration-300\">\n <iframe src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fsc158design&tabs=timeline&width=500&height=600&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId\" width=\"100%\" height=\"100%\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"><\/iframe>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- Footer -->\n <footer class=\"bg-brand-footer text-white pt-24 pb-12 font-sans border-t-8 border-accent-gold relative\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-8 relative z-10\">\n <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 lg:gap-8 mb-16\">\n \n <!-- Column 1: Branding -->\n <div class=\"lg:col-span-2\">\n <div class=\"flex items-center mb-8\">\n <div class=\"h-16 w-16 bg-accent-gold rounded-xl flex items-center justify-center text-brand-footer font-serif font-bold text-4xl mr-4 shadow-lg\">\u6a02<\/div>\n <h2 class=\"text-3xl font-serif font-bold tracking-wider text-white leading-tight\">\n \u53f0\u7063\u6a02\u9f61<br><span class=\"text-accent-gold\">\u5efa\u7bc9\u767c\u5c55\u5354\u6703<\/span>\n <\/h2>\n <\/div>\n <p class=\"text-gray-300 text-lg leading-relaxed opacity-95 mb-8 max-w-md\">\n \u81f4\u529b\u65bc\u6253\u9020\u9069\u5408\u5168\u9f61\u5171\u751f\u7684\u5c45\u4f4f\u74b0\u5883\uff0c\u63a8\u52d5\u7522\u696d\u6a19\u6e96\uff0c\u4fc3\u9032\u8de8\u754c\u4ea4\u6d41\u3002\u6211\u5011\u76f8\u4fe1\uff0c\u597d\u7684\u5efa\u7bc9\u80fd\u6eab\u67d4\u5730\u627f\u63a5\u6bcf\u4e00\u6bb5\u751f\u547d\u6b77\u7a0b\u3002\n <\/p>\n <div class=\"flex space-x-4\">\n <a href=\"https:\/\/www.facebook.com\/taiwanloveling\" target=\"_blank\" class=\"w-12 h-12 rounded-full bg-white\/10 flex items-center justify-center hover:bg-accent-gold hover:text-brand-footer transition-all duration-300 border border-white\/20 group\">\n <i class=\"fab fa-facebook-f text-xl group-hover:scale-110 transition-transform\"><\/i>\n <\/a>\n <a href=\"https:\/\/www.youtube.com\/@%E6%A8%82%E9%BD%A1%E5%BB%BA%E7%AF%89\" target=\"_blank\" class=\"w-12 h-12 rounded-full bg-white\/10 flex items-center justify-center hover:bg-accent-gold hover:text-brand-footer transition-all duration-300 border border-white\/20 group\">\n <i class=\"fab fa-youtube text-xl group-hover:scale-110 transition-transform\"><\/i>\n <\/a>\n <\/div>\n <\/div>\n\n <!-- Column 2: Quick Links -->\n <div>\n <h3 class=\"text-xl font-bold mb-8 text-accent-gold tracking-widest border-b border-white\/20 pb-2 inline-block\">\u5feb\u901f\u9023\u7d50<\/h3>\n <ul class=\"space-y-4 text-lg text-gray-300 font-light\">\n <li><button onclick=\"scrollToSection('about')\" class=\"hover:text-accent-gold hover:translate-x-1 transition-all duration-200\">\u95dc\u65bc\u5354\u6703<\/button><\/li>\n <li><button onclick=\"scrollToSection('quiz')\" class=\"hover:text-accent-gold hover:translate-x-1 transition-all duration-200\">\u9000\u4f11\u6e2c\u9a57<\/button><\/li>\n <li><button onclick=\"scrollToSection('knowledge')\" class=\"hover:text-accent-gold hover:translate-x-1 transition-all duration-200\">\u7522\u696d\u5730\u5716<\/button><\/li>\n <li><button onclick=\"scrollToSection('services')\" class=\"hover:text-accent-gold hover:translate-x-1 transition-all duration-200\">\u5c08\u696d\u670d\u52d9<\/button><\/li>\n <li><button onclick=\"scrollToSection('trends')\" class=\"hover:text-accent-gold hover:translate-x-1 transition-all duration-200\">\u8da8\u52e2\u6578\u64da<\/button><\/li>\n <li><button onclick=\"scrollToSection('news')\" class=\"hover:text-accent-gold hover:translate-x-1 transition-all duration-200\">\u6700\u65b0\u6587\u7ae0<\/button><\/li>\n <\/ul>\n <\/div>\n\n <!-- Column 3: Contact -->\n <div>\n <h3 class=\"text-xl font-bold mb-8 text-accent-gold tracking-widest border-b border-white\/20 pb-2 inline-block\">\u806f\u7d61\u6211\u5011<\/h3>\n <ul class=\"space-y-6 text-lg text-gray-300 font-light\">\n <li class=\"flex items-start\">\n <i class=\"fas fa-map-marker-alt mt-1.5 mr-4 text-accent-gold text-sm\"><\/i>\n <div>\n <strong class=\"text-white block mb-1\">\u65b0\u5317\u7e3d\u6703<\/strong>\n <a href=\"tel:0285215329\" class=\"hover:text-white transition-colors\">(02) 8521-5329<\/a>\n <span class=\"block text-sm opacity-60 mt-1\">FAX: (02) 8521-5327<\/span>\n <\/div>\n <\/li>\n <li class=\"flex items-start\">\n <i class=\"fas fa-map-marker-alt mt-1.5 mr-4 text-accent-gold text-sm\"><\/i>\n <div>\n <strong class=\"text-white block mb-1\">\u53f0\u4e2d\u8fa6\u516c\u5ba4<\/strong>\n <a href=\"tel:0423765012\" class=\"hover:text-white transition-colors\">(04) 2376-5012<\/a>\n <\/div>\n <\/li>\n <li class=\"pt-4\">\n <a href=\"mailto:contact@taiwanloling.org.tw\" class=\"inline-flex items-center justify-center w-full px-6 py-3 border border-white\/30 rounded-lg hover:bg-white hover:text-brand-footer transition-all duration-300 group\">\n <i class=\"far fa-envelope mr-2 group-hover:scale-110 transition-transform\"><\/i> \u767c\u9001\u90f5\u4ef6\n <\/a>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n\n <div class=\"border-t border-white\/10 pt-8 flex flex-col md:flex-row justify-between items-center text-sm text-gray-500 font-light\">\n <p>© 2023 \u793e\u5718\u6cd5\u4eba\u53f0\u7063\u6a02\u9f61\u5efa\u7bc9\u767c\u5c55\u5354\u6703. All Rights Reserved.<\/p>\n <p class=\"mt-4 md:mt-0 flex items-center\">\n Made with <i class=\"fas fa-heart text-red-500 mx-1\"><\/i> for Seniors\n <\/p>\n <\/div>\n <\/div>\n <\/footer>\n\n <!-- JavaScript Logic -->\n <script>\n \/\/ --- \u7522\u696d\u5730\u5716 Logic ---\n const industryStages = [\n { id: 1, title: \"1. \u4fc3\u9032\u5065\u5eb7\", focus: \"Lifestyle\", desc: \"\u900f\u904e\u98f2\u98df\u3001\u904b\u52d5\u8207\u751f\u6d3b\u578b\u614b\u7ba1\u7406\uff0c\u7dad\u6301\u8eab\u9ad4\u6700\u4f73\u6a5f\u80fd\u3002\", examples: [\"\u904b\u52d5\u5065\u8eab\u7522\u696d\", \"\u71df\u990a\u98df\u54c1\u8207\u751f\u6280\", \"\u5065\u5eb7\u65c5\u904a\u898f\u5283\"], gap: \"\u7f3a\u4e4f\u91dd\u5c0d\u4e2d\u9ad8\u9f61\u65cf\u7fa4\u7684\u5c08\u696d\u904b\u52d5\u8655\u65b9\u8207\u5b89\u5168\u5834\u57df\u3002\", assocRole: \"\u63a8\u5ee3\u901a\u7528\u8a2d\u8a08\u904b\u52d5\u7a7a\u9593\u6a19\u6e96\u3002\" },\n { id: 2, title: \"2. \u9810\u9632\u75be\u75c5\", focus: \"Prevention\", desc: \"\u900f\u904e\u5b9a\u671f\u6aa2\u67e5\u3001\u7be9\u6aa2\u8207\u7cbe\u6e96\u91ab\u7642\uff0c\u63d0\u65e9\u767c\u73fe\u6f5b\u5728\u98a8\u96aa\u3002\", examples: [\"\u5065\u6aa2\u4e2d\u5fc3\", \"\u57fa\u56e0\u6aa2\u6e2c\", \"\u7a7f\u6234\u5f0f\u5065\u5eb7\u76e3\u6e2c\"], gap: \"\u5065\u6aa2\u6578\u64da\u672a\u8207\u5f8c\u7e8c\u751f\u6d3b\u6539\u5584\u65b9\u6848\u6709\u6548\u4e32\u806f\u3002\", assocRole: \"\u5021\u8b70\u5065\u5eb7\u6578\u64da\u8207\u5c45\u4f4f\u7a7a\u9593\u7684IoT\u6574\u5408\u3002\" },\n { id: 3, title: \"3. \u5ef6\u7de9\u5931\u80fd\", focus: \"Intervention\", desc: \"\u91dd\u5c0d\u4e9e\u5065\u5eb7\u65cf\u7fa4\uff0c\u63d0\u4f9b\u8a8d\u77e5\u8a13\u7df4\u8207\u65e9\u671f\u4ecb\u5165\uff0c\u5ef6\u9577\u5065\u5eb7\u9918\u547d\u3002\", examples: [\"\u8a8d\u77e5\u8a13\u7df4\u4e2d\u5fc3\", \"\u793e\u5340\u95dc\u61f7\u64da\u9ede\", \"\u65e9\u671f\u4ecb\u5165\u6a5f\u69cb\"], gap: \"\u670d\u52d9\u96f6\u6563\uff0c\u4e14\u7f3a\u4e4f\u6a19\u6e96\u5316\u7684\u793e\u5340\u4ecb\u5165\u7a7a\u9593\u3002\", assocRole: \"\u5236\u5b9a\u793e\u5340\u516c\u8a2d\u8f49\u578b\u70ba\u5065\u5eb7\u4fc3\u9032\u7ad9\u7684\u898f\u7bc4\u3002\" },\n { id: 4, title: \"4. \u91ab\u7642\u4fdd\u5065\", focus: \"Medical\", desc: \"\u6025\u6027\u671f\u7684\u81e8\u5e8a\u6cbb\u7642\u8207\u85e5\u7269\u652f\u6301\uff0c\u662f\u751f\u547d\u5065\u5eb7\u7684\u5b88\u9580\u54e1\u3002\", examples: [\"\u7d9c\u5408\u91ab\u9662\", \"\u5c08\u79d1\u8a3a\u6240\", \"\u9023\u9396\u85e5\u5c40\"], gap: \"\u51fa\u9662\u5f8c\u7f3a\u4e4f\u904e\u6e21\u671f\u7684\u7167\u8b77\u929c\u63a5 (Post-Acute Gap)\u3002\", assocRole: \"\u63a8\u52d5\u300c\u91ab\u990a\u5408\u4e00\u300d\u5efa\u7bc9\u898f\u5283\uff0c\u8b93\u91ab\u7642\u8cc7\u6e90\u9032\u5165\u793e\u5340\u3002\" },\n { id: 5, title: \"5. \u6cbb\u7642\u7167\u8b77\", focus: \"Post-Acute\", desc: \"\u624b\u8853\u6216\u6025\u75c7\u5f8c\u7684\u9ec3\u91d1\u6062\u5fa9\u671f\u7167\u9867\u3002\", examples: [\"\u6025\u6027\u5f8c\u7167\u9867(PAC)\u75c5\u623f\", \"\u5c45\u5bb6\u8b77\u7406\u6240\", \"\u5fa9\u5065\u4e2d\u5fc3\"], gap: \"\u50b3\u7d71\u4f4f\u5b85\u7f3a\u4e4f\u7121\u969c\u7919\u8a2d\u65bd\uff0c\u5c0e\u81f4\u5c45\u5bb6\u7167\u8b77\u56f0\u96e3\u3002\", assocRole: \"\u63a8\u5ee3\u5168\u9f61\u53cb\u5584\u4f4f\u5b85\u8a8d\u8b49\uff0c\u964d\u4f4e\u5c45\u5bb6\u7167\u8b77\u9580\u6abb\u3002\" },\n { id: 6, title: \"6. \u8ce6\u80fd\u8a13\u7df4\", focus: \"Empowerment\", desc: \"\u5f37\u8abf\u300c\u81ea\u7acb\u652f\u63f4\u300d\uff0c\u8a13\u7df4\u9577\u8005\u6062\u5fa9\u751f\u6d3b\u81ea\u7406\u80fd\u529b\uff0c\u800c\u975e\u55ae\u7d14\u88ab\u7167\u9867\u3002\", examples: [\"\u81ea\u7acb\u652f\u63f4\u6a5f\u69cb\", \"\u65e5\u9593\u7167\u9867\u4e2d\u5fc3\", \"\u8f14\u5177\u79df\u8cc3\"], gap: \"\u50b3\u7d71\u7167\u8b77\u89c0\u5ff5\u504f\u5411\u300c\u66ff\u4ee3\u300d\uff0c\u800c\u975e\u300c\u8ce6\u80fd\u300d\u3002\", assocRole: \"\u5f15\u9032\u570b\u969b\u300c\u6e1b\u6cd5\u7167\u9867\u300d\u7a7a\u9593\u8a2d\u8a08\u7406\u5ff5\u3002\" },\n { id: 7, title: \"7. \u9577\u7167\u670d\u52d9\", focus: \"Long-term\", desc: \"\u5931\u80fd\u5931\u667a\u5f8c\u7684\u9577\u671f\u7167\u9867\u670d\u52d9\uff0c\u9700\u9ad8\u5ea6\u5c08\u696d\u4ecb\u5165\u3002\", examples: [\"\u4f4f\u5bbf\u578b\u9577\u7167\u6a5f\u69cb\", \"\u990a\u8b77\u4e2d\u5fc3\", \"\u5931\u667a\u5718\u9ad4\u5bb6\u5c4b\"], gap: \"\u6a5f\u69cb\u9130\u907f\u6548\u61c9\u56b4\u91cd\uff0c\u4e14\u8207\u793e\u5340\u9694\u96e2\u3002\", assocRole: \"\u63a8\u52d5\u300c\u5171\u751f\u5b85\u300d\u6a21\u5f0f\uff0c\u8b93\u9577\u7167\u6a5f\u69cb\u793e\u5340\u5316\u3001\u53bb\u6a19\u7c64\u5316\u3002\" }\n ];\n\n function initKnowledgeHub() {\n const container = document.getElementById('chain-container');\n industryStages.forEach((stage, index) => {\n const btn = document.createElement('button');\n btn.className = `chain-node w-full px-2 py-3 lg:px-6 lg:py-6 rounded-xl border border-gray-200 bg-white text-sm sm:text-base lg:text-xl font-bold text-text-main hover:border-brand hover:text-brand whitespace-normal h-auto transition-all flex items-center justify-center text-center min-h-[80px]`;\n btn.textContent = stage.title;\n btn.onclick = () => selectStage(index);\n container.appendChild(btn);\n });\n selectStage(0);\n }\n\n function selectStage(index) {\n const stage = industryStages[index];\n const buttons = document.querySelectorAll('.chain-node');\n \n buttons.forEach((btn, i) => {\n if(i === index) {\n btn.classList.add('active'); \n btn.classList.remove('bg-white', 'text-text-main', 'border-gray-200');\n } else {\n btn.classList.remove('active');\n btn.classList.add('bg-white', 'text-text-main', 'border-gray-200');\n }\n });\n\n const contentIds = ['stage-title', 'stage-desc', 'stage-focus', 'stage-gap'];\n contentIds.forEach(id => {\n const el = document.getElementById(id);\n if(el) el.style.opacity = '0';\n });\n\n setTimeout(() => {\n document.getElementById('stage-title').textContent = stage.title;\n document.getElementById('stage-desc').textContent = stage.desc;\n \n const list = document.getElementById('stage-examples');\n list.innerHTML = '';\n stage.examples.forEach(ex => {\n const li = document.createElement('li');\n li.className = 'flex items-start';\n li.innerHTML = `<span class=\"mr-4 text-brand text-2xl lg:text-xl\">\u25b8<\/span> ${ex}`; \n list.appendChild(li);\n });\n\n contentIds.forEach(id => {\n const el = document.getElementById(id);\n if(el) el.style.opacity = '1';\n });\n }, 200);\n }\n\n function scrollToSection(id) {\n const el = document.getElementById(id);\n if (el) {\n el.scrollIntoView({ behavior: 'smooth' });\n }\n const mobileMenu = document.getElementById('mobile-menu');\n if(mobileMenu) mobileMenu.classList.add('hidden');\n }\n\n const menuBtn = document.getElementById('mobile-menu-btn');\n if(menuBtn) {\n menuBtn.onclick = function() {\n const menu = document.getElementById('mobile-menu');\n menu.classList.toggle('hidden');\n };\n }\n\n \/\/ --- Quiz Logic ---\n const questions = [\n {\n text: \"\u5468\u672b\u65e9\u6668\uff0c\u4f60\u6700\u60f3\u505a\u4ec0\u9ebc\uff1f\",\n options: [\n { text: \"\u5728\u5b89\u975c\u7684\u967d\u53f0\u559d\u5496\u5561\u770b\u66f8\", type: \"A\" },\n { text: \"\u53bb\u6a13\u4e0b\u82b1\u5712\u8ddf\u9130\u5c45\u804a\u5929\u3001\u505a\u65e9\u64cd\", type: \"B\" },\n { text: \"\u53c3\u52a0\u793e\u5340\u8209\u8fa6\u7684\u624b\u4f5c\u8ab2\u7a0b\u6216\u8b1b\u5ea7\", type: \"C\" }\n ]\n },\n {\n text: \"\u5982\u679c\u8eab\u9ad4\u7a0d\u5fae\u4e0d\u8212\u670d\uff0c\u4f60\u5e0c\u671b...\",\n options: [\n { text: \"\u6709\u5c08\u696d\u8b77\u7406\u4eba\u54e1\u96a8\u6642\u53ef\u4ee5\u8aee\u8a62\", type: \"C\" },\n { text: \"\u6709\u9130\u5c45\u4e92\u76f8\u7167\u61c9\u5e6b\u5fd9\u8cb7\u6771\u897f\", type: \"B\" },\n { text: \"\u5e0c\u671b\u80fd\u6709\u7368\u7acb\u7a7a\u9593\u975c\u990a\uff0c\u4e0d\u88ab\u6253\u64fe\", type: \"A\" }\n ]\n },\n {\n text: \"\u4f60\u5fc3\u76ee\u4e2d\u7406\u60f3\u7684\u9130\u5c45\u95dc\u4fc2\u662f\uff1f\",\n options: [\n { text: \"\u4fdd\u6301\u8ddd\u96e2\uff0c\u9ede\u982d\u4e4b\u4ea4\u5373\u53ef\", type: \"A\" },\n { text: \"\u50cf\u5bb6\u4eba\u4e00\u6a23\uff0c\u96a8\u6642\u53ef\u4ee5\u4e32\u9580\u5b50\", type: \"B\" },\n { text: \"\u6709\u5171\u540c\u8208\u8da3\uff0c\u53ef\u4ee5\u4e00\u8d77\u5b78\u7fd2\u6210\u9577\", type: \"C\" }\n ]\n }\n ];\n\n const results = {\n \"A\": {\n title: \"\u512a\u96c5\u7684\u8c93\u54aa \ud83d\udc31\",\n desc: \"\u4f60\u91cd\u8996\u500b\u4eba\u96b1\u79c1\u8207\u751f\u6d3b\u54c1\u8cea\uff0c\u4eab\u53d7\u7368\u8655\u4f46\u4e5f\u9700\u8981\u5b89\u5168\u611f\u3002\u5171\u751f\u5b85\u7684\u7368\u7acb\u7121\u969c\u7919\u5c45\u4f4f\u7a7a\u9593\uff0c\u8b93\u4f60\u80fd\u4fdd\u6709\u96b1\u79c1\uff0c\u540c\u6642\u4eab\u6709\u5efa\u7bc9\u7684\u5b89\u5168\u5b88\u8b77\u3002\",\n recommend: \"\u5be6\u5730\u5c0e\u89bd (\u53c3\u89c0\u7368\u7acb\u5c45\u4f4f\u55ae\u5143)\",\n icon: \"\ud83d\udc31\"\n },\n \"B\": {\n title: \"\u71b1\u60c5\u7684\u871c\u8702 \ud83d\udc1d\",\n desc: \"\u4f60\u559c\u6b61\u71b1\u9b27\uff0c\u8a8d\u70ba\u4eba\u8207\u4eba\u7684\u9023\u7d50\u662f\u5e78\u798f\u7684\u4f86\u6e90\u3002\u5171\u751f\u5b85\u7684\u300c\u5916\u5171\u751f\u300d\u793e\u5340\u4e92\u52d5\u6a21\u5f0f\uff0c\u80fd\u8b93\u4f60\u6bcf\u5929\u90fd\u5145\u6eff\u6d3b\u529b\u8207\u6b61\u7b11\u3002\",\n recommend: \"\u5916\u5171\u751f\u5c0e\u89bd (\u9ad4\u9a57\u793e\u5340\u64da\u9ede\u6d3b\u52d5)\",\n icon: \"\ud83d\udc1d\"\n },\n \"C\": {\n title: \"\u667a\u6167\u7684\u8c93\u982d\u9df9 \ud83e\udd89\",\n desc: \"\u4f60\u91cd\u8996\u81ea\u6211\u6210\u9577\u8207\u5065\u5eb7\u7ba1\u7406\u3002\u5171\u751f\u5b85\u63d0\u4f9b\u7684\u8c50\u5bcc\u8ab2\u7a0b\u8207\u5eb7\u990a\u670d\u52d9\uff0c\u80fd\u6eff\u8db3\u4f60\u5c0d\u300c\u6d3b\u5230\u8001\u3001\u5b78\u5230\u8001\u300d\u7684\u6e34\u671b\u3002\",\n recommend: \"\u5167\u5171\u751f\u5c0e\u89bd (\u63a2\u7d22\u5eb7\u990a\u670d\u52d9\u8207\u8ab2\u7a0b)\",\n icon: \"\ud83e\udd89\"\n }\n };\n\n let currentQuestion = 0;\n let scores = { A: 0, B: 0, C: 0 };\n\n function quizStartGame() {\n document.getElementById('start-screen').classList.add('hidden');\n document.getElementById('quiz-screen').classList.remove('hidden');\n \/\/ \u521d\u59cb\u5316\u9032\u5ea6\u689d\n quizUpdateProgress();\n quizShowQuestion();\n }\n\n function quizUpdateProgress() {\n const progress = ((currentQuestion) \/ questions.length) * 100;\n document.getElementById('progress-bar').style.width = `${progress}%`;\n document.getElementById('current-q-num').innerText = currentQuestion + 1;\n }\n\n function quizShowQuestion() {\n if (currentQuestion >= questions.length) {\n quizShowResult();\n return;\n }\n\n const q = questions[currentQuestion];\n const titleEl = document.getElementById('question-text');\n \n \/\/ \u6587\u5b57\u6de1\u5165\u6548\u679c\n titleEl.style.opacity = 0;\n setTimeout(() => {\n titleEl.innerText = q.text;\n titleEl.style.opacity = 1;\n titleEl.style.transition = 'opacity 0.3s';\n }, 100);\n\n quizUpdateProgress();\n\n \/\/ \u751f\u6210\u9078\u9805\n const container = document.getElementById('options-container');\n container.innerHTML = '';\n q.options.forEach((opt, index) => {\n const btn = document.createElement('button');\n \/\/ \u589e\u52a0\u5ef6\u9072\u52d5\u756b\u6548\u679c\n btn.style.animation = `fadeIn 0.5s ease-in-out ${index * 0.1}s backwards`;\n btn.className = 'option-btn w-full text-left p-4 rounded-xl border-2 border-brand-light hover:border-brand hover:bg-brand-light transition duration-200 flex items-center group bg-white';\n btn.innerHTML = `\n <div class=\"w-8 h-8 rounded-full border-2 border-brand mr-4 flex items-center justify-center text-brand font-bold group-hover:bg-brand group-hover:text-white group-hover:border-brand transition-colors text-sm\">\n ${String.fromCharCode(65 + index)}\n <\/div>\n <span class=\"text-gray-700 font-medium group-hover:text-brand-dark text-lg\">${opt.text}<\/span>\n `;\n btn.onclick = () => quizSelectOption(opt.type);\n container.appendChild(btn);\n });\n }\n\n function quizSelectOption(type) {\n scores[type]++;\n currentQuestion++;\n\n \/\/ \u7a0d\u5fae\u5ef6\u9072\u4ee5\u986f\u793a\u9ede\u64ca\u56de\u994b\n setTimeout(() => {\n if (currentQuestion < questions.length) {\n \/\/ \u8f49\u5834\u6548\u679c\n \/\/ \u7c21\u55ae\u7684\u6de1\u51fa\u91cd\u5165\u908f\u8f2f\n quizShowQuestion();\n } else {\n \/\/ \u6700\u7d42\u9032\u5ea6\u689d\u6eff\u683c\n document.getElementById('progress-bar').style.width = '100%';\n setTimeout(quizShowResult, 300);\n }\n }, 200);\n }\n\n function quizShowResult() {\n \/\/ \u8a08\u7b97\u6700\u9ad8\u5206\n let maxType = Object.keys(scores).reduce((a, b) => scores[a] >= scores[b] ? a : b);\n const resultData = results[maxType];\n\n document.getElementById('quiz-screen').classList.add('hidden');\n document.getElementById('result-screen').classList.remove('hidden');\n\n document.getElementById('result-icon').innerText = resultData.icon;\n document.getElementById('result-title').innerText = resultData.title;\n document.getElementById('result-desc').innerText = resultData.desc;\n document.getElementById('result-recommend').innerText = resultData.recommend;\n }\n\n document.addEventListener('DOMContentLoaded', () => {\n initKnowledgeHub();\n const ctx = document.getElementById('marketChart').getContext('2d');\n const brandColor = '#43a8a4';\n const accentGold = '#C5A668';\n const textMain = '#44484c';\n Chart.defaults.color = textMain;\n Chart.defaults.font.family = \"'Noto Sans TC', sans-serif\";\n Chart.defaults.font.size = 18; \n\n new Chart(ctx, {\n type: 'line',\n data: {\n labels: ['2020', '2025 (\u8d85\u9ad8\u9f61)', '2030', '2040', '2050'],\n datasets: [{\n label: '\u9ad8\u9f61\u4eba\u53e3\u6bd4\u4f8b (%)',\n data: [16, 20, 24, 30, 35],\n borderColor: brandColor,\n backgroundColor: 'rgba(67, 168, 164, 0.1)',\n fill: true,\n tension: 0.4,\n yAxisID: 'y'\n }, {\n label: '\u6a02\u9f61\u9069\u5c45\u4f4f\u5b85\u4f9b\u7d66\u7f3a\u53e3 (\u842c\u6236)',\n data: [10, 35, 60, 120, 180],\n borderColor: accentGold,\n borderDash: [5, 5],\n backgroundColor: 'transparent',\n tension: 0.2,\n yAxisID: 'y1'\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n interaction: { mode: 'index', intersect: false },\n plugins: { legend: { position: 'bottom', labels: { font: { size: 18 } } } },\n scales: {\n y: { type: 'linear', display: true, position: 'left', title: { display: true, text: '\u4eba\u53e3\u6bd4\u4f8b (%)', color: textMain, font: { size: 20 } }, ticks: { font: { size: 16 } } },\n y1: { type: 'linear', display: true, position: 'right', grid: { drawOnChartArea: false }, title: { display: true, text: '\u4f9b\u7d66\u7f3a\u53e3 (\u842c\u6236)', color: textMain, font: { size: 20 } }, ticks: { font: { size: 16 } } }\n }\n }\n });\n });\n <\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fa64a1d elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"fa64a1d\" data-element_type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u793e\u5718\u6cd5\u4eba\u53f0\u7063\u6a02\u9f61\u5efa\u7bc9\u767c\u5c55\u5354\u6703 | \u5b98\u65b9\u7db2\u7ad9 TWLAA \u95dc\u65bc\u5354\u6703 \u9000\u4f11\u6e2c\u9a57 \u7522\u696d\u5730\u5716 \u5c08\u696d\u670d\u52d9 \u8da8\u52e2\u6578\u64da \u6700\u65b0 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"\u53f0\u7063\u6a02\u9f61\u5efa\u7bc9\u767c\u5c55\u5354\u6703","author_link":"https:\/\/taiwanloling.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":"\u793e\u5718\u6cd5\u4eba\u53f0\u7063\u6a02\u9f61\u5efa\u7bc9\u767c\u5c55\u5354\u6703 | \u5b98\u65b9\u7db2\u7ad9 TWLAA \u95dc\u65bc\u5354\u6703 \u9000\u4f11\u6e2c\u9a57 \u7522\u696d\u5730\u5716 \u5c08\u696d\u670d\u52d9 \u8da8\u52e2\u6578\u64da \u6700\u65b0...","_links":{"self":[{"href":"https:\/\/taiwanloling.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/taiwanloling.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/taiwanloling.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/taiwanloling.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/taiwanloling.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":0,"href":"https:\/\/taiwanloling.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"wp:attachment":[{"href":"https:\/\/taiwanloling.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}