@charset "UTF-8";

.board.co-board {
	--faq-red: #c10230;
	--faq-navy: #01314d;
	--faq-text: #111;
	--faq-line: #e5e5e5;
}

.board.co-board .bn-search { padding: 0 0 20px; }
.board.co-board .bn-search form { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.board.co-board .bn-search .b-total-wrap { align-self: flex-end; padding: 0 20px 0 0; }
.board.co-board .bn-search .b-total-wrap p { margin: 0; font-size: 14px; font-weight: 700; color: #000; line-height: 20px; }
.board.co-board .bn-search .b-total-wrap span { padding-left: 5px; color: var(--faq-red); }
.board.co-board .bn-search .b-search-wrap { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: 1; min-width: 0; border: 0; }
.board.co-board .bn-search .b-sel-box { display: inline-flex; min-width: 113px; }
.board.co-board .bn-search .b-select {
	padding: 14px 36px 14px 18px; min-width: 140px; height: 52px; border: 1px solid #ddd; border-radius: 5px;
	background: #fff url(../img/board/ico-common-select-arrow.png) no-repeat center right 15px/13px 8px;
	font-size: 15px; font-weight: 600; color: #4a4a4a; line-height: 21px; box-sizing: border-box; appearance: none;
}
.board.co-board .bn-search .b-search-box { display: flex; position: relative; gap: 10px; }
.board.co-board .bn-search .b-input {
	padding: 11px 45px 12px 18px; min-width: 260px; height: 52px; border: 1px solid #ddd; border-radius: 5px;
	font-size: 15px; font-weight: 600; color: #6b6b6b; line-height: 21px; box-sizing: border-box;
}
.board.co-board .bn-search .b-sel-btn {
	width: 52px; height: 52px; border: 0; border-radius: 10px; background: var(--faq-red) url(../img/board/ico-search.png) no-repeat center; cursor: pointer;
}

.board.co-board .bn-faq-list .b-top-info-wrap { position: relative; }
.board.co-board .bn-faq-list .b-faq-list-box > ul { margin: 0; padding: 0; list-style: none; }
.board.co-board .bn-faq-list .b-faq-list-box > ul > li { position: relative; border-top: 1px solid var(--faq-line); }
.board.co-board .bn-faq-list .b-faq-list-box > ul > li:last-child { border-bottom: 1px solid var(--faq-line); }
.board.co-board .bn-faq-list .b-faq-list-box > ul > li.deleted { opacity: .55; }
.board.co-board .bn-faq-list .article-chk { position: absolute; top: 5px; left: 5px; z-index: 2; }
.board.co-board .bn-faq-list .b-faq-question {
	display: flex; align-items: center; position: relative; gap: 20px; padding: 30px 55px 30px 0; min-height: 110px;
	color: inherit; text-decoration: none; box-sizing: border-box;
}
.board.co-board .bn-faq-list .b-faq-question::after {
	content: ""; position: absolute; top: 50%; right: 8px; width: 18px; height: 18px; border-right: 3px solid var(--faq-navy);
	border-bottom: 3px solid var(--faq-navy); transform: translateY(-70%) rotate(45deg); transition: transform .3s ease; box-sizing: border-box;
}
.board.co-board .bn-faq-list li.active .b-faq-question::after { transform: translateY(-30%) rotate(225deg); }
.board.co-board .bn-faq-list .b-q-marker {
	display: flex; flex: 0 0 50px; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%;
	background: var(--faq-red); font-size: 26px; font-weight: 600; color: #fff; line-height: 1;
}
.board.co-board .bn-faq-list .b-q-title-box { display: flex; align-items: center; min-width: 0; }
.board.co-board .bn-faq-list .b-q-cate {
	display: inline-block; flex-shrink: 0; margin-right: 15px; padding: 6px 8px 7px; min-width: 62px; border: 1px solid var(--faq-red);
	border-radius: 14px; background: #fff; font-size: 13px; font-weight: 700; color: var(--faq-red); line-height: 1; text-align: center; box-sizing: border-box;
}
.board.co-board .bn-faq-list .b-q-con { font-size: 22px; font-weight: 600; color: var(--faq-text); line-height: 1.4; overflow-wrap: anywhere; }
.board.co-board .bn-faq-list .b-faq-answer { position: relative; padding: 32px 40px 40px; background: #f9f9f9; box-sizing: border-box; }
.board.co-board .bn-faq-list .b-faq-answer[hidden] { display: none; }
.board.co-board .bn-faq-list .b-faq-answer-inner { display: flex; align-items: flex-start; gap: 24px; }
.board.co-board .bn-faq-list .b-a-marker {
	display: flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
	background: var(--faq-navy); font-size: 17px; font-weight: 600; color: #fff; line-height: 1;
}
.board.co-board .bn-faq-list .b-a-con { min-width: 0; font-size: 18px; font-weight: 600; color: var(--faq-text); line-height: 1.6; overflow-wrap: anywhere; }
.board.co-board .bn-faq-list .b-a-con .pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.board.co-board .bn-faq-list .b-attach-file { margin-top: 24px; }
.board.co-board .bn-faq-list .b-attach-file p { margin: 0 0 8px; font-weight: 700; }
.board.co-board .bn-faq-list .b-attach-file ul { margin: 0; padding: 0; list-style: none; }
.board.co-board .bn-faq-list .b-attach-file a { color: #448aff; text-decoration: underline; text-underline-offset: 4px; overflow-wrap: anywhere; }
.board.co-board .bn-faq-list .b-btn-modify {
	display: inline-block; margin: 10px 0 0 56px; padding: 6px 14px; border: 1px solid #94c0de; border-radius: 24px;
	font-size: 14px; font-weight: 600; color: #1c73c4; line-height: 24px; text-align: center; box-sizing: border-box;
}
.board.co-board .bn-faq-list .b-no-post { padding: 60px 20px; text-align: center; font-size: 16px; line-height: 1.6; }

.board.co-board .b-paging .b-paging-wrap > ul { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0; padding: 40px 0 0; list-style: none; }
.board.co-board .b-paging li a {
	display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; border-radius: 50%;
	font-size: 15px; font-weight: 600; color: #555; text-decoration: none; box-sizing: border-box;
}
.board.co-board .b-paging li a.active { background: var(--faq-red); color: #fff; }
.board.co-board .b-paging li.pager a::before { content: ""; width: 9px; height: 9px; border-top: 2px solid #555; border-right: 2px solid #555; }
.board.co-board .b-paging li.first a::after, .board.co-board .b-paging li.last a::after { content: ""; width: 9px; height: 9px; border-top: 2px solid #555; border-right: 2px solid #555; }
.board.co-board .b-paging li.first a::before, .board.co-board .b-paging li.prev a::before { transform: rotate(-135deg); }
.board.co-board .b-paging li.first a::after { margin-left: -5px; transform: rotate(-135deg); }
.board.co-board .b-paging li.next a::before, .board.co-board .b-paging li.last a::before { transform: rotate(45deg); }
.board.co-board .b-paging li.last a::after { margin-left: -5px; transform: rotate(45deg); }
.board.co-board .b-paging li.pager.disable a { background-repeat: no-repeat; background-position: center; }
.board.co-board .b-paging li.first.disable a { background-image: url(../img/board/ico-btn-first-page-disable.png); }
.board.co-board .b-paging li.prev.disable a { background-image: url(../img/board/ico-btn-prev-page-disable.png); }
.board.co-board .b-paging li.next.disable a { background-image: url(../img/board/ico-btn-next-page-disable.png); }
.board.co-board .b-paging li.last.disable a { background-image: url(../img/board/ico-btn-last-page-disable.png); }
.board.co-board .b-paging li.pager.disable a::before,
.board.co-board .b-paging li.first.disable a::after,
.board.co-board .b-paging li.last.disable a::after { display: none; }

.board.co-board .b-btn-wrap { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 30px 0 0; }
.board.co-board .b-btn-wrap .b-btn {
	padding: 14px 30px; min-width: 100px; border: 0; border-radius: 27px; background: var(--faq-navy);
	font-size: 16px; font-weight: 700; color: #fff; line-height: 22px; cursor: pointer; box-sizing: border-box;
}
.board.co-board .b-btn-wrap .b-btn.delete { background: #555; }

@media screen and (max-width: 768px) {
	.board.co-board .bn-search form { display: block; }
	.board.co-board .bn-search .b-total-wrap { padding: 0 0 10px; }
	.board.co-board .bn-search .b-search-wrap { gap: 5px; }
	.board.co-board .bn-search .b-sel-box { width: 100%; }
	.board.co-board .bn-search .b-select { width: 100%; min-width: 0; }
	.board.co-board .bn-search .b-search-box { width: 100%; }
	.board.co-board .bn-search .b-input { min-width: 0; width: calc(100% - 62px); }
	.board.co-board .bn-faq-list .b-faq-question { gap: 10px; padding: 15px 40px 15px 0; min-height: 76px; }
	.board.co-board .bn-faq-list .b-q-marker { flex-basis: 40px; width: 40px; height: 40px; font-size: 20px; }
	.board.co-board .bn-faq-list .b-q-title-box { display: block; }
	.board.co-board .bn-faq-list .b-q-cate { display: table; margin: 0 0 3px; padding: 5px 10px; min-width: 0; font-size: 12px; }
	.board.co-board .bn-faq-list .b-q-con { font-size: 16px; line-height: 1.4; }
	.board.co-board .bn-faq-list .b-faq-answer { padding: 20px; }
	.board.co-board .bn-faq-list .b-faq-answer-inner { gap: 10px; }
	.board.co-board .bn-faq-list .b-a-con { width: calc(100% - 42px); font-size: 14px; line-height: 1.6; }
	.board.co-board .bn-faq-list .b-btn-modify { margin-left: 42px; }
	.board.co-board .b-paging .b-paging-wrap > ul { gap: 2px; padding-top: 30px; }
	.board.co-board .b-paging li a { min-width: 32px; height: 32px; font-size: 14px; }
}

@media screen and (max-width: 480px) {
	.board.co-board .bn-search .b-sel-btn { flex: 0 0 48px; width: 48px; height: 48px; }
	.board.co-board .bn-search .b-select, .board.co-board .bn-search .b-input { height: 48px; }
	.board.co-board .b-paging li.first, .board.co-board .b-paging li.last { display: none; }
	.board.co-board .b-btn-wrap .b-btn { padding: 12px 18px; min-width: 84px; font-size: 14px; }
}