/* default */
#overlay {position: fixed;background: rgb(0, 0, 0);z-index: 99999;left: 0px;top: 0px;width: 100%;height: 100%;opacity: 0.5;}
#overlay_popup {position: fixed;z-index: 999999999;left: 50%;top: 50%;width: 400px;height: 160px;margin-left: -200px;margin-top: -80px;overflow: hidden;background: white;border-radius: 0px;}
#overlay_popup .popup_head {width: 100%;height: 45px;background: #fafafa;border-bottom: 1px solid #efefef;overflow: hidden;}
#overlay_popup .popup_head .title {list-style-type: none;line-height: 45px;font-weight: 500;color: #333;margin-left: 26px;letter-spacing: -1px;text-align: left;}
#overlay_popup .popup_body {width: 100%;height: 115px;overflow: hidden;}
#overlay_popup .popup_body .input-wrap {width: 80%;margin: 10px auto;}
#overlay_popup .popup_body .input-wrap .input-passwd {width: 100%;height: 30px;line-height: 30px;border: 1px solid #333;padding: 0 10px;font-size: 13px;}
#overlay_popup .popup_body .btn-wrap {width: 80%;margin: 10px auto;text-align: center;}
#overlay_popup .popup_body .btn-wrap .btn {line-height: 35px;height: 35px;text-align: center;font-size: 14px;font-weight: bold;text-decoration: none;vertical-align: middle;padding: 0 20px;color: #fff;background: #36312c;border: 1px solid #36312c;transition: .5s;display: inline;cursor: pointer;-webkit-transition: background-color 0.3s ease-out;-moz-transition: background-color 0.3s ease-out;-o-transition: background-color 0.3s ease-out;transition: background-color 0.3s ease-out;}
#overlay_popup .popup_body .btn-wrap .btn:hover {background: #fff;color: #36312c}
    
@media only screen and (max-width:1450px) {
}
@media only screen and (max-width:1200px) {
}
@media only screen and (max-width:1023px) {
}
@media only screen and (max-width:860px) {
}
@media only screen and (max-width:767px) {
}
@media only screen and (max-width:640px) {
    #overlay_popup {width: 60%;margin-left: 0;transform: translateX(-50%);}
}
@media only screen and (max-width:479px) {
    #overlay_popup {width: 80%;}
}

