/*
 * intr_travel_01.css
 * bzp 사이트 bzp 출장관리 상품 소개 페이지 스타일
 * intr_travel_01_view.jsp 의 원안(bzp_출장관리.html) 인라인 <style>(본문/RESPONSIVE/섹션5) 을 문서 순서 그대로 옮기되,
 * 공용 헤더/푸터/reset.css/content.pc.css 와 충돌하지 않도록 모든 선택자를 .it01 아래로 스코프했다.
 *  - 원안 body/html/a/* 전역 규칙 -> .it01 스코프
 *  - 원안의 헤더/푸터/퀵네비 스타일은 공용 include 가 제공하므로 제외
 *  - 공용 /bzp/css/bizpr_main.css 의존 제거(섹션5 규칙을 원안 그대로 이 파일에 포함)
 * 사용처: SPTL_PT/web/sp/bizpr/intr_travel_01_view.jsp (이 화면 전용, 다른 intr_*_01 과 공유하지 않는다)
 * @History : 20261002, 박소현 - 신규
 *            20261002, 박소현 - 원안 대조 보정: 섹션5 원안 CSS 이관(bizpr_main.css 의존 제거), 원안 임베드 폰트 PretendardItrv 적용, table-layout:auto 복원, 원안 body 상단 여백(80px) 반영
 *            20261002, 박소현 - .it01 font-size:16px 복원(reset.css body 12px 상속으로 찌그러져 보이던 현상)
 */

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

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

