@charset "utf-8";
/* =============================================================
   20261020 리뉴얼 - 좌측 사이드바 레이아웃 (참고: hyundai.vake.io)

   · 색상/내용은 그대로, 배치만 바꾼다.
     네이비 #00306c / 블루 #1086ff
   · 헤더가 들어간 페이지에만 적용된다.
     header.jsp 가 body 에 .has_side 를 붙인다.
     (embed iframe, 로그인 화면 등 헤더 없는 페이지는 기존 그대로)
   · 1024px 이상 : 상단바 76px + 좌측 고정 사이드바 240px
     1023px 이하 : 햄버거 + 로고(왼쪽) / 버튼(오른쪽) + 왼쪽 드로어 (사이드바와 같은 모양)
   · 원복 : /_backup_20261020_renew/ 의 index.jsp, include/header.jsp,
            include/headHtml.jsp 를 되돌리고 이 파일을 지운다.
   ============================================================= */

/* ---------- 공통 : 푸터를 화면 맨 아래에 ----------
   내용이 짧은 페이지(메인 등)에서 푸터 아래로 흰 여백이 남아 화면이 잘려 보였다.
   헤더~푸터를 감싸는 요소(main, 일부 마이페이지는 #wrap)를 화면 높이 이상으로 두고
   푸터를 맨 아래로 민다. 내용이 긴 페이지는 변화 없음. */
body.has_side > main,
body.has_side > #wrap {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body.has_side > main > #footer,
body.has_side > #wrap > #footer {
	margin-top: auto;
}

/* ---------- 공통 : 사이드바 내용 ---------- */
#header_menu .side_wrap {
	position: relative;
	min-height: 100%;
	background-color: #00306c;
}

.side_profile {
	padding: 22px 18px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.side_profile .side_tit {
	display: flex;
	align-items: center;
	gap: 12px;
	color: #fff;
}
.side_profile .side_icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background-color: #1086ff;
	color: #fff;
	font-size: 20px;
	font-weight: 800;
}
.side_profile .side_name {
	display: block;
	min-width: 0;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.3;
	color: #fff;
}
.side_profile .side_name em {
	display: block;
	margin-top: 2px;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255,255,255,0.6);
}
.side_profile .side_cta {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	margin-top: 16px;
	border-radius: 8px;
	background-color: #fff;
	color: #00306c;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.04em;
	transition: all 0.2s ease;
}
.side_profile .side_cta:hover {
	background-color: #1086ff;
	color: #fff;
}

#header_menu .header_menu_box {
	min-height: 0;
	padding: 10px 0 30px;
	background-color: transparent;
}
#header_menu .header_menu_box > li > ul {
	display: block;
	padding: 0;
}

/* 메뉴 한 줄 (HOME / 소개 / 하위메뉴) */
#header_menu .header_menu_box > li.side_item > a,
#header_menu .header_menu_box > li > ul > li > a {
	display: block;
	width: 100%;
	padding: 12px 18px;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.4;
	color: rgba(255,255,255,0.88);
	text-align: left;
	word-break: keep-all;
	box-sizing: border-box;
	transition: background-color 0.2s ease, color 0.2s ease;
}
#header_menu .header_menu_box > li.side_item > a:hover,
#header_menu .header_menu_box > li > ul > li > a:hover {
	background-color: rgba(255,255,255,0.08);
	color: #fff;
}
#header_menu .header_menu_box a.on {
	background-color: rgba(255,255,255,0.14) !important;
	box-shadow: inset 4px 0 0 #1086ff;
	color: #fff !important;
}

/* 그룹 제목 (활동신청 관리 / 커뮤니티) */
#header_menu .header_menu_box > li.side_group {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
#header_menu .header_menu_box > li.side_group > a {
	display: block;
	width: 100%;
	padding: 10px 18px 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: rgba(255,255,255,0.5);
	text-align: left;
	box-sizing: border-box;
}
#header_menu .header_menu_box > li.side_group > a[href="javascript:;"] {
	cursor: default;
}
#header_menu .header_menu_box > li.side_group > a:not([href="javascript:;"]):hover {
	color: #fff;
}


