._wow{position: absolute; width: 100%; left: 0; bottom: 0; z-index: 999; pointer-events: none; filter: invert(1); opacity: 0.5; pointer-events: none;}
._wow img{width: 100%;}



header{
	position: fixed; z-index: 99999;
	width: 100%;
	--border_radius:6px;

	/* 메가메뉴 토큰 (PSD 기준 1920) */
	--mega_point: #0D55A6;      /* 활성/호버 컬러 */
	--mega_line: #ddd;          /* 상단 라인, 컬럼 구분선 */
	--mega_text: #000;
	--mega_sub_tit: #7c7c7c;    /* 3depth 그룹 타이틀 (GmS OCR 등) */
	--mega_ico_bg: #ececec;
	--mega_card_bg: #f2f2f2;
	--mega_ease: cubic-bezier(0.22, 1, 0.36, 1);
}
header .wrap{
	padding: 28px 0; box-sizing: border-box; position: relative; z-index: 3;
	display: flex; align-items: center; justify-content: space-between;
}
header .wrap::before{
	content:''; display: block; position: absolute; left: 50%; transform: translateX(-50%); top: 0; width: 100vw; height: 100%;
	background-color: #fff; pointer-events: none; opacity: 0;
}
header .wrap .logo{ position: relative; z-index: 2; }
header .wrap .logo svg{height: 40px; width: auto; display: block;}
/* 로고: 기본 흰색 → 흰 배경 상태(.bg / .black / PC 호버·메가메뉴)에서 원본 컬러
   fill 은 class 로 지정 (svg 의 fill 속성 = 원본 컬러는 참고/폴백용) */
