/*
 * intr_welfare_01.css
 * bzp 사이트 bzp 복지DX 상품 소개 페이지 스타일
 * 문의 영역(s5)·본문 규칙 모두 이 파일에 .iw01 스코프로 포함한다(공용 bizpr_main.css 는 로드하지 않는다).
 * 원안(bzp_복지DX.html)의 인라인 <style> 중 본문/섹션5(도입 문의)/반응형 규칙만 옮겼다.
 * (원안 헤더/푸터/퀵네비 규칙은 공용 inc_bzp_main_header/footer 가 가지므로 제외, Pretendard 는 원안 임베드 폰트를 PretendardIwel 로 추출해 선언)
 * 원안 body/html/a/* 등 전역 규칙은 .iw01 스코프로 한정했다(공용 헤더/푸터 영향 방지).
 * 사용처: SPTL_PT/web/sp/bizpr/intr_welfare_01_view.jsp (이 화면 전용, 다른 intr_*_01 과 공유하지 않는다)
 * @History : 20261002, 박소현 - 신규
 *            20261002, 박소현 - 문의 영역(s5) 규칙을 원안 값 그대로 .iw01 스코프로 이관(bizpr_main.css 의존 제거), 원안 임베드 폰트(PretendardIwel) 선언, 본문 기본 16px 복원
 *            20261002, 박소현 - 원안 body 상단 여백(80px, 모바일 64px) 반영(.iw01 padding-top)
 */