/* ---------- PC (1024px 이상) : 상단바 + 고정 사이드바 ---------- */
@media all and (min-width:1024px) {
	body.has_side {
		max-width: none;
		margin: 0;
		padding: 76px 0 0 240px;
		background-color: #fff;
	}
	/* 상단바(76px)를 뺀 높이 */
	body.has_side > main,
	body.has_side > #wrap {
		min-height: calc(100vh - 76px);
	}

	/* 하위 페이지 본문 가운데 정렬 (20261020)
	   content.css 의 .con{max-width:1024px} 는 가운데 정렬(margin auto)이 없어
	   사이드바 오른쪽 본문 영역에서 왼쪽으로 쏠렸다. 푸터 글과 같은 축에 맞춘다. */
	body.has_side .con {
		width: 100%;			/* main 이 flex(column) 이라 margin auto 만 주면 내용 폭으로 줄어든다 */
		margin-left: auto;
		margin-right: auto;
	}

	/* 본문 폭 1024px → 1200px (20261020). 사이드바 옆 넓은 화면에서 목록이 너무 좁아 보였다.
	   (.inner 는 화면의 93.75% 라 좁은 PC 에서는 그대로 줄어든다) */
	body.has_side .con,
	body.has_side .con > .inner {
		max-width: 1200px;
	}

	/* 상단바 (20261020 로고 키움 : 64px/로고 26px → 76px/로고 38px) */
	body.has_side #header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 76px;
		background-color: #fff;
		border-bottom: 1px solid #e6ebf1;
		z-index: 100;
	}
	body.has_side #header .h_inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		width: 100%;
		max-width: none;
		height: 100%;
		padding: 0 24px;
	}
	body.has_side #header .h_left {
		display: none;
	}
	body.has_side #header .h_inner .logo {
		max-width: none;
		text-align: left;
	}
	body.has_side #header .h_inner .logo img {
		width: auto;
		height: 38px;
	}
	body.has_side #header .h_util {
		gap: 8px;
	}
	body.has_side #header .h_util .h_util_btn {
		height: 40px;
		padding: 0 18px;
		border-width: 1px;
		border-radius: 8px;
		font-size: 15px;
		font-weight: 700;
	}

	/* 사이드바 */
	body.has_side #header_menu {
		display: block !important;		/* 모바일에서 slideToggle 이 남긴 인라인 display 무시 */
		position: fixed;
		top: 76px;
		left: 0;
		bottom: 0;
		width: 240px;
		height: auto;
		overflow-y: auto;
		background-color: #00306c;
		visibility: visible;
		z-index: 99;
		scrollbar-width: thin;
		scrollbar-color: rgba(255,255,255,0.25) transparent;
	}
	body.has_side #header_menu .header_bg {
		display: none !important;
	}

	/* 푸터 : 본문 폭 안에서 조금 가볍게 */
	body.has_side #footer {
		padding: 56px 0;
	}
	body.has_side #footer .f_logo img {
		height: 40px;
		width: auto;
	}
	body.has_side #footer .f_alt {
		margin: 24px 0;
		font-size: 15px;
		line-height: 2em;
	}
	body.has_side #footer .f_copy {
		font-size: 13px;
	}
}


/* ---------- 태블릿/모바일 (1023px 이하) : 왼쪽 드로어 ----------
   custom.css 의 900px 이하 드로어를 1023px 까지 넓히고 사이드바와 같은 색으로 맞춘다. */
@media all and (max-width:1023px) {
	/* 20261021 - 스크롤해도 상단 메뉴바 고정. 헤더 높이만큼 본문을 내린다 (드로어도 top:100px 기준) */
	body.has_side {
		padding-top: 100px;
	}
	body.has_side #header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 100px;
		z-index: 1000;
		background-color: #fff;
		box-shadow: 0 1px 0 rgba(0,0,0,0.06);
	}
	body.has_side #header_menu {
		z-index: 999;
	}

	/* 20261021 - 페이지 안의 탭(마이페이지 탭, 상세 '활동상세' 탭)은 고정 헤더 바로 아래에 붙는다 */
	body.has_side .com_tab_flex_box02.my_tab {
		position: sticky;
		top: 110px;
		z-index: 50;
		box-shadow: 0 0 0 10px #fff;
	}
	body.has_side .dt_tab {
		position: sticky;
		top: 100px;
		z-index: 50;
		background-color: #fff;
	}

	/* 20261020 - 햄버거(왼쪽) 바로 옆에 로고(크게), 버튼은 오른쪽 끝.
	   기존 grid(1fr auto 1fr)는 로고를 가운데 두므로 flex 로 바꾼다. */
	body.has_side #header .h_inner {
		display: flex;
		align-items: center;
		gap: 18px;
	}
	body.has_side #header .h_inner .logo {
		flex: 0 1 auto;
		max-width: 300px;
		text-align: left;
	}
	body.has_side #header .h_util {
		margin-left: auto;
	}

	body.has_side #header_menu {
		display: block;
		position: fixed;
		top: 100px;
		left: -100%;
		width: 45%;
		min-width: 240px;
		max-width: 320px;
		height: calc(100% - 100px);
		overflow-y: auto;
		background-color: #00306c;
		visibility: hidden;
		transition: left 0.3s ease, visibility 0s linear 0.3s;
	}
	body.has_side #header_menu.drawer_open {
		left: 0;
		visibility: visible;
		transition: left 0.3s ease, visibility 0s;
	}
	body.has_side #header_menu .header_bg {
		display: none;
	}
	body.has_side #header_menu.drawer_open .header_bg {
		display: block;
		top: 100px;
		height: calc(100% - 100px);
	}

	/* 글자는 기존 모바일 요청 크기(20261012) 유지 */
	#header_menu .header_menu_box > li.side_item > a,
	#header_menu .header_menu_box > li > ul > li > a {
		font-size: 18px;
		padding: 13px 18px;
	}
	#header_menu .header_menu_box > li.side_group > a {
		font-size: 15px;
	}
}


