@charset "utf-8";
.cke_sc { display: none !important; } /*단축키 일람 없애기 */
#board-wrap { position: relative; margin-bottom: 35px; }
#board-wrap > .board-wrap-inner { }
.board-sub-menu { position: relative; width: 100%; display: flex; justify-content: center; }
.board-sub-menu > ul { display: flex; flex-wrap: wrap; flex: 1 1 auto; max-width: 100%; }
.board-sub-menu > ul > li { position: relative; flex: 1 1 25%; max-width: 25%; }
.board-sub-menu > ul > li > a { display: block; text-align: center; padding: 16px 26px; font-size: 17px; font-weight: 500; border: 1px solid var(--boxbrbase); white-space: nowrap; }
.board-sub-menu > ul > li:not(:first-child) > a { border-left: 1px solid transparent; }
.board-sub-menu > ul > li > a.on { background-color: var(--darknavy); border: 1px solid var(--darknavy); color: var(--colorwhite); }
.board-container { position: relative; width: 100%; }
.board-card { }
@media(max-width: 768px) {
}

/* board button */
.board-btn-wrap { display: flex; margin: 15px 0; }
.board-btn-wrap > .btn { min-width: 90px; margin-right: 7px; }
.board-btn-wrap > .btn:last-child { margin-right: 0; }
.btn-board-write  { background-color: var(--darknavy); color: var(--colorwhite); }
.btn-board-list   { background-color: var(--accent); color: var(--colorwhite); }
.btn-board-modify { background-color: var(--darkmint);  color: var(--colorwhite); }
.btn-board-delete { background-color: var(--darkbeige);  color: var(--colorwhite); }
.btn-board-cancel { background-color: var(--colorgray);  color: var(--colorwhite); }
.btn-board-submit { background-color: var(--colorred);  color: var(--colorwhite); }
@media(max-width: 768px) {
    .board-btn .btn { font-size: 12px; }
}

