/*********** List *************/
.certi_list {display:grid; grid-template-columns:repeat(5, 1fr); grid-gap:30px; max-width: 1590px;}
.certi_list .checkbox{display:inline-block; position:absolute; left:5px; top:5px; z-index:2;}
.certi_list dl {background:var(--white); position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;}
.certi_list dl > a, .certi_list dl .certi_open {position:relative; display:flex; flex-direction:column; align-items:center; gap:15px; box-sizing:border-box; width:100%; padding:0; border:0; background:transparent; cursor:pointer; text-align:center; font-family:inherit;}
.certi_list dl dd.tbox {width:100%; margin:0; padding:0;}
.certi_list dl .img {aspect-ratio:294/403; overflow:hidden; position:relative; width:100%; background:var(--white); border:1px solid var(--border); box-sizing:border-box; transition:border-color .3s ease, box-shadow .3s ease;}
.certi_list dl .img img {display:block; width:100%; height:100%; object-fit:contain; transform:translateZ(0); transition:transform .3s ease;}
.certi_list dl dd h4, .certi_list dl dd .certi_tit {color:var(--black); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%; transition:color .3s ease;}
.certi_list dl > a:hover .img, .certi_list dl .certi_open:hover .img {border-color:var(--main); box-shadow:0 8px 24px rgba(29,32,136,0.12);}
.certi_list dl > a:hover .img img, .certi_list dl .certi_open:hover .img img {transform:translateZ(0) scale(1.03);}
.certi_list dl > a:hover h4, .certi_list dl > a:hover .certi_tit, .certi_list dl .certi_open:hover .certi_tit {color:var(--main);}

.popup_bg {width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); z-index:10000002; opacity:0; visibility:hidden; pointer-events:none; transition:all 0.3s linear;}
.popup {width:100%; height:100%; position:fixed; top:0; left:0; z-index:10000003; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; opacity:0; visibility:hidden; pointer-events:none; transition:all .3s ease; flex-direction:column;}
.popup.active {opacity:1; visibility:visible; pointer-events:none; transition:all .3s ease;}
.popup .popup_in {max-width:680px; width:90%; background:var(--white); pointer-events:auto;}
.popup .popup_h {padding:25px 73px 25px 30px; background:var(--main); position:relative; box-sizing:border-box;}
.popup .popup_h h4 {color:var(--white); font-weight:700; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.popup .popup_h .close {cursor:pointer; display:flex; align-items:center; justify-content:center; position:absolute; right:25px; top:50%; transform:translateY(-50%); width:38px; height:38px; border:0; padding:0; background:var(--main);}
.popup .popup_h .close::before {content:'\e5cd'; font-size:38px; line-height:100%; display:block; font-family:var(--icon); color:var(--white); font-weight:400;}
.popup .popup_img {box-sizing:border-box; padding:40px; overflow:hidden; background:var(--white); display:flex; justify-content:center; align-items:center;}
.popup .popup_img img {display:block; max-width:402px; width:100%; height:auto; object-fit:contain;}
.popup_bg.active {opacity:1; visibility:visible; pointer-events:auto;}




/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){



}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){

.certi_list {grid-template-columns:repeat(4, 1fr); grid-gap:30px 20px;}

}
/*******************************************************************************
    @media  ~980px
*******************************************************************************/
@media all and (max-width:980px){

.certi_list {grid-template-columns:repeat(2, 1fr); grid-gap:15px 10px;}
.certi_list dl > a, .certi_list dl .certi_open {gap:10px;}
.popup .popup_h {padding:20px 63px 20px 20px;}
.popup .popup_h .close {right:20px; width:32px; height:32px;}
.popup .popup_h .close::before {font-size:32px;}
.popup .popup_img {padding:30px 20px;}

}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

.certi_list {grid-gap:20px 10px;}
.popup .popup_h {padding:18px 55px 18px 16px;}
.popup .popup_h .close {right:16px; width:28px; height:28px;}
.popup .popup_h .close::before {font-size:28px;}
.popup .popup_img {padding:20px 16px;}

}