@charset "utf-8";


/* 공통 */
.wrapper {width: 100%;max-width:1200px;margin:0 auto;}

/* faq */
.faq_wrap .title {margin-top:100px}
.faq_wrap .title h3 {font-size:30px;font-weight:700;letter-spacing:-1px;padding-left:5px}

.faq_list {margin-top:60px}
.faq_list ul {width:100%;display:flex;flex-wrap:wrap;border-left:solid 1px #dddddd;border-top:solid 1px #dddddd}
.faq_list ul li {width:20%;height:50px;border-right:solid 1px #dddddd;border-bottom:solid 1px #dddddd;font-size:15px}
.faq_list ul li button {width:100%;height:100%;background:#f7f7f7;color:#999999;position:relative}
.faq_list ul li button.on {background:#ffffff;color:#000000}
.faq_list ul li button.on:after {content:'';display:block;width:calc(100% + 2px);height:calc(100% + 2px);border:solid 1px #000000;position:absolute;top:-1px;left:-1px;z-index:5}

.faq {padding-top: 30px; padding-bottom: 50px;display:none;}
.faq ul {border-top:solid 1px #dddddd}
.faq ul li {width:100%;border-bottom:solid 1px #dddddd;line-height:1.8}
.faq ul li > div p {padding:0 80px 0 100px;font-size: 20px;font-weight: bold;}
.faq ul li > div:before {content:'A.';display:block;font-size:25px;position:absolute;left:42px;top:15px}
.faq ul li .question {display:flex;align-items:center;font-size:17px;font-weight:bold;padding:24px 0;cursor:pointer;position:relative}
.faq ul li .question:before {content:'Q.'}
.faq ul li .question:after {content:'';display:block;position:absolute;right:40px;top:26px;width:24px;height:24px;background:url('./img/arrow_btm.svg') no-repeat;background-size:cover}
.faq ul li .question.on:after {transform:rotate(180deg)}
.faq ul li .question:hover {background:#f7f7f7}
.faq ul li .answer {display:none;font-size:14px;padding:24px 0;border-top:solid 1px #eeeeee;background:#f7f7f7;position:relative}

@media screen and (max-width:900px){
.faq ul li > div p{font-size: 16px;}
.faq ul li > div p{padding: 0 50px 0 50px;}
.faq ul li > div:before{left: 20px;}
.faq ul li .question:after{right: 20px;}
}