/*---------------------------------------------------------------------------
	[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)	:	하단메뉴, 하단로고, 주소, 카피라이팅 영역

	KDIS	color						: #03945d;	rgb(3, 148, 93)
	KDIS	color						: #2c878e;
	background-color					:	#eee;
	border								:	#cfcfcf;
	red									:	#ef4024
	#e8816e	rgb(232, 129, 110)
										:	#006334

	GDLN_yellow							:	#ebe934
	GDLN_orange							:	#f98031
	GDLN_green							:	#55ab3e
	GDLN_navy							:	#41366e
	GDLN_gray							:	#d3cbc9


	KIDS_green1							:	#106433
	KIDS_green2							:	#03945d
	KIDS_green3							:	#006e44
	KIDS_green							:	#0f6331
	KIDS_green							:	#126433
	KIDS_green							:	#146334
	KIDS_green							:	#056737

	KIDS_black1							:	#231f20
	KIDS_black2							:	#58585a
	KIDS_black3							:	#818286
	KIDS_black4							:	#e7e7e9

	KIDS_black							:	#303631
	KIDS_black							:	#272727

	KDI SCHOOL PLATINUM
	PANTONE 877CVE
	CMYK : C40 M31 Y28 K0
	RGB : R167 G169 B172				rgb(167, 169, 172)
	WEB : #A7A9AC
	#e9e9eb		#e8e8ea		#e7e7e9		#e6e6e6		#bcbdc1		#a7a9ac		#97989a
	#818286		#6d6e72		#63645e		#62635e		#58585a		#242021		#231f20

	bg:	#ffffff		txt1:	#231f20		txt2:	#6d6e72
	bg:	#231f20		txt1:	#e8e8ea		txt2:	#63645e
	bg:	#58585a		txt1:	#e6e6e6		txt2:	#97989a
	bg:	#818286		txt1:	#e9e9eb		txt2:	#bcbdc1
	bg:	#bcbdc1		txt1:	#242021		txt2:	#62635e
	bg:	#e7e7e9		txt1:	#231f20		txt2:	#63645e

---------------------------------------------------------------------------*/
@charset 'utf-8';
@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');
/*
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
*/
/*--------------------------------------------------
	BASIC
--------------------------------------------------*/
	html{
		overflow-y: scroll;
		overflow-x: hidden;
		height: 100%;
	}
	html, body{
		height: 100%;
		font-family: 'Raleway', 'Roboto', 'Noto Sans', 'Nanum Barun Gothic', 'Times New Roman', '맑은 고딕', 'Malgun Gothic', 'Sans-serif', 'Verdana', 'Arial', 'Trebuchet MS', '돋움', 'Dotum', '돋움', 'Gulim', '굴림', 'AppleGothic';
		color: #555;
		font-weight: normal;
		letter-spacing: -0.1px;
		padding: 0;
		margin: 0;
		word-break: break-word;
		/*
		word-break: break-all;
		*/
		text-align: justify;
	}
	div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, b, big, center, cite, code, del, dfn, em, i, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, u, var,
	dl, dt, dd, ol, ul, li, fieldset, form, hr, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, audio, canvas, details, embed, figure, figcaption,	footer, header, hgroup, mark, menu, nav, output, ruby, section, summary, time, video,
	input, input[type=file], input[type=text], input[type=tel], input[type=password],
	label, input[type=checkbox] + label, input[type=radio], input[type=radio] + label, input[type='checkbox'] + label:before, input[type='radio'] + label:before,
	textarea, button, select{
		margin: 0;
		padding: 0;
		border: 0;
		box-sizing: border-box;			/*	border-box : 테두리를 기준으로 크기를 정합니다.
											content-box : 콘텐트 영역을 기준으로 크기를 정합니다.
											initial : 기본값으로 설정합니다.
											inherit : 부모 요소의 속성값을 상속받습니다.
										*/
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}


