@charset "utf-8";
/**
 * all.css
 * Base Adjust + Layout[main+sub] Mobile First!
 * 20240603 | @m | 최초작성. 요구반영. 결함개선. 고도화
 * 20240607 | @m |
 * 20240621 | @m |
 * 20240628 | @m |
 * 20240718 | @m |
 * 20240823 | @m |
 * 20240906 | @m |
 * 20241011 | @m |
 * 20250307 | @m | #tnb1
 * 20250318 | @m | //
 * 20250327 | @m | 공용, 배치.전체, 배치.유틸
 * 20250521 | @m | 주메뉴
 * 20260205 | @m | body
 */


/* All Device ◆◆◆◆◆◆◆◆◆◆ */


/* Base 20260205 ◆◆◆ */


html{
	height:100%;
	scroll-behavior:smooth;
}
body{
	height:100%;
	color:var(--color-body, #555);
	font-size:1em; /* (( 16px */
	line-height:1.75; /* (( 1.75 */
	letter-spacing:-.03125em; /* (-.5px/16px) */
	overflow-x:hidden; /* ★ Mobile 가로범람 방지 (( #container */
}
body:not([x]){ /* 고정값만(반응형값아닌) */
	font-family:
		'Apple SD Gothic Neo',
		-apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
		/* Pretendard, */
		'Outfit',
		Roboto,
		Lato,
		'Open Sans',OpenSans,
		'Segoe UI',
		'Microsoft JhengHei',
		'Meiryo',
		/* '본고딕','Noto Sans KR','Noto Sans CJK KR',NotoSans, */ /* 로컬 파일 우선 */
		'본고딕',NotoSans,'Noto Sans KR','Noto Sans CJK KR', /* 리모트 우선 */
		/* '나눔고딕',NanumGothic,'Nanum Gothic', */
		'맑은 고딕','Malgun Gothic',
		'돋움',Dotum,
		Helvetica,'Helvetica Neue',
		Arial,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		'Noto Color Emoji',
		'Segoe UI Symbol',
		sans-serif;
	font-feature-settings:'tnum';
	cursor:initial;
}


/* ◇◆ 공용 20250327 ◇◆ */


/* var() */
:root{
	--head-height:50px; /* 헤더높이.. */
	--head-bg:#fff; /* 헤더배경 #f6fafc */
	--tnb-width:260px; /* 주메뉴폭.. */
	--container-max-width:none; /* (( 1200px 본문콘텐츠최대폭 */
	--container-space:calc(10px + 60/1920*100%); /* 본문콘텐츠여백 */
	--container-offset:calc( var(--container-space) * 1920/(1920 - 60*2) );
}


/* ◇◆ Layout[main+sub] ◇◆◇◆◇◆◇◆◇◆ */


/* 배치.전체 20250327 */
html,
body,
#container, #wrap, #body{min-height:100%;}
.container{
	position:relative;
	min-width:280px;
	max-width:var(--container-max-width);
	margin:0 var(--container-space);
}
#container{
	position:relative;
	height:100%;
}
	#head{
		clear:both;
		z-index:90;
		position:fixed;left:0;right:0;top:0;
		height:var(--head-height);
		border-bottom:1px solid #e5e7eb;
		background:var(--head-bg);
	}
		#head>.container{
			position:sticky;
			max-width:none;
			height:100%;
		}
			#head_s1{
				display:flex;
				justify-content:space-between;
				align-items:center;
				position:relative;
				height:100%;
			}
			#head_s2{}
	#wrap{
		clear:both;
		position:relative;
		min-height:10em;
		margin:var(--head-height) 0 0;
		transition:.2s;
	}
		#wrap>.container{
			position:relative;
			margin:0 auto;
		}
			/* #sidebar{}
				#sidebar>.container{} */
			#body{
				/* ☆ z-index:0; */
				position:relative;
				box-sizing:border-box;
				word-wrap:break-word;
				/* word-break:keep-all; */
			}
			#body>.container{
				margin:0 auto;
			}
			/* #body_head{}
				#body_head>.container{}
			#body_foot{}
				#body_foot>.container{} */
			#body_content{
				/* min-height:calc(100vh - var(--head-height)); */
				box-sizing:border-box;
				padding:calc(20px + 30/1920*100%) 0 100px;
				/* background:#fff; */
				font-size:.875rem; /* ☆ */
			}
				#body_content>.container{}
	#wing{
		z-index:99;
		position:fixed;left:0;right:0;bottom:0;
		height:0;
	}
		#wing>.container{
			max-width:none;
			height:0;
		}
	#foot{
		clear:both;
		position:relative;
		/* background:#eee; */
	}
		#foot_s1{
			position:relative;
		}
		#foot_s2{position:relative;}
			#foot_s1>.container{}
			#foot_s2>.container{
				/* margin-top:2.5em; */
				/* margin-bottom:2.5em; */
			}


