.main-table .filter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #f3f7f9;
  padding: 12rem 15rem 13rem;
}
.main-table .filter-select {
  display: flex;
  justify-content: space-between;
  flex-grow: 1;
  gap: 9rem;
}
@media screen and (max-width: 1024px) {
  .main-table .filter-select {
    flex-direction: column;
  }
}
@media(max-width:767px){
  .main-table .filter-select{ gap: 10rem; }
}
.main-table .filter-select .title {
  margin-top: 2rem;
  display: flex;
  align-items: baseline;
  gap: 10rem;
  /* padding: 10rem 0; */
}
.main-table .filter-select .title h1 {
  font-size: var(--fs20);
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -.025em;
}
.main-table .filter-select .title p {
  color: #94a1a4;
  font-size: 14rem;
  letter-spacing: -.01em;
}
.main-table .filter-select .select {
  display: grid;
  grid-template-columns: 142fr 169fr auto;
  /* align-items: center; */
  gap: 14rem;
  justify-content: space-between;
  max-width: 446rem;
  width: 100%;
}
.main-table .filter-select .select-submit button {
  margin-left: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9rem;
  background: var(--primary);
  color: var(--white);
  font-weight: 700;
  border-radius: 5rem;
  padding: 8.5rem 30rem 8.5rem 23rem;
  /* min-width: 100rem; */
  font-weight: 500;
  font-size: 15rem;
  height: 35rem;
}
.main-table .filter-select .select-submit button:hover {
  background: var(--primary);
}
.select-submit .ph-magnifying-glass{
  translate: 0 -1rem;
  font-size: 16rem;
}
.main-table .filter-select .select-input select {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  width: 100%;
  height: 35rem;
  font-weight: 700;
  padding: 5rem 20rem;
  border-radius: 5rem;
  border: 2px solid #e0e9eb;
  color: var(--grey5);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("/images/arr_dn.png") no-repeat calc(100% - 15rem) calc(50% + -1rem);
  background-size: 8rem 6rem;
  padding-right: 40rem;
}
@media screen and (max-width: 1024px) {
  .main-table .filter-select .select{
    gap: 5rem;
  }
  .main-table .filter-select .select-input select {
    padding-right: 35rem;
    max-width: 130rem;
  }
  .main-table .filter-select .select-submit button{
    margin-left: 0;
  }
}
.main-table .filter-radio { display: flex; justify-content: space-between; align-items: stretch; gap: 6rem; margin-top: 9rem;
  .radio-label{ display: grid; place-items: center; width: 100%; padding: 2.5rem 0.4ch; height: 26rem; background: #b4b4b4; color: #fff; cursor: pointer; }
  .radio-label:has(input:checked) { background: var(--primary); }
  [type=radio] { display: none; }
  @media screen and (max-width: 1024px) {
    &{ display: grid; grid-template-columns: repeat(3, 1fr); }
  }
}

/* .main-table .filter-check .check input[type=checkbox]:checked::after {
  content: url("/images/check.png");
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  width: 12rem;
  height: 14rem;
} */
.main-table .data-table {
  display: flex;
  flex-direction: column;
  margin-top: 10rem;
}
.main-table .data-header, .main-table .data-row {
  display: flex;
  align-items: stretch;
  padding: 10rem;
  overflow: hidden;
}
.main-table .data-header{ 
  margin-bottom: 2rem;
  padding: 8rem 10rem;
  background: var(--grey1);
  border: 1px solid #f2f2f2;
}
@media screen and (max-width: 1024px) {
  .main-table .data-header {
    display: none;
  }
}
.main-table .data-title{
  font-weight: 500;
  font-size: 15rem;
  letter-spacing: -.025em;
  color: #9b9b9b;
}
.main-table .data-title, .main-table .data-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12%;
  min-width: 0;
}
.main-table .data-blank {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    font-weight: 600;
    min-width: 0;
}
.main-table .data-title:nth-child(1), .main-table .data-content:nth-child(1) {
  width: 10%;
}
.main-table .data-title:nth-child(2), .main-table .data-content:nth-child(2) {
  width: 19%;
}
.main-table .data-title:nth-child(3), .main-table .data-content:nth-child(3) {
  flex: 1;
  min-width: 0;
}
.main-table .data-title:nth-child(4), .main-table .data-content:nth-child(4) {
  width: 20%;
}
.main-table .data-title:nth-child(5), .main-table .data-content:nth-child(5) {
  width: 10%;
}
.main-table .data-title:nth-child(6), .main-table .data-content:nth-child(6) {
  width: 11%;
}
.main-table .data-title:nth-child(7), .main-table .data-content:nth-child(7) {
  width: 7%;
  gap: 5rem;
}
.main-table .data-row {
  margin-top: 3rem;
  padding-block: 4rem;
  border-bottom: 1px solid var(--grey2);
}
#top .main-table .data-row.is-hidden{ display: none; }
.main-table .data-row:hover {
  background: #f3f7f9;
}
@media screen and (max-width: 1024px) {
  .main-table .data-row {
    flex-wrap: wrap;
    padding: 20rem 0;
    border-color: var(--grey3);
  }
}
.main-table .data-content {
  font-size: 15rem;
  letter-spacing: -.025em;
  color: #555;
}
.main-table .data-content:nth-child(2) {
  font-weight: 700;
  letter-spacing: 0;
}
.main-table .data-content:nth-child(3) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 35rem;
}
.main-table .data-content:nth-child(4) {
  letter-spacing: 0;
}
.main-table .data-content:nth-child(7) {
  font-size: 14rem;
}
.main-table .ph-paper-plane-tilt{ font-size: 13rem; }
.main-table .data-content .cont {
  background-color: #A8E6CF;
  border-radius: 20rem;
  color: #265C42;
  font-weight: 500;
  padding: 1rem 13.5rem 0rem;
  font-size: 13rem;
}
.main-table .data-content .termination {
  background-color: #FFAAA5;
  border-radius: 20rem;
  color: #8B3A3A;
  font-weight: 500;
  padding: 1rem 13.5rem 0rem;
  font-size: 13rem;
}
.main-table .plus{ flex-shrink: 0; translate: 0 -1rem; display: inline-block; width: 7px; aspect-ratio: 1; background: linear-gradient(0deg, #0000 3px, currentColor 3px, currentColor 4px, #0000 4px), linear-gradient(90deg, #0000 3px, currentColor 3px, currentColor 4px, #0000 4px); }
@media(max-width:767px){
  .main-table{
    .data-table{ margin-top: 23rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14rem; }
    .data-row{ margin: 0; display: grid; grid-template: 'cate cate' 'add add' 'rent rent' 'state state' 'date view' / 1fr auto; padding: 13.5rem 17rem 10rem; border: 2px solid #b8bcc0; border-radius: 9rem; }
    #top & .data-content{ justify-content: start; width: auto; text-align: left; }
    .category{ grid-area: cate; font-weight: 700; font-size: 20.4rem; color: #000; }
    .address{ grid-area: add; margin-top: 7rem; font-size: 20.4rem; }
    .address .ph-paper-plane-tilt{ margin-right: .5ch; }
    .rental{ grid-area: rent; margin-top: -1px; font-size: 20.4rem; }
    .state{ grid-area: state; margin-block: 15rem 10rem; }
    .state .cont{ translate: -5rem; padding-inline: 12rem; font-weight: 500; font-size: 16.2rem; letter-spacing: -.025em; }
    .date{ grid-area: date; font-size: 17rem; color: #55555580; }
    .view{ grid-area: view; font-size: 17rem; gap: 3rem; color: #55555580; }
    .view::before{ content: ''; display: inline-block; width: 16rem; aspect-ratio: 18/13; background: url('/images/main/table-view.svg') no-repeat 50% / contain; }
    .more{ display: none; }
  }

}
/* @media screen and (max-width: 1024px) {
  .main-table .data-content:first-child {
    flex: 1 1 50%;
    order: 2;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1024px) {
  .main-table .data-content:nth-child(2) {
    flex: 1 1 50%;
    order: 1;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1024px) {
  .main-table .data-content:nth-child(3) {
    flex: 1 1 100%;
    order: 3;
    padding: 10rem 0;
    width: 92vw;
    padding-right: 20rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media screen and (min-width: 767px) and (max-width: 1024px) {
  .main-table .data-content:nth-child(3) {
    width: 0;
  }
}
@media screen and (max-width: 1024px) {
  .main-table .data-content:nth-child(4) {
    flex: 1 1 50%;
    order: 4;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1024px) {
  .main-table .data-content:nth-child(5) {
    flex: 1 1 16.6666666667%;
    order: 5;
    justify-content: flex-start;
  }
}
@media screen and (max-width: 1024px) {
  .main-table .data-content:nth-child(6) {
    flex: 1 1 16.6666666667%;
    order: 6;
  }
}
@media screen and (max-width: 1024px) {
  .main-table .data-content:nth-child(7) {
    flex: 1 1 16.6666666667%;
    order: 7;
    justify-content: flex-end;
  }
}
@media screen and (max-width: 1024px) {
  .main-table .data-content {
    width: 1fr;
  }
} */