/* 카테고리 */
.board-category { position: relative; width: 100%; margin: 25px 0 17px 0; overflow: hidden; overflow-x: auto; padding-bottom: 8px; }
.board-category > ul { display: flex; }
.board-category > ul > li { display: block; border: 1px solid #dee2e6; text-align: center; }
.board-category > ul > li:not(:first-child) { border-left: 0; }
.board-category > ul > li:first-child { border-top-left-radius: .25rem; border-bottom-left-radius: .25rem; }
.board-category > ul > li:last-child { border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; }
.board-category > ul > li > a { display: inline-block; padding: .375rem 1rem; white-space: nowrap; font-size: 14px; }
.board-category > ul > li.cate-on { background: #f6f6f6 }
.board-category > ul > li.cate-on > a { }
@media(max-width: 768px) {
    .board-category > ul > li > a { font-size: 12px; }
}

/* list */
.board-top { position: relative; width: 100%; display: flex; margin: 0 0 15px 0; }
.board-top .board-total { display: flex; align-self: center; font-size: 15px; }
.board-top .board-total > span { padding: .375rem .75rem; }
.board-top .board-total > .total { display: inline-block; border: 1px solid #dee2e6; border-radius: .375rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.board-top .board-total > .page { display: inline-block; border: 1px solid #dee2e6; border-radius: .375rem; border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.board-top .board-search { margin-left: auto; }
.board-top .board-search + .board-btn { margin-left: 10px; }
.board-top .board-search-form { display: flex; }
.board-top .board-search-form > .sch_input { padding: .375rem .75rem; border: 1px solid #dee2e6; max-width: 160px; border-radius: .5rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.board-top .board-search-form > .sch_btn { background-color: transparent; border: 1px solid #dee2e6; padding: 0 1rem; border-radius: .5rem; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }
.board-top .board-search-form > .sch_btn { font-size: 16px; }
@media(max-width: 768px) {
    .board-top { flex-wrap: wrap; }
    .board-top .board-total { order: 1; }
    .board-top .board-total > span { font-size: 12px; padding: .375rem .5rem; }
    .board-top .board-search { order: 2; }
    .board-top .board-search-form { display: flex; }
    .board-top .board-search-form > .sch_input { font-size: 12px; max-width: 120px; }
    .board-top .board-search-form > .sch_btn { font-size: 12px; }
    .board-top .board-top-btn { flex: 1 1 100%; margin: 0; margin-bottom: 8px; justify-content: flex-end; order: 0; }
}`
.board-list-wrapper { position: relative; width: 100%; }
.board-list-table { }
.board-list-table > .board-list-row { display: flex; border-bottom: 1px solid var(--boxbrbase); }
.board-list-table > .board-list-row > div { position: relative; flex: 1 1 auto; padding: 12px 0; text-align: center;  }
.board-list-table > .board-list-head > div { background-color: var(--boxbgbase); border-top: 2px solid var(--darknavy); }
.board-list-table > .board-list-body > div { align-self: center; }
.board-list-table > .board-list-row > div.num { flex: 0 0 80px; max-width: 80px; }
.board-list-table > .board-list-row > div.subject { flex: 1 1 auto; max-width: 100%; }
.board-list-table > .board-list-row > div.writer { flex: 0 0 120px; max-width: 120px; }
.board-list-table > .board-list-row > div.date { flex: 0 0 120px; max-width: 120px; }
.board-list-table > .board-list-row > div.good { flex: 0 0 80px; max-width: 80px; }
.board-list-table > .board-list-row > div.nogoods { flex: 0 0 80px; max-width: 80px; }
.board-list-table > .board-list-body > div.subject { display: flex; width: 100%; text-align: left; }
.board-list-table > .board-list-body > div.subject > div { align-self: center; }
.board-list-table > .board-list-body > div.subject > .cont { display: flex; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-image { flex: 0 0 3rem; max-width: 3rem; height: 3rem; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-image img { width: 100%; height: auto; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-image + .cont-subject { margin-left: 20px; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject { display: flex;align-self: center; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > .wr { display: inline-block; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > .wr-notice { color: var(--darknavy); }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > .wr-current { color: var(--fontaccent); }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > .wr-new { color: var(--colorred); }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > .wr-replay { }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > .wr-secret { }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > span + a { margin-left: 5px; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > a + span { margin-left: 3px; }
.board-list-table > .board-list-body > div.subject > .cont > .cont-subject > span + span { margin-left: 3px; }
.board-list-table > .board-list-empty { flex: 1 1 100%; max-width: 100%; padding: 50px; text-align: center; }

/* 글 읽기 */
.board-view-wrap { }
.article-subject { position: relative; padding: 16px 8px; background-color: var(--boxbgbase); border-top: 2px solid var(--darknavy); border-bottom: 1px solid var(--boxbrbase); font-size: 16px; font-weight: 500; }
.article-meta-info { display: flex; padding: 6px 12px; border-bottom: 1px solid var(--lightgray); }
.article-meta-info .meta-profile { width: 50px; height: 50px; padding: 3px; }
.article-meta-info .meta-profile img { width: 100%; height: auto; border-radius: 50%; }
.article-meta-info .meta-info { align-self: center; flex: 1 1 auto; max-width: 100%; margin-left: 10px; font-size: 13px; }
.article-meta-info .meta-info .meta-item { display: flex; }
.article-meta-info .meta-info .meta-item > .wr-meta { position: relative; align-self: center; display: inline-block; margin-right: 17px; }
.article-meta-info .meta-info .meta-item > .wr-meta:after { content: ''; position: absolute; top: 50%; right: -8px; transform: translateY(-50%); border-right: 1px solid #dee2e6; height: 12px; }
.article-meta-info .meta-info .meta-item > .wr-meta:last-child:after { display: none; }
.article-meta-info .meta-info .meta-item > .wr-meta > span { display: inline-block; margin-right: 3px; }
.article-meta-info .meta-info .meta-item > .wr-meta.wr-good { display: flex; }
.article-meta-info .meta-info .meta-item > .wr-meta.wr-good > span.icon-inner { align-self: center; display: inline-flex; align-items: center; width: 1rem; height: 1rem; color: #ff5a57; }
.article-meta-info .meta-info .meta-item > .wr-meta.wr-good > span.icon-inner svg { fill: #ff5a57; width: 100%; height: 100%; }
@media(max-width: 768px) {
    .article-subject { font-size: 14px; }
    .article-meta-info { display: flex; padding: 15px 0; border-bottom: 1px solid #dee2e6; }
    .article-meta-info .meta-profile { width: 42px; height: 42px; padding: 3px; }
    .article-meta-info .meta-profile img { width: 100%; height: auto; border-radius: 50%; }
    .article-meta-info .meta-info { align-self: center; flex: 1 1 auto; max-width: 100%; margin-left: 7px; font-size: 12px; }
    .article-meta-info .meta-info .meta-item { display: flex; }
    .article-meta-info .meta-info .meta-item > .wr-meta { position: relative; align-self: center; display: inline-block; margin-right: 13px; white-space: nowrap; }
    .article-meta-info .meta-info .meta-item > .wr-meta:after { content: ''; position: absolute; top: 50%; right: -7px; transform: translateY(-50%); border-right: 1px solid #dee2e6; height: 12px; }
    .article-meta-info .meta-info .meta-item > .wr-meta:last-child:after { display: none; }
    .article-meta-info .meta-info .meta-item > .wr-meta > span { display: inline-block; margin-right: 3px; }
    .article-meta-info .meta-info .meta-item > .wr-good { }
    .article-meta-info .meta-info .meta-item > .wr-good > span.icon-inner { width: 0.85rem; height: 0.85rem;}
    .article-meta-info .meta-info .meta-item > .wr-good > span.icon-inner svg { }
}
#article-view-file { padding: 5px; }
#article-view-file > ul { }
#article-view-file > ul > li { font-size: 13px; border-bottom: 1px dashed #ddd; padding: 0 0 3px 5px; }
#article-view-file > ul > li > i { margin-right: 5px; }
#article-view-file > ul > li > a { }
#article-view-file > ul > li > span { }
#article-view-link { padding: 5px; }
#article-view-link > ul { }
#article-view-link > ul > li { font-size: 13px; border-bottom: 1px dashed #ddd; padding: 0 0 3px 5px; }
#article-view-link > ul > li > i { margin-right: 5px; }
#article-view-link > ul > li > a { }
#article-view-link > ul > li > span { }
.article-movie { padding: 25px 12px; text-align: center; }
.article-content { position: relative; width: 100%; padding: 25px 12px; font-size: 15px; border-bottom: 1px solid var(--boxbrbase); }
.article-content img { width: auto !important; height: auto !important; max-width: 100% !important; }
@media(max-width: 768px) {
    .article-content { font-size: 14px; }
}
.article-face { display: flex; justify-content: center; margin: 0; }
.article-face > .btn-face { position: relative; background-color: transparent; border-radius: 0; padding: 0; }
.article-face > .btn-face > .face-ico { width: 50px; height: 40px; padding: 8px 12px 0 12px; }
.article-face > .btn-face.face-nogood > .face-ico { width: 50px; height: 40px; padding: 11px 12px 0 12px; }
.article-face > .btn-face.face-good + .face-nogood { }
.article-face > .btn-face > .face-ico svg { width: 100%; height: 100%; }
.article-face > .btn-face.face-good > .face-ico svg { fill: #ff5a57; }
.article-face > .btn-face.face-nogood > .face-ico svg { fill: #333; }
.article-face > .btn-face.face-good > b.face_num { color: #ff5a57; line-height: 1; }
.article-face > .btn-face.face-nogood > b.face_num { color: #333; line-height: 1; }
.article-btn-wrap { display: flex; width: 100%; margin: 18px 0 0 0; }
.article-btn-wrap > .article-button-group { display: flex; align-self: center; }
.article-btn-wrap > .article-button-group:last-child { margin-left: auto; }
.article-btn-wrap > .article-button-group > .btn:not(:last-child) { margin-right: 5px; }

.article-view-nb { margin: 15px 0; padding: 0; list-style: none; position: relative; clear: both; text-align: left; border-top: 1px solid #ddd; font-size: 1rem; font-weight: 300; }
.article-view-nb:after { display: block; visibility: hidden; clear: both; content: ""; }
.article-view-nb li { border-bottom: 1px solid #ddd; border-top: 0; padding: 10px; display: flex; align-items: center; justify-content: space-between; }
.article-view-nb li:hover { background: #f6f6f6; }
.article-view-nb li > * { display: block; white-space: nowrap; }
.article-view-nb li .nb_tit { display: inline-block; padding-right: 10px; color: #3f4553; }
.article-view-nb li .nb_tit i { margin-right: 5px; }
.article-view-nb li a { margin-right: 5px; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.article-view-nb li .nb_date { float: right; color: #888; }
@media(max-width: 768px) {
    .article-view-nb { font-size: 13px; }
    .article-view-nb:after { }
    .article-view-nb li { }
    .article-view-nb li:hover { }
    .article-view-nb li > * { }
    .article-view-nb li .nb_tit { }
    .article-view-nb li .nb_tit i {  }
    .article-view-nb li a { }
    .article-view-nb li .nb_date { }
}
/* comment */
.comment-list-box { position: relative; width: 100%; display: flex; padding: 8px 0 12px 0; border-bottom: 1px solid #f6f6f6; margin-bottom: 8px; font-size: 14px; }
.comment-list-box:last-child { border-bottom: 0; margin-bottom: 0; }
.comment-depth1 { padding-left: 25px; }
.comment-depth2 { padding-left: 50px; }
.comment-list-box > .comment-profile { flex: 0 0 50px; max-width: 50px; }
.comment-list-box > .comment-profile img { width: 100%; height: auto; border-radius: 50%; }
.comment-list-box > .comment-content { flex: 1 1 auto; max-width: 100%; padding: 8px 0 4px 10px; }
.comment-header { display: flex; width: 100%; }
.comment-header > .ico-name { font-size: 14px; font-weight: 600; }
.comment-header > .ico-date { display: inline-block; margin-left: 5px; align-self: center; font-size: 13px; }
.comment-header > .ico-date i { font-size: 14px; margin-right: 2px; }
.comment-header > .comment-btn { margin-left: auto; display: flex; font-size: 12px; }
.comment-header > .comment-btn > li { position: relative; }
.comment-header > .comment-btn > li:not(:last-child) { margin-right: 2px; }
.comment-header > .comment-btn > li > span { display: inline-block; cursor: pointer; }
.comment-header > .comment-btn > li > span.cmt-icon { padding: 1px 8px; border: 1px solid #dee2e6; border-radius: .25rem; }
.comment-header > .comment-btn > li > span.cmt-icon-face { display: flex; }
.comment-header > .comment-btn > li > span.cmt-icon-face .ico-img { display: inline-block; padding: 0 3px; }
.comment-header > .comment-btn > li > span.cmt-icon-good .ico-img { color: #ff5a57; }
.comment-header > .comment-btn > li > span.cmt-icon-good .ico-num { color: #ff5a57; }
.comment-header > .comment-btn > li > span.cmt-icon-nogood .ico-img { color: #333; }
.comment-header > .comment-btn > li > span.cmt-icon-nogood .ico-num { color: #333; }
.comment-body { padding: 5px 0 8px 5px; }
.face_msg { display: none; position: absolute; left: -50%; top: calc( 100% + 3px ); padding: 0 12px; height: 23px; line-height: 23px; width: auto; color: #fff; text-align: center; white-space: nowrap; border-radius: 15px; border: 0; font-size: 12px; z-index: 1001; }
.face_msg.msg_good { background: rgba(231,68,113,.85); }
.face_msg.msg_nogood { background: rgba(1,134,190,.85); }
/* comment write */
#comment-write { margin: 50px 0 25px 0; }
.fcommentw { }
.fcommentw .cw-header { display: flex; padding-bottom: 12px; }
.fcommentw .cw-header > .cw-writer { }
.fcommentw .cw-header > .cw-option { margin-left: auto; align-self: center; display: flex; }
.fcommentw .cw-form { }
.fcommentw .cw-footer { display: flex; justify-content: space-between; margin-top: 10px; }

.comment-bar { position: relative; border-bottom: 1px solid #3f4553; color: #3f4553; font-size: 16px; margin-bottom: 10px; }
.comment-bar b { display: inline-block; font-weight: 400; border-bottom: 2px solid #3f4553; padding: 5px 15px 5px 5px; }
.comment-bar b i { font-size: 18px; }
.comment-bar b .cmt_total { display: inline-block; padding-left: 5px; font-size: 12px; color: #e81e25; }
.cw_form_tail { display: flex; }
.cw_form_tail .cw_btn { margin-left: auto; }
/* emoticon */
.myModal.emoticon .myModal-header { background: #fff; border-bottom: 1px solid #ddd; }
.myModal.emoticon .myModal-header > .header-title > span { display: inline-block; padding-right: 15px; color: #000; font-weight: 600; }
.myModal.emoticon .myModal-header button.closex:before,
.myModal.emoticon .myModal-header button.closex:after,
.myModal.emoticon .myModal-footer button.closex:before,
.myModal.emoticon .myModal-footer button.closex:after { background-color: #000; }
.emoti_wrapper { }
.emoti_wrapper .emoti_cate { text-align: right; margin-bottom: 10px; }
.emoti_wrapper .emoti_list { padding: 0 25px; }
.emoti_wrapper .emoti_box { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.emoti_wrapper .emoti_box .emoti_data { padding: 0 5px; margin-bottom: 10px; }
.emoti_wrapper .emoti_box .emoti_data img { border: 1px solid #ddd; cursor: pointer; }
@media (max-width: 768px) {
.emoti_wrapper .emoti_list { padding: 0 5px; }
    .myModal.emoticon .myModal-header button.closex { width: 50px; height: 50px; }
}






















.navi-wrap { position: relative; display: flex; padding: 12px 0 8px 0; }
.navi-wrap > .navi-title { }
.navi-wrap > .navi-pos { margin-left: auto; align-self: flex-start; display: flex; }
.navi-wrap > .navi-pos > a { position: relative; display: block; margin-right: 26px; font-size: 14px; color: #000; font-weight: 400; }
.navi-wrap > .navi-pos > a:last-child { margin-right: 0; }
.navi-wrap > .navi-pos > a:after { position: absolute; content: '＞'; width: 26px; display: inline-block; text-align: center; }
.navi-wrap > .navi-pos > a:last-child:after { content: ''; display: none; }
@media(max-width: 768px) {
.navi-wrap { }
.navi-wrap > .navi-title { display: none; }
.navi-wrap > .navi-pos { margin: 0; padding-left: 10px; }
}

/* 글 쓰기 */
#board-write-wrapper { margin-top: 25px; padding: 50px; }
.dtable-form { display: flex; flex-wrap: wrap; border: 0; }
.dtable-form > .dl { display: flex; flex: 1 1 50%; border-bottom: 1px solid transparent; margin-bottom: .5rem; }
.dtable-form > .dl:last-child { }
.dtable-form > .dl.dlf { flex: 1 1 100%; }
.dtable-form > .dl > .dth { flex: 1 1 25%; max-width: 25%; background-color: transparent; border-color: transparent; align-self: center; }
.dtable-form > .dl > .dtd { flex: 1 1 auto; max-width: 100%; align-self: center; }
.dtable-form > .dl.dlf > .dth { flex: 1 1 12.5%; max-width: 12.5%; background-color: transparent; border-color: transparent; }
.dtable-form > .dl.dlf > .dtd { flex: 1 1 auto; max-width: 100%; align-self: center; }
.dtable-form select { min-width: 120px; }
.dtable-form textarea { border: 1px solid #dee2e6; }
.dtable-form .frm_input { width: 100%; padding: .375rem .75rem; border: 1px solid #dee2e6; }
.wr_option { flex: 1 1 auto; border: 1px solid #dee2e6; border-bottom: 0; background: #fafafa; padding: 5px; }
.wr_option .wr_option_header { display: flex; }
.wr_option .wr_option_header > div { padding: 2px 8px; border: 1px solid #dee2e6; font-size: 12px; background: #fff; cursor: pointer; }
.wr_option .wr_option_header > div > i { margin-right: 3px; }
.wr_option .wr_option_header > div:not(:last-child) { margin-right: 5px; }
.wr_option .wr_option_movie { display: none; margin-top: 5px; padding-top: 5px; border-top: 1px dashed #dee2e6; }
.wr_option .wr_option_movie.on { display: block; }
.dtable-form + .board-btn-wrap { margin: 25px; display: flex; justify-content: center; }
.label-file { position: relative; width: 100%; height: 40px; border: 1px solid #ccc; border-radius: .25rem; cursor: pointer; }
.label-file:hover { border-color: #ccc; }
.label-file:before { position: absolute; top: 8px; left: 10px; content: attr(data-hold); font-size: 14px; }
.label-file:after { position: absolute; top: -1px; right: 0; bottom: -1px;content: attr(data-btn); font-size: 14px; background: #000; color: #fff; line-height: 40px; width: 80px; text-align: center; display: block; border-top-right-radius: .25rem; border-bottom-right-radius: .25rem; border: 1px solid transparent; }
.file-input { opacity: 0; position: absolute; z-index: -1; margin: 0; padding: 0; display: block; cursor: pointer; width: 100%; }


#board-list-top { position: relative; margin-bottom: 20px; display: flex; }
/* 리스트 */
.board-templete-list { position: relative; width: 100%; }
.board-templete-list > li { position: relative; border-bottom: 1px solid #dee2e6; }
.board-templete-list > li:last-child { border-bottom: 0; }
.board-templete-list > li:hover { background-color: #f8f9fa; }
.board-templete-list > li > .item-list { position: relative; display: flex; padding: .75rem 1rem; width: 100%; }
.board-templete-list > li > .item-list > .list-image { flex: 0 0 3rem; max-width: 3rem; height: 3rem; margin-right: 10px; }
.board-templete-list > li > .item-list > .list-image img { width: 100%; height: 100%; }
.board-templete-list > li > .item-list > .list-cont { position: relative; flex: 1 1 auto; max-width: 100%; }
.board-templete-list > li > .item-list > .list-cont .list-subject { display: flex; }
.board-templete-list > li > .item-list > .list-cont .list-subject > .list-icon { display: inline-block; flex: 0 0 auto; margin-right: 5px; color: #6c757d; line-height: 1.2; }
.board-templete-list > li > .item-list > .list-cont .list-subject > .list-icon.new { color: #dc3545; }
.board-templete-list > li > .item-list > .list-cont .list-subject > a { flex: 0 0 auto; max-width: 100%; line-height: 1.2; }
.board-templete-list > li > .item-list > .list-cont .list-subject > a .wr-subject { word-break: keep-all; }
.board-templete-list > li > .item-list > .list-cont .list-subject > a + .list-icon { margin-left: 8px; }
.board-templete-list > li > .item-list > .list-cont .list-meta { display: flex; font-size: 13px; color: #868e96; padding-top: .375rem; }
.board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta { position: relative; align-self: center; display: inline-block; margin-right: 17px; }
.board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta:after { content: ''; position: absolute; top: 50%; right: -8px; transform: translateY(-50%); border-right: 1px solid #dee2e6; height: 12px; }
.board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta:last-child:after { display: none; }
.board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta > span { display: inline-block; margin-right: 3px; }
.board-templete-list > li > .item-list > .list-cont .list-meta > .wr-good { display: flex; }
.board-templete-list > li > .item-list > .list-cont .list-meta > .wr-good > span.icon-inner { align-self: center; display: inline-flex; align-items: center; width: 1rem; height: 1rem; color: #ff5a57; }
.board-templete-list > li > .item-list > .list-cont .list-meta > .wr-good > span.icon-inner svg { fill: #ff5a57; width: 100%; height: 100%; }
.board-templete-list > li > .item-list > .list-comment { flex: 0 0 auto; align-self: center; padding: 0.5rem 1rem; margin-left: 1rem; font-size: 0.875rem; font-weight: 500; color: #495057; border: 1px solid #e9ecef; background: #f8f9fa; }
.board-empty { min-height: 240px; text-align: center; line-height: 240px; }
@media(max-width: 768px) {
    #board-list-wrapper .board-card { padding: 15px 7px; }
    .board-templete-list > li > .item-list { padding: .75rem 0; }
    .board-templete-list > li > .item-list > .list-image { flex: 0 0 2rem; max-width: 2rem; height: 2rem; margin-right: 7px; }
    .board-templete-list > li > .item-list > .list-image img { width: 100%; height: 100%; }
    .board-templete-list > li > .item-list > .list-cont .list-subject { font-size: 14px; }
    .board-templete-list > li > .item-list > .list-cont .list-subject > .list-icon { }
    .board-templete-list > li > .item-list > .list-cont .list-subject > .list-icon.new {  }
    .board-templete-list > li > .item-list > .list-cont .list-subject > a { }
    .board-templete-list > li > .item-list > .list-cont .list-subject > a .wr-subject { word-break: keep-all; }
    .board-templete-list > li > .item-list > .list-cont .list-subject > a + .list-icon { }
    .board-templete-list > li > .item-list > .list-cont .list-meta { font-size: 11px; }
    .board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta { margin-right: 13px; }
    .board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta:after { right: -7px; }
    .board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta:last-child:after { }
    .board-templete-list > li > .item-list > .list-cont .list-meta > .wr-meta > span { }
    .board-templete-list > li > .item-list > .list-cont .list-meta > .wr-good { }
    .board-templete-list > li > .item-list > .list-cont .list-meta > .wr-good > span.icon-inner { }
    .board-templete-list > li > .item-list > .list-cont .list-meta > .wr-good > span.icon-inner svg { }
    .board-templete-list > li > .item-list > .list-comment { margin-left: .75rem; font-size: 0.75rem; padding: 0.375rem 0.75rem; }
}