@import url(./info_press.css);

.contents__banner--wrapper {
  background-color: var(--brandgreen-100);
}
.contents__banner {
  gap: 0;
}

.contents__banner__title {
  color: #046248;
}

.contents__cs--wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: white;
  align-items: center;
}
.contents__cs {
  width: 100%;
  max-width: 75rem;
  display: flex;
  flex-direction: column;
  padding: 3rem 2.5rem;
  gap: 3.25rem;
}

.cs__board__header__index,
.cs__board__body__index {
  width: 8%;
}
.cs__board__header__type,
.cs__board__header__writer,
.cs__board__header__state,
.cs__board__header__date,
.cs__board__body__type,
.cs__board__body__writer,
.cs__board__body__state,
.cs__board__body__date {
  width: 12%;
}
.cs__board__header__title,
.cs__board__body__title {
  width: 44%;
}
.cs__board__header__index,
.cs__board__header__type,
.cs__board__body__index,
.cs__board__body__type,
.cs__board__body__title {
  justify-content: flex-start;
}
.cs__board__body__state.complete p {
  color: var(--brandgreen-600);
}

.pagination--wrapper {
  justify-content: flex-end;
}
.pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 테블릿 가로 (해상도 768px ~ 1023px)*/
@media all and (max-width: 1023px) {
}

/* 모바일 가로 & 테블릿 세로 (해상도 480px ~ 767px)*/
@media all and (max-width: 767px) {
  .contents__banner,
  .contents__cs {
    padding: 1.5rem;
  }

  .cs__board__header__index,
  .cs__board__body__index {
    display: none;
  }
  .cs__board__header__type,
  .cs__board__header__writer,
  .cs__board__header__state,
  .cs__board__header__date,
  .cs__board__body__type,
  .cs__board__body__writer,
  .cs__board__body__state,
  .cs__board__body__date {
    width: 14%;
  }
  .cs__board__header__title,
  .cs__board__body__title {
    width: 44%;
  }
}

/* 모바일 세로 (해상도 ~ 479px)*/
@media all and (max-width: 479px) {
  .contents__cs {
    padding: 0;
  }
  .table {
    border: unset;
  }
  .table__header,
  .table__body__row {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .contents__banner__title {
    font-size: 1.8rem;
  }
  .pagination--wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 3rem;
  }
  .cs__board__header__type,
  .cs__board__header__writer,
  .cs__board__header__state,
  .cs__board__header__date,
  .cs__board__body__type,
  .cs__board__body__writer,
  .cs__board__body__state,
  .cs__board__body__date {
    width: 17%;
  }
  .cs__board__header__title,
  .cs__board__body__title {
    width: 32%;
  }
}