/* BASIC css start */
 
/* 쿠폰존 */
:root {
  --text-dark: #000;
  --text-gray: #888888;
  --bg-light: #F7F7F7;
}

#couponZone {
    --text-sm: .875rem; /* 14px */
    --text-xs: .813rem; /* 13px */
}
.hidden { display: none; }
.page-title-wrap { text-align: left; }
.sub-title { display: flex; align-items: center; padding: 80px 0 12px 0; border-bottom:1px solid var(--cw-heading-color); }
.sub-title h3 { font-weight: 700; font-size: 1.125rem; line-height: 26px; color: var(--cw-heading-color); }
#couponZone .member { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; padding: 20px 0 20px 20px;  border-top: 1px solid var(--cw-heading-color); border-bottom: 1px solid var(--cw-color-30); }
#couponZone .member .user-info { display: flex; align-items: center; gap: 16px; min-height: 5rem; font-size: 1.25rem; }
#couponZone .member .user-info .img { flex: 1 0 60px; display: block; width: 60px; height: 60px; padding-top: 12px; background: var(--cw-color-10); border-radius: 50%; text-align: center; }
#couponZone .member .user-info .img img { max-width: 100%; height: auto; }
#couponZone .member .user-info p { font-size: var(--text-xs); }
#couponZone .member .user-info .MS_group_reserve_msg { font-weight: 700; }
#couponZone .member .user-stats { display: flex; justify-content: flex-end; width: 100%; max-width: 645px; }
#couponZone .member .user-stats li { flex: 1 1 calc(25% - 20px); max-width: calc(25% - 20px); padding:0 20px; border-left: 1px solid var(--cw-color-20); text-align: center; }
#couponZone .member .user-stats li:first-child { border-left: 0; }
#couponZone .member .user-stats span { display: block; margin-bottom: 2px; font-size: var(--text-sm); color: var(--cw-color-60); white-space: nowrap; }
#couponZone .member .user-stats a { color: var(--cw-heading-color); }
#couponZone .member .user-stats strong { font-size: 1.25rem; }
#couponZone .member.guest { display: flex; flex-direction: column; justify-content: center; gap: 16px; align-items: center; padding: 28px 0; text-align: center; }
#couponZone .member.guest p { font-weight: 600; }
#couponZone .member.guest .btn-member a { width: 180px; }
#couponZone .coupon-num div { padding: 20px 0; gap: 6px; background: var(--cw-color-10); }
#couponZone .coupon-num input { width: 320px; text-align: left !important; }
#couponZone .coupon-num a { flex-shrink: 0; }
#couponZone .coupon-num p { padding-top: 10px; font-size: var(--text-xs); color: var(--cw-color-80); }
#couponZone .coupon-sort .cw-select-box { padding: 0 26px 0 10px; line-height: 28px; width: 120px; font-size: .813rem; background-size: 1rem; }
#couponZone .coupon-lists {grid-template-columns: repeat(4, 1fr);grid-auto-rows: auto;align-items: start;padding-top: 48px;}
#couponZone .c-images { padding: 0; }
#couponZone .c-image img { display: block; width: 100%; height: auto; border-radius: 8px; }
#couponZone .product-img { float: left; width: 56px; height: 56px; margin-right: 12px; border-radius: 50%; overflow: hidden; }
#couponZone .product-img a,
#couponZone .product-img img { display: block; width: 100%; height: 100%; }
#couponZone .product-img img { object-fit: cover; }
#couponZone .coupon--name { margin-bottom: 8px; }
#couponZone .coupon--date { font-size: var(--text-sm); color: var(--cw-color-80); }
#couponZone .coupon--date a.coupon--item { display: inline-flex; align-items: center; padding-right: 10px; gap: 2px; color: var(--cw-heading-color); }
#couponZone .coupon--date a.coupon--item span.link { display: inline-block; width: 12px; height: 12px; background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_link_arrow.svg') no-repeat 50% 50%; }
#couponZone .coupon-use { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
#couponZone .coupon-use p { text-align: center; font-size: var(--text-xs); color: var(--cw-color-60); }
#couponZone .coupon-use a { display: inline-block; width: 18px; height: 22px; }
#couponZone .btn-all-down {display: flex;justify-content: center;align-items: center;padding-top: 46px;}
#couponZone .btn-all-down p { font-weight: 600; }
#couponZone .btn-all-down a {display: inline-flex;align-items: center;justify-content: center;gap: 6px;width: 280px;border-radius: 8px;height: 56px;background: var(--main-color);color: #fff;font-size: 18px;font-weight: 600;}
#couponZone .btn-all-down a span.down { display: inline-block; width: 16px; height: 16px; background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_download_wh.svg') no-repeat 50% 50%; }
#couponZone .coupon--btns a { font-size:0; text-indent:-9999px; display:inline-block; width:22px; height:22px; background:url('/images/common/ico_h11_down_black_l.png') no-repeat center center; }
#couponZone .sc-style1.sc-reserve .coupon--price { color:#3b6ce9; }
#couponZone .sc-style2 { border:1px solid var(--cw-color-white); background: #171940; }
#couponZone .sc-style2 p { color: var(--cw-color-white); }
#couponZone .sc-style2 p.c-txt { color: #999; }
#couponZone .sc-style2 .coupon--btns { background:#ff3a34; border:0; color: var(--cw-color-white); border-radius: 0 8px 8px 0; }
#couponZone .sc-style2 .coupon--date,
#couponZone .sc-style2 .coupon--date a.coupon--item { color: var(--cw-color-white); }
#couponZone .sc-style2 .coupon--date a.coupon--item span.link { background: url('//skin.makeshop.co.kr/skin/rw_shop/images/icons/ico_link_arrow_wh.svg') no-repeat 50% 50%; }
#couponZone .sc-style2 .coupon--btns a { background:url('/images/common/ico_h11_down_white_l.png') no-repeat center right; }
#couponZone .sc-style2 .coupon--btns span { color:#fff; }
#couponZone .sc-style2.sc-reserve .coupon--btns { background:#3b6ce9; color: var(--cw-color-white); }
#couponZone .sc-style3 { border-color: #272a4d; }
#couponZone .sc-style3 .coupon--price { color:#eb3697;}
#couponZone .sc-style3 .coupon--btns { background: #fff2f9; border-color: #272a4d; }
#couponZone .sc-style3 .coupon--btns p { color: #eb3697; }
#couponZone .sc-style3 .coupon--btns a { color: #eb3697; background:url('/images/common/ico_h11_down_pink_l.png') no-repeat center right; }
#couponZone .sc-style3.sc-reserve .coupon--price { color:#18b776; }
#couponZone .sc-style3.sc-reserve .coupon--btns p { color:#18b776; } 
#couponZone .sc-style3.sc-reserve .coupon--btns { background:#eefff7; }
#couponZone .sc-style3.sc-reserve .coupon--btns a { color:#18b776; background:url('/images/common/ico_h11_down_green_l.png') no-repeat center right; }

