@charset "utf-8";

/* 기본 root는 테마 / _settingfile / headin_css.php 에서 선언 됨*/

/*header 영역 선언*/
/* 구분 -----------------------------------*/
/**** pc ****/
:root {

--inner: 1500px;   /* pc  상단 메뉴 높이 */
--inner-wide:calc(100% - 100px);   /* pc  와이드 양옆 최소 여백  */	

--header-h: 110px;   /* pc  상단 메뉴 높이 */
--header-h-open: 400px;   /* pc  상단  마우스 오버 높이 */	
	
/* 로고  */	
--logo-size-w: 230px; /* pc 로고 사이즈  */		
	

	
	
	
	
--header-bg-default:rgba(255, 255, 255,1);   /* pc 상단 배경 디폴트 0.0 투명도 */
--header-bg-opacity:rgba(255, 255, 255,0);   /* pc 상단 배경 디폴트 0.0 투명도 */
--header-bg-scroll: rgba(255, 255, 255,0.9); /* pc 상단 배경 스크롤시 */
--header-bg-line: 1px solid #eee; /* pc 상단  라인  */	
	
	

--logo-White: brightness(0) invert(1); /* 로고 화이트 : 필터 조절  */


/* 상단 메뉴  */	
--top1d-font-size: 19px; /* 1뎁스 사이즈  */	
--top1d-font-color: #333; /* 1뎁스 디폴트 컬러 */	
--top1d-font-color-opacity: #fff; /* 기본 배경이 투명일때 컬러 */		
--top1d-font-color-point: #f0473e; /* 메뉴 포인트 컬러 */		
--top1d-font-weight: 600; /* 1뎁스 두께  */	
--top1d-margin-left: 1.5vw; /* 1뎁스 간격  */		
--top1d-margin-right:  1.5vw; /* 1뎁스 간격  */		

--top1d-over-min: 150px; /* 1뎁스 마우스 오버시 벌어짐 효과 , 최소사이즈 , 벌어짐 효과 없애고 싶다면 auto */	
	
--top2d-font-size: 15px; /* 2뎁스 사이즈  */	
--top2d-font-color: #333; /* 2뎁스 디폴트 컬러 */		
--top2d-font-color-point: #f0473e; /*  메뉴 포인트 컬러 *  */		
--top2d-font-weight: 500; /* 2뎁스 두께  */		
	
		
--quick-menu-w:200px; /*  햄버거 메뉴 사이즈  */	

--line-default: #333; /* 기본 배경이 투명일때 컬러 */			
--line-opacity:  rgba(255, 255, 255,0.5); /* 기본 배경이 투명일때 컬러 */		
	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
:root {		
--inner: calc(100% - 40px);   /* 테이블  상단 메뉴 높이 */
--inner-wide:calc(100% - 40px);   /* 테이블  와이드 양옆 최소 여백  */	
--header-h: 90px;   /* 테블릿  상단 메뉴 높이 */
--header-h-open: 400px;   /* 테블릿  상단  마우스 오버 높이 */	
	
/* 로고  */	
--logo-size-w: 200px; /* 테블릿 로고 사이즈  */	
	
/* 상단 메뉴  */		
--top1d-font-size: 19px; /* 테블릿 1뎁스 사이즈  */		
--top2d-font-size: 13px; /* 테블릿 2뎁스 사이즈  */	 }
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
:root {	
--inner: calc(100% - 40px);   /* 모바일 상단 메뉴 높이 */
--inner-wide:calc(100% - 40px);   /* 모바일  와이드 양옆 최소 여백  */	
		
--header-h: 60px;   /* 모바일  상단 메뉴 높이 */
--header-h-open: 60px;   /*모바일  상단  마우스 오버 높이 */	
	
/* 로고  */	
--logo-size-w: 150px; /* 모바일 로고 사이즈  */	

/* 상단 메뉴  */	
--top1d-font-size: 14px; /* 모바일 1뎁스 사이즈  */		
--top2d-font-size: 12px; /* 모바일 2뎁스 사이즈  */	}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
	
}
/* 구분 //end -----------------------------------*/



header, a, #allmenu, .sns_box, .tel_box, #logo, .lang_menu, #lang_menu,.lang_selcet, #lnb_1da, .lnb_1da{transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}



header {width: 100%;	 position: fixed; left:0;	top:0;	height:var(--header-h); background-color: var(--header-bg-default);	 z-index:999999999999999999999999;  }


