/* 頁籤 */

.pager {
    position: relative;
    font-size: 14px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    line-height: 35px;
}

.pager .arrow_box {
    position: relative;
    width: 92px;
    height: 35px;
    background-color: white;
    box-shadow: 8px 6px 14px rgba(0, 0, 0, 0.05);
    margin: 0 20px;
    display: flex;
}

.pager .arrow_box .arrow {
    position: relative;
    background-repeat: no-repeat;
    width: 50%;
    height: 100%;
    background-position: center;
    display: flex;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.pager .arrow_box .home {
    background-image: url(../images/shop/prev_plus.png);
}

.pager .arrow_box .home:after {
    content: '';
    background-color: #d2d2d2;
    width: 1px;
    height: 12px;
    position: absolute;
    right: 0;
    top: 12px;
}

.pager .arrow_box .end {
    background-image: url(../images/shop/prev_plus.png);
    transform: rotateY(180deg);
}

.pager .arrow_box .end:after {
    content: '';
    background-color: #d2d2d2;
    width: 1px;
    height: 12px;
    position: absolute;
    right: 0;
    top: 12px;
}

.pager .arrow_box .prev {
    background-image: url(../images/shop/prev.png);
}

.pager .arrow_box .next {
    background-image: url(../images/shop/prev.png);
    transform: rotateY(180deg);
}

.pager .mobile_num {
    display: none;
}

.pager .num {
    margin: 0 2px;
    position: relative;
    color: #767676;
    display: inline-block;
    padding: 0 6px;
}

.pager .num.active::after {
    content: '';
    background-color: #767676;
    position: absolute;
    width: 8px;
    height: 1px;
    top: 25px;
    left: 50%;
    margin-left: -4px;
}


/* // */


/* 訂單管理 */

.order_manage {
    position: relative;
    width: 100%;
}

.order_manage .order_list {
    background-color: transparent;
}

.order_manage .order_now {
    position: relative;
    padding: 45px;
    display: block;
    margin-bottom: 12px;
    font-size: 16px;
}

.order_manage .order_now .title {
    position: relative;
    border-bottom: 1px solid black;
    padding-bottom: 6px;
}

.order_manage .order_now .detail {
    position: relative;
    display: flex;
    padding-top: 18px;
}

.order_manage .order_now .detail .line {
    position: relative;
    width: 100%;
    border-right: 1px solid #afafaf;
    padding-right: 15px;
    margin-right: 27px;
    display: flex;
}

.order_manage .order_now .detail .line .name {
    position: relative;
    width: 100px;
}

.order_manage .order_now .detail .line .memo {
    position: relative;
    font-size: 13px;
    color: gray;
}

.order_manage .order_now .detail .line:last-child {
    border-right: 0;
    margin-right: 0;
}

.order_manage .order_now .info {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    font-size: 15px;
}

.order_manage .order_now .info .block {
    position: relative;
    display: flex;
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    padding: 11px 0;
}

.order_manage .order_now .info .line {
    position: relative;
    display: flex;
    width: 49%;
}

.order_manage .order_now .info .line .name {
    position: relative;
    width: 100px;
}

.order_manage .order_now .info .line .field {
    position: relative;
    color: #767676;
    width: 100%;
}

.order_manage .order_now .info .line .field .button {
    background-color: #1d1d1d;
    color: white;
    position: absolute;
    right: 0;
    top: -7px;
    height: 38px;
    line-height: 36px;
    width: 100px;
    font-size: 15px;
}

.order_manage .order_now .info .line:nth-child(even) {
    margin-left: 1%;
    width: 50%;
}

.order_manage .order_now .info .line:nth-child(even) .name {
    padding-left: 30px;
    width: 155px;
}

.order_manage .order_now .info .long.line {
    width: 100%;
    margin-right: 0;
    border-bottom: 1px solid #d8d8d8;
    padding: 11px 0;
    margin-left: 0;
}

.order_manage .order_now .info .long.line .name {
    padding-left: 0;
    width: 100px;
}

.order_manage .order_now .info div:last-child,
.order_manage .order_now .info .line:last-child {
    border-bottom: 0;
}

.order_manage .order_search {
    position: relative;
    font-size: 14px;
    height: auto;
    line-height: 37px;
    margin-bottom: 38px;
    display: inline-block;
    padding-bottom: 25px;
    border-bottom: 2px solid gainsboro;
    width: 100%;
}

.order_manage .order_search .name {
    position: relative;
    float: left;
    margin-right: 12px;
    font-size: 16px;
}

.order_manage .order_search .select_box {
    position: relative;
    float: left;
    width: 105px;
    margin-right: 8px;
    background-position: 90%;
}

.order_manage .order_search .date_zone {
    position: relative;
    float: right;
    width: 80.5%;
    display: flex;
    height: 37px;
}

.order_manage .order_search .date_zone .inputbox {
    position: relative;
    font-size: 14px;
    height: 100%;
    border: 1px solid gainsboro;
    background-color: white;
    width: 285px;
    text-align: center;
    /* background-image: url(../images/shop/date.png); */
    background-repeat: no-repeat;
    background-position: 98%;
    padding-right: 40px;
    cursor: pointer;
}

.order_manage .order_search .date_zone span {
    position: relative;
    width: 52px;
}

.order_manage .order_search .date_zone span:after {
    content: '';
    background-color: black;
    width: 15px;
    height: 1px;
    position: absolute;
    left: 17px;
    top: 19px;
}

.order_manage .order_search .date_zone .link_button {
    position: relative;
    background-color: #1d1d1d;
    color: white;
    width: 88px;
    height: 100%;
    line-height: 36px;
    margin-left: 22px;
    font-size: 14px;
}


/* // */


/* 結算價格 */

.final_price {
    position: relative;
    font-size: 13px;
    line-height: 22px;
    margin-right: 0;
    margin-left: auto;
    text-align: right;
    padding-top: 25px;
    padding-right: 50px;
    letter-spacing: 1px;
    padding-left: 50%;
}

.final_price.step_pay {
    margin-bottom: 100px;
}

.final_price .fee {
    position: absolute;
    left: 0;
    line-height: 30px;
    width: 384px;
    bottom: 0;
    padding-left: 50px;
}

.final_price .fee .name {
    font-size: 14px;
    color: white;
    background-color: #1d1d1d;
    float: left;
    padding: 0px 22px;
    border-radius: 5px;
    margin-right: 20px;
}

.final_price .fee .memo {
    font-size: 15px;
    float: left;
    text-align: left;
    color: #727272;
}

.final_price .red_discount {
    margin-top: 20px;
}

.final_price .line {
    position: relative;
    display: flex;
    line-height: 2;
}

.final_price .line .name {
    position: relative;
    width: 70%;
    font-size: 15px;
}

.final_price .line .name .tips {
    color: #ff3a3a;
}

.final_price .line .price {
    position: relative;
    width: 80%;
}

.final_price .discount.line {
    margin-top: 0;
}

.final_price .discount.line .name {
    color: #ff3a3a;
}

.final_price .sum_price.line {
    border-top: 1px solid #d6d6d6;
    padding-top: 30px;
    margin-top: 30px;
    font-weight: bold;
    line-height: 25px;
}

.final_price .sum_price.line .price {
    font-size: 24px;
    font-weight: 900;
}

.final_price .price {
    position: relative;
}

.final_price .price span {
    position: relative;
}


/* // */


/* 步驟顯示條 */

#step_top {
    position: relative;
    height: 64px;
    text-align: center;
    background-color: white;
    color: #1e1e1e;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: calc(var(--height-nav-md) + 60px);
}

