@charset "utf-8";
@import url(reset.css);
@import url(fonts.css);
/*@import url(common.css);*/

* {font-family:'Pretendard','맑은 고딕','Malgun Gothic','dotum' !important;}

/* =========================================
   company common css
   ========================================= */
:root {
    --main-color: #0060A1;
    --gutter: clamp(20px, 4vw, 40px);   /* 좌우 여백 : 모바일 20 → PC 40 */
}
.wrap {line-height: 1.2; word-break: keep-all; text-align:left;}   /* keep-all : 한글 단어 중간 줄바꿈 방지 */
.section {padding: 70px 0;}
.section.bg-gray {background-color: #F5F6F8;}
.inner-wrap {max-width: 1400px; margin: 0 auto 40px; padding: 0 var(--gutter); box-sizing: content-box;}
.head-wrap {margin-bottom: 64px; text-align:left;}
.head-wrap span {display: inline-block; margin-bottom: 4px; color: var(--main-color); font-size: clamp(14px, 1.67vw, 24px); font-weight: 600; letter-spacing: 0.2em;}
.head-wrap h2 {font-size: clamp(32px, 4.45vw, 64px); font-weight: 600;}

 /* 상단배너 */
.inner {
	width: 100%; 
	/* max-width: 1400px;  */
	margin: 0 auto; 
	padding: 100px 0 0;
}
.main-title {
	font-size: 72px; 
	margin-bottom: 60px; 
	font-weight: 700;
	color: #111;
	letter-spacing: -0.02em;
}

/* Visual Section */
.visual {
	position: relative; 
	height: 100vh;
}
.bottom-fixed {
	width: 100%; 
	position: relative;
}
.fixed-visual {
	position: relative; 
	width: 100%; 
	height: 100vh; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}
.motion-visual {
	position: relative; 
	overflow: hidden; 
	width: 90%; 
	max-width: 1200px;
	height: 65vh; 
	border-radius: 24px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* Image Styles */
.img-wrap {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.img-dimd {
	position: absolute;
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
	opacity: 0;
	top: 0;
	left: 0;
	z-index: 1;
}

/* Text Styles */

.text {position: absolute;bottom: 80px;left: 80px;right: 80px;color: #fff;z-index: 2;opacity: 0;transform: translateY(30px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
.text.active {opacity: 1;transform: translateY(0);}
.text > * {opacity: 0;transform: translateY(20px);transition: opacity 0.8s ease-out, transform 0.8s ease-out;}
.text.active > * {opacity: 1;transform: translateY(0);}
.text .text-label {transition-delay: 0.1s;}
.text .text-title {transition-delay: 0.25s;}
.text .text-stats {transition-delay: 0.45s;}

.text-label {display: flex;align-items: center;gap: 14px;margin-bottom: 24px;font-size: 14px;font-weight: 600;letter-spacing: 0.2em;color: rgba(255,255,255,0.8);}
.text-label::before {content: '';width: 40px;height: 1px;background: currentColor;}
.text-title {max-width: 1080px;font-size: 36px;font-weight: 500;line-height: 1.5;letter-spacing: -0.02em;color: rgba(255,255,255,0.72);word-break: keep-all; text-align:left;}
.text-title em {font-style: normal;font-weight: 700;color: #fff;}

/* 핵심 수치 */
.text-stats {position: relative;display: flex;margin-top: 48px;padding-top: 32px;list-style: none;}
.text-stats::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 1px;background: rgba(255,255,255,0.3);transform: scaleX(0);transform-origin: left;transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1) 0.5s;}
.text.active .text-stats::before {transform: scaleX(1);}
.text-stats li {flex: 1;min-width: 0;}
.text-stats li + li {padding-left: 40px;border-left: 1px solid rgba(255,255,255,0.15);}
.text-stats strong {display: block;font-size: 48px;font-weight: 700;line-height: 1;letter-spacing: -0.02em;font-variant-numeric: tabular-nums;}
.text-stats .unit {margin-left: 4px;font-size: 22px;font-weight: 600;}
.text-stats .label {display: block;margin-top: 12px;font-size: 15px;color: rgba(255,255,255,0.7);}
/* Content After Visual */
.content-section {
	padding: 150px 40px;
	max-width: 1400px;
	margin: 0 auto;
}
.content-section h2 {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 40px;
	color: #111;
}
.content-section p {
	font-size: 18px;
	line-height: 1.8;
	color: #666;
	margin-bottom: 20px;
}

/* Responsive */
@media (max-width: 768px) {
	.main-title {
		font-size: 42px;
	}
	.text {
		bottom: 40px;
		left: 40px;
		right: 40px;
	}
	.text p:first-child {
		font-size: 36px;
	}
	.text p:last-child {
		font-size: 16px;
	}
	.motion-visual {
		width: 95%;
		height: 50vh;
	}
}

/* =========================================
   about.css
   ========================================= */
 .about .head-wrap {text-align:center;}

/* ---------- 회사개요 ---------- */
.overview-wrap {display: flex; align-items: center; gap: 40px;}
.overview-wrap > div:first-child {width: 100%; max-width: 640px;}
.overview-wrap > div:last-child {width: 100%;}
.overview-wrap img {display: block; width: 100%; height: 100%; object-fit: cover; object-position: center;}

.overview-content {display: flex; flex-direction: column; gap: 20px;}
.overview-content > p:first-child {font-size: clamp(24px, 3.34vw, 48px); font-weight: 700;}
.overview-content > p:first-child span {color: var(--main-color);}
.overview-content > p:nth-child(2) {font-size: 16px; line-height: 1.6;}
.overview-content dl > div {display: flex; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid #b2b2b2;}
.overview-content dl > div:first-child {border-top: 1px solid #000;}
.overview-content dl > div > dt,
.overview-content dl > div > dd {flex: 1 1 0;}
.overview-content dl > div > dt {font-size: 18px; font-weight: 600;}
.overview-content dl > div > dd {font-size: 22px; min-width: 400px;}
.overview-content dl > div:last-child > dd {line-height:1.4;}

/* ---------- 사업영역 ---------- */
.business-wrap {display: flex; align-items: stretch; gap: 20px;}   /* stretch : 카드 높이 통일 */
.business-item {position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 32px; padding: 48px 36px 40px; border: 1px solid #E3E5E9; background-color: #fff; transition: .3s ease; transition-property: border-color, box-shadow, transform;}

.icon-wrap {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 64px; height: 64px; border: 1px solid #DEDEDE; border-radius: 50%;}
.icon-wrap i {display: block; width: 30px; height: 30px; background-repeat: no-repeat; background-position: center; background-size: contain;}

.business-item > div:nth-child(2) {display: flex; flex-direction: column;}
.business-item > div:nth-child(2) > span:first-child {font-size: 14px; margin-bottom: 15px;}
.business-item > div:nth-child(2) > span:nth-child(2) {font-size: 26px; font-weight: 600; margin-bottom: 10px;}
.business-item > div:nth-child(2) > span:nth-child(3) {font-size: 14px; font-weight: 600; margin-bottom: 20px; color: var(--main-color);}
.business-item > div:nth-child(2) > p {font-size: 16px; line-height: 1.6;}
.keyword-wrap {display: flex; flex-wrap: wrap; align-items: center; gap: 6px;}
.keyword-wrap span {padding: 6px 12px; font-size: 14px; border: 1px solid #7D7D7D; border-radius: 999px;}
/* margin-top:auto : 설명 길이가 달라도 '자세히 보기'가 카드 하단에 정렬 */
.business-item > a {display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding-top: 20px; border-top: 1px solid #000; font-weight: 600;}
.business-item > a span:last-child {display: flex;}

.icon-staffing {background-image: url('/renewal_images/company_overview/icon-staffing.png');}
.icon-outsourcing {background-image: url('/renewal_images/company_overview/icon-outsourcing.png');}
.icon-recruit {background-image: url('/renewal_images/company_overview/icon-recruit.png');}
.icon-arrow {display: inline-block; width: 15px; height: 15px; background: url('/renewal_images/company_overview/icon-arrow.png') no-repeat center / contain;}

/* ---------- 그룹사 소개 (탭) ---------- */
/* 탭이 넘치면 가로 스크롤. 하단 라인은 스크롤돼도 고정되도록 inset box-shadow 로 */
.tab-btn-wrap {position: relative; display: flex; justify-content: space-between; width: 100%; margin-bottom: 40px; padding: 0 60px; overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 -1px 0 #CDCDCD; box-sizing:border-box;}
.tab-btn-wrap::-webkit-scrollbar {display: none;}
.tab-btn {position: relative; flex-shrink: 0; padding: 20px 15px; border: 0; background: none; font-family: inherit; font-size: 18px; font-weight: 600; color: #333; white-space: nowrap; cursor: pointer; transition: color .3s ease;}
.tab-btn::before {content: ""; position: absolute; left: 50%; bottom: 0; width: 0; height: 2px; background-color: var(--main-color); transform: translateX(-50%); transition: width .3s ease;}
.tab-btn.active {color: var(--main-color);}
.tab-btn.active::before {width: 100%;}
.tab-btn:focus-visible {outline: 2px solid var(--main-color); outline-offset: -4px;}

.tab-content {display: none; align-items: center; justify-content: space-between; gap: clamp(40px, 7vw, 100px);}
.tab-content.active {display: flex; animation: tabFade .4s ease;}
.tab-content:focus-visible {outline: 2px solid var(--main-color); outline-offset: 8px;}
@keyframes tabFade {
    from {opacity: 0; transform: translateY(10px);}
    to {opacity: 1; transform: none;}
}

/* 600x350 비율 유지하면서 화면이 줄면 같이 줄어듦 */
.company-logo {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 43%; max-width: 600px; aspect-ratio: 12 / 7; border: 1px solid var(--main-color); border-radius: 20px; overflow: hidden; background-color:#fff;}
.company-logo img {max-width: 70%; max-height: 60%; object-fit: contain;}
.group-info {display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;}
.group-info .sub {font-size: 16px; margin-bottom: 6px;}
.company-name {font-size: 30px; font-weight: 600; margin-bottom: 15px;}
.company-desc {font-size: 18px; line-height: 1.6; margin-bottom: 20px;}
.company-etc {display: flex; gap: 60px; padding-top: 20px; border-top: 1px solid #000;}
.company-etc dl {font-size: 18px; font-weight: 500;}
.company-etc dt {color: #333; margin-bottom: 12px;}


/* =========================================
   greeting.css (인사말·비전)
   ========================================= */
.greeting {
    --navy: #13325A;
    --text: #444;
}
.greeting .head-wrap {text-align: center;}
.greeting img {max-width: 100%;}
.greeting .br-m {display: none;}   /* 모바일에서만 줄바꿈 (768 이하에서 보임) */


.greeting-hero {position: relative; display: flex; align-items: center; min-height: 440px; padding: 64px 5.2%; overflow: hidden; background-color: #EAF3FC;}
.greeting-hero > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center;}
.hero-text {position: relative; z-index: 1; max-width: 600px;}
.hero-eyebrow {display: flex; align-items: center; gap: 20px; font-size: 14px; font-weight: 500; color: #2A78C2;}
.hero-eyebrow::after {content: ""; width: 92px; height: 1px; background-color: currentColor;}
.hero-title {margin: 28px 0 36px; font-size: clamp(28px, 2.7vw, 38px); font-weight: 700; line-height: 1.35; color: #111;}
.hero-title span {display: block; color: var(--main-color);}
.hero-desc {font-size: 17px; line-height: 1.75; color: #222;}


/* =========================================
   인사말 - THE PRESENT / THE FUTURE
   PC : 세 요소를 같은 그리드 칸에 겹친 뒤 clip-path 로 사선 분할
        (사선 위치를 % 로 잡아서 높이가 바뀌어도 글자를 침범하지 않음)
   ========================================= */
.greeting-story {display: grid; margin-top: 6px; background-color: #fff;}   /* 배경 흰색 = 빌딩과 FUTURE 사이 흰 사선 */
.greeting-story > * {grid-area: 1 / 1;}

.story-present {padding: 48px 0 48px 4.25%; background: linear-gradient(120deg, #E6EFF9 0%, #F4F8FD 50%, #fff 100%); clip-path: polygon(0 0, 46.5% 0, 37.75% 100%, 0 100%);}
/* 빌딩 띠 : 사선이 걸치는 37.75% ~ 55% 구간만 차지 → 사진이 띠 크기에 맞춰 cover 되어 건물이 크게 보임 */
.story-photo {position: relative; width: 17.25%; margin-left: 37.75%; clip-path: polygon(50.7% 0, 100% 0, 49.3% 100%, 0 100%);}
.story-photo img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 100%;}
.story-future {position: relative; isolation: isolate; padding: 48px 4% 48px 56.75%; color: #fff; clip-path: polygon(55.5% 0, 100% 0, 100% 100%, 46.75% 100%);}
/* 배경 사진은 파란 패널 영역(46.75% ~ 100%)에만 cover → 해가 글자 오른쪽에 오도록 */
.story-future::before {content: ""; position: absolute; top: 0; bottom: 0; left: 46.75%; right: 0; z-index: -1;
    background: linear-gradient(180deg, rgba(0, 55, 130, .30) 0%, rgba(0, 55, 130, .15) 60%, rgba(0, 25, 70, .25) 100%),
                url(../renewal_images/company_greeting/greeting_future.jpg) left center / cover no-repeat;}

.story-present .story-inner {width: 31%;}      /* 그리드 칸 전체 폭 기준 → 사선 왼쪽 안에 들어감 */
.story-future .story-inner {max-width: 400px;}

.story-eyebrow {display: block; font-size: 15px; font-weight: 600; letter-spacing: .15em; color: var(--main-color);}
.story-eyebrow::before {content: ""; display: block; width: 54px; height: 3px; margin-bottom: 18px; background-color: currentColor;}
.story-future .story-eyebrow {color: #fff;}
.story-title {margin: 20px 0 24px; font-size: clamp(22px, 1.8vw, 26px); font-weight: 700; line-height: 1.45; color: #111;}
.story-title span {color: var(--main-color);}
.story-future .story-title {color: #fff;}
.story-desc p {font-size: 15px; line-height: 1.65; color: var(--text);}
.story-desc p + p {margin-top: 14px;}
.story-future .story-desc p {color: rgba(255, 255, 255, .92);}

/* 아이콘 */
.story-icons {display: flex; gap: 16px; margin-top: 32px; list-style: none;}
.story-present .story-icons {justify-content: space-between;}
.story-future .story-icons {gap: 28px;}
.story-icons li {display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 64px; font-size: 14px; text-align: center; color: var(--text);}
.story-future .story-icons li {color: #fff;}
.story-icons .ico {display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background-color: #fff; box-shadow: 0 6px 16px rgba(0, 40, 90, .10);}
.story-future .story-icons .ico {background: none; box-shadow: none; border: 1.5px solid rgba(255, 255, 255, .9);}
.story-icons .ico img {width: 30px; height: 30px; object-fit: contain;}

/* PC(1201~) : PRESENT / FUTURE 아이콘 줄을 하단 끝선에 맞춤
   - 두 패널은 같은 그리드 칸이라 높이가 같음 → 아이콘을 margin-top:auto 로 각 패널 바닥까지 밀어냄
   - 라벨이 두 줄이 되면 원 위치가 어긋나므로 PC 에선 한 줄 고정 */
@media (min-width: 1201px) {
    .story-present,
    .story-future {display: flex; flex-direction: column;}
    .story-inner {display: flex; flex-direction: column; flex: 1;}
    .story-icons {margin-top: auto; padding-top: 32px;}
    .story-icons li {white-space: nowrap;}
}


/* =========================================
   인사말 - 맺음말
   ========================================= */
.greeting-closing {padding: 88px 5.2% 24px; text-align: center;}
.closing-msg {font-size: clamp(18px, 1.6vw, 21px); font-weight: 600; line-height: 1.5; color: var(--main-color);}
.closing-sign {display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; margin-top: 48px;}
.closing-mark {justify-self: start; text-align: left; line-height: 1; color: #DCE6F3;}
.closing-mark span {display: block; margin-bottom: 8px; font-size: 14px; color: #A9BEDA; letter-spacing: .02em;}
.closing-mark strong {font-size: clamp(48px, 4.7vw, 66px); font-weight: 800; letter-spacing: -.01em;}
.closing-from {font-size: 17px; font-weight: 500; color: #111;}
.closing-signature {justify-self: end; width: 180px;}


/* =========================================
   비전
   PC(1280~) : 배경 이미지 위에 텍스트를 % 위치로 올림
               글자 크기는 cqw(보드 폭 기준)로 이미지와 같은 비율로 커지고 줄어듦
   ========================================= */
.vision-board {position: relative; container-type: inline-size; overflow: hidden;}
.vision-diagram {display: block;}
.vision-diagram img {display: block; width: 100%;}

.vision-head {position: absolute; top: 4.6%; left: 0; right: 0; text-align: center;}
.vision-title {font-size: clamp(28px, 2.8cqw, 56px); font-weight: 700; line-height: 1.3; color: #111;}
.vision-title span {color: var(--main-color);}
.vision-desc {margin-top: 1.4cqw; font-size: clamp(15px, 1.3cqw, 26px); line-height: 1.75; color: #222;}

.brand-item {position: absolute;}
.brand-item.essence {top: 23.9%; left: 8.4%;}
.brand-item.identity {top: 36.4%; left: 77.65%;}
.brand-item.personality {top: 55.1%; left: 4.4%;}
.brand-eyebrow {display: block; font-size: clamp(12px, 1.1cqw, 22px); font-weight: 600; letter-spacing: .2em; color: var(--main-color);}
.brand-title {margin: 1.5cqw 0 1.1cqw; font-size: clamp(17px, 1.6cqw, 32px); font-weight: 700; line-height: 1.3; color:#00406B;}
.brand-desc {font-size: clamp(13px, 1.05cqw, 21px); line-height: 1.65; color: #555;}

.vision-lines {position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;}
.vision-lines path {fill: none; stroke: #1B4E86; stroke-width: 1.2;}
.vision-lines circle {fill: #1B4E86;}

.vision-values {position: absolute; top: 85.6%; left: 0; right: 0; display: flex; justify-content: center; gap: 4cqw; list-style: none;}
.vision-values li {display: flex; align-items: center; gap: 1.5cqw; text-align: left;}
.vision-values .ico {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 5cqw; height: 5cqw; border-radius: 50%; background-color: #D6E6FA;}
.vision-values .ico img {width: 56%; height: 56%; object-fit: contain;}
.vision-values strong {display: block; margin-bottom: .4cqw; font-size: clamp(12px, 1cqw, 20px); font-weight: 600; letter-spacing: .2em; color: var(--main-color);}
.vision-values p {font-size: clamp(12px, .95cqw, 19px); color: #555;}


/* =========================================
   clients.css
   ========================================= */
.clients .inner-wrap {display:flex; gap:40px;}
.clients .head-wrap {width:400px; flex-shrink:0;}

.client-wrap {
    --cols: 3;          /* 열 개수 */
    --load-rows: 2;     /* 한 번에 추가할 줄 수 (3열 × 2줄 = 6개) */
    flex:1; min-width:0;
    display:grid; grid-template-columns:repeat(var(--cols), 1fr);
    column-gap:15px; row-gap:40px; padding:0 10px;
}

.client-item {
    position:relative;
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:3 / 2;   /* 시안의 박스 비율에 맞게 조정 */
    border:1px solid #0055D450; border-radius:8px; box-shadow:0 0 5px 1px #0084FF40;
    animation:clientIn .6s ease both;
}
.client-item img {max-width:60%; max-height:50%; object-fit:contain; width: auto; height: auto;}
.client-item[hidden] {display:none;}

/* 흐린 줄: 아이템마다 흰색 그라데이션 → 크기가 바뀌어도 자동으로 맞음 */
.client-item::after {
    content:''; position:absolute; inset:-8px;   /* 그림자까지 덮기 */
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 75%);
    opacity:0; transition:opacity .5s; pointer-events:none;
}
.client-item.is-peek::after {opacity:1;}

@keyframes clientIn {
    from {opacity:0; transform:translateY(40px);}
    to   {opacity:1; transform:none;}
}

/* =========================================
   history.css
   ========================================= */
.history-wrap {
	/* 1920 기준 최대값 → 화면 폭에 따라 자연스럽게 줄어듦 */
	--year-w: clamp(150px, 24vw, 460px);      /* 연도 영역 폭 */
	--rail-x: clamp(28px, 5.4vw, 104px);      /* 연도 ~ 세로선 */
	--rail-gap: clamp(24px, 2.5vw, 48px);     /* 세로선 ~ 구분선 시작 */
	--text-indent: clamp(8px, 1vw, 20px);     /* 구분선 시작 ~ 글자 */
	--gap: clamp(16px, 1.25vw, 24px);         /* 구분선 위·아래 여백 */
	--item-fs: clamp(16px, 1.25vw, 24px);     /* 항목 글자 크기 */
	--year-fs: clamp(28px, 2.1vw, 40px);      /* 연도 글자 크기 */
	--dot: clamp(10px, 0.73vw, 14px);
	--sticky-top: 160px;                      /* 상단 고정 헤더 높이에 맞게 조정 */

	--c-bg: #fff;                             /* 섹션 배경색 (bg-gray 섹션이면 #F5F6F8) */
	--c-year: #0d2c6c;
	--c-text: #111;
	--c-text-dim: #b3b9c4;
	--c-dot: #b8c0cc;
	--c-dot-active: #1560bd;
	--c-rail: #dfe3ea;
	--c-divider: #c4c9d1;
	--bg-w: calc(var(--year-w) + var(--rail-x));
    --bg-ratio: 3 / 4; 

	position: relative;
	isolation: isolate;          /* 배경 원이 섹션 뒤로 빠지지 않게 */
	overflow-x: clip;            /* 원의 왼쪽만 잘라냄 (hidden 은 sticky 를 깨므로 clip 사용) */
	display: flex;
	align-items: flex-start;     /* sticky 동작에 필수 */
	padding-bottom:40px;
}

/* 연도 (sticky) */
.history-wrap .year {
	position: sticky;
	top: var(--sticky-top);
	flex: 0 0 var(--year-w);
	text-align: right;
	font-size: var(--year-fs);
	font-weight: 700;
	line-height: calc(var(--item-fs) * 1.6);   /* 항목 첫 줄과 높이 맞춤 */
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;        /* 숫자 폭 고정 — 연도가 바뀌어도 흔들리지 않음 */
	color: var(--c-year);
}

.history-wrap::before {
    content: '';
    position: sticky;
    z-index: -1;
    top: calc(var(--sticky-top) - 32px);
    flex: 0 0 var(--bg-w);
    aspect-ratio: var(--bg-ratio);
    margin-right: calc(var(--bg-w) * -1);          /* 레이아웃 폭 0 */
    background: url('/renewal_images/company_history/history-bg.png') no-repeat left top / cover;
    pointer-events: none;
}

.history-wrap .history {
	flex: 1;
	min-width: 0;
	margin-left: var(--rail-x);
}

/* 그룹 */
.history-wrap .history ul {
	position: relative;
	margin-left: var(--rail-gap);
	padding-left: var(--text-indent);
	font-size: var(--item-fs);
	color: #B3BDCC;
	transition: color 0.4s;
}
.history-wrap .history ul + ul {
	margin-top: var(--gap);
	padding-top: var(--gap);
	border-top: 1px solid var(--c-divider);
}
.history-wrap .history ul.active { color: #000; }

/* 점 — 각 그룹 첫 줄 가운데 */
.history-wrap .history ul::before {
	content: '';
	position: absolute;
	z-index: 1;
	left: calc(-1 * var(--rail-gap));
	top: 0.8em;
	width: var(--dot);
	height: var(--dot);
	border-radius: 50%;
	background: #B3BDCC;
	transform: translate(-50%, -50%);
	transition: background-color 0.4s, box-shadow 0.4s;
}
.history-wrap .history ul + ul::before { top: calc(var(--gap) + 0.8em); }
.history-wrap .history ul.active::before {
	background: var(--c-dot-active);
	box-shadow: 0 0 0 calc(var(--dot) * 0.35) rgba(21, 96, 189, 0.2);
}

.history-wrap .history ul li {margin-bottom:20px; font-weight:500;}
.history-wrap .history ul li:last-child {margin-bottom:0px;}
/* 세로선 — 현재 그룹의 점 ~ 다음 그룹의 점 */
.history-wrap .history ul:not(:last-child)::after {
	content: '';
	position: absolute;
	left: calc(-1 * var(--rail-gap));
	top: 0.8em;
	bottom: calc(-2 * var(--gap) - 0.8em - 1px);
	width: 1px;
	background: var(--c-rail);
	transform: translateX(-50%);
}
.history-wrap .history ul + ul:not(:last-child)::after { top: calc(var(--gap) + 0.8em); }


/* =========================================
   location.css
   ========================================= */
.location-bg {background:url('/renewal_images/company_location/location-bg.png') no-repeat center / cover; display:flex; justify-content:center; align-items:center; padding-top:40px;}
.location-bg > .inner-wrap {width: 100%; min-width: 0;}
.location-wrap {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	--loc-primary: #0060A1;
	--loc-primary-dark: #0848aa;
	--loc-primary-soft: #eaf2ff;
	--loc-navy: #0f1e3d;
	--loc-text: #333b47;
	--loc-gray: #7a8494;
	--loc-line: #e6eaf0;
	--loc-radius: 20px;
	--loc-indent: 62px;
}

	/* 지도 관련*/
	.map-wrap {border-radius:20px; width:100%; height:100%; min-height:480px; position:relative; background: #eef1f5; overflow: hidden;}
	.map-wrap #map {position: absolute; inset: 0;}
	.control-wrap {position:absolute; top:5px; right: 10px; display:flex; flex-direction:column;}
	.radius_border{border:1px solid #919191;border-radius:5px;}     
	.custom_typecontrol {position:absolute;top:10px;right:10px;overflow:hidden;width:130px;height:30px;margin:0;padding:0;z-index:1;font-size:12px;font-family:'Malgun Gothic', '맑은 고딕', sans-serif;}
	.custom_typecontrol span {display:block;width:65px;height:30px;float:left;text-align:center;line-height:30px;cursor:pointer;}
	.custom_typecontrol .btn {background:#fff;background:linear-gradient(#fff,  #e6e6e6);}       
	.custom_typecontrol .btn:hover {background:#f5f5f5;background:linear-gradient(#f5f5f5,#e3e3e3);}
	.custom_typecontrol .btn:active {background:#e6e6e6;background:linear-gradient(#e6e6e6, #fff);}    
	.custom_typecontrol .selected_btn {color:#fff;background:#425470;background:linear-gradient(#425470, #5b6d8a);}
	.custom_typecontrol .selected_btn:hover {color:#fff;}   
	.custom_zoomcontrol {position:absolute;top:50px;right:10px;width:36px;height:80px;overflow:hidden;z-index:1;background-color:#f5f5f5;} 
	.custom_zoomcontrol span {display:block;width:36px;height:40px;text-align:center;cursor:pointer;}     
	.custom_zoomcontrol span img {width:15px;height:15px;padding:12px 0;border:none;}             
	.custom_zoomcontrol span:first-child{border-bottom:1px solid #bfbfbf;}
	.map-marker {font-size:}

.location-info {word-break: keep-all; overflow-wrap: break-word;}
:where(.location-info) :where(p, ul) {margin: 0;padding: 0;list-style: none;}
.info-row {position: relative; padding: 18px 0 28px;}
.info-row:first-child {padding-top: 0;}
.info-row + .info-row {border-top: 1px solid var(--loc-line);}
.info-head {display: flex; align-items: center; gap: 18px;}
.info-head > div {flex-shrink: 0;display: flex;align-items: center;justify-content: center;width: 44px;height: 44px;border-radius: 50%;background-color:#eaf2ff;}
.info-head i {display: inline-block;width: 28px;height: 28px;background-repeat: no-repeat;background-position: center;background-size: contain;}
.info-head span {font-size: 13px;font-weight: 800;letter-spacing: 0.14em;color: #0060A1;}
.info-body {padding-left: var(--loc-indent);}

.info-address .info-body {margin-top: -4px;}
.info-title {display: block;font-size: 26px;font-weight: 800;line-height: 1.3;letter-spacing: -0.01em;color: var(--loc-navy);}
.info-addr {margin-top: 10px;font-size: 16px;line-height: 1.5;color: var(--loc-text);}
.info-desc {margin-top: 4px;font-size: 14px;color: var(--loc-gray);}
.btn-copy {position: absolute;top: 22px;right: 0;display: inline-flex;align-items: center;gap: 6px;height: 36px;padding: 0 16px;border: 1px solid var(--loc-primary);border-radius: 6px;background: #fff;color: var(--loc-primary);font: inherit;font-size: 13px;font-weight: 600;cursor: pointer;transition: background-color 0.2s;}
.btn-copy .icon-copy {display: inline-block;width: 20px;height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain;}

.contact-list {display: grid;grid-template-columns: repeat(3, auto);margin-top: 8px;}
.contact-list li {display: flex;flex-direction: column;gap: 8px;min-width: 0;}
.contact-list li + li {padding-left: 26px;border-left: 1px solid var(--loc-line);}
.contact-list strong {font-size: 13px;font-weight: 700;letter-spacing: 0.04em;color: var(--loc-navy);}
.contact-list a,
.contact-list span {font-size: 15px;color: var(--loc-text);text-decoration: none;overflow-wrap: anywhere;}
.contact-list a:hover {color: var(--loc-primary);}

.info-traffic .info-head span {font-size: 19px;font-weight: 700;letter-spacing: -0.02em;color: var(--loc-navy);}
.traffic-list {display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); margin-top: 18px;padding-left: 10px; }
.traffic-list li {min-width: 0;}
.traffic-list li + li {padding-left: 26px;border-left: 1px solid var(--loc-line);}
.traffic-tit {display: flex;align-items: center;gap: 10px;font-size: 15px;font-weight: 700;color: var(--loc-navy);}
.traffic-tit i {flex-shrink: 0;width: 22px;height: 22px;background: no-repeat center / contain;}
.traffic-txt {margin-top: 12px;font-size: 14px;font-weight: 500;line-height: 1.5;color: var(--loc-text);}
.traffic-txt + .traffic-txt {margin-top: 4px;}
.traffic-sub {margin-top: 4px;font-size: 13px;line-height: 1.5;color: var(--loc-gray);}

.location-btns {display: grid;grid-template-columns: 1fr 1fr;gap: 22px;}
.btn-map {display: flex;align-items: center;gap: 12px;height: 56px;padding: 0 24px 0 40px;border: 1px solid var(--loc-primary);border-radius: 6px;font-size: 15px;font-weight: 700;text-decoration: none;transition: background-color 0.2s, border-color 0.2s;}
.btn-map::after {content: '';width: 7px;height: 7px;margin-left: auto;border-top: 1.5px solid currentColor;border-right: 1.5px solid currentColor;transform: rotate(45deg);}
.btn-map svg {flex-shrink: 0;width: 20px;height: 20px;}
.btn-kakao {background: var(--loc-primary);color: #fff;}
.btn-kakao:hover {background: var(--loc-primary-dark);border-color: var(--loc-primary-dark);}
.btn-naver {background: #fff;color: var(--loc-primary);}
.btn-naver:hover {background: var(--loc-primary-soft);}
.btn-naver .ico-naver {flex-shrink: 0;display: inline-flex;align-items: center;justify-content: center;width: 20px;height: 20px;border-radius: 4px;background: #03c75a;color: #fff;font-size: 12px;font-weight: 900;font-style: normal;line-height: 1;}

/* 찾아오시는길 아이콘 */
.icon-location {background-image:url('/renewal_images/company_location/icon-location.png');}
.icon-contact {background-image:url('/renewal_images/company_location/icon-call.png');}
.icon-traffic {background-image:url('/renewal_images/company_location/icon-bus.png');}
.traffic-tit i.icon-subway {background-image:url('/renewal_images/company_location/icon-subway.png');}
.traffic-tit i.icon-bus {background-image:url('/renewal_images/company_location/icon-bus.png');}
.traffic-tit i.icon-car {background-image:url('/renewal_images/company_location/icon-car.png');}
.icon-copy {background-image:url('/renewal_images/company_location/icon-copy.png');}
/* =========================================
   hover
   ========================================= */
@media (hover: hover) {
    .business-item:hover {border-color: var(--main-color); box-shadow: 0 0 10px #0060A150; transform: translateY(-20px);}
    .tab-btn:hover {color: var(--main-color);}
	
	/*찾아오시는길*/
	.btn-copy:hover {background: var(--loc-primary-soft);}
}



/* =========================================
   responsive
   ========================================= */

@media (max-width: 1480px) {
    .tab-btn-wrap {padding: 0;}
}

@media (max-width: 1440px) {
	.location-bg {padding-left: 20px; padding-right: 20px;}
}

@media (max-width: 1340px) {
    .tab-btn {padding: 20px 8px; font-size: 16px;}
}

/* ~1279 : 비전 — 다이어그램 크롭 이미지 + 카드형 */
@media (max-width: 1279px) {
	
	/*비전,인사말*/
    .vision-board {padding: 56px 40px; border-radius: 20px; background: linear-gradient(180deg, #F5F9FE 0%, #E7F0FB 100%);}
    .vision-head,
    .brand-item,
    .vision-values {position: static;}
    .vision-lines {display: none;}
    .vision-board .br-pc {display: none;}

    .vision-title {font-size: clamp(24px, 3.4vw, 34px);}
    .vision-desc {margin-top: 14px; font-size: 16px;}
    .vision-diagram {max-width: 500px; margin: 16px auto 24px;}
    /* 크롭 이미지 가장자리를 투명하게 → 보드 배경과 자연스럽게 이어짐 */
    .vision-diagram img {
        mix-blend-mode: multiply;   /* 이미지의 흰 배경이 보드 배경색을 따라감 */
        -webkit-mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
        -webkit-mask-composite: source-in;
        mask-image: linear-gradient(to right, transparent, #000 9%, #000 91%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 91%, transparent);
        mask-composite: intersect;
    }

    .vision-brands {display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;}
    .brand-item {padding: 28px 24px; border-radius: 16px; background-color: rgba(255, 255, 255, .85); box-shadow: 0 6px 20px rgba(0, 50, 110, .06);}
    .brand-eyebrow {font-size: 13px;}
    .brand-title {margin: 12px 0 10px; font-size: 19px;}
    .brand-desc {font-size: 15px;}

    .vision-values {flex-wrap: wrap; gap: 20px 40px; margin-top: 40px;}
    .vision-values li {gap: 14px;}
    .vision-values .ico {width: 60px; height: 60px;}
    .vision-values strong {margin-bottom: 4px; font-size: 14px;}
    .vision-values p {font-size: 14px;}
	
	/* 찾아오시는길 */
	.location-wrap {gap: 32px;}
	.contact-list li + li,
	.traffic-list li + li {padding-left: 18px;}
	.btn-map {padding-left: 28px;}
}




/* ~1280 : 노트북 */
@media (max-width: 1280px) {
    .overview-content dl > div > dt {flex: 0 0 120px;}
    .overview-content dl > div > dd {min-width: 0; font-size: 20px;}

    .business-item {gap: 28px; padding: 40px 28px 32px;}
    .business-item > div:nth-child(2) > span:nth-child(2) {font-size: 24px;}

    .company-name {font-size: 26px;}
    .company-desc {font-size: 16px;}
}

@media (max-width: 1200px) {
	/*비전,인사말*/
    .greeting-story {display: block; background: none;}
    .story-present,
    .story-future {clip-path: none; padding: 56px 6%;}
    .story-present .story-inner {width: auto; max-width: 560px;}
    .story-present .story-icons {justify-content: flex-start; gap: 28px;}
    /* 빌딩 사진은 두 패널 사이 띠 이미지로 */
    .story-photo {clip-path: none; width: auto; margin-left: 0; aspect-ratio: 16 / 5;}
    .story-photo img {object-position: 50% 60%;}
    .story-future::before {left: 0; background-position: center, 70% 75%;}
    .story-future .story-inner {max-width: 560px;}
	
	/* 찾아오시는길 */
	.location-wrap {grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: stretch;}
	.map-wrap {height: 400px; min-height: 0;}
	.contact-list li + li,
	.traffic-list li + li {padding-left: 26px;}
	.btn-map {padding-left: 40px;}
}


@media (max-width: 1100px) {
    .tab-btn {padding: 20px 6px; font-size: 15px;}
}

/* ~1024 : 태블릿 — 세로 배치 */
@media (max-width: 1024px) {
    .wrap {padding: 40px 0;}
    .section {padding: 56px 0;}
    .head-wrap {margin-bottom: 48px;}

	/* 회사개요 */
    .overview-wrap {flex-direction: column; align-items: stretch; gap: 32px;}
    .overview-wrap > div:first-child {max-width: none;}
    .overview-wrap img {height: auto; aspect-ratio: 16 / 10;}
    .overview-content {gap: 32px;}

    .business-wrap {flex-direction: column;}
    .business-item {flex: none;}

    /* 탭바를 화면 끝까지 붙여서 스와이프하기 편하게 */
    .tab-btn-wrap {width: auto; margin: 0 calc(var(--gutter) * -1) 32px; padding: 0 var(--gutter); justify-content: flex-start;}
    .tab-btn {padding: 18px 14px; font-size: 16px;}

    .tab-content {flex-direction: column; align-items: stretch; gap: 32px;}
    .company-logo {width: 100%; max-width: none; aspect-ratio: 16 / 7;}
	
	/* 비전,인사말*/
	.greeting-hero {min-height: 400px;}
    .hero-text {max-width: 62%;}
    .hero-desc {font-size: 16px;}
	
	
	/* 주요고객사 */
	.clients .inner-wrap {flex-direction:column; gap:24px;}
    .clients .head-wrap {width:auto;}
}


/* ~768 : 모바일 */
@media (max-width: 768px) {
    .wrap {padding: 20px 0;}
    .section {padding: 48px 0;}
    .inner-wrap {margin-bottom: 0;}
    .head-wrap {margin-bottom: 32px;}
	.pc-only {display: none;}
    .overview-content {gap: 24px;}
    .overview-content > p:nth-child(2) {font-size: 15px;}
    .overview-content dl > div {align-items: flex-start; padding: 14px 0;}
    .overview-content dl > div > dt {flex: 0 0 80px; font-size: 15px;}
    .overview-content dl > div > dd {font-size: 16px;}

    .business-wrap {gap: 16px;}
    .business-item {gap: 24px; padding: 32px 24px 28px;}
    .business-item > div:nth-child(2) > span:first-child {margin-bottom: 10px;}
    .business-item > div:nth-child(2) > span:nth-child(2) {font-size: 22px; margin-bottom: 6px;}
    .business-item > div:nth-child(2) > span:nth-child(3) {font-size: 13px; margin-bottom: 14px;}
    .business-item > div:nth-child(2) > p {font-size: 15px;}
    .keyword-wrap span {padding: 5px 10px; font-size: 13px;}
    .icon-wrap {width: 56px; height: 56px;}
    .icon-wrap i {width: 26px; height: 26px;}

    .tab-btn-wrap {margin-bottom: 24px;}
    .tab-btn {padding: 14px 12px; font-size: 15px;}

    .tab-content {gap: 24px;}
    .company-logo {aspect-ratio: 16 / 9; border-radius: 12px;}
    .group-info .sub {font-size: 14px;}
    .company-name {font-size: 22px; margin-bottom: 12px;}
    .company-desc {font-size: 15px;}
    .company-etc {flex-wrap: wrap; gap: 16px 40px; padding-top: 16px;}
    .company-etc dl {font-size: 15px;}
    .company-etc dt {margin-bottom: 6px;}
	
	
	
	/* 인사말,비전 */
	.br-pc {display: none;}
    .greeting .br-m {display: inline;}

    /* 히어로 : 글자 → 사진 순서로 세로 배치 */
    .greeting-hero {display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; background: linear-gradient(180deg, #EEF5FD 0%, #F8FBFE 100%);}
    .greeting-hero > img {position: static; aspect-ratio: 16 / 9; object-position: 88% center;}
    .hero-text {max-width: none; padding: 40px 24px 32px;}
    .hero-eyebrow {font-size: 13px;}
    .hero-eyebrow::after {width: 56px;}
    .hero-title {margin: 18px 0 20px; font-size: 26px;}
    .hero-desc {font-size: 15px; line-height: 1.7;}

    .story-present,
    .story-future {padding: 44px 24px;}
    .story-eyebrow {font-size: 13px;}
    .story-eyebrow::before {width: 40px; margin-bottom: 14px;}
    .story-title {margin: 14px 0 18px; font-size: 21px;}
    .story-photo {aspect-ratio: 16 / 7;}
    /* 모바일은 글자가 전체 폭이라 해 위에 겹침 → 오버레이를 조금 더 진하게 */
    .story-future::before {background-image: linear-gradient(180deg, rgba(0, 50, 120, .45) 0%, rgba(0, 50, 120, .35) 60%, rgba(0, 25, 70, .45) 100%), url(../renewal_images/company_greeting/greeting_future.jpg);}

    .story-icons,
    .story-present .story-icons,
    .story-future .story-icons {display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 32px;}
    .story-future .story-icons {grid-template-columns: repeat(3, 1fr);}
    .story-icons li {min-width: 0; gap: 10px; font-size: 13px;}
    .story-icons .ico {width: 56px; height: 56px;}
    .story-icons .ico img {width: 26px; height: 26px;}

    /* 맺음말 : 가운데 정렬, 워터마크 숨김 */
    .greeting-closing {padding: 56px 24px 8px;}
    .closing-msg {font-size: 17px;}
    .closing-sign {grid-template-columns: 1fr; justify-items: center; gap: 16px; margin-top: 28px;}
    .closing-mark {display: none;}
    .closing-signature {justify-self: center; width: 140px;}
    .closing-from {font-size: 15px;}

    /* 비전 */
    .vision-board {padding: 40px 20px; border-radius: 16px;}
    .vision-title {font-size: 23px;}
    .vision-desc {font-size: 15px;}
    .vision-diagram {margin: 8px auto 16px;}
    .vision-brands {grid-template-columns: 1fr; gap: 12px;}
    .brand-item {padding: 24px 20px;}
    .brand-title {font-size: 18px;}

    .vision-values {flex-direction: column; align-items: flex-start; gap: 14px; max-width: 280px; margin: 32px auto 0;}
    .vision-values .ico {width: 52px; height: 52px;}
	
	/* 연혁 */
	.history-wrap {
		--rail-x: 6px;
		--rail-gap: 22px;
		--text-indent: 0px;
		--gap: 18px;
		--item-fs: 15px;
		--year-fs: 26px;
		--sticky-top: 0px;      /* 모바일 고정 헤더가 있으면 그 높이로 */
		flex-direction: column;
		align-items: stretch;
	}
	.history-wrap::before { display: none; }
	.history-wrap .year {
		z-index: 2;
		flex: none;
		text-align: left;
		line-height: 1.3;
		padding: 12px 0;
		margin-bottom: 12px;
		background: var(--c-bg);
	}
	
	/* 찾아오시는길 */
	.location-bg {padding-top: 24px; padding-left: 16px; padding-right: 16px;}
	.location-wrap {gap: 32px;}
	.map-wrap {height: 300px; border-radius: 14px;}
 
	.info-row {padding: 20px 0 24px;}
	.info-body {padding-left: 0;}
 
	.info-address .info-body {margin-top: 14px;}
	.info-title {font-size: 22px;}
	.info-addr {font-size: 15px;}
	.btn-copy {position: static; margin-top: 14px;}
 
	.contact-list {grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 16px;}
	.contact-list li {flex-direction: row; align-items: baseline; gap: 12px;}
	.contact-list li + li {padding-left: 0; border-left: 0;}
	.contact-list strong {flex-shrink: 0; width: 58px;}
 
	.traffic-list {grid-template-columns: minmax(0, 1fr); margin-top: 16px; padding-left: 0;}
	.traffic-list li + li {margin-top: 16px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--loc-line);}
	.traffic-tit + .traffic-txt {margin-top: 10px;}
 
	.location-btns {grid-template-columns: minmax(0, 1fr); gap: 10px;}
	.btn-map {height: 52px; padding-left: 24px;}
}


/* 모바일: 2열 × 3줄 = 6개 */
@media (max-width: 640px) {
    .client-wrap {--cols: 2; --load-rows: 3; column-gap:10px; row-gap:16px; padding:0;}
}

@media (max-width: 480px) {
	.map-wrap {height: 260px;}
	.info-head {gap: 14px;}
	.info-head > div {width: 40px; height: 40px;}
	.info-head i {width: 24px; height: 24px;}
	.info-title {font-size: 20px;}
	.btn-map {font-size: 14px;}
}

/* 동작 줄이기 설정 사용자 */
@media (prefers-reduced-motion: reduce) {
	/* 회사개요 */
    .business-item, .tab-btn, .tab-btn::before {transition: none;}
    .tab-content.active {animation: none;}
	
	/* 주요고객사 */
	.client-item {animation:none;}
    .client-item::after {transition:none;}
	
	/* 연혁 */
	 .history-wrap *, .history-wrap *::before { transition: none !important; }
}