@charset "utf-8";

/* 새글 스킨 (latest) */
.pic_lt {position:relative; }
.pic_lt .lat_title {display:block;line-height:45px;font-size:1.2em;color:#253dbe}
.pic_lt .lat_title a {color:#000;display:inline-block;position:relative}
.sound_only{ font-size:0!important}

/* .pic_tit{font-size: 18px;color: #333;padding: 25px 0 0;display: block;text-align: center; line-height: 1.5;} */
.galley_li { float:left; width: calc( 33.3333% - 1.4%); margin-right:2%; border: 1px solid #ddd; } 
.galley_li:last-child { margin-right:0 } 
.galley_li a { display:block; width:100%; height:100%; } 
.thum_img { position: relative; width:100%; height:100%; overflow:hidden; box-sizing:border-box; background-color: #111; } 
.view_btn { transform: scale(0.5); z-index: 2; opacity: 0; visibility: hidden; width: 66px; height: 66px; position: absolute; left: 0; right: 0; top: 90px; margin: auto; transition: all 0.3s;} 
.view_btn img { width: 100%; }  
.thum_img > .lt_img { position: relative; z-index: 1; display: block; transition: all 0.3s ease; overflow: hidden !important; width:100%; } 
.galley_li:hover .thum_img > .lt_img { opacity: 60%; width:100%; transform:scale(1.1); overflow:hidden !important; } 
.galley_li:hover .thum_img .view_btn { transform: scale(1.2); opacity: 1; visibility: visible; } 
.galley_li:hover .captions { background-color: #e6e6e6; } 
.pic_tit.captions { transition: all 0.3s ease; width: 100%; box-sizing: border-box; padding: 30px 20px; text-align:left; } 
.pic_tit.captions dt { font-size: 22px; font-weight: bold; color: #222; margin-bottom: 15px; line-height: 30px; font-family: 'nanumsquare'; } 
.pic_tit.captions dd { font-size:15px; line-height:24px; font-weight:500; color:#666666; font-family: 'nanumsquare';} 


.pic_lt ul:after {display:block;visibility:hidden;clear:both;content:""}
.pic_lt li {float:left; width:calc( 33.3333% - 29px);}
/* .pic_lt li:hover .lt_img > img{display: block;transition: all 0.3s ease;overflow: hidden !important; width:100%; }
.pic_lt li:hover .lt_img > img{width:100%; transform:scale(1.03); overflow:hidden !important;} */
.pic_lt li .lt_img { display: block; width: 100%;height: 100%;overflow: hidden;}
.pic_lt li .lt_img img {width:100%;height:auto}
.pic_lt li .fa-heart {color:#ff0000}
.pic_lt li .fa-lock {display:inline-block;line-height:14px;width:16px;font-size:0.833em;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.pic_lt li .new_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#23db79;background:#b9ffda;text-align:center;border-radius:2px;margin-left:2px;font-weight:bold;vertical-align:middle}
.pic_lt li .hot_icon {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#ff0000;background:#ffb9b9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-caret-right {color:#bbb}
.pic_lt li .fa-download {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#daae37;background:#ffefb9;text-align:center;border-radius:2px;vertical-align:middle}
.pic_lt li .fa-link {display:inline-block;width:16px;line-height:16px;font-size:0.833em;color:#b451fd;background:#edd3fd;text-align:center;border-radius:2px;vertical-align:middle}


.lt_info {padding:10px 0}
.lt_info .lt_nick {}
.lt_info .lt_date {color:#888}

.pic_lt .empty_li {line-height:145px ;color:#666;text-align:center;padding:0}
.pic_lt .empty_li:before {background:none;padding:0}
.pic_lt .lt_cmt {background:#e9eff5;color:#3a8afd;font-size:11px;height:16px;line-height:16px;padding:0 5px;border-radius:3px;vertical-align:middle}
.newsArea .lt_more {position:absolute;top:0px;right:15px;display:block;width: 145px;text-align: right;}
.lt_more:hover{color:#777}
a.btn2 {overflow: hidden;display: inline-block;width: 36px;height: 38px;line-height:38px;border: 1px solid #ddd;transition: all .4s;text-align: left;}
a.btn2 span {display: inline-block;display: none; width: 0px;padding-left: 0px;font-size: 15px;transition: all .4s;margin-top: -5px;}
a.btn2 div {display: inline-block;position: relative;width: 14px;height: 14px;margin: -6px 10px 0;}
a.btn2 div:before { display: block; content: "";width: 2px;height: 100%; position: absolute;left: 50%; top: 1px; margin-left: -1px; background: #999;}
a.btn2 div:after {display: block; content: ""; width: 100%; height: 2px;position: absolute; left: 0%;  top: 50%;margin-top: 0px; background: #999;visibility:visible;}
a.btn2:hover{border:1px solid #283b8b;width:145px;transition:all .4s;}
a.btn2:hover span{display:inline-block;width:100px;padding-left:20px;color:#283b8b;transition:all .4s;}
a.btn2:hover div:before{background:#283b8b}
a.btn2:hover div:after{background:#283b8b;}
a.btn2 div{    margin: -6px 10px 0!important;}
.pic_lt li:hover .pic_lt{ color: #0ca2e0;
    background: -webkit-gradient(linear,left top,right top,color-stop(32%,#0ca2e0),color-stop(100%,#27dde8));
    background: -webkit-linear-gradient(left,#0ca2e0 32%,#27dde8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media all and (max-width:1280px) {
.pic_tit.captions dt { font-size: 20px; }
.pic_tit.captions dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.view_btn { transform: scale(0.5); z-index: 2; opacity: 0; visibility: hidden; width: 40px; height: 40px; position: absolute; left: 0; right: 0; top: 45%; margin: auto; transition: all 0.3s;} 
}
@media all and (max-width:1150px) {
.pic_lt{ padding-top:60px; margin:0}	
.pic_tit{ font-size:16px; padding:19px 0 0}
.lat .lat_title{line-height: 30px;}
.lat .lat_title a{font-size: 20px;}

a.btn2{ width:30px; height:30px;line-height: 30px;}
a.btn2 div{ width:10px; height:10px}
.lt_info .lt_date{ padding-right:5px;}
}
@media all and (max-width:981px) {
.newsArea .lt_more{position: inherit;text-align: center;width: 180px;height: 45px;margin: 45px auto 0;} 		
.newsArea .lt_more a{display:block; width:100%; height:100%; text-align:center;}
.newsArea .lt_more a span{width: 100%;height: 100%;text-align: center;line-height: 51px;position: relative;left: -11px; top: -3px;display:inline-block;}
.newsArea .lt_more a.btn2 div{ position:absolute; right:50%; top:50%; margin:-8px -25% 0!important}
.pic_tit{ font-size:15px;}
.pic_lt{ padding-top:30px!important}
a.btn2:hover{width:auto!important; padding-left:15px}
a.btn2:hover span{padding:0!important;width:auto!important; }
}
@media all and (max-width:765px) {
.lat li a{ font-size:14px;}	
.lt_info .lt_date{ font-size:12px;}
.pic_lt li{ padding:0}
.view_btn { transform: scale(0.5); z-index: 2; opacity: 0; visibility: hidden; width: 66px; height: 66px; position: absolute; left: 0; right: 0; top: 90px; margin: auto; transition: all 0.3s;} 
.pic_tit.captions dd { font-size: 14px; }
}
@media screen and (max-width:660px ){
a.btn2 span{ font-size:13px;}	
.pic_lt li{ width:100%; float:none;}
}
@media screen and (max-width:500px ){
.newsArea .lt_more {width: 130px;height: 40px;margin: 30px auto 0;}
.newsArea .lt_more a.btn2 div { margin: -6px -25% 0!important;}	
.pic_tit {font-size: 14px;padding-top: 12px;}

}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
#contents03 .pic_lt{ padding:80px 0 30px}	
.pic_tit{ padding:0; line-height:1}
}