body {
    font-family: 'Microsoft JhengHei', 'Noto Sans TC', sans-serif !important;
    font-weight: 400;
    height: 100%;
    font-size: 16px;
    background-color: #eb5403 !important;
}

section {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.navbar:after, .navbar:before, .row:after, .row:before {
    display: unset !important;
    content: unset !important;
}

.container {
    width: 96% !important;
}

.main {
    width: 100%;
    height: auto;
    margin: 0 auto;
    position: relative;
    display: block;
    background: none;
}

    .main .fix_bg {
        display: block;
        margin: auto;
        position: relative;
        width: 100%;
    }

.content_bg {
    display: block;
    margin: auto;
    position: relative;
    width: 100%;
    background-color: #ffefd1 !important;
}


.header {
    width: 100%;
    height: 40px;
    min-height: initial;
    background-color: #650606 !important;
    position: absolute;
    z-index: 1;
}

.navFixed {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    margin-top: 0;
    min-width: 100%;
    height: 50px !important;
    opacity: 0.94;
    transition: opacity .5s ease-out;
}

#bg_img {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
    display: none;
}

#title_img {
    width: 88%;
    position: absolute;
    top: 14%;
    left: 5.5%;
    display: none;
}

#bg_img_mobile {
    width: 100%;
    position: relative;
    top: 0px;
    left: 0px;
}

#title_img_mobile {
    width: 100%;
    position: absolute;
    top: 13%;
    left: 0;
    display: block;
}

.accumulator_box {
    border-left: #de0101 solid 3px;
    border-right: #de0101 solid 3px;
    border-bottom: #de0101 solid 3px;
}

.invoice_box {
    border-left: #fb8608 solid 3px;
    border-right: #fb8608 solid 3px;
    border-bottom: #fb8608 solid 3px;
}

.box_title {
    font-size: 18px;
    font-weight: 700;
    padding-top: 5px;
    padding-bottom: 5px;
}

.invoice_title {
    background-color: #de0101;
    color: white;
}

.header.navbar {
    border: 0px;
    padding: 0.25rem 0rem;
}

.header .navbar-collapse {
    padding-left: 0px;
    padding-right: 0px;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-align: center;
    align-items: center;
    border-top: none;
    width: 100%;
    position: absolute;
    top: 40px;
    left: 0px;
}

    .header .navbar-collapse .navbar-nav {
        margin: auto;
        list-style-type: none;
        padding-inline-start: 0px;
    }

.navbar-toggler {
    display: block;
    position: absolute;
    top: 20%;
    right: 5px;
    /*border: none !important;*/
    box-shadow: none !important;
    padding: 0.15rem 1rem;
    font-size: 1.5rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
}

.header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='45' viewBox='0 0 50 45'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='4' d='M4 7h46M4 23h46M4 39h46'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
    border: none !important;
    box-shadow: none !important;
}

/*.navbar-brand {*/
/*    width: 0px;*/
/*}*/
.navbar-nav {
    padding-top: 10px;
    width: 100% !important;
    text-align: center !important;
    background-color: #650606;
    opacity: 0.9;
}

    .navbar-nav .nav-item {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        float: none;
    }

        /*.header .navbar-collapse .navbar-nav li {*/
        /*    padding-top: 1rem;*/
        /*    padding-bottom: 1rem;*/
        /*}*/

        .navbar-nav .nav-item a {
            color: white;
            font-size: 28px;
            font-weight: 500;
            text-decoration: none;
            padding-top: 0px !important;
            padding-bottom: 0px !important;
            line-height: 1.25 !important;
        }

