@charset "utf-8";

/** 공통 **/
#kboard-layout.kboard-accordion {
  
}

#kboard-layout .kboard-faq__wrap {
  margin-top: var(--kboard-el-gap);
}
#kboard-layout .kboard-faq,
#kboard-layout .kboard-faq__item {
  margin: 0;
  padding: 0;
  list-style: none;
}
#kboard-layout .kboard-faq__item{
  background: #F2F2F2;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}
#kboard-layout .kboard-faq__item:last-child{
  margin-bottom: 0 !important;
}
#kboard-layout .kboard-faq__item .kboard-title,
#kboard-layout .kboard-faq__item .faq-content{
  display: flex; gap: clamp(20px, 3vw, 45px);
}
#kboard-layout .kboard-faq__item .faq-content{
  align-items: baseline;
}

#kboard-layout .kboard-faq__item .kboard-title{
  border-radius: 10px;
  background: #fff;
  font-size: clamp(var(--kboard-font-size-r), 1.7vw, 20px);
  color: #222;
  padding: 25px 8% 25px 25px;
  border: 1px solid #DBDBDB;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
}
#kboard-layout .kboard-faq__item.active .kboard-title{
  background: #D9252D;
  border: 1px solid #D9252D;
  color: var(--kboard-color-white);
}
#kboard-layout .kboard-faq__item .faq-content{
  font-size: var(--kboard-font-size-r);
  color: #222;
  padding: 48px 37px 40px;
}
#kboard-layout .kboard-faq__item .kboard-title::before,
#kboard-layout .kboard-faq__item .faq-content::before{
  content: "Q"; display: block;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  color: #D9252D;
}
#kboard-layout .kboard-faq__item.active .kboard-title::before{
  color: #fff;
}
#kboard-layout .kboard-faq__item .faq-content::before{
  content: "A"; color: #222;
}
#kboard-layout .kboard-faq__item .kboard-title::after{
  content: ""; display: block;
  width: 40px; height: 40px;
  border: 1px solid #DBDBDB;
  border-radius: 50px;
  position: absolute;
  right: 40px; top: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='group_33867' data-name='group 33867' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle id='circle_121' data-name='circle 121' cx='20' cy='20' r='20' transform='translate(40 40) rotate(180)' fill='none'/%3E%3Cg id='group_441' data-name='group 441' transform='translate(14 24) rotate(-90)'%3E%3Cline id='line_676' data-name='line 676' x1='6' y2='6' fill='none' stroke='%23dbdbdb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3Cline id='line_677' data-name='line 677' x1='6' y1='6' transform='translate(0 6)' fill='none' stroke='%23dbdbdb' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/cover;
}
#kboard-layout .kboard-faq__item.active .kboard-title::after{
  border: 1px solid #fff;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='group_33866' data-name='group 33866' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle id='circle_121' data-name='circle 121' cx='20' cy='20' r='20' transform='translate(40 40) rotate(180)' fill='none'/%3E%3Cg id='group_441' data-name='group 441' transform='translate(14 24) rotate(-90)'%3E%3Cline id='line_676' data-name='line 676' x1='6' y2='6' fill='none' stroke='%23d9252d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3Cline id='line_677' data-name='line 677' x1='6' y1='6' transform='translate(0 6)' fill='none' stroke='%23d9252d' stroke-linecap='round' stroke-linejoin='round' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/cover;
}


/* 에디터 버튼 */
#kboard-layout .kboard-faq__item .editBtn{
  display: inline-block; padding: 5px; margin: 5px;
  border: 1px solid var(--kboard-color-point);
}

/* 문서 */


@media (max-width: 980px) {
  /* 공통 */
  #kboard-layout .kboard-faq__item .kboard-title,
  #kboard-layout .kboard-faq__item .faq-content{
    padding: 20px;
  }
  #kboard-layout .kboard-faq__item .kboard-title{
    padding-right: 10%;
  }
  #kboard-layout .kboard-faq__item .kboard-title::after{
    width: 30px; height: 30px;
    right: 20px; top: 16px;
  }
}
@media (max-width: 620px) {
  #kboard-layout .kboard-faq__item .kboard-title::after{
    width: 20px; height: 20px;
    top: 22px;
  }
}