/* 全局設定 */

* {
    box-sizing: border-box;
}


body {

    margin: 0;

    padding: 0;

    font-family:
        "Microsoft JhengHei",
        "Noto Sans TC",
        Arial,
        sans-serif;

    color: #333333;

    background-color: #ffffff;

    line-height: 1.8;

}



/* 頂部 */

header {

    background-color: #0056a6;

    color: white;

    padding: 30px 20px;

}


.header-container {

    max-width: 1100px;

    margin: auto;

}


header h1 {

    margin: 0;

    font-size: 32px;

}


header p {

    margin: 5px 0 0;

    font-size: 16px;

}



/* 導航 */

nav {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    background-color: #f5f5f5;

    border-bottom: 1px solid #dddddd;

}


nav a {

    text-decoration: none;

    color: #0056a6;

    padding: 12px 18px;

    font-size: 16px;

    transition: 0.2s;

}


nav a:hover {

    background-color: #0056a6;

    color: white;

}



/* 主內容 */

main {

    max-width: 1100px;

    margin: 40px auto;

    padding: 0 20px;

}



.welcome {

    text-align: center;

    padding: 40px 20px;

}


.welcome h2 {

    color: #0056a6;

    font-size: 28px;

}



/* 文件卡片 */

.document-box {

    max-width: 700px;

    margin: 25px auto;

    padding: 25px;

    background-color: #f8f8f8;

    border: 1px solid #dddddd;

    border-radius: 8px;

    text-align: left;

}


.document-box h3 {

    margin-top: 0;

    color: #0056a6;

}


.document-box a {

    display: inline-block;

    padding: 8px 20px;

    background-color: #0056a6;

    color: white;

    text-decoration: none;

    border-radius: 4px;

}


.document-box a:hover {

    background-color: #003f7a;

}



/* 一般資料表 */

.info-table {

    width: 100%;

    max-width: 800px;

    margin: 30px auto;

    border-collapse: collapse;

}


.info-table th {

    background-color: #0056a6;

    color: white;

    padding: 12px;

}


.info-table td {

    border: 1px solid #dddddd;

    padding: 12px;

    text-align: left;

}



/* 課程表 */

.schedule-container {

    width: 100%;

    overflow-x: auto;

    margin-top: 30px;

}



.schedule-table {

    width: 100%;

    min-width: 850px;

    border-collapse: collapse;

    background-color: white;

}



.schedule-table th {

    background-color: #0056a6;

    color: white;

    padding: 10px;

    border: 1px solid #dddddd;

    text-align: center;

}



.schedule-table td {

    border: 1px solid #dddddd;

    padding: 8px;

    text-align: center;

    height: 80px;

}



.schedule-table tr:nth-child(even) {

    background-color: #f8f8f8;

}



.period {

    width: 160px;

    font-size: 14px;

    font-weight: bold;

}



.subject {

    color: #0056a6;

    font-size: 16px;

    font-weight: bold;

}



.teacher {

    color: #666666;

    font-size: 13px;

}



/* Footer */

footer {

    margin-top: 60px;

    padding: 20px;

    text-align: center;

    background-color: #f5f5f5;

    color: #666666;

    font-size: 14px;

}



/* 手機和平板適配 */

@media screen and (max-width:700px) {


    header h1 {

        font-size: 25px;

    }


    nav {

        flex-direction: column;

        text-align: center;

    }


    nav a {

        width: 100%;

        border-bottom: 1px solid #dddddd;

    }


    main {

        margin: 20px auto;

        padding: 0 10px;

    }


    .welcome {

        padding: 20px 5px;

    }


    .schedule-table {

        min-width: 700px;

    }

}