.box_content {
    background-color: white;
}

    .box_content .form-check {
        margin-top: 1rem !important;
    }

    .box_content .form-check-label {
        font-size: 16px;
        font-weight: 700;
    }

    .box_content .form-row {
        margin-right: -15px !important;
        margin-left: -15px !important;
        padding-left: 0.65rem;
        padding-right: 0.75rem;
    }

    .box_content .progress {
        height: 40px !important;
        margin: 20px 0px 20px 0px;
        /*margin-top: 10px;*/
        /*margin-bottom: 10px;*/
        border-radius: 10rem;
        position: relative;
    }

        .box_content .progress .progress-bar {
            border-radius: 40rem;
            background-color: #e24040;
            position: relative;
        }

        .box_content .progress span {
            font-size: 20px;
            font-weight: 700;
            margin-left: 1rem;
            text-align: left;
            position: absolute;
            top: 14%;
            color: white;
        }

    .box_content .form-row .input-group-addon {
        border-left: 1px solid #ced4da;
        border-top: 1px solid #ced4da;
        border-bottom: 1px solid #ced4da;
        border-right: none;
        background-color: transparent;
        color: black;
    }

    .box_content .form-row .text_input {
        border-right: 1px solid #ced4da;
        border-bottom: 1px solid #ced4da;
        border-top: 1px solid #ced4da;
        border-left: none;
    }

.form-check-inline {
    margin-right: 0.1rem;
}


.box_footer {
    padding-top: 1rem;
    padding-bottom: 1rem;
    width: 39%;
    color: white;
    font-size: 28px;
    font-weight: 700;
}

.accumulator_footer {
    background-color: #de0101;
}

.invoice_footer {
    background-color: #fb8608;
}

.view_btn {
    font-size: 20px;
    font-weight: 700;
    color: #727171;
    background-color: white;
    border-radius: 10rem;
    padding: 0.05rem 1rem;
    position: relative;
    top: -3px;
    margin-left: 0.25rem !important;
    border: 0px;
}

.discount_area {
    font-size: 14px;
}

    .discount_area .view_btn {
        font-size: 14px;
        background-color: #de0101;
        color: white;
    }

.accumulator_btn {
    font-size: 22px;
    font-weight: 700;
    background-color: white;
    color: black;
    border-radius: 10rem;
    padding: 0.2rem 1.25rem;
    border: 2px black solid;
}

    .accumulator_btn:hover {
        color: #727171;
    }

    .accumulator_btn > span {
        width: 24px;
        height: 24px;
        border-radius: 50rem;
        background-color: white;
        position: relative;
        display: inline-flex;
        top: 3px;
    }

.invoice_btn {
    font-size: 22px;
    font-weight: 700;
    /*width: 150px;*/
    background-color: #fb8608;
    color: white;
    border-radius: 10rem;
    padding: 0.2rem 1.25rem;
    border: 0px;
}

    .invoice_btn > span {
        width: 24px;
        height: 24px;
        border-radius: 50rem;
        background-color: white;
        position: relative;
        display: inline-flex;
        top: 3px;
    }

.title_bar {
    height: 50px;
    background-color: #de0101;
    align-items: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .title_bar span {
        font-size: 28px;
        font-weight: 700;
        color: white;
        padding-left: 1rem;
    }

.box_content .text_content {
    padding: 10px 15px;
}

.collapse_content {
    padding: 10px 15px;
    background-color: white;
}

#accumulator_img {
    width: 100%;
    display: none;
}

#accumulator_img_mobile {
    width: 100%;
    display: block;
}

#invoice_img {
    width: 100%;
    display: none;
}

#invoice_img_mobile {
    width: 100%;
    display: block;
}

#accumulator_items_img {
    width: 100%;
    margin-right: -1px;
    display: none;
}

#accumulator_items_img_mobile {
    width: 100%;
    margin-right: -1px;
    display: block;
}

#invoice_items_img {
    width: 100%;
    display: none;
}

#invoice_items_img_mobile {
    width: 100%;
    display: block;
}

.wait_content {
    color: #c7c7c7;
    font-size: 44px;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

#discount_imgs .row .col-md-3 {
    position: relative;
    /*border-right: 1px #c7c7c7 solid;*/
}

    #discount_imgs .row .col-md-3 .img-line {
        background-color: #c7c7c7;
        display: block;
        width: 1px;
        position: absolute;
        top: 5%;
        bottom: 5%;
        right: 0;
    }