/* 배치.유틸 20250327 */
/* .s1width1full1{
	margin-left:calc( (100% - 100vw) / 2);
	margin-right:calc( (100% - 100vw) / 2);
} */
.s1width1full1[class]{
	margin-left:calc(var(--container-offset) * -1);
	margin-right:calc(var(--container-offset) * -1);
}
.s1width1full1-in1[class]{
	padding:var(--container-space);
}
.s1width1full2[class]{
	margin-left:calc(var(--container-offset) * -1);
	margin-right:calc(var(--container-offset) * -1);
	padding:var(--container-offset);
}
.s1height1full1{
	margin-top:calc(-20px - 3%) !important;
	margin-bottom:calc(-20px - 3%) !important;
}
/* ☆ */
.show-over{
	display:none;
}
.show-default{
	display:inherit;
}


/* ☆ 모바일 감춤 20240607 */

/* #gn1{display:none;}  */


/* only Desktop BG image Preload 20240607 */
/* none */



/* #head */


/* 로고 20241011 */
#logo{
	display:flex;
	align-items:center;
	z-index:10;
	margin:0 20px 0 30px;
	border:0;
	background:none;
	color:#345;
	font-size:16px;
	letter-spacing:0;
}
#logo a{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	gap:.25em;
	color:inherit;
}
#logo .t1{}
#logo .t2{
	color:var(--color1v1);
	font-weight:700;
}
#logo .t3{
	color:#678;
	font-weight:500;
	font-size:.9375em;
}
#logo img{
	width:auto;
	height:calc(30px / 2);
}


/* 글로벌내비 20240823 */
#gn1{
	display:inline-block;
	position:relative;
	margin:0 0 0 auto;
	line-height:1.375;
}
#gn1 .mns1{
	display:flex;
	align-items:center;
	margin:0 -1rem 0 0;
}
#gn1 .mn1{
	display:flex;
	align-items:center;
	position:relative;
	color:#64748bcc;
	font-size:.75em;
}
#gn1 .a1{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	z-index:10;
	position:relative;
	box-sizing:border-box;
	min-width:40px;
	height:40px;
	color:inherit;
	white-space:nowrap;
	overflow:hidden;
}
#gn1 .a1t1{
	font-weight:500;
	position:absolute;left:-9999px;
}
#gn1 .a1ic1{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	width:30px;
	height:30px;
	border-radius:9999px;
	font-size:20px;
	font-variation-settings:var(--fvs1), 'FILL' 1;
}
#gn1 .a1ic2{
	display:inline-flex;
	position:absolute;right:0;top:0;
	width:6px;
	height:6px;
	margin:5px;
	border:2px solid var(--head-bg, transparent);
	border-radius:9999px;
	background:#f55;
	overflow:hidden;
}
/*  */
#gn1 .a1:hover .a1ic1{
	background:#0001;
}


/* #sidebar */



/* #wing */


