:root{
	--main-blue:#00468c;
	--sub-blue:#0056b3;
	--light-bg:#f8f9fa;
	--text-dark:#333;
	--text-gray:#666;
	--nav-active:#7fd3ff;
	--blue: #1FA7FF;

	--container-pad: clamp(16px, 4vw, 70px);
	--section-pad-y: clamp(56px, 8vw, 110px);
	--radius: 14px;
	--shadow: 0 10px 22px rgba(0,0,0,0.10);

	--header-h: 80px;
	--header-h-md: 72px;
	--header-h-sm: 60px;
}

*{ 
	margin:0; 
	padding:0; 
	box-sizing:border-box; 
	font-family: 'Noto Sans KR', sans-serif;
}
body{
	line-height:1.6;
	color:var(--text-dark);
	overflow-x:hidden;
	background:#fff;
}
li{ list-style:none; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; display:block; }

/* ================= HEADER ================= */
header {
	width: 100%;
  height: var(--header-h);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 var(--container-pad);
  position: fixed;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 1000;
  transition: all 0.4s ease;
  gap: 26px;
  /* 기본 상태 (배경 투명, 글자 흰색) */
  --header-fg: #ffffff;
  --header-hover: var(--nav-active);
}

header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* 스크롤 상태 (배경 흰색, 글자 검은색) */
  --header-fg: #111111; 
  --header-hover: var(--main-blue);
}
.logo { 
	display:flex; 
	align-items:center; 
	color: var(--header-fg); 
	min-width: 180px; 
}
.logo img { 
	height: clamp(56px, 8vw, 84px); 
	width:auto; 
	display:block; 
}
nav { margin-left:auto; }
nav ul { 
	display:flex; 
	gap:22px; 
	align-items:center; 
}
nav ul li a {
  font-weight: 500;
  color: var(--header-fg); /* 변수와 연동 */
  position: relative;
  padding: 8px 2px;
  transition: 0.25s;
}
nav ul li a:hover {color: var(--blue);} /*nav ul li a.active{ color:var(--header-hover); } */
    
.order-btn{
	background:rgba(255,255,255,0.2); color:#fff; padding:10px 18px;
	border-radius:10px; border:1px solid rgba(255,255,255,0.3);
	display:inline-flex; align-items:center; gap:8px; margin-left:6px;
}

header.scrolled .order-btn {
  background: var(--main-blue);
  border: 1px solid var(--main-blue);
  color: #fff; /* 버튼 글자는 가독성을 위해 흰색 유지 */
}

.mobile-menu-btn {
	display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--header-fg); /* 변수와 연동 */
  cursor: pointer;
}
header.scrolled .mobile-menu-btn{ color:var(--main-blue); }
.header-brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.header-brand img{
  height:50px;
  width:auto;
  display:block;
}

/* A subtle "pill" behind text to keep readability even if header background changes */


.company-name {
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--header-fg); /* 변수와 연동 */
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition: color 0.4s ease;
}
.mobile-nav{
	position:fixed;
	top: var(--header-h-sm, 60px);
	left:-82vw;
	width:min(82vw, 320px);
	height:100vh;
	background:#fff;
	box-shadow:2px 0 10px rgba(0,0,0,0.1);
	transition:left 0.3s ease;
	z-index:2000;
	padding:80px 24px 24px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}
.mobile-nav.active{ left:0; }
.overlay{
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100vh;
	background:rgba(0,0,0,0.5);
	display:none;
	z-index:1500;
}
.overlay.active{ display:block; }

/* ================= HERO (메인) ================= */
.hero {
	position:relative; 
	height:100vh; 
	min-height: 640px;
	display:flex; 
	flex-direction:column; 
	justify-content:center; 
	align-items:center;
	text-align:center; 
	color:#fff; 
	padding: 0 var(--container-pad);
}
.hero-bg { 
	position:absolute; 
	inset:0; 
	background:#fff; 
	z-index:-1; 
}
.hero-bg::after {
	content:''; position:absolute; inset:0;
	background: linear-gradient(rgba(0,70,140,0.1), rgba(0,0,0,0.1));
}

.hero-content{ z-index:1; }
.hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 3.5rem);
  margin-bottom: 24px; 
  line-height: 1.4;    
  font-weight: 700;
  letter-spacing: -0.6px;
  text-wrap: balance;
}