/*--------------------------------------------------
	placeholder
--------------------------------------------------*/
	input::-webkit-input-placeholder {
		color: #aaa;
		font-weight: normal;
		font-style: normal;
	}
	input:-ms-input-placeholder {
		color: #aaa;
		font-weight: normal;
		font-style: normal;
	}
	input::placeholder {
		color: #aaa;
		font-weight: normal;
		font-style: normal;
		opacity: 1;
	}
	textarea::-webkit-input-placeholder {
		color: #aaa;
		font-weight: normal;
		font-style: normal;
	}
	textarea:-ms-input-placeholder {
		color: #aaa;
		font-weight: normal;
		font-style: normal;
	}
	textarea::placeholder {
		color: #aaa;
		font-weight: normal;
		font-style: normal;
		opacity: 1;
	}



/*--------------------------------------------------
	input	border
--------------------------------------------------*/
	input, input[type=text], input[type=tel], input[type=password], input[type=file], select, textarea{
		border: 1px solid #ddd;
		text-align: left;
		vertical-align: middle;
		padding-left: 7px;
		padding-right: 7px;

		font-size: 16px;
		color: #555;
		font-weight: normal;
	}


/*--------------------------------------------------
	textarea	border
--------------------------------------------------*/
	textarea{
		border: 1px solid #cfcfcf;
		text-align: left;
		vertical-align: top;
		padding: 7px;
		line-height: 19px;
		height: 100px;
	}

/*--------------------------------------------------
	focus
--------------------------------------------------*/
	input:focus, input:active, textarea:focus, textarea:active{
		outline: #cfcfcf;
	}



/*--------------------------------------------------
	TABLE
--------------------------------------------------*/
	table{
		width: 100%;
		table-layout: fixed;
		border-collapse: separate;	/*	separate	: 표(table)의 테두리와 셀(td)의 테두리 사이에 간격을 둡니다.
										collapse	: 표(table)의 테두리와 셀(td)의 테두리 사이의 간격을 없앱니다. 겹치는 부분은 한 줄로 나타냅니다.
										initial		: 기본값으로 설정합니다.
										inherit		: 부모 요소의 속성값을 상속받습니다.
									*/
		border-spacing: 0px;
	}
	caption{
		width: 0;
		height: 0;
		font-size: 0;
		line-height: 0;
		overflow: hidden;
		visibility: hidden;
	}
	thead, tbody{
		display: table-row-group;
		border-color: inherit;
	}



/*--------------------------------------------------
	ETC	SET
--------------------------------------------------*/
	iframe, fieldset, img{
		border: 0;
	}
	a, a:hover, a:focus, a:visited, a:link, a:active{
		text-decoration: none;
	}
	menu, ul, li, ol, dl, dt, dd{
		list-style: none;
	}
	span{
		position: relative;
		display: inline-block;
	}


/*--------------------------------------------------
	BUTTON
--------------------------------------------------*/
	button{
		cursor: pointer;
		text-align: center;
		vertical-align: middle;

		font-size: 0.9rem;
		color: #fff;
		font-weight: normal;
	}




/*--------------------------------------------------
	checkbox
--------------------------------------------------*/
	input[type='checkbox']{				/*	실제 체크박스는 화면에서 숨김	*/
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0
	}
	input[type='checkbox'] + label{
		display: inline-block;
		position: relative;
		padding-left: 25px;				/*	글자와 체크박스 사이의 간격을 변경	*/
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;

		font-size: 13px;
		color: #888;
		font-weight: lighter;
	}
	input[type='checkbox'] + label:before{	/*	가짜 체크박스	*/
		content: '';
		position: absolute;
		left: 0;
		top: 0px;						/*	이 값을 변경해서 글자와의 정렬	*/
		width: 18px;					/*	체크박스의 너비를 지정	*/
		height: 18px;					/*	체크박스의 높이를 지정	*/
		line-height: 18px;				/*	세로정렬을 위해 높이값과 일치	*/
		text-align: center;
		background-color: #fff;
		border: 1px solid #aaa;
		border-radius : 0px;
		/*
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
		*/
	}
	input[type='checkbox'] + label:active:before,
	input[type='checkbox']:checked + label:active:before{
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
	}
	input[type='checkbox']:checked + label{	/*	체크박스를 체크했을때	*/
		color: #ef4024;
		font-weight: normal;
		/*
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
		*/
	}
	input[type='checkbox']:checked + label:before{	/*	체크박스를 체크했을때	*/
		content: '\2714';				/*	체크표시 유니코드 사용	*/
		text-shadow: 1px 1px #fff;
		background-color: #fff;
		border-color: #ef4024;
		/*
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
		*/
	}



