/*헤더 공통 설정*/
@media (min-width: 767px) {
	.header .boxing {
		//min-width: 980px;
	}
	body.headerSectionMerge .body:not(.no-header) > .frm.headerSectionMerge:not(.slider-frm),
	body.headerSectionMerge .body:not(.no-header) > .frm:first-of-type:not(.slider-frm) {
		padding-top: @hd_tot_height !important;
	}
	body #main_container .body > .frm.headerSectionMerge:not(.mobile_ele) > .controller-container .move-contents,
	body #main_container .body > .frm.headerSectionMerge:not(.mobile_ele) > .controller-container .controller,
	body #main_container .body > .frm.headerSectionMerge:not(.mobile_ele) > .controller-container:before,
	body #main_container .body > .frm.headerSectionMerge:not(.mobile_ele) > .controller-container:after {
		top: @hd_tot_height !important;
	}
	body.live.headerFixed .body, body.preview.headerFixed .body {
		margin-top: @hd_tot_height
	}
	body.live.headerFixed.header9_closed .body, body.preview.headerFixed.header9_closed .body {
		margin-top: @hd_hmh9_height
	}
	body.live.headerSectionMerge.header9_closed .body > .frm:first-child:not(.slider-frm), body.preview.headerSectionMerge.header9_closed .body > .frm:first-child:not(.slider-frm) {
		padding-top: @hd_hmh9_height !important;
	}

	/* 에디터용. headerSectionMerge 영역의 controller 위치 재조정 */
	body.headerSectionMerge.pc_editor_mode .body:not(.no-header) > .frm:first-child:not(.slider-frm) > .controller > .drag,
	body.headerSectionMerge.pc_editor_mode .body:not(.no-header) > .frm:first-child:not(.slider-frm) > .controller > .remove,
	body.headerSectionMerge.pc_editor_mode .body:not(.no-header) > .frm:first-child:not(.slider-frm) > .controller > .config,
	body.headerSectionMerge.pc_editor_mode .body:not(.no-header) > .frm:first-child:not(.slider-frm) > .controller > .slide-design {
		top: @hd_tot_height !important;
	}
}
.live .header-op { z-index: -1; }
body .header {
	.header1 .header-op{background-color:@hd1_sa_bg_cor}
	.header2 .header-op{background-color:@hd2_sa_bg_cor}
	.header3 .header-op{background-color:@hd3_sa_bg_cor}
	.header9 .header-op{background-color:@hd9_sa_bg_cor}
}
body.headerSectionMerge.scrollBefore .header {
	.header1 .header-op{background-color:@hd1_sb_bg_cor}
	.header2 .header-op{background-color:@hd2_sb_bg_cor}
	.header3 .header-op{background-color:@hd3_sb_bg_cor}
	.header9 .header-op{background-color:@hd9_sb_bg_cor}
}
body.headerSectionMerge.scrollAfter .header {
	.header1 .header-op{background-color:@hd1_sa_bg_cor}
	.header2 .header-op{background-color:@hd2_sa_bg_cor}
	.header3 .header-op{background-color:@hd3_sa_bg_cor}
	.header9 .header-op{background-color:@hd9_sa_bg_cor}
}
body.headerSectionMerge.scrollBefore .header>[class^=header] span,
body.headerSectionMerge.scrollBefore .header>[class^=header] p,
body.headerSectionMerge.scrollBefore #ml-area .ml-item>a,
body.headerSectionMerge.scrollBefore #ml-area .ml-split,
body.headerSectionMerge.scrollBefore #main_container .header .mn-ul>li.mn-item>a.mn-link {
	color:@hd_sb_ft_cor
}
body.headerSectionMerge.scrollBefore .header>[class^=header] .logo-text a,
body.headerSectionMerge.scrollBefore .header>[class^=header] .btnBox span{
	color:@hd_sb_ft_cor !important;
}
body.headerSectionMerge.scrollBefore .header .header-side-nav-button{
	.line-1 { background-color: @hd_sb_ft_cor !important; }
	.line-2 { background-color: @hd_sb_ft_cor !important; }
	.line-3 { background-color: @hd_sb_ft_cor !important; }
	border-color : @hd_sb_ft_cor !important;
}
body.headerSectionMerge.scrollBefore .header {
	.header1 {border-bottom-color:@hd1_sb_bt_cor !important}
	.header2 {border-bottom-color:@hd2_sb_bt_cor !important}
	.header3 {border-bottom-color:@hd3_sb_bt_cor !important}
	.header9 {border-bottom-color:@hd9_sb_bt_cor !important}
	.header1 .button-area{background-color:transparent !important; border-color:@hd_sb_ft_cor !important;}
	.header2 .button-area{background-color:transparent !important; border-color:@hd_sb_ft_cor !important;}
	.header3 .button-area{background-color:transparent !important; border-color:@hd_sb_ft_cor !important;}
}

