@charset "utf-8";
/* 인증·면허 — company/css/certi.css */

.certi-tabs {display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:50px;}
.certi-tabs button {padding:12px 24px; border-radius:50px; background:#fff; border:1.5px solid var(--border1); font-size:var(--fs14); font-weight:600; color:#777; cursor:pointer; transition:all .3s;}
.certi-tabs button:hover {color:var(--c_base1); border-color:var(--c_base1);}
.certi-tabs button.on {background:var(--c_base1); color:#fff; border-color:var(--c_base1);}

.certi-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.certi-item {cursor:pointer; transition:transform .4s, box-shadow .4s, border-color .3s, opacity .35s ease, max-height .45s ease; padding:14px; background:#fff; border:1px solid var(--border1); border-radius:14px; opacity:1; max-height:600px; overflow:hidden;}
.certi-item:hover {transform:translateY(-4px); box-shadow:0 18px 40px rgba(11,46,74,0.1); border-color:var(--c_base1);}
.certi-item.is-hide {display:none; opacity:0; max-height:0; padding:0; margin:0; border-width:0; pointer-events:none; transform:scale(0.95);}

.certi-empty {display:none; margin-top:30px; padding:60px 30px; background:var(--bg1); border-radius:16px; text-align:center; flex-direction:column; align-items:center; gap:14px;}
.certi-empty.on {display:flex;}
.certi-empty svg {width:48px; height:48px; fill:#bbb;}
.certi-empty p {font-size:var(--fs15); color:#888; line-height:1.6;}
.certi-img {aspect-ratio:3/4; overflow:hidden; border-radius:8px; background:var(--bg1);}
.certi-img img {width:100%; height:100%; object-fit:cover; transition:transform .6s;}
.certi-item:hover .certi-img img {transform:scale(1.03);}
.certi-cap {margin-top:14px; font-weight:600; color:#222; text-align:center; line-height:1.5; padding:0 6px 6px;}

.certi-note {margin-top:60px; display:flex; gap:16px; padding:24px 28px; background:rgba(14,111,184,0.06); border-radius:12px; border-left:4px solid var(--c_base1);}
.certi-note svg {flex-shrink:0; width:24px; height:24px; fill:var(--c_base1);}
.certi-note p {font-size:var(--fs14); color:#555; line-height:1.7;}

/* 라이트박스 */
.certi-lightbox {position:fixed; inset:0; background:rgba(11,20,39,0.92); z-index:99999; display:none; align-items:center; justify-content:center; padding:30px;}
.certi-lightbox.on {display:flex; animation:lbFade .25s ease;}
@keyframes lbFade {from {opacity:0;} to {opacity:1;}}
.certi-lightbox-inner {position:relative; max-width:680px; max-height:90vh; display:flex; flex-direction:column; align-items:center;}
.certi-lightbox-inner img {max-width:100%; max-height:80vh; border-radius:12px; box-shadow:0 30px 60px rgba(0,0,0,0.5);}
.certi-lightbox-cap {margin-top:18px; color:#fff; font-size:var(--fs16); font-weight:600;}
.certi-lightbox-close {position:absolute; right:-50px; top:-50px; width:44px; height:44px; border-radius:50%; background:#fff; color:#333; font-size:32px; line-height:44px; text-align:center; cursor:pointer; transition:all .3s;}
.certi-lightbox-close:hover {transform:rotate(90deg); background:var(--c_base1); color:#fff;}

@media screen and (max-width:1199px) {
	.certi-grid {grid-template-columns:repeat(3,1fr);}
	.certi-lightbox-close {right:0; top:-50px;}
}
@media screen and (max-width:767px) {
	.certi-grid {grid-template-columns:repeat(2,1fr); gap:14px;}
	.certi-item {padding:10px;}
	.certi-cap {font-size:var(--fs13);}
}