@charset "utf-8";

/* 내용관리 */
#ctt {/*margin:10px 0;*/padding:0px 0; /*border:1px solid #e9e9e9*/}
.ctt_admin {text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:0}
.ctt_img {text-align:center}

/*큐앤에이 - 아코디언 메뉴*/
.faq-container { max-width: 1200px; display: flex; flex-direction: column; margin: 0 auto; list-style: none;
border-top:2px solid #333; border-bottom:2px solid #333;}
.faq { position: relative; background-color: #ffffff; overflow: hidden; transition: 0.3s ease; padding: 30px 50px; border-bottom:1px solid #ddd;}
.faq.active { background-color:rgba(229,16,129,.05);}

.faq__question { padding:0 20px;}
.faq__title { font-size: 23px; font-weight:normal;}
.faq__title > span{ font-family: 'OAGothic-ExtraBold'; font-size:30px; color:rgba(229,16,129,.3); display:inline-block; margin-right:10px;}
.faq__answer {  max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out;}
.faq__text { padding: 30px 20px 10px 20px; color: #666;  font-size: 20px; font-weight:300;}
.faq.active .faq__answer { max-height: 130px; border-top: 1px solid #ddd;  transition: max-height 0.3s ease-in-out; margin-top:30px;}

.faq__btn { cursor: pointer; width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; position: absolute; top: 30px;
  right: 50px; border: 0; border-radius: 50%; font-size: 30px; font-weight:normal; color: #666; background-color:transparent;}
.faq__btn:focus { outline: 0;}
.faq__icon.close { display: none;}
.faq.active .faq__icon.close { color: #666; display: block;}
.faq.active .faq__icon.open { display: none;}

.ju_img{ text-align: center;}
@media screen and (max-width: 1279px) {
    .faq-container { max-width: 1000px;}
}
@media screen and (max-width: 1023px) {
    .faq-container { max-width: 90%;}
    .faq { padding: 30px 30px;}
    .faq__question { padding:0 0px;}
    .faq__title { font-size: 18px;}
    .faq__title > span{ font-size:25px;}
    .faq__text { padding: 20px 0px 0px 0px; font-size: 16px;}
    .faq.active .faq__answer { max-height: 100px; margin-top:30px;}
    .faq__btn { top: 20px; right: 30px;}
    .ju_img img{ width: 100%;}
}
@media screen and (max-width: 767px) {
    #ctt {padding:0;}
    #ctt_con {padding:0px 0px 0px 0px;}
    .faq-container { max-width: 100%;}
    .faq { padding: 20px 20px;}
    .faq__title { font-size: 17px; line-height: 1.3;}
    .faq__title > span{ font-size:22px;}
    .faq__text { font-size: 15px;}
    .faq.active .faq__answer { max-height: 150px; margin-top:20px;}
    .faq__btn { top: 20px; right: 10px;}
}