@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;
}



.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 / 673;
    background-position: center;
    overflow: hidden;
}




@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;
}


.f-white {
    color: white;
}

.f-red {
    color: #d42727;
}

.f-yellow {
    color: #fdd100;
}



.fs-80 {
    font-size: 80px;
}

.fw_700 {
    font-weight: 700;
}

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


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

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

/*圖片切換*/
.pic main .title-pink {
    background-color: #ff66a4;
    width: 80%;
    /* 寬度可依需求調整 */
    max-width: 900px;
    height: 90px;
    /* 讓文字垂直居中 */
    border-radius: 20px;
    /* 圓角效果 */
    border: 5px solid #ffffff;
    /* 增加白邊，讓它在紅底上更顯眼 */
    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-pink {
        background-color: #ff66a4;
        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: 1px;
}

.st-title-white {
    fill: #fff;
    stroke: #fff;
}

.st-title-yellow {
    fill: #fff200;
    stroke: #fff200;
}

.st-title-yellow-top3 {
    fill: #fff200;
    stroke: #fff200;
    stroke-width: 3px;
    font-size: 70px;
}

@media (max-width: 768px) {
    .st-title-white {
        fill: #fff;
        stroke: #fff;
        border: 5px;
    }

    .st-title-yellow {
        fill: #fff200;
        stroke: #fff200;
        stroke-width: 2px;
    }

    .st-title-yellow-top3 {
        fill: #fff200;
        stroke: #fff200;
        stroke-width: 2px;
        font-size: 90px;
    }
}

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

.desktop-only {
    display: block;
}

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


    .mobile-only {
        display: block;
    }

    .desktop-only {
        display: none;
    }
}

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

/*前十榜單*/
.top10-warp {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

@media (max-width:820px) {
    .top10-warp {
        max-width: 100%;
        margin: 0 auto;
        width: 90%;
    }
}

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

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

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

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

.bluebg {
    background-color: #ef7d38;
}

.pinkbg-warp {
    background-color: #ffc3db;
}
.yellow{background-color: #f6d959;}
.greenbg {
    background-color: #a1e9e9;
}



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






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


main .top03 .top03-title {
    font-size: 50px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 700;
    margin-bottom: 5px;
    /* 粗一點的中文字 */
    color: #F44A4A;
    /* 白色主字 */
    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(186, 149, 176, 0.8);
}

main .all .top03-title {
    font-size: 50px;
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    font-weight: 700;
    margin-bottom: 5px;
    /* 粗一點的中文字 */
    color: #F44A4A;
    /* 白色主字 */
    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(186, 149, 176, 0.8);
}

@media (max-width:820px) {
    main .top03 .top03-title {
        font-size: 22px;
        line-height: 1.2;
        font-weight: 600;
    }

    main .all .top03-title {
        font-size: 22px;
        line-height: 1.2;
        font-weight: 600;
    }
}


/*前三表格*/

.top03-titleWarp table {
    width: 100%;
    text-align: left;
}

.top03-titleWarp table tr:nth-child(odd) {
    background-color: #FCEFAB;
}

.top03-titleWarp .trBlueBg table tr:nth-child(odd) {
    background-color: #e4f3ff;
}

.top03-titleWarp table td {
    padding: 10px 0;
    font-size: 2.4rem;
    line-height: 1.6;
    color: #542B82;
    font-weight: bold;
    text-align: center;
}



@media (max-width:820px) {

    .title-bg {
        height: 95px;
        width: 95%;
        max-width: 900px;
        border-radius: 15px;
        border: 3px solid #ffffff;
        padding: 0px 10px 0px;font-weight: bolder;
    }


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

    main .all {
        position: relative;
        width: 90%;
        max-width: 100%;
        margin: 70px auto 0;
        /* 電腦版上方留白 */
        background-color: white;
        text-align: center;
        border-radius: 10px;
        padding: 50px 5px 30px;
        /* 關鍵：確保內部內容不被絕對定位的標題擋住 */
    }


}




/*總榜*/
.overallList table {
    width: 100%;
    text-align: left;
}

.overallList table tr:nth-child(odd) {
    background-color: #FCEFAB;
}

.overallList .trBlueBg table tr:nth-child(odd) {
    background-color: #e4f3ff;
}

.overallList table td {
    padding: 10px 0;
    font-size: 2.4rem;
    line-height: 1.6;
    color: #542B82;
    font-weight: bold;
    text-align: center;
}

.overallList table td:nth-child(1) {
    width: 15%;
    padding-left: 15px;
    text-align: center;
}

.overallList table td:nth-child(2) {
    width: 25%;

}

.overallList table td:nth-child(3) {
    width: 30%;
}

.overallList table td:nth-child(4) {
    width: 30%;
}

@media (max-width:820px) {

    .overallList table td {
        padding: 10px 2px;
        font-size: 0.9rem;
        line-height: 1.2;
        color: #542B82;
        font-weight: bold;
        text-align: center;
    }

    .overallList table td:nth-child(1) {
        width: 15%;
        padding-left: 15px;

    }

    .overallList table td:nth-child(2) {
        width: 25%;

    }

    .overallList table td:nth-child(3) {
        width: 30%;
    }

    .overallList table td:nth-child(4) {
        width: 30%;
    }
}


/*歷屆狀元*/
/*---------------------------PART2-----------------------------------*/
#part2 {
    font-size: 1.6vw;
}

#pt2-1 {
    -ms-flex: 0 0 83.333%;
    flex: 0 0 83.333%;
    max-width: 83.333%;
}

