/* 標準版 */
#wrapper{  display: flex; min-height: 100%; width: 100%;flex-direction: column;   }
#wrapper > header{ z-index: 10;  margin: 0px; padding: 0px;;   }
#wrapper > section{; flex: 1; flex: 1 ;  margin:0px; padding: 0px;  }
#wrapper > section > footer{ }

.data-width{ width: 98%; max-width: 1600px; margin:0px auto;}

#wrapper *{ }
/*內容*/
#header{display: flex; align-items: center;  width: 95%; max-width: 1600px; margin: 0px auto ; padding: 10px 0px; ; justify-content: center}

#brands{display: flex }


#wrapper > section h2{ font-size: 20pt; text-align: center ; font-weight: bold; }

.brands-logo{ max-width: 80px;  }
.brands-logo img{ display: block;  }
 
.priceItem .subItemDiv{ background:#7409ad!important;border-radius:10px;margin:10px; padding:0px!important;color:#FFF!important;border:0px!important;overflow:hidden}
.priceItem .subItemDiv hr{ border:0px; height: 1px ; background: rgba(255,255,255,0.25);}
.priceItem .subItemDiv h4{ background:rgba(0,0,0,0.5)!important;}

.jc{ cursor: pointer; position: relative; background: rgba(255,255,255,0.75); color:#000; line-height: 150%; }
/* .jc.on{ overflow: hidden; } */
.jc.on:after{ content:"✔";content:"取消"; background: #d52d5d; color: #FF0; display: flex; align-items: center; justify-content: center; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;;;;}

.priceItem .subItemDiv.on{ background: #d52d5d!important; }
@media screen and (max-width:768px) {	
	 
}
@media screen and (max-width:480px) { 
	 
}


 
.cart{ max-width: 750px; width: 90%; margin: 0px auto; position: relative; padding: 0px; padding-bottom: 20px ;  font-family: '微軟正黑體'; }
.cart h2{ text-align: center;  }
.cart h3{  text-align: center;   }


.cart-title{ background: #FFFFFF; padding: 15px; margin-top: 20px; display: block; font-weight: bold}
 
.cart-product{display: flex; border-bottom:1px solid #f1f1f1; padding: 10px 20px;   align-items: center}
.cart-product *{  }

.cart-product.off{opacity: 0.6; background: #eee;border-bottom:1px solid #ddd;}
.cart-product-photo{  margin: 0px 10px; width: 100px}
.cart-product-info{ flex:1;display: flex; align-items: center; flex-wrap: wrap;}
.cart-product-name{flex:1; font-weight: bold;}
.cart-product-name span{ font-size: 14pt ; font-weight: bold;}
.cart-product-name a.del{ display: block; font-size: 10pt; cursor: pointer; width: 50px;}

.cart-product-others{ display: flex; align-items: center;  }

.cart-product-price{  font-size: 10pt;  color: #FF0000;min-width:100px;  font-family: 'Anton';  text-align: left ;flex:1}
.cart-product-price b{ font-size: 14pt;white-space: nowrap;   }
.cart-product-price del{ display: block;  font-size: 10pt;  color: #333333;   font-family: 'Anton'  }


.cart-product-quantity{ display: flex;  justify-content: center; width: 100px    }
.cart-product-quantity a{ width: 30px; background: #666666;  text-align: center;color: #FFFFFF; padding: 3px 0px; cursor: pointer;}
.cart-product-quantity input{flex:1; text-align: center; text-align: center; width: 40px;  font-size: 12pt;  }
.cart-product-del{  width: 50px; text-align: center; cursor: pointer;   padding-top: 5px ; opacity: 0.5}
.cart-product-del i{font-size: 16pt;  }



.cart-product-check{ margin-right: 5px;}
.cart-product-check input{ border: 1px solid #CCCCCC; width: 20px; height: 20px; background: none;} 

@media screen and (max-width:600px) {  
    .cart-product-name{min-width:100%}
    .cart-product-others{ width: 100%;}
    .cart-product-price del{ display: inline-block; margin-left: 10px;  }



}

.cart-count-div{ z-index: 3; width: 100%; left: 0px; position:relative; bottom:0px;  }
.cart-count{  max-width: 800px; width: 100%;  margin: 0px auto;padding: 10px 20px;   display: flex; flex-wrap: wrap; background: #333333; color: #FFFFFF;   align-items: center;box-shadow: 0px 0px 5px rgba(0,0,0,0.1)}

.cart-count-check{ max-width: 100px}
.cart-count-check label{ cursor: pointer; font-size: 10pt; }
.cart-count-check label span{ display: inline-block; vertical-align: top; padding: 3px 5px;}
.cart-count-check input{ border: 1px solid #CCCCCC; width: 20px; height: 20px; background: none;} 

.cart-count-price-area{flex:1;display: flex;padding: 0 20px;  }

.cart-count-price{ flex:1; font-size: 12pt;  color: #BA9E78 ; font-family: 'Anton'; text-align: right ;  margin-right: 10px}
.cart-count-price b{ font-size: 18pt;white-space: nowrap;   }
.cart-count-price-main{ white-space: nowrap;  }
.cart-count-price-sub{  font-size: 9pt; font-family: Arial, Helvetica, sans-serif;}
.cart-count-price-sub b{ font-size: 12pt!important;  font-weight: bold;}

.cart-count-link a{display: block; width: 100px; background: #CC0000; color: #FFFFFF; text-align: center;border-radius:50px; padding: 5px 0px; }

.cart-function{ padding: 10px 20px;}
.cart-function a{ cursor: pointer; color: #000000; font-weight: bold; margin-right: 20px;}

@media screen and (max-width:600px) {  
/*     
    .cart-count{ padding: 0px!important;   flex-wrap: wrap; justify-content:space-between; background: #000; }
    .cart-count-price-area{flex:auto;order:1;  width: 100%;    background: #333333; padding: 10px 20px;display: flex; justify-content: space-between;   }
    .cart-count-price{  flex:none; margin-right: 0px}
    .cart-count-check{ order:2; padding: 10px;  }
    .cart-count-link{ order:3;  padding: 10px; }
    
    .cart-count-link{   } */
}

 
@media screen and (max-width:100px) {  
    .cart-count-price-area{flex:1;display: block;  }
        
    .cart-count-price{ display: flex; align-items: center;  }
     
 
    .cart-count-price-main{order:2; flex:1; text-align: right;}
    .cart-count-price-sub{ order:1; flex:1;text-align: left; padding-left: 10px; }
    .cart-count-price-sub b{ font-size: 12pt!important;  font-weight: bold;}

}


.cart-empty{background: #FFFFFF; padding: 200px 10px; margin: 10px 0px; display: block; text-align: center; color: #CCCCCC}

.soldout{ } 
.soldout > *{opacity:0.5;  } 
.soldout .check{opacity:0}


.cart-note{  max-width: 800px; width: 90%;  margin: 0px auto;padding: 10px 20px;    background: #FFFFFF; margin-top: 10px; }
@media screen and (max-width:768px) {  
    /* .cart-count-div{     }
    .cart-product-name{ min-width: 100%; margin-bottom: 5px}

    .cart-product-name a.del{ display: none}

    .cart-product-price{  flex:1; text-align: left}
    .cart-product-price del{ display: inline-block; margin-left: 5px  }

    .cart-product-del{  display:block; }
    .cart-product-quantity{ flex:1; max-width: 100px;;   }
    .cart-product-quantity a{   padding: 3px 0px; }
    .cart-product-quantity input{ text-align: center; text-align: center; width: 40px; font-size: 10pt; padding: 0px;  }

    .cart-title{  margin-top: 0px; }

    .cart-product{ padding: 10px 10px; }
    .cart-product-photo{ width: 80px}
    .cart-product-check input{   width: 15px; height: 15px;} 

    .cart-count{  padding: 10px }
    
    .cart-count-check input{  width: 15px; height: 15px;} 

    .cart-function{ padding: 10px 10px;} */
}
 
@media screen and (max-width:468px) {  
 
}


.cart-checkout{ display: block; position: fixed; bottom: 0px; left: 0px; width: 100%; text-align: center; background: rgba(0,0,0,0.5); padding: 20px; z-index: 20; }
.cart-checkout a{ background: #FF6666; display: block; margin: 0px auto; padding: 20px 50px; color: #FFFFFF; max-width: 300px;;}
.cart-checkout a:hover{ background: #CC3333;}



/*order*/

.order-block{ background: #FFFFFF;   margin-top:15px;  } 
 
 .order-block h3{ display: flex; align-items: center; justify-content: flex-start; background: #333333; color: #FFFFFF; text-align: left; padding: 10px 10px;}
 .order-block h3 i{}
 .order-block h3 span{ margin-left: 10px; font-weight: bold;}
 .order-block h3 span b{ margin-left: 10px; font-size: 10pt; opacity: 0.75;;}

 .order-data{ padding:10px 10px;  }
 .order-data .title{   font-weight: bold ; padding: 5px 10px; }

 .order-data .content{ flex: 1 ; }
 .order-data .content input[type="text"]{ flex: 1;   padding: 10px; border: 1px solid #cccccc; border-radius:5px}
 .order-data .content select{   padding: 10px; border: 1px solid #cccccc; border-radius:5px}
 .order-data .content textarea{ width: 100%; min-height: 100px; padding: 10px; border: 1px solid #cccccc; border-radius:5px}
 
 .order-data .note{ font-size: 10pt; color: #666666; padding: 5px 10px; }
 
 
 .order-data-btn{opacity:0.9;display: inline-block; padding: 10px 30px; color: #FFFFFF; cursor: pointer}
 .order-data-btn:hover{ opacity:1}


 .invoice-data{ display: flex;  margin-bottom: 5px; justify-content: flex-start; }
 .invoice-data span{ width: 5px;  }

 .order-product-note{ display: block; border: 0px; background: none;;}

 
.order-summany-note{ background: #FFCCCC; padding: 20px 20px;  margin-top: 10px;}
.order-summany-note h3{ padding:   0px; font-weight: bold;}
.order-summany-note ul{ list-style-type:decimal;margin-left: 18px;;}
.order-summany-note ul li{ margin: 10px 0px; line-height: 150%; padding-left: 10px;}
.order-summany-note b{  font-weight: bold; color: #CC0000;}

.order-summany-note label {  display: flex; align-items: center; cursor: pointer; font-weight: bold; color: #CC0000; font-size: 12pt;}
.order-summany-note label input{ width: 30px; height: 20px; margin: 0px; margin-right: 5px;margin-left: -5px; }
.order-summany-note label{ }

.order-summany-btn{ margin-top: 10px; display: flex; justify-content: space-between;}
.order-summany-btn-back,
.order-summany-btn-send{display:  block; background: #999999; padding: 15px 0px; color: #FFFFFF!important ; border-radius: 5px;font-weight: bold; font-size: 11pt; cursor: pointer; text-align: center; width: 120px}
.order-summany-btn-send{  background: #FF3333; width: 240px;margin-left: 10px;}