/* ==========================================================================
   main_renewal.css
   index_test.php 메인 개편(개선안 구성) 전용 스타일

   - index_test.php 안에 있던 <style> 블록을 모두 이 파일로 옮겼습니다.
   - 신규 규칙은 .hg_sec 하위로 한정해 main.css / sub.css 와 충돌하지 않게 했습니다.
   - 기존 홈페이지 톤: 네이비(#10356c) 단일 포인트, 흰 배경 + 연한 네이비 틴트,
     radius 10px 카드, Noto Sans KR 상속.

   목차
   0. 기존 index_test.php 인라인 스타일 이관
   1. 공통
   2. 상단 비주얼 + 상담 CTA / 핵심 수치
   3. 업무분야 패널
   4. 성공사례
   5. 법률전문가
   6. 자격 증명 (대한변협 등록)
   7. 미디어
   8. 오시는 길 + 최종 CTA
   9. 반응형
   ========================================================================== */

/* 0. 기존 index_test.php 인라인 스타일 이관 ------------------------------ */
.lawyer_txt01 {
	font-size: 34px;
}

.con04 {
	padding: 0 0 90px 0;
}

/* con03(성공사례 슬라이더, 주석 처리 중) 복구 시 필요 */
.con03 .swiper {
	width: 100%;
	height: 100%;
}

.con03 .swiper-slide {
	text-align: center;
	font-size: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.con03 .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 1. 공통 ------------------------------------------------------------------ */
.section.hg_sec {
	--hg-navy: #10356c;
	--hg-navy-deep: #0b2a58;
	--hg-line: rgba(16, 53, 108, .14);
	--hg-tint: rgba(16, 53, 108, .05);
	height: auto;
	background: #fff;
	color: #222;
}

.hg_sec,
.hg_sec * {
	box-sizing: border-box;
}

.hg_sec * {
	font-family: inherit;
}

/* :where() 는 우선순위가 0 이라 아래의 단일 클래스 규칙(margin 등)을 덮어쓰지 않습니다 */
.hg_sec :where(a) {
	color: inherit;
	text-decoration: none;
}

.hg_sec :where(ul) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hg_sec :where(h1, h2, h3, h4, p) {
	margin: 0;
}

/* Font Awesome: 섹션 reset 이 아이콘 폰트를 덮어쓰지 않도록 고정 */
.hg_sec .fa-solid,
.hg_sec .fa-solid::before {
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900 !important;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}

.hg_sec a:focus-visible {
	outline: 3px solid #10356c;
	outline-offset: 4px;
}

.hg_sec .hg_hero a:focus-visible,
.hg_sec .hg_dark a:focus-visible {
	outline-color: #fff;
}

.hg_wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.hg_head {
	text-align: center;
}

.hg_sec .hg_eyebrow {
	display: block;
	margin-bottom: 10px;
	font-size: 15px;
	font-weight: 500;
	color: var(--hg-navy);
}

.hg_sec .hg_title {
	font-size: 34px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -1px;
	color: var(--hg-navy);
	word-break: keep-all;
}

.hg_sec .hg_desc {
	margin-top: 14px;
	font-size: 17px;
	color: #666;
	word-break: keep-all;
}

.hg_center {
	text-align: center;
}

.hg_sec .hg_btn {
	display: inline-block;
	margin-top: 40px;
	padding: 15px 38px;
	border-radius: 50px;
	background: var(--hg-navy);
	color: #fff;
	font-size: 17px;
	font-weight: 500;
}

.hg_sec .hg_btn i {
	margin-left: 8px;
}

/* 2. 상단 비주얼 + 상담 CTA / 핵심 수치 ---------------------------------- */
.hg_hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 64px 0 100px;
	color: #fff;
	background: var(--hg-navy);
}

.hg_hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: url("../images/main/main_bg.png");
	background-size: cover;
	background-position: center;
}

.hg_hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgba(16, 53, 108, .64), rgba(16, 53, 108, .24) 55%, rgba(16, 53, 108, .04));
	pointer-events: none;
}

.hg_hero_inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px 48px;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 30px;
}

.hg_hero_copy {
	flex: 1 1 520px;
	min-width: 0;
	max-width: 760px;
}

.hg_sec .hg_hero_copy,
.hg_sec .hg_hero_copy * {
	text-align: left !important;
}

.hg_sec .hg_hero_kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 18px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 3px;
	color: #fff;
}

.hg_hero_kicker::before {
	content: "";
	width: 38px;
	height: 1px;
	background: rgba(255, 255, 255, .7);
}

.hg_sec .hg_hero_title {
	font-size: clamp(36px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -1.8px;
	color: #fff;
	word-break: keep-all;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .16);
}

.hg_hero_title strong {
	font-weight: 800;
}

.hg_sec .hg_hero_sub {
	margin-top: 16px;
	font-size: 16px;
	line-height: 1.8;
	color: rgba(255, 255, 255, .85);
	word-break: keep-all;
}

.hg_hero_points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-top: 22px;
	font-size: 14px;
	color: rgba(255, 255, 255, .92);
}

.hg_hero_points li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hg_hero_points i {
	font-size: 12px;
	color: #fff;
}

/* 핵심 수치: 히어로와 겹치는 떠 있는 카드 */
.hg_stats {
	position: relative;
	z-index: 2;
	margin-top: -52px;
}

.hg_stats_box {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	background: #fff;
	border: 1px solid var(--hg-line);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(16, 53, 108, .12);
}

.hg_stat {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 26px 16px;
}

.hg_stat+.hg_stat {
	border-left: 1px solid var(--hg-line);
}

.hg_stat_label {
	font-size: 18px;
	font-weight: 700;
	color: var(--hg-navy);
}

.hg_stat_note {
	margin-top: 8px;
	font-size: 13px;
	color: #666;
	word-break: keep-all;
}

.hg_stat_num {
	margin-top: 4px;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--hg-navy);
}

.hg_stat_num .numbox {
	font: inherit;
}

.hg_stat_num .hg_unit {
	margin-left: 2px;
	font-size: 20px;
}

/* 3. 업무분야 패널 --------------------------------------------------------- */
.hg_field {
	padding: 72px 0 70px;
}

/* 업무분야·법률전문가: 히어로와 동일하게 1440px / 좌우 30px */
.hg_field .hg_wrap,
.hg_lawyer .hg_wrap,
.hg_media .hg_wrap,
.hg_office .hg_wrap {
	max-width: 1440px;
	padding: 0 30px;
}

.hg_panels {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 44px;
	text-align: left;
}

.hg_panel {
	--pc-bg: var(--hg-navy);
	--pc-fg: #fff;
	--pc-main: #f7f9fd;
	--pc-line: rgba(16, 53, 108, .3);
	--pc-bar: rgba(16, 53, 108, .07);
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	overflow: hidden;
	border: 1px solid var(--pc-line);
	border-radius: 12px;
}

.hg_panel_civ {
	--pc-bg: #e8eef8;
	--pc-fg: #222;
	--pc-main: #f6f9fd;
	--pc-line: #c5d3ea;
	--pc-bar: rgba(16, 53, 108, .07);
}

.hg_panel_side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 32px 28px;
	background: var(--pc-bg);
	color: var(--pc-fg);
}

.hg_panel_ico {
	font-size: 34px;
	color: #fff;
}

.hg_panel_civ .hg_panel_ico {
	color: var(--hg-navy);
}

.hg_sec .hg_panel_badge {
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .35);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.4;
	color: #fff;
	word-break: keep-all;
}

.hg_panel_civ .hg_panel_badge {
	background: #fff;
	border-color: var(--pc-line);
	color: var(--hg-navy);
}

.hg_sec .hg_panel_name {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.5px;
	color: inherit;
}

.hg_panel_civ .hg_panel_name {
	color: var(--hg-navy);
}

.hg_sec .hg_panel_desc {
	font-size: 15px;
	line-height: 1.75;
	word-break: keep-all;
}

.hg_sec .hg_panel_btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 11px 20px;
	border-radius: 999px;
	background: var(--hg-navy);
	border: 1px solid rgba(16, 53, 108, .25);
	font-size: 15px;
	font-weight: 500;
	color: #fff
}

.hg_panel_btn i {
	font-size: 13px;
}

.hg_panel_main {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px 28px 22px;
	background: var(--pc-main);
}

.hg_cols {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 12px 20px;
}

.hg_sec .hg_col_name {
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--hg-navy);
	word-break: keep-all;
}

.hg_sec .hg_col a {
	position: relative;
	display: block;
	padding: 5px 0 5px 12px;
	font-size: 14.5px;
	line-height: 1.5;
	color: #444;
	word-break: keep-all;
}

.hg_col a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.1em;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--hg-navy);
}

.hg_sec .hg_col a:hover {
	color: var(--hg-navy);
	text-decoration: underline;
}

.hg_sec .hg_panel_all {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: auto;
	padding: 13px 18px;
	border-radius: 8px;
	background: var(--pc-bar);
	font-size: 15px;
	font-weight: 500;
	color: var(--hg-navy);
}

.hg_panel_all b {
	font-weight: 700;
}

.hg_panel_all i {
	font-size: 13px;
	transition: transform .25s;
}

.hg_panel_all:hover i {
	transform: translateX(4px);
}

/* 그 외 분야 */
.hg_more_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 20px;
	text-align: left;
}

.hg_more_card {
	display: flex;
	flex-direction: column;
	padding: 22px 24px 14px;
	border: 1px solid var(--hg-line);
	border-radius: 10px;
	background: #fff;
}

.hg_sec .hg_more_name {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 36px;
	font-size: 20px;
	font-weight: 700;
	color: var(--hg-navy);
}

.hg_more_name i {
	font-size: 14px;
	color: #888;
}

.hg_sec .hg_more_desc {
	margin: 4px 0 10px;
	font-size: 14px;
	line-height: 1.6;
	color: #555;
	word-break: keep-all;
}

.hg_sec .hg_more_card li a {
	display: flex;
	align-items: center;
	min-height: 40px;
	border-top: 1px solid rgba(16, 53, 108, .08);
	font-size: 14.5px;
	color: #333;
}

.hg_sec .hg_more_card li a:hover {
	color: var(--hg-navy);
	text-decoration: underline;
}

/* 사건 이름으로 바로 찾기 */
.hg_chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
	margin-top: 20px;
	padding: 20px 24px;
	border-radius: 10px;
	background: var(--hg-tint);
	text-align: left;
}

.hg_chips_label {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
	font-size: 16px;
	font-weight: 700;
	color: var(--hg-navy);
}

.hg_chips_list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	flex: 1 1 520px;
}

.hg_sec .hg_chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--hg-line);
	border-radius: 999px;
	background: #fff;
	font-size: 14.5px;
	color: #222;
}

.hg_sec .hg_chip:hover {
	background: var(--hg-navy);
	border-color: var(--hg-navy);
	color: #fff;
}

/* 4. 성공사례 -------------------------------------------------------------- */
.hg_case {
	padding: 80px 0 70px;
	background: var(--hg-tint);
}

.hg_case_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 44px;
	text-align: left;
}

.hg_case_item {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hg-line);
	border-radius: 10px;
	background: #fff;
	transition: transform .25s, box-shadow .25s;
}

.hg_case_item:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
}

.hg_case_thumb {
	position: relative;
	height: 160px;
	overflow: hidden;
	background: var(--hg-navy);
}

.hg_case_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hg_sec .hg_case_cate {
	position: absolute;
	left: 14px;
	bottom: 12px;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--hg-navy);
	font-size: 13px;
	font-weight: 500;
	color: #fff;
}

.hg_case_body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 20px 22px 18px;
}

.hg_sec .hg_case_result {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--hg-navy);
	word-break: keep-all;
}

.hg_sec .hg_case_tit {
	font-size: 17px;
	font-weight: 500;
	line-height: 1.5;
	color: #222;
	word-break: keep-all;
}

.hg_sec .hg_case_sum {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14.5px;
	line-height: 1.6;
	color: #555;
	word-break: keep-all;
}

.hg_case_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid rgba(16, 53, 108, .08);
	font-size: 14px;
	color: #666;
}

.hg_case_go {
	margin-left: auto;
	font-weight: 500;
	color: var(--hg-navy);
}

.hg_case_go i {
	margin-left: 6px;
	font-size: 12px;
}

/* 5. 법률전문가 ------------------------------------------------------------ */
.section.hg_lawyer {
	padding: 80px 0 70px;
}

.hg_lawyer_grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 18px;
	margin-top: 44px;
	text-align: left;
}

.hg_lawyer_card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--hg-line);
	border-radius: 8px;
	background: #f3f3f3;
	transition: box-shadow .25s;
}

.hg_lawyer_card:hover {
	box-shadow: 0 10px 24px rgba(16, 53, 108, .14);
}

.hg_lawyer_more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	margin-top: 22px;
	padding: 18px 24px;
	border: 1px solid var(--hg-line);
	border-radius: 8px;
	text-align: left;
}

.hg_lawyer_more strong {
	font-size: 15px;
	font-weight: 700;
	color: var(--hg-navy);
}

.hg_lawyer_more ul {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
}

.hg_sec .hg_lawyer_more li a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 10px;
	border-radius: 6px;
	font-size: 15px;
	color: #333;
}

.hg_sec .hg_lawyer_more li a:hover {
	background: var(--hg-tint);
	color: var(--hg-navy);
}