#step_top .step {
    position: relative;
    display: flex;
    align-items: baseline;
    margin-right: 80px;
}

#step_top .step i {
    display: none;
}

#step_top .step.ok i {
    display: block;
    color: white;
    position: absolute;
    left: 11px;
    z-index: 10;
    top: 11px;
}

#step_top .step.ok.now .num {
    color: transparent;
}

#step_top .step .num {
    position: relative;
    font-family: Myriad Pro, sans-serif;
    color: black;
    border: 2px solid gray;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    margin-right: 9px;
}

#step_top .step .name {
    position: relative;
}

#step_top .step.now .num {
    background-color: #303030;
    color: white;
    border-color: #303030;
}

#step_top .step.now::after {
    opacity: 1;
}

#step_top .step::after {
    content: '';
    background-image: url(../images/shop/step.png);
    position: absolute;
    width: 40px;
    height: 10px;
    background-position: center;
    background-repeat: no-repeat;
    right: -59px;
    top: 13px;
    opacity: .2;
}

#step_top .step:last-child {
    margin-right: 0;
}

#step_top .step:last-child:after {
    display: none;
}


/* // */


/* 整個購物列表 */

.shop_step {
    position: relative;
}

.shop_step .head_title {
    position: relative;
    font-size: 24px;
    margin-left: 40px;
    display: block;
    margin-bottom: 20px;
    font-weight: bold;
}

.shop_step .pay_box {
    margin-bottom: 15px;
    position: relative;
}

.shop_step .pay_box .pay_list {
    position: relative;
}

.shop_step .add_num {
    position: relative;
    width: 82px;
    height: 28px;
    display: flex;
    border: 1px solid #dbdbdb;
    bottom: 0px;
    right: 9%;
}

