/*********** List *************/
.certi_list{display:flex; flex-wrap:wrap; gap:40px 30px;}
.certi_list li{position:relative; width:calc((100% - 120px) / 5); display:flex; flex-direction:column; align-items:center; gap:20px; box-sizing:border-box;}
.certi_list li a{display:flex; align-items:center; justify-content:center; width:100%; padding:40px; box-sizing:border-box; background:var(--grayBg); border:3px solid var(--grayBg); position:relative; overflow:hidden; transition:border-color .3s linear, box-shadow .3s linear;}
.certi_list li:hover a{border-color:var(--main); box-shadow:0 20px 30px rgba(0,0,0,0.1);}
.certi_list li .checkbox{position:absolute; left:10px; top:10px; z-index:2;}
.certi_list li .img{display:block; max-width:214px; aspect-ratio:343 / 494; margin:0 auto; background:var(--white); overflow:hidden; box-shadow:0 20px 30px rgba(0,0,0,0.1); box-sizing:border-box;}
.certi_list li .img img{display:block; width:100%; height:100%; object-fit:contain;}
.certi_list li a::after{content:'\e3b4'; position:absolute; left:50%; top:50%; z-index:2; width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:100px; background:var(--main); color:var(--white); font-family:var(--icon); font-size:24px; font-weight:400; line-height:50px; text-align:center; opacity:0; transform:translateY(20px); transition:opacity .3s linear, transform .3s linear; pointer-events:none;}
.certi_list li:hover a::after{opacity:1; transform:translateY(0);}
.certi_list li .desc{width:100%; text-align:center; box-sizing:border-box;}
.certi_list li .desc h4{font-weight:600; color:#101010; line-height:166.67%; letter-spacing:var(--letter-spacing-default); transition:color .3s linear; word-break:keep-all;}
.certi_list li:hover .desc h4{color:var(--main);}

/* Styles for dialog window */
html.mfp-scroll-lock,
body.mfp-scroll-lock {overflow:hidden; touch-action:none; overscroll-behavior:none;}
.mfp-wrap{overflow:hidden !important; z-index:999999999999999 !important;}
.mfp-bg{z-index:99999999999 !important;}
.white-popup{position:relative; width:90%; max-width:680px; margin:40px auto; overflow:hidden; box-sizing:border-box;}
.white-popup.wid{max-width:680px; margin:0 auto;}
.white-popup .popup-tit-area{display:flex; align-items:center; background:var(--main); height: 86px; box-sizing: border-box; padding: 0 86px 0 0;}
.white-popup h3{padding:0 30px; box-sizing:border-box; color:var(--white); font-size:1.778rem; font-weight:700; line-height:120%; letter-spacing:var(--letter-spacing-heading); word-break:keep-all; width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.white-popup .smcbox{max-height:calc(90vh - 86px); overflow-x:hidden; overflow-y:auto; background:var(--white); box-sizing:border-box;}
.white-popup .smimg{display:flex; align-items:center; justify-content:center; padding:58px 154px; box-sizing:border-box; background:var(--white);}
.white-popup .smimg img{display:block; width:100%; max-width:373px; height:auto !important; box-shadow:0 20px 30px rgba(0,0,0,0.1);}
.white-popup .mfp-close{position:absolute !important; top:0 !important; right:0 !important; width:86px !important; height:86px !important; margin:0 !important; padding:0 !important; opacity:1 !important; background:rgba(255,255,255,0.1) !important; border:0 !important; border-radius:0 !important; font-size:0 !important; line-height:0 !important; color:transparent !important; cursor:pointer;}
.white-popup .mfp-close::before{content:'\e5cd'; display:block; width:36px; height:36px; margin:0 auto; font-family:var(--icon); font-size:36px; font-weight:400; line-height:36px; color:var(--white); text-align:center;}

/*** Fade-zoom animation for first dialog */
.my-mfp-zoom-in .zoom-anim-dialog{opacity:0; transition:all 0.2s ease-in-out; transform:scale(0.8);}
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog{opacity:1; transform:scale(1);}
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog{transform:scale(0.8); opacity:0;}
.my-mfp-zoom-in.mfp-bg{opacity:0; transition:opacity 0.3s ease-out;}
.my-mfp-zoom-in.mfp-ready.mfp-bg{opacity:0.8;}
.my-mfp-zoom-in.mfp-removing.mfp-bg{opacity:0;}

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

/* CERTI — LIST */
.certi_list li{width:calc((100% - 90px) / 4);}

}

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

/* CERTI — LIST */
.certi_list{gap:30px 20px;}
.certi_list li{width:calc((100% - 60px) / 4);}
.certi_list li a{padding:30px;}

}

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

/* CERTI — LIST */
.certi_list li{width:calc((100% - 20px) / 2); gap:15px;}
.certi_list li a{padding:30px;}
.certi_list li a::after{width:40px; height:40px; margin:-20px 0 0 -20px; font-size:20px; line-height:40px;}

/* CERTI — POPUP */
.white-popup .smimg{padding:40px 60px;}
.white-popup .smimg img{max-width:320px;}

}

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

/* CERTI — LIST */
.certi_list{gap:20px 10px;}
.certi_list li{width:calc((100% - 10px) / 2); gap:12px;}
.certi_list li a{padding:20px 10px;}
.certi_list li .img{max-width:140px;}
.certi_list li a::after{width:36px; height:36px; margin:-18px 0 0 -18px; font-size:18px; line-height:36px;}

/* CERTI — POPUP */
.white-popup .popup-tit-area{height:70px; padding:0 70px 0 0;}
.white-popup h3{padding:0 20px; font-size:1.333rem;}
.white-popup .smimg{padding:20px 30px;}
.white-popup .smimg img{max-width:280px;}
.white-popup .mfp-close{width:70px !important; height:70px !important;}
.white-popup .mfp-close::before{width:28px; height:28px; font-size:28px; line-height:28px;}

}