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

/* ******************   특허 및 인증서 :: 특허 및 인증서 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(2022-08-04) ********************** */
.certifi-list-style05 .certificate-list{margin:0 -1%;}
.certifi-list-style05 .certificate-list li{float:left; width:23%; margin:0 1% 70px 1%;}
.certifi-list-style05 .certificate-list .certificate-img-thumb{position:relative; padding:60px 0; background-color: #f4f4f4;}
.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con{
	display:block; 
	position:relative; 
	width: 50%; 
	margin:0px auto; 
	/* border-style: solid;
	border-width: 10px;
	border-image-source: linear-gradient(to top, #b09260, #f3d98d, #dbc48d, #dbc48d, #f3d98d, #dbc48d);
	border-image-slice: 1; */
 }
 .certifi-list-style05 .certificate-list .certificate-img-thumb .img-con:before{
	position: absolute; 
	content: ''; 
	z-index: 1; 
	top: -0.6771vw; 
	left: -0.6771vw; 
	width: calc(100% + 1.3542vw); 
	height: calc(100% + 1.7708vw); 
	background: url("/images/content/certificate_cover.png") 0 0 no-repeat; 
	background-size:100% 100%;
}
.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con span{position: relative; width: 100%; height: 0; padding-top: 133%; 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; visibility:hidden; transition:all 0.3s}
.certifi-list-style05 .certificate-list .certificate-img-thumb .certificate-over-box i{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; width:50px; height:50px; line-height:50px; background-color:var(--main-color); text-align:center; color:#fff; font-size:20px; border-radius:50%;}
.certifi-list-style05 .certificate-list .certificate-tit{font-size:20px; line-height: 1.1; color:#444; font-weight:400; letter-spacing:-0.025em; text-align:center; max-width:100%; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-top:1.15em;}
@media all and (min-width:801px){
	.certifi-list-style05 .certificate-list li a:hover .certificate-img-thumb .certificate-over-box{opacity:1.0; visibility:visible;}
}
@media all and (max-width:1220px){
	.certifi-list-style05 .certificate-list li{width:31.33%;}
}
@media all and (max-width:800px){
	.certifi-list-style05 .certificate-list{max-width:480px; margin:0px auto;}
    .certifi-list-style05 .certificate-list li{width:48%; margin-bottom: 35px;}
	.certifi-list-style05 .certificate-list .certificate-img-thumb{padding:20% 0}
	.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con{width:70%}
	.certifi-list-style05 .certificate-list .certificate-img-thumb .img-con:before{height:calc(100% + 3vw)}
	.certifi-list-style05 .certificate-list .certificate-img-thumb .certificate-over-box{display: none;}
	.certifi-list-style05 .certificate-list .certificate-tit{font-size:18px;} 
}

/* ******************   카달로그 :: 카달로그 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;} 
}

/* ******************   카달로그 :: 카달로그 02 ********************** */
.catalogs-list-con02 .catalogs-list-wrap {background: #fff;}
.catalogs-list-con02 .catalogs-list {display: flex; flex-wrap: wrap; margin: -2.7rem -1.9rem;}
.catalogs-list-con02 .catalogs-list .catalogs-list-item {width: calc(50% - 3.8rem); margin: 2.7rem 1.9rem; background: #f6f6f6; border: 1px solid #f6f6f6; box-sizing: border-box; transition: all 0.3s;}
.catalogs-list-con02 .catalogs-list .catalogs-list-item a {display: flex; align-items: center; padding: 3.2rem 3rem; box-sizing: border-box; width: 100%;}
.catalogs-list-con02 .catalogs-list-item {display: flex; align-items: center;}
.catalogs-list-con02 .catalogs-list-item .item-img {position: relative; width: 27.94%; padding-top: 37.765%;}
.catalogs-list-con02 .catalogs-list-item .item-img .icon-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; background-color: #004689; opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 1;}
.catalogs-list-con02 .catalogs-list-item .item-img .icon-box i {color: #fff; font-size: 2.4rem;}
.catalogs-list-con02 .catalogs-list-item .item-img img {max-width: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;}
.catalogs-list-con02 .catalogs-list-item .item-info {width: 72.06%; padding-left: 10%; box-sizing: border-box; word-break: break-word;}
.catalogs-list-con02 .catalogs-list-item .item-info .tit {font-size: 2rem; line-height: 1.5em; letter-spacing: -0.05em; font-weight: 600; color: #222; /* overflow: hidden; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; */ display: -webkit-box; word-wrap: break-word; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; overflow: hidden;}
.catalogs-list-con02 .catalogs-list-item .item-info .btn-box {max-width: 21rem; margin-top: 4rem;}
.catalogs-list-con02 .catalogs-list-item .item-info .btn-box a {display: flex; align-items: center; justify-content: space-between; padding: 0 2.4rem; width: 100%; height: 5rem; border: 1px solid #c6c6c6; box-sizing: border-box; font-size: 1.5rem; font-weight: 600; letter-spacing: -0.020em; color: #000000; background: #fff; transition: all 0.3s;}
.catalogs-list-con02 .catalogs-list-item .item-info .btn-box a:first-of-type {margin-bottom: 1rem;}
.catalogs-list-con02 .catalogs-list-item .item-info .btn-box a i {font-size: 1.9rem;}
.catalogs-list-con02 .catalogs-list-item .item-info .btn-box a:hover {background: #222222; border: 1px solid #222222; color: #fff;}

.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box {padding-top: 2.3rem; border-top: 1px solid #ddd; margin-top: 2rem;}
.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box .info-list {display: flex; padding-bottom: 0.8rem;} 
.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box .info-list:last-child {padding-bottom: 0;}
.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box .info-tit {font-size: 1.4rem; font-weight: 500; line-height: 1.5em; letter-spacing: -0.05em; color: #555; width: 4.7rem;}
.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box .info-txt {font-size: 1.5rem; font-weight: 400; line-height: 1.5em; letter-spacing: -0.05em; color: #888; width: calc(100% - 6.7rem); padding-left: 2rem;}

.catalogs-list-con02 .catalogs-list .catalogs-list-item:hover {background-color: #fff; border-color: #ddd; box-shadow: 3px 3px 30px 0 #ddd;}
.catalogs-list-con02 .catalogs-list .catalogs-list-item:hover .item-img .icon-box {opacity: 1; pointer-events: auto;}

/* @media all and (max-width:1280px){
	.catalogs-list-con02 .catalogs-list-item .item-img {width: 15rem;}
	.catalogs-list-con02 .catalogs-list-item .item-info {width: calc(100% - 15rem); }
} */
@media all and (max-width:1280px){
	.catalogs-list-con02 .catalogs-list {margin: -1.5rem 0;}
	.catalogs-list-con02 .catalogs-list .catalogs-list-item {width: 100%; margin: 1.5rem 0; padding: 4rem 3rem;}
}
@media all and (max-width:800px){
	.catalogs-list-con02 .bbs-top-list-box{padding: 0 var(--area-padding); box-sizing: border-box;}
	.catalogs-list-con02 .catalogs-list-wrap {padding: 3rem 0;}
	.catalogs-list-con02 .catalogs-list-item .item-info {padding-left: 7%;}
	.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box .info-list {display: block;}
	.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box .info-tit {width: 100% !important;}
	.catalogs-list-con02 .catalogs-list-item .item-info .info-list-box .info-txt {padding-left: 0 !important; width: 100% !important;}
	.catalogs-list-con02 .catalogs-list-item .item-info .btn-box a {height: 4.5rem;}
	.catalogs-list-con02 .catalogs-list .catalogs-list-item{padding: 0;}
}