/*---------section-header----------------*/
.section-header { width: 100%; display: block; padding: .5em 0px; margin-bottom: 30px; color: #34343a; font-size: 1.5em; font-weight: bold; border-bottom: solid 2px #bcc5ca; background: #f5faf9; text-align: center; }
.section-header h3 { width: 100%; padding-left: 1em; display: block; font-size: .9em; text-align: left; }
.section-header span { font-size: .7em; }
/*----------pay-----------------*/
.pay { width: 100%; height: auto; display: block; margin: 0px auto; }
.pay ul { width: 90%; margin: 2% auto; display: block; text-align: left; }
.pay ul li { width:45%; margin: 10px auto; padding: 0px 10px; display: inline-block;  vertical-align: top; line-height: 2em; }
.pay ul li span { width: 100%; display: block; font-size: 1.1em; text-align: center; }
.pay li em.vremark { width: 100%; padding: 0px; display: block; line-height: 18px; font-size: 13px; color: #9D9D9D; vertical-align: middle; }
/*--setup1-------------*/
.cart-list { width: 100%; display: block; margin: 2% auto 5% auto; }
.cart-list a { color: #76898f; }
.cart-list ul { display: block; width: 100%; margin: 1% auto; }
.cart-list ul li { display: block; }
ul.field { display: none; }
ul.item { width: 100%; display: block; border-bottom: solid 2px #aeb8bd; line-height: 2em; }
ul.field li { display: inline-block; height: auto; margin: 10px auto; vertical-align: top; text-align: center; font-size: 1em; color: #000; font-weight: bold; }
ul.item li { display: inline-block; height: auto; margin:0px auto; vertical-align: middle; text-align: center; font-size: 1em; color: #7e9096; font-weight: 400; }
ul.item:last-of-type{border-bottom:none; }
ul li.pimg { width: 20%; margin: 10px auto; }
ul li.pimg a { display: block; width: 90px; height: 90px; margin: 10px auto; text-align: center; }
ul li.pimg a img { display: block; width: 90px; height: 90px; }
ul li.name { width: 70%; padding: 0 0 0 20px; }
ul li.name span { width: 100%; margin: 10px 0 3px 0; display: inline-block; text-align: left; color: #666666; font-size: 15px; }
ul li.name span strong { display: inline-block; height: 20px; width: auto; font-size: 12px; background-color: #C9163A; border-radius: 3px; text-align: center; color: #FFF; margin-right: 10px; padding: 0 10px }
ul li.name span:nth-child(2) { color: #000; line-height: 26px; margin: 0 }
ul li.name span:nth-child(3) { font-size: 14px; color: #C30; margin: 0px; }
ul li.unit { width: 15%; display: none; }
ul li.amount { width: 50%; display: block; margin: auto; text-align: left; }
ul li.amount select, ul li.amount input{ width: 100%; min-height: 2em; }
ul li.discount { width: 70%; }
ul li.subtotal { width: 65%; display: inline-block; margin: 2% auto; }
ul li.number{background-color: #fafafa; }
ul li.number, ul li.order-number, ul li.payment, ul li.order-amount ,ul li.delivery-date, ul li.view , ul li.status, ul li.information { width:100%; display:block; text-align: center; }
ul li.information{border-bottom:none;}
.cart-list li span.item-mobile { width:30%; display: inline-block;  text-align: left; color: #000; }
.cart-list li span.item-single {  width:68%; display: inline-block;  text-align: left; color: #000;  }
 span.item-single a{ color: #c7263a; text-decoration: underline; }

/**---promo-zone---**/
.promotions{width:100%;  margin:30px auto;   border:3px solid #bcc5ca;}
.promotions ul li span.price-mobile{width:24%; margin:1% 1% 1% 0px; display: inline-block; text-align: center; color:rgba(237,90,90,1);  background:rgba(237,90,90,.2);}
ul li.promo-name, ul li.promo-type, ul li.promo-amount, ul li.promo-zone{width:98%; padding-left:2%;text-align: left; display: block; font-weight:400; color: #000;}
ul li.promo-zone span{width:73%; display: inline-block;}
ul li.promo-zone span.zone{width:70%; }
ul li.promo-zone span.zone span.price-red{display: inline-block;}
.promo-detail ul{margin:0px auto; }
.promo-detail ul.field { display: none; background:rgba(76,158,217,.2);  border-bottom: solid 1px #fff; }
.promo-detail ul.item{ margin:0px auto; padding:0px; background:rgba(76,158,217,.1); border-bottom: dashed 1px rgba(76,158,217,.2);}
.promo-detail ul li span.price-mobile{width:25%; display: inline-block; color: #000; border: none; background:none;}
 .price-red{color:#ed5a5a;}
.price-arrow{ padding-right:20px;  background: url(../images/icons/arrow-down.png) no-repeat right 5px; background-size:12px;  text-decoration: underline; color:#4c9ed9; }
.price-mobile { display: block; text-align: left; }
.total-mobile { display: inline-block; color: #000; vertical-align: top; }
.single-total { display: inline-block; color:#ed5a5a;}
ul li.dele { width:30%; display: inline-block;  text-align: center; margin-top: 1%; }
ul li.dele a {display: inline-block; width:35px;  height: 35px;margin:0px auto; background: url(../images/icons/delete.png) no-repeat center 10px; text-indent: -9999px; }
ul li.dele a:hover { background-position: center  -65px; }

ul li.dele2 { width:100%; display: inline-block;  text-align: center; margin-top: 1%; }
ul li.dele2 a { display: inline-block;  width:35px;  height: 35px;margin:0px auto; background: url(../images/icons/delete.png) no-repeat center 10px; text-indent: -9999px; }
ul li.dele2 a:hover { background-position: center  -65px; }

/*ul li.dele span:first-child { width: 100%;  display: block; font-size: 13px; color: #C1042B; line-height: 26px; text-align: center; margin: 0; }
ul li.dele span:first-child+span { width: 100%; font-size: 13px; color: #333; line-height: 26px; margin: 0px; } */


ul.shipment { width: 100%; min-height: 5em; margin: 2% auto; padding: 10px; display: block; border: 3px solid #f5faf9; background: #f5faf9; }
ul.shipment li { width: auto; padding: 5px 20px; display: block; font-size: 1em; color: #666; text-align: left; vertical-align: top; }
ul.shipment li.coupons select { margin: 0 auto 0 auto; width: auto; text-align: center; line-height: 90px; }
ul.shipment li.radio-s { width: 47%; margin: 3% auto; padding: 0px; display: inline-block; text-align: left; }
ul.shipping { width: 98%; display: block; margin: 1% auto; border-bottom: none; display:block; align-items:center; padding:0; }
ul.shipping li { display: inline-block; vertical-align: top; }
ul.shipping li:first-child { width:100px; display:flex; align-items:center; justify-content:center; }
ul.shipping li:first-child::before { content:''; width:30px; height:30px; background:url(../images/dolly_icon.png) no-repeat center center /cover; display:inline-block; margin-right:10px; }
ul.shipping li:nth-child(2) { width: 56%; display: inline-block; height: auto; font-size: 14px; color: #666; line-height: 1.8em; }
ul.shipping li:nth-child(2) span { width: 100%; display: block; color: #666; }
ul.shipping li:nth-child(2) span strong.mem-gift { display: inline-block; height: 20px; width: 80px; font-size: 12px; line-height: 20px; background-color: #ED5A5A; border-radius: 3px; text-align: center; color: #FFF; margin-right: 10px; }
ul.shipping li:first-child + li span:first-child+span { font-size: 1em; color: #666; line-height: 1.8em; text-align: left; margin: 2% auto; }
.shipping-price { width:50%; display: inline-block; color: #ed5a5a; font-size: 1.2em; text-align:center; }
ul.sum { width: 100%; margin:0px auto; display: block; border: none; text-align: right; }
ul.sum li { min-height: 70px; padding: 0; line-height: 70px; display: inline-block; }
ul.sum li:first-child { width: 40%; text-align: right; }
ul.sum li:nth-child(2) { width: 6%; font-size: 16px; text-align: right; }
ul.sum li:nth-child(3) { width: 40%; color: #ed5a5a; font-size: 24px; text-align: center; }

.summary-list {  width:100%;  display: block;  margin:30px auto; border:3px solid #bcc5ca;}
ul.summary {   width:98%;   margin:auto; display: block;   -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; text-align: center;   }
ul.summary li {  width:100%;   display:block;  padding:0; margin:0;  border-bottom: solid 1px  rgba(126,144,150,.2);   }
ul.summary li span { padding:2%; display: inline-block;  }
ul.summary li span.field { width:50%;   text-align:right; color:#000;}
ul.summary li span.item { width:40%; padding-right:5%;  text-align:right;   color:#ed5a5a; }
ul.summary li span:first-child+span+span { width: 60%; text-align:left; }


/*---setup2----*/
.info-form { width: 100%; margin: 2% auto; display: block; }
.info-form ul { display: block; width: 100%; margin: 2% auto; vertical-align: top; }
.info-form ul li { width: 100%; margin:5px auto; padding: 0px 10px; display: block; line-height: 1.5em; }
.info-form ul li.remark span { width: 100%; display: block; color: #425b71; font-weight:700;}
.info-form ul li.remark ul { width: 100%; display: block; }
.info-form ul li.title { text-align: left; font-weight: bold; }
.info-form ul li.title::after { display: none; }
.info-form ul li.remark-red { font-size: 13px; color: #C91439; padding-top: 5px; }
.info-form ul li.remark-store { font-size: 13px; color: #666; padding: 5px; margin: 1% 2%; }
.info-form select { width: 100%; min-height: 40px; line-height: 40px; color: #afbabf; }
.info-form .select-store select option { line-height: 40px; }
.info-form ul li span a { padding: 2px 5px; color: #C91439; }
.info-form ul li span.field{width: 20%; padding-top:10px; display: inline-block; vertical-align:top; color: #425b71; font-weight:700;}
.info-form ul li span.lab-gender{width:100%; display: block; }
.info-form ul li input, .info-form ul li textarea { border: 1px solid #afbabf; width: 100%; font-size: .9em; line-height: 2em; padding: 5px; margin: 5px 0px; }
.info-form ul li input.remark-note{ min-height:100px;}
/*---setup3----*/
.confirm-list { width: 98%; display: block; margin: 40px auto 0 auto; }
.confirm-list ul, .confirm-list ul.ps { width: 100%; display: block; vertical-align: top; }
.confirm-list ul li { vertical-align: top; padding: 10px 5px; }
.confirm-list ul li.title { text-align: left; font-weight: bold; background: #f5fbfb; border-bottom: solid 2px #afbabf; }
.confirm-list ul li.title::after { display: none; }
.confirm-list ul li span { display: inline-block; padding: 2px 0px; vertical-align: top; text-align: left; }
.confirm-list ul li span:first-child { width: 30%; color: #666; }
.confirm-list ul li span:nth-child(2) { width: 68%; color: #000; font-weight: bold; }

.confirm-list ul, .confirm-list ul li { padding:0; margin:0; }
.confirm-list ul { margin-bottom:20px; background:#fff; }
.confirm-list ul li{ list-style-type:none; padding:5px;}
.confirm-list ul li.title { background:#b35454; color:#fff; margin:0; border-bottom:0 none; padding:.5em 0px; font-size:1.5em; font-weight:bold; text-align:center; }

/*---setup4----*/
.center-info { width: 80%; margin: 0 auto; display: block; text-align: center; }
.center-info h2 { font-size: 26px; display: block; width: 100%; margin: 30px 0; text-align: center; font-weight: bold }
.center-info p { font-size: 15px; display: block; text-align: center; width: 100%; margin: 30px 0; line-height: 26px; }
.center-info p.info-more { font-size: 14px; display: block; text-align: center; width: 100%; margin: 30px 0; line-height: 26px; }
.center-info p strong { font-weight: bold; color: #C9163A; margin: 0 0 0 10px; }

/**----member order-history-list -----------**/
.order-history-list { width: 100%; display: block; margin: 2% auto 5% auto; }
.order-history-list ul {  display: block; width: 100%; margin: 1% auto;  }
.order-history-list ul.field { display: none; background:rgba(126,144,150,.2);border-bottom: solid 2px  rgba(126,144,150,1);}
.order-history-list ul li { display: block; }  
.order-history-list ul.item {   display: block; border-bottom: dashed 1px #a28d5b; line-height: 2em;background:rgba(199,222,229,.1); }
.order-history-list ul.field li { display: inline-block; height: auto; margin: 10px auto; vertical-align: top; text-align: center; font-size: 1em; color: #000; font-weight: bold; }
.order-history-list ul.item li {display: inline-block; width: 100%;height: auto; margin: 10px auto; vertical-align: middle; text-align: center; font-size: 1em; color: #7e9096; font-weight:400; }
.order-history-list ul.item li span:first-child { display: inline-block; width:30%; text-align: right; color:#000;}
.order-history-list ul.item li span:first-child+span { display: inline-block; width:60%; margin-left:5%; text-align: left;}

 /**----member order-history-list  detail-pay  -----------**/
ul.detail-pay {  padding:0; margin:20px auto; display: block; border:1px solid rgba(126,144,150,1); border-bottom:0 none; background:rgba(199,222,229,.1);  }
ul.detail-pay li {  padding:0; margin:0;  border-bottom: solid 1px  rgba(126,144,150,1);   }
ul.detail-pay li span { padding:1% 2%; display: inline-block; padding:10px;}
ul.detail-pay li span:first-child { margin-left:0;  background:rgba(126,144,150,.1); color:#000; }
ul.detail-pay li span:first-child+span { background:rgba(199,222,229,.1); color:#7e9096; }

/*-------Common elements----*/
ul.cart-remark { width: 100%; margin: 4% auto; display: block; padding: 0 0 0 22px; }
ul.cart-remark li { width: 90%; padding: 2px 0px 0px 15px; display: block; line-height: 24px; font-size: .9em; text-align: left; background: url(../images/icons/arrow-right.png) no-repeat left 5px; color: #333; list-style-position: inside; }
ul.submit-btn { width:98%; margin: 2% auto; display: block; }
ul.submit-btn li{ width:45%; margin: 2%; padding: 10px 0px; display: inline-block; border: none; font-size: 1em; font-weight: bold; }
ul.submit-btn li input, .form-medium select, .length-m, .length-l, .lab-gender{ width: 100%; } 
.radio-full, .length-l, .length-m { width: 96%; margin: 5px auto; }
.border { height: 2px; overflow: hidden; display: block; color: #aeb8bd; background-color: #aeb8bd; width: 100%; clear: both; }


/* button --- */
.button { display: inline-block; zoom: 1; vertical-align: baseline; border: none; margin: 0 auto; outline: none; cursor: pointer; text-align: center; text-decoration: none; padding: .5em 1em; width: 100%; }
.button:hover { text-decoration: none; }
.button:active { position: relative; top: 1px; }
.red { color: #fff; border: solid 1px #AAB3BB; background: #AAB3BB; line-height: 2em; }
.red:hover { background: #767d84; }
.red:active { color: #cfb17e; background: #000; }
.orange { background-color: #EB4848; color: #FFF; line-height: 2em; }
.orange a { color: #FFF !important; }
.orange a:hover { color: #425b71!important; }
.orange:hover, .orange:focus, .orange:active { background: none repeat scroll 0 0 #EB4848 !important; border-color: #E83131 !important; }




@media (min-width:640px) {
.pay ul li { width: 32%; padding: 0px 5px; display: inline-block; }
ul.shipment li.radio-s { width: 30%; margin: auto 1%; padding: 5px 20px; display: inline-block; }
.shipping-price { width: auto; display: inline-block; }
ul.shipping{ display:flex; }
ul.sum { width: 60%; }
ul.detail-pay li { display:flex; }
ul.detail-pay li span:first-child { width:20%; text-align:left; }
ul.detail-pay li span:first-child+span { width:80%;text-align:left; }
ul.detail-pay li span:first-child+span+span { width: 60%; text-align:left; }
}

@media (min-width:800px) {
.pay ul li { width: 32%; }
.pay li em.vremark { width: 46%; display: inline-block; }
ul.field li, ul.item li { display: inline-block; margin: 10px auto;  }
ul.field, ul.item{ width: 100%; margin: 0 auto; display: block;  border-bottom: 2px solid #aeb8bd; }
ul li.pimg{ width: 10%;}
ul.item li.pimg{ margin:0; }
ul.item li.pimg a{ width:50%; height:50%; margin:0 auto; }
ul.item li.name{  }
ul.item li.name span{ text-align:center; }
ul li.name{ width: 30%;}
ul i.unit{ width: 15%;}
ul li.amount{ width:10%; text-align: center;  }
ul li.discount{ width:10%; }
ul li.subtotal{ width: 10%; display: inline-block; margin: 10px auto; }
ul li.number{ width:5%; text-align: center; }
ul li.order-number { width:12%; }
ul li.payment { width:10%; }
ul li.order-amount { width:10%; }
ul li.view { width:8%; }
ul li.delivery-date{ width:15%; }
ul li.status { width:15%; }
ul li.dele { width: 10%; }
ul li.dele2 { width:10%; display: inline-block;  text-align: center; margin-top: 1%; }
ul li.information { width: 10%;}
.price-mobile, .item-mobile { display: none !important; }
.cart-list li span.item-single { width:100%;  text-align: center;    }
.total-mobile { display: none; }
.single-total { display: inline-block; text-align: center; vertical-align: top; }
ul.shipment { width: 90%; }
ul.shipment li { width: auto; display: inline-block; }
ul.shipment li.radio-s { width: 25%; display: inline-block; margin: auto 1%; }
ul.shipping li span { display: inline-block; }
ul.cart-remark { width: 80%; }
.info-form ul, .confirm-list ul { display: inline-block; width: 45%; margin: 2% auto; vertical-align:top; }
.info-form ul:nth-child(2n), .confirm-list ul:nth-child(2n) { margin-left: 8%; }
.info-form ul li ul{width: 100%;}
.info-form select { width: 50%; }
.info-form ul li span.lab-gender{width:78%; display: inline-block; }
.confirm-list ul li span:first-child { width: 20%; }
.confirm-list ul li span:nth-child(2) { width: 70%; }
.length-m { width: 50%!important; }
.length-l { width: 70% !important; }

.lab-gender{ width: 100%; }
ul.submit-btn { width: 50%; }
ul.submit-btn li input { width: 100%; border: none; }
/**order-history-list**/
.order-history-list ul.field, .order-history-list ul.item { display: block; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; }
.order-history-list ul.item li, .order-history-list ul.field li {display: inline-block; text-align: center; }
.order-history-list ul.item li span:first-child { display: none;}
.order-history-list ul.item li span:first-child+span { width:100%;text-align: center; }
ul li.dele span:first-child+span { width:10%;  }
ul li.dele a { width:100%;}
ul.summary {   width:50%;  }
/**-shopping cart--**/
.promo-detail ul.field { display: inline-block; background:rgba(76,158,217,.2);  border-bottom: solid 1px #fff; }
ul li.promo-name{width: 25%; padding-left:5%;}
ul li.promo-type{width: 15%; }
ul li.promo-amount{width:8%;}
ul li.promo-zone{width: 50%;}
ul li.promo-zone span{width:32%; display: inline-block;}
ul li.promo-zone span.zone{width:64%!important;}
}

.wrapper { width: 100%; max-width: 1160px; display: block; margin: auto; }
.process-bar ul{ width: 100%; margin: 1% auto; padding: 10px 0; display: block; text-align: center; border-bottom: none; }
.process-bar li { display: inline-block; width: 66px; line-height: 38px; padding: 0; font-weight: 400; background: url(../images/icons/arrow-right.png) no-repeat right 10px }
.process-bar li:last-child { background: none; }
.process-bar li span { display: inline-block; line-height: 38px; }
.process-bar li span:first-child { height: 36px; width: 36px; border: 1px solid #afbabf; border-radius: 18px; background-color: #afbabf; text-align: center; color: #fff; line-height: 36px; }
.process-bar li span:first-child + span { display: none; }
.process-bar li.current span:first-child { height: 36px; width: 36px; border: 1px solid #000; border-radius: 18px; text-align: center; color: #FFF; line-height: 36px; background-color: #000; font-size: 22px; }
.process-bar li.current span:first-child + span { color: #6eb54e; font-size: 19px; font-weight: 400; }

.process-bar li span:first-child + span { display: inline-block; }
.process-bar { margin: 1% auto; padding: 5vh 0 10px 0; }
.process-bar li { padding: 0 40px 0 30px; width: auto; height: 38px; }
.process-bar li span:first-child + span { color: #afbabf; margin: 0 0 0 10px; line-height: 36px; }

@media (max-width:800px) {
    ul.shipping{ align-items:center; display:flex; flex-direction:column; }
    ul.shipping li:nth-child(2){ display:block; width:initial; }
    ul.detail-pay li span:first-child,
    ul.detail-pay li span:first-child+span,
    ul.detail-pay li span:first-child+span+span { width:100%; text-align:center; display:block; box-sizing:border-box; }
    
    
}