 @charset "utf-8";
 
 
 /* 메인 */
/* =========================
   KJ SEC01 (HERO)
========================= */
#kj_main{
  background-image:url('../img/main/bg_visual.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  overflow: hidden;

  /* ✅ 하단이 떠보이는 원인: 아래 padding 제거 */
  padding: 70px 0 0;   /* (기존 70px 0 → 70px 0 0) */

  color:#fff;
}

/* 메인 inner (1680) */
#kj_main .kj-inner{
  position: relative;
  z-index: 1;

  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px;

  /* ✅ min-height를 고정 성격으로 (80vh는 환경에 따라 어색하게 뜰 수 있음) */
  min-height:calc(100vh - 150px);
}

/* =========================
   중앙 카피 (정가운데)
========================= */
#kj_main .kj-copy{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -55%);
  z-index: 3;

  width: min(720px, 92vw);
  text-align: center;
}

#kj_main .kj-title{
  font-size: 45px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
  text-shadow: 0 6px 18px rgba(0,0,0,0.25);
  font-family:'Nanum Myeongjo';
	
  /* ✅ PC에서 한 줄 */
  white-space: nowrap;
  word-break:keep-all;
}

#kj_main .kj-desc{
  font-size: 20px;
  line-height: 1.7;
  margin: 0 auto;
  max-width: 560px;
  opacity: 0.95;
  word-break:keep-all;
}

#kj_main .kj-desc .c1{
  color: #33c1ff;
  font-weight: 700;
}

#kj_main .kj-desc .c2{
  color: #d4b06a;
  font-weight: 800;
}

/* =========================
   좌/우 인물 이미지 (하단 고정)
========================= */
#kj_main .kj-person{
  position: absolute;
  bottom: 0;              /* ✅ 바닥 */
  z-index: 2;

  width: 520px;           /* 이미지 500px + 여유 */
  pointer-events: none;
}

#kj_main .kj-person.kj-left{ left: 0; }
#kj_main .kj-person.kj-right{ right: 0; }

#kj_main .kj-person img{
  width: 500px;
  max-width: 100%;
  height: auto;
  display: block;         /* ✅ 이미지 아래 여백 방지 */
  margin: 0;              /* ✅ 혹시 모를 여백 방지 */
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.25));
}

/* =========================
   namebox (m1처럼 이미지 "옆(중앙쪽)" 하단 배치)
========================= */
#kj_main .kj-person .kj-namebox{
  position: absolute;
  bottom: 60px;  /* ✅ m1처럼 하단에서 살짝 위 */
  z-index: 4;

  width: 380px;
  padding: 14px 14px 12px;
}

/* ✅ 좌측: 이미지 "우측(중앙방향)"으로 빼기
   - 500(이미지) - 140(겹침) = 360 지점에 카드 시작
*/
#kj_main .kj-person.kj-left .kj-namebox{
  left: 380px;
  transform: none;
}

/* ✅ 우측: 이미지 "좌측(중앙방향)"으로 빼기 */
#kj_main .kj-person.kj-right .kj-namebox{
  right: 360px;
  transform: none;
}



#kj_main .kj-person .kj-namebox strong{
  display:block;
  font-size: 25px;
  font-weight: 800;
  margin-bottom: 8px;
}

#kj_main .kj-person .kj-namebox strong span{
  font-size: 16px;
  font-weight: 600;
  opacity: .9;
  margin-left: 6px;
}

/* ✅ 변호사 정보 리스트 dot(불릿) 나오게 */
#kj_main .kj-namebox ul{
  list-style: disc !important;        /* ● 강제 표시 */
  list-style-position: outside;       /* 글 바깥쪽에 불릿 */
  padding-left: 18px;      /* 들여쓰기 */
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  opacity: .92;
}


#kj_main .kj-namebox ul li{
  margin: 0;
}


/* =========================
   반응형
========================= */

