body {background:var(--grayBg);}
.header {display:none;}
.footer {display:none;}
#quick {display:none;}


#one_step {}
#one_step.hidden {display:none;}
#two_step {display:none;}
#two_step.visible {display:flex;}
#three_step {display:none;}
#three_step.visible {display:flex;}


.app_wrap {display:flex; flex-wrap:wrap; align-content:center; justify-content:center; min-height:var(--vh);}
.app_wrap .prev-btn {display:block; position:absolute; top:30px; left:20px;}
.app_wrap .prev-btn::before {content:'\e2ea'; font-size:27px; color:var(--black); display:block; line-height:1; font-family:var(--icon);}
.app_wrap .w470 {position:relative; padding:90px 0 100px;  max-width:470px; width:100%; border-radius: 30px; background: var(--white); box-shadow:0px 8px 20px rgba(0, 0, 0, 0.08); height:75vh; display:flex; flex-wrap:wrap; align-content:center; }
.app_wrap .app_tBox {padding:0 50px; box-sizing:border-box; text-align:center; width:100%;}
/* .app_wrap .app_tBox .fs35 {color: var(--black); font-size: 1.9444rem; font-weight: 700; line-height:128.571%; letter-spacing: -2.45px; margin:0 0 8px;} */
/* 마진변경 */
.app_wrap .app_tBox .fs35 {color: var(--black); font-size: 1.9444rem; font-weight: 700; line-height:128.571%; letter-spacing: -2.45px; margin:95px 0 80px;}

#two_step .app_tBox .fs35 {margin:95px 0 80px;}
#three_step .app_tBox .light_stxt {margin:0 0 45px;}
.app_wrap .app_tBox .fs20 {margin:20px 0 4px;}
.app_wrap .app_tBox .stxt {font-weight: 500; line-height:166.667%; letter-spacing: -1.26px;}
.app_wrap .app_tBox span.img {display:block; margin:35px 0;}
.app_wrap .app_tBox .basic-btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; height: 65px; width:100%; text-align:center; font-weight: 700; line-height:155.556%; letter-spacing: -1.26px; background:var(--main); border-radius: 10px; color:var(--white); }
.app_wrap .app_tBox .basic-btn+.basic-btn {margin:5px 0 0;}
.app_wrap .app_tBox .basic-btn.ver2 {background:rgba(190,30,45,0.4);}
.app_wrap .app_tBox .light_stxt {font-size: 0.88rem; font-weight: 500; line-height:162.5%; letter-spacing: -1.12px; color:rgba(34,34,34,0.4); margin:10px 0 0;}
.app_wrap .app_tBox .basic-btn.kakao {background: #F2DA00; color: #3A1C1D;}
.app_wrap .app_tBox .basic-btn.form {background: var(--sub);}
.app_wrap .app_quick {position:absolute; bottom:0; left:0; width:100%; padding:10px 0; display:flex; flex-wrap:Wrap; background: rgba(255, 255, 255, 0.98); box-shadow: 0px -5px 8px 0px rgba(0, 0, 0, 0.08); backdrop-filter: blur(2px); border-radius:0 0 30px 30px;}
.app_wrap .app_quick li {width:25%; box-sizing:border-box;}
.app_wrap .app_quick li+li {border-left:1px solid var(--border);}
.app_wrap .app_quick li a {display:flex; flex-wrap:Wrap; align-content:center; justify-content:center;  height:60px; text-align:center;}
.app_wrap .app_quick li a i {width:27px; aspect-ratio: 3 / 3; display:block; margin:0 auto 2px;}
.app_wrap .app_quick li a span {width:100%; display:block; font-size: 0.88rem; font-weight: 500; line-height:175%; letter-spacing: -1.12px; color:rgba(34,34,34,0.5);}





.step_process {position:relative; display: grid;  grid-template-columns: repeat(6, 1fr); grid-gap:15px; max-width:315px; margin:0 auto;}
.step_process li {position:relative; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; aspect-ratio: 3 / 3; background:rgba(77,97,107,0.2); border-radius:100%; font-size:0.88rem; color:var(--white); font-weight: 700; font-family:var(--eng);}
.step_process li.cur {background:var(--main);}
.step_process li::after {content:''; width:15px; height:2px; background:rgba(77,97,107,0.2); position:absolute; top:50%; right:0; transform:translate(100%,-50%);}
.step_process li:last-of-type::after {display:none;}








/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:470px) { 


.app_wrap .w470 {height:var(--vh); border-radius:0;}

.app_wrap .app_tBox {padding:0 20px;}
.app_wrap .app_tBox .basic-btn {height:48px;}
.app_wrap .app_tBox .fs35 {font-size:1.666rem;}
.app_wrap .app_tBox span.app_img1 {}
.app_wrap .app_tBox span.app_img1 img {max-width:150px;}
.app_wrap .app_tBox span.app_img2 {margin:15px 0;}
.app_wrap .app_tBox span.app_img2 img {max-width:60px;}
#two_step .app_tBox .fs35 {margin:45px 0 40px;}
#three_step .app_tBox .light_stxt {margin:0 0 25px;}




}



/* ============================================
   /en 전용: about 페이지 타이포그래피 및 문단 정리
   ============================================ */

/* 0) 공통 세팅: 자간·단어간격 개선, 브라우저 자동확대 방지 */
html[lang="en"] {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* 1) 본문 문단, 리스트, 설명 텍스트 기본 정렬 및 간격 보정 */
html[lang="en"] :is(.company_cont, .lawyer_cont)
  :is(p, li, dd, dt, span, a, small, blockquote) {
  text-align: left;           /* 문단은 좌측정렬 */
  white-space: normal;        /* 강제 nowrap 해제 */
  word-break: normal;         /* 한 단어 단위로 개행 */
  overflow-wrap: break-word;  /* 너무 긴 단어만 경계에서 줄바꿈 */
  hyphens: auto;              /* 하이픈 자동분리 허용 */
  line-height: 1.6;
  letter-spacing: 0.005em;    /* 자간 약간 넓힘 */
  word-spacing: 0.02em;       /* 단어 간격도 살짝 */
}

/* 2) 문단 내 불필요한 <br> 제거 (디자인상 필요한 곳만 사용) */
html[lang="en"] :is(.company_cont, .lawyer_cont) p br {
  display: none;
}

/* 3) 제목(섹션 타이틀)은 원래 정렬 유지 */
html[lang="en"] :is(.company_cont .top .tit_area, .lawyer_cont .basicCont dl dt h4) {
  text-align: center !important;
  letter-spacing: 0.005em;
}

/* 4) 회사/변호사 설명 블록 내 텍스트 넘침 방지 */
html[lang="en"] :is(.company_cont .top .img_area dl dd,
                    .company_cont .bottom dl dd,
                    .lawyer_cont .basicCont .list dl dd) {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* 5) 이미지 설명문 등 좁은 폭 텍스트에도 안정적 개행 */
html[lang="en"] :is(.company_cont .bottom dl dd p, .lawyer_cont .basicCont .list dl dd p) {
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.6;
  letter-spacing: 0.005em;
  word-spacing: 0.02em;
}

/* 6) 필요 시 개별 블록 수동 정렬용 유틸 */
html[lang="en"] .en-left   { text-align: left !important; }
html[lang="en"] .en-center { text-align: center !important; }