body {
    font-family: 'Microsoft JhengHei';
    font-size: 1em;
}
/* ==========Top Area==========*/
.top-background {
    background: url(../images/pano_r.png) no-repeat fixed 50% 0;
    width: auto;
    height: auto;
}

.pdb-60{
    padding-bottom: 60px;
}

.header {
    width: 100%;
    z-index: 10;
}

.top-bar {
    padding: 5px 0 3px;
    color: #272727;
}

    .top-bar a {
        text-decoration: none;
        color: #1f1f1f;
    }

        .top-bar a:hover,
        .top-bar a:focus {
            text-decoration: none;
            color: #ffffff;
            background-color: #1f1f1f;
            border: 1px solid #ffffff;
        }

            .top-bar a:hover div,
            .top-bar a:focus div {
                background-color: #1f1f1f;
            }

.top-info {
    float: right;
    z-index: 10;
    text-align: right;
}

    .top-info .info-item {
        padding-left: 5px;
        padding-right: 5px;
    }

.top-banner{
    min-height: 375px;
    background:url(../images/bg-01-01.png) no-repeat;
}

/* ==========Content Area==========*/
.main-background {
    background: url(../images/p11bg.png) no-repeat fixed 50% 0;
    width: auto;
    height: auto;
}

.main-link-title {
    padding-top: 10px;
}

    .main-link-title h2{
        font-weight: 400;
        background-color: #13598d;
        color: #ffffff;
        padding: 5px;
    }

.main-links li {
    display: inline-block;
    width: 12%;
    vertical-align: top;
    text-align: center;
    max-width: 290px;
    min-width: 130px;
}

    .main-links li a:hover,
    .main-links li a:focus {
        border: none;
    }

        .main-links li a:hover span,
        .main-links li a:focus span {
            background-color: #000000;
            color: #ffffff;
            text-decoration: none;
        }

.main-link-item img {
    max-width: 100px;
    margin: 20px 20px 10px 20px;
}

.main-link-item span {
    font-size: 1.8em;
    font-weight: 500;
    color: #5a5a5a;
}

.sub-background {
    background: url(../images/p12bg.png) no-repeat fixed 50% 0;
    width: auto;
    height: auto;
}

.linkBox {
    background-color: #000000;
    color: #ffffff;
    padding: 5px 0 5px 0;
    border-radius: 5px;
}

    .linkBox a {
        color: #ffffff;
    }

.search-box {
    background-color: #DFDFDF;
    padding: 10px 20px 10px 20px;
    border: 1px solid #DFDFDF;
    border-radius: 10px;
}

    .search-box label {
        font-size: 1.2em;
        font-weight: bold;
    }

    .search-box input[type=text] {
        padding-left: 20px;
        border: 1px solid #dfdfdf;
        border-radius: 5px;
        font-size: 1.2em;
        display: block;
        height: 50px;
        width: 95%;
    }

    .search-box select {
        padding-left: 20px;
        border: 1px solid #dfdfdf;
        border-radius: 5px;
        font-size: 1.2em;
        display: block;
        height: 50px;
        width: 95%;
    }

    .search-box .search-link {
        text-align: center;
    }

        .search-box .search-link a {
            font-size: 1.2em;
        }

    .search-box .btn.btn-search {
        color: #ffffff;
        background-color: #6b6b6b;
    }

.gap-30 {
    height: 30px;
}

.au1 {
    color: #cc0602;
}

.au2 {
    color: #ba4400;
}

.au3 {
    color: #007700;
}

.au4 {
    color: #0000FF;
}

.au5 {
    color: #993300;
}

.au6 {
    color: #660099;
}

.au7 {
    color: #000000;
}

/* ================ tbale-flex ================== */
.table-container {
    display: flex;
    white-space: nowrap;
    flex-direction: row;
    margin-bottom: 10px;
}

    .table-container:nth-child(odd) {
        background-color: #e0f0ff;
    }

    .table-container:nth-child(even) {
        background-color: #ecffe0;
    }

.table-row {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 20%;
    align-content: center;
}

    .table-row.data {
        width: 100%;
    }

.table-cell {
    width: 100%;
    height: 120px;
    border-bottom: 1px solid #404040;
    align-items: center;
    justify-content: center;
    display: flex;
}

    .table-cell p{
        margin-bottom: 0;
    }

    .table-cell.dataTime {
        height: 240px;
        border-right: 1px solid #404040;
    }

    .table-cell.dataTime1 {
        height: 300px;
        border-right: 1px solid #404040;
    }

    .table-cell.dataTime2 {
        height: 400px;
        border-right: 1px solid #404040;
    }

.w3agile_tabs{
    margin: 1em;
}

    .w3agile_tabs .titlebg {
        background-color: #91b6db;
    }

.footermap-background {
    background: url(../images/bg-02.jpg) no-repeat 50% 0;
    width: auto;
    height: auto;
}

.foot-background {
    background: url(../images/color5b.jpg);
    width: auto;
    height: auto;
}

/* ================ Responsive Table(By Rows) ================== */
.Rtable {
    display: -webkit-box;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 3em 0;
    padding: 0;
}

.Rtable-cell {
    box-sizing: border-box;
    -webkit-box-flex: 1;
    flex-grow: 1;
    width: 100%;
    padding: 0.8em 1.2em;
    overflow: hidden;
    list-style: none;
    border: solid 3px white;
    background: #dfdfdf;
}

.Rtable--2cols > .Rtable-cell {
    width: 50%;
}

.Rtable--3cols > .Rtable-cell {
    width: 33.33%;
}

.Rtable--4cols > .Rtable-cell {
    width: 25%;
}

.Rtable--5cols > .Rtable-cell {
    width: 20%;
}

.Rtable--6cols > .Rtable-cell {
    width: 16.6%;
}

.Rtable--8cols > .Rtable-cell {
    width: 12.5%;
}

.Rtable {
    position: relative;
    top: 3px;
    left: 3px;
}

.date-area:nth-child(odd) {
    background-color: #e0f0ff;
    padding: 10px 10px 10px 10px;
}

.date-area:nth-child(even) {
    background-color: #ecffe0;
    padding: 10px 10px 10px 10px;
}

.Rtable-cell {
    margin: -3px 0 0 -3px;
    background-color: white;
    border-color: #e2e6e9;
}

    .Rtable-cell.Rtable-Facility {
        background-color: #000;
        color: #fff;
    }

@media all and (max-width: 500px) {
    .Rtable--collapse {
        display: block;
    }

    .Rtable--collapse > .Rtable-cell {
        width: 100% !important;
    }

        .Rtable--collapse > .Rtable-cell--foot {
            margin-bottom: 1em;
        }

    .Rtable-header {
        display:none;
    }

    .Rtable-cell:before {
        content: attr(data-th) "\A";
        white-space: pre;
    }
}

/* ================ Button ================== */
.btn-primary {
    background-color: #006ee6;
    border-color: #006ee6;
    color: #ffffff;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #000000;
        border-color: #000000;
        color: #ffffff;
    }

.list-group-item a {
    color: #006ee6;
}

    .list-group-item a:hover,
    .list-group-item a:focus {
        color: #ffffff;
        background-color: #000000;
        border: 1px solid #ffffff;
    }