/* 카테고리 */
.cate_tab {margin: 0 auto 50px;}
.cate_tab ul li {flex:0 1 25%; margin:0; height: 75px; }
.cate_tab ul li a {width:100%; height:100%; padding:0 10px; display:flex; align-items:center; justify-content:center; line-height:130%; border-left:none; border-radius:0;}
.cate_tab ul li:first-child a {border-left:1px solid var(--border);}
.cate_tab ul li:hover a {background:var(--grayBg); border-color:var(--border); color:var(--main);}
.cate_tab ul li.hover a {background:var(--main) !important; border-color:var(--main) !important; color:var(--white) !important;}
.cate_tab ul li:first-child:hover a {border-color:var(--border);}


/*********** List *************/
.photo_list {display: flex; flex-wrap:wrap;}
.photo_list .box {position:relative; margin: 0 30px 30px 0; width: calc((100% - 90px)/4); box-sizing:border-box;}
.photo_list .box:nth-child(4n){margin-right: 0;}
.photo_list .box .checkbox {display:inline-block; position: absolute; left:5px; top:5px; z-index:3;}
.photo_list .box .certi_btn {opacity:0; visibility:hidden; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:var(--main); border-radius:50%; width:53px; height:53px; z-index:5; box-shadow: 0px 0px 20px 0px rgba(228, 108, 10, 0.20); transition:All .3s linear; }
.photo_list .box .certi_btn:after {position:absolute; left:50%; top:50%; transform:Translate(-50%,-50%); transition:All .3s linear; content:"\e8ff"; color:var(--white); font-size:23px; font-family:var(--icon); }
.photo_list .box:hover .certi_btn {opacity:1; visibility:visible;}
.photo_list .box a {display: block; transition:all .3s linear; z-index:7;}
.photo_list .box dl {position:relative; width:100%; margin:0 auto;}
.photo_list .box dl dt {position:relative; padding:40px; width:100%;  box-sizing:border-box; line-height:0; font-size:0;}
.photo_list .box dl dt p.img {position:relative; overflow:hidden; aspect-ratio: 295 / 417;}
.photo_list .box dl dt p.img img {display: block; width: 100%; height: 100%; object-fit: cover; transition: all .3s linear; vertical-align:top;}
.photo_list .box dl dt:before {position:absolute; left:0; top:0; content:''; display:block; width:100%; height:100%; box-sizing:Border-box; background:var(--blueBg); transition:All .3s linear; z-index:-3;}
.photo_list .box dl dt:after {position:absolute; left:0; top:0; content:''; display:block; width:100%; height:100%; box-sizing:Border-box; border:2px solid var(--main); opacity:0; visibility:hidden; transition:all .3s linear; z-index:-2;}
.photo_list .box:hover dl dt:after {opacity:1; visibility:visible;}
.photo_list .box dl dd {box-sizing:border-box; padding:15px 0 0 0;}
.photo_list .box dl dd h4 {text-align:center; font-size:20px; font-weight:500; color:var(--black); line-height:150%; letter-spacing:-.35pt;}

/* Styles for dialog window */
.white-popup.wid {max-width:960px; margin:0 auto; background:#fff}
.white-popup {background: white;text-align: left;max-width:600px; margin: 40px auto; position: relative;}
.white-popup h1 {background:var(--main); color:#fff; font-weight:700; font-size:1.25rem; padding:17px 50px 17px 20px; line-height:1.3; letter-spacing: -0.5pt;}
.white-popup h1 span {line-height:100%;  font-size:15px;}
.white-popup img {max-width:100%; background-size: cover; background-position:center; background-repeat:no-repeat; /* width:100%; */}
.white-popup .smimg {text-align:center; padding:20px; max-height:760px; overflow-y:auto;}
.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;
}



/*********** View *************/
.bbs_view{border-top:2px solid var(--black);}
	.bbsView_tit{border-bottom:1px solid var(--border); padding:33px 100px 33px 20px; box-sizing:border-box; position: relative;}
	.bbsView_tit .subject{font-size:26px; letter-spacing:var(--letter-spacing-heading); line-height:130%; font-weight:700; color:var(--black);}
	.bbsView_tit .subject span{display:inline-block; margin-right: 5px; letter-spacing:inherit; font-weight:400;}
	.bbsView_tit .view_detail{margin:10px 0 0; display:flex;}
	.bbsView_tit .view_detail li{font-size:1rem; color:var(--basic); line-height:150%; padding:0 37px 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:16px; background:#ccc; position:absolute; right:18px; top:50%; margin-top:-8px;}
	.bbsView_tit .view_detail li:last-child:after{display:none;}
	.bbsView_tit .count{font-size:1rem; color:var(--basic); line-height:120%; position:absolute; right:20px; top:50%; transform:translateY(-50%);}
	.bbsView_tit .count span{display:inline-block; vertical-align:middle; margin:-2px 7px 0 0; color:var(--black);}
	.view_content{padding:30px 0; box-sizing:border-box;}
	.view_content img{max-width:100%; height:auto !important;}

	.view_file{margin:30px 0 0; box-sizing:border-box; background:var(--grayBg); display:flex;}	
	.view_file .btit{width:170px; padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 120%; color:var(--black); box-sizing:border-box; position: relative;}	
	.view_file .bstxt{width:calc(100% - 170px); padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height: 120%; box-sizing:border-box;}	
	.view_file .bstxt a{display:inline-block; font-size:1rem; letter-spacing:var(--letter-spacing-body); line-height:150%; color:var(--black); border-bottom:1px solid var(--black); margin: 0 0 5px;}
	.view_file .bstxt a:last-child{margin: 0;}
	.view_file .bstxt .file{display: inline-block; vertical-align: middle; margin-left: -5px; font-size:1rem; color:var(--black);}	

	.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; letter-spacing:var(--letter-spacing-body); line-height: 120%; color:var(--black); box-sizing:border-box; position: relative;}
	.bbs_bottom dt .arrow{color:var(--black); opacity:0.5; position:absolute; right:0; top:50%; transform:translateY(-50%);}
	.bbs_bottom dd{width:calc(100% - 170px); padding:20px; font-size:1rem; letter-spacing:var(--letter-spacing-body); 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;}







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



}

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

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


}

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