/* 좁은 화면 로고 폭 (기존 180px/110px → 키움. 버튼 2개 + 햄버거와 한 줄에 들어가는 폭) */
@media all and (max-width:700px) {
	body.has_side #header .h_inner .logo {
		max-width: 230px;
	}
}
@media all and (max-width:480px) {
	body.has_side #header .h_inner {
		gap: 10px;
	}
	body.has_side #header .h_inner .logo {
		max-width: 175px;
	}
}


/* ---------- 메인 : 배너 한 장 (참고 사이트 홈과 같은 구성) ---------- */
.main .main_hero {
	background-color: #fff;
	/* 화면이 배너보다 길면 남는 높이를 배너 영역이 차지하고 배너는 아래(푸터 위)에 붙인다.
	   배너 그림이 아래쪽이 잘린 인물이라 푸터 위에 서 있어야 자연스럽다. */
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.main .main_hero .main_banner_box {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.main .main_hero .mv.main_first_mv,
.main .main_hero .mv.main_first_mv img {
	border-radius: 0;
}


/* ---------- 봉사활동 상세 (gonggo/detail.jsp 의 .dt_) ----------
   참고 사이트 상품 상세와 같은 구성 : 사진(좌) + 정보(우) → [활동상세] 탭 → 본문(길면 더 보기) */
.blind {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.dt_wrap {
	max-width: 1280px;	/* 좌우 여백 40px 빼고 1200px : 다른 하위 페이지 본문 폭과 같게 */
	margin: 0 auto;
	padding: 48px 40px 96px;
	box-sizing: border-box;
	color: #24272a;
}
.dt_top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* 사진 */
.dt_main_img {
	aspect-ratio: 1 / 1;
	border-radius: 16px;
	overflow: hidden;
	background-color: #f1f4f8;
	line-height: 0;
}
.dt_main_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dt_thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
}
.dt_thumbs button {
	display: block;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}
.dt_thumbs button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.dt_thumbs button:hover,
.dt_thumbs button.on {
	opacity: 1;
}
.dt_thumbs button.on {
	border-color: #00306c;
}

/* 정보 */
.dt_cate {
	display: inline-block;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #24272a;
}
.dt_cate:hover {
	color: #1086ff;
}
.dt_small {
	margin-top: 14px;
	font-size: 16px;
	color: #888;
	letter-spacing: -0.04em;
}
.dt_tit {
	margin: 10px 0 0;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.4;
	color: #24272a;
	word-break: keep-all;
}
.dt_views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 18px;
	font-size: 14px;
	color: #9a9c9e;
}
.dt_views svg {
	width: 16px;
	height: 16px;
}
.dt_headline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-top: 16px;
	padding: 20px 0;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
}
.dt_headline .lbl {
	font-size: 15px;
	color: #9a9c9e;
}
.dt_headline strong {
	font-size: 30px;
	font-weight: 800;
	color: #24272a;
}
.dt_headline strong small {
	margin-left: 2px;
	font-size: 18px;
	font-weight: 700;
	color: #9a9c9e;
}
.dt_rows {
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid #e9ecef;
}
.dt_rows > div {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 12px;
	padding: 7px 0;
	font-size: 16px;
	line-height: 1.55;
	letter-spacing: -0.02em;
}
.dt_rows dt {
	color: #9a9c9e;
}
.dt_rows dd {
	margin: 0;
	color: #24272a;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.dt_state_row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px 0;
	border-bottom: 1px solid #e9ecef;
}
.dt_state,
.dt_theme {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}
.dt_state {
	background-color: #eaf3ff;
	color: #1086ff;
}
.dt_state.end {
	background-color: rgba(251,41,66,0.12);
	color: #fb2942;
}
.dt_theme {
	background-color: #f1f4f8;
	color: #555;
	text-transform: uppercase;
}
.dt_theme.theme_earth		{ background-color: #e3f6ea; color: #0b9a47; }
.dt_theme.theme_hope		{ background-color: #ffebe7; color: #e0533c; }
.dt_theme.theme_mobility	{ background-color: #fff3cf; color: #b07d00; }
.dt_theme.theme_community	{ background-color: #eaf3ff; color: #1086ff; }
.dt_org {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 0;
	border-bottom: 1px solid #e9ecef;
	font-size: 15px;
	color: #24272a;
}
.dt_org_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: #00306c;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}
.dt_actions {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}
.dt_icon_btn {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 1px solid #d5dae0;
	border-radius: 8px;
	background-color: #fff;
	color: #24272a;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.dt_icon_btn svg {
	width: 22px;
	height: 22px;
}
.dt_icon_btn:hover {
	border-color: #00306c;
	color: #00306c;
}
.dt_apply_btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
	border-radius: 8px;
	background-color: #00306c;
	color: #fff !important;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.04em;
	transition: background-color 0.2s ease;
}
.dt_apply_btn:hover {
	background-color: #1086ff;
}
.dt_apply_btn.end,
.dt_apply_btn.end:hover {
	background-color: #c4c9d0;
	cursor: default;
}

/* 활동상세 탭 + 본문 */
.dt_tab {
	margin-top: 72px;
	border-bottom: 2px solid #00306c;
	text-align: center;
}
.dt_tab span {
	display: inline-block;
	padding: 14px 24px;
	font-size: 17px;
	font-weight: 800;
	color: #00306c;
}
.dt_body {
	padding-top: 40px;
}
.dt_contents {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.8;
	color: #333;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.dt_contents img {
	max-width: 100% !important;
	height: auto !important;
	border-radius: 12px;
}
.dt_contents p {
	margin: 0 0 10px;
}
.dt_contents.folded {
	max-height: 900px;
	overflow: hidden;
}
.dt_contents.folded::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 160px;
	background: linear-gradient(rgba(255,255,255,0), #fff);
}
.dt_more_btn {
	display: none;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	max-width: 900px;
	height: 52px;
	margin: 20px auto 0;
	border: 1px solid #d5dae0;
	border-radius: 8px;
	background-color: #fff;
	font-size: 16px;
	font-weight: 700;
	color: #24272a;
	cursor: pointer;
}
.dt_more_btn.on {
	display: flex;
}
.dt_more_btn svg {
	width: 18px;
	height: 18px;
}
.dt_more_btn:hover {
	border-color: #00306c;
	color: #00306c;
}

/* 이전 / 목록 / 다음 */
.dt_nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	margin-top: 64px;
	padding: 20px 0;
	border-top: 1px solid #e9ecef;
	border-bottom: 1px solid #e9ecef;
	font-size: 16px;
	font-weight: 700;
	color: #555;
}
.dt_nav a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.dt_nav a:hover {
	color: #00306c;
}
.dt_nav svg {
	width: 18px;
	height: 18px;
}
.dt_nav .next {
	justify-self: end;
}
.dt_nav .list {
	padding: 8px 22px;
	border: 1px solid #d5dae0;
	border-radius: 30px;
}

@media all and (max-width:1000px) {
	.dt_top {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}
/* 모바일 (viewport.js 가 480px 로 고정해 축소 표시하므로 글자는 크게) */
@media all and (max-width:700px) {
	.dt_wrap {
		padding: 20px 18px 72px;
	}
	.dt_main_img {
		border-radius: 14px;
	}
	.dt_tit {
		font-size: 26px;
	}
	.dt_cate,
	.dt_views,
	.dt_org,
	.dt_headline .lbl {
		font-size: 16px;
	}
	.dt_rows > div {
		grid-template-columns: 84px minmax(0, 1fr);
		font-size: 17px;
	}
	.dt_state,
	.dt_theme {
		font-size: 15px;
	}
	.dt_tab {
		margin-top: 52px;
	}
	.dt_contents {
		font-size: 17px;
	}
	.dt_nav {
		margin-top: 48px;
	}
}


/* ---------- H-봉사단 소개 (volunteer/index.jsp 의 .vi_) ----------
   소개(좌 글 / 우 사진) → 협력(분홍 띠) → 교육장(사진 3장) → 문의(네이비 띠) */
.vi_wrap {
	width: 100%;
	max-width: 1280px;	/* 좌우 여백 40px 빼고 1200px : 다른 하위 페이지 본문 폭과 같게 */
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;
}
.vi_sec_eyebrow {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: #1086ff;
	text-transform: uppercase;
}
.vi_sec_tit {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.35;
	color: #222;
	word-break: keep-all;
}
.vi_sec_desc {
	font-size: 18px;
	letter-spacing: -0.04em;
	line-height: 1.75;
	color: #555;
	word-break: keep-all;
}

/* 소개 */
.vi_hero {
	padding: 72px 0 88px;
}
.vi_hero_in {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	align-items: center;
	gap: 56px;
}
.vi_logo {
	margin: 0;
	line-height: 0;
}
.vi_logo img {
	width: 100%;
	max-width: 360px;
}
.vi_eyebrow {
	display: inline-block;
	margin-top: 32px;
	padding: 8px 16px;
	border-radius: 30px;
	background-color: #eaf3ff;
	color: #00306c;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.04em;
}
.vi_desc {
	margin-top: 18px;
	font-size: 18px;
	letter-spacing: -0.04em;
	line-height: 1.8;
	color: #555;
	word-break: keep-all;
}
.vi_btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}
.vi_btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0 28px;
	border: 2px solid #00306c;
	border-radius: 30px;
	background-color: #fff;
	color: #00306c;
	font-size: 17px;
	font-weight: 800;
	letter-spacing: -0.04em;
	transition: all 0.2s ease;
}
.vi_btn:hover {
	background-color: #f1f8ff;
}
.vi_btn.primary {
	border-color: #00306c;
	background-color: #00306c;
	color: #fff;
}
.vi_btn.primary:hover {
	border-color: #1086ff;
	background-color: #1086ff;
}
.vi_hero_img {
	border-radius: 28px;
	overflow: hidden;
	line-height: 0;
	box-shadow: 0 18px 40px rgba(0,48,108,0.14);
}
.vi_hero_img img {
	width: 100%;
	aspect-ratio: 944 / 500;
	object-fit: cover;
}

/* 띠 공통 */
.vi_band {
	padding: 88px 0;
}

/* 협력 : 옅은 블루 (사이트 안내박스 com_etc_box01 과 같은 #f1f8ff) */
.vi_partner {
	background-color: #f1f8ff;
	text-align: center;
}
.vi_partner .vi_sec_tit {
	margin-top: 10px;
}
.vi_partner_logo {
	margin: 36px auto 0;
	line-height: 0;
}
.vi_partner_logo img {
	width: 100%;
	max-width: 400px;
}
.vi_partner .vi_sec_desc {
	max-width: 640px;
	margin: 32px auto 0;
}

/* 교육장 */
.vi_place {
	padding: 96px 0;
	text-align: center;
}
.vi_sec_sub {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 12px;
	font-size: 18px;
	letter-spacing: -0.04em;
	color: #666;
	word-break: keep-all;
}
.vi_sec_sub svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	color: #1086ff;
}
.vi_place_grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 44px;
}
.vi_place_img {
	border-radius: 20px;
	overflow: hidden;
	line-height: 0;
	background-color: #f1f4f8;
}
.vi_place_img img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.vi_place_img:hover img {
	transform: scale(1.04);
}