/* 위로 20240607 */
#gotop1{
	display:flex;
	justify-content:center;
	align-items:center;
	box-sizing:border-box;
	width:2.5em;
	height:2.5em;
	margin:-5rem 0 0 auto;
	border-radius:9999px;
	background:#0002;
	color:#fff;
	overflow:hidden;
	transform:translateY(400%);
	transition:.4s;
}
#gotop1 .t1{
	display:none;
	margin:.5em 0 0;
	font-weight:300;
	font-size:.875em;
	line-height:1.375;
	letter-spacing:0;
}
#gotop1 .ic1{
	display:block;
	position:relative;
	width:1em;
	height:.75em;
}
#gotop1 .ic1:before{content:''; /* / */
	display:block;
	position:absolute;left:50%;top:0;
	width:2px;
	height:.75em;
	margin:0 -.5px;
	border-radius:9999px;
	background:currentcolor;
	transform:rotate(45deg);
	transform-origin:50% 0;
	transition:.2s;
}
#gotop1 .ic1:after{content:''; /* ＼ */
	display:block;
	position:absolute;right:50%;top:0;
	width:2px;
	height:.75em;
	margin:0 -.5px;
	border-radius:9999px;
	background:currentcolor;
	transform:rotate(-45deg);
	transform-origin:50% 0;
	transition:.2s;
}
#gotop1.on{
	transform:none;
}
#gotop1:hover,
#gotop1:focus{
	background:#0004;
}

#gotop1:hover .ic1,
#gotop1:focus .ic1{
	/* animation:move-up .6s linear infinite; */
}
#gotop1:hover .ic1:before{
	height:calc(.75em + 2px);
	margin:-1px -.75px;
	transform:rotate(35deg);
}
#gotop1:hover .ic1:after{
	height:calc(.75em + 2px);
	margin:-1px -.75px;
	transform:rotate(-35deg);
}


/* #foot */
/* #sidebar */
/* #body_head */
/* #body_foot */
/* #body_content */



/* ETC */


/* ◇◆ StyleName. YYYYMMDD. @Who	 ◇◆ */


/* ◇◆ @media print{} ◇◆◇◆◇◆◇◆◇◆◇◆ */


/* 인쇄 20200820. 20240607.
 */
