.SUBHEAD{ background-image : url("/images/subtitle-bg-goods.jpg") }

.WRAPPER.GOODS{ margin-bottom : 70px }

.SEARCHFORM{
	margin-bottom : 16px;
	font-size : 0;
	text-align : right;
}
.SEARCHFORM > *{
	height : 32px;
	border : solid 1px #CCC;
	box-sizing : border-box;
	vertical-align : middle;
	font-size : 12px;
}
.SEARCHFORM > select{
	width : 100px;
}
.SEARCHFORM > input{
	width : 160px;
	padding : 0 8px;
	margin-left : 10px;
}
.SEARCHFORM > button{
	padding : 0 12px;
	margin-left : 10px;
	background-color : #2E80B4;
	border : 0;
	border-radius : 3px;
	color : #FFF;
	cursor : pointer;
}

.GOODS-SLIDE{
	position : relative;
	height : 440px;
	margin-bottom : 24px;
	overflow : hidden
}
.GOODS-SLIDE > .SLIDES{
	position : relative;
	height : 440px;
}
.GOODS-SLIDE > .SLIDES > div{
	position : absolute;
	top : 0;
	left : 0;
	width : 1100px;
	height : 440px;
	background-repeat : no-repeat;
	background-position : center;
	background-size : cover;
	font-size : 0;
}
.GOODS-SLIDE > .BULLETS{
	position : absolute;
	right : 0;
	bottom : 0;
	padding : 20px;
	text-align : right;
	font-size : 0;
}
.GOODS-SLIDE > .BULLETS > i{
	display : block;
	width : 12px;
	height : 12px;
	margin-top : 6px;
	background-color : #999;
	border-radius : 6px;
}
.GOODS-SLIDE > .BULLETS > i.ON{
	background-color : #000
}

.SUB-CATEGORIES > ul{
	width : 1100px;
	max-height : 0;
	padding : 0;
	margin : 0 auto;
	text-align : left;
	font-size : 0;
	overflow : hidden;
	transition : max-height .3s .3s ease-in-out
}
.SUB-CATEGORIES > ul.ON{
	max-height : 120px
}
.SUB-CATEGORIES > ul > li{
	display : inline-block;
	width : 272px;
	height : 36px;
	margin : 0 4px 4px 0;
	border : solid 1px #DDD;
	font : normal 12px/36px MalgunGothic;
	color : #888;
	cursor : pointer;
	list-style : none;
	text-align : center;
	box-sizing : border-box;
	transition :
		border-color .4s ease-in-out,
		background-color .4s ease-in-out;
}
.SUB-CATEGORIES > ul > li:nth-child(4n+4){
	margin-right : 0;
}
.SUB-CATEGORIES > ul > li > a{
	display : block;
}
.SUB-CATEGORIES > ul > li.ON{
	border-color : #69C;
	background-color : #69C;
	color : #FFF !important
}
.SUB-CATEGORIES > ul > li:hover{
	border-color : #69C;
	background-color : #69C;
	color : #FFF !important
}

.SEARCH-RESULT{
	padding : 48px 0 24px 0
}
.SEARCH-RESULT > ul{
	padding : 0;
	margin : 0;
	font-size : 0;
}
.SEARCH-RESULT > ul > li{
	position : relative;
	display : inline-block;
	width : 272px;
	height : 272px;
	padding : 16px;
	margin : 0 4px 4px 0;
	background-size : 90%;
	background-position : center;
	background-repeat : no-repeat;
	border : solid 1px #DDD;
	list-style : none;
	vertical-align : top;
	box-sizing : border-box;
}
.SEARCH-RESULT > ul > li:nth-child(4n+4){
	margin-right : 0;
}

.SEARCH-RESULT > ul > li > div{
	position : absolute;
	top : 0;
	right : 0;
	bottom : 0;
	left : 0;
	display : flex;
	align-content : center;
	flex-wrap : wrap;
	padding : 24px;
	background-color :rgba(44,66,88,.9);
	border-radius : 133px;
	font : normal 14px/normal MalgunGothic;
	color : #FFF;
	opacity : 0;
	transition :
		opacity .3s ease-in-out,
		border-radius .3s ease-in-out
}
.SEARCH-RESULT > ul > li > div > p{
	width : 100%;
	padding : 0;
	margin : 0;
	text-align : center;
	font-family : 'Noto Sans KR', sans-serif, 'MalgunGothic'
}
.SEARCH-RESULT > ul > li > div > p.G-NAME{
	font-size : 20px
}
.SEARCH-RESULT > ul > li > div > p.G-CAPTION{
	margin : 16px 24px 0 24px;
	color : #DEF;
	word-break : keep-all
}
.SEARCH-RESULT > ul > li:hover > div{
	cursor : pointer;
	opacity : 1;
	border-radius : 0
}

