#DEFAULT-SLIDE{
	position : relative;
	max-height : 30rem;
	height : 51.205vh;
	margin-bottom : 5rem;
	background-color : #FFF;
	overflow : hidden;
}
#DEFAULT-SLIDE > #DEFAULT-SLIDE-WRAP{
	display : flex;
	width : auto;
	height : 100%;
	white-space : nowrap;
}
#DEFAULT-SLIDE > #DEFAULT-SLIDE-WRAP > a{
	flex-shrink : 0;
	flex-grow : 0;
	width : 100%;
}
#DEFAULT-SLIDE > #DEFAULT-SLIDE-WRAP > a > img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
}
#DEFAULT-SLIDE > #DEFAULT-SLIDE-BULLETS{
	display : flex;
	justify-content : center;
	gap : .75rem;
	position : absolute;
	left : 50%;
	bottom : 1rem;
	width : auto;
	padding : 0;
	transform : translateX( -50% );
}
#DEFAULT-SLIDE > #DEFAULT-SLIDE-BULLETS > i{
	width : 2rem;
	height : .5rem;
	background-color : #FFF;
	border-radius : .25rem;
	font-size : 0;
	cursor : pointer;
}
#DEFAULT-SLIDE > #DEFAULT-SLIDE-BULLETS > i.ON{
	background-color : var( --BASE-COLOR1 );
}
#DEFAULT-SLIDE > button[name="DEFAULT-SLIDE-BUTTON"]{
	position : absolute;
	top : 50%;
	width : 3rem;
	height : 3rem;
	padding : 0;
	margin : 0;
	background-color : #FFF;
	background-image : url("/images/icon-bracelet.svg");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 1.5rem;
	border : 0;
	border-radius : 1.5rem;
	outline : 0;
	font-size : 0;
	opacity : .5;
	transition : opacity .25s ease-in-out;
}
#DEFAULT-SLIDE > button[name="DEFAULT-SLIDE-BUTTON"]#DEFAULT-SLIDE-PREV{
	left : 50%;
	transform : translateX( -36rem ) rotateY( 180deg );
}
#DEFAULT-SLIDE > button[name="DEFAULT-SLIDE-BUTTON"]#DEFAULT-SLIDE-NEXT{
	right : 50%;
	transform : translateX( 36rem );
}
#DEFAULT-SLIDE > button[name="DEFAULT-SLIDE-BUTTON"]:hover{
	opacity : 1;
	cursor : pointer;
}

#DEFAULT-SHORTCUT{
	display : flex;
	flex-wrap : wrap;
	justify-content : center;
	gap : 1rem;
	margin-bottom : 5rem;
}
#DEFAULT-SHORTCUT > a{
	flex-grow : 0;
	width : 8rem;
	text-align : center;
	font-size : .815rem;
	white-space : nowrap;
	overflow : hidden;
	text-overflow : ellipsis;
}
#DEFAULT-SHORTCUT > a::before{
	content : '';
	display : block;
	padding-bottom : 100%;
	margin-bottom : .5rem;
	background-color : #E9E9E9;
	background-image : var( --img-url );
	background-size : cover;
	background-position : center;
	border-radius : .25rem;
	overflow : hidden;
}

