* {  /* 通用選擇器，應用到所有HTML元素 */
            margin: 0; /* 清除所有元素的外邊距 */
            padding: 0; /* 清除所有元素的內邊距 */
            box-sizing: border-box; /* 設定盒模型為border-box，寬高包含padding和border */
        }

        body {  /* 設定網頁主體樣式 */
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 設定字體家族，依序嘗試使用 */
            line-height: 1.6;  /* 設定行高為1.6倍，增加可讀性 */
            color: #333; /* 設定文字顏色為深灰色 */
            background-color: #f8f9fa; /* 設定背景顏色為淺灰白色 */
        }

        .container { /* 容器類別，用於內容置中和限制最大寬度 */
            max-width: 1200px; /* 設定最大寬度為1200px */
            margin: 0 auto; /* 水平置中 */
            padding: 0 20px; /* 左右內邊距20px */
        }

        /* Header */ /* 標題區塊樣式註解 */
        header { /* 網頁標題區塊樣式 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 設定漸層背景，從藍色到紫色，從左上到右下 */
            color: white; /* 文字顏色設為白色 */
            padding: 2rem 0; /* 上下內邊距2rem */
            text-align: center; /* 文字置中對齊 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 添加陰影效果 */
        }

        header h1 {  /* 標題主文字樣式 */
            font-size: clamp(1rem, 5vw, 2.5rem); /* 字體大小2.5rem */
            white-space: nowrap; /*不換行*/
            overflow:hidden; /*超出寬度隱藏*/
            text-overflow:ellipsis; /* 避免過長爆版*/
            margin-bottom: 0.5rem; /* 下邊距0.5rem */
            font-weight: 700; /* 字體粗細為700（粗體） */
        }

        header p { /* 標題副文字樣式 */
            font-size: clamp(1rem, 3vw, 1.5rem); /* 字體大小1.2rem */
            white-space: nowrap; /*不換行*/
            overflow:hidden; /*超出寬度隱藏*/
            text-overflow:ellipsis; /* 避免過長爆版*/
            opacity: 0.9; /* 透明度0.9，略微透明 */
        }

        /* Navigation */ /* 導航選單樣式註解 */
        nav { /* 導航選單容器樣式 */
            background: white;  /* 背景顏色為白色 */
            padding: 1rem 0; /* 上下內邊距1rem */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* 添加陰影效果 */
            position: sticky; /* 黏性定位，滾動時固定在頂部 */
            top: 0;  /* 距離頂部0px */
            z-index: 100; /* 設定層級為100，確保在其他元素之上 */
        }

        .nav-menu { /* 導航選單項目容器 */
            display: flex;  /* 使用彈性佈局 */
            justify-content: center; /* 水平置中 */
            flex-wrap: wrap; /* 允許換行 */
            gap: 2rem; /* 項目間距2rem */
        }

        .nav-item {  /* 導航選單項目樣式 */
            color: #495057; /* 文字顏色為深灰色 */
            text-decoration: none; /* 移除底線 */
            padding: 0.5rem 1rem; /* 內邊距：上下0.5rem，左右1rem */
            border-radius: 25px;  /* 圓角25px */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變效果 */
            font-weight: 500; /* 字體粗細為500（中等粗細） */
        }

        .nav-item:hover, .nav-item.active { /* 導航項目滑鼠懸停和活躍狀態 */
            background: #667eea; /* 背景顏色為藍色 */
            color: white; /* 文字顏色為白色 */
            transform: translateY(-2px); /* 向上移動2px */
        }

        .nav-toggle {
            display: none;
            font-size: 2rem;
            cursor: pointer;
            color: #667eea;
            text-align: right;
            margin-bottom: 1rem;
        }

        /* Main Content */ /* 主要內容區塊樣式註解 */
        main { /* 主要內容容器 */
            padding: 2rem 0; /* 上下內邊距2rem */
        }

        section{
            scroll-margin-top: 80px;
        }

        .section {  /* 內容區塊樣式 */
            display: none;  /* 預設隱藏 */
            animation: fadeIn 0.5s ease-in;  /* 淡入動畫0.5秒 */
        }

        .section.active { /* 活躍狀態的內容區塊 */
            display: block; /* 顯示區塊 */
        }

        @keyframes fadeIn { /* 定義淡入動畫 */
            from { opacity: 0; transform: translateY(20px); } /* 起始狀態：透明且向下20px */
            to { opacity: 1; transform: translateY(0); } /* 結束狀態：不透明且回到原位 */
        }

        .section-title { /* 區塊標題樣式 */
            font-size: 2rem;  /* 字體大小2rem */
            color: #495057; /* 文字顏色為深灰色 */
            margin-bottom: 2rem; /* 下邊距2rem */
            text-align: center; /* 文字置中 */
            position: relative; /* 設定為相對定位，用於偽元素定位 */
        }

        .section-title::after { /* 區塊標題下方裝飾線 */
            content: '';  /* 空內容 */
            position: absolute; /* 絕對定位 */
            bottom: -10px;  /* 距離底部-10px */
            left: 50%; /* 距離左邊50% */
            transform: translateX(-50%); /* 向左移動自身寬度的50%，實現置中 */
            width: 50px; /* 寬度50px */
            height: 3px; /* 高度3px */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 漸層背景 */
            border-radius: 2px; /* 圓角2px */
        }
        
        /*course filter*/ /*課程類別導航樣式*/
        /* —— 分類按鈕列 —— */
        .course-filter {
            display: flex;
            justify-content: center; /*按鈕水平置中*/
            flex-wrap: wrap;
            gap: 1rem; /*按鈕間的間距*/
            margin: 1.5rem 0; /* 按鈕列和上下區塊間距 */
        }

        .filter-btn { /*把按鈕弄成圓角、配色*/
            padding: 0.5rem 1rem;
            background: #e9ecef;
            border: none;
            border-radius: 25px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            color: #495057;
        }
        .filter-btn:hover { /*未點選時的樣式*/
            background: #ced4da;
        }
        .filter-btn.active { /*點選時的樣式*/
            background: #667eea;
            color: white;
        }

        /* —— 當篩選「非當前類別」時，就隱藏該卡片 —— */
        .course-card {
            transition: opacity 0.3s ease, transform 0.3s ease;
        }
        .course-card.hidden { /*讓卡片「淡出、縮小到 0、高度歸零」*/
            /* opacity: 0;
            transform: scale(0.95);
            pointer-events: none;
            height: 0;
            margin: 0;
            padding: 0;
            overflow: hidden; */
            display: none;
        }
        
        /* News */ /* 最新消息樣式註解 */
        .news-section {
            background: #f8f9fc;
        }
        
        .news-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem;
        }

        @media (max-width: 768px) {
        .news-grid {
            grid-template-columns: 1fr;
        }
        }
