/* keoc.kr 클론 — header.css (헤더 + 버티컬 드롭다운 + 전체메뉴)
   원본 CSS(common.css)를 역할 기반으로 재구성. 값은 원본과 동일하며
   에셋 경로만 /assets/ 로, 폰트만 Pretendard 로 치환했다. */

/* ---------- 원본 헤더 ---------- */
#header{position:fixed;left:0;top:0;width:100%;z-index:1000;transition:all 0.4s;}
#header:after{
	display:block;content:"";
	width:100%;height:120px;
	background:#fff;
	position:absolute;left:0;top:100%;
	transform-origin:top;transform:scaleY(0);
	box-shadow:0 1px 0 #eee inset;
	transition:all 0.4s;
}
#header.on:after{transform:scaleY(1);}

.head{position:relative;display:flex;justify-content:center;}
.head h1{position:absolute;left:4%;top:32px;z-index:9999;}
.head h1 a{
	display:block;
	width:137px;height:47px;
	background:url(/wp-content/uploads/keoc/assets/images/common/logo1.png) no-repeat center;
	background-size:contain;
	text-indent:-9999px;
	transition:all 0.4s;
}
.head .pcNav{}
.head .pcNav>ul{display:flex;}
.head .pcNav>ul>li{margin:0 1.9vw;}
.head .pcNav>ul>li>a{
	font-size:20px;color:#fff;font-weight:500;line-height:110px;
	text-transform:uppercase;
	transition:all 0.4s;
}
.head .pcNav>ul>li>ul{
	display:none;
	overflow:hidden;
	position:absolute;z-index:10;
	left:50%;top:100%;
	width:1280px;
	transform:translateX(-50%);
	text-align:center;
}
.head .pcNav>ul>li>ul>li{
	display:inline-block;
	position:relative;
	margin:0;line-height:120px;
}
.head .pcNav>ul>li>ul>li>a{
	display:block;
	padding:0 40px;font-weight: 500;
	box-sizing:border-box;
	font-size:18px;color:#000;
	transition:all 0.24s;
	position: relative;z-index:10;
}

.head .gnb{
	position:absolute;right:4%;top:33px;
	display:flex;align-items:center;
}
.head .gnb .contact{
	display: block;
	padding: 0 15px;
	height: 46px;
	line-height: 46px;
	border:1px solid rgba(255,255,255,0.7);
	border-radius: 50px;
	font-size:13px;color:#fff;text-align:center;
	margin-right: 25px;
	transition:all 0.4s;
}
.head .gnb .language{margin-right:25px;}
.head .gnb .language>a{
	box-sizing:border-box;
	display:block;
	width:46px;height:46px;
	border:1px solid rgba(255,255,255,0.7);border-radius:50%;
	font-size:13px;color:#fff;text-align:center;line-height:44px;
	transition:all 0.4s;
}
.head .gnb .btnMenu{
	position:relative;z-index:5000;
	width:34px;
	cursor:pointer;
}
.head .gnb .btnMenu>div{
	width:100%;height:3px;
	margin-bottom:8px;
	background:#fff;
	transition:all 0.24s;
}
.head .gnb .btnMenu>div:nth-child(3){width:70%;margin-bottom:0;}
.head .gnb .btnMenu.openmenu>div{background:#000;}
.head .gnb .btnMenu.openmenu>div:nth-child(1){transform:translateY(5px) rotate(45deg);}
.head .gnb .btnMenu.openmenu>div:nth-child(3){opacity:0;}
.head .gnb .btnMenu.openmenu>div:nth-child(2){transform: translateY(-5px) rotate(-45deg);}

#header.on{background:#fff;}
#header.on h1 a{
	background:url(/wp-content/uploads/keoc/assets/images/common/logo2.png) no-repeat center;
	background-size:contain;
}
#header.on .head .pcNav>ul>li>a{color:#000;}
#header.on .head .gnb .contact{border:1px solid rgba(0,0,0,0.7);color:#000;}
#header.on .head .gnb .language>a{border:1px solid rgba(0,0,0,0.7);color:#000;}
#header.on .head .gnb .btnMenu>div{background:#000;}

