/* ===================================================================== smarthan responsive.css — hand-written, imweb-free --------------------------------------------------------------------- 목적: 아임웹 이중(PC/모바일) 레이아웃을 단일 반응형으로 통합. 재디자인된 PC 섹션을 모든 화면에서 노출하고, 옛 모바일 섹션(.mobile_section)은 숨긴 뒤, 섹션별 모바일 반응형 규칙을 여기서 직접 작성한다. 규칙: 이 파일이 head 최하단에 로드되어 아임웹 CSS를 덮어쓴다. 아임웹이 !important 를 많이 쓰므로 필요한 곳엔 !important + #id 로 특이도를 확보한다. ===================================================================== */ /* --------------------------------------------------------------------- [1] 단일 레이아웃 스위치 - 옛 모바일 섹션 전부 숨김 (재디자인 미반영, 콘텐츠 스테일) - PC 섹션은 전 화면에서 노출 --------------------------------------------------------------------- */ .section_wrap.mobile_section { display: none !important; } .section_wrap.pc_section { display: block !important; } /* PC 섹션 공통: 가로 오버플로우 방지 (고정 px/absolute 요소가 삐져나오는 것 차단) */ @media (max-width: 991px) { .section_wrap.pc_section, .section_wrap.pc_section .section_in, .section_wrap.pc_section [doz_type] { max-width: 100% !important; } body, html { overflow-x: hidden !important; } } /* --------------------------------------------------------------------- [공통] 모바일 섹션 간격 축소 아임웹 여백(padding) 위젯들이 PC 기준 큰 값(200~400px)이라 모바일에서 섹션 사이가 과도하게 벌어짐. 큰 여백만 일괄 상한(cap)으로 축소해 섹션 간격을 균일하게 만든다. (작은 여백은 그대로 유지) ※ 간격을 더 좁히거나 넓히려면 아래 60px 값 하나만 조절하면 됨. --------------------------------------------------------------------- */ @media (max-width: 991px) { .pc_section div[id^="padding_"] { max-height: 60px !important; } } /* 섹션별 모바일 규칙은 아래에 순차적으로 추가한다. ------------------------------------------------------------------- [HERO] #s20260102ac67ddcb953b3 — 도시의 내일을 연결하다 [BAR] #s20260102e680cbed3033d — Available 카운터 바 [SERV] #s20260102d2992c0f21f1f — 우리는 스마트시티에서 … 서비스카드 3 [BAND1] #s2026010246aaf2bc90b74 — 도시의 일상을 더 안전하게 … [DIAGRAM]#s20260102ef54278a31a4f — 스마트한의 혁신 통합 기술 (노드) [BAND2] #s2026010233739a54072e6 — IoT 기술로 실현하는 … [CTA] #s20260102d73f3cbe916f5 — 다양한 가능성 … Get in Touch [FOOT] #s20260623e70de74a66cdc — 로고/컨택트 ------------------------------------------------------------------- */ /* ===================================================================== [SERV] #s20260102d2992c0f21f1f — "우리는 스마트시티에서…" + 서비스카드 3 --------------------------------------------------------------------- PC : 좌(제목 aside) + 우(카드 3개) 2단 레이아웃. 2단 flex 는 index.html 의 @media(min-width:992px) 에서만 정의됨. 문제(≤991px) : 아임웹 aside 가 협폭 float 로 남아 좌측 제목이 "우/리/는" 세로 1글자씩 짓눌리고, 카드 이미지(inline 850px)가 화면 밖으로 넘침. 해결 : 단일 컬럼 전환 + 제목/카드 폰트 축소 + 이미지 폭 100%(비율 유지). ===================================================================== */ @media (max-width: 991px) { /* [1] 2단 → 단일 컬럼 전환 아임웹은 main=table, aside/inside=table-cell 로 좌우 배치한다(index.html:5517,5533). 핵심: display:table-cell 을 block 으로 바꿔야 위아래로 쌓인다. */ #s20260102d2992c0f21f1f main { display: block !important; width: 100% !important; max-width: 100% !important; } #s20260102d2992c0f21f1f .doz_aside, #s20260102d2992c0f21f1f main > .inside, #s20260102d2992c0f21f1f > .inside { display: block !important; /* table-cell 해제 → 세로 스택 */ width: 100% !important; max-width: 100% !important; min-width: 0 !important; /* extend_section 의 min-width:600px 무력화 */ float: none !important; position: static !important; vertical-align: top !important; margin: 0 !important; top: auto !important; height: auto !important; } #s20260102d2992c0f21f1f .doz_aside .inside { width: 100% !important; /* aside 내부 inside 도 600px 고정 해제 */ max-width: 100% !important; } #s20260102d2992c0f21f1f .side_gutter { display: none !important; } /* [2] 제목 h2 : inline padding-right(120px) 제거 + 폰트 축소 */ #s20260102d2992c0f21f1f h2 { padding-right: 0 !important; } #s20260102d2992c0f21f1f h2 span { font-size: clamp(24px, 5.6vw, 50px) !important; } /* [3] 카드 제목(inline 44px) 축소 */ #s20260102d2992c0f21f1f span[style*="44px"] { font-size: clamp(22px, 5vw, 44px) !important; } /* [4] 카드 이미지 : inline 850×472 고정 → 화면 폭 100%, 원본 비율(850:472) 유지 */ #s20260102d2992c0f21f1f ._img_box { width: 100% !important; height: auto !important; aspect-ratio: 850 / 472; } /* [5] 가독성 : 카드 안에 여백/간격 넣기 (라벨·제목·설명·이미지가 붙어 답답한 문제) */ /* 좌우 여백 — 텍스트/이미지가 화면 가장자리에 붙지 않게 */ #s20260102d2992c0f21f1f .doz_aside, #s20260102d2992c0f21f1f main > .inside { box-sizing: border-box !important; padding-left: 22px !important; padding-right: 22px !important; } /* 문단 줄간격 + 라벨↔제목↔설명 사이 간격 (h2 제목은

가 아니라 영향 없음) */ #s20260102d2992c0f21f1f .widget_text_wrap p { line-height: 1.6 !important; margin-bottom: 10px !important; } /* 설명 텍스트와 이미지 사이 간격 */ #s20260102d2992c0f21f1f .widget.image { margin-top: 20px !important; } } /* ===================================================================== [BAND1] #s2026010246aaf2bc90b74 — "도시의 일상을 더 안전하게…" 큰 문구 띠 --------------------------------------------------------------------- 문제(모바일) : 텍스트가 inline font-size:60px 로 고정 → 화면 폭을 넘치고 단어 중간("집중합/니다")에서 어색하게 줄바꿈. 상하 320px 여백도 과함. 해결 : 폰트 유동 축소 + 한국어 단어 유지 줄바꿈 + 상하 여백 축소. ===================================================================== */ @media (max-width: 991px) { /* [1] 큰 텍스트 : inline 60px → 화면 맞춤(22~60px) */ #s2026010246aaf2bc90b74 span[style*="60px"] { font-size: clamp(22px, 6vw, 60px) !important; line-height: 1.35 !important; } /* [2] 한국어 단어가 중간에서 안 끊기도록 (공백에서만 줄바꿈) */ #s2026010246aaf2bc90b74 .text-table p { word-break: keep-all; } /* [3] 상하 320px 여백 축소 */ #s2026010246aaf2bc90b74 [style*="height:320px"] { height: 120px !important; } } /* ===================================================================== [HERO] #s20260102ac67ddcb953b3 — "도시의 내일을 연결하다" --------------------------------------------------------------------- HERO 는 이미 자체 모바일 CSS(index.html:2471~) 로 콘텐츠를 하단 배치. 남은 문제 : 제목의 음수 자간(letter-spacing:-2.4px/-1.4px)이 커서 한글이 서로 겹쳐 "뭉개져" 보임. + 소형 화면에서 다소 큼. 해결(레이아웃·배경 미변경) : 자간 완화 + 소형 화면 폰트 한 단계 축소. ===================================================================== */ @media (max-width: 767px) { #s20260102ac67ddcb953b3 .hero-title { letter-spacing: -0.6px !important; /* 음수 자간 완화 → 글자 겹침 해소 */ line-height: 1.14 !important; } } @media (max-width: 420px) { #s20260102ac67ddcb953b3 .hero-title { font-size: clamp(30px, 9vw, 42px) !important; /* 소형 화면 한 단계 더 축소 */ } } /* ===================================================================== [BAND2] #s2026010233739a54072e6 — "IoT 기술로 실현하는 … 미래 도시" [CTA] #s20260102d73f3cbe916f5 — "다양한 가능성 …" + "Get in Touch" 버튼 --------------------------------------------------------------------- 문제(모바일) : 제목·버튼 텍스트가 inline font-size:60px 로 고정 → 화면을 넘치고 부자연스럽게 커 보임("Get in T / ouch" 처럼 단어도 끊김). 해결 : 60px → 화면 맞춤(22~60px) 유동 축소 + 한국어 단어 유지 줄바꿈. ===================================================================== */ @media (max-width: 991px) { /* [1] 60px 고정 텍스트(제목 + 버튼) → 화면 맞춤 축소 */ #s2026010233739a54072e6 span[style*="60px"], #s20260102d73f3cbe916f5 span[style*="60px"] { font-size: clamp(22px, 6vw, 60px) !important; line-height: 1.35 !important; } /* [2] 한국어 단어가 중간에서 안 끊기도록 */ #s2026010233739a54072e6 .text-table p, #s20260102d73f3cbe916f5 .text-table p { word-break: keep-all; } /* [3] "Get in Touch" 제목 ↔ 설명 사이의 빈 여백 행(71px) 축소 */ #s20260102d73f3cbe916f5 td[style*="height:71px"] { height: 18px !important; } } /* --------------------------------------------------------------------- 모바일 전용 줄바꿈 유틸 :
는 PC 숨김 / 모바일만 표시 예) "다양한 가능성,
새로운 Solution이 열려 있습니다." --------------------------------------------------------------------- */ br.br-mo { display: none; } @media (max-width: 991px) { br.br-mo { display: inline; } } /* ===================================================================== [DIAGRAM/orbit] 모바일 2×2 원 카드 + 헤더↔원 공백 --------------------------------------------------------------------- 문제1 : 2×2 격자의 위아래 행 간격(row-gap 16px)이 넓어 보임. 문제2 : sticky 가 height:100vh + align-items:center 라 원을 "화면 중앙"에 배치 → 헤더 문구와 원 사이 큰 공백. padding 으로는 못 줄임. 해결 : 모바일은 스크롤 pin 도 꺼져 있으므로 100vh 중앙정렬을 버리고 자연스러운 세로 흐름(헤더 → 원)으로 전환 → 정상 간격. (index.html ≤768px 규칙을 덮어씀) ===================================================================== */ @media (max-width: 768px) { /* [1] 원 4개 위아래 행 간격 + 아래로 밀던 translateY 제거 */ .innovation_ai_orbit_wrap { row-gap: 0 !important; transform: none !important; } /* [2] 100vh 중앙정렬 → 자연 세로 흐름 (헤더 위, 원 아래로 정상 배치) */ .innovation_ai_orbit_container { height: auto !important; } .innovation_ai_orbit_sticky { position: static !important; height: auto !important; flex-direction: column !important; align-items: center !important; padding: 2vh 0 4vh !important; } .innovation_ai_orbit_header { position: static !important; transform: none !important; opacity: 1 !important; /* JS fade-in 의존 제거 (항상 표시) */ margin-bottom: 24px !important; /* ★ 헤더 ↔ 원 간격: 이 값만 조절하면 됨 */ } }