.shop_step .add_num .btn {
    position: relative;
    width: 33%;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.shop_step .add_num .down {
    border-right: 1px solid #dbdbdb;
    background-image: url(../images/shop/num_nus.png);
}

.shop_step .add_num .up {
    background-image: url(../images/shop/num_plus.png);
    border-left: 1px solid #dbdbdb;
}

.shop_step .add_num .num_input {
    position: relative;
    width: 34%;
    text-align: center;
    border: 0;
    font-size: 14px;
    outline: 0;
}

.shop_step .trace_list {
    position: relative;
}

.shop_step .trace_list .title {
    position: relative;
}

.shop_step .trace_list .title .th {
    position: relative;
}

.shop_step .trace_list .title .t1 {
    position: relative;
}

.shop_step .trace_list .title .t2 {
    position: relative;
    width: 28%;
    font-size: 18px;
}

.shop_step .trace_list .title .t3 {
    flex-wrap: wrap;
    align-content: center;
    width: 20%;
    font-size: 18px;
}

.shop_step .trace_list .title .t3 .new_price {
    display: block;
    width: 100%;
    color: black;
}

.shop_step .trace_list .title .t3 .old_price {
    display: block;
    text-decoration: line-through;
    width: 100%;
    opacity: .8;
}

.shop_step .trace_list .title .t4 {
    position: relative;
    font-size: 18px;
}

.shop_step .trace_list .title .t5 {
    position: relative;
    font-size: 18px;
}

.shop_step .trace_list .title .t6 {
    position: relative;
    width: 13%;
    font-size: 18px;
}

.shop_step .trace_list .line {
    position: relative;
}

.shop_step .trace_list .line .td {
    position: relative;
}

.shop_step .trace_list .line .t1 {
    position: relative;
}

.shop_step .trace_list .line .t1 img {
    width: 100%;
    max-width: 65px;
    max-height: 65px;
}

.shop_step .trace_list .line .t2 {
    position: relative;
    width: 28%;
}

.shop_step .trace_list .line .t3 {
    position: relative;
    flex-wrap: wrap;
    align-content: center;
    width: 25%;
}

.shop_step .trace_list .line .t3 b:before {
    content: 'NT$ ';
}

.shop_step .trace_list .line .t3 .new_price {
    display: block;
    width: 100%;
    color: black;
}

.shop_step .trace_list .line .t3 .old_price {
    display: block;
    text-decoration: line-through;
    width: 100%;
    opacity: .8;
}

.shop_step .trace_list .line .t3 .old_price .price {
    color: #727272;
}

.shop_step .trace_list .line .t3 .all_price {
    color: #fff;
    font-size: 12px;
    background-color: #cc0000;
    padding: 5px;
}

.shop_step .trace_list .line .t4 {
    position: relative;
}

.shop_step .trace_list .line .t5 {
    position: relative;
}

.shop_step .trace_list .line .t6 {
    position: relative;
    width: 13%;
}

.shop_step .trace_list .line .del {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.shop_step .trace_list .line .del i {
    cursor: pointer;
    padding: 10px;
}

.shop_step .take_way {
    position: relative;
}

.shop_step .take_way .option {
    position: relative;
    border-bottom: 1px solid #d8d8d8;
    padding-bottom: 20px;
    padding-top: 10px;
}

.shop_step .take_way .option input {
    position: absolute;
}

.shop_step .take_way .option label {
    position: relative;
    display: flex;
    margin-left: 0;
}

.shop_step .take_way .option .name {
    position: relative;
    font-size: 16px;
    width: 20%;
}

.shop_step .take_way .option .memo {
    position: relative;
    font-size: 16px;
    color: #727272;
}

.shop_step .border_style {
    padding: 50px;
    position: relative;
}

.shop_step .step_block {
    position: relative;
}

.shop_step .step_block.country {
    margin-bottom: 50px;
}

.shop_step .step_block>.title {
    position: relative;
    font-size: 18px;
    border-bottom: 1px solid black;
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-weight: bold;
}

.shop_step .step_block>.title .redtip {
    color: #ff3a3a;
    margin-left: 22px;
    font-size: 14px;
}

.shop_step .step_block .benefit {
    position: relative;
    display: flex;
    color: #727272;
    font-size: 13px;
}

.shop_step .step_block .benefit .title {
    position: relative;
    font-size: 15px;
}

.shop_step .step_block .benefit .benefit_option {
    position: relative;
    display: flex;
    margin-left: 20px;
    color: black;
}

.shop_step .step_block .benefit .benefit_option .option {
    margin-right: 15px;
}

.shop_step .step_block .benefit .benefit_option input[type=radio]:not(old)+label {
    background-image: url(../images/member/ch.jpg);
    padding-left: 25px;
}

.shop_step .step_block .benefit .benefit_option input[type=radio]:not(old):checked+label {
    background-image: url(../images/member/ch_check.jpg);
}

.shop_step .select_box {
    position: relative;
    width: 100%;
}

.shop_step .select_box {
    display: flex;
    align-items: center;
}

.shop_step .select_box .tip {
    position: relative;
    font-size: 16px;
    color: #727272;
    left: 20px;
    width: 50%;
}

.shop_step .select_box select {
    position: relative;
    width: 220px;
}

.shop_step .border_style.ticket_list {
    margin-top: 30px;
}

.shop_step .coupon_box{
    border: 1px solid gainsboro;
    height: 37px;
    width: 220px;
    padding-left: 10px;
    padding-right: 20px;
}
.shop_step .coupon_box input{
    width: 220px;
    height: 100%;
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
    outline: none;
}
.shop_step .check_coupon{
    color: #606060;
    position: absolute;
    left: 100%;
    width: 150px;
    font-weight: bold;
    margin-left: 18px;
    font-size: 16px;
    line-height: 33px;
    transition: all .3s ease;top: 0;
}

.shop_step .check_coupon:hover{
    color: var(--bg-color);;
}

/* // */


/* final結帳資料 */

.final_step {
    display: block;
}

.final_step::after {
    content: '';
    display: block;
    clear: both;
}

.final_step .left_area {
    width: 50%;
    padding-right: 18px;
    position: relative;
    display: block;
    float: left;
}

.final_step .left_area .head_title {
    margin-left: 30px;
}

.final_step .border_style {
    padding: 30px;
    min-height: auto;
    margin-bottom: 30px;
}

.final_step .right_area {
    width: 50%;
    float: right;
    display: inline-block;
}

.final_step .right_area .final_price {
    margin-bottom: 0;
    margin-top: 0;
    padding-top: 0;
    padding-right: 0;
    padding-left: 32%;
}

.final_step .right_area .final_price .line .name {
    width: 60%;
}

.final_step .right_area .final_price .line.point_show {
    margin-top: 5px;
}

.final_step .right_area .final_price .line .price,
.final_step .right_area .final_price .line .point {
    width: 48%;
}

.final_step .right_area .shop_list {
    /* padding-left: 18px; */
    padding-right: 0;
}

.final_step .right_area .shop_list .trace_list {
    border-bottom: 1px solid #e2e2e2;
}

.final_step .right_area .shop_list .line {
    line-height: 17px;
}

.final_step .right_area .shop_list .title .t1,
.final_step .right_area .shop_list .line .t1 {
    width: 22%;
}

.final_step .right_area .shop_list .title .t2,
.final_step .right_area .shop_list .line .t2 {
    width: 50%;
}

.final_step .right_area .shop_list .title .t5,
.final_step .right_area .shop_list .line .t5 {
    width: 25%;
    text-align: right;
}

.final_step .right_area .shop_list .title .t5 span,
.final_step .right_area .shop_list .line .t5 span {
    width: 100%;
}

.final_step .acoount_block .account_box .h_title {
    border-bottom: 1px solid black;
    font-size: 18px;
    font-weight: bold;
    padding-bottom: 8px;
    margin-bottom: 15px;
    display: flex;
}

.final_step .acoount_block .account_box .h_title .name {
    width: 112px;
}

.final_step .acoount_block .account_box .h_title .data_recive {
    position: relative;
    width: 160px;
    background-position: 92%;
}

.final_step .acoount_block .account_box .h_title .data_recive select {
    font-size: 14px;
    padding-right: 25px;
}

.final_step .acoount_block .account_box .h_title .option {
    width: 166px;
    /* padding-left: 23px; */
    font-size: 14px;
    color: #727272;
}

.final_step .acoount_block .account_box .field_box {
    width: 100%;
}

.final_step .acoount_block .account_box .field_box .line label {
    min-width: 90px;
}

.final_step .acoount_block .account_box .field_box .line.member_law .option {
    /* padding-left: 21px; */
    display: block;
    padding-right: 40px;
}

.final_step .acoount_block .account_box .field_box .line.member_law .option label {
    width: 100%;
    color: #727272;
    line-height: 22px;
    padding-top: 3px;
}

.final_step .acoount_block .account_box .field_box .line.member_law .option a {
    color: #b59339;
}

.final_step .acoount_block .account_box .field_box .line.addr {
    flex-wrap: wrap;
}

.final_step .acoount_block .account_box .field_box .line.addr .addr_edit {
    /* width: calc(100% - 90px); */
}

.final_step .acoount_block .account_box .field_box .line.addr .option {
    width: calc(100% - 90px);
    border-bottom: 1px solid #e1e1e1;
    font-size: 12px;
    color: #727272;
    padding-top: 5px;
    padding-bottom: 5px;
}

.final_step .acoount_block .account_box .field_box .line.addr .option label {
    width: 100%;
    min-width: 90px;
    font-size: 14px;
}

.final_step .acoount_block .account_box .field_box .line.addr .option:last-child {
    border-bottom: 0;
}

.final_step .acoount_block .account_box .field_box .line .addr_edit .addr_block .addr_box {
    display: block;
    border-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.final_step .acoount_block .account_box .field_box .line .addr_edit .addr_block .addr_box .select_box {
    background-position: 92%;
}

.final_step .acoount_block .account_box .field_box .line .addr_edit .addr_block .addr_box .select_box select {
    padding-right: 30px;
}

.final_step .acoount_block .account_box .field_box .line.store_check .link_button {
    background-color: #1d1d1d;
    color: white;
    width: 95px;
    font-size: 14px;
    height: 35px;
    line-height: 33px;
}

.final_step .acoount_block .account_box .field_box .textarea {
    width: 100%;
    height: 135px;
    border: 1px solid #d9d9d9;
    overflow: hidden;
    resize: none;
    padding: 8px 10px;
    outline: none;
}


/* // */


/* 購物車裡的區塊 */

.carItems .ui-widget {
    position: relative;
    display: block;
    height: 30px;
    text-align: center;
    border: 0;
    background: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: "Cinzel", "cwtexfangsong", Myriad Pro, Microsoft JhengHei, Open Sans, Myriad, Aria, sans-serif;
}

.carItems .ui-spinner-input {
    width: 100%;
    text-align: center;
    line-height: 30px;
    margin: 0 auto;
}

.carItems .ui-spinner a.ui-spinner-up {
    position: absolute;
    right: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 27px;
    height: 30px;
    cursor: pointer;
    border-left: 1px solid #d8d8d8;
}

.carItems .ui-button-text-only .ui-button-text {
    padding: 0;
}

.carItems .ui-spinner a.ui-spinner-up:after {
    position: relative;
    top: 1px;
    display: block;
    content: '+';
    color: #080808;
}

.carItems .ui-spinner a.ui-spinner-down {
    position: absolute;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 27px;
    height: 30px;
    cursor: pointer;
    border-right: 1px solid #d8d8d8;
    background-color: transparent;
}

.carItems .ui-button-text-only .ui-button-text {
    padding: 0;
}

.ui-button-text-only .ui-button-text {
    padding: .4em 1em;
}

.carItems .ui-spinner a.ui-spinner-down.disable:after {
    color: #d8d8d8;
}

.carItems .ui-state-default .ui-icon {
    background-size: 0;
}

.carItems .ui-spinner a.ui-spinner-down:after {
    display: block;
    content: '-';
    color: #080808;
}


/*  */

.mfp-with-anim {
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}


/* 匯款通知 */

.paybg {
    position: fixed;
    z-index: 1000;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    pointer-events: none;
    opacity: 0;
    transition: 0.5s ease;
}

.paybg.show {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

.jump_pay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 850px;
}

.jump_pay .box {
    position: relative;
    width: 100%;
    padding: 90px 50px 50px;
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
}

.jump_pay .box .title {
    position: relative;
    font-size: 20px;
    border-bottom: 1px solid black;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.jump_pay .box .ajax-form {
    display: flex;
    flex-wrap: wrap;
}

.jump_pay .box .block {
    position: relative;
    font-size: 13px;
    width: 50%;
    float: left;
}

.jump_pay .box .block .line {
    position: relative;
    display: flex;
    line-height: 38px;
    margin-bottom: 11px;
    outline: 0;
}

.jump_pay .box .block .line label {
    position: relative;
    width: 100px;
    font-size: 16px;
}

.jump_pay .box .block .line .inpubox {
    position: relative;
    width: 82%;
    border: 1px solid gainsboro;
    padding: 10px;
}

.jump_pay .box .block .line textarea {
    position: relative;
    border: 1px solid gainsboro;
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    height: 85px;
    resize: none;
}

.jump_pay .box .block .line:last-child {
    margin-bottom: 0;
}

.jump_pay .box .block .line.memo_line {
    height: auto;
}

.jump_pay .box .block .button_box {
    position: relative;
    padding-left: 71px;
    float: right;
    width: 100%;
}

.jump_pay .box .block .button_box input {
    background-color: #1d1d1d;
    color: white;
    position: relative;
    right: 0;
    height: 38px;
    line-height: 36px;
    width: 125px;
    font-size: 13px;
    float: left;
    border: 0;
    border-radius: 4px;
    margin-left: 6px;
    outline: 0;
    cursor: pointer;
    width: 47%;
}

.jump_pay .box .block .button_box .reset {
    background-color: #606060;
}

.jump_pay .box .block:last-child {
    padding-left: 50px;
}

.jump_pay .box::after {
    content: '';
    display: block;
    clear: both;
}

.jump_pay input,
.jump_pay textarea {
    border: 1px solid #f1f1f1;
    width: 82%;
}


/* 取消訂單 */

.cancelbg {
    position: fixed;
    z-index: 1000;
    top: 0;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
}

.cancelbg.show {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}

#cancelblk {
    width: 300px;
    border: 1px solid #000;
    position: fixed;
    top: 50%;
    background: #fff;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 2% 4%;
    border-radius: 5px;
}

#cancelblk p {
    text-align: center;
    margin-bottom: 30px;
    font-weight: bold;
}

#cancelblk .flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

#cancelblk .flex a {
    padding: 5px 20px;
    border: 1px solid #E0E0E0;
    transition: 0.5s ease;
    border-radius: 5px;
}

#cancelblk.show .flex a {
    pointer-events: initial;
}

