@charset "utf-8";

#atc01{overflow:hidden}
#atc01 .inner{position:relative;max-width:1400px;margin:0 auto;padding:160px 0 235px}
#atc01 .inner:before{position:absolute;left:calc(100% - 200px);top:0;content:'';width:100%;height:100%;border-left:1px solid #e1e1e1;background:#f5f5f5}
#atc01 .txt_area{display:flex;justify-content:space-between;max-width:1200px}
#atc01 .txt_area .l_box .txt01{font-size:50px;line-height:1.2;font-weight:700;white-space:pre-line;color:#111}
#atc01 .txt_area .l_box .txt02{margin-top:43px;white-space:pre-line}
#atc01 .txt_area .r_box{overflow:hidden}
#atc01 .txt_area .r_box .pager{float:right;margin-bottom:40px;padding-right:30px}
#atc01 .txt_area .r_box .pager span{display:block;opacity:.3;transition:all .2s}
#atc01 .txt_area .r_box .pager span.on{opacity:1;height:20px;border-radius:50px;background-color:#111}
#atc01 .txt_area .r_box .pager span+span{margin-top:10px}
#atc01 .txt_area .r_box a{display:flex;align-items:flex-end;position:relative;clear:both;width:190px;height:190px;padding:0 0 34px 40px;border-radius:20px 0 0 0;color:#fff;background-color:var(--primary);transition:all .2s}
#atc01 .txt_area .r_box a svg{position:absolute;top:30px;right:30px;transition:all .2s;height:18px}
#atc01 .txt_area .r_box a p{font-size:18px;line-height:1.55;font-weight:500;white-space:pre-line}
#atc01 .img_slide{border-radius:20px;background-color:#000}
#atc01 .img_slide ul li{opacity:0 !important;padding:130px 0 132px 800px;color:#fff;background:no-repeat center;background-size:cover}
#atc01 .img_slide ul li.img01{background-image:url('./img/img01.jpg')}
#atc01 .img_slide ul li.img02{background-image:url('./img/img02.jpg')}
#atc01 .img_slide ul li.img03{background-image:url('./img/img03.jpg')}
#atc01 .img_slide ul li .slide_txt01{font-size:40px;line-height:1.3;font-weight:700;white-space:pre-line}
#atc01 .img_slide ul li .slide_txt02{margin-top:38px;white-space:pre-line}
#atc01 .img_slide ul li.on{opacity:1 !important}
#atc01 .icon_banner{display:flex;max-width:1200px;margin-top:60px}
#atc01 .icon_banner li{width:calc(100%/3);padding:0 30px}
#atc01 .icon_banner li a{display:flex}
#atc01 .icon_banner li .icon{display:flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:10px;background-color:var(--black);transition:all .2s}
#atc01 .icon_banner li .txt{margin-bottom:11px;font-size:40px;font-weight:700;color:#111; padding:3px 0 0 25px; width:calc(100% - 80px); }
#atc01 .icon_banner li .txt span{display:block; font-size:18px;word-break:keep-all;color:#666}

/* 모바일 호버 X */
@media (hover: hover) {
#atc01 .txt_area .r_box a:hover{background-color:var(--black)}
#atc01 .txt_area .r_box a:hover svg{transform:rotate(45deg)}
#atc01 .icon_banner li a:hover .icon{background-color:var(--primary)}
}

