@charset "utf-8";

#atc01{overflow:hidden;height:100vh}
#atc01 .l_inner{display:flex;position:absolute;top:0;left:0;background-color:#f5f5f5;width:50%;height:100vh}
#atc01 .l_inner .txt_box{margin:auto 0;width:100%;max-width:700px;margin-left:auto;color:#aaa}
#atc01 .l_inner .txt_box .eng_tit{margin-bottom:25px;font-size:24px;font-weight:600;color:var(--primary);font-family:'play'}
#atc01 .l_inner .txt_box .big_txt{margin-bottom:110px;font-size:58px;font-weight:100;color:#111;line-height:1.2;white-space:pre-line}
#atc01 .l_inner .txt_box .big_txt span{font-weight:700}
#atc01 .l_inner .txt_box .pager_txt p{display:flex;position:relative;column-gap:23px;width:max-content;height:auto;margin-left:-1px;border-radius:0;font-size:20px;font-weight:600;line-height:1;background:none;opacity:.6;transition:all .2s}
#atc01 .l_inner .txt_box .pager_txt p.on{padding-left:15px;color:#111;opacity:1}
#atc01 .l_inner .txt_box .pager_txt p.on:before{position:absolute;left:0;top:50%;transform:translateY(-50%);content:'';width:7px;height:7px;border-radius:100%;background:var(--primary)}
#atc01 .l_inner .txt_box .pager_txt p+p{margin-top:28px}
#atc01 .r_inner{margin-top:42vh;padding-left:calc(50% - 120px)}
#atc01 .r_inner .atc01_slide{padding-bottom:20px}
#atc01 .r_inner ul li{width:400px}
#atc01 .r_inner ul li .img{height:420px}
#atc01 .r_inner ul li img{width:100%;height:100%;object-fit:cover;transition:all .4s}
#atc01 .r_inner ul li:before{opacity:0;display:block;content:"";position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;background:var(--primary);transition:all .4s}
#atc01 .r_inner ul li.on img{border-radius:110px 0}
#atc01 .r_inner ul li.on:before{opacity:1;left:20px;top:20px;border-radius:110px 0}
#atc01 .btn-box{position:absolute;left:50%;top:18%;transform:translateX(-50%)}

/* 움직이는 텍스트 */
#atc01 .flow_txt{position:absolute;font-size:130px;top:8%;font-weight:700;color:#f2f2f2;white-space:nowrap;animation:flow 30s linear infinite;z-index:-1;font-family:'play'}
@keyframes flow {from {transform:translateX(0)} to {transform:translateX(-50%)}}

/* 반응형 [s] */
@media (max-width:1450px){
#atc01 .l_inner .txt_box{padding-left:50px}
#atc01 .l_inner .txt_box .big_txt{font-size:50px}
}
@media (max-width:1230px){
#atc01 .l_inner .txt_box .big_txt{font-size:45px}
}
@media (max-width:1024px){
#atc01 .l_inner .txt_box{padding-left:30px}
#atc01 .l_inner .txt_box .eng_tit{font-size:18px}
#atc01 .l_inner .txt_box .big_txt{margin-bottom:80px;font-size:36px}
#atc01 .l_inner .txt_box .pager_txt p{font-size:18px}
#atc01 .r_inner{margin-top:45vh}
#atc01 .r_inner ul li{width:255px}
#atc01 .r_inner ul li .img{height:235px}
#atc01 .r_inner ul li.on img{border-radius:60px 0}
#atc01 .r_inner ul li.on:before{border-radius:60px 0}
#atc01 .flow_txt{top:13%;font-size:80px}
}
@media (max-width:768px){
#atc01 .l_inner{position:static;width:100%;height:55vh}
#atc01 .l_inner .txt_box{display:flex;flex-direction:column;align-items:center;gap:15px;margin:0px;padding:100px 0 0;width:100%;max-width:none}
#atc01 .l_inner .txt_box .eng_tit{margin-bottom:0px;font-size:16px}
#atc01 .l_inner .txt_box .big_txt{margin-bottom:0px;line-height:1.5;text-align:center;font-size:30px;white-space:normal;word-break:keep-all}
#atc01 .l_inner .txt_box .big_txt span{display:block}
#atc01 .l_inner .txt_box .pager_txt {display:flex;justify-content:center;flex-wrap:wrap;gap:12px;width:100%}
#atc01 .l_inner .txt_box .pager_txt p{word-break:keep-all;font-size:15px}
#atc01 .l_inner .txt_box .pager_txt p+p{margin-top:0px}
#atc01 .btn-box{top:39%}
#atc01 .flow_txt{display:none}
#atc01 .r_inner{position:relative;margin:0px;padding:0px;height:45vh;background-color:#f5f5f5}
#atc01 .r_inner ul li{width:290px}
#atc01 .r_inner ul li .img{height:300px}
#atc01 .r_inner ul li.on img{border-radius:40px 0}
#atc01 .r_inner ul li.on:before{border-radius:40px 0}
}
@media (max-width:480px){
#atc01{height:auto}
#atc01 .l_inner{height:39vh}
#atc01 .l_inner .txt_box{gap:13px;padding-top:70px}
#atc01 .l_inner .txt_box .eng_tit{font-size:15px}
#atc01 .l_inner .txt_box .big_txt{font-size:24px}
#atc01 .l_inner .txt_box .pager_txt p{font-size:13px}
#atc01 .btn-box{top:34%}
#atc01 .r_inner{height:46vh}
#atc01 .r_inner .atc01_slide{padding-top:10px}
#atc01 .r_inner ul li{width:280px}
#atc01 .r_inner ul li .img{height:auto}
#atc01 .r_inner ul li.on img{border-radius:30px 0}
#atc01 .r_inner ul li.on:before{border-radius:30px 0}
}
@media (max-width:380px){
#atc01 .l_inner .txt_box .big_txt{font-size:22px}
#atc01 .r_inner .atc01_slide{padding-top:15px}
#atc01 .r_inner ul li{width:270px}
}
/* 반응형 [e] */