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

	menubar, background-color			: #313040;		rgb(49, 48, 64)
	radio, color						: #cd0067;		rgb(205, 0, 103)
	botton								: #d01679;		rgb(208, 22, 121)
	border								: #d9d9d9;		rgb(217, 217, 217)
	th									: #f5f5f5;		rgb(245, 245, 245)
---------------------------------------------------------------------------*/
@charset "utf-8";
@media (min-width: 861px){	/*@media	BEGIN	/##################################################*/
/*--------------------------------------------------
	BASIC
--------------------------------------------------*/
	html, body{
		font-family: 'Roboto', 'Raleway', 'Noto Sans KR', 'Nanum Gothic', '맑은 고딕', 'Malgun Gothic', 'Sans-serif', 'Verdana', 'Arial', 'Trebuchet MS', '돋움', 'Dotum', '돋움', 'Gulim', '굴림', 'AppleGothic', 'Nanum Gothic', 'NanumGothic', '나눔고딕', 'Nanum Barun Gothic';
		font-size: 16px;
	}
}	/*@media	END	/##################################################*/





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


*/