.-pcView {
    display: block;
}
.-moView {
    display: none;
}  
.coupon-wrap {
  margin: 0 auto;
}

.coupon-register-box {
  display: flex;
  justify-content: center;
  background: #FAFAFA;
  padding: 28px 16px;
}

.coupon-register-box .input-group {
  display: flex;
  width: 100%;
  max-width: 560px;
  gap: 8px;
}

.coupon-register-box input {
  flex: 1;
  height: 56px;
  padding: 0 20px;
  border: 1px solid #DBDBDB;
  border-radius: 56px;
  font-size: 17px;
  outline: none;
  font-weight: 500;
  text-align: left !important;
}

.coupon-register-box input::placeholder {
  color: #bbb;
}

.coupon-register-box .btn-register {
  width: 88px;
  height: 56px;
  background-color: #000;
  color: #fff;
  border-radius: 56px;
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

a.btn-register {}

.coupon-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.coupon-tabs li {
  flex: 1;
  text-align: center;
}

.coupon-tabs a {
  display: block;
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  color: #666;
  border-bottom: 3px solid transparent;
}

.coupon-tabs li.active a {
  color: var(--main-color);
  font-weight: bold;
  border-bottom-color: var(--main-color);
}

.coupon-filter {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.select-sort {
  border: none;
  font-size: 14px;
  color: #333;
  padding-right: 20px;
  appearance: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" fill="%23333"><path d="M0 0l5 6 5-6z"/></svg>') no-repeat right center;
  background-size: 10px;
  outline: none;
  cursor: pointer;
}

.coupon-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 48px;
}

.coupon-card {
  position: relative;
  background-color: #F5F5F5;
  padding: 10px 13px 10px 10px;
  overflow: hidden;
}
.coupon-card:has(.card-download) {
    padding: 10px 74px 10px 10px;
}
.coupon-card::after {
  content: '';
  position: absolute;
  top: 50%;
  right: -10px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 13px;
}

.badge-group {
  display: flex;
  gap: 2px;
}

.badge {
  padding: 2px 4px;
  font-size: 10px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
}

.badge.d-day,
.badge.down-state {
  background-color: var(--main-color);
}

.badge.disable {
  background-color: #ccc;
}

.target-link, .target-text {
  font-size: 11px;
  color: var(--text-dark);
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 2px;
}

.card-body {
  margin-bottom: 20px;
}

.coupon-title {
  display: block;
  font-size: 12px;
  color: var(--text-dark);
  margin-bottom: 4px;
  font-weight: 700;
}

.coupon-discount {
  font-size: 23px;
  font-weight: 700;
  color: var(--main-color);
}

.card-footer p {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-gray);
}
.card-footer p img {
    margin-left: 4px;
}
.card-footer p img:last-child {
    display: none;
}
.tab-navi--links {
  margin-bottom: 20px;
}