header.large { background-color: var(--header-bg-default);}
header.small { 	background-color: var(--header-bg-scroll);  backdrop-filter: blur(10px);}	

header.opacity {background-color: var(--header-bg-opacity)!important;}
header.opacity.large { background-color: var(--header-bg-default);}
header.opacity.small {background-color: var(--header-bg-scroll)!important;}



/*로고 설정  */

#logo {position:absolute; top:0px; height:var(--header-h);   left:0px; z-index:510; display: flex;  justify-content: center;  align-items: center;  }
#logo a img { width:var(--logo-size-w)}
#logo a img.White{filter: var(--logo-White); /* 흰색으로 변경 */}


header.large #logo a img {filter: none; /* 흰색으로 변경 */}
header.large #logo a img.White{filter: var(--logo-White); /* 흰색으로 변경 */}
header.small #logo a img{filter: none;  }	
	
#lnb:hover #logo a img{filter: none; }
	


.Inner_wide{width: var(--inner-wide); position: relative}








/* PC 오른쪽 글로벌 메뉴  */
.quick_body_close{width: var(--quick-menu-w);  height: 100vh; background-color: #FFF;  	position:fixed;	top:0px;	right: calc(var(--quick-menu-w) * -1); z-index:999999999999999999999; transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  }
.quick_body_open{ width: 300px;  height: 100vh;  background-color: #FFF;  	position:fixed;		top:0px;	right:0px; z-index:999;   box-shadow:3px 3px 30px rgba(0,0,0,0.3); }

.quick_head{ width: 100%; float: left; height: var(--header-h); line-height:var(--header-h); color: #333; padding: 0PX 20PX; display: flex;    align-items: center;  grid-gap: 10px}
.headtop{ width: 100%; height:var(--header-h); float: left;  background-color: #FFF;  color: #333; line-height: var(--header-h); box-sizing: border-box; padding-left: 20px;color: #fff; font-family:  'NanumSquare', sans-serif; transform: skew(-0.201deg);  font-weight: 700; }







#lnb{position:relative;overflow: hidden; height:var(--header-h);   width: 100%; transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */   border-bottom: 1px solid rgba(255,255,255,0.0); display: flex;  justify-content: center;  }


#lnb .Inner{ position: relative; }

#lnb:hover{position:relative;overflow: hidden; height:var(--header-h-open); width: 100%;  background-color: rgba(255,255,255,1); }

	

#lnb h2{position:absolute;font-size:0;line-height:0;overflow:hidden}

#lnb_1dul{ padding:0; width:100%; height: 100%; position: absolute; left: 100px; top: 0px; display: flex;  justify-content: center; /* 가로 중앙 정렬 */  align-items: flex-start; /* 세로 위쪽 정렬 */ padding-left:var(--logo-size-w)!important; padding-right:var(--logo-size-w)!important  }

/**** 모바일 에서 전체 메뉴 감춤 ****/
@media only all and (max-width:767px) {#lnb_1dul{  display: none}}



#lnb_1dul:after{display:block; visibility:hidden; clear:both; content:""; }
	
	
.lnb_1dli{z-index:10; position:relative; float:left; height:100%;    transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; }


.lnb_1da{display: inline-block; height:var(--header-h);    line-height:130%; font-size:var(--top1d-font-size); text-decoration:none; color:var(--top1d-font-color);   display: flex;  align-items: center;  margin-left: var(--top1d-margin-left);  margin-right: var(--top1d-margin-right);  position: relative; font-weight: var(--top1d-font-weight);}


#lnb_1dul .lnb_1da{transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; 
  width:auto;
}
#lnb .lnb_1dli{   width: auto;
            min-width: 100px; /* 초기 크기를 0으로 설정 */
            overflow: hidden; transition: all 0.5s;-moz-transition: all 0.5s; -webkit-transition: all 0.5s;-o-transition: all 0.5s; }

#lnb:hover .lnb_1dli{ border-left: 1px solid rgba(204,204,204,0.5); height: 100%;  min-width: var(--top1d-over-min)}



/*사이트별 개별 수정 */
#lnb:hover .lnb_1dli:nth-last-child(2){border-right: 1px solid rgba(204,204,204,0.0); min-width:calc( var(--top1d-over-min) + 40px)}
#lnb:hover .lnb_1dli:last-child{border-right: 1px solid rgba(204,204,204,0.5); min-width: var(--top1d-over-min)}


/*상단 배경이 투명일때 폰트 화이트 변환 선언 */

header:hover   #lnb .lnb_1da{color:var(--top1d-font-color); }

header.opacity   #lnb .lnb_1da{color:var(--top1d-font-color-opacity); }
header.opacity.small   #lnb .lnb_1da{color:var(--top1d-font-color)!important; }
header.opacity:hover  #lnb .lnb_1da{color:var(--top1d-font-color)!important; }







.lnb_1dli.current .lnb_1da,
.lnb_1dli:hover .lnb_1da,
.lnb_1da:focus,
.lnb_1da:hover,
.lnb_1da:active{text-decoration:none;}


.lnb_1dli .lnb_1da:after{width: 0%; height: 3px; background-color: var(--top1d-font-color-point); position: absolute; left:0px; top:var(--header-h); margin-top: -25px; content: ""; transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  }


.lnb_1dli:hover .lnb_1da:after{width:100%!important;content: "";   }

.lnb_1dli.active .lnb_1da:after{width:100%!important;content: "";   }





.lnb_2dul{width:100%; position: relative;margin-left: var(--top1d-margin-left);  padding:0px 0px 0px;box-sizing: border-box ; }


a.lnb_2da{display:block;padding:7px 0px;text-align:left; color:var(--top2d-font-color);font-size:var(--top2d-font-size); font-weight: var(--top2d-font-weight); position: relative; width: auto; clear: both; }

a.lnb_2da:hover{color:var(--top1d-font-color-point); }

.lnb_1dli a.lnb_2da:hover{color:var(--top1d-font-color-point);}
.lnb_1dli a.lnb_2da{width: auto; float: left;  position: relative  }
.lnb_1dli a.lnb_2da:after{width: 0%; height: 1px; background-color: var(--top1d-font-color-point);; position: absolute; left: 0px;  bottom:0px; content: ""; transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */  
}
.lnb_1dli a.lnb_2da:hover:after{width: 100%; content: "";   }






/*  햄버거 메뉴 설정 -----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
#m_menu {position:absolute; height:var(--header-h);   top: calc(var(--header-h) * 0.5);  margin-top: -15px;	 right:0px; z-index:999999999999999999999999999999999999;display: none;  cursor: pointer}
#m_menu.change {position:fixed; height:var(--header-h);   top: calc(var(--header-h) * 0.5);  margin-top: -15px;	 right:20px; z-index:999999999999999999999999999999999999;display: none;  cursor: pointer}
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
#m_menu {position:fixed; height:var(--header-h);   top: calc(var(--header-h) * 0.5);  margin-top: -15px;	 right:20px; z-index:999999999999999999999999999999999999; cursor: pointer}
}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/


/*  햄버거 메뉴 pc에서 보이게 설정  -----------------------------------*/	
#m_menu.pcview {  display: block}






.bar1, .bar2, .bar3 {
width: 25px;
height: 2px;
background-color: var(--top1d-font-color);
margin: 6px 0;
transition: 0.4s; 
}
.bar2 {
width: 25px;
height: 2px;
background-color: var(--top1d-font-color);
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 6px);
transform: rotate(-45deg) translate(-4px, 6px);background-color:var(--top1d-font-color);
}

.change .bar2 {opacity: 0;background-color: var(--top1d-font-color);}

.change .bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -8px);
transform: rotate(45deg) translate(-5px, -8px);background-color:  var(--top1d-font-color);
}






