@charset "utf-8";
.board img { max-width: 100%; }
.board .title { margin-top: 5em; margin-bottom: 1em; }
.board .list { margin-top: 1em; }

/* 버튼 */
.bo-btn-list { display: flex; justify-content: flex-end; }
.bo-btn-list > li { position: relative; margin-left: 0.3em; }
.bo-btn-list > li > .btn { width: 1.5em; line-height: 1.5; display: inline-block; border: 0; background-color: transparent; color: #bbb; text-align: center; }
.bo-btn-list > li > .btn:hover { color: #333; }
.bo-btn-opt { font-size: 0.75em; padding: 0.5em; flex-direction: column; position: absolute; right: 0; top: 100%; background-color: #fff; border: 1px solid #ddd; display: none; z-index: 999; }
.bo-btn-opt button, .bo-btn-opt a { color: #999; white-space: nowrap; background-color: transparent; border: 0; margin-bottom: 0.5em; display: inline-block; }
.bo-btn-opt button:last-child, .bo-btn-opt a:last-child { margin-bottom: 0; }
.bo-btn-opt button:hover, .bo-btn-opt a:hover { color: #555; }

.btn_confirm { margin-top: 3em; }
.btn_confirm .btn { height: 2.8em; line-height: 2.8; padding: 0 3em; font-size: 1.25em; }

/* 작성 */
.frm-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; }
.frm-box { width: 100%; margin-bottom: 1em; display: flex; align-items: flex-start; }
.frm-box.half { width: 49%; }
.frm-label { width: 8em; line-height: 2.6; height: 2.6em; }
.frm-label i { line-height: inherit; vertical-align: top; margin-right: 0.3em; }
.frm-input { display: flex; flex-grow: 1; position: relative; }
.frm-input input[type='text'],
.frm-input input[type='password'],
.frm-input input[type='date'],
.frm-input select,
.frm-input textarea,
.frm-input .editor { flex-grow: 1; }
.frm-input .btn_frmline { margin-left: 0.5em; }
.frm-input span { margin: 0 0.5em; line-height: 2.6; display: inline-block; }
.frm-option { line-height: 1.5; height: 1.5em; }
.frm-option .frm-label { line-height: inherit; height: inherit; }

#autosave_pop { font-size: 0.875em; position: absolute; top: 115%; right: 0; width: 30em; max-height: 10em; border: 1px solid #aaa; background-color: #fff; z-index: 10; display: none; }
html.no-overflowscrolling #autosave_pop { height: auto; max-height: 10000px !important; } /* overflow 미지원 기기 대응 */
#autosave_pop strong { display: none; }
#autosave_pop ul { padding: 0.5em; }
#autosave_pop li { padding: 0.5em; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; }
#autosave_pop li span { color: #999; }
.autosave_del { background:url(./img/close_btn.png) no-repeat 50% 50%; text-indent:-999px; overflow:hidden; width: 1.25em; height: 1.25em; border: 0; }
.autosave_close { display: block; width: 100%; height: 2.5em; background-color: #f5f5f5; color: #777; border: 0; border-top: 1px solid #ccc; }
.autosave_close:hover { background-color: #f1f1f1; }

/* 상세 */
.vi-title p { margin-bottom: 1em; display: flex; align-items: center; }
.vi-title p b { font-size: 1.25em; margin-right: 1em; color: #2778D7; }
.vi-title p span { font-size: 0.875em; color: #999; }
.vi-title p span::after { content:"|"; display: inline-block; vertical-align: top; margin: 0 0.5em; }
.vi-title p span:last-child::after { display: none; }
.vi-title h2 { font-size: 2em; font-weight: 700; }
.vi-con { padding: 2em 0; }
.vi-con .vi-img { margin-bottom: 1em; }
.vi-box { margin-bottom: 0.5em; border: 1px solid #ddd; }
.vi-box:hover { color: #2778D7; border-color: #2778D7; }
.vi-box a { padding: 1em; display: flex; justify-content: space-between; }
.vi-box i { margin-right: 0.3em; }
.vi-box strong { font-weight: 400; }
.vi-box small { opacity: 0.6; font-size: 0.875em; }
.vi-box span { opacity: 0.6; }

/* 목록 */
.tab { display: flex; text-align: center; }
.tab a { font-size: 1.25em; width: 33.33%; line-height: 2.8; background-color: #f5f5f5; border: 1px solid #ddd; color: #777; }
.tab a.active,.tab a:hover { background-color: var(--primary); color: #fff; }

.list .all_chk { margin-bottom: 1em; }
.list li { position: relative; }
.list li .chk_box { position: absolute; top: 0; left: 0; z-index: 1; }

.list-text ul { border-top: 2px solid #000; display: table; width: 100%; border-collapse: collapse; text-align: center; }
.list-text li { border-bottom: 1px solid #ddd; display: table-row }
.list-text li.thead { font-size: 1.125em; font-weight: 700; }
.list-text li > div { display: table-cell; padding: 0.8em; }
.list-text li .num { width: 5%; }
.list-text li .subject { text-align: left; }