@charset "UTF-8";

/*글목록*/
.boardList {border-top:2px solid #464646; padding-top:1px; width:100%}
.boardList tr {border-bottom:1px solid #ddd; display:block; padding:1.5rem 2rem; position:relative; transition:all .3s; z-index:1}
.boardList tr.nodata {padding:2rem 1rem !important; text-align:center}
.boardList th, .boardList td {box-sizing:border-box; display:inline-block; line-height:1.6rem; padding:0; text-align:left}
.boardList td:after {content:''; background-color:#bbb; width:1px; height:10px; display:inline-block; margin:0 1rem}
.boardList tr.notice td.notice:after,
.boardList td.title:after, 
.boardList td:last-child:after {content:none}
.boardList thead {display:none}
.boardList thead th {border-bottom:1px solid #919191; word-break:keep-all}
.boardList tbody td img {vertical-align:middle}
.boardList tbody td.title {display:block; font-size:1rem; text-align:left}
.boardList tbody td.title > i.i-lock {display:inline-block; font-size:16px; vertical-align:1px}
.boardList tbody td.title > span {display:inline-block}
.boardList tbody td.title a {color:#000; display:inline-block}
.boardList tbody td.title a strong {display:block; font-weight:normal; padding:2px 0 5px; word-break:keep-all}
.boardList tbody td.title a span {display:none; word-break:keep-all}
.boardList table,
.boardList tbody {display:block}
/*번호*/
.boardList td.num {display:none}
/*공지글*/
.boardList tr.notice {background-color:#fff9f9}
.boardList tr.notice td.notice strong {background-color:#fb6363; border:1px solid #fb6363; color:#fff; display:inline-block; font-size:0.85rem; font-weight:normal; padding:0.1rem 0.737rem; text-align:center; word-break: keep-all}
/*공지글*/
.boardList tr.noticeArea {background-color:#f9f9f9; padding-left:8rem}
.boardList tr.noticeArea td.notice {background-color:#5d2e91; border:1px solid #5d2e91; color:#fff; font-size:0.75rem; line-height:1.3rem; padding:3px; width:100px; text-align:center; position:absolute; left:2rem; top:1.5rem}
.boardList tr.noticeArea td.notice:after {content:none}
/*새글 아이콘*/
.boardList td.title i.xi-new {background-color:#ed6c5f; display:inline-block; border-radius:100%; width:15px; height:15px; vertical-align:0; position:relative}
.boardList td.title i.xi-new:before {content:'N'; color:#fff; font-size:10px; position:absolute; width:100%; line-height:15px; text-align:center}
/*아이콘*/
.boardList td.name:before {content:'\ea28'; font-size:0.8rem; font-family:'fontIcon' !important; margin-right:5px}
.boardList td.date:before {content:'\e94b'; font-size:0.8rem; font-family:'fontIcon' !important; margin-right:5px}
.boardList td.hit:before {content:'\e975'; font-size:0.8rem; font-family:'fontIcon' !important; margin-right:5px}
/*효과*/
.boardList tr:before {content:''; border:1px solid rgba(0,0,0,0); width:99.9%; height:100%; position:absolute; left:0; top:-1px; transition:all .3s; z-index:-1}
.boardList tr:after{content:''; box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0); width:100%; height:100%; position:absolute; right:0; bottom:0; transition:all .3s; z-index:-1}
.boardList tr:hover {background-color:#fafafa}
.boardList tr:hover:before {border:1px solid rgba(0,0,0,1)}
.boardList tr:hover:after{box-shadow: 8px 8px 0px 0px rgba(0, 0, 0, 0.1)}

@media screen and (max-width:640px) {
	/*글목록*/
	.boardList thead, .boardList thead tr, .boardList thead th  {border:none; background:none; padding:0; font:0px/0 Arial; height:0; text-indent:-9999px}
	.boardList .num, .boardList .hit {display:none}
	.boardList tr {padding:1.5rem}
	.boardList td:after {margin:0 0.5rem}
	.boardList .date:after {content:none} 
	.boardList .title {display:block; width:100%}
	.boardList .title a {font-size:1.1rem}
	.boardList .hit {display:none}
	/*공지글*/
	.boardList tr.notice td.notice {position:initial}
	.boardList tbody td.title a span {margin-left:0}
}