header.opacity #lnb .bar1, header.opacity  #lnb .bar2, header.opacity #lnb .bar3 {
width: 25px;
height: 2px;
background-color: var(--top1d-font-color-opacity);
margin: 6px 0;
transition: 0.4s; 
}
header.opacity #lnb .bar2 {
width: 25px;
height: 2px;
background-color: var(--top1d-font-color-opacity);
margin: 6px 0;
transition: 0.4s;
}
header.opacity  #lnb .change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 6px);
transform: rotate(-45deg) translate(-4px, 6px);background-color:var(--top1d-font-color);
}

header.opacity #lnb .change .bar2 {opacity: 0;background-color: var(--top1d-font-color);}

header.opacity #lnb .change .bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -8px);
transform: rotate(45deg) translate(-5px, -8px);background-color:  var(--top1d-font-color);
}






header.opacity:hover #lnb .bar1, header.opacity:hover   #lnb .bar2, header.opacity:hover #lnb .bar3 {
width: 25px;
height: 2px;
background-color: var(--top1d-font-color);
margin: 6px 0;
transition: 0.4s; 
}
header.opacity:hover  #lnb .bar2 {
width: 25px;
height: 2px;
background-color: var(--top1d-font-color);
margin: 6px 0;
transition: 0.4s;
}
header.opacity:hover  #lnb .change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 6px);
transform: rotate(-45deg) translate(-4px, 6px);background-color:var(--top1d-font-color);
}

