@charset "utf-8";
/* 기본 게시판 슽타일 정의 */
/*상단 헤더 */
.header {text-align: center; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.header .board {font-size: 32px; font-weight: bold;}
.header .desc {position: relative; padding-bottom: 25px; margin-bottom: 50px;}
.header .desc:after {content: ''; border-bottom: 2px solid #35a3dc; position: absolute; width: 100px; height: 1px; bottom: 0; left: 0px; right: 0px; margin: 0 auto;}

/* 검색란 */
.board-top {background-color: #fafafa; border: 1px solid #e6e6e6; width: 100%; padding: 25px 0px; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.board-top input {height: 35px; box-sizing: border-box; margin 0px 7px 0px 7px; font-size: 16px; padding: 0px 10px; outline: 0; border: 1px solid #dfdfdf;}
.board-top button {height: 35px; background-color: #273568; border: none; color: #fff; padding: 0px 20px; font-size: 16px; outline: 0; cursor: pointer; position:relative; top: -1px;}
.info { padding-right: 20px; margin: 30px 0px 10px 0px; text-align: right; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

/* 게시물 리스트 */
.list { table-layout: fixed; }
.list {border-top: 2px solid #222222; width: 100%; text-align: center; border-collapse: collapse; }
.list thead tr th {color: #3d3d3d; font-size: 16px; font-weight: 400; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.list thead tr th.num {width: 100px;}
.list thead tr th.date {width: 150px;}
.list thead tr th.count {width:120px;}
.list tbody tr td{color: #838383; font-size: 16px; font-weight: 400;}
.list thead tr th, .list tbody tr td {border-bottom: 1px solid #dddddd; height: 50px; padding: 0px 20px 0px 20px;}
.list tbody tr td.title {text-align: left;}
.list tbody tr td.date br {display: none;}
.list tbody tr td.title a {color: #838383; text-decoration: none;}
.list tbody tr.notice td {background-color: #fafafa; }
.list tbody tr td.title {text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

/* 하단 버튼 */
.action {margin: 15px 0px 10px 0px; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.action button { border: 0px; background-color: #dfdfdf; font-size: 16px; padding: 5px 10px; outline: 0; margin: 0px 5px;}
.action .write { float:right; margin-right: 0px;}
.action .back { float:right; margin-right: 0px;}

/* 하단 페이징 버튼 */
.nav {text-align: center; margin-top: 30px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.nav li {list-style: none; display: inline-block; border: 1px solid #dedede; vertical-align: middle; text-align: center; width: 26px; height: 26px;}
.nav li.active {background-color: #283666;}
.nav li a { text-decoration: none; display: block; /*margin-top: 4px;*/ color: #000;}
.nav li.active a {color: #fff;}
.nav li.first a, .nav li.next a, .nav li.prev a, .nav li.last a {/*margin: 3px;*/}

/* 셀렉트 박스 컴포넌트 */
.select { box-sizing: border-box; display: inline-block; position: relative; min-width: 100px; border: 1px solid #dfdfdf; background-color: #fff; /*top: -2px;*/ height: 35px; }
.select select { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; display: block; overflow: hidden; width: 100%; height: 100%; outline: 0; border: none; background-color: #fff; padding: 0px 10px; font-size: 14px; }
.select select::-ms-expand { display: none; }


/*--- 글 읽기 ---*/
.document .title {font-size: 24px; font-weight: bold; margin-top: 35px; padding-left: 14px;}
.document .detail {border: 1px solid #E6E6E2; background-color:#FAFAF8; padding: 10px 0px 8px 15px; margin-top: 10px;}
.document .detail div {display: inline-block; }
.document .detail .writer-value { padding: 0px 60px 0px 10px;}
.document .detail .date-value { padding: 0px 60px 0px 10px;}
.document .detail .date-value br { display: none; }
.document .detail .count-value { padding: 0px 60px 0px 10px;}
.document .detail .bold {font-weight: bold;}
.document .detail br {display: none;}
.document .content { margin: 10px 0px; padding: 15px; }
.document .action {margin-bottom: 50px;}
.document .action .edit {float:right; margin-right: 0px;}
.document .action .delete {float:right; margin-left: 0px;}
.document .content .content-view img,
.document .content .content-view .image-content {max-width: 100%; display: block; margin-bottom: 20px;}
.document .attachment {padding-left: 15px; border-top: 1px solid #dddddd; padding-top: 15px;}
.document .attachment .attach-title {font-weight: bold; display: inline-block; margin-right: 15px;}
.document .attachment .file {display: inline-block;}
.document .attachment .file a { color:#555; }
.document .attachment span {margin-left: 1px; margin-right: 10px;}
.document .empty {text-align: center; margin-top: 50px; margin-bottom: 50px;}

/* -- def -- */
.document .content .content-view h1 {
    font-size: 34px;
    font-family: aileron;
    font-weight: 200;
    line-height: 1.4em;
    margin: 25px 0 15px
}

.document .content .content-view h2 {
    font-size: 30px;
    font-family: aileron;
    font-weight: 200;
    line-height: 1.4em;
    margin: 25px 0 15px
}

.document .content .content-view h3 {
    font-size: 26px;
    font-family: aileron;
    font-weight: 200;
    line-height: 1.4em;
    margin: 25px 0 15px
}

.document .content .content-view h4 {
    font-size: 22px;
    font-family: aileron;
    font-weight: 200;
    line-height: 1.4em;
    margin: 25px 0 15px
}

.document .content .content-view h5 {
    font-size: 18px;
    font-family: aileron;
    font-weight: 200;
    line-height: 1.4em;
    margin: 25px 0 15px
}

.document .content .content-view h6 {
    font-size: 14px;
    font-family: aileron;
    font-weight: 200;
    line-height: 1.4em;
    margin: 25px 0 15px
}

.document .content .content-view span {
    font-size: inherit;
}

/*-- 글 쓰기 --*/
.editor table {width: 100%; border-collapse: collapse; border-top: 1px solid #e6e6e6;}
.editor table tr {border-bottom: 1px solid #e6e6e6;}
.editor table tbody tr th, .editor table tbody tr td { padding: 10px 15px; }
.editor table tbody tr th {background-color: #fafafa; border-bottom: 1px solid #e6e6e6; width: 150px;}
.editor table tbody tr td {border-bottom: 1px solid #e6e6e6;}
.editor table tbody tr td input {height: 35px; box-sizing: border-box; width: 250px; font-size: 16px; padding: 0px 10px; outline: 0; border: 1px solid #dfdfdf;}
.editor table tbody tr td.title input {width: 100%; max-width: 550px;}
.editor .action .back {float:left; margin-left: 0px;}
.editor .action .write {float:right; margin-right: 0px;}
.editor .content { margin: 10px 0px; }

/*-- 비밀번호 입력 --*/
.password { border-top: 1px solid #e6e6e6; border-bottom: 1px solid #e6e6e6; padding: 40px 15px; text-align: center;}
.password p {margin: 0px 0px 30px 0px; }
.password input {height: 35px; box-sizing: border-box; width: 250px; font-size: 16px; padding: 0px 10px; outline: 0; border: 1px solid #dfdfdf;}

/* 모바일용 */
@media only screen and (max-width: 764px) {
    .board-top form { display: flex;}
    .board-top .select  {min-width: 70px; margin-left: 10px; margin-right: 5px; }
    .board-top button { margin-left: 5px; margin-right: 10px; min-width: 70px;}
    .board-top input { flex: 1; min-width: 1px; }
    .info { padding-right: 10px; }
    
    .list .mobile_hidden {display: none;}
    .list thead tr th.num {width: 50px;}
    .list thead tr th.date {width: 100px;}
    .list tbody tr td.date br {display: block;}
    .list thead tr th, .list tbody tr td {padding: 0px 10px 0px 10px;}
    .list thead tr th { white-space:nowrap; }
    .list tbody tr td {}
    .list thead tr th,
    .list tbody tr td {font-size: 1.4rem; }
    .document .detail br {display: block;}
    .document .detail .date-value { padding: 0px 40px 0px 10px;}
    .document .detail .float-header {float: right;}
    .document .detail .float-header .count-value {padding-right: 10px;}
    .document .content .content-view img {max-width: 100%; height: auto !important;}
}