#DEFAULT-SLIDE-BANNERS{
	position : relative;
	width : 100%;
	max-width : 80rem;
	margin : 0 auto 5rem auto;
	background-color : #FFF;
	overflow : hidden;
}
#DEFAULT-SLIDE-BANNERS > #DEFAULT-SLIDE-BANNERS-WRAP{
	display : flex;
	width : auto;
	height : 100%;
	gap : 1rem;
	white-space : nowrap;
}
#DEFAULT-SLIDE-BANNERS > #DEFAULT-SLIDE-BANNERS-WRAP > a{
	flex-shrink : 0;
	flex-grow : 0;
	position : relative;
	width : calc( 50% - .5rem );
	padding-bottom : 45%;
	background-color : #E9E9E9;
	border-radius : .25rem;
	overflow : hidden;
}
#DEFAULT-SLIDE-BANNERS > #DEFAULT-SLIDE-BANNERS-WRAP > a > img{
	position : absolute;
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
}
#DEFAULT-SLIDE-BANNERS > #DEFAULT-SLIDE-BANNERS-BULLETS{
	display : flex;
	justify-content : center;
	gap : .75rem;
	width : auto;
	padding : 1rem 0;
}
#DEFAULT-SLIDE-BANNERS > #DEFAULT-SLIDE-BANNERS-BULLETS > i{
	width : 2rem;
	height : .5rem;
	background-color : #E9E9E9;
	border-radius : .25rem;
	font-size : 0;
	cursor : pointer;
}
#DEFAULT-SLIDE-BANNERS > #DEFAULT-SLIDE-BANNERS-BULLETS > i.ON{
	background-color : var( --BASE-COLOR1 );
}
#DEFAULT-SLIDE-BANNERS > button[name="DEFAULT-SLIDE-BANNERS-BUTTON"]{
	position : absolute;
	top : 50%;
	width : 3rem;
	height : 3rem;
	padding : 0;
	margin : 0;
	background-color : #FFF;
	background-image : url("/images/icon-bracelet.svg");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 1.5rem;
	border : 0;
	border-radius : 1.5rem;
	outline : 0;
	font-size : 0;
	opacity : .5;
	transition : opacity .25s ease-in-out;
}
#DEFAULT-SLIDE-BANNERS > button[name="DEFAULT-SLIDE-BANNERS-BUTTON"]#DEFAULT-SLIDE-BANNERS-PREV{
	left : 0;
	transform : rotateY( 180deg );
}
#DEFAULT-SLIDE-BANNERS > button[name="DEFAULT-SLIDE-BANNERS-BUTTON"]#DEFAULT-SLIDE-BANNERS-NEXT{
	right : 0;
}
#DEFAULT-SLIDE-BANNERS > button[name="DEFAULT-SLIDE-BANNERS-BUTTON"]:hover{
	opacity : 1;
	cursor : pointer;
}

#DEFAULT-BANNERS{
	display : grid;
	grid-template-columns : 1fr 2fr 1fr;
	grid-template-rows : 1fr 1fr;
	gap : .5rem;
	margin-bottom : 5rem;
}
#DEFAULT-BANNERS > a{
	position : relative;
	padding-bottom : 100%;
	background-color : #E9E9E9;
	border-radius : .25rem;
	overflow : hidden;
}
#DEFAULT-BANNERS > a > img{
	position : absolute;
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#DEFAULT-BANNERS > a:nth-child(1){
	grid-column : 1 / 2;
	grid-row : 1 / 2;
}
#DEFAULT-BANNERS > a:nth-child(2){
	grid-column : 1 / 2;
	grid-row : 2 / 3;
}
#DEFAULT-BANNERS > div:nth-child(3){
	grid-column : 2 / 3;
	grid-row : 1 / 3;
}
#DEFAULT-BANNERS > a:nth-child(4){
	grid-column : 3 / 4;
	grid-row : 1 / 2;
}
#DEFAULT-BANNERS > a:nth-child(5){
	grid-column : 3 / 4;
	grid-row : 2 / 3;
}

#DEFAULT-SLIDE-BANNERS2{
	position : relative;
	width : 100%;
	margin : 0;
	background-color : #FFF;
	overflow : hidden;
}
#DEFAULT-SLIDE-BANNERS2 > #DEFAULT-SLIDE-BANNERS2-WRAP{
	display : flex;
	width : auto;
	height : 100%;
	white-space : nowrap;
}
#DEFAULT-SLIDE-BANNERS2 > #DEFAULT-SLIDE-BANNERS2-WRAP > a{
	flex-shrink : 0;
	flex-grow : 0;
	width : 100%;
	height : 100%;
	background-color : #E9E9E9;
	border-radius : .25rem;
	overflow : hidden;
}
#DEFAULT-SLIDE-BANNERS2 > #DEFAULT-SLIDE-BANNERS2-WRAP > a > img{
	width : 100%;
	height : 100%;
	object-fit : contain;
	object-position : center;
}
#DEFAULT-SLIDE-BANNERS2 > #DEFAULT-SLIDE-BANNERS2-BULLETS{
	position : absolute;
	left : 50%;
	bottom : .5rem;
	display : flex;
	justify-content : center;
	gap : .75rem;
	width : auto;
	padding : 1rem 0;
	transform : translateX( -50% );
}
#DEFAULT-SLIDE-BANNERS2 > #DEFAULT-SLIDE-BANNERS2-BULLETS > i{
	width : 2rem;
	height : .5rem;
	background-color : #E9E9E9;
	border-radius : .25rem;
	font-size : 0;
	cursor : pointer;
}
#DEFAULT-SLIDE-BANNERS2 > #DEFAULT-SLIDE-BANNERS2-BULLETS > i.ON{
	background-color : var( --BASE-COLOR1 );
}
#DEFAULT-SLIDE-BANNERS2 > button[name="DEFAULT-SLIDE-BANNERS2-BUTTON"]{
	position : absolute;
	top : 50%;
	width : 3rem;
	height : 3rem;
	padding : 0;
	margin : 0;
	background-color : #FFF;
	background-image : url("/images/icon-bracelet.svg");
	background-repeat : no-repeat;
	background-position : center;
	background-size : 1.5rem;
	border : 0;
	border-radius : 1.5rem;
	outline : 0;
	font-size : 0;
	opacity : .5;
	transition : opacity .25s ease-in-out;
}
#DEFAULT-SLIDE-BANNERS2 > button[name="DEFAULT-SLIDE-BANNERS2-BUTTON"]#DEFAULT-SLIDE-BANNERS2-PREV{
	left : 0;
	transform : rotateY( 180deg );
}
#DEFAULT-SLIDE-BANNERS2 > button[name="DEFAULT-SLIDE-BANNERS2-BUTTON"]#DEFAULT-SLIDE-BANNERS2-NEXT{
	right : 0;
}
#DEFAULT-SLIDE-BANNERS2 > button[name="DEFAULT-SLIDE-BANNERS2-BUTTON"]:hover{
	opacity : 1;
	cursor : pointer;
}

