/*********************************************************
[ 반응형 사이즈 ] - 고객요청으로 반응형 사이즈 디테일하게 설정

* PC : ~ 1200
@media print, screen and (max-width: 75em) {}

* PC : ~ 1100
@media print, screen and (max-width: 68.75em) {}

* Tablet1 :	~ 960
@media print, screen and (max-width: 60em) {}

* Tablet2 : ~ 870
@media print, screen and (max-width: 54.38em) {}

* Tablet3 : ~ 768
@media print, screen and (max-width: 48em) {}

* Mobile : ~ 700
@media print, screen and (max-width: 43.75em) {}

[ root 설정 ]
고객요청으로 대표색상 / 본문색상 / 라인색상을 지정 (design.style.css에 정의)
*********************************************************/

:root {
	--nd-user-padding-x: 1.25rem;
	--nd-user-header-margin-bottom: 2rem;
}

.user-header {
	--nd-user-header-zindex: 1004;
	
	/* gnb */
	--nd-gnb-padding: 0;
	--nd-gnb-font-size: 0.875rem;
	--nd-gnb-color: var(--nd-body-color);
	--nd-gnb-bg: #f0f7fd;
	
	/* updated */
	--nd-updated-line-height: 3.125rem;
  
	/* account */
	--account-gap: 1.25rem;
	--nd-account-margin: 0 0 0 1.25rem;
	--nd-account-padding-x: 0;
	--nd-account-divider: normal;
	--nd-account-font-weight: 500;
	--nd-account-line-height: 1;
  
	/* logo */
	--logo-max-height: 76px;
	--nd-logo-container-valign: flex-end;
	--nd-logo-align: center;
	--nd-logo-padding-y: 42px;
	--nd-logo-banner-width: 220px;
  
	/* menu */
	--nd-nav-bg: var(--nd-white, #fff);
	--nd-menu-font-size: 1.125rem;
	--nd-menu-font-weight: 600;
	--nd-menu-line-height: 58px;
	--nd-menu-link-padding-x: 1.5rem;
	--nd-menu-link-padding-y: 0;
	--nd-menu-link-color: var(--nd-body-color, #202026);
	--nd-menu-link-hover-color: var(--nd-primary, #007aff);
	--nd-menu-link-active-color: var(--nd-menu-link-hover-color);
	--nd-menu-link-show-color: var(--nd-menu-link-active-color);
	
	/* submenu */
	--nd-menu-sub-width: max-content;
	--nd-menu-sub-padding-x: calc(.25 * var(--nd-menu-link-padding-x));
	--nd-menu-sub-font-size: 0.875rem;
	--nd-menu-sub-font-weight: 400;
	--nd-menu-sub-line-height: 1.5;
	--nd-menu-sub-link-padding-x: calc(.75 * var(--nd-menu-link-padding-x));
	--nd-menu-sub-link-padding-y: .5rem;
	--nd-menu-sub-link-color: rgba(var(--nd-black-rgb, 0, 0, 0), .65);
	--nd-menu-sub-link-hover-color: var(--nd-black, #000);
	--nd-menu-sub-link-hover-text-decoration: none;
	--nd-menu-sub-link-active-color: var(--nd-menu-sub-link-hover-color);
	--nd-menu-sub-link-active-text-decoration: var(--nd-menu-sub-link-hover-text-decoration);
	
	/* menu obj btn */
	--menu-obj-width: var(--nd-menu-line-height);
	--menu-obj-height: var(--menu-obj-width);
	--nd-menu-obj-padding-x: 0;
	--nd-menu-obj-padding-y: 0;
	--nd-menu-obj-font-size: 1.5rem;
	--nd-menu-obj-color: var(--nd-menu-link-color);
	--nd-menu-obj-hover-color: var(--nd-menu-obj-color);
	--nd-menu-obj-active-color: var(--nd-menu-obj-hover-color);
	
	/* menu button */
	--nd-menu-btn-padding-x: var(--nd-menu-obj-padding-x);
	--nd-menu-btn-padding-y: var(--nd-menu-obj-padding-y);
	--nd-menu-btn-font-size: var(--nd-menu-obj-font-size);
	--nd-menu-btn-color: var(--nd-menu-obj-color);
	--nd-menu-btn-hover-color: var(--nd-menu-btn-color);
	--nd-menu-btn-active-color: var(--nd-menu-btn-hover-color);
	--nd-menu-btn-border-width: 0 1px;
	--nd-menu-btn-border-color: var(--nd-gray-300);
	--nd-menu-btn-hover-border-color: var(--nd-menu-btn-border-color);
	--nd-menu-btn-bg: var(--nd-white, #fff);
	
	/* search action */
	--nd-search-action-height: 100%;
	--nd-search-action-padding-x: var(--nd-menu-btn-padding-x);
	--nd-search-action-padding-y: var(--nd-menu-btn-padding-y, 0.5rem);
	--nd-search-action-font-size: 1.375rem;
	--nd-search-action-hover-border-color: var(--nd-menu-btn-hover-border-color);
	--nd-search-action-active-border-color: var(--nd-search-action-hover-border-color);
	--nd-search-action-bg: var(--nd-menu-btn-bg, #fff);

	/* search */
	--nd-search-width: 50rem;
	--nd-search-height: 3.5rem;
	--nd-search-font-size: 1rem;
	--nd-search-padding-x: 1.5rem;
	--nd-search-placeholder: rgba(var(--nd-dark-rgb), .5);
	--nd-search-bg: var(--nd-gray-200);
	--nd-search-border-width: 0;
	--nd-search-border-radius: 50em;
	--nd-search-focus-bg: var(--nd-search-bg);
	--nd-search-btn-padding-x: var(--nd-search-padding-x);
	--nd-search-btn-padding-y: 0;
	--nd-search-btn-font-size: 1.375rem;
	--nd-search-btn-color: #212529;
	--nd-search-btn-bg: var(--nd-search-bg);
	--nd-search-btn-hover-color: var(--nd-search-btn-color);
	--nd-search-btn-hover-bg: var(--nd-search-btn-bg);
	--nd-search-btn-active-color: var(--nd-search-btn-color);
	--nd-search-btn-active-bg: var(--nd-search-btn-hover-bg);
	
	--nd-search-zindex: -1;
	--nd-search-offset-y: 100%;
	--nd-search-transform: translateY(-100%);
	
	position: relative;
	inset: 0 0 auto;
	background-color: var(--nd-white, #fff);
}

@media print, screen and (max-width: 60em) {	/* 960 */
	.user-header {
		/* logo */
		--logo-max-height: 1.875rem;
		--nd-logo-align: flex-start;
		--nd-logo-padding-y: 25px;
		
		/* menu */
		--nd-menu-line-height: 48px;
		
		/* menu obj btn */
		--menu-obj-width: 1.875rem;
		
		/* menu btn */
		--nd-menu-btn-border-width: 0;
		
		/* dropdown */
		--nd-dropdown-width: auto;
		
		/* account */
		--account-gap: .625rem;
		--nd-account-margin: 0;
		--nd-account-item-padding-x: 0;
	}
	.user-header::before {
		content: '';
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		border-top: 1px solid var(--global-border-color);
	}
}

/* common */
.gl-gnb, .gl-logo-container, .gl-nav {
	position: static;
	z-index: 1002;
}

/*********************
* GNB
*********************/
.gl-gnb > .index-width {
	display: flex;
	flex-direction: row;
	align-items: center;
}

@media print, screen and (max-width: 75em) {	/* ~ 1200 */
	.gl-gnb > .index-width {
		padding: 0 var(--nd-user-padding-x);
	}
}
@media print, screen and (max-width: 60em) {	/* ~ 960 */
	.gl-gnb {display:none}
}

/* autobox */
.gl-autobox {
	flex: 1 1 0;
	max-width: 100%;
	min-width: 0;
	padding-right: 1.5rem;
}

/* account */
.gl-account {
	gap: var(--account-gap);
}
.gl-account-item.login {
	padding: .25rem .9375rem;
	color: var(--nd-white, #fff);
	background-color: var(--nd-body-color);
	border-radius: 50em;
}

/*********************
* LOGO
*********************/
.gl-header {
	background-color: var(--nd-white, #fff);
}
.gl-header:not(.for-section) .gl-logo {
	--nd-logo-padding-bottom: calc(var(--nd-logo-padding-y) + 10px);
}
.gl-logo img {
	max-height: var(--logo-max-height);
}
@media print, screen and (max-width: 75em) {	/* 1200 */
	.gl-logo-container {
		--nd-logo-container-width: 100%;
		padding: 0 var(--nd-user-padding-x);
	}
}
@media print, screen and (max-width: 60em) {	/* 960 */
	.gl-logo {
		--nd-logo-padding-bottom: var(--nd-logo-padding-y);
	}
	.gl-logo-container .gl-banner {
		display: none;
	}
}

/* 섹션판 */
.gl-header.for-section {
	--nd-logo-container-valign: center;
}
.gl-header.for-section .gl-banner .for-main-logo > img {
	max-width: 150px;
}


/*********************
* NAV
*********************/
.gl-nav > .index-width {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: center;
}
@media print, screen and (max-width: 75em) {	/* ~ 1200 */
	.gl-nav > .index-width {
		padding: 0 var(--nd-user-padding-x);
	}
}
@media print, screen and (max-width: 60em) {	/* 960 */
	.gl-nav > .index-width {
		overflow-x: auto;
		overflow-y: hidden;
	}
}
.gl-nav {
	border-top: 1px solid var(--nd-menu-btn-border-color);
	border-bottom: 1px solid var(--nd-black, #000);
}
.gl-menu {
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	gap: var(--nd-menu-link-padding-x);
}
.gl-menu-link {
	position: relative;
	isolation: isolate;
	padding: 0;
}
.gl-menu-link::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: var(--nd-menu-link-active-color);
}
.gl-menu-item:not(.active) .gl-menu-link::after {
	height: 0;
	visibility: hidden;
}

.gl-menu-link.link-security img {
	max-height: 1.25rem;
}
.gl-menu-sub-link {
	position: relative;
}
@media print, screen and (max-width: 60em) {	/* ~ 960 */
	.gl-nav {display:none}
}

/*********************
* MENU BTN
*********************/
.menu-btn-wrap {
	position: relative;
}
.gl-logo-container .menu-btn-wrap {
	display: none;
}
.gl-menu-obj {
	width: var(--menu-obj-width);
	height: var(--menu-obj-height);
}

@media print, screen and (max-width: 60em) {	/* 960 */
	.gl-logo-container .menu-btn-wrap {
		display: flex;
		align-items: center;
		gap: .25rem;
	}
	.gl-nav .menu-btn-wrap {
		display: none;
	}
}

/* login(dropdown) */
.menu-btn-wrap .dropdown {
	display: none;
}
@media print, screen and (max-width: 60em) {	/* 960 */
	.menu-btn-wrap .dropdown {
		display: block;
	}
	.gl-account {
		flex-direction: column;
		text-align: center;
	}
}

/* search action btn */
.user-header.sch-on .gl-search-action i::before {
	--nd-ndfonts-icon: "\e921";
}

/* search absolute box */
.user-header.sch-on {
	--nd-search-transform: translateY(0);
}
.gl-search-ab {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 1.375rem var(--nd-user-padding-x);
	background-color: var(--nd-white, #fff);
	transition: all .3s ease-in-out;
}
/*
.user-header.is-scroll .gl-search-ab {
	border-top: 1px solid var(--global-border-color);
}
*/
.gl-search {
	background-color: var(--nd-search-bg);
	border-radius: var(--nd-search-border-radius);
}
.gl-search-input {
	font-weight: 500;
}


/*********************
* SIDE NAV
*********************/
.gl-sidenav {
	--sidenav-zindex: 1004;
	--sidenav-width: 500px;
	--sidenav-padding-x: 1.25rem;
	--sidenav-padding-y: var(--sidenav-padding-x);
	--sidenav-bg: var(--nd-white, #fff);
	
	/* menu */
	--sidenav-menu-item-width: 50%;
	--sidenav-menu-item-padding-x: 0;
	--sidenav-menu-item-padding-y: .9375rem;
	--sidenav-menu-font-size: 1.25rem;
	--sidenav-menu-font-weight: 600;
	--sidenav-menu-line-height: 1;
	
	/* serial menu */
	--sidenav-serial-menu-item-width: var(--sidenav-menu-item-width);
	--sidenav-serial-menu-item-padding-x: var(--sidenav-menu-item-padding-x);
	--sidenav-serial-menu-item-padding-y: var(--sidenav-menu-item-padding-y);
	--sidenav-serial-menu-font-size: 1.125rem;
	--sidenav-serial-menu-font-weight: 400;
	--sidenav-serial-menu-line-height: 1;
	
	/* award menu */
	--sidenav-award-menu-item-width: var(--sidenav-menu-item-width);
	--sidenav-award-menu-item-padding-x: var(--sidenav-menu-item-padding-x);
	--sidenav-award-menu-item-padding-y: var(--sidenav-menu-item-padding-y);
	--sidenav-award-menu-font-size: 1rem;
	--sidenav-award-menu-font-weight: 600;
	--sidenav-award-menu-line-height: 1;
	
	/* sns */
	--sns-width: 1.875rem;
	--sns-height: var(--sns-width);
	--nd-sns-align: center;
	--nd-sns-gap: 3.125rem;
	
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: var(--sidenav-zindex);
	top: 0;
	right: 0;
	width: var(--sidenav-width);
	height: 100%;
	padding: var(--sidenav-padding-y) var(--sidenav-padding-x);
	background-color: var(--sidenav-bg);
	transition: transform .35s ease-in-out;
}
.user-header:not(.nav-on) .gl-sidenav {
		transform: translateX(100%);
}

@media print, screen and (max-width: 43.75em) {	/* 700 */
	.gl-sidenav {
		--sidenav-width: 80%;
	}
}


/* header */
.gl-sidenav-header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--nd-black, #000);
}
.gl-sidenav-ci {
	flex: 1 1 0;
	max-width: 100%;
	min-width: 0;
}
.gl-sidenav-ci img {
	width: 110px;
}
.gl-sidenav-close {
	flex: 0 0 auto;
	font-size: 1.25rem;
}

/* menu */
.gl-sidenav-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-left: 0;
	font-size: var(--sidenav-menu-font-size);
	font-weight: var(--sidenav-menu-font-weight);
	line-height: var(--sidenav-menu-line-height);
}
.gl-sidenav-menu-item {
	flex: 0 0 auto;
	width: var(--sidenav-menu-item-width);
	padding: var(--sidenav-menu-item-padding-y) var(--sidenav-menu-item-padding-x);
}
.gl-sidenav-menu-item.is-security .gl-sidenav-menu-link {
	color: #E50014;
}

/* serial menu */
.gl-sidenav-serial-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-left: 0;
	margin: 2.5rem calc(-1 * var(--sidenav-padding-x));
	padding: var(--sidenav-padding-x);
	font-size: var(--sidenav-serial-menu-font-size);
	font-weight: var(--sidenav-serial-menu-font-weight);
	line-height: var(--sidenav-serial-menu-line-height);
	background-color: var(--nd-gray-200);
}
.gl-sidenav-serial-menu-item {
	flex: 0 0 auto;
	width: var(--sidenav-serial-menu-item-width);
	padding: var(--sidenav-serial-menu-item-padding-y) var(--sidenav-serial-menu-item-padding-x);
}

/* award menu */
.gl-sidenav-award-menu {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin-left: 0;
	font-size: var(--sidenav-award-menu-font-size);
	font-weight: var(--sidenav-award-menu-font-weight);
	line-height: var(--sidenav-award-menu-line-height);
}
.gl-sidenav-award-menu-item {
	flex: 0 0 auto;
	width: var(--sidenav-award-menu-item-width);
	padding: var(--sidenav-award-menu-item-padding-y) var(--sidenav-award-menu-item-padding-x);
}
.gl-sidenav-award-menu-link {
	display: flex;
	align-items: center;
	gap: .875rem;
}
.gl-sidenav-award-menu-link > .icon {
	flex: 0 0 auto;
	display: inline-block;
	width: 1.875rem;
	height: 1.875rem;
	background: url('/image/root-icon.png') no-repeat;
}
.gl-sidenav-award-menu-item:nth-child(1) .icon {background-position: 0 0;}
.gl-sidenav-award-menu-item:nth-child(2) .icon {background-position: -50px 0;}
.gl-sidenav-award-menu-item:nth-child(3) .icon {background-position: -100px 0;}
.gl-sidenav-award-menu-item:nth-child(4) .icon {background-position: -150px 0;}

@media print, screen and (max-width: 36.25em) {	/* 580 */
	.gl-sidenav-award-menu {
		--sidenav-award-menu-item-width: 100%;
		flex-direction: column;
	}
}

/* sns */
.gl-sns-container {
	margin-top: 6.25rem;
}
.gl-sns {
	width: var(--sns-width);
	height: var(--sns-height);
}
.gl-sns > .icon {
	display: inline-block;
	width: 100%;
	height: 100%;
	background: url('/image/root-icon.png') no-repeat;
}
.gl-sns:nth-child(1) .icon {background-position: 0 -50px;}
.gl-sns:nth-child(2) .icon {background-position: -50px -50px;}
.gl-sns:nth-child(3) .icon {background-position: -100px -50px;}
.gl-sns:nth-child(4) .icon {background-position: -150px -50px;}
.gl-sns:nth-child(5) .icon {background-position: -300px -50px;}
.gl-sns:nth-child(6) .icon {background-position: -250px -50px;}

@media print, screen and (max-width: 40em) {	/* 640 */
	.gl-sns-container {
		--nd-sns-align: space-between;
		--nd-sns-gap: 0;
		margin-top: 3.125rem;
	}
}

/* overlay */
.gl-overlap {
	position: fixed;
	z-index: 1002;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
}

/*--------------------------------------------
[ NOT MAIN STYLE ]
* 메인을 제외한 서브페이지의 메뉴바 디자인이 다름.
--------------------------------------------*/
.user-header.for-other {
	/* logo */
	--logo-max-height: 2.125rem;
	--nd-logo-align: flex-start;
	--nd-logo-padding-y: 1.5rem;
	
	/* menu obj */
	--menu-obj-width: 1.875rem;
	
	/* menu btn */
	--nd-menu-btn-border-width: 0;
		
	/* dropdown */
	--nd-dropdown-width: auto;
	
	/* account */
	--account-gap: .625rem;
	--nd-account-margin: 0;
	--nd-account-item-padding-x: 0;
}
.user-header.for-other .gl-logo {
	--nd-logo-padding-bottom: var(--nd-logo-padding-y);
}

/* GNB */
.user-header.for-other .gl-gnb {display:none}

/* LOGO */
.user-header.for-other .gl-banner {display:none}

/* MENU BTN */
.user-header.for-other .gl-logo-container .menu-btn-wrap {
	display: flex;
	align-items: center;
	gap: .25rem;
}
.user-header.for-other .gl-nav .menu-btn-wrap {
	display: none;
}
.user-header.for-other .dropdown {
	display: block;
}
.user-header .dropdown .gl-account {
	flex-direction: column;
	text-align: center;
}
@media print, screen and (max-width: 75em) {
	.user-header.for-other .menu-btn {
		right: var(--nd-user-padding-x);
	}
}


/*--------------------------------------------
* Scroll Header : S
--------------------------------------------*/
.user-header.is-scroll {
	/* logo */
	--logo-max-height: 2.125rem;
	--nd-logo-align: flex-start;
	--nd-logo-padding-y: 1rem;
	
	/* menu obj */
	--menu-obj-width: 1.875rem;
	
	/* menu btn */
	--nd-menu-btn-border-width: 0;
		
	/* dropdown */
	--nd-dropdown-width: auto;
	
	/* account */
	--account-gap: .625rem;
	--nd-account-margin: 0;
	--nd-account-item-padding-x: 0;
	
	position: fixed;
	z-index: 1005;
	top: 0;
	left: 0;
	width: 100%;
}
.user-header.is-scroll::before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	border-top: 1px solid var(--global-border-color);
}
.user-header.is-scroll .side-top-banner {
	visibility: hidden;
	height: 0;
}
.user-header.is-scroll .gl-gnb {
	visibility: hidden;
	height: 0;
}
.user-header.is-scroll .gl-logo {
	--nd-logo-padding-bottom: var(--nd-logo-padding-y);
}
.user-header.is-scroll .gl-banner,
.user-header.is-scroll .gl-nav {
	display: none;
}
.user-header.is-scroll .gl-logo-container .menu-btn-wrap {
	display: flex;
	align-items: center;
	gap: .25rem;
}
.user-header.is-scroll .gl-logo-container .dropdown {
	display: block;
}

/* 기사뷰 스크롤 up */
.user-header.for-view.scroll-down .gl-logo-container .menu-btn-wrap {
	display: none;
}
/* 기사뷰 helper tool */
.user-header.for-view .helper-tool-group {
	display: none;
}
.user-header.for-view.scroll-down .helper-tool-group {
	display: flex;
}
/*--------------------------------------------
* Scroll Header : E
--------------------------------------------*/


/* 홍경아 / 1615488 / 20260827 */
.gl-sns-container {
	margin-top: 3rem;
}