/* PC header */
.nav_wrap {position:fixed; width:100%; z-index:10000;}
.nav_logo {position:relative; float:left; width:65px; padding-top:30px; margin-left:50px;}
.logo_area {position:relative; display:block; width:65px; height:60px;}
.logo {position:absolute; width:65px; height:60px; left:0px; top:0px; transition: opacity 0.4s ease;}
.logo_a {opacity:1;}
.logo_b {opacity:0;}
.nav_menu {position:relative; float:left; width:calc(100% - 270px); min-height:120px; margin-left:50px;}
.nav_menu > ul > li {position:relative; float:left;}
.nav_menu > ul > li.log_box {float:right !important;}
.menu_log_txt {font-size:15px !important; font-weight:600 !important;}
.main_menu {position:relative; width:100%; height:120px; line-height:120px; text-align:center; padding-left:45px; padding-right:45px;}
.main_menu.log_box2 {padding-right:50px !important;}
.main_menu a {display:inline-block; height:50px; line-height:50px; color:#fff; font-size:19px; font-weight:600; letter-spacing:-0.8px; transition:color 0.4s ease;}

.sub_menu {position:absolute; width:100%; top:95px; left:0; opacity:0; visibility:hidden; transition: opacity 0.3s ease, visibility 0.3s;}/* position:absolute; */
.sub_menu ul li {position:relative; width:100%; margin-bottom:4px; text-align:center;}
.sub_menu ul li a {display:block; color:#666; font-size:16px; font-weight:400; letter-spacing:-0.8px; padding:4px 0px; line-height:130%; transition:all 0.4s ease 0s;}
.sub_menu ul li a:hover {color:#000; font-weight:600;}

/* 헤더 뒤쪽에 깔리는 '전체 화면 너비'의 흰색 서랍장 배경 */
.nav_wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px; /* 초기 헤더 높이만큼만 설정 (배경 투명용) */
  background-color: transparent;
  z-index: -1; /* 글씨나 로고보다 뒤로 숨김 */
  transition: height 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}

/* ==========================================
   동적 변화 처리: 마우스 오버시 OR 스크롤 했을 때
========================================== */

/* 1. 스크롤이 내려갔을 때의 헤더 기본 흰색 고정 */
.nav_wrap.scrolled::before {
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* 2. ★ 마우스 오버 시: 흰색 배경이 하위 메뉴 아래까지 쭉 펼쳐짐 */
.nav_wrap:hover::before {
  background-color: #ffffff;
  height: 260px; /* 서브메뉴 깊이만큼 흰색 판이 아래로 늘어남 */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

/* 3. 상위 텍스트 색상 변경 (검은색으로) */
.nav_wrap:hover .main_menu a,
.nav_wrap.scrolled .main_menu a {
  color: #000000 !important;
}

/* 4. 로고 이미지 토글 (A 숨기고 B 노출) */
.nav_wrap:hover .logo_a,
.nav_wrap.scrolled .logo_a { opacity: 0; }
.nav_wrap:hover .logo_b,
.nav_wrap.scrolled .logo_b { opacity: 1; }

/* 5. 마우스 오버 시 하위 메뉴 글자 서서히 등장 */
.nav_wrap:hover .sub_menu {
  opacity: 1;
  visibility: visible;
  /* 가독성을 위해 배경이 내려온 뒤 글자가 스르륵 보이도록 딜레이 적용 */
  transition: opacity 0.3s ease 0.1s, visibility 0.3s 0.1s;
}


/* mobile header */
#mob_header {position:fixed; width:100%; height:70px; background:rgba(255,255,255,.95); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); z-index:10000; transition: transform 0.3s ease-in-out, background-color 0.3s; display:none;}
/* 스크롤 방향 감지용 숨기기 클래스 */
#mob_header.hide {
  transform: translateY(-100%);
}
/* === 최상단 상태 (.at-top) 스타일 === */
#mob_header.at-top {
  background-color: transparent; /* 배경 투명 */
  box-shadow: none; /* 그림자 제거 */
  backdrop-filter:blur(0px); -webkit-backdrop-filter:blur(0px);	
}
.mob_nav_logo {position:absolute; display: block; width:110px; height:22px; left:20px; top:24px;}
.mob_nav_logo img {width:110px; height:22px;}
/* 1) 스크롤 상태: 기본 로고 보임, 흰색 로고 숨김 */
.logo-default {display:inline-block;}
.logo-transparent {display:none;}
/* 2) 최상단 상태: 기본 로고 숨김, 흰색 로고 보임 */
#mob_header.at-top .logo-default {display:none;}
#mob_header.at-top .logo-transparent {display:inline-block;}

.hamburger {position:absolute; width:18px; height:14px; right:20px; top:28px;}
.hamburger span {display:block; width:100%; height:2px; background:#666; margin-bottom:4px; transition: background-color 0.3s;}
/* 최상단 상태 햄버거 버튼 색상: 흰색 */
#mob_header.at-top .hamburger span {
  background-color: #ffffff;
}


/* mobile menu pop */
.full-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color:rgba(0,0,0,.95); /* 팝업 배경색 (원하는 색상으로 변경 가능) */
  backdrop-filter:blur(15px); 
  -webkit-backdrop-filter:blur(15px);	
  z-index: 20000; /* 헤더보다 높게 설정하여 완전히 위를 덮음 */
  
  /* 부드럽게 나타나는 애니메이션 설정 (기본은 숨김 상태) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  overflow-x:hidden; 
  overflow-y:auto;	
  
  /* 메뉴 아이템들을 화면 정중앙에 배치 */
 
}

/* 팝업 활성화 상태 클래스 */
.full-menu.open {
  opacity: 1;
  visibility: visible;
}

/* 우측 상단 창닫기 버튼 */
.full-menu .close-btn {
  position:absolute;
  width:20px;
  height:20px;	
  top:25px;
  right:20px;
  background:url('../img/inc/close.svg') no-repeat 50% 50%; background-size:13px;	
  cursor: pointer;
}

/* 팝업 내부 메뉴 디자인 */
.full-menu-nav {position:relative; width:100%; padding:60px 20px 120px 20px;}
.full-menu-nav ul li {position:relative; width:100%; padding:2px 0px;}
.full-menu-nav ul li a {color:rgba(255,255,255,.7); font-size:16px; font-weight:400; letter-spacing:-0.5px; line-height:100%;}
.full-menu-nav .full-menu-tit {color:#fff; font-size:16px; font-weight:600; letter-spacing:-0.5px; line-height:100%; padding-bottom:7px;}
.full-menu-nav .full-menu-line {height:26px; padding:0px;}

.log-btn {position:absolute; height:40px; left:20px; top:15px; border-radius:20px; border:solid 1px rgba(255,255,255,.2); color:rgba(255,255,255,.9); font-size:14px; font-weight:400; letter-spacing:-0.5px; line-height:38px; padding:0px 15px; cursor:pointer;}
.my-btn {position:absolute; height:40px; right:60px; top:15px; border-radius:20px; border:solid 1px rgba(255,255,255,.2); color:rgba(255,255,255,.9); font-size:14px; font-weight:400; letter-spacing:-0.5px; line-height:38px; padding:0px 15px; cursor:pointer;}


/* 팝업이 열렸을 때 뒷배경 스크롤을 막기 위한 클래스 */
body.no-scroll {
  overflow: hidden;
}

/* footer */
.footer_wrap {position:relative; width:100%; height:280px; padding:45px 50px 0px 50px; background:#000 url("../img/inc/logo_bottom.png") no-repeat calc(100% - 50px) 125px; background-size:160px;}
.footer_menu {position:relative; width:100%; height:30px; margin-bottom:45px;}
.footer_menu ul li {position:relative; float:left; height:30px; margin-right:30px;}
.footer_menu ul li a {display:block; height:30px; color:rgba(255,255,255,.8); font-size:16px; font-weight:400; letter-spacing:-0.5px; line-height:30px; transition:all 0.4s ease 0s;}
.footer_menu ul li a:hover {color:#fff;}
.footer_txt {position:relative; width:100%; color:rgba(255,255,255,.7); font-size:15px; font-weight:400; letter-spacing:-0.5px; line-height:160%; word-break:keep-all;}
.footer_col {color:rgba(255,255,255,.4); font-size:13px; padding:0px 10px;}
.footer_col_2 {letter-spacing:normal;}
.footer_copy {position:relative; width:100%; color:rgba(255,255,255,.4); font-size:12px; font-weight:400; letter-spacing:normal; line-height:100%; padding-top:24px;}
.footer_logo {position:absolute; width:160px; height:40px; right:50px; top:125px; background:url("../img/inc/logo_bottom.png") no-repeat 100% 0%; background-size:160px;}
.footer_insta {position:absolute; width:28px; height:28px; left:273px; top:1px; background:url("../img/inc/insta.svg") no-repeat 50% 50%; background-size:28px; opacity:.6; transition:all 0.4s ease 0s;}
.footer_insta:hover {opacity:1;}
.footer_insta a {display:block; width:28px; height:28px;}

.footer_insta_2 {position:absolute; width:28px; height:28px; right:50px; top:50px; background:url("../img/inc/insta.svg") no-repeat 50% 50%; background-size:28px; opacity:.6; transition:all 0.4s ease 0s;}
.footer_insta_2:hover {opacity:1;}
.footer_insta_2 a {display:block; width:28px; height:28px;}

.footer_br {display:none;}
.footer_qr {position:absolute; width:70px; height:70px; right:100px; top:29px; background:url("/img/inc/qr.png") no-repeat 50% 50%; background-size:70px;}


/* 페이지 상단 스크롤 */
#scrollToTopBtn {opacity: 0; /* 처음에 완전히 투명하게 설정 */ visibility: hidden; /* 투명할 때 클릭되는 것을 방지 */ position:fixed; width:40px; height:40px; right:50px; bottom:50px; border:solid 1px rgba(0,0,0,.1); background:rgba(255,255,255,.9) url("../img/inc/scr_top.svg") no-repeat 50% 50%; background-size:12px; z-index:500; border-radius:3px; cursor:pointer; transition:all 0.5s ease 0s;}
#scrollToTopBtn:hover {background:rgba(255,255,255,1) url("../img/inc/scr_top.svg") no-repeat 50% 50%; background-size:12px; border:solid 1px rgba(0,0,0,.2);}

/* 자바스크립트로 추가해 줄 '보임' 상태 클래스 */
#scrollToTopBtn.show {
  opacity: 1; /* 완전히 보이게 설정 */
  visibility: visible; /* 클릭 가능하게 설정 */
}


@media screen and (max-width: 1200px) {
	.nav_wrap {display:none;}
	#mob_header {display:block;}
	#scrollToTopBtn {right:20px; bottom:20px;}
	.footer_wrap {padding:40px 20px 0px 20px; background:#000 url("../img/inc/logo_bottom.png") no-repeat calc(100% - 20px) 125px; background-size:160px;}
	.footer_insta_2 {top:45px; right:20px;}
}

/* ==========================================
   2. 태블릿 스타일 (768px ~ 1024px)
   - 아이패드, 갤럭시 탭 등
   ========================================== */
@media screen and (max-width: 1024px) {
	.nav_wrap {display:none;}
	#mob_header {display:block;}
	#scrollToTopBtn {right:20px; bottom:20px;}
	.footer_wrap {background-size:130px;}
	.footer_menu ul li a {font-size:15px;}
	.footer_txt {font-size:14px; line-height:170%; color:rgba(255,255,255,.6);}
	.footer_br {display:block;}
	.footer_qr {width:70px; height:70px; right:70px; top:24px; background:url("/img/inc/qr.png") no-repeat 50% 50%; background-size:70px;}
}


/* ==========================================
   3. 모바일 스타일 (767px 이하)
   - 스마트폰 세로/가로 모드
   ========================================== */
@media screen and (max-width: 767px) {
	.nav_wrap {display:none;}
	#mob_header {display:block;}
	#scrollToTopBtn {width:36px; height:36px; right:20px; bottom:20px; background:rgba(255,255,255,.9) url("../img/inc/scr_top.svg") no-repeat 50% 50%; background-size:9px; border:solid 1px rgba(0,0,0,.15);}
	#scrollToTopBtn:hover {background:rgba(255,255,255,1) url("../img/inc/scr_top.svg") no-repeat 50% 50%; background-size:9px; border:solid 1px rgba(0,0,0,.15);}
	.footer_wrap {height:auto; padding:40px 90px 105px 20px; background:#000 url("../img/inc/logo_bottom.png") no-repeat 20px calc(100% - 60px); background-size:120px;}
	.footer_menu {margin-bottom:30px;}
	.footer_menu ul li {margin-right:25px;}
	.footer_copy {padding-top:10px;}
	.footer_insta_2 {top:44px;}
	.footer_qr {width:50px; height:50px; right:20px; top:85px; background:url("/img/inc/qr.png") no-repeat 50% 50%; background-size:50px;}
}