#CATEGORY-EXPOSURE{
	margin : 10rem auto;
}
#CATEGORY-EXPOSURE > h2{
	padding : 0;
	margin : 0 0 1.75rem 0;
	font-weight : 600;
	font-size : 1.5rem;
	text-align : center;
}
#CATEGORY-EXPOSURE > h2 > span{ color : var( --BASE-COLOR2 ); }
#CATEGORY-EXPOSURE > div{
	display : grid;
	grid-template-columns : 12rem auto;
	margin-bottom : 5rem;
}
#CATEGORY-EXPOSURE > div > .TITLE{
	flex-shrink : 0;
	flex-grow : 0;

	display : flex;
	flex-direction : column;
	justify-content : space-between;
	gap : 1rem;
	padding : 2rem;
}
#CATEGORY-EXPOSURE > div > .TITLE > h3{
	padding : 0;
	margin : 0;
	font-weight : 500;
	font-size : 1.25rem;
	word-break : keep-all;
}
#CATEGORY-EXPOSURE > div > .TITLE > .TAGS{
	flex-grow : 1;
	display : flex;
	flex-direction : column;
	justify-content : flex-end;
}
#CATEGORY-EXPOSURE > div > .TITLE > .TAGS > a{
	color : #666;
	font-size : .875rem;
}
#CATEGORY-EXPOSURE > div > .TITLE > .TAGS > a::before{ content : '#'; }
#CATEGORY-EXPOSURE > div > .TITLE > .MORE{
	color : var( --BASE-COLOR2 );
	font-size : .815rem;
}
#CATEGORY-EXPOSURE > div > .BANNER{ display : none; }
#CATEGORY-EXPOSURE > div > .BANNER > a{
	display : block;
	width : 100%;
	height : 100%;
}
#CATEGORY-EXPOSURE > div > .BANNER > a > img{
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
}
#CATEGORY-EXPOSURE > div > .GOODS{
	display : grid;
	grid-template-columns : repeat( 4, 1fr );
	gap : 1rem 1rem;
	padding : 1rem;
}
#CATEGORY-EXPOSURE > div > .GOODS > a > p{
	padding : 0;
	margin : 0;
}
#CATEGORY-EXPOSURE > div > .GOODS > a > .THUMB{
	position : relative;
	height : 0;
	padding-bottom : 100%;
	overflow : hidden;
}
#CATEGORY-EXPOSURE > div > .GOODS > a > .THUMB > img{
	position : absolute;
	top : 50%;
	left : 50%;
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center;
	transform : translate( -50%, -50% );
}
#CATEGORY-EXPOSURE > div > .GOODS > a > .TITLE{
	margin-top : 1.5rem;
	font-size : .75rem;
}
#CATEGORY-EXPOSURE > div > .GOODS > a > .PRICE{
	margin-top : .5rem;
	color : var( --BASE-COLOR3 );
	font-weight : 600;
	font-size : .815rem;
}
#CATEGORY-EXPOSURE > div > .GOODS > a > .PRICE::after{ content : '원'; }
#CATEGORY-EXPOSURE > div > .GOODS > a:hover{
	cursor : pointer;
}