.hg_lawyer_more small {
	margin-left: 4px;
	font-size: 12.5px;
	color: #777;
}

/* 6. 자격 증명 (대한변협 등록) ----------------------------------------------
   - 단색 네이비 배경 · 왼쪽 문구 / 세로 구분선 / 오른쪽 2×2 전문분야 그룹
   - 그룹: 짧은 상단 바 → 큰 제목 → (분야명) + 외곽선 이름 칩
   ------------------------------------------------------------------------- */
.section.hg_cred {
	padding: 80px 0;
	background: linear-gradient(180deg, #0a3068 0%, #082a5e 100%);
	color: #fff;
}

.hg_cred_inner {
	display: grid;
	grid-template-columns: minmax(0, 8fr) minmax(0, 15fr);
	gap: 0;
	align-items: stretch;
}

.hg_cred_copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 8px 40px 8px 0;
	text-align: left;
}

.hg_sec .hg_cred_kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 500;
	color: #fff;
}

.hg_cred_kicker::before {
	content: "";
	width: 32px;
	height: 2px;
	background: #fff;
}

.hg_sec .hg_cred_copy .hg_title {
	font-size: 40px;
	line-height: 1.3;
	letter-spacing: -1.6px;
	text-align: left;
	color: #fff;
}

.hg_sec .hg_cred_text {
	margin-top: 28px;
	font-size: 16px;
	line-height: 1.75;
	color: rgba(255, 255, 255, .88);
	word-break: keep-all;
}

.hg_cred_grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 20px;
	row-gap: 20px;
	align-content: center;
	min-width: 0;
}

/* 그룹: 윗선 없이, 은은한 카드 형태로 구분 */
.hg_cred_group {
	position: relative;
	min-width: 0;
	padding: 20px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 16px;
	background: rgba(255, 255, 255, .05);
	text-align: left;
	transition: background .25s, border-color .25s;
}

.hg_cred_group:hover {
	background: rgba(255, 255, 255, .08);
	border-color: rgba(169, 194, 238, .35);
}

.hg_sec .hg_cred_name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: -.5px;
	color: #fff;
	word-break: keep-all;
}

.hg_cred_row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}

.hg_cred_label {
	flex: 0 0 3em;
	font-size: 14px;
	font-weight: 500;
	color: #a9c2ee;
	white-space: nowrap;
}

.hg_cred_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hg_cred_chips li {
	padding: 6px 15px;
	border: 1px solid rgba(169, 194, 238, .4);
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.35;
	color: #fff;
	white-space: nowrap;
}

/* 6-1. 전문분야 등록증서 원본 (기존 swiper 마크업 유지) ------------------------ */
.section.hg_cert {
	padding: 96px 0 88px;
	background: #fff;
}

.hg_cert .con3_inner {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 30px;
}

.hg_cert .lawyer,
.hg_cert .lawyer_into_wrap,
.hg_cert .lawyer_wrap,
.hg_cert .lawyer_swiper_wrap {
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.hg_cert .lawyer_into_wrap {
	margin-top: 44px;
}

.hg_cert .main_lawyer_box2 {
	display: block;
	overflow: hidden;
	border: 1px solid var(--hg-line);
	border-radius: 8px;
	background: #fff;
	transition: box-shadow .25s, transform .25s;
}

.hg_cert .main_lawyer_box2:hover {
	box-shadow: 0 10px 24px rgba(16, 53, 108, .14);
	transform: translateY(-4px);
}

.hg_cert .main_lawyer_box2 img {
	display: block;
	width: 100%;
	height: auto;
}

/* 7. 미디어 ---------------------------------------------------------------- */
.section.hg_media {
	padding: 96px 0;
	background: #f5f7fb;
}

/* 8. 오시는 길 + 최종 CTA --------------------------------------------------- */
.section.hg_office {
	padding: 96px 0;
}

.hg_office_type {
	align-self: flex-start;
	padding: 4px 10px;
	border-radius: 4px;
	background: var(--hg-tint);
	font-size: 13px;
	font-weight: 600;
	color: var(--hg-navy);
}

/* 8-1. 사무소 지도 --------------------------------------------------------- */
.hg_omap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	margin-top: 48px;
	text-align: left;
}

.hg_omap_info {
	display: flex;
	flex-direction: column;
	padding: 16px 24px 16px 0;
	background: transparent;
}

.hg_omap_count {
	font-size: 40px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -1px;
	color: var(--hg-navy);
}

.hg_omap_count em {
	display: inline-block;
	margin: 0 2px;
	font-style: normal;
	font-size: 1.35em;
	color: #1d4ed8;
}

.hg_omap_sub {
	margin-top: 10px;
	font-size: 16px;
	line-height: 1.6;
	color: #666;
	word-break: keep-all;
}

.hg_otabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 36px;
}

.hg_otab {
	position: relative;
	overflow: hidden;
	min-height: 54px;
	padding: 0 12px;
	border: 0;
	border-radius: 8px;
	background: var(--hg-tint);
	font-family: inherit;
	font-size: 17px;
	font-weight: 600;
	color: #555;
	cursor: pointer;
	transition: background .25s, border-color .25s, color .25s;
}

.hg_otab:hover {
	background: rgba(16, 53, 108, .1);
	color: var(--hg-navy);
}

.hg_otab.is-active {
	background: var(--hg-navy);
	color: #fff;
}

.hg_otab:focus-visible {
	outline: 3px solid #1d4ed8;
	outline-offset: 2px;
}

/* 자동 순환 진행 막대 */
.hg_otab_bar {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: #7fa6f0;
	transform: scaleX(0);
	transform-origin: left;
}

.hg_omap.is-auto .hg_otab.is-active .hg_otab_bar {
	animation: hg_bar 5s linear forwards;
}

@keyframes hg_bar {
	to {
		transform: scaleX(1);
	}
}

.hg_opanels {
	margin-top: 28px;
}

.hg_opanel[hidden] {
	display: none;
}

.hg_opanel.is-active {
	animation: hg_panel_in .5s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes hg_panel_in {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hg_sec .hg_opanel_name {
	margin-top: 12px;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -.5px;
	color: var(--hg-navy);
}

.hg_opanel_meta {
	display: grid;
	gap: 12px;
	margin-top: 20px;
}

.hg_opanel_meta li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.6;
	color: #444;
	word-break: keep-all;
}

.hg_opanel_meta i {
	flex: 0 0 18px;
	margin-top: 5px;
	font-size: 15px;
	text-align: center;
	color: var(--hg-navy);
}

.hg_sec .hg_opanel_meta a {
	font-weight: 700;
	color: var(--hg-navy);
}

.hg_opanel_btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

.hg_sec .hg_obtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	transition: background .2s, transform .2s, box-shadow .2s;
}

.hg_sec .hg_obtn:hover {
	transform: translateY(-2px);
}

.hg_sec .hg_obtn_main {
	background: var(--hg-navy);
	color: #fff;
}

.hg_sec .hg_obtn_main:hover {
	background: var(--hg-navy-deep);
	box-shadow: 0 8px 18px rgba(16, 53, 108, .25);
}

.hg_sec .hg_obtn_main i {
	transition: transform .2s;
}

.hg_sec .hg_obtn_main:hover i {
	transform: translateX(4px);
}

.hg_sec .hg_obtn_sub {
	background: var(--hg-tint);
	color: var(--hg-navy);
}

.hg_sec .hg_obtn_sub:hover {
	background: var(--hg-tint);
}

/* 지도 */
.hg_omap_stage {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px;
	border-radius: 8px;
	background: #f1f4f9;
}

.hg_map_svg {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
	overflow: visible;
}

.hg_region {
	fill: #dde4ee;
	stroke: #fff;
	stroke-width: 1.5;
	stroke-linejoin: round;
	opacity: 0;
	transform: translateY(10px);
	transition: fill .4s, opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
	transition-delay: 0s, calc(var(--i) * 80ms), calc(var(--i) * 80ms);
}

.hg_omap.is-in .hg_region {
	opacity: 1;
	transform: none;
}

/* 사무소가 있는 지역은 옅은 파랑, 선택된 지역은 진한 파랑 */
.hg_omap .hg_region.has-office {
	fill: #b6c9ea;
}

.hg_omap .hg_region.has-office:hover {
	fill: #8eaadd;
}

.hg_omap .hg_region.is-active {
	fill: var(--hg-navy);
}

.hg_map_label {
	font-size: 11px;
	font-weight: 500;
	fill: #7b8799;
	pointer-events: none;
	opacity: 0;
	transition: opacity .6s .5s, fill .3s;
}

.hg_omap.is-in .hg_map_label {
	opacity: 1;
}

.hg_map_label.is-active {
	fill: #fff;
}

.hg_pin {
	opacity: 0;
	transition: opacity .3s;
}

.hg_omap.is-in .hg_pin {
	opacity: 1;
}

.hg_omap.is-in .hg_pin_in {
	animation: hg_pin_drop .7s cubic-bezier(.3, 1.5, .5, 1) both;
}

.hg_omap.is-in .hg_pin[data-pin="daejeon"] .hg_pin_in {
	animation-delay: .7s;
}

.hg_omap.is-in .hg_pin[data-pin="seoul"] .hg_pin_in {
	animation-delay: .85s;
}

.hg_omap.is-in .hg_pin[data-pin="chungbuk"] .hg_pin_in {
	animation-delay: 1s;
}

