#container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0 auto;
}


.idx-content-body {
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding-top: 210px;
  padding-bottom: 70px;

}

.main-content-body {
  position: relative;
  height: 100%;
  min-height: 100vh;
  padding-top: 210px;
  padding-bottom: 50px;
}

/****************************************************************************************************************/
/********공통사항************************************************************************************************/

.row-box {
  width: 1380px !important;
  margin: 0 auto !important;
  /* max-width: 100%;
  min-width: 320px; */
  /* padding-left: 16px;
  padding-right: 16px; */
}

/***/
.h1-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 26px;

  .h1 {
    font-size: 34px;
    letter-spacing: -2px;
    font-weight: 900;
  }


  .description {
    font-size: 18px;
    line-height: 1.4;
    color: var(--gray-700);
  }

  &.center {
    align-items: center
  }
}

.h2-title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 26px;
  margin-bottom: 26px;
  font-weight: 800;
  letter-spacing: -1.2px;

  .search-number {
    font-size: 14px;
    color: var(--gray-600);
  }

  .desc {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.7px;
    color: var(--gray-600);
  }
}

.h3-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  margin-bottom: 16px;
  font-weight: 700;
}


/*뱃지*/
.badge-group {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px;
  width: 100%;
  gap: 4px;
  z-index: 100;

  &>span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    padding: 0 8px 0 5px;
    border-radius: 4px;
    font-size: 13px;
  }

  .badge-rec {
    color: var(--white);
    background: var(--primary-500);

    &::before {
      content: "🎯";
    }
  }

  .badge-close {
    background: rgb(var(--rgb-white), 30%);
    color: var(--gray-700);

    &::before {
      content: "💤";
    }
  }

  .badge-ing {
    color: var(--red);
    background: #FFD2C3;
  }

  .badge-premium {
    background: #FFF0D8;
    color: #C77420;
  }
}


/**/
.sns-ico-group {

  &>span,
  &>a {
    display: flex;
    font-size: 0;

    &::before {
      width: 22px;
      height: 22px;
      display: block;
      border-radius: 6px;
      overflow: hidden;
    }
  }

  &.button {
    display: flex;
    gap: 10px;

    &>a {
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 14px;
      border-radius: 100px;
      border: 1px solid var(--gray-200);
      padding: 8px 16px;
    }
  }


  .ico-instagram {
    &::before {
      content: "";
      background: url("../images/sns-instagram.png") no-repeat;
      background-size: 100%;
    }
  }

  .ico-naver {
    &::before {
      content: "";
      background: url("../images/sns-naver.png") no-repeat;
      background-size: 100%;
    }
  }

  .ico-youtube {
    &::before {
      content: "";
      background: url("../images/sns-youtube.png") no-repeat;
      background-size: 100%;
    }
  }

  .ico-kakao {
    &::before {
      content: "";
      background: url("../images/sns-kakao.png") no-repeat;
      background-size: 100%;
    }
  }
}


/* 찜하기 아이콘 */
.badge-zzim {
  display: flex;

  .trigger[type="checkbox"] {
    display: none !important;

    +.Link span {
      display: inline-block;
      background: url("../images/ico-zzim-off.svg") no-repeat center;
      background-size: 100%;
      width: 28px;
      height: 28px;
      filter: var(--filter-gray-700);
      cursor: pointer;
    }

    &:checked+.Link span {
      background: url("../images/ico-zzim-on.svg") no-repeat center;
      background-size: 100%;
      filter: var(--filter-red);
    }
  }
}

/**/
.filter-container {
  display: flex;
  gap: 4px;

  &>a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    font-size: 14px;
    gap: 4px;

    &::after {
      content: "ㅣ";
      font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--gray-300);
    }

    &:last-child {
      &::after {
        all: unset;
      }
    }
  }

  .active {
    color: var(--gray-900);
    font-weight: 700;
  }
}


/**/
.common-tag {
  display: flex;
  gap: 4px;

  &>span {
    display: flex;
    align-items: center;
    border: 1px solid var(--gray-200);
    height: 24px;
    padding: 0 10px;
    border-radius: 100px;
    color: var(--gray-700);
    font-size: 12px;
  }
}

