@charset "utf-8";

/*** 로그인 인디케이터 ***/

#login-indicator { position: fixed; left: 0; right: 0; bottom: 0; background: #555; font-size: 14px; font-weight: 400; color:#fff; z-index:999999; line-height: 1em; }
#login-indicator:after { display: block; clear: both; content: ""; }
#login-indicator p { float: left; padding: 10px; }
#login-indicator a { display: block; float: right; padding: 10px; }
#login-indicator a.bbs { background: #1581FF; color: #fff; }
#login-indicator a.logout { background: #ff3081; color: #fff; }
@media (max-width: 349px) {
    #login-indicator { font-size: 12px; }
}

/*** 게시판 목록 테이블 영역 ***/

ul.bbs-basic { border-top: 2px solid #ff3081; position: relative; }
ul.bbs-basic:before { content: ''; display: block; position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 68px; }
ul.bbs-basic a { display: flex; }
ul.bbs-basic dl { text-align: center; overflow: hidden; }
ul.bbs-basic dt,
ul.bbs-basic dd { padding: 0 14px; line-height: 59px; border-bottom: 1px solid #666; max-width: 100%; }
ul.bbs-basic dt { display: none; line-height: 67px; }
ul.bbs-basic li:first-child dt { display: block; }
ul.bbs-basic dd { font-weight: 400; transition: background .2s; }
ul.bbs-basic a:hover dd,
ul.bbs-basic a:focus dd { background: rgba(255, 255, 255, 0.1); }
ul.bbs-basic .title { display: inline-block; vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; position: relative; box-sizing: border-box; }
ul.bbs-basic .file .title,
ul.bbs-basic .new .title { padding-right: 26px; }
ul.bbs-basic .file .title:before,
ul.bbs-basic .new .title:after { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 0; margin: auto 0; width: 16px; height: 16px; background: center no-repeat; background-size: 16px; }
ul.bbs-basic .file .title:before { background-image: url('/pub/images/bbs/icon-file.png'); }
ul.bbs-basic .new .title:after { background-image: url('/pub/images/bbs/icon-new.png'); }
ul.bbs-basic .file.new .title { padding-right: 52px; }
ul.bbs-basic .file.new .title:before { right: 26px; }
ul.bbs-basic input[type=checkbox] { display: inline-block; width: 15px; height: 15px; border: 1px solid #e1e1e1; vertical-align: middle; }

div.jc-notice { min-height: 84vh; }
div.jc-notice a { color: #fff !important; }
div.jc-notice ul.bbs-basic dl { flex: 0 0 120px; }
div.jc-notice ul.bbs-basic dl:nth-child(2) { flex: 1 0 auto; }
div.jc-notice ul.bbs-basic dl:nth-child(2) dd { text-align: left; }

/*** 게시판 목록 갤러리 영역 ***/

ul.bbs-gallery { display: flex; justify-content: space-between; flex-wrap: wrap; }
ul.bbs-gallery li { position: relative; width: 47.5%; margin-bottom: 60px; }
ul.bbs-gallery dl { padding-top: 22px; }
ul.bbs-gallery dt { font-weight: 400; margin-bottom: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.bbs-gallery dd { font-size: 16px; font-weight: 800; color: #bbb; transform: skew(-.03deg); }
ul.bbs-gallery input[type=checkbox] { position: absolute; display: inline-block; top: 10px; left: 10px; width: 15px; height: 15px; border: 1px solid #e1e1e1; }

/*** 페이지네이션 ***/

nav.paging { display: flex; margin-top: 40px; }
nav.paging a { width: 50px; height: 50px; box-sizing: border-box; background: #fff; color: #aaa; text-align: center; position: relative; font-size: 16px; font-weight: 400; line-height: 50px; }
nav.paging a+a { margin-left: 5px; }
nav.paging a:before { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; border: 1px solid #e1e1e1; transition: border .3s; }
nav.paging span { position: relative; z-index: 1; display: block; width: 100%; height: 100%; box-sizing: border-box; line-height: 48px; padding-top: 2px; }
nav.paging a:hover:before { border-width: 1px 25px; }
nav.paging a.on { color: #fff; font-weight: 700; }
nav.paging a.on:before { border-color: #ff3081; border-width: 1px 25px; }

/*** 게시판 기능 영역 ***/

#bbs-chkall { margin-bottom: 20px; }
#bbs-chkall input[type=checkbox] { display: inline-block; width: 15px; height: 15px; border: 1px solid #e1e1e1; vertical-align: middle; }
#bbs-chkall label { font-size: 16px; color: #ff3081; transform: skew(-.03deg);}

#bbs-function { position:relative; font-size: 0; line-height: 0; }
#bbs-function:after { display: block; clear: both; content: ""; }
#bbs-function.top { margin-bottom: 20px; }
#bbs-function.btm { margin-top: 20px; }
#bbs-function.center { text-align: center; }
#bbs-function div * { vertical-align: middle; }
#bbs-function div.left-func { float: left; width: auto; }
#bbs-function div.right-func { float: right; width: auto; text-align: right; }
#bbs-function button { display: inline-block; padding: 0 20px; height: 50px; font-size: 18px; box-sizing: border-box; transition: all 0.3s; }
#bbs-function button.type1 { background: #333; color: #fff; }
#bbs-function button.type1:hover,
#bbs-function button.type1:focus { background: #666; }
#bbs-function button.type2 { border: 1px solid #999; color: #fff; }
#bbs-function button.type2:hover,
#bbs-function button.type2:focus { border-color: #ddd; }
#bbs-function button.type3 { background: #ff3081; color: #fff; }
#bbs-function button.type3:hover,
#bbs-function button.type3:focus { background: #f0186c; }
#bbs-function button + button { margin-left: 10px; }
#bbs-function p.total { line-height: 40px; font-size: 18px; font-weight: 400; }
#bbs-function p.total span { font-weight: 700; color: #ff3081; }
#bbs-function select { height: 40px; margin-right: -1px; padding: 0 5px; font-size: 18px; font-weight: 400; border: 1px solid #e1e1e1; margin-right: 4px; }
#bbs-function input[type=text] { display: inline-block; width: 200px; height:40px; margin-right: -1px; padding: 8px; background: #fff; border: 1px solid #e1e1e1; font-size: 18px;  font-weight: 400; box-sizing: border-box; line-height: 22px; }
#bbs-function input[type=text] + button { width: 40px; height: 40px; padding: 0; }

/*** 게시판 작성 및 수정 영역 ***/

#bbs-field {}
#bbs-field label { display: inline-block; margin-top: 20px; margin-bottom:10px; font-size: 15px; font-weight: 400; color: #bbb; }
#bbs-field label:first-child { margin-top: 0; }
#bbs-field label strong { font-size: 13px; font-weight: 700; color: #ff3081; }
#bbs-field input[type=text], #bbs-field input[type=password], #bbs-field input[type=file] { display: block; width: 100%; height:40px; padding: 8px; background: #fff; border: 0 none; font-weight: 400; color: #333; box-sizing: border-box; transition: all 0.5s; }
#bbs-field input[type=text]:focus, #bbs-field input[type=password]:focus, #bbs-field input[type=file]:focus { border: 1px solid #ff3081; }
#bbs-field ul.option { margin-top: 10px; }
#bbs-field ul.option li { display: inline-block; }
#bbs-field ul.option li input[type=checkbox] { display: inline-block; width: 15px; height: 15px; border: 1px solid #e1e1e1; vertical-align: middle; }
#bbs-field ul.option li label { display: inline-block; margin: 0 0 0 5px; font-size: 16px; }
#bbs-field select { height: 40px; margin-right: -1px; padding: 0 5px; font-weight: 400; border: 1px solid #e1e1e1; }
#bbs-field textarea { padding: 10px; border: 1px solid #e1e1e1; box-sizing: border-box; font-weight: 400; }
#bbs-field textarea + iframe { background: #fff; }
#bbs-field input[type=file] + input[type=text] { margin-top: 5px; }
#bbs-field span.delete { display: block; margin-top: 10px; }
#bbs-field span.delete input[type=checkbox] { display: inline-block; width: 15px; height: 15px; border: 1px solid #e1e1e1; vertical-align: middle; }
#bbs-field span.delete label { display: inline-block; margin: 0 0 0 5px; font-size: 16px; }
#bbs-field div.cke_sc { display: none; }
#bbs-field-warning { margin-top: 20px; font-size: 16px; font-weight: 400; }

/*** 게시판 열람 영역 ***/

#bbs-view { padding: 30px; border: 1px solid #555; box-sizing: border-box; }
#bbs-view h1 { font-size: 30px; font-weight: 400; color: #fff; }
#bbs-view h1 span { font-size: 18px; line-height: 1.8; color: #999; }
#bbs-view div.info  { padding: 20px 0; border-bottom: 1px solid #555; font-size: 15px; font-weight: 400; }
#bbs-view div.info p + p { margin-top: 10px; }
#bbs-view div.info span.sv_member { color: #ff3081; }
#bbs-view div.info span.count { display: inline-block; padding-left: 5px; }
#bbs-view div.fnl { margin-top: 20px; }
#bbs-view div.fnl h2 { display: none; }
#bbs-view div.fnl ul li { padding: 20px; border: 1px solid #e1e1e1; font-size: 15px; font-weight: 400; box-sizing: border-box; word-break: break-all; }
#bbs-view div.fnl ul li + li { margin-top: 10px; }
#bbs-view div.fnl ul li img { float: left; margin-right: 10px; }
#bbs-view div.fnl ul li a { line-height: 20px; overflow: hidden; display: block; }
#bbs-view div.content { margin-top: 30px; min-height: 300px; font-weight: 400; line-height: 1.5; }
#bbs-view div.content img { max-width: 100% !important; }

/*** 게시판 댓글 영역 ***/

#bbs-comment { margin-top: 30px; padding: 30px; border: 1px solid #e1e1e1; background: #fff; box-sizing: border-box; }
#bbs-comment p.sum { font-size: 20px; font-weight: 400; }
#bbs-comment p.sum span { font-weight: 700; color: #ff3081; }
#bbs-comment article { margin-top: 30px; padding-top: 30px; border-top: 1px solid #e1e1e1; }
#bbs-comment article header h2 { font-weight: 700; }
#bbs-comment article header span { display: block; margin-top: 10px; font-size: 15px; font-weight: 400; color: #999; }
#bbs-comment article p.cnt { margin-top: 20px; font-size: 15px; font-weight: 400; line-height: 1.5; }
#bbs-comment article p.date { margin-top: 20px; font-size: 15px; font-weight: 400; color: #999; }
#bbs-comment article p.date a { display: inline-block; margin-left: 10px; padding: 5px 10px; border: 1px solid #ccc; }
#bbs-comment article p.date a + a { margin-left: 10px; }
#bbs-comment p.empty { text-align: center; padding: 20px 0; }

.cmt-field { margin-top: 30px; padding: 20px; border: 1px solid #e1e1e1; box-sizing: border-box; }
.cmt-field ul.guest {}
.cmt-field ul.guest li { display:inline-block; }
.cmt-field ul.guest li + li { margin-left: 20px; }
.cmt-field ul.guest li label { display: inline-block; margin-bottom:10px; font-size: 15px; font-weight: 400; color: #555; }
.cmt-field ul.guest li label strong { font-size: 13px; font-weight: 700; color: #ff3081; }
.cmt-field ul.guest li input { width: 150px; height: 40px; padding: 8px; background: #fff; border: 1px solid #e1e1e1; font-weight: 400; box-sizing: border-box; color: 555; }
.cmt-field textarea { width: 100%; min-height: 200px; margin-top: 20px; background: #fff; font-size: 15px; font-weight: 400; line-height: 1.3; box-sizing: border-box; }
.cmt-field p.max { margin-top: 10px; font-size: 15px; font-weight: 400; color: #999; }
.cmt-field p.max span { font-weight: 700; }
.cmt-field div.func { text-align: right; }
.cmt-field div.func span { display: inline-block; }
.cmt-field div.func span input[type=checkbox] { display: inline-block; width: 15px; height: 15px; border: 1px solid #e1e1e1; vertical-align: middle; }
.cmt-field div.func span label { display: inline-block; font-size: 15px; font-weight: 400; color: #555; }
.cmt-field div.func button { display: inline-block; margin-left: 10px; padding: 10px; background: #fff; border: 1px solid #ff3081; color: #ff3081; font-size: 15px; }

/*** 그누보드 기타 화면 ***/

#soda-container { position: relative; width: 500px; margin: 0 auto; padding: 50px; background: #fff; border: 1px solid #e1e1e1; box-sizing: border-box; }
#soda-container h1 { font-size: 40px; font-weight: 300; color: #ff3081; }
#soda-container h2 { margin-top: 40px; font-size: 24px; font-weight: 400; }
#soda-container p.dsc { margin-top: 20px; font-size: 16px; font-weight: 400; line-height: 23px; }

#soda-function { margin-top: 40px; text-align: center; font-size: 0; line-height: 0; }
#soda-function button { width: 100%; height: 50px; font-size: 18px; font-weight: 400; box-sizing :border-box; transition: all 0.3s !important; }
#soda-function.dbl button { width: calc(50% - 5px); }
#soda-function.dbl button + button { margin-left: 10px; }
#soda-function button.type1 { background: #333; color: #fff; }
#soda-function button.type1:hover,
#soda-function button.type1:focus { background: #555; }
#soda-function button.type2 { border: 1px solid #999; color: #fff; }
#soda-function button.type2:hover,
#soda-function button.type2:focus { border-color: #ddd; }
#soda-function button.type3 { background: #ff3081; color: #fff; }
#soda-function button.type3:hover,
#soda-function button.type3:focus { background: #f0186c; }

input:focus { border: 0 none !important; outline: 0 none !important; }

input[type="date"] { position: relative; }
input[type="date"]::-webkit-calendar-picker-indicator { position: absolute; left: 0; right: 0; width: 100%; height: 100%; background: transparent; color: transparent; cursor: pointer; }

@media (max-width: 768px) {

	ul.bbs-basic:before { content: none; }
	ul.bbs-basic a { padding: 40px 8px; border-bottom: 1px solid #666; display: block; position: relative; }
	ul.bbs-basic dt,
	ul.bbs-basic li:first-child dt,
	ul.bbs-basic dd { display: inline-block; border-bottom: 0 none; padding: 0; vertical-align: top; }
	ul.bbs-basic dl,
	ul.bbs-basic dt,
	ul.bbs-basic dd { line-height: 30px; overflow: visible; }
	ul.bbs-basic .file .title,
	ul.bbs-basic .new .title,
	ul.bbs-basic .file.new .title { padding-right: 0; position: static; overflow: visible; white-space: normal; }
	ul.bbs-basic .file .title:before,
	ul.bbs-basic .new .title:after { right: 15px; top: 13px; margin: 0; }
	ul.bbs-basic .file.new .title:before { right: 36px; }
	ul.bbs-basic a:hover dd,
	ul.bbs-basic a:focus dd { background: transparent; }
	
	div.jc-notice .bbs-basic dl:nth-child(1) dt,
    div.jc-notice .bbs-basic dl:nth-child(1) dd,
    div.jc-notice .bbs-basic dl:nth-child(3) dt,
    div.jc-notice .bbs-basic dl:nth-child(3) dd,
    div.jc-notice .bbs-basic dl:nth-child(4) dt,
    div.jc-notice .bbs-basic dl:nth-child(4) dd { font-size: 14px; color: #bbb; }
    div.jc-notice .bbs-basic dl:nth-child(1) dt,
    div.jc-notice .bbs-basic dl:nth-child(3) dt,
    div.jc-notice .bbs-basic dl:nth-child(4) dt { font-weight: 300; }
    div.jc-notice .bbs-basic dl:nth-child(1) { position: absolute; left: 8px; top: 7px; }
    div.jc-notice .bbs-basic dl:nth-child(3) { position: absolute; left: 8px; bottom: 7px; }
    div.jc-notice .bbs-basic dl:nth-child(4) { position: absolute; right: 8px; bottom: 7px; }
    div.jc-notice .bbs-basic dl:nth-child(2) { text-align: left; }
    div.jc-notice .bbs-basic dl:nth-child(2) dt { display: none; }
}