.couponModal {
  position: relative; }
  .couponModal .couponModalHeader {
    position: sticky;
    z-index: 10010;
    top: 0;
    height: 70px;
    width: 100%;
    background-color: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #BDBDBD; }
    .couponModal .couponModalHeader .coupon-code-box {
      background: #F5F5F5;
      border: 1px solid #BDBDBD;
      border-radius: 5px;
      width: 480px;
      height: 40px;
      line-height: 40px;
      padding-left: 14px;
      font-size: 12px;
      color: #2D2D2D; }
      .couponModal .couponModalHeader .coupon-code-box::placeholder {
        color: #BDBDBD; }
    .couponModal .couponModalHeader .coupon-code-btn {
      min-width: 80px;
      height: 40px;
      margin: 0 10px;
      font-size: 13px;
      cursor: pointer;
      border: 1px solid #BDBDBD;
      border-radius: 5px;
      color: #007AFF;
      background-color: #fff; }
      .couponModal .couponModalHeader .coupon-code-btn:hover, .couponModal .couponModalHeader .coupon-code-btn:active {
        opacity: 0.7; }
  .couponModal .couponModalContents {
    min-height: 200px; }
    .couponModal .couponModalContents.mini {
      min-height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 20px; }
    .couponModal .couponModalContents .couponListHeader {
      font-size: 20px;
      font-weight: bold;
      color: #2D2D2D;
      text-align: center;
      margin: 20px 0 10px; }
    .couponModal .couponModalContents .couponListSortBox {
      display: flex;
      margin-right: 40px;
      justify-content: flex-end;
      align-items: center;
      font-size: 11px;
      color: #2D2D2D; }
      .couponModal .couponModalContents .couponListSortBox div {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative; }
        .couponModal .couponModalContents .couponListSortBox div:before {
          content: url("../img/common/sort_allow.svg");
          position: relative;
          left: 0;
          top: 4px; }
        .couponModal .couponModalContents .couponListSortBox div.active {
          display: flex;
          align-items: center;
          justify-content: center;
          color: #007AFF;
          cursor: pointer;
          text-decoration: underline;
          font-weight: bold; }
          .couponModal .couponModalContents .couponListSortBox div.active:before {
            content: none; }
      .couponModal .couponModalContents .couponListSortBox a {
        display: flex;
        align-items: center;
        justify-content: center;
        color: #007AFF;
        cursor: pointer;
        text-decoration: underline;
        font-weight: bold; }
        .couponModal .couponModalContents .couponListSortBox a:hover, .couponModal .couponModalContents .couponListSortBox a:active {
          opacity: 0.7; }
      .couponModal .couponModalContents .couponListSortBox .couponListSeparator {
        padding: 0 8px; }
    .couponModal .couponModalContents .couponList {
      margin: 10px 0 30px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      padding: 0 42px; }
      .couponModal .couponModalContents .couponList li {
        position: relative; }
    .couponModal .couponModalContents .itemcouponPopup {
      width: 100%;
      border: 1px solid #BDBDBD;
      border-radius: 10px;
      background: #F5F5F5;
      position: relative;
      color: #2D2D2D; }
      .couponModal .couponModalContents .itemcouponPopup:hover {
        cursor: pointer; }
      .couponModal .couponModalContents .itemcouponPopup.disabled .itemHeader,
      .couponModal .couponModalContents .itemcouponPopup.disabled .itemBody {
        opacity: 0.3; }
      .couponModal .couponModalContents .itemcouponPopup:has(input:checked) {
        background-color: #faf1f1; }
      .couponModal .couponModalContents .itemcouponPopup:has(input:disabled) {
        opacity: 0.3; }
      .couponModal .couponModalContents .itemcouponPopup .itemHeader {
        border-bottom: 1px dashed #BDBDBD;
        font-size: 14px;
        font-weight: bold;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 10px 14px; }
      .couponModal .couponModalContents .itemcouponPopup .itemCouponCheckbox label {
        background: #FFF;
        position: relative;
        display: block;
        border: 1px solid #2D2D2D;
        border-radius: 3px;
        cursor: pointer;
        left: 0;
        top: 0;
        width: 24px;
        height: 24px;
        margin-top: 0; }
        .couponModal .couponModalContents .itemcouponPopup .itemCouponCheckbox label:after {
          border-style: none none solid solid;
          content: "";
          opacity: 0;
          position: absolute;
          transform: rotate(-45deg);
          height: 5px;
          left: 4px;
          top: 6px;
          width: 12px;
          border-color: #BE1920; }
      .couponModal .couponModalContents .itemcouponPopup .itemCouponCheckbox input[type="checkbox"] {
        display: none; }
      .couponModal .couponModalContents .itemcouponPopup .itemCouponCheckbox input[type="checkbox"]:checked + label:after {
        opacity: 1; }
      .couponModal .couponModalContents .itemcouponPopup .itemCouponCheckbox input[type="checkbox"]:disabled + label {
        cursor: default; }
      .couponModal .couponModalContents .itemcouponPopup .itemBody {
        padding: 10px 14px;
        display: flex;
        justify-content: space-between;
        min-height: 80px; }
        .couponModal .couponModalContents .itemcouponPopup .itemBody .itemDiscountArea {
          justify-content: space-between;
          font-weight: bold;
          align-items: center; }
          .couponModal .couponModalContents .itemcouponPopup .itemBody .itemDiscountArea .itemDiscountAmount {
            color: #BE1920;
            font-size: 20px;
            font-weight: bold;
            text-align: right; }
      .couponModal .couponModalContents .itemcouponPopup .itemDiscountValue {
        font-size: 9px;
        color: #BE1920;
        text-align: right; }
        .couponModal .couponModalContents .itemcouponPopup .itemDiscountValue .itemCouponOff {
          font-size: 7px; }
      .couponModal .couponModalContents .itemcouponPopup .itemCouponOff {
        font-size: 12px; }
    .couponModal .couponModalContents .coupon-none {
      padding: 8px 20px;
      font-size: 14px; }
  .couponModal .modal__container.noscroll {
    overflow: hidden; }
  .couponModal .couponPopupLoading {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #FFF;
    opacity: 0.6;
    z-index: 10011; }
  .couponModal .couponModalFooter {
    position: sticky;
    z-index: 10010;
    height: 70px;
    width: 100%;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F5F5F5;
    border-top: 2px solid #BDBDBD; }
    .couponModal .couponModalFooter .couponModalCancel,
    .couponModal .couponModalFooter .couponModalApply,
    .couponModal .couponModalFooter .couponConfirmModalCancel,
    .couponModal .couponModalFooter .couponConfirmModalApply {
      min-width: 226px;
      height: 40px;
      margin: 0 10px;
      font-size: 13px;
      cursor: pointer;
      border: 1px solid #BDBDBD;
      border-radius: 5px; }
      .couponModal .couponModalFooter .couponModalCancel:hover, .couponModal .couponModalFooter .couponModalCancel:active,
      .couponModal .couponModalFooter .couponModalApply:hover,
      .couponModal .couponModalFooter .couponModalApply:active,
      .couponModal .couponModalFooter .couponConfirmModalCancel:hover,
      .couponModal .couponModalFooter .couponConfirmModalCancel:active,
      .couponModal .couponModalFooter .couponConfirmModalApply:hover,
      .couponModal .couponModalFooter .couponConfirmModalApply:active {
        opacity: 0.7; }
    .couponModal .couponModalFooter .couponModalCancel,
    .couponModal .couponModalFooter .couponConfirmModalCancel {
      font-weight: bold;
      color: #007AFF;
      background-color: #fff; }
    .couponModal .couponModalFooter .couponModalApply,
    .couponModal .couponModalFooter .couponConfirmModalApply {
      font-weight: bold;
      color: #FFF;
      background-color: #007AFF; }

.itemCouponName input {
  -webkit-appearance: auto; }

.itemCondition {
  white-space: pre-wrap;
  font-size: 9px;
  line-height: normal; }

.itemToDate {
  font-size: 9px;
  font-weight: bold; }

.count-down-timer {
  color: #BE1920;
  font-size: 11px;
  width: 100px;
  overflow: visible;
  white-space: nowrap; }
  .count-down-timer .count-number {
    font-size: 14px;
    font-weight: bold; }

@media screen and (max-width: 812px) {
  .modal__container {
    max-height: 95vh !important;
    width: 95% !important; }

  .couponBoxOpen {
    background-color: #F5F5F5 !important; }

  .couponModal .couponModalContents .couponList {
    display: block !important; }
  .couponModal .couponModalContents .couponListHeader .couponList {
    padding: 0 10px !important; }
  .couponModal .couponModalContents .couponListSortBox {
    margin-right: 10px !important; }
  .couponModal .couponModalContents .itemcouponPopup {
    margin-bottom: 10px !important; }
  .couponModal .couponModalFooter {
    background-color: white !important; }
    .couponModal .couponModalFooter button {
      border: 1px solid #F5F5F5 !important; }
    .couponModal .couponModalFooter .couponModalCancel,
    .couponModal .couponModalFooter .couponModalApply,
    .couponModal .couponModalFooter .couponConfirmModalCancel,
    .couponModal .couponModalFooter .couponConfirmModalApply {
      min-width: auto; }

  .couponModalCancel {
    height: 100% !important;
    width: 100% !important;
    margin: unset !important;
    border-radius: unset !important;
    font-weight: bold !important;
    color: #007AFF !important;
    background-color: #fff !important; }

  .count-down-timer {
    font-size: 10px; }
    .count-down-timer .count-number {
      font-size: 12px; } }