@charset "UTF-8";

/* cart_over 結帳完成頁 */
.cartover_forward h3 {
    font-size: 19px;
    color: #000;
    font-weight: 400;
    margin-top: 10px;
    margin-bottom: 20px;
}

.cartover_forward h3 span {
    color: #cc0000;
}

/* cart 結帳填資料頁 */
.btnBox button.continue_buy {
    background: #888888;
}

.btnBox button.pay {
    width: 300px;
    background: #C82502;
    margin-top: 15px;
}

.btnBox button.edit {
    width: 300px;
    background: #888888;
    margin-top: 15px;
}

.btnBox button.continue_buylong {
    width: 300px;
    background: #888888;
}

.btnBox button.paylong {
    width: 300px;
    background: #C82502;
}

@media (min-width: 414px) and (max-width: 991px) {
    .btnBox button.pay {
        margin-left: 15px;
    }

    .btnBox button.continue_buylong,
    .btnBox button.paylong {
        margin-left: 15px;
    }
}

@media screen and (max-width: 414px) {

    .btnBox button.continue_buy,
    .btnBox button.pay .btnBox button.edit {
        width: 100%;
        width: none;
    }

    .btnBox button.continue_buylong,
    .btnBox button.paylong {
        width: 100%;
    }
}

.checkout_pay {
    width: 300px;
    background: #C82502;
    margin-top: 15px;
    padding: 10px 25px;
    min-width: 140px;
    border: none;
    color: #FFF;
    font-size: 18px;
}

.checkout_cart {
    width: 300px;
    background: #888888;
    margin-top: 15px;
    padding: 10px 20px;
    min-width: 140px;
    border: none;
    color: #fff;
    font-size: 17px;
}

@media (min-width: 414px) and (max-width: 991px) {
    .btnBox button.pay {
        margin-left: 15px;
    }

    .btnBox button.continue_buylong,
    .btnBox button.paylong {
        margin-left: 15px;
    }

    .checkout_pay {
        margin-left: 15px;
    }

    .checkout_cart {
        margin-left: 15px;
    }
}

@media screen and (max-width: 414px) {

    .btnBox button.continue_buy,
    .btnBox button.pay .btnBox button.edit {
        width: 100%;
    }

    .btnBox button.continue_buylong,
    .btnBox button.paylong {
        width: 100%;
    }

    .checkout_pay {
        width: 100%;
    }

    .checkout_cart {
        width: 100%;
    }
}

#userform label.error {
    color: red;
}

#mention_box {
    background: #F60;
    width: 20px;
    height: 20px;
    color: white;
    margin-right: 5px;
}

.container_login {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width:1200px) {
    .container_login {
        width: 780px
    }
}

.fixed {
    position: fixed;
    font-size: 18px;
    overflow: hidden;
    clear: both;
    line-height: 1.5;
    margin: 0 auto left: 0;
    bottom: 10px;
    color: white;
    text-align: center;
}

.carList:last-of-type {
    margin: 0 100px;
    z-index: 10;
}

#paydiv.hide {
    visibility: hidden;
    opacity: 0;
}

.promotions_des {
    text-align: inherit;
    line-height: 28px;
}

.promotions_des img {
    width: 100%;
    height: auto;
    max-width: 600px;
}

.stickyBar,
.carList.sticky {
    position: sticky;
}

.stickyBar {
    width: 100%;
    height: auto;
    bottom: -100px;
    left: 0;
    background: rgba(0, 0, 0, .6);
    opacity: 0;
    z-index: 9;
    transition: all 0s;
    visibility: hidden;
}

.stickyBar.fixed {
    opacity: 1;
    visibility: visible;
    bottom: 0;
    transition: all .5s;
}

.stickyBar.on {
    background: red;
}

.stickyBar .barSend {
    position: relative;
    display: inline-block;
    background: #C82502;
    color: #FFF;
    font-size: 18px;
    padding: 10px 25px;
    min-width: 140px;
    transition: all .3s;
    margin: 10px auto;
}

.stickyBar .barSend:hover {
    background: #a01e02;
    transition: all .3s;
}

.stickyBar .barSend {
    border: none;
    background: #C82502;
}

@media screen and (max-width:414px) {

    .carList .carLeft30,
    .carList .carRight70 {
        float: left;
    }

    .carList .carLeft30 {
        width: 30%;
    }

    .carList .carRight70 {
        width: 70%;
    }
}

.perchase-complete.btnBox {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-end;
    margin: 20px 0 30px 0;
}

.perchase-complete.btnBox button {
    width: fit-content;
}

.perchase-complete.btnBox button.pay {
    width: fit-content;
}

.perchase-complete.btnBox .box-left a {
    display: block;
    text-decoration: underline;
    transition: 0.5s;
    color: #C82502;
    font-size: 16px;
}

.perchase-complete.btnBox .box-left a:hover {
    text-decoration: none;
}

p:has(#mention_box) {
    line-height: 1.5em;
}

.perchase-complete.btnBox button.pay {
    width: fit-content;
    background: #C82502;
    margin-bottom: 15px;
    margin-top: 15px;
}

.navbar-fixed-top {
    box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.15);
}

@media screen and (max-width: 414px) {
    .perchase-complete.btnBox button:first-of-type {
        width: 50% !important;
    }

    .perchase-complete.btnBox .box-left {
        flex: 1;
    }

    .perchase-complete.btnBox button.pay {
        width: 100% !important;
    }

    p:has(#mention_box) {
        padding: 0 1rem;
        text-align: justify;
    }

    .perchase-complete.btnBox button.pay {
        margin-top: 10px;
    }
}