@charset "utf-8";
body {
	word-break: keep-all;
	overflow-wrap: break-word;
}
#wrap {
	overflow-x: hidden;
}

/* main_visual */
.main_visual {
	background-color: #0054a3;
	aspect-ratio: 1 / 0.544;
	border-radius: 30px;
	position: relative;
	text-align: center;
}

/* sec01 ─ 행복 캔버스 피처드 */
.sec01_wrapper {
	display: flex;
	align-items: stretch;
	aspect-ratio: 1401 / 693; /* 전체 높이 고정 — 내부 전환 시 layout 이동 없음 */
}

.sec01_img {
	flex: 0 0 67%;
	overflow: hidden;
	border-radius: 30px 0 0 30px;
	position: relative;
}
.sec01_img__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.5s ease;
}
.sec01_img:hover .sec01_img__layer {
	transform: scale(1.04);
	transition:
		opacity 0.5s ease,
		transform 0.4s ease;
}

.sec01_panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	align-self: stretch;
}

.sec01_label {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}
.sec01_label .num {
	color: #ccc;
	font-size: clamp(14px, calc(10px + 0.6vw), 18px);
	font-weight: 600;
}
.sec01_label .cat {
	color: #eee;
	font-size: clamp(14px, calc(7px + 1vw), 20px);
	font-weight: 600;
}

.sec01_goto {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border: 1px solid #ccc;
	color: #fff !important;
	font-size: clamp(14px, calc(10px + 0.5vw), 16px);
	margin-top: 85px;
	width: fit-content;
}

/* 아이템 공통 */
.sec01_item {
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	cursor: pointer;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 0;
	min-height: 100px;
	transition:
		flex-grow 0.4s ease,
		background-color 0.35s ease,
		border-color 0.35s ease;
}
.sec01_item:first-child {
	border-top: 1px solid #ccc;
	border-radius: 0 30px 0 0;
}
.sec01_item:last-child {
	border-radius: 0 0 30px 0;
}

.sec01_h2_link {
	display: block;
}

/* 확장 */
.sec01_expanded {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 20px;
}
.sec01_expanded .tit {
	font-size: clamp(22px, calc(-10px + 4.2vw), 44px);
	font-weight: 700;
	color: #fff;
	margin: 24px 0 0;
}
/* 활성 상태 */
.sec01_item.is-active {
	flex-grow: 1;
	background: #0054a3;
	border-color: #0054a3;
}
.sec01_item.is-active .sec01_expanded {
	padding: 0 35px;
}
.sec01_item.is-active .sec01_h2_link,
.sec01_item.is-active .sec01_goto {
	animation: sec01FadeIn 0.3s ease 0.3s both;
}

@keyframes sec01FadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* 비활성 상태 — 제목·버튼 숨김, 레이블 색상 보정 */
.sec01_item:not(.is-active) .sec01_h2_link,
.sec01_item:not(.is-active) .sec01_goto {
	display: none;
}
.sec01_item:not(.is-active) .sec01_label {
	margin-bottom: 0;
}
.sec01_item:not(.is-active) .sec01_label .cat {
	color: #666;
}

@media all and (max-width: 1459px) {
	.sec01_goto {
		margin-top: 30px;
	}
}

/* 태블릿 — 이미지 상단 + 하단 2열 (파란 패널 좌 / 흰 리스트 우) */
@media all and (max-width: 1000px) {
	.sec01_wrapper {
		flex-direction: column;
		aspect-ratio: auto;
	}

	.sec01_img {
		flex: none;
		aspect-ratio: 720 / 405;
		border-radius: 30px 30px 0 0;
	}

	.sec01_panel {
		display: grid;
		grid-template-columns: 68.5% 31.5%;
		grid-template-rows: 95px 95px;
	}

	/* 모든 아이템 border-radius 초기화 */
	.sec01_item:first-child {
		border-top: none;
		border-radius: 0;
	}
	.sec01_item:last-child {
		border-radius: 0;
	}

	.sec01_item {
		min-height: 0;
	}

	/* 활성 아이템 — 왼쪽 열 전체 차지 */
	.sec01_item.is-active {
		grid-column: 1;
		grid-row: 1 / 3;
		flex: none;
		border-radius: 0 0 0 30px;
	}

	/* 비활성 아이템 — 오른쪽 열 */
	.sec01_item:not(.is-active) {
		grid-column: 2;
	}
	.sec01_item:last-child:not(.is-active) {
		border-radius: 0 0 30px 0;
	}

	/* 제목 28px, 버튼 숨김 */
	.sec01_expanded .tit {
		margin-bottom: 0;
	}
	.sec01_goto {
		display: none;
	}

	.sec01_item.is-active .sec01_expanded {
		padding: 24px 24px;
	}
}

