@charset "UTF-8";
.btn:not(:disabled):not(.disabled) {
    cursor:default;
}
.login .table h1, .main .container .title h1 {
    font-size: 28px;
    text-align: center;
    color: #2a948f;
    font-weight: 400;
}

.login .table td input, .modal .modal-dialog .modal-content .modal-body input,
.main .container .table .column input:not([type="button"]), .main .container .table .column .bootstrap-select {
    width: 100%;
    min-height: 35px;
    background-color: #f9f9f9;
    border: solid 1px #e6e8ea;
    font-size: 16px;
    padding: 9px 11px;
}


select#pageCount {
    padding:.375rem .75rem;
}

.bar div.account .submenu, .menu ul.container > li .submenu {
    display: none;
    position: absolute;
    font-size: 16px;
    list-style: none;
    z-index: 99;
    background-color: #ffffff;
}

    .bar div.account .submenu li, .menu ul.container > li .submenu li {
        font-weight: 300;
    }

        .bar div.account .submenu li a, .menu ul.container > li .submenu li a {
            text-align: center;
            margin: 0 10px;
            color: #000;
        }

            .bar div.account .submenu li a:hover, .menu ul.container > li .submenu li a:hover, .bar div.account .submenu li a.active, .menu ul.container > li .submenu li a.active {
                border-radius: 25px;
                background-color: #81d8d0;
                color: #FFFFEA;
            }

 .modal-dialog .modal-content .modal-body .btn, .main .container .table > .btn
, .main .container > .btn, 
.main .container .award {
    display: block;
    outline: none;
    cursor: default;
}

    .modal-body .btn input[type="button"], 
    .main .container .table > .btn input[type="button"], 
    .main .container > .btn input[type="button"], 
    .main .container .award input[type="button"] {
        padding: 3px 50px;
        margin: 15px;
        border-radius: 30px;
        border: 2px solid #81d8d0;
        color: #81d8d0;
        background: #fff;
        cursor:pointer;
        font-size: 1.5rem;
    }
     .modal-body .btn input[type="button"]:hover, .main .container .table > .btn input[type="button"]:hover, .main .container > .btn input[type="button"]:hover, .main .container .award input[type="button"]:hover, .modal .modal-dialog .modal-content .modal-body .btn input[type="button"].active, .main .container .table > .btn input[type="button"].active, .main .container > .btn input[type="button"].active, .main .container .award input[type="button"].active {
            color: #fff;
            background: #81d8d0;
        }

.modal#view_box .modal-dialog .modal-content .modal-body table.review, .main .container table.show, .ui-widget-content table.show {
    padding: 65px;
}

    .modal#view_box .modal-dialog .modal-content .modal-body table.review thead, .main .container table.show thead, .ui-widget-content table.show thead {
        background-color: #e1f7f5;
    }

    .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr, .main .container table.show tbody tr, .ui-widget-content table.show tbody tr {
        border-bottom: solid 1px #e6e8ea;
    }

        .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child, .main .container table.show tbody tr:last-child {
            border: none;
            margin: 0 auto;
            text-align: center;
        }

            .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child td div.pageNum, .main .container table.show tbody tr:last-child td div.pageNum {
                display: inline-block;
                padding: 10px 0;
            }

                .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child td div.pageNum a, .main .container table.show tbody tr:last-child td div.pageNum a {
                    list-style: none;
                    top: 0;
                    float: left;
                    width: 35px;
                    height: 35px;
                    text-align: center;
                    line-height: 35px;
                    border: solid 1px #e6e8ea;
                    border-right: none;
                    cursor: pointer;
                }

                    .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child td div.pageNum a.prev, .main .container table.show tbody tr:last-child td div.pageNum a.prev, .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child td div.pageNum a.next, .main .container table.show tbody tr:last-child td div.pageNum a.next {
                        font-size: 12px;
                        color: #676767;
                    }

                    .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child td div.pageNum a:last-child, .main .container table.show tbody tr:last-child td div.pageNum a:last-child {
                        border-right: solid 1px #e6e8ea;
                    }

                    .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child td div.pageNum a:hover, .main .container table.show tbody tr:last-child td div.pageNum a:hover, .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody tr:last-child td div.pageNum a.active, .main .container table.show tbody tr:last-child td div.pageNum a.active {
                        background-color: #05c0b7;
                        color: #fff;
                    }

    .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody td, .main .container table.show tbody td {
        font-size: 16px;
        padding: 9px 15px 9px 15px;
    }

        .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody td .btn, .main .container table.show tbody td .btn {
            padding-left: 0;
        }

            .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody td .btn input[type="button"], .main .container table.show tbody td .btn input[type="button"] {
                background-color: #81d8d0;
                padding: 5px 18px;
                border: none;
                color: #fff;
                font-weight: 300;
                cursor:pointer;
            }
             .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody td .btn input[type="button"]:disabled, .main .container table.show tbody td .btn input[type="button"]:disabled {
                 background-color: #ccc;
                 cursor: default;
            }

                .modal#view_box .modal-dialog .modal-content .modal-body table.review tbody td .btn input[type="button"]:not([disabled]):hover, .main .container table.show tbody td .btn input[type="button"]:not([disabled]):hover {
                    background-color: #00BFB6;
                }

