/*********** List *************/
.certificate_list{display:flex; flex-wrap:wrap; max-width:1350px;}
.certificate_list .list{position:relative; margin:0 30px 50px 0; width:calc((100% - 90px)/4); text-align:center;}
.certificate_list .list:nth-child(4n){margin-right:0;}
.certificate_list .list .checkbox{display:inline-block; position:absolute; left:5px; top:5px; z-index:2;}
.certificate_list .list .thumb{box-sizing:border-box; cursor:pointer; border:1px solid var(--border); aspect-ratio: 2 / 2.6; position: relative; overflow: hidden;}
.certificate_list .list .thumb a{display: block; position: relative;}
.certificate_list .list .thumb a:before{content:''; display:block; width:100%; height:100%; background: var(--main); mix-blend-mode: multiply; position:absolute; left:0; top:0; z-index: 2; transition:all .3s linear; opacity: 0;}
.certificate_list .list .thumb:hover a:before{opacity: 0.2;}
.certificate_list .list .thumb a:after{content:'\e8ff'; display:block; width:60px; height:60px; line-height: 60px; font-size:25px; text-align:center; color:var(--white); background: var(--main); border-radius:50%; position:absolute; left:50%; top:50%; margin-left: -30px; margin-top:-30px;  z-index: 3; font-family:var(--icon); transition:all .3s linear; opacity: 0;}
.certificate_list .list .thumb:hover a:after{opacity: 1;}
.certificate_list .list .thumb img{display:block; width:100%; height:100%; object-fit:contain;}
.certificate_list .list .desc{padding:30px 0 0;}
.certificate_list .list .desc .fs20{}
.certificate_list .list .desc .detail_btn{margin:15px 0 0;}





/*********** View *************/
.bbs_view{border-top:2px solid var(--main);}
	.bbsView_tit{padding:40px 20px; box-sizing:border-box; position: relative; text-align:left; border-bottom:1px solid var(--border);}
	.bbsView_tit .subject{display:inline-block; vertical-align: middle; font-size:24px;letter-spacing: -0.96px; line-height:130%; font-weight:600; color:var(--black);}
	.bbsView_tit .view_detail{margin:12px 0 0; display:flex; flex-wrap:wrap;}
	.bbsView_tit .view_detail li{font-size:1rem; color:var(--basic); line-height:120%; padding:0 30px 0 0; position:relative;}
	.bbsView_tit .view_detail li:last-child{padding:0;}
	.bbsView_tit .view_detail li:after{content:''; display:block; width:1px; height:12px; background:var(--border); position:absolute; right:15px; top:50%; margin-top:-6px;}
	.bbsView_tit .view_detail li:last-child:after{display:none;}
	.bbsView_tit .view_detail li span{display:inline-block; vertical-align:middle; margin:-2px 5px 0 0; color:var(--black);}
 
	.view_content{padding:30px 20px; box-sizing:border-box;}
	.view_content img{max-width:100%; height:auto !important;}

	.view_file{margin:30px 0 0; padding:22px 24px; box-sizing:border-box; background:var(--grayBg); display:flex;}	
	.view_file .btit{width:170px; font-size:1rem; font-weight: 600; letter-spacing:-0.35pt; line-height: 120%; color:var(--black); box-sizing:border-box; position: relative;}	
	.view_file .btit .file{transform:rotate(90deg); display: inline-block; vertical-align: middle; margin: 0 5px 0 0; font-size:20px;}
	.view_file .bstxt{width:calc(100% - 170px); font-size:1rem; letter-spacing:-0.35pt; line-height: 120%; box-sizing:border-box;}	
	.view_file .bstxt a{display:inline-block; font-size:1rem; letter-spacing:-0.25pt; line-height:130%; color:var(--basic); margin: 5px 0 0;}
	.view_file .bstxt a:first-child{margin: 0;}

	.bbs_bottom{border-top:1px solid var(--border); display:flex;}
	.bbs_bottom.last{border-bottom:1px solid var(--border);}
	.bbs_bottom dt{width:170px; padding:20px; font-size:1rem; font-weight:600; letter-spacing:-0.35pt; line-height: 120%; color:var(--black); box-sizing:border-box; position: relative;}
	.bbs_bottom dt .arrow{color:var(--black); position:absolute; right:0; top:50%; transform:translateY(-50%);}
	.bbs_bottom dd{width:calc(100% - 170px); padding:20px; font-size:1rem; letter-spacing:-0.35pt; line-height: 120%; box-sizing:border-box;}
	.bbs_bottom dd a{text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}





