body, ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.headerer {
	border-bottom: 2px solid black; /* 아래쪽에 2픽셀 두께의 검은색 실선 테두리 추가 */
}



.icon-search {
	display: inline-block;
	width: 24px;
	height: 24px;
	background-image: url('/images/search.svg');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.icon-user {
	display: inline-block;
	width: 20px;
	height: 19px;
	background-image: url('/images/user.svg');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.icon-cancel {
	display: inline-block;
	width: 20px;
	height: 19px;
	background-image: url('/images/close.svg');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: middle;
}


.icon-searcher {
	border: none;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none; /* Remove outline on focus */
	width: 40px; /* Button size */
	height: 40px;
}

.icon-searcher::before {
	content: "";
	display: block;
	width: 24px; /* Icon size */
	height: 24px;
	background-image: url("/images/search.svg");
	background-size: 24px 24px; /* Control the icon size */
	background-repeat: no-repeat;
}


.icon-searcher {
	border: none;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none; /* Remove outline on focus */
	width: 40px; /* Button size */
	height: 40px;
}






.header_wrap {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 0px 0 3px; /* 위쪽 패딩 5px, 오른쪽과 왼쪽 패딩 0, 아래쪽 패딩 10px */
	justify-content: space-between;
	align-items: center; /* 세로 중앙 정렬 */
	position: relative; /* 자식 요소를 위한 기준 설정 */
}

.canvaer {
	height: 28px; /* 원하는 높이 */
}


.nav-container {
	display: flex;
	align-items: center;
	width: 100%;
	justify-content: flex-start; /* 왼쪽 정렬 */
}

.menu-item.left-align {
	margin-right: auto;
	padding-left: 20px;
}



.menu-item.left-align a{
	font-size: 18px;
}

.main-menu {
	display: flex;
	gap: 40px;
	flex: 1;
	justify-content: center;
	align-items: center;    /* 세로축 중앙 정렬 */

}


.menu-item {
	position: relative;
}

.main-nav {
	flex: 1;
	width: 100%;
}

.menu-item a {
	text-decoration: none;
	color: #333;
	font-size: 20px;
	font-weight: 700;
	padding: 10px 15px;
	transition: color 0.3s ease;
}

.menu-item a:hover {
	color: #b5651d;
}

.sub-menu {
	display: none;
	position: absolute; /* 절대 위치 지정 */
	top: 120%; /* 부모 요소 바로 아래에 위치 */
	left: 50%; /* 부모 요소의 중심에서 시작 */
	transform: translateX(-50%); /* 수평으로 중앙 정렬 */
	border: solid;
	background-color: #fff;
	padding: 0; /* 서브메뉴의 패딩 제거 */
	min-width: 160px;
	border-radius: 5px;
	z-index: 1;
}

/* Display submenu on hover */
.menu-item:hover .sub-menu {
	display: block; /* Show submenu on hover */
}


.loginer{
	display:none;
}

/* Ensure submenu links have the correct styles */
.sub-menu .menu-item a {
	padding: 5px 20px 5px 20px; /* Add 10px to the bottom padding */
	color: #333; /* Link color */
	text-align:center;
	background-color: transparent; /* Background for links */
	display: block; /* Ensures padding applies to the entire clickable area */
}

.sub-menu .menu-item a:hover {
	color: #b5651d; /* Change color on hover */
}


.sub-menu .menu-item a:hover {
	color: #b5651d; /* Change color on hover */
}

/* Hamburger menu */
.hamburger {
	display: none; /* 기본적으로 숨김 */
	flex-direction: column;
	cursor: pointer;
	margin-left: 20px; /* 왼쪽으로 약간 이동 */
	align-self: center; /* 수직 중앙 정렬 */
}

.hamburger div {
	width: 25px;
	height: 3px;
	background-color: #333;
	margin: 1.7px 0;
	transition: 0.4s;
}


/* Default (Desktop) settings */
.login-button {
	display: flex; /* Display as a flex container */
	justify-content: flex-end; /* Align items to the right */
	gap: 5px; /* Small gap between "로그인" and "회원가입" */
	font-size: 13px; /* Font size adjustment for better readability */
	font-weight: 700;
	color: #333;
	text-decoration: none;
	padding: 5px 0px; /* Adjust padding */
	white-space: nowrap; /* Prevent wrapping */
	padding-right: 20%;


}

.teltel a {
	color: #ffffff; /* 글자 색상 설정 */
	text-decoration: none; /* 밑줄 제거 */
}



.login-button a {
	color: #333; /* Ensure the text color is consistent */
	text-decoration: none; /* Remove underline */
}

.login-button .login-icon {
	display: none; /* Hide icon on desktop */
}

.toggle-submenu {
	display: none;
}

.menu-item.left-align {
	margin-left: auto; /* 왼쪽에 배치 */
	padding-left: 20px;
}

.searcher {
	display: none;
	position: absolute;
	/* postion:relative; */
	right: 0;
	width: 20%; /* Full screen width */
	/*  width: 100 % postion:relative; */
	background-color: white;
	z-index: 999;
	transition: height 0.5s ease;
	box-sizing: border-box;
	height:3px;
}

.searcher.show {
	display: flex;
	align-items: center;
	padding: 0 0px;
}

.search-wrapper {
	display: flex;
	align-items: center;
	width: 100%;
	position: relative;
}


#cancel-icon {
	position: absolute;
	cursor: pointer; /* Change cursor to pointer */
	margin-right: 10px; /* Space between icon and input */
	left: 10px; /* 검색창 안에서 오른쪽에 배치 */

}

/* Show cancel icon when the input is focused or has text */
#search-input:focus + #cancel-icon,
#search-input:not(:placeholder-shown) + #cancel-icon {
	display: none; /* Hide by default; control visibility with media query */
}

