@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body{ 
    font-size:14px; 
    font-family: 'Noto Sans TC',Microsoft JhengHei,Arial, Helvetica,sans-serif,nsimsun; 
    color:#333; 
    position:relative;
    background-color: #f5efea;
    /*overflow-y: hidden; */
}
a{ color:#333;  }
a:hover{ color:#e7964e;transition: .3s}
* { 
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-.menu_list-sizing: border-box;    /* Firefox, other Gecko */
 box-sizing: border-box;         /* Opera/IE 8+ */
}
  



/*--------------------------------------------*/

.top_box{
    background-color: #454545;
    width: 100%;
    height: 60px;
    position: fixed;
    box-shadow: 0px -3px 15px #ccc;
    z-index: 20;
}

.top_left{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}

/*.top_3line{
    transition: .5s;
    width: 60px;
    height: 100%;
    display: inline-block;
    vertical-align: middle;
    top: 0;
    right: 0;
    cursor: pointer;
    padding: 10px 0;

}

.top_3line li {
    width: 20px;
    height: 2px;
    background: #fff;
    margin: 4px auto 4px auto;
    transition: .5s;
}*/




.top_3line_box {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 50px;
    width: 45px;
    left: 0px;
}

.top_3line {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    right: 0px;
    cursor: pointer;
    z-index: 30;
    transition: .5s;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}


.top_3line li {
    width: 20px;
    height: 2px;
    background: #fff;
    transition: .5s;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.top_3line li:nth-child(1) {
    top: calc(50% - 7px);
}

.top_3line li:nth-child(3) {
    top: calc(50% + 7px);
}





.top_3line.active li:nth-child(2) {
    width: 10px;
}






.top_logo{
    display: inline-block;
    vertical-align: middle;
    width: 130px;
    margin-left: 60px;
}

.top_breadcrumb{
    display: inline-block;
    vertical-align: middle;
    margin-left: 25px;
}

.top_breadcrumb .label_box{
    display: inline-flex;
    gap: 5px 8px;
    align-items: center;
    flex-wrap: wrap;
    color: #fff;
    font-size: 15px;
}

.top_breadcrumb .label_box a{
    color: #fff;
}

.top_breadcrumb .this_page{
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.top_breadcrumb .this_page_function{
    font-weight: 400;
    color: #e7964e;
}

.top_right{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 0 20px;
    align-items: center;
    padding-right: 15px;
}

.top_date h3{
    color: #fff;
    font-size: 16px;
}

.top_r_a{
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 18px;
    margin: 0 10px;
    position: relative;
}

.top_r_num{
    position: absolute;
    right: -8px;
    top: -5px;
    background-color: #db4437;
    color: #fff;
    font-size: 12px;
    width: 18px;
    height: 18px;
    text-align: center;
    border-radius: 50%;

}

.top_member{
    display: inline-block;
    padding-left: 20px;
    position: relative;
    cursor: pointer;
}

.top_member span{
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 20px;
}

.top_member h1{
    display: inline-block;
    vertical-align: middle;
    font-size: 17px;
    color: #fff;
    padding: 0 10px 0 10px;
}

.top_member_box{
    position: absolute;
    background-color: #fff;
    width: 250px;

    border: 1px #ddd solid;
    border-radius: 3px;
    top: 40px;
    right: 0;
    box-shadow: 0px 0px 10px rgba(40 ,40 ,40 ,0.2);
    display: none;
    border-radius: 10px;
}

.top_member_box li{
    display: block;
}

.top_member_box li a{
    display: block;
    padding: 12px 15px;
    border-bottom: 1px #eee solid;
    font-size: 16px;
}

.top_member_box li a:hover{
    color: #e7964e;
}










.menu_list{
/*    border-right: 1px #dcdcdc solid;*/
    height: calc(100% - 60px);
    display: inline-block;
    width: 240px;
    position: fixed;
    top: 60px;
    z-index: 15;
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 50px;
    box-shadow: 0 0 10px #3333;

}

.menu_list.active{
    width: 70px;
}





.menu_list>ul>li>a h2.active{
    display: none;
}

.menu_list>ul>li>a.active03 {
    border-left: 8px #f98e1c solid;
    background-color: #feefdf;
}

.menu_list>ul>li>a.active03 .menu_bottom{
    transform: translateY(-50%)rotate(180deg);
}

.menu_list>ul>li>a.active03 ~ ul{
    display: block;
}

.menu_list>ul>li>a.active03 span{
    color: #1ba586;
}



.menu_list.active02{
    width: 240px;
}

.menu_list>ul>li>a h2.active02{
    display: inline-block;
}


.menu_list>ul{

}
.menu_list.active>ul>li>a{
    justify-content: center;
}


.menu_list>ul span{
    color: #bbb;
    font-size: 15px;
    display: inline-block;
    vertical-align: middle;
}

.menu_list>ul>li{
    /*border-bottom: 1px #dcd2c7  solid;*/
}



.menu_list>ul>li>a{
    padding: 20px 30px;
    display: flex;
    position: relative;
    height: 52px;
    align-items: center;
    gap: 18px;
}

.menu_list>ul>li>a:hover h2{
    color: #1ba586;
}

.menu_list>ul>li>a h2{
    display: flex;
    vertical-align: middle;
    font-size: 16px;
    color: #1a1a1a;
}

.menu_list>ul>li>a.active03 h2{
    color: #1a1a1a;
}

.menu_list .menu_bottom{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%)rotate(0deg);
    font-size: 18px;
    color: #5b5149;
}

.menu_bottom.active{
    display: none;
}


.menu_list .menu_bottom.active03{
    transform: translateY(-50%)rotate(180deg);
}

.menu_bottom.active02{
    display: inline-block;
}



/*.menu_list .menu_top{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #9b9b9b;
    display: none;
}

.menu_list .menu_top.active{
    display: block;
}
*/

.menu_list>ul{
    overflow-y: auto;
    overflow-x: hidden;
}

.menu_list>ul>li ul {
    background-color: #fff6eb;
    display: none;
    counter-reset: menu_sub_counter;

}

.menu_list>ul>li ul li a::before{
    counter-increment: menu_sub_counter;
    content: counter(menu_sub_counter, decimal-leading-zero) "-";
    color: #999;
}

.menu_list>ul>li ul.active01{
    display: none;
}

.menu_list>ul>li ul li{
    transition: .2s;
}

.menu_list>ul>li ul li:hover{
    background-color:#efe5db ;
}

.menu_list>ul>li ul li a{
    display: block;
    padding: 12px 20px 12px 62px;
}

.menu_list>ul>li ul li a:hover{
    color: #1ba586;
}

.menu_list>ul>li ul li.active{
    background-color:#ffba6e ;
}

.menu_list>ul>li ul li.active a{
    color: #1a1a1a;
}


.menu_list>ul>li ul li a{
    position: relative;
    color: #555;
}

/*.menu_list>ul>li ul li.active a:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 24px 25px 24px 0;
    border-color: transparent #fdf4ea transparent transparent;
    right: -1px;
    top: 0;
    z-index: 1;
}*/



.all_box{
    padding: 60px 0 0 240px;
    position: relative;
    height: 100%;
}

.all_box.active{
    padding: 60px 0 0 80px;
}

.all_box1_1{
    padding: 120px 0 0 0px;
}

.all_box1_2{
    padding: 60px 0 0 0px;
}

.all_title{
    padding: 15px 30px;
    box-shadow: 0px -3px 15px #ccc;
    background-color: #fffaf4;
    position: fixed;
    width: calc(100% - 300px);
    top: 60px;
    z-index: 12;
    display: flex;
    align-items: center;

    display: none;
}

.all_title.active{
    width: calc(100% - 80px);
}

.all_title span{
    color: #956e4b;
    font-size: 32px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 20px;
}

.top_page_list{
    display: flex;
    gap: 5px 10px;
    align-items: center;
    flex-wrap: wrap;
}

.top_page_list a:hover{

}


.all_info_box {
    width: 100%;
    max-width: 100%;
    margin: 0px auto 80px auto;
    padding: 25px 25px 0 25px;
}

.all_info_box .info_box{
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 10px #3333;
    border-radius: 10px;
    padding: 20px;

}



.all_title_pc{
    padding: 5px 30px 5px 120px;
    display: flex;
    align-items: center;

}

.all_title_pc.active{

}


.all_title_pc .label_box{
    display: inline-flex;
    gap: 5px 10px;
    align-items: center;
    flex-wrap: wrap;
    color: #fff;
    font-size: ;
}

.all_title_pc .label_box a{
    color: #fff;
    font-size: 16px;
}

.all_title_pc .label_box .this_page{
    font-size: 16px;
}



.top_page_list {
    background-color: #fff;
    padding: 13px 25px;
    box-shadow: 0 0 10px #3333;
}


.top_page_list .label_box{
    display: inline-flex;
    gap: 5px 10px;
    align-items: center;
    flex-wrap: wrap;
    color: #333;
    font-size: 16px ;
}


.label_box .this_page{
    font-weight: 600;
    font-size: 18px;
}



/* 以下沿用前台 www-tw/css/style.css 的 .all_title03，原樣複製過來，用於表單上方的頁面標題（例如「編輯公告」/「新增公告訊息」） */
.all_title03{
    font-size: 22px;
    font-weight: 700;
    color: #003e52;
    line-height: 38px;
    margin-bottom: 20px;
}

/* 以下沿用前台 www-tw/css/style.css 的 .contact_form_box / .contact_b1 / .contact_b2，原樣複製過來 */
.contact_form_box {
    display: flex;
    gap: 20px 20px;
    flex-wrap: wrap;
}

.contact_b1{
    width: calc(50% - 10px);
}

.contact_b2{
    width: 100%;
}

.contact_form_box > button,
.contact_form_box > a{
    align-self: flex-end;
}

.input_title{
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.input_title span{
    color: #ed2525;
    font-weight: 700;
}


.input_box01 {
    font-size: 16px;
    padding: 14px 16px;
    border: 1px solid #d5d8dd;
    width: 100%;
    outline: none;
    background-color: #fff;
    border-radius: 6px;
    transition: .3s;
}

.input_box01:focus{
    background-color: #fff;
    border-color: #1ba586;
}

.input_box01:disabled{
    background-color: #f2f3f5;
    color: #888;
}

.input_box01[type="date"],
.input_box01[type="datetime-local"]{
    height: 50px;
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    max-width:100%;
    box-sizing:border-box;}





.select_box01 {
    font-size: 16px;
    padding: 14px 16px;
    border: 1px solid #d5d8dd;
    width: 100%;
    outline: none;
    background-color: #fff;
    border-radius: 6px;
    transition: .3s;
}

.select_box01:focus{
    border-color: #1ba586;
}

.select_box01:disabled{
    background-color: #f2f3f5;
}






.textarea_box01{
    font-size: 16px;
    padding: 14px 16px;
    border: 1px solid #d5d8dd;
    width: 100%;
    outline: none;
    background-color: #fff;
    border-radius: 6px;
    transition: .3s;
    height: 120px;
}

.textarea_box01:focus{
    border-color: #1ba586;
}

/* 以下沿用前台 www-tw/css/style.css 的 .new_checkbox，原樣複製過來；勾選色改用 admin 主題的 teal (#1ba586) 取代前台的 var(--orange_01)，admin 沒有引入該變數 */
.new_checkbox[type="checkbox"] {
    font-size: 20px;
    -webkit-appearance: none;
    vertical-align: middle;
    background: #fff;
    border: #d2d2d2 solid 1px;
    border-radius: 3px;
    min-height: 17px;
    min-width: 17px;
    position: relative;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.new_checkbox[type="checkbox"]:checked {
    background: #1ba586;
}

.new_checkbox[type=checkbox]:checked::after{
    content: '';
    top: 4px;
    left: 4px;
    position: absolute !important;
    background: transparent;
    border: #fff solid 3px;
    border-top: none;
    border-right: none;
    height: 4px !important;
    width: 7px !important;
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.upload_box{
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.upload_preview{
    width: 100px;
    height: 100px;
    border: 1px solid #d5d8dd;
    border-radius: 8px;
    background-color: #f7f8f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.upload_preview img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upload_preview.is_empty img{
    display: none;
}

.upload_preview_placeholder{
    font-size: 12px;
    color: #999;
    text-align: center;
    padding: 0 8px;
    display: none;
}

.upload_preview.is_empty .upload_preview_placeholder{
    display: block;
}

.upload_actions{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.upload_input_hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

.upload_filename{
    font-size: 13px;
    color: #777;
}

/* 活動花絮多張圖片預覽用的格狀排列，admin 專屬（前台沒有對應的多圖上傳介面可複製） */
.upload_preview_grid{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.upload_preview_grid_item{
    width: 110px;
    border: 1px solid #d5d8dd;
    border-radius: 8px;
    background-color: #f7f8f9;
    overflow: hidden;
    text-align: center;
    flex-shrink: 0;
}

.upload_preview_grid_item img{
    width: 100%;
    height: 110px;
    object-fit: cover;
    display: block;
}

.upload_preview_grid_item[draggable="true"]{
    cursor: move;
}

.upload_preview_grid_item.is_dragging{
    opacity: 0.4;
}

.upload_preview_remove{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    color: #c0392b;
    padding: 6px 0;
    cursor: pointer;
}

/* 活動花絮多圖上傳框，可拖放圖檔，admin 專屬（只套用在加了 .upload_dropzone 的上傳框，不影響公告管理單張圖片上傳） */
.upload_box.upload_dropzone{
    border: 2px dashed #d5d8dd;
    border-radius: 8px;
    padding: 16px;
    transition: .2s;
    width: 100%;
}

.upload_box.upload_dropzone.is_dragover{
    border-color: #1ba586;
    background-color: #f0faf7;
}

.upload_dropzone_hint{
    font-size: 13px;
    color: #999;
    width: 100%;
}





.sand_box{
    font-size: 16px;
    color: #fff;
    background-color: #1ba586;
    padding: 12px 25px;
    text-align: center;
    display: inline-flex;
    border-radius: 10px;
    transition: .3s;
    letter-spacing: 1.2px;
    border: 0;
    cursor: pointer;
    white-space: nowrap;
}

.sand_box:hover{
    background-color: #087f64;
}

.sand_box_sm{
    padding: 6px 14px;
    font-size: 14px;
}

.sand_box_danger{
    background-color: #db4437;
}

.sand_box_danger:hover{
    background-color: #b1382c;
}

.admin_table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.admin_table th,
.admin_table td{
    padding: 12px 15px;
    border-bottom: 1px #eee solid;
    text-align: left;
    font-size: 15px;
    vertical-align: middle;
    word-break: break-word;
    overflow-wrap: break-word;
}

.admin_table th{
    color: #777;
    font-weight: 600;
    background-color: #fff6eb;
}

.admin_table tbody tr:hover td{
    background-color: #efe5db;
}

.admin_table .table_actions{
    display: flex;
    gap: 0 10px;
    align-items: center;
}

.job_grades_table th,
.job_grades_table td{
    border: 1px #ccc solid;
}

.job_grades_table .nowrap_cell{
    white-space: nowrap;
}

.job_grade_tooltip{
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dashed #999;
}

.job_grade_tooltip_box{
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    margin-top: 8px;
    width: 320px;
    background-color: #333;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;
    text-align: left;
    white-space: normal;
    padding: 10px 14px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    z-index: 50;
}

.job_grade_tooltip:hover .job_grade_tooltip_box{
    display: block;
}

@media print{
    .top_box,
    .menu_list,
    .no_print{
        display: none !important;
    }

    .all_box,
    .all_box.active{
        padding: 0 !important;
    }

    body{
        line-height: 1.1 !important;
    }

    .admin_table th,
    .admin_table td{
        padding: 4px 8px !important;
        line-height: 1.1 !important;
    }

    /* 表頭底色改白色省碳粉（2026-07-31，Toyo 要求）：.admin_table th 平常是淺黃底(#fff6eb)
       方便畫面辨識，但列印一大片色塊很耗印表機碳粉，改成只在列印時蓋成白底，保留既有的
       border-bottom 分隔線（外框）當作視覺區隔即可；畫面上的黃底完全不受影響。這是全站共用的
       @media print 區塊，套用到所有有🖨️列印功能的後台頁面，不用每頁各自處理。 */
    .admin_table th{
        background-color: #fff !important;
    }

    /* 全站列印浮水印（2026-07-27新增）：所有有🖨️列印功能的後台頁面共用同一個開關，加在這裡
       一次就自動套用到全部頁面，之後新增的列印頁面不用另外處理。用 body::after 的 position:fixed
       偽元素實作——CSS Paged Media 規則下，position:fixed 元素會在每一個實體分頁上各自重複出現一次，
       不用逐頁手動插入。淡灰色（filter:grayscale + 低透明度）疊在內容之上而非墊在下方，不用處理
       z-index層疊順序的複雜度，透明度夠低不會影響文字可讀性。

       2026-08-02 修正「列印底色變成米色、浪費碳粉」：原本這裡還有一條 `html, body{ ... }` 規則，
       把 print-color-adjust:exact 也套在 html/body 本身，本意只是想確保下面 body::after 這個
       浮水印能印出來（Chrome預設列印會省略背景圖形），但 print-color-adjust 本身就是可繼承屬性，
       而且 body::after 自己已經直接宣告了同一組屬性（見下面），元素自己身上的宣告本來就不需要
       依賴從父層繼承——`html, body{...}`這條規則其實是多餘的，唯一的實際效果反而是連帶把 body
       自己的 background-color:#f5efea（全站米色底）也強制印出來，讓整張紙變成一片米色色塊。
       已確認拿掉這條規則後，浮水印依然正常顯示（body::after 自己的宣告足夠），米色底消失、
       紙張恢復白色。 */
    body::after{
        content: '';
        position: fixed;
        top: 50%;
        left: 50%;
        width: 320px;
        height: 320px;
        transform: translate(-50%, -50%);
        background-image: url('../img/watermark_logo.png');
        background-size: contain;
        background-repeat: no-repeat;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
        filter: grayscale(100%);
        opacity: 0.12;
        pointer-events: none;
    }
}

.dash_grid{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
}

.dash_card{
    flex: 1;
    min-width: 200px;
    background-color: #fff;
    box-shadow: 0 0 10px #3333;
    border-radius: 10px;
    padding: 20px;
}

.dash_card_title{
    font-size: 15px;
    color: #777;
    margin-bottom: 10px;
}

.dash_card_number{
    font-size: 32px;
    font-weight: 600;
    color: #1ba586;
}

.dash_card_number span{
    font-size: 15px;
    font-weight: normal;
    color: #777;
    margin-left: 5px;
}

.dash_card_desc{
    font-size: 13px;
    color: #999;
    margin-top: 8px;
}

.dash_charts{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.dash_chart_box{
    flex: 1;
    min-width: 280px;
    background-color: #fff;
    box-shadow: 0 0 10px #3333;
    border-radius: 10px;
    padding: 20px;
}

.dash_status_list{
    margin-top: 12px;
}

.dash_status_list li{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    font-size: 15px;
    color: #333;
}

.dash_status_list li:last-child{
    border-bottom: none;
}

.dash_status_subtext{
    font-size: 12px;
    color: #aaa;
    margin-left: 4px;
}

.dash_status_number{
    font-weight: 700;
    color: #1ba586;
    font-size: 16px;
}

/* 部門種類組織圖，橫式排列（由左往右展開，避免同層級節點一多就把頁面撐寬，改用網頁本來就會的上下捲動）
   純 CSS 畫線：巢狀 <ul> 用 border-left 當作直線（高度自動跟內容一樣高，不用手動算），
   每個 <li> 用 ::before 畫一段短橫線把節點接到那條直線上 */
.org_chart{
    overflow-x: auto;
    padding: 10px;
}