@charset "utf-8";
/* CSS Document */

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-family: "Noto Sans TC", sans-serif;
}

html {
    width: 100%;
    height: 100%;
    text-size-adjust: none;
    font-size: 15px;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}



/*置頂按鈕*/
.gotop {
    position: fixed;
    right: 5px;
    bottom: 5px;
    width: 50px;
    height: 50px;
    background-color: #262625;
    padding: 15px 10px;
    opacity: 0;
    transition: all 0.4s ease-in-out 0s;
    z-index: 999;
    border-radius: 50%;
}

.gotop a {
    text-align: center;
    color: #fff;
    text-decoration: none;
}

.gotop:active {
    box-shadow: 1px 1px 3px 2px rgba(20%, 20%, 40%, 0.5) inset;
    transition: all 0s;
}

.wap {
    margin: 0;
    width: 100%;
    height: auto;
}

header {
    background-image: url(../image/head-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    aspect-ratio: 1500 / 696;
    background-position: center;
    overflow: hidden;
}

.header-data {
    background: linear-gradient(to right, #f9b700 0%, #eee18a 30%, #fccc0c 64%, #f1efc4 100%);
    min-height: 150px;
    /* 關鍵 */
    padding: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.title-outline {
    font-size: 50px;
    font-weight: 900;
    color: #1F429B;
    text-shadow:
        /* 白色外框八方向 */
        2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
        1.5px 1.5px #fff, -1.5px 1.5px #fff, 1.5px -1.5px #fff, -1.5px -1.5px #fff,
        /* 橘色陰影 */
        4px 4px 8px rgba(255, 162, 0, 0.6);
}

@media (max-width:1025px) {
    header {
        background-image: url(../image/head-bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        aspect-ratio: 1500 / 1400;
        background-position: center;
        overflow: hidden;
    }
}

@media (max-width:821px) {
    header {
        background-image: url(../image/head-bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        aspect-ratio: 1500 / 1200;
        background-position: center;
        overflow: hidden;
    }

    .header-data {
        background: linear-gradient(to right, #f9b700 0%, #eee18a 30%, #fccc0c 64%, #f1efc4 100%);
        min-height: 60px;
        /* 關鍵 */
        padding: 10px 0;
    }

    .title-outline {
        font-size: 16px;
        font-weight: 800;
        color: #1F429B;
        text-shadow:
            /* 白色外框八方向 */
            1.5px 0 #fff, -1.5px 0 #fff, 0 1.5px #fff, 0 -1.5px #fff,
            1px 1px #fff, -1px 1px #fff, 1px -1px #fff, -1px -1px #fff,
            /* 橘色陰影 */
            4px 4px 8px rgba(255, 162, 0, 0.6);
    }

}

main {
    padding: 0 0;
    overflow: hidden;
    background-color: #ffcb05;
}

.bluebg {
    background-color: #8894FF;
}

.redbg {
    background-color: #FF5F5F;
}

.whitebg {
    background-color: white;
}

.purplebg {
    background-color: #5E29B2;
}

.f-white {
    color: white;
}

.f-red {
    color: #d42727;
}

.f-yellow {
    color: #fdd100;
}

.f-1d1em {
    font-size: 1em;
}

.f-1d5em {
    font-size: 1.5em;
}

.f-1d2em {
    font-size: 2em;
}

.f-1d3em {
    font-size: 2em;
}

.fw_700 {
    font-weight: 700;
}

.d-inline-block {
    display: inline-block;
}

.p-8 {
    padding: 8px;
}

.p-10 {
    padding: 10px;
}

.py-60 {
    padding: 60px 0;
}

/*手機板段行*/
.br {
    display: none;
}

@media (max-width:821px) {
    .br {
        display: block;
    }
}




main .title-yellow {
    background-color: #FFCE00;
    width: 80%;
    /* 寬度可依需求調整 */
    max-width: 900px;
    height: 90px;
    /* 讓文字垂直居中 */
    border-radius: 50px;
    /* 圓角效果 */
    border: 5px solid #ffffff;
    /* 增加白邊，讓它在紅底上更顯眼 */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    white-space: nowrap;
    /* 避免文字換行 */
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 40px;
}

@media (max-width: 768px) {
    main .title-yellow {
        background-color: #FFCE00;
        border: 4px solid #ffffff;
        border-radius: 25px;
        display: flex;
        height: auto;
        justify-content: center;
        align-items: center;
        padding: 5px 0 0 0;
        width: 90%;
        margin: 0 auto 12px;
    }
}

/* 特殊粗體字 */
/* 基礎字體樣式 */
.st-title text {
    font-weight: 500;
    font-size: 48px;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-miterlimit: 2;
}

.st-title-whiteBorder {
    fill: #fff;
    stroke: #fff;
    stroke-width: 8px;
}

.st-title-purple {
    fill: #542b82;
    stroke: #542b82;
    stroke-width: 1.8px;
}

/* RWD 顯示控制 */
.mobile-only {
    display: none;
}

.desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .st-title text {
        font-weight: 700;
        font-size: 56px;
        /* 手機版字體加大 */
    }

    .st-title-whiteBorder {
        fill: #fff;
        stroke: #fff;
        stroke-width: 15px;
    }

    .st-title-purple {
        fill: #542b82;
        stroke: #542b82;
        stroke-width: 2px;
    }

    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

/* 讓 SVG 內的圖片也能響應切換 */
g.mobile-only,
g.desktop-only {
    pointer-events: none;
    /* 防止圖片干擾文字選取 */
}


/*前三榜單*/
main .top03 {
    position: relative;
    width: 90%;
    max-width: 1200px;
    margin: 80px auto 0;
    /* 電腦版上方留白 */
    background-color: white;
    text-align: center;
    border-radius: 20px;
    padding-top: 60px;
    /* 關鍵：確保內部內容不被絕對定位的標題擋住 */
}

.top03-warp {
    padding: 60px 0;

}

.bg {
    background: url(../image/main_bg.png)repeat;
    background-color: #FF5F5F;
    background-attachment: fixed
}


.top03 .title-bg {
    position: absolute;
    top: 0;
    /* 鎖定在父層頂部邊線 */
    left: 50%;
    height: 100px;
    transform: translate(-50%, -50%);
    /* 向上移動自身一半，達成壓線效果 */
    z-index: 10;
    background-color: #FFCE00;
    width: 80%;
    max-width: 900px;
    border-radius: 50px;
    border: 5px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    display: flex;
    padding: 5px;
    justify-content: center;
    align-items: center;
}


main .top03 .title {
    max-width: 100%;
    position: absolute;
    width: 80%;
    left: 15%;
    top: 0;
}


main .top03 img {
    max-width: 100%;
}

.top03 .container {
    display: flex;
    gap: 20px;
    /* 卡片間距 */
    padding: 20px;
    flex-wrap: wrap;
    justify-content: center;
    /* 卡片不滿 3 個時，往左靠 */

    /* 讓容器本身在白色區塊 (.top03) 裡面置中 */
    margin: 0 auto;
    /* 寬度計算：(卡片 28% * 3) + (gap 20px * 2) 差不多是 90% */
    width: 100%;
    max-width: 1000px;
}

/* 卡片主體 */
.top03 .card {
    background-color: #6c35de;
    /* 使用 calc 讓計算更精準，扣掉 gap 影響 */
    width: calc(33.33% - 14px);

    /* 防止在窄螢幕縮得太小 */
    border-radius: 15px;
    padding: 20px 15px;
    text-align: center;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;

}

.top03 .card .header-box {
    background-color: #f0544f;
    border-radius: 10px;
    padding: 10px 5px;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.top03 .card .header-box .top {
    margin: 0;
    font-size: 28px;
    letter-spacing: 2px;
    font-weight: 600;
    line-height: 1.3;

}

/* 中間文字內容 */
.top03 .card .content {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.top03 .card .content p {
    margin: 0;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
}

/* 下方姓名 */
.top03 .footer-name {
    font-size: 32px;
    letter-spacing: 5px;
    font-weight: 700;
    line-height: 1.2;
}

@media (max-width: 768px) {



    .top03-warp {
        padding: 30px 0;
    }

    main .top03 .title {
        max-width: 100%;
        position: absolute;
        width: 80%;
        left: 15%;
        top: 0;
        padding: 20px 0;
    }

    .top03 .title-bg {
        background-color: #FFCE00;
        border: 4px solid #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 25px;
        height: auto;
        width: 85%;
        line-height: 1.2;
        padding: 5px 0 0 0;
    }

    main .top03 img {
        max-width: 100%;
    }
}


@media (max-width: 768px) {

    /* 3. 關鍵：設定卡片寬度為兩張一排 */
    .top03 .card {
        /* calc(50% - 半個間距) */
        width: calc(50% - 5px);
        min-width: 0;
        /* 強制取消之前的 250px 限制 */
        padding: 10px 10px;
        /* 內距稍微縮小 */
        border-radius: 10px;
    }

    /* 上方紅色區塊 */
    .top03 .card .header-box {
        border-radius: 8px;
        padding: 2px 5px;
        min-height: 55px;
    }



    .top03 .card .header-box .top {
        font-size: 18px;
        /* 縮小 "TOP 1" 等字體 */
        letter-spacing: 1px;
    }

    /* 中間文字內容 */
    .top03 .card .content {
        min-height: 90px;
    }

    .top03 .card .content p {
        font-size: 14px;
        line-height: 1.3;
    }

    .top03 .footer-name {
        font-size: 18px;
        /* 縮小底部姓名 */
        letter-spacing: 2px;
    }
}

@media (max-width: 768px) {
    main .top03 {
        margin: 30px auto 0px;
        /* 增加 margin-top 給標題留空間 */
        padding-top: 60px;
        /* 增加 padding-top 確保內容下移，不被標題擋住 */
        border-radius: 10px;
        position: relative;
    }

    /* 2. 容器間距縮小，留給卡片更多空間 */
    .top03 .container {
        gap: 10px;
        /* 縮小卡片間的縫隙 */
        padding: 60px 10px 10px 10px;
        width: 100%;
    }
}

main .top03 img {
    max-width: 100%;
}

/*總榜*/
.small-text {
    font-size: 32px;
}

main .alllist {
    padding: 50px calc((100% - 1100px)/2);
    text-align: center;
}

@media (max-width:821px) {
    main .alllist img {
        max-width: 100%;
    }

    main .alllist {
        padding: 20px 12px;

    }

    main .alllist img {
        max-width: 90%;
    }
}

/* 基礎表格容器 */
.alllist .table {
    border-radius: 10px;
    /* 5.3 需要在 table 層級移除邊框合併才能看到圓角效果 */
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    background-color: white;
    border: 1px solid #dee2e6;
}

/* 表頭顏色 (深紫色) */
.alllist .header-bg {
    background-color: #4b0082 !important;
    color: white;
}

/* 每一組資料的基礎設定 (解決 5.3 透明與變數問題) */
.alllist .data-item {
    /* 5.3 核心：重置 BS 的背景變數，否則顏色會髒髒的 */
    --bs-table-bg: #e5d5e9;
    --bs-table-bg-type: initial;
    --bs-table-accent-bg: initial;

    background-color: var(--bs-table-bg);
    transition: background-color 0.2s;
    border-left: 1px solid #dee2e6;
    font-size: 1.4rem;
    font-weight: 400;
}

/* --- 滑鼠移過變深 --- */
.alllist .data-item:hover {
    --bs-table-bg-state: #dec2e5 !important;
    background-color: #dec2e5 !important;
    cursor: pointer;
}

/* --- 手機版交錯顏色 (一明一暗) --- */
@media (max-width: 768px) {
    .small-text {
        font-size: 18px;
        margin: 8px;
    }

    /* 奇數行：強制白色 */
    .alllist .data-item:nth-child(odd) {
        --bs-table-bg: #ffffff !important;
        background-color: #ffffff !important;
    }

    /* 偶數行：淺紫色 */
    .alllist .data-item:nth-child(even) {
        --bs-table-bg: #fcefff !important;
        background-color: #fcefff !important;
    }

    .alllist .data-item {
        border-left: none;
        font-size: 1.1rem;
    }
}

/* --- 電腦版交錯顏色 --- */
@media (min-width: 769px) {

    /* 電腦版斑馬紋修正 */
    .alllist .data-item:nth-child(4n+1),
    .alllist .data-item:nth-child(4n+2) {
        --bs-table-bg: #f8f9fa !important;
        background-color: #f8f9fa !important;
    }

    /* 類科與姓名中間細線 */
    .alllist .border-end-mobile {
        border-right: 1px solid #a9acaf;
    }

    /* 移除 Row 預設負邊距 */
    .g-0 {
        margin-right: 0;
        margin-left: 0;
    }
}

/* --- 考經區塊基礎設定 --- */
main .experience {
    padding: 50px calc((100% - 1100px) / 2);
    text-align: center;
}

main .experience img {
    max-width: 100%;
}

/* --- 1. 主容器：強制 1:1 且背景完整 --- */
.experience-card {
    width: 100%;
    max-width: 800px;
    aspect-ratio: 1 / 1;
    /* 嚴格維持正方形 */

    /* 使用 100% 100% 確保底圖完整填滿正方形，不被裁切 */
    background: url('../image/experience-bg.png') no-repeat center center;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    /* 讓內容從頂部開始，配合 Padding 避開頂部紅條 */
    justify-content: flex-start;
    /* 頂部 Padding 加大（約 15%-18%）以避開紅條高度 */
    padding: 12% 5% 8% 5%;
    box-sizing: border-box;
    overflow: hidden;
    margin: 0 auto;
}

.experience-title {
    height: 15%;
}

/* --- 2. 文字縮放與版型 --- */
.main-title {
    color: #483D8B;
    font-weight: 900;
    /* 確保手機版標題夠大且不折行太嚴重 */
    font-size: 1.9rem;
    line-height: 1.3;
    text-align: left;
}

.tag-box {
    border-left: 2px solid #ccc;
    padding-left: 8px;
    font-weight: bold;
    color: #555;
    font-size: clamp(0.79rem, 2vw, 1.2rem);
    line-height: 1.3;
    text-align: left;
}

.content-text {
    font-size: 1.25rem;
    line-height: 1.5;
    /* 稍微縮小行高，防止內容過長撐爆 1:1 框 */
    color: #333;
    text-align: justify;
    margin-bottom: 0.5rem;
}

/* --- 3. 人物組件：手機版自動縮小 --- */
.avatar-wrapper {
    position: relative;
    width: 90%;
    /* 限制人物最大寬度，避免手機版壓迫左側文字 */
    max-width: clamp(100px, 30vw, 220px);
    aspect-ratio: 4 / 5;
    margin-left: auto;
    margin-right: 10%;
}

.deco-yellow {
    position: absolute;
    top: 0;
    right: 0;
    width: 90%;
    height: 90%;
    background-color: #FFCF4B;
    border-top-right-radius: clamp(20px, 5vw, 50px);
    z-index: 1;
}

.avatar-img-box {
    position: absolute;
    bottom: 5%;
    right: 8%;
    width: 90%;
    height: 90%;
    background-color: #A0C4FF;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    border-top-right-radius: clamp(15px, 4vw, 40px);
    border: 3px solid white;
    z-index: 2;
}

.name-badge {
    position: absolute;
    bottom: 0;
    right: -4%;
    background-color: #613DC1;
    color: white;
    padding: 5px clamp(10px, 3vw, 25px);
    border-radius: 50px;
    font-weight: bold;
    font-size: clamp(1.5rem, 2vw, 1rem);
    z-index: 3;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

/* --- 4. Swiper & Bootstrap 修正 --- */
/* 強制維持左右並排，不論螢幕多小都不換行 */
.experience-card .row {
    flex-wrap: nowrap !important;
    width: 100%;
    margin: 0;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* --- RWD 響應式微調 --- */
@media (max-width: 821px) {
    main .experience {
        padding: 20px 12px;
    }

    .experience-card {
        padding: 12% 2% 8% 3%;
    }

    .avatar-wrapper {
        position: relative;
        width: 100%;
        /* 限制人物最大寬度，避免手機版壓迫左側文字 */
        max-width: clamp(100px, 30vw, 220px);
        aspect-ratio: 4 / 5;
        margin-left: auto;
        margin-right: 0;
    }

    .main-title {
        font-size: 1.28rem;
        line-height: 1.4;
        font-weight: bolder;
    }

    .content-text {
        font-size: 0.9rem;
        line-height: 1.5;
        /* 稍微縮小行高，防止內容過長撐爆 1:1 框 */
        color: #333;
        text-align: justify;
        margin-bottom: 0.5rem;
    }


    .name-badge {
        right: -4%;
        padding: 4px clamp(10px, 3vw, 25px);
        font-size: clamp(1rem, 2vw, 1rem);

    }
}



.updata {
    text-align: center;
    font-size: 1.2em;
    color: #ffffff;
    padding-bottom: 30px;
}



/* ===== 其他 ===== */


@media(max-width:1180px) {

    header {
        background-image: url(../image/head-moblie.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: auto;
        padding-bottom: 70%;
    }

    main {
        padding: 0;
    }




    main .alllist img {
        max-width: 90%;
    }


    main .experience img {
        max-width: 90%;
    }




    .updata {
        font-size: 1.3em;
    }




}

/* ===== 平板 ===== */
@media (max-width:821px) {


    main .alllist img {
        max-width: 60%;
    }



    .updata {
        font-size: 1.1em;
    }



}

/* ===== moblie ===== */
@media (max-width:767px) {
    header {
        background-image: url(../image/head-moblie.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        aspect-ratio: 1200 / 980;
        background-position: center;
        overflow: hidden;
    }

    main {
        padding: 0;
    }




    main .top03 {
        padding: 0;

    }

    main .top03 img {
        max-width: 90%;
    }


    .updata {
        font-size: 1em;
    }




}