#search-input {
	flex-grow: 1;
	border: 1px solid #ddd;
	height: 35px;
	padding: 0 40px 0 10px; /* Padding on the left */
	font-size: 16px;
	outline: none;
	box-sizing: border-box;
	width: 100%;
}


.search-icon {
	position: absolute;
	right: 8px; /* 검색창 안에서 오른쪽에 배치 */
	font-size: 20px;
	cursor: pointer;
	visibility: visible;
}

.search-icon.active{
	opacity: 0;
	visibility: hidden;
}


#search-close {
	margin-left: 20px;
	background-color: transparent;
	border: 1px solid black; /* 검은색 테두리 추가 */
	font-size: 15px;
	cursor: pointer;
	padding: 5px 10px; /* 여백 추가 */
	height: auto; /* 높이를 자동으로 맞추어 두 줄이 되지 않도록 */
	white-space: nowrap; /* 텍스트가 두 줄로 넘어가지 않도록 */
}


.search-container{
	display: flex; /* Use flex for alignment */
	align-items: center; /* Center items vertically */
	margin-left: auto; /* Push it to the right */
	padding-right: 15px; /* Adjust padding */
	white-space: nowrap; /* Prevent text wrapping */

}

.fas.fa-search {
	color: black; /* 기본 색상 */
}

.fas.fa-search:hover {
	color: red; /* hover 시 빨간색 */
}

.close-btn{
	display :none;
}

.close-btn {
	position: absolute;
	top: 10px;  /* 상단에서 약간 떨어지도록 */
	right: 10px;  /* 오른쪽에서 약간 떨어지도록 */
	font-size: 24px;  /* X자의 크기를 설정 */
	background: none; /* 버튼 배경 제거 */
	border: none; /* 테두리 제거 */
	color: black; /* X자 색상 */
	cursor: pointer; /* 커서가 손가락 모양으로 변경 */
}

.close-btn:hover {
	color: red; /* hover 시 빨간색으로 변경 */
}



