/* =========================
   ENDONEXT #service (정리본)
   - 좌/우 카드 높이 자동 동일
   - 텍스트가 짧아도 cont가 남는 공간을 먹어서 이미지 위치 정렬
   - 이미지 고정 높이 + cover
   ========================= */

/* 기본 */
#service{
  width:100%;
  margin:0 auto;
  overflow:hidden;
}

/* 상단 소개문 */
#service .sub_txt01{
  text-align:center;
  padding:10px;
}

#service p.txtP{
  padding-bottom:20px;
  font-size:20px;
  line-height:35px;
  margin:0;               /* 기본 마진 제거(안정) */
}

/* =====================================
   ROW(한 줄: 좌/우 2개 카드) = .clearB
   - float 대신 flex로 높이 동일(stretch)
   ===================================== */
#service .clearB{
  display:flex;
  gap:40px;               /* 좌/우 간격 */
  align-items:stretch;    /* ✅ 좌/우 카드 높이 동일 */
}

/* 카드(좌/우) */
#service .floatL,
#service .floatR{
  float:none;             /* 기존 float 무력화 */
  width:574px;            /* 기존 PC 폭 유지 */
  display:flex;
  flex-direction:column;  /* cont 위, img 아래 */
}

/* =====================================
   텍스트 박스 .cont
   - 남는 높이를 먹어서(짧은 문장 카드도 높이 맞춤)
   ===================================== */
#service .cont{
  background-color:#f0f0f0;
  padding:40px 40px;

  flex:1;                 /* ✅ 핵심 */
  display:flex;
  flex-direction:column;
}

/* 아이콘 + 제목 중앙 정렬 */
#service .titWrap{
  text-align:center;
  margin-bottom:20px;
}

/* 아이콘 크기 */
#service .titWrap img{
  width:120px;     /* 원하는 크기로 조절 가능 */
  height:auto;
  display:block;
  margin:0 auto 20px auto;  /* 가운데 + 아래 여백 */
}

/* 제목 중앙 */
#service .titWrap .tit{
  font-size:26px;
  font-weight:500;
  margin:0;
}

/* 제목 */
#service .cont .tit,
#service .cont .tit2{
  font-size:26px;
  color:#222;
  font-weight:500;
  margin:0 0 18px 0;       /* 제목 아래 간격 */
}

/* 리스트 */
#service .cont ul.txt{
  font-size:16px;
  margin:0;
  padding:0;
  list-style:none;         /* 커스텀 점 사용 */
}

#service .cont ul.txt li{
  position:relative;
  padding-left:13px;

  /* 기존 bullet 이미지 제거하고 싶으면 아래 줄 유지 */
  background:none;

  /* 줄간격(가독성) */
  line-height:1.7;
}

/* 커스텀 점(문장 가운데 정렬) */
#service .cont ul.txt li::before{
  content:"";
  width:3px;
  height:3px;
  background-color:#555;
  position:absolute;
  left:3px;
  top:50%;
  transform:translateY(-50%);
  border-radius:50%;
}

/* cont2(아래 줄 카드)도 아이콘/타이틀 래퍼 동일 적용 */
#service .cont2 .titWrap{
  text-align:center;
  margin-bottom:20px;
}

/* cont2 아이콘 크기 동일 적용 */
#service .cont2 .titWrap img{
  width:120px;
  height:auto;
  display:block;
  margin:0 auto 20px auto;
}

/* cont2 제목도 중앙으로 */
#service .cont2 .titWrap .tit{
  font-size:26px;
  font-weight:500;
  margin:0;
}

/* cont2에서 아이콘이 안 보일 때(겹침/가림 방지) */
#service .cont2{
  position:relative;      /* z-index 먹게 */
  z-index:2;
}

/* titWrap 자체를 위로 올리고, 항상 보이게 */
#service .cont2 .titWrap{
  position:relative;
  z-index:5;              /* 최상단 */
  padding-top:10px;       /* 아이콘 위 공간 확보 */
}

/* 아이콘도 강제로 레이어 최상단 */
#service .cont2 .titWrap img{
  position:relative;
  z-index:10;
}


/* =====================================
   이미지 박스
   ===================================== */
#service .img{
  width:100%;
  height:260px;           /* 이미지 높이 고정 */
  overflow:hidden;
}

#service .img img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =====================================
   반응형 (모바일)
   ===================================== */
@media (max-width: 1023px){
  /* 2열 -> 1열 */
  #service .clearB{
    flex-direction:column;
    gap:50px;
  }

  #service .floatL,
  #service .floatR{
    width:100%;
  }

  #service .cont{
    padding:20px 25px;
  }

  #service .cont .tit,
  #service .cont .tit2{
    font-size:20px;
  }

  #service .cont ul.txt{
    font-size:13px;
  }

  #service .img{
    height:200px;         /* 모바일에서 이미지 높이 축소 */
  }
}

/* 필요하면 더 작은 구간 추가 조정 */
@media (max-width: 768px){
}

@media (max-width: 640px){
}

@media (max-width: 480px){
}

@media (max-width: 320px){
}