@charset "utf-8";

body {
    font-family: Microsoft JhengHei;
}

.PageContent {
    display:flex;
    flex-direction:column;
    max-width: 85.3750em;
    margin: 0 auto;
    padding-left: 100px;
    padding-right: 1px;
}

    .PageContent .Blue_H3 {
        margin-top: 50px;
        border-bottom: 1px solid #D6D6D6;
    }

/*麵包屑*/
.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}

    .breadcrumb > li {
        display: inline-block;
    }

        .breadcrumb > li + li:before {
            padding: 0 5px;
            color: #afafaf;
            content: "/\00a0";
        }

        .breadcrumb > li a {
            color: #666666;
        }

    .breadcrumb > .active {
        color: #1C7D26;
    }

/*.fontSize 字型大小*/
.fontSize {
    display: block;
    float: right;
}

    .fontSize li {
        width: 2.2500em;
        margin-left: 1px;
        margin-right: 1px;
        font-size: 1.6rem;
        list-style-type: none;
        line-height: 2.2500em;
        text-align: center;
        background: #BFBFBF;
        float: left;
    }

        .fontSize li a {
            color: #FFF;
        }

        .fontSize li.font_S {
            font-size: 1.2rem !important;
        }

        .fontSize li.font_M {
            font-size: 1.6rem !important;
        }

        .fontSize li.font_L {
            font-size: 2rem !important;
        }

        .fontSize li:hover,
        .fontSize li.active {
            background: #2399E4;
        }

            .fontSize li:hover a,
            .fontSize li.active a {
                text-decoration: none;
            }

.font_S {
    font-size: 1.2rem !important;
}

.font_M {
    font-size: 1.6rem !important;
}

.font_L {
    font-size: 2rem !important;
}

/*======= 主要內容 =======*/
.Main {
    padding-left: 1.5em;
    padding-right: 1.5em;
}

/*QueryBar*/
.QueryBar {
    margin-top: 10px;
    margin-bottom: 10px;
    background: #f5f5f5;
    padding: 10px 20px;
    vertical-align: middle;
    clear: both;
}

.form-group {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
}

    .form-group label {
        margin-right: 2px;
    }

    .form-group input[type="radio"] {
        position: absolute;
        top: 0px;
        margin-right: 15px;
    }

    .form-group span {
        margin-left: 15px;
    }

.form-inline button {
    margin-left: 0px;
}

/*中心簡介*/
.CenIntroContent {
    margin-top: 40px;
}

    .CenIntroContent p {
        font-size: 1.6rem;
        line-height: 1.8750em;
    }




    .CenIntroContent img {
        background-size: cover;
        width: 80%;
        margin: 0 10%;
    }

/*聯絡資訊*/
.centerInfo {
    margin-bottom: 50px;
    clear: both;
}

    .centerInfo h4 {
        background: url(../images/cenIntro_h4_bg.png) no-repeat left top #C3E5C3;
        line-height: 2.0000em;
        font-weight: bold;
        font-size: 1.8rem;
        text-indent: 35px;
    }

    .centerInfo h5 {
        font-size: 1.6rem;
        margin-top: 20px;
    }

    .centerInfo p {
        text-indent: 60px;
    }

/*最新消息詳細頁*/
.PageSubtitle {
    border-bottom: 1px solid #92c633;
    margin-top: 30px;
}

.PageSubtitle_time {
    color: #92c633;
}

.PageSubtitle_h4 {
    font-size: 2rem;
    line-height: 3.1250em;
    background: url(../images/PageSubtitle_h4.svg) no-repeat left 16px;
    background-size: 0.815em 0.815em;
    text-indent: 20px;
}

.PageDetailContent {
    padding: 2em 0;
}

    .PageDetailContent p {
        font-size: 1.6rem;
        line-height: 1.8750em;
    }

/*相關檔案*/
.PageAttachment {
}

/*附件下載*/
h5.PageAttachmentDownload {
    font-size: 2rem;
    line-height: 2.875em;
    color: #FEA408;
    border-bottom: 2px solid #DDD;
    padding-left: 15px;
    font-weight: bold;
}

    h5.PageAttachmentDownload span.badge {
        background: #FEA408;
        padding: 9px 11px;
        font-size: 1.8rem;
        border-radius: 30px;
    }

ol.PageAttachmentOl {
    padding: .75em 0 .75em 2.25em;
    list-style-type: decimal;
    list-style-position: inside;
}

    ol.PageAttachmentOl li {
        margin-top: 5px;
        margin-bottom: 5px;
    }

    ol.PageAttachmentOl a {
        line-height: 1.75em;
        text-decoration: underline;
        font-size: 1.6rem;
    }

/*內頁小標題*/
.section-title {
    min-height: 1.2500em;
    margin: 15px 0;
    padding: 10px 10px 8px 28px;
    border-bottom: #cacccc 1px solid;
    background: #eeeff2 url(/common/img/bg_section-title01.png) no-repeat;
}