/* 1200px 이하 */
@media (max-width: 1480px){
  #kj_main{ padding: 60px 0 0; }
  #kj_main .kj-inner{ min-height: 720px; }

  #kj_main .kj-person{ width: 440px; }
  #kj_main .kj-person img{ width: 420px; }

  #kj_main .kj-person .kj-namebox{
    width: 320px;
    bottom: 48px;
  }

  /* 420 - 120 = 300 정도 위치가 자연스러움 */
  #kj_main .kj-person.kj-left .kj-namebox{ left: 320px; }
  #kj_main .kj-person.kj-right .kj-namebox{ right: 320px; }

  #kj_main .kj-title{ font-size: 36px; }
}

/* 980px 이하 */
@media (max-width: 1200px){
  #kj_main{
    padding: 54px 0 0;
  }
  #kj_main .kj-inner{ min-height: 650px; }

  #kj_main .kj-person{ width: 380px; }
  #kj_main .kj-person img{ width: 360px; }

  #kj_main .kj-person .kj-namebox{
    width: 300px;
    bottom: 38px;
  }

  #kj_main .kj-person.kj-left .kj-namebox{ left: 240px; }
  #kj_main .kj-person.kj-right .kj-namebox{ right: 240px; }

  #kj_main .kj-title{
    font-size: 32px;
    white-space: normal; /* ✅ 좁아지면 2줄 허용 */
  }
}

/* (모바일) */
/* =========================
   모바일(980px 이하): 인물+namebox 표시
   - 기존 모바일에서 .kj-person을 숨겨서 namebox도 같이 사라짐 → 다시 표시
   - 인물 2명 세로로 배치
   - namebox는 이미지 위(하단 겹침)로 배치
========================= */
/* ✅ 모바일(980px 이하): 변호사 2열 유지 + namebox는 이미지 아래로 */
@media (max-width: 980px){

  /* kj-inner를 2열로 */
  #kj_main .kj-inner{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
	padding:50px 15px 30px;
	min-height:auto;
  }

  /* 중앙 카피는 위, 전체폭 */
  #kj_main .kj-copy{
    position: relative;
    left: auto; top: auto;
    transform: none;
    width: 100%;
    order: 1;
    margin: 0 0 18px;
  }

  /* 변호사 2칸 */
  #kj_main .kj-person{
    display: block;
    position: relative;
    width: calc(50% - 7px);
    max-width: 320px;
    order: 2;
    pointer-events: auto;
  }

  #kj_main .kj-person img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* ✅ 핵심: namebox를 이미지 아래로 (겹침 제거) */
  #kj_main .kj-person .kj-namebox{
    position: static;      /* absolute 해제 */
    transform: none;
    left: auto;
    right: auto;
    bottom: auto;

    width: 100%;
    max-width: none;

    padding: 12px 12px 10px;
    border-radius: 12px;

    background: rgba(0,0,0,0.20);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(4px);
	word-break:keep-all;
  }

  /* PC에서 주던 좌/우 오프셋값 무효화 */
  #kj_main .kj-person.kj-left .kj-namebox,
  #kj_main .kj-person.kj-right .kj-namebox{
    left: auto;
    right: auto;
  }

  /* 모바일 폰트 */
  #kj_main .kj-person .kj-namebox strong{
    font-size: 16px;
    margin-bottom: 6px;
  }
  #kj_main .kj-person .kj-namebox strong span{
    font-size: 12px;
  }

  #kj_main .kj-namebox ul{
    font-size: 11px;
    line-height: 1.5;
	padding-left: 12px;
	margin-left:0 !important;
  }
  
}


/* =========================
   AI 자가진단 섹션
========================= */
#kj_ai_diag{
  background-image:url('../img/main/bg_self.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  position: relative;
  color:#fff;
  overflow:hidden;
  padding: 200px 15px 150px;
}

#kj_ai_diag .kj_ai_inner{
  position:relative;
  z-index:1;

  max-width: 1280px;
  margin: 0 auto;

  display:flex;
  justify-content:space-between;
  gap: 48px;
}

/* ===== 좌측 카피 ===== */
#kj_ai_diag .kj_ai_copy{
  flex: 1 1 52%;
  min-width: 320px;
  margin-top:50px;
}

#kj_ai_diag .kj_ai_kicker{
  margin: 0 0 10px;
  font-size: 42px;
  font-weight: 800;
  color: #22c1d6; /* 포인트 */
  letter-spacing: -0.02em;
}

