@charset "utf-8";

/* 눈누폰트 다이렉트 링크 [헤드라인용] : 프리텐다드 ( 100 / normal / bold / 900 ) */
@import url("/style/font-pretendard.css");

/* 눈누폰트 다이렉트 링크 [서브헤드 및 본문용] : 한림고딕 ( 400 / 500 / 700 ) */
@import url("/style/font-hallymgothic.css");

/* 엘리먼트 기초세팅 */
html{
	padding : 0;
	margin : 0;
}
body{
	padding : 0;
	margin : 0;
}
a{
	color : inherit;
	text-decoration : inherit;
}

/* 공통 클래스 스타일 */
.WRAPPER{
	width : 72rem;
	margin : 0 auto;
}

/* 헤더 스타일 */
header{
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	z-index : 10000;
	padding : 1rem;
	background-color : rgba( 0, 0, 0, .75 );
	color : #FFF;
	overflow : hidden;
}
header > .WRAPPER{
	display : flex;
	align-items : center;
	justify-content : space-between;
	height : 2.5rem;
	transition : padding-bottom .125s ease-in-out;
}
header > .WRAPPER > h1{
	padding : 0;
	margin : 0;
}
header > .WRAPPER > nav > ul{
	display : flex;
	align-items : center;
	height : 2.5rem;
	padding : 0;
	margin : 0;
}
header > .WRAPPER > nav > ul > li{
	flex-grow : 0;
	list-style : none;
	position : relative;
	width : 7.5rem;
	height : 2.5rem;
	padding : 0 .5rem;
}
header > .WRAPPER > nav > ul > li > a{
	font-weight : bold;
	font-size : .875rem;
	line-height : 2.5rem;
}
header > .WRAPPER > nav > ul > li > ul{
	visibility : hidden;
	display : grid;
	gap : .25rem;
	position : absolute;
	top : 2.5rem;
	left : 0;
	padding : 0;
	margin : 0;
	opacity : 0;
	transition : opacity .25s ease-in-out;
}
header > .WRAPPER > nav > ul > li > ul > li{
	list-style : none;
	padding : 0 .5rem;
	font-size : .75rem;
}
header > .WRAPPER > nav > ul > li > ul > li > a{
	color : rgba( 255, 255, 255, .75 );
}

header:hover > .WRAPPER{
	padding-bottom : 5rem;
}
header:hover > .WRAPPER > nav > ul > li > ul{
	visibility : visible;
	position : absolute;
	opacity : 1;
}
header:hover > .WRAPPER > nav > ul > li > ul > li > a:hover{
	color : #FFF;
}

/* 푸터 스타일 */
footer{
	padding : 1rem;
	background-color : rgba( 0, 0, 0, .75 );
}
footer > .WRAPPER > address{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	align-items : center;
	gap : 1rem;
	color : #FFF;
	font-style : normal;
	font-size : .75rem;
}
footer > .WRAPPER > address > a.ADMIN{
	padding : .25rem .5rem;
	font-size : .65rem;
	background-color : #262626;
	border-radius : .25rem;
	cursor : pointer;
}
footer > #FOOTER-COPYRIGHT{
	margin-top : 1rem;
	color : rgba( 255, 255, 255, .75 );
	text-align : center;
	font-size : .75rem;
}

/* 서브페이지 공통 스타일 */
.SUBHEAD{
	display : flex;
	justify-content : center;
	align-items : center;
	height : 11.5rem;
	padding-top : 4.5rem;
	background-position : center;
	background-size : cover;
	background-repeat : no-repeat;
	color : #FFF;
	font-family : 'HallymGothic';
	font-size : 1.75rem;
}

#PATH-NAVIGATOR{
	height : 2.5rem;
	border-bottom : solid 1px #DDD;
}
#PATH-NAVIGATOR > .WRAPPER{
	display : flex;
	align-items : center;
}
#PATH-NAVIGATOR > .WRAPPER > div{
	position : relative;
	width : 10rem;
	height : 2.5rem;
	font-size : .875rem;
	line-height : 2.5rem;
	border-right : solid 1px #DDD;
	overflow : hidden;
}
#PATH-NAVIGATOR > .WRAPPER > div > ul{
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	padding : 0;
	margin : 0;
	background-color : #FFF;
	box-shadow : .1rem .1rem .25rem rgba( 0, 0, 0, .25 );
}
#PATH-NAVIGATOR > .WRAPPER > div > ul > li{
	list-style : none;
	padding : 0 1rem;
}
#PATH-NAVIGATOR > .WRAPPER > div:hover{
	overflow : visible;
}

#PATH-NAVIGATOR > .WRAPPER > div#PATH-DEPTH-HOME{
	width : 5rem;
}
#PATH-NAVIGATOR > .WRAPPER > div#PATH-DEPTH-HOME > a{
	display : flex;
	align-items : center;
	gap : .25rem;
}
#PATH-NAVIGATOR > .WRAPPER > div#PATH-DEPTH-HOME > a::before{
	content : '';
	width : 1.25rem;
	height : 1.25rem;
	background-image : url('data:image/svg+xml;utf-8,<svg height="48" viewBox="0 0 48 48" width="48" xmlns="http://www.w3.org/2000/svg" fill="gray"><path d="M20 40V28h8v12h10V24h6L24 6 4 24h6v16z"/><path d="M0 0h48v48H0z" fill="none"/></svg>');
	background-size : contain;
}

/* 게시판 페이징 불렛 스타일 */
.PAGING{
	display : flex;
	align-items : center;
	justify-content : center;
	gap : .5rem;
	padding : 1rem 0;
}
.PAGING > a{
	min-width : 1rem;
	height : 2rem;
	padding : 0 .5rem;
	background-color : #F0F0F0;
	border-radius : .25rem;
	text-align : center;
	font-size : .815rem;
	line-height : 2rem;
}
.PAGING > a:hover{
	cursor : pointer;
	background-color : #E9E9E9;
}
.PAGING > a.ON{
	background-color : #06C;
	color : #FFF;
}
.PAGING > a.GOTO{
	padding : 0 .75rem;
}

/* 72rem 미만 적응형(or 반응형) 대응 */
@media ( max-width : 72rem ){
	
	.WRAPPER{
		width : auto;
		padding : 0 1rem;
		margin : 0;
	}

}