#DEFAULT-REVIEWS{
	margin-bottom : 2rem;
}
#DEFAULT-REVIEWS > h2{
	padding : 0;
	margin : 0 0 .5rem 0;
	font-weight : 500;
	font-size : 1.125rem;
}
#DEFAULT-REVIEWS > h2 > span{ color : var( --BASE-COLOR2 ); }
#DEFAULT-REVIEWS > ul{
	display : grid;
	grid-template-columns: repeat( 4, 1fr);
	gap : 1rem;
	padding : 0;
	margin : 0;
}
#DEFAULT-REVIEWS > ul > li{
	list-style : none;
}
#DEFAULT-REVIEWS > ul > li > p{
	padding : 0;
	margin : 0;
}
#DEFAULT-REVIEWS > ul > li > .THUMB{
	height : 0;
	padding-bottom : 65%;
	margin-bottom : .75rem;
	background-size : cover;
	background-position : center;
}
#DEFAULT-REVIEWS > ul > li > .TITLE{
	margin-bottom : .75rem;
	color : var( --BASE-COLOR1 );
	font-size : .815rem;
	word-break : break-all;
}
#DEFAULT-REVIEWS > ul > li > .MARK{ display : none }
#DEFAULT-REVIEWS > ul > li > .CONTENT{
	font-size : .75rem;
}
#DEFAULT-REVIEWS > ul > li > .WRITER{ display : none; }

.POPUP{
	position : absolute;
	padding : 8px;
	background-color : #FFF;
	border : solid 1px #DDD;
	box-shadow : 2px 2px 3px rgba( 0, 0, 0, .25 );
}
.POPUP > .BOTTOM{
	height : 16px;
	margin-top : 4px;
	color : #666;
	font-size : 11px;
	line-height : 16px;
	overflow : hidden;
}
.POPUP > .BOTTOM > a:hover{
	color : #000;
	cursor : pointer;
}
.POPUP > .BOTTOM > a.TODAY-NOVIEW{
	float : left;
}
.POPUP > .BOTTOM > a.EXIT{
	float : right;
}

@media ( max-width : 120rem ){
	#DEFAULT-SLIDE > #DEFAULT-SLIDE-WRAP > a > img{ object-fit : cover;}
}


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

	#DEFAULT-SLIDE{
		max-height : 16rem;
		height : 16rem;
		margin-bottom : 2rem;
	}

	#DEFAULT-SHORTCUT{
		display : grid;
		grid-template-columns: repeat( 4, 1fr );
		padding : 0 2rem;
		margin-bottom : 2rem;
	}
	#DEFAULT-SHORTCUT > a{
		width : auto;
		font-size : .875rem;
	}

	#DEFAULT-BANNERS{
		grid-template-columns : 1fr 1fr;
		grid-template-rows : 1fr 2fr 1fr;
		margin-bottom : 2rem;
	}
	#DEFAULT-BANNERS > a:nth-child(1){
		grid-column : 1 / 2;
		grid-row : 1 / 2;
	}
	#DEFAULT-BANNERS > a:nth-child(2){
		grid-column : 2 / 3;
		grid-row : 1 / 2;
	}
	#DEFAULT-BANNERS > div:nth-child(3){
		grid-column : 1 / 3;
		grid-row : 2 / 3;
	}
	#DEFAULT-BANNERS > a:nth-child(4){
		grid-column : 1 / 2;
		grid-row : 3 / 4;
	}
	#DEFAULT-BANNERS > a:nth-child(5){
		grid-column : 2 / 3;
		grid-row : 3 / 4;
	}

	#CATEGORY-EXPOSURE{
		margin : 0;
		margin-bottom : 2rem;
	}
	#CATEGORY-EXPOSURE > div{
		grid-template-columns : auto;
		margin-bottom : 2.5rem;
	}
	#CATEGORY-EXPOSURE > div > .TITLE{
		display : flex;
		flex-direction : column;
		gap : .5rem;
		padding : 0 1rem;
	}
	#CATEGORY-EXPOSURE > div > .TITLE > h3 > br{ display : none; }
	#CATEGORY-EXPOSURE > div > .TITLE > .TAGS{
		display : flex;
		justify-content : flex-start;
		flex-direction : row;
		flex-wrap : wrap;
		gap : .25rem;
	}
	#CATEGORY-EXPOSURE > div > .TITLE > .TAGS > a{ font-size : .815rem; }
	#CATEGORY-EXPOSURE > div > .GOODS{ grid-template-columns : repeat( 4, 1fr ); }

	.POPUP{
		position : fixed;
		left : 1rem !important;
		top : 1rem !important;
		right : 1rem !important;
	}
	.POPUP img{
		width : 100% !important;
		height : auto !important;
	}

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

	#DEFAULT-SLIDE{
		max-height : 10rem;
		height : 10rem;
	}
	#DEFAULT-SHORTCUT{ grid-template-columns: repeat( 2, 1fr ); }
	#CATEGORY-EXPOSURE > div > .GOODS{ grid-template-columns : repeat( 2, 1fr ); }

}