.navs_pc{width: 60%; position: absolute;  z-index: 10!important; top: -10px; left:12%; z-index: 10}
.new-text-color{color: #fff;}
 .menu {
     list-style: none;
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;justify-content:space-between;
}
 .menu > li {
     position: relative; width:150px; width:auto; text-align: center; float: left;
}
 .menu > li > a {
    
     text-decoration: none;
     padding: 25px 15px;
     display: block;
   
}
	  
	@media only screen and (max-width: 1500px) {
	 .menu > li > a {    
     text-decoration: none;
     padding: 25px 10px;
     display: block;}
	 }
	@media only screen and (max-width: 1300px) {
	 .menu > li > a {
    
     text-decoration: none;
     padding: 25px 7px;
     display: block;}
	

	} 
	  @media only screen and (max-width: 1100px) {
	 .menu > li > a {
		 /*display: none!important;*/
    
     text-decoration: none;
     padding: 25px 3px;
     display: block;
   
}
	} 
 .submenu {
     opacity: 0;
	 visibility: hidden;
    
     position: absolute;
     left: 0;
	 height: 0px;
     background: #c99e8e;
	
	 text-align: center;
     padding: 20px;
     overflow: hidden;
     transition: opacity 0.3s ease, height 0.3s ease, visibility 0.3s ease;
}
 .submenu a {
     width: 100%;
     color: #fff;
   
     padding: 10px;
     text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* 색상 전환 추가 */
}
 .submenu a:hover {
  
     color: #fff;
}
 .menu > li:hover > .submenu {
     opacity: 1;
	 display: block;
	 
     visibility: visible;
     height: auto;
    /* 서브메뉴 높이가 자동으로 조절되도록 */
     overflow: visible;
}

/* 1차 메뉴 링크 마우스 오버 상태 */
 .menu > li > a {
     transition: background-color 0.3s ease, color 0.3s ease;
    /* 색상 전환 추가 */
}
 .menu > li:hover > a {
     
     color: #a57462;
}

.nd_close_set_up{position: relative;}
/* Base styles */
.navi{ position: absolute; width: 100%; top: 30px; height: auto; transition: background-color 0.4s ease; /* 배경색 전환 애니메이션 */ }	
@media all and (max-width: 900px) {
.navi{ position: absolute; width: 100%; top: 15px; height: auto; transition: background-color 0.4s ease; /* 배경색 전환 애니메이션 */ }	
 }
.fix_nav{position: fixed!important; top: 0px; z-index: 10!important;left: 0px; background: #fff; z-index: 100; height:80px; transition: background-color 0.4s ease; /* 배경색 전환 애니메이션 */}	
.text_down a .img_down {
  transition: all 0.3s ease;
}
.bar.down {
  background: #000 !important;
}

.text_down a.down2 {
  color: #000 !important;
}
.text_down.down2 span {
    color: #000 !important;
}
.img_down.down3 {

  filter: invert(100%) !important;
}
.navs_pc.down4{  top: 5px; transition: top 0.3s ease; /* 부드러운 애니메이션 효과 */}	
.bar_texts.down4{  top: 29px; transition: top 0.3s ease; /* 부드러운 애니메이션 효과 */}
	.nav_logo {
    position:  absolute;
    top: 0px;
    left: 5%;
    transform: translateX(-50%);
    z-index: 11;
    /* Optional: Width for better alignment */
    width: 180px; /* or set a specific width if necessary */
}	
.f_logo{margin-top:-4px;}
.f_logo,
.f_logo2 { width: 180px;
    position: absolute;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Hide second logo initially */
.f_logo2 { 
    opacity: 0;
    transform: translateY(-20px); /* Slightly move up for smooth effect */
}

/* Show second logo on scroll */
.show-f_logo2 {
	
	padding-top: 8px;
    opacity: 1;
    transform: translateY(0);
}
	@media only screen and (max-width: 900px) {
.show-f_logo2 {
	width: 140px;
	padding-top: 15px;
    opacity: 1;
    transform: translateY(0);
}
		.show-f_logo2 {
	width: 140px;
	padding-top: 15px;
    opacity: 1;
    transform: translateY(0);
}
	}

/* Hide first logo when second is shown */
.hide-f_logo {
    opacity: 0;
    transform: translateY(20px); /* Slightly move down for smooth effect */
}


	@media only screen and (max-width: 900px) {
	.nav_logo {
    position:  absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11;
    /* Optional: Width for better alignment */
    width: 150px; /* or set a specific width if necessary */
}	
	}
		
	.nd_close_set_up{position: relative;}
/* Base styles */


#hamburger-menu {
  position: relative;
  opacity: 1;
}

.menu-icon {
  width: 25px;
  height: 25px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  z-index: 1000;
  position:  fixed;
  top: 30px;
  left:5%;
}

.bar {
  width: 35px;
  height: 4px;
  border-radius: 4px;

  transition: all 0.6s ease;
}
.menu-icon:hover .bar {
  width: 40px;
  height: 4px;

  transition: all 0.6s ease;
}
	.bar:before{content: ''; width: 120%; height: 100%; background: none; position: absolute;}
.menu-content_nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
background: #fff;
  transform: translateX(100%);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 0.6s ease;
  overflow-y: auto;
  z-index: 999;
}

/* 메뉴 열림 상태 */
.menu-content_nav.open {
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.8s cubic-bezier(0.6, 0.05, 0.28, 0.91), opacity 0.5s ease;
}

/* 배경 색상 애니메이션 */
.menu-content_nav.open {
 background: #fff
}

.menu-content_nav:hover {
  opacity: 1 !important; /* 또는 !important를 제거하고 확인 */
}
.menu-icon.active img{
filter: invert(100%) !important; }
.menu-icon.active .bar{  background: #000;}
/* 햄버거 아이콘이 X 모양으로 변할 때 */
.menu-icon.active .bar:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);  /* 변환 값을 높이에 맞게 조정 */
}