#cancelblk .flex a:hover {
    padding: 5px 20px;
    background-color: #000;
    color: #fff;
}

.commentbg {
    position: fixed;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    top: 0;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s ease;
}

.commentbg.show {
    opacity: 1;
    pointer-events: initial;
    transition: 0.5s ease;
}


/* // */


/* 評價視窗 */

.jump_comment {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 850px;
    height: 350px;
}

.jump_comment .box {
    position: relative;
    width: 100%;
    padding: 90px 30px 50px;
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
    overflow-y: scroll;
    height: 100%;
}

.jump_comment .box .title {
    position: relative;
    font-size: 20px;
    border-bottom: 1px solid black;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.jump_comment .box .ajax-form {
    display: flex;
    flex-wrap: wrap;
}

.jump_comment .box .block {
    position: relative;
    font-size: 13px;
    width: 50%;
    margin-bottom: 30px;
    align-self: center;
}

.jump_comment .box .block .line {
    position: relative;
    display: flex;
    line-height: 38px;
    margin-bottom: 11px;
    outline: 0;
}

.jump_comment .box .block .line textarea {
    position: relative;
    border: 1px solid gainsboro;
    overflow-x: visible;
    overflow-y: visible;
    width: 100%;
    height: 85px;
    resize: none;
}

.jump_comment .box .block .line label {
    position: relative;
    width: 86px;
    font-size: 16px;
}

.jump_comment .box .block .button_box {
    position: relative;
    padding-left: 61px;
    float: right;
    width: 100%;
}

.jump_comment .box .block:last-child {
    padding-left: 50px;
}

.jump_comment .box .block .button_box input {
    background-color: #1d1d1d;
    color: white;
    position: relative;
    right: 0;
    height: 38px;
    line-height: 36px;
    width: 125px;
    font-size: 13px;
    float: left;
    border: 0;
    border-radius: 4px;
    margin-left: 6px;
    outline: 0;
    cursor: pointer;
}

.jump_comment .box .block .button_box .reset {
    background-color: #606060;
}

.jump_comment .box .block .line img {
    height: 100px;
    object-fit: contain;
}


/* // */


/* 星星評分 */

.star-cb-group {
    direction: rtl;
    /* width: 174px; */
}

.star-cb-group * {
    font-size: 1rem;
}

.star-cb-group label {
    position: relative;
    width: 32px !important;
    font-size: 16px;
    background: none !important;
    padding: 0 !important;
    line-height: 14px !important;
}

.star-cb-group>input {
    display: none;
}

.star-cb-group>input+label {
    /* only enough room for the star */
    display: inline-block;
    overflow: hidden;
    text-indent: 9999px;
    width: 1em;
    white-space: nowrap;
    cursor: pointer;
}

.star-cb-group>input+label:before {
    display: inline-block;
    text-indent: -9999px;
    content: "";
    background-image: url(../images/shop/star_no.png);
    color: #888;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
}

.star-cb-group>input:checked~label:before,
.star-cb-group>input+label:hover~label:before,
.star-cb-group>input+label:hover:before {
    content: "";
    background-image: url(../images/shop/star_yes.png);
    color: #e52;
    text-shadow: 0 0 1px #333;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    background-repeat: no-repeat;
}

.star-cb-group>.star-cb-clear+label {
    text-indent: -9999px;
    width: .5em;
    margin-left: -.5em;
}

.star-cb-group>.star-cb-clear+label:before {
    width: .5em;
}

.star-cb-group:hover>input+label:before {
    content: "";
    color: #888;
    text-shadow: none;
}

.star-cb-group:hover>input+label:hover~label:before,
.star-cb-group:hover>input+label:hover:before {
    content: "";
    color: #e52;
    text-shadow: 0 0 1px #333;
}

#log {
    margin: 1em auto;
    width: 5em;
    text-align: center;
    background: transparent;
}


