.box-coupon{
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#eee;
}
.box-coupon .card{
    height:230px;
    width:600px;
    background-color:#fff;;
    font-family: sans-serif;
    box-shadow: 0 0 3px 0 #dee2e6;
    transition:all 0.5s;
}

.box-coupon .content{
    width:100%;
    height:100%;
    display:flex;
}
.box-coupon .left-side{
    width:10%;
    height:100%;
    position:relative;
    word-spacing:5px;
    background-color:#D10024;
}

.box-coupon .flattext{
    position:absolute;
    bottom:5px;
    left:-5px;
}
.box-coupon .left-side h2{
    writing-mode: vertical-lr;
   text-orientation: mixed;
   transform: rotate(-180deg);
   color: #f7f76a;
   font-weight: 600;
	font-size: 14px;
}

.box-coupon .left-side .triangle{
    height:20px;
    width:15px;
    background-color:#f7f76a;
    position:absolute;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    left:10px;
    top:10px;
    transition:all 0.3s;
}
.box-coupon .righttriangle{
    height:20px !important;
    clip-path: polygon(100% 50%, 0 0, 0 100%) !important;
}

.box-coupon .right-side{
    width:90%;
    background-image: linear-gradient(to right,#FDE4F2,#FEF7E6);
    height:100%;
}

.box-coupon .upper-content{
    display:flex;
    justify-content:space-between;
    padding: 5px 10px;
    position:relative;
    color:#535766;
}

.box-coupon  .upper-content .flat h3{
    font-weight:bold;
    font-size: 25px;
    margin-left: 10px;
}

.box-coupon .upper-content .img{
    width:80x;
    height:80px;
    position:absolute;
    right:20px;
    top:10px;
   
}
.box-coupon .upper-content .img span{
  background-image: url("../image/gift-box.png");
  background-repeat: no-repeat;
  padding: 0px 30px 80px 50px;
}
.box-coupon .middle-content{
    padding: 25px 20px 5px 20px;
    position:relative;
    color:#535766;
}
.middle-content .text{
    font-size:13px;
    font-weight:normal;
    color: #535766;
    width: 70px;
}
.box-coupon .middle-content h3{
    font-size:20px;
    font-weight:800;
    position:absolute;
    top:5px;
    left:145px;
}

.box-coupon .coupon-code {
  border-radius: 5px;
  background-color: #fcf8e3;
  position: relative;
  color: #8a6d3b;
  margin-bottom: 5px;
  border: 1px dashed;
  padding: 10px 10px 20px 10px;
  margin-top: 10px;
  display: inline-flex;
}
.box-coupon .coupon-code .copy-button {
  margin: 5px 20px 0 0;
  height: 35px;
  border-radius: 4px;
  padding: 5px;
  border: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}
.box-coupon .coupon-code .copy-button input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 14px;
}
.box-coupon .coupon-code .copy-button button {
  padding: 0px 10px 0px 10px;
  background-color: #dc143c;
  color: #fff;
  border: 1px solid transparent;
}
.box-coupon hr{
    border-top: 1px solid #e5e5e5;
    margin-top: 5px;
	margin-bottom: 5px;
}
.box-coupon .last{
    display:flex;
    justify-content:space-between;
    padding: 5px 20px 5px 20px;
    
}

.box-coupon .last .quality{
    display:flex;
    flex-direction:row;
    align-items:center;
}
.box-coupon .last .quality i{
	color: #34cd75;
	margin-right: 5px;
}
.box-coupon .last .quality img{
    height:25px;
    width:25px;
    margin-right:4px;
    margin-top:-3px;
}

.box-coupon .last .quality p{
    font-size:13px;
    color:#666 !important;
    margin-bottom:1px;
}
.label-coupon{
  background-color: #CC0C39;
  color: #ffffff;
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 12px;
  position: absolute;
  top: 10px;
}