.shopping { display: block; width: 80%; margin: 50px auto; }

/* step */
.step-number { display: flex; width: 80%; margin: 22px auto; }
.step-number .step { display: block; width: 25%; text-align: center; }
.step-number .number { background: #000; color: #fff; font-size: 12px; font-weight: bold; padding: 2px 8px; display: inline-block; position: relative; }
.step-number .circle { position: relative; padding: 18px 0 12px; }
.step-number .circle span { background: #fff; border: 1px solid #000; width: 20px; height: 20px; border-radius: 50%; margin:  14px auto; display: block; position: relative; z-index: 9; }
.step-number .circle::after { content: ''; background: #000; width: 100%; height: 1px; display: inline-block; position: absolute; top: 52%; right: 0; }
.step-number .text { font-size: 15px; font-weight: 500; padding: 0 4px; }
.step-number .step:first-child .circle::after { width: 50%; }
.step-number .step:last-child .circle::after { width: 50%; left: 0; right: auto; }

.step-number .step.current .number { background: #a71933; }
.step-number .step.current .number::after { content: ''; width: 0px; height: 0; border-top: 10px solid #a71933; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; bottom: -8px; left: 40%; }
.step-number .step.current .circle span { background: #a71933; border: 1px solid #a71933; box-shadow: 0 0 0 2px #a71933; }
.step-number .step.current .text { color: #a71933; font-weight: 700; }



/* content shopping */
.content-shopping { display: block; margin: 50px 0; }

/* ------------------------ step 1 ------------------------ */
.order-list ul { display: table; width: 100%; }
.order-list ul li { display: table-row; }
.order-list ul li .order { display: table-cell; padding: 22px 4px; vertical-align: middle; border-bottom: 1px solid #747474;  }
.order-list ul li.title .order { background: #000; color: #fff; font-size: 16px; text-align: center; padding: 4px; }
.order-list ul li.title .order small { font-size: 12px; }

.order-list .order.list { width: 45%; }
.order-list .order.price { width: 15%; text-align: right; }
.order-list .order.quantity { width: 25%; text-align: center; }
.order-list .order.subtotal { width: 15%; text-align: left; }

/* list */
.list .car { display: table; width: 100%; }
.list .car .img { display: table-cell; width: 30%; vertical-align: top; }
.list .car .img img { width: 100%; }
.list .car .data { display: table-cell; width: 70%; vertical-align: top; padding: 0 12px; }
.list .data h2 { font-size: 15px; font-weight: 700; height: 65px; overflow: hidden; }
.remark .text-gray { font-size: 12px; color: #848484; }
.remark .text-red { font-size: 12px; color: #a71933; }

/* price */
.price { font-size: 16px; }
.price small { font-size: 12px; }

/* quantity */
.quantity { display: block; padding: 14px 0; }
.quantity .btn-amount { background: #f5f5f5; width: 30px; height: 30px; text-align: center; padding: 2px; border-radius: 50%; display: inline-block; border: 0; transition: all 0.3s; position:relative; top:5px;}
.quantity .btn-amount:hover { background: #acacac; }
.quantity .sum-amount { margin: 0 12px; width: 40px; text-align: center; border: 1px solid #000; display: inline-block; padding: 4px; font-weight: bold; }

/* subtotal */
.subtotal { font-family: 'M PLUS 1p', sans-serif; font-weight: 800; font-size: 16px; }
.subtotal small { font-weight: normal; font-size: 12px; }

/* sum list */
.sum-list { display: block; width: 100%; text-align: right; }
.sum-table { text-align: left; font-size: 12px; margin: 0 0 0 auto; }
.sum-table tr td { padding: 4px 8px; }
.sum-table tr td strong { font-size: 16px; }
.sum-table .big-price { font-size: 24px; font-family: 'M PLUS 1p', sans-serif; font-weight: 800; color: #a71933; }

/* position btn */
.position-btn { text-align: center; display: block; width: 100%; padding: 0px 0; }
.position-btn .btn-shop { display: inline-block; width: 220px; text-align: center; margin: 8px 12px; color: #fff; padding: 18px 12px; font-size: 16px; font-weight: 500; transition: all 0.3s; text-decoration: none!important;}
.position-btn .continue { background: #848484; }
.position-btn .continue:hover { background: #494949; }
.position-btn .purchase { background: #a71933; }
.position-btn .purchase:hover { background: #780218; }
.position-btn .link-default { font-weight: 500; margin: 18px auto; display: inline-block; }
.position-btn .link-default:hover { color: #a71933; }


/* ------------------------ step 2 ------------------------ */
/* information */
.information { display: flex; flex-wrap: wrap; justify-content: space-between; margin: 25px auto 50px;  }
.information .car-infomation { display: block; width: 48%; }
.information .title-infomation { display: block; border-bottom: 1px solid #000; font-size: 18px; font-weight: bold; padding: 12px 0; }
.information .content-info { margin: 12px auto; }
.information ul { display: table; width: 100%; }
.information ul li { display: table-row; }
.information ul li .data-t,
.information ul li .data-d { display: table-cell; padding: 8px 4px; vertical-align: top; }
.information ul li .data-t { width: 25%; }
.information ul li .data-d { width: 75%; }
.information .auto-address { padding: 4px; background: #848484; display: inline-block; margin-left: 12px; width: 120px; text-align: center; color: #fff; font-weight:500; transition: all 0.3s; }
.information .auto-address:hover { background: #494949; }

.input-default { padding: 10px; border: 1px solid #CCC; background: #fff; }
.input-default.short { width: 40%; }
.input-default.medium { width: 65%; }
.input-default.long { width: 100%; }
.input-date { line-height: 0; }

.zone select{ width: 40%; padding: 10px; border: 1px solid #CCC; border-radius: 4px;  -webkit-appearance:none; -moz-appearance:none;}
.zone select::-ms-expand{ display: none;}
.zone select.time-zone{  background: url(../images/arrow-select.png) no-repeat right center #fff; }

.data-d select{padding: 10px; border: 1px solid #CCC; background: #fff;}
#bikou{padding: 10px;}

/* payment */
.payment { padding: 24px 0 12px;}
.payment strong { display: block; font-weight: 500; font-size: 15px; }
.select-payment span { display: block; padding: 8px; }
.select-payment .radio{ background-color: #fff; display: inline-block; width: 15px; height: 15px; border: 1px solid #ccc; border-radius: 7px; vertical-align: middle; margin: 0 6px 0 0; }
.select-payment input[type=radio]{ display:none }
.select-payment input[type=radio]:checked + .radio{ background: url(../images/check-select.png) no-repeat right center #fff;}
.remark-payment { padding: 18px 12px; font-size: 13px; }

#bikou{	width: 100%;height: 100px;border:1px solid #ccc;}


/* ------------------------ step 3 ------------------------ */
.remark-correct { padding: 28px 14px; text-align: center;  }



/* ------------------------ step 4 ------------------------ */
.cart-end { display: block; padding: 30px 0 0; text-align: center; }
.cart-end img { max-width: 100%; }
.cart-end .arrives { font-size: 24px; font-weight: 700; margin: 12px auto 0; }







@media(max-width:1100px) { 
    .shopping { width: 100%; }
}

@media(max-width:890px) { 
    .list .car { display: block; }
    .list .car .img { display: block; width: 80%; margin: auto; }
    .list .car .data { display: block; width: 100%; }
    .list .data h2 { height: auto; }

    .order-list .order.list { width: 40%; }
    .order-list .order.price { width: 20%; text-align: left; }
    .order-list .order.quantity { width: 20%; text-align: left; }
    .order-list .order.subtotal { width: 20%; text-align: left; }
}

@media(max-width:668px) {
    .order-list ul li { display: block; padding-top: 12px; }
    .order-list ul li.title .order { display: none; }
    .order-list ul li.title .order.list { display: block; }
    .order-list ul li .order { display: block; border: 0; padding: 8px; }
    .order-list .order.list { width: 100%; }
    .order-list .order.price { width: 100%; }
    .order-list .order.quantity { width: 100%; }
    .order-list .order.subtotal { width: 100%; border-bottom: 1px solid #747474; background: #f5f5f5; }

    .list .car .data { padding: 12px 0; }
    .list .car .remark { margin-top: 12px; }


    /* step 2 */
    .information .car-infomation { width: 100%; }


}

@media(max-width:480px) {
    .step-number { width: 100%; }
    .step-number .text { font-size: 12px; }

}

@media(max-width:420px) {
    .list .car .img { width: 100%; }

    .information ul li .data-t { width: 35%; }
    .information ul li .data-d { width: 55%; }
    .information .auto-address { margin: 4px 0; float: right;}

    .input-default { display: block; }
    .input-default.short { width: 100%; }
    .input-default.medium { width: 100%; }
    .zone select { width: 100%; }
    
    
}
.DelBt {
    width: 135px;
    bottom: 10px;
    right: 0px;
    padding: 23px 0 0;
    height: 0;
    overflow: hidden;
    display: block;
    background-image: url(../images/DelBt.gif);
}