/* Styles for dialog window */
.white-popup {text-align: left; max-width:600px; margin: 40px auto; position: relative; }
.white-popup.wid {max-width:600px; margin:0 auto;  border-radius:var(--borderR15); overflow: hidden;}
.white-popup h1 {background:var(--main); color:#fff; font-weight:700; font-size:1.176rem; padding:19px 50px 17px 20px; line-height:1.3; letter-spacing: -0.35pt;}
.white-popup h1 span {line-height:100%; font-size:15px;}
.white-popup .smimg {text-align:center; padding:20px; aspect-ratio: 2 / 2.6; position: relative; background:var(--white);}
.white-popup .smimg img {display:block; width:100%; height:100%; object-fit:contain;}
.white-popup .infob {text-align:center; padding:0 20px 30px 20px}
.white-popup .etx {font-size:16px; color:#16306d;  line-height:100%; margin-bottom:10px;}
.white-popup .smtit {font-weight:600; line-height:30px; font-size:20px; color:#222;  letter-spacing: -0.8pt; margin-bottom:12px;}

.mfp-close {opacity:1 !important; width:auto !important; height:auto !important; line-height:1 !important; top:16px !important; right:20px !important; }
.mfp-close-btn-in .mfp-close {color:#fff !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 1350px
*******************************************************************************/
@media all and (max-width:1300px){

/*********** List *************/
.certificate_list{}
.certificate_list .list{margin:0 30px 50px 0; width:calc((100% - 60px)/3);}
.certificate_list .list:nth-child(4n){margin-right:30px;}
.certificate_list .list:nth-child(3n){margin-right:0;}

}



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


/*********** List *************/
.certificate_list{}
.certificate_list .list{margin:0 20px 40px 0; width:calc((100% - 40px)/3);}
.certificate_list .list:nth-child(4n){margin-right:20px;}
.certificate_list .list:nth-child(3n){margin-right:0;}
.certificate_list .list .desc{padding:20px 0 0;}
.certificate_list .list .desc .detail_btn{margin:10px 0 0;}



/*********** View *************/
	.bbsView_tit{padding:30px 15px;}
	.bbsView_tit .subject{font-size:20px; display: block;}
	.bbsView_tit .catname{margin:0 0 8px;}
	.bbsView_tit .view_detail{margin:8px 0 0;}
	.bbsView_tit .view_detail li{padding:0 20px 0 0;}
	.bbsView_tit .view_detail li:after{right:10px;}
	.bbsView_tit .view_detail li span{font-size:18px; margin:-2px 3px 0 0;}
	.view_content{padding:25px 15px;}

	.view_file{margin:25px 0 0; padding:18px 15px;}	
	.view_file .btit{width:120px;}	
	.view_file .bstxt{width:calc(100% - 120px);}	

	.bbs_bottom{}
	.bbs_bottom.last{}
	.bbs_bottom dt{width:120px; padding:15px;}
	.bbs_bottom dd{width:calc(100% - 120px); padding:15px;}






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

/*********** List *************/
.certificate_list{}
.certificate_list .list{margin:0 15px 30px 0; width:calc((100% - 15px)/2);}
.certificate_list .list:nth-child(4n){margin-right:15px;}
.certificate_list .list:nth-child(3n){margin-right:15px;}
.certificate_list .list:nth-child(2n){margin-right:0;}
.certificate_list .list .desc{padding:15px 0 0;}
.certificate_list .list .desc .detail_btn{margin:8px 0 0;}

.certificate_list .list .thumb a:after{width:50px; height:50px; line-height: 50px; font-size:20px; margin-left: -25px; margin-top:-25px;}


/*********** View *************/
	.bbs_view{border-width:2px;}
	.bbsView_tit{padding:20px 12px;}
	.bbsView_tit .subject{font-size:18px;}
	.bbsView_tit .catname{margin:0 0 6px;}
	.bbsView_tit .view_detail li span{font-size:16px;}
	.view_content{padding:25px 12px;}

	.view_file{margin:20px 0 0; padding:12px;}	
	.view_file .btit{width:100px;}	
	.view_file .bstxt{width:calc(100% - 100px);}	

	.bbs_bottom{}
	.bbs_bottom.last{}
	.bbs_bottom dt{width:100px; padding:12px;}
	.bbs_bottom dd{width:calc(100% - 100px); padding:12px;}
	.bbs_bottom dt .arrow{font-size:20px;}

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



/*********** List *************/
.certificate_list{}
.certificate_list .list{margin:0 0 20px; width:100%;}
.certificate_list .list:nth-child(4n){margin-right:0;}
.certificate_list .list:nth-child(3n){margin-right:0;}
.certificate_list .list:nth-child(2n){margin-right:0;}



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




}