/* 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 .ttline { margin: 1rem 0; border-bottom: #dfdfdf solid 1px; }

#bbslist table { width:100%; border-spacing:0px; border-collapse:collapse; }
#bbslist table caption { display:none; }
#bbslist thead th { height:28px; border-top:#D2D2D2 solid 1px; border-bottom:#D2D2D2 solid 1px; background:url('../../../../../_core/image/_public/bg_list_tt.jpg'); font-size:11px; font-family:dotum; font-weight:normal; color:#787878; }
#bbslist thead .side1 { border-left:#D2D2D2 solid 1px; }
#bbslist thead .side2 { border-right:#D2D2D2 solid 1px; }
#bbslist tbody .noticetr td { background:url(''); background:#FAFAFA; border-bottom:#EBEBEB solid 1px; }
#bbslist tbody .noticetr td a { font-weight:bold; }
#bbslist tbody td { text-align:center; color:#888888; font-family:arial; font-size:10px; border-bottom:#E6E6E6 solid 1px; letter-spacing:-1px; }
#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; padding:5px 0 3px 10px; letter-spacing:0px; }
#bbslist .sbj .imgpos { margin-bottom:-1px; }
#bbslist .sbj a { font-size:12px; font-family:gothic,gulim; color:#222222; text-decoration:none; line-height:150%; }
#bbslist .sbj a:hover { text-decoration:underline; }
#bbslist .sbj .new { color:#ff0000; }
#bbslist .sbj .comment { font:normal 11px arial; color:#FC6138; }
#bbslist .name { color:#222222; font-family:dotum; font-size:12px; color:#888; }
#bbslist .name a { color:#888; }
#bbslist .hit { font-size:10px; color:#515190; }

#bbslist .none { text-align: center; padding: 20px 0 20px 0; }
#bbslist .bottom { margin-top: 1rem; padding: 1rem 0; border-top: #dfdfdf solid 1px; }
#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 .gallery { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; }
#bbslist .gallery .picbox { width: calc(100% / 4 - 20px); margin: .5rem .625rem 1.5rem .625rem; }
#bbslist .gallery .pic .thumb { display: block;  width: calc(100% / 1);  height: 120px;  object-fit: cover;  object-position: center center;  border-radius: 0.25rem; }
#bbslist .gallery .pic-body { padding: .5rem 0; }
#bbslist .gallery .pic-body a { font-size: .95rem; }
#bbslist .gallery .pic-body a link:hover { color: #0072bc; }
/*#bbslist .gallery .pic-body .cat { font-size:12px; font-family:gothic,gulim; color:#888; letter-spacing:-1px; }*/
#bbslist .gallery .pic-body .imgpos { margin: 0 2px; vertical-align: baseline; }
#bbslist .gallery .pic-body .comment { color: #FC6138; font-size: .75rem; }
#bbslist .gallery .pic-body .new { color: #ff0000; font-size: .825rem; }

@media (max-width: 767.98px) { 
    #bbslist .gallery .picbox { width: calc(100% / 3 - 20px); }
}

@media (max-width: 575.98px) { 
    #bbslist .gallery .picbox { width: calc(100% / 2 - 20px); }
}
/* @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 .content .attach { line-height: normal; background-color: #F7F7F7; }
#bbsview .viewbox .content .attach ul { padding: 0; margin: 0; }
#bbsview .viewbox .content .attach li { list-style-type: none; padding: 5px; font-size: .75rem; }
#bbsview .viewbox .content .attach li .attach_icon{ display: inline-block; background:url('../../../../../_core/image/_public/ico_file.gif') no-repeat; background-position: 0 0; height: 10px; width: 10px; margin-right: 3px; }
#bbsview .viewbox .content .attach li a { color: #666; }
#bbsview .viewbox .content .attach li a:hover { text-decoration: underline; }
#bbsview .viewbox .content .attach li .size { font-size: .7rem; color: #999; }
#bbsview .viewbox .content .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 */