@charset "utf-8";

.facility .padding20 {display: block; padding: 20px 0;}

.facility .textWrap {text-align: center; margin-bottom: 70px;}
.facility .textWrap h3 {position: relative; font-size: var(--fs30); line-height: 1.3; padding-top: 30px; margin-bottom: 20px;}
.facility .textWrap h3 p {font-weight: 400;}
.facility .textWrap h3:before {position: absolute; left: 50%; top: 0;  transform: translate(-50%, -50%); content: ""; width:75px; height: 3px; background: var(--black); opacity: 15%;}

.facility .floor {display: inline-block; font-size: var(--fs22); margin-bottom: 20px; color: var(--base3); border: 2px solid var(--base3); border-radius: 100px; padding:8px 20px;}

.patent-list {display:grid; grid-template-columns:repeat(5,1fr); gap:15px; }
.patent-list .img {position: relative; height:190px; border-radius: 20px; overflow: hidden;}
.patent-list .patent-item {justify-content: space-between; align-items: center; overflow: hidden;}
.patent-list .patent-item p {text-align: center; margin-top: 10px;}

.patent-list .patent-item .img::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 .img:hover::before {opacity:1;}

.patent-list .patent-item .img::after {content:""; position:absolute; top:50%; left:50%; width:50px; height:50px; background:#F3F3F3 url(/images/facility/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 .img:hover::after {opacity:1; transform:translate(-50%,-50%) scale(1);}


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

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

}


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

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

}


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

    .facility .textWrap {margin-bottom: 30px;}

}


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

    .facility .textWrap h3 {margin-bottom: 5px;}
    .patent-list {gap: 10px;}
    .patent-list .img {height: 110px; border-radius: 10px;}
    .patent-list .patent-item p {margin-top: 5px;}

}