body,
html {
    height: 100%;
    padding: 0;
    margin: 0;
    font-family: "Microsoft JhengHei", "LiHei Pro Medium", Helvetica, Verdana, Arial, sans-serif;
    font-weight: 300;
    /*overflow-x: hidden;*/
    outline: none;
    background-color: #f7f9f9;
}

input[type="button"],
input[type="button"]:focus,
input {
    outline: none;
}

    input[type="button"] {
        cursor: pointer;
    }

a,
a:hover {
    text-decoration: none;
    display: block;
}

.wrapper,
.main .container {
    min-width: 1140px;
    min-height: calc(100vh - 142px);
}

.container {
    min-width: 1140px;
}

.wrapper {
    /* 設定高度最小為100%, 如果內容區塊很多, 可以長大 */
    min-height: 100%;
    /* 位置設為relative, 作為footer區塊位置的參考 */
    position: relative;
}

.bg {
    /* The image used */
    background-image: url("img/bg.jpg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.login.container {
    padding-bottom: 112px;
}

.login .logo {
    width: 100%;
    padding: 110px 0 22px;
}

    .login .logo img {
        display: block;
        margin: auto;
    }

.login .table {
    padding: 30px;
    margin: 0 auto;
    width: 502px;
    border-radius: 5px;
    box-shadow: 0 2px 4px 0 rgba(230, 232, 234, 0.5);
    background-color: #ffffff;
    border: solid 1px #e6e8ea;
}

    .login .table h1 {
        padding: 5px 0;
        margin-bottom: 30px;
    }

    .login .table table {
        margin: 0 auto;
    }

    .login .table td {
        border: none;
        font-size: 18px;
        line-height: 40px;
        padding: 14px 10px;
    }

        .login .table td:first-child {
            text-align: right;
        }

        .login .table td input {
            height: 40px;
        }

        .login .table td.captcha {
            padding-top: 0;
            line-height: 14px;
        }

            .login .table td.captcha .describe,
            .login .table td.captcha .changeCaptcha {
                font-size: 14px;
                text-align: left;
            }

            .login .table td.captcha .describe {
                padding-bottom: 9px;
            }

            .login .table td.captcha a.changeCaptcha {
                border-bottom: 1px solid #007bff;
                float: right;
                padding-top: 25px;
            }

                .login .table td.captcha a.changeCaptcha:hover {
                    color: #007bff;
                    text-decoration: none;
                }

    .login .table .btn-login {
        display: block;
        margin: 10px auto 0;
        width: 249px;
        height: 50px;
        border-radius: 25px;
        font-size: 20px;
        font-weight: 300;
        border: none;
        color: #81d8d0;
        background: #fff;
        border: 2px solid #81d8d0;
        padding: 0px;
    }

        .login .table .btn-login:hover {
            color: #fff;
            background: #81d8d0;
        }

.bar .container {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-justify-content: center;
}

.bar div {
    display: inline-block;
}

    .bar div.logo {
        padding: 17px 0 19px;
    }

        .bar div.logo img {
            width: 297px;
            height: 56px;
        }

    .bar div.title {
        padding: 35px 30px 29px;
    }

        .bar div.title h1 {
            margin: 0;
            font-size: 20px;
            font-weight: 400;
        }

    .bar div.account {
        float: right;
        font-size: 14px;
        padding: 15px 0 7px 88px;
        margin: 15px;
    }

        .bar div.account label {
            padding: 1px;
        }

        .bar div.account .account_content {
            position: relative;
            margin: 0 15px;
        }

        .bar div.account .submenu {
            border-radius: 5px;
            box-shadow: 0 3px 4px 0 rgba(154, 154, 154, 0.5);
            border: solid 1px #e6e8ea;
            padding: 16px 0;
        }

            .bar div.account .submenu li {
                padding: 5px 0;
            }

                .bar div.account .submenu li a {
                    padding: 4px 12px;
                }

        .bar div.account .account_content:hover .submenu {
            display: block;
        }

        .bar div.account button {
            border: 0px;
            color: #fff;
            font-weight: 300;
            width: 110px;
            height: 30px;
            border-radius: 25px;
            background-color: #a9a598;
        }

            .bar div.account button span {
                line-height: 14px;
                width: 8px;
                height: 10px;
                font-size: 12px;
                margin: 0px 0px 0px 8px;
                -moz-transform: rotate(-270deg);
                -webkit-transform: rotate(-270deg);
                -o-transform: rotate(-270deg);
                -ms-transform: rotate(-270deg);
                transform: rotate(-270deg);
            }

.modal h4, .ui-widget-content h4 {
    display: block;
    margin: 0 auto;
    letter-spacing: 2px;
}

.modal .modal-header .close, .ui-widget-content .modal-header .close {
    padding: 0;
    margin: 0;
}

.modal .close, .ui-widget-content .modal-header .close {
    color: #00BFB6;
}

.modal .modal-dialog {
    max-width: 600px;
}

    .modal .modal-dialog .modal-content {
        width: 600px;
    }

        .modal .modal-dialog .modal-content .modal-body {
            padding: 55px 112px;
        }

            .modal .modal-dialog .modal-content .modal-body form {
                padding: 15px 0;
            }

            .modal .modal-dialog .modal-content .modal-body .form-group {
                margin-bottom: 30px;
                position: relative;
            }

            .modal .modal-dialog .modal-content .modal-body label {
                font-size: 18px;
            }

            .modal .modal-dialog .modal-content .modal-body input {
                min-height: 40px;
                display: inline-block;
                position: absolute;
                right: 0;
            }

            .modal .modal-dialog .modal-content .modal-body .btn {
                font-size: 20px;
                margin: 0 auto;
                padding: 25px 0;
            }

.modal#view_box .modal-dialog {
    max-width: 1136px;
}

    .modal#view_box .modal-dialog .modal-content {
        width: 1136px;
    }

        .modal#view_box .modal-dialog .modal-content .modal-body {
            padding: 33px 20px 163px 20px;
        }

