@charset "utf-8";

/* =====================================
   Rehabilitation
===================================== */

/* =====================================
   Common Section Title
===================================== */
#rehabilitation .sec-title{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 0 0 30px;
}

#rehabilitation .sec-title__bar{
  width: 5px;
  height: 25px;
  background:#0b86b8; /* 포인트 컬러 */
  border-radius: 3px;
  flex: 0 0 auto;
}

#rehabilitation .sec-title__text{
  margin:0;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color:#111;
}

@media (max-width: 640px){
	#rehabilitation .sec-title{
	  gap:8px;
	}

	#rehabilitation .sec-title__bar{
	  width: 3px;
	  height: 20px;
	}

	#rehabilitation .sec-title__text{
	  font-size: 22px;
	}

}


/* =====================================
   Content
===================================== */

#rehabilitation .rehab-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 6vw, 130px) 0;
  
  background-image: url("../img/sub/rehabilitation_rehab_bg.jpg"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#rehabilitation .rehab-hero1{
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 6vw, 130px) 0;
  
  background-image: url("../img/sub/bankruptcy_rehab_bg.jpg"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 타이틀 */
#rehabilitation .rehab-hero__title{
  margin: 0 0 30px;
  color: #fff;
  font-weight:700;
  line-height: 1.15;
  letter-spacing: -0.6px;

  font-size: clamp(26px, 3.4vw, 42px);
  word-break:keep-all;
}

/* 설명 */
#rehabilitation .rehab-hero__desc{
  margin: 0;
  color: rgba(255,255,255,.88);
  line-height: 1.5;
  letter-spacing: -0.2px;

  font-size: clamp(14px, 1.15vw, 18px);
  max-width: 850px;
  word-break:keep-all;
}

/* 태블릿/모바일 */
@media (max-width: 768px){

  #rehabilitation .rehab-hero__overlay{
    background: rgba(0,0,0,.55);
  }

  #rehabilitation .rehab-hero__desc br{
    display: none;
  }
}

/* 초소형 */
@media (max-width: 380px){
  #rehabilitation .rehab-hero{
    padding: 44px 0;
  }
}


/* =====================================
   Rehabilitation - Qualification Section
===================================== */
#rehabilitation .rehab-sec{
  padding: 70px 0;
}

/* 카드 그리드 */
#rehabilitation .qual-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 34px;
}

#rehabilitation .qual-card{
  background:#fafafa;
  border:1px solid #eee;
  border-radius: 10px;
  padding: 28px 22px;
  min-height: 190px;

  box-shadow: 0 10px 22px rgba(0,0,0,.04);
}

#rehabilitation .qual-ico{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:#3f6fb6; /* 카드 아이콘 원 컬러 */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 18px;
}

#rehabilitation .qual-ico i{
  color:#fff;
  font-size: 26px;
  line-height: 1;
}

#rehabilitation .qual-ttl{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color:#111;
  line-height: 1.5;
  word-break:keep-all;
}

#rehabilitation .qual-sub{
  margin: 0;
  font-size: 16px;
  color:#777;
  line-height: 1.5;
}

/* 설명 텍스트 */
#rehabilitation .qual-lead{
  margin: 10px 0 14px;
  font-size: 22px;
  color:#111;
  font-weight: 700;
  letter-spacing: -0.2px;
}

/* 회색 박스 */
#rehabilitation .qual-box{
  background:#f5f5f5;
  border-radius: 10px;
  padding: 26px 28px;
}

#rehabilitation .qual-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

#rehabilitation .qual-list li{
  position: relative;
  padding-left: 16px;
  margin: 10px 0;
  color:#333;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

#rehabilitation .qual-list li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:#444;
  font-weight: 900;
}

/* 하단 문단 */
#rehabilitation .qual-foot{
  margin: 25px 0 0;
  color:#222;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  word-break:keep-all;
}

/* 반응형 */
@media (max-width: 1024px){
  #rehabilitation .qual-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px){
  #rehabilitation .rehab-sec{
    padding: 54px 0;
  }

  #rehabilitation .qual-grid{
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #rehabilitation .qual-card{
    min-height: auto;
    padding: 22px 18px;
  }

  #rehabilitation .qual-box{
    padding: 18px 18px;
  }
}



