@charset "utf-8";

#atc04{position:relative;display:flex;height:850px}
#atc04 .l_cont{display:flex;flex-direction:column;justify-content:space-around;width:50%;height:100%;padding:0 40px 0 200px;border-radius:0 30px 30px 0;background:url('./img/inc04_bg2.jpg') no-repeat;background-size:cover}
#atc04 .tabs_area li{position:relative;font-size:25px;font-weight:700;color:rgba(0,0,0,.5);cursor:pointer;transition:all .3s}
#atc04 .tabs_area li:before{opacity:0;position:absolute;content:'';left:0;top:15px;width:6px;height:6px;border-radius:50px;background:var(--primary);transition:all .3s}
#atc04 .tabs_area li+li{margin-top:20px}
#atc04 .tabs_area li:hover{padding-left:10px}
#atc04 .tabs_area li.on{padding-left:20px;color:var(--primary)}
#atc04 .tabs_area .tabs{display:inline-flex;flex-direction:column}
#atc04 .tabs_area li.on:before{opacity:1}
#atc04 .tab_page{width:50%;height:100%;background:url('./img/inc04_bg.jpg') no-repeat center 97%}
#atc04 .tab_page .tab_cont{display:none;padding:0 40px;width:100%;height:100%}
#atc04 .clg_cont{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;text-align:center}
#atc04 .clg_cont .e_txt{font-size:35px;font-weight:400;color:#ddd;text-transform:uppercase}
#atc04 .clg_cont .k_txt{font-size:50px;font-weight:700;color:#111}
#atc04 .clg_cont .info{position:relative;margin-top:20px;padding-top:125px}
#atc04 .clg_cont .info:after{position:absolute;content:'';top:0;left:50%;width:1px;height:95px;border:1px solid #e1e1e1;transform:translateX(-50%)}
#atc04 .clg_cont .info p{margin-bottom:10px;font-size:35px;font-weight:700;color:var(--primary)}
#atc04 .clg_cont .info{font-size:15px;color:#111}
#atc04 .cir_link{position:absolute;top:50%;left:50%;z-index:10;text-align:center;transform:translateX(-50%)}
#atc04 .cir_link a{display:flex;align-items:center;justify-content:center;width:135px;height:135px;border-radius:50%;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(0deg, #3D000C, #7C0019);transition:all .3s}
#atc04 .cir_link a:before{position:absolute;background:url('./img/roll_txt.png');content:'';left:50%;top:50%;width:170px;height:175px;transform:translate(-50%, -50%) rotate(0deg);animation:roll_txt 10s linear infinite}
@keyframes roll_txt {100%{transform:translate(-50%, -50%) rotate(360deg)}}

@media(hover:hover){
#atc04 .cir_link a:hover{transform:scale(1.1)}
}
/* 반응형 [s] */
@media (max-width:1440px){
    #sh_section article .atc_tit{
        display: block;
    }
    #atc04 .l_cont {
        padding: 0 40px;
    }
}
@media (max-width:1024px){
#atc04{flex-direction:column}
#atc04 .atc_tit{justify-content:center !important}
#atc04 .l_cont{position:relative;display:block;width:100%;height:40%;padding:70px 15px 0;border-radius:0;background-position:center 30%}
#atc04 .tab_page{width:100%}
#atc04 .tabs_area li{font-size:20px}
#atc04 .clg_cont .e_txt{font-size:20px}
#atc04 .clg_cont .k_txt{font-size:28px}
#atc04 .clg_cont .info p{font-size:20px}
#atc04 .cir_link{top:35%}
#atc04 .cir_link a{width:110px;height:110px;font-size:14px}
#atc04 .cir_link a:before{width:140px;height:145px;background-size:100%;background-repeat:no-repeat}
#atc04 .tab_page{height:60%;padding-top:100px}
#atc04 .tabs_area{text-align:center}
#atc04 .tabs_area .tabs{
    flex-direction:unset;
    gap:20px;
    background: rgba(256, 256, 256, 0.5);
    border-radius: 20px;
    padding: 20px;
    backdrop-filter: blur(10px);
}
#atc04 .tabs_area .tabs li{
    font-size: 16px;
    width: calc(100%/6 - 14px);
}
#atc04 .tabs_area li:hover{
    padding-left: 0;
}
#atc04 .clg_cont .e_txt{
    font-size: 20px;
}
#atc04 .tabs_area li+li{margin-top:0}
#atc04 .tabs_area li.on{padding-left:0}
#atc04 .tabs_area li.on:before{display:none}
}
@media (max-width:768px){
#atc04{height:auto}
#atc04 .l_cont{height:300px}
#atc04 .clg_cont .e_txt{font-size:25px}
#atc04 .clg_cont .k_txt{font-size:28px}
#atc04 .clg_cont .info{padding-top:75px;font-size:14px}
#atc04 .clg_cont .info p{font-size:20px}
#atc04 .clg_cont .info:after{height:50px}
#atc04 .clg_cont .info div{padding:0 15px}
#atc04 .tabs_area .tabs{width: 100%;justify-content:center;align-items: center;gap:0 20px}
#atc04 .cir_link{top:50%;transform:translate(-50%, -70%)}
#atc04 .tabs_area .tabs {
    gap: 16px;
}
#atc04 .tabs_area .tabs li{
    font-size: 15px;
}
}
@media (max-width:480px){
#atc04 .clg_cont .e_txt{font-size:20px}
#atc04 .tabs_area li{font-size:16px}
#atc04 .clg_cont .k_txt{font-size:23px}
#atc04 .tabs_area .tabs {
    gap: 12px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
#atc04 .tabs_area .tabs li{width:100%; font-size: 14px;}
}
@media (max-width:390px){
#atc04 .clg_cont .e_txt{font-size:16px}
#atc04 .clg_cont .k_txt{font-size:20px}
#atc04 .clg_cont .info p{font-size:20px}
}
/* 반응형 [e] */