@charset "UTF-8";

/*게시판(공지사항,자유게시판등)*/
.board_list { width:100%; border-top:2px solid #000; font-size:16px; table-layout:fixed; color:#000; }
.board_list li {  border-bottom:1px solid #ededed; }
.board_list li a { display:flex; padding:30px 30px 30px 0; transition:all 0.3s; }
.board_list li a:hover { background:var(--lp); }
.b_no { width:150px; display:flex; align-items:center; justify-content:center; font-size:1.5em; font-weight:800; color:#555; }
.badge { padding:0 13px; line-height:27px; height:27px; border-radius:50px; color:#fff; background:var(--red); font-weight:400; font-size:14px; }
.board_list_cont { display:flex; flex-direction:column; width:calc(100% - 150px); }
.board_list_cont .list_title { font-weight:800; font-size:1.3em; margin-bottom:15px; display:flex; flex-wrap:wrap; align-items:center; }
.board_list_cont .list_title strong { display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; max-width:100%; }

.title_lock .board_list_cont strong { max-width:calc(100% - 30px); } /*비밀*/

.board_list_cont .list_title .badge { margin-right:6px; display:none; }
.board_list_info { display:flex; flex-wrap:wrap; color:#676767; }
.board_list_info > div { display:flex; align-items:center; font-size:14px; line-height:1em; white-space:nowrap; }
.board_list_info > div::after { content:''; margin:0 10px; width:3px; height:3px; background:#ccc; display:inline-block; }
.board_list_info > div:last-child::after { display:none; }
.board_list_info .b_state .color_red { font-weight:600; }

.board_list li .mark_lock { width:24px; height:24px; margin-right:5px; line-height:1em; background:#efefef; border:1px solid #e7e7e7; border-radius:50px; display:inline-flex; align-items:center; justify-content:center; font-size:13px;transition:all 0.3s; }
.board_list li .mark_comment { font-weight:600; }
.board_list li .icon-say { font-size:14px; margin-right:3px; }
.board_list li .icon-file { font-size:14px; }
.board_list li .icon-view { margin-right:3px; font-size:16px; }
.board_list li .mark_comment b { font-size:1.1em; }
.board_list li a:hover .mark_lock { background:#fff; border:1px solid #ccc; }

.board_bottom { margin-top:3em; display:flex; align-items:center; justify-content:space-between; position:relative; min-height:40px; }
.board_bottom.center { justify-content:center; }

/*pagenation*/
.pagination { margin:0 auto; text-align:center; position:relative; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.pagination ul {display:inline-flex; justify-content:center; padding-left:0; border-radius:4px; gap:5px !important; }
.pagination li { box-sizing:border-box; position:relative; cursor:pointer; display:inline-block }
.pagination li a { display:inline-block; cursor:pointer; border-radius:50px; width:30px; height:30px; line-height:30px; color:#333; font-size:1em; transition:background-color 0.2s;}
.pagination li a:hover { background-color:#ededed; }
.pagination li.active a, .pagination li.current a { font-weight:bold; background:#ededed; }
.pagination .first, .pagination .last { font-size:0.9em; }

/*상세페이지*/
.board_view { width:100%; border-top:2px solid #000; }
.board_view .board_title { padding:23px 0 25px; border-bottom:1px solid #f1f1f1; }
.board_view .board_title h4 { font-size:1.6em; display:inline-block; margin-bottom:15px; font-weight:800; line-height:1.7em; } /*20200306*/
.board_view .board_info { text-align:right; padding:15px 10px; }
.board_view .board_info dt, .board_view .board_info dd, .board_file dt, .board_file dd { display:inline-block; padding:5px 5px; }
.board_view .board_info dd { margin-right:20px; }
.board_view .board_info dd:last-child { margin-right:0; }

.board_content_wrap { padding:0; box-sizing:border-box; }

.by { display:flex; align-items:center; flex-wrap: wrap;}
.by p { font-weight:600; color:#3c3c3c; display:flex; align-items:center; }
.by p span { color:#999; font-size:13px; font-weight:400; margin-right:5px; }
.by p::after { content:''; width:3px; height:3px; border-radius:5px; background:#b3ace4; margin:0 10px; display:inline-block;}
.by p:last-child::after { display:none; }
.icon-view { font-size:15px !important; }

/*첨부파일 목록*/
.board_content { width:100%; padding:60px 0; box-sizing:border-box; line-height:24px; border-bottom:1px solid #ededed; }
.board_file { background:var(--lp); border:1px solid #f0f1f5; padding:25px; border-radius:20px; margin-top:25px; }
.board_file p { font-weight:600; }
.board_file p span { margin-right:7px; }
.board_file em { font-size:0.9em; color:#999; padding-left:18px; margin-top:10px; display:block; }
.board_file ul { margin-top:20px; display:flex; gap:5px; flex-wrap:wrap; }
.board_file li { }
.board_file li a { padding:6px 15px; background:#fff;box-sizing:border-box; border-radius:50px;font-size:0.9em;border:1px solid #ddd;display:inline-block; transition:all 0.3s; }
.board_file li a:hover { color:#fff; background:var(--red); border:1px solid var(--red); }
.board_file li:last-child { margin-bottom:0; }

.board_content { width:100% !important; height:auto !important; }
.board_content img { max-width:100%; width:auto; }

/*이전글,다음글*/
.other_cont {  border-bottom:1px solid #ededed; padding:20px 0; box-sizing:border-box; font-size:1.1em; }
.other_cont ul {  }
.other_cont li { font-weight:500; width:100%; padding:10px 0; display:flex; align-items:center; justify-content:space-between; }
.other_cont li span { font-weight:400; }
.other_cont li .text { width:calc(100% - 150px); display:flex; align-items:center; justify-content:space-between;}
.other_cont li .text form { width:100%; display:flex; align-items:center; justify-content:space-between; }
.other_cont li .text a { font-weight:600; max-width:calc(100% - 140px); display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;  }
.other_cont li .text a:hover { color:var(--red); }

.board_btn_wrap { width:100%; display:flex; align-items:center; justify-content:space-between; margin:45px 0 0; }
.board_btn_wrap .left { display:flex; justify-content:flex-start;}
.board_btn_wrap .right { display:flex; justify-content:flex-end; }
.board_btn_wrap form { display:inline-block; }
.board_btn_wrap .left button { margin-right:3px; }
.board_btn_wrap .right button { margin-left:3px; }

.table_view { width:100%; border-top:2px solid #000; table-layout:fixed; }
.table_view th { text-align:center; }
.table_view th, .table_view td { padding:15px 0; border-bottom:1px solid #f1f1f1; vertical-align:middle; }

/*작성*/
.table_write { width:100%; border-top:2px solid #3c3c3c; }
.table_write tr { display: grid; }
.table_write th, .table_write td { vertical-align:middle; }
.table_write th { text-align:left; padding:15px 0 0px; font-size:13px; font-weight:500; }
.table_write td { border-bottom:1px solid #f1f1f1; padding:5px 0 15px;}
.table_write td .input_wrap .inputText.alignC { padding:0 10px; }
.table_write td .btn_m { height:45px; }
.input_wrap { display:inline-flex; border-radius:5px; overflow:hidden; border:1px solid #ddd; transition:all 0.2s; }
.input_wrap:hover { box-shadow:0 0 10px 0 rgba(0,0,0,0.1); border:1px solid #666;  }

.input_wrap button { border:none; }
.input_wrap button:hover { background:#ededed; }
.input_wrap .inputText { border-radius:0; border-top:none; border-bottom:none; }
.input_wrap .inputText:hover { border-color:#ccc; box-shadow:none; }

/*calendar*/
.ui-widget.ui-widget-content { padding:0 !important; margin-top:4px; box-shadow:0 0 10px 0 rgba(0,0,0,0.1); }
.ui-datepicker table { margin:0 !important; padding:10px !important; }
.ui-datepicker-calendar {  }
.ui-datepicker-calendar td a.ui-state-default { border-radius:5px; opacity:1 !important; }
.ui-datepicker-calendar td a.ui-state-default:hover { background:#f4f4f4 !important; }
.ui-datepicker-calendar td a.ui-state-default.ui-state-active, 
.ui-datepicker-calendar td a.ui-state-default.ui-state-active:hover { background:#ffe4e4 !important; color:var(--main) !important; }
.ui-datepicker-calendar td a.ui-state-default.ui-state-highlight, 
.ui-datepicker-calendar td a.ui-state-default.ui-state-highlight:hover { background:#e6ecff !important; color:var(--blue) !important;}

/*button*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {border:none !important;background:none !important;text-align:center;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover 
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity:0.5 !important; }
.ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all { border-radius:3px 3px 0 0 !important; border:none !important; }
.ui-datepicker .ui-datepicker-title select { margin:2px !important; width:100px; height:24px; border-radius:3px; }
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next:hover, .ui-datepicker .ui-datepicker-prev:hover {border:none !important;margin:0;background:none;top: 3px !important;cursor:pointer;}
.ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-next:hover { right:2px !important; }
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-prev:hover { left:2px !important; }
.ui-datepicker .ui-datepicker-prev span { background:url(/images/user/arrow_left.svg) 50% 50% no-repeat; background-size:10px 10px; }
.ui-datepicker .ui-datepicker-next span { background:url(/images/user/arrow_right.svg) 50% 50% no-repeat; background-size:10px 10px; }
.ui-datepicker-buttonpane .ui-datepicker-current { border:1px solid #ccc !important; }
.ui-datepicker-buttonpane .ui-datepicker-close { border:1px solid #ccc !important; }