@media print{
	/* hide */
	#head, #visual, #foot, #wing, #sidebar, #side, #aside,
	#body_foot,
	#tnb1,
	#quickmenu1,
	#fast1,
	#location1,
	#bn1,
	#fontsize1,
	#go1sib1,
	.bg, .noprint{display:none !important;}
	/* show */
	html{background:#fff !important;}
	body,
	#container, #wrap, #body,
	.container,
	#body_head,
	#body_head_s1, #body_head_s2,
	#body_content{float:none !important;left:0 !important;top:0 !important;width:auto !important;min-width:0 !important;max-width:none !important;height:auto !important;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;overflow:visible !important;box-shadow:none !important;}
	#body_title{display:block !important;position:static !important;left:0 !important;top:0 !important;height:auto !important;margin:0 !important;padding:0 0 1em !important;border:0 !important;}
	table{border-color:#999 !important;}
	table th,
	table td{border-color:#999 !important;}
	/* transparent */
	#head_below{background:transparent !important;}
}


/* RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */
/* @media all and (max-width:1259px){ */ /* small medium large ◇◆◇◆◇◆◇◆◇◆ */


/* 주메뉴 20250521. makeActive2ClickHover('#tnb1'); */
#tnb1{
	position:absolute;left:0;right:0;top:0;
	width:100%;
	margin:auto;
	line-height:1.375;
	word-wrap:break-word;
	word-break:keep-all;
}
#tnb1 .b1.toggle{
	display:inline-flex;
	justify-content:center;
	align-items:center;
	z-index:20; /* ☆(화면확인) */
	position:absolute;
	left:0;
	top:calc( var(--head-height) / 2 );
	box-sizing:border-box;
	width:40px;height:40px;
	margin:-20px -12px;
	border-radius:2px;
	background:none;
	overflow:hidden;
	opacity:.8;
	transition:.2s;
}
#tnb1 .b1.toggle .t1{
	font-size:0;
	text-indent:-9999px;
}
#tnb1 .b1.toggle .ic1	{
	display:inline-block;
	position:relative;
	width:16px;
	height:2px;
	margin:4px 0;
	background:currentcolor;
	color:#123;
	transition:.2s;
}
#tnb1 .b1.toggle .ic1:before,
#tnb1 .b1.toggle .ic1:after{content:'';
	position:absolute;left:0;right:0;
	top:0;
	height:2px;
	margin:-6px 0;
	background:currentcolor;
	transition:.2s;
}
#tnb1 .b1.toggle .ic1:after{
	top:auto;
	bottom:0;
}
#tnb1 .b1.toggle.on{}
#tnb1 .b1.toggle.on .ic1{
	background:none;
	transform:rotate(180deg);
}
#tnb1 .b1.toggle.on .ic1:before{
	margin:0;
	transform:rotate(45deg);
}
#tnb1 .b1.toggle.on .ic1:after{
	margin:0;
	transform:rotate(-45deg);
}
#tnb1 .b1.toggle:hover,
#tnb1 .b1.toggle:focus{
	opacity:1;
}
/*  */
#tnb1c{
	display:block !important; /* ☆ */
	visibility:hidden; /* ☆ */
	z-index:100; /* ☆ */
	position:fixed;left:0;right:0;top:0;bottom:0;
	width:100%;
	margin:var(--head-height) 0 0;
	overflow-y:visible; /* ☆ */
	transform:translateX(-100%);
	transition:0s .2s;
}
#tnb1c.on{
	display:block;
	visibility:visible;
	transform:none;
	transition:0s;
}
#tnb1c>.bg{
	visibility:hidden;
	position:absolute;left:0;right:0;top:0;bottom:0;
	background:#0006;
	opacity:0;
	transition:.2s;
}
#tnb1c.on>.bg{
	visibility:visible;
	opacity:1;
}
html.PC #tnb1c>.bg{ /* 모바일아니면 */
	display:none !important;
}
/* ☆ */
#tnb1c .b2{
	display:none; /* ☆ */
	z-index:110;
	position:absolute;right:0;top:0;
	width:40px;height:40px;
	margin:8px;
}
#tnb1c .b2>.ic1{
	float:left;
	position:absolute;left:50%;top:50%;
	width:16px;height:16px;
	margin:-8px;
	background:url() no-repeat center center / contain;
}
#tnb1c .b2.close{}
#tnb1c .b2.close>.ic1{background:url(../../img/inc/ic30a3c2x1.png) no-repeat center center / auto;}
#tnb1c .d1 ~ .b2.close>.ic1{
	opacity:0;
}
/* ☆ */
#tnb1c>div.cont{
	display:flex;
	flex-direction:column;
	visibility:hidden;
	position:relative;
	left:0;
	box-sizing:border-box;
	width:var(--tnb-width);
	height:100%;
	/* border-right:1px solid #f1f5f9; */
	background:#f8fbfd; /* var(--head-bg) */
	color:inherit;
	/* overflow:hidden; */
	transform:translateX(-100%);
	transition:.2s;
}
#tnb1c>div.cont:before{content:'';
	display:block;
	position:absolute;left:0;right:0;top:0;
	height:1px;
	background:linear-gradient(90deg, #e2e8f000 0%, #e2e8f0 50%, #e2e8f000 100%);
	background:#e5e7eb;
}
#tnb1c.on>div.cont{
	visibility:visible;
	transform:none;
}
/* depth1~depth4 */
#tnb1 .smain{display:block;}
/* depth1 */
#tnb1 div.d1{
	/* flex:1; */
	clear:both;
	position:relative;
	/* height:100%; */
	margin:1px 0;
	overflow-y:auto; /* ☆ */
}
/*  */
#tnb1 div.d1>ul{
	box-sizing:border-box;
	padding:1.75rem 28px 40px; /* 모바일 UX 위해 여유 둠 */
	/* border-top:1px solid #fff1; */
}
#tnb1 div.d1>ul>li{display:inline;} /* ☆ */
#tnb1 div.d1>ul>li>a{
	display:flex;
	align-items:center;
	z-index:20; /* .d2 보다 높여준다 */
	position:relative;
	box-sizing:border-box;
	padding:.5rem 12px;
	border-radius:var(--radius2);
	/* background:url(../../img/inc/tnb1d1bg1.png) no-repeat 10px 50%; */
	color:#789;
	font-weight:400;
	font-size:14px;
	word-break:keep-all;
	word-wrap:break-word;
	transition:.2s;
}
#tnb1 div.d1>ul>li>a>.ic1{content:'';
	display:inline-flex;
	justify-content:center;
	align-items:center;
	width:30px;
	height:30px;
	margin:0 .625rem 0 0;
	border-radius:40%;
	background:#fff url() no-repeat center center / contain;
	color:var(--color1);
	font-size:16px;
	font-variation-settings:var(--fvs1), 'FILL' 1;
	box-shadow:var(--shadow1);
	transition:.2s;
}
#tnb1 div.d1>ul>li:first-child>a{
	/* display:none; */
}
#tnb1 div.d1>ul>li>a>.t1{
	display:block; /* ☆ */
	vertical-align:middle;
}
#tnb1 div.d1>ul>li.hasSub>a{
	/* background-image:url(../../img/inc/tnb1d1bg1has.png); */
}
#tnb1 div.d1>ul>li>a:hover{
	background:#fff;
	color:#567;
	box-shadow:var(--shadow1);
}
#tnb1 div.d1>ul>li>a:hover>.ic1{
	background-color:var(--color1);
	color:#fff;
}
/* depth1 활성 */
#tnb1 div.d1>ul>li.on>a{
	/* background-image:url(../../img/inc/tnb1d1bg1on.png); */
	color:#567;
	font-weight:500;
}
#tnb1 div.d1>ul>li.on>a>.ic1{
	background-color:var(--color1);
	color:#fff;
}
/* depth2~3 */
#tnb1 li>div[class^='d']{
	display:none;visibility:hidden;
	height:0;opacity:0;
	/* transition:.2s; */
}
#tnb1 li.on>div[class^='d']{
	display:block;visibility:visible;
	height:auto;opacity:1;
}
#tnb1 .tt1{
	position:absolute;left:-9999px;
}
/* depth2 */
#tnb1 li>div.d2{
	display:block;visibility:visible;
	height:auto;opacity:1;
}
#tnb1 div.d2>ul{
	/* margin:-1px 0; */
	padding:0 0 .75rem;
	/* border-top:1px solid #fff1; */
	/* border-bottom:1px solid #fff1; */
}
#tnb1 div.d2>ul>li{}
#tnb1 div.d2>ul>li>a{
	display:flex;
	z-index:10;
	position:relative;
	padding:.375rem 0 .5rem calc(12px + 30px + .625rem);
	border-radius:.3125rem;
	/* background:url(../../img/inc/tnb1d2bg1.png) no-repeat; */
	/* background-position:calc(100% - 16px) .9375em; */
	color:#888;
	font-size:13px;
	transition:.2s;
}
#tnb1 div.d2>ul>li>a>.t1{
	font-size:1em;
}
#tnb1 div.d2>ul>li>a>.ic1{ /* Matrial Icon */
	margin:.0625em .5em 0 0;
	font-size:18px;
}
#tnb1 div.d2>ul>li.hasSub>a{
	/* background-image:url(../../img/inc/tnb1d2bg1has1.png); */
}
#tnb1 div.d2>ul>li>a:hover,
#tnb1 div.d2>ul>li>a:focus{
	color:var(--color1);
}
#tnb1 div.d2>ul>li.on>a{
	/* background-image:url(../../img/inc/tnb1d2bg1on.png); */
	background:var(--color21);
	color:var(--color1);
	font-weight:500;
	opacity:1;
}
#tnb1 div.d2>ul>li.hasSub.on>a{
	/* background-image:url(../../img/inc/tnb1d2bg1has1on.png); */
}
/*  */
#tnb1 small{
	/* font-weight:400; */
}
/* 주메뉴 푸터그룹 */
#tnb1 .fg1{
	flex:none;
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:auto 16px 0 16px;
	padding:16px 2px;
	border-top:1px solid #0001;
}
#tnb1 .fg1 .copyright{
	display:block;
	color:#888;
	font-size:.6875em;
	letter-spacing:0;
}
/*  */
#tnb1 .new{
	flex:none;
	width:5px;
	height:5px;
	margin:0 0 1em .5em;
	border-radius:9999px;
	background:var(--color2);
	overflow:hidden;
	text-indent:-9999px;
}