#part2 .list_1 li {
    position: relative;
    color: #243c51;
    font-weight: 700;
    width: calc(100%/5.2);
    margin-bottom: 1em;
    margin-top: -1em;
}

#part2 .list_1 li .wheat {
    background-image: url(../image/wheat.svg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    -ms-background-size: contain;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    line-height: 1.4;
    padding-top: 1.5em;
    padding-bottom: 0.5em;
}

#part2 .list_1 li p.name {
    color: #87000e;
    font-weight: 700;
    text-shadow: 0 0 0.1em #fff,
        0 0 0.1em #fff, 0 0 0.1em #fff,
        0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.1em #fff,
        0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.1em #fff,
        0 0 0.1em #fff, 0 0 0.1em #fff, 0 0 0.1em #fff,
        0 0 0.1em #fff;
    background-image: url(../image/tag.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    padding: .2em 2em .3em 2em;
    position: relative;
    bottom: 0.6em;
    display: inline-block;
    font-size: 2vw;
}

@media screen and (max-width: 1600px) {
    #pt2-1 {
        -ms-flex: 0 0 91.666%;
        flex: 0 0 91.666%;
        max-width: 91.666%;
    }
}

@media screen and (max-width: 1200px) {
    #part2 {
        font-size: 2.2em;
    }

    #pt2-1 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    #part2 .list_1 li {
        width: calc(100%/4.2);

    }
}

@media screen and (max-width: 821px) {
    #part2 {
        font-size: 3.4vw;
    }

    #part2 .list_1 li {
        width: calc(100%/3.2);
        margin-bottom: 0em;
        margin-top: -1.4em;
    }


    #part2 .list_1 li p.name {
        color: #87000e;
        padding: .1em 1.2em .2em 1.2em;
        position: relative;
        bottom: 0.5em;
        display: inline-block;
        font-size: 4.5vw;
    }

}

@media screen and (max-width: 768px) {
    #part2 .list_1 li p.name {

        bottom: 1em;

    }
}

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

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


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

main .experience .experience-title-bg {
    display: inline-block;
    background-color: #2c75c4;
    width: 100%;
    max-width: 1100px;
    border-radius: 20px;
    border: 5px solid #ffffff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    display: flex;
    padding: 5px 110px;
    justify-content: center;
    align-items: center;
    max-height: 120px;
    margin: 0 auto 20px;
}

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

    }

 main .experience .experience-title-bg {
        height: 95px;
        width: 95%;
        max-width: 900px;
        border-radius: 15px;
        border: 3px solid #ffffff;
        padding: 0px 10px 0px;
        min-height: auto;
        margin: 0 auto 20px;font-weight: bolder;
    }

    .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 .experience img {
        max-width: 90%;
    }

    .updata {
        font-size: 1.3em;
    }




}


/* ===== 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;
    }

	
 .st-title text {
        font-size: 70px;
        font-weight: bold;
        /* 手機版字體加大 */
    }


}

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


.updata {
    font-size: 1em;
}