.hero p {
  font-size: clamp(1.0rem, 1.8vw, 1.3rem);
  margin-bottom: 34px;
  line-height: 1.7;    
  font-weight: 300;
  letter-spacing: -0.4px;
  text-wrap: balance;
}
.btn-more { 
	border:2px solid #fff; 
	padding:14px 34px; 
	color:#fff; 
	border-radius:12px; 
	transition:0.3s; 
	display:inline-block; 
}
.btn-more:hover { background:#fff; color:var(--main-blue); }

/* ================= 회사소개 ================= */
.hero-container {
            width: 100%; /* 기본 100% 설정 */
            background-color: #f5f5f5; /* 배경색 추가 */
            padding: 40px 0; /* 좌우 패딩 제거, 위아래 여백 유지 */
            display: flex;
            justify-content: center;
        }

        .hero-image-wrapper {
            /* 실제 이미지가 담기는 컨테이너는 중앙 정렬 및 너비 제한 */
            width: 100%;
            max-width: 1200px;
            padding: 0 20px;
            box-sizing: border-box;
        }

        .hero-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* 다시 cover로 설정하여 영역을 채우되 */
    /* 핵심: top을 주면 이미지의 윗부분부터 맞춰지므로, 
       반대로 'center bottom'을 주면 윗부분이 잘려 나갑니다. */
    object-position: center 70%; 
}
.hero-image {
    width: 100%;
    height: 520px; /* 높이를 400px에서 320px로 줄여 윗부분이 덜 보이게 함 */
    overflow: hidden;
    border-top-right-radius: 100px;
    background-color: #f5f5f5;
}
.company-profile { 
	width: 100%; 
	background-color: #f5f5f5; 
	padding: 80px 20px; 
	text-align: center; 
}
.profile-title { 
	color: #0056b3; 
	font-size: 3.5rem; 
	font-weight: bold;
	margin-bottom: 30px;
}
.profile-description { 
	max-width: 1000px; 
	margin: 0 auto 40px; 
	font-size: 1.15rem; 
	line-height: 1.8; 
	word-break: keep-all; 
	color:#333; 
}
.circle-container { 
	display: flex; 
	justify-content: center; 
	gap: 20px; 
	flex-wrap: wrap; 
}
.circle {
	width: 160px; 
	height: 160px; 
	border-radius: 50%; 
	background:#fff;
	display: flex; 
	justify-content: center; 
	align-items: center; 
	font-weight: bold;
	box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
	transition: 0.3s; 
	padding: 10px; 
	text-align:center;
}
.circle.primary {
	background-color: #0056b3; 
	color: #fff; 
}
.circle:hover { 
	transform: translateY(-10px); 
}

/* ================= [위수탁 섹션 전용 스타일] ================= */
.vst-wrapper { 
	background: #fff; 
	color: #333; 
}
.vst-wrap { 
	max-width: 1100px; 
	margin: 0 auto; 
	padding: 0 var(--container-pad); 
}
    
.vst-hero {
	position: relative; 
	padding-top: 134px; 
	padding-bottom: clamp(56px, 7vw, 96px);
	background: url("/images/main2.png") center/cover no-repeat; 
	color:#fff; 
	text-align:center;
}
.vst-hero::after { 
	content:''; 
	position:absolute; 
	inset:0; 
	background: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.45)); 
}
.vst-hero .vst-wrap{ 
	position:relative; 
	z-index:1; 
}
.vst-kicker {
	display:inline-flex; 
	gap:10px; 
	padding:8px 14px; 
	border-radius:999px;
	border:1px solid rgba(255,255,255,0.22);
	background:rgba(255,255,255,0.10);
	font-size:.95rem;
	margin-bottom:16px; 
	align-items:center;
}
.vst-hero h1 { 
	font-size:clamp(2rem,4vw,3.25rem); 
	font-weight:800; 
	margin-bottom:14px; 
}
.vst-hero p { 
	max-width:920px; 
	margin:0 auto 26px; 
	font-size:clamp(1rem,1.6vw,1.22rem); 
	opacity:.86; 
}
.hero-actions {
	display:flex;
	justify-content:center;
	gap:12px;
	flex-wrap:wrap;
}

