@charset "UTF-8";
/* =========================================================
   hssubpage-min.css
   효성CMS+ 서브페이지 공통 + 페이지별 스타일
   - style.css 다음에 불러옵니다.
   - 시안 본문폭 875px 기준 → --u(1px 단위)로 비율 유지
   ========================================================= */

/* GNB 현재 메뉴 표시 (그누보드 head.php 에서 is-on 클래스 부여) */
.hscms-gnb__item.is-on .hscms-gnb__link{ color:var(--hscms-blue); }
.hscms-gnb__sub a.is-on{ color:var(--hscms-blue); font-weight:700; }

/* 상담폼 : 보안문자(kcaptcha) 레이어
   - [상담신청하기] 를 누르면 상담폼 위에 작게 나타남
   - 그누보드 default.css 의 #captcha(ID) 스타일을 이기기 위해 #hscmsSide 로 시작 */
.hscms-consult__form{ position:relative; }
.hscms-captcha-layer{
  position:absolute; z-index:10; inset:-12px -12px -12px;
  display:flex; align-items:center; justify-content:center;
  padding:12px;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border-radius:16px;
  visibility:hidden; opacity:0;
  transition:opacity .2s, visibility .2s;
}
.hscms-captcha-layer.is-open{ visibility:visible; opacity:1; }
.hscms-captcha-layer__box{
  width:100%; max-width:300px;
  padding:20px 20px 18px;
  border-radius:14px; background:#fff;
  border:1px solid #E6EDF9;
  box-shadow:0 14px 40px rgba(20,40,90,.18);
  transform:translateY(8px) scale(.98); transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.hscms-captcha-layer.is-open .hscms-captcha-layer__box{ transform:none; }
.hscms-captcha-layer__title{ display:block; margin-bottom:4px; font-size:16px; font-weight:700; color:#16181D; }
.hscms-captcha-layer__desc{ margin:0 0 14px; font-size:12.5px; color:var(--hscms-text-sub); }

#hscmsSide #captcha{
  position:relative; display:flex !important; flex-wrap:wrap; align-items:center; gap:8px;
  width:100%; margin:0 0 14px; padding:0; border:0; min-width:0; float:none;
}
#hscmsSide #captcha legend{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
#hscmsSide #captcha #captcha_img{
  flex:1; float:none; width:auto; min-width:0; height:46px; margin:0; object-fit:contain;
  border:1px solid var(--hscms-border); border-radius:8px; background:#fff;
}
#hscmsSide #captcha #captcha_reload{
  flex-shrink:0; float:none; position:static;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; margin:0; padding:0; border:0; border-radius:50%;
  background:#EEF3FD none; color:var(--hscms-blue); text-indent:0; overflow:hidden;
}
#hscmsSide #captcha #captcha_reload:hover{ background-color:#DDE8FD; }
#hscmsSide #captcha #captcha_reload span{ display:none; }
#hscmsSide #captcha #captcha_key{
  flex:0 0 100%; float:none; width:100%; height:44px; margin:0; padding:0 14px;
  border:1px solid var(--hscms-border); border-radius:8px;
  background:#fff; font-size:16px; font-weight:600; letter-spacing:.2em; line-height:normal;
  text-align:center; box-shadow:none;
}
#hscmsSide #captcha #captcha_key:focus{ outline:none; border-color:var(--hscms-blue); }
#hscmsSide #captcha #captcha_mp3,
#hscmsSide #captcha #captcha_info{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden; clip:rect(0 0 0 0); margin:0; padding:0; border:0;
}
.hscms-captcha-layer__btns{ display:flex; gap:8px; }
.hscms-captcha-layer__btns button{
  flex:1; height:42px; border-radius:8px; font-size:14px; font-weight:700;
}
.hscms-captcha-layer__cancel{ border:1px solid var(--hscms-border) !important; background:#fff; color:#3A404C; }
.hscms-captcha-layer__ok{ background:var(--hscms-blue); color:#fff; }
.hscms-captcha-layer__ok:disabled{ opacity:.6; }
.hscms-consult .sound_only{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; margin:0; padding:0; border:0;
}
.hscms-consult form .hscms-consult__select{ margin-bottom:24px; }
.hscms-consult__submit:disabled{ opacity:.6; cursor:default; }

/* 메인 FAQ : 관리자 FAQ 내용(에디터 HTML) 출력 */
.hscms-faq__a-body{ padding:0 20px; font-size:14.5px; line-height:1.8; color:var(--hscms-text-sub); word-break:keep-all; }
.hscms-faq__a-body p{ margin:0 0 6px; padding:0; }
.hscms-faq__a-body p span{font-family: 'Noto Sans KR', sans-serif !important; font-size: 14px !important;}
.hscms-faq__a-body p:last-child{ margin-bottom:0; }
.hscms-faq__a-body img{ max-width:100%; height:auto; }
.hscms-faq__empty{ padding:40px 0; text-align:center; font-size:14.5px; color:var(--hscms-text-mute); border-top:1px solid var(--hscms-border); border-bottom:1px solid var(--hscms-border); }

/* 슬라이더 : 가로 스와이프는 스크립트, 세로는 페이지 스크롤 */
.hscms-slider__viewport{ touch-action:pan-y; }

/* 그누보드 게시판·FAQ 페이지를 새 레이아웃(newhead/newtail) 안에서 볼 때 */
.hscms-layout__main #container_title{
  margin:32px 0 28px; padding:0; text-align:center;
  font-size:30px; font-weight:800; letter-spacing:-.04em; color:#131A2C;
}
.hscms-layout__main #container_title::before{
  content:""; display:block; width:32px; height:3px; margin:0 auto 16px;
  background:#2E6BF6; border-radius:2px;
}
.hscms-layout__main #container_title span{ display:block; }
.hscms-layout__main #bo_list,
.hscms-layout__main #bo_v,
.hscms-layout__main #bo_w,
.hscms-layout__main #faq_wrap{ width:100% !important; max-width:100%; margin-bottom:60px; }
@media (max-width:640px){
  .hscms-layout__main #container_title{ margin:24px 0 20px; font-size:24px; }
}

/* ---------------------------------------------------------
   0. 서브 공통
--------------------------------------------------------- */
.hssub{
  container-type:inline-size;
  position:relative;
  padding:calc(var(--hscms-gap) + 10px) 0 72px;
  color:#16181D;
  word-break:keep-all;
}
.hssub > *{ --u: calc(100cqi / 875); }

.hssub em{ font-style:normal; color:#1E66F5; }
.hssub-company__vision-title em{ white-space:nowrap; }
.hssub-pc{ display:inline; }

/* 페이지 타이틀 */
.hssub-head{ text-align:center; margin-bottom:calc(var(--u) * 48); }
.hssub-head::before{
  content:""; display:block;
  width:32px; height:3px; margin:0 auto calc(var(--u) * 17);
  background:#2E6BF6; border-radius:2px;
}
.hssub-head__title{
  margin:0 0 calc(var(--u) * 18);
  font-size:clamp(26px, calc(var(--u) * 35), 42px); font-weight:700;
  letter-spacing:-.03em; line-height:1.25; color:#111318;
}
.hssub-head__title:last-child{ margin-bottom:0; }
.hssub-head__desc{
  margin:0;
  font-size:clamp(13px, calc(var(--u) * 15.5), 18px);
  color:#6B7079; letter-spacing:-.02em;
}

/* 영문 소제목 (HYOSUNG FMS …) */
.hssub-eyebrow{
  margin:0 0 calc(var(--u) * 16);
  font-size:clamp(10px, calc(var(--u) * 11.5), 13px); font-weight:500;
  letter-spacing:.32em; color:#2E6BF6;
}




/* 화면에서 숨김(스크린리더용) */
.hssub-blind{
  position:absolute !important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}


/* ---------------------------------------------------------
   1. 기업소개 (company.html)
--------------------------------------------------------- */
.hssub-company{ isolation:isolate; }

/* 우측 상단 큰 원 장식 */
.hssub-company::before{
  content:""; position:absolute; z-index:-1;
  right:-6%; top:calc(var(--hscms-gap) + 10px + 100cqi * .105);
  width:28%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 40% 40%, #E6EEFC 0%, #EEF3FD 55%, rgba(238,243,253,0) 72%);
}
.simpleons{display: flex; justify-content: center;}
.simpleons img{border-radius: 30px;}
/* 1-1. 인트로 박스 */
.hssub-company__intro{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:calc(var(--u) * 380);
  padding:calc(var(--u) * 44) 0 calc(var(--u) * 44) calc(var(--u) * 39);
  border-radius:calc(var(--u) * 18);
  background:linear-gradient(100deg, #F1F6FE 0%, #F4F8FE 45%, #F0F5FE 100%);
}
.hssub-company__intro-text{ position:relative; z-index:2; width:62%; }
.hssub-company__intro-title{
  margin:0 0 calc(var(--u) * 26);
  font-size:clamp(20px, calc(var(--u) * 29.5), 35px); font-weight:700;
  line-height:1.36; letter-spacing:-.035em; color:#111318;
}
.hssub-company__intro-desc{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 15.2), 18px);
  line-height:1.9; letter-spacing:-.03em; color:#4B5059;
}
.hssub-company__intro-art{
  position:absolute; right:0; top:0; bottom:0;
  width:calc(var(--u) * 388);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 18%);
          mask-image:linear-gradient(90deg, transparent 0, #000 18%);
}
.hssub-company__intro-art img{ width:100%; height:100%; object-fit:cover; object-position:left center; display:block; }

/* 1-2. 핵심가치 3개 */
.hssub-company__values{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:calc(var(--u) * 17);
  margin:calc(var(--u) * 28) calc(var(--u) * 1) 0;
}
.hssub-company__values li{
  display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--u) * 25) calc(var(--u) * 16) calc(var(--u) * 30);
  background:#fff;
  border-radius:calc(var(--u) * 14);
  box-shadow:0 4px 18px rgba(28,52,110,.06);
  text-align:center;
}
.hssub-company__vicon{
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 84); height:calc(var(--u) * 84);
  min-width:58px; min-height:58px;
  margin-bottom:calc(var(--u) * 22);
  border-radius:50%;
  background:#EEF3FD; color:#1E5BF0;
}
.hssub-company__vicon svg{ width:48%; height:48%; }
.hssub-company__values strong{
  display:block; margin-bottom:calc(var(--u) * 16);
  font-size:clamp(14.5px, calc(var(--u) * 18.5), 22px); font-weight:700;
  letter-spacing:-.05em; color:#16181D; white-space:nowrap;
}
.hssub-company__values p{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 15), 17px);
  line-height:1.8; letter-spacing:-.03em; color:#5B606A;
}

/* 1-3. 비전 박스 */
.hssub-company__vision{
  position:relative; overflow:hidden;
  display:flex; align-items:center;
  min-height:calc(var(--u) * 323);
  margin-top:calc(var(--u) * 30);
  padding:calc(var(--u) * 42) 0 calc(var(--u) * 40) calc(var(--u) * 39);
  border-radius:calc(var(--u) * 18);
  background:
    radial-gradient(60% 90% at 45% 50%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%),
    linear-gradient(100deg, #EEF4FD 0%, #F3F7FE 50%, #EEF4FD 100%);
}
.hssub-company__vision-text{ position:relative; z-index:2; width:100%; }
.hssub-company__vision-title{
  margin:0 0 calc(var(--u) * 24);
  font-size:clamp(19px, calc(var(--u) * 28.5), 34px); font-weight:700;
  line-height:1.4; letter-spacing:-.04em; color:#111318;
}
.hssub-company__vision-desc{
  margin:0; max-width:calc(var(--u) * 560);
  font-size:clamp(12.5px, calc(var(--u) * 15.2), 18px);
  line-height:1.9; letter-spacing:-.03em; color:#4B5059;
}
.hssub-company__vision-art{
  position:absolute; right:0; bottom:0;
  width:calc(var(--u) * 258);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(0deg, #000 70%, transparent);
          mask-image:linear-gradient(90deg, transparent 0, #000 22%);
}
.hssub-company__vision-art img{ width:100%; display:block; }

/* 1-4. 용어 안내 2개 */
.hssub-company__terms{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:calc(var(--u) * 18);
  margin:calc(var(--u) * 31) calc(var(--u) * 1) 0;
}
.hssub-company__term{
  overflow:hidden;
  background:#fff;
  border-radius:calc(var(--u) * 14);
  box-shadow:0 4px 18px rgba(28,52,110,.06);
}
.hssub-company__term-photo{ aspect-ratio:427 / 213; overflow:hidden; }
.hssub-company__term-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.hssub-company__term:hover .hssub-company__term-photo img{ transform:scale(1.04); }
.hssub-company__term-body{
  display:flex; align-items:flex-start;
  gap:calc(var(--u) * 21);
  padding:calc(var(--u) * 17) calc(var(--u) * 22) calc(var(--u) * 30);
}
.hssub-company__term-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 58); height:calc(var(--u) * 58);
  min-width:44px; min-height:44px;
  border-radius:50%;
  background:#EEF3FD; color:#1E5BF0;
}
.hssub-company__term-icon svg{ width:48%; height:48%; }
.hssub-company__term h4{
  margin:calc(var(--u) * 10) 0 calc(var(--u) * 16);
  font-size:clamp(15px, calc(var(--u) * 19), 22px); font-weight:700;
  letter-spacing:-.04em; color:#16181D;
}
.hssub-company__term p{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 14.3), 16.5px);
  line-height:1.72; letter-spacing:-.035em; color:#5B606A;
  word-break:keep-all;
}


/* ---------------------------------------------------------
   2. 이용효과 (advantage.html)
--------------------------------------------------------- */
.hssub-effect{ --ef-blue:#1E6FF5; }
.hssub-effect em{ color:var(--ef-blue); }

/* 2-1. 리드 문구 */
.hssub-effect__lead{ text-align:center; margin-bottom:calc(var(--u) * 38); }
.hssub-effect__lead h3{
  margin:0 0 calc(var(--u) * 24);
  font-size:clamp(16px, calc(var(--u) * 24), 29px); font-weight:700;
  line-height:1.58; letter-spacing:-.04em; color:#131A2C;
}
.hssub-effect__lead p{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 14.5), 17px);
  line-height:1.75; letter-spacing:-.03em; color:#5E6470;
}