/***/
.fix-dot {
  position: relative;

  &::after {
    content: "●";
    font-size: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary-orange-500);
    position: absolute;
    top: -4px;
    right: -10px;
  }
}

/*****************************************************************************************************************/
/****** header ***************************************************************************************************/

.sec-head-ad-wrap {
  background: var(--primary-900);
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);

  .top-advertisement {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn-close {
    font-size: 0;

    &::after {
      content: "";
      background: url("../images/ico-close.svg") no-repeat center;
      background-size: 100%;
      width: 15px;
      height: 15px;
      display: flex;
      filter: var(--filter-white);
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
    }
  }
}


#header {
  background: var(--white);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999;

  .head-logo-container {
    padding: 14px 0 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    background: url('../images/logo.png')no-repeat center;
    width: 220px;
    height: 46px;
    background-size: 100%;
    text-indent: -9999999999px;
    display: flex;
  }

  .sec-gnb-wrap {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .top-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav-menu-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      gap: 36px;

      &>a {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 54px;
        font-size: 17px;
        font-weight: 800;
        flex-grow: 1 !important;

        &.active {
          font-weight: 900;
          color: var(--primary-500);
        }
      }
    }

    .utill-menu {
      display: flex;
      gap: 6px;

      &>a {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 100px;
        height: 30px;
        padding: 0 20px;
      }

      .btn-my {
        background: var(--primary-500);
        color: var(--white);
      }

      .btn-moonplug {
        border: 1px solid var(--gray-300);
      }
    }
  }
}

/***/
.user-wrap {
  position: relative;
  display: flex;
  gap: 14px;

  &>a {
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 12px;
      right: -10px;
      width: 4px;
      height: 4px;
      background: var(--color300);
      border-radius: 100px;
    }
  }

  .btn-login {
    color: var(--gray-800);
  }

  .btn-join {
    color: var(--primary-500);
  }

  .user-name {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800);
  }

  .logout-form {
    display: inline-block;
    margin: 0;
    padding: 0;
  }

  .btn-logout {
    background: none;
    border: none;
    color: var(--gray-800);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: none;
    transition: color 0.2s;
  }

  .btn-logout:hover {
    color: var(--primary-500);
  }

  .btn-logout.color-white {
    color: var(--white);
  }

  .btn-logout.color-white:hover {
    color: var(--primary-200);
  }

  .user-name.color-white {
    color: var(--white);
  }
}


/****************************************************************************************************************/
/****** footer ***************************************************************************************************/
#footer {
  background: var(--white);
  padding: 20px 0;
  text-align: left;

  .address {
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--gray-600);
    font-size: 12px;

    &>li {
      display: flex;
      gap: 6px;

      &.company {
        font-size: 14px;
        padding-bottom: 4px;
      }

      &>span {
        position: relative;
        display: flex;
        gap: 6px;

        &::after {
          content: "ㅣ";
          color: var(--gray-200);
        }

        &:last-child::after {
          all: unset;
        }
      }
    }
  }
}

/****************************************************************************************************************/
/****** 비주얼 영역 ***************************************************************************************************/

.mySwiper-header-visual {
  height: 450px;

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--gray-800);
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {}

  .swiper-wrapper {
    .swiper-slide {
      &>img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        overflow: hidden;
      }
    }
  }
}

/****************************************************************************************************************/
/****** 베스트 아이템 *******************************************************************************************/

.mySwiper-default {
  .swiper-slide {}

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--gray-800);
    top: 32%;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 18px;
  }
}