.btn-primary{
	background: #ffffff;
	color: #003d80;
	border: 2px solid #ffffff;
	padding: 14px 22px;
	border-radius: 14px;
	font-weight: 800;
	font-size: 1.02rem;
	display:inline-flex;
	align-items:center;
	gap:10px;
	box-shadow: 0 10px 26px rgba(0,0,0,0.35);
	transition: all 0.25s ease;
}
.btn-primary:hover{
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0,0,0,0.45);
	filter: brightness(1.05);
}
.btn-ghost{
	background: rgba(0,0,0,0.35);
	color: #ffffff;
	border: 1px solid rgba(255,255,255,0.6);
	padding: 14px 22px;
	border-radius: 14px;
	font-weight: 700;
	font-size: 0.98rem;
	display:inline-flex;
	align-items:center;
	gap:10px;
	backdrop-filter: blur(2px);
	transition: all 0.25s ease;
}
.btn-ghost:hover{
	background: rgba(0,0,0,0.5);
	transform: translateY(-2px);
}

.vst-section { padding:var(--section-pad-y) 0; }
.vst-section.alt { background:var(--light-bg); }
.vst-section-head { 
	display:flex; 
	justify-content:space-between; 
	gap:18px; 
	margin-bottom:28px; 
}
.vst-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 제목과 설명의 바닥 라인을 맞춤 */
  gap: 40px;             /* 제목과 설명 사이의 여백 */
  margin-bottom: 28px;
}

/* h2를 감싸는 div: flex-grow를 사용해 가로를 더 길게 확장 */
.vst-section-head > div:first-child {
  flex: 2;               /* 설명글 영역보다 2배 더 넓은 비중 차지 */
}

.vst-section-head h2 {
  font-size: clamp(1.55rem, 2.4vw, 2.25rem);
  font-weight: 800;
  color: var(--main-blue);
  line-height: 1.4;      /* 줄간격을 넓혀 가독성 향상 */
  white-space: nowrap;   /* 제목이 가로로 길게 한 줄로 나오도록 설정 */
}

/* 오른쪽 설명문(.sub) 영역 */
.vst-section-head .sub {
  flex: 1;               /* 제목 영역보다 적은 비중 차지 */
  max-width: 600px;      /* 최대 너비 제한 확장 */
  color: var(--text-gray);
  line-height: 1.6;      /* 설명글 줄간격 조정 */
  text-align: right;     /* 오른쪽 정렬로 균형 유지 */
}