/* 2-2. 이용효과 카드 4개 */
.hssub-effect__cards{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:calc(var(--u) * 11);
}
.hssub-effect__cards li{
  display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--u) * 25) calc(var(--u) * 8) calc(var(--u) * 28);
  background:#fff;
  border:1px solid #EEF1F6;
  border-radius:calc(var(--u) * 12);
  box-shadow:0 4px 16px rgba(28,52,110,.05);
  text-align:center;
}
.hssub-effect__cicon{
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 84); height:calc(var(--u) * 84);
  min-width:56px; min-height:56px;
  margin-bottom:calc(var(--u) * 20);
  border-radius:50%;
  background:#EAF2FE; color:var(--ef-blue);
}
.hssub-effect__cicon svg{ width:50%; height:50%; }
.hssub-effect__cards strong{
  display:block; margin-bottom:calc(var(--u) * 12);
  font-size:clamp(14px, calc(var(--u) * 17.5), 21px); font-weight:700;
  letter-spacing:-.04em; color:#16181D; white-space:nowrap;
}
.hssub-effect__cards p{
  margin:0;
  font-size:clamp(11.5px, calc(var(--u) * 13.6), 16.5px);
  line-height:1.72; letter-spacing:-.05em; color:#5B606A;
}
.hssub-effect__cards p b{ font-weight:700; color:#1C2130; }

/* 2-3. 수금률 비교 박스 */
.hssub-effect__improve{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:calc(var(--u) * 44);
  padding:calc(var(--u) * 30) calc(var(--u) * 26) calc(var(--u) * 26) calc(var(--u) * 26);
  border-radius:calc(var(--u) * 18);
  background:
    radial-gradient(38% 60% at 88% 62%, #DCE8FC 0%, rgba(220,232,252,0) 70%),
    linear-gradient(180deg, #F0F6FE 0%, #EEF4FE 100%);
}
.hssub-effect__improve-text{ position:relative; z-index:2; margin-bottom:calc(var(--u) * 26); }
.hssub-effect__improve-title{
  margin:0 0 calc(var(--u) * 14);
  font-size:clamp(20px, calc(var(--u) * 31), 37px); font-weight:800;
  letter-spacing:-.04em; color:#131A2C; line-height:1.3;
}
.hssub-effect__improve-desc{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 16), 19px);
  line-height:1.75; letter-spacing:-.035em; color:#4B5059;
}
.hssub-effect__improve-art{
  position:absolute; z-index:1; right:0; bottom:calc(var(--u) * 6);
  width:calc(var(--u) * 247);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 12%);
          mask-image:linear-gradient(90deg, transparent 0, #000 12%);
}
.hssub-effect__improve-art img{ width:100%; display:block; }

.hssub-effect__rates{
  position:relative; z-index:2;
  width:calc(var(--u) * 621);
  margin-left:calc(var(--u) * -8);
  padding:calc(var(--u) * 16) calc(var(--u) * 22) calc(var(--u) * 22);
  background:#fff;
  border-radius:calc(var(--u) * 12);
  box-shadow:0 6px 22px rgba(28,52,110,.06);
}
.hssub-effect__rates-title{
  margin:0 0 calc(var(--u) * 6);
  font-size:clamp(15px, calc(var(--u) * 18.5), 22px); font-weight:800;
  letter-spacing:.35em; color:var(--ef-blue);
}
.hssub-effect__rate{
  display:grid;
  grid-template-columns:calc(var(--u) * 140) 1fr calc(var(--u) * 96);
  align-items:center;
  height:calc(var(--u) * 48);
  font-size:clamp(12px, calc(var(--u) * 14.5), 17px);
  letter-spacing:-.04em;
}
.hssub-effect__rate-label{ color:#2A2F3A; font-weight:500; white-space:nowrap; }
.hssub-effect__rate-bar{
  position:relative; height:calc(var(--u) * 22); min-height:12px;
  border-radius:99px; background:#F1F3F7; overflow:hidden;
}
.hssub-effect__rate-bar i{
  position:absolute; left:0; top:0; bottom:0;
  width:0; border-radius:inherit;
  background:#C9D1DE;
  transition:width 1.2s cubic-bezier(.2,.8,.2,1);
}
.hssub-effect__rates.is-in .hssub-effect__rate-bar i{ width:var(--v); }
.hssub-effect__rate-val{
  padding-left:calc(var(--u) * 18);
  font-size:clamp(14px, calc(var(--u) * 18.5), 22px); font-weight:700;
  color:#7D8595; white-space:nowrap;
}
.hssub-effect__rate-val small{ font-size:.72em; font-weight:500; margin-right:2px; }
.hssub-effect__rate.is-mid .hssub-effect__rate-bar i{ background:linear-gradient(90deg, #86B8FE, #5E9EFB); }
.hssub-effect__rate.is-mid .hssub-effect__rate-val{ color:#8AAEE8; }
.hssub-effect__rate.is-best .hssub-effect__rate-label{ color:var(--ef-blue); font-weight:700; }
.hssub-effect__rate.is-best .hssub-effect__rate-bar i{ background:linear-gradient(90deg, #2F7BFA, #1E6FF5); }
.hssub-effect__rate.is-best .hssub-effect__rate-val{
  font-size:clamp(20px, calc(var(--u) * 28), 33px); font-weight:800; color:var(--ef-blue);
}
.hssub-effect__rate.is-best .hssub-effect__rate-val small{ font-size:.55em; font-weight:700; }

/* 2-4. Before / After */
.hssub-effect__ba{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--u) * 35);
  margin-top:calc(var(--u) * 24);
}
.hssub-effect__ba-box{
  padding:calc(var(--u) * 20) calc(var(--u) * 22) calc(var(--u) * 20);
  border-radius:calc(var(--u) * 16);
  border:1px solid #EEF1F6;
  background:#FBFCFE;
}
.hssub-effect__ba-box.is-after{ background:#F1F7FE; border-color:#E6EFFC; }
.hssub-effect__ba-head{
  display:flex; align-items:center; gap:calc(var(--u) * 18);
  margin-bottom:calc(var(--u) * 12);
}
.hssub-effect__ba-tag{
  flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:calc(var(--u) * 88); height:calc(var(--u) * 32); min-height:26px;
  padding:0 14px; border-radius:99px;
  background:#EBEFF4; color:#3A404C;
  font-size:clamp(12px, calc(var(--u) * 15), 17px); font-weight:700;
}
.is-after .hssub-effect__ba-tag{ background:var(--ef-blue); color:#fff; }
.hssub-effect__ba-head h3{
  margin:0;
  font-size:clamp(14px, calc(var(--u) * 17.5), 21px); font-weight:700;
  letter-spacing:-.04em; color:#16181D;
}
.is-after .hssub-effect__ba-head h3{ color:var(--ef-blue); }

.hssub-effect__ba-list{
  padding:calc(var(--u) * 2) calc(var(--u) * 14);
  background:#fff;
  border-radius:calc(var(--u) * 12);
  box-shadow:0 4px 16px rgba(28,52,110,.05);
}
.hssub-effect__ba-list li{
  display:flex; align-items:center; gap:calc(var(--u) * 16);
  min-height:calc(var(--u) * 62);
  padding:calc(var(--u) * 8) 0;
}
.hssub-effect__ba-list li + li{ border-top:1px solid #EDEFF3; }
.hssub-effect__ba-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 46); height:calc(var(--u) * 46);
  min-width:36px; min-height:36px;
  border-radius:50%;
  background:#F2F4F7; color:#4A5470;
}
.hssub-effect__ba-icon svg{ width:56%; height:56%; }
.is-after .hssub-effect__ba-icon{ background:#EAF2FE; color:var(--ef-blue); }
.hssub-effect__ba-list strong{
  display:block; margin-bottom:2px;
  font-size:clamp(13px, calc(var(--u) * 15), 18px); font-weight:700;
  letter-spacing:-.04em; color:#16181D;
}
.hssub-effect__ba-list p{
  margin:0;
  font-size:clamp(11px, calc(var(--u) * 12.6), 15px);
  letter-spacing:-.05em; color:#5B606A;
}
.hssub-effect__ba-arrow{
  position:absolute; left:50%; top:50%; z-index:2;
  transform:translate(-50%, -30%);
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 48); height:calc(var(--u) * 48);
  min-width:36px; min-height:36px;
  border-radius:50%;
  background:#fff; color:var(--ef-blue);
  box-shadow:0 4px 16px rgba(28,52,110,.12);
}
.hssub-effect__ba-arrow svg{ width:46%; height:46%; }

/* 2-5. 비교표 */
.hssub-effect__table-wrap{
  margin-top:calc(var(--u) * 24);
  border:1px solid #EAEEF3;
  border-radius:calc(var(--u) * 12);
  overflow:hidden;
  background:#fff;
}
.hssub-effect__table{
  width:100%; border-collapse:collapse; table-layout:fixed;
  font-size:clamp(12px, calc(var(--u) * 13.5), 16px);
  letter-spacing:-.04em; text-align:center;
}
.hssub-effect__table th,
.hssub-effect__table td{
  padding:calc(var(--u) * 12) calc(var(--u) * 8);
  height:calc(var(--u) * 52);
  line-height:1.5; word-break:keep-all;
  border-bottom:1px solid #EAEEF3;
}
.hssub-effect__table th + th,
.hssub-effect__table th + td,
.hssub-effect__table td + td{ border-left:1px solid #EAEEF3; }
.hssub-effect__table tbody tr:last-child > *{ border-bottom:0; }
.hssub-effect__table thead th{
  height:calc(var(--u) * 48);
  background:#F4F7FA;
  font-size:clamp(13px, calc(var(--u) * 15.5), 18px); font-weight:700; color:#16181D;
}
.hssub-effect__table tbody th{ font-weight:700; color:#2A2F3A; }
.hssub-effect__table td{ color:#5B606A; }
.hssub-effect__table .is-cms{ background:#F3F7FE; color:var(--ef-blue); font-weight:700; }
.hssub-effect__table thead .is-cms{ background:#E7F0FD; }
.hssub-effect__table td.is-plain{ color:#4B5059; font-weight:400; }


/* ---------------------------------------------------------
   3. 장점 (strength.html)
--------------------------------------------------------- */
.hssub-strength{ --st-blue:#1468F5; isolation:isolate; }
.hssub-strength em{ color:var(--st-blue); }

/* 좌·우 상단 원 장식 */
.hssub-strength::before,
.hssub-strength::after{
  content:""; position:absolute; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 60% 40%, #EAF1FD 0%, rgba(234,241,253,.6) 50%, rgba(234,241,253,0) 72%);
}
.hssub-strength::before{ left:-10%; top:2%; width:22%; aspect-ratio:1; }
.hssub-strength::after{ right:-4%; top:0; width:14%; aspect-ratio:1; }

/* 3-1. 리드 */
.hssub-strength__lead{ text-align:center; margin-bottom:calc(var(--u) * 44); }
.hssub-strength__lead h3{
  margin:0 0 calc(var(--u) * 20);
  font-size:clamp(16px, calc(var(--u) * 22), 27px); font-weight:500;
  line-height:1.62; letter-spacing:-.04em; color:#1B1E27;
}
.hssub-strength__lead h3 em{ font-weight:700; }
.hssub-strength__lead p{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 14), 16.5px);
  line-height:1.85; letter-spacing:-.04em; color:#5E6470;
}

/* 3-2. 사진 카드 */
.hssub-strength__photos{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--u) * 27);
}
.hssub-strength__photo{
  position:relative; overflow:hidden; isolation:isolate;
  aspect-ratio:424 / 365;
  display:flex; align-items:flex-end;
  border-radius:calc(var(--u) * 14);
  background:#F4F7FB;
  box-shadow:0 4px 18px rgba(28,52,110,.06);
}
.hssub-strength__photo img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.hssub-strength__photo:hover img{ transform:scale(1.04); }
/* 좌측 하단 흰색 페이드 (글자 가독성) */
.hssub-strength__photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.55) 28%, rgba(255,255,255,0) 50%),
    linear-gradient(90deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 55%);
}
.hssub-strength__photo-text{ padding:0 calc(var(--u) * 33) calc(var(--u) * 30); }
.hssub-strength__photo-text h4{
  margin:0 0 calc(var(--u) * 12);
  font-size:clamp(15px, calc(var(--u) * 19.5), 23px); font-weight:700;
  line-height:1.48; letter-spacing:-.04em; color:#14171F;
}
.hssub-strength__photo-text p{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 14.5), 17px);
  line-height:1.6; letter-spacing:-.04em; color:#4B5059;
}

/* 3-3. 필요성 박스 */
.hssub-strength__need{
  display:flex; align-items:center;
  margin-top:calc(var(--u) * 45);
  padding:calc(var(--u) * 44) calc(var(--u) * 36) calc(var(--u) * 44) calc(var(--u) * 40);
  border:1px solid #E6EEF9;
  border-radius:calc(var(--u) * 16);
  background:linear-gradient(100deg, #F1F6FE 0%, #F6F9FE 60%, #F2F7FE 100%);
}
.hssub-strength__need-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 110); height:calc(var(--u) * 110);
  min-width:64px; min-height:64px;
  border-radius:50%;
  background:#E2EEFE; color:var(--st-blue);
}
.hssub-strength__need-icon svg{ width:44%; height:44%; }
.hssub-strength__need-text{
  margin-left:calc(var(--u) * 40);
  padding-left:calc(var(--u) * 37);
  border-left:1px solid #D9E3F2;
}
.hssub-strength__need-text h3{
  margin:0 0 calc(var(--u) * 20);
  font-size:clamp(17px, calc(var(--u) * 21.5), 26px); font-weight:700;
  letter-spacing:-.04em; color:#14171F;
}
.hssub-strength__need-text strong{
  display:block; margin-bottom:calc(var(--u) * 12);
  font-size:clamp(13.5px, calc(var(--u) * 16.5), 19.5px); font-weight:500;
  letter-spacing:-.04em; color:#1B1E27;
}
.hssub-strength__need-text p{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 14), 16.5px);
  line-height:1.85; letter-spacing:-.045em; color:#5E6470;
}

/* 3-4. 4대 장점 */
.hssub-strength__feats{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--u) * 22) calc(var(--u) * 18);
  margin-top:calc(var(--u) * 38);
}
.hssub-strength__feat{
  padding:calc(var(--u) * 34) calc(var(--u) * 32) calc(var(--u) * 34);
  background:#fff;
  border:1px solid #EEF1F6;
  border-radius:calc(var(--u) * 14);
  box-shadow:0 4px 18px rgba(28,52,110,.05);
}
.hssub-strength__feat-head{
  display:flex; align-items:flex-start; gap:calc(var(--u) * 29);
  padding-bottom:calc(var(--u) * 22);
  border-bottom:1px solid #ECEFF4;
}
.hssub-strength__feat-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 86); height:calc(var(--u) * 86);
  min-width:56px; min-height:56px;
  border-radius:50%;
  background:#E6F1FE; color:var(--st-blue);
}
.hssub-strength__feat-icon svg{ width:46%; height:46%; }
.hssub-strength__feat h4{
  margin:calc(var(--u) * 8) 0 calc(var(--u) * 12);
  font-size:clamp(15px, calc(var(--u) * 19.5), 23px); font-weight:700;
  letter-spacing:-.03em; color:#14171F;
}
.hssub-strength__feat h4 em{ font-size:1.1em; font-weight:700; letter-spacing:-.01em; }
.hssub-strength__feat-head p{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 15), 17.5px);
  line-height:1.8; letter-spacing:-.04em; color:#5E6470;
}
.hssub-strength__feat-list{ padding-top:calc(var(--u) * 16); }
.hssub-strength__feat-list li{
  position:relative;
  padding:calc(var(--u) * 4) 0 calc(var(--u) * 4) calc(var(--u) * 27);
  font-size:clamp(12px, calc(var(--u) * 14.5), 17px);
  line-height:1.6; letter-spacing:-.045em; color:#3A3F4A;
}
.hssub-strength__feat-list li::before{
  content:""; position:absolute;
  left:calc(var(--u) * 5); top:calc(var(--u) * 4 + .8em - 3px);
  width:6px; height:6px; border-radius:50%;
  background:var(--st-blue);
}


