@charset "utf-8";
/**
 * @author https://www.cosmosfarm.com
 */


/* custom */
#kboard-products-list .pdList{padding:0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 2%;}
#kboard-products-list .pdList p{padding-bottom: 0;;}
#kboard-products-list .pdList li::marker{font-size: 0; position: absolute;}
#kboard-products-list .pdList li > a{display: block;}
#kboard-products-list .pdList li .imgBox{position: relative; background: #F8F8FA; border-radius: 10px; text-align: center; padding: 10px 0; box-sizing: border-box; border: 2px solid #F8F8FA; transition: .3s ease-out;}
#kboard-products-list .pdList li > a:hover .imgBox{ border: 2px solid #07182F; }

#kboard-products-list .pdList li .textBox{text-align: center; color: #07182F;}
#kboard-products-list .pdList li .textBox .prodTitle{font-size: clamp(15px, 1.8vw, 20px); font-weight: 500;margin: 20px 0 10px 0; font-family: "MaruBuri", Pretendard; line-height: 1.5;}
#kboard-products-list .pdList.pdList-en li .textBox .prodTitle{
	margin: 20px 0 5px 0;
}
#kboard-products-list .pdList li .textBox .prodInfo{font-weight: 600;}

#kboard-products-list .pdList .popContents{
	max-width: 1436px; width: 90%; position: fixed; left: 50%; top: 55%; transform: translate(-50%, -50%); z-index: 3; background: #fff; border-radius: 20px; padding: 40px;
	display: flex; gap: 40px; color: #111111; line-height: 1.3; display: none; z-index: 50;
}
#kboard-products-list .pdList .popContents .popImgBox{background: #F8F8FA; border-radius: 20px; width: 40%; max-width: 528px; display: flex; align-items: center; justify-content: center;}
#kboard-products-list .pdList .popContents .popImgBox img{
	width: 100%;
}
/* #kboard-products-list .pdList .popContents .popImgBox img{filter:drop-shadow(0 0 6px rgba(0,0,0,.2));} */
#kboard-products-list .pdList .popContents .popTxtBox{flex: 1; display: flex; flex-direction: column;}
#kboard-products-list .pdList .popContents .ptitle{font-size: 30px; font-family: "MaruBuri", Pretendard; margin-bottom: 10px;}
#kboard-products-list .pdList .popContents .psub{ font-size: 16px;}
#kboard-products-list .pdList .popContents .popTxtBox .popCon{
	border-top: 1px solid #BCBCC4; border-bottom: 1px solid #BCBCC4;
	padding: 20px 0; margin: 30px 0 0; max-height: 400px; overflow-y: auto;
}
#kboard-products-list .pdList.pdList-en .popContents .popTxtBox ul{
	width: 90%; padding: 0; max-width: 90%;
}
#kboard-products-list .pdList .popContents .popTxtBox ul li:not(:last-child){
	margin-bottom: 16px;
}
#kboard-products-list .pdList .popContents .popTxtBox ul li .listName{
	font-size: 16px; font-weight: 500; background: #07182F; border-radius: 18px;
	padding: 5px 10px; margin-bottom: 8px; display: inline-block; color: #fff;
}
#kboard-products-list .pdList .popContents .popTxtBox .bottomText{
	font-size: 18px; text-align: center; padding: 29px 10px; background: #F8F8FA;
	border-radius: 10px; margin-top: 20px;
}

#kboard-products-list .pdList .popContents .closePop{cursor: pointer; display: block; width: 26px; height: 26px; position: absolute; right: 0; top: -35px;}
#kboard-products-list .pdList .popContents .closePop::before{
	content:""; display: block; width: 100%; height: 2px; background: #fff;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg);
}
#kboard-products-list .pdList .popContents .closePop::after{
	content:""; display: block; width: 100%; height: 2px; background: #fff;
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-45deg);
}

#kboard-products-list .popBack{width:100vw; height: 100vh; background: rgba(0,0,0,.4); position: fixed; left: 0; top: 0; z-index: 2; display: none;}

#kboard-products-list .pdList .list-control a{border: 1px solid #000; padding: 2px;}

@media screen and (max-width:1500px){
	#kboard-products-list .pdList .popContents{
		flex-direction: column; gap: 10px; padding: 20px;
	}
	#kboard-products-list .pdList .popContents .popImgBox{
		max-width: 100%; width: 100%; height: 180px;
	}
	#kboard-products-list .pdList .popContents .popImgBox img{
		width: 100%; height: 100%; object-fit: contain;
	}
	#kboard-products-list .pdList .popContents .ptitle{
		font-size: 20px;
	}
	#kboard-products-list .pdList .popContents .popTxtBox .popCon{
		margin: 10px 0 0px; max-height: 200px; height: 200px; flex: auto;
		padding:10px 0;
	}
	#kboard-products-list .pdList .popContents .popTxtBox ul{
		width: 100%; max-width: 100%;
	}
	#kboard-products-list .pdList .popContents .popTxtBox .bottomText{
		padding: 10px; font-size: 16px; margin-top: 10px;
	}
}

@media screen and (max-width:1024px){
	#kboard-products-list .pdList{
		grid-template-columns: repeat(2, 1fr); gap: 30px 2%;
	}
	#kboard-products-list .pdList li .textBox .prodTitle{
		margin: 15px 0 0;
	}
	#kboard-products-list .pdList li .textBox .prodInfo{
		font-size: 15px;
	}
}

@media screen and (max-width:768px){
	#kboard-products-list .pdList .popContents .ptitle{font-size: 18px;}
	#kboard-products-list .pdList .popContents .popTxtBox .popCon{ max-height: 130px;height: 130px;}
	#kboard-products-list .pdList .popContents .popTxtBox ul li .listName,
	#kboard-products-list .pdList .popContents .popTxtBox ul .listValue,
	#kboard-products-list .pdList .popContents .popTxtBox .bottomText{font-size: 14px; line-height: 1.5;}
}

@media screen and (max-width: 600px) {
	#kboard-products-list .pdList li .textBox .prodTitle{margin: 10px 0 0;}
	#kboard-products-list .pdList li .textBox .prodInfo{
		font-size: 13px;
	}
	#kboard-products-list .pdList .popContents .popImgBox{
		border-radius: 12px;
	}
}