.submenu-containerer {
	display: none; /* 기본적으로 블록 형태 */
	width: 100%; /* Full width */
	scrollbar-width: none; /* Firefox: hide scrollbar */
	white-space: nowrap; /* Prevent wrapping of buttons */
	z-index: 0;
}

.main-naver::-webkit-scrollbar{
	display:none;
}



.main-naver {
	position: relative; /* 문서 흐름에 따라 배치 */
	top: 0;
	left: 0;
	width: 100%; /* 전체 너비 */
	background-color: #fff; /* 메뉴 배경색 */
	z-index: 1000; /* 다른 요소 위에 표시 */
	display: flex; /* 가로 정렬 */
	flex-wrap: nowrap; /* 줄바꿈 방지 */
	overflow-x: auto; /* 가로 스크롤 활성화 */
	white-space: nowrap; /* 텍스트 줄바꿈 방지 */

}

/* 메뉴 링크 스타일 */
.main-naver a {
	display: flex; /* Flexbox로 변경 */

	color: #333; /* 메뉴 텍스트 색상 */
	text-decoration: none; /* 밑줄 제거 */
}


.main-naver a:hover {
	color: #079600; /* 호버 시 글자색 변경 */
}




.submenu-containerer.headererr.sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 0; /* 스크롤 시 고정된 상태로 표시 */
}




/* Desktop font size adjustments */
@media (max-width: 1200px) {
	.menu-item a {
		font-size: 18px;
		flex-shrink: 0;
	}
}

@media (max-width: 992px) {
	.menu-item a {
		font-size: 16px;
		flex-shrink: 0;
	}
}

@media (max-width: 833px) {
	.menu-item a {
		font-size: 14px;
		flex-shrink: 0;
	}
	.main-menu {
		gap: 30px;
	}
}


@media (min-width: 769px) {
	#cancel-icon {
		display: none; /* Hide cancel icon on larger screens */
	}

	#search-close {
		display: inline-block; /* Show original cancel button on larger screens */
	}
}