header.opacity:hover #lnb .change .bar2 {opacity: 0;background-color: var(--top1d-font-color);}

header.opacity:hover #lnb .change .bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -8px);
transform: rotate(45deg) translate(-5px, -8px);background-color:  var(--top1d-font-color);
}

header.small #lnb .bar1, header.small   #lnb .bar2, header.small #lnb .bar3 {
width: 25px;
height: 2px;
background-color: var(--top1d-font-color)!important;
margin: 6px 0;
transition: 0.4s; 
}


header.small  #lnb .change .bar1 {
-webkit-transform: rotate(-45deg) translate(-4px, 6px);
transform: rotate(-45deg) translate(-4px, 6px);background-color:var(--top1d-font-color);
}

header.small #lnb .change .bar2 {opacity: 0;background-color: var(--top1d-font-color);}

header.small #lnb .change .bar3 {
-webkit-transform: rotate(45deg) translate(-5px, -8px);
transform: rotate(45deg) translate(-5px, -8px);background-color:  var(--top1d-font-color);
}




/* 우측 글로벌 메뉴 설정-----------------------------------*/
/**** pc ****/
@media only all and (min-width:768px) {
#gmenu {position:absolute;	top: 0px; 	right:0%; z-index:2; display: flex;
justify-content:flex-end;  align-items: center; flex-direction:row; box-sizing: border-box; display: flex; grid: 10px; height:var(--header-h);  }

	

#gmenu {display: none;}
#gmenu.pcview {  right:0px!important; display: block ; display: flex; grid: 10px!important;}
#gmenu.pcview>div{  margin-right: 10px}


	
.loginbtn{width:auto;   float: left; display: flex;  justify-content:flex-start;  align-items: center;   color:var(--top1d-font-color); font-size: 0.9em; position: relative; cursor: pointer; border: 1px dashed var(--line-default);; border-radius: 30px; 
	padding: 10px 20px 10px 40px ;  height: 40px; line-height: 38px; }	
.loginbtn:before{position: absolute; left:15px; top:0px;content: "\eaf1";    font-family: unicons-line;  width:20px;   height: 40px; line-height: 38px; font-size:20px}	
	
	
.joinbtn{width:auto;  float: left; display: flex;  justify-content:flex-start;  align-items: center;   color: var(--top1d-font-color); font-size: 0.9em;  position: relative;  cursor: pointer;border: 1px dashed  var(--line-default);; border-radius: 30px; 
	padding: 10px 20px 10px 40px; height: 40px; line-height: 38px; }	
 .joinbtn:before{position: absolute; left:15px; top:0px;content: "\ea0e";    font-family: unicons-line;  width:20px; height: 40px; line-height: 38px; font-size:20px}		
	
.adminbtn{  float: left; display: flex;  justify-content:flex-start;  align-items: center;   color: var(--top1d-font-color); font-size: 0.9em;  position: relative;  cursor: pointer; 
 width:50px; height: 40px; line-height: 38px; }	
.adminbtn:before{position: absolute; left:0px; top:0px;content: "\ec60";    font-family: unicons-line;  width:50px; height: 40px; line-height: 38px; font-size:25px ; }		
	
	
header.opacity .loginbtn{ color: var(--top1d-font-color-opacity); border: 1px dashed  var(--line-opacity);}	
header.opacity .joinbtn{  color: var(--top1d-font-color-opacity); border: 1px dashed  var(--line-opacity);}	
header.opacity .adminbtn{  color: var(--top1d-font-color-opacity);}	

	
header.opacity:hover .loginbtn{ color: var(--top1d-font-color); border: 1px dashed  var(--line-default);}		
header.opacity:hover .joinbtn{  color: var(--top1d-font-color); border: 1px dashed  var(--line-default);}	
header.opacity:hover .adminbtn{  color: var(--top1d-font-color); }	

	
header.small  .loginbtn{ color: var(--top1d-font-color); border: 1px dashed  var(--line-default);}	
header.small  .joinbtn{  color: var(--top1d-font-color); border: 1px dashed  var(--line-default);}	
header.small  .adminbtn{  color: var(--top1d-font-color);}	

	
}
/**** pc2 ****/
@media all and (max-width:1280px) and (min-width:768px) {
	
	
}
/**** 모바일 ****/
@media only all and (max-width:767px) {
#gmenu {display: none;}
	
	
	

}
/**** 모바일2 ****/
@media only all and (max-width:400px) {
}
/* 구분 //end -----------------------------------*/



