@charset "utf-8";

/* 구글 폰트 API 웹 다이렉트 링크 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,600,700,800&subset=korean');

/* 엘리먼트 기초 환경 */
html{
	padding : 0;
	margin : 0;
	font-family : 'Noto Sans KR';
	font-weight : 300;
}
body{
	padding : 0;
	margin : 0;
}
a{
	color : inherit;
	text-decoration : inherit;
}

/* 커스텀 클래스 */
.WRAPPER{
	width : 1152px;
	margin : 0 auto;
}
.AC{ text-align : center; }
.AR{ text-align : right; }

/* 페이징 */
.PAGING{
	margin : 16px 0;
	font-size : 0;
	text-align : center;
}
.PAGING > a{
	display : inline-block;
	width : 32px;
	height : 32px;
	margin : 0 2px;
	background-repeat : no-repeat;
	background-position : center;
	background-size : 24px;
	border-radius : 16px;
	line-height : 32px;
	text-align : center;
	vertical-align : bottom;
	font-weight : bold;
	font-size : 16px;
	transition :
		background-color .25s ease-in-out,
		color .25s ease-in-out;
}
.PAGING > a:hover{
	background-color : #DDD;
	cursor : pointer;
}
.PAGING > a.ON{
	background-color : #0070B8;
	color : #FFF;
}
.PAGING > a.GOTO.F{
	background-image : url("/images/icon-black-double-arrow.png");
	font-size : 0;
	transform : rotateY(180deg);
}
.PAGING > a.GOTO.P{
	background-image : url("/images/icon-black-arrow.png");
	font-size : 0;
	transform : rotateY(180deg);
}
.PAGING > a.GOTO.N{
	background-image : url("/images/icon-black-arrow.png");
	font-size : 0;
}
.PAGING > a.GOTO.L{
	background-image : url("/images/icon-black-double-arrow.png");
	font-size : 0;
}
.PAGING > i.ELLIPSIS{
	display : inline-block;
	height : 32px;
	color : #888;
	line-height : 32px;
	font-style : normal;
	font-size : 16px;
}

/* 헤더 */
header{
	height : 96px;
	background-color : #E9E9E9;
}
header > .WRAPPER{
	display : flex;
	height : 96px;
	justify-content : space-between;
	align-items : center;
}
header > .WRAPPER > h1{
	width : 179px;
	height : 40px;
	padding : 0;
	margin : 0;
}
header > .WRAPPER > h1 > a{
	display : block;
	width : 100%;
	height : 100%;
	background-image : url("/images/logo-header-colored.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	font-size : 0;
}
header > .WRAPPER > nav{
	font-size : 0;
}
header > .WRAPPER > nav > a{
	display : inline-block;
	margin : 0 48px;
	color : #333;
	font-weight : 400;
	font-size : 14px;
}
header > .WRAPPER > #HEADER-LANGUAGE-SELECT{
	position : relative;
	width : 80px;
	height : 24px;
}
header > .WRAPPER > #HEADER-LANGUAGE-SELECT > .SELECTED{
	font-size : 12px;
	vertical-align : middle;
	overflow : hidden;
	cursor : pointer;
}
header > .WRAPPER > #HEADER-LANGUAGE-SELECT > .SELECTED:before{
	content : '';
	display : inline-block;
	width : 24px;
	height : 24px;
	margin-top : -1px;
	margin-right : 4px;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	vertical-align : middle;
}
header > .WRAPPER > #HEADER-LANGUAGE-SELECT > .SELECTED:after{
	content : '▼';
	float : right;
	height : 24px;
	margin-top : -1px;
	font-family : 'Nanum Gothic';
	font-size : 8px;
	line-height : 24px;
	vertical-align : middle;
}
header > .WRAPPER > #HEADER-LANGUAGE-SELECT > ul{
	display : none;
}
header > .WRAPPER > #HEADER-LANGUAGE-SELECT *[data-flag="KOR"]:before{
	background-image : url("/images/flag-korea.png");
}

footer{
	padding : 32px 0;
	background-color : #000;
	color : #DDD;
	text-align : center;
}
footer > .WRAPPER > address{
	font-style : normal;
	font-size : 12px;
}
footer > .WRAPPER > address > div{
	margin-bottom : 4px;
}
footer > .WRAPPER > address > div > i{
	margin : 0 5px;
	color : #666;
	font-style : normal;
}
footer > .WRAPPER > #FOOTER-COPYRIGHT{
	margin-top : 16px;
	color : #999;
	font-size : 12px;
}

.SUB-HEADER{
	background-repeat : no-repeat;
	background-position-y : 90%;
	background-size : cover;
}
.SUB-HEADER > h2{
	height : 160px;
	padding : 0;
	margin : 0;
	color : #FFF;
	text-align : center;
	font-weight : 400;
	font-size : 30px;
	line-height : 160px;
}
.SUB-HEADER > .SUB-HEADER-MENU{
	height : 46px;
	background-color : #FFF;
	border-top : solid 1px #333;
	border-bottom : solid 1px #DDD;
	text-align : center;
	font-size : 0;
}
.SUB-HEADER > .SUB-HEADER-MENU > a{
	display : inline-block;
	width : 120px;
	height : 46px;
	margin : 0 20px;
	font-size : 14px;
	line-height : 46px;
}
.SUB-HEADER > .SUB-HEADER-MENU > a.ON{
	height : 43px;
	border-bottom : solid 3px #06C;
	color : #06C;
	font-weight : 500;
}

article{
	padding : 32px;
}



@media ( max-width : 512px ){

	.WRAPPER{
		width : 100%;
		box-sizing : border-box;
	}

	header{ height : 5rem; }
	header > .WRAPPER{
		height : 5rem;
		padding : .5rem;
	}
	header > .WRAPPER > h1{
		width : 35%;
		height : 3rem;
	}
	header > .WRAPPER > h1 > a{
		background-size : contain;
	}
	header > .WRAPPER > nav{
		position : fixed;
		top : 0;
		bottom : 0;
		right : 0;
		display : block;
		width : 50%;
		padding-top : 5rem;
		margin-right : -50%;
		background-color : rgba( 0, 0, 0, .75 );
		box-sizing : border-box;
		overflow : auto;
		z-index : 1000;
		transition : margin-right .15s ease-in-out;
	}
	header > .WRAPPER > nav:before{
		content : '';
		position : fixed;
		top : 1rem;
		right : 1rem;
		display : block;
		width : 3rem;
		height : 3rem;
		background-image : url("/images/icon_64_menu3.png");
		background-position : center;
		background-repeat : no-repeat;
		background-size : 2rem;
		opacity : .75;
	}
	header > .WRAPPER > nav:hover{
		margin-right : 0;
	}
	header > .WRAPPER > nav > a{
		display : block;
		height : auto;
		padding : .5rem 1rem;
		margin : 0;
		color : #FFF;
		text-align : right;
		font-size : .9rem;
	}

	.SUB-HEADER > .SUB-HEADER-MENU > a{
		width : auto;
		min-width : 6rem;
		margin : 0 .2rem;
	}

}