.vst-grid-3 { 
	display:grid; 
	grid-template-columns:repeat(3,1fr); 
	gap:16px; 
}
.vst-grid-2 { 
	display:grid; 
	grid-template-columns:repeat(2,1fr); 
	gap:16px; 
}
.vst-grid-3 .vst-card, 
.vst-grid-2 .vst-card {
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.vst-grid-3 .vst-card:hover, 
.vst-grid-2 .vst-card:hover {
  transform: translateY(-7px); /* 위로 이동 */
  border-color: var(--main-blue);
  box-shadow: 0 12px 24px rgba(0, 70, 140, 0.12);
  background: #fff;
}

/* 2. vst-steps 내의 vst-step 오버 효과 */
.vst-step {
  transition: all 0.3s ease;
  border: 1px solid transparent; /* 호버 시 테두리 떨림 방지 */
}

.vst-step:hover {
  transform: translateY(-7px);
  background: #fff;
  border-color: var(--nav-active); /* 스텝은 조금 더 밝은 하늘색 테두리 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* 3. 공통: 호버 시 아이콘 색상 변화 */
.vst-card:hover h3 i,
.vst-step:hover .vst-badge i {
  color: var(--sub-blue);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/* 4. 공통: 호버 시 제목 색상 변화 */
.vst-card:hover h3,
.vst-step:hover h4 {
  color: var(--main-blue);
}

.vst-card { 
	background:#fff; 
	border-radius:var(--radius); 
	box-shadow:var(--shadow); 
	padding:22px 20px; 
	border:1px solid rgba(0,0,0,0.06); 
}
.vst-card h3 { 
	display:flex; 
	gap:10px; 
	font-size:1.15rem; 
	font-weight:800;
	margin-bottom:10px; 
	color:var(--main-blue); 
	align-items:center; 
}
.vst-card p { color:var(--text-gray); }

.vst-definition { 
	display:grid; 
	grid-template-columns:1.05fr .95fr; 
	gap:16px; 
}
.vst-note { 
	background:rgba(0,70,140,0.06); 
	border:1px solid rgba(0,70,140,0.12); 
	border-radius:var(--radius); 
	padding:20px; 
}
.vst-note ul { margin-top:10px; }
.vst-note li { 
	margin-bottom:8px; 
	position:relative; 
	padding-left:15px; 
}
.vst-note li::before { 
	content:'•'; 
	position:absolute; 
	left:0; 
	color:var(--main-blue); 
}

.vst-security-list { 
	display:grid; 
	gap:10px; 
	margin-top:14px;
}
.vst-sec-item { 
	display:flex; 
	gap:10px; 
	background:rgba(0,70,140,0.06); 
	border:1px solid rgba(0,70,140,0.12); 
	border-radius:14px; 
	padding:12px; 
}
.vst-sec-item i { color:var(--main-blue); margin-top:4px; }
.vst-sec-item b { display:block; color:var(--main-blue); margin-bottom:2px; }

.vst-sec-item:hover {
  background: #ffffff !important;           /* 배경을 흰색으로 반전 */
  border-color: var(--main-blue);           /* 테두리를 메인 블루로 강조 */
  box-shadow: 0 4px 12px rgba(0, 70, 140, 0.12); /* 가벼운 그림자 추가 */
  transform: translateX(5px);               /* 오른쪽으로 5px 살짝 이동 (포인트!) */
}

/* 3. 마우스 오버 시 내부 아이콘 및 텍스트 강조 */
.vst-sec-item:hover i {
  color: var(--sub-blue);                   /* 아이콘 색상 변경 */
  transform: scale(1.1);                    /* 아이콘 크기 살짝 확대 */
  transition: all 0.2s ease;
}

.vst-sec-item:hover b {
  color: var(--sub-blue);                   /* 제목 텍스트 색상 강조 */
}

.vst-steps { 
	display:grid; 
	grid-template-columns:repeat(5,1fr); 
	gap:12px; 
}
.vst-step { 
	background:#fff; 
	border-radius:var(--radius); 
	box-shadow:var(--shadow); 
	padding:18px 16px; 
}
.vst-badge { 
	display:inline-flex; 
	align-items:center; 
	gap:8px; 
	padding:6px 10px; 
	border-radius:999px; 
	background:rgba(0,70,140,0.10); 
	color:var(--main-blue); 
	font-weight:800; 
	font-size:0.86rem; 
	margin-bottom:10px; 
}

/* Final Visual */
.vst-final-visual{
	height: 55vh; 
	min-height: 360px; 
	max-width: 1200px; 
	margin: 40px auto;
	width: calc(100% - (var(--container-pad) * 2));
	border-radius: 18px; 
	overflow: hidden;
	background: #00468c url("/images/section-bg.jpg") center/cover no-repeat; 
	position: relative;
	display:flex; 
	align-items:center; 
	justify-content:center; 
	padding: 22px;
}
.vst-final-visual::after { 
	content:""; 
	position:absolute; 
	inset:0; 
	background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.55)); 
}
.vst-final-overlay { 
	position: relative; 
	z-index: 1; 
	width: min(920px, 100%); 
	text-align: center; 
	color: #fff; 
}
.vst-final-overlay h2 { 
	font-size: clamp(1.35rem, 2.6vw, 2.1rem); 
	font-weight: 900; 
	margin-bottom: 10px; 
	text-shadow: 0 10px 24px rgba(0,0,0,0.45); 
}
.vst-final-overlay p { 
	font-size: clamp(0.98rem, 1.35vw, 1.08rem); 
	opacity: 0.92; 
	margin-bottom: 18px; 
}

.vst-call-btn {
	display:inline-flex; 
	align-items:center; 
	gap:10px; 
	padding: 12px 16px; 
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.28); 
	background: rgba(255,255,255,0.14);
	backdrop-filter: blur(4px); 
	color:#fff; 
	font-weight: 800; 
	transition: 0.2s;
}
.vst-call-btn:hover { 
	transform: translateY(-2px); 
	background: rgba(255,255,255,0.20); 
}
.vst-call-btn .meta { 
	display:flex; 
	flex-direction:column; 
	align-items:flex-start; 
	line-height: 1.15; 
}
.vst-call-btn .meta small { font-size: 0.82rem; opacity: 0.9; }
.vst-call-btn .meta strong { font-size: 1.03rem; }

