@charset "utf-8";

:root{--txt_h:-75px}
#atc01{padding:150px 0 50px}
#atc01 .inner{display:flex;justify-content:space-between;padding:0 100px}
#atc01 h2{margin-top:10px}
#atc01 .chat{position:relative;display:flex}
#atc01 .chat .txt{overflow:hidden;height:75px;border-radius:50px;padding:0 30px;font-size:23px;font-weight:700}
#atc01 .chat .txt li{height:75px;line-height:75px;animation:txt_roll 12s cubic-bezier(0.645, 0.045, 0.355, 1) infinite}
#atc01 .chat .que{padding-right:250px}
#atc01 .chat .que .txt{color:#111;background:#f2f2f2}
#atc01 .chat .que .wrap{position:relative;margin-left:70px}
#atc01 .chat .que .wrap:after{position:absolute;content:'';z-index:-10;bottom:-5px;left:0;width:50px;height:34px;background:url('./img/tail01.png')}
#atc01 .chat .ans{position:absolute;right:0;transform:translateY(100px)}
#atc01 .chat .ans .wrap{position:relative;margin-right:70px}
#atc01 .chat .ans .wrap:after{position:absolute;content:'';z-index:-10;bottom:-5px;right:0;width:50px;height:34px;background:url('./img/tail02.png')}
#atc01 .chat .ans .img{text-align:right}
#atc01 .chat .ans .txt{color:#fff;background:var(--dark)}
@keyframes txt_roll {0%{transform:translateY(0)}10%{transform:translateY(0)}20%{transform:translateY(var(--txt_h))}30%{transform:translateY(var(--txt_h))}
40%{transform:translateY(calc(var(--txt_h) * 2))}
50%{transform:translateY(calc(var(--txt_h) * 2))}
60%{transform:translateY(calc(var(--txt_h) * 3))}
70%{transform:translateY(calc(var(--txt_h) * 3))}
80%{transform:translateY(calc(var(--txt_h) * 4))}
90%{transform:translateY(calc(var(--txt_h) * 4))}
100% { transform:translateY(0)}}

/* 반응형 [s] */
@media (max-width:1440px){
#atc01{padding:100px 0 50px}
#atc01 .inner{padding:0 50px}
#atc01 .chat .txt{font-size:20px}
#atc01 .chat .que{padding-right:150px}
}
@media (max-width:1024px){
:root{--txt_h:-60px}
#atc01{padding:70px 0 50px}
#atc01 .inner{display:block;padding:0 15px}
#atc01 .b_tit{margin-bottom:0 !important}
#atc01 .chat{display:block;width:50%;margin:-150px 0 0 auto}
#atc01 .chat .ans{position:unset;transform:unset;margin-top:-50px}
#atc01 .chat .que{padding-right:0;transform:translateX(-120px)}
#atc01 .chat .txt{height:60px;font-size:18px}
#atc01 .chat .txt li{height:60px;line-height:60px}
}
@media (max-width:768px){
#atc01{padding:30px 0}
#atc01 h2{margin-top:5px}
#atc01 .b_tit{text-align:center}
#atc01 .chat{width:90%;margin:0 auto;padding-top:20px}
#atc01 .chat .txt{font-size:17px}
#atc01 .chat .que{width:80%;transform:translateX(0)}
#atc01 .chat .ans{width:80%;margin:-50px 0 0 auto}
}
@media (max-width:600px){
:root{--txt_h:-45px}
#atc01 .chat{width:90%}
#atc01 .chat .img{display:none}
#atc01 .chat .que .wrap{margin-left:0;margin-right:150px}
#atc01 .chat .ans .wrap{margin-right:0;margin-left:150px}
#atc01 .chat .txt{height:45px;font-size:15px}
#atc01 .chat .txt li{height:45px;line-height:45px}
#atc01 .chat .que{width:100%}
#atc01 .chat .ans{width:100%;margin:10px 0 0 0}
}
@media (max-width:550px){
#atc01 .chat{width:100%}
#atc01 .chat .que .wrap{margin-right:80px}
#atc01 .chat .ans .wrap{margin-left:80px}
}
@media (max-width:420px){
#atc01 .chat{width:100%}
#atc01 .chat .txt{padding:0 20px;font-size:14px}
#atc01 .chat .que .wrap{margin-right:40px}
#atc01 .chat .ans .wrap{margin-left:40px}
}
@media (max-width:380px){
#atc01 .chat .que .wrap{margin-right:15px}
#atc01 .chat .ans .wrap{margin-left:15px}
#atc01 .chat .txt{font-size:13px}
}
/* 반응형 [e] */