@charset "utf-8";

/* Google Web Fonts Import */
@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,700,800&subset=korean');
@import url('https://fonts.googleapis.com/css?family=Do+Hyeon');

html{
	padding : 0;
	margin : 0;
}
body{
	padding : 0;
	margin : 0;
}

a{
	color : inherit;
	text-decoration : inherit;
}

header{
	
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
header > .WRAPPER{
	width : 1024px;
	height : 70px;
	margin : 0 auto;
	overflow : hidden;
}
header > .WRAPPER > .LOGO{
	float : left;
	height : 50px;
	padding : 10px 0;
}
header > .WRAPPER > .LOGO > a{
	display : block;
	height : 100%;
}
header > .WRAPPER > .LOGO > a > img{
	height : 100%;
}
header > .WRAPPER > nav{
	float : right;
	height : 70px;
}
header > .WRAPPER > nav > ul{
	padding : 0;
	margin : 0;
	font-size : 0;
}
header > .WRAPPER > nav > ul > li{
	display : inline-block;
	margin-left : 48px;
	color : #FFF;
	font-family : 'Nanaum Gothic';
	font-weight : 400;
	font-size : 14px;
	line-height : 70px;
}
header > .TITLE{
	padding : 48px 0;
	border-top : solid 1px #CCC;
	text-align : center;
	font-size : 0;
}
header > .TITLE > h1{
	padding : 0;
	margin : 0;
}
header > .TITLE > h1 > p{
	padding : 0;
	margin : 0;
	color : #FFF;
	font-family : 'Noto Sans KR';
}
header > .TITLE > h1 > p.KR{
	font-weight : 500;
	font-size : 28px;
	letter-spacing : 4px;
}
header > .TITLE > h1 > p.EN{
	color : #EEE;
	font-weight : 300;
	font-size : 18px;
}
header > nav{
	height : 50px;
	background-color : rgba( 60, 60, 60, .5 );
	text-align : center;
	font-size : 0;
}
header > nav > a{
	display : inline-block;
	width : 192px;
	height : 50px;
	background-color : rgba( 255, 255, 255, .15 );
	border-right : solid 1px #FFF;
	color : #FFF;
	font-family : 'Noto Sans KR';
	font-weight : 300;
	font-size : 15px;
	line-height : 50px;
}
header > nav > a:last-child{
	border-right : 0;
}
header > nav > a.ON{
	background-color : #FFF;
	font-weight : 400;
}

header + .CONTENT{
	width : 1024px;
	padding : 32px 0;
	margin : 0 auto;
}

footer{
	background-color : #444;
	color : #DDD;
}
footer > .WRAPPER{
	width : 1024px;
	padding : 24px 0;
	margin : 0 auto;
	overflow : hidden;
}
footer > .WRAPPER > #FOOTER-LOGO{
	float : left;
	height : 32px;
	margin-right : 32px;
}
footer > .WRAPPER > #FOOTER-LOGO > img{
	height : 100%;
}
footer > .WRAPPER > nav{
	font-size : 0;
}
footer > .WRAPPER > nav > a{
	margin-right : 24px;
	font-size : 12px;
	line-height : 32px;
}
footer > address{
	padding : 16px 0;
	border-top : solid 1px #333;
	font-style : normal;
}
footer > address > .WRAPPER{
	width : 1024px;
	margin : 0 auto;
	color : #BBB;
	font-size : 0;
}
footer > address > .WRAPPER > span{
	margin-right : 32px;
	font-size : 12px;
}

.FLOAT-L{
	float : left;
}
.FLOAT-R{
	float : right;
}                                                                                       


#OPENBANNER{
	position : fixed;
	top : 50%;
	left : 50%;
	font-size : 0;
	z-index : 20000;
	box-shadow : 2px 2px 3px rgba( 0, 0, 0, .25 );
	transform :
		translateX( -50% )
		translateY( -50% )
}



@media ( max-width : 962px ){
	
	header > .WRAPPER{
		width : 90%;
	}
	header + .CONTENT{
		width : 90%;
		padding : 2rem 0;
		margin : 0 auto;
	}
	
	footer > .WRAPPER{
		width : 90%;
	}
	footer > address > .WRAPPER{
		width : 90%;
	}
}

@media ( max-width : 640px ){
	header > .WRAPPER{
		height : 3rem;
	}
	header > .WRAPPER > .LOGO{
		height : 2rem;
		padding : .5rem 0;
	}
	header > .WRAPPER > nav{
		height : 3rem;
	}
	header > .WRAPPER > nav > ul > li{
		height : 3rem;
		margin-left : 1rem;
		font-size : .8rem;
		line-height : 3rem;
	}
}