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

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

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

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

    /* 方案列表 */
    .hbrTabList {
        padding: 30px;
    }

    .hbrTabList .rightInfo {
        width: calc(100% - 330px);
    }

    /* 加入購物車 */
    .carBox .leftPic {
        float: none;
        width: 100%;
        text-align: center;
        margin: 0 0 40px 0;
    }

    .carBox .rightInfo {
        float: none;
        width: 100%;
    }

    /* 購物車_cart & 填寫資料 */
    .checkout-tablebottom {
        padding: 30px 30px 100px 30px;
    }

    .checkout-tabletop {
        padding: 30px 30px 0px 30px;
    }

    .no-more-tables {
        margin: 0 0 20px 0;
    }

    .no-more-tables th,
    .no-more-tables td {
        padding: 10px 10px;
    }

    .no-more-tables tbody td {
        text-align: left;
    }

    .no-more-tables table,
    .no-more-tables thead,
    .no-more-tables tbody,
    .no-more-tables th,
    .no-more-tables td,
    .no-more-tables tr {
        display: block;
    }

    .no-more-tables thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .no-more-tables tr {
        border: 1px solid #ccc;
    }

    .no-more-tables td {
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 90px;
        white-space: normal;
        text-align: left;
    }

    .no-more-tables td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 70px;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
    }

    .no-more-tables td:before {
        content: attr(data-title);
    }
}

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

    /* 購物車_cart & 填寫資料 */
    .loginBox button {
        margin: 20px 0;
    }

    .loginBox .col-sm-6:nth-of-type(1) {
        border-right: none;
        border-bottom: 1px solid #bce8f1;
        margin: 0 0 20px 0;
    }

    .loginBox button {
        width: 100%;
    }

    .disCutF button {
        width: 100%;
        margin: 20px 0 0 0;
    }
}

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

    /* 共用 */
    nav .logo {
        width: 183px;
        height: 27px;
        background: url('../assets/img/logoS.png') no-repeat;
    }

    .mainContent {
        padding: 63px 0 0 0;
    }

    /* 方案列表 */
    .hbrTabContent {
        margin: 45px 0 100px 0;
    }

    .hbrTabList {
        padding: 20px;
    }

    .hbrTabList .leftPic {
        float: none;
        width: 100%;
        overflow: hidden;
        margin: 0 0 20px 0;
    }

    .hbrTabList .leftPic img {
        max-width: none;
    }

    .hbrTabList .rightInfo {
        width: 100%;
        float: none;
    }

    .hbrTabList h4 {
        margin: 0 0 25px 0;
    }

    .hbrTabList button {
        width: 100%;
        text-align: center;
    }

    /* 購物車_cart & 填寫資料 */
    .checkout-tablebottom {
        padding: 20px 5px 100px 5px;
    }

    .checkout-tabletop {
        padding: 20px 20px 0px 20px;
    }
}

@media screen and (max-width: 414px) {
    .carList {
        margin: 0 0 30px 0;
    }

    .carList .carLeft {
        float: none;
        width: 100%
    }

    .carList .carRight {
        float: none;
        width: 100%;
    }

    .btnBox button,
    .btnBox button:first-of-type {
        min-width: auto;
        margin: 10px 0px;
        width: 100% !important;
    }
}

@media screen and (max-width: 767px) {
    .mobile-subtotal {
        display: block;
    }
}