/* 🔹 公告卡整體樣式 */        
        .news-card {
            background: #fff;
            border-radius: 8px;
            padding:1.2rem 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
            margin-bottom: 1.5rem;
        }
/* 🔹 標題 */
        .news-card h3 {
            margin-bottom: 0.8rem;
            font-size: 1.2rem;
            color: #333;
            font-weight: 600;
        }
/* 🔹 公告列表 */
        .news-list,
        .course-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .news-list li,
        .course-list li {
            padding: 0.75rem 0;
            border-bottom: 1px solid #eee;
            margin-left: 1rem;
        }
/* 🔹 單一公告項目 */
        .news-item {
            position: relative;
            padding: 0.5rem 0 0.5rem 0.5rem;
            border-bottom: 1px solid #eee;
            display: flex;
            flex-direction: column;
        }
/* 🔹 日期（左上角灰色小字） */
        .news-date {
            font-size: 0.8rem;
            color: #999;
            margin-bottom: 0.25rem;
        }
/* 🔹 公告內容 */
        .news-text {
            color: #333;
            font-size: 0.95rem;
            line-height: 1.4;
        }
/* 🔹 滾動軸設定 */
        .scrollable-list {
            max-height: 250px; /* 可以調整這個高度 */
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: #ccc #f9f9f9;
        }