@keyframes hg_pin_drop {
	from {
		opacity: 0;
		transform: translateY(-24px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hg_pin_dot {
	fill: var(--hg-navy);
	stroke: #fff;
	stroke-width: 2;
	transition: fill .3s, stroke .3s;
}

.hg_pin.is-active .hg_pin_dot {
	fill: #fff;
	stroke: #1d4ed8;
	stroke-width: 3;
}

.hg_pin_pulse {
	fill: #1d4ed8;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.hg_pin.is-active .hg_pin_pulse {
	animation: hg_pulse 1.8s ease-out infinite;
}

@keyframes hg_pulse {
	0% {
		opacity: .55;
		transform: scale(.6);
	}

	100% {
		opacity: 0;
		transform: scale(3.2);
	}
}

.hg_pin_tag {
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s;
}

.hg_pin_tag rect {
	fill: #1d4ed8;
}

.hg_pin_tag text {
	font-size: 12px;
	font-weight: 700;
	fill: #fff;
}

.hg_pin.is-active .hg_pin_tag {
	opacity: 1;
}


/* 상담 안내 카드: 사무소 정보 아래(왼쪽 컬럼 하단)에 배치 */
.hg_final {
	margin-top: auto;
	padding: 24px 26px;
	border: 1px solid var(--hg-line);
	border-radius: 12px;
	background: linear-gradient(135deg, #eef3fb 0%, #f7f9fd 100%);
	text-align: left;
}

.hg_omap_info .hg_opanels {
	margin-bottom: 32px;
}

.hg_final_copy {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hg_sec .hg_final_tit {
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.4px;
	color: var(--hg-navy);
	word-break: keep-all;
}

.hg_sec .hg_final_sub {
	margin-top: 4px;
	font-size: 14.5px;
	color: #666;
	word-break: keep-all;
}

.hg_final_btns {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.hg_sec .hg_final_btn {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 16px;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	transition: transform .2s, box-shadow .2s;
}

.hg_sec .hg_final_btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 18px rgba(16, 53, 108, .18);
}

.hg_sec .hg_final_tel {
	background: var(--hg-navy);
	color: #fff;
}

.hg_sec .hg_final_kakao {
	background: #fee500;
	color: #191600;
}

/* 9. 반응형 ---------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
	.hg_hero_inner {
		flex-direction: column;
		align-items: stretch;
	}

	.hg_panel {
		grid-template-columns: 1fr;
	}

	.hg_panel_side {
		padding: 26px 24px;
	}

	.hg_panel_btn {
		margin-top: 6px;
	}

	.hg_cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hg_more_grid,
	.hg_case_grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.hg_lawyer_grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.hg_cred_grid {
		flex-basis: 100%;
	}

	.hg_media_grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 640px) {
	.hg_field .hg_wrap,
	.hg_lawyer .hg_wrap,
	.hg_media .hg_wrap,
	.hg_office .hg_wrap {
		padding: 0 20px;
	}

	.hg_hero {
		padding: 44px 0 80px;
	}

	.hg_hero_inner {
		padding: 0 20px;
	}

	.hg_sec .hg_hero_kicker {
		font-size: 10px;
		letter-spacing: 2px;
	}

	.hg_sec .hg_hero_title {
		font-size: clamp(28px, 7.5vw, 42px);
		line-height: 1.5;
		letter-spacing: -1.2px;
	}

	.hg_sec .hg_hero_sub {
		font-size: 14px;
	}

	.hg_stats {
		margin-top: -36px;
	}

	.hg_stats_box {
		grid-template-columns: 1fr;
	}

	.hg_stat {
		justify-content: flex-start;
		padding: 18px 20px;
	}

	.hg_stat+.hg_stat {
		border-left: 0;
		border-top: 1px solid var(--hg-line);
	}

	.hg_stat_label {
		font-size: 15px;
	}

	.hg_stat_note {
		margin-top: 2px;
	}

	.hg_stat_num {
		font-size: 30px;
	}

	.hg_field,
	.hg_case,
	.section.hg_lawyer,
	.section.hg_media,
	.section.hg_office {
		padding: 50px 0 44px;
	}

	.section.hg_cred {
		padding: 50px 0;
	}

	.hg_sec .hg_title {
		font-size: 24px;
	}

	.hg_sec .hg_desc {
		font-size: 14px;
	}

	.hg_panels,
	.hg_case_grid,
	.hg_lawyer_grid,
	.hg_media_grid {
		margin-top: 30px;
	}

	.hg_panel_main {
		padding: 20px 18px 16px;
	}

	.hg_cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.hg_sec .hg_col a {
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.hg_col a::before {
		top: 1.35em;
	}

	.hg_more_grid,
	.hg_case_grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.hg_lawyer_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.hg_chips {
		padding: 18px 16px;
	}

	.hg_press {
		padding: 4px 18px;
	}

	.hg_press_src {
		flex-basis: 72px;
	}

	.hg_video_grid {
		grid-template-columns: 1fr;
	}

	.hg_final {
		margin-top: 0;
	}

}

@media (prefers-reduced-motion: reduce) {

	.hg_sec *,
	.hg_sec *::before {
		transition: none !important;
	}
}

/* 하단 섹션 반응형 */
@media screen and (max-width: 1024px) {
	.hg_cred_inner {
		grid-template-columns: 1fr;
	}

	.hg_cred_copy {
		padding: 0 0 36px;
		border-right: 0;
		border-bottom: 0;
	}

	.hg_cred_grid {
		padding: 36px 0 0;
	}

	.hg_sec .hg_cred_copy .hg_title {
		font-size: 36px;
	}

	.hg_media_grid {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 640px) {
	.section.hg_cred,
	.section.hg_media,
	.section.hg_office {
		padding: 56px 0;
	}

	.section.hg_cert {
		padding: 56px 0 48px;
	}

	.hg_cert .con3_inner {
		padding: 0 20px;
	}

	.hg_cert .lawyer_into_wrap {
		margin-top: 30px;
	}

	.hg_sec .hg_cred_text {
		font-size: 15px;
	}

	.hg_sec .hg_cred_copy .hg_title {
		font-size: 28px;
		letter-spacing: -1px;
	}

	.hg_cred_grid {
		grid-template-columns: 1fr;
		row-gap: 14px;
		padding-top: 28px;
	}

	.hg_cred_group {
		padding: 22px 20px 24px;
	}

	.hg_sec .hg_cred_name {
		font-size: 20px;
	}

	.hg_cred_chips li {
		padding: 6px 14px;
		font-size: 14.5px;
	}

	.hg_media_col,
	.hg_video {
		padding: 20px 18px 12px;
	}

	.hg_press_src {
		flex-basis: 70px;
	}

	.hg_sec .hg_press a {
		gap: 12px;
	}

	.hg_media_grid {
		margin-top: 30px;
	}

	.hg_final {
		padding: 20px 18px;
	}


	.hg_sec .hg_final_tit {
		font-size: 17px;
	}

	.hg_sec .hg_final_sub {
		font-size: 13.5px;
	}

	.hg_final_btns {
		flex-direction: column;
	}
}

/* 사무소 지도 반응형 */
@media screen and (max-width: 1024px) {
	.hg_omap {
		grid-template-columns: 1fr;
	}

	.hg_omap_stage {
		order: -1;
		padding: 24px;
	}

	.hg_map_svg {
		max-width: 260px;
	}
}

@media screen and (max-width: 640px) {
	.hg_omap_info {
		padding: 0;
	}

	.hg_omap_count {
		font-size: 30px;
	}

	.hg_omap_sub {
		font-size: 14px;
	}

	.hg_otabs {
		margin-top: 24px;
	}

	.hg_otab {
		min-height: 48px;
		font-size: 15px;
	}

	.hg_sec .hg_opanel_name {
		font-size: 23px;
	}

	.hg_opanel_meta li {
		font-size: 15px;
	}

	.hg_opanel_btns,
	.hg_sec .hg_obtn {
		width: 100%;
	}

	.hg_map_svg {
		max-width: 220px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.hg_region,
	.hg_map_label,
	.hg_pin,
	.hg_pin_in {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	.hg_pin.is-active .hg_pin_pulse,
	.hg_opanel.is-active {
		animation: none !important;
	}
}

/* 8-2. 오시는 길 애니메이션 ---------------------------------------------------
   - JS 가 .hg_office 에 .hg-anim 을 붙인 경우에만 초기 숨김 상태가 적용됩니다 (JS 실패 시에도 내용이 보입니다)
   - 섹션이 화면에 들어오면 .is-in 이 붙으며 순서대로 등장합니다
   ------------------------------------------------------------------------- */
@keyframes hg_rise {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes hg_pop {
	0% {
		opacity: 0;
		transform: scale(.3) rotate(-8deg);
	}

	100% {
		opacity: 1;
		transform: none;
	}
}

@keyframes hg_nudge {

	0%,
	100% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(5px);
	}
}

@keyframes hg_shine {
	0% {
		left: -60%;
	}

	55%,
	100% {
		left: 130%;
	}
}

@keyframes hg_flow {
	to {
		stroke-dashoffset: -20;
	}
}

@keyframes hg_ring {

	0%,
	100% {
		transform: rotate(0);
	}

	20% {
		transform: rotate(-16deg);
	}

	40% {
		transform: rotate(14deg);
	}

	60% {
		transform: rotate(-10deg);
	}

	80% {
		transform: rotate(6deg);
	}
}

/* 초기 숨김 */
.hg_office.hg-anim:not(.is-in) .hg_head>*,
.hg_office.hg-anim .hg_omap:not(.is-in) :is(.hg_omap_count, .hg_omap_sub, .hg_otab, .hg_opanel>*) {
	opacity: 0;
}

/* 제목 · 공지 */
.hg_office.hg-anim.is-in .hg_head>* {
	animation: hg_rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.hg_office.hg-anim.is-in .hg_head>:nth-child(2) {
	animation-delay: .1s;
}

.hg_office.hg-anim.is-in .hg_head>:nth-child(3) {
	animation-delay: .2s;
}

/* 왼쪽 정보 */
.hg_omap.is-in .hg_omap_count {
	animation: hg_rise .7s cubic-bezier(.2, .7, .2, 1) both;
}

.hg_omap.is-in .hg_omap_count em {
	animation: hg_pop .8s cubic-bezier(.3, 1.6, .5, 1) .3s both;
}

.hg_omap.is-in .hg_omap_sub {
	animation: hg_rise .7s cubic-bezier(.2, .7, .2, 1) .12s both;
}

.hg_omap.is-in .hg_otab {
	animation: hg_rise .6s cubic-bezier(.2, .7, .2, 1) both;
}

.hg_omap.is-in .hg_otab:nth-child(1) {
	animation-delay: .25s;
}

.hg_omap.is-in .hg_otab:nth-child(2) {
	animation-delay: .35s;
}

.hg_omap.is-in .hg_otab:nth-child(3) {
	animation-delay: .45s;
}

/* 사무소 상세: 탭을 바꿀 때마다 항목이 차례로 나타남 */
.hg_omap .hg_opanel.is-active {
	animation: none;
}

.hg_omap.is-in .hg_opanel.is-active>* {
	animation: hg_rise .55s cubic-bezier(.2, .7, .2, 1) both;
}

.hg_omap.is-in .hg_opanel.is-active>:nth-child(1) {
	animation-delay: .5s;
}

.hg_omap.is-in .hg_opanel.is-active>:nth-child(2) {
	animation-delay: .58s;
}

.hg_omap.is-in .hg_opanel.is-active>:nth-child(3) {
	animation-delay: .66s;
}

.hg_omap.is-in .hg_opanel.is-active>:nth-child(4) {
	animation-delay: .74s;
}

/* 탭 전환 후에는 지연 없이 빠르게 */
.hg_omap.is-ready .hg_opanel.is-active>:nth-child(1) {
	animation-delay: 0s;
}

.hg_omap.is-ready .hg_opanel.is-active>:nth-child(2) {
	animation-delay: .07s;
}

.hg_omap.is-ready .hg_opanel.is-active>:nth-child(3) {
	animation-delay: .14s;
}

.hg_omap.is-ready .hg_opanel.is-active>:nth-child(4) {
	animation-delay: .21s;
}

/* 버튼: 길찾기 버튼 빛 스윕 / 전화 아이콘 흔들림 */
.hg_sec .hg_obtn_main {
	position: relative;
	overflow: hidden;
}

.hg_obtn_main::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}

.hg_obtn_main:hover::after {
	animation: hg_shine .9s ease-out;
}

.hg_obtn_sub:hover i {
	animation: hg_ring .6s ease-in-out;
	transform-origin: 50% 50%;
}

/* 선택된 지역은 은은하게 숨쉬듯 */
@keyframes hg_breathe {

	0%,
	100% {
		filter: brightness(1);
	}

	50% {
		filter: brightness(1.25);
	}
}

.hg_omap.is-in .hg_region.is-active {
	animation: hg_breathe 2.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {

	.hg_office *,
	.hg_office *::after {
		animation: none !important;
	}

}


/* 7-1. 미디어 — 왼쪽 언론 보도 목록 / 오른쪽 영상 슬라이드 ------------------------------
   - 오른쪽 영상은 큰 카드 슬라이드(화살표 + 점)이고, 왼쪽 목록은 오른쪽 높이에 맞춰 늘어납니다
   ------------------------------------------------------------------------- */
.hg_mx {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 56px;
	align-items: stretch;
	margin-top: 48px;
	text-align: left;
}

/* 영상(왼쪽) · 언론 보도(오른쪽): PC 에서만 좌우 순서를 바꿈, 모바일은 언론 → 영상 순서 유지 */
@media screen and (min-width: 1025px) {
	.hg_mx_media {
		order: -1;
	}
}

/* 언론 보도: 세로 슬라이드(Swiper, 한 번에 5건)
   - .hg_mx_pswiper 를 박스 전체에 꽉 채워 세로 Swiper 의 높이를 확보합니다
   - 6건 이상: Swiper 가 슬라이드 높이(박스높이 ÷ 5)를 계산
   - 5건 이하: Swiper 미동작, 행이 높이를 균등하게 나눠 가짐
   ------------------------------------------------------------------------- */
.hg_mx_pressbox {
	position: relative;
	min-height: 320px;
	border-top: 1px solid var(--hg-line);
}

/* Swiper CSS(.swiper{position:relative})가 뒤에서 로드되어도 이기도록 선택자를 한 단계 높임 */
.hg_mx_pressbox .hg_mx_pswiper {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto;
	height: auto;
	overflow: hidden;
}

.hg_mx_pressbox .hg_mx_press {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hg_sec .hg_mx_press li {
	display: flex;
	height: auto;
}

.hg_sec .hg_mx_press li>a {
	flex: 1 1 auto;
}

.hg_mx_pswiper:not(.is-slide) .hg_mx_press {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.hg_mx_pswiper:not(.is-slide) .hg_mx_press li {
	flex: 1 1 0;
	min-height: 0;
}

.hg_sec .hg_mx_press a {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: 14px 4px;
	border-bottom: 1px solid var(--hg-line);
}

/* 언론사명: 알약(pill) 태그, 행에 마우스를 올리면 네이비로 채워짐 */
.hg_mx_src {
	flex: 0 0 108px;
	padding: 8px 6px;
	border-radius: 999px;
	background: rgba(16, 53, 108, .07);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	color: var(--hg-navy);
	word-break: keep-all;
	transition: background .2s, color .2s;
}

.hg_sec .hg_mx_press a:hover .hg_mx_src {
	background: var(--hg-navy);
	color: #fff;
}

.hg_mx_tit {
	display: block;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 17px;
	line-height: 1.55;
	color: #222;
	word-break: keep-all;
	transition: color .2s;
}

.hg_sec .hg_mx_press a:hover .hg_mx_tit {
	color: var(--hg-navy);
	text-decoration: underline;
}

.hg_mx_media {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.hg_mx_swiper {
	width: 100%;
	overflow: hidden;
}

.hg_sec .hg_mx_video {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
}

.hg_mx_thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 12px;
	overflow: hidden;
	border-radius: 14px;
	background: #1b2a44;
	box-shadow: 0 10px 26px rgba(16, 53, 108, .14);
}

/* 슬라이드 컨트롤: 왼쪽 점 · 오른쪽 화살표 */
.hg_mx_ctrl {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 20px;
}

.hg_mx_dots {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hg_mx_dots .swiper-pagination-bullet {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0;
	border-radius: 999px;
	background: rgba(16, 53, 108, .22);
	opacity: 1;
	cursor: pointer;
	transition: width .25s, background .25s;
}

.hg_mx_dots .swiper-pagination-bullet-active {
	width: 28px;
	background: var(--hg-navy);
}

.hg_mx_arrows {
	display: flex;
	gap: 8px;
}

.hg_mx_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--hg-line);
	border-radius: 50%;
	background: #fff;
	font-size: 14px;
	color: var(--hg-navy);
	cursor: pointer;
	transition: background .2s, color .2s, border-color .2s;
}

.hg_mx_btn:hover {
	background: var(--hg-navy);
	border-color: var(--hg-navy);
	color: #fff;
}

.hg_mx_btn.swiper-button-disabled {
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.hg_mx_btn:focus-visible {
	outline: 3px solid var(--hg-navy);
	outline-offset: 2px;
}

.hg_mx_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s;
}

.hg_mx_video:hover .hg_mx_thumb img {
	transform: scale(1.04);
}

.hg_mx_thumb i {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	padding-left: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	font-size: 20px;
	color: var(--hg-navy);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

.hg_mx_vtit {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: -.4px;
	color: #1a1a1a;
	word-break: keep-all;
}

.hg_mx_vsub {
	font-size: 15px;
	color: #777;
	word-break: keep-all;
}

.hg_mx_empty {
	grid-column: 1 / -1;
	padding: 18px 0;
	font-size: 16px;
	color: #666;
}

@media screen and (max-width: 1024px) {
	.hg_mx {
		grid-template-columns: 1fr;
		gap: 40px;
	}
}

@media screen and (max-width: 640px) {
	.hg_mx {
		margin-top: 32px;
		gap: 32px;
	}

	.hg_sec .hg_mx_press a {
		gap: 14px;
		padding: 11px 2px;
	}

	.hg_mx_pressbox {
		min-height: 336px;
	}

	.hg_mx_src {
		flex-basis: 78px;
		padding: 6px 4px;
		font-size: 12.5px;
	}

	.hg_mx_tit {
		font-size: 15.5px;
	}

	.hg_mx_thumb {
		border-radius: 12px;
	}

	.hg_mx_thumb i {
		width: 54px;
		height: 54px;
		margin: -27px 0 0 -27px;
		font-size: 17px;
	}

	.hg_mx_vtit {
		font-size: 17px;
	}

	.hg_mx_vsub {
		font-size: 14px;
	}

	.hg_mx_btn {
		width: 40px;
		height: 40px;
	}
}

/* 8-3. 오시는 길 — 탭 · 사무소 정보 · 약도 · 하단 상담 바 ------------------------------
   - 배경 박스 없이 흰 바탕: 왼쪽 밑줄 탭 + 사무소 정보 / 오른쪽 연한 파랑 약도
   - 지도 라벨은 점 + 꺾인 선 + 글자, 하단 상담 바는 연한 파랑 바탕
   ------------------------------------------------------------------------- */
.hg_office.hg_office.hg_office.hg_office .hg_omap {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
	margin-top: 44px;
	overflow: visible;
	border: 0;
	border-radius: 0;
	background: none;
}

.hg_office .hg_omap_info {
	justify-content: center;
	padding: 0 8px;
	background: none;
}

/* 탭: 밑줄형 */
.hg_office .hg_otabs {
	display: flex;
	gap: 0;
	margin-top: 0;
	padding: 0;
	border-radius: 0;
	background: none;
}

.hg_office .hg_otab {
	flex: 1;
	min-height: 56px;
	padding: 0;
	border: 0;
	border-bottom: 3px solid #e4ebf7;
	border-radius: 0;
	background: none;
	font-size: 19px;
	font-weight: 700;
	color: #555;
	transition: color .2s, border-color .2s;
}

.hg_office .hg_otab:hover {
	background: none;
	color: var(--hg-navy);
}

.hg_office .hg_otab.is-active {
	background: none;
	border-bottom-color: var(--hg-navy);
	color: var(--hg-navy);
	box-shadow: none;
}

.hg_office .hg_otab_bar {
	display: none;
}

/* 사무소 정보 */
.hg_office .hg_opanels {
	margin-top: 32px;
}

.hg_office .hg_office_type {
	align-self: flex-start;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: 15px;
	font-weight: 500;
	color: #555;
}

.hg_office .hg_opanel_name {
	margin-top: 8px;
	font-size: 34px;
	letter-spacing: -.8px;
	color: var(--hg-navy);
}

.hg_office .hg_opanel_meta {
	gap: 12px;
	margin-top: 22px;
}

.hg_office .hg_opanel_meta li {
	font-size: 16px;
	line-height: 1.65;
	color: #444;
}

.hg_office .hg_opanel_meta li i {
	margin-top: 5px;
	font-size: 15px;
	color: var(--hg-navy);
}

.hg_sec.hg_office .hg_opanel_meta a {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: .2px;
	color: var(--hg-navy);
}

.hg_office .hg_opanel_btns {
	flex-wrap: wrap;
	margin-top: 30px;
}

.hg_sec.hg_office .hg_obtn {
	min-height: 54px;
	padding: 0 32px;
	border-radius: 6px;
	font-size: 16px;
	white-space: nowrap;
}

.hg_sec.hg_office .hg_obtn_main {
	flex: none;
}

.hg_sec.hg_office .hg_obtn_main .hg_obtn_arrow {
	font-size: 18px;
	line-height: 1;
	transition: transform .2s;
}

.hg_sec.hg_office .hg_obtn_main:hover .hg_obtn_arrow {
	transform: translate(2px, -2px);
}

/* 약도 */
.hg_office .hg_omap .hg_omap_stage {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--hg-navy);
}

.hg_office .hg_map_svg {
	width: 100%;
	max-width: 560px;
	height: auto;
	margin: 0 auto;
	overflow: visible;
}

.hg_office .hg_omap .hg_region,
.hg_office .hg_omap .hg_region.has-office {
	fill: #dce8f8;
	stroke: #fff;
	stroke-width: 1.5;
}

.hg_office .hg_omap .hg_region.has-office:hover {
	fill: #cddff5;
}

.hg_office .hg_omap .hg_region.is-active {
	fill: #bcd3f0;
	animation: none;
}

.hg_office .hg_pin {
	cursor: pointer;
}

.hg_office .hg_pin_halo {
	fill: var(--hg-navy);
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.hg_office .hg_pin_dot {
	fill: #3d5a8c;
	stroke: #fff;
	stroke-width: 2;
}

.hg_office .hg_pin.is-active .hg_pin_dot {
	fill: var(--hg-navy);
}

.hg_office .hg_pin.is-active .hg_pin_halo {
	opacity: .16;
	animation: hg_halo 2s ease-out infinite;
}

@keyframes hg_halo {
	0% {
		transform: scale(.7);
		opacity: .22;
	}

	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

.hg_office .hg_pin_leader {
	fill: none;
	stroke: var(--hg-navy);
	stroke-width: 1.2;
	stroke-linejoin: round;
}

.hg_office .hg_pin_city {
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.3px;
	dominant-baseline: central;
	fill: #3d5a8c;
	transition: fill .25s;
}

.hg_office .hg_pin.is-active .hg_pin_city,
.hg_office .hg_pin:hover .hg_pin_city {
	fill: var(--hg-navy);
}

.hg_office .hg_pin.is-active .hg_pin_city {
	font-weight: 800;
}

.hg_office .hg_pin:focus,
.hg_office .hg_pin:focus-visible {
	outline: none;
}

.hg_office .hg_pin:focus-visible .hg_pin_dot {
	stroke: #7fa6f0;
	stroke-width: 3;
}

.hg_omap.is-in .hg_pin {
	animation: hg_pin_drop .7s cubic-bezier(.3, 1.5, .5, 1) both;
}

.hg_omap.is-in .hg_pin[data-pin="seoul"] {
	animation-delay: .8s;
}

.hg_omap.is-in .hg_pin[data-pin="chungbuk"] {
	animation-delay: .95s;
}

.hg_omap.is-in .hg_pin[data-pin="daejeon"] {
	animation-delay: 1.1s;
}

/* 상담 안내 카드(왼쪽 컬럼 하단): 기본 스타일은 8-1 의 .hg_final 참고 */
.hg_office .hg_final {
	margin-top: auto;
}

.hg_sec.hg_office .hg_final_btn {
	min-height: 52px;
	font-size: 17px;
}

@media screen and (max-width: 1024px) {
	.hg_office.hg_office.hg_office.hg_office .hg_omap {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.hg_office .hg_omap .hg_omap_stage {
		order: 0;
	}

	.hg_office .hg_map_svg {
		max-width: 440px;
	}
}

@media screen and (max-width: 640px) {
	.hg_office .hg_omap_info {
		padding: 0;
	}

	.hg_office .hg_otab {
		min-height: 50px;
		font-size: 17px;
	}

	.hg_office .hg_opanel_name {
		font-size: 28px;
	}

	.hg_sec.hg_office .hg_opanel_meta a {
		font-size: 21px;
	}

	.hg_sec.hg_office .hg_obtn {
		width: 100%;
	}

	.hg_office .hg_final {
		margin-top: 0;
	}

	.hg_sec.hg_office .hg_final_btn {
		min-height: 52px;
		font-size: 16px;
	}
}


/* 8-3. 사무소 카드 목록 — 탭 없이 3곳을 한눈에 -------------------------------------
   - 카드에 마우스를 올리면(또는 지도 핀을 올리면) 지도의 해당 지역이 강조됩니다
   ------------------------------------------------------------------------- */
.hg_sec.hg_office .hg_olist {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hg_sec.hg_office .hg_ocard {
	position: relative;
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 24px;
	padding: 22px 24px 22px 28px;
	border: 1px solid var(--hg-line);
	border-radius: 12px;
	background: #fff;
	transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}

/* 왼쪽 강조 막대 */
.hg_sec.hg_office .hg_ocard::before {
	content: "";
	position: absolute;
	top: 14px;
	bottom: 14px;
	left: 0;
	width: 4px;
	border-radius: 0 4px 4px 0;
	background: var(--hg-navy);
	opacity: 0;
	transition: opacity .25s;
}

.hg_sec.hg_office .hg_ocard.is-active {
	border-color: var(--hg-navy);
	background: #f3f7fd;
	box-shadow: 0 10px 24px rgba(16, 53, 108, .12);
}

.hg_sec.hg_office .hg_ocard.is-active::before {
	opacity: 1;
}

.hg_sec.hg_office .hg_ocard_head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.hg_sec.hg_office .hg_ocard .hg_office_type {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(16, 53, 108, .08);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--hg-navy);
	transition: background .25s, color .25s;
}

.hg_sec.hg_office .hg_ocard.is-active .hg_office_type {
	background: var(--hg-navy);
	color: #fff;
}

.hg_sec.hg_office .hg_ocard_name {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.8px;
	color: var(--hg-navy);
}

.hg_sec.hg_office .hg_ocard .hg_opanel_meta {
	gap: 6px;
	margin-top: 0;
}

.hg_sec.hg_office .hg_ocard .hg_opanel_meta li {
	font-size: 15px;
	line-height: 1.55;
}

.hg_sec.hg_office .hg_ocard .hg_opanel_meta a {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.2px;
}

/* 길찾기 버튼: 평소엔 외곽선, 선택된 카드에서는 채워짐 */
.hg_sec.hg_office .hg_ocard_btn {
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid var(--hg-navy);
	background: #fff;
	font-size: 15px;
	color: var(--hg-navy);
	white-space: nowrap;
}

.hg_sec.hg_office .hg_ocard_btn:hover,
.hg_sec.hg_office .hg_ocard.is-active .hg_ocard_btn {
	background: var(--hg-navy);
	color: #fff;
}

.hg_sec.hg_office .hg_ocard_btn:hover {
	box-shadow: 0 8px 18px rgba(16, 53, 108, .25);
}

.hg_sec.hg_office .hg_ocard_btn:hover .hg_obtn_arrow {
	transform: translate(2px, -2px);
}

/* 상담 안내 카드는 목록 바로 아래에 */
.hg_sec.hg_office .hg_omap_info .hg_final {
	margin-top: 20px;
}

/* 등장 애니메이션 */
.hg_office.hg-anim .hg_omap:not(.is-in) .hg_ocard {
	opacity: 0;
}

.hg_omap.is-in .hg_ocard {
	animation: hg_rise .6s cubic-bezier(.2, .7, .2, 1) both;
	animation-delay: calc(var(--i, 0) * 120ms + .2s);
}

@media screen and (max-width: 640px) {
	.hg_sec.hg_office .hg_ocard {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 18px 18px 18px 22px;
	}

	.hg_sec.hg_office .hg_ocard_head {
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.hg_sec.hg_office .hg_ocard_name {
		font-size: 26px;
	}

	.hg_sec.hg_office .hg_ocard_btn {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hg_omap.is-in .hg_ocard {
		animation: none !important;
	}
}


/* 8-4. 오시는 길 지도 — 대한민국 전도 + 사무소 핀 3곳 ------------------------------------
   - SVG 마크업은 office_map.php (index_test.php 안의 .hg_map_svg) 와 함께 사용합니다
   ------------------------------------------------------------------------- */
.hg_sec.hg_office .hg_omap .hg_omap_stage {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.hg_sec.hg_office .hg_map_svg {
	width: 100%;
	max-width: 600px;
	height: auto;
	overflow: visible;
}

/* 지도: 연한 회청색 실루엣 + 흰 경계선 */
.hg_map_land {
	opacity: 0;
	transition: opacity .8s ease;
}

.hg_omap.is-in .hg_map_land {
	opacity: 1;
}

.hg_sec.hg_office .hg_land,
.hg_sec.hg_office .hg_omap .hg_region {
	fill: #e4ebf5;
	stroke: #fff;
	stroke-width: .8;
	stroke-linejoin: round;
}

/* 사무소가 있는 지역은 한 톤 진하게, 선택되면 더 진하게 */
.hg_sec.hg_office .hg_omap .hg_region.has-office {
	fill: #cddcf2;
}

.hg_sec.hg_office .hg_omap .hg_region.has-office:hover {
	fill: #b8cfee;
}

.hg_sec.hg_office .hg_omap .hg_region.is-active {
	fill: #9fbce8;
}

/* 핀: 물방울 마커 + 아래 이름 */
.hg_sec.hg_office .hg_pin_ground {
	fill: var(--hg-navy);
	opacity: .18;
}

.hg_sec.hg_office .hg_pin_drop {
	fill: #7d8aa0;
	stroke: #fff;
	stroke-width: 2;
	stroke-linejoin: round;
	transition: fill .25s;
}

.hg_sec.hg_office .hg_pin_core {
	fill: #fff;
}

.hg_sec.hg_office .hg_pin.is-active .hg_pin_drop,
.hg_sec.hg_office .hg_pin:hover .hg_pin_drop {
	fill: var(--hg-navy);
}

.hg_sec.hg_office .hg_pin_city {
	font-size: 19px;
	font-weight: 600;
	letter-spacing: -.2px;
	dominant-baseline: central;
	fill: #5b6778;
	paint-order: stroke;
	stroke: #fff;
	stroke-width: 4px;
	stroke-linejoin: round;
	transition: fill .25s;
}

.hg_sec.hg_office .hg_pin.is-active .hg_pin_city,
.hg_sec.hg_office .hg_pin:hover .hg_pin_city {
	font-weight: 800;
	fill: var(--hg-navy);
}

.hg_sec.hg_office .hg_pin:focus-visible .hg_pin_drop {
	stroke: #7fa6f0;
	stroke-width: 3;
}

@media screen and (max-width: 640px) {
	.hg_sec.hg_office .hg_map_svg {
		max-width: 400px;
	}
}


/* 8-5. 오시는 길 — 사무소 카드 · 상담 CTA 다듬기 -----------------------------------------
   - 주소를 굵은 본문(.hg_oaddr_main)과 연한 보조 줄(.hg_oaddr_sub)로 분리
   - 카드 등장 애니메이션이 transform 을 고정하므로, 호버 효과는 그림자/테두리만 사용합니다
   ------------------------------------------------------------------------- */
.hg_sec.hg_office .hg_olist {
	gap: 12px;
}

.hg_sec.hg_office .hg_ocard {
	grid-template-columns: 84px minmax(0, 1fr) auto;
	gap: 8px 22px;
	padding: 20px 22px 20px 26px;
	border-radius: 14px;
}

.hg_sec.hg_office .hg_ocard:hover {
	border-color: #b9c4dd;
	box-shadow: 0 6px 18px rgba(16, 53, 108, .08);
}

.hg_sec.hg_office .hg_ocard.is-active:hover {
	border-color: var(--hg-navy);
	box-shadow: 0 10px 24px rgba(16, 53, 108, .14);
}

/* 배지: 분사무소는 회색, 주사무소는 연한 파랑, 선택되면 네이비 */
.hg_sec.hg_office .hg_ocard .hg_office_type {
	background: #eef0f5;
	color: #566078;
}

.hg_sec.hg_office .hg_ocard[data-office="daejeon"] .hg_office_type {
	background: #e5edfb;
	color: var(--hg-navy);
}

.hg_sec.hg_office .hg_ocard.is-active .hg_office_type {
	background: var(--hg-navy);
	color: #fff;
}

.hg_sec.hg_office .hg_ocard_name {
	font-size: 28px;
}

/* 주소 */
.hg_sec.hg_office .hg_ocard .hg_opanel_meta li {
	gap: 9px;
}

.hg_sec.hg_office .hg_ocard .hg_opanel_meta i {
	flex: 0 0 14px;
	margin-top: 5px;
	font-size: 14px;
}

.hg_sec.hg_office .hg_oaddr_main {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.55;
	color: #1b2437;
}

.hg_sec.hg_office .hg_oaddr_sub {
	display: block;
	margin-top: 3px;
	font-size: 13px;
	line-height: 1.55;
	color: #6b7488;
}

/* 방문 예약 버튼 */
.hg_sec.hg_office .hg_ocard_btn {
	min-height: 44px;
	padding: 0 16px;
	border-radius: 9px;
	font-size: 14.5px;
}

/* 상담 CTA */
.hg_sec.hg_office .hg_omap_info .hg_final {
	margin-top: 16px;
	padding: 24px;
	border-radius: 14px;
}

.hg_sec.hg_office .hg_final_tit {
	font-size: 19px;
}

.hg_sec.hg_office .hg_final_sub {
	font-size: 14px;
	line-height: 1.5;
}

.hg_sec.hg_office .hg_final_btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 16px;
}

.hg_sec.hg_office .hg_final_btn {
	min-height: 52px;
	border-radius: 10px;
	font-size: 16px;
}

.hg_sec.hg_office .hg_final_btn i {
	font-size: 15px;
}

.hg_sec.hg_office .hg_final_tel:hover {
	background: var(--hg-navy-deep);
}

@media screen and (max-width: 640px) {
	.hg_sec.hg_office .hg_ocard {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "head btn" "addr addr";
		gap: 14px 12px;
		padding: 18px 18px 18px 22px;
	}

	.hg_sec.hg_office .hg_ocard_head {
		grid-area: head;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.hg_sec.hg_office .hg_ocard .hg_opanel_meta {
		grid-area: addr;
		padding-top: 12px;
		border-top: 1px dashed var(--hg-line);
	}

	.hg_sec.hg_office .hg_ocard_btn {
		grid-area: btn;
		width: auto;
		min-height: 42px;
		padding: 0 14px;
		font-size: 14px;
	}

	.hg_sec.hg_office .hg_ocard_name {
		font-size: 24px;
	}

	.hg_sec.hg_office .hg_oaddr_main {
		font-size: 14px;
	}

	.hg_sec.hg_office .hg_omap_info .hg_final {
		padding: 20px 18px;
	}

	.hg_sec.hg_office .hg_final_tit {
		font-size: 17px;
	}

	.hg_sec.hg_office .hg_final_btn {
		min-height: 48px;
		padding: 0 10px;
		font-size: 15px;
	}
}

@media screen and (max-width: 360px) {
	.hg_sec.hg_office .hg_final_btns {
		grid-template-columns: 1fr;
	}
}


/* 8-6. 상담 안내(.hg_final)를 오시는 길 하단 전체 폭으로 이동 ------------------------------
   - 왼쪽 컬럼 밖으로 나와 지도·카드 아래에 가로로 펼쳐집니다 (문구 왼쪽 / 버튼 오른쪽)
   ------------------------------------------------------------------------- */
.hg_sec.hg_office .hg_omap+.hg_final {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin-top: 32px;
	padding: 28px 36px;
}

.hg_sec.hg_office .hg_omap+.hg_final .hg_final_btns {
	flex: 0 0 auto;
	width: min(460px, 100%);
	margin-top: 0;
}

@media screen and (max-width: 1024px) {
	.hg_sec.hg_office .hg_omap+.hg_final {
		flex-direction: column;
		align-items: stretch;
		padding: 24px;
	}

	.hg_sec.hg_office .hg_omap+.hg_final .hg_final_btns {
		width: 100%;
		margin-top: 16px;
	}
}

@media screen and (max-width: 640px) {
	.hg_sec.hg_office .hg_omap+.hg_final {
		margin-top: 24px;
		padding: 20px 18px;
	}
}


/* ==========================================================================
   10. 스크롤 · 모션
   - 히어로: 페이지를 열면 순서대로 등장 + 배경 천천히 줌 인 / 스크롤 패럴랙스
   - 나머지 섹션: 화면에 들어올 때 등장 (hg_scroll_fx.js 가 .is-in 을 붙입니다)
   - 숨김 상태는 <html class="hg-fx"> 일 때만 적용됩니다. (모션 줄이기 설정 · JS 실패 시에는 전부 그대로 보임)
   - 등장 애니메이션은 fill-mode 를 backwards 로만 써서, 끝난 뒤에는 기존 :hover transform 이 정상 동작합니다
   ========================================================================== */
.section.hg_sec {
	--hg-ease: cubic-bezier(.22, .72, .2, 1);
	--hg-rv-dist: 32px;
}

@keyframes hg_hero_in {
	from {
		opacity: 0;
		transform: translate3d(0, 26px, 0);
	}
}

@keyframes hg_line_grow {
	from {
		transform: scaleX(0);
	}
}

@keyframes hg_pop_in {
	from {
		opacity: 0;
		transform: scale(.4);
	}
}

@keyframes hg_hero_zoom {
	from {
		scale: 1.14;
	}
}

@keyframes hg_rv_up {
	from {
		opacity: 0;
		transform: translate3d(0, var(--hg-rv-dist, 32px), 0);
	}
}

@keyframes hg_rv_left {
	from {
		opacity: 0;
		transform: translate3d(-44px, 0, 0);
	}
}

@keyframes hg_rv_right {
	from {
		opacity: 0;
		transform: translate3d(44px, 0, 0);
	}
}

@keyframes hg_rv_zoom {
	from {
		opacity: 0;
		transform: translate3d(0, 24px, 0) scale(.94);
	}
}

@keyframes hg_rv_pop {
	from {
		opacity: 0;
		transform: scale(.6);
	}
}

@keyframes hg_play_pulse {

	0% {
		box-shadow: 0 0 0 0 rgba(255, 255, 255, .55), 0 4px 14px rgba(0, 0, 0, .25);
	}

	70%,
	100% {
		box-shadow: 0 0 0 20px rgba(255, 255, 255, 0), 0 4px 14px rgba(0, 0, 0, .25);
	}
}

@keyframes hg_ring_rest {

	0%,
	30%,
	100% {
		transform: rotate(0);
	}

	6% {
		transform: rotate(-16deg);
	}

	12% {
		transform: rotate(14deg);
	}

	18% {
		transform: rotate(-10deg);
	}

	24% {
		transform: rotate(6deg);
	}
}

/* 10-1. 히어로: 열자마자 순서대로 ------------------------------------------- */
.hg_hero_kicker {
	animation: hg_hero_in .8s var(--hg-ease) .05s both;
}

.hg_hero_kicker::before {
	transform-origin: left center;
	animation: hg_line_grow .9s var(--hg-ease) .35s both;
}

.hg_hero_title {
	animation: hg_hero_in .95s var(--hg-ease) .18s both;
}

.hg_hero_sub {
	animation: hg_hero_in .9s var(--hg-ease) .34s both;
}

.hg_hero_points li {
	animation: hg_hero_in .75s var(--hg-ease) calc(.5s + var(--n, 0) * .1s) both;
}

.hg_hero_points li:nth-child(2) {
	--n: 1;
}

.hg_hero_points li:nth-child(3) {
	--n: 2;
}

.hg_hero_points li:nth-child(4) {
	--n: 3;
}

.hg_hero_points i {
	animation: hg_pop_in .5s cubic-bezier(.3, 1.6, .5, 1) calc(.75s + var(--n, 0) * .1s) both;
}

.hg_hero_points li:nth-child(2) i {
	--n: 1;
}

.hg_hero_points li:nth-child(3) i {
	--n: 2;
}

.hg_hero_points li:nth-child(4) i {
	--n: 3;
}

/* 배경: 천천히 줌 인 + (JS 가 --hg-py 를 넣으면) 스크롤 패럴랙스. 위쪽을 넉넉히 늘려 빈틈이 생기지 않게 함 */
@supports (translate: 0 0) {
	.hg_hero::before {
		top: -12%;
		translate: 0 var(--hg-py, 0px);
		animation: hg_hero_zoom 2.4s var(--hg-ease) both;
		will-change: translate;
	}
}

.hg_stat_num {
	font-variant-numeric: tabular-nums;
}

/* 10-2. 스크롤 등장 -------------------------------------------------------------
   아래 목록은 hg_scroll_fx.js 의 REVEAL 목록과 같은 내용입니다.
   ------------------------------------------------------------------------- */

/* 숨김 상태 (화면에 들어오기 전) */
.hg-fx :is(.hg_field .hg_head>*,
	.hg_case .hg_head>*,
	.hg_lawyer .hg_head>*,
	.hg_cert .hg_head>*,
	.hg_media .hg_head>*,
	.hg_stats_box,
	.hg_panel,
	.hg_more_card,
	.hg_chips,
	.hg_case_item,
	.hg_sec .hg_center,
	.hg_lawyer_more,
	.hg_cert .lawyer_into_wrap,
	.hg_office .hg_final,
	.hg_cred_copy>*,
	.hg_mx_pressbox,
	.hg_mx_media,
	.hg_lawyer_card,
	.hg_cred_group):not(.is-in) {
	opacity: 0;
}

/* 묶음 안쪽 요소: 묶음이 나타난 뒤 차례로 */
.hg-fx :is(.hg_stats_box, .hg_panel, .hg_chips, .hg_cred_group):not(.is-in) :is(.hg_stat, .hg_col, .hg_chip, .hg_cred_row, .hg_cred_chips li) {
	opacity: 0;
}

/* 나타나는 방식: 아래에서 위로 (기본) */
.hg-fx :is(.hg_field .hg_head>*,
	.hg_case .hg_head>*,
	.hg_lawyer .hg_head>*,
	.hg_cert .hg_head>*,
	.hg_media .hg_head>*,
	.hg_stats_box,
	.hg_panel,
	.hg_more_card,
	.hg_chips,
	.hg_case_item,
	.hg_sec .hg_center,
	.hg_lawyer_more,
	.hg_cert .lawyer_into_wrap,
	.hg_office .hg_final).is-in {
	animation: hg_rv_up .85s var(--hg-ease) calc(min(var(--rv-i, 0), 8) * 90ms) backwards;
}

/* 왼쪽에서 / 오른쪽에서 */
.hg-fx :is(.hg_cred_copy>*, .hg_mx_pressbox).is-in {
	animation: hg_rv_left .9s var(--hg-ease) calc(min(var(--rv-i, 0), 8) * 110ms) backwards;
}

.hg-fx .hg_mx_media.is-in {
	animation: hg_rv_right .9s var(--hg-ease) .1s backwards;
}

/* 살짝 확대되며 */
.hg-fx :is(.hg_lawyer_card, .hg_cred_group).is-in {
	animation: hg_rv_zoom .8s var(--hg-ease) calc(min(var(--rv-i, 0), 8) * 100ms) backwards;
}

/* 묶음 안쪽 */
.hg-fx .hg_stats_box.is-in .hg_stat {
	animation: hg_rv_up .8s var(--hg-ease) calc(.25s + var(--rv-i, 0) * .14s) backwards;
}

.hg-fx .hg_panel.is-in .hg_col {
	animation: hg_rv_up .7s var(--hg-ease) calc(.3s + var(--rv-i, 0) * .07s) backwards;
}

.hg-fx .hg_chips.is-in .hg_chip {
	animation: hg_rv_pop .45s cubic-bezier(.3, 1.5, .5, 1) calc(.2s + var(--rv-i, 0) * .05s) backwards;
}

.hg-fx .hg_cred_group.is-in .hg_cred_row {
	animation: hg_rv_up .7s var(--hg-ease) calc(.3s + var(--rv-i, 0) * .1s) backwards;
}

.hg-fx .hg_cred_group.is-in .hg_cred_chips li {
	animation: hg_rv_pop .45s cubic-bezier(.3, 1.5, .5, 1) calc(.5s + var(--rv-i, 0) * .08s) backwards;
}

/* 10-3. 호버 · 터치 반응 ------------------------------------------------------- */
.hg_sec .hg_btn {
	position: relative;
	overflow: hidden;
	transition: transform .25s var(--hg-ease), box-shadow .25s, background .25s;
}

.hg_sec .hg_btn i {
	display: inline-block;
	transition: transform .25s var(--hg-ease);
}

.hg_btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
}

.hg_sec .hg_panel_btn i,
.hg_case_go i {
	display: inline-block;
	transition: transform .25s var(--hg-ease);
}

.hg_case_thumb img,
.hg_lp_photo img {
	transition: transform .7s var(--hg-ease);
}

.hg_more_card,
.hg_chip,
.hg_cred_chips li,
.hg_stats_box {
	transition: transform .25s var(--hg-ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}

.hg_sec .hg_col a {
	transition: transform .2s var(--hg-ease), color .2s;
}

.hg_mx_tit {
	transition: color .2s, transform .25s var(--hg-ease);
}

.hg_mx_thumb i {
	animation: hg_play_pulse 2.6s ease-out infinite;
	transition: transform .25s var(--hg-ease);
}

.hg_sec .hg_final_tel i {
	display: inline-block;
	transform-origin: 50% 50%;
	animation: hg_ring_rest 4.5s ease-in-out 1.5s infinite;
}

@media (hover: hover) and (pointer: fine) {
	.hg_sec .hg_btn:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 22px rgba(16, 53, 108, .28);
	}

	.hg_sec .hg_btn:hover i {
		transform: translateX(5px);
	}

	.hg_btn:hover::after {
		animation: hg_shine .9s ease-out;
	}

	.hg_sec .hg_panel_btn:hover i,
	.hg_case_item:hover .hg_case_go i {
		transform: translateX(5px);
	}

	.hg_case_item:hover .hg_case_thumb img,
	.hg_lp_card:hover .hg_lp_photo img {
		transform: scale(1.07);
	}

	.hg_more_card:hover {
		transform: translateY(-4px);
		border-color: rgba(16, 53, 108, .3);
		box-shadow: 0 12px 26px rgba(16, 53, 108, .12);
	}

	.hg_sec .hg_chip:hover {
		transform: translateY(-2px);
		box-shadow: 0 6px 14px rgba(16, 53, 108, .2);
	}

	.hg_sec .hg_col a:hover {
		transform: translateX(3px);
	}

	.hg_cred_chips li:hover {
		transform: translateY(-2px);
		background: rgba(255, 255, 255, .18);
		border-color: rgba(169, 194, 238, .8);
	}

	.hg_stats_box:hover {
		box-shadow: 0 16px 38px rgba(16, 53, 108, .17);
	}

	.hg_sec .hg_mx_press a:hover .hg_mx_tit {
		transform: translateX(4px);
	}

	.hg_mx_video:hover .hg_mx_thumb i {
		transform: scale(1.12);
	}
}

/* 터치: 눌렀을 때 살짝 들어가는 반응 */
@media (hover: none) {

	.hg_sec .hg_btn:active,
	.hg_sec .hg_chip:active,
	.hg_sec .hg_panel_btn:active,
	.hg_case_item:active,
	.hg_lp_card:active,
	.hg_more_card:active,
	.hg_sec .hg_final_btn:active,
	.hg_sec .hg_ocard_btn:active {
		transform: scale(.97);
	}
}

/* 모션 줄이기 · 인쇄 */
@media (prefers-reduced-motion: reduce) {

	.hg_hero_kicker,
	.hg_hero_kicker::before,
	.hg_hero_title,
	.hg_hero_sub,
	.hg_hero_points li,
	.hg_hero_points i,
	.hg_hero::before,
	.hg_mx_thumb i,
	.hg_sec .hg_final_tel i {
		animation: none !important;
	}

	.hg_hero::before {
		translate: none !important;
	}
}

@media print {

	.hg-fx .hg_sec *,
	.hg-fx .hg_sec *::before {
		opacity: 1 !important;
		animation: none !important;
	}
}


/* ==========================================================================
   11. 반응형 정밀 보강 (태블릿 · 모바일)
   - 1280 / 1200 / 1100 / 1024 / 960 / 900 / 820 / 768 / 720 / 640 / 600 / 560 / 520 / 480 / 430 / 414 /
     390 / 375 / 360 / 340 / 320 / 300 / 280px 를 촘촘하게 나눠, 구간마다 "디자인 토큰"(여백·간격·글자 크기)만 바꿉니다.
   - 단 수가 바뀌는 곳(열 개수, 세로 쌓기)은 아래 11-3 에서 따로 정리했습니다.
   - 1281px 이상(PC)은 기존 값 그대로이고, 이 블록은 1280px 이하에서만 적용됩니다.
   ========================================================================== */

/* 11-1. 토큰을 쓰는 규칙 (1280px 이하) ---------------------------------------- */
@media screen and (max-width: 1280px) {
	.section.hg_sec {
		--hg-gutter: 30px;
		--hg-sec-y: 76px;
		--hg-gap: 20px;
		--hg-head-mb: 42px;
		--hg-fs-title: 33px;
		--hg-fs-desc: 16.5px;
		--hg-fs-hero: 46px;
		--hg-pad: 26px;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
		overflow-x: clip;
	}

	/* 긴 단어가 칸을 밀어내지 않도록 (keep-all 은 유지하고, 넘칠 때만 줄바꿈) */
	.hg_sec :where(p, li, a, h2, h3, h4, span) {
		overflow-wrap: break-word;
	}

	/* 좌우 여백 (노치 있는 기기의 가로 모드까지 고려) */
	.hg_sec .hg_wrap,
	.hg_hero_inner,
	.hg_cert .con3_inner {
		padding-left: var(--hg-gutter);
		padding-right: var(--hg-gutter);
	}

	.hg_sec .hg_wrap,
	.hg_hero_inner,
	.hg_cert .con3_inner {
		padding-left: max(var(--hg-gutter), env(safe-area-inset-left));
		padding-right: max(var(--hg-gutter), env(safe-area-inset-right));
	}

	/* 제목 · 설명 */
	.hg_sec .hg_title {
		font-size: var(--hg-fs-title);
	}

	.hg_sec .hg_desc {
		font-size: var(--hg-fs-desc);
	}

	.hg_sec .hg_cred_copy .hg_title {
		font-size: calc(var(--hg-fs-title) * 1.18);
	}

	/* 히어로 */
	.hg_hero {
		padding-top: calc(var(--hg-sec-y) * .8);
		padding-bottom: calc(var(--hg-sec-y) * 1.25);
	}

	.hg_sec .hg_hero_title {
		font-size: var(--hg-fs-hero);
		letter-spacing: -.038em;
	}

	.hg_stats {
		margin-top: calc(var(--hg-sec-y) * -.55);
	}

	/* 섹션 상하 여백 */
	.hg_sec .hg_field {
		padding-top: calc(var(--hg-sec-y) * .9);
		padding-bottom: calc(var(--hg-sec-y) * .875);
	}

	.hg_sec .hg_case,
	.section.hg_lawyer {
		padding-top: var(--hg-sec-y);
		padding-bottom: calc(var(--hg-sec-y) * .875);
	}

	.section.hg_cred {
		padding-top: var(--hg-sec-y);
		padding-bottom: var(--hg-sec-y);
	}

	.section.hg_cert {
		padding-top: calc(var(--hg-sec-y) * 1.2);
		padding-bottom: calc(var(--hg-sec-y) * 1.1);
	}

	.section.hg_media,
	.section.hg_office {
		padding-top: calc(var(--hg-sec-y) * 1.2);
		padding-bottom: calc(var(--hg-sec-y) * 1.2);
	}

	/* 제목과 본문 사이 · 카드 간격 */
	.hg_sec .hg_panels,
	.hg_sec .hg_case_grid,
	.hg_sec .hg_lawyer_grid,
	.hg_cert .lawyer_into_wrap {
		margin-top: var(--hg-head-mb);
	}

	.hg_sec .hg_panels,
	.hg_sec .hg_case_grid {
		gap: var(--hg-gap);
	}

	.section.hg_lawyer .hg_lawyer_grid {
		gap: var(--hg-gap);
	}

	.hg_sec .hg_more_grid {
		gap: calc(var(--hg-gap) * .8);
	}

	.hg_sec .hg_mx,
	.hg_office.hg_office.hg_office.hg_office .hg_omap {
		margin-top: var(--hg-head-mb);
	}

	/* 카드 안쪽 여백 */
	.hg_sec .hg_panel_main {
		padding: var(--hg-pad) var(--hg-pad) calc(var(--hg-pad) * .8);
	}

	.hg_sec .hg_panel_side {
		padding: calc(var(--hg-pad) * 1.15) var(--hg-pad);
	}

	.hg_sec .hg_more_card {
		padding: var(--hg-pad) var(--hg-pad) calc(var(--hg-pad) * .5);
	}

	.hg_sec .hg_case_body {
		padding: calc(var(--hg-pad) * .8) var(--hg-pad) calc(var(--hg-pad) * .7);
	}

	.hg_sec .hg_cred_group {
		padding: calc(var(--hg-pad) * .85);
	}

	.hg_sec .hg_chips {
		padding: calc(var(--hg-pad) * .75) var(--hg-pad);
	}

	/* 큰 버튼 */
	.hg_sec .hg_btn {
		margin-top: clamp(26px, 3vw, 40px);
		padding: clamp(12px, .8vw + 8px, 15px) clamp(24px, 2vw + 10px, 38px);
		font-size: clamp(15px, .3vw + 13.5px, 17px);
	}

	/* 업무분야 패널 안쪽 글자 */
	.hg_sec .hg_panel_name {
		font-size: clamp(24px, 1rem + 1.2vw, 30px);
	}

	.hg_sec .hg_col a {
		overflow-wrap: anywhere;
	}

	/* 자동 채움: 칸이 좁아지면 열 수가 알아서 줄어듭니다 */
	.hg_sec .hg_cols {
		grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
	}

	.hg_sec .hg_chips_list {
		flex-basis: min(520px, 100%);
		min-width: 0;
	}
}

/* 11-2. 구간별 토큰 ------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
	.section.hg_sec {
		--hg-gutter: 28px;
		--hg-sec-y: 72px;
		--hg-gap: 18px;
		--hg-head-mb: 40px;
		--hg-fs-title: 32px;
		--hg-fs-hero: 45px;
		--hg-pad: 24px;
	}
}

@media screen and (max-width: 1100px) {
	.section.hg_sec {
		--hg-sec-y: 70px;
		--hg-head-mb: 38px;
		--hg-fs-title: 31px;
		--hg-fs-desc: 16px;
		--hg-fs-hero: 44px;
	}
}

@media screen and (max-width: 1024px) {
	.section.hg_sec {
		--hg-sec-y: 68px;
		--hg-head-mb: 36px;
		--hg-fs-title: 30px;
		--hg-fs-hero: 42px;
		--hg-pad: 22px;
	}
}

@media screen and (max-width: 960px) {
	.section.hg_sec {
		--hg-gutter: 26px;
		--hg-sec-y: 64px;
		--hg-gap: 16px;
		--hg-head-mb: 34px;
		--hg-fs-title: 29px;
		--hg-fs-hero: 40px;
	}
}

@media screen and (max-width: 900px) {
	.section.hg_sec {
		--hg-sec-y: 62px;
		--hg-fs-title: 28px;
		--hg-fs-desc: 15.5px;
		--hg-fs-hero: 39px;
	}
}

@media screen and (max-width: 820px) {
	.section.hg_sec {
		--hg-gutter: 24px;
		--hg-sec-y: 60px;
		--hg-head-mb: 32px;
		--hg-fs-title: 27px;
		--hg-fs-hero: 38px;
		--hg-pad: 20px;
	}
}

@media screen and (max-width: 768px) {
	.section.hg_sec {
		--hg-sec-y: 58px;
		--hg-gap: 14px;
		--hg-fs-title: 26.5px;
		--hg-fs-desc: 15px;
		--hg-fs-hero: 36px;
	}
}

@media screen and (max-width: 720px) {
	.section.hg_sec {
		--hg-gutter: 22px;
		--hg-sec-y: 56px;
		--hg-head-mb: 30px;
		--hg-fs-title: 26px;
		--hg-fs-hero: 35px;
	}
}

@media screen and (max-width: 640px) {
	.section.hg_sec {
		--hg-gutter: 20px;
		--hg-sec-y: 52px;
		--hg-head-mb: 28px;
		--hg-fs-title: 25px;
		--hg-fs-hero: 34px;
		--hg-pad: 18px;
	}
}

@media screen and (max-width: 600px) {
	.section.hg_sec {
		--hg-sec-y: 50px;
		--hg-gap: 12px;
		--hg-fs-title: 24.5px;
		--hg-fs-desc: 14.5px;
		--hg-fs-hero: 33px;
	}
}

@media screen and (max-width: 560px) {
	.section.hg_sec {
		--hg-sec-y: 48px;
		--hg-head-mb: 26px;
		--hg-fs-title: 24px;
		--hg-fs-hero: 32px;
	}
}

@media screen and (max-width: 520px) {
	.section.hg_sec {
		--hg-gutter: 18px;
		--hg-sec-y: 46px;
		--hg-fs-title: 23.5px;
		--hg-fs-hero: 31px;
		--hg-pad: 16px;
	}
}

@media screen and (max-width: 480px) {
	.section.hg_sec {
		--hg-sec-y: 44px;
		--hg-head-mb: 24px;
		--hg-fs-title: 23px;
		--hg-fs-desc: 14px;
		--hg-fs-hero: 30px;
	}
}

@media screen and (max-width: 430px) {
	.section.hg_sec {
		--hg-sec-y: 42px;
		--hg-fs-title: 22.5px;
		--hg-fs-hero: 29.5px;
	}
}

@media screen and (max-width: 414px) {
	.section.hg_sec {
		--hg-fs-hero: 29px;
	}
}

@media screen and (max-width: 390px) {
	.section.hg_sec {
		--hg-gutter: 16px;
		--hg-sec-y: 40px;
		--hg-gap: 10px;
		--hg-head-mb: 22px;
		--hg-fs-title: 22px;
		--hg-fs-hero: 28.5px;
		--hg-pad: 14px;
	}
}

@media screen and (max-width: 375px) {
	.section.hg_sec {
		--hg-fs-desc: 13.5px;
		--hg-fs-hero: 28px;
	}
}

@media screen and (max-width: 360px) {
	.section.hg_sec {
		--hg-sec-y: 38px;
		--hg-head-mb: 20px;
		--hg-fs-title: 21.5px;
		--hg-fs-hero: 27px;
	}
}

@media screen and (max-width: 340px) {
	.section.hg_sec {
		--hg-fs-title: 21px;
		--hg-fs-desc: 13px;
		--hg-fs-hero: 26.5px;
		--hg-pad: 13px;
	}
}

@media screen and (max-width: 320px) {
	.section.hg_sec {
		--hg-sec-y: 36px;
		--hg-gap: 8px;
		--hg-fs-title: 20.5px;
		--hg-fs-hero: 26px;
	}
}

@media screen and (max-width: 300px) {
	.section.hg_sec {
		--hg-gutter: 14px;
		--hg-sec-y: 34px;
		--hg-head-mb: 18px;
		--hg-fs-title: 20px;
		--hg-fs-hero: 25px;
		--hg-pad: 12px;
	}
}

@media screen and (max-width: 280px) {
	.section.hg_sec {
		--hg-gutter: 12px;
		--hg-sec-y: 32px;
		--hg-fs-title: 19.5px;
		--hg-fs-desc: 12.5px;
		--hg-fs-hero: 24px;
	}
}

/* 11-3. 구간별 구조 보정 ------------------------------------------------------- */

/* PC 좁은 폭(1025~1280): 업무분야 패널 왼쪽 열을 화면에 맞춰 줄임 (기존 440px 고정 → 유동) */
@media screen and (min-width: 1025px) and (max-width: 1280px) {
	.hg_sec .hg_panel {
		grid-template-columns: clamp(290px, 29vw, 440px) minmax(0, 1fr) !important;
	}

	.hg_sec .hg_panel .hg_panel_side {
		width: auto;
		max-width: none;
		flex: none;
	}

	.hg_sec .hg_panel .hg_panel_name {
		font-size: clamp(26px, 2.2vw, 30px);
	}

	.hg_sec .hg_panel_badge {
		font-size: clamp(11.5px, 1vw, 12.5px);
	}

	.section.hg_lawyer .hg_lawyer_grid {
		gap: 14px;
	}

	.section.hg_lawyer .hg_lp_info {
		padding: 16px 14px 18px;
	}

	.section.hg_lawyer .hg_lp_name {
		font-size: 20px;
	}

	.hg_sec .hg_cred_copy {
		padding-right: 28px;
	}

	.hg_sec .hg_cred_chips li {
		padding: 5px 12px;
		font-size: 14px;
	}

	.hg_sec .hg_mx {
		gap: 40px;
	}
}

/* 사무소 카드: 2열 배치가 좁아지는 PC(1025~1240)와 모바일(720 이하)은 "이름+버튼 / 주소" 2단으로 */
@media screen and (min-width: 1025px) and (max-width: 1240px),
screen and (max-width: 720px) {
	.hg_sec.hg_office .hg_ocard {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "head btn" "addr addr";
		gap: 14px 12px;
		padding: 18px 18px 18px 22px;
	}

	.hg_sec.hg_office .hg_ocard_head {
		grid-area: head;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	.hg_sec.hg_office .hg_ocard .hg_opanel_meta {
		grid-area: addr;
		padding-top: 12px;
		border-top: 1px dashed var(--hg-line);
	}

	.hg_sec.hg_office .hg_ocard_btn {
		grid-area: btn;
		width: auto;
		min-height: 42px;
		padding: 0 14px;
		font-size: 14px;
	}

	.hg_sec.hg_office .hg_ocard_name {
		font-size: clamp(22px, 2.4vw, 26px);
	}
}

/* ~1024: 태블릿 가로 / 세로 */
@media screen and (max-width: 1024px) {
	.hg_sec .hg_panel_side {
		gap: 12px;
	}

	.hg_sec .hg_panel_btn {
		align-self: flex-start;
	}

	/* 성공사례 썸네일: 원본 비율(약 3:1)에 가깝게 */
	.hg_sec .hg_case_thumb {
		height: auto;
		aspect-ratio: 16 / 7;
	}

	/* 변호사 5명: 3열 + 아래 2명 가운데 정렬 (6칸 격자에서 카드 1장이 2칸씩 차지) */
	.section.hg_lawyer .hg_lawyer_grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.section.hg_lawyer .hg_lawyer_card {
		grid-column: span 2;
	}

	.section.hg_lawyer .hg_lawyer_card:nth-child(4):nth-last-child(2) {
		grid-column: 2 / span 2;
	}

	.section.hg_lawyer .hg_lawyer_card:nth-child(5):last-child {
		grid-column: 4 / span 2;
	}

	/* 미디어: 한 줄로 쌓이므로 너무 넓어지지 않게 가운데 정렬 */
	.hg_sec .hg_mx {
		max-width: 820px;
		margin-left: auto;
		margin-right: auto;
	}

	/* 오시는 길: 지도 크기 */
	.hg_sec.hg_office .hg_map_svg {
		max-width: min(100%, 520px);
	}

	.hg_sec.hg_office .hg_omap+.hg_final {
		padding: 24px;
	}
}

/* ~900 */
@media screen and (max-width: 900px) {
	.hg_sec .hg_hero_copy {
		max-width: 640px;
	}

	.hg_sec .hg_stat {
		padding: 22px 12px;
		gap: 14px;
	}

	.hg_sec .hg_stat_label {
		font-size: 16px;
	}

	.hg_sec .hg_stat_num {
		font-size: clamp(28px, 1.2rem + 1.8vw, 34px);
	}

	.hg_sec .hg_stat_note {
		font-size: 12.5px;
	}

	/* 모바일 가독성: 글자가 사진 위로 오므로 어두운 막을 위에서 아래로 */
	.hg_hero::after {
		background: linear-gradient(180deg, rgba(16, 53, 108, .72), rgba(16, 53, 108, .5));
	}
}

/* ~820 */
@media screen and (max-width: 820px) {
	.hg_sec .hg_stat {
		text-align: center;
	}

	.hg_sec .hg_stat_note {
		margin-top: 6px;
	}

	.hg_sec .hg_mx_pressbox {
		min-height: 320px;
	}
}

/* ~768 (태블릿 세로) */
@media screen and (max-width: 768px) {
	.hg_sec .hg_panel_desc {
		font-size: 14.5px;
	}

	.hg_sec .hg_case_result {
		font-size: 20px;
	}

	.hg_sec .hg_case_tit {
		font-size: 16px;
	}

	.hg_sec .hg_more_name {
		font-size: 18.5px;
	}

	.hg_sec .hg_final_tit {
		font-size: 18px;
	}
}

/* ~720 */
@media screen and (max-width: 720px) {

	/* 자격 증명 그룹: 1열 */
	.hg_sec .hg_cred_grid {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 12px;
		padding-top: 24px;
	}

	.hg_sec .hg_cred_copy {
		padding-bottom: 24px;
	}
}

/* ~640 */
@media screen and (max-width: 640px) {
	.hg_sec .hg_stat {
		text-align: left;
	}

	.hg_sec .hg_panel_main {
		padding: var(--hg-pad);
	}

	/* 업무분야 열: 2열 */
	.hg_sec .hg_cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px 14px;
	}

	.hg_sec .hg_col_name {
		font-size: 15px;
		margin-bottom: 6px;
	}

	.hg_sec .hg_col a {
		font-size: 14px;
	}

	.hg_sec .hg_panel_all {
		padding: 12px 14px;
		font-size: 14px;
	}

	.hg_sec .hg_chips_label {
		flex: 0 0 100%;
		font-size: 15px;
	}

	.hg_sec .hg_chips_list {
		flex: 0 0 100%;
		gap: 8px;
	}

	.hg_sec .hg_chip {
		min-height: 38px;
		padding: 0 13px;
		font-size: 14px;
	}

	.hg_sec .hg_lawyer_more {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px;
		gap: 6px;
	}

	.hg_sec .hg_lawyer_more li a {
		min-height: 40px;
		font-size: 14.5px;
	}

	.hg_sec .hg_cred_name {
		font-size: 19px;
	}

	.hg_sec .hg_cred_row {
		gap: 10px;
		margin-top: 14px;
	}

	.hg_sec .hg_hero_points {
		gap: 6px 16px;
		font-size: 13.5px;
	}

	.hg_sec .hg_mx_pressbox {
		min-height: 336px;
	}

	.hg_sec .hg_mx_ctrl {
		padding-top: 16px;
	}

	.hg_sec.hg_office .hg_map_svg {
		max-width: min(100%, 420px);
	}

	.hg_sec.hg_office .hg_omap+.hg_final {
		margin-top: 22px;
		padding: 20px 18px;
	}
}

/* ~600: 1열 전환 */
@media screen and (max-width: 600px) {

	.hg_sec .hg_case_grid,
	.hg_sec .hg_more_grid {
		grid-template-columns: minmax(0, 1fr);
	}

	/* 변호사: 2열, 마지막 1명은 가운데 */
	.section.hg_lawyer .hg_lawyer_grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.section.hg_lawyer .hg_lawyer_card,
	.section.hg_lawyer .hg_lawyer_card:nth-child(4):nth-last-child(2),
	.section.hg_lawyer .hg_lawyer_card:nth-child(5):last-child {
		grid-column: auto;
	}

	.section.hg_lawyer .hg_lawyer_card:last-child:nth-child(odd) {
		grid-column: 1 / -1;
		width: calc(50% - 6px);
		justify-self: center;
	}

	.hg_sec .hg_case_thumb {
		aspect-ratio: 16 / 6.5;
	}

	.hg_sec .hg_stats_box {
		border-radius: 12px;
	}
}

/* ~560 */
@media screen and (max-width: 560px) {
	.hg_sec .hg_hero_kicker {
		margin-bottom: 14px;
	}

	.hg_sec .hg_hero_sub {
		margin-top: 12px;
		font-size: 14px;
		line-height: 1.7;
	}

	.hg_sec .hg_hero_points {
		margin-top: 18px;
	}

	.hg_sec .hg_stat {
		padding: 16px 18px;
	}

	.hg_sec .hg_panel_badge {
		font-size: 12px;
	}
}

/* ~520 */
@media screen and (max-width: 520px) {

	/* 배지가 한 줄에 다 안 들어가면 줄바꿈 허용 (기존엔 nowrap 이라 삐져나왔음) */
	.hg_sec .hg_panel .hg_panel_badge {
		white-space: normal;
		border-radius: 14px;
		line-height: 1.45;
		text-align: left;
	}

	.hg_sec .hg_panel_btn {
		width: 100%;
		justify-content: center;
	}

	.hg_sec .hg_hero_points {
		flex-direction: column;
		align-items: flex-start;
	}

	.hg_sec .hg_hero_points li {
		align-items: flex-start;
		line-height: 1.5;
	}

	.hg_sec .hg_hero_points i {
		margin-top: .3em;
	}

	.hg_sec.hg_office .hg_pin_city {
		font-size: 23px;
		stroke-width: 5px;
	}
}

/* ~480 */
@media screen and (max-width: 480px) {
	.hg_sec .hg_panel_name {
		font-size: 24px;
	}

	.hg_sec .hg_panel_desc {
		font-size: 14px;
		line-height: 1.7;
	}

	.hg_sec .hg_more_name {
		font-size: 17.5px;
	}

	.hg_sec .hg_more_desc {
		font-size: 13.5px;
	}

	.hg_sec .hg_case_result {
		font-size: 18.5px;
	}

	.hg_sec .hg_case_tit {
		font-size: 15.5px;
	}

	.hg_sec .hg_case_sum {
		font-size: 14px;
	}

	.hg_sec .hg_stat_label {
		font-size: 15px;
	}

	.hg_sec .hg_stat_num {
		font-size: 28px;
	}

	.hg_sec .hg_mx_src {
		flex-basis: 72px;
		font-size: 12px;
	}

	.hg_sec .hg_mx_tit {
		font-size: 15px;
	}

	.hg_sec .hg_mx_vtit {
		font-size: 16.5px;
	}

	.hg_sec .hg_mx_btn {
		width: 40px;
		height: 40px;
	}

	.hg_sec.hg_office .hg_oaddr_main {
		font-size: 14px;
	}

	.hg_sec.hg_office .hg_oaddr_sub {
		font-size: 12.5px;
	}

	.hg_sec.hg_office .hg_final_tit {
		font-size: 17px;
	}

	.hg_sec.hg_office .hg_final_sub {
		font-size: 13.5px;
	}

	.hg_sec.hg_office .hg_final_btn {
		min-height: 48px;
		padding: 0 10px;
		font-size: 15px;
	}

	.hg_sec.hg_office .hg_map_svg {
		max-width: 100%;
	}
}

/* ~430 */
@media screen and (max-width: 430px) {
	.section.hg_lawyer .hg_lp_info {
		padding: 12px 11px 14px;
		gap: 0 6px;
	}

	.section.hg_lawyer .hg_lp_role {
		font-size: 11.5px;
	}

	.section.hg_lawyer .hg_lp_name {
		font-size: 17px;
	}

	.section.hg_lawyer .hg_lp_tags {
		gap: 4px;
		margin-top: 9px;
	}

	.section.hg_lawyer .hg_lp_tag {
		padding: 4px 8px;
		font-size: 11.5px;
		border-radius: 6px;
	}

	.hg_sec .hg_cred_chips li {
		padding: 5px 12px;
		font-size: 14px;
	}

	.hg_sec .hg_cred_name {
		font-size: 18px;
	}
}

/* ~414 */
@media screen and (max-width: 414px) {
	.hg_sec .hg_mx_src {
		flex-basis: 68px;
		padding: 6px 3px;
		font-size: 11.5px;
	}

	.hg_sec .hg_mx_press a {
		gap: 10px;
		padding: 10px 2px;
	}

	.hg_sec .hg_mx_tit {
		font-size: 14.5px;
	}

	.hg_sec.hg_office .hg_pin_city {
		font-size: 25px;
	}
}

/* ~390 */
@media screen and (max-width: 390px) {
	.hg_sec .hg_col a {
		font-size: 13.5px;
		padding-left: 10px;
	}

	.hg_sec .hg_panel_side {
		padding: 20px var(--hg-pad);
	}

	.hg_sec .hg_stat {
		padding: 14px 16px;
	}

	.hg_sec .hg_hero_title {
		line-height: 1.42;
	}

	.hg_sec.hg_office .hg_ocard {
		padding: 16px 16px 16px 20px;
	}

	.hg_sec.hg_office .hg_ocard_name {
		font-size: 22px;
	}
}

/* ~375 */
@media screen and (max-width: 375px) {
	.hg_sec .hg_hero_kicker {
		font-size: 10px;
		letter-spacing: 2px;
	}

	.hg_sec .hg_hero_kicker::before {
		width: 28px;
	}

	.hg_sec .hg_btn {
		width: 100%;
		text-align: center;
	}

	.hg_sec .hg_mx_vsub {
		font-size: 13px;
	}
}

/* ~360 */
@media screen and (max-width: 360px) {
	.hg_sec .hg_chip {
		min-height: 36px;
		padding: 0 11px;
		font-size: 13.5px;
	}

	.hg_sec .hg_cred_row {
		flex-wrap: wrap;
		gap: 6px;
	}

	.hg_sec .hg_cred_label {
		flex-basis: 100%;
	}

	.hg_sec.hg_office .hg_final_btns {
		grid-template-columns: minmax(0, 1fr);
	}

	.hg_sec.hg_office .hg_pin_city {
		font-size: 27px;
	}
}

/* ~340: 아주 좁은 폰 */
@media screen and (max-width: 340px) {
	.hg_sec .hg_cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.section.hg_lawyer .hg_lawyer_grid {
		gap: 8px;
	}

	.section.hg_lawyer .hg_lawyer_card:last-child:nth-child(odd) {
		width: calc(50% - 4px);
	}

	.hg_sec.hg_office .hg_ocard {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "addr" "btn";
	}

	.hg_sec.hg_office .hg_ocard_btn {
		width: 100%;
		justify-content: center;
	}

	.hg_sec .hg_mx_src {
		flex-basis: 62px;
		font-size: 11px;
	}
}

/* ~320 */
@media screen and (max-width: 320px) {
	.hg_sec .hg_hero_title {
		letter-spacing: -.045em;
	}

	.hg_sec .hg_panel_name {
		font-size: 22px;
	}

	.hg_sec .hg_panel .hg_panel_badge {
		font-size: 11px;
	}

	.section.hg_lawyer .hg_lp_name {
		font-size: 16px;
	}

	.section.hg_lawyer .hg_lp_role {
		font-size: 11px;
	}

	.section.hg_lawyer .hg_lp_tag {
		font-size: 11px;
		padding: 4px 7px;
	}

	.hg_sec .hg_cred_name {
		font-size: 17px;
	}

	.hg_sec .hg_final_tit,
	.hg_sec.hg_office .hg_final_tit {
		font-size: 16px;
	}
}

/* ~280 (폴더블 접힘 화면 등) */
@media screen and (max-width: 280px) {
	.hg_sec .hg_hero_points {
		font-size: 12.5px;
	}

	.hg_sec .hg_btn {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 14px;
	}

	.section.hg_lawyer .hg_lp_tag {
		white-space: normal;
	}

	.hg_sec .hg_mx_src {
		flex-basis: 56px;
		font-size: 10.5px;
	}
}

/* 11-4. 가로 모드 폰 · 태블릿 (높이가 낮을 때) ---------------------------------- */
@media screen and (max-height: 480px) and (orientation: landscape) {
	.section.hg_sec {
		--hg-sec-y: 40px;
		--hg-head-mb: 22px;
	}

	.hg_sec .hg_hero_title {
		font-size: clamp(26px, 5vh + 6px, 34px);
	}
}

/* 11-5. 터치 기기: 누르기 쉬운 크기 -------------------------------------------- */
@media (pointer: coarse) {
	.hg_sec .hg_chip {
		min-height: 44px;
	}

	.hg_sec .hg_col a {
		padding-top: 9px;
		padding-bottom: 9px;
	}

	.hg_sec .hg_lawyer_more li a {
		min-height: 44px;
	}

	.hg_sec .hg_mx_btn {
		width: 44px;
		height: 44px;
	}

	.hg_sec .hg_mx_dots .swiper-pagination-bullet {
		position: relative;
	}

	.hg_sec .hg_mx_dots .swiper-pagination-bullet::after {
		content: "";
		position: absolute;
		inset: -10px -4px;
	}

	.hg_sec.hg_office .hg_ocard_btn,
	.hg_sec.hg_office .hg_final_btn {
		min-height: 48px;
	}
}


/* ==========================================================================
   10-4. 히어로 텍스트 모션
   - 제목: 글자 하나하나가 아래에서 떠오르며 또렷해짐 (hg_scroll_fx.js 가 글자를 .hg_ch 로 나눔)
   - 상단 라벨: 자간이 모이며 등장 / 서브 문구: 왼쪽에서 오른쪽으로 펼쳐짐 / 체크 목록: 그 뒤를 이어 차례로
   - 전부 <html class="hg-fx"> 일 때만 적용되므로 모션 줄이기 설정에서는 그대로 보입니다
   - 제목은 글자 분할 전에는 잠깐 숨겨 두고, JS 가 늦거나 실패해도 1.2초 뒤에는 CSS 만으로 나타납니다
   ========================================================================== */
@keyframes hg_char_in {
	from {
		opacity: 0;
		transform: translate3d(0, .6em, 0) rotate(5deg);
		filter: blur(8px);
	}
}

@keyframes hg_kicker_in {
	from {
		opacity: 0;
		letter-spacing: .6em;
		transform: translate3d(0, 14px, 0);
	}
}

@keyframes hg_text_wipe {
	from {
		opacity: 0;
		clip-path: inset(0 100% 0 0);
		transform: translate3d(-14px, 0, 0);
	}

	to {
		opacity: 1;
		clip-path: inset(0 0 0 0);
		transform: none;
	}
}

@keyframes hg_unhide {
	to {
		opacity: 1;
	}
}

/* 분할된 글자: 단어 단위로 묶어 줄바꿈은 기존처럼 띄어쓰기에서만 일어나게 함 */
.hg_hero_title .hg_wd {
	display: inline-block;
	white-space: nowrap;
}

.hg_hero_title .hg_ch {
	display: inline-block;
}

.hg-fx .hg_hero_title:not(.is-split) {
	opacity: 0;
	animation: hg_unhide 0s linear 1.2s forwards;
}

.hg-fx .hg_hero_title.is-split {
	animation: none;
}

.hg-fx .hg_hero_title .hg_ch {
	animation: hg_char_in .85s var(--hg-ease) calc(.3s + var(--ci, 0) * 42ms) backwards;
}

.hg-fx .hg_hero_kicker {
	white-space: nowrap;
	animation: hg_kicker_in 1.1s var(--hg-ease) .05s backwards;
}

.hg-fx .hg_hero_sub {
	animation: hg_text_wipe 1.1s var(--hg-ease) .95s backwards;
}

.hg-fx .hg_hero_points li {
	animation-delay: calc(1.3s + var(--n, 0) * .12s);
}

.hg-fx .hg_hero_points i {
	animation-delay: calc(1.5s + var(--n, 0) * .12s);
}


/* ==========================================================================
   10-5. 모바일·태블릿 히어로 여백 정리
   - 1024px 이하에서 히어로가 세로 배치가 되면, 원본의 flex-basis(520px)가 '높이'로 적용되어
     문구 아래에 약 290px 의 빈 공간(배경 사진만 보이는 구간)이 생겼습니다.
   - 문구 높이만큼만 차지하도록 바꿔, 핵심 수치 카드가 문구 바로 아래에서 이어집니다.
   ========================================================================== */
@media screen and (max-width: 1024px) {
	.hg_sec .hg_hero_copy {
		flex: 0 0 auto;
	}
}


/* 자격 칩 링크: 칩 전체가 클릭되도록 링크를 칩 크기로 늘림 */
.hg_cred_chips li {
	position: relative;
}

.hg_cred_chips li a {
	color: inherit;
	text-decoration: none;
}

.hg_cred_chips li a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 999px;
}

/* ===== 낮은 패널 (hg_panel_slim): 음주운전·교통사고 — 제목+버튼 / 링크 2줄 (2026-11-13) ===== */
.hg_sec .hg_panel.hg_panel_slim .hg_panel_side {
	gap: 12px;
	padding: 22px 28px;
	justify-content: center;
}
.hg_sec .hg_panel.hg_panel_slim .hg_panel_name {
	font-size: 24px;
}
.hg_sec .hg_panel.hg_panel_slim .hg_panel_btn {
	margin-top: 0;
	padding: 9px 18px;
	font-size: 14.5px;
}
.hg_sec .hg_panel.hg_panel_slim .hg_panel_main {
	justify-content: center;
	padding: 20px 28px;
}
.hg_sec .hg_panel.hg_panel_slim .hg_cols {
	row-gap: 4px;
}
@media screen and (max-width: 1024px) {
	/* 세로 배치로 바뀌는 화면: 제목과 버튼을 한 줄에 */
	.hg_sec .hg_panel.hg_panel_slim .hg_panel_side {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		padding: 18px 24px;
	}
	.hg_sec .hg_panel.hg_panel_slim .hg_panel_name {
		font-size: 22px;
	}
	.hg_sec .hg_panel.hg_panel_slim .hg_panel_btn {
		align-self: center;
	}
	.hg_sec .hg_panel.hg_panel_slim .hg_panel_main {
		padding: 16px 24px;
	}
}