/*---------------------------------------------------------------------------
	[DIV 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: 'Nanum Barun Gothic';	font-weight: 400;			200	300	400			700		
	font-family: 'Roboto';				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: 'Noto Sans KR';		font-weight: 400;		100		300	400	500		700		900
	font-family: 'Outfit';				font-weight: 400;		100	200	300	400	500	600	700	900	900

	#wrapper > #container > (#regin) > #area > #section > #box
	MAIN	color						: #00b6a8;		rgb(0, 182, 168)
	KSA1	color						: #009f94;		rgb(0, 159, 148)
	KSA2	color						: #00978b;		rgb(0, 151, 139)
	KSA3	color						: #009186;		rgb(0, 145, 134)
	KSA4	color						: #00887d;		rgb(0, 136, 125)
	KSA5	color						: #007d74;		rgb(0, 125, 116)
	KSA6	color						: #007168;		rgb(0, 113, 104)
	KDIS1	color						: #03945d;		rgb(3, 148, 93)
	KDIS2	color						: #2c878e;
	KDIS3	color						: #024d31;		rgb(2, 77, 49)
	KDIS5	color						: #00321e;		rgb(0, 50, 30)
	KDIS6	color						: #004b2d;		rgb(0, 75, 45)
	KDIS7	color						: #00643c;		rgb(0, 100, 60)
	KDIS8	color						: #007d4b;		rgb(0, 125, 75)
---------------------------------------------------------------------------*/
@charset 'utf-8';
@import url('/assets/NanumBarunGothic-webfont-master/css/nanumbarungothic.css');
@import url('/backoffice/sgcontrols/sgcommon/sgcss/fonts/roboto/roboto.css');
@import url('/backoffice/sgcontrols/sgcommon/sgcss/fonts/raleway/raleway.css');
@import url('/backoffice/sgcontrols/sgcommon/sgcss/fonts/noto-sans-kr/noto-sans-kr.css');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

/*
@import url('/assets/Helvetica/Helvetica.css');
@import url('/backoffice/sgControls/sgCommon/sgCss/fonts/nanum-gothic.css');
*/
	html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
		margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;
		word-break: break-all;
		text-align: justify;
		/*
		word-break: keep-all;
		*/
	}
	::-moz-selection{
		color:#fff;background:#ef4024;
	}
	::selection{
		color:#fff;background:#ef4024;
	}
	html,body{
		height:100%;
	}
	body:after{
		visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;
	}
	article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
		display:block;
	}
	body{
		line-height:1;
		transition: background-color 0.5s;
		-webkit-transition:background-color 0.5s;
		font-weight: lighter;

		--tw-bg-opacity: 1;
		background-color: #161616;
		font-family: 'Outfit', 'Nanum Barun Gothic', arial, sans-serif, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
		--tw-text-opacity: 1;
		color: #404040;
	}
	p{
		font-family: 'Nanum Barun Gothic', arial, sans-serif;
	}
	ul{
		list-style:none;
	}
	a{
		font-family: 'Nanum Barun Gothic', arial, sans-serif;
		text-decoration: none;
	}
	blockquote,q{
		quotes:none;
	}
	blockquote:before,blockquote:after,q:before,q:after{
		content:'';content:none;
	}
	table{
		border-collapse:collapse;border-spacing:0;
	}
	html{
		overflow-y:scroll;
		/*
		overflow-x: hidden;
		*/
	}
	/*
	.nav-space{
		transition:all 0.5s;-webkit-transition:all 0.5s;
	}
	*/
