@charset "UTF-8";
@import url('../jquery/css/ui.all.css');

/*-------------------------------------------------
title       : 게시판 공통
Author      : 플랜아이 광주
Create date : 2020-03-09
-------------------------------------------------*/

/* 게시판 상단 */
.board_info { overflow: hidden; line-height: 4rem; }
.board_info + * {margin-top: 2rem;}

/* 게시판 목록 페이지 수 */
/* .board_info .page { float: left; }
.board_info .page span { display: inline-block; vertical-align: top; }
.board_info .page span + span::before { display: inline-block; width: 1px; height: 1.5rem; margin: 0 1rem 0 0.5rem; background-color: #ddd; content: ''; vertical-align: middle; }
.board_info .page strong, .board_info .page b { font-weight: 500; color: #000; } */

/* 게시판 목록 검색 */
/* .board_info form { float: right; } */ 
/* .board_info .form { display: table; width: calc(100% + 0.5rem); table-layout: fixed; font-size: 1.5rem; width: auto/; } */
/* .board_info .form > * { display: table-cell; vertical-align: top; } */
.board_info .form .item.type1 { padding-right: 0; }
.board_info .form .btn { width: 6.5rem !important; }
.board_info .form .btn button { width: 100%; height: 4rem; border: 1px solid #000; background-color: #000; color: #fff; text-align: center; transition: all 0.2s; }
.board_info .form .btn button:hover,
.board_info .form .btn button:focus {background-color: #fff; color: #000;}
.board_info .form .form_select {width: 100%;}

/* 게시판 목록 RSS */
.board_info .icon_rss { display: inline-block; width: 2.5rem; height: 2.5rem; margin-left: 0.5rem; font-size: 2rem; text-align: center; line-height: 2.5rem; vertical-align: middle; }
.board_info .icon_rss::before { display: block; width: 100%; height: 100%; font-family: 'xeicon'; color: #ee802f; content: ''; }

/* 게시판 페이징 */
* + .board_pager { padding-top: 4rem; margin-top: -1px; }
.board_pager { font-size: 1.5rem; text-align: center; border-top: 1px solid #ddd;}
.board_pager a { display: inline-block; overflow: hidden; width: 4rem; height: 4rem; border-radius: 100%; text-align: center; line-height: 4rem; vertical-align: top; }
.board_pager a strong {font-weight: 400;}
.board_pager a.arr { border: 1px solid #ddd; }
.board_pager a.arr::before { display: block; width: 100%; height: 100%; font-family: "remixicon"; text-align: center; line-height: inherit; }
.board_pager a.arr.first::before { content: "\f2e3"; }
.board_pager a.arr.prev::before { content: "\ea64"; }
.board_pager a.arr.next::before { content: "\ea6e"; }
.board_pager a.arr.last::before { content: "\f2e5"; }
.board_pager a.arr.first, .board_pager a.arr.last { text-indent: -1.2rem; letter-spacing: -1.2rem; }
.board_pager a.active { background-color: #0F3E46; color: #fff; }
.board_pager .group { margin: 0 0.5rem; display: inline-flex; align-items: center; gap: .5rem; font-size: 14px;}
.board_pager a.arr.last { margin-left: .5rem; }
.board_pager a.arr.first { margin-right: .5rem; }

/* 게시판 목록 */
.board_list thead th { font-size: 1.6rem; padding: 1.25rem; border-bottom: 1px solid #aaa; font-weight: 600; color: #222; text-align: center; }
.board_list td { font-size: 1.5rem; padding: 1.5rem 1rem; border-bottom: 1px solid #ddd; color: #666; text-align: center; }
.board_list td[aria-label="첨부파일"] img { width: 2.5rem; }
/* .board_list td.txt_left a { font-size: 1.6rem; display: inline-block; max-width: 100%; color: #333; vertical-align: middle; } */

/* 게시판 목록 아이콘 */
.board_list .xi-new { font-size: 2.2rem; float: right; margin: 0.75rem 0 0 0.5rem; color: #116eb4; }
.board_list .xi-lock { display: inline-block; position: relative; top: -0.1rem; font-size: 2rem; color: #222; vertical-align: middle; }

/* 게시판 목록 상태 아이콘 */
.board_list .icon { display: inline-block; min-width: 8rem; height: 2.75rem; padding: 0 1rem; border-radius: 0.5rem; background-color: #eee; font-size: 1.5rem; color: #333; text-align: center; line-height: 2.75rem; }
.board_list .icon[data-label="처리완료"] {background-color: #000; color: #fff;}
.board_list .icon[data-label="답변완료"] {background-color: #777; color: #fff;}
.board_list .icon[data-label="진행중"] {background-color: #116eb4; color: #fff;}
.board_list .icon_notice { display: inline-block; width: 3.5rem; height: 3.5rem; border-radius: 100%; background-color: #333; font-size: 1.3rem; color: #fff; vertical-align: middle; }

/* 게시판 내용 */
.board_view { border-top: 2px solid #555; }
.board_view > .title { font-size: 2rem; padding: 2.5rem 0; border-bottom: 1px solid #ddd; font-weight: 400; color: #333; text-align: center; word-break: keep-all; }
.board_view > .title .category { display: block; font-size: 1.6rem; color: #999; }
.board_view > .title .category::before { display: inline-block; position: relative; top: -0.2rem; width: 1rem; height: 1rem; margin-right: 0.75rem; border-radius: 100%; content: ''; vertical-align: middle; }
.board_view > .title .cateC01::before {background: #F6C375;}
.board_view > .title .cateC02::before {background: #DF7373;}
.board_view .info { padding: 2rem 0; border-bottom: 1px solid #dddd; background-color: #f8f9fa; color: #666; text-align: center; }
.board_view .info li { display: inline-block; vertical-align: top; }
.board_view .info li + li::before { display: inline-block; position: relative; top: -1px; width: 1px; height: 1.4rem; margin: 0 1.5rem 0 1rem; background-color: #ddd; content: ''; vertical-align: middle; }
.board_view .info strong { margin-right: 0.75rem; font-weight: 400; color: #000; }
.board_view .contents { padding: 5.5rem; border-bottom: 1px solid #ddd; }
.board_view .contents .img { margin-top: 2rem; }
.board_view .contents .img + .img { margin-top: 1rem; }
.board_view .txt_center { margin-bottom: 2rem; }

/* 게시판 내용 파일 */
.board_view .file { position: relative; padding: 2rem 0 2rem 14.5rem; border-bottom: 1px solid #ddd; }
.board_view .file .title { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 14.5rem; font-weight: 500; color: #333; text-align: center; }
.board_view .file .list img { width: 2.5rem; margin-right: 0.5rem; }
.board_view .file .list li { overflow: hidden; position: relative; min-height: 3rem; padding-right: 21rem; text-overflow: ellipsis; white-space: nowrap; line-height: 3rem; }
.board_view .file .list li + li {margin-top: 0.5rem;}
.board_view .file .list li > a { color: #444; -webkit-transition: all 0.2s; transition: all 0.2s; }
.board_view .file .list li > a:hover, .board_view .file .list li > a:focus { color: #116eb4; }
.board_view .file .list .link { position: absolute; right: 0; top: 0; }
.board_view .file .list .txt { font-size: 1.2rem; color: #999; }

/* 게시판 이전글 다음글 */
.prevnext { margin-top: 4rem; border-bottom: 1px solid #aaa; }
.prevnext li { overflow: hidden; padding: 2rem 0; border-top: 1px solid #ddd; color: #333; }
.prevnext li.next span::before { content: ''; }
.prevnext span { float: left; width: 15rem; color: #666; }
.prevnext span::before { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; font-size: 1.5rem; float: left; width: 5rem; content: ''; text-align: center; }
.prevnext a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; float: right; width: calc(100% - 15rem); }

/* 게시판 답변 */
.board_btns + .board_reply { margin-top: 2rem; border-top: 1px solid #aaa; }
.board_reply { padding: 2rem; border-bottom: 1px solid #e8e8e8; }
.board_reply .title { font-size: 1.8rem; font-weight: 600; color: #333; }
.board_reply .info { font-size: 1.5rem; margin: 0.5rem 0 1rem; padding: 1rem 1.5rem; background-color: #f8f8f8; }
.board_reply .info li { display: none; }
.board_reply .info li + li::before { display: inline-block; position: relative; top: -1px; width: 1px; height: 1.4rem; margin: 0 1rem 0 0.75rem; background-color: #ddd; content: ''; vertical-align: middle; }
.board_reply .info li[class] { display: inline; }
.board_reply .info strong { margin-right: 0.5rem; font-weight: 400; color: #333; }
.board_reply .info:last-child { margin-bottom: 0; }
.board_reply .file { position: relative; margin: 2rem -2rem -2rem; padding: 1rem 2rem; border-top: 1px solid #f8f8f8; }
.board_reply .file .label { display: block; margin: 0.5rem 0; font-weight: 500; color: #333; }
.board_reply .file .list img { width: 2.5rem; margin-right: 0.5rem; }
.board_reply .file .list li { overflow: hidden; position: relative; min-height: 3rem; padding: 0 21rem 0 1.5rem; text-overflow: ellipsis; white-space: nowrap; line-height: 3rem; }
.board_reply .file .list li::before { position: absolute; left: 0; top: auto; content: '-'; }
.board_reply .file .list li > a { color: #444; -webkit-transition: all 0.2s; transition: all 0.2s; }
.board_reply .file .list li > a:hover, .board_view .file .list li > a:focus { color: #116eb4; }
.board_reply .file .list .link { position: absolute; right: 0; top: 0; }
.board_reply .file .list .txt { font-size: 1.2rem; color: #999; }
.board_reply + .board_btns {margin-top: 1rem;}

/* 게시판 답변 상황 */
.board_state { position: relative; margin-top: 4rem; padding: 1.5rem 1.5rem 1.5rem 7rem; border: 1px solid #ddd; background-color: #f6f7f9; }
.board_state::before { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; overflow: hidden; position: absolute; left: 2rem; top: auto; width: 3rem; height: 3rem; border-radius: 100%; background-color: #3c4165; font-size: 1.8rem; font-weight: 400; color: #fff; content: ''; text-align: center; }
.board_state li { display: inline; }
.board_state li + li::before { display: inline-block; position: relative; top: -1px; width: 1px; height: 1.4rem; margin: 0 0.75rem 0 1rem; background-color: #ddd; content: ''; vertical-align: middle; }
.board_state label { margin-right: 0.5rem; font-weight: 500; color: #000; }
.board_state button { font-size: 1.4rem; color: #116eb4; }
.board_state .title { display: block; margin-bottom: 0.5rem; color: #333; line-height: 3rem; }
.board_state .form { line-height: 4rem; }
.board_state .form ul { display: inline-block; margin-right: 1rem; vertical-align: top; }
.board_state .form_textbox,
.board_state .form_select select { width: 15rem; }
.board_state .btn { height: 4rem; padding: 0 1.5rem; border: 0 none; background-color: #484c58; color: #fff; text-align: center; vertical-align: top; }

/* 게시판 답변상황 아이콘 */
.board_state .icon { display: inline-block; position: relative; top: -1px; min-width: 8rem; height: 2.75rem; padding: 0 1rem; border-radius: 0.5rem; background-color: #eee; font-size: 1.5rem; color: #333; text-align: center; line-height: 2.75rem; }
.board_state .icon[data-label="처리완료"],
.board_state .icon[data-label="답변완료"] {background-color: #555; color: #fff; }
.board_state .icon[data-label="진행중"] { background-color: #116eb4; color: #fff; }

/* 코멘트 */
* + .comment { margin-top: 5rem; }
.comment .form { position: relative; margin: 0 0 5rem; padding-bottom: 4.9rem; border: 1px solid #ddd; background-color: #f8f9fa; color: #999; }
.comment .form textarea { font-size: 1.5rem; width: 100% !important; max-width: 100%; min-height: 8.5rem; padding: 1.5rem; border: 0 none !important; vertical-align: top; }
.comment .form .length { font-size: 1.3rem; position: absolute; left: 0; bottom: 0; padding-left: 2rem; line-height: 5rem; }
.comment .form button { height: 5rem; border: 1px solid #555; line-height: 4.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.5rem; display: inline-block; min-width: 8.8rem; padding: 0 1rem; background-color: #555; color: #fff; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; position: absolute; right: -1px; bottom: -1px; }
.comment .form button:hover, 
.comment .form button:focus { background-color: transparent; color: #555; }
.comment > .title { font-size: 1.6rem; font-weight: 300; color: #666; }
.comment > .title span { font-weight: 500; color: #116eb4; }

/* 코멘트 목록 */
.comment .list { margin-top: 1.5rem; border-top: 1px solid #aaa; }
.comment .list li { position: relative; padding: 2rem; border-bottom: 1px solid #ddd; color: #767676; }
.comment .list .name { font-weight: 500; }
.comment .list .txt { display: block !important; width: auto !important; height: auto !important; margin-bottom: 0.5rem; opacity: 1 !important; }
.comment .list .date { font-size: 1.4rem; color: #999; }
.comment .list .form { width: 100% !important; margin: 1rem 0 0; }
.comment .list .re { padding-left: 4rem; }
.comment .list .re::before { position: absolute; top: 2.5rem; left: auto; width: 1rem; height: 1rem; margin-left: -2rem; border-left: 1px solid #aaa; border-bottom: 1px solid #aaa; content: ''; }

/* 코멘트 버튼 */
.comment .list .btn { position: absolute; right: 2rem; top: 2rem; font-size: 1.4rem; color: #333; }
.comment .list .btn a + a::before { display: inline-block; position: relative; top: -1px; width: 1px; height: 1.3rem; margin: 0 1rem 0 0.75rem; background-color: #ddd; content: ''; vertical-align: middle; }
.comment .list .btn_reply { height: 3rem; border: 1px solid #ddd; line-height: 2.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.4rem; display: inline-block; min-width: 7rem; margin-top: 1rem; padding: 0 1rem; background-color: #fff; color: #666; text-align: center; vertical-align: middle; -webkit-transition: all 0.2s; transition: all 0.2s; }
.comment .list .btn_reply:hover, .comment .btn_reply:focus { border-color: #333; background-color: #333; color: #fff; }

/* 공공누리 디자인 추가 */
.kogl_open .label { display: block; width: 17.1rem; height: 3.5rem; background-color: #999; font-size: 400; text-align: center; color: #fff; line-height: 3.5rem; }
.kogl_open .kogl { margin-bottom: 2rem; }
.kogl_open .form_radio { display: block; margin-top: 1rem; }
.kogl_open .form_radio .img { float: left; width: 13rem; padding-right: 1rem; }
.kogl_open .txt_right { margin: 1rem 0; }

/* 글 등록시 등록중입니다 이미지레이어 */
.mw {position:fixed;_position:absolute;top:0;left:0;width:100%;height:100%;z-index:10000;}
.mw .bg{position:absolute;top:0;left:0;width:100%;height:100%;background:#000 url('../ecms_resource/img/bg.png') repeat;opacity:.5;filter:alpha(opacity=50);z-index:10000;}
.mw .fg{position:absolute;top:50%;left:50%;width:360px;height:80px;padding:15px;z-index:11000;}
.mw .fg .loading {display:block; text-align:center;padding:10px}

@media (max-width: 768px)
{	
	/* 게시판 페이징 */
	.board_pager .group { margin: 0 2rem; }
	.board_pager .group a { display: none; }
	.board_pager .group a:last-child, .board_pager .group .active { display: inline; width: auto; }
	.board_pager .group .active { background: none; font-weight: 600; color: #333; }
	.board_pager .group .active::after { font-weight: 300; content: ' / ' }

	/* 게시판 목록 정보 */
	.board_info { margin-bottom: 1rem; }
	.board_info .page_info,
	/* .board_info form { float: none; }	 */
	/* .board_info .form { width: 100%; margin-bottom: 1rem; padding: 1rem; border: 1px solid #ddd; background-color: #f8f8f8; } */
	.board_info .form .item { width: 12rem; }
	.board_info .form .item.type1 {width: auto;}
	
	/* 게시판 목록 기본 */
	.board_list table { table-layout: fixed; }
	.board_list tr { display: flex; flex-direction: column; gap: .5rem; padding: 2rem 0; border-bottom: 1px solid #ddd; }
	.board_list colgroup, .board_list thead { display: none; }
	.board_list td { display: block; padding: 0; border: 0 none; text-align: left; line-height: 1.5; }
  
	/* 게시판 목록 */
	.board_list .tstyle_list td::before { margin-right: 0.5rem; font-weight: 400; color: #333; content: attr(aria-label); font-weight: 600; }
	.board_list .tstyle_list td.m_hidden, 
	.board_list .tstyle_list td[aria-label="분류"]::before, 
	.board_list .tstyle_list td[aria-label="첨부파일"],
	.board_list .tstyle_list td[aria-label="처리상태"]::before { display: none; }
	.board_list .tstyle_list td[aria-label="처리상태"] {margin-top: 0.5rem;}
	.board_list .tstyle_list td[aria-label="제목"] a { font-size: 1.8rem; margin-bottom: 0.5rem; font-weight: 500; color: #000; white-space: normal; }
	.board_list .tstyle_list td[aria-label="제목"]::before,
	.board_list .tstyle_list td[aria-label="링크"]::before { display: none; }
	.board_list .tstyle_list td[aria-label="링크"] { margin-top: 0.5rem; }
	  
	/* 게시판 목록 아이콘 */
	.board_list .xi-lock {top: -0.3rem;}
	.board_list .xi-new { margin-top: 0.25rem; }
	  
	/* 게시판 내용보기 */
	.board_view .contents { padding: 1.5rem 0; }
	
	/* 게시판 내용보기 파일 */
	.board_view .file { padding: 1.5rem; }
	.board_view .file .title { display: block; position: static; width: auto; margin-bottom: 1rem; text-align: left; transform: translate(0, 0); -webkit-transform: translate(0, 0); }
	.board_view .file .list .txt { display: none; }

	/* 게시판 답변 */
	.board_reply { padding: 1.5rem 0; }
	.board_reply .file { margin: 1.5rem 0 -1.5rem; padding: 1rem 0; }
	
	/* 게시판 답변상황 */
	.board_state .form ul { display: block; margin: 0; }
	.board_state .form li { display: block; margin-bottom: 0.5rem; }
	.board_state .form li + li::before { display: none; }
	.board_state .form label { float: left; width: 7rem; margin: 0; }
	.board_state .form .btn { width: 15rem; margin: 1rem 0 0 7rem; }

	/* 게시판 코멘트 */
	.comment .list li {padding: 1.5rem 0;}
	.comment .list .btn {right: 0.5rem; top: 1rem;}
	.comment .list .re {padding-left: 2rem;}
}

@media (max-width: 580px)
{
	/* 게시판 목록 정보 */
	.board_info .form { display: block; }
	.board_info .form .item { display: block; width: 100%; }
	.board_info .form .item.btn { width: 100% !important; padding: 0; }
	
	/* 게시판 내용 정보 */
	.board_view .info { padding: 1.5rem; }
	.board_view .info li { display: block; text-align: left; }
	.board_view .info li + li::before { display: none; }
	.board_view .txt_center { margin-bottom: 1rem; }
	
	/* 게시판 내용 파일 */
	.board_view .file .list li { padding-right: 10rem; }
	.board_view .file .list .link a[target="_blank"] { display: none; }
	
	/* 게시판 답변 */
	.board_reply .info li[class] { display: block; }
	.board_reply .info li + li::before { display: none; }
	.board_reply .file .list li { padding-right: 10rem; }
	.board_reply .file .list .link a[target="_blank"] { display: none; }
	
	/* 게시판 답변상황 */
	.board_state { margin-top: 2rem; padding: 1.5rem; }
	.board_state::before { display: block; position: static; margin-bottom: 0.5rem; }
	.board_state li { display: block; }
	.board_state li + li::before { display: none; }

	/* 게시판 코멘트 */
	.comment .form {margin: 2rem 0;}
	
	/* 공공누리 */
	.kogl_open .form_radio .img { display: block; float: none; width: 100%; padding: 0 0 0.5rem; }
}