div:has(.directory_nav) {
  position: sticky;
  top: -6rem;
  z-index: 99;
}
.directory_main {
  background-color: var(--bg);
  padding: 9.4rem 0 3.4rem;
}
.directory_main .list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6rem 2.83613445%;
}
.directory_main .directory_item {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 0 0.8rem rgba(0, 0, 0, 0.04);
  border-radius: 2.4rem;
  padding: 1.1rem 0.9rem;
}
.directory_main .directory_item:hover img {
  transform: scale(1.03);
}
.directory_main .directory_item .img {
  padding-bottom: 141.35514019%;
  border-radius: 2.4rem;
}
.directory_main .directory_item .title {
  flex: 1;
  font-size: 2.4rem;
  font-weight: 600;
  padding: 5.8275058% 7.2261072% 4.1958042%;
}
.directory_main p.center:has(.btn_i) {
  margin-top: 5rem;
  min-height: 2.7rem;
}
@media screen and (max-width: 768px) {
  div:has(.directory_nav) {
    top: 64px;
  }
  .directory_main {
    padding: 50px 0;
  }
  .directory_main .list ul {
    grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
    gap: 20px;
  }
  .directory_main .directory_item {
    border-radius: 10px;
    padding: 10px;
  }
  .directory_main .directory_item .img {
    border-radius: 10px;
  }
  .directory_main .directory_item .title {
    padding: 20px 10px 10px;
    font-size: 18px;
  }
  .directory_main p.center:has(.btn_i) {
    margin-top: 40px;
    min-height: 19px;
  }
}