:root {
	--swiper-theme-color: #9a70ff;
}

body {
	position: relative;
	height: 100%;
}

/* 기본 헤더 스타일 */
header {
	padding: 1em 0;
	text-align: center;
	position: relative;
	font-family: "Arial", sans-serif;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	width: 100%; /* 상단 100% 문제 해결 */
	position: sticky;
	top: 0;
	left: 0;
	z-index: 90;
	background-color: #fdfdfdc9;
}

/* 헤더 제목 스타일 */
header h1.logo {
	margin: 0 auto;
	font-size: 24px;
	width: 120px;
}

/* 토글 버튼 (모바일용) */
.menu-toggle {
	display: none;
	font-size: 24px;
	background: none;
	border: none;
	position: absolute;
	right: 1em;
	top: 50%;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 100;
}

/* 내비게이션 스타일 */
nav {
	display: flex; /* PC에서는 항상 보이도록 설정 */
	flex-direction: row;
	justify-content: center;
	align-items: center;
	padding: 0;
	background: transparent;
	position: relative;
	top: 0;
	width: auto;
	margin-top: 10px;
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0 20px;
}

nav ul li {
	margin: 0 15px;
}

nav ul li a {
	text-decoration: none;
	font-size: 1em;
	transition: color 0.3s ease;
	color: #222;
}

nav ul li a:hover {
	color: rgb(114, 114, 114);
}

nav ul li span {
	font-size: 0.8rem;
}

.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 400px;
	border-radius: 0.3rem;
	aspect-ratio: 4 / 2.5 !important;
}

.swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 15px;
}

.caption {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 10px 15px;
	font-size: 14px;
	border-radius: 5px;
	width: 50%; /* 20250208 90% > 30% */
	box-sizing: border-box;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
	bottom: 0px !important;
}

section .sub-text ul {
	padding-left: 0;
}

section .sub-text ul li {
	list-style: none;
}

/* 푸터 메뉴 고정 */
.fixed-nav {
	position: fixed; /* 버튼 묶음의 위치 고정 (화면 기준) */
	bottom: 40px;
	right: 40px;
	z-index: 80;
}

.fixed-nav li {
	background-color: #806e5c;
	color: #fff;
	width: 60px; /* 버튼 크기 */
	height: 60px; /* 버튼 크기 */
	border-radius: 50%; /* 버튼 원(동그라미) 처리 */
}

.fixed-nav li:not(:first-of-type) {
	margin-top: 20px; /* 버튼 사이의 상하 간격 */
}

.fixed-nav li a {
	all: unset;
	display: block;
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
}

.fixed-nav li img {
	display: block;
	width: 60%; /* 아이콘 크기 조정 */
	position: absolute; /* 이미지, 동그라미 기준 가운데 처리 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.swiper-button-next:after,
.swiper-button-prev:after {
	font-size: 22pt !important;
	font-weight: bold;
	color: #222;
}

.swiper-pagination {
	position: relative !important;
}

/* 지도 아이콘 전용 스타일 */
.map-links {
    display: flex;
    gap: 10px; /* 아이콘 간 간격 */
    list-style: none;
    padding: 0;
    margin: 0;
}
	
.map-links li {
    display: inline-block;
}
	
.map-links li img {
    width: 45px;
    height: 45px;
    border-radius: 10px; /* 둥근 모서리 */
    object-fit: cover; /* 이미지 비율 유지 */
}


/* 지도 컨테이너 스타일 */
.map-container {
    margin-top: 20px;
    width: 100%;  /* 지도 컨테이너의 너비를 100%로 설정 */
}
		
.map-container iframe {
    width: 100%; /* 모바일에서 지도 가로 너비를 100%로 설정 */
    height: 400px; /* 지도 높이 유지 */
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;  /* padding과 border를 포함한 너비 계산 */
}

.fade-in {
	opacity: 0;
	transform: translateY(50px); /* 아래에서 올라오는 효과 */
	transition: opacity 1.0s ease-in-out, transform 1.0s ease-in-out;
}

.fade-in.show {
	opacity: 1;
	transform: translateY(0);
}

/* 모바일 환경 */
@media (max-width: 895px) {
	.menu-toggle {
		display: block;
	}

	nav {
		display: none; /* 기본적으로 숨김 */
		flex-direction: column;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		border-top: 1px solid #303030;
		padding: 10px 0;
		z-index: 99;
		margin-top: 0px;
		background-color: #fffefa;
	}

	nav.visible {
		display: flex; /* 토글되면 보이도록 설정 */
	}

	nav ul {
		flex-direction: column;
		align-items: center;
	}

	nav ul li {
		margin: 10px 0;
	}

	nav ul li a {
		color: #333;
		font-size: 1.2em;
	}
	
	#map {
	   	width: 95%; /* 모바일에서 지도 가로 너비를 100%로 설정 */
	    height: 300px;  /* 모바일 화면에서는 지도의 높이를 줄일 수 있음 */
	}	
}