/*********** List *************/
/* CERTI - LIST */
.certi_list {display:grid; grid-template-columns:repeat(3, 1fr); gap:50px 30px; width:100%; max-width: 1530px;}
.certi_list .checkbox {display:inline-block; position:absolute; left:10px; top:10px; z-index:3;}
.certi_list dl {position:relative; background:var(--white);}
.certi_list dl > a {display:flex; flex-direction:column; align-items:stretch; gap:20px; position:relative; width:100%; box-sizing:border-box;}
.certi_list dl dt .img {display:flex; align-items:flex-end; justify-content:center; width:100%; aspect-ratio:360 / 270; overflow:hidden; border-radius:var(--borderR20); background:var(--grayBg); box-sizing:border-box; position:relative;}
.certi_list dl dt .img_bg {display:block; width:100%; height:100%; position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); background:url('/twcenter/bbs/skin/certiBasic/image/certificates-bg.jpg') center center / cover no-repeat; pointer-events:none;}
.certi_list dl dt .img_in {position:relative; z-index:1; aspect-ratio: 226/320; width: 45%; max-width: 226px; margin: 0 auto; border-radius: var(--borderR15) var(--borderR15) 0 0; overflow: hidden; box-shadow: 0 8px 20px rgba(17,17,17,0.12);}
.certi_list dl dt .img_in img {display:block; width:100%; height:100%; object-fit:contain; object-position:center bottom;  transition:transform .4s ease;}
.certi_list dl dd.tbox {display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center;}
.certi_list dl dd .cate {width:100%; font-weight:500; color:var(--light); line-height: 150%;}
.certi_list dl dd h4 {width:100%; font-weight:500; color:var(--black); word-break:keep-all; transition:color .3s; text-wrap: balance;}
.certi_list dl:hover dt .img_in img {transform:scale(1.03);}
.certi_list dl:hover dd h4 {color:var(--main);}

/* CERTI - POPUP */
.popup_bg {width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); z-index:999999; opacity:0; visibility:hidden; transition:all 0.3s linear;}
.popup {width:100%; height:100%; position:fixed; top:0; left:0; z-index:9999999; 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:auto;}
.popup .popup_in {max-width:540px; width:90%; border-radius: var(--borderR15); overflow: hidden;}
.popup .popup_h {padding:20px 70px 20px 30px; background:var(--main); position:relative; box-sizing:border-box;}
.popup .popup_h h4 {color:var(--white); line-height:150%;}
.popup .popup_h .close {cursor:pointer; display:block; position:absolute; right:20px; top:50%; transform:translateY(-50%);}
.popup .popup_h .close::before {content:'\e5cd'; font-size:30px; line-height:1; display:block; font-family:var(--icon); color:var(--white); font-weight:400;}
.popup .popup_img {box-sizing:border-box; padding:20px; overflow:hidden; background:var(--white);}
.popup .popup_img img {width:100%; height:auto;}
.popup_bg.active {opacity:1; visibility:visible;}

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

/* CERTI - LIST */
.certi_list {gap:40px 24px;}

}

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

/* CERTI - LIST */
.certi_list {gap:36px 20px;}

}

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

/* CERTI - LIST */
.certi_list {grid-template-columns:repeat(2, 1fr); gap:30px 20px;}
.certi_list dl > a {gap:16px;}

}

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

/* CERTI - LIST */
.certi_list {grid-template-columns:1fr; gap:24px;}
.certi_list dl > a {gap:14px;}
.certi_list dl dt .img {border-radius: var(--borderR15);}
.certi_list dl dt .img_in{border-radius: var(--borderR10) var(--borderR10) 0 0;}
.certi_list dl dd.tbox {gap:4px;}
.popup .popup_in {border-radius: var(--borderR10);}
.popup .popup_h {padding:16px 56px 16px 20px;}
.popup .popup_h h4 {font-size:1rem;}
.popup .popup_h .close {right:14px;}
.popup .popup_h .close::before {font-size:26px;}
.popup .popup_img {padding:16px;}

}