@small: ~"(max-width: 699px)";


//coupon-archive
.coupon-archive-section {
  .coupon-archive-header-img {
    margin-bottom:65px;
    margin-top:-10px;
  }

  .coupon-archive-header-img-mobile {
    margin-bottom:30px;
  }

  .coupon-content {
    .coupon-archive-title {
      font-size: 55px;
      color:#000;
      margin-top:60px;
      font-weight: 700;
    }

    .coupon-archive-desc-01 {
      font-size: 28px;
      color:#000;
      margin:10px 0px;

      b {
        color:#cd181f;
      }
    }

    .coupon-archive-coupon-container {
      margin:35px 0px 80px 0px;

      .coupon-archive-coupon-box {
        padding:15px;

        &:first-child {
          padding-left:0px;
        }
        &:last-child {
          padding-right:0px;
        }


        table {
          border-collapse: separate;
          padding:0px;
          border-spacing: 0;

          tr {
            th {
              padding:9px;
              color:#FFF;
              text-shadow: 0px 2px 0px #00000029;
              font-size: 19px;
            }

            td {
              font-size: 18px;
              color:#000;
              padding:0px;
              padding-bottom:15px;

              span {
                font-size: 69px;
              }
            }
          }
        }

        &:nth-child(1) table tr {
          th {
            background-color: #61C15E;
            border: 1px solid #61C15E;
            border-radius: 5px 5px 0px 0px;
          }

          td {
            background-color: #E1F9E0;
            border: 1px solid #61C15E;
            border-radius: 0px 0px 5px 5px;

            span {
              color:#309F2C;
            }
          }
        }

        &:nth-child(2) table tr {
          th {
            background-color: #F68142;
            border: 1px solid #F68142;
            border-radius: 5px 5px 0px 0px;
          }

          td {
            background-color: #FCE4D7;
            border: 1px solid #F68142;
            border-radius: 0px 0px 5px 5px;

            span {
              color:#E95200;
            }
          }
        }

        &:nth-child(3) table tr {
          th {
            background-color: #64A8D6;
            border: 1px solid #64A8D6;
            border-radius: 5px 5px 0px 0px;
          }

          td {
            background-color: #E2FEF9;
            border: 1px solid #64A8D6;
            border-radius: 0px 0px 5px 5px;

            span {
              color:#368EC9;
            }
          }
        }

        .coupon-archive-code {
          font-size: 22px;
          font-weight: 700;
          margin:20px 0px 10px 0px;
          border:0px;
          background-color: white;
        }

        .coupon-archive-btn-copy {
          color:#FFF;
          font-size: 24px;
          border-radius: 3px;
          width:100%;
          padding:10px;
          cursor:pointer;
          text-align: center;

          .coupon-archive-btn-text-copied {
            display: none;
          }
        }

        .coupon-archive-btn-copied {
          color:#FFF;
          font-size: 24px;
          border-radius: 3px;
          width:100%;
          padding:10px;
          text-align: center;

          .coupon-archive-btn-text-default {
            display: none;
          }

          .coupon-archive-btn-text-copied {
            display: block;
          }
        }

        &:nth-child(1) .coupon-archive-btn-copy,
        &:nth-child(1) .coupon-archive-btn-copied {
          background-color: #61C15E;

          &:hover {
            background-color: #309F2C;
          }
        }

        &:nth-child(2) .coupon-archive-btn-copy,
        &:nth-child(2) .coupon-archive-btn-copied {
          background-color: #F68142;

          &:hover {
            background-color: #E95200;
          }
        }

        &:nth-child(3) .coupon-archive-btn-copy,
        &:nth-child(3) .coupon-archive-btn-copied {
          background-color: #64A8D6;

          &:hover {
            background-color: #368EC9;
          }
        }
      }
    }

    .coupon-archive-disclaimer-title {
      font-size: 20px;
      color:#000;
      margin:20px 0px 10px 0px;
    }

    .coupon-archive-disclaimer {
      font-size: 18px;
      color:#474747;
    }

    @media @small {
      .coupon-archive-title {
        font-size: 30px;
        padding:0px 15px;
      }

      .coupon-archive-desc-01 {
        font-size: 20px;
        padding:0px 15px;
      }

      .coupon-archive-coupon-container {
        margin:10px 0px;

        .coupon-archive-coupon-box {
          border-bottom: 1px solid #DFDFDF;
          padding:25px 15px !important;

          &:last-child {
            border-bottom: 0px;
          }

          .coupon-archive-code {
            color:#000;
            margin:10px;
          }

        }
      }

      .coupon-archive-disclaimer-title {
        font-size: 22px;
        color:#000;
        margin:20px 0px 10px 0px;
        padding:0px 15px;
      }

      .coupon-archive-disclaimer {
        font-size: 17px;
        color:#474747;
        padding:0px 15px;
      }
    }
  }

}
//coupon-archive END
.friend-referral-section {
  .friend-referral-btn{
    background-color: #cd181f;
    cursor: pointer;
    font-size: 34.14px;
    font-weight: bold;
    padding: 20.484px;
    color: white;
    margin: 0 auto;
    border-radius: 45px;
    max-width: 40%;
    text-align: center;
  }
  
  .friend-referral-btn-mobile{
    background-color: #cd181f;
    cursor: pointer;
    font-size: 20px;
    font-weight: bold;
    padding: 10px;
    color: white;
    margin: 0 auto;
    border-radius: 45px;
    max-width: 90%;
    text-align: center;
  }
  
}

