@charset "utf-8";
/* *******************************************************
 * filename : certification.css
 * description : 특허 및 인증서 게시판 관련 CSS
 * date : 2019-09-30
******************************************************** */

/* ******************   특허 및 인증서 :: 특허 및 인증서 01 ********************** */
.certifi-list-style01{margin:0 -1%;}
.certifi-list-style01 li{overflow:hidden; float:left; width:31.33%; margin:0 1% 5% 1%;}
.certifi-list-style01 li a{display:block; overflow:hidden;}
.certifi-list-style01 li .certi-thumb{position:relative; float:left; width:160px; /* height:210px; */ margin-right:20px; background:#fff; }
.certifi-list-style01 li .certi-thumb span{display:block; position:relative; height:0; padding-top:130%; border:1px solid #ddd; }
.certifi-list-style01 li .certi-thumb span img{position:absolute; top:0px; left:0px; width:100%; height:100%;}
.certifi-list-style01 li .certi-info{float:left; width:calc( 100% - 180px );  }
.certifi-list-style01 li .certi-info .certi-name{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border-bottom:1px solid #ddd; padding:0 0 15px 0; margin-bottom:25px; color:#333; font-size:18px; letter-spacing:-0.25px; font-weight:500;}
.certifi-list-style01 li .certi-info .certi-txt{overflow:hidden; max-height:122px; font-size:13px; line-height:20px; letter-spacing:-0.25px; word-break:keep-all;}
@media all and ( max-width: 1220px ){
    .certifi-list-style01 li{width:48%;}
    .certifi-list-style01 li .certi-info .certi-name{margin-bottom:15px; font-size:16px;  }
}
@media all and ( max-width: 800px ){
    .certifi-list-style01{margin:0;}
    .certifi-list-style01 li{float:none; width:100%; margin:0 0 5% 0;}
	.certifi-list-style01 li a{display:block; border:1px solid #ddd; padding:15px;}
    .certifi-list-style01 li .certi-thumb{width:100px; margin-right:10px;}
    .certifi-list-style01 li .certi-info{width:calc( 100% - 110px ); padding-top:10px; }
    .certifi-list-style01 li .certi-info .certi-name{font-size:14px;}
}   


/* ******************   특허 및 인증서 :: 특허 및 인증서 02 ********************** */
.certifi-list-style02{margin:0 -1%;}
.certifi-list-style02 .certification-item{float:left; width:48%; margin:0 1% 5% 1%; }
.certifi-list-style02 .certification-item:nth-child(2n-1){clear:both;}
.certifi-list-style02 .certifi-inner-con{width:100%; }
.certifi-list-style02 .certifi-thumb-box, 
.certifi-list-style02 .certifi-info-box{display:inline-block; /*vertical-align:middle;*/vertical-align:top;} /* 텍스트 가운데 정렬 : middle*/
/* 썸네일 */
.certifi-list-style02 .certifi-thumb-box{width:200px; margin-right:30px}
.certifi-list-style02 .certifi-thumb-box span{width:100%; display:block; position:relative; padding-top:125%; background-color:#fff; border:1px solid #ddd;}
.certifi-list-style02 .certifi-thumb-box img{position:absolute; top:0px; left:0px; right:0px; bottom:0px; max-width:100%; max-height:100%; display:block; margin:auto;} 
.certifi-list-style02 .certifi-thumb-box .certification-more-btn-m{display:none;}
/* 정보 */
.certifi-list-style02 .certifi-info-box{width:calc(100% - 235px); padding:3% 0 0 0;}
.certifi-list-style02 .certification-tit{font-size:18px; line-height:23px; color:#111; font-weight:500; letter-spacing:-1px; border-bottom:1px solid #cfcfcf; margin-bottom:5%; position:relative; padding-bottom:15px; word-break:keep-all; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.certifi-list-style02 .certification-txt{position:relative; padding-left:80px; font-size:16px; line-height:1.3; margin-bottom:15px;}
.certification-txt > dt{position:absolute; top:0px; left:0px;width:70px; color:#111; font-weight:400; letter-spacing:-0.75px; font-size:15px;}
.certification-txt > dt:after{content:"";width:1px; height:12px; background-color:#cfcfcf; position:absolute; right:3px; top:50%; margin-top:-5px;}
.certification-txt > dd p{color:#5e5e5e; letter-spacing:0px; position:relative; font-weight:300; margin-top:4px; font-size:13px;}
.certification-txt > dd p:first-child{margin-top:0}
.certification-more-btn{display:block; position:relative; height:43px; max-width:43px; background-color:#f4f4f4; border:1px solid #cfcfcf; text-align:center; margin-top:7%; }
.certification-more-btn > em{position:absolute; top:0px; left:0px; height:100%; width:43px; border-right:1px solid #cfcfcf;}
.certification-more-btn > em i{vertical-align:middle; line-height:43px;}
.certification-more-btn > span{display:block; padding-left:44px; height:43px; line-height:43px; color:#111;}
@media all and (max-width:1024px){
	/* 썸네일 */
	.certifi-list-style02 .certifi-thumb-box{width:150px; }
	/* 정보 */
	.certifi-list-style02 .certifi-info-box{width:calc( 100% - 190px ); }
	.certifi-list-style02 .certification-txt{padding-left:0}
	.certification-txt > dt{position:static; width:auto; margin-bottom:10px}
	.certification-txt > dt:after{display:none;}
}
@media all and (max-width:800px){
    .certifi-list-style02{margin:0;}
    .certifi-list-style02 .certification-item{float:none; width:auto; margin:0; margin-bottom:25px; padding:15px; border:1px solid #ddd;}
	/* 썸네일 */
	.certifi-list-style02 .certifi-thumb-box{position:relative; margin-right:15px; width:100px; }
	/* 정보 */
	.certifi-list-style02 .certifi-info-box{position:relative; width:calc(100% - 120px); padding-top:0; }
    .certifi-list-style02 .certification-tit{font-size:16px; line-height:30px; padding-bottom:7px; padding-right:45px}
    .certification-txt > dt, .certification-txt > dd p{font-size:13px; letter-spacing:-0.75px;}
	.certification-more-btn{position:absolute; top:0px; right:0; width:30px; height:30px; line-height:30px; text-align:center; background-color:#f4f4f4; border:1px solid #cfcfcf; margin-top:0;}
	.certification-more-btn > em{border-right:0; width:100%;}
	.certification-more-btn > em i{line-height:30px;}
	.certification-more-btn > span{display:none;}
}

/* ******************   특허 및 인증서 :: 특허 및 인증서 03 ********************** */
.certifi-list-style03 > ul {overflow:hidden; margin:0 -1%;}
.certifi-list-style03 > ul li {float:left; width:18%; margin:0 1% 2% 1%; }
.certifi-list-style03 > ul li a{display:block; position:relative;}
.certifi-list-style03 .gallery-img-thumb {position:relative; overflow:hidden; height:0; padding-top:130%; border:1px solid #D8D8D7}
.certifi-list-style03 > ul li img {position:absolute; top:0px; left:0px; width:100%; height:100%;}
.certifi-list-style03 > ul li .gallery-tit {display:block; height:48px; font-size:18px; line-height: 48px; letter-spacing: -1px; color:#000000; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.certifi-list-style03 > ul li .img-over-thum {
    position:absolute; opacity:0;filter:Alpha(opacity=0); width:100%; height:100%; left:0; top:0; background-color:rgba(0, 0, 0, 0.5);  
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; 
}
.certifi-list-style03 > ul li .img-over-thum span {
    position:absolute; left:32%; bottom:-45px; width:35%; height:45px; font-size:15px; line-height: 45px; letter-spacing: -1px; color:#fff; 
    background-color:rgba(0, 0, 0, 0.3); border:1px solid rgba(255, 255, 255, 0.3); border-bottom: 0; text-align:center; 
    -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; 
}
.certifi-list-style03 > ul li .img-over-thum span i {vertical-align: middle; color:#fff; display:inline-block; margin-left: 0px;}
.certifi-list-style03 > ul li:hover .img-over-thum {opacity:1;filter:Alpha(opacity=100); }
.certifi-list-style03 > ul li:hover .img-over-thum span {bottom:0;}
 
@media all and (max-width:800px){
	.certifi-list-style03{max-width:480px; margin:0px auto;}
    .certifi-list-style03 > ul li{width:48%; margin-bottom:5%}
    .certifi-list-style03 > ul li .gallery-tit{height:30px; line-height:30px; font-size:15px; padding-top:10px;} 
    .certifi-list-style03 > ul li .img-over-thum span{bottom:-30px; height:30px; line-height:30px; font-size:13px;}
    .certifi-list-style03 > ul li .img-over-thum span i{font-size:18px; margin-left:3px;}
}
 

/* ******************   특허 및 인증서 :: 특허 및 인증서 04 ********************** */
.certifi-list-style04{}
.certifi-list-style04 > ul{margin:0 -1%;}
.certifi-list-style04 > ul li{float:left; width:18%; margin:0 1% 70px 1%; }
.certifi-list-style04 .certifi-img-thumb{position:relative; padding-top:130%; border:1px solid #ddd;}
.certifi-list-style04 .certifi-img-thumb > span img{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
.certifi-list-style04 .certifi-img-thumb .certifi-over-box{position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border:2px solid #fda800;opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.certifi-img-thumb .certifi-over-box i{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; width:50px; height:50px; background-color:#fda800; text-align:center; line-height:50px; color:#fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.certifi-list-style04 > ul li a:hover .certifi-img-thumb .certifi-over-box{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
.certifi-list-style04 .certifi-tit{font-size:16px; line-height:22px; color:#444; font-weight:400; letter-spacing:-0.5px; text-align:center; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-top:17px;}
 
@media all and (max-width:800px){
	.certifi-list-style04{max-width:480px; margin:0px auto;}
    .certifi-list-style04 > ul li{width:48%;}
    .certifi-tit{height:30px; line-height:30px; font-size:15px; padding-top:10px;} 
}


/* ******************   특허 및 인증서 :: 특허 및 인증서 05 ********************** */
.certifi-list-style05 .certificate-list{margin-bottom:55px;}
.certifi-list-style05 .certificate-list:last-child{margin-bottom:0px;}
.certifi-list-style05 .certificate-list .certificate-list-tit{font-size:30px; line-height:1.5; letter-spacing:-0.5px; color:#484848; font-weight:600; margin-bottom:14px;}
.certifi-list-style05 .certificate-list > ul{margin:0 -1%;}
.certifi-list-style05 .certificate-list > ul li{float:left; width:23%; margin:0 1% 70px 1%;}
.certifi-list-style05 .certificate-list .certificate-img-thumb{position:relative; padding-top: 315px;/* padding-top:105%; */ background-color: #f4f4f4;}
.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con{position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 139px; height: 199px;}
.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con:before{position: absolute; top: -13px; left: -13px; display: block; content: ''; width: 165px; height: 233px; background: url("/images/content/certificate_cover.png") 0 0 no-repeat; z-index: 1;}
.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con span{position: relative; width: 100%; height: 0; padding-top: 199px; display: block;}
.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con span img{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
.certifi-list-style05 .certificate-list .certificate-img-thumb .certificate-over-box{position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border:2px solid var(--main-color);opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition:all 0.3s; transition:all 0.3s}
.certifi-list-style05 .certificate-img-thumb .certificate-over-box i{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; width:50px; height:50px; background-color:var(--main-color); text-align:center; line-height:50px; color:#fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.certifi-list-style05 .certificate-list .certificate-tit{font-size:18px; line-height: 1.1; color:#484848; font-weight:500; letter-spacing:-0.5px; text-align:center; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-top:30px;}

@media all and (min-width:801px){
	.certifi-list-style05 .certificate-list > ul li a:hover .certificate-img-thumb .certificate-over-box{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
}
@media all and (max-width:1220px){
	.certifi-list-style05 .certificate-list > ul li{width:31.33%;}
}
@media all and (max-width:800px){
	.certifi-list-style05 .certificate-list{max-width:480px; margin:0px auto 20px;}
	.certifi-list-style05 .certificate-list .certificate-list-tit{font-size:20px;}
    .certifi-list-style05 .certificate-list > ul li{width:48%; margin-bottom: 35px;}

	.certifi-list-style05 .certificate-list .certificate-img-thumb{padding-top: 200px;}
	.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con{width: 83px; height: 120px;}
	.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con:before{top: -8px; left: -8px; width: 99px; height: 140px; background: url("/images/content/certificate_cover.png") center/cover no-repeat;}
	.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con span{padding-top: 120px;}

	.certifi-list-style05 .certificate-list .certificate-img-thumb .certificate-over-box{display: none;}
	.certifi-list-style05 .certificate-list .certificate-tit{font-size:14px; padding-top:15px;} 
}




/* ******************   카달로그 :: 카달로그 01 ********************** */
.catalogue-list-style01{}
.catalogue-list-style01 > ul{margin:0 -1%;}
.catalogue-list-style01 > ul li{float:left; width:18%; margin:0 1% 70px 1%; }
.catalogue-list-style01 > ul li .catalogue-list-inner{border:1px solid #ddd; padding:20px;}
.catalogue-list-style01 .catalogue-img-thumb{position:relative; padding-top:130%; border:1px solid #ddd;}
.catalogue-list-style01 .catalogue-img-thumb > span img{position:absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%;}
.catalogue-list-style01 .catalogue-img-thumb .catalogue-over-box{position:absolute; top:-1px; left:-1px; bottom:-1px; right:-1px; border:2px solid #fda800;opacity:0;filter:Alpha(opacity=0); visibility:hidden; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.catalogue-img-thumb .catalogue-over-box i{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; width:50px; height:50px; background-color:#fda800; text-align:center; line-height:50px; color:#fff; -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
.catalogue-list-style01 > ul li a:hover .catalogue-img-thumb .catalogue-over-box{opacity:1.0;filter:Alpha(opacity=100); visibility:visible;}
.catalogue-list-style01 .catalogue-tit{font-size:16px; line-height:22px; color:#444; font-weight:400; letter-spacing:-0.5px; text-align:center; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-top:17px;}
.catalogue-list-style01 .catalogue-controls-box{margin-top:15px;}
.catalogue-list-style01 .catalogue-controls-box ul{margin:0 -1%;}
.catalogue-list-style01 .catalogue-controls-box li{float:left; width:48%; margin:0 1%;}
.catalogue-list-style01 .catalogue-controls-box a{display:block; height:34px; line-height:34px; background-color:#444; color:#fff; font-size:14px; letter-spacing:-0.5px; text-align:center; }
.catalogue-list-style01 .catalogue-controls-box .download-btn{background-color:#f58020}
.catalogue-list-style01 .catalogue-controls-box a i{margin-right:5px;}
@media all and (max-width:1024px){
	.catalogue-list-style01 > ul li .catalogue-list-inner{padding:10px;}
	.catalogue-list-style01 .catalogue-controls-box ul{margin:0;}
	.catalogue-list-style01 .catalogue-controls-box li{float:none; width:auto; margin:0 0 1% 0;}
	.catalogue-list-style01 .catalogue-controls-box a i{margin-left:-5px}
}
@media all and (max-width:800px){
	.catalogue-list-style01{max-width:480px; margin:0px auto;}
    .catalogue-list-style01 > ul li{width:48%; margin-bottom:2%}
	.catalogue-list-style01 > ul li .catalogue-list-inner{background-color:#f7f7f7;}
    .catalogue-list-style01 .catalogue-tit{height:30px; line-height:30px; font-size:15px; padding-top:10px;} 
}