/* 카테고리 */
.cate_tab {margin: 0 auto 40px;}
.cate_tab ul li { height: 65px; }
.cate_tab ul li a {padding:0 15px;}


/*********** List *************/
.photo_list{}
.photo_list .box{margin: 0 20px 20px 0; width: calc((100% - 40px)/3);}
.photo_list .box:nth-child(4n){margin-right: 20px;}
.photo_list .box:nth-child(3n){margin-right: 0;}
.photo_list .box dl dt { padding:30px;}
.photo_list .box dl dd h4 {font-size:18px;}

/*********** View *************/
	.bbsView_tit{padding:25px 100px 25px 15px;}
	.bbsView_tit .subject{font-size:20px;}
	.bbsView_tit .subject span{margin-right: 5px;}
	.bbsView_tit .view_detail{margin:5px 0 0;}
	.bbsView_tit .view_detail li{padding:0 20px 0 0;}
	.bbsView_tit .view_detail li:after{height:12px; right:10px; margin-top:-6px;}
	.bbsView_tit .count{right:15px;}
	.view_content{padding:25px 0;}

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

	.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){

.cate_tab ul li { height: auto; }
.cate_tab ul li a {padding:12px 0px;}
.cate_tab ul li.hover a {background:transparent !important; color:var(--main) !important;}
.cate_tab ul li:first-child a {border-left:none;}
.cate_tab ul li:first-child.hover a {border-left:none;}

/*********** List *************/
.photo_list{}
.photo_list .box{margin: 0 20px 20px 0; width: calc((100% - 20px)/2);}
.photo_list .box:nth-child(4n){margin-right: 20px;}
.photo_list .box:nth-child(3n){margin-right: 20px;}
.photo_list .box:nth-child(2n){margin-right: 0;}
.photo_list .box dl dt {padding:20px;}
.photo_list .box dl dd{padding:10px 0 0;}
.photo_list .box dl dd h4 {font-size:16px;}


/* Styles for dialog window */
.white-popup h1 {padding:13px 40px 13px 10px;}
.white-popup .smimg {padding:15px; max-height:450px;}

.mfp-close {top:10px !important; right:10px !important; }


/*********** View *************/
	.bbsView_tit{padding:15px 0;}
	.bbsView_tit .subject{font-size:18px;}
	.bbsView_tit .subject span{display: block; font-size:14px; margin: 0 0 2px;}
	.bbsView_tit .count{right:0; transform:translateY(0); top:20px;}
	.bbsView_tit .count span{font-size:20px; margin: -2px 5px 0 0;}
	.view_content{padding:25px 0;}

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

	.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 *************/
.photo_list{}
.photo_list .box{margin: 0 0 20px; width: 100%;}
.photo_list .box:nth-child(4n){margin-right: 0;}
.photo_list .box:nth-child(3n){margin-right: 0;}
.photo_list .box:nth-child(2n){margin-right: 0;}
.photo_list .box:last-child{margin:0;}


/*********** View *************/
	.bbsView_tit .view_detail{flex-wrap:wrap;}
	.bbsView_tit .view_detail li{width:100%; padding:0 0 4px; line-height: 130%;}
	.bbsView_tit .view_detail li:last-child{padding:0;}
	.bbsView_tit .view_detail li:after{display:none;}

}


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



}