/* // */


/* 訂單成功視窗 */

.sucessBox {
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    z-index: 1002;
    width: 100%;
    transition: 0.5s;
    opacity: 0;
    pointer-events: none;
}

.sucessBox.show {
    opacity: 1;
    pointer-events: initial;
}

#sucess_msg {
    position: relative;
    position: fixed;
    z-index: 20000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: 0.5s;
    opacity: 1;
    width: 850px;
}

#sucess_msg .box {
    padding: 90px 77px 50px;
    position: relative;
    width: 100%;
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
}

#sucess_msg .box::after {
    content: '';
    display: block;
    clear: both;
}

#sucess_msg .box .block {
    position: relative;
    font-size: 13px;
    width: 50%;
    float: left;
}

#sucess_msg .box .block:first-child {
    padding-right: 50px;
    border-right: 1px solid #e4e4e4;
}

#sucess_msg .box .block:last-child {
    padding-left: 50px;
}

#sucess_msg .box .block .forgot_link {
    position: relative;
    color: #727272;
    margin-top: 15px;
    display: inline-block;
}

#sucess_msg .box .block .forgot_link:before {
    content: '';
    background-color: gray;
    width: 0%;
    height: 1px;
    position: absolute;
    left: 0;
    bottom: -5px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#sucess_msg .box .block .title {
    font-weight: bold;
    font-size: 18px;
    border-bottom: 0;
    position: relative;
    font-size: 20px;
    border-bottom: 1px solid black;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

#sucess_msg .box .block .line {
    position: relative;
    display: block;
    height: auto;
    margin-bottom: 20px;
    outline: none;
}

#sucess_msg .box .block .line .inpubox {
    position: relative;
    width: 100%;
    margin-bottom: 12px;
}

#sucess_msg .box .block .button_box {
    position: relative;
    padding-left: 0;
    display: flex;
    justify-content: flex-start;
}

#sucess_msg .box .block .button_box .link_button {
    text-align: center;
    font-size: 14px;
    display: block;
    color: white;
    border: 1px solid #1d1d1d;
    border-radius: 3px;
    height: 45px;
    line-height: 42px;
    cursor: pointer;
    background-color: #1d1d1d;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
    width: 145px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#sucess_msg .box .block .button_box .link_button.login_button {
    background-color: #72795f;
    border-color: #72795f;
}

#sucess_msg .box .block .login_msg {
    position: relative;
    font-size: 13px;
    color: #727272;
    line-height: 20px;
    height: 126px;
}

#sucess_msg .line {
    font-size: 13px;
    color: #727272;
    line-height: 23px;
}

#sucess_msg .order_go {
    text-align: center;
    font-size: 14px;
    display: block;
    color: white;
    border: 1px solid #1d1d1d;
    border-radius: 3px;
    height: 45px;
    line-height: 42px;
    background-color: #1d1d1d;
    cursor: pointer;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15);
    width: 145px;
    margin-top: 88px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

#sucess_msg .icon {
    text-align: center;
    position: relative;
    top: -45px;
}


/* // */


/* 新增滿額贈 */

.full_box {
    margin-bottom: 30px;
}

.shop_list .full {
    display: flex;
    padding-bottom: 15px;
    border-bottom: 1px solid #303030;
}

.shop_list .full h3 {
    width: 11%;
}

.shop_list .full span {
    width: 89%;
    color: #ff7d7d;
}

.shop_list .swiper-slide {
    display: flex;
    justify-content: center;
}

.shop_list .merchandise {
    position: relative;
    padding-top: 2.083vw;
}

.gift-container .swiper-slide {
    justify-content: initial;
}

.shop_list .merchandise::before {
    content: '';
    position: absolute;
    left: -35%;
    top: 2.8645vw;
    width: 1px;
    height: 100%;
    background-color: #f2f2f2;
}

