.preload {
    margin: 0;
    position: absolute;
    top: 20%;     
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 998;
}




    .circleImg {
        border-radius: 50%;
        width: 60px;
        height: 40px;
    }




    .pagination {
        margin: 20px 0;
    }

        .pagination a {
            padding: 8px 16px;
            margin: 0 4px;
            border: 1px solid #ddd;
            text-decoration: none;
            color: #333;
        }

            .pagination a.active {
                background-color: #007bff;
                color: white;
            }

            .pagination a:hover:not(.active) {
                background-color: #ddd;
            }
    /*
    table {
        width: 100%;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    th {
        background-color: #f2f2f2;
    }
    */



    #pagination {
        display: flex; /* 啟用 Flex 佈局 */
        justify-content: center; /* 水平置中 */
        align-items: center; /* 垂直置中 */
        /* 如果要看到垂直置中效果，父容器需要有明確高度，例如 */
        /* height: 100px; */
    }



    .article-author {
        cursor: pointer;
        padding: 10px 0; /* 在標題上下增加一些空間 */
        margin: 0;
        list-style: none; /* 移除列表項目符號 */
        font-size: 14px; /* 調整字體大小 */
    }

    .article-title {
        cursor: pointer;
        padding: 10px 0; /* 在標題上下增加一些空間 */
        margin: 0;
        list-style: none; /* 移除列表項目符號 */
        font-size: 20px; /* 調整字體大小 */
        font-weight: bold; /* 標題加粗 */
    }

    .article-item {
        border-bottom: 1px solid #ccc; /*灰色細線分隔 */
    }
    /* 移除最後一項的分隔線，保持版面整潔 */
    .article-list li:last-child .article-item {
        border-bottom: none;
    }



    .image-container {
        /* 1. 設定容器寬度 (例如：佔父層的 100%) */
        width: 100%;
        /* 2. 關鍵：設定寬度/高度的比例為 16/9 */
        aspect-ratio: 16 / 9;
        /* 3. 確保圖片不會超出容器邊界 */
        overflow: hidden;
    }

        .image-container img {
            /* 讓圖片填滿整個 16:9 的容器 */
            width: 100%;
            height: 100%;
            /* 圖片裁切處理：確保圖片填滿容器並保持自身比例，超出部分會被裁切 */
            object-fit: cover;
            border-radius: 10px;
        }



    .aspect-ratio-box {
        /* 1. 設置寬度 */
        width: 100%;
        /* 2. 關鍵：將高度設置為 0 */
        height: 0;
        /* 3. 關鍵：Padding Hack - 利用垂直 padding 創造高度 */
        /* 9/16 = 56.25% (這是保持 16:9 比例的關鍵數字) */
        padding-top: 56.25%;
        /* 4. 建立相對定位，讓內層圖片可以絕對定位 */
        position: relative;
        /* 5. 確保圖片不會超出容器邊界 */
        overflow: hidden;
    }

    .aspect-ratio-content {
        /* 讓圖片絕對定位，並填滿 Padding Hack 創造出來的空間 */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* 圖片裁切處理 */
        object-fit: cover;
    }



<!--/*輪播圖*/-->

    /* 基本樣式調整，讓輪播容器居中 */
    .owl-carousel {
        max-width: 100%;
        margin: 0 auto;
    }

        .owl-carousel img {
            width: 100%;
            height: 400px; /* 固定高度，可調整 */
            object-fit: cover;
        }
    /* 箭頭樣式自訂（可選） */
    .owl-nav button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /*background: rgba(0, 0, 0, 0.5) !important;*/
        background: rgba(0, 0, 0, 0.8);
        color: white !important;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 40px;
    }

    .owl-prev {
        left: 10px;
    }

    .owl-next {
        right: 10px;
    }


<!--字前紅色一條直線 -->

    .hot-tag {
        position: relative;
        padding-left: 12px; /* 為線留出空間 */
        font-size: 25px;
        font-weight: bold;
        line-height: 1.5;
        display: inline-block;
        cursor: default;
    }

        .hot-tag::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px; /* 線的粗細 */
            height: 1.2em; /* 線高約為文字高度（1em）+ 上下留白 */
            background-color: red;
            border-radius: 2px; /* 可選：讓線條邊角圓潤 */
        }