.header9-close-btn{
	background-color: transparent;
	position: absolute;
	right:24px;
	top:10px;
	cursor:pointer;
	opacity:0.8;
	z-index:50;
}
.header-contents.boxing .header9-close-btn{
	right:10px;
}
.header9-close-btn.hd-cb-sty1{
	color:#fff;
	font-size:30px;
}
.header9-close-btn.hd-cb-sty2{
	color:#000;
	font-size:30px;
}

//디폴트 값
@d_hover_cor:#259fec;
@d_ft_active_cor:#ffffff;

/*normal*/
.header9{position:relative; width:100%; }
.header3{display:table; position:relative; width:100%; }
.header2{display:table; position:relative; width:100%; }
.header1{display:table; position:relative; width:100%; }
/*.header3{position:relative; margin:0 auto; }
.header2{position:relative; margin:0 auto; }
.header1{position:relative; margin:0 auto; }*/
.tc{  display:table-cell;vertical-align:middle;text-align:center; height:inherit;}

#HeaderLayoutModal .header9,
#HeaderLayoutModal .header3,
#HeaderLayoutModal .header2,
#HeaderLayoutModal .header1 {
	width: 100%;
}

/*align*/
.al-box{position:relative; display:table;} /*margin빼면 left, margin:0 0 0 auto면 right 정렬*/
.al-c{margin:0 auto !important;}
.al-l{margin:0 auto 0 0 !important;}
.al-r{margin:0 0 0 auto !important;}

/*menu*/
.mn-ul{}
.mn-ul li.mn-item {
	position:relative;
	display:block;
	list-style-type:none;
	cursor: pointer;
}
.mn-ul > li.mn-item {
	height: 100%;
}
.mn-ul a.mn-link {
	display:block;
	text-decoration:none;
	white-space:nowrap;
}

.mn-ul>li.mn-item {
	display:inline-block;
	float:left
}
.mn-ul>li.mn-item>a.mn-link {
	/*display:inline-block;*/
	text-align:center;
	text-decoration:none;
	font-weight:600;
	font-size:15px;
	padding-right:10px;
	padding-left:10px;
	letter-spacing:0px;
	position:relative;
}
.mn-ul li ul.sub-mn {
	//display:none;
}
.sub-mn-text-align-left .header-contents ul.mn-ul li.mn-item {
	text-align: left;
}
.sub-mn-text-align-center .header-contents ul.mn-ul li.mn-item {
	text-align: center;
}
.sub-mn-text-align-right .header-contents ul.mn-ul li.mn-item {
	text-align: right;
}


.hemode-container .mn-ul>li.mn-item>a.mn-link {
	/*background-color: @mn_bg_cor;*/
	color:@mn_ft_cor;
	font-size: @mn_ft_size;
	font-family:@mn_ft_fam_eng,@mn_ft_fam_han;
	letter-spacing: @mn_ft_padding;
	font-weight:@mn_ft_weight;
}
#main_container .mn-ul>li.mn-item>a.mn-link {
	/*background-color: @mn_bg_cor;*/
	color:@mn_ft_cor;
	font-size: @mn_ft_size;
	font-family:@mn_ft_fam_eng,@mn_ft_fam_han;
	letter-spacing: @mn_ft_padding;
	font-weight:@mn_ft_weight;
	height: 100%;
}
#main_container .mn-ul>li.mn-item>.header-overflow-pop>ul,
#main_container .mn-ul>li.mn-item>.sub-mn{
	font-size: @mn_ft_size;
	font-family:@mn_ft_fam_eng,@mn_ft_fam_han;
}