.shop_list .merchandise .mer_check {
    width: 15px;
    height: 15px;
    border: 2px solid #b8b8b8;
    position: relative;
    top: 25px;
    left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop_list .merchandise .mer_check img {
    opacity: 0;
}

.shop_list .merchandise .mer_check img.active {
    opacity: 1;
}

.shop_list .merchandise p {
    padding-top: 15px;
}

.shop_list .swiper-slide:nth-child(1) .merchandise::before {
    display: none;
}

.shop_list .swiper-button-next {
    right: 6vw;
    top: 55%;
    color: #000;
}

.shop_list .swiper-button-next:after {
    font-size: 20px;
    font-weight: 900;
}

.shop_list .swiper-button-prev {
    top: 55%;
    left: 5%;
    color: #000;
}

.shop_list .swiper-button-prev::after {
    font-size: 20px;
    font-weight: 900;
}

.full_box .swiper-container {
    margin: 0 6.3975vw;
    pointer-events: initial;
    z-index: 100;
    --swiper-navigation-color: blcok;
    /* 单独设置按钮颜色 */
    --swiper-navigation-size: 30px;
    /* 设置按钮大小 */
}


/* // */


/* 加購 */

.add_purchase {
    margin-top: 100px;
}

.add_purchase .title {
    display: flex;
    border-bottom: 1px solid #000;
    margin: 0 50px;
    padding-bottom: 10px;
}

.add_purchase .title h3 {
    width: 70%;
}

.add_purchase .title span {
    width: 40%;
    text-align: right;
}

.add_purchase .wrap {
    display: flex;
    margin-top: 40px;
    border-bottom: 1px solid #000;
    padding-bottom: 50px;
    flex-wrap: wrap;
}

.add_purchase .wrap:last-child {
    border: none;
}

.add_purchase .wrap .box {
    width: calc( 100% / 5);
    text-align: center;
    padding: 0 1.60417vw;
    font-size: 15px;
}

.add_purchase .wrap .box h4 {
    text-align: left;
    letter-spacing: 2px;
    line-height: 1.2;
}

.add_purchase .wrap .box div {
    text-align: left;
    position: relative;
    letter-spacing: 2px;
}

.add_purchase .wrap .box div span {
    padding-left: 10px;
    text-align: right;
    position: absolute;
    right: 0;
}

.add_purchase .wrap .box .size {
    padding-bottom: 15px;
}

.add_purchase .wrap .box .size span {
    position: relative;
}

.add_purchase .wrap .box .add {
    line-height: 1.2;
}

.add_purchase .wrap .box .orgin {
    line-height: 1.2;
}

.add_purchase .wrap .box a {
    margin-top: 30px;
    padding: 7px 20px;
    border: 1px solid #cecece;
    background-color: #fff;
    border-radius: 5px;
    width: 100%;
    color: #000;
    display: inline-block;
}

.add_purchase .wrap .box a:first-child {
    padding: 0px 0px;
}

.add_purchase .wrap .box a:first-child:hover {
    background-color: #fff;
}

.add_purchase .wrap .box a img {
    vertical-align: middle;
}

.add_purchase .wrap .box a:hover {
    background-color: #000;
    color: #fff;
}

.form-button {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
}

.form-button .link_button {
    margin: 0 !important;
    width: 145px;
}
.acoount_block .account_box .login-line{
    align-items: center;
}
.fb_login {
    margin-right: 15px;
}

.fb_login i {
    font-size: 45px;
}

.fb_login i::before {
    color: #0E8EF2;
}

.google_login {
    display: inline-block;
    margin-right: 15px;
    width: 45px;
    height: 40px;
}

.google_login img{
    width:100%;
    height:100%;

}
.google_login i {
    font-size: 45px;
}

.google_login i::before {
    color: #EB4537;
}

.line_login {
    margin-right: 15px;
}

.line_login i {
    font-size: 45px;
}

.line_login i::before {
    color: #00c300;
}


/* RWD */

@media only screen and (min-width: 1025px) {
    .pager .num:hover {
        color: #b59339;
    }
    .pager .arrow_box .arrow:hover {
        background-color: rgba(181, 147, 57, 0.1);
    }
    .jump_comment .box .block .button_box input:hover {
        background-color: #b59339;
        color: white;
        border-color: #b59339;
    }
    .final_step .right_area.fixed {
        position: fixed;
        width: 49%;
        top: 12%;
    }
    .final_step .right_area.bottom {
        position: absolute;
        bottom: 30px;
        top: auto;
        width: 50%;
    }
}

@media (min-width: 1300px) {
    .final_step .right_area {
        width: 50%;
    }
    .final_step .right_area.fixed {
        width: 46.5%;
    }
    .final_step .right_area.bottom {
        width: 50%;
    }
}

@media (min-width: 1440px) {
    .final_step .right_area {
        width: 50%;
        float: none;
    }
    .final_step .right_area.fixed {
        width: 41.5%;
    }
    .final_step .right_area.bottom {
        width: 50%;
    }
}

@media (min-width: 1600px) {
    .final_step .right_area {
        width: 50%;
        float: none;
    }
    .final_step .right_area.fixed {
        width: 34.7%;
        max-width: 600px;
    }
    .final_step .right_area.bottom {
        width: 50%;
    }
}

@media only screen and (max-width: 1024px) {
    .order_manage .order_search .date_zone {
        width: 69%;
    }
    .order_manage .order_search .date_zone span:after {
        width: 10px;
        margin-left: -5px;
        left: 50%;
    }
    .order_manage .order_search .date_zone .inputbox {
        width: 33%;
        padding-right: 25px;
    }
    .order_manage .order_now {
        padding: 25px;
    }
    .order_manage .order_now .detail {
        flex-wrap: wrap;
    }
    .order_manage .order_now .detail .line {
        width: 50%;
        padding-left: 0;
        padding-right: 20px;
        margin: 0;
        margin-top: 10px;
    }
    .order_manage .order_now .detail .line:nth-child(1),
    .order_manage .order_now .detail .line:nth-child(2) {
        margin-top: 0;
    }
    .order_manage .order_now .detail .line:nth-child(even) {
        padding-left: 20px;
        border-right: 0;
    }
    .order_manage .order_now .info .long.line .name {
        width: 100px;
    }
    .order_manage .order_now .info .line .field .button {
        top: -4px;
        height: 33px;
        line-height: 31px;
    }
    .final_price {
        padding-right: 10px;
        padding-left: 40%;
    }
    .final_price .sum_price.line .price {
        font-size: 22px;
    }
    .shop_step .border_style {
        padding: 25px;
    }
    .shop_step .select_box {
        width: 100%;
    }
    .shop_step .take_way .option label {
        flex-wrap: wrap;
    }
    .shop_step .take_way .option .name {
        width: 100%;
    }
    .shop_step .take_way .option .memo {
        line-height: 21px;
    }
    .shop_step .step_block>.title .redtip {
        color: #ff3a3a;
        margin-left: 0;
        width: 100%;
        display: inline-block;
        line-height: 19px;
        margin-top: 4px;
    }
    .final_step {
        display: flex;
        flex-wrap: wrap-reverse;
    }
    .final_step .left_area {
        width: 100%;
        padding-right: 0;
    }
    .final_step .right_area {
        width: 100%;
        margin-bottom: 50px;
    }
    .final_step .right_area .final_price {
        margin-top: 25px;
    }
    .final_step .right_area .final_price .sum_price.line {
        padding-top: 20px;
        margin-top: 20px;
    }
    .final_step .shop_block .shop_list {
        padding: 0;
    }
    .shop_step .final_step .head_title {
        margin-left: 25px;
    }
    #sucess_msg {
        max-width: 850px;
        width: 100%;
    }
    #sucess_msg .icon {
        text-align: center;
        position: relative;
        top: -45px;
        width: 50vw;
        right: 25px;
    }
    #sucess_msg .box {
        padding: 80px 25px 25px;
    }
    .jump_comment {
        max-width: 850px;
        width: 100%;
    }
    .jump_comment .box {
        padding: 80px 25px 25px;
    }
    .jump_comment .box .block .button_box input {
        width: 40%;
    }
    .jump_comment .box .block .button_box input:first-child {
        margin-left: 0;
    }
    .jump_comment .box .block .button_box input {
        width: 48%;
        margin-left: 3%;
    }
    .jump_comment .box .block:last-child {
        padding-left: 25px;
    }
    .jump_pay {
        max-width: 850px;
        width: 100%;
    }
    .jump_pay .box {
        padding: 80px 25px 25px;
    }
    .jump_pay .box .block .button_box input {
        width: 40%;
    }
    .jump_pay .box .block .button_box input:first-child {
        margin-left: 0;
    }
    .jump_pay .box .block .button_box input {
        width: 48%;
        margin-left: 3%;
    }
    .jump_pay .box .block:last-child {
        padding-left: 25px;
    }
    .merchandise::before {
        content: '';
        position: absolute;
        left: -15%;
        top: 3.8645vw;
        width: 1px;
        height: 100%;
        background-color: #f2f2f2;
    }
    .shop_list .swiper-button-prev {
        top: 56%;
        left: 3%;
        color: #000;
    }
    .shop_list .swiper-button-next {
        top: 56%;
        right: 3%;
        color: #000;
    }
    .shop_list .next-2 {
        top: 53%;
    }
    .shop_list .prev-2 {
        top: 53%;
    }
    .add_purchase .wrap .box {
        width: calc( 100% / 3);
    }
    .add_purchase .wrap {
        flex-wrap: wrap;
    }
    .shop_list .merchandise::before {
        left: -17%;
    }
}

