@charset "utf-8";
/* *******************************************************
 * filename : faq.css
 * description : FAQ형 게시판 관련 CSS
 * date : 2019-09-30
******************************************************** */

/* ******************   갤러리 게시판 :: FAQ 기본형 01 ********************** */
.qna-list-wrap { border-top: 1px solid #589446; }

.faq-list-con{border-top:1px solid #000; margin-bottom:30px; }
.faq-list-con .faq-item{border-bottom:1px solid #d7d7d7;}
.faq-list-con .faq-item dt{position:relative; padding:15px 30px 15px 55px; cursor:pointer; }
.faq-list-con .faq-item dt .faq-title{display:block; color:#343434; font-size:16px; font-weight:400; letter-spacing:-0.5px; line-height:24px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:top;}
.faq-list-con .faq-item dt .faq-subject::before { content: "Q"; position: absolute; top: 0px; left: 0px; }
.faq-list-con .faq-item dt .arrow{position:absolute; top:16px; right:15px; width:13px; height:9px; }
.faq-list-con .faq-item dt i{color:#666; font-size:26px;}
.faq-list-con .faq-item.open dt .arrow i{margin-top:-2px; transform:rotate(-180deg);}
.faq-list-con .faq-item.open dt .faq-title{white-space:normal; text-overflow:unset;}
.faq-list-con .faq-item dd{display:none; position:relative; border-top:1px solid #d7d7d7; padding:18px 30px 15px 55px; background:#f0f0f0; }
.faq-list-con .faq-item dd .answer-txt-con{line-height:24px; font-size:14px; color:#333; }
.faq-list-con .faq-item dt .question-icon,
.faq-list-con .faq-item dd .answer-icon{
    position:absolute; top:11px; left:10px; 
	width:30px; height:30px; line-height:30px; 
	text-align:center; 
	color:#fff; 
	font-size:13px; 
	font-weight:400;
	border:1px solid #222;
    -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}
.faq-list-con .faq-item dt .question-icon{background-color:#222}
.faq-list-con .faq-item dd .answer-icon{background-color:transparent; color:#222; }

/* FAQ :: 카테고리 */
.faq-list-con.faq-category-list-con dl dt .faq-category{display:inline-block; width:110px; color:#aaa; margin-right:5px; font-size:13px; line-height:24px; vertical-align:top; }
.faq-list-con.faq-category-list-con dl dt .faq-title{display:inline-block; width:calc(95% - 120px);}

@media all and ( max-width:800px ){
	/*  FAQ 게시판 */
	.faq-list-con .faq-item dt{padding-left:45px;}
	.faq-list-con .faq-item dt .faq-title{font-size:14px; line-height:18px; }
	.faq-list-con .faq-item dt .arrow{top:12px;}
	.faq-list-con .faq-item dd{padding:15px;}
	.faq-list-con .faq-item dt .question-icon,.faq-list-con .faq-item dd .answer-icon{top:14px; left:15px; width:20px; height:20px; line-height:20px; font-size:11px;}
	.faq-list-con .faq-item dd .answer-icon{display:block; position:static; margin-bottom:10px;}
	/* FAQ :: 카테고리 */
	.faq-list-con.faq-category-list-con dl dt{padding-top:40px;}
	.faq-list-con.faq-category-list-con dl dt .faq-category{position:absolute; top:13px; left:45px; right:30px; width:auto; margin-right:0; line-height:22px; }
	.faq-list-con.faq-category-list-con dl dt .faq-title{display:block; width:100%; }
	.faq-list-con.faq-category-list-con dl dt .arrow{top:23px;}
}

/* ******************   갤러리 게시판 :: FAQ 기본형 02 ********************** */
.faq-list-con2 .faq-item{overflow:hidden; border-bottom: 1px solid #e3e3e3; }
.faq-list-con2 .faq-item dt{position:relative; cursor:pointer; padding:24px 30px; }
.faq-list-con2 .faq-item dt .faq-title{display:block; color:#111b35; font-size:20px; font-weight:500; letter-spacing:-0.25px; line-height:24px; vertical-align:top; line-height:1.3; text-align: left; }
.faq-list-con2 .faq-item dt .faq-subject::before { content: "Q"; position: absolute; top: 26px; left: 0px; color: #111b35; font-size: 20px; }
.faq-list-con2 .faq-item dt .arrow{position:absolute; top:50%; right:2.2%; transform:translateY(-50%) rotate(0); transition:all 0.3s;  width:16px; height:16px; background:url("../../images/icon/qna_icon_close.png") no-repeat right center}
.faq-list-con2 .faq-item dt .arrow em{display:inline-block; width:3px; height:16px; background-color:#c8c8c8; position:relative; border-radius:10px}
.faq-list-con2 .faq-item dt .arrow em:first-child{transform:rotate(90deg); left:3px}
.faq-list-con2 .faq-item dt i{color:#666; font-size:26px;}
.faq-list-con2 .faq-item dd{display:none; position:relative; padding: 0px 40px 20px 55px; font-weight:400; font-size:18px; letter-spacing:-0.25px; color:#545454; line-height:1.66}
.faq-list-con2 .faq-item dd .answer-txt-con{line-height:1.875; font-size:16px; color:#777; letter-spacing:-0.75px; text-align: left; }
.faq-list-con2 .faq-item dd .answer-txt-con::before { content: "A"; position: absolute; top: 0px; left: 30px; color: #545454; font-size: 18px; }
.faq-list-con2 .faq-item dd .answer-con{line-height:1.875; font-size:18px; color:#545454; text-align: left; }
.faq-list-con2 .faq-item dd .answer-con::before { content: "A"; position: absolute; top: 0px; left: 30px; color: #545454; font-size: 18px; }
.faq-list-con2 .faq-item dt .question-icon,
.faq-list-con2 .faq-item dd .answer-icon{
    position:absolute; 
	top:16px; left:20px; 
	width:30px; height:30px; line-height:30px; 
	text-align:center; 
	color:#fff; 
	font-size:18px; 
	font-weight:600;
    -webkit-border-radius:50%;-moz-border-radius:50%;-o-border-radius:50%;border-radius:50%;
}

/* FAQ2 :: Open */
.faq-list-con2 .faq-item.open{background-color:#f8faff; border-radius: 0px}
.faq-list-con2 .faq-item.open dt{}
.faq-list-con2 .faq-item.open dt .faq-title{}
.faq-list-con2 .faq-item.open dt .arrow{transform:translateY(-50%) rotate(45deg); background:url("../../images/icon/qna_icon_open.png") no-repeat right center}
.faq-list-con2 .faq-item.open dt .arrow em{background-color:#2e79eb}

@media all and ( max-width:800px ){
	/*  FAQ2 게시판 */
	.faq-list-con2.faq-category-list-con dl dt{padding:25px 35px 25px 25px}
	.faq-list-con2 .faq-item dt .faq-title{font-size:15px}
	.faq-list-con2 .faq-item dd{ padding: 0px 20px 20px 55px;  font-size:14px}
	.faq-list-con2 .faq-item dt .arrow{right:25px}
	.faq-list-con2 .faq-item dt .arrow em{width:2px; height:14px}
	.faq-list-con2 .faq-item dt .arrow em:first-child{left:2px}
	.faq-list-con2 .faq-item dd .answer-con p { font-size: 14px; }

}