/* 모바일 — 완전 세로 스택 */
@media all and (max-width: 768px) {
	.sec01_img {
		aspect-ratio: 16 / 9;
		border-radius: 20px 20px 0 0;
	}

	.sec01_panel {
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}

	.sec01_item {
		flex: none;
		min-height: 0;
		border-radius: 0;
		height: 50px;
		overflow: hidden;
		transition:
			height 0.4s ease,
			background-color 0.2s ease,
			border-color 0.2s ease;
	}
	.sec01_item:first-child {
		border-top: none;
		border-radius: 0;
	}
	.sec01_item:last-child {
		border-radius: 0 0 20px 20px;
	}

	.sec01_item.is-active {
		flex: none;
		height: 110px;
		border-radius: 0;
		transition:
			height 0.4s ease,
			background-color 0.2s ease,
			border-color 0.2s ease;
	}
	.sec01_item:last-child.is-active {
		border-radius: 0 0 20px 20px;
	}
	.sec01_item:last-child:not(.is-active) {
		border-radius: 0 0 20px 20px;
	}
	.sec01_item.is-active .sec01_expanded {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 20px;
	}
	.sec01_expanded .tit {
		margin: 4px 0 0;
	}
	.sec01_goto {
		display: inline-flex;
		flex-shrink: 0;
		align-self: center;
		font-size: clamp(12px, calc(9px + 0.5vw), 14px);
		padding: 5px 12px;
		margin-top: 0;
		border-color: rgba(255, 255, 255, 0.5);
	}
	.sec01_expanded .tit br {
		display: none;
	}
}

/* sec02 — nhappy (탭 + Swiper 리뉴얼) */
.section02.nhappy {
	position: relative;
	padding-top: 60px;
	padding-bottom: 60px;
}
.section02.nhappy::before {
	content: "";
	position: absolute;
	inset: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	background: #ddefff;
	z-index: 0;
}
.section02.nhappy > * {
	position: relative;
	z-index: 1;
}

/* 탭 */
.nh_tabs {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin-bottom: 40px;
}
.nh_tab {
	font-size: clamp(22px, calc(10px + 2.5vw), 44px);
	font-weight: 700;
	color: #ccc;
	background: none;
	border: none;
	border-bottom: 3px solid transparent;
	padding-bottom: 6px;
	cursor: pointer;
	transition: color 0.2s ease;
}
.nh_tab.is-active {
	color: #0054a3;
	border-bottom-color: #0054a3;
}

/* 패널 */
.nh_panel {
	display: none;
	align-items: center;
	gap: 20px;
}
.nh_panel.is-active {
	display: flex;
}

