@charset "utf-8";

#atc03{position:relative;height:400px;overflow:hidden}
#atc03>div{float:left;width:50%;height:100%}
#atc03 .tit{margin-bottom:10px;font-size:40px;line-height:1.2;color:var(--primary);font-family:'Shrikhand'}

#atc03 .dirt_area{padding-top:100px;text-align:center;font-size:17px;font-family:'mulish'}
#atc03 .dirt_area .more_btn{display:block;position:relative;width:200px;height:50px;margin:30px auto 0;border:solid 1px #222;border-radius:50%;font-weight:600;transition:all .3s}
#atc03 .dirt_area .more_btn:before,#atc03 .dirt_area .more_btn:after{position:absolute;top:0;left:0;width:100%;height:50px;border:solid 1px #222;border-radius:50%;content:'';transition:all .3s}
#atc03 .dirt_area .more_btn:before{transform:rotate(2deg)}
#atc03 .dirt_area .more_btn:after{transform:rotate(-3deg)}

#atc03 .dirt_area .more_btn span{position:absolute;left:60px;transition:all .2s}
#atc03 .dirt_area .more_btn span.a1{top:9px}
#atc03 .dirt_area .more_btn span.a2{top:20px;opacity:0;color:var(--primary)}
#atc03 .dirt_area .time_txt{font-family:'notokr-regular'}

#atc03 .qna_area{position:relative;padding:45px}
#atc03 .qna_area .slider li span{display:block;position:relative;padding-left:30px;font-size:20px}
#atc03 .qna_area .slider li .question{margin-bottom:5px}
#atc03 .qna_area .slider li span:before{position:absolute;left:0;top:0;width:20px;font-size:20px;font-weight:600;font-family:'mulish'}
#atc03 .qna_area .slider li .question:before{content:'Q'}
#atc03 .qna_area .slider li .answer:before{content:'A'}

#atc03 .qna_area .swiper-pager{position:absolute;left:40px;bottom:40px}
#atc03 .qna_area .swiper-pager span{display:inline-block;width:12px;height:12px;margin:5px;border-radius:50%;font-size:0;opacity:1;background-color:#cdcdcd}
#atc03 .qna_area .swiper-pager span.swiper-pagination-bullet-active{background-color:var(--primary)}

#atc03 .w_line{position:absolute;left:0;width:0;height:1px;opacity:0;background-color:#222}
/* 반응형 [s] */
@media (hover:hover) {
#atc03 .dirt_area .more_btn:hover .a1{top:-10px;opacity:0;transition-delay:0s}
#atc03 .dirt_area .more_btn:hover .a2{top:9px;opacity:1;transition-delay:.2s}
#atc03 .dirt_area .more_btn:hover,#atc03 .dirt_area .more_btn:hover:before,#atc03 .dirt_area .more_btn:hover:after{border-color:var(--primary)}
}
@media (max-width:1400px){
#atc03 .qna_area{padding:45px 20px}
}
@media (max-width:1200px){
#atc03 .qna_area{width:calc(100% - (100% / 3))}
#atc03 .dirt_area{float:right;width:calc(100% / 3);padding:50px 20px 0}
}
@media (max-width:1024px){
#atc03 .tit{white-space:pre-line;word-break:keep-all}
#atc03 .qna_area .slider li span{font-size:17px}
#atc03 .qna_area .slider li span:before{top:-4px}
#atc03 .dirt_area{padding-top:30px}
}
@media (max-width:768px){
#atc03{height:auto}
#atc03 .tit{ white-space:normal}
#atc03 .dirt_area{float:none;width:100%;padding:40px 0}
#atc03 .dirt_area .time_txt{word-break:keep-all}
#atc03 .qna_area{float:none;width:100%;background:#fff}
#atc03 .qna_area .swiper-pager{left:auto;right:20px;bottom:auto;top:57px}
}
@media (max-width:480px){
#atc03 .dirt_area{padding:40px 20px}
}
@media (max-width:380px){
#atc03 .tit{font-size:32px}
#atc03 .qna_area .slider li span{font-size:15px}
#atc03 .qna_area .swiper-pager span{width:8px;height:8px}
}
/* 반응형 [e] */