.order{ max-width: 1200px; margin: 0px auto; position: relative; padding: 0px; padding-bottom: 20px ;}

.order-block{ background: #FFFFFF;   margin-top:10px; padding: 20px 30px 40px 30px } 
.order-block h2{ padding: 15px 0px;   margin-bottom: 10px; border-bottom: 1px solid #CCCCCC;}

.order-title{ background: #FFFFFF; margin-top: 20px!important; display: flex; font-weight: bold}
.order-title a{display: block; flex:1; text-align: center ; padding: 15px 0px;clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 5% 50%); }
.order-title a:hover{ background: #CCCCCC}
.order-title a:first-child{clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%, 0% 50%); }
.order-title a:last-child{clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 5% 50%); }
.order-title a.on{ background: crimson; color:#FFFFFF}

.order-product-list{ background: #FFFFFF; display: block;display:flex;flex-direction:column }
.order-product{display: flex; border-bottom:1px solid #f1f1f1; padding: 10px 10px;   align-items: center}

.order-product-photo{  margin: 0px; margin-right: 10px; width: 100px}
.order-product-info{ flex:1;display: flex; align-items: center; flex-wrap: wrap}
.order-product-name{flex:1}
.order-product-note{ border: 0px; width: 100%; padding:10px 0px;}

.price{  font-size: 10pt;  color: #FF0000;  font-family: 'Anton','微軟正黑體'; width: 100px; text-align: center }
.price b{ font-size: 14pt;white-space: nowrap;   }
.price del{ display: block;  font-size: 10pt;  color: #333333;   font-family: 'Anton' ,'微軟正黑體' }

.order-shipment-select{ display: flex; align-items: center; align-items: flex-start;  cursor: pointer; padding:0px  }
.order-shipment-type{   }
.order-shipment-type span{ display: inline-block; background: #FF3333; padding: 10px 15px; color: #FFFFFF ; border-radius: 5px;font-weight: bold; font-size: 11pt;margin-top: 3px;}
.order-shipment-info{flex: 1; margin: 0px 5px 0px 10px}
    .order-shipment-info-name,
    .order-shipment-info-phone{ font-size: 14pt; display: inline-block; font-weight: bold}
    .order-shipment-info-address{ display: block; font-size: 12pt;margin-top:  0px}
    .order-shipment-info-email,
    .order-shipment-info-note{ display: block; font-size:10pt;margin-top: 5px;}

    .order-shipment-info-line-1{ display: inline-block; color: #009966; font-size: 12pt;margin-right: 5px;;; font-weight: bold!important}
    .order-shipment-info-line-2{display: inline-block; font-size: 10pt;; }
.order-shipment-update{ width: 20px}

.order-shipment-empty{ padding:0px;   }
.order-shipment-empty > a{ display: block; cursor: pointer; padding: 20px 0px; background: crimson;color: #FFFFFF;font-weight: bold; text-align: center}




.order-shipment-empty .order-shipment-select{ display: none}

.order-payment{}
.order-payment-list{}
.order-payment-select{display: inline-block;background: #999999; padding: 10px 20px; color: #FFFFFF ; border-radius: 5px;font-weight: bold; font-size: 11pt; cursor: pointer;margin: 0px 5px 5px 0px;}
.order-payment-select.on{background: #FF3333}


.order-activity-area{ overflow-x: auto; padding: 10px 0px; }
.order-activity-area ul{ background: none;  padding: 0px ; display: flex; align-items: flex-start;flex-wrap: nowrap;}
.order-activity-area ul li{  margin-right: 10px;  }

.order-activity{padding: 15px 20px;flex:1; min-width: 300px;border: 1px solid #CCCCCC; position: relative;  }
.order-activity > .tag{ color: #ffffff; background: #FF3333; font-size: 10pt; display:table; padding: 3px 10px; margin: 0px 0px 5px -5px;}
.order-activity > .title{ color: #009966; font-weight: bold; margin-bottom: 10px; font-size: 14pt;}
.order-activity > .content{ line-height: 150%; font-size: 10pt;}
.order-activity > .date{  color: #FF3333; font-size: 10pt; font-weight: bold; margin-top: 10px;}
.order-activity > .tips{ color: #FF3333; font-size: 10pt; font-weight: bold; margin-top: 3px; margin: 3px -10px -5px -10px; background: #ff3333; color: #FFFFFF; padding: 3px 10px; }
 


.order-activity-remove{ display: none;}
.order-activity-remove > div{ padding:10px;  text-align: center;   min-width:100px; width: 100px;}
.order-activity-remove > div i{ display: block;; font-size: 28pt; margin-bottom: -5px;; color: #CCCCCC;}
.order-activity-remove > div .title{ font-size: 10pt; margin: 0px; color: #999999;}

.order-activity-select{background: #FF3333; border: #993333 2px solid; opacity: 0.75; }
.order-activity-select > .tag{background: #FFFFFF; color: #FF3333; opacity: 0.75;}
.order-activity-select > .tag::before{ content:"☑ "}
.order-activity-select > .title{ color: #ffaa00!important; } 
.order-activity-select > .content{ color:#ffffff}
.order-activity-select > .date{  color: #FFAA33; ;}

.order-activity-select > i{  color: #FFFFFF!important;}

.order-activity-allow{ cursor: pointer;}
.order-activity-allow:hover{ border: #993333 2px solid; } 
.order-activity-refuse{ cursor: not-allowed; background: #f1f1f1; opacity: 0.6;}

.order-summany{display: flex}



.order-summany-function-area{flex: 1; }

.order-summany-function{}
.order-summany-function-btn{display:block; color:#FF3333; font-weight: bold;font-size: 11pt; padding: 3px 0px; cursor: pointer;}
.order-summany-function-content{display:none}
.order-summany-function-content textarea{ width: 100%; height: 100px;;;}

.order-summany-function h4{ font-weight: bold; padding: 10px 10px;}
.order-summany-function textarea{ width: 100%; height: 100px;;;}


.order-summany-price{ width:  350px; text-align: right; margin-left: 10px;}


.order-summany-price label{ display:flex; align-items: center; padding: 5px;} 
.order-summany-price label .title{flex:1; font-size: 10pt;; }
.order-summany-price label .title b{display: block;  font-weight: bold;font-size: 12pt;}
.order-summany-price label .title p{   }

.order-summany-price label .price{ width: 100px; text-align: left; margin-left: 10px;}
.order-summany-price label .price p{  font-family: '微軟正黑體'; }

.order-summany-price-num .price{ font-weight: bold}
.order-summany-price-total .title b{}
.order-summany-price-total .price b{}



.order-summany-note{ background: #FFCCCC; padding: 20px 30px; border-radius:10px ; margin-top: 20px;}
.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: 20px;}
.order-summany-btn-back,
.order-summany-btn-send{display: inline-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{ float: right; background: #FF3333; width: 240px}



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

.order-product-quantity{ display: flex;  justify-content: center; width: 100px    }
.order-product-quantity a{ width: 30px; background: #666666;  text-align: center;color: #FFFFFF; padding: 3px 0px; cursor: pointer;}

.order-member-discount{ background:#BA9E78AA; background: #FF3333;; color:#FFFF33; padding: 20px 10px; font-size: 13pt;; text-align: center; font-weight: bold;; }

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

    .order-payment-select{padding: 10px 15px; }
    .order-summany{display: block}
    .order-summany-function-area{}
    
    .order-summany-price{ width: 100%;; text-align: right}
    
    
    .order-summany-price label{ display:flex; padding: 5px 10px;} 
    .order-summany-price label .title{ text-align: left ;flex: 1} 
    
    .order-summany-price label .title b{ display: inline-block;margin-right: 10px;  }
    .order-summany-price label .title p{ display: inline-block;  }
    .order-summany-price label .price{ width: 100px; text-align: right }

    

    .order-summany-btn{ margin-top: 20px; display: flex}
    .order-summany-btn-back,
    .order-summany-btn-send{flex: 1}  
    .order-summany-btn-send{margin-left: 10px;}

 
    .order-summany-function-btn{ display: flex; justify-content: space-between}
    .order-summany-function-btn a{ }
}


/*order-ok*/
.order-ok-payment{}
.order-ok-payment label{ display: flex; align-items: center; border-bottom: 1px solid #f1f1f1; padding: 10px 0px;;}
.order-ok-payment label .title{ width:100px; text-align:center }
.order-ok-payment label .content{ }
.order-ok-payment label .content b{ color: #FF0000; font-size: 12pt; ; font-weight: bold}
.order-ok-paid{ padding: 50px 0px!important; text-align: center;}
.order-ok-paid i{ font-size: 40pt; color: #009966}
.order-ok-paid h3{font-size: 20pt; margin: 10px 0px; font-weight:bold; color: #666666}
.order-ok-paid h5{ font-size: 11pt;font-weight:bold; color: #666666;}

.btn-credit-card{ display: flex; align-items: center; justify-content: center; margin:10px auto }
.btn-credit-card i{ font-size:26pt; margin-right:10px}
 
.order-ok-summany{width: 100%;display: block; }
.order-ok-summany label{ display:flex; padding: 5px 20px;} 
.order-ok-summany label .title{ text-align: left ;flex: 1} 
.order-ok-summany label .price{ width: 100px; text-align: right }
 
/*empty*/
.title-bar{ background: #FFFFFF; text-align: center; padding:15px 10px; margin-bottom: 10px;;}
.title-bar span{ font-weight: bold;display: inline-block;  }
.title-bar .L-icon{ float: left;margin-right: 5px;cursor: pointer;color: #AAAAAA;}
.title-bar .R-icon{ float: right;margin-left: 5px;cursor: pointer;color: #AAAAAA;}


/*address*/
.address-div{background: #FFFFFF;  ;  margin-bottom: 10px;}
.address-div h3{ background:#333333; color: #FFFFFF; padding: 5px 10px;}
.address-div .icon-right{ float: right; margin-top:1px; color: #009966!important;}
.address-div .icon-right i{ display: none;}
.address-div .icon-right span{display: inline-block; vertical-align: top; padding: 3px; color: #FFFFFF;font-size: 10pt;opacity:0.75;}
.address{display: flex; align-items: center; border-bottom:1px solid #dddddd;; padding: 10px 5px;; }
.address:last-child{ border: 0px;}

.address-select{display: flex; align-items: center;flex: 1; cursor: pointer;}
.address-checked{ width: 30px; color: #999999 }
.address-checked i{ cursor: pointer;}
.address-checked.on{ color: #009966;}
.address-info{ flex:1; color: #666666; margin: 0px 5px;}

    .address-info-default{ display: inline-block; font-size: 8pt; border:1px solid #FF3333; color:#FF3333; padding: 0px 3px; border-radius:5px;margin-right: 2px;; margin-top: 2px; vertical-align: top ;}
    .address-info-name{display: inline-block; font-size: 13pt;  vertical-align: top; font-weight: bold;margin-right: 5px;}
    .address-info-phone{display: inline-block; font-size: 13pt;  vertical-align: top; font-weight: bold;margin-right: 5px}

    .address-info-address{  }

    .address-info-line-1{ display: block; font-size: 11pt;margin-top: 5px;;}
    .address-info-line-2{ display: block; font-size: 10pt;}
    
    .address-info-email{ display: block; font-size: 9pt;}
    .address-info-note{ display: none; font-size: 9pt;}

    .address-info-address-return,
    .address-info-address-code-return{ display: none;}
.address-edit{ width: 30px; text-align: center; }
.address-edit i{color: #CCCCCC}

.address-shipment-note{background: #FFF5F5; color: #CC0000; display: block;padding: 5px; padding-left: 40px;  font-size: 9pt;}

.address-add-btn{display: block;   padding:20px 10px; text-align: center }
.address-add-btn a{ border: 2px solid #333333; padding: 5px 15px; font-size: 10pt;font-weight: bold;}

.address_add{background: #FFFFFF;  padding:5px 10px; margin-bottom: 10px;;}

.update-form ul{}
.update-form ul li{border-bottom:1px solid #dddddd; display: flex ;padding: 5px; align-items: center; margin-bottom: 3px;  }
.update-form ul li:last-child{border: 0px}
.update-form ul li .form-title{   width:80px;  text-align: center;font-size: 11pt;font-weight: bold;  }

.update-form ul li .form-title sup{ display: inline-block;  color: #FF3333; margin:-10px 0px 0px 2px }
.update-form ul li .form-content{ flex: 4;    }
.update-form ul li .form-content input{ border: 0px; padding:5px 10px;background: none }
.update-form .error{  background: #ffeeee ;border: 1px solid #FFAAAA!important}
 
.switch-input{ margin-left: 5px;   display: flex;align-items: center;}
.switch-input i{ font-size: 20pt; color: #999999; cursor: pointer;}
.switch-input i.on{ color: #009966}
.switch-input span{ padding: 5px; font-size: 10pt;;;}

.update-form-send{ display: block; padding: 15px; background:#009966; text-align: center; cursor: pointer; color: #FFFFFF; font-weight: bold;   　}
.twzipcode{ display: flex ; align-items: center  }
.county,
.district{ flex:1; border: 0px; padding: 5px; background: none  }
 

.cvsSelect{cursor: pointer;padding: 10px 0px;}
.cvsSelectBtn{}
.cvsSelectOK{ display: flex;display: none; align-items: center;  padding: 10px;; padding-right: 30px; position: relative;border: 1px solid #009966; background: #c8ffed; } 
.cvsSelectOKInfo{}
.cvsSelectOK > i{position: absolute; right: 10px; color: #009966}

.cvsSelectOK h3{ font-weight: bold; font-size: 14pt;  }
.cvsSelectOK h3 span{ display: inline-block}
.cvsSelectOK h5{ font-weight: bold; font-size: 10pt; }
.cvsSelectOK h5 span{ display: inline-block }
div.errorDiv{animation: errorDivAnimation 1s ease 0s infinite alternate;}

@keyframes errorDivAnimation
{
    0% { opacity: 0.2;}
  100% { opacity: 1;} 
}

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

    .order-title a{clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 10% 50%); }
    .order-title a:first-child{clip-path: polygon(0 0, 90% 0, 100% 50%, 90% 100%, 0 100%, 0% 50%); }
    .order-title a:last-child{clip-path: polygon(0 0, 100% 0, 100% 50%, 100% 100%, 0 100%, 10% 50%); }
    .order-block{   padding: 15px 20px } 

    .order-product-name{ min-width: 100%; margin-bottom: 5px}

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

    .order-product-quantity{ flex:1; max-width: 100px;;   }
    .order-product-quantity a{   padding: 3px 0px; }
    .order-title{  margin-top: 0px!important; }

    .order-product{ padding: 10px 10px; }
    .order-product-photo{ width: 80px}
    
}
 
@media screen and (max-width:468px) {  
 
}



/*coupon*/
.coupon-div{background: #FFFFFF;  ;  margin-bottom: 10px;}
.coupon-div h3{ background:#333333; color: #FFFFFF; padding: 5px 10px;}

.coupon{display: flex; align-items: flex-start; border-bottom:1px solid #dddddd; }
.coupon:last-child{ border: 0px;}

.coupon-select{display: flex; align-items: flex-start;flex: 1;; padding: 10px 5px;; }
.coupon-checked{ width: 30px; color: #999999 }
.coupon-checked i{ cursor: pointer;}
.coupon-checked.on{ color: #009966;}
.coupon-info{ flex:1; color: #666666; margin: 0px 5px;}
.coupon-info .title{ font-size: 14pt; display: block; }
.coupon-info .content{ font-size: 8pt; display: block; }
.coupon-info .date{font-size: 8pt;display: block;}
.coupon-info .tips{font-size: 8pt; display: block; color: #CC0000; }

.coupon-allow{ cursor: pointer;}
.coupon-refuse{ background: #CCCCCC;}