/* =====================================
   Rehabilitation - Process
===================================== */

#rehabilitation .rehab-process{
	padding: 50px 0 0;
}



#rehabilitation .rehab-process .process-box{
  position: relative;
  overflow: hidden;
}

#rehabilitation .process-sec { background:#f9f9f9; padding: 100px 0 0; }

/* =========================
   Top Steps (nav 느낌)
========================= */
#rehabilitation .rehab-process .process-steps{
  position: relative;
  display:flex;
  flex-wrap:wrap;
  justify-content: space-between;
  gap: 30px 0;
  margin: 0;
  text-align:center;
  padding: 0;
}

#rehabilitation .rehab-process .process-steps .step{
  position: relative;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  width: 180px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

/* 연결선 */
#rehabilitation .rehab-process .process-steps .step::before{
  content:"";
  display:block;
  width:200%;
  height:1px;
  background:#e0e0e0;
  position:absolute;
  left:0;
  top:24px;
  z-index:-1;
}

/* 점선 원 */
#rehabilitation .rehab-process .step__num{
  width:50px;
  height:50px;
  padding:5px;
  border:1px dashed #e5e5e5;
  background:#fff;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 안쪽 채운 원(숫자) */
#rehabilitation .rehab-process .step__num::before{
  content: attr(data-num);
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background:#cdcdcd;
  color:#fff;
  font-size:13px;
  font-weight:700;
  transition: all .3s ease-in-out;
}

/* 텍스트 */
#rehabilitation .rehab-process .step__label{
  display:block;
  margin-top:10px;
  color:#cdcdcd;
  font-weight:500;
  font-size:16px;
  letter-spacing: -0.2px;
  transition: all .3s ease-in-out;
  word-break: keep-all;
}

/* 활성/호버 */
#rehabilitation .rehab-process .step.is-active .step__num::before,
#rehabilitation .rehab-process .step:hover .step__num::before{
  background:#2a8dac;
}
#rehabilitation .rehab-process .step.is-active .step__label,
#rehabilitation .rehab-process .step:hover .step__label{
  color:#2a8dac;
}

/* =========================
   Content (slider 느낌)
========================= */
#rehabilitation .rehab-process .process-content{
  position: relative;
  margin-top:50px;
  padding-top: 100px;
  height: 285px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  text-align:center;
  overflow: hidden;
}

/* ▶ 슬라이드 패널 기본 상태 */
#rehabilitation .rehab-process .pcont{
  position: absolute;
  inset: 0;
  width: 100%;

  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  transition:
    opacity 0.6s cubic-bezier(0.7, 0, 0.3, 1),
    transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}

/* ▶ 활성 패널 */
#rehabilitation .rehab-process .pcont.is-show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* 타이틀 */
#rehabilitation .rehab-process .pcont__title{
  margin:0;
  padding-top: 32px;
  font-size:50px;
  font-weight:500;
  color:#333;
  letter-spacing: -0.8px;

  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

/* 타이틀 비활성 */
#rehabilitation .rehab-process .pcont:not(.is-show) .pcont__title{
  opacity: 0;
  transform: translateY(10px);
}

/* 설명 */
#rehabilitation .rehab-process .pcont__desc{
  margin: 25px 0 0;
  font-size:18px;
  font-weight:300;
  color:#666;
  line-height:1.6;
  letter-spacing: -0.2px;
  padding: 0 100px;
  word-break: keep-all;

  transition:
    opacity 0.55s ease 0.12s,
    transform 0.55s ease 0.12s;
}

/* 설명 비활성 */
#rehabilitation .rehab-process .pcont:not(.is-show) .pcont__desc{
  opacity: 0;
  transform: translateY(10px);
}

/* 부가 설명(sub) */
#rehabilitation .rehab-process .pcont__sub{
  display:inline-block;
  margin-top: 6px;
  font-weight:400;
  color:#666;

  transition:
    opacity 0.45s ease 0.2s,
    transform 0.45s ease 0.2s;
}