#discount_tickets .accumulator_title, #invoice_discount_tickets .accumulator_title {
    font-size: 20px;
    font-weight: 900 !important;
    background-color: #ebca85;
}

#discount_tickets .row .col-md-3, #invoice_discount_tickets .row .col-md-3 {
    position: relative;
}

    #discount_tickets .row .col-md-3 img.pic, #invoice_discount_tickets .row .col-md-3 img.pic {
        padding: 1rem 0.75rem;
        width: 100%;
    }

    #discount_tickets .row .col-md-3 .d_font, #invoice_discount_tickets .row .col-md-3 .d_font {
        font-size: 16px;
        font-weight: 900;
    }

    #discount_tickets .row .col-md-3 .d_code, #invoice_discount_tickets .row .col-md-3 .d_code {
        font-size: 16px;
        font-weight: 900;
        padding-left: 0px;
        padding-right: 0px;
    }

    #discount_tickets .row .col-md-3 .go_icon, #invoice_discount_tickets .row .col-md-3 .go_icon {
        text-align: center;
        display: inline-block;
        width: 3rem;
        line-height: 3rem;
        color: white;
        border-radius: 10rem;
    }

    #discount_tickets .row .col-md-3 .momo_icon, #invoice_discount_tickets .row .col-md-3 .momo_icon {
        background-color: #e50581;
    }

    #discount_tickets .row .col-md-3 .pchome_icon, #invoice_discount_tickets .row .col-md-3 .pchome_icon {
        background-color: #0075c1;
    }

    #discount_tickets .row .col-md-3 .shopee_icon, #invoice_discount_tickets .row .col-md-3 .shopee_icon {
        background-color: #ee4d2d;
    }

    #discount_tickets .row .col-md-3 .dl_link, #invoice_discount_tickets .row .col-md-3 .dl_link {
        color: #220970 !important;
        font-size: 16px;
        font-weight: 900;
    }

    #discount_tickets .row .col-md-3 .img-line, #invoice_discount_tickets .row .col-md-3 .img-line {
        background-color: #c7c7c7;
        display: block;
        width: 1px;
        position: absolute;
        top: 10px;
        bottom: 10px;
        right: 0;
    }

.winner_title {
    color: #de0101;
    font-size: 17px;
    font-weight: 700;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.winner_names {
    font-size: 16px;
    padding-right: 1rem;
    padding-left: 1rem;
}

    .winner_names .row:nth-child(odd) .col-12:nth-child(even),
    .winner_names .row:nth-child(even) .col-12:nth-child(odd) {
        background-color: #f7f7f7;
    }

    .winner_names .winner_item {
        position: relative;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

        .winner_names .winner_item .right-line {
            background-color: #7f7f7f;
            display: none;
            width: 1px;
            position: absolute;
            top: 20%;
            bottom: 20%;
            right: 0;
        }


#accumulator_description h4, #invoice_description h4, #notices_section h4 {
    padding: 1rem 0rem 0.25rem 0rem;
}

#accumulator_description ol, #invoice_description ol, #notices_section ol {
    padding-inline-start: 2em !important;
}

    #accumulator_description ol.inOrderLine, #invoice_description ol.inOrderLine, #notices_section ol.inOrderLine {
        list-style-type: upper-alpha;
    }

#accumulator_section .form-control, #voice_section .form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
}

.dl_btn {
    font-size: 16px;
    font-weight: 700;
    /*color: #727171;*/
    color: white;
    background-color: #de0101;
    border-radius: 0.75rem;
    padding: 0.05rem 1rem;
    position: relative;
    top: -3px;
    /*margin-left: 0.25rem !important;*/
    /*border: 0px;*/
}

.dl_btn:hover {
    color: white;
}

#accumulator_pxpay_link_mobile{
    display: block;
}

#accumulator_pxpay_link_pc {
    display: none;
}

#invoice_pxpay_link_mobile {
    display: block;
}