/*Header Layout - sync*/
//modal
#HeaderLayoutModal {
	.hl3-1 {
		@mn_tab_padding: 40px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(70px,120px,50px);
	}
	.hl3-2 {
		@mn_tab_padding: 40px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(50px,120px,70px);
	}
	.hl2-1 {
		@mn_tab_padding: 20px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(120px,50px);
	}
	.hl2-2 {
		@mn_tab_padding: 40px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(100px,50px);
	}
	.hl2-3 {
		@mn_tab_padding: 40px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(80px,100px);
	}
	.hl2-4 {
		@mn_tab_padding: 20px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(120px,50px);
	}
	.hl1-1 {
		@mn_tab_padding: 20px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(70px);
	}
	.hl1-2 {
		@mn_tab_padding: 10px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
		//.set_height(70px);
	}
	.hl1-3 {
		@mn_tab_padding: 20px;
		.mn-link-after(@mn_tab_padding,@d_hover_cor);
	}
}
//live
.edit , .bodypreview , .live {
	.header.hl3-1 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl3-2 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl2-1 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl2-2 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl2-3 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl2-4 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl1-1 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl1-2 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
	.header.hl1-3 {
		.mn-link-after(@mn_tab_padding,@mn_active_cor,@mn_ft_active_cor);
	}
}

.hl-pv{ /*hover preview (변수 오버라이딩이 안되서 분기로 나눠서 함수로 전달)*/
	.mn-link-after(20px,@d_hover_cor,@d_ft_active_cor);
}


/*logo*/
/*.logo{line-height:1;vertical-align:middle; font-size: 32px;font-weight:bold;}*/

/*icon valign fit*/
.header-icon {font-size:32px; line-height:1; vertical-align:middle}
.header-fixed{position: fixed; top:0; left:0;}



/*hover*/
.mn-link-after(@mn_tab_padding:20px,@mn_active_cor:green,@mn_ft_active_cor:#ffffff){

	.mn-ul>li.mn-item>a.mn-link {padding-left:@mn_tab_padding;padding-right:@mn_tab_padding;}

	.mn-sty-1.mn-ul>li.mn-item>a.mn-link:hover, .mn-sty-1.mn-ul>li.cur-mn-item>a.mn-link{
		color:@mn_active_cor !important;
	}

	.mn-sty-2.mn-ul>li.mn-item>a.mn-link:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		max-width: calc(~"100% - (" @mn_tab_padding ~"+" @mn_tab_padding ~")"); /*less에선 calc 쓸때 반드시 ~" 붙일것*/
		height: 2px;
		top: calc(~"66%");
		left: @mn_tab_padding;
		background-color: @mn_active_cor;
		-webkit-transform: scale(0, 1);
		-moz-transform: scale(0, 1);
		-o-transform: scale(0, 1);
		transform: scale(0, 1);
		transform-origin: left center;
		-webkit-transform-origin: left center;
		-webkit-transition: all .15s ease-out;
		-moz-transition: all .15s ease-out;
		-ms-transition: all .15s ease-out;
		-o-transition: all .15s ease-out;
		transition: all .15s ease-out;
		-moz-opacity: 0;
		-khtml-opacity: 0;
		opacity: 0
	}
	.mn-sty-3.mn-ul>li.mn-item>a.mn-link:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		max-width: 100%;
		height: 3px;
		top: 0px;
		left: 0;
		background-color: @mn_active_cor;
		-webkit-transform: scale(0, 1);
		-moz-transform: scale(0, 1);
		-o-transform: scale(0, 1);
		transform: scale(0, 1);
		transform-origin: left center;
		-webkit-transform-origin: left center;
		-webkit-transition: all .15s ease-out;
		-moz-transition: all .15s ease-out;
		-ms-transition: all .15s ease-out;
		-o-transition: all .15s ease-out;
		transition: all .15s ease-out;
		-moz-opacity: 0;
		-khtml-opacity: 0;
		opacity: 0
	}

	.mn-sty-4.mn-ul>li.mn-item>a.mn-link:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		max-width: calc(~"(100% - (" @mn_tab_padding ~"+" @mn_tab_padding ~")) + 20px");
		height: 35%;
		min-height:20px;
		top: calc(~"32.5%");
		left: calc(@mn_tab_padding ~" - 10px");
		background-color: transparent;
		border:2px solid @mn_active_cor;
		-webkit-border-radius:30px;
		-moz-border-radius:30px;
		border-radius:30px;
		-webkit-transform: scale(0, 1);
		-moz-transform: scale(0, 1);
		-o-transform: scale(0, 1);
		transform: scale(0, 1);
		-webkit-transition: all .15s ease-out;
		-moz-transition: all .15s ease-out;
		-ms-transition: all .15s ease-out;
		-o-transition: all .15s ease-out;
		transition: all .15s ease-out;
		-moz-opacity: 0;
		-khtml-opacity: 0;
		opacity: 0
	}

	.mn-sty-5.mn-ul>li.mn-item:hover, .mn-sty-5.mn-ul>li.cur-mn-item, .mn-sty-5.mn-ul>li.mn-item>a.mn-link:hover,.mn-sty-5.mn-ul>li.mn-item:hover>a.mn-link, .mn-sty-5.mn-ul>li.cur-mn-item>a.mn-link{
		background:@mn_active_cor !important;
		color:@mn_ft_active_cor !important;
	}

}

