@charset "utf-8";

@import url('/style/font-HallimGothic.css');	/* 한림고딕			HallimGothic	: 400, 500, 700 */
@import url('/style/font-NanumSquareNeo.css');	/* 나눔스퀘어네오	NanumSquareNeo	: 300, 400, 500, 700, 900 */
@import url('/style/font-Pretendard.css');		/* 프리텐다드		Pretendard		: 100 ~ 900 */

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

/* 루트 CSS 변수 설정 */
:root{
	--BASE-COLOR1 : #333333;
	--BASE-COLOR2 : #FF890B;
	--BASE-COLOR3 : #F1450B;
}

/* 사용자정의 엘리먼트 클래스 */
.WRAPPER{
	max-width : 80rem;
	margin : 0 auto;
}
#HIDDEN-ELEMENTS{ display : none }

/* 헤더 */
header{
	position : sticky;
	top : 0;
	background-color : #FFF;
	z-index : 10000;
}

#HEADER-HEADER{
	display : flex;
	align-items : center;
	justify-content : space-between;
	padding : 1rem 1rem 1rem 5rem;
	box-sizing : border-box;
}
#HEADER-HEADER > h1{
	order : 1;
	max-width : 14rem;
	width : 27%;
	height : 4rem;
	padding : 0;
	margin : 0;
}
#HEADER-HEADER > h1 > a{
	display : block;
	width : 100%;
	height : 100%;
}
#HEADER-HEADER > h1 > a > img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : left center;
}

#HEADER-SEARCH{
	order : 2;
	display : flex;
	max-width : 20rem;
	width : 42%;
	height : 2.5rem;
	border : solid .125rem var( --BASE-COLOR1 );
}
#HEADER-SEARCH > input{
	flex-grow : 1;
	padding : 0 .75rem;
	border : 0;
	outline : 0;
	font-family : 'NanumSquareNeo';
	font-weight : 700;
	font-size : 1rem;
}
#HEADER-SEARCH > input::-webkit-input-placeholder{
	color : #AAA;
	font-size : .875rem;
	font-weight : 400;
}
#HEADER-SEARCH > button{
	flex-grow : 0;
	width : 2.5rem;
	padding : 0;
	margin : 0;
	background-color : transparent;
	border : 0;
	cursor : pointer;
}
#HEADER-SEARCH > button > svg{
	width : 1.5rem;
	height : 1.5rem;
	margin : .5rem;
	fill : var( --BASE-COLOR1 );
}

#HEADER-SHORTCUT{
	order : 3;
	display : flex;
	justify-content : flex-end;
	gap : .5rem;
	max-width : 14rem;
	width : 27%;
}
#HEADER-SHORTCUT > a{
	display : flex;
	flex-direction : column;
	align-items : center;
	gap : .25rem;
	font-size : .6rem;
}
#HEADER-SHORTCUT > a > img{
	width : 1.5rem;
	height : 1.5rem;
	padding : 0 .75rem;
}

#HEADER-NAVIGATOR{
	max-width : 72rem;
	margin : 0 auto;
}
#HEADER-NAVIGATOR > ul{
	display : flex;
	align-items : center;
	justify-content : space-between;
	gap : 1rem;
	padding : 0;
	margin : 0;
}
#HEADER-NAVIGATOR > ul > li{
	list-style : none;
	max-width : 12rem;
}
#HEADER-NAVIGATOR > ul > li > a{
	display : block;
	width : 100%;
	padding : .75rem 1rem;
	box-sizing : border-box;
	font-size : .815rem;
}
#HEADER-NAVIGATOR > ul > li:hover > a{
	cursor : pointer;
	background-color : var( --BASE-COLOR1 );
	color : #FFF;
}

#HEADER-CATEGORIES{
	position : absolute;
	top : 6rem;
	left : 50%;
	max-width : 80rem;
	width : 100%;
	background-color : #FFF;
	transform : translateX( -50% );
}
#HEADER-CATEGORIES > h2{
	display : flex;
	flex-direction : column;
	align-items : center;
	justify-content : center;
	gap : 0;
	position : absolute;
	top : -5rem;
	left : 0;
	width : 4rem;
	height : 4rem;
	padding : 0;
	margin : 0;
	background-color : #FFF;
	border-radius : .25rem;
	color : #FFF;
	font-size : 0;
}
#HEADER-CATEGORIES > h2::before{
	content : '';
	width : 2rem;
	height : 2rem;
	background-image : url("/images/icon-category.svg");
}
#HEADER-CATEGORIES > h2::after{
	content : '';
	position : absolute;
	left : 0;
	top : 4rem;
	width : 100%;
	height : 1rem;
	background-color : #FFF;
}
#HEADER-CATEGORIES > ul{
	visibility : hidden;
	display : grid;
	grid-template-columns : repeat( 5, 1fr );
	position : absolute;
	top : 0;
	left : 50%;
	width : 80rem;
	max-height : 45rem;
	padding : 0;
	margin : 0;
	background-color : #FFF;
	border : solid 1px var( --BASE-COLOR1 );
	box-shadow : .15rem .15rem .25rem rgba( 0, 0, 0, .15 );
	opacity : 0;
	transform : translateX( -50% );
	overflow : auto;
}
#HEADER-CATEGORIES > ul > li{
	list-style : none;
	flex-grow : 1;
	max-width : 18rem;
}
#HEADER-CATEGORIES > ul > li > a{
	display : block;
	padding : .75rem 1rem;
	background-color : var( --BASE-COLOR1 );
	color : #FFF;
	font-size : .75rem;
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
}
#HEADER-CATEGORIES > ul > li > ul{
	padding : .25rem 0;
}
#HEADER-CATEGORIES > ul > li > ul > li{
	list-style : none;
}
#HEADER-CATEGORIES > ul > li > ul > li > a{
	display : block;
	padding : .25rem 1rem;
	font-size : .7rem;
}
#HEADER-CATEGORIES:hover{
	height : auto;
}
#HEADER-CATEGORIES:hover > ul{
	visibility : visible;
	opacity : 1;
}