.thumb-card-ty {
  position: relative;
  height: 410px;

  .item-photo-box {
    position: relative;
    margin-bottom: 16px;
    border-radius: 6px;
    overflow: hidden;
  }

  .badge-zzim {
    position: absolute;
    bottom: 10px;
    right: 10px;
    display: flex;
  }

  .item-info-area {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .pro-name {
      font-size: 14px;
      line-height: 1.3;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      word-break: keep-all;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .pro-info-box {
      display: flex;
      flex-direction: column;
      gap: 8px;

      .pf-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 13px;

        .subj {
          display: flex;
          gap: 8px;
          color: var(--gray-700);

        }

        .cont {
          display: flex;
          gap: 3px;
          color: var(--gray-600);
          letter-spacing: -1px;
        }

        .d-day {
          font-weight: 800;
          color: var(--secondary-orange-500);
        }

        .date {
          color: var(--gray-900);
          font-weight: 800;
        }

        .person1 {
          color: var(--secondary-orange-500);
        }

        .person2 {}

        .price {
          font-weight: 900;
          color: var(--primary-500);
        }

        .price-before {
          text-decoration: line-through;
          font-weight: 600;
          font-size: 12px;

          .won {
            font-size: 13px;
            padding-left: 1px;
            display: inline-block;
          }
        }

        .price-after {
          font-weight: 800;
          color: var(--gray-900);

          .won {
            padding-left: 1px;
            display: inline-block;
          }
        }

        .sale {
          font-weight: 800;
          color: var(--secondary-orange-500);
        }
      }
    }
  }
}

/****************************************************************************************************************/
/****** 매치업 핫 인플루언서 ***********************************************************************************/
.viewer-cardType-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;

  &.col-align {
    display: flex;
    flex-direction: column;
  }

  .cc--item {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--white);
    border-radius: 6px;
    border: 1px solid var(--gray-300);
    padding: 16px;
  }

  .container-info-area {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  /**크리에이터 페이지**/
  .row-align {
    display: flex;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    .creator-info-left {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .creator-info-right {
      display: flex;
      align-items: center;
      gap: 16px;
      flex-shrink: 0;
    }

    .user-photo {
      flex-shrink: 0;
    }

    .user-info {
      flex: 0 0 auto;
      min-width: 180px;
    }

    .container-stats-area {
      flex: 0 0 500px;
      gap: 20px;
      padding: 12px 16px !important;
      min-width: 500px;
      max-width: 500px;
    }

    .badge-zzim {
      flex-shrink: 0;
    }
  }


  .user-photo {
    position: relative;
    display: flex;
    width: 80px;
    height: 80px;

    .cover-img {
      border-radius: 100px;
      overflow: hidden;
    }
  }

  .badge-ranking {
    position: absolute;
    top: 0;
    left: -4px;
    border-radius: 4px;
    background: #FEB63D;
    transform: skewX(-7deg);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 20px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 800;
  }

  .user-info {
    display: flex;
    flex-direction: column;
    gap: 10px;

    .user-id {
      font-weight: 800;
      font-size: 16px;
    }

    .sns-ico-group {
      display: flex;
      align-items: center;
      gap: 10px;

      &>span {
        align-items: center;
        gap: 4px;
        font-size: 14px !important;

        &::before {
          width: 18px;
          height: 18px;
          border-radius: 4px;
        }
      }
    }
  }

  .container-stats-area {
    display: flex;
    justify-content: space-between;
    background: var(--gray-100);
    border-radius: 4px;
    padding: 10px;
    gap: 10px;


    &>p {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 8px;
      flex: 1 1 0;
      min-width: 0;
      max-width: 120px;
      text-align: center;
    }

    .tit {
      font-size: 12px;
      color: var(--gray-600);
      white-space: nowrap;
    }

    .number {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-900);
      white-space: nowrap;

      &::before {
        content: "";
        width: 15px;
        height: 15px;
        background-size: 100%;
        flex-shrink: 0;
      }
    }

    .likes .number::before {
      background: url("../images/ico-heart.svg") no-repeat;
    }

    .partnership .number::before {
      background: url("../images/ico-user.svg") no-repeat;
    }

    .revenue .number::before {
      background: url("../images/ico-graph.svg") no-repeat;
    }

    .proposal .number::before {
      background: url("../images/ico-dollar.svg") no-repeat;
    }
  }

  .btn-wrap {
    display: flex;
    gap: 6px;

    &>a {
      width: 100%;
    }
  }
}


/****************************************************************************************************************/
/****** 사이드/side **********************************************************************************************/

.detail-layout-container {
  display: flex;
  column-gap: 50px;
  height: 100%;
  width: 100%;


  .side-wing-bar {
    /* border: 1px solid #000; */
    width: 250px;
  }

  .main-con-wrap {
    /* border: 1px solid #000; */
    width: calc(1350px - 250px);

  }
}

