@charset "utf-8";
/* ==========================
 * SUB HEADER
 * ========================== */
#hd.sub { position: absolute !important }

@media (max-width: 480px) {
    #hd.sub { position: relative !important }
}
/* ==========================
 * SUB VISUAL
 * ========================== */
#sub_visual {
    position: relative;
     height: clamp(240px, calc(43.27vw - 92.3px), 600px);
}
#sub_visual::before {
    position: absolute;
    content: "";
    inset: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}
#sub_visual .sub-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
/* 페이지별 배경 이미지 */
.sub-bg.bg-company  { background: url('../img/sub/subtop_company.png')  center / cover no-repeat }
.sub-bg.bg-vision   { background: url('../img/sub/subtop_vision.png') center / cover no-repeat }
.sub-bg.bg-history  { background: url('../img/sub/subtop_history.png')       center / cover no-repeat }
.sub-bg.bg-organ  { background: url('../img/sub/subtop_organ.png')  center / cover no-repeat }
.sub-bg.bg-location   { background: url('../img/sub/subtop_location.png')   center / cover no-repeat }
.sub-bg.bg-business  { background: url('../img/sub/subtop_business.png')  center / cover no-repeat }
.sub-bg.bg-pg   { background: url('../img/sub/subtop_pg.png') center / cover no-repeat }
.sub-bg.bg-prepay  { background: url('../img/sub/subtop_prepay.png')       center / cover no-repeat }
.sub-bg.bg-pay  { background: url('../img/sub/subtop_pay.png')  center / cover no-repeat }
.sub-bg.bg-shop   { background: url('../img/sub/subtop_shop.png')   center / cover no-repeat }
.sub-bg.bg-b2b   { background: url('../img/sub/subtop_b2b.png')   center / cover no-repeat }
.sub-bg.bg-status  { background: url('../img/sub/subtop_status.png')       center / cover no-repeat }
.sub-bg.bg-talent   { background: url('../img/sub/subtop_talent.png')   center / cover no-repeat }
.sub-bg.bg-benefits   { background: url('../img/sub/subtop_benefits.png')   center / cover no-repeat }
.sub-bg.bg-employ  { background: url('../img/sub/subtop_employ.png')       center / cover no-repeat }
.sub-bg.bg-press  { background: url('../img/sub/subtop_press.png')  center / cover no-repeat }
.sub-bg.bg-news   { background: url('../img/sub/subtop_news.png')   center / cover no-repeat }
.sub-bg.bg-inquiry   { background: url('../img/sub/subtop_inquiry.png')   center / cover no-repeat }
#sub_visual .sub-tit-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    animation: subTitDown 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes subTitDown {
    0%   { opacity: 0; transform: translateY(-30px) }
    100% { opacity: 1; transform: translateY(0) }
}
#sub_visual .sub-tit {
    font-size: clamp(2.8rem, calc(2.14vw + 1.8rem), 5.5rem);
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: -0.02em;
    word-break: keep-all;
    padding-bottom: clamp(8px, 0.75vw, 14px);
}
#sub_visual .sub-desc {
    font-size: clamp(1.6rem, calc(0.36vw + 1.23rem), 2rem);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.5;
    word-break: keep-all;
}
@media (max-width: 480px) {
    #sub_visual::before { background-color: rgba(0, 0, 0, 0.55) }
}
/* ==========================
 * SUB BREADCRUMB
 * ========================== */
#sub_breadcrumb {
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
#sub_breadcrumb .inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: var(--mainsize);
    margin: 0 auto;
    padding: 0 20px;
    height: clamp(50px, calc(2.64vw + 29.73px), 72px);
}
#sub_breadcrumb .breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
#sub_breadcrumb .breadcrumb > li {
    position: relative;
    display: flex;
    align-items: center;
}
#sub_breadcrumb .breadcrumb > li + li::before {
    content: '·';
    display: inline-block;
    margin: 0 clamp(10px, 1vw, 30px);
    color: rgba(255, 255, 255, 0.5);
    font-size: 1.8rem;
    line-height: 1;
}
#sub_breadcrumb .bc-home {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
    transition: color 0.2s;
    text-decoration: none !important;
}
#sub_breadcrumb .bc-home svg { width: 16px; height: 16px; flex-shrink: 0 }
/* depth 버튼 공통 */
#sub_breadcrumb .bc-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--k-font);
    font-size: clamp(1.6rem, calc(0.18vw + 1.27rem), 1.8rem);
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    transition: color 0.2s;
}
#sub_breadcrumb .bc-btn .bc-arrow {
    display: flex;
    align-items: center;
    color: #aaa;
    transition: transform 0.25s, color 0.2s;
}
#sub_breadcrumb .bc-btn .bc-arrow img { width: 14px; height: 14px }
#sub_breadcrumb .bc-item.open .bc-arrow { transform: rotate(180deg) }
#sub_breadcrumb .bc-dropdown {
    display: none;
    opacity: 0;
    transform: translateY(-6px);
    position: absolute;
    top: calc(100% + 8px);
    left: -14px;
    z-index: 100;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--bd-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    padding: 6px 0;
    list-style: none;
    margin: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#sub_breadcrumb .bc-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
#sub_breadcrumb .bc-dropdown li a {
    display: block;
    padding: 9px 18px;
    font-size: 1.6rem;
    font-weight: 400;
    color: #555;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

#sub_breadcrumb .bc-dropdown li a:hover,
#sub_breadcrumb .bc-dropdown li.active a {
    background-color: var(--bg);
    color: var(--primary);
    font-weight: 600;
}
@media (max-width: 480px) {
    #sub_breadcrumb .bc-dropdown { min-width: 130px }
}

/* ==========================
 * SUB CONTENT 공통
 * ========================== */
.sub_content {
    position: relative;
    z-index: 0;
}
.sub_content .sub-section {
    padding: clamp(6rem, calc(7.21vw + 0.46rem), 12rem) 0
             clamp(10rem, calc(12.02vw + 7.69px), 20rem);
}
.sub_content .sub-section2 {
    padding: clamp(5rem, calc(6.01vw + 3.85px), 10rem) 0 0;
}

.sub_content .sub-inner {
    max-width: var(--mainsize);
    margin: 0 auto;
    padding: 0 20px;
}
.sub_content .blue-bg {
	background: var(--bg);
	padding: clamp(6rem, calc(4.81vw + 2.31rem), 10rem) 0;
}
.pb-10 {
    padding-bottom: clamp(5rem, calc(6.01vw + 3.85px), 10rem) !important;
}
.pb-20 {
    padding-bottom: clamp(10rem, calc(12.02vw + 7.69px), 20rem) !important;
}
.mb-10 {
    margin-bottom: clamp(5rem, calc(6.01vw + 3.85px), 10rem);
}
.mb-20 {
    margin-bottom: clamp(10rem, calc(12.02vw + 7.69px), 20rem);
}
.mt-10 {
    margin-top: clamp(5rem, calc(6.01vw + 3.85px), 10rem);
}
.pd-10 {
    padding: 10rem 0; 
}
.sm-text { 
    font-size: clamp(1.4rem, calc(0.54vw + 1.5rem), 1.6rem) !important; 
    padding-top:2rem; 
    color:var(--cont1);
    font-weight: 400;
}
.sub_content .sub-block-title {
    font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 1.8rem);
    font-weight: 700;
    color: var(--primary);
    padding-bottom: clamp(14px, 1.5vw, 24px);
    border-bottom: 1px solid var(--bd-color);
    margin-bottom: clamp(24px, 2.5vw, 40px);
}
.sub_content .sub-h2 {
    font-size: clamp(2.2rem, calc(1.43vw + 1.514rem), 3.4rem);
    font-weight: 700;
    color: var(--dark);
    line-height: 150%;
    word-break: keep-all;
    white-space: pre-line;
}

.sub_content .sub-h2 em { color: var(--primary); font-style: normal }

/* 본문 설명 텍스트 */
.sub_content .sub-desc-txt {
    font-size: clamp(1.6rem, calc(0.36vw + 1.23rem), 2rem);
    font-weight: 400;
    color: var(--cont2);
    line-height: 150%;
    letter-spacing: -0.2pt;
    word-break: keep-all;
    white-space: pre-line;
    margin-top: clamp(12px, 1.25vw, 20px);
}
.sub_content .sub-desc-txt b {
    color: var(--primary)
}
.text-center { text-align: center }

/* ══════════════════════════
  텍스트 + 이미지 레이아웃 
   ══════════════════════════ */
.sub_content .sub-txt-img {
    display: flex;
    align-items: center;
    gap: clamp(30px, 5vw, 80px);
    padding-bottom: clamp(5rem, calc(6.25vw - 0px), 10rem);
}

.sub_content .sub-txt-img .txt-side { flex: 1; min-width: 0 }

.sub_content .sub-txt-img .img-side {
    flex-shrink: 0;
    width: clamp(280px, 35vw, 690px);
    border-radius: 16px;
    overflow: hidden;
}

.sub_content .sub-txt-img .img-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ══════════════════════════
   작은 타이틀 (dot_tit)
   ══════════════════════════ */
.dot-tit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 2rem;
    font-size: clamp(2rem, calc(0.54vw + 1.5rem), 2.4rem); /* 18px~24px */
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
    word-break: keep-all;
}
.dot-tit::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 21px;
    height: 16px;
    background: url('../img/sub/dot_tit.svg') center / contain no-repeat;
}

@media (max-width: 768px) {
    .sub_content .sub-txt-img { flex-direction: column }
    .sub_content .sub-txt-img .img-side { width: 100% }
}

/* ==========================
 * 서브 사이드 레이아웃
 * ========================== */
.sub-side-wrap {
    display: flex;
    align-items: flex-start;
    padding-bottom: clamp(50px, calc(6.25vw - 0px), 100px);
}
.sub-side-wrap:last-of-type { padding-bottom: 0 }
.sub-side-label {
    width: 270px;
    flex-shrink: 0;
    padding-top: 3px;
    font-size: clamp(2rem, calc(0.27vw + 1.457rem), 2.4rem);
    font-weight: 700;
    color: var(--primary);
    word-break: keep-all;
}
.sub-side-cont { flex: 1; min-width: 0 }
.sub-side-cont p { 
    font-size: clamp(1.8rem, calc(0.27vw + 1.457rem), 2rem);
    padding-bottom:2rem;
    font-weight: 600;
}
.sub-side-cont p em {
    font-weight: 700;
    color:var(--primary);
    font-style: normal;
}
.sub-side-cont .sub-box {
    padding: 30px;
    border: 1px solid var(--bd-color);
    border-radius: 12px;
    background: #fff;
}
.sub-side-cont .sub-box .space-between {
    justify-content: space-around;
}
@media (max-width: 1024px) {
    .sub-side-wrap { flex-direction: column; gap: clamp(12px, 1.5vw, 20px) }

    .sub-side-label {
        width: 100%;
        padding-top: 0;
        padding-bottom: 4px;
        border-bottom: 2px solid var(--primary);
        margin-bottom: 4px;
    }

    .sub-side-cont { width: 100% }
}

/* ==========================
 * 회사개요 — 마퀴
 * ========================== */
.company-text { overflow: hidden; width: 100%; max-width: 100% }
.company-text .marquee { --x: -3450px }
.company-text .marquee ul {
    display: flex;
    gap: clamp(24px, 3.125vw, 50px);
    animation: Marquee 50s linear infinite;
    will-change: transform;
}
.company-text .marquee ul li {
    font-family: var(--e-font);
    font-size: clamp(2.8rem, calc(6.43vw - 0.3rem), 10rem);
    line-height: .8;
    font-weight: 700;
    color: #E7F0FA;
    text-transform: uppercase;
    white-space: nowrap;
}
@keyframes Marquee {
    0%   { transform: translateX(0) }
    100% { transform: translateX(var(--x)) }
}

/* ==========================
 * 회사개요 — co-table
 * ========================== */
