@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/css?family=Nanum+Gothic:400,600,700,800&subset=korean');
@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css');


html{
	padding : 0;
	margin : 0;
	font-family : 'Noto Sans KR', sans-serif, 'MalgunGothic';
}
body{
	padding : 70px 0 0 0;
	margin : 0;
	user-select : none;
}
a{
	color : inherit;
	text-decoration : none;
}


.WRAPPER{
	width : 1024px;
	margin : 0 auto;
	box-sizing : border-box;
}


header{
	position : fixed;
	top : 0;
	left : 0;
	right : 0;
	max-height : 182px;
	background-color:rgba( 255, 255, 255, 1 );
	overflow : hidden;
	z-index : 10000;
	transition :
		height .25s ease-in-out
		background-color .25s ease-in-out;
}
header > .WRAPPER{
	overflow : hidden;
}
header > .WRAPPER > #HEADER-LOGO{
    float : left;
    width : auto;
    height : 40px;
	margin : 15px 0;
    font-size : 0;
}
header > .WRAPPER > #HEADER-LOGO > img{
	height : 100%;
}
header > .WRAPPER > #NAV-CALL{
	display : none;
}
header > .WRAPPER > nav{
    float: right;
	height : 50px;
	margin-top : 20px;
	overflow : hidden;
	transition :
		height .25s ease-in-out;
}
header > .WRAPPER > nav:hover{
	height : 162px;
}
header > .WRAPPER > nav > ul{
	padding: 0;
    margin: 0;
}
header > .WRAPPER > nav > ul > li{
	list-style : none;
	display : inline-block;
	width : 128px;
	vertical-align : top;
}
header > .WRAPPER > nav > ul > li > a{
	display : block;
	height : 50px;
	text-align : right;
	font-family : 'Nanum Gothic';
	font-size : 17px;
	line-height : 50px;
}
header > .WRAPPER > nav > ul > li:hover > a{
	color : #06C;
}
header > .WRAPPER > nav > ul > li > ul{
	padding : 16px 0;
	margin : 0;
}
header > .WRAPPER > nav > ul > li > ul > li{
	list-style : none;
	margin-bottom : 6px;
}
header > .WRAPPER > nav > ul > li > ul > li > a{
	display : block;
	text-align : right;
	font-family : 'Nanum Gothic';
	font-size : 12px;
}
header > .WRAPPER > nav > ul > li > ul > li:hover > a{
	color : #06C;
}


footer{
	padding : 24px;
	background-color : #000;
	text-align : center;
}
footer > .WRAPPER > address{
	color : #DDD;
	font-family : 'Nanum Gothic';
	font-style : normal;
	font-size : 0;
}
footer > .WRAPPER > address > span{
	display : inline-block;
	margin : 0 8px;
	font-size : 12px;
}
footer > .WRAPPER > address > span::before{
	content : attr(data-label);
	margin-right : 4px;
	color : #999;
}
footer > .WRAPPER > #FOOTER-COPYRIGHT{
	margin-top : 16px;
	color : #BBB;
	font-size : 12px;
}
footer > .WRAPPER > #FOOTER-COPYRIGHT > strong{
	color : #FFF
}






