:root {
    --color-line-hover: rgba(224, 224, 224, 0.7);
    --color-page-box: rgba(240, 240, 240, 1);
    --color-page-hover: rgba(224, 224, 224, 0.7);
    --color-tr-cross: rgba(248, 248, 248, 0.8);
    --color-withe: rgba(255, 255, 255, 1);
    --border-radius: 4px 4px;
    --search-item-border: 2px solid rgba(224, 224, 224, .8);
    --nav-color-gray: rgba(240, 240, 240, 1);
    --nav-box-shadow: rgba(192, 192, 192, .3) 4px 4px 4px;
}

body {
    font-size: 1em;
    font-family: 'Noto Sans TC';
    /*color: rgba(240, 248, 248, 1);
    background-color: rgba(32, 32, 32, .9);   */
}

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.div-container {
    width: 100%;
    margin: auto;
}

.div-header {
    width: 100%;
    padding: 0;
}

    .div-header ul {
	margin-left: 5%;
        list-style: none;
    }

        .div-header ul li {
            display: inline-block;
            vertical-align: middle;
        }

            .div-header ul li:nth-child(2) {
                padding: 0 1em;
                font-size: 1.2em;
                color: rgba(32, 32, 32, .8);
                text-shadow: .2em .2em rgba(240, 240, 240, .4);
            }

                .div-header ul li:nth-child(2) font {
                    font-size: 1.2em;
                    font-weight: 600;
                    letter-spacing: .15em;
                }

    .div-header img {
        width: 80px;
    }

.div-search {
    width: 100%;
    margin: 0;
    background-color: rgb(80, 80, 80, .75);
    padding: .5em .25em;
}

    .div-search div {
        text-align: right;
    }

    .div-search select {
        /*width: 10%;*/
        padding: .5em .75em;
        border-radius: var(--border-radius);
        border: var(--search-item-border);
    }

    .div-search input {
        padding: .5em .5em;
        border-radius: var(--border-radius);
        border: var(--search-item-border);
    }


.main-table {
    /* TABLE 列首置頂 */
    table-layout: fixed;
    /* END TABLE 列首置頂 */

    width: 100%;
    border: 2px solid rgba(248, 248, 248, 1);
    border-radius: var(--border-radius);
}

    .main-table a {
        text-decoration: none;
    }

    .main-table tr:nth-child(2n+2) {
        background-color: var(--color-tr-cross);
    }

    .main-table tr:nth-child(1) {
        /* TABLE 列首置頂 */
        position: sticky;
        top: 0;
        z-index: 100;
        /* END TABLE 列首置頂 */

        background-color: var(--nav-color-gray);
        box-shadow: var(--nav-box-shadow);
    }

    .main-table tr:last-child {
        /*background-color: var(--color-white);*/
    }

    .main-table tr:hover {
        background-color: var(--color-line-hover);
    }

    .main-table tr:last-child:hover {
        /*background-color: var(--color-withe);*/
    }

    .main-table tr th {
        font-size: 1em;
        padding: .75em .25em;
        letter-spacing: .25em;
        text-align: center;
    }

    /*.main-table tr:last-child th {
        font-size: 1em;
        font-weight: 500;
        letter-spacing: 0;
        border: 0;
        overflow-x: clip;
    }*/

    /*.main-table tr:last-child th > h3,
        .main-table tr:last-child th > h5 {
            display: inline-block;
            border: 1px solid var(--color-gray-1);
            margin: 0 .25em;
            padding: .5em;
        }*/

    /*.main-table tr:last-child th > span:hover {
            background-color: var(--color-page-hover);
        }*/

    .main-table th:first-child {
        width: 5%;
    }

    .main-table th:nth-child(2) {
        width: 60%;
    }

    .main-table th:nth-child(n+2) {
    }

    .main-table td:nth-child(2) {
        padding: .75em 1.5em;
    }

    .main-table td {
        padding: .75em .75em;
        text-align: center;
    }

        .main-table td:nth-child(2) {
            text-align: left;
        }

.div-pagecode {
    width: 100%;
    text-align: center;
}

    .div-pagecode h3,
    .div-pagecode h5 {
        display: inline-block;
        border: 1px solid var(--color-page-box);
        margin: .5em .15em .5em 0;
        padding: .5em;
        cursor: pointer;
    }

        .div-pagecode h3:hover,
        .div-pagecode h5:hover {
            background-color: var(--color-page-hover);
        }

        .div-pagecode h3:active,
        .div-pagecode h5:active {
            background-color: var(--color-page-box);
        }


@media (max-width: 768px) {
    .div-container {
        width: 100%;
    }

    .div-header, .div-header ul {
        padding: 0;
    }

        .div-header ul li:nth-child(2) {
            padding: 0 .25em;
            font-size: .75em;
        }

        .div-header img {
            width: 60px;
        }

    .div-search div {
        text-align: center;
    }

    .div-search select {
        width: 22%;
    }

    .div-search input {
        width: 53%;
    }

    .main-table tr th:nth-child(1), .main-table tr td:nth-child(1),
    .main-table tr th:nth-child(3), .main-table tr td:nth-child(3),
    .main-table tr th:nth-child(4), .main-table tr td:nth-child(4) {
        display: none;
    }

    .main-table tr th:nth-child(2),
    .main-table tr td:nth-child(2) {
        width: 70%;
    }
}