/* ---------------------------------------------------------
   4. 서비스안내 > CMS 계좌이체 (service-cms.html)
   - 시안 본문폭 744px 기준
--------------------------------------------------------- */
.hssub-cms{ --cms-blue:#2F6BF6; --cms-navy:#0B1437; isolation:isolate; overflow-x:clip; }
.hssub-cms > *{ --u: calc(100cqi / 744); }
.hssub-cms em{ color:var(--cms-blue); }
:where(.hssub-cms) :where(ol, ul){ margin:0; padding:0; list-style:none; }

/* 4-1. 타이틀 + 소개 (우측 원형 패턴 배경) */
.hssub-cms__hero{
  position:relative;
  padding:0 calc(var(--u) * 27) calc(var(--u) * 28);
}
.hssub-cms__hero::before,
.hssub-cms__hero::after{
  content:""; position:absolute; z-index:-1; border-radius:50%;
  background:radial-gradient(circle at 60% 40%, #EAF1FD 0%, rgba(234,241,253,.6) 38%, rgba(234,241,253,0) 0);
}
.hssub-cms__hero::before{ right:calc(var(--u) * -20); top:calc(var(--u) * -70); width:calc(var(--u) * 360); aspect-ratio:1; }
.hssub-cms__hero::after{ right:calc(var(--u) * 190); top:calc(var(--u) * 60); width:calc(var(--u) * 200); aspect-ratio:1; opacity:.9; }
/* 도트 패턴 */
.hssub-cms__hero > .hssub-cms__title::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  right:calc(var(--u) * 40); top:calc(var(--u) * 10);
  width:calc(var(--u) * 190); height:calc(var(--u) * 150);
  background-image:radial-gradient(rgba(47,107,246,.16) 1.2px, transparent 1.6px);
  background-size:calc(var(--u) * 12) calc(var(--u) * 12);
  -webkit-mask-image:radial-gradient(closest-side, #000 30%, transparent);
          mask-image:radial-gradient(closest-side, #000 30%, transparent);
}
.hssub-cms__title{
  margin:0 0 calc(var(--u) * 22);
  font-size:50px; font-weight:700;
  line-height:1.15; letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__title::before{
  content:""; display:block;
  width:calc(var(--u) * 33); min-width:26px; height:3px;
  margin-bottom:calc(var(--u) * 20);
  background:var(--cms-blue); border-radius:2px;
}
.hssub-cms__subtitle{
  margin:0 0 calc(var(--u) * 10);
  font-size:clamp(16px, calc(var(--u) * 17.5), 22px); font-weight:700;
  letter-spacing:-.03em; color:var(--cms-navy);
}
.hssub-cms__desc{
  margin:0 0 calc(var(--u) * 12);
  font-size:clamp(13px, calc(var(--u) * 12.8), 16px);
  line-height:1.65; letter-spacing:-.04em; color:#2E3342;
}
.hssub-cms__note{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 10.8), 13.5px);
  line-height:1.65; letter-spacing:-.04em; color:#7A808C;
}

/* 공통 박스 제목 */
.hssub-cms__box-title{
  margin:0;
  font-size:clamp(16px, calc(var(--u) * 19), 24px); font-weight:700;
  letter-spacing:-.04em; color:var(--cms-navy);
}

/* 4-2. 개요도 (시안 716 x 307 좌표 그대로 배치) */
.hssub-cms__flow{
  position:relative;
  height:calc(var(--u) * 307);
  margin:0 calc(var(--u) * 14);
  border-radius:calc(var(--u) * 14);
  background:#fff;
  box-shadow:0 6px 24px rgba(30,60,130,.07);
}
.hssub-cms__flow .hssub-cms__box-title{ position:absolute; left:calc(var(--u) * 26); top:calc(var(--u) * 18); }
.hssub-cms__flow-map{ position:absolute; inset:0; }
.hssub-cms__flow-lines{ position:absolute; inset:0; width:100%; height:100%; }

.hssub-cms__node{
  position:absolute; top:calc(var(--u) * 113);
  width:calc(var(--u) * 140);
  text-align:center;
}
.hssub-cms__node.is-customer{ left:calc(var(--u) * (86 - 70)); }
.hssub-cms__node.is-org{ left:calc(var(--u) * (293 - 70)); }
.hssub-cms__node.is-bank{ left:calc(var(--u) * (628 - 70)); }
.hssub-cms__node-circle{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:calc(var(--u) * 5);
  width:calc(var(--u) * 88); height:calc(var(--u) * 88);
  margin:0 auto calc(var(--u) * 12);
  border-radius:50%;
  background:#fff; border:1px solid #EEF2F9;
  box-shadow:0 6px 18px rgba(40,80,160,.12);
}
.hssub-cms__node-circle svg{ width:calc(var(--u) * 32); height:calc(var(--u) * 32); }
.hssub-cms__node-circle b{
  font-size:clamp(11px, calc(var(--u) * 12.5), 15px); font-weight:700;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__node p{
  margin:0;
  font-size:clamp(10.5px, calc(var(--u) * 10.3), 13px);
  line-height:1.6; letter-spacing:-.04em; color:#6B7280;
}

.hssub-cms__center{
  position:absolute;
  left:calc(var(--u) * 358); top:calc(var(--u) * 37);
  width:calc(var(--u) * 202); height:calc(var(--u) * 234);
  padding:calc(var(--u) * 13) calc(var(--u) * 8) 0 calc(var(--u) * 24);
  border-radius:calc(var(--u) * 12);
  background:#fff; border:1px solid #EEF2F9;
  box-shadow:0 8px 26px rgba(40,80,160,.10);
}
.hssub-cms__center-badge{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 146); height:calc(var(--u) * 37);
  margin:0 0 calc(var(--u) * 20) calc(var(--u) * 10);
  border-radius:calc(var(--u) * 8);
  background:linear-gradient(180deg, #3B7BFB, #2563EB);
  box-shadow:0 6px 14px rgba(47,107,246,.3);
  color:#fff; font-size:clamp(12px, calc(var(--u) * 14.5), 18px); font-weight:700;
}
.hssub-cms__center-badge::after{
  content:""; position:absolute; left:50%; bottom:calc(var(--u) * -5);
  width:calc(var(--u) * 10); height:calc(var(--u) * 10);
  background:#2563EB; transform:translateX(-50%) rotate(45deg);
}
.hssub-cms__center ol{ display:flex; flex-direction:column; gap:calc(var(--u) * 18); }
.hssub-cms__center li{ display:flex; align-items:center; gap:calc(var(--u) * 12); }
.hssub-cms__center li > span{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 26); height:calc(var(--u) * 26); min-width:20px; min-height:20px;
  border-radius:50%; background:var(--cms-blue);
  color:#fff; font-size:clamp(10px, calc(var(--u) * 11.5), 14px); font-weight:700;
}
.hssub-cms__center b{
  display:block;
  font-size:clamp(11.5px, calc(var(--u) * 12.5), 15px); font-weight:700;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__center small{
  display:block; margin-top:2px;
  font-size:clamp(9.5px, calc(var(--u) * 8.8), 11px);
  letter-spacing:-.06em; color:#6B7280; white-space:nowrap;
}

/* 4-3. 서비스 특징 */
.hssub-cms__service{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:calc(var(--u) * 412);
  margin-top:calc(var(--u) * 22);
  border-radius:calc(var(--u) * 14);
  background:linear-gradient(100deg, #EDF3FD 0%, #F3F7FE 45%, #EAF1FD 100%);
}
.hssub-cms__service-photo{
  position:absolute; z-index:-1; right:0; top:0; bottom:0;
  width:calc(var(--u) * 365);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 22%);
          mask-image:linear-gradient(90deg, transparent 0, #000 22%);
}
.hssub-cms__service-photo img{ width:100%; height:100%; object-fit:cover; object-position:left center; display:block; }
.hssub-cms__service-text{
  width:calc(var(--u) * 400);
  padding:calc(var(--u) * 38) 0 calc(var(--u) * 28) calc(var(--u) * 27);
}
.hssub-cms__eyebrow{
  margin:0 0 calc(var(--u) * 10);
  font-size:clamp(10px, calc(var(--u) * 10.5), 13px); font-weight:700;
  letter-spacing:.14em; color:var(--cms-blue);
}
.hssub-cms__service-title{
  margin:0 0 calc(var(--u) * 12);
  font-size:clamp(24px, calc(var(--u) * 34), 42px); font-weight:800;
  line-height:1.2; letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__service-lead{
  margin:0 0 calc(var(--u) * 16);
  font-size:clamp(14px, calc(var(--u) * 17), 21px);
  line-height:1.6; letter-spacing:-.04em; color:#2E3342;
}
.hssub-cms__checks li{
  display:flex; align-items:center; gap:calc(var(--u) * 11);
  min-height:calc(var(--u) * 28);
  font-size:clamp(12.5px, calc(var(--u) * 12.8), 16px);
  letter-spacing:-.04em; color:#2E3342;
}
.hssub-cms__checks svg{ flex-shrink:0; width:calc(var(--u) * 16); height:calc(var(--u) * 16); min-width:14px; min-height:14px; color:var(--cms-blue); }
.hssub-cms__asp{
  display:flex; align-items:flex-start; gap:calc(var(--u) * 14);
  margin-top:calc(var(--u) * 16);
  padding:calc(var(--u) * 16) 0 0 calc(var(--u) * 14);
  border-top:1px solid #D8E2F1;
}
.hssub-cms__asp-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 22); height:calc(var(--u) * 22); min-width:18px; min-height:18px;
  border-radius:50%; background:#5B8CF5;
  color:#fff; font:italic 700 clamp(11px, calc(var(--u) * 12), 15px)/1 Georgia, serif;
}
.hssub-cms__asp strong{
  display:block; margin-bottom:calc(var(--u) * 4);
  font-size:clamp(11.5px, calc(var(--u) * 11), 14px); font-weight:700;
  letter-spacing:-.03em; color:var(--cms-navy);
}
.hssub-cms__asp p{
  margin:0;
  font-size:clamp(11px, calc(var(--u) * 10), 12.5px);
  line-height:1.6; letter-spacing:-.04em; color:#6B7280;
}

/* 4-4. 섹션 제목 (가입절차 / 구비서류) */
.hssub-cms__sec{ margin-top:calc(var(--u) * 26); }
.hssub-cms__sec-head{ text-align:center; margin-bottom:calc(var(--u) * 20); }
.hssub-cms__sec-head::before{
  content:""; display:block;
  width:calc(var(--u) * 33); min-width:26px; height:3px;
  margin:0 auto calc(var(--u) * 14);
  background:var(--cms-blue); border-radius:2px;
}
.hssub-cms__sec-head h3{
  margin:0 0 calc(var(--u) * 8);
  font-size:clamp(19px, calc(var(--u) * 21.5), 27px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__sec-head p{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 12.3), 15.5px);
  letter-spacing:-.04em; color:#6B7280;
}

/* 4-5. 가입절차 (좌우 지그재그 타임라인) */
.hssub-cms__steps{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:minmax(calc(var(--u) * 19), auto);
  column-gap:calc(var(--u) * 50);
  margin:0 calc(var(--u) * 14);
}
.hssub-cms__steps::before{
  content:""; position:absolute; left:50%; top:0; bottom:calc(var(--u) * 10);
  width:1px; background:#D9E3F2;
}
.hssub-cms__step:nth-child(1){ grid-row:1 / span 6; }
.hssub-cms__step:nth-child(2){ grid-row:5 / span 6; }
.hssub-cms__step:nth-child(3){ grid-row:9 / span 6; }
.hssub-cms__step:nth-child(4){ grid-row:13 / span 6; }
.hssub-cms__step:nth-child(5){ grid-row:17 / span 6; }
.hssub-cms__step:nth-child(6){ grid-row:21 / span 6; }
.hssub-cms__step:nth-child(7){ grid-row:25 / span 6; }
.hssub-cms__step.is-left{ grid-column:1; }
.hssub-cms__step.is-right{ grid-column:2; flex-direction:row-reverse; }

.hssub-cms__step{
  position:relative;
  display:flex; align-items:stretch;
  margin-bottom:calc(var(--u) * 4);
  border-radius:calc(var(--u) * 10);
  background:#fff;
  box-shadow:0 6px 20px rgba(30,60,130,.07);
}
/* 타임라인 점 */
.hssub-cms__step::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:calc(var(--u) * 10); height:calc(var(--u) * 10); min-width:8px; min-height:8px;
  border:2px solid var(--cms-blue); border-radius:50%;
  background:#fff; box-sizing:border-box;
}
.hssub-cms__step.is-left::after{ right:calc(var(--u) * -30); }
.hssub-cms__step.is-right::after{ left:calc(var(--u) * -30); }

.hssub-cms__step-img{
  flex-shrink:0; width:calc(var(--u) * 128);
  overflow:hidden; border-radius:calc(var(--u) * 10);
}
.hssub-cms__step-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.hssub-cms__step-text{ flex:1; min-width:0; padding:calc(var(--u) * 10) calc(var(--u) * 14); }
.hssub-cms__step-no{
  display:inline-block;
  padding:calc(var(--u) * 3) calc(var(--u) * 11);
  border-radius:99px; background:var(--cms-blue);
  color:#fff; font-size:clamp(9px, calc(var(--u) * 9.5), 12px); font-weight:800; letter-spacing:.04em;
}
.hssub-cms__step h4{
  margin:calc(var(--u) * 7) 0 calc(var(--u) * 5);
  font-size:clamp(13px, calc(var(--u) * 14), 17px); font-weight:800;
  letter-spacing:-.05em; color:var(--cms-navy);
}
.hssub-cms__step p{
  margin:0;
  font-size:clamp(10.5px, calc(var(--u) * 9.3), 12px);
  line-height:1.55; letter-spacing:-.05em; color:#5B6272; word-break:keep-all;
}

/* 4-6. 구비서류 */
.hssub-cms__docs{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--u) * 14);
  margin:0 calc(var(--u) * 14);
}
.hssub-cms__doc{
  display:flex; align-items:center; gap:calc(var(--u) * 26);
  padding:calc(var(--u) * 18) calc(var(--u) * 20);
  border-radius:calc(var(--u) * 12);
  background:#fff;
  box-shadow:0 6px 20px rgba(30,60,130,.07);
}
.hssub-cms__doc-type{ flex-shrink:0; width:calc(var(--u) * 92); text-align:center; }
.hssub-cms__doc-icon{
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 72); height:calc(var(--u) * 72); min-width:56px; min-height:56px;
  margin:0 auto calc(var(--u) * 12);
  border-radius:calc(var(--u) * 12);
  background:linear-gradient(160deg, #EEF4FE, #DDE9FD);
}
.hssub-cms__doc-icon svg{ width:52%; height:52%; }
.hssub-cms__doc-type strong{
  font-size:clamp(13px, calc(var(--u) * 14), 17.5px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy); white-space:nowrap;
}
.hssub-cms__doc li{
  display:flex; align-items:center; gap:calc(var(--u) * 8);
  font-size:clamp(11.5px, calc(var(--u) * 10.6), 13.5px);
  line-height:1.75; letter-spacing:-.04em; color:#3A4050;
}
.hssub-cms__doc li svg{ flex-shrink:0; width:calc(var(--u) * 11); height:calc(var(--u) * 11); min-width:10px; min-height:10px; color:var(--cms-blue); }