/*우선 current-menu-ancestor 와 cur-mn-itme 은 고려하지 않음*/
.mn-sty-2.mn-ul>li.cur-mn-item>a.mn-link:after, .mn-sty-2.mn-ul>li.mn-item:hover>a.mn-link::after,
.mn-sty-3.mn-ul>li.cur-mn-item>a.mn-link:after, .mn-sty-3.mn-ul>li.mn-item:hover>a.mn-link::after,
.mn-sty-4.mn-ul>li.cur-mn-item>a.mn-link:after, .mn-sty-4.mn-ul>li.mn-item:hover>a.mn-link::after{
	-webkit-transform:scale(1,1);
	-moz-transform:scale(1,1);
	-o-transform:scale(1,1);
	transform:scale(1,1) !important;
	opacity:1 !important;
}



/*member login/logout area*/
#ml-area .ml-spacer{margin-left:(@ml_tab_padding/2); margin-right:(@ml_tab_padding/2) }
#ml-area .ml-item>a {
	color:@ml_ft_cor;
	font-size: @ml_ft_size;
	font-family:@ml_ft_fam_eng,@ml_ft_fam_han;
	letter-spacing: @ml_ft_padding;
	font-weight:@ml_ft_weight;
}
#ml-area .ml-item>a:hover {
	color:@ml_ft_active_cor;
}


.header .header-contents .column {
	display: table !important;
}
.header .mn-item-overflow-list {
	width: 80px;
}
.header .mn-item-overflow-list i {
	font-size: 18px;
	//line-height: unset;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.header .mn-item-overflow {
	display: none !important;
}

.header .mn-ul a.mn-link {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.header .mn-item-overflow-list .sub-mn {
	display: none !important;
}
.header .sub-mn .mn-item,
.header .header-overflow-pop .mn-item-overflow {
	display: block !important;
	min-width: 160px;
	padding: 0 20px;
	background-color: @sub_mn_bg_cor;
	min-width: @sub_mn_width;
	height: @sub_mn_height;
	line-height: @sub_mn_height;
	font-size:@sub_mn_ft_size;
	font-weight:@sub_mn_ft_weight;
}
.header .sub-mn .mn-item > a,
.header .header-overflow-pop .mn-item-overflow > a {
	color: @sub_mn_ft_cor !important;
	//transition: 0.25s all ease;
}
.header .sub-mn .mn-item:hover,
.header .header-overflow-pop .mn-item-overflow:hover {
	background-color: @sub_mn_active_bg_cor;
}
.header .sub-mn .mn-item:hover > a,
.header .header-overflow-pop .mn-item-overflow:hover > a {
	color: @sub_mn_active_ft_cor !important;
}
.header .sub-mn,
.header .mn-item-overflow-list .header-overflow-pop {
	position: fixed;
	//max-height: 0;
	display: none;
	overflow: hidden;
	//transition: 0.35s max-height ease;
}
.header .mn-item-hover ul.sub-mn,
.header .mn-item-hover .header-overflow-pop {
	display: block;
	//max-height: 100%;
	//max-height: 400px;
	/*overflow-y: auto;*/

	/* 2020.08.14 재헌
     * safari 에서 sub-mn-overlay가 fixed인데도 불구하고 부모객체의 overflow에 영향을 받아서 아래와 같이 initial로 설정
     */
	overflow: initial;
}

/* type 2 */
.header .sub-mn-type-2 .sub-mn .mn-item,
.header .sub-mn-type-2 .header-overflow-pop .mn-item-overflow {
	min-width: 0;
	padding: 0 5px;
	min-width: 70px;
}
//.sub-mn-type-2 .mn-item-hover .sub-mn:before {
//	content:"";
//	position: fixed;
//	width: 100%;
//	height: 30vh;
//	left: 0;
//	right: 0;
//	background-color: @sub_mn_bg_cor;
//	z-index: -1;
//}
.header .sub-mn-type-2 .sub-mn-overlay {
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
	background-color: @sub_mn_bg_cor;
	z-index: -1;
}

.header .sub-mn-type-2 .sub-mn .mn-item,
.header .sub-mn-type-2 .header-overflow-pop .mn-item-overflow {
	background: transparent;
}
.header .sub-mn-type-2  .sub-mn .mn-item:hover,
.header .sub-mn-type-2  .header-overflow-pop .mn-item-overflow:hover {
	background-color: @sub_mn_active_bg_cor;
}

.hemode .header .sub-mn-type-2 .sub-mn-overlay {
	left: 123px;
	/* right: 50px; */
	width: calc(100% - 172px)
}
.edmode .header .sub-mn-type-2 .sub-mn-overlay {
	left: 53px;
	width: calc(100% - 58px);
}
/*.edmode.side-full .header .mn-item {
	pointer-events: none;
}*/

.mn-item-overflow-list > .mn-link {
	padding: 0 !important;
}

// 2018.10.12 재헌
// 헤더 스크롤 전후 transition을 맞추기위해 아래와 같이 처리
.header .header-contents .al-box > .mn-ul {
	transition: height 0.3s ease 0s;
	line-height: normal !important;
}
#main_container .mn-ul > li.mn-item > a.mn-link {
	display: flex;
	justify-content: center;
	flex-direction: column;
	//transition: line-height 0.3s ease;
}
.header .header-contents .al-box:not(.cur-mn-item) > div:first-child {
	transition: height 0.3s ease 0s;
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.header .sub-mn,
	.header .mn-item-overflow-list .header-overflow-pop {
		position: absolute;
	}
	.header .sub-mn-align-horizontal .sub-mn,
	.header .sub-mn-align-horizontal .mn-item-overflow-list .header-overflow-pop {
		position: fixed;
	}
}


