/*********** List *************/
.certi_list {display: flex; flex-wrap:wrap; gap:30px;}
.certi_list li{position: relative; width: calc((100% - 90px)/4);}
.certi_list li a{display: block; padding: 40px; box-sizing:border-box; border-radius:var(--borderR20); overflow: hidden; background:var(--grayBg); position: relative; box-sizing:border-box; border:3px solid var(--grayBg);}
.certi_list li:hover a{border-color:var(--main); transition:all .3s linear;}
.certi_list li .checkbox{display: inline-block; position:absolute; left:5px; top:5px; z-index: 2;}
.certi_list li .img{display: block; aspect-ratio:1/1.42; max-width:170px; margin: 0 auto; background:var(--white); overflow: hidden; box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.08); border-radius:var(--borderR10);}
.certi_list li .img::after{content:''; display: block; width: 50px; height: 50px; background:url('/twcenter/bbs/skin/certiBasic/image/zoom.png') no-repeat center/contain; position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index: 9; opacity: 0; margin-top: 40px; transition:all .3s;}
.certi_list li:hover .img::after{opacity: 1; margin-top: 0; transition:all .3s linear;}
.certi_list li img{display: block; width:100%; height:100%; object-fit:contain;}
.certi_list li h4{text-align:center; font-weight: 600; color:var(--black); font-size:1rem; letter-spacing: var(--letter-spacing-default); line-height: 140%; padding: 15px 0 0;}
.certi_list li:hover h4{color:var(--main); transition:all .3s linear;}




/* Styles for dialog window */
.mfp-wrap{z-index: 999999999999999 !important;}
.mfp-bg{z-index: 99999999999 !important;}
.white-popup {text-align: left; width: 90%; max-width:470px;margin: 40px auto;position: relative; overflow: hidden; border-radius:var(--borderR20);}
.white-popup.wid {max-width:470px; margin:0 auto; }
.white-popup h3 {background:var(--main); color:var(--white); font-weight:600; font-size: 1.316rem; padding:18px 80px 18px 30px; line-height:140%; letter-spacing: var(--letter-spacing-default);}
.white-popup .smimg {text-align:center; padding:35px 32px;  display:flex; align-items:center; justify-content:center; background:var(--white);}
.white-popup .smimg img {width:100%; max-width:470px; height: auto !important;}

.mfp-close {opacity:1 !important; line-height:1 !important; top:17px !important; right:20px !important; width: 35px !important; height: 35px !important; background:url('/twcenter/bbs/skin/certiBasic/image/close.png') no-repeat center/100% auto !important; font-size:0 !important;}


/*** Fade-zoom animation for first dialog */

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8);}
/* animate in */

.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
	opacity: 1;

	-webkit-transform: scale(1); 
	-moz-transform: scale(1); 
	-ms-transform: scale(1); 
	-o-transform: scale(1); 
	transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
	-webkit-transform: scale(0.8); 
	-moz-transform: scale(0.8); 
	-ms-transform: scale(0.8); 
	-o-transform: scale(0.8); 
	transform: scale(0.8); 

	opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
	opacity: 0;
	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
	opacity: 0;
}



/**
 * Fade-move animation for second dialog
 */

/* at start */
.my-mfp-slide-bottom .zoom-anim-dialog {
	opacity: 0;
	-webkit-transition: all 0.2s ease-out;
	-moz-transition: all 0.2s ease-out;
	-o-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;

	-webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	-o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
	transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

}

/* animate in */
.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
	opacity: 1;
	-webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	-o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
	transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
}

/* animate out */
.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
	opacity: 0;

	-webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	-o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
	transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
}

/* Dark overlay, start state */
.my-mfp-slide-bottom.mfp-bg {
	opacity: 0;

	-webkit-transition: opacity 0.3s ease-out; 
	-moz-transition: opacity 0.3s ease-out; 
	-o-transition: opacity 0.3s ease-out; 
	transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-slide-bottom.mfp-ready.mfp-bg {
	opacity: 0.8;
}
/* animate out */
.my-mfp-slide-bottom.mfp-removing.mfp-bg {
	opacity: 0;
}

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



}

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



/*********** List *************/
.certi_list li{width: calc((100% - 60px)/3);}



}

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

/*********** List *************/
.certi_list {gap:20px;}
.certi_list li{width: calc((100% - 20px)/2);}
.certi_list li a{padding: 30px;}
.certi_list li .img::after{width: 40px; height: 40px;}
.certi_list li h4{padding: 15px 0 0;}
	


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


/*********** List *************/
.certi_list {gap:20px 10px;}
.certi_list li{width: calc((100% - 10px)/2);}
.certi_list li a{padding: 15px 10px; border-radius:var(--borderR10);}
.certi_list li .img{border-radius:var(--borderR5);}	


/* Styles for dialog window */
.white-popup {border-radius:var(--borderR10);}
.white-popup h3 {font-size: 1.053rem; padding:14px 60px 14px 20px;}
.white-popup .smimg {padding: 15px;}
.mfp-close {top:12px !important; right:15px !important; width: 25px !important; height: 25px !important; }


}