.co-row { 
    display: flex; 
    border-bottom: 1px solid var(--bd-color);
}
.co-row--last { border-bottom: 0 }
.co-cell {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    padding: clamp(18px, 1.875vw, 30px) 0;
}
.co-cell--full { flex: unset; width: 100% }
.co-row .co-cell:not(.co-cell--full) + .co-cell:not(.co-cell--full) {
    padding-left: clamp(24px, 3.125vw, 50px);
}
.co-label {
    flex-shrink: 0;
    width: 190px;
    font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 1.8rem);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.6;
    padding-right: 20px;
}
.co-val {
    flex: 1;
    min-width: 0;
    font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 1.8rem);
    font-weight: 400;
    color: var(--cont1);
    line-height: 1.6;
}
.co-list {flex: 0.75;}
.co-reg-list { display: flex; flex-direction: column; gap: 6px }
.co-reg-list li {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.co-reg-txt { color: var(--cont1); font-size: inherit }
.co-reg-org {
    font-size: clamp(1.2rem, calc(0.18vw + 1.17rem), 1.6rem);
    color: #999;
    font-weight: 400;
    white-space: nowrap;
}
.co-val .co-patent { color: var(--primary); font-weight: 600; margin-top: 4px }
.co-tech-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 30px }
.co-tech-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--cont1);
}
.co-tech-list li::before {
    content: '';
    flex-shrink: 0;
    width: 12px;
    height: 9px;
    border-radius: 50%;
    background: url('../img/sub/check_small.svg') center / cover no-repeat;
}
@media (max-width: 1200px) {
    .co-row { flex-direction: column }
    .co-row .co-cell:not(.co-cell--full) + .co-cell:not(.co-cell--full) {
        border-left: none;
        border-top: 1px solid var(--bd-color);
        padding-left: 0;
    }
    .co-label { width: 130px }
    .co-tech-list { grid-template-columns: 1fr; gap: 8px }
    .co-reg-list li { gap: 2px;}
}
@media (max-width: 768px) {
    .co-block {display: block !important;}
    .co-block .co-val {margin-top:10px;}
}
@media (max-width: 480px) {
    .co-cell { gap: 8px }
    .co-label { width: 100%; padding-right: 0; padding-bottom: 4px }
}
.co-cert-list { 
	display: flex; 
	flex-wrap: wrap; 
	gap: 34px;
}
.co-cert-list li { 
	flex: 1; 
	min-width: 160px;
}
.co-cert-list li img {
    width: 100%;
    max-width: 200px;
    height: auto;
    display: block;
    border: 1px solid var(--bd-color);
    border-radius: 8px;
}
@media (max-width: 768px) {
    .co-cert-list { gap: 16px }
    .co-cert-list li { min-width: calc(50% - 8px); flex: 0 0 calc(50% - 8px) }
    .co-cert-list li img { max-width: 100% }
}
@media (max-width: 480px) {
    .co-cert-list li { min-width: 100%; flex: 0 0 100% }
}

/* ==========================
 * 경영이념/비전 — 카드 그리드
 * ========================== */
.vision-intro {
    text-align: center;
    padding-bottom: clamp(40px, 5vw, 100px);
}
.vision-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 2vw, 30px);
}
.vision-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(15px, 2vw, 30px);
    padding: clamp(30px, 4vw, 60px) clamp(20px, 2vw, 30px) clamp(24px, 3vw, 40px);
    background: linear-gradient(160deg, #A7DAFF 0%, #F3F9FF 100%);
    border-radius: clamp(16px, 1.5vw, 24px);
    min-height: clamp(100px, 25vw, 400px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vision-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(19, 152, 248, 0.18);
}
.vision-card-icon {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.vision-card-icon img {
    width: clamp(100px, 12vw, 180px);
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 20px rgba(19, 152, 248, 0.25));
}
.vision-card-label {
    font-size: 2.4rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: -0.01em;
}
@media (max-width: 768px) {
    .vision-intro h2 br { display: none }
}
@media (max-width: 600px) {
    .vision-cards { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto }
    .vision-card {
        min-height: 130px;
        flex-direction: row;
        justify-content: flex-start;
        padding: clamp(20px, 4vw, 30px);
        gap: 20px;
    }
    .vision-card-icon { flex: 0 0 auto; width: 80px }
    .vision-card-icon img { width: 80px }
    .vision-card-label { text-align: left }
}

/* ==========================
 * 경영이념/비전 — 스크롤 슬라이드
 * ========================== */
.vision-scroll {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.vs-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
}
.vs-slide[data-idx="1"] { z-index: 1;  opacity: 1 }
.vs-slide[data-idx="2"] { z-index: -1; opacity: 0; transform: translateY(30%) scale(1.2) }
.vs-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    will-change: transform, opacity;
}
.about-bg1 { background-image: url('../img/sub/bg_vision01.jpg') }
.about-bg2 { background-image: url('../img/sub/bg_vision02.jpg') }
.vs-slide[data-idx="2"] .vs-bg { opacity: 0; transform: scale(1.5) }
.vs-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    pointer-events: none;
}
.vs-slide-content {
    position: relative;
    z-index: 2;
    text-align: center;
    gap: clamp(30px, 5vw, 80px);
    width: 100%;
    max-width: var(--mainsize, 1400px);
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 60px);
}
.vs-title-section { flex: 1 }
.vs-label {
    display: block;
    font-family: var(--e-font, "Outfit", sans-serif);
    font-size: clamp(1.1rem, calc(0.18vw + 1.07rem), 1.6rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    color: var(--primary);
    text-transform: uppercase;
    margin-bottom: clamp(12px, 1.25vw, 20px);
}
.vs-label.white { color: #fff !important }
.vs-title {
    font-size: clamp(2.8rem, calc(2.04vw + 1.233rem), 4.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.02em;
    padding-bottom: 3rem;
    color: #fff;
    word-break: keep-all;
    white-space: pre-line;
}
.vs-desc-section { flex: 1 }
.vs-desc {
    font-size: clamp(1.5rem, calc(0.45vw + 1.28rem), 2rem);
    font-weight: 400;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.72);
    word-break: keep-all;
}
.vs-pagination {
    position: absolute;
    right: 180px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.vs-bullet {
    width: 7px;
    height: 7px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 100px;
    will-change: height;
}
.vs-bullet[data-idx="1"] { height: 30px; background: #fff }

@media (max-width: 1400px) {
    .vs-pagination { right: 10px }
}
@media (max-width: 768px) {
    .vs-slide-content { flex-direction: column; text-align: center; gap: 20px }
    .vs-desc br { display: none }
}
@media (max-width: 480px) {
    .vs-pagination { right: 12px }
}

/* ==========================
 * 회사 연혁
 * ========================== */

.history-intro { padding: 0 0 clamp(20px, 7.5vw, 40px) }
.history-intro span {
    display: block;
    text-align: center;
    font-family: var(--e-font);
    font-size: 1.6rem;
}
.history-intro .hero-scroll-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: arrowBounce 1.8s ease-in-out infinite;
}
.history-wrap {
    position: relative;
    width: 100%;
    border-top: 1px solid var(--bd-color);
    padding-bottom: clamp(80px, calc(7.5vw + 0px), 200px);
    background: url('../img/sub/bg_history.png') left bottom / contain no-repeat;
}
.history-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 0 40px;
    display: flex;
    align-items: flex-start;
}
.year-col {
    position: sticky;
    top: 0;
    width: 38%;
    height: 100vh;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-right: 60px;
    pointer-events: none;
    z-index: 10;
    align-self: flex-start;
}
.year-main { display: flex; align-items: baseline }
.year-static {
    font-family: var(--e-font);
    font-size: clamp(3rem, 11vw, 10rem);
    line-height: 1;
    color: var(--primary);
    letter-spacing: -.5pt;
    user-select: none;
    font-weight: 700;
}
.odo-wrap {
    display: inline-flex;
    overflow: visible;
    font-family: var(--e-font);
    font-size: clamp(3rem, 11vw, 10rem);
    line-height: 1;
    color: var(--navy);
    letter-spacing: -3pt;
    user-select: none;
    font-weight: 700;
}
.odo-col { overflow: hidden }
.odo-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
    transition: transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.odo-strip span { display: block; line-height: 1; text-align: center }
.year-label {
    font-size: 1.6rem;
    font-weight: 600;
    font-family: var(--e-font);
    text-transform: uppercase;
    color: var(--dark);
}
.scroll-hint {
    position: absolute;
    bottom: 48px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    pointer-events: none;
}
.scroll-hint-text {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(3, 43, 105, 0.25);
}
.scroll-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    animation: arrowBounce 1.8s ease-in-out infinite;
}
.scroll-arrow svg:nth-child(2) { opacity: 0.35; margin-top: -7px }

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0) }
    50%       { transform: translateY(6px) }
}
/* 우측: 리스트 컬럼 */
.list-col {
    flex: 1;
    padding-top: 60px;
    padding-bottom: 20vh;
    border-left: 2px solid var(--bd-color);
    padding-left: 60px;
}
.year-section {
    padding-bottom: 60px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.year-section:last-child { padding-bottom: 0 }
.year-section.is-visible  { opacity: 1; transform: translateY(0) }
.year-section-head {
    font-family: var(--e-font);
    font-size: clamp(2rem, 5.5vw, 4rem);
    color: #DEE6EE;
    line-height: 1;
    letter-spacing: -.5pt;
    padding: 20px 0;
    margin-bottom: 0;
    font-weight: 700;
}
.timeline-items { display: flex; flex-direction: column; gap: 0 }
.timeline-item {
    display: flex;
    align-items: top;
    margin-bottom: 12px;
    transition: background 0.2s;
}
.item-month {
    font-family: var(--e-font);
    font-size: clamp(1.6rem, 1.5vw, 2rem);
    line-height: 1.5;
    color: var(--cont1);
    font-weight: 700;
    min-width: 70px;
    width: 70px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    display: flex;
    align-items: top;
}
.item-text {
    flex: 1;
    font-size: clamp(1.6rem, 1.5vw, 2rem);
    line-height: 1.5;
    color: var(--cont2);
    font-weight: 300;
    word-break: keep-all;
}
.item-text a { color: var(--primary) }

@media (max-width: 1024px) {
    .year-col  { width: 30%; padding-right: 40px }
    .list-col  { padding-left: 40px }
    .timeline-item { margin-bottom: 5px }
}
@media (max-width: 768px) {
    .history-inner { flex-direction: column; padding: 0 20px }
    .year-col  { display: none }
    .list-col  { border-left: none; padding-left: 0; padding-bottom: 10vh }
    .year-section { padding-bottom: 40px }
    .year-section-head { font-size: 4rem; padding: 15px 0 }
    .item-month { min-width: 50px; width: 50px }
}

/* ==========================
 * 조직도
 * ========================== */
.org-tree {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    padding: clamp(5rem, calc(6.01vw + 3.85px), 10rem) 0 0;
}
.node {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.35;
    padding: 15px 20px;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: box-shadow .2s, transform .2s;
}
.node:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(19, 152, 248, .18) }
.node--ceo {
    background: var(--primary);
    color: #fff;
    font-size: clamp(2rem, calc(0.27vw + 1.457rem), 2.4rem);
    padding: 50px 70px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(19, 152, 248, .28);
}
.node--ceo::after {
    position: absolute;
    content: '';
    width: 13px;
    height: 13px;
    background-color: #fff;
    border: 3px solid var(--primary);
    bottom: -5px;
    border-radius: 10px;
}
.node--support {
    background: var(--navy);
    color: #fff;
    font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 2rem);
    width: 240px;
    height: 60px;
    padding: 15px 24px;
}
.node--dept {
    background: var(--white);
    color: var(--navy);
    border: 2px solid var(--navy);
    font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 2rem);
    width: 240px;
    padding: 15px 0;
}
.node--team {
    background: var(--bg);
    color: var(--navy);
    border: 1px solid var(--bd-color);
    font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 2rem);
    font-weight: 500;
    padding: 12px 14px;
    border-radius: 8px;
    width: 120px;
    height: 120px;
}
/* CEO 줄기 */
.ceo-stem {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.ceo-stem__top { width: 1px; height: 20px; background: var(--bd-color) }
.ceo-stem__bot { width: 1px; height: 50px; background: var(--bd-color) }
/* 경영지원 그룹 */
.support-group {
    position: absolute;
    top: 30px;
    left: calc(50% + 1px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}
.support-group::before {
    content: '';
    display: block;
    width: clamp(60px, 8vw, 120px);
    height: 1px;
    background: var(--bd-color);
    flex-shrink: 0;
}
.support-group::after {
    content: '';
    display: block;
    height: 50px;
    left: 0;
    width: 1px;
    background: var(--bd-color);
    flex-shrink: 0;
}
/* 부서 컬럼 */
.depts-wrap {
    display: flex;
    align-items: flex-start;
    width: 100%;
    position: relative;
}
.dept-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.dept-col::before {
    content: '';
    display: block;
    height: 50px;
    flex-shrink: 0;
}
.dept-col--center::before { width: 1px; background: var(--bd-color) }
.dept-vdown { width: 1px; height: 50px; background: var(--bd-color); flex-shrink: 0 }
/* 팀 컬럼 */
.teams-wrap {
    position: relative;
    display: flex;
    align-items: flex-start;
    width: 100%;
}
.teams-wrap::before {
    content: '';
    position: absolute;
    top: 0;
    left:  calc(100% / 6);
    right: calc(100% / 6);
    height: 1px;
    background: var(--bd-color);
    z-index: 0;
}
.team-col { flex: 1; display: flex; flex-direction: column; align-items: center }
.team-col::before {
    content: '';
    display: block;
    width: 1px;
    height: 50px;
    background: var(--bd-color);
    flex-shrink: 0;
}
@media (max-width: 1200px) {
    .dept-vdown  { height: 20px }
    .depts-wrap,
    .teams-wrap  { gap: 3px }
    .node--dept,
    .node--team,
    .node--support { width: 100% }
    .team-col::before { height: 20px }
}
@media (max-width: 768px) {
    .ceo-stem { flex-direction: column; align-items: center; width: auto }
    .ceo-stem__top,
    .ceo-stem__bot { width: 1px; height: 30px }
    .support-group::before { width: 28px }
    .depts-wrap { flex-direction: column; align-items: center; width: 100% }
    .dept-col--left::before { width: 1px; height: 30px; background: var(--bd-color) }
    .dept-col { width: 100%; max-width: 420px }
    .dept-col::before { height: 24px }
    .team-col .node--team { width: 100%; text-align: center }
}
@media (max-width: 480px) {
    .node--ceo     { font-size: 1.35rem; padding: 12px 26px }
    .node--support { font-size: 1.15rem; padding: 10px 14px }
    .node--team    { font-size: 1.05rem; padding: 9px 4px }
    .support-group::before { width: 18px }
}
/* ==========================
 * 찾아오는 길
 * ========================== */
/* ── 본사주소 블록 ── */
.loc-address {
    padding-top: clamp(50px, 6.25vw, 100px);
}
.loc-address-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
	padding-top: clamp(20px, 2.5vw, 20px);
    padding-bottom: clamp(20px, 2.5vw, 36px);
    flex-wrap: wrap;
}
.loc-address-info dl {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.addr-row {
    display: flex;
    align-items: baseline;
    gap: clamp(16px, 2.5vw, 40px);
}
.addr-row dt {
    flex-shrink: 0;
    width: clamp(80px, 7vw, 100px);
    font-size: clamp(1.6rem, calc(0.18vw + 1.271rem), 2rem);
    font-weight: 600;
    color: var(--dark);
    letter-spacing: -0.02em;
}
.addr-row dd {
    font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 1.8rem); /* 15px~18px */
    font-weight: 400;
    color: var(--cont2);
    line-height: 1.5;
    word-break: keep-all;
}
.loc-map-wrap {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--bd-color);
    line-height: 0; /* iframe 하단 여백 제거 */
    height: clamp(260px, calc(15.63vw + 160px), 500px);
}

