@charset "utf-8";

/* 섹션 배경 그라데이션 단계 4/5. 다른 섹션과 좌우 폭을 맞추기 위해 전체를 1400px .inner 카드로 담음 */
#atc04{position:relative;margin-top:0 !important;padding:90px 15px;background:#f2f6f9}
#atc04 .inner{position:relative;display:flex;max-width:1400px;height:80vh;min-height:660px;margin:0 auto;border-radius:30px;overflow:hidden;box-shadow:0 20px 50px rgba(20,57,78,.12)}
/* 학원 복도(로고 벽) 사진 + 텍스트 가독성용 흰색 베일 (위·아래 진하게) */
/* 카드 안에서 텍스트는 원본 비율(왼쪽 패널의 약 27%)만큼 좌측 인셋을 줘 사진 여백을 확보 */
#atc04 .l_cont{display:flex;flex-direction:column;justify-content:space-around;width:50%;height:100%;padding-left:13.5%;border-radius:0 30px 30px 0;background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.35) 45%,rgba(255,255,255,.7) 100%),url('./img/bc_office.jpg') left center no-repeat;background-size:cover}
/* 프로그램 탭 = 클릭 가능한 알약 버튼: 투명 기본 / hover 네이비 채움 / 선택 시 골드 */
#atc04 .tabs_area .tabs{display:inline-flex;flex-direction:column;align-items:flex-start;gap:14px}
#atc04 .tabs_area li{position:relative;display:inline-flex;align-items:center;padding:12px 28px;border:1px solid rgba(20,57,78,.08);border-radius:50px;background:rgba(255,255,255,.7);box-shadow:0 4px 14px rgba(20,57,78,.08);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#14394E;font-size:17px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);white-space:nowrap}
#atc04 .tabs_area li:hover{background:#14394E;color:#fff;border-color:#14394E;box-shadow:0 8px 22px rgba(20,57,78,.22);transform:translateY(-2px)}
#atc04 .tabs_area li.on{background:#F2B33D;color:#14394E;border-color:#F2B33D;box-shadow:0 8px 22px rgba(242,179,61,.35)}
/* 임시: 서류/클립 사진 대신 중립 그라데이션. 실사진 수령 후 아래 주석의 형태로 복원
   background:url('./img/inc04_bg.jpg') no-repeat center 97%;background-size:cover */
#atc04 .tab_page{width:50%;height:100%;background:linear-gradient(180deg, #f2f6f9 0%, #eef2f6 70%, #e3eaf1 100%)}
#atc04 .tab_page .tab_cont{display:none;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:#14394E;background:linear-gradient(0deg, #E09A1F, #F2B33D);transition:all .3s}
#atc04 .cir_link a:before{position:absolute;background:url('./img/roll_txt.svg') center no-repeat;content:'';left:50%;top:50%;width:175px;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:1024px){
/* 태블릿·모바일 공통: 풀블리드 대신 세로 스택 카드(auto 높이) */
#atc04 .inner{flex-direction:column;height:auto;min-height:0}
#atc04 .atc_tit{justify-content:flex-start !important}
#atc04 .l_cont{position:relative;display:block;width:100%;height:440px;padding:70px 15px 0;border-radius:0;background-position:left 35%}
#atc04 .tab_page{width:100%;padding-top:100px}
#atc04 .tabs_area li{font-size:15px;padding:10px 20px}
#atc04 .clg_cont .e_txt{font-size:30px}
#atc04 .clg_cont .k_txt{font-size:35px}
#atc04 .clg_cont .info p{font-size:25px}
#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 .tabs_area{text-align:left}
#atc04 .tabs_area .tabs{flex-direction:column;align-items:flex-start;gap:12px}
/* 원형 배지를 사진패널(l_cont 440px) 하단 경계 중앙에 고정 → 알약과 겹치지 않음 */
#atc04 .cir_link{top:440px;transform:translate(-50%,-50%)}
}
@media (max-width:768px){
#atc04{padding:60px 15px}
#atc04 .inner{border-radius:20px}
#atc04 .clg_cont .e_txt{font-size:25px}
#atc04 .clg_cont .k_txt{font-size:28px}
#atc04 .clg_cont .info{padding-top:50px;font-size:14px}
#atc04 .clg_cont .info p{font-size:20px}
#atc04 .clg_cont .info:after{height:25px}
#atc04 .clg_cont .info div{padding:0 15px}
}
@media (max-width:480px){
#atc04 .clg_cont .e_txt{font-size:20px}
#atc04 .clg_cont .k_txt{font-size:23px}
}
@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] */