@media (max-width: 1152px) and (min-width: 1152px) {
    .shop_step .select_box select {
        width: 205px;
    }
}

@media (max-width: 1024px) and (min-width: 1024px) {
    .merchandise::before {
        content: '';
        position: absolute;
        left: -39%;
        top: 3.8645vw;
        width: 1px;
        height: 100%;
        background-color: #f2f2f2;
    }
}

@media (max-width: 979px) {
    #step_top {
        margin-top: var(--height-nav-xs);
    }
}

@media only screen and (max-width: 700px) {
    .order_manage .order_search .date_zone {
        width: 100%;
        margin-top: 10px;
    }
    .order_manage .order_search .select_box {
        position: relative;
        float: right;
        width: calc(100% - 91px);
        margin-right: 0;
        background-position: 96%;
    }
    .order_manage .order_search .date_zone .link_button {
        width: 21%;
    }
    #cancelblk {
        padding: 5%;
    }
    .full_box .swiper-container {
        margin: 0 5.3975vw;
    }
    .shop_step .select_box {
        display: inline-block;
    }
    .shop_step .select_box .tip {
        left: 27px;
        width: 90%;
    }
    .shop_step .select_box select {
        width: 100%;
    }

}

@media only screen and (max-width: 600px) {
    .order_manage .order_search .date_zone .link_button {
        width: 100%;
        position: absolute;
        bottom: -50px;
        margin-left: 0;
    }
    .order_manage .order_search .date_zone .inputbox {
        width: 47%;
        padding-right: 25px;
        font-size: 13px;
    }
    .order_manage .order_search .date_zone span {
        width: 30px;
    }
    .order_manage .order_search {
        height: 160px;
    }
    .order_manage .order_now .info .block {
        display: block;
        border-bottom: 0;
        padding-bottom: 0;
        padding-top: 0;
    }
    .order_manage .order_now .info .line {
        width: 100%;
        border-bottom: 1px solid #d8d8d8;
        margin-left: 0;
        padding: 10px 0;
        line-height: 20px;
    }
    .order_manage .order_now .info .line .field .button {
        width: 80px;
        top: -12px;
        position: absolute;
        margin-top: 6px;
    }
    .order_manage .order_now .info .line:nth-child(even) {
        width: 100%;
        margin-left: 0;
        border-bottom: 1px solid #d8d8d8;
    }
    .order_manage .order_now .info .line:nth-child(even) .name {
        padding-left: 0;
        width: 100px;
    }
    .order_manage .order_now .detail .line {
        width: 100%;
        border: 0;
        padding-right: 0;
        border: 0;
        margin-top: 0;
    }
    .order_manage .order_now .detail .line:nth-child(even) {
        padding-left: 0;
    }
    .order_manage .order_now .detail .line .name {
        width: 87px;
    }
    .final_price {
        padding-left: 0;
        width: 100%;
    }
    .final_price .line .name {
        width: 60%;
    }
    .final_price .line .price {
        width: 40%;
    }
    .final_price .sum_price.line .price {
        font-size: 20px;
    }
    .final_price .discount.line {
        margin-top: 10px;
    }
    .final_price .sum_price.line {
        padding-top: 20px;
        margin-top: 20px;
    }
    .shop_step .add_num {
        right: 0;
    }
    .pager .num {
        display: none;
    }
    .pager .mobile_num {
        display: block;
        letter-spacing: 3px;
        font-size: 14px;
        padding: 0;
        width: 135px;
    }
    .pager .mobile_num .now {
        color: #b59339;
    }
    .final_price .fee {
        width: 100%;
    }
    #step_top .step {
        margin-right: 10px;
    }
    #step_top .step::after {
        display: none;
    }
    .shop_step .step_block .benefit {
        flex-wrap: wrap;
    }
    .shop_step .step_block .benefit .benefit_option {
        margin-left: 0;
    }
    .final_price .fee {
        width: 100%;
        position: relative;
        margin-top: 12px;
        bottom: auto;
        display: inline-block;
    }
    .final_price .fee .memo {
        font-size: 13px;
        float: left;
        color: #727272;
        width: calc(100% - 95px);
        text-align: left;
        line-height: 21px;
    }
    .final_price .line .name .tips {
        display: block;
        margin-right: 0;
    }
    .shop_step .trace_list .line .t3 {
        flex-wrap: wrap;
        text-align: left;
    }
    .shop_step .trace_list .line .t5:before {
        content: '小計';
    }
    .shop_step .trace_list .line .t6:before {
        content: '刪除';
    }
    .shop_step .trace_list .line .del i {
        padding-left: 0;
    }
    .shop_step .trace_list .line .t4:before {
        content: '數量';
    }
    .final_step .right_area {
        width: 100%;
        margin-bottom: 50px;
        background-color: white;
        border: 1px solid #d4d4d4;
        padding: 10px;
        border-radius: 5px;
    }
    .final_step .right_area .shop_list .title .t5,
    .final_step .right_area .shop_list .line .t5 {
        text-align: left;
    }
    .final_step .right_area .final_price {
        padding-left: 0;
        margin-bottom: 15px;
    }
    .final_step .acoount_block .account_box .field_box {
        margin-top: 0;
    }
    .final_step .acoount_block .account_box .h_title {
        display: block;
    }
    .final_step .acoount_block .account_box .h_title .option {
        display: block;
        position: absolute;
        right: 0;
        top: 24px;
        width: 142px;
    }
    .final_step .acoount_block .account_box .h_title .data_recive {
        display: block;
        width: 100%;
        margin-top: 13px;
        margin-bottom: 10px;
    }
    .final_step .acoount_block .account_box .field_box .line.addr .addr_edit {
        width: 100%;
    }
    .final_step .acoount_block .account_box .field_box .line.addr .option {
        width: 100%;
        margin-left: 0;
    }
    .final_step .acoount_block .account_box .field_box .line.store_check .link_button {
        position: absolute;
        left: 80px;
        top: 1px;
    }
    .final_step .acoount_block .account_box .field_box .line.member_law .option label {
        margin-left: 0;
    }
    .final_step .acoount_block .account_box .field_box .line.member_law .option {
        padding-left: 0;
    }
    /* 成功訂單視窗 */
    #sucess_msg {
        width: 70%;
    }
    #sucess_msg .icon {
        text-align: center;
        position: relative;
        top: 45px;
        width: 17vw;
        right: -32px;
    }
    #sucess_msg .box {
        border-right: 0;
        position: relative;
        width: 100%;
        padding: 90px 30px 50px;
        border: 2px solid black;
        border-radius: 5px;
        background-color: white;
    }
    #sucess_msg .box .block:first-child {
        border-right: 0;
        padding-right: 0px;
    }
    #sucess_msg .icon img {
        width: 100%;
    }
    #sucess_msg .box {
        padding: 25px 25px 25px;
    }
    #sucess_msg .box .block {
        width: auto;
    }
    #sucess_msg .box .block:last-child {
        position: absolute;
        right: 40px;
        margin-top: 0;
    }
    .jump_comment .box .block:last-child {
        padding-left: 0;
        margin-top: 11px;
    }
    .jump_comment .box .block .line textarea {
        width: 82%;
    }
    .jump_comment .box .block {
        width: 100%;
    }
    .jump_comment .box .block .button_box {
        padding-left: 0;
        width: 100%;
    }
    .jump_comment .box {
        padding: 25px 25px 25px;
    }
    .jump_pay .box .block:last-child {
        padding-left: 0;
        margin-top: 11px;
    }
    .jump_pay .box .block .line textarea {
        width: 82%;
    }
    .jump_pay .box .block {
        width: 100%;
    }
    .jump_pay .box .block .button_box {
        padding-left: 0;
        width: 100%;
    }
    .jump_pay .box {
        padding: 25px 25px 25px;
    }
}

