@charset "utf-8";

#mkFaq{padding-top:196px}
#mkFaq .inner{display:flex;flex-direction:column;align-items:center}
#mkFaq h2{padding-bottom:90px;font-size:50px;font-weight:700;line-height:100%;color:#111}

#mkFaq .faq-list{max-width:1160px;width:100%}
#mkFaq .faq-list ul{display:flex;flex-direction:column;gap:14px}
#mkFaq .faq-list ul li{max-width:1160px;padding:33px 45px;background-color:#f5f5f5;border-radius:13px;cursor:pointer}
#mkFaq .faq-list .question{display:flex;justify-content:space-between;align-items:center}
#mkFaq .faq-list .question h3{position:relative;padding-left:45px;font-size:20px;font-weight:700;color:#111;word-break:keep-all;transition:color 0.2s}
#mkFaq .faq-list .question h3::before{position:absolute;content:'Q.';top:50%;left:0;transform:translateY(-50%);font-family:var(--outfit);font-size:20px;line-height:100%;color:var(--primary);transition:color 0.2s}
#mkFaq .faq-list .question svg{flex-shrink:0;stroke:#aaa;transition:all 0.2s}
#mkFaq .faq-list p.answer{display:none;padding:23px 45px 0;font-size:16px;color:rgba(255, 255, 255, 0.8);line-height:1.6;white-space:pre-line;word-break:keep-all}

/* 열림 상태 */
#mkFaq .faq-list ul li.open{background-color:var(--primary)}
#mkFaq .faq-list ul li.open .question h3{color:#fff}
#mkFaq .faq-list ul li.open .question h3::before{color:#fff}
#mkFaq .faq-list ul li.open .question svg{stroke:#fff;transform:rotate(180deg)}

/* 반응형 [s] */
@media (max-width:1600px){
#mkFaq{padding-top:130px}
#mkFaq h2{padding-bottom:60px}
}

@media (max-width:1200px){
#mkFaq{padding:130px 20px 0}
#mkFaq .faq-list ul li{padding:30px 35px}
#mkFaq .faq-list .question h3{padding-left:40px;font-size:18px}
#mkFaq .faq-list p.answer{padding:15px 40px 0}
}

@media (max-width:1024px){
#mkFaq{padding:100px 20px 0}
}

@media (max-width:768px){
#mkFaq{padding:80px 20px 0}
#mkFaq h2{padding-bottom:40px}
#mkFaq .faq-list ul li{padding:25px}
#mkFaq .faq-list .question{gap:10px}
#mkFaq .faq-list .question h3{padding-left:36px;font-size:16px}
#mkFaq .faq-list .question h3::before{font-size:18px}
#mkFaq .faq-list p.answer{padding:15px 36px 0;font-size:15px}
}

@media (max-width:480px){
#mkFaq{padding:60px 20px 0}
#mkFaq h2{padding-bottom:30px}
#mkFaq .faq-list ul li{padding:22px;border-radius:10px}
#mkFaq .faq-list .question h3{font-size:15px}
#mkFaq .faq-list .question h3::before{font-size:16px}
#mkFaq .faq-list p.answer{font-size:14px}
}
/* 반응형 [e] */