#header.scroll{background:#fff;}
#header.scroll h1 a{
	background:url(/wp-content/uploads/keoc/assets/images/common/logo2.png) no-repeat center;
	background-size:contain;
}
#header.scroll .head .pcNav>ul>li>a{color:#000;}
#header.scroll .head .gnb .contact{border:1px solid rgba(0,0,0,0.7);color:#000;}
#header.scroll .head .gnb .language>a{border:1px solid rgba(0,0,0,0.7);color:#000;}
#header.scroll .head .gnb .btnMenu>div{background:#000;}

#header.all h1 a{
	background:url(/wp-content/uploads/keoc/assets/images/common/logo2.png) no-repeat center;
	background-size:contain;
}

@media(max-width:1399px){

	.head .pcNav{display:none;}

}
@media(max-width:813px){

	.head h1 a{width:105px;height:35px;}
	.head .gnb{top:26px;}
	.head .gnb .contact{margin-right: 15px;}
	.head .gnb .language{margin-right:15px;}

}

/* ---------- 원본 전체메뉴(가로 그리드) ---------- */
.allmenuBg {
	display: block;
	width: 46px;
	height: 46px;
	background: #efefef;
	border-radius: 50%;
	position: absolute;
	left: calc(97% - 23px);
	top: 46px;
	z-index: 1000;
	transform: translate(-50%, -50%) scale(0);
	transition: all 0.8s ease-in-out;
}
.allmenuBg.open{
	transform: translate(-50%, -50%) scale(100);
}
.allmenu{
	position:fixed;right:0;top:0;z-index:2000;
	width:100%;height:100vh;
	background:url(/wp-content/uploads/keoc/assets/images/common/all_bg.jpg) no-repeat center bottom;
	background-size:cover;
	transform: scaleX(0);
}
.allmenu.open{
	transform: scaleX(1);  transition: all 0s 0s;
}
.allmenu .allmenuwrap{
	max-width:100%;
	width:100%;height:100%;
	padding:120px 3.125vw 30px;
	margin:0 auto;
	box-sizing:border-box;
	position:relative;
	display:flex;
	align-items:center;
}
.allmenu .allmenuwrap>ul{height:100%;display:flex;flex-wrap:wrap;width:100%;gap:60px 0;}
.allmenu .allmenuwrap>ul>li{
	position:relative;
	box-sizing:border-box;
	width:25%;
	padding:0;
	opacity: 0;
	transform: translateY(40px);
	transition: all 0.9s 0.1s;
	text-align: center;
}
.allmenu.open .allmenuwrap>ul>li{
	opacity: 1;
	transform: translate(0);
}
.allmenu .allmenuwrap>ul>li>a{
	display: block;
	position:relative;
	width:100%;
	font-size:30px;color:#000;font-weight: 600;text-align: center;
	transition:all 0.2s ease;
}
.allmenu .allmenuwrap>ul>li>a:after{
	display:block;content:"";
	width:8px;height:8px;
	background:#0981f1;
	border-radius:50%;
	position:absolute;left:50%;top:100%;
	transform:translateX(-50%);
}
.allmenu .allmenuwrap>ul>li>a.on{color:#0981f1;}
.allmenu .allmenuwrap>ul>li>ul{display:block; margin-top: 20px;}
.allmenu .allmenuwrap>ul>li>ul>li{margin-bottom:6px;text-align: center;}
.allmenu .allmenuwrap>ul>li>ul>li>a{font-size:18px;color:#000;font-weight:500;text-align: center;font-family: "Pretendard Variable";}
.allmenu .allmenuwrap>ul>li>ul>li:hover>a{color:#0981f1;font-weight: 500;}
.allmenu .allmenuwrap>ul>li>ul>li>ul{padding:5px 0 10px 0; display: none;}
.allmenu .allmenuwrap>ul>li>ul>li>ul>li{position:relative;}
.allmenu .allmenuwrap>ul>li>ul>li>ul>li>a{font-size:16px;color:#555;}

@media(max-width:1399px){

	.allmenu .allmenuwrap>ul{display:block;text-align:left;}
	.allmenu .allmenuwrap>ul:after{
		display:block;content:"";
		width:1px;height:100%;
		background:#ccc;
		position:absolute;left:50%;top:0;
	}
	.allmenu .allmenuwrap>ul>li{position:relative;width:50%;z-index:20;}
	.allmenu .allmenuwrap>ul>li:after{
		display:block;content:"";
		width:8px;height:8px;
		background:#0981f1;
		border-radius:50%;
		position:absolute;left:100%;top:50%;
		margin:-4px 0 0 -4px;
		opacity:0;
		transition:all 0.4s;
	}
	.allmenu .allmenuwrap>ul>li.act:after{opacity:1;}
	.allmenu .allmenuwrap>ul>li>a{font-size:5vw;text-align:left;}
	.allmenu .allmenuwrap>ul>li>a:after{display:none;}
	.allmenu .allmenuwrap>ul>li>ul{
		display:none;
		position:absolute;left:100%;top:0;
		width:100%;
		box-sizing:border-box;
		padding:0 10%;
	}
	.allmenu .allmenuwrap>ul>li:first-child>ul{display:block;}
	.allmenu .allmenuwrap>ul>li>ul>li{position:relative;margin-bottom:3px;text-align:left;}
	.allmenu .allmenuwrap>ul>li>ul>li.onoff2>a:after{
		display:inline-block;content:"";
		vertical-align:top;
		width:6px;height:6px;
		margin:8px 0 0 10px;
		border-right:3px solid #444;border-bottom:3px solid #444;
		transform:rotate(45deg);
		transition:all 0.4s;
		display: none;
	}
	.allmenu .allmenuwrap>ul>li>ul>li.onoff2.act>a:after{transform:rotate(225deg) translate(-4px, -4px);}
	.allmenu .allmenuwrap>ul>li>ul>li.onoff2:hover>a:after{border-right:3px solid #0981f1;border-bottom:3px solid #0981f1;}
	.allmenu .allmenuwrap>ul>li>ul>li>a{position:relative;}
	.allmenu .allmenuwrap>ul>li>ul>li>ul{display:none;}

}

/* ---------- 버티컬 재구성 + 드로어 ---------- */
/* ============================================================================
   헤더 드롭다운 / 전체메뉴 — 버티컬 재구성 (요구사항 반영)
   header.css 끝에 이어 붙는다. 원본 common.css 의 가로 메가 드롭다운과
   4열 전체메뉴 그리드를 덮어쓴다.

   [원본]
     .head .pcNav>ul>li>ul  : left:50%, width:1280px, text-align:center,
                              li 를 inline-block 으로 가로 나열 (line-height 120px)
     #header.on:after       : 120px 높이의 흰 바를 전체 폭으로 펼침
     .allmenu .allmenuwrap>ul>li : width:25% 4열 가로 그리드

   [변경]
     1차 항목 hover -> 바로 아래로 내려오는 세로 리스트
     3차 항목       -> 우측으로 펼치는 중첩 세로 리스트
     전체메뉴       -> 1열 세로 아코디언 드로어
   ========================================================================== */

/* --- 1차 항목을 드롭다운의 기준 요소로 ------------------------------------ */
.head .pcNav>ul>li{position:relative;}

/* 전체 폭 흰 바는 쓰지 않는다. 헤더 자체 배경(#header.on)만 사용. */
#header:after{display:none;}

/* --- 2차: 1차 항목 아래 세로 드롭다운 ------------------------------------ */
/* 표시/숨김은 순수 CSS hover 로 처리한다(원본은 JS slideDown 이었다).
   패널이 1차 항목의 자식이므로 항목 -> 패널로 마우스를 옮겨도 hover 가 유지된다. */
.head .pcNav>ul>li:hover>ul,
.head .pcNav>ul>li:focus-within>ul{display:block;}

.head .pcNav>ul>li>ul{
	left:0;
	top:100%;
	width:auto;
	min-width:230px;
	transform:none;
	text-align:left;
	background:#fff;
	border-top:3px solid var(--color-primary, #0981f1);
	box-shadow:0 14px 34px rgba(0,0,0,.12);
	padding:10px 0;
	overflow:visible;
}
.head .pcNav>ul>li>ul>li{
	display:block;
	line-height:normal;
	margin:0;
}
.head .pcNav>ul>li>ul>li>a{
	display:block;
	padding:11px 26px;
	font-size:18px;
	font-weight:500;
	color:#000;
	text-align:left;
	white-space:nowrap;
}
.head .pcNav>ul>li>ul>li>a:hover{color:var(--color-primary, #0981f1);}

/* --- 3차: 우측으로 펼치는 중첩 세로 리스트 -------------------------------- */
.head .pcNav>ul>li>ul>li>ul{
	display:none;
	position:absolute;
	left:100%;
	top:-13px;
	margin:0;
	min-width:240px;
	padding:10px 0;
	background:#fff;
	border-top:3px solid var(--color-primary, #0981f1);
	box-shadow:0 14px 34px rgba(0,0,0,.12);
}
.head .pcNav>ul>li>ul>li:hover>ul{display:block;}
.head .pcNav>ul>li>ul>li>ul>li{display:block;margin:0;}
.head .pcNav>ul>li>ul>li>ul>li>a{
	display:block;
	padding:10px 26px;
	font-size:16px;
	font-weight:400;
	color:#555;
	text-align:left;
	white-space:nowrap;
}
.head .pcNav>ul>li>ul>li>ul>li>a:hover{color:var(--color-primary, #0981f1);}

/* 3차가 있는 2차 항목에 우측 셰브론 */
.head .pcNav>ul>li>ul>li.has-sub>a::after{
	display:inline-block;
	content:"";
	width:6px;height:6px;
	margin:0 0 3px 12px;
	border-top:1px solid #999;
	border-right:1px solid #999;
	transform:rotate(45deg);
	vertical-align:middle;
}

/* 1차 항목 hover 시 헤더 배경을 흰색으로 (원본 #header.on 과 동일한 효과) */
#header.on,
#header.on .head .pcNav>ul>li>a{color:#000;}
#header.on h1 a{
	background:url(/wp-content/uploads/keoc/assets/images/common/logo2.png) no-repeat center;
	background-size:contain;
}
#header.on .head .gnb .contact,
#header.on .head .gnb .language>a{border-color:rgba(0,0,0,.7);color:#000;}
#header.on .head .gnb .btnMenu>div{background:#000;}

/* ============================================================================
   전체메뉴 드로어 — 1열 세로 아코디언 (전 뷰포트 공통)
   ========================================================================== */

/* 배경: 원형 확대 트릭 대신 일반적인 딤 처리 */
.allmenuBg{
	position:fixed;
	left:0;top:0;
	width:100%;height:100%;
	border-radius:0;
	background:rgba(0,0,0,.5);
	opacity:0;
	visibility:hidden;
	transform:none;
	transition:opacity .35s, visibility .35s;
	z-index:calc(var(--z-drawer, 2000) - 1);
}
.allmenuBg.open,
.allmenuBg.on{opacity:1;visibility:visible;transform:none;}

/* 드로어가 열려 있는 동안 헤더의 햄버거는 숨긴다.
   (z-index 5000 이라 드로어 위로 떠서 닫기 버튼과 X 두 개가 겹쳐 보인다.
    닫기는 드로어 자체의 .btnCloseMenu 가 담당한다.) */
#header.all .head .gnb .btnMenu{display:none;}

.allmenu{
	position:fixed;
	right:0;top:0;
	width:min(440px, 100%);
	height:100vh;
	background:#fff;
	background-image:none;
	transform:translateX(100%);
	transition:transform .45s cubic-bezier(.22,1,.36,1);
	z-index:var(--z-drawer, 2000);
	box-shadow:-10px 0 40px rgba(0,0,0,.14);
}
.allmenu.open{transform:translateX(0);}

.allmenu .allmenuwrap{
	display:block;
	max-width:none;
	width:100%;
	height:100%;
	padding:0;
	margin:0;
	position:relative;
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

/* 드로어 상단 (로고 + 닫기) */
.allmenuhead{
	display:flex;
	align-items:center;
	justify-content:space-between;
	height:80px;
	padding:0 24px;
	border-bottom:1px solid var(--color-gray-150, #efefef);
	position:sticky;
	top:0;
	background:#fff;
	z-index:2;
}
.allmenuhead .allmenulogo{
	display:block;
	width:110px;height:38px;
	background:url(/wp-content/uploads/keoc/assets/images/common/logo2.png) no-repeat left center;
	background-size:contain;
	text-indent:-9999px;
	overflow:hidden;
}
.allmenuhead .btnCloseMenu{
	position:relative;
	width:26px;height:26px;
	cursor:pointer;
}
.allmenuhead .btnCloseMenu span{
	position:absolute;left:0;top:50%;
	width:100%;height:2px;
	background:#111;
}
.allmenuhead .btnCloseMenu span:nth-child(1){transform:rotate(45deg);}
.allmenuhead .btnCloseMenu span:nth-child(2){transform:rotate(-45deg);}

/* 메뉴 목록 — 1열 세로 아코디언 */
.allmenu .allmenuwrap>ul{
	display:block;
	height:auto;
	flex-wrap:nowrap;
	gap:0;
	padding:8px 0 40px;
}
.allmenu .allmenuwrap>ul>li{
	position:relative;
	width:100%;
	padding:0;
	text-align:left;
	opacity:1;
	transform:none;
	transition:none;
	border-bottom:1px solid var(--color-gray-150, #efefef);
}
.allmenu.open .allmenuwrap>ul>li{opacity:1;transform:none;}
.allmenu .allmenuwrap>ul>li>a{
	display:block;
	position:relative;
	width:auto;
	padding:18px 24px;
	font-size:21px;
	font-weight:600;
	color:#111;
	text-align:left;
	transition:color .2s;
}
.allmenu .allmenuwrap>ul>li>a::after{display:none;}
.allmenu .allmenuwrap>ul>li>a.on{color:var(--color-primary, #0981f1);}

/* 아코디언 화살표 — 하위가 있는 항목만 */
.allmenu .allmenuwrap>ul>li.onoff>a::before,
.allmenu .allmenuwrap>ul>li>ul>li.onoff>a::before{
	content:"";
	position:absolute;
	right:26px;
	top:50%;
	width:7px;height:7px;
	margin-top:-5px;
	border-right:1.5px solid #888;
	border-bottom:1.5px solid #888;
	transform:rotate(45deg);
	transition:transform .3s;
}
.allmenu .allmenuwrap>ul>li.onoff.act>a::before,
.allmenu .allmenuwrap>ul>li>ul>li.onoff.act>a::before{
	transform:rotate(225deg);
	margin-top:-1px;
}

/* 2차 — 기본 접힘, .act 시 펼침 */
.allmenu .allmenuwrap>ul>li>ul{
	display:none;
	margin-top:0;
	padding:0 0 12px;
	background:var(--color-gray-100, #f2f2f2);
}
.allmenu .allmenuwrap>ul>li.act>ul{display:block;}

.allmenu .allmenuwrap>ul>li>ul>li{
	position:relative;
	margin:0;
	text-align:left;
}
.allmenu .allmenuwrap>ul>li>ul>li>a{
	display:block;
	position:relative;
	padding:12px 34px 12px 34px;
	font-size:16px;
	font-weight:500;
	color:#333;
	text-align:left;
}
.allmenu .allmenuwrap>ul>li>ul>li:hover>a{color:var(--color-primary, #0981f1);font-weight:500;}

/* 3차 */
.allmenu .allmenuwrap>ul>li>ul>li>ul{
	display:none;
	padding:0 0 10px;
	background:transparent;
}
.allmenu .allmenuwrap>ul>li>ul>li.act>ul{display:block;}
.allmenu .allmenuwrap>ul>li>ul>li>ul>li{position:relative;}
.allmenu .allmenuwrap>ul>li>ul>li>ul>li>a{
	display:block;
	padding:9px 34px 9px 52px;
	font-size:15px;
	color:#666;
}
.allmenu .allmenuwrap>ul>li>ul>li>ul>li>a:hover{color:var(--color-primary, #0981f1);}

/* 드로어 하단 CTA */
.allmenufoot{padding:24px;border-top:1px solid var(--color-gray-150, #efefef);}
.allmenufoot .contact{
	display:block;
	height:52px;
	line-height:50px;
	border:1px solid rgba(0,0,0,.75);
	border-radius:50px;
	font-size:14px;
	color:#000;
	text-align:center;
}

/* --- 태블릿/모바일: GNB 숨김(원본과 동일) --------------------------------- */
@media(max-width:1399px){
	.head .pcNav{display:none;}
	.allmenu{width:min(400px, 88%);}
}
@media(max-width:812px){
	.allmenu{width:100%;}
	.allmenu .allmenuwrap>ul>li>a{font-size:19px;padding:16px 20px;}
}