Universal Header (Fixed Paths)<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<style>\r\n \/* =============================== *\/\r\n \/* 1. \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* =============================== *\/\r\n :root {\r\n --header-height: 70px;\r\n --primary-blue: #1E4BAF;\r\n --primary-gradient: linear-gradient(135deg, #1E4BAF 0%, #3B82F6 100%);\r\n --text-dark: #0F172A;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n --border-glass: rgba(226, 232, 240, 0.8);\r\n --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n margin: 0;\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n padding-top: var(--header-height);\r\n background-color: #F5F7FF;\r\n }\r\n\r\n \/* =============================== *\/\r\n \/* 2. Header \u6a23\u5f0f *\/\r\n \/* =============================== *\/\r\n .site-header {\r\n position: fixed; top: 0; left: 0; width: 100%;\r\n height: var(--header-height);\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border-bottom: 1px solid var(--border-glass);\r\n z-index: 1000;\r\n box-shadow: var(--shadow-header);\r\n }\r\n\r\n .header-container {\r\n max-width: 1320px; \r\n margin: 0 auto; \r\n padding: 0 24px;\r\n height: 100%;\r\n display: flex; \r\n align-items: center; \r\n justify-content: space-between;\r\n }\r\n\r\n \/* Logo *\/\r\n .logo-link {\r\n display: flex; align-items: center; text-decoration: none;\r\n height: 100%; flex-shrink: 0; margin-right: 40px;\r\n }\r\n \r\n .site-logo {\r\n display: block;\r\n max-height: 40px; \r\n width: auto;\r\n object-fit: contain;\r\n }\r\n\r\n \/* \u5c0e\u822a\u9078\u55ae\u5bb9\u5668 *\/\r\n .main-nav { \r\n display: flex; \r\n align-items: center; \r\n height: 100%; \r\n gap: 30px; \/* \u589e\u52a0\u6587\u5b57\u9078\u55ae\u8207\u793e\u7fa4icon\u7684\u9593\u8ddd *\/\r\n }\r\n\r\n \/* \u6587\u5b57\u5217\u8868 *\/\r\n .nav-list {\r\n display: flex; list-style: none; gap: 20px; margin: 0; padding: 0;\r\n align-items: center;\r\n }\r\n\r\n .nav-item a {\r\n text-decoration: none;\r\n font-size: 15px; font-weight: 600; color: var(--text-dark);\r\n padding: 8px 12px; border-radius: 6px;\r\n transition: all 0.2s ease; white-space: nowrap; position: relative;\r\n }\r\n\r\n .nav-item a:not(.btn-cta):hover { color: var(--primary-blue); }\r\n .nav-item a:not(.btn-cta):::after {\r\n content: ''; position: absolute; bottom: 0; left: 50%;\r\n width: 0; height: 2px; background: var(--primary-gradient);\r\n transition: 0.3s; transform: translateX(-50%);\r\n }\r\n .nav-item a:not(.btn-cta):hover::after { width: 80%; }\r\n\r\n \/* CTA \u6309\u9215 *\/\r\n .btn-cta {\r\n padding: 8px 20px !important;\r\n background: var(--primary-gradient); color: #fff !important;\r\n border-radius: 50px;\r\n box-shadow: 0 4px 10px rgba(30, 75, 175, 0.2);\r\n display: flex; align-items: center; gap: 6px;\r\n }\r\n .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(30, 75, 175, 0.3); filter: brightness(1.1); }\r\n\r\n \/* =============================== *\/\r\n \/* 3. \u793e\u7fa4\u5716\u793a\u6a23\u5f0f (\u65b0\u589e\u90e8\u5206) *\/\r\n \/* =============================== *\/\r\n .social-icons {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n padding-left: 10px;\r\n border-left: 1px solid rgba(0,0,0,0.1); \/* \u52a0\u4e0a\u5206\u9694\u7dda *\/\r\n }\r\n\r\n .social-link {\r\n color: var(--text-dark);\r\n font-size: 18px;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-decoration: none;\r\n }\r\n\r\n .social-link:hover {\r\n color: var(--primary-blue);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* \u624b\u6a5f\u7248\u6f22\u5821\u6309\u9215 *\/\r\n .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1002;}\r\n .hamburger-icon { width: 24px; height: 2px; background: var(--text-dark); position: relative; transition: 0.3s; }\r\n .hamburger-icon::before, .hamburger-icon::after {\r\n content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--text-dark); transition: 0.3s;\r\n }\r\n .hamburger-icon::before { top: -8px; }\r\n .hamburger-icon::after { top: 8px; }\r\n .mobile-menu-btn.active .hamburger-icon { background: transparent; }\r\n .mobile-menu-btn.active .hamburger-icon::before { top: 0; transform: rotate(45deg); }\r\n .mobile-menu-btn.active .hamburger-icon::after { top: 0; transform: rotate(-45deg); }\r\n\r\n \/* RWD \u624b\u6a5f\u7248\u8abf\u6574 *\/\r\n @media (max-width: 1100px) {\r\n .mobile-menu-btn { display: block; }\r\n .main-nav {\r\n position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;\r\n background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(15px);\r\n flex-direction: column; justify-content: center; padding: 40px;\r\n transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n z-index: 1001; box-shadow: -5px 0 20px rgba(0,0,0,0.05);\r\n gap: 30px; \/* \u589e\u52a0\u5340\u584a\u9593\u8ddd *\/\r\n }\r\n .main-nav.active { right: 0; }\r\n .nav-list { flex-direction: column; gap: 24px; text-align: center; width: 100%; }\r\n .nav-item a { font-size: 20px; font-weight: 700; display: block; padding: 10px; }\r\n .btn-cta { width: 100%; justify-content: center; margin-top: 10px; padding: 15px !important; font-size: 18px !important; }\r\n\r\n \/* \u624b\u6a5f\u7248\u793e\u7fa4\u5716\u793a\u8abf\u6574 *\/\r\n .social-icons {\r\n border-left: none; \/* \u624b\u6a5f\u7248\u79fb\u9664\u5206\u9694\u7dda *\/\r\n border-top: 1px solid rgba(0,0,0,0.1); \/* \u6539\u70ba\u4e0a\u65b9\u5206\u9694\u7dda *\/\r\n padding-left: 0;\r\n padding-top: 25px;\r\n margin-top: 10px;\r\n width: 100%;\r\n justify-content: center; \/* \u7f6e\u4e2d *\/\r\n gap: 25px; \/* \u62c9\u5927\u5716\u793a\u9593\u8ddd\u65b9\u4fbf\u9ede\u64ca *\/\r\n }\r\n .social-link {\r\n font-size: 24px; \/* \u624b\u6a5f\u7248\u653e\u5927 icon *\/\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header class=\"site-header\">\r\n <div class=\"header-container\">\r\n \r\n <a href=\"\/index.html\" class=\"logo-link\">\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2025\/12\/cropped-cropped-\u6cdb\u6d77\u5546\u5b78\u9662-2.png\" \r\n alt=\"\u6cdb\u6d77\u5546\u5b78\u9662\" \r\n class=\"site-logo\"\r\n style=\"max-height: 40px;\">\r\n <\/a>\r\n\r\n <button class=\"mobile-menu-btn\" aria-label=\"Menu\">\r\n <div class=\"hamburger-icon\"><\/div>\r\n <\/button>\r\n\r\n <nav class=\"main-nav\">\r\n <ul class=\"nav-list\">\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"\/index.html\" onclick=\"closeMenu()\">\u5546\u5b78\u9662<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/finhive.academy\/?page_id=385\" onclick=\"closeMenu()\">\u8ab2\u7a0b\u5831\u540d<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/finhive.academy\/?page_id=155#press\" onclick=\"closeMenu()\">\u5a92\u9ad4\u5831\u5c0e<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"\/creator.html#creator\" onclick=\"closeMenu()\">\u5275\u4f5c\u8005\u8a08\u756b<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/line.me\/\" target=\"_blank\" class=\"btn-cta\">\r\n Line \u5b98\u65b9\u7fa4 \u279c\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"social-icons\">\r\n <a href=\"https:\/\/www.facebook.com\/profile.php?id=61585585437851\" target=\"_blank\" class=\"social-link\" aria-label=\"Facebook\">\r\n <i class=\"fa-brands fa-facebook\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/finhive_academy\/\" target=\"_blank\" class=\"social-link\" aria-label=\"Instagram\">\r\n <i class=\"fa-brands fa-instagram\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.threads.com\/@finhive_academy\" target=\"_blank\" class=\"social-link\" aria-label=\"Threads\">\r\n <i class=\"fa-brands fa-threads\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.tiktok.com\/@finhive_academy\" target=\"_blank\" class=\"social-link\" aria-label=\"TikTok\">\r\n <i class=\"fa-brands fa-tiktok\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.youtube.com\/channel\/UCcg-XPvwxAkVTshONMVreDA\" target=\"_blank\" class=\"social-link\" aria-label=\"YouTube\">\r\n <i class=\"fa-brands fa-youtube\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <\/div>\r\n<\/header>\r\n\r\n<script>\r\n const menuBtn = document.querySelector('.mobile-menu-btn');\r\n const mainNav = document.querySelector('.main-nav');\r\n \r\n \/\/ \u5207\u63db\u9078\u55ae\r\n menuBtn.addEventListener('click', () => {\r\n menuBtn.classList.toggle('active');\r\n mainNav.classList.toggle('active');\r\n document.body.style.overflow = mainNav.classList.contains('active') ? 'hidden' : '';\r\n });\r\n\r\n \/\/ \u9ede\u64ca\u5f8c\u95dc\u9589 (\u624b\u6a5f\u7248\u7528)\r\n function closeMenu() {\r\n menuBtn.classList.remove('active');\r\n mainNav.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n<\/script>\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<div class=\"elementor-element elementor-element-7fa88e2 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"7fa88e2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90aa501 elementor-widget elementor-widget-html\" data-id=\"90aa501\" data-element_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>Hero - Clean Version<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --white: #FFFFFF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-light: #EFF6FF;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n line-height: 1.6;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- \u80cc\u666f\u88dd\u98fe --- *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);\r\n }\r\n \r\n .ambient-light {\r\n position: absolute; width: 800px; height: 800px;\r\n background: radial-gradient(circle, rgba(96, 165, 250, 0.15) 0%, transparent 70%);\r\n top: -20%; right: -10%; z-index: -1;\r\n animation: breath-light 8s infinite ease-in-out;\r\n pointer-events: none;\r\n }\r\n @keyframes breath-light { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.5; } }\r\n\r\n \/* ======================= *\/\r\n \/* Hero \u5340\u584a\u4f48\u5c40 *\/\r\n \/* ======================= *\/\r\n .hero-section {\r\n position: relative;\r\n min-height: 100vh;\r\n padding: 80px 6%;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n\r\n .hero-container {\r\n max-width: 1280px; width: 100%;\r\n display: grid;\r\n grid-template-columns: 1.1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u5de6\u5074\uff1a\u6587\u6848\u5340 *\/\r\n \/* ======================= *\/\r\n .hero-content {\r\n position: relative; z-index: 10;\r\n display: flex; flex-direction: column; align-items: flex-start;\r\n animation: fade-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\r\n opacity: 0; transform: translateY(20px);\r\n }\r\n @keyframes fade-up { to { opacity: 1; transform: translateY(0); } }\r\n\r\n .hero-h1 {\r\n font-size: 64px; font-weight: 900; line-height: 1.15;\r\n color: var(--blue-dark); margin-bottom: 24px; letter-spacing: -2px;\r\n }\r\n .text-gradient {\r\n background: linear-gradient(135deg, var(--blue-main) 0%, #3B82F6 50%, #2563EB 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n display: inline-block;\r\n }\r\n \r\n .hero-h2 {\r\n font-size: 20px; font-weight: 500; color: var(--text-sub);\r\n margin-bottom: 40px; display: flex; flex-direction: column; gap: 16px;\r\n }\r\n .check-item { display: flex; align-items: center; gap: 12px; }\r\n .check-icon {\r\n color: var(--blue-main); font-size: 16px;\r\n background: #fff; border: 1px solid rgba(37, 99, 235, 0.2);\r\n box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);\r\n border-radius: 50%; width: 28px; height: 28px;\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* CTA \u5340\u57df *\/\r\n .cta-wrapper { display: flex; flex-direction: column; align-items: flex-start; }\r\n \r\n .hero-btn {\r\n position: relative; padding: 22px 56px;\r\n background: linear-gradient(135deg, var(--blue-main), #2563EB);\r\n color: #fff; font-size: 20px; font-weight: 700;\r\n border-radius: 16px; text-decoration: none;\r\n box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);\r\n transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;\r\n }\r\n .hero-btn:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(37, 99, 235, 0.5); }\r\n .hero-btn::after {\r\n content: \"\"; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: skewX(-20deg); animation: shine-btn 4s infinite;\r\n }\r\n @keyframes shine-btn { 0% { left: -100%; } 20% { left: 150%; } 100% { left: 150%; } }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* \u53f3\u5074\uff1a\u8996\u89ba\u7cfb\u7d71 *\/\r\n \/* ======================= *\/\r\n .hero-visual {\r\n position: relative;\r\n display: flex; justify-content: center; align-items: center;\r\n perspective: 1000px;\r\n animation: fade-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;\r\n opacity: 0; transform: translateY(20px);\r\n }\r\n\r\n .flow-container {\r\n position: relative; width: 100%; max-width: 460px; height: 460px;\r\n }\r\n\r\n \/* SVG \u9023\u7dda (z-index: 0 \u5728\u4e0b\u5c64) *\/\r\n .flow-line-svg {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: 0; pointer-events: none; overflow: visible;\r\n }\r\n .flow-path {\r\n stroke: var(--blue-main); stroke-width: 2; stroke-dasharray: 8 8;\r\n fill: none; opacity: 0.3;\r\n animation: dash-flow 2s linear infinite;\r\n }\r\n @keyframes dash-flow { to { stroke-dashoffset: -100; } }\r\n\r\n \/* \u73bb\u7483\u5361\u7247 (z-index: 2 \u5728\u4e0a\u5c64) *\/\r\n .flow-card {\r\n position: absolute;\r\n background: #fff; \/* \u4e0d\u900f\u660e\u80cc\u666f\uff0c\u906e\u4f4f\u7dda\u689d *\/\r\n border: 1px solid rgba(255,255,255,0.9);\r\n border-radius: 24px;\r\n padding: 24px;\r\n box-shadow: \r\n 0 20px 40px -10px rgba(30, 75, 175, 0.1),\r\n inset 0 0 0 1px rgba(255, 255, 255, 0.5);\r\n display: flex; flex-direction: column; align-items: center; text-align: center;\r\n width: 170px;\r\n z-index: 2;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .flow-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 30px 60px -12px rgba(30, 75, 175, 0.2);\r\n z-index: 10;\r\n }\r\n\r\n \/* \u5361\u7247\u5b9a\u4f4d *\/\r\n .card-1 { bottom: 40px; left: 0; animation: float-1 6s infinite ease-in-out; }\r\n .card-2 { \r\n top: 50%; left: 50%; transform: translate(-50%, -50%); \r\n width: 210px; padding: 32px 20px;\r\n background: linear-gradient(135deg, #fff, #F0F9FF);\r\n border-color: rgba(191, 219, 254, 0.6);\r\n box-shadow: 0 25px 50px -10px rgba(37, 99, 235, 0.15);\r\n animation: float-2 7s infinite ease-in-out; \r\n z-index: 5;\r\n }\r\n .card-3 { top: 40px; right: 0; background: #FFFBEB; border-color: rgba(253, 230, 138, 0.5); animation: float-3 8s infinite ease-in-out; }\r\n\r\n .card-icon { font-size: 32px; margin-bottom: 10px; }\r\n .card-txt { font-size: 15px; font-weight: 700; color: var(--text-dark); }\r\n .card-sub { font-size: 12px; color: var(--text-sub); }\r\n\r\n @keyframes float-1 { 0%,100%{transform: translateY(0);} 50%{transform: translateY(-12px);} }\r\n @keyframes float-2 { 0%,100%{transform: translate(-50%, -50%);} 50%{transform: translate(-50%, -56%);} }\r\n @keyframes float-3 { 0%,100%{transform: translateY(0);} 50%{transform: translateY(12px);} }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* Mobile RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .hero-section {\r\n padding: 100px 24px 60px;\r\n min-height: auto; align-items: flex-start;\r\n }\r\n .hero-container {\r\n display: flex; flex-direction: column; gap: 60px;\r\n }\r\n \r\n .hero-content { width: 100%; text-align: center; align-items: center; }\r\n .hero-h1 { font-size: 42px; line-height: 1.2; }\r\n .hero-h2 { align-items: flex-start; text-align: left; }\r\n .cta-wrapper { align-items: center; width: 100%; }\r\n .hero-btn { width: 100%; justify-content: center; max-width: 320px; }\r\n\r\n .hero-visual { width: 100%; margin-top: 10px; }\r\n \r\n .flow-container {\r\n display: flex; flex-direction: column; align-items: center;\r\n height: auto; gap: 40px; margin: 0 auto;\r\n }\r\n\r\n .flow-card {\r\n position: relative; \r\n top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;\r\n transform: none !important;\r\n width: 100%; max-width: 220px;\r\n animation: none;\r\n background: #fff; \r\n }\r\n \r\n \/* \u624b\u6a5f\u7248\u932f\u4f4d\u6d6e\u52d5 *\/\r\n .card-1 { transform: translateX(-20px); animation: mob-float 4s infinite ease-in-out; }\r\n .card-2 { transform: translateX(0); z-index: 10; animation: mob-float 4s infinite ease-in-out 1s; width: 240px; }\r\n .card-3 { transform: translateX(20px); animation: mob-float 4s infinite ease-in-out 2s; }\r\n\r\n @keyframes mob-float {\r\n 0%, 100% { transform: translateY(0) translateX(var(--tx)); }\r\n 50% { transform: translateY(-8px) translateX(var(--tx)); }\r\n }\r\n .card-1 { --tx: -20px; } .card-2 { --tx: 0px; } .card-3 { --tx: 20px; }\r\n\r\n \/* SVG \u7dda\u689d\u8abf\u6574 *\/\r\n .pc-curve { display: none; }\r\n .mob-line { display: block; stroke: var(--blue-main); stroke-width: 2; stroke-dasharray: 6 4; opacity: 0.3; }\r\n \r\n \/* \u624b\u6a5f\u7248\u7dda\u689d\u4f4d\u7f6e\u8abf\u6574 *\/\r\n .flow-line-svg { \r\n width: 4px; left: 50%; transform: translateX(-50%);\r\n z-index: -1; \r\n }\r\n }\r\n \r\n @media (min-width: 901px) { .mob-line { display: none; } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n <div class=\"ambient-light\"><\/div>\r\n\r\n <section class=\"hero-section\">\r\n <div class=\"hero-container\">\r\n \r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-h1\">\r\n <span class=\"text-gradient\">\u9748\u8b58\u89ba\u9192\u8ab2\u7a0b<\/span><br>\r\n \u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1\r\n <\/h1>\r\n \r\n <div class=\"hero-h2\">\r\n <div class=\"check-item\">\r\n <div class=\"check-icon\">\u2713<\/div>\r\n <span>\u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u5efa\u7acb\u7a69\u5b9a\u8f38\u51fa\u7684\u8077\u5834\u7bc0\u594f<\/span>\r\n <\/div>\r\n <div class=\"check-item\">\r\n <div class=\"check-icon\">\u2713<\/div>\r\n <span>\u4e0d\u518d\u5f37\u8feb\u63a8\u92b7\uff0c\u7528\u9ad8\u4fe1\u4efb\u611f\u81ea\u7136\u653e\u5927\u6210\u4ea4<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-wrapper\">\r\n <a href=\"#course-details\" class=\"hero-btn\">\r\n \u4e86\u89e3\u9748\u8b58\u89ba\u9192\u8ab2\u7a0b \r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual\">\r\n <div class=\"flow-container\">\r\n \r\n <svg class=\"flow-line-svg\">\r\n <path class=\"flow-path pc-curve\" d=\"M80 340 Q 150 300, 210 200 T 340 60\" \/>\r\n <line class=\"flow-path mob-line\" x1=\"2\" y1=\"0\" x2=\"2\" y2=\"400\" \/>\r\n <\/svg>\r\n\r\n <div class=\"flow-card card-1\">\r\n <div class=\"card-icon\">\ud83d\udc41\ufe0f<\/div>\r\n <div class=\"card-txt\">\u89ba\u5bdf\u5347\u7d1a<\/div>\r\n <div class=\"card-sub\">Inner Awareness<\/div>\r\n <\/div>\r\n\r\n <div class=\"flow-card card-2\">\r\n <div class=\"card-icon\">\ud83d\udd0b<\/div>\r\n <div class=\"card-txt\" style=\"color:var(--blue-main); font-size:18px;\">\u72c0\u614b\u6821\u6e96<\/div>\r\n <div class=\"card-sub\">State Alignment<\/div>\r\n <\/div>\r\n\r\n <div class=\"flow-card card-3\">\r\n <div class=\"card-icon\">\ud83d\udc8e<\/div>\r\n <div class=\"card-txt\">\u5916\u5728\u6210\u679c<\/div>\r\n <div class=\"card-sub\">Real Impact<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\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<div class=\"elementor-element elementor-element-6e2c114 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"6e2c114\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8a1849e elementor-widget elementor-widget-html\" data-id=\"8a1849e\" data-element_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>Pain Points - Creative Cluster<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u4fdd\u6301\u4e00\u81f4) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u73bb\u7483\u8b8a\u6578 *\/\r\n --glass-bg: rgba(255, 255, 255, 0.8);\r\n --glass-border: rgba(255, 255, 255, 0.9);\r\n --shadow-sm: 0 10px 30px -10px rgba(30, 75, 175, 0.15);\r\n --shadow-lg: 0 30px 60px -15px rgba(30, 75, 175, 0.25), inset 0 0 0 1px rgba(255,255,255,0.8);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* \u80cc\u666f\u5149\u6688\u8ecc\u8de1 (\u589e\u52a0\u9023\u7d50\u611f) *\/\r\n .orbit-trace {\r\n position: absolute; top: 50%; left: 50%;\r\n width: 80%; height: 400px;\r\n transform: translate(-50%, -30%) rotate(-10deg);\r\n background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.1) 0%, transparent 70%);\r\n border-radius: 50%;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5340\u584a *\/\r\n \/* ======================= *\/\r\n .pain-section {\r\n position: relative; padding: 140px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n min-height: 800px; \/* \u78ba\u4fdd\u6709\u8db3\u5920\u7a7a\u9593\u5c55\u793a\u61f8\u6d6e *\/\r\n }\r\n\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 60px;\r\n position: relative; z-index: 2;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .highlight {\r\n position: relative; display: inline-block;\r\n background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(255, 220, 100, 0.5) 40%);\r\n padding: 0 8px;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u5275\u65b0\uff1a\u975e\u5c0d\u7a31\u61f8\u6d6e\u96c6\u7fa4 *\/\r\n \/* ======================= *\/\r\n .cluster-container {\r\n position: relative;\r\n display: flex; justify-content: center; align-items: center;\r\n width: 100%; max-width: 1100px;\r\n height: 500px; \/* \u7d66\u4e88\u8db3\u5920\u7684\u6d3b\u52d5\u7a7a\u9593 *\/\r\n \/* \u555f\u7528 3D \u8996\u89d2 *\/\r\n perspective: 1000px;\r\n }\r\n\r\n \/* \u6838\u5fc3\u6a21\u7d44 (The Module) *\/\r\n .cluster-module {\r\n position: absolute; \/* \u4f7f\u7528\u7d55\u5c0d\u5b9a\u4f4d\u4f86\u9054\u6210\u91cd\u758a *\/\r\n width: 360px;\r\n padding: 40px 32px;\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 32px;\r\n text-align: center;\r\n box-shadow: var(--shadow-sm);\r\n \/* \u95dc\u9375\u8f49\u5834\u8a2d\u5b9a\uff1a\u8c9d\u8332\u66f2\u7dda\u8b93\u79fb\u52d5\u66f4\u6709\u7269\u7406\u611f *\/\r\n transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);\r\n cursor: default;\r\n }\r\n\r\n \/* --- \u521d\u59cb\u975e\u5c0d\u7a31\u4f48\u5c40 (The Setup) --- *\/\r\n\r\n \/* \u5de6\u5074\u5361\u7247\uff1a\u5411\u5de6\u50be\u659c\uff0c\u4e0b\u6c89\uff0c\u5c64\u7d1a\u4f4e *\/\r\n .module-left {\r\n left: 5%; bottom: 10%;\r\n transform: rotate(-5deg) translateZ(0);\r\n z-index: 1;\r\n }\r\n\r\n \/* \u4e2d\u9593\u5361\u7247\uff1a\u8b8a\u5927\uff0c\u4e0a\u6d6e\uff0c\u5c64\u7d1a\u9ad8 (\u8996\u89ba\u6838\u5fc3) *\/\r\n .module-center {\r\n left: 50%; top: 5%;\r\n \/* \u4f7f\u7528 translate3d \u7f6e\u4e2d\u4e26\u653e\u5927 *\/\r\n transform: translate3d(-50%, 0, 50px) scale(1.1);\r\n z-index: 2;\r\n box-shadow: var(--shadow-lg); \/* \u4e2d\u9593\u9810\u8a2d\u9670\u5f71\u5c31\u6bd4\u8f03\u91cd *\/\r\n border-color: rgba(30, 75, 175, 0.2);\r\n }\r\n\r\n \/* \u53f3\u5074\u5361\u7247\uff1a\u5411\u53f3\u50be\u659c\uff0c\u4e0b\u6c89\uff0c\u5c64\u7d1a\u4f4e *\/\r\n .module-right {\r\n right: 5%; bottom: 10%;\r\n transform: rotate(5deg) translateZ(0);\r\n z-index: 1;\r\n }\r\n\r\n\r\n \/* --- \u95dc\u9375\u4e92\u52d5\uff1a\u805a\u7126\u6a21\u5f0f (Focus Mode) --- *\/\r\n\r\n \/* \u7576\u6ed1\u9f20\u79fb\u5230\u4efb\u4e00\u5361\u7247\u4e0a\u6642 *\/\r\n .cluster-module:hover {\r\n z-index: 10; \/* \u78ba\u4fdd\u88ab hover \u7684\u5361\u7247\u6c38\u9060\u5728\u6700\u4e0a\u9762 *\/\r\n \/* \u6b78\u4f4d\uff1a\u65cb\u8f49\u6b78\u96f6\uff0c\u653e\u5927\uff0c\u6d6e\u8d77 *\/\r\n transform: rotate(0deg) scale(1.15) translateZ(100px) !important;\r\n box-shadow: var(--shadow-lg);\r\n background: #fff; \/* \u8b8a\u4eae *\/\r\n border-color: var(--blue-main);\r\n }\r\n\r\n \/* \u9ad8\u7d1a\u6280\u5de7\uff1a\u7576 hover \u5bb9\u5668\u6642\uff0c\u8b93\u300c\u6c92\u6709\u88ab hover\u300d\u7684\u5361\u7247\u9000\u5f8c\u8b8a\u6a21\u7cca *\/\r\n \/* \u6ce8\u610f\uff1a\u9019\u9700\u8981\u700f\u89bd\u5668\u652f\u63f4 :has() \u9009\u62e9\u5668\uff0c\u73fe\u4ee3\u700f\u89bd\u5668\u5927\u591a\u652f\u6301\uff0c\u4e0d\u652f\u63f4\u5247\u53ea\u6703\u986f\u793a\u4e0a\u9762\u7684 hover \u6548\u679c *\/\r\n .cluster-container:has(.cluster-module:hover) .cluster-module:not(:hover) {\r\n opacity: 0.6;\r\n filter: blur(2px);\r\n transform: scale(0.95) translateZ(-50px); \/* \u9000\u5f8c\u7e2e\u5c0f *\/\r\n }\r\n\r\n\r\n \/* --- \u5167\u5bb9\u6a23\u5f0f --- *\/\r\n .icon-stage {\r\n width: 72px; height: 72px;\r\n background: linear-gradient(135deg, #EFF6FF, #FFFFFF);\r\n border-radius: 20px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 32px; margin: 0 auto 24px;\r\n box-shadow: inset 0 0 0 1px #fff, 0 10px 20px -5px rgba(30, 75, 175, 0.1);\r\n }\r\n .card-title {\r\n font-size: 20px; font-weight: 800; color: var(--blue-dark); margin-bottom: 12px;\r\n }\r\n .card-desc {\r\n font-size: 15px; color: var(--text-sub); line-height: 1.7;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u7d50\u8ad6\u5340 *\/\r\n \/* ======================= *\/\r\n .conclusion-wrap {\r\n margin-top: 60px; text-align: center; z-index: 2;\r\n position: relative;\r\n }\r\n .conclusion-text { font-size: 20px; color: var(--text-dark); margin-bottom: 8px; }\r\n .conclusion-big {\r\n font-size: 36px; font-weight: 900;\r\n background: linear-gradient(90deg, var(--blue-dark), var(--blue-main));\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 1024px) {\r\n .pain-section { padding: 100px 5%; min-height: auto; }\r\n .cluster-container {\r\n height: auto; flex-direction: column; gap: 30px; \/* \u624b\u6a5f\u7248\u6539\u56de\u5782\u76f4\u5806\u758a *\/\r\n perspective: none; \/* \u624b\u6a5f\u7248\u95dc\u9589\u8907\u96dc 3D *\/\r\n }\r\n .cluster-module {\r\n position: relative; \/* \u53d6\u6d88\u7d55\u5c0d\u5b9a\u4f4d *\/\r\n width: 100%; max-width: 400px;\r\n left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;\r\n transform: none !important; \/* \u91cd\u7f6e\u6240\u6709\u8b8a\u5f62 *\/\r\n margin: 0 auto;\r\n }\r\n \/* \u624b\u6a5f\u7248\u7c21\u55ae\u7684 Hover *\/\r\n .cluster-module:hover {\r\n transform: translateY(-10px) !important;\r\n }\r\n .main-title { font-size: 32px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n <div class=\"orbit-trace\"><\/div>\r\n\r\n <section class=\"pain-section\">\r\n \r\n <div class=\"section-header\">\r\n <h2 class=\"main-title\">\r\n \u4f60\u4e0d\u662f\u4e0d\u5920\u52aa\u529b\uff0c<br>\r\n \u800c\u662f\u9084\u6c92\u6709 <span class=\"highlight\">\u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"cluster-container\">\r\n \r\n <div class=\"cluster-module module-left\">\r\n <div class=\"icon-stage\">\ud83d\udcc9<\/div>\r\n <h3 class=\"card-title\">\u696d\u7e3e\u8207\u8868\u73fe\u4e0d\u7a69\u5b9a<\/h3>\r\n <p class=\"card-desc\">\r\n \u660e\u660e\u6295\u5165\u5f88\u591a\u6642\u9593\u8207\u5fc3\u529b\uff0c\u751a\u81f3\u6bd4\u5225\u4eba\u66f4\u62fc\u547d\uff0c\u5728\u92b7\u552e\u8207\u8077\u5834\u4e0a\u7684\u7d50\u679c\u537b\u59cb\u7d42\u4e0d\u5982\u9810\u671f\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"cluster-module module-center\">\r\n <div class=\"icon-stage\">\ud83c\udf2a\ufe0f<\/div>\r\n <h3 class=\"card-title\">\u6301\u7e8c\u5167\u8017\u8207\u7126\u616e<\/h3>\r\n <p class=\"card-desc\">\r\n \u5e38\u5e38\u5728\u5de5\u4f5c\u4e2d\u61f7\u7591\u81ea\u5df1\uff0c\u72c0\u614b\u5ffd\u9ad8\u5ffd\u4f4e\uff0c\u7e3d\u662f\u5728\u76f8\u4f3c\u7684\u60c5\u7dd2\u8207\u6163\u6027\u5361\u9ede\u88e1\u53cd\u8986\u6d88\u8017\u80fd\u91cf\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"cluster-module module-right\">\r\n <div class=\"icon-stage\">\ud83e\udd10<\/div>\r\n <h3 class=\"card-title\">\u50f9\u503c\u7121\u6cd5\u88ab\u770b\u898b<\/h3>\r\n <p class=\"card-desc\">\r\n \u61c2\u5c08\u696d\u3001\u80af\u505a\u4e8b\uff0c\u537b\u5e38\u5e38\u5361\u5728\u4e0d\u6562\u958b\u53e3\u8207\u63a8\u9032\u95dc\u4fc2\uff0c\u4e0d\u77e5\u9053\u5982\u4f55\u5efa\u7acb\u4fe1\u4efb\u611f\u8207\u500b\u4eba\u5f71\u97ff\u529b\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"conclusion-wrap\">\r\n <p class=\"conclusion-text\">\u771f\u6b63\u62c9\u958b\u5dee\u8ddd\u7684\uff0c\u5f80\u5f80\u4e0d\u662f\u76f2\u76ee\u52aa\u529b...<\/p>\r\n <h3 class=\"conclusion-big\">\u800c\u662f\u5148\u6821\u6e96\u81ea\u5df1\uff0c\u518d\u653e\u5927\u6210\u679c<\/h3>\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-ff66df8 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"ff66df8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-978cd6e elementor-widget elementor-widget-html\" data-id=\"978cd6e\" data-element_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>Course Positioning - Clean Blueprint<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-light: #EFF6FF;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --red-error: #EF4444;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u73bb\u7483\u8cea\u611f *\/\r\n --glass-panel: rgba(255, 255, 255, 0.75);\r\n --glass-border: rgba(255, 255, 255, 0.8);\r\n --shadow-elevation: 0 25px 50px -12px rgba(30, 75, 175, 0.15);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .positioning-section {\r\n position: relative;\r\n padding: 120px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 60px;\r\n position: relative; z-index: 2;\r\n }\r\n .kicker {\r\n font-size: 14px; font-weight: 700; color: var(--text-sub); letter-spacing: 2px;\r\n text-transform: uppercase; margin-bottom: 12px; display: block;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .main-title .strike {\r\n text-decoration: line-through; text-decoration-color: var(--red-error);\r\n text-decoration-thickness: 3px; color: var(--text-sub); opacity: 0.6;\r\n }\r\n .main-title .highlight {\r\n color: var(--blue-main);\r\n background: linear-gradient(120deg, transparent 0%, transparent 60%, rgba(59, 130, 246, 0.1) 60%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u7cfb\u7d71\u67b6\u69cb\u5361 (The Blueprint Card) *\/\r\n \/* ======================= *\/\r\n .blueprint-card {\r\n position: relative;\r\n width: 100%; max-width: 1000px;\r\n background: var(--glass-panel);\r\n backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 40px;\r\n box-shadow: var(--shadow-elevation);\r\n display: grid;\r\n grid-template-columns: 1fr 1px 1.2fr; \/* \u5de6-\u5206\u9694\u7dda-\u53f3 *\/\r\n overflow: hidden;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .blueprint-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 40px 80px -20px rgba(30, 75, 175, 0.2);\r\n }\r\n\r\n \/* \u5206\u9694\u7dda *\/\r\n .divider {\r\n background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent);\r\n width: 1px; height: 100%;\r\n }\r\n\r\n \/* --- \u5de6\u5074\uff1a\u96dc\u8a0a\u5340 --- *\/\r\n .zone-noise {\r\n padding: 60px 40px;\r\n background: rgba(241, 245, 249, 0.5);\r\n display: flex; flex-direction: column; justify-content: center; gap: 30px;\r\n }\r\n \r\n .noise-item {\r\n display: flex; align-items: center; gap: 16px;\r\n opacity: 0.6; transition: all 0.3s;\r\n }\r\n .blueprint-card:hover .noise-item { opacity: 0.4; filter: grayscale(1); transform: translateX(-10px); }\r\n\r\n .cross-icon {\r\n width: 32px; height: 32px; border-radius: 50%;\r\n background: rgba(239, 68, 68, 0.1); color: var(--red-error);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px; flex-shrink: 0;\r\n }\r\n \r\n .noise-text h4 { font-size: 18px; font-weight: 700; color: var(--text-sub); margin-bottom: 4px; text-decoration: line-through; }\r\n .noise-text p { font-size: 14px; color: #94A3B8; }\r\n\r\n\r\n \/* --- \u53f3\u5074\uff1a\u6838\u5fc3\u5340 --- *\/\r\n .zone-core {\r\n padding: 60px 50px;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(239, 246, 255, 0.6));\r\n display: flex; flex-direction: column; justify-content: center;\r\n position: relative;\r\n }\r\n \r\n \/* \u6838\u5fc3\u80cc\u666f\u52d5\u614b *\/\r\n .core-pulse {\r\n position: absolute; top: 50%; right: -100px; width: 300px; height: 300px;\r\n background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);\r\n border-radius: 50%; pointer-events: none;\r\n animation: pulse-blue 4s infinite;\r\n }\r\n @keyframes pulse-blue { 0%,100%{transform:scale(1); opacity:0.5;} 50%{transform:scale(1.2); opacity:0.8;} }\r\n\r\n .core-item {\r\n display: flex; align-items: flex-start; gap: 20px;\r\n position: relative; z-index: 2;\r\n }\r\n\r\n .check-ring {\r\n width: 48px; height: 48px; border-radius: 50%;\r\n background: var(--blue-main);\r\n color: #fff;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 24px;\r\n box-shadow: 0 10px 20px rgba(30, 75, 175, 0.2);\r\n flex-shrink: 0;\r\n animation: float-icon 3s ease-in-out infinite;\r\n }\r\n @keyframes float-icon { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }\r\n\r\n .core-text h3 { font-size: 24px; font-weight: 800; color: var(--blue-dark); margin-bottom: 12px; }\r\n .core-text p { font-size: 16px; color: var(--text-sub); line-height: 1.7; margin-bottom: 24px; }\r\n \r\n \/* \u6d41\u7a0b\u5716\u793a *\/\r\n .mini-flow {\r\n display: flex; align-items: center; gap: 10px;\r\n margin-top: 20px;\r\n }\r\n .flow-node {\r\n padding: 6px 12px; background: #fff; border: 1px solid var(--blue-light);\r\n border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--blue-main);\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\r\n }\r\n .flow-arrow { color: var(--blue-main); font-size: 12px; }\r\n\r\n\r\n \/* --- \u5e95\u90e8\uff1a\u95dc\u9375\u53e5 (\u7c21\u5316\u7248) --- *\/\r\n .key-output {\r\n grid-column: 1 \/ -1; \/* \u8de8\u8d8a\u5169\u6b04 *\/\r\n background: var(--blue-dark);\r\n padding: 24px;\r\n text-align: center;\r\n position: relative; overflow: hidden;\r\n \/* \u79fb\u9664 flex \u8a2d\u5b9a\uff0c\u76f4\u63a5\u7f6e\u4e2d\u6587\u5b57 *\/\r\n }\r\n \r\n \/* \u8f38\u51fa\u689d\u6d41\u5149 *\/\r\n .key-output::before {\r\n content: \"\"; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\r\n animation: shimmer-bar 3s infinite;\r\n }\r\n @keyframes shimmer-bar { 0%{left:-100%;} 100%{left:200%;} }\r\n\r\n .output-text {\r\n font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 1px;\r\n margin: 0; \/* \u79fb\u9664\u9810\u8a2d margin *\/\r\n }\r\n .output-text span { color: #60A5FA; } \/* \u85cd\u8272\u5f37\u8abf *\/\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .blueprint-card { grid-template-columns: 1fr; }\r\n .divider { display: none; }\r\n .zone-noise { padding: 40px 30px; border-bottom: 1px solid rgba(0,0,0,0.05); }\r\n .zone-core { padding: 40px 30px; }\r\n .key-output { padding: 30px 20px; }\r\n .main-title { font-size: 32px; }\r\n .core-text h3 { font-size: 20px; }\r\n .output-text { font-size: 18px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"positioning-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">COURSE POSITIONING<\/span>\r\n <h2 class=\"main-title\">\r\n <span class=\"strike\">\u9019\u4e0d\u662f\u4e00\u5802\u7d14\u7cb9\u7684\u6fc0\u52f5\u8ab2<\/span><br>\r\n \u800c\u662f\u4e00\u5957 <span class=\"highlight\">\u300c\u89ba\u9192\u5f0f\u6210\u9577\u7cfb\u7d71\u300d<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"blueprint-card\">\r\n \r\n <div class=\"zone-noise\">\r\n <div class=\"noise-item\">\r\n <div class=\"cross-icon\">\u2715<\/div>\r\n <div class=\"noise-text\">\r\n <h4>\u4e0d\u8ce3\u7a7a\u6cdb\u7684\u5fc3\u9748\u96de\u6e6f<\/h4>\r\n <p>\u53ea\u8ac7\u6fc0\u52f5\u537b\u7121\u6cd5\u843d\u5730\uff0c\u71b1\u60c5\u5f88\u5feb\u5c31\u6703\u5728\u73fe\u5be6\u4e2d\u6d88\u8017\u6b86\u76e1\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"noise-item\">\r\n <div class=\"cross-icon\">\u2715<\/div>\r\n <div class=\"noise-text\">\r\n <h4>\u4e0d\u6559\u4f60\u5957\u7528\u50f5\u5316\u8a71\u8853<\/h4>\r\n <p>\u786c\u5957\u5225\u4eba\u7684\u6210\u529f\u6a21\u5f0f\uff0c\u53ea\u6703\u8b93\u4f60\u7684\u8868\u9054\u5931\u53bb\u9748\u9b42\u8207\u4fe1\u4efb\u611f\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"divider\"><\/div>\r\n\r\n <div class=\"zone-core\">\r\n <div class=\"core-pulse\"><\/div>\r\n \r\n <div class=\"core-item\">\r\n <div class=\"check-ring\">\u2714<\/div>\r\n <div class=\"core-text\">\r\n <h3>\u91cd\u5efa\u4f60\u7684\u5e95\u5c64\u72c0\u614b<br>\u627e\u56de\u6700\u6709\u529b\u91cf\u7684\u81ea\u5df1<\/h3>\r\n <p>\u6211\u5011\u5148\u5e6b\u4f60\u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u518d\u900f\u904e\u72c0\u614b\u6821\u6e96\u8207\u5929\u8ce6\u8fa8\u8b58\uff0c\u628a\u5167\u5728\u7684\u89ba\u5bdf\u5347\u7d1a\uff0c\u771f\u6b63\u8f49\u5316\u70ba\u5916\u5728\u7684\u5f71\u97ff\u529b\u8207\u6210\u4ea4\u529b\u3002<\/p>\r\n \r\n <div class=\"mini-flow\">\r\n <span class=\"flow-node\">\u89ba\u5bdf\u5347\u7d1a<\/span>\r\n <span class=\"flow-arrow\">\u2794<\/span>\r\n <span class=\"flow-node\">\u72c0\u614b\u6821\u6e96<\/span>\r\n <span class=\"flow-arrow\">\u2794<\/span>\r\n <span class=\"flow-node\">\u6210\u679c\u8f49\u5316<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"key-output\">\r\n <p class=\"output-text\">\u5148\u5c0d\u9f4a\u81ea\u5df1\uff0c<span>\u624d\u80fd\u7a69\u5b9a\u653e\u5927\u7d50\u679c\u3002<\/span><\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-1e7b332 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"1e7b332\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d3f91d elementor-widget elementor-widget-html\" data-id=\"7d3f91d\" data-element_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>Core Transformation - Crystal Engines<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-accent: #3B82F6;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u6c34\u6676\u8cea\u611f\u8b8a\u6578 *\/\r\n --crystal-bg: rgba(255, 255, 255, 0.85);\r\n --crystal-border: rgba(255, 255, 255, 0.9);\r\n --shadow-base: \r\n 0 1px 2px rgba(0,0,0,0.05), \r\n 0 15px 30px -5px rgba(30, 75, 175, 0.1);\r\n --shadow-active: \r\n 0 25px 50px -12px rgba(30, 75, 175, 0.2), \r\n 0 0 0 1px rgba(37, 99, 235, 0.1);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .transform-section {\r\n position: relative;\r\n padding: 120px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 80px;\r\n position: relative; z-index: 2;\r\n }\r\n .kicker {\r\n font-size: 13px; font-weight: 700; color: var(--blue-main); letter-spacing: 1.5px;\r\n text-transform: uppercase; margin-bottom: 16px; display: inline-block;\r\n background: rgba(30, 75, 175, 0.08); padding: 4px 12px; border-radius: 6px;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .title-highlight {\r\n background: linear-gradient(120deg, transparent 0%, transparent 50%, rgba(59, 130, 246, 0.15) 50%);\r\n padding: 0 4px;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e09\u6b04\u6c34\u6676\u6a21\u7d44 (Grid) *\/\r\n \/* ======================= *\/\r\n .engine-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 32px;\r\n width: 100%; max-width: 1200px;\r\n position: relative;\r\n }\r\n\r\n \/* \u9023\u7d50\u7dda (\u80cc\u666f\u88dd\u98fe) *\/\r\n .grid-connector {\r\n position: absolute; top: 50%; left: 0; width: 100%; height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(30, 75, 175, 0.1), transparent);\r\n z-index: -1; transform: translateY(-50%);\r\n }\r\n\r\n \/* \u6c34\u6676\u5361\u7247 (The Crystal Block) *\/\r\n .crystal-card {\r\n position: relative;\r\n background: var(--crystal-bg);\r\n backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--crystal-border);\r\n border-radius: 24px;\r\n padding: 48px 32px;\r\n overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n box-shadow: var(--shadow-base);\r\n \/* \u589e\u52a0\u5e95\u90e8\u539a\u5ea6\u611f *\/\r\n border-bottom: 4px solid rgba(226, 232, 240, 0.6);\r\n cursor: default;\r\n }\r\n\r\n \/* Hover \u72c0\u614b\uff1a\u4e0a\u6d6e + \u767c\u5149 *\/\r\n .crystal-card:hover {\r\n transform: translateY(-12px);\r\n box-shadow: var(--shadow-active);\r\n border-bottom-color: var(--blue-main); \/* \u5e95\u90e8\u8b8a\u85cd *\/\r\n background: #fff;\r\n }\r\n\r\n \/* \u6383\u63cf\u5149\u675f\u7279\u6548 (Scanning Beam) *\/\r\n .crystal-card::after {\r\n content: \"\"; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;\r\n background: var(--blue-main);\r\n box-shadow: 0 0 20px var(--blue-main);\r\n opacity: 0; transition: opacity 0.3s;\r\n }\r\n .crystal-card:hover::after {\r\n animation: scan-up 0.8s ease-out forwards;\r\n opacity: 1;\r\n }\r\n @keyframes scan-up {\r\n 0% { bottom: 0; height: 4px; opacity: 1; }\r\n 100% { bottom: 100%; height: 100px; opacity: 0; }\r\n }\r\n\r\n \/* \u80cc\u666f\u900f\u8996\u6578\u5b57 (Watermark) *\/\r\n .bg-number {\r\n position: absolute; top: 10px; right: 20px;\r\n font-size: 120px; font-weight: 900;\r\n color: rgba(30, 75, 175, 0.03); \/* \u6975\u6de1 *\/\r\n line-height: 1; pointer-events: none;\r\n transition: transform 0.5s ease;\r\n font-family: \"Inter\", sans-serif;\r\n }\r\n .crystal-card:hover .bg-number {\r\n transform: scale(1.1) translateX(-10px);\r\n color: rgba(30, 75, 175, 0.06);\r\n }\r\n\r\n \/* \u5167\u5bb9\u4f48\u5c40 *\/\r\n .card-content { position: relative; z-index: 2; }\r\n\r\n \/* ICON \u8a2d\u8a08 (\u7dda\u689d\u611f + \u5546\u696d\u611f) *\/\r\n .icon-box {\r\n width: 64px; height: 64px;\r\n background: var(--blue-light);\r\n color: var(--blue-main);\r\n border-radius: 16px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 28px; margin-bottom: 24px;\r\n transition: transform 0.4s ease;\r\n }\r\n .crystal-card:hover .icon-box {\r\n transform: scale(1.1) rotate(5deg);\r\n background: var(--blue-main); color: #fff;\r\n box-shadow: 0 10px 20px rgba(30, 75, 175, 0.25);\r\n }\r\n\r\n .card-title {\r\n font-size: 22px; font-weight: 800; color: var(--blue-dark);\r\n margin-bottom: 16px;\r\n }\r\n \r\n .card-desc {\r\n font-size: 16px; color: var(--text-sub); line-height: 1.7;\r\n }\r\n .card-desc span {\r\n display: block; margin-top: 8px; font-size: 14px;\r\n color: var(--blue-accent); font-weight: 600;\r\n opacity: 0.8;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .engine-grid { grid-template-columns: 1fr; gap: 24px; }\r\n .grid-connector { display: none; }\r\n .main-title { font-size: 32px; }\r\n .bg-number { font-size: 100px; right: 10px; }\r\n .crystal-card { padding: 36px 24px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"transform-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">CORE TRANSFORMATION<\/span>\r\n <h2 class=\"main-title\">\r\n \u9019\u5802\u8ab2\uff0c\u5c07\u5e36\u4f60\u5b8c\u6210 <span class=\"title-highlight\">\u4e09\u5927\u6838\u5fc3\u5347\u7d1a<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"engine-grid\">\r\n <div class=\"grid-connector\"><\/div>\r\n\r\n <div class=\"crystal-card\">\r\n <div class=\"bg-number\">01<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"icon-box\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\r\n <\/div>\r\n <h3 class=\"card-title\">\u89ba\u5bdf\u5347\u7d1a<\/h3>\r\n <p class=\"card-desc\">\r\n \u8fa8\u8b58\u5728\u5de5\u4f5c\u8207\u4eba\u969b\u95dc\u4fc2\u4e2d\u7684\u6163\u6027\u5361\u9ede\uff0c\u770b\u898b\u554f\u984c\u6839\u6e90\uff0c\u505c\u6b62\u7121\u6548\u7684\u5167\u8017\u8207\u76f2\u76ee\u52aa\u529b\u3002\r\n <span>Inner Awareness<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"crystal-card\">\r\n <div class=\"bg-number\">02<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"icon-box\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 12h10\"\/><path d=\"M11 5h7\"\/><path d=\"M11 19h7\"\/><path d=\"M5 19L5 5\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"card-title\">\u72c0\u614b\u6821\u6e96<\/h3>\r\n <p class=\"card-desc\">\r\n \u7a69\u5b9a\u5167\u5728\u80fd\u91cf\u3002\u5f9e\u6df7\u4e82\u7684\u601d\u7dd2\u4e2d\u62bd\u96e2\uff0c\u5efa\u7acb\u6e05\u6670\u3001\u7a69\u5b9a\u4e14\u5145\u6eff\u529b\u91cf\u7684\u8077\u5834\u8f38\u51fa\u7bc0\u594f\u3002\r\n <span>State Alignment<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"crystal-card\">\r\n <div class=\"bg-number\">03<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"icon-box\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"card-title\">\u6210\u679c\u653e\u5927<\/h3>\r\n <p class=\"card-desc\">\r\n \u7d50\u5408\u4fe1\u4efb\u611f\u5efa\u7acb\u8207 AI \u79d1\u6280\u8ce6\u80fd\uff0c\u5c07\u7a69\u5b9a\u7684\u5167\u5728\u80fd\u91cf\u81ea\u7136\u8f49\u5316\u70ba\u5916\u5728\u7684\u696d\u7e3e\u8207\u5f71\u97ff\u529b\u3002\r\n <span>Real Impact<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-bb51599 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"bb51599\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f2c3fe elementor-widget elementor-widget-html\" data-id=\"2f2c3fe\" data-element_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>Methodology Core - Consistent Light<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u56b4\u683c\u7dad\u6301\u4e00\u81f4) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF; \/* \u6dfa\u8272\u80cc\u666f *\/\r\n --blue-main: #1E4BAF; \/* \u54c1\u724c\u85cd *\/\r\n --blue-dark: #0F172A; \/* \u6df1\u85cd\u9ed1 (\u6587\u5b57\u7528) *\/\r\n --text-gray: #94A3B8; \/* \u6dfa\u7070 (\u6b21\u8981\u6587\u5b57) *\/\r\n --grid-color: rgba(37, 99, 235, 0.06); \/* \u7db2\u683c\u7dda *\/\r\n --accent-orange: #F97316; \/* \u5f37\u8abf\u8272 *\/\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--blue-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- \u80cc\u666f\u7db2\u683c (\u8207 Hero \u5b8c\u5168\u4e00\u81f4) --- *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .truth-section {\r\n position: relative;\r\n padding: 160px 6%;\r\n min-height: 80vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n \/* \u80cc\u666f\u6f02\u6d6e\u908f\u8f2f\u7b26\u865f (Logic Symbols) *\/\r\n .bg-symbol {\r\n position: absolute;\r\n font-family: \"Courier New\", monospace;\r\n font-weight: 700;\r\n color: var(--blue-main);\r\n opacity: 0.05;\r\n z-index: -1;\r\n user-select: none;\r\n animation: float-symbol 8s infinite ease-in-out;\r\n }\r\n .sym-1 { top: 20%; left: 10%; font-size: 120px; animation-delay: 0s; } \/* \u2260 *\/\r\n .sym-2 { bottom: 15%; right: 10%; font-size: 100px; animation-delay: -4s; } \/* \u2234 *\/\r\n .sym-3 { top: 30%; right: 20%; font-size: 60px; animation-delay: -2s; } \/* \u2211 *\/\r\n \r\n @keyframes float-symbol {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(5deg); }\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u6392\u7248\u8a2d\u8a08 (Typography) *\/\r\n \/* ======================= *\/\r\n \r\n .content-wrap {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1000px;\r\n }\r\n\r\n \/* \u7b2c\u4e00\u53e5\uff1a\u932f\u8aa4\u89c0\u5ff5 (\u5283\u6389 + \u6a21\u7cca) *\/\r\n .text-lie {\r\n font-size: clamp(32px, 4vw, 56px);\r\n font-weight: 700;\r\n color: var(--text-gray); \/* \u6dfa\u7070\u8272 *\/\r\n margin-bottom: 20px;\r\n position: relative;\r\n display: inline-block;\r\n \/* \u521d\u59cb\u6a21\u7cca *\/\r\n filter: blur(0.5px);\r\n transition: all 0.5s ease;\r\n }\r\n \r\n \/* \u7d05\u8272\u522a\u9664\u7dda\u52d5\u756b *\/\r\n .text-lie::after {\r\n content: \"\"; position: absolute; top: 50%; left: 0; width: 0%; height: 3px;\r\n background-color: #EF4444; \/* \u7d05\u8272 *\/\r\n transform: rotate(-2deg);\r\n transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);\r\n opacity: 0.8;\r\n }\r\n \r\n \/* Hover \u89f8\u767c\u522a\u9664\u7dda *\/\r\n .truth-section:hover .text-lie::after { width: 110%; }\r\n .truth-section:hover .text-lie { opacity: 0.5; filter: blur(2px); }\r\n\r\n\r\n \/* \u7b2c\u4e8c\u53e5\uff1a\u6838\u5fc3\u771f\u7406 (\u653e\u5927 + \u805a\u7126) *\/\r\n .text-truth {\r\n font-size: clamp(48px, 6vw, 96px);\r\n font-weight: 900;\r\n color: var(--blue-dark); \/* \u6df1\u85cd\u9ed1\uff0c\u7d55\u5c0d\u6e05\u6670 *\/\r\n line-height: 1.1;\r\n margin-bottom: 60px;\r\n letter-spacing: -2px;\r\n position: relative;\r\n \/* \u521d\u59cb\u72c0\u614b *\/\r\n transform: scale(0.95);\r\n opacity: 0;\r\n animation: reveal-truth 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;\r\n }\r\n\r\n @keyframes reveal-truth {\r\n to { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n \/* \u95dc\u9375\u5b57\uff1a\u6703\u7528 AI \u7684\u4f60 -> \u5148\u6821\u6e96\u72c0\u614b\u7684\u4f60 *\/\r\n .highlight-box {\r\n position: relative;\r\n display: inline-block;\r\n color: var(--blue-main);\r\n z-index: 1;\r\n padding: 0 10px;\r\n }\r\n \r\n \/* \u87a2\u5149\u7b46\u80cc\u666f (Highlighter) *\/\r\n .highlight-box::before {\r\n content: \"\"; position: absolute; bottom: 10px; left: 0; width: 100%; height: 30%;\r\n background: rgba(59, 130, 246, 0.15); \/* \u6dfa\u85cd\u8272\u87a2\u5149\u7b46 *\/\r\n z-index: -1;\r\n transform: skewX(-10deg);\r\n }\r\n \r\n \/* \u52d5\u614b\u5149\u6591 (Shimmer) *\/\r\n .highlight-box::after {\r\n content: \"\"; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);\r\n mix-blend-mode: overlay;\r\n animation: shimmer-text 3s infinite;\r\n }\r\n @keyframes shimmer-text { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* \u88dc\u5145\u8aaa\u660e (Logic Box) *\/\r\n \/* ======================= *\/\r\n .logic-box {\r\n position: relative;\r\n display: inline-block;\r\n padding: 30px 48px;\r\n background: rgba(255, 255, 255, 0.6);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 20px;\r\n box-shadow: \r\n 0 10px 30px -10px rgba(30, 75, 175, 0.1),\r\n inset 0 0 0 1px rgba(255,255,255,0.5);\r\n opacity: 0;\r\n animation: fade-up 1s ease forwards 0.8s;\r\n }\r\n @keyframes fade-up { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }\r\n\r\n .sub-text {\r\n font-size: 18px; color: var(--text-gray); margin: 0;\r\n font-weight: 500;\r\n }\r\n \r\n .logic-strong {\r\n display: block; margin-top: 8px;\r\n font-size: 22px; font-weight: 700; color: var(--blue-dark);\r\n letter-spacing: 1px;\r\n }\r\n \r\n \/* \u88dd\u98fe\uff1a\u5169\u5074\u7684\u79d1\u6280\u62ec\u865f *\/\r\n .logic-box::before, .logic-box::after {\r\n content: \"\"; position: absolute; top: 50%; width: 2px; height: 40px;\r\n background: var(--blue-main); transform: translateY(-50%);\r\n opacity: 0.3;\r\n }\r\n .logic-box::before { left: 0; }\r\n .logic-box::after { right: 0; }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 768px) {\r\n .truth-section { padding: 120px 24px; }\r\n .text-lie { font-size: 28px; }\r\n .text-truth { font-size: 42px; margin-bottom: 40px; }\r\n .logic-box { padding: 24px 20px; width: 100%; }\r\n .bg-symbol { opacity: 0.03; } \/* \u624b\u6a5f\u7248\u7b26\u865f\u6de1\u4e00\u9ede *\/\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"truth-section\">\r\n \r\n <div class=\"bg-symbol sym-1\">\u2260<\/div>\r\n <div class=\"bg-symbol sym-2\">\u2234<\/div>\r\n <div class=\"bg-symbol sym-3\">\u2211<\/div>\r\n\r\n <div class=\"content-wrap\">\r\n \r\n <h2 class=\"text-lie\">\u53ea\u8981\u66f4\u52aa\u529b\uff0c\u5c31\u4e00\u5b9a\u6709\u7d50\u679c<\/h2>\r\n \r\n <h2 class=\"text-truth\">\r\n \u771f\u6b63\u62c9\u958b\u5dee\u8ddd\u7684\uff0c\u662f<br>\r\n <span class=\"highlight-box\">\u300c\u5148\u6821\u6e96\u72c0\u614b\u7684\u4f60\u300d<\/span>\r\n <\/h2>\r\n\r\n <div class=\"logic-box\">\r\n <p class=\"sub-text\">\r\n \u6210\u9577\u7684\u6838\u5fc3\u4e0d\u662f\u76f2\u76ee\u7528\u529b\uff0c\u800c\u662f\r\n <span class=\"logic-strong\">\u89ba\u5bdf\u5347\u7d1a\u3001\u72c0\u614b\u6821\u6e96\u8207\u5e95\u5c64\u91cd\u5efa<\/span>\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-983e33e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"983e33e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b111505 elementor-widget elementor-widget-html\" data-id=\"b111505\" data-element_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>Target Audience - Spotlight Cards<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u56b4\u683c\u7dad\u6301\u4e00\u81f4) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-light: #EFF6FF;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u5361\u7247\u8b8a\u6578 *\/\r\n --card-bg: rgba(255, 255, 255, 0.85);\r\n --card-border: rgba(255, 255, 255, 0.9);\r\n --shadow-idle: 0 10px 30px -10px rgba(30, 75, 175, 0.1);\r\n --shadow-active: 0 30px 60px -15px rgba(30, 75, 175, 0.25);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c (\u4e00\u81f4\u6027) *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .target-section {\r\n position: relative;\r\n padding: 120px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 80px;\r\n position: relative; z-index: 2;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .highlight-pill {\r\n display: inline-block;\r\n background: #fff; border: 1px solid var(--blue-light);\r\n padding: 2px 12px; border-radius: 20px;\r\n color: var(--blue-main); font-size: 0.9em;\r\n box-shadow: 0 4px 10px rgba(30, 75, 175, 0.1);\r\n transform: rotate(-2deg); margin-left: 10px; vertical-align: middle;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u805a\u5149\u71c8\u5361\u7247\u7db2\u683c (The Spotlight Grid) *\/\r\n \/* ======================= *\/\r\n .persona-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr); \/* 4\u5f35\u4e26\u6392 *\/\r\n gap: 24px;\r\n width: 100%; max-width: 1280px;\r\n position: relative;\r\n }\r\n\r\n \/* \u5361\u7247\u672c\u9ad4 *\/\r\n .persona-card {\r\n position: relative;\r\n background: var(--card-bg);\r\n backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--card-border);\r\n border-radius: 24px;\r\n padding: 40px 24px;\r\n display: flex; flex-direction: column; align-items: flex-start;\r\n transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n cursor: default;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \u9802\u90e8\u88dd\u98fe\u689d (Scanner Bar) *\/\r\n .scan-bar {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 4px;\r\n background: linear-gradient(90deg, var(--blue-main), #60A5FA);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform 0.5s ease;\r\n }\r\n .persona-card:hover .scan-bar { transform: scaleX(1); }\r\n\r\n \/* \u5716\u6a19\u5340 *\/\r\n .icon-wrapper {\r\n width: 60px; height: 60px;\r\n background: #fff;\r\n border-radius: 16px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 28px;\r\n margin-bottom: 24px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n transition: transform 0.4s ease;\r\n }\r\n .persona-card:hover .icon-wrapper {\r\n transform: scale(1.1) rotate(-5deg);\r\n background: var(--blue-main); color: #fff;\r\n }\r\n\r\n \/* \u5167\u5bb9\u6587\u5b57 *\/\r\n .role-title {\r\n font-size: 20px; font-weight: 800; color: var(--blue-dark);\r\n margin-bottom: 12px;\r\n }\r\n .role-desc {\r\n font-size: 15px; color: var(--text-sub); line-height: 1.6;\r\n }\r\n\r\n \/* ---------------------------------- *\/\r\n \/* \u2605 CSS \u9b54\u6cd5\uff1a:has() \u805a\u5149\u71c8\u6548\u61c9 \u2605 *\/\r\n \/* ---------------------------------- *\/\r\n \r\n \/* \u7576\u6ed1\u9f20\u9032\u5165 Grid \u6642\uff0c\u6240\u6709\u5361\u7247\u9032\u5165\u300c\u6e96\u5099\u72c0\u614b\u300d *\/\r\n .persona-grid:hover .persona-card {\r\n opacity: 0.5; \/* \u5168\u90e8\u8b8a\u6697 *\/\r\n filter: blur(1px) grayscale(0.6); \/* \u7a0d\u5fae\u6a21\u7cca\u8207\u53bb\u8272 *\/\r\n transform: scale(0.98); \/* \u7a0d\u5fae\u7e2e\u5c0f *\/\r\n }\r\n\r\n \/* \u552f\u7368\u300c\u88ab Hover\u300d\u7684\u90a3\u5f35\u5361\u7247\uff0c\u6062\u5fa9\u9ad8\u4eae *\/\r\n .persona-grid .persona-card:hover {\r\n opacity: 1;\r\n filter: blur(0) grayscale(0);\r\n transform: translateY(-15px) scale(1.02); \/* \u4e0a\u6d6e\u4e14\u653e\u5927 *\/\r\n box-shadow: var(--shadow-active);\r\n background: #fff;\r\n z-index: 10;\r\n border-color: var(--blue-main);\r\n }\r\n\r\n \/* \u9078\u4e2d\u6a19\u8a18 (Selected Checkmark) *\/\r\n .select-mark {\r\n position: absolute; top: 20px; right: 20px;\r\n width: 24px; height: 24px; border-radius: 50%;\r\n background: #E2E8F0; color: #fff;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 14px; opacity: 0; transform: scale(0);\r\n transition: all 0.3s ease;\r\n }\r\n .persona-card:hover .select-mark {\r\n opacity: 1; transform: scale(1); background: #10B981; \/* \u7da0\u8272\u6253\u52fe *\/\r\n }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 1024px) {\r\n .persona-grid { grid-template-columns: 1fr 1fr; gap: 20px; } \/* \u5e73\u677f 2x2 *\/\r\n }\r\n \r\n @media (max-width: 600px) {\r\n .persona-grid { grid-template-columns: 1fr; } \/* \u624b\u6a5f\u55ae\u6b04 *\/\r\n .main-title { font-size: 32px; }\r\n .highlight-pill { display: block; width: fit-content; margin: 10px auto 0; transform: none; }\r\n \r\n \/* \u624b\u6a5f\u7248\u53d6\u6d88\u8907\u96dc\u7684 :has \u4e92\u52d5\uff0c\u6539\u70ba\u7c21\u55ae Hover *\/\r\n .persona-grid:hover .persona-card { opacity: 1; filter: none; transform: none; }\r\n .persona-grid .persona-card:hover { transform: translateY(-5px); }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"target-section\">\r\n \r\n <div class=\"section-header\">\r\n <h2 class=\"main-title\">\r\n \u9019\u9580\u8ab2\uff0c<br>\u9069\u5408\u8ab0\u4f86\u4e0a\uff1f\r\n <span class=\"highlight-pill\">Target Audience<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"persona-grid\">\r\n \r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83d\udcbc<\/div>\r\n <h3 class=\"role-title\">\u696d\u52d9\u8207\u92b7\u552e\u4eba\u54e1<\/h3>\r\n <p class=\"role-desc\">\r\n \u60f3\u63d0\u5347\u696d\u7e3e\uff0c\u537b\u5e38\u5e38\u5361\u5728\u4e0d\u6562\u958b\u53e3\u8207\u63a8\u9032\u95dc\u4fc2\u3002\u9700\u8981\u4e00\u5957\u4e0d\u5f37\u8feb\u63a8\u92b7\uff0c\u4e5f\u80fd\u81ea\u7136\u5efa\u7acb\u4fe1\u4efb\u611f\u8207\u6210\u4ea4\u7684\u7bc0\u594f\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83d\udc51<\/div>\r\n <h3 class=\"role-title\">\u92b7\u552e\u4e3b\u7ba1\u8207\u5275\u696d\u8005<\/h3>\r\n <p class=\"role-desc\">\r\n \u5718\u968a\u696d\u7e3e\u4e0d\u7a69\u3001\u5167\u8017\u56b4\u91cd\u3002\u9700\u8981\u5148\u6821\u6e96\u81ea\u5df1\u7684\u72c0\u614b\uff0c\u9032\u800c\u63d0\u5347\u5718\u968a\u6e9d\u901a\u3001\u5f71\u97ff\u529b\u8207\u6574\u9ad4\u696d\u52d9\u52d5\u80fd\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83e\udde0<\/div>\r\n <h3 class=\"role-title\">\u9867\u554f\u578b\u5de5\u4f5c\u8005<\/h3>\r\n <p class=\"role-desc\">\r\n \u61c2\u5c08\u696d\u537b\u4e0d\u64c5\u9577\u5305\u88dd\u81ea\u5df1\u3002\u5e0c\u671b\u627e\u5230\u5c08\u5c6c\u7684\u6e9d\u901a\u5929\u8ce6\uff0c\u8b93\u81ea\u5df1\u7684\u5c08\u696d\u50f9\u503c\u66f4\u5bb9\u6613\u88ab\u5e02\u5834\u770b\u898b\u8207\u8cb7\u55ae\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83c\udfe2<\/div>\r\n <h3 class=\"role-title\">\u60f3\u7a81\u7834\u74f6\u9838\u7684\u4e0a\u73ed\u65cf<\/h3>\r\n <p class=\"role-desc\">\r\n \u660e\u660e\u5f88\u52aa\u529b\uff0c\u537b\u5e38\u5e38\u89ba\u5f97\u81ea\u5df1\u767c\u63ee\u4e0d\u7a69\u5b9a\u3002\u9700\u8981\u91cd\u65b0\u68b3\u7406\u5167\u5728\u5361\u9ede\uff0c\u628a\u80fd\u529b\u771f\u6b63\u8f49\u5316\u70ba\u8077\u5834\u8868\u73fe\u8207\u6210\u679c\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-35ca4a2 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"35ca4a2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7518c0b elementor-widget elementor-widget-html\" data-id=\"7518c0b\" data-element_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>Tuesday Seminar Ticket<\/title>\r\n<style>\r\n\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --text-dark: #1E293B;\r\n --text-sub: #475569;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u7968\u5238\u8cea\u611f\u8b8a\u6578 *\/\r\n --ticket-bg: #FFFFFF;\r\n --holo-gradient: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 60%);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n padding-top: 80px; \r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .register-section {\r\n position: relative;\r\n padding: 40px 20px 80px;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; margin-bottom: 50px; position: relative; z-index: 2;\r\n max-width: 800px;\r\n }\r\n .kicker {\r\n font-size: 14px; font-weight: 700; color: var(--blue-main); letter-spacing: 2px;\r\n text-transform: uppercase; margin-bottom: 12px; display: block;\r\n transition: letter-spacing 0.3s ease;\r\n }\r\n .section-header:hover .kicker {\r\n letter-spacing: 4px;\r\n }\r\n\r\n .main-title {\r\n font-size: 32px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n transition: color 0.3s;\r\n }\r\n @media (min-width: 768px) {\r\n .main-title { font-size: 42px; }\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u64ec\u771f\u7968\u5238 *\/\r\n \/* ======================= *\/\r\n .ticket-wrapper {\r\n position: relative;\r\n width: 100%; max-width: 900px; \r\n filter: drop-shadow(0 20px 30px rgba(30, 75, 175, 0.15));\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n .ticket-wrapper:hover { transform: translateY(-8px) scale(1.01); }\r\n\r\n .ticket-body {\r\n display: flex;\r\n background: var(--ticket-bg);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n position: relative;\r\n background-image: radial-gradient(#F1F5F9 1px, transparent 1px);\r\n background-size: 20px 20px;\r\n }\r\n\r\n \/* --- \u5168\u606f\u9632\u507d\u689d --- *\/\r\n .holo-strip {\r\n position: absolute; left: 0; top: 0; bottom: 0; width: 10px;\r\n background: linear-gradient(180deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6);\r\n background-size: 100% 200%;\r\n animation: holo-move 5s linear infinite;\r\n z-index: 10;\r\n box-shadow: 2px 0 15px rgba(59, 130, 246, 0.4);\r\n }\r\n @keyframes holo-move { 0% { background-position: 0% 0%; } 100% { background-position: 0% 200%; } }\r\n\r\n \/* --- \u5de6\u5074\uff1a\u8cc7\u8a0a\u5340 --- *\/\r\n .ticket-left {\r\n flex: 2; \r\n padding: 45px 40px 40px 50px;\r\n display: flex; flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n .ticket-brand {\r\n display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;\r\n }\r\n .brand-name { font-size: 13px; font-weight: 700; color: var(--blue-main); text-transform: uppercase; letter-spacing: 1px; }\r\n .ticket-type { \r\n background: #0F172A; color: #fff; padding: 6px 12px; border-radius: 6px; \r\n font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;\r\n }\r\n\r\n \/* \u8ab2\u7a0b\u6838\u5fc3\u5167\u5bb9 *\/\r\n .event-name {\r\n font-size: 28px; font-weight: 900; color: var(--blue-dark); line-height: 1.3; margin-bottom: 12px;\r\n transition: all 0.3s ease;\r\n background-image: linear-gradient(45deg, #0F172A, #1E4BAF);\r\n background-size: 0% 100%;\r\n background-repeat: no-repeat;\r\n -webkit-background-clip: text;\r\n cursor: default;\r\n }\r\n .event-name span { color: var(--blue-main); transition: color 0.3s; } \r\n \r\n .ticket-wrapper:hover .event-name {\r\n background-size: 100% 100%; \r\n color: #1E4BAF; \r\n text-shadow: 2px 2px 0px rgba(30, 75, 175, 0.05);\r\n }\r\n .ticket-wrapper:hover .event-name span {\r\n color: #8B5CF6; \r\n }\r\n\r\n \/* \u7279\u8272\u6a19\u7c64 *\/\r\n .tags-row {\r\n display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;\r\n }\r\n .tag {\r\n font-size: 12px; padding: 4px 10px; border-radius: 4px;\r\n background: #EFF6FF; color: #1E4BAF; font-weight: 600; border: 1px solid #DBEAFE;\r\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); \r\n cursor: pointer;\r\n }\r\n .tag:hover {\r\n background: #1E4BAF;\r\n color: #fff;\r\n border-color: #1E4BAF;\r\n transform: translateY(-3px) scale(1.05);\r\n box-shadow: 0 4px 8px rgba(30, 75, 175, 0.2);\r\n }\r\n\r\n \/* ---- \u6587\u6848\u512a\u5316\u5340 (Description) ---- *\/\r\n .event-desc {\r\n font-size: 15px; color: var(--text-sub); margin-bottom: 25px;\r\n line-height: 1.7; text-align: justify;\r\n }\r\n .event-desc strong { \r\n color: var(--blue-dark); \r\n font-weight: 700; \r\n position: relative;\r\n cursor: help;\r\n transition: color 0.3s;\r\n }\r\n .event-desc strong::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0; left: 0;\r\n width: 0%; height: 2px;\r\n background-color: #F43F5E; \r\n transition: width 0.4s ease;\r\n }\r\n .event-desc strong:hover { color: #1E4BAF; }\r\n .event-desc strong:hover::after { width: 100%; }\r\n \r\n \/* \u5f15\u7528\u53e5 *\/\r\n .quote-box {\r\n border-left: 3px solid #CBD5E1;\r\n padding-left: 15px;\r\n margin-bottom: 25px;\r\n font-style: italic;\r\n color: #64748B;\r\n font-size: 14px;\r\n transition: all 0.3s;\r\n }\r\n .ticket-wrapper:hover .quote-box {\r\n border-left-color: #1E4BAF;\r\n background: rgba(30, 75, 175, 0.02);\r\n }\r\n\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u683c (Grid Layout) *\/\r\n .ticket-meta {\r\n display: grid; \r\n grid-template-columns: 1.2fr 1fr 1.3fr; \r\n gap: 15px; \r\n margin-top: auto; \r\n padding-top: 25px;\r\n border-top: 2px dashed #E2E8F0;\r\n }\r\n \r\n .meta-item { transition: transform 0.3s; }\r\n .meta-item:hover { transform: translateY(-2px); }\r\n \r\n .meta-item label { \r\n display: block; font-size: 11px; color: #94A3B8; \r\n text-transform: uppercase; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px;\r\n }\r\n .meta-item span { \r\n display: block; font-size: 14.5px; font-weight: 700; color: var(--text-dark); line-height: 1.4;\r\n }\r\n \r\n .highlight-bg {\r\n background: linear-gradient(120deg, #FEF08A 0%, #FDE047 100%);\r\n padding: 2px 6px; border-radius: 4px;\r\n box-decoration-break: clone; -webkit-box-decoration-break: clone;\r\n color: #854D0E;\r\n }\r\n\r\n \/* --- \u53f3\u5074\uff1a\u884c\u52d5\u5340 --- *\/\r\n .ticket-right {\r\n flex: 0.9;\r\n padding: 40px;\r\n background: #F8FAFC;\r\n display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n text-align: center;\r\n position: relative;\r\n border-left: 2px dashed #CBD5E1;\r\n overflow: hidden; \r\n }\r\n\r\n \/* \u7f3a\u53e3\u906e\u7f69 *\/\r\n .ticket-body {\r\n -webkit-mask-image: \r\n radial-gradient(circle at 69% 0, transparent 15px, black 16px), \r\n radial-gradient(circle at 69% 100%, transparent 15px, black 16px);\r\n mask-composite: intersect; \r\n }\r\n\r\n .barcode {\r\n width: 100%; height: 40px;\r\n background: repeating-linear-gradient(90deg, \r\n #334155 0, #334155 2px, \r\n transparent 2px, transparent 5px,\r\n #334155 5px, #334155 8px,\r\n transparent 8px, transparent 10px\r\n );\r\n opacity: 0.2; margin-top: 30px;\r\n }\r\n\r\n .cta-btn {\r\n width: 100%; padding: 18px 10px;\r\n background: var(--blue-main); color: #fff;\r\n font-size: 18px; font-weight: 700; border-radius: 12px;\r\n text-decoration: none; box-shadow: 0 8px 20px rgba(30, 75, 175, 0.25);\r\n transition: all 0.3s; display: block;\r\n position: relative;\r\n overflow: hidden; \r\n }\r\n \r\n .cta-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: -100%;\r\n width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: skewX(-20deg);\r\n transition: 0.5s;\r\n }\r\n \r\n .cta-btn:hover { \r\n background: #183C8C; \r\n transform: translateY(-2px); \r\n box-shadow: 0 12px 25px rgba(30, 75, 175, 0.3); \r\n }\r\n \r\n .cta-btn:hover::before {\r\n left: 100%;\r\n transition: 0.6s ease-in-out;\r\n }\r\n\r\n .cta-btn small { display: block; font-size: 12px; font-weight: 400; opacity: 0.9; margin-top: 5px; }\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .ticket-wrapper { max-width: 100%; }\r\n .ticket-body { flex-direction: column; -webkit-mask-image: none; }\r\n .holo-strip { width: 100%; height: 6px; bottom: auto; background-size: 200% 100%; animation: holo-move-x 5s linear infinite; }\r\n @keyframes holo-move-x { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }\r\n \r\n .ticket-left { padding: 40px 25px 30px; flex: auto; }\r\n .ticket-right { border-left: none; border-top: 2px dashed #CBD5E1; padding: 40px 25px; flex: auto; }\r\n \r\n .ticket-right::before, .ticket-right::after {\r\n content: \"\"; position: absolute; top: -15px; width: 30px; height: 30px;\r\n background: var(--bg-page); border-radius: 50%;\r\n }\r\n .ticket-right::before { left: -15px; }\r\n .ticket-right::after { right: -15px; }\r\n \r\n .ticket-meta { grid-template-columns: 1fr; gap: 20px; } \r\n .event-name { font-size: 24px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section id=\"ticket-area\" class=\"register-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">WEEKLY SEMINAR<\/span>\r\n <h2 class=\"main-title\">\u6bcf\u9031\u4e8c\u56fa\u5b9a\u958b\u8b1b<br>\u6cdb\u6d77\u5546\u5b78\u9662\u9031\u4e8c\u8b1b\u5802<\/h2>\r\n <\/div>\r\n\r\n <div class=\"ticket-wrapper\">\r\n <div class=\"ticket-body\">\r\n \r\n <div class=\"holo-strip\"><\/div>\r\n\r\n <div class=\"ticket-left\">\r\n <div class=\"ticket-brand\">\r\n <span class=\"brand-name\">Finhive Academy<\/span>\r\n <span class=\"ticket-type\">Reservation Required<\/span>\r\n <\/div>\r\n \r\n <div class=\"main-info\">\r\n <h3 class=\"event-name\">\r\n \u5e02\u5834 \u00d7 \u8cfd\u9053 \u00d7 AI \u5be6\u6230<br>\r\n <span>\u9031\u4e8c\u8b1b\u5802\u5831\u540d\u8868<\/span>\r\n <\/h3>\r\n \r\n <div class=\"tags-row\">\r\n <span class=\"tag\">#\u5e02\u5834\u5224\u8b80<\/span>\r\n <span class=\"tag\">#\u8cfd\u9053\u9078\u64c7<\/span>\r\n <span class=\"tag\">#AI\u5de5\u5177\u61c9\u7528<\/span>\r\n <\/div>\r\n\r\n <div class=\"event-desc\">\r\n \u9019\u4e0d\u662f\u4e00\u5802\u53ea\u807d\u8da8\u52e2\u7684\u8ab2\uff0c\u800c\u662f\u4e00\u5802\u5e6b\u4f60\u628a<strong>\u5e02\u5834\u3001\u65b9\u5411\u8207\u4e0b\u4e00\u6b65<\/strong>\u505a\u6e05\u695a\u7684\u8ab2\u3002<br>\r\n \u5982\u679c\u4f60\u6b63\u5728\u60f3\u300c\u5e02\u5834\u9084\u6709\u54ea\u4e9b\u6a5f\u6703\u300d\u3001\u300c\u6211\u9069\u5408\u54ea\u689d\u8def\u300d\uff0c\u9019\u5802\u8ab2\u6703\u662f\u5f88\u597d\u7684\u8d77\u9ede\uff1a\r\n <br><br>\r\n \u2705 <strong>\u60f3\u627e\u65b9\u5411\u7684\u4eba\uff1a<\/strong>\u91cd\u65b0\u6574\u7406\u601d\u7dd2\uff0c\u627e\u5230\u767c\u529b\u9ede<br>\r\n \u2705 <strong>\u5efa\u7acb\u7b2c\u4e8c\u80fd\u529b\uff1a<\/strong>\u5b78\u6703 AI \u5be6\u6230\uff0c\u8b8a\u6210\u8cfa\u9322\u5de5\u5177<br>\r\n \u2705 <strong>\u5177\u9ad4\u5316\u60f3\u6cd5\uff1a<\/strong>\u5c07\u9ede\u5b50\u8b8a\u73fe\uff0c\u770b\u61c2\u5e02\u5834\u5167\u90e8\u9580\u9053\r\n <\/div>\r\n\r\n <div class=\"quote-box\">\r\n \u6bcf\u9031\u4e8c\u56fa\u5b9a\u958b\u8b1b\uff0c\u5e6b\u60a8\u770b\u61c2\u5e02\u5834\u3001\u627e\u5230\u65b9\u5411\u3001\u6574\u7406\u4e0b\u4e00\u6b65\u3002\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-meta\">\r\n <div class=\"meta-item\">\r\n <label>Time<\/label>\r\n <span class=\"highlight-bg\">3\/17, 3\/24, 3\/31 (\u4e8c)<\/span>\r\n <span style=\"display: block; font-size: 13.5px; margin-top: 4px; color: var(--text-sub);\">14:00 \u2013 15:30<\/span>\r\n <\/div>\r\n \r\n <div class=\"meta-item\">\r\n <label>Fee<\/label>\r\n <span>\u975e\u6703\u54e1 $500 \/ \u4eba<br>(\u5169\u4eba\u540c\u884c\u4e00\u4eba\u514d\u8cbb)<\/span>\r\n <\/div>\r\n\r\n <div class=\"meta-item\">\r\n <label>Member Privilege<\/label>\r\n <span>\u6cdb\u6d77\u6703\u54e1<br>\u514d\u8cbb\u53c3\u52a0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-right\">\r\n <a href=\"https:\/\/forms.gle\/hJ15FudTWH6UX1797\" target=\"_blank\" class=\"cta-btn\">\r\n \u9810\u7d04\u5831\u540d \u2794\r\n <small>\u5831\u540d\u5f8c\u7531\u5c08\u4eba\u63d0\u4f9b\u5f8c\u7e8c\u8cc7\u8a0a<\/small>\r\n <\/a>\r\n <div class=\"barcode\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-649d4fa e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"649d4fa\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe5cda1 elementor-widget elementor-widget-html\" data-id=\"fe5cda1\" data-element_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>Workshop Ticket - Expanded<\/title>\r\n<style>\r\n\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --text-dark: #1E293B;\r\n --text-sub: #475569;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u7968\u5238\u8cea\u611f\u8b8a\u6578 *\/\r\n --ticket-bg: #FFFFFF;\r\n --holo-gradient: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 60%);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n padding-top: 80px; \/* \u9810\u7559\u7d66 Header \u7684\u7a7a\u9593 *\/\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .register-section {\r\n position: relative;\r\n padding: 40px 20px 80px;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; margin-bottom: 50px; position: relative; z-index: 2;\r\n max-width: 800px;\r\n }\r\n .kicker {\r\n font-size: 14px; font-weight: 700; color: var(--blue-main); letter-spacing: 2px;\r\n text-transform: uppercase; margin-bottom: 12px; display: block;\r\n }\r\n .main-title {\r\n font-size: 32px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n @media (min-width: 768px) {\r\n .main-title { font-size: 42px; }\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u64ec\u771f\u7968\u5238 (The Realistic Ticket) *\/\r\n \/* ======================= *\/\r\n .ticket-wrapper {\r\n position: relative;\r\n width: 100%; max-width: 900px; \/* \u7a0d\u5fae\u52a0\u5bec\u4ee5\u5bb9\u7d0d\u66f4\u591a\u6587\u5b57 *\/\r\n filter: drop-shadow(0 20px 30px rgba(30, 75, 175, 0.15));\r\n transition: transform 0.3s ease;\r\n }\r\n .ticket-wrapper:hover { transform: translateY(-5px); }\r\n\r\n .ticket-body {\r\n display: flex;\r\n background: var(--ticket-bg);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n position: relative;\r\n background-image: radial-gradient(#F1F5F9 1px, transparent 1px);\r\n background-size: 20px 20px;\r\n }\r\n\r\n \/* --- \u5168\u606f\u9632\u507d\u689d --- *\/\r\n .holo-strip {\r\n position: absolute; left: 0; top: 0; bottom: 0; width: 10px;\r\n background: linear-gradient(180deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6);\r\n background-size: 100% 200%;\r\n animation: holo-move 5s linear infinite;\r\n z-index: 10;\r\n }\r\n @keyframes holo-move { 0% { background-position: 0% 0%; } 100% { background-position: 0% 200%; } }\r\n\r\n \/* --- \u5de6\u5074\uff1a\u8cc7\u8a0a\u5340 --- *\/\r\n .ticket-left {\r\n flex: 2; \/* \u589e\u52a0\u5de6\u5074\u6bd4\u4f8b\uff0c\u7d66\u6587\u6848\u66f4\u591a\u7a7a\u9593 *\/\r\n padding: 45px 40px 40px 50px;\r\n display: flex; flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n .ticket-brand {\r\n display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;\r\n }\r\n .brand-name { font-size: 13px; font-weight: 700; color: var(--blue-main); text-transform: uppercase; letter-spacing: 1px; }\r\n .ticket-type { \r\n background: #0F172A; color: #fff; padding: 6px 12px; border-radius: 6px; \r\n font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;\r\n }\r\n\r\n \/* \u8ab2\u7a0b\u6838\u5fc3\u5167\u5bb9 *\/\r\n .event-name {\r\n font-size: 28px; font-weight: 900; color: var(--blue-dark); line-height: 1.3; margin-bottom: 12px;\r\n }\r\n .event-name span { color: var(--blue-main); } \r\n\r\n \/* \u7279\u8272\u6a19\u7c64 *\/\r\n .tags-row {\r\n display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;\r\n }\r\n .tag {\r\n font-size: 12px; padding: 4px 10px; border-radius: 4px;\r\n background: #EFF6FF; color: #1E4BAF; font-weight: 600; border: 1px solid #DBEAFE;\r\n }\r\n\r\n \/* ---- \u6587\u6848\u512a\u5316\u5340 (Description) ---- *\/\r\n .event-desc {\r\n font-size: 15px; color: var(--text-sub); margin-bottom: 25px;\r\n line-height: 1.7; text-align: justify;\r\n }\r\n .event-desc strong { color: var(--blue-dark); font-weight: 700; }\r\n \r\n \/* \u5f15\u7528\u53e5 *\/\r\n .quote-box {\r\n border-left: 3px solid #CBD5E1;\r\n padding-left: 15px;\r\n margin-bottom: 25px;\r\n font-style: italic;\r\n color: #64748B;\r\n font-size: 14px;\r\n }\r\n\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u683c (Grid Layout) *\/\r\n .ticket-meta {\r\n display: grid; \r\n grid-template-columns: 1.2fr 1fr 1fr; \/* \u4e09\u6b04\u6bd4\u4f8b\uff1a\u65e5\u671f\u5bec\u4e00\u9ede *\/\r\n gap: 20px; \r\n margin-top: auto; \/* \u63a8\u5230\u5e95\u90e8 *\/\r\n padding-top: 25px;\r\n border-top: 2px dashed #E2E8F0;\r\n }\r\n \r\n .meta-item label { \r\n display: block; font-size: 11px; color: #94A3B8; \r\n text-transform: uppercase; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px;\r\n }\r\n .meta-item span { \r\n display: block; font-size: 15px; font-weight: 700; color: var(--text-dark); line-height: 1.4;\r\n }\r\n \r\n \/* \u65e5\u671f\u9ad8\u4eae\u6a23\u5f0f\u512a\u5316 *\/\r\n .highlight-bg {\r\n background: linear-gradient(120deg, #FEF08A 0%, #FDE047 100%);\r\n padding: 2px 6px; border-radius: 4px;\r\n box-decoration-break: clone; -webkit-box-decoration-break: clone;\r\n color: #854D0E;\r\n }\r\n\r\n \/* --- \u53f3\u5074\uff1a\u884c\u52d5\u5340 --- *\/\r\n .ticket-right {\r\n flex: 0.9;\r\n padding: 40px;\r\n background: #F8FAFC;\r\n display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n text-align: center;\r\n position: relative;\r\n border-left: 2px dashed #CBD5E1;\r\n }\r\n\r\n \/* \u7f3a\u53e3\u906e\u7f69 *\/\r\n .ticket-body {\r\n -webkit-mask-image: \r\n radial-gradient(circle at 69% 0, transparent 15px, black 16px), \r\n radial-gradient(circle at 69% 100%, transparent 15px, black 16px);\r\n mask-composite: intersect; \r\n }\r\n\r\n .barcode {\r\n width: 100%; height: 40px;\r\n background: repeating-linear-gradient(90deg, \r\n #334155 0, #334155 2px, \r\n transparent 2px, transparent 5px,\r\n #334155 5px, #334155 8px,\r\n transparent 8px, transparent 10px\r\n );\r\n opacity: 0.2; margin-top: 30px;\r\n }\r\n\r\n .cta-btn {\r\n width: 100%; padding: 18px 10px;\r\n background: var(--blue-main); color: #fff;\r\n font-size: 18px; font-weight: 700; border-radius: 12px;\r\n text-decoration: none; box-shadow: 0 8px 20px rgba(30, 75, 175, 0.25);\r\n transition: all 0.3s; display: block;\r\n }\r\n .cta-btn small { display: block; font-size: 12px; font-weight: 400; opacity: 0.9; margin-top: 5px; }\r\n .cta-btn:hover { background: #183C8C; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(30, 75, 175, 0.3); }\r\n\r\n \/* \u6587\u5b57\u9023\u7d50 (Line \u52a0\u5165) *\/\r\n .btn-link {\r\n color: var(--text-sub); font-size: 13px; text-decoration: none; text-align: center; \r\n margin-top: 15px; cursor: pointer; opacity: 0.8; transition: opacity 0.3s;\r\n display: flex; align-items: center; justify-content: center; gap: 6px;\r\n }\r\n .btn-link:hover { opacity: 1; text-decoration: underline; color: var(--blue-main); }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .ticket-wrapper { max-width: 100%; }\r\n .ticket-body { flex-direction: column; -webkit-mask-image: none; }\r\n .holo-strip { width: 100%; height: 6px; bottom: auto; background-size: 200% 100%; animation: holo-move-x 5s linear infinite; }\r\n @keyframes holo-move-x { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }\r\n \r\n .ticket-left { padding: 40px 25px 30px; flex: auto; }\r\n .ticket-right { border-left: none; border-top: 2px dashed #CBD5E1; padding: 40px 25px; flex: auto; }\r\n \r\n \/* \u624b\u6a5f\u7248\u7f3a\u53e3 *\/\r\n .ticket-right::before, .ticket-right::after {\r\n content: \"\"; position: absolute; top: -15px; width: 30px; height: 30px;\r\n background: var(--bg-page); border-radius: 50%;\r\n }\r\n .ticket-right::before { left: -15px; }\r\n .ticket-right::after { right: -15px; }\r\n \r\n .ticket-meta { grid-template-columns: 1fr; gap: 20px; } \/* \u624b\u6a5f\u7248\u8b8a\u55ae\u6b04 *\/\r\n .event-name { font-size: 24px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section id=\"ticket-area\" class=\"register-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">BUSINESS OPPORTUNITY<\/span>\r\n <h2 class=\"main-title\">\u6cdb\u6d77\u5546\u5b78\u9662\uff5c\u8da8\u52e2\u5546\u6a5f\u8b1b\u5ea7<br>\u627e\u5230\u4f60\u7684\u4e0b\u4e00\u689d\u8def<\/h2>\r\n <\/div>\r\n\r\n <div class=\"ticket-wrapper\">\r\n <div class=\"ticket-body\">\r\n \r\n <div class=\"holo-strip\"><\/div>\r\n\r\n <div class=\"ticket-left\">\r\n <div class=\"ticket-brand\">\r\n <span class=\"brand-name\">Finhive Academy<\/span>\r\n <span class=\"ticket-type\">Seminar Ticket<\/span>\r\n <\/div>\r\n \r\n <div class=\"main-info\">\r\n <h3 class=\"event-name\">\r\n \u672a\u4f86\u5e7e\u5e74\uff0c\u666e\u901a\u4eba<br>\r\n <span>\u9084\u6709\u54ea\u4e9b\u65b0\u7684\u6536\u5165\u6a5f\u6703\uff1f<\/span>\r\n <\/h3>\r\n \r\n <div class=\"tags-row\">\r\n <span class=\"tag\">#\u8da8\u52e2\u5546\u6a5f<\/span>\r\n <span class=\"tag\">#\u659c\u69d3\u5e03\u5c40<\/span>\r\n <span class=\"tag\">#\u589e\u52a0\u6536\u5165<\/span>\r\n <\/div>\r\n\r\n <div class=\"event-desc\">\r\n \u4f60\u6709\u6c92\u6709\u767c\u73fe\uff0c\u73fe\u5728\u5f88\u591a\u4eba\u90fd\u5f88\u52aa\u529b\uff0c\u4f46\u751f\u6d3b\u58d3\u529b\u9084\u662f\u8d8a\u4f86\u8d8a\u5927\uff1f\u53ea\u9760\u4e00\u4efd\u6536\u5165\uff0c\u8d8a\u4f86\u8d8a\u6c92\u6709\u5b89\u5168\u611f\u3002<br>\r\n \u9019\u5834\u8ab2\uff0c\u4e0d\u662f\u7a7a\u8ac7\u8da8\u52e2\uff0c\u800c\u662f\u5e36\u4f60\u770b\u61c2\uff1a\r\n <br><br>\r\n \u2705 <strong>\u770b\u61c2\u672a\u4f86\u65b9\u5411\uff1a<\/strong>\u54ea\u4e9b\u659c\u69d3\u65b9\u5411\u503c\u5f97\u63d0\u65e9\u5e03\u5c40\uff1f<br>\r\n \u2705 <strong>\u627e\u51fa\u9069\u5408\u5207\u5165\u9ede\uff1a<\/strong>\u5982\u4f55\u5728\u8b8a\u5c40\u4e2d\u627e\u5230\u4e0b\u4e00\u689d\u8def\uff1f<br>\r\n \u2705 <strong>\u907f\u958b\u76f2\u76ee\u6295\u5165\uff1a<\/strong>\u5c11\u8d70\u51a4\u6789\u8def\uff0c\u628a\u8da8\u52e2\u8b8a\u6210\u771f\u6b63\u53ef\u884c\u6536\u5165\u3002\r\n <\/div>\r\n\r\n <div class=\"quote-box\">\r\n \u770b\u61c2\u8da8\u52e2\uff0c\u624d\u6709\u6a5f\u6703\u63d0\u65e9\u5e03\u5c40\u3002\u5148\u770b\u61c2\u7684\u4eba\uff0c\u5f80\u5f80\u5148\u627e\u5230\u6a5f\u6703\u3002\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-meta\">\r\n <div class=\"meta-item\">\r\n <label>Date & Time<\/label>\r\n <span class=\"highlight-bg\">3\/18 (\u4e09) 14:00<\/span>\r\n <span style=\"font-size: 12px; color: var(--text-sub); margin-top: 4px; display: block; font-weight: normal;\">(13:30 \u958b\u59cb\u5831\u5230)<\/span>\r\n <\/div>\r\n \r\n <div class=\"meta-item\">\r\n <label>Content<\/label>\r\n <span>\u8da8\u52e2\u5546\u6a5f \/ \u659c\u69d3\u4f48\u5c40<br>\u907f\u958b\u76f2\u5340<\/span>\r\n <\/div>\r\n\r\n <div class=\"meta-item\">\r\n <label>Location<\/label>\r\n <span>105 \u81fa\u5317\u5e02\u677e\u5c71\u5340<br>\u6c11\u751f\u6771\u8def\u4e09\u6bb5 131 \u865f 7 \u6a13<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-right\">\r\n <a href=\"https:\/\/forms.gle\/SwjZ88yDcdMgqq4TA\" target=\"_blank\" class=\"cta-btn\">\r\n \u7acb\u5373\u9810\u7d04\u5831\u540d \u2794\r\n <small>Limited Seats Available<\/small>\r\n <\/a>\r\n \r\n <a href=\"https:\/\/lin.ee\/gXuyYwR\" target=\"_blank\" class=\"btn-link\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 5.92 2 10.5C2 13.14 3.49 15.48 5.84 17C5.64 17.8 5.16 19.34 5.08 19.6C5.03 19.78 5.23 19.95 5.39 19.86C6.69 19.16 9.38 17.65 9.38 17.65C10.21 17.88 11.09 18 12 18C17.52 18 22 14.08 22 9.5C22 4.92 17.52 2 12 2Z\"\/><\/svg>\r\n \u6216\u52a0\u5165 Line \u5b98\u65b9\u5e33\u865f\u9810\u7d04\r\n <\/a>\r\n\r\n <div class=\"barcode\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-e7b254d e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"e7b254d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a2a3c2 elementor-widget elementor-widget-html\" data-id=\"4a2a3c2\" data-element_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>Finhive Courses - Frequency<\/title>\r\n<style>\r\n \/* =============================== *\/\r\n \/* 1. \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* =============================== *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --bg-card: #FFFFFF;\r\n --primary-blue: #1E4BAF;\r\n --primary-dark: #1e3a8a;\r\n --primary-light: #EFF6FF;\r\n --text-dark: #0F172A;\r\n --text-gray: #64748B;\r\n --border-light: #E2E8F0;\r\n \r\n --accent-hot: #F43F5E; \r\n --accent-new: #10B981; \r\n --accent-purple: #8B5CF6; \r\n\r\n --shadow-card: 0 10px 40px -10px rgba(0,0,0,0.08);\r\n --shadow-hover: 0 25px 50px -12px rgba(30, 75, 175, 0.25);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n background-color: var(--bg-page);\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u5340\u584a\u5bb9\u5668 *\/\r\n .courses-section {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 120px 40px;\r\n position: relative;\r\n }\r\n\r\n \/* =============================== *\/\r\n \/* 2. \u6a19\u984c\u5340\u584a *\/\r\n \/* =============================== *\/\r\n .header-center {\r\n text-align: center; max-width: 760px; margin: 0 auto 80px auto;\r\n }\r\n .kicker {\r\n display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary-blue);\r\n text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;\r\n background: rgba(30, 75, 175, 0.08); padding: 4px 12px; border-radius: 6px;\r\n }\r\n .main-title { font-size: 42px; font-weight: 900; margin-bottom: 20px; color: var(--text-dark); letter-spacing: -0.5px; }\r\n .desc { font-size: 17px; color: var(--text-gray); line-height: 1.8; }\r\n\r\n\r\n \/* =============================== *\/\r\n \/* 3. \u7db2\u683c\u4f48\u5c40 *\/\r\n \/* =============================== *\/\r\n .premium-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 40px;\r\n padding-bottom: 40px;\r\n }\r\n\r\n\r\n \/* =============================== *\/\r\n \/* 4. \u5361\u7247\u6a23\u5f0f *\/\r\n \/* =============================== *\/\r\n a.course-card-premium {\r\n text-decoration: none;\r\n color: inherit;\r\n display: flex; \r\n }\r\n\r\n .course-card-premium {\r\n background: var(--bg-card);\r\n border-radius: 24px;\r\n position: relative;\r\n overflow: hidden; \r\n border: 1px solid rgba(255, 255, 255, 0.6);\r\n box-shadow: var(--shadow-card);\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); \r\n display: flex; flex-direction: column;\r\n cursor: pointer;\r\n perspective: 1000px;\r\n }\r\n\r\n .course-card-premium:hover {\r\n transform: translateY(-12px) scale(1.02);\r\n box-shadow: var(--shadow-hover);\r\n border-color: var(--primary-light);\r\n }\r\n\r\n \/* \u6d41\u5149\u7279\u6548 *\/\r\n .course-card-premium::before {\r\n content: ''; position: absolute; top: 0; left: -100%;\r\n width: 50%; height: 100%;\r\n background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);\r\n transform: skewX(-25deg);\r\n transition: 0s;\r\n z-index: 10; pointer-events: none;\r\n }\r\n .course-card-premium:hover::before {\r\n left: 200%; transition: 0.8s ease;\r\n }\r\n\r\n \/* \u5716\u7247\u5340\u57df *\/\r\n .card-image-wrap {\r\n width: 100%;\r\n aspect-ratio: 4\/3; \r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 24px 24px 0 0; \r\n }\r\n\r\n .card-image-wrap img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);\r\n }\r\n\r\n .course-card-premium:hover .card-image-wrap img {\r\n transform: scale(1.12) rotate(2deg);\r\n }\r\n\r\n \/* \u72c0\u614b\u6a19\u7c64 *\/\r\n .status-badge {\r\n position: absolute; top: 20px; left: 20px;\r\n padding: 6px 12px; border-radius: 8px;\r\n font-size: 12px; font-weight: 800; color: #fff;\r\n text-transform: uppercase; letter-spacing: 1px;\r\n z-index: 5;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.25);\r\n backdrop-filter: blur(4px);\r\n }\r\n .status-badge.hot { background: var(--accent-hot); }\r\n .status-badge.new { background: var(--accent-new); }\r\n .status-badge.rec { background: var(--accent-purple); }\r\n\r\n \/* \u5167\u5bb9\u5340\u57df *\/\r\n .card-content {\r\n padding: 28px;\r\n display: flex; flex-direction: column; flex: 1;\r\n background: #fff;\r\n position: relative; z-index: 2;\r\n }\r\n\r\n .category-chip {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n align-self: flex-start;\r\n padding: 6px 14px;\r\n border-radius: 50px; \r\n background: var(--primary-light);\r\n color: var(--primary-blue);\r\n font-size: 12px; font-weight: 700;\r\n margin-bottom: 16px;\r\n border: 1px solid rgba(30, 75, 175, 0.1);\r\n transition: 0.3s;\r\n }\r\n .category-chip svg { width: 14px; height: 14px; fill: currentColor; }\r\n \r\n .course-card-premium:hover .category-chip {\r\n background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);\r\n }\r\n\r\n .card-title {\r\n font-size: 20px; font-weight: 800; color: var(--text-dark);\r\n margin-bottom: 12px; line-height: 1.4;\r\n transition: 0.3s;\r\n }\r\n .course-card-premium:hover .card-title { color: var(--primary-blue); }\r\n\r\n .card-desc {\r\n font-size: 14px; color: var(--text-gray); line-height: 1.6;\r\n margin-bottom: 24px;\r\n display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;\r\n }\r\n\r\n \/* =============================== *\/\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u5217 - \u8cfc\u7269\u8eca\u7248 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n \/* =============================== *\/\r\n .card-footer-flex-column {\r\n margin-top: auto;\r\n padding-top: 20px;\r\n border-top: 1px dashed var(--border-light);\r\n display: flex; \r\n flex-direction: column; \r\n gap: 15px;\r\n }\r\n\r\n \/* \u5718\u5831\u512a\u60e0\u6587\u5b57 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n .group-discount-text {\r\n font-size: 12px;\r\n color: #B45309; \/* \u7425\u73c0\u8272\u8b66\u544a\u611f *\/\r\n background-color: #FEF3C7;\r\n padding: 6px 10px;\r\n border-radius: 6px;\r\n text-align: center;\r\n font-weight: 600;\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n .group-discount-text strong {\r\n color: var(--accent-hot);\r\n }\r\n\r\n \/* \u50f9\u683c\u8207\u6309\u9215\u7684\u6c34\u5e73\u4f48\u5c40\u5bb9\u5668 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n .price-and-action {\r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center; \r\n width: 100%;\r\n }\r\n\r\n \/* \u539f\u59cb\u5361\u7247 B, C \u50f9\u683c\u6a23\u5f0f\uff0c\u50f9\u683c\u4e0d\u5283\u6389 *\/\r\n .price-val { font-size: 20px; font-weight: 800; color: var(--text-dark); }\r\n \r\n \/* \u5361\u7247 A \u5c08\u7528\u50f9\u683c\u6a23\u5f0f\uff0c\u53d6\u6d88\u522a\u9664\u7dda\u6539\u70ba\u4e00\u822c\u72c0\u614b\u8aaa\u660e *\/\r\n .price-group-strikethrough .price-label { font-size: 11px; color: var(--text-gray); text-transform: uppercase; font-weight: 600; }\r\n .price-group-strikethrough .price-val { font-size: 16px; font-weight: 800; color: var(--text-dark); }\r\n\r\n\r\n \/* \u8cfc\u8cb7\u6309\u9215 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n .btn-buy {\r\n background: var(--primary-blue); \r\n color: #fff;\r\n padding: 10px 18px;\r\n border-radius: 50px; \r\n font-size: 14px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px; \r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(30, 75, 175, 0.2);\r\n border: 1px solid transparent;\r\n white-space: nowrap;\r\n }\r\n .btn-buy svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: currentColor; \r\n }\r\n .course-card-premium:hover .btn-buy {\r\n background: #183C8C; \r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(30, 75, 175, 0.3);\r\n }\r\n\r\n\r\n \/* =============================== *\/\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u5217 - \u539f\u59cb\u7248 (\u5361\u7247 B, C \u4fdd\u7559\u7528) *\/\r\n \/* =============================== *\/\r\n .card-footer-flex-row {\r\n margin-top: auto;\r\n padding-top: 20px;\r\n border-top: 1px dashed var(--border-light);\r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center;\r\n }\r\n\r\n .price-group { display: flex; flex-direction: column; }\r\n .price-label { font-size: 11px; color: var(--text-gray); text-transform: uppercase; font-weight: 600; }\r\n \/* \u5361\u7247 B, C \u539f\u59cb\u6309\u9215 *\/\r\n .action-circle {\r\n width: 44px; height: 44px; border-radius: 50%;\r\n background: #F8FAFC; color: var(--text-gray);\r\n display: flex; align-items: center; justify-content: center;\r\n border: 1px solid var(--border-light);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n .action-circle svg { width: 20px; height: 20px; stroke-width: 2.5; }\r\n .course-card-premium:hover .action-circle {\r\n background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);\r\n transform: rotate(-45deg) scale(1.1);\r\n box-shadow: 0 4px 12px rgba(30, 75, 175, 0.3);\r\n }\r\n\r\n\r\n \/* RWD *\/\r\n @media (max-width: 768px) {\r\n .courses-section { padding: 80px 24px; }\r\n .main-title { font-size: 32px; }\r\n .premium-grid { grid-template-columns: 1fr; gap: 30px; } \r\n .course-card-premium:hover { transform: translateY(-5px) scale(1); }\r\n \/* RWD \u6642\u5718\u5831\u512a\u60e0\u6539\u70ba\u5782\u76f4\u6392\u5217 *\/\r\n .group-discount-text { flex-direction: column; gap: 4px; }\r\n }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"courses-section\">\r\n \r\n <div class=\"header-center\">\r\n <span class=\"kicker\">INNER FREQUENCY<\/span>\r\n <h2 class=\"main-title\">\u983b\u7387\u89ba\u5bdf\uff5c\u627e\u5230\u4f60\u7684\u751f\u547d\u983b\u7387<\/h2>\r\n <p class=\"desc\">\r\n \u4e0d\u662f\u4f60\u4e0d\u5920\u52aa\u529b\uff0c\u800c\u662f\u4f60\u9700\u8981\u5148\u7a69\u4f4f\u81ea\u5df1\u7684\u72c0\u614b\u3002<br>\r\n \u9019\u5802\u8ab2\u7d50\u5408\u81ea\u6211\u89ba\u5bdf\u8207\u95dc\u4fc2\u7406\u89e3\uff0c\u5e6b\u4f60\u91cd\u6574\u5167\u5728\u7bc0\u594f\uff0c\u9032\u800c\u63d0\u5347\u6574\u9ad4\u7684\u5546\u696d\u8207\u751f\u6d3b\u8868\u73fe\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"premium-grid\">\r\n \r\n <div class=\"course-card-premium\">\r\n <div class=\"card-image-wrap\">\r\n <span class=\"status-badge hot\">CORE<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2026\/01\/photo_2026-01-16_15-27-43.jpg\" alt=\"\u983b\u7387\u89ba\u5bdf\">\r\n <\/div>\r\n <div class=\"card-content\">\r\n <div class=\"category-chip\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z\"\/><\/svg>\r\n \u6a21\u7d44\u4e00\uff5c\u72c0\u614b\u91cd\u6574\r\n <\/div>\r\n <h3 class=\"card-title\">\u983b\u7387\u89ba\u5bdf\uff1a\u627e\u56de\u5931\u53bb\u7684\u638c\u63a7\u611f<\/h3>\r\n <p class=\"card-desc\">\u660e\u660e\u6295\u5165\u5f88\u591a\uff0c\u537b\u5e38\u5e38\u63d0\u4e0d\u8d77\u52c1\uff1f\u9019\u4e0d\u662f\u80fd\u529b\u4e0d\u5920\uff0c\u800c\u662f\u72c0\u614b\u5931\u53bb\u4e86\u5e73\u8861\u3002\u5e36\u4f60\u770b\u898b\u53cd\u8986\u6d88\u8017\u7684\u60c5\u7dd2\u76f2\u9ede\uff0c\u91cd\u65b0\u7a69\u4f4f\u5167\u5728\u7bc0\u594f\u3002<\/p>\r\n \r\n <div class=\"card-footer-flex-column\">\r\n <div class=\"group-discount-text\">\r\n <span>\u5169\u4eba\u540c\u884c <strong>\u4eab\u5c08\u5c6c\u512a\u60e0<\/strong><\/span>\r\n <span>\u4e09\u4eba\u540c\u884c <strong>\u4eab\u5c08\u6848\u6298\u6263<\/strong><\/span>\r\n <\/div>\r\n <div class=\"price-and-action\">\r\n <div class=\"price-group-strikethrough\">\r\n <span class=\"price-label\">\u65b9\u6848\u8a73\u60c5<\/span>\r\n <span class=\"price-val\">\u8acb\u6d3d\u5b98\u65b9\u9867\u554f<\/span>\r\n <\/div>\r\n <a href=\"#booking\" class=\"btn-buy\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>\r\n \u7acb\u5373\u5831\u540d\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#relationship\" class=\"course-card-premium\">\r\n <div class=\"card-image-wrap\">\r\n <span class=\"status-badge new\">RELATIONSHIP<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2026\/01\/entrepreneur-talking-colleague.png\" alt=\"\u95dc\u4fc2\u68b3\u7406\">\r\n <\/div>\r\n <div class=\"card-content\">\r\n <div class=\"category-chip\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"\/><\/svg>\r\n \u6a21\u7d44\u4e8c\uff5c\u95dc\u4fc2\u68b3\u7406\r\n <\/div>\r\n <h3 class=\"card-title\">\u95dc\u4fc2\u54c1\u8cea\u8207\u60c5\u7dd2\u6574\u7406<\/h3>\r\n <p class=\"card-desc\">\u70ba\u4ec0\u9ebc\u6709\u4e9b\u95dc\u4fc2\u8b93\u4f60\u8d8a\u4f86\u8d8a\u7d2f\uff0c\u751a\u81f3\u5f71\u97ff\u5de5\u4f5c\u72c0\u614b\uff1f\u5b78\u6703\u7406\u89e3\u60c5\u7dd2\u5806\u7a4d\u7684\u6839\u6e90\uff0c\u8b93\u95dc\u4fc2\u4e92\u52d5\u66f4\u9806\u66a2\uff0c\u6e9d\u901a\u8868\u9054\u66f4\u6709\u529b\u91cf\u3002<\/p>\r\n \r\n <div class=\"card-footer-flex-row\">\r\n <div class=\"price-group\">\r\n <span class=\"price-label\">INNER BALANCE<\/span>\r\n <span class=\"price-val\" style=\"font-size: 16px;\">\u4e86\u89e3\u8a73\u60c5<\/span>\r\n <\/div>\r\n <div class=\"action-circle\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <div class=\"course-card-premium\">\r\n <div class=\"card-image-wrap\">\r\n <span class=\"status-badge rec\">PERFORMANCE<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2026\/01\/photo_2026-01-16_15-27-39.jpg\" alt=\"\u5546\u696d\u8868\u73fe\">\r\n <\/div>\r\n <div class=\"card-content\">\r\n <div class=\"category-chip\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\"\/><\/svg>\r\n \u6a21\u7d44\u4e09\uff5c\u5546\u696d\u8868\u73fe\r\n <\/div>\r\n <h3 class=\"card-title\">\u8077\u5834\u8868\u73fe\u8207\u6c7a\u7b56\u512a\u5316<\/h3>\r\n <p class=\"card-desc\">\u7576\u4e00\u500b\u4eba\u7684\u5167\u5728\u7bc0\u594f\u958b\u59cb\u7a69\u5b9a\uff0c\u505a\u4e8b\u6703\u66f4\u6709\u65b9\u5411\uff0c\u6c7a\u7b56\u4e0d\u518d\u9072\u7591\u3002\u4e0d\u518d\u88ab\u5931\u8861\u7684\u7bc0\u594f\u62d6\u7d2f\uff0c\u81ea\u7136\u63d0\u5347\u6574\u9ad4\u7684\u5de5\u4f5c\u8207\u4eba\u751f\u8868\u73fe\u3002<\/p>\r\n \r\n <div class=\"card-footer-flex-row\">\r\n <div class=\"price-group\">\r\n <span class=\"price-label\">LIFE & CAREER<\/span>\r\n <span class=\"price-val\" style=\"font-size: 16px;\">\u4e86\u89e3\u8a73\u60c5<\/span>\r\n <\/div>\r\n <div class=\"action-circle\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\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<div class=\"elementor-element elementor-element-b01ad3e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"b01ad3e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-171782d elementor-widget elementor-widget-html\" data-id=\"171782d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* =============================== *\/\r\n \/* \u96b1\u79c1\u6b0a\u653f\u7b56 \u5c08\u5c6c\u6a23\u5f0f *\/\r\n \/* =============================== *\/\r\n .privacy-container {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n color: #475569; \/* \u6df1\u7070\u5b57\u9ad4\uff0c\u6bd4\u7d14\u9ed1\u67d4\u548c *\/\r\n background-color: #fff;\r\n }\r\n\r\n \/* \u6a19\u984c\u6a23\u5f0f *\/\r\n .privacy-main-title {\r\n font-size: 24px;\r\n font-weight: 700;\r\n color: #1E4BAF; \/* \u54c1\u724c\u85cd *\/\r\n text-align: center;\r\n margin-bottom: 40px;\r\n border-bottom: 2px solid #E2E8F0;\r\n padding-bottom: 20px;\r\n }\r\n\r\n .privacy-section-title {\r\n font-size: 16px; \/* \u5c0f\u6a19\u984c *\/\r\n font-weight: 700;\r\n color: #0F172A; \/* \u63a5\u8fd1\u9ed1\u8272 *\/\r\n margin-top: 30px;\r\n margin-bottom: 12px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n \/* \u5c0f\u6a19\u984c\u5de6\u5074\u7684\u85cd\u8272\u88dd\u98fe\u7dda *\/\r\n .privacy-section-title::before {\r\n content: '';\r\n display: inline-block;\r\n width: 4px;\r\n height: 18px;\r\n background: #1E4BAF;\r\n margin-right: 10px;\r\n border-radius: 2px;\r\n }\r\n\r\n \/* \u5167\u6587\u6a23\u5f0f - \u5b57\u9ad4\u8f03\u5c0f *\/\r\n .privacy-content {\r\n font-size: 13.5px; \/* \u8a2d\u5b9a\u70ba\u8f03\u5c0f\u5b57\u9ad4 *\/\r\n line-height: 1.8; \/* \u884c\u9ad8\u62c9\u5927\uff0c\u589e\u52a0\u6613\u8b80\u6027 *\/\r\n text-align: justify;\r\n }\r\n\r\n \/* \u5217\u8868\u6a23\u5f0f *\/\r\n .privacy-list {\r\n margin: 10px 0 20px 20px;\r\n padding-left: 15px;\r\n list-style-type: disc;\r\n }\r\n\r\n .privacy-list li {\r\n margin-bottom: 5px;\r\n }\r\n\r\n \/* \u806f\u7d61\u4fe1\u7bb1\u5340\u584a *\/\r\n .contact-box {\r\n background-color: #F8FAFC;\r\n border: 1px solid #E2E8F0;\r\n border-radius: 8px;\r\n padding: 15px;\r\n margin-top: 10px;\r\n color: #1E4BAF;\r\n font-weight: 600;\r\n }\r\n\r\n .contact-box a {\r\n color: #1E4BAF;\r\n text-decoration: none;\r\n border-bottom: 1px dashed #1E4BAF;\r\n }\r\n\r\n .contact-box a:hover {\r\n border-bottom-style: solid;\r\n }\r\n\r\n \/* \u624b\u6a5f\u7248\u5fae\u8abf *\/\r\n @media (max-width: 768px) {\r\n .privacy-container {\r\n padding: 30px 20px;\r\n }\r\n .privacy-main-title {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"privacy-container\">\r\n\r\n <h1 class=\"privacy-main-title\">\u96b1\u79c1\u6b0a\u653f\u7b56\uff08Privacy Policy\uff09<\/h1>\r\n\r\n <div class=\"privacy-content\">\r\n <p>\u6cdb\u6d77\u5546\u5b78\u9662\uff08\u4ee5\u4e0b\u7c21\u7a31\u300c\u672c\u5e73\u53f0\u300d\uff09\u975e\u5e38\u91cd\u8996\u60a8\u7684\u500b\u4eba\u8cc7\u6599\u8207\u96b1\u79c1\u6b0a\u4fdd\u8b77\u3002\u70ba\u4e86\u8b93\u60a8\u5b89\u5fc3\u4f7f\u7528\u672c\u5e73\u53f0\u6240\u63d0\u4f9b\u7684\u5404\u9805\u670d\u52d9\uff0c\u7279\u6b64\u8aaa\u660e\u672c\u5e73\u53f0\u7684\u96b1\u79c1\u6b0a\u653f\u7b56\uff0c\u4ee5\u4fdd\u969c\u60a8\u7684\u6b0a\u76ca\u3002<\/p>\r\n\r\n <h3 class=\"privacy-section-title\">\u4e00\u3001\u500b\u4eba\u8cc7\u6599\u7684\u8490\u96c6\u65b9\u5f0f<\/h3>\r\n <p>\u7576\u60a8\u900f\u904e\u672c\u5e73\u53f0\u53c3\u8207\u6d3b\u52d5\u3001\u586b\u5beb\u8868\u55ae\u6216\u8207\u6211\u5011\u806f\u7e6b\u6642\uff0c\u6211\u5011\u53ef\u80fd\u6703\u4f9d\u5be6\u969b\u9700\u6c42\u8490\u96c6\u4ee5\u4e0b\u500b\u4eba\u8cc7\u6599\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>\u59d3\u540d<\/li>\r\n <li>\u96fb\u5b50\u90f5\u4ef6\u5730\u5740<\/li>\r\n <li>\u5176\u4ed6\u60a8\u4e3b\u52d5\u63d0\u4f9b\u7684\u806f\u7d61\u8cc7\u8a0a<\/li>\r\n <\/ul>\r\n <p>\u672c\u5e73\u53f0\u50c5\u5728\u5fc5\u8981\u7bc4\u570d\u5167\u8490\u96c6\u76f8\u95dc\u8cc7\u6599\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e8c\u3001\u500b\u4eba\u8cc7\u6599\u7684\u4f7f\u7528\u76ee\u7684<\/h3>\r\n <p>\u672c\u5e73\u53f0\u8490\u96c6\u4e4b\u500b\u4eba\u8cc7\u6599\uff0c\u50c5\u7528\u65bc\u4ee5\u4e0b\u76ee\u7684\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>\u6d3b\u52d5\u8cc7\u8a0a\u901a\u77e5\u8207\u76f8\u95dc\u806f\u7e6b<\/li>\r\n <li>\u8ab2\u7a0b\u3001\u5b78\u7fd2\u5167\u5bb9\u6216\u670d\u52d9\u8cc7\u8a0a\u63d0\u4f9b<\/li>\r\n <li>\u4f7f\u7528\u8005\u95dc\u4fc2\u7ba1\u7406\u8207\u670d\u52d9\u54c1\u8cea\u63d0\u5347<\/li>\r\n <\/ul>\r\n <p>\u672c\u5e73\u53f0\u4e0d\u6703\u5c07\u60a8\u7684\u500b\u4eba\u8cc7\u6599\u7528\u65bc\u4e0a\u8ff0\u76ee\u7684\u4ee5\u5916\u4e4b\u7528\u9014\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e09\u3001\u7b2c\u4e09\u65b9\u5e73\u53f0\u4e4b\u4f7f\u7528\u8aaa\u660e<\/h3>\r\n <p>\u70ba\u63d0\u4f9b\u670d\u52d9\u8207\u9032\u884c\u6d3b\u52d5\u63a8\u5ee3\uff0c\u672c\u5e73\u53f0\u53ef\u80fd\u900f\u904e\u4ee5\u4e0b\u7b2c\u4e09\u65b9\u5e73\u53f0\u8490\u96c6\u6216\u8655\u7406\u8cc7\u6599\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>Facebook\uff08Meta\uff09<\/li>\r\n <li>LINE<\/li>\r\n <\/ul>\r\n <p>\u4e0a\u8ff0\u5e73\u53f0\u7684\u8cc7\u6599\u4f7f\u7528\u65b9\u5f0f\uff0c\u5c07\u4f9d\u5176\u5404\u81ea\u4e4b\u96b1\u79c1\u6b0a\u653f\u7b56\u898f\u7bc4\u8fa6\u7406\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u56db\u3001\u500b\u4eba\u8cc7\u6599\u7684\u4fdd\u8b77\u8207\u4fdd\u5b58<\/h3>\r\n <p>\u672c\u5e73\u53f0\u5c07\u63a1\u53d6\u5408\u7406\u7684\u6280\u8853\u8207\u7ba1\u7406\u63aa\u65bd\uff0c\u4ee5\u4fdd\u8b77\u60a8\u7684\u500b\u4eba\u8cc7\u6599\uff0c\u9632\u6b62\u672a\u7d93\u6388\u6b0a\u7684\u5b58\u53d6\u3001\u6d29\u6f0f\u3001\u7ac4\u6539\u6216\u640d\u6bc0\u3002\u60a8\u7684\u500b\u4eba\u8cc7\u6599\u50c5\u5728\u9054\u6210\u8490\u96c6\u76ee\u7684\u6240\u9700\u671f\u9593\u5167\u4fdd\u5b58\uff0c\u4e26\u65bc\u76ee\u7684\u5b8c\u6210\u5f8c\u4f9d\u76f8\u95dc\u898f\u5b9a\u8655\u7406\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e94\u3001\u4f7f\u7528\u8005\u6b0a\u5229<\/h3>\r\n <p>\u60a8\u53ef\u96a8\u6642\u5411\u672c\u5e73\u53f0\u63d0\u51fa\u4ee5\u4e0b\u8acb\u6c42\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>\u67e5\u8a62\u6216\u95b1\u89bd\u60a8\u7684\u500b\u4eba\u8cc7\u6599<\/li>\r\n <li>\u8acb\u6c42\u88dc\u5145\u3001\u66f4\u6b63\u6216\u522a\u9664\u60a8\u7684\u500b\u4eba\u8cc7\u6599<\/li>\r\n <li>\u505c\u6b62\u500b\u4eba\u8cc7\u6599\u4e4b\u8490\u96c6\u3001\u8655\u7406\u6216\u4f7f\u7528<\/li>\r\n <\/ul>\r\n <p>\u5982\u6709\u76f8\u95dc\u9700\u6c42\uff0c\u8acb\u900f\u904e\u4e0b\u65b9\u806f\u7d61\u65b9\u5f0f\u8207\u6211\u5011\u806f\u7e6b\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u516d\u3001\u806f\u7d61\u65b9\u5f0f<\/h3>\r\n <p>\u82e5\u60a8\u5c0d\u672c\u96b1\u79c1\u6b0a\u653f\u7b56\u6216\u500b\u4eba\u8cc7\u6599\u4e4b\u8655\u7406\u6709\u4efb\u4f55\u7591\u554f\uff0c\u6b61\u8fce\u8207\u6211\u5011\u806f\u7d61\uff1a<\/p>\r\n <div class=\"contact-box\">\r\n \u96fb\u5b50\u90f5\u4ef6\uff1a<a href=\"mailto:contact@finhive.academy\">contact@finhive.academy<\/a>\r\n <\/div>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e03\u3001\u96b1\u79c1\u6b0a\u653f\u7b56\u4e4b\u4fee\u8a02<\/h3>\r\n <p>\u672c\u5e73\u53f0\u6709\u6b0a\u8996\u5be6\u969b\u9700\u6c42\u4fee\u8a02\u672c\u96b1\u79c1\u6b0a\u653f\u7b56\u3002\u4fee\u8a02\u5f8c\u4e4b\u5167\u5bb9\u5c07\u516c\u544a\u65bc\u672c\u7db2\u7ad9\uff0c\u4e0d\u53e6\u884c\u500b\u5225\u901a\u77e5\u3002<\/p>\r\n <\/div>\r\n\r\n<\/div>\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-1b4bff9 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"1b4bff9\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b71ed73 elementor-widget elementor-widget-html\" data-id=\"b71ed73\" data-element_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>Footer Style<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u63d0\u53d6\u81ea\u7968\u5238\u8996\u89ba) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #; \/* \u80cc\u666f\u5e95\u8272 *\/\r\n --blue-main: #1E4BAF; \/* \u54c1\u724c\u4e3b\u85cd\u8272 *\/\r\n --blue-dark: #0F172A; \/* \u6df1\u8272\u6587\u5b57 *\/\r\n \/* \u7968\u5238\u6b3e\u7684\u6de1\u85cd\u8272\u7db2\u683c\u984f\u8272 *\/\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u9801\u5c3e\u5bb9\u5668\u8a2d\u5b9a *\/\r\n \/* ======================= *\/\r\n .final-section-footer {\r\n position: relative;\r\n width: 100%;\r\n \/* \u4e0a\u4e0b\u7559\u767d\uff0c\u78ba\u4fdd\u8996\u89ba\u547c\u5438\u611f *\/\r\n padding: 60px 20px 80px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n overflow: hidden;\r\n background-color: var(--bg-page);\r\n border-top: 1px solid rgba(30, 75, 175, 0.1); \/* \u9802\u90e8\u6de1\u6de1\u7684\u5206\u9694\u7dda *\/\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u63d0\u53d6\u7684\u80cc\u666f\u5143\u7d20\uff1a\u7db2\u683c *\/\r\n \/* ======================= *\/\r\n .grid-bg-footer {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: 0; \/* \u653e\u5728\u6700\u5e95\u5c64 *\/\r\n \r\n \/* \u7968\u5238\u6b3e\u7684\u7db2\u683c\u53c3\u6578 *\/\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n \r\n \/* \u4e2d\u5fc3\u805a\u5149\u906e\u7f69\uff0c\u8b93\u5468\u570d\u6de1\u51fa *\/\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u5167\u5bb9\u5340\u584a *\/\r\n \/* ======================= *\/\r\n .footer-content {\r\n position: relative;\r\n z-index: 2; \/* \u78ba\u4fdd\u5167\u5bb9\u5728\u7db2\u683c\u4e4b\u4e0a *\/\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px; \/* \u884c\u8ddd *\/\r\n align-items: center;\r\n }\r\n\r\n \/* \u516c\u53f8\u540d\u7a31\u6a23\u5f0f *\/\r\n .company-item {\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: var(--blue-dark);\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px; \/* \u540d\u7a31\u8207\u7d71\u7de8\u4e4b\u9593\u7684\u8ddd\u96e2 *\/\r\n }\r\n\r\n \/* \u7d71\u7de8\u6a19\u7c64 (\u6cbf\u7528\u7968\u5238 Tag \u98a8\u683c) *\/\r\n .tax-id-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n background-color: #EFF6FF; \/* \u6dfa\u85cd\u5e95 *\/\r\n color: var(--blue-main); \/* \u54c1\u724c\u85cd\u5b57 *\/\r\n font-size: 13px;\r\n font-weight: 600;\r\n padding: 4px 12px;\r\n border-radius: 50px; \/* \u5713\u89d2\u81a0\u56ca\u72c0 *\/\r\n border: 1px solid rgba(30, 75, 175, 0.15);\r\n letter-spacing: 0.5px;\r\n font-family: monospace, \"Noto Sans TC\"; \/* \u8b93\u6578\u5b57\u7a0d\u5fae\u7b49\u5bec\u4e00\u9ede *\/\r\n }\r\n\r\n \/* RWD \u5c0f\u8abf\u6574 *\/\r\n @media (max-width: 480px) {\r\n .company-item {\r\n flex-direction: column; \/* \u624b\u6a5f\u7248\u540d\u7a31\u548c\u7d71\u7de8\u5782\u76f4\u6392\u5217 *\/\r\n gap: 8px;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <footer class=\"final-section-footer\">\r\n \r\n <div class=\"grid-bg-footer\"><\/div>\r\n\r\n <div class=\"footer-content\">\r\n \r\n <div class=\"company-item\">\r\n \r\n <span class=\"tax-id-tag\">\u7d71\u7de8 90543650<\/span>\r\n <\/div>\r\n\r\n <div class=\"company-item\">\r\n \u7121\u7586\u884c\u92b7\u80a1\u4efd\u6709\u9650\u516c\u53f8\r\n <\/div>\r\n\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>Universal Header (Fixed Paths) \u5546\u5b78\u9662 \u8ab2\u7a0b\u5831\u540d \u5a92\u9ad4\u5831\u5c0e \u5275\u4f5c\u8005\u8a08\u756b Line \u5b98\u65b9\u7fa4 \u279c Hero – Clean Version \u9748\u8b58\u89ba\u9192\u8ab2\u7a0b \u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1 \u2713 \u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u5efa\u7acb\u7a69\u5b9a\u8f38\u51fa\u7684\u8077\u5834\u7bc0\u594f \u2713 \u4e0d\u518d\u5f37\u8feb\u63a8\u92b7\uff0c\u7528\u9ad8\u4fe1\u4efb\u611f\u81ea\u7136\u653e\u5927\u6210\u4ea4 \u4e86\u89e3\u9748\u8b58\u89ba\u9192\u8ab2\u7a0b \ud83d\udc41\ufe0f \u89ba\u5bdf\u5347\u7d1a Inner Awareness \ud83d\udd0b \u72c0\u614b\u6821\u6e96 State Alignment \ud83d\udc8e \u5916\u5728\u6210\u679c Real Impact Pain Points – Creative Cluster \u4f60\u4e0d\u662f\u4e0d\u5920\u52aa\u529b\uff0c \u800c\u662f\u9084\u6c92\u6709 \u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1 \ud83d\udcc9 \u696d\u7e3e\u8207\u8868\u73fe\u4e0d\u7a69\u5b9a \u660e\u660e\u6295\u5165\u5f88\u591a\u6642\u9593\u8207\u5fc3\u529b\uff0c\u751a\u81f3\u6bd4\u5225\u4eba\u66f4\u62fc\u547d\uff0c\u5728\u92b7\u552e\u8207\u8077\u5834\u4e0a\u7684\u7d50\u679c\u537b\u59cb\u7d42\u4e0d\u5982\u9810\u671f\u3002 \ud83c\udf2a\ufe0f \u6301\u7e8c\u5167\u8017\u8207\u7126\u616e \u5e38\u5e38\u5728\u5de5\u4f5c\u4e2d\u61f7\u7591\u81ea\u5df1\uff0c\u72c0\u614b\u5ffd\u9ad8\u5ffd\u4f4e\uff0c\u7e3d\u662f\u5728\u76f8\u4f3c\u7684\u60c5\u7dd2\u8207\u6163\u6027\u5361\u9ede\u88e1\u53cd\u8986\u6d88\u8017\u80fd\u91cf\u3002 \ud83e\udd10 \u50f9\u503c\u7121\u6cd5\u88ab\u770b\u898b \u61c2\u5c08\u696d\u3001\u80af\u505a\u4e8b\uff0c\u537b\u5e38\u5e38\u5361\u5728\u4e0d\u6562\u958b\u53e3\u8207\u63a8\u9032\u95dc\u4fc2\uff0c\u4e0d\u77e5\u9053\u5982\u4f55\u5efa\u7acb\u4fe1\u4efb\u611f\u8207\u500b\u4eba\u5f71\u97ff\u529b\u3002 \u771f\u6b63\u62c9\u958b\u5dee\u8ddd\u7684\uff0c\u5f80\u5f80\u4e0d\u662f\u76f2\u76ee\u52aa\u529b… \u800c\u662f\u5148\u6821\u6e96\u81ea\u5df1\uff0c\u518d\u653e\u5927\u6210\u679c Course Positioning – Clean Blueprint COURSE POSITIONING \u9019\u4e0d\u662f\u4e00\u5802\u7d14\u7cb9\u7684\u6fc0\u52f5\u8ab2 \u800c\u662f\u4e00\u5957 \u300c\u89ba\u9192\u5f0f\u6210\u9577\u7cfb\u7d71\u300d \u2715 \u4e0d\u8ce3\u7a7a\u6cdb\u7684\u5fc3\u9748\u96de\u6e6f \u53ea\u8ac7\u6fc0\u52f5\u537b\u7121\u6cd5\u843d\u5730\uff0c\u71b1\u60c5\u5f88\u5feb\u5c31\u6703\u5728\u73fe\u5be6\u4e2d\u6d88\u8017\u6b86\u76e1\u3002 \u2715 \u4e0d\u6559\u4f60\u5957\u7528\u50f5\u5316\u8a71\u8853 \u786c\u5957\u5225\u4eba\u7684\u6210\u529f\u6a21\u5f0f\uff0c\u53ea\u6703\u8b93\u4f60\u7684\u8868\u9054\u5931\u53bb\u9748\u9b42\u8207\u4fe1\u4efb\u611f\u3002 \u2714 \u91cd\u5efa\u4f60\u7684\u5e95\u5c64\u72c0\u614b\u627e\u56de\u6700\u6709\u529b\u91cf\u7684\u81ea\u5df1 \u6211\u5011\u5148\u5e6b\u4f60\u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u518d\u900f\u904e\u72c0\u614b\u6821\u6e96\u8207\u5929\u8ce6\u8fa8\u8b58\uff0c\u628a\u5167\u5728\u7684\u89ba\u5bdf\u5347\u7d1a\uff0c\u771f\u6b63\u8f49\u5316\u70ba\u5916\u5728\u7684\u5f71\u97ff\u529b\u8207\u6210\u4ea4\u529b\u3002 \u89ba\u5bdf\u5347\u7d1a \u2794 \u72c0\u614b\u6821\u6e96 \u2794 \u6210\u679c\u8f49\u5316 \u5148\u5c0d\u9f4a\u81ea\u5df1\uff0c\u624d\u80fd\u7a69\u5b9a\u653e\u5927\u7d50\u679c\u3002 Core Transformation – Crystal Engines CORE TRANSFORMATION \u9019\u5802\u8ab2\uff0c\u5c07\u5e36\u4f60\u5b8c\u6210 \u4e09\u5927\u6838\u5fc3\u5347\u7d1a 01 \u89ba\u5bdf\u5347\u7d1a \u8fa8\u8b58\u5728\u5de5\u4f5c\u8207\u4eba\u969b\u95dc\u4fc2\u4e2d\u7684\u6163\u6027\u5361\u9ede\uff0c\u770b\u898b\u554f\u984c\u6839\u6e90\uff0c\u505c\u6b62\u7121\u6548\u7684\u5167\u8017\u8207\u76f2\u76ee\u52aa\u529b\u3002 Inner Awareness 02 \u72c0\u614b\u6821\u6e96 \u7a69\u5b9a\u5167\u5728\u80fd\u91cf\u3002\u5f9e\u6df7\u4e82\u7684\u601d\u7dd2\u4e2d\u62bd\u96e2\uff0c\u5efa\u7acb\u6e05\u6670\u3001\u7a69\u5b9a\u4e14\u5145\u6eff\u529b\u91cf\u7684\u8077\u5834\u8f38\u51fa\u7bc0\u594f\u3002 State Alignment 03 \u6210\u679c\u653e\u5927 \u7d50\u5408\u4fe1\u4efb\u611f\u5efa\u7acb\u8207 AI \u79d1\u6280\u8ce6\u80fd\uff0c\u5c07\u7a69\u5b9a\u7684\u5167\u5728\u80fd\u91cf\u81ea\u7136\u8f49\u5316\u70ba\u5916\u5728\u7684\u696d\u7e3e\u8207\u5f71\u97ff<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-385","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages\/385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/finhive.academy\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=385"}],"version-history":[{"count":5,"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages\/385\/revisions"}],"predecessor-version":[{"id":575,"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages\/385\/revisions\/575"}],"wp:attachment":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nUniversal Header (Fixed Paths)<\/title>\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\">\r\n\r\n<style>\r\n \/* =============================== *\/\r\n \/* 1. \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* =============================== *\/\r\n :root {\r\n --header-height: 70px;\r\n --primary-blue: #1E4BAF;\r\n --primary-gradient: linear-gradient(135deg, #1E4BAF 0%, #3B82F6 100%);\r\n --text-dark: #0F172A;\r\n --glass-bg: rgba(255, 255, 255, 0.95);\r\n --border-glass: rgba(226, 232, 240, 0.8);\r\n --shadow-header: 0 4px 20px rgba(0, 0, 0, 0.05);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n margin: 0;\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n padding-top: var(--header-height);\r\n background-color: #F5F7FF;\r\n }\r\n\r\n \/* =============================== *\/\r\n \/* 2. Header \u6a23\u5f0f *\/\r\n \/* =============================== *\/\r\n .site-header {\r\n position: fixed; top: 0; left: 0; width: 100%;\r\n height: var(--header-height);\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(10px);\r\n -webkit-backdrop-filter: blur(10px);\r\n border-bottom: 1px solid var(--border-glass);\r\n z-index: 1000;\r\n box-shadow: var(--shadow-header);\r\n }\r\n\r\n .header-container {\r\n max-width: 1320px; \r\n margin: 0 auto; \r\n padding: 0 24px;\r\n height: 100%;\r\n display: flex; \r\n align-items: center; \r\n justify-content: space-between;\r\n }\r\n\r\n \/* Logo *\/\r\n .logo-link {\r\n display: flex; align-items: center; text-decoration: none;\r\n height: 100%; flex-shrink: 0; margin-right: 40px;\r\n }\r\n \r\n .site-logo {\r\n display: block;\r\n max-height: 40px; \r\n width: auto;\r\n object-fit: contain;\r\n }\r\n\r\n \/* \u5c0e\u822a\u9078\u55ae\u5bb9\u5668 *\/\r\n .main-nav { \r\n display: flex; \r\n align-items: center; \r\n height: 100%; \r\n gap: 30px; \/* \u589e\u52a0\u6587\u5b57\u9078\u55ae\u8207\u793e\u7fa4icon\u7684\u9593\u8ddd *\/\r\n }\r\n\r\n \/* \u6587\u5b57\u5217\u8868 *\/\r\n .nav-list {\r\n display: flex; list-style: none; gap: 20px; margin: 0; padding: 0;\r\n align-items: center;\r\n }\r\n\r\n .nav-item a {\r\n text-decoration: none;\r\n font-size: 15px; font-weight: 600; color: var(--text-dark);\r\n padding: 8px 12px; border-radius: 6px;\r\n transition: all 0.2s ease; white-space: nowrap; position: relative;\r\n }\r\n\r\n .nav-item a:not(.btn-cta):hover { color: var(--primary-blue); }\r\n .nav-item a:not(.btn-cta):::after {\r\n content: ''; position: absolute; bottom: 0; left: 50%;\r\n width: 0; height: 2px; background: var(--primary-gradient);\r\n transition: 0.3s; transform: translateX(-50%);\r\n }\r\n .nav-item a:not(.btn-cta):hover::after { width: 80%; }\r\n\r\n \/* CTA \u6309\u9215 *\/\r\n .btn-cta {\r\n padding: 8px 20px !important;\r\n background: var(--primary-gradient); color: #fff !important;\r\n border-radius: 50px;\r\n box-shadow: 0 4px 10px rgba(30, 75, 175, 0.2);\r\n display: flex; align-items: center; gap: 6px;\r\n }\r\n .btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(30, 75, 175, 0.3); filter: brightness(1.1); }\r\n\r\n \/* =============================== *\/\r\n \/* 3. \u793e\u7fa4\u5716\u793a\u6a23\u5f0f (\u65b0\u589e\u90e8\u5206) *\/\r\n \/* =============================== *\/\r\n .social-icons {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n padding-left: 10px;\r\n border-left: 1px solid rgba(0,0,0,0.1); \/* \u52a0\u4e0a\u5206\u9694\u7dda *\/\r\n }\r\n\r\n .social-link {\r\n color: var(--text-dark);\r\n font-size: 18px;\r\n transition: all 0.3s ease;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-decoration: none;\r\n }\r\n\r\n .social-link:hover {\r\n color: var(--primary-blue);\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* \u624b\u6a5f\u7248\u6f22\u5821\u6309\u9215 *\/\r\n .mobile-menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 1002;}\r\n .hamburger-icon { width: 24px; height: 2px; background: var(--text-dark); position: relative; transition: 0.3s; }\r\n .hamburger-icon::before, .hamburger-icon::after {\r\n content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--text-dark); transition: 0.3s;\r\n }\r\n .hamburger-icon::before { top: -8px; }\r\n .hamburger-icon::after { top: 8px; }\r\n .mobile-menu-btn.active .hamburger-icon { background: transparent; }\r\n .mobile-menu-btn.active .hamburger-icon::before { top: 0; transform: rotate(45deg); }\r\n .mobile-menu-btn.active .hamburger-icon::after { top: 0; transform: rotate(-45deg); }\r\n\r\n \/* RWD \u624b\u6a5f\u7248\u8abf\u6574 *\/\r\n @media (max-width: 1100px) {\r\n .mobile-menu-btn { display: block; }\r\n .main-nav {\r\n position: fixed; top: 0; right: -100%; width: 100%; height: 100vh;\r\n background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(15px);\r\n flex-direction: column; justify-content: center; padding: 40px;\r\n transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);\r\n z-index: 1001; box-shadow: -5px 0 20px rgba(0,0,0,0.05);\r\n gap: 30px; \/* \u589e\u52a0\u5340\u584a\u9593\u8ddd *\/\r\n }\r\n .main-nav.active { right: 0; }\r\n .nav-list { flex-direction: column; gap: 24px; text-align: center; width: 100%; }\r\n .nav-item a { font-size: 20px; font-weight: 700; display: block; padding: 10px; }\r\n .btn-cta { width: 100%; justify-content: center; margin-top: 10px; padding: 15px !important; font-size: 18px !important; }\r\n\r\n \/* \u624b\u6a5f\u7248\u793e\u7fa4\u5716\u793a\u8abf\u6574 *\/\r\n .social-icons {\r\n border-left: none; \/* \u624b\u6a5f\u7248\u79fb\u9664\u5206\u9694\u7dda *\/\r\n border-top: 1px solid rgba(0,0,0,0.1); \/* \u6539\u70ba\u4e0a\u65b9\u5206\u9694\u7dda *\/\r\n padding-left: 0;\r\n padding-top: 25px;\r\n margin-top: 10px;\r\n width: 100%;\r\n justify-content: center; \/* \u7f6e\u4e2d *\/\r\n gap: 25px; \/* \u62c9\u5927\u5716\u793a\u9593\u8ddd\u65b9\u4fbf\u9ede\u64ca *\/\r\n }\r\n .social-link {\r\n font-size: 24px; \/* \u624b\u6a5f\u7248\u653e\u5927 icon *\/\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<header class=\"site-header\">\r\n <div class=\"header-container\">\r\n \r\n <a href=\"\/index.html\" class=\"logo-link\">\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2025\/12\/cropped-cropped-\u6cdb\u6d77\u5546\u5b78\u9662-2.png\" \r\n alt=\"\u6cdb\u6d77\u5546\u5b78\u9662\" \r\n class=\"site-logo\"\r\n style=\"max-height: 40px;\">\r\n <\/a>\r\n\r\n <button class=\"mobile-menu-btn\" aria-label=\"Menu\">\r\n <div class=\"hamburger-icon\"><\/div>\r\n <\/button>\r\n\r\n <nav class=\"main-nav\">\r\n <ul class=\"nav-list\">\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"\/index.html\" onclick=\"closeMenu()\">\u5546\u5b78\u9662<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/finhive.academy\/?page_id=385\" onclick=\"closeMenu()\">\u8ab2\u7a0b\u5831\u540d<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/finhive.academy\/?page_id=155#press\" onclick=\"closeMenu()\">\u5a92\u9ad4\u5831\u5c0e<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"\/creator.html#creator\" onclick=\"closeMenu()\">\u5275\u4f5c\u8005\u8a08\u756b<\/a>\r\n <\/li>\r\n \r\n <li class=\"nav-item\">\r\n <a href=\"https:\/\/line.me\/\" target=\"_blank\" class=\"btn-cta\">\r\n Line \u5b98\u65b9\u7fa4 \u279c\r\n <\/a>\r\n <\/li>\r\n <\/ul>\r\n\r\n <div class=\"social-icons\">\r\n <a href=\"https:\/\/www.facebook.com\/profile.php?id=61585585437851\" target=\"_blank\" class=\"social-link\" aria-label=\"Facebook\">\r\n <i class=\"fa-brands fa-facebook\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.instagram.com\/finhive_academy\/\" target=\"_blank\" class=\"social-link\" aria-label=\"Instagram\">\r\n <i class=\"fa-brands fa-instagram\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.threads.com\/@finhive_academy\" target=\"_blank\" class=\"social-link\" aria-label=\"Threads\">\r\n <i class=\"fa-brands fa-threads\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.tiktok.com\/@finhive_academy\" target=\"_blank\" class=\"social-link\" aria-label=\"TikTok\">\r\n <i class=\"fa-brands fa-tiktok\"><\/i>\r\n <\/a>\r\n <a href=\"https:\/\/www.youtube.com\/channel\/UCcg-XPvwxAkVTshONMVreDA\" target=\"_blank\" class=\"social-link\" aria-label=\"YouTube\">\r\n <i class=\"fa-brands fa-youtube\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/nav>\r\n\r\n <\/div>\r\n<\/header>\r\n\r\n<script>\r\n const menuBtn = document.querySelector('.mobile-menu-btn');\r\n const mainNav = document.querySelector('.main-nav');\r\n \r\n \/\/ \u5207\u63db\u9078\u55ae\r\n menuBtn.addEventListener('click', () => {\r\n menuBtn.classList.toggle('active');\r\n mainNav.classList.toggle('active');\r\n document.body.style.overflow = mainNav.classList.contains('active') ? 'hidden' : '';\r\n });\r\n\r\n \/\/ \u9ede\u64ca\u5f8c\u95dc\u9589 (\u624b\u6a5f\u7248\u7528)\r\n function closeMenu() {\r\n menuBtn.classList.remove('active');\r\n mainNav.classList.remove('active');\r\n document.body.style.overflow = '';\r\n }\r\n<\/script>\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<div class=\"elementor-element elementor-element-7fa88e2 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"7fa88e2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-90aa501 elementor-widget elementor-widget-html\" data-id=\"90aa501\" data-element_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>Hero - Clean Version<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --white: #FFFFFF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-light: #EFF6FF;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n line-height: 1.6;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- \u80cc\u666f\u88dd\u98fe --- *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 90%);\r\n }\r\n \r\n .ambient-light {\r\n position: absolute; width: 800px; height: 800px;\r\n background: radial-gradient(circle, rgba(96, 165, 250, 0.15) 0%, transparent 70%);\r\n top: -20%; right: -10%; z-index: -1;\r\n animation: breath-light 8s infinite ease-in-out;\r\n pointer-events: none;\r\n }\r\n @keyframes breath-light { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 0.5; } }\r\n\r\n \/* ======================= *\/\r\n \/* Hero \u5340\u584a\u4f48\u5c40 *\/\r\n \/* ======================= *\/\r\n .hero-section {\r\n position: relative;\r\n min-height: 100vh;\r\n padding: 80px 6%;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n\r\n .hero-container {\r\n max-width: 1280px; width: 100%;\r\n display: grid;\r\n grid-template-columns: 1.1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u5de6\u5074\uff1a\u6587\u6848\u5340 *\/\r\n \/* ======================= *\/\r\n .hero-content {\r\n position: relative; z-index: 10;\r\n display: flex; flex-direction: column; align-items: flex-start;\r\n animation: fade-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;\r\n opacity: 0; transform: translateY(20px);\r\n }\r\n @keyframes fade-up { to { opacity: 1; transform: translateY(0); } }\r\n\r\n .hero-h1 {\r\n font-size: 64px; font-weight: 900; line-height: 1.15;\r\n color: var(--blue-dark); margin-bottom: 24px; letter-spacing: -2px;\r\n }\r\n .text-gradient {\r\n background: linear-gradient(135deg, var(--blue-main) 0%, #3B82F6 50%, #2563EB 100%);\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n display: inline-block;\r\n }\r\n \r\n .hero-h2 {\r\n font-size: 20px; font-weight: 500; color: var(--text-sub);\r\n margin-bottom: 40px; display: flex; flex-direction: column; gap: 16px;\r\n }\r\n .check-item { display: flex; align-items: center; gap: 12px; }\r\n .check-icon {\r\n color: var(--blue-main); font-size: 16px;\r\n background: #fff; border: 1px solid rgba(37, 99, 235, 0.2);\r\n box-shadow: 0 4px 10px rgba(37, 99, 235, 0.1);\r\n border-radius: 50%; width: 28px; height: 28px;\r\n display: flex; align-items: center; justify-content: center;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* CTA \u5340\u57df *\/\r\n .cta-wrapper { display: flex; flex-direction: column; align-items: flex-start; }\r\n \r\n .hero-btn {\r\n position: relative; padding: 22px 56px;\r\n background: linear-gradient(135deg, var(--blue-main), #2563EB);\r\n color: #fff; font-size: 20px; font-weight: 700;\r\n border-radius: 16px; text-decoration: none;\r\n box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);\r\n transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 10px; overflow: hidden;\r\n }\r\n .hero-btn:hover { transform: translateY(-4px); box-shadow: 0 20px 50px rgba(37, 99, 235, 0.5); }\r\n .hero-btn::after {\r\n content: \"\"; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: skewX(-20deg); animation: shine-btn 4s infinite;\r\n }\r\n @keyframes shine-btn { 0% { left: -100%; } 20% { left: 150%; } 100% { left: 150%; } }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* \u53f3\u5074\uff1a\u8996\u89ba\u7cfb\u7d71 *\/\r\n \/* ======================= *\/\r\n .hero-visual {\r\n position: relative;\r\n display: flex; justify-content: center; align-items: center;\r\n perspective: 1000px;\r\n animation: fade-up 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;\r\n opacity: 0; transform: translateY(20px);\r\n }\r\n\r\n .flow-container {\r\n position: relative; width: 100%; max-width: 460px; height: 460px;\r\n }\r\n\r\n \/* SVG \u9023\u7dda (z-index: 0 \u5728\u4e0b\u5c64) *\/\r\n .flow-line-svg {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: 0; pointer-events: none; overflow: visible;\r\n }\r\n .flow-path {\r\n stroke: var(--blue-main); stroke-width: 2; stroke-dasharray: 8 8;\r\n fill: none; opacity: 0.3;\r\n animation: dash-flow 2s linear infinite;\r\n }\r\n @keyframes dash-flow { to { stroke-dashoffset: -100; } }\r\n\r\n \/* \u73bb\u7483\u5361\u7247 (z-index: 2 \u5728\u4e0a\u5c64) *\/\r\n .flow-card {\r\n position: absolute;\r\n background: #fff; \/* \u4e0d\u900f\u660e\u80cc\u666f\uff0c\u906e\u4f4f\u7dda\u689d *\/\r\n border: 1px solid rgba(255,255,255,0.9);\r\n border-radius: 24px;\r\n padding: 24px;\r\n box-shadow: \r\n 0 20px 40px -10px rgba(30, 75, 175, 0.1),\r\n inset 0 0 0 1px rgba(255, 255, 255, 0.5);\r\n display: flex; flex-direction: column; align-items: center; text-align: center;\r\n width: 170px;\r\n z-index: 2;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .flow-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 30px 60px -12px rgba(30, 75, 175, 0.2);\r\n z-index: 10;\r\n }\r\n\r\n \/* \u5361\u7247\u5b9a\u4f4d *\/\r\n .card-1 { bottom: 40px; left: 0; animation: float-1 6s infinite ease-in-out; }\r\n .card-2 { \r\n top: 50%; left: 50%; transform: translate(-50%, -50%); \r\n width: 210px; padding: 32px 20px;\r\n background: linear-gradient(135deg, #fff, #F0F9FF);\r\n border-color: rgba(191, 219, 254, 0.6);\r\n box-shadow: 0 25px 50px -10px rgba(37, 99, 235, 0.15);\r\n animation: float-2 7s infinite ease-in-out; \r\n z-index: 5;\r\n }\r\n .card-3 { top: 40px; right: 0; background: #FFFBEB; border-color: rgba(253, 230, 138, 0.5); animation: float-3 8s infinite ease-in-out; }\r\n\r\n .card-icon { font-size: 32px; margin-bottom: 10px; }\r\n .card-txt { font-size: 15px; font-weight: 700; color: var(--text-dark); }\r\n .card-sub { font-size: 12px; color: var(--text-sub); }\r\n\r\n @keyframes float-1 { 0%,100%{transform: translateY(0);} 50%{transform: translateY(-12px);} }\r\n @keyframes float-2 { 0%,100%{transform: translate(-50%, -50%);} 50%{transform: translate(-50%, -56%);} }\r\n @keyframes float-3 { 0%,100%{transform: translateY(0);} 50%{transform: translateY(12px);} }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* Mobile RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .hero-section {\r\n padding: 100px 24px 60px;\r\n min-height: auto; align-items: flex-start;\r\n }\r\n .hero-container {\r\n display: flex; flex-direction: column; gap: 60px;\r\n }\r\n \r\n .hero-content { width: 100%; text-align: center; align-items: center; }\r\n .hero-h1 { font-size: 42px; line-height: 1.2; }\r\n .hero-h2 { align-items: flex-start; text-align: left; }\r\n .cta-wrapper { align-items: center; width: 100%; }\r\n .hero-btn { width: 100%; justify-content: center; max-width: 320px; }\r\n\r\n .hero-visual { width: 100%; margin-top: 10px; }\r\n \r\n .flow-container {\r\n display: flex; flex-direction: column; align-items: center;\r\n height: auto; gap: 40px; margin: 0 auto;\r\n }\r\n\r\n .flow-card {\r\n position: relative; \r\n top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;\r\n transform: none !important;\r\n width: 100%; max-width: 220px;\r\n animation: none;\r\n background: #fff; \r\n }\r\n \r\n \/* \u624b\u6a5f\u7248\u932f\u4f4d\u6d6e\u52d5 *\/\r\n .card-1 { transform: translateX(-20px); animation: mob-float 4s infinite ease-in-out; }\r\n .card-2 { transform: translateX(0); z-index: 10; animation: mob-float 4s infinite ease-in-out 1s; width: 240px; }\r\n .card-3 { transform: translateX(20px); animation: mob-float 4s infinite ease-in-out 2s; }\r\n\r\n @keyframes mob-float {\r\n 0%, 100% { transform: translateY(0) translateX(var(--tx)); }\r\n 50% { transform: translateY(-8px) translateX(var(--tx)); }\r\n }\r\n .card-1 { --tx: -20px; } .card-2 { --tx: 0px; } .card-3 { --tx: 20px; }\r\n\r\n \/* SVG \u7dda\u689d\u8abf\u6574 *\/\r\n .pc-curve { display: none; }\r\n .mob-line { display: block; stroke: var(--blue-main); stroke-width: 2; stroke-dasharray: 6 4; opacity: 0.3; }\r\n \r\n \/* \u624b\u6a5f\u7248\u7dda\u689d\u4f4d\u7f6e\u8abf\u6574 *\/\r\n .flow-line-svg { \r\n width: 4px; left: 50%; transform: translateX(-50%);\r\n z-index: -1; \r\n }\r\n }\r\n \r\n @media (min-width: 901px) { .mob-line { display: none; } }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n <div class=\"ambient-light\"><\/div>\r\n\r\n <section class=\"hero-section\">\r\n <div class=\"hero-container\">\r\n \r\n <div class=\"hero-content\">\r\n <h1 class=\"hero-h1\">\r\n <span class=\"text-gradient\">\u9748\u8b58\u89ba\u9192\u8ab2\u7a0b<\/span><br>\r\n \u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1\r\n <\/h1>\r\n \r\n <div class=\"hero-h2\">\r\n <div class=\"check-item\">\r\n <div class=\"check-icon\">\u2713<\/div>\r\n <span>\u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u5efa\u7acb\u7a69\u5b9a\u8f38\u51fa\u7684\u8077\u5834\u7bc0\u594f<\/span>\r\n <\/div>\r\n <div class=\"check-item\">\r\n <div class=\"check-icon\">\u2713<\/div>\r\n <span>\u4e0d\u518d\u5f37\u8feb\u63a8\u92b7\uff0c\u7528\u9ad8\u4fe1\u4efb\u611f\u81ea\u7136\u653e\u5927\u6210\u4ea4<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"cta-wrapper\">\r\n <a href=\"#course-details\" class=\"hero-btn\">\r\n \u4e86\u89e3\u9748\u8b58\u89ba\u9192\u8ab2\u7a0b \r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"hero-visual\">\r\n <div class=\"flow-container\">\r\n \r\n <svg class=\"flow-line-svg\">\r\n <path class=\"flow-path pc-curve\" d=\"M80 340 Q 150 300, 210 200 T 340 60\" \/>\r\n <line class=\"flow-path mob-line\" x1=\"2\" y1=\"0\" x2=\"2\" y2=\"400\" \/>\r\n <\/svg>\r\n\r\n <div class=\"flow-card card-1\">\r\n <div class=\"card-icon\">\ud83d\udc41\ufe0f<\/div>\r\n <div class=\"card-txt\">\u89ba\u5bdf\u5347\u7d1a<\/div>\r\n <div class=\"card-sub\">Inner Awareness<\/div>\r\n <\/div>\r\n\r\n <div class=\"flow-card card-2\">\r\n <div class=\"card-icon\">\ud83d\udd0b<\/div>\r\n <div class=\"card-txt\" style=\"color:var(--blue-main); font-size:18px;\">\u72c0\u614b\u6821\u6e96<\/div>\r\n <div class=\"card-sub\">State Alignment<\/div>\r\n <\/div>\r\n\r\n <div class=\"flow-card card-3\">\r\n <div class=\"card-icon\">\ud83d\udc8e<\/div>\r\n <div class=\"card-txt\">\u5916\u5728\u6210\u679c<\/div>\r\n <div class=\"card-sub\">Real Impact<\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\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<div class=\"elementor-element elementor-element-6e2c114 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"6e2c114\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8a1849e elementor-widget elementor-widget-html\" data-id=\"8a1849e\" data-element_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>Pain Points - Creative Cluster<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u4fdd\u6301\u4e00\u81f4) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u73bb\u7483\u8b8a\u6578 *\/\r\n --glass-bg: rgba(255, 255, 255, 0.8);\r\n --glass-border: rgba(255, 255, 255, 0.9);\r\n --shadow-sm: 0 10px 30px -10px rgba(30, 75, 175, 0.15);\r\n --shadow-lg: 0 30px 60px -15px rgba(30, 75, 175, 0.25), inset 0 0 0 1px rgba(255,255,255,0.8);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* \u80cc\u666f\u5149\u6688\u8ecc\u8de1 (\u589e\u52a0\u9023\u7d50\u611f) *\/\r\n .orbit-trace {\r\n position: absolute; top: 50%; left: 50%;\r\n width: 80%; height: 400px;\r\n transform: translate(-50%, -30%) rotate(-10deg);\r\n background: radial-gradient(ellipse at center, rgba(96, 165, 250, 0.1) 0%, transparent 70%);\r\n border-radius: 50%;\r\n z-index: -1;\r\n pointer-events: none;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5340\u584a *\/\r\n \/* ======================= *\/\r\n .pain-section {\r\n position: relative; padding: 140px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n min-height: 800px; \/* \u78ba\u4fdd\u6709\u8db3\u5920\u7a7a\u9593\u5c55\u793a\u61f8\u6d6e *\/\r\n }\r\n\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 60px;\r\n position: relative; z-index: 2;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .highlight {\r\n position: relative; display: inline-block;\r\n background: linear-gradient(120deg, transparent 0%, transparent 40%, rgba(255, 220, 100, 0.5) 40%);\r\n padding: 0 8px;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u5275\u65b0\uff1a\u975e\u5c0d\u7a31\u61f8\u6d6e\u96c6\u7fa4 *\/\r\n \/* ======================= *\/\r\n .cluster-container {\r\n position: relative;\r\n display: flex; justify-content: center; align-items: center;\r\n width: 100%; max-width: 1100px;\r\n height: 500px; \/* \u7d66\u4e88\u8db3\u5920\u7684\u6d3b\u52d5\u7a7a\u9593 *\/\r\n \/* \u555f\u7528 3D \u8996\u89d2 *\/\r\n perspective: 1000px;\r\n }\r\n\r\n \/* \u6838\u5fc3\u6a21\u7d44 (The Module) *\/\r\n .cluster-module {\r\n position: absolute; \/* \u4f7f\u7528\u7d55\u5c0d\u5b9a\u4f4d\u4f86\u9054\u6210\u91cd\u758a *\/\r\n width: 360px;\r\n padding: 40px 32px;\r\n background: var(--glass-bg);\r\n backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 32px;\r\n text-align: center;\r\n box-shadow: var(--shadow-sm);\r\n \/* \u95dc\u9375\u8f49\u5834\u8a2d\u5b9a\uff1a\u8c9d\u8332\u66f2\u7dda\u8b93\u79fb\u52d5\u66f4\u6709\u7269\u7406\u611f *\/\r\n transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);\r\n cursor: default;\r\n }\r\n\r\n \/* --- \u521d\u59cb\u975e\u5c0d\u7a31\u4f48\u5c40 (The Setup) --- *\/\r\n\r\n \/* \u5de6\u5074\u5361\u7247\uff1a\u5411\u5de6\u50be\u659c\uff0c\u4e0b\u6c89\uff0c\u5c64\u7d1a\u4f4e *\/\r\n .module-left {\r\n left: 5%; bottom: 10%;\r\n transform: rotate(-5deg) translateZ(0);\r\n z-index: 1;\r\n }\r\n\r\n \/* \u4e2d\u9593\u5361\u7247\uff1a\u8b8a\u5927\uff0c\u4e0a\u6d6e\uff0c\u5c64\u7d1a\u9ad8 (\u8996\u89ba\u6838\u5fc3) *\/\r\n .module-center {\r\n left: 50%; top: 5%;\r\n \/* \u4f7f\u7528 translate3d \u7f6e\u4e2d\u4e26\u653e\u5927 *\/\r\n transform: translate3d(-50%, 0, 50px) scale(1.1);\r\n z-index: 2;\r\n box-shadow: var(--shadow-lg); \/* \u4e2d\u9593\u9810\u8a2d\u9670\u5f71\u5c31\u6bd4\u8f03\u91cd *\/\r\n border-color: rgba(30, 75, 175, 0.2);\r\n }\r\n\r\n \/* \u53f3\u5074\u5361\u7247\uff1a\u5411\u53f3\u50be\u659c\uff0c\u4e0b\u6c89\uff0c\u5c64\u7d1a\u4f4e *\/\r\n .module-right {\r\n right: 5%; bottom: 10%;\r\n transform: rotate(5deg) translateZ(0);\r\n z-index: 1;\r\n }\r\n\r\n\r\n \/* --- \u95dc\u9375\u4e92\u52d5\uff1a\u805a\u7126\u6a21\u5f0f (Focus Mode) --- *\/\r\n\r\n \/* \u7576\u6ed1\u9f20\u79fb\u5230\u4efb\u4e00\u5361\u7247\u4e0a\u6642 *\/\r\n .cluster-module:hover {\r\n z-index: 10; \/* \u78ba\u4fdd\u88ab hover \u7684\u5361\u7247\u6c38\u9060\u5728\u6700\u4e0a\u9762 *\/\r\n \/* \u6b78\u4f4d\uff1a\u65cb\u8f49\u6b78\u96f6\uff0c\u653e\u5927\uff0c\u6d6e\u8d77 *\/\r\n transform: rotate(0deg) scale(1.15) translateZ(100px) !important;\r\n box-shadow: var(--shadow-lg);\r\n background: #fff; \/* \u8b8a\u4eae *\/\r\n border-color: var(--blue-main);\r\n }\r\n\r\n \/* \u9ad8\u7d1a\u6280\u5de7\uff1a\u7576 hover \u5bb9\u5668\u6642\uff0c\u8b93\u300c\u6c92\u6709\u88ab hover\u300d\u7684\u5361\u7247\u9000\u5f8c\u8b8a\u6a21\u7cca *\/\r\n \/* \u6ce8\u610f\uff1a\u9019\u9700\u8981\u700f\u89bd\u5668\u652f\u63f4 :has() \u9009\u62e9\u5668\uff0c\u73fe\u4ee3\u700f\u89bd\u5668\u5927\u591a\u652f\u6301\uff0c\u4e0d\u652f\u63f4\u5247\u53ea\u6703\u986f\u793a\u4e0a\u9762\u7684 hover \u6548\u679c *\/\r\n .cluster-container:has(.cluster-module:hover) .cluster-module:not(:hover) {\r\n opacity: 0.6;\r\n filter: blur(2px);\r\n transform: scale(0.95) translateZ(-50px); \/* \u9000\u5f8c\u7e2e\u5c0f *\/\r\n }\r\n\r\n\r\n \/* --- \u5167\u5bb9\u6a23\u5f0f --- *\/\r\n .icon-stage {\r\n width: 72px; height: 72px;\r\n background: linear-gradient(135deg, #EFF6FF, #FFFFFF);\r\n border-radius: 20px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 32px; margin: 0 auto 24px;\r\n box-shadow: inset 0 0 0 1px #fff, 0 10px 20px -5px rgba(30, 75, 175, 0.1);\r\n }\r\n .card-title {\r\n font-size: 20px; font-weight: 800; color: var(--blue-dark); margin-bottom: 12px;\r\n }\r\n .card-desc {\r\n font-size: 15px; color: var(--text-sub); line-height: 1.7;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u7d50\u8ad6\u5340 *\/\r\n \/* ======================= *\/\r\n .conclusion-wrap {\r\n margin-top: 60px; text-align: center; z-index: 2;\r\n position: relative;\r\n }\r\n .conclusion-text { font-size: 20px; color: var(--text-dark); margin-bottom: 8px; }\r\n .conclusion-big {\r\n font-size: 36px; font-weight: 900;\r\n background: linear-gradient(90deg, var(--blue-dark), var(--blue-main));\r\n -webkit-background-clip: text; -webkit-text-fill-color: transparent;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 1024px) {\r\n .pain-section { padding: 100px 5%; min-height: auto; }\r\n .cluster-container {\r\n height: auto; flex-direction: column; gap: 30px; \/* \u624b\u6a5f\u7248\u6539\u56de\u5782\u76f4\u5806\u758a *\/\r\n perspective: none; \/* \u624b\u6a5f\u7248\u95dc\u9589\u8907\u96dc 3D *\/\r\n }\r\n .cluster-module {\r\n position: relative; \/* \u53d6\u6d88\u7d55\u5c0d\u5b9a\u4f4d *\/\r\n width: 100%; max-width: 400px;\r\n left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;\r\n transform: none !important; \/* \u91cd\u7f6e\u6240\u6709\u8b8a\u5f62 *\/\r\n margin: 0 auto;\r\n }\r\n \/* \u624b\u6a5f\u7248\u7c21\u55ae\u7684 Hover *\/\r\n .cluster-module:hover {\r\n transform: translateY(-10px) !important;\r\n }\r\n .main-title { font-size: 32px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n <div class=\"orbit-trace\"><\/div>\r\n\r\n <section class=\"pain-section\">\r\n \r\n <div class=\"section-header\">\r\n <h2 class=\"main-title\">\r\n \u4f60\u4e0d\u662f\u4e0d\u5920\u52aa\u529b\uff0c<br>\r\n \u800c\u662f\u9084\u6c92\u6709 <span class=\"highlight\">\u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"cluster-container\">\r\n \r\n <div class=\"cluster-module module-left\">\r\n <div class=\"icon-stage\">\ud83d\udcc9<\/div>\r\n <h3 class=\"card-title\">\u696d\u7e3e\u8207\u8868\u73fe\u4e0d\u7a69\u5b9a<\/h3>\r\n <p class=\"card-desc\">\r\n \u660e\u660e\u6295\u5165\u5f88\u591a\u6642\u9593\u8207\u5fc3\u529b\uff0c\u751a\u81f3\u6bd4\u5225\u4eba\u66f4\u62fc\u547d\uff0c\u5728\u92b7\u552e\u8207\u8077\u5834\u4e0a\u7684\u7d50\u679c\u537b\u59cb\u7d42\u4e0d\u5982\u9810\u671f\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"cluster-module module-center\">\r\n <div class=\"icon-stage\">\ud83c\udf2a\ufe0f<\/div>\r\n <h3 class=\"card-title\">\u6301\u7e8c\u5167\u8017\u8207\u7126\u616e<\/h3>\r\n <p class=\"card-desc\">\r\n \u5e38\u5e38\u5728\u5de5\u4f5c\u4e2d\u61f7\u7591\u81ea\u5df1\uff0c\u72c0\u614b\u5ffd\u9ad8\u5ffd\u4f4e\uff0c\u7e3d\u662f\u5728\u76f8\u4f3c\u7684\u60c5\u7dd2\u8207\u6163\u6027\u5361\u9ede\u88e1\u53cd\u8986\u6d88\u8017\u80fd\u91cf\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"cluster-module module-right\">\r\n <div class=\"icon-stage\">\ud83e\udd10<\/div>\r\n <h3 class=\"card-title\">\u50f9\u503c\u7121\u6cd5\u88ab\u770b\u898b<\/h3>\r\n <p class=\"card-desc\">\r\n \u61c2\u5c08\u696d\u3001\u80af\u505a\u4e8b\uff0c\u537b\u5e38\u5e38\u5361\u5728\u4e0d\u6562\u958b\u53e3\u8207\u63a8\u9032\u95dc\u4fc2\uff0c\u4e0d\u77e5\u9053\u5982\u4f55\u5efa\u7acb\u4fe1\u4efb\u611f\u8207\u500b\u4eba\u5f71\u97ff\u529b\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"conclusion-wrap\">\r\n <p class=\"conclusion-text\">\u771f\u6b63\u62c9\u958b\u5dee\u8ddd\u7684\uff0c\u5f80\u5f80\u4e0d\u662f\u76f2\u76ee\u52aa\u529b...<\/p>\r\n <h3 class=\"conclusion-big\">\u800c\u662f\u5148\u6821\u6e96\u81ea\u5df1\uff0c\u518d\u653e\u5927\u6210\u679c<\/h3>\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-ff66df8 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"ff66df8\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-978cd6e elementor-widget elementor-widget-html\" data-id=\"978cd6e\" data-element_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>Course Positioning - Clean Blueprint<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-light: #EFF6FF;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --red-error: #EF4444;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u73bb\u7483\u8cea\u611f *\/\r\n --glass-panel: rgba(255, 255, 255, 0.75);\r\n --glass-border: rgba(255, 255, 255, 0.8);\r\n --shadow-elevation: 0 25px 50px -12px rgba(30, 75, 175, 0.15);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 50%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .positioning-section {\r\n position: relative;\r\n padding: 120px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 60px;\r\n position: relative; z-index: 2;\r\n }\r\n .kicker {\r\n font-size: 14px; font-weight: 700; color: var(--text-sub); letter-spacing: 2px;\r\n text-transform: uppercase; margin-bottom: 12px; display: block;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .main-title .strike {\r\n text-decoration: line-through; text-decoration-color: var(--red-error);\r\n text-decoration-thickness: 3px; color: var(--text-sub); opacity: 0.6;\r\n }\r\n .main-title .highlight {\r\n color: var(--blue-main);\r\n background: linear-gradient(120deg, transparent 0%, transparent 60%, rgba(59, 130, 246, 0.1) 60%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u7cfb\u7d71\u67b6\u69cb\u5361 (The Blueprint Card) *\/\r\n \/* ======================= *\/\r\n .blueprint-card {\r\n position: relative;\r\n width: 100%; max-width: 1000px;\r\n background: var(--glass-panel);\r\n backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 40px;\r\n box-shadow: var(--shadow-elevation);\r\n display: grid;\r\n grid-template-columns: 1fr 1px 1.2fr; \/* \u5de6-\u5206\u9694\u7dda-\u53f3 *\/\r\n overflow: hidden;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .blueprint-card:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 40px 80px -20px rgba(30, 75, 175, 0.2);\r\n }\r\n\r\n \/* \u5206\u9694\u7dda *\/\r\n .divider {\r\n background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.1), transparent);\r\n width: 1px; height: 100%;\r\n }\r\n\r\n \/* --- \u5de6\u5074\uff1a\u96dc\u8a0a\u5340 --- *\/\r\n .zone-noise {\r\n padding: 60px 40px;\r\n background: rgba(241, 245, 249, 0.5);\r\n display: flex; flex-direction: column; justify-content: center; gap: 30px;\r\n }\r\n \r\n .noise-item {\r\n display: flex; align-items: center; gap: 16px;\r\n opacity: 0.6; transition: all 0.3s;\r\n }\r\n .blueprint-card:hover .noise-item { opacity: 0.4; filter: grayscale(1); transform: translateX(-10px); }\r\n\r\n .cross-icon {\r\n width: 32px; height: 32px; border-radius: 50%;\r\n background: rgba(239, 68, 68, 0.1); color: var(--red-error);\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 16px; flex-shrink: 0;\r\n }\r\n \r\n .noise-text h4 { font-size: 18px; font-weight: 700; color: var(--text-sub); margin-bottom: 4px; text-decoration: line-through; }\r\n .noise-text p { font-size: 14px; color: #94A3B8; }\r\n\r\n\r\n \/* --- \u53f3\u5074\uff1a\u6838\u5fc3\u5340 --- *\/\r\n .zone-core {\r\n padding: 60px 50px;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.4), rgba(239, 246, 255, 0.6));\r\n display: flex; flex-direction: column; justify-content: center;\r\n position: relative;\r\n }\r\n \r\n \/* \u6838\u5fc3\u80cc\u666f\u52d5\u614b *\/\r\n .core-pulse {\r\n position: absolute; top: 50%; right: -100px; width: 300px; height: 300px;\r\n background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);\r\n border-radius: 50%; pointer-events: none;\r\n animation: pulse-blue 4s infinite;\r\n }\r\n @keyframes pulse-blue { 0%,100%{transform:scale(1); opacity:0.5;} 50%{transform:scale(1.2); opacity:0.8;} }\r\n\r\n .core-item {\r\n display: flex; align-items: flex-start; gap: 20px;\r\n position: relative; z-index: 2;\r\n }\r\n\r\n .check-ring {\r\n width: 48px; height: 48px; border-radius: 50%;\r\n background: var(--blue-main);\r\n color: #fff;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 24px;\r\n box-shadow: 0 10px 20px rgba(30, 75, 175, 0.2);\r\n flex-shrink: 0;\r\n animation: float-icon 3s ease-in-out infinite;\r\n }\r\n @keyframes float-icon { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }\r\n\r\n .core-text h3 { font-size: 24px; font-weight: 800; color: var(--blue-dark); margin-bottom: 12px; }\r\n .core-text p { font-size: 16px; color: var(--text-sub); line-height: 1.7; margin-bottom: 24px; }\r\n \r\n \/* \u6d41\u7a0b\u5716\u793a *\/\r\n .mini-flow {\r\n display: flex; align-items: center; gap: 10px;\r\n margin-top: 20px;\r\n }\r\n .flow-node {\r\n padding: 6px 12px; background: #fff; border: 1px solid var(--blue-light);\r\n border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--blue-main);\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\r\n }\r\n .flow-arrow { color: var(--blue-main); font-size: 12px; }\r\n\r\n\r\n \/* --- \u5e95\u90e8\uff1a\u95dc\u9375\u53e5 (\u7c21\u5316\u7248) --- *\/\r\n .key-output {\r\n grid-column: 1 \/ -1; \/* \u8de8\u8d8a\u5169\u6b04 *\/\r\n background: var(--blue-dark);\r\n padding: 24px;\r\n text-align: center;\r\n position: relative; overflow: hidden;\r\n \/* \u79fb\u9664 flex \u8a2d\u5b9a\uff0c\u76f4\u63a5\u7f6e\u4e2d\u6587\u5b57 *\/\r\n }\r\n \r\n \/* \u8f38\u51fa\u689d\u6d41\u5149 *\/\r\n .key-output::before {\r\n content: \"\"; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\r\n animation: shimmer-bar 3s infinite;\r\n }\r\n @keyframes shimmer-bar { 0%{left:-100%;} 100%{left:200%;} }\r\n\r\n .output-text {\r\n font-size: 22px; font-weight: 700; color: #fff; letter-spacing: 1px;\r\n margin: 0; \/* \u79fb\u9664\u9810\u8a2d margin *\/\r\n }\r\n .output-text span { color: #60A5FA; } \/* \u85cd\u8272\u5f37\u8abf *\/\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .blueprint-card { grid-template-columns: 1fr; }\r\n .divider { display: none; }\r\n .zone-noise { padding: 40px 30px; border-bottom: 1px solid rgba(0,0,0,0.05); }\r\n .zone-core { padding: 40px 30px; }\r\n .key-output { padding: 30px 20px; }\r\n .main-title { font-size: 32px; }\r\n .core-text h3 { font-size: 20px; }\r\n .output-text { font-size: 18px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"positioning-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">COURSE POSITIONING<\/span>\r\n <h2 class=\"main-title\">\r\n <span class=\"strike\">\u9019\u4e0d\u662f\u4e00\u5802\u7d14\u7cb9\u7684\u6fc0\u52f5\u8ab2<\/span><br>\r\n \u800c\u662f\u4e00\u5957 <span class=\"highlight\">\u300c\u89ba\u9192\u5f0f\u6210\u9577\u7cfb\u7d71\u300d<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"blueprint-card\">\r\n \r\n <div class=\"zone-noise\">\r\n <div class=\"noise-item\">\r\n <div class=\"cross-icon\">\u2715<\/div>\r\n <div class=\"noise-text\">\r\n <h4>\u4e0d\u8ce3\u7a7a\u6cdb\u7684\u5fc3\u9748\u96de\u6e6f<\/h4>\r\n <p>\u53ea\u8ac7\u6fc0\u52f5\u537b\u7121\u6cd5\u843d\u5730\uff0c\u71b1\u60c5\u5f88\u5feb\u5c31\u6703\u5728\u73fe\u5be6\u4e2d\u6d88\u8017\u6b86\u76e1\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"noise-item\">\r\n <div class=\"cross-icon\">\u2715<\/div>\r\n <div class=\"noise-text\">\r\n <h4>\u4e0d\u6559\u4f60\u5957\u7528\u50f5\u5316\u8a71\u8853<\/h4>\r\n <p>\u786c\u5957\u5225\u4eba\u7684\u6210\u529f\u6a21\u5f0f\uff0c\u53ea\u6703\u8b93\u4f60\u7684\u8868\u9054\u5931\u53bb\u9748\u9b42\u8207\u4fe1\u4efb\u611f\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"divider\"><\/div>\r\n\r\n <div class=\"zone-core\">\r\n <div class=\"core-pulse\"><\/div>\r\n \r\n <div class=\"core-item\">\r\n <div class=\"check-ring\">\u2714<\/div>\r\n <div class=\"core-text\">\r\n <h3>\u91cd\u5efa\u4f60\u7684\u5e95\u5c64\u72c0\u614b<br>\u627e\u56de\u6700\u6709\u529b\u91cf\u7684\u81ea\u5df1<\/h3>\r\n <p>\u6211\u5011\u5148\u5e6b\u4f60\u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u518d\u900f\u904e\u72c0\u614b\u6821\u6e96\u8207\u5929\u8ce6\u8fa8\u8b58\uff0c\u628a\u5167\u5728\u7684\u89ba\u5bdf\u5347\u7d1a\uff0c\u771f\u6b63\u8f49\u5316\u70ba\u5916\u5728\u7684\u5f71\u97ff\u529b\u8207\u6210\u4ea4\u529b\u3002<\/p>\r\n \r\n <div class=\"mini-flow\">\r\n <span class=\"flow-node\">\u89ba\u5bdf\u5347\u7d1a<\/span>\r\n <span class=\"flow-arrow\">\u2794<\/span>\r\n <span class=\"flow-node\">\u72c0\u614b\u6821\u6e96<\/span>\r\n <span class=\"flow-arrow\">\u2794<\/span>\r\n <span class=\"flow-node\">\u6210\u679c\u8f49\u5316<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"key-output\">\r\n <p class=\"output-text\">\u5148\u5c0d\u9f4a\u81ea\u5df1\uff0c<span>\u624d\u80fd\u7a69\u5b9a\u653e\u5927\u7d50\u679c\u3002<\/span><\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-1e7b332 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"1e7b332\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7d3f91d elementor-widget elementor-widget-html\" data-id=\"7d3f91d\" data-element_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>Core Transformation - Crystal Engines<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-accent: #3B82F6;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u6c34\u6676\u8cea\u611f\u8b8a\u6578 *\/\r\n --crystal-bg: rgba(255, 255, 255, 0.85);\r\n --crystal-border: rgba(255, 255, 255, 0.9);\r\n --shadow-base: \r\n 0 1px 2px rgba(0,0,0,0.05), \r\n 0 15px 30px -5px rgba(30, 75, 175, 0.1);\r\n --shadow-active: \r\n 0 25px 50px -12px rgba(30, 75, 175, 0.2), \r\n 0 0 0 1px rgba(37, 99, 235, 0.1);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .transform-section {\r\n position: relative;\r\n padding: 120px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 80px;\r\n position: relative; z-index: 2;\r\n }\r\n .kicker {\r\n font-size: 13px; font-weight: 700; color: var(--blue-main); letter-spacing: 1.5px;\r\n text-transform: uppercase; margin-bottom: 16px; display: inline-block;\r\n background: rgba(30, 75, 175, 0.08); padding: 4px 12px; border-radius: 6px;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .title-highlight {\r\n background: linear-gradient(120deg, transparent 0%, transparent 50%, rgba(59, 130, 246, 0.15) 50%);\r\n padding: 0 4px;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e09\u6b04\u6c34\u6676\u6a21\u7d44 (Grid) *\/\r\n \/* ======================= *\/\r\n .engine-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 32px;\r\n width: 100%; max-width: 1200px;\r\n position: relative;\r\n }\r\n\r\n \/* \u9023\u7d50\u7dda (\u80cc\u666f\u88dd\u98fe) *\/\r\n .grid-connector {\r\n position: absolute; top: 50%; left: 0; width: 100%; height: 2px;\r\n background: linear-gradient(90deg, transparent, rgba(30, 75, 175, 0.1), transparent);\r\n z-index: -1; transform: translateY(-50%);\r\n }\r\n\r\n \/* \u6c34\u6676\u5361\u7247 (The Crystal Block) *\/\r\n .crystal-card {\r\n position: relative;\r\n background: var(--crystal-bg);\r\n backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--crystal-border);\r\n border-radius: 24px;\r\n padding: 48px 32px;\r\n overflow: hidden;\r\n transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n box-shadow: var(--shadow-base);\r\n \/* \u589e\u52a0\u5e95\u90e8\u539a\u5ea6\u611f *\/\r\n border-bottom: 4px solid rgba(226, 232, 240, 0.6);\r\n cursor: default;\r\n }\r\n\r\n \/* Hover \u72c0\u614b\uff1a\u4e0a\u6d6e + \u767c\u5149 *\/\r\n .crystal-card:hover {\r\n transform: translateY(-12px);\r\n box-shadow: var(--shadow-active);\r\n border-bottom-color: var(--blue-main); \/* \u5e95\u90e8\u8b8a\u85cd *\/\r\n background: #fff;\r\n }\r\n\r\n \/* \u6383\u63cf\u5149\u675f\u7279\u6548 (Scanning Beam) *\/\r\n .crystal-card::after {\r\n content: \"\"; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px;\r\n background: var(--blue-main);\r\n box-shadow: 0 0 20px var(--blue-main);\r\n opacity: 0; transition: opacity 0.3s;\r\n }\r\n .crystal-card:hover::after {\r\n animation: scan-up 0.8s ease-out forwards;\r\n opacity: 1;\r\n }\r\n @keyframes scan-up {\r\n 0% { bottom: 0; height: 4px; opacity: 1; }\r\n 100% { bottom: 100%; height: 100px; opacity: 0; }\r\n }\r\n\r\n \/* \u80cc\u666f\u900f\u8996\u6578\u5b57 (Watermark) *\/\r\n .bg-number {\r\n position: absolute; top: 10px; right: 20px;\r\n font-size: 120px; font-weight: 900;\r\n color: rgba(30, 75, 175, 0.03); \/* \u6975\u6de1 *\/\r\n line-height: 1; pointer-events: none;\r\n transition: transform 0.5s ease;\r\n font-family: \"Inter\", sans-serif;\r\n }\r\n .crystal-card:hover .bg-number {\r\n transform: scale(1.1) translateX(-10px);\r\n color: rgba(30, 75, 175, 0.06);\r\n }\r\n\r\n \/* \u5167\u5bb9\u4f48\u5c40 *\/\r\n .card-content { position: relative; z-index: 2; }\r\n\r\n \/* ICON \u8a2d\u8a08 (\u7dda\u689d\u611f + \u5546\u696d\u611f) *\/\r\n .icon-box {\r\n width: 64px; height: 64px;\r\n background: var(--blue-light);\r\n color: var(--blue-main);\r\n border-radius: 16px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 28px; margin-bottom: 24px;\r\n transition: transform 0.4s ease;\r\n }\r\n .crystal-card:hover .icon-box {\r\n transform: scale(1.1) rotate(5deg);\r\n background: var(--blue-main); color: #fff;\r\n box-shadow: 0 10px 20px rgba(30, 75, 175, 0.25);\r\n }\r\n\r\n .card-title {\r\n font-size: 22px; font-weight: 800; color: var(--blue-dark);\r\n margin-bottom: 16px;\r\n }\r\n \r\n .card-desc {\r\n font-size: 16px; color: var(--text-sub); line-height: 1.7;\r\n }\r\n .card-desc span {\r\n display: block; margin-top: 8px; font-size: 14px;\r\n color: var(--blue-accent); font-weight: 600;\r\n opacity: 0.8;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .engine-grid { grid-template-columns: 1fr; gap: 24px; }\r\n .grid-connector { display: none; }\r\n .main-title { font-size: 32px; }\r\n .bg-number { font-size: 100px; right: 10px; }\r\n .crystal-card { padding: 36px 24px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"transform-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">CORE TRANSFORMATION<\/span>\r\n <h2 class=\"main-title\">\r\n \u9019\u5802\u8ab2\uff0c\u5c07\u5e36\u4f60\u5b8c\u6210 <span class=\"title-highlight\">\u4e09\u5927\u6838\u5fc3\u5347\u7d1a<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"engine-grid\">\r\n <div class=\"grid-connector\"><\/div>\r\n\r\n <div class=\"crystal-card\">\r\n <div class=\"bg-number\">01<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"icon-box\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"><\/path><circle cx=\"12\" cy=\"12\" r=\"3\"><\/circle><\/svg>\r\n <\/div>\r\n <h3 class=\"card-title\">\u89ba\u5bdf\u5347\u7d1a<\/h3>\r\n <p class=\"card-desc\">\r\n \u8fa8\u8b58\u5728\u5de5\u4f5c\u8207\u4eba\u969b\u95dc\u4fc2\u4e2d\u7684\u6163\u6027\u5361\u9ede\uff0c\u770b\u898b\u554f\u984c\u6839\u6e90\uff0c\u505c\u6b62\u7121\u6548\u7684\u5167\u8017\u8207\u76f2\u76ee\u52aa\u529b\u3002\r\n <span>Inner Awareness<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"crystal-card\">\r\n <div class=\"bg-number\">02<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"icon-box\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 12h10\"\/><path d=\"M11 5h7\"\/><path d=\"M11 19h7\"\/><path d=\"M5 19L5 5\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"card-title\">\u72c0\u614b\u6821\u6e96<\/h3>\r\n <p class=\"card-desc\">\r\n \u7a69\u5b9a\u5167\u5728\u80fd\u91cf\u3002\u5f9e\u6df7\u4e82\u7684\u601d\u7dd2\u4e2d\u62bd\u96e2\uff0c\u5efa\u7acb\u6e05\u6670\u3001\u7a69\u5b9a\u4e14\u5145\u6eff\u529b\u91cf\u7684\u8077\u5834\u8f38\u51fa\u7bc0\u594f\u3002\r\n <span>State Alignment<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"crystal-card\">\r\n <div class=\"bg-number\">03<\/div>\r\n <div class=\"card-content\">\r\n <div class=\"icon-box\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M9 18l6-6-6-6\"\/><\/svg>\r\n <\/div>\r\n <h3 class=\"card-title\">\u6210\u679c\u653e\u5927<\/h3>\r\n <p class=\"card-desc\">\r\n \u7d50\u5408\u4fe1\u4efb\u611f\u5efa\u7acb\u8207 AI \u79d1\u6280\u8ce6\u80fd\uff0c\u5c07\u7a69\u5b9a\u7684\u5167\u5728\u80fd\u91cf\u81ea\u7136\u8f49\u5316\u70ba\u5916\u5728\u7684\u696d\u7e3e\u8207\u5f71\u97ff\u529b\u3002\r\n <span>Real Impact<\/span>\r\n <\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-bb51599 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"bb51599\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f2c3fe elementor-widget elementor-widget-html\" data-id=\"2f2c3fe\" data-element_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>Methodology Core - Consistent Light<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u56b4\u683c\u7dad\u6301\u4e00\u81f4) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF; \/* \u6dfa\u8272\u80cc\u666f *\/\r\n --blue-main: #1E4BAF; \/* \u54c1\u724c\u85cd *\/\r\n --blue-dark: #0F172A; \/* \u6df1\u85cd\u9ed1 (\u6587\u5b57\u7528) *\/\r\n --text-gray: #94A3B8; \/* \u6dfa\u7070 (\u6b21\u8981\u6587\u5b57) *\/\r\n --grid-color: rgba(37, 99, 235, 0.06); \/* \u7db2\u683c\u7dda *\/\r\n --accent-orange: #F97316; \/* \u5f37\u8abf\u8272 *\/\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--blue-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* --- \u80cc\u666f\u7db2\u683c (\u8207 Hero \u5b8c\u5168\u4e00\u81f4) --- *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .truth-section {\r\n position: relative;\r\n padding: 160px 6%;\r\n min-height: 80vh;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n text-align: center;\r\n }\r\n\r\n \/* \u80cc\u666f\u6f02\u6d6e\u908f\u8f2f\u7b26\u865f (Logic Symbols) *\/\r\n .bg-symbol {\r\n position: absolute;\r\n font-family: \"Courier New\", monospace;\r\n font-weight: 700;\r\n color: var(--blue-main);\r\n opacity: 0.05;\r\n z-index: -1;\r\n user-select: none;\r\n animation: float-symbol 8s infinite ease-in-out;\r\n }\r\n .sym-1 { top: 20%; left: 10%; font-size: 120px; animation-delay: 0s; } \/* \u2260 *\/\r\n .sym-2 { bottom: 15%; right: 10%; font-size: 100px; animation-delay: -4s; } \/* \u2234 *\/\r\n .sym-3 { top: 30%; right: 20%; font-size: 60px; animation-delay: -2s; } \/* \u2211 *\/\r\n \r\n @keyframes float-symbol {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 50% { transform: translateY(-20px) rotate(5deg); }\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u6392\u7248\u8a2d\u8a08 (Typography) *\/\r\n \/* ======================= *\/\r\n \r\n .content-wrap {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 1000px;\r\n }\r\n\r\n \/* \u7b2c\u4e00\u53e5\uff1a\u932f\u8aa4\u89c0\u5ff5 (\u5283\u6389 + \u6a21\u7cca) *\/\r\n .text-lie {\r\n font-size: clamp(32px, 4vw, 56px);\r\n font-weight: 700;\r\n color: var(--text-gray); \/* \u6dfa\u7070\u8272 *\/\r\n margin-bottom: 20px;\r\n position: relative;\r\n display: inline-block;\r\n \/* \u521d\u59cb\u6a21\u7cca *\/\r\n filter: blur(0.5px);\r\n transition: all 0.5s ease;\r\n }\r\n \r\n \/* \u7d05\u8272\u522a\u9664\u7dda\u52d5\u756b *\/\r\n .text-lie::after {\r\n content: \"\"; position: absolute; top: 50%; left: 0; width: 0%; height: 3px;\r\n background-color: #EF4444; \/* \u7d05\u8272 *\/\r\n transform: rotate(-2deg);\r\n transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);\r\n opacity: 0.8;\r\n }\r\n \r\n \/* Hover \u89f8\u767c\u522a\u9664\u7dda *\/\r\n .truth-section:hover .text-lie::after { width: 110%; }\r\n .truth-section:hover .text-lie { opacity: 0.5; filter: blur(2px); }\r\n\r\n\r\n \/* \u7b2c\u4e8c\u53e5\uff1a\u6838\u5fc3\u771f\u7406 (\u653e\u5927 + \u805a\u7126) *\/\r\n .text-truth {\r\n font-size: clamp(48px, 6vw, 96px);\r\n font-weight: 900;\r\n color: var(--blue-dark); \/* \u6df1\u85cd\u9ed1\uff0c\u7d55\u5c0d\u6e05\u6670 *\/\r\n line-height: 1.1;\r\n margin-bottom: 60px;\r\n letter-spacing: -2px;\r\n position: relative;\r\n \/* \u521d\u59cb\u72c0\u614b *\/\r\n transform: scale(0.95);\r\n opacity: 0;\r\n animation: reveal-truth 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.3s;\r\n }\r\n\r\n @keyframes reveal-truth {\r\n to { transform: scale(1); opacity: 1; }\r\n }\r\n\r\n \/* \u95dc\u9375\u5b57\uff1a\u6703\u7528 AI \u7684\u4f60 -> \u5148\u6821\u6e96\u72c0\u614b\u7684\u4f60 *\/\r\n .highlight-box {\r\n position: relative;\r\n display: inline-block;\r\n color: var(--blue-main);\r\n z-index: 1;\r\n padding: 0 10px;\r\n }\r\n \r\n \/* \u87a2\u5149\u7b46\u80cc\u666f (Highlighter) *\/\r\n .highlight-box::before {\r\n content: \"\"; position: absolute; bottom: 10px; left: 0; width: 100%; height: 30%;\r\n background: rgba(59, 130, 246, 0.15); \/* \u6dfa\u85cd\u8272\u87a2\u5149\u7b46 *\/\r\n z-index: -1;\r\n transform: skewX(-10deg);\r\n }\r\n \r\n \/* \u52d5\u614b\u5149\u6591 (Shimmer) *\/\r\n .highlight-box::after {\r\n content: \"\"; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);\r\n mix-blend-mode: overlay;\r\n animation: shimmer-text 3s infinite;\r\n }\r\n @keyframes shimmer-text { 0% { left: -100%; } 20% { left: 200%; } 100% { left: 200%; } }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* \u88dc\u5145\u8aaa\u660e (Logic Box) *\/\r\n \/* ======================= *\/\r\n .logic-box {\r\n position: relative;\r\n display: inline-block;\r\n padding: 30px 48px;\r\n background: rgba(255, 255, 255, 0.6);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border: 1px solid rgba(255, 255, 255, 0.8);\r\n border-radius: 20px;\r\n box-shadow: \r\n 0 10px 30px -10px rgba(30, 75, 175, 0.1),\r\n inset 0 0 0 1px rgba(255,255,255,0.5);\r\n opacity: 0;\r\n animation: fade-up 1s ease forwards 0.8s;\r\n }\r\n @keyframes fade-up { from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }\r\n\r\n .sub-text {\r\n font-size: 18px; color: var(--text-gray); margin: 0;\r\n font-weight: 500;\r\n }\r\n \r\n .logic-strong {\r\n display: block; margin-top: 8px;\r\n font-size: 22px; font-weight: 700; color: var(--blue-dark);\r\n letter-spacing: 1px;\r\n }\r\n \r\n \/* \u88dd\u98fe\uff1a\u5169\u5074\u7684\u79d1\u6280\u62ec\u865f *\/\r\n .logic-box::before, .logic-box::after {\r\n content: \"\"; position: absolute; top: 50%; width: 2px; height: 40px;\r\n background: var(--blue-main); transform: translateY(-50%);\r\n opacity: 0.3;\r\n }\r\n .logic-box::before { left: 0; }\r\n .logic-box::after { right: 0; }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 768px) {\r\n .truth-section { padding: 120px 24px; }\r\n .text-lie { font-size: 28px; }\r\n .text-truth { font-size: 42px; margin-bottom: 40px; }\r\n .logic-box { padding: 24px 20px; width: 100%; }\r\n .bg-symbol { opacity: 0.03; } \/* \u624b\u6a5f\u7248\u7b26\u865f\u6de1\u4e00\u9ede *\/\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"truth-section\">\r\n \r\n <div class=\"bg-symbol sym-1\">\u2260<\/div>\r\n <div class=\"bg-symbol sym-2\">\u2234<\/div>\r\n <div class=\"bg-symbol sym-3\">\u2211<\/div>\r\n\r\n <div class=\"content-wrap\">\r\n \r\n <h2 class=\"text-lie\">\u53ea\u8981\u66f4\u52aa\u529b\uff0c\u5c31\u4e00\u5b9a\u6709\u7d50\u679c<\/h2>\r\n \r\n <h2 class=\"text-truth\">\r\n \u771f\u6b63\u62c9\u958b\u5dee\u8ddd\u7684\uff0c\u662f<br>\r\n <span class=\"highlight-box\">\u300c\u5148\u6821\u6e96\u72c0\u614b\u7684\u4f60\u300d<\/span>\r\n <\/h2>\r\n\r\n <div class=\"logic-box\">\r\n <p class=\"sub-text\">\r\n \u6210\u9577\u7684\u6838\u5fc3\u4e0d\u662f\u76f2\u76ee\u7528\u529b\uff0c\u800c\u662f\r\n <span class=\"logic-strong\">\u89ba\u5bdf\u5347\u7d1a\u3001\u72c0\u614b\u6821\u6e96\u8207\u5e95\u5c64\u91cd\u5efa<\/span>\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-983e33e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"983e33e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b111505 elementor-widget elementor-widget-html\" data-id=\"b111505\" data-element_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>Target Audience - Spotlight Cards<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u56b4\u683c\u7dad\u6301\u4e00\u81f4) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --blue-light: #EFF6FF;\r\n --text-dark: #1E293B;\r\n --text-sub: #64748B;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u5361\u7247\u8b8a\u6578 *\/\r\n --card-bg: rgba(255, 255, 255, 0.85);\r\n --card-border: rgba(255, 255, 255, 0.9);\r\n --shadow-idle: 0 10px 30px -10px rgba(30, 75, 175, 0.1);\r\n --shadow-active: 0 30px 60px -15px rgba(30, 75, 175, 0.25);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c (\u4e00\u81f4\u6027) *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .target-section {\r\n position: relative;\r\n padding: 120px 6%;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; max-width: 800px; margin-bottom: 80px;\r\n position: relative; z-index: 2;\r\n }\r\n .main-title {\r\n font-size: 42px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n .highlight-pill {\r\n display: inline-block;\r\n background: #fff; border: 1px solid var(--blue-light);\r\n padding: 2px 12px; border-radius: 20px;\r\n color: var(--blue-main); font-size: 0.9em;\r\n box-shadow: 0 4px 10px rgba(30, 75, 175, 0.1);\r\n transform: rotate(-2deg); margin-left: 10px; vertical-align: middle;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u805a\u5149\u71c8\u5361\u7247\u7db2\u683c (The Spotlight Grid) *\/\r\n \/* ======================= *\/\r\n .persona-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr); \/* 4\u5f35\u4e26\u6392 *\/\r\n gap: 24px;\r\n width: 100%; max-width: 1280px;\r\n position: relative;\r\n }\r\n\r\n \/* \u5361\u7247\u672c\u9ad4 *\/\r\n .persona-card {\r\n position: relative;\r\n background: var(--card-bg);\r\n backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);\r\n border: 1px solid var(--card-border);\r\n border-radius: 24px;\r\n padding: 40px 24px;\r\n display: flex; flex-direction: column; align-items: flex-start;\r\n transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);\r\n cursor: default;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \u9802\u90e8\u88dd\u98fe\u689d (Scanner Bar) *\/\r\n .scan-bar {\r\n position: absolute; top: 0; left: 0; width: 100%; height: 4px;\r\n background: linear-gradient(90deg, var(--blue-main), #60A5FA);\r\n transform: scaleX(0); transform-origin: left;\r\n transition: transform 0.5s ease;\r\n }\r\n .persona-card:hover .scan-bar { transform: scaleX(1); }\r\n\r\n \/* \u5716\u6a19\u5340 *\/\r\n .icon-wrapper {\r\n width: 60px; height: 60px;\r\n background: #fff;\r\n border-radius: 16px;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 28px;\r\n margin-bottom: 24px;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.05);\r\n transition: transform 0.4s ease;\r\n }\r\n .persona-card:hover .icon-wrapper {\r\n transform: scale(1.1) rotate(-5deg);\r\n background: var(--blue-main); color: #fff;\r\n }\r\n\r\n \/* \u5167\u5bb9\u6587\u5b57 *\/\r\n .role-title {\r\n font-size: 20px; font-weight: 800; color: var(--blue-dark);\r\n margin-bottom: 12px;\r\n }\r\n .role-desc {\r\n font-size: 15px; color: var(--text-sub); line-height: 1.6;\r\n }\r\n\r\n \/* ---------------------------------- *\/\r\n \/* \u2605 CSS \u9b54\u6cd5\uff1a:has() \u805a\u5149\u71c8\u6548\u61c9 \u2605 *\/\r\n \/* ---------------------------------- *\/\r\n \r\n \/* \u7576\u6ed1\u9f20\u9032\u5165 Grid \u6642\uff0c\u6240\u6709\u5361\u7247\u9032\u5165\u300c\u6e96\u5099\u72c0\u614b\u300d *\/\r\n .persona-grid:hover .persona-card {\r\n opacity: 0.5; \/* \u5168\u90e8\u8b8a\u6697 *\/\r\n filter: blur(1px) grayscale(0.6); \/* \u7a0d\u5fae\u6a21\u7cca\u8207\u53bb\u8272 *\/\r\n transform: scale(0.98); \/* \u7a0d\u5fae\u7e2e\u5c0f *\/\r\n }\r\n\r\n \/* \u552f\u7368\u300c\u88ab Hover\u300d\u7684\u90a3\u5f35\u5361\u7247\uff0c\u6062\u5fa9\u9ad8\u4eae *\/\r\n .persona-grid .persona-card:hover {\r\n opacity: 1;\r\n filter: blur(0) grayscale(0);\r\n transform: translateY(-15px) scale(1.02); \/* \u4e0a\u6d6e\u4e14\u653e\u5927 *\/\r\n box-shadow: var(--shadow-active);\r\n background: #fff;\r\n z-index: 10;\r\n border-color: var(--blue-main);\r\n }\r\n\r\n \/* \u9078\u4e2d\u6a19\u8a18 (Selected Checkmark) *\/\r\n .select-mark {\r\n position: absolute; top: 20px; right: 20px;\r\n width: 24px; height: 24px; border-radius: 50%;\r\n background: #E2E8F0; color: #fff;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 14px; opacity: 0; transform: scale(0);\r\n transition: all 0.3s ease;\r\n }\r\n .persona-card:hover .select-mark {\r\n opacity: 1; transform: scale(1); background: #10B981; \/* \u7da0\u8272\u6253\u52fe *\/\r\n }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 1024px) {\r\n .persona-grid { grid-template-columns: 1fr 1fr; gap: 20px; } \/* \u5e73\u677f 2x2 *\/\r\n }\r\n \r\n @media (max-width: 600px) {\r\n .persona-grid { grid-template-columns: 1fr; } \/* \u624b\u6a5f\u55ae\u6b04 *\/\r\n .main-title { font-size: 32px; }\r\n .highlight-pill { display: block; width: fit-content; margin: 10px auto 0; transform: none; }\r\n \r\n \/* \u624b\u6a5f\u7248\u53d6\u6d88\u8907\u96dc\u7684 :has \u4e92\u52d5\uff0c\u6539\u70ba\u7c21\u55ae Hover *\/\r\n .persona-grid:hover .persona-card { opacity: 1; filter: none; transform: none; }\r\n .persona-grid .persona-card:hover { transform: translateY(-5px); }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section class=\"target-section\">\r\n \r\n <div class=\"section-header\">\r\n <h2 class=\"main-title\">\r\n \u9019\u9580\u8ab2\uff0c<br>\u9069\u5408\u8ab0\u4f86\u4e0a\uff1f\r\n <span class=\"highlight-pill\">Target Audience<\/span>\r\n <\/h2>\r\n <\/div>\r\n\r\n <div class=\"persona-grid\">\r\n \r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83d\udcbc<\/div>\r\n <h3 class=\"role-title\">\u696d\u52d9\u8207\u92b7\u552e\u4eba\u54e1<\/h3>\r\n <p class=\"role-desc\">\r\n \u60f3\u63d0\u5347\u696d\u7e3e\uff0c\u537b\u5e38\u5e38\u5361\u5728\u4e0d\u6562\u958b\u53e3\u8207\u63a8\u9032\u95dc\u4fc2\u3002\u9700\u8981\u4e00\u5957\u4e0d\u5f37\u8feb\u63a8\u92b7\uff0c\u4e5f\u80fd\u81ea\u7136\u5efa\u7acb\u4fe1\u4efb\u611f\u8207\u6210\u4ea4\u7684\u7bc0\u594f\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83d\udc51<\/div>\r\n <h3 class=\"role-title\">\u92b7\u552e\u4e3b\u7ba1\u8207\u5275\u696d\u8005<\/h3>\r\n <p class=\"role-desc\">\r\n \u5718\u968a\u696d\u7e3e\u4e0d\u7a69\u3001\u5167\u8017\u56b4\u91cd\u3002\u9700\u8981\u5148\u6821\u6e96\u81ea\u5df1\u7684\u72c0\u614b\uff0c\u9032\u800c\u63d0\u5347\u5718\u968a\u6e9d\u901a\u3001\u5f71\u97ff\u529b\u8207\u6574\u9ad4\u696d\u52d9\u52d5\u80fd\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83e\udde0<\/div>\r\n <h3 class=\"role-title\">\u9867\u554f\u578b\u5de5\u4f5c\u8005<\/h3>\r\n <p class=\"role-desc\">\r\n \u61c2\u5c08\u696d\u537b\u4e0d\u64c5\u9577\u5305\u88dd\u81ea\u5df1\u3002\u5e0c\u671b\u627e\u5230\u5c08\u5c6c\u7684\u6e9d\u901a\u5929\u8ce6\uff0c\u8b93\u81ea\u5df1\u7684\u5c08\u696d\u50f9\u503c\u66f4\u5bb9\u6613\u88ab\u5e02\u5834\u770b\u898b\u8207\u8cb7\u55ae\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"persona-card\">\r\n <div class=\"scan-bar\"><\/div>\r\n <div class=\"select-mark\">\u2713<\/div>\r\n <div class=\"icon-wrapper\">\ud83c\udfe2<\/div>\r\n <h3 class=\"role-title\">\u60f3\u7a81\u7834\u74f6\u9838\u7684\u4e0a\u73ed\u65cf<\/h3>\r\n <p class=\"role-desc\">\r\n \u660e\u660e\u5f88\u52aa\u529b\uff0c\u537b\u5e38\u5e38\u89ba\u5f97\u81ea\u5df1\u767c\u63ee\u4e0d\u7a69\u5b9a\u3002\u9700\u8981\u91cd\u65b0\u68b3\u7406\u5167\u5728\u5361\u9ede\uff0c\u628a\u80fd\u529b\u771f\u6b63\u8f49\u5316\u70ba\u8077\u5834\u8868\u73fe\u8207\u6210\u679c\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-35ca4a2 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"35ca4a2\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7518c0b elementor-widget elementor-widget-html\" data-id=\"7518c0b\" data-element_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>Tuesday Seminar Ticket<\/title>\r\n<style>\r\n\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --text-dark: #1E293B;\r\n --text-sub: #475569;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u7968\u5238\u8cea\u611f\u8b8a\u6578 *\/\r\n --ticket-bg: #FFFFFF;\r\n --holo-gradient: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 60%);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n padding-top: 80px; \r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .register-section {\r\n position: relative;\r\n padding: 40px 20px 80px;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; margin-bottom: 50px; position: relative; z-index: 2;\r\n max-width: 800px;\r\n }\r\n .kicker {\r\n font-size: 14px; font-weight: 700; color: var(--blue-main); letter-spacing: 2px;\r\n text-transform: uppercase; margin-bottom: 12px; display: block;\r\n transition: letter-spacing 0.3s ease;\r\n }\r\n .section-header:hover .kicker {\r\n letter-spacing: 4px;\r\n }\r\n\r\n .main-title {\r\n font-size: 32px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n transition: color 0.3s;\r\n }\r\n @media (min-width: 768px) {\r\n .main-title { font-size: 42px; }\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u64ec\u771f\u7968\u5238 *\/\r\n \/* ======================= *\/\r\n .ticket-wrapper {\r\n position: relative;\r\n width: 100%; max-width: 900px; \r\n filter: drop-shadow(0 20px 30px rgba(30, 75, 175, 0.15));\r\n transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n }\r\n .ticket-wrapper:hover { transform: translateY(-8px) scale(1.01); }\r\n\r\n .ticket-body {\r\n display: flex;\r\n background: var(--ticket-bg);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n position: relative;\r\n background-image: radial-gradient(#F1F5F9 1px, transparent 1px);\r\n background-size: 20px 20px;\r\n }\r\n\r\n \/* --- \u5168\u606f\u9632\u507d\u689d --- *\/\r\n .holo-strip {\r\n position: absolute; left: 0; top: 0; bottom: 0; width: 10px;\r\n background: linear-gradient(180deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6);\r\n background-size: 100% 200%;\r\n animation: holo-move 5s linear infinite;\r\n z-index: 10;\r\n box-shadow: 2px 0 15px rgba(59, 130, 246, 0.4);\r\n }\r\n @keyframes holo-move { 0% { background-position: 0% 0%; } 100% { background-position: 0% 200%; } }\r\n\r\n \/* --- \u5de6\u5074\uff1a\u8cc7\u8a0a\u5340 --- *\/\r\n .ticket-left {\r\n flex: 2; \r\n padding: 45px 40px 40px 50px;\r\n display: flex; flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n .ticket-brand {\r\n display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;\r\n }\r\n .brand-name { font-size: 13px; font-weight: 700; color: var(--blue-main); text-transform: uppercase; letter-spacing: 1px; }\r\n .ticket-type { \r\n background: #0F172A; color: #fff; padding: 6px 12px; border-radius: 6px; \r\n font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;\r\n }\r\n\r\n \/* \u8ab2\u7a0b\u6838\u5fc3\u5167\u5bb9 *\/\r\n .event-name {\r\n font-size: 28px; font-weight: 900; color: var(--blue-dark); line-height: 1.3; margin-bottom: 12px;\r\n transition: all 0.3s ease;\r\n background-image: linear-gradient(45deg, #0F172A, #1E4BAF);\r\n background-size: 0% 100%;\r\n background-repeat: no-repeat;\r\n -webkit-background-clip: text;\r\n cursor: default;\r\n }\r\n .event-name span { color: var(--blue-main); transition: color 0.3s; } \r\n \r\n .ticket-wrapper:hover .event-name {\r\n background-size: 100% 100%; \r\n color: #1E4BAF; \r\n text-shadow: 2px 2px 0px rgba(30, 75, 175, 0.05);\r\n }\r\n .ticket-wrapper:hover .event-name span {\r\n color: #8B5CF6; \r\n }\r\n\r\n \/* \u7279\u8272\u6a19\u7c64 *\/\r\n .tags-row {\r\n display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;\r\n }\r\n .tag {\r\n font-size: 12px; padding: 4px 10px; border-radius: 4px;\r\n background: #EFF6FF; color: #1E4BAF; font-weight: 600; border: 1px solid #DBEAFE;\r\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); \r\n cursor: pointer;\r\n }\r\n .tag:hover {\r\n background: #1E4BAF;\r\n color: #fff;\r\n border-color: #1E4BAF;\r\n transform: translateY(-3px) scale(1.05);\r\n box-shadow: 0 4px 8px rgba(30, 75, 175, 0.2);\r\n }\r\n\r\n \/* ---- \u6587\u6848\u512a\u5316\u5340 (Description) ---- *\/\r\n .event-desc {\r\n font-size: 15px; color: var(--text-sub); margin-bottom: 25px;\r\n line-height: 1.7; text-align: justify;\r\n }\r\n .event-desc strong { \r\n color: var(--blue-dark); \r\n font-weight: 700; \r\n position: relative;\r\n cursor: help;\r\n transition: color 0.3s;\r\n }\r\n .event-desc strong::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0; left: 0;\r\n width: 0%; height: 2px;\r\n background-color: #F43F5E; \r\n transition: width 0.4s ease;\r\n }\r\n .event-desc strong:hover { color: #1E4BAF; }\r\n .event-desc strong:hover::after { width: 100%; }\r\n \r\n \/* \u5f15\u7528\u53e5 *\/\r\n .quote-box {\r\n border-left: 3px solid #CBD5E1;\r\n padding-left: 15px;\r\n margin-bottom: 25px;\r\n font-style: italic;\r\n color: #64748B;\r\n font-size: 14px;\r\n transition: all 0.3s;\r\n }\r\n .ticket-wrapper:hover .quote-box {\r\n border-left-color: #1E4BAF;\r\n background: rgba(30, 75, 175, 0.02);\r\n }\r\n\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u683c (Grid Layout) *\/\r\n .ticket-meta {\r\n display: grid; \r\n grid-template-columns: 1.2fr 1fr 1.3fr; \r\n gap: 15px; \r\n margin-top: auto; \r\n padding-top: 25px;\r\n border-top: 2px dashed #E2E8F0;\r\n }\r\n \r\n .meta-item { transition: transform 0.3s; }\r\n .meta-item:hover { transform: translateY(-2px); }\r\n \r\n .meta-item label { \r\n display: block; font-size: 11px; color: #94A3B8; \r\n text-transform: uppercase; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px;\r\n }\r\n .meta-item span { \r\n display: block; font-size: 14.5px; font-weight: 700; color: var(--text-dark); line-height: 1.4;\r\n }\r\n \r\n .highlight-bg {\r\n background: linear-gradient(120deg, #FEF08A 0%, #FDE047 100%);\r\n padding: 2px 6px; border-radius: 4px;\r\n box-decoration-break: clone; -webkit-box-decoration-break: clone;\r\n color: #854D0E;\r\n }\r\n\r\n \/* --- \u53f3\u5074\uff1a\u884c\u52d5\u5340 --- *\/\r\n .ticket-right {\r\n flex: 0.9;\r\n padding: 40px;\r\n background: #F8FAFC;\r\n display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n text-align: center;\r\n position: relative;\r\n border-left: 2px dashed #CBD5E1;\r\n overflow: hidden; \r\n }\r\n\r\n \/* \u7f3a\u53e3\u906e\u7f69 *\/\r\n .ticket-body {\r\n -webkit-mask-image: \r\n radial-gradient(circle at 69% 0, transparent 15px, black 16px), \r\n radial-gradient(circle at 69% 100%, transparent 15px, black 16px);\r\n mask-composite: intersect; \r\n }\r\n\r\n .barcode {\r\n width: 100%; height: 40px;\r\n background: repeating-linear-gradient(90deg, \r\n #334155 0, #334155 2px, \r\n transparent 2px, transparent 5px,\r\n #334155 5px, #334155 8px,\r\n transparent 8px, transparent 10px\r\n );\r\n opacity: 0.2; margin-top: 30px;\r\n }\r\n\r\n .cta-btn {\r\n width: 100%; padding: 18px 10px;\r\n background: var(--blue-main); color: #fff;\r\n font-size: 18px; font-weight: 700; border-radius: 12px;\r\n text-decoration: none; box-shadow: 0 8px 20px rgba(30, 75, 175, 0.25);\r\n transition: all 0.3s; display: block;\r\n position: relative;\r\n overflow: hidden; \r\n }\r\n \r\n .cta-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; left: -100%;\r\n width: 100%; height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);\r\n transform: skewX(-20deg);\r\n transition: 0.5s;\r\n }\r\n \r\n .cta-btn:hover { \r\n background: #183C8C; \r\n transform: translateY(-2px); \r\n box-shadow: 0 12px 25px rgba(30, 75, 175, 0.3); \r\n }\r\n \r\n .cta-btn:hover::before {\r\n left: 100%;\r\n transition: 0.6s ease-in-out;\r\n }\r\n\r\n .cta-btn small { display: block; font-size: 12px; font-weight: 400; opacity: 0.9; margin-top: 5px; }\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .ticket-wrapper { max-width: 100%; }\r\n .ticket-body { flex-direction: column; -webkit-mask-image: none; }\r\n .holo-strip { width: 100%; height: 6px; bottom: auto; background-size: 200% 100%; animation: holo-move-x 5s linear infinite; }\r\n @keyframes holo-move-x { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }\r\n \r\n .ticket-left { padding: 40px 25px 30px; flex: auto; }\r\n .ticket-right { border-left: none; border-top: 2px dashed #CBD5E1; padding: 40px 25px; flex: auto; }\r\n \r\n .ticket-right::before, .ticket-right::after {\r\n content: \"\"; position: absolute; top: -15px; width: 30px; height: 30px;\r\n background: var(--bg-page); border-radius: 50%;\r\n }\r\n .ticket-right::before { left: -15px; }\r\n .ticket-right::after { right: -15px; }\r\n \r\n .ticket-meta { grid-template-columns: 1fr; gap: 20px; } \r\n .event-name { font-size: 24px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section id=\"ticket-area\" class=\"register-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">WEEKLY SEMINAR<\/span>\r\n <h2 class=\"main-title\">\u6bcf\u9031\u4e8c\u56fa\u5b9a\u958b\u8b1b<br>\u6cdb\u6d77\u5546\u5b78\u9662\u9031\u4e8c\u8b1b\u5802<\/h2>\r\n <\/div>\r\n\r\n <div class=\"ticket-wrapper\">\r\n <div class=\"ticket-body\">\r\n \r\n <div class=\"holo-strip\"><\/div>\r\n\r\n <div class=\"ticket-left\">\r\n <div class=\"ticket-brand\">\r\n <span class=\"brand-name\">Finhive Academy<\/span>\r\n <span class=\"ticket-type\">Reservation Required<\/span>\r\n <\/div>\r\n \r\n <div class=\"main-info\">\r\n <h3 class=\"event-name\">\r\n \u5e02\u5834 \u00d7 \u8cfd\u9053 \u00d7 AI \u5be6\u6230<br>\r\n <span>\u9031\u4e8c\u8b1b\u5802\u5831\u540d\u8868<\/span>\r\n <\/h3>\r\n \r\n <div class=\"tags-row\">\r\n <span class=\"tag\">#\u5e02\u5834\u5224\u8b80<\/span>\r\n <span class=\"tag\">#\u8cfd\u9053\u9078\u64c7<\/span>\r\n <span class=\"tag\">#AI\u5de5\u5177\u61c9\u7528<\/span>\r\n <\/div>\r\n\r\n <div class=\"event-desc\">\r\n \u9019\u4e0d\u662f\u4e00\u5802\u53ea\u807d\u8da8\u52e2\u7684\u8ab2\uff0c\u800c\u662f\u4e00\u5802\u5e6b\u4f60\u628a<strong>\u5e02\u5834\u3001\u65b9\u5411\u8207\u4e0b\u4e00\u6b65<\/strong>\u505a\u6e05\u695a\u7684\u8ab2\u3002<br>\r\n \u5982\u679c\u4f60\u6b63\u5728\u60f3\u300c\u5e02\u5834\u9084\u6709\u54ea\u4e9b\u6a5f\u6703\u300d\u3001\u300c\u6211\u9069\u5408\u54ea\u689d\u8def\u300d\uff0c\u9019\u5802\u8ab2\u6703\u662f\u5f88\u597d\u7684\u8d77\u9ede\uff1a\r\n <br><br>\r\n \u2705 <strong>\u60f3\u627e\u65b9\u5411\u7684\u4eba\uff1a<\/strong>\u91cd\u65b0\u6574\u7406\u601d\u7dd2\uff0c\u627e\u5230\u767c\u529b\u9ede<br>\r\n \u2705 <strong>\u5efa\u7acb\u7b2c\u4e8c\u80fd\u529b\uff1a<\/strong>\u5b78\u6703 AI \u5be6\u6230\uff0c\u8b8a\u6210\u8cfa\u9322\u5de5\u5177<br>\r\n \u2705 <strong>\u5177\u9ad4\u5316\u60f3\u6cd5\uff1a<\/strong>\u5c07\u9ede\u5b50\u8b8a\u73fe\uff0c\u770b\u61c2\u5e02\u5834\u5167\u90e8\u9580\u9053\r\n <\/div>\r\n\r\n <div class=\"quote-box\">\r\n \u6bcf\u9031\u4e8c\u56fa\u5b9a\u958b\u8b1b\uff0c\u5e6b\u60a8\u770b\u61c2\u5e02\u5834\u3001\u627e\u5230\u65b9\u5411\u3001\u6574\u7406\u4e0b\u4e00\u6b65\u3002\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-meta\">\r\n <div class=\"meta-item\">\r\n <label>Time<\/label>\r\n <span class=\"highlight-bg\">3\/17, 3\/24, 3\/31 (\u4e8c)<\/span>\r\n <span style=\"display: block; font-size: 13.5px; margin-top: 4px; color: var(--text-sub);\">14:00 \u2013 15:30<\/span>\r\n <\/div>\r\n \r\n <div class=\"meta-item\">\r\n <label>Fee<\/label>\r\n <span>\u975e\u6703\u54e1 $500 \/ \u4eba<br>(\u5169\u4eba\u540c\u884c\u4e00\u4eba\u514d\u8cbb)<\/span>\r\n <\/div>\r\n\r\n <div class=\"meta-item\">\r\n <label>Member Privilege<\/label>\r\n <span>\u6cdb\u6d77\u6703\u54e1<br>\u514d\u8cbb\u53c3\u52a0<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-right\">\r\n <a href=\"https:\/\/forms.gle\/hJ15FudTWH6UX1797\" target=\"_blank\" class=\"cta-btn\">\r\n \u9810\u7d04\u5831\u540d \u2794\r\n <small>\u5831\u540d\u5f8c\u7531\u5c08\u4eba\u63d0\u4f9b\u5f8c\u7e8c\u8cc7\u8a0a<\/small>\r\n <\/a>\r\n <div class=\"barcode\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-649d4fa e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"649d4fa\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fe5cda1 elementor-widget elementor-widget-html\" data-id=\"fe5cda1\" data-element_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>Workshop Ticket - Expanded<\/title>\r\n<style>\r\n\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --blue-main: #1E4BAF;\r\n --blue-dark: #0F172A;\r\n --text-dark: #1E293B;\r\n --text-sub: #475569;\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n \r\n \/* \u7968\u5238\u8cea\u611f\u8b8a\u6578 *\/\r\n --ticket-bg: #FFFFFF;\r\n --holo-gradient: linear-gradient(135deg, rgba(255,255,255,0) 40%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 60%);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n padding-top: 80px; \/* \u9810\u7559\u7d66 Header \u7684\u7a7a\u9593 *\/\r\n }\r\n\r\n \/* \u80cc\u666f\u7db2\u683c *\/\r\n .grid-bg {\r\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: -2;\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u4e3b\u5bb9\u5668 *\/\r\n \/* ======================= *\/\r\n .register-section {\r\n position: relative;\r\n padding: 40px 20px 80px;\r\n display: flex; flex-direction: column; align-items: center;\r\n }\r\n\r\n \/* \u6a19\u984c\u5340 *\/\r\n .section-header {\r\n text-align: center; margin-bottom: 50px; position: relative; z-index: 2;\r\n max-width: 800px;\r\n }\r\n .kicker {\r\n font-size: 14px; font-weight: 700; color: var(--blue-main); letter-spacing: 2px;\r\n text-transform: uppercase; margin-bottom: 12px; display: block;\r\n }\r\n .main-title {\r\n font-size: 32px; font-weight: 900; color: var(--blue-dark);\r\n line-height: 1.3;\r\n }\r\n @media (min-width: 768px) {\r\n .main-title { font-size: 42px; }\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u64ec\u771f\u7968\u5238 (The Realistic Ticket) *\/\r\n \/* ======================= *\/\r\n .ticket-wrapper {\r\n position: relative;\r\n width: 100%; max-width: 900px; \/* \u7a0d\u5fae\u52a0\u5bec\u4ee5\u5bb9\u7d0d\u66f4\u591a\u6587\u5b57 *\/\r\n filter: drop-shadow(0 20px 30px rgba(30, 75, 175, 0.15));\r\n transition: transform 0.3s ease;\r\n }\r\n .ticket-wrapper:hover { transform: translateY(-5px); }\r\n\r\n .ticket-body {\r\n display: flex;\r\n background: var(--ticket-bg);\r\n border-radius: 24px;\r\n overflow: hidden;\r\n position: relative;\r\n background-image: radial-gradient(#F1F5F9 1px, transparent 1px);\r\n background-size: 20px 20px;\r\n }\r\n\r\n \/* --- \u5168\u606f\u9632\u507d\u689d --- *\/\r\n .holo-strip {\r\n position: absolute; left: 0; top: 0; bottom: 0; width: 10px;\r\n background: linear-gradient(180deg, #3B82F6, #8B5CF6, #EC4899, #3B82F6);\r\n background-size: 100% 200%;\r\n animation: holo-move 5s linear infinite;\r\n z-index: 10;\r\n }\r\n @keyframes holo-move { 0% { background-position: 0% 0%; } 100% { background-position: 0% 200%; } }\r\n\r\n \/* --- \u5de6\u5074\uff1a\u8cc7\u8a0a\u5340 --- *\/\r\n .ticket-left {\r\n flex: 2; \/* \u589e\u52a0\u5de6\u5074\u6bd4\u4f8b\uff0c\u7d66\u6587\u6848\u66f4\u591a\u7a7a\u9593 *\/\r\n padding: 45px 40px 40px 50px;\r\n display: flex; flex-direction: column;\r\n position: relative;\r\n }\r\n\r\n .ticket-brand {\r\n display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px;\r\n }\r\n .brand-name { font-size: 13px; font-weight: 700; color: var(--blue-main); text-transform: uppercase; letter-spacing: 1px; }\r\n .ticket-type { \r\n background: #0F172A; color: #fff; padding: 6px 12px; border-radius: 6px; \r\n font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;\r\n }\r\n\r\n \/* \u8ab2\u7a0b\u6838\u5fc3\u5167\u5bb9 *\/\r\n .event-name {\r\n font-size: 28px; font-weight: 900; color: var(--blue-dark); line-height: 1.3; margin-bottom: 12px;\r\n }\r\n .event-name span { color: var(--blue-main); } \r\n\r\n \/* \u7279\u8272\u6a19\u7c64 *\/\r\n .tags-row {\r\n display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px;\r\n }\r\n .tag {\r\n font-size: 12px; padding: 4px 10px; border-radius: 4px;\r\n background: #EFF6FF; color: #1E4BAF; font-weight: 600; border: 1px solid #DBEAFE;\r\n }\r\n\r\n \/* ---- \u6587\u6848\u512a\u5316\u5340 (Description) ---- *\/\r\n .event-desc {\r\n font-size: 15px; color: var(--text-sub); margin-bottom: 25px;\r\n line-height: 1.7; text-align: justify;\r\n }\r\n .event-desc strong { color: var(--blue-dark); font-weight: 700; }\r\n \r\n \/* \u5f15\u7528\u53e5 *\/\r\n .quote-box {\r\n border-left: 3px solid #CBD5E1;\r\n padding-left: 15px;\r\n margin-bottom: 25px;\r\n font-style: italic;\r\n color: #64748B;\r\n font-size: 14px;\r\n }\r\n\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u683c (Grid Layout) *\/\r\n .ticket-meta {\r\n display: grid; \r\n grid-template-columns: 1.2fr 1fr 1fr; \/* \u4e09\u6b04\u6bd4\u4f8b\uff1a\u65e5\u671f\u5bec\u4e00\u9ede *\/\r\n gap: 20px; \r\n margin-top: auto; \/* \u63a8\u5230\u5e95\u90e8 *\/\r\n padding-top: 25px;\r\n border-top: 2px dashed #E2E8F0;\r\n }\r\n \r\n .meta-item label { \r\n display: block; font-size: 11px; color: #94A3B8; \r\n text-transform: uppercase; margin-bottom: 6px; font-weight: 700; letter-spacing: 0.5px;\r\n }\r\n .meta-item span { \r\n display: block; font-size: 15px; font-weight: 700; color: var(--text-dark); line-height: 1.4;\r\n }\r\n \r\n \/* \u65e5\u671f\u9ad8\u4eae\u6a23\u5f0f\u512a\u5316 *\/\r\n .highlight-bg {\r\n background: linear-gradient(120deg, #FEF08A 0%, #FDE047 100%);\r\n padding: 2px 6px; border-radius: 4px;\r\n box-decoration-break: clone; -webkit-box-decoration-break: clone;\r\n color: #854D0E;\r\n }\r\n\r\n \/* --- \u53f3\u5074\uff1a\u884c\u52d5\u5340 --- *\/\r\n .ticket-right {\r\n flex: 0.9;\r\n padding: 40px;\r\n background: #F8FAFC;\r\n display: flex; flex-direction: column; justify-content: center; align-items: center;\r\n text-align: center;\r\n position: relative;\r\n border-left: 2px dashed #CBD5E1;\r\n }\r\n\r\n \/* \u7f3a\u53e3\u906e\u7f69 *\/\r\n .ticket-body {\r\n -webkit-mask-image: \r\n radial-gradient(circle at 69% 0, transparent 15px, black 16px), \r\n radial-gradient(circle at 69% 100%, transparent 15px, black 16px);\r\n mask-composite: intersect; \r\n }\r\n\r\n .barcode {\r\n width: 100%; height: 40px;\r\n background: repeating-linear-gradient(90deg, \r\n #334155 0, #334155 2px, \r\n transparent 2px, transparent 5px,\r\n #334155 5px, #334155 8px,\r\n transparent 8px, transparent 10px\r\n );\r\n opacity: 0.2; margin-top: 30px;\r\n }\r\n\r\n .cta-btn {\r\n width: 100%; padding: 18px 10px;\r\n background: var(--blue-main); color: #fff;\r\n font-size: 18px; font-weight: 700; border-radius: 12px;\r\n text-decoration: none; box-shadow: 0 8px 20px rgba(30, 75, 175, 0.25);\r\n transition: all 0.3s; display: block;\r\n }\r\n .cta-btn small { display: block; font-size: 12px; font-weight: 400; opacity: 0.9; margin-top: 5px; }\r\n .cta-btn:hover { background: #183C8C; transform: translateY(-2px); box-shadow: 0 12px 25px rgba(30, 75, 175, 0.3); }\r\n\r\n \/* \u6587\u5b57\u9023\u7d50 (Line \u52a0\u5165) *\/\r\n .btn-link {\r\n color: var(--text-sub); font-size: 13px; text-decoration: none; text-align: center; \r\n margin-top: 15px; cursor: pointer; opacity: 0.8; transition: opacity 0.3s;\r\n display: flex; align-items: center; justify-content: center; gap: 6px;\r\n }\r\n .btn-link:hover { opacity: 1; text-decoration: underline; color: var(--blue-main); }\r\n\r\n\r\n \/* ======================= *\/\r\n \/* RWD *\/\r\n \/* ======================= *\/\r\n @media (max-width: 900px) {\r\n .ticket-wrapper { max-width: 100%; }\r\n .ticket-body { flex-direction: column; -webkit-mask-image: none; }\r\n .holo-strip { width: 100%; height: 6px; bottom: auto; background-size: 200% 100%; animation: holo-move-x 5s linear infinite; }\r\n @keyframes holo-move-x { 0% { background-position: 0% 0%; } 100% { background-position: 200% 0%; } }\r\n \r\n .ticket-left { padding: 40px 25px 30px; flex: auto; }\r\n .ticket-right { border-left: none; border-top: 2px dashed #CBD5E1; padding: 40px 25px; flex: auto; }\r\n \r\n \/* \u624b\u6a5f\u7248\u7f3a\u53e3 *\/\r\n .ticket-right::before, .ticket-right::after {\r\n content: \"\"; position: absolute; top: -15px; width: 30px; height: 30px;\r\n background: var(--bg-page); border-radius: 50%;\r\n }\r\n .ticket-right::before { left: -15px; }\r\n .ticket-right::after { right: -15px; }\r\n \r\n .ticket-meta { grid-template-columns: 1fr; gap: 20px; } \/* \u624b\u6a5f\u7248\u8b8a\u55ae\u6b04 *\/\r\n .event-name { font-size: 24px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"grid-bg\"><\/div>\r\n\r\n <section id=\"ticket-area\" class=\"register-section\">\r\n \r\n <div class=\"section-header\">\r\n <span class=\"kicker\">BUSINESS OPPORTUNITY<\/span>\r\n <h2 class=\"main-title\">\u6cdb\u6d77\u5546\u5b78\u9662\uff5c\u8da8\u52e2\u5546\u6a5f\u8b1b\u5ea7<br>\u627e\u5230\u4f60\u7684\u4e0b\u4e00\u689d\u8def<\/h2>\r\n <\/div>\r\n\r\n <div class=\"ticket-wrapper\">\r\n <div class=\"ticket-body\">\r\n \r\n <div class=\"holo-strip\"><\/div>\r\n\r\n <div class=\"ticket-left\">\r\n <div class=\"ticket-brand\">\r\n <span class=\"brand-name\">Finhive Academy<\/span>\r\n <span class=\"ticket-type\">Seminar Ticket<\/span>\r\n <\/div>\r\n \r\n <div class=\"main-info\">\r\n <h3 class=\"event-name\">\r\n \u672a\u4f86\u5e7e\u5e74\uff0c\u666e\u901a\u4eba<br>\r\n <span>\u9084\u6709\u54ea\u4e9b\u65b0\u7684\u6536\u5165\u6a5f\u6703\uff1f<\/span>\r\n <\/h3>\r\n \r\n <div class=\"tags-row\">\r\n <span class=\"tag\">#\u8da8\u52e2\u5546\u6a5f<\/span>\r\n <span class=\"tag\">#\u659c\u69d3\u5e03\u5c40<\/span>\r\n <span class=\"tag\">#\u589e\u52a0\u6536\u5165<\/span>\r\n <\/div>\r\n\r\n <div class=\"event-desc\">\r\n \u4f60\u6709\u6c92\u6709\u767c\u73fe\uff0c\u73fe\u5728\u5f88\u591a\u4eba\u90fd\u5f88\u52aa\u529b\uff0c\u4f46\u751f\u6d3b\u58d3\u529b\u9084\u662f\u8d8a\u4f86\u8d8a\u5927\uff1f\u53ea\u9760\u4e00\u4efd\u6536\u5165\uff0c\u8d8a\u4f86\u8d8a\u6c92\u6709\u5b89\u5168\u611f\u3002<br>\r\n \u9019\u5834\u8ab2\uff0c\u4e0d\u662f\u7a7a\u8ac7\u8da8\u52e2\uff0c\u800c\u662f\u5e36\u4f60\u770b\u61c2\uff1a\r\n <br><br>\r\n \u2705 <strong>\u770b\u61c2\u672a\u4f86\u65b9\u5411\uff1a<\/strong>\u54ea\u4e9b\u659c\u69d3\u65b9\u5411\u503c\u5f97\u63d0\u65e9\u5e03\u5c40\uff1f<br>\r\n \u2705 <strong>\u627e\u51fa\u9069\u5408\u5207\u5165\u9ede\uff1a<\/strong>\u5982\u4f55\u5728\u8b8a\u5c40\u4e2d\u627e\u5230\u4e0b\u4e00\u689d\u8def\uff1f<br>\r\n \u2705 <strong>\u907f\u958b\u76f2\u76ee\u6295\u5165\uff1a<\/strong>\u5c11\u8d70\u51a4\u6789\u8def\uff0c\u628a\u8da8\u52e2\u8b8a\u6210\u771f\u6b63\u53ef\u884c\u6536\u5165\u3002\r\n <\/div>\r\n\r\n <div class=\"quote-box\">\r\n \u770b\u61c2\u8da8\u52e2\uff0c\u624d\u6709\u6a5f\u6703\u63d0\u65e9\u5e03\u5c40\u3002\u5148\u770b\u61c2\u7684\u4eba\uff0c\u5f80\u5f80\u5148\u627e\u5230\u6a5f\u6703\u3002\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-meta\">\r\n <div class=\"meta-item\">\r\n <label>Date & Time<\/label>\r\n <span class=\"highlight-bg\">3\/18 (\u4e09) 14:00<\/span>\r\n <span style=\"font-size: 12px; color: var(--text-sub); margin-top: 4px; display: block; font-weight: normal;\">(13:30 \u958b\u59cb\u5831\u5230)<\/span>\r\n <\/div>\r\n \r\n <div class=\"meta-item\">\r\n <label>Content<\/label>\r\n <span>\u8da8\u52e2\u5546\u6a5f \/ \u659c\u69d3\u4f48\u5c40<br>\u907f\u958b\u76f2\u5340<\/span>\r\n <\/div>\r\n\r\n <div class=\"meta-item\">\r\n <label>Location<\/label>\r\n <span>105 \u81fa\u5317\u5e02\u677e\u5c71\u5340<br>\u6c11\u751f\u6771\u8def\u4e09\u6bb5 131 \u865f 7 \u6a13<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ticket-right\">\r\n <a href=\"https:\/\/forms.gle\/SwjZ88yDcdMgqq4TA\" target=\"_blank\" class=\"cta-btn\">\r\n \u7acb\u5373\u9810\u7d04\u5831\u540d \u2794\r\n <small>Limited Seats Available<\/small>\r\n <\/a>\r\n \r\n <a href=\"https:\/\/lin.ee\/gXuyYwR\" target=\"_blank\" class=\"btn-link\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M12 2C6.48 2 2 5.92 2 10.5C2 13.14 3.49 15.48 5.84 17C5.64 17.8 5.16 19.34 5.08 19.6C5.03 19.78 5.23 19.95 5.39 19.86C6.69 19.16 9.38 17.65 9.38 17.65C10.21 17.88 11.09 18 12 18C17.52 18 22 14.08 22 9.5C22 4.92 17.52 2 12 2Z\"\/><\/svg>\r\n \u6216\u52a0\u5165 Line \u5b98\u65b9\u5e33\u865f\u9810\u7d04\r\n <\/a>\r\n\r\n <div class=\"barcode\"><\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n <\/section>\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<div class=\"elementor-element elementor-element-e7b254d e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"e7b254d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a2a3c2 elementor-widget elementor-widget-html\" data-id=\"4a2a3c2\" data-element_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>Finhive Courses - Frequency<\/title>\r\n<style>\r\n \/* =============================== *\/\r\n \/* 1. \u6838\u5fc3\u8b8a\u6578 *\/\r\n \/* =============================== *\/\r\n :root {\r\n --bg-page: #F5F7FF;\r\n --bg-card: #FFFFFF;\r\n --primary-blue: #1E4BAF;\r\n --primary-dark: #1e3a8a;\r\n --primary-light: #EFF6FF;\r\n --text-dark: #0F172A;\r\n --text-gray: #64748B;\r\n --border-light: #E2E8F0;\r\n \r\n --accent-hot: #F43F5E; \r\n --accent-new: #10B981; \r\n --accent-purple: #8B5CF6; \r\n\r\n --shadow-card: 0 10px 40px -10px rgba(0,0,0,0.08);\r\n --shadow-hover: 0 25px 50px -12px rgba(30, 75, 175, 0.25);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n background-color: var(--bg-page);\r\n font-family: \"Inter\", \"PingFang TC\", \"Noto Sans TC\", sans-serif;\r\n color: var(--text-dark);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* \u5340\u584a\u5bb9\u5668 *\/\r\n .courses-section {\r\n max-width: 1320px;\r\n margin: 0 auto;\r\n padding: 120px 40px;\r\n position: relative;\r\n }\r\n\r\n \/* =============================== *\/\r\n \/* 2. \u6a19\u984c\u5340\u584a *\/\r\n \/* =============================== *\/\r\n .header-center {\r\n text-align: center; max-width: 760px; margin: 0 auto 80px auto;\r\n }\r\n .kicker {\r\n display: inline-block; font-size: 13px; font-weight: 700; color: var(--primary-blue);\r\n text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px;\r\n background: rgba(30, 75, 175, 0.08); padding: 4px 12px; border-radius: 6px;\r\n }\r\n .main-title { font-size: 42px; font-weight: 900; margin-bottom: 20px; color: var(--text-dark); letter-spacing: -0.5px; }\r\n .desc { font-size: 17px; color: var(--text-gray); line-height: 1.8; }\r\n\r\n\r\n \/* =============================== *\/\r\n \/* 3. \u7db2\u683c\u4f48\u5c40 *\/\r\n \/* =============================== *\/\r\n .premium-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\r\n gap: 40px;\r\n padding-bottom: 40px;\r\n }\r\n\r\n\r\n \/* =============================== *\/\r\n \/* 4. \u5361\u7247\u6a23\u5f0f *\/\r\n \/* =============================== *\/\r\n a.course-card-premium {\r\n text-decoration: none;\r\n color: inherit;\r\n display: flex; \r\n }\r\n\r\n .course-card-premium {\r\n background: var(--bg-card);\r\n border-radius: 24px;\r\n position: relative;\r\n overflow: hidden; \r\n border: 1px solid rgba(255, 255, 255, 0.6);\r\n box-shadow: var(--shadow-card);\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); \r\n display: flex; flex-direction: column;\r\n cursor: pointer;\r\n perspective: 1000px;\r\n }\r\n\r\n .course-card-premium:hover {\r\n transform: translateY(-12px) scale(1.02);\r\n box-shadow: var(--shadow-hover);\r\n border-color: var(--primary-light);\r\n }\r\n\r\n \/* \u6d41\u5149\u7279\u6548 *\/\r\n .course-card-premium::before {\r\n content: ''; position: absolute; top: 0; left: -100%;\r\n width: 50%; height: 100%;\r\n background: linear-gradient(to right, transparent, rgba(255,255,255,0.6), transparent);\r\n transform: skewX(-25deg);\r\n transition: 0s;\r\n z-index: 10; pointer-events: none;\r\n }\r\n .course-card-premium:hover::before {\r\n left: 200%; transition: 0.8s ease;\r\n }\r\n\r\n \/* \u5716\u7247\u5340\u57df *\/\r\n .card-image-wrap {\r\n width: 100%;\r\n aspect-ratio: 4\/3; \r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 24px 24px 0 0; \r\n }\r\n\r\n .card-image-wrap img {\r\n width: 100%; height: 100%; object-fit: cover;\r\n transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);\r\n }\r\n\r\n .course-card-premium:hover .card-image-wrap img {\r\n transform: scale(1.12) rotate(2deg);\r\n }\r\n\r\n \/* \u72c0\u614b\u6a19\u7c64 *\/\r\n .status-badge {\r\n position: absolute; top: 20px; left: 20px;\r\n padding: 6px 12px; border-radius: 8px;\r\n font-size: 12px; font-weight: 800; color: #fff;\r\n text-transform: uppercase; letter-spacing: 1px;\r\n z-index: 5;\r\n box-shadow: 0 4px 12px rgba(0,0,0,0.25);\r\n backdrop-filter: blur(4px);\r\n }\r\n .status-badge.hot { background: var(--accent-hot); }\r\n .status-badge.new { background: var(--accent-new); }\r\n .status-badge.rec { background: var(--accent-purple); }\r\n\r\n \/* \u5167\u5bb9\u5340\u57df *\/\r\n .card-content {\r\n padding: 28px;\r\n display: flex; flex-direction: column; flex: 1;\r\n background: #fff;\r\n position: relative; z-index: 2;\r\n }\r\n\r\n .category-chip {\r\n display: inline-flex; align-items: center; gap: 6px;\r\n align-self: flex-start;\r\n padding: 6px 14px;\r\n border-radius: 50px; \r\n background: var(--primary-light);\r\n color: var(--primary-blue);\r\n font-size: 12px; font-weight: 700;\r\n margin-bottom: 16px;\r\n border: 1px solid rgba(30, 75, 175, 0.1);\r\n transition: 0.3s;\r\n }\r\n .category-chip svg { width: 14px; height: 14px; fill: currentColor; }\r\n \r\n .course-card-premium:hover .category-chip {\r\n background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);\r\n }\r\n\r\n .card-title {\r\n font-size: 20px; font-weight: 800; color: var(--text-dark);\r\n margin-bottom: 12px; line-height: 1.4;\r\n transition: 0.3s;\r\n }\r\n .course-card-premium:hover .card-title { color: var(--primary-blue); }\r\n\r\n .card-desc {\r\n font-size: 14px; color: var(--text-gray); line-height: 1.6;\r\n margin-bottom: 24px;\r\n display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;\r\n }\r\n\r\n \/* =============================== *\/\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u5217 - \u8cfc\u7269\u8eca\u7248 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n \/* =============================== *\/\r\n .card-footer-flex-column {\r\n margin-top: auto;\r\n padding-top: 20px;\r\n border-top: 1px dashed var(--border-light);\r\n display: flex; \r\n flex-direction: column; \r\n gap: 15px;\r\n }\r\n\r\n \/* \u5718\u5831\u512a\u60e0\u6587\u5b57 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n .group-discount-text {\r\n font-size: 12px;\r\n color: #B45309; \/* \u7425\u73c0\u8272\u8b66\u544a\u611f *\/\r\n background-color: #FEF3C7;\r\n padding: 6px 10px;\r\n border-radius: 6px;\r\n text-align: center;\r\n font-weight: 600;\r\n display: flex;\r\n justify-content: center;\r\n gap: 10px;\r\n }\r\n .group-discount-text strong {\r\n color: var(--accent-hot);\r\n }\r\n\r\n \/* \u50f9\u683c\u8207\u6309\u9215\u7684\u6c34\u5e73\u4f48\u5c40\u5bb9\u5668 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n .price-and-action {\r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center; \r\n width: 100%;\r\n }\r\n\r\n \/* \u539f\u59cb\u5361\u7247 B, C \u50f9\u683c\u6a23\u5f0f\uff0c\u50f9\u683c\u4e0d\u5283\u6389 *\/\r\n .price-val { font-size: 20px; font-weight: 800; color: var(--text-dark); }\r\n \r\n \/* \u5361\u7247 A \u5c08\u7528\u50f9\u683c\u6a23\u5f0f\uff0c\u53d6\u6d88\u522a\u9664\u7dda\u6539\u70ba\u4e00\u822c\u72c0\u614b\u8aaa\u660e *\/\r\n .price-group-strikethrough .price-label { font-size: 11px; color: var(--text-gray); text-transform: uppercase; font-weight: 600; }\r\n .price-group-strikethrough .price-val { font-size: 16px; font-weight: 800; color: var(--text-dark); }\r\n\r\n\r\n \/* \u8cfc\u8cb7\u6309\u9215 (\u5361\u7247 A \u4fee\u6539\u7528) *\/\r\n .btn-buy {\r\n background: var(--primary-blue); \r\n color: #fff;\r\n padding: 10px 18px;\r\n border-radius: 50px; \r\n font-size: 14px;\r\n font-weight: 700;\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 8px; \r\n transition: all 0.3s ease;\r\n box-shadow: 0 4px 10px rgba(30, 75, 175, 0.2);\r\n border: 1px solid transparent;\r\n white-space: nowrap;\r\n }\r\n .btn-buy svg {\r\n width: 16px;\r\n height: 16px;\r\n fill: currentColor; \r\n }\r\n .course-card-premium:hover .btn-buy {\r\n background: #183C8C; \r\n transform: translateY(-2px);\r\n box-shadow: 0 8px 20px rgba(30, 75, 175, 0.3);\r\n }\r\n\r\n\r\n \/* =============================== *\/\r\n \/* \u5e95\u90e8\u8cc7\u8a0a\u5217 - \u539f\u59cb\u7248 (\u5361\u7247 B, C \u4fdd\u7559\u7528) *\/\r\n \/* =============================== *\/\r\n .card-footer-flex-row {\r\n margin-top: auto;\r\n padding-top: 20px;\r\n border-top: 1px dashed var(--border-light);\r\n display: flex; \r\n justify-content: space-between; \r\n align-items: center;\r\n }\r\n\r\n .price-group { display: flex; flex-direction: column; }\r\n .price-label { font-size: 11px; color: var(--text-gray); text-transform: uppercase; font-weight: 600; }\r\n \/* \u5361\u7247 B, C \u539f\u59cb\u6309\u9215 *\/\r\n .action-circle {\r\n width: 44px; height: 44px; border-radius: 50%;\r\n background: #F8FAFC; color: var(--text-gray);\r\n display: flex; align-items: center; justify-content: center;\r\n border: 1px solid var(--border-light);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n .action-circle svg { width: 20px; height: 20px; stroke-width: 2.5; }\r\n .course-card-premium:hover .action-circle {\r\n background: var(--primary-blue); color: #fff; border-color: var(--primary-blue);\r\n transform: rotate(-45deg) scale(1.1);\r\n box-shadow: 0 4px 12px rgba(30, 75, 175, 0.3);\r\n }\r\n\r\n\r\n \/* RWD *\/\r\n @media (max-width: 768px) {\r\n .courses-section { padding: 80px 24px; }\r\n .main-title { font-size: 32px; }\r\n .premium-grid { grid-template-columns: 1fr; gap: 30px; } \r\n .course-card-premium:hover { transform: translateY(-5px) scale(1); }\r\n \/* RWD \u6642\u5718\u5831\u512a\u60e0\u6539\u70ba\u5782\u76f4\u6392\u5217 *\/\r\n .group-discount-text { flex-direction: column; gap: 4px; }\r\n }\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<section class=\"courses-section\">\r\n \r\n <div class=\"header-center\">\r\n <span class=\"kicker\">INNER FREQUENCY<\/span>\r\n <h2 class=\"main-title\">\u983b\u7387\u89ba\u5bdf\uff5c\u627e\u5230\u4f60\u7684\u751f\u547d\u983b\u7387<\/h2>\r\n <p class=\"desc\">\r\n \u4e0d\u662f\u4f60\u4e0d\u5920\u52aa\u529b\uff0c\u800c\u662f\u4f60\u9700\u8981\u5148\u7a69\u4f4f\u81ea\u5df1\u7684\u72c0\u614b\u3002<br>\r\n \u9019\u5802\u8ab2\u7d50\u5408\u81ea\u6211\u89ba\u5bdf\u8207\u95dc\u4fc2\u7406\u89e3\uff0c\u5e6b\u4f60\u91cd\u6574\u5167\u5728\u7bc0\u594f\uff0c\u9032\u800c\u63d0\u5347\u6574\u9ad4\u7684\u5546\u696d\u8207\u751f\u6d3b\u8868\u73fe\u3002\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"premium-grid\">\r\n \r\n <div class=\"course-card-premium\">\r\n <div class=\"card-image-wrap\">\r\n <span class=\"status-badge hot\">CORE<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2026\/01\/photo_2026-01-16_15-27-43.jpg\" alt=\"\u983b\u7387\u89ba\u5bdf\">\r\n <\/div>\r\n <div class=\"card-content\">\r\n <div class=\"category-chip\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5zm0 9l2.5-1.25L12 8.5l-2.5 1.25L12 11zm0 2.5l-5-2.5-5 2.5L12 22l10-8.5-5-2.5-5 2.5z\"\/><\/svg>\r\n \u6a21\u7d44\u4e00\uff5c\u72c0\u614b\u91cd\u6574\r\n <\/div>\r\n <h3 class=\"card-title\">\u983b\u7387\u89ba\u5bdf\uff1a\u627e\u56de\u5931\u53bb\u7684\u638c\u63a7\u611f<\/h3>\r\n <p class=\"card-desc\">\u660e\u660e\u6295\u5165\u5f88\u591a\uff0c\u537b\u5e38\u5e38\u63d0\u4e0d\u8d77\u52c1\uff1f\u9019\u4e0d\u662f\u80fd\u529b\u4e0d\u5920\uff0c\u800c\u662f\u72c0\u614b\u5931\u53bb\u4e86\u5e73\u8861\u3002\u5e36\u4f60\u770b\u898b\u53cd\u8986\u6d88\u8017\u7684\u60c5\u7dd2\u76f2\u9ede\uff0c\u91cd\u65b0\u7a69\u4f4f\u5167\u5728\u7bc0\u594f\u3002<\/p>\r\n \r\n <div class=\"card-footer-flex-column\">\r\n <div class=\"group-discount-text\">\r\n <span>\u5169\u4eba\u540c\u884c <strong>\u4eab\u5c08\u5c6c\u512a\u60e0<\/strong><\/span>\r\n <span>\u4e09\u4eba\u540c\u884c <strong>\u4eab\u5c08\u6848\u6298\u6263<\/strong><\/span>\r\n <\/div>\r\n <div class=\"price-and-action\">\r\n <div class=\"price-group-strikethrough\">\r\n <span class=\"price-label\">\u65b9\u6848\u8a73\u60c5<\/span>\r\n <span class=\"price-val\">\u8acb\u6d3d\u5b98\u65b9\u9867\u554f<\/span>\r\n <\/div>\r\n <a href=\"#booking\" class=\"btn-buy\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z\"\/><\/svg>\r\n \u7acb\u5373\u5831\u540d\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <a href=\"#relationship\" class=\"course-card-premium\">\r\n <div class=\"card-image-wrap\">\r\n <span class=\"status-badge new\">RELATIONSHIP<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2026\/01\/entrepreneur-talking-colleague.png\" alt=\"\u95dc\u4fc2\u68b3\u7406\">\r\n <\/div>\r\n <div class=\"card-content\">\r\n <div class=\"category-chip\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z\"\/><\/svg>\r\n \u6a21\u7d44\u4e8c\uff5c\u95dc\u4fc2\u68b3\u7406\r\n <\/div>\r\n <h3 class=\"card-title\">\u95dc\u4fc2\u54c1\u8cea\u8207\u60c5\u7dd2\u6574\u7406<\/h3>\r\n <p class=\"card-desc\">\u70ba\u4ec0\u9ebc\u6709\u4e9b\u95dc\u4fc2\u8b93\u4f60\u8d8a\u4f86\u8d8a\u7d2f\uff0c\u751a\u81f3\u5f71\u97ff\u5de5\u4f5c\u72c0\u614b\uff1f\u5b78\u6703\u7406\u89e3\u60c5\u7dd2\u5806\u7a4d\u7684\u6839\u6e90\uff0c\u8b93\u95dc\u4fc2\u4e92\u52d5\u66f4\u9806\u66a2\uff0c\u6e9d\u901a\u8868\u9054\u66f4\u6709\u529b\u91cf\u3002<\/p>\r\n \r\n <div class=\"card-footer-flex-row\">\r\n <div class=\"price-group\">\r\n <span class=\"price-label\">INNER BALANCE<\/span>\r\n <span class=\"price-val\" style=\"font-size: 16px;\">\u4e86\u89e3\u8a73\u60c5<\/span>\r\n <\/div>\r\n <div class=\"action-circle\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/a>\r\n\r\n <div class=\"course-card-premium\">\r\n <div class=\"card-image-wrap\">\r\n <span class=\"status-badge rec\">PERFORMANCE<\/span>\r\n <img decoding=\"async\" src=\"https:\/\/finhive.academy\/wp-content\/uploads\/2026\/01\/photo_2026-01-16_15-27-39.jpg\" alt=\"\u5546\u696d\u8868\u73fe\">\r\n <\/div>\r\n <div class=\"card-content\">\r\n <div class=\"category-chip\">\r\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z\"\/><\/svg>\r\n \u6a21\u7d44\u4e09\uff5c\u5546\u696d\u8868\u73fe\r\n <\/div>\r\n <h3 class=\"card-title\">\u8077\u5834\u8868\u73fe\u8207\u6c7a\u7b56\u512a\u5316<\/h3>\r\n <p class=\"card-desc\">\u7576\u4e00\u500b\u4eba\u7684\u5167\u5728\u7bc0\u594f\u958b\u59cb\u7a69\u5b9a\uff0c\u505a\u4e8b\u6703\u66f4\u6709\u65b9\u5411\uff0c\u6c7a\u7b56\u4e0d\u518d\u9072\u7591\u3002\u4e0d\u518d\u88ab\u5931\u8861\u7684\u7bc0\u594f\u62d6\u7d2f\uff0c\u81ea\u7136\u63d0\u5347\u6574\u9ad4\u7684\u5de5\u4f5c\u8207\u4eba\u751f\u8868\u73fe\u3002<\/p>\r\n \r\n <div class=\"card-footer-flex-row\">\r\n <div class=\"price-group\">\r\n <span class=\"price-label\">LIFE & CAREER<\/span>\r\n <span class=\"price-val\" style=\"font-size: 16px;\">\u4e86\u89e3\u8a73\u60c5<\/span>\r\n <\/div>\r\n <div class=\"action-circle\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"><\/line><polyline points=\"12 5 19 12 12 19\"><\/polyline><\/svg>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n<\/section>\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<div class=\"elementor-element elementor-element-b01ad3e e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"b01ad3e\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-171782d elementor-widget elementor-widget-html\" data-id=\"171782d\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* =============================== *\/\r\n \/* \u96b1\u79c1\u6b0a\u653f\u7b56 \u5c08\u5c6c\u6a23\u5f0f *\/\r\n \/* =============================== *\/\r\n .privacy-container {\r\n max-width: 900px;\r\n margin: 0 auto;\r\n padding: 60px 20px;\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n color: #475569; \/* \u6df1\u7070\u5b57\u9ad4\uff0c\u6bd4\u7d14\u9ed1\u67d4\u548c *\/\r\n background-color: #fff;\r\n }\r\n\r\n \/* \u6a19\u984c\u6a23\u5f0f *\/\r\n .privacy-main-title {\r\n font-size: 24px;\r\n font-weight: 700;\r\n color: #1E4BAF; \/* \u54c1\u724c\u85cd *\/\r\n text-align: center;\r\n margin-bottom: 40px;\r\n border-bottom: 2px solid #E2E8F0;\r\n padding-bottom: 20px;\r\n }\r\n\r\n .privacy-section-title {\r\n font-size: 16px; \/* \u5c0f\u6a19\u984c *\/\r\n font-weight: 700;\r\n color: #0F172A; \/* \u63a5\u8fd1\u9ed1\u8272 *\/\r\n margin-top: 30px;\r\n margin-bottom: 12px;\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n \/* \u5c0f\u6a19\u984c\u5de6\u5074\u7684\u85cd\u8272\u88dd\u98fe\u7dda *\/\r\n .privacy-section-title::before {\r\n content: '';\r\n display: inline-block;\r\n width: 4px;\r\n height: 18px;\r\n background: #1E4BAF;\r\n margin-right: 10px;\r\n border-radius: 2px;\r\n }\r\n\r\n \/* \u5167\u6587\u6a23\u5f0f - \u5b57\u9ad4\u8f03\u5c0f *\/\r\n .privacy-content {\r\n font-size: 13.5px; \/* \u8a2d\u5b9a\u70ba\u8f03\u5c0f\u5b57\u9ad4 *\/\r\n line-height: 1.8; \/* \u884c\u9ad8\u62c9\u5927\uff0c\u589e\u52a0\u6613\u8b80\u6027 *\/\r\n text-align: justify;\r\n }\r\n\r\n \/* \u5217\u8868\u6a23\u5f0f *\/\r\n .privacy-list {\r\n margin: 10px 0 20px 20px;\r\n padding-left: 15px;\r\n list-style-type: disc;\r\n }\r\n\r\n .privacy-list li {\r\n margin-bottom: 5px;\r\n }\r\n\r\n \/* \u806f\u7d61\u4fe1\u7bb1\u5340\u584a *\/\r\n .contact-box {\r\n background-color: #F8FAFC;\r\n border: 1px solid #E2E8F0;\r\n border-radius: 8px;\r\n padding: 15px;\r\n margin-top: 10px;\r\n color: #1E4BAF;\r\n font-weight: 600;\r\n }\r\n\r\n .contact-box a {\r\n color: #1E4BAF;\r\n text-decoration: none;\r\n border-bottom: 1px dashed #1E4BAF;\r\n }\r\n\r\n .contact-box a:hover {\r\n border-bottom-style: solid;\r\n }\r\n\r\n \/* \u624b\u6a5f\u7248\u5fae\u8abf *\/\r\n @media (max-width: 768px) {\r\n .privacy-container {\r\n padding: 30px 20px;\r\n }\r\n .privacy-main-title {\r\n font-size: 20px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<div class=\"privacy-container\">\r\n\r\n <h1 class=\"privacy-main-title\">\u96b1\u79c1\u6b0a\u653f\u7b56\uff08Privacy Policy\uff09<\/h1>\r\n\r\n <div class=\"privacy-content\">\r\n <p>\u6cdb\u6d77\u5546\u5b78\u9662\uff08\u4ee5\u4e0b\u7c21\u7a31\u300c\u672c\u5e73\u53f0\u300d\uff09\u975e\u5e38\u91cd\u8996\u60a8\u7684\u500b\u4eba\u8cc7\u6599\u8207\u96b1\u79c1\u6b0a\u4fdd\u8b77\u3002\u70ba\u4e86\u8b93\u60a8\u5b89\u5fc3\u4f7f\u7528\u672c\u5e73\u53f0\u6240\u63d0\u4f9b\u7684\u5404\u9805\u670d\u52d9\uff0c\u7279\u6b64\u8aaa\u660e\u672c\u5e73\u53f0\u7684\u96b1\u79c1\u6b0a\u653f\u7b56\uff0c\u4ee5\u4fdd\u969c\u60a8\u7684\u6b0a\u76ca\u3002<\/p>\r\n\r\n <h3 class=\"privacy-section-title\">\u4e00\u3001\u500b\u4eba\u8cc7\u6599\u7684\u8490\u96c6\u65b9\u5f0f<\/h3>\r\n <p>\u7576\u60a8\u900f\u904e\u672c\u5e73\u53f0\u53c3\u8207\u6d3b\u52d5\u3001\u586b\u5beb\u8868\u55ae\u6216\u8207\u6211\u5011\u806f\u7e6b\u6642\uff0c\u6211\u5011\u53ef\u80fd\u6703\u4f9d\u5be6\u969b\u9700\u6c42\u8490\u96c6\u4ee5\u4e0b\u500b\u4eba\u8cc7\u6599\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>\u59d3\u540d<\/li>\r\n <li>\u96fb\u5b50\u90f5\u4ef6\u5730\u5740<\/li>\r\n <li>\u5176\u4ed6\u60a8\u4e3b\u52d5\u63d0\u4f9b\u7684\u806f\u7d61\u8cc7\u8a0a<\/li>\r\n <\/ul>\r\n <p>\u672c\u5e73\u53f0\u50c5\u5728\u5fc5\u8981\u7bc4\u570d\u5167\u8490\u96c6\u76f8\u95dc\u8cc7\u6599\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e8c\u3001\u500b\u4eba\u8cc7\u6599\u7684\u4f7f\u7528\u76ee\u7684<\/h3>\r\n <p>\u672c\u5e73\u53f0\u8490\u96c6\u4e4b\u500b\u4eba\u8cc7\u6599\uff0c\u50c5\u7528\u65bc\u4ee5\u4e0b\u76ee\u7684\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>\u6d3b\u52d5\u8cc7\u8a0a\u901a\u77e5\u8207\u76f8\u95dc\u806f\u7e6b<\/li>\r\n <li>\u8ab2\u7a0b\u3001\u5b78\u7fd2\u5167\u5bb9\u6216\u670d\u52d9\u8cc7\u8a0a\u63d0\u4f9b<\/li>\r\n <li>\u4f7f\u7528\u8005\u95dc\u4fc2\u7ba1\u7406\u8207\u670d\u52d9\u54c1\u8cea\u63d0\u5347<\/li>\r\n <\/ul>\r\n <p>\u672c\u5e73\u53f0\u4e0d\u6703\u5c07\u60a8\u7684\u500b\u4eba\u8cc7\u6599\u7528\u65bc\u4e0a\u8ff0\u76ee\u7684\u4ee5\u5916\u4e4b\u7528\u9014\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e09\u3001\u7b2c\u4e09\u65b9\u5e73\u53f0\u4e4b\u4f7f\u7528\u8aaa\u660e<\/h3>\r\n <p>\u70ba\u63d0\u4f9b\u670d\u52d9\u8207\u9032\u884c\u6d3b\u52d5\u63a8\u5ee3\uff0c\u672c\u5e73\u53f0\u53ef\u80fd\u900f\u904e\u4ee5\u4e0b\u7b2c\u4e09\u65b9\u5e73\u53f0\u8490\u96c6\u6216\u8655\u7406\u8cc7\u6599\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>Facebook\uff08Meta\uff09<\/li>\r\n <li>LINE<\/li>\r\n <\/ul>\r\n <p>\u4e0a\u8ff0\u5e73\u53f0\u7684\u8cc7\u6599\u4f7f\u7528\u65b9\u5f0f\uff0c\u5c07\u4f9d\u5176\u5404\u81ea\u4e4b\u96b1\u79c1\u6b0a\u653f\u7b56\u898f\u7bc4\u8fa6\u7406\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u56db\u3001\u500b\u4eba\u8cc7\u6599\u7684\u4fdd\u8b77\u8207\u4fdd\u5b58<\/h3>\r\n <p>\u672c\u5e73\u53f0\u5c07\u63a1\u53d6\u5408\u7406\u7684\u6280\u8853\u8207\u7ba1\u7406\u63aa\u65bd\uff0c\u4ee5\u4fdd\u8b77\u60a8\u7684\u500b\u4eba\u8cc7\u6599\uff0c\u9632\u6b62\u672a\u7d93\u6388\u6b0a\u7684\u5b58\u53d6\u3001\u6d29\u6f0f\u3001\u7ac4\u6539\u6216\u640d\u6bc0\u3002\u60a8\u7684\u500b\u4eba\u8cc7\u6599\u50c5\u5728\u9054\u6210\u8490\u96c6\u76ee\u7684\u6240\u9700\u671f\u9593\u5167\u4fdd\u5b58\uff0c\u4e26\u65bc\u76ee\u7684\u5b8c\u6210\u5f8c\u4f9d\u76f8\u95dc\u898f\u5b9a\u8655\u7406\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e94\u3001\u4f7f\u7528\u8005\u6b0a\u5229<\/h3>\r\n <p>\u60a8\u53ef\u96a8\u6642\u5411\u672c\u5e73\u53f0\u63d0\u51fa\u4ee5\u4e0b\u8acb\u6c42\uff1a<\/p>\r\n <ul class=\"privacy-list\">\r\n <li>\u67e5\u8a62\u6216\u95b1\u89bd\u60a8\u7684\u500b\u4eba\u8cc7\u6599<\/li>\r\n <li>\u8acb\u6c42\u88dc\u5145\u3001\u66f4\u6b63\u6216\u522a\u9664\u60a8\u7684\u500b\u4eba\u8cc7\u6599<\/li>\r\n <li>\u505c\u6b62\u500b\u4eba\u8cc7\u6599\u4e4b\u8490\u96c6\u3001\u8655\u7406\u6216\u4f7f\u7528<\/li>\r\n <\/ul>\r\n <p>\u5982\u6709\u76f8\u95dc\u9700\u6c42\uff0c\u8acb\u900f\u904e\u4e0b\u65b9\u806f\u7d61\u65b9\u5f0f\u8207\u6211\u5011\u806f\u7e6b\u3002<\/p>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u516d\u3001\u806f\u7d61\u65b9\u5f0f<\/h3>\r\n <p>\u82e5\u60a8\u5c0d\u672c\u96b1\u79c1\u6b0a\u653f\u7b56\u6216\u500b\u4eba\u8cc7\u6599\u4e4b\u8655\u7406\u6709\u4efb\u4f55\u7591\u554f\uff0c\u6b61\u8fce\u8207\u6211\u5011\u806f\u7d61\uff1a<\/p>\r\n <div class=\"contact-box\">\r\n \u96fb\u5b50\u90f5\u4ef6\uff1a<a href=\"mailto:contact@finhive.academy\">contact@finhive.academy<\/a>\r\n <\/div>\r\n\r\n\r\n <h3 class=\"privacy-section-title\">\u4e03\u3001\u96b1\u79c1\u6b0a\u653f\u7b56\u4e4b\u4fee\u8a02<\/h3>\r\n <p>\u672c\u5e73\u53f0\u6709\u6b0a\u8996\u5be6\u969b\u9700\u6c42\u4fee\u8a02\u672c\u96b1\u79c1\u6b0a\u653f\u7b56\u3002\u4fee\u8a02\u5f8c\u4e4b\u5167\u5bb9\u5c07\u516c\u544a\u65bc\u672c\u7db2\u7ad9\uff0c\u4e0d\u53e6\u884c\u500b\u5225\u901a\u77e5\u3002<\/p>\r\n <\/div>\r\n\r\n<\/div>\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-1b4bff9 e-flex e-con-boxed wpr-particle-no wpr-jarallax-no wpr-parallax-no wpr-sticky-section-no wpr-equal-height-no e-con e-parent\" data-id=\"1b4bff9\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b71ed73 elementor-widget elementor-widget-html\" data-id=\"b71ed73\" data-element_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>Footer Style<\/title>\r\n<style>\r\n \/* ======================= *\/\r\n \/* \u6838\u5fc3\u8b8a\u6578 (\u63d0\u53d6\u81ea\u7968\u5238\u8996\u89ba) *\/\r\n \/* ======================= *\/\r\n :root {\r\n --bg-page: #; \/* \u80cc\u666f\u5e95\u8272 *\/\r\n --blue-main: #1E4BAF; \/* \u54c1\u724c\u4e3b\u85cd\u8272 *\/\r\n --blue-dark: #0F172A; \/* \u6df1\u8272\u6587\u5b57 *\/\r\n \/* \u7968\u5238\u6b3e\u7684\u6de1\u85cd\u8272\u7db2\u683c\u984f\u8272 *\/\r\n --grid-color: rgba(37, 99, 235, 0.06);\r\n }\r\n\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n \r\n body {\r\n font-family: \"Inter\", \"Noto Sans TC\", sans-serif;\r\n background-color: var(--bg-page);\r\n line-height: 1.6;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u9801\u5c3e\u5bb9\u5668\u8a2d\u5b9a *\/\r\n \/* ======================= *\/\r\n .final-section-footer {\r\n position: relative;\r\n width: 100%;\r\n \/* \u4e0a\u4e0b\u7559\u767d\uff0c\u78ba\u4fdd\u8996\u89ba\u547c\u5438\u611f *\/\r\n padding: 60px 20px 80px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n overflow: hidden;\r\n background-color: var(--bg-page);\r\n border-top: 1px solid rgba(30, 75, 175, 0.1); \/* \u9802\u90e8\u6de1\u6de1\u7684\u5206\u9694\u7dda *\/\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u63d0\u53d6\u7684\u80cc\u666f\u5143\u7d20\uff1a\u7db2\u683c *\/\r\n \/* ======================= *\/\r\n .grid-bg-footer {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n z-index: 0; \/* \u653e\u5728\u6700\u5e95\u5c64 *\/\r\n \r\n \/* \u7968\u5238\u6b3e\u7684\u7db2\u683c\u53c3\u6578 *\/\r\n background-image: \r\n linear-gradient(var(--grid-color) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n \r\n \/* \u4e2d\u5fc3\u805a\u5149\u906e\u7f69\uff0c\u8b93\u5468\u570d\u6de1\u51fa *\/\r\n mask-image: radial-gradient(circle at 50% 50%, black 40%, transparent 100%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* ======================= *\/\r\n \/* \u5167\u5bb9\u5340\u584a *\/\r\n \/* ======================= *\/\r\n .footer-content {\r\n position: relative;\r\n z-index: 2; \/* \u78ba\u4fdd\u5167\u5bb9\u5728\u7db2\u683c\u4e4b\u4e0a *\/\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px; \/* \u884c\u8ddd *\/\r\n align-items: center;\r\n }\r\n\r\n \/* \u516c\u53f8\u540d\u7a31\u6a23\u5f0f *\/\r\n .company-item {\r\n font-size: 15px;\r\n font-weight: 700;\r\n color: var(--blue-dark);\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px; \/* \u540d\u7a31\u8207\u7d71\u7de8\u4e4b\u9593\u7684\u8ddd\u96e2 *\/\r\n }\r\n\r\n \/* \u7d71\u7de8\u6a19\u7c64 (\u6cbf\u7528\u7968\u5238 Tag \u98a8\u683c) *\/\r\n .tax-id-tag {\r\n display: inline-flex;\r\n align-items: center;\r\n background-color: #EFF6FF; \/* \u6dfa\u85cd\u5e95 *\/\r\n color: var(--blue-main); \/* \u54c1\u724c\u85cd\u5b57 *\/\r\n font-size: 13px;\r\n font-weight: 600;\r\n padding: 4px 12px;\r\n border-radius: 50px; \/* \u5713\u89d2\u81a0\u56ca\u72c0 *\/\r\n border: 1px solid rgba(30, 75, 175, 0.15);\r\n letter-spacing: 0.5px;\r\n font-family: monospace, \"Noto Sans TC\"; \/* \u8b93\u6578\u5b57\u7a0d\u5fae\u7b49\u5bec\u4e00\u9ede *\/\r\n }\r\n\r\n \/* RWD \u5c0f\u8abf\u6574 *\/\r\n @media (max-width: 480px) {\r\n .company-item {\r\n flex-direction: column; \/* \u624b\u6a5f\u7248\u540d\u7a31\u548c\u7d71\u7de8\u5782\u76f4\u6392\u5217 *\/\r\n gap: 8px;\r\n }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n <footer class=\"final-section-footer\">\r\n \r\n <div class=\"grid-bg-footer\"><\/div>\r\n\r\n <div class=\"footer-content\">\r\n \r\n <div class=\"company-item\">\r\n \r\n <span class=\"tax-id-tag\">\u7d71\u7de8 90543650<\/span>\r\n <\/div>\r\n\r\n <div class=\"company-item\">\r\n \u7121\u7586\u884c\u92b7\u80a1\u4efd\u6709\u9650\u516c\u53f8\r\n <\/div>\r\n\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>Universal Header (Fixed Paths) \u5546\u5b78\u9662 \u8ab2\u7a0b\u5831\u540d \u5a92\u9ad4\u5831\u5c0e \u5275\u4f5c\u8005\u8a08\u756b Line \u5b98\u65b9\u7fa4 \u279c Hero – Clean Version \u9748\u8b58\u89ba\u9192\u8ab2\u7a0b \u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1 \u2713 \u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u5efa\u7acb\u7a69\u5b9a\u8f38\u51fa\u7684\u8077\u5834\u7bc0\u594f \u2713 \u4e0d\u518d\u5f37\u8feb\u63a8\u92b7\uff0c\u7528\u9ad8\u4fe1\u4efb\u611f\u81ea\u7136\u653e\u5927\u6210\u4ea4 \u4e86\u89e3\u9748\u8b58\u89ba\u9192\u8ab2\u7a0b \ud83d\udc41\ufe0f \u89ba\u5bdf\u5347\u7d1a Inner Awareness \ud83d\udd0b \u72c0\u614b\u6821\u6e96 State Alignment \ud83d\udc8e \u5916\u5728\u6210\u679c Real Impact Pain Points – Creative Cluster \u4f60\u4e0d\u662f\u4e0d\u5920\u52aa\u529b\uff0c \u800c\u662f\u9084\u6c92\u6709 \u6253\u958b\u771f\u6b63\u6709\u6548\u7684\u81ea\u5df1 \ud83d\udcc9 \u696d\u7e3e\u8207\u8868\u73fe\u4e0d\u7a69\u5b9a \u660e\u660e\u6295\u5165\u5f88\u591a\u6642\u9593\u8207\u5fc3\u529b\uff0c\u751a\u81f3\u6bd4\u5225\u4eba\u66f4\u62fc\u547d\uff0c\u5728\u92b7\u552e\u8207\u8077\u5834\u4e0a\u7684\u7d50\u679c\u537b\u59cb\u7d42\u4e0d\u5982\u9810\u671f\u3002 \ud83c\udf2a\ufe0f \u6301\u7e8c\u5167\u8017\u8207\u7126\u616e \u5e38\u5e38\u5728\u5de5\u4f5c\u4e2d\u61f7\u7591\u81ea\u5df1\uff0c\u72c0\u614b\u5ffd\u9ad8\u5ffd\u4f4e\uff0c\u7e3d\u662f\u5728\u76f8\u4f3c\u7684\u60c5\u7dd2\u8207\u6163\u6027\u5361\u9ede\u88e1\u53cd\u8986\u6d88\u8017\u80fd\u91cf\u3002 \ud83e\udd10 \u50f9\u503c\u7121\u6cd5\u88ab\u770b\u898b \u61c2\u5c08\u696d\u3001\u80af\u505a\u4e8b\uff0c\u537b\u5e38\u5e38\u5361\u5728\u4e0d\u6562\u958b\u53e3\u8207\u63a8\u9032\u95dc\u4fc2\uff0c\u4e0d\u77e5\u9053\u5982\u4f55\u5efa\u7acb\u4fe1\u4efb\u611f\u8207\u500b\u4eba\u5f71\u97ff\u529b\u3002 \u771f\u6b63\u62c9\u958b\u5dee\u8ddd\u7684\uff0c\u5f80\u5f80\u4e0d\u662f\u76f2\u76ee\u52aa\u529b… \u800c\u662f\u5148\u6821\u6e96\u81ea\u5df1\uff0c\u518d\u653e\u5927\u6210\u679c Course Positioning – Clean Blueprint COURSE POSITIONING \u9019\u4e0d\u662f\u4e00\u5802\u7d14\u7cb9\u7684\u6fc0\u52f5\u8ab2 \u800c\u662f\u4e00\u5957 \u300c\u89ba\u9192\u5f0f\u6210\u9577\u7cfb\u7d71\u300d \u2715 \u4e0d\u8ce3\u7a7a\u6cdb\u7684\u5fc3\u9748\u96de\u6e6f \u53ea\u8ac7\u6fc0\u52f5\u537b\u7121\u6cd5\u843d\u5730\uff0c\u71b1\u60c5\u5f88\u5feb\u5c31\u6703\u5728\u73fe\u5be6\u4e2d\u6d88\u8017\u6b86\u76e1\u3002 \u2715 \u4e0d\u6559\u4f60\u5957\u7528\u50f5\u5316\u8a71\u8853 \u786c\u5957\u5225\u4eba\u7684\u6210\u529f\u6a21\u5f0f\uff0c\u53ea\u6703\u8b93\u4f60\u7684\u8868\u9054\u5931\u53bb\u9748\u9b42\u8207\u4fe1\u4efb\u611f\u3002 \u2714 \u91cd\u5efa\u4f60\u7684\u5e95\u5c64\u72c0\u614b\u627e\u56de\u6700\u6709\u529b\u91cf\u7684\u81ea\u5df1 \u6211\u5011\u5148\u5e6b\u4f60\u770b\u898b\u6163\u6027\u5361\u9ede\uff0c\u518d\u900f\u904e\u72c0\u614b\u6821\u6e96\u8207\u5929\u8ce6\u8fa8\u8b58\uff0c\u628a\u5167\u5728\u7684\u89ba\u5bdf\u5347\u7d1a\uff0c\u771f\u6b63\u8f49\u5316\u70ba\u5916\u5728\u7684\u5f71\u97ff\u529b\u8207\u6210\u4ea4\u529b\u3002 \u89ba\u5bdf\u5347\u7d1a \u2794 \u72c0\u614b\u6821\u6e96 \u2794 \u6210\u679c\u8f49\u5316 \u5148\u5c0d\u9f4a\u81ea\u5df1\uff0c\u624d\u80fd\u7a69\u5b9a\u653e\u5927\u7d50\u679c\u3002 Core Transformation – Crystal Engines CORE TRANSFORMATION \u9019\u5802\u8ab2\uff0c\u5c07\u5e36\u4f60\u5b8c\u6210 \u4e09\u5927\u6838\u5fc3\u5347\u7d1a 01 \u89ba\u5bdf\u5347\u7d1a \u8fa8\u8b58\u5728\u5de5\u4f5c\u8207\u4eba\u969b\u95dc\u4fc2\u4e2d\u7684\u6163\u6027\u5361\u9ede\uff0c\u770b\u898b\u554f\u984c\u6839\u6e90\uff0c\u505c\u6b62\u7121\u6548\u7684\u5167\u8017\u8207\u76f2\u76ee\u52aa\u529b\u3002 Inner Awareness 02 \u72c0\u614b\u6821\u6e96 \u7a69\u5b9a\u5167\u5728\u80fd\u91cf\u3002\u5f9e\u6df7\u4e82\u7684\u601d\u7dd2\u4e2d\u62bd\u96e2\uff0c\u5efa\u7acb\u6e05\u6670\u3001\u7a69\u5b9a\u4e14\u5145\u6eff\u529b\u91cf\u7684\u8077\u5834\u8f38\u51fa\u7bc0\u594f\u3002 State Alignment 03 \u6210\u679c\u653e\u5927 \u7d50\u5408\u4fe1\u4efb\u611f\u5efa\u7acb\u8207 AI \u79d1\u6280\u8ce6\u80fd\uff0c\u5c07\u7a69\u5b9a\u7684\u5167\u5728\u80fd\u91cf\u81ea\u7136\u8f49\u5316\u70ba\u5916\u5728\u7684\u696d\u7e3e\u8207\u5f71\u97ff<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-385","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages\/385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/finhive.academy\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=385"}],"version-history":[{"count":5,"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages\/385\/revisions"}],"predecessor-version":[{"id":575,"href":"https:\/\/finhive.academy\/index.php?rest_route=\/wp\/v2\/pages\/385\/revisions\/575"}],"wp:attachment":[{"href":"https:\/\/finhive.academy\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}