@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;
}
body{
	padding : 0;
	margin : 0;
}
a{
	color : inherit;
	text-decoration : inherit;
}

/* 개발자 설정 스타일 */
.MOBILE_ONLY{ display : none; }

/* 래퍼 */
.WRAPPER{
	width : 1024px;
	margin : 0 auto;
}

/* 숨겨진 엘리먼트 ( 서버단 정보 ) */
#HIDDEN-ELEMENTS{
	display : none;
}

/* 페이징 */
.PAGING{
	margin : 48px 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;
}

/* 탑배너 */
#TOP-BANNERS{
	display : none; /* 임시삭제 : 2021-12-28 */

	position : relative;
	height : 80px;
	overflow : hidden;
}
#TOP-BANNERS > .TOP-BANNERS-WRAP{
	height : auto;
}
#TOP-BANNERS > .TOP-BANNERS-WRAP > a{
	display : block;
	height : 80px;
	margin : 0;
	text-align : center;
	font-size : 0;
}
#TOP-BANNERS > .TOP-BANNERS-WRAP > a > img{
	width : auto;
	height : 100%;
}
#TOP-BANNERS > button{
	position : absolute;
	right : 50%;
	width : 24px;
	height : 24px;
	margin-right : -572px;
	background-color : #E9E9E9;
	background-image : url("/images/icon-black-arrow.png");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 16px;
	border : 0;
	outline : 0;
	font-size : 0;
	cursor : pointer;
	opacity : 0;
	transition : opacity .25s ease-in-out;
}
#TOP-BANNERS > button[name="TOP-BANNER-PREV"]{
	top : 4px;
	transform : rotateZ( -90deg );
}
#TOP-BANNERS > button[name="TOP-BANNER-NEXT"]{
	bottom : 4px;
	transform : rotateZ( 90deg );
}
#TOP-BANNERS:hover > button{
	opacity : 1;
}

/* 헤더 */
header{
	background-color : #FFF;
	font-size : 0;
}
header > .TOP-MENUS{
	height : 31px;
	border-bottom : solid 1px #F3F0EB;
}
header > .TOP-MENUS > .WRAPPER{
	display : flex;
	height : 100%;
	justify-content : flex-end;
	align-items : center;
}
header > .TOP-MENUS > .WRAPPER a{
	margin-left : 16px;
	color : #666;
	font-size : 11px;
}
header > .TOP-MENUS > .WRAPPER a > i{
	display : inline-block;
	min-width : 9px;
	height : 15px;
	padding : 0 3px;
	margin-top : -2px;
	margin-left : 3px;
	background-color : #F60;
	border-radius : 7px;
	color : #FFF;
	text-align : center;
	font-style : normal;
	font-size : 10px;
	vertical-align : middle;
}
header > .WRAPPER{
	display : flex;
	justify-content : space-between;
	align-items : center;
	height : 64px;
	padding : 16px 0;
}
header > .WRAPPER > h1{
	height : 100%;
	padding : 0;
	margin : 0;
	font-size : 0;
}
header > .WRAPPER > h1 > a{
	display : block;
	height : 100%;
}
header > .WRAPPER > h1 > a > img{ height : 100%; }
header > .WRAPPER > #HEADER-SEARCH{
	display : grid;
	grid-template-columns : auto 32px;
	width : 256px;
	height : 32px;
	border : solid 2px #0313aa;
}
header > .WRAPPER > #HEADER-SEARCH > input{
	height : 32px;
	padding : 0 8px;
	margin : 0;
	border : 0;
	outline : 0;
	box-sizing : border-box;
}
header > .WRAPPER > #HEADER-SEARCH > button{
	height : 32px;
	padding : 4px;
	margin : 0;
	border : 0;
	background-color : transparent;
}
header > .WRAPPER > #HEADER-SHORTCUT{
	display : flex;
	gap : 8px;
}
header > .WRAPPER > #HEADER-SHORTCUT > a{ height : 64px; }
header > .WRAPPER > #HEADER-SHORTCUT > a > svg{
	display : block;
	height : 40px;
	margin : 0 auto 4px auto;
}
header > .WRAPPER > #HEADER-SHORTCUT > a > span{
	display : block;
	height : 20px;
	text-align : center;
	font-weight : bold;
	font-size : .75rem;
	line-height : 20px;
}