@media (min-width: 861px){	/*@media	BEGIN	//--------------------------------------------------*/


	body{
		letter-spacing: -0.1px;
		font-size: 20px;		/*modify	*/
		line-height: 25px;		/*modify	*/
	}
	div, dl, dt, dd
	, ul, li, ol
	, h1, h2, h3, h4, h5, h6
	, table, thead, tbody, th, td
	, a, address, blockquote, caption, code, em, fieldset, form, hr, i, legend, label, menu, option, p, pre, span, strong
	, input, input[type=file], input[type=text], input[type=tel], input[type=password]
	, input[type=checkbox] + label, input[type=radio], input[type=radio] + label
	, textarea, button, select{
		font-size: 1rem;
	}
	input, select, button{
		height: 2.4rem;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	select, textarea, input, input[type=text], input[type=tel], input[type=password]{
		text-align: left;
		border: 1px solid #cfcfcf;
		padding: 0.3rem 0.3rem 0.3rem 0.3rem;
		ime-mode: active;
		background-color: #ffffff;
	}
	h1,h2,h3,h4,h5,h6{
		font-weight: normal;
		font-size: 100%;
	}
	input[type=text], input[type=tel], input[type=password]{
		height: 2.4rem;
	}
	input[type=checkbox]{
		border: 0px currentColor;
		width: 1.0rem;
		height: 1.0rem;
		margin-right: 0.3rem;
		text-align: left;
		vertical-align: middle;
		margin-top: -0.1rem;
	}
	input[type=checkbox]:hover + label{
		color: #222222;
	}
	input[type=checkbox]:checked + label{
		color: #000000;
		font-weight: bold;
	}
	input[type=radio]{
		border: 0px currentColor;
		width: 1rem;
		height: 1rem;
		margin-right: 0.2rem;
	}
	input[type=radio]:hover + label{
		color: #222222;
	}
	input[type=radio]:checked + label{
		color: #000000;
		font-weight: bold;
	}
	input[type=file]{
		height: 2.4rem;
		width: 20rem;
		text-align: left;
		background-color: #ffffff;
		border: none;
	}
	textarea{
		width: 30rem;
		height: 20rem;
		vertical-align: top;
		line-height: 1.3rem;
	}
	input:active, input:focus, textarea:active, textarea:focus{
		border: 1px solid #1ba5c2;
	}
	fieldset, img, iframe{
		border:none;
	}
	img{
		border: 0px;
		vertical-align:middle;
	}
	i,em,address{
		font-style: normal;
	}
	a{
		text-decoration: none;
	}
	a:link{
		text-decoration: none;
	}
	a:visited{
		text-decoration: none;
	}
	a:hover{
		text-decoration: none;
	}
	a:active{
		text-decoration: none;
	}
	a:focus{
		text-decoration: none;
	}
	menu,li{
		list-style: none;
	}
	caption{
		width: 0px;
		height: 0px;
		font-size: 0px;
		line-height: 0px;
		overflow: hidden;
		visibility: hidden;
	}
	hr{
		display:none;
	}
	table{
		width: 100%;
		border-spacing: 0px;
		border-collapse:collapse;
	}
	strong{
		font-weight: bold;
	}
	option{}
	ul, li, ol, dl, dt, dd{
		list-style-type:none;
	}
	label{
		cursor: pointer;
	}


/*--------------------------------------------------
	BUTTON
--------------------------------------------------*/
	button{
		font-size: 0.9rem;
		color: #ffffff;
		font-weight: normal;
		cursor: pointer;
		text-align: center;
		background-color: #a0a0a0;
		border: none;
		vertical-align: middle;
		padding: 0rem 1rem 0rem 1rem;
		margin: 0px 0px 0px 0px;
	}
	button:hover{
		font-weight: bold;
	}



}	/*@media	END	//--------------------------------------------------*/
@media (min-width: 481px) and (max-width: 860px){	/*@media	BEGIN	//--------------------------------------------------*/
/*--------------------------------------------------
	BASIC
--------------------------------------------------*/
	body{
		letter-spacing: -0.1px;
		font-size: 18px;		/*modify	*/
		line-height: 23px;		/*modify	*/
	}
	div, dl, dt, dd
	, ul, li, ol
	, h1, h2, h3, h4, h5, h6
	, table, thead, tbody, th, td
	, a, address, blockquote, caption, code, em, fieldset, form, hr, i, legend, label, menu, option, p, pre, span, strong
	, input, input[type=file], input[type=text], input[type=tel], input[type=password]
	, input[type=checkbox] + label, input[type=radio], input[type=radio] + label
	, textarea, button, select{
		font-size: 1rem;
	}
	input, select, button{
		height: 2.4rem;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	select, textarea, input, input[type=text], input[type=tel], input[type=password]{
		text-align: left;
		border: 1px solid #cfcfcf;
		padding: 0.3rem 0.3rem 0.3rem 0.3rem;
		ime-mode: active;
		background-color: #ffffff;
	}
	h1,h2,h3,h4,h5,h6{
		font-weight: normal;
		font-size: 100%;
	}
	input[type=text], input[type=tel], input[type=password]{
		height: 2.4rem;
	}
	input[type=checkbox]{
		border: 0px currentColor;
		width: 1.0rem;
		height: 1.0rem;
		margin-right: 0.3rem;
		text-align: left;
		vertical-align: middle;
		margin-top: -0.1rem;
	}
	input[type=checkbox]:hover + label{
		color: #222222;
	}
	input[type=checkbox]:checked + label{
		color: #000000;
		font-weight: bold;
	}
	input[type=radio]{
		border: 0px currentColor;
		width: 1rem;
		height: 1rem;
		margin-right: 0.2rem;
	}
	input[type=radio]:hover + label{
		color: #222222;
	}
	input[type=radio]:checked + label{
		color: #000000;
		font-weight: bold;
	}
	input[type=file]{
		height: 2.4rem;
		width: 20rem;
		text-align: left;
		background-color: #ffffff;
		border: none;
	}
	textarea{
		width: 30rem;
		height: 20rem;
		vertical-align: top;
		line-height: 1.3rem;
	}
	input:active, input:focus, textarea:active, textarea:focus{
		border: 1px solid #1ba5c2;
	}
	fieldset, img, iframe{
		border:none;
	}
	img{
		border: 0px;
		vertical-align:middle;
	}
	i,em,address{
		font-style: normal;
	}
	a{
		text-decoration: none;
	}
	a:link{
		text-decoration: none;
	}
	a:visited{
		text-decoration: none;
	}
	a:hover{
		text-decoration: none;
	}
	a:active{
		text-decoration: none;
	}
	a:focus{
		text-decoration: none;
	}
	menu,li{
		list-style: none;
	}
	caption{
		width: 0px;
		height: 0px;
		font-size: 0px;
		line-height: 0px;
		overflow: hidden;
		visibility: hidden;
	}
	hr{
		display:none;
	}
	table{
		width: 100%;
		border-spacing: 0px;
		border-collapse:collapse;
	}
	strong{
		font-weight: bold;
	}
	option{}
	ul, li, ol, dl, dt, dd{
		list-style-type:none;
	}
	label{
		cursor: pointer;
	}


/*--------------------------------------------------
	BUTTON
--------------------------------------------------*/
	button{
		font-size: 0.9rem;
		color: #ffffff;
		font-weight: normal;
		cursor: pointer;
		text-align: center;
		background-color: #a0a0a0;
		border: none;
		vertical-align: middle;
		padding: 0rem 1rem 0rem 1rem;
		margin: 0px 0px 0px 0px;
	}
	button:hover{
		font-weight: bold;
	}









}	/*@media	END	//--------------------------------------------------*/
@media (max-width: 480px){	/*@media	BEGIN	//--------------------------------------------------*/
/*--------------------------------------------------
	BASIC
--------------------------------------------------*/
	body{
		letter-spacing: -0.1px;
		font-size: 16px;		/*modify	*/
		line-height: 21px;		/*modify	*/
		min-width: 320px;
	}
	div, dl, dt, dd
	, ul, li, ol
	, h1, h2, h3, h4, h5, h6
	, table, thead, tbody, th, td
	, a, address, blockquote, caption, code, em, fieldset, form, hr, i, legend, label, menu, option, p, pre, span, strong
	, input, input[type=file], input[type=text], input[type=tel], input[type=password]
	, input[type=checkbox] + label, input[type=radio], input[type=radio] + label
	, textarea, button, select{
		font-size: 1rem;
	}
	input, select, button{
		height: 2.4rem;
		box-sizing: border-box;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}
	select, textarea, input, input[type=text], input[type=tel], input[type=password]{
		text-align: left;
		border: 1px solid #cfcfcf;
		padding: 0.3rem 0.3rem 0.3rem 0.3rem;
		ime-mode: active;
		background-color: #ffffff;
	}
	h1,h2,h3,h4,h5,h6{
		font-weight: normal;
		font-size: 100%;
	}
	input[type=text], input[type=tel], input[type=password]{
		height: 2.4rem;
	}
	input[type=checkbox]{
		border: 0px currentColor;
		width: 1.0rem;
		height: 1.0rem;
		margin-right: 0.3rem;
		text-align: left;
		vertical-align: middle;
		margin-top: -0.1rem;
	}
	input[type=checkbox]:hover + label{
		color: #222222;
	}
	input[type=checkbox]:checked + label{
		color: #000000;
		font-weight: bold;
	}
	input[type=radio]{
		border: 0px currentColor;
		width: 1rem;
		height: 1rem;
		margin-right: 0.2rem;
	}
	input[type=radio]:hover + label{
		color: #222222;
	}
	input[type=radio]:checked + label{
		color: #000000;
		font-weight: bold;
	}
	input[type=file]{
		height: 2.4rem;
		width: 20rem;
		text-align: left;
		background-color: #ffffff;
		border: none;
	}
	textarea{
		width: 30rem;
		height: 20rem;
		vertical-align: top;
		line-height: 1.3rem;
	}
	input:active, input:focus, textarea:active, textarea:focus{
		border: 1px solid #1ba5c2;
	}
	fieldset, img, iframe{
		border:none;
	}
	img{
		border: 0px;
		vertical-align:middle;
	}
	i,em,address{
		font-style: normal;
	}
	a{
		text-decoration: none;
	}
	a:link{
		text-decoration: none;
	}
	a:visited{
		text-decoration: none;
	}
	a:hover{
		text-decoration: none;
	}
	a:active{
		text-decoration: none;
	}
	a:focus{
		text-decoration: none;
	}
	menu,li{
		list-style: none;
	}
	caption{
		width: 0px;
		height: 0px;
		font-size: 0px;
		line-height: 0px;
		overflow: hidden;
		visibility: hidden;
	}
	hr{
		display:none;
	}
	table{
		width: 100%;
		border-spacing: 0px;
		border-collapse:collapse;
	}
	strong{
		font-weight: bold;
	}
	option{}
	ul, li, ol, dl, dt, dd{
		list-style-type:none;
	}
	label{
		cursor: pointer;
	}


/*--------------------------------------------------
	BUTTON
--------------------------------------------------*/
	button{
		font-size: 0.9rem;
		color: #ffffff;
		font-weight: normal;
		cursor: pointer;
		text-align: center;
		background-color: #a0a0a0;
		border: none;
		vertical-align: middle;
		padding: 0rem 1rem 0rem 1rem;
		margin: 0px 0px 0px 0px;
	}
	button:hover{
		font-weight: bold;
	}



}	/*@media	END	//--------------------------------------------------*/