/*--------------------------------------------------
	radio
--------------------------------------------------*/
	input[type='radio']{
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}
	input[type='radio'] + label{
		display: inline-block;
		position: relative;
		padding-left: 24px;			/* 글자와 체크박스 사이의 간격을 변경 */
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;

		font-size: 13px;
		color: #888;
		font-weight: lighter;
	}
	input[type='radio']:checked + label{
		color: #ef4024;
		font-weight: normal;
	}
	input[type='radio'] + label:before{
		content: '';
		position: absolute;
		left: 0px;
		top: -2px;
		width: 18px;					/* 라디오버튼의 너비를 지정 */
		height: 18px;					/* 라디오버튼의 높이를 지정 */
		text-align: center;
		background-color: #fff;
		border: 2px solid #888;
		border-radius: 100%;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
	}
	input[type='radio'] + label:active:before,
	input[type='radio']:checked + label:active:before{
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
	}
	input[type='radio']:checked + label:before{
		background-color: #ffffff;
		border-color: #ef4024;
	}
	input[type='radio']:checked + label:after{
		content: '';
		position: absolute;
		top: 4px;
		left: 6px;
		width: 6px;
		height: 6px;
		background-color: #ef4024;
		border-radius: 100%;
		box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.0);
	}



/*--------------------------------------------------*/
/*	PAGING	*/	
/*--------------------------------------------------*/
	.sgPaging{
		position: relative;
		display: block;
		width: 100%;
		text-align: center;
		padding-top: 25px;
		padding-bottom: 15px;
	}
	.sgPaging > ul{
		position: relative;
		display: inline-block;
		width: 100%;
		height: 36px;
	}
	.sgPaging > ul > li{
		position: relative;
		display: inline-block;
		border: 1px solid #000;
		margin-right: 4px;
		width: 34px;
		height: 34px;
		color: #000;
		text-align: center;
		vertical-align: middle;
		padding: 0;
		margin: 0;
		cursor: pointer;
	}
	.sgPaging > ul > li:hover{
		background-color: #eaeaea;
	}
	.sgPaging > ul > li.pageMark{
		font-size: 21px;
		line-height: 32px;
		font-weight: bold;
	}
	.sgPaging > ul > li.pageCount{
		font-size: 15px;
		line-height: 32px;
		font-weight: bold;
	}
	.sgPaging > ul > li.num{
		font-weight: lighter;
		font-size: 13px;
		line-height: 32px;
		color: #4a5264;
		border: 1px solid #565f73;
	}
	.sgPaging > ul > li.on{
		color: #ff0000;
		border: 2px solid #ff0000;
		font-weight: bold;
	}




/*--------------------------------------------------*/
/*	HTML END	*/	
/*--------------------------------------------------*/
	#div_iframe_blank{
		position: absolute;
		top: 0px;
		left: 0px;
		width: 0px;
		height: 0px;
		padding: 0;
		margin: 0;
	}
	#div_iframe_blank > #iframe_blank{		/*	backoffice/sgControls	*/
		width: 0px;
		height: 0px;
		overflow: hidden;
		resize: none;
		border: 0px;
		padding: 0;
		margin: 0;
	}
	.controls_calendar{
		width: 300px;
		height: 250px;
		position: absolute;
		border: 0px ridge;
		z-index: 1000;
		display: none;
		padding: 0;
		margin: 0;
	}
	.controls_calendar > .iframe_calendar{
		width: 100%;
		height: 100%;
		resize: none;
		border: 0px;
		padding: 0;
		margin: 0;
	}



/*--------------------------------------------------
	BUTTON
--------------------------------------------------*/
	button{
		cursor: pointer;
		text-align: center;
		vertical-align: middle;

		font-size: 13px;
		color: #fff;
		font-weight: normal;
	}






/*--------------------------------------------------
	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;

		.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


*/