@import url('https://fonts.googleapis.com/css?family=Anton');
*{-webkit-transition: all 0.3s;-o-transition: all 0.3s;-moz-transition: all 0.3s;-ms-transition: all 0.3s;box-sizing: border-box;}
*{ font-weight:100; } 
body{background: #f1f1f1;}
img{  border:0px;}
  

.my{ display: flex; align-items: flex-start; flex-wrap: nowrap ;width: 100%; max-width: 1600px;   margin: 0 auto;   ; justify-content: center; padding: 10px; }

.my-top{ flex: 1; background:#f1f1f1;max-width: 300px; min-width: 200px;; text-align: center; border-radius:10px;padding: 30px 0px; margin-right: 10px;}


.my-top-info{   ;margin: 0px 0px; ;}

        .my-top-face{  }
        .my-top-face img{ border-radius:50%; background: #FFFFFF; padding: 2px;; border: 1px solid #cccccc; max-width: 120px  }
        .my-top-name h3{font-size: 16pt; font-weight: bold;}
        .my-top-logout{ }
        .my-top-logout a{display: block; padding-top: 10px }
        .my-top-logout a span{display: inline-block; vertical-align: top; padding: 2px; margin-right: 5px}
.my-top-nav{ width: auto;  }
.my-top-nav ul{ display: table; width: auto; margin:  20px auto; text-align: left;  }
.my-top-nav ul li{ margin: 10px 0px;}
.my-top-nav ul li a{}
.my-top-nav ul li a span{ position: relative;  display: inline-block; vertical-align: top; padding: 2px; margin-left: 5px}
.my-top-nav ul li a span b{ display: inline-block; vertical-align: top;   background: #00000066; color: #FFFFFF; font-size: 8pt;padding: 0px 5px; border-radius:10px; margin-left: 5px; margin-top: 2px; margin-right: -20px }

.my-content{flex:4;    position: relative;   }

.my-content-nav{background: #FFFFFF; margin-bottom: 10px; max-width: 100%;;  border-radius:10px;  position: relative; overflow-y: auto ;  }
.my-content-nav-back{   max-width: 60px;  text-align: center;; background: #cccccc;    color: #FFFFFF!important; cursor: pointer; padding-right: 10px; }
.my-content-nav ul{ display: flex; flex-wrap: nowrap; }
.my-content-nav ul li{flex:1;  padding: 10px 0px;   white-space: nowrap; text-align: center;  cursor: pointer; }
.my-content-nav ul li label{ display: block; padding: 5px 5px;cursor: pointer; }
.my-content-nav ul li a{display: block;   text-align: center; padding: 5px 0px; }

.my-content-nav ul li i{ vertical-align: top}
.my-content-nav ul li span{  position: relative; display: inline-block;vertical-align: top; margin-left: 5px; margin-top: 2px;}
.my-content-nav ul li span b{ display: inline-block; vertical-align: top;   background: #CC0000; color: #FFFFFF; font-size: 8pt;padding: 0px 5px; border-radius:10px; margin-left: 5px; margin-top: 2px;   }


.my-content-nav ul li.on {  background:#FF3333; color: #FFFFFF}
.my-content-nav ul li.on *{ -webkit-transition: all 0s;-o-transition: all 0s;-moz-transition: all 0s;-ms-transition: all 0s; color: #FFFFFF}
.my-content-block{  }


.my-function{background: #FFFFFF; margin-bottom: 10px; max-width: 100%;;  border-radius:10px;  position: relative; overflow-y: auto ; }
.my-function h3{ font-size: 14pt; font-weight: bold; padding: 20px 10px 10px 10px; width: 20%; text-align: center; margin-left: 10px; white-space: nowrap;}
.my-function ul{ display: flex; flex-wrap: wrap; align-items: center; padding: 0px 10px;}
.my-function ul li{ width: 20%;; text-align: center; margin: 10px 0px;}
.my-function ul li a{ display: block;  width: 80%; max-width: 60px;; margin: 0 auto;;}
.my-function ul li a .icon{ width: 60px; height: 60px;; background: #CC0000; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0px auto;}
.my-function ul li a .icon i{ font-size: 30px; color: #FFFFFF;}
.my-function ul li a .icon img{ width: 30px;}
.my-function ul li span{ display: block; text-align: center; font-size: 10pt; font-weight: bold; padding: 8px 0px;}
@media screen and (max-width:480px) {  
    
.my-function ul li{ width: 25%;}
}
/*product*/
.my-product{  background: #FFFFFF; margin-bottom: 10px; max-width: 100%;;  border-radius:10px;  position: relative; overflow-y: auto ; } 

.my-product ul{ width: 100%; display: flex; flex-wrap: wrap; padding:5px;;}
.my-product ul li{width:calc(25% - 10px); margin: 5px;background: #FFFFFF;  padding: 0px; }
.my-product ul li a{ display: block; text-align: center; }
.my-product ul li a img{ display: block; width: 100%;   }
.my-product ul li a p{ display:none; text-align: center;  padding: 5px;;  font-size: 10pt;}



.my-product-keyword{ text-align: center; padding: 0px 3px;    height: 30px; margin-top: -30px; background: rgba(0,0,0,0.6); overflow: hidden; }

.my-product-keyword b{ display: inline-block;font-size: 9pt;border: 1px solid #D1BFA6; border-radius: 5px; color: #D1BFA6; line-height: 100%; padding: 2px 4px; margin: 6px 0px}


.my-product-info{ display: flex; flex-wrap: wrap; align-items: center; padding: 10px 10px 10px 15px;}
.my-product-info > .price{ font-size: 10pt; flex:1;color: #666666; font-family: 'Anton'; white-space: nowrap; text-align: left; }
.my-product-info > .price b{ font-size: 14pt;white-space: nowrap;   }
.my-product-info > .price del{ display: inline-block;  margin-left: 5px; font-size: 10pt;  color: #FF3333;   font-family: 'Anton'  }

.my-product-info > .add-cart{  text-align: right;  }
.my-product-info > .add-cart a{ background: #D1BFA6;;  display: inline-block; padding: 1px 10px ;border-radius: 100px;color: #FFFFFF;font-size: 16px; line-height: 100%;font-weight: bold;cursor: pointer;}
.my-product-info > .add-cart a:hover{ background: #CC0000}
.my-product-info > .add-cart a i{ margin: 0px; padding: 0px; color: #FFFFFF;font-size: 16px;}

.my-product .add-favorite{ cursor: pointer; color: #CCCCCC ; position: absolute; right: 10px; top: 10px;}
.my-product .add-favorite:hover{   color: #b93131 ;}
.my-product .add-favorite-on{  color: #CC0000 }

.my-product-info > .soldout a{ background: #CCCCCC!important ; font-size: 11pt; padding: 2px 10px;;;}

.my-product-new-date{ display: block ; width: 100%; font-size:8pt; color: #CCCCCC;}
@media screen and (max-width:1024px) {  
    
    .my-product ul li{width:calc(25% - 10px)}
}
@media screen and (max-width:768px) { 
    .category-sub-type { display: none!important;  }
    
    .my-product ul li{width:calc(33.3333% - 10px)}
}
@media screen and (max-width:480px) {  
    
    .my-product ul li{width:calc(50% - 10px)}
}


.my-order-empty{ text-align: center; padding: 50px 0px; color: #aaaaaa; display: none}

.my-order{ background: #FFFFFF; margin-bottom: 10px;   border-radius:10px; padding: 20px 0px}
.my-order-info{ display: flex; align-items: center; justify-content: space-between; padding: 0px 30px; margin-bottom: 10px;}
.my-order-info span{  }
.my-order-info span span{ display: inline-block;  }

.my-order-image{ position: relative; background: #fafafa; padding: 15px 20px;;}
.my-order-image a{ display: flex; align-items: center ; width: 100%;}
.my-order-image a img{ width: 60px;  }
.my-order-image a i{ font-size: 12pt;margin-left: 16px; color: #999999;}

.my-order-link{padding: 10px 20px; text-align: right}
.my-order-link a{ display: inline-block; padding: 6px 18px; font-size: 10pt;  border-radius: 20px; margin-left: 3px;}

.mobile{ display: none}
.nav-close,.nav-open{ cursor: pointer;}

@media screen and (max-width:768px) { 
        .desktop{ display: none;}
        .mobile{ display: block}
        .my-top-nav .nav-close{ display: none}

        .my{ display: block ; padding: 10px;    }
        .my-top{   width: 100%; max-width: none; margin-bottom: 10px; background: none; padding: 0px;}
        .my-content{ margin-left: 0px;}

        .my-top-info{ display: flex; align-items: center; padding: 0px 10px; margin-top: 10px}
        .my-top-face img{ width: 80px }
        
        .my-top-name{ margin-left: 10px; text-align:left;flex: 1;  }

        .my-top-nav{background:#00C4CC  ;  text-align: center; border-radius:10px; }

        .my-top-nav ul{ display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin:  10px auto; padding: 25px 10px;    }

        .my-top-nav ul li{flex:1;margin: 0px; padding: 0px 0px; width: 20%;   max-width:20%!important; }
        
        .my-top-nav ul li a{display: block; text-align: center; margin: 0px 0px; color: #FFFFFF;    }
        .my-top-nav ul li a i{ display: block; font-size: 30px; color: #FFFF00;  }
        .my-top-nav ul li a span{font-size: 10pt; margin: 0px;}
        .my-top-nav ul li a span b{ display: block;margin:0px; background: #008388;position: absolute; left: 60%;top:-38px;border:3px solid #00C4CC; white-space: nowrap}

        

        .my-top-nav-open ul{  padding: 25px 10px 5px 10px; display: flex!important; flex-wrap: wrap   }
        .my-top-nav-open ul li{ display: block;  min-width:20%!important; flex: 1; padding-bottom: 20px!important;}
        .my-top-nav-open .nav-open{ display: none}
        .my-top-nav-open .nav-close{ display: block}

        .my-content-nav ul{ padding: 0px 0px; }
        .my-content-nav ul li{ border:0px; padding: 10px 0px;  }
        .my-content-nav ul li label{ display: block; padding: 0px 20px;}
        .my-content-nav ul li a{display: block; text-align: center; margin: 0px 0px;    }
        .my-content-nav ul li a i{ display: block; font-size: 30px}
        .my-content-nav ul li a span{font-size: 10pt; margin: 0px; }
        .my-content-nav  ul li a span b{ display: block;margin:0px; background: #CC0000;position: absolute; left: 60%;top:-38px;border:3px solid #FFFFFF; white-space: nowrap}
        .my-content-nav-back{  margin-left: -10px; }
}
.my-empty{ text-align: center; padding: 100px 0px; color: #999999;}


.my-order-detail{background: #FFFFFF; margin-bottom: 10px;   border-radius:10px; padding: 25px 30px}
.my-order-detail h2{ margin-bottom: 10px;}

.order-detail-state{ font-size: 16pt; color: #FFFFFF; text-align: center;padding: 15px 30px}

.order-detail-info{}
.order-detail-info label{ display: block; padding: 3px 0px;font-size: 11pt;}
.order-detail-info label .title{ margin-right: 10px;; }
.order-detail-info label .content{ }
.order-detail-info label .content b{ color: #FF0000; font-size: 12pt; ; font-weight: bold}
.btn-invoice{border-radius:50px; padding: 3px 12px; font-size: 10pt;; margin-left: 5px;}
.order-detail-info-split{margin-top: 10px;}

.order-detail-payment{}
.order-detail-payment label{ display: flex; align-items: center; border-bottom: 1px solid #f1f1f1; padding: 5px 0px;;}
.order-detail-payment label .title{ width:100px; text-align:center }
.order-detail-payment label .content{ }
.order-detail-payment label .content b{ color: #FF0000; font-size: 12pt; ; font-weight: bold}


.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-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-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-discount{display: flex; flex-wrap: wrap; border-bottom:1px solid #f1f1f1; padding: 10px 10px;   align-items: center}
.order-discount-name{flex:1}
.order-discount-name i{ font-size: 8pt; margin-left: 5px;;}
.order-discount-content{ display: flex;   font-size:10pt;    } 
.order-discount-price{      } 


.order-summany{width: 100%;display: flex;    justify-content: space-between}
.order-summany label{  padding: 10px;}
.order-summany label .title{ }
.order-summany label .price{  }

.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' ,'微軟正黑體' }

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

        .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-product{ padding: 10px 10px; }
        .order-product-photo{ width: 80px}
 
        .order-discount-name{order:1;  font-weight: bold;}
        .order-discount-content{ order:3  ; width: 100%;    } 
        .order-discount-price{order:2  ; text-align: right;    } 

        .order-summany{width: 100%;display: block}
        .order-summany label{ display:flex; padding: 5px 10px;} 
        .order-summany label .title{ text-align: left ;flex: 1} 
        .order-summany label .price{ width: 100px; text-align: right }

}


.my-block{background: #FFFFFF; margin-bottom: 10px; max-width: 100%;;  border-radius:10px;  position: relative; overflow-y: auto ;}
.my-block h2{}


.my-dashboard-nav{background: #333333}
.my-dashboard-nav ul{ display: flex; align-items: flex-start; justify-content: center}
.my-dashboard-nav ul li{ padding: 30px 30px 10px 30px;;}
.my-dashboard-nav ul li label{ text-align: center}
.my-dashboard-nav ul li label i{ display: block; font-size: 24pt; color:#836d4f; text-align: center}
.my-dashboard-nav ul li label b{display: block; font-size: 20pt; font-weight: bold; text-align: center;color:#BA9E78F1;  letter-spacing: 1px; white-space: nowrap }
.my-dashboard-nav ul li label span{display: block; text-align: center; font-size: 10pt; color: #FFFFFF99; white-space: nowrap}
.my-dashboard-nav ul li label a{ font-size: 8pt; border-radius:20px; padding: 2px 10px;margin-top: 5px; opacity: 0.5 ;; white-space: nowrap }
@media screen and (max-width:768px) { 
        .my-dashboard-nav ul li{ padding: 30px 20px 10px 20px;}
}


.my-wallet{font-size: 10.5pt; padding: 10px;}
.my-wallet table{ width: 100%; }
.my-wallet table td{  }
.my-wallet-date{ white-space:nowrap; width:  }
.my-wallet-num label{ display: flex; align-items: center ; justify-content: center}
        .my-wallet-num b{ color: #BA9E78!important;white-space:nowrap}
        .my-wallet-num i{ font-size: 14pt; color: #BA9E7866;margin-left: 5px;}

.my-wallet-note{ text-align: left;}
.my-wallet-name{display: inline-block; margin-right: 5px;}
.my-wallet-orders{ font-size: 8pt; padding: 0px 5px;;}

.my-wallet-note-text{display: inline-block;margin-right: 5px;}

.my-wallet-leave{ margin-right: 5px}
.my-wallet-expire{ margin-right: 5px}


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

.my-address-select{display: flex; align-items: center;flex: 1;  } 
.my-address-info{ flex:1; color: #666666; margin: 0px 5px;}

    .my-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 ;}
    .my-address-info-name{display: inline-block; font-size: 13pt;  vertical-align: top; font-weight: bold;margin-right: 5px;}
    .my-address-info-phone{display: inline-block; font-size: 13pt;  vertical-align: top; font-weight: bold;margin-right: 5px}

    .my-address-info-address{  }

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

.my-address-edit{ width: 30px; text-align: center; cursor: pointer; }
.my-address-edit i{color: #CCCCCC}

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


/*level*/
.my-level-info{ display: flex; align-items:stretch}
.my-level-info > div{flex:1;}

.my-level-plan-now{ display: flex; align-items: center; justify-content: center;  padding:50px 20px; }

.my-level-barcode{ max-width: 40%;flex:1; text-align: center; padding: 20px 10px 20px 10px; margin-right: 10px;}
.my-level-barcode img{ display: block; margin: 20px auto 5px auto;}
.my-level-barcode p{ font-size: 10pt; font-weight: bold;color: #666666;}

.my-level-block{padding: 50px 50px; flex:1;  }

.my-level-plan-now h3{ width: 100%; font-size: 20pt; font-weight: bold;  }
.my-level-plan-now h5{ width: 100%; font-size: 12pt; text-align: center;}
.my-level-plan-now div{  width: 100%; text-align: center;}
.my-level-plan-now a{ border-radius: 100px; margin: 20px; padding: 8px 30px; margin-bottom: -50px;}

.my-level-record{ padding: 10px;}
.my-level-record h3{ font-weight: bold; padding: 10px; padding-bottom: 0px;}
.my-level-record .head { background: #333333!important; color: #FFFFFF;}

.my-level-record tr{ display: flex; flex-wrap: wrap; padding: 5px;}

.my-level-record td{  padding:  5px; width: 20%;  ;}

.my-level-record td span{ display: inline-block; ;}
.my-level-record .plan-name{ color: #333333!important; font-weight: bold;}
.my-level-record .plan-price{}
.my-level-record .plan-date{}
.my-level-record .plan-note{}

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

        .my-level-record td{ width: 33.33%;  ;}
        .my-level-record .plan-price{ order:2}
        .my-level-record .plan-date{order:3; }
        
        .my-level-record .plan-note{order:4 }
}

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

.my-level-info{ display: block}
.my-level-barcode{ max-width: 100%; margin-right: 0px; }
.my-level-plan-now{ background: #BA9E7899; color: #FFFFFF;}


}




.my-favorite-block{  }
.my-favorite-block ul{ display: flex;}
.my-favorite-block > .category-product ul li{ border-radius:15px; overflow: hidden;  }
.my-favorite-block > .category-product ul{ padding: 0px;}
.my-favorite-block > .category-product ul li .price{ text-align: left; }


.my-favorite{}
.my-favorite ul{ display: flex ; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.my-favorite ul li{ width: calc(100%/11); }
.my-favorite ul li:nth-child(even){background: #cccccc;}
.my-favorite ul li:nth-child(even) img{opacity: 0.5; }
.my-favorite ul li a{ display: block; position: relative;  ;}
.my-favorite ul li a img{ display: block; width: 100%;}
.my-favorite-price{ position: absolute; bottom: 0px; background-image:linear-gradient( 180deg , #00000000 , #000000AA); padding:20px 0px 10px 15px; ; width: 100%; color: #FFFFFF; font-size: 10pt; text-shadow: 0px 0px 5px rgba(0,0,0,0.5);}
.my-favorite-price b{ font-size: 14pt; font-weight: bold;}
 
@media screen and (max-width:1200px) {  
        .my-favorite ul li{width: calc(100%/7);}

        .my-favorite ul li{display: block!important}  
}
@media screen and (max-width:768px) {  
        .my-favorite ul li{ width: calc(100%/5)}
}
@media screen and (max-width:500px) {  
        .my-favorite ul li{ width: calc(100%/3)}
        
}

/*my-update-block*/
.my-update-block{ text-align: center; padding: 50px 20px; }
.my-update-block iframe{display: block; width: 200px; height: 200px; border-radius:100px ; margin: 10px auto ;}
.my-update-block .update-table-send{  margin: 0 auto; color: #FFFFFF!important }
.my-update-block ul{ width: 100%;; max-width: 500px; margin: 20px auto 20px auto;}
.my-update-block ul li{display: flex; align-items: flex-start; padding: 10px 5px;  }
 
.my-update-block ul li .title{flex:1; max-width: 100px; white-space: nowrap;  font-size: 14pt; }
.my-update-block ul li .content{ flex:2; text-align: left;     }

.my-update-block ul li .content input{ text-align: left;font-size: 14pt; border: 0px;    width:100%;  }

.my-update-icon{ display: inline-flex; align-items: center; cursor: pointer; margin-right: 10px; }
.my-update-icon i{margin-right: 5px;  }
.my-update-icon span{  display: inline-block}
 
.my-update-checked{ display: inline-flex; flex-wrap: wrap; align-items: center;   margin-right: 10px;}
.my-update-checked i{ font-size: 12pt; color: #009966; white-space: nowrap  }
.my-update-checked span{  margin-right: 5px;display: inline-block; white-space: nowrap }


.my-update-photo-link{ display:block; font-size: 10pt; text-align: center; margin-bottom: 30px; cursor: pointer;;}


.my-update-note{ display: block; font-size: 10pt; color: #BA9E78;}
 

/*my-update-password-block*/ 
 
.my-update-password-block ul li .title{flex:1; max-width: 120px; white-space: nowrap ; padding: 5px; }
.my-update-password-block ul li .content{ flex:2; text-align: left; padding: 5px;    }
.my-update-password-block ul li .content input{ font-size: 16pt;}
.my-update-error{ position: relative;}
.my-update-error input{ border-bottom:1px solid  #CC0000!important}
.my-update-error-note{position: absolute; top: -10px; left: 0px; display: block;; font-size: 10pt; color: #CC0000;}

/*coupon*/
 
.my-coupon-list{ display: flex; flex-wrap: wrap; width: 100%;}
.my-coupon-item{  padding: 5px; width: 33.33%;  }

.my-coupon{ background: #FFFFFF; padding:  0px; position: relative; display: flex; border-radius: 6px; overflow: hidden;;} 
.my-coupon .dot{ width: 12px; height: 12px; border-radius: 10px;; display: block;;;  background: #f1f1f1; position: absolute;  right: 20%; z-index: 3;}
.my-coupon > .dot:first-child{ top:-6px;  } 
.my-coupon > .dot:last-child{ bottom:-6px;  } 

.my-coupon-info{ padding: 20px;flex:1}
.my-coupon .title{ font-size: 12pt; font-weight: bold; display: block;  ;}
.my-coupon .content{ font-size: 8pt; display: block; line-height: 150%; margin: 5px 0px;}
.my-coupon .date{ font-size: 8pt; color: #FF3333;display: block;}
.my-coupon .receive{ display: flex; align-items: center; justify-content: center; text-align: center; flex-wrap: wrap; font-size: 10pt; padding: 10px 5px;width:calc(20% + 6px); ;z-index: 1;}
.my-coupon .receive img{  display: block; width: 40%; opacity: 0.6;}

.my-coupon .receive span{  color:#FFFFFF; width: 100%; }
.my-coupon .receive a{  color:#FFFFFF; width: 100%; }
.receive-1{ background: #009966; color: #FFFFFF!important;  }
.receive-2{ background: #999999; color: #FFFFFF!important;  }
.receive-3{ background: #006699; color: #FFFFFF!important;  }

@media screen and (max-width:1000px) {  
    
        .my-coupon-item{    width:50%}
}
@media screen and (max-width:568px) {  
     
    .my-coupon-item{   width: 100%; }
}