.SEARCH-RESULT > ul > li.NORECORD{
	grid-column : 1 / 5;
	width : 100%;
	padding : 70px 0;
	text-align : center;
	border : 0;
	font : normal 16px/normal MalgunGothic;
	color : #999
}




.V-GOODS{
	width : 980px
}

.V-GOODS > h2.V-GOODS-NAME{
	padding : 0;
	margin : 0 0 12px 0;
	font : normal 32px/normal 'Noto Sans KR',sans-serif;
	text-align : center
}
.V-GOODS > p.V-GOODS-CAPTION{
	padding : 0;
	margin : 0 0 32px 0;
	font : normal 16px/normal 'Noto Sans KR',sans-serif;
	text-align : center;
	color : #333
}

.V-THUMBNAIL{
	float : left;
	width : 398px;
	height : 398px;
	margin : 0 30px 30px 0;
	line-height : 398px;
	text-align : center;
	font-size : 0;
	border : solid 1px #DDD;
}
.V-THUMBNAIL > img{
	max-width : 100%;
	max-height : 100%;
	vertical-align : middle
}

.V-GOODSINFO{
	float : right;
	width : 550px;
	margin : 0 0 30px 0;
}
.V-GOODSINFO > dl{
	width : 500px;
	height : auto;
	padding : 10px 25px;
	background-color : #F9F9F9;
	border-top : solid 2px #06C;
	font-size : 0;
}
.V-GOODSINFO > dl > dt{
	float : left;
	width : 150px;
	height : 50px;
	padding : 0;
	margin : 0;
	border-top : solid 1px #DDD;
	color : #333;
	font : normal 14px/50px 'Noto Sans KR', sans-serif, 'MalgunGothic';
	vertical-align : middle
}
.V-GOODSINFO > dl > dd{
	display : inline-block;
	width : 350px;
	padding : 12px 0;
	margin : 0;
	border-top : solid 1px #DDD;
	color : #555;
	font : normal 14px/26px 'Noto Sans KR', sans-serif, 'MalgunGothic';
	vertical-align : middle;
	word-break : break-all
}
.V-GOODSINFO > dl > dt:first-of-type{
	border-top : 0
}
.V-GOODSINFO > dl > dd:first-of-type{
	border-top : 0
}

.V-GOODSINFO > dl > dd > a.SIZETYPE{
	display : inline-block;
	padding : 3px 7px;
	margin : 0 4px 4px 0;
	background-color : #FFF;
	border : solid 1px #DDD;
	font : normal 14px/normal 'Noto Sans KR', sans-serif, 'MalgunGothic';
	cursor : pointer
}
.V-GOODSINFO > dl > dd > a.ON{
	background-color : #09C;
	border-color : #09C;
	color : #FFF;
}

.V-GOODSINFO > .TYPES{
	margin-top : 20px;
	font-size : 0;
}
.V-GOODSINFO > .TYPES > a{
	display : inline-block;
	padding : 6px 10px;
	margin : 0 4px 4px 0;
	border : solid 1px #DDD;
	font : normal 14px/normal 'Noto Sans KR', sans-serif, 'MalgunGothic';
	color : #999
}
.V-GOODSINFO > .TYPES > a.ON{
	background-color : #09C;
	color : #FFF;
	border-color : #09C
}

.V-GOODSINFO > .BUTTONS{
	margin-top : 12px;
	text-align : right;
	font-size : 0;
}
.V-GOODSINFO > .BUTTONS > button{
	padding : 8px 10px;
	margin-left : 4px;
	background-color : #2E80B4;
	border : 0;
	border-radius : 3px;
	color : #FFF;
	cursor : pointer;
}

.V-DESCRIBE{
	clear : both
}
.V-DESCRIBE img{
	max-width : 100%
}