#kj_ai_diag .kj_ai_title{
  margin: 0 0 40px;
  font-size: 42px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.03em;
}

#kj_ai_diag .kj_ai_desc{
  font-size: 20px;
  line-height: 1.5;
  opacity: .95;
}

#kj_ai_diag .kj_ai_desc h3 {
  font-size: 25px;
  margin-bottom:20px;
}
#kj_ai_diag .kj_ai_desc h3 span { color:#d5b685; }




/* =========================
   반응형
========================= */
@media (max-width: 980px){
  #kj_ai_diag{
    padding: 70px 15px
  }

  #kj_ai_diag .kj_ai_inner{
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
  }

  #kj_ai_diag .kj_ai_copy{
    min-width: auto;
	margin-bottom:50px;
  }
  #kj_ai_diag .kj_ai_kicker,
  #kj_ai_diag .kj_ai_title{
    font-size: 32px;
  }
  
  #kj_ai_diag .kj_ai_desc h3, #kj_ai_diag .kj_ai_desc p { word-break:keep-all; }

  #kj_ai_diag .kj_ai_card{
    max-width:960px;
	width:100%;
    margin: 0 auto;
  }
}

@media (max-width: 420px){
  #kj_ai_diag .kj_ai_title{ font-size: 26px; }
  #kj_ai_diag .kj_ai_kicker{ font-size: 26px; }
  #kj_ai_diag .kj_ai_desc h3 { font-size: 20px;  }
  #kj_ai_diag .kj_ai_desc p { font-size: 16px; }
}



/* OPTIMUS Value */
/* =========================
   KJ 베스트 성공사례 (m3 스타일)
========================= */
#kj_bestcase{
  background:#fff;
  padding: 150px 0;
  color:#111;
}

#kj_bestcase .kj_inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 15px;
}

/* 헤더 */
#kj_bestcase .kj_head{
  margin-bottom:30px;
}

#kj_bestcase .kj_title{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 50px;
}

/* 태그 */
#kj_bestcase .kj_tags{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

#kj_bestcase .kj_tag{
  appearance:none;
  border: 1px solid #e3e3e3;
  background:#fff;
  color:#777;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

#kj_bestcase .kj_tag:hover,
#kj_bestcase .kj_tag.is-active{
  background:#03adc7;
  border-color:#d7dde3;
  color:#fff;
  font-weight: 700;
}

/* 카드 그리드 */
#kj_bestcase .kj_grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-top: 26px;
}

/* === 카드 내부 레이아웃을 s2처럼: 좌(정보+탕감율) / 우(세로바) === */
#kj_bestcase .kj_card{
	border: 1px solid #e7e7e7;
	background:#fff;
	border-radius: 16px;
	padding: 24px;
	border-radius: 16px;
	box-shadow: 0 8px 22px rgba(0,0,0,0.04);
}

#kj_bestcase .kj_card_tit{
  font-size: 22px;
  margin-bottom: 20px;
}

/* 기존 flex → grid로 전환 */
#kj_bestcase .kj_card_body{
  display: grid;
  grid-template-columns: 1fr 78px; /* 우측 바 공간 */
  column-gap: 22px;
  row-gap: 14px;
  align-items: start;
}

/* 메타: 좌측 상단 */
#kj_bestcase .kj_meta{
  grid-column: 1;
  grid-row: 1;
  gap: 10px;
  margin: 0;
}

#kj_bestcase .kj_meta > div{
  display: flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}

#kj_bestcase .kj_meta dt{
  min-width: 60px;
  font-size: 14px;
  color:#000;
  font-weight: 700;
}

#kj_bestcase .kj_meta dd{
  margin:0;
  font-size: 14px;
  color:#9aa0a6;
  font-weight: 700;
}

/* 탕감율: 좌측 하단 */
#kj_bestcase .kj_rate{
  grid-column: 1;
  grid-row: 2;
  margin-top: 6px;
}

#kj_bestcase .kj_rate_label{
  font-size: 14px;
  color:#000;
  margin-bottom:0px;
}

#kj_bestcase .kj_rate_value{
  display:flex;
  align-items: baseline;
  gap: 4px;

  font-size: 36px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color:#000;
  line-height: 1;
}