/* 문의 : 옅은 블루 띠 + 흰 카드 (바로 아래 어두운 푸터와 구분) */
.vi_contact {
	background-color: #eef4fb;
}
.vi_contact_in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
}
.vi_contact .vi_sec_tit {
	color: #00306c;
}
.vi_contact_cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 440px;
}
.vi_contact_card {
	display: grid;
	grid-template-columns: 56px 1fr;
	grid-template-rows: auto auto;
	column-gap: 16px;
	align-items: center;
	padding: 20px 24px;
	border-radius: 18px;
	background-color: #fff;
	box-shadow: 0 6px 18px rgba(0,48,108,0.08);
	transition: transform 0.2s ease;
}
.vi_contact_card:hover {
	transform: translateY(-2px);
}
.vi_contact_card img {
	grid-row: 1 / 3;
	width: 56px;
	height: 56px;
}
.vi_contact_card .lbl {
	font-size: 15px;
	color: #888;
	letter-spacing: -0.04em;
}
.vi_contact_card .val {
	font-size: 22px;
	font-weight: 800;
	color: #00306c;
	letter-spacing: -0.02em;
	word-break: break-all;
}

/* 태블릿 */
@media all and (max-width:1000px) {
	.vi_hero_in {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}
	.vi_hero_txt {
		text-align: center;
	}
	.vi_logo img {
		margin: 0 auto;
	}
	.vi_btns {
		justify-content: center;
	}
	.vi_contact_in {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.vi_contact_cards {
		max-width: none;
	}
	.vi_contact_card {
		text-align: left;
	}
}

/* 모바일 (viewport.js 가 480px 로 고정해 축소 표시하므로 글자는 크게) */
@media all and (max-width:700px) {
	.vi_wrap {
		padding: 0 18px;
	}
	.vi_hero {
		padding: 40px 0 64px;
	}
	.vi_logo img {
		max-width: 300px;
	}
	.vi_desc,
	.vi_sec_desc,
	.vi_sec_sub {
		font-size: 18px;
	}
	.vi_sec_tit {
		font-size: 27px;
	}
	.vi_btns {
		flex-direction: column;
	}
	.vi_btn {
		height: 56px;
		font-size: 18px;
	}
	.vi_band,
	.vi_place {
		padding: 64px 0;
	}
	.vi_place_grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
		margin-top: 32px;
	}
	.vi_place_img img {
		aspect-ratio: 944 / 503;
	}
	.vi_contact_card .val {
		font-size: 21px;
	}
}


