AI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b - \u958b\u555f\u60a8\u7684\u4eba\u5de5\u667a\u6167\u8077\u6daf\u4e4b\u8def<\/title> <meta name=\"description\" content=\"\u5c08\u696dAI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b\uff0c12\u9031\u5bc6\u96c6\u57f9\u8a13\uff0c100%\u5c31\u696d\u8f14\u5c0e\u3002\u5b78\u7fd2Python\u3001\u6a5f\u5668\u5b78\u7fd2\u3001\u6df1\u5ea6\u5b78\u7fd2\u7b49\u6838\u5fc3\u6280\u8853\uff0c\u7acb\u5373\u5831\u540d\u958b\u555fAI\u8077\u6daf\uff01\">\r\n\r\n <style>\r\n\/* === \u5168\u57df\u91cd\u7f6e\u6a23\u5f0f\uff0c\u78ba\u4fdd\u5404\u700f\u89bd\u5668\u4e00\u81f4\u6027 === *\/\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n \/* \u4fee\u6b63\uff1a\u6dfb\u52a0 overflow-wrap \u78ba\u4fdd\u9577\u6587\u5b57\u5728\u5bb9\u5668\u5167\u63db\u884c *\/\r\n overflow-wrap: break-word; \r\n word-break: break-word;\r\n}\r\n\r\n\/* === \u9810\u8a2d\u5b57\u9ad4\u6a23\u5f0f\u8207\u57fa\u672c\u6587\u5b57\u8a2d\u5b9a === *\/\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n line-height: 1.6;\r\n color: #333;\r\n}\r\n\r\n\/* === \u5168\u7ad9\u5bb9\u5668\uff0c\u8a2d\u5b9a\u6700\u5927\u5bec\u5ea6\u8207\u5de6\u53f3\u5167\u8ddd === *\/\r\n.container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n}\r\n\r\n\/* === \u9801\u9996\u6a23\u5f0f === *\/\r\n.header {\r\n background: linear-gradient(135deg, #5e5a98, #320149); \/* \u6f38\u5c64\u80cc\u666f *\/\r\n color: white;\r\n padding: 64px 0;\r\n text-align: center;\r\n}\r\n\r\n.header-content {\r\n display: flex; \/* \u4f7f\u7528 Flexbox \u5c0d\u9f4a\u5716\u793a\u8207\u6587\u5b57 *\/\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n}\r\n\r\n.header-icon {\r\n width: 40px;\r\n height: 40px;\r\n}\r\n\r\n.header-text h1 {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n\tcolor:#ffff;\r\n}\r\n\r\n.header-text p {\r\n font-size: 1.75rem;\r\n color: #bfdbfe;\r\n}\r\n\r\n\/* === \u5404\u6bb5\u843d\u6a19\u984c\u901a\u7528\u6a23\u5f0f === *\/\r\n.section-header {\r\n text-align: center;\r\n margin-bottom: 48px;\r\n}\r\n\r\n.section-header h2 {\r\n font-size: 2rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.section-header p {\r\n font-size: 1.125rem;\r\n color: #6b7280;\r\n max-width:none;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* === \u8ab2\u7a0b\u8cc7\u8a0a\u5340\u584a === *\/\r\n.course-info {\r\n padding: 64px 0;\r\n background: #f9fafb;\r\n}\r\n\r\n\/* \u8ab2\u7a0b\u7279\u8272\u7db2\u683c\u6392\u7248 *\/\r\n.features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); \/* \u81ea\u9069\u61c9\u6b04\u6578 *\/\r\n gap: 24px;\r\n margin-bottom: 48px;\r\n}\r\n\r\n\/* \u55ae\u4e00\u5361\u7247\u6a23\u5f0f *\/\r\n.feature-card {\r\n background: white;\r\n padding: 32px 24px;\r\n border-radius: 12px;\r\n text-align: center;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n text-align: center;\r\n}\r\n\r\n.feature-card:hover {\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\r\n transform: translateY(-2px); \/* \u6ed1\u9f20\u61f8\u505c\u4e0a\u6d6e\u6548\u679c *\/\r\n}\r\n\r\n.feature-icon {\r\n \/* \u2728 \u65b0\u589e display: block \u548c margin: 0 auto; *\/\r\n display: block; \r\n margin: 0 auto 16px auto; \/* \u4e0a\u4e0b\u908a\u8ddd\uff0c\u8b93\u5b83\u6c34\u5e73\u5c45\u4e2d *\/ \r\n width: 28px;\r\n height: 24px;\r\n color: #2563eb;\r\n \/* \u79fb\u9664\u539f\u672c\u7684 margin-bottom: 16px; \u56e0\u70ba\u5408\u4f75\u5230\u4e0a\u9762\u7684 margin \u7c21\u5beb\u4e86 *\/\r\n}\r\n\r\n.feature-card h3 {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.feature-card p {\r\n color: #6b7280;\r\n}\r\n\r\n\/* \u8ab2\u7a0b\u5927\u7db1\u5361\u7247\u6a23\u5f0f *\/\r\n.curriculum-accordion-row {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 24px;\r\n margin-bottom: 32px;\r\n justify-content: center;\r\n}\r\n\r\n.curriculum-accordion {\r\n \/* \u4fee\u6b63\uff1a\u5c07\u56fa\u5b9a\u5bec\u5ea6\u6539\u70ba\u767e\u5206\u6bd4\u914d\u5408 max-width\uff0c\u4ee5\u78ba\u4fdd\u97ff\u61c9\u5f0f\u7e2e\u5c0f *\/\r\n width: 100%; \r\n}\r\n\r\n.accordion-header {\r\n background-color: #5e5a98;\r\n color: white;\r\n padding: 16px;\r\n font-size: 1.125rem;\r\n font-weight: bold;\r\n border: none;\r\n width:100%;\r\n text-align: left;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n.accordion-header:hover {\r\n background-color: #1e40af;\r\n}\r\n\r\n.arrow-icon {\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.accordion-header.open .arrow-icon {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n background-color: #f9fafb;\r\n padding: 0 16px;\r\n transition: all 0.4s ease;\r\n border-radius: 0 0 6px 6px;\r\n}\r\n\r\n\/* \u7528\u4e00\u500b\u5920\u5927\u7684 max-height \u6a21\u64ec\u81ea\u52d5\u5c55\u958b\u9ad8\u5ea6 *\/\r\n.accordion-content.open {\r\n max-height: 1000px;\r\n padding: 16px 24px;\r\n}\r\n\r\n.accordion-content ul {\r\nmargin: 0; \/* \u79fb\u9664\u6240\u6709\u5916\u908a\u8ddd\uff08\u5305\u62ec\u5de6\u5074\u7e2e\u6392\uff09 *\/\r\npadding: 0; \/* \u79fb\u9664\u6240\u6709\u5167\u908a\u8ddd\uff08\u78ba\u4fdd\u5167\u5bb9\u8cbc\u9f4a\u908a\u754c\uff09 *\/\r\nlist-style-type: none; \/* \u79fb\u9664\u5217\u8868\u9805\u76ee\u7b26\u865f *\/\r\n}\r\n\r\n.accordion-content ul li {\r\nmargin-bottom: 6px; \/* \u589e\u52a0\u5217\u8868\u9805\u76ee\u4e4b\u9593\u7684\u9593\u8ddd *\/\r\npadding-left: 0px; \/* \u589e\u52a0\u5de6\u5074\u5167\u8ddd\uff0c\u7528\u65bc\u6a21\u64ec\u9805\u76ee\u7b26\u865f *\/\r\nposition: relative;\r\n}\r\n\r\n.accordion-content ul li::before {\r\ncontent: \"\u2022\"; \/* \u9805\u76ee\u7b26\u865f\uff08\u9ed1\u9ede\uff09 *\/\r\ncolor: #000000; \r\nfont-weight: bold;\r\ndisplay: inline-block;\r\nwidth: 1em; \/* \u78ba\u4fdd\u7b26\u865f\u4f54\u64da\u56fa\u5b9a\u5bec\u5ea6 *\/\r\n\/* \u512a\u5316\uff1a\u8abf\u6574\u5de6\u908a\u8ddd\uff0c\u8b93\u7b26\u865f\u8207\u6587\u5b57\u4fdd\u6301\u66f4\u597d\u7684\u8ddd\u96e2 *\/\r\nmargin-left: -1em; \r\nposition: absolute;\r\nleft: 0;\r\n}\r\n\/* === \u5831\u540d\u8cc7\u8a0a\u5340 === *\/\r\n.registration-info {\r\n padding: 64px 0;\r\n background: white;\r\n}\r\n\r\n.registration-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n gap: 32px;\r\n max-width: 1536px;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* \u5831\u540d\u5361\u7247\u548c\u512a\u52e2\u5361\u7247\u901a\u7528\u6a23\u5f0f *\/\r\n.registration-card,\r\n.benefits-card {\r\n background: white;\r\n padding: 12px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.registration-card:hover,\r\n.benefits-card:hover {\r\n box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n\/* \u6a19\u984c\u6a23\u5f0f *\/\r\n.registration-card h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #2563eb;\r\n text-align: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.benefits-card h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #059669;\r\n text-align: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n\/* \u5831\u540d\u8a73\u60c5 *\/\r\n.detail-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.detail-icon {\r\n width: 24px;\r\n height: 24px;\r\n color: #2563eb;\r\n flex-shrink: 0;\r\n margin-top: 4px;\r\n}\r\n\r\n.detail-item h4 {\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.detail-item p {\r\n color: #6b7280;\r\n}\r\n\r\n\/* \u50f9\u683c\u986f\u793a\u5340 *\/\r\n.price-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n\/* \u512a\u52e2\u9805\u76ee\u6a23\u5f0f *\/\r\n.benefits-list {\r\n margin-bottom: 32px;\r\n}\r\n\r\n.benefit-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.check-icon {\r\n width: 20px;\r\n height: 20px;\r\n color: #059669;\r\n flex-shrink: 0;\r\n}\r\n\r\n\/* \u5831\u540d\u6309\u9215\u6a23\u5f0f *\/\r\n.register-button-container {\r\n text-align: center;\r\n}\r\n.register-btn {\r\n display: inline-block;\r\n background-color:#5e5a98; \/* \u85cd\u8272 *\/\r\n color: #ffffff !important; \/* \u767d\u8272\u6587\u5b57 *\/\r\n padding: 16px 32px; \/* \u52a0\u5927\u5167\u8ddd\u8b8a\u65b9\u584a *\/\r\n border-radius: 8px; \/* \u5713\u89d2\u908a\u6846 *\/\r\n text-decoration: none; \/* \u79fb\u9664\u5e95\u7dda\uff08\u91dd\u5c0d <a>\uff09 *\/\r\n font-size: 1.125rem;\r\n font-weight: bold;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); \/* \u9670\u5f71\u6548\u679c *\/\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n}\r\n\r\n.register-btn:hover {\r\n background-color: #5e5a98; \r\n color: #ffffff !important;\r\n transform: translateY(-2px);\r\n}\r\n\/* === \u8ab2\u7a0b\u6d77\u5831\u5340\u584a === *\/\r\n.poster-section {\r\n padding: 64px 0; \/* \u4e0a\u4e0b\u7559\u767d *\/\r\n background: linear-gradient(135deg, #f0f9ff, #e0e7ff); \/* \u6f38\u5c64\u80cc\u666f *\/\r\n}\r\n.poster-img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.poster-header-custom h2 {\r\n display: flex; \r\n align-items: center; \r\n justify-content: center; \r\n gap: 12px;\r\n}\r\n\r\n\/* \u5716\u793a\u672c\u8eab\u7684\u5927\u5c0f\u548c\u984f\u8272\u8a2d\u5b9a\uff0c\u9019\u500b\u53ef\u4ee5\u7dad\u6301 *\/\r\n.section-header-icon {\r\n width: 36px; \r\n height: 36px; \r\n color: #2563eb;\r\n transform: translateY(4px);\r\n}\r\n\r\n\/* \u6d77\u5831\u4e3b\u8981\u5916\u6846 *\/\r\n.poster-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden; \/* \u96b1\u85cf\u8d85\u51fa\u908a\u6846\u5167\u5bb9 *\/\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n max-width: 1024px;\r\n margin: 0 auto;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.poster-card:hover {\r\n box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); \/* \u61f8\u505c\u9670\u5f71\u6548\u679c *\/\r\n}\r\n\r\n\/* \u6d77\u5831\u6a19\u984c\u5340 *\/\r\n.poster-header {\r\n background: linear-gradient(135deg, #2563eb, #4338ca);\r\n color: white;\r\n padding: 24px;\r\n text-align: center;\r\n}\r\n\r\n.poster-header h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n}\r\n\r\n\/* === \u806f\u7d61\u8cc7\u8a0a\u5340\u584a === *\/\r\n.contact-info {\r\n padding: 64px 0;\r\n background: linear-gradient(135deg, #f9fafb, #dbeafe);\r\n}\r\n\r\n\/* \u806f\u7d61\u65b9\u5f0f\u7db2\u683c\u5e03\u5c40 *\/\r\n.contact-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 24px;\r\n margin-bottom: 48px;\r\n}\r\n\r\n\/* \u55ae\u4e00\u5361\u7247\u6a23\u5f0f\uff08\u96fb\u8a71\u3001\u90f5\u4ef6\u3001\u5730\u5740\u7b49\uff09 *\/\r\n.contact-card {\r\n background: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(8px);\r\n padding: 32px 24px;\r\n border-radius: 12px;\r\n text-align: center;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n}\r\n.contact-card:hover {\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\r\n transform: translateY(-4px);\r\n}\r\n\r\n.contact-icon {\r\n width: 24px;\r\n height: 24px;\r\n color: #2563eb;\r\n margin-bottom: 16px\r\n}\r\n\r\n\/* \u806f\u7d61\u6587\u5b57\u6a23\u5f0f *\/\r\n.contact-card h3 {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n}\r\n.contact-main {\r\n font-weight: 600;\r\n color: #1f2937;\r\n margin-bottom: 4px;\r\n}\r\n.contact-desc {\r\n color: #6b7280;\r\n font-size: 0.875rem;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u5361\u7247 *\/\r\n.office-hours-card {\r\n background: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(8px);\r\n padding: 32px;\r\n border-radius: 12px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n max-width: 1024px;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u6a19\u984c\u6a23\u5f0f *\/\r\n.office-hours-card h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n text-align: center;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.office-subtitle {\r\n text-align: center;\r\n color: #6b7280;\r\n margin-bottom: 24px;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u6392\u7248 *\/\r\n.office-hours-grid {\r\n display: flex;\r\n justify-content: center; \/* \u6c34\u5e73\u7f6e\u4e2d *\/\r\n gap: 48px; \/* \u5361\u7247\u9593\u8ddd *\/\r\n flex-wrap: wrap;\r\n margin-bottom: 32px;\r\n}\r\n\r\n.office-hours-item {\r\n display: flex;\r\n flex-direction: column; \/* \u5782\u76f4\u6392\u5217 icon + \u6587\u5b57 *\/\r\n align-items: center; \/* \u6c34\u5e73\u7f6e\u4e2d icon \u548c\u6587\u5b57 *\/\r\n text-align: center; \/* \u8b93\u6587\u5b57\u5728\u5bb9\u5668\u5167\u7f6e\u4e2d *\/\r\n gap: 8px;\r\n max-width: 300px; \/* \u907f\u514d\u904e\u5bec *\/\r\n}\r\n\r\n.office-icon {\r\n width: 20px;\r\n height: 20px;\r\n color: #2563eb;\r\n flex-shrink: 0;\r\n margin-top: 4px;\r\n}\r\n\r\n.office-icon {\r\n margin: 0 auto;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u5167\u6587\u5b57\u6a23\u5f0f *\/\r\n.office-hours-item h4 {\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.office-hours-item p {\r\n color: #6b7280;\r\n font-size: 0.875rem;\r\n}\r\n\r\n\/* === \u9801\u5c3e\u5340\u584a === *\/\r\n.footer {\r\n background: #1f2937;\r\n color: white;\r\n padding: 48px 0;\r\n}\r\n\r\n\/* \u9801\u5c3e\u7db2\u683c\u6392\u7248 *\/\r\n.footer-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px,1fr));\r\n gap: 32px;\r\n margin-bottom: 32px;\r\n}\r\n\r\n.brand-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.brand-icon {\r\n width: 32px;\r\n height: 32px;\r\n color: #60a5fa;\r\n}\r\n\r\n\/* \u54c1\u724c\u8aaa\u660e *\/\r\n.footer-brand h3 {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n}\r\n.footer-brand p {\r\n color: #d1d5db;\r\n font-size: 0.875rem;\r\n line-height: 1.6;\r\n}\r\n\r\n\/* \u8d85\u9023\u7d50\u5217\u8868 *\/\r\n.footer-links ul {\r\n list-style: none;\r\n}\r\n.footer-links li {\r\n margin-bottom: 8px;\r\n}\r\n.footer-links a {\r\n color: #d1d5db;\r\n text-decoration: none;\r\n font-size: 0.875rem;\r\n transition: color 0.3s ease;\r\n}\r\n.footer-links a:hover {\r\n color: white;\r\n}\r\n\r\n\/* \u806f\u7d61\u8cc7\u8a0a\u6a23\u5f0f *\/\r\n.footer-contact-list p {\r\n color: #d1d5db;\r\n font-size: 0.875rem;\r\n margin-bottom: 8px;\r\n font-weight:bold;\r\n}\r\n\r\n\/* \u793e\u7fa4\u9023\u7d50 *\/\r\n.social-links {\r\n display: flex;\r\n gap: 16px;\r\n margin-bottom: 16px;\r\n}\r\n.social-link {\r\n color: #d1d5db;\r\n transition: color 0.3s ease;\r\n}\r\n.social-link:hover {\r\n color: #60a5fa;\r\n}\r\n.social-note {\r\n color: #9ca3af;\r\n font-size: 0.75rem;\r\n line-height: 1.5;\r\n}\r\n\r\n\/* \u9801\u5c3e\u5e95\u90e8\u7248\u6b0a\u5217 *\/\r\n.footer-bottom {\r\n border-top: 1px solid #374151;\r\n padding-top: 32px;\r\n text-align: center;\r\n}\r\n.footer-bottom p {\r\n color: #9ca3af;\r\n font-size: 0.875rem;\r\n max-width: 300px;\r\n margin: 0 auto; \/* \u7f6e\u4e2d *\/\r\n}\r\n.footer-bottom a {\r\n color: #d1d5db;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n}\r\n.footer-bottom a:hover {\r\n\tcolor: white;\r\n}\r\n\r\n\/* === \u97ff\u61c9\u5f0f\u8a2d\u8a08\u5340 === *\/\r\n@media (max-width: 768px) {\r\n .container {\r\n padding: 0 16px; \/* \u5c0f\u87a2\u5e55\u7e2e\u6e1b\u5167\u8ddd *\/\r\n }\r\n .header-text h1 {\r\n font-size: 2rem;\r\n }\r\n .header-text p {\r\n font-size: 1rem;\r\n }\r\n .section-header h2 {\r\n font-size: 1.75rem;\r\n }\r\n .features-grid,\r\n .registration-grid {\r\n grid-template-columns: 1fr; \/* \u55ae\u6b04\u4f48\u5c40 *\/\r\n }\r\n .contact-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n }\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n \/* \u512a\u5316\uff1a\u5728\u624b\u6a5f\u55ae\u6b04\u6a21\u5f0f\u4e0b\uff0c\u78ba\u4fdd\u9801\u5c3e\u7684\u54c1\u724c\u548c\u806f\u7d61\u8cc7\u8a0a\u7f6e\u4e2d *\/\r\n .footer-brand {\r\n text-align: center;\r\n }\r\n .brand-header {\r\n justify-content: center; \/* \u8b93 logo \u548c\u6587\u5b57\u7f6e\u4e2d *\/\r\n }\r\n .footer-contact-list {\r\n text-align: center; \/* \u8b93\u806f\u7d61\u8cc7\u8a0a\u7f6e\u4e2d *\/\r\n }\r\n .poster-actions {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n .poster-btn {\r\n width: 100%;\r\n max-width: 200px;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .header-content {\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n .curriculum-grid,\r\n .office-hours-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .social-links {\r\n justify-content: center;\r\n }\r\n \/* \u4fee\u6b63\uff1a\u5728\u6975\u5c0f\u87a2\u5e55\u4e0b\uff0c\u8b93\u8ab2\u7a0b\u5927\u7db1\u5361\u7247\u53ef\u4ee5\u7e2e\u5230\u6975\u9650 *\/\r\n .curriculum-accordion {\r\n max-width: 100%;\r\n width: 100%;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n body {\r\n font-size: 18px;\r\n line-height: 1.6; \/* \u2b05\ufe0f \u52a0\u5927\u884c\u8ddd\uff01\u9810\u8a2d\u662f 1.6 *\/\r\n }\r\n\r\n h1 {\r\n font-size: 3rem;\r\n }\r\n\r\n h2 {\r\n font-size: 2.25rem;\r\n }\r\n\r\n h3 {\r\n font-size: 1.75rem;\r\n }\r\n\r\n h4 {\r\n font-size: 1.25rem;\r\n }\r\n\r\n p,\r\n .feature-card p,\r\n .accordion-content li,\r\n .detail-item p,\r\n .contact-card p,\r\n .footer p,\r\n .footer-contact-list p {\r\n font-size: 1.125rem;\r\n line-height: 1.8; \/* \u2b05\ufe0f \u7d66\u6bb5\u843d\u5167\u6587\u5b57\u66f4\u591a\u7a7a\u9593 *\/\r\n }\r\n\r\n .accordion-header {\r\n font-size: 1.25rem;\r\n }\r\n\r\n .register-btn {\r\n font-size: 1.25rem;\r\n }\r\n}\r\n\r\n\r\n\/* === \u5e73\u6ed1\u6372\u52d5\u6548\u679c === *\/\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\n\/* === \u9032\u5834\u52d5\u756b\uff08\u7531\u4e0b\u5411\u4e0a\u6de1\u5165\uff09 === *\/\r\n@keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n\/* \u5c07 fadeInUp \u5957\u7528\u5230\u5143\u7d20\u6642\u4f7f\u7528\u7684\u985e\u5225 *\/\r\n.fade-in-up {\r\n animation: fadeInUp 0.6s ease-out;\r\n}\r\n<\/style> <link rel=\"icon\" href=\"https:\/\/public-frontend-cos.metadl.com\/mgx\/img\/favicon.png\" type=\"image\/png\"> <script src=\"https:\/\/unpkg.com\/lucide@latest\/dist\/umd\/lucide.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <header class=\"header\">\r\n <div class=\"container\">\r\n <div class=\"header-content\">\r\n <div class=\"header-text\">\r\n <h1>\r\n\t\t\t\t\t\t<i data-lucide=\"graduation-cap\" class=\"header-icon\"><\/i> AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c01\u671f\r\n\t\t\t\t\t<\/h1>\r\n <p style=\"font-weight:bold\">\u958b\u555f\u60a8\u7684\u4eba\u5de5\u667a\u6167\u8077\u6daf\u4e4b\u8def<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"course-info\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>\u8ab2\u7a0b\u8cc7\u8a0a<\/h2>\r\n <p>\u5168\u65b9\u4f4dAI\u6280\u80fd\u57f9\u8a13\uff0c\u5f9e\u96f6\u57fa\u790e\u5230\u5c31\u696d\u6e96\u5099\uff0c\u8b93\u60a8\u638c\u63e1\u4eba\u5de5\u667a\u6167\u6838\u5fc3\u6280\u8853<\/p>\r\n <\/div>\r\n\r\n <div class=\"features-grid\">\r\n <div class=\"feature-card\">\r\n <i data-lucide=\"clock\" class=\"feature-icon\"><\/i>\r\n\t\t\t\t\t<h3>\u8ab2\u7a0b\u7e3d\u6642\u9577<\/h3>\r\n\t\t\t\t\t<p>255\u5c0f\u6642<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n\t\t\t\t\t<i data-lucide=\"users\" class=\"feature-icon\"><\/i>\r\n\t\t\t\t\t<h3>\u5c08\u696d\u8b49\u7167\u52a0\u503c<\/h3>\r\n\t\t\t\t\t<p>iPAS AI\u61c9\u7528\u898f\u5283\u5e2b\uff08\u521d\u7d1a\uff09<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <i data-lucide=\"book-open\" class=\"feature-icon\"><\/i>\r\n <h3>\u5be6\u6230\u9805\u76ee<\/h3>\r\n\t\t\t\t\t<p>AI\u61c9\u7528\u6574\u5408\u8207\u5c08\u984c\u5be6\u4f5c<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <i data-lucide=\"award\" class=\"feature-icon\"><\/i>\r\n <h3>\u5c31\u696d\u4fdd\u8b49<\/h3>\r\n <p>\u5c31\u696d\u8f14\u5c0e&\u4f01\u696d\u5fb5\u624d<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-header\">\r\n <h2>\u8ab2\u7a0b\u5927\u7db1<\/h2>\r\n <p>\u4e86\u89e3\u6bcf\u4e00\u968e\u6bb5\u4f60\u5c07\u5b78\u7fd2\u7684\u5167\u5bb9<\/p>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion-row\">\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t\t\u8077\u5834\u5c31\u696d\u8207\u8077\u80fd\u767c\u5c55<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t <li>\u5c31\u696d\u5e02\u5834\u8da8\u52e2\u5206\u6790\u53ca\u6c42\u8077\u6280\u5de7<\/li>\r\n\t\t\t\t\t <li>\u4eba\u969b\u6e9d\u901a\u8207\u6027\u5225\u5e73\u7b49<\/li>\r\n\t\t\t\t\t <li>\u8077\u5834\u9053\u5fb7\u8207\u8077\u5834\u5de5\u4f5c\u502b\u7406\u548c\u52de\u52d5\u6cd5\u4ee4<\/li>\r\n\t\t\t\t\t <li>\u5c65\u6b77\u64b0\u5beb<\/li>\r\n\t\t\t\t\t <li>\u4f01\u696d\u5fb5\u624d\u6d3b\u52d5<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t \u4eba\u5de5\u667a\u6167\u8207\u8cc7\u6599\u5206\u6790<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t<li>\u5927\u6578\u64da\u5206\u6790\u539f\u7406<\/li>\r\n\t\t\t\t\t<li>\u4eba\u5de5\u667a\u6167\u8207\u6a5f\u5668\u5b78\u7fd2\u539f\u7406<\/li>\r\n\t\t\t\t\t<li>AI\u5f71\u50cf\u8b58\u5225\u539f\u7406<\/li>\r\n\t\t\t\t\t<li>AI\u7a0b\u5f0f\u8a2d\u8a08\u539f\u7406<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t AI\u6280\u8853\u958b\u767c\u8207\u5be6\u52d9<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t<li>\u751f\u6210\u5f0fAI\u63d0\u793a\u5de5\u7a0b\u6280\u8853<\/li>\r\n\t\t\t\t\t<li>AI\u8cc7\u6599\u4e2d\u5fc3\u7ba1\u7406<\/li>\r\n\t\t\t\t\t<li>AI\u7a0b\u5f0f\u8a2d\u8a08\u5be6\u52d9<\/li>\r\n\t\t\t\t\t<li>\u4eba\u5de5\u667a\u6167\u8207\u6a5f\u5668\u5b78\u7fd2\u5be6\u52d9<\/li>\r\n\t\t\t\t\t<li>\u5927\u6578\u64da\u5206\u6790\u5be6\u52d9<\/li>\r\n\t\t\t\t\t<li>\u5927\u6578\u64da\u5206\u6790\u5be6\u52d9<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t AI\u61c9\u7528\u6574\u5408\u8207\u5c08\u984c\u5be6\u4f5c<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t<li>\u751f\u6210\u5f0fAI\u65bc\u7522\u696d\u8207\u9032\u968e\u61c9\u7528<\/li>\r\n\t\t\t\t\t<li>\u7d9c\u5408\u8a55\u91cf<\/li>\r\n\t\t\t\t\t<li>\u5c08\u984c\u88fd\u4f5c\u5be6\u52d9<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"registration-info\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>\u5831\u540d\u8cc7\u8a0a<\/h2>\r\n <p>\u7acb\u5373\u52a0\u5165\u6211\u5011\u7684AI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b\uff0c\u958b\u555f\u60a8\u7684\u79d1\u6280\u8077\u6daf\u65b0\u7bc7\u7ae0<\/p>\r\n <\/div>\r\n\r\n <div class=\"registration-grid\">\r\n <div class=\"registration-card\">\r\n <h3>\u8ab2\u7a0b\u8a73\u60c5<\/h3>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"calendar\" class=\"detail-icon\"><\/i>\r\n <div>\r\n <h4>\u958b\u8ab2\u65e5\u671f<\/h4>\r\n <p>115\u5e741\u670812\u65e5 - 115\u5e743\u670820\u65e5<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"calendar-clock\" class=\"detail-icon\"><\/i>\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<h4>\u5831\u540d\u622a\u81f3\u65e5\u671f<\/h4>\r\n\t\t\t\t\t\t\t<p>114\u5e7412\u670831\u65e5\uff0c16\uff1a00<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"map-pin\" class=\"detail-icon\"><\/i>\r\n <div>\r\n <h4>\u4e0a\u8ab2\u5730\u9ede<\/h4>\r\n\t\t\t\t\t\t\t<p>\u570b\u7acb\u81fa\u5357\u5927\u5b78\u5e9c\u57ce\u6821\u5340<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"dollar-sign\" class=\"detail-icon\"><\/i>\r\n <div>\r\n <h4>\u5b78\u7fd2\u734e\u52f5<\/h4>\r\n\t\t\t\t\t\t\t<p>\u7b26\u540815\u6b72\u81f329\u6b72\u4e4b\u672c\u570b\u7c4d\u5f85\u696d\u9752\u5e74\uff0c\u5831\u540d\u53c3\u8207\u8077\u524d\u8a13\u7df4\u8ab2\u7a0b\u9084\u53ef\u9818\u53d6<a style=\"color:#FF0000;font-weight:bold\">\u5b78\u7fd2\u734e\u52f5\u91d1<\/a>\uff08\u4ee51\u6b21\u70ba\u9650\uff09\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefits-card\">\r\n <h3>\u8ab2\u7a0b\u512a\u52e2<\/h3>\r\n <div class=\"benefits-list\">\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>255\u5c0f\u6642\u5b8c\u6574 AI \u5c08\u696d\u8a13\u7df4<\/span><\/div>\r\n\t\t\t\t\t\t<div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u5b78\u79d1&\u8853\u79d1\u4e26\u884c\uff0c\u7406\u8ad6\u5be6\u4f5c\u540c\u6b65\u638c\u63e1<\/span><\/div>\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u7522\u696d\u5c08\u984c\u5be6\u4f5c\uff0c\u7d50\u696d\u5177\u5099\u4f5c\u54c1\u96c6<\/span><\/div>\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u9762\u8a66\u6280\u5de7\u57f9\u8a13<\/span><\/div>\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u4f01\u696d\u5fb5\u624d\u6d3b\u52d5<\/span><\/div>\r\n\t\t\t\t\t\t<div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u7b26\u5408\u8cc7\u683c\u8005\u53ef\u514d\u8cbb\u4e0a\u8ab2\u4e26\u4eab\u6d25\u8cbc\u3002<a href=\"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/wp-content\/uploads\/2025\/11\/\u751f\u6d3b\u6d25\u8cbc-\u5b78\u7fd2\u734e\u52f5\u91d1\u8acb\u9818\u4e00\u89bd\u88681140314.pdf\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"font-weight:bold\">\u8a73\u60c5\u8acb\u9ede\u6211<\/a><\/span><\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"poster-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header poster-header-custom\"> \r\n <h2>\r\n\t\t\t\t<i data-lucide=\"image\" class=\"section-header-icon\"><\/i> \r\n \u8ab2\u7a0b\u6d77\u5831\r\n <\/h2>\r\n <p>\u4e0b\u65b9\u662f\u6211\u5011\u7684\u8ab2\u7a0b\u6d77\u5831<\/p>\r\n <\/div>\r\n\t\t<div class=\"poster-card\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/wp-content\/uploads\/2025\/12\/V6.png\" alt=\"AI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b\u6d77\u5831\" class=\"poster-img\">\r\n\t\t<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n <section class=\"contact-info\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>\u806f\u7d61\u6211\u5011<\/h2>\r\n <p>\u6709\u4efb\u4f55\u554f\u984c\u6216\u9700\u8981\u66f4\u591a\u8cc7\u8a0a\uff1f\u6211\u5011\u7684\u5c08\u696d\u5718\u968a\u96a8\u6642\u70ba\u60a8\u670d\u52d9<\/p>\r\n <\/div>\r\n\r\n <div class=\"contact-grid\">\r\n <div class=\"contact-card\"><i data-lucide=\"phone\" class=\"contact-icon\"><\/i><h3>\u96fb\u8a71\u8aee\u8a62<\/h3><p class=\"contact-main\">06-2130019<\/p><\/div>\r\n <div class=\"contact-card\"><i data-lucide=\"mail\" class=\"contact-icon\"><\/i><h3>\u96fb\u5b50\u90f5\u4ef6<\/h3><p class=\"contact-main\">aittc.nutn@gmail.com<\/p><\/div>\r\n <div class=\"contact-card\"><i data-lucide=\"map-pin\" class=\"contact-icon\"><\/i><h3>\u8fa6\u516c\u5730\u5740<\/h3><p class=\"contact-main\">\u81fa\u5357\u5927\u5b78AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede\uff08\u601d\u57ce\u6a13F104\u5ba4\uff09<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"office-hours-card\">\r\n <h3>\u71df\u696d\u6642\u9593<\/h3>\r\n <p class=\"office-subtitle\">\u6211\u5011\u7684\u670d\u52d9\u6642\u9593\u5b89\u6392<\/p>\r\n <div class=\"office-hours-grid\">\r\n <div class=\"office-hours-item\">\r\n <i data-lucide=\"clock\" class=\"office-icon\"><\/i>\r\n <div>\r\n <h4>\u96fb\u8a71\u8aee\u8a62\u6642\u9593<\/h4>\r\n\t\t\t\t\t\t\t<p style=\"font-weight:bold\">\u9031\u4e00\u81f3\u9031\u4e94<br>\u65e9\u4e0a08:00-\u4e0b\u534817:30<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"office-hours-item\">\r\n <i data-lucide=\"message-circle\" class=\"office-icon\"><\/i>\r\n <div>\r\n <h4>LINE \u5b98\u65b9\u5e33\u865f<\/h4>\r\n <p style=\"font-weight:bold\">@270jdtoe<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"footer\">\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <div class=\"brand-header\">\r\n <i data-lucide=\"graduation-cap\" class=\"brand-icon\"><\/i>\r\n <h3 style=\"color:#ffff; transform: translateY(9px);\">AI\u8077\u524d\u57f9\u8a13<\/h3>\r\n <\/div>\r\n <p style=\"color:#ffff\">\u5c08\u696d\u7684AI\u6280\u8853\u57f9\u8a13\u6a5f\u69cb\uff0c\u81f4\u529b\u65bc\u57f9\u990a\u4e0b\u4e00\u4ee3AI\u4eba\u624d\uff0c\u70ba\u5b78\u54e1\u63d0\u4f9b\u6700\u512a\u8cea\u7684\u6559\u80b2\u8cc7\u6e90\u548c\u5c31\u696d\u4fdd\u969c\u3002<\/p>\r\n <\/div>\r\n\t\t\t\t\r\n <div class=\"footer-contact\">\r\n <h4 style=\"color:#ffff\">\u806f\u7d61\u8cc7\u8a0a<\/h4>\r\n <div class=\"footer-contact-list\">\r\n <p>\ud83d\udcde 06-2130019<\/p>\r\n <p>\u2709\ufe0f aittc.nutn@gmail.com<\/p>\r\n\t\t\t\t\t\t<p>\ud83d\udccd \u81fa\u5357\u5927\u5b78AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede\uff08\u601d\u57ce\u6a13F104\u5ba4\uff09<\/p>\r\n <p>\ud83d\udcac LINE: @270jdtoe<\/p>\r\n <\/div>\r\n <\/div>\r\n\t\t\t\t<div class=\"footer-bottom\">\r\n\t\t\t\t<p>\u00a9 2025 AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c01\u671f<br>All Rights Reserved.<br>\u8a3b\uff1a\u7522\u696d\u6578\u64da\u4f86\u6e90\u70ba\u52de\u52d5\u90e8\u96f2\u5609\u5357\u5206\u7f72\u59d4\u8a17\u7522\u696d\u9700\u6c42\u5206\u6790\u8abf\u67e5\u5831\u544a\uff0c\u8077\u6daf\u767c\u5c55\u4f9d\u500b\u4eba\u80fd\u529b\u3001\u5e02\u5834\u72c0\u6cc1\u53ca\u4f01\u696d\u9700\u6c42\u800c\u5b9a\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n\t<\/footer>\r\n\r\n <script data-cfasync=\"false\" src=\"\/cdn-cgi\/scripts\/5c5dd728\/cloudflare-static\/email-decode.min.js\"><\/script> <script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n \/*** 1. \u521d\u59cb\u5316 Lucide Icon \u63d2\u4ef6 ***\/\r\n lucide.createIcons();\r\n \r\n \/*** 2. \u9328\u9ede\u5e73\u6ed1\u6efe\u52d5 ***\/\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/*** 3. Scroll \u9032\u5834\u52d5\u756b\uff08IntersectionObserver\uff09 ***\/\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const sectionObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('fade-in-up');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('section').forEach(section => {\r\n sectionObserver.observe(section);\r\n });\r\n\r\n \/*** 4. \u5361\u7247 Hover \u52d5\u756b\u6548\u679c ***\/\r\n const cards = document.querySelectorAll('.feature-card, .contact-card, .registration-card, .benefits-card');\r\n cards.forEach(card => {\r\n card.addEventListener('mouseenter', function () {\r\n this.style.transform = 'translateY(-4px)';\r\n });\r\n card.addEventListener('mouseleave', function () {\r\n this.style.transform = 'translateY(0)';\r\n });\r\n });\r\n\r\n \/*** 5. Ripple \u9ede\u64ca\u52d5\u756b\u6548\u679c\uff08\u6309\u9215\u9ede\u64ca\uff09 ***\/\r\n const buttons = document.querySelectorAll('button');\r\n buttons.forEach(button => {\r\n button.addEventListener('click', function (e) {\r\n const ripple = document.createElement('span');\r\n const rect = this.getBoundingClientRect();\r\n const size = Math.max(rect.width, rect.height);\r\n const x = e.clientX - rect.left - size \/ 2;\r\n const y = e.clientY - rect.top - size \/ 2;\r\n\r\n ripple.style.cssText = `\r\n position: absolute;\r\n width: ${size}px;\r\n height: ${size}px;\r\n left: ${x}px;\r\n top: ${y}px;\r\n background: rgba(255, 255, 255, 0.3);\r\n border-radius: 50%;\r\n transform: scale(0);\r\n animation: ripple 0.6s linear;\r\n pointer-events: none;\r\n `;\r\n\r\n this.style.position = 'relative';\r\n this.style.overflow = 'hidden';\r\n this.appendChild(ripple);\r\n\r\n setTimeout(() => {\r\n ripple.remove();\r\n }, 600);\r\n });\r\n });\r\n\r\n \/*** 6. \u8ab2\u7a0b\u5927\u7db1 Accordion \u4e0b\u62c9\u5340\u584a\u591a\u958b\u6548\u679c\uff08\u652f\u63f4\u7bad\u982d\u65cb\u8f49 + \u591a\u958b\uff09 ***\/\r\n const headers = document.querySelectorAll(\".accordion-header\"); \r\n headers.forEach(header => {\r\n header.addEventListener(\"click\", () => {\r\n const content = header.nextElementSibling;\r\n\r\n \/\/ \u5207\u63db\u5167\u5bb9\u958b\u95dc\r\n content.classList.toggle(\"open\");\r\n header.classList.toggle(\"open\"); \/\/ \u7d66\u7bad\u982d\u65cb\u8f49\u7528\r\n });\r\n});\r\n\r\n \/*** 7. \u61f6\u52a0\u8f09\u5716\u7247\uff08img[data-src]\uff09\u63d0\u5347\u8f09\u5165\u6548\u80fd ***\/\r\n const lazyImages = document.querySelectorAll('img[data-src]');\r\n const imageObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const img = entry.target;\r\n img.src = img.dataset.src;\r\n img.classList.remove('lazy');\r\n imageObserver.unobserve(img);\r\n }\r\n });\r\n });\r\n\r\n lazyImages.forEach(img => imageObserver.observe(img));\r\n});\r\n\r\n\/*** 8. Ripple \u52d5\u756b\u7684 CSS \u52a0\u5165\u5230 <head> ***\/\r\nconst style = document.createElement('style');\r\nstyle.textContent = `\r\n@keyframes ripple {\r\n to {\r\n transform: scale(4);\r\n opacity: 0;\r\n }\r\n}\r\n`;\r\n\t\tdocument.head.appendChild(style);\r\n<\/script> <\/body>\r\n<\/html>\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\/3195"}],"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=3195"}],"version-history":[{"count":8,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3195\/revisions"}],"predecessor-version":[{"id":3237,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3195\/revisions\/3237"}],"wp:attachment":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":3195,"date":"2025-10-30T12:48:09","date_gmt":"2025-10-30T04:48:09","guid":{"rendered":"https:\/\/phpweb2.nutn.edu.tw\/ilt\/wordpress\/?page_id=3195"},"modified":"2026-01-30T23:15:34","modified_gmt":"2026-01-30T15:15:34","slug":"ai-%e6%99%ba%e6%85%a7%e6%8a%80%e8%a1%93%e8%88%87%e6%87%89%e7%94%a8%e4%ba%ba%e6%89%8d%e5%9f%b9%e8%a8%93%e7%8f%ad%e7%ac%ac01%e6%9c%9f","status":"publish","type":"page","link":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/?page_id=3195","title":{"rendered":"AI \u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c01\u671f"},"content":{"rendered":"\r\n\r\n\r\n AI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b - \u958b\u555f\u60a8\u7684\u4eba\u5de5\u667a\u6167\u8077\u6daf\u4e4b\u8def<\/title> <meta name=\"description\" content=\"\u5c08\u696dAI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b\uff0c12\u9031\u5bc6\u96c6\u57f9\u8a13\uff0c100%\u5c31\u696d\u8f14\u5c0e\u3002\u5b78\u7fd2Python\u3001\u6a5f\u5668\u5b78\u7fd2\u3001\u6df1\u5ea6\u5b78\u7fd2\u7b49\u6838\u5fc3\u6280\u8853\uff0c\u7acb\u5373\u5831\u540d\u958b\u555fAI\u8077\u6daf\uff01\">\r\n\r\n <style>\r\n\/* === \u5168\u57df\u91cd\u7f6e\u6a23\u5f0f\uff0c\u78ba\u4fdd\u5404\u700f\u89bd\u5668\u4e00\u81f4\u6027 === *\/\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n \/* \u4fee\u6b63\uff1a\u6dfb\u52a0 overflow-wrap \u78ba\u4fdd\u9577\u6587\u5b57\u5728\u5bb9\u5668\u5167\u63db\u884c *\/\r\n overflow-wrap: break-word; \r\n word-break: break-word;\r\n}\r\n\r\n\/* === \u9810\u8a2d\u5b57\u9ad4\u6a23\u5f0f\u8207\u57fa\u672c\u6587\u5b57\u8a2d\u5b9a === *\/\r\nbody {\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;\r\n line-height: 1.6;\r\n color: #333;\r\n}\r\n\r\n\/* === \u5168\u7ad9\u5bb9\u5668\uff0c\u8a2d\u5b9a\u6700\u5927\u5bec\u5ea6\u8207\u5de6\u53f3\u5167\u8ddd === *\/\r\n.container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n}\r\n\r\n\/* === \u9801\u9996\u6a23\u5f0f === *\/\r\n.header {\r\n background: linear-gradient(135deg, #5e5a98, #320149); \/* \u6f38\u5c64\u80cc\u666f *\/\r\n color: white;\r\n padding: 64px 0;\r\n text-align: center;\r\n}\r\n\r\n.header-content {\r\n display: flex; \/* \u4f7f\u7528 Flexbox \u5c0d\u9f4a\u5716\u793a\u8207\u6587\u5b57 *\/\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n}\r\n\r\n.header-icon {\r\n width: 40px;\r\n height: 40px;\r\n}\r\n\r\n.header-text h1 {\r\n font-size: 3rem;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n\tcolor:#ffff;\r\n}\r\n\r\n.header-text p {\r\n font-size: 1.75rem;\r\n color: #bfdbfe;\r\n}\r\n\r\n\/* === \u5404\u6bb5\u843d\u6a19\u984c\u901a\u7528\u6a23\u5f0f === *\/\r\n.section-header {\r\n text-align: center;\r\n margin-bottom: 48px;\r\n}\r\n\r\n.section-header h2 {\r\n font-size: 2rem;\r\n font-weight: bold;\r\n color: #1f2937;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.section-header p {\r\n font-size: 1.125rem;\r\n color: #6b7280;\r\n max-width:none;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* === \u8ab2\u7a0b\u8cc7\u8a0a\u5340\u584a === *\/\r\n.course-info {\r\n padding: 64px 0;\r\n background: #f9fafb;\r\n}\r\n\r\n\/* \u8ab2\u7a0b\u7279\u8272\u7db2\u683c\u6392\u7248 *\/\r\n.features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); \/* \u81ea\u9069\u61c9\u6b04\u6578 *\/\r\n gap: 24px;\r\n margin-bottom: 48px;\r\n}\r\n\r\n\/* \u55ae\u4e00\u5361\u7247\u6a23\u5f0f *\/\r\n.feature-card {\r\n background: white;\r\n padding: 32px 24px;\r\n border-radius: 12px;\r\n text-align: center;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n text-align: center;\r\n}\r\n\r\n.feature-card:hover {\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\r\n transform: translateY(-2px); \/* \u6ed1\u9f20\u61f8\u505c\u4e0a\u6d6e\u6548\u679c *\/\r\n}\r\n\r\n.feature-icon {\r\n \/* \u2728 \u65b0\u589e display: block \u548c margin: 0 auto; *\/\r\n display: block; \r\n margin: 0 auto 16px auto; \/* \u4e0a\u4e0b\u908a\u8ddd\uff0c\u8b93\u5b83\u6c34\u5e73\u5c45\u4e2d *\/ \r\n width: 28px;\r\n height: 24px;\r\n color: #2563eb;\r\n \/* \u79fb\u9664\u539f\u672c\u7684 margin-bottom: 16px; \u56e0\u70ba\u5408\u4f75\u5230\u4e0a\u9762\u7684 margin \u7c21\u5beb\u4e86 *\/\r\n}\r\n\r\n.feature-card h3 {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.feature-card p {\r\n color: #6b7280;\r\n}\r\n\r\n\/* \u8ab2\u7a0b\u5927\u7db1\u5361\u7247\u6a23\u5f0f *\/\r\n.curriculum-accordion-row {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 24px;\r\n margin-bottom: 32px;\r\n justify-content: center;\r\n}\r\n\r\n.curriculum-accordion {\r\n \/* \u4fee\u6b63\uff1a\u5c07\u56fa\u5b9a\u5bec\u5ea6\u6539\u70ba\u767e\u5206\u6bd4\u914d\u5408 max-width\uff0c\u4ee5\u78ba\u4fdd\u97ff\u61c9\u5f0f\u7e2e\u5c0f *\/\r\n width: 100%; \r\n}\r\n\r\n.accordion-header {\r\n background-color: #5e5a98;\r\n color: white;\r\n padding: 16px;\r\n font-size: 1.125rem;\r\n font-weight: bold;\r\n border: none;\r\n width:100%;\r\n text-align: left;\r\n cursor: pointer;\r\n border-radius: 6px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n transition: background-color 0.3s ease;\r\n}\r\n\r\n.accordion-header:hover {\r\n background-color: #1e40af;\r\n}\r\n\r\n.arrow-icon {\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.accordion-header.open .arrow-icon {\r\n transform: rotate(180deg);\r\n}\r\n\r\n.accordion-content {\r\n max-height: 0;\r\n overflow: hidden;\r\n background-color: #f9fafb;\r\n padding: 0 16px;\r\n transition: all 0.4s ease;\r\n border-radius: 0 0 6px 6px;\r\n}\r\n\r\n\/* \u7528\u4e00\u500b\u5920\u5927\u7684 max-height \u6a21\u64ec\u81ea\u52d5\u5c55\u958b\u9ad8\u5ea6 *\/\r\n.accordion-content.open {\r\n max-height: 1000px;\r\n padding: 16px 24px;\r\n}\r\n\r\n.accordion-content ul {\r\nmargin: 0; \/* \u79fb\u9664\u6240\u6709\u5916\u908a\u8ddd\uff08\u5305\u62ec\u5de6\u5074\u7e2e\u6392\uff09 *\/\r\npadding: 0; \/* \u79fb\u9664\u6240\u6709\u5167\u908a\u8ddd\uff08\u78ba\u4fdd\u5167\u5bb9\u8cbc\u9f4a\u908a\u754c\uff09 *\/\r\nlist-style-type: none; \/* \u79fb\u9664\u5217\u8868\u9805\u76ee\u7b26\u865f *\/\r\n}\r\n\r\n.accordion-content ul li {\r\nmargin-bottom: 6px; \/* \u589e\u52a0\u5217\u8868\u9805\u76ee\u4e4b\u9593\u7684\u9593\u8ddd *\/\r\npadding-left: 0px; \/* \u589e\u52a0\u5de6\u5074\u5167\u8ddd\uff0c\u7528\u65bc\u6a21\u64ec\u9805\u76ee\u7b26\u865f *\/\r\nposition: relative;\r\n}\r\n\r\n.accordion-content ul li::before {\r\ncontent: \"\u2022\"; \/* \u9805\u76ee\u7b26\u865f\uff08\u9ed1\u9ede\uff09 *\/\r\ncolor: #000000; \r\nfont-weight: bold;\r\ndisplay: inline-block;\r\nwidth: 1em; \/* \u78ba\u4fdd\u7b26\u865f\u4f54\u64da\u56fa\u5b9a\u5bec\u5ea6 *\/\r\n\/* \u512a\u5316\uff1a\u8abf\u6574\u5de6\u908a\u8ddd\uff0c\u8b93\u7b26\u865f\u8207\u6587\u5b57\u4fdd\u6301\u66f4\u597d\u7684\u8ddd\u96e2 *\/\r\nmargin-left: -1em; \r\nposition: absolute;\r\nleft: 0;\r\n}\r\n\/* === \u5831\u540d\u8cc7\u8a0a\u5340 === *\/\r\n.registration-info {\r\n padding: 64px 0;\r\n background: white;\r\n}\r\n\r\n.registration-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\r\n gap: 32px;\r\n max-width: 1536px;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* \u5831\u540d\u5361\u7247\u548c\u512a\u52e2\u5361\u7247\u901a\u7528\u6a23\u5f0f *\/\r\n.registration-card,\r\n.benefits-card {\r\n background: white;\r\n padding: 12px;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.registration-card:hover,\r\n.benefits-card:hover {\r\n box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n\/* \u6a19\u984c\u6a23\u5f0f *\/\r\n.registration-card h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #2563eb;\r\n text-align: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n.benefits-card h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n color: #059669;\r\n text-align: center;\r\n margin-bottom: 24px;\r\n}\r\n\r\n\/* \u5831\u540d\u8a73\u60c5 *\/\r\n.detail-item {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 16px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.detail-icon {\r\n width: 24px;\r\n height: 24px;\r\n color: #2563eb;\r\n flex-shrink: 0;\r\n margin-top: 4px;\r\n}\r\n\r\n.detail-item h4 {\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.detail-item p {\r\n color: #6b7280;\r\n}\r\n\r\n\/* \u50f9\u683c\u986f\u793a\u5340 *\/\r\n.price-info {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n\/* \u512a\u52e2\u9805\u76ee\u6a23\u5f0f *\/\r\n.benefits-list {\r\n margin-bottom: 32px;\r\n}\r\n\r\n.benefit-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n margin-bottom: 12px;\r\n}\r\n\r\n.check-icon {\r\n width: 20px;\r\n height: 20px;\r\n color: #059669;\r\n flex-shrink: 0;\r\n}\r\n\r\n\/* \u5831\u540d\u6309\u9215\u6a23\u5f0f *\/\r\n.register-button-container {\r\n text-align: center;\r\n}\r\n.register-btn {\r\n display: inline-block;\r\n background-color:#5e5a98; \/* \u85cd\u8272 *\/\r\n color: #ffffff !important; \/* \u767d\u8272\u6587\u5b57 *\/\r\n padding: 16px 32px; \/* \u52a0\u5927\u5167\u8ddd\u8b8a\u65b9\u584a *\/\r\n border-radius: 8px; \/* \u5713\u89d2\u908a\u6846 *\/\r\n text-decoration: none; \/* \u79fb\u9664\u5e95\u7dda\uff08\u91dd\u5c0d <a>\uff09 *\/\r\n font-size: 1.125rem;\r\n font-weight: bold;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); \/* \u9670\u5f71\u6548\u679c *\/\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n}\r\n\r\n.register-btn:hover {\r\n background-color: #5e5a98; \r\n color: #ffffff !important;\r\n transform: translateY(-2px);\r\n}\r\n\/* === \u8ab2\u7a0b\u6d77\u5831\u5340\u584a === *\/\r\n.poster-section {\r\n padding: 64px 0; \/* \u4e0a\u4e0b\u7559\u767d *\/\r\n background: linear-gradient(135deg, #f0f9ff, #e0e7ff); \/* \u6f38\u5c64\u80cc\u666f *\/\r\n}\r\n.poster-img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n border-radius: 12px;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.poster-header-custom h2 {\r\n display: flex; \r\n align-items: center; \r\n justify-content: center; \r\n gap: 12px;\r\n}\r\n\r\n\/* \u5716\u793a\u672c\u8eab\u7684\u5927\u5c0f\u548c\u984f\u8272\u8a2d\u5b9a\uff0c\u9019\u500b\u53ef\u4ee5\u7dad\u6301 *\/\r\n.section-header-icon {\r\n width: 36px; \r\n height: 36px; \r\n color: #2563eb;\r\n transform: translateY(4px);\r\n}\r\n\r\n\/* \u6d77\u5831\u4e3b\u8981\u5916\u6846 *\/\r\n.poster-card {\r\n background: white;\r\n border-radius: 12px;\r\n overflow: hidden; \/* \u96b1\u85cf\u8d85\u51fa\u908a\u6846\u5167\u5bb9 *\/\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);\r\n max-width: 1024px;\r\n margin: 0 auto;\r\n transition: all 0.3s ease;\r\n}\r\n\r\n.poster-card:hover {\r\n box-shadow: 0 20px 25px rgba(0, 0, 0, 0.15); \/* \u61f8\u505c\u9670\u5f71\u6548\u679c *\/\r\n}\r\n\r\n\/* \u6d77\u5831\u6a19\u984c\u5340 *\/\r\n.poster-header {\r\n background: linear-gradient(135deg, #2563eb, #4338ca);\r\n color: white;\r\n padding: 24px;\r\n text-align: center;\r\n}\r\n\r\n.poster-header h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n}\r\n\r\n\/* === \u806f\u7d61\u8cc7\u8a0a\u5340\u584a === *\/\r\n.contact-info {\r\n padding: 64px 0;\r\n background: linear-gradient(135deg, #f9fafb, #dbeafe);\r\n}\r\n\r\n\/* \u806f\u7d61\u65b9\u5f0f\u7db2\u683c\u5e03\u5c40 *\/\r\n.contact-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 24px;\r\n margin-bottom: 48px;\r\n}\r\n\r\n\/* \u55ae\u4e00\u5361\u7247\u6a23\u5f0f\uff08\u96fb\u8a71\u3001\u90f5\u4ef6\u3001\u5730\u5740\u7b49\uff09 *\/\r\n.contact-card {\r\n background: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(8px);\r\n padding: 32px 24px;\r\n border-radius: 12px;\r\n text-align: center;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease;\r\n}\r\n.contact-card:hover {\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\r\n transform: translateY(-4px);\r\n}\r\n\r\n.contact-icon {\r\n width: 24px;\r\n height: 24px;\r\n color: #2563eb;\r\n margin-bottom: 16px\r\n}\r\n\r\n\/* \u806f\u7d61\u6587\u5b57\u6a23\u5f0f *\/\r\n.contact-card h3 {\r\n font-size: 1.125rem;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n}\r\n.contact-main {\r\n font-weight: 600;\r\n color: #1f2937;\r\n margin-bottom: 4px;\r\n}\r\n.contact-desc {\r\n color: #6b7280;\r\n font-size: 0.875rem;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u5361\u7247 *\/\r\n.office-hours-card {\r\n background: rgba(255, 255, 255, 0.8);\r\n backdrop-filter: blur(8px);\r\n padding: 32px;\r\n border-radius: 12px;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n max-width: 1024px;\r\n margin: 0 auto;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u6a19\u984c\u6a23\u5f0f *\/\r\n.office-hours-card h3 {\r\n font-size: 1.5rem;\r\n font-weight: bold;\r\n text-align: center;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.office-subtitle {\r\n text-align: center;\r\n color: #6b7280;\r\n margin-bottom: 24px;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u6392\u7248 *\/\r\n.office-hours-grid {\r\n display: flex;\r\n justify-content: center; \/* \u6c34\u5e73\u7f6e\u4e2d *\/\r\n gap: 48px; \/* \u5361\u7247\u9593\u8ddd *\/\r\n flex-wrap: wrap;\r\n margin-bottom: 32px;\r\n}\r\n\r\n.office-hours-item {\r\n display: flex;\r\n flex-direction: column; \/* \u5782\u76f4\u6392\u5217 icon + \u6587\u5b57 *\/\r\n align-items: center; \/* \u6c34\u5e73\u7f6e\u4e2d icon \u548c\u6587\u5b57 *\/\r\n text-align: center; \/* \u8b93\u6587\u5b57\u5728\u5bb9\u5668\u5167\u7f6e\u4e2d *\/\r\n gap: 8px;\r\n max-width: 300px; \/* \u907f\u514d\u904e\u5bec *\/\r\n}\r\n\r\n.office-icon {\r\n width: 20px;\r\n height: 20px;\r\n color: #2563eb;\r\n flex-shrink: 0;\r\n margin-top: 4px;\r\n}\r\n\r\n.office-icon {\r\n margin: 0 auto;\r\n}\r\n\r\n\/* \u71df\u696d\u6642\u9593\u5167\u6587\u5b57\u6a23\u5f0f *\/\r\n.office-hours-item h4 {\r\n font-weight: 600;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.office-hours-item p {\r\n color: #6b7280;\r\n font-size: 0.875rem;\r\n}\r\n\r\n\/* === \u9801\u5c3e\u5340\u584a === *\/\r\n.footer {\r\n background: #1f2937;\r\n color: white;\r\n padding: 48px 0;\r\n}\r\n\r\n\/* \u9801\u5c3e\u7db2\u683c\u6392\u7248 *\/\r\n.footer-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px,1fr));\r\n gap: 32px;\r\n margin-bottom: 32px;\r\n}\r\n\r\n.brand-header {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n margin-bottom: 16px;\r\n}\r\n\r\n.brand-icon {\r\n width: 32px;\r\n height: 32px;\r\n color: #60a5fa;\r\n}\r\n\r\n\/* \u54c1\u724c\u8aaa\u660e *\/\r\n.footer-brand h3 {\r\n font-size: 1.25rem;\r\n font-weight: bold;\r\n}\r\n.footer-brand p {\r\n color: #d1d5db;\r\n font-size: 0.875rem;\r\n line-height: 1.6;\r\n}\r\n\r\n\/* \u8d85\u9023\u7d50\u5217\u8868 *\/\r\n.footer-links ul {\r\n list-style: none;\r\n}\r\n.footer-links li {\r\n margin-bottom: 8px;\r\n}\r\n.footer-links a {\r\n color: #d1d5db;\r\n text-decoration: none;\r\n font-size: 0.875rem;\r\n transition: color 0.3s ease;\r\n}\r\n.footer-links a:hover {\r\n color: white;\r\n}\r\n\r\n\/* \u806f\u7d61\u8cc7\u8a0a\u6a23\u5f0f *\/\r\n.footer-contact-list p {\r\n color: #d1d5db;\r\n font-size: 0.875rem;\r\n margin-bottom: 8px;\r\n font-weight:bold;\r\n}\r\n\r\n\/* \u793e\u7fa4\u9023\u7d50 *\/\r\n.social-links {\r\n display: flex;\r\n gap: 16px;\r\n margin-bottom: 16px;\r\n}\r\n.social-link {\r\n color: #d1d5db;\r\n transition: color 0.3s ease;\r\n}\r\n.social-link:hover {\r\n color: #60a5fa;\r\n}\r\n.social-note {\r\n color: #9ca3af;\r\n font-size: 0.75rem;\r\n line-height: 1.5;\r\n}\r\n\r\n\/* \u9801\u5c3e\u5e95\u90e8\u7248\u6b0a\u5217 *\/\r\n.footer-bottom {\r\n border-top: 1px solid #374151;\r\n padding-top: 32px;\r\n text-align: center;\r\n}\r\n.footer-bottom p {\r\n color: #9ca3af;\r\n font-size: 0.875rem;\r\n max-width: 300px;\r\n margin: 0 auto; \/* \u7f6e\u4e2d *\/\r\n}\r\n.footer-bottom a {\r\n color: #d1d5db;\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n}\r\n.footer-bottom a:hover {\r\n\tcolor: white;\r\n}\r\n\r\n\/* === \u97ff\u61c9\u5f0f\u8a2d\u8a08\u5340 === *\/\r\n@media (max-width: 768px) {\r\n .container {\r\n padding: 0 16px; \/* \u5c0f\u87a2\u5e55\u7e2e\u6e1b\u5167\u8ddd *\/\r\n }\r\n .header-text h1 {\r\n font-size: 2rem;\r\n }\r\n .header-text p {\r\n font-size: 1rem;\r\n }\r\n .section-header h2 {\r\n font-size: 1.75rem;\r\n }\r\n .features-grid,\r\n .registration-grid {\r\n grid-template-columns: 1fr; \/* \u55ae\u6b04\u4f48\u5c40 *\/\r\n }\r\n .contact-grid {\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n }\r\n .footer-grid {\r\n grid-template-columns: 1fr;\r\n text-align: center;\r\n }\r\n \/* \u512a\u5316\uff1a\u5728\u624b\u6a5f\u55ae\u6b04\u6a21\u5f0f\u4e0b\uff0c\u78ba\u4fdd\u9801\u5c3e\u7684\u54c1\u724c\u548c\u806f\u7d61\u8cc7\u8a0a\u7f6e\u4e2d *\/\r\n .footer-brand {\r\n text-align: center;\r\n }\r\n .brand-header {\r\n justify-content: center; \/* \u8b93 logo \u548c\u6587\u5b57\u7f6e\u4e2d *\/\r\n }\r\n .footer-contact-list {\r\n text-align: center; \/* \u8b93\u806f\u7d61\u8cc7\u8a0a\u7f6e\u4e2d *\/\r\n }\r\n .poster-actions {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n .poster-btn {\r\n width: 100%;\r\n max-width: 200px;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .header-content {\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n .curriculum-grid,\r\n .office-hours-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n .social-links {\r\n justify-content: center;\r\n }\r\n \/* \u4fee\u6b63\uff1a\u5728\u6975\u5c0f\u87a2\u5e55\u4e0b\uff0c\u8b93\u8ab2\u7a0b\u5927\u7db1\u5361\u7247\u53ef\u4ee5\u7e2e\u5230\u6975\u9650 *\/\r\n .curriculum-accordion {\r\n max-width: 100%;\r\n width: 100%;\r\n }\r\n}\r\n\r\n@media (min-width: 1024px) {\r\n body {\r\n font-size: 18px;\r\n line-height: 1.6; \/* \u2b05\ufe0f \u52a0\u5927\u884c\u8ddd\uff01\u9810\u8a2d\u662f 1.6 *\/\r\n }\r\n\r\n h1 {\r\n font-size: 3rem;\r\n }\r\n\r\n h2 {\r\n font-size: 2.25rem;\r\n }\r\n\r\n h3 {\r\n font-size: 1.75rem;\r\n }\r\n\r\n h4 {\r\n font-size: 1.25rem;\r\n }\r\n\r\n p,\r\n .feature-card p,\r\n .accordion-content li,\r\n .detail-item p,\r\n .contact-card p,\r\n .footer p,\r\n .footer-contact-list p {\r\n font-size: 1.125rem;\r\n line-height: 1.8; \/* \u2b05\ufe0f \u7d66\u6bb5\u843d\u5167\u6587\u5b57\u66f4\u591a\u7a7a\u9593 *\/\r\n }\r\n\r\n .accordion-header {\r\n font-size: 1.25rem;\r\n }\r\n\r\n .register-btn {\r\n font-size: 1.25rem;\r\n }\r\n}\r\n\r\n\r\n\/* === \u5e73\u6ed1\u6372\u52d5\u6548\u679c === *\/\r\nhtml {\r\n scroll-behavior: smooth;\r\n}\r\n\r\n\/* === \u9032\u5834\u52d5\u756b\uff08\u7531\u4e0b\u5411\u4e0a\u6de1\u5165\uff09 === *\/\r\n@keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n}\r\n\r\n\/* \u5c07 fadeInUp \u5957\u7528\u5230\u5143\u7d20\u6642\u4f7f\u7528\u7684\u985e\u5225 *\/\r\n.fade-in-up {\r\n animation: fadeInUp 0.6s ease-out;\r\n}\r\n<\/style> <link rel=\"icon\" href=\"https:\/\/public-frontend-cos.metadl.com\/mgx\/img\/favicon.png\" type=\"image\/png\"> <script src=\"https:\/\/unpkg.com\/lucide@latest\/dist\/umd\/lucide.js\"><\/script>\r\n<\/head>\r\n<body>\r\n\r\n <header class=\"header\">\r\n <div class=\"container\">\r\n <div class=\"header-content\">\r\n <div class=\"header-text\">\r\n <h1>\r\n\t\t\t\t\t\t<i data-lucide=\"graduation-cap\" class=\"header-icon\"><\/i> AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c01\u671f\r\n\t\t\t\t\t<\/h1>\r\n <p style=\"font-weight:bold\">\u958b\u555f\u60a8\u7684\u4eba\u5de5\u667a\u6167\u8077\u6daf\u4e4b\u8def<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/header>\r\n\r\n <section class=\"course-info\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>\u8ab2\u7a0b\u8cc7\u8a0a<\/h2>\r\n <p>\u5168\u65b9\u4f4dAI\u6280\u80fd\u57f9\u8a13\uff0c\u5f9e\u96f6\u57fa\u790e\u5230\u5c31\u696d\u6e96\u5099\uff0c\u8b93\u60a8\u638c\u63e1\u4eba\u5de5\u667a\u6167\u6838\u5fc3\u6280\u8853<\/p>\r\n <\/div>\r\n\r\n <div class=\"features-grid\">\r\n <div class=\"feature-card\">\r\n <i data-lucide=\"clock\" class=\"feature-icon\"><\/i>\r\n\t\t\t\t\t<h3>\u8ab2\u7a0b\u7e3d\u6642\u9577<\/h3>\r\n\t\t\t\t\t<p>255\u5c0f\u6642<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n\t\t\t\t\t<i data-lucide=\"users\" class=\"feature-icon\"><\/i>\r\n\t\t\t\t\t<h3>\u5c08\u696d\u8b49\u7167\u52a0\u503c<\/h3>\r\n\t\t\t\t\t<p>iPAS AI\u61c9\u7528\u898f\u5283\u5e2b\uff08\u521d\u7d1a\uff09<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <i data-lucide=\"book-open\" class=\"feature-icon\"><\/i>\r\n <h3>\u5be6\u6230\u9805\u76ee<\/h3>\r\n\t\t\t\t\t<p>AI\u61c9\u7528\u6574\u5408\u8207\u5c08\u984c\u5be6\u4f5c<\/p>\r\n <\/div>\r\n <div class=\"feature-card\">\r\n <i data-lucide=\"award\" class=\"feature-icon\"><\/i>\r\n <h3>\u5c31\u696d\u4fdd\u8b49<\/h3>\r\n <p>\u5c31\u696d\u8f14\u5c0e&\u4f01\u696d\u5fb5\u624d<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"section-header\">\r\n <h2>\u8ab2\u7a0b\u5927\u7db1<\/h2>\r\n <p>\u4e86\u89e3\u6bcf\u4e00\u968e\u6bb5\u4f60\u5c07\u5b78\u7fd2\u7684\u5167\u5bb9<\/p>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion-row\">\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t\t\u8077\u5834\u5c31\u696d\u8207\u8077\u80fd\u767c\u5c55<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t <li>\u5c31\u696d\u5e02\u5834\u8da8\u52e2\u5206\u6790\u53ca\u6c42\u8077\u6280\u5de7<\/li>\r\n\t\t\t\t\t <li>\u4eba\u969b\u6e9d\u901a\u8207\u6027\u5225\u5e73\u7b49<\/li>\r\n\t\t\t\t\t <li>\u8077\u5834\u9053\u5fb7\u8207\u8077\u5834\u5de5\u4f5c\u502b\u7406\u548c\u52de\u52d5\u6cd5\u4ee4<\/li>\r\n\t\t\t\t\t <li>\u5c65\u6b77\u64b0\u5beb<\/li>\r\n\t\t\t\t\t <li>\u4f01\u696d\u5fb5\u624d\u6d3b\u52d5<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t \u4eba\u5de5\u667a\u6167\u8207\u8cc7\u6599\u5206\u6790<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t<li>\u5927\u6578\u64da\u5206\u6790\u539f\u7406<\/li>\r\n\t\t\t\t\t<li>\u4eba\u5de5\u667a\u6167\u8207\u6a5f\u5668\u5b78\u7fd2\u539f\u7406<\/li>\r\n\t\t\t\t\t<li>AI\u5f71\u50cf\u8b58\u5225\u539f\u7406<\/li>\r\n\t\t\t\t\t<li>AI\u7a0b\u5f0f\u8a2d\u8a08\u539f\u7406<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t AI\u6280\u8853\u958b\u767c\u8207\u5be6\u52d9<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t<li>\u751f\u6210\u5f0fAI\u63d0\u793a\u5de5\u7a0b\u6280\u8853<\/li>\r\n\t\t\t\t\t<li>AI\u8cc7\u6599\u4e2d\u5fc3\u7ba1\u7406<\/li>\r\n\t\t\t\t\t<li>AI\u7a0b\u5f0f\u8a2d\u8a08\u5be6\u52d9<\/li>\r\n\t\t\t\t\t<li>\u4eba\u5de5\u667a\u6167\u8207\u6a5f\u5668\u5b78\u7fd2\u5be6\u52d9<\/li>\r\n\t\t\t\t\t<li>\u5927\u6578\u64da\u5206\u6790\u5be6\u52d9<\/li>\r\n\t\t\t\t\t<li>\u5927\u6578\u64da\u5206\u6790\u5be6\u52d9<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"curriculum-accordion\">\r\n <button class=\"accordion-header\">\r\n\t\t\t\t AI\u61c9\u7528\u6574\u5408\u8207\u5c08\u984c\u5be6\u4f5c<span class=\"arrow-icon\">▼<\/span>\r\n <\/button>\r\n <div class=\"accordion-content\">\r\n <ul>\r\n\t\t\t\t\t<li>\u751f\u6210\u5f0fAI\u65bc\u7522\u696d\u8207\u9032\u968e\u61c9\u7528<\/li>\r\n\t\t\t\t\t<li>\u7d9c\u5408\u8a55\u91cf<\/li>\r\n\t\t\t\t\t<li>\u5c08\u984c\u88fd\u4f5c\u5be6\u52d9<\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"registration-info\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>\u5831\u540d\u8cc7\u8a0a<\/h2>\r\n <p>\u7acb\u5373\u52a0\u5165\u6211\u5011\u7684AI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b\uff0c\u958b\u555f\u60a8\u7684\u79d1\u6280\u8077\u6daf\u65b0\u7bc7\u7ae0<\/p>\r\n <\/div>\r\n\r\n <div class=\"registration-grid\">\r\n <div class=\"registration-card\">\r\n <h3>\u8ab2\u7a0b\u8a73\u60c5<\/h3>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"calendar\" class=\"detail-icon\"><\/i>\r\n <div>\r\n <h4>\u958b\u8ab2\u65e5\u671f<\/h4>\r\n <p>115\u5e741\u670812\u65e5 - 115\u5e743\u670820\u65e5<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"calendar-clock\" class=\"detail-icon\"><\/i>\r\n\t\t\t\t\t\t<div>\r\n\t\t\t\t\t\t\t<h4>\u5831\u540d\u622a\u81f3\u65e5\u671f<\/h4>\r\n\t\t\t\t\t\t\t<p>114\u5e7412\u670831\u65e5\uff0c16\uff1a00<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"map-pin\" class=\"detail-icon\"><\/i>\r\n <div>\r\n <h4>\u4e0a\u8ab2\u5730\u9ede<\/h4>\r\n\t\t\t\t\t\t\t<p>\u570b\u7acb\u81fa\u5357\u5927\u5b78\u5e9c\u57ce\u6821\u5340<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"detail-item\">\r\n <i data-lucide=\"dollar-sign\" class=\"detail-icon\"><\/i>\r\n <div>\r\n <h4>\u5b78\u7fd2\u734e\u52f5<\/h4>\r\n\t\t\t\t\t\t\t<p>\u7b26\u540815\u6b72\u81f329\u6b72\u4e4b\u672c\u570b\u7c4d\u5f85\u696d\u9752\u5e74\uff0c\u5831\u540d\u53c3\u8207\u8077\u524d\u8a13\u7df4\u8ab2\u7a0b\u9084\u53ef\u9818\u53d6<a style=\"color:#FF0000;font-weight:bold\">\u5b78\u7fd2\u734e\u52f5\u91d1<\/a>\uff08\u4ee51\u6b21\u70ba\u9650\uff09\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"benefits-card\">\r\n <h3>\u8ab2\u7a0b\u512a\u52e2<\/h3>\r\n <div class=\"benefits-list\">\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>255\u5c0f\u6642\u5b8c\u6574 AI \u5c08\u696d\u8a13\u7df4<\/span><\/div>\r\n\t\t\t\t\t\t<div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u5b78\u79d1&\u8853\u79d1\u4e26\u884c\uff0c\u7406\u8ad6\u5be6\u4f5c\u540c\u6b65\u638c\u63e1<\/span><\/div>\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u7522\u696d\u5c08\u984c\u5be6\u4f5c\uff0c\u7d50\u696d\u5177\u5099\u4f5c\u54c1\u96c6<\/span><\/div>\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u9762\u8a66\u6280\u5de7\u57f9\u8a13<\/span><\/div>\r\n <div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u4f01\u696d\u5fb5\u624d\u6d3b\u52d5<\/span><\/div>\r\n\t\t\t\t\t\t<div class=\"benefit-item\"><i data-lucide=\"check-circle\" class=\"check-icon\"><\/i><span>\u7b26\u5408\u8cc7\u683c\u8005\u53ef\u514d\u8cbb\u4e0a\u8ab2\u4e26\u4eab\u6d25\u8cbc\u3002<a href=\"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/wp-content\/uploads\/2025\/11\/\u751f\u6d3b\u6d25\u8cbc-\u5b78\u7fd2\u734e\u52f5\u91d1\u8acb\u9818\u4e00\u89bd\u88681140314.pdf\" target=\"_blank\" rel=\"noopener noreferrer\" style=\"font-weight:bold\">\u8a73\u60c5\u8acb\u9ede\u6211<\/a><\/span><\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"poster-section\">\r\n <div class=\"container\">\r\n <div class=\"section-header poster-header-custom\"> \r\n <h2>\r\n\t\t\t\t<i data-lucide=\"image\" class=\"section-header-icon\"><\/i> \r\n \u8ab2\u7a0b\u6d77\u5831\r\n <\/h2>\r\n <p>\u4e0b\u65b9\u662f\u6211\u5011\u7684\u8ab2\u7a0b\u6d77\u5831<\/p>\r\n <\/div>\r\n\t\t<div class=\"poster-card\">\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/wp-content\/uploads\/2025\/12\/V6.png\" alt=\"AI\u8077\u524d\u57f9\u8a13\u8ab2\u7a0b\u6d77\u5831\" class=\"poster-img\">\r\n\t\t<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n <section class=\"contact-info\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <h2>\u806f\u7d61\u6211\u5011<\/h2>\r\n <p>\u6709\u4efb\u4f55\u554f\u984c\u6216\u9700\u8981\u66f4\u591a\u8cc7\u8a0a\uff1f\u6211\u5011\u7684\u5c08\u696d\u5718\u968a\u96a8\u6642\u70ba\u60a8\u670d\u52d9<\/p>\r\n <\/div>\r\n\r\n <div class=\"contact-grid\">\r\n <div class=\"contact-card\"><i data-lucide=\"phone\" class=\"contact-icon\"><\/i><h3>\u96fb\u8a71\u8aee\u8a62<\/h3><p class=\"contact-main\">06-2130019<\/p><\/div>\r\n <div class=\"contact-card\"><i data-lucide=\"mail\" class=\"contact-icon\"><\/i><h3>\u96fb\u5b50\u90f5\u4ef6<\/h3><p class=\"contact-main\">aittc.nutn@gmail.com<\/p><\/div>\r\n <div class=\"contact-card\"><i data-lucide=\"map-pin\" class=\"contact-icon\"><\/i><h3>\u8fa6\u516c\u5730\u5740<\/h3><p class=\"contact-main\">\u81fa\u5357\u5927\u5b78AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede\uff08\u601d\u57ce\u6a13F104\u5ba4\uff09<\/p><\/div>\r\n <\/div>\r\n\r\n <div class=\"office-hours-card\">\r\n <h3>\u71df\u696d\u6642\u9593<\/h3>\r\n <p class=\"office-subtitle\">\u6211\u5011\u7684\u670d\u52d9\u6642\u9593\u5b89\u6392<\/p>\r\n <div class=\"office-hours-grid\">\r\n <div class=\"office-hours-item\">\r\n <i data-lucide=\"clock\" class=\"office-icon\"><\/i>\r\n <div>\r\n <h4>\u96fb\u8a71\u8aee\u8a62\u6642\u9593<\/h4>\r\n\t\t\t\t\t\t\t<p style=\"font-weight:bold\">\u9031\u4e00\u81f3\u9031\u4e94<br>\u65e9\u4e0a08:00-\u4e0b\u534817:30<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"office-hours-item\">\r\n <i data-lucide=\"message-circle\" class=\"office-icon\"><\/i>\r\n <div>\r\n <h4>LINE \u5b98\u65b9\u5e33\u865f<\/h4>\r\n <p style=\"font-weight:bold\">@270jdtoe<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <footer class=\"footer\">\r\n <div class=\"container\">\r\n <div class=\"footer-grid\">\r\n <div class=\"footer-brand\">\r\n <div class=\"brand-header\">\r\n <i data-lucide=\"graduation-cap\" class=\"brand-icon\"><\/i>\r\n <h3 style=\"color:#ffff; transform: translateY(9px);\">AI\u8077\u524d\u57f9\u8a13<\/h3>\r\n <\/div>\r\n <p style=\"color:#ffff\">\u5c08\u696d\u7684AI\u6280\u8853\u57f9\u8a13\u6a5f\u69cb\uff0c\u81f4\u529b\u65bc\u57f9\u990a\u4e0b\u4e00\u4ee3AI\u4eba\u624d\uff0c\u70ba\u5b78\u54e1\u63d0\u4f9b\u6700\u512a\u8cea\u7684\u6559\u80b2\u8cc7\u6e90\u548c\u5c31\u696d\u4fdd\u969c\u3002<\/p>\r\n <\/div>\r\n\t\t\t\t\r\n <div class=\"footer-contact\">\r\n <h4 style=\"color:#ffff\">\u806f\u7d61\u8cc7\u8a0a<\/h4>\r\n <div class=\"footer-contact-list\">\r\n <p>\ud83d\udcde 06-2130019<\/p>\r\n <p>\u2709\ufe0f aittc.nutn@gmail.com<\/p>\r\n\t\t\t\t\t\t<p>\ud83d\udccd \u81fa\u5357\u5927\u5b78AI\u667a\u6167\u6280\u8853\u8207\u61c9\u7528\u4eba\u624d\u57f9\u8a13\u64da\u9ede\uff08\u601d\u57ce\u6a13F104\u5ba4\uff09<\/p>\r\n <p>\ud83d\udcac LINE: @270jdtoe<\/p>\r\n <\/div>\r\n <\/div>\r\n\t\t\t\t<div class=\"footer-bottom\">\r\n\t\t\t\t<p>\u00a9 2025 AI\u667a\u6167\u61c9\u7528\u7522\u696d\u4eba\u624d\u57f9\u8a13\u73ed\u7b2c01\u671f<br>All Rights Reserved.<br>\u8a3b\uff1a\u7522\u696d\u6578\u64da\u4f86\u6e90\u70ba\u52de\u52d5\u90e8\u96f2\u5609\u5357\u5206\u7f72\u59d4\u8a17\u7522\u696d\u9700\u6c42\u5206\u6790\u8abf\u67e5\u5831\u544a\uff0c\u8077\u6daf\u767c\u5c55\u4f9d\u500b\u4eba\u80fd\u529b\u3001\u5e02\u5834\u72c0\u6cc1\u53ca\u4f01\u696d\u9700\u6c42\u800c\u5b9a\u3002<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <\/div>\r\n\t<\/footer>\r\n\r\n <script data-cfasync=\"false\" src=\"\/cdn-cgi\/scripts\/5c5dd728\/cloudflare-static\/email-decode.min.js\"><\/script> <script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n \/*** 1. \u521d\u59cb\u5316 Lucide Icon \u63d2\u4ef6 ***\/\r\n lucide.createIcons();\r\n \r\n \/*** 2. \u9328\u9ede\u5e73\u6ed1\u6efe\u52d5 ***\/\r\n document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n anchor.addEventListener('click', function (e) {\r\n e.preventDefault();\r\n const target = document.querySelector(this.getAttribute('href'));\r\n if (target) {\r\n target.scrollIntoView({\r\n behavior: 'smooth',\r\n block: 'start'\r\n });\r\n }\r\n });\r\n });\r\n\r\n \/*** 3. Scroll \u9032\u5834\u52d5\u756b\uff08IntersectionObserver\uff09 ***\/\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n\r\n const sectionObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('fade-in-up');\r\n }\r\n });\r\n }, observerOptions);\r\n\r\n document.querySelectorAll('section').forEach(section => {\r\n sectionObserver.observe(section);\r\n });\r\n\r\n \/*** 4. \u5361\u7247 Hover \u52d5\u756b\u6548\u679c ***\/\r\n const cards = document.querySelectorAll('.feature-card, .contact-card, .registration-card, .benefits-card');\r\n cards.forEach(card => {\r\n card.addEventListener('mouseenter', function () {\r\n this.style.transform = 'translateY(-4px)';\r\n });\r\n card.addEventListener('mouseleave', function () {\r\n this.style.transform = 'translateY(0)';\r\n });\r\n });\r\n\r\n \/*** 5. Ripple \u9ede\u64ca\u52d5\u756b\u6548\u679c\uff08\u6309\u9215\u9ede\u64ca\uff09 ***\/\r\n const buttons = document.querySelectorAll('button');\r\n buttons.forEach(button => {\r\n button.addEventListener('click', function (e) {\r\n const ripple = document.createElement('span');\r\n const rect = this.getBoundingClientRect();\r\n const size = Math.max(rect.width, rect.height);\r\n const x = e.clientX - rect.left - size \/ 2;\r\n const y = e.clientY - rect.top - size \/ 2;\r\n\r\n ripple.style.cssText = `\r\n position: absolute;\r\n width: ${size}px;\r\n height: ${size}px;\r\n left: ${x}px;\r\n top: ${y}px;\r\n background: rgba(255, 255, 255, 0.3);\r\n border-radius: 50%;\r\n transform: scale(0);\r\n animation: ripple 0.6s linear;\r\n pointer-events: none;\r\n `;\r\n\r\n this.style.position = 'relative';\r\n this.style.overflow = 'hidden';\r\n this.appendChild(ripple);\r\n\r\n setTimeout(() => {\r\n ripple.remove();\r\n }, 600);\r\n });\r\n });\r\n\r\n \/*** 6. \u8ab2\u7a0b\u5927\u7db1 Accordion \u4e0b\u62c9\u5340\u584a\u591a\u958b\u6548\u679c\uff08\u652f\u63f4\u7bad\u982d\u65cb\u8f49 + \u591a\u958b\uff09 ***\/\r\n const headers = document.querySelectorAll(\".accordion-header\"); \r\n headers.forEach(header => {\r\n header.addEventListener(\"click\", () => {\r\n const content = header.nextElementSibling;\r\n\r\n \/\/ \u5207\u63db\u5167\u5bb9\u958b\u95dc\r\n content.classList.toggle(\"open\");\r\n header.classList.toggle(\"open\"); \/\/ \u7d66\u7bad\u982d\u65cb\u8f49\u7528\r\n });\r\n});\r\n\r\n \/*** 7. \u61f6\u52a0\u8f09\u5716\u7247\uff08img[data-src]\uff09\u63d0\u5347\u8f09\u5165\u6548\u80fd ***\/\r\n const lazyImages = document.querySelectorAll('img[data-src]');\r\n const imageObserver = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const img = entry.target;\r\n img.src = img.dataset.src;\r\n img.classList.remove('lazy');\r\n imageObserver.unobserve(img);\r\n }\r\n });\r\n });\r\n\r\n lazyImages.forEach(img => imageObserver.observe(img));\r\n});\r\n\r\n\/*** 8. Ripple \u52d5\u756b\u7684 CSS \u52a0\u5165\u5230 <head> ***\/\r\nconst style = document.createElement('style');\r\nstyle.textContent = `\r\n@keyframes ripple {\r\n to {\r\n transform: scale(4);\r\n opacity: 0;\r\n }\r\n}\r\n`;\r\n\t\tdocument.head.appendChild(style);\r\n<\/script> <\/body>\r\n<\/html>\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\/3195"}],"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=3195"}],"version-history":[{"count":8,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3195\/revisions"}],"predecessor-version":[{"id":3237,"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=\/wp\/v2\/pages\/3195\/revisions\/3237"}],"wp:attachment":[{"href":"https:\/\/phpweb4.nutn.edu.tw\/ilt\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3195"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}