#kakao-map {
    width: 100%;
    height: 500px;
}

@media (max-width: 768px) {
    #kakao-map {
        height: 350px;
    }
}

/* ── 하단 그리드: 교통 + 연락처 ── */
.loc-bottom-grid {
	padding-top: clamp(25px, 6.25vw, 50px);
	padding-bottom: clamp(50px, 6.25vw, 100px);
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: clamp(20px, 3.125vw, 50px);
    align-items: flex-start;
}
/* ── 대중교통 안내 ── */
.loc-transport {
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 1.875vw, 24px);
}
/* 교통 카드 */
.transport-card {
    display: flex;
    align-items: flex-start;
    gap: clamp(20px, 2.5vw, 30px);
}
@media (hover: hover) {
    .transport-card:hover { border-color: var(--primary);}
}
/* 아이콘 영역 */
.transport-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    width: clamp(60px, 5.625vw, 110px);
    height: clamp(60px, 5.625vw, 110px);
    background: var(--bg);
    border-radius: 14px;
}
.transport-icon .material-symbols-outlined {
    font-size: clamp(2.2rem, 1.875vw, 3.2rem);
    color: var(--navy);
}
.transport-label {
    font-size: clamp(1.6rem, calc(0.27vw + 1.457rem), 1.8rem);
    font-weight: 700;
    color: var(--navy);
}
/* 노선 리스트 */
.transport-routes {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 1.25vw, 16px);
}
.transport-routes li { display: block; }
.route-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: nowrap;
}
/* 지하철 노선 뱃지 */
.subway-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: clamp(1.4rem, 1.875vw, 1.6rem);
    white-space: nowrap;
    margin-top: 1px;
}
.subway-badge.line1 { background: #263C96; color: #fff; }
.subway-badge.line7 { background: #697215; color: #fff; }
/* 노선 설명 */
.route-desc {
    font-size: clamp(1.6rem, calc(0.27vw + 1.257rem), 1.7rem); /* 14px~17px */
    color: var(--cont1);
    line-height: 1.6;
    word-break: keep-all;
}
.route-highlight {
    color: #263C96;
}
.route-highlight2 {
    color: #697215;
}
/* ── 대표전화 ── */
.loc-contact {
    display: flex;
    flex-direction: column;
}
.contact-card {
    padding: clamp(15px, 3.125vw, 20px) 0;
    display: flex;
    flex-direction: column;
    gap: clamp(18px, 1.875vw, 26px);
    position: relative;
    overflow: hidden;
}
.contact-card::before {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}
/* 전화번호 */
.contact-tel-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.contact-tel-wrap span {
    font-size: clamp(2.6rem, 1.875vw, 3.6rem); 
    color: var(--dark);
}
.contact-tel-num {
    font-family: var(--e-font);
    font-size: clamp(2.8rem, calc(2.32vw + 1.7rem), 4.4rem);
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    transition: color 0.2s;
}
@media (hover: hover) {
    .contact-tel-num:hover { color: var(--primary); }
}
/* 팩스 */
.contact-fax {
    font-family: var(--e-font);
    font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 2rem);
	color:var(--cont1);
	padding-left:clamp(4rem, 1.875vw, 6rem); 
}
/* 운영시간 */
.contact-hours {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: clamp(16px, 1.875vw, 22px);
    background: rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
}
.hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.hours-label {
    font-size: clamp(1.3rem, calc(0.18vw + 1.271rem), 1.5rem); /* 13px~15px */
    font-weight: 700;
    color: rgba(255,255,255,0.5);
    width: 35px;
    flex-shrink: 0;
}
.hours-val {
    font-size: clamp(1.3rem, calc(0.18vw + 1.271rem), 1.5rem); /* 13px~15px */
    font-weight: 400;
    color: rgba(255,255,255,0.8);
    text-align: right;
}
.hours-row.hours-off .hours-val { color: rgba(255,255,255,0.4); }
/* 문의 버튼 */
.btn-inquiry {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: clamp(48px, 3.25vw, 52px);
    border-radius: 100px;
    background: var(--primary);
    color: #fff;
    font-size: clamp(1.5rem, calc(0.27vw + 1.457rem), 1.8rem); /* 15px~18px */
    font-weight: 700;
    transition: background-color 0.2s, transform 0.2s;
}
.btn-inquiry .material-icons-round { font-size: 1.8rem; /* 18px */ transition: transform 0.2s; }
@media (hover: hover) {
    .btn-inquiry:hover { background-color: #0d7fd4; transform: translateY(-2px); }
    .btn-inquiry:hover .material-icons-round { transform: translateX(3px); }
}

/* ── 반응형 ── */
@media (max-width: 1200px) {
    .loc-bottom-grid {
        grid-template-columns: 1fr 300px;
    }
}
@media (max-width: 1024px) {
    .loc-bottom-grid {
        grid-template-columns: 1fr;
    }
    .loc-contact {
        max-width: 100%;
    }
    .contact-card {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        align-items: flex-start;
    }
    .contact-tel-wrap,
    .contact-fax { flex: 1; min-width: 200px; }
    .contact-hours { flex: 1 0 100%; }
    .btn-inquiry { flex: 1 0 100%; }
}
@media (max-width: 768px) {
	.transport-card {
		display: block;
		padding-bottom:3rem
	}
	.transport-icon {
		padding:10px 0;
		width:100%;
		margin-bottom:10px;
	}
    .loc-map-wrap {
        height: clamp(220px, 52vw, 340px);
        border-radius: 12px;
    }
	.subway-badge {padding:4px 10px;}
    .contact-tel-wrap, .contact-fax { flex: none; width: 100%; }
    .addr-row { gap: 12px; }
    .addr-row dt { width: 80px; }
}
@media (max-width: 480px) {
    .loc-map-wrap { height: 240px; border-radius: 10px; }
    .route-row { flex-wrap: wrap; }
}
 
/* ==========================
 * 사업소개
 * ========================== */
.diagram-grid {
	display: flex;
    justify-content: center;
}
.diagram-grid img {
	width:100%;
    max-width: var(--diagram-max, 940px);
	margin:0 auto;
}

.diagram-btns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width:990px;
    margin-top: 7rem;
    margin-left:auto;
    margin-right:auto;
}
.diagram-btns .d-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--bg);
    border-radius: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
	color: var(--navy)
}
.diagram-btns .d-btn:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 20px rgba(19,152,248,0.12);
    transform: translateY(-2px);
}
.diagram-btns .d-btn__left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.diagram-btns .d-btn__logo {
    height: 26px;
    display: flex;
    align-items: center;
}
.diagram-btns .d-btn__logo img { height: 100%; }
.diagram-btns .d-btn__txt {
    font-size: clamp(1.6rem, calc(0.63vw + 1.1rem), 2rem);
    color: var(--navy);
}
.diagram-btns .d-btn__arrow {
    width: 32px;
    height: 32px;
    background: var(--bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.diagram-btns .d-btn:hover .d-btn__arrow { background: var(--primary); }
.diagram-btns .d-btn__arrow svg { width: 16px; height: 16px; stroke: var(--primary); transition: stroke 0.2s; }
.diagram-btns .d-btn:hover .d-btn__arrow svg { stroke: #fff; }
 
@media (max-width: 1200px) {
	.diagram-btns {
		gap:20px;
	}
}
@media (max-width: 768px) {

    .diagram-btns { grid-template-columns: 1fr; gap: 8px; }
    .diagram-btns .d-btn { padding: 16px 18px; }
}
@media (max-width: 480px) {
}

/* ==========================
 * 시스템 구성 공통
 * ========================== */

/* 복수 행 쌓기 */
.ib-rows {
  display: flex;
  flex-direction: column;
  gap: var(--row-gap);
} 
/* 열 그리드 */
.ib-grid--col1 { display: grid; grid-template-columns: 1fr;                      gap: var(--col-gap); align-items: stretch; }
.ib-grid--col2 { display: grid; grid-template-columns: repeat(2,1fr);            gap: var(--col-gap); align-items: stretch; }
.ib-grid--col3 { display: grid; grid-template-columns: repeat(3,1fr);            gap: var(--col-gap); align-items: stretch; }
.ib-grid--col4 { display: grid; grid-template-columns: repeat(4,1fr);            gap: var(--col-gap); align-items: stretch; }

.ib-grid--col1,
.ib-grid--col2,
.ib-grid--col3,
.ib-grid--col4 {
    margin-bottom:2rem;
}
/* 비율 그리드 */
.ib-grid--r2-1   { display: grid; grid-template-columns: 2fr 1fr;          gap: var(--col-gap); align-items: stretch; }
.ib-grid--r1-2   { display: grid; grid-template-columns: 1fr 2fr;          gap: var(--col-gap); align-items: stretch; }
.ib-grid--r3-1   { display: grid; grid-template-columns: 3fr 1fr;          gap: var(--col-gap); align-items: stretch; }
.ib-grid--r1-3   { display: grid; grid-template-columns: 1fr 3fr;          gap: var(--col-gap); align-items: stretch; }
.ib-grid--r1-1-2 { display: grid; grid-template-columns: 1fr 1fr 2fr;      gap: var(--col-gap); align-items: stretch; }
.ib-grid--r2-1-1 { display: grid; grid-template-columns: 2fr 1fr 1fr;      gap: var(--col-gap); align-items: stretch; }
.ib-grid--r1-2-1 { display: grid; grid-template-columns: 1fr 2fr 1fr;      gap: var(--col-gap); align-items: stretch; }
 
.ib-grid--r2-1,
.ib-grid--r2-2,
.ib-grid--r3-1,
.ib-grid--r1-3,
.ib-grid--r1-1-2,
.ib-grid--r2-1-1,
.ib-grid--r1-2-1 {
    margin-bottom:2rem;
}
 /* ════════════════════════════════════════
   컬럼 래퍼  .ib-col
   ─ 같은 열의 카드들을 세로로 쌓는 flex 컨테이너
   ════════════════════════════════════════ */
.ib-col {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
} 
/* ════════════════════════════════════════
   독립 카드  .ib-card
   ─ 자체 border-radius, 자체 헤더
   ─ flex-grow 로 높이 비율 제어
   ════════════════════════════════════════ */
.ib-card {
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  border: 1px solid var(--bd-color);
  overflow: hidden;
  min-height: 0;
}
 /* grow 헬퍼 */
.ib-card--grow1 { flex-grow: 1; }
.ib-card--grow2 { flex-grow: 2; }
.ib-card--grow3 { flex-grow: 3; }
.ib-card--grow4 { flex-grow: 4; }
 /* 카드 헤더 */
.ib-card__hd {
  background: var(--primary);
  color: #fff;
  font-size: clamp(1.8rem, calc(0.63vw + 1.1rem), 2rem);
  font-weight: 700;
  padding: 13px 16px;
  height:5rem;
  flex-shrink: 0;
    text-align: center
}
.ib-card__hd--navy { background: var(--navy); }
.ib-card__hd--dark { background: var(--dark); }
 
/* 카드 바디 */
.ib-card__bd {
    flex: 1;
    background: #fff;
    padding: var(--body-pad);
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 0;
}
 /* 카드 바디 내부 2열 */
.ib-card__bd--col2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
  
/* ════════════════════════════════════════
   서브카드  .ib-sub
   ─ 카드 바디 안의 배경 박스
   ════════════════════════════════════════ */
.ib-sub {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
}
.ib-sub--grow1 { flex-grow: 1; }
.ib-sub--grow2 { flex-grow: 2; }
.ib-sub--grow3 { flex-grow: 3; }
 .ib-sub__title {
    padding: 12px 30px;
    font-size: clamp(1.6rem, calc(0.63vw + 1.1rem), 1.8rem);
    color: var(--navy);
    background: var(--bg);
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--bd-color);
    line-height: 1.4;
}
 .ib-sub__content {
  flex: 1;
  padding: 10px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
} 
 
/* ════════════════════════════════════════
   리스트
   ════════════════════════════════════════ */
.ib-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ib-list li {
    /*display: flex;*/
    align-items: baseline;
    gap: 10px;
    font-size: clamp(1.4rem, calc(0.63vw + 1.1rem), 1.6rem);
    color: var(--cont1);
    line-height: 1.5;
    padding-left:1.5rem;
}
.ib-list li::before {
    position: absolute;
    margin-top:9px;
    margin-left:-1.5rem;
    content: '';
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--primary);
	
}
 
/* 흰 박스 아이템 리스트 */
.ib-plain {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ib-plain li {
    padding: 12px 30px;
    font-size: clamp(1.6rem, calc(0.63vw + 1.1rem), 1.8rem);
    color: var(--navy);
    background: var(--bg);
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--bd-color);
    line-height: 1.4;
} 
 
/* ════════════════════════════════════════
   반응형
   ════════════════════════════════════════ */
@media (max-width: 1024px) {
    .ib-grid--col4,
    .ib-grid--r1-1-2,
    .ib-grid--r2-1-1,
    .ib-grid--r1-2-1 { grid-template-columns: 1fr 1fr; }
    
     .ib-grid--r2-1-1,
    .ib-grid--r1-2-1 { grid-template-columns: 1fr; }
    
}
@media (max-width: 768px) {
    .ib-grid--col3,
    .ib-grid--r2-1,
    .ib-grid--r1-2,
    .ib-grid--r3-1,
    .ib-grid--r1-3,
    .ib-grid--r2-1,
    .ib-grid--r2-2,
    .ib-grid--r3-1,
    .ib-grid--r1-3,
    .ib-grid--r1-1-2,
    .ib-grid--r2-1-1,
    .ib-grid--r1-2-1 { grid-template-columns: 1fr; }
    .ib-plain li, .ib-sub__title {padding:10px 20px;}
    .ib-sub__content {padding:10px 20px}

}
@media (max-width: 540px) {
    .ib-grid--col2,
    .ib-grid--col4   { grid-template-columns: 1fr; }
    .sc-section__body { padding: 16px; }
    .ib-card__bd--col2 { grid-template-columns: 1fr; }
}

/* ==========================
 * 시스템 구성 공통
 * ========================== */
 .mo-only { display: none; }

@media (max-width: 768px) {
    .pc-only { display: none; }
    .mo-only { display: block; }
}
.sub-tab__list {
    display: flex;
    align-items: center;
    background: var(--bg);
    border-radius: 100px;
    padding: 6px;
    gap: 4px;
    list-style: none;
    max-width: var(--mainsize);
    margin:0 auto;
} 
.sub-tab__item {
    flex: 1;
}
.sub-tab__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: clamp(4rem, 4vw, 5rem);
    border: none;
    border-radius: 100px;
    background: transparent;
    font-family: var(--k-font);
    font-size: clamp(1.6rem, calc(0.27vw + 1.2rem), 2rem);
    font-weight: 600;
    color: var(--cont1);
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
    padding: 0 clamp(1rem, 2vw, 1rem);
} 
/* 활성화 */
.sub-tab__btn[aria-selected="true"],
.sub-tab__btn.is-active {
    background: var(--navy);
    color: #fff;
}
/* 호버 */
@media (hover: hover) {
    .sub-tab__btn:not([aria-selected="true"]):not(.is-active):hover {
        background: rgba(3, 43, 105, 0.07);
        color: var(--navy);
    }
}
 
