{"id":7,"date":"2026-03-03T17:51:41","date_gmt":"2026-03-03T09:51:41","guid":{"rendered":"https:\/\/kindnessbank.org\/?page_id=7"},"modified":"2026-03-24T19:31:12","modified_gmt":"2026-03-24T11:31:12","slug":"home","status":"publish","type":"page","link":"https:\/\/kindnessbank.org\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-09230bc e-flex e-con-boxed e-con e-parent\" data-id=\"09230bc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5d35a00 elementor-widget elementor-widget-html\" data-id=\"5d35a00\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<style>\r\n  \/* =========================================\r\n     1. \u5168\u5c40\u8b8a\u6578\u8a2d\u5b9a (\u5f37\u5236\u5168\u767d\u80cc\u666f)\r\n     ========================================= *\/\r\n  :root {\r\n    --header-bg: #ffffff; \/* \u5f37\u5236\u7d14\u767d\uff0c\u89e3\u6c7a Logo \u767d\u5e95\u554f\u984c *\/\r\n    --header-text: #0f172a;\r\n    --header-accent: #059669;\r\n    --header-border: rgba(0, 0, 0, 0.05);\r\n    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n  }\r\n\r\n  \/* =========================================\r\n     2. \u4e3b\u5c0e\u89bd\u5217\u67b6\u69cb\r\n     ========================================= *\/\r\n  #site-header-pro {\r\n    position: fixed;\r\n    top: 0; left: 0; width: 100%;\r\n    background: var(--header-bg);\r\n    z-index: 99999;\r\n    transition: all 0.4s var(--ease-smooth);\r\n    border-bottom: 1px solid var(--header-border);\r\n    font-family: 'Noto Sans TC', sans-serif;\r\n  }\r\n\r\n  \/* \u6efe\u52d5\u6642\u589e\u52a0\u66f4\u660e\u986f\u7684\u9670\u5f71 *\/\r\n  #site-header-pro.is-scrolled {\r\n    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);\r\n  }\r\n\r\n  .header-container {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n    padding: 16px 5vw;\r\n    transition: padding 0.4s var(--ease-smooth);\r\n  }\r\n\r\n  \/* =========================================\r\n     3. Logo \u5340\u584a (\u91dd\u5c0d\u975e\u900f\u660e Logo \u512a\u5316)\r\n     ========================================= *\/\r\n  .header-logo {\r\n    display: flex; align-items: center;\r\n    text-decoration: none;\r\n    z-index: 100;\r\n  }\r\n  .header-logo img {\r\n    height: 48px; \/* \u7a0d\u5fae\u653e\u5927 Logo *\/\r\n    width: auto;\r\n    object-fit: contain;\r\n    transition: transform 0.4s var(--ease-spring);\r\n    \/* \u5373\u4f7f Header \u662f\u767d\u7684\uff0c\u52a0\u4e0a\u9019\u500b\u5c6c\u6027\u53ef\u4ee5\u8b93 JPG \u7684\u767d\u5e95\u66f4\u878d\u5408 *\/\r\n    mix-blend-mode: multiply; \r\n  }\r\n  .header-logo:hover img {\r\n    transform: scale(1.03);\r\n  }\r\n\r\n  \/* =========================================\r\n     4. \u684c\u9762\u7248\u9078\u55ae\r\n     ========================================= *\/\r\n  .desktop-nav {\r\n    display: flex;\r\n    gap: 32px;\r\n    align-items: center;\r\n  }\r\n\r\n  .nav-link {\r\n    position: relative;\r\n    font-size: 1rem;\r\n    font-weight: 700;\r\n    color: var(--header-text);\r\n    text-decoration: none;\r\n    letter-spacing: 0.05em;\r\n    padding: 8px 0;\r\n    transition: color 0.3s ease;\r\n  }\r\n  \r\n  .nav-link:hover { color: var(--header-accent); }\r\n\r\n  \/* \u78c1\u5438\u5e95\u7dda\u7279\u6548 *\/\r\n  .nav-link::after {\r\n    content: '';\r\n    position: absolute;\r\n    bottom: 0; left: 0;\r\n    width: 100%; height: 2px;\r\n    background-color: var(--header-accent);\r\n    transform: scaleX(0);\r\n    transform-origin: right;\r\n    transition: transform 0.4s var(--ease-smooth);\r\n  }\r\n  .nav-link:hover::after {\r\n    transform: scaleX(1);\r\n    transform-origin: left;\r\n  }\r\n\r\n  \/* =========================================\r\n     5. \u52a0\u5165\u6211\u5011\u6309\u9215 (\u5be6\u9ad4\u5316)\r\n     ========================================= *\/\r\n  .btn-join {\r\n    display: inline-flex;\r\n    align-items: center; justify-content: center;\r\n    padding: 10px 24px;\r\n    background: var(--header-text);\r\n    color: #ffffff;\r\n    font-size: 0.95rem; font-weight: 800;\r\n    border-radius: 100px;\r\n    text-decoration: none;\r\n    transition: all 0.4s var(--ease-spring);\r\n  }\r\n  .btn-join:hover {\r\n    background: var(--header-accent);\r\n    transform: translateY(-2px);\r\n    box-shadow: 0 10px 20px rgba(5, 150, 105, 0.2);\r\n  }\r\n\r\n  \/* =========================================\r\n     6. \u624b\u6a5f\u7248\u9078\u55ae\r\n     ========================================= *\/\r\n  .mobile-toggle {\r\n    display: none;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    width: 28px; height: 18px;\r\n    background: transparent; border: none;\r\n    cursor: pointer; padding: 0; z-index: 100;\r\n  }\r\n  .mobile-toggle span {\r\n    width: 100%; height: 2px;\r\n    background-color: var(--header-text);\r\n    transition: all 0.4s var(--ease-smooth);\r\n  }\r\n\r\n  .mobile-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }\r\n  .mobile-toggle.is-active span:nth-child(2) { opacity: 0; }\r\n  .mobile-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }\r\n\r\n  .mobile-menu-overlay {\r\n    position: fixed;\r\n    top: 0; left: 0; width: 100%; height: 100vh;\r\n    background: #ffffff; \/* \u624b\u6a5f\u9078\u55ae\u4e5f\u5f37\u5236\u5168\u767d *\/\r\n    display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n    opacity: 0; visibility: hidden;\r\n    transition: all 0.4s var(--ease-smooth);\r\n    z-index: 99998;\r\n  }\r\n  .mobile-menu-overlay.is-active { opacity: 1; visibility: visible; }\r\n\r\n  .mobile-nav { display: flex; flex-direction: column; gap: 32px; text-align: center; }\r\n  .mobile-nav-link {\r\n    font-size: 1.8rem; font-weight: 800; color: var(--header-text);\r\n    text-decoration: none; transition: color 0.3s ease;\r\n  }\r\n\r\n  \/* =========================================\r\n     7. RWD \u97ff\u61c9\u5f0f\r\n     ========================================= *\/\r\n  @media (max-width: 992px) {\r\n    .desktop-nav, .btn-join { display: none; }\r\n    .mobile-toggle { display: flex; }\r\n    .header-logo img { height: 40px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <header id=\"site-header-pro\">\r\n    <div class=\"header-container\">\r\n      \r\n      <a href=\"\/\" class=\"header-logo\">\r\n        <img decoding=\"async\" src=\"https:\/\/kindnessbank.org\/wp-content\/uploads\/2026\/03\/\u5584\u5faa\u74b0logo-5.png\" alt=\"\u5584\u5faa\u74b0 Logo\">\r\n      <\/a>\r\n\r\n      <nav class=\"desktop-nav\">\r\n        <a href=\"#about\" class=\"nav-link\">\u4ec0\u9ebc\u662f\u5584\u5faa\u74b0?<\/a>\r\n        <a href=\"#tasks\" class=\"nav-link\">\u4efb\u52d9\u5e73\u53f0<\/a>\r\n        <a href=\"#membership\" class=\"nav-link\">\u6703\u54e1\u5236\u5ea6<\/a>\r\n      <\/nav>\r\n\r\n      <div class=\"header-actions\">\r\n        <a href=\"#join\" class=\"btn-join\">\u52a0\u5165\u6211\u5011<\/a>\r\n        <button class=\"mobile-toggle\" id=\"js-toggle\">\r\n          <span><\/span><span><\/span><span><\/span>\r\n        <\/button>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/header>\r\n\r\n  <div class=\"mobile-menu-overlay\" id=\"js-menu\">\r\n    <nav class=\"mobile-nav\">\r\n      <a href=\"#about\" class=\"mobile-nav-link js-link\">\u4ec0\u9ebc\u662f\u5584\u5faa\u74b0?<\/a>\r\n      <a href=\"#tasks\" class=\"mobile-nav-link js-link\">\u4efb\u52d9\u5e73\u53f0<\/a>\r\n      <a href=\"#membership\" class=\"mobile-nav-link js-link\">\u6703\u54e1\u5236\u5ea6<\/a>\r\n      <a href=\"#join\" class=\"mobile-nav-link js-link\" style=\"color: var(--header-accent);\">\u52a0\u5165\u6211\u5011<\/a>\r\n    <\/nav>\r\n  <\/div>\r\n\r\n  <script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n      const header = document.getElementById('site-header-pro');\r\n      const toggle = document.getElementById('js-toggle');\r\n      const menu = document.getElementById('js-menu');\r\n      const links = document.querySelectorAll('.js-link, .nav-link, .btn-join');\r\n\r\n      \/\/ 1. \u6efe\u52d5\u9670\u5f71\r\n      window.addEventListener('scroll', () => {\r\n        if (window.scrollY > 20) {\r\n          header.classList.add('is-scrolled');\r\n        } else {\r\n          header.classList.remove('is-scrolled');\r\n        }\r\n      });\r\n\r\n      \/\/ 2. \u958b\u95dc\u624b\u6a5f\u9078\u55ae\r\n      function toggleMenu() {\r\n        toggle.classList.toggle('is-active');\r\n        menu.classList.toggle('is-active');\r\n        document.body.style.overflow = menu.classList.contains('is-active') ? 'hidden' : '';\r\n      }\r\n      toggle.addEventListener('click', toggleMenu);\r\n\r\n      \/\/ 3. \u9ede\u64ca\u5f8c\u5e73\u6ed1\u6efe\u52d5\u4e26\u95dc\u9589\u9078\u55ae\r\n      links.forEach(link => {\r\n        link.addEventListener('click', function(e) {\r\n          const targetId = this.getAttribute('href');\r\n          if (targetId.startsWith('#')) {\r\n            e.preventDefault();\r\n            const targetEl = document.querySelector(targetId);\r\n            if (targetEl) {\r\n              if (menu.classList.contains('is-active')) toggleMenu(); \/\/ \u5982\u679c\u624b\u6a5f\u9078\u55ae\u958b\u8457\u5c31\u95dc\u6389\r\n\r\n              const offset = header.offsetHeight;\r\n              const targetPos = targetEl.getBoundingClientRect().top + window.scrollY - offset;\r\n              \r\n              window.scrollTo({\r\n                top: targetPos,\r\n                behavior: 'smooth'\r\n              });\r\n            }\r\n          }\r\n        });\r\n      });\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-40c10a8 elementor-widget elementor-widget-html\" data-id=\"40c10a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703<\/title>\r\n<style>\r\n  \/* =========================================\r\n     1. \u5168\u5c40\u8b8a\u6578 & \u5236\u5ea6\u7db2\u683c\u80cc\u666f\r\n     ========================================= *\/\r\n  :root {\r\n    --color-bg: #ffffff;\r\n    --color-text-main: #0f172a;\r\n    --color-text-sub: #64748b;\r\n    --color-primary: #059669;\r\n    --color-primary-light: rgba(5, 150, 105, 0.2);\r\n    --grid-line: rgba(15, 23, 42, 0.03); \r\n    --font-heading: 'Noto Sans TC', -apple-system, sans-serif;\r\n    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\r\n    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n  }\r\n\r\n  * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n  body {\r\n    background-color: var(--color-bg);\r\n    color: var(--color-text-main);\r\n    font-family: var(--font-heading);\r\n    -webkit-font-smoothing: antialiased;\r\n    overflow-x: hidden; \r\n    \r\n    background-image: \r\n      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);\r\n    background-size: 4vw 4vw;\r\n    background-position: center center;\r\n  }\r\n\r\n  \/* =========================================\r\n     2. \u9632\u5446\u7248\u81ea\u8a02\u6e38\u6a19 (Custom Cursor)\r\n     ========================================= *\/\r\n  body.has-custom-cursor, \r\n  body.has-custom-cursor a, \r\n  body.has-custom-cursor .btn {\r\n    cursor: none !important;\r\n  }\r\n\r\n  .cursor-dot, .cursor-outline {\r\n    position: fixed; top: 0; left: 0;\r\n    transform: translate(-50%, -50%);\r\n    border-radius: 50%; \r\n    z-index: 2147483647; \r\n    pointer-events: none;\r\n    display: none; \r\n  }\r\n\r\n  body.has-custom-cursor .cursor-dot,\r\n  body.has-custom-cursor .cursor-outline {\r\n    display: block;\r\n  }\r\n\r\n  .cursor-dot {\r\n    width: 6px; height: 6px;\r\n    background-color: var(--color-primary);\r\n  }\r\n  .cursor-outline {\r\n    width: 40px; height: 40px;\r\n    border: 1px solid rgba(5, 150, 105, 0.4);\r\n    transition: width 0.3s, height 0.3s, background-color 0.3s, mix-blend-mode 0.3s;\r\n  }\r\n  body.cursor-hovering .cursor-outline {\r\n    width: 64px; height: 64px;\r\n    background-color: rgba(5, 150, 105, 0.1);\r\n    border-color: transparent;\r\n    mix-blend-mode: multiply;\r\n  }\r\n\r\n  \/* =========================================\r\n     3. \u4f48\u5c40\u67b6\u69cb (\u78ba\u4fdd\u7d55\u5c0d\u7f6e\u4e2d\u8207\u9632\u7834\u7248)\r\n     ========================================= *\/\r\n  #hero {\r\n    position: relative;\r\n    min-height: 100vh;\r\n    display: grid;\r\n    grid-template-columns: 1fr 1fr;\r\n    align-items: center; \r\n    justify-items: center; \r\n    max-width: 1440px;\r\n    margin: 0 auto;\r\n    padding: 0 5vw;\r\n    gap: 4vw;\r\n    overflow: hidden; \r\n  }\r\n\r\n  \/* =========================================\r\n     4. \u5de6\u5074\u5167\u5bb9\u5340 & \u6587\u5b57\u906e\u7f69\u52d5\u756b \r\n     ========================================= *\/\r\n  .hero-content {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    width: 100%;\r\n    max-width: 500px; \r\n    order: 1;\r\n  }\r\n\r\n  .hero-title {\r\n    font-size: clamp(2rem, 3.5vw, 3.5rem);\r\n    font-weight: 700; line-height: 1.25;\r\n    letter-spacing: 0.02em; margin-bottom: 2rem;\r\n  }\r\n\r\n  .title-line {\r\n    display: block; overflow: hidden; padding-bottom: 8px;\r\n  }\r\n\r\n  .title-inner {\r\n    display: block; transform: translateY(110%); opacity: 0;\r\n    animation: maskReveal 1s var(--ease-out-expo) forwards;\r\n  }\r\n  .title-line:nth-child(1) .title-inner { animation-delay: 0.2s; }\r\n  .title-line:nth-child(2) .title-inner { animation-delay: 0.4s; color: var(--color-primary); }\r\n\r\n  .hero-subtitle {\r\n    font-size: clamp(1rem, 1.1vw, 1.1rem);\r\n    line-height: 1.8; color: var(--color-text-sub);\r\n    font-weight: 400; margin-bottom: 3rem; \r\n    opacity: 0; transform: translateY(20px);\r\n    animation: fadeUpPro 1s var(--ease-out-expo) forwards 0.6s;\r\n  }\r\n\r\n  \/* =========================================\r\n     5. 1x3 \u76f4\u5f0f\u6309\u9215\u5217 \r\n     ========================================= *\/\r\n  .hero-actions {\r\n    display: flex; flex-direction: column; gap: 16px;\r\n    width: 100%; max-width: 280px;\r\n    opacity: 0; transform: translateY(20px);\r\n    animation: fadeUpPro 1s var(--ease-out-expo) forwards 0.8s;\r\n  }\r\n\r\n  .btn {\r\n    text-decoration: none; padding: 16px 24px;\r\n    font-size: 0.95rem; font-weight: 500; letter-spacing: 0.05em;\r\n    border-radius: 2px; display: flex; align-items: center; justify-content: space-between;\r\n    position: relative; overflow: hidden; transition: all 0.4s ease;\r\n  }\r\n\r\n  .btn::before {\r\n    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n    background-color: var(--color-primary);\r\n    transform: translateX(-101%); transition: transform 0.5s var(--ease-out-expo); z-index: 0;\r\n  }\r\n  \r\n  .btn span { position: relative; z-index: 1; }\r\n  .btn::after { content: '\u2192'; position: relative; z-index: 1; transition: transform 0.4s var(--ease-out-expo); }\r\n\r\n  .btn-primary { background-color: var(--color-text-main); color: #ffffff; border: 1px solid var(--color-text-main); }\r\n  .btn-primary:hover::before { transform: translateX(0); }\r\n  .btn-primary:hover::after { transform: translateX(5px); }\r\n  .btn-primary:hover { border-color: var(--color-primary); }\r\n\r\n  .btn-secondary { background-color: transparent; color: var(--color-text-main); border: 1px solid #cbd5e1; }\r\n  .btn-secondary::before { background-color: #f1f5f9; }\r\n  .btn-secondary:hover::before { transform: translateX(0); }\r\n  .btn-secondary:hover::after { transform: translateX(5px); }\r\n\r\n  .btn-tertiary { background-color: transparent; color: var(--color-text-sub); padding: 16px 0; }\r\n  .btn-tertiary::before { display: none; }\r\n  .btn-tertiary:hover { color: var(--color-primary); padding-left: 10px; }\r\n  .btn-tertiary:hover::after { transform: translateX(5px); color: var(--color-primary); }\r\n\r\n  \/* =========================================\r\n     6. \u53f3\u5074\u52d5\u756b\uff1a\u7cbe\u6e96\u9806\u5e8f\u5faa\u74b0\u5f15\u64ce (\u6d41\u9ad4\u9632\u7206\u7248)\r\n     ========================================= *\/\r\n  .hero-visual {\r\n    position: relative; width: 100%; height: 100%; \r\n    display: flex; align-items: center; justify-content: center;\r\n    order: 2; opacity: 0; transform: translateY(30px);\r\n    animation: fadeUpPro 1.5s var(--ease-out-expo) forwards 0.4s;\r\n  }\r\n\r\n  \/* \u6539\u70ba\u5168\u6d41\u9ad4\u767e\u5206\u6bd4\u4f48\u5c40\uff0c\u6368\u68c4 transform: scale() *\/\r\n  .diagram-scale-wrapper {\r\n    position: relative;\r\n    width: 100%; \r\n    max-width: 500px; \r\n    aspect-ratio: 1 \/ 1; \/* \u5f37\u5236\u4fdd\u6301\u6b63\u65b9\u5f62 *\/\r\n    display: flex; align-items: center; justify-content: center;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  \/* SVG \u8ecc\u9053\u7cfb\u7d71 (\u5229\u7528 viewBox \u9054\u6210\u5167\u90e8\u5b8c\u7f8e\u7e2e\u653e) *\/\r\n  .loop-svg {\r\n    position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;\r\n  }\r\n  \r\n  .track-base {\r\n    stroke: rgba(0, 0, 0, 0.05); stroke-width: 2; fill: none; stroke-dasharray: 8 6;\r\n  }\r\n  \r\n  .track-beam {\r\n    stroke: var(--color-primary); stroke-width: 6; fill: none; stroke-linecap: round;\r\n    stroke-dasharray: 200 1006; \r\n    filter: drop-shadow(0 0 12px rgba(5,150,105,0.8));\r\n    transform-origin: 250px 250px;\r\n    transform: scaleY(-1);\r\n    animation: drawComet 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;\r\n  }\r\n\r\n  \/* \u975c\u614b\u7bad\u982d\uff1a\u6539\u7528\u767e\u5206\u6bd4\u5b9a\u4f4d\uff0c\u7e2e\u653e\u4e0d\u8dd1\u7248 *\/\r\n  .dir-arrow {\r\n    position: absolute; width: 24px; height: 24px; opacity: 0.25;\r\n    background-image: url('data:image\/svg+xml;utf8,<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23059669\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><polyline points=\"9 18 15 12 9 6\"><\/polyline><\/svg>');\r\n    background-size: contain;\r\n    margin-top: -12px; margin-left: -12px;\r\n  }\r\n  .arrow-rt { top: 27.4%; left: 72.6%; transform: rotate(-135deg); } \r\n  .arrow-tl { top: 27.4%; left: 27.4%; transform: rotate(135deg); }  \r\n  .arrow-lb { top: 72.6%; left: 27.4%; transform: rotate(45deg); }   \r\n  .arrow-br { top: 72.6%; left: 72.6%; transform: rotate(-45deg); }  \r\n\r\n  \/* \u56fa\u5b9a\u65b9\u4f4d\u7684\u56db\u5927\u7bc0\u9ede *\/\r\n  .eco-node {\r\n    position: absolute; background: #ffffff; border: 2px solid rgba(0,0,0,0.08);\r\n    border-radius: 50%; display: flex; align-items: center; justify-content: center;\r\n    font-size: 1.15rem; font-weight: 700; color: var(--color-text-main);\r\n    box-shadow: 0 10px 20px rgba(0,0,0,0.03); transition: all 0.3s ease;\r\n    cursor: default; z-index: 2;\r\n    \/* \u9810\u8a2d\u5bec\u9ad8 *\/\r\n    width: 90px; height: 90px;\r\n  }\r\n\r\n  \/* \u6539\u70ba\u767e\u5206\u6bd4\u5b9a\u4f4d *\/\r\n  .node-right  { top: 50%; left: 82%; transform: translate(-50%, -50%); animation: pulseRight 8s infinite; } \r\n  .node-top    { top: 18%; left: 50%; transform: translate(-50%, -50%); animation: pulseTop 8s infinite; }   \r\n  .node-left   { top: 50%; left: 18%; transform: translate(-50%, -50%); animation: pulseLeft 8s infinite; }  \r\n  .node-bottom { top: 82%; left: 50%; transform: translate(-50%, -50%); animation: pulseBottom 8s infinite;} \r\n\r\n  \/* \u4e2d\u592e\u5e73\u53f0 *\/\r\n  .node-center {\r\n    top: 50%; left: 50%; transform: translate(-50%, -50%);\r\n    width: 140px; height: 140px; font-size: 1.3rem; font-weight: 800; color: var(--color-primary);\r\n    border-color: var(--color-primary); background: var(--color-bg);\r\n    box-shadow: 0 0 20px rgba(5,150,105,0.1); z-index: 3;\r\n    animation: pulseCenter 8s ease-in-out infinite;\r\n  }\r\n\r\n  \/* =========================================\r\n     7. \u7cbe\u6e96\u540c\u6b65\u52d5\u756b Keyframes (\u5b8c\u5168\u4e0d\u8b8a)\r\n     ========================================= *\/\r\n  @keyframes maskReveal { 0% { transform: translateY(110%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }\r\n  @keyframes fadeUpPro { 0% { transform: translateY(40px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }\r\n  \r\n  @keyframes drawComet {\r\n    0% { stroke-dashoffset: 1005; opacity: 0; }\r\n    2% { opacity: 1; }\r\n    48% { stroke-dashoffset: -200; opacity: 1; } \r\n    52% { opacity: 0; stroke-dashoffset: -200; } \r\n    100% { opacity: 0; stroke-dashoffset: -200; } \r\n  }\r\n  \r\n  @keyframes pulseRight {\r\n    0%, 6% { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 20px rgba(5,150,105,0.4); transform: translate(-50%, -50%) scale(1.15); }\r\n    12%, 38% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n    42%, 48% { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 20px rgba(5,150,105,0.4); transform: translate(-50%, -50%) scale(1.15); }\r\n    54%, 100% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n  }\r\n  @keyframes pulseTop {\r\n    0%, 7% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n    10%, 16% { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 20px rgba(5,150,105,0.4); transform: translate(-50%, -50%) scale(1.15); }\r\n    22%, 100% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n  }\r\n  @keyframes pulseLeft {\r\n    0%, 18% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n    21%, 27% { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 20px rgba(5,150,105,0.4); transform: translate(-50%, -50%) scale(1.15); }\r\n    33%, 100% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n  }\r\n  @keyframes pulseBottom {\r\n    0%, 30% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n    33%, 39% { border-color: var(--color-primary); color: var(--color-primary); box-shadow: 0 0 20px rgba(5,150,105,0.4); transform: translate(-50%, -50%) scale(1.15); }\r\n    45%, 100% { border-color: rgba(0,0,0,0.08); color: var(--color-text-main); box-shadow: 0 10px 20px rgba(0,0,0,0.03); transform: translate(-50%, -50%) scale(1); }\r\n  }\r\n\r\n  \/* \u968e\u6bb5 2: \u4e2d\u592e\u5e73\u53f0\u58d3\u8ef8\u5438\u6536\u767c\u5149 *\/\r\n  @keyframes pulseCenter {\r\n    0%, 48% { \r\n      background: var(--color-bg); color: var(--color-primary); \r\n      box-shadow: 0 0 20px rgba(5,150,105,0.1); transform: translate(-50%, -50%) scale(1);\r\n    }\r\n    55%, 65% { \r\n      background: var(--color-primary); color: #ffffff; \r\n      box-shadow: 0 0 60px rgba(5,150,105,0.8), inset 0 0 20px rgba(255,255,255,0.5); \r\n      transform: translate(-50%, -50%) scale(1.15); \r\n    }\r\n    80%, 100% { \r\n      background: var(--color-bg); color: var(--color-primary); \r\n      box-shadow: 0 0 20px rgba(5,150,105,0.1); transform: translate(-50%, -50%) scale(1);\r\n    }\r\n  }\r\n\r\n  \/* =========================================\r\n     8. RWD \u7d42\u6975\u6d41\u9ad4\u9632\u5446\u4fee\u5fa9\r\n     ========================================= *\/\r\n  @media (max-width: 992px) {\r\n    #hero { \r\n      grid-template-columns: 1fr; \r\n      \/* \u624b\u6a5f\u7248\u4e0a\u4e0b\u7559\u767d\u52a0\u6df1\uff0c\u4e26\u5f37\u5236\u7f6e\u4e2d\u5c0d\u9f4a *\/\r\n      padding: 120px 5vw 60px 5vw; \r\n      gap: 3rem; \r\n      justify-items: center; \r\n    }\r\n    \r\n    .hero-content { \r\n      order: 2; \r\n      align-items: center; \r\n      text-align: center;\r\n      margin: 0 auto; \r\n    }\r\n    \r\n    .hero-title { \r\n      font-size: clamp(2rem, 6vw, 2.8rem); \r\n      margin-bottom: 1.5rem; \r\n      text-align: center;\r\n    }\r\n    .title-line { display: inline-block; padding-bottom: 0; } \r\n    .hero-subtitle { text-align: center; margin-bottom: 2rem; }\r\n    \r\n    .hero-actions { \r\n      align-items: center; \r\n      margin: 0 auto;\r\n    }\r\n    .btn { justify-content: center; width: 100%; max-width: 320px; }\r\n    .btn span { margin-right: 10px; }\r\n\r\n    .hero-visual { \r\n      order: 1; \r\n      width: 100%;\r\n      margin: 0 auto; \/* \u78ba\u4fdd\u7236\u5c64\u4e5f\u7f6e\u4e2d *\/\r\n    }\r\n    \r\n    \/* \u79fb\u9664 transform: scale\uff0c\u6539\u70ba\u81ea\u9069\u61c9\u6700\u5927\u5bec\u5ea6 *\/\r\n    .diagram-scale-wrapper { \r\n      max-width: 420px; \r\n    } \r\n\r\n    \/* \u624b\u6a5f\u7248\u5fae\u8abf\u661f\u7403\u5927\u5c0f *\/\r\n    .eco-node { width: 75px; height: 75px; font-size: 1rem; }\r\n    .node-center { width: 110px; height: 110px; font-size: 1.15rem; }\r\n  }\r\n  \r\n  @media (max-width: 480px) {\r\n    .diagram-scale-wrapper { max-width: 320px; }\r\n    .eco-node { width: 65px; height: 65px; font-size: 0.95rem; }\r\n    .node-center { width: 95px; height: 95px; font-size: 1.05rem; }\r\n    .dir-arrow { width: 18px; height: 18px; margin-top: -9px; margin-left: -9px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n  <div class=\"cursor-dot\"><\/div>\r\n  <div class=\"cursor-outline\"><\/div>\r\n\r\n  <section id=\"hero\">\r\n    \r\n    <div class=\"hero-content\">\r\n      <h1 class=\"hero-title\">\r\n        <span class=\"title-line\"><span class=\"title-inner\">\u5584\u53ef\u6210\u70ba\u7d2f\u7a4d\u7684\u50f9\u503c<\/span><\/span>\r\n        <span class=\"title-line\"><span class=\"title-inner\">\u672a\u4f86\u56e0\u4eca\u65e5\u5584\u884c\u800c\u88ab\u5584\u5f85<\/span><\/span>\r\n      <\/h1>\r\n      \r\n      <p class=\"hero-subtitle\">\r\n        \u3010\u5584\u5faa\u74b0\u3011\u662f\u4e00\u5957\u5236\u5ea6\u5316\u3001\u53ef\u8ffd\u6eaf\u3001\u53ef\u7d2f\u7a4d\u7684\u5584\u884c\u5e73\u53f0\u3002<br>\r\n        \u6211\u5011\u900f\u904e\u6a19\u6e96\u5316\u7684\u4efb\u52d9\u5be9\u6838\u6a5f\u5236\u8207\u5584\u9ede\u6578\u5236\u5ea6\uff0c<br>\r\n        \u5efa\u7acb\u4e00\u500b\u9023\u7d50\u500b\u4eba\u3001\u4f01\u696d\u8207\u516c\u76ca\u7d44\u7e54\u7684\u6c38\u7e8c\u5584\u7d93\u6fdf\u751f\u614b\u3002\r\n      <\/p>\r\n\r\n      <div class=\"hero-actions\">\r\n        <a href=\"[REPLACE_URL_HERE]\" class=\"btn btn-primary hover-target\">\r\n          <span>\u3010\u4e86\u89e3\u5584\u5faa\u74b0\u5236\u5ea6\u3011<\/span>\r\n        <\/a>\r\n        <a href=\"[REPLACE_URL_HERE]\" class=\"btn btn-secondary hover-target\">\r\n          <span>\u3010\u6210\u70ba\u6703\u54e1\u3011<\/span>\r\n        <\/a>\r\n        <a href=\"[REPLACE_URL_HERE]\" class=\"btn btn-tertiary hover-target\">\r\n          <span>\u3010\u4f01\u696d\u5408\u4f5c\u3011<\/span>\r\n        <\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"hero-visual\">\r\n      <div class=\"diagram-scale-wrapper\">\r\n      \r\n        <svg class=\"loop-svg\" viewBox=\"0 0 500 500\">\r\n          <circle cx=\"250\" cy=\"250\" r=\"160\" class=\"track-base\" \/>\r\n          <circle cx=\"250\" cy=\"250\" r=\"160\" class=\"track-beam\" \/>\r\n        <\/svg>\r\n\r\n        <div class=\"dir-arrow arrow-rt\"><\/div>\r\n        <div class=\"dir-arrow arrow-tl\"><\/div>\r\n        <div class=\"dir-arrow arrow-lb\"><\/div>\r\n        <div class=\"dir-arrow arrow-br\"><\/div>\r\n\r\n        <div class=\"eco-node node-right hover-target\"><span>\u793e\u7fa4<\/span><\/div>\r\n        <div class=\"eco-node node-top hover-target\"><span>\u5fd7\u5de5<\/span><\/div>\r\n        <div class=\"eco-node node-left hover-target\"><span>\u516c\u76ca<\/span><\/div>\r\n        <div class=\"eco-node node-bottom hover-target\"><span>\u4f01\u696d<\/span><\/div>\r\n\r\n        <div class=\"eco-node node-center hover-target\"><span>\u5584\u5faa\u74b0\u5e73\u53f0<\/span><\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/section>\r\n\r\n  <script>\r\n    document.addEventListener(\"DOMContentLoaded\", function() {\r\n      if (window.matchMedia(\"(pointer: fine)\").matches) {\r\n        \r\n        document.body.classList.add('has-custom-cursor');\r\n\r\n        const dot = document.querySelector('.cursor-dot');\r\n        const outline = document.querySelector('.cursor-outline');\r\n        const hoverTargets = document.querySelectorAll('.hover-target');\r\n\r\n        let mouseX = 0, mouseY = 0, outlineX = 0, outlineY = 0;\r\n\r\n        window.addEventListener('mousemove', (e) => {\r\n          mouseX = e.clientX; mouseY = e.clientY;\r\n          dot.style.transform = `translate(${mouseX}px, ${mouseY}px)`;\r\n        });\r\n\r\n        const animateOutline = () => {\r\n          let distX = mouseX - outlineX; let distY = mouseY - outlineY;\r\n          outlineX += distX * 0.15; outlineY += distY * 0.15;\r\n          outline.style.transform = `translate(${outlineX}px, ${outlineY}px)`;\r\n          requestAnimationFrame(animateOutline);\r\n        };\r\n        animateOutline();\r\n\r\n        hoverTargets.forEach(target => {\r\n          target.addEventListener('mouseenter', () => document.body.classList.add('cursor-hovering'));\r\n          target.addEventListener('mouseleave', () => document.body.classList.remove('cursor-hovering'));\r\n        });\r\n      }\r\n    });\r\n  <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3b90c26 e-flex e-con-boxed e-con e-parent\" data-id=\"3b90c26\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-9206569 e-flex e-con-boxed e-con e-parent\" data-id=\"9206569\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6d53513 elementor-widget elementor-widget-html\" data-id=\"6d53513\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* =========================================\r\n     1. \u5168\u5c40\u8b8a\u6578 & \u57fa\u790e\u8a2d\u5b9a\r\n     ========================================= *\/\r\n  #impact-data-wrapper {\r\n    --color-surface: #f8fafc;\r\n    --color-text-main: #0f172a;\r\n    --color-text-sub: #64748b;\r\n    --color-primary: #059669;\r\n    --grid-line: rgba(15, 23, 42, 0.03); \r\n    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\r\n    \r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    color: var(--color-text-main);\r\n    background-color: #ffffff;\r\n    background-image: \r\n      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);\r\n    background-size: 4vw 4vw;\r\n    background-position: center center;\r\n    padding: 100px 5vw;\r\n    overflow: hidden; \/* \u9632\u6b62\u6490\u7834\u7248\u9762 *\/\r\n  }\r\n\r\n  \/* =========================================\r\n     2. \u4f48\u5c40\u67b6\u69cb\r\n     ========================================= *\/\r\n  #impact-data-wrapper .impact-container {\r\n    max-width: 1200px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n  }\r\n\r\n  \/* \u6a19\u984c\u5340 (\u521d\u59cb\u8a2d\u5b9a opacity: 0 \u6e96\u5099\u9032\u5834) *\/\r\n  #impact-data-wrapper .section-header {\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n    opacity: 0;\r\n    transform: translateY(30px);\r\n    transition: all 1s var(--ease-out-expo);\r\n  }\r\n  \r\n  #impact-data-wrapper .section-header.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  #impact-data-wrapper .section-title {\r\n    font-size: clamp(2rem, 3vw, 3rem);\r\n    font-weight: 700;\r\n    margin-bottom: 12px;\r\n    color: var(--color-text-main);\r\n  }\r\n\r\n  #impact-data-wrapper .section-subtitle {\r\n    color: var(--color-text-sub);\r\n    font-size: 1.1rem;\r\n    letter-spacing: 0.05em;\r\n  }\r\n\r\n  \/* =========================================\r\n     3. Bento Box \u6578\u64da\u7db2\u683c\r\n     ========================================= *\/\r\n  #impact-data-wrapper .data-grid {\r\n    display: grid;\r\n    grid-template-columns: repeat(12, 1fr);\r\n    gap: 24px;\r\n    width: 100%;\r\n  }\r\n\r\n  \/* \u6578\u64da\u5361\u7247\u5171\u7528\u6a23\u5f0f *\/\r\n  #impact-data-wrapper .data-card {\r\n    background-color: var(--color-surface);\r\n    border: 1px solid rgba(15, 23, 42, 0.05);\r\n    border-radius: 4px;\r\n    padding: 40px 32px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    position: relative;\r\n    overflow: hidden;\r\n    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s ease, opacity 0.8s ease, transform 0.8s var(--ease-out-expo);\r\n    \r\n    \/* \u9032\u5834\u52d5\u756b\u521d\u59cb\u72c0\u614b *\/\r\n    opacity: 0;\r\n    transform: translateY(40px);\r\n  }\r\n\r\n  #impact-data-wrapper .data-card.is-visible {\r\n    opacity: 1;\r\n    transform: translateY(0);\r\n  }\r\n\r\n  \/* \u968e\u68af\u5f0f\u6d6e\u73fe\u5ef6\u9072 *\/\r\n  #impact-data-wrapper .data-card:nth-child(1) { transition-delay: 0.1s; }\r\n  #impact-data-wrapper .data-card:nth-child(2) { transition-delay: 0.2s; }\r\n  #impact-data-wrapper .data-card:nth-child(3) { transition-delay: 0.3s; }\r\n  #impact-data-wrapper .data-card:nth-child(4) { transition-delay: 0.4s; }\r\n  #impact-data-wrapper .data-card:nth-child(5) { transition-delay: 0.5s; }\r\n\r\n  \/* \u5361\u7247\u61f8\u505c\u7279\u6548 *\/\r\n  #impact-data-wrapper .data-card::before {\r\n    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;\r\n    background-color: var(--color-primary);\r\n    transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-out-expo);\r\n  }\r\n  #impact-data-wrapper .data-card:hover {\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);\r\n    background-color: #ffffff;\r\n  }\r\n  #impact-data-wrapper .data-card:hover::before { transform: scaleX(1); }\r\n\r\n  \/* \u7db2\u683c\u5206\u914d *\/\r\n  #impact-data-wrapper .card-main { grid-column: span 8; }\r\n  #impact-data-wrapper .card-hours { grid-column: span 4; }\r\n  #impact-data-wrapper .card-sub { grid-column: span 4; }\r\n\r\n  \/* \u5167\u5bb9\u6392\u7248 *\/\r\n  #impact-data-wrapper .card-label { font-size: 1.1rem; color: var(--color-text-sub); font-weight: 500; margin-bottom: 16px; }\r\n  #impact-data-wrapper .card-value-wrap { display: flex; align-items: baseline; gap: 8px; }\r\n  #impact-data-wrapper .card-value {\r\n    font-size: clamp(2.5rem, 5vw, 4.5rem);\r\n    font-weight: 700; color: var(--color-primary); line-height: 1;\r\n    font-variant-numeric: tabular-nums;\r\n  }\r\n  #impact-data-wrapper .card-unit { font-size: 1.2rem; color: var(--color-text-main); font-weight: 500; }\r\n  #impact-data-wrapper .card-main .card-value { font-size: clamp(3.5rem, 7vw, 6.5rem); letter-spacing: -0.02em; }\r\n\r\n  \/* \u5e95\u90e8\u66f4\u65b0\u63d0\u793a *\/\r\n  #impact-data-wrapper .update-note {\r\n    margin-top: 40px; font-size: 0.9rem; color: #94a3b8; text-align: center;\r\n    opacity: 0; transition: opacity 1s ease 0.8s;\r\n  }\r\n  #impact-data-wrapper .update-note.is-visible { opacity: 1; }\r\n\r\n  \/* =========================================\r\n     4. RWD \u97ff\u61c9\u5f0f\u4f48\u5c40\r\n     ========================================= *\/\r\n  @media (max-width: 992px) {\r\n    #impact-data-wrapper .data-grid { grid-template-columns: repeat(2, 1fr); }\r\n    #impact-data-wrapper .card-main, #impact-data-wrapper .card-hours { grid-column: span 2; }\r\n    #impact-data-wrapper .card-sub { grid-column: span 1; }\r\n    #impact-data-wrapper .card-sub:last-child { grid-column: span 2; } \r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    #impact-data-wrapper { padding: 60px 5vw; }\r\n    #impact-data-wrapper .data-grid { grid-template-columns: 1fr; gap: 16px; }\r\n    #impact-data-wrapper .card-main, #impact-data-wrapper .card-hours, #impact-data-wrapper .card-sub, #impact-data-wrapper .card-sub:last-child { grid-column: span 1; }\r\n    #impact-data-wrapper .data-card { padding: 32px 24px; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"impact-data-wrapper\">\r\n  <div class=\"impact-container\">\r\n    \r\n    <div class=\"section-header\">\r\n      <h2 class=\"section-title\">\u5f71\u97ff\u529b\u6578\u64da<\/h2>\r\n      <p class=\"section-subtitle\">\u622a\u81f3\u76ee\u524d\u70ba\u6b62<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"data-grid\">\r\n      <div class=\"data-card card-main\">\r\n        <div class=\"card-label\">\u7d2f\u7a4d\u5584\u9ede\u6578<\/div>\r\n        <div class=\"card-value-wrap\">\r\n          <span class=\"card-value counter\" data-target=\"206000\">0<\/span>\r\n          <span class=\"card-unit\">\u9ede<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"data-card card-hours\">\r\n        <div class=\"card-label\">\u7d2f\u7a4d\u670d\u52d9\u6642\u6578<\/div>\r\n        <div class=\"card-value-wrap\">\r\n          <span class=\"card-value counter\" data-target=\"12500\">0<\/span>\r\n          <span class=\"card-unit\">\u5c0f\u6642<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"data-card card-sub\">\r\n        <div class=\"card-label\">\u5408\u4f5c\u4f01\u696d<\/div>\r\n        <div class=\"card-value-wrap\">\r\n          <span class=\"card-value counter\" data-target=\"12\">0<\/span>\r\n          <span class=\"card-unit\">\u5bb6<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"data-card card-sub\">\r\n        <div class=\"card-label\">\u5408\u4f5c\u5584\u4f01\u696d<\/div>\r\n        <div class=\"card-value-wrap\">\r\n          <span class=\"card-value counter\" data-target=\"40\">0<\/span>\r\n          <span class=\"card-unit\">\u5bb6<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"data-card card-sub\">\r\n        <div class=\"card-label\">\u53d7\u76ca\u4eba\u6b21<\/div>\r\n        <div class=\"card-value-wrap\">\r\n          <span class=\"card-value counter\" data-target=\"1600\">0<\/span>\r\n          <span class=\"card-unit\">\u4eba<\/span>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"update-note\">\r\n      \uff08\u6578\u64da\u7531\u5354\u6703\u5b9a\u671f\u66f4\u65b0\uff09\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    function initImpactAnimation() {\r\n      \/\/ \u6aa2\u67e5\u662f\u5426\u5728 Elementor \u7de8\u8f2f\u6a21\u5f0f\u4e2d\uff0c\u5982\u679c\u662f\uff0c\u76f4\u63a5\u986f\u793a\u6240\u6709\u5167\u5bb9\uff0c\u4e0d\u8dd1\u9032\u5834\u52d5\u756b\u65b9\u4fbf\u7de8\u8f2f\r\n      const isElementorEditor = document.body.classList.contains('elementor-editor-active');\r\n\r\n      const elementsToAnimate = document.querySelectorAll('#impact-data-wrapper .section-header, #impact-data-wrapper .data-card, #impact-data-wrapper .update-note');\r\n      \r\n      if (isElementorEditor) {\r\n        elementsToAnimate.forEach(el => el.classList.add('is-visible'));\r\n        document.querySelectorAll('.counter').forEach(counter => {\r\n          counter.innerText = Number(counter.getAttribute('data-target')).toLocaleString('en-US');\r\n        });\r\n        return;\r\n      }\r\n\r\n      \/\/ \u6b63\u5e38\u524d\u53f0\u7684\u6efe\u52d5\u8996\u5dee\u908f\u8f2f\r\n      const observerOptions = { root: null, rootMargin: '0px', threshold: 0.15 };\r\n      const observer = new IntersectionObserver((entries, observer) => {\r\n        entries.forEach(entry => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('is-visible');\r\n            const counter = entry.target.querySelector('.counter');\r\n            if (counter && !counter.classList.contains('counted')) {\r\n              startCounter(counter);\r\n              counter.classList.add('counted');\r\n            }\r\n            observer.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, observerOptions);\r\n\r\n      elementsToAnimate.forEach(el => observer.observe(el));\r\n    }\r\n\r\n    \/\/ \u7de9\u52d5\u6578\u5b57\u52d5\u756b\u51fd\u6578\r\n    function startCounter(counterElement) {\r\n      const target = +counterElement.getAttribute('data-target');\r\n      const duration = 2000; \r\n      const frameRate = 1000 \/ 60; \r\n      const totalFrames = Math.round(duration \/ frameRate);\r\n      let frame = 0;\r\n      const easeOutQuad = t => t * (2 - t);\r\n\r\n      const counterInterval = setInterval(() => {\r\n        frame++;\r\n        const progress = easeOutQuad(frame \/ totalFrames);\r\n        const currentCount = Math.round(target * progress);\r\n        counterElement.innerText = currentCount.toLocaleString('en-US');\r\n\r\n        if (frame === totalFrames) {\r\n          clearInterval(counterInterval);\r\n          counterElement.innerText = target.toLocaleString('en-US'); \r\n        }\r\n      }, frameRate);\r\n    }\r\n\r\n    \/\/ \u9632\u5446\uff1a\u7121\u8ad6\u7db2\u9801\u662f\u6b63\u5728\u8f09\u5165\u9084\u662f\u5df2\u7d93\u8f09\u5165\u5b8c\u7562\uff0c\u90fd\u80fd\u78ba\u4fdd\u8173\u672c\u6b63\u78ba\u57f7\u884c\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initImpactAnimation);\r\n    } else {\r\n      initImpactAnimation();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a451be4 e-flex e-con-boxed e-con e-parent\" data-id=\"a451be4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-841589f elementor-widget elementor-widget-html\" data-id=\"841589f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* =========================================\r\n     1. \u9802\u7d1a\u5168\u5c40\u8b8a\u6578 & \u7d14\u767d\u7cfb\u7d71\u7db2\u683c\r\n     ========================================= *\/\r\n  #award-winning-wrapper {\r\n    --color-bg: #ffffff;\r\n    --color-surface: rgba(255, 255, 255, 0.6);\r\n    --color-text-main: #0a0a0a;\r\n    --color-text-sub: #64748b;\r\n    --color-primary: #059669;\r\n    --color-primary-light: rgba(5, 150, 105, 0.1);\r\n    --color-border: rgba(0, 0, 0, 0.06);\r\n    --grid-line: rgba(0, 0, 0, 0.02); \r\n    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);\r\n    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);\r\n    \r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    color: var(--color-text-main);\r\n    background-color: var(--color-bg);\r\n    \/* \u7cfb\u7d71\u7db2\u683c\u80cc\u666f *\/\r\n    background-image: \r\n      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);\r\n    background-size: 4vw 4vw;\r\n    background-position: center center;\r\n    overflow-x: hidden;\r\n    margin: 0; padding: 0;\r\n  }\r\n\r\n  #award-winning-wrapper h2, #award-winning-wrapper h3, #award-winning-wrapper p { margin: 0; }\r\n\r\n  \/* \u78c1\u5438\u81ea\u8a02\u6e38\u6a19 *\/\r\n  body.has-custom-cursor { cursor: none !important; }\r\n  body.has-custom-cursor a, body.has-custom-cursor .sh-card { cursor: none !important; }\r\n  \r\n  .aww-cursor-dot, .aww-cursor-ring {\r\n    position: fixed; top: 0; left: 0; transform: translate(-50%, -50%);\r\n    border-radius: 50%; pointer-events: none; z-index: 9999; display: none;\r\n  }\r\n  body.has-custom-cursor .aww-cursor-dot, body.has-custom-cursor .aww-cursor-ring { display: block; }\r\n  \r\n  .aww-cursor-dot { width: 6px; height: 6px; background: var(--color-primary); }\r\n  .aww-cursor-ring {\r\n    width: 40px; height: 40px; border: 1px solid rgba(5, 150, 105, 0.4);\r\n    transition: width 0.3s, height 0.3s, background-color 0.3s;\r\n  }\r\n  body.cursor-hovering .aww-cursor-ring {\r\n    width: 60px; height: 60px; background-color: rgba(5, 150, 105, 0.1); border-color: transparent;\r\n  }\r\n\r\n  \/* \u5171\u7528\u6a19\u984c *\/\r\n  .super-title {\r\n    font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 800; line-height: 1.2;\r\n    letter-spacing: -0.02em; margin-bottom: 24px; color: var(--color-text-main);\r\n  }\r\n\r\n  \/* =========================================\r\n     2. \u7b2c\u4e8c\u5340\uff1a\u70ba\u4ec0\u9ebc\u9700\u8981\u5584\u5faa\u74b0\uff1f (\u6c34\u58a8\u64f4\u6563\u4e92\u52d5)\r\n     ========================================= *\/\r\n  .pain-section {\r\n    padding: 150px 5vw; max-width: 1400px; margin: 0 auto;\r\n  }\r\n\r\n  .pain-intro {\r\n    font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.8; color: var(--color-text-sub);\r\n    max-width: 700px; margin-bottom: 60px;\r\n  }\r\n\r\n  \/* \u906e\u7f69\u6587\u5b57\u6d6e\u73fe\u7279\u6548 (Mask Reveal) *\/\r\n  .mask-line { display: block; overflow: hidden; padding-bottom: 5px; }\r\n  .mask-inner {\r\n    display: inline-block; transform: translateY(110%); opacity: 0;\r\n    animation: maskUp 1s var(--ease-out-expo) forwards;\r\n  }\r\n  .mask-line:nth-child(2) .mask-inner { animation-delay: 0.1s; }\r\n  .mask-line:nth-child(3) .mask-inner { animation-delay: 0.2s; }\r\n  \r\n  @keyframes maskUp {\r\n    0% { transform: translateY(110%); opacity: 0; }\r\n    100% { transform: translateY(0); opacity: 1; }\r\n  }\r\n\r\n  \/* \u75db\u9ede\u95dc\u9375\u5b57\u6d6e\u52d5\u6392\u5217 *\/\r\n  .pain-keywords { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 80px; }\r\n  .kw-pill {\r\n    padding: 12px 24px; font-size: 1rem; color: var(--color-text-main);\r\n    border: 1px solid var(--color-border); border-radius: 100px;\r\n    background: rgba(255,255,255,0.8); backdrop-filter: blur(5px);\r\n    display: flex; align-items: center; gap: 8px; transition: transform 0.4s ease;\r\n  }\r\n  .kw-pill::before { content: ''; width: 6px; height: 6px; background: #ef4444; border-radius: 50%; }\r\n  .kw-pill:hover { transform: translateY(-3px); border-color: rgba(15, 23, 42, 0.2); }\r\n\r\n  \/* \u4e09\u65b9\u56f0\u5883\uff1a\u6e38\u6a19\u6c34\u58a8\u64f4\u6563\u5361\u7247 *\/\r\n  .stakeholders-grid {\r\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;\r\n  }\r\n\r\n  .sh-card {\r\n    position: relative; padding: 40px; border-radius: 20px;\r\n    background: rgba(255, 255, 255, 0.4); border: 1px solid var(--color-border);\r\n    backdrop-filter: blur(10px); overflow: hidden;\r\n    transition: transform 0.4s var(--ease-out-expo), border-color 0.4s ease;\r\n  }\r\n  \r\n  \/* \u6c34\u58a8\u5149\u6688\u5c64 (\u900f\u904e JS \u66f4\u65b0 --x \u548c --y \u5ea7\u6a19) *\/\r\n  .sh-card::before {\r\n    content: ''; position: absolute; top: var(--y, 50%); left: var(--x, 50%);\r\n    width: 300px; height: 300px; transform: translate(-50%, -50%);\r\n    background: radial-gradient(circle, var(--color-primary-light) 0%, transparent 70%);\r\n    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0;\r\n  }\r\n  \r\n  .sh-card:hover { transform: translateY(-5px); border-color: rgba(5, 150, 105, 0.3); }\r\n  .sh-card:hover::before { opacity: 1; }\r\n\r\n  .sh-content { position: relative; z-index: 1; }\r\n  .sh-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 16px; color: var(--color-text-main); }\r\n  .sh-card p { font-size: 1.05rem; line-height: 1.8; color: var(--color-text-sub); }\r\n\r\n  \/* =========================================\r\n     3. \u7b2c\u4e09\u5340\uff1a\u4e09\u5927\u6838\u5fc3\u6a5f\u5236 (\u5e7e\u4f55 SVG \u6efe\u52d5 Bar)\r\n     ========================================= *\/\r\n  .mechanisms-section {\r\n    position: relative; max-width: 1400px; margin: 0 auto; padding: 100px 5vw 200px 5vw;\r\n    display: flex; gap: 6vw; align-items: flex-start;\r\n  }\r\n\r\n  \/* \u5de6\u5074\uff1a\u9ecf\u6eef SVG \u8ecc\u9053 (The Bar) *\/\r\n  .mech-bar-sticky {\r\n    width: 35%; position: sticky; top: 150px; height: 70vh;\r\n    display: flex; gap: 40px;\r\n  }\r\n\r\n  .svg-bar-container {\r\n    width: 40px; height: 100%; position: relative;\r\n  }\r\n  \r\n  .svg-track { width: 100%; height: 100%; overflow: visible; }\r\n  \r\n  \/* \u5e95\u5c64\u7070\u8272\u8ecc\u9053 *\/\r\n  .track-line-bg { fill: none; stroke: var(--color-border); stroke-width: 2; }\r\n  .track-node-bg { fill: var(--color-bg); stroke: var(--color-border); stroke-width: 2; transition: all 0.3s ease; }\r\n  \r\n  \/* \u9802\u5c64\u7da0\u8272\u52d5\u614b\u9032\u5ea6 (\u7531 JS \u63a7\u5236 stroke-dashoffset) *\/\r\n  .track-line-fill {\r\n    fill: none; stroke: var(--color-primary); stroke-width: 4;\r\n    stroke-linecap: round;\r\n    stroke-dasharray: 1000; \/* \u9810\u8a2d\u5920\u9577\u7684\u6578\u503c\uff0cJS \u6703\u7cbe\u6e96\u91cd\u7b97 *\/\r\n    stroke-dashoffset: 1000;\r\n  }\r\n  \r\n  \/* \u7bc0\u9ede (1, 2, 3) \u7684\u539f\u5b50\u878d\u5408\u653e\u5927\u7279\u6548 *\/\r\n  .track-node-fill {\r\n    fill: var(--color-bg); stroke: var(--color-primary); stroke-width: 4;\r\n    transform-origin: center; transform: scale(0); opacity: 0;\r\n    transition: transform 0.5s var(--ease-spring), opacity 0.3s ease;\r\n  }\r\n  .track-node-fill.is-active { transform: scale(1); opacity: 1; }\r\n  .track-node-fill.is-pulsing {\r\n    animation: pulseNode 1.5s infinite alternate var(--ease-smooth);\r\n  }\r\n\r\n  @keyframes pulseNode {\r\n    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }\r\n    100% { transform: scale(1.3); box-shadow: 0 0 0 15px rgba(5, 150, 105, 0); }\r\n  }\r\n\r\n  .mech-sticky-text { margin-top: 20px; }\r\n  .mech-sticky-text h2 { font-size: 2.5rem; font-weight: 800; line-height: 1.3; }\r\n\r\n  \/* \u53f3\u5074\uff1a\u6efe\u52d5\u5361\u7247\u5340 *\/\r\n  .mech-scroll-content { width: 65%; display: flex; flex-direction: column; padding-bottom: 20vh; }\r\n  \r\n  .mech-step-card {\r\n    min-height: 50vh; display: flex; flex-direction: column; justify-content: center;\r\n    padding: 60px; margin-bottom: 40px;\r\n    background: rgba(255, 255, 255, 0.7); border: 1px solid var(--color-border);\r\n    border-radius: 24px; backdrop-filter: blur(10px);\r\n    opacity: 0.3; transform: scale(0.95) translateY(20px);\r\n    transition: all 0.6s var(--ease-out-expo);\r\n    position: relative; overflow: hidden;\r\n  }\r\n\r\n  .mech-step-card.is-active {\r\n    opacity: 1; transform: scale(1) translateY(0);\r\n    border-color: rgba(5, 150, 105, 0.2);\r\n    box-shadow: 0 20px 50px rgba(0,0,0,0.03);\r\n  }\r\n\r\n  \/* \u52d5\u614b\u8a08\u6578\u5668\u88dd\u98fe *\/\r\n  .mech-big-num {\r\n    position: absolute; right: 20px; bottom: -20px;\r\n    font-size: 15vw; font-weight: 900; line-height: 1; font-family: 'Arial Black', sans-serif;\r\n    color: transparent; -webkit-text-stroke: 1px rgba(15, 23, 42, 0.05);\r\n    transition: -webkit-text-stroke 0.5s ease, color 0.5s ease;\r\n  }\r\n  .mech-step-card.is-active .mech-big-num { -webkit-text-stroke: 0px transparent; color: rgba(5, 150, 105, 0.05); }\r\n\r\n  .mech-step-card h3 { font-size: clamp(2rem, 3vw, 2.5rem); font-weight: 700; margin-bottom: 20px; color: var(--color-text-main); position: relative; z-index: 2; }\r\n  .mech-step-card p { font-size: 1.15rem; line-height: 1.8; color: var(--color-text-sub); position: relative; z-index: 2; }\r\n\r\n  \/* =========================================\r\n     4. RWD \u5b8c\u7f8e\u97ff\u61c9\u5f0f (\u624b\u6a5f\u8207\u5e73\u677f)\r\n     ========================================= *\/\r\n  @media (max-width: 992px) {\r\n    .pain-section, .mechanisms-section { padding: 80px 5vw; flex-direction: column; gap: 40px; }\r\n    \r\n    .stakeholders-grid { grid-template-columns: 1fr; gap: 20px; }\r\n    \r\n    .mech-bar-sticky { width: 100%; position: relative; top: 0; height: auto; flex-direction: column; gap: 20px; }\r\n    .svg-bar-container { display: none; } \/* \u624b\u6a5f\u7248\u96b1\u85cf\u7cbe\u5bc6\u8ecc\u9053\uff0c\u6539\u7528\u7c21\u55ae\u5361\u7247 *\/\r\n    \r\n    .mech-scroll-content { width: 100%; padding-bottom: 0; }\r\n    .mech-step-card { min-height: auto; padding: 40px 30px; margin-bottom: 24px; opacity: 1; transform: none; }\r\n    .mech-big-num { font-size: 30vw; right: -5%; bottom: -10%; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"award-winning-wrapper\">\r\n  \r\n  <div class=\"aww-cursor-dot\"><\/div>\r\n  <div class=\"aww-cursor-ring\"><\/div>\r\n\r\n<section class=\"pain-section\" id=\"about\">\r\n    <h2 class=\"super-title\">\r\n      <span class=\"mask-line\"><span class=\"mask-inner\">\u70ba\u4ec0\u9ebc\u9700\u8981<\/span><\/span>\r\n      <span class=\"mask-line\"><span class=\"mask-inner\">\u5584\u5faa\u74b0\uff1f<\/span><\/span>\r\n    <\/h2>\r\n    \r\n    <p class=\"pain-intro\">\r\n      <span class=\"mask-line\"><span class=\"mask-inner\">\u5728\u9ad8\u9f61\u5316\u8207\u50f9\u503c\u8f49\u578b\u7684\u6642\u4ee3\uff0c\u793e\u6703\u5c0d\u5584\u7684\u9700\u6c42\u6bd4\u4ee5\u5f80\u66f4\u8feb\u5207\u3002<\/span><\/span>\r\n      <span class=\"mask-line\"><span class=\"mask-inner\">\u7136\u800c\uff0c\u591a\u6578\u5584\u884c\u537b\u9762\u81e8\u8457\u5236\u5ea6\u7684\u7f3a\u53e3\u3002<\/span><\/span>\r\n    <\/p>\r\n\r\n    <div class=\"pain-keywords\">\r\n      <div class=\"kw-pill\">\u7121\u6cd5\u88ab\u7d00\u9304<\/div>\r\n      <div class=\"kw-pill\">\u7121\u6cd5\u88ab\u7d2f\u7a4d<\/div>\r\n      <div class=\"kw-pill\">\u7121\u6cd5\u8f49\u5316\u4fdd\u969c<\/div>\r\n      <div class=\"kw-pill\">\u7f3a\u4e4f\u900f\u660e\u5236\u5ea6<\/div>\r\n    <\/div>\r\n\r\n    <div class=\"stakeholders-grid\">\r\n      <div class=\"sh-card aww-hover-target\">\r\n        <div class=\"sh-content\">\r\n          <h3>\u4f01\u696d\u6295\u5165 CSR<\/h3>\r\n          <p>\u6295\u5165\u5927\u91cf\u8cc7\u6e90\u8207\u7d93\u8cbb\uff0c\u537b\u96e3\u4ee5\u91cf\u5316\u5be6\u8cea\u5f71\u97ff\u529b\uff0c\u7f3a\u4e4f\u53ef\u8ffd\u6eaf\u7684 ESG \u6578\u64da\u652f\u6301\u3002<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"sh-card aww-hover-target\">\r\n        <div class=\"sh-content\">\r\n          <h3>\u5fd7\u5de5\u6295\u5165\u6642\u9593<\/h3>\r\n          <p>\u71b1\u5fc3\u53c3\u8207\u516c\u76ca\uff0c\u4f46\u6642\u9593\u8207\u5fc3\u529b\u7684\u4ed8\u51fa\u7f3a\u4e4f\u9577\u671f\u50f9\u503c\u4fdd\u969c\uff0c\u7121\u6cd5\u5728\u672a\u4f86\u8f49\u5316\u70ba\u81ea\u8eab\u8cc7\u7522\u3002<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"sh-card aww-hover-target\">\r\n        <div class=\"sh-content\">\r\n          <h3>\u516c\u76ca\u7d44\u7e54\u670d\u52d9<\/h3>\r\n          <p>\u52aa\u529b\u5728\u7b2c\u4e00\u7dda\u670d\u52d9\uff0c\u537b\u56e0\u7f3a\u4e4f\u6a19\u6e96\u5316\u5be9\u6838\u8207\u6578\u64da\uff0c\u96e3\u4ee5\u5efa\u7acb\u9577\u671f\u7684\u793e\u6703\u4fe1\u4efb\u3002<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"mechanisms-section\">\r\n    \r\n    <div class=\"mech-bar-sticky\">\r\n      \r\n      <div class=\"svg-bar-container\">\r\n        <svg class=\"svg-track\" viewBox=\"0 0 40 600\" preserveAspectRatio=\"xMidYMin slice\">\r\n          <line class=\"track-line-bg\" x1=\"20\" y1=\"0\" x2=\"20\" y2=\"600\"><\/line>\r\n          <circle class=\"track-node-bg\" cx=\"20\" cy=\"50\" r=\"10\"><\/circle>\r\n          <circle class=\"track-node-bg\" cx=\"20\" cy=\"300\" r=\"10\"><\/circle>\r\n          <circle class=\"track-node-bg\" cx=\"20\" cy=\"550\" r=\"10\"><\/circle>\r\n\r\n          <line class=\"track-line-fill\" id=\"js-track-line\" x1=\"20\" y1=\"0\" x2=\"20\" y2=\"600\"><\/line>\r\n          <circle class=\"track-node-fill js-track-node\" cx=\"20\" cy=\"50\" r=\"10\"><\/circle>\r\n          <circle class=\"track-node-fill js-track-node\" cx=\"20\" cy=\"300\" r=\"10\"><\/circle>\r\n          <circle class=\"track-node-fill js-track-node\" cx=\"20\" cy=\"550\" r=\"10\"><\/circle>\r\n        <\/svg>\r\n      <\/div>\r\n\r\n      <div class=\"mech-sticky-text\">\r\n        <h2 class=\"super-title\">\u5584\u5faa\u74b0<br>\u4e09\u5927\u6a5f\u5236<\/h2>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"mech-scroll-content\">\r\n      \r\n      <div class=\"mech-step-card js-mech-card\">\r\n        <div class=\"mech-big-num\">01<\/div>\r\n        <h3>\u5584\u4efb\u52d9\u5236\u5ea6<\/h3>\r\n        <p>\u7531\u5354\u6703\u5236\u5b9a\u4efb\u52d9\u767c\u5e03\u8207\u5be9\u6838\u6a19\u6e96\uff0c\u78ba\u4fdd\u6bcf\u4e00\u9805\u516c\u76ca\u884c\u52d5\u7686\u7b26\u5408\u771f\u5be6\u6027\u3001\u900f\u660e\u6027\u8207\u53ef\u8ffd\u6eaf\u6027\uff0c\u5efa\u7acb\u5805\u5be6\u7684\u516c\u4fe1\u529b\u3002<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"mech-step-card js-mech-card\">\r\n        <div class=\"mech-big-num\">02<\/div>\r\n        <h3>\u5584\u9ede\u6578\u5236\u5ea6<\/h3>\r\n        <p>\u900f\u904e\u5be9\u6838\u5f8c\u7684\u4efb\u52d9\u53c3\u8207\uff0c\u6703\u54e1\u53ef\u7d2f\u7a4d\u5584\u9ede\u6578\uff0c\u5c07\u7121\u5f62\u7684\u5584\u8209\u91cf\u5316\uff0c\u5f62\u6210\u500b\u4eba\u5584\u884c\u7d00\u9304\u8207\u771f\u5be6\u7684\u5584\u8cc7\u7522\u3002<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"mech-step-card js-mech-card\">\r\n        <div class=\"mech-big-num\">03<\/div>\r\n        <h3>\u5584\u4fdd\u969c\u6a5f\u5236<\/h3>\r\n        <p>\u5584\u9ede\u6578\u53ef\u65bc\u672a\u4f86\u514c\u63db\u5408\u4f5c\u5584\u4f01\u696d\u6240\u63d0\u4f9b\u4e4b\u670d\u52d9\uff0c\u5305\u542b\u966a\u4f34\u3001\u6559\u80b2\u3001\u5065\u5eb7\u8207\u793e\u5340\u652f\u6301\u7b49\uff0c\u8b93\u5584\u884c\u6210\u70ba\u53ef\u5ef6\u7e8c\u7684\u793e\u6703\u4fdd\u969c\u3002<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    function initAwardWinningInteractions() {\r\n      const isEditor = document.body.classList.contains('elementor-editor-active');\r\n      \r\n      \/\/ 1. \u78c1\u5438\u6e38\u6a19 & \u6c34\u58a8\u64f4\u6563\u7279\u6548 (Ink Diffusion)\r\n      if (window.matchMedia(\"(pointer: fine)\").matches && !isEditor) {\r\n        document.body.classList.add('has-custom-cursor');\r\n        const dot = document.querySelector('.aww-cursor-dot');\r\n        const ring = document.querySelector('.aww-cursor-ring');\r\n        let mouseX = 0, mouseY = 0, ringX = 0, ringY = 0;\r\n\r\n        window.addEventListener('mousemove', (e) => {\r\n          mouseX = e.clientX; mouseY = e.clientY;\r\n          dot.style.transform = `translate(${mouseX}px, ${mouseY}px)`;\r\n        });\r\n\r\n        const animateRing = () => {\r\n          ringX += (mouseX - ringX) * 0.15; ringY += (mouseY - ringY) * 0.15;\r\n          ring.style.transform = `translate(${ringX}px, ${ringY}px)`;\r\n          requestAnimationFrame(animateRing);\r\n        };\r\n        animateRing();\r\n\r\n        \/\/ \u7d81\u5b9a Hover \u653e\u5927\u8207\u5361\u7247\u5167\u90e8\u5ea7\u6a19\u8ffd\u8e64 (\u7522\u751f\u6c34\u58a8\u5149\u6688)\r\n        document.querySelectorAll('.aww-hover-target').forEach(card => {\r\n          card.addEventListener('mouseenter', () => document.body.classList.add('cursor-hovering'));\r\n          card.addEventListener('mouseleave', () => document.body.classList.remove('cursor-hovering'));\r\n          \r\n          card.addEventListener('mousemove', (e) => {\r\n            const rect = card.getBoundingClientRect();\r\n            const x = e.clientX - rect.left;\r\n            const y = e.clientY - rect.top;\r\n            card.style.setProperty('--x', `${x}px`);\r\n            card.style.setProperty('--y', `${y}px`);\r\n          });\r\n        });\r\n      }\r\n\r\n      \/\/ 2. SVG \u8ecc\u9053\u7e6a\u88fd\u8207\u6a5f\u5236\u5361\u7247\u9023\u52d5 (Scroll-Linked Bar)\r\n      const trackLine = document.getElementById('js-track-line');\r\n      const trackNodes = document.querySelectorAll('.js-track-node');\r\n      const mechCards = document.querySelectorAll('.js-mech-card');\r\n      \r\n      if (isEditor) {\r\n        \/\/ Elementor \u9632\u5446\uff1a\u5168\u958b\u9810\u89bd\r\n        if(trackLine) trackLine.style.strokeDashoffset = '0';\r\n        trackNodes.forEach(n => n.classList.add('is-active'));\r\n        mechCards.forEach(c => c.classList.add('is-active'));\r\n        return;\r\n      }\r\n\r\n      if (window.innerWidth > 992 && trackLine && mechCards.length > 0) {\r\n        \/\/ \u53d6\u5f97 SVG \u7dda\u689d\u7e3d\u9577\u5ea6\r\n        const pathLength = 600; \/\/ \u5c0d\u61c9 svg-track \u7684\u9577\u5ea6\r\n        trackLine.style.strokeDasharray = pathLength;\r\n        trackLine.style.strokeDashoffset = pathLength; \/\/ \u521d\u59cb\u5168\u96b1\u85cf\r\n\r\n        window.addEventListener('scroll', () => {\r\n          const windowHeight = window.innerHeight;\r\n          let activeIndex = -1;\r\n\r\n          mechCards.forEach((card, index) => {\r\n            const rect = card.getBoundingClientRect();\r\n            \/\/ \u7576\u5361\u7247\u5230\u9054\u8996\u7a97 65% \u6642\u8996\u70ba\u89f8\u767c\r\n            const triggerPoint = windowHeight * 0.65;\r\n            \r\n            if (rect.top < triggerPoint) {\r\n              card.classList.add('is-active');\r\n              activeIndex = index;\r\n            } else {\r\n              card.classList.remove('is-active');\r\n            }\r\n          });\r\n\r\n          \/\/ \u6839\u64da\u89f8\u767c\u7684\u5361\u7247\u4f86\u63a8\u9032 SVG \u7da0\u7dda\u8207\u555f\u52d5\u7bc0\u9ede\u539f\u5b50\u878d\u5408\r\n          let targetOffset = pathLength; \/\/ \u9810\u8a2d\u6c92\u89f8\u767c\r\n          \r\n          trackNodes.forEach((node, i) => {\r\n            if (i <= activeIndex) {\r\n              node.classList.add('is-active');\r\n              if (i === activeIndex) node.classList.add('is-pulsing'); \/\/ \u6700\u65b0\u5230\u9054\u7684\u7bc0\u9ede\u6703\u8108\u52d5\r\n              else node.classList.remove('is-pulsing');\r\n            } else {\r\n              node.classList.remove('is-active', 'is-pulsing');\r\n            }\r\n          });\r\n\r\n          \/\/ \u7cbe\u6e96\u5c0d\u61c9 SVG \u5ea7\u6a19\uff1a\u7bc0\u9ede 1 \u5728 cy=50, \u7bc0\u9ede 2 cy=300, \u7bc0\u9ede 3 cy=550\r\n          if (activeIndex === 0) targetOffset = pathLength - 50;\r\n          else if (activeIndex === 1) targetOffset = pathLength - 300;\r\n          else if (activeIndex === 2) targetOffset = 0; \/\/ \u756b\u6eff\r\n\r\n          trackLine.style.strokeDashoffset = targetOffset;\r\n        });\r\n      } else {\r\n        \/\/ \u624b\u6a5f\u7248\u76f4\u63a5\u986f\u793a\u5361\u7247\r\n        mechCards.forEach(c => c.classList.add('is-active'));\r\n      }\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initAwardWinningInteractions);\r\n    } else {\r\n      initAwardWinningInteractions();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e02377c e-flex e-con-boxed e-con e-parent\" data-id=\"e02377c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7e2a758 elementor-widget elementor-widget-html\" data-id=\"7e2a758\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>\u5584\u5faa\u74b0\u6703\u54e1\u5236\u5ea6<\/title>\r\n<style>\r\n  \/* =========================================\r\n     1. \u5168\u5c40\u8b8a\u6578 & \u9802\u7d1a\u7a7a\u6c23\u611f\u7db2\u683c (\u7121\u6a19\u9ede)\r\n     ========================================= *\/\r\n  #membership-pro-wrapper {\r\n    --bg-color: #ffffff;\r\n    --text-main: #0a0a0a;\r\n    --text-sub: #52525b;\r\n    --text-light: #a1a1aa;\r\n    --accent-color: #059669;\r\n    --accent-glow: rgba(5, 150, 105, 0.15);\r\n    \r\n    \/* \u6df1\u9083\u68ee\u6797\u58a8\u7da0\u8272\u6f38\u5c64 *\/\r\n    --dark-green-start: #064e3b;\r\n    --dark-green-end: #022c22;\r\n\r\n    --border-color: rgba(0, 0, 0, 0.08);\r\n    --grid-pattern: rgba(0, 0, 0, 0.02);\r\n    \r\n    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n    \r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    color: var(--text-main);\r\n    background-color: transparent;\r\n    background-image: \r\n      linear-gradient(to right, var(--grid-pattern) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-pattern) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    background-position: center top;\r\n    overflow-x: hidden;\r\n    margin: 0; padding: 0;\r\n    line-height: 1.6;\r\n    width: 100%;\r\n  }\r\n\r\n  #membership-pro-wrapper * { box-sizing: border-box; }\r\n  #membership-pro-wrapper h2, #membership-pro-wrapper h3, #membership-pro-wrapper p { margin: 0; }\r\n  #membership-pro-wrapper a { text-decoration: none; }\r\n\r\n  \/* \u9802\u7d1a\u9032\u5834\u52d5\u756b *\/\r\n  .fade-up-pro {\r\n    opacity: 0; transform: translateY(40px);\r\n    transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth);\r\n    will-change: transform, opacity;\r\n  }\r\n  .fade-up-pro.is-visible { opacity: 1; transform: translateY(0); }\r\n\r\n  .section-pad { padding: 120px 5vw; max-width: 1200px; margin: 0 auto; }\r\n\r\n  \/* \u5171\u7528\u6a19\u7c64\u8207\u6a19\u984c *\/\r\n  .badge-tag {\r\n    display: inline-block; padding: 8px 24px; border: 1px solid var(--border-color);\r\n    border-radius: 100px; font-size: 0.85rem; font-weight: 800; color: var(--accent-color);\r\n    background: rgba(5, 150, 105, 0.05); letter-spacing: 0.15em; margin-bottom: 24px; text-transform: uppercase;\r\n  }\r\n  \r\n  .title-h2 {\r\n    font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 900; line-height: 1.2;\r\n    letter-spacing: 0.02em; color: var(--text-main); margin-bottom: 24px;\r\n  }\r\n  \r\n  .desc-large {\r\n    font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--text-sub);\r\n    line-height: 1.8; max-width: 800px; margin-bottom: 40px;\r\n  }\r\n\r\n  \/* =========================================\r\n     2. \u82f1\u96c4\u5340 & \u6838\u5fc3\u8a2d\u8a08\u539f\u5247\r\n     ========================================= *\/\r\n  .hero-section { text-align: center; display: flex; flex-direction: column; align-items: center; padding-top: 150px; }\r\n  \r\n  \/* \u65b0\u589e\uff1a\u4e09\u5927\u6838\u5fc3\u539f\u5247\u7db2\u683c *\/\r\n  .core-grid {\r\n    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: 100%; margin-bottom: 80px;\r\n  }\r\n  .core-card {\r\n    background: rgba(255, 255, 255, 0.8); border: 1px solid var(--border-color);\r\n    border-radius: 20px; padding: 40px 30px; backdrop-filter: blur(12px);\r\n    transition: all 0.4s var(--ease-spring);\r\n  }\r\n  .core-card:hover { transform: translateY(-8px); border-color: rgba(5,150,105,0.3); box-shadow: 0 20px 40px var(--accent-glow); }\r\n  .core-num { font-family: monospace; font-size: 1.2rem; font-weight: 900; color: var(--accent-color); margin-bottom: 12px; }\r\n  .core-title { font-size: 1.4rem; font-weight: 800; color: var(--text-main); margin-bottom: 12px; }\r\n  .core-desc { font-size: 1rem; color: var(--text-sub); line-height: 1.6; }\r\n\r\n  \/* =========================================\r\n     3. \u5340\u584a\u4e8c\uff1a\u6703\u54e1\u53ef\u4ee5\u505a\u4ec0\u9ebc (Bento Grid)\r\n     ========================================= *\/\r\n  .bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; margin-top: 60px; }\r\n\r\n  .bento-item {\r\n    position: relative; background: #ffffff; border: 1px solid var(--border-color);\r\n    border-radius: 24px; padding: 50px 40px; overflow: hidden;\r\n    transition: all 0.4s var(--ease-spring); display: flex; flex-direction: column;\r\n  }\r\n  .bento-item:hover { transform: translateY(-8px); border-color: var(--accent-color); box-shadow: 0 15px 30px var(--accent-glow); }\r\n  \r\n  .bento-num { font-family: monospace; font-size: 1rem; font-weight: 800; color: var(--accent-color); letter-spacing: 0.1em; margin-bottom: 16px; }\r\n  .bento-title { font-size: 1.6rem; font-weight: 800; color: var(--text-main); margin-bottom: 16px; }\r\n  .bento-desc { font-size: 1.1rem; color: var(--text-sub); line-height: 1.8; }\r\n\r\n  .pill-cloud { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }\r\n  .pill { padding: 8px 20px; border: 1px solid var(--border-color); border-radius: 50px; font-size: 0.95rem; font-weight: 600; color: var(--text-sub); transition: all 0.3s ease; }\r\n  .bento-item:hover .pill { border-color: rgba(5,150,105,0.3); color: var(--accent-color); background: rgba(5,150,105,0.05); }\r\n\r\n  \/* =========================================\r\n     4. \u5340\u584a\u4e09\uff1a\u6703\u54e1\u67b6\u69cb\u8207\u7b49\u7d1a (Tier Cards)\r\n     ========================================= *\/\r\n  .tier-section { text-align: center; }\r\n  .tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; text-align: left; align-items: stretch; }\r\n\r\n  .tier-card {\r\n    background: #ffffff; border: 1px solid var(--border-color); border-radius: 24px;\r\n    padding: 50px 30px; display: flex; flex-direction: column;\r\n    transition: all 0.5s var(--ease-spring); position: relative;\r\n  }\r\n  \r\n  .tier-card.volunteer { background: linear-gradient(180deg, #ffffff 0%, rgba(5,150,105,0.03) 100%); border-color: rgba(5,150,105,0.2); }\r\n  \r\n  \/* Level 3: \u5f71\u97ff\u529b\u6703\u54e1 (\u58a8\u7da0\u5c0a\u69ae\u5361) *\/\r\n  .tier-card.impact { \r\n    background: linear-gradient(135deg, var(--dark-green-start) 0%, var(--dark-green-end) 100%); \r\n    color: #ffffff; border-color: #065f46; \r\n    transform: scale(1.05); z-index: 2; box-shadow: 0 20px 40px rgba(2, 44, 34, 0.25); \r\n  }\r\n  \r\n  \/* \u4f01\u696d\u6703\u54e1 (\u5168\u5bec\u6a6b\u5e45) *\/\r\n  .tier-card.corporate {\r\n    grid-column: span 3; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 40px;\r\n    background: #f8fafc; border: 1px dashed var(--accent-color); padding: 40px 60px;\r\n  }\r\n\r\n  .tier-card:hover { transform: translateY(-10px); border-color: var(--accent-color); box-shadow: 0 20px 40px var(--accent-glow); }\r\n  .tier-card.impact:hover { transform: scale(1.05) translateY(-10px); border-color: #10b981; box-shadow: 0 30px 60px rgba(5,150,105,0.4); }\r\n  .tier-card.corporate:hover { transform: translateY(-5px); background: #ffffff; border-style: solid; }\r\n\r\n  .tier-level { font-family: monospace; font-size: 0.9rem; font-weight: 800; color: var(--accent-color); letter-spacing: 0.1em; margin-bottom: 8px; }\r\n  .tier-name { font-size: 2rem; font-weight: 900; margin-bottom: 24px; }\r\n  .tier-card.impact .tier-name { color: #ffffff; }\r\n\r\n  .tier-block { margin-bottom: 30px; }\r\n  .tier-block-title { font-size: 0.9rem; font-weight: 800; color: var(--text-light); letter-spacing: 0.1em; margin-bottom: 12px; text-transform: uppercase; }\r\n  .tier-card.impact .tier-block-title { color: #34d399; }\r\n  \r\n  .tier-list { list-style: none; padding: 0; margin: 0; }\r\n  .tier-list li { position: relative; padding-left: 24px; margin-bottom: 12px; font-size: 1.05rem; font-weight: 600; color: var(--text-sub); line-height: 1.5; }\r\n  .tier-card.impact .tier-list li { color: #d1fae5; }\r\n  \r\n  .tier-list li::before {\r\n    content: ''; position: absolute; left: 0; top: 5px; width: 14px; height: 14px;\r\n    background-image: url('data:image\/svg+xml;utf8,<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%23059669\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>');\r\n    background-size: contain; background-repeat: no-repeat;\r\n  }\r\n  .tier-card.impact .tier-list li::before {\r\n    background-image: url('data:image\/svg+xml;utf8,<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"%2334d399\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><polyline points=\"20 6 9 17 4 12\"><\/polyline><\/svg>');\r\n  }\r\n\r\n  \/* =========================================\r\n     5. \u5340\u584a\u56db\uff1a\u5584\u9ede\u6578\u8207\u6642\u9593\u9280\u884c\r\n     ========================================= *\/\r\n  .points-box {\r\n    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);\r\n    border: 1px solid var(--border-color); border-radius: 32px;\r\n    padding: 80px 60px; display: flex; align-items: center; gap: 60px;\r\n    margin-top: 100px; transition: all 0.5s var(--ease-spring);\r\n  }\r\n  .points-box:hover { border-color: rgba(5,150,105,0.3); box-shadow: 0 30px 60px var(--accent-glow); }\r\n  \r\n  .points-info { flex: 1; }\r\n  .points-info h3 { font-size: 2.5rem; font-weight: 900; margin-bottom: 24px; }\r\n  .points-info p { font-size: 1.2rem; color: var(--text-sub); line-height: 1.8; margin-bottom: 24px; }\r\n  \r\n  \/* \u6642\u9593\u9280\u884c\u6a19\u7c64 *\/\r\n  .time-bank-tag {\r\n    display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px;\r\n    background: rgba(5,150,105,0.08); border-left: 4px solid var(--accent-color); border-radius: 8px;\r\n    font-size: 1.2rem; font-weight: 800; color: var(--accent-color);\r\n  }\r\n\r\n  .points-ways { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }\r\n  .way-item {\r\n    background: #ffffff; padding: 20px; border-radius: 16px; border: 1px solid var(--border-color);\r\n    font-weight: 700; color: var(--text-main); display: flex; align-items: center; gap: 12px;\r\n    transition: transform 0.3s ease, border-color 0.3s ease;\r\n  }\r\n  .way-item:hover { transform: translateX(10px); border-color: var(--accent-color); color: var(--accent-color); }\r\n  \r\n  \/* =========================================\r\n     6. \u6703\u54e1\u7cfb\u7d71\u67b6\u69cb (Dashboard Features)\r\n     ========================================= *\/\r\n  .dashboard-section { text-align: center; margin-top: 60px; padding-bottom: 0;}\r\n  .dashboard-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 900px; margin: 0 auto; }\r\n  .dash-pill {\r\n    padding: 16px 32px; background: #ffffff; border: 1px solid var(--border-color);\r\n    border-radius: 100px; font-size: 1.15rem; font-weight: 700; color: var(--text-main);\r\n    box-shadow: 0 5px 15px rgba(0,0,0,0.02); transition: all 0.4s var(--ease-spring);\r\n  }\r\n  .dash-pill:hover { transform: translateY(-5px); border-color: var(--accent-color); color: var(--accent-color); box-shadow: 0 15px 30px var(--accent-glow); }\r\n\r\n  \/* =========================================\r\n     7. CTA \u8207\u7121\u6846\u7dda\u61f8\u6d6e\u8868\u55ae (Forest Green Glassmorphism)\r\n     ========================================= *\/\r\n  .form-section { \r\n    padding: 150px 5vw; margin-top: 100px;\r\n    background: linear-gradient(135deg, var(--dark-green-end) 0%, var(--dark-green-start) 100%); \r\n    color: #ffffff; text-align: center; \r\n  }\r\n  \r\n  .form-wrapper {\r\n    max-width: 800px; margin: 60px auto 0 auto; \r\n    background: rgba(255, 255, 255, 0.06);\r\n    border: 1px solid rgba(255,255,255,0.15); border-radius: 32px; padding: 60px;\r\n    text-align: left; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n    box-shadow: 0 30px 60px rgba(0,0,0,0.2);\r\n  }\r\n\r\n  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }\r\n  .form-group { display: flex; flex-direction: column; }\r\n  .form-label { font-size: 0.95rem; font-weight: 700; color: #a7f3d0; margin-bottom: 8px; letter-spacing: 0.05em; }\r\n  \r\n  .form-input {\r\n    background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.3);\r\n    padding: 12px 0; font-size: 1.25rem; color: #ffffff; font-family: inherit;\r\n    transition: all 0.4s var(--ease-smooth); outline: none;\r\n  }\r\n  .form-input:focus { border-bottom-color: #34d399; }\r\n  .form-input::placeholder { color: rgba(255,255,255,0.3); font-size: 1.1rem;}\r\n\r\n  .radio-group-title { margin-bottom: 16px; font-size: 1rem; font-weight: 700; color: #d1fae5; }\r\n  .radio-options { display: flex; gap: 16px; margin-bottom: 40px; }\r\n  \r\n  .radio-label {\r\n    position: relative; padding: 16px 32px; border: 1px solid rgba(255,255,255,0.2);\r\n    border-radius: 100px; font-size: 1rem; font-weight: 600; color: #d1fae5;\r\n    cursor: pointer; transition: all 0.3s ease; flex: 1; text-align: center;\r\n  }\r\n  .radio-input { display: none; }\r\n  .radio-input:checked + .radio-label {\r\n    background: #34d399; border-color: #34d399; color: #064e3b;\r\n    box-shadow: 0 10px 20px rgba(52, 211, 153, 0.2); font-weight: 800;\r\n  }\r\n\r\n  .btn-submit {\r\n    display: inline-flex; align-items: center; justify-content: center; width: 100%;\r\n    padding: 24px; font-size: 1.25rem; font-weight: 800; color: #064e3b;\r\n    background: #ffffff; border-radius: 100px; position: relative; overflow: hidden;\r\n    transition: all 0.4s var(--ease-spring); border: none; cursor: pointer; outline: none; margin-top: 20px;\r\n  }\r\n  .btn-submit::after {\r\n    content: ''; position: absolute; inset: 0; background: #34d399;\r\n    transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--ease-smooth); z-index: 0;\r\n  }\r\n  .btn-submit span { position: relative; z-index: 1; transition: transform 0.4s var(--ease-spring); }\r\n  \r\n  .btn-submit:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(52, 211, 153, 0.3); color: #022c22; }\r\n  .btn-submit:hover::after { transform: scaleY(1); }\r\n  .btn-submit:hover span { transform: scale(1.05); }\r\n\r\n  \/* =========================================\r\n     8. RWD \u97ff\u61c9\u5f0f\u4f48\u5c40\r\n     ========================================= *\/\r\n  @media (max-width: 992px) {\r\n    .section-pad { padding: 80px 5vw; text-align: center; }\r\n    .hero-section { padding-top: 100px; }\r\n    .core-grid { grid-template-columns: 1fr; }\r\n    .bento-grid { grid-template-columns: 1fr; }\r\n    .tier-grid { grid-template-columns: 1fr; }\r\n    \r\n    .tier-card.corporate { grid-column: span 1; flex-direction: column; text-align: center; gap: 24px; padding: 40px 30px; }\r\n    .tier-card.impact { transform: none; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }\r\n    .tier-card.impact:hover { transform: translateY(-10px); }\r\n    \r\n    .points-box { flex-direction: column; padding: 50px 30px; gap: 40px; text-align: left; }\r\n    \r\n    .form-wrapper { padding: 40px 24px; }\r\n    .form-row { grid-template-columns: 1fr; gap: 30px; margin-bottom: 30px; }\r\n    .radio-options { flex-direction: column; gap: 12px; }\r\n  }\r\n  @media (max-width: 480px) {\r\n    .points-ways { grid-template-columns: 1fr; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"membership-pro-wrapper\">\r\n\r\n  <section class=\"section-pad hero-section\"id=\"membership\">\r\n    <div class=\"badge-tag fade-up-pro\">MEMBERSHIP<\/div>\r\n    <h1 class=\"title-h2 fade-up-pro\" style=\"font-size: clamp(3rem, 6vw, 4.5rem);\">\u52a0\u5165\u5584\u5faa\u74b0\u6703\u54e1<br>\u4e00\u8d77\u8b93\u5584\u610f\u6d41\u52d5\u8d77\u4f86<\/h1>\r\n    <p class=\"desc-large fade-up-pro\" style=\"margin-bottom: 40px;\">\r\n      \u9019\u4e0d\u662f\u4e00\u500b\u666e\u901a\u7684\u6703\u54e1\u5236\u5ea6 \u800c\u662f\u4e00\u500b\u8a18\u9304\u5584\u610f \u7d2f\u7a4d\u5f71\u97ff\u529b\u7684\u7cfb\u7d71<br>\r\n      \u900f\u904e\u6642\u9593 \u884c\u52d5\u8207\u5206\u4eab \u8b93\u6bcf\u4e00\u4efd\u5584\u610f\u90fd\u88ab\u770b\u898b \u88ab\u653e\u5927\r\n    <\/p>\r\n\r\n    <div class=\"core-grid\">\r\n      <div class=\"core-card fade-up-pro\">\r\n        <div class=\"core-num\">01<\/div>\r\n        <div class=\"core-title\">\u4efb\u4f55\u4eba\u90fd\u53ef\u4ee5\u52a0\u5165<\/div>\r\n        <div class=\"core-desc\">\u964d\u4f4e\u53c3\u8207\u9580\u6abb \u8b93\u5584\u610f\u5feb\u901f\u64f4\u6563 \u8b93\u6bcf\u500b\u4eba\u90fd\u6709\u6539\u8b8a\u793e\u6703\u7684\u529b\u91cf<\/div>\r\n      <\/div>\r\n      <div class=\"core-card fade-up-pro\" style=\"transition-delay: 0.1s;\">\r\n        <div class=\"core-num\">02<\/div>\r\n        <div class=\"core-title\">\u7528\u884c\u52d5\u7d2f\u7a4d\u5f71\u97ff\u529b<\/div>\r\n        <div class=\"core-desc\">\u6bcf\u4e00\u6b21\u7684\u5fd7\u5de5 \u516c\u76ca\u8207\u5206\u4eab \u90fd\u6703\u8f49\u5316\u70ba\u5be6\u8cea\u7684\u5584\u5faa\u74b0\u9ede\u6578<\/div>\r\n      <\/div>\r\n      <div class=\"core-card fade-up-pro\" style=\"transition-delay: 0.2s;\">\r\n        <div class=\"core-num\">03<\/div>\r\n        <div class=\"core-title\">\u50f9\u503c\u5728\u65bc\u53c3\u8207\u8ca2\u737b<\/div>\r\n        <div class=\"core-desc\">\u5efa\u7acb\u5584\u5faa\u74b0\u7cfb\u7d71 \u6703\u54e1\u7684\u771f\u6b63\u50f9\u503c\u4e0d\u662f\u4ed8\u8cbb \u800c\u662f\u771f\u5be6\u7684\u793e\u6703\u53c3\u8207<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad\" style=\"padding-top: 0;\">\r\n    <div class=\"badge-tag fade-up-pro\">MEMBER BENEFITS<\/div>\r\n    <h2 class=\"title-h2 fade-up-pro\">\u6240\u6709\u6703\u54e1\u53ef\u4eab\u6709<\/h2>\r\n\r\n    <div class=\"bento-grid\">\r\n      <div class=\"bento-item fade-up-pro\">\r\n        <div class=\"bento-num\">01<\/div>\r\n        <h3 class=\"bento-title\">\u53c3\u8207\u516c\u76ca\u6d3b\u52d5<\/h3>\r\n        <p class=\"bento-desc\">\u53c3\u8207\u5354\u6703\u8209\u8fa6\u7684\u5fd7\u5de5\u670d\u52d9 \u516c\u76ca\u6d3b\u52d5\u6216\u793e\u5340\u670d\u52d9 \u5be6\u8e10\u793e\u6703\u8cac\u4efb<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"bento-item fade-up-pro\" style=\"transition-delay: 0.1s;\">\r\n        <div class=\"bento-num\">02<\/div>\r\n        <h3 class=\"bento-title\">\u7d2f\u7a4d\u5584\u5faa\u74b0\u9ede\u6578<\/h3>\r\n        <p class=\"bento-desc\">\u900f\u904e\u5fd7\u5de5\u670d\u52d9 \u6350\u8d08 \u5206\u4eab\u77e5\u8b58\u7b49\u884c\u52d5 \u7372\u5f97\u53ef\u91cf\u5316\u7684\u5c08\u5c6c\u9ede\u6578<\/p>\r\n      <\/div>\r\n\r\n      <div class=\"bento-item fade-up-pro\">\r\n        <div class=\"bento-num\">03<\/div>\r\n        <h3 class=\"bento-title\">\u514c\u63db\u516c\u76ca\u8cc7\u6e90<\/h3>\r\n        <p class=\"bento-desc\">\u60a8\u6240\u7d2f\u7a4d\u7684\u9ede\u6578\u5c07\u80fd\u5be6\u8cea\u8f49\u5316\u70ba\u4ee5\u4e0b\u8cc7\u6e90<\/p>\r\n        <div class=\"pill-cloud\">\r\n          <div class=\"pill\">\u516c\u76ca\u8ab2\u7a0b<\/div><div class=\"pill\">\u793e\u7fa4\u6d3b\u52d5<\/div>\r\n          <div class=\"pill\">\u5408\u4f5c\u5925\u4f34\u512a\u60e0<\/div><div class=\"pill\">\u516c\u76ca\u5546\u54c1<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"bento-item fade-up-pro\" style=\"transition-delay: 0.1s;\">\r\n        <div class=\"bento-num\">04<\/div>\r\n        <h3 class=\"bento-title\">\u5efa\u7acb\u500b\u4eba\u5f71\u97ff\u529b<\/h3>\r\n        <p class=\"bento-desc\">\u6bcf\u4f4d\u6703\u54e1\u90fd\u6703\u64c1\u6709\u5c08\u5c6c\u7684 \u5584\u5faa\u74b0\u7d00\u9304 \u5b8c\u6574\u5c55\u73fe\u60a8\u7684\u793e\u6703\u8ca2\u737b\u8db3\u8de1<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad tier-section\">\r\n    <div class=\"badge-tag fade-up-pro\">TIER ARCHITECTURE<\/div>\r\n    <h2 class=\"title-h2 fade-up-pro\">\u500b\u4eba\u6703\u54e1\u5347\u7d1a\u9ad4\u7cfb<\/h2>\r\n    <p class=\"desc-large fade-up-pro\" style=\"margin: 0 auto 40px auto;\">\u6703\u54e1\u4f9d \u53c3\u8207\u5ea6\u8207\u9ede\u6578 \u6301\u7e8c\u5347\u7d1a \u6253\u9020\u60a8\u7684\u5c08\u5c6c\u5f71\u97ff\u529b\u8def\u5f91<\/p>\r\n\r\n    <div class=\"tier-grid\">\r\n      \r\n      <div class=\"tier-card fade-up-pro\">\r\n        <div class=\"tier-level\">LEVEL 1<\/div>\r\n        <h3 class=\"tier-name\">\u5584\u5faa\u74b0\u6703\u54e1<\/h3>\r\n        <p style=\"color: var(--text-sub); margin-bottom: 30px;\">\u4e00\u822c\u53c3\u8207\u8005 \u4efb\u4f55\u4eba\u7686\u53ef\u514d\u8cbb\u52a0\u5165<\/p>\r\n        \r\n        <div class=\"tier-block\" style=\"margin-top: auto;\">\r\n          <div class=\"tier-block-title\">\u53ef\u53c3\u8207\u9805\u76ee<\/div>\r\n          <ul class=\"tier-list\">\r\n            <li>\u516c\u76ca\u6d3b\u52d5<\/li>\r\n            <li>\u5fd7\u5de5\u670d\u52d9<\/li>\r\n            <li>\u516c\u76ca\u793e\u7fa4<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"tier-card volunteer fade-up-pro\" style=\"transition-delay: 0.1s;\">\r\n        <div class=\"tier-level\">LEVEL 2<\/div>\r\n        <h3 class=\"tier-name\">\u5584\u5faa\u74b0\u5fd7\u5de5<\/h3>\r\n        \r\n        <div class=\"tier-block\">\r\n          <div class=\"tier-block-title\">\u5347\u7d1a\u689d\u4ef6<\/div>\r\n          <p style=\"color: var(--text-main); font-weight: 700;\">\u5b8c\u6210 20 \u5c0f\u6642 \u5fd7\u5de5\u670d\u52d9<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"tier-block\" style=\"margin-top: auto;\">\r\n          <div class=\"tier-block-title\">\u5347\u7d1a\u6b0a\u76ca<\/div>\r\n          <ul class=\"tier-list\">\r\n            <li>\u6838\u767c\u5fd7\u5de5\u8b49\u66f8<\/li>\r\n            <li>\u53c3\u8207\u5fd7\u5de5\u57f9\u8a13\u8ab2\u7a0b<\/li>\r\n            <li>\u53d7\u9080\u5c08\u5c6c\u5fd7\u5de5\u6d3b\u52d5<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"tier-card impact fade-up-pro\" style=\"transition-delay: 0.2s;\">\r\n        <div class=\"tier-level\" style=\"color: #34d399;\">LEVEL 3<\/div>\r\n        <h3 class=\"tier-name\">\u5584\u5faa\u74b0\u63a8\u52d5\u8005<\/h3>\r\n        \r\n        <div class=\"tier-block\">\r\n          <div class=\"tier-block-title\" style=\"color: #34d399;\">\u5347\u7d1a\u689d\u4ef6<\/div>\r\n          <p style=\"color: #ffffff; font-weight: 600;\">\u5fd7\u5de5\u9054 100 \u5c0f\u6642 \u6216 \u9577\u671f\u516c\u76ca\u5c08\u6848\u53c3\u8207<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"tier-block\" style=\"margin-top: auto;\">\r\n          <div class=\"tier-block-title\" style=\"color: #34d399;\">\u6838\u5fc3\u63a8\u52d5\u8005\u6b0a\u76ca<\/div>\r\n          <ul class=\"tier-list\">\r\n            <li>\u6df1\u5ea6\u516c\u76ca\u5c08\u6848\u53c3\u8207<\/li>\r\n            <li>\u6838\u767c\u5f71\u97ff\u529b\u8b49\u66f8<\/li>\r\n            <li>\u5e74\u5ea6\u5f71\u97ff\u529b\u5927\u6703\u8868\u63da<\/li>\r\n          <\/ul>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"tier-card corporate fade-up-pro\">\r\n        <div style=\"flex: 1; text-align: left;\">\r\n          <div class=\"tier-level\">CORPORATE<\/div>\r\n          <h3 class=\"tier-name\" style=\"margin-bottom: 12px;\">\u4f01\u696d\u6703\u54e1<\/h3>\r\n          <p style=\"color: var(--text-sub); font-size: 1.1rem; line-height: 1.6;\">\u5c08\u70ba CSR \u5408\u4f5c\u6253\u9020 \u8b93\u4f01\u696d\u53c3\u8207\u516c\u76ca\u4e0d\u53ea\u662f\u4e00\u6b21\u6027\u7684\u6350\u52a9 \u800c\u662f\u5efa\u7acb\u9577\u671f\u7684\u793e\u6703\u5f71\u97ff\u529b\u5408\u4f5c<\/p>\r\n        <\/div>\r\n        \r\n        <div style=\"flex: 1; display: flex; gap: 40px;\">\r\n          <div>\r\n            <div class=\"tier-block-title\">\u4f01\u696d\u53ef\u53c3\u8207<\/div>\r\n            <ul class=\"tier-list\">\r\n              <li>\u4f01\u696d\u5fd7\u5de5 \/ \u793e\u6703\u6d3b\u52d5<\/li>\r\n              <li>\u516c\u76ca\u8d0a\u52a9 \/ \u5c08\u6848\u5408\u4f5c<\/li>\r\n            <\/ul>\r\n          <\/div>\r\n          <div>\r\n            <div class=\"tier-block-title\">\u4f01\u696d\u5c08\u5c6c\u6b0a\u76ca<\/div>\r\n            <ul class=\"tier-list\">\r\n              <li>\u4f01\u696d CSR \u54c1\u724c\u66dd\u5149<\/li>\r\n              <li>\u7372\u5f97\u5e74\u5ea6\u5f71\u97ff\u529b\u5831\u544a<\/li>\r\n            <\/ul>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad\" style=\"padding-top: 0;\">\r\n    <div class=\"points-box fade-up-pro\">\r\n      \r\n      <div class=\"points-info\">\r\n        <h3>\u5584\u5faa\u74b0\u9ede\u6578\u5236\u5ea6<\/h3>\r\n        <p>\u9ede\u6578\u4ee3\u8868\u7684\u4e0d\u53ea\u662f\u55ae\u7d14\u7684\u6578\u5b57 \u800c\u662f\u6bcf\u4e00\u4efd\u5584\u610f\u88ab\u5be6\u8e10\u7684\u771f\u5be6\u7d00\u9304<\/p>\r\n        \r\n        <div class=\"time-bank-tag\">\r\n          <span style=\"font-size: 1.5rem;\">\u23f3<\/span> \r\n          <span>\u5c0e\u5165\u6642\u9593\u9280\u884c\u6a5f\u5236\uff1a1 \u5c0f\u6642\u5fd7\u5de5 = \u5584\u5faa\u74b0\u9ede\u6578<\/span>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"points-ways\">\r\n        <div class=\"way-item\"><span>\ud83d\ude4c<\/span>\u5fd7\u5de5\u670d\u52d9<\/div>\r\n        <div class=\"way-item\"><span>\ud83d\udc9d<\/span>\u516c\u76ca\u6350\u8d08<\/div>\r\n        <div class=\"way-item\"><span>\ud83d\udcda<\/span>\u53c3\u8207\u8ab2\u7a0b<\/div>\r\n        <div class=\"way-item\"><span>\ud83d\udce2<\/span>\u5206\u4eab\u77e5\u8b58<\/div>\r\n        <div class=\"way-item\" style=\"grid-column: span 2; justify-content: center;\"><span>\ud83e\udd1d<\/span>\u63a8\u85a6\u670b\u53cb\u52a0\u5165<\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad dashboard-section\">\r\n    <div class=\"badge-tag fade-up-pro\">DIGITAL DASHBOARD<\/div>\r\n    <h2 class=\"title-h2 fade-up-pro\">\u5b8c\u5584\u7684\u6703\u54e1\u7cfb\u7d71\u67b6\u69cb<\/h2>\r\n    <p class=\"desc-large fade-up-pro\" style=\"margin: 0 auto 40px auto;\">\u60a8\u7684\u5c08\u5c6c\u6703\u54e1\u4e2d\u5fc3 \u5c07\u900f\u660e \u5b8c\u6574\u5730\u8a18\u9304\u60a8\u7684\u793e\u6703\u8ca2\u737b<\/p>\r\n    \r\n    <div class=\"dashboard-pills fade-up-pro\">\r\n      <div class=\"dash-pill\">\ud83d\udc64 \u500b\u4eba\u8cc7\u6599\u7ba1\u7406<\/div>\r\n      <div class=\"dash-pill\">\u23f1\ufe0f \u5fd7\u5de5\u6642\u6578\u8ffd\u8e64<\/div>\r\n      <div class=\"dash-pill\">\ud83d\udc8e \u5584\u5faa\u74b0\u9ede\u6578\u9322\u5305<\/div>\r\n      <div class=\"dash-pill\">\ud83d\udcc5 \u516c\u76ca\u6d3b\u52d5\u7d00\u9304<\/div>\r\n      <div class=\"dash-pill\">\ud83d\udcc8 \u793e\u6703\u5f71\u97ff\u529b\u5831\u544a<\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"form-section\">\r\n    <div class=\"badge-tag fade-up-pro\" style=\"border-color: rgba(255,255,255,0.2); color: #a7f3d0; background: rgba(255,255,255,0.1);\">JOIN US<\/div>\r\n    <h2 class=\"title-h2 fade-up-pro\" style=\"color: #ffffff; margin-bottom: 16px;\">\u7acb\u5373\u52a0\u5165\u5584\u5faa\u74b0\u6703\u54e1<\/h2>\r\n    <p class=\"desc-large fade-up-pro\" style=\"color: #d1fae5; margin: 0 auto;\">\u8acb\u586b\u5beb\u4e0b\u65b9\u8cc7\u6599 \u6211\u5011\u7684\u5c08\u54e1\u5c07\u76e1\u5feb\u70ba\u60a8\u958b\u901a\u5c08\u5c6c\u6b0a\u76ca<\/p>\r\n\r\n    <div class=\"form-wrapper fade-up-pro\" style=\"transition-delay: 0.2s;\">\r\n      \r\n      <form action=\"https:\/\/formsubmit.co\/rexlin323@gmail.com\" method=\"POST\">\r\n        \r\n        <input type=\"hidden\" name=\"_subject\" value=\"\u5584\u5faa\u74b0\u7db2\u7ad9\u806f\u7e6b\u6211\u5011-\u65b0\u6703\u54e1\u7533\u8acb\">\r\n        <input type=\"hidden\" name=\"_captcha\" value=\"false\">\r\n        <input type=\"hidden\" name=\"_template\" value=\"table\">\r\n\r\n        <div class=\"form-row\">\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">\u59d3\u540d \/ NAME<\/label>\r\n            <input type=\"text\" name=\"\u59d3\u540d\" class=\"form-input\" placeholder=\"\u8acb\u8f38\u5165\u771f\u5be6\u59d3\u540d\" required>\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">\u624b\u6a5f \/ PHONE<\/label>\r\n            <input type=\"tel\" name=\"\u624b\u6a5f\" class=\"form-input\" placeholder=\"\u8acb\u8f38\u5165\u806f\u7d61\u96fb\u8a71\" required>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"form-row\">\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">\u96fb\u5b50\u4fe1\u7bb1 \/ EMAIL<\/label>\r\n            <input type=\"email\" name=\"Email\" class=\"form-input\" placeholder=\"your@email.com\" required>\r\n          <\/div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">\u6240\u5728\u5730 \/ LOCATION<\/label>\r\n            <input type=\"text\" name=\"\u6240\u5728\u5730\" class=\"form-input\" placeholder=\"\u8acb\u8f38\u5165\u5c45\u4f4f\u7e23\u5e02\" required>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"radio-group-title\">\u662f\u5426\u9858\u610f\u53c3\u8207\u5fd7\u5de5\u670d\u52d9\uff1f<\/div>\r\n        <div class=\"radio-options\">\r\n          <input type=\"radio\" id=\"vol-yes\" name=\"\u662f\u5426\u9858\u610f\u53c3\u8207\u5fd7\u5de5\" value=\"\u975e\u5e38\u9858\u610f\" class=\"radio-input\" checked>\r\n          <label for=\"vol-yes\" class=\"radio-label\">\u975e\u5e38\u9858\u610f<\/label>\r\n          \r\n          <input type=\"radio\" id=\"vol-no\" name=\"\u662f\u5426\u9858\u610f\u53c3\u8207\u5fd7\u5de5\" value=\"\u66ab\u6642\u4e0d\u8003\u616e\" class=\"radio-input\">\r\n          <label for=\"vol-no\" class=\"radio-label\">\u66ab\u6642\u4e0d\u8003\u616e<\/label>\r\n        <\/div>\r\n\r\n        <div class=\"radio-group-title\">\u662f\u5426\u9858\u610f\u53c3\u8207\u516c\u76ca\u6d3b\u52d5\uff1f<\/div>\r\n        <div class=\"radio-options\">\r\n          <input type=\"radio\" id=\"event-yes\" name=\"\u662f\u5426\u9858\u610f\u53c3\u8207\u516c\u76ca\u6d3b\u52d5\" value=\"\u975e\u5e38\u9858\u610f\" class=\"radio-input\" checked>\r\n          <label for=\"event-yes\" class=\"radio-label\">\u975e\u5e38\u9858\u610f<\/label>\r\n          \r\n          <input type=\"radio\" id=\"event-no\" name=\"\u662f\u5426\u9858\u610f\u53c3\u8207\u516c\u76ca\u6d3b\u52d5\" value=\"\u66ab\u6642\u4e0d\u8003\u616e\" class=\"radio-input\">\r\n          <label for=\"event-no\" class=\"radio-label\">\u66ab\u6642\u4e0d\u8003\u616e<\/label>\r\n        <\/div>\r\n\r\n        <button type=\"submit\" class=\"btn-submit\">\r\n          <span>\u9001\u51fa\u7533\u8acb<\/span>\r\n        <\/button>\r\n\r\n      <\/form>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    function initMembershipInteractions() {\r\n      const wrapper = document.getElementById('membership-pro-wrapper');\r\n      if (!wrapper) return;\r\n      \r\n      const isEditor = document.body.classList.contains('elementor-editor-active');\r\n      const reveals = wrapper.querySelectorAll('.fade-up-pro');\r\n\r\n      if (isEditor) {\r\n        reveals.forEach(el => el.classList.add('is-visible'));\r\n        return;\r\n      }\r\n\r\n      if ('IntersectionObserver' in window) {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n          entries.forEach((entry, index) => {\r\n            if (entry.isIntersecting) {\r\n              setTimeout(() => {\r\n                entry.target.classList.add('is-visible');\r\n              }, index * 50);\r\n              obs.unobserve(entry.target);\r\n            }\r\n          });\r\n        }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\r\n        \r\n        reveals.forEach(el => observer.observe(el));\r\n      } else {\r\n        reveals.forEach(el => el.classList.add('is-visible'));\r\n      }\r\n    }\r\n\r\n    initMembershipInteractions();\r\n    \r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initMembershipInteractions);\r\n    }\r\n  })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d9438a8 e-flex e-con-boxed e-con e-parent\" data-id=\"d9438a8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea09cb4 elementor-widget elementor-widget-html\" data-id=\"ea09cb4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n<style>\r\n  #impact-report-section {\r\n    --bg-color: #ffffff;\r\n    --text-primary: #022c22; \/* \u6df1\u68ee\u6797\u7da0 *\/\r\n    --text-secondary: #4b5563;\r\n    --accent-color: #059669;\r\n    --accent-light: #ecfdf5;\r\n    --border-color: rgba(5, 150, 105, 0.1);\r\n    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n    \r\n    font-family: 'Noto Sans TC', sans-serif;\r\n    color: var(--text-primary);\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .aww-reveal { opacity: 0; transform: translateY(30px); transition: all 1s var(--ease-smooth); }\r\n  .aww-reveal.is-visible { opacity: 1; transform: translateY(0); }\r\n\r\n  .section-pad { padding: 120px 5vw; max-width: 1300px; margin: 0 auto; text-align: center; }\r\n  .section-badge { display: inline-block; padding: 6px 20px; border-radius: 100px; background: var(--accent-light); color: var(--accent-color); font-weight: 800; font-size: 0.8rem; margin-bottom: 24px; letter-spacing: 0.1em; }\r\n  .title-main { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 900; margin-bottom: 20px; }\r\n  .desc-sub { font-size: 1.2rem; color: var(--text-secondary); margin-bottom: 60px; }\r\n\r\n  \/* \u5e74\u5ea6\u6578\u64da *\/\r\n  .data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; }\r\n  .data-card { padding: 50px 30px; background: #fff; border: 1px solid var(--border-color); border-radius: 24px; transition: 0.4s; }\r\n  .data-card:hover { border-color: var(--accent-color); box-shadow: 0 20px 40px rgba(5,150,105,0.05); }\r\n  .data-val { font-size: 3.5rem; font-weight: 900; color: var(--accent-color); font-family: monospace; display: block; }\r\n  .data-lbl { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); }\r\n\r\n  \/* \u5c08\u6848\u6210\u679c Bento *\/\r\n  .project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }\r\n  .project-box { padding: 40px; background: #f9fafb; border-radius: 24px; border: 1px solid transparent; transition: 0.4s; }\r\n  .project-box:hover { background: #fff; border-color: var(--accent-color); }\r\n  .p-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }\r\n  .p-results { display: flex; gap: 30px; margin-top: 20px; }\r\n  .r-item span { display: block; font-size: 1.8rem; font-weight: 800; color: var(--accent-color); }\r\n  .r-item label { font-size: 0.9rem; color: var(--text-secondary); font-weight: 600; }\r\n\r\n  \/* \u6545\u4e8b\u8207\u8ca1\u52d9 *\/\r\n  .extra-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 24px; margin-top: 24px; }\r\n  .story-card { padding: 50px; background: var(--text-primary); color: #fff; border-radius: 24px; position: relative; overflow: hidden; text-align: left; }\r\n  .story-card::before { content: '\"'; position: absolute; top: -20px; left: 10px; font-size: 12rem; color: rgba(255,255,255,0.05); font-family: serif; }\r\n  .story-text { font-size: 1.6rem; font-weight: 700; font-style: italic; margin-bottom: 20px; position: relative; }\r\n  .story-author { color: var(--accent-color); font-weight: 800; }\r\n\r\n  .finance-card { padding: 40px; background: #fff; border: 1px solid var(--border-color); border-radius: 24px; display: flex; align-items: center; gap: 30px; text-align: left; }\r\n  .chart-circle { width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(#059669 0% 40%, #10b981 40% 70%, #6ee7b7 70% 90%, #d1fae5 90% 100%); }\r\n  .legend-list { font-size: 0.95rem; font-weight: 700; display: flex; flex-direction: column; gap: 8px; }\r\n\r\n  \/* \u6700\u65b0\u6d88\u606f\u5217\u8868 *\/\r\n  .news-list { margin-top: 60px; text-align: left; }\r\n  .news-row { display: flex; align-items: center; justify-content: space-between; padding: 30px 0; border-bottom: 1px solid var(--border-color); transition: 0.3s; cursor: pointer; }\r\n  .news-row:hover { padding-left: 20px; border-bottom-color: var(--accent-color); }\r\n  .news-tag { padding: 4px 12px; background: var(--accent-light); color: var(--accent-color); border-radius: 4px; font-size: 0.8rem; font-weight: 800; margin-right: 20px; }\r\n  .news-tit { font-size: 1.3rem; font-weight: 700; flex: 1; }\r\n  \r\n  .btn-download { display: inline-block; margin-top: 60px; padding: 18px 40px; background: var(--text-primary); color: #fff; border-radius: 100px; font-weight: 800; transition: 0.3s; }\r\n  .btn-download:hover { background: var(--accent-color); transform: translateY(-3px); }\r\n\r\n  @media (max-width: 992px) {\r\n    .data-grid, .project-grid, .extra-grid { grid-template-columns: 1fr; }\r\n    .finance-card { flex-direction: column; text-align: center; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"impact-report-section\">\r\n  <section class=\"section-pad\">\r\n    <div class=\"section-badge aww-reveal\">IMPACT REPORT<\/div>\r\n    <h2 class=\"title-main aww-reveal\">\u8b93\u5584\u88ab\u770b\u898b<\/h2>\r\n    <p class=\"desc-sub aww-reveal\">\u6bcf\u4e00\u4efd\u5584\u610f\uff0c\u90fd\u80fd\u5275\u9020\u6539\u8b8a\u3002<\/p>\r\n\r\n    <div class=\"data-grid aww-reveal\">\r\n      <div class=\"data-card\">\r\n        <span class=\"data-val\">12,500<\/span>\r\n        <span class=\"data-lbl\">\u5fd7\u5de5\u670d\u52d9\u6642\u6578<\/span>\r\n      <\/div>\r\n      <div class=\"data-card\">\r\n        <span class=\"data-val\">85<\/span>\r\n        <span class=\"data-lbl\">\u516c\u76ca\u6d3b\u52d5\u5834\u6b21<\/span>\r\n      <\/div>\r\n      <div class=\"data-card\">\r\n        <span class=\"data-val\">40<\/span>\r\n        <span class=\"data-lbl\">\u5408\u4f5c\u6a5f\u69cb<\/span>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"project-grid aww-reveal\">\r\n      <div class=\"project-box\">\r\n        <h3 class=\"p-title\">AI\u667a\u6167\u966a\u4f34\u8a08\u756b<\/h3>\r\n        <p>\u900f\u904eAI\u6280\u8853\u966a\u4f34\u9577\u8005\uff0c\u6e1b\u5c11\u5b64\u7368\u611f\u3002<\/p>\r\n        <div class=\"p-results\">\r\n          <div class=\"r-item\"><span>300\u4eba<\/span><label>\u670d\u52d9\u9577\u8005<\/label><\/div>\r\n          <div class=\"r-item\"><span>12\u500b<\/span><label>\u793e\u5340\u5408\u4f5c<\/label><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"project-box\">\r\n        <h3 class=\"p-title\">\u5931\u667a\u9810\u9632\u6559\u80b2<\/h3>\r\n        <p>\u63a8\u52d5\u8166\u5065\u5eb7\u8207AI\u6578\u4f4d\u5b78\u7fd2\u3002<\/p>\r\n        <div class=\"p-results\">\r\n          <div class=\"r-item\"><span>45\u5834<\/span><label>\u8ab2\u7a0b\u5834\u6b21<\/label><\/div>\r\n          <div class=\"r-item\"><span>1200\u4eba<\/span><label>\u53c3\u8207\u4eba\u6578<\/label><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"extra-grid aww-reveal\">\r\n      <div class=\"story-card\">\r\n        <p class=\"story-text\">\u300c\u7b2c\u4e00\u6b21\u5e36\u9577\u8f29\u5b78AI\uff0c\u5176\u5be6\u4ed6\u5011\u6bd4\u6211\u5011\u66f4\u52c7\u6562\u3002\u300d<\/p>\r\n        <span class=\"story-author\">\u2014 \u5fd7\u5de5\u53c3\u8207\u5fc3\u5f97<\/span>\r\n      <\/div>\r\n      <div class=\"finance-card\">\r\n        <div class=\"chart-circle\"><\/div>\r\n        <div class=\"legend-list\">\r\n          <div><span style=\"color:#059669\">\u25cf<\/span> \u6d3b\u52d5\u652f\u51fa<\/div>\r\n          <div><span style=\"color:#10b981\">\u25cf<\/span> \u6559\u80b2\u8a08\u756b<\/div>\r\n          <div><span style=\"color:#6ee7b7\">\u25cf<\/span> \u5fd7\u5de5\u57f9\u8a13<\/div>\r\n          <div><span style=\"color:#d1fae5\">\u25cf<\/span> \u5e73\u53f0\u904b\u71df<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <a href=\"#\" class=\"btn-download aww-reveal\">\u4e0b\u8f09\u5b8c\u6574\u5f71\u97ff\u529b\u5831\u544a<\/a>\r\n\r\n    <div style=\"margin-top: 150px;\">\r\n      <div class=\"section-badge aww-reveal\">LATEST NEWS<\/div>\r\n      <h2 class=\"title-main aww-reveal\">\u6700\u65b0\u6d88\u606f<\/h2>\r\n      <div class=\"news-list aww-reveal\">\r\n        <div class=\"news-row\"><span class=\"news-tag\">\u5354\u6703\u516c\u544a<\/span><span class=\"news-tit\">2026\u5e74\u5ea6\u5584\u5faa\u74b0\u5236\u5ea6\u4fee\u8a02\u516c\u544a<\/span><span>\u2192<\/span><\/div>\r\n        <div class=\"news-row\"><span class=\"news-tag\">\u6d3b\u52d5\u901a\u77e5<\/span><span class=\"news-tit\">\u6625\u5b63\u793e\u5340AI\u6578\u4f4d\u5b78\u7fd2\u62db\u52df\u4e2d<\/span><span>\u2192<\/span><\/div>\r\n        <div class=\"news-row\"><span class=\"news-tag\">\u5a92\u9ad4\u5831\u5c0e<\/span><span class=\"news-tit\">\u5584\u610f\u7d2f\u7a4d\u50f9\u503c\uff1a\u5c08\u8a2a\u672c\u5354\u6703\u5275\u7acb\u521d\u8877<\/span><span>\u2192<\/span><\/div>\r\n        <div class=\"news-row\"><span class=\"news-tag\">\u5fd7\u5de5\u7d00\u9304<\/span><span class=\"news-tit\">\u90a3\u4e00\u5929\uff0c\u6211\u5011\u5728\u793e\u5340\u8207\u9577\u8f29\u7684\u79d1\u6280\u5171\u9cf4<\/span><span>\u2192<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    const observer = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) entry.target.classList.add('is-visible');\r\n      });\r\n    }, { threshold: 0.1 });\r\n    document.querySelectorAll('.aww-reveal').forEach(el => observer.observe(el));\r\n  })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2d9e90b e-flex e-con-boxed e-con e-parent\" data-id=\"2d9e90b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a320fba elementor-widget elementor-widget-html\" data-id=\"a320fba\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* =========================================\r\n     1. \u5168\u5c40\u8b8a\u6578 & \u9ad8\u968e\u7db2\u683c\u91cd\u7f6e (\u7121\u6a19\u9ede\u8a2d\u5b9a)\r\n     ========================================= *\/\r\n  #interaction-pro-wrapper {\r\n    --color-bg: #ffffff;\r\n    --color-text-main: #0a0a0a;\r\n    --color-text-sub: #64748b;\r\n    --color-primary: #059669;\r\n    --color-border: rgba(0, 0, 0, 0.06);\r\n    --grid-line: rgba(0, 0, 0, 0.03); \r\n    \r\n    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);\r\n    \r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    color: var(--color-text-main);\r\n    background-color: transparent;\r\n    \/* \u6975\u5177\u8cea\u611f\u7684\u5e95\u5c64\u7db2\u683c\uff0c\u8c61\u5fb5\u5236\u5ea6\u8207\u900f\u660e *\/\r\n    background-image: \r\n      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    background-position: center top;\r\n    overflow-x: hidden;\r\n    margin: 0; padding: 0;\r\n  }\r\n\r\n  #interaction-pro-wrapper h2, \r\n  #interaction-pro-wrapper h3, \r\n  #interaction-pro-wrapper p { margin: 0; }\r\n\r\n  \/* \u6efe\u52d5\u6d6e\u73fe\u5171\u7528\u52d5\u756b *\/\r\n  .reveal-item {\r\n    opacity: 0; transform: translateY(40px);\r\n    transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth);\r\n  }\r\n  .reveal-item.is-visible { opacity: 1; transform: translateY(0); }\r\n\r\n  \/* =========================================\r\n     2. \u6211\u5011\u7684\u627f\u8afe (\u7121\u6a19\u9ede \u6d77\u5831\u7d1a\u6392\u7248)\r\n     ========================================= *\/\r\n  .promise-section {\r\n    padding: 150px 5vw; max-width: 1200px; margin: 0 auto;\r\n    text-align: center; display: flex; flex-direction: column; align-items: center;\r\n  }\r\n\r\n  .promise-eyebrow {\r\n    font-size: 1.1rem; color: var(--color-primary); font-weight: 900; \r\n    letter-spacing: 0.15em; margin-bottom: 24px; text-transform: uppercase;\r\n  }\r\n\r\n  .promise-title {\r\n    font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 800; line-height: 1.4;\r\n    letter-spacing: 0.02em; color: var(--color-text-main); margin-bottom: 60px;\r\n  }\r\n  .promise-title span.highlight {\r\n    color: var(--color-primary); position: relative; display: inline-block;\r\n  }\r\n  .promise-title span.highlight::after {\r\n    content: ''; position: absolute; left: 0; bottom: 5px; width: 100%; height: 3px;\r\n    background: var(--color-primary); border-radius: 2px;\r\n  }\r\n\r\n  .promise-tags {\r\n    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; max-width: 800px;\r\n  }\r\n  \r\n  .p-tag {\r\n    padding: 14px 28px; font-size: 1.1rem; font-weight: 600; color: var(--color-text-sub);\r\n    background: rgba(255,255,255,0.9); border: 1px solid var(--color-border);\r\n    border-radius: 100px; backdrop-filter: blur(8px);\r\n    display: flex; align-items: center; gap: 10px;\r\n    transition: all 0.4s var(--ease-spring); cursor: default;\r\n  }\r\n  .p-tag::before {\r\n    content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--color-border);\r\n    transition: background 0.4s ease, transform 0.4s var(--ease-spring);\r\n  }\r\n  .p-tag:hover {\r\n    color: var(--color-text-main); border-color: var(--color-primary);\r\n    transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 30px rgba(5, 150, 105, 0.08);\r\n  }\r\n  .p-tag:hover::before { background: var(--color-primary); transform: scale(1.5); }\r\n\r\n  \/* =========================================\r\n     3. \u95dc\u65bc\u6211\u5011 (\u8ef8\u7dda\u751f\u9577\u8207\u6c34\u6ce2\u7d0b\u8108\u885d)\r\n     ========================================= *\/\r\n  .about-section {\r\n    padding: 120px 5vw; max-width: 1200px; margin: 0 auto;\r\n    display: flex; gap: 8vw; position: relative;\r\n  }\r\n\r\n  .about-sticky-title {\r\n    width: 35%; position: sticky; top: 150px; height: max-content;\r\n  }\r\n  .about-sticky-title h2 {\r\n    font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; color: var(--color-text-main);\r\n  }\r\n\r\n  .about-content-wrap {\r\n    width: 65%; position: relative; padding-left: 60px;\r\n    display: flex; flex-direction: column; gap: 120px; padding-bottom: 50px;\r\n  }\r\n\r\n  \/* --- \u8ecc\u9053\u8ef8\u7dda --- *\/\r\n  .axis-track {\r\n    position: absolute; top: 10px; bottom: 0; left: 0; width: 2px;\r\n    background: rgba(0, 0, 0, 0.05); border-radius: 2px;\r\n  }\r\n  .axis-fill {\r\n    position: absolute; top: 10px; left: 0; width: 2px; background: var(--color-primary);\r\n    height: 0%; border-radius: 2px; transition: height 0.1s linear;\r\n  }\r\n\r\n  .about-block { position: relative; }\r\n  \r\n  \/* \u7bc0\u9ede *\/\r\n  .axis-node {\r\n    position: absolute; left: -67px; top: 5px; width: 16px; height: 16px;\r\n    background: var(--color-bg); border: 3px solid rgba(0, 0, 0, 0.1); border-radius: 50%;\r\n    z-index: 2; transition: all 0.5s var(--ease-spring);\r\n  }\r\n  \r\n  \/* \u6c34\u6ce2\u7d0b\u8108\u885d\u7279\u6548 *\/\r\n  .about-block.is-active .axis-node {\r\n    border-color: var(--color-primary); background: var(--color-primary);\r\n    animation: nodePulse 1.5s infinite var(--ease-smooth);\r\n  }\r\n\r\n  @keyframes nodePulse {\r\n    0% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); transform: scale(1); }\r\n    70% { box-shadow: 0 0 0 15px rgba(5, 150, 105, 0); transform: scale(1.2); }\r\n    100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); transform: scale(1); }\r\n  }\r\n\r\n  .about-block h3 {\r\n    font-size: 2rem; font-weight: 800; color: var(--color-text-main); margin-bottom: 24px;\r\n    transition: color 0.4s ease, transform 0.4s var(--ease-spring);\r\n  }\r\n  .about-block.is-active h3 { color: var(--color-primary); transform: translateX(10px); }\r\n  .about-block p { font-size: 1.15rem; line-height: 1.8; color: var(--color-text-sub); }\r\n\r\n  \/* \u7121\u6a19\u9ede\u6e05\u55ae *\/\r\n  .custom-list { list-style: none; padding: 0; margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }\r\n  .custom-list li {\r\n    font-size: 1.15rem; color: var(--color-text-main); font-weight: 600;\r\n    display: flex; align-items: center; gap: 12px; transition: transform 0.3s ease;\r\n  }\r\n  .custom-list li::before {\r\n    content: ''; display: block; width: 6px; height: 6px; background: var(--color-text-main); border-radius: 50%;\r\n    transition: background 0.3s ease;\r\n  }\r\n  .custom-list li:hover { transform: translateX(10px); color: var(--color-primary); }\r\n  .custom-list li:hover::before { background: var(--color-primary); }\r\n\r\n  \/* =========================================\r\n     4. \u7d44\u7e54\u67b6\u69cb (\u73bb\u7483\u795e\u7d93\u7db2\u8def + \u6e38\u6a19\u611f\u61c9\u767c\u5149)\r\n     ========================================= *\/\r\n  .org-section {\r\n    padding: 120px 5vw 180px 5vw; max-width: 1400px; margin: 0 auto;\r\n    display: flex; flex-direction: column; align-items: center; position: relative;\r\n  }\r\n\r\n  .org-header { text-align: center; margin-bottom: 80px; }\r\n  .org-header h2 { font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; margin-bottom: 24px; }\r\n  .org-header p { font-size: 1.15rem; color: var(--color-text-sub); max-width: 600px; margin: 0 auto; line-height: 1.8;}\r\n\r\n  \/* \u79fb\u9664\u5927\u8272\u584a\uff0c\u6539\u7528\u900f\u660e\u7db2\u683c\u5bb9\u5668 *\/\r\n  .org-grid {\r\n    width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;\r\n    position: relative; z-index: 2;\r\n  }\r\n\r\n  \/* --- \u9802\u7d1a\u4e92\u52d5\u5361\u7247\uff1a\u6e38\u6a19\u611f\u61c9\u5149\u6688 (Mouse Tracking Glow) --- *\/\r\n  .org-glass-card {\r\n    position: relative;\r\n    background: rgba(255, 255, 255, 0.6);\r\n    border-radius: 20px;\r\n    padding: 50px 30px;\r\n    text-align: center;\r\n    display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n    cursor: pointer;\r\n    overflow: hidden;\r\n    backdrop-filter: blur(12px);\r\n    -webkit-backdrop-filter: blur(12px);\r\n    \/* \u5361\u7247\u6d6e\u52d5\u52d5\u756b *\/\r\n    transition: transform 0.4s var(--ease-spring), box-shadow 0.4s ease;\r\n    \/* \u9810\u8a2d\u6975\u7d30\u908a\u6846 *\/\r\n    border: 1px solid var(--color-border);\r\n  }\r\n\r\n  \/* \u7528\u507d\u5143\u7d20\u88fd\u9020\u8ddf\u96a8\u6ed1\u9f20\u7684\u52d5\u614b\u5149\u9ede\u80cc\u666f *\/\r\n  .org-glass-card::before {\r\n    content: '';\r\n    position: absolute;\r\n    top: var(--mouse-y, 50%);\r\n    left: var(--mouse-x, 50%);\r\n    width: 250px;\r\n    height: 250px;\r\n    background: radial-gradient(circle, rgba(5, 150, 105, 0.15) 0%, transparent 70%);\r\n    transform: translate(-50%, -50%);\r\n    opacity: 0;\r\n    transition: opacity 0.3s ease;\r\n    pointer-events: none;\r\n    z-index: 0;\r\n  }\r\n\r\n  \/* \u5361\u7247 Hover \u6642\u5f48\u8d77\uff0c\u4e26\u986f\u793a\u5149\u6688 *\/\r\n  .org-glass-card:hover {\r\n    transform: translateY(-15px);\r\n    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.05);\r\n    border-color: rgba(5, 150, 105, 0.2);\r\n  }\r\n  .org-glass-card:hover::before { opacity: 1; }\r\n\r\n  \/* \u9802\u90e8\u88dd\u98fe\u5c0f\u5713\u9ede\uff0c\u8c61\u5fb5\u7db2\u8def\u7bc0\u9ede *\/\r\n  .node-dot {\r\n    width: 12px; height: 12px; border-radius: 50%; background: var(--color-border);\r\n    margin-bottom: 24px; transition: all 0.4s var(--ease-spring); position: relative; z-index: 1;\r\n  }\r\n  .org-glass-card:hover .node-dot {\r\n    background: var(--color-primary); transform: scale(1.5);\r\n    box-shadow: 0 0 15px rgba(5, 150, 105, 0.4);\r\n  }\r\n\r\n  .org-glass-card h3 { \r\n    font-size: 1.8rem; font-weight: 800; color: var(--color-text-main); margin-bottom: 12px; \r\n    transition: color 0.3s ease; position: relative; z-index: 1;\r\n  }\r\n  .org-glass-card:hover h3 { color: var(--color-primary); }\r\n  \r\n  .org-glass-card p { font-size: 1.1rem; font-weight: 500; color: var(--color-text-sub); position: relative; z-index: 1;}\r\n\r\n  \/* \u80cc\u666f\u7684\u9023\u7d50\u88dd\u98fe\u7dda (\u71df\u9020\u85cd\u5716\u611f) *\/\r\n  .org-blueprint-line {\r\n    position: absolute; top: 50%; left: 5%; right: 5%; height: 1px;\r\n    background: linear-gradient(90deg, transparent, rgba(5, 150, 105, 0.2), transparent);\r\n    z-index: 1; pointer-events: none;\r\n  }\r\n\r\n  \/* =========================================\r\n     5. RWD \u97ff\u61c9\u5f0f\u512a\u5316\r\n     ========================================= *\/\r\n  @media (max-width: 992px) {\r\n    .about-section { flex-direction: column; gap: 60px; padding: 80px 5vw; }\r\n    .about-sticky-title { width: 100%; position: relative; top: 0; }\r\n    .about-content-wrap { width: 100%; padding-left: 40px; gap: 80px; padding-bottom: 0; }\r\n    .axis-node { left: -49px; }\r\n\r\n    \/* \u7d44\u7e54\u5716\u8f49\u96d9\u6b04 *\/\r\n    .org-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n    .org-blueprint-line { display: none; }\r\n  }\r\n\r\n  @media (max-width: 768px) {\r\n    .org-grid { grid-template-columns: 1fr; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"interaction-pro-wrapper\">\r\n\r\n  <section class=\"promise-section\">\r\n    <div class=\"promise-eyebrow reveal-item\">Our Promise<\/div>\r\n    \r\n    <h2 class=\"promise-title reveal-item\" style=\"transition-delay: 0.1s;\">\r\n      \u6211\u5011\u76f8\u4fe1 \u552f\u6709<span class=\"highlight\">\u5236\u5ea6\u5316\u7684\u5584<\/span><br>\u624d\u80fd\u9577\u4e45\u6d41\u52d5\r\n    <\/h2>\r\n    \r\n    <div class=\"promise-tags reveal-item\" style=\"transition-delay: 0.2s;\">\r\n      <div class=\"p-tag\">\u5236\u5ea6\u900f\u660e<\/div>\r\n      <div class=\"p-tag\">\u6a19\u6e96\u516c\u958b<\/div>\r\n      <div class=\"p-tag\">\u5be9\u6838\u56b4\u8b39<\/div>\r\n      <div class=\"p-tag\">\u6578\u64da\u53ef\u8ffd\u6eaf<\/div>\r\n      <div class=\"p-tag\">\u4e0d\u4ee5\u71df\u5229\u70ba\u76ee\u7684<\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"about-section\">\r\n    <div class=\"about-sticky-title reveal-item\">\r\n      <h2>\u95dc\u65bc\u6211\u5011<\/h2>\r\n    <\/div>\r\n\r\n    <div class=\"about-content-wrap\" id=\"js-axis-wrap\">\r\n      <div class=\"axis-track\"><\/div>\r\n      <div class=\"axis-fill\" id=\"js-axis-line\"><\/div>\r\n\r\n      <div class=\"about-block js-axis-target reveal-item\">\r\n        <div class=\"axis-node\"><\/div>\r\n        <h3>\u5354\u6703\u6210\u7acb\u80cc\u666f<\/h3>\r\n        <p>\u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703 \u7531\u4e00\u7fa4\u95dc\u6ce8\u516c\u76ca\u5236\u5ea6\u8207\u6c38\u7e8c\u767c\u5c55\u7684\u6210\u54e1\u5171\u540c\u767c\u8d77\u6210\u7acb \u672c\u5354\u6703\u81f4\u529b\u65bc<\/p>\r\n        <ul class=\"custom-list\">\r\n          <li>\u5efa\u7acb\u5584\u884c\u7d00\u9304\u5236\u5ea6<\/li>\r\n          <li>\u5236\u5b9a\u5584\u9ede\u6578\u767c\u653e\u6a19\u6e96<\/li>\r\n          <li>\u63a8\u52d5\u4f01\u696d ESG \u5236\u5ea6\u5316<\/li>\r\n          <li>\u5efa\u7acb\u5584\u4fdd\u969c\u5408\u4f5c\u6a5f\u5236<\/li>\r\n        <\/ul>\r\n      <\/div>\r\n\r\n      <div class=\"about-block js-axis-target reveal-item\">\r\n        <div class=\"axis-node\"><\/div>\r\n        <h3>\u5354\u6703\u5b97\u65e8<\/h3>\r\n        <p>\u4ee5\u5236\u5ea6\u5316\u65b9\u5f0f\u63a8\u52d5\u516c\u76ca\u8207\u5584\u884c \u5efa\u7acb\u53ef\u8ffd\u6eaf \u53ef\u7d2f\u7a4d \u53ef\u6d41\u901a\u7684\u5584\u884c\u751f\u614b \u4fc3\u9032\u500b\u4eba \u4f01\u696d\u8207\u793e\u6703\u4e4b\u9593\u7684\u6b63\u5411\u5faa\u74b0<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"org-section\">\r\n    <div class=\"org-header reveal-item\">\r\n      <h2>\u7d44\u7e54\u67b6\u69cb\u8aaa\u660e<\/h2>\r\n      <p>\u6240\u6709\u91cd\u5927\u5236\u5ea6\u4fee\u8a02\u8207\u5e74\u5ea6\u5831\u544a \u7686\u7d93\u7406\u76e3\u4e8b\u6703\u8b70\u901a\u904e\u5f8c\u516c\u958b\u767c\u5e03<\/p>\r\n    <\/div>\r\n\r\n    <div class=\"org-blueprint-line\"><\/div>\r\n\r\n    <div class=\"org-grid reveal-item\" style=\"transition-delay: 0.2s;\">\r\n      \r\n      <div class=\"org-glass-card js-glow-card\">\r\n        <div class=\"node-dot\"><\/div>\r\n        <h3>\u7406\u4e8b\u6703<\/h3>\r\n        <p>\u6c7a\u7b56\u55ae\u4f4d<\/p>\r\n      <\/div>\r\n      \r\n      <div class=\"org-glass-card js-glow-card\">\r\n        <div class=\"node-dot\"><\/div>\r\n        <h3>\u76e3\u4e8b\u6703<\/h3>\r\n        <p>\u76e3\u7763\u55ae\u4f4d<\/p>\r\n      <\/div>\r\n      \r\n      <div class=\"org-glass-card js-glow-card\">\r\n        <div class=\"node-dot\"><\/div>\r\n        <h3>\u9867\u554f\u5718<\/h3>\r\n        <p>\u5c08\u696d\u8aee\u8a62<\/p>\r\n      <\/div>\r\n      \r\n      <div class=\"org-glass-card js-glow-card\">\r\n        <div class=\"node-dot\"><\/div>\r\n        <h3>\u79d8\u66f8\u8655<\/h3>\r\n        <p>\u884c\u653f\u57f7\u884c<\/p>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    function initScrollInteractions() {\r\n      const isEditor = document.body.classList.contains('elementor-editor-active');\r\n\r\n      \/\/ 1. \u6efe\u52d5\u6d6e\u73fe (Staggered Reveal)\r\n      const reveals = document.querySelectorAll('#interaction-pro-wrapper .reveal-item');\r\n      if (isEditor) {\r\n        reveals.forEach(el => el.classList.add('is-visible'));\r\n      } else {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n          entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n              entry.target.classList.add('is-visible');\r\n              obs.unobserve(entry.target);\r\n            }\r\n          });\r\n        }, { threshold: 0.15 });\r\n        reveals.forEach(el => observer.observe(el));\r\n      }\r\n\r\n      \/\/ 2. \u300c\u95dc\u65bc\u6211\u5011\u300d\u8ef8\u7dda\u751f\u9577\u8207\u9ede\u4eae\u7279\u6548\u8a08\u7b97\r\n      const axisWrap = document.getElementById('js-axis-wrap');\r\n      const axisLine = document.getElementById('js-axis-line');\r\n      const axisTargets = document.querySelectorAll('.js-axis-target');\r\n\r\n      if (!isEditor && axisWrap && axisLine) {\r\n        window.addEventListener('scroll', () => {\r\n          const windowHeight = window.innerHeight;\r\n          const wrapRect = axisWrap.getBoundingClientRect();\r\n          \r\n          let progress = ((windowHeight * 0.6) - wrapRect.top) \/ wrapRect.height;\r\n          progress = Math.max(0, Math.min(1, progress));\r\n          axisLine.style.height = `${progress * 100}%`;\r\n\r\n          axisTargets.forEach(target => {\r\n            const targetRect = target.getBoundingClientRect();\r\n            \/\/ \u7576\u7da0\u7dda\u756b\u5230\u8a72\u5340\u584a\u6642\u89f8\u767c\r\n            if (targetRect.top < windowHeight * 0.65) {\r\n              target.classList.add('is-active');\r\n            } else {\r\n              target.classList.remove('is-active');\r\n            }\r\n          });\r\n        });\r\n      }\r\n\r\n      if (isEditor && axisLine) {\r\n        axisLine.style.height = '100%';\r\n        axisTargets.forEach(target => target.classList.add('is-active'));\r\n      }\r\n\r\n      \/\/ 3. \u7d44\u7e54\u67b6\u69cb\u5361\u7247\uff1a\u6e38\u6a19\u8ddf\u96a8\u767c\u5149 (Mouse Tracking Glow)\r\n      const glowCards = document.querySelectorAll('.js-glow-card');\r\n      \r\n      glowCards.forEach(card => {\r\n        card.addEventListener('mousemove', (e) => {\r\n          const rect = card.getBoundingClientRect();\r\n          \/\/ \u8a08\u7b97\u6ed1\u9f20\u5728\u5361\u7247\u5167\u7684\u76f8\u5c0d\u4f4d\u7f6e\r\n          const x = e.clientX - rect.left;\r\n          const y = e.clientY - rect.top;\r\n          \r\n          \/\/ \u66f4\u65b0 CSS \u8b8a\u6578\uff0c\u8b93 radial-gradient \u8ddf\u8457\u6e38\u6a19\u79fb\u52d5\r\n          card.style.setProperty('--mouse-x', `${x}px`);\r\n          card.style.setProperty('--mouse-y', `${y}px`);\r\n        });\r\n      });\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initScrollInteractions);\r\n    } else {\r\n      initScrollInteractions();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-db806f7 e-flex e-con-boxed e-con e-parent\" data-id=\"db806f7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-071a207 elementor-widget elementor-widget-html\" data-id=\"071a207\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* =========================================\r\n     1. \u5168\u5c40\u8b8a\u6578 & \u7db2\u683c\u80cc\u666f\r\n     ========================================= *\/\r\n  #ultimate-quest-wrapper {\r\n    --color-bg: #ffffff;\r\n    --color-text-main: #0f172a;\r\n    --color-text-sub: #64748b;\r\n    --color-primary: #059669;\r\n    --color-primary-light: rgba(5, 150, 105, 0.08);\r\n    --color-border: rgba(15, 23, 42, 0.08);\r\n    --grid-line: rgba(15, 23, 42, 0.02); \r\n    \r\n    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n    --ease-smooth: cubic-bezier(0.25, 1, 0.5, 1);\r\n    \r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    color: var(--color-text-main);\r\n    background-color: transparent;\r\n    background-image: \r\n      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);\r\n    background-size: 40px 40px;\r\n    background-position: center top;\r\n    overflow-x: hidden;\r\n    margin: 0; padding: 0;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  #ultimate-quest-wrapper h2, \r\n  #ultimate-quest-wrapper h3, \r\n  #ultimate-quest-wrapper p { margin: 0; }\r\n  #ultimate-quest-wrapper a { text-decoration: none; }\r\n\r\n  \/* \u57fa\u790e\u6efe\u52d5\u6d6e\u73fe\u52d5\u756b *\/\r\n  .aww-reveal {\r\n    opacity: 0; transform: translateY(40px);\r\n    transition: opacity 0.8s var(--ease-smooth), transform 0.8s var(--ease-smooth);\r\n  }\r\n  .aww-reveal.is-visible { opacity: 1; transform: translateY(0); }\r\n\r\n  \/* \u5340\u584a\u5171\u7528\u9593\u8ddd\u8a2d\u5b9a *\/\r\n  .section-pad { padding: 120px 5vw; max-width: 1200px; margin: 0 auto; }\r\n  \r\n  .badge-tag {\r\n    display: inline-block; padding: 8px 20px; font-size: 0.85rem; font-weight: 800;\r\n    color: var(--color-primary); background: var(--color-primary-light);\r\n    border-radius: 100px; letter-spacing: 0.1em; margin-bottom: 30px;\r\n  }\r\n  \r\n  \/* \u6536\u6582\u5f8c\u7684\u6a19\u984c\u5c3a\u5bf8 *\/\r\n  .title-elegant {\r\n    font-size: clamp(2rem, 3.5vw, 2.8rem); \r\n    font-weight: 800; letter-spacing: 0.02em; color: var(--color-text-main);\r\n  }\r\n\r\n  \/* =========================================\r\n     2. \u5584\u5faa\u74b0\u5236\u5ea6 (Intro & \u539f\u5247\u77e9\u9663)\r\n     ========================================= *\/\r\n  .system-intro { text-align: center; display: flex; flex-direction: column; align-items: center; }\r\n\r\n  \/* \u8abf\u6574\uff1a\u6a19\u984c\u8207\u6558\u8ff0\u6587\u5b57\u4e4b\u9593\u7684\u5bec\u95ca\u9593\u8ddd *\/\r\n  .system-title {\r\n    margin-bottom: 40px; \r\n  }\r\n  \r\n  \/* \u8abf\u6574\uff1a\u6558\u8ff0\u6587\u5b57\u8207\u4e0b\u65b9\u77e9\u9663\u7684\u5bec\u95ca\u9593\u8ddd *\/\r\n  .system-desc {\r\n    font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--color-text-sub);\r\n    line-height: 1.8; max-width: 750px; margin: 0 auto;\r\n    margin-bottom: 100px; \r\n  }\r\n\r\n  .principles-matrix {\r\n    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%;\r\n  }\r\n  \r\n  .prin-pill {\r\n    padding: 16px 36px; background: rgba(255,255,255,0.7); border: 1px solid var(--color-border);\r\n    border-radius: 16px; font-size: 1.1rem; font-weight: 700; color: var(--color-text-sub);\r\n    backdrop-filter: blur(10px); transition: all 0.4s var(--ease-spring);\r\n    box-shadow: 0 10px 20px rgba(0,0,0,0.02); cursor: default;\r\n  }\r\n  .prin-pill:hover {\r\n    transform: translateY(-8px) scale(1.05); border-color: var(--color-primary);\r\n    color: var(--color-primary); box-shadow: 0 20px 40px rgba(5,150,105,0.1);\r\n    background: #ffffff;\r\n  }\r\n\r\n  \/* =========================================\r\n     3. \u4efb\u52d9\u767c\u653e\u8207\u7528\u9014 (\u62c9\u958b\u5361\u7247\u9593\u8ddd)\r\n     ========================================= *\/\r\n  .cards-grid {\r\n    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6vw; margin-top: 40px;\r\n  }\r\n  \r\n  \/* \u8abf\u6574\uff1a\u6a19\u984c\u8207\u4e0b\u65b9\u5361\u7247\u7fa4\u7684\u5bec\u95ca\u9593\u8ddd *\/\r\n  .card-column h3 { \r\n    font-size: 1.8rem; font-weight: 800; text-align: center; \r\n    margin-bottom: 60px; \r\n  }\r\n\r\n  \/* --- \u8cde\u91d1\u4efb\u52d9\u5361 --- *\/\r\n  .bounty-card {\r\n    position: relative; background: #ffffff; border-radius: 20px;\r\n    border: 1px solid var(--color-border); \r\n    padding: 36px 30px; \r\n    margin-bottom: 32px; \/* \u8abf\u6574\uff1a\u5361\u7247\u9593\u8ddd\u62c9\u5927 *\/\r\n    display: flex; align-items: center; justify-content: space-between;\r\n    transition: all 0.5s var(--ease-spring); overflow: hidden;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.02); cursor: pointer;\r\n  }\r\n  \r\n  .bounty-card::after {\r\n    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;\r\n    background: linear-gradient(90deg, transparent, rgba(5,150,105,0.05), transparent);\r\n    transform: skewX(-20deg); transition: none; z-index: 10; pointer-events: none;\r\n  }\r\n  .bounty-card:hover {\r\n    transform: translateY(-8px); border-color: rgba(5,150,105,0.3);\r\n    box-shadow: 0 25px 50px rgba(5,150,105,0.08);\r\n  }\r\n  .bounty-card:hover::after { left: 200%; transition: left 0.7s ease-in-out; }\r\n\r\n  .bounty-info h4 { font-size: 1.25rem; font-weight: 800; color: var(--color-text-main); margin-bottom: 8px; }\r\n  .bounty-info p { font-size: 1rem; color: var(--color-text-sub); }\r\n  \r\n  .bounty-badge {\r\n    background: var(--color-text-main); color: #10b981; font-family: 'Courier New', monospace;\r\n    font-size: 1.2rem; font-weight: 900; padding: 12px 18px; border-radius: 12px;\r\n    transition: all 0.4s ease; box-shadow: 0 0 15px rgba(16,185,129,0.1) inset;\r\n  }\r\n  .bounty-card:hover .bounty-badge { background: var(--color-primary); color: #ffffff; transform: scale(1.1); box-shadow: 0 10px 20px rgba(5,150,105,0.3); }\r\n\r\n  \/* --- \u6578\u4f4d\u514c\u63db\u5238 --- *\/\r\n  .ticket-card {\r\n    position: relative; background: #ffffff; border-radius: 16px;\r\n    border: 1px solid var(--color-border); \r\n    padding: 30px 40px; \r\n    margin-bottom: 28px; \/* \u8abf\u6574\uff1a\u5361\u7247\u9593\u8ddd\u62c9\u5927 *\/\r\n    display: flex; align-items: center; gap: 24px; transition: all 0.4s var(--ease-spring);\r\n    cursor: pointer; overflow: hidden;\r\n  }\r\n  .ticket-card::before {\r\n    content: ''; position: absolute; left: 80px; top: -10px; bottom: -10px; width: 2px;\r\n    background: repeating-linear-gradient(to bottom, var(--color-border) 0, var(--color-border) 6px, transparent 6px, transparent 12px);\r\n    transition: all 0.4s ease;\r\n  }\r\n  .ticket-icon { font-size: 1.6rem; width: 40px; text-align: center; transition: all 0.4s var(--ease-spring); filter: grayscale(100%); opacity: 0.5; }\r\n  .ticket-text { font-size: 1.25rem; font-weight: 700; color: var(--color-text-main); padding-left: 24px; transition: color 0.4s ease; }\r\n\r\n  .ticket-card:hover { transform: translateX(10px) scale(1.02); border-color: var(--color-primary); background: var(--color-primary-light); box-shadow: 0 15px 30px rgba(5,150,105,0.08); }\r\n  .ticket-card:hover::before { background: repeating-linear-gradient(to bottom, var(--color-primary) 0, var(--color-primary) 6px, transparent 6px, transparent 12px); opacity: 0.3; }\r\n  .ticket-card:hover .ticket-icon { filter: grayscale(0%); opacity: 1; transform: scale(1.2) rotate(-10deg); }\r\n  .ticket-card:hover .ticket-text { color: var(--color-primary); }\r\n\r\n  \/* =========================================\r\n     4. \u5584\u4efb\u52d9\u5e73\u53f0 (\u96d9\u5411\u52d5\u614b\u89e3\u9396\u7011\u5e03\u6d41)\r\n     ========================================= *\/\r\n  .platform-section { border-top: 1px solid var(--color-border); text-align: center; }\r\n\r\n  \/* \u8abf\u6574\uff1a\u4efb\u52d9\u6d41\u7a0b\u6a19\u984c\u8207\u6642\u9593\u8ef8\u7684\u9593\u8ddd *\/\r\n  .flow-title { margin-bottom: 80px; }\r\n\r\n  .quest-wrapper {\r\n    position: relative; max-width: 800px; margin: 0 auto; padding-left: 40px; text-align: left;\r\n  }\r\n  \r\n  \/* \u5e95\u90e8\u6697\u8ecc\u9053 *\/\r\n  .quest-track {\r\n    position: absolute; left: 0; top: 0; bottom: 0; width: 4px;\r\n    background: rgba(0,0,0,0.04); border-radius: 4px;\r\n  }\r\n  \r\n  \/* \u96d9\u5411\u6ed1\u52d5\u751f\u9577\u767c\u5149\u7dda - \u79fb\u9664 transition\uff0c\u6539\u7531 JS \u5be6\u6642\u63a7\u5236\u4ee5\u9054\u5230\u7d55\u5c0d\u540c\u6b65 *\/\r\n  .quest-fill-line {\r\n    position: absolute; left: 0; top: 0; width: 4px; background: var(--color-primary);\r\n    border-radius: 4px; height: 0%; \r\n    box-shadow: 0 0 15px var(--color-primary);\r\n    will-change: height;\r\n  }\r\n  \r\n  \/* \u5e36\u9818\u7dda\u689d\u7684\u5149\u7403 - \u79fb\u9664 transition\uff0c\u6539\u7531 JS \u5be6\u6642\u63a7\u5236 *\/\r\n  .quest-glow-ball {\r\n    position: absolute; left: 2px; top: 0; width: 16px; height: 16px;\r\n    background: #ffffff; border: 4px solid var(--color-primary); border-radius: 50%;\r\n    transform: translate(-50%, -50%); box-shadow: 0 0 20px 5px rgba(5,150,105,0.5);\r\n    z-index: 3;\r\n    will-change: top;\r\n  }\r\n\r\n  \/* \u55ae\u500b\u4efb\u52d9\u7bc0\u9ede\u8259 *\/\r\n  .quest-node {\r\n    position: relative; margin-bottom: 60px; padding: 32px 40px;\r\n    background: rgba(255,255,255,0.6); border: 1px solid var(--color-border); border-radius: 20px;\r\n    backdrop-filter: blur(10px); display: flex; align-items: center; gap: 24px;\r\n    \/* \u9810\u8a2d\u672a\u89e3\u9396\u72c0\u614b *\/\r\n    opacity: 0.3; filter: grayscale(100%); transform: translateX(-20px) scale(0.95);\r\n    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s var(--ease-spring), border-color 0.4s ease, box-shadow 0.4s ease;\r\n  }\r\n  .quest-node:last-child { margin-bottom: 0; }\r\n\r\n  \/* \u8ecc\u9053\u4e0a\u7684\u9396\u9ede *\/\r\n  .node-lock {\r\n    position: absolute; left: -49px; top: 50%; transform: translateY(-50%);\r\n    width: 22px; height: 22px; background: var(--color-bg); border: 4px solid var(--color-border);\r\n    border-radius: 50%; transition: all 0.4s var(--ease-spring); z-index: 2;\r\n  }\r\n\r\n  \/* --- \u6efe\u52d5\u96d9\u5411\u89f8\u767c\uff1a\u89e3\u9396\u901a\u96fb\u7279\u6548 --- *\/\r\n  .quest-node.is-unlocked {\r\n    opacity: 1; filter: grayscale(0%); transform: translateX(0);\r\n    background: #ffffff; border-color: rgba(5,150,105,0.4);\r\n    box-shadow: 0 20px 40px rgba(5,150,105,0.08), inset 0 0 20px rgba(5,150,105,0.02);\r\n  }\r\n  .quest-node.is-unlocked .node-lock {\r\n    border-color: var(--color-primary); background: #10b981;\r\n    box-shadow: 0 0 20px rgba(16,185,129,0.6); transform: translateY(-50%) scale(1.3);\r\n  }\r\n\r\n  .node-step { font-family: 'Courier New', monospace; font-size: 1.05rem; font-weight: 800; color: var(--color-text-sub); letter-spacing: 0.1em; transition: color 0.4s ease;}\r\n  .node-title { font-size: 1.5rem; font-weight: 800; color: var(--color-text-main); transition: color 0.4s ease;}\r\n  \r\n  .quest-node.is-unlocked .node-step { color: var(--color-primary); }\r\n  .quest-node.is-unlocked .node-title { color: var(--color-primary); }\r\n\r\n  \/* \u4e92\u52d5\u6309\u9215 *\/\r\n  .btn-cyber {\r\n    display: inline-flex; margin-top: 100px; padding: 18px 48px; font-size: 1.2rem; font-weight: 800;\r\n    color: #ffffff; background: var(--color-text-main); border-radius: 100px;\r\n    position: relative; overflow: hidden; transition: all 0.4s var(--ease-spring);\r\n  }\r\n  .btn-cyber::before {\r\n    content: ''; position: absolute; inset: 0; background: var(--color-primary);\r\n    transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s var(--ease-out-expo); z-index: 0;\r\n  }\r\n  .btn-cyber span { position: relative; z-index: 1; }\r\n  .btn-cyber:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(5,150,105,0.25); border-color: transparent; }\r\n  .btn-cyber:hover::before { transform: scaleY(1); }\r\n\r\n  \/* =========================================\r\n     5. \u5be9\u6838\u6a5f\u5236\r\n     ========================================= *\/\r\n  .audit-section { border-top: 1px solid var(--color-border); }\r\n  .audit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px; }\r\n\r\n  .stamp-card {\r\n    background: #ffffff; border: 2px dashed var(--color-border); border-radius: 20px;\r\n    padding: 40px 20px; text-align: center; position: relative;\r\n    transition: all 0.4s var(--ease-spring); cursor: pointer; overflow: hidden;\r\n  }\r\n  \r\n  .stamp-mark {\r\n    position: absolute; top: 15px; right: 15px; font-size: 3.5rem; color: rgba(5,150,105,0.1);\r\n    transform: rotate(30deg) scale(2); opacity: 0; \r\n    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 2.5);\r\n    font-weight: 900; line-height: 1; pointer-events: none;\r\n  }\r\n  \r\n  .stamp-card:hover {\r\n    border-color: var(--color-primary); border-style: solid;\r\n    transform: translateY(-10px); box-shadow: 0 20px 40px rgba(5,150,105,0.1); background: var(--color-primary-light);\r\n  }\r\n  .stamp-card:hover .stamp-mark {\r\n    opacity: 1; transform: rotate(-10deg) scale(1); color: var(--color-primary);\r\n  }\r\n  \r\n  .stamp-card h4 { font-size: 1.25rem; font-weight: 800; color: var(--color-text-main); margin-top: 20px; transition: color 0.3s ease; }\r\n  .stamp-card:hover h4 { color: var(--color-primary); }\r\n\r\n  \/* =========================================\r\n     6. RWD \u97ff\u61c9\u5f0f\u512a\u5316\r\n     ========================================= *\/\r\n  @media (max-width: 992px) {\r\n    .cards-grid { grid-template-columns: 1fr; gap: 60px; }\r\n    .audit-grid { grid-template-columns: repeat(2, 1fr); }\r\n    \r\n    .quest-wrapper { padding-left: 30px; }\r\n    .quest-track, .quest-fill-line { left: 0px; }\r\n    .quest-glow-ball { left: 2px; }\r\n    .node-lock { left: -42px; width: 20px; height: 20px; border-width: 3px; }\r\n    .quest-node { padding: 24px; gap: 16px; flex-direction: column; align-items: flex-start; }\r\n  }\r\n  @media (max-width: 768px) {\r\n    .section-pad { padding: 80px 5vw; }\r\n    .audit-grid { grid-template-columns: 1fr; }\r\n    .bounty-card { flex-direction: column; align-items: flex-start; gap: 20px; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"ultimate-quest-wrapper\">\r\n\r\n  <section class=\"section-pad system-intro\">\r\n    <div class=\"badge-tag aww-reveal\">CORE SYSTEM<\/div>\r\n    <h2 class=\"title-elegant system-title aww-reveal\" style=\"transition-delay: 0.1s;\">\u5584\u5faa\u74b0\u5236\u5ea6\u662f\u4ec0\u9ebc<\/h2>\r\n    <p class=\"system-desc aww-reveal\" style=\"transition-delay: 0.2s;\">\r\n      \u5584\u5faa\u74b0\u5236\u5ea6\u662f\u4e00\u5957\u7d93\u5354\u6703\u5236\u5b9a\u4e4b\u5584\u884c\u7d00\u9304\u8207\u9ede\u6578\u5236\u5ea6 \u900f\u904e\u4efb\u52d9\u53c3\u8207\u8207\u516c\u76ca\u884c\u52d5 \u5c07\u5584\u884c\u8f49\u5316\u70ba\u53ef\u7d2f\u7a4d\u4e4b\u5584\u9ede\u6578\r\n    <\/p>\r\n\r\n    <div class=\"principles-matrix aww-reveal\" style=\"transition-delay: 0.3s;\">\r\n      <div class=\"prin-pill\">\u771f\u5be6\u6027\u5be9\u6838<\/div>\r\n      <div class=\"prin-pill\">\u884c\u70ba\u53ef\u9a57\u8b49<\/div>\r\n      <div class=\"prin-pill\">\u8ca2\u737b\u53ef\u91cf\u5316<\/div>\r\n      <div class=\"prin-pill\">\u9ede\u6578\u767c\u653e\u6709\u6a19\u6e96<\/div>\r\n      <div class=\"prin-pill\">\u6578\u64da\u53ef\u67e5\u8a62<\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad\">\r\n    <div class=\"cards-grid\">\r\n      \r\n      <div class=\"card-column\">\r\n        <h3 class=\"aww-reveal\">\u5584\u9ede\u6578\u767c\u653e\u6a19\u6e96<\/h3>\r\n        \r\n        <div class=\"bounty-card aww-reveal\">\r\n          <div class=\"bounty-info\">\r\n            <h4>\u5fd7\u5de5\u670d\u52d9 1 \u5c0f\u6642<\/h4>\r\n            <p>\u57fa\u790e\u6642\u6578\u8f49\u63db<\/p>\r\n          <\/div>\r\n          <div class=\"bounty-badge\">= X \u9ede<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"bounty-card aww-reveal\" style=\"transition-delay: 0.1s;\">\r\n          <div class=\"bounty-info\">\r\n            <h4>\u5c08\u696d\u670d\u52d9<\/h4>\r\n            <p>\u4f9d\u6280\u8853\u9580\u6abb\u52a0\u6b0a<\/p>\r\n          <\/div>\r\n          <div class=\"bounty-badge\" style=\"background: transparent; color: var(--color-text-sub); border: 1px dashed var(--color-border); box-shadow: none;\">\u52d5\u614b\u8a08\u7b97<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"bounty-card aww-reveal\" style=\"transition-delay: 0.2s;\">\r\n          <div class=\"bounty-info\">\r\n            <h4>\u4f01\u696d ESG \u4efb\u52d9<\/h4>\r\n            <p>\u4f9d\u5c08\u6848\u7b49\u7d1a\u8a55\u4f30<\/p>\r\n          <\/div>\r\n          <div class=\"bounty-badge\" style=\"background: transparent; color: var(--color-text-sub); border: 1px dashed var(--color-border); box-shadow: none;\">\u5c08\u6848\u8a55\u4f30<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"card-column\">\r\n        <h3 class=\"aww-reveal\" style=\"transition-delay: 0.2s;\">\u5584\u9ede\u6578\u7528\u9014<\/h3>\r\n\r\n        <div class=\"ticket-card aww-reveal\" style=\"transition-delay: 0.2s;\">\r\n          <div class=\"ticket-icon\">\ud83d\udd12<\/div>\r\n          <div class=\"ticket-text\">\u4fdd\u7559\u7d2f\u7a4d<\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"ticket-card aww-reveal\" style=\"transition-delay: 0.3s;\">\r\n          <div class=\"ticket-icon\">\ud83c\udf81<\/div>\r\n          <div class=\"ticket-text\">\u8f49\u8d08\u5bb6\u4eba<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ticket-card aww-reveal\" style=\"transition-delay: 0.4s;\">\r\n          <div class=\"ticket-icon\">\ud83e\udd1d<\/div>\r\n          <div class=\"ticket-text\">\u514c\u63db\u5408\u4f5c\u5584\u4f01\u696d\u670d\u52d9<\/div>\r\n        <\/div>\r\n\r\n        <div class=\"ticket-card aww-reveal\" style=\"transition-delay: 0.5s;\">\r\n          <div class=\"ticket-icon\">\ud83c\udf1f<\/div>\r\n          <div class=\"ticket-text\">\u53c3\u8207\u7279\u5b9a\u516c\u76ca\u5c08\u6848<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad platform-section\" id=\"tasks\">\r\n    <div class=\"badge-tag aww-reveal\">QUEST BOARD<\/div>\r\n    <h2 class=\"title-elegant aww-reveal flow-title\">\u4efb\u52d9\u767c\u5e03\u6d41\u7a0b<\/h2>\r\n    \r\n    <div class=\"quest-wrapper\" id=\"js-quest-wrap\">\r\n      <div class=\"quest-track\"><\/div>\r\n      <div class=\"quest-fill-line\" id=\"js-quest-line\"><\/div>\r\n      <div class=\"quest-glow-ball\" id=\"js-quest-ball\"><\/div>\r\n\r\n      <div class=\"quest-node js-quest-node aww-reveal\">\r\n        <div class=\"node-lock\"><\/div>\r\n        <div class=\"node-step\">STEP 01<\/div>\r\n        <div class=\"node-title\">\u7533\u8acb\u55ae\u4f4d\u63d0\u51fa\u4efb\u52d9<\/div>\r\n      <\/div>\r\n      <div class=\"quest-node js-quest-node aww-reveal\">\r\n        <div class=\"node-lock\"><\/div>\r\n        <div class=\"node-step\">STEP 02<\/div>\r\n        <div class=\"node-title\">\u5354\u6703\u5be9\u67e5<\/div>\r\n      <\/div>\r\n      <div class=\"quest-node js-quest-node aww-reveal\">\r\n        <div class=\"node-lock\"><\/div>\r\n        <div class=\"node-step\">STEP 03<\/div>\r\n        <div class=\"node-title\">\u4efb\u52d9\u4e0a\u67b6<\/div>\r\n      <\/div>\r\n      <div class=\"quest-node js-quest-node aww-reveal\">\r\n        <div class=\"node-lock\"><\/div>\r\n        <div class=\"node-step\">STEP 04<\/div>\r\n        <div class=\"node-title\">\u6703\u54e1\u5831\u540d<\/div>\r\n      <\/div>\r\n      <div class=\"quest-node js-quest-node aww-reveal\">\r\n        <div class=\"node-lock\"><\/div>\r\n        <div class=\"node-step\">STEP 05<\/div>\r\n        <div class=\"node-title\">\u4efb\u52d9\u5b8c\u6210<\/div>\r\n      <\/div>\r\n      <div class=\"quest-node js-quest-node aww-reveal\">\r\n        <div class=\"node-lock\"><\/div>\r\n        <div class=\"node-step\">STEP 06<\/div>\r\n        <div class=\"node-title\">\u5be9\u6838\u78ba\u8a8d<\/div>\r\n      <\/div>\r\n      <div class=\"quest-node js-quest-node aww-reveal\">\r\n        <div class=\"node-lock\"><\/div>\r\n        <div class=\"node-step\">STEP 07<\/div>\r\n        <div class=\"node-title\">\u767c\u653e\u5584\u9ede<\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"aww-reveal\">\r\n      <a href=\"[REPLACE_URL_HERE]\" class=\"btn-cyber\"><span>\u7acb\u5373\u767c\u5e03\u4efb\u52d9<\/span><\/a>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad audit-section\">\r\n    <h2 class=\"title-elegant aww-reveal\" style=\"text-align: center; margin-bottom: 16px;\">\u5be9\u6838\u6a5f\u5236\u8aaa\u660e<\/h2>\r\n    <p class=\"desc-elegant aww-reveal\" style=\"margin: 0 auto; text-align: center;\">\u4efb\u52d9\u5fc5\u9808\u7b26\u5408\u4ee5\u4e0b\u6838\u5fc3\u898f\u7bc4<\/p>\r\n\r\n    <div class=\"audit-grid\">\r\n      <div class=\"stamp-card aww-reveal\">\r\n        <div class=\"stamp-mark\">\u2714<\/div>\r\n        <h4>\u5177\u660e\u78ba\u516c\u76ca\u76ee\u7684<\/h4>\r\n      <\/div>\r\n      <div class=\"stamp-card aww-reveal\" style=\"transition-delay: 0.1s;\">\r\n        <div class=\"stamp-mark\">\u2714<\/div>\r\n        <h4>\u6709\u53d7\u76ca\u4eba\u5c0d\u8c61<\/h4>\r\n      <\/div>\r\n      <div class=\"stamp-card aww-reveal\" style=\"transition-delay: 0.2s;\">\r\n        <div class=\"stamp-mark\">\u2714<\/div>\r\n        <h4>\u53ef\u91cf\u5316\u6210\u679c<\/h4>\r\n      <\/div>\r\n      <div class=\"stamp-card aww-reveal\" style=\"transition-delay: 0.3s;\">\r\n        <div class=\"stamp-mark\">\u2714<\/div>\r\n        <h4>\u4e0d\u9055\u53cd\u76f8\u95dc\u6cd5\u898f<\/h4>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    function initUltimateInteractions() {\r\n      const isEditor = document.body.classList.contains('elementor-editor-active');\r\n\r\n      \/\/ 1. \u6efe\u52d5\u6f38\u986f\u52d5\u756b\r\n      const reveals = document.querySelectorAll('#ultimate-quest-wrapper .aww-reveal');\r\n      if (isEditor) {\r\n        reveals.forEach(el => el.classList.add('is-visible'));\r\n      } else {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n          entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n              entry.target.classList.add('is-visible');\r\n              obs.unobserve(entry.target);\r\n            }\r\n          });\r\n        }, { threshold: 0.15 });\r\n        reveals.forEach(el => observer.observe(el));\r\n      }\r\n\r\n      \/\/ 2. \u96d9\u5411\u4efb\u52d9\u89e3\u9396\u5149\u8ecc\u908f\u8f2f (\u7cbe\u6e96\u540c\u6b65\u4e0a\u4e0b\u6efe\u52d5)\r\n      const questWrap = document.getElementById('js-quest-wrap');\r\n      const questLine = document.getElementById('js-quest-line');\r\n      const questBall = document.getElementById('js-quest-ball');\r\n      const questNodes = document.querySelectorAll('.js-quest-node');\r\n\r\n      if (!isEditor && questWrap && questLine && questBall) {\r\n        let ticking = false;\r\n\r\n        function updateTimeline() {\r\n          const windowHeight = window.innerHeight;\r\n          const wrapRect = questWrap.getBoundingClientRect();\r\n          \r\n          \/\/ \u5c07\u8996\u7a97\u7684 50% \u9ad8\u5ea6\u8a2d\u5b9a\u70ba\u89f8\u767c\u7dda\uff0c\u624b\u611f\u6700\u76f4\u89ba\r\n          const triggerY = windowHeight * 0.5; \r\n          \r\n          \/\/ \u8a08\u7b97\u6574\u500b\u8ecc\u9053\u4e0a\u65b9\u5df2\u7d93\u8d8a\u904e\u89f8\u767c\u7dda\u7684\u8ddd\u96e2\r\n          let scrolledPastTrigger = triggerY - wrapRect.top;\r\n          let progress = scrolledPastTrigger \/ wrapRect.height;\r\n          \r\n          \/\/ \u9650\u5236\u9032\u5ea6\u5728 0 \u5230 1 \u4e4b\u9593\r\n          progress = Math.max(0, Math.min(1, progress));\r\n          const pct = progress * 100;\r\n          \r\n          \/\/ \u5be6\u6642\u66f4\u65b0\u7dda\u689d\u9577\u5ea6\u8207\u5149\u7403\u4f4d\u7f6e (\u79fb\u9664 CSS transition \u78ba\u4fdd\u7121\u5ef6\u9072\u8ddf\u96a8)\r\n          questLine.style.height = `${pct}%`;\r\n          questBall.style.top = `${pct}%`;\r\n\r\n          \/\/ \u96d9\u5411\u5224\u65b7\u6bcf\u500b\u7bc0\u9ede\u662f\u5426\u88ab\u5149\u7403\u8d85\u8d8a\r\n          questNodes.forEach(node => {\r\n            const nodeRect = node.getBoundingClientRect();\r\n            \/\/ \u4ee5\u8a72\u7bc0\u9ede\u7684\u4e2d\u5fc3\u9ede\u4f5c\u70ba\u89e3\u9396\u5224\u5b9a\u57fa\u6e96\r\n            const nodeCenterY = nodeRect.top + (nodeRect.height \/ 2);\r\n            \r\n            \/\/ \u7576\u7bc0\u9ede\u4e2d\u5fc3\u9ede\u88ab\u63a8\u5230\u89f8\u767c\u7dda(\u5149\u7403\u4f4d\u7f6e)\u4e4b\u4e0a\u6642\uff0c\u89e3\u9396\uff1b\u53cd\u4e4b\uff0c\u9000\u56de\u9396\u5b9a\r\n            if (nodeCenterY < triggerY) {\r\n              node.classList.add('is-unlocked');\r\n            } else {\r\n              node.classList.remove('is-unlocked');\r\n            }\r\n          });\r\n          \r\n          ticking = false;\r\n        }\r\n\r\n        window.addEventListener('scroll', () => {\r\n          if (!ticking) {\r\n            window.requestAnimationFrame(updateTimeline);\r\n            ticking = true;\r\n          }\r\n        });\r\n        \r\n        updateTimeline();\r\n      }\r\n\r\n      if (isEditor && questLine) {\r\n        questLine.style.height = '100%';\r\n        if(questBall) questBall.style.top = '100%';\r\n        questNodes.forEach(node => node.classList.add('is-unlocked'));\r\n      }\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initUltimateInteractions);\r\n    } else {\r\n      initUltimateInteractions();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1d9a9da e-flex e-con-boxed e-con e-parent\" data-id=\"1d9a9da\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-078e953 e-flex e-con-boxed e-con e-parent\" data-id=\"078e953\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ef21748 elementor-widget elementor-widget-html\" data-id=\"ef21748\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  \/* =========================================\r\n     1. \u5168\u5c40\u8b8a\u6578 & \u9802\u898f\u7db2\u683c\u8207\u6392\u7248 (\u7121\u6a19\u9ede)\r\n     ========================================= *\/\r\n  #esg-collab-wrapper {\r\n    --bg-color: #ffffff;\r\n    --text-primary: #09090b;\r\n    --text-secondary: #71717a;\r\n    --text-light: #a1a1aa;\r\n    --accent-color: #059669;\r\n    --accent-glow: rgba(5, 150, 105, 0.15);\r\n    --border-color: rgba(9, 9, 11, 0.08);\r\n    --grid-pattern: rgba(9, 9, 11, 0.02);\r\n    \r\n    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n    \r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    color: var(--text-primary);\r\n    background-color: transparent;\r\n    background-image: \r\n      linear-gradient(to right, var(--grid-pattern) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-pattern) 1px, transparent 1px);\r\n    background-size: 60px 60px;\r\n    margin: 0; padding: 0;\r\n    overflow-x: hidden;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  #esg-collab-wrapper * { box-sizing: border-box; }\r\n  #esg-collab-wrapper h2, #esg-collab-wrapper h3, #esg-collab-wrapper p { margin: 0; }\r\n  #esg-collab-wrapper a { text-decoration: none; }\r\n\r\n  \/* \u9802\u7d1a\u6efe\u52d5\u9032\u5834\u52d5\u756b *\/\r\n  .esg-reveal {\r\n    opacity: 0; transform: translateY(50px);\r\n    transition: opacity 1s var(--ease-smooth), transform 1s var(--ease-smooth);\r\n    will-change: transform, opacity;\r\n  }\r\n  .esg-reveal.is-visible { opacity: 1; transform: translateY(0); }\r\n\r\n  \/* \u5340\u584a\u6975\u81f4\u547c\u5438\u7a7a\u9593 *\/\r\n  .section-pad { padding: 150px 5vw; max-width: 1400px; margin: 0 auto; }\r\n\r\n  .badge-tag {\r\n    display: inline-block; padding: 8px 24px; border: 1px solid var(--border-color);\r\n    border-radius: 100px; font-size: 0.85rem; font-weight: 800; color: var(--accent-color);\r\n    background: rgba(5, 150, 105, 0.05); letter-spacing: 0.15em; margin-bottom: 40px; text-transform: uppercase;\r\n  }\r\n\r\n  \/* =========================================\r\n     2. \u70ba\u4ec0\u9ebc\u9700\u8981\u5236\u5ea6\u5316 (Intro)\r\n     ========================================= *\/\r\n  .esg-intro { text-align: center; display: flex; flex-direction: column; align-items: center; }\r\n  \r\n  .intro-title {\r\n    font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 900; line-height: 1.2;\r\n    letter-spacing: 0.02em; color: var(--text-primary); margin-bottom: 40px;\r\n  }\r\n  \r\n  .intro-desc {\r\n    font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--text-secondary);\r\n    line-height: 1.8; max-width: 750px; margin: 0 auto 100px auto;\r\n  }\r\n\r\n  \/* =========================================\r\n     3. Bento Box \u89e3\u6c7a\u65b9\u6848\u7db2\u683c (\u6e38\u6a19\u8ffd\u8e64\u5149\u6688)\r\n     ========================================= *\/\r\n  .bento-grid {\r\n    display: grid; \r\n    grid-template-columns: repeat(2, 1fr); \r\n    grid-template-rows: auto auto;\r\n    gap: 30px; width: 100%; max-width: 1100px; margin: 0 auto;\r\n  }\r\n\r\n  .bento-item {\r\n    position: relative; background: rgba(255, 255, 255, 0.7);\r\n    border: 1px solid var(--border-color); border-radius: 24px;\r\n    padding: 60px 40px; display: flex; flex-direction: column;\r\n    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);\r\n    overflow: hidden; transition: all 0.5s var(--ease-spring); cursor: default;\r\n  }\r\n\r\n  \/* \u6e38\u6a19\u8ffd\u8e64\u5168\u606f\u5149\u6688 *\/\r\n  .bento-item::before {\r\n    content: ''; position: absolute; inset: 0;\r\n    background: radial-gradient(600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(5, 150, 105, 0.08), transparent 40%);\r\n    opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 0;\r\n  }\r\n\r\n  .bento-item:hover {\r\n    transform: translateY(-8px); border-color: rgba(5, 150, 105, 0.2);\r\n    box-shadow: 0 20px 40px rgba(5, 150, 105, 0.05); background: #ffffff;\r\n  }\r\n  .bento-item:hover::before { opacity: 1; }\r\n\r\n  .bento-content { position: relative; z-index: 1; }\r\n  .bento-icon { font-size: 2rem; margin-bottom: 24px; opacity: 0.5; filter: grayscale(100%); transition: all 0.4s ease; }\r\n  .bento-title { font-size: 1.5rem; font-weight: 800; color: var(--text-primary); transition: color 0.4s ease; }\r\n  \r\n  .bento-item:hover .bento-icon { opacity: 1; filter: grayscale(0%); transform: scale(1.1); }\r\n  .bento-item:hover .bento-title { color: var(--accent-color); }\r\n\r\n  \/* \u975e\u5c0d\u7a31\u6392\u7248\uff0c\u8b93\u7db2\u683c\u770b\u8d77\u4f86\u66f4\u6709\u8a2d\u8a08\u611f *\/\r\n  .bento-item:nth-child(1) { grid-column: span 1; }\r\n  .bento-item:nth-child(2) { grid-column: span 1; }\r\n  .bento-item:nth-child(3) { grid-column: span 1; }\r\n  .bento-item:nth-child(4) { grid-column: span 1; }\r\n\r\n  \/* =========================================\r\n     4. \u5408\u4f5c\u6d41\u7a0b (\u80fd\u91cf\u7ba1\u7dda Pipeline Timeline)\r\n     ========================================= *\/\r\n  .pipeline-section { border-top: 1px solid var(--border-color); text-align: center; }\r\n  \r\n  .pipeline-wrap {\r\n    position: relative; max-width: 1200px; margin: 100px auto 0 auto;\r\n    display: flex; justify-content: space-between; align-items: flex-start;\r\n  }\r\n\r\n  \/* \u8ecc\u9053\u5e95\u7dda (\u6c34\u5e73) *\/\r\n  .pipeline-track {\r\n    position: absolute; top: 24px; left: 0; right: 0; height: 2px;\r\n    background: var(--border-color); z-index: 0;\r\n  }\r\n  \r\n  \/* \u6efe\u52d5\u6ce8\u5165\u7684\u7da0\u8272\u80fd\u91cf\u7dda (\u6c34\u5e73) *\/\r\n  .pipeline-fill {\r\n    position: absolute; top: 24px; left: 0; height: 2px; background: var(--accent-color);\r\n    width: 0%; z-index: 1; box-shadow: 0 0 15px var(--accent-color);\r\n    will-change: width;\r\n  }\r\n\r\n  .pipeline-node {\r\n    position: relative; z-index: 2; width: 18%; display: flex; flex-direction: column; align-items: center;\r\n    opacity: 0.3; filter: grayscale(100%); transform: translateY(20px);\r\n    transition: all 0.6s var(--ease-spring);\r\n  }\r\n\r\n  .node-point {\r\n    width: 50px; height: 50px; background: var(--bg-color); border: 2px solid var(--border-color);\r\n    border-radius: 50%; margin-bottom: 24px; display: flex; align-items: center; justify-content: center;\r\n    font-family: monospace; font-size: 1.1rem; font-weight: 800; color: var(--text-secondary);\r\n    transition: all 0.5s var(--ease-spring);\r\n  }\r\n\r\n  .node-text { font-size: 1.25rem; font-weight: 800; color: var(--text-primary); transition: color 0.4s ease; }\r\n\r\n  \/* \u7bc0\u9ede\u88ab\u80fd\u91cf\u7dda\u89e3\u9396\u7684\u72c0\u614b *\/\r\n  .pipeline-node.is-active {\r\n    opacity: 1; filter: grayscale(0%); transform: translateY(0);\r\n  }\r\n  .pipeline-node.is-active .node-point {\r\n    border-color: var(--accent-color); background: var(--accent-color); color: #fff;\r\n    box-shadow: 0 0 20px rgba(5, 150, 105, 0.4); transform: scale(1.1);\r\n  }\r\n  .pipeline-node.is-active .node-text { color: var(--accent-color); }\r\n\r\n  \/* =========================================\r\n     5. \u5584\u4f01\u696d\u5925\u4f34 (Split Layout & Cert Badges)\r\n     ========================================= *\/\r\n  .partner-section { border-top: 1px solid var(--border-color); }\r\n  \r\n  .partner-split { display: flex; gap: 8vw; align-items: center; }\r\n  \r\n  .partner-content { width: 45%; }\r\n  .partner-content h2 { font-size: clamp(2.5rem, 4vw, 3.5rem); font-weight: 900; margin-bottom: 30px; }\r\n  .partner-content p { font-size: 1.2rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 60px; }\r\n\r\n  \/* \u8a8d\u8b49\u5fbd\u7ae0\u7db2\u683c *\/\r\n  .partner-criteria { width: 55%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }\r\n  \r\n  .criteria-badge {\r\n    background: #ffffff; border: 1px solid var(--border-color); border-radius: 20px;\r\n    padding: 40px 30px; display: flex; align-items: center; gap: 20px;\r\n    transition: all 0.4s var(--ease-spring); box-shadow: 0 5px 20px rgba(0,0,0,0.01);\r\n    cursor: default; overflow: hidden; position: relative;\r\n  }\r\n  \r\n  \/* \u96b1\u85cf\u7684\u7da0\u8272\u6253\u52fe\uff0cHover \u6642\u6ed1\u5165 *\/\r\n  .check-icon {\r\n    font-size: 1.5rem; color: var(--accent-color);\r\n    transform: translateX(-20px) scale(0); opacity: 0;\r\n    transition: all 0.4s var(--ease-spring); position: absolute; left: 30px;\r\n  }\r\n\r\n  .criteria-text { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); transition: transform 0.4s var(--ease-spring), color 0.4s ease; }\r\n\r\n  .criteria-badge:hover {\r\n    border-color: rgba(5, 150, 105, 0.3); transform: translateY(-5px); box-shadow: 0 15px 30px rgba(5,150,105,0.08); background: #fdfdfd;\r\n  }\r\n  .criteria-badge:hover .check-icon { transform: translateX(0) scale(1); opacity: 1; }\r\n  \/* Hover \u6642\u6587\u5b57\u5f80\u53f3\u79fb\u8b93\u51fa\u7a7a\u9593\u7d66\u6253\u52fe *\/\r\n  .criteria-badge:hover .criteria-text { transform: translateX(35px); color: var(--accent-color); }\r\n\r\n  \/* =========================================\r\n     6. \u5be6\u9ad4\u58d3\u5370\u6309\u9215 (Tactile Dark Button)\r\n     ========================================= *\/\r\n  .btn-tactile {\r\n    display: inline-flex; justify-content: center; align-items: center;\r\n    padding: 20px 50px; font-size: 1.15rem; font-weight: 800; color: #ffffff;\r\n    background: var(--text-primary); border-radius: 100px; position: relative; overflow: hidden;\r\n    transition: all 0.4s var(--ease-spring); border: none; outline: none; cursor: pointer;\r\n  }\r\n  .btn-tactile::after {\r\n    content: ''; position: absolute; inset: 0; background: var(--accent-color);\r\n    transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 0;\r\n  }\r\n  .btn-tactile span { position: relative; z-index: 1; transition: transform 0.4s var(--ease-spring); }\r\n  \r\n  .btn-tactile:hover { transform: translateY(-4px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); }\r\n  .btn-tactile:hover::after { transform: scaleY(1); }\r\n  .btn-tactile:hover span { transform: scale(1.05); }\r\n\r\n  \/* =========================================\r\n     7. RWD \u97ff\u61c9\u5f0f\u512a\u5316\r\n     ========================================= *\/\r\n  @media (max-width: 1024px) {\r\n    .section-pad { padding: 100px 5vw; }\r\n    .partner-split { flex-direction: column; gap: 60px; text-align: center; }\r\n    .partner-content { width: 100%; display: flex; flex-direction: column; align-items: center; }\r\n    .partner-criteria { width: 100%; }\r\n    \r\n    \/* \u5408\u4f5c\u6d41\u7a0b\uff1a\u684c\u9762\u6a6b\u5411\u6539\u70ba\u624b\u6a5f\u5782\u76f4 *\/\r\n    .pipeline-wrap { flex-direction: column; align-items: flex-start; padding-left: 30px; gap: 40px; margin-top: 60px; }\r\n    .pipeline-track { top: 0; bottom: 0; left: 24px; width: 2px; height: auto; }\r\n    .pipeline-fill { top: 0; left: 24px; width: 2px; height: 0%; will-change: height; }\r\n    .pipeline-node { width: 100%; flex-direction: row; gap: 30px; opacity: 0.3; transform: translateX(-20px); }\r\n    .node-point { margin-bottom: 0; }\r\n    .pipeline-node.is-active { transform: translateX(0); }\r\n  }\r\n\r\n  @media (max-width: 640px) {\r\n    .bento-grid { grid-template-columns: 1fr; }\r\n    .bento-item:nth-child(n) { grid-column: span 1; }\r\n    .partner-criteria { grid-template-columns: 1fr; }\r\n  }\r\n<\/style>\r\n\r\n<div id=\"esg-collab-wrapper\">\r\n\r\n  <section class=\"section-pad esg-intro\">\r\n    <div class=\"badge-tag esg-reveal\">CORPORATE ESG<\/div>\r\n    \r\n    <h2 class=\"intro-title esg-reveal\" style=\"transition-delay: 0.1s;\">\u70ba\u4ec0\u9ebc\u4f01\u696d\u9700\u8981\u5236\u5ea6\u5316\u5584\u884c<\/h2>\r\n    <p class=\"intro-desc esg-reveal\" style=\"transition-delay: 0.2s;\">\r\n      \u73fe\u4eca ESG \u5831\u544a\u5df2\u6210\u70ba\u4f01\u696d\u5fc5\u8981\u9805\u76ee \u4f46\u591a\u6578\u4f01\u696d\u7f3a\u4e4f\u53ef\u8ffd\u6eaf\u8207\u6a19\u6e96\u5316\u7cfb\u7d71 \u5584\u5faa\u74b0\u5354\u6703\u70ba\u6b64\u63d0\u4f9b\u5b8c\u6574\u89e3\u65b9\r\n    <\/p>\r\n\r\n    <div class=\"bento-grid esg-reveal\" style=\"transition-delay: 0.3s;\">\r\n      \r\n      <div class=\"bento-item js-hologram\">\r\n        <div class=\"bento-content\">\r\n          <div class=\"bento-icon\">\ud83d\udcd0<\/div>\r\n          <div class=\"bento-title\">\u4efb\u52d9\u8a2d\u8a08\u6a19\u6e96<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"bento-item js-hologram\">\r\n        <div class=\"bento-content\">\r\n          <div class=\"bento-icon\">\ud83d\udc65<\/div>\r\n          <div class=\"bento-title\">\u54e1\u5de5\u53c3\u8207\u5236\u5ea6<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"bento-item js-hologram\">\r\n        <div class=\"bento-content\">\r\n          <div class=\"bento-icon\">\ud83d\udd12<\/div>\r\n          <div class=\"bento-title\">\u6578\u64da\u7ba1\u7406\u898f\u7bc4<\/div>\r\n        <\/div>\r\n      <\/div>\r\n      \r\n      <div class=\"bento-item js-hologram\">\r\n        <div class=\"bento-content\">\r\n          <div class=\"bento-icon\">\ud83d\udcc8<\/div>\r\n          <div class=\"bento-title\">\u5f71\u97ff\u529b\u5831\u544a\u67b6\u69cb<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad pipeline-section\">\r\n    <div class=\"badge-tag esg-reveal\">COOPERATION PROCESS<\/div>\r\n    <h2 class=\"intro-title esg-reveal\" style=\"margin-bottom: 0;\">\u5408\u4f5c\u6d41\u7a0b<\/h2>\r\n    \r\n    <div class=\"pipeline-wrap\" id=\"js-pipeline-wrap\">\r\n      <div class=\"pipeline-track\"><\/div>\r\n      <div class=\"pipeline-fill\" id=\"js-pipeline-line\"><\/div>\r\n\r\n      <div class=\"pipeline-node js-pipeline-node esg-reveal\">\r\n        <div class=\"node-point\">01<\/div>\r\n        <div class=\"node-text\">\u9700\u6c42\u8a2a\u8ac7<\/div>\r\n      <\/div>\r\n      <div class=\"pipeline-node js-pipeline-node esg-reveal\">\r\n        <div class=\"node-point\">02<\/div>\r\n        <div class=\"node-text\">\u4efb\u52d9\u8a2d\u8a08<\/div>\r\n      <\/div>\r\n      <div class=\"pipeline-node js-pipeline-node esg-reveal\">\r\n        <div class=\"node-point\">03<\/div>\r\n        <div class=\"node-text\">\u5236\u5ea6\u5c0e\u5165<\/div>\r\n      <\/div>\r\n      <div class=\"pipeline-node js-pipeline-node esg-reveal\">\r\n        <div class=\"node-point\">04<\/div>\r\n        <div class=\"node-text\">\u6578\u64da\u8ffd\u8e64<\/div>\r\n      <\/div>\r\n      <div class=\"pipeline-node js-pipeline-node esg-reveal\">\r\n        <div class=\"node-point\">05<\/div>\r\n        <div class=\"node-text\">\u5e74\u5ea6\u5831\u544a<\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"section-pad partner-section\">\r\n    <div class=\"partner-split\">\r\n      \r\n      <div class=\"partner-content\">\r\n        <div class=\"badge-tag esg-reveal\">BECOME A PARTNER<\/div>\r\n        <h2 class=\"esg-reveal\" style=\"transition-delay: 0.1s;\">\u6210\u70ba\u5584\u4f01\u696d<\/h2>\r\n        <p class=\"esg-reveal\" style=\"transition-delay: 0.2s;\">\r\n          \u82e5\u8cb4\u55ae\u4f4d\u9858\u610f\u63d0\u4f9b\u53ef\u514c\u63db\u4e4b\u516c\u76ca\u53cb\u5584\u670d\u52d9 \u53ef\u7533\u8acb\u6210\u70ba\u5584\u4f01\u696d\u5925\u4f34 \u8207\u6211\u5011\u5171\u540c\u64f4\u5927\u793e\u6703\u5f71\u97ff\u529b\r\n        <\/p>\r\n        <div class=\"esg-reveal\" style=\"transition-delay: 0.3s;\">\r\n          <a href=\"[REPLACE_URL_HERE]\" class=\"btn-tactile\"><span>\u7533\u8acb\u6210\u70ba\u5925\u4f34<\/span><\/a>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"partner-criteria\">\r\n        <div class=\"criteria-badge esg-reveal\">\r\n          <div class=\"check-icon\">\u2714<\/div>\r\n          <div class=\"criteria-text\">\u5408\u6cd5\u767b\u8a18<\/div>\r\n        <\/div>\r\n        <div class=\"criteria-badge esg-reveal\" style=\"transition-delay: 0.1s;\">\r\n          <div class=\"check-icon\">\u2714<\/div>\r\n          <div class=\"criteria-text\">\u670d\u52d9\u54c1\u8cea\u8a8d\u8b49<\/div>\r\n        <\/div>\r\n        <div class=\"criteria-badge esg-reveal\" style=\"transition-delay: 0.2s;\">\r\n          <div class=\"check-icon\">\u2714<\/div>\r\n          <div class=\"criteria-text\">\u7b26\u5408\u516c\u76ca\u7cbe\u795e<\/div>\r\n        <\/div>\r\n        <div class=\"criteria-badge esg-reveal\" style=\"transition-delay: 0.3s;\">\r\n          <div class=\"check-icon\">\u2714<\/div>\r\n          <div class=\"criteria-text\">\u540c\u610f\u900f\u660e\u539f\u5247<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    function initESGInteractions() {\r\n      const isEditor = document.body.classList.contains('elementor-editor-active');\r\n      const isDesktop = window.innerWidth > 1024;\r\n\r\n      \/\/ 1. \u6efe\u52d5\u9032\u5834\u52d5\u756b\r\n      const reveals = document.querySelectorAll('#esg-collab-wrapper .esg-reveal');\r\n      if (isEditor) {\r\n        reveals.forEach(el => el.classList.add('is-visible'));\r\n      } else {\r\n        const observer = new IntersectionObserver((entries, obs) => {\r\n          entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n              entry.target.classList.add('is-visible');\r\n              obs.unobserve(entry.target);\r\n            }\r\n          });\r\n        }, { threshold: 0.15 });\r\n        reveals.forEach(el => observer.observe(el));\r\n      }\r\n\r\n      \/\/ 2. Bento Box \u6e38\u6a19\u5168\u606f\u5149\u6688 (Holographic Hover)\r\n      const bentoItems = document.querySelectorAll('.js-hologram');\r\n      if (window.matchMedia(\"(pointer: fine)\").matches && !isEditor) {\r\n        bentoItems.forEach(item => {\r\n          item.addEventListener('mousemove', (e) => {\r\n            const rect = item.getBoundingClientRect();\r\n            const x = e.clientX - rect.left;\r\n            const y = e.clientY - rect.top;\r\n            item.style.setProperty('--mouse-x', `${x}px`);\r\n            item.style.setProperty('--mouse-y', `${y}px`);\r\n          });\r\n        });\r\n      }\r\n\r\n      \/\/ 3. Pipeline \u5408\u4f5c\u6d41\u7a0b\u96d9\u5411\u80fd\u91cf\u7ba1\u7dda (Bi-directional Pipeline Scroll)\r\n      const pipeWrap = document.getElementById('js-pipeline-wrap');\r\n      const pipeLine = document.getElementById('js-pipeline-line');\r\n      const pipeNodes = document.querySelectorAll('.js-pipeline-node');\r\n\r\n      if (!isEditor && pipeWrap && pipeLine) {\r\n        let ticking = false;\r\n\r\n        function updatePipeline() {\r\n          const windowHeight = window.innerHeight;\r\n          const wrapRect = pipeWrap.getBoundingClientRect();\r\n          \r\n          \/\/ \u8a2d\u5b9a\u89f8\u767c\u7dda (\u87a2\u5e55 60% \u8655)\r\n          const triggerPoint = windowHeight * 0.6;\r\n          \r\n          \/\/ \u8a08\u7b97\u6efe\u52d5\u9032\u5ea6\r\n          let progress = (triggerPoint - wrapRect.top) \/ wrapRect.height;\r\n          progress = Math.max(0, Math.min(1, progress));\r\n          const pct = progress * 100;\r\n\r\n          \/\/ \u96fb\u8166\u7248\u756b\u5bec\u5ea6(\u6c34\u5e73)\uff0c\u624b\u6a5f\u7248\u756b\u9ad8\u5ea6(\u5782\u76f4)\r\n          if (isDesktop) {\r\n            pipeLine.style.width = `${pct}%`;\r\n          } else {\r\n            pipeLine.style.height = `${pct}%`;\r\n          }\r\n\r\n          \/\/ \u5224\u65b7\u7bc0\u9ede\u662f\u5426\u88ab\u7ba1\u7dda\u80fd\u91cf\u8986\u84cb\u800c\u89e3\u9396\r\n          pipeNodes.forEach((node) => {\r\n            const nodeRect = node.getBoundingClientRect();\r\n            let nodeTriggerPos;\r\n            \r\n            if (isDesktop) {\r\n              \/\/ \u96fb\u8166\u7248\u5224\u65b7\u6c34\u5e73\u4e2d\u5fc3\u9ede\u662f\u5426\u5728\u586b\u5145\u5bec\u5ea6\u5167\r\n              \/\/ \u900f\u904e\u8a08\u7b97\u7bc0\u9ede\u5728\u5bb9\u5668\u5167\u7684\u76f8\u5c0d X \u4f4d\u7f6e\r\n              const relativeX = nodeRect.left + (nodeRect.width \/ 2) - wrapRect.left;\r\n              const currentLineWidth = wrapRect.width * progress;\r\n              if (relativeX < currentLineWidth) {\r\n                node.classList.add('is-active');\r\n              } else {\r\n                node.classList.remove('is-active');\r\n              }\r\n            } else {\r\n              \/\/ \u624b\u6a5f\u7248\u5224\u65b7\u5782\u76f4\u4e2d\u5fc3\u9ede\u662f\u5426\u8d85\u904e\u89f8\u767c\u7dda\r\n              const nodeCenterY = nodeRect.top + (nodeRect.height \/ 2);\r\n              if (nodeCenterY < triggerPoint) {\r\n                node.classList.add('is-active');\r\n              } else {\r\n                node.classList.remove('is-active');\r\n              }\r\n            }\r\n          });\r\n          \r\n          ticking = false;\r\n        }\r\n\r\n        window.addEventListener('scroll', () => {\r\n          if (!ticking) {\r\n            window.requestAnimationFrame(updatePipeline);\r\n            ticking = true;\r\n          }\r\n        });\r\n        \r\n        \/\/ \u76e3\u807d\u8996\u7a97\u5927\u5c0f\u6539\u8b8a\uff0c\u91cd\u7f6e\u7ba1\u7dda\u6a23\u5f0f\u907f\u514d\u932f\u4e82\r\n        window.addEventListener('resize', () => {\r\n          if (window.innerWidth > 1024) { pipeLine.style.height = '2px'; } \r\n          else { pipeLine.style.width = '2px'; }\r\n          updatePipeline();\r\n        });\r\n\r\n        updatePipeline();\r\n      }\r\n\r\n      \/\/ Elementor \u9632\u5446\r\n      if (isEditor && pipeLine) {\r\n        if (isDesktop) pipeLine.style.width = '100%';\r\n        else pipeLine.style.height = '100%';\r\n        pipeNodes.forEach(node => node.classList.add('is-active'));\r\n      }\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initESGInteractions);\r\n    } else {\r\n      initESGInteractions();\r\n    }\r\n  })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f3f67dc e-flex e-con-boxed e-con e-parent\" data-id=\"f3f67dc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6078d29 elementor-widget elementor-widget-html\" data-id=\"6078d29\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<style>\r\n  \/* =========================================\r\n     \u5168\u5c40\u8b8a\u6578 & \u52a0\u5165\u6211\u5011 \u5c08\u5c6c\u6a23\u5f0f\r\n     ========================================= *\/\r\n  #join-us-wrapper {\r\n    --bg-color: #ffffff;\r\n    --text-primary: #09090b;\r\n    --text-secondary: #71717a;\r\n    --accent-color: #059669;\r\n    --accent-glow: rgba(5, 150, 105, 0.15);\r\n    --border-color: rgba(9, 9, 11, 0.08);\r\n    --grid-pattern: rgba(9, 9, 11, 0.02);\r\n    \r\n    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);\r\n    --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);\r\n    \r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    color: var(--text-primary);\r\n    background-color: transparent;\r\n    background-image: \r\n      linear-gradient(to right, var(--grid-pattern) 1px, transparent 1px),\r\n      linear-gradient(to bottom, var(--grid-pattern) 1px, transparent 1px);\r\n    background-size: 60px 60px;\r\n    margin: 0; padding: 0;\r\n    line-height: 1.6;\r\n    width: 100%;\r\n  }\r\n\r\n  #join-us-wrapper * { box-sizing: border-box; }\r\n  #join-us-wrapper h2, #join-us-wrapper h3, #join-us-wrapper p { margin: 0; }\r\n  #join-us-wrapper a { text-decoration: none; }\r\n\r\n  .aww-reveal {\r\n    opacity: 0; transform: translateY(50px);\r\n    transition: opacity 1.2s var(--ease-smooth), transform 1.2s var(--ease-smooth);\r\n    will-change: transform, opacity;\r\n  }\r\n  .aww-reveal.is-visible { opacity: 1; transform: translateY(0); }\r\n\r\n  .section-pad { padding: 150px 5vw; max-width: 1400px; margin: 0 auto; text-align: center; }\r\n\r\n  .section-badge {\r\n    display: inline-block; padding: 8px 24px; border: 1px solid var(--border-color);\r\n    border-radius: 100px; font-size: 0.85rem; font-weight: 800; color: var(--accent-color);\r\n    background: rgba(5, 150, 105, 0.05); letter-spacing: 0.15em; margin-bottom: 40px; text-transform: uppercase;\r\n  }\r\n\r\n  .title-elegant {\r\n    font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 900; line-height: 1.2;\r\n    letter-spacing: 0.02em; color: var(--text-primary); margin-bottom: 30px;\r\n  }\r\n\r\n  \/* \u4e92\u65a5\u5c0d\u7126\u5361\u7247 (Focus Shift UI) *\/\r\n  .join-grid {\r\n    display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 80px;\r\n  }\r\n\r\n  .join-grid:hover .join-card { opacity: 0.3; filter: grayscale(100%); transform: scale(0.98); }\r\n  \r\n  .join-card {\r\n    background: #ffffff; border: 1px solid var(--border-color); border-radius: 32px;\r\n    padding: 80px 60px; display: flex; flex-direction: column; justify-content: space-between;\r\n    transition: all 0.6s var(--ease-spring); cursor: pointer; text-align: left;\r\n    box-shadow: 0 10px 40px rgba(0,0,0,0.02);\r\n  }\r\n\r\n  .join-grid .join-card:hover {\r\n    opacity: 1; filter: grayscale(0%); transform: scale(1.02) translateY(-10px);\r\n    border-color: rgba(5, 150, 105, 0.4); box-shadow: 0 40px 80px rgba(5, 150, 105, 0.1);\r\n  }\r\n\r\n  .join-type { font-family: monospace; font-size: 1.1rem; font-weight: 800; color: var(--accent-color); letter-spacing: 0.2em; margin-bottom: 24px; display: block; }\r\n  .join-card h3 { font-size: 2.8rem; font-weight: 900; color: var(--text-primary); margin-bottom: 24px; }\r\n  .join-card p { font-size: 1.25rem; color: var(--text-secondary); line-height: 1.8; margin-bottom: 60px; }\r\n\r\n  .btn-cyber {\r\n    display: inline-flex; justify-content: center; align-items: center;\r\n    padding: 24px 48px; font-size: 1.25rem; font-weight: 800; color: #ffffff;\r\n    background: var(--text-primary); border-radius: 100px; position: relative; overflow: hidden;\r\n    transition: all 0.4s var(--ease-spring); align-self: flex-start;\r\n  }\r\n  .btn-cyber::after {\r\n    content: ''; position: absolute; inset: 0; background: var(--accent-color);\r\n    transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 0;\r\n  }\r\n  .btn-cyber span { position: relative; z-index: 1; transition: transform 0.4s var(--ease-spring); }\r\n  .btn-cyber:hover { transform: translateY(-4px); box-shadow: 0 20px 40px var(--accent-glow); }\r\n  .btn-cyber:hover::after { transform: scaleY(1); }\r\n  .btn-cyber:hover span { transform: scale(1.05); }\r\n\r\n  @media (max-width: 1024px) {\r\n    .section-pad { padding: 100px 5vw; }\r\n    .join-grid { grid-template-columns: 1fr; gap: 40px; }\r\n    .join-grid:hover .join-card { opacity: 1; filter: grayscale(0%); transform: none; }\r\n    .join-card { padding: 50px 30px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\"join-us-wrapper\">\r\n\r\n  <section class=\"section-pad\" id=\"join\">\r\n    <div class=\"section-badge aww-reveal\">JOIN US<\/div>\r\n    <h2 class=\"title-elegant aww-reveal\" style=\"transition-delay: 0.1s;\">\u52a0\u5165\u6211\u5011<\/h2>\r\n\r\n    <div class=\"join-grid\">\r\n      \r\n      <div class=\"join-card aww-reveal\" style=\"transition-delay: 0.2s;\">\r\n        <div>\r\n          <span class=\"join-type\">INDIVIDUAL<\/span>\r\n          <h3>\u500b\u4eba\u52a0\u5165<\/h3>\r\n          <p>\u7acb\u5373\u7533\u8acb\u6210\u70ba\u5584\u5faa\u74b0\u6703\u54e1 \u53c3\u8207\u7cbe\u9078\u4efb\u52d9\u4e26\u7d2f\u7a4d\u5c08\u5c6c\u5584\u9ede \u8b93\u60a8\u7684\u6bcf\u4e00\u4efd\u5fc3\u529b\u8f49\u5316\u70ba\u5be6\u8cea\u7684\u672a\u4f86\u4fdd\u969c<\/p>\r\n        <\/div>\r\n        <a href=\"[REPLACE_URL_HERE]\" class=\"btn-cyber\"><span>\u7533\u8acb\u500b\u4eba\u6703\u54e1<\/span><\/a>\r\n      <\/div>\r\n\r\n      <div class=\"join-card aww-reveal\" style=\"transition-delay: 0.3s;\">\r\n        <div>\r\n          <span class=\"join-type\">CORPORATE<\/span>\r\n          <h3>\u4f01\u696d\u5408\u4f5c<\/h3>\r\n          <p>\u8207\u6211\u5011\u5171\u540c\u5efa\u7acb\u5236\u5ea6\u5316 ESG \u5584\u884c\u5e73\u53f0 \u91cf\u5316\u4f01\u696d\u5f71\u97ff\u529b \u6253\u9020\u5c08\u5c6c\u54e1\u5de5\u5fd7\u5de5\u5236\u5ea6 \u5171\u5275\u6c38\u7e8c\u793e\u6703\u50f9\u503c<\/p>\r\n        <\/div>\r\n        <a href=\"[REPLACE_URL_HERE]\" class=\"btn-cyber\"><span>\u7533\u8acb\u4f01\u696d\u5408\u4f5c<\/span><\/a>\r\n      <\/div>\r\n\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n  (function() {\r\n    function initJoinUs() {\r\n      const isEditor = document.body.classList.contains('elementor-editor-active');\r\n      const reveals = document.querySelectorAll('#join-us-wrapper .aww-reveal');\r\n      \r\n      if (isEditor) {\r\n        reveals.forEach(el => el.classList.add('is-visible'));\r\n        return;\r\n      }\r\n      \r\n      const observer = new IntersectionObserver((entries, obs) => {\r\n        entries.forEach(entry => {\r\n          if (entry.isIntersecting) {\r\n            entry.target.classList.add('is-visible');\r\n            obs.unobserve(entry.target);\r\n          }\r\n        });\r\n      }, { threshold: 0.15 });\r\n      reveals.forEach(el => observer.observe(el));\r\n    }\r\n\r\n    if (document.readyState === 'loading') {\r\n      document.addEventListener('DOMContentLoaded', initJoinUs);\r\n    } else {\r\n      initJoinUs();\r\n    }\r\n  })();\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-e1929ac e-flex e-con-boxed e-con e-parent\" data-id=\"e1929ac\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-21b4574 elementor-widget elementor-widget-html\" data-id=\"21b4574\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"zh-TW\">\r\n<head>\r\n<style>\r\n  \/* =========================================\r\n     \u95dc\u65bc\u6211\u5011 Footer - \u96b1\u79c1\u4fdd\u8b77\u8207\u8df3\u8f49\u512a\u5316\u7248\r\n     ========================================= *\/\r\n  #about-footer {\r\n    background: #022c22; \/* \u6df1\u5ea6\u68ee\u6797\u7da0\uff0c\u53d6\u4ee3\u7d14\u9ed1 *\/\r\n    color: #ffffff;\r\n    padding: 100px 5vw 40px;\r\n    font-family: 'Noto Sans TC', -apple-system, sans-serif;\r\n    border-top: 1px solid rgba(5, 150, 105, 0.2);\r\n  }\r\n\r\n  .footer-container { \r\n    max-width: 1300px; \r\n    margin: 0 auto; \r\n    display: grid; \r\n    grid-template-columns: 1fr 1fr; \r\n    gap: 80px; \r\n  }\r\n\r\n  .footer-col h3 { \r\n    font-size: 0.9rem; \r\n    color: #059669; \r\n    font-weight: 800; \r\n    letter-spacing: 0.2em; \r\n    margin-bottom: 40px; \r\n    text-transform: uppercase;\r\n  }\r\n  \r\n  \/* \u4e92\u52d5\u9023\u7d50\u6e05\u55ae *\/\r\n  .jump-list {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 24px;\r\n  }\r\n\r\n  .jump-item { \r\n    font-size: clamp(1.4rem, 2.2vw, 2.2rem); \r\n    font-weight: 700; \r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); \r\n    display: flex;\r\n    align-items: center;\r\n    gap: 16px;\r\n    width: fit-content;\r\n  }\r\n\r\n  \/* \u78c1\u5438\u5411\u53f3\u6ed1\u52d5\u6548\u679c *\/\r\n  .jump-item:hover { \r\n    color: #10b981; \r\n    transform: translateX(15px); \r\n  }\r\n\r\n  .jump-item span {\r\n    font-size: 1rem;\r\n    color: #059669;\r\n    opacity: 0.6;\r\n    font-family: monospace;\r\n  }\r\n\r\n  \/* \u793e\u7fa4\u77e9\u9663\u6309\u9215 *\/\r\n  .social-matrix {\r\n    display: flex;\r\n    gap: 16px;\r\n    margin-top: 40px;\r\n    flex-wrap: wrap;\r\n  }\r\n\r\n  .matrix-btn {\r\n    color: #ffffff;\r\n    text-decoration: none;\r\n    font-size: 0.95rem;\r\n    font-weight: 800;\r\n    padding: 12px 28px;\r\n    border: 1px solid rgba(255,255,255,0.15);\r\n    border-radius: 100px;\r\n    transition: all 0.3s ease;\r\n    background: rgba(255,255,255,0.03);\r\n  }\r\n\r\n  .matrix-btn:hover {\r\n    background: #059669;\r\n    border-color: #059669;\r\n    transform: translateY(-5px);\r\n    box-shadow: 0 10px 20px rgba(5, 150, 105, 0.2);\r\n  }\r\n\r\n  \/* \u6cd5\u5f8b\u8072\u660e\u7d42\u7aef\u98a8\u683c *\/\r\n  .legal-terminal { \r\n    background: rgba(255,255,255,0.03); \r\n    border: 1px solid rgba(255,255,255,0.1); \r\n    border-radius: 24px; \r\n    padding: 40px; \r\n  }\r\n\r\n  .legal-lbl { \r\n    color: #059669; \r\n    font-weight: 900; \r\n    margin-bottom: 12px; \r\n    display: block; \r\n    font-family: monospace;\r\n    letter-spacing: 0.1em;\r\n  }\r\n\r\n  .legal-txt { \r\n    color: #9ca3af; \r\n    font-size: 1rem; \r\n    line-height: 1.8; \r\n    margin-bottom: 30px; \r\n    font-weight: 500;\r\n  }\r\n  \r\n  .copyright { \r\n    border-top: 1px solid rgba(255,255,255,0.05); \r\n    margin-top: 80px; \r\n    padding-top: 40px; \r\n    text-align: center; \r\n    color: #4b5563; \r\n    font-size: 0.85rem; \r\n    letter-spacing: 0.1em; \r\n    font-weight: 600;\r\n  }\r\n\r\n  @media (max-width: 992px) {\r\n    .footer-container { grid-template-columns: 1fr; gap: 60px; }\r\n    .jump-item { font-size: 1.6rem; }\r\n    .social-matrix { gap: 12px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<footer id=\"about-footer\">\r\n  <div class=\"footer-container\">\r\n    \r\n    <div class=\"footer-col\">\r\n      <h3>\u806f\u7d61\u8207\u652f\u6301 \/ CONTACT<\/h3>\r\n      <div class=\"jump-list\">\r\n        \r\n        <a href=\"https:\/\/www.google.com\/maps\/search\/?api=1&query=\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703\" target=\"_blank\" class=\"jump-item\">\r\n          <span>GO_<\/span> \u524d\u5f80\u5354\u6703\u5730\u5740\r\n        <\/a>\r\n        \r\n        <a href=\"tel:0968539089\" class=\"jump-item\">\r\n          <span>CALL_<\/span> \u64a5\u6253\u806f\u7e6b\u96fb\u8a71\r\n        <\/a>\r\n        \r\n        <a href=\"mailto:rexlin323@gmail.com\" class=\"jump-item\">\r\n          <span>MAIL_<\/span> \u767c\u9001\u96fb\u5b50\u90f5\u4ef6\r\n        <\/a>\r\n      <\/div>\r\n\r\n      <div class=\"social-matrix\">\r\n        <a href=\"[FB_URL]\" target=\"_blank\" class=\"matrix-btn\">FACEBOOK<\/a>\r\n        <a href=\"[LINE_URL]\" target=\"_blank\" class=\"matrix-btn\">LINE\u5b98\u65b9\u5e33\u865f<\/a>\r\n        <a href=\"[IG_URL]\" target=\"_blank\" class=\"matrix-btn\">INSTAGRAM<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"footer-col\">\r\n      <h3>\u6cd5\u5f8b\u8207\u898f\u7bc4 \/ LEGAL<\/h3>\r\n      <div class=\"legal-terminal\">\r\n        \r\n        <div class=\"legal-item\">\r\n          <span class=\"legal-lbl\">> \u975e\u71df\u5229\u8072\u660e_<\/span>\r\n          <div class=\"legal-txt\">\r\n            \u672c\u5354\u6703\u70ba\u4f9d\u6cd5\u6210\u7acb\u4e4b\u793e\u5718\u6cd5\u4eba\u3002\u6240\u6709\u5584\u9ede\u6578\u4e0d\u5177\u73fe\u91d1\u6027\u8cea\uff0c\u4e0d\u69cb\u6210\u91d1\u878d\u5546\u54c1\u3001\u4fdd\u96aa\u5951\u7d04\u6216\u6295\u8cc7\u9080\u7d04\u3002\r\n          <\/div>\r\n        <\/div>\r\n        \r\n        <div class=\"legal-item\">\r\n          <span class=\"legal-lbl\">> \u500b\u8cc7\u8207\u96b1\u79c1_<\/span>\r\n          <div class=\"legal-txt\">\r\n            \u56b4\u683c\u9075\u5b88\u500b\u8cc7\u6cd5\u76f8\u95dc\u898f\u5b9a\uff0c\u60a8\u7684\u500b\u4eba\u884c\u52d5\u6578\u64da\u50c5\u7528\u65bc\u5f71\u97ff\u529b\u7d00\u9304\u8207\u9ede\u6578\u6838\u767c\uff0c\u7d55\u4e0d\u5c0d\u5916\u6d29\u6f0f\u3002\r\n          <\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n  <div class=\"copyright\">\r\n    \u00a9 2026 \u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703. ALL RIGHTS RESERVED.\r\n  <\/div>\r\n<\/footer>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u4ec0\u9ebc\u662f\u5584\u5faa\u74b0? \u4efb\u52d9\u5e73\u53f0 \u6703\u54e1\u5236\u5ea6 \u52a0\u5165\u6211\u5011 \u4ec0\u9ebc\u662f\u5584\u5faa\u74b0? \u4efb\u52d9\u5e73\u53f0 \u6703\u54e1\u5236\u5ea6 \u52a0\u5165\u6211\u5011 \u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - \u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kindnessbank.org\/\" \/>\n<meta property=\"og:locale\" content=\"zh_TW\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - \u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703\" \/>\n<meta property=\"og:description\" content=\"\u4ec0\u9ebc\u662f\u5584\u5faa\u74b0? \u4efb\u52d9\u5e73\u53f0 \u6703\u54e1\u5236\u5ea6 \u52a0\u5165\u6211\u5011 \u4ec0\u9ebc\u662f\u5584\u5faa\u74b0? \u4efb\u52d9\u5e73\u53f0 \u6703\u54e1\u5236\u5ea6 \u52a0\u5165\u6211\u5011 \u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703 [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kindnessbank.org\/\" \/>\n<meta property=\"og:site_name\" content=\"\u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-24T11:31:12+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kindnessbank.org\/wp-content\/uploads\/2026\/03\/Group-255-scaled.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1344\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u9810\u4f30\u95b1\u8b80\u6642\u9593\" \/>\n\t<meta name=\"twitter:data1\" content=\"66 \u5206\u9418\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kindnessbank.org\/\",\"url\":\"https:\/\/kindnessbank.org\/\",\"name\":\"Home - \u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703\",\"isPartOf\":{\"@id\":\"https:\/\/kindnessbank.org\/#website\"},\"datePublished\":\"2026-03-03T09:51:41+00:00\",\"dateModified\":\"2026-03-24T11:31:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/kindnessbank.org\/#breadcrumb\"},\"inLanguage\":\"zh-TW\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kindnessbank.org\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kindnessbank.org\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kindnessbank.org\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kindnessbank.org\/#website\",\"url\":\"https:\/\/kindnessbank.org\/\",\"name\":\"\u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703\",\"description\":\"\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703 - \u8b93\u6bcf\u4e00\u4efd\u5584\u610f\u90fd\u80fd\u88ab\u770b\u898b\",\"alternateName\":\"\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kindnessbank.org\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-TW\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - \u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kindnessbank.org\/","og_locale":"zh_TW","og_type":"article","og_title":"Home - \u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703","og_description":"\u4ec0\u9ebc\u662f\u5584\u5faa\u74b0? \u4efb\u52d9\u5e73\u53f0 \u6703\u54e1\u5236\u5ea6 \u52a0\u5165\u6211\u5011 \u4ec0\u9ebc\u662f\u5584\u5faa\u74b0? \u4efb\u52d9\u5e73\u53f0 \u6703\u54e1\u5236\u5ea6 \u52a0\u5165\u6211\u5011 \u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703 [&hellip;]","og_url":"https:\/\/kindnessbank.org\/","og_site_name":"\u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703","article_modified_time":"2026-03-24T11:31:12+00:00","og_image":[{"width":2560,"height":1344,"url":"https:\/\/kindnessbank.org\/wp-content\/uploads\/2026\/03\/Group-255-scaled.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"\u9810\u4f30\u95b1\u8b80\u6642\u9593":"66 \u5206\u9418"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/kindnessbank.org\/","url":"https:\/\/kindnessbank.org\/","name":"Home - \u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703","isPartOf":{"@id":"https:\/\/kindnessbank.org\/#website"},"datePublished":"2026-03-03T09:51:41+00:00","dateModified":"2026-03-24T11:31:12+00:00","breadcrumb":{"@id":"https:\/\/kindnessbank.org\/#breadcrumb"},"inLanguage":"zh-TW","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kindnessbank.org\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/kindnessbank.org\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kindnessbank.org\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/kindnessbank.org\/#website","url":"https:\/\/kindnessbank.org\/","name":"\u793e\u5718\u6cd5\u4eba\u4e2d\u83ef\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703","description":"\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703 - \u8b93\u6bcf\u4e00\u4efd\u5584\u610f\u90fd\u80fd\u88ab\u770b\u898b","alternateName":"\u5584\u5faa\u74b0\u6c38\u7e8c\u767c\u5c55\u5354\u6703","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kindnessbank.org\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-TW"}]}},"_links":{"self":[{"href":"https:\/\/kindnessbank.org\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindnessbank.org\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kindnessbank.org\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kindnessbank.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindnessbank.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/kindnessbank.org\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":87,"href":"https:\/\/kindnessbank.org\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/87"}],"wp:attachment":[{"href":"https:\/\/kindnessbank.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}