@charset "utf-8";

/*======================================= Our Service =======================================*/
#atc01{}
#atc01 .atc_inner{max-width:134rem;width:100%;margin:0 auto;padding:10rem 2rem;position:relative}

/*타이틀*/
#atc01 .tit_box{margin-bottom:5rem;text-align:center}
#atc01 .tit_box .num{display:block;margin-bottom:4rem;font-size:2rem;font-weight:bold;color:var(--pt-color);position:relative;font-family:'Poppins'}
#atc01 .tit_box .num::after{content:'';width:1.2rem;height:1.2rem;background:var(--pt-color);position:absolute;bottom:-2.5rem;left:50%;transform:translateX(-50%);opacity:0.5}
#atc01 .tit_box .tit{display:inline-block;margin-bottom:1rem;font-size:4rem;font-weight:700;letter-spacing:-0.1rem;line-height:130%;position:relative}
#atc01 .tit_box .s_tit{font-size:1.8rem;font-weight:bold;color:#C4C4C4;font-family:'Poppins'}

/*탭버튼*/
#atc01 .tabs{}
#atc01 .tabs ul{display:flex;flex-wrap:wrap;}
#atc01 .tabs ul li{width:25%;padding-top:2.2rem;border-top:3px solid #E2E2E2;font-size:2rem;font-weight:bold;text-align:center;color:#E2E2E2;cursor:pointer;transition:.2s}
#atc01 .tabs ul li.on{border-top:3px solid var(--pt-color);color:var(--pt-color)}
#atc01 .tabs ul li br{display:none}

/*탭상세*/
#atc01 .tabs_detail{margin-top:5rem}
#atc01 .tabs_detail ul{}
#atc01 .tabs_detail ul li{display:none;overflow:hidden;align-items:center}
#atc01 .tabs_detail ul li.on{display:flex}
#atc01 .tabs_detail ul li .img_box{width:50%;border-radius:2rem;transform:translateX(-100%);transition:.2s;overflow: hidden}
#atc01 .tabs_detail ul li.on .img_box{animation:ani_left 0.8s forwards}
#atc01 .tabs_detail ul li .img_box img{width:100%}

#atc01 .tabs_detail ul li .txt_box{width:50%;padding-left:7rem}
#atc01 .tabs_detail ul li.on .txt_box{animation:ani_right 0.8s forwards}
#atc01 .tabs_detail ul li .txt_box .num{display:block;margin-bottom:2.5rem;font-size:2rem;font-weight:700;line-height:100%;color:var(--pt-color);font-family:'Poppins'}
#atc01 .tabs_detail ul li .txt_box .tit{margin-bottom:1.3rem;font-size:3rem;font-weight:bold}
#atc01 .tabs_detail ul li .txt_box .txt{margin-bottom:4rem;font-size:1.7rem;line-height:150%;color:#888;word-break: keep-all}

#atc01 .more_btn{padding-bottom:1.5rem;transition:all .3s;position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:1rem}
#atc01 .more_btn:before{content:'';width:0;height:2px;background:var(--pt-color);position:absolute;left:0;bottom:0;}
#atc01 .more_btn .a_txt{font-size:1.6rem;font-weight:700;color:#222;transition:all .3s}
#atc01 .more_btn .arr{width:16px;height:8px;background:url(/index/include/include01/arr.png) no-repeat right center;transition: background-position 0.3s ease; }
#atc01 .more_btn:hover{gap:3rem}
#atc01 .more_btn:hover .arr {background-position:left center}
#atc01 .more_btn:hover:before{animation: lineMove .3s linear forwards;}

@keyframes lineMove {0% {width:0%;}100% {width:100%;}}


/*animation*/
@keyframes fadein{0%{opacity:0} 100%{opacity:1}}
@keyframes ani_left{0%{transform:translateX(-50px);opacity:0} 60%{transform:translateX(5px);opacity:1} 100%{transform:translateX(0%)}}
@keyframes ani_right{0%{transform:translateX(+50px);opacity:0} 60%{transform:translateX(-5px);opacity:1} 100%{transform:translateX(0%)}}
@keyframes ani_up{0%{transform:translateY(-50px);opacity:0} 100%{transform:translateY(0%)}}
@keyframes ani_down{0%{transform:translateY(+50px);opacity:0} 100%{transform:translateY(0%)}}



@media (max-width:1280px){
#atc01 .atc_inner{padding:9rem 2rem}
}
@media (max-width:1024px){
#atc01 .atc_inner{padding:8rem 2rem}
#atc01 .tit_box .tit{font-size:3.7rem}

#atc01 .tabs_detail ul li .img_box{height:35rem}
#atc01 .tabs_detail ul li .img_box img{width:100%;height:100%;object-fit:cover}

#atc01 .tabs_detail ul li .txt_box{padding-left:5rem} 
#atc01 .tabs_detail ul li .txt_box .tit{font-size:2.7rem}
}
@media (max-width:767px){
#atc01 .atc_inner{padding:7rem 2rem}
#atc01 .tit_box{margin-bottom:4rem;text-align:center}
#atc01 .tit_box .tit{margin-bottom:0;font-size:3.4rem}
#atc01 .tit_box .tit::after{bottom:-1.5rem}    
#atc01 .tit_box .s_tit{margin-top:0;font-size:1.5rem}

#atc01 .tabs ul{gap:1rem 2%}
#atc01 .tabs ul li{width:49%;padding:1.5rem 2rem;border:1px solid #ddd;border-radius:5rem;font-size:1.7rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center}
#atc01 .tabs ul li.on{border:1px solid var(--pt-color)}

#atc01 .tabs_detail{margin-top:2rem}
#atc01 .tabs_detail ul li{font-size:1.8rem;flex-direction:column}
#atc01 .tabs_detail ul li .img_box{width:100%;height:30rem}
#atc01 .tabs_detail ul li .txt_box{width:100%;padding:3rem 1.5rem 5rem;background:#F9F9F9;text-align:center}
#atc01 .tabs_detail ul li .txt_box .num{margin-bottom:1rem;font-size:2rem}
#atc01 .tabs_detail ul li .txt_box .tit{margin-bottom:1rem;font-size:2.4rem}
#atc01 .tabs_detail ul li .txt_box .txt{margin-bottom:3rem;font-size:1.7rem}
#atc01 .tabs_detail ul li .txt_box a{margin: 0 auto}
}    
@media (max-width:480px){  
#atc01 .atc_inner{padding:6rem 2rem}
#atc01 .tit_box{margin-bottom:3rem}
#atc01 .tit_box .tit{font-size:3.1rem}

#atc01 .tabs_detail{margin-top:1rem}
#atc01 .tabs_detail ul li .img_box{height:25rem}
#atc01 .tabs_detail ul li .txt_box{padding:2.5rem 1.5rem 4rem}
#atc01 .tabs_detail ul li .txt_box .num{font-size:1.8rem}
#atc01 .tabs_detail ul li .txt_box .tit{font-size:2.1rem}
#atc01 .tabs_detail ul li .txt_box .txt{margin-bottom:2rem;font-size:1.6rem}
}
@media (max-width:320px){
#atc01 .atc_inner{padding:6rem 1.5rem}
#atc01 .tit_box .tit{font-size:2.8rem}   
}