.my-layout-container {
  display: flex;
  flex-direction: column;

  .flex-row {
    display: flex;
    gap: 30px;
  }

  .flex-col {
    display: flex;
    gap: 30px;
  }

  .my-side-wing-bar {
    width: 450px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid var(--gray-300);
  }

  .my-main-con-wrap {
    width: calc(1350px - 460px);

  }
}

/**/
.side-filter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  border-bottom: 1px solid var(--gray-300);
  font-weight: 800;
  font-size: 17px;

  .btn-filter-reset {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    cursor: pointer;
    color: var(--gray-600);
    border: none;
    font-weight: 500;

    &::hover {
      background-color: #0056b3;
    }

    .reset-icon {
      width: 18px;
      height: 18px;
      fill: var(--gray-300);
    }

    .rotate {
      animation: spin 0.5s linear;
      fill: var(--gray-900);
    }
  }
}


@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


/***아코디언 메뉴****/
.accordion-menu {
  width: 100%;

  .acc-item-wrap {
    &.open {
      .dropdownlink {
        font-weight: 800;
        color: var(--black);

        &::after {
          transform: rotate(180deg);
          filter: var(--filter-gray-900);
        }
      }
    }

    &:last-child {
      .dropdownlink {}
    }

    .dropdownlink {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 34px;
      position: relative;
      transition: all 0.4s ease-out;
      border-bottom: 1px solid transparent;
      cursor: pointer;
      font-size: 15px;
      font-weight: 800;

      &::after {
        content: "";
        background: url('../images/arrow-top.svg')no-repeat center;
        width: 12px;
        height: 12px;
        filter: var(--filter-gray-300);
      }
    }
  }

  .submenuItems {
    display: none;
    padding: 4px 0;

    .cate-itm {
      color: var(--gray-700);

      &>a {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 26px;
        font-size: 13px;
        transition: all 0.4s ease-out;

        .number {
          color: var(--gray-500);
          font-size: 12px;
        }

        &::before {
          content: "";
          background: url('../images/ico-ellipse-check.svg')no-repeat center;
          background-size: 100%;
          width: 14px;
          height: 14px;
          filter: var(--filter-gray-300);
          display: flex;
        }

        &:hover {}

        &.active {
          &::before {
            filter: var(--filter-gray-900);
          }
        }
      }
    }
  }

  .border-top {
    border-top: 1px solid var(--gray-300);
  }
}

/****** ai 카드  ***************************************************************************************************/
.sec-sub-header-area {
  height: 200px;
  margin-bottom: 50px;
}

.mySwiper-countdown {

  .swiper-button-next,
  .swiper-button-prev {
    color: var(--primary-500);
    background: rgb(var(--rgb-white), 20%);
    border-radius: 100px;
    width: 50px;
    height: 50px;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    font-size: 22px;
  }

  .swiper-button-next.swiper-button-disabled,
  .swiper-button-prev.swiper-button-disabled {
    color: var(--gray-400);
    opacity: 1;

  }

  width: 100%;
  margin: 70px 0 !important;

}

.countdown-item {
  position: relative;
  display: flex;

  border-radius: 8px;
  background: var(--white);
  overflow: hidden;
  border: 1px solid var(--gray-300);

  .thumb-box {
    width: 448px;
    height: 448px;
    position: relative;

    overflow: hidden;

    .overlay {
      position: absolute;
      left: 0px;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.4);
      width: 100%;
      height: 40px;
      color: var(--white);
    }
  }

  .product-info-area {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 30px;
    position: relative;
    flex: 1 0 0;
    padding: 50px 60px;


    .heading-title {
      display: flex;
      flex-direction: column;
      gap: 16px;
      position: relative;

      .heading-1 {
        font-size: 26px;
        font-weight: 800;
      }

      .heading-2 {
        font-size: 15px;
        color: var(--gray-600);
      }
    }

    .time-alarm {
      display: flex;
      align-items: center;
      gap: 9px;
      font-weight: 900;
      position: relative;
      font-size: 32px;

      &::before {
        content: "";
        background: url('../images/ico-alarm.svg')no-repeat center;
        width: 36px;
        height: 36px;
        filter: var(--filter-primary-600);
      }

      &>span {}
    }

    .pro-name-area {
      display: flex;
      flex-direction: column;
      gap: 8px;
      position: relative;

      .pro-heading {
        font-size: 17px;
        font-weight: 800;
      }

      .pro-caption {
        font-size: 14px;
        color: var(--gray-600);
      }
    }

    .price-box {
      display: flex;
      flex-direction: column;
      gap: 8px;


      .before-price {
        color: var(--gray-500);
        font-size: 14px;
        text-decoration: line-through;
        position: relative;
        display: flex;
        align-items: center;

      }

      .after--cont {
        display: flex;
        align-items: center;
        gap: 10px;


        .after-price {
          display: flex;
          font-size: 20px;
          align-items: center;
          font-weight: 900;
        }

        .sale {
          color: #fa622f;
          font-size: 20px;
          display: flex;
          align-items: center;
          font-weight: 900;
        }
      }
    }

    .btn-wrap {
      display: flex;
      gap: 6px;
      width: 100%;

      &>a {
        width: 100%;
      }
    }
  }
}