.BUTTONS{
	display : flex;
	justify-content : center;
	gap : 1rem;
}
.BUTTONS > button{
	padding : .5rem 1rem;
	margin : 0;
	background-color : #2E80B4;
	border : 0;
	border-radius : .15rem;
	color : #FFF;
	cursor : pointer;
}

.REGIST-FORM{
	display : flex;
	flex-direction : column;
	gap : .25rem;
	width : 960px;
}
.REGIST-FORM > div:not(.BLOCK){
	display : flex;
	gap : .25rem;
}
.REGIST-FORM > div > input{
	height : 2rem;
	padding : 0 .75rem;
	border : solid 1px #CCC;
	border-radius : .15rem;
	box-sizing : border-box;
}
.REGIST-FORM > div > button{
	height : 2rem;
	padding : 0 .75rem;
	border : solid 1px #CCC;
	border-radius : .15rem;
	box-sizing : border-box;
	font-size : .75rem;
}

.REGIST-FORM > div > input#GL-SUBJECT{ width : 100%; }
.REGIST-FORM > div > input#GL-THUMBNAIL{ width : 20rem; }

.GL-VIEW > #GL-SUBJECT{
	padding : 1rem 0;
	margin : 0;
	text-align : center;
}
.GL-VIEW > #GL-CONTENT{
	padding : 2rem;
	border : solid 1px #CCC;
}
.GL-VIEW > #GL-CONTENT img{ max-width : 100%; }

@media ( max-width : 571px ){
	.SUB-CATEGORIES > ul {
		width: 100%;
		text-align:left;
	}
	.SUB-CATEGORIES > ul > li{
		width:48%;
		margin: 0 2px 2px 2px;
	}
	
	.SUB-CATEGORIES > ul > li:nth-child(4n+4){
		margin: 0 2px 2px 2px;
	}
	
	.GOODS-SLIDE{height:13rem; display:none;}
	.GOODS-SLIDE > .SLIDES {
		position: relative;
		height: 12rem;
	}
	
	.GOODS-SLIDE > .SLIDES > div{
		width : 90%;
		height :12rem;
		left:50%;
		margin-left:-45%;
		background-position:center;
		background-size:contain;
	}
	.SEARCH-RESULT > ul {text-align:left;}
	.SEARCH-RESULT > ul > li {
		width:48%;
		margin: 0 2px 4px 4px;
	     height: 12rem;	
	}
	
	.SEARCH-RESULT > ul > li > div {
	    padding: 1rem;	
	}
	
	.V-GOODS {
		width: 95%;
	}
	.V-GOODS > h2.V-GOODS-NAME {
		margin: 0 0 0.5rem 0;
    	font: normal 1.2rem/normal 'Noto Sans KR',sans-serif;
	}
	
	.V-GOODS > p.V-GOODS-CAPTION {
		margin: 0 0 1.5rem 0;
    	font: normal 0.9rem/normal 'Noto Sans KR',sans-serif;
	}
	
	.V-THUMBNAIL {
		float:none;
		display:block; 
		width:50%;
		height:11rem;
		margin:0 auto 0.5rem
	}
	.V-THUMBNAIL > img {
		vertical-align:top;
	}
	
	.V-GOODSINFO {
		float: none;
		display:block;
		overflow:hidden;
		width: 80%;
		margin: 0 auto 1rem ;
	}
	.V-GOODSINFO > dl {
    	width: 100%;;
	}
	
	.V-GOODSINFO > dl > dt {
		width:32%;
		height:5rem;
		font: normal 0.8rem/5rem 'Noto Sans KR', sans-serif, 'MalgunGothic';
	}
	.V-GOODSINFO > dl > dd {
		width:65%;
		height:5rem;
		font: normal 0.8rem/5rem 'Noto Sans KR', sans-serif, 'MalgunGothic';
	}
	
	.V-GOODSINFO > dl > dd:nth-child(4) {
		height:auto;
		font: normal 0.8rem/5rem 'Noto Sans KR', sans-serif, 'MalgunGothic';
	}
	
	.V-GOODSINFO > dl > dd > a.SIZETYPE {margin:0 4px 2px 0; }
	
	
	.V-DESCRIBE{
		text-align:center;
	}
	.V-DESCRIBE img{
		max-width : 100%
	}
	
}