/* Google Web Fonts Import */
@import url('https://fonts.googleapis.com/css?family=Roboto:900');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR:300,400,700&subset=korean');
@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 : 1rem;
	margin : 0 0 0 15rem;
	font-size : .75rem;
}
body.LOGIN{ margin:0 }
a{
	color : inherit;
	text-decoration : none;
}

aside{
	display : flex;
	flex-direction : column;
	position : fixed;
	left : 0;
	top : 0;
	bottom : 0;
	width : 15rem;
	background-color : #F0F0F0;
	box-sizing : border-box;
}
aside > .MEMBERINFO{
	display : flex;
	flex-direction : column;
	gap : .5rem;
	padding : 1rem;
	background-color : #06C;
}
aside > .MEMBERINFO > .USER{
	text-align : center;
	font-weight : 500;
	color : #FFF;
}
aside > .MEMBERINFO > .LOGOUT{
	text-align : center;
	padding-top : .5rem;
	border-top : solid 1px rgba( 255, 255, 255, .15 );
	color : rgba( 255, 255, 255, .5 );
	font-size : .7rem;
	cursor : pointer;
}

aside > a{
	display : flex;
	align-items : center;
	gap : .25rem;
	padding : .75rem 1rem;
	margin : .5rem 1rem 0 1rem;
	background-color : #09C;
	border-radius : .25rem;
	color : #EEE;
}
aside > a::before{
	content : '';
	width : 1rem;
	height : 1rem;
	background-image : url("/images/iconset64.png");
	background-repeat : no-repeat;
	background-size : cover;
}
aside > .CARTLIST::before{ background-position : -400px 0; }
aside > .CARTLIST > .COUNT{
	min-width : 1rem;
	height : 1rem;
	padding : 0 .05rem;
	background-color : #D11;
	border-radius : .5rem;
	color : #FFF;
	text-align : center;
	font-weight : 500;
	font-size : .6rem;
}
aside > .WISHLIST:before{
	background-image : url("/images/icon-heart-red.svg");
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}

aside > nav{
	flex-grow : 1;
	padding : 1rem;
}
aside > nav > ul{
	display : grid;
	gap : 1rem;
	padding : 0;
	margin : 0;
}
aside > nav > ul > li{ list-style : none; }
aside > nav > ul > li > a{
	display : flex;
	align-items : center;
	padding : .25rem;
	background-color : #E9E9E9;
	border-radius : .25rem;
	font-family : 'MalgunGothic';
	font-weight : bold;
	font-size : .815rem;
}
aside > nav > ul > li > a::before{
	content : '';
	width : 1.75rem;
	height : 1.75rem;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
aside > nav > ul > li > a.HOME::before{ background-image : url('/images/menuicon-home.png') }
aside > nav > ul > li > a.GOODS::before{ background-image : url('/images/menuicon-goods.png') }
aside > nav > ul > li > a.ORDER::before{ background-image : url('/images/menuicon-orders.png') }
aside > nav > ul > li > a.LEDGER::before{ background-image : url('/images/menuicon-calendar.png') }
aside > nav > ul > li > ul{
	display : grid;
	gap : .25rem;
	padding : .75rem;
	margin : 0;
}
aside > nav > ul > li > ul > li{
	list-style : none;
	color : #666;
	font-family : 'MalgunGothic';
}

aside > #NAV-CS{
	display : grid;
	gap : .15rem;
	padding : 1rem;
	margin-top : 1rem;
	background-color : #09C;
	border-radius : .15rem;
	font-family : 'MalgunGothic';
}
aside > #NAV-CS > *{ color : rgba( 255, 255, 255, .75 ) }
aside > #NAV-CS > h3{
	padding : 0;
	margin : 0;
	font-weight : normal;
	font-size : .75rem
}
aside > #NAV-CS > #NAV-CS-TIME{
	padding : 0;
	margin : 0;
}
aside > #NAV-CS > #NAV-CS-CALL{
	display : flex;
	align-items : center;
	color : #FFF;
	font-weight : bold;
	font-size : 1.5rem;
}
aside > #NAV-CS > #NAV-CS-CALL::before{
	content : '';
	width : 1.75rem;
	height : 1.75rem;
	margin-top : .25rem;
	background-image : url('/images/icon-white-call.png');
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
}
aside > #NAV-CS > #NAV-CS-MAIL{
	display : flex;
	align-items : center;
}
aside > #NAV-CS > #NAV-CS-MAIL::before{
	content : '';
	width : 1rem;
	height : 1rem;
	margin-top : .15rem;
	margin-right : .25rem;
	background-image : url('/images/icon-white-mail.png');
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	opacity : .75;
}