/* } */ /* /(max-width:1259px) */
@media all and (max-width:999px){ /* small medium ◇◆◇◆◇◆◇◆◇◆ */
} /* /(max-width:999px) */
@media all and (max-width:767px){ /* small ◇◆◇◆◇◆◇◆◇◆ */


/* Mobile font-size 20240607 */
html{
	/* font-size:.75em; */ /* (12/16) */
}


/* var() */
:root{
	/* --head-height:80px; */
}


} /* /(max-width:767px) */
@media all and (min-width:768px){ /* medium ◇◆◇◆◇◆◇◆◇◆ */


#logo img{
	height:calc(30px / 2);
}

#gn1 .a1.s1{
	margin-right:.5rem;
}
#gn1 .a1.s1 .a1t1{
	position:static;
	margin-left:.25rem;
}

#tnb1 div.d1::-webkit-scrollbar{
	width:6px;
	height:6px;
	background-color:#0001;
}
#tnb1 div.d1::-webkit-scrollbar-thumb{
	border-radius:9999px;
	background-color:#89a6;
}
#tnb1 div.d1:hover::-webkit-scrollbar-thumb,
#tnb1 div.d1:focus::-webkit-scrollbar-thumb{
	box-shadow:inset 0 0 999px 0 #0001;
}


} /* /(min-width:768px) */
@media all and (min-width:1000px){ /* large ◇◆◇◆◇◆◇◆◇◆ */
} /* /(min-width:1000px) */
@media all and (min-width:1260px){ /* xlarge (1200+20*2+16+2*2) ◇◆◇◆◇◆◇◆◇◆ */


#head>.container{
	margin-left:40px;
}
/* html.tnb1-on #wrap{ */
#wrap{ /* 항상보임. 20240607 */
	padding:0 0 0 var(--tnb-width);
	transition:0s;
}
	#body_content{
		/* padding:0 0 120px; */
	}
		#body_content>.container{}


