.bbs{}

.bbs .dotbogi { z-index:5;opacity: 0.5;}
.bbs #skeyword {padding-left:40px;background-repeat: no-repeat;background-image: url(/web/mastern/Data/@ThisSite/img/dotbogi2.png);background-position: 5px 4px;/* background-color: rgba(0, 0, 0, 0.5); */}
.bbs #category {  }

.bbs a { color: #333 }

.bbs table tr { }

    .bbs table tbody { border-top: 2px solid #081D58; border-bottom: 2px solid #081D58; ;border-left: 1px solid #dee2e6; border-right: 1px solid #dee2e6 }
.bbs table tr.on a{color: white;padding-top: 3px;}
.bbs table tr.on td { background-color: #081D58; color: white; }

.bbs table tr:hover.on ,.bbs table tr:focus.on {background-color: #081D58;color: white;}
    .bbs table.table-hover > tbody > tr.on > td, .bbs table.table-hover > tbody > tr.on > th,
    .bbs table.table-hover > tbody > tr:hover  > td, .bbs table.table-hover > tbody > tr:hover  > th { background-color: #092470 !important; color:white}
        .bbs table.table-hover > tbody > tr:hover   a { color: white !important; }

.bbs table tr td {padding: 5px 10px;position:relative; background-color:white}
.bbs table tr td span{padding:15px 0;}
.bbs table tr td span.num {  max-width: 30px; margin: 0 10px; font-size: 13px; display: inline-block; }
    .bbs table tr td span.category {width: 10%;margin: 0 10px 0 0;border: 1px solid #89B85F;color: #89B85F;padding: 3px 10px;max-width: 100px;min-width: 100px;display: inline-block;text-align: center;}
        .bbs table tr td span.category.on { border: 1px solid #D1B788; color: #D1B788; padding: 3px 10px }
    .bbs table tr td span.category.null { border: 0; padding: 3px 10px }
.bbs table tr td .title {width: 70%;display: inline-flex;padding: 0px 5px 5px 10px;}
.bbs table tr td span.file {width: 6%;background-image: url(/web/Mastern/Data/@ThisSite/img/icon-file.png);background-repeat: no-repeat;max-width: 30px;height: 32px;display: inline-block;background-position-x: center;position: absolute;right: 20px;/* margin-top: -10px; */}
.bbs table tr td span.date {text-align: right;display:block;margin-right:10px;padding: 5px 5px 5px;}
 
 .bbs table.has-not-cate tr td span.notice {width: 10%;margin: 0 10px 0 0;border: 1px solid #89B85F;color: #89B85F;padding: 3px 10px;max-width: 100px;min-width: 100px;display: inline-block;text-align: center;}
        .bbs table.has-not-cate tr td span.notice.on { border: 1px solid #D1B788; color: #D1B788; padding: 3px 10px }
    .bbs table.has-not-cate tr td span.notice.null { border: 0; padding: 3px 10px }
    
    /*.bbs .category { color: #D1B788 }*/

@media all and (min-width:576px) {
.bbs table tr td span.file {background-position-x: center;background-size:inherit;position: absolute;margin-top: 10px;}
/*.bbs table.has-not-cate tr td span.file {background-position-x: center; background-size:inherit;  position: absolute;margin-top:-10px }*/
    .bbs #skeyword { max-width: 150px }
    .bbs #category { max-width: 150px }
}

@media all and (min-width:768px) {

}

@media all and (min-width:992px) {
   
    .bbs table tr td { text-align: center;}
    .bbs table.has-not-cate tr td { text-align: left;}
    
    .bbs table tr td span {padding: 20px 5px;display: inline-block;}
    .bbs table tr td span.num { width: 5%; max-width: 40px;}
    .bbs table tr td .title {width: 65%;display: inline-flex;}
    .bbs table tr td .title.has-category { width: 65%; display: inline-flex; }
    .bbs table tr td span.date {width: 15%;max-width: 120px;text-align: right;display: inline-block;}
    .bbs table.has-not-cate tr td span.date {width: 15%;max-width: 120px;text-align: right;display: inline-block;float: right;margin-top: 18px;}

    .bbs table tr td span.file {background-position-x: center;background-size:inherit;position: absolute;margin-top: 11px;margin-left:-10px;right: 120px;}    
}

@media all and (min-width:1024px) {
 .bbs .col-12 {padding-left:0;padding-right:0}
    
}


/*================================= Detail ============================*/



.bbs .detail .detailOption { border-top: 2px solid #081D58; border-bottom: 2px solid #081D58; margin: 45px 0; /* display: block; */ }
.bbs .detail .detailOption a{text-decoration:none}
.bbs .detail .detailOption hr {margin: 5px 0;}
.bbs .detail .row.prev { padding: 10px; }
.bbs .detail .row.prev .pr { max-width: 150px; width: 30%; color: #00954B; text-align: right; }
.bbs .detail .row.prev .title { color: #313131 }
.bbs .detail .row.next { padding: 10px; }
.bbs .detail .row.next .ne { max-width: 150px; width: 30%; color: #00954B; text-align: right; }
.bbs .detail .row.next .title { color: #313131 }


/*========================      Component       ==============================*/
.bbs .btn-list {color: #fff;background-color: #081D58;border-color: #B2B2B2;border-radius: 0;}
    .bbs .btn-list:hover, .btn-list:active, .btn-list:focus, .btn-list:active:hover, .btn-list:active:focus {color: #fff;background-color: #5ba43a;border-color: #B2B2B2;}

.bbs .detail .detail-body { border-bottom: 2px solid #081D58;margin-bottom:50px ;background-color:white}
.bbs .detail .detail-body .head { background-color: #081D58; color: white; padding: 20px }
.bbs .detail .detail-body .head .number { margin-right:10px}
.bbs .detail .detail-body .head .subject { }
.bbs .detail .detail-body .head .date { display:block;padding-top:10px;text-align:right}

.bbs .detail .detail-body .desc { padding: 20px;padding-top:40px ; clear:both}
.bbs .detail .detail-body .desc .desc-head { position:relative}
.bbs .detail .detail-body .desc .desc-head h2{ }
.bbs .detail .detail-body .desc .desc-head .fileWrap{/* position:absolute; *//* right:0; *//* top: 0; */float: right;/* margin-top: -50px; */}
.bbs .detail .detail-body .desc .desc-head .fileWrap span{
    display:block;padding:12px 45px;
    background-image: url(/web/Mastern/Data/@ThisSite/img/icon-file.png);background-repeat: no-repeat;background-position-x:right}

.bbs .detail .detail-body .desc .desc-head .fileWrap:after {/* clear:both; *//* content:' '; */} 
.bbs .detail .detail-body .desc .desc-body{padding-top:30px;padding-bottom:30px;clear: both;}
.bbs .detail .detail-body .desc .desc-body img{max-width:100%}

@media all and (min-width:576px) { 
}

@media all and (min-width:768px) {
.bbs .detail .detail-body .head .date { display:inherit;padding-top:0;float:right}
}

@media all and (min-width:992px) {
    
    .bbs .detail .detail-body .desc .desc-head .fileWrap{  margin-top: -50px; }
    
}

@media all and (min-width:1024px) {

}