/* 서브페이지 공통 스타일 */
.SUBHEAD{
	position : relative;
	height : 200px;
	padding : 0;
	margin : 0;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
.SUBHEAD > .PATH-NAVIGATOR{
	position : absolute;
	bottom : -20px;
	left : 50%;
	width : 640px;
	height : 50px;
	background-color : #FFF;
	font-size : 0;
	box-shadow : 2px 2px 3px rgba( 0, 0, 0, .25 );
	transform : translateX( -50% );
}
.SUBHEAD > .PATH-NAVIGATOR > div{
	position : relative;
	display : inline-block;
	width : 295px;
	height : 50px;
	vertical-align : middle;
}
.SUBHEAD > .PATH-NAVIGATOR > div > a{
	display : inline-block;
	height : 24px;
	margin : 13px;
	font-family : 'Nanum Gothic';
	font-weight : 600;
	font-size : 13px;
	line-height : 24px;
}
.SUBHEAD > .PATH-NAVIGATOR > div > a:after{
	content : '';
	display : block;
	position : absolute;
	top : 15px;
	right : 15px;
	width : 20px;
	height : 20px;
	background-image : url("/images/icon-black-arrow.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
.SUBHEAD > .PATH-NAVIGATOR > div:first-child{
	width : 50px;
}
.SUBHEAD > .PATH-NAVIGATOR > div:first-child > a{
	display : block;
	width : 28px;
	height : 28px;
	margin : 11px;
	background-image : url("/images/icon-black-home.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	font-size : 0;
	opacity : .75;
	cursor : pointer;
}
.SUBHEAD > .PATH-NAVIGATOR > div:last-child > a::after{
	transform : rotateZ( 90deg );
}

.SUBHEAD > .PATH-NAVIGATOR > div:last-child{
	cursor : pointer;
}
.SUBHEAD > .PATH-NAVIGATOR > div:last-child > .SUB{
	display : none;
	position : absolute;
	top : 50px;
	left : 0;
	width : 269px;
	padding : 7px 13px;
	background-color : #FFF;
	box-shadow : 2px 2px 3px rgba( 0, 0, 0, .25 );
}
.SUBHEAD > .PATH-NAVIGATOR > div:last-child > .SUB > a{
	display : block;
	padding : 6px;
	font-size : 12px;
}
.SUBHEAD > .PATH-NAVIGATOR > div:last-child > .SUB > a:hover{
	cursor : pointer;
	background-color : #E9E9E9;
}
.SUBHEAD > .PATH-NAVIGATOR > div:last-child > .SUB > a.ON{
	opacity : .5;
}
.SUBHEAD > .PATH-NAVIGATOR > div:last-child:hover > .SUB{
	display : block;
}



/*
.PATH-NAVIGATOR{
	height : 40px;
	padding : 0;
	border-bottom : solid 1px #DDD;
	text-align : left;
	font-size : 0
}
.PATH-NAVIGATOR > .WRAPPER{
	width : 1100px
}
.PATH-NAVIGATOR a{
	display : inline-block;
	color : #999;
	font : normal 14px/40px 'Noto Sans KR', sans-serif;
	vertical-align : middle
}
.PATH-NAVIGATOR a:after{
	content : '';
	display : inline-block;
	width : 20px;
	height : 40px;
	margin : 0 20px;
	background-image : url("/images/path-navigator-next.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	vertical-align : top;
	opacity : .25
}
.PATH-NAVIGATOR a:last-child{
	color : #333;
	font-weight : bold
}

.PATH-NAVIGATOR{
	height : 40px;
	padding : 0;
	border-bottom : solid 1px #DDD;
	text-align : left;
	font-size : 0
}
.PATH-NAVIGATOR > .WRAPPER{
	overflow : visible
}
.PATH-NAVIGATOR > .WRAPPER > div{
	position : relative;
	display : inline-block;
	height : 40px;
	vertical-align : top;
}
.PATH-NAVIGATOR > .WRAPPER > div > a{
	display : block;
	min-width : 120px;
	height : 40px;
	padding : 0 0 0 17px;
	border-right : solid 1px #DDD;
	font : normal 14px/40px 'Noto Sans KR', sans-serif;
}
.PATH-NAVIGATOR > .WRAPPER > div > a:after{
	content : '';
	float : right;
	display : inline-block;
	width : 40px;
	height : 40px;
	background-image : url("/images/path-navigator-dn.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 20px;
	vertical-align : top;
	opacity : .5
}
.PATH-NAVIGATOR > .WRAPPER > div > div.SUB{
	position : absolute;
	top : 40px;
	left : 0;
	min-width : calc( 100% - 2px );
	max-height : 0;
	border : 0;
	overflow : hidden;
	transition :
		max-height .25s ease-in-out
}
.PATH-NAVIGATOR > .WRAPPER > div > div.SUB > a{
	display : block;
	height : 36px;
	padding : 0 16px;
	background-color : #FFF;
	font : normal 14px/36px 'Noto Sans KR', sans-serif
}
.PATH-NAVIGATOR > .WRAPPER > div > div.SUB > a:first-child{ padding-top : 8px }
.PATH-NAVIGATOR > .WRAPPER > div > div.SUB > a:last-child{ padding-bottom : 8px }
.PATH-NAVIGATOR > .WRAPPER > div > div.SUB > a.ON{
	color : #999
}
.PATH-NAVIGATOR > .WRAPPER > div:hover > a:after{
	background-image : url("/images/path-navigator-up.png")
}
.PATH-NAVIGATOR > .WRAPPER > div:hover > div.SUB{
	max-height : 280px;
	box-shadow : 2px 2px 3px rgba(0,0,0,.1)
}


h1.SUBTITLE{
	padding : 0;
	margin : 48px 0;
	text-align : center;
	font : 700 29px/normal 'Noto Sans KR', sans-serif;
	letter-spacing: 6px;
	background-position : center;
	background-size : cover;
	background-repeta : no-repeat
}
h1.SUBTITLE:after{
	content : '';
	display : block;
	width : 80px;
	height : 4px;
	margin : 24px auto;
	background-color : #06C;
}

.SUBTITLE + .SUBMENU{
	width : 1100px;
	margin : 20px auto;
	font-size : 0;
}

.SUBTITLE + .SUBMENU > span{
	display : inline-block;
	text-align : center;
	border : solid 1px #DDD;
	margin : 2px;
	color : #666;
	transition : background-color .3s ease-in-out;
	box-sizing : border-box
}
.SUBTITLE + .SUBMENU > span > a{
	display : block;
	padding : 20px 0;
	font : normal 15px/normal 'Noto Sans KR', sans-serif, 'MalgunGothic', 'NanumBarunGothic';
	cursor : pointer;
}
.SUBTITLE + .SUBMENU > span.ON{
	background-color : #08C;
	border-color : #08C;
	color : #FFF
}
.SUBTITLE + .SUBMENU > span:not(.ON):hover{
	background-color : #08C;
	border-color : #08C;
	color : #FFF
}
*/


.PAGING{ padding:12px 0; font-size:0; text-align:center; }
.PAGING > a{ display:inline-block; min-width:20px; height:20px; padding:3px 2px 1px 2px; margin:2px; border:solid 1px #CCC; color:#999; text-align:center; vertical-align:middle; font:500 16px/normal NanumBarunGothic; cursor:pointer }
.PAGING > a:hover{ border-color:#06C; color:#06C }
.PAGING > a.ON{ background:#06C; border-color:#06C; color:#FFF; cursor:default }
.PAGING > a.GOTO{ font-size:0; background:url(/images/iconset_pagenavigator.png) no-repeat }
.PAGING > a.GOTO.F{ background-position:0 0 }
.PAGING > a.GOTO.P{ background-position:-24px 0 }
.PAGING > a.GOTO.N{ background-position:-48px 0 }
.PAGING > a.GOTO.L{ background-position:-72px 0 }
.PAGING > a.GOTO.F:hover{ background-position:-96px 0 }
.PAGING > a.GOTO.P:hover{ background-position:-120px 0 }
.PAGING > a.GOTO.N:hover{ background-position:-144px 0 }
.PAGING > a.GOTO.L:hover{ background-position:-168px 0 }


@media ( max-width : 657px ){
	
	body{
		padding-top : 0;
		transition :
			margin-left .25s ease-in-out,
			margin-right .25s ease-in-out;
	}

	.WRAPPER{
		width : 100%;
		margin : 0;
	}

	header{
		height : 4rem;
		max-height : none;
		background-color :transparent;
		overflow : auto;
		transition :
			margin-left .25s ease-in-out,
			margin-right .25s ease-in-out;
	}
	header > .WRAPPER{
		position : relative;
		height : 4rem;
		overflow : auto;
	}
	header > .WRAPPER > #HEADER-LOGO{
		position : absolute;
		float : none;
		top : 1rem;
		left : 1rem;
		width : 7.875rem;
		height : 2rem;
		margin : 0;
		background-image : url("/images/logo-white.png");
		background-repeat : no-repeat;
		background-position : center;
		background-size : contain;
	}
	header > .WRAPPER > #HEADER-LOGO > img{
		display : none;
	}

	header > .WRAPPER > #NAV-CALL{
		display : flex;
		flex-direction : column;
		justify-content : space-between;
		position : absolute;
		top : 1.25rem;
		right : 1.25rem;
		width : 1.5rem;
		height : 1.5rem;
	}
	header > .WRAPPER > #NAV-CALL > i{
		height : .25rem;
		background-color : #FFF;
		transform-origin : left;
		transition :
			transform .25s ease-in-out,
			opacity .25s ease-in-out,
			width .25s ease-in-out;
	}

	header > .WRAPPER > nav{
		position : fixed;
		float: none;
		top : 0;
		right : 0;
		bottom : 0;
		width : 50%;
		height : auto;
		margin-top : 0;
		margin-right : -50%;
		background-color : #000;
		overflow : auto;
		transition :
			margin-right .25s ease-in-out;
	}
	header > .WRAPPER > nav:hover{
		height : auto;
	}
	header > .WRAPPER > nav > ul{
		color : #FFF;
	}

	body.NAV-OPEN{
		margin-left : -50%;
		margin-right : 50%;
	}
	body.NAV-OPEN > header{
		margin-left : -50%;
		margin-right : 50%;
	}
	
	body.NAV-OPEN > header > .WRAPPER > #NAV-CALL > i:nth-child(1){
		width : 1.73rem;
		transform : rotateZ( 45deg );
	}
	body.NAV-OPEN > header > .WRAPPER > #NAV-CALL > i:nth-child(2){
		opacity : 0;
	}
	body.NAV-OPEN > header > .WRAPPER > #NAV-CALL > i:nth-child(3){
		width : 1.73rem;
		transform : rotateZ( -45deg );
	}

	body.NAV-OPEN > header > .WRAPPER > nav{
		margin-right : 0;
	}

	.SUBHEAD{ height : calc( 8rem + 50px ); }
	.SUBHEAD > .PATH-NAVIGATOR{
		position : absolute;
		bottom : 0;
		width : 100%;
	}
	.SUBHEAD > .PATH-NAVIGATOR > div{ width : calc( 50% - 25px ); }
	
}