@charset "utf-8";

/************************************************* board *************************************************/
fieldset {border: none;}
legend,
caption {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); /* 구형 브라우저를 위해 사용 */ clip-path: polygon(0 0, 0 0, 0 0); /* inset(50%) 와 동일한 표현 */ border: 0; }
.table {margin-top: 15px; overflow-y: auto;}
.table table {width: 100%;min-width: 1110px; border-collapse: collapse; border-top: 2px solid #76BC1A;}
.boardTable table {table-layout: fixed; min-width: 100%;}
.layer .table table {min-width: 940px;}
.cnt201 .layer .table.bbsWrite table {min-width: 100%;}
.table table * {font-size: 1.6rem;}
.boardTable table td * {word-break:break-all;}
.table table tr {border-bottom: 1px solid #dbdbdb;}
.bbsList table tr:hover {background: #f0f5f2;}
.table table th {background: #fafafa; font-weight: 400; color: #222; border-right: 1px solid #dbdbdb; text-align: center;}
.table table th:last-child {border-right:0;}
.table table th,
.table table td {padding: 10px 12px;}
.layer .table table td {text-align: left;}
.table table td {color: #555; text-align: center; border-right: 1px solid #dbdbdb;}
.table table td:last-child {border-right: 0;}
.table table td a {color: #3794EB; text-decoration: underline;}
.table table td.boardTit a {display:inline-block; max-width: 100%; vertical-align: top; text-decoration: none !important; color:#555 !important; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.table table td.boardTit a:hover {text-decoration: underline !important;}
.table table .bline {border-right: 1px solid #dbdbdb !important;}
.table::-webkit-scrollbar {width:6px; height: 6px;}
.table::-webkit-scrollbar-thumb  {width: 30%; background: #999;}
.table::-webkit-scrollbar-track {background: #EAEAEA;}
.tableConWrap {display: flex; flex-direction: row; align-items: end; justify-content: space-between; margin-top: 10px;}
.tableConWrap .tableInfo {display: flex; flex-direction: row;}
.tableConWrap .tableInfo li:not(:last-child)::after {content: ""; width: 1px; height: 13px; background: #777; display: inline-block; margin: 0 15px;}
.tableConWrap .tableInfo li span {font-weight: 400; color: #222;}
.contentArea .subSearchArea {background: #f6f6f6; padding: 30px;}
.contentArea .subSearchArea .subSearchBox {flex-wrap: wrap; display: flex; flex-direction: row; justify-content: center; align-items: center;}
.contentArea .subSearchArea .subSearchBox.type1 {width:100%; max-width: 700px; margin: 0 auto;}
.contentArea .subSearchArea .subSearchBox .fldWrap {width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 6px;}
.contentArea .subSearchArea .subSearchBox.w1 .fldWrap {width: 100%;}
.contentArea .subSearchArea .subSearchBox.w2 .fldWrap {width: 50%;}
.contentArea .subSearchArea .subSearchBox.w3 .fldWrap {width: 33.33%;}
.contentArea .subSearchArea .subSearchBox.w4 .fldWrap {width: 25%;}
.contentArea .subSearchArea .subSearchBox .fldWrap .fldTit {width:180px; height: 45px; line-height: 45px; color:#222; font-weight: 400; flex-shrink: 0;}
.contentArea .subSearchArea .subSearchBox .fldWrap .fldCon {width:calc(100% - 180px);}
.contentArea .subSearchArea .subSearchBox .fldWrap .fldCon .wave {display: block; width: 18px; line-height: 45px; text-align:center; float:left;}
.contentArea .subSearchArea .subSearchBox .fldWrap .fldCon .selDate {width: calc(50% - 9px); float:left; background: #fff url(../../image/sub/calender.png) no-repeat 95% center; padding:10px 35px 10px 10px;}
.contentArea .subSearchArea .subSearchBox .fldWrap .fldCon select.formSel {margin-right: 5px;}
.contentArea .subSearchArea .subSearchBox .subSearch {width: calc(100% - 95px);}
.contentArea .subSearchArea .subSearchBox input[type="text"] {width:calc(100% - 95px); height: 45px; padding: 10px; border:1px solid #DBDBDB; border-radius: 4px;}
.contentArea .subSearchArea .subSearchBox .subSearchBtn {width: 90px; height: 45px; color: #fff; background: #76BC1A; margin-left: 5px; border-radius: 4px; flex-shrink: 0;}
/************************************************* write / view *************************************************/
.bbsWrite,
.bbsView {word-break: break-all;}
.bbsWrite table,
.bbsView table {min-width: 100%;}
.bbsWrite table input[type="text"],
.bbsWrite table input[type="password"] {width: 100%; height: 36px; line-height: 36px; border: 1px solid #dbdbdb;}
.bbsWrite table input[type="file"] {display: block;}
.bbsWrite table .pwTxt {margin-top: 5px;}
.bbsWrite table th button {vertical-align: text-bottom;}
.bbsWrite table th button.editAdd {width: 18px; height:19px; background: url(../../image/sub/editAdd.png) no-repeat;}
.bbsWrite table th button.editRemove {width: 18px; height:19px; background: url(../../image/sub/editRemove.png) no-repeat;}
.bbsWrite table td,
.bbsView table td {text-align: left;}
.bbsView table td.pd_content * {word-break: break-all;}
.bbsView .bbsTitle b {font-size: 1.8rem; font-weight: 400;}
.bbsView table td a {text-decoration: none; color: #555;}
.bbsWrite table td select { width: 150px; height: 36px;}
.bbsWrite .essential {vertical-align: super; display: inline-block; margin: 0 3px 10px 0;}

/************************************************* paging *************************************************/
.pagingWrap.pagingMo {display:none;}
.pagingWrap {display: flex;flex-direction: row;justify-content: center;margin-top: 50px;}
.pagingWrap li {margin: 0 2px;}
.pagingWrap li:hover {background: #f2f9e8;}
.pagingWrap li a { display: block; text-align: center; font-size: 1.6rem; width: 32px; height: 32px; line-height: 32px; border: 1px solid #e5e5e5; }
.pagingWrap li a.on {color: #fff; border-color: #76BC1A; background: #76BC1A; font-weight: 400;}
.pagingWrap li.btnPrev2 a {background: url(../../image/sub/prev2.png) no-repeat center;}
.pagingWrap li.btnPrev a {background: url(../../image/sub/prev.png) no-repeat center;}
.pagingWrap li.btnNext a {background: url(../../image/sub/next.png) no-repeat center;}
.pagingWrap li.btnNext2 a {background: url(../../image/sub/next2.png) no-repeat center;}

.checkBtWrap input[type="checkbox"] {position: absolute; opacity: 0; height: 0; width: 0;}
.checkBtWrap label {position: relative;}
.checkBtWrap input[type="checkbox"] + label::before {content: ""; width: 15px; height: 16px; background: url(../../image/sub/checkBt.png) no-repeat; position: relative; display: inline-block; margin-right: 3px; vertical-align: text-bottom;}
.checkBtWrap input[type="checkbox"]:checked + label::before {background: url(../../image/sub/checkBt_on.png) no-repeat;}

/*.digitalPagingWrap {display: flex;flex-direction: row;justify-content: center;margin-top: 50px;}
.digitalPagingWrap li {margin: 0 2px;}
.digitalPagingWrap li:hover {background: #f2f9e8; cursor: pointer;}
.digitalPagingWrap li{ display: block; text-align: center; font-size: 1.6rem; width: 32px; height: 32px; line-height: 32px; border: 1px solid #e5e5e5;}
.digitalPagingWrap li.on{ border-color: #76BC1A; background: #76BC1A; font-weight: 400;}
.digitalPagingWrap li.on a {color: #fff;}
.digitalPagingWrap li.btnPrev {background: url(../../image/sub/prev.png) no-repeat center;}
.digitalPagingWrap li.btnNext {background: url(../../image/sub/next.png) no-repeat center;}
*/
@media all and (max-width:1499px){
  .table {overflow-x: scroll;}
  .boardTable,
  .layer .table {overflow-x: auto;}
  /* .table table * {word-break: break-all;} */

}
@media all and (max-width:999px){
  .table.bbsWrite table {width: 100%;}
  .bbsView table tr {display: flex; flex-flow: row wrap; border-bottom: none;}
  .bbsView table col {width:auto !important;}
  .bbsView table th {width: 30%; border-bottom: 1px solid #dbdbdb;}
  .bbsView table td {width: 70%; min-height: 43.39px; border-bottom: 1px solid #dbdbdb; border-right: none;}
  .bbsView .pd_content,
  .bbsView .bbsTitle {width: 100% !important;}
  .contentArea .subSearchArea .subSearchBox.w4 .fldWrap {width:50%;}
}
@media all and (max-width:767px){
  .contentArea .subSearchArea {padding: 20px;}
  .contentArea .subSearchArea .subSearchBox .fldWrap .fldTit {color:#222; font-weight: 400;}
  .contentArea .subSearchArea .subSearchBox .subSearch,
  .contentArea .subSearchArea .subSearchBox input[type="text"] {width: calc(100% - 75px);}
  .contentArea .subSearchArea .subSearchBox .subSearchBtn {width:70px;}
  .contentArea .subSearchArea .subSearchBox.w2 .fldWrap,
  .contentArea .subSearchArea .subSearchBox.w3 .fldWrap {width:100%;}
  .tableConWrap {flex-direction: column-reverse; align-items: flex-end;}
  .tableConWrap .tableInfo {margin-top: 10px;}

  .bbsWrite,
  .bbsView,
  .boardTable,
  .bbsWrite table,
  .bbsView table,
  .boardTable table,
  .bbsWrite table colgroup,
  .bbsView table colgroup,
  .boardTable table colgroup,  
  .bbsWrite table thead,
  .bbsView table thead,
  .boardTable table thead,
  .bbsWrite table tbody,
  .bbsView table tbody,
  .boardTable table tbody,
  .bbsWrite table tr,
  .bbsView table tr,
  .boardTable table tr,
  .bbsWrite table th,
  .bbsView table th,  
  .boardTable table td,
  .bbsWrite table td,
  .bbsView table td{display: block; width: 100%;}
  .bbsWrite table th,
  .bbsView table th {border-right: 0; text-align: left; border-bottom: 1px solid #dbdbdb;}
  .boardTable table thead tr {overflow: hidden; position:absolute; top: -10000px; left: -10000px; width: auto; height: 1px; text-indent: -9999px; z-index: -9999;}
  .boardTable table tbody td {text-align: left; padding: 3px 5px; border-right: 0;}
  .boardTable table tbody td[data-board-header]::before {content: attr(data-board-header); width: 55px; display:inline-block; font-weight: 400; padding-right:15px;}
  .boardTable table td.boardTit a {max-width: calc(100% - 75px);}
  .boardTable table tr {padding: 8px;}
  .bbsWrite table input[type="text"], .bbsWrite table input[type="password"] {width: 100% !important;}
}
@media all and (max-width:600px){
  .table table th,
  .table table td {padding: 6px 8px;}	
	.contentArea .subSearchArea .subSearchBox .fldWrap .fldCon {flex-wrap: wrap;}
	.contentArea .subSearchArea .subSearchBox .fldWrap .fldCon select.formSel {margin-right: 0 !important; margin-bottom:5px; width: 100% !important;}
	.contentArea .subSearchArea .subSearchBox .fldWrap .fldCon .selDate {background-position: 90% center;}
	.pagingWrap.pagingPc {display:none;}
	.pagingWrap.pagingMo {display:flex;}
}
@media all and (max-width:500px){
  .contentArea .subSearchArea .subSearchBox .subSearch,
  .contentArea .subSearchArea .subSearchBox input[type="text"] {width: 100%; margin-bottom: 5px;}
  .contentArea .subSearchArea .subSearchBox .subSearchBtn {width: 100%; margin-left: 0;}
  .contentArea .subSearchArea .subSearchBox .fldWrap {flex-direction: column;}
  .contentArea .subSearchArea .subSearchBox .fldWrap .fldCon {width:100%;}
  .contentArea .subSearchArea .subSearchBox .fldWrap .fldTit {height:35px; line-height:35px;}
  .contentArea .subSearchArea .subSearchBox.w4 .fldWrap {width:100%;}
}