/* ◇◆ 공통 조정 ◇◆ */


#logo{
	margin-left:0;
}


/* 주메뉴. 모바일과 다른 부분만 수정. 20240315. */
#tnb1{
	right:auto;
	width:var(--tnb-width);
}
#tnb1 .b1.toggle{
	display:none; /* ☆ */
}
#tnb1c{
	visibility:visible; /* 항상보임 */
	width:var(--tnb-width);
	transform:none;
	transition:0s;
}
#tnb1c>.bg{
	display:none !important;
}
#tnb1c>div.cont{
	visibility:visible;
	transform:none;
	transition:0s;
}


/* 첫로딩 즉시 동작 */
html:not(.loaded) #wrap,
html:not(.loaded) #tnb1c,
html:not(.loaded) #tnb1c>div.cont{
	transition:0s;
}


/* ◇◆◇◆ only Desktop Contents ◇◆◇◆ */
/* none */


} /* /(min-width:1260px) */
@media all and (min-width:1440px){ /* xlarge2 (1360+40*2) ◇◆◇◆◇◆◇◆◇◆ */
} /* /(min-width:1440px) */
@media all and (min-width:1580px){ /* ◇◆◇◆◇◆◇◆◇◆ */


#body_content{}
	#body_content>.container{
		max-width:var(--container-max-width);
	}


} /* /(min-width:1580px) */
@media only screen and (-webkit-min-device-pixel-ratio:1.3){ /* (O) mobile ◇◆◇◆◇◆◇◆◇◆ */
}/* /(min-device-pixel-ratio:1.3) */
/* /RWD ◇◆◇◆◇◆◇◆◇◆◇◆ */

/* ◇◆ animation ◇◆◇◆◇◆◇◆◇◆ */


@keyframes move-up{
	49.9999% {
		visibility:hidden;
		transform: translate3d(0,-200%,0);
	}
	50.0001% {
		visibility:visible;
		transform: translate3d(0,200%,0);
	}
}


/* ◇◆ /animation ◇◆◇◆◇◆◇◆◇◆ */