#kj_bestcase .kj_rate_value span{
  font-size: 46px; /* s2처럼 숫자 더 크게 */
  color:#0aa8bd;
}

#kj_bestcase .kj_rate_sub{
  margin-top: 8px;
  font-size: 14px;
  color:#9aa0a6;
  font-weight: 700;
}

/* 우측 세로 바: 2열 전체(메타+탕감율 높이만큼) */
#kj_bestcase .kj_bar{
  grid-column: 2;
  grid-row: 1 / span 2;

  height: 190px;
  position: relative;
  display:flex;
  align-items: flex-end;
  justify-content: center;

  /* s2처럼 바 주변이 깔끔하게 */
  border-left: 0;
  padding-left: 0;

  /* 가이드 라인 */
  background:
    repeating-linear-gradient(
      to top,
      rgba(0,0,0,0.06) 0,
      rgba(0,0,0,0.06) 1px,
      transparent 1px,
      transparent 22%
    );
  border-radius: 8px;
}

#kj_bestcase .kj_bar_fill{
  display:block;
  width: 30px;                 /* ✅ 없으면 안 보일 수 있음 */
  height: 0;
  background:#0aa8bd;          /* ✅ 없으면 안 보임 */
  border-radius: 4px 4px 0 0;
  transition: height .9s cubic-bezier(.16,.84,.44,1);
}


/* 반응형에서도 깨지지 않게 */
@media (max-width: 640px){
  #kj_bestcase .kj_card_body{
    grid-template-columns: 1fr 100px;
    column-gap: 16px;
  }
  
  #kj_bestcase .kj_bar_fill{
	  width: 50px;        
  }
  #kj_bestcase .kj_bar{
    height: 170px;
  }
}


/* 하단 버튼 */
#kj_bestcase .kj_more{
  margin-top: 100px;
  display:flex;
  justify-content:center;
}

#kj_bestcase .kj_more_btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  min-width: 260px;
  padding: 16px 18px;
  border-radius: 10px;

  background:#0f2439;
  color:#fff;
  font-weight: 800;
  font-size: 16px;
  text-decoration:none;

  transition: filter .15s ease, transform .15s ease;
}

#kj_bestcase .kj_more_btn i{
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}

#kj_bestcase .kj_more_btn:hover{
  filter: brightness(1.08);
  transform: translateY(-1px);
}
#kj_bestcase .kj_more_btn:hover i{
  transform: translateX(4px);
}



/* =========================
   반응형
========================= */
@media (max-width: 1200px){
  #kj_bestcase .kj_grid{ grid-template-columns: repeat(2, 1fr); }
  #kj_bestcase .kj_title{ font-size: 38px; }
}

@media (max-width: 640px){
  #kj_bestcase{ padding: 80px 0 70px; }
  #kj_bestcase .kj_title{ font-size: 30px; margin-bottom: 18px; }
  #kj_bestcase .kj_grid{ grid-template-columns: 1fr; gap: 14px; }
  #kj_bestcase .kj_card{ padding: 18px; }
  #kj_bestcase .kj_bar{ height: 150px; }
  
  #kj_bestcase .kj_more{
	  margin-top: 50px;
	}
}



/* =========================
  KJ Solve Section
========================= */
/* =========================================================
   KJ SOLVE SECTION (전체 CSS)
   - 우측 슬라이더를 화면 우측에 딱 붙임
   - 배너(카드) 가로 300px 고정
   - 카드 간격(여백) 확실히
   - 카드 텍스트가 아래로 밀려 안보이는 문제 해결
========================================================= */

#kj-solve{
  background:#f4f4f4;
  padding:140px 0;
  overflow:hidden;
}

#kj-solve .kj-inner{
  max-width:1680px;
  margin:0 auto;
  padding:0 24px;

  display:flex;
  gap:60px;
  align-items:flex-start;
}

/* =========================
   LEFT
========================= */
#kj-solve .kj-left{
  flex:0 0 36%;
  padding-left:10px;
}

#kj-solve .kj-brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
}
#kj-solve .kj-brand img{
  height:28px;
  width:auto;
  display:block;
}
#kj-solve .kj-brand span{
  font-size:14px;
  letter-spacing:.16em;
  color:#6b6b6b;
  font-weight:700;
}