/* 부가 설명 비활성 */
#rehabilitation .rehab-process .pcont:not(.is-show) .pcont__sub{
  opacity: 0;
  transform: translateY(6px);
}


/* =========================
   Responsive
========================= */
@media (max-width:1370px){
  #rehabilitation .rehab-process .process-steps{
    margin: 0;
  }

  /* 한 줄에 4개/3개 정도로 줄바꿈 유도 */
  #rehabilitation .rehab-process .process-steps .step{
    width: calc(25% - 30px);
  }

  /* 참조처럼 a max-width:70px 느낌 */
  #rehabilitation .rehab-process .process-steps .step{
    max-width: 70px;
    margin: 0 auto;
  }

  #rehabilitation .rehab-process .step__label{
    font-size: 15px;
  }
}

@media (max-width:1024px){
  #rehabilitation .rehab-process{
    padding: 80px 0 0;
  }

  #rehabilitation .rehab-process .sec-title{
    margin-bottom: 40px;
  }

  #rehabilitation .rehab-process .process-steps{
    gap: 20px 30px;
  }

  #rehabilitation .rehab-process .step__num{
    width:50px;
    height:50px;
    padding:5px;
  }
  #rehabilitation .rehab-process .step__num::before{
    font-size:12px;
  }
  #rehabilitation .rehab-process .step__label{
    margin-top:8px;
    font-size:15px;
  }

  #rehabilitation .rehab-process .process-content{
    padding-top: 80px;
    height: 350px;
  }
  #rehabilitation .rehab-process .pcont__title{
    padding-top: 25px;
    font-size: 40px;
  }
  #rehabilitation .rehab-process .pcont__desc{
    padding: 0 60px;
    font-size:18px;
  }
  #rehabilitation .rehab-process .pcont__desc br{
    display:none;
  }
}

@media (max-width:640px){
  #rehabilitation .rehab-process{
    padding: 60px 0 0;
  }

  #rehabilitation .rehab-process .process-steps{
    gap: 20px 20px;
  }

  #rehabilitation .rehab-process .process-steps .step{
    width: calc(25% - 20px);
  }

  #rehabilitation .rehab-process .step__label{
    font-size: 14px;
  }

  #rehabilitation .rehab-process .process-content{
    padding-top: 50px;
    height: 280px;
  }

  #rehabilitation .rehab-process .pcont__title{
    padding-top: 20px;
    font-size: 24px;
  }

  #rehabilitation .rehab-process .pcont__desc{
    padding: 0;
    font-size: 16px;
  }
}

/* =====================================
   Process Arrow Buttons
===================================== */
#rehabilitation .rehab-process .btnbox{
  position:absolute;
  top: 145px;
  left: 0;
  right: 0;
  pointer-events: none; /* 버튼만 클릭되게 */
}

#rehabilitation .rehab-process .btn_pn{
  position:absolute;
  width: 80px;
  height: 220px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
  transition: opacity .25s ease;
}

#rehabilitation .rehab-process .btn_prev{
  left: 0;
}

#rehabilitation .rehab-process .btn_next{
  right: 0;
}

/* 아이콘 */
#rehabilitation .rehab-process .btn_pn i{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 35px;
  color: #000;
  transition: all .25s ease;
}

#rehabilitation .rehab-process .btn_prev i{
  left: 10px;
}

#rehabilitation .rehab-process .btn_next i{
  right: 10px;
}

/* hover 효과 */
#rehabilitation .rehab-process .btn_pn:hover i{
  color:#2a8dac;
}

/* 모바일에서는 간소화 */
@media (max-width:1024px){
  #rehabilitation .rehab-process .btnbox{
    top: auto;
    bottom: 120px;
  }
  #rehabilitation .rehab-process .btn_pn{
    width: 50px;
    height: 80px;
  }
  #rehabilitation .rehab-process .btn_pn i{
    font-size: 22px;
  }
}

@media (max-width:640px){
  #rehabilitation .rehab-process .btnbox{
    bottom: 180px;
  }
}



/* =====================================
   Rehabilitation - Note (장점/유의사항)
===================================== */
#rehabilitation .rehab-note{
  padding: 80px 0;
  background: #fff;
}

