@charset "utf-8";
/* 게시판 공통 */
.layout { font-size: 12px; }
.layout::after { content: ""; display: block; clear: both; }
.layout li { width: 100%; float: left; }
.layout li.wid_50 { width: 50%; }
.layout li.wid_33 { width: 33.3333%; }
.layout li.wid_25 { width: 25%; }
.layout li { border-top: 1px solid #eee; position: relative; }

.layout li div.title_box,
.layout li div.text_box { padding: 8px 12px; }
.layout li div.title_box { position: absolute; width: 120px; height: 100%; background-color: #f7f7f7; }
.layout li div.title_box > span { position: absolute; top: 50%; transform: translateY(-50%); }
.layout li div.text_box { float: right; width: calc(100% - 120px); }
.layout li div.chk_box { display: inline-block; margin-right: 8px; }


/* content */
.layout li.content { padding: 8px 0; min-height: 300px; }

/* file, link */
.layout li.attach { padding: 0 0 8px 0; border: 0; }
.layout li.attach .frm_input { display: inline-block; background: no-repeat left 8px center/30px; padding-left: 48px; height: 55px; -webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;  }

.layout li.link .frm_input { background-image: url(./img/ico_link.png); }

.layout li.file .frm_input { background-image: url(./img/ico_file.png); }
.layout li.file .file_hidden { display: none; }
.layout li.file .file_name { padding-left: 130px; }
.layout li.file .file_btn { font-size: 10px; position: absolute; top: 11px; left: 48px; border: 1px solid #ddd; color: #999; padding: 8px; background-color: #f7f7f7; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; }
.layout li.file .file_explain { height: 40px; margin-top: 4px; }


/* captcha */
.board .captcha { text-align: right; }

/* btn_wrap */
.board .btn_wrap { text-align: center; margin-top: 32px; }
.board .btn_wrap a,
.board .btn_wrap button { padding: 12px 36px; font-size: 15px; margin: 0 4px; }


/* 게시판 버튼 */
.user_btn_wrap { margin-bottom: 16px; }
.user_btn_wrap::after { content: ""; display: block; clear: both; }
.user_btn { float: right; }
.user_btn > li { float: left; margin-left: 4px; }

.user_btn .btn_b01 { display: inline-block; line-height: 24px; border: 0; padding: 0 4px; background-color: transparent; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; color: #999; }
.user_btn .btn_b01:hover { background-color: #F2F2F2; color: #333; }

.user_btn i { width: 15px; display: inline-block; vertical-align: middle; margin-right: 4px; }
.user_btn .btn_opt_list { width: 130%; background-color: #fff; position: absolute; border: 1px solid #eee; left: 50%; transform: translateX(-50%); padding: 2px 8px ; text-align: center; z-index: 9; display: none; color: #999; }
.user_btn .btn_opt_list li { font-size: 11px; padding: 6px 0; border-bottom: 1px solid #eee; }
.user_btn .btn_opt_list li:last-child { margin-bottom: 0; border-bottom: 0; }
.user_btn .btn_opt_list li:hover { color: #333; }
.user_btn .btn_opt_list button { background-color: transparent; border: 0; color: inherit; }

/* 글상세 */
.layout.view li div.title_box,
.layout.view li div.text_box { padding: 14px 12px; }
.layout.view li.content img { max-width: 100%; }
.layout.view li.attach a.frm_input { padding: 11px 10px 11px 48px; }
.layout.view li.attach a.frm_input strong { display: block; }
.layout.view li.attach a.frm_input .cnt { font-size: 10px; color: #999; display: block; }
.layout.view li.attach a:hover { color: #2948A8; }


/* 이전글 다음글 */
.layout.nav { border-bottom: 1px solid #eee; margin: 16px 0; }
.layout.nav li div.title_box,
.layout.nav li div.text_box { padding: 14px 12px; }
.layout.nav i { margin-right: 8px; }
.layout.nav li:hover div.text_box { color: #2948A8; }



/* 목록 */
.bo_list { text-align: center; border-top: 1px solid #ddd; color: #666; }
.bo_list li::after { content: ""; display: block; clear: both; }
.bo_list li { line-height: 50px; border-bottom: 1px solid #ddd; }
.bo_list li > div { float: left; }

.bo_list li.empty { line-height: 200px; color: #999;}

.bo_list li.head { color: #333; }
.bo_list li.head .subject { text-align: center; }

.bo_list .chk_box { width: 30px; }
.bo_list .num { width: 70px; }
.bo_list .subject { width: calc(100% - 400px); text-align: left; }
.bo_list .subject.wid { width: calc(100% - 370px); }
.bo_list .name { width: 100px; }
.bo_list .hit { width: 100px; }
.bo_list .date { width: 100px; }

.bo_list .subject i { width: 18px; height: 18px; display: inline-block; background-color: #E0E0E0; text-align: center; line-height: 18px; vertical-align: middle; font-style: normal; -webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px; margin-right: 4px; font-size: 11px; padding-top: 1px; }
.bo_list .subject .cnt_cmt { background-color: #333; color: #fff; }