@charset "utf-8";

/* -- 게시판 공통 -- */
.board {
	font-family: "Noto Sans KR", sans-serif;
	position: relative;
	width: 100%;
}

.board .web_col {
	display: table-column-group;
}

.board .mob_col {
	display: none;
}
.board .web_td {
	display: table-cell;
}

.board .mob_td {
	display: none;
}

.board .board_subject {
    display: block;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board .icon_lock {
    display: inline-block;
    margin-right: 10px;
    position: relative;
    top: -1px;
}
.board .icon_lock_cmt{
	display: inline-block;
    margin-right: 5px;
    position: relative;
    top: -1px;
}

.board .view .custom_field:last-of-type {
	border-bottom: 1px solid #f1f1f1;
}

.board .view .custom_field td {
	border-bottom: none;
	padding: 0;
}

.board .view .custom_field td ul::after {
	content: "";
	display: block;
	clear: both;
}

.board .view .custom_field {
	border-bottom: 1px solid #f9f9f9;
}

.board .view .custom_field td ul li {
	float: left;
	padding: 15px 10px;
}

.board .view .custom_field td ul li:nth-child(1) {
	background-color: #f9f9f9;
	width: 200px;
}

.board .view .custom_field td ul li:nth-child(2) {
	width: calc(100% - 200px);
	text-align: left;
}

@media (max-width:991px) {

	.board table td,
	.board table th {
		padding: 15px 5px;
	}
	
	.board .web_col {
		display: none;
	}
	
	.board .mob_col {
		display: table-column-group;
	}
	
	.board .web_td {
		display: none;
	}
	
	.board .mob_td {
		display: table-cell;
	}
}

/* 게시판 제목 말줄임 */
.board .subject {
	display: block;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.board .subject2 {
	display: block;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	/* 라인수 */
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	line-height: 1.2em;
	height: 2.4em;
	overflow: hidden;
}

.board .subject3 {
	display: block;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	/* 라인수 */
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	line-height: 1.2em;
	height: 3.6em;
	overflow: hidden;
}

/* -- 비밀번호 팝업 -- */
#board_pw .modal-body {
	padding: 2rem 1rem;
}

#board_pw .pw_title {
	padding: 0 0 1rem;
	text-align: center;
}

#board_pw td:nth-child(1) {
	width: 60%;
	padding: 0 5px;
}

#board_pw td:nth-child(2) {
	width: 20%;
	padding: 0 5px;
}

#board_pw td:nth-child(3) {
	width: 20%;
	padding: 0 5px;
}

#board_pw button {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 37px;
	text-align: center;
	border-radius: 5px;
}

#board_pw a {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 37px;
	text-align: center;
	border-radius: 5px;
}

#board_pw input {
	border-radius: 5px;
}

/* -- 글갯수 -- */
.board .total {
	padding: 0 2px 10px 0;
	text-align: left;
	line-height: 1em;
}

@media (max-width:991px) {
	.board .total {
		text-align: right;
	}
}

/* -- 개시물 없음 -- */
.no_data {
	padding: 10% 0;
	text-align: center;
}

.no_data i {
	font-size: 3em;
}

.no_data p {
	padding: 10px 0 0;
}

/* -- 첨부파일 -- */
.filebox {
	overflow: hidden;
}

.filebox .upload-name {
	vertical-align: middle;
}

.filebox label {
	padding: 0;
}

.filebox label i {
	display: block;
	height: 40px;
	line-height: 38px;
	text-align: center;
	border-radius: 40px;
	cursor: pointer;
}

/* -- 버튼 -- */
.btn_wrap {
	padding: 20px 0 0;
	overflow: hidden;
}

.btn_wrap a {
	display: inline-block;
	height: 35px;
	padding: 0;
	vertical-align: middle;
	text-align: center;
	line-height: 35px;
	border-radius: 5px;
	transition: all 0.3s;
	width: 80px;
	text-align: center;
	color: #3a3a3a;
	font-size: 16px;
}

.btn_wrap a:hover {
	opacity: 0.9;
	background-color: #3a3a3a;
	color: #fff;
	text-decoration: none;
}

.btn_wrap input[type="submit"] {
	display: inline-block;
	vertical-align: middle;
	width: auto;
	padding: 0 50px;
	line-height: 40px;
	border-radius: 50px;
}

.btn_wrap input[type="submit"]:hover {
	opacity: 0.9;
}

.btn_wrap button {
	display: inline-block;
	height: 40px;
	margin: 0 3px;
	padding: 0 50px;
	vertical-align: middle;
	text-align: center;
	line-height: 40px;
	border: 0;
	border-radius: 50px;
	transition: all 0.3s ease 0.2s;
}

.btn_wrap button:hover {
	opacity: 0.9;
}

.btn_wrap ul {
	margin: 0;
}

