/* 자주하는 질문 */
.cateWrap{position:relative;z-index:10;}
.cateWrap .currentCate{display:none;}
.faq-category{display:block;border:solid #ccc;border-width:1px 0;font-size:0;text-align:center;}
.faq-category li{position:relative;display:inline-block;list-style:none}
.faq-category li a{position:relative;display:block;height:44px;padding:0 20px;font-size:15px;color:#666;line-height:44px;}
.faq-category li a:before{content:'';width:100%;height:2px;transform:scale(0,  1);transition: all 0.3s ease;}
.faq-category li a:hover,
.faq-category li.on a{font-weight:bold;color:#e6221f;}
.faq-category li a:hover::before,
.faq-category li.on a::before{position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:#e6221f;transform:scale(1,  1);}

.toggleList.faqList{margin:60px 0 30px;border-bottom:0;}
.toggleList.faqList > ul{border-bottom:solid 1px #bbb}
.faqList > ul > li .titArea{padding:27px 70px 24px 100px;}
.faqList > ul > li .titArea .tit{display:block;}
.faqList > ul > li .titArea .question{display:block;position:absolute;top:21px;left:0;z-index:3;width:100px;text-align:center;}
.faqList > ul > li .titArea .question:after{content:'Q';display:inline-block;font-size:30px;font-weight:bold;color:#222;line-height:1;}
.faqList > ul > li .contArea .answer{display:block;position:absolute;top:21px;left:0;width:100px;text-align:center;}
.faqList > ul > li .contArea .answer:after{content:'A';display:inline-block;font-size:30px;font-weight:bold;color:#de4f41;line-height:1;}

.faqList > ul > li.on .titArea{background:#f7f7f7;}
.faqList > ul > li.on .titArea .tit{font-weight:bold;color:#222;}
.faqList > ul > li.on .titArea .toggleBtn:after{transform:rotate(-180deg);}
.faqList > ul > li.on .contArea{padding:25px 100px 25px;border-top:0;}

/* 넓이가 767px 이하일 때*/
@media (max-width: 767px) {
.faqList > ul > li .titArea{padding:27px 45px 24px 80px;}
.faqList > ul > li.on .contArea{padding:0 45px 25px 80px;}
.faqList > ul > li .titArea .question,
.faqList > ul > li.on .contArea .answer{width:80px;}
}

/* 넓이가 577px 이하일 때*/
@media (max-width: 577px) {
.cateWrap .currentCate{display:block;position:relative;width:100%;height:50px;margin:0 0 15px;border:0;background:#273350;font-size:15px;color:#fff;text-align:left;}
.cateWrap .currentCate:after{content:'';position:absolute;top:50%;right:15px;width:9px;height:9px;margin-top:-8px;border:solid #fff;border-width:2px 2px 0 0;transform:rotate(135deg);transition:all .2s;}
.cateWrap .currentCate.on:after{margin-top:-2px;transform:rotate(-45deg);}
.cateWrap .currentCate span{display:block;margin:0 50px 0 15px;}
.faq-category{display:none;position:absolute;top:50px;left:0;width:100%;margin:0;border-bottom:none;}
.faq-category > li{display:block;width:100%;margin:-1px 0 0;}
.faq-category > li > a{height:50px;border:solid 1px #ccc;background:#fff;font-size:16px;transition:all .3s ease;text-align:left;line-height:50px;}
.faq-category > li > a:before{height:50px;}
.faq-category > li > a:hover,
.faq-category > li > a:focus,
.faq-category > li.on a{font-weight:400;border:solid 1px #273350;background:#273350;color:#fff;}
.faq-category > li.on a::before{display:none;}
.faq-category li a:hover::before,
.faq-category li.on a::before{background:none;}

.faqList > ul > li .titArea .question, .faqList > ul > li.on .contArea .answer{width:50px;}
.faqList > ul > li .titArea, .faqList > ul > li.on .contArea{padding-left:60px;}
}