header > h1{ float:left; width:480px; height:50px; padding:0 12px; margin:0; font-size:12px; line-height:50px }

header > form.SEARCH{ height:50px; background-color:#E9E9E9 }
header > form.SEARCH > fieldset{ padding:9px 0; margin:0; font-size:0; border:0; text-align:right }
header > form.SEARCH > fieldset > div{ display:inline-block; margin-right:9px }
header > form.SEARCH > fieldset select{ width:120px; height:32px; font:normal 12px/normal Dotum; color:#444 }
header > form.SEARCH > fieldset input{ width:220px; height:32px; padding:0 5px; font:normal 12px/normal Dotum; color:#444; box-sizing:border-box }

header + form.SEARCH{ position:fixed; right:0; top:0; max-height:32px; overflow:hidden; z-index:9999; font-size:0; transition:max-height .25s ease-in-out }
header + form.SEARCH.STEP2{ top:32px }
header + form.SEARCH > .TITLE{ height:32px; padding:0 12px; line-height:32px; text-align:right; font-size:11px; vertical-align:middle; color:#555; cursor:pointer; white-space:nowrap }
header + form.SEARCH > .TITLE:after{ content:''; display:inline-block; width:24px; height:24px; margin:-3px 0 0 0; background:url(/images/iconset64.png) no-repeat -144px 0; background-size:cover; vertical-align:middle }
header + form.SEARCH > .TITLE > i{ font-weight:bold; font-style:normal }
header + form.SEARCH > .TITLE > i.SS{ color:#06C }
header + form.SEARCH > .TITLE > i:after{ content:'/'; padding:0 4px; font-weight:normal; color:#999 }
header + form.SEARCH > .TITLE > i:last-child:after{ display:none }
header + form.SEARCH > fieldset{ min-width:200px; padding:12px; margin:0; border:solid 1px #CCC; border-top:0 }
header + form.SEARCH > fieldset.OPENSIGHT{ position:fixed; top:0; right:0; border:0; padding:0 12px }
header + form.SEARCH > fieldset.OPENSIGHT > input{ height:24px; margin:4px 0 }
header + form.SEARCH > fieldset > div{ margin-bottom:4px }
header + form.SEARCH > fieldset select{ width:100%; min-width:160px; height:28px; font:normal 12px/normal Dotum; color:#444 }
header + form.SEARCH > fieldset input{ width:100%; min-width:160px; height:28px; padding:0 5px; font:normal 12px/normal Dotum; color:#444; box-sizing:border-box }
header + form.SEARCH.ON{ max-height:300px }
header + form.SEARCH.ON > .TITLE:after{ background-position-x:-96px }

footer{ position:fixed; left:241px; right:0; bottom:0; height:56px; padding:0 16px; background:#E9E9E9; color:#666; text-align:right; z-index:9999 }
footer button{ height:32px; padding:0 12px; margin:12px 0 12px 6px; border:0; border-radius:4px; background-color:#666; color:#FFF; font-weight:bold; cursor:pointer }
footer button.S1{ background-color:#06C }
footer button.S2{ background-color:#39F }
footer button.S3{ background-color:#69C }

/*
table{ width:100%; table-layout:fixed; border-spacing:0 }
table > caption{ padding-bottom:4px; font-size:11px; text-align:left }
table > caption > strong{ color:#F60 }
table > thead > tr > th{ padding:12px 0; color:#333; background-color:#E9E9E9; border:solid #CCC; border-width:1px 0 }
table > tbody > tr > td{ padding:12px; border-bottom:solid 1px #CCC }
table > tbody > tr > td.NUMBER{ text-align:right }
table > tbody > tr > td.NUMBER.PRICE{  }
table > tbody > tr > td.NUMBER.PRICE:after{ content:'원' }
table > tbody > tr > td.CENTER{ text-align:center }
table > tbody > tr > td.INPUT{  }
table > tbody > tr > td.INPUT > input{ width:100%; height:30px; padding:0 7px; border:solid 1px #CCC; box-sizing:border-box; font:normal 12px/normal Dotum }
table > tbody > tr > td.INPUT > input[type=number]{ text-align:right }
table > tbody > tr > td i{ color:#999; padding:0 8px; font-style:normal }
table > tbody > tr.ON > td{ background-color:#C9E9FF }
table > tbody > tr.NORECORD > td{
	padding : 32px 0 !important;
	color : #999;
	text-align:center
}
*/

.WRAPPER{
	width : 1039px;
}

.ICONSET64{ display:inline-block; width:64px; height:64px; background:url(/images/iconset64.png) no-repeat 0 0; background-size:cover; font-size:0 }

.POPUP{
	display : none;
	position : absolute;
	top : 3rem;
	left : 3rem;
	
	padding : .75rem;
	background-color : #FFF;
	border : solid 1px #DDD;
	box-sizing : border-box;
	box-shadow : 1px 1px 3px rgba( 0, 0, 0, .15 );
	z-index : 10000;
}
.POPUP > .CONTENT > img{ max-height : calc( 100vh - 8rem ) }

.POPUP > .EXIT{
	display : flex;
	justify-content : space-between;
	padding-top : 8px;
}
.POPUP > .EXIT > a{
	cursor : pointer;
}


/*
@media ( max-width : 1280px ){
	
	aside{
		border-right : solid 1px #999;
	}
	aside > .MEMBERINFO{
		position : relative;
		min-height : none;
		height : 3rem;
		padding : 0;
		background-color : #06C
	}
	aside > .MEMBERINFO > .USER{
		float : left;
		display : block;
		width : calc( 240px - 5rem );
		padding : 0 1rem;
		font-weight : bold;
		font-size : 1rem;
		color : #FFF;
		line-height : 3rem;
		overflow : hidden;
		text-overflow : ellipsis;
		white-space : nowrap;
	}
	aside > .MEMBERINFO > .LOGOUT{
		float : left;
		position : static;
		width : 3rem;
		height : 3rem;
		background-image : url("/images/icon-white-x.png");
		background-position-x : center;
		background-position-y : center;
		background-size : 2rem;
		opacity:.7
	}
	
	aside > .CARTLIST{
		height : 3rem;
		padding : 0;
		line-height : 3rem;
		font-size : 1rem;
		background-color : #09C;
	}
	aside > .CARTLIST:before{
		width : 3rem;
		height : 3rem;
		margin : 0;
		background : url(/images/icon-white-cart.png);
		background-repeat : no-repeat;
		background-position : center;
		background-size : 2rem;
		vertical-align : top
	}
	aside > .CARTLIST > .COUNT{
		right : 0;
		top : 0;
		height : 3rem;
		padding : 0 1rem;
		border-radius : 0;
		font-size : 1rem;
		line-height : 3rem
	}
	
	aside > nav{
		position : absolute;
		top : 6rem;
		bottom : 0;
		left : 0;
		width : 240px;
		padding : 0;
		overflow : auto
	}
	aside > nav > ul{ padding:0; margin:0 }
	aside > nav > ul > li{
		margin : 0;
		list-style:none
	}
	aside > nav > ul > li > a{
		padding : 1rem;
		background-color : #DDD;
		border-bottom : solid 1px #AAA;
		border-top : solid 1px #FFF;
		font-size : 1rem;
	}
	aside > nav > ul > li > ul{
		max-height : 0;
		padding : 0 1.6rem;
		margin : 0;
		background-color : #CCC;
		overflow : hidden;
		transition : max-height .25s ease-in-out
	}
	aside > nav > ul > li > ul > li{
		margin-bottom : .75rem;
		list-style : none
	}
	aside > nav > ul > li > ul > li:first-child{
		margin-top : 1rem
	}
	aside > nav > ul > li > ul > li:last-child{
		margin-bottom : 1rem
	}
	aside > nav > ul > li > ul > li > a{
		font-size : 1rem;
	}
	
	aside > nav > ul > li:hover > ul{
		max-height : none
	}
	
}
*/