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

@import url("reset.css");
/* ------------------------------------------------------------- 基本設定 -----------------------------------------------*/

body {
    font-family: "微軟正黑體";
    font-size: 1.0rem;
    line-height: 1.5em;
    margin: 0;
    padding: 0;
    border: 0;
    background-image: url(../imageNew/main02_bg.jpg);
    background-repeat: repeat-x;
}

a:visited {color:#555;}
a:hover {color: #cc2900;}
#wrapper{  
	margin: 0 auto;
    width: 100%;
    max-width: 1113px;
    box-sizing: border-box;
}
#header{
    min-height: 125px;
    width: 100%;
    overflow: hidden;
}
.header_logo {
    width: 500px;
    height: 85px;
    display: block;
    float: left;
    padding: 0;
    margin: 35px 0px 20px 18px;
}
.header_btns {
    list-style: none;
    float: right;
    margin: 15px 10px 10px 10px; 
    padding: 0px 10px 0 0;
} 
.header_btns li {
    display: inline-block;
    margin-left: 5px;
}
.header_btns li a {
    display: inline-block;
    padding: 3px 15px;
    background: linear-gradient(to bottom, #2f6fd0 0%,#1d78a8 100%); 
    color: #fff;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
}
.header_btns li a:hover {
    background: #1a7f74;
    color: #fff;
}
 .menu {
    clear: both;
    border-bottom: 2px solid #2a9dce;
	padding-left: 80px;
    padding-top: 30px;
    font-size: 1.2em;
}
.menu a {
    display: inline-block;
    position: relative;
    top: 2px;
    padding: 8px 18px;
    margin-left: 5px;
    background: #1a72a1;
    color: #fff;
    border: 1px solid #2a9dce;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    text-decoration: none;
}
.menu a:hover {
    background: #4120e8;
    color: #fff;
}
.menu a.active {
    background: linear-gradient(to bottom, #bae4fe 0%, #fff 100%);
    color: #0f5e9a;
    font-weight: bold;
    border-bottom: 1px solid #fff;
    cursor: default;
    pointer-events: none;
    z-index: 1;
} 
.main{ padding: 20px; border-left: 2px solid #2a9dce;border-right: 2px solid #2a9dce; border-bottom: 2px solid #2a9dce;margin: 0; }
 .tab1{ border-collapse:collapse; margin: 0px auto; width:98%}
 .tab1 th{ border:1px solid #969696; padding:5px; background-color: #B9E6FB;line-height: 1.3125rem;}
 .tab1 td{border:1px solid #969696; padding:5px;background-color: #E1F5FF;  line-height: 1.3125rem;}
 .content{text-align:left; padding:10px; font-size:0.909em; line-height:1.5rem; color: #333; line-height: 1.5;}
 .footer{text-align:center; line-height: 2.0em; width: 850px; margin: 20px auto;}
 .footer_left{text-align:left; line-height: 2.0em; width: 850px; margin: 20px auto;}
 .textRight{text-align:right;}
.mt-5{ margin-top: 10px;}
.testCenter{text-align:center;}
.title01{
    font-size: 1.2rem; margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.title01_icon{
    color: #2a9dce;
    flex-shrink: 0;
}
#C,
#Z,
#U {
    position: absolute;
    left: -9999px;
}

#C:focus,
#Z:focus,
#U:focus {
    position: static;
    left: auto;
    display: inline-block;
}

.main_content {
    font-size: 1.2em;
    line-height: 1.8;
    color: #333;
}

.main_content h3 {
    margin: 25px 0 12px;
    font-size: 1.136em;
    line-height: 1.6;
    font-weight: bold;
    padding-left: 2em;
    text-indent: -2em;
}

.main_content p {
    margin: 0 0 15px;
    line-height: 1.8;
}

.main_content ol {
    list-style-type: decimal;
    padding-left: 50px;
}

.main_content ul {
    list-style-type: disc;
    margin-bottom: 8px;
    line-height: 1.8;
    padding-left: 50px;
}
/* ============================== 響應式設計 ============================== */
/* 圖片不超出畫面 */
.main img {
    max-width: 100%;
    height: auto;
}
/* 表格外框：螢幕太窄時可左右滑動（由 JS 自動包上） */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-wrap:focus {
    outline: 3px solid #d9bd07;
}

/* 漢堡選單按鈕：電腦版不顯示 */
.nav_toggle {
    display: none;
}

/* 平板（寬度 1140px 以下）：左右留一點空白 */
@media (max-width: 1140px) {
    #wrapper {
        padding: 0 10px;
    }
}

/* 手機（寬度 768px 以下） */
@media (max-width: 768px) {
    /* 頁首：Logo 與漢堡按鈕並排、垂直置中 */
    #header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        min-height: 0;
    }
    .header_logo {
        float: none;
        flex: 1;
        min-width: 0;
        width: auto;
        height: auto;
        margin: 12px 0;
    }
    .header_logo img {
        display: block;
        width: 100%;
        max-width: 584px;
        height: auto;
    }
    /* 漢堡選單按鈕 */
    .nav_toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        flex-shrink: 0;
        margin-left: 10px;
        padding: 0;
        background: #1a72a1;
        color: #fff;
        border: 0;
        border-radius: 8px;
        cursor: pointer;
    }
    .nav_toggle:focus-visible {
        outline: 3px solid #d9bd07;
        outline-offset: 2px;
    }
    .nav_toggle[aria-expanded="true"] {
        background: #0f5e9a;
    }
    /* 三條線圖示，展開時變成 X */
    .nav_toggle_icon {
        position: relative;
        width: 18px;
        height: 2px;
        background: currentColor;
    }
    .nav_toggle_icon::before,
    .nav_toggle_icon::after {
        content: "";
        position: absolute;
        left: 0;
        width: 18px;
        height: 2px;
        background: currentColor;
    }
    .nav_toggle_icon::before { top: -6px; }
    .nav_toggle_icon::after { top: 6px; }
    .nav_toggle[aria-expanded="true"] .nav_toggle_icon { background: transparent; }
    .nav_toggle[aria-expanded="true"] .nav_toggle_icon::before { top: 0; transform: rotate(45deg); }
    .nav_toggle[aria-expanded="true"] .nav_toggle_icon::after { top: 0; transform: rotate(-45deg); }
    /* 選單內容：平常收起來，按下按鈕才展開 */
    .site_nav {
        display: none;
        flex-basis: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
        padding: 10px;
        background: #fff;
        border: 2px solid #2a9dce;
        border-radius: 8px;
    }
    .site_nav.is-open {
        display: block;
    }
    .header_btns {
        float: none;
        margin: 0;
        padding: 0;
    }
    .header_btns li {
        display: block;
        margin: 0 0 6px;
    }
    .header_btns li a {
        display: block;
        padding: 10px 14px;
        font-size: 1rem;
    }
    .menu {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 4px;
        padding: 12px 0 0;
        border-top: 1px solid #b9d9ea;
        border-bottom: 0;
        font-size: 1em;
    }
    .menu .htext {
        margin-bottom: 4px;
        font-size: 1.1em;
    }
    .menu a {
        top: 0;
        margin-left: 0;
        padding: 10px 14px;
        border-bottom: 1px solid #2a9dce;
        border-radius: 8px;
    }
    .menu a.active {
        border-bottom: 1px solid #2a9dce;
    }
    .main {
        padding: 12px 10px;
        /*border-top: 2px solid #2a9dce;*/
    }
    .main {
    padding: 20px;
    border: 0px solid #2a9dce;
    margin: 0;
}
    .tab1 {
        margin: 10px 0;
        width: 100%;
    }
    .table-wrap .tab1 {
        min-width: 640px;
    }
    .footer,
    .footer_left {
        width: auto;
        margin: 20px 0;
    }
    .pic-text {
        margin: 15px 0 30px;
        font-size: 1.2rem;
        line-height: 1.5;
    }
    .main_content h3 {
        padding-left: 0;
        text-indent: 0;
    }
    .main_content ol,
    .main_content ul {
        padding-left: 25px;
    }
    .dorm_btn_group {
        flex-wrap: wrap;
    }
}