/*---------------------------------------------------------------------------
	[LAYOUT GUIDE]
	#wrapper	>	#container	>	(#regin)	>	#area	>	#section	>	#box	>	#sector
	GNB	(Global Navigation Bar)	:	사이트 최상위 전체 공통네비게이션.메인메뉴, 대분류 메뉴, 전체 사이트에서 사용되는 공통메뉴바
	LNB	(Local Navigation Bar)	:	현재 서비스 영역(Local)만 해당되는 네비게이션.서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 메뉴바
	SNB	(Side Navigation Bar)	:	메인메뉴, 서브메뉴를 제외한 나머지 사이드메뉴, 기타메뉴바
	FNB	(Foot Navigation Bar)	:	하단메뉴, 하단로고, 주소, 카피라이팅 영역

	font-family: 'NanumBarunGothic';	font-weight: 400;		200	300	400			700
	font-family: 'Nanum Barun Gothic';	font-weight: 400;		200	300	400			700
	font-family: 'Noto Sans KR';		font-weight: 400;	100		300	400	500		700		900
	font-family: 'Raleway';				font-weight: 400;	100	200	300	400	500	600	700	800	900
	font-family: 'Roboto';				font-weight: 400;	100		300	400	500		700		900

	focus		#0096a0
	logo_color	#004e53
	logo_red	#ed1c24
	logo_black	#231f20
	logo_gray	#58585b		(88, 88, 91)
	logo_silver	#a7a9ab		(167, 169, 171)
	logo_gold	#ac8a1b

	https://www.colorhexa.com/00caf5
	[Shades and Tints of #004e53]
	#000405		#001718		#00292c		#003c3f		#004e53		#006067		#00737a		#00858e		#0098a1
	#00aab5		#00bdc9		#00cfdc		#00e1f0		#05f0ff		#18f1ff		#2cf2ff		#3ff3ff		#53f5ff
	#67f6ff		#7af7ff		#8ef8ff		#a1f9ff		#b5fbff		#c9fcff		#dcfdff		#f0feff
	[Tones of #004e53]
	#262c2d		#232f30		#203233		#1d3536		#1a3839		#163a3d		#133d40		#104043		#0d4346
	#0a4649		#06484d		#034b50		#004e53

	[Shades and Tints of #262c2d]	(38, 44, 45)
	#020202		#0b0d0d		#141718		#1d2222		#262c2d		#2f3638		#384142		#414b4d		#4a5658
	#536062		#5c6a6d		#657577		#6e7f82		#77898c		#829395		#8c9c9e		#97a5a7		#a2aeb0
	#acb7b9		#b7c1c2		#c2cacb		#ccd3d4		#d7dcdd		#e2e5e6		#ecefef		#f7f8f8

	[Shades and Tints of #ed1c24]
	#090101		#1b0203		#2e0405		#400507		#520609		#64080b		#76090e		#880b10		#9b0c12
	#ad0e14		#bf0f16		#d11118		#e3121a		#ed1c24		#ee2e36		#f04047		#f15359		#f3656a
	#f4777c		#f6898d		#f79b9f		#f9adb0		#fac0c2		#fbd2d3		#fde4e5		#fef6f6
---------------------------------------------------------------------------*/
/*--------------------------------------------------
	BASIC
--------------------------------------------------*/
	.sm-blue {
		background: transparent;
		height: 70px;
	}
	.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
		color: #414b4d;
		font-family: 'Noto Sans KR';
		font-size: 0.98rem;
		font-weight: 500;
		line-height: 23px;
		text-decoration: none;
		letter-spacing: -0.7px;
	}
	.sm-blue a.current {
		/*
		background-color: #006892;
		color: #fff;
		*/
	}
	.sm-blue a.disabled {
		color: #a1d1e8;
	}
	.sm-blue a .sub-arrow {
		position: absolute;
		top: 50%;
		margin-top: -17px;
		left: auto;
		right: 4px;
		width: 34px;
		height: 34px;
		overflow: hidden;
		font: bold 14px/30px monospace !important;
		text-align: center;
		text-shadow: none;
		background-color: rgba(0, 0, 0, 0.1);
		border-radius: 0px;
	}
	.sm-blue a .sub-arrow::before {
		content: '+';
	}
	.sm-blue a.highlighted .sub-arrow::before {
		content: '-';
	}
	.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
		border-radius: 0;
	}
	.sm-blue > li:last-child > a, .sm-blue > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul {
		border-radius: 0;
	}
	.sm-blue > li:last-child > a.highlighted, .sm-blue > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > a.highlighted, .sm-blue > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > ul > li:last-child > *:not(ul) a.highlighted {
		border-radius: 0;
	}
	.sm-blue ul {
		background-color: #fff;
	}
	.sm-blue ul ul {
		background-color: rgba(102, 102, 102, 0.1);
		/*
		background-color: rgba(102, 102, 102, 0.1);
		*
	}
	.sm-blue ul a, .sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active {
		/*
		background: transparent;
		font-family: 'Raleway';
		color: #2b82ac;
		font-size: 15px;
		text-shadow: none;
		border-left: 8px solid transparent;
		line-height: 46px;
		*/
	}
	.sm-blue ul a.current {
		/*
		background-color: #006892;
		background-image: linear-gradient(to bottom, #006188, #006f9c);
		color: #fff;
		*/
	}
	.sm-blue ul a.disabled {
		/*
		color: #b3b3b3;
		*/
	}
	.sm-blue ul ul a,
	.sm-blue ul ul a:hover,
	.sm-blue ul ul a:focus,
	.sm-blue ul ul a:active {
		border-left: 16px solid transparent;
		line-height: 46px;
	}
	.sm-blue ul ul ul a,
	.sm-blue ul ul ul a:hover,
	.sm-blue ul ul ul a:focus,
	.sm-blue ul ul ul a:active {
		border-left: 24px solid transparent;
	}
	.sm-blue ul ul ul ul a,
	.sm-blue ul ul ul ul a:hover,
	.sm-blue ul ul ul ul a:focus,
	.sm-blue ul ul ul ul a:active {
		border-left: 32px solid transparent;
	}
	.sm-blue ul ul ul ul ul a,
	.sm-blue ul ul ul ul ul a:hover,
	.sm-blue ul ul ul ul ul a:focus,
	.sm-blue ul ul ul ul ul a:active {
		border-left: 40px solid transparent;
	}
	.sm-blue ul li {
		border-top: 1px solid rgba(0, 0, 0, 0.05);
	}
	.sm-blue ul li:first-child {
		border-top: 0;
	}

	@media (min-width: 861px) {
		/* Switch to desktop layout
		-----------------------------------------------
		These transform the menu tree from
		collapsible to desktop (navbar + dropdowns)
		-----------------------------------------------*/
		/* start... (it's not recommended editing these rules) */
		.sm-blue ul {
			position: absolute;
			width: 12em;
		}
		.sm-blue > li > ul {
			margin-left: 10px;
			width: 210px !important;	/*하위 메뉴 폭*/
			/*
			border-top: 1px solid #b7c1c2;
			margin-top: 2px;
			border-top: 1px solid rgba(255, 255, 255, 0.5);
			padding-top: 4px;
			*/
		}
		.sm-blue > li > ul > li {
			margin-left: -0px;
		}
		.sm-blue li {
			float: left;
		}
		.sm-blue.sm-rtl li {
			float: right;
		}
		.sm-blue ul li, .sm-blue.sm-rtl ul li, .sm-blue.sm-vertical li {
			float: none;
		}
		.sm-blue a {
			white-space: nowrap;
		}
		.sm-blue ul a, .sm-blue.sm-vertical a {
			white-space: normal;
		}
		.sm-blue .sm-nowrap > li > a, .sm-blue .sm-nowrap > li > :not(ul) a {
			white-space: nowrap;
		}

		/* ...end */
		.sm-blue {
		}
		.sm-blue > li > a{
		}
		.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
			background: transparent;
			line-height: 70px;
			color: #2f3638;
		}
		.sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active, .sm-blue a.highlighted {
			color: #066CB0;
			font-weight: 400;
			/*
			background-image: linear-gradient(to bottom, #f7f8f8, #ccd3d4);
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
			color: #3092c0;
			*/
		}
		.sm-blue a.current {
			color: #066CB0;
		}
		.sm-blue a.disabled {
			/*
			color: #a1d1e8;
			*/
		}
		.sm-blue a .sub-arrow {
			top: auto;
			margin-top: 0;
			bottom: 2px;
			left: 50%;
			margin-left: -5px;
			right: auto;
			width: 0;
			height: 0;
			border-width: 5px;
			border-style: solid dashed dashed dashed;
			border-color: #acb7b9 transparent transparent transparent;
			background: transparent;
			border-radius: 0;
		}
		.sm-blue a .sub-arrow::before {
			display: none;
		}
		.sm-blue > li >  a:hover .sub-arrow
		, .sm-blue > li >  a:focus .sub-arrow
		, .sm-blue > li > a:active .sub-arrow
		, .sm-blue > li > a.highlighted .sub-arrow {
		/*
		, .sm-blue > li > a.current .sub-arrow {
		*/
			border-color: #066CB0 transparent transparent transparent;
		}
		.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
			border-radius: 0;
		}
		.sm-blue > li:last-child > a, .sm-blue > li:last-child > :not(ul) a {
			border-radius: 0 !important;
		}
		.sm-blue > li {
			text-align: center;
		}
		.sm-blue > li:first-child {
			border-left: 0;
		}
		.sm-blue ul {
			width: 100%;
			background-color: #fff;
			border-radius: 0 !important;
			/*box-shadow: h-offset v-offset blur spread color type;*/
			/*
			box-shadow: 0px 0px 3px 0px #0096a0, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
			-moz-box-shadow: 0px 0px 3px 0px #0096a0, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
			-webkit-box-shadow: 0px 0px 3px 0px #0096a0, 0px 0px 0px rgba(0, 0, 0, 0.5) inset;
			padding-left: 2px;
			padding-right: 2px;
			*/
		}
		.sm-blue ul ul {
			width: 100%;
			border-radius: 0 !important;
			background-color: #fff;
		}
		.sm-blue ul li {
			height: 48px;
			display: table;
			width: 100%;
		}
		.sm-blue ul li a, .sm-blue ul li a:hover, .sm-blue ul li a:focus, .sm-blue ul li a:active, .sm-blue ul li a.highlighted {
			border: 0 !important;
			padding: 0 10px 0 10px;
			font-family: 'Noto Sans KR';
			color: #2f3638;
			font-size: 0.90rem;
			font-weight: 400;
			letter-spacing: -0.7px;
			border-radius: 0 !important;
			line-height: 1.4;
			background-color: #ecefef;

			width: 100%;
			display: table-cell;text-align: left;vertical-align: middle;
		}
		.sm-blue ul a:hover, .sm-blue ul a:focus, .sm-blue ul a:active, .sm-blue ul a.highlighted {
			width: 100%;
			color: #0096a0;
			font-weight: 400;
			text-shadow: -1px 1px 12px #00eef5, 1px -1px 12px #00eef5;
			/*
			background-image: linear-gradient(to bottom, #f7f8f8, #ccd3d4);
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
			*/
		}
		.sm-blue ul a.current {
			/*
			color: #3092c0;
			font-weight: 700;
			*/
		}
		.sm-blue ul a.disabled {
			/*
			background-color: #fff;
			color: #b3b3b3;
			*/
		}
		.sm-blue ul a .sub-arrow {
			top: 50%;
			margin-top: -5px;
			bottom: auto;
			left: auto;
			margin-left: 0;
			right: 8px;
			border-style: dashed dashed dashed solid;
			border-color: transparent transparent transparent #a2aeb0;
		}
		.sm-blue ul a:hover .sub-arrow
		, .sm-blue ul a:focus .sub-arrow
		, .sm-blue ul a:active .sub-arrow
		, .sm-blue ul a.highlighted .sub-arrow {
			border-color: transparent transparent transparent #0096a0;
		}
		.sm-blue ul li {
			border-left: 1px solid rgba(255, 255, 255, 0.5);
			border-right: 1px solid rgba(255, 255, 255, 0.5);
			border-top: 1px solid rgba(255, 255, 255, 0.5);
			border-bottom: 1px solid rgba(255, 255, 255, 0.5);
			-moz- background-clip: padding-box;
			background-clip: padding-box;
			/*
			padding: 2px 3px 2px 3px;
			*/
		}
		.sm-blue .scroll-up,
		.sm-blue .scroll-down {
			position: absolute;
			display: none;
			visibility: hidden;
			overflow: hidden;
			background-color: #fff;
			height: 20px;
		}
		.sm-blue .scroll-up-arrow,
		.sm-blue .scroll-down-arrow {
			position: absolute;
			top: -2px;
			left: 50%;
			margin-left: -8px;
			width: 0;
			height: 0;
			overflow: hidden;
			border-width: 8px;
			border-style: dashed dashed solid dashed;
			border-color: transparent transparent #2b82ac transparent;
		}
		.sm-blue .scroll-down-arrow {
			top: 6px;
			border-style: solid dashed dashed dashed;
			border-color: #2b82ac transparent transparent transparent;
		}
		.sm-blue.sm-rtl.sm-vertical a .sub-arrow {
			right: auto;
			left: 10px;
			border-style: dashed solid dashed dashed;
			border-color: transparent #a1d1e8 transparent transparent;
		}
		.sm-blue.sm-rtl > li:first-child > a, .sm-blue.sm-rtl > li:first-child > :not(ul) a {
			border-radius: 0;
		}
		.sm-blue.sm-rtl > li:last-child > a, .sm-blue.sm-rtl > li:last-child > :not(ul) a {
			border-radius: 0 !important;
		}
		.sm-blue.sm-rtl > li:first-child {
			border-left: 1px solid #2b82ac;
		}
		.sm-blue.sm-rtl > li:last-child {
			border-left: 0;
		}
		.sm-blue.sm-rtl ul a .sub-arrow {
			right: auto;
			left: 10px;
			border-style: dashed solid dashed dashed;
			border-color: transparent #a1d1e8 transparent transparent;
		}
		.sm-blue.sm-vertical {
		}
		.sm-blue.sm-vertical a {
			padding: 9px 23px;
		}
		.sm-blue.sm-vertical a .sub-arrow {
			top: 50%;
			margin-top: -5px;
			bottom: auto;
			left: auto;
			margin-left: 0;
			right: 10px;
			border-style: dashed dashed dashed solid;
			border-color: transparent transparent transparent #a1d1e8;
		}
		.sm-blue.sm-vertical > li:first-child > a, .sm-blue.sm-vertical > li:first-child > :not(ul) a {
			border-radius: 0;
		}
		.sm-blue.sm-vertical > li:last-child > a, .sm-blue.sm-vertical > li:last-child > :not(ul) a {
			border-radius: 0 !important;
		}
		.sm-blue.sm-vertical > li {
			border-left: 0 !important;
		}
		.sm-blue.sm-vertical ul {
			border-radius: 0 !important;
		}
		.sm-blue.sm-vertical ul a {
			padding: 9px 23px;
		}
	}

	/*# sourceMappingURL=sm-blue.css.map */