#invoice_pxpay_link_pc {
    display: none;
}

@media only screen and (min-width: 576px) {
    .box_title {
        font-size: 30px;
    }

    .header {
        height: 8.75%;
    }

    .navFixed {
        height: 6% !important;
    }

    .main {
        background: transparent url('../images/bigBg.jpg') center no-repeat;
    }

    #bg_img {
        display: block;
        max-width: 100%;
    }

    #title_img {
        display: block;
    }

    #bg_img_mobile {
        display: none;
    }

    #title_img_mobile {
        display: none;
    }

    .header.navbar {
        display: flex !important;
        padding: 0rem !important;
    }

    .navbar-toggler {
        display: none;
    }

    .header .navbar-collapse {
        position: relative;
        top: 0px;
        height: 100% !important;
        /*top: 48px;*/
        /*left: 0px;*/
    }

    .header .collapse {
        display: block;
    }

    .navbar-nav {
        /*justify-content: center;*/
        /*padding-right: 0px;*/
        /*padding-top: 0px;*/
        padding-top: 0px;
        float: none;
        margin-block-start: 0em;
        margin-block-start: 0em;
        margin-block-end: 0em;
        height: 100%;
        margin: auto;
        justify-content: center;
        align-items: center;
        /*display: inline-block !important;*/
        /*vertical-align: middle !important;*/
    }

    /*.header .navbar-collapse{*/
    /*    position: absolute;*/
    /*    top: 20%;*/
    /*    left: 27%;*/
    /*}*/
    .header .navbar-collapse .navbar-nav {
        display: flex;
    }

    .navbar-nav .nav-item {
        color: white;
        display: inline-block;
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        /*width: 100px;*/
        /*font-size: 14px;*/
        /*letter-spacing: 12px;*/
        padding-top: 0px !important;
        padding-bottom: 0px !important;
    }

        .navbar-nav .nav-item a {
            color: white;
            font-size: 16px;
            font-weight: 500;
            text-decoration: none;
            padding-right: 0.5rem;
            padding-left: 0.5rem;
            /*line-height: 1.25 !important;*/
            /*letter-spacing: 8px;*/
        }

            .navbar-nav .nav-item a:hover {
                color: black;
                background-color: white;
                border-radius: 10rem;
            }

            .navbar-nav .nav-item a:focus {
                color: black;
                background-color: white;
                border-radius: 10rem;
            }

        .navbar-nav .nav-item::after {
            content: '|';
            padding-left: 0.85rem;
            font-size: 16px;
            vertical-align: top;
        }

        .navbar-nav .nav-item:last-child::after {
            content: '';
            /*padding-left: 0rem;*/
            /*padding-right: 0rem;*/
        }

    #accumulator_img {
        display: block;
    }

    #accumulator_img_mobile {
        display: none;
    }

    #invoice_img {
        display: block;
    }

    #invoice_img_mobile {
        display: none;
    }

    #accumulator_items_img {
        display: block;
    }

    #accumulator_items_img_mobile {
        display: none;
    }

    #invoice_items_img {
        display: block;
    }

    #invoice_items_img_mobile {
        display: none;
    }

    .accumulator_btn {
        font-size: 24px;
    }

        .accumulator_btn > span {
            top: 2px;
        }

    .invoice_btn {
        font-size: 24px;
    }

        .invoice_btn > span {
            top: 2px;
        }

    .discount_area {
        font-size: 18px;
    }

        .discount_area .view_btn {
            font-size: 18px;
            background-color: #de0101;
            color: white;
        }

    #discount_imgs .row .col-md-6:nth-child(even) .img-line {
        display: none;
    }

    #discount_tickets .accumulator_title, #invoice_discount_tickets .accumulator_title {
        font-size: 24px;
    }

    #discount_tickets .row .col-md-6:nth-child(even) .img-line, #invoice_discount_tickets .row .col-md-6:nth-child(even) .img-lin {
        display: none;
    }

    #discount_tickets .row .col-md-3 .d_font, #discount_tickets .row .col-md-3 .dl_link,
    #invoice_discount_tickets .row .col-md-3 .d_font, #invoice_discount_tickets .row .col-md-3 .dl_link {
        font-size: 20px;
    }

    #discount_tickets .row .col-md-3 .go_icon, #invoice_discount_tickets .row .col-md-3 .go_icon {
        width: 4rem;
        line-height: 4rem;
    }

    .winner_title {
        font-size: 24px;
    }

    .dl_btn {
        font-size: 22px;
    }

    .winner_names {
        font-size: 14px;
        padding-right: 0.25rem;
        padding-left: 0.25rem;
    }

    #accumulator_pxpay_link_mobile {
        display: none;
    }

    #accumulator_pxpay_link_pc {
        display: block;
    }

    #invoice_pxpay_link_mobile {
        display: none;
    }

    #invoice_pxpay_link_pc {
        display: block;
    }
}