#rehabilitation .rehab-note .note-lead{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight:700;
}

/* 회색 박스 */
#rehabilitation .rehab-note .note-box{
  background: #f3f3f3;
  border-radius: 2px;
  padding: 34px 40px;
  margin: 0 0 30px;
}

/* 리스트 */
#rehabilitation .rehab-note .note-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

#rehabilitation .rehab-note .note-list li{
  position: relative;
  padding-left: 18px;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

#rehabilitation .rehab-note .note-list li + li{
  margin-top: 12px;
}

/* 불릿 점 */
#rehabilitation .rehab-note .note-list li::before{
  content:"";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #666;
  position: absolute;
  left: 0;
  top: 12px;
}

#rehabilitation .rehab-note .note-list strong{
  font-weight: 700;
}

/* 아래 문단 */
#rehabilitation .rehab-note .note-p{
  margin: 20px 0 0;
  color: #333;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  word-break: keep-all;
}

/* 반응형 */
@media (max-width: 1024px){
  #rehabilitation .rehab-note{
    padding: 70px 0;
  }
  #rehabilitation .rehab-note .note-box{
    padding: 28px 26px;
  }
}

@media (max-width: 640px){
  #rehabilitation .rehab-note{
    padding: 60px 0;
  }
  #rehabilitation .rehab-note .note-lead{
    font-size: 15px;
  }
  #rehabilitation .rehab-note .note-box{
    padding: 22px 18px;
  }
  #rehabilitation .rehab-note .note-list li{
    font-size: 14.5px;
  }
  #rehabilitation .rehab-note .note-p{
    font-size: 14.5px;
  }
}


/* =====================================
   Rehabilitation - Compare Table
===================================== */
#rehabilitation .rehab-compare{
  padding: 80px 0;
  background: #fff;
}

/* 테이블 스크롤 래퍼 (모바일용) */
#rehabilitation .rehab-compare .compare-table-wrap{
  margin-top: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid #d9d9d9;
  border-top: 2px solid #2a8dac; /* 상단 포인트 라인 */
  background: #fff;
}

/* 테이블 */
#rehabilitation .rehab-compare .compare-table{
  width: 100%;
  min-width: 900px; /* 모바일에서 깨지지 않게 */
  border-collapse: collapse;
  table-layout: fixed;
}

#rehabilitation .rehab-compare .compare-table th,
#rehabilitation .rehab-compare .compare-table td{
  border-left: 1px solid #d9d9d9;
  border-top: 1px solid #d9d9d9;
  padding: 18px 18px;
  text-align: center;
  vertical-align: middle;
  color: #333;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: -0.2px;
  word-break: keep-all;
}

#rehabilitation .rehab-compare .compare-table tr:first-child th{
  border-top: 0;
}

#rehabilitation .rehab-compare .compare-table th:first-child,
#rehabilitation .rehab-compare .compare-table td:first-child{
  border-left: 0;
}

/* 헤더 */
#rehabilitation .rehab-compare .compare-table thead th{
  background: #f3f3f3;
  font-weight: 800;
  font-size: 16px;
}

/* 행 배경(은은하게) */
#rehabilitation .rehab-compare .compare-table tbody tr:nth-child(even) td{
  background: #fcfcfc;
}

/* 포커스(키보드 스크롤 접근성) */
#rehabilitation .rehab-compare .compare-table-wrap:focus{
  outline: 2px solid rgba(190,155,86,0.35);
  outline-offset: 2px;
}

/* 반응형 */
@media (max-width:1024px){
  #rehabilitation .rehab-compare{
    padding: 70px 0;
  }
  #rehabilitation .rehab-compare .compare-table th,
  #rehabilitation .rehab-compare .compare-table td{
    padding: 16px 16px;
    font-size: 14.5px;
  }
}

@media (max-width:640px){
  #rehabilitation .rehab-compare{
    padding: 60px 0;
  }
  #rehabilitation .rehab-compare .compare-table th,
  #rehabilitation .rehab-compare .compare-table td{
    padding: 14px 14px;
    font-size: 14px;
  }
}