/* 카드 */
.nh_panel > a {
	display: block;
	width: calc(50% - 10px);
}
.nh_panel > a:hover .nh_card_img img {
	transform: scale(1.04);
}
.nh_card_img {
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 512 / 382;
	margin-bottom: 16px;
}
.nh_card_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
.nh_card_cat {
	font-size: clamp(14px, calc(10px + 0.8vw), 18px);
	font-weight: 400;
	color: #222;
	margin-bottom: 10px;
}
.nh_panel .tit {
	font-size: clamp(20px, calc(17px + 0.6vw), 24px);
	font-weight: 600;
	color: #222;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 반응형 */
@media all and (max-width: 999px) {
	.section02.nhappy {
		padding: 50px 0;
	}
	.nh_tabs {
		gap: 30px;
		margin-bottom: 30px;
	}
}
@media all and (max-width: 768px) {
	.section02.nhappy {
		padding: 30px 0;
	}
	.nh_tabs {
		gap: 20px;
	}
	.nh_card_img {
		border-radius: 15px;
	}
}
@media all and (max-width: 499px) {
	.nh_panel.is-active {
		flex-direction: column;
		gap: 12px;
	}
	.nh_panel > a {
		width: auto;
	}
}

/* 2024.11.08 수정 */
.con {
	position: relative;
	padding: 100px 0;
}

@media all and (max-width: 1459px) {
	.con {
		padding: 50px 0;
	}
}

@media all and (max-width: 768px) {
	.con {
		padding: 30px 0;
	}
}

/* 2024.11.12 수정 */
.main_visual .mv_slide {
	width: 100%;
	height: 100%;
}
.main_visual .mv_slide .swiper-pagination {
	bottom: 60px;
	left: 90px;
	width: auto;
	text-align: left;
}
.main_visual .mv_slide .swiper-pagination-bullet {
	width: 44px;
	height: 7px;
	background-color: rgba(255, 255, 255, 0.3);
	opacity: 1;
	border-radius: unset;
}
.main_visual .mv_slide .swiper-pagination-bullet-active {
	background-color: rgba(255, 255, 255, 0.3);
	position: relative;
	overflow: hidden;
}
.main_visual .mv_slide .swiper-pagination-bullet-active::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 0;
	background-color: #d9d9d9;
	animation: mvBulletProgress 4s linear forwards;
}
@keyframes mvBulletProgress {
	to {
		width: 100%;
	}
}

@media all and (max-width: 1024px) {
	.main_visual .mv_slide .swiper-pagination {
		bottom: 50px;
		left: 60px;
	}
	.main_visual .mv_slide .swiper-pagination-bullet {
		width: 30px;
		height: 5px;
	}
}

@media all and (max-width: 768px) {
	.main_visual {
		aspect-ratio: 1 / 0.75;
	}
}

@media all and (max-width: 700px) {
	.main_visual .mv_slide .swiper-pagination-bullet {
		width: 20px;
		height: 5px;
	}
	.main_visual .mv_slide .swiper-pagination {
		bottom: 8%;
		left: 4.4%;
	}
	.mobile_only {
		display: block;
	}
}
@media all and (max-width: 1023px) {
	body {
		word-break: normal;
		overflow-wrap: normal;
	}
}
/* END 2024.11.12 수정 */

/* sec03 — fage 리뉴얼 (HF PLAY + HF CARE) */
.main .section03.fage::after {
	display: none;
}

.fage_block {
	margin-bottom: 80px;
}
.fage_block:last-child {
	margin-bottom: 0;
}

.fage_title {
	font-size: clamp(28px, calc(14px + 2.5vw), 44px);
	font-weight: 700;
	color: #0054a3;
	text-align: center;
	margin-bottom: 40px;
}

/* fage Swiper 공통 래퍼 */
.fage_slider_wrap {
	display: flex;
	align-items: center;
	gap: 20px;
}

.fage_swiper {
	flex: 1;
	min-width: 0;
	overflow: hidden;
}

/* HF PLAY — 정사각 이미지 오버레이 카드 */
.fage_play_card {
	display: block;
	position: relative;
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	width: 100%;
}

.fage_play_card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.fage_play_card:hover > img {
	transform: scale(1.04);
}

.fage_play_overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(102, 102, 102, 0) 28%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.fage_play_text {
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	z-index: 1;
	transform: translateY(6px);
	transition: transform 0.3s ease;
}
.fage_play_card:hover .fage_play_text {
	transform: translateY(0);
}

/* HF CARE — 이미지+하단 텍스트 카드 */
.fage_care_card {
	display: block;
	width: 100%;
}

.fage_care_img {
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 453 / 337;
	margin-bottom: 24px;
}

.fage_care_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.fage_care_card:hover .fage_care_img img {
	transform: scale(1.04);
}

/* 공통 텍스트 */
.fage_card_cat {
	font-size: clamp(14px, calc(11px + 0.4vw), 16px);
	font-weight: 400;
	margin-bottom: 10px;
}