/* 반응형 공통 */
    
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.hero-content{ animation: none; opacity:1; transform:none; }
}

@media (max-width: 900px){
	header{ height: var(--header-h-md); gap: 16px; }
	.logo{ min-width: 150px; }
}

@media (max-width: 768px){
	header{ height: var(--header-h-sm); }
	nav, .order-btn{ display:none; }
	.vst-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.vst-section-head h2 {
		white-space: normal; /* 한 줄 고정 해제 */
		word-break: keep-all;
	}

	.vst-section-head .sub {
		text-align: left; /* 왼쪽 정렬로 변경 */
		font-size: 0.95rem;
	}

	/* 2. 3단, 2단 그리드를 모바일에서 1단(세로)으로 변경 */
	.vst-grid-3, .vst-grid-2 {
		grid-template-columns: 1fr !important; 
		gap: 12px;
	}

	/* 3. 위수탁 정의 섹션(이미지/텍스트 혼합) 대응 */
	.vst-definition {
		grid-template-columns: 1fr;
	}

	/* 4. 위수탁 절차(STEP) 영역 대응 */
	.vst-steps {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	/* 5. 하단 버튼 그룹 간격 조정 */
	.vst-btn-group {
		flex-direction: column;
		width: 100%;
	}
			
	.vst-call-btn {
		width: 100%;
		justify-content: center;
	}
	.mobile-menu-btn { 
		display:block;
		margin-left: auto; 
	}
	.hero{ min-height: 600px; }
}

@media (max-width: 420px){
	.btn-more{ padding: 12px 22px; border-radius: 12px; }
	.mobile-nav{ padding: 72px 18px 18px; }
}

/* ================= 관절지킴이 ================= */
.sub-header {
      width: 100%; height: var(--header-h);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 var(--container-pad);
      position: fixed; top: 0; left: 0;
      background: #ffffff; z-index: 1000;
      border-bottom: 1px solid #eeeeee;
    }

    .sub-header .logo-area { flex: 0 0 auto; display: flex; align-items: center; }
    .sub-header .logo-area img { height: 50px; width: auto; }
    .sub-header .company-name { font-weight: 600; font-size: 19px; margin-left: 12px; }

    .sub-header nav { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
    .sub-header nav ul { display: flex; gap: 22px; align-items: center; margin-right: 20px; }
    .sub-header nav ul li a {
  font-family: 'Noto Sans KR', sans-serif; /* 명시적 지정 */
  font-weight: 500;    /* 메인 페이지 메뉴 두께와 통일 */
  font-size: 16px;     /* 필요 시 크기 고정 */
  color: #333333;      /* 메인 페이지 scrolled 상태의 색상과 통일 */
  letter-spacing: -0.2px; /* 글자 간격 조정 */
  transition: 0.25s;
}
    .sub-header nav ul li a:hover, .sub-header nav ul li a.active { color: var(--blue); }

    .sub-header .cta-area { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
    .sub-header .order-btn {
      background: var(--main-blue); color: #fff; padding: 10px 18px;
      border-radius: 10px; display: inline-flex; align-items: center; gap: 8px; font-weight: 500;
    }

    /* 햄버거 버튼 클래스 격리 */
    .sub-header .msm-mobile-open-btn {
      display: none; background: none; border: none;
      font-size: 1.6rem; color: color: var(--blue); cursor: pointer;
    }

    /* --- 모바일 메뉴 (MSM 접두어 추가로 충돌 방지) --- */
    .msm-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.5);
      display: none; z-index: 1500; opacity: 0; transition: opacity 0.3s;
    }
    .msm-overlay.is-active { display: block; opacity: 1; }

    .msm-mobile-nav {
      position: fixed; top: 0; left: -85vw;
      width: min(82vw, 320px); height: 100vh;
      background: #fff; z-index: 2000;
      padding: 40px 24px; transition: left 0.3s ease-out;
      box-shadow: 5px 0 15px rgba(0,0,0,0.1);
    }
    .msm-mobile-nav.is-active { left: 0; }
    .msm-mobile-nav .msm-close-btn { float: right; font-size: 1.8rem; background: none; border: none; cursor: pointer; color: var(--text-dark); }
    .msm-mobile-nav ul { margin-top: 60px; }
    .msm-mobile-nav li a { display: block; padding: 18px 0; border-bottom: 1px solid #eee; font-size: 1.15rem; font-weight: 500; color: var(--text-dark); }

    /* --- Hero 섹션 --- */
    .joint-hero { margin-top: var(--header-h); width: 100%; height: 630px; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #000; }
    .video-bg-blur { position: absolute; top: 50%; left: 50%; width: 115%; height: 115%; object-fit: cover; transform: translate(-50%, -50%); filter: blur(30px) brightness(0.4); z-index: 1; }
    .brand-video-main { position: relative; z-index: 2; height: 100%; width: auto; max-width: 100%; box-shadow: 0 0 60px rgba(0,0,0,0.7); }

    /* --- 상세 이미지 영역 --- */
    .detail-images { width: 100%; background: #fff; padding: 60px 0 140px; }
    .img-wrap { max-width: 1000px; margin: 0 auto; }
    .img-wrap img { width: 100%; display: block; }

    /* --- 하단 고정 상담 바 --- */
    .fixed-footer {
      position: fixed; bottom: 0; left: 0; width: 100%;
      background: rgba(255,255,255,0.95); backdrop-filter: blur(10px);
      border-top: 1px solid #eee; padding: 20px;
      display: flex; justify-content: center; align-items: center; gap: 30px;
      z-index: 1100; box-shadow: 0 -5px 20px rgba(0,0,0,0.08);
    }
    .btn-contact {
      background: #e11d48; color: #fff; padding: 14px 40px;
      border-radius: 12px; font-weight: 800; transition: 0.3s;
    }
    .btn-contact:hover { background: #be123c; transform: translateY(-3px); }

    /* 반응형: 1024px 이하 */
    @media (max-width: 1024px) {
      .sub-header nav, .sub-header .order-btn { display: none; }
      .sub-header .msm-mobile-open-btn { display: block; }
      .sub-header { justify-content: space-between; }
      .
    }
/* 푸터 기본 스타일 (이미지 캡처 스타일 반영) */
.site-footer {
  background: #050d1a;
  color: rgba(255, 255, 255, 0.7);
  padding: 40px 0;
  font-size: 0.82rem;
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: left; /* 전체 왼쪽 정렬 */
}

.footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 10px;
  margin-bottom: 4px;
	color: #fff;
}

.footer-logo {
  font-weight: 700;
  color: #fff;
}

.divider {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.7rem;
	color: #fff;
}

.copyright {
  margin-top: 15px;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.78rem;
	color: #fff;
}

/* ================= 반응형 처리 ================= */

/* 데스크탑 (769px 이상): 주소와 전화/팩스가 한 줄에 나옴 */
@media (min-width: 769px) {
  .contact-group {
    display: flex;
    flex-wrap: nowrap;
  }
}

/* 모바일 (768px 이하): 요청하신 3줄 레이아웃 */
@media (max-width: 768px) {
  .footer-row {
    margin-bottom: 10px;
  }

  /* 1. 첫 줄(상호/대표/사업자)이 폭이 좁으면 자연스럽게 정렬 */
  .footer-row:first-child {
    gap: 4px 10px;
  }

  /* 2. 주소와 전화/팩스 분리 (3줄 만들기) */
  .contact-group {
    display: block; /* 가로 배열 해제 */
  }

  /* 주소(2행)를 단독 줄로 */
  .contact-group .address {
    display: block;
    margin-bottom: 10px;
  }

  /* 주소 바로 뒤의 구분선(|)은 모바일에서 숨김 */
  .contact-group .address + .divider {
    display: none;
  }

  /* 3. 전화/팩스(3행)는 모바일에서도 한 줄 유지 */
  .contact-group .info-item:not(.address) {
    display: inline-block;
  }

  .info-item {
    word-break: keep-all;
  }
}