@media (max-width: 500px) {
    .jump_comment .box .title {
        margin-bottom: 0px;
    }
    .jump_pay .box .block .line label {
        position: relative;
        width: 120px;
        font-size: 16px;
    }
    .shop_step .trace_list .line .t3 .new_price {
        width: calc( 100% / 3);
    }
    .shop_step .trace_list .line .t3 .old_price {
        width: calc( 100% / 3);
    }
    .shop_step .trace_list .line .t3 .all_price {
        position: relative;
        /* left: 80px; */
        top: 5px;
    }
    .merchandise::before {
        opacity: 0;
    }
    .merchandise p {
        padding-top: 15px;
        padding: 0 7px;
    }
    .shop_list .full {
        display: flex;
        padding-bottom: 15px;
        border-bottom: 1px solid #303030;
        flex-wrap: wrap;
    }
    .shop_list .full h3 {
        width: 100%;
    }
    .shop_list .full span {
        width: 100%;
        color: #ff7d7d;
    }
    .merchandise span {
        padding: 0 7px;
    }
    .add_purchase .wrap .box {
        width: calc( 100% / 2);
    }
    .add_purchase .title {
        display: flex;
        border-bottom: 1px solid #000;
        margin: 0;
        padding-bottom: 10px;
        flex-wrap: wrap;
    }
    .add_purchase .title h3 {
        width: 100%;
    }
    .add_purchase .title span {
        width: 100%;
    }
    .shop_list .swiper-button-prev {
        top: 61%;
    }
    .shop_list .swiper-button-next {
        top: 61%;
    }
    .shop_list .next-2 {
        top: 56%;
    }
    .shop_list .prev-2 {
        top: 56%;
    }
}

.thanksWrap {
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: fixed !important;
    width: 100%;
    height: 100vh;
    display: block;
    left: 0;
    top: 0;
    z-index: 9999 !important;
    display: none
}

.thanksWrap .icon {
    width: 50px;
    height: 50px;
    background-color: var(--color-main);
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(50%, -50%);
    border-radius: 50%;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all .35s ease
}

.thanksWrap .icon::before,
.thanksWrap .icon::after {
    content: "";
    display: block;
    width: 40%;
    height: 2px;
    border-radius: 2px;
    background-color: var(--color-border-thanks);
    position: absolute;
    transform: rotate(45deg);
    opacity: 0.7;
    transition: all .35s ease
}

.thanksWrap .icon::after {
    transform: rotate(-45deg)
}

@media (min-width: 740px) {
    .thanksWrap .icon {
        width: 64px;
        height: 64px
    }
}

.thanksWrap .icon:hover {
    transform: translate(50%, -50%) scale(1.125)
}

.thanksWrap .icon:hover::before,
.thanksWrap .icon:hover::after {
    opacity: 1
}

.thanksWrap .thanks {
    position: relative;
    width: 90%;
    text-align: center;
    background-color: #fff;
    padding: var(--pd-inside-xs);
    border-radius: var(--size-radius);
    max-width: 500px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

@media (min-width: 576px) {
    .thanksWrap .thanks {
        width: 80%
    }
}

@media (min-width: 740px) {
    .thanksWrap .thanks {
        padding-top: var(--pd-lg);
        padding-bottom: var(--pd-lg)
    }
}

.thanksWrap h1 {
    font-weight: bold;
    letter-spacing: 0;
    font-family: var(--font-family-en);
    font-size: 1.5em;
    padding-bottom: 1em
}

@media (min-width: 740px) {
    .thanksWrap h1 {
        line-height: 1.125em;
        font-size: 3em
    }
}

.thanksWrap.show {
    display: block
}

.thanks a {
    margin-top: 5%;
    display: block;
}

.login-line {
    justify-content: end;
}

.login-line .forgot_link {
    display: inline-block;
    margin: auto 0 auto 10px
}

.social_box {
    position: absolute;
    right: 0;
    display: flex;
    align-items: center;
}

.FB_login {
    display: flex;
    margin-right: 15px;
}

.FB_login i {
    font-size: 45px;
}

.FB_login i::before {
    color: #0E8EF2;
}

.Google_login {
    margin-right: 15px;
    width: 45px;
    height: 40px;
    display: inline-block;
}

.Google_login img{
    width:100%;
    height: 100%;
}
.Google_login i {
    font-size: 45px;
}

.Google_login i::before {
    color: #EB4537;
}

.Line_login {
    display: flex;
    margin-right: 0px;
}

.Line_login i {
    font-size: 45px;
}

.Line_login i::before {
    color: #00c300;
}

@media (max-width: 1100px) {
    .social_box {
        right: 25px;
    }
}

@media (max-width: 700px) {
    .Google_login {
        margin-right: 5px;
        height: 35px;
    }
    .FB_login {
        margin-right: 5px;
    }
    .fb_login i{
        font-size: 50px;
    }
    .line_login i{
        font-size: 50px;
    }
}
@media (min-width: 700px){
    .fb_login{
        display: flex;
    }
    .line_login{
        display: flex;
    }
}
/* 20221026 */
/* 新增訂單總和tag */
.order_allPrice {
  margin: 0 0 20px;
  text-align: right;
  font-size: 20px;
  font-weight: 700;
}
.order_allPrice span {
  margin-left: 7px;
  letter-spacing: 1.5px;
  color: red;
}
.order_allPrice .note{
    color: red;
    font-size: 12px;
    margin-top: 5px;
    font-weight: 400;
}
@media (max-width: 700px) {
  .order_allPrice {
    text-align: center;
  }
}