/* 우편 접수처 */
.hssub-cms__post{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:calc(var(--u) * 8) calc(var(--u) * 12);
  margin:calc(var(--u) * 16) calc(var(--u) * 14) 0;
  padding:calc(var(--u) * 14) calc(var(--u) * 20);
  border-radius:calc(var(--u) * 10);
  background:#F3F7FE; border:1px solid #E3ECFA;
  font-size:clamp(12.5px, calc(var(--u) * 12), 15px);
  letter-spacing:-.03em; color:#3A4050;
}
.hssub-cms__post svg{ width:calc(var(--u) * 18); height:calc(var(--u) * 18); min-width:16px; min-height:16px; color:var(--cms-blue); }
.hssub-cms__post b{ font-weight:700; color:var(--cms-navy); }
.hssub-cms__post b::after{ content:""; display:inline-block; width:1px; height:.9em; margin-left:calc(var(--u) * 12); background:#C9D5EA; vertical-align:-1px; }


/* ---------------------------------------------------------
   5. 서비스안내 > 가상계좌 (service-virtual.html)
   - 4. CMS 계좌이체 스타일(.hssub-cms)을 그대로 쓰고
     개요도만 가상계좌용으로 덮어씀
--------------------------------------------------------- */
/* 노드 위치 (시안 716 x 307 좌표) */
.hssub-va .hssub-cms__node{ top:calc(var(--u) * 116); }
.hssub-va .hssub-cms__node.is-customer{ left:calc(var(--u) * (92 - 70)); }
.hssub-va .hssub-cms__node.is-org{ left:calc(var(--u) * (304 - 70)); }
.hssub-va .hssub-cms__node.is-bank{ left:calc(var(--u) * (634 - 70)); }
.hssub-va .hssub-cms__node-circle{
  width:calc(var(--u) * 104); height:calc(var(--u) * 104);
  gap:calc(var(--u) * 3);
  margin-bottom:calc(var(--u) * 10);
}
.hssub-va .hssub-cms__node-circle svg{ width:calc(var(--u) * 34); height:calc(var(--u) * 34); margin-bottom:calc(var(--u) * 2); }
.hssub-va .hssub-cms__node-circle small{
  display:block;
  font-size:clamp(9px, calc(var(--u) * 8.5), 11px);
  line-height:1.4; letter-spacing:-.05em; color:#7A808C;
}

/* 서비스 특징 사진 : 우측 아이콘이 잘리지 않도록 오른쪽 기준 */
.hssub-va .hssub-cms__service-photo{ width:calc(var(--u) * 400); }
.hssub-va .hssub-cms__service-photo img{ object-position:right center; }

/* 상단 입금 경로 */
.hssub-va__pay{
  position:absolute; z-index:1;
  left:calc(var(--u) * 238); top:calc(var(--u) * 40);
  width:calc(var(--u) * 258); height:calc(var(--u) * 36);
  display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 6);
  margin:0;
  border:1px solid #DCE5F5; border-radius:99px;
  background:#fff;
  box-shadow:0 4px 14px rgba(40,80,160,.08);
  font-size:clamp(10.5px, calc(var(--u) * 10.5), 13px);
  letter-spacing:-.04em; color:#3A4050; white-space:nowrap;
}
.hssub-va__pay svg{ width:calc(var(--u) * 20); height:calc(var(--u) * 20); min-width:16px; min-height:16px; margin-right:calc(var(--u) * 4); }
.hssub-va__pay b{ font-weight:700; color:var(--cms-navy); }
.hssub-va__label{
  position:absolute; left:calc(var(--u) * 198); top:calc(var(--u) * 146);
  transform:translateX(-50%);
  font-size:clamp(10px, calc(var(--u) * 10.5), 13px);
  letter-spacing:-.04em; color:#5B6272; white-space:nowrap;
}

/* 가운데 4단계 목록 */
.hssub-va__list{
  position:absolute;
  left:calc(var(--u) * 391); top:calc(var(--u) * 85);
  width:calc(var(--u) * 162); height:calc(var(--u) * 187);
  display:flex; align-items:center;
  padding:0 calc(var(--u) * 8) 0 calc(var(--u) * 14);
  border:1px solid #E6EDF9; border-radius:calc(var(--u) * 10);
  background:linear-gradient(180deg, #F7FAFF, #F1F6FE);
}
.hssub-va__list ol{ display:flex; flex-direction:column; gap:calc(var(--u) * 14); }
.hssub-va__list li{ display:flex; align-items:center; gap:calc(var(--u) * 10); }
.hssub-va__list li > span{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 22); height:calc(var(--u) * 22); min-width:18px; min-height:18px;
  border-radius:50%; background:var(--cms-blue);
  color:#fff; font-size:clamp(9.5px, calc(var(--u) * 10), 12.5px); font-weight:700;
}
.hssub-va__list b{
  display:block;
  font-size:clamp(11px, calc(var(--u) * 11.5), 14px); font-weight:700;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-va__list small{
  display:block; margin-top:1px;
  font-size:clamp(9px, calc(var(--u) * 7.8), 10px);
  letter-spacing:-.07em; color:#7A808C; white-space:nowrap;
}


/* ---------------------------------------------------------
   6. 서비스안내 > 신용카드결제 (service-card.html)
   - 4. CMS 스타일 + 개요도 확장(좌표형 노드, 번호 라벨)
--------------------------------------------------------- */
/* [개요도 확장] 좌표로 배치하는 노드 : style="--x:110;--y:190" (원 중심 좌표) */
.hssub-cms__node[style]{
  left:calc(var(--u) * (var(--x) - 70));
  top:calc(var(--u) * (var(--y) - 44));
}
/* [개요도 확장] 박스 우측 상단 설명 */
.hssub-cms__box-desc{
  position:absolute; right:calc(var(--u) * 26); top:calc(var(--u) * 26);
  margin:0;
  font-size:clamp(10.5px, calc(var(--u) * 10.5), 13px);
  letter-spacing:-.04em; color:#7A808C;
}
/* [개요도 확장] 화살표 위 번호 라벨 : style="--x:212;--y:96;--n:1" */
.hssub-cms__tag{
  position:absolute; z-index:1;
  left:calc(var(--u) * var(--x)); top:calc(var(--u) * var(--y));
  transform:translate(-50%, -50%);
  display:inline-flex; align-items:center; gap:calc(var(--u) * 6);
  font-size:clamp(10.5px, calc(var(--u) * 11), 13.5px); font-weight:600;
  letter-spacing:-.04em; color:var(--cms-navy); white-space:nowrap;
}
.hssub-cms__tag i{
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 20); height:calc(var(--u) * 20); min-width:17px; min-height:17px;
  border-radius:50%; background:var(--cms-blue);
  color:#fff; font-style:normal; font-size:clamp(9.5px, calc(var(--u) * 10), 12px); font-weight:700;
}
/* [서비스 특징] 전구 안내 박스 */
.hssub-cms__asp--tip{
  align-items:center;
  margin-top:calc(var(--u) * 18);
  padding:calc(var(--u) * 12) calc(var(--u) * 16);
  border:1px solid #DCE5F5; border-top:1px solid #DCE5F5;
  border-radius:calc(var(--u) * 10);
  background:rgba(255,255,255,.6);
}
.hssub-cms__asp--tip p{ color:#3A4050; }
.hssub-cms__tip-icon{ flex-shrink:0; width:calc(var(--u) * 22); height:calc(var(--u) * 22); min-width:18px; min-height:18px; color:var(--cms-blue); }
.hssub-cms__tip-icon svg{ width:100%; height:100%; }

/* 신용카드결제 개요도 높이 */
.hssub-cf .hssub-cms__flow{ height:calc(var(--u) * 350); }
.hssub-cf .hssub-cms__service-text{ padding-top:calc(var(--u) * 34); }
.hssub-cf .hssub-cms__service-photo{ width:calc(var(--u) * 430); }
.hssub-cf .hssub-cms__service-photo img{ object-position:40% center; }


/* ---------------------------------------------------------
   7. 서비스안내 > 현금영수증 (service-receipt.html)
--------------------------------------------------------- */
/* [개요도 확장] 원 안의 보조 문구 (공통) */
.hssub-cms__node-circle small{
  display:block;
  font-size:clamp(9px, calc(var(--u) * 8.5), 11px);
  line-height:1.4; letter-spacing:-.05em; color:#7A808C;
}
.hssub-cr .hssub-cms__flow{ height:calc(var(--u) * 350); }
.hssub-cr .hssub-cms__node-circle{ gap:calc(var(--u) * 2); }

/* [서비스 특징] 혜택 박스 */
.hssub-cms__benefits{ display:flex; flex-direction:column; gap:calc(var(--u) * 12); margin-top:calc(var(--u) * 6); }
.hssub-cms__benefit{
  display:flex; align-items:flex-start; gap:calc(var(--u) * 16);
  padding:calc(var(--u) * 16) calc(var(--u) * 18);
  border-radius:calc(var(--u) * 12);
  background:rgba(255,255,255,.72);
  border:1px solid #E3EBF8;
}
.hssub-cms__benefit-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 50); height:calc(var(--u) * 50); min-width:42px; min-height:42px;
  border-radius:50%; background:#E6EFFD;
}
.hssub-cms__benefit-icon svg{ width:56%; height:56%; }
.hssub-cms__benefit h4{
  margin:calc(var(--u) * 2) 0 calc(var(--u) * 8);
  font-size:clamp(14px, calc(var(--u) * 15), 18.5px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-blue);
}
.hssub-cms__benefit li{
  display:flex; align-items:center; gap:calc(var(--u) * 8);
  font-size:clamp(11.5px, calc(var(--u) * 11), 13.5px);
  line-height:1.9; letter-spacing:-.04em; color:#3A4050;
}
.hssub-cms__benefit li svg{ flex-shrink:0; width:calc(var(--u) * 13); height:calc(var(--u) * 13); min-width:11px; min-height:11px; color:var(--cms-blue); }

