/* =========================================
   민사센터 업무 항목
========================================= */

.civil-menu-wrap,
.civil-menu-wrap * {
  box-sizing: border-box;
}

.civil-menu-wrap {
  width: 100%;
  margin: 0;
  padding: 0;

  font-family:
    "Pretendard",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  letter-spacing: -0.02em;
}


/* =========================================
   GRID
========================================= */

.civil-menu-grid {
  display: grid;

  /* PC 4개 한 줄 */
  grid-template-columns: repeat(4, 1fr);

  gap: 14px;
}


/* =========================================
   CARD
========================================= */

.civil-menu-item {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 94px;

  padding: 0 28px;

  background: #ffffff;

  border: 1px solid #e0e0e0;
  border-radius: 7px;

  text-decoration: none !important;

  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* hover */

.civil-menu-item:hover {
  border-color: #c0c0c0;

  transform: translateY(-2px);

  box-shadow:
    0 6px 18px rgba(33, 33, 33, 0.06);
}


/* =========================================
   NUMBER
========================================= */

.civil-menu-num {
  flex: 0 0 auto;

  width: 35px;

  margin-right: 12px;

  font-size: 12px;
  font-weight: 700;

  color: #c62828;

  letter-spacing: -0.02em;
}


/* =========================================
   TITLE
========================================= */

.civil-menu-title {
  flex: 1;

  font-size: 18px;
  font-weight: 700;

  line-height: 1.4;

  letter-spacing: -0.02em;

  color: #141414;
}


/* =========================================
   ARROW
========================================= */

.civil-menu-arrow {
  flex: 0 0 auto;

  margin-left: 20px;

  font-size: 22px;
  font-weight: 300;

  line-height: 1;

  color: #141414;

  transition: transform 0.2s ease;
}

.civil-menu-item:hover .civil-menu-arrow {
  transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

  .civil-menu-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

  .civil-menu-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .civil-menu-item {
    min-height: 76px;

    padding: 0 20px;

    border-radius: 6px;
  }

  .civil-menu-num {
    width: 31px;

    margin-right: 10px;

    font-size: 11px;
  }

  .civil-menu-title {
    font-size: 16px;
  }

  .civil-menu-arrow {
    margin-left: 14px;

    font-size: 20px;
  }
}


.civil-services-header{margin:0 0 20px}.civil-services-heading{font-size:36px;line-height:1.5;letter-spacing:-1px;color:#111;font-weight:700;margin:0;border:0;padding:0}.civil-services-header p{text-align:right;font-size:14px;letter-spacing:-1px;line-height:1.5;color:#7f7f7f;margin:0}.civil-menu-title{min-width:0}.civil-menu-grid[data-columns="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1024px){.civil-menu-grid[data-columns="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.civil-menu-grid[data-columns="3"]{grid-template-columns:1fr}.civil-services-heading{font-size:30px}.civil-services-header p{font-size:12px;margin-top:10px;text-align:left}}