/* 네비게이터 */
nav#GLOBAL-NAVIGATOR{
	display : flex;
	justify-content : center;
	align-items : center;
	height : 60px;
	background-color : #1b5bba;
}
nav#GLOBAL-NAVIGATOR > i#CATEGORIES-CALL{
	margin-right : 16px;
	font-style : normal;
	font-size : 0;
	cursor : pointer;
}
nav#GLOBAL-NAVIGATOR > i#CATEGORIES-CALL > svg{
	display : inline-block;
	width : 18px;
	height : 18px;
	fill : #FFF;
	vertical-align : middle;
}
nav#GLOBAL-NAVIGATOR > i#CATEGORIES-CALL > span{
	display : inline-block;
	margin-top : -1px;
	margin-left : 3px;
	color : #FFF;
	font-family : 'Nanum Gothic';
	font-weight : 600;
	font-size : 13px;
	vertical-align : middle;
}

nav#GLOBAL-NAVIGATOR > #CATEGORIES-TREE{ display : none; }

nav#GLOBAL-NAVIGATOR > #CATEGORIES{
	display : flex;
	padding : 0;
	margin : 0;
}
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li{
	position : relative;
	list-style : none;
	overflow : visible;
}
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > a{
	display : block;
	height : 60px;
	padding : 0 16px;
	color : #FFF;
	text-align : center;
	font-family : 'Noto Sans KR';
	font-weight : 400;
	font-size : 16px;
	line-height : 60px;
	transition : background-color .25s ease-in-out;
}
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div{
	visibility : hidden;
	position : absolute;
	top : 60px;
	left : 0;
	width : auto;
	padding : 16px;
	margin : 0;
	background-color : #1B50A3;
	z-index : 9999;
	opacity : 0;
	transition : opacity .25s ease-in-out;
	white-space : nowrap;
}
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div > ul{
	display : flex;
	flex-direction : column;
	gap : 6px;
	padding : 0;
	margin : 0;
}
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div > ul > li{ list-style : none; }
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div > ul > li > a{
	display : block;
	color : rgba( 255, 255, 255, .75 );
	font-family : 'Noto Sans KR';
	font-weight : 300;
	font-size : 12px;
}
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li:hover > a{ background-color : #1B50A3; }
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li:hover > div{ visibility : visible; opacity : 1; }
nav#GLOBAL-NAVIGATOR > #CATEGORIES > li:hover > div > ul > li > a:hover{ color : rgb( 255, 255, 255 ); }



/* 푸터 */
footer > #FOOTER-ADDITION{
	display : flex;
	justify-content : center;
	gap : 16px;
	background-color : #FFF;
	border-top : solid 1px #DDD;
}
footer > #FOOTER-ADDITION > div{
	padding : 32px 16px;
}
footer > #FOOTER-ADDITION > div > h3{
	padding : 0;
	margin : 0 0 16px 0;
	font-family : 'NanumSquare';
	font-weight : 600;
	font-size : 18px;
}

footer > #FOOTER-ADDITION > div#FOOTER-CALLCENTER > #FOOTER-CALLCENTER-CONTACT > a{
	display : block;
	margin : 0 0 4px 0;
	font-family : 'Noto Sans KR';
}
footer > #FOOTER-ADDITION > div#FOOTER-CALLCENTER > #FOOTER-CALLCENTER-CONTACT > a:nth-child(1){
	font-weight : 700;
	font-size : 18px;
}
footer > #FOOTER-ADDITION > div#FOOTER-CALLCENTER > #FOOTER-CALLCENTER-CONTACT > a:nth-child(2){
	color : #333;
	font-weight : 500;
	font-size : 14px;
}

footer > #FOOTER-ADDITION > div#FOOTER-CALLCENTER > #FOOTER-CALLCENTER-HOURS{
	margin-top : 12px;
	font-family : 'Noto Sans KR';
	font-weight : 300;
	font-size : 12px;
}
footer > #FOOTER-ADDITION > div#FOOTER-CALLCENTER > #FOOTER-CALLCENTER-HOURS > span{ display : block; }

footer > #FOOTER-ADDITION > div#FOOTER-BANKINFO > span{
	display : block;
	font-family : 'Noto Sans KR';
	font-weight : 300;
}
footer > #FOOTER-ADDITION > div#FOOTER-BANKINFO > span:nth-of-type(1){ font-size : 12px; }
footer > #FOOTER-ADDITION > div#FOOTER-BANKINFO > span:nth-of-type(2){ font-weight : 500; font-size : 20px; }
footer > #FOOTER-ADDITION > div#FOOTER-BANKINFO > span:nth-of-type(3){ font-size : 14px; }

