@charset "utf-8";
	
header {z-index:99; position:fixed; left:0; top:0; width:100%; background:#fff; }
header .logo_area {width:100%}
header .logo_area .logo_area_inn {position:relative; width:100%; padding:5px 10px; box-sizing:border-box;}
header .logo_area .logo_area_inn .logo { height:30px; margin:10px auto; text-align:center; font-family: "Archivo Black", sans-serif; font-weight: 400; font-style: normal; color:#fff; font-size:2em; }
header .logo_area .logo_area_inn h1 { width:130px; margin:10px auto; }
header .logo_area .logo_area_inn h1 img { height:30px; }
header .logo_area .logo_area_inn .call {position:absolute; left:20px; top:16px; cursor:pointer;}
header .logo_area .logo_area_inn .call i {font-size:23px; line-height:24px; color:#fff}
header .logo_area .logo_area_inn .line {position:absolute; right:20px; top:16px; cursor:pointer;}
header .logo_area .logo_area_inn .line i {line-height:24px;}
header .logo_area .logo_area_inn .line .xi-align-right {display:block; font-size:24px; color:#fff;}
header .logo_area .logo_area_inn .line .xi-close {display:none; font-size:22px; color:#999;}
header .logo_area .logo_area_inn .line.on .xi-align-right {display:none;}
header .logo_area .logo_area_inn .line.on .xi-close {display:block;}
header .logo_area button { position:absolute; left:15px; top:16px; width:revert; background:transparent; border:0; text-align:left; padding:revert; margin:revert; }
header .logo_area button span { color:#fff; text-align:left; font-size:20px; }

header .gnb { position:fixed; right:calc(100% * -1); width:250px; height:100%; background:#fff; transition:all .2s; }
header .gnb.on { right:0; }
header .gnb:after {content:""; display:block; clear:both;}
header .gnb ul {float:left; width:100%; height:100%; padding-top:20px; text-align:center; box-sizing:border-box;}
header .gnb ul .icon_people {text-align:center}
header .gnb ul .icon_people div { margin:0 auto; width:50px; height:50px; border:2px solid #ccc; border-radius:40px; background-size: cover; background-position: center; background-repeat: no-repeat}
header .gnb ul .icon_name { margin:15px auto; text-align:center; color:#214099; font-size:24px; font-weight:bold}
header .gnb ul .sign_out {margin:20px auto; text-align:center; color:#214099; font-size:18px; font-weight:bold}
header .gnb ul li a { display:block; height:48px; padding:0 50px; font-size:16px; text-align:left; color:#333; line-height:48px; box-sizing:border-box; transition:all .2s; }
header .gnb ul li a i {font-size:19px; line-height:48px;}
header .gnb ul li a:hover {font-size:16px; font-weight:700;}
header .gnb ul .poi a {font-weight:700; color:#0D1B4A;}

header.on .logo_area .logo_area_inn {box-shadow:0 1px 7px rgba(0,0,0,.1);}

header .gnb, header .gnb.bg-white {
	width: var(--panel-w); z-index: 1001;
	background: #0F1D3C !important; color: #EAF2FF !important;
	box-shadow: -8px 0 24px rgba(0,0,0,.35);
	overflow: hidden; box-sizing: border-box;
	transition: right .24s ease-out;
}
header .gnb .top {
	height: 100%; overflow-y: auto;
	list-style: none; padding: 14px 12px 20px !important; margin: 0 !important;
	box-sizing: border-box;
}
header .gnb .profile {
	display: grid; grid-template-columns: 56px 1fr; gap: 10px;
	align-items: center; padding: 8px 6px 14px;
}
header .gnb .profile .avatar {
	width:56px; height:56px; border-radius:9999px;
	border:1px solid rgba(255,255,255,.26);
	background:#12254a center/cover no-repeat;
}
header .gnb .profile .name {
	min-height:20px; line-height:1.25; color:#EAF2FF; font-weight:700;
	display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
	overflow:hidden; text-overflow:ellipsis; word-break:break-word;
}
.avatar.is-default{ background-image:url('/image/logo.png'); }
header .gnb .top li a {
	display:flex; align-items:center; gap:10px;
	width:100%; box-sizing:border-box;
	padding:12px 14px !important; margin:2px 0 !important;
	color:#EAF2FF !important; text-decoration:none !important;
	border-radius:10px; background:transparent !important;
	overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
header .gnb .top li a .xi { font-size:18px; opacity:.95; }
header .gnb .top li a:hover { background:rgba(155,233,216,.14) !important; color:#FFFFFF !important; }
header .gnb .top li a:active { background:rgba(155,233,216,.22) !important; }

/* 로그아웃 버튼 */
header .gnb .sign_out {
	display:block; width:100%; box-sizing:border-box;
	padding:12px 14px; margin:10px 0 0; border-radius:10px;
	color:#83C9F4 !important; background:rgba(131,201,244,.10) !important; cursor:pointer;
}
header .gnb .sign_out:hover { background:rgba(131,201,244,.18) !important; }

/* 구분선 */
header .gnb hr {
	border:0; height:1px; margin:10px 0;
	background:linear-gradient(90deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
}

header .logo_area_inn .line .xi-align-right{ display:inline-block; }
header .logo_area_inn .line .xi-close{ display:none; }

header:has(.gnb.on) .logo_area_inn .line .xi-align-right { display:none !important; }
header:has(.gnb.on) .logo_area_inn .line .xi-close { display:inline-block !important; }

/* 아이콘 컬러/터치 타깃 */
header .logo_area_inn .line { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:9999px; }
header .logo_area_inn .line i { color:#fff; font-size:20px; }


/* 2. 반응형 미디어 쿼리 */
@media only screen and (max-width: 640px) {
header { z-index:99; width:100%; position:fixed; top:0; background:#0D1B4A}
header .logo_area .search_icons_area {float:right; width:calc(100% - 100px); max-width_:300px; }
}


/* PC (640px 이상) */
@media only screen and (min-width: 641px) {
header {z-index:99; width:100%; max-width:640px; position:fixed; top:0; left:calc(50% - 320px); background:#0D1B4A}
header .logo_area .search_icons_area {float:right; max-width:550px; }
header .gnb.on { right:calc(50% - 320px); }
}