@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 .swiper-slide{ width:auto; margin-right:30px; }
.faq_tab .swiper-slide:last-child{ margin-right:0px; }
.faq_tab .swiper-slide a{ display:block; padding-top:20px; position:relative; font-size:20px; line-height:120%; color:#999;
	transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; 
}
.faq_tab .swiper-slide.on a,
.faq_tab .swiper-slide a:hover{ color:#333; font-weight:700;}
.faq_tab .swiper-slide a:after{ content:""; position:absolute; top:0; left:50%; width:8px; height:8px; border-radius:100%; background:#fff;
	transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%);
	transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; 
}
.faq_tab .swiper-slide.on a:after,
.faq_tab .swiper-slide a:hover:after{ background:#d71532; }

@media all and ( max-width:1024px){
	.faq_tab .swiper-slide{ margin-right:20px; }
	.faq_tab .swiper-slide a{ font-size:18px; }
}
@media all and ( max-width:768px){
	.faq_tab .swiper-slide{ margin-right:15px; }
	.faq_tab .swiper-slide a{ font-size:16px; padding-top:15px; }
	.faq_tab .swiper-slide a:after{ width:6px; height:6px; }
}


/****상단 검색*************************************************************************************************************************/

.faq_search{ display:flex; flex-wrap:wrap; align-items:end; margin-bottom:30px;  }
.faq_search .faq_total{ font-size:16px; line-height:160%; font-weight:500; }
.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;  }
.faq_search .faq_search_box button{ position:absolute; top:0; right:0; width:55px; height:55px; background-color:#333; font-size:0px; background-image:url('/thema/Basic/img/board_search_ico.png'); background-position:center; background-repeat:no-repeat;   }

@media all and (max-width:1024px){
	.faq_search{ margin-bottom:20px; }
	.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{ width:100%; text-align:center; margin-bottom:10px; font-size:13px;    }
	.faq_search .faq_total b{ font-size:18px; }
	.faq_search .faq_search_box{ margin:0 auto; }
	.faq_search .faq_search_box input{ font-size:13px;  }
}

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

.qna_list > li{ border:1px solid #ddd; border-radius:10px; padding:0 30px; margin-bottom:20px;  transition:all 0.3s; -webkit-transition:all 0.3s; -moz-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:80px; font-size:35px; font-weight:500; color:#333; line-height:100%; }
.qna_list .fa_q{ color:#d71532;}
.qna_list .fq_ca{ width:150px; font-size:18px; line-height:160%; color:#333; font-weight:700; padding:5px 10px;}
.qna_list .fa_subject{ position:relative; width:calc(100% - 230px); font-size:18px; line-height:160%; color:#333; font-weight:700; 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); -webkit-transform:rotate(90deg); -moz-transform:rotate(90deg); transition:all 0.3s; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; }
.qna_list > li.on .fa_subject:before{transform:rotate(0deg); -webkit-transform:rotate(0deg); -moz-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% - 80px); padding:5px 10px; font-size:16px; line-height:160%; color:#333;   }

@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:40px; font-size:28px;}
	.qna_list .fq_ca{ width:110px; font-size:16px; }
	.qna_list .fa_subject{ width:calc(100% - 150px); font-size:16px; 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% - 40px); 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%; font-size:14px; }
	.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%; }
}

/****리스트 내용*************************************************************************************************************************/
.qna_list .fa_content img{ max-width:100%;}

/*이미지 박스*/
.qna_list .fa_content .img_box{ display:flex; flex-wrap:wrap;}

.qna_list .fa_content .img_box.grid3 img{ width:calc(33.33% - 6.666666666666667px); margin-right:10px; margin-top:10px;}
.qna_list .fa_content .img_box.grid3 img:nth-child(3n+3){ margin-right:0px;}
.qna_list .fa_content .img_box.grid3 img:nth-child(-n+3){ margin-top:0px;}

.qna_list .fa_content .img_box.grid4 img{ width:calc(25% - 7.5px); margin-right:10px; margin-top:10px;}
.qna_list .fa_content .img_box.grid4 img:nth-child(4n+4){ margin-right:0px;}
.qna_list .fa_content .img_box.grid4 img:nth-child(-n+4){ margin-top:0px;}

/*큐알*/
.qna_list .fa_content .qr_box{ display:flex; flex-wrap:wrap;}
.qna_list .fa_content .qr_box .left_box{ width:94px;}
.qna_list .fa_content .qr_box .left_box img{ border:1px solid #ddd;}
.qna_list .fa_content .qr_box .right_box{ width:calc(100% - 94px); padding-left:30px;}
.qna_list .fa_content .qr_box .right_box strong{ display:block; font-size:18px; line-height:140%; margin-bottom:10px;}

/*테이블*/
.fa_table{ overflow-x:auto;}
.fa_table table{min-width:600px; width:100%;}
.fa_table table thead tr:first-child th{ border-top:3px solid #333;}
.fa_table table thead th,
.fa_table table tbody td{ border-bottom:1px solid #ddd; padding:10px; text-align:center; line-height:160%; border-right:1px solid #ddd; font-size:16px;  }
.fa_table table thead tr th:first-child,
.fa_table table tbody tr td:first-child{ border-left:1px solid #ddd; }
.fa_table table thead th.point_red{ color:#fff; background:#d71532; border-top-color:#d71532;}
.fa_table table tbody td.point_red{ color:#fff; background:#d71532;}


@media all and (max-width:1024px){
	/*큐알*/
	.qna_list .fa_content .qr_box .left_box{ width:60px;}
	.qna_list .fa_content .qr_box .right_box{ width:100%; padding-left:0px; margin-top:10px; }
	.qna_list .fa_content .qr_box .right_box strong{  font-size:16px; }

	/*테이블*/
	.fa_table table thead th,
	.fa_table table tbody td{ font-size:14px; padding:5px; }
}
@media all and (max-width:768px){
	/*큐알*/
	.qna_list .fa_content .qr_box .right_box strong{  font-size:14px; }

	/*이미지 박스*/
	.qna_list .fa_content .img_box.grid3 img{ width:calc(50% - 5px);}
	.qna_list .fa_content .img_box.grid3 img:nth-child(3n+3){ margin-right:10px;}
	.qna_list .fa_content .img_box.grid3 img:nth-child(-n+3){ margin-top:10px;}
	.qna_list .fa_content .img_box.grid3 img:nth-child(2n+2){ margin-right:0px;}
	.qna_list .fa_content .img_box.grid3 img:nth-child(-n+2){ margin-top:0px;}

	.qna_list .fa_content .img_box.grid4 img{ width:calc(50% - 5px);}
	.qna_list .fa_content .img_box.grid4 img:nth-child(4n+4){ margin-right:10px;}
	.qna_list .fa_content .img_box.grid4 img:nth-child(-n+4){ margin-top:10px;}
	.qna_list .fa_content .img_box.grid4 img:nth-child(2n+2){ margin-right:0px;}
	.qna_list .fa_content .img_box.grid4 img:nth-child(-n+2){ margin-top:0px;}
}