#kj-solve .kj-title{
  font-size:56px;
  line-height:1.2;
  font-weight:700;
  color:#1a1a1a;
  letter-spacing:-0.04em;
  margin:0 0 26px;
  word-break:keep-all;
}

#kj-solve .kj-copy{
  color:#3b3b3b;
  font-size:18px;
  line-height:1.5;
  word-break:keep-all;
}
#kj-solve .kj-copy .kj-copy-gap{margin-top:18px;}
#kj-solve .kj-copy .kj-strong{
  margin-top:22px;
  font-weight:900;
  color:#1a1a1a;
}

/* =========================
   RIGHT (slick)
========================= */
#kj-solve .kj-right{
	flex:1 1 auto;
	position:relative;

	margin-right: calc(-50vw + 50%);

	/* ✅ 슬라이더를 우측에 붙이기 */
	display:flex;
	overflow:hidden;
}

/* arrows */
#kj-solve .kj-arrows{
  position:absolute;
  left:0;
  top:0;
  display:none;
  gap:10px;
  z-index:5;
}
#kj-solve .kj-arrows > span{
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
#kj-solve .kj-arrows > span i{
  color:#fff;
  font-size:22px;
}
#kj-solve .kj-arrows > span:hover{
  background:#03adc7;
  transform:translateY(-1px);
}

/* slider container */
#kj-solve .kj-card-slider{
	width:100%;
	max-width:980px;      /* ✅ 보이는 영역(원하면 1100~1200으로) */
	margin-top:0;
}

/* slick spacing / align */
#kj-solve .kj-card-slider .slick-list{
  overflow:visible;     /* 옆 카드 살짝 보이게 */
  padding-right:0 !important;
  margin-right:0 !important;
}
#kj-solve .kj-card-slider .slick-track{
  display:flex !important;
  justify-content:flex-end;  /* ✅ 오른쪽 시작 */
}
#kj-solve .kj-card-slider .slick-slide{
  padding:14px;       /* ✅ 카드 간격 */
  height:auto;
}


#kj-solve .kj-card-slider .slick-slide:first-child{padding-left:0;}
#kj-solve .kj-card-slider .slick-slide:last-child{padding-right:0;}
#kj-solve .kj-card-slider .slick-slide > div{height:100%;}

/* =========================
   CARD (배너)
========================= */
#kj-solve .kj-card{
  width:300px;                /* ✅ 고정 */
  background:#fff;
  border-radius:18px;
  position:relative;

  /* ✅ 텍스트가 안 밀리도록 조정 */
  min-height:420px;      /* 원래 디자인처럼 */
  padding:34px 32px 140px; /* 아이콘(120px) + 여백 확보 */

  box-shadow:0 18px 48px rgba(220,220,220,.10);
  border:1px solid #e5e5e5;
  
   overflow:hidden;
   
	display:flex;
	flex-direction:column;
}


#kj-solve .kj-card-no{
  flex:0 0 auto;
  font-size:22px;
  font-weight:700;
  line-height:1;
  color:#bad6e4;
  margin-top:2px;
  margin-bottom:10px;
}

#kj-solve .kj-no,
#kj-solve .kj-card-tit,
#kj-solve .kj-card-desc{
  position:relative;   /* ✅ 전역 absolute 영향 차단 */
  z-index:2;
}

#kj-solve .kj-no{
  font-size:22px;
  font-weight:900;
  color:rgba(3,173,199,.25);
  margin-bottom:10px;
}

#kj-solve .kj-card-tit{
  font-size:25px;
  line-height:1.25;
  font-weight:700;
  color:#038eb5;
  letter-spacing:-0.03em;
  margin:0 0 10px;
  word-break:keep-all;
}