header .wrap .logo svg [class^="c_"]{fill: #fff;}
header.bg .wrap .logo .c_navy, header.black .wrap .logo .c_navy{fill: #2D2F80;}
header.bg .wrap .logo .c_blue, header.black .wrap .logo .c_blue{fill: #0455A5;}
header.bg .wrap .logo .c_mint, header.black .wrap .logo .c_mint{fill: #00AEBB;}
@media screen and (min-width:1025px){
	header.megaOn .wrap .logo .c_navy, header:hover .wrap .logo .c_navy{fill: #2D2F80;}
	header.megaOn .wrap .logo .c_blue, header:hover .wrap .logo .c_blue{fill: #0455A5;}
	header.megaOn .wrap .logo .c_mint, header:hover .wrap .logo .c_mint{fill: #00AEBB;}
}
/* 모바일 메뉴 열림(어두운 오버레이)에서는 흰색 유지 */
header.menuOn .wrap .logo svg [class^="c_"]{fill: #fff;}
header .wrap .pc_nav.pc_nav{
    margin-left: 70px;
}
header .wrap .pc_nav.pc_nav > ul{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 80px;
}
/* li 는 static: 메가패널(.sub)의 기준을 header .wrap 으로 잡기 위해 */
header .wrap .pc_nav.pc_nav > ul > li{
	position: static; display: flex; align-items: center; justify-content: center;
}
header .wrap .pc_nav.pc_nav > ul > li > a{
	position: relative;
	font-size: 22px;
	font-weight: 500;
	letter-spacing: -0.04em;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: calc(10/22*1em);
	transition: color 0.3s;
}
/* 1depth 텍스트 ↔ 패널 사이 빈 공간도 hover 영역으로 (헤더 하단까지) */
header .wrap .pc_nav.pc_nav > ul > li > a::before{
	content:''; display: block; position: absolute; z-index: 1;
	left: -20px; right: -20px; top: -28px; bottom: -30px;
}
header .wrap .pc_nav.pc_nav > ul > li > a p{position: relative; z-index: 2;}
header .wrap .pc_nav.pc_nav > ul > li > a i{position: relative; z-index: 2; transition: transform 0.3s var(--mega_ease);}
header .wrap .pc_nav.pc_nav > ul > li.open > a{color: var(--mega_point);}
header .wrap .pc_nav.pc_nav > ul > li.open > a i{transform: rotate(180deg);}

/* ---------------------------------------------------------
   PC 메가메뉴 패널
   - 패널 폭 = header .wrap 폭 (컨텐츠 정렬이 로고/우측버튼과 자동으로 맞음)
   - 흰 배경은 ::before 로 100vw 확장 (header .wrap::before 와 같은 방식)
   - 애니메이션은 clip-path + opacity + transform 만 사용 → 레이아웃 재계산 없이 합성 레이어에서 처리
--------------------------------------------------------- */
header .wrap .pc_nav .sub{
	position: absolute; left: 0; top: 100%; width: 100%; z-index: 1;
	padding: 50px 0; box-sizing: border-box;
	visibility: hidden; opacity: 0;
	clip-path: inset(0 -100vw 100% -100vw);
	transition: clip-path 0.45s var(--mega_ease), opacity 0.3s, visibility 0s 0.45s;
}
header .wrap .pc_nav .sub::before{
	content:''; display: block; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
	width: 100vw; height: 100%; background-color: #fff;
	border-top: 1px solid var(--mega_line); box-sizing: border-box;
	box-shadow: 0 12px 20px rgba(0,0,0,0.06);
}
header .wrap .pc_nav > ul > li.open > .sub{
	visibility: visible; opacity: 1;
	clip-path: inset(0 -100vw -40px -100vw); /* 하단 그림자까지 보이도록 -40px */
	transition: clip-path 0.5s var(--mega_ease), opacity 0.2s, visibility 0s;
}
header .wrap .pc_nav .sub .subInner{
	--col1: 500px;   /* 좌측 비주얼 폭 */
	--d2end: 910px;  /* 2depth 컬럼 오른쪽 구분선 위치 (패널 시작점 기준) */
	--gap: 70px;     /* 컬럼 사이 여백 */
	position: relative; display: flex; align-items: stretch;
	transform: translateY(-12px); transition: transform 0.5s var(--mega_ease);
}
header .wrap .pc_nav > ul > li.open > .sub .subInner{transform: translateY(0);}

/* 좌측 비주얼 */
header .wrap .pc_nav .sub .visual{flex: 0 0 var(--col1); width: var(--col1); box-sizing: border-box;}
/* 이미지(500x300, 배경 #f2f2f2 포함)를 겹쳐 두고 .on 만 크로스페이드 */
header .wrap .pc_nav .sub .visual .imgBox{
	position: relative; aspect-ratio: 500 / 300; border-radius: 20px;
	background-color: var(--mega_card_bg); overflow: hidden;
	isolation: isolate; /* radius + overflow 클리핑을 자체 레이어에서 처리 (Safari 대비) */
}
header .wrap .pc_nav .sub .visual .imgBox img{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transform: scale(1.04);
	transition: opacity 0.4s, transform 0.6s var(--mega_ease);
}
header .wrap .pc_nav .sub .visual .imgBox img.on{opacity: 1; transform: scale(1);}

/* 2depth */
header .wrap .pc_nav .sub .d2{
	position: relative; flex: 0 0 auto; width: calc(var(--d2end) - var(--col1));
	padding: 10px 38px 0 var(--gap); box-sizing: border-box;
	border-right: 1px solid var(--mega_line);
}
header .wrap .pc_nav .sub .d2 > li{position: static;}
header .wrap .pc_nav .sub .d2 > li > a{
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 16px 0; font-size: 20px; line-height: 1.2; font-weight: 500; letter-spacing: -0.025em;
	color: var(--mega_text); transition: color 0.25s;
}
header .wrap .pc_nav .sub .d2 > li > a i{
	font-size: 20px; color: var(--mega_text);
	transform: rotate(-90deg);   /* caret-down 을 우측 화살표로 회전 */
	transition: color 0.25s;
}
/* 화살표는 항상 노출, 활성(.on) 항목만 포인트색 */
/* header .wrap .pc_nav .sub .d2 > li.on > a i{color: var(--mega_point);} */
html.pc header .wrap .pc_nav .sub .d2 > li:hover > a i{color: var(--mega_point);}
/* 2depth 글씨색은 활성(.on)과 무관하게 호버 중일 때만 포인트색 (3depth 로 이동해도 유지) */
html.pc header .wrap .pc_nav .sub .d2 > li:hover > a{color: var(--mega_point);}

/* 3depth : 2depth 컬럼 오른쪽에 겹쳐 두고 .on 만 노출 */
header .wrap .pc_nav .sub .d3{
	position: absolute; left: 100%; top: 0; padding-left: var(--gap);
	display: flex; align-items: flex-start; gap: 0 118px; white-space: nowrap;
	visibility: hidden; opacity: 0; pointer-events: none;
	transition: opacity 0.2s, visibility 0s 0.2s;
}
header .wrap .pc_nav .sub .d2 > li.on > .d3{
	visibility: visible; opacity: 1; pointer-events: auto;
	transition: opacity 0.3s, visibility 0s;
}
header .wrap .pc_nav .sub .d3 .grp strong{
	display: block; margin: -4px 0 16px;
	font-size: 14px; line-height: 1.2; font-weight: 600; letter-spacing: -0.025em; color: var(--mega_sub_tit);
	transition: color 0.25s;
}
header .wrap .pc_nav .sub .d3 .grp:hover strong{color: var(--mega_point);}
header .wrap .pc_nav .sub .d3 .grp > ul:first-child{padding-top: 20px;} /* 그룹타이틀 없는 경우 */
header .wrap .pc_nav .sub .d3 .grp ul{display: flex; flex-direction: column; gap: 14px;}
header .wrap .pc_nav .sub .d3 .grp li a{
	display: flex; align-items: center; gap: 16px;
	font-size: 16px; font-weight: 400; letter-spacing: -0.025em; color: var(--mega_text);
	transition: color 0.25s;
}
header .wrap .pc_nav .sub .d3 .grp li a .ico{
	flex: 0 0 40px; width: 40px; height: 40px; border-radius: 4px;
	display: flex; align-items: center; justify-content: center;
	background-color: var(--mega_ico_bg); color: var(--mega_text); font-size: 18px;
	transition: background-color 0.25s, color 0.25s;
}
header .wrap .pc_nav .sub .d3 .grp li a p{position: relative;}
/* 굵기 변경 시 글자폭이 바뀌어 흔들리지 않도록 text-shadow 로 SemiBold 느낌만 줌 */
html.pc header .wrap .pc_nav .sub .d3 .grp li a:hover{color: var(--mega_point); }
/* text-shadow: 0.3px 0 0 currentColor, -0.3px 0 0 currentColor; */
html.pc header .wrap .pc_nav .sub .d3 .grp li a:hover .ico{background-color: var(--mega_point); color: #fff;}

/* 3depth 아이템 순차 등장 (2depth 전환마다 재생) */
header .wrap .pc_nav .sub .d3 li,
header .wrap .pc_nav .sub .d3 .grp strong{opacity: 0; transform: translateX(-10px);}
header .wrap .pc_nav .sub .d2 > li.on > .d3 li,
header .wrap .pc_nav .sub .d2 > li.on > .d3 .grp strong{
	opacity: 1; transform: translateX(0);
	transition: opacity 0.35s, transform 0.45s var(--mega_ease), color 0.25s;
}
header .wrap .pc_nav .sub .d2 > li.on > .d3 .grp:nth-child(2) *{transition-delay: 0.04s;}
header .wrap .pc_nav .sub .d2 > li.on > .d3 .grp:nth-child(3) *{transition-delay: 0.08s;}
header .wrap .pc_nav .sub .d2 > li.on > .d3 li:nth-child(2){transition-delay: 0.04s;}
header .wrap .pc_nav .sub .d2 > li.on > .d3 li:nth-child(3){transition-delay: 0.08s;}
header .wrap .pc_nav .sub .d2 > li.on > .d3 li:nth-child(4){transition-delay: 0.12s;}
html.pc header .wrap .pc_nav .sub .d3 li a:hover,
html.pc header .wrap .pc_nav .sub .d3 li a:hover *{transition-delay: 0s;}

/* 3depth 호버 시 영문명 → 한글 소제목 롤링 (PC 전용)
   - p 자체를 위로 1줄(-100%) 이동시키고, clip-path 를 반대로(+100%) 내려 보이는 창은 제자리에 고정
   - 한글은 ::after(content: attr(data-ko))로 p 바로 아래(top:100%)에 대기 → 이동하면 창 안으로 들어옴
   - transform + clip-path 만 바뀌므로 레이아웃 재계산 없음
   - 좌우 inset 을 -100vw 로 열어서 한글이 영문보다 길어도 잘리지 않음
   - p 를 아이콘 높이(40px)의 2줄 창으로 잡고, 긴 소제목(특히 일문)은 옆 컬럼을 덮지 않도록 컬럼 간격 안에서 2줄로 접음
     (행 높이는 아이콘 40px 그대로라 레이아웃 변화 없음, 창이 40px 라 2줄도 그대로 들어옴)
   - data-ko 가 비어 있으면 동작하지 않음 */
@media screen and (min-width:1025px){
	html.pc header .wrap .pc_nav .sub .d3 .grp li a p[data-ko]:not([data-ko=""]){
		display: flex; align-items: center; min-height: 40px; /* 아이콘(.ico 40px) 높이의 창 */
		white-space: nowrap; line-height: 1.4;
		clip-path: inset(0 -100vw 0 -100vw);
		transition: transform 0.45s var(--mega_ease), clip-path 0.45s var(--mega_ease);
	}
	html.pc header .wrap .pc_nav .sub .d3 .grp li a p[data-ko]:not([data-ko=""])::after{
		content: attr(data-ko);
		position: absolute; left: 0; top: 100%; height: 100%;
		display: flex; align-items: center;
		white-space: normal; word-break: normal; overflow-wrap: anywhere; line-height: 1.25; /* 2줄 = 40px */
		width: max-content; max-width: max(150px, calc(100% + 94px)); /* 영문명 폭 + 컬럼 gap(118px) 안쪽 → 옆 컬럼 아이콘에 가려지지 않음 */
	}
	html.pc:not(.jp) header .wrap .pc_nav .sub .d3 .grp li a p[data-ko]:not([data-ko=""])::after{word-break: keep-all;} /* 국문은 어절 단위로 */
	html.pc header .wrap .pc_nav .sub .d3 .grp li a:hover p[data-ko]:not([data-ko=""]){
		transform: translateY(-100%);
		clip-path: inset(100% -100vw -100% -100vw);
	}
}
@media (prefers-reduced-motion: reduce){
	html.pc header .wrap .pc_nav .sub .d3 .grp li a p[data-ko]{transition: none !important;}
}

/* 타이틀형 (GMISSION) */
header .wrap .pc_nav .sub.typeTit .subInner{--col1: 400px;}
header .wrap .pc_nav .sub.typeTit .visual{border-right: 1px solid var(--mega_line);}
header .wrap .pc_nav .sub.typeTit .visual .tit{
	padding: 22px 0 0 13px; font-family: 'Archivo', inherit;
	font-size: 50px; line-height: 1; font-weight: 500; letter-spacing: -0.02em; color: var(--mega_text);
}
header .wrap .pc_nav .sub.typeTit .d2{min-height: 225px; padding-top: 14px;}
header .wrap .pc_nav .sub.typeTit .d2 > li > a{padding: 12px 0;}
header .wrap .pc_nav .sub.typeTit .d3{padding-top: 14px; padding-left: 71px;}
header .wrap .pc_nav .sub.typeTit .d3 ul{display: flex; flex-direction: column;}
header .wrap .pc_nav .sub.typeTit .d3 li a{
	display: block; padding: 12px 0; font-size: 20px; line-height: 1.2; font-weight: 400; letter-spacing: -0.025em;
	color: var(--mega_text); transition: color 0.25s;
}
html.pc header .wrap .pc_nav .sub.typeTit .d3 li a:hover{color: var(--mega_point);}

header .wrap .right{
	display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-right: 30px; box-sizing: border-box;
}
header .wrap .right .contactBtn{
	color: #fff;
	display: inline-flex; align-items: center; justify-content: center; gap: var(--border_radius);
	height: calc(40/16*1em); position: relative; padding: 0 20px; box-sizing: border-box;
	transition: color 0.4s;
}
header .wrap .right .contactBtn::after,
header .wrap .right .contactBtn::before{
	content:''; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	border-radius: 8px; box-sizing: border-box; pointer-events: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	transition: opacity 0.4s;
}
header .wrap .right .contactBtn::after{background: var(--gradient);}
header .wrap .right .contactBtn::before {background-color: #fff; opacity: 0; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
header .wrap .right .contactBtn p{position: relative; z-index: 2;}
header .wrap .right .contactBtn i{position: relative; z-index: 2; font-size: calc(15/16*1em); transform: translateY(-8%);}
html.pc header .wrap .right .contactBtn:hover::before{opacity: 1;}
html.pc header .wrap .right .contactBtn:hover::after{opacity: 0;}
html.pc header .wrap .right .contactBtn:hover{color: #000;}
header .wrap .right .lang{position: relative; display: flex; align-items: center; justify-content: center;}
header .wrap .right .lang .box{
	background-color: #fff; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
	border-radius: 8px; display: flex; align-items: center; justify-content: center;
	width: calc(62/16*1em); height: calc(40/16*1em); color: #000; font-weight: 600; letter-spacing: -0.04em;
	cursor: pointer; box-sizing: border-box; transition: border-color 0.3s;
	border: 1px solid transparent;
}
header .wrap .right .lang .box p{}
header .wrap .right .lang .box i{font-size: calc(20/16*1em); transform: translateX(16%);}
header .wrap .right .lang ul{
	position: absolute; top: 100%; margin-top: 6px; border-radius: var(--border_radius);
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; display: none;
}
header .wrap .right .lang ul::before {
	content:''; display: block; position: absolute; width: 100%; height: 20px;
	bottom: 100%; margin-bottom: -5px;
}
header .wrap .right .lang ul li{}
header .wrap .right .lang ul li a{
	width: calc(62/16*1em); text-align: center; font-weight: 500; background-color: #fff;
	padding: 4px 0; box-sizing: border-box; transition: background-color 0.1s,color 0.1s;
}
html.pc header .wrap .right .lang ul li a:hover{background-color: #444; color: #fff;}
header .wrap .right .lang ul li:first-child a{padding-top: 8px; border-radius: var(--border_radius) var(--border_radius) 0 0;}
header .wrap .right .lang ul li:last-child a{padding-bottom: 8px; border-radius: 0 0 var(--border_radius) var(--border_radius);}

header .wrap .right .menuIco{
	font-size: 1px;
	width: 46em; height: 30em; align-items: center; justify-content: center; position: relative;
	display: none;
}
header .wrap .right .menuIco div{
	width: 100%; height: 2px; background-color: #fff;
	position: absolute; border-radius: 20px; transition: top 0.5s,bottom 0.5s,transform 0.5s,opacity 0.5s;
}
header .wrap .right .menuIco div:nth-child(1){top: 0;}
header .wrap .right .menuIco div:nth-child(2){}
header .wrap .right .menuIco div:nth-child(3){bottom: 0;}

header.menuOn .wrap .right .menuIco div:nth-child(1){top: 13em; transform: rotate(45deg);}
header.menuOn .wrap .right .menuIco div:nth-child(2){opacity: 0; transform: scale(0);}
header.menuOn .wrap .right .menuIco div:nth-child(3){bottom: 14em; transform: rotate(-45deg);}

/* 모바일용 메뉴 */
header ._menuArea{
	position: absolute; z-index: 2;
	width: 100%; height: var(--vh100); left: 0; top: 0;
	box-sizing: border-box; overflow: auto;
	background-color: rgba(0,0,0,0.5); backdrop-filter: blur(10px);
	opacity: 0; pointer-events: none;
}
header ._menuArea .wrap{
	padding-top: 100px; padding-bottom: 40px;
	display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start;
}
header ._menuArea .wrap .mo_nav{
	display: flex; justify-content: flex-end; width: 100%; max-width: 400px;
}
header ._menuArea .wrap .mo_nav > ul{
	width: 100%;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
header ._menuArea .wrap .mo_nav > ul > li{width: 100%;}
header ._menuArea .wrap .mo_nav > ul > li > a{
	font-size: 18px; font-weight: 500; letter-spacing: -0.04em; color: #fff;
	display: flex; align-items: center; justify-content: space-between;
	background-color: #3878B4; color: #fff; border-radius: var(--border_radius);
	padding: 10px; box-sizing: border-box; transition: background-color 0.5s,color 0.5s;
}
header ._menuArea .wrap .mo_nav > ul > li > a p{}
header ._menuArea .wrap .mo_nav > ul > li > a i{transition: transform 0.5s;}
header ._menuArea .wrap .mo_nav > ul > li.on > a i{transform: rotate(180deg);}

/* 모바일: 메가패널을 아코디언 리스트로 */
header ._menuArea .wrap .mo_nav .sub{
	display: none; background-color: #eee; border-radius: var(--border_radius);
	margin-top: 6px; margin-bottom: 10px; overflow: hidden;
}
header ._menuArea .wrap .mo_nav .sub .visual{display: none;}
header ._menuArea .wrap .mo_nav .sub .d2 > li{position: relative;}
header ._menuArea .wrap .mo_nav .sub .d2 > li::after{
	content:''; display: block; position: absolute; width: calc(100% - 20px); height: 1px;
	left: 10px; bottom: 0; background-color: #ddd;
}
header ._menuArea .wrap .mo_nav .sub .d2 > li:last-child::after{display: none;}
header ._menuArea .wrap .mo_nav .sub .d2 > li > a{
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 10px; box-sizing: border-box; font-size: 14px; font-weight: 600; letter-spacing: -0.04em;
}
header ._menuArea .wrap .mo_nav .sub .d2 > li > a i{transition: transform 0.4s;}
header ._menuArea .wrap .mo_nav .sub .d2 > li.on > a{color: #0D55A6;}
header ._menuArea .wrap .mo_nav .sub .d2 > li.on > a i{transform: rotate(180deg);}
header ._menuArea .wrap .mo_nav .sub .d3{display: none; padding: 0 10px 10px;}
header ._menuArea .wrap .mo_nav .sub .d3 .grp + .grp{margin-top: 8px;}
header ._menuArea .wrap .mo_nav .sub .d3 .grp strong{
	display: block; padding: 4px 0; font-size: 12px; font-weight: 600; color: #7c7c7c;
}
header ._menuArea .wrap .mo_nav .sub .d3 li a{
	display: flex; align-items: center; gap: 8px; padding: 6px 0;
	font-size: 14px; font-weight: 400; letter-spacing: -0.04em;
}
header ._menuArea .wrap .mo_nav .sub .d3 li a .ico{
	width: 26px; height: 26px; border-radius: 4px; background-color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
}
header ._menuArea .wrap .contactBtn{
	border-radius: var(--border_radius); background-color: #fff; font-size: 18px; font-weight: 600;
	letter-spacing: -0.04em; width: 100%; padding: 10px; display: flex; align-items: center; justify-content: space-between;
	margin-top: 10px; max-width: 400px;
	box-sizing: border-box;
}
header ._menuArea .wrap .contactBtn p{}
header ._menuArea .wrap .contactBtn i{}

/* ---------------------------------------------------------
   헤더 흰 배경 상태 : 흰 배경 + 진한 텍스트 + 컬러 로고
   - .bg(스크롤) / .black : 전 해상도
   - .megaOn / 헤더 호버 : 1025px 이상(PC)만. 1024 이하는 호버 효과 없음
--------------------------------------------------------- */
header.bg .wrap::before{opacity: 1;}
header.bg .wrap .pc_nav.pc_nav > ul > li > a,
header.black .wrap .pc_nav.pc_nav > ul > li > a{ color: #0d0d23; }
header.bg .wrap .right .menuIco div,
header.black .wrap .right .menuIco div{ background-color: #0d0d23; }
header.bg .wrap .right .lang .box{ border-color: #0d0d23; box-shadow: none; }

@media screen and (min-width:1025px){
	header.megaOn .wrap::before,
	header:hover .wrap::before{opacity: 1;}
	header.megaOn .wrap .pc_nav.pc_nav > ul > li > a,
	header:hover .wrap .pc_nav.pc_nav > ul > li > a{ color: var(--mega_text); }
	header.megaOn .wrap .pc_nav.pc_nav > ul > li.open > a,
	header .wrap .pc_nav.pc_nav > ul > li > a:hover{ color: var(--mega_point); }
	header.megaOn .wrap .right .lang .box,
	header:hover .wrap .right .lang .box{ border-color: #0d0d23; box-shadow: none; }
}



/* transition 모음 */
header .wrap{transition: opacity 0.5s,transform 0.5s;}
header .wrap::before{transition: opacity 0.5s;}
header .wrap .logo svg *{transition: fill 0.5s;}
header ._menuArea{transition: opacity 0.5s;}

header.hide .wrap{transform: translateY(-80%); opacity: 0; pointer-events: none;}

header.menuOn ._menuArea{opacity: 1; pointer-events: auto;}
header.menuOn .wrap::before{opacity: 0;}
header.menuOn .wrap{transform: translateY(0); opacity: 1; pointer-events: auto;}
header.menuOn .wrap .right .menuIco div{background-color: #fff;} /* 어두운 오버레이 위 X 아이콘 */

@media screen and (max-width: 1800px){
    header .wrap .pc_nav .sub .d3{ gap: 0 80px; }
    html.pc header .wrap .pc_nav .sub .d3 .grp li a p[data-ko]:not([data-ko=""])::after{ max-width: max(150px, calc(100% + 56px)); }
}

@media screen and (max-width:1600px) {
	header .wrap .pc_nav .sub .subInner{--col1: 380px; --d2end: 760px; --gap: 50px;}
	header .wrap .pc_nav .sub.typeTit .subInner{--col1: 300px;}
	header .wrap .pc_nav .sub .d3{gap: 0 70px;}
	html.pc header .wrap .pc_nav .sub .d3 .grp li a p[data-ko]:not([data-ko=""])::after{ font-size: 14px; max-width: max(130px, calc(100% + 46px)); } /* 좁은 폭: 소제목을 한 단계 작게 해 2줄 안에 */
	header .wrap .pc_nav .sub.typeTit .d3{padding-left: 51px;}
}
@media screen and (max-width:1440px) {
	header{--border_radius:4px;}
	header .wrap{padding: 20px 0;}
	header .wrap .logo svg{height: 30px;}
	header .wrap .pc_nav.pc_nav > ul > li > a{font-size: 18px; }
	header .wrap .pc_nav.pc_nav > ul > li > a::before{top: -20px; bottom: -22px;}
	header .wrap .right{gap: 10px; padding-right: 0;}
	header .wrap .right .contactBtn{font-size: 14px;}
	header .wrap .right .contactBtn::after, header .wrap .right .contactBtn::before{border-radius: var(--border_radius);}
	header .wrap .right .lang{font-size: 14px;}
	header .wrap .right .lang .box{ border-radius: var(--border_radius);}

	header .wrap .pc_nav .sub{padding: 40px 0;}
	header .wrap .pc_nav .sub .subInner{--col1: 300px; --d2end: 640px; --gap: 40px;}
	header .wrap .pc_nav .sub.typeTit .subInner{--col1: 240px;}
	header .wrap .pc_nav .sub .d2 > li > a,
	header .wrap .pc_nav .sub.typeTit .d3 li a{font-size: 18px;}
	header .wrap .pc_nav .sub.typeTit .visual .tit{font-size: 40px;}
    header .wrap .pc_nav .sub .d3 .grp li a{ gap: 10px; }
	header .wrap .pc_nav .sub.typeTit .d3{padding-left: 41px;}

	header .wrap .right .menuIco{font-size: 0.8px; }
}
@media screen and (max-width:1280px) {
	header .wrap .pc_nav.pc_nav{margin-left: 0;}
	header .wrap .pc_nav.pc_nav > ul{gap: 50px;}


	/* 비주얼 카드 제외하고 2depth/3depth 만 */
	header .wrap .pc_nav .sub:not(.typeTit) .visual{display: none;}
	header .wrap .pc_nav .sub:not(.typeTit) .subInner{--col1: 0px; --d2end: 300px;}
	header .wrap .pc_nav .sub:not(.typeTit) .d2{padding-left: 0;}
	header .wrap .pc_nav .sub.typeTit .subInner{--col1: 200px; --d2end: 520px;}
    header .wrap .pc_nav .sub .subInner{--gap: 30px;}
}
@media screen and (max-width:1024px) {
	header .wrap .pc_nav.pc_nav{display: none;}
	header .wrap .right .contactBtn{font-size: 12px;}
	header .wrap .right .lang{font-size: 12px;}

	header .wrap .right .menuIco{display: flex; font-size: 0.7px; }
	header.menuOn .wrap::before{ display: none; }
	/* 1024 이하: 스크롤 시 헤더 숨김 없음 */
	header.hide .wrap{transform: none; opacity: 1; pointer-events: auto;}
}
@media screen and (max-width:820px) {}
@media screen and (max-width:500px) {
	header .wrap{padding: 12px 0;}
	header .wrap .right .contactBtn{display: none;}
	header .wrap .right .lang .box{height: 24px;}
	header .wrap .right .menuIco{font-size: 0.6px; }
}
@media screen and (max-width:320px) {}



footer{
	background-color: var(--navy); color: #fff; margin-top: -1px;
}
footer .wrap{padding-top: 96px;}
footer .wrap .topArea{
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	padding-bottom: 31px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	box-sizing: border-box;
	margin-bottom: 48px;
}
footer .wrap .topArea .logo{}
footer .wrap .topArea .logo svg{height: 114px;}
footer .wrap .topArea .logo svg *{fill: #fff;}
footer .wrap .topArea .topBtn{font-size: 20px; font-weight: 500; letter-spacing: -0.02em; cursor: pointer;}
footer .wrap .topArea .topBtn i{}
footer .wrap .midArea{
	display: flex;
	align-items: flex-start;
	padding-bottom: 23px;
	border-bottom: 1px solid rgba(255,255,255,0.2);
	box-sizing: border-box;
}
footer .wrap .midArea > div{flex: 1; line-height: 1.4;}
footer .wrap .midArea .left{
	font-weight: 500;
	letter-spacing: -0.02em;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: calc(32/16*1em) 0;
}
footer .wrap .midArea .left dl{
	display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;
	min-width: calc(178/16*1em);
}

footer .wrap .midArea .left dt{margin-bottom: calc(9/16*1em);}
footer .wrap .midArea .left dd{opacity: 0.5; transition: opacity 0.1s;}
footer .wrap .midArea .left dd a{padding: calc(10/16*1em) 0;box-sizing: border-box;}
html.pc footer .wrap .midArea .left dd:hover{opacity: 1;}
footer .wrap .midArea .right{
	padding-left: 105px;
	box-sizing: border-box;
	font-weight: 500;
	letter-spacing: -0.02em;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: calc(32/16*1em);
}
footer .wrap .midArea .right .info{}
footer .wrap .midArea .right .info em{
	display: block; opacity: 0.5; margin-bottom: calc(8/16*1em);
}
footer .wrap .midArea .right .info P{}
footer .wrap .midArea .right .flexBx{
	display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap;  gap: calc(32/16*1em) 0;
}
footer .wrap .midArea .right .flexBx .info{min-width: calc(183/16*1em); box-sizing: border-box;}
footer .wrap .midArea .right .flexBx .info.paddingLeft{padding-left: 20px;}

footer .wrap .bottomArea{
	display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px 60px;
	font-weight: 500; letter-spacing: -0.02em; padding: calc(28/16*1em) 0; box-sizing: border-box; line-height: 1.3;
}
footer .wrap .bottomArea ._privacyBtn{cursor: pointer;}
footer .wrap .bottomArea .copy{opacity: 0.5;}


@media screen and (max-width:1600px) {
	footer .wrap .topArea .logo svg{height: 80px;}
	footer .wrap .midArea{flex-direction: column; gap: calc(32/16*1em);}
	footer .wrap .midArea .left{flex-wrap: wrap; gap: calc(32/16*1em);}
	footer .wrap .midArea .right{padding-left: 0;}
	footer .wrap .midArea .right .flexBx .info.paddingLeft{padding-left: 0;}
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	footer .wrap .topArea{flex-direction: column-reverse; gap: 30px; align-items: flex-start;}
	footer .wrap .topArea .logo svg{height: 60px;}
	footer .wrap .topArea .topBtn{font-size: 16px; }
}
@media screen and (max-width:500px) {
	footer .wrap{padding-top: 60px;}
	footer .wrap .topArea{padding-bottom: 30px; margin-bottom: 30px;}
	footer .wrap .topArea .logo svg{height: 40px;}
	footer .wrap .midArea{padding-bottom: 30px; font-size: 14px; }

	footer .wrap .midArea .left dt{margin-bottom: 4px;}
	footer .wrap .midArea .left dd a{padding: 0.2em 0;}
	footer .wrap .midArea .right .info em{margin-bottom: 4px;}
	footer .wrap .bottomArea{padding: 30px 0; font-size: 14px; }
}
@media screen and (max-width:320px) {}

/* 개인정보처리방침 */
._privacyPopup{
	position: fixed; z-index: 9999999;
	width: 100%; height: 100%; left: 0; top: 0;
	align-items: center; justify-content: center; flex-direction: column; gap: 10px;
	display: flex; pointer-events: none; opacity: 0;
	transition: opacity 0.5s;
}
._privacyPopup.on{pointer-events: auto; opacity: 1;}
._privacyPopup .bg{
	position: absolute; left: 0; top: 0; width: 100%; height: 100%;
	background-color: #000; opacity: 0.8; cursor: pointer;
}
._privacyPopup .cancel{
	color: #fff; position: relative; z-index: 2;
	font-size: 30px; cursor: pointer;
}
._privacyPopup .popupCont{
	position: relative; z-index: 2;
	width: 90%; max-width: 940px; max-height: min(800px,calc(90% - 40px));
	background-color: #fff; border-radius: 10px; overflow: hidden;
	line-height: 1.4;
}
._privacyPopup .popupCont .inner{display: none; overflow: auto; height: auto; max-height: 100%; padding: 60px 20px; box-sizing: border-box;}
._privacyPopup .popupCont .inner.on{display: block;}
._privacyPopup .popupCont .inner .tit{
	font-size: 30px; font-weight: 600; margin-bottom: 40px; text-align: center;
}
._privacyPopup .popupCont .inner .tit:has(+ .span){margin-bottom: 12px;}
._privacyPopup .popupCont .inner .span{text-align: center; font-size: 16px; font-weight: 500; color: #bbb; margin-bottom: 40px;}
._privacyPopup .popupCont .inner .p{}
._privacyPopup .popupCont .inner .p.center{text-align: center;}

._privacyPopup .popupCont .inner .box{margin-top: 40px;}
._privacyPopup .popupCont .inner .box > em{display: block; font-size: 20px; font-weight: 600; margin-bottom: 16px;}
._privacyPopup .popupCont .inner .box .num{
	display: flex; align-items: flex-start; justify-content: flex-start; gap: 4px;
	margin-top: 14px;
}
._privacyPopup .popupCont .inner .box .num b{}
._privacyPopup .popupCont .inner .box .num p{}
._privacyPopup .popupCont .inner .box > p{}

/* 개인정보처리방침 일문 : 띄어쓰기 없는 일본어 줄바꿈 / 금칙 처리 */
._privacyPopup.jp .popupCont{line-height: 1.6; word-break: normal; line-break: strict; overflow-wrap: anywhere;}
._privacyPopup.jp .popupCont .inner .box .num.stack{display: block;}
._privacyPopup.jp .popupCont .inner .box .num.stack b{display: block; margin-bottom: 4px;}

@media screen and (max-width:1600px) {}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:820px) {
	._privacyPopup .popupCont .inner .tit{font-size: 24px; margin-bottom: 20px;}
	._privacyPopup .popupCont .inner .tit:has(+ .span){margin-bottom: 8px;}
	._privacyPopup .popupCont .inner .span{font-size: 14px; margin-bottom: 20px;}
	._privacyPopup .popupCont .inner .p{font-size: 14px; }
	._privacyPopup .popupCont .inner .box > em{font-size: 18px; }
	._privacyPopup .popupCont .inner .box .num{font-size: 14px; }
	._privacyPopup .popupCont .inner .box > p{font-size: 14px; }
}
@media screen and (max-width:500px) {
	._privacyPopup .popupCont .inner{padding: 40px 20px;}

	._privacyPopup .popupCont .inner .box > em{font-size: 16px; }
	._privacyPopup .popupCont .inner .box .num{font-size: 13px; }
	._privacyPopup .popupCont .inner .box > p{font-size: 13px; }
}
@media screen and (max-width:320px) {}