/*======= 網站導覽 =======*/
.Main {
}

    .Main ul.FooterNav {
        margin-top: 80px;
        padding: 0;
    }

        .Main ul.FooterNav li {
            color: #000;
        }

            .Main ul.FooterNav li > ul > li > a {
                color: #000;
            }

/*===== 表格樣式 =====*/
/*RWD表格*/

.rwd-table {
    margin: 20px auto;
    width: 100%;
    border-bottom: 1px solid #DDD;
    border-collapse: collapse;
    color: #333;
    border-radius: .4em;
    overflow: hidden;
    font-size: 1.5rem;
}

    .rwd-table tr:first-child {
        border-top: none;
        background: #32CCCC;
        color: #fff;
    }

    .rwd-table tr {
        background-color: #FFF;
    }

        .rwd-table tr:nth-child(odd):not(:first-child) {
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            background-color: #f3f3f3;
            border-color: #bfbfbf;
        }

    .rwd-table th {
        display: none;
    }

    .rwd-table tr {
        padding: .5em;
    }

    .rwd-table td {
        display: block;
        vertical-align: top;
        display: flex;
    }

        .rwd-table td:first-child {
            margin-top: .5em;
        }

        .rwd-table td:last-child {
            margin-bottom: .5em;
        }

        .rwd-table td:before {
            content: attr(data-th) " ";
            font-weight: bold;
            width: 6.8750em;
            display: inline-block;
            color: #000;
            margin-left: -8px;
            text-align: right;
            margin-right: 8px;
            padding-right: 5px;
            border-right: 3px solid #34a398;
            flex: none;
        }

    .rwd-table th,
    .rwd-table td {
        text-align: left;
        padding: .3em .7em;
    }




.SiteMapNav {
    display: block;
    margin-top: 80px;
    padding: 0;
    clear: both;
    margin-bottom: 50px;
}

    .SiteMapNav > li {
        display: inline-block;
        list-style: none;
        font-weight: bold;
        font-size: 2rem;
        color: #000;
    }

    .SiteMapNav li > ul {
        min-height: 6.2500em;
        padding: 0;
        padding-bottom: 50px;
        margin-top: 8px;
        padding-top: 10px;
        background: url(../images/FooterNavUL_BG.png) left top no-repeat;
    }

        .SiteMapNav li > ul > li {
            text-indent: 20px;
            list-style: none;
            background: url(../images/footerNavIcon.png) left 8px no-repeat;
            line-height: 1.7500em;
        }

            .SiteMapNav li > ul > li > a {
                font-size: 1.5rem;
                color: #000;
            }

/*====== 行事曆 ====== */

.CalendarTab .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #fff2f2;
    cursor: default;
    background-color: #03A9F4;
    border: 1px solid #03A9F4;
    border-bottom-color: transparent;
}

.CalendarTab .nav-tabs > li {
    float: left;
    margin-bottom: -1px;
    text-align: center;
    font-size: 1.6rem;
}

    .CalendarTab .nav-tabs > li > a {
        margin-right: 2px;
        line-height: 1.42857143;
        border: 1px solid #dedede;
        border-radius: 4px 4px 0 0;
    }

    .CalendarTab .nav-tabs > li.active > a,
    .CalendarTab .nav-tabs > li.active > a:hover,
    .CalendarTab .nav-tabs > li.active > a:focus {
        color: #fff;
        cursor: default;
        background-color: #2299e4;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
    }





.ExcStaList_XL {
    margin-top: 20px;
    margin-left: 10px;
    margin-bottom: 20px;
    overflow: hidden;
}

    .ExcStaList_XL ul {
        margin: 10px 0px 0px;
        padding: 0 8px;
    }

        .ExcStaList_XL ul li {
            float: left;
            list-style-type: none;
            margin: 6px 6px;
            border-radius: 16px;
            border: 1px solid #147A22;
            padding: 4px 6px;
        }

            .ExcStaList_XL ul li a {
                color: #147A22;
                font-size: 1.8rem;
            }

                .ExcStaList_XL ul li a span.badge {
                    margin-left: 5px;
                    margin-top: -4px;
                    background: #4caf50;
                    padding: 6px 10px;
                    border-radius: 16px;
                    font-size: 1.4rem;
                }

            .ExcStaList_XL ul li:hover {
                color: #FFF;
                border: 1px solid #147A22;
                background: #147A22;
            }

                .ExcStaList_XL ul li:hover a {
                    color: #FFF;
                    text-decoration: none;
                }

                    .ExcStaList_XL ul li:hover a span.badge {
                        background: #FFF;
                        color: #4caf50;
                    }