@media only screen and (min-width: 768px) {

    .winner_names {
        font-size: 18px;
        padding-right: 1rem;
        padding-left: 1rem;
    }

        .winner_names .row .col-12 {
            background-color: transparent !important;
        }

        .winner_names .winner_item:first-child .right-line {
            display: block;
        }

        .winner_names .winner_item:nth-child(2) .right-line {
            display: block;
        }

        .winner_names .row:nth-child(even) {
            background-color: #f7f7f7 !important;
        }

    #discount_tickets .accumulator_title, #invoice_discount_tickets .accumulator_title {
        font-size: 30px;
    }

    /*.header .navbar-collapse{*/
    /*    position: relative;*/
    /*    top: 4rem;*/
    /*    left: 27%;*/
    /*}*/

    .navbar-nav .nav-item a {
        font-size: 20px;
        line-height: 1.25 !important;
        /*letter-spacing: 15px;*/
    }

    .navbar-nav .nav-item::after {
        font-size: 18px;
        /*padding-left: 0.75rem;*/
        /*padding-right: 0.75rem;*/
        line-height: 1.25 !important;
        vertical-align: top;
    }
}

.has-error .checkbox-inline, .has-error .radio-inline {
    color: #212529;
}

.collapse {
    display: none;
}


@media (max-width: 767px) {
    .cell-buy-style .cell-buy-style-label {
        width: 100%;
    }

    .cell-buy-style .radio-inline {
        width: 33%;
        margin-left: 0px !important;
    }
}

@media only screen and (max-width: 350px){
    #discount_fb_div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

@media only screen and (min-width: 1200px) {

    .main .fix_bg {
        width: 1220px;
    }

    .content_bg {
        width: 100% !important;
    }

    .content_bg {
        width: 100% !important;
    }

    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1220px;
    }
}

@media only screen and (min-width: 2000px) {
    .header {
        background-color: transparent !important;
    }

    .navbar-nav {
        width: 1999px !important;
        margin: auto;
        opacity: 1;
    }

    .content_bg {
        width: 1999px !important;
    }
}

/*** gotop ***/

#gototop {
    right: 20px;
    bottom: 30px;
}

#gototop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    cursor: pointer;
    background: rgba(255, 255, 255, 0);
    border-width: 0;
    -webkit-transition: opacity 5s ease-in-out;
    -moz-transition: opacity 5s ease-in-out;
    -o-transition: opacity 5s ease-in-out;
    transition: opacity 5s ease-in-out;
}

    #gototop:hover {
        filter: brightness(70%);
    }

.help-block {
    color: #a94442;
}

.arrow_open {
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.arrow_close {
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}


#discount_tickets_fb .fb-share-button :first-child,
#invoice_discount_tickets_fb .fb-share-button :first-child {
    height: 35px !important;
}

.discount_tickets_title, .discount_tickets_title_right {
    display: inline-block;
}

.discount_tickets_title_right {
    float: right;
}



@media (max-width: 767px) {

    .discount_tickets_title_right {
        margin-top: -25px;
    }
}