/**/
.sub-menu-list {
  &>a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    height: 54px;
    padding: 0px 16px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 15px;

    &::after {
      content: "";
      background: url("../images/arrow-right.svg") no-repeat center;
      background-size: 100%;
      width: 12px;
      height: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      filter: var(--filter-gray-400);
    }
  }

  .active {
    background: var(--gray-200);

    &::after {
      filter: var(--filter-gray-900);
    }
  }
}

.side-cs-link {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: rgb(var(--rgb-primary-500), 10%);
  margin-top: 50px;

  &>h1 {
    font-size: 15px;
    font-weight: 800;
  }

  &>h2 {
    font-size: 13px;
  }
}


/****** 카드리스트 ***********************************************************************************************/

.cardList-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px 20px;
}

/****************************************************************************************************************/
/****** 게시판 **************************************************************************************************/
/*아코디언 스타일 게시판*/

.notice-board {

  .acc--head,
  .button-acc-title {
    grid-template-columns: 1.2fr 8fr 1fr 1fr;
  }
}

.faq-board {

  .acc--head,
  .button-acc-title {
    grid-template-columns: 0.7fr 1.5fr 8fr;
  }
}

.inquiry-board {

  .acc--head,
  .button-acc-title {
    grid-template-columns: 0.7fr 7fr 1fr 1.2fr 1fr;
  }
}

/**/
.accordion-board-container {
  .acc--head {
    display: grid;
    align-items: center;
    justify-items: center;
    height: 54px;
    padding: 0 !important;
    background: var(--gray-300);
    border-top: 1px solid var(--gray-400);
    border-bottom: 1px solid var(--gray-400);

    .th {
      display: flex;
      justify-content: center;
      position: relative;
      width: 100%;
      color: var(--black);
      padding: 0 10px;

      &::after {
        content: "";
        width: 1px;
        height: 54px;
        background: var(--gray-400);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(-50%, -50%);
      }

      &:last-child&::after {
        all: unset;
      }
    }
  }
}

