@charset "utf-8";

/* UI / UX */
.calender-wrap{display:flex;align-items:center;justify-content:space-around}
.calender-wrap .input-text{width:calc(50% - 10px);background:url('/frame/img/comm/ico-calender.png') calc(100% - 5px) center no-repeat}

.btn-right-flex{display:flex;gap:10px;justify-content:flex-end}
.btn-center-flex{display:flex;gap:10px;justify-content:center;align-items:center;margin:20px 0}

/* TOP */
.board-info{display:flex;justify-content:space-between;align-items:center;margin:20px 0}
.board-info .page-total{display:flex;flex-shrink:0;align-items:center}
.board-info .page-total p{line-height:1}
.board-info .page-total p:first-child{border-right:1px solid var(--color-b);padding-right:10px;margin-right:10px}

/* PAGE */
.board-page{display:flex;gap:5px;align-items:center;margin:20px 0;justify-content:center}
.board-page .btn-page{border:1px solid var(--color-b);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:5px 0}
.board-page .btn-page.btn-current{border:0}
.board-page .btn-prev,
.board-page .btn-next,
.board-page .btn-first,
.board-page .btn-last{background-color:var(--color-m);color:#fff;border-color:var(--color-m);background-image:url('/frame/img/comm/ic_page_first.png');background-position:center;background-repeat:no-repeat;text-indent:-999%;overflow:hidden}
.board-page .btn-last{background-image:url('/frame/img/comm/ic_page_last.png')}
.board-page .btn-prev{background-image:url('/frame/img/comm/ic_page_before.png')}
.board-page .btn-next{background-image:url('/frame/img/comm/ic_page_next.png')}

.board-search .inner{display:flex;justify-content:center}
.board-search .search-item{display:flex;gap:5px}
.board-search .btn-search{text-indent:-999%;overflow:hidden;background:url('/frame/img/comm/ico-search.png') var(--color-m) center no-repeat;width:45px;height:45px;border-top-right-radius:10px}

.board-vcon-flex{display:flex;background-color:#f8f8fa;margin-top:50px}
.board-vcon-flex .img-wrap{background-color:#fff;border-radius:50px 0;box-shadow:5px 5px 20px rgba(0,0,0,.5);width:50%;display:flex;align-items:center;justify-content:center;text-align:center;transform:translateY(-50px);overflow:hidden}
.board-vcon-flex .txt{padding:50px;flex-grow:1}
.board-vcon-flex .txt dl{display:flex;gap:10px;margin:10px 0}
.board-vcon-flex .txt dl dt{padding-left:15px;font-weight:bold;position:relative;flex-shrink:0}
.board-vcon-flex .txt dl dt::before{position:absolute;left:0;top:7px;content:"";background:var(--bg-grd);width:6px;height:6px}

/* LIST */
.none-data{justify-content:center;text-align:center}

.td-num{width:80px}
.td-hit{width:100px}
.td-date{width:140px}
.td-addfile{width:100px}
.td-name{width:140px}
.td-subject{display:flex;text-align:left;gap:10px;align-items:center;font-weight:600}
.td-item-category{background-color:var(--color-m);color:#fff;padding:5px 10px;flex-shrink:0;font-size:.875rem;border-radius:5px}

.board-list{text-align:center}
.board-list > table{border-top:2px solid var(--color-m);width:100%}
.board-list thead th{background-color:var(--color-light);padding:20px 10px;font-weight:500;border-bottom:1px solid var(--color-b)}
.board-list tbody td{padding:20px 10px;border-bottom:1px solid var(--color-b)}
.board-list tbody tr:hover{background-color:var(--color-h)}
.ico-file{width:14px;height:14px;display:inline-block;overflow:hidden;background:url('/frame/img/comm/ico-file.png') center/contain no-repeat;text-indent:-999%;margin:0 5px}
.ico-qna{background-color:#d6deed;font-size:.9rem;width:100px;height:38px;display:flex;align-items:center;justify-content:center;border-radius:5px;gap:5px;margin:0 auto}
.ico-qna::before{content:"\e986";font-family:'xeicon'}
.ico-qna.finish{background-color:var(--color-s);color:#fff}
.ico-qna.finish::before{content:"\ea0b"}

.board-list-gallery ul{display:flex;gap:60px;/*수정*/flex-wrap:wrap}
.board-list-gallery li{width:calc((100% - 120px) / 3);/*수정*/box-sizing:border-box;/*추가*/}
.board-list-gallery .item{display:block;border-radius:20px 0;overflow:hidden;border:1px solid #ddd;/*추가*/background-color:#fff;/*추가*/height:100%;/*추가*/}
.board-list-gallery .item:hover .board-img img{transform:translate(-50%, -50%) scale(1.1)}
.board-list-gallery .item .txt{padding:25px 20px;/*수정*/background-color:#fff;/*수정*/}
.board-list-gallery .item .board-con{font-weight:500;height:2.4em}
.board-list-gallery .item .board-date{display:flex;justify-content:flex-end;margin-top:10px;opacity:.8;font-size:.935rem;align-items:center;gap:5px}
.board-list-gallery .board-img{aspect-ratio:3/2;position:relative;/*추가*/width:100%;/*추가*/overflow: hidden;}
.board-list-gallery .board-img img{position:absolute;top:50%;left:50%;width:100%;height:100%;object-fit: contain;/*추가*/transform: translate(-50%, -50%) scale(0.9);/*추가*/transition:transform 0.3s;/*추가*/}
.board-list-gallery .category{position:absolute;right:0;top:0;background-color:var(--color-m);color:#fff;width:120px;height:40px;display:flex;align-items:center;justify-content:center;font-size:.935rem;z-index:10;border-bottom-left-radius:20px}

.board-view .board-vheader{border-left:5px solid var(--color-m);margin-bottom:20px;display:flex;gap:20px;align-items:center;padding:20px;background-color:#f8f8fa}
.board-view .board-vheader .subject{font-size:1.875rem;font-weight:600;border-bottom:1px solid #e7ecf5;padding-bottom:10px;margin-bottom:10px}
.board-view .board-vheader .info{display:flex;align-items:center}
.board-view .board-vheader .info > *:not(:last-child){margin-right:10px;padding-right:10px;line-height:1;border-right:1px solid #e7ecf5}
.board-view .board-vfile{display:flex;flex-direction:column;gap:10px;background-color:#f8f8fa;padding:20px;margin:20px 0}
.board-view .board-vfile .item{display:flex;gap:10px;align-items:flex-start}
.board-view .board-vfile .tit{display:flex;align-items:center;gap:5px;font-weight:500;color:var(--color-m)}
.board-view .board-vfile .tit::after{font-family:'xeicon';content:"\ea89"}
.board-view .board-vfile .btn-file{text-decoration:underline}
.board-view .board-vfile .vfile-wrap{display:flex;flex-direction:column;gap:5px}
.board-view .board-vcon{border-bottom:1px solid #d6deed;padding:10px}
.board-nav{background-color:#f8f8fa;margin:20px 0;padding:20px;display:flex;gap:20px;flex-direction:column}
.board-nav .item{display:flex;align-items:center;gap:20px}
.board-nav .info{font-weight:500;flex-shrink:0;color:var(--color-m)}

/* WRITE */
.board-write{border-top:2px solid var(--color-m);margin:20px 0}
.board-write > table{width:100%}
.board-write tbody th{background-color:var(--color-light);padding:10px;text-align:center;border-bottom:1px solid var(--color-b);width:200px}
.board-write tbody td{padding:10px;border-bottom:1px solid var(--color-b)}

.board-write-file{display:flex;gap:5px;flex-direction:column}
.board-write-file .break-all{color:rgba(0,0,0,.8);font-size:.875rem;word-break:break-all}s
.board-write-file .file-wrap{display:flex;gap:5px}
.board-write-file .btn-file-hidden{position:absolute;right:0;top:0}
.board-write-file .img-preview img{display:none}

@media (max-width:1024px){
	.board-list-gallery ul{gap:20px;/*추가*/}
	.board-list-gallery li{width:calc((100% - 20px) / 2);/*수정*/}
}

@media (max-width:720px){
	.input-text{height:40px}
	.input-select{padding: 0 20px 0 13px;height: 40px;background-size: 10px;}

	.board-search .search-item:first-child{width:calc(100% - 40px)}
	.board-search .btn-search{width:40px;height:40px}
	.board-search .flex-box{justify-content:flex-start;flex-direction:column}
	.board-search .frm-date{display:flex;gap:5px;flex-wrap:wrap;align-items:center;margin-right:0}
	.board-search .frm-date .input-text{width:calc(48% - 5px)}
	.board-search .frm-date span{width:4%;text-align:center}
	.board-search .label-txt{margin-right:0;width:100%}
	.board-search .label-txt{width:auto}
	.btn-search{background-image:none;text-indent:0;text-align:center}

	.board-info{flex-wrap:wrap}
	.board-info .txt-info{display:block;margin-top:5px}
	.board-info .board-search{margin-top:5px;width:100%}
	.board-info .select-btn-wrap .btn-category{margin-left:2px;height:40px;width:auto;flex:1;min-width:auto;font-size:13px;word-break:keep-all}

	.mb-list thead{display:none}
	.mb-list tr{display:flex;flex-direction:column;gap:5px;padding:10px 0;border-bottom:1px solid var(--color-b)}
	.mb-list tbody td{display:flex;width:100%;padding:0}
	.mb-list tbody td{border-bottom:0}
	.mb-list .td-mb-none{display:none}
	.mb-list td::before{min-width:80px;font-weight:600;text-align:left}

	.td-subject{display:block}
	.td-addfile::before{content:"첨부파일"}
	.td-date::before{content:"작성일"}
	.td-name::before{content:"작성자"}
	.td-hit::before{content:"조회수"}

	.board-view .board-vheader{border-left-width:2px}
	.board-view .board-vheader .info{flex-wrap:wrap}
	.board-view .board-vheader .info > *:not(:last-child){margin-right:5px;padding-right:5px}
	.board-view .board-vheader .subject{font-size:1.125rem}

	.board-write tbody th{display:block;width:100%;text-align:left}
	.board-write tbody td{display:block}

	.board-list-gallery li{width:100%}
	.board-vcon-flex{flex-direction:column}
	.board-vcon-flex .img-wrap{width:100%}
	.board-vcon-flex .txt{padding:0 20px 20px 20px}
}