/* =================================================== 반디유치원 공통 기본 스타일 (bandi-base.css) --------------------------------------------------- - 전역적으로 적용되는 기본값 재정의 및 개선 - PC, Mobile 공통 사용 =================================================== */ /* 공통 글꼴 및 박스 모델 */ html, body { font-family: "Noto Sans KR", "맑은 고딕", sans-serif; box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } /* 링크 기본 스타일 */ a { color: #333; text-decoration: none; } a:hover, a:focus { text-decoration: underline; } /* 반응형 기본: 이미지, 비디오 */ img, video { max-width: 100%; height: auto; display: block; } /* 테이블 기본: 폭 자동 확장 방지 */ table { width: 100%; border-collapse: collapse; } /* 폰트 사이즈 조정 (기존보다 살짝 키움) */ body { font-size: 15px; line-height: 1.6; color: #333; } /* 페이지 여백, 가독성 향상 */ .content_box { padding: 20px; } /* 버튼 및 링크 시각 피드백 */ button, a { cursor: pointer; } /* 제목 일관성 */ h1, h2, h3, h4, h5 { font-weight: 600; color: #222; } /* 공통 하단 여백 정리 */ .text_box { margin-bottom: 40px; } /* ========================= [Footer Unify Patch — 모든 페이지 공통] - 메인에서도 서브와 동일하게 보이도록 강제 정렬 - PC/모바일 모두 커버 ========================= */ /* 공통(PC+모바일): 로고/텍스트 중앙 정렬 & float 제거 */ #footer_text { width: 100% !important; box-sizing: border-box; } #footer_text .logo, #footer_text .text, #footer_text .menu { float: none !important; text-align: center !important; } /* 로고: 중앙 배치 */ #footer_text .logo img { display: inline-block !important; } /* 메인 CSS(main.css)에서 좌우 정렬/여백을 주는 규칙이 있다면 무효화 */ #footer_text .text p { margin: 4px 0 !important; } /* 모바일: 서브와 동일한 단순화 */ @media (max-width: 768px){ #footer_text{ padding:14px 10px 12px !important; background:#fff !important; } #footer_text .menu{ display:none !important; } #footer_text .text p{ margin:4px 0 !important; font-size:15px !important; line-height:1.4 !important; } #footer_text .logo{ display:block !important; margin:10px auto 6px !important; } #footer_text .logo img{ max-width:120px !important; height:auto !important; } } /* ========================= [메인 페이지 푸터 통일 패치] - 메인의 .footer_box 구조를 서브 푸터와 동일하게 만듦 ========================= */ #footer_text, #footer_text .footer_box { width: 100% !important; box-sizing: border-box !important; text-align: center !important; margin: 0 auto !important; float: none !important; background: #fff !important; padding: 20px 0 !important; } #footer_text .footer_box .logo { display: block !important; margin: 0 auto 10px !important; } #footer_text .footer_box .logo img { display: inline-block !important; max-width: 140px !important; height: auto !important; } #footer_text .footer_box .menu { display: flex !important; justify-content: center !important; gap: 12px !important; margin-bottom: 6px !important; } #footer_text .footer_box .menu li { list-style: none !important; } #footer_text .footer_box .menu a { text-decoration: none !important; color: #555 !important; font-size: 14px !important; } #footer_text .footer_box .text p { margin: 4px 0 !important; font-size: 14px !important; color: #555 !important; line-height: 1.5 !important; } /* 모바일에서는 더 간결하게 */ @media (max-width: 768px) { #footer_text .footer_box { padding: 16px 10px !important; } #footer_text .footer_box .menu { flex-direction: column !important; gap: 6px !important; } #footer_text .footer_box .menu a { font-size: 15px !important; } } /* ========================= 푸터 텍스트 중앙 정렬 보정 ========================= */ #footer_text .footer_box .text { text-align: center !important; } #footer_text .footer_box .text p { display: inline-block !important; text-align: center !important; margin: 4px 0 !important; line-height: 1.5 !important; font-size: 14px !important; color: #555 !important; } /* 푸터 텍스트 줄바꿈/넘침 방지 */ #footer_text .footer_box .text { text-align: center !important; } #footer_text .footer_box .text p { display: block !important; /* 한 줄 박스가 아닌 블록으로 */ margin: 4px auto !important; max-width: 92%; /* 너무 넓어지지 않게 */ line-height: 1.6 !important; white-space: normal !important; /* 줄바꿈 허용 */ word-break: keep-all !important; /* 한국어 단어 단위로 개행 */ overflow-wrap: break-word !important; /* 긴 URL/연속문자 강제 개행 */ } /* ========================= 푸터 중앙 정렬 완전 고정 ========================= */ #footer_text .footer_box { text-align: center !important; } #footer_text .footer_box .menu { display: flex !important; justify-content: center !important; /* 가로 가운데 정렬 */ flex-wrap: wrap !important; /* 줄바꿈 허용 */ gap: 10px !important; margin-bottom: 10px !important; } #footer_text .footer_box .menu li { list-style: none !important; } #footer_text .footer_box .menu a { text-decoration: none !important; color: #555 !important; font-size: 14px !important; } /* 주소/전화/카피 문구 가운데 + 줄바꿈 정상화 */ #footer_text .footer_box .text { text-align: center !important; } #footer_text .footer_box .text p { display: block !important; margin: 4px auto !important; max-width: 92%; line-height: 1.6 !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: break-word !important; } /* ========================= 푸터 text 영역 숨김 ========================= */ #footer_text .footer_box .text { display: none !important; } /* ===== PC 레이아웃 안전패치 (768px 초과) ===== */ @media (min-width: 769px) { /* 컨테이너 폭/패딩을 레거시(=1000px, padding 0)로 고정 */ #sub_content .content_box, .content_box { width: 1000px !important; padding: 0 !important; margin: 0 auto; box-sizing: content-box; /* 혹시 전역 border-box 영향 차단 */ } /* LNB(왼쪽) – 레거시 가로합계 보장 */ .content_box .lnb5, .lnb5 { width: 200px !important; margin-right: 40px !important; /* 20으로 줄이면 맞는 이유가 이 합계 때문 */ float: left !important; box-sizing: content-box; /* 보더/패딩 포함 안 하게 */ margin-top: 0 !important; /* 위로 떨어지는 현상 방지 */ } /* 본문(.right) – 레거시 폭 유지 */ .content_box .right, .right { width: 760px !important; float: left !important; box-sizing: content-box; margin-top: 0 !important; } /* 혹시 clearfix 사라져 있으면 보강 */ .content_box::after { content: ""; display: table; clear: both; } } /* PC에서 LNB(.left) 폭이 패딩 포함 200이 되도록 */ @media (min-width:769px){ .content_box .lnb5 .left{ width:200px !important; box-sizing:border-box !important; /* 패딩 포함 200 */ } } /* === PC 공통: 모든 서브페이지 LNB(.lnb, .lnb2, … .lnb6) 한 번에 적용 === */ @media (min-width: 769px) { /* 왼쪽 LNB 폭: 패딩 포함 200px로 고정 (패딩 때문에 240 보이던 문제 해결) */ .content_box [class^="lnb"] .left{ width: 200px !important; box-sizing: border-box !important; float: left !important; /* 기존 디자인 값 유지가 필요하면 아래 두 줄 유지/조정 */ /* padding: 35px 20px 0 20px; /* 페이지마다 이미 정의돼 있으면 생략 가능 */ margin-right: 40px !important; /* 오른쪽 여백 고정 */ } /* 우측 본문 컬럼 */ .content_box [class^="lnb"] .right{ width: 760px !important; float: left !important; } /* float 정리(혹시 부모 clearfix가 없다면) */ .content_box::after{ content: ""; display: block; clear: both; } } /* PC에서 .subbtn 안 이미지만 레거시 방식으로 원복 */ @media (min-width:769px){ .right .text_box .subbtn img{ display:inline-block !important; /* 블록 → 인라인블록 */ max-width:none !important; /* 100% 해제 */ height:auto !important; vertical-align:middle; } /* 버튼 사이 분리자도 한 줄로 */ .right .text_box .subbtn img[src$="split.gif"]{ display:inline-block !important; max-width:none !important; width:auto !important; height:auto !important; margin:0 0px !important; } /* PC 설명이미지는 보이게 */ .pc-only-desc{ display:block !important; } }