.btn_wrap.blist,
.btn_wrap.bview {
	border-top: 0 !important;
}

.btn_wrap.blist ul li {
	text-align: right;
}

.btn_wrap.bview ul li:nth-child(1) {
	float: left;
	width: 50%;
	text-align: left;
	mine-height: 1px;
}

.btn_wrap.bview ul li:nth-child(2) {
	float: left;
	width: 50%;
	text-align: right;
}

/* 버튼 색상 */
.bt_main {
	color: #fff !important;
	background: #3a3a3a;
	border: 1px solid #3a3a3a;
}

.bt_gray {
	color: #fff !important;
	background: #919191;
	border: 1px solid #919191;
}

.bt_red {
	color: #ed1846;
}

.bt_line {
	border: 1px solid #ddd;
}

/* -- 리스트 -- */
.board .list {
	width: 100%;
	border-top: 2px solid #f1f1f1;
}

.board .list td,
.board .list th {
	padding: 15px 10px;
	text-align: center;
	font-weight: 400;
	border-bottom: 1px solid #f1f1f1;
}

.board .list th {
	background: #10193A;
	color: #fff;
}

.board .list .icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("/asset/dogood/img/common/icon_notice.png") no-repeat center 0, #3a3a3a;
	border-radius: 50px;
	overflow: hidden;
}

.board .list .end {
	display: inline-block;
	padding: 5px 10px 3px;
	color: #fff;
	border-radius: 5px;
	background: #3a3a3a;
}

.board .list .ing {
	display: inline-block;
	padding: 5px 10px 3px;
	color: #fff;
	border-radius: 5px;
	background: #999;
}

.board .list .bg {
	background-color: #f4f4f4;
}

.board .list .cmm_count {
	font-size: 14px;
	color: #b3b3b3;
	position: relative;
	top: -1px;
}

/* -- 보기 -- */
.board .view {
	width: 100%;
	border-top: 2px solid #f1f1f1;
}

.board .view th {
	padding: 15px 10px;
	text-align: center;
	font-weight: 500;
	border-bottom: 1px solid #f1f1f1;
	background: #fafafa;
}

.board .view td {
	padding: 15px 10px;
	text-align: center;
	border-bottom: 1px solid #f1f1f1;
}

.board .view .date {
	font-size: 0.9em;
	color: rgba(108, 102, 97, 0.5);
}

.board .view .file td {
	padding: 0;
}

.board .view .file dl {
	overflow: hidden;
	margin-bottom: 0;
	position: relative;
}

.board .view .file dt {
	float: left;
	width: 200px;
	font-weight: 400;
	line-height: 1.7em;
	padding: 15px 10px;
	background-color: #f9f9f9;
	position: absolute;
	height: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.board .view .file dt span {
	display: block;
    width: 100%;
}

.board .view .file dd {
	float: left;
	width: calc(100% - 200px);
	padding: 15px 10px;
	line-height: 1em;
	margin-left: 200px;
}

.board .view .file dd a {
	line-height: 1.7em;
}

.board .view .con {
	text-align: left;
	display: block;
	min-height: 200px;
}

.board .view .con img {
	display: block;
	width: auto;
	max-width: 100%;
	margin: 0 auto;
}

.board .view .no-file {
	color: #aaaaaa;
}

/* -- qna 답변 -- */
.board .answer {
	padding: 15px 10px;
}

.board .answer > div:nth-child(1) {
    border-bottom: 1px solid #333;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.board .answer > div:nth-child(2) p {
	padding-left: 30px;	
	position: relative;
}

.board .answer > div:nth-child(2) p::before {
	content: "┗";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.board .answer span {
	font-size: 0.9em;
	color: rgba(108, 102, 97, 0.5);
	margin-left: 10px;
}

.board .answer p {
	display: inline-block;
	margin: 0;
}

.board .answer th {
	vertical-align: top;
}

.board .answer td {
	vertical-align: top;
	text-align: left;
}

/* -- 페이징 -- */
#page {
	padding: 5% 0 0;
	text-align: center;
	clear: both;
}

#page a {
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	font-size: 16px;
}

#page a:hover {
	color: #3a3a3a;
}

#page .on {
	border-radius: 50%;
	color: #fff;
	background: #3a3a3a;
}

#page .on:hover {
	color: #fff;
}

#page .first,
#page .last,
#page .next,
#page .prev {
	width: 20px;
	height: 40px;
	background: url("/asset/dogood/img/common/arrow.png") no-repeat;
	vertical-align: top;
}

#page .first {
	background-position: -40px 8px;
}

#page .prev {
	background-position: 0 8px;
	margin: 0 2% 0 0;
}

#page .next {
	background-position: -20px 8px;
	margin: 0 0 0 2%;
}

#page .last {
	background-position: -60px 8px;
}

