/*
+----------------------------------------------------------------------+
| Copyright (c) 2010 - 2024 SPEAKINGMAX @ WEAVERSBRAIN.Co.Ltd
+----------------------------------------------------------------------+
| 작업일 : 2024-09-25
| 파일설명 : MAX AI 사이트 Header CSS
+----------------------------------------------------------------------+
| 작업자 : 최진영  
+----------------------------------------------------------------------+
| 수정이력
| 20241007 반응형 UI 수정 by 최진영
| 20250212 모바일 반응형 디자인 추가 by 최진영
+----------------------------------------------------------------------+ 
*/

@charset "utf-8";

/* 환경 변수 세팅 */
:root {

	/* 헤더 높이 */
	--header-height: 70px;
	
}

/* 헤더 레이아웃 */
.header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:var(--header-height);
	background:#fff;
	border-bottom:1px solid #f0f0f0;
	z-index: 4;
}
.header .innerBox {
	display:flex;
	justify-content: space-between;
	align-items: center;
	width:100%;
	height:100%;
	padding:0 20px;
}

/* 로고 */
.header .logoImg {
	width:120px;
}


/* 사용자 영역 */
.header .userArea {
	display:none;
}


/* 햄버거 메뉴 */
.header .menuBtn {
	position: relative;
	width: 24px;
	height: 20px;
	cursor: pointer;
}
.header .menuBtn > div {
	position:absolute;
	width: 100%;
	height: 2px;
	background-color: #000;
	border-radius:8px;
	transition: all 0.3s ease;
}
.header .menuBtn .line1 {
	top: 0;
}
.header .menuBtn .line2 {
	top: 50%;
	transform: translateY(-50%);
}
.header .menuBtn .line3 {
	bottom: 0;
}
.header .menuBtn.on .line1 {
	transform: rotate(45deg) translate(6px, 7px);
}
.header .menuBtn.on .line2 {
	opacity: 0;
}
.header .menuBtn.on .line3 {
	transform: rotate(-45deg) translate(6px, -7px);
}

/* 사이드바 dim */
.header .sidebarDim {
	display:none;
	position:fixed;
	top:var(--header-height);
	left:0;
	width:100%;
	height:calc(100% - var(--header-height));
	background:rgba(0, 0, 0, 0.7);
}

/* 사이드바 */
.header .sidebar {
	position:fixed;
	top:var(--header-height);
	width:100%;
	height:calc(100% - var(--header-height));
	right:-1000px;
	background:#fff;
}
.header .sidebar .navBox {
	height:calc(100% - 170px);
	overflow-x: hidden;
	overflow-y:auto;
}
.header .sidebar .navBox .navList_d1 .listItem_d1 .title {
	display:flex;
	justify-content: space-between;
	align-items: center;
	padding:20px;
}
.header .sidebar .navBox .navList_d1 .listItem_d1 .title .toggleIcon {
	width:24px;
	height:24px;
	background:transparent url('/assets/images/common/icon/icon_arrow_down_black.png') no-repeat 0 0/100%;
}
.header .sidebar .navBox .navList_d1 .navList_d2 {
	display:none;
}
.header .sidebar .navBox .navList_d1 .navList_d2 .listItem_d2 {
	padding:20px 20px 20px 30px;
	background:#f6e9ff;
	color:#505050;
	border-bottom:1px solid #dfd6ff;
}
.header .sidebar .navBox .navList_d1 .navList_d2 .listItem_d2:first-child {
	border-top:1px solid #dfd6ff;
}
.header .sidebar .btnBox {
	display:flex;
	flex-direction: column;
	justify-content: space-between;
	height:170px;
	padding:20px;
	border-top:1px solid #ddd;
}
.header .sidebar .btnBox .btnLine.logout {
	text-align: center;
}
.header .sidebar .btnBox .btnLine.logout .textBtn {
	text-decoration: underline;
	color:#000;
}
.header.login_Y .sidebar .navBox {
	height:calc(100% - 200px);
}
.header.login_Y .btnBox {
	height:200px;
}


/* PC 해상도 제어 */
@media only screen and (min-width : 1024px) {

	/* 버튼 pointer, hover 효과 */
	.header.pc .logoImg,
	.header.pc .userArea .textBtn,
	.header.pc .userArea .toggleBtnWrap .toggleBtn {
		cursor:pointer;
	}
	.header.pc .userArea .textBtn:hover {
		opacity:0.7;
	}
	.header.pc .userArea .textBtn:hover {
		transition: 0.3s all;
	}

	/* 헤더 레이아웃 */
	.header.pc {
		display:flex;
		justify-content: center;
		align-items: center;
		height:70px;
	}
	.header.pc .innerBox {
		justify-content: space-between;
		width:1000px;
		margin:0 auto;
		padding:0 20px;
	}

	/* 로고 */
	.header .logoImg {
		width:150px;
		cursor:pointer;
	}

	/* 사용자 영역 */
	.header.pc .userArea {
		display:flex;
	}
	.header.pc .userArea .toggleBtnWrap {
		position: relative;
		font-size:16px;
	}
	.header.pc .userArea .toggleBtnWrap .name {
		font-weight:700;
	}
	.header.pc .userArea .toggleBtnWrap  .iconImg {
		width:8px;
		margin-left:5px;
	}
	.header.pc .userArea .toggleBtnWrap .myPageNavList {
		display:none;
		position:absolute;
		top:30px;
		right:0;
		width:100px;
		font-size:14px;
		background:#fff;
		border-radius:8px;
		border:1px solid #000;
		overflow-x: hidden;
	}
	.header.pc .userArea .toggleBtnWrap .myPageNavList .listItem {
		padding:15px 10px;
		transition: 0.3s all;
		cursor:pointer;
		color:#909090;
		border-bottom:1px solid #909090;
		text-align: center;
	}
	.header.pc .userArea .toggleBtnWrap .myPageNavList .listItem:last-child {
		border-bottom:0;
	}
	.header.pc .userArea .toggleBtnWrap .myPageNavList .listItem:hover {
		background:#f0f0f0;
		color:#000;
	}
	.header.pc .userArea .textBtn {
		margin-left:30px;
		font-size:16px;
	}

	/* 햄버거 메뉴 및 사이드바(MO 내비게이션) - PC 미노출 */
	.header.pc .menuBtn,
	.header.pc .sidebar {
		display:none;
	}

}