.accordion-caution {
  .button-acc-title {
    display: grid;
    align-items: center;
    justify-items: center;
    position: relative;
    width: 100%;
    height: 54px;
    font-size: 16px;
    border-bottom: 1px solid var(--gray-200);
    transition: all 0.4s ease-out;
    background: var(--white);

    &.active,
    &:hover {
      background: rgb(var(--rgb-primary-500), 5%);
    }

    &>p {
      position: relative;
      display: flex;
      width: 100%;
      color: var(--gray-700);
      font-size: 13px;
      padding: 0 10px;

      &::after {
        content: "";
        width: 1px;
        height: 52px;
        background: var(--gray-300);
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(-50%, -50%);
      }

      &:last-child&::after {
        all: unset;
      }
    }

    .title {
      justify-items: start;
      font-size: 15px;
      color: var(--gray-900);
    }

    .pending {
      color: var(--gray-800);
    }

    .complete {
      color: var(--secondary-orange-500);
    }

    .btn-wrap {
      display: flex;
      gap: 4px;

      &>a {
        display: flex;
        align-items: center;
        height: 26px;
        padding: 0 5px;
        border-radius: 3px;
        font-size: 12px;
        background: var(--white);
      }

      .btn-edit {
        border: 1px solid var(--primary-500);
        color: var(--primary-500);
      }

      .btn-delete {
        color: var(--red);
        border: 1px solid var(--red);
      }
    }

    .content {
      display: block;
    }
  }

  .acc-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    font-size: 16px;
    line-height: 130%;
    color: var(--gray-700);

    &.open {
      max-height: 2000px;
    }

    .in-con-box {
      border-bottom: 1px solid var(--gray-200);
      background: var(--white);
      padding: 20px;
      line-height: 1.8;

      p {
        margin: 0 0 10px 0;
        
        &:last-child {
          margin-bottom: 0;
        }
      }

      .event-img {
        padding-top: 30px;
      }
    }

    .text-in-content {

      line-height: 1.8;
    }

    .reply-content {
      margin-top: 20px;
      background: var(--gray-100);
      gap: 16px;
      padding: 14px 20px;
      color: var(--gray-900);

      .fix-utill-info {
        display: flex;
        gap: 4px;
        padding-bottom: 10px;

        .write {
          color: var(--gray-900);
          font-size: 12px;
        }

        .date {
          color: var(--gray-600);
          font-size: 12px;
        }
      }
    }
  }
}


/****페이지네이션 ******/
.pagination {
  display: flex;
  text-align: center;
  justify-content: center;
  gap: 6px;
  font-size: 0;
  padding-top: 50px;

  & a {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    width: 36px;
    height: 36px;
    font-family: "Montserrat", sans-serif;
    transition: background-color 0.3s;
    border: 1px solid var(--gray-300);
    background: var(--white);
    border-radius: 4px;
  }

  & a.on {
    background: var(--primary-500);
    color: var(--white);
    border: 1px solid var(--primary-500);
  }

  .disabled {
    background: var(--gray-300);
    border: 0;

    & i {
      filter: var(--filter-gray-400) !important;
    }
  }

  .active {
    background: var(--white);
    border: 0;
    border: 1px solid var(--primary-500);

    & i {
      filter: var(--filter-primary-500);
    }
  }

  .angle-left {
    background: url("../images/arrow-left.svg") no-repeat center;
    background-size: 100%;
    display: inline-block;
    width: 14px;
    height: 14px;
  }

  .angle-right {
    background: url("../images/arrow-right.svg") no-repeat center;
    background-size: 100%;
    display: inline-block;
    width: 14px;
    height: 14px;
  }
}


/*********************************************************************************************************************/
/*****마이페이지******************************************************************************************************/
/* 좌측 프로필 **/
.profile-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  padding: 50px;

  &>li {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 30px;

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

  .hd-title {
    font-size: 16px;
    font-weight: 800;
  }

  .user-info-wrap {
    gap: 16px;
    align-items: center;

    .profile-image {
      border-radius: 500px;
      width: 168px;
      height: 168px;
      position: relative;
      overflow: hidden;
    }

    .toggle-container {
      display: flex;
      gap: 8px;

      .toggle-text {
        font-size: 13px;
        position: relative;
        display: flex;
        align-items: center;
      }
    }

    .info--inner {
      display: flex;
      flex-direction: column;
      gap: 8px;
      align-items: center;

      .user-email {
        font-size: 20px;
      }

      .location-and-gender {
        color: var(--gray-600);
        font-size: 13px;
      }
    }
  }

  .userShort-info-wrap {
    display: flex;
    gap: 8px;

    .title-area {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      align-self: stretch;
      flex-shrink: 0;
      position: relative;

      .btn-edit {
        display: flex;
        align-items: center;
        gap: 4px;
        color: var(--gray-700);
        font-size: 13px;

        &::after {
          content: "";
          background: url('../images/ico-edit.svg')no-repeat center;
          background-size: 100%;
          width: 12px;
          height: 12px;
          filter: var(--filter-gray-700);
          display: flex;
        }
      }
    }

    .description {
      color: var(--gray-700);
      text-align: left;
      font-weight: 400;
      line-height: 1.4;
    }
  }

  .tag-wrap {}
}


