@charset "utf-8";
p {
	word-break: keep-all;
}
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
/* 본문 콘텐츠를 자동으로 확장시켜 footer를 밀어냄 */
.content {
    flex: 1;
}

.main-header.subpage .main-nav-menu .nav-link.depth1 {
	color: #000;
	text-shadow: 0 0;
}
.main-header.subpage .main-nav-menu .nav-link.depth1:hover {
	color: #11caf0;
	text-shadow: 0 0;
}
.main-header.subpage .main-nav-menu .nav-link.depth2:hover {
	color: #11caf0;
	text-shadow: 0 0;
}
.sub-nav {
	padding: 1rem;
}
/* 네비게이션을 슬라이드 위에 겹치도록 */
.main-header {
    position: fixed;   /* ← 핵심 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;      /* 슬라이드보다 높은 값 */
    background: rgba(0,0,0,0); /* 슬라이드 위에서 반투명 효과 */
    transition: background .3s ease;
}
.main-header .logo {
	background: url('/assets/image/logo-1.png') no-repeat left bottom;
	background-size: 70%;
	width: 100px;
	height: 49px;
}
.main-header .logo.sub {
	background: url('/assets/image/logo-2.png') no-repeat left bottom;
	background-size: 230px;
	width: 230px;
	height: 49px;
}
/* mhead-js sticky 클래스 적용 후 스타일 변경 */
.mh-sticky .main-header {
    background: transparent; /* 스크롤 후 진하게 */
}

/* navbar 내부 텍스트 */
.main-nav .nav-link {
    color: #fff !important;
}

/* 메인 아이콘 */
.icon-box {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px;
}

.icon-box img {
    width: 70px;
    height: auto;
}

.text-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.icon-title {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 4px;   /* 제목 아래 간격 최소화 */
}

/* underline 기본: 0px → hover 시 100% */
.icon-underline {
    height: 4px;
    background-color: #00A6B8;
    border-radius: 3px;
    width: 0;
    transition: width 0.35s ease;
    max-width: 100%; /* 최대길이 */
}

.icon-box:hover .icon-underline {
    width: 100%;
}
.slogan p {
	font-size: xx-large;
	font-weight: 100;
}
/* 전체 화면 슬라이더 */
.swiper {
	width: 100%;
	height: 100vh;
}
.swiper-slide {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}
/* 설명글 기본 스타일 */
.slide-text {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	width: 100%;
	color: white;
	font-size: xxx-large;
	line-height: 1.3;
	font-weight: 100;
	opacity: 0;
	padding-left: 1rem;
	transition: opacity 1.2s ease;
	text-shadow: 0 2px 6px rgba(0,0,0,0.6);
	text-align: left; /* 왼쪽 정렬 */
	z-index: 30;
}

/* 화살표 */
.swiper-button-next,
.swiper-button-prev {
	color: white;
	text-shadow: 0 2px 4px rgba(0,0,0,0.7);
	width: 50px;
	height: 50px;
}
footer .list-group-item {
	border: 0;
	font-size: small;
}
/* 서브페이지 공통 */
.sub-page {
	margin-top: 116px;
}
.greeting .cover {
	display: block;
	background: url('/assets/image/IMG_0046-1.jpg') no-repeat center center;
	background-size: cover;
}
h1 small {
	display: block;
	font-size: small;
	color: #919191;
}
/* underline 기본: 0px → hover 시 100% */
.sub-underline {
    height: 4px;
    background-color: #00A6B8;
    border-radius: 3px;
    width: 0;
    animation-name: expandWidth;
	animation-duration: 2s; /* Duration of the animation */
	animation-timing-function: ease-in-out; /* Smooth acceleration and deceleration */
	animation-fill-mode: forwards; /* Keep the final state after animation */
}
@keyframes expandWidth {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
/* 연혁 */
.year-tab {
    background: #9c9c9c;
    color: #fff !important;
    margin-right: 6px;
    padding: 10px 20px;
    border-radius: 4px;
    border: 0;
}
#yearTabContent ul {
	margin-top: 0.5rem;
}
.year-tab.active {
    background: #0d6efd !important;
    font-weight: 700;
    color: #fff;
}
.year-block {
    font-size: 2rem;
    font-weight: 700;
    color: #0d6efd;
}
.members dd {
	text-align: center;
}
.members dt {
	margin-bottom: 1rem;
}
.bg-goal {
	background: url(/assets/image/IMG_0010.jpg) no-repeat center center;
	background-size: cover;
}
.goal h2, .goal h3 {
	margin: 1rem;
}
.goal .col-md-4, .goal .col-md-8 {
	min-height: 200px;
}
.goal .bg_edu {
	background: url(/assets/image/bg-edu.jpg) no-repeat center center;
	background-size: cover;
}
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (max-width: 768px) {
	.slide-text {
		font-size: 1.4rem;
		padding-left: 20px;
		max-width: 90%;
	}
	.icon-box {
	    gap: 5px;
	    padding: 5px;
	}
	.icon-box img {
	    width: 50px;
	}
	.icon-title {
		font-size: small;
	}
	.goal .col-md-4.title {
		min-height: 60px;
	}
	.footer li {
		font-size: small;
		word-break: keep-all;
	}
	#hd_pop {
		width: 100%;
	}
}