\u8077\u524d\u8a13\u7df4\u8ab2\u7a0b - AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c02\u671f<\/title>\r\n\r\n <style>\r\n #ai-training-container,\r\n #ai-training-container * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n #ai-training-container{\r\n font-family: 'Microsoft JhengHei','Segoe UI',Tahoma,Geneva,Verdana,sans-serif !important;\r\n line-height: 1.6 !important;\r\n color: #333 !important;\r\n background: linear-gradient(135deg,#f0e6f9 0%,#e6d5f5 100%) !important;\r\n min-height: 100vh !important;\r\n font-weight: bold !important;\r\n }\r\n\r\n \/* \u9802\u90e8\u5c0e\u89bd\u5217 *\/\r\n #ai-training-container nav{\r\n background: linear-gradient(90deg,#6b3e9d 0%,#5a2e8a 100%) !important;\r\n padding: 1rem 0 !important;\r\n position: sticky !important;\r\n top: 0 !important;\r\n z-index: 100 !important;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;\r\n }\r\n #ai-training-container nav .container{\r\n max-width: 1200px !important;\r\n margin: 0 auto !important;\r\n padding: 0 20px !important;\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n align-items: center !important;\r\n }\r\n #ai-training-container nav .logo{\r\n font-size: 1.5rem !important;\r\n font-weight: bold !important;\r\n color: white !important;\r\n }\r\n #ai-training-container nav ul{\r\n display: flex !important;\r\n list-style: none !important;\r\n gap: 2rem !important;\r\n }\r\n #ai-training-container nav a{\r\n color: white !important;\r\n text-decoration: none !important;\r\n cursor: pointer !important;\r\n font-weight: 500 !important;\r\n transition: 0.3s !important;\r\n }\r\n #ai-training-container nav a:hover{ color: #fff3e0 !important; }\r\n\r\n \/* \u901a\u7528\u5bb9\u5668 *\/\r\n #ai-training-container .container{\r\n max-width: 1200px !important;\r\n margin: 0 auto !important;\r\n padding: 0 20px !important;\r\n }\r\n\r\n \/* \u6a19\u984c\u6a23\u5f0f *\/\r\n #ai-training-container h1,#ai-training-container h2,#ai-training-container h3{ color:#6b4a8a !important; }\r\n #ai-training-container h1{ font-size:2.5rem !important; margin-bottom:1rem !important; }\r\n #ai-training-container h2{\r\n font-size:2rem !important;\r\n margin-bottom:1rem !important;\r\n border-bottom:3px solid #9b6ec4 !important;\r\n padding-bottom:0.5rem !important;\r\n }\r\n #ai-training-container h3{ font-size:1.3rem !important; margin-top:1.5rem !important; margin-bottom:0.8rem !important; }\r\n\r\n \/* \u5340\u584a *\/\r\n #ai-training-container section{\r\n background: white !important;\r\n margin: 1rem 0 !important;\r\n padding: 1.5rem !important;\r\n border-radius: 10px !important;\r\n box-shadow: 0 4px 15px rgba(155,110,196,0.2) !important;\r\n }\r\n\r\n \/* ===========================\r\n \u2705 HERO\uff08\u788e\u7247 + \u7c92\u5b50 + \u5f37\u8ffd\u8e64\uff09\r\n =========================== *\/\r\n #ai-training-container .hero{\r\n position: relative !important;\r\n overflow: hidden !important;\r\n color: white !important;\r\n padding: 3rem 0 !important;\r\n text-align: center !important;\r\n margin-bottom: 1rem !important;\r\n\r\n --mx: 50%;\r\n --my: 45%;\r\n --wx: 0px;\r\n --wy: 0px;\r\n --wind: 0;\r\n --glow: 0;\r\n --tiltX: 0deg;\r\n --tiltY: 0deg;\r\n }\r\n\r\n \/* \u5e95\u5c64\uff1a\u6f38\u8b8a\u683c\u5b50 + \u6d41\u5149 *\/\r\n #ai-training-container .hero::before{\r\n content:\"\" !important;\r\n position:absolute !important;\r\n inset:0 !important;\r\n pointer-events:none !important;\r\n z-index: 0 !important;\r\n\r\n background:\r\n radial-gradient(900px circle at 18% 22%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%),\r\n radial-gradient(740px circle at 82% 28%, rgba(255,255,255,0.12), rgba(255,255,255,0) 62%),\r\n linear-gradient(135deg, #6b3e9d 0%, #5a2e8a 40%, #4a1f7a 100%),\r\n\r\n repeating-linear-gradient(\r\n 0deg,\r\n rgba(255,255,255,0.12) 0px,\r\n rgba(255,255,255,0.12) 1px,\r\n rgba(255,255,255,0.00) 1px,\r\n rgba(255,255,255,0.00) 54px\r\n ),\r\n repeating-linear-gradient(\r\n 90deg,\r\n rgba(255,255,255,0.12) 0px,\r\n rgba(255,255,255,0.12) 1px,\r\n rgba(255,255,255,0.00) 1px,\r\n rgba(255,255,255,0.00) 54px\r\n ),\r\n\r\n repeating-linear-gradient(\r\n 0deg,\r\n rgba(0,0,0,0.07) 0px,\r\n rgba(0,0,0,0.07) 1px,\r\n rgba(0,0,0,0.00) 1px,\r\n rgba(0,0,0,0.00) 108px\r\n ),\r\n repeating-linear-gradient(\r\n 90deg,\r\n rgba(0,0,0,0.07) 0px,\r\n rgba(0,0,0,0.07) 1px,\r\n rgba(0,0,0,0.00) 1px,\r\n rgba(0,0,0,0.00) 108px\r\n ),\r\n\r\n linear-gradient(115deg,\r\n rgba(255,255,255,0.00) 0%,\r\n rgba(255,255,255,0.10) 35%,\r\n rgba(255,255,255,0.00) 70%\r\n ) !important;\r\n\r\n background-size:\r\n auto, auto, auto,\r\n auto, auto,\r\n auto, auto,\r\n 220% 220% !important;\r\n\r\n background-position:\r\n 0 0,\r\n 0 0,\r\n 0 0,\r\n calc(var(--wx) * 0.18) calc(var(--wy) * 0.18),\r\n calc(var(--wx) * 0.18) calc(var(--wy) * 0.18),\r\n calc(var(--wx) * 0.10) calc(var(--wy) * 0.10),\r\n calc(var(--wx) * 0.10) calc(var(--wy) * 0.10),\r\n calc(50% + var(--wx) * 0.06) calc(20% + var(--wy) * 0.04) !important;\r\n\r\n filter: saturate(1.08) contrast(1.05) !important;\r\n animation: heroSheen 10s ease-in-out infinite alternate !important;\r\n }\r\n @keyframes heroSheen{\r\n from{ filter: saturate(1.06) contrast(1.03); }\r\n to{ filter: saturate(1.12) contrast(1.07); }\r\n }\r\n\r\n \/* \u4e0a\u5c64\u98a8\u5439\u8584\u7d17 *\/\r\n #ai-training-container .hero::after{\r\n content: \"\" !important;\r\n position: absolute !important;\r\n inset: -22% !important;\r\n pointer-events: none !important;\r\n z-index: 3 !important;\r\n\r\n background:\r\n repeating-linear-gradient(\r\n 135deg,\r\n rgba(255,255,255,0.10) 0px,\r\n rgba(255,255,255,0.10) 1px,\r\n rgba(255,255,255,0.00) 1px,\r\n rgba(255,255,255,0.00) 12px\r\n ),\r\n radial-gradient(760px circle at 82% 24%,\r\n rgba(255,255,255,0.08),\r\n rgba(255,255,255,0.00) 60%),\r\n radial-gradient(980px circle at 16% 18%,\r\n rgba(255,255,255,0.06),\r\n rgba(255,255,255,0.00) 65%) !important;\r\n\r\n transform:\r\n translate3d(calc(var(--wx) * 0.85), calc(var(--wy) * 0.55), 0)\r\n skewX(calc(var(--wind) * -3deg))\r\n rotate(calc(var(--wind) * -0.9deg)) !important;\r\n\r\n opacity: calc(0.10 + var(--glow) * 0.25) !important;\r\n filter: blur(calc(2px + var(--wind) * 2.6px)) !important;\r\n }\r\n\r\n \/* Canvas\uff08\u788e\u7247\uff09 *\/\r\n #ai-training-container #heroTriCanvas{\r\n position:absolute !important;\r\n inset:0 !important;\r\n width:100% !important;\r\n height:100% !important;\r\n pointer-events:none !important;\r\n z-index: 1 !important;\r\n opacity: 1 !important;\r\n mix-blend-mode: overlay !important;\r\n }\r\n\r\n \/* Canvas\uff08\u7c92\u5b50\uff09 *\/\r\n #ai-training-container #heroCanvas{\r\n position:absolute !important;\r\n inset:0 !important;\r\n width:100% !important;\r\n height:100% !important;\r\n pointer-events:none !important;\r\n z-index: 2 !important;\r\n opacity: 1 !important;\r\n mix-blend-mode: screen !important;\r\n filter: saturate(1.12) contrast(1.10) !important;\r\n }\r\n\r\n \/* Hero \u5167\u5bb9\u5c64 *\/\r\n #ai-training-container .hero .container{\r\n position: relative !important;\r\n z-index: 5 !important;\r\n transform-style: preserve-3d !important;\r\n will-change: transform !important;\r\n transform:\r\n translate3d(calc(var(--wx) * 0.16), calc(var(--wy) * 0.12), 0)\r\n rotateX(var(--tiltX))\r\n rotateY(var(--tiltY)) !important;\r\n transition: transform 160ms ease !important;\r\n }\r\n\r\n #ai-training-container .hero h1{\r\n color: white !important;\r\n font-size: 3rem !important;\r\n margin-bottom: 0.8rem !important;\r\n text-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;\r\n letter-spacing: 0.02em !important;\r\n transform: translate3d(0,0,40px) !important;\r\n }\r\n #ai-training-container .hero p{\r\n font-size: 1.2rem !important;\r\n margin-bottom: 1.5rem !important;\r\n opacity: 0.95 !important;\r\n text-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;\r\n transform: translate3d(0,0,26px) !important;\r\n }\r\n\r\n \/* CTA *\/\r\n #ai-training-container .cta-button{\r\n display:inline-flex !important;\r\n align-items:center !important;\r\n justify-content:center !important;\r\n gap:0.6rem !important;\r\n background: rgba(255,255,255,0.14) !important;\r\n color:white !important;\r\n padding:1rem 2.5rem !important;\r\n border:1px solid rgba(255,255,255,0.22) !important;\r\n border-radius:999px !important;\r\n font-size:1.08rem !important;\r\n cursor:pointer !important;\r\n transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease !important;\r\n font-weight:800 !important;\r\n text-decoration:none !important;\r\n box-shadow: 0 16px 40px rgba(0,0,0,0.18) !important;\r\n backdrop-filter: blur(10px) !important;\r\n -webkit-backdrop-filter: blur(10px) !important;\r\n transform: translate3d(0,0,20px) !important;\r\n user-select:none !important;\r\n }\r\n #ai-training-container .cta-button:hover{\r\n background: rgba(255,255,255,0.20) !important;\r\n box-shadow: 0 22px 60px rgba(0,0,0,0.22) !important;\r\n }\r\n #ai-training-container .cta-button .cta-inner{\r\n display:inline-flex !important;\r\n align-items:center !important;\r\n justify-content:center !important;\r\n will-change: transform !important;\r\n transition: transform 110ms ease !important;\r\n }\r\n\r\n \/* \u5831\u540d\u6309\u9215\u7279\u6b8a\u6d6e\u52d5\u6548\u679c *\/\r\n #enrollCta {\r\n transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease !important;\r\n }\r\n #enrollCta:hover {\r\n transform: translateY(-8px) !important;\r\n box-shadow: 0 16px 40px rgba(155, 110, 196, 0.4) !important;\r\n }\r\n\r\n \/* info grid *\/\r\n #ai-training-container .info-grid{\r\n display:grid !important;\r\n grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) !important;\r\n gap: 1rem !important;\r\n margin-bottom: 1.5rem !important;\r\n }\r\n #ai-training-container .info-card{\r\n background: linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%) !important;\r\n padding: 1.5rem 1rem !important;\r\n border-radius: 8px !important;\r\n border-left: 4px solid #1976d2 !important;\r\n transition: transform 0.3s, box-shadow 0.3s !important;\r\n }\r\n #ai-training-container .info-card:hover{\r\n transform: translateY(-5px) !important;\r\n box-shadow: 0 8px 20px rgba(25,118,210,0.3) !important;\r\n }\r\n #ai-training-container .info-card h3{ margin-top:0 !important; }\r\n #ai-training-container .info-card .number{\r\n font-size: 2rem !important;\r\n color: #1565c0 !important;\r\n font-weight: bold !important;\r\n margin: 0.5rem 0 !important;\r\n }\r\n\r\n \/* \u8ab2\u7a0b\u512a\u52e2 *\/\r\n .advantages{\r\n display:grid;\r\n grid-template-columns: repeat(2,1fr);\r\n gap:1rem;\r\n }\r\n .advantage-item{\r\n background: linear-gradient(135deg,#e0f2f1 0%,#b2dfdb 100%);\r\n padding:1.5rem 1rem;\r\n border-radius:8px;\r\n text-align:center;\r\n transition: transform 0.3s;\r\n }\r\n .advantage-item:hover{ transform: scale(1.05); }\r\n .advantage-item .icon{ font-size:2.5rem; margin-bottom:1rem; }\r\n\r\n \/* \u806f\u7d61 *\/\r\n #ai-training-container .contact-info{\r\n background: linear-gradient(135deg,#f0e6f9 0%,#e8ddf2 100%) !important;\r\n padding: 1.5rem !important;\r\n border-radius: 8px !important;\r\n border-left: 4px solid #9b6ec4 !important;\r\n }\r\n #ai-training-container .contact-item{ margin:0.7rem 0 !important; padding:0.3rem 0 !important; }\r\n #ai-training-container .contact-item strong{ color:#9b6ec4 !important; }\r\n\r\n #ai-training-container .contact-item a.line-link{\r\n color:#fff !important;\r\n background:#00C300 !important;\r\n padding:0.25rem 0.6rem !important;\r\n border-radius:6px !important;\r\n text-decoration:none !important;\r\n font-weight:700 !important;\r\n box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;\r\n display:inline-block !important;\r\n transition: transform 0.12s ease, box-shadow 0.12s ease !important;\r\n cursor:pointer !important;\r\n }\r\n #ai-training-container .contact-item a.line-link:hover{\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;\r\n }\r\n #ai-training-container .contact-item a.line-link::before{ content:\"\ud83d\udd17 \" !important; }\r\n\r\n \/* \u8b49\u7167 *\/\r\n #ai-training-container .certificate-grid{\r\n display:grid !important;\r\n grid-template-columns: repeat(auto-fit,minmax(220px,1fr)) !important;\r\n gap:1rem !important;\r\n }\r\n #ai-training-container .certificate-card{\r\n background: linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%) !important;\r\n padding:1.5rem 1rem !important;\r\n border-radius:8px !important;\r\n border-top: 3px solid #ff9800 !important;\r\n text-align:center !important;\r\n }\r\n #ai-training-container .certificate-card .cert-icon{ font-size:2rem !important; margin-bottom:0.5rem !important; }\r\n\r\n \/* ======= \u8ab2\u7a0b\u5927\u7db1\uff1a\u4e92\u52d5\u5713\u9905\u5716 + \u5361\u7247\u6e05\u55ae ======= *\/\r\n #ai-training-container .outline-pie-wrap{\r\n display:grid !important;\r\n grid-template-columns: 1.05fr 0.95fr !important;\r\n gap: 1.6rem !important;\r\n align-items:start !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-card,\r\n #ai-training-container .outline-detail-card{\r\n background: rgba(255,255,255,0.78) !important;\r\n border: 1px solid rgba(155,110,196,0.18) !important;\r\n border-radius: 16px !important;\r\n box-shadow: 0 14px 40px rgba(107,74,138,0.12) !important;\r\n backdrop-filter: blur(10px) !important;\r\n -webkit-backdrop-filter: blur(10px) !important;\r\n overflow:hidden !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-header{\r\n display:flex !important;\r\n justify-content:space-between !important;\r\n align-items:center !important;\r\n padding: 1.2rem 1.2rem 0.8rem !important;\r\n }\r\n #ai-training-container .outline-pie-kicker{\r\n font-size:0.85rem !important;\r\n color: rgba(107,74,138,0.75) !important;\r\n letter-spacing:0.06em !important;\r\n }\r\n #ai-training-container .outline-pie-title{\r\n font-size:1.1rem !important;\r\n font-weight:800 !important;\r\n color:#5e3f7d !important;\r\n margin-top:0.2rem !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-stage{\r\n padding: 0.8rem 1.2rem 0.2rem !important;\r\n display:flex !important;\r\n justify-content:center !important;\r\n }\r\n #ai-training-container .outline-pie-svg{\r\n width: 100% !important;\r\n max-width: 520px !important;\r\n height: auto !important;\r\n }\r\n #ai-training-container .outline-pie-base{ fill: rgba(240,230,249,0.55) !important; }\r\n\r\n #ai-training-container .slice{\r\n cursor:pointer !important;\r\n transform-origin: 260px 260px !important;\r\n transition:\r\n transform 320ms cubic-bezier(0.2,0.9,0.2,1),\r\n filter 320ms cubic-bezier(0.2,0.9,0.2,1),\r\n opacity 220ms ease !important;\r\n filter: drop-shadow(0 10px 18px rgba(0,0,0,0.1)) !important;\r\n outline:none !important;\r\n }\r\n #ai-training-container .slice:hover{\r\n filter: drop-shadow(0 14px 24px rgba(0,0,0,0.16)) !important;\r\n }\r\n #ai-training-container .slice.is-dim{ opacity: 0.55 !important; }\r\n #ai-training-container .slice.is-active{ filter: url(#softShadow) !important; }\r\n\r\n \/* \u6247\u5f62\u6587\u5b57\uff1a\u7f6e\u4e2d + \u53ef\u65cb\u8f49\u95b1\u8b80 *\/\r\n #ai-training-container .slice-label{\r\n font-size: 15px !important;\r\n font-weight: 900 !important;\r\n fill: rgba(255,255,255,0.95) !important;\r\n letter-spacing: 0.03em !important;\r\n pointer-events: none !important;\r\n\r\n dominant-baseline: middle !important;\r\n alignment-baseline: middle !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-center-title{\r\n font-size: 22px !important;\r\n font-weight: 900 !important;\r\n fill: #5e3f7d !important;\r\n }\r\n #ai-training-container .outline-pie-hole{\r\n fill: rgba(255,255,255,0.92) !important;\r\n stroke: rgba(155,110,196,0.18) !important;\r\n stroke-width: 2 !important;\r\n }\r\n\r\n #ai-training-container .outline-legend{\r\n display:grid !important;\r\n grid-template-columns: 1fr 1fr !important;\r\n gap: 0.8rem !important;\r\n padding: 0.8rem 1.2rem 1.2rem !important;\r\n }\r\n #ai-training-container .legend-item{\r\n display:flex !important;\r\n align-items:center !important;\r\n gap:0.65rem !important;\r\n padding:0.75rem 0.85rem !important;\r\n border-radius:12px !important;\r\n border: 1px solid rgba(155,110,196,0.18) !important;\r\n background: rgba(255,255,255,0.75) !important;\r\n cursor:pointer !important;\r\n transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;\r\n user-select:none !important;\r\n }\r\n #ai-training-container .legend-item:hover{\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 10px 26px rgba(107,74,138,0.12) !important;\r\n }\r\n #ai-training-container .legend-dot{\r\n width:12px !important; height:12px !important;\r\n border-radius:50% !important;\r\n box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important;\r\n }\r\n #ai-training-container .legend-text{\r\n display:flex !important;\r\n flex-direction:column !important;\r\n gap:0.1rem !important;\r\n }\r\n #ai-training-container .legend-name{\r\n font-weight:900 !important;\r\n color:#5e3f7d !important;\r\n font-size:0.98rem !important;\r\n }\r\n\r\n \/* \u53f3\u5074\u5361\u7247\u6e05\u55ae *\/\r\n #ai-training-container .outline-detail-card{ padding: 1.2rem !important; }\r\n\r\n #ai-training-container .outline-detail-title{\r\n margin-top:0 !important;\r\n font-size:1.35rem !important;\r\n font-weight:900 !important;\r\n color:#5e3f7d !important;\r\n }\r\n #ai-training-container .outline-detail-desc{\r\n margin-top:0.35rem !important;\r\n color: rgba(51,51,51,0.78) !important;\r\n }\r\n\r\n #ai-training-container .outline-card-list{\r\n margin-top:1rem !important;\r\n display:grid !important;\r\n grid-template-columns: 1fr !important;\r\n gap:0.9rem !important;\r\n }\r\n #ai-training-container .outline-item-card{\r\n border-radius:16px !important;\r\n border: 1px solid rgba(155,110,196,0.18) !important;\r\n background: rgba(255,255,255,0.82) !important;\r\n overflow:hidden !important;\r\n box-shadow: 0 10px 26px rgba(107,74,138,0.08) !important;\r\n transform: translateY(8px) !important;\r\n opacity: 0 !important;\r\n transition:\r\n transform 380ms cubic-bezier(0.2,0.9,0.2,1),\r\n opacity 300ms ease,\r\n box-shadow 240ms ease,\r\n border-color 240ms ease !important;\r\n }\r\n #ai-training-container .outline-item-card.is-in{\r\n transform: translateY(0) !important;\r\n opacity: 1 !important;\r\n }\r\n #ai-training-container .outline-item-top{\r\n padding:0.95rem 1rem 0.85rem !important;\r\n display:flex !important;\r\n align-items:center !important;\r\n justify-content:space-between !important;\r\n gap:0.9rem !important;\r\n }\r\n #ai-training-container .outline-item-left{\r\n display:flex !important;\r\n align-items:center !important;\r\n gap:0.75rem !important;\r\n min-width:0 !important;\r\n }\r\n #ai-training-container .outline-item-dot{\r\n width:12px !important;\r\n height:12px !important;\r\n border-radius:999px !important;\r\n flex: 0 0 12px !important;\r\n box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;\r\n }\r\n #ai-training-container .outline-item-title{\r\n font-weight:900 !important;\r\n color:#5e3f7d !important;\r\n line-height:1.3 !important;\r\n white-space:nowrap !important;\r\n overflow:hidden !important;\r\n text-overflow: ellipsis !important;\r\n }\r\n\r\n \/* Footer *\/\r\n #ai-training-container footer{\r\n background: linear-gradient(90deg,#6b3e9d 0%,#5a2e8a 100%) !important;\r\n color:white !important;\r\n text-align:center !important;\r\n padding:1.5rem !important;\r\n margin-top:2rem !important;\r\n }\r\n\r\n \/* RWD *\/\r\n @media (max-width: 980px){\r\n #ai-training-container .outline-pie-wrap{ grid-template-columns: 1fr !important; }\r\n #ai-training-container .outline-legend{ grid-template-columns: 1fr !important; }\r\n }\r\n @media (max-width: 768px){\r\n nav ul{ gap: 1rem; font-size: 0.9rem; }\r\n #ai-training-container h1{ font-size: 1.8rem !important; }\r\n #ai-training-container .hero h1{ font-size: 2rem !important; }\r\n #ai-training-container h2{ font-size: 1.5rem !important; }\r\n #ai-training-container section{ padding: 1.5rem; margin: 1rem 0; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n #ai-training-container #heroTriCanvas,\r\n #ai-training-container #heroCanvas{ display:none !important; }\r\n #ai-training-container .hero::before{ animation:none !important; }\r\n #ai-training-container .hero::after{ display:none !important; }\r\n #ai-training-container .hero .container{ transform:none !important; }\r\n #ai-training-container .cta-button{ transition:none !important; }\r\n #ai-training-container .cta-button .cta-inner{ transition:none !important; }\r\n #ai-training-container .slice,\r\n #ai-training-container .legend-item,\r\n #ai-training-container .outline-item-card{ transition:none !important; }\r\n }\r\n\r\n @media (hover: none){\r\n #ai-training-container #heroTriCanvas{ opacity: 0.55 !important; }\r\n #ai-training-container #heroCanvas{ opacity: 0.55 !important; }\r\n #ai-training-container .hero::after{ display:none !important; }\r\n #ai-training-container .hero .container{ transform:none !important; }\r\n }\r\n\r\n#ai-training-container a,\r\n#ai-training-container button{\r\n transition: all 0.3s ease;\r\n}\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"ai-training-container\">\r\n \r\n <nav>\r\n <div class=\"container\">\r\n <div class=\"logo\">\ud83c\udf93 \u8077\u524d\u8a13\u7df4\u8ab2\u7a0b<\/div>\r\n <ul>\r\n <li><a onclick=\"scrollToSection('overview')\" style=\"font-weight:bold\">\u8ab2\u7a0b\u6982\u8ff0\u8207\u5927\u7db1<\/a><\/li>\r\n <li><a onclick=\"scrollToSection('advantages')\" style=\"font-weight:bold\">\u8ab2\u7a0b\u512a\u52e2<\/a><\/li>\r\n <li><a onclick=\"scrollToSection('contact')\" style=\"font-weight:bold\">\u806f\u7d61\u6211\u5011<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hero\" aria-label=\"\u8ab2\u7a0b\u4e3b\u8996\u89ba\u6a19\u984c\u5340\u584a\">\r\n <canvas id=\"heroTriCanvas\" aria-hidden=\"true\"><\/canvas>\r\n <canvas id=\"heroCanvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n <div class=\"container\">\r\n <h1>AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c02\u671f<\/h1>\r\n\r\n \u00a0 \u00a0 \u00a0 \u00a0\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"container\">\r\n \r\n <section id=\"overview\">\r\n <h2>\ud83d\udcda \u8ab2\u7a0b\u6982\u8ff0\u8207\u5927\u7db1<\/h2>\r\n \r\n \r\n <div style=\"display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1.2rem; margin-bottom:2rem; text-align:center;\">\r\n <div style=\"padding:1.5rem; background:linear-gradient(135deg,#f0e6f9 0%,#e8ddf2 100%); border-radius:12px; border-left:4px solid #9b6ec4;\">\r\n <div style=\"font-size:0.9rem; color:#9b6ec4; font-weight:bold; margin-bottom:0.5rem;\">\u8ab2\u7a0b\u7e3d\u6642\u6578<\/div>\r\n <div style=\"font-size:2.5rem; color:#6b4a8a; font-weight:bold; margin:0.5rem 0;\">255<\/div>\r\n <div style=\"font-size:0.95rem; color:#666;\">\u5b8c\u6574\u7684\u8a13\u7df4\u8ab2\u7a0b\uff0c\u5e6b\u52a9\u60a8\u5168\u9762\u638c\u63e1\u5c08\u696d\u6280\u80fd<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"outline-pie-wrap\">\r\n \r\n <div class=\"outline-pie-card\">\r\n <div class=\"outline-pie-header\">\r\n <div>\r\n <div class=\"outline-pie-kicker\">\u8ab2\u7a0b\u7d50\u69cb\u7e3d\u89bd<\/div>\r\n <div class=\"outline-pie-title\">\u9ede\u64ca\u5340\u584a\u67e5\u770b\u7d30\u9805<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"outline-pie-stage\">\r\n <svg id=\"outlinePie\" viewBox=\"0 0 520 520\" class=\"outline-pie-svg\" role=\"group\" aria-label=\"\u8ab2\u7a0b\u5927\u7db1\u4e92\u52d5\u5713\u9905\u5716\">\r\n <defs>\r\n <filter id=\"softShadow\" x=\"-30%\" y=\"-30%\" width=\"160%\" height=\"160%\">\r\n <feDropShadow dx=\"0\" dy=\"10\" stdDeviation=\"10\" flood-color=\"rgba(0,0,0,0.18)\" \/>\r\n <\/filter>\r\n <radialGradient id=\"glassGlow\" cx=\"35%\" cy=\"30%\" r=\"70%\">\r\n <stop offset=\"0%\" stop-color=\"rgba(255,255,255,0.85)\" \/>\r\n <stop offset=\"45%\" stop-color=\"rgba(255,255,255,0.12)\" \/>\r\n <stop offset=\"100%\" stop-color=\"rgba(255,255,255,0)\" \/>\r\n <\/radialGradient>\r\n <\/defs>\r\n\r\n <circle cx=\"260\" cy=\"260\" r=\"210\" class=\"outline-pie-base\"><\/circle>\r\n <g id=\"outlinePieSlices\"><\/g>\r\n\r\n \r\n <g class=\"outline-pie-center\">\r\n <circle cx=\"260\" cy=\"260\" r=\"120\" class=\"outline-pie-hole\"><\/circle>\r\n <circle cx=\"260\" cy=\"260\" r=\"120\" fill=\"url(#glassGlow)\" opacity=\"0.9\"><\/circle>\r\n <text x=\"260\" y=\"260\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"outline-pie-center-title\">\u8ab2\u7a0b\u5927\u7db1<\/text>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div id=\"outlineLegend\" class=\"outline-legend\" aria-label=\"\u8ab2\u7a0b\u5927\u7db1\u5716\u4f8b\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"outline-detail-card\">\r\n <div class=\"outline-detail-head\">\r\n <div class=\"outline-detail-title\" id=\"detailTitle\">\u2014<\/div>\r\n <div class=\"outline-detail-desc\" id=\"detailDesc\">\u9ede\u64ca\u5713\u9905\u5716\u4efb\u4e00\u5340\u584a\uff0c\u53f3\u5074\u6703\u9806\u6ed1\u986f\u793a\u8ab2\u7a0b\u7d30\u9805\u5361\u7247\u3002<\/div>\r\n <\/div>\r\n <div class=\"outline-card-list\" id=\"detailCards\" aria-live=\"polite\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"advantages\">\r\n <h2>\ud83c\udf1f \u8ab2\u7a0b\u512a\u52e2<\/h2>\r\n <div class=\"advantages\">\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83d\udc68\u200d\ud83c\udfeb<\/div><h3>\u5c08\u696d\u8b1b\u5e2b<\/h3><p>\u696d\u754c\u8cc7\u6df1\u5c08\u696d\u8b1b\u5e2b\u6388\u8ab2\uff0c\u64c1\u6709\u8c50\u5bcc\u7684\u5be6\u52d9\u7d93\u9a57\u8207\u6559\u5b78\u7d93\u9a57<\/p><\/div>\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83d\udcbc<\/div><h3>\u5c31\u696d\u6a5f\u6703<\/h3><p>\u8207\u591a\u5bb6\u77e5\u540d\u4f01\u696d\u5408\u4f5c\uff0c\u63d0\u4f9b\u512a\u5148\u5c31\u696d\u63a8\u85a6\u6a5f\u6703<\/p><\/div>\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83d\udcca<\/div><h3>\u5be6\u52d9\u6559\u5b78<\/h3><p>\u63a1\u7528\u5be6\u969b\u6848\u4f8b\u8207\u5c08\u6848\u5be6\u4f5c\uff0c\u5feb\u901f\u63d0\u5347\u8077\u5834\u7af6\u722d\u529b<\/p><\/div>\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83c\udfc6<\/div><h3>\u8b49\u7167\u8a8d\u8b49<\/h3><p>\u8ab2\u7a0b\u7d50\u675f\u5f8c\u5354\u52a9\u8003\u53d6\u5c08\u696d\u8b49\u7167<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2>\ud83c\udf96\ufe0f \u5c08\u696d\u8b49\u7167<\/h2>\r\n <div class=\"certificate-grid\">\r\n <div class=\"certificate-card\"><div class=\"cert-icon\">\ud83d\udcdc<\/div><h3>\u5c08\u696d\u8b49\u7167<\/h3><p>iPAS AI \u61c9\u7528\u898f\u5283\u5e2b\uff08\u521d\u7d1a\uff09<\/p><\/div>\r\n <div class=\"certificate-card\"><div class=\"cert-icon\">\ud83c\udfc5<\/div><h3>\u6280\u80fd\u8a8d\u8b49<\/h3><p>\u751f\u6210\u5f0fAI\u80fd\u529b\u8a8d\u8b49<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section style=\"background: linear-gradient(135deg,#f0e6f9 0%,#e8ddf2 100%); border: 2px solid #9b6ec4;\">\r\n <h2>\ud83d\udcdd \u5831\u540d\u8cc7\u8a0a<\/h2>\r\n <div class=\"info-grid\">\r\n <div class=\"info-card\" style=\"background:white;\">\r\n <h3>\u5831\u540d\u5c0d\u8c61<\/h3>\r\n <ul style=\"list-style:none; padding-left:0;\">\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>15\u6b72\u4ee5\u4e0a\u4e4b\u5931\u696d\u8005\r\n <\/li>\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>\u5c0d\u8a72\u8077\u696d\u9818\u57df\u6709\u8208\u8da3\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"info-card\" style=\"background:white;\">\r\n <h3>\u653f\u5e9c\u88dc\u52a9<\/h3>\r\n <ul style=\"list-style:none; padding-left:0;\">\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>\u7b26\u5408\u88dc\u52a9\u8cc7\u683c\u514d\u5b78\u8cbb\uff0b\u8077\u8a13\u751f\u6d3b\u6d25\u8cbc\r\n <\/li>\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>\u9752\u5e74\u5b78\u7fd2\u734e\u52f5\u91d1\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/section>\r\n\r\n \r\n <section style=\"text-align:center; padding:2rem;\">\r\n <h2>\ud83d\udce2 \u8ab2\u7a0b\u6d77\u5831<\/h2>\r\n <div style=\"display:flex; justify-content:center; align-items:center; gap:2rem; flex-wrap:wrap; margin-top:1.5rem;\">\r\n <div style=\"flex:0 1 720px; min-width:320px; max-width:720px;\">\r\n <img decoding=\"async\" src=\"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/wp-content\/uploads\/2026\/01\/V6.png\" alt=\"\u8ab2\u7a0b\u6d77\u58311\"\r\n style=\"width:100%; max-width:720px; height:auto; border-radius:12px; box-shadow:0 6px 22px rgba(155,110,196,0.25); cursor:pointer; transition:transform 0.25s;\"\r\n onmouseover=\"this.style.transform='scale(1.03)'\" onmouseout=\"this.style.transform='scale(1)'\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\">\r\n <h2>\ud83d\udcde \u806f\u7d61\u65b9\u5f0f<\/h2>\r\n <div class=\"contact-info\">\r\n <div class=\"contact-item\"><strong>\ud83d\udcde \u96fb\u8a71\uff1a<\/strong> <a href=\"tel:06-2130019\" style=\"color:#666; text-decoration:none;\">06-2130019<\/a><\/div>\r\n <div class=\"contact-item\"><strong>\ud83d\udce7 \u4fe1\u7bb1\uff1a<\/strong> <a href=\"mailto:aittc.nutn@gmail.com\" style=\"color:#666; text-decoration:none;\">aittc.nutn@gmail.com<\/a><\/div>\r\n <div class=\"contact-item\"><strong>\ud83c\udfe2 \u5730\u5740\uff1a<\/strong>\u81fa\u5357\u5927\u5b78AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede\uff08\u601d\u57ce\u6a13F104\u5ba4\uff09<\/div>\r\n <div class=\"contact-item\"><strong>\u23f0 \u54a8\u8a62\u6642\u9593\uff1a<\/strong>\u9031\u4e00\u81f3\u9031\u4e94 08:00-17:30<\/div>\r\n <div class=\"contact-item\"><strong>\ud83d\udcac \u5b98\u65b9line\uff1a<\/strong>\r\n <a href=\"https:\/\/lin.ee\/8XXcfnHo\" class=\"line-link\" target=\"_blank\" rel=\"noopener\">@270jdtoe<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <footer>\r\n <p>© 2026 AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede | \u7248\u6b0a\u6240\u6709<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/* \u5e73\u6ed1\u6efe\u52d5 *\/\r\n function scrollToSection(sectionId){\r\n const section = document.getElementById(sectionId);\r\n if(section) section.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n\r\n \/* \u9032\u5834\u52d5\u756b *\/\r\n window.addEventListener('load', function(){\r\n document.querySelectorAll('#ai-training-container section').forEach((section, index) => {\r\n setTimeout(() => {\r\n section.style.opacity = '0';\r\n section.style.animation = 'fadeIn 0.6s ease-in-out forwards';\r\n }, index * 100);\r\n });\r\n });\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n\r\n \/* =========================================================\r\n Hero\uff1a\u4e09\u89d2\u788e\u7247 + \u5f37\u7c92\u5b50 + \u5f37\u6ed1\u9f20\u8ffd\u8e64\r\n ========================================================= *\/\r\n (function initHeroProFX(){\r\n const hero = document.querySelector(\"#ai-training-container .hero\");\r\n const triCanvas = document.getElementById(\"heroTriCanvas\");\r\n const pCanvas = document.getElementById(\"heroCanvas\");\r\n const cta = document.getElementById(\"heroCta\");\r\n const ctaInner = cta?.querySelector(\".cta-inner\");\r\n if(!hero || !triCanvas || !pCanvas) return;\r\n\r\n const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n if(reduceMotion) return;\r\n\r\n const clamp = (n,a,b)=>Math.min(b,Math.max(a,n));\r\n const lerp = (a,b,t)=>a+(b-a)*t;\r\n\r\n let mx = 0.5, my = 0.45;\r\n let hover = false;\r\n\r\n let windT = 0, wind = 0;\r\n let glowT = 0, glow = 0;\r\n let wx = 0, wy = 0;\r\n let tiltX = 0, tiltY = 0;\r\n\r\n function setVars(){\r\n hero.style.setProperty(\"--mx\", (mx*100).toFixed(2) + \"%\");\r\n hero.style.setProperty(\"--my\", (my*100).toFixed(2) + \"%\");\r\n hero.style.setProperty(\"--wx\", wx.toFixed(2) + \"px\");\r\n hero.style.setProperty(\"--wy\", wy.toFixed(2) + \"px\");\r\n hero.style.setProperty(\"--wind\", wind.toFixed(3));\r\n hero.style.setProperty(\"--glow\", glow.toFixed(3));\r\n hero.style.setProperty(\"--tiltX\", tiltX.toFixed(2) + \"deg\");\r\n hero.style.setProperty(\"--tiltY\", tiltY.toFixed(2) + \"deg\");\r\n }\r\n\r\n hero.addEventListener(\"mouseenter\", ()=>{\r\n hover = true;\r\n windT = 1; glowT = 1;\r\n });\r\n hero.addEventListener(\"mouseleave\", ()=>{\r\n hover = false;\r\n windT = 0; glowT = 0;\r\n if(ctaInner) ctaInner.style.transform = \"translate3d(0px,0px,0)\";\r\n });\r\n hero.addEventListener(\"mousemove\", (e)=>{\r\n const rect = hero.getBoundingClientRect();\r\n mx = clamp((e.clientX - rect.left) \/ rect.width, 0, 1);\r\n my = clamp((e.clientY - rect.top) \/ rect.height, 0, 1);\r\n });\r\n\r\n \/* CTA \u78c1\u5438 *\/\r\n if(cta && ctaInner){\r\n const MAG_RADIUS = 180;\r\n const MAG_STRENGTH = 22;\r\n window.addEventListener(\"mousemove\", (e)=>{\r\n if(!hover) return;\r\n const r = cta.getBoundingClientRect();\r\n const cx = r.left + r.width\/2;\r\n const cy = r.top + r.height\/2;\r\n const dx = e.clientX - cx;\r\n const dy = e.clientY - cy;\r\n const dist = Math.hypot(dx, dy);\r\n\r\n if(dist < MAG_RADIUS){\r\n const f = (1 - dist \/ MAG_RADIUS);\r\n const tx = dx * 0.10 * f * (MAG_STRENGTH\/10);\r\n const ty = dy * 0.10 * f * (MAG_STRENGTH\/10);\r\n ctaInner.style.transform = `translate3d(${tx.toFixed(2)}px, ${ty.toFixed(2)}px, 0)`;\r\n }else{\r\n ctaInner.style.transform = \"translate3d(0px,0px,0)\";\r\n }\r\n });\r\n }\r\n\r\n \/* Triangles (isosceles mesh) *\/\r\n const tCtx = triCanvas.getContext(\"2d\", { alpha: true });\r\n let tW=0, tH=0, tDPR=Math.min(2, window.devicePixelRatio||1);\r\n\r\n let tris = [];\r\n let triSpacing = 30;\r\n let triHeight = 0;\r\n let triRadius = 260;\r\n let triForce = 34;\r\n let triJitter = 1.1;\r\n let triEdgeAlpha = 0.12;\r\n\r\n function heroGradientColor(x,y){\r\n const nx = x \/ tW, ny = y \/ tH;\r\n const c1 = {r:155,g:110,b:196};\r\n const c2 = {r:132,g:86,b:184};\r\n const c3 = {r:111,g:74,b:163};\r\n const a = lerp(0.15, 0.95, ny);\r\n const base = {\r\n r: lerp(c1.r, c3.r, a),\r\n g: lerp(c1.g, c3.g, a),\r\n b: lerp(c1.b, c3.b, a)\r\n };\r\n const xmix = (Math.sin((nx*3.14)*1.2)+1)\/2 * 0.35;\r\n return {\r\n r: lerp(base.r, c2.r, xmix),\r\n g: lerp(base.g, c2.g, xmix),\r\n b: lerp(base.b, c2.b, xmix),\r\n };\r\n }\r\n\r\n function buildTriangles(){\r\n tris = [];\r\n triHeight = triSpacing * 0.78;\r\n\r\n const cols = Math.ceil(tW \/ triSpacing) + 2;\r\n const rows = Math.ceil(tH \/ triHeight) + 2;\r\n\r\n for(let r=0; r<rows; r++){\r\n for(let c=0; c<cols; c++){\r\n const x0 = (c * triSpacing) - triSpacing;\r\n const y0 = (r * triHeight) - triHeight;\r\n\r\n const up = {\r\n ax: x0 + triSpacing\/2, ay: y0,\r\n bx: x0, by: y0 + triHeight,\r\n cx: x0 + triSpacing, cy: y0 + triHeight,\r\n };\r\n const down = {\r\n ax: x0, ay: y0,\r\n bx: x0 + triSpacing, by: y0,\r\n cx: x0 + triSpacing\/2, cy: y0 + triHeight,\r\n };\r\n\r\n [up, down].forEach((t)=>{\r\n const cx = (t.ax + t.bx + t.cx) \/ 3;\r\n const cy = (t.ay + t.by + t.cy) \/ 3;\r\n const col = heroGradientColor(cx, cy);\r\n\r\n tris.push({\r\n a:{x:t.ax,y:t.ay}, b:{x:t.bx,y:t.by}, c:{x:t.cx,y:t.cy},\r\n ox:0, oy:0, vx:0, vy:0,\r\n cx, cy,\r\n r:col.r, g:col.g, b:col.b,\r\n ph: Math.random()*Math.PI*2\r\n });\r\n });\r\n }\r\n }\r\n }\r\n\r\n function triResize(){\r\n const rect = hero.getBoundingClientRect();\r\n tW = Math.max(1, Math.floor(rect.width));\r\n tH = Math.max(1, Math.floor(rect.height));\r\n triCanvas.width = Math.floor(tW * tDPR);\r\n triCanvas.height = Math.floor(tH * tDPR);\r\n triCanvas.style.width = tW + \"px\";\r\n triCanvas.style.height = tH + \"px\";\r\n tCtx.setTransform(tDPR,0,0,tDPR,0,0);\r\n\r\n triSpacing = clamp(Math.round(tW \/ 42), 22, 32);\r\n triRadius = clamp(Math.round(tW \/ 4.8), 200, 360);\r\n\r\n buildTriangles();\r\n }\r\n\r\n \/* Particles *\/\r\n const pCtx = pCanvas.getContext(\"2d\", { alpha: true });\r\n let pW=0, pH=0, pDPR=Math.min(2, window.devicePixelRatio||1);\r\n\r\n function pResize(){\r\n const rect = hero.getBoundingClientRect();\r\n pW = Math.max(1, Math.floor(rect.width));\r\n pH = Math.max(1, Math.floor(rect.height));\r\n pCanvas.width = Math.floor(pW * pDPR);\r\n pCanvas.height = Math.floor(pH * pDPR);\r\n pCanvas.style.width = pW + \"px\";\r\n pCanvas.style.height = pH + \"px\";\r\n pCtx.setTransform(pDPR,0,0,pDPR,0,0);\r\n seedParticles();\r\n }\r\n\r\n window.addEventListener(\"resize\", ()=>{\r\n triResize();\r\n pResize();\r\n });\r\n\r\n function flowAngle(x, y, t){\r\n const nx = x \/ pW, ny = y \/ pH;\r\n const a =\r\n Math.sin((nx * 6.6) + t * 1.15) * 1.2 +\r\n Math.cos((ny * 5.9) - t * 0.92) * 1.1 +\r\n Math.sin((nx + ny) * 7.4 + t * 0.55) * 0.8;\r\n return a;\r\n }\r\n\r\n const particles = [];\r\n let PCOUNT = 300;\r\n function seedParticles(){\r\n particles.length = 0;\r\n const base = Math.min(pW, pH);\r\n PCOUNT = clamp(Math.floor((base \/ 2.6)), 240, 420);\r\n\r\n for(let i=0;i<PCOUNT;i++){\r\n particles.push({\r\n x: Math.random()*pW,\r\n y: Math.random()*pH,\r\n vx: 0,\r\n vy: 0,\r\n life: Math.random()*160 + 110,\r\n size: Math.random()*2.6 + 1.3,\r\n });\r\n }\r\n }\r\n\r\n triResize();\r\n pResize();\r\n\r\n \/* Animation loop *\/\r\n let t0 = performance.now();\r\n\r\n function animate(now){\r\n const dt = Math.min(0.033, (now - t0)\/1000);\r\n t0 = now;\r\n\r\n wind += (windT - wind) * 0.13;\r\n glow += (glowT - glow) * 0.14;\r\n\r\n const rx = (mx - 0.5) * 2;\r\n const ry = (my - 0.5) * 2;\r\n\r\n const MAX_SHIFT = 36;\r\n wx += ((rx * MAX_SHIFT * wind) - wx) * 0.16;\r\n wy += ((ry * MAX_SHIFT * wind) - wy) * 0.16;\r\n\r\n const MAX_TILT = 12;\r\n tiltY += ((rx * MAX_TILT * wind) - tiltY) * 0.14;\r\n tiltX += ((-ry * MAX_TILT * wind) - tiltX) * 0.14;\r\n\r\n setVars();\r\n\r\n \/* Triangles *\/\r\n tCtx.clearRect(0,0,tW,tH);\r\n const mpx = mx * tW;\r\n const mpy = my * tH;\r\n const active = hover ? 1 : 0.15;\r\n\r\n for(const tr of tris){\r\n const dx = tr.cx - mpx;\r\n const dy = tr.cy - mpy;\r\n const dist = Math.hypot(dx, dy);\r\n const inR = dist < triRadius ? (1 - dist\/triRadius) : 0;\r\n\r\n const repel = inR * inR * (1.0 + 0.7*wind);\r\n const attract = inR * (0.34 + 0.40*glow);\r\n\r\n const ndx = dist ? dx\/dist : 0;\r\n const ndy = dist ? dy\/dist : 0;\r\n\r\n const targetX =\r\n (-ndx * triForce * repel + (mpx - tr.cx) * 0.05 * attract)\r\n + Math.sin(now*0.003 + tr.ph) * triJitter * (0.7 + 1.0*wind);\r\n\r\n const targetY =\r\n (-ndy * triForce * repel + (mpy - tr.cy) * 0.05 * attract)\r\n + Math.cos(now*0.003 + tr.ph) * triJitter * (0.7 + 1.0*wind);\r\n\r\n const spring = 16;\r\n const damp = 0.84;\r\n\r\n tr.vx += (targetX - tr.ox) * spring * dt * active;\r\n tr.vy += (targetY - tr.oy) * spring * dt * active;\r\n\r\n tr.vx *= damp;\r\n tr.vy *= damp;\r\n\r\n tr.ox += tr.vx;\r\n tr.oy += tr.vy;\r\n\r\n const ax = tr.a.x + tr.ox;\r\n const ay = tr.a.y + tr.oy;\r\n const bx = tr.b.x + tr.ox;\r\n const by = tr.b.y + tr.oy;\r\n const cx2 = tr.c.x + tr.ox;\r\n const cy2 = tr.c.y + tr.oy;\r\n\r\n const brighten = 1 + inR * (0.55 + 0.35*glow);\r\n const rr = Math.min(255, tr.r * brighten);\r\n const gg = Math.min(255, tr.g * brighten);\r\n const bb = Math.min(255, tr.b * brighten);\r\n\r\n tCtx.beginPath();\r\n tCtx.moveTo(ax, ay);\r\n tCtx.lineTo(bx, by);\r\n tCtx.lineTo(cx2, cy2);\r\n tCtx.closePath();\r\n\r\n tCtx.globalAlpha = (0.26 + 0.62*inR) * (0.55 + 0.45*glow) * (0.85 + 0.15*wind);\r\n tCtx.fillStyle = `rgba(${rr|0},${gg|0},${bb|0},1)`;\r\n tCtx.fill();\r\n\r\n tCtx.globalAlpha = triEdgeAlpha * (0.4 + 1.3*inR) * (0.4 + 0.6*glow);\r\n tCtx.strokeStyle = \"rgba(255,255,255,0.9)\";\r\n tCtx.lineWidth = 1;\r\n tCtx.stroke();\r\n }\r\n\r\n \/* Particles *\/\r\n pCtx.clearRect(0,0,pW,pH);\r\n\r\n const time = now * 0.001;\r\n\r\n for(const p of particles){\r\n const a = flowAngle(p.x + wx*0.25, p.y + wy*0.25, time);\r\n\r\n const sp = 30 + 62*wind;\r\n const ax = Math.cos(a) * sp;\r\n const ay = Math.sin(a) * sp;\r\n\r\n const fx = (mx*pW) - p.x;\r\n const fy = (my*pH) - p.y;\r\n const d = Math.hypot(fx, fy);\r\n const influence = (d < 360) ? (1 - d\/360) : 0;\r\n\r\n p.vx += (ax * dt) + (fx\/d || 0) * influence * (70 + 85*glow) * dt;\r\n p.vy += (ay * dt) + (fy\/d || 0) * influence * (70 + 85*glow) * dt;\r\n\r\n p.vx *= 0.90;\r\n p.vy *= 0.90;\r\n\r\n p.x += p.vx * dt;\r\n p.y += p.vy * dt;\r\n\r\n p.life -= 1;\r\n\r\n if(p.x < -80 || p.x > pW+80 || p.y < -80 || p.y > pH+80 || p.life <= 0){\r\n p.x = Math.random()*pW;\r\n p.y = Math.random()*pH;\r\n p.vx = 0; p.vy = 0;\r\n p.life = Math.random()*170 + 110;\r\n }\r\n\r\n const alpha = (0.13 + 0.35*glow) * (0.6 + 0.4*Math.min(1, p.life\/110));\r\n\r\n pCtx.globalAlpha = alpha;\r\n pCtx.beginPath();\r\n pCtx.arc(p.x, p.y, p.size, 0, Math.PI*2);\r\n pCtx.fillStyle = \"rgba(255,255,255,0.98)\";\r\n pCtx.fill();\r\n\r\n pCtx.globalAlpha = alpha * 0.28;\r\n pCtx.beginPath();\r\n pCtx.arc(p.x, p.y, p.size*2.4, 0, Math.PI*2);\r\n pCtx.fillStyle = \"rgba(255,255,255,0.9)\";\r\n pCtx.fill();\r\n\r\n if(glow > 0.05){\r\n pCtx.globalAlpha = alpha * 0.70;\r\n pCtx.beginPath();\r\n pCtx.moveTo(p.x, p.y);\r\n pCtx.lineTo(p.x - p.vx*0.12, p.y - p.vy*0.12);\r\n pCtx.lineWidth = 1.25;\r\n pCtx.strokeStyle = \"rgba(255,255,255,0.92)\";\r\n pCtx.stroke();\r\n }\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n })();\r\n\r\n \/* ======= \u5713\u9905\u5716\u4e92\u52d5 ======= *\/\r\n (function initOutlinePie(){\r\n const data = [\r\n {\r\n key: \"dev\",\r\n title: \"AI\u6280\u8853\u958b\u767c\u8207\u5be6\u52d9\",\r\n desc: \"\u504f\u91cd\u5be6\u4f5c\uff1a\u63d0\u793a\u5de5\u7a0b\u3001\u8cc7\u6599\u4e2d\u5fc3\u7ba1\u7406\u3001\u5f71\u50cf\u8fa8\u8b58\u8207\u5927\u6578\u64da\u5206\u6790\u843d\u5730\u3002\",\r\n items: [\"\u751f\u6210\u5f0fAI\u63d0\u793a\u5de5\u7a0b\u6280\u8853\",\"AI\u8cc7\u6599\u4e2d\u5fc3\u7ba1\u7406\",\"\u5927\u6578\u64da\u5206\u6790\u5be6\u52d9\",\"AI\u5f71\u50cf\u8fa8\u8b58\u5be6\u52d9\"],\r\n color: \"#8E5CCB\"\r\n },\r\n {\r\n key: \"ml\",\r\n title: \"\u4eba\u5de5\u667a\u6167\u8207\u8cc7\u6599\u5206\u6790\",\r\n desc: \"\u5efa\u7acb\u57fa\u790e\u89c0\u5ff5\uff1a\u5927\u6578\u64da\u3001ML\u3001\u7a0b\u5f0f\u8a2d\u8a08\u8207\u5f71\u50cf\u8fa8\u8b58\u539f\u7406\u3002\",\r\n items: [\"\u5927\u6578\u64da\u5206\u6790\u539f\u7406\",\"\u4eba\u5de5\u667a\u6167\u8207\u6a5f\u5668\u5b78\u7fd2\u539f\u7406\",\"AI\u7a0b\u5f0f\u8a2d\u8a08\u539f\u7406\",\"AI\u5f71\u50cf\u8fa8\u8b58\u539f\u7406\"],\r\n color: \"#B06FE0\"\r\n },\r\n {\r\n key: \"integration\",\r\n title: \"AI\u61c9\u7528\u6574\u5408\u8207\u5c08\u984c\u88fd\u4f5c\",\r\n desc: \"\u7cfb\u7d71\u67b6\u69cb\u5230\u5c08\u984c\uff1a\u4e32\u63a5\u6574\u9ad4\u61c9\u7528\u3001\u9032\u968e\u61c9\u7528\u8207\u6210\u679c\u8a55\u91cf\u3002\",\r\n items: [\"\u751f\u6210\u5f0fAI\u65bc\u7522\u696d\u8207\u9032\u968e\u61c9\u7528\",\"\u7d9c\u5408\u8a55\u91cf\",\"\u5c08\u984c\u88fd\u4f5c\u5be6\u52d9\",\"AI\u61c9\u7528\u6574\u9ad4\u7cfb\u7d71\u67b6\u69cb\"],\r\n color: \"#6F4AA3\"\r\n },\r\n {\r\n key: \"career\",\r\n title: \"\u8077\u5834\u5c31\u696d\u8207\u8077\u80fd\u767c\u5c55\",\r\n desc: \"\u5c31\u696d\u5c0e\u5411\uff1a\u8da8\u52e2\u3001\u5c65\u6b77\u3001\u6c42\u8077\u6280\u5de7\u3001\u5a92\u5408\u8207\u8f14\u5c0e\u3002\",\r\n items: [\"\u5c31\u696d\u5e02\u5834\u8da8\u52e2\u5206\u6790\",\"\u6c42\u8077\u6280\u5de7\",\"\u5c65\u6b77\u64b0\u5beb\",\"\u5c31\u696d\u8f14\u5c0e\u8207\u4f01\u696d\u5a92\u5408\"],\r\n color: \"#9B6EC4\"\r\n }\r\n ];\r\n\r\n const svg = document.getElementById(\"outlinePie\");\r\n const g = document.getElementById(\"outlinePieSlices\");\r\n const legend = document.getElementById(\"outlineLegend\");\r\n const titleEl = document.getElementById(\"detailTitle\");\r\n const descEl = document.getElementById(\"detailDesc\");\r\n const cardsEl = document.getElementById(\"detailCards\");\r\n\r\n if(!svg || !g || !legend || !titleEl || !descEl || !cardsEl) return;\r\n\r\n const cx = 260, cy = 260;\r\n const outerR = 210;\r\n const innerR = 120;\r\n const gapDeg = 2.2;\r\n const explode = 18;\r\n\r\n const deg2rad = d => (d * Math.PI) \/ 180;\r\n const polar = (r, angDeg) => {\r\n const a = deg2rad(angDeg);\r\n return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };\r\n };\r\n\r\n function donutPath(startDeg, endDeg){\r\n const p1 = polar(outerR, startDeg);\r\n const p2 = polar(outerR, endDeg);\r\n const p3 = polar(innerR, endDeg);\r\n const p4 = polar(innerR, startDeg);\r\n const largeArc = (endDeg - startDeg) > 180 ? 1 : 0;\r\n\r\n return [\r\n `M ${p1.x} ${p1.y}`,\r\n `A ${outerR} ${outerR} 0 ${largeArc} 1 ${p2.x} ${p2.y}`,\r\n `L ${p3.x} ${p3.y}`,\r\n `A ${innerR} ${innerR} 0 ${largeArc} 0 ${p4.x} ${p4.y}`,\r\n \"Z\"\r\n ].join(\" \");\r\n }\r\n\r\n function midAngle(startDeg, endDeg){ return (startDeg + endDeg) \/ 2; }\r\n\r\n function renderCards(d){\r\n cardsEl.innerHTML = \"\";\r\n const frag = document.createDocumentFragment();\r\n\r\n d.items.forEach((t, idx) => {\r\n const card = document.createElement(\"div\");\r\n card.className = \"outline-item-card\";\r\n card.innerHTML = `\r\n <div class=\"outline-item-top\">\r\n <div class=\"outline-item-left\">\r\n <span class=\"outline-item-dot\" style=\"background:${d.color}\"><\/span>\r\n <div class=\"outline-item-title\">${t}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n frag.appendChild(card);\r\n\r\n requestAnimationFrame(() => {\r\n setTimeout(() => card.classList.add(\"is-in\"), idx * 60);\r\n });\r\n });\r\n\r\n cardsEl.appendChild(frag);\r\n }\r\n\r\n function setActive(key){\r\n const slices = Array.from(g.querySelectorAll(\".slice\"));\r\n slices.forEach(s => {\r\n const isActive = s.dataset.key === key;\r\n s.classList.toggle(\"is-active\", isActive);\r\n s.classList.toggle(\"is-dim\", key && !isActive);\r\n\r\n const ang = Number(s.dataset.mid);\r\n if(isActive){\r\n const tx = Math.cos(deg2rad(ang)) * explode;\r\n const ty = Math.sin(deg2rad(ang)) * explode;\r\n s.style.transform = `translate(${tx}px, ${ty}px)`;\r\n }else{\r\n s.style.transform = \"translate(0px, 0px)\";\r\n }\r\n });\r\n\r\n Array.from(legend.querySelectorAll(\".legend-item\")).forEach(li => {\r\n const isActive = li.dataset.key === key;\r\n li.style.transform = isActive ? \"translateY(-2px)\" : \"\";\r\n li.style.boxShadow = isActive ? \"0 14px 36px rgba(107,74,138,0.16)\" : \"\";\r\n li.style.borderColor = isActive ? \"rgba(155,110,196,0.35)\" : \"rgba(155,110,196,0.18)\";\r\n });\r\n\r\n const d = data.find(x => x.key === key);\r\n if(!d) return;\r\n\r\n titleEl.textContent = d.title;\r\n descEl.textContent = d.desc;\r\n renderCards(d);\r\n }\r\n\r\n const total = data.length;\r\n const sliceDeg = 360 \/ total;\r\n let start = -60;\r\n\r\n data.forEach(d => {\r\n const s = start + gapDeg \/ 2;\r\n const e = start + sliceDeg - gapDeg \/ 2;\r\n const mid = midAngle(s, e);\r\n\r\n const slice = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"g\");\r\n slice.classList.add(\"slice\");\r\n slice.dataset.key = d.key;\r\n slice.dataset.mid = String(mid);\r\n slice.setAttribute(\"tabindex\", \"0\");\r\n slice.setAttribute(\"role\", \"button\");\r\n slice.setAttribute(\"aria-label\", d.title);\r\n\r\n const path = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\r\n path.setAttribute(\"d\", donutPath(s, e));\r\n path.setAttribute(\"fill\", d.color);\r\n path.setAttribute(\"opacity\", \"0.98\");\r\n path.setAttribute(\"stroke\", \"rgba(255,255,255,0.28)\");\r\n path.setAttribute(\"stroke-width\", \"2\");\r\n\r\n const labelPos = polar((outerR + innerR) \/ 2, mid);\r\n\r\n const label = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\r\n label.classList.add(\"slice-label\");\r\n label.setAttribute(\"x\", labelPos.x);\r\n label.setAttribute(\"y\", labelPos.y);\r\n label.setAttribute(\"text-anchor\", \"middle\");\r\n label.setAttribute(\"dominant-baseline\", \"middle\");\r\n\r\n let rot = mid + 90;\r\n const normalized = ((rot % 360) + 360) % 360;\r\n if(normalized > 90 && normalized < 270) rot += 180;\r\n label.setAttribute(\"transform\", `rotate(${rot} ${labelPos.x} ${labelPos.y})`);\r\n\r\n const parts = d.title.split(\"\u8207\");\r\n const lines = parts.length === 2 ? [parts[0] + \"\u8207\", parts[1]] : [d.title];\r\n const lineHeight = 18;\r\n const startDy = -((lines.length - 1) * lineHeight) \/ 2;\r\n\r\n lines.forEach((text, i) => {\r\n const tspan = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"tspan\");\r\n tspan.setAttribute(\"x\", labelPos.x);\r\n tspan.setAttribute(\"dy\", i === 0 ? String(startDy) : String(lineHeight));\r\n tspan.textContent = text;\r\n label.appendChild(tspan);\r\n });\r\n\r\n slice.appendChild(path);\r\n slice.appendChild(label);\r\n g.appendChild(slice);\r\n\r\nconst activate = () => setActive(d.key);\r\n\r\n\/\/ \u2705 \u684c\u6a5f\uff1a\u6ed1\u9f20\u9760\u8fd1\u5c31\u5c55\u958b\uff08pointerenter \u6bd4 mouseenter \u66f4\u901a\u7528\uff09\r\nslice.addEventListener(\"pointerenter\", (ev) => {\r\n \/\/ \u53ea\u5c0d\u300c\u6ed1\u9f20\u300d\u7684 hover \u89f8\u767c\uff08\u907f\u514d\u89f8\u63a7\u624b\u6307\u78b0\u5230\u4e5f\u4e00\u76f4\u8df3\uff09\r\n if (ev.pointerType === \"mouse\") activate();\r\n});\r\n\r\n\/\/ \u2705 \u9375\u76e4\u64cd\u4f5c\uff1a\u4fdd\u7559\u53ef\u53ca\u6027\r\nslice.addEventListener(\"focusin\", activate);\r\nslice.addEventListener(\"keydown\", (ev) => {\r\n if (ev.key === \"Enter\" || ev.key === \" \") {\r\n ev.preventDefault();\r\n activate();\r\n }\r\n});\r\n\r\n\/\/ \u2705 \u89f8\u63a7\uff1a\u4ecd\u4fdd\u7559\u9ede\u64ca\r\nslice.addEventListener(\"click\", activate);\r\n\r\n start += sliceDeg;\r\n });\r\n\r\n data.forEach(d => {\r\n const li = document.createElement(\"div\");\r\n li.className = \"legend-item\";\r\n li.dataset.key = d.key;\r\n li.innerHTML = `\r\n <div class=\"legend-dot\" style=\"background:${d.color};\"><\/div>\r\n <div class=\"legend-text\">\r\n <div class=\"legend-name\">${d.title}<\/div>\r\n <\/div>\r\n `;\r\n li.addEventListener(\"click\", () => setActive(d.key));\r\n legend.appendChild(li);\r\n });\r\n\r\n setActive(data[0].key);\r\n })();\r\n <\/script>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"competition2025","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3670"}],"collection":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3670"}],"version-history":[{"count":3,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3670\/revisions"}],"predecessor-version":[{"id":3705,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3670\/revisions\/3705"}],"wp:attachment":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3670,"date":"2026-01-29T18:21:45","date_gmt":"2026-01-29T10:21:45","guid":{"rendered":"https:\/\/phpweb2.nutn.edu.tw\/ilt\/wordpress\/?page_id=3670"},"modified":"2026-01-30T23:10:16","modified_gmt":"2026-01-30T15:10:16","slug":"ai%e6%99%ba%e6%85%a7%e6%87%89%e7%94%a8%e7%94%a2%e6%a5%ad%e4%ba%ba%e6%89%8d%e5%9f%b9%e8%a8%93%e7%8f%ad%e7%ac%ac02%e6%9c%9f","status":"publish","type":"page","link":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/?page_id=3670","title":{"rendered":"AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c02\u671f"},"content":{"rendered":"\r\n\r\n\r\n \r\n \r\n \u8077\u524d\u8a13\u7df4\u8ab2\u7a0b - AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c02\u671f<\/title>\r\n\r\n <style>\r\n #ai-training-container,\r\n #ai-training-container * { margin: 0; padding: 0; box-sizing: border-box; }\r\n\r\n #ai-training-container{\r\n font-family: 'Microsoft JhengHei','Segoe UI',Tahoma,Geneva,Verdana,sans-serif !important;\r\n line-height: 1.6 !important;\r\n color: #333 !important;\r\n background: linear-gradient(135deg,#f0e6f9 0%,#e6d5f5 100%) !important;\r\n min-height: 100vh !important;\r\n font-weight: bold !important;\r\n }\r\n\r\n \/* \u9802\u90e8\u5c0e\u89bd\u5217 *\/\r\n #ai-training-container nav{\r\n background: linear-gradient(90deg,#6b3e9d 0%,#5a2e8a 100%) !important;\r\n padding: 1rem 0 !important;\r\n position: sticky !important;\r\n top: 0 !important;\r\n z-index: 100 !important;\r\n box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;\r\n }\r\n #ai-training-container nav .container{\r\n max-width: 1200px !important;\r\n margin: 0 auto !important;\r\n padding: 0 20px !important;\r\n display: flex !important;\r\n justify-content: space-between !important;\r\n align-items: center !important;\r\n }\r\n #ai-training-container nav .logo{\r\n font-size: 1.5rem !important;\r\n font-weight: bold !important;\r\n color: white !important;\r\n }\r\n #ai-training-container nav ul{\r\n display: flex !important;\r\n list-style: none !important;\r\n gap: 2rem !important;\r\n }\r\n #ai-training-container nav a{\r\n color: white !important;\r\n text-decoration: none !important;\r\n cursor: pointer !important;\r\n font-weight: 500 !important;\r\n transition: 0.3s !important;\r\n }\r\n #ai-training-container nav a:hover{ color: #fff3e0 !important; }\r\n\r\n \/* \u901a\u7528\u5bb9\u5668 *\/\r\n #ai-training-container .container{\r\n max-width: 1200px !important;\r\n margin: 0 auto !important;\r\n padding: 0 20px !important;\r\n }\r\n\r\n \/* \u6a19\u984c\u6a23\u5f0f *\/\r\n #ai-training-container h1,#ai-training-container h2,#ai-training-container h3{ color:#6b4a8a !important; }\r\n #ai-training-container h1{ font-size:2.5rem !important; margin-bottom:1rem !important; }\r\n #ai-training-container h2{\r\n font-size:2rem !important;\r\n margin-bottom:1rem !important;\r\n border-bottom:3px solid #9b6ec4 !important;\r\n padding-bottom:0.5rem !important;\r\n }\r\n #ai-training-container h3{ font-size:1.3rem !important; margin-top:1.5rem !important; margin-bottom:0.8rem !important; }\r\n\r\n \/* \u5340\u584a *\/\r\n #ai-training-container section{\r\n background: white !important;\r\n margin: 1rem 0 !important;\r\n padding: 1.5rem !important;\r\n border-radius: 10px !important;\r\n box-shadow: 0 4px 15px rgba(155,110,196,0.2) !important;\r\n }\r\n\r\n \/* ===========================\r\n \u2705 HERO\uff08\u788e\u7247 + \u7c92\u5b50 + \u5f37\u8ffd\u8e64\uff09\r\n =========================== *\/\r\n #ai-training-container .hero{\r\n position: relative !important;\r\n overflow: hidden !important;\r\n color: white !important;\r\n padding: 3rem 0 !important;\r\n text-align: center !important;\r\n margin-bottom: 1rem !important;\r\n\r\n --mx: 50%;\r\n --my: 45%;\r\n --wx: 0px;\r\n --wy: 0px;\r\n --wind: 0;\r\n --glow: 0;\r\n --tiltX: 0deg;\r\n --tiltY: 0deg;\r\n }\r\n\r\n \/* \u5e95\u5c64\uff1a\u6f38\u8b8a\u683c\u5b50 + \u6d41\u5149 *\/\r\n #ai-training-container .hero::before{\r\n content:\"\" !important;\r\n position:absolute !important;\r\n inset:0 !important;\r\n pointer-events:none !important;\r\n z-index: 0 !important;\r\n\r\n background:\r\n radial-gradient(900px circle at 18% 22%, rgba(255,255,255,0.18), rgba(255,255,255,0) 58%),\r\n radial-gradient(740px circle at 82% 28%, rgba(255,255,255,0.12), rgba(255,255,255,0) 62%),\r\n linear-gradient(135deg, #6b3e9d 0%, #5a2e8a 40%, #4a1f7a 100%),\r\n\r\n repeating-linear-gradient(\r\n 0deg,\r\n rgba(255,255,255,0.12) 0px,\r\n rgba(255,255,255,0.12) 1px,\r\n rgba(255,255,255,0.00) 1px,\r\n rgba(255,255,255,0.00) 54px\r\n ),\r\n repeating-linear-gradient(\r\n 90deg,\r\n rgba(255,255,255,0.12) 0px,\r\n rgba(255,255,255,0.12) 1px,\r\n rgba(255,255,255,0.00) 1px,\r\n rgba(255,255,255,0.00) 54px\r\n ),\r\n\r\n repeating-linear-gradient(\r\n 0deg,\r\n rgba(0,0,0,0.07) 0px,\r\n rgba(0,0,0,0.07) 1px,\r\n rgba(0,0,0,0.00) 1px,\r\n rgba(0,0,0,0.00) 108px\r\n ),\r\n repeating-linear-gradient(\r\n 90deg,\r\n rgba(0,0,0,0.07) 0px,\r\n rgba(0,0,0,0.07) 1px,\r\n rgba(0,0,0,0.00) 1px,\r\n rgba(0,0,0,0.00) 108px\r\n ),\r\n\r\n linear-gradient(115deg,\r\n rgba(255,255,255,0.00) 0%,\r\n rgba(255,255,255,0.10) 35%,\r\n rgba(255,255,255,0.00) 70%\r\n ) !important;\r\n\r\n background-size:\r\n auto, auto, auto,\r\n auto, auto,\r\n auto, auto,\r\n 220% 220% !important;\r\n\r\n background-position:\r\n 0 0,\r\n 0 0,\r\n 0 0,\r\n calc(var(--wx) * 0.18) calc(var(--wy) * 0.18),\r\n calc(var(--wx) * 0.18) calc(var(--wy) * 0.18),\r\n calc(var(--wx) * 0.10) calc(var(--wy) * 0.10),\r\n calc(var(--wx) * 0.10) calc(var(--wy) * 0.10),\r\n calc(50% + var(--wx) * 0.06) calc(20% + var(--wy) * 0.04) !important;\r\n\r\n filter: saturate(1.08) contrast(1.05) !important;\r\n animation: heroSheen 10s ease-in-out infinite alternate !important;\r\n }\r\n @keyframes heroSheen{\r\n from{ filter: saturate(1.06) contrast(1.03); }\r\n to{ filter: saturate(1.12) contrast(1.07); }\r\n }\r\n\r\n \/* \u4e0a\u5c64\u98a8\u5439\u8584\u7d17 *\/\r\n #ai-training-container .hero::after{\r\n content: \"\" !important;\r\n position: absolute !important;\r\n inset: -22% !important;\r\n pointer-events: none !important;\r\n z-index: 3 !important;\r\n\r\n background:\r\n repeating-linear-gradient(\r\n 135deg,\r\n rgba(255,255,255,0.10) 0px,\r\n rgba(255,255,255,0.10) 1px,\r\n rgba(255,255,255,0.00) 1px,\r\n rgba(255,255,255,0.00) 12px\r\n ),\r\n radial-gradient(760px circle at 82% 24%,\r\n rgba(255,255,255,0.08),\r\n rgba(255,255,255,0.00) 60%),\r\n radial-gradient(980px circle at 16% 18%,\r\n rgba(255,255,255,0.06),\r\n rgba(255,255,255,0.00) 65%) !important;\r\n\r\n transform:\r\n translate3d(calc(var(--wx) * 0.85), calc(var(--wy) * 0.55), 0)\r\n skewX(calc(var(--wind) * -3deg))\r\n rotate(calc(var(--wind) * -0.9deg)) !important;\r\n\r\n opacity: calc(0.10 + var(--glow) * 0.25) !important;\r\n filter: blur(calc(2px + var(--wind) * 2.6px)) !important;\r\n }\r\n\r\n \/* Canvas\uff08\u788e\u7247\uff09 *\/\r\n #ai-training-container #heroTriCanvas{\r\n position:absolute !important;\r\n inset:0 !important;\r\n width:100% !important;\r\n height:100% !important;\r\n pointer-events:none !important;\r\n z-index: 1 !important;\r\n opacity: 1 !important;\r\n mix-blend-mode: overlay !important;\r\n }\r\n\r\n \/* Canvas\uff08\u7c92\u5b50\uff09 *\/\r\n #ai-training-container #heroCanvas{\r\n position:absolute !important;\r\n inset:0 !important;\r\n width:100% !important;\r\n height:100% !important;\r\n pointer-events:none !important;\r\n z-index: 2 !important;\r\n opacity: 1 !important;\r\n mix-blend-mode: screen !important;\r\n filter: saturate(1.12) contrast(1.10) !important;\r\n }\r\n\r\n \/* Hero \u5167\u5bb9\u5c64 *\/\r\n #ai-training-container .hero .container{\r\n position: relative !important;\r\n z-index: 5 !important;\r\n transform-style: preserve-3d !important;\r\n will-change: transform !important;\r\n transform:\r\n translate3d(calc(var(--wx) * 0.16), calc(var(--wy) * 0.12), 0)\r\n rotateX(var(--tiltX))\r\n rotateY(var(--tiltY)) !important;\r\n transition: transform 160ms ease !important;\r\n }\r\n\r\n #ai-training-container .hero h1{\r\n color: white !important;\r\n font-size: 3rem !important;\r\n margin-bottom: 0.8rem !important;\r\n text-shadow: 0 10px 30px rgba(0,0,0,0.25) !important;\r\n letter-spacing: 0.02em !important;\r\n transform: translate3d(0,0,40px) !important;\r\n }\r\n #ai-training-container .hero p{\r\n font-size: 1.2rem !important;\r\n margin-bottom: 1.5rem !important;\r\n opacity: 0.95 !important;\r\n text-shadow: 0 6px 18px rgba(0,0,0,0.18) !important;\r\n transform: translate3d(0,0,26px) !important;\r\n }\r\n\r\n \/* CTA *\/\r\n #ai-training-container .cta-button{\r\n display:inline-flex !important;\r\n align-items:center !important;\r\n justify-content:center !important;\r\n gap:0.6rem !important;\r\n background: rgba(255,255,255,0.14) !important;\r\n color:white !important;\r\n padding:1rem 2.5rem !important;\r\n border:1px solid rgba(255,255,255,0.22) !important;\r\n border-radius:999px !important;\r\n font-size:1.08rem !important;\r\n cursor:pointer !important;\r\n transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease !important;\r\n font-weight:800 !important;\r\n text-decoration:none !important;\r\n box-shadow: 0 16px 40px rgba(0,0,0,0.18) !important;\r\n backdrop-filter: blur(10px) !important;\r\n -webkit-backdrop-filter: blur(10px) !important;\r\n transform: translate3d(0,0,20px) !important;\r\n user-select:none !important;\r\n }\r\n #ai-training-container .cta-button:hover{\r\n background: rgba(255,255,255,0.20) !important;\r\n box-shadow: 0 22px 60px rgba(0,0,0,0.22) !important;\r\n }\r\n #ai-training-container .cta-button .cta-inner{\r\n display:inline-flex !important;\r\n align-items:center !important;\r\n justify-content:center !important;\r\n will-change: transform !important;\r\n transition: transform 110ms ease !important;\r\n }\r\n\r\n \/* \u5831\u540d\u6309\u9215\u7279\u6b8a\u6d6e\u52d5\u6548\u679c *\/\r\n #enrollCta {\r\n transition: transform 300ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 300ms ease !important;\r\n }\r\n #enrollCta:hover {\r\n transform: translateY(-8px) !important;\r\n box-shadow: 0 16px 40px rgba(155, 110, 196, 0.4) !important;\r\n }\r\n\r\n \/* info grid *\/\r\n #ai-training-container .info-grid{\r\n display:grid !important;\r\n grid-template-columns: repeat(auto-fit,minmax(250px,1fr)) !important;\r\n gap: 1rem !important;\r\n margin-bottom: 1.5rem !important;\r\n }\r\n #ai-training-container .info-card{\r\n background: linear-gradient(135deg,#e3f2fd 0%,#bbdefb 100%) !important;\r\n padding: 1.5rem 1rem !important;\r\n border-radius: 8px !important;\r\n border-left: 4px solid #1976d2 !important;\r\n transition: transform 0.3s, box-shadow 0.3s !important;\r\n }\r\n #ai-training-container .info-card:hover{\r\n transform: translateY(-5px) !important;\r\n box-shadow: 0 8px 20px rgba(25,118,210,0.3) !important;\r\n }\r\n #ai-training-container .info-card h3{ margin-top:0 !important; }\r\n #ai-training-container .info-card .number{\r\n font-size: 2rem !important;\r\n color: #1565c0 !important;\r\n font-weight: bold !important;\r\n margin: 0.5rem 0 !important;\r\n }\r\n\r\n \/* \u8ab2\u7a0b\u512a\u52e2 *\/\r\n .advantages{\r\n display:grid;\r\n grid-template-columns: repeat(2,1fr);\r\n gap:1rem;\r\n }\r\n .advantage-item{\r\n background: linear-gradient(135deg,#e0f2f1 0%,#b2dfdb 100%);\r\n padding:1.5rem 1rem;\r\n border-radius:8px;\r\n text-align:center;\r\n transition: transform 0.3s;\r\n }\r\n .advantage-item:hover{ transform: scale(1.05); }\r\n .advantage-item .icon{ font-size:2.5rem; margin-bottom:1rem; }\r\n\r\n \/* \u806f\u7d61 *\/\r\n #ai-training-container .contact-info{\r\n background: linear-gradient(135deg,#f0e6f9 0%,#e8ddf2 100%) !important;\r\n padding: 1.5rem !important;\r\n border-radius: 8px !important;\r\n border-left: 4px solid #9b6ec4 !important;\r\n }\r\n #ai-training-container .contact-item{ margin:0.7rem 0 !important; padding:0.3rem 0 !important; }\r\n #ai-training-container .contact-item strong{ color:#9b6ec4 !important; }\r\n\r\n #ai-training-container .contact-item a.line-link{\r\n color:#fff !important;\r\n background:#00C300 !important;\r\n padding:0.25rem 0.6rem !important;\r\n border-radius:6px !important;\r\n text-decoration:none !important;\r\n font-weight:700 !important;\r\n box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;\r\n display:inline-block !important;\r\n transition: transform 0.12s ease, box-shadow 0.12s ease !important;\r\n cursor:pointer !important;\r\n }\r\n #ai-training-container .contact-item a.line-link:hover{\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 6px 18px rgba(0,0,0,0.2) !important;\r\n }\r\n #ai-training-container .contact-item a.line-link::before{ content:\"\ud83d\udd17 \" !important; }\r\n\r\n \/* \u8b49\u7167 *\/\r\n #ai-training-container .certificate-grid{\r\n display:grid !important;\r\n grid-template-columns: repeat(auto-fit,minmax(220px,1fr)) !important;\r\n gap:1rem !important;\r\n }\r\n #ai-training-container .certificate-card{\r\n background: linear-gradient(135deg,#fff3e0 0%,#ffe0b2 100%) !important;\r\n padding:1.5rem 1rem !important;\r\n border-radius:8px !important;\r\n border-top: 3px solid #ff9800 !important;\r\n text-align:center !important;\r\n }\r\n #ai-training-container .certificate-card .cert-icon{ font-size:2rem !important; margin-bottom:0.5rem !important; }\r\n\r\n \/* ======= \u8ab2\u7a0b\u5927\u7db1\uff1a\u4e92\u52d5\u5713\u9905\u5716 + \u5361\u7247\u6e05\u55ae ======= *\/\r\n #ai-training-container .outline-pie-wrap{\r\n display:grid !important;\r\n grid-template-columns: 1.05fr 0.95fr !important;\r\n gap: 1.6rem !important;\r\n align-items:start !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-card,\r\n #ai-training-container .outline-detail-card{\r\n background: rgba(255,255,255,0.78) !important;\r\n border: 1px solid rgba(155,110,196,0.18) !important;\r\n border-radius: 16px !important;\r\n box-shadow: 0 14px 40px rgba(107,74,138,0.12) !important;\r\n backdrop-filter: blur(10px) !important;\r\n -webkit-backdrop-filter: blur(10px) !important;\r\n overflow:hidden !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-header{\r\n display:flex !important;\r\n justify-content:space-between !important;\r\n align-items:center !important;\r\n padding: 1.2rem 1.2rem 0.8rem !important;\r\n }\r\n #ai-training-container .outline-pie-kicker{\r\n font-size:0.85rem !important;\r\n color: rgba(107,74,138,0.75) !important;\r\n letter-spacing:0.06em !important;\r\n }\r\n #ai-training-container .outline-pie-title{\r\n font-size:1.1rem !important;\r\n font-weight:800 !important;\r\n color:#5e3f7d !important;\r\n margin-top:0.2rem !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-stage{\r\n padding: 0.8rem 1.2rem 0.2rem !important;\r\n display:flex !important;\r\n justify-content:center !important;\r\n }\r\n #ai-training-container .outline-pie-svg{\r\n width: 100% !important;\r\n max-width: 520px !important;\r\n height: auto !important;\r\n }\r\n #ai-training-container .outline-pie-base{ fill: rgba(240,230,249,0.55) !important; }\r\n\r\n #ai-training-container .slice{\r\n cursor:pointer !important;\r\n transform-origin: 260px 260px !important;\r\n transition:\r\n transform 320ms cubic-bezier(0.2,0.9,0.2,1),\r\n filter 320ms cubic-bezier(0.2,0.9,0.2,1),\r\n opacity 220ms ease !important;\r\n filter: drop-shadow(0 10px 18px rgba(0,0,0,0.1)) !important;\r\n outline:none !important;\r\n }\r\n #ai-training-container .slice:hover{\r\n filter: drop-shadow(0 14px 24px rgba(0,0,0,0.16)) !important;\r\n }\r\n #ai-training-container .slice.is-dim{ opacity: 0.55 !important; }\r\n #ai-training-container .slice.is-active{ filter: url(#softShadow) !important; }\r\n\r\n \/* \u6247\u5f62\u6587\u5b57\uff1a\u7f6e\u4e2d + \u53ef\u65cb\u8f49\u95b1\u8b80 *\/\r\n #ai-training-container .slice-label{\r\n font-size: 15px !important;\r\n font-weight: 900 !important;\r\n fill: rgba(255,255,255,0.95) !important;\r\n letter-spacing: 0.03em !important;\r\n pointer-events: none !important;\r\n\r\n dominant-baseline: middle !important;\r\n alignment-baseline: middle !important;\r\n }\r\n\r\n #ai-training-container .outline-pie-center-title{\r\n font-size: 22px !important;\r\n font-weight: 900 !important;\r\n fill: #5e3f7d !important;\r\n }\r\n #ai-training-container .outline-pie-hole{\r\n fill: rgba(255,255,255,0.92) !important;\r\n stroke: rgba(155,110,196,0.18) !important;\r\n stroke-width: 2 !important;\r\n }\r\n\r\n #ai-training-container .outline-legend{\r\n display:grid !important;\r\n grid-template-columns: 1fr 1fr !important;\r\n gap: 0.8rem !important;\r\n padding: 0.8rem 1.2rem 1.2rem !important;\r\n }\r\n #ai-training-container .legend-item{\r\n display:flex !important;\r\n align-items:center !important;\r\n gap:0.65rem !important;\r\n padding:0.75rem 0.85rem !important;\r\n border-radius:12px !important;\r\n border: 1px solid rgba(155,110,196,0.18) !important;\r\n background: rgba(255,255,255,0.75) !important;\r\n cursor:pointer !important;\r\n transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;\r\n user-select:none !important;\r\n }\r\n #ai-training-container .legend-item:hover{\r\n transform: translateY(-2px) !important;\r\n box-shadow: 0 10px 26px rgba(107,74,138,0.12) !important;\r\n }\r\n #ai-training-container .legend-dot{\r\n width:12px !important; height:12px !important;\r\n border-radius:50% !important;\r\n box-shadow: 0 6px 14px rgba(0,0,0,0.12) !important;\r\n }\r\n #ai-training-container .legend-text{\r\n display:flex !important;\r\n flex-direction:column !important;\r\n gap:0.1rem !important;\r\n }\r\n #ai-training-container .legend-name{\r\n font-weight:900 !important;\r\n color:#5e3f7d !important;\r\n font-size:0.98rem !important;\r\n }\r\n\r\n \/* \u53f3\u5074\u5361\u7247\u6e05\u55ae *\/\r\n #ai-training-container .outline-detail-card{ padding: 1.2rem !important; }\r\n\r\n #ai-training-container .outline-detail-title{\r\n margin-top:0 !important;\r\n font-size:1.35rem !important;\r\n font-weight:900 !important;\r\n color:#5e3f7d !important;\r\n }\r\n #ai-training-container .outline-detail-desc{\r\n margin-top:0.35rem !important;\r\n color: rgba(51,51,51,0.78) !important;\r\n }\r\n\r\n #ai-training-container .outline-card-list{\r\n margin-top:1rem !important;\r\n display:grid !important;\r\n grid-template-columns: 1fr !important;\r\n gap:0.9rem !important;\r\n }\r\n #ai-training-container .outline-item-card{\r\n border-radius:16px !important;\r\n border: 1px solid rgba(155,110,196,0.18) !important;\r\n background: rgba(255,255,255,0.82) !important;\r\n overflow:hidden !important;\r\n box-shadow: 0 10px 26px rgba(107,74,138,0.08) !important;\r\n transform: translateY(8px) !important;\r\n opacity: 0 !important;\r\n transition:\r\n transform 380ms cubic-bezier(0.2,0.9,0.2,1),\r\n opacity 300ms ease,\r\n box-shadow 240ms ease,\r\n border-color 240ms ease !important;\r\n }\r\n #ai-training-container .outline-item-card.is-in{\r\n transform: translateY(0) !important;\r\n opacity: 1 !important;\r\n }\r\n #ai-training-container .outline-item-top{\r\n padding:0.95rem 1rem 0.85rem !important;\r\n display:flex !important;\r\n align-items:center !important;\r\n justify-content:space-between !important;\r\n gap:0.9rem !important;\r\n }\r\n #ai-training-container .outline-item-left{\r\n display:flex !important;\r\n align-items:center !important;\r\n gap:0.75rem !important;\r\n min-width:0 !important;\r\n }\r\n #ai-training-container .outline-item-dot{\r\n width:12px !important;\r\n height:12px !important;\r\n border-radius:999px !important;\r\n flex: 0 0 12px !important;\r\n box-shadow: 0 8px 18px rgba(0,0,0,0.12) !important;\r\n }\r\n #ai-training-container .outline-item-title{\r\n font-weight:900 !important;\r\n color:#5e3f7d !important;\r\n line-height:1.3 !important;\r\n white-space:nowrap !important;\r\n overflow:hidden !important;\r\n text-overflow: ellipsis !important;\r\n }\r\n\r\n \/* Footer *\/\r\n #ai-training-container footer{\r\n background: linear-gradient(90deg,#6b3e9d 0%,#5a2e8a 100%) !important;\r\n color:white !important;\r\n text-align:center !important;\r\n padding:1.5rem !important;\r\n margin-top:2rem !important;\r\n }\r\n\r\n \/* RWD *\/\r\n @media (max-width: 980px){\r\n #ai-training-container .outline-pie-wrap{ grid-template-columns: 1fr !important; }\r\n #ai-training-container .outline-legend{ grid-template-columns: 1fr !important; }\r\n }\r\n @media (max-width: 768px){\r\n nav ul{ gap: 1rem; font-size: 0.9rem; }\r\n #ai-training-container h1{ font-size: 1.8rem !important; }\r\n #ai-training-container .hero h1{ font-size: 2rem !important; }\r\n #ai-training-container h2{ font-size: 1.5rem !important; }\r\n #ai-training-container section{ padding: 1.5rem; margin: 1rem 0; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n #ai-training-container #heroTriCanvas,\r\n #ai-training-container #heroCanvas{ display:none !important; }\r\n #ai-training-container .hero::before{ animation:none !important; }\r\n #ai-training-container .hero::after{ display:none !important; }\r\n #ai-training-container .hero .container{ transform:none !important; }\r\n #ai-training-container .cta-button{ transition:none !important; }\r\n #ai-training-container .cta-button .cta-inner{ transition:none !important; }\r\n #ai-training-container .slice,\r\n #ai-training-container .legend-item,\r\n #ai-training-container .outline-item-card{ transition:none !important; }\r\n }\r\n\r\n @media (hover: none){\r\n #ai-training-container #heroTriCanvas{ opacity: 0.55 !important; }\r\n #ai-training-container #heroCanvas{ opacity: 0.55 !important; }\r\n #ai-training-container .hero::after{ display:none !important; }\r\n #ai-training-container .hero .container{ transform:none !important; }\r\n }\r\n\r\n#ai-training-container a,\r\n#ai-training-container button{\r\n transition: all 0.3s ease;\r\n}\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n <div id=\"ai-training-container\">\r\n \r\n <nav>\r\n <div class=\"container\">\r\n <div class=\"logo\">\ud83c\udf93 \u8077\u524d\u8a13\u7df4\u8ab2\u7a0b<\/div>\r\n <ul>\r\n <li><a onclick=\"scrollToSection('overview')\" style=\"font-weight:bold\">\u8ab2\u7a0b\u6982\u8ff0\u8207\u5927\u7db1<\/a><\/li>\r\n <li><a onclick=\"scrollToSection('advantages')\" style=\"font-weight:bold\">\u8ab2\u7a0b\u512a\u52e2<\/a><\/li>\r\n <li><a onclick=\"scrollToSection('contact')\" style=\"font-weight:bold\">\u806f\u7d61\u6211\u5011<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/nav>\r\n\r\n \r\n <div class=\"hero\" aria-label=\"\u8ab2\u7a0b\u4e3b\u8996\u89ba\u6a19\u984c\u5340\u584a\">\r\n <canvas id=\"heroTriCanvas\" aria-hidden=\"true\"><\/canvas>\r\n <canvas id=\"heroCanvas\" aria-hidden=\"true\"><\/canvas>\r\n\r\n <div class=\"container\">\r\n <h1>AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c02\u671f<\/h1>\r\n\r\n \u00a0 \u00a0 \u00a0 \u00a0\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"container\">\r\n \r\n <section id=\"overview\">\r\n <h2>\ud83d\udcda \u8ab2\u7a0b\u6982\u8ff0\u8207\u5927\u7db1<\/h2>\r\n \r\n \r\n <div style=\"display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap:1.2rem; margin-bottom:2rem; text-align:center;\">\r\n <div style=\"padding:1.5rem; background:linear-gradient(135deg,#f0e6f9 0%,#e8ddf2 100%); border-radius:12px; border-left:4px solid #9b6ec4;\">\r\n <div style=\"font-size:0.9rem; color:#9b6ec4; font-weight:bold; margin-bottom:0.5rem;\">\u8ab2\u7a0b\u7e3d\u6642\u6578<\/div>\r\n <div style=\"font-size:2.5rem; color:#6b4a8a; font-weight:bold; margin:0.5rem 0;\">255<\/div>\r\n <div style=\"font-size:0.95rem; color:#666;\">\u5b8c\u6574\u7684\u8a13\u7df4\u8ab2\u7a0b\uff0c\u5e6b\u52a9\u60a8\u5168\u9762\u638c\u63e1\u5c08\u696d\u6280\u80fd<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"outline-pie-wrap\">\r\n \r\n <div class=\"outline-pie-card\">\r\n <div class=\"outline-pie-header\">\r\n <div>\r\n <div class=\"outline-pie-kicker\">\u8ab2\u7a0b\u7d50\u69cb\u7e3d\u89bd<\/div>\r\n <div class=\"outline-pie-title\">\u9ede\u64ca\u5340\u584a\u67e5\u770b\u7d30\u9805<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"outline-pie-stage\">\r\n <svg id=\"outlinePie\" viewBox=\"0 0 520 520\" class=\"outline-pie-svg\" role=\"group\" aria-label=\"\u8ab2\u7a0b\u5927\u7db1\u4e92\u52d5\u5713\u9905\u5716\">\r\n <defs>\r\n <filter id=\"softShadow\" x=\"-30%\" y=\"-30%\" width=\"160%\" height=\"160%\">\r\n <feDropShadow dx=\"0\" dy=\"10\" stdDeviation=\"10\" flood-color=\"rgba(0,0,0,0.18)\" \/>\r\n <\/filter>\r\n <radialGradient id=\"glassGlow\" cx=\"35%\" cy=\"30%\" r=\"70%\">\r\n <stop offset=\"0%\" stop-color=\"rgba(255,255,255,0.85)\" \/>\r\n <stop offset=\"45%\" stop-color=\"rgba(255,255,255,0.12)\" \/>\r\n <stop offset=\"100%\" stop-color=\"rgba(255,255,255,0)\" \/>\r\n <\/radialGradient>\r\n <\/defs>\r\n\r\n <circle cx=\"260\" cy=\"260\" r=\"210\" class=\"outline-pie-base\"><\/circle>\r\n <g id=\"outlinePieSlices\"><\/g>\r\n\r\n \r\n <g class=\"outline-pie-center\">\r\n <circle cx=\"260\" cy=\"260\" r=\"120\" class=\"outline-pie-hole\"><\/circle>\r\n <circle cx=\"260\" cy=\"260\" r=\"120\" fill=\"url(#glassGlow)\" opacity=\"0.9\"><\/circle>\r\n <text x=\"260\" y=\"260\" text-anchor=\"middle\" dominant-baseline=\"middle\" class=\"outline-pie-center-title\">\u8ab2\u7a0b\u5927\u7db1<\/text>\r\n <\/g>\r\n <\/svg>\r\n <\/div>\r\n\r\n <div id=\"outlineLegend\" class=\"outline-legend\" aria-label=\"\u8ab2\u7a0b\u5927\u7db1\u5716\u4f8b\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"outline-detail-card\">\r\n <div class=\"outline-detail-head\">\r\n <div class=\"outline-detail-title\" id=\"detailTitle\">\u2014<\/div>\r\n <div class=\"outline-detail-desc\" id=\"detailDesc\">\u9ede\u64ca\u5713\u9905\u5716\u4efb\u4e00\u5340\u584a\uff0c\u53f3\u5074\u6703\u9806\u6ed1\u986f\u793a\u8ab2\u7a0b\u7d30\u9805\u5361\u7247\u3002<\/div>\r\n <\/div>\r\n <div class=\"outline-card-list\" id=\"detailCards\" aria-live=\"polite\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"advantages\">\r\n <h2>\ud83c\udf1f \u8ab2\u7a0b\u512a\u52e2<\/h2>\r\n <div class=\"advantages\">\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83d\udc68\u200d\ud83c\udfeb<\/div><h3>\u5c08\u696d\u8b1b\u5e2b<\/h3><p>\u696d\u754c\u8cc7\u6df1\u5c08\u696d\u8b1b\u5e2b\u6388\u8ab2\uff0c\u64c1\u6709\u8c50\u5bcc\u7684\u5be6\u52d9\u7d93\u9a57\u8207\u6559\u5b78\u7d93\u9a57<\/p><\/div>\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83d\udcbc<\/div><h3>\u5c31\u696d\u6a5f\u6703<\/h3><p>\u8207\u591a\u5bb6\u77e5\u540d\u4f01\u696d\u5408\u4f5c\uff0c\u63d0\u4f9b\u512a\u5148\u5c31\u696d\u63a8\u85a6\u6a5f\u6703<\/p><\/div>\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83d\udcca<\/div><h3>\u5be6\u52d9\u6559\u5b78<\/h3><p>\u63a1\u7528\u5be6\u969b\u6848\u4f8b\u8207\u5c08\u6848\u5be6\u4f5c\uff0c\u5feb\u901f\u63d0\u5347\u8077\u5834\u7af6\u722d\u529b<\/p><\/div>\r\n <div class=\"advantage-item\"><div class=\"icon\">\ud83c\udfc6<\/div><h3>\u8b49\u7167\u8a8d\u8b49<\/h3><p>\u8ab2\u7a0b\u7d50\u675f\u5f8c\u5354\u52a9\u8003\u53d6\u5c08\u696d\u8b49\u7167<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section>\r\n <h2>\ud83c\udf96\ufe0f \u5c08\u696d\u8b49\u7167<\/h2>\r\n <div class=\"certificate-grid\">\r\n <div class=\"certificate-card\"><div class=\"cert-icon\">\ud83d\udcdc<\/div><h3>\u5c08\u696d\u8b49\u7167<\/h3><p>iPAS AI \u61c9\u7528\u898f\u5283\u5e2b\uff08\u521d\u7d1a\uff09<\/p><\/div>\r\n <div class=\"certificate-card\"><div class=\"cert-icon\">\ud83c\udfc5<\/div><h3>\u6280\u80fd\u8a8d\u8b49<\/h3><p>\u751f\u6210\u5f0fAI\u80fd\u529b\u8a8d\u8b49<\/p><\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section style=\"background: linear-gradient(135deg,#f0e6f9 0%,#e8ddf2 100%); border: 2px solid #9b6ec4;\">\r\n <h2>\ud83d\udcdd \u5831\u540d\u8cc7\u8a0a<\/h2>\r\n <div class=\"info-grid\">\r\n <div class=\"info-card\" style=\"background:white;\">\r\n <h3>\u5831\u540d\u5c0d\u8c61<\/h3>\r\n <ul style=\"list-style:none; padding-left:0;\">\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>15\u6b72\u4ee5\u4e0a\u4e4b\u5931\u696d\u8005\r\n <\/li>\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>\u5c0d\u8a72\u8077\u696d\u9818\u57df\u6709\u8208\u8da3\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"info-card\" style=\"background:white;\">\r\n <h3>\u653f\u5e9c\u88dc\u52a9<\/h3>\r\n <ul style=\"list-style:none; padding-left:0;\">\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>\u7b26\u5408\u88dc\u52a9\u8cc7\u683c\u514d\u5b78\u8cbb\uff0b\u8077\u8a13\u751f\u6d3b\u6d25\u8cbc\r\n <\/li>\r\n <li style=\"padding:0.6rem 0; padding-left:2rem; position:relative;\">\r\n <span style=\"position:absolute; left:0; color:#9b6ec4; font-weight:bold;\">\u2713<\/span>\u9752\u5e74\u5b78\u7fd2\u734e\u52f5\u91d1\r\n <\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/section>\r\n\r\n \r\n <section style=\"text-align:center; padding:2rem;\">\r\n <h2>\ud83d\udce2 \u8ab2\u7a0b\u6d77\u5831<\/h2>\r\n <div style=\"display:flex; justify-content:center; align-items:center; gap:2rem; flex-wrap:wrap; margin-top:1.5rem;\">\r\n <div style=\"flex:0 1 720px; min-width:320px; max-width:720px;\">\r\n <img decoding=\"async\" src=\"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/wp-content\/uploads\/2026\/01\/V6.png\" alt=\"\u8ab2\u7a0b\u6d77\u58311\"\r\n style=\"width:100%; max-width:720px; height:auto; border-radius:12px; box-shadow:0 6px 22px rgba(155,110,196,0.25); cursor:pointer; transition:transform 0.25s;\"\r\n onmouseover=\"this.style.transform='scale(1.03)'\" onmouseout=\"this.style.transform='scale(1)'\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section id=\"contact\">\r\n <h2>\ud83d\udcde \u806f\u7d61\u65b9\u5f0f<\/h2>\r\n <div class=\"contact-info\">\r\n <div class=\"contact-item\"><strong>\ud83d\udcde \u96fb\u8a71\uff1a<\/strong> <a href=\"tel:06-2130019\" style=\"color:#666; text-decoration:none;\">06-2130019<\/a><\/div>\r\n <div class=\"contact-item\"><strong>\ud83d\udce7 \u4fe1\u7bb1\uff1a<\/strong> <a href=\"mailto:aittc.nutn@gmail.com\" style=\"color:#666; text-decoration:none;\">aittc.nutn@gmail.com<\/a><\/div>\r\n <div class=\"contact-item\"><strong>\ud83c\udfe2 \u5730\u5740\uff1a<\/strong>\u81fa\u5357\u5927\u5b78AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede\uff08\u601d\u57ce\u6a13F104\u5ba4\uff09<\/div>\r\n <div class=\"contact-item\"><strong>\u23f0 \u54a8\u8a62\u6642\u9593\uff1a<\/strong>\u9031\u4e00\u81f3\u9031\u4e94 08:00-17:30<\/div>\r\n <div class=\"contact-item\"><strong>\ud83d\udcac \u5b98\u65b9line\uff1a<\/strong>\r\n <a href=\"https:\/\/lin.ee\/8XXcfnHo\" class=\"line-link\" target=\"_blank\" rel=\"noopener\">@270jdtoe<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n <\/div>\r\n\r\n <footer>\r\n <p>© 2026 AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede | \u7248\u6b0a\u6240\u6709<\/p>\r\n <\/footer>\r\n\r\n <script>\r\n \/* \u5e73\u6ed1\u6efe\u52d5 *\/\r\n function scrollToSection(sectionId){\r\n const section = document.getElementById(sectionId);\r\n if(section) section.scrollIntoView({ behavior: 'smooth' });\r\n }\r\n\r\n \/* \u9032\u5834\u52d5\u756b *\/\r\n window.addEventListener('load', function(){\r\n document.querySelectorAll('#ai-training-container section').forEach((section, index) => {\r\n setTimeout(() => {\r\n section.style.opacity = '0';\r\n section.style.animation = 'fadeIn 0.6s ease-in-out forwards';\r\n }, index * 100);\r\n });\r\n });\r\n const style = document.createElement('style');\r\n style.textContent = `\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n `;\r\n document.head.appendChild(style);\r\n\r\n \/* =========================================================\r\n Hero\uff1a\u4e09\u89d2\u788e\u7247 + \u5f37\u7c92\u5b50 + \u5f37\u6ed1\u9f20\u8ffd\u8e64\r\n ========================================================= *\/\r\n (function initHeroProFX(){\r\n const hero = document.querySelector(\"#ai-training-container .hero\");\r\n const triCanvas = document.getElementById(\"heroTriCanvas\");\r\n const pCanvas = document.getElementById(\"heroCanvas\");\r\n const cta = document.getElementById(\"heroCta\");\r\n const ctaInner = cta?.querySelector(\".cta-inner\");\r\n if(!hero || !triCanvas || !pCanvas) return;\r\n\r\n const reduceMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\r\n if(reduceMotion) return;\r\n\r\n const clamp = (n,a,b)=>Math.min(b,Math.max(a,n));\r\n const lerp = (a,b,t)=>a+(b-a)*t;\r\n\r\n let mx = 0.5, my = 0.45;\r\n let hover = false;\r\n\r\n let windT = 0, wind = 0;\r\n let glowT = 0, glow = 0;\r\n let wx = 0, wy = 0;\r\n let tiltX = 0, tiltY = 0;\r\n\r\n function setVars(){\r\n hero.style.setProperty(\"--mx\", (mx*100).toFixed(2) + \"%\");\r\n hero.style.setProperty(\"--my\", (my*100).toFixed(2) + \"%\");\r\n hero.style.setProperty(\"--wx\", wx.toFixed(2) + \"px\");\r\n hero.style.setProperty(\"--wy\", wy.toFixed(2) + \"px\");\r\n hero.style.setProperty(\"--wind\", wind.toFixed(3));\r\n hero.style.setProperty(\"--glow\", glow.toFixed(3));\r\n hero.style.setProperty(\"--tiltX\", tiltX.toFixed(2) + \"deg\");\r\n hero.style.setProperty(\"--tiltY\", tiltY.toFixed(2) + \"deg\");\r\n }\r\n\r\n hero.addEventListener(\"mouseenter\", ()=>{\r\n hover = true;\r\n windT = 1; glowT = 1;\r\n });\r\n hero.addEventListener(\"mouseleave\", ()=>{\r\n hover = false;\r\n windT = 0; glowT = 0;\r\n if(ctaInner) ctaInner.style.transform = \"translate3d(0px,0px,0)\";\r\n });\r\n hero.addEventListener(\"mousemove\", (e)=>{\r\n const rect = hero.getBoundingClientRect();\r\n mx = clamp((e.clientX - rect.left) \/ rect.width, 0, 1);\r\n my = clamp((e.clientY - rect.top) \/ rect.height, 0, 1);\r\n });\r\n\r\n \/* CTA \u78c1\u5438 *\/\r\n if(cta && ctaInner){\r\n const MAG_RADIUS = 180;\r\n const MAG_STRENGTH = 22;\r\n window.addEventListener(\"mousemove\", (e)=>{\r\n if(!hover) return;\r\n const r = cta.getBoundingClientRect();\r\n const cx = r.left + r.width\/2;\r\n const cy = r.top + r.height\/2;\r\n const dx = e.clientX - cx;\r\n const dy = e.clientY - cy;\r\n const dist = Math.hypot(dx, dy);\r\n\r\n if(dist < MAG_RADIUS){\r\n const f = (1 - dist \/ MAG_RADIUS);\r\n const tx = dx * 0.10 * f * (MAG_STRENGTH\/10);\r\n const ty = dy * 0.10 * f * (MAG_STRENGTH\/10);\r\n ctaInner.style.transform = `translate3d(${tx.toFixed(2)}px, ${ty.toFixed(2)}px, 0)`;\r\n }else{\r\n ctaInner.style.transform = \"translate3d(0px,0px,0)\";\r\n }\r\n });\r\n }\r\n\r\n \/* Triangles (isosceles mesh) *\/\r\n const tCtx = triCanvas.getContext(\"2d\", { alpha: true });\r\n let tW=0, tH=0, tDPR=Math.min(2, window.devicePixelRatio||1);\r\n\r\n let tris = [];\r\n let triSpacing = 30;\r\n let triHeight = 0;\r\n let triRadius = 260;\r\n let triForce = 34;\r\n let triJitter = 1.1;\r\n let triEdgeAlpha = 0.12;\r\n\r\n function heroGradientColor(x,y){\r\n const nx = x \/ tW, ny = y \/ tH;\r\n const c1 = {r:155,g:110,b:196};\r\n const c2 = {r:132,g:86,b:184};\r\n const c3 = {r:111,g:74,b:163};\r\n const a = lerp(0.15, 0.95, ny);\r\n const base = {\r\n r: lerp(c1.r, c3.r, a),\r\n g: lerp(c1.g, c3.g, a),\r\n b: lerp(c1.b, c3.b, a)\r\n };\r\n const xmix = (Math.sin((nx*3.14)*1.2)+1)\/2 * 0.35;\r\n return {\r\n r: lerp(base.r, c2.r, xmix),\r\n g: lerp(base.g, c2.g, xmix),\r\n b: lerp(base.b, c2.b, xmix),\r\n };\r\n }\r\n\r\n function buildTriangles(){\r\n tris = [];\r\n triHeight = triSpacing * 0.78;\r\n\r\n const cols = Math.ceil(tW \/ triSpacing) + 2;\r\n const rows = Math.ceil(tH \/ triHeight) + 2;\r\n\r\n for(let r=0; r<rows; r++){\r\n for(let c=0; c<cols; c++){\r\n const x0 = (c * triSpacing) - triSpacing;\r\n const y0 = (r * triHeight) - triHeight;\r\n\r\n const up = {\r\n ax: x0 + triSpacing\/2, ay: y0,\r\n bx: x0, by: y0 + triHeight,\r\n cx: x0 + triSpacing, cy: y0 + triHeight,\r\n };\r\n const down = {\r\n ax: x0, ay: y0,\r\n bx: x0 + triSpacing, by: y0,\r\n cx: x0 + triSpacing\/2, cy: y0 + triHeight,\r\n };\r\n\r\n [up, down].forEach((t)=>{\r\n const cx = (t.ax + t.bx + t.cx) \/ 3;\r\n const cy = (t.ay + t.by + t.cy) \/ 3;\r\n const col = heroGradientColor(cx, cy);\r\n\r\n tris.push({\r\n a:{x:t.ax,y:t.ay}, b:{x:t.bx,y:t.by}, c:{x:t.cx,y:t.cy},\r\n ox:0, oy:0, vx:0, vy:0,\r\n cx, cy,\r\n r:col.r, g:col.g, b:col.b,\r\n ph: Math.random()*Math.PI*2\r\n });\r\n });\r\n }\r\n }\r\n }\r\n\r\n function triResize(){\r\n const rect = hero.getBoundingClientRect();\r\n tW = Math.max(1, Math.floor(rect.width));\r\n tH = Math.max(1, Math.floor(rect.height));\r\n triCanvas.width = Math.floor(tW * tDPR);\r\n triCanvas.height = Math.floor(tH * tDPR);\r\n triCanvas.style.width = tW + \"px\";\r\n triCanvas.style.height = tH + \"px\";\r\n tCtx.setTransform(tDPR,0,0,tDPR,0,0);\r\n\r\n triSpacing = clamp(Math.round(tW \/ 42), 22, 32);\r\n triRadius = clamp(Math.round(tW \/ 4.8), 200, 360);\r\n\r\n buildTriangles();\r\n }\r\n\r\n \/* Particles *\/\r\n const pCtx = pCanvas.getContext(\"2d\", { alpha: true });\r\n let pW=0, pH=0, pDPR=Math.min(2, window.devicePixelRatio||1);\r\n\r\n function pResize(){\r\n const rect = hero.getBoundingClientRect();\r\n pW = Math.max(1, Math.floor(rect.width));\r\n pH = Math.max(1, Math.floor(rect.height));\r\n pCanvas.width = Math.floor(pW * pDPR);\r\n pCanvas.height = Math.floor(pH * pDPR);\r\n pCanvas.style.width = pW + \"px\";\r\n pCanvas.style.height = pH + \"px\";\r\n pCtx.setTransform(pDPR,0,0,pDPR,0,0);\r\n seedParticles();\r\n }\r\n\r\n window.addEventListener(\"resize\", ()=>{\r\n triResize();\r\n pResize();\r\n });\r\n\r\n function flowAngle(x, y, t){\r\n const nx = x \/ pW, ny = y \/ pH;\r\n const a =\r\n Math.sin((nx * 6.6) + t * 1.15) * 1.2 +\r\n Math.cos((ny * 5.9) - t * 0.92) * 1.1 +\r\n Math.sin((nx + ny) * 7.4 + t * 0.55) * 0.8;\r\n return a;\r\n }\r\n\r\n const particles = [];\r\n let PCOUNT = 300;\r\n function seedParticles(){\r\n particles.length = 0;\r\n const base = Math.min(pW, pH);\r\n PCOUNT = clamp(Math.floor((base \/ 2.6)), 240, 420);\r\n\r\n for(let i=0;i<PCOUNT;i++){\r\n particles.push({\r\n x: Math.random()*pW,\r\n y: Math.random()*pH,\r\n vx: 0,\r\n vy: 0,\r\n life: Math.random()*160 + 110,\r\n size: Math.random()*2.6 + 1.3,\r\n });\r\n }\r\n }\r\n\r\n triResize();\r\n pResize();\r\n\r\n \/* Animation loop *\/\r\n let t0 = performance.now();\r\n\r\n function animate(now){\r\n const dt = Math.min(0.033, (now - t0)\/1000);\r\n t0 = now;\r\n\r\n wind += (windT - wind) * 0.13;\r\n glow += (glowT - glow) * 0.14;\r\n\r\n const rx = (mx - 0.5) * 2;\r\n const ry = (my - 0.5) * 2;\r\n\r\n const MAX_SHIFT = 36;\r\n wx += ((rx * MAX_SHIFT * wind) - wx) * 0.16;\r\n wy += ((ry * MAX_SHIFT * wind) - wy) * 0.16;\r\n\r\n const MAX_TILT = 12;\r\n tiltY += ((rx * MAX_TILT * wind) - tiltY) * 0.14;\r\n tiltX += ((-ry * MAX_TILT * wind) - tiltX) * 0.14;\r\n\r\n setVars();\r\n\r\n \/* Triangles *\/\r\n tCtx.clearRect(0,0,tW,tH);\r\n const mpx = mx * tW;\r\n const mpy = my * tH;\r\n const active = hover ? 1 : 0.15;\r\n\r\n for(const tr of tris){\r\n const dx = tr.cx - mpx;\r\n const dy = tr.cy - mpy;\r\n const dist = Math.hypot(dx, dy);\r\n const inR = dist < triRadius ? (1 - dist\/triRadius) : 0;\r\n\r\n const repel = inR * inR * (1.0 + 0.7*wind);\r\n const attract = inR * (0.34 + 0.40*glow);\r\n\r\n const ndx = dist ? dx\/dist : 0;\r\n const ndy = dist ? dy\/dist : 0;\r\n\r\n const targetX =\r\n (-ndx * triForce * repel + (mpx - tr.cx) * 0.05 * attract)\r\n + Math.sin(now*0.003 + tr.ph) * triJitter * (0.7 + 1.0*wind);\r\n\r\n const targetY =\r\n (-ndy * triForce * repel + (mpy - tr.cy) * 0.05 * attract)\r\n + Math.cos(now*0.003 + tr.ph) * triJitter * (0.7 + 1.0*wind);\r\n\r\n const spring = 16;\r\n const damp = 0.84;\r\n\r\n tr.vx += (targetX - tr.ox) * spring * dt * active;\r\n tr.vy += (targetY - tr.oy) * spring * dt * active;\r\n\r\n tr.vx *= damp;\r\n tr.vy *= damp;\r\n\r\n tr.ox += tr.vx;\r\n tr.oy += tr.vy;\r\n\r\n const ax = tr.a.x + tr.ox;\r\n const ay = tr.a.y + tr.oy;\r\n const bx = tr.b.x + tr.ox;\r\n const by = tr.b.y + tr.oy;\r\n const cx2 = tr.c.x + tr.ox;\r\n const cy2 = tr.c.y + tr.oy;\r\n\r\n const brighten = 1 + inR * (0.55 + 0.35*glow);\r\n const rr = Math.min(255, tr.r * brighten);\r\n const gg = Math.min(255, tr.g * brighten);\r\n const bb = Math.min(255, tr.b * brighten);\r\n\r\n tCtx.beginPath();\r\n tCtx.moveTo(ax, ay);\r\n tCtx.lineTo(bx, by);\r\n tCtx.lineTo(cx2, cy2);\r\n tCtx.closePath();\r\n\r\n tCtx.globalAlpha = (0.26 + 0.62*inR) * (0.55 + 0.45*glow) * (0.85 + 0.15*wind);\r\n tCtx.fillStyle = `rgba(${rr|0},${gg|0},${bb|0},1)`;\r\n tCtx.fill();\r\n\r\n tCtx.globalAlpha = triEdgeAlpha * (0.4 + 1.3*inR) * (0.4 + 0.6*glow);\r\n tCtx.strokeStyle = \"rgba(255,255,255,0.9)\";\r\n tCtx.lineWidth = 1;\r\n tCtx.stroke();\r\n }\r\n\r\n \/* Particles *\/\r\n pCtx.clearRect(0,0,pW,pH);\r\n\r\n const time = now * 0.001;\r\n\r\n for(const p of particles){\r\n const a = flowAngle(p.x + wx*0.25, p.y + wy*0.25, time);\r\n\r\n const sp = 30 + 62*wind;\r\n const ax = Math.cos(a) * sp;\r\n const ay = Math.sin(a) * sp;\r\n\r\n const fx = (mx*pW) - p.x;\r\n const fy = (my*pH) - p.y;\r\n const d = Math.hypot(fx, fy);\r\n const influence = (d < 360) ? (1 - d\/360) : 0;\r\n\r\n p.vx += (ax * dt) + (fx\/d || 0) * influence * (70 + 85*glow) * dt;\r\n p.vy += (ay * dt) + (fy\/d || 0) * influence * (70 + 85*glow) * dt;\r\n\r\n p.vx *= 0.90;\r\n p.vy *= 0.90;\r\n\r\n p.x += p.vx * dt;\r\n p.y += p.vy * dt;\r\n\r\n p.life -= 1;\r\n\r\n if(p.x < -80 || p.x > pW+80 || p.y < -80 || p.y > pH+80 || p.life <= 0){\r\n p.x = Math.random()*pW;\r\n p.y = Math.random()*pH;\r\n p.vx = 0; p.vy = 0;\r\n p.life = Math.random()*170 + 110;\r\n }\r\n\r\n const alpha = (0.13 + 0.35*glow) * (0.6 + 0.4*Math.min(1, p.life\/110));\r\n\r\n pCtx.globalAlpha = alpha;\r\n pCtx.beginPath();\r\n pCtx.arc(p.x, p.y, p.size, 0, Math.PI*2);\r\n pCtx.fillStyle = \"rgba(255,255,255,0.98)\";\r\n pCtx.fill();\r\n\r\n pCtx.globalAlpha = alpha * 0.28;\r\n pCtx.beginPath();\r\n pCtx.arc(p.x, p.y, p.size*2.4, 0, Math.PI*2);\r\n pCtx.fillStyle = \"rgba(255,255,255,0.9)\";\r\n pCtx.fill();\r\n\r\n if(glow > 0.05){\r\n pCtx.globalAlpha = alpha * 0.70;\r\n pCtx.beginPath();\r\n pCtx.moveTo(p.x, p.y);\r\n pCtx.lineTo(p.x - p.vx*0.12, p.y - p.vy*0.12);\r\n pCtx.lineWidth = 1.25;\r\n pCtx.strokeStyle = \"rgba(255,255,255,0.92)\";\r\n pCtx.stroke();\r\n }\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n }\r\n\r\n requestAnimationFrame(animate);\r\n })();\r\n\r\n \/* ======= \u5713\u9905\u5716\u4e92\u52d5 ======= *\/\r\n (function initOutlinePie(){\r\n const data = [\r\n {\r\n key: \"dev\",\r\n title: \"AI\u6280\u8853\u958b\u767c\u8207\u5be6\u52d9\",\r\n desc: \"\u504f\u91cd\u5be6\u4f5c\uff1a\u63d0\u793a\u5de5\u7a0b\u3001\u8cc7\u6599\u4e2d\u5fc3\u7ba1\u7406\u3001\u5f71\u50cf\u8fa8\u8b58\u8207\u5927\u6578\u64da\u5206\u6790\u843d\u5730\u3002\",\r\n items: [\"\u751f\u6210\u5f0fAI\u63d0\u793a\u5de5\u7a0b\u6280\u8853\",\"AI\u8cc7\u6599\u4e2d\u5fc3\u7ba1\u7406\",\"\u5927\u6578\u64da\u5206\u6790\u5be6\u52d9\",\"AI\u5f71\u50cf\u8fa8\u8b58\u5be6\u52d9\"],\r\n color: \"#8E5CCB\"\r\n },\r\n {\r\n key: \"ml\",\r\n title: \"\u4eba\u5de5\u667a\u6167\u8207\u8cc7\u6599\u5206\u6790\",\r\n desc: \"\u5efa\u7acb\u57fa\u790e\u89c0\u5ff5\uff1a\u5927\u6578\u64da\u3001ML\u3001\u7a0b\u5f0f\u8a2d\u8a08\u8207\u5f71\u50cf\u8fa8\u8b58\u539f\u7406\u3002\",\r\n items: [\"\u5927\u6578\u64da\u5206\u6790\u539f\u7406\",\"\u4eba\u5de5\u667a\u6167\u8207\u6a5f\u5668\u5b78\u7fd2\u539f\u7406\",\"AI\u7a0b\u5f0f\u8a2d\u8a08\u539f\u7406\",\"AI\u5f71\u50cf\u8fa8\u8b58\u539f\u7406\"],\r\n color: \"#B06FE0\"\r\n },\r\n {\r\n key: \"integration\",\r\n title: \"AI\u61c9\u7528\u6574\u5408\u8207\u5c08\u984c\u88fd\u4f5c\",\r\n desc: \"\u7cfb\u7d71\u67b6\u69cb\u5230\u5c08\u984c\uff1a\u4e32\u63a5\u6574\u9ad4\u61c9\u7528\u3001\u9032\u968e\u61c9\u7528\u8207\u6210\u679c\u8a55\u91cf\u3002\",\r\n items: [\"\u751f\u6210\u5f0fAI\u65bc\u7522\u696d\u8207\u9032\u968e\u61c9\u7528\",\"\u7d9c\u5408\u8a55\u91cf\",\"\u5c08\u984c\u88fd\u4f5c\u5be6\u52d9\",\"AI\u61c9\u7528\u6574\u9ad4\u7cfb\u7d71\u67b6\u69cb\"],\r\n color: \"#6F4AA3\"\r\n },\r\n {\r\n key: \"career\",\r\n title: \"\u8077\u5834\u5c31\u696d\u8207\u8077\u80fd\u767c\u5c55\",\r\n desc: \"\u5c31\u696d\u5c0e\u5411\uff1a\u8da8\u52e2\u3001\u5c65\u6b77\u3001\u6c42\u8077\u6280\u5de7\u3001\u5a92\u5408\u8207\u8f14\u5c0e\u3002\",\r\n items: [\"\u5c31\u696d\u5e02\u5834\u8da8\u52e2\u5206\u6790\",\"\u6c42\u8077\u6280\u5de7\",\"\u5c65\u6b77\u64b0\u5beb\",\"\u5c31\u696d\u8f14\u5c0e\u8207\u4f01\u696d\u5a92\u5408\"],\r\n color: \"#9B6EC4\"\r\n }\r\n ];\r\n\r\n const svg = document.getElementById(\"outlinePie\");\r\n const g = document.getElementById(\"outlinePieSlices\");\r\n const legend = document.getElementById(\"outlineLegend\");\r\n const titleEl = document.getElementById(\"detailTitle\");\r\n const descEl = document.getElementById(\"detailDesc\");\r\n const cardsEl = document.getElementById(\"detailCards\");\r\n\r\n if(!svg || !g || !legend || !titleEl || !descEl || !cardsEl) return;\r\n\r\n const cx = 260, cy = 260;\r\n const outerR = 210;\r\n const innerR = 120;\r\n const gapDeg = 2.2;\r\n const explode = 18;\r\n\r\n const deg2rad = d => (d * Math.PI) \/ 180;\r\n const polar = (r, angDeg) => {\r\n const a = deg2rad(angDeg);\r\n return { x: cx + r * Math.cos(a), y: cy + r * Math.sin(a) };\r\n };\r\n\r\n function donutPath(startDeg, endDeg){\r\n const p1 = polar(outerR, startDeg);\r\n const p2 = polar(outerR, endDeg);\r\n const p3 = polar(innerR, endDeg);\r\n const p4 = polar(innerR, startDeg);\r\n const largeArc = (endDeg - startDeg) > 180 ? 1 : 0;\r\n\r\n return [\r\n `M ${p1.x} ${p1.y}`,\r\n `A ${outerR} ${outerR} 0 ${largeArc} 1 ${p2.x} ${p2.y}`,\r\n `L ${p3.x} ${p3.y}`,\r\n `A ${innerR} ${innerR} 0 ${largeArc} 0 ${p4.x} ${p4.y}`,\r\n \"Z\"\r\n ].join(\" \");\r\n }\r\n\r\n function midAngle(startDeg, endDeg){ return (startDeg + endDeg) \/ 2; }\r\n\r\n function renderCards(d){\r\n cardsEl.innerHTML = \"\";\r\n const frag = document.createDocumentFragment();\r\n\r\n d.items.forEach((t, idx) => {\r\n const card = document.createElement(\"div\");\r\n card.className = \"outline-item-card\";\r\n card.innerHTML = `\r\n <div class=\"outline-item-top\">\r\n <div class=\"outline-item-left\">\r\n <span class=\"outline-item-dot\" style=\"background:${d.color}\"><\/span>\r\n <div class=\"outline-item-title\">${t}<\/div>\r\n <\/div>\r\n <\/div>\r\n `;\r\n frag.appendChild(card);\r\n\r\n requestAnimationFrame(() => {\r\n setTimeout(() => card.classList.add(\"is-in\"), idx * 60);\r\n });\r\n });\r\n\r\n cardsEl.appendChild(frag);\r\n }\r\n\r\n function setActive(key){\r\n const slices = Array.from(g.querySelectorAll(\".slice\"));\r\n slices.forEach(s => {\r\n const isActive = s.dataset.key === key;\r\n s.classList.toggle(\"is-active\", isActive);\r\n s.classList.toggle(\"is-dim\", key && !isActive);\r\n\r\n const ang = Number(s.dataset.mid);\r\n if(isActive){\r\n const tx = Math.cos(deg2rad(ang)) * explode;\r\n const ty = Math.sin(deg2rad(ang)) * explode;\r\n s.style.transform = `translate(${tx}px, ${ty}px)`;\r\n }else{\r\n s.style.transform = \"translate(0px, 0px)\";\r\n }\r\n });\r\n\r\n Array.from(legend.querySelectorAll(\".legend-item\")).forEach(li => {\r\n const isActive = li.dataset.key === key;\r\n li.style.transform = isActive ? \"translateY(-2px)\" : \"\";\r\n li.style.boxShadow = isActive ? \"0 14px 36px rgba(107,74,138,0.16)\" : \"\";\r\n li.style.borderColor = isActive ? \"rgba(155,110,196,0.35)\" : \"rgba(155,110,196,0.18)\";\r\n });\r\n\r\n const d = data.find(x => x.key === key);\r\n if(!d) return;\r\n\r\n titleEl.textContent = d.title;\r\n descEl.textContent = d.desc;\r\n renderCards(d);\r\n }\r\n\r\n const total = data.length;\r\n const sliceDeg = 360 \/ total;\r\n let start = -60;\r\n\r\n data.forEach(d => {\r\n const s = start + gapDeg \/ 2;\r\n const e = start + sliceDeg - gapDeg \/ 2;\r\n const mid = midAngle(s, e);\r\n\r\n const slice = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"g\");\r\n slice.classList.add(\"slice\");\r\n slice.dataset.key = d.key;\r\n slice.dataset.mid = String(mid);\r\n slice.setAttribute(\"tabindex\", \"0\");\r\n slice.setAttribute(\"role\", \"button\");\r\n slice.setAttribute(\"aria-label\", d.title);\r\n\r\n const path = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"path\");\r\n path.setAttribute(\"d\", donutPath(s, e));\r\n path.setAttribute(\"fill\", d.color);\r\n path.setAttribute(\"opacity\", \"0.98\");\r\n path.setAttribute(\"stroke\", \"rgba(255,255,255,0.28)\");\r\n path.setAttribute(\"stroke-width\", \"2\");\r\n\r\n const labelPos = polar((outerR + innerR) \/ 2, mid);\r\n\r\n const label = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"text\");\r\n label.classList.add(\"slice-label\");\r\n label.setAttribute(\"x\", labelPos.x);\r\n label.setAttribute(\"y\", labelPos.y);\r\n label.setAttribute(\"text-anchor\", \"middle\");\r\n label.setAttribute(\"dominant-baseline\", \"middle\");\r\n\r\n let rot = mid + 90;\r\n const normalized = ((rot % 360) + 360) % 360;\r\n if(normalized > 90 && normalized < 270) rot += 180;\r\n label.setAttribute(\"transform\", `rotate(${rot} ${labelPos.x} ${labelPos.y})`);\r\n\r\n const parts = d.title.split(\"\u8207\");\r\n const lines = parts.length === 2 ? [parts[0] + \"\u8207\", parts[1]] : [d.title];\r\n const lineHeight = 18;\r\n const startDy = -((lines.length - 1) * lineHeight) \/ 2;\r\n\r\n lines.forEach((text, i) => {\r\n const tspan = document.createElementNS(\"http:\/\/www.w3.org\/2000\/svg\", \"tspan\");\r\n tspan.setAttribute(\"x\", labelPos.x);\r\n tspan.setAttribute(\"dy\", i === 0 ? String(startDy) : String(lineHeight));\r\n tspan.textContent = text;\r\n label.appendChild(tspan);\r\n });\r\n\r\n slice.appendChild(path);\r\n slice.appendChild(label);\r\n g.appendChild(slice);\r\n\r\nconst activate = () => setActive(d.key);\r\n\r\n\/\/ \u2705 \u684c\u6a5f\uff1a\u6ed1\u9f20\u9760\u8fd1\u5c31\u5c55\u958b\uff08pointerenter \u6bd4 mouseenter \u66f4\u901a\u7528\uff09\r\nslice.addEventListener(\"pointerenter\", (ev) => {\r\n \/\/ \u53ea\u5c0d\u300c\u6ed1\u9f20\u300d\u7684 hover \u89f8\u767c\uff08\u907f\u514d\u89f8\u63a7\u624b\u6307\u78b0\u5230\u4e5f\u4e00\u76f4\u8df3\uff09\r\n if (ev.pointerType === \"mouse\") activate();\r\n});\r\n\r\n\/\/ \u2705 \u9375\u76e4\u64cd\u4f5c\uff1a\u4fdd\u7559\u53ef\u53ca\u6027\r\nslice.addEventListener(\"focusin\", activate);\r\nslice.addEventListener(\"keydown\", (ev) => {\r\n if (ev.key === \"Enter\" || ev.key === \" \") {\r\n ev.preventDefault();\r\n activate();\r\n }\r\n});\r\n\r\n\/\/ \u2705 \u89f8\u63a7\uff1a\u4ecd\u4fdd\u7559\u9ede\u64ca\r\nslice.addEventListener(\"click\", activate);\r\n\r\n start += sliceDeg;\r\n });\r\n\r\n data.forEach(d => {\r\n const li = document.createElement(\"div\");\r\n li.className = \"legend-item\";\r\n li.dataset.key = d.key;\r\n li.innerHTML = `\r\n <div class=\"legend-dot\" style=\"background:${d.color};\"><\/div>\r\n <div class=\"legend-text\">\r\n <div class=\"legend-name\">${d.title}<\/div>\r\n <\/div>\r\n `;\r\n li.addEventListener(\"click\", () => setActive(d.key));\r\n legend.appendChild(li);\r\n });\r\n\r\n setActive(data[0].key);\r\n })();\r\n <\/script>\r\n <\/div>\r\n<\/body>\r\n<\/html>\r\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"competition2025","meta":{"footnotes":""},"_links":{"self":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3670"}],"collection":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3670"}],"version-history":[{"count":3,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3670\/revisions"}],"predecessor-version":[{"id":3705,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3670\/revisions\/3705"}],"wp:attachment":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3670"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}