@charset "utf-8";


.faqList{ width: 100%; }
.faqList li{ position: relative; margin-bottom: 20px; border: 2px solid #f8f8f8; border-radius: 20px; overflow: hidden; }
.faqList li.empty_list{ font-size: 18px; font-weight: 400; color: #aaa; letter-spacing: -1px; text-align: center; padding: 25px 30px; background-color: #f8f8f8; }
.faqList li .tit{ display: flex; align-items: center; justify-content: space-between; padding: 24px 30px; background-color: #f8f8f8; cursor: pointer; }
.faqList li .tit .left h3{ display: inline-block; font-size: 22px; font-weight: 700; color: #111; letter-spacing: -1px; transition: all 0.2s ease-in-out; }
.faqList li .tit .arrow{ position: relative; width: 10px; height: 10px; }
.faqList li .tit .arrow::before{ position: absolute; left: 0; top: 4px; width: 10px; height: 2px; background: #cfcfcf; content: ''; display: block; }
.faqList li .tit .arrow::after{ position: absolute; left: 0; top: 4px; width: 10px; height: 2px; background: #cfcfcf; content: ''; display: block; transform: rotate(-90deg); transition: all 0.3s ease-in-out;}
.faqList li .cont{ display: none; padding: 20px 30px; }
.faqList li .cont .wrap{ position: relative; font-size: 16px; font-weight: 400; color: #999999; letter-spacing: -0.5px; line-height: 32px; word-break: keep-all; }
.faqList li .cont .wrap img{ max-width: 100%; }
.faqList li .cont .wrap .bo_revise{ position: absolute; right: 0; bottom: 0; display: inline-block; color: #fff; background-color: #c5c5c5; padding: 0 15px; font-size: 13px; font-weight: 400; line-height: 32px; border: none; border-radius: 3px; }
.faqList li .cont p{ font-size: 16px; font-weight: 400; color: #999999; letter-spacing: -0.5px; line-height: 32px; word-break: keep-all; }
/* hover */
.faqList li .tit:hover .left h3,
.faqList li.on .tit .left h3{ color: #3bbc81; }
.faqList li.on .tit .arrow::after{ transform: rotate(0deg); background: #111; }



@media screen and (max-width: 1024px){ 

    /* LIST */
    .faqList li .tit{ padding: 18px 25px; }
    .faqList li .tit .left h3{ font-size: 20px; line-height: 30px; }
    .faqList li .cont .wrap,
    .faqList li .cont .wrap p{ font-size: 15px; line-height: 28px; }
}

@media screen and (max-width: 767px){ 

    /* LIST */
    .faqList li{ border-radius: 10px; margin-bottom: 10px; }
    .faqList li.empty_list{ font-size: 15px; letter-spacing: -0.5px; padding: 15px; }
    .faqList li .tit{ padding: 15px; }
    .faqList li .tit .left h3{ font-size: 16px; line-height: 24px; }
    .faqList li .cont{ padding: 15px }
    .faqList li .cont .wrap,
    .faqList li .cont .wrap p{ font-size: 14px; line-height: 23px; }
}