@charset "utf-8";
.board_section { width: 100%; margin: 0 auto; }
/* 검색섹션 */
.search_area_content { float: left; width: 100%; margin-top: 10px }
.search_area_content ul.search_area { float: right; }
.search_area_content ul li { float: left; margin-right: 6px }
.search_area_content ul li:last-child { margin-right: 0px }
.search_area_content ul li img.ui-datepicker-trigger { position: relative; top: 2px; margin-left: 3px; vertical-align: top; }
.search_area_content ul li.resveEndDe::before { content: "~"; margin: 0 3px; display: inline-block }
.search_area_content ul li.search_title { margin-left: 10px }
.search_area_content .page_menu { float: right }
.search_area_content { }
/*상단서브정보*/
.search_area_content { width: 100% }
.search_area_content .btn_cartList { float: right }
.search_area_content .btn_cartList li { float: left; margin-left: 10px }
.search_area_content .btn_cartList li a { position: relative; font-size: 14px; display: inline-block; padding: 3px 20px; border-radius: 30px; background: #f0f2f4; color: #666; text-align: center; }
.search_area_content .btn_cartList li a em { position: absolute; top: -6px; left: 6px; width: 18px; height: 18px; border-radius: 100%; background: #ff6699; font-size: 11px; color: #fff; }
.search_area_content .btn_cartList li a:hover { background: #fff0f5; color: #333; }
.search_area_content .btn_cartList li a i { color: #999; font-size: 13px }
.search_area_content .btn_cartList li a:hover i { color: #666; }
.search_area_content .btn_cartList li a em { }
.search_area_content .btn_cartList li.on a { background: #fff0f5; color: #333 }
.search_area_content .btn_cartList li.on a i { color: #666; }
/*테이블목록*/
.table_section { float: left; width: 100%; font-size: 18px }
.table-area { float: left; width: 100%; margin: 10px 0 30px; background-color: #fff }
.table-area.news { border-top: 2px solid #7d7f82; border-bottom: 2px solid #7d7f82 }
.gallery-area { display: block; width: 100%; margin: 10px 0 30px; }
.tHeader { display: table; width: 100%; border-collapse: collapse; border-top: 2px solid #848484 }
.tHeader .th.td { background-color: #efefef; color: #000; padding: 20px 10px; text-align: center }
.tBody { display: table; width: 100%; border-collapse: collapse; }
.tBody > a { width: 100%; display: table-row-group }
.tRow { display: table-row; border-bottom: 1px solid #bcbcbc; }
.tRow.notice { }
.tRow.notice .td.title { font-weight: 600 }
.tRow.notice { }
.td { display: table-cell; padding: 22px 30px; color: #999; }
.tBody .td { text-align: center; }
.tBody .td a { color: #333 }
.tBody .td a:hover { color: #000 }
.tBody .th { color: #000; }
.td.num { color: #333 }
.td.title { text-align: left; color: #000; }
/*.td.title a { display: inline-block; width:90%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis }*/
.td.top { vertical-align: top; }
.td.middle { display: table-cell; vertical-align: middle; text-align: center }
.td.bottom { vertical-align: bottom; }
.td.left { text-align: left; }
.td.center { text-align: center; }
.td.right { text-align: right; padding-right: 14px }
.tBody > ul:nth-child(odd) { background-color: #f8f8f8 }
.tBody > a:nth-child(odd) { background-color: #f8f8f8 }
.tBody > ul:hover { background-color: #f9faff; }
.tBody > a:hover { background-color: #f9faff; }
.tBody.list .td i { display: none; margin-right: 4px }
.tBody.list .td.file i { display: inline-block; }
.tBody.write { border-top: 2px solid #222222; }
.tBody.write .tRow { border-bottom: 1px solid #dddddd; }
.tBody.write .td i { display: inline-block; }
.tBody.write .td { float: left }
.tBody.write > ul { background-color: #fff }
.col-12 { width: 100% }
.col-11 { width: 90% }
.col-10 { width: 83% }
.col-9 { width: 75% }
.col-8 { width: 66.666666666667% }
.col-7 { width: 58.333333333333% }
.col-6 { width: 50% }
.col-5 { width: 41.666666666667% }
.col-4 { width: 33.333333333333% }
.col-3 { width: 25% }
.col-2 { width: 16.666666666667% }
.col-1 { width: 14% }
.col { width: auto !important }
/*상세보기*/
.readHeader { display: table; width: 100%; border-collapse: collapse; border-top: 1px solid #848484; border-bottom: 1px solid #eee }
.readHeader > h3 { font-size: 28px; color: #333; padding: 16px 20px 10px }
.readHeader .infor { float: left; font-size: 14px; color: #999; padding: 0 20px 20px }
.readHeader .infor li { float: left; }
.readHeader .infor li::after { content: "|"; color: #ccc; font-size: 12px; margin: 0 14px; position: relative; top: -2px }
.readHeader .infor li:last-child::after { content: none }
.readHeader .infor i { display: inline-block !important; margin-right: 3px }
.readHeader .infor .name { color: #666 }
.readBody { float: left; width: 100%; border-collapse: collapse; }
.readBody > .contents { width: 100%; padding: 20px 20px 50px; color: #000; font-size: 18px; line-height: 200%; overflow: hidden; }
.readBody > .contents ul { list-style-type: disc; margin: 1.2em; }
.readBody > .contents ul li { float: none }
.readBody > .contents ol { list-style-type: decimal; margin: 1em; }
.readBody > .contents table { table-layout: fixed; width: 100%; border-collapse: collapse; }
.readBody > .contents img { max-width: 100% }
/*현황상태*/
.board_section .state { display: inline-block; font-size: 15px; border-radius: 30px; text-align: center; padding: 3px 16px; color: #fff !important; text-shadow: 0 0 4px rgba(0, 0, 0, .2); }
.board_section .state.colorGry { background: #999999 }
.board_section .state.colorRed { background: #FF4C61 }
.board_section .state.colorOra { background: #FCA400 }
.board_section .state.colorGre { background: #4CD477 }
.board_section .state.colorBlu { background: #3F51F0 }
/*노티*/
span.noti { display: inline-block; font-size: 15px; border-radius: 3px; text-align: center; padding: 3px 16px; color: #fff; background: #222 }
/*페이지번호*/
.pagination { margin: 10px auto 34px; text-align: center; position: relative }
.pagination:after { display: block; overflow: hidden; clear: both; content: '' }
.pagination a { display: inline-block; overflow: hidden; width: 24px; height: 16px; margin: 0 1px; line-height: 100%; text-align: center; vertical-align: middle }
.pagination a.active, .pagination a:hover { background: #4b4b4b; color: #fff }
.pagination a.first_page, .pagination a.prev_page, .pagination a.next_page, .pagination a.last_page { background: #f5f5f5; color: #999 }
.pagination a { width: 36px; height: 36px; padding: 9px 0 0; border-radius: 100%; font-size: 18px }
.pagination a.first_page:hover { background-color: #4b4b4b; color: #fff }
.pagination a.prev_page:hover { background-color: #4b4b4b; color: #fff }
.pagination a.next_page:hover { background-color: #4b4b4b; color: #fff }
.pagination a.last_page:hover { background-color: #4b4b4b; color: #fff }
.pageCount { position: absolute; right: 0 }
.view_list { overflow: auto; width: 100%; height: 300px; border-top: 1px solid #333; }
/*파일찾기*/
.filebox { float: left; width: 100%; margin-bottom: 5px; font-size: 15px }
.filebox input[type="file"] { float: left; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.filebox .upload-name { float: left; width: 400px; margin-right: 3px; display: inline-block; vertical-align: middle; padding: 0 10px; border: 1px solid #ebebeb; background-color: #fbfbfb; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.filebox label { display: flex; float: left; color: #555; vertical-align: middle; background-color: #f5f5f5; cursor: pointer; border: 1px solid #dddcdc; border-radius: 3px; padding: 5px 10px; font-size: 12px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.filebox label:hover { background-color: #fff; }
.filebox .upload-display { float: left; width: 100%; display: inline-block; margin: 0 5px 5px 0 }
.filebox .upload-thumb-wrap { /* 추가될 이미지를 감싸는 요소 */ display: inline-block; padding: 2px; vertical-align: middle; border: 1px solid #ddd; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-color: #fff; }
.filebox .upload-display img { /* 추가될 이미지 */ display: block; max-width: 150px; min-width: 16px; max-height: 50px; width: 100% \9; height: auto; }
.fileUrl { float: left; width: 100%; margin-bottom: 3px }
.comment { width: 100%; font-size: 12px }
.fileArea { float: left; }
.fileComment { float: left; margin: 8px 0 0 10px }
.ui-datepicker-trigger { position: relative; top: 4px; left: 3px }
#egovComFileList { font-size: 15px }
/*포토게시판*/
.photoArea { float: left; width: 100%; margin: 20px 0 12px }
.photoList { float: left; width: 100%; }
.photoList li { float: left; width: calc(35% - 33px); border: 1px solid #eee; margin: 0 16px 30px 0; }
.photoList li:nth-child(3n+0) { margin-right: 00px; }
.photoList li p.img { display: inline-block; width: 100%; height: 100%; }
.photoList li p.img a { display: flex; align-items: center; justify-content: center; height: 600px; background: #f5f5f5 }
.photoList li p.img a img { width: 100%; height: 100%; max-width: 100%; object-fit: fill }
.photoList li p.img a img.noimg { object-fit: scale-down }
.photoList li:first-child { }
.photoList p.title { float: left; width: 100%; padding: 14px 20px; }
.photoList a.tit { float: left; display: inline-block; width: 99%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; padding: 2px }
.photoList p.title > a { float: left; display: inline-block; width: 99%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; padding: 2px }
.photoList p.title > span { font-size: 13px; color: #666; }
.photoList p.title > span em { margin-right: 20px }
.galleryArea { float: left; width: 100%; margin: 20px 0 12px }
.gallery { float: left; width: 100%; }
.gallery li { float: left; width: calc(25% - 12px); border: 1px solid #eee; margin: 0 16px 30px 0; }
.gallery li:nth-child(4n+0) { margin-right: 00px; }
.gallery li p.img { display: inline-block; width: 100%; height: 100%; }
.gallery li p.img a { display: flex; align-items: center; justify-content: center; height: 256px; background: #f5f5f5 }
.gallery li p.img a img { width: 100%; height: 100%; max-width: 100%; object-fit: fill }
.gallery li p.img a img.noimg { width: 60%; object-fit: scale-down }
.gallery li:first-child { }
.gallery p.title { float: left; width: 100%; padding: 14px 20px; }
.gallery a.tit { float: left; display: inline-block; width: 99%; height: 25px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; padding: 2px }
.gallery p.title > span { font-size: 13px; color: #666; }
.gallery p.title > span em { margin-right: 20px }
.fileListArea { float: left; width: 100%; padding: 20px; border-top: 1px solid #ddd }
.fileComment { display: inline-block; width: 100%; float: left; padding: 6px 0; font-size: 13px; }
.fileList { float: left; width: 100%; margin: 0 }
.fileList li { float: left; margin-right: 10px; display: inline-block; vertical-align: top; }
.fileList li a { display: inline-block; vertical-align: top; }
.fileList li input { margin-right: 10px }
.publication .td { vertical-align: middle; color: #666 }
.publication .td.pic { text-align: left; color: #333; }
.publication .td.pic > span { display: inline-block; float: left; width: 160px; border: 1px solid #ddd; padding: 10px 10px 5px; box-shadow: 3px 3px 0px rgba(0, 0, 0, .1); background: #fff; margin: 0 20px }
.publication .td.pic > span > img { width: 100% }
.publication .td.pic > em { display: table-cell; height: 190px; vertical-align: inherit; }
.sBtn_01 { display: inline-block; margin: 0; padding: 0; background: #f5f5f5; border-radius: 4px; font-size: 12px; line-height: 160%; cursor: pointer; overflow: hidden }
.sBtn_01:hover { }
.sBtn_01 a { display: block; height: 32px; padding: 4px 10px; color: #666; }
.sBtn_01 i { display: inline-block; margin: 5px 4px 0 0; font-size: 11px; color: #666; }
.sBtn_01 a:hover { background: #fff; color: #000; }
.sBtn_02 { display: inline-block; margin: 0; padding: 0; background: #707070; border-radius: 4px; font-size: 14px; line-height: 160%; cursor: pointer; overflow: hidden; color: #fff }
.sBtn_02:hover { }
.sBtn_02 a { display: block; height: 32px; padding: 6px 10px; color: #fff; }
.sBtn_02 i { display: inline-block; margin: 0; font-size: 18px; color: #fff; }
.sBtn_02 a:hover { background: #333; color: #000; }
.sBtn_03 { display: inline-block; margin: 0; padding: 1px 10px; border: 1px solid #e2e1e1; background: #f5f5f5; border-radius: 4px; font-size: 12px; line-height: 160%; cursor: pointer; position: relative; top: -2px }
.sBtn_03 i { display: inline-block; margin: 5px 4px 0 0; font-size: 11px; color: #666; }
.sBtn_03:hover { border: 1px solid #0076c2; background: #0076c2; color: #fff }
.sBtn_03:hover i { color: #fff }
.button { display: inline-block; position: relative; width: auto; padding: 6px 15px 6px; border: 1px solid #d9d9d9; line-height: 120%; border-radius: 4px; overflow: hidden; background-color: #f5f5f5; color: #555; text-align: center; text-decoration: none; cursor: pointer; background-image: url(../images/btn/button-overlay.png); }
.button:hover { background-color: #fff; background-image: none; color: #333 }
.button:active { background-color: #fff; background-image: none; color: #000 }
.confirm.button { border: 1px solid rgba(0, 0, 0, .1); background-color: #0076c2; color: #fff }
.confirm.button:hover { background-color: #0076c2; background-image: none; color: #fff }
.confirm.button:active { background-color: #0076c2; background-image: none; color: #fff }
.gray.button { border: 1px solid #dddcdc; background: #f5f5f5; color: #555 !important }
.gray.button:hover { border-color: #ccc; background-color: #fff; background-image: none; color: #333 !important }
.gray.button:active { border-color: #ccc; background-color: #fff; background-image: none; color: #000 !important }
.small.button { padding: 7px 10px 7px; font-size: 12px; }
.large.button { padding: 10px 20px 10px }
.right.button { float: right }
/* renew 버튼영역 */
.btnListBlock { position: relative; float: left; width: 100%; border-top: 1px solid #ddd; margin-bottom: 10px; padding-top: 20px }
.leftBlock { float: left; }
.leftBlock ul li { float: left; display: inline; margin-right: 10px }
.rightBlock { float: right; }
.rightBlock ul li { float: left; display: inline; margin-left: 10px }
.btnListBlock.reserv { margin-top: 0; border-top: none; }
/* renew 버튼 */
.btnListBlock .btn { display: inline-block; position: relative; width: auto; padding: 10px 30px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 10px; overflow: hidden; background-color: #f5f5f5; color: #555; text-align: center; text-decoration: none; cursor: pointer; font-size: 18px }
.btnListBlock .btn:hover { background-color: #fff; color: #333; }
.btnListBlock .btn:active { background-color: #fff; color: #000; }
.btnListBlock .confirm.btn { background-color: #27303b; color: #fff }
.btnListBlock .confirm.btn:hover { background-color: #000; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .confirm.btn:active { background-color: #000; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .gray.btn { background-color: #aaa; color: #fff }
.btnListBlock .gray.btn:hover { background-color: #999; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .gray.btn:active { background-color: #999; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .confirm.btn.reserv { background-color: #27303b; color: #fff }
.btnListBlock .confirm.btn.reserv:hover { background-color: #000; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .confirm.btn.reserv:active { background-color: #000; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .basic.btn { background-color: #aaa; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .basic.btn:hover { background-color: #999; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
.btnListBlock .basic.btn:active { background-color: #999; color: #fff; text-shadow: 0 0 4px rgba(0, 0, 0, .2) }
/* FAQ */
.faq { float: left; width: 100%; margin-top: 20px }
.faq .faqBody { float: left; width: 100%; margin: 0; padding: 0; line-height: 160%; border-top: 1px solid #E4E7EB; font-size: 16px }
.faq .faqBody li { }
.faq .faqBody li > span { padding: 20px 0; display: block; text-align: center; border-bottom: 1px solid #ddd }
.faq .faqBody .article { float: left; width: 100%; border-bottom: 1px solid #eaeaea }
.faq .faqBody p { position: relative; color: #666; display: flex; align-items: center; justify-content: space-between; font-size: 16px }
.faq .faqBody p > i { }
.faq .q { margin: 0; }
.faq .faqBody p.a span em { display: inline-block; float: right; padding-top: 30px; }
.faq .faqBody p.a span em a { margin-left: 10px; font-size: 14px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 2px 10px; border: 1px solid #ddd; border-radius: 6px; }
.faq .q .qt { display: inline-flex; position: relative; min-width: 34px; width: 34px; height: 34px; border-radius: 100%; background: #3f4581; color: #fff; align-items: center; font-size: 22px; justify-content: center; margin-right: 20px; font-weight:normal !important }
.faq .q a > span { word-break: break-all; flex: none }
.faq .q a > i { margin-left: auto; color: #ccc }
.faq .type { font-weight: normal; font-size: 12px; margin-right: 10px; color: #fff; background: #5E6977; padding: 2px 10px; border-radius: 5px; line-height: 14px; display: flex; align-items: center; justify-content: center; }
.faq .q a { padding: 20px 10px; display: flex; text-align: left; color: #121212; line-height: 150%; width: 100%; align-items: center; }
.faq .q a:hover, .faq .q a:active, .faq .q a:focus { color: var(--text-black01-color); }
.faq .a { color: #6e6e6f; margin: 0; padding: 20px 38px !important; background: #f9f9f9; line-height: 160%; border-top: 1px solid #eaeaea; align-items: flex-start !important; }
.faq .a span.an { color: var(--text-black03-color); flex-basis: 20px !important }
.faq .faqBody p.a span { flex-basis: 98%; color: var(--text-black02-color); }
.faq .a { }
.faq .q a:hover > span { font-weight:bold;  }


.faq .faqBody li:first-child .q a > i.xi-angle-down { display:none} 
.faq .faqBody li.show .q a > i.xi-angle-up { display:inline-block} 
.faq .faqBody li.show .q a > i.xi-angle-down { display:none} 
.faq .faqBody li.hide .q a > i.xi-angle-up { display:none } 
.faq .faqBody li.hide .q a > i.xi-angle-down { display:inline-block !important}