@charset "utf-8";

#atc01{overflow:hidden;display:flex;align-items:center;justify-content:center;height:100vh}
#atc01 *{word-break:keep-all}
#atc01 .tit h2{margin-top:30px}
#atc01 .l_inner{position:absolute;z-index:10;max-width:var(--mainsize);width:100%}
#atc01 .l_inner .pager{display:flex;gap:25px;margin-top:100px}
#atc01 .l_inner .pager p{width:auto;height:auto;padding:5px 10px 0;border-top:2px solid #fff;border-radius:0;font-size:17px;font-weight:700;color:#fff;opacity:.3;background:none;transition:all .3s}
#atc01 .l_inner .pager p.on{opacity:1}

#atc01 .bg_area{width:100%;height:100vh;transition:all 1s;transition-delay:.5s}
#atc01.on .bg_area{overflow:hidden;width:calc(100% - 10%);height:77vh;border-radius:20px}
#atc01 .bg_area .atc01_slide{position:relative;width:100%;height:100%}
#atc01 .bg_area .atc01_slide:after{opacity:1;display:block;content:"";position:absolute;left:0;top:0;z-index:100;width:100%;height:100%;background:linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(255,255,255,0) 100%)}
#atc01 .bg_area li{width:100%;height:100%;background:url(./img/bg01.jpg) no-repeat;background-size:cover !important}
#atc01 .bg_area li.bg02{background:url(./img/bg02.jpg)}
#atc01 .bg_area li.bg03{background:url(./img/bg03.jpg)}
#atc01 .bg_area li.bg04{background:url(./img/bg04.jpg)}

#atc01 .txt_area{position:absolute;top:50%;right:0;width:450px;height:450px;transform:translateY(-50%)}
#atc01 .txt_area li{height:100%;border-radius:10px;background:rgba(255,255,255,.7);opacity:0;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);transition:all .3s}
#atc01 .txt_area li.on{opacity:1}
#atc01 .txt_area li a{display:flex;flex-direction:column;justify-content:space-between;height:100%;padding:60px 50px}
#atc01 .txt_area span{font-size:17px;font-weight:700;color:var(--primary)}
#atc01 .txt_area p{margin:25px 0 30px;font-size:25px;font-weight:700;color:#111}
#atc01 .txt_area .pl{line-height:1.6;transition:all .3s;white-space:pre-line}
#atc01 .txt_area em{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50px;color:#fff;background:#111;margin-left:auto;transition:all .3s}
#atc01 .txt_area .txt_slide{width:100%;height:100%}

/* 반응형 [s] */
@media (hover:hover){
#atc01 .txt_area li:hover{background:#fff}
#atc01 .txt_area li:hover em{background:var(--primary)}
}
@media (max-width:1620px){
#atc01 .l_inner{max-width:unset;width:80%}
}
@media (max-width:1380px){
#atc01.on .bg_area{width:95%}
#atc01 .l_inner{width:90%} 
#atc01 .l_inner .pager{gap:20px}
#atc01 .l_inner .pager p{font-size:15px}
#atc01 .txt_area{width:400px;height:400px}
#atc01 .txt_area li a{padding:50px 40px}
#atc01 .txt_area span{font-size:16px}
#atc01 .txt_area p{font-size:23px}
#atc01 .txt_area .pl{font-size:15px}
}
@media (max-width:1024px){
#atc01.on .bg_area{height:90vh}
#atc01 .l_inner .tit_area{display:flex;flex-direction:column;align-items:center;text-align:center}
#atc01 .l_inner .pager{margin-top:50px}
#atc01 .tit h2{margin-top:20px}
#atc01 .txt_area{position:static;transform:none;margin-top:60px;width:100%;height:auto}
#atc01 .txt_area li a{padding:40px 35px;gap:15px;}
#atc01 .txt_area p{margin:14px 0 25px}
#atc01 .txt_area em{width:55px;height:55px}
}
@media (max-width:768px){
#atc01{height:700px}
#atc01 .bg_area{height:100%}
#atc01.on .bg_area{width:100%;height:100%;border-radius:0%}
#atc01 .tit h2{margin-top:15px}
#atc01 .l_inner .pager{margin-top:35px}
#atc01 .l_inner .pager p{font-size:14px;line-height:1.3}
#atc01 .txt_area{margin-top:55px}
#atc01 .txt_area li a{align-items:center;text-align:center;padding:35px 15px;gap:30px}
#atc01 .txt_area span{font-size:15px}
#atc01 .txt_area p{margin:8px 0 12px;font-size:21px}
#atc01 .txt_area .pl{margin:auto;width:80%;font-size:14px;white-space:normal}
#atc01 .txt_area em{margin-left:0px;width:124px;height:42px}
#atc01 .txt_area em svg{width:20px;height:20px}
}
@media (max-width:480px){
#atc01{height:640px}
#atc01 .tit h2{margin-top:12px}
#atc01 .l_inner .pager{margin-top:30px;gap:12px}
#atc01 .l_inner .pager p{padding:5px 5px 0;font-size:13px}
#atc01 .txt_area span{font-size:14px}
#atc01 .txt_area p{font-size:18px}
#atc01 .txt_area .pl{width:90%;font-size:13px}
#atc01 .txt_area li a{gap:25px}
#atc01 .txt_area em{width:110px;height:38px}
}
@media (max-width:380px){
#atc01{height:610px}
#atc01 .tit h2{margin-top:8px}
#atc01 .l_inner .pager p{font-size:12px}
#atc01 .txt_area li a{padding:30px 10px}
#atc01 .txt_area span{font-size:13px}
#atc01 .txt_area p{margin:5px 0 10px;font-size:17px}
#atc01 .txt_area em{width:100px;height:36px}
#atc01 .txt_area em svg{width:18px;height:18px}
}
/* 반응형 [e] */