.fage_play_text .fage_card_cat {
	color: #eee;
}
.fage_care_card .fage_card_cat {
	color: #222;
}

.fage_block .tit {
	font-size: clamp(20px, calc(17px + 0.6vw), 24px);
	font-weight: 600;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	white-space: normal;
	max-height: 58px;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.fage_play_text .tit {
	color: #fff;
}
.fage_care_card .tit {
	color: #222;
}

/* 반응형 */
@media all and (max-width: 768px) {
	.fage_block {
		margin-bottom: 28px;
	}
	.fage_play_card {
		border-radius: 15px;
	}
	.fage_title {
		margin-bottom: 20px;
		text-align: left;
	}

	.fage_play_text {
		bottom: 24px;
		left: 24px;
		right: 24px;
	}
}

@media all and (max-width: 499px) {
	.fage_care_img {
		margin-bottom: 16px;
	}
}

/* sec04 — HF 소식 (세로형 카드 2열) */
.section04.hfnews {
	padding-bottom: 0;
}
.section04.hfnews .inner {
	max-width: 926px;
}

.hfnews_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	position: relative;
	padding-bottom: 100px;
	max-width: 926px;
	margin: 0 auto;
}

.hfnews_grid::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	height: 75%;
	background-color: #0054a3;
	z-index: 0;
}

.hfnews_card {
	display: block;
	position: relative;
	z-index: 1;
	border-radius: 30px;
	overflow: hidden;
	aspect-ratio: 3 / 4;
}

.hfnews_card > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.hfnews_card:hover > img {
	transform: scale(1.04);
}

.hfnews_overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(102, 102, 102, 0) 48%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%);
}

.hfnews_text {
	position: absolute;
	bottom: 30px;
	left: 30px;
	right: 30px;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hfnews_badge {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 22px;
	font-size: clamp(14px, calc(10px + 0.5vw), 16px);
	font-weight: 600;
	color: #fff;
	width: fit-content;
}

.hfnews_text .tit {
	font-size: clamp(18px, calc(12px + 1vw), 24px);
	font-weight: 600;
	color: #fff;
}
@media all and (max-width: 1459px) {
	.hfnews_grid {
		padding-bottom: 50px;
	}
}

@media all and (max-width: 768px) {
	.hfnews_grid {
		padding-bottom: 30px;
	}
	.hfnews_card {
		border-radius: 10px;
	}
	.hfnews_text {
		bottom: 15px;
		left: 15px;
		right: 15px;
	}
	.hfnews_badge {
		padding: 5px 7px;
	}
}

@media all and (max-width: 399px) {
	.hfnews_grid {
		grid-template-columns: 1fr;
	}
}

/* ─── 애니메이션 ──────────────────────────────── */

/* 스크롤 페이드인 */
.fade-up {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.65s ease,
		transform 0.65s ease;
}
.fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 탭 패널 진입 fade */
@keyframes nhPanelFade {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.nh_panel.is-active {
	animation: nhPanelFade 0.35s ease both;
}

/* ── 메인 비주얼 Ken Burns ── */
@keyframes mvKenBurns {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* ── section01 비활성 아이템 hover ── */
.sec01_item:not(.is-active):hover {
	background: #f0f7ff;
	border-color: #b3d4f0;
}
.sec01_item:not(.is-active):hover .sec01_label .num,
.sec01_item:not(.is-active):hover .sec01_label .cat {
	color: #0054a3;
}

/* ── HF 소식 텍스트 lift ── */
.hfnews_text {
	transition: transform 0.3s ease;
}
.hfnews_card:hover .hfnews_text {
	transform: translateY(-6px);
}

/* ── 탭 슬라이딩 인디케이터 ── */
.nh_tabs {
	position: relative;
}
.nh_tab.is-active {
	border-bottom-color: transparent;
}
.nh_tab_indicator {
	position: absolute;
	bottom: 0;
	height: 3px;
	background: #0054a3;
	transition: left 0.28s ease, width 0.28s ease;
	pointer-events: none;
}