.prd-wrap{
	position:relative;
	width:100%;
	margin-top:40px;
}

.prd-wrap ul{
	list-style-type: none;
	padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* 요소들이 넘치면 다음 줄로 넘어감 */
}

.prd-wrap li{
	width:278px;
    border: 2px solid #d4d4d4;
	box-sizing:border-box;
	position:relative;
	z-index:2;
	margin:10px 20px;
	padding:2px;
	transition: border-color 0.3s ease;
}

.prd-wrap li:first-child{
	margin-left:0;
}

.prd-wrap li:last-child{
	margin-right:0;
}

.prd-wrap li:hover{
	border-color:#0db86e;
	z-index:99;
}

.prd-wrap .prd-item-wrap{
	width:100%;
	height:278px;
	background-size:150%;
	background-position:center center;
	background-repeat:no-repeat;
	transition: background-size 0.3s ease;
}

.prd-wrap .prd-item-wrap img{
	width:100%;
}

.prd-wrap .prd-item-name{
	font-size:25px;
	font-weight:500;
	color:#221815;
	text-align:center;
	padding:25px 0 15px 0;
}

.prd-wrap .prd-item-view{
	text-align:center;
	margin-bottom:40px;
}

.prd-wrap .prd-item-btn{
	display:inline-block;
	font-size:13px;
	font-family:'맑은 고딕', sans-serif;
	color:#0db86e;
	border:2px solid #0db86e;
	border-radius:20px;
	padding:5px 10px;
	transition: background-color 0.3s ease, color 0.3s ease;
	font-weight:bold;
}

.prd-wrap a{
	display:block;
	cursor:pointer;
}

.prd-wrap a:hover .prd-item-wrap{
    background-size:160%;
}

.prd-wrap a:hover .prd-item-btn{
	background-color:#0db86e;
	color:#fff;
}

/* Product View */
.sub-prd-slide-wrap{
	width:100%;
	margin-top:40px;
}

.sub-prd-slide-wrap .sub-prd-slide{
	width:1280px;
	margin:0 auto;
	position:relative;
}

.sub-prd-slide-wrap .sub-prd-slide-btn-wrap{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 50px;
}

.sub-prd-slide-btn-wrap .sub-prd-slide-btn{
	width:45px;
	height: 100%;
}

.sub-prd-slide-btn-wrap .sub-prd-slide-cate{
	flex-grow: 1;
	height: 100%;
	width:100%;
	overflow:hidden;
	position:relative;
	z-index:3;
}

.sub-prd-slide-btn-wrap .sub-prd-slide-cate ul{
	list-style-type: none;
	padding: 0;
    margin: 0;
	display: flex; /* li 요소들을 수평으로 정렬하기 위해 flex 속성 사용 */
    align-items: center; /* 수직 가운데 정렬 */
    height: 100%; /* 부모 요소의 높이에 맞게 설정 */
	position:absolute;
	z-index:2;
	top:0;
	left:0;
}

.sub-prd-slide-btn-wrap .sub-prd-slide-cate li{
	display:inline-block;
	text-align: center;
    font-size: 22px;
	font-weight: 400;
	white-space: nowrap;
	padding:0 25px;
	cursor:pointer;
	transition: color 0.3s ease;
	font-weight:normal;
}

.sub-prd-slide-btn-wrap .sub-prd-slide-cate li:hover,
.sub-prd-slide-btn-wrap .sub-prd-slide-cate li.active{
	color:#1fb96d;
	font-weight:bold;
	padding:0 21px;
}

.sub-prd-slide-wrap .sub-prd-item-wrap{
	width:100%;
	margin-top:10px;
}

.sub-prd-slide-wrap .sub-prd-item{
	width:1280px;
	margin:0 auto;
	height:390px;
	position:relative;
}

.sub-prd-slide-wrap .sub-prd-item .info{
	position:absolute;
	z-index:2;
	top:20px;
	left:960px;
	width:320px;
}

.sub-prd-slide-wrap .sub-prd-item .info .info-content{
	text-align:left;
	padding:0 0 0 30px;
}

.sub-prd-slide-wrap .sub-prd-item .info .info-content h1{
	font-size:30px;
	font-weight:bold;
	margin-bottom:20px;
}

.sub-prd-slide-wrap .sub-prd-item .info .info-content h2{
	font-size:18px;
	font-weight:normal;
}

.custom-space {
	display:inline-block;
	margin-right: 10px;
}

.sub-prd-slide-wrap .sub-prd-item .info .info-content a{
	width:150px;
	padding:5px 0px;
	border:2px solid #1db86b;
	font-family:'Noto Sans KR', dotum, sans-serif;
	border-radius:25px;
	text-align:center;
	color:#1db86b;
	font-size:15px;
	cursor:pointer;
	display:inline-block;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.sub-prd-slide-wrap .sub-prd-item .info .info-content a:hover{
	background-color:#1db86b;
	color:#fff;
}

.sub-prd-item-obj{
	position:absolute;
	top:0;
	left:0;
}
.sub-prd-prev-btn,
.sub-prd-next-btn{
	display:flex;
	height:100%;
	text-align:center;
	cursor:pointer;
	align-items: center;
	justify-content: center;
	font-size:60px;
	color:#ccc;
	transition: color 0.1s ease, font-size 0.1s ease;
	padding-top:2px;
}

.sub-prd-prev-btn:hover,
.sub-prd-next-btn:hover{
	color:#89d8b3;
	font-size:80px;
}

.sub-prd-prev-btn img,
.sub-prd-next-btn img{
	margin-top:1px;
}

.sub-prd-dots{
	padding:10px 0;
	text-align:center;
}

.sub-prd-dots button{
	cursor:pointer;
	margin:0 2px;
	background: none;
    border: none;
    outline: none;
}

.sub-prd-dots .sub-prd-dot{
	width:10px;
	height:10px;
	border-radius:5px;
	background-color:#efefef;
}

.sub-prd-dots .sub-prd-dot.active{
	width: 60px;
	background-color: #1db86b;
}