<!--麵包屑導覽-->

    .breadcrumb {
        list-style: none;
        padding: 0;
        margin: 1rem 0;
        font-size: 0.9rem;
    }

        .breadcrumb li {
            display: inline;
        }

            .breadcrumb li + li:before {
                content: " > ";
                margin: 0 0.5rem;
                color: #666;
            }

        .breadcrumb a {
            color: #007bff;
            text-decoration: none;
        }

            .breadcrumb a:hover {
                text-decoration: underline;
            }

        .breadcrumb .active {
            color: #333;
            font-weight: bold;
        }




    .image-container-carousel {
        position: relative;
        /* display: inline-block;*/
    }

        .image-container-carousel img {
            display: block;
            width: 100%;
        }

        .image-container-carousel .text {
            position: absolute;
            top: 90%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
            text-align: center;
        }


<!--超連結保持原色-->

    .no-blue {
        color: inherit;
        text-decoration: none;
    }

        .no-blue:hover {
            color: inherit;
        }




<!--------------評語顯示開始-------------------->


    /* 全域重置，讓邊距更乾淨 — 完全不使用body選擇器 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* 自定義容器，完全取代body的展示角色 — 不影響同一網頁其他畫面 */
    .card-showcase {
        background: linear-gradient(145deg, #f5f7fa 0%, #e9edf2 100%);
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        min-height: 100vh;
        padding: 30px 20px;
    }

    /* ----- 主要卡片框框 ----- */
    .profile-card {
        /*max-width: 780px;*/
        width: 100%;
        background: white;
        border-radius: 28px;
        box-shadow: 0 20px 35px -8px rgba(0, 0, 0, 0.12), 0 8px 16px -6px rgba(0, 0, 0, 0.02);
        padding: 24px 28px;
        /* 關鍵佈局：flex 排左(人像) + 中(名稱/介紹) + 右(日期) */
        display: flex;
        gap: 22px;
        transition: all 0.2s ease;
        border: 1px solid rgba(255,255,255,0.5);
        backdrop-filter: blur(2px);
        position: relative;
    }

    /* 左邊 —— 人像圖片區 */
    .card-avatar {
        flex-shrink: 0; /* 防止被壓縮 */
        display: flex;
        align-items: flex-start; /* 讓圖片頂部對齊卡片上緣，更乾淨 */
    }

    .avatar-img {
        width: 104px;
        height: 104px;
        object-fit: cover;
        border-radius: 20px;
        background: #d9e2ef; /* 圖片萬一沒載入時顯示柔和底色 */
        box-shadow: 0 10px 18px -6px rgba(0,0,0,0.08);
        border: 3px solid white;
        transition: transform 0.25s;
        display: block; /* 移除 inline 多餘間隙 */
    }

        /* 簡單 hover 效果，增加互動感 */
        .avatar-img:hover {
            transform: scale(1.02);
        }

    /* 中間區塊 — 人員名稱 + 人員介紹 （垂直排列） */
    .card-info {
        flex: 1; /* 撐滿剩餘空間，把日期推到最右 */
        display: flex;
        flex-direction: column;
        justify-content: center; /* 垂直置中，但保留名稱靠上，介紹緊接在後 */
        padding-top: 4px; /* 微調視覺，跟人像頂部不要差太多 */
    }

    /* 人員名稱 — 位於中上 */
    .person-name {
        font-size: 1.8rem;
        font-weight: 650;
        letter-spacing: -0.01em;
        line-height: 1.2;
        color: #1f2a44;
        margin-bottom: 10px;
        word-break: break-word;
    }

    /* 人員介紹 — 位於名稱下方 */
    .person-bio {
        font-size: 1rem;
        line-height: 1.55;
        color: #3e4a5e;
        opacity: 0.86;
        font-weight: 400;
        max-width: 340px; /* 控制介紹寬度，閱讀更舒適 */
        word-break: break-word;
    }

    /* 右邊 — 日期區塊，完全靠右 */
    .card-date {
        flex-shrink: 0; /* 不壓縮 */
        display: flex;
        align-items: flex-start; /* 日期內容與卡片頂部對齊 */
        justify-content: flex-end;
        min-width: 70px;
        margin-left: 6px; /* 跟介紹內容稍微拉開，視覺不擁擠 */
    }

    .date-badge {
        background: #f2f5f9;
        padding: 10px 16px;
        border-radius: 50px; /* 膠囊造型，更精緻 */
        font-size: 0.95rem;
        font-weight: 530;
        color: #1f3a5f;
        letter-spacing: 0.3px;
        border: 1px solid #eaeef4;
        box-shadow: 0 2px 6px rgba(0,0,0,0.02);
        white-space: nowrap; /* 日期保持單行，若長日期可改為正常換行 */
        display: flex;
        align-items: center;
        gap: 6px;
    }

        /* 可選: 在日期前加個小圖標，更有辨識度 */
        .date-badge::before {
            content: "📅";
            font-size: 0.9rem;
            opacity: 0.8;
            margin-right: 4px;
        }

    /* 簡單點綴：仿邊框光澤 */
    .profile-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 28px;
        pointer-events: none;
        box-shadow: inset 0 1px 2px rgba(255,255,255,0.6);
    }

    /* 卡片之間的間距 */
    .profile-card:not(:last-child) {
        margin-bottom: 30px;
    }

    /* 響應式：當寬度不足時，微調佈局讓所有內容清楚 */
    @@media (max-width: 550px) {
        .profile-card {
            flex-wrap: wrap; /* 允許換行，但依然維持左圖、右上名稱等關係？ */
            padding: 22px;
        }

        .card-avatar {
            width: 100%;
            justify-content: center;
            margin-bottom: 10px;
        }

        .avatar-img {
            width: 90px;
            height: 90px;
        }

        .card-info {
            width: 70%; /* 給予主要資訊區塊彈性 */
            flex: 1 1 60%;
        }

        .person-name {
            font-size: 1.6rem;
        }

        .card-date {
            align-items: center; /* 垂直置中 */
            margin-left: 0;
        }

        .date-badge {
            white-space: normal; /* 允許日期換行 */
            text-align: right;
        }
    }

    /* 小手機，更極限壓縮 */
    @@media (max-width: 420px) {
        .profile-card {
            flex-direction: column; /* 改為垂直，但依然保留左、中、右的視覺順序？ */
            align-items: stretch;
        }

        .card-avatar {
            justify-content: flex-start;
        }

        .card-info {
            width: 100%;
        }

        .card-date {
            justify-content: flex-start;
            margin-top: 8px;
        }

        .date-badge {
            white-space: nowrap;
        }
    }




    .rwd-button {
        /* 顏色與文字 */
        background-color: #ff0000; /* 紅色底色 */
        color: white; /* 白色文字 */
        text-align: center; /* 文字置中 */
        /* 邊框與外觀 */
        border: none; /* 移除預設邊框 */
        padding: 15px 20px; /* 上下內距15px，左右內距20px */
        font-size: 18px; /* 文字大小 */
        font-weight: bold; /* 粗體字（可選） */
        border-radius: 8px; /* 圓角（可選） */
        cursor: pointer; /* 滑鼠指標 */
        /* RWD 寬度設定 */
        width: 100%; /* 佔滿父層寬度 */
        max-width: 600px; /* 最大寬度 600px，避免在大螢幕過寬 */
        min-width: 200px; /* 最小寬度 200px，避免在小螢幕過窄 */
        /* 左右自動外距，配合 max-width 讓按鈕置中 */
        display: block;
        margin-left: auto;
        margin-right: auto;
        /* 過渡效果（可選） */
        transition: background-color 0.3s;
    }

        /* 滑鼠懸停效果（可選） */
        .rwd-button:hover {
            background-color: #cc0000; /* 深紅色 */
        }



    .scrollable-menu {
        height: auto;
        max-height: 200px;
        overflow-x: hidden;
    }



<!--------------評語顯示結束-------------------->