/**/
.my-campaign-status-container {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  &>li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    background: var(--white);
    padding: 26px;
    flex: 1 0 0;
    border-radius: 8px;
  }

  .campaign-box {}

  .point-status {
    background: rgb(var(--rgb-primary-500), 7%);
  }

  .waiting {
    .point {
      color: var(--secondary-orange-500);
    }
  }

  .mypoint {
    color: var(--secondary-orange-500) !important;
    font-weight: 900 !important;
    font-size: 18px;
  }

  .con {
    position: relative;
    display: flex;
    justify-content: space-between;
    color: var(--gray-700);

    .number {
      display: flex;
      align-items: center;
      gap: 4px;
      color: var(--gray-900);

      &::after {
        content: "";
        background: url("../images/arrow-right.svg") no-repeat center;
        background-size: 100%;
        width: 12px;
        height: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        filter: var(--filter-gray-400);
      }
    }
  }
}

/**/
.tabs-round-wrap {
  padding-bottom: 10px;
  display: flex;
  gap: 8px;

  .tab-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--gray-300);
    color: var(--gray-700);
    height: 38px;
    padding: 0 20px;
    border-radius: 100px;

    &.active {
      background: var(--primary-500);
      color: var(--white);
      border: 1px solid var(--primary-500);
    }
  }
}

/**/
.sec-chart-content {
  padding-top: 50px;
}

.my-chart-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;

  &>li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
    background: var(--white);
    padding: 26px;
    flex: 1 0 0;
    border-radius: 8px;
    height: 350px;
  }

  .total-box {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 20px;
    left: 20px;

    .subj {
      font-size: 15px;
      color: var(--gray-600);
    }

    .number {
      font-size: 25px;
      color: var(--black);
      font-weight: 900;
    }
  }
}

/**/
.bottom-card-content {
  margin-top: 100px;

  .ai-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 26px;
    font-weight: 700;
    color: var(--primary-600);
  }
}

/****************************************************************************************************************/
/****판넬********************************************************************************************************/

.panel-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .row-item-box {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;

    & input {
      display: block;
      width: 100%;
    }

    .rowItem-con {
      position: relative;
      display: flex;
    }

    .subject {
      display: flex;
      align-items: center;
      font-size: 14px;
      font-weight: 700;
      color: var(--gray-800);
      column-gap: 4px;
    }

    .eyeView {
      position: absolute;
      top: 12px;
      right: 16px;

      .security[type="checkbox"]+.Link {
        color: #222;
      }

      .security[type="checkbox"]+.Link span {
        display: inline-block;
        background: url("../images/ico-eye-off.svg") no-repeat;
        background-size: 100% auto;
        width: 24px;
        height: 24px;
        filter: var(--filter-gray-700);
        cursor: pointer;
      }

      .security[type="checkbox"]:checked+.Link span {
        background: url("../images/ico-eye-on.svg") no-repeat;
        background-size: 100% auto;
        filter: var(--filter-primary-600);
      }
    }

    .noticeBox {
      padding: 10px 0 0;
    }
  }
}

/****************************************************************************************************************/
/*****로그인,회원가입********************************************************************************************/
.join-visual-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--primary-800);
  height: 190px;
  gap: 16px;
  width:100%;
  margin-bottom: 30px;

  .jn-title {
    font-size: 30px;
    color: var(--white);
  }

  .jn-subtitle {
    text-align: center;
    line-height: 1.4;
    font-size: 16px;
    color: rgb(var(--rgb-white), 60%)
  }
}

/**/
.floating-container {
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 32px;
  gap: 30px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 2px 3px 20px 0px rgba(87, 90, 100, 0.30);
  width: 650px;
}

/**/
.sns-ico-group.button {
  width: 100%;

  &>a {
    border-radius: 4px;
    width: 100%;
    gap: 16px;
    height: 46px;
  }
}

/**/
.btn-idpw-search {
  color: var(--gray-700);
  box-shadow: inset 0 -5px 0 yellow;
  width: fit-content;
}

/**/
.sns-speed-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding-top: 20px;

  &::after,
  &::before {
    content: " ";
    width: 30%;
    height: 1px;
    background: var(--gray-200);
    display: block;
  }
}

/**/