/* Mobile settings */
@media (max-width: 768px) {

	.submenu-containerer {
		display: flex; /* 기본적으로 블록 형태 */
		width: 100%; /* Full width */
		position: relative; /* For relative positioning if needed */
		scrollbar-width: none; /* Firefox: hide scrollbar */
		white-space: nowrap; /* Prevent wrapping of buttons */
	}

	.submenu-containerer .menu-item a {
		text-decoration: none;
		color: #333;
		width: 100%; /* Full width */

		font-size: 14.5px;
		padding: 12px 0px 12px 0px;
		transition: color 0.3s ease;
	}

	.submenu-containerer .menu-item a:hover {
		color: #007bff; /* 글자 색상 변경 */
	}



	header {
		display: flex;
		flex-direction: row;
		background-color: #fff;
		padding: 10px 0px 0px 0px;
		box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
		justify-content: space-between; /* Space between left and right */
		align-items: center; /* Center align vertically */
		position: relative; /* Reference for child elements */
	}


	.headerer {
		border-bottom: 0px; /* 아래쪽에 2픽셀 두께의 검은색 실선 테두리 추가 */
	}
	.headererr {
		border-bottom: 2px solid black;  /* 아래쪽에 2픽셀 두께의 검은색 실선 테두리 추가 */
		position: relative; /* 자식 요소의 기준 */
		z-index: 1;
	}



	.sub-menu .menu-item a {
		text-align:left;

	}
	.header_menu {
		display: flex;
		justify-content: space-between; /* Spread content between left and right */
		align-items: center; /* Vertical alignment */
	}



	.header_menu .main-link {
		display: flex;
		align-items: center;
		text-decoration: none;
		color: inherit;
		height: 15px;
		flex-grow: 1; /* 추가: 남은 공간을 차지하도록 설정 */
		position: relative; /* 추가: 상대적 위치 설정 */
		z-index: 1; /* 추가: 링크를 버튼 위로 올림 */
	}

	.header_menu .main-link::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 30px; /* 버튼 너비에 맞게 조정 */
		bottom: 0;
		z-index: 2; /* 가상 요소를 링크 위로 올림 */
	}

	.header_wrap {
		display: flex;
		flex-direction: row;
		padding: 0px 0;
		justify-content: space-between; /* Distribute space between items */
		align-items: center; /* Vertically center-align items */
		width: 100%; /* Ensure full width */
		order: 1;
	}

	.loginer {
		display:none;
		position: fixed;
		top: 50px; /* Position it just below the header */
		right: 0; /* Start off the screen to the right */
		width: 250px;
		height: calc(100% - 60px); /* Take up full height minus header */
		background-color: white;
		border-style: inset;
		border-color: black;
		color: black;
		padding: 20px;
		transition: transform 0.3s ease;
		z-index: 999;
		transform: translateX(100%); /* Initially hide it by moving it off screen */
		display: none; /* Initially hidden */
	}

	.loginer.show {
		display: block; /* Make it visible */
		transform: translateX(0); /* Slide it into view */
	}



	.main-nav {
		position: fixed;
		top: 50px; /* 헤더 바로 아래에 위치하도록 조정 */
		right: 0;
		width: 250px;
		height: calc(100% - 60px); /* 헤더 높이를 제외한 전체 높이 */
		border-style:inset;
		background-color:white;
		border-color:black;
		color: black;
		padding: 20px;
		transition: transform 0.3s ease;
		z-index: 999;
		transform: translateX(100%);
		display: none;
		animation: slideIn 0.3s backwards; /* Slide animation */
	}

	.main-nav.show {
		display: block;
		transform: translateX(0);
		animation: slideIn 0.3s forwards; /* 슬라이드 애니메이션 추가 */
	}




	.nav-container {
		display: flex;
		flex-grow: 1;
		justify-content: space-between; /* Distribute space between items */
		align-items: center; /* Vertically center-align items */
		flex: 1; /* Allow it to grow */
	}

	.menu-item.left-align {
		flex: 1; /* Allow this item to take available space */
		text-align: center; /* Center the text */
		order: 2; /* Keep it on the left */
		margin: 0;
		padding-left: 0;

	}


	.login-button{
		display: flex; /* Use flex for alignment */
		align-items: center; /* Center items vertically */
		margin-left: auto; /* Push it to the right */
		font-size: 10px; /* Adjust font size */
		padding-right: 10px; /* Adjust padding */
		white-space: nowrap; /* Prevent text wrapping */
		order:2;

	}

	.search-container{
		display: flex; /* Use flex for alignment */
		align-items: center; /* Center items vertically */
		margin-left: auto; /* Push it to the right */
		padding-right: 15px; /* Adjust padding */
		white-space: nowrap; /* Prevent text wrapping */
		order:3;

	}

	.login-button .login-text {
		display: none; /* Hide text on mobile */
	}

	.login-button .login-icon {
		display: flex; /* Show icon on mobile */
		font-size: 20px; /* Adjust icon size */
	}

	.hamburger {
		display: flex; /* Show hamburger menu button */
		order: 1; /* Keep it on the left */
	}



	.main-nav ul {
		display: block;
	}

	.main-nav a {
		color: black;
		font-size: 18px;
		display: block;
		padding: 10px 0;
		text-decoration: none;
	}

	.main-nav a:hover {
		color: #b5651d;
	}




	.main-nav.show .sub-menu {
		display: none;
	}

	.main-nav.show .sub-menu.active {
		display: block; /* active 클래스가 있는 경우 서브 메뉴 보이기 */
		position: relative;
		top: 100%;
		left: 0;
		background-color: #fff;
		padding: 15px 0;
		min-width: 200px;
		border-radius: 5px;
		border-style:inset;
		transform: translateX(0%); /* Center it horizontally */

		background-color:white;
		border-color:black;
	}

	.main-nav.show .sub-menu.active .menu-item:last-child {
		border-bottom: none; /* No border for the last item */
	}

	.toggle-submenu {
		display : block;
		background-color: transparent;
		border: none;
		font-size: 16px;
		cursor: pointer;
		color: black;
		margin-left: auto; /* Push the button to the far right */
		font-weight: bold; /* Make the "V" icon bold */
		padding-right: 10px; /* Add some right padding */
	}

	.searcher {
		display: none; /* Initially hidden */
		position: fixed;
		top: 0; /* Start from the top */
		right: 0; /* Align to the right */
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		background-color: white; /* Background color */
		z-index: 999; /* Ensure it appears above other elements */
		box-sizing: border-box; /* Include padding and border in width and height calculations */
	}

	.searcher.show {
		display: flex; /* Show when active */
		align-items: center; /* Center items vertically */
		justify-content: center; /* Center items horizontally */
		height: 50px; /* 기본적으로 main-nav의 높이 */
		font-size:50px;

	}

	#search-input {
		flex-grow: 1;
		border: 1px solid #ddd;
		height: 51px;
		padding: 0 40px 0 40px; /* 오른쪽 padding 추가 */
		font-size: 16px;
		outline: none;
		box-sizing: border-box;
		width: 100%;
	}

	#cancel-icon {
		display: flex; /* Show cancel icon on mobile */
	}

	#search-input:focus + #cancel-icon,
	#search-input:not(:placeholder-shown) + #cancel-icon {
		display: flex; /* Show when focused or when there's text */
	}

	#search-close {
		display: none; /* Hide original cancel button on mobile */
	}

	/* 버튼을 링크처럼 보이게 하는 스타일 */
	#logout-btn {
		background: none; /* 배경 제거 */
		border: none; /* 테두리 제거 */
		color: blue; /* 텍스트 색상 */
		text-decoration: underline; /* 밑줄 추가 */
		cursor: pointer; /* 마우스 커서를 포인터로 변경 */
		font-size: inherit; /* 부모 요소의 폰트 크기 사용 */
		padding: 0; /* 패딩 제거 */
	}

	#logout-btn:hover {
		color: darkblue; /* 호버 시 색상 변경 */
	}

	.close-btn {
		display : block;
		top: 15px;  /* 모바일에서 위치 조정 */
		right: 15px;
		font-size: 30px; /* 모바일에서 X자 크기를 조금 더 키움 */
	}

	.hoveringmenu {
		cursor: pointer; /* 마우스 포인터를 손가락으로 변경 */
		transition: color 0.3s; /* 색상 변화에 부드러운 전환 효과 추가 */
	}

	.hoveringmenu:hover {
		color: red; /* 호버 시 텍스트 색상을 빨간색으로 변경 */
	}

	/* hoverer 클래스에 적용되는 스타일 */
	.main-naver .main-link.hoverer {
		color: red; /* 강조 색상 */
		font-weight: bold; /* 굵은 글씨 */
	}

	/* 커스터마이즈된 밑줄 */
	.main-naver .main-link.hoverer::after {
		content: ''; /* 가상 요소 생성 */
		position: absolute;
		bottom: 0px; /* 링크에서 12px 아래로 이동 */
		left: 0;
		width: 100%; /* 밑줄 너비 */
		height: 3px; /* 밑줄 두께 */
		background-color: red; /* 밑줄 색상 */
		display: block; /* 블록으로 표시 */
		z-index: 2; /* 검은 경계선 위에 표시되도록 설정 */

	}

	.submenu-containerer {
		width: 100%;
		background-color: white;
		z-index: 998; /* 다른 요소 위에 표시되도록 설정 */
	}

	.submenu-containerer.headererr.sticky {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000; /* 스크롤 시 고정된 상태로 표시 */
	}


	/* 슬라이드 애니메이션 */
	@keyframes slideIn {
		from {
			transform: translateX(100%); /* 오른쪽에서 시작 */
		}
		to {
			transform: translateX(0); /* 원래 위치로 */
		}
	}
}