/* 🔹 自訂滾動軸樣式（Chrome / Edge） */
        .scrollable-list::-webkit-scrollbar {
            width: 6px;
        }

        .scrollable-list::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }

        .scrollable-list::-webkit-scrollbar-track {
            background: #f9f9f9;
        }

        /* Course Cards */ /* 課程卡片樣式註解 */
        .course-grid { /* 課程卡片網格容器 */
            display: grid; /* 使用CSS Grid佈局 */
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 自動調整欄數，最小寬度350px */
            gap: 2rem; /* 網格間距2rem */
            margin-top: 2rem; /* 上邊距2rem */
        }
        .course-card { /* 課程卡片樣式 */
            background: white; /* 背景顏色為白色 */
            border-radius: 15px; /* 圓角15px */
            padding: 1.5rem; /* 內邊距1.5rem */
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);  /* 陰影效果 */
            transition: all 0.3s ease;  /* 所有屬性0.3秒漸變 */
            border: 1px solid #e9ecef; /* 邊框1px實線，淺灰色 */
        }

        .course-card:hover { /* 課程卡片滑鼠懸停效果 */
            transform: translateY(-10px); /* 向上移動10px */
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);  /* 加深陰影效果 */
        }

        .course-type { /* 課程類型標籤樣式 */
            display: inline-block; /* 內聯區塊顯示 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);  /* 漸層背景 */
            color: white;  /* 文字顏色為白色 */
            padding: 0.3rem 0.8rem; /* 內邊距：上下0.3rem，左右0.8rem */
            border-radius: 20px; /* 圓角20px */
            font-size: 0.8rem; /* 字體大小0.8rem */
            font-weight: 600; /* 字體粗細為600 */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .course-New { /* 新課程標籤樣式 */
            display: inline-block; /* 內聯區塊顯示 */
            background: linear-gradient(135deg, #ea6666 0%, #eeec6e 100%);  /* 漸層背景 */
            color: white;  /* 文字顏色為白色 */
            padding: 0.3rem 0.8rem; /* 內邊距：上下0.3rem，左右0.8rem */
            border-radius: 20px; /* 圓角20px */
            font-size: 0.8rem; /* 字體大小0.8rem */
            font-weight: 600; /* 字體粗細為600 */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .course-title { /* 課程標題樣式 */
            font-size: 1.3rem; /* 字體大小1.3rem */
            font-weight: 700; /* 字體粗細為700 */
            color: #495057; /* 文字顏色為深灰色 */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .course-second-title { /* 課程eng標題樣式 */
            font-size: 1rem; /* 字體大小1.3rem */
            font-weight: 700; /* 字體粗細為700 */
            color: #495057; /* 文字顏色為深灰色 */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .course-info { /* 課程資訊容器樣式 */
            display: grid; /* 使用Grid佈局 */
            gap: 0.5rem; /* 間距0.5rem */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .course-links { /* 課程連結容器樣式 */
            display: flex; /* 使用彈性佈局 */
            gap: 0.5rem; /* 間距0.5rem */
            margin-top: 1rem; /* 上邊距1rem */
        }

        .course-link { /* 課程連結按鈕樣式 */
            flex: 1; /* 彈性比例為1，平均分配空間 */
            padding: 0.5rem; /* 內邊距0.5rem */
            text-align: center; /* 文字置中 */
            text-decoration: none; /* 移除底線 */
            border-radius: 8px; /* 圓角8px */
            font-weight: 600; /* 字體粗細為600 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
            font-size: 0.9rem; /* 字體大小0.9rem */
        }

        .course-link:hover { /* 課程連結滑鼠懸停效果 */
            transform: translateY(-2px); /* 向上移動2px */
            box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* 添加陰影效果 */
        }

        .course-note {
        background-color: #fff8e5;
        border-left: 4px solid #f4c542;
        padding: 0.75rem 1rem;
        margin-top: 0.75rem;
        font-size: 0.95rem;
        color: #444;
        border-radius: 4px;
        line-height: 1.5;
        }

        .course-note strong {
        color: #c28b00;
        }


        .info-row {  /* 課程資訊行樣式 */
            display: flex;  /* 使用彈性佈局 */
            justify-content: space-between; /* 兩端對齊 */
            align-items: flex-start; /* 左右對齊 */
            padding: 0.3rem 0; /* 上下內邊距0.3rem */
            border-bottom: 1px solid #f8f9fa; /* 底部邊框 */
            margin-bottom: 0.5rem; /* 每列之間保留一點間距，可依需求調整 */
        }

        .info-label { /* 課程資訊標籤樣式 */
            flex:0 0 70px; /* 標題與內容之間的距離，可依照設計需求調整 */
            white-space: nowrap; /* 不要因為空間不足而自動換行 */
            font-weight: 600; /* 字體粗細為600 */
            color: #6c757d; /* 文字顏色為中灰色 */
            font-size: 0.8rem; /* 字體大小0.9rem */
        }

        .info-value { /* 課程資訊值樣式 */
            color: #495057; /* 文字顏色為深灰色 */
            font-size: 0.8rem; /* 字體大小0.9rem */
        }

        .platform-badge { /* 平台標章樣式 */
            background: #28a745; /* 背景顏色為綠色 */
            color: white;  /* 文字顏色為白色 */
            padding: 0.2rem 0.6rem; /* 內邊距：上下0.2rem，左右0.6rem */
            border-radius: 10px; /* 圓角10px */
            font-size: 0.8rem;  /* 字體大小0.8rem */
            font-weight: 600; /* 字體粗細為600 */
        }

        .link-overview { /* 課程概述按鈕樣式 */
            background: #e3f2fd; /* 背景顏色為淺藍色 */
            color: #1976d2; /* 文字顏色為藍色 */
        }

        .link-platform { /* 前往平台按鈕樣式 */
            background: #f3e5f5; /* 背景顏色為淺紫色 */
            color: #7b1fa2; /* 文字顏色為紫色 */
        }

        .link-apply { /* 前往平台按鈕樣式 */
            background: #f5efe5; /* 背景顏色為淺橘色 */
            color: #a2601f; /* 文字顏色為橘色 */
        }

        .enrollment-count { /* 報名人數顯示樣式 */
            background: #fff3cd; /* 背景顏色為淺黃色 */
            color: #856404;  /* 文字顏色為棕色 */
            padding: 0.5rem; /* 內邊距0.5rem */
            border-radius: 8px; /* 圓角8px */
            text-align: center; /* 文字置中 */
            margin-top: 1rem; /* 上邊距1rem */
            font-weight: 600;  /* 字體粗細為600 */
        }

        /* Application Forms */ /* 申請表單樣式註解 */
        .form-grid {  /* 表單網格容器樣式 */
            display: grid; /* 使用Grid佈局 */
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自動調整欄數，最小寬度300px */
            gap: 2rem; /* 間距2rem */
            margin-top: 2rem; /* 上邊距2rem */
        }

        .form-card { /* 表單卡片樣式 */
            background: white; /* 背景顏色為白色 */
            border-radius: 15px; /* 圓角15px */
            padding: 2rem; /* 內邊距2rem */
            text-align: center;  /* 文字置中 */
            box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 陰影效果 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
        }

        .form-card:hover { /* 表單卡片滑鼠懸停效果 */
            transform: translateY(-5px); /* 向上移動5px */
            box-shadow: 0 15px 35px rgba(0,0,0,0.15); /* 加深陰影效果 */
        }

        .form-icon { /* 表單圖示樣式 */
            font-size: 3rem; /* 字體大小3rem */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .form-title { /* 表單標題樣式 */
            font-size: 1.5rem; /* 字體大小1.5rem */
            font-weight: 700; /* 字體粗細為700 */
            color: #495057; /* 文字顏色為深灰色 */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .form-description { /* 表單描述樣式 */
            color: #6c757d;  /* 文字顏色為中灰色 */
            margin-bottom: 2rem; /* 下邊距2rem */
            line-height: 1.6; /* 行高1.6 */
        }

        .form-button { /* 表單按鈕樣式 */
            display: inline-block; /* 行內塊元素 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 漸層背景 */
            color: white;  /* 文字顏色為白色 */
            padding: 1rem 1rem;  /* 內邊距：上下1rem，左右2rem */
            text-decoration: none; /* 移除底線 */
            border-radius: 25px; /* 圓角25px */
            font-weight: 600;  /* 字體粗細為600 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); /* 藍色陰影效果 */
            margin-top: 0.5rem;
        }

        .form-button:hover { /* 表單按鈕滑鼠懸停效果 */
            transform: translateY(-3px); /* 向上移動3px */
            box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4); /* 加深藍色陰影 */
        }

        /* FAQ */ /* 常見問題樣式註解 */
        .faq-container {  /* FAQ容器樣式 */
            max-width: 800px; /* 最大寬度800px */
            margin: 0 auto; /* 水平置中 */
        }

        .faq-item { /* FAQ項目樣式 */
            background: white; /* 背景顏色為白色 */
            border-radius: 10px; /* 圓角10px */
            margin-bottom: 1rem; /* 下邊距1rem */
            box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 陰影效果 */
            overflow: hidden; /* 隱藏溢出內容 */
        }

        .faq-question { /* FAQ問題按鈕樣式 */
            padding: 1.5rem; /* 內邊距1.5rem */
            background: #f8f9fa; /* 背景顏色為淺灰色 */
            cursor: pointer; /* 滑鼠指標為手型 */
            font-weight: 600; /* 字體粗細為600 */
            color: #495057; /* 文字顏色為深灰色 */
            transition: all 0.3s ease;  /* 所有屬性0.3秒漸變 */
            border: none; /* 移除邊框 */
            width: 100%; /* 寬度100% */
            text-align: left; /* 文字左對齊 */
            position: relative; /* 相對定位，用於偽元素 */
            font-size: 1rem;
        }

        .faq-question:hover { /* FAQ問題滑鼠懸停效果 */
            background: #e9ecef; /* 背景顏色變深 */
        }

        .faq-question::after {  /* FAQ問題後的加號圖示 */
            content: '+'; /* 內容為加號 */
            position: absolute; /* 絕對定位 */
            right: 1.5rem; /* 距離右邊1.5rem */
            top: 50%; /* 距離頂部50% */
            transform: translateY(-50%); /* 向上移動自身高度的50%，垂直置中 */
            font-size: 1.5rem; /* 字體大小1.5rem */
            font-weight: 300; /* 字體粗細為300 */
            transition: transform 0.3s ease; /* transform屬性0.3秒漸變 */
        }

        .faq-question.active::after {  /* 活躍狀態的FAQ問題加號旋轉 */
            transform: translateY(-50%) rotate(45deg);  /* 垂直置中並旋轉45度變成X */
        }

        .faq-answer { /* FAQ答案樣式 */
            padding: 0 1.5rem; /* 左右內邊距1.5rem */
            max-height: 0; /* 最大高度為0，初始隱藏 */
            overflow: hidden; /* 隱藏溢出內容 */
            transition: all 0.3s ease; /* 所有屬性0.3秒漸變 */
        }

        .faq-answer.active { /* 活躍狀態的FAQ答案 */
            padding: 1.5rem; /* 內邊距1.5rem */
            max-height: none; /* 最大高度500px，顯示內容 */
        }

        .faq-answer p { /* FAQ答案段落樣式 */
            color: #6c757d; /* 文字顏色為中灰色 */
            line-height: 1.6; /* 行高1.6 */
            text-align: justify;
        }

        .faq-answer ul {
            /* margin-left: 0.5rem; */
            padding-left: 1.2rem;
            list-style-type: disc;
            
        }

        .faq-answer li {
            margin-bottom: 0.4rem;
            color: #6c757d; /* 文字顏色為中灰色 */
            margin-left: 1rem;
        }

        .faq-list {
            padding-left: 2em; /* 控制整體縮排 */
            list-style-type: disc;
            color: #6c757d; /* 文字顏色為中灰色 */
        }

        /* Process Section */  /* 流程區塊樣式註解 */
        .process-grid { /* 流程網格容器樣式 */
            display: grid;  /* 使用Grid佈局 */
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自動調整欄數，最小寬度200px */
            gap: 2rem; /* 間距2rem */
            margin-top: 2rem; /* 上邊距2rem */
        }

        .process-step { /* 流程步驟樣式 */
            background: white; /* 背景顏色為白色 */
            border-radius: 15px; /* 圓角15px */
            padding: 2rem; /* 內邊距2rem */
            text-align: center; /* 文字置中 */
            box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 陰影效果 */
            position: relative;  /* 相對定位 */
        }

        .step-number { /* 步驟編號樣式 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 漸層背景 */
            color: white; /* 文字顏色為白色 */
            width: 50px; /* 寬度50px */
            height: 50px; /* 高度50px */
            border-radius: 50%;  /* 圓角50%，形成圓形 */
            display: flex; /* 使用彈性佈局 */
            align-items: center; /* 垂直置中 */
            justify-content: center; /* 水平置中 */
            font-size: 1.5rem; /* 字體大小1.5rem */
            font-weight: 700; /* 字體粗細為700 */
            margin: 0 auto 1rem; /* 水平置中，下邊距1rem */
        }

        .step-title { /* 步驟標題樣式 */
            font-size: 1.2rem;  /* 字體大小1.2rem */
            font-weight: 700; /* 字體粗細為700 */
            color: #495057; /* 文字顏色為深灰色 */
            margin-bottom: 1rem; /* 下邊距1rem */
        }

        .step-description { /* 步驟描述樣式 */
            color: #6c757d; /* 文字顏色為中灰色 */
            line-height: 1.6; /* 行高1.6 */
            text-align: justify;/* 文字左右對齊 */
        }

        /*頁尾區塊樣式*/
         /* footer */ /* 頁尾區塊樣式註解 */
        footer { /* 頁尾資訊區塊樣式 */
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* 設定漸層背景，從藍色到紫色，從左上到右下 */
            color: white; /* 文字顏色設為白色 */
            padding: 0.5rem 0; /* 上下內邊距2rem */
            text-align:center; /* 文字置中對齊 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 添加陰影效果 */
            text-indent: 0;
            padding: 1rem 1rem;
        }

        footer h1 {  /* 標題主文字樣式 */
            font-size: 2.5rem; /* 字體大小2.5rem */
            margin-bottom: 0.5rem; /* 下邊距0.5rem */
            font-weight: 700; /* 字體粗細為700（粗體） */
        }

        footer p { /* 標題副文字樣式 */
            font-size: 1rem; /* 字體大小1.2rem */
            opacity: 0.9; /* 透明度0.9，略微透明 */
            line-height: 1.6;
            margin: 0 auto;
        }

        .footer-logo-fixed {
            position: fixed;
            bottom: 20px;
            right: 20px;
            height: 50px;
            z-index: 999; /*確保浮在最上層*/
        }

        /* Responsive */ /* 響應式設計樣式註解 */
        @media (max-width: 768px) { /* 螢幕寬度小於768px時的樣式 */
            .nav-toggle{
                display: block;
            }

            .nav-menu {  /* 導航選單在小螢幕的樣式 */
                display: none;
                flex-direction: column;
                gap: 1rem;
                align-items: center;
            }

            .nav-menu.active {
                display: flex;
            }

            header h1 { /* 小螢幕標題樣式 */
                font-size: 2rem; /* 字體大小調整為2rem */
            }

            .course-grid {  /* 小螢幕課程網格樣式 */
                grid-template-columns: 1fr; /* 改為單欄佈局 */
            }

            .form-grid {  /* 小螢幕表單網格樣式 */
                grid-template-columns: 1fr; /* 改為單欄佈局 */
            }

            .process-grid { /* 小螢幕流程網格樣式 */
                grid-template-columns: 1fr; /* 改為單欄佈局 */
            }

            .footer-logo-fixed {
                position:static; /*改為正常流動位置*/
                display: block;
                margin: 1rem auto 0; /*水平置中*/
                height: 40px;
            }

            .news-grid{
                grid-template-columns: 1fr;
            }
        }