/* Custom Fonts */
@font-face {
font-family: 'Paperlogy';
src: url('fonts/Paperlogy-3Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Paperlogy';
src: url('fonts/Paperlogy-6SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Pretendard';
src: url('fonts/Pretendard-Light.otf') format('opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* What We Do + Trust Strip (hero sub-section) */
.what-we-do {
padding: 80px 0;
}
.what-title {
font-size: 32px;
line-height: 1.3;
font-weight: 800;
letter-spacing: -0.01em;
margin: 8px 0 12px;
text-align: center;
}
.what-desc {
color: rgba(255, 255, 255, 0.75);
text-align: center;
margin: 0 auto 28px;
max-width: 840px;
}
.what-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.what-card {
display: flex;
align-items: center;
justify-content: center;
min-height: 120px;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
position: relative;
overflow: hidden;
transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}
.what-card:hover {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.what-card:focus-visible {
outline: 2px solid #60a5fa;
outline-offset: 2px;
}
.what-label {
font-size: 18px;
font-weight: 700;
}
.what-cta {
margin-top: 20px;
display: flex;
justify-content: center;
}
@media (max-width: 1024px) {
.what-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.what-title {
font-size: 26px;
}
.what-grid {
grid-template-columns: 1fr;
}
/* Vehicle LED Gallery - 모바일 반응형 */
.vehicle-led-gallery-section {
padding: 0 15px;
}
.vehicle-led-container {
max-width: 100%;
padding: 0 20px;
}
.vehicle-led-grid {
grid-template-columns: 1fr;
row-gap: 50px;
}
.vehicle-led-image {
height: 220px;
}
.vehicle-led-content {
padding: 20px;
}
.vehicle-led-content h3 {
font-size: 1.125rem;
margin-bottom: 12px;
}
.vehicle-led-features li {
font-size: 0.875rem;
padding: 5px 0;
padding-left: 18px;
}
}
.trust-strip {
padding: 1px 0 18px;
background: rgba(255, 255, 255, 0.04);
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.trust-list {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
align-items: center;
justify-content: center;
}
.trust-list li {
color: rgba(255, 255, 255, 0.85);
font-weight: 600;
position: relative;
}
.trust-list li+li {
padding-left: 20px;
}
.trust-list li+li::before {
content: "";
position: absolute;
left: 6px;
top: 50%;
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
transform: translateY(-50%);
}
/* Business Intro Section */
.business-intro {
position: relative;
padding: 220px 0 160px;
background: #ffffff;
text-align: center;
overflow: hidden;
}
.business-kicker {
position: absolute;
top: 35%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(70px, 10vw, 140px);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #F1F5F9;
margin: 0;
z-index: 1;
pointer-events: none;
}
.business-intro-title {
position: relative;
font-size: clamp(32px, 4vw, 56px);
font-weight: normal;
line-height: 1.4;
color: var(--text-dark);
letter-spacing: -0.02em;
max-width: 1100px;
margin: 0 auto;
z-index: 2;
opacity: 0;
transform: translate3d(0, 30px, 0);
transition: opacity 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: opacity, transform;
}
.business-intro-title.animate-in {
opacity: 1;
transform: translate3d(0, 0, 0);
will-change: auto;
}
.business-intro-title .bold-text {
font-weight: 700;
}
@media (max-width: 768px) {
.business-intro {
padding: 160px 0 120px;
}
.business-kicker {
font-size: clamp(60px, 15vw, 100px);
}
.business-intro-title {
font-size: clamp(24px, 6vw, 36px);
}
}
/* Business Verticals Intro */
.business-verticals-intro {
background: #F5F7FB;
text-align: center;
padding: 100px 20px;
display: flex;
align-items: center;
justify-content: center;
}
.verticals-intro-inner {
max-width: 920px;
width: 100%;
}
.verticals-eyebrow {
font-size: 16px;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--primary-color);
margin-bottom: 20px;
text-transform: uppercase;
font-family: 'Noto Sans', sans-serif;
}
.verticals-title {
font-size: clamp(42px, 4.8vw, 68px);
font-weight: 700;
color: #111827;
letter-spacing: -0.02em;
margin-bottom: 20px;
}
.verticals-desc {
font-size: 18px;
color: #4B5563;
line-height: 1.7;
letter-spacing: -0.01em;
margin-bottom: 0;
}
/* Business Vertical Sections */
.business-verticals {
display: flex;
width: 100%;
height: calc(100vh - var(--nav-height));
min-height: calc(100vh - var(--nav-height));
margin: 0;
padding: 0;
position: relative;
isolation: isolate;
--vertical-bg-default: url('images/bg/heatseat.webp');
--vertical-bg-active: var(--vertical-bg-default);
scroll-margin-top: var(--nav-height);
}
/* 섹션 전체를 덮는 기본 배경 */
.business-verticals::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--vertical-bg-default);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
pointer-events: none;
z-index: 0;
}
/* hover 이미지 레이어 */
.business-verticals::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--vertical-bg-active);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 1;
}
.vertical-section {
position: relative;
flex: 1;
overflow: hidden;
transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
z-index: 2;
border-left: 1px solid rgba(255, 255, 255, 0.25);
display: block;
text-decoration: none;
color: inherit;
}
.vertical-section:hover {
flex: 1.4 !important;
}
.vertical-section:first-child {
border-left: none;
}
/* hover 시 활성 배경 전환 */
.business-verticals:has(.vertical-section:hover)::after,
.business-verticals:has(.vertical-section:focus-within)::after {
opacity: 1;
}
.vertical-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.5) 100%);
transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
.vertical-section:hover .vertical-overlay {
opacity: 0.2;
}
.vertical-content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 10px;
z-index: 3;
width: 100%;
word-break: keep-all;
}
.vertical-content h2 {
font-size: clamp(28px, 3.5vw, 48px);
font-weight: 600;
color: #ffffff;
text-align: center;
margin-bottom: 32px;
letter-spacing: -0.02em;
line-height: 1.3;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), filter 0.6s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
filter: blur(0);
}
.vertical-section:hover .vertical-content h2 {
transform: translateY(-8px);
}
/* 다른 섹션 hover 시, hover되지 않은 섹션의 타이틀 흐릿하게 */
.business-verticals:has(.vertical-section:hover) .vertical-section:not(:hover) .vertical-content h2 {
opacity: 0.3;
filter: blur(2px);
}
.vertical-arrow {
width: 64px;
height: 64px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
}
.vertical-arrow svg {
width: 28px;
height: 28px;
}
.vertical-section:hover .vertical-arrow {
background: rgba(255, 255, 255, 0.95);
border-color: rgba(255, 255, 255, 0.95);
transform: scale(1.15);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}
.vertical-section:hover .vertical-arrow svg {
color: var(--primary-color);
}
.vertical-arrow:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.8);
outline-offset: 4px;
}
/* Responsive */
@media (max-width: 1024px) {
.business-verticals-intro {
padding: 80px 20px;
}
.business-verticals {
flex-direction: column;
height: auto;
}
.vertical-section {
min-height: 400px;
}
.vertical-content h2 {
font-size: clamp(24px, 5vw, 36px);
}
}
@media (max-width: 768px) {
.business-verticals-intro {
padding: 60px 20px;
}
.verticals-eyebrow {
font-size: 12px;
letter-spacing: 0.18em;
}
.verticals-title {
font-size: clamp(32px, 8vw, 48px);
}
.verticals-desc {
font-size: 16px;
}
.vertical-section {
min-height: 350px;
}
.vertical-arrow {
width: 56px;
height: 56px;
}
.vertical-arrow svg {
width: 24px;
height: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.vertical-section,
.vertical-section::before,
.vertical-overlay,
.vertical-content h2,
.vertical-arrow {
transition: none !important;
}
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: #1E293B;
background-color: #ffffff;
font-weight: 300;
letter-spacing: -0.01em;
}
/* Heading Styles - Use SemiBold Font */
h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.hero-title-text,
.split-title,
.detail-title,
.about-title,
.cta-title,
.what-title,
.kicker,
.nav-menu a,
.btn-primary,
.btn-secondary,
.btn-primary-galaxy {
font-family: 'Paperlogy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
font-weight: 600;
}
/* Color Variables */
:root {
--primary-color: #C2554D;
--secondary-color: #D97454;
--accent-color: #E8915B;
--success-color: #10B981;
--warning-color: #E8915B;
--error-color: #C2554D;
--text-dark: #1E293B;
--text-light: #475569;
--text-muted: #94A3B8;
--white: #FFFFFF;
--bg-light: #F8FAFC;
--bg-dark: #000000;
--border-color: #E2E8F0;
--shadow-light: rgba(15, 23, 42, 0.05);
--shadow-medium: rgba(15, 23, 42, 0.1);
--shadow-strong: rgba(15, 23, 42, 0.15);
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #D97454 100%);
--nav-height: 80px;
}
/* Container */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Navigation - Default (for all pages except home) */
.nav {
position: fixed;
top: 0;
width: 100%;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
z-index: 1000;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}
/* Home page - transparent navigation at start */
.home-page .nav {
background: transparent;
border-bottom: none;
box-shadow: none;
}
/* Home page scrolled OR default pages - white background with shadow */
.home-page .nav.scrolled,
.nav.scrolled {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
/* 수직 중앙 정렬 */
}
.nav-logo-img {
height: 52px;
width: 158px;
/* Standardize width to prevent header layout shift (512:168 ratio) */
transition: all 0.3s ease;
}
.nav-logo-img:hover {
transform: scale(1.05);
}
.nav-menu {
display: flex;
align-items: center;
/* 항목 수직 정렬 */
list-style: none;
gap: 40px;
}
.nav-menu a {
text-decoration: none;
color: var(--text-dark);
font-weight: 500;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
padding: 8px 0;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.01em;
text-shadow: none;
}
/* Home page - white text at start */
.home-page .nav-menu a {
color: #ffffff;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Home page scrolled - dark text */
.home-page .nav.scrolled .nav-menu a {
color: var(--text-dark);
text-shadow: none;
}
.nav-menu a.nav-cta {
background: transparent;
color: var(--text-dark);
font-weight: 700;
padding: 2px 28px 0 28px;
height: 44px;
border-radius: 999px;
margin-left: 15px;
border: 2px solid var(--text-dark);
box-shadow: none;
text-shadow: none;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
/* Home page - white CTA at start */
.home-page .nav-menu a.nav-cta {
color: var(--white);
border-color: var(--white);
}
/* Home page scrolled - dark CTA */
.home-page .nav.scrolled .nav-menu a.nav-cta {
color: var(--text-dark);
border-color: var(--text-dark);
}
/* CTA는 밑줄 효과 제거 */
.nav-menu a.nav-cta::after {
content: none;
}
.nav-menu a.nav-cta:hover {
background-color: var(--text-dark);
color: var(--white);
border-color: var(--text-dark);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Home page - white CTA hover at start */
.home-page .nav-menu a.nav-cta:hover {
background-color: #ffffff;
color: var(--text-dark);
border-color: #ffffff;
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.3);
}
/* Home page scrolled - dark CTA hover */
.home-page .nav.scrolled .nav-menu a.nav-cta:hover {
background-color: var(--text-dark);
color: var(--white);
border-color: var(--text-dark);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
/* Main menu items (회사소개, 사업분야, 설치사례 등) hover - dark black */
.nav-menu>li>a:hover:not(.nav-cta),
.nav-dropdown>a:hover {
color: #000000 !important;
font-weight: 700 !important;
text-shadow: none;
}
/* Home page - white hover at start */
.home-page .nav-menu>li>a:hover:not(.nav-cta),
.home-page .nav-dropdown>a:hover {
color: #ffffff !important;
text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
/* Home page scrolled - dark black hover */
.home-page .nav.scrolled .nav-menu>li>a:hover:not(.nav-cta),
.home-page .nav.scrolled .nav-dropdown>a:hover {
color: #000000 !important;
font-weight: 700 !important;
text-shadow: none;
}
/* Subpages - current page link hover (orange) */
body:not(.home-page) .nav-menu a.current-page:hover:not(.nav-cta),
body:not(.home-page) .dropdown-menu a.current-page:hover {
color: #FF8C00;
text-shadow: none;
}
/* Removed underline hover effect */
.nav-menu a::after {
content: none;
}
/* Home page - white underline on hover (스크롤 전에만) */
.home-page .nav-menu>li>a:not(.nav-cta)::after,
.home-page .nav-dropdown>a::after {
content: '';
position: absolute;
bottom: 4px;
left: 0;
width: 0;
height: 2px;
background-color: #ffffff;
transition: width 0.3s ease;
}
.home-page .nav-menu>li>a:hover:not(.nav-cta)::after,
.home-page .nav-dropdown>a:hover::after {
width: 100%;
}
/* 스크롤 후에는 밑줄 효과 제거 */
.home-page .nav.scrolled .nav-menu>li>a:not(.nav-cta)::after,
.home-page .nav.scrolled .nav-dropdown>a::after {
content: none;
}
/* Small spacer after fixed nav when hero is removed */
.after-nav-gap {
height: 50px;
}
/* Nav Dropdown */
.nav-dropdown {
position: relative;
}
.nav-dropdown>a {
display: inline-block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 12px 0;
min-width: 180px;
display: none;
z-index: 1100;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu a {
display: block;
padding: 10px 16px;
color: var(--text-dark);
font-size: 14px;
text-shadow: none;
}
.dropdown-menu a:hover {
background: rgba(255, 255, 255, 0.5);
color: var(--accent-color);
}
/* Subpages - current page link in dropdown (orange, always visible when dropdown is open) */
body:not(.home-page) .dropdown-menu a.current-page {
color: #FF6600 !important;
text-shadow: none !important;
font-weight: 600;
}
body:not(.home-page) .dropdown-menu a.current-page:hover {
background: rgba(255, 255, 255, 0.5);
color: #FF6600 !important;
text-shadow: none !important;
}
/* Subpages - current page link in main navigation (orange) */
body:not(.home-page) .nav-menu>li>a.current-page {
color: #FF6600 !important;
text-shadow: none !important;
font-weight: 600;
}
body:not(.home-page) .nav-menu>li>a.current-page:hover {
color: #FF6600 !important;
text-shadow: none !important;
}
/* Subpages - dropdown parent link when child is active (orange) */
body:not(.home-page) .nav-dropdown>a.current-page {
color: #FF6600 !important;
text-shadow: none !important;
font-weight: 600;
}
body:not(.home-page) .nav-dropdown>a.current-page:hover {
color: #FF6600 !important;
text-shadow: none !important;
}
/* Subpages - current page CTA button (orange active state) */
body:not(.home-page) .nav-menu a.nav-cta.current-page {
background: linear-gradient(135deg, #C2410C 0%, #EA580C 100%);
color: #ffffff !important;
border-color: #C2410C;
box-shadow: 0 4px 15px rgba(194, 65, 12, 0.25);
text-shadow: none;
position: relative;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
z-index: 1;
}
body:not(.home-page) .nav-menu a.nav-cta.current-page::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, #DC2626 0%, #F97316 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
border-radius: 999px;
}
body:not(.home-page) .nav-menu a.nav-cta.current-page:hover::before {
opacity: 1;
}
body:not(.home-page) .nav-menu a.nav-cta.current-page:hover {
color: #ffffff !important;
border-color: #DC2626;
box-shadow: 0 6px 20px rgba(194, 65, 12, 0.35);
}
/* Home page - dropdown menu always dark text */
.home-page .dropdown-menu a {
color: var(--text-dark) !important;
text-shadow: none !important;
}
.home-page .dropdown-menu a:hover {
background: rgba(255, 255, 255, 0.5);
color: var(--accent-color) !important;
text-shadow: none !important;
}
.nav-dropdown:hover .dropdown-menu {
display: block;
}
/* 회사소개 드롭다운 - 너비 줄이기 */
.nav-menu>li.nav-dropdown:first-child .dropdown-menu {
min-width: 160px;
}
/* 사업분야 드롭다운 - 너비 늘리기 */
.nav-menu>li.nav-dropdown:nth-child(2) .dropdown-menu {
min-width: 220px;
}
/* Nested Submenu Styles */
.nav-dropdown-item {
position: relative;
width: 100%;
}
.dropdown-submenu {
position: absolute;
top: -12px;
/* Align with parent list spacing */
left: 100%;
/* Position to the right */
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
padding: 12px 0;
min-width: 220px;
display: none;
z-index: 1101;
margin-left: 5px;
}
/* Invisible bridge to prevent submenu from closing when moving mouse across gap */
.dropdown-submenu::before {
content: "";
position: absolute;
top: 0;
left: -15px;
/* Covers the margin and slightly overlaps parent */
width: 15px;
height: 100%;
background: transparent;
}
/* Ensure list items inside submenu don't inherit weird styles if any */
.dropdown-submenu li {
list-style: none;
position: relative;
}
.dropdown-submenu a {
display: block;
padding: 10px 16px;
color: var(--text-dark) !important;
font-size: 14px;
text-shadow: none !important;
text-decoration: none;
white-space: nowrap;
}
.dropdown-submenu a:hover {
background: rgba(255, 255, 255, 0.5);
color: var(--accent-color) !important;
font-weight: 600;
}
/* Force black for nested submenu even if it's the current page (high specificity required) */
body:not(.home-page) .dropdown-menu .dropdown-submenu a.current-page {
color: var(--text-dark) !important;
font-weight: 500;
}
/* Ensure hover still works over current-page state */
body .dropdown-menu .dropdown-submenu a.current-page:hover {
color: var(--accent-color) !important;
}
/* Home page and other cases - allow orange on hover */
.home-page .dropdown-submenu a:hover {
color: var(--accent-color) !important;
}
/* Arrow indicator for items with submenu */
.has-submenu {
display: flex !important;
justify-content: space-between;
align-items: center;
}
.has-submenu::after {
content: "›";
font-size: 18px;
line-height: 1;
color: inherit;
margin-left: 8px;
font-weight: 400;
}
/* Show submenu on hover */
.nav-dropdown-item:hover>.dropdown-submenu {
display: block;
animation: fadeInSubmenu 0.2s ease-out;
}
@keyframes fadeInSubmenu {
from {
opacity: 0;
transform: translateX(-5px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Hero Section */
.hero {
background: #0a0e1a;
background-image:
radial-gradient(circle at 20% 50%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
radial-gradient(circle at 80% 50%, rgba(59, 130, 246, 0.2) 0%, transparent 50%),
linear-gradient(180deg, rgba(10, 14, 26, 0.9) 0%, rgba(10, 14, 26, 1) 100%);
width: 100%;
height: 100vh;
position: relative;
z-index: 1;
margin-top: 0;
overflow: hidden;
transform-style: preserve-3d;
}
/* Hero Background Video */
.hero-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 25%;
z-index: 1;
opacity: 0.01;
/* 사파리 호환: 완전히 0이면 "보이지 않는 비디오"로 인식하여 pause시킴 */
filter: brightness(0);
transition: opacity 2s ease-in-out, filter 2s ease-in-out;
}
.hero-video.fade-in {
opacity: 1;
filter: brightness(1);
}
/* LED Lights Container */
.led-lights-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
perspective: 800px;
perspective-origin: center center;
transform-style: preserve-3d;
}
/* Individual LED Lines */
.led-line-stream {
position: absolute;
width: 3px;
height: 150%;
top: 50%;
left: calc(50% + var(--offset, 0px));
transform-origin: center;
transform: translateX(calc(-50% + var(--offset, 0px))) translateZ(var(--z-depth, -500px)) scale(var(--scale, 1)) rotateX(var(--rotation, 0deg));
animation: ledStreamFlow var(--duration, 4s) var(--timing, linear) infinite;
opacity: 0.6;
filter: blur(1px);
}
/* Create curved tunnel effect */
.led-lights-container .led-line-stream:nth-child(odd) {
--z-depth: -400px;
}
.led-lights-container .led-line-stream:nth-child(even) {
--z-depth: -600px;
}
/* Horizontal positioning for dense lines - PERFECT SYMMETRIC SPREAD */
.led-lights-container .led-line-stream:nth-child(1) {
--offset: -380px;
--scale: 0.2;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(2) {
--offset: -350px;
--scale: 0.25;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(3) {
--offset: -320px;
--scale: 0.3;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(4) {
--offset: -290px;
--scale: 0.35;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(5) {
--offset: -260px;
--scale: 0.4;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(6) {
--offset: -230px;
--scale: 0.45;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(7) {
--offset: -200px;
--scale: 0.5;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(8) {
--offset: -170px;
--scale: 0.55;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(9) {
--offset: -140px;
--scale: 0.6;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(10) {
--offset: -110px;
--scale: 0.65;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(11) {
--offset: -80px;
--scale: 0.7;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(12) {
--offset: -50px;
--scale: 0.8;
--rotation: 0deg;
animation: ledStreamFlowShort var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(13) {
--offset: 0px;
--scale: 0.9;
--rotation: 0deg;
animation: ledStreamFlowShort var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(14) {
--offset: 50px;
--scale: 0.8;
--rotation: 0deg;
animation: ledStreamFlowShort var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(15) {
--offset: 80px;
--scale: 0.7;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(16) {
--offset: 110px;
--scale: 0.65;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(17) {
--offset: 140px;
--scale: 0.6;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(18) {
--offset: 170px;
--scale: 0.55;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(19) {
--offset: 200px;
--scale: 0.5;
--rotation: 0deg;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(20) {
--offset: 380px;
--scale: 0.2;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(21) {
--offset: -450px;
--scale: 0.15;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(22) {
--offset: -420px;
--scale: 0.18;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(23) {
--offset: 420px;
--scale: 0.18;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(24) {
--offset: 450px;
--scale: 0.15;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(25) {
--offset: 480px;
--scale: 0.12;
--rotation: 0deg;
}
.led-lights-container .led-line-stream:nth-child(26) {
--offset: 510px;
--scale: 0.1;
--rotation: 0deg;
}
/* Randomize animation duration for LED streams */
.led-line-stream:nth-child(1) {
--duration: 2.8s;
}
.led-line-stream:nth-child(2) {
--duration: 3.1s;
}
.led-line-stream:nth-child(3) {
--duration: 2.9s;
}
.led-line-stream:nth-child(4) {
--duration: 3.3s;
}
.led-line-stream:nth-child(5) {
--duration: 2.7s;
}
.led-line-stream:nth-child(6) {
--duration: 3.2s;
}
.led-line-stream:nth-child(7) {
--duration: 2.6s;
}
.led-line-stream:nth-child(8) {
--duration: 3.4s;
}
.led-line-stream:nth-child(9) {
--duration: 2.5s;
}
.led-line-stream:nth-child(10) {
--duration: 3.0s;
}
.led-line-stream:nth-child(11) {
--duration: 2.8s;
}
.led-line-stream:nth-child(12) {
--duration: 3.1s;
}
.led-line-stream:nth-child(13) {
--duration: 2.9s;
}
.led-line-stream:nth-child(14) {
--duration: 3.3s;
}
.led-line-stream:nth-child(15) {
--duration: 2.7s;
}
.led-line-stream:nth-child(16) {
--duration: 3.2s;
}
.led-line-stream:nth-child(17) {
--duration: 2.6s;
}
.led-line-stream:nth-child(18) {
--duration: 3.4s;
}
.led-line-stream:nth-child(19) {
--duration: 2.5s;
}
.led-line-stream:nth-child(20) {
--duration: 3.0s;
}
.led-line-stream:nth-child(21) {
--duration: 2.9s;
}
.led-line-stream:nth-child(22) {
--duration: 3.2s;
}
.led-line-stream:nth-child(23) {
--duration: 2.7s;
}
.led-line-stream:nth-child(24) {
--duration: 3.3s;
}
.led-line-stream:nth-child(25) {
--duration: 2.8s;
}
.led-line-stream:nth-child(26) {
--duration: 3.1s;
}
/* Blue LED Stream Lines */
.led-line-stream[data-color="blue"] {
background: linear-gradient(to bottom,
transparent 0%,
rgba(59, 130, 246, 0.5) 5%,
rgba(59, 130, 246, 0.9) 10%,
rgba(96, 165, 250, 1) 15%,
rgba(147, 197, 253, 1) 25%,
rgba(191, 219, 254, 1) 35%,
rgba(239, 246, 255, 1) 45%,
rgba(191, 219, 254, 1) 55%,
rgba(147, 197, 253, 1) 65%,
rgba(96, 165, 250, 1) 75%,
rgba(59, 130, 246, 0.9) 85%,
rgba(59, 130, 246, 0.5) 95%,
transparent 100%);
box-shadow:
0 0 10px rgba(59, 130, 246, 0.9),
0 0 30px rgba(96, 165, 250, 0.6),
0 0 50px rgba(147, 197, 253, 0.4),
0 0 70px rgba(191, 219, 254, 0.2);
animation: ledStreamFlow var(--duration, 3s) linear infinite,
ledGlowBlue 2s ease-in-out infinite alternate;
}
/* Green LED Stream Lines */
.led-line-stream[data-color="green"] {
background: linear-gradient(to bottom,
transparent 0%,
rgba(34, 197, 94, 0.5) 5%,
rgba(34, 197, 94, 0.9) 10%,
rgba(74, 222, 128, 1) 15%,
rgba(134, 239, 172, 1) 25%,
rgba(187, 247, 208, 1) 35%,
rgba(240, 253, 244, 1) 45%,
rgba(187, 247, 208, 1) 55%,
rgba(134, 239, 172, 1) 65%,
rgba(74, 222, 128, 1) 75%,
rgba(34, 197, 94, 0.9) 85%,
rgba(34, 197, 94, 0.5) 95%,
transparent 100%);
box-shadow:
0 0 10px rgba(34, 197, 94, 0.9),
0 0 30px rgba(74, 222, 128, 0.6),
0 0 50px rgba(134, 239, 172, 0.4),
0 0 70px rgba(187, 247, 208, 0.2);
animation: ledStreamFlow var(--duration, 3s) linear infinite,
ledGlowGreen 2s ease-in-out infinite alternate;
}
/* Orange LED Stream Lines */
.led-line-stream[data-color="orange"] {
background: linear-gradient(to bottom,
transparent 0%,
rgba(249, 115, 22, 0.5) 5%,
rgba(249, 115, 22, 0.9) 10%,
rgba(251, 146, 60, 1) 15%,
rgba(253, 186, 116, 1) 25%,
rgba(254, 215, 170, 1) 35%,
rgba(255, 247, 237, 1) 45%,
rgba(254, 215, 170, 1) 55%,
rgba(253, 186, 116, 1) 65%,
rgba(251, 146, 60, 1) 75%,
rgba(249, 115, 22, 0.9) 85%,
rgba(249, 115, 22, 0.5) 95%,
transparent 100%);
box-shadow:
0 0 10px rgba(249, 115, 22, 0.9),
0 0 30px rgba(251, 146, 60, 0.6),
0 0 50px rgba(253, 186, 116, 0.4),
0 0 70px rgba(254, 215, 170, 0.2);
animation: ledStreamFlow var(--duration, 3s) linear infinite,
ledGlowOrange 2s ease-in-out infinite alternate;
}
/* LED Stream Flow Animation - Creating tunnel effect */
@keyframes ledStreamFlow {
0% {
transform: translateX(calc(-50% + var(--offset, 0px))) translateY(60vh) translateZ(var(--z-depth, -500px)) scale(var(--scale, 1)) rotateX(var(--rotation, 0deg));
opacity: 0;
}
15% {
opacity: 0.9;
}
85% {
opacity: 0.9;
}
100% {
transform: translateX(calc(-50% + var(--offset, 0px))) translateY(-100vh) translateZ(var(--z-depth, -500px)) scale(calc(var(--scale, 1) * 1.5)) rotateX(var(--rotation, 0deg));
opacity: 0;
}
}
/* LED Stream Flow Animation - Short version for center lines (to -30vh) */
@keyframes ledStreamFlowShort {
0% {
transform: translateX(calc(-50% + var(--offset, 0px))) translateY(60vh) translateZ(var(--z-depth, -500px)) scale(var(--scale, 1)) rotateX(var(--rotation, 0deg));
opacity: 0;
}
15% {
opacity: 0.9;
}
85% {
opacity: 0.9;
}
100% {
transform: translateX(calc(-50% + var(--offset, 0px))) translateY(-30vh) translateZ(var(--z-depth, -500px)) scale(calc(var(--scale, 1) * 1.2)) rotateX(var(--rotation, 0deg));
opacity: 0;
}
}
/* LED Stream Flow Animation - Medium version for 200px range (to -30vh) */
@keyframes ledStreamFlowMedium {
0% {
transform: translateX(calc(-50% + var(--offset, 0px))) translateY(60vh) translateZ(var(--z-depth, -500px)) scale(var(--scale, 1)) rotateX(var(--rotation, 0deg));
opacity: 0;
}
15% {
opacity: 0.9;
}
85% {
opacity: 0.9;
}
100% {
transform: translateX(calc(-50% + var(--offset, 0px))) translateY(-30vh) translateZ(var(--z-depth, -500px)) scale(calc(var(--scale, 1) * 1.2)) rotateX(var(--rotation, 0deg));
opacity: 0;
}
}
/* LED Pulse Animation - Random brightness variation */
@keyframes ledPulse {
0%,
100% {
opacity: 0.7;
filter: brightness(1) blur(1px);
}
25% {
opacity: 1;
filter: brightness(1.5) blur(0.5px);
}
50% {
opacity: 0.6;
filter: brightness(0.8) blur(1.5px);
}
75% {
opacity: 0.95;
filter: brightness(1.2) blur(0.8px);
}
}
/* LED Glow Animations for Different Colors */
@keyframes ledGlowBlue {
0%,
100% {
box-shadow:
0 0 10px rgba(59, 130, 246, 0.9),
0 0 30px rgba(96, 165, 250, 0.6),
0 0 50px rgba(147, 197, 253, 0.4),
0 0 70px rgba(191, 219, 254, 0.2);
}
50% {
box-shadow:
0 0 15px rgba(59, 130, 246, 1),
0 0 40px rgba(96, 165, 250, 0.8),
0 0 65px rgba(147, 197, 253, 0.6),
0 0 90px rgba(191, 219, 254, 0.4);
}
}
@keyframes ledGlowGreen {
0%,
100% {
box-shadow:
0 0 10px rgba(34, 197, 143, 0.9),
0 0 30px rgba(74, 222, 192, 0.6),
0 0 50px rgba(134, 239, 172, 0.4),
0 0 70px rgba(187, 247, 208, 0.2);
}
50% {
box-shadow:
0 0 15px rgb(37, 202, 224),
0 0 40px rgba(79, 214, 207, 0.8),
0 0 65px rgba(134, 239, 172, 0.6),
0 0 90px rgba(187, 247, 208, 0.4);
}
}
@keyframes ledGlowOrange {
0%,
100% {
box-shadow:
0 0 10px rgba(249, 115, 22, 0.9),
0 0 30px rgba(251, 146, 60, 0.6),
0 0 50px rgba(253, 186, 116, 0.4),
0 0 70px rgba(254, 215, 170, 0.2);
}
50% {
box-shadow:
0 0 15px rgba(249, 115, 22, 1),
0 0 40px rgba(251, 146, 60, 0.8),
0 0 65px rgba(253, 186, 116, 0.6),
0 0 90px rgba(254, 215, 170, 0.4);
}
}
/* Alternate intensity for LED streams */
.led-lights-container .led-line-stream:nth-child(odd) {
animation-delay: calc(var(--index) * 0.05s);
}
.led-lights-container .led-line-stream:nth-child(even) {
animation-delay: calc(var(--index) * 0.07s);
}
/* Animated Light Sweep Effect */
.hero-light-sweep {
position: absolute;
top: 0;
left: -100%;
width: 200%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
transform: translateX(-50%) rotate(15deg);
animation: lightSweep 4s ease-in-out infinite;
pointer-events: none;
filter: blur(60px);
}
@keyframes lightSweep {
0%,
100% {
left: -100%;
}
50% {
left: 100%;
}
}
/* Radial Light Effect */
.hero-light-radial {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
filter: blur(80px);
pointer-events: none;
animation: pulse 6s ease-in-out infinite;
}
@keyframes pulse {
0%,
100% {
opacity: 0.3;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.6;
transform: translate(-50%, -50%) scale(1.2);
}
}
/* Spotlight Effects - Beams of light from bottom corners */
.hero-spotlight-left {
position: absolute;
bottom: 0;
left: 0px;
width: 50%;
height: 60%;
background:
linear-gradient(135deg,
transparent 45%,
rgba(255, 255, 255, 0.2) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.9) 52%,
rgba(255, 255, 255, 0.8) 55%,
rgba(255, 255, 255, 0.2) 58%,
transparent 62%);
pointer-events: none;
z-index: 2;
filter: blur(80px);
opacity: 0.7;
}
.hero-spotlight-right {
position: absolute;
bottom: 0;
right: 0px;
width: 50%;
height: 60%;
background:
linear-gradient(45deg,
transparent 45%,
rgba(255, 255, 255, 0.2) 48%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0.9) 52%,
rgba(255, 255, 255, 0.8) 55%,
rgba(255, 255, 255, 0.2) 58%,
transparent 62%);
pointer-events: none;
z-index: 2;
filter: blur(80px);
opacity: 0.7;
}
@keyframes spotlightPulse {
0%,
100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
/* Hero Content Wrapper */
.hero-content-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 10;
}
/* Hero Text Styling */
.hero-text {
text-align: center;
max-width: 1100px;
padding: 3rem 4rem;
margin: 0 auto;
width: 100%;
position: relative;
}
.hero-text::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
backdrop-filter: blur(3.5px);
-webkit-backdrop-filter: blur(3.5px);
border-radius: 20px;
z-index: -1;
}
.hero-title-text {
font-size: 4.5rem;
font-weight: 400;
background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.9) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
line-height: 1.2;
letter-spacing: -0.02em;
text-shadow: none;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
font-family: 'Montserrat', sans-serif;
white-space: normal;
text-align: center;
width: 100%;
max-width: 100%;
position: relative;
animation: fadeInUp 0.8s ease-out;
font-feature-settings: 'liga' off;
text-transform: none;
}
/* Future fade-in animation */
.hero-title-text .future-fade-in {
opacity: 0;
animation: futureFadeIn 0.3s ease-in 0.9s forwards;
/* Override parent's transparent text fill to ensure visibility */
-webkit-text-fill-color: #ffffff;
color: #ffffff;
background: none;
-webkit-background-clip: unset;
background-clip: unset;
/* Apply Quintessential font */
font-family: 'Quintessential', cursive;
}
@keyframes futureFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Rotating Text (hero main text) */
.text-rotate {
display: inline-flex;
flex-wrap: wrap;
white-space: pre-wrap;
position: relative;
gap: 0px;
}
.text-rotate-word {
display: inline-flex;
overflow: hidden;
}
.text-rotate-element {
display: inline-block;
opacity: 0;
will-change: opacity;
}
.text-rotate-space {
white-space: pre;
}
/* Enter/exit animations (simple fade in/out) */
.text-rotate-enter {
opacity: 0;
}
.text-rotate-enter-active {
opacity: 1;
transition: opacity 600ms ease-in-out;
}
.text-rotate-exit {
opacity: 1;
}
.text-rotate-exit-active {
opacity: 0;
transition: opacity 500ms ease-in-out;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Typing Effect Styles */
.typing-text {
display: inline-block;
white-space: pre-wrap;
/* allow \n to render as line breaks */
}
.typing-cursor {
margin-left: 0.25rem;
display: inline-block;
opacity: 1;
animation: blinkCursor 0.5s ease-in-out infinite;
}
@keyframes blinkCursor {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
.hero-title-text .typing-text,
.hero-title-text .typing-cursor {
/* Override gradient title's transparent fill */
-webkit-text-fill-color: #ffffff;
color: #ffffff;
background: none;
}
/* Ensure rotating text is visible over gradient title */
.hero-title-text .text-rotate,
.hero-title-text .text-rotate * {
-webkit-text-fill-color: #ffffff;
color: #ffffff;
background: none;
}
.hero-subtitle-text {
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 2.5rem;
line-height: 1.6;
font-weight: 400;
text-align: center;
width: 100%;
animation: fadeInUp 1s ease-out 0.2s both;
}
/* Subtle white glow around hero buttons */
.hero .hero-buttons .btn-secondary,
.hero .hero-buttons .btn-primary-galaxy {
box-shadow: 0 0 22px rgba(255, 255, 255, 0.22);
transition: box-shadow 0.35s ease;
}
.hero .hero-buttons .btn-secondary:hover,
.hero .hero-buttons .btn-primary-galaxy:hover {
box-shadow: 0 0 48px rgba(255, 255, 255, 0.60), 0 0 72px rgba(255, 255, 255, 0.35);
}
/* Keep '사례 보기' (.btn-secondary) colors the same on hover within hero */
.hero .hero-buttons .btn-secondary:hover {
background: rgba(255, 255, 255, 0.95);
color: #1E293B;
backdrop-filter: blur(10px);
}
/* Scroll Indicator */
.scroll-indicator {
position: absolute;
bottom: 40px;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 255, 255, 0.6);
text-align: center;
font-size: 14px;
font-weight: 500;
font-family: 'Noto Sans', sans-serif;
animation: bounceIndicator 2s ease-in-out infinite;
pointer-events: none;
}
.scroll-indicator span {
display: block;
margin-bottom: 8px;
}
@keyframes bounceIndicator {
0%,
100% {
transform: translateX(-50%) translateY(0);
}
50% {
transform: translateX(-50%) translateY(10px);
}
}
/* Responsive Hero Styles */
@media (max-width: 1024px) {
.hero-title-text {
font-size: 3.5rem;
}
.hero-subtitle-text {
font-size: 1.25rem;
}
}
@media (max-width: 768px) {
.hero-title-text {
font-size: 2.2rem;
white-space: normal;
}
.hero-subtitle-text {
font-size: 1.1rem;
}
.hero-buttons {
flex-direction: column;
align-items: center;
}
.btn-primary,
.btn-secondary {
width: 100%;
max-width: 280px;
}
/* LED Streams adjustments for mobile */
.led-line-stream {
width: 2px;
filter: blur(0.8px);
}
/* Adjust symmetric wide spread for mobile */
.led-lights-container .led-line-stream:nth-child(1) {
--offset: -220px;
}
.led-lights-container .led-line-stream:nth-child(2) {
--offset: -200px;
}
.led-lights-container .led-line-stream:nth-child(3) {
--offset: -180px;
}
.led-lights-container .led-line-stream:nth-child(4) {
--offset: -160px;
}
.led-lights-container .led-line-stream:nth-child(5) {
--offset: -140px;
}
.led-lights-container .led-line-stream:nth-child(6) {
--offset: -120px;
}
.led-lights-container .led-line-stream:nth-child(7) {
--offset: -100px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(8) {
--offset: -80px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(9) {
--offset: -60px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(10) {
--offset: -40px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(11) {
--offset: -20px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(12) {
--offset: -10px;
animation: ledStreamFlowShort var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(13) {
--offset: 0px;
animation: ledStreamFlowShort var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(14) {
--offset: 10px;
animation: ledStreamFlowShort var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(15) {
--offset: 20px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(16) {
--offset: 40px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(17) {
--offset: 60px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(18) {
--offset: 80px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(19) {
--offset: 100px;
animation: ledStreamFlowMedium var(--duration, 4s) var(--timing, linear) infinite;
}
.led-lights-container .led-line-stream:nth-child(20) {
--offset: 120px;
}
.led-lights-container .led-line-stream:nth-child(21) {
--offset: -140px;
}
.led-lights-container .led-line-stream:nth-child(22) {
--offset: -130px;
}
.led-lights-container .led-line-stream:nth-child(23) {
--offset: 130px;
}
.led-lights-container .led-line-stream:nth-child(24) {
--offset: 140px;
}
.led-lights-container .led-line-stream:nth-child(25) {
--offset: 150px;
}
.led-lights-container .led-line-stream:nth-child(26) {
--offset: 160px;
}
.led-line-stream[data-color="blue"] {
box-shadow:
0 0 8px rgba(59, 130, 246, 0.8),
0 0 20px rgba(96, 165, 250, 0.5);
}
}
.hero-container {
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
display: grid !important;
grid-template-columns: 1.2fr 0.8fr !important;
gap: 3rem !important;
align-items: center !important;
min-height: 80vh !important;
z-index: 2 !important;
position: relative !important;
}
/* 기존 hero-animation-area - 사용 안함 */
.hero-animation-only .hero-animation {
width: 1700px;
/* 1480px에서 15% 더 증가 (1480 * 1.15 = 1702) */
height: auto;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
transform: scale(1);
/* hover 효과 제거 */
transition: none;
/* hover 전환 효과 제거 */
margin: 0 auto;
padding: 0;
margin-top: 0;
/* 5px에서 0으로 상단 위치 올림 */
}
.hero-animation-only .hero-animation:hover {
transform: none;
/* hover 효과 완전 제거 */
}
.hero-animation-only .hero-animation lottie-player {
filter: drop-shadow(0 30px 60px rgba(194, 85, 77, 0.2));
transition: all 0.4s ease;
border-radius: 30px;
margin: 0;
padding: 0;
display: block;
height: 800px !important;
/* 높이 700px에서 800px로 더 증가 */
width: 100% !important;
max-width: 1700px;
/* 너비 증가에 맞춰 조정 */
}
/* 힙한 오버레이 텍스트 */
.hero-overlay-text {
position: absolute;
top: calc(50% + 20px);
left: 50%;
transform: translate(-50%, -25%);
text-align: center;
z-index: 20;
pointer-events: none;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
}
.hero-main-title {
font-size: 2.8rem;
font-weight: 800;
color: #0f172a;
margin: 0 !important;
padding: 0 !important;
line-height: 1.25;
letter-spacing: -0.02em;
position: relative;
white-space: nowrap;
display: inline-block;
text-shadow: none;
-webkit-text-stroke: 1px #ffffff;
}
/* 브랜드명 강조 (절제된 포인트) */
.hero-brand {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 900;
letter-spacing: -0.01em;
position: relative;
}
.hero-brand::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -4px;
height: 3px;
background: linear-gradient(90deg, rgba(194, 85, 77, 0.25), rgba(217, 116, 84, 0.25));
border-radius: 999px;
}
/* 오른쪽: 텍스트 + 버튼 영역 */
.hero-content {
text-align: left;
padding: 0.5rem 0;
max-width: 500px;
margin-left: auto;
align-self: start;
}
.hero-title {
font-size: 4.5rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1.5rem;
line-height: 1.1;
}
.highlight {
background: linear-gradient(135deg, #C2554D, #D97454);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: relative;
}
.hero-subtitle {
font-size: 1.5rem;
color: #5a6c7d;
margin-bottom: 2rem;
font-weight: 400;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 2rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
animation: fadeInUp 1.2s ease-out 0.4s both;
}
.hero-buttons a {
min-width: 150px;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-primary,
.btn-secondary {
padding: 14px 36px;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1.1rem;
transition: all 0.3s ease;
display: inline-block;
font-family: 'Noto Sans', sans-serif;
}
.btn-primary {
background: rgba(255, 255, 255, 0.95);
color: #1E293B;
border: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), 0 3px 10px rgba(0, 0, 0, 0.15);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.95);
color: #1E293B;
border: none;
backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
}
.btn-secondary:hover {
/* 심플한 회색 계열로 변경 (가시성 향상) */
background: #9ca3af;
/* gray-400 */
color: #111827;
/* gray-900 */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.1);
backdrop-filter: none;
/* 유리효과 제거로 색 차이 명확 */
}
/* Section Styles */
section {
padding: 80px 0;
}
/* Hero Section - 기본 section 패딩 무효화 */
section#hero.hero-animation-only {
margin: 0 !important;
border: 0 !important;
}
/* About Section - 기술력 통계 오른쪽 배치 */
.tech-stats-section {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem;
background: rgba(194, 85, 77, 0.05);
border-radius: 20px;
margin-top: 2rem;
}
.tech-stats-section h3 {
font-size: 1.8rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 2rem;
}
.tech-stats-section .tech-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin-bottom: 2rem;
width: 100%;
max-width: 400px;
}
.tech-stats-section .tech-stat {
background: #ffffff;
padding: 1.5rem;
border-radius: 15px;
box-shadow: 0 5px 15px rgba(194, 85, 77, 0.1);
transition: transform 0.3s ease;
}
.tech-stats-section .tech-stat:hover {
transform: translateY(-5px);
}
.tech-stats-section .tech-number {
font-size: 2rem;
font-weight: 800;
color: #C2554D;
margin-bottom: 0.5rem;
}
.tech-stats-section .tech-label {
font-size: 0.9rem;
color: #5a6c7d;
font-weight: 600;
}
.tech-stats-section .company-logo {
margin-top: 1rem;
}
.tech-stats-section .company-image {
max-width: 300px;
/* 150px에서 200px로 확대 */
height: auto;
opacity: 0.8;
}
/* Technology Features Section */
.tech-features-section {
background-color: #ffffff;
}
.tech-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.tech-features-grid .tech-feature {
background: #ffffff;
padding: 2rem;
border-radius: 15px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.tech-features-grid .tech-feature:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(194, 85, 77, 0.15);
}
.tech-feature-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.tech-features-grid .tech-feature h4 {
font-size: 1.3rem;
font-weight: 700;
color: #2c3e50;
margin-bottom: 1rem;
}
.tech-features-grid .tech-feature p {
color: #5a6c7d;
line-height: 1.6;
}
/* 모바일 반응형 */
@media (max-width: 768px) {
.tech-stats-section .tech-stats {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.tech-stats-section .tech-stat {
padding: 1rem;
}
.tech-stats-section .tech-number {
font-size: 1.5rem;
}
.tech-stats-section .company-image {
max-width: 120px;
/* 모바일에서도 적절한 크기 */
}
.tech-features-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.section-header {
text-align: center;
margin-bottom: 80px;
}
.section-title {
font-size: 42px;
font-weight: 700;
background: var(--gradient-primary);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 20px;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.02em;
}
.section-subtitle {
font-size: 18px;
color: var(--text-light);
max-width: 600px;
margin: 0 auto;
font-family: 'Pretendard', sans-serif;
font-weight: 400;
letter-spacing: -0.01em;
line-height: 1.5;
}
/* Global kicker label */
.kicker {
color: var(--primary-color);
font-weight: 800;
letter-spacing: 0.08em;
font-size: 16px;
text-transform: uppercase;
margin-bottom: 8px;
font-family: 'Noto Sans', sans-serif;
}
/* 하단: 통계 컨테이너 */
.hero-stats-container {
max-width: 1400px !important;
margin: 0 auto !important;
padding: 4rem 2rem 2rem 2rem !important;
position: relative !important;
z-index: 2 !important;
width: 100% !important;
display: block !important;
}
/* Hero Stats */
.hero-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 2rem !important;
text-align: center !important;
max-width: 800px !important;
margin: 0 auto !important;
width: 100% !important;
}
.hero-stats .stat-item {
background: rgba(255, 255, 255, 0.95);
padding: 2.5rem 1.5rem;
border-radius: 24px;
box-shadow:
0 20px 40px rgba(194, 85, 77, 0.1),
0 8px 16px rgba(194, 85, 77, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(194, 85, 77, 0.2);
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
position: relative;
overflow: hidden;
/* 떨림 방지: 고정 크기 설정 */
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.hero-stats .stat-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(135deg, #C2554D 0%, #D97454 50%, #E8915B 100%);
border-radius: 24px 24px 0 0;
}
.hero-stats .stat-item::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(194, 85, 77, 0.1) 0%, transparent 70%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.4s ease;
z-index: 1;
}
.hero-stats .stat-item:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
0 25px 50px rgba(194, 85, 77, 0.2),
0 12px 24px rgba(194, 85, 77, 0.1);
border-color: rgba(194, 85, 77, 0.4);
}
.hero-stats .stat-item:hover::after {
width: 120px;
height: 120px;
}
.hero-stats .stat-item:hover .stat-number {
transform: scale(1.05);
text-shadow: 0 4px 12px rgba(194, 85, 77, 0.3);
}
.hero-stats .stat-item:hover .stat-label {
color: #2c3e50;
transform: translateY(-2px);
}
.hero-stats .stat-number {
/* 떨림 방지: 고정 크기와 중앙 정렬 */
font-size: 2.8rem;
font-weight: 800;
background: linear-gradient(135deg, #C2554D 0%, #D97454 50%, #E8915B 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 0.8rem;
font-family: 'Space Grotesk', 'Pretendard', sans-serif;
letter-spacing: -0.02em;
position: relative;
z-index: 2;
/* 떨림 완전 방지 */
min-width: 120px;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
text-shadow: 0 2px 8px rgba(194, 85, 77, 0.2);
}
.hero-stats .stat-label {
font-size: 1.1rem;
color: #34495e;
font-weight: 600;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.01em;
position: relative;
z-index: 2;
/* 떨림 방지 */
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* 모바일 반응형 */
@media (max-width: 768px) {
.hero-container {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
padding: 0 1rem;
min-height: auto;
}
.hero-animation-area {
min-height: 300px;
order: 1;
}
.hero-animation {
width: 300px;
height: 300px;
}
.hero-content {
order: 2;
text-align: center;
padding: 1rem 0;
}
.hero-title {
font-size: 2.5rem;
}
.hero-stats-container {
padding: 3rem 1rem 1rem 1rem;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 1.5rem;
max-width: 400px;
}
.hero-stats .stat-item {
min-height: 120px;
padding: 2rem 1rem;
}
.hero-stats .stat-number {
font-size: 2.4rem;
min-width: 100px;
height: 50px;
}
.hero-stats .stat-label {
font-size: 1rem;
}
}
/* 태블릿 반응형 */
@media (max-width: 1024px) and (min-width: 769px) {
.hero-container {
grid-template-columns: 1fr;
gap: 2.5rem;
text-align: center;
min-height: auto;
}
.hero-animation-area {
min-height: 350px;
order: 1;
}
/* .hero-animation - 기존 CSS 비활성화 (hero-animation-only와 충돌) */
/* .hero-animation {
width: 350px;
height: 350px;
} */
.hero-content {
order: 2;
text-align: center;
padding: 1.5rem 0;
}
.hero-stats-container {
padding: 3rem 2rem 2rem 2rem;
}
.hero-stats {
max-width: 600px;
}
.hero-stats .stat-item {
padding: 2rem 1rem;
}
.hero-stats .stat-number {
font-size: 2.6rem;
min-width: 110px;
height: 55px;
}
}
/* 대형 화면 최적화 */
@media (min-width: 1440px) {
.hero-animation-only {
padding-top: 50px;
/* 70px에서 50px로 줄임 */
padding-bottom: 2rem;
min-height: auto;
}
.hero-animation-only .hero-animation {
width: 1955px;
/* 1700px에서 15% 더 증가 (1700 * 1.15 = 1955) */
height: auto;
margin-top: 0;
/* 상단 위치 올림 */
}
.hero-main-title {
font-size: 4rem;
padding: 0 !important;
}
.hero-animation-only .hero-animation lottie-player {
height: 800px !important;
/* 대형 화면 높이 더 증가 */
max-width: 1955px;
}
}
/* Hero Section 강제 적용 */
section#hero .hero-container {
display: grid !important;
grid-template-columns: 1.2fr 0.8fr !important;
grid-template-rows: auto !important;
}
section#hero .hero-stats-container {
grid-column: 1 / -1 !important;
width: 100% !important;
display: block !important;
}
section#hero .hero-stats {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
max-width: 800px !important;
margin: 0 auto !important;
}
/* 애니메이션만 있는 초간단 Hero */
.hero-animation-only {
background: #ffffff;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 40px;
/* 50px에서 40px로 더 줄임 */
padding-bottom: 1rem;
min-height: auto;
margin: 0;
}
.hero-animation-only .hero-animation {
width: 1530px;
/* 1700px에서 10% 줄임 (1700 * 0.9 = 1530) */
height: auto;
display: flex;
align-items: flex-start;
justify-content: center;
position: relative;
transform: scale(1);
transition: none;
margin: 0 auto;
padding: 0;
margin-top: -35px;
/* 0에서 -35px로 위로 더 올림 (내비바와 겹침) */
}
.hero-animation-only .hero-animation lottie-player {
filter: drop-shadow(0 30px 60px rgba(194, 85, 77, 0.2));
transition: all 0.4s ease;
border-radius: 30px;
margin: 0;
padding: 0;
display: block;
height: 720px !important;
/* 800px에서 10% 줄임 (800 * 0.9 = 720) */
width: 100% !important;
max-width: 1530px;
/* 너비 감소에 맞춰 조정 */
}
/* 새로운 Hero 레이아웃 반응형 */
@media (max-width: 768px) {
.hero-animation-only {
padding-top: 40px;
/* 50px에서 40px로 줄임 */
padding-bottom: 1rem;
min-height: auto;
}
.hero-animation-only .hero-animation {
width: 445px;
/* 495px에서 10% 줄임 (495 * 0.9 = 445.5) */
height: auto;
margin-top: -25px;
/* 0에서 -25px로 위로 올림 */
}
.hero-animation-only .hero-animation lottie-player {
height: 315px !important;
/* 350px에서 10% 줄임 (350 * 0.9 = 315) */
max-width: 445px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.hero-animation-only {
padding-top: 40px;
/* 50px에서 40px로 줄임 */
padding-bottom: 1.5rem;
min-height: auto;
}
.hero-animation-only .hero-animation {
width: 765px;
/* 850px에서 10% 줄임 (850 * 0.9 = 765) */
height: auto;
margin-top: -30px;
/* 0에서 -30px로 위로 올림 */
}
.hero-animation-only .hero-animation lottie-player {
height: 396px !important;
/* 440px에서 10% 줄임 (440 * 0.9 = 396) */
max-width: 765px;
}
}
/* 대형 화면 최적화 */
@media (min-width: 1440px) {
.hero-animation-only {
padding-top: 40px;
/* 50px에서 40px로 줄임 */
padding-bottom: 2rem;
min-height: auto;
}
.hero-animation-only .hero-animation {
width: 1760px;
/* 1955px에서 10% 줄임 (1955 * 0.9 = 1759.5) */
height: auto;
margin-top: -40px;
/* 0에서 -40px로 위로 더 올림 */
}
.hero-animation-only .hero-animation lottie-player {
height: 720px !important;
/* 800px에서 10% 줄임 */
max-width: 1760px;
}
}
/* 기존 hero-main-content - 사용 안함 */
/* Layer: ensure hero animation appears above fixed navbar */
.hero-animation-only .hero-animation lottie-player {
position: relative;
z-index: 1101;
}
/* 통계 관련 CSS 제거됨 */
/* About Section */
.about {
background-color: var(--white);
}
.about-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-text h3 {
font-size: 30px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 30px;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.01em;
}
.about-text p {
color: var(--text-light);
margin-bottom: 40px;
line-height: 1.7;
font-family: 'Pretendard', sans-serif;
font-weight: 400;
font-size: 17px;
letter-spacing: -0.01em;
}
.core-values {
display: grid;
grid-template-columns: 1fr;
gap: 25px;
}
.value-item {
display: flex;
align-items: flex-start;
gap: 15px;
padding: 20px;
background: var(--bg-light);
border-radius: 12px;
border-left: 4px solid var(--primary-color);
transition: all 0.3s ease;
}
.value-item:hover {
transform: translateX(5px);
box-shadow: 0 5px 20px var(--shadow-light);
}
.value-icon {
font-size: 28px;
margin-top: 0;
flex-shrink: 0;
line-height: 1;
}
.value-text {
flex: 1;
}
.value-item h4 {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin: 0 0 8px 0;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.01em;
}
.value-item p {
font-size: 14px;
color: var(--text-light);
margin: 0;
font-family: 'Pretendard', sans-serif;
line-height: 1.5;
letter-spacing: -0.01em;
}
.about-image {
display: flex;
justify-content: center;
}
.company-image {
width: 100%;
max-width: 400px;
height: auto;
object-fit: contain;
border-radius: 16px;
box-shadow: 0 15px 50px var(--shadow-medium);
transition: transform 0.3s ease;
background-color: var(--white);
padding: 20px;
}
.company-image:hover {
transform: translateY(-5px) scale(1.02);
}
/* Products Section */
.products {
background: var(--bg-light);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.product-item {
background: var(--white);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 5px 25px var(--shadow-light);
border: 1px solid var(--border-color);
}
.product-item.featured {
border: 2px solid var(--accent-color);
transform: scale(1.02);
}
.product-item:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 20px 60px var(--shadow-medium);
}
.product-image {
position: relative;
height: 200px;
overflow: hidden;
}
.product-placeholder {
width: 100%;
height: 100%;
background: var(--gradient-primary);
display: flex;
align-items: center;
justify-content: center;
}
.product-icon {
font-size: 64px;
opacity: 0.9;
}
.product-badge {
position: absolute;
top: 15px;
right: 15px;
background: var(--gradient-accent);
color: var(--white);
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-info {
padding: 30px;
}
.product-info h3 {
font-size: 22px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 10px;
font-family: 'Pretendard', sans-serif;
}
.product-category {
color: var(--primary-color);
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.product-info p {
color: var(--text-light);
line-height: 1.6;
font-size: 15px;
margin-bottom: 20px;
}
.product-features {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.product-features span {
background: var(--bg-light);
color: var(--text-dark);
padding: 4px 12px;
border-radius: 16px;
font-size: 12px;
font-weight: 500;
border: 1px solid var(--border-color);
}
/* Technology Section */
.technology {
background: var(--white);
}
.tech-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 80px;
align-items: start;
}
.tech-stats {
display: grid;
gap: 30px;
}
.tech-stat {
text-align: center;
padding: 30px;
background: var(--gradient-primary);
color: var(--white);
border-radius: 16px;
box-shadow: 0 10px 40px rgba(30, 64, 175, 0.3);
}
.tech-number {
font-size: 36px;
font-weight: 800;
margin-bottom: 10px;
font-family: 'Space Grotesk', sans-serif;
}
.tech-label {
font-size: 14px;
font-weight: 500;
opacity: 0.9;
}
.tech-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.tech-feature {
padding: 25px;
background: var(--bg-light);
border-radius: 12px;
border-left: 4px solid var(--accent-color);
transition: all 0.3s ease;
}
.tech-feature:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px var(--shadow-light);
}
.tech-feature h4 {
font-size: 18px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 15px;
}
.tech-feature p {
color: var(--text-light);
font-size: 14px;
line-height: 1.6;
}
/* Cases Section */
.cases {
background: var(--bg-light);
}
.cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
}
.case-item {
background: var(--white);
border-radius: 16px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 5px 25px var(--shadow-light);
}
.case-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px var(--shadow-medium);
}
.case-image {
position: relative;
height: 200px;
overflow: hidden;
}
.case-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--success-color) 0%, #059669 100%);
display: flex;
align-items: center;
justify-content: center;
}
.case-icon {
font-size: 64px;
opacity: 0.9;
}
.case-overlay {
position: absolute;
top: 15px;
right: 15px;
background: rgba(0, 0, 0, 0.8);
color: var(--white);
padding: 8px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-align: center;
}
.case-overlay h4 {
margin: 0;
font-size: 11px;
margin-bottom: 2px;
}
.case-overlay p {
margin: 0;
font-size: 10px;
opacity: 0.9;
}
.case-info {
padding: 30px;
}
.case-info h3 {
font-size: 20px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 15px;
}
.case-details {
display: flex;
gap: 15px;
margin-bottom: 15px;
}
.case-type,
.case-scale {
background: var(--accent-color);
color: var(--white);
padding: 4px 12px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
}
.case-scale {
background: var(--accent-color);
}
.case-info p {
color: var(--text-light);
line-height: 1.6;
font-size: 14px;
}
/* Coverage Section */
.coverage {
background: var(--white);
}
.coverage-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.coverage-info h3 {
font-size: 24px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 30px;
}
.location-details {
display: grid;
gap: 25px;
margin-bottom: 40px;
}
.location-item {
padding: 25px;
background: var(--bg-light);
border-radius: 12px;
border-left: 4px solid var(--primary-color);
}
.location-item h4 {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 15px;
}
.location-item p {
color: var(--text-light);
font-size: 14px;
line-height: 1.6;
}
.service-areas h4 {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 20px;
}
.service-areas ul {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
}
.service-areas li {
color: var(--text-light);
padding: 12px 15px;
background: var(--bg-light);
border-radius: 8px;
border-left: 3px solid var(--secondary-color);
font-size: 14px;
}
.coverage-visual {
display: flex;
align-items: center;
}
.map-placeholder {
width: 100%;
background: var(--bg-light);
border-radius: 16px;
border: 2px dashed var(--border-color);
display: flex;
align-items: center;
justify-content: center;
min-height: 400px;
text-align: center;
}
.map-content h4 {
font-size: 18px;
color: var(--text-dark);
margin-bottom: 15px;
}
.map-content p {
color: var(--text-light);
margin-bottom: 10px;
font-size: 14px;
}
.map-content small {
font-size: 12px;
color: var(--text-muted);
}
/* Contact Section */
.contact {
background: var(--bg-light);
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
}
.contact-info {
display: grid;
gap: 25px;
}
.contact-item {
padding: 25px;
background: var(--white);
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 20px var(--shadow-light);
transition: all 0.3s ease;
}
.contact-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px var(--shadow-medium);
}
.contact-item h3 {
font-size: 16px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 15px;
}
.contact-detail {
font-size: 18px;
font-weight: 700;
color: var(--primary-color);
margin-bottom: 10px;
}
.contact-item small {
color: var(--text-muted);
font-size: 12px;
}
.contact-form {
background: var(--white);
padding: 40px;
border-radius: 16px;
box-shadow: 0 10px 40px var(--shadow-light);
}
.contact-form h3 {
font-size: 24px;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 30px;
text-align: center;
}
.inquiry-form {
display: grid;
gap: 20px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
padding: 15px;
border: 2px solid var(--border-color);
border-radius: 8px;
background-color: var(--white);
font-size: 14px;
font-family: inherit;
transition: all 0.3s ease;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.btn-submit {
padding: 16px 32px;
background: var(--gradient-primary);
color: var(--white);
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(30, 64, 175, 0.3);
}
.btn-submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(30, 64, 175, 0.4);
}
/* Loading Optimization - content-visibility for off-screen sections */
.detail-section,
.about-collage-section,
.cta-inquiry,
.footer,
.heated-overview-gallery,
.cases-stats-section {
content-visibility: auto;
contain-intrinsic-size: auto 500px;
}
/* Footer - 강화된 흰색 텍스트 스타일 */
.footer {
background: #FFFFFF;
color: #000000;
padding: 40px 0 30px;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.footer-content {
display: flex;
justify-content: space-between;
align-items: center;
gap: 60px;
max-width: 1400px;
margin: 0 auto;
}
/* Left Side - Logo & Company Name */
.footer-left {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.footer-logo-section {
display: flex;
align-items: center;
gap: 20px;
}
.footer-logo-img {
width: 130px;
height: 130px;
object-fit: contain;
}
.footer-company-name {
display: flex;
flex-direction: column;
gap: 3px;
}
.company-name-ko {
font-size: 21px;
font-weight: 700;
color: #000000;
letter-spacing: 1px;
}
.company-name-en {
font-size: 11px;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
letter-spacing: 0;
text-align-last: justify;
}
/* Right Side - Company Info */
.footer-right {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 40px;
text-align: right;
flex: 1;
justify-content: flex-end;
}
.footer-info-group {
display: flex;
flex-direction: column;
gap: 4px;
white-space: nowrap;
}
.footer-address,
.footer-factory {
font-size: 13px;
color: rgba(0, 0, 0, 0.9);
line-height: 1.5;
font-weight: 500;
}
.footer-detail {
font-size: 13px;
color: rgba(0, 0, 0, 0.85);
line-height: 1.5;
font-weight: 500;
}
.footer-contact {
font-size: 13px;
color: rgba(0, 0, 0, 0.85);
line-height: 1.5;
font-weight: 500;
}
.footer-copyright {
font-size: 12px;
color: rgba(0, 0, 0, 0.6);
width: 100%;
text-align: right;
margin-top: 8px;
font-weight: 400;
}
/* Responsive Design for Footer */
@media (max-width: 968px) {
.footer-content {
flex-direction: column;
align-items: flex-start;
gap: 30px;
}
.footer-right {
width: 100%;
justify-content: flex-start;
text-align: left;
}
.footer-copyright {
text-align: left;
}
}
@media (max-width: 640px) {
.footer {
padding: 30px 0 20px;
}
.footer-left {
gap: 15px;
}
.footer-logo-section {
gap: 15px;
}
.footer-logo-img {
width: 90px;
height: 90px;
}
.company-name-ko {
font-size: 16px;
}
.company-name-en {
font-size: 9px;
}
.footer-right {
gap: 15px 20px;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-stats .stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.nav-menu {
display: none;
}
.hero-container {
grid-template-columns: 1fr;
gap: 50px;
text-align: center;
padding: 0 20px 80px 20px;
}
.hero-content {
text-align: center;
}
.hero-animation {
justify-content: center;
margin-bottom: 25px;
}
.hero-title {
font-size: 42px;
}
.hero-stats .stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.about-content,
.coverage-content,
.contact-content,
.tech-content {
grid-template-columns: 1fr;
gap: 40px;
}
.products-grid,
.cases-grid {
grid-template-columns: 1fr;
}
.hero-cta {
flex-direction: column;
align-items: center;
}
.btn-primary,
.btn-secondary {
width: 200px;
}
section {
padding: 60px 0;
}
.section-title {
font-size: 32px;
}
.tech-features {
grid-template-columns: 1fr;
}
.service-areas ul {
grid-template-columns: 1fr;
}
}
@media (max-width: 480px) {
.hero-stats .stats-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.container {
padding: 0 15px;
}
.hero-container {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 15px 60px 15px;
}
.hero-title {
font-size: 32px;
}
.hero-stats .stats-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.contact-form {
padding: 30px 20px;
}
.products-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.product-info {
padding: 20px;
}
}
/* Animation Classes */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-content,
.section-header {
animation: fadeInUp 0.8s ease-out;
}
/* Smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* 테스트 CSS 제거됨 - 이제 모든 미디어쿼리에서 padding-top: 0 설정됨 */
/* Trust Highlights */
.trust-section {
background: var(--bg-light);
padding-top: 40px;
padding-bottom: 40px;
}
.trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
/* Special Section */
.special-section {
min-height: 60vh;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
position: relative;
overflow: hidden;
padding: 60px 0 90px 0;
}
.special-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 20%, rgba(194, 85, 77, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 80%, rgba(217, 116, 84, 0.08) 0%, transparent 50%);
pointer-events: none;
}
.special-title {
font-size: 6rem;
font-weight: 900;
text-align: center;
color: #000000;
margin: 0;
line-height: 1.1;
letter-spacing: -0.03em;
position: relative;
z-index: 2;
font-family: 'Inter', 'Pretendard', sans-serif;
max-width: 100%;
width: 100%;
white-space: nowrap;
}
.special-title::after {
content: '';
position: absolute;
bottom: -30px;
left: calc(50% - 100px);
width: 0;
height: 4px;
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
border-radius: 2px;
box-shadow: 0 4px 20px rgba(194, 85, 77, 0.4);
transition: width 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.special-title.line-drawn::after {
width: 200px;
}
/* Special Section 반응형 */
@media (max-width: 768px) {
.special-section {
min-height: 50vh;
padding: 40px 20px 70px 20px;
}
.special-title {
font-size: 3rem;
line-height: 1.2;
max-width: 100%;
width: 100%;
white-space: normal;
}
.special-title::after {
left: calc(50% - 60px);
height: 3px;
bottom: -20px;
}
.special-title.line-drawn::after {
width: 120px;
}
}
@media (max-width: 1024px) and (min-width: 769px) {
.special-section {
min-height: 55vh;
padding: 50px 40px 80px 40px;
}
.special-title {
font-size: 4.5rem;
line-height: 1.1;
max-width: 100%;
width: 100%;
white-space: normal;
}
.special-title::after {
left: calc(50% - 75px);
height: 4px;
bottom: -25px;
}
.special-title.line-drawn::after {
width: 150px;
}
}
@media (min-width: 1440px) {
.special-section {
min-height: 65vh;
padding: 80px 0 110px 0;
}
.special-title {
font-size: 7rem;
line-height: 1.1;
max-width: 100%;
width: 100%;
white-space: normal;
}
.special-title::after {
left: calc(50% - 420px);
height: 5px;
bottom: -35px;
}
.special-title.line-drawn::after {
width: 840px;
}
}
/* Detail Sections */
.detail-section {
background: #ffffff;
padding: 140px 0;
border-top: 1px solid var(--border-color);
}
.detail-section.alt {
background: #ffffff;
color: #000000;
}
.detail-section.alt .detail-title {
color: #000000;
}
.detail-section.alt .detail-title .text-outline {
color: #000000;
background: linear-gradient(180deg, transparent 70%, #FFE066 70%, #FFE066 90%, transparent 90%);
background-size: 0% 100%;
background-repeat: no-repeat;
background-position: left center;
font-weight: 600;
padding: 0 2px;
display: inline-block;
}
.detail-section.alt .detail-title .text-outline.animate-highlight {
animation: highlightSlide 0.8s cubic-bezier(0.65, 0, 0.85, 0) forwards;
}
@keyframes highlightSlide {
0% {
background-size: 0% 100%;
background-position: left center;
}
100% {
background-size: 100% 100%;
background-position: left center;
}
}
.detail-section.alt .detail-desc {
color: var(--text-light);
}
/* Remove separators around the Legacy section */
#detail-legacy.detail-section {
border-top: none;
padding-top: 200px;
}
#detail-references.detail-section {
border-top: none;
background: #ffffff;
}
/* Bottom Inquiry CTA */
.cta-inquiry {
padding: 0;
background: #ffffff;
position: relative;
overflow: hidden;
}
.cta-hero-wrapper {
position: relative;
min-height: calc(100vh - var(--nav-height));
display: flex;
align-items: center;
overflow: hidden;
}
.cta-hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, #87CEEB 0%, #4A90E2 50%, #2E5C8A 100%);
background-image: url('images/bg/main_last.webp');
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
z-index: 0;
}
.cta-inquiry .container {
position: relative;
z-index: 2;
max-width: 1400px;
width: 100%;
padding: 0 80px;
}
.cta-hero-content {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - var(--nav-height));
padding: 120px 0;
}
.cta-hero-text {
position: relative;
z-index: 3;
max-width: 60%;
color: #ffffff;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 60px;
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
text-align: center;
margin: 0 auto;
}
.cta-hero-kicker {
font-size: clamp(14px, 1.2vw, 18px);
font-weight: 300;
letter-spacing: 0.05em;
margin: 0 0 24px;
color: rgba(255, 255, 255, 0.95);
text-transform: uppercase;
}
.cta-hero-title {
font-size: clamp(36px, 5.5vw, 72px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 48px;
color: #ffffff;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}
.cta-title-line {
display: block;
}
.cta-title-line:first-child {
margin-bottom: 8px;
}
.cta-hero-button {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 8px;
font-size: clamp(16px, 1.5vw, 20px);
padding: 16px 32px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease, opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
font-weight: 600;
line-height: 1;
vertical-align: middle;
padding-top: 17px;
padding-bottom: 15px;
position: relative;
overflow: hidden;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2),
0 0 30px rgba(255, 255, 255, 0.1);
opacity: 0;
transform: translate3d(0, 30px, 0);
will-change: opacity, transform;
}
.cta-hero-button.animate-in {
opacity: 1;
transform: translate3d(0, 0, 0);
will-change: auto;
}
/* 테두리 빛나는 효과 - 애니메이션 */
.cta-hero-button::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
border-radius: 8px;
background: linear-gradient(45deg,
transparent 30%,
rgba(255, 255, 255, 0.8) 50%,
transparent 70%);
background-size: 200% 200%;
animation: borderGlow 3s linear infinite;
z-index: -1;
opacity: 0;
transition: opacity 0.3s ease;
}
.cta-hero-button:hover::before {
opacity: 1;
}
@keyframes borderGlow {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
.cta-hero-button:hover {
background: rgba(255, 255, 255, 0.25);
border-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 25px rgba(255, 255, 255, 0.4),
0 0 50px rgba(255, 255, 255, 0.2),
0 8px 24px rgba(0, 0, 0, 0.2);
}
@media (max-width: 1024px) {
.cta-inquiry .container {
padding: 0 48px;
}
.cta-hero-text {
max-width: 70%;
padding: 48px;
}
.cta-hero-background {
background-size: cover;
background-position: center center;
}
}
@media (max-width: 768px) {
.cta-hero-wrapper {
min-height: 80vh;
}
.cta-hero-content {
padding: 80px 0;
min-height: 80vh;
}
.cta-hero-text {
max-width: 85%;
padding: 40px;
}
.cta-hero-title {
font-size: clamp(28px, 8vw, 48px);
margin-bottom: 32px;
}
.cta-hero-kicker {
font-size: 14px;
margin-bottom: 16px;
}
.cta-hero-background {
background-size: cover;
background-position: center center;
}
}
@media (max-width: 640px) {
.cta-inquiry .container {
padding: 0 24px;
}
.cta-hero-wrapper {
min-height: 70vh;
}
.cta-hero-content {
padding: 60px 0;
min-height: 70vh;
}
.cta-hero-text {
max-width: 100%;
padding: 24px;
border-radius: 16px;
}
.cta-hero-title {
font-size: clamp(24px, 10vw, 36px);
margin-bottom: 24px;
}
.cta-hero-button {
font-size: 16px;
padding: 14px 28px;
}
}
.detail-grid {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 48px;
align-items: center;
}
.detail-title {
font-size: 44px;
font-weight: 800;
color: var(--text-dark);
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.detail-desc {
color: var(--text-light);
font-size: 18px;
line-height: 1.7;
}
/* Keep 18년 업력 base sizes (36/18) */
.detail-media img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 20px 50px var(--shadow-light);
}
.detail-header {
text-align: center;
max-width: 900px;
margin: 0 auto 36px auto;
}
#detail-references .detail-header {
text-align: left;
margin: 0 0 36px 0;
}
.detail-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.detail-gallery img {
width: 100%;
height: 240px;
object-fit: cover;
border-radius: 16px;
box-shadow: 0 16px 40px var(--shadow-light);
}
/* 두 장 배치용 변형 */
.detail-gallery.two {
grid-template-columns: repeat(2, 1fr);
}
/* 세로 나열용 변형 */
.detail-gallery.stack {
grid-template-columns: 1fr;
max-width: 1400px;
margin: 0 auto;
gap: 24px;
}
.detail-gallery.stack img {
height: auto;
max-height: 800px;
width: 100%;
}
/* References section: remove gap between stacked images */
#detail-references .detail-gallery.stack {
gap: 0;
}
/* References section: remove rounded corners on images */
#detail-references .detail-gallery img {
border-radius: 0;
opacity: 0;
transition: opacity 2s ease-in-out;
}
/* References section: fade in animation */
#detail-references .detail-gallery img.fade-in-visible {
opacity: 1;
}
/* ===============================
Home: Business Showcase (carousel)
=============================== */
.business-showcase {
background: #ffffff;
padding: 90px 0;
overflow-x: hidden;
/* prevent page-level horizontal scroll */
}
.business-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
/* cards left, text right */
grid-template-areas: 'cards intro';
gap: 40px;
align-items: center;
}
.business-cards {
grid-area: cards;
}
.business-intro {
grid-area: intro;
}
.business-intro .kicker {
color: var(--primary-color);
font-weight: 800;
letter-spacing: 0.08em;
font-size: 16px;
text-transform: uppercase;
margin-bottom: 8px;
font-family: 'Noto Sans', sans-serif;
}
.business-intro .intro-title {
font-size: 36px;
font-weight: 900;
letter-spacing: -0.02em;
margin-bottom: 10px;
}
.business-intro .intro-desc {
color: var(--text-light);
margin-bottom: 18px;
font-size: 18px;
}
.carousel-controls {
display: flex;
gap: 10px;
}
.carousel-btn {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid var(--border-color);
background: #fff;
box-shadow: 0 6px 18px var(--shadow-light);
cursor: pointer;
font-weight: 700;
transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.carousel-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px var(--shadow-medium);
background: var(--bg-light);
}
.business-showcase .container {
overflow-x: hidden;
}
.business-cards {
position: relative;
overflow: hidden;
}
.business-cards .cards-stage {
position: absolute;
inset: 0;
border-radius: 28px;
background: #2B2B2B;
opacity: .95;
z-index: 0;
}
.cards-track {
position: relative;
z-index: 1;
display: flex;
gap: 22px;
overflow-x: auto;
overflow-y: hidden;
padding: 22px 20px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
width: 100%;
contain: content;
}
.cards-track:focus {
outline: none;
}
.cards-track::-webkit-scrollbar {
height: 10px;
}
.cards-track::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.25);
border-radius: 10px;
}
.cards-track.auto-scroll {
scroll-snap-type: none;
}
.business-card {
flex: 0 0 320px;
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
border: 1px solid var(--border-color);
scroll-snap-align: start;
text-decoration: none;
color: inherit;
transition: transform .25s ease, box-shadow .25s ease;
}
.business-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.18);
}
.business-card .card-media {
height: 190px;
overflow: hidden;
}
.business-card .card-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.business-card .card-body {
background: #fff;
padding: 14px 16px 18px;
}
.card-eyebrow {
color: #9CA3AF;
font-size: 12px;
display: block;
margin-bottom: 6px;
font-family: 'Noto Sans', sans-serif;
}
.card-title {
font-size: 16px;
font-weight: 800;
color: #111827;
}
@media (max-width: 1024px) {
.business-grid {
grid-template-columns: 1fr;
gap: 28px;
grid-template-areas: 'intro' 'cards';
}
.business-cards .cards-stage {
inset: 0;
}
.cards-track {
padding-left: 20px;
}
}
/* ===============================
Home: About Collage CTA
=============================== */
.about-collage-section {
background: #ffffff;
padding: 140px 0 230px;
}
.about-collage-grid {
display: grid;
grid-template-columns: 1.2fr 0.8fr;
gap: 48px;
align-items: center;
}
.collage {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 18px;
}
.collage-item.small {
height: 220px;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 16px 40px var(--shadow-light);
}
.collage-item.large {
grid-row: span 2;
height: 460px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 18px 48px var(--shadow-medium);
}
.collage-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Collage Animation */
.collage-item.slide-from-top {
opacity: 0;
}
.collage-item.slide-from-left {
opacity: 0;
}
.collage-item.slide-from-right {
opacity: 0;
}
.collage-item.slide-from-top.animate {
animation: slideFromTop 0.8s ease-out forwards;
}
.collage-item.slide-from-left.animate {
animation: slideFromLeft 0.8s ease-out forwards;
animation-delay: 0.7s;
}
.collage-item.slide-from-right.animate {
animation: slideFromRight 0.8s ease-out forwards;
animation-delay: 0.4s;
}
@keyframes slideFromTop {
from {
opacity: 0;
transform: translateY(-300px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideFromLeft {
from {
opacity: 0;
transform: translateX(-200px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideFromRight {
from {
opacity: 0;
transform: translateX(500px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.stat-chip {
position: absolute;
background: #fff;
border-radius: 10px;
padding: 10px 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
border: 1px solid var(--border-color);
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.stat-chip strong {
font-size: 22px;
font-weight: 900;
color: #111827;
}
.stat-chip span {
font-size: 11px;
color: #6B7280;
font-weight: 700;
letter-spacing: .06em;
}
.chip-a {
left: -10px;
top: -12px;
}
.chip-b {
right: -10px;
bottom: -14px;
}
.about-copy .kicker {
color: var(--primary-color);
font-weight: 800;
letter-spacing: .08em;
font-size: 16px;
text-transform: uppercase;
margin-bottom: 8px;
font-family: 'Noto Sans', sans-serif;
}
.about-copy .about-title {
font-size: 44px;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.25;
margin-bottom: 14px;
}
.about-copy .about-desc {
color: var(--text-light);
font-size: 18px;
line-height: 1.7;
margin-bottom: 18px;
}
.feature-list {
list-style: none;
display: grid;
gap: 10px;
margin: 0 0 22px 0;
padding: 0;
}
.feature-list li {
display: flex;
align-items: center;
gap: 10px;
color: #1F2937;
opacity: 0;
transform: translateY(20px);
transition: opacity 1.2s ease, transform 1.2s ease;
}
.feature-list li.fade-in {
opacity: 1;
transform: translateY(0);
}
.feature-list li::before {
content: '✓';
color: var(--success-color);
font-weight: 900;
}
.about-cta {
display: inline-block;
margin-top: 6px;
}
/* ====================================
ABOUT SPLIT (shared layout for sub pages)
==================================== */
.about-split {
background: #ffffff;
padding: 80px 0 120px 0;
}
.about-split .split-grid {
display: grid;
grid-template-columns: 0.9fr 0.6fr;
gap: 80px;
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
.about-split.alt {
background: var(--bg-light);
}
.about-pill {
display: inline-block;
padding: 8px 14px;
border: 1px solid var(--border-color);
border-radius: 999px;
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
color: var(--text-dark);
background: #fff;
}
.about-heading {
font-size: 42px;
font-weight: 900;
letter-spacing: -0.02em;
margin: 12px 0 10px 0;
}
.about-desc {
color: var(--text-light);
font-size: 18px;
line-height: 1.7;
max-width: 640px;
}
.about-cta-row {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 16px;
}
.stat-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 28px;
padding-top: 22px;
border-top: 1px solid var(--border-color);
}
.stat-row.two {
grid-template-columns: repeat(2, 1fr);
}
.stat {
display: flex;
flex-direction: column;
gap: 4px;
}
.stat .num {
font-size: 36px;
font-weight: 900;
letter-spacing: -0.02em;
color: var(--text-dark);
}
.stat .label {
font-size: 12px;
color: var(--text-muted);
font-weight: 700;
letter-spacing: .06em;
}
.about-photo {
background: #fff;
padding: 0;
border: none;
border-radius: 0;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 16px 64px rgba(0, 0, 0, 0.12);
}
.about-photo img {
width: 100%;
height: auto;
border-radius: 0;
display: block;
object-fit: cover;
aspect-ratio: 3/4;
}
.split-grid.reverse {
grid-template-columns: 0.85fr 1.15fr;
}
.split-grid.reverse .split-media {
order: 1;
}
.split-grid.reverse .split-text {
order: 2;
}
.bullets-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 24px;
margin-top: 14px;
}
.bullet {
display: flex;
align-items: flex-start;
gap: 10px;
color: var(--text-dark);
}
.bullet .icon {
width: 22px;
height: 22px;
border-radius: 999px;
background: #e6f1ff;
color: #2563eb;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 14px;
line-height: 1;
margin-top: 2px;
}
.bullet span {
font-size: 14px;
color: var(--text-dark);
}
/* Greeting page letter style */
.greeting-letter {
line-height: 1.95;
letter-spacing: -0.005em;
word-break: keep-all;
overflow-wrap: break-word;
font-size: 19px;
color: var(--text-dark);
margin-top: 12px;
}
.greeting-letter p {
margin: 10px 0 18px 0;
}
.greeting-letter p.signature {
margin-top: 24px;
font-weight: 600;
}
@media (max-width: 1024px) {
.about-split .split-grid,
.split-grid.reverse {
grid-template-columns: 1fr;
gap: 28px;
}
.stat-row {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 768px) {
.about-heading {
font-size: 32px;
}
.about-copy .about-title {
font-size: 32px;
}
.detail-title {
font-size: 32px;
}
.stat-row {
grid-template-columns: 1fr;
}
.bullets-grid {
grid-template-columns: 1fr;
}
.about-split.alt {
padding: 50px 0 80px 0;
}
.about-split {
padding: 60px 0 80px 0;
}
}
@media (max-width: 1024px) {
.about-collage-grid {
grid-template-columns: 1fr;
}
.collage-item.small {
height: 180px;
}
.collage-item.large {
height: 360px;
}
}
.detail-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 24px;
}
.detail-card {
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px var(--shadow-light);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.detail-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px var(--shadow-medium);
}
.detail-card-media img {
width: 100%;
height: 180px;
object-fit: cover;
}
.detail-card-body {
padding: 18px;
}
.detail-card-body h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 8px;
}
.detail-card-body p {
font-size: 14px;
color: var(--text-light);
line-height: 1.6;
}
@media (max-width: 1024px) {
.detail-grid {
grid-template-columns: 1fr;
}
.detail-gallery {
grid-template-columns: 1fr;
}
}
.trust-item {
display: grid;
grid-template-columns: 120px 1fr;
gap: 16px;
align-items: center;
background: #ffffff;
border: 1px solid var(--border-color);
border-radius: 12px;
padding: 16px;
box-shadow: 0 6px 20px var(--shadow-light);
}
.trust-media img {
width: 100%;
height: 90px;
object-fit: cover;
border-radius: 8px;
}
.trust-content h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 6px;
}
.trust-content p {
font-size: 14px;
color: var(--text-light);
}
@media (max-width: 1024px) {
.trust-grid {
grid-template-columns: 1fr;
}
.trust-item {
grid-template-columns: 100px 1fr;
}
}
/* ====================================
HISTORY INTRO GRID STYLES
==================================== */
.history-intro-grid {
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 60px;
align-items: center;
padding: 0 0 20px 0;
}
.history-intro-text {
max-width: 100%;
}
.history-intro-centered {
text-align: center;
max-width: 900px;
margin: 0 auto;
padding: 0;
}
.history-intro-centered .about-pill {
margin-bottom: 8px;
}
.history-intro-centered .about-heading {
margin-top: 8px;
}
.history-intro-centered .about-desc {
margin: 0 auto;
}
/* 연혁 페이지 섹션 패딩 조정 */
.about-split.alt {
padding: 80px 0 120px 0;
}
.history-intro-bullets {
display: flex;
align-items: center;
justify-content: center;
}
.history-intro-bullets .bullets-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
width: 100%;
}
/* Responsive */
@media (max-width: 1024px) {
.history-intro-grid {
grid-template-columns: 1fr;
gap: 40px;
padding: 0 0 15px 0;
}
.history-intro-bullets .bullets-grid {
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
}
@media (max-width: 768px) {
.history-intro-grid {
padding: 0 0 10px 0;
}
.history-intro-bullets .bullets-grid {
grid-template-columns: 1fr;
}
}
/* ====================================
HISTORY SECTION STYLES
==================================== */
.history-section {
background: #ffffff;
padding: 10px 0 120px 0;
position: relative;
overflow: hidden;
}
.history-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(30, 64, 175, 0.02) 0%, rgba(59, 130, 246, 0.01) 100%);
pointer-events: none;
}
.history-header {
text-align: center;
padding: 20px 0 30px 0;
position: relative;
z-index: 1;
}
.history-main-title {
font-size: 64px;
font-weight: 900;
letter-spacing: -0.03em;
color: #000000;
margin: 0;
font-family: 'Space Grotesk', 'Pretendard', sans-serif;
text-transform: uppercase;
position: relative;
display: inline-block;
}
.history-main-title::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--accent-color) 0%, #fb923c 100%);
border-radius: 2px;
}
.timeline {
position: relative;
max-width: 1100px;
margin: 40px auto 0;
padding: 40px 0;
}
/* Timeline vertical line - Minimal design */
.timeline::before {
content: '';
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(180deg,
transparent 0%,
#d1d5db 5%,
#d1d5db 95%,
transparent 100%);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
width: 100%;
margin-bottom: 100px;
opacity: 1;
transform: translateY(0);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline-item.timeline-hidden {
opacity: 0;
transform: translateY(60px);
}
.timeline-item.fade-in {
opacity: 1 !important;
transform: translateY(0) !important;
}
/* Alternate left-right layout */
.timeline-item:nth-child(odd) .timeline-content {
margin-left: 0;
margin-right: auto;
padding-right: 80px;
text-align: right;
}
.timeline-item:nth-child(even) .timeline-content {
margin-left: auto;
margin-right: 0;
padding-left: 80px;
text-align: left;
}
.timeline-content {
position: relative;
width: 48%;
background: #ffffff;
padding: 45px 38px;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
border: 1px solid #000000;
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.timeline-item:hover .timeline-content {
transform: translateY(-6px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
border-color: #000000;
}
/* Timeline marker - Minimal circle */
.timeline-marker {
position: absolute;
left: 50%;
top: 50px;
width: 32px;
height: 32px;
background: var(--white);
border: 2px solid var(--accent-color);
border-radius: 50%;
transform: translateX(-50%);
z-index: 20;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.08);
transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.marker-icon {
display: none;
}
.timeline-item:hover .timeline-marker {
width: 36px;
height: 36px;
box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.12);
}
/* Timeline period badge - Minimal */
.timeline-period {
display: inline-block;
background: transparent;
color: var(--primary-color);
padding: 0;
border-radius: 0;
font-size: 14px;
font-weight: 600;
margin-bottom: 12px;
font-family: 'Space Grotesk', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
box-shadow: none;
}
.timeline-period::after {
content: '';
display: block;
width: 40px;
height: 2px;
background: var(--primary-color);
margin-top: 8px;
}
.timeline-item:nth-child(even) .timeline-period::after {
margin-left: 0;
}
.timeline-title {
font-size: 26px;
font-weight: 700;
color: #1f2937;
margin: 16px 0 18px 0;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.01em;
line-height: 1.35;
}
/* Highlights list styling */
.timeline-highlights {
display: flex;
flex-direction: column;
gap: 8px;
margin: 18px 0 22px 0;
}
.timeline-highlights .highlight {
font-size: 18px;
color: #4b5563 !important;
font-weight: 500;
padding: 6px 0 !important;
background: transparent !important;
border-left: none !important;
border-radius: 0 !important;
transition: all 0.3s ease;
position: relative;
padding-left: 0 !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: #4b5563 !important;
}
.timeline-highlights .highlight::before {
content: '';
display: none;
}
.timeline-item:hover .timeline-highlights .highlight {
color: #1f2937 !important;
padding-left: 4px;
-webkit-text-fill-color: #1f2937 !important;
}
.timeline-desc {
font-size: 17px;
color: #6b7280;
line-height: 1.7;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.003em;
font-weight: 400;
margin-top: 12px;
}
/* Responsive Timeline */
@media (max-width: 1024px) {
.history-header {
padding: 50px 0 35px 0;
}
.history-main-title {
font-size: 52px;
}
.timeline::before {
left: 30px;
}
.timeline-marker {
left: 30px;
}
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
width: calc(100% - 80px);
margin-left: 80px;
padding: 35px 28px;
text-align: left;
padding-left: 30px;
}
.timeline-item:nth-child(odd) .timeline-content {
margin-right: 0;
padding-right: auto;
}
}
@media (max-width: 768px) {
.history-section {
padding: 30px 0 60px 0;
}
.history-header {
padding: 20px 0 20px 0;
}
.history-main-title {
font-size: 42px;
}
.timeline {
margin: 40px auto 0;
padding: 10px 0;
}
.timeline::before {
left: 20px;
}
.timeline-marker {
left: 20px;
width: 28px;
height: 28px;
top: 44px;
}
.timeline-item:hover .timeline-marker {
width: 32px;
height: 32px;
}
.timeline-item {
margin-bottom: 60px;
}
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
width: calc(100% - 60px);
margin-left: 60px;
padding: 28px 20px;
text-align: left;
}
.timeline-period {
font-size: 12px;
}
.timeline-title {
font-size: 22px;
}
.highlight {
font-size: 13px;
}
.timeline-desc {
font-size: 16px;
}
}
@media (max-width: 480px) {
.history-header {
padding: 30px 0 20px 0;
}
.history-main-title {
font-size: 32px;
}
.timeline::before {
left: 15px;
}
.timeline-marker {
left: 15px;
width: 24px;
height: 24px;
top: 40px;
}
.timeline-item:hover .timeline-marker {
width: 28px;
height: 28px;
}
.timeline-item:nth-child(odd) .timeline-content,
.timeline-item:nth-child(even) .timeline-content {
width: calc(100% - 45px);
margin-left: 45px;
padding: 24px 16px;
}
.timeline-title {
font-size: 20px;
}
.timeline-desc {
font-size: 15px;
}
}
/* ====================================
CASES PAGE STYLES
==================================== */
/* Cases Hero Section */
.cases-hero {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
padding: 140px 0 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.cases-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.cases-hero-content {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.cases-hero-title {
font-size: 56px;
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.02em;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.cases-hero-subtitle {
font-size: 20px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 50px;
font-weight: 400;
letter-spacing: -0.01em;
}
.cases-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
max-width: 900px;
margin: 25px auto 0;
}
.cases-stat-item {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 30px 20px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.cases-stat-item:hover {
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.25);
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}
.cases-stat-number {
font-size: 42px;
font-weight: 800;
color: #000;
margin-bottom: 10px;
font-family: 'Space Grotesk', sans-serif;
}
.cases-stat-label {
font-size: 16px;
color: #000;
font-weight: 500;
}
/* Gallery Section */
.gallery-section {
padding: 130px 0 100px 0;
background: var(--white);
}
.gallery-section .section-header {
margin-bottom: 50px;
}
.gallery-section .container {
max-width: 1600px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
margin-top: 10px;
}
.gallery-item {
position: relative;
overflow: hidden;
border-radius: 0;
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.15),
0 4px 12px rgba(0, 0, 0, 0.1),
0 2px 6px rgba(0, 0, 0, 0.08);
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: var(--white);
cursor: pointer;
will-change: transform;
}
.gallery-item:hover {
transform: translateY(-10px) translateZ(0);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.25),
0 12px 24px rgba(0, 0, 0, 0.18),
0 6px 12px rgba(0, 0, 0, 0.15);
will-change: auto;
}
.gallery-image-wrapper {
position: relative;
width: 100%;
padding-bottom: 75%;
/* 4:3 Aspect Ratio */
overflow: hidden;
}
.gallery-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
will-change: transform;
transform: translateZ(0);
}
.gallery-item:hover .gallery-image {
transform: scale(1.1) translateZ(0);
}
.gallery-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
opacity: 0;
transition: opacity 0.4s ease;
display: flex;
align-items: flex-end;
padding: 30px;
}
.gallery-item:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay-content {
color: var(--white);
transform: translateY(20px) translateZ(0);
transition: transform 0.4s ease, opacity 0.4s ease;
will-change: transform, opacity;
}
.gallery-item:hover .gallery-overlay-content {
transform: translateY(0) translateZ(0);
will-change: auto;
}
.gallery-overlay-content h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
font-family: 'Pretendard', sans-serif;
}
.gallery-overlay-content p {
font-size: 14px;
margin-bottom: 15px;
opacity: 0.9;
line-height: 1.6;
word-break: keep-all;
overflow-wrap: break-word;
}
.gallery-view-btn {
background: var(--white);
color: #000000;
border: none;
padding: 10px 24px;
border-radius: 25px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Pretendard', sans-serif;
}
.gallery-view-btn:hover {
background: var(--accent-color);
color: var(--white);
transform: scale(1.05);
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.95);
backdrop-filter: blur(10px);
justify-content: center;
align-items: center;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.modal-close {
position: absolute;
top: 30px;
right: 40px;
color: var(--white);
font-size: 48px;
font-weight: 300;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10001;
line-height: 1;
}
.modal-close:hover {
color: var(--accent-color);
transform: rotate(90deg);
}
.modal-content-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 1400px;
padding: 0 100px;
}
.modal-content {
max-width: 1200px;
width: 100%;
text-align: center;
animation: slideUp 0.4s ease;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.modal-content img {
max-width: 100%;
max-height: 70vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
transition: opacity 0.3s ease;
}
.modal-info {
margin-top: 30px;
color: var(--white);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.modal-info h3 {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
font-family: 'Pretendard', sans-serif;
}
.modal-info p {
font-size: 16px;
line-height: 1.6;
opacity: 0.9;
}
.modal-nav {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
color: var(--white);
font-size: 32px;
width: 60px;
height: 60px;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 10002;
}
.modal-prev {
left: 20px;
}
.modal-next {
right: 20px;
}
.modal-nav:hover {
background: var(--white);
color: var(--primary-color);
transform: scale(1.1);
}
/* Project Stats Section */
.project-stats-section {
padding: 100px 0;
background: var(--bg-light);
}
.project-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 50px;
}
.project-stat-card {
background: var(--white);
padding: 40px;
border-radius: 16px;
text-align: center;
box-shadow: 0 10px 30px var(--shadow-light);
transition: all 0.3s ease;
border: 2px solid transparent;
}
.project-stat-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px var(--shadow-medium);
border-color: var(--primary-color);
}
.project-stat-icon {
font-size: 64px;
margin-bottom: 20px;
}
.project-stat-card h3 {
font-size: 24px;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 15px;
font-family: 'Pretendard', sans-serif;
}
.project-stat-detail {
color: var(--text-light);
font-size: 16px;
margin-bottom: 20px;
line-height: 1.6;
}
.project-stat-badge {
display: inline-block;
background: var(--gradient-primary);
color: var(--white);
padding: 8px 20px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* CTA Section */
.cases-cta-section {
padding: 140px 0;
background: url('images/bg/opt3_3.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
text-align: center;
position: relative;
overflow: hidden;
}
.cases-cta-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
}
.cases-cta-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.cases-cta-content h2 {
font-size: 52px;
font-weight: 800;
color: var(--white);
margin-bottom: 24px;
font-family: 'Pretendard', sans-serif;
letter-spacing: -0.02em;
}
.cases-cta-content p {
font-size: 22px;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 48px;
line-height: 1.6;
}
.cases-cta-btn {
display: inline-block;
background: var(--white);
color: var(--primary-color);
padding: 22px 60px;
border-radius: 50px;
font-size: 20px;
font-weight: 700;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
font-family: 'Pretendard', sans-serif;
}
.cases-cta-btn:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
background: var(--accent-color);
color: var(--white);
}
/* Responsive Design for Cases Page */
@media (max-width: 1024px) {
.gallery-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 25px;
}
.modal-content-wrapper {
padding: 0 80px;
}
.cases-hero-title {
font-size: 48px;
}
.cases-cta-section {
padding: 120px 0;
}
.cases-cta-content h2 {
font-size: 46px;
}
.cases-cta-content p {
font-size: 21px;
}
.cases-cta-btn {
padding: 20px 55px;
font-size: 19px;
}
}
@media (max-width: 768px) {
.cases-hero {
padding: 120px 0 60px;
}
.cases-hero-title {
font-size: 36px;
}
.cases-hero-subtitle {
font-size: 16px;
}
.cases-stats {
grid-template-columns: 1fr;
gap: 20px;
max-width: 400px;
}
.gallery-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.gallery-section {
padding: 90px 0 60px 0;
}
.project-stats-section {
padding: 60px 0;
}
.project-stats-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.cases-cta-section {
padding: 100px 0;
}
.cases-cta-content h2 {
font-size: 40px;
}
.cases-cta-content p {
font-size: 20px;
}
.modal-content-wrapper {
padding: 0 60px;
}
.modal-nav {
width: 50px;
height: 50px;
font-size: 24px;
}
.modal-close {
top: 20px;
right: 20px;
font-size: 36px;
}
.modal-info h3 {
font-size: 24px;
}
.modal-info p {
font-size: 14px;
}
}
@media (max-width: 480px) {
.cases-hero-title {
font-size: 28px;
}
.cases-hero-subtitle {
font-size: 14px;
margin-bottom: 30px;
}
.cases-stat-number {
font-size: 32px;
}
.cases-stat-label {
font-size: 14px;
}
.modal-content-wrapper {
padding: 0 20px;
}
.modal-nav {
display: none;
}
.gallery-overlay {
opacity: 1;
background: linear-gradient(to top, rgba(30, 64, 175, 0.95) 0%, rgba(30, 64, 175, 0.5) 50%, transparent 100%);
}
.gallery-overlay-content {
transform: translateY(0);
}
.cases-cta-content h2 {
font-size: 26px;
}
.cases-cta-btn {
padding: 15px 40px;
font-size: 16px;
}
}
/* Business Pages Specific Styles */
.business-hero {
background-image: url('images/bg/banner/business.webp');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 120px 0 20px 0;
text-align: center;
margin-top: 76px;
position: relative;
}
.business-hero .container {
position: relative;
}
.business-hero-label {
position: absolute;
top: -60px;
left: 40px;
font-size: 5rem;
font-weight: 900;
color: rgba(176, 25, 15, 0.25);
letter-spacing: -0.03em;
line-height: 1;
pointer-events: none;
user-select: none;
font-family: 'Pretendard', sans-serif;
font-style: italic;
}
.business-hero h1 {
font-size: 3.5rem;
font-weight: 800;
color: #1E293B;
margin-bottom: 1rem;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
}
.business-hero p {
font-size: 1.375rem;
color: #64748B;
font-weight: 400;
max-width: 700px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.business-section {
padding: 20px 20px 100px 20px;
background-color: #ffffff;
}
.business-category {
max-width: 1400px;
margin: 0 auto;
}
/* New Product Card Layout - Inspired by ABELTY Design */
.business-items {
display: flex;
flex-direction: column;
gap: 80px;
}
.business-item {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
background-color: #fff;
border-radius: 0;
overflow: hidden;
box-shadow: none;
transition: all 0.4s ease;
}
.business-item:nth-child(even) {
direction: rtl;
}
.business-item:nth-child(even)>* {
direction: ltr;
}
.business-item-image {
background: linear-gradient(135deg, #A8D5E2 0%, #8BC6DB 100%);
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
position: relative;
overflow: visible;
}
.business-item-image::before {
content: '';
position: absolute;
width: 300px;
height: 300px;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
top: -100px;
right: -100px;
}
.business-item-image img {
/* 대표 이미지: 왼쪽/오른쪽 경계에 걸쳐 겹치도록 배치 */
position: absolute;
top: 50%;
right: -60px;
/* 기본(이미지 컬럼이 좌측일 때) 경계 쪽으로 겹침 */
transform: translateY(-50%);
width: clamp(240px, 55%, 360px);
max-width: 360px;
height: auto;
object-fit: contain;
z-index: 1;
filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
transition: transform 0.5s ease;
}
/* 짝수 항목(이미지 컬럼이 오른쪽)에선 왼쪽 경계로 겹치도록 */
.business-item:nth-child(even) .business-item-image img {
right: auto;
left: -60px;
}
.business-item:hover .business-item-image img {
transform: scale(1.05);
}
.business-item-content {
background: linear-gradient(135deg, #FFF9F5 0%, #FFF5EE 100%);
display: flex;
flex-direction: column;
justify-content: center;
padding: 80px 70px;
position: relative;
}
.business-item-label {
display: inline-block;
color: #EF4444;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 20px;
}
.business-item h3 {
font-size: 2.25rem;
font-weight: 700;
color: #1E293B;
margin-bottom: 24px;
line-height: 1.3;
letter-spacing: -0.02em;
}
.business-item-description {
font-size: 1rem;
color: #64748B;
line-height: 1.7;
margin-bottom: 30px;
}
.business-item-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: #2D2D2D;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
}
.business-item-button svg {
width: 20px;
height: 20px;
stroke: white;
stroke-width: 2;
fill: none;
}
.business-item-button:hover {
background-color: #1E293B;
transform: translateX(5px);
}
/* Heated Seat Detail Page */
.heated-main {
padding: 60px 20px 140px 20px;
background-color: #ffffff;
}
.heated-main .container {
max-width: 1200px;
}
.section-label {
display: inline-block;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1D4ED8;
margin-bottom: 16px;
}
.lead {
font-size: 1.125rem;
color: #475569;
line-height: 1.7;
margin-bottom: 36px;
}
.heated-overview {
padding: 120px 0 60px 0;
border-bottom: 1px solid #E2E8F0;
}
/* RAMP BUS 섹션 위아래 라인 제거 */
#ramp-bus.heated-overview {
border-top: none;
border-bottom: none;
}
/* Bus Stop Solutions - BIT Section 상단 여백 줄이기 */
.heated-main #bit-overview.heated-overview {
padding-top: 10px;
}
/* Child Safety Zone - 상하단 여백 줄이기 */
#child-safety.heated-overview {
padding-top: 30px;
padding-bottom: 10px;
}
/* System Features - 상단 여백 줄이기 */
#system-features.heated-overview {
padding-top: 30px;
}
/* LED Signs - 스마트 안내 전광판(SID) 상단 간격 줄이기 */
#smart-sid {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* LED Signs - Child Safety 섹션 뒤 간격 줄이기 */
#smart-led + section {
padding-top: 10px;
}
/* LED Signs - 어린이보호구역 스마트 전광판 타이틀 폰트 크기 줄이기 */
#smart-led h2 {
font-size: 2.6rem;
}
/* Voice Guidance - product-line-section과 heated-main 사이 간격 줄이기 */
body:has(.voice-guide-gallery) .product-line-section {
padding-bottom: 60px;
}
body:has(.voice-guide-gallery) .heated-main {
padding-top: 20px;
}
/* Voice Guidance - 모든 가로 라인 제거 */
body:has(.voice-guide-gallery) .heated-overview {
border-bottom: none;
}
body:has(.voice-guide-gallery) .heated-feature-point {
border-bottom: none;
}
/* 온열의자 페이지 - 원격관제 시스템 섹션 위의 줄 제거 */
.heated-seat-page #heated-features.heated-overview {
border-bottom: none;
}
/* 온열의자 페이지 - 원격관제 시스템 섹션 아래의 줄 제거 */
.heated-seat-page .heated-remote {
border-bottom: none;
}
/* Top Section: Left Text, Right Image */
.heated-overview-top {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: center;
margin-bottom: 100px;
}
.heated-overview-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.heated-overview-text .heated-gallery-label {
margin-bottom: 0;
}
.heated-overview-text .heated-gallery-label+.heated-overview-features {
margin-top: 20px;
}
.heated-overview-text h2 {
font-size: 3rem;
font-weight: 700;
color: #0F172A;
margin-bottom: 16px;
letter-spacing: -0.03em;
line-height: 1.2;
}
/* Child Safety Section - 타이틀 한 줄 유지 */
#child-safety .heated-overview-text h2 {
white-space: nowrap;
}
.heated-overview-text p {
font-size: 1.25rem;
line-height: 1.8;
color: #475569;
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
margin-bottom: 0;
}
.heated-overview-features {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 20px;
padding: 0;
}
.heated-feature-point {
display: flex;
flex-direction: column;
gap: 8px;
padding: 24px 0;
border-bottom: 1px solid #E2E8F0;
transition: border-color 0.2s ease;
}
.heated-feature-point:last-child {
border-bottom: none;
}
.heated-feature-point:hover {
border-bottom-color: #CBD5E1;
}
.heated-feature-point strong {
font-size: 1.25rem;
font-weight: 600;
color: #0F172A;
letter-spacing: -0.02em;
line-height: 1.4;
}
.heated-feature-point span {
font-size: 1rem;
color: #64748B;
line-height: 1.6;
font-weight: 400;
}
.heated-overview-image {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.heated-overview-image img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 0;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.15);
}
/* Child Safety Section - 이미지 사이즈 조정 및 우측 정렬 */
#child-safety .heated-overview-image {
display: flex;
justify-content: flex-end;
align-items: center;
}
#child-safety .heated-overview-image img {
max-width: 105%;
width: 105%;
margin-left: auto;
}
/* Accessible Stop - 이미지 세로 배치 */
#accessible-stop .heated-overview-top {
grid-template-columns: 1fr 1.2fr;
gap: 80px;
}
#accessible-stop .heated-overview-image {
flex-direction: column;
gap: 15px;
}
#accessible-stop .heated-overview-image img {
width: 80%;
max-width: 80%;
margin: 0 auto;
}
/* Voice Guide Section - 자연스러운 줄바꿈 및 레이아웃 최적화 */
#voice-guide .heated-overview-text p {
max-width: 100%;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.75;
text-align: justify;
text-justify: inter-word;
}
#voice-guide .heated-overview-image {
display: flex;
justify-content: center;
align-items: center;
}
#voice-guide .heated-overview-image img {
width: 100%;
max-width: 90%;
height: auto;
object-fit: contain;
}
/* Voice Guide - Gallery 섹션 상단 간격 줄이기 */
#voice-guide + .voice-guide-gallery {
margin-top: -80px;
}
/* Shuttle System - 메인 이미지 크기 조정 */
#shuttle-system .heated-overview-image img {
width: 100%;
max-width: 95%;
height: auto;
object-fit: cover;
object-position: center 20%;
}
/* Shuttle System - 본문 내용 임팩트 및 줄바꿈 */
#shuttle-system .heated-overview-text p {
font-size: 1.25rem;
line-height: 1.8;
color: #475569;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
white-space: normal;
text-align: left;
}
/* Voice Guide 메인 이미지 영역 - 두 이미지 배치 */
.voice-main-images {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
width: 100%;
}
.voice-main-img {
width: 100%;
max-width: 70%;
height: auto;
object-fit: contain;
border-radius: 0;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.15);
}
.voice-sub-img {
width: 100%;
max-width: 60%;
height: auto;
object-fit: contain;
border-radius: 0;
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.12);
margin-top: -8px;
}
/* Voice Guide Gallery - 최적화된 레이아웃 */
.voice-guide-gallery .bit-case-card {
display: flex;
flex-direction: row;
gap: 40px;
align-items: center;
background: #ffffff;
border-radius: 16px;
padding: 0;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.voice-guide-gallery .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.voice-guide-gallery .heated-gallery-item {
flex: 0 0 50%;
max-width: 50%;
border-radius: 0;
overflow: hidden;
}
.voice-guide-gallery .heated-gallery-item img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* Voice Guide Detail Images - 두 이미지 가로 배치 */
.voice-detail-card {
display: flex;
flex-direction: row;
gap: 40px;
align-items: center;
}
.voice-detail-images {
flex: 0 0 40%;
max-width: 40%;
display: flex;
flex-direction: column;
gap: 20px;
}
.voice-detail-images .heated-gallery-item {
flex: 1;
max-width: 100%;
width: 100%;
}
.voice-detail-images .heated-gallery-item img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
.voice-guide-gallery .bit-case-info {
flex: 1;
padding: 32px;
display: flex;
flex-direction: column;
justify-content: center;
word-wrap: break-word;
overflow-wrap: break-word;
}
.voice-guide-gallery .bit-case-info h3 {
font-size: 1.5rem;
font-weight: 700;
color: #0F172A;
margin-bottom: 32px;
letter-spacing: -0.02em;
text-align: center;
}
/* Shuttle System - 제목과 아래 줄 간격 */
.shuttle-system-section .bit-case-info h3 {
margin-bottom: 32px !important;
}
.voice-guide-gallery .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.voice-guide-gallery .bit-case-features li {
font-size: 1.125rem;
line-height: 1.8;
color: #475569;
padding: 8px 0;
padding-left: 24px;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
hyphens: auto;
white-space: normal;
text-align: left;
}
.voice-guide-gallery .bit-case-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
font-size: 1.2rem;
}
.voice-guide-gallery .bit-case-features li:first-child {
padding-top: 0;
}
/* Voice Guide 시스템 구성 섹션 */
.voice-guide-gallery .heated-gallery-section-system {
display: flex;
flex-direction: column;
gap: 24px;
margin-top: 40px;
}
.voice-guide-gallery .voice-system-card {
display: flex;
flex-direction: row;
gap: 40px;
align-items: center;
}
.voice-guide-gallery .voice-system-image {
flex: 0 0 40%;
max-width: 40%;
}
.voice-guide-gallery .voice-system-image img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* Voice Guide 시스템 구성 섹션 텍스트 자연스러운 줄바꿈 */
.voice-guide-gallery .voice-system-card .bit-case-info h3 {
word-wrap: break-word;
overflow-wrap: break-word;
text-align: center;
margin-bottom: 32px !important;
}
.voice-guide-gallery .voice-system-card .bit-case-features li {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
hyphens: auto;
white-space: normal;
text-align: left;
}
/* Shuttle System - 섹션 간격 */
.shuttle-features-section {
margin-top: 60px;
}
.shuttle-system-section {
margin-top: 80px;
}
.shuttle-software-section {
margin-top: 80px;
}
.shuttle-benefits-section {
margin-top: 80px;
}
/* Shuttle System - 기능 2열 그리드 */
.shuttle-features-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 120px !important;
margin-top: 24px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
align-items: stretch;
}
.shuttle-feature-card {
display: flex;
flex-direction: column;
gap: 16px;
max-width: 100%;
height: 100%;
}
.shuttle-feature-card .heated-gallery-label {
margin-bottom: 0;
min-height: 48px;
display: flex;
align-items: center;
}
.shuttle-feature-card:not(:has(.heated-gallery-label))::before {
content: "";
display: block;
min-height: 48px;
}
.shuttle-feature-card .bit-case-card {
flex-direction: column !important;
height: 100%;
width: 100%;
flex: 1;
}
.shuttle-feature-card .voice-detail-card {
flex-direction: column !important;
align-items: stretch !important;
gap: 0 !important;
}
.shuttle-feature-card .heated-gallery-item {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
.shuttle-feature-card .bit-case-card {
flex-direction: column !important;
align-items: stretch !important;
}
.shuttle-feature-card .bit-case-info {
flex: 1;
padding: 24px;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
}
.shuttle-feature-card .bit-case-features {
text-align: left !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
display: block !important;
}
.shuttle-feature-card .bit-case-features li {
text-align: left !important;
font-size: 1.125rem !important;
line-height: 1.7 !important;
color: #475569 !important;
padding: 8px 0 !important;
padding-left: 24px !important;
position: relative !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
word-break: keep-all !important;
white-space: normal !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
}
.shuttle-feature-card .bit-case-features li::before {
content: "•" !important;
position: absolute !important;
left: 0 !important;
color: #1e3a8a !important;
font-weight: bold !important;
font-size: 1.2rem !important;
}
/* Shuttle System - 관리 소프트웨어 그리드 */
.shuttle-software-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 0;
}
.shuttle-software-item {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.shuttle-software-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.shuttle-software-item img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.shuttle-software-info {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.shuttle-software-info h4 {
font-size: 1.125rem;
font-weight: 600;
color: #0F172A;
margin: 0 0 8px 0;
line-height: 1.4;
}
.shuttle-software-info p {
font-size: 0.9375rem;
color: #475569;
line-height: 1.6;
margin: 0;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
}
/* Shuttle System - 솔루션 타이틀 스타일 */
.shuttle-solution-title {
font-size: 1.125rem;
font-weight: 600;
color: #0F172A;
margin: 0 0 12px 0;
line-height: 1.4;
}
/* Shuttle System - 셔틀버스 안내시스템 섹션 본문 줄바꿈 */
.shuttle-system-section .bit-case-features li {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
white-space: normal;
}
/* Shuttle System - 장점 이미지 섹션 */
.shuttle-benefits-image {
width: 100%;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.shuttle-benefits-image img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
/* RAMP BUS 메인 이미지 크기 조정 */
#ramp-bus .rampbus-main-image {
display: flex;
align-items: center;
justify-content: center;
}
#ramp-bus .rampbus-main-image img {
max-width: 85%;
width: 85%;
height: auto;
object-fit: contain;
}
/* RAMP BUS 텍스트 줄바꿈 자연스럽게 */
#ramp-bus .heated-overview-text p {
word-wrap: break-word;
word-break: keep-all;
line-height: 1.8;
}
/* RAMP BUS 결선도 이미지 */
.rampbus-wiring-image {
width: 100%;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.rampbus-wiring-image img {
width: 100%;
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
object-fit: contain;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
/* RAMP BUS 결선도 섹션 타이틀 아래 여백 */
.rampbus-wiring-section .heated-gallery-label {
margin-bottom: 1px;
}
/* RAMP BUS 시스템 결선도 제목과 리스트 사이 간격 */
.rampbus-wiring-section .bit-case-info h3 {
margin-bottom: 32px !important;
}
/* Bottom Gallery Section */
.heated-overview-gallery {
display: flex;
flex-direction: column;
gap: 24px;
}
/* RAMP BUS 키패드 섹션 여백 줄이기 */
.rampbus-features-section {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
.rampbus-features-section .heated-gallery-section-features {
margin-top: 0;
margin-bottom: 0;
}
.rampbus-features-section .shuttle-features-grid {
margin-top: 0;
}
.heated-gallery-section-features,
.heated-gallery-section-options {
display: flex;
flex-direction: column;
gap: 20px;
}
.heated-gallery-label {
display: inline-block;
background: #0F172A;
color: #FFFFFF;
padding: 8px 20px;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
width: fit-content;
margin-bottom: 0;
}
/* 관리 소프트웨어와 장점 섹션 - 라벨과 이미지 간격 제거 */
.shuttle-software-section .heated-gallery-label+.shuttle-software-grid,
.shuttle-benefits-section .heated-gallery-label+.shuttle-benefits-image {
margin-top: 0;
}
.heated-gallery-item {
width: 100%;
border-radius: 20px;
overflow: hidden;
background: #FFFFFF;
}
.heated-gallery-item img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
/* Vehicle LED Gallery - 3열 그리드 레이아웃 */
.vehicle-led-gallery-section {
margin: 0 0 60px 0;
width: 100%;
padding: 0 20px;
}
/* 차량 LED 섹션 하단 여백 줄이기 - 다른 섹션에 영향 없도록 특정 타겟팅 */
.heated-main #vehicle-led.heated-overview {
padding-top: 130px;
/* 60px에서 90px로 늘려 무정차 방지시스템과의 간격 확대 */
padding-bottom: 0 !important;
margin-bottom: 0 !important;
border-bottom: none;
}
/* Vehicle LED Section의 마지막 feature-point 하단 여백 제거 */
#vehicle-led .heated-overview-features {
margin-bottom: 0;
padding-bottom: 0;
}
#vehicle-led .heated-feature-point:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
/* 차량 LED 갤러리 섹션 상단 여백 제거 */
.vehicle-led-gallery-section {
margin-top: -50px !important;
margin-bottom: 60px;
padding-top: 0;
}
/* Vehicle LED Section 다음 갤러리 여백 제거 */
.heated-main:has(#vehicle-led) {
padding-bottom: 0;
}
.vehicle-led-container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
padding: 0 60px;
padding-top: 0;
}
.vehicle-led-container .heated-gallery-label {
margin-top: 100px;
margin-bottom: 40px;
}
.vehicle-led-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: 40px;
row-gap: 50px;
width: 100%;
margin-top: 0;
padding-top: 0;
}
.vehicle-led-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
height: 100%;
transition: all 0.3s ease;
}
.vehicle-led-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.vehicle-led-image {
width: 100%;
height: 280px;
overflow: hidden;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
}
.vehicle-led-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.vehicle-led-content {
padding: 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.vehicle-led-content h3 {
font-size: 1.25rem;
font-weight: 600;
color: #0F172A;
margin: 0 0 16px 0;
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
}
.vehicle-led-features {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
}
.vehicle-led-features li {
font-size: 0.9375rem;
color: #475569;
line-height: 1.7;
padding: 6px 0;
padding-left: 20px;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
hyphens: auto;
}
.vehicle-led-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
font-size: 1rem;
}
.heated-options-column {
display: flex;
flex-direction: column;
gap: 24px;
align-items: center;
}
.heated-options-column {
width: 100%;
}
.heated-options-column .heated-gallery-item:first-child {
width: 55%;
margin: 0 auto;
}
.heated-gallery-arrow {
display: flex;
justify-content: center;
align-items: center;
color: #64748B;
flex-shrink: 0;
margin: -8px 0;
}
.heated-gallery-arrow svg {
width: 40px;
height: 40px;
}
.heated-remote,
.heated-safety,
.heated-use {
padding: 100px 0;
border-bottom: 1px solid #E2E8F0;
}
.heated-use {
border-bottom: none;
}
.heated-section-head {
max-width: 720px;
margin-bottom: 48px;
}
.heated-section-head h2 {
font-size: 2.25rem;
font-weight: 700;
color: #0F172A;
margin-bottom: 16px;
letter-spacing: -0.01em;
}
.heated-section-head p {
font-size: 1.25rem;
color: #4B5563;
line-height: 1.7;
}
.heated-remote-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.heated-remote-images {
display: flex;
flex-direction: column;
gap: 24px;
position: sticky;
top: 100px;
}
.heated-remote-image {
width: 100%;
}
.heated-remote-image img {
width: 100%;
height: auto;
}
.heated-remote-full-image {
width: calc(100% + 80px);
margin-left: -40px;
margin-right: -40px;
margin-top: 60px;
}
.heated-remote-full-image img {
width: 100%;
height: auto;
}
.heated-remote-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 40px;
}
.heated-card {
background-color: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 32px;
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
}
.heated-card h3 {
font-size: 1.375rem;
font-weight: 600;
color: #111827;
margin-bottom: 16px;
}
.heated-card p {
font-size: 1rem;
color: #4B5563;
line-height: 1.7;
}
.heated-remote-list {
margin-top: 40px;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 14px;
color: #455468;
line-height: 1.7;
}
.heated-remote-list strong {
color: #1E293B;
font-weight: 600;
}
.heated-safety-content {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: 60px;
align-items: start;
}
.heated-safety-image {
position: sticky;
top: 100px;
}
.heated-safety-image img {
width: 100%;
height: auto;
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.heated-feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.heated-feature {
background-color: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 28px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
}
.heated-feature h3 {
font-size: 1.25rem;
font-weight: 600;
color: #111827;
margin-bottom: 12px;
}
.heated-feature p {
font-size: 0.995rem;
color: #4B5563;
line-height: 1.6;
}
.heated-use-content {
display: flex;
flex-direction: column;
gap: 60px;
}
.heated-use-images {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 32px;
margin-bottom: 20px;
}
.heated-use-image-item {
background-color: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 16px;
padding: 24px;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.heated-use-image-item:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}
.heated-use-image-item img {
width: 100%;
height: auto;
border-radius: 12px;
margin-bottom: 20px;
}
.heated-use-image-item h3 {
font-size: 1.125rem;
font-weight: 600;
color: #111827;
margin-bottom: 8px;
}
.heated-use-image-item p {
font-size: 0.9375rem;
color: #6B7280;
line-height: 1.6;
margin: 0;
}
.heated-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 48px;
background-color: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 20px;
padding: 48px;
box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}
.heated-split-block h3 {
font-size: 1.25rem;
font-weight: 600;
color: #111827;
margin-bottom: 16px;
}
.heated-split-block ul {
list-style: disc;
padding-left: 20px;
display: flex;
flex-direction: column;
gap: 12px;
color: #475569;
line-height: 1.7;
margin: 0;
}
/* Responsive Design for Business Items */
@media (max-width: 1024px) {
.business-item {
grid-template-columns: 1fr;
min-height: auto;
}
.business-item:nth-child(even) {
direction: ltr;
}
.business-item-image {
padding: 50px;
min-height: 400px;
}
/* 모바일/태블릿에서는 일반 흐름으로 복귀 */
.business-item-image img {
position: relative;
top: auto;
right: auto;
left: auto;
transform: none;
width: 100%;
max-width: 520px;
}
.business-item-content {
padding: 50px 40px;
}
.business-item h3 {
font-size: 1.875rem;
}
}
@media (max-width: 1200px) {
.heated-overview-top {
gap: 60px;
}
.heated-overview-text h2 {
font-size: 2.5rem;
}
}
@media (max-width: 1024px) {
.heated-overview-top {
grid-template-columns: 1fr;
gap: 50px;
}
.heated-overview-gallery {
gap: 32px;
}
/* Voice Guide Gallery - 태블릿 반응형 */
.voice-guide-gallery .bit-case-card {
flex-direction: column;
gap: 0;
}
.voice-guide-gallery .heated-gallery-item {
flex: 1;
max-width: 100%;
}
.voice-guide-gallery .bit-case-info {
padding: 24px;
}
/* Voice Guide Detail Images 태블릿 */
.voice-detail-card {
flex-direction: column;
gap: 0;
}
.voice-detail-images {
flex: 1;
max-width: 100%;
gap: 16px;
}
/* Voice Guide 메인 이미지 태블릿 */
.voice-main-images {
gap: 20px;
}
.voice-main-img {
max-width: 65%;
}
.voice-sub-img {
max-width: 55%;
}
/* Voice Guide 시스템 섹션 태블릿 */
.voice-guide-gallery .voice-system-card {
flex-direction: column;
gap: 0;
}
.voice-guide-gallery .voice-system-image {
flex: 1;
max-width: 100%;
}
/* Shuttle System - 섹션 간격 태블릿 */
.shuttle-features-section,
.shuttle-system-section,
.shuttle-software-section,
.shuttle-benefits-section {
margin-top: 60px;
}
/* Shuttle System - 메인 이미지 태블릿 */
#shuttle-system .heated-overview-image img {
max-width: 80%;
}
/* Shuttle System - 기능 그리드 태블릿 */
.shuttle-features-grid {
grid-template-columns: repeat(2, 1fr);
gap: 100px !important;
max-width: 100%;
}
/* Shuttle System - 관리 소프트웨어 그리드 태블릿 */
.shuttle-software-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.heated-remote-content {
grid-template-columns: 1fr;
gap: 40px;
}
.heated-remote-images {
position: relative;
top: auto;
}
.heated-remote-full-image {
width: calc(100% + 80px);
margin-left: -40px;
margin-right: -40px;
margin-top: 40px;
}
.heated-option-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.heated-remote-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.heated-safety-content {
grid-template-columns: 1fr;
gap: 40px;
}
.heated-safety-image {
position: relative;
top: auto;
}
.heated-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.heated-use-images {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 24px;
}
.heated-split {
gap: 32px;
padding: 40px;
}
}
@media (max-width: 820px) {
.heated-main {
padding: 40px 16px 100px 16px;
}
.heated-overview {
padding: 80px 0 70px 0;
}
.heated-overview-top {
margin-bottom: 60px;
gap: 40px;
}
.heated-overview-gallery {
gap: 24px;
}
.heated-section-head {
margin-bottom: 32px;
}
.heated-remote-full-image {
width: calc(100% + 32px);
margin-left: -16px;
margin-right: -16px;
margin-top: 32px;
}
}
@media (max-width: 768px) {
.heated-overview-text h2 {
font-size: 2.25rem;
}
.heated-overview-features {
margin-top: 20px;
}
/* Vehicle LED Gallery - 태블릿 반응형 */
.vehicle-led-gallery-section {
padding: 0 15px;
}
.vehicle-led-container {
max-width: 100%;
padding: 0 50px;
}
.vehicle-led-grid {
grid-template-columns: repeat(2, 1fr);
column-gap: 24px;
row-gap: 40px;
}
.vehicle-led-image {
height: 240px;
}
.heated-feature-point {
padding: 20px 0;
}
.heated-feature-point strong {
font-size: 1.125rem;
}
.heated-feature-point span {
font-size: 0.9375rem;
}
.heated-overview-image img {
border-radius: 0;
}
.heated-overview-gallery {
gap: 20px;
}
.heated-gallery-section-features,
.heated-gallery-section-options {
gap: 20px;
}
/* Voice Guide Gallery - 모바일 반응형 */
.voice-guide-gallery .bit-case-card {
flex-direction: column;
gap: 0;
border-radius: 12px;
}
.voice-guide-gallery .heated-gallery-item {
flex: 1;
max-width: 100%;
}
.voice-guide-gallery .heated-gallery-item img {
max-height: 250px;
object-fit: contain;
}
.voice-guide-gallery .bit-case-info {
padding: 20px;
}
.voice-guide-gallery .bit-case-info h3 {
font-size: 1.25rem;
margin-bottom: 12px;
}
.voice-guide-gallery .bit-case-features li {
font-size: 1rem;
line-height: 1.6;
padding: 6px 0;
padding-left: 20px;
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
white-space: normal;
}
/* Voice Guide Detail Images 모바일 */
.voice-detail-card {
flex-direction: column;
gap: 0;
}
.voice-detail-images {
flex: 1;
max-width: 100%;
gap: 12px;
}
.voice-detail-images .heated-gallery-item img {
max-height: 200px;
}
/* Voice Guide 텍스트 줄바꿈 모바일 최적화 */
#voice-guide .heated-overview-text p {
text-align: left;
font-size: 1.125rem;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Voice Guide 리스트 항목 모바일 줄바꿈 */
.voice-guide-gallery .bit-case-features li {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
hyphens: auto;
white-space: normal;
font-size: 1rem;
}
/* Voice Guide 시스템 구성 모바일 줄바꿈 */
.voice-guide-gallery .voice-system-card .bit-case-features li {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
hyphens: auto;
white-space: normal;
}
/* Voice Guide 메인 이미지 모바일 */
.voice-main-images {
gap: 16px;
}
.voice-main-img {
max-width: 100%;
}
.voice-sub-img {
max-width: 85%;
margin-top: -4px;
}
/* Voice Guide 시스템 섹션 모바일 */
.voice-guide-gallery .heated-gallery-section-system {
margin-top: 32px;
}
.voice-guide-gallery .voice-system-card {
flex-direction: column;
gap: 0;
}
.voice-guide-gallery .voice-system-image {
flex: 1;
max-width: 100%;
}
/* Shuttle System - 섹션 간격 모바일 */
.shuttle-features-section,
.shuttle-system-section,
.shuttle-software-section,
.shuttle-benefits-section {
margin-top: 48px;
}
/* Shuttle System - 메인 이미지 모바일 */
#shuttle-system .heated-overview-image img {
max-width: 90%;
}
/* Shuttle System - 본문 모바일 */
#shuttle-system .heated-overview-text p {
font-size: 1.125rem;
}
/* Shuttle System - 기능 그리드 모바일 */
.shuttle-features-grid {
grid-template-columns: 1fr;
gap: 60px !important;
max-width: 100%;
}
/* Shuttle System - 장점 이미지 모바일 */
.shuttle-benefits-image {
margin-top: 0;
}
/* RAMP BUS 메인 이미지 모바일 */
#ramp-bus .rampbus-main-image img {
max-width: 95%;
width: 95%;
}
/* RAMP BUS 결선도 이미지 모바일 */
.rampbus-wiring-image {
width: 100%;
max-width: 100%;
}
.rampbus-wiring-image img {
width: 100%;
max-width: 100%;
}
/* Shuttle System - 관리 소프트웨어 그리드 모바일 */
.shuttle-software-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.heated-options-column {
gap: 20px;
}
.heated-options-column .heated-gallery-item:first-child {
width: 100%;
}
.heated-gallery-arrow {
margin: -8px 0;
}
.heated-remote-grid {
grid-template-columns: 1fr;
}
.heated-feature-grid {
grid-template-columns: 1fr;
}
.heated-option-grid {
grid-template-columns: 1fr;
}
.heated-use-images {
grid-template-columns: 1fr;
gap: 20px;
}
.heated-split {
grid-template-columns: 1fr;
padding: 32px;
}
.heated-section-head h2 {
font-size: 2rem;
}
}
@media (max-width: 560px) {
.heated-overview-top {
margin-bottom: 40px;
gap: 32px;
}
.heated-overview-text h2 {
font-size: 2rem;
}
.heated-overview-text .lead {
font-size: 1rem;
}
.heated-overview-gallery {
gap: 24px;
}
.heated-card,
.heated-feature {
padding: 24px;
}
.heated-split {
padding: 28px;
}
}
@media (max-width: 768px) {
.business-hero {
padding: 100px 0 20px 0;
}
.business-hero-label {
font-size: 3rem;
top: -40px;
left: 35px;
}
.business-hero h1 {
font-size: 2.5rem;
}
.business-hero p {
font-size: 1.125rem;
}
.business-items {
gap: 50px;
}
.business-item-image {
padding: 40px;
min-height: 350px;
}
.business-item-content {
padding: 40px 30px;
}
.business-item h3 {
font-size: 1.5rem;
}
}
.overview-section {
padding: 80px 20px;
max-width: 1200px;
margin: 0 auto;
}
.overview-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
text-align: center;
}
.overview-card {
background-color: #fff;
padding: 40px 30px;
border-radius: 10px;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.overview-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1);
}
.overview-card h2 {
font-size: 1.75rem;
font-weight: 700;
color: #2d3748;
margin-bottom: 15px;
}
.overview-card p {
font-size: 1rem;
color: #4a5568;
line-height: 1.6;
margin-bottom: 25px;
}
.overview-card .card-link {
display: inline-block;
font-weight: 600;
color: #3182ce;
text-decoration: none;
transition: color 0.3s ease;
}
.overview-card .card-link:hover {
color: #2b6cb0;
}
/* Galaxy Button Effect */
:root {
--galaxy-transition: 0.25s;
--galaxy-spark: 1.8s;
--galaxy-hue: 220;
}
body {
--galaxy-active: 0;
}
.btn-primary-galaxy {
--cut: 0.1em;
--active: 0;
--bg:
radial-gradient(120% 120% at 126% 126%,
hsl(var(--galaxy-hue) calc(var(--active) * 97%) 98% / calc(var(--active) * 0.9)) 40%,
transparent 50%) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
radial-gradient(120% 120% at 120% 120%,
hsl(var(--galaxy-hue) calc(var(--active) * 97%) 70% / calc(var(--active) * 1)) 30%,
transparent 70%) calc(100px - (var(--active) * 100px)) 0 / 100% 100% no-repeat,
hsl(var(--galaxy-hue) calc(var(--active) * 100%) calc(12% - (var(--active) * 8%)));
background: var(--bg);
font-size: 1.1rem;
font-weight: 600;
border: 0;
cursor: pointer;
padding: 14px 36px;
display: inline-flex;
align-items: center;
gap: 0.25em;
white-space: nowrap;
border-radius: 50px;
position: relative;
box-shadow:
0 0 calc(var(--active) * 3em) calc(var(--active) * 1.5em) hsl(var(--galaxy-hue) 97% 61% / 0.5),
0 0.05em 0 0 hsl(var(--galaxy-hue) calc(var(--active) * 97%) calc((var(--active) * 50%) + 30%)) inset,
0 -0.05em 0 0 hsl(var(--galaxy-hue) calc(var(--active) * 97%) calc(var(--active) * 10%)) inset;
transition: box-shadow var(--galaxy-transition), transform var(--galaxy-transition), opacity var(--galaxy-transition);
scale: calc(1 + (var(--active) * 0.1));
transform-style: preserve-3d;
perspective: 100vmin;
overflow: hidden;
text-decoration: none;
color: hsl(0 0% calc(60% + (var(--active) * 26%)));
will-change: transform, box-shadow, opacity;
transform: translateZ(0);
}
.btn-primary-galaxy:active {
scale: 1;
}
.btn-primary-galaxy .star {
height: calc(var(--size) * 1px);
aspect-ratio: 1;
background: white;
border-radius: 50%;
position: absolute;
opacity: var(--alpha);
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(10deg) rotate(0deg) translateY(calc(var(--distance) * 1px));
animation: galaxy-orbit calc(var(--duration) * 1s) calc(var(--delay) * -1s) infinite linear;
}
@keyframes galaxy-orbit {
to {
transform: translate(-50%, -50%) rotate(10deg) rotate(360deg) translateY(calc(var(--distance) * 1px));
}
}
.btn-primary-galaxy .galaxy {
position: absolute;
width: 100%;
aspect-ratio: 1;
top: 50%;
left: 50%;
translate: -50% -50%;
overflow: hidden;
opacity: var(--active);
transition: opacity var(--galaxy-transition);
}
.btn-primary-galaxy .galaxy__ring {
height: 200%;
width: 200%;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-28%, -40%) rotateX(-24deg) rotateY(-30deg) rotateX(90deg);
transform-style: preserve-3d;
}
.btn-primary-galaxy .galaxy__container {
position: absolute;
inset: 0;
opacity: var(--active);
transition: opacity var(--galaxy-transition);
mask: radial-gradient(white, transparent);
}
.btn-primary-galaxy .star--static {
animation: none;
top: 50%;
left: 50%;
transform: translate(0, 0);
max-height: 4px;
filter: brightness(4);
opacity: 0.9;
animation:
galaxy-move-x calc(var(--duration) * 0.1s) calc(var(--delay) * -0.1s) infinite linear,
galaxy-move-y calc(var(--duration) * 0.2s) calc(var(--delay) * -0.2s) infinite linear;
}
.btn-primary-galaxy:hover .star--static {
animation-play-state: paused;
}
@keyframes galaxy-move-x {
0% {
translate: -100px 0;
}
100% {
translate: 100px 0;
}
}
@keyframes galaxy-move-y {
0% {
transform: translate(0, -50px);
}
100% {
transform: translate(0, 50px);
}
}
.btn-primary-galaxy .spark {
position: absolute;
inset: 0;
border-radius: 50px;
rotate: 0deg;
overflow: hidden;
mask: linear-gradient(white, transparent 50%);
/* run animation only on hover to reduce idle cost */
will-change: transform;
}
@keyframes galaxy-flip {
to {
rotate: 360deg;
}
}
.btn-primary-galaxy .spark::before {
content: "";
position: absolute;
width: 200%;
aspect-ratio: 1;
top: 0%;
left: 50%;
z-index: -1;
translate: -50% -15%;
rotate: 0;
transform: rotate(-90deg);
opacity: calc((var(--active)) + 0.4);
background: conic-gradient(from 0deg,
transparent 0 340deg,
white 360deg);
transition: opacity var(--galaxy-transition);
}
.btn-primary-galaxy .spark::after {
content: "";
position: absolute;
inset: var(--cut);
border-radius: 50px;
}
.btn-primary-galaxy .backdrop {
position: absolute;
inset: var(--cut);
background: var(--bg);
border-radius: 50px;
transition: background var(--galaxy-transition);
}
@keyframes galaxy-rotate {
to {
transform: rotate(90deg);
}
}
.btn-primary-galaxy:hover .spark {
animation: galaxy-flip calc(var(--galaxy-spark) * 2) infinite steps(2, end);
}
.btn-primary-galaxy:hover .spark::before {
animation: galaxy-rotate var(--galaxy-spark) linear infinite both;
}
.btn-primary-galaxy:hover {
--active: 1;
}
.btn-primary-galaxy .text {
translate: 2% calc(-6% + 1px);
letter-spacing: 0.01ch;
position: relative;
z-index: 2;
color: #ffffff;
pointer-events: none;
}
/* Split Intro (text left, image right) */
.split-intro {
padding: 140px 0 120px;
}
.split-grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 40px;
align-items: center;
}
.split-title {
font-size: 44px;
line-height: 1.2;
font-weight: 900;
letter-spacing: -0.01em;
margin: 0 0 18px;
color: #000;
}
.split-lead {
color: var(--text-light);
font-size: 18px;
line-height: 1.7;
margin: 0 0 12px;
max-width: 56ch;
}
.split-paragraph {
color: #000;
margin: 0 0 12px;
}
.split-who {
margin-top: 22px;
}
.split-who .who-kicker {
font-weight: 800;
letter-spacing: 0.08em;
opacity: 0.9;
margin: 0 0 6px;
}
.split-who .who-desc {
color: rgba(255, 255, 255, 0.75);
}
.split-media {
position: relative;
}
.split-media .media-main img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
}
.split-media .media-overlay {
position: absolute;
right: 2%;
bottom: -6%;
width: 48%;
max-width: 520px;
}
.split-media .media-overlay img {
width: 100%;
height: auto;
display: block;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}
/* LED 섹션 전용 튜닝: 대표이미지 80% 정사각, 서브이미지 왼쪽 중앙 겹침 */
#split-led .split-grid .split-media {
justify-self: end;
}
#split-led .split-media {
width: fit-content;
}
#split-led .split-media .media-main {
position: relative;
display: flex;
justify-content: flex-end;
}
#split-led .split-media .media-main img {
width: 80%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
}
#split-led.split-intro.large-images .split-media .media-main img {
max-width: 80%;
}
#split-led .split-media .media-overlay {
left: calc(-6% + 20px);
right: auto;
top: 50%;
bottom: auto;
transform: translateY(-50%);
width: 38%;
}
/* 버스 솔루션 섹션: 대표이미지 80% 정사각, 서브이미지 우측 중앙 겹침 */
#split-bus .split-media {
width: fit-content;
}
#split-bus .split-media .media-main {
position: relative;
display: flex;
justify-content: flex-start;
}
#split-bus .split-media .media-main img {
width: 80%;
aspect-ratio: 1 / 1;
height: auto;
object-fit: cover;
}
#split-bus.split-intro.large-images .split-media .media-main img {
max-width: 80%;
}
#split-bus .split-media .media-overlay {
right: calc(-6% + 30px);
left: auto;
top: 50%;
bottom: auto;
transform: translateY(-50%);
width: 38%;
}
@media (max-width: 1024px) {
.split-grid {
grid-template-columns: 1fr;
}
.split-media .media-overlay {
position: absolute;
right: 4%;
bottom: -10%;
width: 52%;
}
#split-led .split-media .media-overlay {
left: 4%;
right: auto;
top: auto;
bottom: -10%;
transform: none;
width: 52%;
}
#split-bus .split-media .media-main img {
width: 100%;
max-width: 100%;
aspect-ratio: auto;
}
#split-bus .split-media .media-overlay {
right: 4%;
left: auto;
top: auto;
bottom: -10%;
transform: none;
width: 52%;
}
}
@media (max-width: 640px) {
.split-intro {
padding: 116px 0 100px;
}
.split-title {
font-size: 32px;
}
.split-lead {
font-size: 16px;
}
.split-media .media-overlay {
position: static;
width: 88%;
margin: -24px auto 0;
}
#split-led .split-media .media-main img {
width: 100%;
max-width: 100%;
aspect-ratio: auto;
object-fit: cover;
}
#split-led .split-media .media-overlay {
position: static;
width: 88%;
margin: -24px auto 0;
transform: none;
}
#split-bus .split-media .media-main img {
width: 100%;
max-width: 100%;
aspect-ratio: auto;
object-fit: cover;
}
#split-bus .split-media .media-overlay {
position: static;
width: 88%;
margin: -24px auto 0;
transform: none;
}
}
/* Large image variant for split sections */
.split-intro.large-images .split-media {
margin-right: 0;
}
.split-intro.large-images .split-media .media-main img {
width: 100%;
max-width: 100%;
}
.split-intro.large-images .split-media .media-overlay {
right: 2%;
bottom: -6%;
width: 46%;
max-width: 520px;
}
@media (max-width: 1024px) {
.split-intro.large-images .split-media {
margin-right: 0;
}
.split-intro.large-images .split-media .media-main img {
width: 100%;
max-width: 100%;
}
.split-intro.large-images .split-media .media-overlay {
right: 4%;
bottom: -8%;
width: 50%;
max-width: 500px;
}
}
@media (max-width: 640px) {
.split-intro.large-images .split-media .media-overlay {
position: static;
width: 92%;
margin: -20px auto 0;
}
}
/* Reverse layout (media left, text right) */
.split-grid.reverse .split-media {
order: 1;
}
.split-grid.reverse .split-copy {
order: 2;
}
.split-grid.reverse .split-media .media-overlay {
left: 2%;
right: auto;
}
@media (max-width: 1024px) {
.split-grid.reverse .split-media .media-overlay {
left: 4%;
right: auto;
}
}
/* Portfolio strip under split sections */
.split-portfolio {
margin-top: 28px;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 14px;
}
.split-portfolio img {
width: 100%;
height: auto;
display: block;
border-radius: 10px;
}
@media (max-width: 1024px) {
.split-portfolio {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 640px) {
.split-portfolio {
grid-template-columns: repeat(2, 1fr);
}
}
/* Legacy outline title */
.legacy-outline {
width: 100%;
margin: 0 0 20px;
font-weight: 900;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
font-size: clamp(36px, 14vw, 140px);
position: relative;
opacity: 0;
transform: translate3d(0, 30px, 0);
transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
will-change: opacity, transform;
}
.legacy-outline.animate-in {
opacity: 1;
transform: translate3d(0, 0, 0);
will-change: auto;
}
/* Glow effect behind text */
.legacy-outline::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: transparent;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.15);
z-index: -1;
opacity: 0;
transition: opacity 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 1.2s;
filter: blur(4px);
pointer-events: none;
will-change: opacity;
transform: translateZ(0);
}
.legacy-outline.animate-in::before {
opacity: 1;
animation: legacyGlow 4.5s ease-in-out infinite;
}
/* Letter-by-letter animation wrapper */
.legacy-outline span {
display: inline-block;
opacity: 0;
transform: translate3d(0, 20px, 0) rotateX(90deg);
transition: opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94),
filter 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
filter: blur(3px);
color: transparent;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.25);
position: relative;
z-index: 1;
will-change: opacity, transform, filter;
backface-visibility: hidden;
perspective: 1000px;
}
/* CSS transition-delay를 활용한 순차 애니메이션 */
.legacy-outline.animate-in span {
opacity: 1 !important;
transform: translate3d(0, 0, 0) rotateX(0deg) !important;
filter: blur(0) !important;
will-change: auto;
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.25);
animation: legacyStrokePulse 4.5s ease-in-out infinite;
}
.legacy-outline.animate-in span:nth-child(odd) {
animation-delay: 0s;
}
.legacy-outline.animate-in span:nth-child(even) {
animation-delay: 0.25s;
}
/* Stroke pulse animation */
@keyframes legacyStrokePulse {
0%,
100% {
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.25);
}
50% {
-webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);
}
}
/* Glow animation */
@keyframes legacyGlow {
0%,
100% {
opacity: 0.4;
filter: blur(3px);
transform: scale(1.02);
}
50% {
opacity: 0.7;
filter: blur(5px);
transform: scale(1.05);
}
}
/* Enhanced stroke animation */
@keyframes legacyStrokeDraw {
0% {
stroke-dasharray: 0 1000;
stroke-dashoffset: 0;
}
100% {
stroke-dasharray: 1000 0;
stroke-dashoffset: 0;
}
}
@media (max-width: 640px) {
.legacy-outline {
-webkit-text-stroke: 1.5px rgba(0, 0, 0, 0.25);
transform: translateY(30px);
}
.legacy-outline span {
transform: translateY(20px) rotateX(90deg);
}
}
/* ========================================
Business Category Hero Banner (All Business Pages)
======================================== */
.business-category-hero {
background: url('images/bg/banner/business.webp') center/cover no-repeat;
padding: 140px 0 60px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
}
.business-category-hero .container {
position: relative;
z-index: 2;
}
.business-category-hero .business-label {
display: inline-block;
font-size: 1rem;
font-weight: 600;
color: #ef4444;
opacity: 0.85;
margin-bottom: 16px;
letter-spacing: 0.05em;
}
.business-category-hero h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 24px;
letter-spacing: -1px;
color: #ffffff;
}
.business-category-hero p {
font-size: 1.3rem;
color: #ffffff;
max-width: 650px;
margin: 0 auto;
line-height: 1.7;
font-weight: 400;
}
@media (max-width: 1024px) {
.business-category-hero h1 {
font-size: 3rem;
}
}
@media (max-width: 768px) {
.business-category-hero {
padding: 120px 0 50px;
}
.business-category-hero h1 {
font-size: 2.5rem;
}
.business-category-hero p {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.business-category-hero h1 {
font-size: 2rem;
}
.business-category-hero .business-label {
font-size: 0.9rem;
}
}
/* ========================================
Product Line Section (Heated Seat Page)
======================================== */
.product-line-section {
position: relative;
width: 100%;
padding: 80px 0 140px;
background: #ffffff;
overflow: hidden;
}
/* 온열의자 페이지만 하단 여백 증가 */
body.heated-seat-page .product-line-section {
padding-bottom: 250px;
}
.product-line-watermark {
position: absolute;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
font-size: clamp(100px, 18vw, 350px);
font-weight: 900;
color: rgba(0, 0, 0, 0.02);
letter-spacing: -0.05em;
white-space: nowrap;
pointer-events: none;
z-index: 0;
}
.product-line-container {
max-width: 1920px;
/* 1800px에서 1920px로 증가하여 더 넓게 */
margin: 0 auto;
padding: 0 60px;
}
.product-line-layout {
position: relative;
display: grid;
grid-template-columns: 1.3fr 0.7fr;
gap: 100px;
align-items: center;
z-index: 1;
}
/* product-cards-triple이 있을 때 6.5:3.5 비율로 조절 */
.product-line-layout:has(.product-cards-triple) {
grid-template-columns: 6.5fr 3.5fr;
/* 이미지 6.5, 텍스트 3.5 */
gap: 100px;
}
/* Left Side: Overlapping Product Cards */
.product-cards-area {
position: relative;
height: auto;
aspect-ratio: 1.4;
padding: 20px;
}
/* product-cards-quintuple이 있을 때 flex 레이아웃으로 변경 - 위 3개, 아래 2개 배치 */
.product-cards-area.product-cards-quintuple {
height: auto;
min-height: 880px;
padding: 20px;
/* 30px에서 20px로 줄여서 공간 확보 */
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
align-content: flex-start;
gap: 15px;
/* 30px에서 25px로 더 줄여서 첫 줄에 3개가 확실히 들어가도록 */
width: 100%;
max-width: 100%;
/* max-width 제한 제거하고 100% 사용 */
margin: 0 auto;
position: relative;
aspect-ratio: auto;
}
.product-card-large {
position: absolute;
width: 42%;
height: auto;
aspect-ratio: 4 / 5;
background: #fff;
border-radius: 0;
overflow: visible;
/* 강하게 보이는 3중 그림자 (카드 전체에 적용) */
box-shadow:
0 32px 90px rgba(0, 0, 0, 0.45),
0 16px 48px rgba(0, 0, 0, 0.32),
0 4px 18px rgba(0, 0, 0, 0.22);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.product-card-large:hover {
transform: scale(1.05) rotate(-1deg);
box-shadow:
0 40px 110px rgba(0, 0, 0, 0.5),
0 20px 60px rgba(0, 0, 0, 0.35),
0 6px 22px rgba(0, 0, 0, 0.25);
z-index: 10;
}
.product-card-large.card-primary {
top: 0;
left: 0;
z-index: 2;
}
.product-card-large.card-secondary {
top: 15%;
left: 35%;
right: auto;
z-index: 1;
}
.product-card-large.card-secondary .product-card-overlay {
text-align: right;
}
.product-card-large.card-tertiary .product-card-overlay {
text-align: right;
}
.product-card-large img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 4 / 5;
/* Explicit ratio for space reservation */
}
.product-card-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 40px;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.6) 60%, transparent 100%);
color: #fff;
transform: translateY(0);
transition: all 0.3s ease;
}
.product-card-large:hover .product-card-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 60%, transparent 100%);
}
.product-card-overlay h3 {
font-size: 26px;
font-weight: 700;
margin: 0 0 24px;
line-height: 1.4;
letter-spacing: -0.01em;
}
.product-more-btn {
display: inline-block;
padding: 12px 28px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 8px;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.1em;
transition: all 0.3s ease;
}
.product-more-btn:hover {
background: rgba(255, 255, 255, 0.35);
border-color: rgba(255, 255, 255, 0.6);
transform: translateX(4px);
}
/* Right Side: Title & Description */
.product-line-text {
padding: 40px 40px 40px 0;
}
/* systems.html과 cleaning_vehicle.html에만 적용: 텍스트 섹션 중앙 정렬 및 오른쪽 여백 확보 */
.systems-page .product-line-section {
padding-bottom: 80px;
}
.systems-page .product-line-container {
padding-right: 100px;
}
.systems-page .product-line-text {
padding-left: 0;
padding-right: 100px;
}
.product-line-title {
font-size: clamp(32px, 7vw, 88px);
font-weight: 900;
line-height: 1.1;
margin: 0 0 20px;
color: #1a2b5e;
letter-spacing: -0.03em;
word-break: keep-all;
overflow-wrap: break-word;
}
.product-line-subtitle {
font-size: clamp(18px, 2.5vw, 26px);
font-weight: 600;
margin: 0 0 32px;
color: #6b7280;
letter-spacing: 0.05em;
}
.product-line-desc {
font-size: clamp(14px, 2.2vw, 18px);
line-height: 1.8;
color: #4b5563;
margin: 0;
font-weight: 400;
letter-spacing: -0.01em;
word-break: keep-all;
overflow-wrap: break-word;
}
.desktop-br {
display: block;
}
@media (max-width: 768px) {
.desktop-br {
display: none;
}
}
/* ========================================
Patent Section (Heated Seat Page)
======================================== */
.heated-patent-section {
position: relative;
padding: 100px 0;
background: #f8f9fa;
overflow: hidden;
}
.heated-patent-watermark {
position: absolute;
top: 25%;
left: 0;
right: 0;
width: 100%;
transform: translate3d(-50px, -50%, 0);
font-size: clamp(140px, 25vw, 500px);
font-weight: 900;
color: rgba(150, 150, 150, 0.07);
letter-spacing: -0.05em;
white-space: nowrap;
pointer-events: none;
z-index: 0;
font-family: 'Pretendard', sans-serif;
text-align: center;
padding: 0 20px;
box-sizing: border-box;
-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
backface-visibility: hidden;
-webkit-transform: translate3d(-50px, -50%, 0);
will-change: transform;
}
.heated-patent-content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
align-items: start;
max-width: 1400px;
margin: 0 auto;
}
.heated-patent-main {
display: flex;
flex-direction: column;
gap: 40px;
}
.heated-patent-title {
font-size: clamp(24px, 3vw, 36px);
font-weight: 700;
color: #1a2b5e;
margin: 0 0 40px 0;
line-height: 1.3;
letter-spacing: -0.02em;
}
.heated-patent-gradient {
background: linear-gradient(135deg, #E65100 0%, #FF6F00 50%, #FF8F00 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.heated-patent-info {
display: flex;
align-items: center;
gap: 32px;
padding: 24px 0;
border-bottom: 1px solid #e2e8f0;
}
.heated-patent-label {
font-size: 24px;
font-weight: 600;
color: #4b5563;
min-width: 240px;
}
.heated-patent-number {
font-size: 28px;
font-weight: 700;
color: #1a2b5e;
font-family: 'Courier New', monospace;
letter-spacing: 0.05em;
}
.heated-patent-images {
display: flex;
gap: 12px;
justify-content: center;
max-width: 100%;
margin: 0 auto;
}
.heated-patent-image-item {
flex: 1;
min-width: 0;
background: #ffffff;
border-radius: 0;
padding: 10px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.heated-patent-image-item img {
width: 100%;
height: auto;
border-radius: 0;
display: block;
max-width: 100%;
}
/* Responsive Design */
@media (max-width: 1200px) {
.heated-patent-content {
gap: 60px;
}
}
@media (max-width: 1024px) {
.heated-patent-section {
padding: 80px 0;
}
.heated-patent-content {
grid-template-columns: 1fr;
gap: 50px;
}
.heated-patent-main {
order: 2;
}
.heated-patent-images {
order: 1;
}
}
@media (max-width: 768px) {
.heated-patent-section {
padding: 60px 0;
}
.heated-patent-title {
font-size: clamp(32px, 6vw, 48px);
margin-bottom: 32px;
}
.heated-patent-info {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.heated-patent-label {
min-width: auto;
font-size: 20px;
}
.heated-patent-number {
font-size: 24px;
}
.heated-patent-images {
max-width: 100%;
}
}
@media (max-width: 1600px) {
.product-line-container {
max-width: 1500px;
padding: 0 50px;
}
.product-card-large {
width: 450px;
height: 550px;
}
.product-cards-area {
height: 650px;
}
.product-card-large.card-secondary {
top: 110px;
right: -25px;
}
}
@media (max-width: 1400px) {
.product-line-container {
padding: 0 40px;
}
.product-line-layout {
gap: 80px;
}
/* product-cards-triple이 있을 때 6.5:3.5 비율 유지 */
.product-line-layout:has(.product-cards-triple) {
grid-template-columns: 6.5fr 3.5fr;
/* 이미지 6.5, 텍스트 3.5 */
gap: 90px;
}
.product-card-large {
width: 400px;
height: 500px;
}
/* 1400px 이하에서도 product-cards-triple은 250px 유지 (1800px 규칙 유지) */
.product-cards-triple .product-card-large {
width: 250px !important;
height: 310px !important;
}
.product-cards-area {
height: 600px;
}
.product-card-large.card-secondary {
top: 100px;
right: -20px;
}
.product-card-overlay h3 {
font-size: 24px;
}
}
@media (max-width: 1200px) {
.product-line-container {
padding: 0 30px;
}
.product-line-layout {
gap: 70px;
}
/* product-cards-triple이 있을 때 6.5:3.5 비율 유지 */
.product-line-layout:has(.product-cards-triple) {
grid-template-columns: 6.5fr 3.5fr;
/* 이미지 6.5, 텍스트 3.5 */
gap: 80px;
}
.product-card-large {
width: 350px;
height: 450px;
}
/* 1200px 이하에서도 product-cards-triple은 250px 유지 (1800px 규칙 유지) */
.product-cards-triple .product-card-large {
width: 250px !important;
height: 310px !important;
}
.product-cards-area {
height: 550px;
}
.product-card-large.card-secondary {
top: 90px;
right: -15px;
}
.product-card-overlay {
padding: 32px;
}
.product-card-overlay h3 {
font-size: 22px;
margin-bottom: 20px;
}
}
@media (max-width: 1024px) {
.product-line-section {
padding: 70px 0 120px;
}
.product-line-container {
padding: 0 30px;
}
.product-line-layout {
grid-template-columns: 1fr;
gap: 80px;
}
.product-line-text {
padding: 20px 15px;
text-align: center;
order: -1;
max-width: 100%;
box-sizing: border-box;
}
.product-line-title {
font-size: clamp(32px, 5vw, 56px);
}
.product-line-subtitle {
font-size: clamp(14px, 2.2vw, 22px);
}
.product-line-desc {
font-size: clamp(13px, 2vw, 18px);
}
.product-line-container {
padding: 0 20px;
}
.product-cards-area {
height: 520px;
margin: 0 auto;
max-width: 550px;
}
.product-card-large {
width: 320px;
height: 420px;
}
.product-card-large.card-secondary {
top: 80px;
right: -20px;
}
.product-card-overlay h3 {
font-size: 20px;
}
/* product-cards-triple 반응형 수정 */
.product-cards-triple {
height: auto;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
min-height: 300px;
}
/* 1024px 이하에서 product-cards-triple은 200px 적용 (위의 1024px 미디어 쿼리에서 설정) */
.product-cards-triple .product-card-large.card-secondary {
top: 15px;
}
.product-cards-triple .product-card-large.card-tertiary {
top: 30px;
}
}
@media (max-width: 768px) {
.product-line-section {
padding: 50px 0 80px;
}
.product-line-watermark {
font-size: clamp(60px, 20vw, 150px);
}
.product-cards-area {
height: 400px;
padding: 10px;
}
.product-card-large {
width: 240px;
height: 320px;
border-radius: 0;
}
.product-card-large.card-secondary {
top: 30px;
right: 20px;
}
.product-card-overlay {
padding: 20px;
}
.product-card-overlay h3 {
font-size: 16px;
margin-bottom: 15px;
}
.product-more-btn {
padding: 8px 18px;
font-size: 11px;
}
.product-line-title {
font-size: clamp(28px, 6vw, 48px);
}
.product-line-subtitle {
font-size: clamp(14px, 2.5vw, 20px);
}
.product-line-desc {
font-size: clamp(13px, 2.2vw, 17px);
line-height: 1.6;
}
.product-line-text {
padding: 20px 15px;
max-width: 100%;
box-sizing: border-box;
}
.product-line-container {
padding: 0 20px;
}
}
@media (max-width: 640px) {
.product-line-section {
padding: 50px 0 60px;
}
.product-line-layout {
gap: 50px;
}
.product-cards-area {
height: 350px;
max-width: 100%;
}
.product-card-large {
width: 200px;
height: 280px;
border-radius: 0;
}
.product-card-large.card-primary {
left: 10px;
}
.product-card-large.card-secondary {
top: 25px;
right: 15px;
}
.product-card-overlay {
padding: 15px;
}
.product-card-overlay h3 {
font-size: 14px;
margin-bottom: 12px;
}
.product-more-btn {
padding: 6px 14px;
font-size: 10px;
}
.product-line-text {
padding: 10px;
}
.product-line-title {
font-size: 40px;
margin-bottom: 16px;
}
.product-line-subtitle {
font-size: 16px;
margin-bottom: 24px;
}
.product-line-desc {
font-size: 16px;
line-height: 1.7;
}
/* product-cards-triple 반응형 수정 */
.product-cards-triple {
height: auto;
min-height: 330px;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
padding: 10px 5px;
}
.product-cards-triple .product-card-large {
width: calc(50% - 8px);
min-width: 150px;
max-width: 180px;
height: 270px;
flex-shrink: 1;
}
.product-cards-triple .product-card-large.card-secondary {
top: 8px;
}
.product-cards-triple .product-card-large.card-tertiary {
top: 16px;
width: calc(100% - 10px);
max-width: 200px;
}
}
/* Solution Navigation Tabs */
.solution-nav-tabs {
position: sticky;
top: 80px;
z-index: 100;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
padding: 16px 0;
transition: all 0.3s ease;
margin-top: 0;
}
.solution-nav-tabs .container {
display: flex;
justify-content: center;
gap: 8px;
}
.solution-tab {
padding: 12px 24px;
font-size: 15px;
font-weight: 500;
color: rgba(0, 0, 0, 0.6);
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
}
.solution-tab:hover {
color: rgba(0, 0, 0, 0.9);
background: rgba(0, 0, 0, 0.04);
}
.solution-tab.active {
color: #000;
background: rgba(0, 0, 0, 0.06);
font-weight: 600;
}
.solution-tab.active::after {
content: '';
position: absolute;
bottom: -17px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 2px;
background: #000;
}
/* Triple Product Cards Layout - LED 전광판처럼 flex-wrap 사용 */
.product-cards-triple {
height: auto;
min-height: 490px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
gap: 25px;
padding: 20px;
width: 100%;
max-width: 100%;
margin: 0 auto;
position: relative;
}
.product-cards-triple .product-card-large {
position: relative;
width: 310px;
height: 385px;
flex-shrink: 1;
}
.product-cards-triple .product-card-large.card-primary {
top: 0;
left: 0;
z-index: 3;
}
.product-cards-triple .product-card-large.card-secondary {
top: 15px;
left: 0;
z-index: 2;
}
.product-cards-triple .product-card-large.card-tertiary {
top: 30px;
left: 0;
z-index: 1;
}
/* 1024px ~ 1800px: 카드 크기 250px */
@media (max-width: 1800px) {
.product-cards-triple .product-card-large {
width: 250px !important;
height: 310px !important;
/* 비율 유지: 410 * 250 / 330 ≈ 310px */
}
.product-cards-triple {
gap: 25px;
min-height: 350px;
}
.product-cards-triple .product-card-large.card-secondary {
top: 18px;
}
.product-cards-triple .product-card-large.card-tertiary {
top: 35px;
}
}
/* 1024px ~ 1800px: 카드 타이틀 줄바꿈 */
.responsive-br {
display: none;
}
@media (min-width: 1024px) and (max-width: 1800px) {
.responsive-br {
display: block;
}
}
/* 1024px 이하: 카드 크기 200px */
@media (max-width: 1024px) {
.product-cards-triple .product-card-large {
width: 200px !important;
height: 248px !important;
/* 비율 유지: 410 * 200 / 330 ≈ 248px */
}
.product-cards-triple {
gap: 20px;
min-height: 300px;
}
.product-cards-triple .product-card-large.card-secondary {
top: 15px;
}
.product-cards-triple .product-card-large.card-tertiary {
top: 30px;
}
}
@media (max-width: 768px) {
.solution-nav-tabs {
padding: 12px 0;
}
.solution-nav-tabs .container {
flex-wrap: wrap;
gap: 6px;
}
.solution-tab {
padding: 10px 16px;
font-size: 14px;
}
.solution-tab.active::after {
display: none;
}
/* 768px 이하에서도 1024px 규칙(200px) 유지 */
.product-cards-triple {
gap: 20px;
max-width: 100%;
padding: 20px;
min-height: 300px;
flex-wrap: wrap;
justify-content: center;
}
.product-cards-triple .product-card-large.card-secondary {
top: 15px;
}
.product-cards-triple .product-card-large.card-tertiary {
top: 30px;
}
}
@media (max-width: 576px) {
.solution-tab {
padding: 8px 12px;
font-size: 13px;
}
/* 576px 이하에서도 1024px 규칙(200px) 유지 */
.product-cards-triple {
gap: 20px;
padding: 15px;
min-height: 300px;
flex-wrap: wrap;
justify-content: center;
}
.product-cards-triple .product-card-large.card-secondary {
top: 15px;
}
.product-cards-triple .product-card-large.card-tertiary {
top: 30px;
}
}
/* Quintuple Product Cards Layout - LED 전광판 페이지 전용 */
/* 위 3개, 아래 2개 배치 + 자연스러운 오르락 내리락 */
/* 3개 카드와 동일한 크기로 설정 */
.product-cards-quintuple .product-card-large {
position: relative !important;
width: 330px !important;
/* 3개 카드와 동일: 330px */
height: 410px !important;
/* 3개 카드와 동일: 410px */
flex-shrink: 0;
}
/* 첫 번째 행: 3개 카드 - 정렬된 배치 */
.product-cards-area.product-cards-quintuple .product-card-large.card-primary,
.product-cards-quintuple .product-card-large.card-primary {
top: 0;
left: 0;
z-index: 5;
order: 1;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-secondary,
.product-cards-quintuple .product-card-large.card-secondary {
top: 15px;
left: 0;
z-index: 4;
order: 2;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-tertiary,
.product-cards-quintuple .product-card-large.card-tertiary {
top: 30px;
left: 0;
z-index: 3;
order: 3;
}
/* 두 번째 행: 2개 카드 - 첫 번째 행 아래에 정렬된 배치 */
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
top: 15px;
left: 0;
margin-left: 172px;
/* (330*3 + 15*2 - 330*2 - 15) / 2 = (1020 - 675) / 2 = 172.5 -> 172px */
z-index: 2;
order: 4;
width: 330px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
top: 30px;
left: 0;
margin-left: 0;
z-index: 1;
order: 5;
width: 330px !important;
/* 3개 카드와 동일 */
}
/* 1024px ~ 1800px: 3개 카드와 동일하게 250px */
@media (max-width: 1800px) {
.product-cards-area.product-cards-quintuple .product-card-large,
.product-cards-quintuple .product-card-large {
width: 250px !important;
height: 310px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
width: 250px !important;
margin-left: 132px;
/* (250*3 + 15*2 - 250*2 - 15) / 2 = (780 - 515) / 2 = 132.5 -> 132px */
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 250px !important;
/* 3개 카드와 동일 */
}
}
@media (max-width: 1400px) {
.product-cards-area.product-cards-quintuple {
gap: 25px;
max-width: 100%;
padding: 20px;
min-height: 830px;
}
/* 1400px 이하: 220px로 축소 */
.product-cards-area.product-cards-quintuple .product-card-large,
.product-cards-quintuple .product-card-large {
width: 220px !important;
height: 273px !important;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
width: 220px !important;
top: -12px;
margin-left: 118px;
/* (220*3 + 15*2 - 220*2 - 15) / 2 = (690 - 455) / 2 = 117.5 -> 118px */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 220px !important;
top: 0px;
margin-left: 0;
}
}
/* 1024px 이하: 3개 카드와 동일하게 200px */
@media (max-width: 1024px) {
.product-cards-area.product-cards-quintuple .product-card-large,
.product-cards-quintuple .product-card-large {
width: 200px !important;
height: 248px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
width: 200px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 200px !important;
/* 3개 카드와 동일 */
}
}
@media (max-width: 1200px) {
.product-cards-area.product-cards-quintuple {
gap: 25px;
max-width: 100%;
padding: 20px;
min-height: 780px;
}
/* 1200px 이하에서도 1400px 규칙(220px) 유지 */
.product-cards-area.product-cards-quintuple .product-card-large,
.product-cards-quintuple .product-card-large {
width: 220px !important;
height: 273px !important;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
width: 220px !important;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 220px !important;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-secondary,
.product-cards-quintuple .product-card-large.card-secondary {
top: 22px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-tertiary,
.product-cards-quintuple .product-card-large.card-tertiary {
top: 8px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
top: -12px;
margin-left: 118px;
/* 우측으로 110px 이동 (왼쪽으로 10px 이동) */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 220px !important;
top: 0px;
margin-left: 0;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
top: -2px;
/* 10px에서 -2px로 변경 (위로 12px 이동) */
margin-left: 110px;
/* 우측으로 110px 이동 (왼쪽으로 10px 이동) */
}
}
@media (max-width: 992px) {
.product-cards-area.product-cards-quintuple {
gap: 22px;
max-width: 920px;
min-height: 720px;
}
/* 992px 이하에서도 200px 유지 (1024px 규칙 유지) */
.product-cards-area.product-cards-quintuple .product-card-large,
.product-cards-quintuple .product-card-large {
width: 200px !important;
height: 248px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
width: 200px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 200px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-secondary,
.product-cards-quintuple .product-card-large.card-secondary {
top: 18px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-tertiary,
.product-cards-quintuple .product-card-large.card-tertiary {
top: 5px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
top: -8px;
margin-left: 110px;
/* 우측으로 110px 이동 (왼쪽으로 10px 이동) */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
top: -4px;
/* 8px에서 -4px로 변경 (위로 12px 이동) */
margin-left: 110px;
/* 우측으로 110px 이동 (왼쪽으로 10px 이동) */
}
}
@media (max-width: 768px) {
.product-cards-area.product-cards-quintuple {
gap: 18px;
max-width: 100%;
padding: 20px;
min-height: 660px;
flex-wrap: wrap;
justify-content: center;
}
/* 768px 이하에서도 200px 유지 (1024px 규칙 유지) */
.product-cards-area.product-cards-quintuple .product-card-large,
.product-cards-quintuple .product-card-large {
width: 200px !important;
height: 248px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
width: 200px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 200px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-secondary,
.product-cards-quintuple .product-card-large.card-secondary {
top: 15px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-tertiary,
.product-cards-quintuple .product-card-large.card-tertiary {
top: 4px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
top: -6px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
top: -6px;
/* 6px에서 -6px로 변경 (위로 12px 이동) */
}
}
@media (max-width: 576px) {
.product-cards-area.product-cards-quintuple {
gap: 15px;
padding: 15px;
min-height: 600px;
}
/* 576px 이하에서도 200px 유지 (1024px 규칙 유지) */
.product-cards-area.product-cards-quintuple .product-card-large,
.product-cards-quintuple .product-card-large {
width: 200px !important;
height: 248px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
width: 200px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
width: 200px !important;
/* 3개 카드와 동일 */
}
.product-cards-area.product-cards-quintuple .product-card-large.card-secondary,
.product-cards-quintuple .product-card-large.card-secondary {
top: 12px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-tertiary,
.product-cards-quintuple .product-card-large.card-tertiary {
top: 3px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quaternary,
.product-cards-quintuple .product-card-large.card-quaternary {
top: -5px;
}
.product-cards-area.product-cards-quintuple .product-card-large.card-quinary,
.product-cards-quintuple .product-card-large.card-quinary {
top: -7px;
/* 5px에서 -7px로 변경 (위로 12px 이동) */
}
}
/* BIT Installation Cases Section */
.bit-installation-cases {
padding: 20px 0 60px 0;
}
.bit-installation-cases .heated-overview-gallery {
gap: 60px !important;
}
.bit-installation-cases .heated-gallery-section-options {
margin-top: 60px !important;
}
.bit-installation-cases .heated-gallery-section-features {
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 24px;
column-gap: 150px;
max-width: 1000px;
margin: 0 auto;
}
.bit-installation-cases .heated-gallery-section-options {
display: grid;
grid-template-columns: repeat(3, 1fr);
row-gap: 24px;
column-gap: 72px;
max-width: 1600px;
margin: 0 auto;
}
.bit-installation-cases .heated-gallery-section-features .heated-gallery-label,
.bit-installation-cases .heated-gallery-section-options .heated-gallery-label {
grid-column: 1 / -1;
margin-bottom: 0;
}
.bit-installation-cases .bit-case-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.bit-installation-cases .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.bit-installation-cases .bit-case-card .heated-gallery-item {
width: 100%;
max-width: 100%;
margin: 0;
border-radius: 0;
}
.bit-installation-cases .bit-case-card .heated-gallery-item img {
width: 100%;
height: 320px;
object-fit: cover;
display: block;
}
.bit-installation-cases .bit-case-info {
padding: 24px;
flex: 1;
}
.bit-installation-cases .bit-case-info h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 8px;
color: #000;
}
.bit-installation-cases .bit-case-subtitle {
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 16px;
font-weight: 500;
}
.bit-installation-cases .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.bit-installation-cases .bit-case-features li {
font-size: 14px;
line-height: 1.7;
color: rgba(0, 0, 0, 0.7);
padding-left: 20px;
position: relative;
margin-bottom: 8px;
}
.bit-installation-cases .bit-case-features li::before {
content: '•';
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: 600;
font-size: 16px;
}
@media (max-width: 768px) {
.bit-installation-cases .heated-overview-gallery {
gap: 40px !important;
}
.bit-installation-cases .heated-gallery-section-options {
margin-top: 40px;
}
.bit-installation-cases .heated-gallery-section-features,
.bit-installation-cases .heated-gallery-section-options {
grid-template-columns: 1fr;
gap: 20px;
max-width: 100%;
}
.bit-installation-cases .bit-case-card .heated-gallery-item img {
max-height: 300px;
}
.bit-installation-cases .bit-case-info {
padding: 20px;
}
.bit-installation-cases .bit-case-info h3 {
font-size: 18px;
}
.bit-installation-cases .bit-case-features li {
font-size: 13px;
}
}
/* ========================================
Accessible Stop Section Styles
======================================== */
.accessible-stop-gallery {
padding: 20px 0 60px 0;
}
.accessible-stop-gallery .heated-gallery-section-features {
max-width: 1600px;
margin: 0 auto;
padding: 0 40px;
}
.accessible-stop-gallery .heated-gallery-section-features .heated-gallery-label {
margin-bottom: 1px;
}
.bit-display-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
.accessible-stop-gallery .bit-case-card {
display: flex;
flex-direction: column;
}
.accessible-stop-gallery .bit-case-card .heated-gallery-item {
width: 100%;
margin-bottom: 20px;
}
.accessible-stop-gallery .bit-case-card .heated-gallery-item img {
width: 100%;
max-height: 450px;
object-fit: contain;
}
.accessible-stop-gallery .bit-case-card .bit-case-info {
text-align: center;
}
.accessible-stop-gallery .bit-case-card .bit-case-info h3 {
font-size: 16px;
font-weight: 500;
color: #334155;
margin: 0;
}
.accessible-stop-sw {
padding: 20px 0 60px 0;
}
.accessible-stop-sw .heated-gallery-section-features {
max-width: 1600px;
margin: 0 auto;
padding: 0 40px;
box-sizing: border-box;
}
.accessible-stop-sw .heated-gallery-section-features .heated-gallery-label {
margin-bottom: 1px !important;
}
.accessible-sw-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin-top: 0;
margin-bottom: 40px;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.accessible-sw-grid .heated-gallery-item {
width: 100%;
}
.accessible-sw-grid .heated-gallery-item img {
width: 100%;
height: auto;
object-fit: contain;
border-radius: 8px;
}
.accessible-sw-features {
padding: 30px;
background: #f8f9fa;
border-radius: 12px;
max-width: 1200px;
margin: 0 auto;
}
.accessible-sw-features h3 {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
color: #000;
}
.accessible-sw-features>p {
font-size: 16px;
line-height: 1.7;
color: #475569;
margin-bottom: 24px;
}
.accessible-sw-features-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
.accessible-sw-features ul {
list-style: none;
padding: 0;
margin: 0;
}
.accessible-sw-features ul>li {
font-size: 15px;
line-height: 1.8;
color: #334155;
margin-bottom: 12px;
padding-left: 24px;
position: relative;
}
.accessible-sw-features ul>li::before {
content: '▷';
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: 600;
}
.accessible-sw-features ul>li ul {
margin-top: 8px;
margin-left: 20px;
}
.accessible-sw-features ul>li ul li {
font-size: 14px;
color: #64748b;
padding-left: 20px;
position: relative;
}
.accessible-sw-features ul>li ul li::before {
content: '▸';
position: absolute;
left: 0;
color: #1e3a8a;
}
@media (max-width: 1200px) {
.accessible-stop-gallery .heated-gallery-section-features {
padding: 0 30px;
}
.bit-display-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.accessible-stop-gallery .bit-case-card .heated-gallery-item img {
max-height: 350px;
}
}
@media (max-width: 768px) {
.accessible-stop-gallery .heated-gallery-section-features {
padding: 0 20px;
}
.bit-display-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.accessible-stop-gallery .bit-case-card .heated-gallery-item img {
max-height: 300px;
}
.accessible-stop-sw .heated-gallery-section-features {
width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 30px;
}
.accessible-sw-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.accessible-sw-features {
padding: 20px;
max-width: 100%;
}
.accessible-sw-features h3 {
font-size: 20px;
}
.accessible-sw-features-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
.bit-cases-header {
text-align: center;
margin-bottom: 60px;
}
.bit-cases-header .section-label {
display: inline-block;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 12px;
}
.bit-cases-header h2 {
font-size: 42px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 16px;
color: #000;
}
.bit-cases-header p {
font-size: 18px;
color: rgba(0, 0, 0, 0.6);
max-width: 600px;
margin: 0 auto;
}
.bit-cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1200px;
margin: 0 auto;
}
.bit-case-card {
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.bit-case-image {
width: 100%;
height: 300px;
overflow: hidden;
background: #f5f5f5;
}
.bit-case-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.bit-case-card:hover .bit-case-image img {
transform: scale(1.05);
}
.bit-case-content {
padding: 32px;
flex: 1;
display: flex;
flex-direction: column;
}
.bit-case-content h3 {
font-size: 24px;
font-weight: 700;
margin-bottom: 8px;
color: #000;
}
.bit-case-location {
font-size: 15px;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 20px;
font-weight: 500;
}
.bit-case-features {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
}
.bit-case-features li {
font-size: 15px;
line-height: 1.8;
color: rgba(0, 0, 0, 0.7);
padding-left: 24px;
position: relative;
margin-bottom: 12px;
}
.bit-case-features li::before {
content: '✓';
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: 600;
font-size: 16px;
}
@media (max-width: 992px) {
.bit-cases-section {
padding: 80px 0;
}
.bit-cases-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.bit-case-image {
height: 250px;
}
.bit-case-content {
padding: 24px;
}
.bit-cases-header h2 {
font-size: 36px;
}
}
@media (max-width: 768px) {
.bit-cases-section {
padding: 60px 0;
}
.bit-cases-header {
margin-bottom: 40px;
}
.bit-cases-header h2 {
font-size: 32px;
}
.bit-cases-header p {
font-size: 16px;
}
.bit-case-image {
height: 200px;
}
.bit-case-content h3 {
font-size: 20px;
}
.bit-case-features li {
font-size: 14px;
margin-bottom: 10px;
}
}
/* ========================================
Safety Shelter Section Styles
======================================== */
.safety-shelter-features {
padding: 30px 0 60px 0;
}
.safety-shelter-features .heated-gallery-section-features {
max-width: 1600px;
margin: 0 auto;
padding: 0 40px;
}
.safety-shelter-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
column-gap: 120px;
margin-top: 40px;
}
.safety-shelter-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.safety-shelter-card .heated-gallery-item {
width: 100%;
aspect-ratio: 4 / 3;
margin-bottom: 0;
border-radius: 0;
overflow: hidden;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.safety-shelter-card .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
padding: 0;
background: #f8f9fa;
}
.safety-shelter-info {
padding: 24px;
flex: 1;
}
.safety-shelter-info h3 {
font-size: 20px;
font-weight: 700;
margin-bottom: 16px;
color: #0F172A;
}
.safety-shelter-features-list {
list-style: none;
padding: 0;
margin: 0;
}
.safety-shelter-features-list li {
font-size: 14px;
line-height: 1.7;
color: #334155;
margin-bottom: 12px;
padding-left: 20px;
position: relative;
}
.safety-shelter-features-list li::before {
content: '•';
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: 600;
font-size: 16px;
}
.safety-shelter-features-list li:last-child {
margin-bottom: 0;
}
@media (max-width: 1200px) {
.safety-shelter-grid {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
column-gap: 80px;
}
}
@media (max-width: 768px) {
.safety-shelter-features {
padding: 20px 0 40px 0;
}
.safety-shelter-features .heated-gallery-section-features {
padding: 0 20px;
}
.safety-shelter-grid {
grid-template-columns: 1fr;
gap: 24px;
margin-top: 30px;
}
.safety-shelter-card .heated-gallery-item {
aspect-ratio: 4 / 3;
}
.safety-shelter-card .heated-gallery-item img {
padding: 0;
}
.safety-shelter-info {
padding: 20px;
}
.safety-shelter-info h3 {
font-size: 18px;
}
.safety-shelter-features-list li {
font-size: 13px;
}
}
/* Child Safety Video Section */
.heated-main .container .child-safety-video {
width: 100vw;
max-width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: 0;
background: #F9FAFB;
margin-left: 0;
margin-right: 0;
}
.child-safety-video {
padding: 0;
background: #F9FAFB;
width: 100%;
}
.child-safety-video .video-section-inner {
width: 100%;
max-width: 100%;
padding: 80px 0;
}
.child-safety-video .container {
max-width: 1200px;
margin: 0 auto;
padding: 0 40px;
}
.video-wrapper-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
.video-section-header {
text-align: left;
margin-bottom: 40px;
}
.video-header-content {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}
.video-header-text {
font-size: 1.5rem;
font-weight: 700;
color: #0F172A;
letter-spacing: -0.02em;
}
.video-header-image {
flex-shrink: 0;
}
.video-header-image img {
max-width: 120px;
height: auto;
display: block;
}
.video-section-header .section-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #64748B;
margin-bottom: 12px;
}
.video-section-header .section-label-icon {
width: 24px;
height: auto;
display: block;
}
.video-section-header h2 {
font-size: 2.5rem;
font-weight: 700;
color: #0F172A;
letter-spacing: -0.02em;
line-height: 1.3;
margin: 0;
white-space: nowrap;
}
.video-wrapper {
position: relative;
width: 60%;
max-width: 60%;
margin: 0 auto;
padding-bottom: 35%;
/* 21:9 Aspect Ratio (더 넓은 비율) */
height: 0;
overflow: hidden;
border-radius: 16px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
background: #000;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Child Safety Gallery Layout */
.child-safety-gallery .heated-gallery-section-features,
.child-safety-gallery .heated-gallery-section-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1400px;
margin: 0 auto;
}
.child-safety-gallery .heated-gallery-section-options {
margin-top: 60px;
}
.child-safety-gallery .heated-gallery-label {
grid-column: 1 / -1;
margin-bottom: 0;
}
.child-safety-gallery .bit-case-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.child-safety-gallery .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.child-safety-gallery .heated-gallery-item {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.child-safety-gallery .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.child-safety-gallery .bit-case-info {
padding: 24px;
}
.child-safety-gallery .bit-case-info h3 {
font-size: 24px;
font-weight: 600;
color: #0F172A;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.child-safety-gallery .bit-case-subtitle {
font-size: 16px;
color: #64748B;
margin-bottom: 16px;
font-weight: 500;
}
.child-safety-gallery .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.child-safety-gallery .bit-case-features li {
font-size: 16px;
color: #475569;
line-height: 1.7;
padding: 8px 0;
padding-left: 20px;
position: relative;
}
.child-safety-gallery .bit-case-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
}
.child-safety-gallery .voice-label {
text-decoration: underline;
text-decoration-color: #FCD34D;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
font-weight: 600;
}
.child-safety-gallery .led-label {
text-decoration: underline;
text-decoration-color: #EF4444;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
font-weight: 600;
}
/* Responsive Design for Child Safety Section */
@media (max-width: 1024px) {
#child-safety .heated-overview-text h2 {
white-space: normal;
}
#child-safety .heated-overview-image {
justify-content: center;
}
#child-safety .heated-overview-image img {
max-width: 90%;
width: 90%;
margin-left: 0;
}
.heated-main .container .child-safety-video {
width: 100vw;
max-width: 100vw;
}
.child-safety-video .video-section-inner {
padding: 60px 0;
}
.child-safety-video .container {
padding: 0 30px;
}
.video-wrapper-container {
padding: 0 30px;
}
.video-section-header {
margin-bottom: 32px;
}
.video-section-header h2 {
font-size: 2rem;
}
.video-wrapper {
max-width: 100%;
padding-bottom: 50%;
/* 태블릿에서는 18:9 비율 */
}
.child-safety-gallery .heated-gallery-section-features,
.child-safety-gallery .heated-gallery-section-options {
grid-template-columns: 1fr;
gap: 24px;
}
.child-safety-gallery .heated-gallery-item {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 768px) {
#child-safety .heated-overview-image img {
max-width: 95%;
width: 95%;
}
.heated-main .container .child-safety-video {
width: 100vw;
max-width: 100vw;
}
.child-safety-video .video-section-inner {
padding: 40px 0;
}
.child-safety-video .container {
padding: 0 20px;
}
.video-wrapper-container {
padding: 0 20px;
}
.video-section-header {
margin-bottom: 32px;
}
.video-section-header h2 {
font-size: 1.75rem;
}
.video-wrapper {
max-width: 100%;
padding-bottom: 56.25%;
/* 모바일에서는 16:9 비율 유지 */
border-radius: 12px;
}
.child-safety-gallery .heated-gallery-section-features,
.child-safety-gallery .heated-gallery-section-options {
gap: 20px;
}
.child-safety-gallery .bit-case-info {
padding: 20px;
}
.child-safety-gallery .bit-case-info h3 {
font-size: 22px;
}
.child-safety-gallery .bit-case-features li {
font-size: 15px;
}
.child-safety-gallery .heated-gallery-item {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 640px) {
#child-safety .heated-overview-image img {
max-width: 100%;
width: 100%;
}
.heated-main .container .child-safety-video {
width: 100vw;
max-width: 100vw;
}
.child-safety-video .video-section-inner {
padding: 32px 0;
}
.child-safety-video .container {
padding: 0 16px;
}
.video-wrapper-container {
padding: 0 16px;
}
.video-section-header {
margin-bottom: 24px;
}
.video-section-header h2 {
font-size: 1.5rem;
}
.child-safety-gallery .bit-case-info {
padding: 16px;
}
.child-safety-gallery .bit-case-info h3 {
font-size: 20px;
}
.child-safety-gallery .bit-case-features li {
font-size: 14px;
}
}
/* ========================================
Smart Traffic LED Section Styles
======================================== */
/* Smart Traffic Main Images - case3와 case1 세로 배치 */
.smart-traffic-main-images {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.smart-traffic-main-images img {
width: 85%;
height: auto;
display: block;
object-fit: contain;
border-radius: 0;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 6px 16px rgba(0, 0, 0, 0.15);
}
.smart-traffic-main-images .case1-below-case3 {
margin-top: 0;
}
/* Smart Traffic Systems - 두 시스템 이미지 가로 배치 */
.smart-traffic-systems {
display: flex;
gap: 40px;
margin: 60px 0;
padding: 0 40px;
justify-content: center;
align-items: flex-start;
}
.smart-system-card {
flex: 1;
max-width: 50%;
display: flex;
flex-direction: column;
}
.smart-system-card .heated-gallery-item {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
margin-bottom: 16px;
}
.smart-system-card .heated-gallery-item img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.smart-system-title {
font-size: 1.25rem;
font-weight: 700;
color: #0F172A;
text-align: center;
margin: 0;
padding: 0;
letter-spacing: -0.01em;
}
/* Smart Traffic Gallery - 자연스러운 줄바꿈 */
.smart-traffic-gallery {
margin-top: 60px;
}
.smart-traffic-gallery .heated-gallery-section-features {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
/* VMS, SID, BUS STOP 섹션 라벨 위에 20px 여백 추가 */
.smart-traffic-gallery .heated-gallery-section-features:has(.vms-intro),
.smart-traffic-gallery .heated-gallery-section-features:has(.sid-intro),
.smart-traffic-gallery .heated-gallery-section-features:has(.bus-stop-system) {
margin-top: 80px;
}
/* VMS Section */
.vms-intro {
font-size: 1.125rem;
line-height: 1.8;
color: #475569;
margin: 20px 0 40px 0;
word-wrap: break-word;
overflow-wrap: break-word;
text-align: left;
}
.main-components-section .heated-gallery-section-features,
.smart-traffic-gallery .heated-gallery-section-features {
gap: 8px;
}
.smart-traffic-gallery .heated-gallery-label {
margin-bottom: 0;
}
.smart-traffic-gallery .heated-gallery-label+.vms-intro {
margin-top: 0;
}
.smart-traffic-gallery .heated-gallery-label+.installation-cases-grid,
.smart-traffic-gallery .heated-gallery-label+.sid-system-architecture,
.smart-traffic-gallery .heated-gallery-label+.bus-stop-system {
margin-top: 0;
}
.smart-traffic-gallery .vms-intro+.vms-cases-grid {
margin-top: 0;
}
.smart-traffic-gallery .sid-intro+.sid-main-card {
margin-top: 0;
}
.smart-traffic-gallery .sid-main-card {
margin-bottom: 0;
}
.smart-traffic-gallery .sid-main-card+.sid-detail-cards {
margin-top: 0;
}
/* VMS Installation Grid */
.vms-installation-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 20px;
}
.vms-installation-item {
width: 100%;
border-radius: 12px;
overflow: hidden;
}
.vms-installation-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
aspect-ratio: 4/3;
}
/* VMS Cases Grid - 이미지만 크게 나란히 배치 */
.vms-cases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 0;
}
.vms-case-item {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.vms-case-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.vms-case-item img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
min-height: 400px;
}
/* SID Section */
.sid-intro {
font-size: 1.125rem;
line-height: 1.8;
color: #475569;
margin: 20px 0 40px 0;
word-wrap: break-word;
overflow-wrap: break-word;
text-align: left;
}
.smart-traffic-gallery .heated-gallery-label+.sid-intro {
margin-top: 0;
}
.sid-intro strong {
color: #0F172A;
font-weight: 700;
font-size: 1.125rem;
}
/* SID Detail Images - 3개 이미지 나란히 */
.sid-detail-images {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 0;
margin-bottom: 32px;
}
.sid-detail-item {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
}
.sid-detail-item img {
width: 100%;
height: 500px;
display: block;
object-fit: cover;
flex-shrink: 0;
}
.sid-detail-caption {
padding: 16px;
background: #F8FAFC;
border-top: 1px solid #E2E8F0;
font-size: 0.9375rem;
color: #475569;
line-height: 1.7;
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;
text-align: justify;
text-justify: inter-word;
}
.sid-detail-caption strong {
font-weight: 700;
color: #0F172A;
}
/* SID Down Arrow */
.sid-arrow-down {
display: flex;
justify-content: center;
align-items: center;
margin: 32px 0;
color: #64748B;
}
.sid-arrow-down svg {
width: 40px;
height: 40px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-10px);
}
60% {
transform: translateY(-5px);
}
}
/* SID Main Layout - 이미지 왼쪽, 설명 오른쪽 */
.sid-main-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: flex-start;
margin-top: 0;
}
.sid-main-image {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.sid-main-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.sid-main-description {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
.sid-main-description h3 {
font-size: 1.5rem;
font-weight: 700;
color: #0F172A;
margin-bottom: 24px;
letter-spacing: -0.01em;
}
.sid-description-list {
list-style: none;
padding: 0;
margin: 0;
}
.sid-description-list li {
font-size: 1rem;
color: #475569;
line-height: 1.8;
padding: 12px 0;
padding-left: 24px;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
}
.sid-description-list li strong {
color: #0F172A;
font-weight: 600;
}
.sid-description-list li::before {
content: "•";
position: absolute;
left: 0;
color: #3B82F6;
font-weight: bold;
font-size: 1.25rem;
}
/* SID System Components in Main Description */
.sid-system-title {
font-size: 1.5rem;
font-weight: 700;
color: #0F172A;
margin-top: 40px;
margin-bottom: 24px;
letter-spacing: -0.01em;
}
.sid-system-components {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.sid-system-item {
background: #F8FAFC;
padding: 20px;
border-radius: 12px;
border: 1px solid #E2E8F0;
}
.sid-system-item h4 {
font-size: 1rem;
font-weight: 700;
color: #0F172A;
margin-bottom: 12px;
letter-spacing: -0.01em;
word-wrap: break-word;
overflow-wrap: break-word;
}
.sid-system-item ul {
list-style: none;
padding: 0;
margin: 0;
}
.sid-system-item ul li {
font-size: 0.875rem;
color: #475569;
line-height: 1.6;
padding: 4px 0;
padding-left: 16px;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
}
.sid-system-item ul li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
font-size: 0.875rem;
}
/* Bus Stop No-Stop Prevention System */
.bus-stop-system {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
margin-top: 0;
}
.bus-stop-image {
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.bus-stop-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
.bus-stop-description {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
.bus-stop-description p {
font-size: 1.125rem;
color: #475569;
line-height: 1.8;
word-wrap: break-word;
overflow-wrap: break-word;
margin: 0;
}
/* SID System Architecture */
.sid-system-architecture {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 0;
padding: 40px;
background: #F8FAFC;
border-radius: 16px;
}
.system-component {
background: #FFFFFF;
padding: 24px;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.system-component:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.system-component h4 {
font-size: 1.125rem;
font-weight: 700;
color: #0F172A;
margin-bottom: 16px;
letter-spacing: -0.01em;
word-wrap: break-word;
overflow-wrap: break-word;
}
.system-component ul {
list-style: none;
padding: 0;
margin: 0;
}
.system-component ul li {
font-size: 0.9375rem;
color: #475569;
line-height: 1.7;
padding: 6px 0;
padding-left: 20px;
position: relative;
word-wrap: break-word;
overflow-wrap: break-word;
}
.system-component ul li::before {
content: "•";
position: absolute;
left: 0;
color: #3B82F6;
font-weight: bold;
font-size: 1rem;
}
/* Installation Cases Grid */
.installation-cases-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
margin-top: 0;
}
.installation-cases-grid .bit-case-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.installation-cases-grid .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.installation-cases-grid .heated-gallery-item {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.installation-cases-grid .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
/* Responsive Design for Smart Traffic Section */
@media (max-width: 1024px) {
.smart-traffic-main-images {
gap: 20px;
}
.smart-traffic-systems {
flex-direction: column;
gap: 32px;
padding: 0 20px;
}
.smart-system-card {
max-width: 100%;
}
.vms-cases-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.sid-detail-images {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.sid-main-layout {
grid-template-columns: 1fr;
gap: 32px;
}
.sid-system-components {
grid-template-columns: 1fr;
gap: 16px;
}
.bus-stop-system {
grid-template-columns: 1fr;
gap: 32px;
}
.sid-system-architecture {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
padding: 32px 24px;
}
.installation-cases-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 768px) {
.smart-traffic-main-images {
gap: 16px;
}
.smart-traffic-systems {
margin: 40px 0;
padding: 0 16px;
}
.smart-system-title {
font-size: 1.125rem;
}
.smart-traffic-gallery .heated-gallery-section-features {
padding: 0 16px;
}
.vms-intro,
.sid-intro {
font-size: 1rem;
margin: 20px 0 32px 0;
}
.vms-cases-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.vms-case-item img {
min-height: 300px;
}
.sid-detail-images {
grid-template-columns: 1fr;
gap: 20px;
}
.sid-detail-item img {
height: 350px;
}
.sid-detail-caption {
font-size: 0.875rem;
padding: 12px;
text-align: left;
}
.sid-main-layout {
grid-template-columns: 1fr;
gap: 24px;
}
.sid-main-description h3 {
font-size: 1.25rem;
}
.sid-description-list li {
font-size: 0.9375rem;
}
.bus-stop-system {
grid-template-columns: 1fr;
gap: 24px;
}
.bus-stop-description p {
font-size: 1rem;
}
.sid-system-architecture {
grid-template-columns: 1fr;
gap: 16px;
padding: 24px 20px;
}
.system-component h4 {
font-size: 1rem;
}
.system-component ul li {
font-size: 0.875rem;
}
.installation-cases-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* ========================================
Large LED Gallery Layout
======================================== */
.large-led-gallery {
width: 100%;
padding: 0 0 80px 0;
margin-top: -60px;
}
.large-led-gallery .large-led-products {
max-width: 1400px;
margin: 0 auto;
padding: 0 60px;
}
.large-led-gallery .large-led-products {
gap: 0;
}
.large-led-gallery .large-led-products .heated-gallery-label {
margin-bottom: 40px;
}
.large-led-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
margin-top: 0;
padding-top: 0;
}
.large-led-gallery .bit-case-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.large-led-gallery .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.large-led-gallery .heated-gallery-item {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.large-led-gallery .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.large-led-gallery .bit-case-info {
padding: 24px;
}
.large-led-gallery .bit-case-info h3 {
font-size: 22px;
font-weight: 600;
color: #0F172A;
margin-bottom: 12px;
letter-spacing: -0.01em;
word-break: keep-all;
overflow-wrap: break-word;
}
.large-led-gallery .bit-case-subtitle {
font-size: 15px;
color: #64748B;
margin-bottom: 16px;
font-weight: 500;
word-break: keep-all;
overflow-wrap: break-word;
}
.large-led-gallery .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.large-led-gallery .bit-case-features li {
font-size: 15px;
color: #475569;
line-height: 1.7;
padding: 6px 0;
padding-left: 20px;
position: relative;
word-break: keep-all;
overflow-wrap: break-word;
}
.large-led-gallery .bit-case-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
}
/* 설치 사례 섹션 - 물류센터 전광판 이미지 그리드 */
.large-led-cases {
max-width: 1400px;
margin: 60px auto 0;
padding: 0 60px;
}
.large-led-cases .heated-gallery-label {
margin-bottom: 10px;
}
.delivery-images-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.delivery-image-item {
width: 100%;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
}
.delivery-image-item img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
}
/* Large Scale Display 섹션 이미지 크기 줄이기 */
#large-led .heated-overview-image img {
max-width: 105%;
width: 105%;
}
/* Large Scale Display 섹션 여백 줄이기 */
#large-led.heated-overview {
padding-top: 60px;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* LED Signs 페이지 - 모든 라인 제거 */
body:has(#dynamic-display) .heated-overview,
body:has(#large-led) .heated-overview,
body:has(#child-safety) .heated-overview,
body:has(#smart-traffic) .heated-overview,
body:has(#vehicle-led) .heated-overview,
body:has(#dynamic-display-features) .heated-overview,
body:has(#system-concept) .heated-overview {
border-bottom: none !important;
border-top: none !important;
}
/* Bus Stop Solutions 페이지 - 모든 라인 제거 */
body:has(#bit-overview) .heated-overview,
body:has(#accessible-stop) .heated-overview,
body:has(#safety-shelter) .heated-overview,
#bit-overview.heated-overview,
#accessible-stop.heated-overview,
#safety-shelter.heated-overview {
border-bottom: none !important;
border-top: none !important;
}
/* Dynamic Display 섹션 - 여백 조정 */
#dynamic-display.heated-overview {
padding: 60px 0 20px 0;
/* 상단 여백을 30px에서 60px로 늘려 물류센터 전광판과의 간격 확대 */
}
/* 동적 호차표시기 특징 섹션 - 간격 줄이기 */
#dynamic-display-features.heated-overview {
padding: 20px 0;
}
/* 시스템 개념도 섹션 - 여백 줄이기 */
#system-concept.heated-overview {
padding: 20px 0 30px 0;
}
/* Vehicle LED Display 섹션 - 여백 조정 */
#vehicle-led.heated-overview {
padding-top: 90px;
/* 60px에서 90px로 늘려 무정차 방지시스템과의 간격 확대 */
padding-bottom: 20px !important;
}
/* 동적 호차표시기 특징 섹션 - 이미지 세로 배치 */
.dynamic-display-images {
flex-direction: column;
gap: 40px;
}
.dynamic-display-images img {
width: 80%;
max-width: 80%;
height: auto;
object-fit: contain;
}
/* main 태그 다음 large-led-gallery 여백 줄이기 */
.heated-main+.large-led-gallery {
margin-top: -100px;
}
/* Responsive Design for Large LED Gallery */
@media (max-width: 1400px) {
.large-led-gallery .large-led-products {
padding: 0 50px;
}
.large-led-grid {
gap: 32px;
}
.large-led-cases {
padding: 0 50px;
}
.vehicle-led-container {
padding: 0 50px;
}
}
@media (max-width: 1024px) {
.large-led-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.large-led-gallery .large-led-products {
padding: 0 20px;
}
.large-led-cases {
padding: 0 20px;
}
.vehicle-led-container {
padding: 0 20px;
}
.delivery-images-grid {
gap: 30px;
}
#large-led .heated-overview-image img {
max-width: 90%;
width: 90%;
}
}
@media (max-width: 768px) {
.large-led-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.large-led-gallery .large-led-products {
padding: 0 20px;
}
.large-led-gallery .large-led-products .heated-gallery-label {
margin-bottom: 30px;
}
.vehicle-led-container .heated-gallery-label {
margin-bottom: 30px;
}
.large-led-cases {
padding: 0 20px;
margin-top: 40px;
}
.large-led-cases .heated-gallery-label {
margin-bottom: 10px;
}
.delivery-images-grid {
grid-template-columns: 1fr;
gap: 24px;
}
#large-led .heated-overview-image img {
max-width: 95%;
width: 95%;
}
}
/* ========================================
Web Solution Section
======================================== */
.web-solution-section {
padding: 100px 0 120px;
background: #ffffff;
}
.web-solution-intro {
text-align: center;
max-width: 800px;
margin: 0 auto 80px;
padding: 0 40px;
}
.web-solution-intro-text {
font-size: 1.2rem;
color: #64748B;
line-height: 1.8;
font-weight: 400;
}
.web-solution-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
.web-solution-card {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.web-solution-card:hover {
transform: translateY(-12px);
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
border-color: rgba(0, 0, 0, 0.1);
}
.web-solution-image-wrapper {
position: relative;
width: 100%;
padding-top: 70%;
/* 더 큰 이미지 영역 */
overflow: hidden;
background: #f8f9fa;
}
.web-solution-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.web-solution-card:hover .web-solution-image {
transform: scale(1.1);
}
.web-solution-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
padding: 50px 35px 35px;
transform: translateY(0);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.web-solution-card:hover .web-solution-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 100%);
padding-bottom: 40px;
}
.web-solution-title {
font-size: 1.75rem;
font-weight: 700;
color: #ffffff;
line-height: 1.4;
letter-spacing: -0.02em;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
.web-solution-content {
padding: 32px 35px 35px;
background: #fff;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.web-solution-description {
font-size: 1rem;
color: #64748B;
line-height: 1.7;
margin-bottom: 20px;
font-weight: 400;
}
.web-solution-link {
font-size: 0.95rem;
color: #1E293B;
font-weight: 600;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.web-solution-card:hover .web-solution-link {
color: #EF4444;
transform: translateX(4px);
}
@media (max-width: 1024px) {
.web-solution-section {
padding: 80px 0 100px;
}
.web-solution-intro {
margin-bottom: 60px;
}
.web-solution-intro-text {
font-size: 1.1rem;
}
.web-solution-grid {
gap: 40px;
padding: 0 30px;
}
.web-solution-image-wrapper {
padding-top: 65%;
}
.web-solution-title {
font-size: 1.5rem;
}
.web-solution-content {
padding: 28px 30px 30px;
}
.web-solution-description {
font-size: 0.95rem;
}
}
@media (max-width: 768px) {
.web-solution-section {
padding: 60px 0 80px;
}
.web-solution-intro {
margin-bottom: 50px;
padding: 0 20px;
}
.web-solution-intro-text {
font-size: 1rem;
}
.web-solution-grid {
grid-template-columns: 1fr;
gap: 35px;
padding: 0 20px;
}
.web-solution-image-wrapper {
padding-top: 60%;
}
.web-solution-overlay {
padding: 40px 25px 25px;
}
.web-solution-title {
font-size: 1.4rem;
}
.web-solution-content {
padding: 25px 25px 28px;
}
.web-solution-description {
font-size: 0.95rem;
margin-bottom: 18px;
}
}
@media (max-width: 480px) {
.web-solution-section {
padding: 40px 0 60px;
}
.web-solution-intro {
margin-bottom: 40px;
padding: 0 15px;
}
.web-solution-intro-text {
font-size: 0.95rem;
line-height: 1.7;
}
.web-solution-grid {
padding: 0 15px;
gap: 28px;
}
.web-solution-image-wrapper {
padding-top: 56.25%;
}
.web-solution-overlay {
padding: 35px 20px 20px;
}
.web-solution-title {
font-size: 1.25rem;
}
.web-solution-content {
padding: 22px 20px 25px;
}
.web-solution-description {
font-size: 0.9rem;
margin-bottom: 16px;
}
.web-solution-link {
font-size: 0.9rem;
}
}
/* Systems Page - Product Line Section 이미지 중앙 배치 및 크기 조정 (가로형 이미지 최적화) */
body:has(#traffic-control) .product-line-layout {
grid-template-columns: 1.2fr 0.8fr;
gap: 80px;
justify-items: center;
}
body:has(#traffic-control) .product-cards-area {
display: flex;
justify-content: center;
align-items: center;
height: auto;
min-height: 350px;
}
body:has(#traffic-control) .product-card-large.card-primary {
position: relative;
width: 550px;
height: auto;
aspect-ratio: auto;
top: auto;
left: auto;
transform: none;
}
body:has(#traffic-control) .product-card-large.card-primary img {
width: 100%;
height: auto;
object-fit: contain;
margin: auto;
display: block;
}
body:has(#traffic-control) .product-card-large.card-primary:hover {
transform: scale(1.05) rotate(-1deg);
box-shadow:
0 40px 110px rgba(0, 0, 0, 0.5),
0 20px 60px rgba(0, 0, 0, 0.35),
0 6px 22px rgba(0, 0, 0, 0.25);
z-index: 10;
}
body:has(#traffic-control) .product-card-large.card-primary:hover img {
width: 100%;
height: auto;
}
@media (max-width: 1400px) {
body:has(#traffic-control) .product-card-large.card-primary {
width: 500px;
height: auto;
}
}
@media (max-width: 1200px) {
body:has(#traffic-control) .product-card-large.card-primary {
width: 480px;
height: auto;
}
}
@media (max-width: 992px) {
body:has(#traffic-control) .product-line-layout {
grid-template-columns: 1fr;
}
body:has(#traffic-control) .product-cards-area {
min-height: 300px;
}
body:has(#traffic-control) .product-card-large.card-primary {
width: 450px;
height: auto;
}
}
@media (max-width: 768px) {
body:has(#traffic-control) .product-cards-area {
min-height: 280px;
}
body:has(#traffic-control) .product-card-large.card-primary {
width: 400px;
height: auto;
}
}
@media (max-width: 576px) {
body:has(#traffic-control) .product-cards-area {
min-height: 220px;
}
body:has(#traffic-control) .product-card-large.card-primary {
width: 100%;
max-width: 350px;
height: auto;
}
}
/* Cleaning Vehicle Page - Product Line Section 이미지 중앙 배치 및 크기 조정 (가로형 이미지 최적화) */
body:has(#vehicle-management) .product-line-layout {
grid-template-columns: 1.2fr 0.8fr;
gap: 80px;
justify-items: center;
}
/* Cleaning Vehicle Page - 텍스트 영역 우측 여백 증가 */
.cleaning-vehicle-page .product-line-section {
padding-bottom: 80px;
}
.cleaning-vehicle-page .product-line-container {
padding-right: 100px;
}
.cleaning-vehicle-page .product-line-text {
padding-left: 0;
padding-right: 100px;
}
body:has(#vehicle-management) .product-cards-area {
display: flex;
justify-content: center;
align-items: center;
height: auto;
min-height: 400px;
}
body:has(#vehicle-management) .product-card-large.card-primary {
position: relative;
width: 700px;
height: auto;
aspect-ratio: auto;
top: auto;
left: auto;
transform: none;
}
body:has(#vehicle-management) .product-card-large.card-primary img {
width: 100%;
height: auto;
object-fit: contain;
margin: auto;
display: block;
}
body:has(#vehicle-management) .product-card-large.card-primary:hover {
transform: scale(1.05) rotate(-1deg);
box-shadow:
0 40px 110px rgba(0, 0, 0, 0.5),
0 20px 60px rgba(0, 0, 0, 0.35),
0 6px 22px rgba(0, 0, 0, 0.25);
z-index: 10;
}
body:has(#vehicle-management) .product-card-large.card-primary:hover img {
width: 100%;
height: auto;
}
@media (max-width: 1400px) {
body:has(#vehicle-management) .product-card-large.card-primary {
width: 650px;
height: auto;
}
}
@media (max-width: 1200px) {
body:has(#vehicle-management) .product-card-large.card-primary {
width: 600px;
height: auto;
}
}
@media (max-width: 992px) {
body:has(#vehicle-management) .product-line-layout {
grid-template-columns: 1fr;
}
body:has(#vehicle-management) .product-cards-area {
min-height: 350px;
}
body:has(#vehicle-management) .product-card-large.card-primary {
width: 550px;
height: auto;
}
}
@media (max-width: 768px) {
body:has(#vehicle-management) .product-cards-area {
min-height: 300px;
}
body:has(#vehicle-management) .product-card-large.card-primary {
width: 500px;
height: auto;
}
}
@media (max-width: 576px) {
body:has(#vehicle-management) .product-cards-area {
min-height: 250px;
}
body:has(#vehicle-management) .product-card-large.card-primary {
width: 100%;
max-width: 450px;
height: auto;
}
}
/* Cleaning Vehicle - Monitor Grid (세로 배치) */
.cleaning-vehicle-monitor-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
align-items: start;
max-width: 1400px;
margin: 0 auto;
}
.cleaning-vehicle-monitor-item {
display: flex;
flex-direction: column;
}
.cleaning-vehicle-monitor-item .heated-gallery-item {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 16px;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.cleaning-vehicle-monitor-item .heated-gallery-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cleaning-vehicle-monitor-item .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
padding: 16px;
}
.cleaning-vehicle-monitor-info {
grid-column: 1 / -1;
padding: 24px;
background: #ffffff;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
margin-top: 24px;
}
.cleaning-vehicle-monitor-info .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.cleaning-vehicle-monitor-info .bit-case-features li {
font-size: 16px;
color: #475569;
line-height: 1.8;
padding: 12px 0;
padding-left: 24px;
position: relative;
}
.cleaning-vehicle-monitor-info .bit-case-features li::before {
content: "•";
position: absolute;
left: 0;
color: #3B82F6;
font-weight: bold;
font-size: 20px;
}
/* Cleaning Vehicle - Vehicle Management Section 이미지 세로 배치 */
#vehicle-management .heated-overview-image {
display: flex !important;
flex-direction: column !important;
gap: 32px !important;
align-items: flex-end !important;
justify-content: flex-start !important;
}
#vehicle-management .heated-overview-image img {
width: 100% !important;
max-width: 90% !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
/* Cleaning Vehicle - Screen Logic Section */
.cleaning-vehicle-screen-logic {
margin-top: 20px;
}
.cleaning-vehicle-screen-logic h3 {
font-size: 24px;
font-weight: 600;
color: #0F172A;
margin-bottom: 24px;
letter-spacing: -0.01em;
}
.cleaning-vehicle-features-list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: feature-counter;
}
.cleaning-vehicle-features-list li {
font-size: 16px;
color: #475569;
line-height: 1.8;
padding: 12px 0;
padding-left: 36px;
position: relative;
counter-increment: feature-counter;
}
.cleaning-vehicle-features-list li::before {
content: counter(feature-counter) ".";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: 600;
font-size: 16px;
}
/* Cleaning Vehicle - Screen Logic Section 라인 제거 및 여백 조정 */
#screen-logic.heated-overview {
padding: 60px 0 40px 0;
border-bottom: none !important;
border-top: none !important;
}
/* Cleaning Vehicle - 이전 섹션 하단 라인 제거 */
#vehicle-management.heated-overview {
border-bottom: none !important;
}
/* Cleaning Vehicle - Screen Logic 이미지 크기 키우기 */
#screen-logic .heated-overview-image img {
max-width: 110% !important;
width: 110% !important;
}
/* Cleaning Vehicle - 메인 섹션 하단 여백 줄이기 */
/* Cleaning Vehicle - 메인 섹션 하단 여백 (footer 위쪽 여백) */
.cleaning-vehicle-page .heated-main {
padding-bottom: 120px !important;
}
/* Cleaning Vehicle - 첫 번째 섹션 상단 여백 줄이기 */
.cleaning-vehicle-page #vehicle-management.heated-overview {
padding-top: 40px !important;
}
@media (max-width: 992px) {
.cleaning-vehicle-monitor-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.cleaning-vehicle-monitor-info {
grid-column: 1;
margin-top: 0;
}
.cleaning-vehicle-monitor-item .heated-gallery-item {
aspect-ratio: 16 / 9;
}
}
/* Systems Page - 교통관제시스템 및 과속경보시스템 카드 한 줄 배치 */
.traffic-control-cards,
.speed-warning-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
margin-top: 24px;
}
.speed-warning-cards {
grid-template-columns: repeat(2, 1fr);
}
/* Systems Page - 과속경보시스템 좌우 분할 레이아웃 */
.speed-warning-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
margin-top: 24px;
}
.speed-warning-text {
display: flex;
flex-direction: column;
gap: 40px;
}
.speed-warning-item h3 {
font-size: 22px;
font-weight: 700;
color: #0F172A;
margin: 0 0 16px 0;
letter-spacing: -0.01em;
}
.speed-warning-features {
list-style: none;
padding: 0;
margin: 0;
}
.speed-warning-features li {
font-size: 16px;
color: #475569;
line-height: 1.8;
padding: 8px 0;
padding-left: 24px;
position: relative;
}
.speed-warning-features li::before {
content: "•";
position: absolute;
left: 0;
color: var(--primary-color, #3B82F6);
font-weight: bold;
font-size: 20px;
}
.speed-warning-images {
display: flex;
flex-direction: column;
gap: 24px;
}
.speed-warning-image-item {
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
background: #ffffff;
}
.speed-warning-image-item img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
@media (max-width: 992px) {
.speed-warning-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.speed-warning-images {
order: -1;
}
}
/* Systems Page - 교통관제시스템(과속경보시스템) 좌우 분할 레이아웃 */
.traffic-speed-warning-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
margin-top: 24px;
margin-bottom: 60px;
}
.traffic-speed-warning-text {
display: flex;
flex-direction: column;
}
.traffic-speed-warning-features {
list-style: none;
padding: 0;
margin: 0;
}
.traffic-speed-warning-features li {
font-size: 16px;
color: #475569;
line-height: 1.9;
padding: 12px 0;
padding-left: 32px;
position: relative;
}
.traffic-speed-warning-features li::before {
content: "▶";
position: absolute;
left: 0;
color: var(--primary-color, #3B82F6);
font-weight: bold;
font-size: 14px;
}
.traffic-speed-warning-image {
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
}
.traffic-speed-warning-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* Systems Page - 과속경보시스템 타입 카드 (2열) */
.speed-warning-type-cards {
display: grid;
grid-template-columns: repeat(2, minmax(300px, 450px));
gap: 48px;
margin-top: 0;
justify-content: center;
}
.speed-warning-type-cards .bit-case-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
max-width: 450px;
}
.speed-warning-type-cards .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.speed-warning-type-cards .heated-gallery-item {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: stretch;
justify-content: stretch;
position: relative;
}
.speed-warning-type-cards .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
padding: 0;
}
.speed-warning-type-cards .bit-case-info {
padding: 24px;
flex: 1;
}
.speed-warning-type-cards .bit-case-info h3 {
font-size: 20px;
font-weight: 700;
color: #0F172A;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.speed-warning-type-cards .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.speed-warning-type-cards .bit-case-features li {
font-size: 14px;
color: #475569;
line-height: 1.7;
padding: 6px 0;
padding-left: 20px;
position: relative;
}
.speed-warning-type-cards .bit-case-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
}
@media (max-width: 992px) {
.traffic-speed-warning-layout {
grid-template-columns: 1fr;
gap: 40px;
margin-bottom: 40px;
}
.traffic-speed-warning-image {
order: -1;
}
.speed-warning-type-cards {
grid-template-columns: 1fr;
gap: 32px;
}
}
/* Systems Page - child-safety-gallery 스타일 적용 */
.systems-gallery .heated-gallery-section-features,
.systems-gallery .heated-gallery-section-options {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1400px;
margin: 0 auto;
}
.systems-gallery .heated-gallery-section-options {
margin-top: 60px;
}
.systems-gallery .heated-gallery-label {
grid-column: 1 / -1;
margin-bottom: 0;
}
.systems-gallery-cards {
display: grid;
grid-template-columns: repeat(2, minmax(300px, 450px));
gap: 32px;
max-width: 1400px;
margin: 0 auto;
justify-content: center;
}
.systems-gallery .bit-case-card,
.systems-gallery-cards .bit-case-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
max-width: 450px;
}
.systems-gallery .bit-case-card:hover,
.systems-gallery-cards .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.systems-gallery .heated-gallery-item,
.systems-gallery-cards .heated-gallery-item {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: stretch;
justify-content: stretch;
position: relative;
}
.systems-gallery .heated-gallery-item img,
.systems-gallery-cards .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
padding: 0;
}
.systems-gallery .bit-case-info,
.systems-gallery-cards .bit-case-info {
padding: 24px;
}
.systems-gallery .bit-case-info h3,
.systems-gallery-cards .bit-case-info h3 {
font-size: 24px;
font-weight: 600;
color: #0F172A;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.systems-gallery .bit-case-info p {
font-size: 16px;
line-height: 1.7;
color: #475569;
margin-bottom: 16px;
}
.systems-gallery .bit-case-features,
.systems-gallery-cards .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.systems-gallery .bit-case-features li,
.systems-gallery-cards .bit-case-features li {
font-size: 16px;
color: #475569;
line-height: 1.7;
padding: 8px 0;
padding-left: 20px;
position: relative;
}
.systems-gallery .bit-case-features li::before,
.systems-gallery-cards .bit-case-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
}
/* Systems Page - 3열 카드 레이아웃 (교통관제시스템) */
.traffic-control-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1400px;
margin: 0 auto;
}
@media (max-width: 1200px) {
.traffic-control-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1024px) {
.systems-gallery .heated-gallery-section-features,
.systems-gallery .heated-gallery-section-options,
.systems-gallery-cards,
.traffic-control-cards {
grid-template-columns: 1fr;
gap: 24px;
}
.systems-gallery .heated-gallery-item,
.systems-gallery-cards .heated-gallery-item {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 768px) {
.systems-gallery .heated-gallery-section-features,
.systems-gallery .heated-gallery-section-options,
.systems-gallery-cards,
.traffic-control-cards {
gap: 20px;
}
.systems-gallery .bit-case-info,
.systems-gallery-cards .bit-case-info {
padding: 20px;
}
.systems-gallery .bit-case-info h3,
.systems-gallery-cards .bit-case-info h3 {
font-size: 22px;
}
.systems-gallery .bit-case-features li,
.systems-gallery-cards .bit-case-features li {
font-size: 15px;
}
.systems-gallery .heated-gallery-item,
.systems-gallery-cards .heated-gallery-item {
aspect-ratio: 16 / 9;
}
}
@media (max-width: 640px) {
.systems-gallery .bit-case-info,
.systems-gallery-cards .bit-case-info {
padding: 16px;
}
.systems-gallery .bit-case-info h3,
.systems-gallery-cards .bit-case-info h3 {
font-size: 20px;
}
.systems-gallery .bit-case-features li,
.systems-gallery-cards .bit-case-features li {
font-size: 14px;
}
}
.traffic-control-cards .bit-case-card,
.speed-warning-cards .bit-case-card {
display: flex;
flex-direction: column;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.traffic-control-cards .bit-case-card:hover,
.speed-warning-cards .bit-case-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.traffic-control-cards .heated-gallery-item,
.speed-warning-cards .heated-gallery-item {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
overflow: hidden;
background: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.traffic-control-cards .heated-gallery-item img,
.speed-warning-cards .heated-gallery-item img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
padding: 16px;
}
.traffic-control-cards .bit-case-info,
.speed-warning-cards .bit-case-info {
padding: 24px;
flex: 1;
}
.traffic-control-cards .bit-case-info h3,
.speed-warning-cards .bit-case-info h3 {
font-size: 20px;
font-weight: 700;
color: #0F172A;
margin-bottom: 12px;
letter-spacing: -0.01em;
}
.traffic-control-cards .bit-case-info p {
font-size: 14px;
line-height: 1.7;
color: #475569;
margin-bottom: 16px;
}
.traffic-control-cards .bit-case-features,
.speed-warning-cards .bit-case-features {
list-style: none;
padding: 0;
margin: 0;
}
.traffic-control-cards .bit-case-features li,
.speed-warning-cards .bit-case-features li {
font-size: 14px;
color: #475569;
line-height: 1.7;
padding: 6px 0;
padding-left: 20px;
position: relative;
}
.traffic-control-cards .bit-case-features li::before,
.speed-warning-cards .bit-case-features li::before {
content: "•";
position: absolute;
left: 0;
color: #1e3a8a;
font-weight: bold;
}
@media (max-width: 1200px) {
.traffic-control-cards {
grid-template-columns: repeat(2, 1fr);
}
.traffic-control-cards .bit-case-card:last-child {
grid-column: 1 / -1;
}
}
@media (max-width: 768px) {
.traffic-control-cards,
.speed-warning-cards {
grid-template-columns: 1fr;
gap: 24px;
}
.traffic-control-cards .bit-case-card:last-child {
grid-column: 1;
}
}
/* Systems Page - 과속경보시스템 섹션 여백 및 라인 조정 */
#speed-warning.heated-overview,
#traffic-control.heated-overview {
padding-top: 40px;
padding-bottom: 20px;
border-bottom: none !important;
border-top: none !important;
}
#speed-warning .heated-overview-top,
#traffic-control .heated-overview-top {
margin-bottom: 30px;
}
/* Speed Warning - Gallery 섹션 상단 여백 줄이기 */
#speed-warning+.heated-overview-gallery {
margin-top: 0;
padding-top: 0;
}
#speed-warning+.heated-overview-gallery .heated-gallery-section-features {
margin-top: 0;
padding-top: 0;
}
#speed-warning .heated-feature-point span,
#traffic-control .heated-feature-point span {
word-wrap: break-word;
overflow-wrap: break-word;
word-break: keep-all;
white-space: normal;
line-height: 1.7;
}
/* Systems Page - 구성도 헤더 및 이미지 */
.system-diagram-header {
margin-bottom: 24px;
text-align: center;
}
.system-diagram-header h3 {
font-size: 24px;
font-weight: 700;
color: #0F172A;
margin: 0 0 8px 0;
letter-spacing: -0.01em;
}
.system-diagram-header p {
font-size: 16px;
color: #64748B;
margin: 0;
line-height: 1.6;
}
.system-diagram-container {
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
.system-diagram-image {
width: 100%;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.system-diagram-image img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
}
/* Cleaning Vehicle - Structure Layout (왼쪽 텍스트, 오른쪽 이미지) */
.cleaning-vehicle-structure-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.cleaning-vehicle-structure-text {
display: flex;
flex-direction: column;
}
.cleaning-vehicle-structure-text .heated-gallery-label {
margin-bottom: 0;
}
.cleaning-vehicle-structure-text .heated-overview-features {
margin-top: 20px;
}
.cleaning-vehicle-structure-image {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.cleaning-vehicle-structure-image .system-diagram-image {
width: 100%;
max-width: 120%;
transform: scale(1.1);
}
@media (max-width: 992px) {
.cleaning-vehicle-structure-layout {
grid-template-columns: 1fr;
gap: 40px;
}
.cleaning-vehicle-structure-image {
order: -1;
}
}
@media (max-width: 768px) {
.system-diagram-header {
margin-bottom: 20px;
}
.system-diagram-header h3 {
font-size: 20px;
}
.system-diagram-header p {
font-size: 14px;
}
}
/* Update for Smart Traffic Removal: Center 4th card in Quintuple layout when it is the last child */
.product-cards-quintuple .product-card-large.card-quaternary:last-child {
margin-left: 345px;
}
@media (max-width: 1800px) {
.product-cards-quintuple .product-card-large.card-quaternary:last-child {
margin-left: 265px;
}
}
@media (max-width: 1400px) {
.product-cards-quintuple .product-card-large.card-quaternary:last-child {
margin-left: 245px;
}
}
@media (max-width: 992px) {
.product-cards-quintuple .product-card-large.card-quaternary:last-child {
margin-left: 222px;
}
}
@media (max-width: 768px) {
.product-cards-quintuple .product-card-large.card-quaternary:last-child {
margin-left: 0;
}
}