/* 푸터 */
footer > #FOOTER-ADDITION{
	display : flex;
	justify-content : center;
	gap : 1rem;
	padding : 1rem 0;
	border-top : solid 1px #DDD;
}
footer > #FOOTER-ADDITION > p{
	padding : 0;
	margin : 0;
	font-weight : 500;
	font-size : .75rem;
}
footer > #FOOTER-COMPANY{
	padding : 32px;
	background-color : #E9E9E9;
}
footer > #FOOTER-COMPANY > .WRAPPER{
	width : 992px;
	padding : 0 16px;
	overflow : hidden;
}
footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-LOGO{
	float : left;
	width : 160px;
	margin-top : 16px;
	font-size : 0;
}
footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-LOGO > img{
	width : 100%;
}
footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-MENU{
	height : 24px;
	margin-left : 192px;
	font-size : 0;
}
footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-MENU > a{
	display : inline-block;
	font-family : 'Noto Sans KR';
	font-weight : 300;
	font-size : 12px;
}
footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-MENU > a:after{
	content : '|';
	margin : 0 8px;
	color : #999;
}
footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-MENU > a:last-child:after{
	display : none;
}
footer > #FOOTER-COMPANY > .WRAPPER > address{
	margin-top : 8px;
	margin-left : 192px;
	font-size : 0;
}
footer > #FOOTER-COMPANY > .WRAPPER > address > span{
	display : inline-block;
	margin-right : 12px;
	font-family : 'Noto Sans KR';
	font-style : normal;
	font-weight : 500;
	font-size : 12px;
	line-height : 22px;
}
footer > #FOOTER-COMPANY > .WRAPPER > address > span > strong{
	font-weight : 300;
	margin-right : 4px;
}
footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-COPYRIGHT{
	padding : 0;
	margin : 12px 0 0 192px;
	font-family : 'Noto Sans KR';
	font-weight : 300;
	font-size : 12px;
}

/* Right Side 핸들 */
#RSIDE-HANDLE{
	position : fixed;
	top : 50%;
	right : .25rem;
	width : 3rem;
	transform : translateY( -50% );
	z-index : 10000;
}
#RSIDE-HANDLE > #RSIDE-HANDLE-SHORTCUT{
	display : grid;
	gap : .25rem;
}
#RSIDE-HANDLE > #RSIDE-HANDLE-SHORTCUT > a{
	width : 3rem;
	height : 3rem;
	border : solid 1px #DDD;
	overflow : hidden;
}
#RSIDE-HANDLE > #RSIDE-HANDLE-SHORTCUT > a > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}

#RSIDE-HANDLE > #RSIDE-HANDLE-SCROLLS{
	display : grid;
	gap : .25rem;
	margin-top : .25rem;
}
#RSIDE-HANDLE > #RSIDE-HANDLE-SCROLLS > a{
	width : 3rem;
	height : 3rem;
	background-color : #F5F5F5;
	background-image : url("/images/icon-black-arrow.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 1.5rem;
	border : solid 1px #DDD;
	font-size : 0;
	cursor : pointer;
	overflow : hidden;
}
#RSIDE-HANDLE > #RSIDE-HANDLE-SCROLLS > a#RSIDE-HANDLE-SCROLL-TOP{ transform : rotateZ( -90deg );
}
#RSIDE-HANDLE > #RSIDE-HANDLE-SCROLLS > a#RSIDE-HANDLE-SCROLL-BOTTOM{ transform : rotateZ( 90deg ); }