.board_wrap {width:60%;margin: 0 auto;padding:100px 0;text-align: left;}
.board_wrap input,
.board_wrap input:focus,
.board_wrap textarea {border:1px solid #333;box-shadow:none;outline:none;}

/* board list */
.board-list {}
.board-list fieldset {float: left;border: 1px solid #ccc;background: #fff;margin-bottom: 10px;font-size: 15px;}
.board-list fieldset select.search-select {border: 0;padding: 9px 5px;height: 38px;float: left;border-right: 1px solid #ddd;}
.board-list fieldset input.search-input {height: 38px;border: 0;padding-left: 5px;background-color: transparent;float: left;}
.board-list fieldset button.btn-search {height: 38px;float: left;background-color: #e9e9e9;border: 0;width: 40px;font-size: 15px;cursor: pointer;}
.board-list .pagination {margin: 50px 0 0;font-size: 14px;}
.board-list .pagination ul {width: 100%;overflow: hidden;text-align: center;}
.board-list .pagination ul li {display: inline-block;padding: 10px 15px;border: 1px solid #000;margin-right: 5px;}
.board-list .pagination ul li.on {color: #fff;background: #000;}
.board-list .pagination ul li a {color:inherit;}
.board-list .btn-row {margin: 10px 0;text-align: right;}
.board-list .btn {line-height: 35px;height: 35px;padding: 0 10px;font-weight: bold;border: 0;-webkit-transition: background-color 0.3s ease-out;-moz-transition: background-color 0.3s ease-out;-o-transition: background-color 0.3s ease-out;transition: background-color 0.3s ease-out;}
.board-list .btn-write {color: #fff;background: #36312c;border: 1px solid #36312c;transition: .5s;padding: 0 20px;cursor: pointer;}
.board-list table.tbl-board-list {width: 100%;border-spacing: 0;border-collapse: collapse;}
.board-list table.tbl-board-list caption {display: none;}
.board-list table.tbl-board-list thead th,
.board-list table.tbl-board-list tbody td {font-size:15px;line-height:1.2;}
.board-list table.tbl-board-list thead th {color: #545b64;background-color: #f0f0f0;border: 1px solid #a9a9a9;padding: 1rem;text-align: center;}
.board-list table.tbl-board-list thead th:first-child {border-left: 0;}
.board-list table.tbl-board-list thead th:last-child {border-right: 0;}
.board-list table.tbl-board-list tbody td {color: #545b64;background-color: #fff;border-bottom: 1px solid #a9a9a9;padding: 1rem;}
.board-list table.tbl-board-list tbody td.td_num {width: 10%;text-align: center;}
.board-list table.tbl-board-list tbody td.td_subject {}
.board-list table.tbl-board-list tbody td.td_name {width: 18%;text-align: center;}
.board-list table.tbl-board-list tbody td.td_read {width: 10%;text-align: center;}
.board-list table.tbl-board-list tbody td.td_datetime {width: 18%;text-align: center;}
.board-list table.tbl-board-list tbody td.td_no_data {height: 200px;line-height: 200px;text-align: center;}

/* board view */
.board-view {}
.board-view header h2 {border-top: 1px solid #333;border-left: none;border-right: none;border-bottom: 1px solid #ddd;font-size: 17px;line-height: 1.2;padding: 15px 10px;background: #fafafa;}
.board-view header h2 span {display: block;font-size: inherit;word-break: break-all;}
.board-view section.board-desc {min-height: 200px;height: auto !important;}
.board-view section.board-desc .infos {width: 100%;line-height: 1.5;border-bottom: 1px solid #ddd;word-break: break-all;overflow: hidden;padding: 12px 10px;clear: both;box-sizing: border-box;font-size: 14px;}
.board-view section.board-desc .infos div {letter-spacing: .5px;}
.board-view section.board-desc .infos .writer {float: left;}
.board-view section.board-desc .infos .read-cnt {float: right;margin-left: 10px;}
.board-view section.board-desc .infos .reg-date {float: right;margin-left: 10px;}
.board-view section.board-desc .desc {padding: 12px 10px;width: 100%;line-height: 1.5;min-height: 200px;word-break: break-all;overflow: hidden;box-sizing: border-box;}
.board-view .attach-files {padding: 20px 0;border-top:1px solid #ddd;border-bottom: 1px solid #ddd;}
.board-view .attach-files ul li {}
.board-view .attach-files ul li + li {margin-top:10px;}
.board-view .attach-files ul img {max-width: 100%;}
.board-view .btn-group {text-align: right;padding: 12px 10px;font-size: 0;}
.board-view .btn-group .btn {line-height: 35px;height: 35px;text-align: center;font-size: 14px;font-weight: bold;text-decoration: none;vertical-align: middle;padding: 0 20px;color: #fff;background: #36312c;border: 1px solid #36312c;transition: .5s;display: inline;cursor: pointer;-webkit-transition: background-color 0.3s ease-out;-moz-transition: background-color 0.3s ease-out;-o-transition: background-color 0.3s ease-out;transition: background-color 0.3s ease-out;}
.board-view .btn-group .btn + .btn {margin-left:8px;}
.board-view .btn-group .btn:hover {background: #fff;color: #36312c;}
.board-view .comment-write {margin: 20px 0;}
.board-view .comment-write li label,
.board-view .comment-write li input,
.board-view .comment-write li button {display:inline-block;vertical-align:middle;}
.board-view .comment-write ul {font-size:0;}
.board-view .comment-write .mh_wrap {margin: 15px 0 0;}
.board-view .comment-write ul li {display:inline-block;vertical-align:middle;width: auto;font-size: 0;}
.board-view .comment-write ul li + li {margin-left:10px;}
.board-view .comment-write ul li label {margin-right:10px;font-size: 15px;}
.board-view .comment-write ul li [type=text],
.board-view .comment-write ul li [type=password] {height: 35px;width: 150px;color: #333;font-size: 13px;padding: 0 10px;margin-right: 0;box-sizing: border-box;border: 1px solid #333;}
.board-view .comment-write textarea {width: 100%;height: 100px;resize: none;font-size: 14px;color: #333;padding: 10px;box-sizing: border-box;border: 1px solid #333;}
.board-view .comment-write .btn {line-height: 35px;height: 35px;text-align: center;font-size: 14px;font-weight: bold;text-decoration: none;vertical-align: middle;padding: 0 20px;color: #fff;background: #36312c;border: 1px solid #36312c;transition: .5s;display: inline;cursor: pointer;-webkit-transition: background-color 0.3s ease-out;-moz-transition: background-color 0.3s ease-out;-o-transition: background-color 0.3s ease-out;transition: background-color 0.3s ease-out;}
.board-view .comment-list {margin: 50px 0 10px 0;border-top: 1px solid #333;border-bottom: 1px solid #333;}
.board-view .comment-list ul {overflow: hidden;}
.board-view .comment-list ul li {font-size: 13px;}
.board-view .comment-list ul li  + li {border-top: 1px solid #333;}
.board-view .comment-list ul li .infos {border-bottom: 1px solid #ddd;overflow: hidden;padding: 12px 0;margin: 0 10px;}
.board-view .comment-list ul li .infos p {letter-spacing:.2px;}
.board-view .comment-list ul li .infos p:first-child {float: left;}
.board-view .comment-list ul li .infos p:last-child {float: right;}
.board-view .comment-list ul li .desc {clear: both;border-bottom: 1px solid #ddd;padding: 12px 0;margin: 0 10px;}

/* board write */
.board-write {}
.board-write .board-write-row {padding: 10px 30px;font-size:inherit;}
.board-write .board-write-row input {font-size:inherit;border: 0;}
.board-write .board-write-row input[name="mh_file_delete[]"] {-webkit-appearance: checkbox;apperance: checkbox;margin-left: 10px;margin-bottom: 2px;}
.board-write .board-write-row .btn {line-height: 35px;height: 35px;padding: 0 10px;font-weight: bold;border: 0;-webkit-transition: background-color 0.3s ease-out;-moz-transition: background-color 0.3s ease-out;-o-transition: background-color 0.3s ease-out;transition: background-color 0.3s ease-out;}
.board-write .board-write-row .btn-cancel {color: #fff;background: #969696;border: 1px solid #969696;transition: .5s;cursor: pointer;}
.board-write .board-write-row .btn-submit {color: #fff;background: #36312c;border: 1px solid #36312c;transition: .5s;padding: 0 20px;cursor: pointer;}
.board-write .board-write-row .form-label {display: block;margin-bottom: 10px;}
.board-write .board-write-row .form-input {width: 100%;height: 40px;padding: 0 10px;outline: none;border: none;box-sizing: border-box;margin-bottom: 10px;background: #f5f5f5;}
.board-write .board-write-row textarea {width: 100%;height: 350px;resize: none;border: none;background: #f5f5f5;padding: 10px;box-sizing: border-box;}
.board-write .board-write-row.btn-row {text-align: center;}

@media screen and (max-width: 1023px) {
    .board_wrap {width:90%;}
	.board-list table.tbl-board-list thead th,
	.board-list table.tbl-board-list tbody td {font-size:14px;}
	.board-list fieldset select.search-select,
	.board-list fieldset input.search-input {font-size:14px;}
    .board-list .pagination {font-size:14px;}
	.board-view .comment-write li label {}
	.board-view .comment-write [type=text],
    .board-view .comment-write [type=password] {}
	.board-view .comment-write .btn {width: 70px;}
    .board-write {font-size:14px;}
}

@media screen and (max-width: 860px) {
	.board-list table.tbl-board-list thead th,
	.board-list table.tbl-board-list tbody td {font-size:13px;padding: 15px 5px;vertical-align: middle;}
	.board-list fieldset select.search-select,
	.board-list fieldset input.search-input {font-size:13px;}
	.board-list .pagination {font-size:13px;}
	.board-view {width: 80%;padding: 50px 10px 100px;text-align: left;}
	.board-view .comment-write li label {}
	.board-view .comment-write [type=text],
	.board-view .comment-write [type=password] {}
    .board-view .btn-group .btn,
	.board-view .comment-write .btn {width: 70px;font-size:13px;}
    .board-write {font-size:13px;}
    .board-write .board-write-row {padding:10px 0;}
}

@media screen and (max-width: 768px) {
	.board_wrap {width: 80%;margin: 0 auto;text-align: left;padding: 50px 0 100px;}
    .board-view .btn-group .btn,
	.board-view .comment-write .btn {width: 60px;font-size:12px;padding:0;}
	.board-write .board-write-row .form-label {}
}

@media screen and (max-width: 640px) {
	.board_wrap {width: 100%;padding: 30px 10px 100px;text-align: left;box-sizing: border-box;}
    .board-list fieldset {float: left;width: 100%;border: 1px solid #ccc;background: #fff;border-radius: 3px;margin-bottom: 10px;position: relative;}
	.board-list fieldset select.search-select {border: 0;padding: 9px 5px;width: 90px;height: 38px;float: left;border-right: 1px solid #ddd;position: absolute;top: 0;left: 0;}
	.board-list fieldset input.search-input {width: 100%;height: 38px;border: 0;padding: 0 38px 0 100px;background-color: transparent;float: left;}
	.board-list fieldset button.btn-search {height: 38px;float: left;background-color: #e9e9e9;border: 0;width: 40px;font-size: 15px;cursor: pointer;position: absolute;top: 0;right: 0;}
	.board-write .board-write-row .form-label {}
	.board-write .board-write-row textarea {width: 100%;height: 250px;resize: none;padding: 5px;}
    .board-view .comment-write ul li [type=text], 
    .board-view .comment-write ul li [type=password] {width:120px;font-size: 13px;}
    .board-view .comment-write textarea {font-size:13px;}
	.board-view section.board-desc .infos {font-size:13px;}
	.board-view .comment-write ul li + li {margin-left:8px;}
	.board-view .comment-write ul li label {font-size: 14px;}
	.board-view .comment-write li label {}
	.board-view .comment-write [type=text], 
	.board-view .comment-write [type=password] {}
    .board-view .comment-list ul li {font-size:13px;}
}

@media screen and (max-width: 479px) {
    .board-view .comment-write ul li [type=text], 
    .board-view .comment-write ul li [type=password] {width: 100px;}
}

@media screen and (max-width: 400px) {
    .board-view .comment-write ul li label {font-size:13px;}
    .board-view .comment-write ul li [type=text], 
    .board-view .comment-write ul li [type=password] {width: 70px;}
}

@media screen and (max-width: 350px) {
	.board-view .comment-write ul li:first-of-type {display:block;}
    .board-view .comment-write ul li + li {margin-left:0;margin-top:10px;}
    .board-view .comment-write ul li + li + li {margin-left:8px;}
    .board-view .comment-write ul li label {width:50px;}
    .board-view .comment-write ul li [type=text], 
    .board-view .comment-write ul li [type=password] {width:150px;}
}