.coupon-filter select:not(#dummy_id) {
  width: 125px !important;
  outline: 0;
  background: #fff url(/design/cbtis/images/select_bg1.svg) no-repeat center right;
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
  border: 0;
  height: 19px;
  color: #000;
}

div#down_coupon_list {
}

#down_coupon_list .coupon-card {
  padding-right: 74px;
}

.card-download {
  display: flex;
  justify-content: center;
  align-items: center;
  border-left: 1px solid #EEEEEE;
  background-color: transparent;
  transition: background-color 0.2s;
  z-index: 1;
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 60px;
  flex-direction: column;
  font-size: 11px;
  color: #000;
  padding-right: 6px;
}

.btn-down {
  margin-top: 32px;
  text-align: center;
}

.btn-down.mo {display:none;}
.btn-down.pc {display:block;}

.btn-down .btn {
  background: var(--main-color);
  color: #fff;
  border-radius: 8px;
  max-width: 368px;
  height: 56px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 600;
  width: 100%;
  gap: 6px;
}

.newPaging {
  padding: 64px 0 0;
}
p.downState {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-gray);
}

@media screen and (max-width: 1350px) {
  .coupon-list {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width: 1024px) {
  .coupon-wrap {
  }
  
  .coupon-tabs a {
    font-size: 15px;
    padding: 15px 0;
  }
  
  .coupon-list {
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 20px;
  }
  
  .coupon-card {
    padding: 20px;
  }
  .coupon-card:has(.card-download) {
    padding: 20px 74px 20px 20px;
}
  .coupon-discount {
    font-size: 28px;
  }
  
  .tab-navi--links {
    margin-bottom: 12px;
  }

  .coupon-filter {
    margin-bottom: 12px;
  }

  .coupon-filter select:not(#dummy_id) {
    width: 83px !important;
    font-size: 13px;
    height: 16px;
    background-size: 12px;
  }

  .newPaging {
    padding: 32px 0 0;
  }
  
  .btn-down {
    margin: 20px 0;
  }
  
  .btn-down.pc {display:none;}
  .btn-down.mo {display:block;}
  
  .btn-down .btn {
    height: 32px;
    border-radius: 4px;
    font-size: 12px;
    gap: 4px;
    max-width: 100%;
  }

  .btn-down .btn img {
    width: 9px;
  }
  .coupon-register-box {
    background: #fff;
    padding: 0;
    margin-bottom: 16px;
}

.coupon-register-box input {
    height: 36px;
    font-size: 13px;
    font-weight: 400;
}

.coupon-register-box .btn-register {
    height: 36px;
    width: 63px;
    font-size: 13px;
    font-weight: 500;
}

.coupon-register-box .input-group {
    max-width: 100%;
    gap: 4px;
}
 
}  


/* 모바일 */
@media (max-width: 1024px) {
    .page-title-wrap { margin-top: 40px; }
	.page-title-wrap h2 { display: none; }
    .sub-title { padding: 40px 0 10px; }
    #couponZone {
        --text-sm: .813rem; /* 13px */
        --text-xs: .75rem; /* 12px */
    }
    #couponZone .member { flex-wrap: wrap; padding: 16px 0; }
    #couponZone .member .user-info { font-size: 1.125rem; padding: 0 16px; gap: 12px; }
	#couponZone .member .user-stats { max-width: 100%; justify-content: space-between; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--cw-color-30); }
	#couponZone .member .user-stats li { flex: 1 1 0; max-width: 100%; padding: 0; }
    #couponZone .member .user-stats span { font-size: var(--text-xs); }
    #couponZone .member .user-stats strong { font-size: 1.125rem; }
    #couponZone .member.guest { padding: 20px 0; gap: 12px; }
    #couponZone .member.guest p { font-size: .875rem; }
    #couponZone .member.guest .btn-member,
    #couponZone .member.guest .btn-member a { width: 100%; }
    #couponZone .coupon-num div { padding: 10px 0; background: none; }
    #couponZone .coupon-num input { width: 100%; }
    #couponZone .coupon-num p { padding-top: 0; }
    #couponZone .btn-all-down {
    padding-top: 20px;
}
    #couponZone .btn-all-down p { font-size: .875rem; }
    #couponZone .btn-all-down a {width: 100%;border-radius: 4px;height: 32px;gap: 4px;font-size: 12px;}
    #couponZone .btn-all-down a img {
    width: 10px;
}
    #couponZone .coupon-lists {grid-template-columns: repeat(1, 1fr);padding-top: 20px;}
    #couponZone .coupon--name { margin-bottom: 6px; font-size: var(--text-sm); }
    #couponZone .coupon--price { font-size: 1.125rem; line-height: 26px; }
    #couponZone .coupon--desc { font-size: var(--text-xs); }
    #couponZone .coupon--date { font-size: var(--text-xs); }
    
.-pcView {
    display: none;
}
.-moView {
    display: block;
}
} 
/* BASIC css end */