.coupon_wrap{display: flex; flex-direction: column; background-color: #fff; border-radius: 8px;}
.coupon_wrap h2{padding: 16px 16px 0; font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b);}
.coupon_wrap .contents{padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px;}
.coupon_wrap .tab{display: flex; gap: 12px;}
.coupon_wrap .tab ._button.active{background: var(--neutral-750, #333C4B);color: var(--neutral-00, #FFF);}

.coupon_wrap .list_wrap{padding: 16px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}
.coupon_wrap .coupon{padding: 14px 26px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(107deg, #7A5AF8 1.52%, #9281F1 100%); position: relative;color: var(--neutral-00, #FFF);}
.coupon_wrap .coupon .title{display: flex; flex-direction: column; gap: 6px;}
.coupon_wrap .coupon .title .price{display: flex; align-items: center; gap: 2px;}
.coupon_wrap .coupon .title .price strong{font: var(--title-title3-b); letter-spacing: var(--ls-title-title3-b);}
.coupon_wrap .coupon .title .price .unit{font: var(--title-title6-b); letter-spacing: var(--ls-title-title6-b);}
.coupon_wrap .coupon .title .category{display: flex; flex-wrap: wrap; gap: 4px;}
.coupon_wrap .coupon .title .category span{display: flex; align-items: center; justify-content: center; padding: 3px 4px; border-radius: 2px; background: var(--brand-80, #E7E6FE); color: var(--brand-600, #6633EC); font: var(--label-label4-sb); letter-spacing: var(--ls-label-label4-sb); line-height: 1;} 
.coupon_wrap .coupon .detail{display: flex; flex-direction: column; font: var(--caption-caption2-r); letter-spacing: var(--ls-caption-caption2-r);}
.coupon_wrap .coupon .detail strong{font: var(--body-body2-b); letter-spacing: var(--ls-body-body2-b);} 
.coupon_wrap .coupon .detail .period{color: var(--brand-80, #E7E6FE);} 

.coupon_wrap .coupon:before, .coupon_wrap .coupon:after{content: ''; display: block; width: 24px; height: 24px; background-color: #fff; border-radius: 100%; position: absolute; top: calc(50% - 12px);}
.coupon_wrap .coupon:before{left: -12px;}
.coupon_wrap .coupon:after{right: -12px;}
.coupon_wrap .coupon .title:before{content: ''; display: block; width: 98px; height: 86px; background: url('/images/mypage/coupon-obj.png')no-repeat; background-size: contain; position: absolute; right: -8px; bottom: 2px;}