@charset "utf-8";

/* 새글 스킨 (latest) */
.main_sec .listbox{position:relative;}
.main_sec .listbox ul { margin:0 -1.5%}
.main_sec .listbox ul li{float:left; /*width:380px;*/box-sizing:border-box; margin: 0 1.5%;}
.main_sec .listbox ul li:nth-child(3n){margin-right:0;}
.main_sec .listbox ul li a{display:block; color:#333333;}
.main_sec .listbox ul li a .photobox{display:block; position:relative; overflow:hidden; margin-bottom:24px;}
.main_sec .listbox ul li a .photobox:before{display:block; position:absolute; top:0; left:0; width:100%; height:100%; content:''; z-index:2; transition:background-color 200ms ease-in-out;}
.main_sec .listbox ul li a:hover .photobox:before{background-color:rgba(235, 97, 7, 0.6);}
.main_sec .listbox ul li a .photobox:after{display:block; position:absolute; top:calc(50% - 39px); left:calc(50% - 39px); width:78px; height:78px; background-repeat:no-repeat; background-position:center center; background-image:url(../../../img/photo_icon.png); content:''; z-index:3; transform:scale(0); transition:transform 200ms ease-in-out;}
.main_sec .listbox ul li a:hover .photobox:after{transform:scale(1);}
.main_sec .listbox ul li a .photobox img{transition:transform 700ms ease-in-out; width:100%;}
.main_sec .listbox ul li a:hover .photobox img{transform:scale(1.14);}
.main_sec .listbox ul li a .photobox .photo{display:block; position:absolute; top:0; left:0; width:0; height:0; line-height:0;}
.main_sec .listbox ul li a .photobox .photo img{width:0; height:0;}
.main_sec .listbox ul li a {display:block; margin-bottom:10px;}
.main_sec .listbox ul li a .title{display:block; line-height:27px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:20px; letter-spacing:-0.03em; font-weight:500}
.main_sec .listbox ul li .date{line-height:17px; color:#777777; font-size:15px; letter-spacing:-0.03em;}
@media all and (max-width:1280px){
.main_sec .listbox ul li a .title{ font-size:17px}
}
@media all and (max-width:800px){
.main_sec .listbox ul li a .photobox{ margin-bottom:0}
.main_sec .listbox ul li a .photobox:after{background-size: 50%;}
}
@media all and (max-width:576px) {
.main_sec .listbox ul li a .title{ font-size:15px}	
}
@media all and (max-width:520px) {
#main_sec02 .latest_wr{padding: 0 35px; box-sizing:border-box;}
#main_sec02 .latest_wr ul{margin: 0 -0.1%; position:relative;}
#main_sec02 .latest_wr ul li{position: relative;margin: 0 0.1%;}
#main_sec02 .latest_wr ul li a{ display:block; position:relative;}
#main_sec02 .listbox ul li a .photobox:before, #main_sec02 .listbox ul li a .photobox:after {display:none}	
}