/* ---------- 마이페이지 탭 (mypage/sub_header.jsp 의 .my_tab) ----------
   옅은 회색 트랙 안에서 현재 탭만 네이비로 채운다 (사이드바와 같은 색).
   좁은 화면에서는 글자를 줄이지 않고 2열로 접는다 (가로 스크롤은 첫 탭이 잘려 보였다). */
.com_tab_flex_box02.my_tab {
	display: flex;
	gap: 6px;
	height: auto;
	margin: 40px 0 56px;
	padding: 6px;
	border-radius: 16px;
	background-color: #f1f4f8;
	box-shadow: none;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.04em;
	color: #666;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.com_tab_flex_box02.my_tab::-webkit-scrollbar {
	display: none;
}
.com_tab_flex_box02.my_tab a {
	flex: 1 0 auto;
	min-width: 0;
	height: 54px;
	padding: 0 22px;
	border-radius: 12px;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.com_tab_flex_box02.my_tab a:hover {
	background-color: #fff;
	color: #00306c;
}
.com_tab_flex_box02.my_tab a.active {
	border-radius: 12px;
	background-color: #00306c;
	color: #fff;
	box-shadow: 0 4px 12px rgba(0,48,108,0.22);
}

@media all and (max-width:700px) {
	.com_tab_flex_box02.my_tab {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin: 30px 0 44px;
		padding: 5px;
		border-radius: 14px;
		font-size: 18px;
		overflow: visible;
	}
	.com_tab_flex_box02.my_tab a {
		height: 52px;
		padding: 0 10px;
		border-radius: 10px;
	}
	/* 탭이 홀수(봉사팀 관리 권한 없음 = 3개)면 마지막 탭을 한 줄 전체로 */
	.com_tab_flex_box02.my_tab a:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
}


/* ---------- 마이페이지 봉사팀 관리 (mypage/volteam/index.jsp 의 .vt_wrap, 20261021) ----------
   다른 마이페이지 탭과 같은 폭/여백에 맞추고, 상자·표·버튼을 리뉴얼 톤(둥근 모서리, 네이비)으로. */
.vt_wrap .tit {
	margin-bottom: 24px;
}
.vt_wrap .vt_filter {
	gap: 12px;
	margin-bottom: 24px;
}
.vt_wrap .vt_filter .com_style_box01 {
	height: 60px;
	border: 1px solid #dfe3e8;
	border-radius: 14px;
	background-color: #fff;
}
.vt_wrap .vt_add_box {
	margin-bottom: 40px;
	padding: 28px 30px;
	border-radius: 20px;
	background-color: #f1f4f8;
}
.vt_wrap .vt_add_tit {
	margin-bottom: 16px;
	font-size: 20px;
	color: #00306c;
}
.vt_wrap .vt_add_form {
	gap: 10px;
}
.vt_wrap .vt_add_form select,
.vt_wrap .vt_add_form input[type=text] {
	height: 52px;
	padding: 0 16px;
	border: 1px solid #dfe3e8;
	border-radius: 12px;
	font-size: 17px;
}
.vt_wrap .vt_add_form select {
	flex-basis: 170px;
	width: 170px;
}
.vt_wrap .vt_add_form .vt_add_btn {
	height: 52px;
	padding: 0 30px;
	border-radius: 12px;
	background-color: #00306c;
	font-size: 17px;
}
.vt_wrap .vt_add_form .vt_add_btn:hover {
	background-color: #1086ff;
}
.vt_wrap .vt_add_result {
	margin-top: 16px;
	border-radius: 14px;
	background-color: #fff;
}
.vt_wrap .vt_add_result .vt_table {
	border-top: 0;
}
.vt_wrap .vt_count {
	margin-bottom: 12px;
	font-size: 17px;
	font-weight: 700;
	color: #222;
}
.vt_wrap .vt_table {
	border-top: 2px solid #00306c;
}
.vt_wrap .vt_table th,
.vt_wrap .vt_table td {
	padding: 16px 10px;
	border-bottom: 1px solid #e8ebef;
	font-size: 17px;
	color: #333;
}
.vt_wrap .vt_table th {
	background-color: #f7f9fc;
	font-weight: 700;
	color: #00306c;
}
.vt_wrap .vt_table td a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #dfe3e8;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	color: #00306c;
	white-space: nowrap;
}
.vt_wrap .vt_table td a:hover {
	border-color: #00306c;
	background-color: #00306c;
	color: #fff;
}
.vt_wrap .vt_note {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.7;
	color: #888;
}
.vt_wrap .paging_wrap {
	margin-top: 40px;
}

