@charset "UTF-8";

.board-wrap { width: 100%; display: table; table-layout: fixed; margin-top: 15px; border-top: 1px solid #222; }
.board-wrap .board-head { display: table-header-group; }
.board-wrap .board-head > span.board-head-tit { display: table-cell; text-align: center; font-size: 1.4rem; font-weight: 500; border-bottom: 1px solid #d2d2d2; padding: 12px 0; }
.board-wrap .board-head > span.board-head-tit.num { width: 11%; }
.board-wrap .board-head > span.board-head-tit.view { width: 7%; }
.board-wrap .board-head > span.board-head-tit.title { width: calc(100% - 42%); }
.board-wrap .board-head > span.board-head-tit.writer { width: 12%; }
.board-wrap .board-head > span.board-head-tit.date { width: 12%; }
.board-wrap .board-body { display: table-row; width: 100%; }
.board-wrap .board-body.pin { background-color: #f8fafd; }
.board-wrap .board-body > div.board-cell { display: table-cell; vertical-align: middle; font-size: 1.4rem; text-align: center; padding: 12px 5px; border-bottom: 1px solid var(--line-color); color: #222; }
.board-wrap .board-body > div.board-cell:hover .cell-tit { text-decoration: underline; }
.board-wrap .board-body > div.board-cell.cell-tit { text-align: left; }
.board-wrap .board-body > div.board-cell.cell-tit:before { display: none; }
.board-wrap .board-body > div.board-cell.cell-tit a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

span.notice-pin img { width: 15px; height: 15px; position: relative; top: 2px; }
.mo-notice-pin { display: none; }
.empty-area { text-align: center; padding: 15px 0; font-size: 1.4rem; }

@media (max-width: 768px) { 
  .board-wrap .board-head { display: none; position: absolute; top: -9999px; left: -9999px; }
  .board-wrap .board-body { padding: 8px; display: block; border-bottom: 1px solid var(--line-color); }
  .board-wrap .board-body > div.board-cell { border-bottom: 0; text-align: left; padding: 3px 5px; position: relative; font-size: 1.3rem; }
  .board-wrap .board-body > div.board-cell.cell-tit { display: block; }
  .board-wrap .board-body > div.board-cell.num { display: none; }
  .board-wrap .board-body > div.board-cell.notice-pin-cell { display: none; }
  .board-wrap .board-body > div.board-cell.inline { display: inline-block; width: auto; margin-right: 15px; }
  .board-wrap .board-body > div.board-cell:not(.cell-tit) { font-size: 1.2rem; padding-top: 5px; }
  .board-wrap .board-body > div.board-cell:not(.cell-tit, .notice-pin-cell):before { padding-right: 5px; color: #7E7E7E; content: attr(data-label); font-weight: 600; }
  .board-wrap .board-body > div.board-cell:after { content: ""; width: 1px; height: 10px; background-color: #e2e2e2; top: 7px; right: -10px; position: absolute; }
  .board-wrap .board-body > div.board-cell:first-child:after, .board-wrap .board-body > div.board-cell.cell-tit:after, .board-wrap .board-body > div.board-cell:last-child:after { content: none; }
  .mo-notice-pin { display: inline-block; margin-right: 5px; }
  .mo-notice-pin img { width: 13px; height: 13px; position: relative; top: 3px; } 
}
@media (max-width: 500px) { 
  .board-wrap { margin-top: 5px; } 
}

/* detail */
.board-detail .title-area { padding: 40px 10px; border-top: 1px solid #000; border-bottom: 1px solid #aaa; }
.board-detail .title-area h3 { font-size: 2.5rem; word-break: break-all; }
.board-detail .title-area ul { margin-top: 25px; }
.board-detail .title-area ul li { display: inline-block; padding-right: 15px; color: #a1a1a1; position: relative; }
.board-detail .title-area ul li:after { position: absolute; content: ""; display: block; width: 1px; height: 10px; top: 5px; right: 5px; background: #c9ced6; }
.board-detail .title-area ul li:last-child:after { display: none; }
.board-detail .file-area { padding: 10px; border-bottom: 1px solid var(--line-color); font-size: 1.2rem; }
.board-detail .file-area img { width: 12px; margin-right: 10px; vertical-align: middle; }
.board-detail .file-area span { cursor: pointer; }
.board-detail .file-area ul li:last-child { margin-bottom: 0; }
.board-detail .file-area ul li img { width: 12px; margin-right: 10px; vertical-align: middle; }
.board-detail .text-area { padding: 50px 10px; font-size: 1.4rem; line-height: 1.8; }
.board-detail .text-area img { max-width: 100%; max-height: 100%; }

.board-control { position: relative; width: 100%; margin-top: 50px; }
.board-control ul { border-top: 1px solid #585858; }
.board-control ul li { padding: 12px 0; border-bottom: 1px solid var(--line-color); font-size: 1.3rem; }
.board-control ul li .left { position: relative; float: left; width: 100px; font-weight: 600; text-align: center; }
.board-control ul li .right { float: left; width: -webkit-calc(100% - 100px); width: calc(100% - 100px); }
.board-control ul li .right a { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; }
.board-control ul li .right a:hover { text-decoration: underline; }

@media (max-width: 768px) { .board-detail .title-area { padding: 20px 10px; }
  .board-detail .title-area h3 { font-size: 2rem; }
  .board-detail .title-area ul { margin-top: 15px; }
  .board-detail .text-area { padding: 30px 10px; } }