#kj-solve .kj-card-desc{
  font-size:15px;
  line-height:1.5;
  color:#333;
  margin:0;
  word-break:keep-all;

  /* ✅ 길면 아이콘 영역 침범 방지 */
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* icon bottom-right */
#kj-solve .kj-card-ico{
  position:absolute;
  right:18px;
  bottom:16px;
  width:120px;
  height:120px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  opacity:.95;
}
#kj-solve .kj-card-ico img{
  width:120px;
  height:120px;
  object-fit:contain;
  display:block;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1200px){
  #kj-solve .kj-inner{
    flex-direction:column;
    gap:26px;
  }

  #kj-solve .kj-left{
    width:100%;
    flex:none;
    padding-left:0;
  }

  #kj-solve .kj-right{
    width:100%;
    padding-top:20px;
    justify-content:flex-start; /* 내려오면 좌측 정렬이 자연스러움 */
  }

  #kj-solve .kj-arrows{
    position:relative;
    top:auto;
    margin-bottom:14px;
  }

  #kj-solve .kj-card-slider{
    max-width:100%;
    margin-left:0;
  }

  #kj-solve .kj-card-slider .slick-track{
    justify-content:flex-start;
  }

  #kj-solve .kj-title{font-size:40px;}
}

@media (max-width:768px){
  #kj-solve{
    padding:80px 0;
  }

  #kj-solve .kj-inner{
    padding:0 18px;
  }

  #kj-solve .kj-title{font-size:32px;}
  #kj-solve .kj-copy{font-size:16px;}

  /* ✅ 모바일(unslick) 세로 리스트 */
  #kj-solve .kj-card-slider{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  #kj-solve .kj-card-slider > div{
    width:100%;
  }

  #kj-solve .kj-card.kj-card-row{
    width:100%;
    padding:14px 14px;
    border-radius:12px;
  }
  
  #kj-solve .kj-card { min-height:0; }

  #kj-solve .kj-card-main{
    display:flex;
	gap:10px;
	align-items:flex-start;
	padding-right:0;
  }
  
	#kj-solve .kj-card-body{
		display:flex;
		flex-wrap:wrap;
		align-items:center;
		column-gap:8px;
		row-gap:6px;
	}
		
	  #kj-solve .kj-card-no{
		font-size:20px;
	  }

	/* 타이틀: 번호 옆으로 한줄 */
	  #kj-solve .kj-card.kj-card-row .kj-card-tit{
		margin:0;                 /* 모바일에서 아래 여백 제거 */
		line-height:1.35;
		flex:1 1 auto;            /* 남는 공간 차지 */
		min-width:0;
		font-size:18px;
	  }

	  /* 설명: 다음 줄로 내려오게 */
	  #kj-solve .kj-card.kj-card-row .kj-card-desc{
		width:100%;
		margin-top:0;
	  }
	  

  #kj-solve .kj-card-ico{
    display:none;
    width:64px;
    height:64px;
    right:10px;
    bottom:10px;
  }
  #kj-solve .kj-card-ico img{
    width:64px;
    height:64px;
  }

  #kj-solve .kj-arrows{display:none !important;}
}



/* =========================
   KJ CERT SECTION
========================= */
#kj_cert{
	background-image:url('../img/main/bg_license.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	
	position:relative;
	overflow:hidden;
	padding: 120px 0;
	color:#fff;

}

/* inner */
#kj_cert .kj_inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 60px;
}

/* LEFT */
#kj_cert .kj_left{
  flex: 1 1 auto;
  min-width: 0;
}

#kj_cert .kj_tit{
  margin: 0 0 26px;
  font-size: 46px;
  line-height: 1.25;
  letter-spacing: -0.03em;
  font-weight: 900;
  word-break: keep-all;
}

#kj_cert .kj_desc{
  margin: 0;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(255,255,255,.82);
  word-break: keep-all;
}

#kj_cert .kj_desc .c1{
  color:#18c2d4;
  font-weight: 800;
}

/* RIGHT (상장 영역) */
#kj_cert .kj_right{
  flex: 0 0 auto;
  display:flex;
  justify-content:flex-end;
}

/* ✅ 상장(260x500) */
#kj_cert .kj_cert_box{
  width: 350px;
  height: 494px;
  margin: 0;

  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}

/* 이미지 맞추기 */
#kj_cert .kj_cert_box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

/* (선택) 아래 반사 느낌 */
#kj_cert .kj_cert_box::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 22%;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.35));
  pointer-events:none;
}

/* =========================
   Responsive
========================= */