@media all and (max-width:700px) {
	.vt_wrap .vt_filter .com_style_box01 {
		height: 56px;
	}
	.vt_wrap .vt_add_box {
		padding: 22px 18px;
	}
	.vt_wrap .vt_add_form select {
		flex-basis: 100%;
		width: 100%;
	}
	.vt_wrap .vt_table th,
	.vt_wrap .vt_table td {
		padding: 14px 8px;
		font-size: 16px;
	}
	.vt_wrap .vt_note {
		font-size: 16px;
	}
}


/* ---------- 공지사항 목록 (community/notice/index.jsp 의 .nt_list) ----------
   카드 대신 리스트 : 굵은 제목 한 줄 / 조회수 / 회색 작성자 · 날짜. 구분선 없이 여백으로 나눈다. */
.com_gallery_flex_box.nt_list {
	display: block;
}
.com_gallery_flex_box.nt_list > a {
	display: block;
	width: auto;
	box-shadow: none;
	border-radius: 14px;
}
.nt_list .nt_item {
	padding: 22px 20px;
	margin: 0 -20px;
	transition: background-color 0.2s ease;
}
.nt_list .nt_item + .nt_item {
	margin-top: 14px;
}
.nt_list .nt_item:hover {
	background-color: #f4f8ff;
}
.nt_list .nt_tit {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.4;
	color: #222;
}
.nt_list .nt_item:hover .nt_tit {
	color: #00306c;
}
.nt_list .nt_count {
	display: flex;
	gap: 12px;
	margin-top: 10px;
	font-size: 15px;
	color: #888;
}
.nt_list .nt_view {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.nt_list .nt_view svg {
	width: 17px;
	height: 17px;
}
.nt_list .nt_meta {
	margin-top: 6px;
	font-size: 15px;
	letter-spacing: -0.02em;
	color: #999;
}
.com_gallery_flex_box.nt_list > a.nt_empty {
	padding: 60px 20px;
	border-radius: 20px;
	background-color: #f4f7f9;
	text-align: center;
	font-size: 20px;
	color: #888;
}

/* viewport.js 가 480px 로 고정해 축소 표시하므로 모바일 글자는 크게 */
@media all and (max-width:700px) {
	.nt_list .nt_item {
		padding: 20px 14px;
		margin: 0 -14px;
	}
	.nt_list .nt_tit {
		font-size: 22px;
	}
	.nt_list .nt_count,
	.nt_list .nt_meta {
		font-size: 17px;
	}
	.nt_list .nt_view svg {
		width: 19px;
		height: 19px;
	}
}


/* ---------- 봉사활동신청 목록 카드 (gonggo/index.jsp 의 .ap_list) ----------
   테두리/그림자 없이 둥근 사진 + 글 + 오른쪽 아래 동그란 신청 버튼.
   .hwal_li_new 는 상세(detail.jsp) 슬라이더에도 쓰여 .ap_list 로 범위를 묶는다. */
.hwal_li_new.ap_list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));	/* PC 2열 (20261020 요청) */
	gap: 56px 40px;
}
.hwal_li_new.ap_list > a {
	width: auto;
	border: 0;
	border-radius: 0;
}
.hwal_li_new.ap_list > a.full:before {
	display: none;		/* content.css 의 흰 덮개 대신 사진만 흐리게 */
}
/* 20261021 - 더보기 전까지 접어둔 카드 (모바일 3개 / PC 4개씩 펼침) (gonggo/index.jsp 의 foldCards) */
.hwal_li_new.ap_list > a.ap_card.ap_fold {
	display: none;
}

