body {
    font-family: sans-serif;
    height: 100vh;
    background-color: #8C5703; /*#86c72a*/
    /*#539d73*/
}

a {
    color: #2C6AA0;
    display: inline-block;
    text-decoration: none;
    font-weight: 400;
}

    a:hover {
        color: unset;
    }

*:focus {
    outline: none;
}

.form-select:focus {
    box-shadow: none;
    border: 0.063em solid#5c5c5c;
}

/* 共用 */
.cursor_pointer {
    cursor: pointer;
}

.default_flex {
    display: flex;
    align-items: center;
}

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

.margin_left_auto {
    margin-left: auto;
}

.flex_direction_column {
    flex-direction: column;
}

.width_30 {
    width: 1.875em;
}

.width_380 {
    width: 23.75em;
}

.width_50p {
    width: 50%;
}

.width_100p {
    width: 100%;
}

.height_16 {
    height: 1em;
}

.font_weight_bold {
    font-weight: bold;
}

.main_title {
    font-size: 1em;
}

.letter_spacing_2 {
    letter-spacing: 0.125em;
}

.font_white {
    color: #fff;
}

    .font_white:hover {
        color: #fff;
    }

.font_gray {
    color: #5e5e5e;
}

.font_gray2 {
    color: #c4c4c4;
}

.font_brown {
    color: #8C5703;
}

    .font_brown:hover {
        color: #8C5703;
    }

.font_red {
    color: #E00000;
}

.font_orange {
    color: #943F0A; /* 加深 */
}

.font_yellow {
    color: #fcb13c;
}

.font_transparent {
    color: transparent;
}


.main_title .font_yellow {
    color: #fcb13c;
}

.font_blue {
    color: #2b6785;
}

.font_20 {
    font-size: 1.25em;
}

.font_30 {
    font-size: 1.875em;
}

.font_40 {
    font-size: 2.5em;
}

.hover_white:hover {
    color: #fff;
}

.text_align_left {
    text-align: left;
}

.text_align_center {
    text-align: center;
}

.default_btn {
    width: 9.375em;
    padding: 0.313em;
    border-radius: 0.313em;
    border: none;
    text-align: center;
}

.default_btn2 {
    width: 13em;
    padding: 0.313em;
    border: none;
    border-radius: 0.313em;
    text-align: center;
    font-size: 1.25em;
}

.default_btn3 {
    width: 12.5em;
    padding: 0.313em;
    border-radius: 0.313em;
    border: none;
    text-align: center;
    font-size: 1.250em;
}

.btn_search {
    border: 0;
    background-color: transparent;
}

.btn_orange {
    background-color: #da5f11;
    color: #fff;
}

.btn_orange2 {
    background-color: #f08b17;
    color: #fff;
}

.btn_brown {
    background-color: #caa873;
    color: #fff;
}

.btn_yellow {
    background-color: #fcb13c;
    color: #fff;
}

.btn_white {
    background-color: #fff;
    color: #000;
    border: 0.063em solid #333;
}

.btn_white2 {
    background-color: #fff;
    color: #da5f11;
    border: 0.063em solid #da5f11;
}

.btn_blue {
    background-color: #1178AC;
    color: #fff;
}

.btn_green {
    background-color: #1C734A;
    color: #fff;
}

.btn_green_white {
    background-color: #ffffff;
    border: 0.125em solid#1C734A;
    color: #1C734A;
}

.btn_gray {
    background-color: #b2b2b2;
    color: #fff;
}

.btn_gray2 {
    background-color: #7e7e7e;
    color: #fff;
}

.btn_hover .default_btn:hover,
.btn_hover .default_btn2:hover {
    background-color: #0e5f88;
}

/* .btn_hover .default_btn3:hover {
  background-color: #1487c0;
} */

.bg_white {
    background-color: #FFF;
}

.bg_green {
    background-color: #23915d;
}

.boder_bottom1 {
    border-bottom: 0.063em solid #000;
}

.section_line {
    height: 0.063em;
    width: 100%;
}

.section_line2 {
    height: 0.313em;
    width: 100%;
    border-top: 0.063em solid #333;
    border-bottom: 0.063em solid #333;
}
:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}
#show_hide_password {
    position: relative;
}
#password {
    padding-right: 50px; /* 依 icon 大小調整 */
}


#togglePassword {
    position: absolute;
    top: 50%;
    right: 10px; 
    transform: translateY(-50%);
    cursor: pointer;
}

/* 讓長字串(例如 email、電話)在小螢幕時可斷行，避免溢出 */
.badge {
    display: block; /* 讓徽章占滿行寬，避免因 inline-block 溢出 */
    max-width: 100%;
    box-sizing: border-box;
    white-space: normal; /* 允許換行 */
    line-height: 1.5;
}