/* ══════════════════════════
   탭 패널 (이미지 + 텍스트)
   ══════════════════════════ */
.sub-tab__panels {
    margin-top: 5rem;
} 
.sub-tab__panel {
    display: none;
}
.sub-tab__panel.is-active {
    display: block;
    animation: tabFadeIn 0.35s ease both;
}
 
@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.sub-tab__media {
    display: flex;
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
}
 
.sub-tab__img {
    flex-shrink: 0;
    width: 550px;
    height: 380px;
    overflow: hidden;
}
 
.sub-tab__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
 
.sub-tab__txt {
    flex: 1;
    min-width: 0;
}
 
/* ══════════════════════════
   반응형
   ══════════════════════════ */
@media (max-width: 1200px) {
    .sub-tab__txt .sub-h2 {    
        white-space:inherit;
    } 
    .sub-tab__img {
        width: clamp(300px, 42vw, 550px);
        height: clamp(210px, 29vw, 380px);
    }
}
 
@media (max-width: 1024px) {
    .sub-tab__list {
        border-radius: 14px;
        padding: 5px;
    }
    .sub-tab__btn {
        border-radius: 10px;
    }
}
 
@media (max-width: 768px) {
    .sub-tab__media {
        flex-direction: column;
    }
    .sub-tab__img {
        width: 100%;
        height: 100%;
    }
}
 
@media (max-width: 480px) {
    .sub-tab__list {
        flex-wrap: wrap;
        border-radius: 12px;
        padding: 4px;
        gap: 3px;
    }
    .sub-tab__item {
        flex: 1 0 calc(50% - 2px);
    }
    .sub-tab__btn {
        border-radius: 8px;
        font-size: 1.4rem;
        height: 44px;
    }
}