//friend_referral
.list-section-01 {
  padding-top: 150px;
  padding-bottom: 90px;
  
  .friend-referral-header-img {
    margin-bottom:90px;
    margin-top:-10px;
  }

  .friend-referral-header-img-mobile {
    margin-bottom:45px;
  }

  .friend-referral-content {
    .friend-referral-title {
      font-size: 55px;
      color:#000;
      margin-top:60px;
      font-weight: 700;
    }

    .friend-referral-desc-01 {
      font-size: 55px;
      text-align: center;
      color:#000;
    }

    .friend-referral-desc-02 {
      font-size: 30px;
      text-align: center;
      color:#000;
    }

    .friend-referral-desc-mobile-01 {
      text-align: center;
      color:#000;
      padding-left: 15px;
      padding-right: 15px;
      font-size: clamp(20px, 8vw, 30px);
    }

    .friend-referral-desc-mobile-02 {
      text-align: center;
      color:#000;
      padding-left: 15px;
      padding-right: 15px;
      font-size: clamp(14px, 8vw, 17px);
    }

    .friend-referral-img-desc-01 {
      font-size: 45px;
      text-align: center;
      color:#000;
    }

    .friend-referral-img-desc-02 {
      font-size: 33px;
      text-align: center;
      color:#000;
      margin-bottom:40px;
    }

    .friend-referral-img-desc-mobile-01 {
      text-align: center;
      color:#000;
      padding-left: 15px;
      padding-right: 15px;
      padding-top: 15px;
      font-size: clamp(14px, 8vw, 30px);
    }

    .friend-referral-img-desc-mobile-02 {
      text-align: center;
      color:#000;
      padding-left: 15px;
      padding-right: 15px;
      font-size: clamp(14px, 8vw, 25px);
    }

    .friend-referral-img-01 {
      margin-bottom:90px;
      margin-top:90px;
    }

    .friend-referral-img-mobile-01 {
      margin-bottom:30px;
      width: calc(100% - 20px) !important;
      margin: 0 auto;
      padding-right: 10px;
    }

  }

}
.list-section-02{
  padding-top: 60px;
  padding-bottom: 90px;
  background-color: #FCF2D9;
  
  .friend-referral-desc-03 {
    font-size: 45px;
    text-align: center;
    color:#CD181F;
  }

  .friend-referral-desc-04 {
    font-size: 22px;
    text-align: center;
    color:#000;
  }

  .friend-referral-desc-mobile-03{
    text-align: center;
    color:#CD181F;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(14px, 8vw, 30px);
  }

  .friend-referral-desc-mobile-04{
    text-align: center;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(14px, 8vw, 17px);
  }

  .friend-referral-table{
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
    th {
      padding:9px;
      text-align: center;
      background-color: #CD181F;
      color: white;
      font-size: 23px;
    }
    th:nth-child(1) {
      width: 200px;
    }
  
    th:nth-child(2) {
      width: 900px;
    }
  
    th:nth-child(3) {
      width: 20%;
    }
    td {
      padding:9px;
      text-align: center;
      background-color: white;
      color: #000;
      font-size: 30px;
      border-bottom: 3px solid rgb(192, 191, 191);
    }
    th, td {
      box-sizing: border-box;
    }
  }
  .friend-referral-table-mobile{
    // width: calc(100% - 20px);
    margin: 0 auto;
    padding-right: 10px;
    padding-left: 10px;
    th {
      padding:5px;
      text-align: center;
      background-color: #CD181F;
      color: white;
      font-size: 14px;
    }
    th:nth-child(1) {
      width: 20%;
    }
  
    th:nth-child(2) {
      width: 60%;
    }
  
    th:nth-child(3) {
      width: 20%;
    }
    td {
      padding:9px;
      text-align: center;
      background-color: white;
      color: #000;
      font-size: 16px;
      border-bottom: 1px solid rgb(192, 191, 191);
      font-weight: bold;
    }
  }
  .referral_email{
    font-size: 20px;
  }
}
.list-section-03{
  padding-top: 60px;
  padding-bottom: 90px;
  background-color: #F2F2F2;
  .friend-referral-desc-05{
    font-size: 45px;
    text-align: center;
    color:#000;
  }
  .friend-referral-img-02{
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .friend-referral-img-mobile-02 {
    margin-bottom:30px;
    width: calc(100% - 20px) !important;
    margin: 0 auto;
    padding-right: 10px;
    padding-bottom: 15px;
  }
  .friend-referral-desc-mobile-05{
    text-align: center;
    color:#000;
    padding-left: 10px;
    padding-right: 10px;
    font-size: clamp(14px, 8vw, 30px);
  }
  .friend-referral-desc-mobile-06{
    text-align: left !important;
    color:#000;
    padding-left: 10px;
    padding-right: 10px;
    font-size: clamp(14px, 8vw, 20px);
  }
  .friend-referral-desc-mobile-07{
    text-align: left !important;
    color:#000;
    padding-left: 10px;
    padding-right: 10px;
    font-size: clamp(14px, 8vw, 20px);
  }
  .friend-referral-img-desc-03 {
    font-size: 20px;
    text-align: left !important;
    color:#000;
  }
}
.list-section-04{
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #FEF5E1;
  .friend-referral-desc-06{
    font-size: 45px;
    text-align: center;
    color:#000;
  }
  .friend-referral-container {
    margin-top:35px;
    display: flex !important;
    justify-content: space-between; /* 왼쪽, 오른쪽 정렬 */
    flex-wrap: wrap; /* 모바일에서 줄바꿈 */
  }
  
  .friend-referral-box {
    width: 48%; /* 좌우 배치를 위해 적절한 너비 설정 */
  }
  
  // .friend-referral-container {
  //   margin-top:35px;

  //   .friend-referral-box {
  //     padding:15px;

  //     &:first-child {
  //       padding-left:0px;
  //     }
  //     &:last-child {
  //       padding-right:0px;
  //     }
  //   }
  // }
  .friend-referral-img-03, .friend-referral-img-04{
    padding-top: 60px;
    padding-bottom: 60px;
    padding-left: 150px;
    padding-right: 150px;
  }
  .friend-referral-box-desc-01, .friend-referral-box-desc-02{
    font-size: 35px;
    text-align: center;
    color:#000;
  }
  .friend-referral-box-desc-sub-01, .friend-referral-box-desc-sub-02{
    padding-top: 35px;
    font-size: 25px;
    text-align: center;
    color:#000;
  }

  .friend-referral-desc-mobile-08{
    text-align: center;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(20px, 8vw, 30px);
  }

  .friend-referral-img-desc-mobile-03 {
    text-align: center;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(20px, 8vw, 30px);
  }
  
  .friend-referral-img-desc-mobile-04 {
    text-align: center;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(14px, 8vw, 20px);
  }
  
  .friend-referral-img-mobile-03 {
    margin-bottom:30px;
    width: calc(100% - 20px) !important;
    margin: 0 auto;
    padding-right: 10px;
  }

  .friend-referral-img-desc-mobile-05 {
    text-align: center;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(20px, 8vw, 30px);
  }
  
  .friend-referral-img-desc-mobile-06 {
    text-align: center;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(14px, 8vw, 20px);
  }
  
  .friend-referral-img-mobile-04 {
    margin-bottom:30px;
    width: calc(100% - 20px) !important;
    margin: 0 auto;
    padding-right: 10px;
  }
}
.list-section-05{
  padding-top: 80px;
  padding-bottom: 70px;
  background-color: white;
  .friend-referral-desc-07{
    padding-bottom: 70px;
    font-size: 45px;
    text-align: center;
    color:#000;
  }
  .friend-referral-desc-08{
    font-size: 23px;
    text-align: left !important;
    color:#000;
  }

  .friend-referral-desc-mobile-09{
    text-align: center;
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    font-size: clamp(20px, 8vw, 30px);
  }
  .friend-referral-desc-mobile-10{
    color:#000;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left !important;
    font-size: clamp(14px, 8vw, 16px);
  }
}
@media @small {
  .list-section-01 {
    padding-top: 0px !important;
  }
  .friend-referral-section {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .friend-referral-container{
    margin-top: 0px !important;
  }
  .referral_email{
    font-size: 10px !important;
  }
}
//friend_referral END

//caforia-benefits
.caforia-plus-membership-section {
  margin-bottom:-60px !important;
  .caforia-plus-membership-banner{
    max-width: 1145px;
    width: 100%;
    margin: auto;
  }
  .caforia-plus-membership-banner img{
    width: 100%;
    height: auto; 
    display: block; 
  }
  .content-body{
    max-width: 1145px;
    width: 100%;
    margin: auto;
  }
  .content-1{
    padding: 85px 0px;
    background-color: #FFFDE2;
    text-align: center;
    font-size: 21px;
    font-weight: 600;
  }
  .plus-container{
    margin-right: 0px;
    margin-left: 0px;
  }
  .plus-box{
    padding-right: 10px;
    padding-left: 10px;
  }
  .plus-content{
    background-color: #FFFFFF;
    box-shadow: 0px 0px 10px #B4AC474D;
    border-radius: 10px;
    opacity: 1;
  }
  .plus-text-container{
    height: 81px;
  }
  .plus-img-container{
    padding: 40px 40px;
  }
  .content-2{
    padding: 85px 0px;
    text-align: center;
    font-size: 21px;
    font-weight: bold;
  }
  .price-tag-text{
    padding: 25px 0px;
  }
  .price-tag-btn{
    padding: 20px 0px;
  }
  .btn-plus-member{
    padding: 20px 54px;
    background: #CD181F;
    border-radius: 10px;
    opacity: 1;
    font-size: 30px;
    color: #FFFFFF;
    font-weight: normal;
  }
  .content-3{
    padding: 85px 0px;
    background-color: #F8F8F8;
    font-size: 22px;
  }
  .faq-title{
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-bottom: 40px;
  }
  .gray-box{
    background: #E5E5E5;
    opacity: 1;
    padding: 20px 27px;
    font-weight: bold;
  }
  .white-box{
    background: #FFFFFF;
    opacity: 1;
    border-bottom: 2px solid #E5E5E5;
    padding: 20px 27px;
  }
  .content-4{
    padding: 85px 0px;
    font-size: 20px;
  }

  @media @small {
    .content-1, .content-2, .content-3{
      padding: 40px 0px;
    }
    .content-1{
      font-size: 17px;
    }
    .plus-content{
      margin-bottom: 10px;
    }
    .plus-text-container{
      height: 70px;
    }
    .content-2{
      font-size: 20px;
    }
    .price-tag-btn{
      padding: 10px;
    }
    .btn-plus-member{
      padding: 10px 20px;
      font-size: 20px;
    }
    .terms-conditions-text{
      padding: 0px 27px;
    }
  }
}
//caforia-benefits
.caforia-benefits-section {
  margin-bottom:-60px !important;

  .pc-container {
    .caforia-benefits-pc-header-img {
      margin-top:-7px;
    }

    .caforia-benefits-title {
      background-color: black;
      padding:10px 0px;

      div {
        padding:30px;
        font-size: 40px;
        color:white;
        text-align: center;
      }
    }

    .content {
      background-color: #FFE8BE;

      .content-body {
        max-width: 1145px;
        width:100%;
        margin:auto;
        padding:50px 0px;

        .caforia-benefits-subtitle {
          text-align: center;
          font-size: 45px;
          color:#000;
          margin-bottom:10px;
          padding-top:25px;

          &:first-child {
            padding-top:0px;
          }
        }

        .caforia-benefits-card {
          border: 4px solid #DBBB83;
          border-radius: 30px;
          padding:25px;
          background-color: white;
          margin-bottom: 25px;

          .card-img-block {
            width:150px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
              width:116px;
            }
          }

          .card-desc-block {
            padding-left:20px;

            .card-desc-title {
              font-size: 32px;
              font-weight: 700;
            }

            .card-desc-content {
              font-size: 22px;
              margin-top:5px;
            }

            .card-desc-btn {
              border-radius: 7px;
              background-color: #F75C60;
              color:white;
              width:250px;
              text-align: center;
              padding:5px;
              cursor: pointer;
              margin-top:15px;
              font-size: 23px;

              &:hover {
                background-color: #cd181f;
              }
            }
          }
        }
      }
    }
  }


  .container {
    #content {
      text-align: center;
      img {
        max-width: 445px;
      }

      a {
        img:hover {
          opacity: 0.6;
        }
      }
    }
  }

}
//end caforia-benefits