/**
 * 파일 위치: homepage/_theme/5/assets/css/theme.css
 * 역할: 테마 5(풀페이지형) 전용 스타일.
 *       기본 레이아웃은 다른 테마와 같고, body.theme5-fullpage 가 붙은
 *       메인 페이지에서만 섹션 단위 전환용 규칙이 추가로 적용된다.
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');

:root {
	--bs-dark:#333
}

body {font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;min-height: 100vh;display: flex;flex-direction: column; font-size: 18px; font-weight: 500}
/* 헤더/네비게이션은 테마 2 와 같은 구성을 쓴다. */
header{position: relative}
header .navbar {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); position: absolute; top: 0; left: 0; width: 100%; z-index: 5; border-bottom: 1px solid rgba(221, 221, 221, 0.4); }
header.fixed .navbar{position: fixed; background: #fff; }
header .link-list ul li a{color:#fff; font-size: 13px;text-decoration: auto;line-height: 22px;display: inline-block;}
header .link-list ul li{ text-align: center}
.logo-container {display: flex;align-items: center; padding: 0 20px;}
.link-list ul {display: flex; margin: 0; padding: 0; padding: 0 20px}



.slide-item .cover-text{}
.slide-item .cover-text .card-title{text-align: left!important}
.slide-item .cover-text .card-text{text-align: left!important}


.wani-link-list-block h4{}


.wani-link-list-bg-block{}
.wani-link-list-bg-block .bg-wrapper{padding: 100px 0; position: relative;}
.wani-link-list-bg-block h4{font-size: 30px; font-weight: bold; color: #fff}
.wani-link-list-bg-block h6{font-size: 20px; color: #fff}
.wani-link-list-bg-block .overlay{position: absolute;width: 100%;height: 100%;background: #000;top: 0;opacity: 0.5;}
.wani-link-list-bg-block .container{z-index: 3;position: relative;}
.wani-link-list-bg-block .button-list {width: 100%; display: flex; column-gap: 20px;}
.wani-link-list-bg-block .button-list a,
.wani-link-list-bg-block .button-list button{background: #fff5;border-radius: 0;border: 1px solid #fff;color: #fff; justify-content: space-between; display: flex; width: 100%;}

@media (max-width: 992px) {
	.wani-link-list-bg-block .button-list{flex-direction: column;}
	.wani-link-list-bg-block .button-list a,
	.wani-link-list-bg-block .button-list button{margin-top: 15px}
}


.page-container.sub{padding: 2rem;padding-top: 80px; margin-top: 60px;}

footer {background: #343a40;color: white;padding: 2rem 0;margin-top: auto;}

@media (max-width: 992px) {
	.page-container.sub{padding: 1rem;padding-top: 80px;}
}

h6.card-title{display: flex; align-items: center;}

/*페이지*/
.text-primary {color: var(--bs-primary) !important;}
.page-body h1{color:var(--bs-primary); font-weight: 400; font-size: 50px; letter-spacing: -4px; font-family: "Noto Serif KR", serif; word-break: auto-phrase;}
.page-body h2{color:var(--bs-secondary); font-weight: 500; font-size: 30px;letter-spacing: -1px; word-break: auto-phrase;}
.page-body h3{color:var(--bs-dark); font-weight: 500; font-size: 28px; font-family: "Noto Serif KR", serif; word-break: auto-phrase;}
.page-body h4{ font-weight: 500; border-bottom: 1px solid #dee2e6; padding-bottom: 10px; word-break: auto-phrase;}
.page-body h5{ font-weight: 500; padding: 10px 20px; background: #eee; word-break: auto-phrase;}
.page-body h6{ font-weight: 500; font-size: 20px; font-family: "Noto Serif KR", serif; word-break: auto-phrase;}
.page-body .lead{font-weight: 500}


.slide-item .cover-text .card-title {
	font-size: 80px !important;
	color: var(--bs-primary) !important;
	font-weight: 700 !important;
	letter-spacing: -5px !important;
	opacity: 1.0 !important;
}

.slide-item .cover-text .card-text {
	font-size: 28px !important;
	color: var(--bs-dark) !important;
	font-weight: 400 !important;
	text-align: center;
	letter-spacing: 0 !important;
	word-break: keep-all;
}



.wani-design-slide-block, .wani-cover-slide-block{margin-top: 0}
.board-container{padding-top: 100px!important;}
.slide-item .cover-slide-img{height: 100vh !important;}

@media screen and (max-width: 1400px) {
	.slide-item .cover-slide-img{height: 58vh!important;}
}

@media screen and (max-width: 992px) {
	.slide-item .cover-slide-img{height: 21vh!important;}
	.board-container{padding-top: 80px!important;}
}


/* ==========================================================================
   테마 5 : 풀페이지(섹션 전환) 모드
   body.theme5-fullpage 는 theme.js 가 메인 페이지에서만 붙인다.
   ========================================================================== */

:root {
	/* theme.js 가 실제 헤더 높이를 재서 덮어쓴다(테마2 navbar 는 높이가 고정이 아니다). */
	--theme5-header-height: 90px;
}

body.theme5-fullpage {
	overflow: hidden;
}

/* 풀페이지 컨테이너는 flex 흐름 밖으로 빼야 100vh 계산이 어긋나지 않는다. */
body.theme5-fullpage main {
	flex: 1 1 auto;
	min-height: 0;
}

body.theme5-fullpage #mainContent > .page-container {
	padding: 0;
	margin: 0;
}

/* 헤더는 항상 화면 위에 떠 있고, 첫 섹션에서만 투명하다. */
body.theme5-fullpage header .navbar {
	position: fixed;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.theme5-fullpage header.fixed .navbar {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border-bottom: 1px solid rgba(221, 221, 221, 0.4);
	background: rgb(255 255 255 / 0.6);
}

/* 첫 섹션(커버)은 헤더 아래로 밀지 않고 화면을 꽉 채운다. */
body.theme5-fullpage .wani-design-slide-block,
body.theme5-fullpage .wani-cover-slide-block {
	margin-top: 0 !important;
	height: 100%;
}

body.theme5-fullpage .wani-card-slider,
body.theme5-fullpage .wani-card-slider .slick-list,
body.theme5-fullpage .wani-card-slider .slick-track,
body.theme5-fullpage .wani-card-slider .slide-item {
	height: 100% !important;
}

body.theme5-fullpage .slide-item .cover-slide-img,
body.theme5-fullpage .slide-item .cover-text,
body.theme5-fullpage .slide-item .cover-overlay {
	height: 100% !important;
}

.slide-item .cover-overlay{
	/*background: linear-gradient(45deg, var(--bs-primary), var(--bs-secondary))!important;*/

	opacity: 0!important;

}


/* 섹션 안의 블록이 화면을 꽉 채우고, 내용은 세로 가운데로 모인다.
   블록 자신의 배경이 섹션 전체를 덮어야 섹션 경계에 빈 띠가 생기지 않는다. */
body.theme5-fullpage .fp-section {
	padding-top: 0;
	display: flex;
	flex-direction: column;
}

body.theme5-fullpage .fp-section > * {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	min-height: 0;
}

/* 배경을 담고 있는 레이어도 함께 늘려야 섹션 위아래에 빈 띠가 남지 않는다. */
body.theme5-fullpage .fp-section > * > .bg-wrapper,
body.theme5-fullpage .fp-section > * > .wani-section-bg {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 0;
}

/* 헤더가 떠 있으므로 콘텐츠가 그 아래로 들어가지 않게 여백을 준다(배경 레이어는 건드리지 않는다).
   위아래를 같게 줘야 justify-content:center 가 '보이는 내용'을 정확히 가운데에 놓는다.
   (위쪽에만 주면 그 절반만큼 내용이 아래로 치우친다) */
body.theme5-fullpage .fp-section:not(:first-child) > * > .container,
body.theme5-fullpage .fp-section:not(:first-child) > * > .container-fluid,
body.theme5-fullpage .fp-section:not(:first-child) > * > .bg-wrapper > .container,
body.theme5-fullpage .fp-section:not(:first-child) > * > .bg-wrapper > .container-fluid {
	padding-top: var(--theme5-header-height);
	padding-bottom: var(--theme5-header-height);
}

/* 스크롤이 필요한 섹션(scrollOverflow)에서는 fullPage 가 한 겹 더 감싼다. */
body.theme5-fullpage .fp-section > .fp-scrollable {
	display: block;
	padding-top: 0;
}

body.theme5-fullpage .fp-section > .fp-scrollable > .fp-scroller > * {
	width: 100%;
}

body.theme5-fullpage .fp-section:not(:first-child) > .fp-scrollable > .fp-scroller > * > .container {
	padding-top: var(--theme5-header-height);
	padding-bottom: var(--theme5-header-height);
}

/* 커버 섹션은 여백 없이 화면을 그대로 채운다. */
body.theme5-fullpage .fp-section:first-child > * {
	padding-top: 0;
	justify-content: stretch;
}

/* 섹션 진입 애니메이션 (AOS 대체).
   transform 을 <section> 자신에게 걸면 안 된다 — fullPage 가 섹션 위치를 잴 때
   그 이동량까지 함께 읽어 마지막 섹션이 몇 px 어긋난다(빈 띠가 보인다).
   그래서 안쪽 블록에만 건다. */
body.theme5-fullpage .fp-section > * {
	opacity: 0;
	transform: translateY(18px);
	/* 스크롤 전환(700ms)보다 짧게 끝나야 도착했을 때 이미 떠 있다. */
	transition: opacity 0.4s ease, transform 0.4s ease;
}

body.theme5-fullpage .fp-section.theme5-section-in > * {
	opacity: 1;
	transform: none;
}

/* 마지막 푸터 섹션.
   fp-auto-height 라 한 화면을 통째로 쓰지 않고 푸터 높이만큼만 차지한다. */
body.theme5-fullpage .theme5-footer-section {
	background: #343a40;
	display: block;
	height: auto !important;
	padding-top: 0;
}

body.theme5-fullpage .theme5-footer-section > footer {
	display: block;
	opacity: 1;
	transform: none;
	margin-top: 0;
	padding: 2rem 0;
}

/* 우측 섹션 내비게이션 점 */
body.theme5-fullpage #fp-nav ul li a span,
body.theme5-fullpage .fp-slidesNav ul li a span {
	background: rgba(0, 0, 0, 0.35);
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
}

body.theme5-fullpage #fp-nav ul li a.active span {
	background: var(--bs-primary);
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
}

/* 첫 섹션(커버 이미지 위)에서는 점을 밝게 */
body.theme5-fullpage.theme5-cover-active #fp-nav ul li a span {
	background: rgba(255, 255, 255, 0.6);
}

/* 풀페이지 안에서는 side-links 가 섹션과 겹치므로 감춘다. */
body.theme5-fullpage .footer-side-links {
	display: none;
}

/* 좁은 화면에서는 fullPage 가 responsive 모드로 빠져 일반 스크롤이 된다. */
body.theme5-fullpage.theme5-responsive,
body.fp-responsive.theme5-fullpage {
	overflow: auto;
}

body.theme5-fullpage.theme5-responsive .fp-section,
body.theme5-fullpage.theme5-responsive .fp-section > * {
	display: block;
	padding-top: 0;
	opacity: 1 !important;
	transform: none !important;
}

body.theme5-fullpage.theme5-responsive .theme5-footer-section {
	display: block;
}


/* --------------------------------------------------------------------------
   화면 하단 가운데 '다음 섹션으로' 아이콘
   -------------------------------------------------------------------------- */

.theme5-scroll-down {
	position: fixed;
	left: 50%;
	/* 커버 슬라이드의 dots(하단 24px)와 겹치지 않도록 그 위에 둔다. */
	bottom: 64px;
	z-index: 6;
	margin-left: -22px;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* 밝은 섹션에서도 흰 화살표가 보이도록 반투명 원을 깐다. */
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	line-height: 1;
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 0.25s ease, visibility 0.25s ease, background-color 0.25s ease;
	animation: theme5-scroll-down-bob 1.8s ease-in-out infinite;
}

.theme5-scroll-down i {
	font-size: 30px;
	display: block;
}

.theme5-scroll-down:hover,
.theme5-scroll-down:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.45);
	outline: none;
}

.theme5-scroll-down.is-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@keyframes theme5-scroll-down-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(9px); }
}

@media (prefers-reduced-motion: reduce) {
	.theme5-scroll-down {
		animation: none;
	}
}

/* 커버 슬라이드(waniCoverSlide): 밝은 사진 위 글자는 primary, 어두운 막은 쓰지 않는다 */
.wani-cover-slide-block .slide-item .cover-overlay {
	display: block !important;
	height: 100%;

}

.wani-cover-slide-block .slide-item .cover-text .card-title {
	color: var(--bs-primary) !important;
	font-size: clamp(60px, 5.4vw, 84px) !important;
	letter-spacing: -.03em !important;
	text-align: center !important;
	/*text-shadow: 0 2px 18px rgba(255, 255, 255, .55)*/
}

.wani-cover-slide-block .slide-item .cover-text .card-text {
	text-align: center!important;
	font-size: clamp(28px, 1.9vw, 32px) !important;
	font-weight: 600 !important;
	line-height: 1.4
}

/* 모바일(992px 미만)에서도 fullPage 를 쓴다: 커버 섹션이 화면을 꽉 채우고 글자는 화면 폭에 맞춘다.
   scrollOverflow 가 섹션 내용을 높이가 내용만큼인 .fp-scroller 로 감싸므로 커버 블록은 그 높이를 따로 채운다. */
@media screen and (max-width: 992px) {
	body.theme5-fullpage .fp-section:first-child > .fp-scrollable,
	body.theme5-fullpage .fp-section:first-child > .fp-scrollable > .fp-scroller,
	body.theme5-fullpage .fp-section:first-child > .fp-scrollable > .fp-scroller > * {
		height: 100% !important;
	}
	body.theme5-fullpage .slide-item .cover-text {
		padding: var(--theme5-header-height) 8% 0;
	}
	body.theme5-fullpage .slide-item .cover-text .card-title {
		font-size: clamp(32px, 9vw, 52px) !important;
		letter-spacing: -2px !important;
		line-height: 1.25;
		word-break: keep-all;
	}
	body.theme5-fullpage .slide-item .cover-text .card-text {
		font-size: clamp(15px, 4.2vw, 20px) !important;
		line-height: 1.55;
		word-break: keep-all;
	}
}

/* 모바일 fullPage: 부서 소개·최신글 섹션을 한 화면(헤더 아래)에 담는다 */
@media screen and (max-width: 767.98px) {
	/* 내용이 화면보다 짧아도 블록 배경이 섹션을 채우고, 내용은 세로 가운데에 둔다(긴 내용은 그대로 섹션 안에서 스크롤) */
	body.theme5-fullpage .wani-intro-link-block,
	body.theme5-fullpage .wani-latest-list-section {
		min-height: 100vh;
		min-height: 100svh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	body.theme5-fullpage .fp-section:not(:first-child) > .fp-scrollable > .fp-scroller > * > .container {
		padding-bottom: 24px;
	}
	body.theme5-fullpage .wani-intro-link-block,
	body.theme5-fullpage .wani-latest-list-section {
		padding-top: 0;
		padding-bottom: 72px; /* 하단 '아래로' 버튼이 슬라이드 점을 가리지 않게 내용을 위로 올린다 */
	}
	body.theme5-fullpage .wani-intro-link-block .text-center {
		margin-bottom: 0 !important;
	}
	body.theme5-fullpage .wani-intro-link-block .text-center h6 {
		margin-bottom: 1rem !important;
		font-size: 15px;
	}
	body.theme5-fullpage .wani-intro-link-block h4 {
		font-size: 24px;
	}
	body.theme5-fullpage .wani-intro-link-slide-item .card-img-top {
		height: 150px !important;
	}
	body.theme5-fullpage .wani-intro-link-slide-item .card-body {
		padding: .75rem 1rem;
	}
	body.theme5-fullpage .wani-intro-link-slide-item .card-body .btn-group,
	body.theme5-fullpage .wani-intro-link-slide-item .card-body .btn-group-vertical {
		flex-direction: row;
		gap: 6px;
	}
	body.theme5-fullpage .wani-intro-link-slide-item .card-body .btn {
		flex: 1 1 0;
		border-radius: .375rem !important;
		font-size: 13px;
		padding: .3rem .4rem;
	}
	body.theme5-fullpage .wani-latest-list-section .board-header h5 {
		padding-top: .5rem !important;
		padding-bottom: .5rem !important;
		font-size: 17px;
	}
	body.theme5-fullpage .wani-latest-list-section .board-body .list-group-item {
		padding: .35rem .75rem;
		font-size: 14px;
	}
	body.theme5-fullpage .wani-latest-list-section .board-body .list-group-item small {
		font-size: 12px;
		width: 90px !important;
	}
}