/* 若未使用 Bootstrap 5 的 text-break，提供等效行為 */
.text-break {
    word-break: break-word; /* 舊版瀏覽器 */
    overflow-wrap: anywhere; /* 現代瀏覽器：必要時任意斷行 */
    hyphens: auto; /* 支援斷字的瀏覽器可自動加連字號 */
}

/* 在小螢幕略微降低字級以提升可讀性與避免溢出 */
@media (max-width: 576px) {
    .badge.fs-5 {
        font-size: 1rem; /* 由 fs-5 約 1.25rem 降到 1rem */
    }

    .badge.p-2 {
        padding: 0.5rem; /* 保留內距，避免貼邊 */
    }
}


.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #fcb13c;
    color: #000         ;
    padding: 8px;
    z-index: 100;
}

    .skip-link:focus {
        top: 0; /* 當鍵盤 Tab 聚焦時顯示 */
    }

    ul > li {
       list-style-type: none;
       padding: 0.5em 0;
       color:black;
    }


/* 自訂radio樣式 */
.check_radio {
    /*要換行就用 display: block;*/
    position: relative;
    padding-left: 2.188em;
    cursor: pointer;
    font-size: 1.125em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .check_radio input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

.checkmark {
    position: absolute;
    top: 0.313em;
    left: 0.375em;
    height: 1.125em;
    width: 1.125em;
    background-color: #eee;
    border-radius: 50%;
    border: 0.063em solid #b4b4b4;
}

.check_radio:hover input ~ .checkmark {
    background-color: #ccc;
}

.check_radio input:checked ~ .checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check_radio input:checked ~ .checkmark:after {
    display: block;
}

.check_radio .checkmark:after {
    top: 0.25em;
    left: 0.25em;
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: white;
}

/* 自訂radio樣式 END */
.required_form {
    width: 80%;
}

    .required_form ::placeholder {
        color: #c3c3c3;
        text-align: left;
    }

.case_img {
    max-width: 20em; /* 100% */
    max-height: 20em; /* 28.125em */
}

.education_a:hover {
    color: #2b6785;
}

/* 框 */

.wrapper {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: 1.25em
}

#formContent {
    -webkit-border-radius: 0.625em;
    border-radius: 0.625em;
    background: #fff;
    padding: 1.875em;
    width: 90%;
    position: relative;
    padding: 0em;
    -webkit-box-shadow: 0 1.875em 3.75em 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 1.875em 3.75em 0 rgba(0, 0, 0, 0.3);
    text-align: center;
}

.max_width1 {
    max-width: 46.875em;
}

.max_width2 {
    max-width: 70em
}

#formFooter {
    background-color: #f6f6f6;
    border-top: 0.063em solid #dce8f1;
    padding: 1.563em;
    text-align: center;
    -webkit-border-radius: 0 0 0.625em 0.625em;
    border-radius: 0 0 0.625em 0.625em;
}


/* 表單內容 */

