@charset "utf-8";

#faq{background-color: var(--gray); padding: 25px 0 60px 0;}
#faq .wrap{display: flex; gap: 1rem;}
.faq_wrap{width: 80%;}
#bo_btn_top {display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;}
button{all: unset;}
button:hover{cursor: pointer;}

.faq_list{}
.faq_tit{position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1em; padding-left: 60px; border-bottom: 1px solid #e9e9e9;}
.faq_tit > a > p{font-weight: 500; color: #111;}
.faq_text{position: relative; display: none; padding: 1.5rem 1rem; padding-left: 60px; border-bottom: 1px solid #e9e9e9; background-color: #fbfbfb; line-height: 1.5;}
.faq_text::after{content: ''; display: block; clear: both}
.faq_text .data_box{float: left; width: calc(100% - 50px)}
.faq_text .closer_btn{float: right; width: 50px; text-align: right}
.faq_tit::before, .faq_text::before{position: absolute; left: 10px; display: flex; width: 30px; height: 30px; border-radius: 50%; color: #fff; clear: both; align-items: center; justify-content: center; font-weight: 700; line-height: 1.1;}
.faq_tit::before{top: 50%; transform: translateY(-50%); content:"Q"; background-color: var(--color_basic);}
.faq_text::before{top: 1.5rem; content:"A"; background-color: #ccc;}
.faq_text p.small{font-size: 0.9rem; color: #999;}
.tit_btn, .closer_btn{opacity: 0.4; transition-duration: 100ms;} 
.tit_btn:hover, .closer_btn:hover{opacity: 1;}

#bo_cate_on{color: var(--color_basic); font-weight: 600;}
.faq_menu{display: flex; margin: 10px 0; text-align: center;}
.faq_menu > li{position: relative; flex: 1;}
.faq_menu a{display:block; line-height: 1; padding: 1em 0; border:1px solid #e9e9e9; color: #999; font-weight: 500; background-color: #eee; border-bottom: none;}
.faq_menu .on a{z-index:2; color:var(--color_basic); background-color:#fff; font-weight:600;}
.faq_menu .on::before{position: absolute; display: block; top: 0; left: 0; right: 0; height: 4px; background-color: var(--color_basic); content:"";}
.faq_empty{text-align: center; line-height: 1.5; padding: 100px 0; color: #999;}
.faq_empty > a{text-decoration: underline;}