@charset "utf-8";

#atc02{display:flex}
#atc02 > div{width:50%;}
#atc02 .l_inner{background:url(./img/bg_img.jpg) no-repeat center;background-size:cover; padding-top:10%;}
#atc02 .l_inner .txt_box{width:700px;margin-left:auto;color:#fff}
#atc02 .l_inner .txt_box .eng_tit{margin-bottom:86px;font-size:15px;font-weight:600;font-family:var(--eng-font)}
#atc02 .l_inner .txt_box .big_txt{font-size:50px;font-weight:700;line-height:1.2;white-space:pre-line; padding-bottom:40px;}
#atc02 .l_inner .txt_box .small_txt {max-width:460px; opacity:.6; word-break: keep-all;}
#atc02 .l_inner .txt_box .pager_txt{margin-top:242px;border-left:1px solid rgba(255,255,255,.2)}
#atc02 .l_inner .txt_box .pager_txt p{display:flex;position:relative;column-gap:23px;width:max-content;height:auto;margin-left:-1px;padding-left:33px;border-radius:0;font-size:20px;font-weight:600;line-height:1;background:none;opacity:.3;transition:all .2s}
#atc02 .l_inner .txt_box .pager_txt p.on{padding-left:54px;border-left:3px solid #fff;opacity:1}
#atc02 .l_inner .txt_box .pager_txt p.on:before{position:absolute;left:30px;top:50%;transform:translateY(-50%);content:'';width:4px;height:4px;border-radius:100px;background:#fff}
#atc02 .l_inner .txt_box .pager_txt p+p{margin-top:35px}
#atc02 .l_inner .txt_box a {display:flex;align-items:center;justify-content:center;column-gap:30px;width:200px;height:65px;margin:54px 0 0;border-radius:65px;font-weight:500;color:#111;transition:all .2s;background-color:#fff;}
#atc02 .l_inner .txt_box a svg{height:18px;transition:all .2s}
#atc02 .r_inner{position:relative;border-top:1px solid #e1e1e1; background: #ddded9;  text-align: center}
#atc02 .r_inner img{width:100%; max-width: 600px; margin:0 auto;}
#atc02 .r_inner ul li .tit{margin:49px 0 22px;font-size:30px;font-weight:700;color:#111}
#atc02 .r_inner ul li .txt{white-space:pre-line;word-break:keep-all}
#atc02 .r_inner ul li a{display:flex;align-items:center;justify-content:center;column-gap:30px;width:200px;height:65px;margin:54px auto 0;border-radius:65px;font-weight:500;color:#fff;transition:all .2s;background-color:var(--black)}
#atc02 .r_inner ul li a svg{height:18px;transition:all .2s}
#atc02 .r_inner .nav_arrow{display:flex;align-items:center;justify-content:end;position:absolute;top:50%;left:-58px;transform:translateY(-50%);width:58px;height:186px;cursor:pointer;background:url('./img/nav_bg.png') no-repeat center}

/* 모바일 호버 X */
@media (hover: hover) {
#atc02 .r_inner ul li a:hover{background-color:var(--primary)}
#atc02 .r_inner ul li a:hover svg{transform:rotate(45deg)}
#atc02 .l_inner .txt_box a:hover{background-color:var(--primary); color:#fff;}
#atc02 .l_inner .txt_box a:hover svg{transform:rotate(45deg)}
}

/* 반응형 [s] */
@media (max-width:1500px){
#atc02 .l_inner{padding-left:50px}
#atc02 .r_inner ul li{padding:0 50px}
#atc02 .r_inner ul li .img{width:100%}
}
@media (max-width:1230px){
#atc02 > div{}
#atc02 .l_inner{padding-left:30px}
#atc02 .l_inner .txt_box .big_txt{font-size:45px}
#atc02 .l_inner .txt_box .pager_txt p{font-size:18px}
#atc02 .l_inner .txt_box .pager_txt p+p{margin-top:25px}
#atc02 .r_inner ul li .tit{font-size:25px}
}
@media (max-width:1024px){
#atc02 > div{}
#atc02 .l_inner .txt_box .eng_tit{margin-bottom:70px;font-size:14px}
#atc02 .l_inner .txt_box .big_txt{font-size:38px}
#atc02 .l_inner .txt_box .pager_txt{margin-top:175px}
#atc02 .l_inner .txt_box .pager_txt p{font-size:16px}
#atc02 .l_inner .txt_box .pager_txt p+p{margin-top:20px}
#atc02 .r_inner::before{width:50px}
#atc02 .r_inner ul li{padding:0 30px}
#atc02 .r_inner ul li .tit{font-size:23px}
#atc02 .r_inner ul li .txt{white-space:normal}
#atc02 .r_inner ul li a{column-gap:20px;width:185px;height:60px;margin-top:40px}
#atc02 .r_inner .nav_arrow{left:-46px;width:46px;height:147px;background-size:contain}
#atc02 .r_inner .nav_arrow p img{height:25px}
}
@media (max-width:768px){
#atc02{display:block}
#atc02 > div{width:100%;padding:0}
#atc02 .l_inner{padding:90px 30px 60px}
#atc02 .l_inner .txt_box{width:100%;margin-left:0}
#atc02 .l_inner .txt_box .eng_tit{margin-bottom:40px;font-size:13px}
#atc02 .l_inner .txt_box .big_txt{max-width:420px;font-size:30px;white-space:normal;word-break:keep-all}
#atc02 .l_inner .txt_box .pager_txt{margin-top:80px}
#atc02 .l_inner .txt_box .pager_txt p{padding-left:20px;font-size:15px}
#atc02 .l_inner .txt_box .pager_txt p+p{margin-top:15px}
#atc02 .l_inner .txt_box .pager_txt p.on{padding-left:30px}
#atc02 .l_inner .txt_box .pager_txt p.on:before{left:15px;width:3px;height:3px}
#atc02 .r_inner{}
#atc02 .r_inner::before{display:none}
#atc02 .r_inner ul li .img{max-width:450px}
#atc02 .r_inner ul li .tit{margin:25px 0 15px;font-size:20px}
#atc02 .r_inner ul li .txt{white-space:pre-line}
#atc02 .r_inner ul li a{column-gap:15px;width:165px;height:55px;margin-top:30px}
}
@media (max-width:480px){
#atc02 .l_inner{padding:70px 15px 50px}
#atc02 .l_inner .txt_box .eng_tit{margin-bottom:30px}
#atc02 .l_inner .txt_box .big_txt{font-size:25px}
#atc02 .l_inner .txt_box .pager_txt{margin-top:55px}
#atc02 .r_inner{}
#atc02 .r_inner ul li{padding:0 15px}
#atc02 .r_inner ul li .tit{margin-bottom:10px;font-size:18px}
#atc02 .r_inner ul li .txt{white-space:normal}
#atc02 .r_inner ul li a{column-gap:10px;width:160px;height:50px;margin-top:25px}
}
@media (max-width:380px){
#atc02 .l_inner .txt_box .big_txt{font-size:23px}
#atc02 .l_inner .txt_box .pager_txt p{font-size:14px}
#atc02 .r_inner ul li .tit{font-size:16px}
#atc02 .r_inner ul li a{width:150px;margin-top:20px}
}
/* 반응형 [e] */