.coupon-area{  max-width: 1600px; margin: 10px auto; position: relative;   display: flex; align-items: flex-start; padding: 10px; }

.coupon-list{ display: flex; flex-wrap: wrap; width: 100%;}
.coupon-item{  padding: 15px; width: 25%;  }

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

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

.receive-allow{ background: #FF3333; color: #FFFFFF!important; cursor: pointer;}
.receive-allow:hover{ background: #DD3333}
.receive-ok{ background: #999999; color: #FFFFFF!important;}
.receive-finish{ background: #BA9E78;color: #FFFFFF!important;}
@media screen and (max-width:1200px) {  
    
    .coupon-item{  padding: 10px; width: 33.3333%;min-width: none;}
}

@media screen and (max-width:900px) {  
  
    .coupon-item{    width:50%}
}

@media screen and (max-width:768px) {  
     
    .coupon-item{   width: 100%; }
}
 
@media screen and (max-width:368px) {
    
    

}