.menu-icon.active .bar:nth-child(2) {
  opacity: 0;  /* 가운데 막대는 사라짐 */
}

.menu-icon.active .bar:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);  /* 변환 값을 높이에 맞게 조정 */
}
/* 메뉴가 열렸을 때 햄버거 아이콘 색상 변경 */
/* 기본 햄버거 아이콘 색상 */
.menu-icon .bar {
  background-color: #fff; /* 흰색 */
}

/* 햄버거 아이콘이 검정색으로 바뀔 때 */
.menu-icon.black .bar {
  background-color: #000; /* 검정색 */
}
	
.menu-icon .nav_texts a {
  color: #000; /* 흰색 */
}

/* 햄버거 아이콘이 검정색으로 바뀔 때 */
.menu-icon.black .nav_texts a {
  color: #000; /* 검정색 */
}
.menu-icon .nav_texts img {
filter: invert(0%);
}

/* 햄버거 아이콘이 검정색으로 바뀔 때 */
.menu-icon.black .nav_texts img {
  filter: invert(100%);
}
	.bar_texts{position: absolute; right: 5%;  top: 15px; z-index: 1000; width: auto;}
	.bar_texts a {
   
    position: relative;
    color: #fff;
}
	@media only screen and (max-width: 1500px) {
  
}
	@media only screen and (max-width: 900px) {
   	.bar_texts{position:   absolute; left:10px; top: 10px;  width: auto;}
	.bar_texts a {
   
    position: relative;
    color:#fff;
}
}
	
	
.bar_texts a::after {
    content: '';
    position: absolute;
    width: 20%;
    height: 2px;
    display: block;
    margin-top: 2px;
    right: 0;
	opacity: 0;
    background:#c99e8e;
    transition: width 0.4s ease;
}

.bar_texts a:hover::after {
    width: 100%;
    left: 0%;
	opacity: 1;
    right: auto;
}
	
	@media only screen and (max-width: 900px) {

	}	
		
		/* 기본 스타일 */
#nav {

}

.nav_list_navs {
  width: 100%;
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* 서서히 빠르게 진행되는 전환 효과 */
}

