@charset "utf-8";
@import url('board-common.css');
@import url('board-search.css');
@import url('board-comment.css');
@import url('board-pagination.css');

/* 목록 - 비밀글X, 첨부파일O, 카테고리X, 답변X */
.board-notice_a-list{ display: grid; gap: clamp(18rem, calc( 40 / var(--inr) * 100vw ), 40rem);
	a{ display: block; position: relative; padding: clamp(25rem, 4.1667vw, 50rem) clamp(20rem, 2.7778vw, 50rem) clamp(25rem, 4.1667vw, 65rem); border: 1px solid #e5e5e5; box-shadow: 0 0 50rem rgba(0, 0, 0, 0%);}
	a:hover{box-shadow:0 0 50rem rgba(0, 0, 0, 10%); border-color:#111;}
	.title{ overflow:hidden; display:-webkit-box; height: 2lh; font-size:clamp(18rem, 1.5278vw, 22rem); line-height:1.4; color:#111; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }
	.file{ margin-right: .5ch; display:inline-block; translate: 0.04545455em; width:16rem; height:21rem; background:url(/images/board/icon_file.svg) no-repeat 50% / contain; vertical-align: middle; }
	.content{ overflow: hidden; margin-top: 23rem; display: -webkit-box; height: 2lh; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }
	.info{ position:relative; margin-top:110rem; display:inline-flex; align-items:center; font-size:13rem; line-height:1; color:#a7a7a7;}
	.writer{display:flex; align-items:center; }
	.writer::after{content:''; display: inline-block; margin: 0 9rem; width:1px; height:12rem; background:#cdcdcd;}
	.notice{margin-left:10rem; padding:5rem 10rem; background:#111; border-radius:20rem; color:#fff;}
	.new{margin-left:10rem; font-weight:700; font-size:13rem; color:#d52d2d;}
	.arrow{ position:absolute; right:50rem; bottom:50rem; display:grid; place-items: center; width:60rem; height:60rem; border-radius:50%; background:#f7f7f7;}
	.arrow::before{content:''; display: block; width:17rem; height:17rem; background:url(/images/board/arr_board_list.svg) no-repeat 50% / contain; opacity:0.9;}
	a:hover .arrow{background:#111;}
	a:hover .arrow::before{background-image:url(/images/board/arr_board_list_w.svg);}
	@media(prefers-reduced-motion:no-preference){
		a, .arrow, .arrow::before{ transition: .3s; }
	}
	@media(min-width:768px){
		grid-template-columns:1fr 1fr;
	}
	@media(min-width:1280px){
		grid-template-columns: repeat(3, 1fr);
		.content{ height: 3lh; -webkit-line-clamp:3; }
	}
	@media(max-width:1279px){
		.arrow{display:none;}
	}
}