@charset "utf-8";

#atc04{overflow:hidden;padding:0 30px 150px}
#atc04 .atc_inner{display:flex;justify-content:space-between;align-items:flex-end;gap:90px;max-width:1500px;margin:0 auto}
#atc04 .atc_inner .tit_area .tit::before{display:none}
#atc04 .atc_inner .l_box{flex:1;max-width:756px; width:100%;height:475px;overflow:hidden;border-radius:20px}
#atc04 .atc_inner .r_box{flex:1;display:flex;align-items:flex-end;justify-content:space-between}
#atc04 .atc_inner .r_box .with-us{display:flex;flex-direction:column;width:230px;padding-bottom:0}
#atc04 .atc_inner .r_box .with-us .text-box{display:flex;flex-direction:column;align-items:flex-start !important;padding-bottom:0 !important}
#atc04 .atc_inner .r_box .with-us .text-box .tag{display:inline-block;padding-bottom:55px;font-family:var(--font-recipekr);font-size:15px;color:var(--brand-color);text-transform:uppercase}
#atc04 .atc_inner .r_box .with-us .text-box h2{padding-bottom:25px}
#atc04 .atc_inner .r_box .with-us .text-box .desc{padding-bottom:100px;line-height:28px;color:#666;word-break:keep-all}
#atc04 .atc_inner .r_box .franchise{position:relative;display:flex;justify-content:flex-end;width:420px}
#atc04 .atc_inner .r_box .franchise .red-box{position:relative;display:flex;align-items:flex-end;width:350px;height:340px;padding:70px 50px;border-radius:20px;background-color:var(--brand-color);transition:background-color 0.3s}
#atc04 .atc_inner .r_box .franchise .red-box .ic-franchise{position:absolute;top:50px;right:50px}
#atc04 .atc_inner .r_box .franchise .red-box h3{font-family:var(--font-recipekr);font-size:25px;font-weight:300;width:8ch;word-break:keep-all;color:#fff}
#atc04 .atc_inner .r_box .franchise .red-box .ic-franchise{position:absolute;top:50px;right:50px}
#atc04 .atc_inner .r_box .franchise .red-box .radius{position:absolute;bottom:0;right:0;z-index:10}
#atc04 .atc_inner .r_box .franchise .red-box .radius::before{position:absolute;content:'';left:-24px;bottom:0px;z-index:-1;width:25px;height:25px;border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#atc04 .atc_inner .r_box .franchise .red-box .radius::after{position:absolute;content:'';right:0px;top:-24px;z-index:-1;width:25px;height:25px;border-radius:0 0 25px 0;box-shadow:25px 25px 0 25px #fff}
#atc04 .atc_inner .r_box .franchise .red-box .radius .link--franchise { display:flex;width:65px;height:65px;border-radius:100px;border:10px solid #fff;background-color:#302023;align-items:center;justify-content:center;box-shadow:25px 25px 0 25px #fff;transition:background-color 0.3s}
#atc04 .atc_inner .r_box .franchise .red-box .link--franchise svg{stroke:#fff}
#atc04 .atc_inner .r_box .franchise .roll{position:absolute;top:-70px;left:0;z-index:-1;animation:roll 12s linear infinite}
@keyframes roll{from {transform:rotate(0deg);}to {transform:rotate(360deg);}}

@media (hover:hover){
#atc04 .atc_inner .r_box .franchise .red-box:hover{background-color:#302023}
#atc04 .atc_inner .r_box .franchise .red-box:hover .radius .link--franchise{background-color:var(--brand-color)}
}

/* 반응형 [s] */
@media (max-width:1200px){
#atc04 .atc_inner .l_box{display:none}
#atc04 .atc_inner .r_box{gap:40px;flex-wrap:wrap}
#atc04 .atc_inner .r_box .with-us{align-items: flex-start;width:315px}
#atc04 .atc_inner .r_box .franchise{flex:1}
#atc04 .atc_inner .r_box .franchise .red-box{width:90%;height:260px;padding:50px 40px}    
#atc04 .atc_inner .r_box .franchise .roll{top:-90px;left:-15px}
}

@media (max-width:1024px){
#atc04{padding: 0 30px 80px;}
}

@media (max-width:768px){
#atc04{padding:0 15px 60px}
#atc04 .atc_inner .r_box{flex-direction:column;align-items:flex-start;gap:40px}
#atc04 .atc_inner .r_box .with-us{display:flex;flex-direction:column;align-items:center;gap:30px;width:100%}
#atc04 .atc_inner .r_box .with-us .text-box{align-items:center !important;gap:0 !important;text-align:center}
#atc04 .atc_inner .r_box .with-us .text-box .tag{padding-bottom:25px}
#atc04 .atc_inner .r_box .with-us .text-box h2{padding-bottom:10px}
#atc04 .atc_inner .r_box .with-us .text-box .desc{padding-bottom:0}
#atc04 .atc_inner .r_box .franchise{justify-content:center;width:100%}
#atc04 .atc_inner .r_box .franchise .red-box h3{width:auto;padding-left:55px;padding-top:5px;font-size:22px}
#atc04 .atc_inner .r_box .franchise .red-box{width:100%;height:auto;padding:40px 50px 40px 30px}
#atc04 .atc_inner .r_box .franchise .red-box img{width:30px}
#atc04 .atc_inner .r_box .franchise .red-box .ic-franchise{top:50%;left:30px;transform:translateY(-50%)}
#atc04 .atc_inner .r_box .franchise .roll{top:-75px;right:0;width:170px; left:unset}
}

@media (max-width:480px){
#atc04{padding:0 15px 40px}
#atc04 .atc_inner .r_box .with-us{gap: 16px;}
#atc04 .atc_inner .r_box .franchise .red-box h3{font-size:22px}
}

@media (max-width:390px){
#atc04 .atc_inner .r_box .franchise .red-box{width:100%}
#atc04 .atc_inner .r_box .franchise .red-box h3{width:100%;font-size:clamp(15px, 5.64vw, 22px);padding-left:0}
#atc04 .atc_inner .r_box .franchise .red-box img{display:none}
}
/* 반응형 [e] */