@charset "utf-8";

header {z-index:99; position:fixed; left:0; top:0; width:100%; background:rgba(255,255,255,.70); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(255,255,255,.10);} 
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 .logo > img { display:inline-block; height:30px; }
header .logo_area .logo_area_inn .logo > img.logo_icon { margin-bottom:3px; border:1px solid #a4a4a4; border-left-width:0px; border-right-width:0px; }
header .logo_area .logo_area_inn .logo > img.logo_text { margin-left:5px; margin-top:3px; }
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 > p { position:absolute; top:13px; cursor:pointer; }
header .logo_area .logo_area_inn .line { right:15px; }
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; }
header .logo_area .logo_area_inn .line .xi-close { display:none; font-size:20px; }
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 i { color:#fff; text-align:left; font-size:20px; }

header .gnb { position:fixed; right:calc(100% * -1); 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 0px auto; text-align:center; color:#214099; 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 {
	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; z-index: 1001;
}
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:8px 12px; 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:34px; height:34px; 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); }
}


/* ================================
   Wave Palette Theme overrides
   ================================ */
/* Top bar */
header {
	background: linear-gradient(180deg, rgba(3,59,87,.60), rgba(3,59,87,.48));
	backdrop-filter: blur(12px) saturate(130%);
	-webkit-backdrop-filter: blur(12px) saturate(130%);
	border-bottom: 1px solid rgba(255,255,255,.10);
	box-shadow: 0 10px 26px rgba(3,59,87,.16);
}
header .logo_area_inn .logo > img {
	filter:
		drop-shadow(0 2px 7px rgba(0,0,0,.28))
		drop-shadow(0 0 1px rgba(0,0,0,.45));
}
header .logo_area_inn > p {
	display:flex; align-items:center; justify-content:center;
	width:34px; height:34px;
	font-size:24px; line-height:24px;
	border-radius:9999px; border: 1px solid rgba(3, 75, 111, .14); 
	background: rgba(255, 255, 255, .1); user-select:none;
}
header .logo_area_inn > p:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.22); backdrop-filter: blur(10px); }

/* Side panel */
header .gnb, header .gnb.bg-white{
	background:
		radial-gradient(500px 260px at 18% 10%, rgba(254,199,120,.92), rgba(254,199,120,0) 60%),
		radial-gradient(520px 260px at 90% 22%, rgba(254,192,204,.88), rgba(254,192,204,0) 55%),
		linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.70)) !important;
	color: rgba(3,59,87,.95) !important;
	border-left: 1px solid rgba(3,75,111,.14);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
header .gnb .profile .avatar{
	border: 1px solid rgba(3,75,111,.18);
	background: rgba(255,255,255,.64) center/cover no-repeat;
}
header .gnb .profile .name{ color: rgba(3,59,87,.95) !important; }

header .gnb .top li a { color: rgba(3,59,87,.95) !important; }
header .gnb .top li a:hover { background: rgba(0,179,203,.72) !important; }

header .gnb .sign_out{
	color: #034B6F !important;
	background: rgba(0,179,203,.14) !important;
}
header .gnb .sign_out:hover{ background: rgba(0,179,203,.22) !important; }
header .gnb hr { background: linear-gradient(90deg, rgba(3,75,111,.14), rgba(3,75,111,.06)); }

/* Wave v2 - darker header & icon buttons */
header .logo_area_inn .back { left:15px; }