/* common */
input, select, textarea, button { box-sizing: border-box; vertical-align: middle; }
input.btn__gray { background: #b5b5b5; }
input.btn__blue { background: #3685bb; }
/* @common */

/* list */
#bbslist { margin:auto; }
#bbslist .info { height: 2rem; width: 100%; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; }
#bbslist .info .article { font-size: .75rem; opacity: .5; }
/*#bbslist .info .article a { position:relative; top:3px; left:3px; }*/
#bbslist .info .category { position: relative; }
/*#bbslist .info .category select { padding:1px; margin-bottom:3px; }
#bbslist .info .category select .sline { color:#c0c0c0; }
#bbslist .info .category a { position:relative; top:3px; left:-5px; }*/

#bbslist .searchform select, 
#bbslist .searchform input { font-size: .85rem; height: 30px; border: 1px solid #dfdfdf; margin: 1px 0; }
#bbslist .searchform .btngray { cursor: pointer; border: none; width: 50px; }

#bbslist table { width: 100%; border-spacing: 0px; border-collapse: collapse; margin-top: 10px; border-top: #5A5653 solid 2px; }
#bbslist table caption { display: none; }
#bbslist thead th { height: 2.5rem; border-bottom: #D7D7D7 solid 1px; font-weight: 500; color: #555; background-color: #F7F7F7; text-align: center; }
#bbslist thead .side1 { border-right: #D7D7D7 solid 1px; }
#bbslist thead .side2 { border-right: none; }
#bbslist tbody .noticetr i { color: #DC143C; }
#bbslist tbody .noticetr .sbj a:hover { color: #DC143C; }
#bbslist tbody tr { border-bottom: 1px solid #E6E6E6; }
#bbslist tbody td { color: #666; padding: 10px; text-align: center; }
/*#bbslist .now { color:#ff0000; font-size:11px; }
#bbslist .cat { font-size:12px; font-family:gothic,gulim; color:#888; letter-spacing:-1px; }*/
#bbslist .sbj { text-align: left; }
#bbslist .sbj a { margin-right: .5rem; }
#bbslist .sbj .imgpos { margin: 0 2px; vertical-align: baseline; }
/*#bbslist .sbj a { color:#333; text-decoration:none; }
#bbslist .sbj a:hover { font-weight: 400; }*/
#bbslist .sbj .new { color: #dc3545; font-size: .6875rem; font-weight: 500; }

#bbslist .sbj .comment { font:normal 11px arial; color:#FC6138; }
#bbslist .sbj .trackback { font:normal 11px arial; color:#02ACD6; }
#bbslist .sbj1 { text-align:left; color:#222222; line-height:150%; }

#bbslist .name { max-width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
#bbslist .bottom { margin: 1rem 0; }
#bbslist .btnbox { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
#bbslist .pagebox01 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; margin: 1rem 0; }
#bbslist .pagebox01 .selected { }
#bbslist .num, .name, .date, .hit { font-size: .825rem; }

@media (max-width: 767.98px) { 
    #bbslist thead th { display: none; }
    #bbslist colgroup { display: none; }
    #bbslist tbody td.sbj, td.sbj1 { display: block; width:100%; padding: 10px 5px 5px; }    
    #bbslist tbody td.name { display: inline-block; padding: 0 5px 10px; }
    #bbslist tbody td.date { display: inline-block; padding: 0 5px 10px; }
    #bbslist tbody td.hit  { display: inline-block; padding: 0 5px 10px; opacity: .75; }
}  
/* @list */


/* view */
#bbsview { margin: auto; padding: 10px 0 20px 0; }
#bbsview .viewbox { border-top: #5A5653 solid 2px; border-bottom: #D7D7D7 solid 1px; margin: 10px 0 10px 0; }
#bbsview .viewbox .icon { position:absolute; width:50px; height:50px; margin:10px 0 0 0; background:url('../../../../../_var/simbol/0.gif') center center no-repeat; }
#bbsview .viewbox .subject { padding: 1rem 0 0.25rem; }
#bbsview .viewbox .subject h1 { font-size: 1.125rem; font-weight: 500; }
#bbsview .viewbox .info { padding: 10px 0 10px 0px; font-size: .75rem; }
#bbsview .viewbox .info .xleft { float: left; margin-bottom: 10px; }
#bbsview .viewbox .info .xleft span { position: relative; font-size: .8125rem; margin-right: 5px; padding-right: 10px; opacity: .7; }
#bbsview .viewbox .info .xleft span::after { content: ''; position: absolute; display: block; right: 0; top: 50%; margin-top: -6px; background: #dadada; width: 1px; height: 13px; }

#bbsview .viewbox .info .xright { float: right; margin-bottom: 10px; }
#bbsview .viewbox .info .xright ul { padding: 0; margin: 0; }
#bbsview .viewbox .info .xright li { list-style-type: none; float: left; }
#bbsview .viewbox .info .xright .g { padding: 0 10px 0 0; }
#bbsview .viewbox .info .xright .g img { position: relative; margin-right: 3px; }
#bbsview .viewbox .info .xright .g a { font-size: .8125rem; color: #666; vertical-align: middle; }
#bbsview .viewbox .info .xright .g a:hover { text-decoration: underline; }

#bbsview .viewbox .info .xright div { position:absolute; display:none; }
#bbsview .viewbox .info .xright div ul { position:relative; top:17px; width:79px; border:#dfdfdf solid 1px; background:#ffffff; padding:1px; }
#bbsview .viewbox .info .xright div li { float:none; display:block; padding:3px 0 3px 3px; color:#333; font-size:11px; cursor:pointer; }
#bbsview .viewbox .info .xright div li:hover { background:#ECF0F6; }

#bbsview .viewbox .content { padding: 20px 0 20px 0; line-height: normal; font-size: .95rem; }
#bbsview .viewbox .content .tag { padding:10px 0 0 0; }
#bbsview .viewbox .content .tag a { font-size:11px; font-family:dotum; color:#222; }
#bbsview .viewbox .content .tag a:hover { text-decoration:underline; }

#bbsview .viewbox .attach { line-height: normal; border-top: #D6D6D6 dotted 1px; border-bottom: #D6D6D6 dotted 1px; background-color: #F7F7F7; }
#bbsview .viewbox .attach ul { padding: 0; margin: 0; }
#bbsview .viewbox .attach li { list-style-type: none; padding: 5px; font-size: .75rem; }
#bbsview .viewbox .attach li .attach_label{ display: inline-block; border: #D5D5D5 solid 1px; background-color: #FFF; color: #969696; padding: 2px 3px; margin-right: 5px; }
#bbsview .viewbox .attach li .attach_icon{ display:inline-block; background: url('image/img_all.png') no-repeat; background-position:0 -116px; height: 15px; width:10px; }
#bbsview .viewbox .attach li a { color: #666; }
#bbsview .viewbox .attach li a:hover { text-decoration: underline; }
#bbsview .viewbox .attach li .size { font-size: .7rem; color: #999; }
#bbsview .viewbox .attach li .down { font-size: .7rem; color: #999; }

#bbsview .viewbox .content .scorebox { text-align:center; padding:20px 0 20px 0; }

#bbsview .viewbox .content .snsbox { padding: 20px 0 0 0; text-align: right; }
#bbsview .viewbox .content .snsbox img { cursor: pointer; }
#bbsview .comment { margin: 10px 0; }
#bbsview .comment a { font-size: .8125rem; font-weight: 500; color: #3EA9CD; }
#bbsview .comment .icon1 { position: relative; }
/* @view */


/* write */
#bbswrite { margin: auto; padding: 10px 0 20px 0; }
#bbswrite table { width: 100%; }
#bbswrite td { padding: 5px 0; }
#bbswrite .editbox { padding: 15px 0 15px 0; }
#bbswrite .td1 { width: 15%; text-align: center; font-weight: 500; font-size: 1.125rem; }
#bbswrite .td2 { width: 85%; display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }

#bbswrite .td2 .guide { font-size:11px; font-family:dotum; color:#999; padding:10px 0 10px 0; }
#bbswrite .td2 .guide img { position:relative; top:3px; }

#bbswrite .td2 .check { font-size: .8125rem; font-weight: 400; text-align: right; min-width: 5rem; }
#bbswrite .td2 .check input { position: relative; margin-right: 5px; }
#bbswrite .td2 .input { height: 40px; padding: 2px 10px; box-sizing: border-box; }
#bbswrite .td2 .subject { width: 100%; }

#bbswrite .td2 select { margin:1px; width:404px; padding:2px 2px 2px 0; }
#bbswrite .td2 select .cattt { background:#efefef; }
#bbswrite .td2 img { }

#bbswrite .after { display: flex; color: #999; font-size: .85rem; margin: 10px 0; }
#bbswrite .after span  { margin-right: 20px; }
#bbswrite .after div   { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
#bbswrite .after input { margin-right: 5px; }
#bbswrite .after label { margin-bottom: 0; margin-right: 15px; }

#bbswrite .iconbox { border-left:#e0e0e0 solid 1px; border-top:#e0e0e0 solid 1px; border-right:#e0e0e0 solid 1px; background:#f9f9f9; padding:6px 0 8px 7px; }
#bbswrite .iconbox a { padding:0 3px 0 3px; font-size:11px; font-family:dotum; color:#333; }
#bbswrite .iconbox a:hover { color:#7899C7; }
#bbswrite .iconbox a img { position:relative; top:2px; left:-2px; margin-right:3px; }
#bbswrite .iconbox .split { padding:0 2px 0 2px; margin-bottom:-1px; }

#bbswrite .bottombox { margin-top: 30px; border-top: #efefef solid 1px; padding: 20px 0; text-align: right; }
#bbswrite .bottombox input { width: calc(30% / 2 - 2px); height: 40px; font-size: 1rem; border: none; }

@media (max-width: 575.98px) { 
    #bbswrite tr { display: grid; }
    #bbswrite .td1 { width: 100%; text-align: left; }
    #bbswrite .td2 { width: 100%; }
    #bbswrite .editbox { padding: 0; }

    #bbswrite .after { display: block; }
    #bbswrite .after div { margin-top: 5px; }
}
/* @write */