/* 반응형 [s] */
@media (max-width:1500px){
#atc01 .inner{max-width:none;padding:160px 50px 235px}
#atc01 .txt_area{max-width:none;width:calc(100% - 150px)}
#atc01 .img_slide ul li{padding-left:55%}
#atc01 .icon_banner{max-width:none;width:calc(100% - 150px)}
}
@media (max-width:1230px){
#atc01 .inner{padding:140px 30px 185px}
#atc01 .inner:before{left:calc(100% - 120px)}
#atc01 .txt_area{width:calc(100% - 90px)}
#atc01 .txt_area .l_box .txt01{font-size:45px}
#atc01 .img_slide ul li{padding:110px 0 112px 50%}
#atc01 .img_slide ul li .slide_txt01{font-size:35px}
#atc01 .icon_banner{width:calc(100% - 90px)}
#atc01 .icon_banner li{padding:0 20px}
#atc01 .icon_banner li .txt span{margin-bottom:8px;font-size:18px}
}
@media (max-width:1024px){
#atc01 .inner{padding:120px 30px 155px}
#atc01 .inner:before{left:calc(100% - 70px)}
#atc01 .txt_area{width:calc(100% - 40px)}
#atc01 .txt_area .l_box{width:calc(100% - 160px)}
#atc01 .txt_area .l_box .txt01{font-size:38px}
#atc01 .txt_area .l_box .txt02{max-width:520px;margin-top:30px;padding-right:30px;white-space:normal;word-break:keep-all}
#atc01 .txt_area .r_box a{width:160px;height:160px;padding:0 0 30px 30px}
#atc01 .txt_area .r_box a p{font-size:16px}
#atc01 .img_slide ul li{padding:90px 0 92px calc(100% - 480px)}
#atc01 .img_slide ul li .slide_txt01{font-size:30px}
#atc01 .img_slide ul li .slide_txt02{max-width:420px;margin-top:25px;white-space:normal;word-break:keep-all}
#atc01 .icon_banner{width:calc(100% - 40px);margin-top:50px}
#atc01 .icon_banner li{padding:0 15px}
#atc01 .icon_banner li .icon{width:60px;height:60px}
#atc01 .icon_banner li .txt{padding-left:20px; font-size: 30px;}
#atc01 .icon_banner li .txt span{font-size:16px; margin-bottom:0;}
}
@media (max-width:768px){
#atc01 .inner{padding:90px 30px}
#atc01 .inner:before{display:none}
#atc01 .txt_area{align-items:center;width:100%;margin-bottom:30px}
#atc01 .txt_area .l_box{width:calc(100% - 120px);padding-right:30px}
#atc01 .txt_area .l_box .txt01{font-size:30px;word-break:keep-all}
#atc01 .txt_area .l_box .txt02{padding-right:0}
#atc01 .txt_area .r_box{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;row-gap:50px;width:120px}
#atc01 .txt_area .r_box .pager{margin-bottom:0;padding-right:0}
#atc01 .txt_area .r_box a{width:120px;height:120px;padding:0 0 20px 20px;border-radius:20px}
#atc01 .txt_area .r_box a p{font-size:15px}
#atc01 .txt_area .r_box a svg{top:20px;right:20px}
#atc01 .img_slide ul li{padding:70px 50px 72px}
#atc01 .img_slide ul li .slide_txt01{font-size:28px}

#atc01 .icon_banner{display:block;width:100%;margin-top:40px}
#atc01 .icon_banner li{width:100%;padding:15px 0}
#atc01 .icon_banner li+li{margin-top:10px;border-top:1px dotted #e1e1e1}
#atc01 .icon_banner li:last-child{padding-bottom:0}
#atc01 .icon_banner li .txt{padding-top:0}
#atc01 .icon_banner li .txt span{margin-bottom:0}
}
@media (max-width:480px){
#atc01 .inner{padding:70px 15px}
#atc01 .txt_area{display:block;margin-bottom:20px}
#atc01 .txt_area .l_box{width:100%;padding-right:0}
#atc01 .txt_area .l_box .txt01{font-size:25px}
#atc01 .txt_area .l_box .txt02{margin:23px 0 30px}
#atc01 .txt_area .r_box{align-items:center;justify-content:space-between;flex-direction:row-reverse;width:100%}
#atc01 .txt_area .r_box a{width:170px;height:auto;padding:18px 30px;border-radius:50px}
#atc01 .txt_area .r_box a p{font-size:14px;white-space:normal}
#atc01 .txt_area .r_box a svg{right:20px;top:50%;transform:translateY(-50%)}
#atc01 .txt_area .r_box .pager span{width:6px;height:6px}
#atc01 .txt_area .r_box .pager span.on{height:15px}
#atc01 .txt_area .r_box .pager span+span{margin-top:7px}
#atc01 .img_slide ul li{padding:60px 25px 62px}
#atc01 .img_slide ul li .slide_txt01{font-size:23px}
#atc01 .icon_banner{margin-top:30px}
#atc01 .icon_banner li .txt{font-size:20px}
#atc01 .icon_banner li .txt span{font-size:15px}
}
@media (max-width:380px){
#atc01 .txt_area .l_box .txt01{font-size:23px}
#atc01 .txt_area .l_box .txt02{margin-top:20px}
#atc01 .txt_area .r_box a{width:165px;padding:15px 25px}
#atc01 .img_slide ul li{min-height:252px;padding:45px 25px}
#atc01 .img_slide ul li .slide_txt01{font-size:20px}
#atc01 .img_slide ul li .slide_txt02{margin-top:20px}
#atc01 .icon_banner{margin-top:20px}
#atc01 .icon_banner li .icon{width:50px;height:50px}
#atc01 .icon_banner li .icon img{height:25px}
}
/* 반응형 [e] */