/* ===================================================== BUSINESS PAGES — RESPONSIVE OVERRIDES (인라인 style 우선순위 극복을 위해 !important 사용) ===================================================== */ /* 캐러셀 네비게이션 라인 — 모바일만 표시 */ .dx-nav-line { display: none; } /* 핵심 역량 더보기 버튼 — PC 숨김 */ #kfMoreBtnWrap, #sfKfMoreBtnWrap, #aiKfMoreBtnWrap { display: none; } /* 파트너 스트립 그라데이션 완전 제거 */ .dx-partner-strip::before, .dx-partner-strip::after { content: none !important; display: none !important; } /* PC: 파트너 스트립 1줄만 표시 */ .dx-partner-strip .partner-track--r { display: none; } /* ===================================================== TABLET (≤1024px) ===================================================== */ @media (max-width: 1024px) { /* 섹션 공통 패딩 */ #section-digital, #section-smart, #section-web3d, #section-koetex, #section-xr { padding: 100px 40px 48px !important; } /* 인트로 2fr 3fr 그리드 → 균등 */ #section-digital > div, #section-smart > div, #section-web3d > div, #section-koetex > div, #section-xr > div { grid-template-columns: 1fr 1fr !important; gap: 32px !important; } /* KF 카드: 5col → 3col */ #kfCarousel, #sfKfCarousel, #aiKfCarousel, #xrKfCarousel, #w3dKfCarousel { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: auto !important; } .kf-card { padding: 20px !important; } /* 비즈니스 탭 sticky top */ #platformTabsWrap { top: 60px; } /* news-grid case cards: news.css에서 이미 처리 */ } /* ===================================================== MOBILE (≤767px) ===================================================== */ @media (max-width: 767px) { /* 섹션 공통 패딩 */ #section-digital, #section-smart, #section-web3d { padding: 72px 20px 40px !important; } #section-koetex { padding: 72px 20px 80px !important; } /* 솔루션·구축사례 섹션 패딩 */ .dx-panel-section { padding: 40px 20px !important; } .dx-panel-section:has(#caseTrack) { padding-bottom: 80px !important; } /* 인트로 그리드 → 1열 세로 스택 */ #section-digital > div, #section-smart > div, #section-web3d > div, #section-koetex > div { grid-template-columns: 1fr !important; gap: 24px !important; } /* 인트로 우측 이미지 패널 숨김 (오버플로 방지) */ #section-digital > div > div:last-child, #section-smart > div > div:last-child, #section-web3d > div > div:last-child, #section-koetex > div > div:last-child { display: none !important; } /* 제목 폰트 */ #section-digital h2, #section-smart h2, #section-koetex h2 { font-size: 34px !important; text-align: center !important; } #section-web3d h2 { font-size: 28px !important; } /* 섹션 제목 44px → 26px */ #panel-digital p[style*="44px"], #panel-smart p[style*="44px"], #panel-koetex p[style*="44px"] { font-size: 26px !important; } /* KF 카드: 5col → 2col */ #kfCarousel, #sfKfCarousel, #aiKfCarousel { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; padding: 0 20px !important; } .kf-card { padding: 16px !important; min-height: 0 !important; } /* SF/AI KF 카드 (kf-card 클래스 없음) — DT와 동일 패딩 */ #sfKfCarousel > div, #aiKfCarousel > div { padding: 16px !important; min-height: 0 !important; } /* ===== SF/AI 구성도 모바일 레이아웃 ===== */ #sfProcSection, #aiProcSection { padding: 40px 20px !important; } /* 내부 박스 (border:1px solid #d8d8d8) */ #sfProcSection > div > div, #aiProcSection > div > div { padding: 20px !important; border-radius: 10px !important; } /* 설명 텍스트 */ #sfProcSection > div > div > p, #aiProcSection > div > div > p { font-size: 14px !important; margin-bottom: 12px !important; line-height: 1.6 !important; } /* 내부 flex → 세로 스택 */ #sfProcSection > div > div > div, #aiProcSection > div > div > div { flex-direction: column !important; gap: 10px !important; } /* 왼쪽 패널 (Input/Platform/Output) */ #sfProcSection > div > div > div > div:first-child, #aiProcSection > div > div > div > div:first-child { padding: 20px !important; border-radius: 8px !important; gap: 10px !important; flex: none !important; } /* 오른쪽 패널 → 2열 가로 배치 */ #sfProcSection > div > div > div > div:last-child, #aiProcSection > div > div > div > div:last-child { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; } /* 오른쪽 이미지 카드 — 50% 너비 */ #sfProcSection > div > div > div > div:last-child > div, #aiProcSection > div > div > div > div:last-child > div { flex: 0 0 calc(50% - 5px) !important; border-radius: 8px !important; min-height: 140px !important; padding: 16px !important; } /* 오른쪽 카드 오버레이 레이어 radius 일치 */ #sfProcSection > div > div > div > div:last-child > div > div:first-child, #aiProcSection > div > div > div > div:last-child > div > div:first-child { border-radius: 6px !important; } /* 오른쪽 카드 SVG 아이콘 숨김 */ #sfProcSection > div > div > div > div:last-child svg, #aiProcSection > div > div > div > div:last-child svg { display: none !important; } /* 내부 그리드 셀 (border-radius:12px, 14px) — 여백·라운드 축소 */ #sfProcSection div[style*="border-radius:12px"], #sfProcSection div[style*="border-radius:14px"], #aiProcSection div[style*="border-radius:12px"], #aiProcSection div[style*="border-radius:14px"] { border-radius: 6px !important; padding: 10px !important; word-break: keep-all; } #sfProcSection div[style*="border-radius:12px"] p, #sfProcSection div[style*="border-radius:14px"] p, #aiProcSection div[style*="border-radius:12px"] p, #aiProcSection div[style*="border-radius:14px"] p { line-height: 1.4; } /* 구성도 섹션 패딩 */ #procSection { padding: 40px 20px !important; } /* 구성도 내부 박스 패딩 축소 */ #procBox { padding: 20px !important; border-radius: 10px !important; } /* 구성도 2컬럼 → 1컬럼 세로 */ #procFlex { flex-direction: column !important; gap: 10px !important; } /* 구성도 왼쪽 패널 패딩·라운드·간격 */ #procFlex > div:first-child { padding: 20px !important; border-radius: 8px !important; gap: 10px !important; } /* 구성도 우측 컨테이너: 2열 가로 배치, 갭 10 */ #procFlex > div:last-child { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; } /* 구성도 우측 이미지 카드: 50% 너비, 라운드 8 */ #procFlex > div:last-child > div { flex: 0 0 calc(50% - 5px) !important; border-radius: 8px !important; min-height: 140px !important; } /* 구성도 우측 카드 dim 오버레이 라운드 일치 */ #procFlex > div:last-child > div > div:first-child { border-radius: 8px !important; } /* 구성도 우측 카드 아이콘 숨김 */ #procFlex > div:last-child svg { display: none !important; } /* 구성도 내부 카드 라운드·패딩·줄바꿈 */ #procFlex div[style*="border-radius:12px"], #procFlex div[style*="border-radius:14px"] { border-radius: 6px !important; padding: 10px !important; word-break: keep-all; } #procFlex div[style*="border-radius:12px"] p, #procFlex div[style*="border-radius:14px"] p { line-height: 1.4; } /* 프로세스 다이어그램 — 가로 스크롤 허용 */ #proc { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 파트너 로고 스트립 — 기존 그대로 동작 */ /* 탭 래퍼 — 모바일 GNB(60px) 바로 아래 fixed */ #platformTabsWrap.is-fixed { position: fixed !important; top: 60px !important; z-index: 90 !important; } /* 솔루션 & 구축사례 — 스와이프 캐러셀 */ #solutionTrack, #sfSolutionTrack, #aiSolutionTrack, #caseTrack, #sfCaseTrack, #aiCaseTrack { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 6px !important; margin: 0 -20px; padding: 0 20px 24px; } #solutionTrack::-webkit-scrollbar, #sfSolutionTrack::-webkit-scrollbar, #aiSolutionTrack::-webkit-scrollbar, #caseTrack::-webkit-scrollbar, #sfCaseTrack::-webkit-scrollbar, #aiCaseTrack::-webkit-scrollbar { display: none; } #solutionTrack > div, #sfSolutionTrack > div, #aiSolutionTrack > div { flex: 0 0 300px !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; border-radius: 10px !important; } /* 구축사례 카드 — 전체 너비 16:9 */ #caseTrack > div, #sfCaseTrack > div, #aiCaseTrack > div { flex: 0 0 100% !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; aspect-ratio: 16 / 9 !important; min-height: unset !important; overflow: hidden; position: relative !important; border-radius: 10px !important; } /* 구축사례 캐러셀 — 모바일 호버 효과 제거 (translateY가 overflow clip 유발) */ #caseTrack .case-card:hover, #sfCaseTrack .case-card:hover, #aiCaseTrack .case-card:hover { transform: none !important; box-shadow: none !important; } #caseTrack .case-card:hover .case-card-btn, #sfCaseTrack .case-card:hover .case-card-btn, #aiCaseTrack .case-card:hover .case-card-btn { background: rgba(255, 255, 255, 0.15) !important; } #caseTrack .case-card:hover .case-card-btn img, #sfCaseTrack .case-card:hover .case-card-btn img, #aiCaseTrack .case-card:hover .case-card-btn img { transform: none !important; filter: none !important; } /* 구축사례 카드 날짜 — 모바일 숨김 */ #caseTrack .case-card > div:last-child > span, #sfCaseTrack .case-card > div:last-child > span, #aiCaseTrack .case-card > div:last-child > span { display: none !important; } /* 날짜 숨김 후 버튼 오른쪽 유지 */ #caseTrack .case-card > div:last-child, #sfCaseTrack .case-card > div:last-child, #aiCaseTrack .case-card > div:last-child { justify-content: flex-end !important; } /* 구축사례 원형 버튼 — 뉴스 카드 버튼과 동일 크기 */ #caseTrack .case-card-btn, #sfCaseTrack .case-card-btn, #aiCaseTrack .case-card-btn { width: 36px !important; height: 36px !important; } #caseTrack .case-card-btn img, #sfCaseTrack .case-card-btn img, #aiCaseTrack .case-card-btn img { width: 10px !important; } /* 구축사례 카드 내부 여백·버튼 위치 */ #caseTrack > div, #sfCaseTrack > div, #aiCaseTrack > div { padding: 24px !important; } #caseTrack > div > div:last-child, #sfCaseTrack > div > div:last-child, #aiCaseTrack > div > div:last-child { position: absolute !important; bottom: 24px !important; left: 24px !important; right: 24px !important; margin-top: 0 !important; } #caseTrack > div > p, #sfCaseTrack > div > p, #aiCaseTrack > div > p { font-size: 20px !important; overflow: hidden; } /* 구축사례 더보기 버튼 — 모바일에서도 표시 */ #caseMoreBtnWrap { display: block !important; margin-top: 24px !important; } /* SF/AI 솔루션·구축사례 섹션 패딩 */ section:has(#sfSolutionTrack), section:has(#aiSolutionTrack) { padding: 40px 20px !important; } section:has(#sfCaseTrack), section:has(#aiCaseTrack) { padding: 40px 20px 80px !important; } /* SF/AI 구축사례 — 페이지2 카드 모바일에서 표시 (캐러셀 전체 스와이프) */ #sfCaseTrack .sf-case-page2, #aiCaseTrack .ai-case-page2 { display: flex !important; } #sfCaseTrack .sf-case-page2 > div:last-child > span, #aiCaseTrack .ai-case-page2 > div:last-child > span { display: none !important; } #sfCaseTrack .sf-case-page2 > div:last-child, #aiCaseTrack .ai-case-page2 > div:last-child { justify-content: flex-end !important; } /* 캐러셀 네비게이션 라인 */ .dx-nav-line { display: block; position: relative; width: 120px; height: 4px; margin: 4px auto 0; background: rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; } .dx-nav-line-thumb { position: absolute; top: 0; left: 0; height: 100%; background: #e32d21; border-radius: 2px; } /* 통계 숫자/레이블 */ .dx-stat-num { font-size: 28px !important; white-space: nowrap !important; } .dx-stat-label { font-size: 14px !important; line-height: 1.4 !important; } .stat-plus { display: none; } /* 핵심 역량 섹션 제목 */ .dx-kf-heading { text-align: center !important; padding: 0 20px !important; word-break: keep-all !important; } /* 핵심 역량 카드 텍스트 — 의미 단위 줄내림 */ .kf-card p { word-break: keep-all; } /* 인트로·구성도·서비스 카드·솔루션 전체 텍스트 — 의미 단위 줄내림 */ #section-digital, #section-smart, #section-web3d, #section-koetex, #procSection, #solutionTrack, #sfSolutionTrack, #aiSolutionTrack { word-break: keep-all; } /* 핵심 역량 카드 — 4개만 표시, 5번째 이후 숨김 */ #kfCarousel .kf-card:nth-child(n+5) { display: none !important; } #kfCarousel.kf-expanded .kf-card:nth-child(n+5) { display: flex !important; } #sfKfCarousel > div:nth-child(n+5) { display: none !important; } #sfKfCarousel.kf-expanded > div:nth-child(n+5) { display: flex !important; } #aiKfCarousel > div:nth-child(n+5) { display: none !important; } #aiKfCarousel.kf-expanded > div:nth-child(n+5) { display: flex !important; } /* 솔루션/구축사례 캐러셀 — 비활성 카드 90% + 투명도 */ #caseTrack.sol-init > div, #sfCaseTrack.sol-init > div, #aiCaseTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #caseTrack.sol-init > div.sol-active, #sfCaseTrack.sol-init > div.sol-active, #aiCaseTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } /* 솔루션 캐러셀 — 비활성 카드 90% + 투명도 */ #solutionTrack.sol-init > div, #sfSolutionTrack.sol-init > div, #aiSolutionTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #solutionTrack.sol-init > div.sol-active, #sfSolutionTrack.sol-init > div.sol-active, #aiSolutionTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } /* 인쇄·디지털·차세대 솔루션 캐러셀 — 비활성 카드 scale·opacity */ #manualSolutionTrack.sol-init > div, #tcSolutionTrack.sol-init > div, #webSolutionTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #manualSolutionTrack.sol-init > div.sol-active, #tcSolutionTrack.sol-init > div.sol-active, #webSolutionTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } /* 인쇄·디지털·차세대 구축사례 캐러셀 — 비활성 카드 scale·opacity */ /* 번역 솔루션·케이스 캐러셀 — 비활성 카드 scale·opacity */ #tranSolutionTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #tranSolutionTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } #tranCaseTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #tranCaseTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } #printCaseTrack.sol-init > div, #tcCaseTrack.sol-init > div, #webCaseTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #printCaseTrack.sol-init > div.sol-active, #tcCaseTrack.sol-init > div.sol-active, #webCaseTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } /* 더보기 버튼 */ #kfMoreBtnWrap, #sfKfMoreBtnWrap, #aiKfMoreBtnWrap { display: block; margin-top: 20px; text-align: center; } #kfMoreBtn, #sfKfMoreBtn, #aiKfMoreBtn { font-family: 'Pretendard-Bold', 'Pretendard', sans-serif; font-size: 15px; font-weight: 700; color: #111; background: #fff; border: 1.5px solid rgba(0, 0, 0, 0.12); border-radius: 100px; padding: 13px 40px; cursor: pointer; } /* 파트너 스트립 — 2행 스크롤 (main.html 방식) */ .dx-partner-strip { margin-top: 0 !important; overflow: hidden !important; padding-bottom: 80px !important; } .dx-partner-strip::before, .dx-partner-strip::after { display: none !important; } /* 인라인 그라데이션 오버레이 div 숨김 */ .dx-partner-strip > div:not(.partner-rows) { display: none !important; } .dx-partner-strip .partner-track { padding: 0 !important; } .dx-partner-strip .partner-track--r { display: flex !important; } .dx-partner-strip .partner-logo { width: 120px !important; height: 40px !important; padding: 6px !important; } /* news-tabs 중앙정렬 */ .news-tabs-wrap { overflow-x: visible; } .news-tabs { justify-content: center; min-width: unset; } .news-tab { flex: 1; white-space: nowrap; text-align: center; padding: 17px 0; } /* 포트폴리오 탭 3×2 그리드 */ #portTabs { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 6px !important; padding: 4px !important; } #portTabs .news-tab { flex: unset !important; text-align: center !important; padding: 12px 4px !important; white-space: normal !important; font-size: 13px !important; line-height: 1.3 !important; } /* ===== XR 페이지 모바일 스타일 ===== */ /* XR 인트로 섹션 패딩 */ #section-xr { padding: 72px 20px 40px !important; } /* XR 인트로 그리드 → 1열 */ #section-xr > div { grid-template-columns: 1fr !important; gap: 24px !important; } /* XR 인트로 우측 이미지 숨김 */ #section-xr > div > div:last-child { display: none !important; } /* XR 인트로 h2 제목 */ #section-xr h2 { font-size: 34px !important; text-align: center !important; word-break: keep-all; } /* XR/W3D 패널 섹션 제목 44px → 26px + 중앙정렬 */ #panel-xr p[style*="44px"], #panel-web3d p[style*="44px"] { font-size: 26px !important; text-align: center !important; word-break: keep-all; padding: 0 20px; line-height: 1.4 !important; } /* XR/W3D KF 카드 그리드 2열 */ #xrKfCarousel, #w3dKfCarousel { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; padding: 0 20px !important; } /* XR/W3D KF 카드 패딩·최소높이 */ #xrKfCarousel > div, #w3dKfCarousel > div { padding: 16px !important; min-height: 0 !important; } /* XR/W3D KF 카드 — 4개만 표시 */ #xrKfCarousel > div:nth-child(n+5) { display: none !important; } #xrKfCarousel.kf-expanded > div:nth-child(n+5) { display: flex !important; } #w3dKfCarousel > div:nth-child(n+5) { display: none !important; } #w3dKfCarousel.kf-expanded > div:nth-child(n+5) { display: flex !important; } /* XR/W3D KF 더보기 버튼 */ #xrKfMoreBtnWrap, #w3dKfMoreBtnWrap { display: block !important; margin-top: 20px; text-align: center; } /* XR/W3D 구성도 섹션 패딩 */ #xrProcSection, #w3dProcSection { padding: 40px 20px !important; } /* 내부 박스 */ #xrProcSection > div > div, #w3dProcSection > div > div { padding: 20px !important; border-radius: 10px !important; } /* 설명 텍스트 */ #xrProcSection > div > div > p, #w3dProcSection > div > div > p { font-size: 14px !important; margin-bottom: 12px !important; line-height: 1.6 !important; } /* 내부 flex → 세로 스택 */ #xrProcSection > div > div > div, #w3dProcSection > div > div > div { flex-direction: column !important; gap: 10px !important; } /* 왼쪽 패널 */ #xrProcSection > div > div > div > div:first-child, #w3dProcSection > div > div > div > div:first-child { padding: 20px !important; border-radius: 8px !important; gap: 10px !important; flex: none !important; } /* 오른쪽 패널 → 2열 가로 */ #xrProcSection > div > div > div > div:last-child, #w3dProcSection > div > div > div > div:last-child { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; } /* 오른쪽 이미지 카드 — 50% 너비 */ #xrProcSection > div > div > div > div:last-child > div, #w3dProcSection > div > div > div > div:last-child > div { flex: 0 0 calc(50% - 5px) !important; border-radius: 8px !important; min-height: 140px !important; padding: 16px !important; } /* 오른쪽 카드 오버레이 radius */ #xrProcSection > div > div > div > div:last-child > div > div:first-child, #w3dProcSection > div > div > div > div:last-child > div > div:first-child { border-radius: 6px !important; } /* 오른쪽 카드 아이콘 숨김 */ #xrProcSection > div > div > div > div:last-child svg, #w3dProcSection > div > div > div > div:last-child svg { display: none !important; } /* 내부 그리드 셀 radius·padding */ #xrProcSection div[style*="border-radius:12px"], #xrProcSection div[style*="border-radius:14px"], #w3dProcSection div[style*="border-radius:12px"], #w3dProcSection div[style*="border-radius:14px"] { border-radius: 6px !important; padding: 10px !important; word-break: keep-all; } #xrProcSection div[style*="border-radius:12px"] p, #xrProcSection div[style*="border-radius:14px"] p, #w3dProcSection div[style*="border-radius:12px"] p, #w3dProcSection div[style*="border-radius:14px"] p { line-height: 1.4; } /* XR/W3D 솔루션 — 스와이프 캐러셀 */ #xrSolutionTrack, #w3dSolutionTrack { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 6px !important; margin: 0 -20px; padding: 0 20px 24px; } #xrSolutionTrack::-webkit-scrollbar, #w3dSolutionTrack::-webkit-scrollbar { display: none; } #xrSolutionTrack > div, #w3dSolutionTrack > div { flex: 0 0 300px !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; border-radius: 10px !important; } /* XR/W3D 솔루션 비활성 카드 */ #xrSolutionTrack.sol-init > div, #w3dSolutionTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #xrSolutionTrack.sol-init > div.sol-active, #w3dSolutionTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } /* XR/W3D 구축사례 — 스와이프 캐러셀 */ #xrCaseTrack, #w3dCaseTrack { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 6px !important; margin: 0 -20px; padding: 0 20px 24px; } #xrCaseTrack::-webkit-scrollbar, #w3dCaseTrack::-webkit-scrollbar { display: none; } #xrCaseTrack > div, #w3dCaseTrack > div { flex: 0 0 100% !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; aspect-ratio: 16 / 9 !important; min-height: unset !important; overflow: hidden; position: relative !important; border-radius: 10px !important; } /* 구축사례 카드 호버 효과 제거 */ #xrCaseTrack .case-card:hover, #w3dCaseTrack .case-card:hover { transform: none !important; box-shadow: none !important; } #xrCaseTrack .case-card:hover .case-card-btn, #w3dCaseTrack .case-card:hover .case-card-btn { background: rgba(255,255,255,0.15) !important; } #xrCaseTrack .case-card:hover .case-card-btn img, #w3dCaseTrack .case-card:hover .case-card-btn img { transform: none !important; filter: none !important; } /* 구축사례 날짜 숨김, 버튼 오른쪽 정렬 */ #xrCaseTrack .case-card > div:last-child > span, #w3dCaseTrack .case-card > div:last-child > span { display: none !important; } #xrCaseTrack .case-card > div:last-child, #w3dCaseTrack .case-card > div:last-child { justify-content: flex-end !important; } #xrCaseTrack .case-card-btn, #w3dCaseTrack .case-card-btn { width: 36px !important; height: 36px !important; } #xrCaseTrack .case-card-btn img, #w3dCaseTrack .case-card-btn img { width: 10px !important; } /* 카드 내부 패딩·버튼 위치 */ #xrCaseTrack > div, #w3dCaseTrack > div { padding: 24px !important; } #xrCaseTrack > div > div:last-child, #w3dCaseTrack > div > div:last-child { position: absolute !important; bottom: 24px !important; left: 24px !important; right: 24px !important; margin-top: 0 !important; } #xrCaseTrack > div > p, #w3dCaseTrack > div > p { font-size: 20px !important; overflow: hidden; } /* 구축사례 비활성 카드 */ #xrCaseTrack.sol-init > div, #w3dCaseTrack.sol-init > div { transform: scale(0.9); opacity: 0.45; transition: transform 0.3s ease, opacity 0.3s ease; } #xrCaseTrack.sol-init > div.sol-active, #w3dCaseTrack.sol-init > div.sol-active { transform: scale(1); opacity: 1; } /* 구축사례 페이지2 카드 — 모바일에서 XR은 숨김, W3D만 표시 */ #xrCaseTrack .xr-case-page2 { display: none !important; } #w3dCaseTrack .w3d-case-page2 { display: none !important; } /* XR/W3D 솔루션·구축사례 섹션 패딩 */ section:has(#xrSolutionTrack), section:has(#w3dSolutionTrack) { padding: 40px 20px !important; } section:has(#xrCaseTrack), section:has(#w3dCaseTrack) { padding: 40px 20px 80px !important; } /* word-break */ #section-xr, #xrSolutionTrack, #w3dSolutionTrack { word-break: keep-all; } /* XR 페이지 breadcrumb 숨김 */ .page-breadcrumb { display: none !important; } /* ===== MANUAL 페이지 모바일 ===== */ /* 인트로 섹션 패딩 */ #section-manual, #section-tc { padding: 72px 20px 40px !important; } #section-web { padding: 72px 20px 80px !important; } /* 인트로 2fr 3fr → 1열 */ #section-manual > div, #section-tc > div, #section-web > div { grid-template-columns: 1fr !important; gap: 24px !important; } /* 우측 이미지 숨김 */ #section-manual > div > div:last-child, #section-tc > div > div:last-child, #section-web > div > div:last-child { display: none !important; } /* h2 제목 */ #section-manual h2, #section-tc h2, #section-web h2 { font-size: 34px !important; text-align: center !important; word-break: keep-all; } /* 44px 섹션 제목 → 26px */ #panel-manual p[style*="44px"], #panel-tc p[style*="44px"], #panel-web p[style*="44px"] { font-size: 26px !important; text-align: center !important; word-break: keep-all; padding: 0 20px; line-height: 1.4 !important; } /* KF 그리드 2열 */ #manualKfCarousel, #tcKfCarousel, #webKfCarousel { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; padding: 0 20px !important; } #manualKfCarousel > div, #tcKfCarousel > div, #webKfCarousel > div { padding: 16px !important; min-height: 0 !important; } /* KF 5번째 이후 숨김 */ #manualKfCarousel > div:nth-child(n+5), #tcKfCarousel > div:nth-child(n+5), #webKfCarousel > div:nth-child(n+5) { display: none !important; } #manualKfCarousel.kf-expanded > div:nth-child(n+5), #tcKfCarousel.kf-expanded > div:nth-child(n+5), #webKfCarousel.kf-expanded > div:nth-child(n+5) { display: flex !important; } /* KF 더보기 버튼 표시 */ #manualKfMoreBtnWrap, #tcKfMoreBtnWrap, #webKfMoreBtnWrap { display: block !important; } /* proc section 패딩 */ #manualProcSection, #tcProcSection, #webProcSection { padding: 40px 20px !important; } /* proc 내부 박스 패딩 */ #manualProcSection > div > div, #tcProcSection > div > div, #webProcSection > div > div { padding: 20px !important; border-radius: 10px !important; } /* proc 기존 수평 절대선 숨김 */ #manualProcLine, #tcProcLine, #webProcLine { display: none !important; } /* 텍스트 → 회색 박스 간격 40px → 20px */ #manualProcSection > div > div > p, #tcProcSection > div > div > p, #webProcSection > div > div > p { margin-bottom: 20px !important; } /* proc f8f9fb 컨테이너 패딩 축소 */ #manualProcSection > div > div > div, #tcProcSection > div > div > div, #webProcSection > div > div > div { padding: 24px 12px 28px !important; } /* proc 6단계 grid → 2×3 zig-zag */ #manualProcGrid, #tcProcGrid, #webProcGrid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; row-gap: 16px !important; column-gap: 0 !important; overflow: visible !important; } #manualProcGrid > div, #tcProcGrid > div, #webProcGrid > div { position: relative !important; overflow: visible !important; flex: unset !important; min-width: unset !important; display: flex !important; flex-direction: column !important; align-items: center !important; } /* 원형 아이콘 크기 축소 */ #manualProcGrid > div > div:first-child, #tcProcGrid > div > div:first-child, #webProcGrid > div > div:first-child { width: 52px !important; height: 52px !important; } #manualProcGrid > div > div:first-child span, #tcProcGrid > div > div:first-child span, #webProcGrid > div > div:first-child span { font-size: 15px !important; } /* 1→2, 3→4, 5→6 화살표 연결선 */ #manualProcGrid > div:nth-child(odd)::before, #webProcGrid > div:nth-child(odd)::before { content: ''; position: absolute; top: 26px; left: calc(50% + 34px); right: calc(44px - 50%); height: 2px; background: #FF6B35; transform: translateY(-50%); z-index: 0; pointer-events: none; } #tcProcGrid > div:nth-child(odd)::before { content: ''; position: absolute; top: 26px; left: calc(50% + 34px); right: calc(44px - 50%); height: 2px; background: #3b82f6; transform: translateY(-50%); z-index: 0; pointer-events: none; } /* 1→2, 3→4, 5→6 오른쪽 화살표 — 양쪽 간격 동일(8px) */ #manualProcGrid > div:nth-child(odd)::after, #webProcGrid > div:nth-child(odd)::after { content: ''; position: absolute; top: 26px; right: calc(34px - 50%); transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #FF6B35; z-index: 1; pointer-events: none; } #tcProcGrid > div:nth-child(odd)::after { content: ''; position: absolute; top: 26px; right: calc(34px - 50%); transform: translateY(-50%); width: 0; height: 0; border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 10px solid #3b82f6; z-index: 1; pointer-events: none; } /* 단계 설명 텍스트 12px → 13px, 행간 1.7 → 1.4 */ #manualProcGrid > div > div:last-child p:last-child, #tcProcGrid > div > div:last-child p:last-child, #webProcGrid > div > div:last-child p:last-child { font-size: 13px !important; line-height: 1.4 !important; } /* 솔루션 캐러셀 */ #manualSolutionTrack, #tcSolutionTrack, #webSolutionTrack { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 6px !important; margin: 0 -20px; padding: 0 20px 24px; } #manualSolutionTrack::-webkit-scrollbar, #tcSolutionTrack::-webkit-scrollbar, #webSolutionTrack::-webkit-scrollbar { display: none; } #manualSolutionTrack > div, #tcSolutionTrack > div, #webSolutionTrack > div { flex: 0 0 300px !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; border-radius: 10px !important; } /* 솔루션 섹션 패딩 */ section:has(#manualSolutionTrack), section:has(#tcSolutionTrack), section:has(#webSolutionTrack) { padding: 40px 20px !important; } /* 케이스 캐러셀 */ #printCaseTrack, #tcCaseTrack, #webCaseTrack { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 6px !important; margin: 0 -20px; padding: 0 20px 24px; } #printCaseTrack::-webkit-scrollbar, #tcCaseTrack::-webkit-scrollbar, #webCaseTrack::-webkit-scrollbar { display: none; } #printCaseTrack > div, #tcCaseTrack > div, #webCaseTrack > div { flex: 0 0 100% !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; aspect-ratio: 16 / 9 !important; min-height: unset !important; overflow: hidden; position: relative !important; border-radius: 10px !important; } /* 케이스 카드 호버 제거 */ #printCaseTrack .case-card:hover, #tcCaseTrack .case-card:hover, #webCaseTrack .case-card:hover { transform: none !important; box-shadow: none !important; } #printCaseTrack .case-card:hover .case-card-btn, #tcCaseTrack .case-card:hover .case-card-btn, #webCaseTrack .case-card:hover .case-card-btn { background: rgba(255, 255, 255, 0.15) !important; } #printCaseTrack .case-card:hover .case-card-btn img, #tcCaseTrack .case-card:hover .case-card-btn img, #webCaseTrack .case-card:hover .case-card-btn img { transform: none !important; filter: none !important; } #printCaseTrack .case-card-btn, #tcCaseTrack .case-card-btn, #webCaseTrack .case-card-btn { width: 36px !important; height: 36px !important; } #printCaseTrack .case-card-btn img, #tcCaseTrack .case-card-btn img, #webCaseTrack .case-card-btn img { width: 10px !important; } /* 케이스 날짜 숨김 */ #printCaseTrack .case-card > div:last-child > span, #tcCaseTrack .case-card > div:last-child > span, #webCaseTrack .case-card > div:last-child > span { display: none !important; } #printCaseTrack .case-card > div:last-child, #tcCaseTrack .case-card > div:last-child, #webCaseTrack .case-card > div:last-child { justify-content: flex-end !important; } /* 케이스 카드 내부 패딩·버튼 위치 */ #printCaseTrack > div, #tcCaseTrack > div, #webCaseTrack > div { padding: 24px !important; } #printCaseTrack > div > div:last-child, #tcCaseTrack > div > div:last-child, #webCaseTrack > div > div:last-child { position: absolute !important; bottom: 24px !important; left: 24px !important; right: 24px !important; margin-top: 0 !important; } #printCaseTrack > div > p, #tcCaseTrack > div > p, #webCaseTrack > div > p { font-size: 20px !important; overflow: hidden; } /* 케이스 페이지2 — 모바일에서도 표시 (스와이프) */ #printCaseTrack .print-case-p2, #tcCaseTrack .tc-case-p2, #webCaseTrack .web-case-p2 { display: flex !important; } /* 케이스 섹션 패딩 */ section:has(#printCaseTrack), section:has(#tcCaseTrack), section:has(#webCaseTrack) { padding: 40px 20px 80px !important; } /* ===== TRANSLATION 페이지 모바일 ===== */ /* 인트로 섹션 패딩 */ #section-translation { padding: 72px 20px 40px !important; } /* 인트로 2fr 3fr → 1열 */ #section-translation > div { grid-template-columns: 1fr !important; gap: 24px !important; } /* 우측 이미지 숨김 */ #section-translation > div > div:last-child { display: none !important; } /* h1 히어로 타이틀 자동 줄내림 */ #tranExpandContent .about-hero-title { word-break: keep-all !important; } #tranExpandContent .about-hero-title br { display: none !important; } /* 포트폴리오 히어로 타이틀 자동 줄내림 */ #portExpandContent .about-hero-title { word-break: keep-all !important; } #portExpandContent .about-hero-title br.pc-br { display: none !important; } /* h2 제목 */ #section-translation h2 { font-size: 34px !important; text-align: center !important; word-break: keep-all; } /* 44px 섹션 제목 */ #section-translation p[style*="44px"], #tran-kf p[style*="44px"], #tran-svc p[style*="44px"], #tran-sol p[style*="44px"], #tran-case p[style*="44px"] { font-size: 26px !important; text-align: center !important; word-break: keep-all; padding: 0 20px; line-height: 1.4 !important; } /* KF 그리드 2열 */ #tranKfCarousel { grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: auto !important; padding: 0 20px !important; } #tranKfCarousel > div { padding: 16px !important; min-height: 0 !important; } /* KF 5번째 이후 숨김 */ #tranKfCarousel > div:nth-child(n+5) { display: none !important; } #tranKfCarousel.kf-expanded > div:nth-child(n+5) { display: flex !important; } /* KF 더보기 버튼 표시 */ #tranKfMoreBtnWrap { display: block !important; } /* tran-svc 좌우 패딩, 카드 그리드 레이아웃 */ #tran-svc { padding: 40px 20px !important; } #tran-svc > div > div > div[style*="border-radius:24px"] { border-radius: 10px !important; padding: 28px !important; display: grid !important; grid-template-columns: 1fr auto !important; align-items: start !important; } #tran-svc > div > div > div > p:first-child { font-size: 20px !important; grid-column: 1 / -1 !important; grid-row: 1 !important; } #tran-svc > div > div > div > p:nth-child(2) { display: none !important; grid-column: 1 / -1 !important; grid-row: 2 !important; } #tran-svc > div > div > div > p:nth-child(3) { line-height: 1.4 !important; grid-column: 1 / -1 !important; grid-row: 3 !important; } /* 태그 세로 배치 (col 1, row 4) */ #tran-svc > div > div > div > div { grid-column: 1 !important; grid-row: 4 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; margin-bottom: 0 !important; align-self: center !important; } /* 버튼 옆 배치 (col 2, row 4) */ #tran-svc > div > div > div > button { grid-column: 2 !important; grid-row: 4 !important; height: 44px !important; padding-top: 0 !important; padding-bottom: 0 !important; align-self: end !important; margin-left: 12px !important; } /* 번역 모달 */ #tranModal-general, #tranModal-machine { padding: 5vw !important; } #tranModal-general > div[style*="border-radius:24px"], #tranModal-machine > div[style*="border-radius:24px"] { border-radius: 10px !important; width: 100% !important; max-width: 100% !important; max-height: calc(100% - 10vw) !important; overflow: hidden !important; } /* 모달 헤더 패딩 */ #tranModal-general > div[style*="border-radius:24px"] > div:first-child, #tranModal-machine > div[style*="border-radius:24px"] > div:first-child { padding: 5vw 5vw 4vw !important; } /* 모달 본문 패딩 */ #tranModal-general > div[style*="border-radius:24px"] > div:last-child, #tranModal-machine > div[style*="border-radius:24px"] > div:last-child { padding: 5vw !important; } /* 모달 내부 가로 레이아웃 → 세로 배치 */ #tranModal-general div[style*="grid-template-columns:repeat(3,1fr)"], #tranModal-machine div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; } #tranModal-general div[style*="grid-template-columns:repeat(4,1fr)"], #tranModal-machine div[style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; } /* 프로세스 가로 flex → 세로 */ /* 프로세스: 3열 × 2행 그리드 */ #tranModal-general div[style*="flex-wrap:nowrap"], #tranModal-machine div[style*="flex-wrap:nowrap"] { display: grid !important; grid-template-columns: 1fr auto 1fr auto 1fr !important; grid-template-rows: auto auto !important; align-items: start !important; row-gap: 16px !important; } /* 명시적 배치: row1 */ #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(1), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(1) { grid-column:1 !important; grid-row:1 !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(2), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(2) { grid-column:2 !important; grid-row:1 !important; margin-top:13px !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(3), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(3) { grid-column:3 !important; grid-row:1 !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(4), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(4) { grid-column:4 !important; grid-row:1 !important; margin-top:13px !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(5), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(5) { grid-column:5 !important; grid-row:1 !important; } /* 행 전환 화살표 숨김 */ #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(6), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(6) { display:none !important; } /* 명시적 배치: row2 */ #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(7), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(7) { grid-column:1 !important; grid-row:2 !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(8), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(8) { grid-column:2 !important; grid-row:2 !important; margin-top:13px !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(9), #tranModal-machine div[style*="flex-wrap:nowrap"] > div:nth-child(9) { grid-column:3 !important; grid-row:2 !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(10) { grid-column:4 !important; grid-row:2 !important; margin-top:13px !important; } #tranModal-general div[style*="flex-wrap:nowrap"] > div:nth-child(11) { grid-column:5 !important; grid-row:2 !important; } /* 아이콘 원형 크기 축소 */ #tranModal-general div[style*="flex-wrap:nowrap"] div[style*="width:70px"], #tranModal-machine div[style*="flex-wrap:nowrap"] div[style*="width:70px"] { width: 44px !important; height: 44px !important; } #tranModal-general div[style*="flex-wrap:nowrap"] div[style*="width:70px"] svg, #tranModal-machine div[style*="flex-wrap:nowrap"] div[style*="width:70px"] svg { width: 20px !important; height: 20px !important; } /* 모달 내부 배경 카드 패딩 + 행간 */ #tranModal-general div[style*="border-radius:16px"], #tranModal-machine div[style*="border-radius:16px"] { padding: 20px !important; } #tranModal-general div[style*="border-radius:16px"] p, #tranModal-machine div[style*="border-radius:16px"] p { line-height: 1.4 !important; } /* 아이콘 있는 카드: 아이콘 + 제목/부제 가로 배치 */ #tranModal-general div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]), #tranModal-machine div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) { display: grid !important; grid-template-columns: 52px 1fr !important; column-gap: 14px !important; align-items: start !important; } /* 아이콘 */ #tranModal-general div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > div, #tranModal-machine div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > div { grid-column: 1 !important; grid-row: 1 / 3 !important; margin-bottom: 0 !important; align-self: center !important; } /* 제목 */ #tranModal-general div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > p:nth-of-type(1), #tranModal-machine div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > p:nth-of-type(1) { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; margin-bottom: 2px !important; } /* 부제 */ #tranModal-general div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > p:nth-of-type(2), #tranModal-machine div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > p:nth-of-type(2) { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; margin-bottom: 0 !important; } /* 설명 */ #tranModal-general div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > p:nth-of-type(3), #tranModal-machine div[style*="border-radius:16px"]:has(> div[style*="border-radius:14px"]) > p:nth-of-type(3) { grid-column: 1 / -1 !important; grid-row: 3 !important; margin-top: 12px !important; } /* tran-svc 2열 → 1열 */ #tran-svc > div > div[style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; gap: 20px !important; } /* tran-sol 솔루션 캐러셀 */ #tranSolutionTrack { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 6px !important; margin: 0 -20px; padding: 0 20px 24px; } #tranSolutionTrack::-webkit-scrollbar { display: none; } #tranSolutionTrack > div { flex: 0 0 300px !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; border-radius: 10px !important; } section:has(#tranSolutionTrack) { padding: 40px 20px !important; } /* 케이스 캐러셀 */ #tranCaseTrack { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; gap: 6px !important; margin: 0 -20px; padding: 0 20px 24px; } #tranCaseTrack::-webkit-scrollbar { display: none; } #tranCaseTrack > div { flex: 0 0 100% !important; min-width: 0; scroll-snap-align: center; box-sizing: border-box; display: flex !important; aspect-ratio: 16 / 9 !important; min-height: unset !important; overflow: hidden; position: relative !important; border-radius: 10px !important; } /* 케이스 카드 호버 제거 */ #tranCaseTrack .case-card:hover { transform: none !important; box-shadow: none !important; } /* 케이스 날짜 숨김 */ #tranCaseTrack .case-card > div:last-child > span { display: none !important; } #tranCaseTrack .case-card > div:last-child { justify-content: flex-end !important; } /* 케이스 카드 내부 패딩·버튼 위치 */ #tranCaseTrack > div { padding: 24px !important; } #tranCaseTrack > div > div:last-child { position: absolute !important; bottom: 24px !important; left: 24px !important; right: 24px !important; margin-top: 0 !important; } #tranCaseTrack > div > p { font-size: 20px !important; overflow: hidden; } /* 케이스 페이지2 — 모바일에서 표시 */ #tranCaseTrack .tran-case-p2 { display: flex !important; } /* 케이스 타이틀 마진 */ section:has(#tranCaseTrack) p[style*="margin:0 0 48px"] { margin-bottom: 40px !important; } /* 케이스 섹션 패딩 */ section:has(#tranCaseTrack) { padding: 40px 20px 80px !important; } /* 이글로벌 브랜드 → 가로 배치 */ .eglobal-brand { flex-direction: row !important; align-items: center !important; gap: 16px !important; } .eglobal-brand img { height: 40px !important; } .eglobal-brand p { font-size: 13px !important; word-break: keep-all !important; line-height: 1.4 !important; } }