@charset "utf-8"; 
/* copyright(c) WEBsiting.co.kr */

/* 게시판 목록 */
#bo_list {position:relative}
#bo_list:after {display:block; visibility:hidden; clear:both; content:""}

.webzineList{width:100%; overflow:hidden; }
.webzineList:after{content:'';display:block; clear:both;}
.webzineList > ul{border-top:2px solid #ddd; margin-bottom:20px; }
.webzineList > ul > li{width:100%; position:relative; padding:30px; border-bottom:1px solid #ddd; }
.webzineList > ul > li:after{content:'';display:block; clear:both;}
.webzineList > ul > li:hover{background:#fafafa; }
.webzineList > ul > li .td_chk{position:absolute; right:0px; top:0px; }
.webzineList > ul > li .bo_cate_link{display:inline-block; margin-bottom:8px; }
.webzineList > ul > li .bo_tit{display:block; vertical-align:middle; }
.webzineList > ul > li .bo_tit strong{font-size:20px; vertical-align:middle; letter-spacing:-0.03em; color:#000; padding-bottom:4px; font-weight:700;}
.webzineList > ul > li a:hover.bo_tit strong{border-bottom:1px solid #999; }
.webzineList > ul > li.bo_notice .bo_tit .notice_icon{text-align:center; vertical-align:middle; color:#fff; font-size:14px; height:25px; }
.webzineList > ul > li .bo_tit u{text-decoration:none; }
.webzineList > ul > li .bo_tit em{display:block; padding-top:10px; font-style:normal; font-weight:normal; font-size:12px; line-height:1.4em; color:#999; }
.webzineList > ul > li > u{display:block; color:#ddd; font-size:11px; margin-top:10px; }
.webzineList > ul > li > u > span{display:inline-block; padding-right:10px; color:#999; }
.webzineList > ul > li > u > span:first-child{padding-left:0px; }
.webzineList > ul > li > u > span:before{content:" / "; color:#ddd; }
.webzineList > ul > li > u > span:first-child:before{content:""; }
.webzineList > ul > li > u > span > i{margin-left:8px; }

/* [수정1] min-width 추가 + background 추가 (이미지 없을 때 빈 박스 배경) */
.webzineList > ul > li .list_img{display:block; float:left; margin:0 15px 0 0; width:200px; min-width:200px; height:200px; max-width:200px; max-height:200px; overflow:hidden; background:#f0f0f0; }
/* [수정2] object-fit: cover → contain (가로 긴 이미지→가로 100%, 세로 긴 이미지→세로 100%) */
.webzineList > ul > li .list_img img{display:block; width:100%; height:100%; object-fit:contain; object-position:center center; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
.webzineList > ul > li:hover .list_img img{transform: scale(1.0);}
/* [수정3] 이미지 없을 때 빈 박스 (background는 .list_img에서 상속) */
.webzineList > ul > li .list_img_empty{border-radius:4px; }

.webzineList > ul > li a .youtube_img{display:block; width:100%; max-width:100%; min-width:100%; position:relative; height:auto; overflow:hidden; background:#333; } 
.webzineList > ul > li a .youtube_img sup{display:block; position:absolute; left:0px; top:0px; right:0px; bottom:0px; width:100%; overflow:hidden; background-repeat:no-repeat; background-size:cover;; background-position:center center; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease; transition-duration: 0.2s; transition-timing-function: ease; }
.webzineList > ul > li a .youtube_img sub,
.webzineList > ul > li a .youtube_img sub img{display:block; height:auto; width:100%; max-width:100%; min-width:100%; filter:Alpha(opacity=0); opacity:0; -moz-opacity:0; }
.webzineList > ul > li:hover a .youtube_img sup{transform: scale(1.1);}

.bo_notice{background:#fcf9f3 !important; }

.noDataArea{margin-bottom:20px; }
.fa-youtube-play{font-size:22px !important; vertical-align:middle; }

@media all and (max-width: 700px)
{
	.webzineList > ul > li{padding:20px; }
	.webzineList > ul > li .bo_tit strong{font-size:16px; }
	.webzineList > ul > li .bo_tit em{font-size:11px; line-height:1.2em; }
	/* [수정4] 모바일에서 이미지 박스 축소 */
	.webzineList > ul > li .list_img{width:100px; min-width:100px; height:100px; max-width:100px; max-height:100px; }
}