.ui-widget-content .modal-body {
    padding: 0px;
}

    .modal#view_box .modal-dialog .modal-content .modal-body table.review, .ui-widget-content .modal-body table.review {
        width: 1096px;
        border-bottom: solid 1px #e6e8ea;
    }

        .modal#view_box .modal-dialog .modal-content .modal-body table.review td {
            padding: 15px;
            font-size: 18px;
            text-align: left;
        }

.modal .modal-body {
    padding: 0;
}

.modal .img, .modal-body .img {
    text-align: center;
    padding: 20px 0;
}

.modal .img img, .modal-body .img img {
    width: 173px;
    height: 102px;
}

.modal .msg, .modal-body  .msg {
    text-align: center;
    padding: 10px 0;
}

    .modal .msg p, .modal-body .msg p {
        padding-bottom: 8px;
        margin: 0;
    }

.modal .qrcode {
    text-align: center;
}

    .modal .qrcode span {
        padding: 8px;
    }

    .modal .qrcode input {
        position: static;
    }

.modal .btn {
    margin-bottom: 50px;
}

.menu {
    width: 100%;
    height: 45px;
    background-color: #00BFB6;
    background-image: linear-gradient(to top, #00bfb6, #81d8d0);
    z-index: 100;
}

    .menu ul.container {
        margin: 0 auto;
        padding: 0;
        list-style: none;
    }

        .menu ul.container > li {
            float: left;
            text-align: center;
            margin: 6px 12px 0;
            padding: 6px 25px 6px;
            font-size: 20px;
            font-weight: 500;
            position: relative;
        }

            .menu ul.container > li a {
                color: #FFFFEA;
            }

            .menu ul.container > li:hover, .menu ul.container > li.active {
                background-color: #fff;
                border-radius: 5px 5px 0 0;
            }

                .menu ul.container > li:hover a, .menu ul.container > li.active a {
                    color: #000;
                }

            .menu ul.container > li .submenu {
                left: -62px;
                min-width: 220px;
                box-shadow: 0 4px 4px 0 rgba(107, 107, 107, 0.5);
                border-radius: 0 0 10px 10px;
                margin: 4px 0 0 0;
                padding: 15px 0;
            }

                .menu ul.container > li .submenu li {
                    padding: 8px 0;
                }

                    .menu ul.container > li .submenu li a {
                        padding: 5px 20px;
                    }

            .menu ul.container > li:first-child {
                margin-left: 0;
                margin-right: 14px;
            }

            .menu ul.container > li:last-child {
                margin-right: 0;
            }

            .menu ul.container > li:hover .submenu {
                display: block;
            }

.main .container {
    background-color: #ffffff;
    box-shadow: 0 0 4px 0 rgba(182, 182, 182, 0.5);
    width: 100vw;
    padding: 30px 30px 112px;
    text-align: center;
}

    .main .container .title {
        margin: 0 auto;
        text-align: center;
    }

        .main .container .title .describe {
            font-size: 14px;
            line-height: 21px;
            position: relative;
        }

    .main .container .star {
        margin: 0 8px 0 0;
        font-size: 14px;
        color: #f898a3;
        width: 15px;
        height: 15px;
    }

    .main .container .column.ymd .star {
        top: 3px;
    }

    .main .container .tab {
        border-radius: 10px;
        border: solid 3px #81d8d0;
        margin: 30px auto;
        display: table;
        background-color: #81d8d0;
    }

        .main .container .tab a {
            font-size: 18px;
            letter-spacing: 1px;
            display: table-cell;
            color: #000;
            padding: 6px 30px;
            background-color: #fff;
        }

            .main .container .tab a:hover {
                color: #81d8d0;
            }

            .main .container .tab a.active {
                color: #fff;
                background: #81d8d0;
            }

            .main .container .tab a:first-child {
                border-radius: 8px 0 0 8px;
            }

            .main .container .tab a:last-child {
                border-radius: 0 8px 8px 0;
            }

    .main .container .last {
        display: none;
    }

    .main .container .table {
        text-align: left;
        margin: auto 0;
        padding: 20px;
    }

    .main .container .tableMaintain {
        text-align: left;
        margin: 20px auto 0;
    }

    .tableMaintain.input {
        text-align: left;
        margin: 20px auto 0;
        /*max-height: 300px;*/
        overflow-x: hidden;
        overflow-y: auto;
    }

        .main .container .table .row.identity {
            display: none;
        }

        .main .container .table .column {
            margin: 15px;
            font-size: 18px;
            /* The container */
            /* Hide the browser's default radio input[type="button"] */
            /* Create a custom radio input[type="button"] */
            /* On mouse-over, add a grey background color */
            /* When the radio input[type="button"] is checked, add a blue background */
            /* Create the indicator (the dot/circle - hidden when not checked) */
            /* Show the indicator (dot/circle) when checked */
            /* Style the indicator (dot/circle) */
        }

            .main .container .table .column.divide {
                min-width: 295px;
            }

            .main .container .table .column input.divide-1 {
                width: 60px;
            }

            .main .container .table .column input.divide-2 {
                width: 89px;
                margin-left: 13px;
            }

            .main .container .table .column input.divide-year {
                width: 126px;
            }

            .main .container .table .column input.divide-month {
                width: 110px;
            }

            .main .container .table .column .btn-radio {
                float: left;
            }

                .main .container .table .column .btn-radio input[type="radio"] {
                    width: auto;
                }

            .main .container .table .column .btn-radio {
                display: block;
                position: relative;
                padding-left: 37px;
                margin: 0 27px 0 0;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }

                .main .container .table .column .btn-radio input {
                    position: absolute;
                    opacity: 0;
                    cursor: pointer;
                }

            .main .container .table .column .checkmark {
                position: absolute;
                top: 12px;
                left: 0;
                height: 20px;
                width: 20px;
                background-color: #fff;
                border-radius: 50%;
                border: 1px solid #e6e8ea;
            }

            .main .container .table .column .btn-radio:hover input ~ .checkmark {
                background-color: #fff;
            }

            .main .container .table .column .btn-radio input:checked ~ .checkmark {
                background-color: #fff;
            }

            .main .container .table .column .checkmark:after {
                content: "";
                position: absolute;
                display: none;
            }

            .main .container .table .column .btn-radio input:checked ~ .checkmark:after {
                display: block;
            }

            .main .container .table .column .btn-radio .checkmark:after {
                top: 3px;
                left: 3px;
                width: 12px;
                height: 12px;
                border-radius: 50%;
                background: #81d9d1;
            }

            .main .container .table .column .bootstrap-select {
                padding: 0;
            }

                .main .container .table .column .bootstrap-select .dropdown-item.active, .main .container .table .column .bootstrap-select .dropdown-item:active {
                    background-color: #e1f7f5;
                    color: #000;
                    outline: none;
                }

                .main .container .table .column .bootstrap-select .btn:focus {
                    outline: none !important;
                }

            .main .container .table .column .exp {
                position: relative;
            }

                .main .container .table .column .exp .img {
                    width: 400px;
                }

                    .main .container .table .column .exp .img img {
                        top: 0;
                        width: 400px;
                        padding-top: 15px;
                    }

            .main .container .table .column ::-webkit-input-placeholder {
                /* Chrome/Opera/Safari */
                font-size: 16px;
                color: #999;
            }

            .main .container .table .column ::-moz-placeholder {
                /* Firefox 19+ */
                font-size: 16px;
                color: #999;
            }

            .main .container .table .column :-ms-input-placeholder {
                /* IE 10+ */
                font-size: 16px;
                color: #999;
            }

            .main .container .table .column :-moz-placeholder {
                /* Firefox 18- */
                font-size: 16px;
                color: #999;
            }

        .main .container .table > .btn {
            font-size: 20px;
            margin: 10px auto;
        }

        .main .container .table.input.normal td:first-child {
            width: 200px;
        }

    .main .container table.show, .ui-widget-content table.show {
        text-align: left;
        margin: 20px auto 0;
        padding: 30px;
    }

.ui-widget-content table.show {
    width: 100%;
}

    .main .container table.show td, .main .container table.show th, .ui-widget-content table.show td {
        padding: 15px;
        font-size: 18px;
    }

.main .container table.number {
    border-collapse: separate;
    border-spacing: 0;
    border: 4px solid #00BFB6;
    border-radius: 10px;
    padding: 0;
    text-align: left;
    margin: 20px auto 0;
}

    .main .container table.number td {
        padding: 15px;
    }

    .main .container table.number thead td {
        background-color: #00BFB6;
        color: #fff;
        font-size: 24px;
        text-align: center;
        letter-spacing: 2px;
    }

    .main .container table.number tbody tr:first-child td {
        border-top: none;
    }

    .main .container table.number tbody tr:last-child td {
        border-bottom: none;
    }

    .main .container table.number tbody tr td:first-child {
        border-left: none;
    }

    .main .container table.number tbody tr td:last-child {
        border-right: none;
    }

    .main .container table.number tbody tr:last-child td:first-child {
        border-bottom-left-radius: 10px;
    }

    .main .container table.number tbody td {
        font-size: 14px;
        border: solid 1px #e6e8ea;
    }

        .main .container table.number tbody td.prize {
            background-color: #f9f9f9;
            text-align: center;
        }

        .main .container table.number tbody td.num {
            font-size: 24px;
            font-weight: 500;
            letter-spacing: 2px;
        }

        .main .container table.number tbody td font {
            padding-right: 10px;
        }

        .main .container table.number tbody td p {
            padding-bottom: 5px;
            margin: 0;
        }

            .main .container table.number tbody td p:last-child {
                padding: 0;
            }

.main .container .prize_time {
    font-size: 18px;
    margin: 20px auto;
}

.main .container > .btn {
    font-size: 20px;
    margin: 10px auto;
}

.main .container .btn.number {
    margin-bottom: 50px;
}

.main .container .award {
    width: 100%;
    margin: 15px auto;
}

    .main .container .award .btn {
        padding: .375rem 1.75rem;
    }

        .main .container .award .btn img {
            opacity: 0.8;
            display: block;
            margin: 0px auto;
        }

        .main .container .award .btn input[type="button"] {
            font-size: 20px;
            padding: 6px 35px;
        }

        .main .container .award .btn:hover img {
            opacity: 1;
        }

        .main .container .award .btn:hover input[type="button"] {
            color: #fff;
            background: #81d8d0;
        }

.main .container .news {
    padding: 18px 35px;
}

    .main .container .news li {
        padding: 13px;
        list-style-position: inside;
        border-bottom: 2px solid #e6e8ea;
        text-align: left;
    }

        .main .container .news li a {
            display: inline-block;
            color: #000;
        }

            .main .container .news li a:hover {
                color: #00BFB6;
            }

.dropdown-item {
    padding: 8px 15px;
}

footer {
    z-index: 1;
    width: 100%;
    background-color: #e6e6dc;
    position: absolute;
    bottom: 0;
    display: block;
    text-align: center;
    padding: 25px;
    font-size: 14px;
    letter-spacing: 1px;
}

    footer p {
        margin-bottom: 10px;
    }

        footer p:first-child {
            letter-spacing: 1.5px;
        }

.display-none {
    display: none;
}

@media only screen and (max-height: 850px) {
    .login .logo img {
        -moz-transform: scale(0.8);
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    .login .logo {
        padding: 10px 0;
    }

    .table.login {
        padding: 24px;
        margin: 8.8px auto;
        height: auto;
    }

        .table.login h1 {
            font-size: 25.2px;
            margin-bottom: 24px;
        }

        .table.login td {
            line-height: 32px;
            padding: 11.2px 8px;
            font-size: 16.2px;
        }

            .table.login td input {
                width: 212px;
                height: 32px;
            }

            .table.login td.captcha {
                line-height: 11.2px;
            }

        .table.login .btn-login {
            width: 199.2px;
            height: 40px;
            font-size: 16px;
        }

    footer {
        padding: 20px;
    }

        footer p {
            margin-bottom: 0;
        }
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}


.no-titlebar .ui-dialog-titlebar {
    display: none;
}
.ValidMsg {
    color:red;
}

#alertDialog [type="button"] {
    background-color: #81d8d0;
    padding: 5px 18px;
    border: none;
    color: #fff;
    font-weight: 300;
    cursor:pointer;
}
#alertDialog [type="button"]:hover {
    color: #fff;
    background: #00BFB6;
}