@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", "Microsoft JhengHei", sans-serif;
}

html {
    width: 100%;
    height: 100%;
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
    text-size-adjust: none;
    font-size: 15px;
    background-color: #f6ebbc;
}

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

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.t1 {
    font-family: "Noto Sans Japanese";
}


.wap {
    margin: 0;
    width: 100%;
    height: auto;
    background-image: url(../image/ba-01.png);
    background-color: #eadef9;
}

header {
    background-image: url(../image/head-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: auto;
    background-position: center;
    overflow: hidden;
    padding-bottom: 45%;
}

.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);
}

/*圖片切換*/
.pic {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
}

.pic-m {
    width: 0;
    height: 0;
    overflow: hidden;
}

main {
    padding: 10px 0 30px 0;
    overflow: hidden;
    background-color: #eac22a;
}

/* 榜單區 */
main .top01 {
    padding: 0 calc((100% - 1100px)/2);
    text-align: center;
    padding-bottom: 40px;

}

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

main .top01 .st-title {
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin-top: 40px;
    padding: 40px 0 20px 0;
    color: #ffffff;

    /* 白色主字 */
    text-shadow:
        2.5px 0 #663500,
        -2.5px 0 #663500,
        0 2.5px #663500,
        0 -2.5px #663500,
        2.5px 2.5px #663500,
        -2.5px 2.5px #663500,
        2.5px -2.5px #663500,
        -2.5px -2.5px #663500,
        /* 陰影 */
        4px 4px 6px rgba(255, 255, 255, 0.538);


}

main .top01>div {
    padding: 20px 10px 20px 50px;
    background-color: #fff;
    border: 5px solid #f08300;
    border-radius: 15px;
    box-shadow: 0 0 10px #840000;
}

main .top01>div table {
    margin: 0;
    width: 100%;
    text-align: left;
}

main .top01>div table td {
    font-size: 2em;
    line-height: 1.6;
    color: #000000;
}

main .top01>div table td:nth-child(1) {
    width: 20%;
}

main .top01>div table td:nth-child(2) {
    width: 40%;
}

main .top01>div table td:nth-child(3) {
    width: 20%;
    color: #A00000;
}

main .top01>div table td:nth-child(4) {
    width: 20%;
    color: #005BAC;
}

/*應屆榜單*/
.frbox {
    width: 100%;
    /* 計算左右留白，讓內容維持在 1200px 寬度 */
    padding: 0 calc((100% - 1200px) / 2);
    background-image: url(../image/ba-03.png);
    background-color: #f3994f;
    background-repeat: repeat;
    padding-bottom: 50px;
}

.frbox img {
    max-width: 100%;
}

