/* ========================================================= 모바일 반응형 (2026-06) — 햄버거 + 좌측 드로어 토글: (JS). 데스크톱(>=1024px) 영향 없음. ========================================================= */ /* 데스크톱: 모바일 전용 요소 숨김 */ .navHamburger, .navBackdrop { display: none; } #pdtCloseBtn { display: none; position: fixed; top: 10px; right: 12px; z-index: 2010; width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; background: rgba(29,58,102,0.92); color: #fff; font-size: 20px; line-height: 1; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); } /* (제품 상세 팝업 규칙은 모바일 블록(@media max-width:1023px)으로 이동 — 데스크톱은 우측 패널 유지) */ @media (max-width: 1023px) { /* 가로 스크롤(뒤죽박죽) 방지 */ html, body { max-width: 100%; overflow-x: hidden; } /* ---------- 햄버거 버튼 ---------- */ /* 미니멀 햄버거: 배경·테두리 없이 줄 3개만 (어두운 배경 대비 위해 은은한 그림자) */ .navHamburger { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; position: fixed; top: 12px; left: 12px; z-index: 1300; width: 48px; height: auto; min-height: 40px; padding: 3px 0; background: transparent; border: none; border-radius: 0; box-shadow: none; cursor: pointer; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.35)); -webkit-tap-highlight-color: transparent; } .navHamburger span { display: block; width: 28px; height: 2.5px; border-radius: 3px; background: #1d3a66; transition: transform .25s ease, opacity .2s ease; } .navHamburger .navHbLabel { margin-top: 4px; font-size: 9px; font-weight: 700; letter-spacing: 1px; line-height: 1; color: #1d3a66; } /* 메인 화면(어두운 캐러셀 배경)에서는 흰색으로 */ body:has(.index) .navHamburger span { background: #fff; } body:has(.index) .navHamburger .navHbLabel { color: #fff; } html.m-nav-open .navHamburger span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); } html.m-nav-open .navHamburger span:nth-child(2) { opacity: 0; } html.m-nav-open .navHamburger span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); } /* ---------- 백드롭 ---------- */ html.m-nav-open .navBackdrop { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 1100; } /* ---------- nav-bar 컨테이너 무력화(화면 가림 방지) ---------- */ nav-bar { position: fixed !important; top: 0; left: 0; width: 0 !important; height: 0 !important; background: transparent !important; overflow: visible !important; z-index: 1200 !important; /* 백드롭(1100)보다 위에 와야 드로어가 보임 */ } /* ---------- 좌측 메인 드로어 (내용 높이에 맞춤) ---------- */ div.sideMenu { width: 230px !important; height: auto !important; max-height: 100% !important; transform: translateX(-100%); transition: transform .28s ease; box-shadow: 2px 0 16px rgba(0,0,0,.22); z-index: 1200 !important; overflow-y: auto; padding-bottom: 8px; } html.m-nav-open div.sideMenu { transform: translateX(0); } /* 헤더 로고: 좌측 X 버튼(46px)에 가리지 않도록 우측으로 밀고 축소 */ div.sideMenu div.header { padding: 12px 14px 12px 62px !important; } div.sideMenu div.header img { max-width: 132px !important; transform: none !important; } /* 하단 큰 회사정보 블록은 모바일 드로어에서 숨김(빈 공간 제거) */ div.sideMenu div.info { display: none !important; } /* 메뉴 행: 적당한 터치 높이 + 화살표 우측 정렬 */ div.sideMenu div.mainMenus div.menuList { height: 46px; } div.sideMenu div.mainMenus div.menuList h1 { display: flex !important; align-items: center; justify-content: space-between; line-height: 46px; font-size: 13.5px; padding-right: 16px; } div.sideMenu div.mainMenus div.menuList h1 i { float: none !important; padding-right: 0 !important; line-height: 1 !important; font-size: 16px; } div.sideMenu div.mainMenus div.menuList:last-child { border-bottom: 0; } /* ---------- 서브메뉴: 드로어 옆에 함께 슬라이드 ---------- */ div.sideSubMenu { left: 230px !important; width: 150px !important; height: auto !important; max-height: 100% !important; transform: translateX(-420px); transition: transform .28s ease; z-index: 1190 !important; box-shadow: 2px 0 16px rgba(0,0,0,.18); } html.m-nav-open div.sideSubMenu { transform: translateX(0); } div.sideSubMenu div.title { height: 56px !important; padding-top: 16px !important; } div.sideSubMenu div.leftBanner { display: none; } /* ---------- 본문: 전체 폭 ---------- */ div.main-content { padding: 12px 12px 28px 12px !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; height: auto !important; overflow-x: hidden; } div.main-content .row { margin-left: 0 !important; margin-right: 0 !important; } /* 콘텐츠 영역 공통 좌측 패딩(40px) 제거 — 좌측 빈 여백 해결 */ div.intro, div.business, div.product, div.cr, div.pr { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 24px !important; } /* 가운데 정렬용 오프셋 칼럼(offset-1+col-10 등) → 전체 폭(우측 빈 공간 제거) */ div.main-content [class*="col-xs-offset-"] { margin-left: 0 !important; } div.main-content .col-xs-offset-1.col-xs-10, div.main-content .col-xs-offset-1.col-xs-8, div.main-content .col-xs-offset-2.col-xs-8 { width: 100% !important; } div.main-content img { max-width: 100%; height: auto; } div.main-content table { max-width: 100%; } /* 타이틀/리드 폰트 축소 */ .pageTitle h1 { font-size: clamp(20px, 2.6vw, 30px) !important; margin: 0 !important; line-height: 1.2 !important; } .pageTitle .decoLine { display: none !important; } .pageTitle .pageTitleEn { margin: 0 !important; align-self: baseline; } .cedTitle { font-size: clamp(22px, 3.2vw, 34px) !important; } .cedTagEn { font-size: clamp(17px, 2.4vw, 28px) !important; white-space: normal !important; } .cedLead { font-size: 15px !important; } .cedLead br { display: none; } /* ==================================================== 사업분야(지그재그/사업영역) — 세로 스택 + 이미지·장식 보정 ==================================================== */ .bizZig, .bizZig.rev, .bizIndRow, .bizIndRow.rev, .bizIntro { flex-direction: column !important; gap: 20px !important; margin: 26px 0 !important; } .bizZigText, .bizZigMedia, .bizIndText, .bizIndMedia, .bizIntroText, .bizIntroImg { flex: 1 1 100% !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; } .bizZigMedia { min-height: 0 !important; position: relative !important; overflow: hidden !important; } .bizZigMedia > img { position: static !important; width: 100% !important; height: clamp(180px, 26vw, 320px) !important; aspect-ratio: auto !important; object-fit: cover !important; } .bizIndMedia { transform: none !important; position: relative !important; min-height: 0 !important; aspect-ratio: auto !important; } .bizIndMedia > img { position: static !important; width: 100% !important; height: clamp(180px, 26vw, 320px) !important; aspect-ratio: auto !important; object-fit: cover !important; } .bizGreenSlash { display: none !important; } div.main-content .row .col-xs-3.paddingWidth5 { width: 50% !important; float: left !important; margin-bottom: 14px; } .bizZigText h3, .bizIndTitle { font-size: clamp(18px, 2.4vw, 26px) !important; line-height: 1.35 !important; } .bizIntroTitle { font-size: clamp(18px, 2.4vw, 24px) !important; line-height: 1.4 !important; } /* ==================================================== 조직도(orgChart) — 가로 잘림 방지: 세로 스택 ==================================================== */ .intro.org .orgChart { overflow: visible; margin-top: 8px; position: relative; } /* 어수선한 연결선/배지 모두 제거(깔끔한 카드 스택) */ .intro.org .orgChart *::before, .intro.org .orgChart *::after { display: none !important; } .intro.org .orgBadge { display: none !important; } /* 중앙 세로 연결선: z-index -1 로 카드 "뒤"에 깔기(틈에서만 보임) */ .intro.org .orgChart::before { content: ""; position: absolute; left: 50%; top: 64px; bottom: 14px; width: 2px; transform: translateX(-50%); background: #cfd8e3; z-index: -1; pointer-events: none; } .intro.org .orgTopWrap { padding-bottom: 0 !important; gap: 10px !important; } .intro.org .orgStaffRow { flex-direction: column !important; gap: 10px !important; align-items: stretch !important; min-height: 0 !important; margin: 10px 0 !important; } .intro.org .orgStaffUnit, .intro.org .orgStaffRow > .orgStaffUnit:nth-child(2) { flex: 1 1 auto !important; width: 100% !important; } .intro.org .orgCols { flex-direction: column !important; gap: 10px !important; margin-top: 10px !important; } .intro.org .orgCol { padding-top: 0 !important; } .intro.org .orgCol > .orgUnit { margin-bottom: 8px !important; } .intro.org .orgCard, .intro.org .orgItem { width: 100% !important; box-sizing: border-box !important; } .intro.org .orgCard { padding: 11px 16px !important; } .intro.org .orgChart .orgCard { background-color: #fbfcfe; } .intro.org .orgChart .orgCard.orgStaffGreen { background-color: #f3f9e8; } .intro.org .orgCardTitle { font-size: 14px !important; } .intro.org .orgSubList { gap: 6px !important; } .intro.org .content > .row > .col-xs-8, .intro.org .content > .row > .col-xs-4 { width: 100% !important; float: none !important; } /* ==================================================== 채용정보 탭(jobMenu) — 4개를 한 줄 균등 분할(잘림 방지) ==================================================== */ div.job div.jobMenu ul { gap: 2px !important; flex-wrap: nowrap !important; } div.job div.jobMenu ul li { flex: 1 1 0 !important; min-width: 0 !important; text-align: center; padding: 12px clamp(3px, 1.4vw, 14px) !important; font-size: clamp(11px, 3.3vw, 15px) !important; letter-spacing: 0 !important; white-space: nowrap !important; line-height: 1.2 !important; } div.job div.jobMenu ul li.active:after { left: 8px !important; right: 8px !important; } /* 제품/사업 하위 탭(subMenus): 한 줄 유지 + 글자 크기 자동 축소(clamp) */ div.product div.subMenus ul, div.business div.subMenus ul { flex-wrap: nowrap !important; gap: 1px !important; } div.product div.subMenus ul li, div.business div.subMenus ul li { flex: 1 1 0 !important; min-width: 0 !important; text-align: center; overflow: hidden; padding: 11px clamp(2px, 1vw, 14px) !important; font-size: clamp(9.5px, 2.7vw, 14px) !important; white-space: nowrap !important; letter-spacing: 0 !important; } div.product div.subMenus ul li.active:after, div.business div.subMenus ul li.active:after { left: 6px !important; right: 6px !important; } /* 채용방식 카드: 모바일에서 1열(전체폭) — 좁아서 글이 길어지는 문제 해결 */ .recTypeGrid2 .recTypeCard2 { flex: 1 1 100% !important; } /* 브레드크럼: 모바일에서 제목과 겹치지 않게 제목 아래 정적 배치 */ div.pageTitle { padding-top: 64px !important; padding-bottom: 12px !important; padding-left: 0 !important; display: flex !important; flex-wrap: wrap; align-items: baseline; column-gap: 12px; } /* 브레드크럼: 상단 우측(햄버거 옆 빈 띠)으로 올림 */ div.breadCrumb { position: absolute !important; top: 18px !important; right: 12px !important; left: 64px !important; height: auto !important; margin: 0 !important; z-index: 5; } div.breadCrumb ul { float: none !important; display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 2px 4px; padding: 0; } div.breadCrumb ul li { float: none !important; margin-right: 0 !important; white-space: nowrap; font-size: clamp(10px, 2.9vw, 13px); } /* ==================================================== 제품 카드/상세 패널 — 카드 축소 + 상세 패널 강제 표시 ==================================================== */ .product .pdtCard { flex-direction: row !important; align-items: center !important; gap: 12px !important; padding: 12px 14px !important; } .product .pdtCardImg { flex: 0 0 80px !important; width: 80px !important; padding: 8px !important; align-self: center; } .product .pdtCardImg img { height: 46px !important; } .product .pdtCardBody { flex: 1 1 auto !important; min-width: 0 !important; } .product .pdtCardBody h3 { font-size: clamp(15px, 1.8vw, 18px) !important; margin: 4px 0 5px !important; } .product .pdtCardBody ul li { font-size: 12.5px !important; line-height: 1.5 !important; } .product .pdtCardTag { font-size: 11px !important; } .product .pdtCardGo { width: 32px !important; height: 32px !important; align-self: center; } /* 제품 상세: 전체화면 오버레이(팝업) — 목록 맨 아래로 안 내려감 */ .product .pdtArea4 { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; height: auto !important; max-height: none !important; margin: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 2000 !important; background: #fff !important; border-radius: 0 !important; } html.pdt-open, html.pdt-open body { overflow: hidden !important; } /* 넓은 사양 표: 가로 스크롤(잘림 방지) */ .product .pdtArea4 .desc { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } .product .pdtArea4 .desc table { max-width: none !important; width: auto !important; } /* ==================================================== 홈(캐러셀 + indexLinks) — 세로 스택 ==================================================== */ div.padding0.index { margin: 0 -12px !important; } div.index div.content.imgSlide { position: static !important; left: auto !important; right: auto !important; top: auto; bottom: auto; width: 100% !important; height: max(300px, calc(100vh - 240px)) !important; padding: 0 !important; margin: 0 !important; overflow: hidden; } div.index div.content.imgSlide #carousel-generic, div.index div.content.imgSlide .carousel-inner, div.index div.content.imgSlide .item { height: 100% !important; } div.index div.content.imgSlide .item img { position: absolute !important; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; } ul.indexLinks { position: static !important; top: auto !important; right: auto !important; left: auto !important; width: 100% !important; height: auto !important; margin: 0; padding: 0; } ul.indexLinks li { width: 100% !important; height: auto !important; } ul.indexLinks li a { display: block !important; height: auto !important; padding: 18px 16px !important; text-align: center !important; } ul.indexLinks li a img { float: none !important; width: 46px !important; height: 46px !important; max-width: 46px !important; object-fit: contain; margin: 0 auto 8px auto !important; display: block; } ul.indexLinks li a h2 { text-align: center !important; margin: 0 0 5px 0 !important; font-size: clamp(14px, 1.7vw, 18px) !important; } ul.indexLinks li a h3 { text-align: center !important; margin: 0 !important; font-size: clamp(11px, 1.5vw, 14px) !important; line-height: 1.45 !important; } .carousel-caption { left: 6% !important; right: 6% !important; top: auto !important; bottom: 62px !important; text-align: left; } .carousel-caption h2 { font-size: clamp(20px, 4.5vw, 46px) !important; line-height: 1.25 !important; } .carousel-caption p { font-size: clamp(12px, 1.7vw, 17px) !important; line-height: 1.5 !important; } /* 모바일: 디자인용 nowrap 해제 → 캡션 문구가 화면 폭에 맞춰 줄바꿈(우측 잘림 방지) */ .carousel-caption .capLine { white-space: normal !important; } .carousel-caption p { word-break: keep-all; overflow-wrap: anywhere; } .carousel-caption { max-width: none !important; } /* 좌우 화살표: 숨기지 않고 아래로 25% 내림(50% -> 75%) */ .index .carousel .idxNav { top: auto !important; bottom: 12px !important; } div.index > ul.indexLinks { margin: 0 !important; } /* 우측 사이드바 배너는 모바일에서 숨김 */ side-bar, body > side-bar { display: none !important; } } /* 아주 작은 폰(≤400px) */ @media (max-width: 400px) { div.sideMenu { width: 212px !important; } div.sideSubMenu { left: 212px !important; width: 142px !important; } .carousel-caption h2 { font-size: 18px !important; } } /* ========================================================= 소형 데스크톱 (1024~1480px): 우측 사이드바가 숨겨지는 구간 — JS(mainContentStyle)가 우측 190px 패딩을 그대로 남겨 본문 폭이 585px로 좁아지면서 2단(사업분야 지그재그/사업영역)이 세로로 깨짐. 사이드바가 없으므로 우측 패딩을 회수해 2단 폭(>=600px) 확보. */ @media (min-width: 1024px) and (max-width: 1189px) { div.main-content { padding-right: 24px !important; } } /* ========================================================= 태블릿 / 소형 데스크톱 (769~1480px) — 본문 가독 폭 중앙정렬 + 드로어·폰트·이미지 확대 + 홈 2열 ========================================================= */ @media (min-width: 769px) and (max-width: 1023px) { /* 콘텐츠 페이지: 가독 폭으로 중앙 정렬(좌우 과도한 늘어남 방지) */ div.main-content div.intro, div.main-content div.business, div.main-content div.product, div.main-content div.cr, div.main-content div.pr { max-width: 920px !important; margin-left: auto !important; margin-right: auto !important; } div.main-content { padding-left: 22px !important; padding-right: 22px !important; } /* 드로어 조금 크게(태블릿 터치) */ div.sideMenu { width: 300px !important; } div.sideMenu div.header { padding: 16px 18px 16px 64px !important; } div.sideMenu div.header img { max-width: 168px !important; } div.sideMenu div.mainMenus div.menuList { height: 52px; } div.sideMenu div.mainMenus div.menuList h1 { font-size: 15px; line-height: 52px; } div.sideSubMenu { left: 300px !important; width: 220px !important; transform: translateX(-560px); } div.sideSubMenu div.list h3 { font-size: 14px; } /* 햄버거/닫기 버튼 조금 크게 */ .navHamburger { width: 56px; height: auto; } #pdtCloseBtn { width: 46px; height: 46px; font-size: 22px; } /* 홈: 캐러셀 크게 + 하단 메뉴 2열 */ div.index div.content.imgSlide { height: max(360px, calc(100vh - 220px)) !important; } ul.indexLinks { display: flex !important; flex-wrap: wrap !important; } ul.indexLinks li { width: 50% !important; box-sizing: border-box; } /* 사업분야 미디어 이미지 크게 */ .bizZigMedia > img, .bizIndMedia > img { height: clamp(240px, 30vw, 360px) !important; } /* 제품 카드 이미지 크게 */ .product .pdtCardImg { flex-basis: 112px !important; width: 112px !important; } .product .pdtCardImg img { height: 66px !important; } /* 제품 상세 팝업 본문도 가독 폭 중앙정렬 */ .product .pdtArea4 .pdtA4Body { max-width: 760px !important; margin: 0 auto !important; } } /* 상단 제목과 페이지타이틀 선 사이 작은화면 여백 통일(8px): 윤리경영/인증현황/카탈로그/연락처/고객문의/공지사항 */ @media (max-width: 1023px) { .pr.mgmt div.content > .row.marginTop25, .pr.cert div.content > .row.marginTop25, .pr.catalog div.content > .row.marginTop25, .cr.contact div.content > .row.marginTop25 { margin-top: 8px !important; } .cr.inquiry div.content > .recTitle:first-of-type { margin-top: 8px !important; } .cr.notice div.content > .recTitle.ntHeadTitle { margin-top: 8px !important; } }