/* 1024 이하: 상장 조금 줄이기 */
@media (max-width:1024px){
  #kj_cert .kj_inner{ gap: 44px; }
  #kj_cert .kj_tit{ font-size: 34px; }

  #kj_cert .kj_cert_box{
    width: 240px;
    height: 462px;
  }
}

/* 768 이하: 세로 스택 + 상장 아래로 */
@media (max-width:768px){
  #kj_cert{
    padding: 72px 0;
  }

  #kj_cert .kj_inner{
    flex-direction: column;
    align-items:flex-start;
    gap: 26px;
    padding: 0 18px;
  }

  #kj_cert .kj_tit{
    font-size: 28px;
    margin-bottom: 16px;
  }

  #kj_cert .kj_desc{
    font-size: 13px;
    line-height: 1.85;
    max-width: none;
  }

  #kj_cert .kj_right{
    width:100%;
    justify-content:center; 
  }

  #kj_cert .kj_cert_box{
    width: min(260px, 72vw);
    height: auto;
    aspect-ratio: 260 / 500; /* ✅ 비율 유지 */
  }

  #kj_cert .kj_cert_box img{
    width:100%;
    height:100%;
  }
}

/* 420 이하: 더 타이트 */
@media (max-width:420px){
  #kj_cert .kj_tit{ font-size: 24px; }
}


/* =========================
   KJ FAQ (m6 스타일)
========================= */
#kj_faq{
  background:#fff;
  color:#111;
  padding: 110px 0;
}

#kj_faq .kj_inner{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

#kj_faq .kj_faq_head{
  margin-bottom: 46px;
}

#kj_faq .kj_faq_title{
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}

#kj_faq .kj_faq_sub{
  margin: 0;
  font-size: 16px;
  color:#666;
  line-height: 1.7;
}

#kj_faq .kj_faq_sub span{
  color:#0aa8bd;
  font-weight: 800;
}

/* 리스트 라인 */
#kj_faq .kj_faq_list{
  list-style:none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #2a2a2a;
  border-bottom: 1px solid #2a2a2a;
}

/* 아이템 */
#kj_faq .kj_faq_item{
  border-top: 1px solid #e9ecef;
}
#kj_faq .kj_faq_item:first-child{ border-top: 0; }

/* 질문 버튼 */
#kj_faq .kj_faq_q{
  width:100%;
  display:flex;
  align-items:center;
  gap: 16px;

  padding: 28px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;

  text-align:left;
}

#kj_faq .kj_q_text{
  flex: 1 1 auto;
  font-size: 22px;
  font-weight: 800;
  color:#111;
  letter-spacing: -0.02em;
  word-break: keep-all;
}

/* 우측 화살표 */
#kj_faq .kj_faq_q i{
  flex: 0 0 auto;
  font-size: 22px;
  color:#111;
  opacity: .75;
  transition: transform .25s ease, opacity .25s ease;
}

/* 답변 영역 */
#kj_faq .kj_faq_a{
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
  will-change: max-height;
}

#kj_faq .kj_faq_a_inner{
  padding: 0 8px 28px;
  font-size: 16px;
  color:#666;
  line-height: 1.85;
}

/* 오픈 상태 */
#kj_faq .kj_faq_item.is-open .kj_faq_q i{
  transform: rotate(180deg);
  opacity: 1;
}
#kj_faq .kj_faq_item.is-open .kj_q_text{
  color:#111;
}

/* hover */
#kj_faq .kj_faq_q:hover i{ opacity: 1; }

/* =========================
   Responsive
========================= */
@media (max-width: 1024px){
  #kj_faq{ padding: 90px 0; }
  #kj_faq .kj_faq_title{ font-size: 44px; }
}

@media (max-width: 768px){
  #kj_faq{ padding: 70px 0; }
  #kj_faq .kj_inner{ padding: 0 18px; }
  #kj_faq .kj_faq_title{ font-size: 34px; }
  #kj_faq .kj_faq_sub{ font-size: 14px; }

  #kj_faq .kj_faq_q{ padding: 22px 4px; }
  #kj_faq .kj_q_text{ font-size: 17px; }
  #kj_faq .kj_faq_a_inner{ padding: 0 4px 22px; }
}