/* 2020.02.12 재헌
 * 헤더 서브메뉴 가로로 정렬 ( sub-mn-horizontal )
 */
//.header .sub-mn-align-horizontal:not() .sub-mn .mn-item,
//.header .sub-mn-align-horizontal .header-overflow-pop .mn-item-overflow {
//	display: inline-block !important;
//	background-color: transparent;
//}
//.header .sub-mn-align-horizontal .sub-mn .mn-item:hover,
//.header .sub-mn-align-horizontal .header-overflow-pop .mn-item-overflow:hover {
//	background-color: @sub_mn_active_bg_cor;
//}
//#main_container .sub-mn-align-horizontal .mn-ul > li.mn-item > .sub-mn,
//.header .sub-mn-align-horizontal .mn-item-overflow-list .header-overflow-pop {
//	font-size: 0;
//	background-color: @sub_mn_bg_cor;
//	width: 100% !important;
//	left: 0;
//}
//.header .sub-mn-align-horizontal.sub-mn-type-2 .sub-mn .mn-item {
//	width: auto !important;
//	padding: 0 20px;
//}

.header .sub-mn-align-horizontal:not(.sub-mn-type-2) .box:not(.sideNavBox) .sub-mn .mn-item,
.header .sub-mn-align-horizontal:not(.sub-mn-type-2) .box:not(.sideNavBox) .header-overflow-pop .mn-item-overflow {
	display: inline-block !important;
	background-color: transparent;
}
.header .sub-mn-align-horizontal:not(.sub-mn-type-2) .box:not(.sideNavBox) .sub-mn .mn-item:hover,
.header .sub-mn-align-horizontal:not(.sub-mn-type-2) .box:not(.sideNavBox) .header-overflow-pop .mn-item-overflow:hover {
	background-color: @sub_mn_active_bg_cor;
}
#main_container .sub-mn-align-horizontal:not(.sub-mn-type-2) .al-box > .box:not(.sideNavBox) > li.mn-item > .sub-mn,
.header .sub-mn-align-horizontal:not(.sub-mn-type-2) .box:not(.sideNavBox) .mn-item-overflow-list .header-overflow-pop {
	font-size: 0;
	background-color: @sub_mn_bg_cor;
	width: 100% !important;
	left: 0;
}

.logo-img img {
	transition: 0.2s ease all;
}