/* [서비스 특징] 하단 전체폭 안내 바 */
.hssub-cms__tipbar{
  position:relative; z-index:1;
  display:flex; align-items:center; gap:calc(var(--u) * 20);
  margin:0 calc(var(--u) * 18) calc(var(--u) * 18);
  padding:calc(var(--u) * 14) calc(var(--u) * 26);
  border-radius:calc(var(--u) * 12);
  background:linear-gradient(90deg, #E4EEFD, #EDF3FE);
}
.hssub-cms__tipbar .hssub-cms__tip-icon{ width:calc(var(--u) * 28); height:calc(var(--u) * 28); }
.hssub-cms__tipbar strong{
  display:block; margin-bottom:calc(var(--u) * 3);
  font-size:clamp(13.5px, calc(var(--u) * 14.5), 18px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-blue);
}
.hssub-cms__tipbar p{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 12.8), 16px);
  letter-spacing:-.04em; color:#2E3342;
}
.hssub-cr .hssub-cms__service-photo{ bottom:calc(var(--u) * 80); width:calc(var(--u) * 380); -webkit-mask-image:radial-gradient(ellipse 72% 70% at 62% 50%, #000 62%, transparent 100%); mask-image:radial-gradient(ellipse 72% 70% at 62% 50%, #000 62%, transparent 100%); }
.hssub-cr .hssub-cms__service-photo img{ object-fit:contain; object-position:right center; }
.hssub-cr .hssub-cms__service-text{ padding-bottom:calc(var(--u) * 16); }


/* ---------------------------------------------------------
   8. 서비스안내 > 휴대폰결제 (service-mobile.html)
   - 5. 가상계좌 개요도(.hssub-va) 구조를 함께 사용
--------------------------------------------------------- */
/* 알약 라벨 좌표형 : style="--x:357;--y:58;--w:146" (중심 x, 중심 y, 폭) */
.hssub-va__pay[style]{
  left:calc(var(--u) * (var(--x) - var(--w) / 2));
  top:calc(var(--u) * (var(--y) - 18));
  width:calc(var(--u) * var(--w));
}
.hssub-mp .hssub-va__pay b{ color:var(--cms-blue); }
.hssub-mp .hssub-va__label{ top:calc(var(--u) * 126); text-align:center; font-weight:600; color:var(--cms-navy); }
.hssub-va__label small{ display:block; margin-top:2px; font-weight:400; font-size:.86em; color:#7A808C; }
.hssub-va__list-title{
  display:block; margin-bottom:calc(var(--u) * 12); padding-left:calc(var(--u) * 32);
  font-size:clamp(13px, calc(var(--u) * 15), 18.5px); font-weight:800;
  letter-spacing:-.03em; color:var(--cms-blue);
}
.hssub-mp .hssub-va__list ol{ gap:calc(var(--u) * 12); }
.hssub-mp .hssub-va__list{ top:calc(var(--u) * 80); height:calc(var(--u) * 176); }

/* 서비스 특징 : 문구가 길어 글 영역을 넓게 */
.hssub-mp .hssub-cms__service-text{ width:calc(var(--u) * 470); padding-top:calc(var(--u) * 32); }
.hssub-mp .hssub-cms__service-photo{ width:calc(var(--u) * 272); }
.hssub-mp .hssub-cms__service-photo img{ object-position:center; }
.hssub-mp .hssub-cms__checks li{ font-size:clamp(12px, calc(var(--u) * 11.8), 15px); }
.hssub-mp .hssub-cms__asp--tip p{ font-size:clamp(11.5px, calc(var(--u) * 10.8), 13.5px); }
.hssub-mp .hssub-cms__asp--tip b{ color:var(--cms-navy); }


/* ---------------------------------------------------------
   9. 업종별안내 공통 (industry-*.html)
   - 시안 본문폭 744px 기준(--u), 블록 좌우 여백 14
   - 하단 가입절차/구비서류는 4. CMS 스타일(.hssub-cms__sec) 그대로 사용
--------------------------------------------------------- */
.hssub-ind{ --ind-blue:#1E66F5; }
.hssub-ind .hssub-cms__sec{ margin-top:calc(var(--u) * 34); }

/* 9-1. 타이틀 (영문 소제목 + 제목 + 하단 바) */
.hssub-ind__head{ text-align:center; margin-bottom:calc(var(--u) * 20); }
.hssub-ind__eyebrow{
  margin:0 0 calc(var(--u) * 6);
  font-size:clamp(10px, calc(var(--u) * 9.5), 12.5px); font-weight:600;
  letter-spacing:.1em; color:var(--ind-blue);
}
.hssub-ind__title{
  margin:0;
  font-size:clamp(26px, calc(var(--u) * 27), 36px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__title::after{
  content:""; display:block;
  width:calc(var(--u) * 30); min-width:26px; height:3px;
  margin:calc(var(--u) * 10) auto 0;
  background:var(--ind-blue); border-radius:2px;
}

/* 9-2. 비주얼 + 소개 */
.hssub-ind__hero{
  position:relative;
  display:grid; grid-template-columns:calc(var(--u) * 368) 1fr;
  gap:calc(var(--u) * 32);
  align-items:center;
  margin:0 calc(var(--u) * 14);
}
.hssub-ind__hero::after{ /* 우측 상단 블롭 */
  content:""; position:absolute; z-index:-1;
  right:calc(var(--u) * 0); top:calc(var(--u) * 92);
  width:calc(var(--u) * 50); height:calc(var(--u) * 42);
  border-radius:48% 52% 40% 60% / 55% 45% 55% 45%;
  background:linear-gradient(135deg, #9CC3FF, #D7E6FF);
  opacity:.8;
}
.hssub-ind__hero-photo{
  position:relative; overflow:hidden;
  border-radius:calc(var(--u) * 24);
  aspect-ratio:var(--ar, 346 / 266);
  box-shadow:0 10px 30px rgba(30,60,130,.12);
}
.hssub-ind__hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hssub-ind__hero-text{ position:relative; z-index:1; }
.hssub-ind__tagline{
  margin:0 0 calc(var(--u) * 10);
  font-size:clamp(11.5px, calc(var(--u) * 11), 14px); font-weight:600;
  letter-spacing:-.03em; color:var(--ind-blue);
}
.hssub-ind__hero-title{
  margin:0 0 calc(var(--u) * 14);
  font-size:clamp(19px, calc(var(--u) * 21), 28px); font-weight:800;
  line-height:1.4; letter-spacing:-.04em; color:var(--cms-navy); word-break:keep-all;
}
.hssub-ind__hero-desc{
  margin:0 0 calc(var(--u) * 18);
  font-size:clamp(12px, calc(var(--u) * 10.6), 13.5px);
  line-height:1.7; letter-spacing:-.04em; color:#4B5059;
}
.hssub-ind__quote{
  display:inline-flex; align-items:center; gap:calc(var(--u) * 14);
  margin:0;
  padding:calc(var(--u) * 12) calc(var(--u) * 26) calc(var(--u) * 12) calc(var(--u) * 16);
  border-radius:calc(var(--u) * 10);
  background:#fff; border:1px solid #E6EDF9;
  box-shadow:0 6px 18px rgba(30,60,130,.07);
  font-size:clamp(13px, calc(var(--u) * 12.8), 16px); font-weight:500;
  line-height:1.6; letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__quote span{ width:calc(var(--u) * 22); height:calc(var(--u) * 22); min-width:18px; min-height:18px; color:var(--ind-blue); }
.hssub-ind__quote svg{ width:100%; height:100%; }
.hssub-ind__hero-sub{
  position:absolute; right:calc(var(--u) * -8); bottom:calc(var(--u) * -8);
  width:calc(var(--u) * 128);
  -webkit-mask-image:radial-gradient(ellipse 70% 72% at 50% 50%, #000 70%, transparent 100%);
          mask-image:radial-gradient(ellipse 70% 72% at 50% 50%, #000 70%, transparent 100%);
}
.hssub-ind__hero-sub img{ width:100%; display:block; }

/* 9-3. 대상업종 / 결제수단 */
.hssub-ind__info{
  display:grid; grid-template-columns:calc(var(--u) * 393) 1fr;
  gap:calc(var(--u) * 13);
  margin:calc(var(--u) * 22) calc(var(--u) * 14) 0;
}
.hssub-ind__box{
  position:relative; overflow:hidden;
  padding:calc(var(--u) * 20) calc(var(--u) * 24) calc(var(--u) * 20);
  border-radius:calc(var(--u) * 16);
  background:linear-gradient(135deg, #F1F6FE, #EDF3FD);
  border:1px solid #E6EEFA;
}
.hssub-ind__box h3{
  display:flex; align-items:center; gap:calc(var(--u) * 14);
  margin:0 0 calc(var(--u) * 14);
  font-size:clamp(15px, calc(var(--u) * 16.5), 21px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__box h3 span{ width:calc(var(--u) * 30); height:calc(var(--u) * 30); min-width:24px; min-height:24px; color:var(--ind-blue); }
.hssub-ind__box h3 svg{ width:100%; height:100%; }
.hssub-ind__dots{ display:grid; gap:calc(var(--u) * 2) calc(var(--u) * 16); padding-left:calc(var(--u) * 6); }
.hssub-ind__dots.is-2col{ grid-template-columns:1.25fr 1fr; grid-auto-flow:column; grid-template-rows:repeat(4, auto); }
.hssub-ind__box.is-pay .hssub-ind__dots{ padding-left:calc(var(--u) * 50); }
.hssub-ind__dots li{
  position:relative; padding-left:calc(var(--u) * 16);
  font-size:clamp(11.5px, calc(var(--u) * 11), 14px);
  line-height:1.95; letter-spacing:-.05em; color:#2E3342; white-space:nowrap;
}
.hssub-ind__dots li::before{
  content:""; position:absolute; left:0; top:calc(.975em - 3px);
  width:6px; height:6px; border-radius:50%; background:var(--ind-blue);
}
.hssub-ind__dots small{ font-size:.82em; color:#6B7280; }
.hssub-ind__pay-img, .hssub-ind__box-img{ -webkit-mask-image:radial-gradient(ellipse 56% 56% at 50% 50%, #000 78%, transparent 100%); mask-image:radial-gradient(ellipse 56% 56% at 50% 50%, #000 78%, transparent 100%); }
.hssub-ind__pay-img{
  position:absolute; right:calc(var(--u) * 4); bottom:calc(var(--u) * 6);
  width:calc(var(--u) * 110);
}

/* 9-4. 섹션 제목 (가운데, 바 없음) */
.hssub-ind__sec-head{ text-align:center; margin-bottom:calc(var(--u) * 18); }
.hssub-ind__sec-head h3{
  margin:0 0 calc(var(--u) * 6);
  font-size:clamp(19px, calc(var(--u) * 21.5), 27px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__sec-head p{
  margin:0;
  font-size:clamp(12.5px, calc(var(--u) * 11), 14.5px);
  letter-spacing:-.04em; color:#6B7280;
}

/* 9-5. 도입효과 5칸 */
.hssub-ind__effects{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; /* 카드 개수만큼 자동 분할 */
  gap:calc(var(--u) * 11);
  margin:0 calc(var(--u) * 14);
}
.hssub-ind__effects li{
  display:flex; flex-direction:column; align-items:center;
  padding:calc(var(--u) * 16) calc(var(--u) * 6) calc(var(--u) * 16);
  border-radius:calc(var(--u) * 12);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 18px rgba(30,60,130,.06);
  text-align:center;
}
.hssub-ind__effect-icon{ width:calc(var(--u) * 32); height:calc(var(--u) * 32); min-width:26px; min-height:26px; margin-bottom:calc(var(--u) * 10); color:var(--ind-blue); }
.hssub-ind__effect-icon svg{ width:100%; height:100%; }
.hssub-ind__effects strong{
  margin-bottom:calc(var(--u) * 8);
  font-size:clamp(12.5px, calc(var(--u) * 13), 16px); font-weight:800;
  letter-spacing:-.05em; color:var(--cms-navy); white-space:nowrap;
}
.hssub-ind__effects p{
  margin:0;
  font-size:clamp(10.5px, calc(var(--u) * 9.8), 12.5px);
  line-height:1.65; letter-spacing:-.06em; color:#5B6272;
}

/* 9-6. 도입가이드 (번호 목록) */
.hssub-ind__guide{
  display:flex; flex-direction:column; gap:calc(var(--u) * 8);
  max-width:calc(var(--u) * 596); margin:0 auto;
}
.hssub-ind__guide li{
  display:flex; align-items:center; gap:calc(var(--u) * 16);
  padding:calc(var(--u) * 8) calc(var(--u) * 24) calc(var(--u) * 8) calc(var(--u) * 16);
  border-radius:99px;
  background:#fff; border:1px solid #E9EEF7;
  box-shadow:0 4px 14px rgba(30,60,130,.05);
}
.hssub-ind__guide li > div{ flex:1; min-width:0; }
.hssub-ind__guide-no{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 30); height:calc(var(--u) * 30); min-width:24px; min-height:24px;
  border-radius:50%; background:var(--ind-blue);
  color:#fff; font-size:clamp(11px, calc(var(--u) * 12.5), 15px); font-weight:800;
}
.hssub-ind__guide strong{
  display:block;
  font-size:clamp(12.5px, calc(var(--u) * 12.8), 16px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__guide p{
  margin:calc(var(--u) * 1) 0 0;
  font-size:clamp(11px, calc(var(--u) * 10.3), 13px);
  letter-spacing:-.05em; color:#5B6272;
}
.hssub-ind__guide-icon{ flex-shrink:0; width:calc(var(--u) * 26); height:calc(var(--u) * 26); min-width:22px; min-height:22px; color:#8FB3F8; }
.hssub-ind__guide-icon svg{ width:100%; height:100%; }

/* 9-7. 효성CMS의 특징 (사진 + 카드) */
.hssub-ind__feats{ display:flex; flex-direction:column; gap:calc(var(--u) * 8); margin:0 calc(var(--u) * 35); }
.hssub-ind__feats > li{ display:grid; grid-template-columns:calc(var(--u) * 252) 1fr; align-items:stretch; }
.hssub-ind__feat-photo{ overflow:hidden; border-radius:calc(var(--u) * 10); min-height:calc(var(--u) * 104); }
.hssub-ind__feat-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hssub-ind__feat-text{
  margin-left:calc(var(--u) * -4);
  padding:calc(var(--u) * 12) calc(var(--u) * 26);
  border-radius:calc(var(--u) * 12);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 18px rgba(30,60,130,.06);
}
.hssub-ind__feat-text h4{
  display:flex; align-items:center; gap:calc(var(--u) * 10);
  margin:0 0 calc(var(--u) * 8);
  font-size:clamp(14.5px, calc(var(--u) * 15.5), 19px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__feat-text h4 span{
  padding:calc(var(--u) * 2) calc(var(--u) * 12);
  border-radius:99px; background:var(--ind-blue);
  color:#fff; font-size:clamp(9.5px, calc(var(--u) * 9.5), 12px); font-weight:700; letter-spacing:0;
}
.hssub-ind__feat-text li{
  display:flex; align-items:center; gap:calc(var(--u) * 8);
  font-size:clamp(11.5px, calc(var(--u) * 10.5), 13.5px);
  line-height:1.85; letter-spacing:-.05em; color:#3A4050;
}
.hssub-ind__feat-text li svg{ flex-shrink:0; width:calc(var(--u) * 13); height:calc(var(--u) * 13); min-width:12px; min-height:12px; color:var(--ind-blue); }

/* 9-8. 수납 처리 흐름 (CMS 개요도 스타일) */
.hssub-ind__flow{ height:calc(var(--u) * var(--fh, 184)); }

/* 9-9. 프로그램 특징 3x3 */
.hssub-ind__prog{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:calc(var(--u) * 10);
  margin:0 calc(var(--u) * 29);
}
.hssub-ind__prog li{
  display:flex; align-items:center; gap:calc(var(--u) * 16);
  min-height:calc(var(--u) * 48);
  padding:0 calc(var(--u) * 20);
  border-radius:calc(var(--u) * 10);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 16px rgba(30,60,130,.06);
  font-size:clamp(12px, calc(var(--u) * 12), 15px); font-weight:700;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__prog span{ flex-shrink:0; width:calc(var(--u) * 22); height:calc(var(--u) * 22); min-width:20px; min-height:20px; color:var(--ind-blue); }
.hssub-ind__prog svg{ width:100%; height:100%; }


/* 9-10. 업종별 선택 요소 (페이지에 따라 사용) */
.hssub-ind__hero-left{ display:flex; flex-direction:column; gap:calc(var(--u) * 14); min-width:0; }
/* 사진 위 배지형 문구 */
.hssub-ind__quote.is-on-photo{
  position:absolute; left:calc(var(--u) * 16); bottom:calc(var(--u) * 16);
  padding:calc(var(--u) * 9) calc(var(--u) * 20) calc(var(--u) * 9) calc(var(--u) * 14);
  border-radius:99px; border:0;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:clamp(11.5px, calc(var(--u) * 10.5), 13.5px); line-height:1.5;
}
.hssub-ind__quote.is-on-photo.is-right{ left:auto; right:calc(var(--u) * 12); bottom:calc(var(--u) * 12); }
/* 사진 아래 체크 포인트 박스 */
.hssub-ind__points{
  padding:calc(var(--u) * 14) calc(var(--u) * 26);
  border-radius:calc(var(--u) * 14);
  background:linear-gradient(135deg, #F1F6FE, #EDF3FD);
  border:1px solid #E6EEFA;
}
.hssub-ind__points li{
  display:flex; align-items:center; gap:calc(var(--u) * 10);
  font-size:clamp(11.5px, calc(var(--u) * 10.8), 13.5px);
  line-height:2; letter-spacing:-.05em; color:#2E3342;
}
.hssub-ind__points svg{ flex-shrink:0; width:calc(var(--u) * 16); height:calc(var(--u) * 16); min-width:14px; min-height:14px; color:var(--ind-blue); }
/* 보조 사진 넓은형 : 우측 글 아래에 배치 */
.hssub-ind__hero:has(.hssub-ind__hero-sub.is-wide){ align-items:start; row-gap:calc(var(--u) * 14); }
.hssub-ind__hero:has(.is-wide) .hssub-ind__hero-left{ grid-row:1 / span 2; }
.hssub-ind__hero:has(.is-wide) .hssub-ind__hero-text{ padding-top:calc(var(--u) * 18); }
.hssub-ind__hero-sub.is-wide{
  position:relative; right:auto; bottom:auto; grid-column:2;
  width:100%; max-width:calc(var(--u) * 270);
  overflow:hidden; border-radius:calc(var(--u) * 16);
  -webkit-mask-image:none; mask-image:none;
  box-shadow:0 10px 26px rgba(30,60,130,.12);
}
/* 대상업종 박스 일러스트 */
.hssub-ind__box-img{
  position:absolute; right:calc(var(--u) * 12); bottom:calc(var(--u) * 26);
  width:calc(var(--u) * 100);
}
.hssub-ind__box.is-target:has(.hssub-ind__box-img) .hssub-ind__dots{ padding-right:calc(var(--u) * 100); }
.hssub-ind__box.is-target:has(.hssub-ind__box-img) .hssub-ind__dots li{ white-space:normal; }
/* 프로그램 특징 : 설명 포함형 */
.hssub-ind__prog.has-desc li{ align-items:center; padding:calc(var(--u) * 10) calc(var(--u) * 16); gap:calc(var(--u) * 14); }
.hssub-ind__prog.has-desc span{ width:calc(var(--u) * 28); height:calc(var(--u) * 28); }
.hssub-ind__prog.has-desc b{ display:block; margin-bottom:2px; font-size:clamp(12px, calc(var(--u) * 11.5), 14.5px); }
.hssub-ind__prog.has-desc small{
  display:block;
  font-size:clamp(10.5px, calc(var(--u) * 9), 12px); font-weight:400;
  line-height:1.5; letter-spacing:-.06em; color:#6B7280; word-break:keep-all;
}


/* 박스 제목 아래 설명 */
.hssub-ind__box-desc{
  margin:calc(var(--u) * -8) 0 calc(var(--u) * 12) calc(var(--u) * 44);
  font-size:clamp(11px, calc(var(--u) * 10), 12.5px);
  letter-spacing:-.05em; color:#6B7280;
}
/* 흐름 라벨 : 번호 없는형 / 2줄형 */
.hssub-cms__tag{ text-align:center; line-height:1.35; }
.hssub-cms__tag small{ display:block; font-weight:400; font-size:.88em; color:#6B7280; }
.hssub-cms__tag:has(small){ display:block; }
.hssub-cms__tag:has(small) i{ display:inline-flex; vertical-align:middle; margin:-2px calc(var(--u) * 6) 0 0; }
.hssub-cms__tag:has(small) > span{ display:inline; }


/* 역할별 카드 3개 (도입효과 아래) */
.hssub-ind__roles{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:calc(var(--u) * 11);
  margin:calc(var(--u) * 20) calc(var(--u) * 14) 0;
}
.hssub-ind__roles > li{
  padding:calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 18);
  border-radius:calc(var(--u) * 12);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 18px rgba(30,60,130,.06);
}
.hssub-ind__roles h4{
  display:flex; align-items:center; gap:calc(var(--u) * 14);
  margin:0 0 calc(var(--u) * 12);
  font-size:clamp(13.5px, calc(var(--u) * 14), 17px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-ind__roles h4 span{
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 38); height:calc(var(--u) * 38); min-width:32px; min-height:32px;
  border-radius:50%; background:#EAF2FE; color:var(--ind-blue);
}
.hssub-ind__roles h4 svg{ width:52%; height:52%; }
.hssub-ind__roles .hssub-ind__dots{ padding-left:calc(var(--u) * 4); }


/* 섹션 상단 와이드 사진 (프랜차이즈 등) */
.hssub-ind__banner{
  margin:0 calc(var(--u) * 14) calc(var(--u) * 14);
  border-radius:calc(var(--u) * 14); overflow:hidden;
  aspect-ratio:748 / 260;
  box-shadow:0 8px 24px rgba(30,60,130,.10);
}
.hssub-ind__banner img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 기대효과 카드 (설명문형) */
.hssub-ind__roles.is-text{ margin-top:0; }
.hssub-ind__roles.is-text p{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 11.3), 14px);
  line-height:1.7; letter-spacing:-.05em; color:#5B6272; word-break:keep-all;
}
/* 대상업종 박스만 있을 때 (결제수단 없음) */
.hssub-ind__info.is-single{ grid-template-columns:1fr; }
.hssub-ind__info.is-single .hssub-ind__dots{ grid-template-columns:1fr 1fr; }
/* 특징 카드 : 설명문 + 보조설명 */
.hssub-ind__feat-desc{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 11.3), 14px);
  line-height:1.75; letter-spacing:-.05em; color:#4B5059; word-break:keep-all;
}
.hssub-ind__feat-note{
  margin:calc(var(--u) * 10) 0 0;
  padding:calc(var(--u) * 8) calc(var(--u) * 12);
  border-left:2px solid var(--ind-blue); border-radius:0 calc(var(--u) * 6) calc(var(--u) * 6) 0;
  background:#F1F6FE;
  font-size:clamp(11px, calc(var(--u) * 10), 12.5px);
  line-height:1.6; letter-spacing:-.05em; color:#5B6272;
}
.hssub-ind__feat-note b{ color:var(--ind-blue); }
.hssub-ind__feat-text:has(.hssub-ind__feat-desc){ display:flex; flex-direction:column; justify-content:center; }

/* 이용프로그램 2칸 (배달/우유 등) */
.hssub-ind__programs{
  display:grid; grid-template-columns:1fr 1fr;
  gap:calc(var(--u) * 11);
  margin:0 calc(var(--u) * 14);
}
.hssub-ind__programs > li{
  display:flex; align-items:center; gap:calc(var(--u) * 18);
  padding:calc(var(--u) * 16) calc(var(--u) * 22);
  border-radius:calc(var(--u) * 12);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 18px rgba(30,60,130,.06);
}
.hssub-ind__programs-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 58); height:calc(var(--u) * 58); min-width:48px; min-height:48px;
  border-radius:50%; background:#EAF2FE; color:var(--ind-blue);
}
.hssub-ind__programs-icon svg{ width:48%; height:48%; }
.hssub-ind__programs h4{
  margin:0 0 calc(var(--u) * 4);
  font-size:clamp(13.5px, calc(var(--u) * 14), 17px); font-weight:800; color:var(--cms-navy);
}
.hssub-ind__programs li:nth-child(2) h4{ color:var(--ind-blue); }
.hssub-ind__programs strong{
  display:block; margin-bottom:calc(var(--u) * 6);
  font-size:clamp(12px, calc(var(--u) * 11.5), 14.5px); font-weight:600;
  letter-spacing:-.05em; color:#2E3342;
}
.hssub-ind__programs p{
  margin:0;
  font-size:clamp(11px, calc(var(--u) * 10), 12.5px);
  line-height:1.6; letter-spacing:-.05em; color:#6B7280; word-break:keep-all;
}


/* ---------------------------------------------------------
   10. 서비스안내 추가 요소 (service-payer / service-tax …)
   - 4. CMS 스타일(.hssub-cms)과 함께 사용
--------------------------------------------------------- */
/* 해시태그 */
.hssub-cms__tags{ display:flex; flex-wrap:wrap; gap:calc(var(--u) * 8); margin-top:calc(var(--u) * 18) !important; }
.hssub-cms__tags li{
  padding:calc(var(--u) * 6) calc(var(--u) * 14);
  border-radius:99px; background:#EAF1FD;
  font-size:clamp(12px, calc(var(--u) * 11.5), 14px); font-weight:600;
  letter-spacing:-.02em; color:var(--cms-blue);
}

/* 특징 목록 (아이콘 + 한 줄 설명) */
.hssub-cms__featlist{
  margin:0 calc(var(--u) * 14) !important;
  padding:calc(var(--u) * 6) calc(var(--u) * 26) !important;
  border-radius:calc(var(--u) * 14);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 20px rgba(30,60,130,.07);
}
.hssub-cms__featlist li{
  display:flex; align-items:center; gap:calc(var(--u) * 20);
  padding:calc(var(--u) * 16) 0;
}
.hssub-cms__featlist li + li{ border-top:1px solid #EDF0F5; }
.hssub-cms__featlist-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 46); height:calc(var(--u) * 46); min-width:40px; min-height:40px;
  border-radius:calc(var(--u) * 12); background:#EAF1FD; color:var(--cms-blue);
}
.hssub-cms__featlist-icon svg{ width:50%; height:50%; }
.hssub-cms__featlist p{
  margin:0;
  font-size:clamp(13.5px, calc(var(--u) * 14), 17.5px);
  line-height:1.6; letter-spacing:-.04em; color:#2E3342;
}
.hssub-cms__featlist em, .hssub-cms__leadbox em{ font-weight:700; }

/* 프로세스 (가로 단계) */
.hssub-cms__process{
  display:grid; grid-template-columns:repeat(5, 1fr);
  margin:0 calc(var(--u) * 14) !important;
  border-radius:calc(var(--u) * 14); overflow:hidden;
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 20px rgba(30,60,130,.07);
}
.hssub-cms__process li{
  position:relative;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:calc(var(--u) * 22) calc(var(--u) * 8) calc(var(--u) * 20);
}
.hssub-cms__process li.is-payer{ background:linear-gradient(180deg, #F1F6FE, #EAF1FD); }
.hssub-cms__process li + li::before{   /* 단계 사이 화살표 */
  content:""; position:absolute; left:0; top:calc(var(--u) * 46); z-index:1;
  width:calc(var(--u) * 22); height:calc(var(--u) * 22); min-width:20px; min-height:20px;
  transform:translate(-50%, -50%);
  border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(30,60,130,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m10 7 5 5-5 5' fill='none' stroke='%232F6BF6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:62%; background-repeat:no-repeat; background-position:center;
}
.hssub-cms__process-icon{
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 50); height:calc(var(--u) * 50); min-width:44px; min-height:44px;
  margin-bottom:calc(var(--u) * 12);
  border-radius:50%; background:#EAF1FD; color:var(--cms-blue);
}
.hssub-cms__process li.is-payer .hssub-cms__process-icon{ background:var(--cms-blue); color:#fff; box-shadow:0 6px 14px rgba(47,107,246,.3); }
.hssub-cms__process-icon svg{ width:48%; height:48%; }
.hssub-cms__process-no{
  font-size:clamp(9.5px, calc(var(--u) * 9.5), 12px); font-weight:800;
  letter-spacing:.08em; color:var(--cms-blue);
}
.hssub-cms__process strong{
  margin:calc(var(--u) * 3) 0 calc(var(--u) * 2);
  font-size:clamp(13px, calc(var(--u) * 14), 17px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__process small{ font-size:clamp(10.5px, calc(var(--u) * 10), 12.5px); color:#7A808C; }

/* 안내 바 */
.hssub-cms__infobar{
  display:flex; align-items:flex-start; gap:calc(var(--u) * 10);
  margin:calc(var(--u) * 12) calc(var(--u) * 14) 0;
  padding:calc(var(--u) * 12) calc(var(--u) * 18);
  border-radius:calc(var(--u) * 10);
  background:#F1F6FE; border-left:3px solid var(--cms-blue);
  font-size:clamp(12.5px, calc(var(--u) * 12), 15px);
  line-height:1.6; letter-spacing:-.04em; color:#3A4050;
}
.hssub-cms__infobar > span:first-child{ flex-shrink:0; width:18px; height:18px; margin-top:1px; color:var(--cms-blue); }
.hssub-cms__infobar svg{ width:100%; height:100%; }
.hssub-cms__infobar b{ color:var(--cms-blue); font-weight:700; }

/* 설명 박스 (아이콘 + 제목 + 본문) */
.hssub-cms__leadbox{
  display:flex; align-items:flex-start; gap:calc(var(--u) * 22);
  margin:0 calc(var(--u) * 14);
  padding:calc(var(--u) * 24) calc(var(--u) * 28);
  border-radius:calc(var(--u) * 14);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 20px rgba(30,60,130,.07);
}
.hssub-cms__leadbox-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 56); height:calc(var(--u) * 56); min-width:46px; min-height:46px;
  border-radius:calc(var(--u) * 14); background:#EAF1FD; color:var(--cms-blue);
}
.hssub-cms__leadbox-icon svg{ width:48%; height:48%; }
.hssub-cms__leadbox h4{
  margin:calc(var(--u) * 4) 0 calc(var(--u) * 10);
  font-size:clamp(15px, calc(var(--u) * 16.5), 20px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__leadbox p{
  margin:0 0 calc(var(--u) * 8);
  font-size:clamp(12.5px, calc(var(--u) * 12.3), 15px);
  line-height:1.75; letter-spacing:-.04em; color:#4B5059; word-break:keep-all;
}
.hssub-cms__leadbox p:last-child{ margin-bottom:0; }
.hssub-cms__leadbox.is-warn{ background:#FFF8F1; border-color:#FBDDBE; box-shadow:none; }
.hssub-cms__leadbox.is-warn .hssub-cms__leadbox-icon{ background:#FFE6CC; color:#F26B0F; border-radius:50%; }
.hssub-cms__leadbox.is-warn em{ color:#E0600A; }
.hssub-cms__leadbox.is-solution{ background:linear-gradient(100deg, #EFF5FE, #F6F9FE); border-color:#E1EAF9; box-shadow:none; }

/* 미니 카드 3개 */
.hssub-cms__minicards{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; /* 3개·4개 자동 분할 */
  gap:calc(var(--u) * 12);
  margin:calc(var(--u) * 12) calc(var(--u) * 14) 0 !important;
}
.hssub-cms__minicards li{
  padding:calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius:calc(var(--u) * 12);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 18px rgba(30,60,130,.06);
}
.hssub-cms__minicards-icon{
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 40); height:calc(var(--u) * 40); min-width:36px; min-height:36px;
  margin-bottom:calc(var(--u) * 14);
  border-radius:calc(var(--u) * 10); background:#EAF1FD; color:var(--cms-blue);
}
.hssub-cms__minicards-icon svg{ width:52%; height:52%; }
.hssub-cms__minicards strong{
  display:block; margin-bottom:calc(var(--u) * 6);
  font-size:clamp(14px, calc(var(--u) * 15), 18px); font-weight:800;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__minicards p{
  margin:0;
  font-size:clamp(12px, calc(var(--u) * 11.3), 14px);
  line-height:1.65; letter-spacing:-.05em; color:#5B6272;
}

/* 이미지 + 글 분할 박스 */
.hssub-cms__splitbox{
  display:grid; grid-template-columns:calc(var(--u) * 300) 1fr;
  margin:0 calc(var(--u) * 14);
  border-radius:calc(var(--u) * 14); overflow:hidden;
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 20px rgba(30,60,130,.07);
}
.hssub-cms__splitbox-img{
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, #EEF4FE, #F6F9FE);
}
.hssub-cms__splitbox-img img{ width:100%; height:auto; display:block; }
.hssub-cms__splitbox-text{ padding:calc(var(--u) * 22) calc(var(--u) * 28); align-self:center; }
.hssub-cms__splitbox-text p{
  margin:0 0 calc(var(--u) * 8);
  font-size:clamp(12.5px, calc(var(--u) * 12.3), 15px);
  line-height:1.75; letter-spacing:-.04em; color:#4B5059; word-break:keep-all;
}
.hssub-cms__splitbox-text p:last-child{ margin-bottom:0; }
.hssub-cms__splitbox em{ font-weight:700; }

/* 기능 칩 (아이콘 + 이름, 한 줄) */
.hssub-cms__chips{
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  margin:calc(var(--u) * 12) calc(var(--u) * 14) 0 !important;
  border-radius:calc(var(--u) * 12);
  background:#fff; border:1px solid #EEF2F8;
  box-shadow:0 6px 18px rgba(30,60,130,.06);
}
.hssub-cms__chips li{
  display:flex; align-items:center; justify-content:center; gap:calc(var(--u) * 12);
  padding:calc(var(--u) * 16) calc(var(--u) * 10);
  font-size:clamp(12.5px, calc(var(--u) * 12.8), 15.5px); font-weight:700;
  letter-spacing:-.04em; color:var(--cms-navy);
}
.hssub-cms__chips li + li{ border-left:1px solid #EDF0F5; }
.hssub-cms__chips span{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:calc(var(--u) * 38); height:calc(var(--u) * 38); min-width:34px; min-height:34px;
  border-radius:50%; background:#EAF1FD; color:var(--cms-blue);
}
.hssub-cms__chips svg{ width:50%; height:50%; }

/* 화면 캡처 이미지 */
.hssub-cms__shot{
  margin:0 calc(var(--u) * 14);
  padding:calc(var(--u) * 10);
  border-radius:calc(var(--u) * 14);
  background:linear-gradient(135deg, #EAF1FD, #F4F8FE);
  border:1px solid #E1EAF9;
}
.hssub-cms__shot img{ width:100%; display:block; border-radius:calc(var(--u) * 8); box-shadow:0 8px 24px rgba(30,60,130,.12); }

/* 상담문의 버튼 */
.hssub-cms__cta{ display:flex; justify-content:center; margin-top:calc(var(--u) * 34); }
.hssub-cms__cta-btn{
  display:inline-flex; align-items:center; gap:10px;
  height:calc(var(--u) * 52); min-height:48px;
  padding:0 calc(var(--u) * 34);
  border-radius:99px;
  background:linear-gradient(90deg, #3B7BFB, #2563EB);
  box-shadow:0 10px 24px rgba(47,107,246,.3);
  color:#fff; font-size:clamp(14px, calc(var(--u) * 15), 18px); font-weight:700;
  transition:transform .2s, box-shadow .2s;
}
.hssub-cms__cta-btn svg{ width:18px; height:18px; }
.hssub-cms__cta-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(47,107,246,.36); }

/* [상담문의하기] 로 이동했을 때 우측 상담폼 강조 */
#hscmsSide.is-flash{ animation:hsFlash 1.4s ease; border-radius:16px; }
@keyframes hsFlash{
  0%,100%{ box-shadow:0 0 0 0 rgba(47,107,246,0); }
  30%{ box-shadow:0 0 0 6px rgba(47,107,246,.25); }
}


/* ---------------------------------------------------------
   반응형
--------------------------------------------------------- */
@media (max-width: 1024px){
  .hssub{ padding-top:28px; padding-bottom:56px; }
}

@media (max-width: 640px){
  .hssub-pc{ display:none; }
  .hssub-head{ margin-bottom:28px; }
  .hssub-head::before{ margin-bottom:14px; }
  .hssub-head__title{ margin-bottom:8px; }
  .hssub-head__desc{ padding:0 10px; line-height:1.6; }
  .hssub-eyebrow{ margin-bottom:10px; }
  .hssub-company__intro-title{ margin-bottom:14px; }
  .hssub-company__vision-title{ margin-bottom:14px; }
  .hssub-company::before{ display:none; }

  /* 인트로 : 텍스트 위, 일러스트 아래 */
  .hssub-company__intro{
    flex-direction:column; align-items:stretch;
    padding:28px 22px 0; border-radius:16px;
  }
  .hssub-company__intro-text{ width:100%; }
  .hssub-company__intro-art{
    position:relative; width:100%; max-width:340px; margin:18px auto 0;
    aspect-ratio:388 / 379;
    -webkit-mask-image:linear-gradient(0deg, #000 85%, transparent);
            mask-image:linear-gradient(0deg, #000 85%, transparent);
  }

  .hssub-company__values{ grid-template-columns:1fr; gap:12px; margin-top:16px; }
  .hssub-company__values li{ padding:24px 20px; border-radius:14px; }
  .hssub-company__vicon{ margin-bottom:14px; }
  .hssub-company__values strong{ margin-bottom:8px; white-space:normal; }
  .hssub-company__vision-title em{ white-space:normal; }

  .hssub-company__vision{
    flex-direction:column; align-items:stretch;
    margin-top:16px; padding:28px 22px 0; border-radius:16px;
  }
  .hssub-company__vision-text{ width:100%; }
  .hssub-company__vision-desc{ max-width:none; }
  .hssub-company__vision-art{
    position:relative; width:60%; max-width:220px; margin:10px 0 0 auto;
  }

  .hssub-company__terms{ grid-template-columns:1fr; gap:14px; margin-top:16px; }
  .hssub-company__term{ border-radius:14px; }
  .hssub-company__term-body{ gap:14px; padding:18px 18px 24px; }
  .hssub-company__term h4{ margin:8px 0 8px; }

  /* 이용효과 */
  .hssub-effect__lead{ margin-bottom:24px; }
  .hssub-effect__lead h3{ margin-bottom:12px; }
  .hssub-effect__cards{ grid-template-columns:repeat(2, 1fr); gap:10px; }
  .hssub-effect__cards li{ padding:20px 10px 22px; }
  .hssub-effect__cicon{ margin-bottom:12px; }
  .hssub-effect__cards strong{ margin-bottom:6px; white-space:normal; }

  .hssub-effect__improve{ margin-top:28px; padding:26px 16px 18px; border-radius:16px; }
  .hssub-effect__improve-title{ margin-bottom:8px; }
  .hssub-effect__improve-art{ width:110px; top:12px; bottom:auto; opacity:.55; }
  .hssub-effect__improve-text{ padding-right:70px; margin-bottom:18px; }
  .hssub-effect__rates{ width:100%; margin:0; padding:16px 14px 12px; }
  .hssub-effect__rates-title{ margin-bottom:6px; }
  .hssub-effect__rate{
    grid-template-columns:1fr auto;
    grid-template-areas:"label val" "bar bar";
    row-gap:6px; height:auto; padding:8px 0;
  }
  .hssub-effect__rate-label{ grid-area:label; }
  .hssub-effect__rate-bar{ grid-area:bar; }
  .hssub-effect__rate-val{ grid-area:val; padding-left:0; }

  .hssub-effect__ba{ grid-template-columns:1fr; gap:34px; margin-top:16px; }
  .hssub-effect__ba-box{ padding:18px 14px; border-radius:14px; }
  .hssub-effect__ba-head{ gap:10px; margin-bottom:12px; }
  .hssub-effect__ba-list{ padding:2px 12px; border-radius:12px; }
  .hssub-effect__ba-list li{ gap:12px; padding:12px 0; }
  .hssub-effect__ba-arrow{ transform:translate(-50%, -50%) rotate(90deg); }

  .hssub-effect__table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:12px; }
  .hssub-effect__table{ min-width:640px; }
  .hssub-effect__table th, .hssub-effect__table td{ padding:10px 8px; }

  /* 장점 */
  .hssub-strength::before, .hssub-strength::after{ display:none; }
  .hssub-strength__lead{ margin-bottom:24px; }
  .hssub-strength__lead h3{ margin-bottom:12px; }
  .hssub-strength__photos{ grid-template-columns:1fr; gap:14px; }
  .hssub-strength__photo-text{ padding:0 22px 22px; }
  .hssub-strength__photo-text h4{ margin-bottom:6px; }
  .hssub-strength__need{ flex-direction:column; align-items:flex-start; margin-top:24px; padding:24px 20px; }
  .hssub-strength__need-text{ margin:16px 0 0; padding:16px 0 0; border-left:0; border-top:1px solid #D9E3F2; }
  .hssub-strength__need-text h3{ margin-bottom:10px; }
  .hssub-strength__feats{ grid-template-columns:1fr; gap:14px; margin-top:24px; }
  .hssub-strength__feat{ padding:22px 18px; }
  .hssub-strength__feat-head{ gap:14px; padding-bottom:14px; }
  .hssub-strength__feat h4{ margin:4px 0 6px; }
  .hssub-strength__feat-list{ padding-top:10px; }
  .hssub-strength__feat-list li{ padding:4px 0 4px 16px; }
  .hssub-strength__feat-list li::before{ left:2px; top:calc(4px + .8em - 3px); }

  /* CMS 계좌이체 */
  .hssub-cms__hero{ padding:0 4px 24px; }
  .hssub-cms__hero::after{ display:none; }
  .hssub-cms__hero::before{ right:-60px; top:-30px; width:220px; }
  .hssub-cms__title{ margin-bottom:16px; font-size:34px; }
  .hssub-cms__title::before{ margin-bottom:14px; }
  .hssub-cms__subtitle{ margin-bottom:8px; }
  .hssub-cms__desc{ margin-bottom:8px; }

  .hssub-cms__flow{ height:auto; margin:0; padding:22px 18px 24px; border-radius:14px; }
  .hssub-cms__flow .hssub-cms__box-title{ position:static; margin-bottom:18px; }
  .hssub-cms__flow-map{ position:static; display:flex; flex-direction:column; align-items:center; gap:26px; }
  .hssub-cms__flow-lines{ display:none; }
  .hssub-cms__node, .hssub-cms__center{ position:relative; left:auto !important; top:auto; }
  .hssub-cms__node{ width:100%; }
  .hssub-cms__node-circle{ width:84px; height:84px; margin-bottom:8px; gap:4px; }
  .hssub-cms__node-circle svg{ width:30px; height:30px; }
  .hssub-cms__center{ width:100%; max-width:300px; height:auto; padding:14px 18px 18px; }
  .hssub-cms__center small{ white-space:normal; }
  .hssub-cms__center-badge{ width:100%; height:38px; margin:0 0 16px; }
  .hssub-cms__center ol{ gap:14px; }
  .hssub-cms__center li{ gap:12px; }
  /* 흐름 화살표(↓) */
  .hssub-cms__node:not(.is-bank)::after,
  .hssub-cms__center::after{
    content:""; position:absolute; left:50%; bottom:-19px;
    width:9px; height:9px;
    border-right:1.6px solid #8FA8D8; border-bottom:1.6px solid #8FA8D8;
    transform:translateX(-50%) rotate(45deg);
  }

  .hssub-cms__service{ min-height:0; margin-top:16px; border-radius:14px; display:flex; flex-direction:column; }
  .hssub-cms__service-photo{ position:relative; width:100%; height:220px; -webkit-mask-image:linear-gradient(0deg, transparent 0, #000 30%); mask-image:linear-gradient(0deg, transparent 0, #000 30%); }
  .hssub-cms__service-photo img{ object-position:center top; }
  .hssub-cms__service-text{ width:100%; padding:0 20px 22px; margin-top:-24px; position:relative; }
  .hssub-cms__checks li{ min-height:30px; gap:9px; }
  .hssub-cms__asp{ margin-top:14px; padding:14px 0 0; gap:10px; }

  .hssub-cms__sec{ margin-top:36px; }
  .hssub-cms__sec-head{ margin-bottom:18px; }
  .hssub-cms__sec-head::before{ margin-bottom:12px; }
  .hssub-cms__steps{ display:flex; flex-direction:column; gap:12px; margin:0 0 0 18px; }
  .hssub-cms__steps::before{ left:-11px; top:10px; bottom:10px; }
  .hssub-cms__step, .hssub-cms__step.is-right{ flex-direction:row; margin:0; min-height:96px; border-radius:12px; }
  .hssub-cms__step::after, .hssub-cms__step.is-left::after, .hssub-cms__step.is-right::after{ left:-15px; right:auto; }
  .hssub-cms__step-img{ width:108px; border-radius:12px; }
  .hssub-cms__step-text{ padding:12px 14px; }
  .hssub-cms__step h4{ margin:6px 0 4px; }

  .hssub-cms__docs{ grid-template-columns:1fr; margin:0; gap:12px; }
  .hssub-cms__doc{ gap:16px; padding:18px 16px; border-radius:12px; }
  .hssub-cms__doc-type{ width:80px; }
  .hssub-cms__doc-icon{ margin-bottom:8px; }
  .hssub-cms__post{ margin:12px 0 0; padding:14px 16px; justify-content:flex-start; gap:4px 8px; border-radius:12px; }
  .hssub-cms__post b::after{ display:none; }
  .hssub-cms__post span{ width:100%; }

  /* 가상계좌 */
  .hssub-va .hssub-cms__node{ top:auto; }
  .hssub-va .hssub-cms__node-circle{ width:96px; height:96px; }
  .hssub-va .hssub-cms__node-circle svg{ width:30px; height:30px; }
  .hssub-va__pay{ position:relative; left:auto; top:auto; width:100%; height:auto; min-height:38px; padding:8px 12px; white-space:normal; order:-1; }
  .hssub-va__label{ display:none; }
  .hssub-va .hssub-cms__service-photo{ width:100%; }
  .hssub-va .hssub-cms__service-photo img{ object-position:center 30%; }
  .hssub-va__list{ position:relative; left:auto; top:auto; width:100%; max-width:300px; height:auto; padding:16px 18px; }
  .hssub-va__list ol{ gap:12px; }
  .hssub-va__list small{ white-space:normal; }
  .hssub-va__list::after{
    content:""; position:absolute; left:50%; bottom:-19px;
    width:9px; height:9px;
    border-right:1.6px solid #8FA8D8; border-bottom:1.6px solid #8FA8D8;
    transform:translateX(-50%) rotate(45deg);
  }

  /* 개요도 확장 (좌표형) : 모바일은 노드 2x2 + 번호 라벨 목록 */
  .hssub-cms__box-desc{ position:static; margin:-10px 0 16px; }
  .hssub-cf .hssub-cms__flow{ height:auto; }
  .hssub-cf .hssub-cms__flow-map{ display:grid; grid-template-columns:1fr 1fr; gap:16px 10px; }
  .hssub-cf .hssub-cms__node::after{ display:none; }
  .hssub-cms__node[style]{ left:auto; top:auto; order:0; }
  .hssub-cms__tag{
    position:static; transform:none; order:calc(10 + var(--n));
    grid-column:1 / -1; white-space:normal;
    gap:8px; padding:0 4px;
  }
  .hssub-cf .hssub-cms__tag:nth-of-type(1){ margin-top:6px; }

  /* 현금영수증 */
  .hssub-cr .hssub-cms__flow{ height:auto; }
  .hssub-cr .hssub-cms__flow-map{ display:grid; grid-template-columns:1fr 1fr; gap:16px 10px; }
  .hssub-cr .hssub-cms__node::after{ display:none; }
  .hssub-cr .hssub-cms__service-photo{ bottom:auto; width:100%; -webkit-mask-image:linear-gradient(0deg, transparent 0, #000 30%); mask-image:linear-gradient(0deg, transparent 0, #000 30%); }
  .hssub-cr .hssub-cms__service-photo img{ object-position:center; }
  .hssub-cms__benefit{ padding:14px; gap:12px; }
  .hssub-cms__tipbar{ margin:0 14px 16px; padding:14px 16px; gap:12px; align-items:flex-start; }

  /* 휴대폰결제 */
  .hssub-va__pay[style]{ left:auto; top:auto; width:100%; }
  .hssub-mp .hssub-va__pay[style*="--y:286"]{ order:99; }
  .hssub-mp .hssub-cms__service-text{ width:100%; }
  .hssub-mp .hssub-cms__service-photo{ width:100%; }
  .hssub-va__list-title{ padding-left:0; text-align:center; }
  .hssub-mp .hssub-va__list{ top:auto; height:auto; }

  /* 업종별 공통 */
  .hssub-ind .hssub-cms__sec{ margin-top:36px; }
  .hssub-ind__hero{ grid-template-columns:1fr; gap:20px; margin:0; }
  .hssub-ind__hero::after{ display:none; }
  .hssub-ind__hero-text{ padding-right:0; }
  .hssub-ind__hero-sub{ display:none; }
  .hssub-ind__hero-sub.is-wide{ display:block; grid-column:auto; max-width:none; }
  .hssub-ind__hero:has(.is-wide) .hssub-ind__hero-left{ grid-row:auto; }
  .hssub-ind__quote{ padding:12px 18px; gap:12px; }
  .hssub-ind__info{ grid-template-columns:1fr; margin:24px 0 0; gap:12px; }
  .hssub-ind__box{ padding:18px 18px; }
  .hssub-ind__dots.is-2col{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; }
  .hssub-ind__dots li{ white-space:normal; padding-left:14px; }
  .hssub-ind__effects li:last-child:nth-child(odd){ grid-column:1 / -1; }
  .hssub-ind__box.is-pay .hssub-ind__dots{ padding-left:4px; }
  .hssub-ind__pay-img{ width:90px; }
  .hssub-ind__effects{ grid-auto-flow:row; grid-template-columns:repeat(2, 1fr); margin:0; gap:10px; }
  .hssub-ind__effects li{ padding:18px 10px; }
  .hssub-ind__effects strong{ white-space:normal; }
  .hssub-ind__guide{ max-width:none; gap:10px; }
  .hssub-ind__guide li{ border-radius:16px; padding:12px 14px; gap:12px; align-items:flex-start; }
  .hssub-ind__guide-icon{ display:none; }
  .hssub-ind__feats{ margin:0; gap:14px; }
  .hssub-ind__feats > li{ grid-template-columns:1fr; }
  .hssub-ind__feat-photo{ min-height:0; aspect-ratio:245 / 101; border-radius:12px 12px 0 0; }
  .hssub-ind__feat-text{ margin:0; border-radius:0 0 12px 12px; padding:14px 16px; }
  .hssub-ind__feat-text li{ align-items:flex-start; line-height:1.6; padding:2px 0; }
  .hssub-ind__feat-text li svg{ margin-top:3px; }
  .hssub-ind__flow{ height:auto; }
  .hssub-ind__flow .hssub-cms__flow-map{ display:grid; grid-template-columns:1fr 1fr; gap:16px 10px; }
  .hssub-ind__flow .hssub-cms__node::after{ display:none; }
  .hssub-ind__prog{ grid-template-columns:1fr 1fr; margin:0; gap:8px; }
  .hssub-ind__prog li{ padding:12px; gap:10px; min-height:52px; }

  .hssub-ind__points{ padding:12px 16px; }
  .hssub-ind__points li{ align-items:flex-start; line-height:1.6; padding:3px 0; }
  .hssub-ind__points svg{ margin-top:2px; }
  .hssub-ind__quote.is-on-photo{ left:12px; bottom:12px; padding:8px 14px; }
  .hssub-ind__box-img{ width:76px; bottom:14px; }
  .hssub-ind__box.is-target:has(.hssub-ind__box-img) .hssub-ind__dots{ padding-right:70px; }
  .hssub-ind__prog.has-desc{ grid-template-columns:1fr; }

  .hssub-ind__box-desc{ margin:-6px 0 12px; }
  .hssub-cms__tag{ text-align:left; }
  .hssub-cms__tag:has(small) > span{ display:inline-block; vertical-align:top; }
  .hssub-cms__tag.is-plain{ padding-left:30px; }

  .hssub-ind__roles{ grid-template-columns:1fr; margin:12px 0 0; gap:10px; }
  .hssub-ind__roles > li{ padding:16px 18px; }

  .hssub-ind__programs{ grid-template-columns:1fr; margin:0; gap:10px; }
  .hssub-ind__programs > li{ padding:16px; gap:14px; align-items:flex-start; }

  /* 서비스안내 추가 요소 */
  .hssub-cms__featlist{ margin:0 !important; padding:4px 16px !important; }
  .hssub-cms__featlist li{ gap:14px; align-items:flex-start; padding:14px 0; }
  .hssub-cms__process{ grid-template-columns:1fr; margin:0 !important; }
  .hssub-cms__process li{
    display:grid; grid-template-columns:44px 1fr; column-gap:14px; row-gap:1px;
    align-items:center; text-align:left; padding:14px 16px;
  }
  .hssub-cms__process li + li{ border-top:1px solid #EDF0F5; }
  .hssub-cms__process li + li::before{ display:none; }
  .hssub-cms__process-icon{ grid-row:1 / span 3; margin:0; }
  .hssub-cms__process-no, .hssub-cms__process strong, .hssub-cms__process small{ grid-column:2; margin:0; }
  .hssub-cms__infobar{ margin:10px 0 0; padding:12px 14px; }
  .hssub-cms__leadbox{ flex-direction:column; gap:12px; margin:0; padding:20px 18px; }
  .hssub-cms__leadbox h4{ margin:0 0 8px; }
  .hssub-cms__minicards{ grid-auto-flow:row; grid-template-columns:1fr; margin:10px 0 0 !important; gap:10px; }
  .hssub-cms__minicards li{ padding:18px; }
  .hssub-cms__minicards p br{ display:none; }
  .hssub-cms__shot{ margin:0; padding:6px; overflow-x:auto; }
  .hssub-cms__shot img{ min-width:560px; }

  .hssub-cms__splitbox{ grid-template-columns:1fr; margin:0; }
  .hssub-cms__splitbox-img{ aspect-ratio:452 / 174; }
  .hssub-cms__splitbox-text{ padding:18px; }
  .hssub-cms__chips{ grid-auto-flow:row; grid-template-columns:1fr 1fr; margin:10px 0 0 !important; }
  .hssub-cms__chips li{ justify-content:flex-start; padding:14px; gap:10px; }
  .hssub-cms__chips li + li{ border-left:0; }
  .hssub-cms__chips li:nth-child(even){ border-left:1px solid #EDF0F5; }
  .hssub-cms__chips li:nth-child(n+3){ border-top:1px solid #EDF0F5; }

  .hssub-ind__banner{ margin:0 0 12px; border-radius:12px; aspect-ratio:16 / 8; }
  .hssub-ind__info.is-single .hssub-ind__dots{ grid-template-columns:1fr; }

  .hssub-ind__feat-text h4{ flex-direction:column-reverse; align-items:flex-start; gap:6px; }
  .hssub-ind__feat-text h4 span{ white-space:nowrap; }
}





.join-process{
  width:100%;
  padding:88px 24px 96px;
  background:
    radial-gradient(circle at 8% 0%, rgba(49,130,246,.07), transparent 24%),
    radial-gradient(circle at 92% 20%, rgba(49,130,246,.05), transparent 26%),
    #fff;
}
.join-process__inner{
  width:min(1180px,100%);
  margin:0 auto;
}
.join-process__eyebrow{
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
.join-process__eyebrow span{
  display:inline-flex;
  align-items:center;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:#f2f7ff;
  color:#1b64da;
  font-size:13px;
  font-weight:700;
}
.join-process__title{
  margin:0;
  text-align:center;
  color:#191f28;
  font-size:48px;
  line-height:1.2;
  font-weight:800;
}
.join-process__bar{
  width:44px;
  height:4px;
  margin:18px auto 0;
  border-radius:999px;
  background:#3182f6;
}
.join-process__copy{
  max-width:980px;
  margin:54px auto 0;
}
.join-process__lead{
  margin:0;
  color:var(--ink);
  font-size:34px;
  line-height:1.45;
  font-weight:700;
}
.join-process__desc{
  margin:24px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.8;
}
.join-process__cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:54px;
}
.join-card{
  overflow:hidden;
  border:1px solid rgba(0,0,0,.04);
  border-radius:28px;
  background:#fff;
  box-shadow:0 14px 40px rgba(0,27,55,.07);
  transition:transform .2s ease, box-shadow .2s ease;
}
.join-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 50px rgba(0,27,55,.10);
}
.join-card__image{
  position:relative;
  aspect-ratio: 16/9.3;
  overflow:hidden;
  background:#eef3f8;
}
.join-card__image img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}
.join-card:hover .join-card__image img{transform:scale(1.02)}
.join-card__body{
  padding:28px 30px 30px;
}
.join-card__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:14px;
  border-radius:50%;
  background:var(--blue-soft);
  color:var(--blue);
  font-size:14px;
  font-weight:800;
}
.join-card__title{
  margin:0;
  color:var(--ink);
  font-size:23px;
  line-height:1.4;
  font-weight:800;
}
.join-card__text{
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.join-process__note{
  margin-top:28px;
  padding:22px 24px;
  border:1px solid #dbe8fb;
  border-radius:18px;
  background:#f7fbff;
  color:#4e5968;
  font-size:15px;
  line-height:1.7;
}
.join-process__note strong{color:var(--blue-strong)}

@media (max-width: 900px){
  .join-process{padding:70px 20px 76px}
  .join-process__title{font-size:40px}
  .join-process__lead{font-size:28px}
  .join-process__desc{font-size:17px}
  .join-process__cards{gap:18px}
}

@media (max-width: 700px){
  .join-process{padding:54px 16px 64px}
  .join-process__eyebrow{margin-bottom:10px}
  .join-process__title{font-size:32px}
  .join-process__bar{margin-top:14px}
  .join-process__copy{margin-top:38px}
  .join-process__lead{font-size:24px;line-height:1.5}
  .join-process__desc{margin-top:18px;font-size:15px;line-height:1.75}
  .join-process__cards{
    grid-template-columns:1fr;
    margin-top:34px;
  }
  .join-card{border-radius:22px}
  .join-card__body{padding:22px 22px 24px}
  .join-card__title{font-size:21px}
  .join-card__text{font-size:14px}
  .join-process__note{font-size:14px}
}

@media (max-width: 420px){
  .join-process{padding-left:14px;padding-right:14px}
  .join-process__title{font-size:29px}
  .join-process__lead{font-size:22px}
}


/********로그인*******/

.portal{
  min-height:100vh;
  padding:72px 24px 96px;
}
.portal__inner{
  width:min(1180px,100%);
  margin:0 auto;
}
.hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:40px;
  align-items:center;
  min-height:320px;
  padding:56px 58px;
  border-radius:34px;
  background:linear-gradient(135deg,#ffffff 0%,#f8fbff 58%,#eef6ff 100%);
  border:1px solid #edf1f5;
  box-shadow:0 14px 36px rgba(31,45,61,.07);
}
.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.hero::before{
  width:280px;height:280px;
  right:-70px;top:-80px;
  background:rgba(49,130,246,.08);
}
.hero::after{
  width:150px;height:150px;
  right:170px;bottom:-70px;
  background:rgba(49,130,246,.06);
}
.hero__copy{position:relative;z-index:2}
.hero__badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:34px;
  padding:0 14px;
  border-radius:999px;
  background:#eef6ff;
  color:#1b64da;
  font-size:13px;
  font-weight:800;
}
.hero__title{
  margin:18px 0 14px;
  color:#191f28;
  font-size:52px;
  line-height:1.14;
  font-weight:800;
}
.hero__desc{
  margin:0;
  color:#6b7684;
  font-size:18px;
  line-height:1.75;
}
.hero__visual{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
}
.mock{
  width:min(360px,100%);
  padding:22px;
  border-radius:28px;
  background:#fff;
  box-shadow:0 22px 50px rgba(49,130,246,.12);
  border:1px solid #e9f0f8;
}
.mock__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
}
.mock__dot{
  width:9px;height:9px;border-radius:50%;background:#3182f6;
  box-shadow:16px 0 0 #9fc5ff,32px 0 0 #d7e8ff;
}
.mock__status{
  font-size:12px;
  font-weight:700;
  color:var(--muted);
}
.mock__panel{
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg,#f6faff 0%,#eef6ff 100%);
}
.mock__panel strong{
  display:block;
  margin-bottom:8px;
  color:var(--ink);
  font-size:18px;
}
.mock__panel span{
  font-size:14px;color:var(--muted)
}
.mock__rows{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.mock__row{
  display:flex;
  align-items:center;
  gap:10px;
  height:50px;
  padding:0 14px;
  border-radius:14px;
  background:#fff;
  border:1px solid #eef1f4;
}
.mock__row i{
  width:28px;height:28px;border-radius:9px;
  display:grid;place-items:center;
  background:#eef6ff;
  color:#3182f6;
  font-style:normal;
  font-size:14px;
}
.mock__row b{font-size:14px;color:var(--text)}

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin:54px 0 20px;
}
.section-head h2{
  margin:0;
  color:var(--ink);
  font-size:30px;
  font-weight:800;
}
.section-head p{
  margin:0;
  color:var(--muted);
  font-size:15px;
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.service{
  display:grid;
  grid-template-columns:72px 1fr auto;
  gap:18px;
  align-items:center;
  min-height:126px;
  padding:22px 22px;
  border:1px solid #edf0f3;
  border-radius:24px;
  background:#fff;
  box-shadow:0 8px 24px rgba(31,45,61,.045);
  transition:.18s ease;
}
.service:hover{
  transform:translateY(-3px);
  border-color:#dce9fb;
  box-shadow:0 16px 34px rgba(31,45,61,.08);
}
.service__icon{
  width:72px;height:72px;
  border-radius:22px;
  display:grid;place-items:center;
  background:linear-gradient(145deg,#f2f7ff,#e4efff);
  color:#3182f6;
}
.service__icon svg{width:34px;height:34px}
.service__body h3{
  margin:0 0 6px;
  color:var(--ink);
  font-size:19px;
  font-weight:800;
}
.service__body p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}
.service__go{
  width:46px;height:46px;
  border-radius:15px;
  display:grid;place-items:center;
  background:#3182f6;
  color:#fff;
  font-size:22px;
  box-shadow:0 8px 18px rgba(49,130,246,.22);
  transition:.18s ease;
}
.service:hover .service__go{background:#1b64da;transform:translateX(2px)}

.notice{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:24px;
  padding:18px 20px;
  border-radius:18px;
  background:#f1f6fb;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.notice strong{color:var(--text)}

@media(max-width:900px){
  .portal{padding:48px 20px 72px}
  .hero{
    grid-template-columns:1fr;
    padding:42px 36px;
  }
  .hero__title{font-size:44px}
  .hero__visual{justify-content:flex-start}
  .service-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .portal{padding:28px 14px 48px}
  .hero{
    min-height:auto;
    padding:30px 22px;
    border-radius:26px;
    gap:28px;
  }
  .hero__title{font-size:34px}
  .hero__desc{font-size:15px}
  .mock{width:100%;border-radius:22px}
  .section-head{
    align-items:flex-start;
    flex-direction:column;
    margin-top:38px;
  }
  .section-head h2{font-size:26px}
  .service{
    grid-template-columns:58px 1fr 42px;
    gap:14px;
    padding:18px;
    border-radius:20px;
  }
  .service__icon{
    width:58px;height:58px;border-radius:18px;
  }
  .service__icon svg{width:28px;height:28px}
  .service__body h3{font-size:17px}
  .service__body p{font-size:13px}
  .service__go{width:42px;height:42px;border-radius:13px}
}