/* ─────────────────────────────────────────
   테이블 스크롤
───────────────────────────────────────── */
.tbl-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.tbl-scroll::-webkit-scrollbar { height: 5px }
.tbl-scroll::-webkit-scrollbar-track { background: transparent }
.tbl-scroll::-webkit-scrollbar-thumb { background: var(--bd-color); border-radius: 10px }
/* ═══════════════════════════════════════════
   TABLE STYLE 1
═══════════════════════════════════════════ */
.tbl-gantt {
    width: 100%;
    min-width: 860px;
    border-collapse: separate;
    border-spacing: 0;
    border:1px solid var(--bd-color);
    overflow: hidden;
    border-top: 2px solid var(--navy);
}
.tbl-gantt thead tr th {
    font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.6rem);
    font-weight: 600;
    padding: 14px 8px;
    text-align: center;
    border-right: 1px solid var(--bd-color);
    border-bottom: 1px solid var(--bd-color);
    white-space: nowrap;
}
.tbl-gantt thead tr th:first-child {
    text-align: center;
    width: 230px;
    color: var(--cont1);
    border-right: 1px solid var(--bd-color);
} 
.tbl-gantt tbody tr td {
    border-right: 1px solid var(--bd-color);
    border-bottom: 1px solid var(--bd-color);
    padding: 0;
    height: 52px;
    text-align: center;
    font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.6rem);
}
.tbl-gantt tbody tr td.td-label {
    color: var(--cont1);
    font-size: 1.6rem;
    font-weight: 500;
     padding: 14px 8px;
    text-align: center;
    border-right: 1px solid var(--bd-color);
    white-space: nowrap;
    letter-spacing: -0.3px;
}
.tbl-gantt tbody tr td.td-dots {
    color: rgba(255,255,255,0.25);
    font-size: 1.2rem;
    border-right: 1px solid rgba(255,255,255,0.1);
}
.tbl-gantt tbody tr td.active {
    background-color: var(--bg);
    position: relative;
}
.tbl-gantt tbody tr td.active + td.active {
    border-left: none;
}
.tbl-gantt thead tr th:last-child, .tbl-gantt tbody tr td:last-child {
    border-right: none;
}
.tbl-gantt tbody tr:last-child td {
    border-bottom: none;
} 
.tbl-gantt tbody tr:hover td { background-color: #f9f9f9; }
.tbl-gantt tbody tr:hover td.active { background-color: #e8f4ff }
.tbl-gantt tbody tr:hover td.td-label,
.tbl-gantt tbody tr:hover td.td-dots { background-color: #f9f9f9; } 
 
/* ═══════════════════════════════════════════
   TABLE STYLE 2
═══════════════════════════════════════════ */
.tbl-spec {
    width: 100%;
    min-width: 700px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    border: 1px solid var(--bd-color);
    border-top: 2px solid var(--navy);
}
.tbl-spec thead tr th {
    color: var(--dark);
    font-size: 1.6rem;
    font-weight: 600;
    padding: 16px 20px;
    text-align: center;
    border-right: 1px solid var(--bd-color);
    border-bottom: 1px solid var(--bd-color);
    white-space: nowrap;
    letter-spacing: 0.03em;
}
.tbl-spec thead tr th:last-child { border-right: none }

.tbl-spec tbody tr td {
    background-color: #fff;
    border-right: 1px solid var(--bd-color);
    border-bottom: 1px solid var(--bd-color);
    padding: 18px 22px;
    font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.6rem);
    color: var(--dark);
    vertical-align: middle;
    line-height: 1.7;
}
.tbl-spec tbody tr td:last-child { border-right: none }
.tbl-spec tbody tr:last-child td { border-bottom: none }
.tbl-spec tbody tr td.td-item {
    background-color: #f8fafd;
    text-align: center;
    font-weight: 600;
    border-right: 1px solid var(--bd-color);
    white-space: nowrap;
}
.tbl-spec tbody tr td.td-spec {
    color: #555;
    font-weight: 400;
    line-height: 1.8;
}
.tbl-spec tbody tr td.td-qty,
.tbl-spec tbody tr td.td-note {
    text-align: center;
}
.tbl-spec tbody tr:hover td { background-color: #f0f6ff }
.tbl-spec tbody tr:hover td.td-item { background-color: #e8f2fb }

 @media (max-width: 768px) {
     .tbl-spec tbody tr th, .tbl-spec tbody tr td {
         padding:10px 15px;
     }
}
/* ═══════════════════════════════════════════
   Box List
═══════════════════════════════════════════ */

.split-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.split-box {
    border: 1px solid var(--bd-color);
    border-radius: 12px; 
    overflow: hidden;
    background-color: #fff;
}
.split-box__title { 
    padding: 40px 0 0 40px;
    display: flex; 
    align-items: top;
    font-size: clamp(2.0rem, calc(0.27vw + 1.35rem), 2.4rem);
    font-weight: 700; 
    color: var(--primary);
    word-break: keep-all; line-height: 1.4;
}
.split-box__divider { 
    width: 1px; 
    background: var(--bd-color); 
    flex-shrink: 0 
}
.split-box__content {
    flex: 1; 
    padding: 20px 40px 40px 40px;
    display: flex;
    align-items: top;
}
.split-box__ul {
    list-style: none; 
    display: flex; 
    flex-direction: column; 
    gap: 10px;
}
.split-box__ul li {
    display: flex; 
    align-items: center; 
    gap: 10px;
    font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 1.8rem);
    color: var(--cont1);
    line-height: 1.5;
}
.split-box__ul li::before {
    content: ''; 
    flex-shrink: 0;
    width: 3px; 
    height: 3px;
    background: var(--primary);
}
@media (max-width: 1200px) {
    .split-box { flex-direction: column; }
    .split-box__title { flex:none; padding: 30px 30px 0;}    
    .split-box__content { padding: 20px 30px 30px 30px; }
}
@media (max-width: 768px) {
    .split-list { grid-template-columns: 1fr; }
    .split-box__title {padding: 20px 20px 0;}
    .split-box__divider { display: none; }
    .split-box__content { padding: 20px; }
}

.premay-img__info {
    background-color: #FFFBF3;
    margin-top:50px;
}
.premay-img__info ul {
    max-width:990px;
    display: flex;
    justify-content: space-around;
    padding:20px;
    margin:0 auto;
}
.premay-img__info ul li {
    margin-right:20px;
      font-size: clamp(1.4rem, calc(0.27vw + 1.35rem), 1.8rem);
}

@media (max-width: 768px) {
    .premay-img__info ul li img {
        width:30px;
    }
}

/* ===== SECTION: 인재상 ===== */
.sec-talent {
    position: relative;
    width: 100%;
    padding: 0 20px clamp(10rem, calc(8vw + 10px), 15rem) 0;
    overflow: hidden;
    background: url('../img/sub/bg-talent.png') center center / cover no-repeat;
}

/* 내부 wrap */
.sec-talent .talent-inner {
  position: relative;
  z-index: 1;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── 상단 장식 선 (스크롤다운 효과) ── */
.talent-scroll-line {
  position: relative;
  width: 1px;
  height: 110px;
  background: rgba(255,255,255,0.15);
  margin-bottom: clamp(30px, 4vw, 56px);
  overflow: hidden;
}
.talent-scroll-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 40px;
  background: linear-gradient(to bottom, transparent, #fff);
  animation: scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown {
  0%   { transform: translateY(-40px); opacity: 0 }
  20%  { opacity: 1 }
  80%  { opacity: 1 }
  100% { transform: translateY(80px);  opacity: 0 }
}

/* ── 타이틀 ── */
.talent-title {
  font-size: clamp(2.4rem, calc(1.25vw + 1.4rem), 3.4rem);
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: clamp(20px, 6vw, 40px);
  word-break: keep-all;
}
.talent-title .point {
  color: var(--primary);
}
/* 中心 한자 강조 */
.talent-title .hanja {
  font-family: var(--e-font);
  color: var(--mint);
}

/* ── 카드 그리드 ── */
.talent-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}
/* ── 개별 카드 ── */
.talent-card {
  background: #fff;
  border-radius: 20px;
  padding: clamp(28px, 3vw, 70px) clamp(2rem, 2vw, 3rem) clamp(3rem, 3vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
  transition: transform 0.25s, box-shadow 0.25s;
}
@media (hover: hover) {
  .talent-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(19, 152, 248, 0.25);
  }
}

/* 아이콘 영역 */
.talent-card .card-icon {
  width: 105px;
  height: 105px;
  margin-bottom: clamp(2.5rem, 2.5vw, 5.2rem);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.talent-card .card-icon img {
  width: 105px;
  height: 105px;
  object-fit: contain;
}

/* 카드 제목 */
.talent-card .card-title {
  font-size: clamp(1.8rem, calc(0.5vw + 1.35rem), 2.4rem);
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: clamp(10px, 1.5vw, 10px);
  word-break: keep-all;
}
.talent-card .card-title .point {
  color: var(--primary);
}


/* 카드 설명 */
.talent-card .card-desc {
  font-size: clamp(1.6rem, calc(0.25vw + 1.22rem), 1.8rem);
  font-weight: 400;
  color: #666;
  line-height: 1.75;
  word-break: keep-all;
}

/* ── 반응형 ── */
@media (max-width: 1100px) {
  .talent-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .talent-cards {
    grid-template-columns: 1fr;
    max-width: 400px;
    margin: 0 auto;
  }
}


/* ==========================
 * 복리후생
 * ========================== */
.welfare-wrap {
    border-top:    1px solid var(--bd-color);
    border-bottom: 1px solid var(--bd-color);
}
.welfare-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.welfare-row--border {
    position: relative;
    margin-bottom: 20px; /* 선 아래 → 다음 행 사이 간격 20px */
}
.welfare-row--border::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
}
.welfare-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem clamp(1rem, 2vw, 2rem) 2.5rem;
    border-bottom:1px solid var(--bd-color);
}
.welfare-icon {
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px; 
    flex-shrink: 0;
}
.welfare-icon img {
    height: 65px;
    width: auto;
    object-fit: contain;
}
.welfare-icon svg {
    height: 65px;
    width: auto;
}
.welfare-title {
    font-size: clamp(1.8rem, 1.4vw, 2rem);
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.welfare-desc {
    font-size: clamp(1.4rem, 1.1vw, 1.6rem);
    font-weight: 400;
    color: var(--cont2);
    line-height: 1.7;
    word-break: keep-all;
}
.welfare-row--last .welfare-item:nth-child(1),
.welfare-row--last .welfare-item:nth-child(2) {
    border-bottom:0;   
}
 

@media (max-width: 1024px) {
 
    .welfare-row {
        grid-template-columns: repeat(2, 1fr);
    }
    .welfare-row--border {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .welfare-row--border::after { display: none; }
    .welfare-row--border .welfare-item:nth-child(1),
    .welfare-row--border .welfare-item:nth-child(2) {
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .welfare-row--border .welfare-item:nth-child(1)::after,
    .welfare-row--border .welfare-item:nth-child(2)::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.15);
    }
    .welfare-row--border + .welfare-row--border {
        margin-top: 0;
    }
    .welfare-row--border:last-of-type {
        position: relative;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .welfare-row--border:last-of-type::after {
        display: block;
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: rgba(255, 255, 255, 0.15);
    }
    .welfare-row:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .welfare-row:last-child::after { display: none; }
    .welfare-row:last-child .welfare-item::after { display: none !important; }
    .welfare-row:last-child .welfare-item {
        padding-bottom: clamp(3rem, 4vw, 5rem);
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .welfare-item {
        padding: 2.5rem 1rem;
    }
    .welfare-title { font-size: 1.8rem; }
    .welfare-desc  { font-size: 1.4rem; line-height: 1.6; }
    .welfare-icon  { height: 55px; margin-bottom: 16px; }
    .welfare-icon svg,
    .welfare-icon img { height: 55px; }
}


.recruit-info-grid {
    margin-top:1.5rem;
    margin-bottom: 15rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:0 60px;
}
.ri-item {
    padding: clamp(2rem, 4vw, 3rem) 0 clamp(2rem, 3vw, 3rem) 0;
    display: flex;
    align-items: flex-start;
    gap: clamp(2rem, 3vw, 4rem);
    border-top:1px solid var(--bd-color);
}
.ri-item:nth-child(3),
.ri-item:nth-child(4) {
    border-bottom:1px solid var(--bd-color);
}

/* 헤더 영역 */
.ri-head {
    flex-shrink: 0;
    width: clamp(100px, 15vw, 140px);
    flex-direction: column;  /* 번호 위, 타이틀 아래 */
    align-items: flex-start;
    gap: 0.6rem;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
 
/* 번호 */
.ri-num {
    font-family: var(--e-font);
    font-size: clamp(1.8rem, calc(1.25vw + 1.4rem), 2rem);
    font-weight: 700;
    color: var(--primary, #1398F8);
    line-height: 1;
    letter-spacing: -0.02em;
}
 
/* 타이틀 */
.ri-title {
    font-size: clamp(1.8rem, calc(0.54vw + 1.5rem), 2.2rem);
    font-weight: 600;
    color: var(--dark, #222);
    line-height: 1.3;
    word-break: keep-all;
    padding-top:10px;
}
 
/* 리스트 */
.ri-list {
    margin-top:3rem;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
 
.ri-list li {
    position: relative;
    padding-left: 1.6rem;
    font-size: clamp(1.5rem, calc(0.27vw + 1.35rem), 1.6rem);
    color: var(--cont1, #444);
    line-height: 1.5;
    word-break: keep-all;
}
 
.ri-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.85em;
    transform: translateY(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary, #1398F8);
    flex-shrink: 0;
}
 
/* 지원하기 버튼 */
.ri-apply-wrap {
    margin-top: clamp(2rem, 2.5vw, 3.2rem);
}
 
.ri-apply-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border: 1.5px solid var(--navy);
    border-radius: 100px;
    font-size: clamp(1.5rem, calc(0.27vw + 1.35rem), 1.7rem);
    font-weight: 500;
    color: var(--navy);
    background: #fff;
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
    cursor: pointer;
    text-decoration: none !important;
}
 
.ri-apply-btn:hover {
    background: var(--navy);
    color: #fff;
    border-color: var(--navy);
}
 
.ri-apply-btn svg {
    transition: transform 0.22s ease;
}
 
.ri-apply-btn:hover svg {
    transform: translateX(4px);
}
 
 
/* ==============================
   반응형
   ============================== */
@media (max-width: 900px) {
    .recruit-info-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .ri-item {
        padding: clamp(2.4rem, 3.5vw, 3rem) 0;
    }
    .ri-item:nth-child(3) {
        border-bottom: 0;
    }

}

@media (max-width: 768px) {
    .ri-item {
        display:block;
    }
}


.rp-flow {
    margin-top:30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    flex-wrap: nowrap;
}
 
/* 각 스텝 */
.rp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    min-width: 0;
}
 
/* 아이콘 카드 */
.rp-card {
    width: clamp(16rem, calc(4.8vw + 58px), 16rem);
    height: clamp(16rem, calc(4.8vw + 58px), 16rem);
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: clamp(1.4rem, 1.8vw, 2.2rem);
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}
 
.rp-step:hover .rp-card {
    box-shadow: 0 6px 28px rgba(19, 152, 248, 0.20), 0 2px 8px rgba(0,0,0,0.08);
    transform: translateY(-4px);
}
 
.rp-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 스텝 이름 */
.rp-step-name {
    display: block;
    font-size: clamp(1.8rem, calc(0.36vw + 1.4rem), 2rem);
    font-weight: 700;
    color: var(--dark, #222);
    line-height: 1.3;
    margin-bottom: clamp(8px, 1vw, 12px);
    word-break: keep-all;
}
 
/* 스텝 설명 */
.rp-step-desc {
    font-size: clamp(1.5rem, calc(0.18vw + 1.2rem), 1.6rem);
    font-weight: 400;
    color: var(--cont2, #666);
    line-height: 1.5;
    word-break: keep-all;
}
 
/* 화살표 */
.rp-arrow {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top:7.5rem;
    padding: 0 clamp(4px, 0.8vw, 10px);
}
 
.rp-arrow svg {
    width: clamp(14px, 1.4vw, 22px);
    height: clamp(14px, 1.4vw, 22px);
    flex-shrink: 0;
    opacity: 0.75;
}
 
/* ==============================
   반응형
   ============================== */
@media (max-width: 1024px) {
    .rp-flow {
        flex-wrap: wrap;
        gap: 0;
        justify-content: flex-start;
    }
 
    .rp-step {
        flex: 0 0 calc(30% - 10px);
        max-width: calc(30%);
        padding: 0 8px;
        margin-bottom: clamp(2.4rem, 3.5vw, 4rem);
    }
    .rp-arrow:nth-child(6) {
        display: none;
    }
}
 
@media (max-width: 640px) {
    .rp-step {
        flex: 0 0 45%;
        max-width: 100%;
    }
    .rp-card {
        width: 120px;
        height: 120px;
    } 
    .rp-icon img {
        width: 50px;
        height: 50px;
    }
    .rp-arrow:nth-child(3),
    .rp-arrow:nth-child(4),
    .rp-arrow:nth-child(8){
        display: none;
    }
    .rp-arrow:nth-child(6) {
        display: block;
    }
}
 
@media (max-width: 400px) {
    .rp-step {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .rp-arrow{
        display: none;
    }
    .rp-arrow:nth-child(6) {
        display: none
    }
}


/* ==========================
 * 채용문의
 * ========================== */
.sec-recreuit {
    background:url('../img/main/inc04/inc04_bg.png') center bottom no-repeat; 
    background-size: cover;
}
.sec-recreuit .sub-h2 {
    padding-top:10rem;
    padding-bottom:8rem;
}
.inquiry-wrap {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: flex-start;
    border-top:1px solid var(--bd-color);
    padding-top: 8rem;
}
.inquiry-aside {
    position: sticky;
    top: 120px;
}

.inquiry-aside__title {
    font-size: clamp(2.4rem, calc(0.89vw + 1.53rem), 3.4rem);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    letter-spacing: -0.03em;
    word-break: keep-all;
    margin-bottom: 18px;
}

.inquiry-aside__title em {
    color: var(--primary);
    font-style: normal;
}

.inquiry-aside__desc {
    font-size: clamp(1.8rem, calc(0.18vw + 1.26rem), 2rem);
    color: var(--cont2);
    line-height: 1.5;
    word-break: keep-all;
}

/* ── 폼 영역 ── */
.inquiry-form {
    width: 100%;
}

/* ── 필드 그룹 ── */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 4rem;
}

.form-row--full {
    grid-template-columns: 1fr;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── 라벨 ── */
.form-label {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--dark);
    display: flex;
    align-items: center;
    gap: 4px;
}

.form-label .required {
    color: var(--primary);
    font-size: 1.8rem;
    line-height: 1;
    margin-top: -2px;
}

/* ── 입력 공통 ── */
.form-input,
.form-select,
.form-textarea {
    width: 100%;
    height: 54px;
    border: 1px solid var(--bd-color);
    border-radius: 8px;
    background: #fff;
    font-family: var(--k-font);
    font-size: 1.5rem;
    color: var(--dark);
    padding: 0 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: #aab4c0;
    font-size: 1.45rem;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(19, 152, 248, 0.12);
}

/* ── 셀렉트 ── */
.form-select-wrap {
    position: relative;
}

.form-select {
    cursor: pointer;
    padding-right: 44px;
    background-color: #fff;
}

.form-select-wrap .select-ico {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--cont2);
    font-size: 2rem;
}

/* ── 파일 업로드 ── */
.form-file-wrap {
    position: relative;
    height: 54px;
    border: 1px solid var(--bd-color);
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 18px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.form-file-wrap:hover {
    border-color: var(--primary);
}

.form-file-wrap:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(19, 152, 248, 0.12);
}

.form-file-wrap .file-ico {
    color: var(--dark);
    font-size: 2.2rem;
    flex-shrink: 0;
}

.form-file-name {
    flex: 1;
    font-size: 1.45rem;
    color: #aab4c0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-file-name.has-file {
    color: var(--dark);
}

.form-file-btn {
    flex-shrink: 0;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--bd-color);
    border-radius: 6px;
    background: var(--bg);
    font-family: var(--k-font);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--cont1);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
}

.form-file-btn:hover {
    background: #e2eef9;
    border-color: var(--primary);
    color: var(--primary);
}

.form-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 2;
}

/* ── 텍스트에어리어 ── */
.form-textarea {
    height: 180px;
    padding: 16px 18px;
    resize: vertical;
    line-height: 1.7;
}

/* ── 개인정보 수집 이용 안내 ── */
.privacy-section {
    margin-top: 80px;
}

.privacy-section__title {
    font-size: clamp(2.2rem, calc(1.43vw + 1.514rem), 3.4rem);
    font-weight: 700;
    color: var(--dark);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--navy);
    margin-bottom: 16px;
}

.privacy-box {
    border: 1px solid var(--bd-color);
    border-radius: 8px;
    background: #fff;
    padding: 22px 24px;
    height: 170px;
    overflow-y: auto;
    font-size: 1.4rem;
    color: var(--cont2);
    line-height: 1.8;
    scrollbar-width: thin;
    scrollbar-color: var(--bd-color) transparent;
}

.privacy-box::-webkit-scrollbar { width: 5px }
.privacy-box::-webkit-scrollbar-track { background: transparent }
.privacy-box::-webkit-scrollbar-thumb { background: var(--bd-color); border-radius: 10px }

.privacy-box p { margin-bottom: 14px; word-break: keep-all; }
.privacy-box p:last-child { margin-bottom: 0; }
.privacy-box strong {
    display: block;
    color: var(--dark);
    font-weight: 600;
    margin-bottom: 4px;
}

/* ── 동의 체크박스 ── */
.form-agree {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    cursor: pointer;
}

.form-agree__cb {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.form-agree__cb input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin: 0;
    z-index: 2;
}

.form-agree__cb .cb-custom {
    position: absolute;
    inset: 0;
    border: 2px solid var(--bd-color);
    border-radius: 5px;
    background: #fff;
    transition: border-color 0.2s, background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-agree__cb .cb-custom::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
    opacity: 0;
    transition: opacity 0.15s;
}

.form-agree__cb input:checked ~ .cb-custom {
    background: var(--primary);
    border-color: var(--primary);
}

.form-agree__cb input:checked ~ .cb-custom::after {
    opacity: 1;
}

.form-agree__cb input:focus-visible ~ .cb-custom {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.form-agree__label {
    font-size: 1.6rem;
    color: var(--cont1);
    cursor: pointer;
    user-select: none;
    word-break: keep-all;
}

.form-agree__label .required {
    color: var(--primary);
    margin-left: 2px;
}

/* ── 제출 버튼 ── */
.form-submit-wrap {
    margin-top: 50px;
    margin-bottom:200px;
    display: flex;
    justify-content: center;
}

.form-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 58px;
    min-width: 200px;
    padding: 0 40px;
    background: var(--primary);
    border: none;
    border-radius: 100px;
    font-family: var(--k-font);
    font-size: 1.7rem;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    letter-spacing: -0.01em;
    transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
    box-shadow: 0 6px 24px rgba(19, 152, 248, 0.3);
}

.form-submit-btn:hover {
    background: #0a82d8;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(19, 152, 248, 0.45);
}

.form-submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 4px 14px rgba(19, 152, 248, 0.25);
}

.form-submit-btn .btn-arrow {
    font-size: 2.2rem;
    transition: transform 0.2s;
}

.form-submit-btn:hover .btn-arrow {
    transform: translateX(4px);
}

/* ── 입력 오류 상태 ── */
.form-input.is-error,
.form-select.is-error,
.form-textarea.is-error {
    border-color: #e53e3e;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.form-error-msg {
    font-size: 1.6rem;
    color: #e53e3e;
    display: none;
}

.form-error-msg.is-show {
    display: block;
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .sec-recreuit .sub-h2 {
        padding-top:5rem;
        padding-bottom:5rem;
    }
    .inquiry-wrap {
        grid-template-columns: 220px 1fr;
        gap: clamp(30px, 4vw, 60px);
        padding-top:5rem;
    }
}

@media (max-width: 768px) {
    .inquiry-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .inquiry-aside {
        position: static;
    }

    .inquiry-aside__title {
        font-size: 2.4rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
    .form-submit-wrap {
        margin-top: 25px;
        margin-bottom:100px;
    }
}

@media (max-width: 480px) {
    .form-input,
    .form-select,
    .form-textarea,
    .form-file-wrap {
        height: 50px;
    }

    .form-textarea {
        height: 150px;
    }

    .privacy-box {
        height: 140px;
        padding: 16px;
    }
}


 
/* ==============================
   PG등록
   ============================== */
.evpg-sec-head {
    text-align: center;
    margin: 0 auto 40px auto;
}
.evpg-eyebrow {
    display: inline-block;
    font-family: var(--e-font);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary);
    letter-spacing: .15em;
    text-transform: uppercase;
    margin-bottom: 12px;
    background-color: var(--bg); 
    padding:10px 20px;;
    border-radius: 30px;
}
 
/* ── 요약 지표 카드 ── */
.evpg-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: clamp(40px, 5vw, 70px);
}
.evpg-stat-card {
    background: var(--bg);
    border: 1px solid var(--bd-color);
    border-radius: 16px;
    padding: clamp(22px, 2.5vw, 36px);
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s;
}
.evpg-stat-card:hover {
    box-shadow: 0 10px 32px rgba(19,152,248,.12);
    transform: translateY(-3px);
}

.evpg-stat-num {
    font-family: var(--e-font);
    font-size: clamp(3.6rem, calc(2vw + 2rem), 5.2rem);
    font-weight: 800;
    color: var(--navy);
    line-height: 1;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.evpg-stat-unit  { font-size: clamp(1.8rem, calc(.5vw + 1.4rem), 2.4rem); font-weight: 600; color: var(--cont1) }
.evpg-stat-label { font-size: 1.6rem; color: var(--cont2); margin-top: 8px; line-height: 1.5; word-break: keep-all }
.evpg-stat-sub   { font-size: 1.4rem; color: var(--primary); font-weight: 600; margin-top: 6px }
 
/* ── 체크 카드 ── */
.evpg-check-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.evpg-check-card {
    background: #fff;
    border: 1px solid var(--bd-color);
    border-radius: 16px;
    padding: clamp(24px, 3vw, 38px);
    position: relative;
    overflow: hidden;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.evpg-check-card:hover {
    box-shadow: 0 12px 36px rgba(19,152,248,.11);
    transform: translateY(-4px);
    border-color: rgba(19,152,248,.3);
}
.evpg-check-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #0a5fd8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
}
.evpg-check-card:hover::before { transform: scaleX(1) }
.evpg-card-num {
    font-family: var(--e-font);
    font-size: 5rem;
    font-weight: 800;
    color: var(--bg);
    line-height: 1;
    margin-bottom: 10px;
    user-select: none;
    transition: color .25s;
}
.evpg-check-card:hover .evpg-card-num { color: rgba(19,152,248,.1) }
.evpg-card-icon {
    width: 48px; height: 48px;
    background: var(--bg);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    transition: background .25s;
}
.evpg-check-card:hover .evpg-card-icon { background: rgba(19,152,248,.1) }
.evpg-card-icon svg { width: 22px; height: 22px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.evpg-card-tit {
    font-size: clamp(1.7rem, calc(.3vw + 1.4rem), 2rem);
    font-weight: 700; color: var(--dark); line-height: 1.4;
    margin-bottom: 12px; word-break: keep-all;
}
.evpg-card-body { font-size: 1.5rem; color: var(--cont2); line-height: 1.72; word-break: keep-all }
.evpg-card-body strong { color: var(--primary); font-weight: 600 }
.evpg-card-tag {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bg); border: 1px solid var(--bd-color);
    border-radius: 50px; padding: 4px 12px;
    font-size: 1.2rem; font-weight: 600; color: var(--primary); margin-top: 14px;
}
 
/* ── 요건 박스 ── */
.evpg-req-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}
.evpg-req-box {
    border: 1px solid var(--bd-color);
    border-radius: 16px; overflow: hidden; background: #fff;
    transition: box-shadow .25s;
}
.evpg-req-box:hover { box-shadow: 0 8px 28px rgba(0,0,0,.06) }
.evpg-req-head {
    background: var(--navy);
    padding: 18px 26px; display: flex; align-items: center; gap: 14px;
}
.evpg-hicon {
    width: 38px; height: 38px;
    background: rgba(255,255,255,.12); border-radius: 9px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.evpg-hicon svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.evpg-req-head h3 { font-size: 1.6rem; font-weight: 700; color: #fff; line-height: 1.4 }
.evpg-req-body { padding: 22px 26px }
.evpg-dot-list { display: flex; flex-direction: column; gap: 10px }
.evpg-dot-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 1.5rem; color: var(--cont1); line-height: 1.65;
}
.evpg-dot-list li::before {
    content: ''; flex-shrink: 0; width: 6px; height: 6px;
    border-radius: 50%; background: var(--primary); margin-top: 8px;
}
.evpg-dot-list li strong { color: var(--primary); font-weight: 600 }
.evpg-note {
    margin-top: 14px; padding: 12px 16px;
    background: var(--bg); border-radius: 8px;
    font-size: 1.4rem; color: var(--cont2); line-height: 1.6;
}
.evpg-note strong { color: var(--primary); font-weight: 700 }
 
/* ── 장점 리스트 ── */
.evpg-adv-list { display: flex; flex-direction: column; gap: 16px }
.evpg-adv-item {
    display: flex; align-items: flex-start; gap: 22px;
    background: var(--bg); border: 1px solid var(--bd-color);
    border-radius: 14px;
    padding: clamp(18px,2vw,28px) clamp(20px,2.5vw,36px);
    transition: box-shadow .25s, border-color .25s;
}
.evpg-adv-item:hover {
    box-shadow: 0 6px 20px rgba(19,152,248,.09);
    border-color: rgba(19,152,248,.22);
}
.evpg-adv-icon {
    flex-shrink: 0; width: 50px; height: 50px;
    background: var(--primary); border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.evpg-adv-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.evpg-adv-txt h4 {
    font-size: clamp(1.6rem,calc(.2vw + 1.4rem),1.9rem);
    font-weight: 700; color: var(--dark); margin-bottom: 6px;
}
.evpg-adv-txt p { font-size: 1.5rem; color: var(--cont2); line-height: 1.7; word-break: keep-all }
 
/* ── 레퍼런스 다크 섹션 ── */
.evpg-ref-wrap {
    background: var(--navy);
    padding: clamp(6rem,calc(6vw + 1rem),10rem) 0;
}
.evpg-ref-wrap .evpg-eyebrow { color: rgba(19,152,248,.9) }
.evpg-ref-wrap .sub-h2       { color: #fff }
.evpg-ref-wrap .sub-desc-txt { color: rgba(255,255,255,.65) }
.evpg-ref-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 18px; margin-top: clamp(32px, 4vw, 54px);
}
.evpg-ref-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px; padding: clamp(22px,2.5vw,34px);
    transition: background .25s, border-color .25s;
}
.evpg-ref-card:hover { background: rgba(255,255,255,.1); border-color: rgba(19,152,248,.4) }
.evpg-ref-icon {
    width: 44px; height: 44px; background: rgba(19,152,248,.2);
    border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.evpg-ref-icon svg { width: 20px; height: 20px; stroke: var(--primary); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.evpg-ref-card h4 { font-size: 1.8rem; font-weight: 700; color: #fff; margin-bottom: 10px; line-height: 1.4 }
.evpg-ref-card p  { font-size: 1.45rem; color: rgba(255,255,255,.65); line-height: 1.7; word-break: keep-all }
.evpg-cta-row {
    display: flex; justify-content: center; gap: 14px;flex-wrap: wrap;
}
.evpg-btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #fff;
    border: 1px solid rgba(255,255,255,.35);
    font-size: 1.6rem; font-weight: 600;
    padding: 0 28px; height: clamp(48px,3.25vw,52px);
    border-radius: 100px; transition: background .25s, border-color .25s;
}
.evpg-btn-outline:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.65) }
.evpg-btn-outline svg,
.btn-inquiry svg { width: 16px; height: 16px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
 
/* ── 문의 폼 ── */
.evpg-form-wrap { max-width: 860px; margin: 0 auto }
.evpg-form-box {
    background: var(--bg); border: 1px solid var(--bd-color);
    border-radius: 20px; padding: clamp(30px, 4vw, 52px);
}
.evpg-form-desc { font-size: 1.5rem; color: var(--cont2); margin-bottom: 28px; line-height: 1.6 }
.evpg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px }
.evpg-form-row.full { grid-template-columns: 1fr }
.evpg-form-group { display: flex; flex-direction: column; gap: 7px }
.evpg-label { font-size: 1.4rem; font-weight: 600; color: var(--cont1) }
.evpg-label .req { color: var(--primary); margin-left: 2px }
.evpg-ctrl {
    width: 100%; padding: 13px 16px;
    font-size: 1.5rem; font-family: var(--k-font);
    color: var(--dark); background: #fff;
    border: 1px solid var(--bd-color); border-radius: 10px;
    outline: none; transition: border-color .2s, box-shadow .2s;
}
.evpg-ctrl:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(19,152,248,.12) }
.evpg-ctrl::placeholder { color: #c0c8d4 }
select.evpg-ctrl { cursor: pointer }
textarea.evpg-ctrl { min-height: 130px; resize: vertical }
.evpg-agree {
    background: rgba(19,152,248,.05); border: 1px solid rgba(19,152,248,.15);
    border-radius: 10px; padding: 12px 15px;
    font-size: 1.35rem; color: var(--cont2); line-height: 1.65;
    margin-bottom: 22px; margin-top: 4px;
}
.evpg-agree strong { color: var(--cont1); font-weight: 600 }
.evpg-submit {
    width: 100%; padding: 16px;
    background: var(--primary); color: #fff;
    font-size: 1.7rem; font-weight: 700; font-family: var(--k-font);
    border: none; border-radius: 12px; cursor: pointer;
    transition: background .25s, transform .2s; letter-spacing: -0.02em;
}
.evpg-submit:hover { background: #0d7fd4; transform: translateY(-1px) }
.evpg-submit:active { transform: translateY(0) }
 
/* ── 스크롤 페이드업 ── */
.evpg-fade { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease }
.evpg-fade.on { opacity: 1; transform: translateY(0) }
.evpg-fade:nth-child(2) { transition-delay: .08s }
.evpg-fade:nth-child(3) { transition-delay: .16s }
.evpg-fade:nth-child(4) { transition-delay: .24s }
.evpg-fade:nth-child(5) { transition-delay: .32s }
.evpg-fade:nth-child(6) { transition-delay: .40s }
 
/* ── 반응형 ── */
@media (max-width: 1200px) {
    .split-box { flex-direction: column }
    .split-box__title { flex: none; padding: 28px 28px 0 }
    .split-box__content { padding: 18px 28px 28px }
}
@media (max-width: 1024px) {
    .evpg-check-grid { grid-template-columns: repeat(2, 1fr) }
    .evpg-ref-grid   { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 768px) {
    .evpg-summary    { grid-template-columns: 1fr 1fr }
    .evpg-check-grid { grid-template-columns: 1fr }
    .evpg-req-grid   { grid-template-columns: 1fr }
    .evpg-ref-grid   { grid-template-columns: 1fr }
    .evpg-form-row   { grid-template-columns: 1fr }
    .split-list      { grid-template-columns: 1fr }
    .split-box__divider { display: none }
    .split-box__title   { padding: 20px 20px 0 }
    .split-box__content { padding: 16px 20px 20px }
    .evpg-card-num {font-size:1.8rem;}
}
@media (max-width: 480px) {
    .evpg-summary    { grid-template-columns: 1fr }
    .evpg-cta-row    { flex-direction: column; align-items: center }
    .evpg-btn-outline,
    .btn-inquiry     { width: 100%; justify-content: center }
}


/* ==============================
   other - 선정산서비스
   ============================== */

/* ── 섹션 공통 헤더 ── */
.ps-sec-head {
    text-align: center;
    margin-bottom: clamp(36px, 4.5vw, 60px);
}
.ps-eyebrow {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(19,152,248,.08);
    border-radius: 50px;
    padding: 5px 16px;
    margin-bottom: 14px;
}
 
/* ══════════════════════
   SECTION 1 — 시스템 카드
   ══════════════════════ */
.ps-sys-section {
    padding: clamp(6rem, calc(6vw + 1rem), 10rem) 0;
    background: #fff;
}
.ps-sys-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: clamp(32px, 4vw, 52px);
}
.ps-sys-card {
    background: var(--bg);
    border: 1px solid var(--bd-color);
    border-radius: 18px;
    padding: clamp(24px, 2.5vw, 36px) clamp(20px, 2vw, 28px);
    transition: box-shadow .28s, border-color .28s, transform .28s;
    position: relative;
    overflow: hidden;
}

.ps-sys-card:hover {
    box-shadow: 0 10px 34px rgba(19,152,248,.12);
    transform: translateY(-4px);
}
.ps-sys-card:hover::before { opacity: 1; }
 
.ps-sys-num {
    font-family: var(--e-font);
    font-size: 3.6rem;
    font-weight: 800;
    color: rgba(19,152,248,.12);
    line-height: 1;
    margin-bottom: 8px;
    transition: color .28s;
}
.ps-sys-card:hover .ps-sys-num { color: rgba(19,152,248,.2); }
 
.ps-sys-icon {
    width: 50px; height: 50px;
    background: #fff;
    border: 1px solid var(--bd-color);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    transition: background .28s, border-color .28s;
}
.ps-sys-card:hover .ps-sys-icon {
    background: var(--primary);
    border-color: var(--primary);
}
.ps-sys-icon svg {
    width: 22px; height: 22px;
    stroke: var(--primary); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .28s;
}
.ps-sys-card:hover .ps-sys-icon svg { stroke: #fff; }
 
.ps-sys-tit {
    font-size: clamp(2.2rem, calc(.25vw + 1.4rem), 2.4rem);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    margin-bottom: 16px;
    word-break: keep-all;
}
.ps-sys-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}
.ps-sys-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 1.6rem;
    color: var(--cont2);
    line-height: 1.5;
    word-break: keep-all;
}
.ps-sys-list li::before {
    content: '';
    flex-shrink: 0;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--primary);
    margin-top: 8px;
}
 
/* ══════════════════════
   SECTION 2 — 이용 혜택
   ══════════════════════ */
.ps-benefit-section {
    padding: clamp(6rem, calc(6vw + 1rem), 10rem) 0;
    background: var(--navy);
}
.ps-benefit-section .ps-sec-head { margin-bottom: clamp(36px, 4.5vw, 60px); }
.ps-benefit-section .ps-eyebrow { color: rgba(19,152,248,.9); background: rgba(19,152,248,.15); }
.ps-benefit-section .sub-h2 { color: #fff; }
.ps-benefit-section .sub-desc-txt { color: rgba(255,255,255,.65); }
 
.ps-benefit-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: clamp(32px, 4vw, 52px);
}
.ps-benefit-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;
    padding: clamp(22px, 2.5vw, 32px) clamp(18px, 2vw, 26px);
    text-align: center;
    transition: background .28s, border-color .28s, transform .28s;
}
.ps-benefit-card:hover {
    background: rgba(255,255,255,.11);
    border-color: rgba(19,152,248,.45);
    transform: translateY(-4px);
}
.ps-benefit-ico {
    width: 58px; height: 58px;
    background: rgba(19,152,248,.2);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 18px;
    transition: background .28s;
}
.ps-benefit-card:hover .ps-benefit-ico { background: var(--primary); }
.ps-benefit-ico svg {
    width: 24px; height: 24px;
    stroke: var(--primary); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .28s;
}
.ps-benefit-card:hover .ps-benefit-ico svg { stroke: #fff; }
 
.ps-benefit-tit {
    font-size: clamp(2.2rem, calc(.2vw + 1.35rem), 2.4rem);
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
    word-break: keep-all;
    line-height: 1.35;
}
.ps-benefit-desc {
    font-size: 1.6rem;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
    word-break: keep-all;
}
 
/* ══════════════════════
   SECTION 3 — 인터뷰
   ══════════════════════ */
.ps-review-section {
    padding: clamp(6rem, calc(6vw + 1rem), 10rem) 0;
    background: var(--bg);
}
.ps-review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-top: clamp(36px, 4.5vw, 60px);
}
.ps-review-card {
    background: #fff;
    border: 1px solid var(--bd-color);
    border-radius: 20px;
    padding: clamp(26px, 3vw, 38px);
    position: relative;
    transition: box-shadow .28s, border-color .28s;
}
.ps-review-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
    border-color: rgba(19,152,248,.25);
}
 
/* 말풍선 꼬리 */
.ps-review-card::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: clamp(28px, 3vw, 38px);
    width: 0; height: 0;
    border-left: 14px solid transparent;
    border-right: 8px solid transparent;
    border-top: 16px solid #fff;
    filter: drop-shadow(0 2px 1px rgba(0,0,0,.05));
}
.ps-review-quote {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 10px;
}
.ps-review-txt {
    font-size: clamp(1.5rem, calc(.2vw + 1.35rem), 1.75rem);
    color: var(--cont1);
    line-height: 1.78;
    word-break: keep-all;
    font-weight: 500;
    margin-bottom: 0;
    height:80px;
}
.ps-reviewer-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
}
.ps-reviewer-ava {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.ps-reviewer-ava img {
    width: 50px; height: 50px;
    stroke: #fff; fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.ps-reviewer-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
}
.ps-reviewer-role {
    font-size: 1.35rem;
    color: var(--cont2);
    margin-top: 2px;
}
 
/* 인터뷰 섹션 헤더 intro */
.ps-review-intro {
    font-size: clamp(1.5rem, calc(.3vw + 1.3rem), 1.8rem);
    color: var(--cont2);
    line-height: 1.7;
    word-break: keep-all;
    text-align: center;
    margin-top: clamp(10px, 1.2vw, 18px);
}
 
/* ══════════════════════
   하단 버튼 4개
   ══════════════════════ */
.ps-cta-section {
    background: #fff;
    padding: clamp(5rem, calc(5vw + 1rem), 8rem) 0;
    border-top: 1px solid var(--bd-color);
}
.ps-cta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.ps-cta-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: clamp(24px, 3vw, 36px) 16px;
    border-radius: 16px;
    border: 1.5px solid var(--bd-color);
    background: var(--bg);
    text-align: center;
    transition: background .28s, border-color .28s, box-shadow .28s, transform .28s;
    cursor: pointer;
    text-decoration: none !important;
}
.ps-cta-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 8px 24px rgba(19,152,248,.22);
    transform: translateY(-3px);
}
.ps-cta-btn-ico {
    width: 52px; height: 52px;
    background: #fff;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: background .28s;
}
.ps-cta-btn:hover .ps-cta-btn-ico { background: rgba(255,255,255,.2); }
.ps-cta-btn-ico svg {
    width: 22px; height: 22px;
    stroke: var(--primary); fill: none;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
    transition: stroke .28s;
}
.ps-cta-btn:hover .ps-cta-btn-ico svg { stroke: #fff; }
.ps-cta-label {
    font-size: clamp(1.4rem, calc(.25vw + 1.2rem), 1.7rem);
    font-weight: 700;
    color: var(--dark);
    line-height: 1.35;
    word-break: keep-all;
    transition: color .28s;
}
.ps-cta-btn:hover .ps-cta-label { color: #fff; }
 
/* ── 스크롤 페이드업 ── */
.ps-fade { opacity: 0; transform: translateY(28px); transition: opacity .65s ease, transform .65s ease }
.ps-fade.on { opacity: 1; transform: translateY(0) }
.ps-fade:nth-child(2) { transition-delay: .08s }
.ps-fade:nth-child(3) { transition-delay: .16s }
.ps-fade:nth-child(4) { transition-delay: .24s }
.ps-fade:nth-child(5) { transition-delay: .32s }
 
/* ── 반응형 ── */
@media (max-width: 1200px) {
    .ps-sys-grid { grid-template-columns: repeat(2, 1fr); }
    .ps-benefit-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .ps-cta-grid { grid-template-columns: repeat(2, 1fr); }
    .ps-benefit-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .ps-sys-grid { grid-template-columns: 1fr; }
    .ps-review-grid { grid-template-columns: 1fr; }
    .ps-benefit-grid { grid-template-columns: repeat(2, 1fr); }
    .ps-cta-grid { grid-template-columns: repeat(2, 1fr); }
    .ps-review-card::after { display: none; }
}
@media (max-width: 480px) {
    .ps-benefit-grid { grid-template-columns: 1fr; }
    .ps-cta-grid { grid-template-columns: 1fr; }
}


 /* ── 사이트맵  ── */
.smap-wrap {
    padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 9vw, 120px);
}

/* 그리드: 4열 */
.smap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--bd-color);
    border-radius: 20px;
    overflow: hidden;
}