input[type=button],
input[type=submit],
input[type=reset],
.btn_submit_type {
    background-color: #757575;
    /*#5fbae9*/
    border: none;
    color: white;
    padding: 0.625em 5em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    font-size: 1em;
    -webkit-border-radius: 0.313em 0.313em 0.313em 0.313em;
    border-radius: 0.313em 0.313em 0.313em 0.313em;
    margin: 1.2em 1.25em 1.2em 1.25em;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    input[type=button]:hover,
    input[type=submit]:hover,
    input[type=reset]:hover,
    .btn_submit_type:hover {
        background-color: #539d73;
        /*#5fbae9 #faaf3b*/
    }

    input[type=button]:active,
    input[type=submit]:active,
    input[type=reset]:active,
    .btn_submit_type:active {
        -moz-transform: scale(0.95);
        -webkit-transform: scale(0.95);
        -o-transform: scale(0.95);
        -ms-transform: scale(0.95);
        transform: scale(0.95);
    }

input[type=text],
input[type=password],
textarea {
    background-color: #f6f6f6;
    border: none;
    color: #0d0d0d;
    padding: 0.625em 2em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    margin: 0.313em;
    width: 100%;
    border: 0.125em solid #f6f6f6;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    -webkit-border-radius: 0.313em 0.313em 0.313em 0.313em;
    border-radius: 0.313em 0.313em 0.313em 0.313em;
}

textarea {
    text-align: left;
    background-color: #fff;
}


    input[type=text]:focus,
    input[type=password]:focus,
    textarea:focus {
        background-color: #fff;
        border-bottom: 0.125em solid #539d73;
        /*#5fbae9*/
    }

input[type=text]:placeholder {
    color: #cccccc;
}

.form_grid {
    display: grid;
    grid-template-columns: 30% 70%;
    align-items:center;
}
.form_grid2 {
    display: grid;
    grid-template-columns: 30% 40% 10% 20%;
    align-items: center;
}

/* 下底線動畫 */
.underlineHover:after {
    display: block;
    left: 0;
    bottom: -0.625em;
    width: 0;
    height: 0.125em;
    background-color: #56baed;
    content: "";
    transition: width 0.2s;
}

.underlineHover:hover {
    color: #2b6785;
}

    .underlineHover:hover:after {
        width: 100%;
    }

/* 表格 */

table {
    width: 100%;
    border-spacing: 0.188em;
}

td:first-child {
    color: #095729;
    font-weight: bold;
    background: #8DC997;
    /*#86c72a*/
}

th {
    background-color: #f7f7f7;
}

th,
td {
    padding: 0.75em;
    text-align: center;
    border-bottom: 0.063em solid #e9e9e9;
}

    td a {
        color: #fff;
        font-weight: bold;
    }

.table1 td a {
    color: #095729;
}

.administrator td:first-child {
    background: #8A7347;
    color: #fff;
}

.administrator td a {
    color: #fff;
}

.administrator .administrator_a_brown a {
    color: #8C5703;
}

.report_table td:first-child {
    color: unset;
    font-weight: normal;
    background: transparent;
}

.report_table th,
.report_table td {
    border: 0.063em solid #535353;
}

/***default_accordion 手風琴****/
.default_accordion {
    border-bottom: 0.063em solid #254d25;
    /*#252e4d*/
}

    .default_accordion .accordion-item {
        border: none;
    }

    .default_accordion .accordion-button {
        background-color: #fcfff8;
        /*#f8fcff*/
        color: #5F7859;
        /* #787e9c */
        font-weight: bold;
        border-top: 0.063em solid #254d36;
    }

        .default_accordion .accordion-button::after {
            background-image: url("../img/Web_GU_icon_13_4.png");
            background-size: 10.313em 0.625em;
            width: 1.25em;
            height: 0.625em;
        }

        .default_accordion .accordion-button:focus {
            color: #5F7859;
            /*#fcb13c*/
            box-shadow: none;
        }

        .default_accordion .accordion-button:not(.collapsed) {
            color: #5F7859;
            box-shadow: none;
        }

/*index*/
.password_eye_out {
    position:absolute;
    top:0.3em;
    right:-0.1em;
    background-color:#ddd;
    width:2.8em;
    height:2.8em;
    border-radius:0.313em;

    display:flex;
    justify-content:center;
    align-items:center;
}
    .password_eye i {
        color: #000;
    }


/*pagination*/
.pagination {
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
}

    .pagination li {
        margin: 0 0.313em;
    }

    .pagination a {
        text-decoration: none;
        padding: 0.5em 1em;
        border: 0.15em solid #ffa126;
        color: #AD6200;
        transition: background-color 0.3s;
    }

        .pagination a:hover {
            background-color: #ffe8cb;
        }


.area_tag {
    background-color: #137152;
    color: #fff;
    padding: 0.625em 1.25em;
}

.area_tag_administrator {
    background-color: #7e5518;
    color: #fff;
    padding: 0.625em 1.25em;
}

/* report */
.paper {
    /*border: 0.063em solid #999;*/
    border-top: 0.063em solid #fff;
    border-bottom: 0.063em solid #fff;
    padding: 0em 3.125em;
}

    .paper input[type=text],
    .paper textarea {
        background-color: transparent;
        border: none;
        color: #0d0d0d;
        padding: 0.313em 2em;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 1em;
        margin: 0.313em;
        width: 100%;
        border: 0.125em solid #cccccc;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-border-radius: 0.313em 0.313em 0.313em 0.313em;
        border-radius: 0.313em 0.313em 0.313em 0.313em;
    }

    .paper textarea {
        text-align: left;
        background-color: #fff;
    }


        .paper input[type=text]:focus,
        .paper textarea:focus {
            background-color: transparent;
        }

.report_title {
    text-align: center;
    margin: 1.5em 0em;
    font-size: 0.8em;
    letter-spacing: 0.5em;
}

.report_title2 {
    font-size: 1.5em;
    letter-spacing: 0.3em;
}

.report_space {
    height: 9.375em;
}

.stamp_1 {
    width: 20em;
}

.stamp_2_out {
    position:absolute;
    top:-70%;
    right:0;
}

.stamp_2 {
    width:11em;
}

@media screen and (max-width:62em) {
    .required_form {
        width: 100%;
    }

    /* 框 */

    .wrapper {
        padding: 1.25em 0em;
    }

    /*表格*/
    .table1 thead {
        display: none;
    }

    .table1 td {
        display: block;
        position: relative;
        padding-left: 50%;
        margin-bottom: 0.188em;
        padding: 1em 1em;
        text-align: right;
        &:first-child

{
    font-weight: bold;
}

&:before {
    content: attr(data-th);
    position: absolute;
    top: 50%;
    left: 0.75em;
    transform: translate(0%, -50%);
    width: 30%;
    font-weight: inherit;
    text-align: left;
}

}

.table2 td {
    padding-left: 3%;
    text-align: center;
    &:before

{
    width: 20%;
}

}
}


@media screen and (max-width:36em) {
}