/* ===== 헤더 (이 화면 한정 보정) ===== */
/* 스크롤 0(.scrolled 없음)에서도 스크롤 상태 헤더(공용 .site-header.scrolled 값과 동일) 유지. 공용 헤더 파일은 수정하지 않음 */
.site-header.hdr-onlight:not(.scrolled){background:#ffffff;box-shadow:0 2px 8px rgba(8,18,60,.08)}

/* ===== 폰트 (원안 임베드 Pretendard 2종을 그대로 추출) ===== */
/* 공용 헤더(inc_bzp_main_header.comm.jsp)의 Pretendard 가변폰트(45~920)가 reset.css 의 html *{font-family:Pretendard} 로 전 요소에 적용되어 글자폭이 원안과 달라짐 -> 원안 임베드 폰트(400~600 / 601~900)를 화면 전용 이름으로 선언해 .iw01 에만 적용 */
@font-face{font-family:"PretendardIwel";src:url("/font/PretendardIwel-400-600.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap;}
@font-face{font-family:"PretendardIwel";src:url("/font/PretendardIwel-601-900.woff2") format("woff2");font-weight:601 900;font-style:normal;font-display:swap;}

/* ===== 화면 기본 + 본문 컴포넌트 (원안 head <style>, .iw01 스코프) ===== */
:where(.iw01) *{box-sizing:border-box;}
/* 20261002, 박소현 - 원안 body 상단 여백(80px, 모바일 64px) 반영(.iw01 padding-top). 공용 .site-header 가 fixed 80px 라 section1 이 가려짐 */
.iw01{margin:0;padding-top:80px;background:#ffffff;color:#00003B;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;letter-spacing:-.01em;}
@media (max-width:767px){ .iw01{padding-top:64px;} }
.iw01,.iw01 *{font-family:"PretendardIwel","Pretendard",system-ui,-apple-system,sans-serif;}
/* 원안 테이블은 table-layout:auto (공용 reset.css:59 table{table-layout:fixed} 대응) — 현재 원안 본문에 table 은 없으나 안전장치로 화면 스코프에서 복원 */
.iw01 table{table-layout:auto;}
:where(.iw01) a{color:#1A32D8;text-decoration:none;}
:where(.iw01) a:hover{color:#001999;}
:where(.iw01) .fcard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1);}
:where(.iw01) .fcard:hover{border-color:#6A88F5;box-shadow:0 4px 6px rgba(20,34,77,.04),0 22px 42px rgba(52,103,255,.16);}
:where(.iw01) .hbtn:hover{background:#001999;}
:where(.iw01) .tab{flex:1;text-align:center;font-size:14px;padding:11px 8px;border-radius:999px;white-space:nowrap;cursor:pointer;border:none;background:transparent;color:#8B8B8B;font-weight:500;font-family:inherit;}
:where(.iw01) .tab[aria-selected="true"]{background:#1A32D8;color:#ffffff;font-weight:700;}
:where(.iw01) .scard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1),background .3s;}
:where(.iw01) .scard:hover{background:#131A63;border-color:#6A88F5;box-shadow:0 3px 5px rgba(0,0,40,.34),0 12px 22px rgba(30,50,140,.26);}
@media (max-width:880px){
  :where(.iw01) .rtable{grid-template-columns:1fr !important;}
  :where(.iw01) .rtable > div{border-right:none !important;border-bottom:1px solid #e7ecf6 !important;}
  :where(.iw01) .rtable > [data-c="1"]{order:1;}
  :where(.iw01) .rtable > [data-c="2"]{order:2;}
  :where(.iw01) .rtable > [data-c="3"]{order:3;}
}
@media (max-width:900px){
  :where(.iw01) .stats{grid-template-columns:1fr !important;}
}
@media (max-width:1080px){
  :where(.iw01) .cards{grid-template-columns:1fr !important;}
}
@media (max-width:640px){
  :where(.iw01) .flist{grid-template-columns:1fr !important;}
}
@media (max-width:880px){
  :where(.iw01) .hero,:where(.iw01) .role,:where(.iw01) .role-rev,:where(.iw01) .cards,:where(.iw01) .cta-boxes{grid-template-columns:1fr !important;}
  :where(.iw01) .case{grid-template-columns:1fr !important;}
  :where(.iw01) .tabs{flex-wrap:wrap;}
  :where(.iw01) .tab{flex:1 0 30%;}
}
@media (max-width:640px){
  :where(.iw01) section[data-variant] h1{font-size:30px !important;}
}

/* ===== 섹션5 도입 문의 (원안 인라인 <style> 값 그대로, .iw01 스코프) ===== */
.iw01 .s5-section,.iw01 .s5-section *,.iw01 .s5-section *::before,.iw01 .s5-section *::after{box-sizing:border-box;}
.iw01 .s5-section *{margin:0; padding:0;}
.iw01 .s5-section{-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; position:relative; width:100%; height:680px; margin:0 auto; padding:0; display:flex; flex-direction:column; justify-content:center; background:#f0f0f3; overflow:hidden;}
.iw01 .s5-cta-wrap{position:relative; max-width:1184px; width:100%; margin:0 auto; padding:0 32px;}
.iw01 .s5-cta-head{text-align:center; margin-bottom:60px;}
.iw01 .s5-cta-eyebrow{display:inline-block; font-size:13px; font-weight:700; letter-spacing:.16em; color:#3467ff; text-transform:uppercase; margin-bottom:14px;}
.iw01 .s5-cta-title{font-size:32px; font-weight:700; letter-spacing:-.025em; color:#14224d; line-height:1.45;}
.iw01 .s5-cta-title .s5-hl{color:#2A55EE;}
.iw01 .s5-cta-sub{margin-top:14px; font-size:16px; font-weight:400; letter-spacing:-.02em; color:#4a5878; line-height:1.6;}
.iw01 .s5-cta-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:860px; margin:0 auto;}
.iw01 .s5-ccard{position:relative; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:52px 28px; border-radius:16px; background:#ffffff; border:1px solid #e7ecf6; box-shadow:0 2px 4px rgba(20,34,77,.03), 0 12px 28px rgba(20,34,77,.05); text-decoration:none; color:inherit; transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);}
.iw01 .s5-ccard-text{flex:1; min-width:0; display:flex; flex-direction:column;}
.iw01 .s5-ccard:hover{box-shadow:0 4px 6px rgba(20,34,77,.04), 0 22px 42px rgba(52,103,255,.16);}
.iw01 .s5-ccard:not(.s5-is-primary):hover{border-color:#6A88F5;}
.iw01 .s5-ccard-ico{flex:none; position:absolute; top:42px; right:28px; width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(140deg,#2cd3e6,#2f6dff); box-shadow:0 6px 16px rgba(52,103,255,.26);}
.iw01 .s5-ccard-ico svg{width:25px; height:25px;}
.iw01 .s5-ccard-ico svg path,.iw01 .s5-ccard-ico svg rect,.iw01 .s5-ccard-ico svg circle{stroke:#ffffff;}
.iw01 .s5-ccard-title{font-size:27px; font-weight:700; letter-spacing:-.035em; color:#14224d;}
.iw01 .s5-ccard-desc{margin-top:8px; font-size:14.5px; font-weight:400; letter-spacing:-.01em; color:#566075; line-height:1.5; transition:color .3s cubic-bezier(.2,.7,.2,1);}
.iw01 .s5-ccard:hover .s5-ccard-desc{color:#21222b;}
.iw01 .s5-cta-phone{margin-top:60px; display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;}
.iw01 .s5-cta-phone-ico{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#3355E6; box-shadow:0 6px 16px rgba(52,103,255,.28);}
.iw01 .s5-cta-phone-ico svg{width:23px; height:23px;}
.iw01 .s5-cta-phone-ico svg path{stroke:#ffffff;}
.iw01 .s5-cta-phone-label{font-size:17px; font-weight:600; letter-spacing:-.02em; color:#46506a;}
.iw01 .s5-cta-phone-num{font-size:42px; font-weight:800; letter-spacing:-.02em; color:#333333; font-variant-numeric:tabular-nums; text-decoration:none; line-height:1;}
.iw01 .s5-ccard-arrow{margin-top:auto; padding-top:18px; display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:600; color:#6b7794; transition:color .25s, gap .25s;}
.iw01 .s5-ccard-arrow svg{width:17px; height:17px; transition:transform .25s;}
.iw01 .s5-ccard:hover .s5-ccard-arrow{color:#1a32d8; gap:9px;}
.iw01 .s5-ccard:hover .s5-ccard-arrow svg{transform:translateX(3px);}
.iw01 .s5-more-txt{text-decoration:underline; text-decoration-color:transparent; text-decoration-thickness:1px; text-underline-offset:3px; transition:text-decoration-color .25s ease;}
.iw01 .s5-ccard:hover .s5-more-txt{text-decoration-color:#1a32d8;}
.iw01 .s5-ccard.s5-is-primary{background:#3355E6; border:none; box-shadow:0 12px 30px rgba(52,103,255,.34);}
.iw01 .s5-ccard.s5-is-primary:hover{box-shadow:0 22px 45px rgba(52,103,255,.43);}
.iw01 .s5-ccard.s5-is-primary .s5-ccard-ico{background:rgba(255,255,255,.18); box-shadow:none;}
.iw01 .s5-ccard.s5-is-primary .s5-ccard-title{color:#ffffff; text-shadow:0 1px 2px rgba(10,30,120,.22);}
.iw01 .s5-ccard.s5-is-primary .s5-ccard-desc{color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(10,30,120,.18);}
.iw01 .s5-ccard.s5-is-primary:hover .s5-ccard-desc{color:#ffffff;}
.iw01 .s5-ccard.s5-is-primary .s5-ccard-arrow{color:rgba(255,255,255,.95);}
.iw01 .s5-ccard.s5-is-primary:hover .s5-ccard-arrow{color:#ffffff;}
.iw01 .s5-ccard.s5-is-primary:hover .s5-more-txt{text-decoration-color:#ffffff;}
@media (max-width:1350px){
  .iw01 .s5-section{height:auto; padding:72px 0;}
}
@media (max-width:920px){
  .iw01 .s5-cta-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .iw01 .s5-section{padding:48px 0 52px;}
  .iw01 .s5-cta-title{font-size:24px;}
  .iw01 .s5-cta-phone-num{font-size:34px;}
}
@media (max-width:767px){
  .iw01 .s5-ccard{padding:18px;}
  .iw01 .s5-ccard-ico{top:18px; right:18px; width:36px; height:36px; border-radius:10px;}
  .iw01 .s5-ccard-ico svg{width:18px; height:18px;}
  .iw01 .s5-ccard-title{font-size:18px;}
  .iw01 .s5-ccard-desc{font-size:13px; margin-top:6px; line-height:1.5;}
  .iw01 .s5-ccard-arrow{padding-top:10px; font-size:13px;}
  .iw01 .s5-cta-head{margin-bottom:28px;}
  .iw01 .s5-cta-phone{margin-top:30px; gap:10px;}
  .iw01 .s5-cta-phone-ico{width:36px; height:36px;}
  .iw01 .s5-cta-phone-ico svg{width:18px; height:18px;}
  .iw01 .s5-cta-phone-label{font-size:15px;}
  .iw01 .s5-cta-phone-num{font-size:20px; font-weight:700;}
}
@media (min-width:1240px){
  .iw01 .s5-section{height:685px; padding-top:0; padding-bottom:0;}
}

/* ===== 본문 반응형 (원안 RESPONSIVE, .iw01 스코프) ===== */
@media (max-width:1080px){
  :where(.iw01) section:has(> .hero){height:auto !important;padding:56px 0 0 !important;}
  :where(.iw01) .hero{width:auto !important;max-width:100% !important;height:auto !important;grid-template-columns:1fr !important;gap:32px !important;justify-items:center;text-align:center;}
  :where(.iw01) .hero > div:first-child{margin:0 !important;width:auto !important;max-width:640px;}
  :where(.iw01) .hero > div:nth-child(2):empty{display:none;}
  :where(.iw01) .hero > div:nth-child(2){height:auto !important;width:100%;}
  :where(.iw01) .hero img,:where(.iw01) .hero > [role="img"]{position:static !important;transform:none !important;width:100% !important;max-width:600px !important;height:auto !important;display:block;margin:0 auto;}
  :where(.iw01) .hero > [role="img"]{aspect-ratio:628/471;}
  :where(.iw01) .hero > [role="img"] svg{width:100%;height:100%;}
}
:where(.iw01) .tabs-bar{display:none;position:relative;max-width:880px;height:3px;margin:8px auto 0;background:#E3E5EA;border-radius:3px;overflow:hidden;}
:where(.iw01) .tabs-bar i{position:absolute;top:0;bottom:0;left:0;background:#8B8B8B;border-radius:3px;}
@media (max-width:880px){
  :where(.iw01) .case{gap:20px !important;justify-items:start;}
  :where(.iw01) .case b{white-space:normal !important;}
}
@media (max-width:640px){
  :where(.iw01) section[data-variant]{padding:64px 20px 48px !important;}
  :where(.iw01) section[data-variant] h1 img{height:38px !important;}
  :where(.iw01) section[data-variant] > p{font-size:17px !important;word-break:keep-all;}
  :where(.iw01) .hero > div:first-child > div{font-size:22px !important;line-height:1.5 !important;}
  :where(.iw01) section h2{font-size:23px !important;}
  :where(.iw01) .fcard{padding:26px 22px !important;}
  :where(.iw01) .fcard h3{font-size:20px !important;}
  :where(.iw01) #specLines,:where(.iw01) #mainLines{font-size:19px !important;}
}
@media (max-width:1080px){
  :where(.iw01) .hero img,:where(.iw01) .hero > [role="img"]{margin-bottom:-80px !important;}
}
@media (max-width:880px){
  :where(.iw01) .case{justify-items:center !important;text-align:center;}
  :where(.iw01) .case > div:first-child{width:100%;justify-self:stretch;}
  :where(.iw01) .case b{justify-self:center !important;text-align:center;}
  :where(.iw01) .case{row-gap:8px !important;}
  :where(.iw01) .case > div:first-child{margin-bottom:12px;}
  :where(.iw01) .case li{font-size:15px !important;letter-spacing:-.04em;}
  :where(.iw01) .case li b{font-size:15px !important;}
  :where(.iw01) .case{padding:28px 0 !important;}
  :where(.iw01) .case:last-child{padding-bottom:12px !important;}
  :where(.iw01) section:has(#cases){padding-bottom:36px !important;}
  :where(.iw01) .case ul{justify-self:start;text-align:left;}
}
@media (max-width:767px){
  :where(.iw01) .tabs{position:relative;flex-wrap:nowrap !important;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  :where(.iw01) .tabs::-webkit-scrollbar{display:none;}
  :where(.iw01) .tab{flex:none !important;padding:11px 18px !important;}
}
@media (max-width:400px){
  :where(.iw01) section[data-variant] h1{font-size:26px !important;}
  :where(.iw01) section[data-variant] h1 img{height:32px !important;}
}
@media (max-width:640px){
  :where(.iw01) .h2-pc{display:none !important;}
  :where(.iw01) .h2-mo{display:block !important;}
}
@media (max-width:640px){
  :where(.iw01) .hero > div:first-child > div{display:inline !important;}
  :where(.iw01) .hero > div:first-child > div::after{content:" ";}
}
@media (max-width:1080px){
  :where(.iw01) .hero > [role="img"]{margin-top:-24px !important;margin-bottom:-40px !important;}
}
@media (max-width:900px){
  :where(.iw01) .scard > div[style*="height:200px"]{height:160px !important;margin-top:12px !important;}
  :where(.iw01) .scard > div[style*="height:200px"] svg{height:160px !important;}
  :where(.iw01) .scard > div[style*="height:1px"]{margin:18px 0 18px !important;}
}
@media (max-width:767px){
  :where(.iw01) #specImg,:where(.iw01) #mainImg{min-height:0 !important;}
  :where(.iw01) #specImg,:where(.iw01) #mainImg{margin-top:-16px;}
}
@media (max-width:640px){
  :where(.iw01) .hero > div:first-child{font-size:22px !important;line-height:1.5 !important;}
}
:where(.iw01) .tabs-track{display:flex;flex:1;gap:4px;min-width:0;}
@media (max-width:767px){
  :where(.iw01) .tabs{display:block !important;background:transparent !important;padding:0 !important;border-radius:0 !important;}
  :where(.iw01) .tabs-track{display:inline-flex;flex:none;width:max-content;background:#EEEEF1;border-radius:999px;padding:6px;gap:4px;vertical-align:top;}
}