/* 페이징 */
.PAGING{
	display : flex;
	justify-content : center;
	gap : .5rem;
	margin : 2rem 0;
}
.PAGING > a{
	flex-grow : 0;
	display : flex;
	justify-content : center;
	align-items : center;
	width : auto;
	min-width : 1rem;
	height : 1.5rem;
	padding : 0 .25rem;
	border-radius : .75rem;

	font-weight : bold;
	font-size : .815rem;
	transition :
		background-color .25s ease-in-out,
		color .25s ease-in-out;
}
.PAGING > a:hover{
	background-color : #CCC;
	cursor : pointer;
}
.PAGING > a.ON{
	background-color : var( --BASE-COLOR1 );
	color : #FFF;
}
.PAGING > a.GOTO{ padding : 0 .35rem; }
.PAGING > i.ELLIPSIS{
	display : inline-block;
	height : 32px;
	color : #888;
	line-height : 32px;
	font-style : normal;
	font-size : 16px;
}

/*  */
@media ( max-width : 50rem ){

	body{ padding-bottom : 4rem; }

	#HEADER-HEADER{ padding-left : 4rem; }
	#HEADER-HEADER::before{ content : ''; }
	#HEADER-HEADER > h1{
		max-width : 100%;
		width : auto;
		height : 2.5rem;
		margin : .75rem 0;
	}
	#HEADER-HEADER > h1 > a > img{
		height : 2.5rem;
		object-position : center;
	}

	#HEADER-SEARCH{
		position : relative;
		display : block;
		max-width : 100%;
		width : 2.5rem;
		height : 2.5rem;
		border : 0;
		overflow : visible;
		z-index : 10001;
	}
	#HEADER-SEARCH > input{
		visibility: hidden;
		position : absolute;
		right : 100%;
		width : calc( 100vw - 8rem );
		height : 2.5rem;
		padding : 0 .75rem;
		font-size : 1.125rem;
		background-color : #FFF;
		box-sizing : border-box;
	}
	#HEADER-SEARCH > input::-webkit-input-placeholder{ font-size : 1.125rem; font-weight : 400; }
	#HEADER-SEARCH > button{
		width : 2.5rem;
		height : 2.5rem;
	}
	#HEADER-SEARCH > button > svg{
		width : 2.5rem;
		height : 2.5rem;
		margin : 0;
	}
	#HEADER-SEARCH::after{
		content : '';
		position : absolute;
		top : 0;
		right : 0;
		width : 100%;
		height : 100%;
		transition : visibility .5s linear;
	}
	#HEADER-SEARCH:hover > input{ visibility : visible; }
	#HEADER-SEARCH:hover::after{ visibility : hidden; }

	#HEADER-SHORTCUT{
		justify-content : space-around;
		position : fixed;
		left : 0;
		right : 0;
		bottom : 0;
		background-color : #FFF;
		z-index : 10000;
		width : auto;
		max-width : 100%;
		height : 3rem;
		padding : 1rem;
		margin : 0;
	}
	#HEADER-SHORTCUT > a > img{
		width : 2rem;
		height : 2rem;
	}

	#HEADER-CATEGORIES{
		left : 0;
		max-width : 100%;
		transform : none;
	}
	#HEADER-CATEGORIES > ul{
		grid-template-columns : repeat( 3, 1fr );
		top : 0;
		left : 0;
		right : 0;
		width : auto;
		max-height : 45rem;
		transform : none;
		overflow-x : hidden;
	}
	#HEADER-CATEGORIES > ul > li{
		width : auto;
		max-width : 100%
	}

	/* 푸터 */
	footer > #FOOTER-ADDITION{
		flex-wrap : wrap;
		padding : 1.5rem;
	}
	footer > #FOOTER-COMPANY{ padding : 2rem; }
	footer > #FOOTER-COMPANY > .WRAPPER{
		width : auto;
		padding : 0;
	}
	footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-LOGO{ display : none; }
	footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-MENU{
		display : flex;
		justify-content : space-between;
		gap : 1rem;
		height : auto;
		margin : 0 0 1.5rem 0;
	}
	footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-MENU > a{
		display : block;
		font-family : normal;
		font-size : .815rem;
	}
	footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-MENU > a:after{ display : none; }
	footer > #FOOTER-COMPANY > .WRAPPER > address{
		display : flex;
		flex-wrap : wrap;
		gap : .5rem 1rem;
		justify-content : space-between;
		margin : 0;
	}
	footer > #FOOTER-COMPANY > .WRAPPER > address > span{
		display : block;
		margin : 0;
		font-family : normal;
		font-size : .815rem;
		line-height : normal;
	}
	footer > #FOOTER-COMPANY > .WRAPPER > address > span > strong{
		font-weight : normal;
		margin-right : .25rem;
	}
	footer > #FOOTER-COMPANY > .WRAPPER > #FOOTER-COPYRIGHT{
		padding : 0;
		margin : 1.5rem 0 0 0;
		font-family : normal;
		font-weight : normal;
		font-size : .875rem;
	}

	/* Right Side 핸들 */
	#RSIDE-HANDLE{ display : none; }

}
@media ( max-width : 26rem ){

	#HEADER-CATEGORIES > ul{ grid-template-columns : repeat( 2, 1fr ); }

}