/* 각 1depth 컬럼 */
.smap-col {
    border-right: 1px solid var(--bd-color);
}
.smap-col:last-child { border-right: none }

/* 1depth 헤더 */
.smap-depth1 {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 26px 28px;
    background: var(--navy);
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.smap-depth1-icon {
    width: 38px;
    height: 38px;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.smap-depth1-icon svg {
    width: 18px; height: 18px;
    stroke: #fff; fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.smap-depth1-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.smap-depth1-en {
    font-family: var(--e-font, 'Outfit', sans-serif);
    font-size: 1.2rem;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}
.smap-depth1-ko {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.5;
    letter-spacing: -0.02em;
}

/* 2depth 목록 */
.smap-depth2-list {
    list-style: none;
    margin: 0; padding: 0;
}

.smap-depth2-list li {
    border-bottom: 1px solid var(--bd-color);
}
.smap-depth2-list li:last-child { border-bottom: none }

.smap-depth2-list li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 28px;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--cont1);
    text-decoration: none;
    transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.smap-depth2-list li a .smap-arrow {
    display: flex;
    align-items: center;
    color: #c8d0dc;
    transition: color 0.2s, transform 0.2s;
    flex-shrink: 0;
}
.smap-depth2-list li a .smap-arrow svg {
    width: 14px; height: 14px;
    stroke: currentColor; fill: none;
    stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}

.smap-depth2-list li a:hover {
    background: #f3f8ff;
    color: var(--primary);
    padding-left: 32px;
}
.smap-depth2-list li a:hover .smap-arrow {
    color: var(--primary);
    transform: translateX(3px);
}

/* 컬럼별 액센트 라인 */
.smap-col:nth-child(1) .smap-depth1 { background: #032B69 }
.smap-col:nth-child(2) .smap-depth1 { background: #053580 }
.smap-col:nth-child(3) .smap-depth1 { background: #073f98 }
.smap-col:nth-child(4) .smap-depth1 { background: #0949b0 }

/* 하단 홈 링크 */
.smap-home-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 40px;
}
.smap-home-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--navy);
    color: #fff;
    font-size: 1.55rem;
    font-weight: 600;
    padding: 0 30px;
    height: 52px;
    border-radius: 100px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    letter-spacing: -0.02em;
}
.smap-home-btn svg {
    width: 17px; height: 17px;
    stroke: #fff; fill: none;
    stroke-width: 2;
    stroke-linecap: round; stroke-linejoin: round;
}
.smap-home-btn:hover {
    background: var(--primary);
    transform: translateY(-2px);
}

/* ── 반응형 ── */
@media (max-width: 1024px) {
    .smap-grid {
        grid-template-columns: repeat(2, 1fr);
        border-radius: 16px;
    }
    .smap-col:nth-child(2) { border-right: none }
    .smap-col:nth-child(3) { border-top: 1px solid var(--bd-color) }
    .smap-col:nth-child(4) {
        border-right: none;
        border-top: 1px solid var(--bd-color);
    }
}

@media (max-width: 600px) {
    .smap-grid {
        grid-template-columns: 1fr;
        border-radius: 14px;
    }
    .smap-col { border-right: none }
    .smap-col + .smap-col { border-top: 1px solid var(--bd-color) }
    .smap-depth1 { padding: 20px 22px }
    .smap-depth2-list li a { padding: 15px 22px }
    .smap-depth2-list li a:hover { padding-left: 26px }
    .smap-home-row { flex-direction: column }
    .smap-home-btn { width: 100%; max-width: 320px; justify-content: center }
}

/* ==========================
 * 진행프로젝트 — 카드 그리드
 * ========================== */
 
/* 패널 헤더 (제목 + 총 건수) */
.pj-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: clamp(20px, 2vw, 30px);
    margin-bottom: clamp(24px, 2.5vw, 36px);
    border-bottom: 1px solid var(--bd-color);
}
.pj-panel-head .dot-tit { padding-bottom: 0 } /* dot-tit 자체 padding 상쇄 */
.pj-panel-count {
    font-size: 1.6rem;
    color: var(--cont2);
    font-weight: 400;
    white-space: nowrap;
}
.pj-panel-count strong {
    font-size: 2.4rem;
    font-weight: 700;
    color: var(--primary);
    margin-right: 2px;
}
 
/* 카드 그리드 */
.pj-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
 
/* 카드 */
.pj-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bd-color);
    border-radius: 14px;
    padding: 22px 22px 18px;
    background: #fff;
    position: relative;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    overflow: hidden;
}
.pj-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), #6dceff);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.pj-card:hover {
    box-shadow: 0 8px 28px rgba(19, 152, 248, 0.05);
    transform: translateY(-3px);
}
.pj-card:hover::before { opacity: 1; }
 .pj-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