/*=========棕色========*/
.ExcStaList_BN ul li {
    float: left;
    list-style-type: none;
    margin: 6px 6px;
    border-radius: 16px;
    border: 1px solid #65512f;
    padding: 4px 6px;
}

    .ExcStaList_BN ul li a {
        color: #65512f;
        font-size: 1.8rem;
    }

        .ExcStaList_BN ul li a span.badge {
            margin-left: 5px;
            margin-top: -4px;
            background: #80643c;
            padding: 6px 10px;
            border-radius: 16px;
            font-size: 1.4rem;
        }

    .ExcStaList_BN ul li:hover {
        color: #FFF;
        border: 1px solid #65512f;
        background: #65512f;
    }


        .ExcStaList_BN ul li:hover a span.badge {
            background: #FFF;
            color: #80643c;
        }

.btn-return {
    font-size: 1.6rem;
}

hr.dotted-line {
    border-bottom: 1px dashed #929292;
    border-top: none;
    margin-top: 35px;
    margin-bottom: 25px;
    margin-left: 1.5%;
    margin-right: 1.5%;
}

.calendar {
    width: 100%;
    margin: 0 auto;
}
/*------------------*/


@media screen and (max-width: 64.0000em) {
    .CenIntroContent img {
        background-size: cover;
        width: 90%;
        margin: 0 5%;
    }
}

@media screen and (max-width: 56.2500em) {
    .CenIntroContent img {
        background-size: cover;
        width: 100%;
        margin: 0;
    }

    .TrafficInfo p {
        padding-left: 60px;
        text-indent: 0;
    }
}

@media screen and (min-width: 38.7500em) and (max-width: 48.0625em) {

    .SiteMapNav > li {
        display: inline-block;
        list-style: none;
        font-weight: bold;
        font-size: 2rem;
        color: #000;
        width: 50%;
    }

    .CenIntroContent .col-sm-5,
    .CenIntroContent .col-sm-7 {
        width: 50%;
    }

    .centerInfo h4 {
        font-size: 1.6rem;
    }
}



/*****螢幕寬度小於601像素以下******/

@media screen and (max-width: 37.5625em) {
    .Main {
        padding-left: 0;
        padding-right: 0;
    }

    .PageContent {
        padding-left: 0;
        padding-right: 0;
    }

        .PageContent .Blue_H3 {
            letter-spacing: 0;
            margin-left: 15px;
            margin-right: 0px;
            margin-top: 20px;
        }

    .CenIntroContent p {
        padding-left: 15px;
        padding-right: 15px;
    }

    .centerInfo p {
        padding-left: 0px;
        padding-right: 0px;
    }

    .TrafficInfo p {
        padding-left: 60px;
        text-indent: 0;
    }


    .rwd-table button {
        font-size: 1.3rem;
    }

    .rwd-table tr:nth-child(2) {
        border-top: none;
    }

    .rwd-table .hidFields {
        display: none;
    }

    .rwd-table th,
    .rwd-table td {
        padding: .2em .6em;
    }

        .rwd-table td:before {
            content: attr(data-th) " ";
            font-weight: bold;
            min-width: 6.8750em;
            display: inline-block;
            color: #068c7e;
            /*margin-left: -20px;*/
            text-align: right;
            margin-right: 8px;
            padding-right: 5px;
            padding-right: 5px;
        }

    .SiteMapNav li > ul > li {
        text-indent: 20px;
        background: url(../images/footerNavIcon.png) left 14px no-repeat;
        line-height: 2.5000em;
    }

        .SiteMapNav li > ul > li > a {
            font-size: 1.6rem;
        }
}





/*螢幕寬度小於424像素以下*/

@media screen and (max-width: 26.5000em) {


    .rwd-table td:before {
        width: 6.8750em;
        margin-right: 13px;
        padding-right: 10px;
    }
}

/*螢幕寬度小於321像素以下*/

@media screen and (max-width: 20.0625em) {
    .centerInfo h4 {
        font-size: 1.6rem;
    }

    .centerInfo p {
        font-size: 1.6rem;
        text-indent: 10px;
    }

    .TrafficInfo p {
        padding-left: 60px;
        text-indent: 0;
    }
}

/*螢幕寬度大於600像素*/

@media screen and (min-width: 37.5000em) {

    .rwd-table tr:hover:not(:first-child) {
        background-color: #ffffe1;
    }

    .rwd-table td:before {
        display: none;
    }

    .rwd-table th,
    .rwd-table td {
        display: table-cell;
        padding: .25em .5em;
    }

        .rwd-table th:first-child,
        .rwd-table td:first-child {
            padding-left: 0;
            border-left: none;
        }

        .rwd-table th:last-child,
        .rwd-table td:last-child {
            padding-right: 0;
        }

    .rwd-table th,
    .rwd-table td {
        padding: 1em !important;
    }

    .rwd-table th {
        background: #D5EDEF;
        border-bottom: 2px solid #32CCCC;
        text-align: center;
        color: #000;
        font-weight: bold;
    }

    .rwd-table td {
        /*border-left: 1px solid #bfbfbf;*/
        text-align: center;
    }

        .rwd-table td.text-right {
            text-align: right;
        }
}
