@charset "utf-8";

/* 게시판 공통 요소 */
@import url('/Web-home/fnct/bbs/bbs_common/css/board_common.css');

/* FAQ 타입 */
.faq-list > ul > li {padding: 0 3rem; margin-bottom: 1.5rem; border: 1px solid #373737;}
.faq-list .no-data {padding: 6rem 0; border-bottom: 1px solid #8b9099; text-align: center;}
.faq-list .question {display: flex; align-items: center; height: 8.2rem; padding: 1rem 0; background: url('../../bbs_common/images/btn-faq-open.png') no-repeat calc(100%) center; font-family: pb; font-size: 2rem; color: #000000;}
.faq-list .question.on {background: url('../../bbs_common/images/btn-faq-close.png') no-repeat calc(100%) center; color: #0a4da1;}
.faq-list .question::before {content: 'Q'; position: relative; top: 0rem; margin-right: 4rem; margin-left: 2rem; font-family: pbl; font-size: 4.5rem; color: #032e6e;}
.faq-list .question1 {overflow: hidden; display: -webkit-box; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; max-width: 80%;}
.faq-list .question1 .cate-name {display: inline-block; min-width: 19rem; padding-right: 2rem; font-family: psb; font-size: 1.8rem; color: #032e6e;}
.faq-list .answer {display: none; padding: 3rem 0; font-family: pm; font-size: 1.8rem; color: #666666;}
.faq-list .open .answer {display: flex !important; border-top: 1px solid #ced4da;}
.faq-list .answer .row {width: 100%; padding-right: 3rem;}
.faq-list .answer .row p,
.faq-list .answer .row span {color: #666 !important;font-size: 1.8rem !important;font-family: pr !important;}
.faq-list .answer .row p a::after {content: ''; position: relative; top: 0; display: inline-block; width: 1.2rem; height: 1.2rem; margin: 0 .5rem; background: url('../images/ic-con-link.png') no-repeat center top / 1.2rem auto;}
.faq-list .answer .row p a:hover::after {background: url('../images/ic-con-link.png') no-repeat center bottom / cover;}
.faq-list .answer .row p a span {position: relative; font-size: 1.8rem; color: #0782c1 !important;}
.faq-list .answer .row p a:hover span {color: #0064ef !important;}
.faq-list .answer .row p a span::after {content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: .1rem; background: #0064ef; transition: width .35s;}
.faq-list .answer .row p a:hover span::after {width: 100%;}
.faq-list .answer::before {content: 'A'; position: relative; top: -1rem; margin-right: 4rem; margin-left: 2rem; font-family: pbl; font-size: 4.5rem; color: #049edb;}
.faq-list .answer .more {display: inline-flex; align-items: center; height: 3rem; margin-top: 2rem; padding: 0 1rem; background: #fff; border: 1px solid #0d5dbe; border-radius: .5rem; }
.faq-list .answer .more span {font-size: 1.4rem !important;color: #0d5dbe !important;font-family: pm !important;}
.faq-list .answer .more:hover {background: #0d5dbe;}
.faq-list .answer .more:hover span {color: #fff !important;}
.faq-list .answer ._faqAtchmnfl {margin-top: .5rem;}
.faq-list .answer ._faqAtchmnfl a {display: inline-block; padding: 1rem 0 1rem 3.5rem; background: url('../../bbs_common/images/ic-file.png') no-repeat left center; font-family: pr; font-size: 1.8rem; color: #333333;}
.faq-list .answer ._faqAtchmnfl a span {position: relative;}
.faq-list .answer ._faqAtchmnfl a span::after {content: ''; position: absolute; left: 0; bottom: -.2rem; width: 0; height: 1px; background: #000; transition: width .35s;}
.faq-list .answer ._faqAtchmnfl a:hover span::after {width: 100%;}

.faq-list .attachment {margin-top: 2rem; padding: 1.5rem 2rem; background: #f1f6fa;}
.faq-list .attachment li {display: flex; align-items: center; justify-content: space-between;}
.faq-list .attachment a,
.faq-list .attachment .no-file {display: inline-block; padding: 1rem 0 1rem 3.5rem; background: url('../images/ic-file.png') no-repeat left center; font-family: pr; font-size: 1.5rem; color: #333333;}
.faq-list .attachment a.docView {display: inline-flex; justify-content: center; align-items: center; height: 3.3rem; padding: 0 1.5rem; background: #fff; border: 1px solid #cdcdcd; border-radius: .5rem; font-size: 1.4rem; color: #888888;}
.faq-list .attachment a.docView:hover {background-color: #eef7fd; border: .1rem solid #049edb; color: #049edb !important;}
.faq-list .attachment a.docView::before {content: ''; width: 1.8rem; height: 1.8rem; margin-right: 1rem; background: url('../images/ic-doc-view.png') no-repeat center;}
.faq-list .attachment a.docView:hover::before {filter: invert(53%) sepia(60%) saturate(834%) hue-rotate(156deg) brightness(89%) contrast(93%);}
.faq-list .attachment span {position: relative;}
.faq-list .attachment span::after {content: ''; position: absolute; left: 0; bottom: -.2rem; width: 0; height: 1px; background: #000; transition: width .35s;}
.faq-list .attachment a:hover span::after {width: 100%;}

@media screen and (max-width: 1170px) {
	.faq-list .question1 .cate-name {min-width: auto;}
}

@media screen and (max-width: 768px) {
	.faq-list > ul > li {padding: 0 2rem;}
	.faq-list .question {height: 7.2rem; font-size: 1.8rem;}
	.faq-list .question1 {max-width: 75%;}
	.faq-list .question::before {margin-right: 2rem; margin-left: 1rem;}
	.faq-list .answer {padding: 2rem 0; font-size: 1.6rem;}
	.faq-list .answer::before {margin-right: 2rem; margin-left: 1rem;}
	.faq-list .view .attachment {padding: 2rem 3rem;}
	.faq-list .answer .row {width: calc(100% - 5rem);}
	.faq-list .answer .row p,
	.faq-list .answer .row span {font-size: 1.6rem !important;} 
	.faq-list .answer .row p a span {font-size: 1.6rem;}
}