.loginbtn_m{width:auto;   float: left; display: flex;  justify-content:flex-start;  align-items: center;   color:var(--top1d-font-color); font-size: 0.9em; position: relative; cursor: pointer; border: 1px dashed var(--line-default);; border-radius: 30px; 
	padding: 10px 20px 10px 40px ;  height: 40px; line-height: 38px; }	
.loginbtn_m:before{position: absolute; left:15px; top:0px;content: "\eaf1";    font-family: unicons-line;  width:20px;   height: 40px; line-height: 38px; font-size:20px}	
	
	
.joinbtn_m{width:auto;  float: left; display: flex;  justify-content:flex-start;  align-items: center;   color: var(--top1d-font-color); font-size: 0.9em;  position: relative;  cursor: pointer;border: 1px dashed  var(--line-default);; border-radius: 30px; 
	padding: 10px 20px 10px 40px; height: 40px; line-height: 38px; }	
.joinbtn_m:before{position: absolute; left:15px; top:0px;content: "\ea0e";    font-family: unicons-line;  width:20px; height: 40px; line-height: 38px; font-size:20px}		
	






.mainNav {
			background: #FFF;
			width: 100%; float: left 
		}
			/* First Level */
			.mainNav ul {
				margin: 0;
				padding: 0;
				list-style: none;
				border-bottom: 1px solid #CCC
			}
			.mainNav ul li {
				border-top: 1px solid #CCC;
			}
			.mainNav ul li a {
				color: #333;
				display: block;
				font-size: 1.1em;
				line-height: normal;
				padding:10px 20px;
				text-decoration:none;
			}
		.mainNav ul li>div {
				color: #333;
				display: block;
				font-size: 1.1em;
				line-height: normal;
				padding:10px 20px;
				text-decoration:none;
			}


			.mainNav ul li a:hover {
				background: #FFF;
				text-decoration: none;
			}
				/* Second Level */
				.mainNav ul ul {
					border-bottom: none
				}
				.mainNav ul ul li {
					border-top: 1px solid #CCC;
					background: #F7F7F7;
				}
				.mainNav ul ul li a {
					color: #333;
					display: block;
					font-size: 1em;
					line-height: normal;
					padding: 0.5em 1em 0.5em 2.5em;
				}
				.mainNav ul ul li a:hover {
					background: #F7F7F7;
				}
						/* Third Level */
				.mainNav ul ul ul {
					border-top:1px solid #CCC;
				}
				.mainNav ul ul ul li {
					border:none;
				}
				.mainNav ul ul ul li a {
					padding-left:3.5em; 
					padding-top:0.25em; 
					padding-bottom:0.25em;
				}
			/* Accordion Button */
		 .accordion-btn {
				color:#333; 
			 font-size:14px; box-sizing: border-box;   padding-top:0px
			}


 .accordion-btn-wrap{
			z-index: 99999999999999999999999999999!important	; position: relative
			}

	.accordion-btn{
		color:#333; 
			 font-size:14px; box-sizing: border-box;  padding-top: 0px; position: absolute; top: -0px; right: 0px
			}



					}



		@media screen and (max-width: 1024px) {
			.mainNav {width: 100%;}
		}
		@media screen and (max-width: 700px) {
			.mainNav {width: 100%;}
		}
	.has-subnav a {
				width: calc(100% -50px)!important; margin-right: 0px!important
			}


 .accordion-btn-wrap{
			z-index: 99999999999999999999999999999!important	; position: relative
			}

.accordion-header-only .accordion-btn-wrap .accordion-btn{
		color:#333; 
			 font-size:14px; box-sizing: border-box;  padding-top: 10px; position: absolute; top: 0px; right:00px
			}