/* -- 검색 -- */
.board_search {
	width: 500px;
	margin: 0 auto;
	padding: 20px 0 0;
	text-align: center;
}

.board_search ul {
	font-size: 0;
}

.board_search ul li {
	display: inline-block;
	width: 20%;
	padding: 0 1px;
	font-size: 16px;
	vertical-align: middle;
}

.board_search ul li:nth-child(2) {
	width: 40%;
}

.board_search input {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 41px;
	padding: 0 10px;
	vertical-align: middle;
	color: inherit;
	border: 1px solid #e5e5e5;
	background: #fff;
	transition: all 0.3s;
}

.board_search select {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 41px;
	padding: 0 10px;
	vertical-align: middle;
	color: inherit;
	border: 1px solid #e5e5e5;
	background: #fff;
	transition: all 0.3s;
}

.board_search .search-all {
	background-color: #3a3a3a;
	color: #fff;
}

.board_search .search-btn {
	background-color: #b3b3b3;
	color: #fff;
}

.board_search .search-btn:hover {
	background-color: #3a3a3a;
}

@media (max-width:991px) {
	.board_search {
		width: 95%;
		margin: 0 auto;
	}
	
	.board_search ul li {
		font-size: 14px;
	}
}

@media (max-width:767px) {
	.board_search ul li {
		font-size: 12px;
	}
	
	.btn_wrap a {
		font-size: 12px;
		width: 70px;
	}
}

/* -- 댓글 -- */
.board .comments-default {
	background-color: #f9f9f9;
	padding: 30px;
	margin-top: 100px;
}

.board .comments-default .comments-wrap .comments-header {
	padding-bottom: 10px;
	border-bottom: 1px solid #3a3a3a;
}

.board .comments-list-controller {
	margin-top: 5px;
}

.board .comments-list .comments-list-content > p{
	display: inline-block;
}

.board .comments-list-controller button {
	padding: 3px 10px;
	font-size: 14px;
	background-color: transparent;
	border-radius: 5px;
	border: 1px solid #3a3a3a;
}

.board .comments-default .comments-wrap .comments-header .comments-count {
	float: left;
}

.board .comments-default .comments-wrap .comments-header .comments-sort {
	float: right;
}

.board .comments-default .comments-list .comments-list-username {
	font-weight: bold;
}

.board .comments-default .comments-list .comments-list-create {
	margin-left: 5px;
	font-size: 14px;
	font-weight: 400;
}

.board .comments-default .comments-list .comments-list-create,
.board .comments-default .comments-list .comments-list-username {
	display: inline-block;
}

.board .comments-default .comments-list .comments-list-content textarea {
	width: 100%;
	padding: 3px 5px;
}

.board .comments-default .comments-list .comments-list-content .left,
.board .comments-default .comments-list .comments-list-content .right {
	display: inline-block;
}

.board .comments-default .comments-wrap .cmt_form {
	padding-top: 20px;
}

.board .comments-default .comments-wrap .cmt_form label {
	vertical-align: top;
	width: 70px;
}

.board .comments-default .comments-wrap .cmt_form .row-1 {
	margin: 7px 0;
}

.board .comments-default .comments-wrap .cmt_form .row-1.txt-rt {
	text-align: right;
}

.board .comments-default .comments-wrap .cmt_form input[type="checkbox"] {
	width: 50px;
	padding: 3px 5px;
}

.board .comments-default .comments-wrap .cmt_form input {
	width: 200px;
	padding: 3px 5px;
}

.board .comments-default .comments-wrap .cmt_form textarea {
	width: calc(100% - 75px);
	min-height: 150px;
	padding: 3px 5px;
	box-sizing: border-box;
}

.board .comments-default .comments-wrap .cmt_form #cmtSubmit {
	display: inline-block;
	width: 80px;
	height: 35px;
	line-height: 31px;
	padding: 0 10px;
	vertical-align: middle;
	transition: all 0.3s;
	margin-left: auto;
	text-align: center;
}

.board .comments-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	background: none;
}

.board .comments-list>ul {
	padding: 20px 0;
	border-bottom: 1px solid #b3b3b3;
}

.board .comments-list ul .reComment {
	padding: 15px 0 0 40px;
	position: relative;
}

.board .comments-list ul .reComment::before {
	content: "↪";
	display: block;
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
}

.board .comments-list ul li:not(:fisrt-child) {
	padding: 15px 0 0;
}

/* -- 카테고리 -- */
.category_list {
	margin-bottom: 10px;
}

.category_list li {
	display: inline-block;
	background-color: #efefef;
	padding: 5px 15px;
	border-radius: 5px;
	cursor: pointer;
	margin-right: 5px;
	margin-bottom: 7px;
}

.category_list li.on {
	background-color: #333;
	color: #fff;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
}