.ap_card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	color: #222;
}

/* 사진 */
.ap_card .ap_img {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: 20px;
	overflow: hidden;
	background-color: #f1f4f8;
}
.ap_card .ap_img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.ap_card:hover .ap_img img {
	transform: scale(1.04);
}
.ap_card .ap_state {
	position: absolute;
	left: 14px;
	top: 14px;
	z-index: 1;
	padding: 6px 12px;
	border-radius: 30px;
	background-color: #1086ff;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

/* 글 */
.ap_card .ap_body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px 2px 0;
}
.ap_card .ap_sub {
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -0.04em;
	color: #888;
}
.ap_card .ap_tit {
	margin-top: 6px;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -0.04em;
	color: #222;
}
.ap_card .ap_foot {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	padding-top: 14px;
}
.ap_card .ap_info {
	min-width: 0;
	font-size: 16px;
	letter-spacing: -0.04em;
	line-height: 1.55;
}
.ap_card .ap_cnt {
	color: #888;
}
.ap_card .ap_date,
.ap_card .ap_place {
	color: #222;
	font-weight: 700;
	word-break: keep-all;
}
.ap_card .ap_date .nw {
	white-space: nowrap;	/* 날짜+시간은 한 덩어리로 줄바꿈 */
}
.ap_card .ap_place {
	overflow-wrap: anywhere;	/* 띄어쓰기 없는 긴 장소명이 신청 버튼 밑으로 넘치지 않게 */
}

