@charset "utf-8";

.faq-category .div-tab { margin-bottom:15px; }
.faq-category .dropdown { margin-bottom:15px; }
.faq-category .active a, .list-category .selected a { color:crimson; font-weight:bold !important; }
.faq-box { border:1px solid #ddd; background:#fafafa; padding:20px 15px 3px; margin-bottom:15px; }
.faq-img img, .faq-html img, .faq-content img { width:auto; max-width:100%; border:0; }
.faq-content .panel-body p { padding:0; margin:0; }
.faq-none { padding:50px 0; }

/****상단 탭*************************************************************************************************************************/

.faq_tab{display:flex;flex-wrap:wrap;}
.faq_tab li{margin:5px 8px 5px 0;}
.faq_tab li a{display:block;padding:15px 25px;font-size:16px;border:1px solid #333;border-radius:25px;transition:all 0.3s;}
.faq_tab li a.on,
.faq_tab li a:focus,
.faq_tab li a:hover{color:#fff;border-color:#3366ff;background:#3366ff;}

@media all and ( max-width:1024px){
	.faq_tab li{margin:3px 5px 3px 0;}
	.faq_tab li a{padding:10px 15px 5px;font-size:14px;}
}
@media all and ( max-width:768px){
	.faq_tab li a{padding:8px 10px 5px;font-size:13px;}
}

/****faq 상단*************************************************************************************************************************/

.faq_search{ display:flex; flex-wrap:wrap; align-items:end; margin-bottom:40px; }
.faq_search .faq_total{ font-size:16px; font-weight:300; }
.faq_search .faq_total b{ color:#3366ff; font-weight:300; margin-left:10px; }
.faq_search .faq_search_box{ position:relative; margin-left:auto; max-width:350px; width:100%; }
.faq_search .faq_search_box input{ width:100%; height:55px; border:1px solid #bbb; padding:0 75px 0 25px; font-size:16px; box-shadow:none; }
.faq_search .faq_search_box button{ position:absolute; top:0; right:0; width:55px; height:55px; background-color:#3366ff; font-size:0px; background-image:url('/thema/Basic/img/board_search.png'); background-position:center; background-repeat:no-repeat; }

@media all and (max-width:1024px){
	.faq_search{ margin-bottom:30px; }
	.faq_search .faq_total{ font-size:14px; }
	.faq_search .faq_search_box{ max-width:300px; }
	.faq_search .faq_search_box input{ height:45px; font-size:14px; padding:0 65px 0 15px; }
	.faq_search .faq_search_box button{ width:45px; height:45px; background-size:18px; }
}
@media all and (max-width:768px){
	.faq_search{ margin-bottom:20px; }
	.faq_search .faq_total{ display:none; }
	.faq_search .faq_search_box input{ font-size:13px; }
}

/****리스트*************************************************************************************************************************/

.qna_list > li{ border:1px solid #ddd; border-radius:10px; padding:0 40px; margin-bottom:20px; transition:all 0.3s; }
.qna_list > li:last-child{ margin-bottom:0px;}
.qna_list > li.on{ border-color:#333; }
.qna_list .q_box{ display:flex; flex-wrap:wrap; padding:20px 0; text-align:left; width:100%; }
.qna_list .fa_q,
.qna_list .fa_a{ width:70px; font-size:35px; color:#333; font-weight:300; }
.qna_list .fa_q{ color:#3366ff;}
.qna_list .fq_ca{ width:150px; font-size:16px; line-height:1.8; color:#3366ff; padding:5px 10px;}
.qna_list .fa_subject{ position:relative; width:calc(100% - 220px); font-size:16px; line-height:1.8; color:#333; padding:5px 50px 5px 10px;}
.qna_list .fa_subject:after,
.qna_list .fa_subject:before{ content:""; position:absolute; top:18px; right:0; width:30px; height:1px; background:#333; }
.qna_list .fa_subject:before{ transform:rotate(90deg); transition:all 0.3s; }
.qna_list > li.on .fa_subject:before{transform:rotate(0deg); }
.qna_list .a_box{ display:none; padding:20px 0; border-top:1px solid #ddd; }
.qna_list .fa_a{ float:left;}
.qna_list .fa_content{ float:left; width:calc(100% - 70px); padding:5px 10px; font-size:16px; line-height:1.8; color:#333; }
.qna_list .fa_content img{ max-width:100%;}

@media all and (max-width:1024px){
	.qna_list > li{ padding:0 20px; margin-bottom:15px; }
	.qna_list .q_box{ padding:15px 0; }
	.qna_list .fa_q,
	.qna_list .fa_a{ width:30px; font-size:28px;}
	.qna_list .fq_ca{ width:115px; font-size:14px; }
	.qna_list .fa_subject{ width:calc(100% - 145px); font-size:14px; padding:5px 30px 5px 10px;}
	.qna_list .fa_subject:after,
	.qna_list .fa_subject:before{ width:20px; top:15px;}
	.qna_list .a_box{ padding:15px 0;}
	.qna_list .fa_content{ width:calc(100% - 30px); font-size:14px; }
}
@media all and (max-width:768px){
	.qna_list > li{ padding:0 15px;}
	.qna_list .fa_q,
	.qna_list .fa_a{ display:none;}
	.qna_list .fq_ca{ display:none; }
	.qna_list .fa_subject{ width:100%; }
	.qna_list .fa_subject:after,
	.qna_list .fa_subject:before{ width:15px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%): -moz-transform:translateY(-50%):}
	.qna_list .fa_subject:before{ transform:translateY(-50%) rotate(90deg); -webkit-transform:translateY(-50%) rotate(90deg); -moz-transform:translateY(-50%) rotate(90deg); }
	.qna_list > li.on .fa_subject:before{transform:translateY(-0%) rotate(0deg); -webkit-transform:translateY(-0%) rotate(0deg); -moz-transform:translateY(-0%) rotate(0deg); }
	.qna_list .fa_content{ width:100%; }
}