/* ===== 화면 기본 (원안 head <style>, .it01 스코프) ===== */
.it01,.it01 *,.it01 *::before,.it01 *::after{box-sizing:border-box;}
/* 20261002, 박소현 - 원안 body{padding-top:80px}(고정 헤더 높이) 이관. 공용 헤더는 body 여백을 주지 않음 */
/* 20261002, 박소현 - 원안 html 기본 16px 복원: 공용 reset.css body{font-size:12px} 가 상속되어 font-size 미지정 요소(본문/카드 문구)가 원안보다 작고 좁게 보임 */
.it01{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){ .it01{padding-top:64px;} }
.it01,.it01 *{font-family:"PretendardItrv","Pretendard",system-ui,-apple-system,sans-serif;}
/* 20261002, 박소현 - 공용 /bzp/css/reset.css:59 table{table-layout:fixed} 를 원안(auto)대로 복원(이 화면 table 은 없으나 방어) */
.it01 table{table-layout:auto;}
.it01 a{color:#1A32D8;text-decoration:none;}
.it01 a:hover{color:#001999;}
.it01 .hbtn:hover{background:#001999;}
.it01 .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;}
.it01 .tab[aria-selected="true"]{background:#1A32D8;color:#ffffff;font-weight:700;}
.it01 .fcard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1);}
.it01 .fcard:hover{border-color:#6A88F5;box-shadow:0 4px 6px rgba(20,34,77,.04),0 22px 42px rgba(52,103,255,.16);}
.it01 .scard{transition:box-shadow .3s cubic-bezier(.2,.7,.2,1),border-color .3s cubic-bezier(.2,.7,.2,1),background .3s;}
.it01 .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:900px){
  .it01 .stats{grid-template-columns:1fr !important;}
}
@media (max-width:1080px){
  .it01 .cards{grid-template-columns:1fr !important;}
}
@media (max-width:640px){
  .it01 .flist{grid-template-columns:1fr !important;}
}
@media (max-width:880px){
  .it01 .hero,.it01 .role,.it01 .role-rev,.it01 .cards,.it01 .cta-boxes,.it01 .case{grid-template-columns:1fr !important;}
  .it01 .tabs{flex-wrap:wrap;}
  .it01 .tab{flex:1 0 30%;}
}
@media (max-width:640px){ .it01 section[data-variant] h1{font-size:30px !important;} }

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

/* ===== 원안 섹션5 도입 문의 (.it01 스코프) ===== */
.it01 .s5-section,.it01 .s5-section *,.it01 .s5-section *::before,.it01 .s5-section *::after{ box-sizing:border-box; }
  .it01 .s5-section *{ margin:0; padding:0; }
  .it01 .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;   /* 그라데이션 → 단색 (브랜드 토큰 --bg-light 값) */
    overflow:hidden;
  }
  .it01 .s5-cta-wrap{ position:relative; max-width:1184px; width:100%; margin:0 auto; padding:0 32px; }
  .it01 .s5-cta-head{ text-align:center; margin-bottom:60px; }
  .it01 .s5-cta-eyebrow{
    display:inline-block;
    font-size:13px; font-weight:700; letter-spacing:.16em;
    color:#3467ff; text-transform:uppercase; margin-bottom:14px;
  }
  /* ===== 통합 헤드라인 스펙 (섹션2·3·5 공통): 32px / 700 / -.025em / 1.45 / #14224d ===== */
  .it01 .s5-cta-title{
    font-size:32px; font-weight:700; letter-spacing:-.025em;
    color:#14224d; line-height:1.45;
  }
  /* 첫 강조구: 단색 강조 (섹션2·3·5 공통 #2A55EE) */
  .it01 .s5-cta-title .s5-hl{ color:#2A55EE; }
  .it01 .s5-cta-sub{
    margin-top:14px; font-size:16px; font-weight:400; letter-spacing:-.02em;
    color:#4a5878; line-height:1.6;
  }
  .it01 .s5-cta-grid{
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px;
  }
  .it01 .s5-ccard{
    position:relative;
    display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
    padding:52px 28px;
    border-radius:16px;
    background:#ffffff;
    /* 두께는 평상시/hover 동일(1px) — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 — hover 시 색만 바뀌므로 레이아웃 흔들림 없음 */
    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;
    /* 카드 hover 통일 스펙: .3s / cubic-bezier(.2,.7,.2,1) — transform 이동 없음 */
    transition:box-shadow .3s cubic-bezier(.2,.7,.2,1), border-color .3s cubic-bezier(.2,.7,.2,1);
  }
  .it01 .s5-ccard-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
  .it01 .s5-ccard:hover{
    /* 통일: 카드 이동(translateY)·배경색 변화 없음 — 그림자 강화만 */
    box-shadow:0 4px 6px rgba(20,34,77,.04), 0 22px 42px rgba(52,103,255,.16);
  }
  /* 블루 테두리 강조는 흰 배경 카드 2개만 (primary 파란 카드는 제외) */
  .it01 .s5-ccard:not(.s5-is-primary):hover{ border-color:#6A88F5; }   /* #c5d0ff(1.52:1) → #6A88F5(3.25:1) */
  .it01 .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);
  }
  .it01 .s5-ccard-ico svg{ width:25px; height:25px; }
  .it01 .s5-ccard-ico svg path,.it01 .s5-ccard-ico svg rect,.it01 .s5-ccard-ico svg circle{ stroke:#ffffff; }
  .it01 .s5-ccard-title{
    font-size:27px; font-weight:700; letter-spacing:-.035em; color:#14224d;
  }
  .it01 .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);
  }
  /* 통일: hover 시 설명문 색상만 진하게 (#566075 → #21222b) */
  .it01 .s5-ccard:hover .s5-ccard-desc{ color:#21222b; }
  .it01 .s5-cta-phone{
    margin-top:60px;
    display:flex; align-items:center; justify-content:center; gap:16px;
    flex-wrap:wrap;
  }
  .it01 .s5-cta-phone-ico{
    width:46px; height:46px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:#3355E6;   /* 단색 — 섹션4 초대기업 패널(.s4-panel--blue) 중간 스톱 톤 */
    box-shadow:0 6px 16px rgba(52,103,255,.28);
  }
  .it01 .s5-cta-phone-ico svg{ width:23px; height:23px; }
  .it01 .s5-cta-phone-ico svg path{ stroke:#ffffff; }
  .it01 .s5-cta-phone-label{
    font-size:17px; font-weight:600; letter-spacing:-.02em; color:#46506a;
  }
  .it01 .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;
  }
  .it01 .s5-ccard-arrow{
    margin-top:auto; padding-top:18px;
    display:inline-flex; align-items:center; gap:6px;      /* 통일: 기본 6px */
    font-size:15px; font-weight:600; color:#6b7794;                        /* 통일: 15px */
    transition:color .25s, gap .25s;
  }
  .it01 .s5-ccard-arrow svg{ width:17px; height:17px; transition:transform .25s; }
  .it01 .s5-ccard:hover .s5-ccard-arrow{ color:#1a32d8; gap:9px; }              /* 통일: 6px → 9px */
  .it01 .s5-ccard:hover .s5-ccard-arrow svg{ transform:translateX(3px); }       /* 통일: 3px */
  /* hover 시 텍스트에만 밑줄 (화살표 svg 제외) — 색상 전환으로 부드럽게 */
  .it01 .s5-more-txt{
    text-decoration:underline; text-decoration-color:transparent;
    text-decoration-thickness:1px; text-underline-offset:3px;
    transition:text-decoration-color .25s ease;
  }
  .it01 .s5-ccard:hover .s5-more-txt{ text-decoration-color:#1a32d8; }
  .it01 .s5-ccard.s5-is-primary{
    background:#3355E6;   /* 단색 — 섹션4 초대기업 패널(.s4-panel--blue) 중간 스톱 톤 */
    border:none;
    box-shadow:0 12px 30px rgba(52,103,255,.34);
  }
  .it01 .s5-ccard.s5-is-primary:hover{
    /* y×1.8 blur×1.5 alpha×1.25 (파란빛 그림자 색상 유지) */
    box-shadow:0 22px 45px rgba(52,103,255,.43);
  }
  .it01 .s5-ccard.s5-is-primary .s5-ccard-ico{
    background:rgba(255,255,255,.18);
    box-shadow:none;
  }
  .it01 .s5-ccard.s5-is-primary .s5-ccard-title{ color:#ffffff; text-shadow:0 1px 2px rgba(10,30,120,.22); }
  .it01 .s5-ccard.s5-is-primary .s5-ccard-desc{ color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(10,30,120,.18); }
  /* primary 카드는 파란 배경이므로 다크 컬러 대신 흰색 불투명도만 100%로 (.92 → 1) */
  .it01 .s5-ccard.s5-is-primary:hover .s5-ccard-desc{ color:#ffffff; }
  .it01 .s5-ccard.s5-is-primary .s5-ccard-arrow{ color:rgba(255,255,255,.95); }
  .it01 .s5-ccard.s5-is-primary:hover .s5-ccard-arrow{ color:#ffffff; }
  /* primary 카드는 흰 텍스트이므로 밑줄도 흰색 (파란 배경 위 #1a32d8 밑줄은 보이지 않음) */
  .it01 .s5-ccard.s5-is-primary:hover .s5-more-txt{ text-decoration-color:#ffffff; }
  @media (max-width:1350px) {
    .it01 .s5-section{ height:auto; padding:72px 0; }
  }
  @media (max-width:920px) {
    .it01 .s5-cta-grid{ grid-template-columns:1fr; }
  }
  @media (max-width:520px) {
    .it01 .s5-section{ padding:48px 0 52px; }
    .it01 .s5-cta-title{ font-size:24px; }
    .it01 .s5-cta-phone-num{ font-size:34px; }
  }
  /* 카드 텍스트·여백·아이콘을 섹션2 카드 기준으로 축소 (헤딩 18 / 본문 13 / padding 18) */
  @media (max-width:767px) {
    .it01 .s5-ccard{ padding:18px; }
    .it01 .s5-ccard-ico{ top:18px; right:18px; width:36px; height:36px; border-radius:10px; }
    .it01 .s5-ccard-ico svg{ width:18px; height:18px; }
    .it01 .s5-ccard-title{ font-size:18px; }
    .it01 .s5-ccard-desc{ font-size:13px; margin-top:6px; line-height:1.5; }
    .it01 .s5-ccard-arrow{ padding-top:10px; font-size:13px; }
    /* 제목~첫 카드 간격 축소 */
    .it01 .s5-cta-head{ margin-bottom:28px; }
    /* 3번째 카드~전화상담 간격 축소 + 전화상담·번호 한 줄 배치 (번호 축소) */
    .it01 .s5-cta-phone{ margin-top:30px; gap:10px; }
    .it01 .s5-cta-phone-ico{ width:36px; height:36px; }
    .it01 .s5-cta-phone-ico svg{ width:18px; height:18px; }
    .it01 .s5-cta-phone-label{ font-size:15px; }
    .it01 .s5-cta-phone-num{ font-size:20px; font-weight:700; }
  }

  /* ===== 데스크탑(≥1240px) 섹션 높이 685px 통일 (섹션2·3·5 공통) =====
     섹션5는 원래 height 고정형(680px) + flex 세로중앙 정렬 → 685px 로만 변경.
     콘텐츠 417.1px 로 여유 충분(잘림 없음).
     ≤1350px 의 height:auto 규칙보다 뒤에 두어 1240~1350 구간도 685px 로 통일.
     ≤1239px 태블릿/모바일 규칙은 그대로 유지됨. */
  @media (min-width:1240px){
    .it01 .s5-section{ height:685px; padding-top:0; padding-bottom:0; }
  }