/*--------------------------------------------------
	Reference
--------------------------------------------------
	//box-sizing
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;

		border-box		: 테두리를 기준으로 크기를 정합니다.
		content-box		: 콘텐트 영역을 기준으로 크기를 정합니다.
		initial			: 기본값으로 설정합니다.
		inherit			: 부모 요소의 속성값을 상속받습니다.


	//border-collapse: separate;
		separate	: 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
		collapse	: 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
		initial		: 기본값으로 설정합니다.
		inherit		: 부모 요소의 속성값을 상속받습니다.



	//word-wrap:	[비아시아언어]박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정한다.
		break-word	: 가로사이즈나 엘리먼트에 맞춰서 강제 줄바꿈 해준다.
		normal		: 기본값으로 줄바꿈을 안함.

	//word-break:	[아시아언어]단어의 분리를 어떻게 할 것인지 결정한다.
		break-all	: 글자단위 줄바꿈(특수문자를 제외하고 강제로 줄바꿈)
		break-word	: 특수문자를 포함하고 강제 줄바꿈 
		keep-all	: 단어단위 줄바꿈(영문)
		nowrap		: 줄바꿈 하지 않음

	//white-Space:	공백문자를 어떻게 할 것인지 설정.(띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등)
		normal		: 기본값. 연속 공백과 줄바꿈 등을 통합해서 표현
		pre			: normal과 반대. 원문 그대로 출력
		pre-wrap	: 마크업에서 줄바꿈 한 것이 적용 되면서 width를 넘어가는 텍스트도 자동으로 줄바꿈이 된다(pre-line)
		nowrap		: 스페이스를 막 눌러서 들어가는 연속공백은 통합되지만(normal의 효과) 줄바꿈은 인정함(pre의 효과)

	//text-overflow:	긴 문자열을 잘라주는 형태를 지정
		clip		: 엘리먼트의 테두리에 맞춰서 글자를 자른다.
		ellipsis	:	잘라지는 끝부분에 자동으로 '...'을 넣어준다. ie6 이상에서만 지원 가능, 파폭은 안됨
						width 값이 지정되어야 함 / 높이를 정해주거나 white-space-nowrap; 속성 사용해야 함. / <nobr> 사용



	//세로 가운데 정렬
		1. 인라인구조 가운데 정렬	: 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
			- 부모요소(인라인구조)	: text-align: center;line-height: (height값과 동일하게);

		2. 블록구조 가운데 정렬	: 가장 기본적인 방법이지만 이 방법은 한 줄(요소)일 경우에서만 해당이 됩니다.
			- 요소(블록구조)	: margin: 0 auto;width값 설정;line-height: (height값과 동일하게);

		3. 요소의 성질을 table로 변환시켜서 가운데 정렬을 하는 방법이지만 table자체를 레이아웃에 많이 사용하지 않기 때문에 잘 쓰지 않는 방법입니다.
			- 부모요소	: display: table;
			- 자식요소	: display: table-cell;text-align: center;vertical-align: middle;

		4. 절대 요소를 이용한 가운데 정렬방법이며, 제일 흔하게 쓰이지만 단점은 영역이 없어지는 것이 단점이어서 반응형을 할 때 사용하기 불편한 점이 있습니다.
			- 부모요소	: position: relative;
			- 자식요소	: position: absolute;top: 50%;left: 50%;margin-top: -(자식 요소 높이값의 반);margin-left: -(자식 요소 가로값의 반);

		5. 만약 자식요소의 가로값과 세로 값을 모르고 유동적인 경우에 절대 요소를 사용하여 가운데로 오는 정렬방법입니다.
			- 부모요소	: position: relative;
			- 자식요소	: position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

		6. 절대 요소를 이용한 가운데 정렬 방법이지만 흔하게 쓰이지는 않습니다.
			- 부모요소	: position: relative;
			- 자식요소	: position: absolute;top: 0;left: 0;top: 0;right: 0;margin: auto;

		7. CSS3를 이용한 방법이지만 최신 브라우저 이외에서는 작동하지 않는 단점이 있지만 표준화 된다면 앞으로 많이 쓰일 방법입니다.
			- 부모요소	: height 값 설정
			- 자식요소	: display: flex;justify-content: center;align-items: center;

		.top_slogan{
			float: left;
			height: 40px;
		}
		.top_slogan:after{
			display: inline-block;
			height: 100%;
			content: '';
			vertical-align: middle;
		}
		.top_slogan img{
			vertical-align: middle;
		}
		.wrapper {
			height: 100%;
			text-align: center;
		}
		.wrapper:before {
			content: "";
			display: inline-block;
			width: 1px;
			height: 100%;
			margin-right: 0;
			vertical-align: middle;
		}

	//gradient
		background: linear-gradient(180deg, #ccc, #fff);		//Standard syntax
		background: -webkit-linear-gradient(180deg, #ccc, #fff);	//For Safari 5.1 to 6.0
		background: -o-linear-gradient(180deg, #ccc, #fff);		//For Opera 11.1 to 12.0
		background: -moz-linear-gradient(180deg, #ccc, #fff);		//For Firefox 3.6 to 15
*/