body {
    font-family: Arial, sans-serif;
    background-color: #333333;
    text-align: center;
    margin: 0;
    overflow-y: scroll;
}

header {
    background-color: #333333;
    margin: 0;
    padding: 0;
}

    header img {
        max-width: 98%;
        margin: 15px auto;
    }

    header > nav {
        background: linear-gradient(to bottom, #FFB320, #B96A03);
        font-size: 0;
    }

        header > nav > a {
            display: inline-block;
            padding-top: 10px;
            padding-bottom: 10px;
        }

            header > nav > a > span {
                display: inline-block;
                border-right: #D28D15 1px solid;
                border-left: #E9B25A 1px solid;
                width: 9rem;
                font-size: 1rem;
                letter-spacing: 0.1rem;
                color: #FFF;
                font-weight: bold;
                text-shadow: #000 1px 0 5px;
                padding: 2px 0;
            }

            header > nav > a:first-child > span {
                border-left: #e9b25a00 1px solid;
            }

            header > nav > a:last-child > span {
                border-right: #d28d1500 1px solid;
            }

            header > nav > a:hover {
                background: #9B660F;
            }

                header > nav > a:hover > span {
                    border-left: #e9b25a00 1px solid;
                    border-right: #d28d1500 1px solid;
                }

h1 {
    padding: 0;
    margin: 0;
}

article {
    min-height: 700px;
    background-color: #f2f2f2;
}

    article > section {
        display: block;
    }

        article > section > h2 {
            padding-top: 2rem;
            padding-bottom: 0.5rem;
            display: inline-block;
            width: 20rem;
            position: relative;
            margin-bottom: 3rem;
            box-shadow: 0 4px 0 #EEA058, 0 8px 0 #FEF0D9;
        }

footer {
    background-color: #333333;
    color: #707070;
}

    footer > div > span {
        color: #707070;
        font-size: 0.9rem;
        display: inline-block;
        padding: 0 10px;
        margin: 20px 0;
        border-right: 1px solid #707070;
    }
/* ===== 樣式設定 Begin ===== */
.divMsgFrame {
    min-height: 3rem;
}

.divMsg {
    background-color: #e0ecff;
    color: #001dff;
    border-radius: 5px;
    text-align: left;
    padding: 8px 10px 5px 10px;
    margin-bottom: 20px;
    display: block;
    line-height: 1rem;
}

    .divMsg::before {
        content: url('../images/icon/information-6270_Blue.png');
        vertical-align: middle;
        display: inline-block;
        margin-right: 0.5rem;
    }

.ErrMsg {
    background-color: #ffe0e0;
    color: #ff0028;
    border-radius: 5px;
    text-align: left;
    padding: 8px 10px 5px 10px;
    margin-bottom: 20px;
    display: block;
    line-height: 1rem;
}

    .ErrMsg::before {
        content: url('../images/icon/information-6270_Red.png');
        vertical-align: middle;
        display: inline-block;
        margin-right: 0.5rem;
    }

.divInput {
    text-align: left;
    margin-bottom: 1rem;
}

    .divInput > label {
        font-size: 1.1rem;
        vertical-align: middle;
        line-height: 1.5rem;
        margin-right: 0.3rem;
        letter-spacing: 0.1rem;
        font-weight: bold;
        width: 5rem;
        text-align: right;
        display: inline-block;
    }

    .divInput > span {
        vertical-align: middle;
    }

        .divInput > span.explain {
            display: inline-block;
            color: #db6d00;
            letter-spacing: 0.1rem;
        }

.remind {
    color: #ff0056;
    font-size: 1.1rem;
    text-align: left;
}

@media screen and (max-width:1100px) {
    .divInput > label {
        display: block;
        margin-bottom: 0.3rem;
        margin-right: 0;
text-align:left;
    }
}
/* ===== 樣式設定 End ===== */
.noData{
    text-align:center;
    margin-top:5rem;
    margin-bottom:5rem;
}

/* ===== 按鈕連結樣式 Begin ===== */
a.Link {
    background-color: #2778FF;
    color: #fff;
    font-size: 1rem;
    padding: 4px 6px;
    border: none;
    border-radius: 4px;
    display: inline-block;
    margin: 5px;
    font-weight: bold;
    text-decoration: none;
    vertical-align:middle;
    cursor:pointer;
}

    a.Link:hover {
        background-color: #b2cfff;
        color: #004ecf;
    }

a.Add {
    background-color: #bb5520;
    color: #fff;
    font-size: 1.2rem;
    padding: 4px 6px 6px 4px;
    border: none;
    border-radius: 4px;
    display: inline-block;
    margin: 5px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 3px 3px rgba(187,85,32,0.3);
}
    a.Add:hover {
        background-color: #bb6c20;
        box-shadow: none;
    }

a.disabledLink {
    pointer-events: none; /* 不能點 */
    color: #ccc; /* 反灰 */
    cursor: default;
    text-decoration: none;
    background-color: #999;
}
/* ===== 按鈕連結樣式 End ===== */
/* ===== 表格設定 Begin ===== */
.TableStyle {
    border-spacing: 0 0;
    border-collapse: collapse;
    width: 100%;
    margin: 1rem auto;
    text-align: center;
}

    .TableStyle tr.MC {
        /* 超薦法會 */
        background-color: #fff1d4;
    }

    .TableStyle tr.BC {
        /* 祈福法會 */
        background-color: #ffeaea;
    }

    .TableStyle th {
        background-color: rgba(56, 56, 53, 0.90);
        border: 1px solid #ddd;
        padding: 0.3rem;
        color: #e8c560;
    }

    .TableStyle td {
        border: 1px solid #ddd;
        background-color: #ffffff;
        padding: 0.5rem;
    }

    .TableStyle tr.MC td,
    .TableStyle tr.BC td {
        background-color: transparent;
    }

        .TableStyleA {
            border-spacing: 0 0;
            border-collapse: collapse;
            width: 100%;
            margin: 1rem auto;
            text-align: center;
        }

    .TableStyleA .th {
        background-color: rgb(235, 235, 235);
        border: 1px solid #ddd;
        padding: 0.3rem;
        color: #000000;
    }

    .TableStyleA .td {
        border: 1px solid #ddd;
        background-color: #ffffff;
        padding: 0.5rem;
        text-align:left;
    }
@media screen and (max-width:600px) {
    /* Table RWD */
    .TableRWDStyle thead {
        display: none;
    }

    .TableRWDStyle tbody tr {
        display: block;
        border-top: 1px solid #8F8073;
        border-left: 1px solid #8F8073;
        border-right: 1px solid #8F8073;
        margin-bottom: 1rem;
    }

    .TableRWDStyle tbody td {
        display: block;
        padding: 0.3rem 0.5rem;
        border: none;
        border-bottom: 1px solid #8F8073;
        text-align: left;
        position: relative;
        padding-left: 8rem;
        vertical-align: text-top;
        line-height: 1.5rem;
    }

      /*  .TableRWDStyle tbody td.th {
            background: linear-gradient(to top, #dbdbdb, #ebebeb);
            background-color: #dbdbdb;
            font-weight: bold;
        }*/

        .TableRWDStyle tbody td:before {
            content: attr(data-label)"：";
            font-weight: bold;
            display: inline-block;
            color: #1f1f1f;
            /*padding-bottom: 0.1rem;*/
            /*padding-top: 0.1rem;*/
            position: absolute;
            left: 10px;
            width: 7rem;
            white-space: nowrap;
            text-align: right;
            vertical-align: text-top;
        }
        .TableRWDStyle tbody td.no-data-label {
            padding-left: 0.5rem;
            text-align: center;
        }
            .TableRWDStyle tbody td.no-data-label:before {
                content: "";
                display: none;
            }

        .TableRWDStyle tbody td.none {
            display: none;
        }

      /*  .TableRWDStyle tbody td > div {
            display: inline-block;
            vertical-align: text-top;
        }*/
}

    /* ===== 表格設定 End ===== */
    /* ===== 元件設定 Begin ===== */
    input[type=text],
    input[type=password] {
        font-size: 1rem;
        line-height: 1.5rem;
        vertical-align: middle;
    }

    textarea {
        font-size: 1rem;
        line-height: 1.5rem;
        vertical-align: middle;
    }

    input[type=submit],
    input[type=button] {
        background-color: #333;
        color: #fff;
        font-size: 1rem;
        padding: 8px 12px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

        input[type=submit]:hover,
        input[type=button]:hover {
            color: #e8c560;
        }

    input[type=radio],
    input[type=checkbox] {
        zoom: 1.5;
        vertical-align: middle;
    }

    label {
        vertical-align: middle;
    }

    select, option {
        vertical-align: middle;
        font-size: 1rem;
        line-height: 1.5rem;
        height: 2rem;
    }

    /* ===== 元件設定 End ===== */

    /* ===== 頁碼 Begin===== */
    /*頁碼*/
    .page {
        text-align: center;
        margin-top: 15px;
        margin-bottom: 10px;
        text-shadow: none;
    }

        .page a {
            text-decoration: none;
            display: inline-block;
            border: 1px solid #2E4986;
            padding: 5px 10px;
            margin: 1px;
            background-color: #ffffff;
            color: #000000;
            vertical-align: middle;
            text-align: center;
            letter-spacing: normal;
        }

            .page a:hover {
                border: 1px solid #2E4986;
                background-color: #dbdbdb;
                color: #000000;
            }

        /*    .page .currentpage {
        background-color: #2E4986;
        color: #ffffff;
            border: 1px solid #2E4986;
    }*/

        /*第一頁*/
        .page > .pFront {
            display: inline-block;
            min-width: 5rem;
            vertical-align: middle;
        }

        /*數字頁碼*/
        .page > .pMiddle {
            display: inline-block;
            /*width: 10rem;*/
            text-align: center;
            vertical-align: middle;
        }

            .page > .pMiddle > .DDList {
                font-size: large;
                height: 36px;
                vertical-align: middle;
                margin-right: 0.2rem;
            }

        /*最終頁*/
        .page > .pBack {
            display: inline-block;
            min-width: 5rem;
            vertical-align: middle;
        }
    /* ===== 頁碼 End ===== */