/* -- 패스워드 -- */
#password {
	font-family: "Noto Sans KR", sans-serif;
	padding: 150px 0;
}

#password .inner_wrap>div {
	width: 600px;
	margin: 0 auto;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
	padding: 20px;
	text-align: center;
}

#password .inner_wrap .warring_message {
	margin-bottom: 20px;
	font-size: 18px;
}

#password .inner_wrap>div input.password {
	display: inline-block;
	width: 59%;
	height: 40px;
	line-height: 41px;
	padding: 0 10px;
	vertical-align: middle;
	color: inherit;
	border: 1px solid #e5e5e5;
	background: #fff;
	box-sizing: border-box;
	position: relative;
	top: -2px;
}

#password .inner_wrap>div button.btn_submit {
	display: inline-block;
	width: 19%;
	height: 40px;
	line-height: 37px;
	text-align: center;
	border-radius: 5px;
	box-sizing: border-box;
}

#password .inner_wrap>div a.btn_cancel {
	display: inline-block;
	width: 19%;
	height: 40px;
	line-height: 37px;
	text-align: center;
	border-radius: 5px;
	box-sizing: border-box;
}

/* -- 게시판 작성 -- */
.default .write_content {
	border: 1px solid #b5b5b5;
	padding: 30px;
}

.default .write_content table {
	width: 100%;
}

.default .write_content table caption,
.default .write_content table tr,
.default .write_content table th {
	text-align: left;
}

.default .write_content table td {
	text-align: left;
}

.default .write_content table th,
.default .write_content table td {
	padding-top: 15px;
}

.default .write_content table input[type=text],
.default .write_content table input[type=password],
.default .write_content table select {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 41px;
	padding: 0 10px;
	vertical-align: middle;
	color: inherit;
	border: 1px solid #e5e5e5;
	background: #fff;
	transition: all 0.3s;
}

.default .write_content table textarea {
	display: block;
	width: 100%;
	height: 300px;
	line-height: 41px;
	padding: 0 10px;
	vertical-align: middle;
	color: inherit;
	border: 1px solid #e5e5e5;
	background: #fff;
	transition: all 0.3s;
}

.default .write_content table .pass_wrap,
.default .write_content table .pass_input {
	display: inline-block;
}

.default .write_content table .pass_input {
	width: 500px;
}

/* -- 게시판 갤러리 -- */
.gallery .write_content {
	border: 1px solid #b5b5b5;
	padding: 30px;
}

.gallery .write_content table {
	width: 100%;
}

.gallery .write_content table caption {
	text-align: center;
}

.gallery .write_content table th {
	text-align: left;
}

.gallery .write_content table td {
	text-align: left;
}

.gallery .write_content table th,
.gallery .write_content table td {
	padding-top: 15px;
}

.gallery .write_content table input[type=text],
.gallery .write_content table input[type=text],
.gallery .write_content table input[type=password],
.gallery .write_content table input[type=text],
.gallery .write_content table select {
	display: block;
	width: 100%;
	height: 40px;
	line-height: 41px;
	padding: 0 10px;
	vertical-align: middle;
	color: inherit;
	border: 1px solid #e5e5e5;
	background: #fff;
	transition: all 0.3s;
}

.gallery .write_content table textarea {
	display: block;
	width: 100%;
	height: 300px;
	line-height: 41px;
	padding: 0 10px;
	vertical-align: middle;
	color: inherit;
	border: 1px solid #e5e5e5;
	background: #fff;
	transition: all 0.3s;
}

.gallery .write_content table .pass_wrap,
.gallery .write_content table .pass_input {
	display: inline-block;
}

.gallery .write_content table .pass_input {
	width: 500px;
}

@media (max-width:767px) {
	.board {
		padding: 20px;
	}
	
	#password .inner_wrap>div {
		width: 100%;
	}
}

/* -- 게시판 갤러리_포트폴리오 커스텀 -- */
.board .portfolio_wrap {
	width: 1230px;
	padding-top: 20px;
	margin-left: -15px;
}

.board .portfolio_wrap .portfolio_list {
	float: left;
	width: 25%;
}

.board .portfolio_wrap .portfolio_list:nth-child(5),
.board .portfolio_wrap .portfolio_list:nth-child(6),
.board .portfolio_wrap .portfolio_list:nth-child(7),
.board .portfolio_wrap .portfolio_list:nth-child(8) {
	margin: 10px 0;
}

.board .portfolio_wrap .portfolio_list a {
	display: block;
}

.board .portfolio_wrap .portfolio_list a img {
	width: 100%;
}

@media (max-width: 768px) {
	.category_list {
		text-align: center;
	}
	
	.board .portfolio_wrap {
		width: 100%;
		margin-left: 0;
	}
	
	.board .portfolio_wrap .portfolio_list {
		float: left;
		width: 50%;
	}
}