footer > #FOOTER-COMPANY{
	padding : 32px;
	background-color : #666;
}
footer > #FOOTER-COMPANY > #FOOTER-MENU{
	display : flex;
	justify-content : center;
	gap : 10px;
}
footer > #FOOTER-COMPANY > #FOOTER-MENU > a{
	color : #333;
	font-family : 'Nanum Gothic';
	font-size : 12px;
}
footer > #FOOTER-COMPANY > address{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	gap : 8px 16px;
	width : 768px;
	margin : 16px auto 0 auto;
	font-style : normal;
}
footer > #FOOTER-COMPANY > address > span{
	font-family : 'Nanum Gothic';
	font-weight : 700;
	font-size : 12px;
}
footer > #FOOTER-COMPANY > address > span > strong{
	margin-right : 6px;
	color : #333;
	font-weight : 500;
}
footer > #FOOTER-COMPANY > #FOOTER-COPYRIGHT{
	padding : 0;
	margin-top : 16px;
	text-align : center;
	font-family : 'Noto Sans KR';
	font-weight : 500;
	font-size : 12px;
}

/* 상품목록 기본형태 */
.GOODS > ul{
	display : grid;
	grid-template-columns : repeat( 4, 244px );
	grid-gap : 48px 16px;
	padding : 0;
	margin : 0;
}
.GOODS > ul > li{ list-style : none; }
.GOODS > ul > li > a{
	display : block;
	cursor : pointer;
}
.GOODS > ul > li > a > .THUMB{
	height : 232px;
	overflow : hidden;
}
.GOODS > ul > li > a > .THUMB > img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
}
.GOODS > ul > li > a > .NAME{
	height : 44px;
	margin-top : 6px;
	font-weight : bold;
	font-size : 15px;
	line-height : 22px;
	overflow : hidden;
	word-break : break-all;
	
	display : -webkit-box;
	-webkit-line-clamp : 2;
	-webkit-box-orient : vertical;
}
.GOODS > ul > li > a > .NAME > i{ background-color : #FE9; }
.GOODS > ul > li > a > .PRICE{
	margin-top : 8px;
	height : 40px;
	line-height : 40px;
}
.GOODS > ul > li > a > .PRICE > span{
	color : 222;
	font-family : tahoma;
	font-weight : 700;
	font-size : 18px;
}
.GOODS > ul > li > a > .PRICE > span::after{
	content : '원';
	font-weight : normal;
	font-size : 12px;
}
.GOODS > ul > li > a > .PRICE > span.SALE{ display : inline; }
.GOODS > ul > li > a > .PRICE > span.DISC{ display : none; }
.GOODS > ul > li.DISCOUNT > a > .PRICE > span.SALE{
	margin-left : 16px;
	color : #666;
	text-decoration : line-through;
	font-family : normal;
	font-weight : normal;
	font-size : 12px;
}
.GOODS > ul > li.DISCOUNT > a > .PRICE > span.DISC{ display : inline; }
.GOODS > ul > li.NORECORD{
	display : block;
	width : auto;
	padding : 72px 0;
	margin : 0;
	color : #999;
	text-align : center;
	font-size : 14px;
}

.GOODS.COL5 > ul{ grid-template-columns : repeat( 5, 192px ); }
.GOODS.COL5 > ul > li > a > .THUMB{ height : 171px; }
.GOODS.COL5 > ul > li > a > .NAME{
	height : 40px;
	font-size : 14px;
	line-height : 20px;
}
.GOODS.COL5 > ul > li > a > .PRICE > span{ font-size : 17px; }


/* IE 전용 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){

	header > .WRAPPER{
		position : relative;
		display : block;
	}
	header > .WRAPPER > h1{
		position : absolute;
		top : 16px;
		bottom : 16px;
		left : 0;
		width : 200px;
		height : 64px;
		vertical-align : middle;
	}
	header > .WRAPPER > #HEADER-SEARCH{
		position : absolute;
		top : 32px;
		left : 384px;
	}
	header > .WRAPPER > #HEADER-SEARCH > input{ width : 224px; vertical-align : top; }
	header > .WRAPPER > #HEADER-SEARCH > button{ width : 32px; vertical-align : top; }
	header > .WRAPPER > #HEADER-SHORTCUT{
		position : absolute;
		top : 16px;
		right : 0;
		width : 288px;
		height : 64px;
	}
	header > .WRAPPER > #HEADER-SHORTCUT > a{
		display : inline-block;
		width : 96px;
		overflow : hidden;
	}

	.GOODS > ul{ font-size : 0; }
	.GOODS > ul > li{
		display : inline-block;
		width : 240px;
		margin : 0 8px 48px 8px;
	}

}



/* 모바일 세팅 */
@media( max-width : 480px ){

	.WRAPPER{ width : 100%; }

	/* 헤더 */
	header{
		display : flex;
		flex-direction : column-reverse;
	}
	header > .TOP-MENUS{
		height : auto;
		padding : 0;
		background-color : #9C0408;
		border : 0;
	}
	header > .TOP-MENUS > .WRAPPER{
		padding : .25rem 0;
		justify-content : space-around;
	}
	header > .TOP-MENUS > .WRAPPER a{
		padding : .5rem;
		margin : 0;
		color : #FFF;
		font-size : .8rem;
	}
	header > .WRAPPER{
		display : flex;
		flex-wrap : wrap;
		gap : .5rem 0;
		height : auto;
		padding : .5rem;
		box-sizing : border-box;
	}
	header > .WRAPPER > h1{
		width : 100%;
		height : 3.2rem;
		text-align : center;
	}
	header > .WRAPPER > h1 > a{
		display : inline-block;
		height : 100%;
	}
	header > .WRAPPER > h1 > a > img{ height : 100%; }
	header > .WRAPPER > #CALL-CATEGORY{
		display : block;
		width : 2rem;
		height : 2rem;
	}
	header > .WRAPPER > #HEADER-SEARCH{
		display : grid;
		grid-template-columns : auto 2rem;
		width : auto;
		height : auto;
	}
	header > .WRAPPER > #HEADER-SEARCH > input{
		height : 2rem;
		padding : 0;
	}
	header > .WRAPPER > #HEADER-SEARCH > button{
		height : 32px;
		padding : 4px;
		margin : 0;
		border : 0;
		background-color : transparent;
	}
	header > .WRAPPER > #HEADER-SHORTCUT{
		display : flex;
		gap : .25rem;
	}
	header > .WRAPPER > #HEADER-SHORTCUT > a{ height : auto;  }
	header > .WRAPPER > #HEADER-SHORTCUT > a > svg{ display : block; height : 2rem; margin : 0; }
	header > .WRAPPER > #HEADER-SHORTCUT > a > span{ display : none; }
	header > .WRAPPER > #HEADER-SHORTCUT > a:nth-child(2),
	header > .WRAPPER > #HEADER-SHORTCUT > a:nth-child(3){ display : none; }

	/* 네비게이터 */
	nav#GLOBAL-NAVIGATOR{
		display : block;
		position : fixed;
		top : 0;
		left : 0;
		width : 100%;
		height : 100%;
		padding : .25rem;
		margin-left : -100%;
		background-color : #E9E9E9;
		overflow : auto;
		box-sizing : border-box;
		z-index : 20000;
		transition : margin-left .25s ease-in-out;
	}
	nav#GLOBAL-NAVIGATOR > #CATEGORIES{
		display : block;
		column-width : calc( 50vw - 0.5rem );
		column-gap : .25rem;
	}
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li{
		display : inline-block;
		width : 100%;
		margin-bottom : .25rem;
	}
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > a{
		height : 2.5rem;
		padding : 0 1rem;
		background-color : #FFF;
		color : #000;
		text-align : left;
		font-size : 1rem;
		line-height : 2.5rem;
		transition : none;
	}
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div{
		visibility : unset;
		position : static;
		width : auto;
		padding : 1rem;
		margin : 0;
		background-color : #D9D9D9;
		opacity : 1;
		transition : none;
		white-space : normal;
	}
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div > ul{
		display : flex;
		flex-direction : column;
		gap : 6px;
		padding : 0;
		margin : 0;
	}
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div > ul > li{ list-style : none; }
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li > div > ul > li > a{
		display : block;
		color : #000;
		font-family : 'Noto Sans KR';
		font-weight : 300;
		font-size : 12px;
	}
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li:hover > a{ background-color : #6C0204; }
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li:hover > div{ visibility : visible; opacity : 1; }
	nav#GLOBAL-NAVIGATOR > #CATEGORIES > li:hover > div > ul > li > a:hover{ color : #FFFF; }

	nav#GLOBAL-NAVIGATOR.ON{
		margin-left : 0;
	}

	/* 푸터 */
	footer > #FOOTER-COMPANY > address{
		width : auto;
		text-align : center;
	}

	/* 상품목록 */
	.GOODS > ul{
		grid-template-columns : repeat( 2, 50% );
		grid-gap : 3rem 1rem;
		padding : 1rem;
	}
	.GOODS > ul > li > a > .THUMB{ height : calc( 50vw - 1.5rem ); }
	.GOODS > ul > li > a > .THUMB > img{
		width : 100%;
		height : 100%;
		object-fit : cover;
		object-position : center;
	}

}