@charset "utf-8";

/* 문의내역 보드 */
.board-title { position: relative; width: 100%; height: auto; font-size: 1.4rem; font-weight: 600; color:#555555 ;}
.board-title p { padding-right: 7px; display: inline-block;}
.board-title p .bold{  color: #6d7dff;}

.answer { padding: 20px; }

@media (max-width: 800px) {
.board-title { font-size: 1.2rem;}
}

.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 #d2d2d2; 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 #d2d2d2; }
  .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; } 
}