/* 테마 태그 : 테마별 옅은 색 */
.ap_card .ap_theme {
	display: inline-block;
	margin-top: 12px;
	padding: 7px 14px;
	border-radius: 30px;
	background-color: #eaf3ff;
	color: #1086ff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0;
	line-height: 1;
	text-transform: uppercase;
}
.ap_card .ap_theme.theme_earth		{ background-color: #e3f6ea; color: #0b9a47; }
.ap_card .ap_theme.theme_hope		{ background-color: #ffebe7; color: #e0533c; }
.ap_card .ap_theme.theme_mobility	{ background-color: #fff3cf; color: #b07d00; }
.ap_card .ap_theme.theme_community	{ background-color: #eaf3ff; color: #1086ff; }

/* 동그란 신청 버튼 */
.ap_card .ap_go {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background-color: #1086ff;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: -0.04em;
	box-shadow: 0 6px 16px rgba(16,134,255,0.28);
	transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.ap_card .ap_go svg {
	width: 28px;
	height: 28px;
	transition: transform 0.25s ease;
}
.ap_card:hover .ap_go {
	background-color: #00306c;
	box-shadow: 0 6px 16px rgba(0,48,108,0.28);
}
.ap_card:hover .ap_go svg {
	transform: translateX(3px);
}

/* 신청 버튼 = 테마 태그와 같은 색 (배경 = 태그 배경, 글자 = 태그 글자).
   마우스를 올리면 진한 테마색으로 채워진다. 테마 없으면 위의 기본 블루 */
.ap_card .ap_go.theme_earth			{ background-color: #e3f6ea; color: #0b9a47; box-shadow: none; }
.ap_card .ap_go.theme_hope			{ background-color: #ffebe7; color: #e0533c; box-shadow: none; }
.ap_card .ap_go.theme_mobility		{ background-color: #fff3cf; color: #b07d00; box-shadow: none; }
.ap_card .ap_go.theme_community		{ background-color: #eaf3ff; color: #1086ff; box-shadow: none; }
.ap_card:hover .ap_go.theme_earth		{ background-color: #0b9a47; color: #fff; box-shadow: 0 6px 16px rgba(11,154,71,0.28); }
.ap_card:hover .ap_go.theme_hope		{ background-color: #e0533c; color: #fff; box-shadow: 0 6px 16px rgba(224,83,60,0.28); }
.ap_card:hover .ap_go.theme_mobility	{ background-color: #b07d00; color: #fff; box-shadow: 0 6px 16px rgba(176,125,0,0.28); }
.ap_card:hover .ap_go.theme_community	{ background-color: #1086ff; color: #fff; box-shadow: 0 6px 16px rgba(16,134,255,0.28); }

/* 모집종료 */
.ap_card.full .ap_img img {
	filter: grayscale(1);
	opacity: 0.6;
}
.ap_card.full .ap_state {
	background-color: #222;
}
.ap_card.full .ap_tit {
	color: #888;
}
.ap_card.full .ap_go,
.ap_card.full:hover .ap_go,
.ap_card.full .ap_go[class*="theme_"],
.ap_card.full:hover .ap_go[class*="theme_"] {
	color: #fff;
	background-color: #c4c9d0;
	box-shadow: none;
}

/* 공고 없음 */
.hwal_li_new.ap_list > a.ap_empty {
	grid-column: 1 / -1;
	padding: 60px 20px;
	border-radius: 20px;
	background-color: #f4f7f9;
	text-align: center;
}
.hwal_li_new.ap_list > a.ap_empty .txt_box {
	padding: 0;
}
.hwal_li_new.ap_list > a.ap_empty .tit {
	margin: 0;
	font-size: 20px;
	color: #888;
}

/* 2열 */
@media all and (max-width:1000px) {
	.hwal_li_new.ap_list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 48px 24px;
	}
}

/* 1열 (viewport.js 가 480px 로 고정해 축소 표시하므로 글자는 크게 둔다) */
@media all and (max-width:640px) {
	.hwal_li_new.ap_list {
		grid-template-columns: minmax(0, 1fr);
		gap: 44px;
	}
	.ap_card .ap_img {
		border-radius: 18px;
	}
	.ap_card .ap_sub {
		font-size: 17px;
	}
	.ap_card .ap_tit {
		font-size: 25px;
	}
	.ap_card .ap_info {
		font-size: 18px;
	}
	.ap_card .ap_theme {
		font-size: 15px;
	}
	.ap_card .ap_go {
		width: 96px;
		height: 96px;
		font-size: 15px;
	}
}