.white-box {
    width: 95%;
    max-width: 1200px;
    margin: 20px auto;
    margin-bottom: 10px;
    padding: 20px;
    background: #fff;
    border: 5px solid #d4a348;
    /* 金色外框 */
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/*狀元榜單*/
.yearist {
    padding: 0 calc((100% - 1500px)/2);
    text-align: center;
    background-color: #f6ebbc;
    background-repeat: repeat;
    padding-bottom: 30px;

}

.yearist .top1 {
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
}


.yearist .top1 ul {}

.yearist .top1 li {
    width: 15%;
    margin: 10px 5px;
    padding: 10px;
    background-color: #d0121b;
    font-size: 1.8em;
    font-weight: bolder;
    color: #fff;
    display: inline-block;
    border: 3px solid #bcbbbb;
    border-radius: 15px;
    box-shadow: 0 0 10px #4f4f4e;

}

.yh1 {
    color: #fff100;
}

.wt1 {
    background-color: #fff;
    width: 100%;
    font-size: 0.7em;
    color: #050505;
    border-radius: 7px;
    padding: 7px;

}


/* 總榜 */

.alllist .st-title {
    font-size: 50px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 700;
    margin-top: 5px;
    padding: 10px;
    /* 粗一點的中文字 */
    color: #D60000;
    /* 白色主字 */
    text-shadow:
        /* 藍色外框八方向 */
        2.5px 0 #fff,
        -2.5px 0 #fff,
        0 2.5px #fff,
        0 -2.5px #fff,
        2.5px 2.5px #fff,
        -2.5px 2.5px #fff,
        2.5px -2.5px #fff,
        -2.5px -2.5px #fff,

        /* 橘色陰影，遠一點模糊一點 */
        4px 4px 6px rgba(255, 200, 0, 0.8);
}


.alllist {
    padding: 0 calc((100% - 1200px)/2);
    text-align: center;
}


.alllist img {
    max-width: 100%;
}

.alllist>div {
    margin: 10px 0 20px;
    padding: 10px 20px;
    background-color: #fff;
    border: 5px solid #bcbbbb;
    border-radius: 15px;
    box-shadow: 0 0 10px #4f4f4e;
}

.grid-container {
    display: grid;
    /* 桌機：6 欄，每欄由「系所+姓名」組成，所以實際上是 12 小格 */
    grid-template-columns: repeat(6, 1fr 1.2fr);
    width: 100%;
    margin-bottom: 0px;
}

/* 只有最後一個容器才需要底部留白 */
.grid-container:last-child {
    margin-bottom: 15px;
}

/* 讓所有格子文字置中 */
.grid-container>div {
    padding: 8px 0;
    font-size: 1.2rem;
    text-align: center;
}

/* --- 自動分色邏輯 --- */

/* 奇數格 (1, 3, 5...) 是系所 */
.old-info>div:nth-child(odd) {
    color: #005BAC;
}

/* 偶數格 (2, 4, 6...) 是姓名 */
.old-info>div:nth-child(even) {
    color: #000;
}

/* 新資料的文字分色 */

/* 奇數格 (1, 3, 5...) 是系所 */
.new-info>div:nth-child(odd) {
    color: #005BAC;
}

/* 偶數格 (2, 4, 6...) 是姓名 */
.new-info>div:nth-child(even) {
    color: #000;
}

/* 如果是新榜單，全部變紅 
.new-info > div { color: #D60000; font-weight: bold; }*/

/* --- 自動畫垂直線 --- */
/* 每兩個格（一組人名）的右邊畫一條線 */
.grid-container>div:nth-child(2n) {
    position: relative;
    border-right: 1px solid #ddd;
}

/* 每排最後一個人 (第12小格) 去掉線 */
.grid-container>div:nth-child(12n) {
    border-right: none;
}



/*考經 */

.experience {
    width: 100%;
    /* 這裡設定底色為藍色，圓點為稍微亮一點的藍色 */
    background-color: #039dd7;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 1.5px);

    /* 調整這裡的數值可以改變圓點的密度 (25px 是間距) */
    background-size: 35px 35px;

    padding: 0 calc((100% - 1200px)/2);
    text-align: center;
    padding-bottom: 50px;
}

.experience .st-title {
    font-size: 50px;
    font-weight: 700;
    text-align: center;
    margin-top: 0px;
    padding: 40px 0 20px 0;
    color: #ffffff;

    /* 藍色外框八方向 */
    text-shadow:
        2.5px 0 #004584,
        -2.5px 0 #004584,
        0 2.5px #004584,
        0 -2.5px #004584,
        2.5px 2.5px #004584,
        -2.5px 2.5px #004584,
        2.5px -2.5px #004584,
        -2.5px -2.5px #004584,

        /* 陰影 */
        4px 4px 6px rgba(255, 255, 255, 0.538);
}

.experience .st-title1 {
    font-size: 70px;
    font-weight: 700;
    text-align: center;
    margin-top: 0px;
    padding: 40px 0 20px 0;
    color: #fedc00;

    /* 藍色外框八方向 */
    text-shadow:
        2.5px 0 #004584,
        -2.5px 0 #004584,
        0 2.5px #004584,
        0 -2.5px #004584,
        2.5px 2.5px #004584,
        -2.5px 2.5px #004584,
        2.5px -2.5px #004584,
        -2.5px -2.5px #004584,

        /* 陰影 */
        4px 4px 6px rgba(255, 255, 255, 0.538);
}

.experience .content {
    width: 100%;
    margin: 0 auto;
    padding: 1%;
}

.experience .content img {
    float: left;
    /* 圖片靠左 */
    width: 70px;
    height: 70px;
    margin: 0 15px 10px 0;
    /* 右邊跟下面留一點空隙 */
    border-radius: 10px;
    /* 稍微圓角就好 */
}

.experience .content ul {
    ist-style-type: none;
    margin: 0;
    padding: 0;
}

.experience .content li {
    width: 31%;
    display: inline-block;
    vertical-align: top;
    line-height: 1.6;
    /* 增加行高，讓繞排的文字更好看 */
    background-color: #fff;
    padding: 20px;
    border-radius: 15px;
    margin: 10px;
    font-size: 1.2em;
    text-align: left;
    /* 確保內文靠左 */
    line-height: 1.6;
    /* 建議加上行高，字大才不會擠 */
    vertical-align: top;
    /* 確保卡片頂部對齊 */
}

.experience .content1 {
    width: 95%;
    vertical-align: top;
    width: 95%;
    max-width: 1200px;
    /* 建議設個最大寬度，避免在大螢幕太扁 */
    background-color: #fff;
    padding: 30px;
    /* 增加內距，更有大字報的感覺 */
    border-radius: 15px;
    margin: 20px auto;
    font-size: 1.2em;
    text-align: left;
    line-height: 1.8;
    /* 主推內容字多，行高可以再大一點點 */
    overflow: hidden;
    /* 重要：防止內容溢出卡片 */
}

.experience .content1 img.main-photo {
    float: left;
    /* 讓圖片浮動，文字就會繞圖 */
    width: 200px;
    /* 根據你的需求調整圖片大小 */
    height: auto;
    margin-right: 25px;
    /* 圖片跟右邊文字的間距 */
    margin-bottom: 10px;
    /* 圖片跟下方文字的間距 */
    border-radius: 10px;
    /* 圖片圓角 */
}

.experience .content1 .cont-h1 {
    font-size: 1.4em;
    color: #EF6A10;
    font-weight: bold;
    display: inline;
    /* 確保它跟圖片在同一行開始 */
}

.cont-h1 {
    color: #EF6A10;
    font-weight: bolder;
}

.cont-h2 {
    color: #c82f8b;
    font-weight: bolder;
}

.updata {
    text-align: center;
    font-size: 1.2em;
    color: #000000;
    padding: 10px;
}






/* ===== moblie ===== */
@media (max-width:767px) {
    header {
        background-image: url(../image/head-moblie.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height: auto;
        padding-bottom: 85%;
    }


    /*圖片切換*/
    .pic {
        width: 0;
        height: 0;
        overflow: hidden;
    }

    .pic-m {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }

    main {
        padding: 0;
    }


    /* 榜單區 */
    main .top01 {
        padding: 0;
        padding-bottom: 20px;
    }

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

    main .top01>div {
        margin: 10px 12px 0px;
        padding: 12px 12px;
        border: 2px solid #FF0000;
    }

    main .top01>div table {
        margin: 0;
        width: 100%;
    }

    main .top01>div table td {
        font-size: 1em;
    }

    main .top01>div table td:nth-child(1) {
        width: 20%;
    }

    main .top01>div table td:nth-child(2) {
        width: 45%;
    }

    main .top01>div table td:nth-child(3) {
        width: 15%;
    }

    main .top01>div table td:nth-child(4) {
        width: 20%;
    }

    main .top01 .st-title {
        font-size: 1.3em;
        margin-top: 10px;
        padding: 15px 0 5px 0;
    }

    /* 1. 榜單通用格子基礎 */
    .grid-container {
        display: grid !important;
        width: 100%;
        background: transparent;
    }

    .grid-container>div {
        font-size: 14px !important;
        /* 統一字級 */
        padding: 2px 0 !important;
        border: none !important;
        /* 先清空所有邊框 */
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        color: #333;
    }

    /*狀元榜單*/
    .yearist {
        padding-bottom: 10px;

    }

    .yearist .top1 {
        width: 100%;
        margin: 0 auto;
        padding: 5px;
    }

    .yearist .top1 ul {
        padding: 0px;
    }

    .yearist .top1 li {
        width: 45%;
        margin: 5px 2.5px;
        padding: 5px;
        font-size: 1em;
        font-weight: bolder;
        color: #fff;
        display: inline-block;
        border: 1.5px solid #bcbbbb;
        border-radius: 15px;
        box-shadow: 0 0 10px #4f4f4e;

    }

    .wt1 {
        font-size: 0.8em;
        color: #050505;
        border-radius: 7px;
        padding: 7px;

    }



    /* 2. 應屆榜單：恢復純白背景與金色邊框 */
    .frbox {
        padding: 0 15px;
        padding-bottom: 15px;
        background-image: url(../image/ba-03m.png);
        background-size: contain;
    }

    .frbox img {
        max-width: 100%;
    }

    .white-box {
        border: 2px solid #d4a348 !important;
        /* 加回金色邊框 */
        background: #ffffff !important;
        /* 純白色背景，不透明 */
        padding: 4px !important;
        margin: 10px auto !important;
        width: 92% !important;
        border-radius: 10px;
        /* 微圓角 */
        box-sizing: border-box;
        display: block !important;
        /* 確保區塊顯示 */
    }

    .white-box .grid-container {
        grid-template-columns: 0.8fr 1.2fr 0.8fr 1.2fr !important;
        row-gap: 2px;
    }

    /* 應屆中間垂直分隔線 */
    .white-box .grid-container>div:nth-child(4n-2) {
        border-right: 1px solid #ccc !important;
    }


    /* 應屆中間垂直分隔線 (只出現在第2格右手邊) */
    .white-box .grid-container>div:nth-child(4n-2) {
        border-right: 1px solid #ccc !important;
    }

    /* 3. 考經區塊：統一「一個一個呈現」且「字級一致」 */
    /* 同時針對 .content(主推) 和 .content1(下方) 設定 */
    .experience .content li,
    .experience .content1 {
        display: block !important;
        width: 92% !important;
        padding: 15px !important;
        /* 稍微縮減內距讓框框變瘦 */
        background-color: #fff;
        box-sizing: border-box;
        float: none !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }

    /* 2. 單獨控制【主推】的間距 */
    .experience .content li {
        margin: 5px auto 15px auto !important;
        /* 只有底部留 5px */
    }

    /* 3. 單獨控制【下方列表】的間距 */
    .experience .content1 {
        /* 如果你覺得下方考經之間太擠，這裡的 margin-top 可以調大 */
        margin: 7px auto !important;
    }

    /* 4. 特別修正：縮短主推與下方列表之間的斷層 */
    /* 如果主推後面緊跟著 content1，強制縮短距離 */
    .experience .content+.content1 {
        margin-top: 0px !important;
    }

    /* 統一考經內文字級數 */
    .experience .content li,
    .experience .content li p,
    .experience .content1,
    .experience .content1 p {
        font-size: 15px !important;
        /* 確保大小一致 */
        line-height: 1.7 !important;
        color: #444 !important;
    }


    .experience .st-title {
        font-size: 1.2em;
        margin-top: 8px;
        padding: 6px 0 10px 0;
    }

    .experience .st-title1 {
        font-size: 1.2em;
        margin-top: 8px;
        padding: 6px 0 10px 0;
    }

    .experience .cont-h1 {
        font-size: 1.1em !important;
        margin-bottom: 12px !important;
        display: block;
    }

    /* 統一照片尺寸 */
    .experience .content img.main-photo,
    .experience .content1 img.main-photo {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto 15px auto !important;
        display: block !important;
        float: none !important;
        border-radius: 50%;
    }

    /* 4. 總榜單：不滿版、中間有線、右邊無線 */
    .alllist {
        padding: 0 15px !important;
        /* 讓整個區塊左右縮進，不貼邊 */
        box-sizing: border-box;
    }

    .alllist>div {
        background: #fff;
        border-left: 2px solid #d8d8d8;
        border-right: 2px solid #d8d8d8;
        /* 這裡處理上下邊框，避免中間出現雙重粗線 */
        border-top: 2px solid #d8d8d8;
        border-bottom: none;
    }

    .alllist,
    .grid-container {
        grid-template-columns: 1fr 1fr 1fr 1fr !important;
        background: #fff;
        border-radius: 8px;
        /* 縮小 padding，特別是上下，解決「分得太開」的問題 */
        padding: 5px 0 !important;
        row-gap: 5px;
    }

    /* 總榜中間垂直線 (只在第一組姓名後方畫線) */
    .alllist .grid-container>div:nth-child(4n-2) {
        border-right: 1px solid #ddd !important;
    }

    /* 確保最右邊(第4n格)絕對沒線 */
    .alllist .grid-container>div:nth-child(4n) {
        border-right: none !important;
    }

    /* 5. 修正「考經」區塊整體間距 */
    .experience {
        padding: 5% 0 !important;
    }



    .updata {
        font-size: 1em;
    }







}