/* 상태 뱃지 */
.pj-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 1.4rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.pj-badge::before {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pj-badge--pgd {
    background: rgba(255, 127, 36, 0.1);
    color: rgba(255, 106, 0, 1);
}
.pj-badge--pgd::before { background:rgba(255, 106, 0, 1); }
 
.pj-badge--done {
    background: rgba(19, 152, 248, 0.1);
    color: var(--primary);
}
.pj-badge--done::before { background: var(--primary); }
 
.pj-badge--ing {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}
.pj-badge--ing::before {
    background: #22c55e;
    animation: pjBlink 1.4s infinite;
}
@keyframes pjBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
 
/* 업체명 */
.pj-card__company {
    font-size: clamp(1.6rem, calc(0.27vw + 1.35rem), 2rem);
    font-weight: 700;
    color: var(--dark);
    letter-spacing: -0.02em;
    line-height: 1.35;
    margin-bottom: 4px;
}
 
/* 업무 유형 */
.pj-card__type {
    font-size: 1.5rem;
    color: var(--cont2);
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 20px;
    word-break: keep-all;
}
 
/* 정보 목록 */
.pj-card__info {
    display: flex;
    flex-direction: column;
    gap: 7px;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom:10px;
    flex: 1; /* 카드 높이 균일하게 */
}
.pj-card__info li {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 1.4rem;
}
.pj-key {
    flex-shrink: 0;
    width: 64px;
    color: #aaa;
    font-weight: 500;
}
.pj-val {
    color: var(--cont1);
    font-weight: 400;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
 
/* 카드 하단 (날짜 + 링크) */
.pj-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bd-color);
}
.pj-date {
    font-family: var(--e-font);
    font-size: 1.25rem;
    color: #bbb;
    font-weight: 400;
}
.pj-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none !important;
    transition: gap 0.2s ease;
}
.pj-link:hover { gap: 7px; }
.pj-link svg {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}
 
/* ── 반응형 ── */
@media (max-width: 1200px) {
    .pj-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .pj-grid { grid-template-columns: 1fr; }
    .pj-panel-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}