@charset "utf-8";

.certification .btnWrap {max-width:600px; margin:0 auto;}

.patent-list {display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.patent-list .img {height:425px;}
.patent-list .patent-item {position:relative; display: flex; gap:10px; flex-direction: column; border:1px solid #ddd; padding:20px; justify-content: space-between; align-items: center;}

.patent-list .patent-item:hover {border:1px solid #000;}

.patent-list .patent-item::before {content:""; position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(255,255,255,0.10); backdrop-filter:blur(5px); opacity:0; transition:opacity .4s ease;}
.patent-list .patent-item:hover::before {opacity:1;}
.patent-list .patent-item::after {content:""; position:absolute; top:50%; left:50%; width:50px; height:50px; background:var(--base1) url(/images/certification/i-more.svg) no-repeat center; border-radius:100px; transform:translate(-50%,-50%) scale(.5); opacity:0; transition:opacity .4s ease, transform .4s ease;}
.patent-list .patent-item:hover::after {opacity:1; transform:translate(-50%,-50%) scale(1);}


.patent-list .patent-item .tit {text-align:center;}


/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {

	.patent-list {grid-template-columns: repeat(2, 1fr);}

}



/* ************************ 모바일 (~767) ************************ */
@media screen and (max-width:767px) { 

.patent-list .img {height:195px;}



}


/* ************************ 모바일 (~500) ************************ */
@media screen and (max-width:500px) {
	
	.patent-list .img {width:100%; height:auto;}
	.patent-list {grid-template-columns: repeat(2, 1fr); gap:5px;}
	.patent-list .patent-item {padding:10px; justify-content: flex-start;}
	.patent-list .img {aspect-ratio: 1 / 1;}
	.patent-list .img img {object-fit: contain;}
	.patent-list .patent-item .tit {text-align: center; font-size: 14px; line-height: 1.2;}
	
}