.list_navs {
  display:  block;
  width: 100%;
	
}
.pats{padding-top: 30vh;}
.title_nav_warp {

	padding: 10px 0 20px 10px;
font-size: 20px;
  width: 100%; /* 기본적으로 100% 너비를 차지 */
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* 서서히 빠르게 진행되는 전환 효과 */
}
@media only screen and (max-width: 900px) {
.pats{padding-top: 0vh;}
.title_nav_warp {
font-size: 14px;
  width: 100%; /* 기본적으로 100% 너비를 차지 */
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* 서서히 빠르게 진행되는 전환 효과 */
}	
	}
.title_nav_warp a {
	 
  display: block;
  width: 100%; /* 각 링크가 100% 너비를 차지 */
  text-align: left;
  padding: 20px 10px 5px 10px;
	
  cursor: pointer;
  box-sizing: border-box; /* 패딩과 테두리 포함 */

}

.title_nav_warp a.active {
  font-weight: bold; /* 클릭된 항목에 볼드체 적용 */

}

.sub_nav_warp {
 display: none; border-bottom: 1px solid  rgba(255,255,255,0.8);
  text-align: center; padding: 15px 15px 5px 15px;
  width: 80%; /* 기본적으로 100% 너비를 차지 */
  transition: width 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* 서서히 빠르게 진행되는 전환 효과 */
 /* 기본 배경색 */border-radius: 0px 0 0px 0px;
}

.sub_menu_list {
  list-style: none;
  padding: 0;
  margin: 0;  
}

.sub_menu_list li {
  position: relative; /* relative 위치 지정 */
}

.sub_menu_list li a {
  display: inline-block; /* 글자에 맞춰 밑줄이 나타나도록 설정 */
  padding:0px  5px 0px  5px;
  text-decoration: none;
	line-height: 16px;
	font-size: 18px;
  color: #000; /* 기본 글자색 */

  position: relative; /* relative 위치 지정 */
  overflow: hidden; /* 가상의 밑줄 요소가 부모 요소를 넘치지 않게 함 */
  transition: color 0.3s ease, background-color 0.3s ease; /* 글자색과 배경색의 부드러운 전환 */
}

.sub_menu_list li a::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0px; /* 밑줄의 두께 */
  width: 100%; /* 글자 길이만큼의 너비 */
  background-color: #333; /* 밑줄 색상 */
  transform: scaleX(0); /* 초기 상태에서 밑줄이 0% 너비 */
  transform-origin: left; /* 밑줄이 왼쪽에서 시작되도록 설정 */
  transition: transform 0.3s ease; /* 밑줄의 부드러운 이동 */
}

.sub_menu_list li a:hover {
  color: #000; /* 호버 시 글자색 변경 */

}

.sub_menu_list li a:hover::after {
  transform: scaleX(1); /* 호버 시 밑줄이 글자 길이만큼 확장됨 */
}
/* 활성화된 상태 */
.nav_list_navs.expanded {
  width: 100%;
}

.nav_list_navs.expanded .title_nav_warp {
  width: 100%; /* 클릭 시 50% 너비로 줄어듦 */
}
.nav_list_navs.expanded .title_nav_warp a {
   font-size: 14px;
}
	
	@media only screen and (max-width: 900px) {
	.nav_list_navs.expanded .title_nav_warp a {
   font-size: 14px;
}
	}
	
	
.nav_list_navs.expanded .sub_nav_warp.active {
  display: block;
  width: 100%; /* 클릭 시 50% 너비로 늘어남 */
}


@media only screen and (max-width: 1500px) {
.nav_logo{left:0;transform:none;}
.bar_texts{right:3%;}
.bar_texts.down4{top:29px;}
.util_menu{right:12%;}
.util_menu.down4{top:0px;}
.navs_pc{width:65%;left:14%;}
}

@media only screen and (max-width: 1300px) {
.bar_texts{right:2%;}
.util_menu{right:10%;}
.f_logo, .f_logo2{width:160px;}
.hide-f_logo{padding-top:14px;}
.navs_pc{width:64%;left:14%;}
}
@media only screen and (max-width: 1100px) {
.f_logo, .f_logo2{width:140px;}
.hide-f_logo{padding-top:14px;}
.show-f_logo2{padding-top:16px;}
}
@media only screen and (max-width: 900px) {
.nav_logo{left:50%;transform:translateX(-50%);}
}