first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,443 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- Corporate Professional Layout -->
|
||||
<div class="corporate-pro-container">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<div class="hero-pattern"></div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">TRUSTED BY 500+ COMPANIES</span>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-main">Enterprise Solutions</span>
|
||||
<span class="title-sub">for Modern Business</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
신뢰할 수 있는 파트너와 함께 비즈니스의 성장을 가속화하세요.
|
||||
검증된 기술과 전문성을 바탕으로 한 솔루션을 제공합니다.
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#contact" class="btn-primary">무료 상담 신청</a>
|
||||
<a href="#solutions" class="btn-secondary">솔루션 보기</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">500+</span>
|
||||
<span class="stat-label">기업 고객</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">99.9%</span>
|
||||
<span class="stat-label">서비스 가동률</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">24/7</span>
|
||||
<span class="stat-label">기술 지원</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="dashboard-preview">
|
||||
<div class="dashboard-header">
|
||||
<div class="dashboard-title">Enterprise Dashboard</div>
|
||||
<div class="dashboard-controls">
|
||||
<span class="control-dot"></span>
|
||||
<span class="control-dot"></span>
|
||||
<span class="control-dot"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-content">
|
||||
<div class="dashboard-sidebar">
|
||||
<div class="sidebar-item active">대시보드</div>
|
||||
<div class="sidebar-item">분석</div>
|
||||
<div class="sidebar-item">보고서</div>
|
||||
<div class="sidebar-item">설정</div>
|
||||
</div>
|
||||
<div class="dashboard-main">
|
||||
<div class="chart-container">
|
||||
<div class="chart-header">성과 지표</div>
|
||||
<div class="chart-placeholder">
|
||||
<div class="chart-bar" style="height: 60%"></div>
|
||||
<div class="chart-bar" style="height: 80%"></div>
|
||||
<div class="chart-bar" style="height: 45%"></div>
|
||||
<div class="chart-bar" style="height: 90%"></div>
|
||||
<div class="chart-bar" style="height: 70%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="metrics-grid">
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">₩2.4M</div>
|
||||
<div class="metric-label">월 매출</div>
|
||||
</div>
|
||||
<div class="metric-card">
|
||||
<div class="metric-value">+15%</div>
|
||||
<div class="metric-label">성장률</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section class="services-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">SERVICES</span>
|
||||
<h2 class="section-title">전문 서비스</h2>
|
||||
<p class="section-subtitle">다양한 비즈니스 요구사항에 맞는 맞춤형 솔루션을 제공합니다.</p>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9 9H15V15H9V9Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>시스템 통합</h3>
|
||||
<p>기존 시스템과의 완벽한 연동을 통한 효율적인 업무 프로세스 구축</p>
|
||||
<ul class="service-features">
|
||||
<li>레거시 시스템 현대화</li>
|
||||
<li>API 통합 및 연동</li>
|
||||
<li>데이터 마이그레이션</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>클라우드 마이그레이션</h3>
|
||||
<p>안전하고 효율적인 클라우드 환경으로의 전환을 지원합니다</p>
|
||||
<ul class="service-features">
|
||||
<li>AWS/Azure/GCP 마이그레이션</li>
|
||||
<li>보안 및 규정 준수</li>
|
||||
<li>비용 최적화</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>데이터 분석</h3>
|
||||
<p>빅데이터를 활용한 인사이트 도출 및 의사결정 지원</p>
|
||||
<ul class="service-features">
|
||||
<li>데이터 시각화</li>
|
||||
<li>예측 분석</li>
|
||||
<li>실시간 모니터링</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>보안 솔루션</h3>
|
||||
<p>엔터프라이즈급 보안 체계 구축으로 데이터와 시스템을 보호합니다</p>
|
||||
<ul class="service-features">
|
||||
<li>멀티팩터 인증</li>
|
||||
<li>암호화 및 키 관리</li>
|
||||
<li>보안 감사 및 모니터링</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Case Studies Section -->
|
||||
<section class="case-studies-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">CASE STUDIES</span>
|
||||
<h2 class="section-title">성공 사례</h2>
|
||||
<p class="section-subtitle">다양한 산업 분야에서 검증된 성과를 확인해보세요.</p>
|
||||
</div>
|
||||
<div class="case-studies-grid">
|
||||
<div class="case-study-card">
|
||||
<div class="case-study-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1556742502-ec7c0e9f34b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="금융업계 디지털 전환">
|
||||
<div class="case-study-overlay">
|
||||
<span class="case-study-industry">금융업계</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-content">
|
||||
<h3>대형 은행 디지털 전환</h3>
|
||||
<p>전통적인 은행 시스템을 클라우드 기반 모바일 뱅킹으로 전환하여 고객 만족도를 40% 향상시켰습니다.</p>
|
||||
<div class="case-study-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-value">40%</span>
|
||||
<span class="metric-label">고객 만족도 향상</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-value">60%</span>
|
||||
<span class="metric-label">운영 비용 절감</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-card">
|
||||
<div class="case-study-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1581092916376-02c94835b179?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="제조업계 스마트 팩토리">
|
||||
<div class="case-study-overlay">
|
||||
<span class="case-study-industry">제조업계</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-content">
|
||||
<h3>스마트 팩토리 구축</h3>
|
||||
<p>IoT와 AI를 활용한 스마트 팩토리 구축으로 생산성과 품질을 동시에 향상시켰습니다.</p>
|
||||
<div class="case-study-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-value">25%</span>
|
||||
<span class="metric-label">생산성 향상</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-value">30%</span>
|
||||
<span class="metric-label">불량률 감소</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-card">
|
||||
<div class="case-study-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1522204523234-8729aa6e3d5f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="리테일업계 오므니채널">
|
||||
<div class="case-study-overlay">
|
||||
<span class="case-study-industry">리테일업계</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="case-study-content">
|
||||
<h3>오므니채널 플랫폼</h3>
|
||||
<p>온라인과 오프라인을 통합한 오므니채널 플랫폼으로 고객 경험을 혁신했습니다.</p>
|
||||
<div class="case-study-metrics">
|
||||
<div class="metric">
|
||||
<span class="metric-value">50%</span>
|
||||
<span class="metric-label">매출 증가</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-value">35%</span>
|
||||
<span class="metric-label">고객 유지율 향상</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="team-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">OUR TEAM</span>
|
||||
<h2 class="section-title">전문가 팀</h2>
|
||||
<p class="section-subtitle">다양한 분야의 전문가들이 함께 최고의 솔루션을 제공합니다.</p>
|
||||
</div>
|
||||
<div class="team-grid">
|
||||
<div class="team-member">
|
||||
<div class="member-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1560250097-0b93528c311a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="김대표">
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3>김대표</h3>
|
||||
<p class="member-position">CEO & Founder</p>
|
||||
<p class="member-description">15년간의 IT 업계 경험을 바탕으로 혁신적인 솔루션을 제공합니다.</p>
|
||||
<div class="member-social">
|
||||
<a href="#" class="social-link">LinkedIn</a>
|
||||
<a href="#" class="social-link">Twitter</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="member-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1556157382-97eda2d62296?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="이CTO">
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3>이CTO</h3>
|
||||
<p class="member-position">Chief Technology Officer</p>
|
||||
<p class="member-description">최신 기술 트렌드를 선도하며 안정적인 시스템 아키텍처를 설계합니다.</p>
|
||||
<div class="member-social">
|
||||
<a href="#" class="social-link">LinkedIn</a>
|
||||
<a href="#" class="social-link">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-member">
|
||||
<div class="member-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1542744095-291d1f67b221?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="박이사">
|
||||
</div>
|
||||
<div class="member-info">
|
||||
<h3>박이사</h3>
|
||||
<p class="member-position">Head of Solutions</p>
|
||||
<p class="member-description">고객의 비즈니스 요구사항을 정확히 파악하여 맞춤형 솔루션을 제공합니다.</p>
|
||||
<div class="member-social">
|
||||
<a href="#" class="social-link">LinkedIn</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>지금 시작하세요</h2>
|
||||
<p>전문가와의 무료 상담을 통해 비즈니스에 최적화된 솔루션을 찾아보세요.</p>
|
||||
</div>
|
||||
<div class="cta-form">
|
||||
<form class="consultation-form">
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="회사명" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="text" placeholder="담당자명" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="email" placeholder="이메일" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<input type="tel" placeholder="연락처" class="form-input" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<select class="form-select" required>
|
||||
<option value="">관심 분야를 선택하세요</option>
|
||||
<option value="system">시스템 통합</option>
|
||||
<option value="cloud">클라우드 마이그레이션</option>
|
||||
<option value="data">데이터 분석</option>
|
||||
<option value="security">보안 솔루션</option>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn-submit">무료 상담 신청</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Corporate Professional JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Dashboard animation
|
||||
animateDashboard();
|
||||
|
||||
// Form handling
|
||||
initConsultationForm();
|
||||
|
||||
// Smooth scrolling
|
||||
initSmoothScrolling();
|
||||
|
||||
// Intersection Observer for animations
|
||||
initScrollAnimations();
|
||||
});
|
||||
|
||||
function animateDashboard() {
|
||||
const chartBars = document.querySelectorAll('.chart-bar');
|
||||
const metrics = document.querySelectorAll('.metric-value');
|
||||
|
||||
// Animate chart bars
|
||||
chartBars.forEach((bar, index) => {
|
||||
setTimeout(() => {
|
||||
bar.style.transform = 'scaleY(1)';
|
||||
bar.style.opacity = '1';
|
||||
}, index * 200);
|
||||
});
|
||||
|
||||
// Animate metrics
|
||||
metrics.forEach((metric, index) => {
|
||||
setTimeout(() => {
|
||||
metric.style.transform = 'scale(1)';
|
||||
metric.style.opacity = '1';
|
||||
}, index * 300);
|
||||
});
|
||||
}
|
||||
|
||||
function initConsultationForm() {
|
||||
const form = document.querySelector('.consultation-form');
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Form validation
|
||||
const inputs = form.querySelectorAll('.form-input, .form-select');
|
||||
let isValid = true;
|
||||
|
||||
inputs.forEach(input => {
|
||||
if (!input.value.trim()) {
|
||||
input.classList.add('error');
|
||||
isValid = false;
|
||||
} else {
|
||||
input.classList.remove('error');
|
||||
}
|
||||
});
|
||||
|
||||
if (isValid) {
|
||||
// Show success message
|
||||
alert('상담 신청이 완료되었습니다. 빠른 시일 내에 연락드리겠습니다.');
|
||||
form.reset();
|
||||
} else {
|
||||
alert('모든 필드를 올바르게 입력해주세요.');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initSmoothScrolling() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.querySelectorAll('.service-card, .case-study-card, .team-member').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,841 @@
|
||||
/* Corporate Professional Theme Styles */
|
||||
|
||||
/* CSS Variables for Corporate Theme */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #1e40af;
|
||||
--accent-color: #3b82f6;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--error-color: #ef4444;
|
||||
--text-primary: #1f2937;
|
||||
--text-secondary: #6b7280;
|
||||
--text-light: #9ca3af;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f9fafb;
|
||||
--bg-tertiary: #f3f4f6;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e5e7eb;
|
||||
--border-light: #f3f4f6;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 25% 25%, rgba(37, 99, 235, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 75% 75%, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
|
||||
background-size: 400px 400px;
|
||||
animation: pattern-move 20s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes pattern-move {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(400px, 400px); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--primary-color);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.title-main {
|
||||
display: block;
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.title-sub {
|
||||
display: block;
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
font-weight: 600;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
line-height: 1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.dashboard-preview {
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
background: var(--bg-tertiary);
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.dashboard-title {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dashboard-controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.control-dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.control-dot:nth-child(1) { background: #ef4444; }
|
||||
.control-dot:nth-child(2) { background: #f59e0b; }
|
||||
.control-dot:nth-child(3) { background: #10b981; }
|
||||
|
||||
.dashboard-content {
|
||||
display: flex;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.dashboard-sidebar {
|
||||
width: 120px;
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--spacing-md);
|
||||
border-right: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
padding: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.sidebar-item.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.dashboard-main {
|
||||
flex: 1;
|
||||
padding: var(--spacing-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
flex: 1;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.chart-header {
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: var(--spacing-sm);
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.chart-bar {
|
||||
flex: 1;
|
||||
background: linear-gradient(to top, var(--primary-color), var(--accent-color));
|
||||
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
|
||||
transform: scaleY(0);
|
||||
opacity: 0;
|
||||
transition: all 0.6s ease;
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
background: var(--bg-secondary);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.services-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--primary-color);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.services-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.service-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.service-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.service-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.service-features li {
|
||||
padding: var(--spacing-xs) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.service-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--success-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Case Studies Section */
|
||||
.case-studies-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.case-studies-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.case-study-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.case-study-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.case-study-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.case-study-image {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.case-study-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.case-study-card:hover .case-study-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.case-study-overlay {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
left: var(--spacing-sm);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.case-study-content {
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.case-study-content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.case-study-content p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.case-study-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.metric {
|
||||
text-align: center;
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--bg-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.metric-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Team Section */
|
||||
.team-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.team-member {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.team-member.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.team-member:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.member-photo {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin: 0 auto var(--spacing-md);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 4px solid var(--border-color);
|
||||
}
|
||||
|
||||
.member-photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.member-info h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.member-position {
|
||||
color: var(--primary-color);
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.member-description {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.member-social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.social-link {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
.social-link:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-text p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.consultation-form {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.form-input, .form-select {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.form-input:focus, .form-select:focus {
|
||||
outline: none;
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.form-input.error {
|
||||
border-color: var(--error-color);
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.btn-submit {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-submit:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.services-grid,
|
||||
.case-studies-grid,
|
||||
.team-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.hero-pattern {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.service-card,
|
||||
.case-study-card,
|
||||
.team-member {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.hero-cta,
|
||||
.cta-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,517 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- Creative Portfolio Layout -->
|
||||
<div class="creative-portfolio-container">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<div class="hero-shapes">
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
<div class="shape shape-4"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">CREATIVE STUDIO</span>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">Where</span>
|
||||
<span class="title-line gradient-text">Ideas</span>
|
||||
<span class="title-line">Come to Life</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
창의적인 아이디어와 혁신적인 디자인으로 브랜드의 가치를 극대화합니다.
|
||||
우리는 단순한 디자인을 넘어 경험을 만듭니다.
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#portfolio" class="btn-primary">포트폴리오 보기</a>
|
||||
<a href="#contact" class="btn-secondary">프로젝트 시작</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="creative-showcase">
|
||||
<div class="showcase-item item-1">
|
||||
<div class="item-content">
|
||||
<div class="item-icon">🎨</div>
|
||||
<h4>Brand Identity</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showcase-item item-2">
|
||||
<div class="item-content">
|
||||
<div class="item-icon">💻</div>
|
||||
<h4>Web Design</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showcase-item item-3">
|
||||
<div class="item-content">
|
||||
<div class="item-icon">📱</div>
|
||||
<h4>Mobile App</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showcase-item item-4">
|
||||
<div class="item-content">
|
||||
<div class="item-icon">🎬</div>
|
||||
<h4>Motion Graphics</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Portfolio Section -->
|
||||
<section class="portfolio-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">PORTFOLIO</span>
|
||||
<h2 class="section-title">최근 작업</h2>
|
||||
<p class="section-subtitle">창의적이고 혁신적인 프로젝트들을 만나보세요</p>
|
||||
</div>
|
||||
<div class="portfolio-filter">
|
||||
<button class="filter-btn active" data-filter="all">전체</button>
|
||||
<button class="filter-btn" data-filter="branding">브랜딩</button>
|
||||
<button class="filter-btn" data-filter="web">웹 디자인</button>
|
||||
<button class="filter-btn" data-filter="mobile">모바일</button>
|
||||
<button class="filter-btn" data-filter="motion">모션</button>
|
||||
</div>
|
||||
<div class="portfolio-grid">
|
||||
<div class="portfolio-item" data-category="branding">
|
||||
<div class="portfolio-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="웹 애플리케이션 개발">
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3>스타트업 브랜딩</h3>
|
||||
<p>혁신적인 로고와 브랜드 아이덴티티 디자인</p>
|
||||
<a href="#" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-item" data-category="web">
|
||||
<div class="portfolio-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="모바일 앱 디자인">
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3>이커머스 웹사이트</h3>
|
||||
<p>사용자 경험을 중시한 온라인 쇼핑몰 디자인</p>
|
||||
<a href="#" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-item" data-category="mobile">
|
||||
<div class="portfolio-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1496171367470-9ed9a91ea931?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="브랜드 아이덴티티">
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3>피트니스 앱</h3>
|
||||
<p>직관적인 UI/UX를 적용한 모바일 애플리케이션</p>
|
||||
<a href="#" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-item" data-category="motion">
|
||||
<div class="portfolio-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1547394765-185e1e68f34e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="데이터 시각화">
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3>프로모션 비디오</h3>
|
||||
<p>브랜드 스토리를 담은 모션 그래픽 영상</p>
|
||||
<a href="#" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-item" data-category="branding">
|
||||
<div class="portfolio-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1516116216624-53e697fedbea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="클라우드 아키텍처">
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3>패키지 디자인</h3>
|
||||
<p>지속가능한 소재를 활용한 친환경 패키징</p>
|
||||
<a href="#" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="portfolio-item" data-category="web">
|
||||
<div class="portfolio-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="인공지능 챗봇">
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<h3>랜딩 페이지</h3>
|
||||
<p>높은 전환율을 목표로 한 마케팅 페이지</p>
|
||||
<a href="#" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Process Section -->
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">PROCESS</span>
|
||||
<h2 class="section-title">우리의 작업 방식</h2>
|
||||
<p class="section-subtitle">체계적이고 창의적인 프로세스로 최고의 결과를 만들어냅니다</p>
|
||||
</div>
|
||||
<div class="process-timeline">
|
||||
<div class="process-step">
|
||||
<div class="step-number">01</div>
|
||||
<div class="step-content">
|
||||
<h3>Discovery</h3>
|
||||
<p>클라이언트의 니즈와 목표를 파악하고 프로젝트의 방향성을 설정합니다.</p>
|
||||
<ul class="step-features">
|
||||
<li>브리핑 및 요구사항 분석</li>
|
||||
<li>경쟁사 분석</li>
|
||||
<li>타겟 오디언스 정의</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">02</div>
|
||||
<div class="step-content">
|
||||
<h3>Strategy</h3>
|
||||
<p>데이터와 인사이트를 바탕으로 전략적인 접근 방식을 수립합니다.</p>
|
||||
<ul class="step-features">
|
||||
<li>브랜드 포지셔닝</li>
|
||||
<li>컨셉 개발</li>
|
||||
<li>전략 로드맵 수립</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">03</div>
|
||||
<div class="step-content">
|
||||
<h3>Design</h3>
|
||||
<p>창의적인 아이디어를 시각적으로 구현하고 사용자 경험을 설계합니다.</p>
|
||||
<ul class="step-features">
|
||||
<li>와이어프레임 제작</li>
|
||||
<li>프로토타이핑</li>
|
||||
<li>UI/UX 디자인</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">04</div>
|
||||
<div class="step-content">
|
||||
<h3>Development</h3>
|
||||
<p>최신 기술을 활용하여 디자인을 실제 제품으로 구현합니다.</p>
|
||||
<ul class="step-features">
|
||||
<li>프론트엔드 개발</li>
|
||||
<li>백엔드 구축</li>
|
||||
<li>테스트 및 최적화</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Skills Section -->
|
||||
<section class="skills-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">SKILLS</span>
|
||||
<h2 class="section-title">전문 분야</h2>
|
||||
<p class="section-subtitle">다양한 분야의 전문성을 바탕으로 통합적인 솔루션을 제공합니다</p>
|
||||
</div>
|
||||
<div class="skills-grid">
|
||||
<div class="skill-category">
|
||||
<div class="skill-icon">🎨</div>
|
||||
<h3>Visual Design</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Brand Identity</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Logo Design</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Print Design</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<div class="skill-icon">💻</div>
|
||||
<h3>Digital Design</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">UI/UX Design</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Web Design</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 88%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Mobile Design</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-category">
|
||||
<div class="skill-icon">🎬</div>
|
||||
<h3>Motion & Video</h3>
|
||||
<div class="skill-items">
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Motion Graphics</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">Video Editing</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 80%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="skill-item">
|
||||
<span class="skill-name">3D Animation</span>
|
||||
<div class="skill-level">
|
||||
<div class="skill-bar" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section class="testimonials-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">TESTIMONIALS</span>
|
||||
<h2 class="section-title">클라이언트 후기</h2>
|
||||
<p class="section-subtitle">함께 작업한 클라이언트들의 생생한 후기를 들어보세요</p>
|
||||
</div>
|
||||
<div class="testimonials-slider">
|
||||
<div class="testimonial-slide active">
|
||||
<div class="testimonial-content">
|
||||
<div class="testimonial-text">
|
||||
<p>"창의적이고 전문적인 접근으로 우리 브랜드의 가치를 완전히 새롭게 정의해주었습니다. 결과에 정말 만족합니다."</p>
|
||||
</div>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="김대표">
|
||||
</div>
|
||||
<div class="author-info">
|
||||
<h4>김대표</h4>
|
||||
<p>스타트업 CEO</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-slide">
|
||||
<div class="testimonial-content">
|
||||
<div class="testimonial-text">
|
||||
<p>"사용자 경험을 중시한 디자인으로 우리 서비스의 사용성이 크게 향상되었습니다. 정말 감사합니다."</p>
|
||||
</div>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="이이사">
|
||||
</div>
|
||||
<div class="author-info">
|
||||
<h4>이이사</h4>
|
||||
<p>IT 기업 이사</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-slide">
|
||||
<div class="testimonial-content">
|
||||
<div class="testimonial-text">
|
||||
<p>"혁신적인 아이디어와 완벽한 실행력으로 프로젝트를 성공적으로 마무리해주었습니다. 다음에도 함께 작업하고 싶습니다."</p>
|
||||
</div>
|
||||
<div class="testimonial-author">
|
||||
<div class="author-photo">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80" alt="박부장">
|
||||
</div>
|
||||
<div class="author-info">
|
||||
<h4>박부장</h4>
|
||||
<p>마케팅 부장</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="testimonial-controls">
|
||||
<button class="testimonial-prev">‹</button>
|
||||
<button class="testimonial-next">›</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>프로젝트를 시작할 준비가 되셨나요?</h2>
|
||||
<p>창의적인 아이디어를 현실로 만들어드립니다. 지금 바로 연락해주세요.</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<a href="#contact" class="btn-primary-large">프로젝트 시작하기</a>
|
||||
<a href="#portfolio" class="btn-secondary-large">포트폴리오 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Creative Portfolio JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Portfolio filtering
|
||||
initPortfolioFilter();
|
||||
|
||||
// Testimonials slider
|
||||
initTestimonialsSlider();
|
||||
|
||||
// Animated shapes
|
||||
initAnimatedShapes();
|
||||
|
||||
// Smooth scrolling
|
||||
initSmoothScrolling();
|
||||
|
||||
// Scroll animations
|
||||
initScrollAnimations();
|
||||
});
|
||||
|
||||
function initPortfolioFilter() {
|
||||
const filterBtns = document.querySelectorAll('.filter-btn');
|
||||
const portfolioItems = document.querySelectorAll('.portfolio-item');
|
||||
|
||||
filterBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
// Remove active class from all buttons
|
||||
filterBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
const filter = btn.dataset.filter;
|
||||
|
||||
portfolioItems.forEach(item => {
|
||||
if (filter === 'all' || item.dataset.category === filter) {
|
||||
item.style.display = 'block';
|
||||
setTimeout(() => {
|
||||
item.style.opacity = '1';
|
||||
item.style.transform = 'scale(1)';
|
||||
}, 100);
|
||||
} else {
|
||||
item.style.opacity = '0';
|
||||
item.style.transform = 'scale(0.8)';
|
||||
setTimeout(() => {
|
||||
item.style.display = 'none';
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initTestimonialsSlider() {
|
||||
const slides = document.querySelectorAll('.testimonial-slide');
|
||||
const prevBtn = document.querySelector('.testimonial-prev');
|
||||
const nextBtn = document.querySelector('.testimonial-next');
|
||||
let currentSlide = 0;
|
||||
|
||||
function showSlide(index) {
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
slides[index].classList.add('active');
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
nextBtn.addEventListener('click', nextSlide);
|
||||
prevBtn.addEventListener('click', prevSlide);
|
||||
|
||||
// Auto-slide
|
||||
setInterval(nextSlide, 5000);
|
||||
}
|
||||
|
||||
function initAnimatedShapes() {
|
||||
const shapes = document.querySelectorAll('.shape');
|
||||
|
||||
shapes.forEach((shape, index) => {
|
||||
shape.style.animationDelay = (index * 0.5) + 's';
|
||||
});
|
||||
}
|
||||
|
||||
function initSmoothScrolling() {
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initScrollAnimations() {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.querySelectorAll('.process-step, .skill-category, .portfolio-item').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,943 @@
|
||||
/* Creative Portfolio Theme Styles */
|
||||
|
||||
/* CSS Variables for Creative Theme */
|
||||
:root {
|
||||
--primary-color: #ff6b6b;
|
||||
--secondary-color: #040aea;
|
||||
--accent-color: #45b7d1;
|
||||
--tertiary-color: #96ceb4;
|
||||
--quaternary-color: #feca57;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--text-light: #bdc3c7;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-tertiary: #ecf0f1;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e9ecef;
|
||||
--border-light: #f1f3f4;
|
||||
--shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 8px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 8px 16px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 16px 32px 0 rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-shapes {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: float-shape 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, var(--quaternary-color), var(--primary-color));
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes float-shape {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(180deg); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.creative-showcase {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
animation: showcase-float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.showcase-item:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
|
||||
color: white;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(135deg, var(--quaternary-color), var(--primary-color));
|
||||
color: white;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
||||
color: white;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.item-content h4 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes showcase-float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
/* Portfolio Section */
|
||||
.portfolio-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.portfolio-filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: transparent;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn.active,
|
||||
.filter-btn:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.portfolio-item {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.portfolio-item:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.portfolio-image {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .portfolio-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(255, 107, 107, 0.9), rgba(78, 205, 196, 0.9));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .portfolio-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.overlay-content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.overlay-content p {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Process Section */
|
||||
.process-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.process-timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.process-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
|
||||
}
|
||||
|
||||
.process-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.process-step.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.process-step:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
margin: 0 var(--spacing-xl);
|
||||
}
|
||||
|
||||
.step-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.step-content p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.step-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.step-features li {
|
||||
padding: var(--spacing-xs) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.step-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.skill-category.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.skill-category:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
height: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
/* Testimonials Section */
|
||||
.testimonials-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.testimonials-slider {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.testimonial-slide {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.testimonial-slide.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.testimonial-content {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-2xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-text p {
|
||||
font-size: 1.25rem;
|
||||
font-style: italic;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.author-photo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.author-photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.author-info h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.author-info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.testimonial-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.testimonial-prev, .testimonial-next {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.testimonial-prev:hover, .testimonial-next:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-text p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary-large, .btn-secondary-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary-large {
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary-large:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.btn-secondary-large {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary-large:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.creative-showcase {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.process-timeline::before {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.process-step {
|
||||
flex-direction: row !important;
|
||||
padding-left: 60px;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary-large, .btn-secondary-large {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.shape,
|
||||
.showcase-item {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.skill-category,
|
||||
.process-step {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.hero-cta,
|
||||
.cta-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,274 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- Dark Premium Layout -->
|
||||
<div class="dark-premium-container">
|
||||
<!-- Hero Section with Video Background -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<div class="hero-overlay"></div>
|
||||
<div class="hero-particles"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="badge-text">PREMIUM</span>
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">Next Generation</span>
|
||||
<span class="title-line gradient-text">Digital Experience</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">차세대 기술과 프리미엄 디자인이 만나는 혁신적인 경험을 제공합니다.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#explore" class="btn-neon">탐험하기</a>
|
||||
<a href="#learn" class="btn-outline">더 알아보기</a>
|
||||
</div>
|
||||
<div class="hero-stats">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">99.9%</span>
|
||||
<span class="stat-label">Uptime</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">50K+</span>
|
||||
<span class="stat-label">Users</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">24/7</span>
|
||||
<span class="stat-label">Support</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="floating-cards">
|
||||
<div class="card card-1">
|
||||
<div class="card-glow"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-icon">⚡</div>
|
||||
<h4>Lightning Fast</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-2">
|
||||
<div class="card-glow"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-icon">🔒</div>
|
||||
<h4>Secure</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card card-3">
|
||||
<div class="card-glow"></div>
|
||||
<div class="card-content">
|
||||
<div class="card-icon">🚀</div>
|
||||
<h4>Scalable</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">FEATURES</span>
|
||||
<h2 class="section-title">강력한 기능들</h2>
|
||||
<p class="section-subtitle">최첨단 기술과 혁신적인 디자인으로 차별화된 경험을 제공합니다.</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M13 2L3 14H12L11 22L21 10H12L13 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>AI-Powered Analytics</h3>
|
||||
<p>인공지능 기반 데이터 분석으로 인사이트를 제공합니다.</p>
|
||||
<div class="feature-highlight">NEW</div>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9 9H15V15H9V9Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Real-time Collaboration</h3>
|
||||
<p>실시간 협업 도구로 팀의 생산성을 극대화합니다.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Advanced Security</h3>
|
||||
<p>엔터프라이즈급 보안으로 데이터를 안전하게 보호합니다.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>Global CDN</h3>
|
||||
<p>전 세계 CDN 네트워크로 빠른 콘텐츠 전송을 보장합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Technology Showcase -->
|
||||
<section class="tech-showcase">
|
||||
<div class="container">
|
||||
<div class="showcase-content">
|
||||
<div class="showcase-text">
|
||||
<span class="showcase-badge">TECHNOLOGY</span>
|
||||
<h2>차세대 기술 스택</h2>
|
||||
<p>최신 웹 기술과 클라우드 인프라를 활용하여 안정적이고 확장 가능한 솔루션을 제공합니다.</p>
|
||||
<div class="tech-stack">
|
||||
<div class="tech-item">
|
||||
<span class="tech-name">React</span>
|
||||
<div class="tech-bar">
|
||||
<div class="tech-progress" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<span class="tech-name">Node.js</span>
|
||||
<div class="tech-bar">
|
||||
<div class="tech-progress" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<span class="tech-name">AWS</span>
|
||||
<div class="tech-bar">
|
||||
<div class="tech-progress" style="width: 88%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tech-item">
|
||||
<span class="tech-name">Docker</span>
|
||||
<div class="tech-bar">
|
||||
<div class="tech-progress" style="width: 92%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="showcase-visual">
|
||||
<div class="tech-animation">
|
||||
<div class="orbit orbit-1">
|
||||
<div class="orbit-item">React</div>
|
||||
</div>
|
||||
<div class="orbit orbit-2">
|
||||
<div class="orbit-item">Node.js</div>
|
||||
</div>
|
||||
<div class="orbit orbit-3">
|
||||
<div class="orbit-item">AWS</div>
|
||||
</div>
|
||||
<div class="center-core">
|
||||
<div class="core-icon">⚡</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-glow"></div>
|
||||
<h2>지금 시작하세요</h2>
|
||||
<p>프리미엄 경험의 시작, 지금 바로 체험해보세요.</p>
|
||||
<div class="cta-buttons">
|
||||
<a href="#start" class="btn-neon-large">무료 체험</a>
|
||||
<a href="#contact" class="btn-outline-large">문의하기</a>
|
||||
</div>
|
||||
<div class="cta-features">
|
||||
<div class="cta-feature">
|
||||
<span class="cta-icon">✓</span>
|
||||
<span>14일 무료 체험</span>
|
||||
</div>
|
||||
<div class="cta-feature">
|
||||
<span class="cta-icon">✓</span>
|
||||
<span>24/7 고객 지원</span>
|
||||
</div>
|
||||
<div class="cta-feature">
|
||||
<span class="cta-icon">✓</span>
|
||||
<span>무제한 사용</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Dark Premium JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Particle animation
|
||||
createParticles();
|
||||
|
||||
// Floating cards animation
|
||||
animateFloatingCards();
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.querySelectorAll('.feature-card, .tech-item, .showcase-content').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function createParticles() {
|
||||
const particlesContainer = document.querySelector('.hero-particles');
|
||||
if (!particlesContainer) return;
|
||||
|
||||
for (let i = 0; i < 50; i++) {
|
||||
const particle = document.createElement('div');
|
||||
particle.className = 'particle';
|
||||
particle.style.left = Math.random() * 100 + '%';
|
||||
particle.style.animationDelay = Math.random() * 3 + 's';
|
||||
particle.style.animationDuration = (Math.random() * 3 + 2) + 's';
|
||||
particlesContainer.appendChild(particle);
|
||||
}
|
||||
}
|
||||
|
||||
function animateFloatingCards() {
|
||||
const cards = document.querySelectorAll('.floating-cards .card');
|
||||
cards.forEach((card, index) => {
|
||||
card.style.animationDelay = (index * 0.5) + 's';
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,845 @@
|
||||
/* Dark Premium Theme Styles */
|
||||
|
||||
/* CSS Variables for Dark Theme */
|
||||
:root {
|
||||
--primary-color: #00d4ff;
|
||||
--secondary-color: #7c3aed;
|
||||
--accent-color: #f59e0b;
|
||||
--success-color: #10b981;
|
||||
--warning-color: #f59e0b;
|
||||
--error-color: #ef4444;
|
||||
--text-primary: #ffffff;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-muted: #71717a;
|
||||
--bg-primary: #0a0a0a;
|
||||
--bg-secondary: #111111;
|
||||
--bg-tertiary: #1a1a1a;
|
||||
--bg-card: #1e1e1e;
|
||||
--bg-glass: rgba(255, 255, 255, 0.05);
|
||||
--border-color: #2a2a2a;
|
||||
--border-glow: rgba(0, 212, 255, 0.3);
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5);
|
||||
--shadow-glow: 0 0 20px rgba(0, 212, 255, 0.3);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-tertiary) 100%);
|
||||
z-index: -2;
|
||||
}
|
||||
|
||||
.hero-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle at 30% 20%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 70% 80%, rgba(124, 58, 237, 0.1) 0%, transparent 50%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-particles {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: var(--primary-color);
|
||||
border-radius: 50%;
|
||||
animation: float-particle infinite linear;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
@keyframes float-particle {
|
||||
0% {
|
||||
transform: translateY(100vh) translateX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
10% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
90% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-100px) translateX(100px);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.badge-text {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: var(--bg-primary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 6vw, 5rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-neon, .btn-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-neon {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: var(--bg-primary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-neon:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
box-shadow: 0 0 20px rgba(0, 212, 255, 0.2);
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
display: block;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.floating-cards {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.card {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
background: var(--bg-glass);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border-glow);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-sm);
|
||||
animation: float-card 6s ease-in-out infinite;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.card-1 {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.card-2 {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.card-3 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: var(--radius-lg);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover .card-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.card h4 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
@keyframes float-card {
|
||||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||||
25% { transform: translateY(-10px) rotate(1deg); }
|
||||
50% { transform: translateY(-20px) rotate(0deg); }
|
||||
75% { transform: translateY(-10px) rotate(-1deg); }
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.features-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--bg-glass);
|
||||
color: var(--primary-color);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-glow);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: var(--spacing-xl);
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.feature-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.feature-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
border-color: var(--border-glow);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.feature-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.feature-highlight {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
right: var(--spacing-sm);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--success-color);
|
||||
color: var(--bg-primary);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
border-radius: var(--radius-sm);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* Technology Showcase */
|
||||
.tech-showcase {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.showcase-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.showcase-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--bg-glass);
|
||||
color: var(--secondary-color);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--secondary-color);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.showcase-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.showcase-text p {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.tech-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.tech-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.tech-name {
|
||||
min-width: 80px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tech-bar {
|
||||
flex: 1;
|
||||
height: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tech-progress {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
.showcase-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tech-animation {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.orbit {
|
||||
position: absolute;
|
||||
border: 1px solid var(--border-glow);
|
||||
border-radius: 50%;
|
||||
animation: rotate-orbit linear infinite;
|
||||
}
|
||||
|
||||
.orbit-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
animation-duration: 10s;
|
||||
}
|
||||
|
||||
.orbit-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
top: 75px;
|
||||
left: 75px;
|
||||
animation-duration: 8s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
.orbit-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
|
||||
.orbit-item {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--bg-glass);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-sm);
|
||||
border: 1px solid var(--border-glow);
|
||||
}
|
||||
|
||||
.center-core {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
|
||||
.core-icon {
|
||||
font-size: 1.5rem;
|
||||
color: var(--bg-primary);
|
||||
}
|
||||
|
||||
@keyframes rotate-orbit {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cta-glow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: radial-gradient(circle, rgba(0, 212, 255, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
animation: pulse-glow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
|
||||
50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cta-content h2 {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.cta-content p {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-neon-large, .btn-outline-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-neon-large {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: var(--bg-primary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-neon-large:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 0 40px rgba(0, 212, 255, 0.6);
|
||||
}
|
||||
|
||||
.btn-outline-large {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-outline-large:hover {
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.cta-features {
|
||||
display: flex;
|
||||
gap: var(--spacing-xl);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.cta-feature {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.cta-icon {
|
||||
color: var(--success-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-stats {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.showcase-content {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.floating-cards {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cta-features {
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.cta-content h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.particle,
|
||||
.orbit,
|
||||
.card,
|
||||
.cta-glow {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.hero-cta,
|
||||
.cta-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 716 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,229 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
|
||||
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
|
||||
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
|
||||
?>
|
||||
<!-- 💡 [수정] 컴포넌트화된 팝업 로더를 절대 경로로 포함합니다. -->
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="main-container">
|
||||
<!-- 1. 메인 비주얼 섹션 -->
|
||||
<section class="main-visual">
|
||||
<div class="visual-slider swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<?php
|
||||
// 슬라이드 데이터 정의
|
||||
$main_visual_data = [
|
||||
[
|
||||
'bg' => 'back20.jpg',
|
||||
'subtitle' => '이끌림으로 품격을 높이다!'
|
||||
],
|
||||
[
|
||||
'bg' => 'back014.jpg',
|
||||
'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'
|
||||
],
|
||||
[
|
||||
'bg' => 'back012.jpg',
|
||||
'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.'
|
||||
]
|
||||
];
|
||||
|
||||
foreach ($main_visual_data as $item) {
|
||||
?>
|
||||
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
|
||||
<a href="#" class="visual-link">
|
||||
<!-- 배경 이미지 -->
|
||||
<div class="visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
|
||||
|
||||
<!-- 텍스트 레이어 (타이틀 + 부제목 구조) -->
|
||||
<div class="visual-layer-wrap">
|
||||
<div class="visual-layer-item">
|
||||
<h2 class="visual-title">PREMIUM DESIGN</h2>
|
||||
<span class="visual-divider"></span>
|
||||
<p class="visual-subtitle"><?php echo $item['subtitle']; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- 네비게이션 버튼 -->
|
||||
<div class="swiper-button-prev">
|
||||
<div class="thumb-wrapper"><div class="thumb" ></div></div>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<div class="thumb-wrapper"><div class="thumb"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
<section class="hero_container">
|
||||
<div class="content_inner">
|
||||
<img src="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">
|
||||
<div class="text_area">
|
||||
<p class="label_blue">SMART WINDOW ORDERING</p>
|
||||
<h1 class="main_title">
|
||||
창호의 새로운 기준,<br>
|
||||
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
<p class="sub_description">
|
||||
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
|
||||
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
|
||||
</p>
|
||||
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
|
||||
|
||||
<div class="main_action_row">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
|
||||
<div class="btn_icon">🏢</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 온라인 주문</strong>
|
||||
<p>실시간 직접 견적 및 주문 확정</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
|
||||
<div class="btn_icon">👨🔧</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 전문가 부르기</strong>
|
||||
<p>방문 실측 및 맞춤 상담 신청</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="floating_as_badge">
|
||||
<p>전국 대리점망</p>
|
||||
<strong>A/S 10년 보장</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- 2. 제품 소개 섹션 (아이콘 형태) -->
|
||||
<!-- <section class="product-intro container">
|
||||
<div class="section-title">
|
||||
<h3>PRODUCT</h3>
|
||||
<p>동남창호의 주요 제품을 소개합니다.</p>
|
||||
</div>
|
||||
<div class="product-list">
|
||||
<a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=발코니창" class="product-item">
|
||||
<div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_01.png" alt="발코니창"></div>
|
||||
<h4>발코니창</h4>
|
||||
<p>Balcony Window</p>
|
||||
</a>
|
||||
<a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=내창" class="product-item">
|
||||
<div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_02.png" alt="내창"></div>
|
||||
<h4>내창</h4>
|
||||
<p>Inner Window</p>
|
||||
</a>
|
||||
<a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=시스템창" class="product-item">
|
||||
<div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_03.png" alt="시스템창"></div>
|
||||
<h4>시스템창</h4>
|
||||
<p>System Window</p>
|
||||
</a>
|
||||
<a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=product&sca=도어" class="product-item">
|
||||
<div class="icon-box"><img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/icon_product_04.png" alt="도어"></div>
|
||||
<h4>도어</h4>
|
||||
<p>Door</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>-->
|
||||
|
||||
<!-- 3. 회사 소개 및 홍보 섹션 -->
|
||||
<!-- <section class="about-section">
|
||||
<div class="container">
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<h3>ABOUT US</h3>
|
||||
<h2>(주)동남창호</h2>
|
||||
<p>
|
||||
동남창호는 다년간의 축적된 노하우와 기술력을 바탕으로<br>
|
||||
고객님께 최상의 만족을 드리기 위해 항상 노력하고 있습니다.<br>
|
||||
끊임없는 연구 개발과 품질 혁신으로 창호 시장을 선도하겠습니다.
|
||||
</p>
|
||||
<a href="<?php /*echo get_pretty_url('content', 'company'); */?>" class="btn-more">회사소개 바로가기</a>
|
||||
</div>
|
||||
<div class="about-img">
|
||||
<img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/about_img.jpg" alt="회사소개 이미지">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>-->
|
||||
|
||||
<!-- 4. 갤러리/시공사례 섹션 -->
|
||||
<!-- <section class="gallery-section container">
|
||||
<div class="section-title">
|
||||
<h3>GALLERY</h3>
|
||||
<p>동남창호의 시공 사례를 확인해보세요.</p>
|
||||
</div>
|
||||
<div class="gallery-list">
|
||||
<?php /*echo latest('theme/rb.gallery_bbs', 'gallery', 4, 20); */?>
|
||||
</div>
|
||||
</section>-->
|
||||
|
||||
<!-- 5. 고객센터/오시는길 섹션 -->
|
||||
<!--<section class="contact-map-section">
|
||||
<div class="container">
|
||||
<div class="contact-info-box">
|
||||
<h3>CUSTOMER CENTER</h3>
|
||||
<p class="tel">031-123-4567</p>
|
||||
<p class="desc">
|
||||
평일 09:00 ~ 18:00<br>
|
||||
점심 12:00 ~ 13:00<br>
|
||||
(토/일/공휴일 휴무)
|
||||
</p>
|
||||
<div class="btns">
|
||||
<a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=qa" class="btn-inquiry">1:1 문의하기</a>
|
||||
<a href="<?php /*echo G5_BBS_URL */?>/board.php?bo_table=notice" class="btn-notice">공지사항</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-box">
|
||||
|
||||
<img src="<?php /*echo G5_THEME_URL */?>/rb.layout/dnssash/img/map_img.jpg" alt="오시는길" style="width:100%; height:100%; object-fit:cover;">
|
||||
</div>
|
||||
</div>
|
||||
</section>-->
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var mainVisualSwiper = new Swiper('.visual-slider', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
slideChangeTransitionEnd: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function updateNavThumbs(swiper) {
|
||||
var prevSlide = $(swiper.slides[swiper.previousIndex]);
|
||||
var nextSlide = $(swiper.slides[swiper.activeIndex + 1]);
|
||||
|
||||
var prevThumb = prevSlide.data('thumb-bg');
|
||||
var nextThumb = nextSlide.data('thumb-bg');
|
||||
|
||||
swiper.navigation.prevEl.querySelector('.thumb').style.backgroundImage = 'url(' + prevThumb + ')';
|
||||
swiper.navigation.nextEl.querySelector('.thumb').style.backgroundImage = 'url(' + nextThumb + ')';
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,445 @@
|
||||
/* Modern Minimal Theme Styles */
|
||||
|
||||
/* CSS Variables for consistent theming */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #64748b;
|
||||
--accent-color: #f59e0b;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--text-light: #94a3b8;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-accent: #f1f5f9;
|
||||
--border-color: #e2e8f0;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
margin-right: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #1d4ed8;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-accent);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-image-placeholder {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.minimal-shape {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.minimal-shape::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: var(--spacing-xl);
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.feature-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--bg-accent);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.content-text p {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
padding: var(--spacing-sm) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.benefits-list li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.visual-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.minimal-geometry {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-content h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-content p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background-color: white;
|
||||
color: var(--primary-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary-large:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
margin-right: 0;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-image-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.minimal-shape {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.minimal-shape::before {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.minimal-shape,
|
||||
.minimal-geometry {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.hero-cta,
|
||||
.cta-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
document.addEventListener('scroll',()=>{
|
||||
document.querySelectorAll('.board-card').forEach(el=>{
|
||||
el.style.transform = `translateY(${window.scrollY*0.03}px)`;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,332 @@
|
||||
/* 메인 레이아웃 스타일 */
|
||||
|
||||
/* 공통 */
|
||||
.main-container { width: 100%; overflow: hidden; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
|
||||
.section-title { text-align: center; margin-bottom: 50px; }
|
||||
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
|
||||
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
|
||||
.section-title p { font-size: 16px; color: #666; }
|
||||
|
||||
/* 1. 메인 비주얼 */
|
||||
.main-visual {
|
||||
width: 100%;
|
||||
height: 840px; /* 슬라이드 높이 증가 */
|
||||
position: relative;
|
||||
padding-top: 90px; /* 헤더 높이만큼 상단 여백 추가 */
|
||||
box-sizing: border-box; /* 패딩을 높이에 포함 */
|
||||
}
|
||||
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
|
||||
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
|
||||
/* 텍스트 레이어 */
|
||||
.visual-layer-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; /* 수직 중앙 정렬 */
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #ffd200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visual-divider {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Swiper 네비게이션 버튼 스타일 */
|
||||
.main-visual .swiper-button-next,
|
||||
.main-visual .swiper-button-prev {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s;
|
||||
position: absolute; /* Swiper 기본 스타일 오버라이드 */
|
||||
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.main-visual .swiper-button-prev {
|
||||
left: 20px;
|
||||
}
|
||||
.main-visual .swiper-button-next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-next:hover,
|
||||
.main-visual .swiper-button-prev:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.main-visual .swiper-button-next:after,
|
||||
.main-visual .swiper-button-prev:after {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 썸네일 미리보기 스타일 */
|
||||
.main-visual .swiper-button-prev .thumb-wrapper,
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev:hover .thumb-wrapper,
|
||||
.main-visual .swiper-button-next:hover .thumb-wrapper {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb-wrapper {
|
||||
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb,
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
width: 100px; /* 썸네일 크기 */
|
||||
height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.main-visual .swiper-button-prev .thumb {
|
||||
left: 0;
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* 기본 초기화 및 폰트 */
|
||||
/* 폰트 및 초기화 */
|
||||
#eklim_main_wrap { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; letter-spacing: -0.05em; line-height: 1.2; }
|
||||
|
||||
/* 상단 유틸 (기획안 우측 상단 소형 글자) */
|
||||
.top_util_bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.top_util_bar .inner { max-width: 1200px; margin: 0 auto; text-align: right; padding: 10px 20px; }
|
||||
.top_util_bar a { font-size: 12px; color: #888; text-decoration: none; margin-left: 15px; }
|
||||
|
||||
/* 💡 [수정] 히어로 섹션 스타일 */
|
||||
.hero_container {
|
||||
padding: 120px 0 80px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hero_container .content_inner {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.hero_container .main_bg_img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero_container .hero_content_wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero_container .text_area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 0 20px;
|
||||
text-align: left;
|
||||
color: #111;
|
||||
line-height: 1.6;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero_container .floating_as_badge {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #FF6B00;
|
||||
color: #fff;
|
||||
padding: 30px 40px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
box-shadow: 0 15px 35px rgba(255, 107, 0, 0.3);
|
||||
z-index: 3;
|
||||
line-height: 1.4;
|
||||
}
|
||||
/* 💡 [끝] 히어로 섹션 스타일 */
|
||||
|
||||
|
||||
/* 텍스트 크기 및 색상 */
|
||||
.label_orange { color: #FF6B00; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
||||
.label_blue { color: #007bff; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
||||
.main_title { font-size: 52px; font-weight: 800; color: #111; margin-bottom: 30px; line-height: 1.2; }
|
||||
.main_title .highlight_orange { color: #FF6B00; }
|
||||
.main_title .highlight_blue { color: #007bff; }
|
||||
.sub_description { font-size: 20px; color: #666; line-height: 1.6; margin-bottom: 60px; }
|
||||
|
||||
/* 버튼 스타일 (기획안과 동일한 색상 대비) */
|
||||
.main_action_row { display: flex; gap: 20px; }
|
||||
.btn_box { display: flex; align-items: center; width: 380px; padding: 35px 30px; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
|
||||
|
||||
/* 버튼 1: 블랙 (온라인 주문) */
|
||||
.btn_box.dark { background: #222; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
|
||||
.btn_box.dark strong { font-size: 24px; color: #fff; }
|
||||
.btn_box.dark p { font-size: 15px; color: #aaa; margin-top: 5px; }
|
||||
|
||||
/* 버튼 2: 화이트 (전문가 부르기) */
|
||||
/* 버튼 2: 기본 흰색 상태 */
|
||||
.btn_box.white {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #222;
|
||||
transition: all 0.3s ease; /* 부드러운 전환 효과 */
|
||||
}
|
||||
|
||||
.btn_box.white strong { font-size: 24px; color: #222; transition: all 0.3s; }
|
||||
.btn_box.white p { font-size: 15px; color: #888; margin-top: 5px; transition: all 0.3s; }
|
||||
|
||||
/* 마우스 올렸을 때 (Hover) 파란색으로 변경 */
|
||||
.btn_box.white:hover {
|
||||
background: #007bff; /* 신뢰감을 주는 파란색 */
|
||||
border-color: #007bff;
|
||||
transform: translateY(-8px); /* 위로 살짝 올라가는 효과 */
|
||||
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3); /* 파란색 그림자 */
|
||||
}
|
||||
|
||||
/* 마우스 올렸을 때 내부 글자색을 흰색으로 변경 */
|
||||
.btn_box.white:hover strong,
|
||||
.btn_box.white:hover p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 마우스 올렸을 때 아이콘도 살짝 반응하도록 (선택사항) */
|
||||
.btn_box.white:hover .btn_icon {
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
|
||||
/* 오렌지 플로팅 배지 (Slide 01 우측 상단 디자인) */
|
||||
.floating_as_badge p { font-size: 18px; margin-bottom: 5px; font-weight: 400; opacity: 0.9; }
|
||||
.floating_as_badge strong { font-size: 28px; font-weight: 900; display: block; }
|
||||
|
||||
/* 하단 네비게이션 */
|
||||
.bottom_nav { border-top: 1px solid #eee; margin-top: 50px; }
|
||||
.bottom_nav ul { list-style: none; display: flex; gap: 40px; justify-content: center; padding: 25px 0; }
|
||||
.bottom_nav li { font-size: 17px; font-weight: 600; color: #444; cursor: pointer; }
|
||||
|
||||
/* 2. 제품 소개 */
|
||||
.product-intro { padding: 80px 15px; }
|
||||
.product-list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
|
||||
.product-item { width: 23%; text-align: center; padding: 30px 20px; background: #f9f9f9; border-radius: 10px; transition: all 0.3s; text-decoration: none; color: #333; }
|
||||
.product-item:hover { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-5px); }
|
||||
.product-item .icon-box { width: 80px; height: 80px; margin: 0 auto 20px; }
|
||||
.product-item .icon-box img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.product-item h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
|
||||
.product-item p { font-size: 14px; color: #888; }
|
||||
|
||||
/* 3. 회사 소개 */
|
||||
.about-section { background: #f4f4f4; padding: 80px 0; }
|
||||
.about-content { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
|
||||
.about-text { flex: 1; }
|
||||
.about-text h3 { font-size: 18px; color: #0054a6; font-weight: 700; margin-bottom: 10px; }
|
||||
.about-text h2 { font-size: 36px; font-weight: 700; margin-bottom: 30px; color: #333; }
|
||||
.about-text p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 40px; }
|
||||
.about-text .btn-more { display: inline-block; padding: 12px 30px; background: #333; color: #fff; text-decoration: none; font-weight: 500; transition: 0.3s; }
|
||||
.about-text .btn-more:hover { background: #0054a6; }
|
||||
.about-img { flex: 1; height: 400px; border-radius: 10px; overflow: hidden; }
|
||||
.about-img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/* 4. 갤러리 */
|
||||
.gallery-section { padding: 80px 15px; }
|
||||
.gallery-list { display: flex; flex-wrap: wrap; gap: 20px; }
|
||||
|
||||
/* 5. 고객센터 & 지도 */
|
||||
.contact-map-section { padding: 80px 0; background: #fff; border-top: 1px solid #eee; }
|
||||
.contact-map-section .container { display: flex; gap: 30px; }
|
||||
.contact-info-box { flex: 0 0 350px; background: #0054a6; color: #fff; padding: 40px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; }
|
||||
.contact-info-box h3 { font-size: 24px; font-weight: 700; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 20px; }
|
||||
.contact-info-box .tel { font-size: 36px; font-weight: 700; margin-bottom: 20px; }
|
||||
.contact-info-box .desc { font-size: 15px; line-height: 1.6; margin-bottom: 30px; opacity: 0.9; }
|
||||
.contact-info-box .btns { display: flex; gap: 10px; }
|
||||
.contact-info-box .btns a { flex: 1; text-align: center; padding: 12px 0; background: rgba(255,255,255,0.2); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.3); transition: 0.3s; }
|
||||
.contact-info-box .btns a:hover { background: #fff; color: #0054a6; }
|
||||
.map-box { flex: 1; height: 400px; background: #ddd; border-radius: 10px; overflow: hidden; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.main-visual { height: 500px; padding-top: 60px; } /* 모바일 헤더 높이에 맞게 조정 */
|
||||
.main-visual .swiper-button-next,
|
||||
.main-visual .swiper-button-prev {
|
||||
top: calc(50% + 30px);
|
||||
}
|
||||
.visual-title { font-size: 36px; }
|
||||
.visual-subtitle { font-size: 20px; }
|
||||
.product-item { width: 48%; }
|
||||
.about-content { flex-direction: column; }
|
||||
.about-img { width: 100%; height: 300px; }
|
||||
.contact-map-section .container { flex-direction: column; }
|
||||
.contact-info-box { width: 100%; flex: auto; }
|
||||
.map-box { height: 300px; }
|
||||
.main-visual .swiper-button-prev .thumb-wrapper,
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
display: none; /* 모바일에서는 썸네일 미리보기 숨김 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main-visual { height: 400px; }
|
||||
.visual-title { font-size: 28px; }
|
||||
.visual-subtitle { font-size: 16px; }
|
||||
.visual-divider { margin: 20px auto; }
|
||||
.product-item { width: 100%; }
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
|
||||
/* 공통 */
|
||||
.main-container { width: 100%; overflow: hidden; }
|
||||
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
|
||||
.section-title { text-align: center; margin-bottom: 50px; }
|
||||
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
|
||||
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
|
||||
.section-title p { font-size: 16px; color: #666; }
|
||||
|
||||
/* 1. 메인 비주얼 */
|
||||
.main-visual {
|
||||
width: 100%;
|
||||
height: auto; /* 슬라이드 높이 증가 */
|
||||
position: relative;
|
||||
padding-top: 190px; /* 헤더 높이만큼 상단 여백 추가 */
|
||||
box-sizing: border-box; /* 패딩을 높이에 포함 */
|
||||
}
|
||||
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
|
||||
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
|
||||
/* 텍스트 레이어 */
|
||||
.visual-layer-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; /* 수직 중앙 정렬 */
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #ffd200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visual-divider {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Swiper 네비게이션 버튼 스타일 */
|
||||
.main-visual .swiper-button-next,
|
||||
.main-visual .swiper-button-prev {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s;
|
||||
position: absolute; /* Swiper 기본 스타일 오버라이드 */
|
||||
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.main-visual .swiper-button-prev {
|
||||
left: 20px;
|
||||
}
|
||||
.main-visual .swiper-button-next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-next:hover,
|
||||
.main-visual .swiper-button-prev:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.main-visual .swiper-button-next:after,
|
||||
.main-visual .swiper-button-prev:after {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 썸네일 미리보기 스타일 */
|
||||
.main-visual .swiper-button-prev .thumb-wrapper,
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev:hover .thumb-wrapper,
|
||||
.main-visual .swiper-button-next:hover .thumb-wrapper {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb-wrapper {
|
||||
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb,
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
width: 100px; /* 썸네일 크기 */
|
||||
height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.main-visual .swiper-button-prev .thumb {
|
||||
left: 0;
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* 기본 초기화 및 폰트 */
|
||||
/* 폰트 및 초기화 */
|
||||
#eklim_main_wrap { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; letter-spacing: -0.05em; line-height: 1.2; }
|
||||
|
||||
/* 상단 유틸 (기획안 우측 상단 소형 글자) */
|
||||
.top_util_bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.top_util_bar .inner { max-width: 1600px; margin: 0 auto; text-align: right; padding: 10px 20px; }
|
||||
.top_util_bar a { font-size: 12px; color: #888; text-decoration: none; margin-left: 15px; }
|
||||
|
||||
|
||||
/* [추가] 공정(Process) 섹션 및 레이아웃 그리드 스타일 */
|
||||
.process-section {
|
||||
padding: 60px 0;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.layout-main-content1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.layout-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.layout-inner-row {
|
||||
flex: 1;
|
||||
min-height: 100px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
||||
padding: 20px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.layout-inner-row:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* 애니메이션 */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,742 @@
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
|
||||
/* 공통 */
|
||||
.main-container { width: 100%; overflow: hidden; }
|
||||
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
|
||||
.section-title { text-align: center; margin-bottom: 50px; }
|
||||
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
|
||||
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
|
||||
.section-title p { font-size: 16px; color: #666; }
|
||||
|
||||
/* 1. 메인 비주얼 */
|
||||
.main-visual {
|
||||
width: 100%;
|
||||
height: auto; /* 슬라이드 높이 증가 */
|
||||
position: relative;
|
||||
padding-top: 190px; /* 헤더 높이만큼 상단 여백 추가 */
|
||||
box-sizing: border-box; /* 패딩을 높이에 포함 */
|
||||
}
|
||||
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
|
||||
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
|
||||
/* 텍스트 레이어 */
|
||||
.visual-layer-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; /* 수직 중앙 정렬 */
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #ffd200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visual-divider {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Swiper 네비게이션 버튼 스타일 */
|
||||
.main-visual .swiper-button-next,
|
||||
.main-visual .swiper-button-prev {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s;
|
||||
position: absolute; /* Swiper 기본 스타일 오버라이드 */
|
||||
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.main-visual .swiper-button-prev {
|
||||
left: 20px;
|
||||
}
|
||||
.main-visual .swiper-button-next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-next:hover,
|
||||
.main-visual .swiper-button-prev:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.main-visual .swiper-button-next:after,
|
||||
.main-visual .swiper-button-prev:after {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 썸네일 미리보기 스타일 */
|
||||
.main-visual .swiper-button-prev .thumb-wrapper,
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev:hover .thumb-wrapper,
|
||||
.main-visual .swiper-button-next:hover .thumb-wrapper {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb-wrapper {
|
||||
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb,
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
width: 100px; /* 썸네일 크기 */
|
||||
height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.main-visual .swiper-button-prev .thumb {
|
||||
left: 0;
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* 기본 초기화 및 폰트 */
|
||||
/* 폰트 및 초기화 */
|
||||
#eklim_main_wrap { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; letter-spacing: -0.05em; line-height: 1.2; }
|
||||
|
||||
/* 상단 유틸 (기획안 우측 상단 소형 글자) */
|
||||
.top_util_bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.top_util_bar .inner { max-width: 1600px; margin: 0 auto; text-align: right; padding: 10px 20px; }
|
||||
.top_util_bar a { font-size: 12px; color: #888; text-decoration: none; margin-left: 15px; }
|
||||
|
||||
|
||||
|
||||
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
|
||||
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
|
||||
/* 텍스트 레이어 */
|
||||
.visual-layer-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; /* 수직 중앙 정렬 */
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #ffd200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visual-divider {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Swiper 네비게이션 버튼 스타일 */
|
||||
.main-visual .swiper-button-next,
|
||||
.main-visual .swiper-button-prev {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s;
|
||||
position: absolute; /* Swiper 기본 스타일 오버라이드 */
|
||||
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.main-visual .swiper-button-prev {
|
||||
left: 20px;
|
||||
}
|
||||
.main-visual .swiper-button-next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-next:hover,
|
||||
.main-visual .swiper-button-prev:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.main-visual .swiper-button-next:after,
|
||||
.main-visual .swiper-button-prev:after {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 썸네일 미리보기 스타일 */
|
||||
.main-visual .swiper-button-prev .thumb-wrapper,
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev:hover .thumb-wrapper,
|
||||
.main-visual .swiper-button-next:hover .thumb-wrapper {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb-wrapper {
|
||||
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb,
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
width: 100px; /* 썸네일 크기 */
|
||||
height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.main-visual .swiper-button-prev .thumb {
|
||||
left: 0;
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
right: 0;
|
||||
}
|
||||
/* 제품 인덱스 맵 전용 메인 비주얼 스타일 (이름 변경됨) */
|
||||
.map-main-visual {
|
||||
width: 100%;
|
||||
height: 840px;
|
||||
position: relative;
|
||||
padding-top: 90px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.map-main-visual .swiper-wrapper,
|
||||
.map-main-visual .swiper-slide { height: 100%; }
|
||||
.map-visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.map-visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
|
||||
/* 텍스트 레이어 */
|
||||
.map-visual-layer-wrap {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
display: flex; justify-content: center; align-items: center;
|
||||
z-index: 2; text-align: center; color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
.map-visual-title { font-size: 48px; font-weight: 700; color: #ffd200; margin: 0; }
|
||||
.map-visual-divider { display: block; width: 50px; height: 2px; background-color: rgba(255, 255, 255, 0.5); margin: 30px auto; }
|
||||
.map-visual-subtitle { font-size: 24px; font-weight: 500; line-height: 1.6; margin: 0; }
|
||||
|
||||
/* 네비게이션 버튼 & 썸네일 */
|
||||
.map-main-visual .swiper-button-next,
|
||||
.map-main-visual .swiper-button-prev {
|
||||
width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%; color: #fff; transition: background-color 0.3s;
|
||||
position: absolute; top: calc(50% + 45px); transform: translateY(-50%);
|
||||
z-index: 10; display: flex; justify-content: center; align-items: center; cursor: pointer;
|
||||
}
|
||||
.map-main-visual .swiper-button-prev { left: 20px; }
|
||||
.map-main-visual .swiper-button-next { right: 20px; }
|
||||
.map-main-visual .swiper-button-next:hover,
|
||||
.map-main-visual .swiper-button-prev:hover { background-color: rgba(0, 0, 0, 0.5); }
|
||||
.map-main-visual .swiper-button-next:after,
|
||||
.map-main-visual .swiper-button-prev:after { font-size: 20px; }
|
||||
|
||||
.map-thumb-wrapper {
|
||||
position: absolute; top: 0; width: 100%; height: 100%;
|
||||
border-radius: 50%; overflow: hidden; opacity: 0;
|
||||
transform: scale(0); transition: all 0.3s ease; pointer-events: none;
|
||||
}
|
||||
.map-main-visual .swiper-button-prev:hover .map-thumb-wrapper,
|
||||
.map-main-visual .swiper-button-next:hover .map-thumb-wrapper { opacity: 1; transform: scale(1); }
|
||||
.map-main-visual .swiper-button-prev .map-thumb-wrapper { left: -110px; }
|
||||
.map-main-visual .swiper-button-next .map-thumb-wrapper { right: -110px; }
|
||||
|
||||
.map-thumb {
|
||||
width: 100px; height: 100px; background-size: cover; background-position: center;
|
||||
border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 💡 [수정] 히어로 섹션 스타일 */
|
||||
.hero_container {
|
||||
padding: 120px 0 80px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hero_container .content_inner {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.hero_container .main_bg_img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero_container .hero_content_wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero_container .text_area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1600px;
|
||||
padding: 0 20px;
|
||||
text-align: left;
|
||||
color: #111;
|
||||
line-height: 1.6;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero_container .floating_as_badge {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #FF6B00;
|
||||
color: #fff;
|
||||
padding: 30px 40px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
box-shadow: 0 15px 35px rgba(255, 107, 0, 0.3);
|
||||
z-index: 3;
|
||||
line-height: 1.4;
|
||||
}
|
||||
/* 💡 [끝] 히어로 섹션 스타일 */
|
||||
|
||||
|
||||
/* 텍스트 크기 및 색상 */
|
||||
.label_orange { color: #FF6B00; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
||||
.label_blue { color: #007bff; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
||||
.main_title { font-size: 52px; font-weight: 800; color: #111; margin-bottom: 30px; line-height: 1.2; }
|
||||
.main_title .highlight_orange { color: #FF6B00; }
|
||||
.main_title .highlight_blue { color: #007bff; }
|
||||
.sub_description { font-size: 20px; color: #666; line-height: 1.6; margin-bottom: 60px; }
|
||||
|
||||
/* 버튼 스타일 (기획안과 동일한 색상 대비) */
|
||||
.main_action_row { display: flex; gap: 20px; }
|
||||
.btn_box { display: flex; align-items: center; width: 380px; padding: 35px 30px; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
|
||||
|
||||
/* 버튼 1: 블랙 (온라인 주문) */
|
||||
.btn_box.dark { background: #222; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
|
||||
.btn_box.dark strong { font-size: 24px; color: #fff; }
|
||||
.btn_box.dark p { font-size: 15px; color: #aaa; margin-top: 5px; }
|
||||
|
||||
/* 버튼 2: 화이트 (전문가 부르기) */
|
||||
/* 버튼 2: 기본 흰색 상태 */
|
||||
.btn_box.white {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #222;
|
||||
transition: all 0.3s ease; /* 부드러운 전환 효과 */
|
||||
}
|
||||
|
||||
.btn_box.white strong { font-size: 24px; color: #222; transition: all 0.3s; }
|
||||
.btn_box.white p { font-size: 15px; color: #888; margin-top: 5px; transition: all 0.3s; }
|
||||
|
||||
/* 마우스 올렸을 때 (Hover) 파란색으로 변경 */
|
||||
.btn_box.white:hover {
|
||||
background: #007bff; /* 신뢰감을 주는 파란색 */
|
||||
border-color: #007bff;
|
||||
transform: translateY(-8px); /* 위로 살짝 올라가는 효과 */
|
||||
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3); /* 파란색 그림자 */
|
||||
}
|
||||
|
||||
/* 마우스 올렸을 때 내부 글자색을 흰색으로 변경 */
|
||||
.btn_box.white:hover strong,
|
||||
.btn_box.white:hover p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 마우스 올렸을 때 아이콘도 살짝 반응하도록 (선택사항) */
|
||||
.btn_box.white:hover .btn_icon {
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
|
||||
/* 오렌지 플로팅 배지 (Slide 01 우측 상단 디자인) */
|
||||
.floating_as_badge p { font-size: 18px; margin-bottom: 5px; font-weight: 400; opacity: 0.9; }
|
||||
.floating_as_badge strong { font-size: 28px; font-weight: 900; display: block; }
|
||||
|
||||
/* 하단 네비게이션 */
|
||||
.bottom_nav { border-top: 1px solid #eee; margin-top: 50px; }
|
||||
.bottom_nav ul { list-style: none; display: flex; gap: 40px; justify-content: center; padding: 25px 0; }
|
||||
.bottom_nav li { font-size: 17px; font-weight: 600; color: #444; cursor: pointer; }
|
||||
|
||||
|
||||
|
||||
/* --- [유지] 기본 및 공통 설정 --- */
|
||||
.products-main-page { background-color: #0b0f1a; font-family: 'Pretendard', sans-serif; margin: 0; padding: 0; }
|
||||
.main-container { width: 100%; overflow: hidden; }
|
||||
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
|
||||
.section-title { text-align: center; margin-bottom: 50px; }
|
||||
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
|
||||
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
|
||||
.section-title p { font-size: 16px; color: #666; }
|
||||
|
||||
/* --- [유지] 메인 비주얼 슬라이더 관련 (기존 소스) --- */
|
||||
.main-visual { width: 100%; height: auto; position: relative; padding-top: 190px; box-sizing: border-box; }
|
||||
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
|
||||
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
.visual-layer-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; text-align: center; color: #fff; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
|
||||
.visual-title { font-size: 48px; font-weight: 700; color: #ffd200; margin: 0; }
|
||||
.visual-divider { display: block; width: 50px; height: 2px; background-color: rgba(255, 255, 255, 0.5); margin: 30px auto; }
|
||||
.visual-subtitle { font-size: 24px; font-weight: 500; line-height: 1.6; margin: 0; }
|
||||
.main-visual .swiper-button-next, .main-visual .swiper-button-prev { width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.1); border-radius: 50%; color: #fff; position: absolute; top: calc(50% + 45px); transform: translateY(-50%); z-index: 10; display: flex; justify-content: center; align-items: center; cursor: pointer; }
|
||||
.main-visual .swiper-button-prev { left: 20px; }
|
||||
.main-visual .swiper-button-next { right: 20px; }
|
||||
|
||||
/* --- [유지] 히어로 섹션 관련 (기존 소스) --- */
|
||||
.hero_container { padding: 120px 0 80px 0; background: #fff; }
|
||||
.hero_container .text_area { position: relative; width: 100%; max-width: 1600px; padding: 0 20px; text-align: left; color: #111; line-height: 1.6; z-index: 2; }
|
||||
/* ... (기존의 btn_box, main_title 등 생략하지만 파일에는 유지하셔야 합니다) ... */
|
||||
|
||||
/* --- [중요/수정] 팝업창 및 맵 전용 설정 --- */
|
||||
|
||||
/* 1. 최상위 섹션 기준점 (팝업 중앙 배치를 위해 필수) */
|
||||
/*.product-map-section {
|
||||
position: relative !important;
|
||||
}*/
|
||||
.product-map-section {
|
||||
position: relative !important; /* 💡 absolute인 팝업이 이 섹션을 기준으로 정렬됨 */
|
||||
background-color: #0b0f1a;
|
||||
width: 100%;
|
||||
overflow: hidden; /* 팝업이 섹션을 넘칠 경우 대비 */
|
||||
}
|
||||
|
||||
/* 2. 맵 및 핫스팟 보정 */
|
||||
/*.map-wrapper {
|
||||
position: relative; display: inline-block;
|
||||
width: 1600px; overflow: hidden; border-radius: 24px;
|
||||
margin: 0 auto; background: #161b26;
|
||||
}*/
|
||||
.map-wrapper {
|
||||
position: relative; display: inline-block;
|
||||
width: 1600px; overflow: hidden; border-radius: 24px;
|
||||
margin: 0 auto; background: #161b26;
|
||||
}
|
||||
|
||||
/*.map-container {
|
||||
position: relative; width: 100%; height: 980px !important;
|
||||
background-size: 100% 100% !important; cursor: crosshair;
|
||||
}*/
|
||||
.map-container {
|
||||
position: relative; width: 100%; height: 980px !important;
|
||||
background-size: 100% 100% !important; cursor: crosshair;
|
||||
}
|
||||
/*.hotspot {
|
||||
position: absolute; width: 22px !important; height: 22px !important;
|
||||
background: rgba(59, 130, 246, 0.6); border: 2px solid #fff; border-radius: 50%;
|
||||
transform: translate(-50%, -50%) !important; !* 💡 Y축 오차 해결 *!
|
||||
z-index: 10; cursor: pointer;
|
||||
}*/
|
||||
/*
|
||||
.hotspot {
|
||||
position: absolute; width: 22px !important; height: 22px !important;
|
||||
background: rgba(59, 130, 246, 0.6); border: 2px solid #fff; border-radius: 50%;
|
||||
transform: translate(-50%, -50%) !important; z-index: 10; cursor: pointer;
|
||||
}
|
||||
.hotspot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: rgba(0, 123, 255, 0.4); border-radius: 50%; transform: translate(-50%, -50%); animation: hotspot-pulse 2s infinite; }
|
||||
|
||||
@keyframes hotspot-pulse { 0% { width: 20px; height: 20px; opacity: 0.8; } 100% { width: 60px; height: 60px; opacity: 0; } }
|
||||
*/
|
||||
|
||||
/* 1. 핫스팟 기본 스타일 (파란색) */
|
||||
.hotspot {
|
||||
position: absolute;
|
||||
width: 22px !important;
|
||||
height: 22px !important;
|
||||
background: rgba(59, 130, 246, 0.8) !important; /* 파란색 */
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease; /* 부드러운 색상 전환 */
|
||||
}
|
||||
|
||||
/* 💡 [추가] 마우스 올렸을 때 스타일 (노란색) */
|
||||
.hotspot:hover {
|
||||
background: rgba(255, 210, 0, 1) !important; /* 노란색으로 변경 */
|
||||
box-shadow: 0 0 20px rgba(255, 210, 0, 0.8);
|
||||
transform: translate(-50%, -50%) scale(1.2) !important; /* 살짝 커지는 효과 */
|
||||
}
|
||||
|
||||
/* 2. 반짝이는 파동 효과 */
|
||||
.hotspot::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%; left: 50%;
|
||||
width: 100%; height: 100%;
|
||||
background-color: rgba(59, 130, 246, 0.4); /* 기본 파란색 파동 */
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
animation: hotspot-pulse 2s infinite;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
/* 💡 [추가] 마우스 올렸을 때 파동 색상도 노란색으로 변경 */
|
||||
.hotspot:hover::after {
|
||||
background-color: rgba(255, 210, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
/* 파동 애니메이션 정의 */
|
||||
@keyframes hotspot-pulse {
|
||||
0% { width: 20px; height: 20px; opacity: 0.8; }
|
||||
100% { width: 60px; height: 60px; opacity: 0; }
|
||||
}
|
||||
/* 3. [최종] 팝업 통합 스타일 (중복 완전 제거) */
|
||||
/*#hover-preview {
|
||||
position: absolute !important; !* 💡 섹션 내 중앙 배치 *!
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
background: rgba(15, 23, 42, 0.98) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 24px;
|
||||
padding: 30px !important;
|
||||
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
|
||||
|
||||
!* 💡 사방 20px 마진 강제 *!
|
||||
max-width: calc(100% - 40px) !important;
|
||||
max-height: calc(100% - 40px) !important;
|
||||
width: 500px; !* 호버 시 기본 너비 *!
|
||||
transition: width 0.3s ease;
|
||||
pointer-events: none;
|
||||
}*/
|
||||
#hover-preview {
|
||||
position: absolute !important; /* 💡 fixed 사용 금지: 섹션 내부에서만 움직임 */
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -50%) !important; /* 💡 정확히 섹션의 중앙 배치 */
|
||||
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
background: rgba(15, 23, 42, 0.98) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 24px;
|
||||
padding: 30px !important;
|
||||
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
|
||||
|
||||
/* 💡 부모 섹션 기준 사방 20px 마진 유지 */
|
||||
max-width: calc(100% - 40px) !important;
|
||||
max-height: calc(100% - 40px) !important;
|
||||
width: calc(50% - 40px) !important;
|
||||
height: calc(100% - 40px) !important;
|
||||
transition: width 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 클릭 고정 시 */
|
||||
/*#hover-preview.fixed-mode {
|
||||
display: flex !important;
|
||||
flex-direction: column !important; !* 💡 세로 배치를 강제하여 옆으로 벌어짐 해결 *!
|
||||
width: calc(100% - 40px) !important;
|
||||
height: calc(100% - 40px) !important;
|
||||
pointer-events: auto !important;
|
||||
}*/
|
||||
#hover-preview.fixed-mode {
|
||||
display: flex !important;
|
||||
flex-direction: column !important; /* 💡 세로 배치를 강제하여 옆으로 벌어짐 해결 */
|
||||
width: calc(50% - 40px) !important;
|
||||
height: calc(100% - 40px) !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
/* 4. 제품 그리드 및 아이템 레이아웃 */
|
||||
/*.products-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}*/
|
||||
.products-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 20px; flex: 1; overflow-y: auto; width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
/*.products-grid.single-item, .products-grid.full-html-mode {
|
||||
grid-template-columns: 1fr !important;
|
||||
}*/
|
||||
.products-grid.single-item, .products-grid.full-html-mode {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* 모든 아이템은 세로 정렬 */
|
||||
/*.product-item.item-vertical {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
text-align: left !important;
|
||||
}*/
|
||||
|
||||
.product-item.item-vertical {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
padding: 20px; border-radius: 16px; color: #fff; text-align: left !important;
|
||||
}
|
||||
|
||||
.product-img-box { width: 100% !important; height: 100% !important; background: #000; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
|
||||
.product-img-box img { max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
display: block; margin: 15px auto; border-radius: 10px; }
|
||||
|
||||
/* 5. 에디터 뷰 최적화 */
|
||||
.editor-content-view { width: 100% !important; height: 100% !important; color: #eee !important; line-height: 1.7; margin-bottom: 20px; }
|
||||
/*.editor-content-view img { max-width: 100% !important; width: auto !important; height: auto !important; display: block; margin: 15px auto; border-radius: 10px; }*/
|
||||
|
||||
.editor-content-view img,
|
||||
.editor-content-view p img {
|
||||
max-width: 100% !important;
|
||||
width: auto !important;
|
||||
height: 100% !important;
|
||||
display: block; margin: 15px auto; border-radius: 10px;
|
||||
}
|
||||
/* 스크롤바 디자인 */
|
||||
#preview-grid::-webkit-scrollbar { width: 6px; }
|
||||
#preview-grid::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.5); border-radius: 10px; }
|
||||
.content-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 30px 0; }
|
||||
|
||||
/* 💡 [수정] 에디터 콘텐츠 뷰 내 이미지 스타일 통합 설정 */
|
||||
/*
|
||||
.editor-content-view img,
|
||||
.editor-content-view p img {
|
||||
!* 💡 가로 너비 설정 *!
|
||||
max-width: 100% !important; !* 부모(팝업) 너비를 절대 넘지 않음 *!
|
||||
width: auto !important; !* 원본 너비를 유지하되 부모보다 크면 축소 *!
|
||||
|
||||
!* 💡 세로 높이 설정 - 요청하신 100% 강제 적용 *!
|
||||
height: 100% !important; !* 💡 부모 높이를 꽉 채우도록 강제 *!
|
||||
|
||||
!* 💡 비율 보정 (필수) *!
|
||||
object-fit: contain !important; !* 100% 시 이미지가 찌그러지는 것을 방지하고 비율 유지하며 채움 *!
|
||||
|
||||
!* 💡 정렬 및 디자인 *!
|
||||
display: block !important;
|
||||
margin: 15px auto !important; !* 중앙 정렬 *!
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
|
||||
!* 💡 [추가] 에디터 콘텐츠 뷰와 그 안의 p 태그에 높이 설정 *!
|
||||
.editor-content-view {
|
||||
!* 팝업의 고정된 높이(550px)에서 헤더(약 60px)와 패딩(30px)을 제외한 공간 *!
|
||||
height: 380px !important; !* 💡 이미지의 부모 요소에 명확한 높이 부여 *!
|
||||
overflow-y: auto !important; !* 내용이 길면 스크롤 *!
|
||||
overflow-x: hidden !important;
|
||||
padding-right: 10px !important; !* 스크롤바와 내용 사이 간격 *!
|
||||
color: #eee !important;
|
||||
font-size: 15px !important;
|
||||
line-height: 1.7 !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
*/
|
||||
|
||||
.editor-content-view p {
|
||||
height: 100% !important; /* 💡 img 태그의 부모인 p 태그도 높이를 100%로 설정 */
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
display: flex !important; /* p 태그 내부의 img를 정렬하기 위해 flex 사용 */
|
||||
justify-content: center !important; /* 이미지를 p 태그 내에서 중앙 정렬 */
|
||||
align-items: center !important; /* 이미지를 p 태그 내에서 중앙 정렬 */
|
||||
}
|
||||
@@ -0,0 +1,91 @@
|
||||
/* ============================================================
|
||||
[최종 통합본] 메인 맵 전용 스타일 (products2.css)
|
||||
============================================================ */
|
||||
|
||||
/* 1. 기본 레이아웃 및 컨테이너 */
|
||||
.product-section { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding: 40px 20px; position: relative !important; }
|
||||
.product-section .product-side { display: flex; flex-direction: column; }
|
||||
.product-section .product-item { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 10; }
|
||||
|
||||
/* 2. 제품 이미지 기본 스타일 (200x200) */
|
||||
.product-img { width: 200px; height: 200px; overflow: visible; position: relative; }
|
||||
.product-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
|
||||
|
||||
/* 💡 [모드 1] 메인 영역 내부 중앙 팝업 */
|
||||
#active-popup-img {
|
||||
position: absolute !important;
|
||||
top: 50% !important; left: 50% !important;
|
||||
transform: translate(-50%, -50%) scale(0.1) !important;
|
||||
width: calc(100% - 40px) !important;
|
||||
height: auto !important;
|
||||
max-height: 90% !important;
|
||||
z-index: 9999 !important;
|
||||
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
object-fit: contain !important;
|
||||
opacity: 0;
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
#active-popup-img.active { transform: translate(-50%, -50%) scale(1) !important; opacity: 1; }
|
||||
|
||||
/* 💡 [모드 2] 점선 연결선 + 화살표 */
|
||||
.show-connector::after {
|
||||
content: ''; position: absolute; top: 50%;
|
||||
border-top: 3px dashed #ffd200; z-index: 500; pointer-events: none;
|
||||
width: 0 !important;
|
||||
transform: rotate(var(--line-angle, 0deg)) !important;
|
||||
transition: width 0.5s ease;
|
||||
display: block !important;
|
||||
}
|
||||
.show-connector::before {
|
||||
content: ''; position: absolute; top: 50%; width: 0; height: 0;
|
||||
border-left: 12px solid #ffd200; border-top: 7px solid transparent; border-bottom: 7px solid transparent;
|
||||
z-index: 501; pointer-events: none; opacity: 0;
|
||||
transform: rotate(var(--line-angle, 0deg)) translateX(var(--line-width, 0px)) translateY(-50%);
|
||||
transition: opacity 0.3s ease 0.4s;
|
||||
display: block !important;
|
||||
}
|
||||
.show-connector.active::after { width: var(--line-width, 0px) !important; animation: dash-move 1.5s linear infinite; }
|
||||
.show-connector.active::before { opacity: 1; }
|
||||
|
||||
/* 방향별 회전축 보정 */
|
||||
.product-side.left .show-connector::after, .product-side.left .show-connector::before { left: 100% !important; margin-left: 10px; transform-origin: left center !important; }
|
||||
.product-side.right .show-connector::after, .product-side.right .show-connector::before { right: 100% !important; left: auto !important; margin-right: 10px; transform-origin: right center !important; }
|
||||
|
||||
/* 💡 [모드 3] 제자리 600x600 확대 스타일 */
|
||||
.mode-self-zoom {
|
||||
position: absolute !important;
|
||||
z-index: 1000 !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) scale(3) !important; /* 200px -> 600px */
|
||||
box-shadow: 0 40px 80px rgba(0,0,0,0.6) !important;
|
||||
border: 3px solid rgba(255,255,255,0.5) !important;
|
||||
border-radius: 12px !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
@keyframes dash-move { to { stroke-dashoffset: -20; } }
|
||||
|
||||
/* 3. 메인 이미지 및 블루 스폿 설정 */
|
||||
.product-main { position: relative; width: 1000px; height: 800px; flex-shrink: 0; overflow: hidden; }
|
||||
.product-main img { width: 100%; height: 100%; object-fit: cover; }
|
||||
.product-hotspot {
|
||||
position: absolute !important; width: 25px !important; height: 25px !important;
|
||||
background: rgba(0, 123, 255, 0.8) !important; border: 3px solid #fff !important;
|
||||
border-radius: 50% !important; transform: translate(-50%, -50%) !important;
|
||||
z-index: 500; display: none; animation: hotspot-pulse-blue 1.5s infinite ease-in-out;
|
||||
}
|
||||
@keyframes hotspot-pulse-blue {
|
||||
0%, 100% {
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
opacity: 0.8;
|
||||
box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-50%, -50%) scale(1.3);
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 20px 10px rgba(0, 116, 255, 0.4), 0 0 30px 5px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
/* ============================================================
|
||||
[최종 통합본] 메인 맵 전용 스타일 - 화살표 및 방향 보정 포함
|
||||
============================================================ */
|
||||
|
||||
/* 1. 기본 레이아웃 */
|
||||
.product-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
padding: 40px 20px;
|
||||
position: relative !important;
|
||||
}
|
||||
.product-section .product-side { display: flex; flex-direction: column; }
|
||||
.product-section .product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 2. 제품 이미지 기본 스타일 */
|
||||
.product-img { width: 200px; height: 200px; overflow: visible; position: relative; }
|
||||
.product-img img {
|
||||
width: 100%; height: 100%; object-fit: cover; border-radius: 12px;
|
||||
transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
/* 💡 [모드 1] 메인 영역 내부 중앙 팝업 */
|
||||
#active-popup-img {
|
||||
position: absolute !important;
|
||||
top: 50% !important; left: 50% !important;
|
||||
transform: translate(-50%, -50%) scale(0.1) !important;
|
||||
width: calc(100% - 40px) !important;
|
||||
height: calc(100% - 40px) !important;
|
||||
max-width: 1560px;
|
||||
z-index: 9999 !important;
|
||||
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
object-fit: contain !important;
|
||||
opacity: 0;
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
#active-popup-img.active { transform: translate(-50%, -50%) scale(1) !important; opacity: 1; }
|
||||
|
||||
/* 💡 점선 연결선 설정 (After: 선, Before: 화살표) */
|
||||
.show-connector::after {
|
||||
content: ''; position: absolute; top: 50%;
|
||||
border-top: 3px dashed #ffd200; z-index: 500; pointer-events: none;
|
||||
width: 0 !important;
|
||||
transform: rotate(var(--line-angle, 0deg)) !important;
|
||||
transition: width 0.5s ease;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
/* 💡 [추가] 점선 끝 화살표 머리 */
|
||||
.show-connector::before {
|
||||
content: ''; position: absolute; top: 50%;
|
||||
width: 0; height: 0;
|
||||
border-left: 12px solid #ffd200; /* 화살표 색상 */
|
||||
border-top: 7px solid transparent;
|
||||
border-bottom: 7px solid transparent;
|
||||
z-index: 501; pointer-events: none;
|
||||
opacity: 0;
|
||||
/* 선의 끝 지점으로 화살표 이동 */
|
||||
transform: rotate(var(--line-angle, 0deg)) translateX(var(--line-width, 0px)) translateY(-50%);
|
||||
transition: opacity 0.3s ease 0.4s;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.show-connector.active::after { width: var(--line-width, 0px) !important; animation: dash-move 1.5s linear infinite; }
|
||||
.show-connector.active::before { opacity: 1; }
|
||||
|
||||
/* 💡 방향별 회전축 보정 */
|
||||
/* 왼쪽 메뉴 -> 메인으로 (오른쪽 방향) */
|
||||
.product-side.left .show-connector::after,
|
||||
.product-side.left .show-connector::before {
|
||||
left: 100% !important;
|
||||
margin-left: 10px;
|
||||
transform-origin: left center !important;
|
||||
}
|
||||
|
||||
/* 오른쪽 메뉴 -> 메인으로 (왼쪽 방향) */
|
||||
.product-side.right .show-connector::after,
|
||||
.product-side.right .show-connector::before {
|
||||
right: 100% !important; /* 👈 오른쪽 끝 기준 왼쪽으로 뻗음 */
|
||||
left: auto !important;
|
||||
margin-right: 10px;
|
||||
transform-origin: right center !important; /* 👈 회전축을 우측 끝으로 고정 */
|
||||
}
|
||||
|
||||
@keyframes dash-move { to { stroke-dashoffset: -20; } }
|
||||
|
||||
/* 3. 메인 이미지 및 블루 스폿 설정 */
|
||||
.product-main { position: relative; width: 1600px; height: 1200px; flex-shrink: 0; overflow: hidden; }
|
||||
.product-main img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.product-hotspot {
|
||||
position: absolute !important; width: 45px !important; height: 45px !important;
|
||||
background: rgba(0, 123, 255, 0.8) !important; border: 3px solid #fff !important;
|
||||
border-radius: 50% !important; transform: translate(-50%, -50%) !important;
|
||||
z-index: 500; display: none; animation: hotspot-pulse-blue 1.5s infinite;
|
||||
}
|
||||
@keyframes hotspot-pulse-blue {
|
||||
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
|
||||
50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
|
||||
}
|
||||
/*잘되은거 아래*/
|
||||
/*!* ============================================================
|
||||
[최종 통합본] 메인 맵 전용 스타일 (products2.css)
|
||||
============================================================ *!
|
||||
|
||||
!* 1. 기본 레이아웃 *!
|
||||
.product-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
gap: 40px;
|
||||
padding: 40px 20px;
|
||||
position: relative !important;
|
||||
}
|
||||
.product-section .product-side { display: flex; flex-direction: column; }
|
||||
.product-section .product-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-bottom: 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
!* 2. 제품 이미지 기본 스타일 *!
|
||||
.product-img {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
overflow: visible;
|
||||
position: relative;
|
||||
}
|
||||
.product-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
transition: all 0.4s ease;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
!* 💡 [모드 1] 메인 영역 내부 중앙 팝업 *!
|
||||
#active-popup-img {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
!* 시작 상태: 작고 투명하게 *!
|
||||
transform: translate(-50%, -50%) scale(0.1) !important;
|
||||
width: calc(100% - 40px) !important; !* 사방 20px 마진 *!
|
||||
height: calc(100% - 40px) !important;
|
||||
max-width: 1560px;
|
||||
z-index: 9999 !important;
|
||||
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
object-fit: contain !important;
|
||||
opacity: 0;
|
||||
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
|
||||
!* 💡 [핵심] 마우스 이벤트를 무시하여 아이템 mouseleave 방해 금지 *!
|
||||
pointer-events: none !important;
|
||||
}
|
||||
!* 활성화 상태: 정중앙 100% 크기 *!
|
||||
#active-popup-img.active {
|
||||
transform: translate(-50%, -50%) scale(1) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
!* 💡 [모드 2] 점선 연결선 *!
|
||||
.show-connector::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
border-top: 3px dashed #ffd200;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
width: 0 !important; !* 시작은 길이 0 *!
|
||||
transform: rotate(var(--line-angle, 0deg)) !important;
|
||||
transform-origin: left center !important;
|
||||
transition: width 0.5s ease;
|
||||
display: block !important;
|
||||
}
|
||||
!* 활성화 상태: 계산된 길이만큼 뻗어나감 *!
|
||||
.show-connector.active::after {
|
||||
width: var(--line-width, 0px) !important;
|
||||
animation: dash-move 1.5s linear infinite;
|
||||
}
|
||||
|
||||
!* 방향별 연결선 시작 위치 *!
|
||||
.product-side.left .show-connector::after { left: 100% !important; margin-left: 10px; }
|
||||
.product-side.right .show-connector::after {
|
||||
left: 0 !important;
|
||||
margin-right: 10px;
|
||||
transform-origin: right center !important;
|
||||
}
|
||||
|
||||
@keyframes dash-move { to { stroke-dashoffset: -20; } }
|
||||
|
||||
!* 3. 메인 이미지 및 블루 스폿 설정 *!
|
||||
.product-main {
|
||||
position: relative;
|
||||
width: 1600px;
|
||||
height: 1200px;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.product-main img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.product-hotspot {
|
||||
position: absolute !important;
|
||||
width: 45px !important;
|
||||
height: 45px !important;
|
||||
background: rgba(0, 123, 255, 0.8) !important;
|
||||
border: 3px solid #fff !important;
|
||||
border-radius: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
z-index: 500;
|
||||
display: none;
|
||||
animation: hotspot-pulse-blue 1.5s infinite;
|
||||
}
|
||||
@keyframes hotspot-pulse-blue {
|
||||
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
|
||||
50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
|
||||
}
|
||||
|
||||
.product-hotspot::after {
|
||||
content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
|
||||
background-color: rgba(0, 123, 255, 0.3); border-radius: 50%;
|
||||
transform: translate(-50%, -50%); animation: hotspot-ring 1.5s infinite;
|
||||
}
|
||||
@keyframes hotspot-ring {
|
||||
0% { width: 45px; height: 45px; opacity: 0.5; }
|
||||
100% { width: 120px; height: 120px; opacity: 0; }
|
||||
}*/
|
||||
/*
|
||||
!* ============================================================
|
||||
[최종 통합본] 메인 맵 전용 스타일 (products2.css)
|
||||
============================================================ *!
|
||||
|
||||
!* 1. 컨테이너 및 레이아웃 *!
|
||||
.product-section { display: flex; justify-content: center; align-items: flex-start; gap: 40px; padding: 40px 20px; }
|
||||
.product-section .product-side { flex-direction: column; }
|
||||
.product-section .product-item { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; position: relative; z-index: 10; }
|
||||
|
||||
!* 2. 제품 이미지 기본 스타일 *!
|
||||
.product-img { width: 200px; height: 200px; overflow: visible; position: relative; }
|
||||
.product-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; transition: all 0.4s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.3); }
|
||||
|
||||
!* 💡 [모드 1] 메인 영역(.product-main) 내부 중앙 팝업 *!
|
||||
#active-popup-img {
|
||||
position: absolute !important;
|
||||
top: 50% !important; left: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
width: calc(100% - 40px) !important; !* 💡 부모 내부 20px 마진 *!
|
||||
height: calc(100% - 40px) !important;
|
||||
max-width: 1560px;
|
||||
z-index: 9999 !important;
|
||||
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
object-fit: contain !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
!* 💡 [모드 2] 점선 연결선 *!
|
||||
.show-connector::after {
|
||||
content: ''; position: absolute; top: 50%;
|
||||
border-top: 3px dashed #ffd200; z-index: 500; pointer-events: none;
|
||||
width: var(--line-width, 0px) !important;
|
||||
transform: rotate(var(--line-angle, 0deg)) !important;
|
||||
transform-origin: left center !important;
|
||||
display: block !important;
|
||||
}
|
||||
.product-side.left .show-connector::after { left: 100% !important; margin-left: 10px; }
|
||||
.product-side.right .show-connector::after { left: 0 !important; margin-right: 10px; transform-origin: right center !important; }
|
||||
|
||||
@keyframes dash-move { to { stroke-dashoffset: -20; } }
|
||||
|
||||
!* 3. 메인 이미지 및 블루 스폿 설정 *!
|
||||
.product-main { position: relative; width: 1600px; height: 1200px; flex-shrink: 0; overflow: hidden; }
|
||||
.product-main img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
.product-hotspot {
|
||||
position: absolute !important; width: 45px !important; height: 45px !important;
|
||||
background: rgba(0, 123, 255, 0.8) !important; border: 3px solid #fff !important;
|
||||
border-radius: 50% !important; transform: translate(-50%, -50%) !important;
|
||||
z-index: 500; display: none; animation: hotspot-pulse-blue 1.5s infinite;
|
||||
}
|
||||
@keyframes hotspot-pulse-blue { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.4); opacity: 1; } }
|
||||
|
||||
.product-hotspot::after {
|
||||
content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%;
|
||||
background-color: rgba(0, 123, 255, 0.3); border-radius: 50%;
|
||||
transform: translate(-50%, -50%); animation: hotspot-ring 1.5s infinite;
|
||||
}
|
||||
@keyframes hotspot-ring { 0% { width: 45px; height: 45px; opacity: 0.5; } 100% { width: 120px; height: 120px; opacity: 0; } }
|
||||
|
||||
!* 💡 [모드 1] 메인 영역(.product-main) 내부 중앙 팝업 *!
|
||||
#active-popup-img {
|
||||
position: absolute !important;
|
||||
top: 50% !important;
|
||||
left: 50% !important;
|
||||
transform: translate(-50%, -50%) scale(0.1) !important; !* 💡 초기 크기를 작게 시작 *!
|
||||
width: calc(100% - 40px) !important; !* 메인 영역 너비의 90% *!
|
||||
height: auto !important;
|
||||
max-height: 90% !important;
|
||||
z-index: 9999 !important;
|
||||
box-shadow: 0 40px 100px rgba(0,0,0,0.8);
|
||||
border: 3px solid rgba(255,255,255,0.5);
|
||||
object-fit: contain !important;
|
||||
pointer-events: none;
|
||||
opacity: 0; !* 💡 초기 투명도 *!
|
||||
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; !* 💡 애니메이션 추가 *!
|
||||
}
|
||||
|
||||
!* 💡 [추가] 팝업이 활성화될 때 최종 크기로 *!
|
||||
.product-section .product-main #active-popup-img.active {
|
||||
transform: translate(-50%, -50%) scale(1) !important; !* 💡 최종 크기 *!
|
||||
opacity: 1; !* 💡 최종 투명도 *!
|
||||
}*/
|
||||
@@ -0,0 +1,124 @@
|
||||
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
|
||||
|
||||
/* --- [유지] 기본 및 공통 설정 --- */
|
||||
.products-main-page { background-color: #0b0f1a; font-family: 'Pretendard', sans-serif; margin: 0; padding: 0; }
|
||||
.main-container { width: 100%; overflow: hidden; }
|
||||
.container { max-width: 1600px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
|
||||
.section-title { text-align: center; margin-bottom: 50px; }
|
||||
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
|
||||
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
|
||||
.section-title p { font-size: 16px; color: #666; }
|
||||
|
||||
/* --- [유지] 메인 비주얼 슬라이더 관련 (기존 소스) --- */
|
||||
.main-visual { width: 100%; height: auto; position: relative; padding-top: 190px; box-sizing: border-box; }
|
||||
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
|
||||
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
.visual-layer-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; text-align: center; color: #fff; text-shadow: 2px 2px 8px rgba(0,0,0,0.5); }
|
||||
.visual-title { font-size: 48px; font-weight: 700; color: #ffd200; margin: 0; }
|
||||
.visual-divider { display: block; width: 50px; height: 2px; background-color: rgba(255, 255, 255, 0.5); margin: 30px auto; }
|
||||
.visual-subtitle { font-size: 24px; font-weight: 500; line-height: 1.6; margin: 0; }
|
||||
.main-visual .swiper-button-next, .main-visual .swiper-button-prev { width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.1); border-radius: 50%; color: #fff; position: absolute; top: calc(50% + 45px); transform: translateY(-50%); z-index: 10; display: flex; justify-content: center; align-items: center; cursor: pointer; }
|
||||
.main-visual .swiper-button-prev { left: 20px; }
|
||||
.main-visual .swiper-button-next { right: 20px; }
|
||||
|
||||
/* --- [유지] 히어로 섹션 관련 (기존 소스) --- */
|
||||
.hero_container { padding: 120px 0 80px 0; background: #fff; }
|
||||
.hero_container .text_area { position: relative; width: 100%; max-width: 1600px; padding: 0 20px; text-align: left; color: #111; line-height: 1.6; z-index: 2; }
|
||||
/* ... (기존의 btn_box, main_title 등 생략하지만 파일에는 유지하셔야 합니다) ... */
|
||||
|
||||
/* --- [중요/수정] 팝업창 및 맵 전용 설정 --- */
|
||||
|
||||
/* 1. 최상위 섹션 기준점 (팝업 중앙 배치를 위해 필수) */
|
||||
.product-map-section {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
/* 2. 맵 및 핫스팟 보정 */
|
||||
.map-wrapper {
|
||||
position: relative; display: inline-block;
|
||||
width: 1600px; overflow: hidden; border-radius: 24px;
|
||||
margin: 0 auto; background: #161b26;
|
||||
}
|
||||
.map-container {
|
||||
position: relative; width: 100%; height: 980px !important;
|
||||
background-size: 100% 100% !important; cursor: crosshair;
|
||||
}
|
||||
.hotspot {
|
||||
position: absolute; width: 22px !important; height: 22px !important;
|
||||
background: rgba(59, 130, 246, 0.6); border: 2px solid #fff; border-radius: 50%;
|
||||
transform: translate(-50%, -50%) !important; /* 💡 Y축 오차 해결 */
|
||||
z-index: 10; cursor: pointer;
|
||||
}
|
||||
.hotspot::after { content: ''; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: rgba(0, 123, 255, 0.4); border-radius: 50%; transform: translate(-50%, -50%); animation: hotspot-pulse 2s infinite; }
|
||||
@keyframes hotspot-pulse { 0% { width: 20px; height: 20px; opacity: 0.8; } 100% { width: 60px; height: 60px; opacity: 0; } }
|
||||
|
||||
/* 3. [최종] 팝업 통합 스타일 (중복 완전 제거) */
|
||||
#hover-preview {
|
||||
position: absolute !important; /* 💡 섹션 내 중앙 배치 */
|
||||
left: 50% !important;
|
||||
top: 50% !important;
|
||||
transform: translate(-50%, -50%) !important;
|
||||
|
||||
display: none;
|
||||
z-index: 1000;
|
||||
background: rgba(15, 23, 42, 0.98) !important;
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 24px;
|
||||
padding: 30px !important;
|
||||
box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.9);
|
||||
|
||||
/* 💡 사방 20px 마진 강제 */
|
||||
max-width: calc(100% - 40px) !important;
|
||||
max-height: calc(100% - 40px) !important;
|
||||
width: 500px; /* 호버 시 기본 너비 */
|
||||
transition: width 0.3s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* 클릭 고정 시 */
|
||||
#hover-preview.fixed-mode {
|
||||
display: flex !important;
|
||||
flex-direction: column !important; /* 💡 세로 배치를 강제하여 옆으로 벌어짐 해결 */
|
||||
width: calc(100% - 40px) !important;
|
||||
height: calc(100% - 40px) !important;
|
||||
pointer-events: auto !important;
|
||||
}
|
||||
|
||||
/* 4. 제품 그리드 및 아이템 레이아웃 */
|
||||
.products-grid {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(2, 1fr) !important;
|
||||
gap: 20px;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
.products-grid.single-item, .products-grid.full-html-mode {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
/* 모든 아이템은 세로 정렬 */
|
||||
.product-item.item-vertical {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
color: #fff;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.product-img-box { width: 100% !important; height: auto !important; max-height: 400px; background: #000; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
|
||||
.product-img-box img { width: 100%; height: 100%; object-fit: contain; }
|
||||
|
||||
/* 5. 에디터 뷰 최적화 */
|
||||
.editor-content-view { width: 100% !important; color: #eee !important; line-height: 1.7; margin-bottom: 20px; }
|
||||
.editor-content-view img { max-width: 100% !important; width: auto !important; height: auto !important; display: block; margin: 15px auto; border-radius: 10px; }
|
||||
|
||||
/* 스크롤바 디자인 */
|
||||
#preview-grid::-webkit-scrollbar { width: 6px; }
|
||||
#preview-grid::-webkit-scrollbar-thumb { background: rgba(59, 130, 246, 0.5); border-radius: 10px; }
|
||||
.content-divider { border: 0; border-top: 1px solid rgba(255,255,255,0.1); margin: 30px 0; }
|
||||
@@ -0,0 +1,375 @@
|
||||
/* 메인 레이아웃 스타일 */
|
||||
|
||||
/* 공통 */
|
||||
.main-container { width: 100%; overflow: hidden; }
|
||||
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
|
||||
.section-title { text-align: center; margin-bottom: 50px; }
|
||||
.section-title h3 { font-size: 32px; font-weight: 700; color: #333; margin-bottom: 15px; position: relative; display: inline-block; }
|
||||
.section-title h3::after { content: ''; display: block; width: 40px; height: 2px; background: #0054a6; margin: 15px auto 0; }
|
||||
.section-title p { font-size: 16px; color: #666; }
|
||||
|
||||
/* 1. 메인 비주얼 */
|
||||
.main-visual {
|
||||
width: 100%;
|
||||
height: auto; /* 슬라이드 높이 증가 */
|
||||
position: relative;
|
||||
padding-top: 90px; /* 헤더 높이만큼 상단 여백 추가 */
|
||||
box-sizing: border-box; /* 패딩을 높이에 포함 */
|
||||
}
|
||||
.visual-slider, .swiper-wrapper, .swiper-slide { height: 100%; }
|
||||
.visual-link { display: block; width: 100%; height: 100%; position: relative; }
|
||||
.visual-img { width: 100%; height: 100%; background-size: cover; background-position: center; position: absolute; top: 0; left: 0; z-index: 1; }
|
||||
|
||||
/* 텍스트 레이어 */
|
||||
.visual-layer-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; /* 수직 중앙 정렬 */
|
||||
z-index: 2;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.visual-title {
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
color: #ffd200;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.visual-divider {
|
||||
display: block;
|
||||
width: 50px;
|
||||
height: 2px;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
margin: 30px auto;
|
||||
}
|
||||
|
||||
.visual-subtitle {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* Swiper 네비게이션 버튼 스타일 */
|
||||
.main-visual .swiper-button-next,
|
||||
.main-visual .swiper-button-prev {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
color: #fff;
|
||||
transition: background-color 0.3s;
|
||||
position: absolute; /* Swiper 기본 스타일 오버라이드 */
|
||||
top: calc(50% + 45px); /* 90px(padding-top)의 절반만큼 아래로 이동 */
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.main-visual .swiper-button-prev {
|
||||
left: 20px;
|
||||
}
|
||||
.main-visual .swiper-button-next {
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-next:hover,
|
||||
.main-visual .swiper-button-prev:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.main-visual .swiper-button-next:after,
|
||||
.main-visual .swiper-button-prev:after {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* 썸네일 미리보기 스타일 */
|
||||
.main-visual .swiper-button-prev .thumb-wrapper,
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: none; /* 썸네일 위로 마우스가 올라가도 버튼 hover 상태 유지 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev:hover .thumb-wrapper,
|
||||
.main-visual .swiper-button-next:hover .thumb-wrapper {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb-wrapper {
|
||||
left: -110px; /* 버튼 왼쪽에 썸네일 표시 */
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
right: -110px; /* 버튼 오른쪽에 썸네일 표시 */
|
||||
}
|
||||
|
||||
.main-visual .swiper-button-prev .thumb,
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
width: 100px; /* 썸네일 크기 */
|
||||
height: 100px;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
border: 2px solid rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
.main-visual .swiper-button-prev .thumb {
|
||||
left: 0;
|
||||
}
|
||||
.main-visual .swiper-button-next .thumb {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* 기본 초기화 및 폰트 */
|
||||
/* 폰트 및 초기화 */
|
||||
#eklim_main_wrap { font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif; letter-spacing: -0.05em; line-height: 1.2; }
|
||||
|
||||
/* 상단 유틸 (기획안 우측 상단 소형 글자) */
|
||||
.top_util_bar { background: #fff; border-bottom: 1px solid #f0f0f0; }
|
||||
.top_util_bar .inner { max-width: 1200px; margin: 0 auto; text-align: right; padding: 10px 20px; }
|
||||
.top_util_bar a { font-size: 12px; color: #888; text-decoration: none; margin-left: 15px; }
|
||||
|
||||
/* 💡 [수정] 히어로 섹션 스타일 */
|
||||
.hero_container {
|
||||
padding: 120px 0 80px 0;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.hero_container .content_inner {
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.hero_container .main_bg_img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.hero_container .hero_content_wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero_container .text_area {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1200px;
|
||||
padding: 0 20px;
|
||||
text-align: left;
|
||||
color: #111;
|
||||
line-height: 1.6;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero_container .floating_as_badge {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background: #FF6B00;
|
||||
color: #fff;
|
||||
padding: 30px 40px;
|
||||
border-radius: 25px;
|
||||
text-align: center;
|
||||
box-shadow: 0 15px 35px rgba(255, 107, 0, 0.3);
|
||||
z-index: 3;
|
||||
line-height: 1.4;
|
||||
}
|
||||
/* 💡 [끝] 히어로 섹션 스타일 */
|
||||
|
||||
|
||||
/* 텍스트 크기 및 색상 */
|
||||
.label_orange { color: #FF6B00; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
||||
.label_blue { color: #007bff; font-size: 16px; font-weight: 700; margin-bottom: 20px; }
|
||||
.main_title { font-size: 52px; font-weight: 800; color: #111; margin-bottom: 30px; line-height: 1.2; }
|
||||
.main_title .highlight_orange { color: #FF6B00; }
|
||||
.main_title .highlight_blue { color: #007bff; }
|
||||
.sub_description { font-size: 20px; color: #666; line-height: 1.6; margin-bottom: 60px; }
|
||||
|
||||
/* 버튼 스타일 (기획안과 동일한 색상 대비) */
|
||||
.main_action_row { display: flex; gap: 20px; }
|
||||
.btn_box { display: flex; align-items: center; width: 380px; padding: 35px 30px; border-radius: 20px; cursor: pointer; transition: all 0.3s; }
|
||||
|
||||
/* 버튼 1: 블랙 (온라인 주문) */
|
||||
.btn_box.dark { background: #222; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
|
||||
.btn_box.dark strong { font-size: 24px; color: #fff; }
|
||||
.btn_box.dark p { font-size: 15px; color: #aaa; margin-top: 5px; }
|
||||
|
||||
/* 버튼 2: 화이트 (전문가 부르기) */
|
||||
/* 버튼 2: 기본 흰색 상태 */
|
||||
.btn_box.white {
|
||||
background: #fff;
|
||||
border: 1px solid #e0e0e0;
|
||||
color: #222;
|
||||
transition: all 0.3s ease; /* 부드러운 전환 효과 */
|
||||
}
|
||||
|
||||
.btn_box.white strong { font-size: 24px; color: #222; transition: all 0.3s; }
|
||||
.btn_box.white p { font-size: 15px; color: #888; margin-top: 5px; transition: all 0.3s; }
|
||||
|
||||
/* 마우스 올렸을 때 (Hover) 파란색으로 변경 */
|
||||
.btn_box.white:hover {
|
||||
background: #007bff; /* 신뢰감을 주는 파란색 */
|
||||
border-color: #007bff;
|
||||
transform: translateY(-8px); /* 위로 살짝 올라가는 효과 */
|
||||
box-shadow: 0 10px 25px rgba(0, 123, 255, 0.3); /* 파란색 그림자 */
|
||||
}
|
||||
|
||||
/* 마우스 올렸을 때 내부 글자색을 흰색으로 변경 */
|
||||
.btn_box.white:hover strong,
|
||||
.btn_box.white:hover p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 마우스 올렸을 때 아이콘도 살짝 반응하도록 (선택사항) */
|
||||
.btn_box.white:hover .btn_icon {
|
||||
filter: brightness(1.5);
|
||||
}
|
||||
|
||||
/* 오렌지 플로팅 배지 (Slide 01 우측 상단 디자인) */
|
||||
.floating_as_badge p { font-size: 18px; margin-bottom: 5px; font-weight: 400; opacity: 0.9; }
|
||||
.floating_as_badge strong { font-size: 28px; font-weight: 900; display: block; }
|
||||
|
||||
/* 하단 네비게이션 */
|
||||
.bottom_nav { border-top: 1px solid #eee; margin-top: 50px; }
|
||||
.bottom_nav ul { list-style: none; display: flex; gap: 40px; justify-content: center; padding: 25px 0; }
|
||||
.bottom_nav li { font-size: 17px; font-weight: 600; color: #444; cursor: pointer; }
|
||||
|
||||
/* 2. 제품 소개 */
|
||||
.product-intro { padding: 80px 15px; }
|
||||
.product-list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
|
||||
.product-item { width: 23%; text-align: center; padding: 30px 20px; background: #f9f9f9; border-radius: 10px; transition: all 0.3s; text-decoration: none; color: #333; }
|
||||
.product-item:hover { background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.1); transform: translateY(-5px); }
|
||||
.product-item .icon-box { width: 80px; height: 80px; margin: 0 auto 20px; }
|
||||
.product-item .icon-box img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.product-item h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
|
||||
.product-item p { font-size: 14px; color: #888; }
|
||||
|
||||
/* 3. 회사 소개 */
|
||||
.about-section { background: #f4f4f4; padding: 80px 0; }
|
||||
.about-content { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
|
||||
.about-text { flex: 1; }
|
||||
.about-text h3 { font-size: 18px; color: #0054a6; font-weight: 700; margin-bottom: 10px; }
|
||||
.about-text h2 { font-size: 36px; font-weight: 700; margin-bottom: 30px; color: #333; }
|
||||
.about-text p { font-size: 16px; line-height: 1.8; color: #555; margin-bottom: 40px; }
|
||||
.about-text .btn-more { display: inline-block; padding: 12px 30px; background: #333; color: #fff; text-decoration: none; font-weight: 500; transition: 0.3s; }
|
||||
.about-text .btn-more:hover { background: #0054a6; }
|
||||
.about-img { flex: 1; height: 400px; border-radius: 10px; overflow: hidden; }
|
||||
.about-img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/* 4. 갤러리 */
|
||||
.gallery-section { padding: 80px 15px; }
|
||||
.gallery-list { display: flex; flex-wrap: wrap; gap: 20px; }
|
||||
|
||||
/* 5. 고객센터 & 지도 */
|
||||
.contact-map-section { padding: 80px 0; background: #fff; border-top: 1px solid #eee; }
|
||||
.contact-map-section .container { display: flex; gap: 30px; }
|
||||
.contact-info-box { flex: 0 0 350px; background: #0054a6; color: #fff; padding: 40px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; }
|
||||
.contact-info-box h3 { font-size: 24px; font-weight: 700; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 20px; }
|
||||
.contact-info-box .tel { font-size: 36px; font-weight: 700; margin-bottom: 20px; }
|
||||
.contact-info-box .desc { font-size: 15px; line-height: 1.6; margin-bottom: 30px; opacity: 0.9; }
|
||||
.contact-info-box .btns { display: flex; gap: 10px; }
|
||||
.contact-info-box .btns a { flex: 1; text-align: center; padding: 12px 0; background: rgba(255,255,255,0.2); color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.3); transition: 0.3s; }
|
||||
.contact-info-box .btns a:hover { background: #fff; color: #0054a6; }
|
||||
.map-box { flex: 1; height: 400px; background: #ddd; border-radius: 10px; overflow: hidden; }
|
||||
|
||||
|
||||
|
||||
/* Process Section */
|
||||
.process-section {
|
||||
padding: var(--spacing-sm) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.process-timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.process-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
|
||||
}
|
||||
|
||||
.process-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.process-step.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.process-step:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.main-visual { height: 500px; padding-top: 60px; } /* 모바일 헤더 높이에 맞게 조정 */
|
||||
.main-visual .swiper-button-next,
|
||||
.main-visual .swiper-button-prev {
|
||||
top: calc(50% + 30px);
|
||||
}
|
||||
.visual-title { font-size: 36px; }
|
||||
.visual-subtitle { font-size: 20px; }
|
||||
.product-item { width: 48%; }
|
||||
.about-content { flex-direction: column; }
|
||||
.about-img { width: 100%; height: 300px; }
|
||||
.contact-map-section .container { flex-direction: column; }
|
||||
.contact-info-box { width: 100%; flex: auto; }
|
||||
.map-box { height: 300px; }
|
||||
.main-visual .swiper-button-prev .thumb-wrapper,
|
||||
.main-visual .swiper-button-next .thumb-wrapper {
|
||||
display: none; /* 모바일에서는 썸네일 미리보기 숨김 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.main-visual { height: 400px; }
|
||||
.visual-title { font-size: 28px; }
|
||||
.visual-subtitle { font-size: 16px; }
|
||||
.visual-divider { margin: 20px auto; }
|
||||
.product-item { width: 100%; }
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 513 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 537 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 523 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 561 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 615 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 513 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 537 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 496 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 547 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 679 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 523 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 561 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 562 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 615 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 238 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 512 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 577 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 550 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 716 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,380 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
$skin_url = G5_THEME_URL . '/rb.layout/dnssash_main';
|
||||
$today = G5_TIME_YMD;
|
||||
|
||||
function process_product_positions(&$db_products, $main_visual_data) {
|
||||
if (empty($db_products)) return;
|
||||
|
||||
foreach ($db_products as &$product) {
|
||||
// 기본값 설정 (매칭 실패 시 xPct 기준으로 자동 배정)
|
||||
$product['pos'] = (isset($product['xPct']) && $product['xPct'] < 50) ? 'left' : 'right';
|
||||
// 메인 비주얼 데이터와 비교하여 정확한 위치 찾기
|
||||
foreach ($main_visual_data as $main_item) {
|
||||
if ($product['title'] == $main_item['title']) {
|
||||
if (isset($main_item['pos'])) {
|
||||
$product['pos'] = $main_item['pos'];
|
||||
$product['img_url'] = $main_item['img_url'];
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
unset($product);
|
||||
}
|
||||
|
||||
// 1. 게시판 데이터 로드 시도
|
||||
$bo_table = 'bconstruction'; // 게시판 ID
|
||||
$sql = " select * from {$g5['write_prefix']}$bo_table
|
||||
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
|
||||
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply";
|
||||
//where wr_is_comment = 0 order by wr_id asc ";
|
||||
$result = sql_query($sql);
|
||||
|
||||
$db_products = array();
|
||||
$main_visual_product_data = [
|
||||
["title" => "입면분할창","pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0],
|
||||
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
|
||||
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
|
||||
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
|
||||
["title" => "판넬창", "pos"=>"left","page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
|
||||
|
||||
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
|
||||
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
|
||||
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
|
||||
["title" => "스마트 이중창","pos"=>"right", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
|
||||
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
|
||||
|
||||
];
|
||||
while($row = sql_fetch_array($result)) {
|
||||
|
||||
|
||||
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
|
||||
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
|
||||
$file = sql_fetch($sql_file);
|
||||
|
||||
if (isset($file['bf_file']) && $file['bf_file']) {
|
||||
// 실제 업로드된 파일 경로
|
||||
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
|
||||
} else {
|
||||
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
|
||||
$encoded_filename = rawurlencode($row['wr_subject']);
|
||||
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
|
||||
}
|
||||
$link_set = null;
|
||||
if(isset($row['wr_7']) && !empty($row['wr_7']) && $row['wr_7'] != 0 && $row['wr_7'] != '') {
|
||||
$link_set = get_pretty_url("product", $row['wr_7']);
|
||||
}
|
||||
$db_products[] = array(
|
||||
"title" => $row['wr_subject'],
|
||||
"page" => $row['wr_4'],
|
||||
"desc" => $row['wr_1'],
|
||||
"content" => conv_content($row['wr_content'], 1), // 💡 클릭용 에디터 HTML 원본
|
||||
"xPct" => (float)$row['wr_5'],
|
||||
"yPct" => ((float)$row['wr_6']),
|
||||
"pruimg_url" => $img_url,
|
||||
"img_url" => '',
|
||||
"link" => $link_set, // 💡 게시글 상세 주소 추가
|
||||
);
|
||||
|
||||
}
|
||||
//$db_products =null;
|
||||
|
||||
if (empty($db_products)) {
|
||||
$db_products = [
|
||||
["title" => "입면분할창", "pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0,],
|
||||
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "pruimg_url" => $skin_url . '/images/2.webp',"img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
|
||||
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "pruimg_url" => $skin_url . '/images/3.webp',"img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
|
||||
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "pruimg_url" => $skin_url . '/images/5.webp',"img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
|
||||
["title" => "판넬창", "pos"=>"left", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "pruimg_url" => $skin_url . '/images/4.webp',"img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
|
||||
|
||||
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "pruimg_url" => $skin_url . '/images/6.webp',"img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
|
||||
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창","pruimg_url" => $skin_url . '/images/7.webp', "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
|
||||
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시","pruimg_url" => $skin_url . '/images/8.webp', "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
|
||||
["title" => "스마트 이중창","pos"=>"right", "right" => "24p", "desc" => "보안이 강화된 자동잠금 이중창","pruimg_url" => $skin_url . '/images/9.webp', "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
|
||||
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창","pruimg_url" => $skin_url . '/images/10.webp', "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
|
||||
|
||||
];
|
||||
} else {
|
||||
process_product_positions($db_products, $main_visual_product_data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 2. 특정 방향(left/right)의 제품 아이템들을 출력하는 함수
|
||||
*/
|
||||
function render_product_side($db_products, $side) {
|
||||
if (empty($db_products)) return '';
|
||||
|
||||
$html = '';
|
||||
foreach ($db_products as $item) {
|
||||
// 지정된 방향(left/right)의 아이템만 필터링
|
||||
if ($item['pos'] !== $side) continue;
|
||||
|
||||
// 링크 속성 준비 (prolink 값이 있을 때만 생성)
|
||||
$link_attr = (isset($item['link']) && !empty($item['link'])) ? ' data-prolink="'.$item['link'].'"' : '';
|
||||
|
||||
// HTML 문자열 생성
|
||||
$html .= '
|
||||
<div class="product-item"
|
||||
data-x1="'.$item['xPct'].'"
|
||||
data-y1="'.$item['yPct'].'"
|
||||
data-img="'.$item['pruimg_url'].'"
|
||||
'.$link_attr.'>
|
||||
<div class="product-img">
|
||||
<img src="'.$item['img_url'].'" alt="'.htmlspecialchars($item['title']).'">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3>'.$item['title'].'</h3>
|
||||
<p>'.$item['desc'].'</p>
|
||||
</div>
|
||||
</div>';
|
||||
}
|
||||
return $html;
|
||||
}
|
||||
|
||||
$layout_grid_config = [
|
||||
'top' => [
|
||||
'columns' => [
|
||||
['rows' => 1], // 1번 열: 1행 (통짜)
|
||||
['rows' => 1], // 2번 열: 2행 (상하 분할)
|
||||
]
|
||||
],
|
||||
// 'middle' => [
|
||||
// 'columns' => [
|
||||
// ['rows' => 2], // 1번 열: 2행
|
||||
// ['rows' => 2], // 2번 열: 2행
|
||||
// ],
|
||||
//
|
||||
// ],
|
||||
// 'bottom' => [
|
||||
// 'columns' => [
|
||||
// ['rows' => 1] // 1번 열: 1행 (통짜)
|
||||
// ]
|
||||
// ]
|
||||
];
|
||||
|
||||
// 테마 스타일 및 스크립트 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products2.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/main.css?ver='.G5_CSS_VER.'">', 0);
|
||||
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
|
||||
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
|
||||
//add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js?ver='.G5_CSS_VER.'"></script>', 0);
|
||||
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products2.js?ver='.G5_CSS_VER.'"></script>', 0);
|
||||
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
|
||||
?>
|
||||
<div class="main-container">
|
||||
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
|
||||
<section class="map-main-visual">
|
||||
<div class="visual-slider swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<?php
|
||||
$main_visual_data = [
|
||||
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
|
||||
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
|
||||
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
|
||||
];
|
||||
|
||||
foreach ($main_visual_data as $item) {
|
||||
?>
|
||||
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
|
||||
<a href="#" class="map-visual-link">
|
||||
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
|
||||
<div class="map-visual-layer-wrap">
|
||||
<div class="visual-layer-item">
|
||||
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
|
||||
<span class="map-visual-divider"></span>
|
||||
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
|
||||
<div class="swiper-button-prev">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="product-section">
|
||||
<div class="product-side left">
|
||||
<?php echo render_product_side( $db_products, 'left');?>
|
||||
</div>
|
||||
|
||||
<div class="product-main">
|
||||
<img src='<?php echo $skin_url?>/images/main.webp' alt="메인 사진">
|
||||
<div class="product-hotspot"></div>
|
||||
</div>
|
||||
|
||||
<div class="product-side right">
|
||||
<?php echo render_product_side( $db_products, 'right');?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
|
||||
<div class="main-visual">
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<main class="layout-main-content1">
|
||||
|
||||
<?php foreach ($layout_grid_config as $row_name => $row_config): ?>
|
||||
<!-- 행(Row) 시작 -->
|
||||
<div class="layout-row layout-row-<?php echo $row_name; ?>">
|
||||
|
||||
<?php
|
||||
$columns = $row_config['columns'];
|
||||
$col_index = 1;
|
||||
foreach ($columns as $col_config):
|
||||
$row_count = isset($col_config['rows']) ? $col_config['rows'] : 1;
|
||||
?>
|
||||
<!-- 열(Column) 시작 -->
|
||||
<div class="layout-col layout-col-<?php echo $col_index; ?>">
|
||||
<?php for ($r = 1; $r <= $row_count; $r++): ?>
|
||||
<!-- 내부 행(Inner Row) 시작 -->
|
||||
<div class="flex_box layout-inner-row" data-layout="main-content-<?php echo $row_name; ?>-col<?php echo $col_index; ?>-row<?php echo $r; ?>">
|
||||
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php
|
||||
$col_index++;
|
||||
endforeach;
|
||||
?>
|
||||
|
||||
</div>
|
||||
<!-- 행(Row) 끝 -->
|
||||
<?php endforeach; ?>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
<section class="min-h-screen flex flex-col items-center justify-center p-6">
|
||||
<div class="mb-10 text-center">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
|
||||
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
|
||||
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
|
||||
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
|
||||
최고의 품질과 안정적인 A/S를 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<section class="hero_container">
|
||||
<div class="content_inner">
|
||||
|
||||
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
|
||||
<div class="text_area">
|
||||
<p class="label_blue">SMART WINDOW ORDERING</p>
|
||||
<h1 class="main_title">
|
||||
창호의 새로운 기준,<br>
|
||||
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
<p class="sub_description">
|
||||
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
|
||||
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
|
||||
</p>
|
||||
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
|
||||
|
||||
<div class="main_action_row">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
|
||||
<div class="btn_icon">🏢</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 온라인 주문</strong>
|
||||
<p>실시간 직접 견적 및 주문 확정</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
|
||||
<div class="btn_icon">👨🔧</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 전문가 부르기</strong>
|
||||
<p>방문 실측 및 맞춤 상담 신청</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floating_as_badge">
|
||||
<p>전국 대리점망</p>
|
||||
<strong>A/S 10년 보장</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const productsData = <?php echo json_encode($db_products); ?>;
|
||||
if (typeof initProducts === 'function') {
|
||||
initProducts(productsData);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// .map-main-visual 안에 있는 슬라이더만 타겟팅
|
||||
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
slideChangeTransitionEnd: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function updateNavThumbs(swiper) {
|
||||
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
|
||||
var slides = swiper.slides;
|
||||
var activeIndex = swiper.activeIndex;
|
||||
|
||||
// 이전 슬라이드와 다음 슬라이드 요소 추출
|
||||
var prevSlide = slides[activeIndex - 1];
|
||||
var nextSlide = slides[activeIndex + 1];
|
||||
|
||||
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
|
||||
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
|
||||
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
|
||||
|
||||
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
|
||||
if (prevThumb) {
|
||||
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
|
||||
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
|
||||
}
|
||||
|
||||
if (nextThumb) {
|
||||
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
|
||||
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,248 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
$skin_url = G5_THEME_URL . '/skin/page/products_main';
|
||||
$today = G5_TIME_YMD;
|
||||
|
||||
// 1. 게시판 데이터 로드 시도
|
||||
$bo_table = 'bconstruction'; // 게시판 ID
|
||||
$sql = " select * from {$g5['write_prefix']}$bo_table
|
||||
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
|
||||
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply LIMIT 1 ";
|
||||
//where wr_is_comment = 0 order by wr_id asc ";
|
||||
$result = sql_query($sql);
|
||||
|
||||
$db_products = array();
|
||||
while($row = sql_fetch_array($result)) {
|
||||
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
|
||||
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
|
||||
$file = sql_fetch($sql_file);
|
||||
|
||||
if (isset($file['bf_file']) && $file['bf_file']) {
|
||||
// 실제 업로드된 파일 경로
|
||||
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
|
||||
} else {
|
||||
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
|
||||
$encoded_filename = rawurlencode($row['wr_subject']);
|
||||
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
|
||||
}
|
||||
|
||||
$db_products[] = array(
|
||||
"title" => $row['wr_subject'],
|
||||
"page" => $row['wr_4'],
|
||||
"desc" => strip_tags($row['wr_content']),
|
||||
"xPct" => (float)$row['wr_5'],
|
||||
"yPct" => (float)$row['wr_6'],
|
||||
"img_url" => $img_url
|
||||
);
|
||||
}
|
||||
if (empty($db_products)) {
|
||||
$db_products = [
|
||||
["title" => "입면분할창", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/입면분할창' . '.jpg', 'xPct'=> 44.5, 'yPct'=> 11.4],
|
||||
["title" => "프로젝트창", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/프로젝트창' . '.jpg', "xPct" => 29.4, "yPct" => 22.3],
|
||||
["title" => "소형단창 _ 이중창", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/소형단창 _ 이중창' . '.jpg', "xPct" => 15.4, "yPct" => 30.8],
|
||||
["title" => "이끌림 도어", "page" => "도어", "desc" => "단열 성능이 뛰어난 시스템 도어", "img_url" => $skin_url . '/images/이끌림 도어' . '.jpg', "xPct" => 31.9, "yPct" => 43.8],
|
||||
["title" => "이끌림 중문", "page" => "중문", "desc" => "소음 및 미세먼지 차단 슬림 중문", "img_url" => $skin_url . '/images/이끌림 중문' . '.jpg', "xPct" => 32.3, "yPct"=> 57.4],
|
||||
["title" => "이끌림 마루", "page" => "마루", "desc" => "친환경 온돌 마루 시스템", "img_url" => $skin_url . '/images/이끌림 마루' . '.jpg', "xPct" => 57.1, "yPct" => 24.2],
|
||||
["title" => "대형단창", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/대형단창' . '.jpg', "xPct" => 62.2, "yPct" => 18.1],
|
||||
["title" => "대형이중창", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/대형이중창' . '.jpg', "xPct" => 62.2, "yPct" => 18.1],
|
||||
["title" => "스마트 발코니 전용창", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/스마트 발코니 전용창' . '.jpg', "xPct" => 62.2, "yPct" => 18.1],
|
||||
["title" => "이끌림 몰딩", "page" => "몰딩", "desc" => "고급 인테리어 마감재", "img_url" => $skin_url . '/images/이끌림 몰딩' . '.jpg', "xPct" => 70.1, "yPct" => 37.4],
|
||||
|
||||
["title" => "스마트 이중창", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/스마트 이중창' . '.jpg', "xPct" => 81.8, "yPct" => 38.5],
|
||||
["title" => "발코니 확장 이중창", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/발코니 확장 이중창' . '.jpg', "xPct" => 81.8, "yPct" => 38.5],
|
||||
["title" => "판넬창", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/판넬창' . '.jpg', "xPct" => 5.7, "yPct" => 91.4],
|
||||
["title" => "학교창", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/학교창' . '.jpg', "xPct" => 21.5, "yPct" => 90.9],
|
||||
|
||||
];
|
||||
}
|
||||
|
||||
// 테마 스타일 및 스크립트 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
|
||||
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
|
||||
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
|
||||
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js_baccc"></script>', 0);
|
||||
?>
|
||||
<div class="main-container">
|
||||
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
|
||||
<section class="map-main-visual">
|
||||
<div class="visual-slider swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<?php
|
||||
var_dump($sql);
|
||||
$main_visual_data = [
|
||||
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
|
||||
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
|
||||
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
|
||||
];
|
||||
|
||||
foreach ($main_visual_data as $item) {
|
||||
?>
|
||||
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
|
||||
<a href="#" class="map-visual-link">
|
||||
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
|
||||
<div class="map-visual-layer-wrap">
|
||||
<div class="visual-layer-item">
|
||||
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
|
||||
<span class="map-visual-divider"></span>
|
||||
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
|
||||
<div class="swiper-button-prev">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
<div class="main-visual">
|
||||
<section class="min-h-screen flex flex-col items-center justify-center p-6">
|
||||
<div class="mb-10 text-center">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
|
||||
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
|
||||
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
|
||||
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
|
||||
최고의 품질과 안정적인 A/S를 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
<section class="product-map-section py-10 bg-[#0b0f1a]">
|
||||
<div class="mb-10 text-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex justify-center">
|
||||
<div class="map-wrapper">
|
||||
<div class="map-container" id="main-map" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash_main/images/메인.png');">
|
||||
<div id="hotspot-layer"></div>
|
||||
</div>
|
||||
<!-- <div id="coord-display" class="coord-guide">COORD - X: 0.0%, Y: 0.0%</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 그룹 미리보기 팝업 레이어 -->
|
||||
<div id="hover-preview">
|
||||
<div class="flex items-center gap-3 mb-5 border-b border-white/10 pb-4">
|
||||
<i class="fa-solid fa-box-open text-blue-500"></i>
|
||||
<h2 class="text-white font-bold text-lg">상세 정보</h2>
|
||||
</div>
|
||||
<div class="products-grid" id="preview-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="hero_container">
|
||||
<div class="content_inner">
|
||||
|
||||
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
|
||||
<div class="text_area">
|
||||
<p class="label_blue">SMART WINDOW ORDERING</p>
|
||||
<h1 class="main_title">
|
||||
창호의 새로운 기준,<br>
|
||||
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
<p class="sub_description">
|
||||
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
|
||||
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
|
||||
</p>
|
||||
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
|
||||
|
||||
<div class="main_action_row">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
|
||||
<div class="btn_icon">🏢</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 온라인 주문</strong>
|
||||
<p>실시간 직접 견적 및 주문 확정</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
|
||||
<div class="btn_icon">👨🔧</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 전문가 부르기</strong>
|
||||
<p>방문 실측 및 맞춤 상담 신청</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floating_as_badge">
|
||||
<p>전국 대리점망</p>
|
||||
<strong>A/S 10년 보장</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const productsData = <?php echo json_encode($db_products); ?>;
|
||||
if (typeof initProducts === 'function') {
|
||||
initProducts(productsData);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// .map-main-visual 안에 있는 슬라이더만 타겟팅
|
||||
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
slideChangeTransitionEnd: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function updateNavThumbs(swiper) {
|
||||
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
|
||||
var slides = swiper.slides;
|
||||
var activeIndex = swiper.activeIndex;
|
||||
|
||||
// 이전 슬라이드와 다음 슬라이드 요소 추출
|
||||
var prevSlide = slides[activeIndex - 1];
|
||||
var nextSlide = slides[activeIndex + 1];
|
||||
|
||||
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
|
||||
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
|
||||
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
|
||||
|
||||
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
|
||||
if (prevThumb) {
|
||||
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
|
||||
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
|
||||
}
|
||||
|
||||
if (nextThumb) {
|
||||
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
|
||||
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,270 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
$skin_url = G5_THEME_URL . '/rb.layout/dnssash_main';
|
||||
$today = G5_TIME_YMD;
|
||||
|
||||
// 1. 게시판 데이터 로드 시도
|
||||
$bo_table = 'bconstruction'; // 게시판 ID
|
||||
$sql = " select * from {$g5['write_prefix']}$bo_table
|
||||
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
|
||||
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply";
|
||||
//where wr_is_comment = 0 order by wr_id asc ";
|
||||
$result = sql_query($sql);
|
||||
|
||||
$db_products = array();
|
||||
while($row = sql_fetch_array($result)) {
|
||||
|
||||
|
||||
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
|
||||
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
|
||||
$file = sql_fetch($sql_file);
|
||||
|
||||
if (isset($file['bf_file']) && $file['bf_file']) {
|
||||
// 실제 업로드된 파일 경로
|
||||
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
|
||||
} else {
|
||||
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
|
||||
$encoded_filename = rawurlencode($row['wr_subject']);
|
||||
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
|
||||
}
|
||||
$link_set = null;
|
||||
if(isset($row['wr_7']) && !empty($row['wr_7']) && $row['wr_7'] != 0 && $row['wr_7'] != '') {
|
||||
$link_set = get_pretty_url("product", $row['wr_7']);
|
||||
}
|
||||
$db_products[] = array(
|
||||
"title" => $row['wr_subject'],
|
||||
"page" => $row['wr_4'],
|
||||
"desc" => $row['wr_1'],
|
||||
"content" => conv_content($row['wr_content'], 1), // 💡 클릭용 에디터 HTML 원본
|
||||
"xPct" => (float)$row['wr_5'],
|
||||
"yPct" => ((float)$row['wr_6']),
|
||||
"img_url" => $img_url,
|
||||
"link" => $link_set, // 💡 게시글 상세 주소 추가
|
||||
);
|
||||
|
||||
}
|
||||
if (empty($db_products)) {
|
||||
$db_products = [
|
||||
["title" => "입면분할창", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/1.jpg', 'xPct'=> 63.0, 'yPct'=> 24.0],
|
||||
|
||||
["title" => "프로젝트창", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/2' . '.jpg', "xPct" => 71.0, "yPct" => 30.3],
|
||||
|
||||
["title" => "소형단창,이중창", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/3' . '.jpg', "xPct" => 80.7, "yPct" => 43.6],
|
||||
["title" => "학교창", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/5' . '.jpg', "xPct" => 78.7, "yPct" => 41.4],
|
||||
|
||||
["title" => "대형이중창", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/7' . '.jpg', "xPct" => 36.9, "yPct" => 29.8],
|
||||
|
||||
["title" => "대형단창", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/6' . '.jpg', "xPct" => 25.6, "yPct" => 36.0],
|
||||
["title" => "스마트 발코니 전용창", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/8' . '.jpg', "xPct" => 23.0, "yPct" => 37.8],
|
||||
|
||||
|
||||
["title" => "스마트 이중창", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/9' . '.jpg', "xPct" => 46.7, "yPct" => 22.8],
|
||||
["title" => "발코니 확장 이중창", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/10' . '.jpg', "xPct" => 50.4, "yPct" => 20.8],
|
||||
|
||||
// ["title" => "판넬창", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/판넬창' . '.jpg', "xPct" => 5.7, "yPct" => 91.4],
|
||||
];
|
||||
}
|
||||
|
||||
// 테마 스타일 및 스크립트 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
|
||||
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
|
||||
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
|
||||
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js"></script>', 0);
|
||||
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
|
||||
?>
|
||||
<div class="main-container">
|
||||
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
|
||||
<section class="map-main-visual">
|
||||
<div class="visual-slider swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<?php
|
||||
$main_visual_data = [
|
||||
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
|
||||
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
|
||||
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
|
||||
];
|
||||
|
||||
foreach ($main_visual_data as $item) {
|
||||
?>
|
||||
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
|
||||
<a href="#" class="map-visual-link">
|
||||
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
|
||||
<div class="map-visual-layer-wrap">
|
||||
<div class="visual-layer-item">
|
||||
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
|
||||
<span class="map-visual-divider"></span>
|
||||
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
|
||||
<div class="swiper-button-prev">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="main-container">
|
||||
|
||||
<div class="main-visual">
|
||||
|
||||
<section class="min-h-screen flex flex-col items-center justify-center p-6">
|
||||
<div class="mb-10 text-center">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
|
||||
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
|
||||
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
|
||||
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
|
||||
최고의 품질과 안정적인 A/S를 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
<section class="product-map-section py-10 bg-[#0b0f1a]">
|
||||
<div class="mb-10 text-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex justify-center">
|
||||
<div class="map-wrapper">
|
||||
<!-- 기존 map-container 부분을 아래와 같이 수정 -->
|
||||
<div class="map-container" id="main-map" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash_main/images/main.png');">
|
||||
<div id="hotspot-layer">
|
||||
<?php foreach ($db_products as $index => $p) { ?>
|
||||
<div class="hotspot"
|
||||
style="left: <?php echo $p['xPct']; ?>%; top: <?php echo $p['yPct']; ?>%;"
|
||||
data-index="<?php echo $index; ?>"
|
||||
title="<?php echo $p['title']; ?>">
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div id="coord-display" class="coord-guide">COORD - X: 0.0%, Y: 0.0%</div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 그룹 미리보기 팝업 레이어 -->
|
||||
<div id="hover-preview">
|
||||
<div class="flex items-center gap-3 mb-5 border-b border-white/10 pb-4">
|
||||
<i class="fa-solid fa-box-open text-blue-500"></i>
|
||||
<h2 class="text-white font-bold text-lg">상세 정보</h2>
|
||||
</div>
|
||||
<div class="products-grid" id="preview-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="hero_container">
|
||||
<div class="content_inner">
|
||||
|
||||
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
|
||||
<div class="text_area">
|
||||
<p class="label_blue">SMART WINDOW ORDERING</p>
|
||||
<h1 class="main_title">
|
||||
창호의 새로운 기준,<br>
|
||||
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
<p class="sub_description">
|
||||
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
|
||||
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
|
||||
</p>
|
||||
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
|
||||
|
||||
<div class="main_action_row">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
|
||||
<div class="btn_icon">🏢</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 온라인 주문</strong>
|
||||
<p>실시간 직접 견적 및 주문 확정</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
|
||||
<div class="btn_icon">👨🔧</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 전문가 부르기</strong>
|
||||
<p>방문 실측 및 맞춤 상담 신청</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floating_as_badge">
|
||||
<p>전국 대리점망</p>
|
||||
<strong>A/S 10년 보장</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const productsData = <?php echo json_encode($db_products); ?>;
|
||||
if (typeof initProducts === 'function') {
|
||||
initProducts(productsData);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// .map-main-visual 안에 있는 슬라이더만 타겟팅
|
||||
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
slideChangeTransitionEnd: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function updateNavThumbs(swiper) {
|
||||
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
|
||||
var slides = swiper.slides;
|
||||
var activeIndex = swiper.activeIndex;
|
||||
|
||||
// 이전 슬라이드와 다음 슬라이드 요소 추출
|
||||
var prevSlide = slides[activeIndex - 1];
|
||||
var nextSlide = slides[activeIndex + 1];
|
||||
|
||||
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
|
||||
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
|
||||
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
|
||||
|
||||
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
|
||||
if (prevThumb) {
|
||||
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
|
||||
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
|
||||
}
|
||||
|
||||
if (nextThumb) {
|
||||
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
|
||||
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,369 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
$skin_url = G5_THEME_URL . '/rb.layout/dnssash_main';
|
||||
$today = G5_TIME_YMD;
|
||||
|
||||
function process_product_positions(&$db_products, $main_visual_data) {
|
||||
if (empty($db_products)) return;
|
||||
|
||||
foreach ($db_products as &$product) {
|
||||
// 기본값 설정 (매칭 실패 시 xPct 기준으로 자동 배정)
|
||||
$product['pos'] = (isset($product['xPct']) && $product['xPct'] < 50) ? 'left' : 'right';
|
||||
|
||||
// 메인 비주얼 데이터와 비교하여 정확한 위치 찾기
|
||||
foreach ($main_visual_data as $main_item) {
|
||||
if ($product['title'] === $main_item['title']) {
|
||||
if (isset($main_item['pos'])) {
|
||||
$product['pos'] = $main_item['pos'];
|
||||
$product['img_url'] = $main_item['img_url'];
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
unset($product);
|
||||
}
|
||||
|
||||
// 1. 게시판 데이터 로드 시도
|
||||
$bo_table = 'bconstruction'; // 게시판 ID
|
||||
$sql = " select * from {$g5['write_prefix']}$bo_table
|
||||
WHERE wr_is_comment = 0 AND wr_10 = '0' AND (wr_9 = 'IMMEDIATE' OR (wr_9 = 'RESERVED' AND '{$today}' BETWEEN wr_2 AND wr_3))
|
||||
ORDER BY CASE wr_1 WHEN 'IMMEDIATE' THEN 1 ELSE 2 END, wr_num, wr_reply";
|
||||
//where wr_is_comment = 0 order by wr_id asc ";
|
||||
$result = sql_query($sql);
|
||||
|
||||
$db_products = array();
|
||||
$main_visual_product_data = [
|
||||
["title" => "입면분할창","pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0],
|
||||
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
|
||||
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
|
||||
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
|
||||
["title" => "판넬창", "pos"=>"left","page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
|
||||
|
||||
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
|
||||
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창", "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
|
||||
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시", "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
|
||||
["title" => "스마트 이중창","pos"=>"right", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창", "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
|
||||
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창", "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
|
||||
|
||||
];
|
||||
while($row = sql_fetch_array($result)) {
|
||||
|
||||
|
||||
// 💡 [수정] 게시판의 첫 번째 첨부파일(bf_no = 0)을 가져옵니다.
|
||||
$sql_file = " select bf_file from {$g5['board_file_table']} where bo_table = '{$bo_table}' and wr_id = '{$row['wr_id']}' and bf_no = 0 ";
|
||||
$file = sql_fetch($sql_file);
|
||||
|
||||
if (isset($file['bf_file']) && $file['bf_file']) {
|
||||
// 실제 업로드된 파일 경로
|
||||
$img_url = G5_DATA_URL . '/file/' . $bo_table . '/' . $file['bf_file'];
|
||||
} else {
|
||||
// 파일이 없을 경우 기본 이미지 또는 기존 방식 사용 (fallback)
|
||||
$encoded_filename = rawurlencode($row['wr_subject']);
|
||||
$img_url = $skin_url . '/images/' . $encoded_filename . '.png';
|
||||
}
|
||||
$link_set = null;
|
||||
if(isset($row['wr_7']) && !empty($row['wr_7']) && $row['wr_7'] != 0 && $row['wr_7'] != '') {
|
||||
$link_set = get_pretty_url("product", $row['wr_7']);
|
||||
}
|
||||
$db_products[] = array(
|
||||
"title" => $row['wr_subject'],
|
||||
"page" => $row['wr_4'],
|
||||
"desc" => $row['wr_1'],
|
||||
"content" => conv_content($row['wr_content'], 1), // 💡 클릭용 에디터 HTML 원본
|
||||
"xPct" => (float)$row['wr_5'],
|
||||
"yPct" => ((float)$row['wr_6']),
|
||||
"pruimg_url" => $img_url,
|
||||
"img_url" => '',
|
||||
"link" => $link_set, // 💡 게시글 상세 주소 추가
|
||||
);
|
||||
|
||||
}
|
||||
//$db_products =null;
|
||||
|
||||
if (empty($db_products)) {
|
||||
$db_products = [
|
||||
["title" => "입면분할창", "pos"=>"left", "page" => "20p", "desc" => "조망권과 환기를 극대화한 시스템", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/1.webp', 'xPct'=> 63.0, 'yPct'=> 24.0,],
|
||||
["title" => "프로젝트창","pos"=>"left", "page" => "48p", "desc" => "기밀성이 우수한 상부 개폐식 창호", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/2' . '.webp', "xPct" => 71.0, "yPct" => 30.3],
|
||||
["title" => "소형단창,이중창","pos"=>"left", "page" => "36p", "desc" => "침실 소형 전용 슬라이딩 창호", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/3' . '.webp', "xPct" => 80.7, "yPct" => 43.6],
|
||||
["title" => "학교창","pos"=>"left", "page" => "40p", "desc" => "안전 기능이 강화된 환기창", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/5' . '.webp', "xPct" => 78.7, "yPct" => 41.4],
|
||||
["title" => "판넬창", "pos"=>"left", "page" => "44p", "desc" => "벽체 마감용 내구성 우수 창호", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/4' . '.webp', "xPct" => 5.7, "yPct" => 91.4],
|
||||
|
||||
["title" => "대형단창","pos"=>"right", "page" => "32p", "desc" => "발코니 전용 단열 슬라이딩 단창", "pruimg_url" => $skin_url . '/images/1.webp',"img_url" => $skin_url . '/images/6' . '.webp', "xPct" => 25.6, "yPct" => 36.0],
|
||||
["title" => "대형이중창","pos"=>"right", "page" => "28p", "desc" => "방음 및 풍압 견딤력이 우수한 이중창","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/7' . '.webp', "xPct" => 36.9, "yPct" => 29.8],
|
||||
["title" => "스마트 발코니 전용창","pos"=>"right", "page" => "12p", "desc" => "외창 전용 고기밀 샷시","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/8' . '.webp', "xPct" => 23.0, "yPct" => 37.8],
|
||||
["title" => "스마트 이중창","pos"=>"right", "page" => "24p", "desc" => "보안이 강화된 자동잠금 이중창","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/9' . '.webp', "xPct" => 46.7, "yPct" => 22.8],
|
||||
["title" => "발코니 확장 이중창","pos"=>"right", "page" => "16p", "desc" => "거실 확장용 고단열 이중창","pruimg_url" => $skin_url . '/images/1.webp', "img_url" => $skin_url . '/images/10' . '.webp', "xPct" => 50.4, "yPct" => 20.8],
|
||||
|
||||
];
|
||||
} else {
|
||||
process_product_positions($db_products, $main_visual_product_data);
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. 제품 데이터에 위치(pos) 정보 매핑 함수
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 2. 특정 방향(left/right)의 제품 아이템들을 출력하는 함수
|
||||
*/
|
||||
function render_product_side($db_products, $side) {
|
||||
if (empty($db_products)) return;
|
||||
|
||||
foreach ($db_products as $item) {
|
||||
// 지정된 방향의 아이템만 출력
|
||||
if ($item['pos'] !== $side) continue;
|
||||
|
||||
// 링크 속성 준비
|
||||
$link_attr = (isset($item['link']) && $item['link']) ? ' data-prolink="'.$item['link'].'"' : '';
|
||||
?>
|
||||
<div class="product-item"
|
||||
data-x1="<?= $item['xPct'] ?>"
|
||||
data-y1="<?= $item['yPct'] ?>"
|
||||
data-img="<?= $item['pruimg_url'] ?>"
|
||||
<?= $link_attr ?>>
|
||||
<div class="product-img">
|
||||
<img src="<?= $item['img_url'] ?>" alt="<?= htmlspecialchars($item['title']) ?>">
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3><?= $item['title'] ?></h3>
|
||||
<p><?= $item['desc'] ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
|
||||
var_dump($db_products);
|
||||
// 테마 스타일 및 스크립트 로드
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/products2.css?ver='.G5_CSS_VER.'">', 0);
|
||||
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/css/style.css?ver='.G5_CSS_VER.'">', 0);
|
||||
add_stylesheet('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />', 0);
|
||||
add_javascript('<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>', 0);
|
||||
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products.js?ver='.G5_CSS_VER.'"></script>', 0);
|
||||
add_javascript('<script src="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/js/products2.js?ver='.G5_CSS_VER.'"></script>', 0);
|
||||
include_once(G5_ADMIN_PATH . '/order_manage/components/_expert_visit_popups.php');
|
||||
?>
|
||||
<div class="main-container">
|
||||
<!-- 1. 메인 비주얼 섹션 (클래스명 변경됨) -->
|
||||
<section class="map-main-visual">
|
||||
<div class="visual-slider swiper-container">
|
||||
<div class="swiper-wrapper">
|
||||
<?php
|
||||
$main_visual_data = [
|
||||
['bg' => 'back20.jpg', 'subtitle' => '이끌림으로 품격을 높이다!'],
|
||||
['bg' => 'back014.jpg', 'subtitle' => '유려하고 모던한 디자인으로<br>공간의 품격을 한단계 높여줍니다.'],
|
||||
['bg' => 'back012.jpg', 'subtitle' => '다년간의 축적된 노하우와 기술력으로<br>최상의 만족을 드립니다.']
|
||||
];
|
||||
|
||||
foreach ($main_visual_data as $item) {
|
||||
?>
|
||||
<div class="swiper-slide" data-thumb-bg="<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>">
|
||||
<a href="#" class="map-visual-link">
|
||||
<div class="map-visual-img" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash/img/<?php echo $item['bg']; ?>');"></div>
|
||||
<div class="map-visual-layer-wrap">
|
||||
<div class="visual-layer-item">
|
||||
<h2 class="map-visual-title">PREMIUM DESIGN</h2>
|
||||
<span class="map-visual-divider"></span>
|
||||
<p class="map-visual-subtitle"><?php echo $item['subtitle']; ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
|
||||
<!-- 네비게이션 버튼 (클래스명 변경됨) -->
|
||||
<div class="swiper-button-prev">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
<div class="swiper-button-next">
|
||||
<div class="map-thumb-wrapper"><div class="map-thumb"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="product-section">
|
||||
<div class="product-side left">
|
||||
<?php for($i=0; $i<$db_products; $i++) { $item = $db_products[$i]; $itemp = $main_visual_product_data[$i]; ?>
|
||||
<div class="product-item" data-x1="<?= $item['xPct'] ?>" data-y1="<?= $item['yPct'] ?>" data-img="<?= $item['pruimg_url'] ?>" <?php if (isset($item['link']) && $item['link']) { ?> data-prolink="<?= $item['link'] ?>" <?php } ?> >
|
||||
<!-- <div class="product-item" data-x1="44.8" data-y1="22.9" data-x2="52.7" data-y2="21.7">-->
|
||||
<div class="product-img"><img src="<?= $item['img_url'] ?>" alt="<?= $item['title'] ?>"></div>
|
||||
<div class="product-info"><h3><?= $item['title'] ?></h3><p><?= $item['desc'] ?></p></div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
|
||||
<div class="product-main">
|
||||
<img src='<?php echo $skin_url?>/images/main.webp' alt="메인 사진">
|
||||
<div class="product-hotspot"></div>
|
||||
</div>
|
||||
|
||||
<div class="product-side right">
|
||||
<?php for($i=5; $i<10; $i++) { $item = $db_products[$i]; ?>
|
||||
<div class="product-item" data-x1="<?= $item['xPct'] ?>" data-y1="<?= $item['yPct'] ?>" data-img="<?= $item['pruimg_url'] ?>" <?php if (isset($item['link']) && $item['link']) { ?> data-prolink="<?= $item['link'] ?>" <?php } ?>>
|
||||
<div class="product-img"><img src="<?= $item['img_url'] ?>" alt="<?= $item['title'] ?>"></div>
|
||||
<div class="product-info"><h3><?= $item['title'] ?></h3><p><?= $item['desc'] ?></p></div>
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="main-container">
|
||||
|
||||
<div class="main-visual">
|
||||
|
||||
<section class="min-h-screen flex flex-col items-center justify-center p-6">
|
||||
<div class="mb-10 text-center">
|
||||
<h1 class="text-3xl md:text-4xl font-bold text-white mb-3">
|
||||
고객의 공간을 완성하는 프리미엄 창호 시스템 <span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
|
||||
<p class="text-gray-300 text-sm md:text-base max-w-2xl mx-auto leading-relaxed">
|
||||
고객의 생활 공간을 고려한 설계와 정밀한 기술력으로<br>
|
||||
최고의 품질과 안정적인 A/S를 제공합니다.
|
||||
</p>
|
||||
</div>
|
||||
<section class="product-map-section py-10 bg-[#0b0f1a]">
|
||||
<div class="mb-10 text-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<div class="flex justify-center">
|
||||
<div class="map-wrapper">
|
||||
<!-- 기존 map-container 부분을 아래와 같이 수정 -->
|
||||
<div class="map-container" id="main-map" style="background-image: url('<?php echo G5_THEME_URL ?>/rb.layout/dnssash_main/images/main.webp');">
|
||||
<div id="hotspot-layer">
|
||||
<?php foreach ($db_products as $index => $p) { ?>
|
||||
<div class="hotspot"
|
||||
style="left: <?php echo $p['xPct']; ?>%; top: <?php echo $p['yPct']; ?>%;"
|
||||
data-index="<?php echo $index; ?>"
|
||||
title="<?php echo $p['title']; ?>">
|
||||
</div>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div>
|
||||
<div id="coord-display" class="coord-guide">COORD - X: 0.0%, Y: 0.0%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 그룹 미리보기 팝업 레이어 -->
|
||||
<div id="hover-preview">
|
||||
<div class="flex items-center gap-3 mb-5 border-b border-white/10 pb-4">
|
||||
<i class="fa-solid fa-box-open text-blue-500"></i>
|
||||
<h2 class="text-white font-bold text-lg">상세 정보</h2>
|
||||
</div>
|
||||
<div class="products-grid" id="preview-grid"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="hero_container">
|
||||
<div class="content_inner">
|
||||
|
||||
<!-- <img src="--><?php //echo G5_THEME_URL ?><!--/rb.layout/dnssash/img/main1.png" alt="메인 배경 이미지" class="main_bg_img">-->
|
||||
<div class="text_area">
|
||||
<p class="label_blue">SMART WINDOW ORDERING</p>
|
||||
<h1 class="main_title">
|
||||
창호의 새로운 기준,<br>
|
||||
<span class="highlight_blue">이끌림샤시</span>로 시작하세요
|
||||
</h1>
|
||||
<p class="sub_description">
|
||||
복잡한 창호 교체, 이제 온라인 견적으로 투명하게.<br>
|
||||
고품질 자재와 전문가의 손길을 클릭 한 번으로 만나보세요.
|
||||
</p>
|
||||
<!-- 전문가 상담 및 예약 버튼 (상단 오른쪽) -->
|
||||
|
||||
<div class="main_action_row">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=order" class="btn_box white" >
|
||||
<div class="btn_icon">🏢</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 온라인 주문</strong>
|
||||
<p>실시간 직접 견적 및 주문 확정</p>
|
||||
</div>
|
||||
</a>
|
||||
<div class="btn_box white" onclick="openExpertVisitPopup(<?php /*echo $wr_id; */?>)">
|
||||
<div class="btn_icon">👨🔧</div>
|
||||
<div class="btn_txt">
|
||||
<strong>창호 전문가 부르기</strong>
|
||||
<p>방문 실측 및 맞춤 상담 신청</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floating_as_badge">
|
||||
<p>전국 대리점망</p>
|
||||
<strong>A/S 10년 보장</strong>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const productsData = <?php echo json_encode($db_products); ?>;
|
||||
if (typeof initProducts === 'function') {
|
||||
initProducts(productsData);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// .map-main-visual 안에 있는 슬라이더만 타겟팅
|
||||
var mainVisualSwiper = new Swiper('.map-main-visual .visual-slider', {
|
||||
loop: true,
|
||||
autoplay: {
|
||||
delay: 5000,
|
||||
disableOnInteraction: false,
|
||||
},
|
||||
pagination: {
|
||||
el: '.swiper-pagination',
|
||||
clickable: true,
|
||||
},
|
||||
navigation: {
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
},
|
||||
on: {
|
||||
init: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
slideChangeTransitionEnd: function () {
|
||||
updateNavThumbs(this);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
function updateNavThumbs(swiper) {
|
||||
// 루프 모드에서 슬라이더의 실제 DOM 요소를 기반으로 이전/다음 슬라이드 찾기
|
||||
var slides = swiper.slides;
|
||||
var activeIndex = swiper.activeIndex;
|
||||
|
||||
// 이전 슬라이드와 다음 슬라이드 요소 추출
|
||||
var prevSlide = slides[activeIndex - 1];
|
||||
var nextSlide = slides[activeIndex + 1];
|
||||
|
||||
// 만약 슬라이드가 존재한다면 썸네일 주소 가져오기
|
||||
var prevThumb = prevSlide ? prevSlide.getAttribute('data-thumb-bg') : '';
|
||||
var nextThumb = nextSlide ? nextSlide.getAttribute('data-thumb-bg') : '';
|
||||
|
||||
// 수정된 클래스명 .map-thumb 을 찾아서 배경 이미지 적용
|
||||
if (prevThumb) {
|
||||
var prevTarget = swiper.navigation.prevEl.querySelector('.map-thumb');
|
||||
if (prevTarget) prevTarget.style.backgroundImage = 'url(' + prevThumb + ')';
|
||||
}
|
||||
|
||||
if (nextThumb) {
|
||||
var nextTarget = swiper.navigation.nextEl.querySelector('.map-thumb');
|
||||
if (nextTarget) nextTarget.style.backgroundImage = 'url(' + nextThumb + ')';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,99 @@
|
||||
function initProducts(productsData) {
|
||||
const preview = document.getElementById('hover-preview');
|
||||
const previewGrid = document.getElementById('preview-grid');
|
||||
const hotspotLayer = document.getElementById('hotspot-layer');
|
||||
const coordDisplay = document.getElementById('coord-display');
|
||||
const map = document.getElementById('main-map');
|
||||
let isFixed = false;
|
||||
|
||||
const noImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMjIyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIiBmb250LWZhbWl5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0Ij5ObyBJbWFnZTwvdGV4dD48L3N2Zz4=";
|
||||
|
||||
const groups = {};
|
||||
productsData.forEach(p => {
|
||||
const key = `${parseFloat(p.xPct).toFixed(1)}_${parseFloat(p.yPct).toFixed(1)}`;
|
||||
if (!groups[key]) groups[key] = [];
|
||||
groups[key].push(p);
|
||||
});
|
||||
|
||||
Object.keys(groups).forEach(key => {
|
||||
const group = groups[key];
|
||||
const hs = document.createElement('div');
|
||||
hs.className = 'hotspot';
|
||||
hs.style.left = group[0].xPct + '%';
|
||||
hs.style.top = group[0].yPct + '%';
|
||||
|
||||
const updateContent = (showFullContent) => {
|
||||
const hasContent = group.some(p => p.content && p.content.trim() !== "");
|
||||
const isSingle = group.length === 1;
|
||||
|
||||
if (showFullContent && hasContent) {
|
||||
previewGrid.className = `products-grid full-html-mode ${isSingle ? 'single-item' : 'multi-items'}`;
|
||||
previewGrid.innerHTML = group.map(p => {
|
||||
console.log( p.content)
|
||||
|
||||
if (p.content && p.content.trim() !== "") {
|
||||
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
|
||||
return `<div class="product-item item-vertical" ${linkAttr}>
|
||||
<div class="editor-content-view">${p.content}</div>
|
||||
<div class="info-content">
|
||||
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
|
||||
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
|
||||
${p.link ? `<div class="text-[11px] text-blue-500 mt-2" onclick="location.href='${p.link}'" style="cursor:pointer;">자세히 보기 ></div>` : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
} else {
|
||||
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
|
||||
return `<div class="product-item item-vertical" ${linkAttr}>
|
||||
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
|
||||
<div class="info-content">
|
||||
<!-- <div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>-->
|
||||
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
|
||||
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}).join('<hr class="content-divider">');
|
||||
} else {
|
||||
const gridClass = isSingle ? 'single-item' : 'multi-items';
|
||||
previewGrid.className = `products-grid ${gridClass}`;
|
||||
previewGrid.innerHTML = group.map(p => {
|
||||
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
|
||||
return `<div class="product-item item-vertical" ${linkAttr}>
|
||||
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
|
||||
<div class="info-content">
|
||||
<!-- <div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>-->
|
||||
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
|
||||
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
};
|
||||
|
||||
hs.onmouseenter = () => { if (!isFixed) { updateContent(false); preview.style.display = 'block'; preview.classList.remove('fixed-mode'); } };
|
||||
hs.onmouseleave = () => { if (!isFixed) preview.style.display = 'none'; };
|
||||
hs.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
isFixed = true;
|
||||
updateContent(true);
|
||||
preview.classList.add('fixed-mode');
|
||||
preview.style.display = 'flex';
|
||||
};
|
||||
hotspotLayer.appendChild(hs);
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!preview.contains(e.target)) {
|
||||
isFixed = false; preview.style.display = 'none'; preview.classList.remove('fixed-mode');
|
||||
}
|
||||
});
|
||||
map.onmousemove = (e) => {
|
||||
const r = map.getBoundingClientRect();
|
||||
// coordDisplay.textContent = `X: ${((e.clientX-r.left)/r.width*100).toFixed(1)}%, Y: ${((e.clientY-r.top)/r.height*100).toFixed(1)}%`;
|
||||
};
|
||||
map.onclick = (e) => {
|
||||
const r = map.getBoundingClientRect();
|
||||
prompt("좌표:", `xPct: ${((e.clientX-r.left)/r.width*100).toFixed(1)}, yPct: ${((e.clientY-r.top)/r.height*100).toFixed(1)}`);
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
function initProducts(productsData) {
|
||||
const map = document.getElementById('main-map');
|
||||
const hotspotLayer = document.getElementById('hotspot-layer');
|
||||
const preview = document.getElementById('hover-preview');
|
||||
const previewGrid = document.getElementById('preview-grid');
|
||||
// const coordDisplay = document.getElementById('coord-display');
|
||||
|
||||
// 그룹화 로직
|
||||
const groups = {};
|
||||
productsData.forEach(p => {
|
||||
const key = `${parseFloat(p.xPct).toFixed(1)}_${parseFloat(p.yPct).toFixed(1)}`;
|
||||
if (!groups[key]) groups[key] = [];
|
||||
groups[key].push(p);
|
||||
});
|
||||
|
||||
Object.keys(groups).forEach(key => {
|
||||
const group = groups[key];
|
||||
const hs = document.createElement('div');
|
||||
hs.className = 'hotspot';
|
||||
hs.style.left = group[0].xPct + '%';
|
||||
hs.style.top = group[0].yPct + '%';
|
||||
hs.style.transform = 'translate(-50%, -50%)';
|
||||
|
||||
hs.onmouseenter = () => {
|
||||
preview.style.display = 'block';
|
||||
previewGrid.innerHTML = group.map(p => `
|
||||
<div class="product-item">
|
||||
<div class="product-img-box"><img src="${p.img_url}" onerror="this.src='https://via.placeholder.com/200x120?text=No+Image'"></div>
|
||||
<div class="text-[10px] text-blue-400 font-bold mb-1">${p.page}</div>
|
||||
<h4 class="text-white text-[13px] font-bold truncate">${p.title}</h4>
|
||||
<p class="text-slate-500 text-[10px] line-clamp-2">${p.desc}</p>
|
||||
</div>
|
||||
`).join('');
|
||||
};
|
||||
hs.onmouseleave = () => preview.style.display = 'none';
|
||||
hs.onmousemove = (e) => {
|
||||
let x = e.clientX + 30;
|
||||
let y = e.clientY + 30;
|
||||
if (x + 540 > window.innerWidth) x = e.clientX - 560;
|
||||
if (y + preview.offsetHeight > window.innerHeight) y = window.innerHeight - preview.offsetHeight - 20;
|
||||
preview.style.left = x + 'px';
|
||||
preview.style.top = y + 'px';
|
||||
};
|
||||
hotspotLayer.appendChild(hs);
|
||||
});
|
||||
|
||||
// 좌표 도구
|
||||
// map.onmousemove = (e) => {
|
||||
// const r = map.getBoundingClientRect();
|
||||
// coordDisplay.textContent = `X: ${((e.clientX-r.left)/r.width*100).toFixed(1)}%, Y: ${((e.clientY-r.top)/r.height*100).toFixed(1)}%`;
|
||||
// };
|
||||
// map.onclick = (e) => {
|
||||
// const r = map.getBoundingClientRect();
|
||||
// prompt("좌표:", `xPct: ${((e.clientX-r.left)/r.width*100).toFixed(1)}, yPct: ${((e.clientY-r.top)/r.height*100).toFixed(1)}`);
|
||||
// };
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
function initProducts(productsData) {
|
||||
const map = document.getElementById('main-map');
|
||||
const hotspotLayer = document.getElementById('hotspot-layer');
|
||||
const preview = document.getElementById('hover-preview');
|
||||
const previewGrid = document.getElementById('preview-grid');
|
||||
// const coordDisplay = document.getElementById('coord-display');
|
||||
|
||||
let isFixed = false; // 팝업 고정 상태 변수
|
||||
|
||||
const groups = {};
|
||||
productsData.forEach(p => {
|
||||
const key = `${parseFloat(p.x_pct || p.xPct).toFixed(1)}_${parseFloat(p.y_pct || p.yPct).toFixed(1)}`;
|
||||
if (!groups[key]) groups[key] = [];
|
||||
groups[key].push(p);
|
||||
});
|
||||
|
||||
Object.keys(groups).forEach(key => {
|
||||
const group = groups[key];
|
||||
const hs = document.createElement('div');
|
||||
hs.className = 'hotspot';
|
||||
hs.style.left = (group[0].x_pct || group[0].xPct) + '%';
|
||||
hs.style.top = (group[0].y_pct || group[0].yPct) + '%';
|
||||
hs.style.transform = 'translate(-50%, -50%)';
|
||||
|
||||
// 팝업 내용 생성 함수
|
||||
const updateContent = () => {
|
||||
const gridClass = group.length === 1 ? 'single-item' : 'multi-items';
|
||||
previewGrid.className = `products-grid ${gridClass}`;
|
||||
previewGrid.innerHTML = group.map(p => `
|
||||
<div class="product-item">
|
||||
<div class="product-img-box"><img src="${p.img_url}" onerror="this.src='https://via.placeholder.com/200x120?text=No+Image'"></div>
|
||||
<div class="info-content">
|
||||
<div class="text-[11px] text-blue-400 font-bold mb-1">${p.page}</div>
|
||||
<h4 class="text-white text-[16px] font-bold mb-2">${p.title}</h4>
|
||||
<p class="text-slate-400 text-[13px] leading-relaxed">${p.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
};
|
||||
|
||||
// 마우스 진입 (호버 시작)
|
||||
hs.onmouseenter = (e) => {
|
||||
if (isFixed) return;
|
||||
updateContent();
|
||||
preview.style.display = 'block';
|
||||
};
|
||||
|
||||
// 마우스 이동 (팝업이 마우스를 따라다님)
|
||||
hs.onmousemove = (e) => {
|
||||
if (isFixed) return;
|
||||
let x = e.clientX + 20;
|
||||
let y = e.clientY - (preview.offsetHeight / 2);
|
||||
if (x + 560 > window.innerWidth) x = e.clientX - 580;
|
||||
if (y < 20) y = 20;
|
||||
preview.style.left = x + 'px';
|
||||
preview.style.top = y + 'px';
|
||||
};
|
||||
|
||||
// 마우스 이탈 (호버 종료)
|
||||
hs.onmouseleave = () => {
|
||||
if (isFixed) return;
|
||||
preview.style.display = 'none';
|
||||
};
|
||||
|
||||
// 클릭 시 고정
|
||||
hs.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
isFixed = true;
|
||||
updateContent();
|
||||
preview.style.display = 'block';
|
||||
|
||||
// 고정 시에는 화면 중앙 근처 적절한 위치에 배치
|
||||
let x = e.clientX + 30;
|
||||
let y = e.clientY - (preview.offsetHeight / 2);
|
||||
if (x + 720 > window.innerWidth) x = e.clientX - 730;
|
||||
if (y < 20) y = 20;
|
||||
|
||||
preview.style.left = x + 'px';
|
||||
preview.style.top = y + 'px';
|
||||
preview.classList.add('fixed-mode');
|
||||
};
|
||||
|
||||
hotspotLayer.appendChild(hs);
|
||||
});
|
||||
|
||||
// 외부 클릭 시 고정 해제 및 닫기
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!preview.contains(e.target)) {
|
||||
isFixed = false;
|
||||
preview.style.display = 'none';
|
||||
preview.classList.remove('fixed-mode');
|
||||
}
|
||||
});
|
||||
// // 좌표 도구
|
||||
// map.onmousemove = (e) => {
|
||||
// const r = map.getBoundingClientRect();
|
||||
// coordDisplay.textContent = `X: ${((e.clientX-r.left)/r.width*100).toFixed(1)}%, Y: ${((e.clientY-r.top)/r.height*100).toFixed(1)}%`;
|
||||
// };
|
||||
// map.onclick = (e) => {
|
||||
// const r = map.getBoundingClientRect();
|
||||
// prompt("좌표:", `xPct: ${((e.clientX-r.left)/r.width*100).toFixed(1)}, yPct: ${((e.clientY-r.top)/r.height*100).toFixed(1)}`);
|
||||
// };
|
||||
}
|
||||
@@ -0,0 +1,162 @@
|
||||
/**
|
||||
* [최종 통합본] 제품 사이드 메뉴 및 메인 맵 연동 모듈 (products2.js)
|
||||
* 1: 중앙팝업, 2: 점선연결, 3: 제자리확대, 4: 1초 지연 후 중앙팝업
|
||||
*/
|
||||
(function() {
|
||||
// 💡 설정: 원하는 모드 번호를 입력하세요.
|
||||
const POPUP_MODE = 4;
|
||||
|
||||
let popupTimer = null; // 4번 모드용 타이머
|
||||
|
||||
// 모든 효과와 타이머를 제거하는 청소기 함수
|
||||
function clearAllPopups() {
|
||||
// 실행 중인 타이머가 있으면 취소
|
||||
if (popupTimer) {
|
||||
clearTimeout(popupTimer);
|
||||
popupTimer = null;
|
||||
}
|
||||
|
||||
// 핫스팟 숨김
|
||||
const hotspot = document.querySelector('.product-hotspot');
|
||||
if (hotspot) hotspot.style.display = 'none';
|
||||
|
||||
// 생성된 클론 이미지(모드 1, 4) 삭제
|
||||
const clones = document.querySelectorAll('#active-popup-img');
|
||||
clones.forEach(c => c.remove());
|
||||
|
||||
// 모든 아이템의 클래스 및 스타일 초기화
|
||||
const items = document.querySelectorAll('.product-item');
|
||||
items.forEach(item => {
|
||||
item.classList.remove('show-connector', 'active');
|
||||
const img = item.querySelector('.product-img img');
|
||||
if (img) {
|
||||
img.classList.remove('mode-self-zoom');
|
||||
img.style.transform = '';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initProductEvents() {
|
||||
const productItems = document.querySelectorAll('.product-section .product-item');
|
||||
const mainArea = document.querySelector('.product-main');
|
||||
const section = document.querySelector('.product-section');
|
||||
|
||||
if (!productItems.length || !mainArea) return;
|
||||
|
||||
productItems.forEach(item => {
|
||||
const imgElement = item.querySelector('.product-img img');
|
||||
const imgSrc = item.dataset.img || (imgElement ? imgElement.src : '');
|
||||
const proLink = item.dataset.prolink;
|
||||
|
||||
item.addEventListener('mouseenter', function() {
|
||||
clearAllPopups(); // 새로 시작하기 전 초기화
|
||||
|
||||
const x1 = this.dataset.x1;
|
||||
const y1 = this.dataset.y1;
|
||||
|
||||
if (x1 && y1) {
|
||||
// 1. 핫스팟(블루 스폿)은 어떤 모드든 즉시 표시
|
||||
const hotspot = document.querySelector('.product-hotspot');
|
||||
if (hotspot) {
|
||||
hotspot.style.left = x1 + '%';
|
||||
hotspot.style.top = y1 + '%';
|
||||
hotspot.style.display = 'block';
|
||||
}
|
||||
|
||||
// 2. 모드별 효과 실행
|
||||
if (POPUP_MODE === 4) {
|
||||
// [모드 4] 1초 지연 후 중앙 팝업
|
||||
popupTimer = setTimeout(() => {
|
||||
if (imgElement) {
|
||||
const clone = imgElement.cloneNode(true);
|
||||
clone.id = 'active-popup-img';
|
||||
clone.src = imgSrc;
|
||||
if (proLink) {
|
||||
clone.style.cursor = 'pointer';
|
||||
clone.style.pointerEvents = 'auto';
|
||||
clone.onclick = () => { location.href = proLink; };
|
||||
}
|
||||
mainArea.appendChild(clone);
|
||||
requestAnimationFrame(() => clone.classList.add('active'));
|
||||
}
|
||||
}, 1000); // 1000ms = 1초 대기
|
||||
|
||||
} else if (POPUP_MODE === 1 && imgElement) {
|
||||
// [모드 1] 즉시 중앙 팝업
|
||||
const clone = imgElement.cloneNode(true);
|
||||
clone.id = 'active-popup-img';
|
||||
clone.src = imgSrc;
|
||||
if (proLink) {
|
||||
clone.style.cursor = 'pointer';
|
||||
clone.style.pointerEvents = 'auto';
|
||||
clone.onclick = () => { location.href = proLink; };
|
||||
}
|
||||
mainArea.appendChild(clone);
|
||||
requestAnimationFrame(() => clone.classList.add('active'));
|
||||
|
||||
} else if (POPUP_MODE === 2) {
|
||||
// [모드 2] 점선 연결선 정밀 계산
|
||||
const rect = this.getBoundingClientRect();
|
||||
const mainRect = mainArea.getBoundingClientRect();
|
||||
const targetX = mainRect.left + (mainRect.width * (parseFloat(x1) / 100));
|
||||
const targetY = mainRect.top + (mainRect.height * (parseFloat(y1) / 100));
|
||||
const isLeft = this.closest('.product-side').classList.contains('left');
|
||||
const startX = isLeft ? rect.right : rect.left;
|
||||
const startY = rect.top + (rect.height / 2);
|
||||
const dx = targetX - startX;
|
||||
const dy = targetY - startY;
|
||||
const dist = Math.sqrt(dx * dx + dy * dy);
|
||||
let angle = Math.atan2(dy, dx) * 180 / Math.PI;
|
||||
if (!isLeft) angle += 180;
|
||||
|
||||
this.style.setProperty('--line-width', dist + 'px');
|
||||
this.style.setProperty('--line-angle', angle + 'deg');
|
||||
this.classList.add('show-connector');
|
||||
requestAnimationFrame(() => this.classList.add('active'));
|
||||
if (imgElement) imgElement.style.transform = 'scale(1.2)';
|
||||
|
||||
if (imgElement && proLink) {
|
||||
imgElement.style.cursor = 'pointer';
|
||||
imgElement.onclick = () => { location.href = proLink; };
|
||||
}
|
||||
|
||||
} else if (POPUP_MODE === 3 && imgElement) {
|
||||
// [모드 3] 제자리 600 확대
|
||||
imgElement.src = imgSrc;
|
||||
imgElement.classList.add('mode-self-zoom');
|
||||
if (proLink) {
|
||||
imgElement.style.cursor = 'pointer';
|
||||
imgElement.style.pointerEvents = 'auto';
|
||||
imgElement.onclick = () => { location.href = proLink; };
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 아이템 자체 클릭 시에도 이동 (이미지 외 영역 클릭 대비)
|
||||
if (proLink) {
|
||||
item.style.cursor = 'pointer';
|
||||
item.addEventListener('click', function(e) {
|
||||
if (e.target.tagName !== 'IMG') {
|
||||
location.href = proLink;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 마우스가 아이템을 벗어나면 즉시 청소 (타이머 취소 포함)
|
||||
item.addEventListener('mouseleave', clearAllPopups);
|
||||
});
|
||||
|
||||
// 섹션 전체를 벗어나도 청소 (안전장치)
|
||||
if (section) {
|
||||
section.addEventListener('mouseleave', clearAllPopups);
|
||||
}
|
||||
}
|
||||
|
||||
// 문서 로드 완료 시 실행
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initProductEvents);
|
||||
} else {
|
||||
initProductEvents();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,64 @@
|
||||
function initProductEvents() {
|
||||
// 💡 설정: 1(메인중앙), 2(점선), 3(제자리확대)
|
||||
const POPUP_MODE = 1;
|
||||
|
||||
const productItems = document.querySelectorAll('.product-section .product-item');
|
||||
const mainArea = document.querySelector('.product-main');
|
||||
|
||||
if (!productItems.length) return;
|
||||
|
||||
productItems.forEach(item => {
|
||||
// 💡 [수정] 데이터 속성에서 이미지 경로 직접 읽기 (없으면 내부 img 사용)
|
||||
const imgSrc = item.dataset.img || item.querySelector('.product-img img').src;
|
||||
const imgElement = item.querySelector('.product-img img');
|
||||
|
||||
item.addEventListener('mouseenter', function() {
|
||||
clearAllPopups();
|
||||
const x1 = this.dataset.x1;
|
||||
const y1 = this.dataset.y1;
|
||||
|
||||
if (x1 && y1) {
|
||||
ProductModule.setHotspot(x1, y1);
|
||||
|
||||
if (POPUP_MODE === 1 && mainArea) {
|
||||
// [모드 1] 메인 중앙 복제 팝업
|
||||
const clone = document.createElement('img');
|
||||
clone.src = imgSrc; // 💡 전달받은 경로로 로드
|
||||
clone.id = 'active-popup-img';
|
||||
mainArea.appendChild(clone);
|
||||
requestAnimationFrame(() => clone.classList.add('active'));
|
||||
|
||||
} else if (POPUP_MODE === 2) {
|
||||
// [모드 2] 점선 연결 (기존 로직 동일)
|
||||
const rect = this.getBoundingClientRect();
|
||||
const mainRect = mainArea.getBoundingClientRect();
|
||||
const targetX = mainRect.left + (mainRect.width * (parseFloat(x1) / 100));
|
||||
const targetY = mainRect.top + (mainRect.height * (parseFloat(y1) / 100));
|
||||
const isLeft = this.closest('.product-side').classList.contains('left');
|
||||
const startX = isLeft ? rect.right : rect.left;
|
||||
const dx = targetX - startX;
|
||||
const dy = targetY - (rect.top + rect.height/2);
|
||||
let angle = Math.atan2(dy, dx) * 180 / Math.PI;
|
||||
if (!isLeft) angle += 180;
|
||||
|
||||
this.style.setProperty('--line-width', Math.sqrt(dx*dx + dy*dy) + 'px');
|
||||
this.style.setProperty('--line-angle', angle + 'deg');
|
||||
this.classList.add('show-connector');
|
||||
requestAnimationFrame(() => this.classList.add('active'));
|
||||
|
||||
} else if (POPUP_MODE === 3) {
|
||||
// 💡 [모드 3] 제자리 400x400 확대
|
||||
if (imgElement) {
|
||||
imgElement.src = imgSrc; // 💡 이미지 경로 갱신
|
||||
imgElement.classList.add('mode-self-zoom');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
item.addEventListener('mouseleave', function() {
|
||||
clearAllPopups();
|
||||
if (imgElement) imgElement.classList.remove('mode-self-zoom');
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
function initProducts(productsData) {
|
||||
const map = document.getElementById('main-map');
|
||||
const hotspotLayer = document.getElementById('hotspot-layer');
|
||||
const preview = document.getElementById('hover-preview');
|
||||
const previewGrid = document.getElementById('preview-grid');
|
||||
|
||||
let isFixed = false;
|
||||
const noImg = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMjIyIi8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZpbGw9IiM0NDQiIHRleHQtYW5jaG9yPSJtaWRkbGUiIGR5PSIuM2VtIiBmb250LWZhbWl5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjI0Ij5ObyBJbWFnZTwvdGV4dD48L3N2Zz4=";
|
||||
|
||||
// 1. 그룹화 로직
|
||||
const groups = {};
|
||||
productsData.forEach(p => {
|
||||
const key = `${parseFloat(p.xPct).toFixed(1)}_${parseFloat(p.yPct).toFixed(1)}`;
|
||||
if (!groups[key]) groups[key] = [];
|
||||
groups[key].push(p);
|
||||
});
|
||||
|
||||
// 2. 핫스팟 생성 및 이벤트
|
||||
Object.keys(groups).forEach(key => {
|
||||
const group = groups[key];
|
||||
const hs = document.createElement('div');
|
||||
hs.className = 'hotspot';
|
||||
hs.style.left = group[0].xPct + '%';
|
||||
hs.style.top = group[0].yPct + '%';
|
||||
hs.style.transform = 'translate(-50%, -50%)';
|
||||
|
||||
const updateContent = (showFullContent) => {
|
||||
const hasContent = group.some(p => p.content && p.content.trim() !== "");
|
||||
const isSingle = group.length === 1;
|
||||
|
||||
if (showFullContent && hasContent) {
|
||||
// 클릭 시: 상세 HTML 모드
|
||||
previewGrid.className = `products-grid full-html-mode ${isSingle ? 'single-item' : 'multi-items'}`;
|
||||
previewGrid.innerHTML = group.map(p => {
|
||||
if (p.content && p.content.trim() !== "") {
|
||||
return `<div class="editor-content-view">${p.content}</div>`;
|
||||
} else {
|
||||
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
|
||||
return `<div class="product-item" ${linkAttr}>
|
||||
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
|
||||
<div class="info-content">
|
||||
<div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>
|
||||
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
|
||||
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
|
||||
${p.link ? '<div class="text-[11px] text-blue-500 mt-2">자세히 보기 ></div>' : ''}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}).join('<hr class="content-divider">');
|
||||
} else {
|
||||
// 호버 시: 요약 모드
|
||||
const gridClass = isSingle ? 'single-item' : 'multi-items';
|
||||
previewGrid.className = `products-grid ${gridClass}`;
|
||||
previewGrid.innerHTML = group.map(p => {
|
||||
const linkAttr = (p.link) ? `onclick="location.href='${p.link}'" style="cursor:pointer;"` : "";
|
||||
return `<div class="product-item" ${linkAttr}>
|
||||
<div class="product-img-box"><img src="${p.img_url}" onerror="this.onerror=null; this.src='${noImg}';"></div>
|
||||
<div class="info-content">
|
||||
<div class="text-[12px] text-blue-400 font-bold mb-2">${p.page}</div>
|
||||
<h4 class="text-white text-[18px] font-bold mb-3">${p.title}</h4>
|
||||
<p class="text-slate-400 text-[14px] leading-relaxed">${p.desc}</p>
|
||||
</div>
|
||||
</div>`;
|
||||
}).join('');
|
||||
}
|
||||
};
|
||||
|
||||
hs.onmouseenter = () => {
|
||||
if (isFixed) return;
|
||||
updateContent(false);
|
||||
preview.style.display = 'block';
|
||||
preview.classList.remove('fixed-mode');
|
||||
};
|
||||
|
||||
hs.onmouseleave = () => {
|
||||
if (isFixed) return;
|
||||
preview.style.display = 'none';
|
||||
};
|
||||
|
||||
hs.onclick = (e) => {
|
||||
e.stopPropagation();
|
||||
isFixed = true;
|
||||
updateContent(true);
|
||||
preview.classList.add('fixed-mode');
|
||||
preview.style.display = 'flex';
|
||||
};
|
||||
|
||||
hotspotLayer.appendChild(hs);
|
||||
});
|
||||
|
||||
// 외부 클릭 시 닫기
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!preview.contains(e.target)) {
|
||||
isFixed = false;
|
||||
preview.style.display = 'none';
|
||||
preview.classList.remove('fixed-mode');
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,460 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- E-commerce Modern Layout -->
|
||||
<div class="ecommerce-modern-container">
|
||||
<!-- Hero Banner Section -->
|
||||
<section class="hero-banner">
|
||||
<div class="banner-slider">
|
||||
<div class="banner-slide active">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<span class="banner-badge">NEW COLLECTION</span>
|
||||
<h1 class="banner-title">2024 Spring Collection</h1>
|
||||
<p class="banner-subtitle">최신 트렌드를 반영한 프리미엄 컬렉션을 만나보세요</p>
|
||||
<div class="banner-cta">
|
||||
<a href="#shop" class="btn-shop">쇼핑하기</a>
|
||||
<a href="#lookbook" class="btn-lookbook">룩북 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Spring Collection" class="hero-img">
|
||||
<div class="image-overlay">
|
||||
<div class="price-tag">
|
||||
<span class="price-label">Starting from</span>
|
||||
<span class="price-amount">₩89,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-slide">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<span class="banner-badge">SALE</span>
|
||||
<h1 class="banner-title">Up to 50% OFF</h1>
|
||||
<p class="banner-subtitle">한정 기간 특가 할인으로 특별한 혜택을 누리세요</p>
|
||||
<div class="banner-cta">
|
||||
<a href="#sale" class="btn-shop">할인 상품 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sale Collection" class="hero-img">
|
||||
<div class="image-overlay">
|
||||
<div class="discount-badge">
|
||||
<span class="discount-text">50% OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-controls">
|
||||
<button class="banner-prev">‹</button>
|
||||
<button class="banner-next">›</button>
|
||||
</div>
|
||||
<div class="banner-indicators">
|
||||
<span class="indicator active" data-slide="0"></span>
|
||||
<span class="indicator" data-slide="1"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Categories -->
|
||||
<section class="categories-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">카테고리별 쇼핑</h2>
|
||||
<p class="section-subtitle">다양한 카테고리에서 원하는 상품을 찾아보세요</p>
|
||||
</div>
|
||||
<div class="categories-grid">
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="패션">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">1,234개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>패션</h3>
|
||||
<p>의류, 신발, 액세서리</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="뷰티">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">567개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>뷰티</h3>
|
||||
<p>화장품, 스킨케어</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1618220179428-22790b461013?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="홈&리빙">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">890개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>홈&리빙</h3>
|
||||
<p>가구, 인테리어</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="디지털">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">345개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>디지털</h3>
|
||||
<p>전자제품, 가전</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Products -->
|
||||
<section class="products-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">인기 상품</h2>
|
||||
<div class="section-controls">
|
||||
<div class="filter-tabs">
|
||||
<button class="filter-tab active" data-filter="all">전체</button>
|
||||
<button class="filter-tab" data-filter="new">신상품</button>
|
||||
<button class="filter-tab" data-filter="sale">할인상품</button>
|
||||
<button class="filter-tab" data-filter="best">베스트</button>
|
||||
</div>
|
||||
<div class="view-controls">
|
||||
<button class="view-btn active" data-view="grid">⊞</button>
|
||||
<button class="view-btn" data-view="list">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="products-grid" id="products-grid">
|
||||
<!-- Product items will be loaded here -->
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="프리미엄 코트">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
<div class="product-badges">
|
||||
<span class="badge-new">NEW</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">프리미엄 코트</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★★</div>
|
||||
<span class="rating-count">(128)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩89,000</span>
|
||||
<span class="original-price">₩120,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="스타일리시 스니커즈">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
<div class="product-badges">
|
||||
<span class="badge-sale">SALE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">스타일리시 스니커즈</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★☆</div>
|
||||
<span class="rating-count">(89)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩65,000</span>
|
||||
<span class="original-price">₩95,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1598532163257-ae24b244c626?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="럭셔리 핸드백">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
<div class="product-badges">
|
||||
<span class="badge-best">BEST</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">럭셔리 핸드백</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★★</div>
|
||||
<span class="rating-count">(256)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩150,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="모던 시계">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">모던 시계</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★☆</div>
|
||||
<span class="rating-count">(67)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩45,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="load-more">
|
||||
<button class="btn-load-more">더 많은 상품 보기</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter Section -->
|
||||
<section class="newsletter-section">
|
||||
<div class="container">
|
||||
<div class="newsletter-content">
|
||||
<div class="newsletter-text">
|
||||
<h2>새로운 소식을 받아보세요</h2>
|
||||
<p>최신 상품과 특별 할인 정보를 이메일로 받아보세요</p>
|
||||
</div>
|
||||
<div class="newsletter-form">
|
||||
<form class="email-form">
|
||||
<input type="email" placeholder="이메일 주소를 입력하세요" class="email-input">
|
||||
<button type="submit" class="btn-subscribe">구독하기</button>
|
||||
</form>
|
||||
<p class="newsletter-note">언제든지 구독을 취소할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<div class="features-grid">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🚚</div>
|
||||
<h3>무료 배송</h3>
|
||||
<p>5만원 이상 구매 시 무료 배송</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">↩️</div>
|
||||
<h3>쉬운 반품</h3>
|
||||
<p>30일 무조건 반품 가능</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3>안전한 결제</h3>
|
||||
<p>SSL 암호화로 안전한 결제</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">💬</div>
|
||||
<h3>고객 지원</h3>
|
||||
<p>24/7 고객 서비스 지원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- E-commerce Modern JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Banner slider functionality
|
||||
initBannerSlider();
|
||||
|
||||
// Product filtering
|
||||
initProductFiltering();
|
||||
|
||||
// Wishlist functionality
|
||||
initWishlist();
|
||||
|
||||
// Newsletter form
|
||||
initNewsletterForm();
|
||||
|
||||
// Quick view modal
|
||||
initQuickView();
|
||||
});
|
||||
|
||||
function initBannerSlider() {
|
||||
const slides = document.querySelectorAll('.banner-slide');
|
||||
const indicators = document.querySelectorAll('.indicator');
|
||||
const prevBtn = document.querySelector('.banner-prev');
|
||||
const nextBtn = document.querySelector('.banner-next');
|
||||
let currentSlide = 0;
|
||||
|
||||
function showSlide(index) {
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
indicators.forEach(indicator => indicator.classList.remove('active'));
|
||||
|
||||
slides[index].classList.add('active');
|
||||
indicators[index].classList.add('active');
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
nextBtn.addEventListener('click', nextSlide);
|
||||
prevBtn.addEventListener('click', prevSlide);
|
||||
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('click', () => {
|
||||
currentSlide = index;
|
||||
showSlide(currentSlide);
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-slide
|
||||
setInterval(nextSlide, 5000);
|
||||
}
|
||||
|
||||
function initProductFiltering() {
|
||||
const filterTabs = document.querySelectorAll('.filter-tab');
|
||||
const viewBtns = document.querySelectorAll('.view-btn');
|
||||
const productsGrid = document.getElementById('products-grid');
|
||||
|
||||
filterTabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
filterTabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
const filter = tab.dataset.filter;
|
||||
filterProducts(filter);
|
||||
});
|
||||
});
|
||||
|
||||
viewBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
viewBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
const view = btn.dataset.view;
|
||||
productsGrid.className = `products-grid ${view}-view`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function filterProducts(filter) {
|
||||
const products = document.querySelectorAll('.product-card');
|
||||
|
||||
products.forEach(product => {
|
||||
if (filter === 'all' || product.dataset.category === filter) {
|
||||
product.style.display = 'block';
|
||||
} else {
|
||||
product.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initWishlist() {
|
||||
const wishlistBtns = document.querySelectorAll('.btn-wishlist');
|
||||
|
||||
wishlistBtns.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
btn.classList.toggle('active');
|
||||
|
||||
if (btn.classList.contains('active')) {
|
||||
btn.textContent = '♥';
|
||||
btn.style.color = '#e74c3c';
|
||||
} else {
|
||||
btn.textContent = '♡';
|
||||
btn.style.color = '#999';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initNewsletterForm() {
|
||||
const form = document.querySelector('.email-form');
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const email = form.querySelector('.email-input').value;
|
||||
|
||||
if (email) {
|
||||
alert('구독해주셔서 감사합니다!');
|
||||
form.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initQuickView() {
|
||||
const quickViewBtns = document.querySelectorAll('.btn-quick-view');
|
||||
|
||||
quickViewBtns.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
// Quick view modal implementation
|
||||
alert('빠른보기 기능이 곧 추가됩니다!');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scrolling for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,868 @@
|
||||
/* E-commerce Modern Theme Styles */
|
||||
|
||||
/* CSS Variables for E-commerce Theme */
|
||||
:root {
|
||||
--primary-color: #e74c3c;
|
||||
--secondary-color: #2c3e50;
|
||||
--accent-color: #f39c12;
|
||||
--success-color: #27ae60;
|
||||
--warning-color: #f39c12;
|
||||
--error-color: #e74c3c;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--text-light: #bdc3c7;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-tertiary: #ecf0f1;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e9ecef;
|
||||
--border-light: #f1f3f4;
|
||||
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Banner Section */
|
||||
.hero-banner {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-slide.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.banner-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-shop, .btn-lookbook {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-shop {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-shop:hover {
|
||||
background-color: #c0392b;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-lookbook {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-lookbook:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.banner-controls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--spacing-md);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.banner-prev, .banner-next {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: all;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.banner-prev:hover, .banner-next:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.banner-indicators {
|
||||
position: absolute;
|
||||
bottom: var(--spacing-lg);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.indicator.active {
|
||||
background: var(--primary-color);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Categories Section */
|
||||
.categories-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.categories-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.category-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.category-image {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.category-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.category-card:hover .category-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.category-overlay {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
right: var(--spacing-sm);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.category-info {
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-info h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.category-info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Products Section */
|
||||
.products-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.section-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: transparent;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-tab.active,
|
||||
.filter-tab:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--bg-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-btn.active,
|
||||
.view-btn:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.products-grid.list-view {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.product-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-quick-view, .btn-wishlist {
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--bg-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-quick-view:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-wishlist.active {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.product-badges {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
left: var(--spacing-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.badge-new, .badge-sale, .badge-best {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-new {
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-sale {
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-best {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.product-brand {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.stars {
|
||||
color: var(--accent-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.rating-count {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 1rem;
|
||||
color: var(--text-light);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.btn-add-cart {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add-cart:hover {
|
||||
background: #c0392b;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-load-more {
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-load-more:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Newsletter Section */
|
||||
.newsletter-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #c0392b 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.newsletter-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.newsletter-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.newsletter-text p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.email-input {
|
||||
flex: 1;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-subscribe {
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-subscribe:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.newsletter-note {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.feature-item h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-item p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.banner-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.newsletter-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.newsletter-text h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.banner-cta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-shop, .btn-lookbook {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.product-card,
|
||||
.category-card {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.banner-controls,
|
||||
.banner-indicators,
|
||||
.btn-add-cart,
|
||||
.newsletter-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,139 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- Modern Minimal Layout -->
|
||||
<div class="modern-minimal-container">
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Simple. Beautiful. Effective.</h1>
|
||||
<p class="hero-subtitle">최소한의 디자인으로 최대한의 임팩트를 전달합니다.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#about" class="btn-primary">시작하기</a>
|
||||
<a href="#learn" class="btn-secondary">더 알아보기</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual">
|
||||
<div class="hero-image-placeholder">
|
||||
<div class="minimal-shape"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<h2 class="section-title">핵심 기능</h2>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>모듈화된 구조</h3>
|
||||
<p>재사용 가능한 컴포넌트로 효율적인 개발</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M9 9H15V15H9V9Z" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>반응형 디자인</h3>
|
||||
<p>모든 디바이스에서 완벽한 경험</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
|
||||
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 1V3M12 21V23M4.22 4.22L5.64 5.64M18.36 18.36L19.78 19.78M1 12H3M21 12H23M4.22 19.78L5.64 18.36M18.36 5.64L19.78 4.22" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>성능 최적화</h3>
|
||||
<p>빠른 로딩과 부드러운 애니메이션</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Content Section -->
|
||||
<section class="content-section">
|
||||
<div class="container">
|
||||
<div class="content-grid">
|
||||
<div class="content-text">
|
||||
<h2>미니멀리즘의 힘</h2>
|
||||
<p>불필요한 요소를 제거하고 핵심에 집중하는 디자인 철학을 통해 사용자에게 명확하고 직관적인 경험을 제공합니다.</p>
|
||||
<ul class="benefits-list">
|
||||
<li>빠른 로딩 속도</li>
|
||||
<li>직관적인 사용자 경험</li>
|
||||
<li>브랜드 메시지 강화</li>
|
||||
<li>유지보수 용이성</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="content-visual">
|
||||
<div class="visual-placeholder">
|
||||
<div class="minimal-geometry"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<h2>지금 시작하세요</h2>
|
||||
<p>미니멀한 디자인으로 브랜드의 가치를 전달하세요</p>
|
||||
<a href="#contact" class="btn-primary-large">프로젝트 시작하기</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- Modern Minimal JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Smooth scrolling for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Intersection Observer for animations
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements for animation
|
||||
document.querySelectorAll('.feature-card, .content-grid, .cta-content').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,445 @@
|
||||
/* Modern Minimal Theme Styles */
|
||||
|
||||
/* CSS Variables for consistent theming */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #64748b;
|
||||
--accent-color: #f59e0b;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--text-light: #94a3b8;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-accent: #f1f5f9;
|
||||
--border-color: #e2e8f0;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
margin-right: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #1d4ed8;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-accent);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-image-placeholder {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.minimal-shape {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.minimal-shape::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: var(--spacing-xl);
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.feature-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--bg-accent);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.content-text p {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
padding: var(--spacing-sm) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.benefits-list li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.visual-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.minimal-geometry {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-content h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-content p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background-color: white;
|
||||
color: var(--primary-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary-large:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero-section {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl) 0;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
margin-right: 0;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
grid-template-columns: 1fr;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.hero-image-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.minimal-shape {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.minimal-shape::before {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.minimal-shape,
|
||||
.minimal-geometry {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.hero-cta,
|
||||
.cta-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,376 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
|
||||
// ==============================================================================
|
||||
// [DATA CONFIGURATION] 상단 설정 영역
|
||||
// 이곳의 데이터만 수정하면 페이지 전체의 문구와 링크가 변경됩니다.
|
||||
// ==============================================================================
|
||||
|
||||
// 1. Hero 섹션 설정 (메인 타이틀 및 링크)
|
||||
$hero_config = [
|
||||
'title_top' => '새로운 지평선을 열다',
|
||||
'title_main' => 'SUPERNOVA JOURNAL',
|
||||
'subtitle' => '레이저 기술의 무한한 잠재력을 실현하고<br>일상 속 혁신을 이끄는 글로벌 파트너',
|
||||
'btn_1_txt' => '저널 구독하기',
|
||||
'btn_1_url' => G5_BBS_URL.'/board.php?bo_table=subscribe',
|
||||
'btn_2_txt' => '솔루션 문의',
|
||||
'btn_2_url' => G5_BBS_URL.'/board.php?bo_table=qa'
|
||||
];
|
||||
|
||||
// 2. Hero 우측 '바로가기 박스' 설정 (4개) - 클릭 시 이동할 게시판 URL 설정
|
||||
$shortcut_boxes = [
|
||||
[
|
||||
'title' => '최신 연구',
|
||||
'icon' => '🔬',
|
||||
'desc' => '세포 연구 및 의학 발전',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=research'
|
||||
],
|
||||
[
|
||||
'title' => '일상 활용',
|
||||
'icon' => '🏙️',
|
||||
'desc' => '건설, 치과, 테마파크',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=dailylife'
|
||||
],
|
||||
[
|
||||
'title' => '맞춤 서비스',
|
||||
'icon' => '⚙️',
|
||||
'desc' => '디자인 및 물류 솔루션',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=custom'
|
||||
],
|
||||
[
|
||||
'title' => '제품 소개',
|
||||
'icon' => '💎',
|
||||
'desc' => '레이저 가죽 & 소모품',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=products'
|
||||
]
|
||||
];
|
||||
|
||||
// 3. Portfolio 섹션 (게시판 연동 그룹) 설정
|
||||
// 제공된 텍스트 내용을 기반으로 4개 카테고리 분류
|
||||
$board_groups = [
|
||||
'tech' => [
|
||||
'bo_table' => 'laser_tech',
|
||||
'title' => 'TECH FRONTIERS',
|
||||
'desc' => '물리학자들의 새로운 아이디어와 레이저 기술의 비약적 발전'
|
||||
],
|
||||
'life' => [
|
||||
'bo_table' => 'laser_life',
|
||||
'title' => 'LASER IN DAILY LIFE',
|
||||
'desc' => '전문가들이 전하는 우리 삶 속에 스며든 레이저 이야기'
|
||||
],
|
||||
'product' => [
|
||||
'bo_table' => 'laser_goods',
|
||||
'title' => 'CUSTOM PRODUCTS',
|
||||
'desc' => '승화 인쇄용 가죽 블랭크 및 다양한 맞춤형 레이저 소모품'
|
||||
],
|
||||
'service' => [
|
||||
'bo_table' => 'laser_service',
|
||||
'title' => 'QUALITY & SERVICE',
|
||||
'desc' => '편리한 물류 서비스와 산업 표준을 초과하는 품질 보증'
|
||||
]
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="creative-portfolio-container">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<img src="<?php echo G5_THEME_URL ?>/img/supernova_hero.jpg" alt="Supernova Laser World" class="bg-img">
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="hero-shapes">
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">LASER TECHNOLOGY JOURNAL</span>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line"><?php echo $hero_config['title_top']; ?></span>
|
||||
<span class="title-line gradient-text"><?php echo $hero_config['title_main']; ?></span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
<?php echo $hero_config['subtitle']; ?>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="<?php echo $hero_config['btn_1_url']; ?>" class="btn-primary"><?php echo $hero_config['btn_1_txt']; ?></a>
|
||||
<a href="<?php echo $hero_config['btn_2_url']; ?>" class="btn-secondary"><?php echo $hero_config['btn_2_txt']; ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="creative-showcase">
|
||||
<?php foreach($shortcut_boxes as $box): ?>
|
||||
<div class="showcase-item" onclick="location.href='<?php echo $box['url']; ?>'">
|
||||
<div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<p class="box-desc"><?php echo $box['desc']; ?></p>
|
||||
</div>
|
||||
<div class="hover-indicator">GO ➔</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio-section" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">DISCOVER</span>
|
||||
<h2 class="section-title">주요 저널 및 제품</h2>
|
||||
<p class="section-subtitle">슈퍼노바가 제안하는 기술의 기적과 솔루션</p>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-filter">
|
||||
<button class="filter-btn active" data-filter="all">전체 보기</button>
|
||||
<?php foreach($board_groups as $key => $group): ?>
|
||||
<button class="filter-btn" data-filter="<?php echo $key; ?>"><?php echo $group['title']; ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
<?php
|
||||
foreach($board_groups as $key => $group):
|
||||
// 최신글 추출 (이미지 포함된 게시물 위주)
|
||||
$list = get_latest('gallery', $group['bo_table'], 5, 40);
|
||||
|
||||
if(is_array($list) && count($list) > 0) {
|
||||
foreach($list as $lt) {
|
||||
$thumb = get_list_thumbnail($group['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = $lt['href'];
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80); // 본문 요약
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $key; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $group['title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
endforeach;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">WHY CHOOSE SUPERNOVA?</span>
|
||||
<h2 class="section-title">슈퍼노바만의 특별한 가치</h2>
|
||||
<p class="section-subtitle">품질과 서비스의 확실한 보증을 제공합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="process-timeline">
|
||||
<div class="process-step">
|
||||
<div class="step-number">01</div>
|
||||
<div class="step-content">
|
||||
<h3>Customization</h3>
|
||||
<p>고객 샘플 기반 디자인, 사양, 포장 맞춤 제작</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">02</div>
|
||||
<div class="step-content">
|
||||
<h3>Logistics</h3>
|
||||
<p>고객 요구에 맞춘 비용 효율적 물류 솔루션 제공</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">03</div>
|
||||
<div class="step-content">
|
||||
<h3>Innovation</h3>
|
||||
<p>15년 전문성을 바탕으로 한 지속적인 제품 혁신</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">04</div>
|
||||
<div class="step-content">
|
||||
<h3>Support</h3>
|
||||
<p>모든 제품에 대한 무료 기술 지원 및 철저한 안내</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>글로벌 레이저 기술의 파트너</h2>
|
||||
<p>전 세계 시장에서 검증된 서브리메이션 및 레이저 소재를 만나보세요.</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=contact" class="btn-primary-large">제휴 문의</a>
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=catalog" class="btn-secondary-large">제품 카탈로그</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
// 탭 필터링 로직
|
||||
$('.filter-btn').on('click', function() {
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$('.filter-btn').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
if(filterValue == 'all') {
|
||||
$('.portfolio-item').show(300);
|
||||
} else {
|
||||
$('.portfolio-item').hide();
|
||||
$('.portfolio-item[data-category="'+filterValue+'"]').show(300);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS 스타일링 (기능 및 디자인 유지, 색상 테마 조정) */
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px; /* Hero 높이 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
|
||||
}
|
||||
.hero-background .bg-img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.hero-content {
|
||||
max-width: 1400px; margin: 0 auto; padding: 0 30px; width: 100%;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
position: relative; z-index: 1; color: #fff;
|
||||
}
|
||||
.hero-text { max-width: 50%; }
|
||||
.hero-badge {
|
||||
background: #ff6b6b; color: #fff; padding: 5px 12px;
|
||||
border-radius: 20px; font-weight: bold; font-size: 0.85rem; letter-spacing: 1px;
|
||||
}
|
||||
.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin: 20px 0; }
|
||||
.hero-title .gradient-text {
|
||||
background: linear-gradient(to right, #ff6b6b, #feca57);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-subtitle { font-size: 1.2rem; opacity: 0.9; margin-bottom: 40px; font-weight: 300; line-height: 1.6; }
|
||||
|
||||
/* Hero Visual (Small Boxes) */
|
||||
.creative-showcase {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
|
||||
}
|
||||
.showcase-item {
|
||||
background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
padding: 20px; border-radius: 12px; text-align: center;
|
||||
width: 170px; height: 170px;
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
|
||||
}
|
||||
.showcase-item:hover {
|
||||
background: rgba(255,255,255,0.95); transform: translateY(-5px);
|
||||
}
|
||||
.showcase-item:hover h4, .showcase-item:hover .item-icon, .showcase-item:hover .box-desc {
|
||||
color: #333;
|
||||
}
|
||||
.item-icon { font-size: 2.5rem; margin-bottom: 10px; color: #fff; transition: 0.3s;}
|
||||
.showcase-item h4 { font-size: 1.1rem; color: #fff; margin: 0 0 5px; font-weight: 700; transition: 0.3s;}
|
||||
.box-desc { font-size: 0.75rem; color: #ddd; margin: 0; line-height: 1.3; transition: 0.3s;}
|
||||
.hover-indicator {
|
||||
position: absolute; bottom: 10px; font-size: 0.8rem; font-weight: bold; color: #ff6b6b;
|
||||
opacity: 0; transform: translateY(10px); transition: 0.3s;
|
||||
}
|
||||
.showcase-item:hover .hover-indicator { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* Portfolio Section */
|
||||
.portfolio-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-top: 40px;
|
||||
}
|
||||
.portfolio-wrapper {
|
||||
position: relative; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1); height: 320px;
|
||||
}
|
||||
.portfolio-image { width: 100%; height: 100%; }
|
||||
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
text-align: center; padding: 25px;
|
||||
opacity: 0; transition: opacity 0.3s ease;
|
||||
}
|
||||
.portfolio-wrapper:hover .portfolio-overlay { opacity: 1; }
|
||||
.portfolio-wrapper:hover .portfolio-image img { transform: scale(1.1); }
|
||||
|
||||
.overlay-content h3 { color: #fff; font-size: 1.4rem; margin-bottom: 15px; line-height: 1.3; }
|
||||
.overlay-content .summary { color: #ccc; font-size: 0.9rem; margin-bottom: 25px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.category-tag {
|
||||
display: inline-block; padding: 4px 12px; background: #ff6b6b; color: #fff;
|
||||
border-radius: 20px; font-size: 0.7rem; margin-bottom: 15px; font-weight: bold;
|
||||
}
|
||||
.btn-view {
|
||||
display: inline-block; padding: 8px 25px; border: 1px solid #fff; color: #fff;
|
||||
text-decoration: none; border-radius: 30px; transition: 0.2s; font-size: 0.9rem;
|
||||
}
|
||||
.btn-view:hover { background: #fff; color: #000; }
|
||||
|
||||
/* Filter Buttons */
|
||||
.portfolio-filter { text-align: center; margin-bottom: 30px; }
|
||||
.filter-btn {
|
||||
background: none; border: none; font-size: 1rem; color: #666; padding: 10px 20px;
|
||||
cursor: pointer; font-weight: 500; transition: 0.3s;
|
||||
}
|
||||
.filter-btn.active, .filter-btn:hover { color: #ff6b6b; font-weight: 700; border-bottom: 2px solid #ff6b6b;}
|
||||
|
||||
/* Process & CTA */
|
||||
.step-number {
|
||||
background: #fff; color: #ff6b6b; border: 2px solid #ff6b6b;
|
||||
width: 50px; height: 50px; line-height: 46px; border-radius: 50%;
|
||||
margin: 0 auto 20px; font-weight: bold; font-size: 1.2rem;
|
||||
}
|
||||
.cta-section { background: linear-gradient(135deg, #ee5253 0%, #ff9f43 100%); color: #fff; padding: 80px 0; text-align: center; }
|
||||
.cta-buttons .btn-primary-large { background: #fff; color: #ee5253; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; margin-right: 15px; }
|
||||
.cta-buttons .btn-secondary-large { border: 2px solid #fff; color: #fff; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.hero-content { flex-direction: column; text-align: center; }
|
||||
.hero-text { max-width: 100%; margin-bottom: 40px; }
|
||||
.hero-visual { width: 100%; display: flex; justify-content: center; }
|
||||
}
|
||||
</style><?php
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1,612 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/laser.TLRB/style.css">', 0);
|
||||
|
||||
// ==============================================================================
|
||||
// [설정 영역] 이곳의 변수만 변경하면 전체 내용이 적용됩니다.
|
||||
// ==============================================================================
|
||||
|
||||
// 💡 [추가] Hero 섹션 우측 바로가기 박스 표시 여부 (true: 보임, false: 숨김)
|
||||
$show_hero_visual = false;
|
||||
|
||||
|
||||
function get_bo_table_from_url_regex_index($url) {
|
||||
if (preg_match('/bo_table=([^&]+)/', $url, $matches)) {
|
||||
return $matches[1];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// 동적 데이터 생성 로직
|
||||
$hero_box_config = [];
|
||||
$board_groups = [];
|
||||
$icons = ['📊', '🔬', '🆕', '📅', '📷', '💡', '📦']; // 아이콘 목록
|
||||
$hero_box_config[] = [
|
||||
'title' =>'정기 구독 & 광고 문의',
|
||||
'icon' => $icons[5] ?? '📄',
|
||||
'bo_table' => '정기구독',
|
||||
'desc' => '정기 구독 & 광고 문의'
|
||||
];
|
||||
|
||||
// 메뉴 데이터 가져오기 (그누보드 공통 함수 사용)
|
||||
$menu_datas = get_menu_db(0, false);
|
||||
foreach ($menu_datas as $i=> $row) {
|
||||
if($i===1 || $i===2) {
|
||||
foreach ($row['sub'] as $sub) {
|
||||
$menu_name = $sub['me_name'];
|
||||
list($sub_ko, $sub_en) = split_menu_name($sub['me_name']);
|
||||
$menu_name = $sub_ko . '<br>'. $sub_en;
|
||||
$board_name = get_bo_table_from_url_regex_index($sub['me_link']);
|
||||
$board_groups[$board_name] = [
|
||||
'bo_table' => $board_name,
|
||||
'title' => $menu_name,
|
||||
'latest_rows' => 5,
|
||||
'latest_subject_len' => 10,
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 💡 [수정] 레이아웃 그리드 설정 (다차원 배열 구조)
|
||||
// 각 행(row) 안에 열(columns)을 정의하고, 각 열 안에 행(rows) 개수를 정의합니다.
|
||||
$layout_grid_config = [
|
||||
'top' => [
|
||||
'columns' => [
|
||||
['rows' => 1], // 1번 열: 1행 (통짜)
|
||||
['rows' => 2], // 2번 열: 2행 (상하 분할)
|
||||
]
|
||||
],
|
||||
'middle' => [
|
||||
'columns' => [
|
||||
['rows' => 2], // 1번 열: 2행
|
||||
['rows' => 2], // 2번 열: 2행
|
||||
],
|
||||
|
||||
],
|
||||
'bottom' => [
|
||||
'columns' => [
|
||||
['rows' => 1] // 1번 열: 1행 (통짜)
|
||||
]
|
||||
]
|
||||
];
|
||||
?>
|
||||
<div class="creative-portfolio-container">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<img src="<?php echo G5_THEME_URL ?>/rb.layout/laser/img/main.png" alt="Laser Technology 2026" class="bg-img">
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="hero-text">
|
||||
<!-- <span class="hero-badge">Vol. 384 | MONTHLY LASER TECHNOLOGY</span>-->
|
||||
<?php
|
||||
// 💡 [수정] DB 연동: 그누보드 기본환경설정 여분필드 2번(cf_2) 사용
|
||||
// 관리자 > 환경설정 > 기본환경설정 > 여분필드 2번에 입력된 값을 출력
|
||||
// 값이 없으면 기본 텍스트 출력
|
||||
$hero_title_line = (isset($config['cf_1']) && $config['cf_1']) ? nl2br($config['cf_1']) : '2026 레이저 산업';
|
||||
$hero_title_line_text = (isset($config['cf_2']) && $config['cf_2']) ? nl2br($config['cf_2']) : '전시 지형이 움직인다';
|
||||
?>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line"> <?php echo $hero_title_line; ?></span>
|
||||
<span class="title-line gradient-text"><?php echo $hero_title_line_text; ?></span>
|
||||
</h1>
|
||||
<?php
|
||||
// 💡 [수정] DB 연동: 그누보드 기본환경설정 여분필드 2번(cf_2) 사용
|
||||
// 관리자 > 환경설정 > 기본환경설정 > 여분필드 2번에 입력된 값을 출력
|
||||
// 값이 없으면 기본 텍스트 출력
|
||||
$hero_subtitle = (isset($config['cf_3']) && $config['cf_3']) ? nl2br($config['cf_3']) : '기술 경쟁에서 시장 전략으로, 국내 전시회의 재조명.<br>월간 레이저 기술이 제안하는 2026년 산업 로드맵을 확인하십시오.';
|
||||
$hero_subtitle_but = (isset($config['cf_4']) && $config['cf_4']) ? $config['cf_4'] : '#journal-list';
|
||||
|
||||
// 💡 [추가] URL 도메인 자동 보정 로직
|
||||
// 저장된 URL이 http:// 또는 https:// 로 시작하는 경우, 현재 접속한 도메인으로 교체합니다.
|
||||
if (preg_match('/^https?:\/\/[^\/]+(.*)$/i', $hero_subtitle_but, $matches)) {
|
||||
// $matches[1]은 도메인 이후의 경로 (예: /bbs/board.php?bo_table=...)
|
||||
// 현재 접속 프로토콜과 도메인을 가져옴
|
||||
$current_domain = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'];
|
||||
$hero_subtitle_but = $current_domain . $matches[1];
|
||||
}
|
||||
?>
|
||||
<p class="hero-subtitle">
|
||||
<?php echo $hero_subtitle; ?>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="<?php echo $hero_subtitle_but; ?>" class="btn-primary">전체 기사 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-content">
|
||||
<!-- 💡 [수정] 설정에 따라 hero-visual 표시 여부 결정 -->
|
||||
<?php if ($show_hero_visual): ?>
|
||||
<div class="hero-visual">
|
||||
<div class="creative-showcase">
|
||||
<?php foreach($hero_box_config as $i => $box): ?>
|
||||
<?php if (empty($box['bo_table']) || $box['bo_table'] =='정기구독') :?>
|
||||
<div class="showcase-item btn-open-contact-modal item-<?php echo $i; ?>" onclick="location.href='#'" style="cursor:pointer;"> <div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<span class="item-desc"><?php echo $box['desc']; ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="showcase-item item-<?php echo $i; ?>" onclick="location.href='<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $box['bo_table']; ?>'" style="cursor:pointer;">
|
||||
<div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<span class="item-desc"><?php echo $box['desc']; ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio-section" id="journal-list">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<!-- <span class="section-badge">CONTENTS</span>-->
|
||||
<?php
|
||||
// 💡 [수정] DB 연동: 그누보드 기본환경설정 여분필드 1번(cf_1) 사용
|
||||
// 관리자 > 환경설정 > 기본환경설정 > 여분필드 1번에 입력된 값을 출력
|
||||
// 값이 없으면 기본값 '이달의 주요 섹션' 출력
|
||||
$section_title = (isset($config['cf_5']) && $config['cf_5']) ? $config['cf_5'] : '이달의 주요 섹션';
|
||||
?>
|
||||
<h2 class="section-title"><?php echo $section_title; ?></h2>
|
||||
<!-- <p class="section-subtitle">월간 레이저 기술 제384호 목차 구성</p>-->
|
||||
</div>
|
||||
|
||||
<div class="portfolio-filter">
|
||||
<button class="filter-btn active" data-filter="all">전체 보기</button>
|
||||
<?php foreach($board_groups as $key => $group): ?>
|
||||
<button class="filter-btn" data-filter="<?php echo $key; ?>"><?php echo $group['title']; ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
<?php
|
||||
$all_items = []; // 모든 게시판의 아이템을 담을 배열
|
||||
|
||||
foreach($board_groups as $key => $group):
|
||||
$bo_table = $group['bo_table'];
|
||||
$write_table = $g5['write_prefix'] . $bo_table;
|
||||
|
||||
// wr_8 값이 있는 게시물만 조회 (최신순)
|
||||
// wr_is_comment = 0 (댓글 제외)
|
||||
$sql = " SELECT * FROM {$write_table} WHERE wr_is_comment = 0 AND wr_8 <> '' ORDER BY wr_id DESC LIMIT {$group['latest_rows']} ";
|
||||
$result = sql_query($sql);
|
||||
while ($row = sql_fetch_array($result)) {
|
||||
|
||||
$row['bo_table'] = $bo_table;
|
||||
$row['group_key'] = $key;
|
||||
$row['group_title'] = $group['title'];
|
||||
$all_items[] = $row;
|
||||
}
|
||||
endforeach;
|
||||
|
||||
$cols = 4; // 한 줄에 보여줄 개수
|
||||
$total_count = count($all_items);
|
||||
|
||||
// 첫 줄은 무조건 출력
|
||||
$first_row_count = min($total_count, $cols);
|
||||
for ($i = 0; $i < $first_row_count; $i++) {
|
||||
$lt = $all_items[$i];
|
||||
$thumb = get_list_thumbnail($lt['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = get_pretty_url($lt['bo_table'], $lt['wr_id']);
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80);
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $lt['group_key']; ?>" data-index="<?php echo $i; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $lt['group_title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
// 두 번째 줄부터 4의 배수 처리
|
||||
if ($total_count > $cols) {
|
||||
$remaining_items = array_slice($all_items, $cols);
|
||||
$remaining_count = count($remaining_items);
|
||||
$valid_count = floor($remaining_count / $cols) * $cols;
|
||||
|
||||
for ($i = 0; $i < $valid_count; $i++) {
|
||||
$lt = $remaining_items[$i];
|
||||
$thumb = get_list_thumbnail($lt['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = get_pretty_url($lt['bo_table'], $lt['wr_id']);
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80);
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $lt['group_key']; ?>" data-index="<?php echo $i + $cols; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $lt['group_title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<main class="layout-main-content1">
|
||||
|
||||
<?php foreach ($layout_grid_config as $row_name => $row_config): ?>
|
||||
<!-- 행(Row) 시작 -->
|
||||
<div class="layout-row layout-row-<?php echo $row_name; ?>">
|
||||
|
||||
<?php
|
||||
$columns = $row_config['columns'];
|
||||
$col_index = 1;
|
||||
foreach ($columns as $col_config):
|
||||
$row_count = isset($col_config['rows']) ? $col_config['rows'] : 1;
|
||||
?>
|
||||
<!-- 열(Column) 시작 -->
|
||||
<div class="layout-col layout-col-<?php echo $col_index; ?>">
|
||||
<?php for ($r = 1; $r <= $row_count; $r++): ?>
|
||||
<!-- 내부 행(Inner Row) 시작 -->
|
||||
<div class="flex_box layout-inner-row" data-layout="main-content-<?php echo $row_name; ?>-col<?php echo $col_index; ?>-row<?php echo $r; ?>">
|
||||
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php
|
||||
$col_index++;
|
||||
endforeach;
|
||||
?>
|
||||
|
||||
</div>
|
||||
<!-- 행(Row) 끝 -->
|
||||
<?php endforeach; ?>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="cta-section">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <a href="javascript:void(0);" class="btn-open-contact-modal open-contact-modal btn-secondary-large">정기 구독 신청 & 광고 게재 문의</a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
/**
|
||||
* $rowcount: 현재 선택된 필터 값을 저장하는 전역적 변수
|
||||
* 초기값은 'all'로 설정하여 초기 로드 시 동작을 제어합니다.
|
||||
*/
|
||||
var $rowcount = "all";
|
||||
|
||||
/**
|
||||
* 필터링 실행 함수
|
||||
* @param {string} filterValue - 클릭된 버튼의 data-filter 값
|
||||
*/
|
||||
function applyDynamicFilter(filterValue) {
|
||||
// 변수에 현재 필터 상태 저장 (요청하신 부분)
|
||||
$rowcount = filterValue;
|
||||
|
||||
// 애니메이션 성능을 위해 현재 표시된 것들을 먼저 숨김
|
||||
$('.portfolio-item').hide();
|
||||
|
||||
if ($rowcount === 'all') {
|
||||
/**
|
||||
* [전체 보기 모드]
|
||||
* 전체 아이템을 모두 보여줍니다. (PHP에서 이미 4의 배수로 잘랐으므로 그대로 노출)
|
||||
*/
|
||||
$('.portfolio-item').stop().fadeIn(300);
|
||||
|
||||
} else {
|
||||
/**
|
||||
* [특정 카테고리 모드]
|
||||
* 선택된 카테고리에 해당하는 아이템 전체(최대 5개) 노출
|
||||
*/
|
||||
$('.portfolio-item[data-category="' + $rowcount + '"]').stop().fadeIn(300);
|
||||
}
|
||||
|
||||
// 콘솔을 통해 현재 $rowcount에 저장된 데이터 확인
|
||||
console.log("현재 필터링 변수($rowcount) 상태: " + $rowcount);
|
||||
}
|
||||
|
||||
// 필터 버튼 클릭 이벤트 핸들러
|
||||
$('.filter-btn').on('click', function(e) {
|
||||
e.preventDefault(); // 링크 이동 방지
|
||||
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
|
||||
// 1. UI 변경: 활성화 버튼 표시
|
||||
$('.filter-btn').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
// 2. 필터 로직 실행
|
||||
applyDynamicFilter(filterValue);
|
||||
});
|
||||
|
||||
/**
|
||||
* 페이지 로드 시 초기 실행
|
||||
* 처음 접속 시 'all' 상태를 기준으로 각 섹션별 2개씩 노출합니다.
|
||||
*/
|
||||
applyDynamicFilter('all');
|
||||
|
||||
// 💡 [추가] 스크롤 애니메이션 (Intersection Observer)
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.2 // 20% 보일 때 실행
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
observer.unobserve(entry.target); // 한 번 실행 후 관찰 중지
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 관찰 대상 요소 선택
|
||||
document.querySelectorAll('.process-step, .skill-category').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* --- Hero Section 스타일 수정 --- */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px; /* 요청하신 높이 고정 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.hero-background .bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 이미지가 찌그러지지 않고 영역을 꽉 채움 */
|
||||
}
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6); /* 💡 [수정] 오버레이를 더 어둡게 하여 가독성 향상 */
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.hero-content {
|
||||
max-width: 1400px; margin: 0 auto; padding: 0 30px;
|
||||
width: 100%; display: flex; justify-content: space-between; align-items: center;
|
||||
position: relative; z-index: 1; color: #fff;
|
||||
}
|
||||
.hero-text {
|
||||
max-width: 45%;
|
||||
position: absolute;
|
||||
left: 20.33%;
|
||||
top: 35.33%;
|
||||
margin-top: -240px; /* 위로 240px 이동 */
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 3.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
.hero-title .gradient-text {
|
||||
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem; /* 💡 [수정] 크기 약간 키움 */
|
||||
opacity: 1;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 700; /* 💡 [수정] 굵게 */
|
||||
line-height: 1.6;
|
||||
/* 💡 [수정] 흰색 테두리 효과 (그림자) */
|
||||
text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff;
|
||||
color: #002060; /* 💡 [수정] 진한 남색 */
|
||||
}
|
||||
|
||||
/* 💡 [추가] Hero CTA 버튼 스타일 (최신 트렌드 반영) */
|
||||
.hero-cta {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.hero-cta .btn-primary {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 18px 45px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
/* 배경: 밝은 배경에서도 잘 보이도록 진한 그라데이션 사용 */
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* 보라-파랑 그라데이션 */
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 10px 20px rgba(37, 117, 252, 0.3); /* 부드러운 그림자 */
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
/* 호버 시 배경 반전 효과를 위한 가상 요소 */
|
||||
.hero-cta .btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
.hero-cta .btn-primary:hover {
|
||||
transform: translateY(-3px); /* 살짝 위로 떠오름 */
|
||||
box-shadow: 0 15px 30px rgba(37, 117, 252, 0.5); /* 그림자 강조 */
|
||||
}
|
||||
.hero-cta .btn-primary:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hero Visual (우측 작은 박스들) */
|
||||
.creative-showcase {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
.showcase-item {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s, background 0.3s;
|
||||
width: 160px;
|
||||
}
|
||||
.showcase-item:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-color: #4facfe;
|
||||
}
|
||||
.item-icon { font-size: 2rem; margin-bottom: 10px; }
|
||||
.showcase-item h4 { font-size: 1rem; color: #fff; margin: 0 0 5px; font-weight: 600; }
|
||||
.item-desc { font-size: 0.75rem; color: #ddd; }
|
||||
|
||||
/* --- Portfolio Section (게시판 연동 & 마우스오버) --- */
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.portfolio-item { /* 개별 아이템 */ }
|
||||
.portfolio-wrapper {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
height: 300px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.portfolio-image { width: 100%; height: 100%; }
|
||||
.portfolio-image img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 마우스 오버 효과 핵심 CSS */
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
display: flex; flex-direction: column;
|
||||
justify-content: center; align-items: center;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.portfolio-wrapper:hover .portfolio-overlay { opacity: 1; }
|
||||
.portfolio-wrapper:hover .portfolio-image img { transform: scale(1.1); }
|
||||
|
||||
.overlay-content h3 { color: #fff; font-size: 1.3rem; margin-bottom: 15px; line-height: 1.4; }
|
||||
.overlay-content .summary { color: #ccc; font-size: 0.9rem; margin-bottom: 20px; line-height: 1.6; }
|
||||
.category-tag {
|
||||
display: inline-block; padding: 4px 10px;
|
||||
background: #4facfe; color: #fff; border-radius: 20px;
|
||||
font-size: 0.7rem; margin-bottom: 15px;
|
||||
}
|
||||
.btn-view {
|
||||
display: inline-block; padding: 8px 20px;
|
||||
border: 1px solid #fff; color: #fff; text-decoration: none;
|
||||
border-radius: 4px; transition: 0.2s; font-size: 0.9rem;
|
||||
}
|
||||
.btn-view:hover { background: #fff; color: #000; }
|
||||
|
||||
/* Filter Buttons */
|
||||
.portfolio-filter { text-align: center; margin-bottom: 30px; }
|
||||
.filter-btn {
|
||||
background: #0868cd; /* 💡 [수정] 기본 배경색 진한 파랑 */
|
||||
border: none; font-size: 1rem; color: #fff; /* 💡 [수정] 기본 글자색 흰색 */
|
||||
padding: 10px 20px; cursor: pointer; font-weight: 500;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.filter-btn.active, .filter-btn:hover {
|
||||
background: #4f7595;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Process & CTA 스타일 조정 */
|
||||
.process-step { padding: 20px; }
|
||||
.step-number {
|
||||
background: #fff; color: #007bff; border: 2px solid #007bff;
|
||||
width: 50px; height: 50px; line-height: 46px; border-radius: 50%;
|
||||
margin: 0 auto 20px; font-weight: bold; font-size: 1.2rem;
|
||||
}
|
||||
.cta-section { background: #fff !important; color: #fff; padding: 0px !important; text-align: center; }
|
||||
.cta-buttons .btn-primary-large { background: #fff; color: #1e3c72; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; margin-right: 15px; }
|
||||
.cta-section .btn-secondary-large { border: 2px solid #fff !important; background: #1e3c72 !important; color: #fff !important; padding: 15px 40px !important; border-radius: 30px !important; text-decoration: none; font-weight: bold; }
|
||||
|
||||
/* 💡 [추가] 플로팅 버튼 스타일 */
|
||||
.floating-contact-btn {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
background-color: #009fe3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 12px 0;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.floating-contact-btn:hover {
|
||||
background-color: #007bb5;
|
||||
}
|
||||
.floating-contact-btn .icon { margin-right: 5px; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.hero-content { flex-direction: column; text-align: center; }
|
||||
.hero-text { max-width: 100%; margin-bottom: 40px; }
|
||||
.hero-visual { width: 100%; display: flex; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
|
||||
|
||||
<script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@700&family=Montserrat:wght@800&display=swap');
|
||||
|
||||
/* 기본 레이아웃 및 폰트 */
|
||||
:root { --point-red: #e61e25; --bg-gray: #f9f9f9; }
|
||||
.journal-main { font-family: 'Pretendard', sans-serif; color: #111; word-break: keep-all; }
|
||||
.serif-title { font-family: 'Noto Serif KR', serif; }
|
||||
.en-title { font-family: 'Montserrat', sans-serif; letter-spacing: -1px; }
|
||||
|
||||
/* [2] 양측 5% 플로팅 광고 영역 (리사이징 최적화) */
|
||||
.float-ad {
|
||||
position: fixed;
|
||||
top: 180px;
|
||||
width: 5%;
|
||||
height: 500px;
|
||||
z-index: 1000;
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.ad-left { left: 15px; }
|
||||
.ad-right { right: 15px; }
|
||||
.ad-inner {
|
||||
width: 100%; height: 100%; overflow: hidden; border: 1px solid #eee; background: #fff;
|
||||
}
|
||||
.ad-inner img {
|
||||
width: 100%; height: 100%; object-fit: cover; /* 어떤 사이즈든 5% 영역에 맞춤 */
|
||||
}
|
||||
|
||||
/* [3] 섹션별 디자인 */
|
||||
/* 히어로 섹션 (클래식 저널) */
|
||||
.hero-section { padding: 120px 0; background: #fff; border-bottom: 2px solid #111;
|
||||
background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=600&q=80")}
|
||||
.hero-cat { font-weight: 800; color: var(--point-red); font-size: 0.85rem; letter-spacing: 3px; }
|
||||
|
||||
/* 뉴스 & 매거진 그리드 (메트로 스타일) */
|
||||
.news-grid { padding: 80px 0; }
|
||||
.main-post { border-right: 1px solid #eee; padding-right: 40px; }
|
||||
.sub-post-list { padding-left: 20px; }
|
||||
.post-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #f0f0f0; }
|
||||
|
||||
/* 업체 & 기술 갤러리 */
|
||||
.tech-section { padding: 80px 0; background: var(--bg-gray); }
|
||||
.gallery-card { background: #fff; transition: 0.3s; height: 100%; }
|
||||
.gallery-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
|
||||
.gallery-img { aspect-ratio: 4/3; overflow: hidden; }
|
||||
.gallery-img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/* 실시간 인입 섹션 (커뮤니티) */
|
||||
.live-feed { padding: 60px 0; border-top: 1px solid #111; }
|
||||
.feed-box { background: #111; color: #fff; padding: 30px; }
|
||||
|
||||
/* 모바일에서는 광고 숨김 */
|
||||
@media (max-width: 1300px) { .float-ad { display: none; } }
|
||||
</style>
|
||||
|
||||
<div class="journal-main">
|
||||
|
||||
<aside class="float-ad ad-left"><div class="ad-inner"><a href="#"><img src="좌측광고.jpg" alt="AD"></a></div></aside>
|
||||
<aside class="float-ad ad-right"><div class="ad-inner"><a href="#"><img src="우측광고.jpg" alt="AD"></a></div></aside>
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<span class="hero-cat en-title mb-3 d-block">EDITORIAL FEATURE</span>
|
||||
<h1 class="display-3 serif-title mb-4">빛이 만드는 미래,<br>그 중심의 레이저월드</h1>
|
||||
<p class="lead text-muted mb-0">대한민국 레이저 산업의 모든 정보와 업체, 기술력을 집대성한 전문 저널입니다.</p>
|
||||
</div>
|
||||
<div class="col-lg-4 d-none d-lg-block">
|
||||
<div class="p-4 border-start border-4 border-dark">
|
||||
<h5 class="fw-bold mb-3">Today's Issue</h5>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">● 국산 파이버 레이저의 글로벌 도약</li>
|
||||
<li class="mb-2">● 2026 전시회 핵심 키워드 리포트</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="news-grid">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 main-post">
|
||||
<h3 class="en-title mb-5">LASER NEWS</h3>
|
||||
<div class="mb-5">
|
||||
<img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=1000&q=80" class="img-fluid mb-4" alt="News">
|
||||
<h2 class="serif-title h1">레이저 가공 업계의 디지털 전환: AI가 바꾸는 정밀도의 한계</h2>
|
||||
<p class="text-muted mt-3">최신 AI 제어 시스템을 도입한 가공기들이 불량률을 0.01% 이하로 낮추고 있습니다. 이번 전시회에서 공개된 핵심 기술을 분석합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 sub-post-list">
|
||||
<h3 class="en-title mb-5 text-muted">LATEST FEED</h3>
|
||||
<div class="post-item">
|
||||
<small class="text-danger fw-bold">국내뉴스</small>
|
||||
<h5 class="fw-bold mt-2">차세대 광원 국산화 성공 업체 인터뷰</h5>
|
||||
</div>
|
||||
<div class="post-item">
|
||||
<small class="text-danger fw-bold">해외뉴스</small>
|
||||
<h5 class="fw-bold mt-2">유럽 전시회 현장 리포트: 그린 레이저의 부상</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tech-section">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between align-items-end mb-5">
|
||||
<h3 class="en-title mb-0">COMPANY & TECH</h3>
|
||||
<a href="/bbs/board.php?bo_table=company" class="text-dark small fw-bold">VIEW ALL +</a>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-card border shadow-sm">
|
||||
<div class="gallery-img"><img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=600&q=80"></div>
|
||||
<div class="p-4">
|
||||
<h5 class="serif-title mb-0">우수 업체 탐방: (주)광성레이저</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-card border shadow-sm">
|
||||
<div class="gallery-img"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=600&q=80"></div>
|
||||
<div class="p-4">
|
||||
<h5 class="serif-title mb-0">파이버 레이저 유지보수 가이드</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="feed-box h-100">
|
||||
<h5 class="en-title text-warning mb-4">LIVE MARKET</h5>
|
||||
<ul class="list-unstyled small mb-0">
|
||||
<li class="mb-3 border-bottom border-secondary pb-2 d-flex justify-content-between">
|
||||
<span>중고 커팅기 급매합니다</span><span class="text-white-50">12:00</span>
|
||||
</li>
|
||||
<li class="mb-3 border-bottom border-secondary pb-2 d-flex justify-content-between">
|
||||
<span>레이저 전문가 구인 중</span><span class="text-white-50">11:30</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Lenis Smooth Scroll 초기화
|
||||
const lenis = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||
smoothWheel: true
|
||||
});
|
||||
|
||||
function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
requestAnimationFrame(raf);
|
||||
|
||||
// 스크롤 시 사이드 광고가 아주 살짝 늦게 따라오는 역동적 효과 (Parallax)
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
const ads = document.querySelectorAll('.float-ad');
|
||||
ads.forEach(ad => {
|
||||
// 광고 위치가 자연스럽게 고정되도록 브라우저 성능에 맞춰 보정
|
||||
ad.style.transform = `translateY(${Math.sin(scrollY * 0.001) * 2}px)`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,376 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
|
||||
// ==============================================================================
|
||||
// [DATA CONFIGURATION] 상단 설정 영역
|
||||
// 이곳의 데이터만 수정하면 페이지 전체의 문구와 링크가 변경됩니다.
|
||||
// ==============================================================================
|
||||
|
||||
// 1. Hero 섹션 설정 (메인 타이틀 및 링크)
|
||||
$hero_config = [
|
||||
'title_top' => '새로운 지평선을 열다',
|
||||
'title_main' => 'SUPERNOVA JOURNAL',
|
||||
'subtitle' => '레이저 기술의 무한한 잠재력을 실현하고<br>일상 속 혁신을 이끄는 글로벌 파트너',
|
||||
'btn_1_txt' => '저널 구독하기',
|
||||
'btn_1_url' => G5_BBS_URL.'/board.php?bo_table=subscribe',
|
||||
'btn_2_txt' => '솔루션 문의',
|
||||
'btn_2_url' => G5_BBS_URL.'/board.php?bo_table=qa'
|
||||
];
|
||||
|
||||
// 2. Hero 우측 '바로가기 박스' 설정 (4개) - 클릭 시 이동할 게시판 URL 설정
|
||||
$shortcut_boxes = [
|
||||
[
|
||||
'title' => '최신 연구',
|
||||
'icon' => '🔬',
|
||||
'desc' => '세포 연구 및 의학 발전',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=research'
|
||||
],
|
||||
[
|
||||
'title' => '일상 활용',
|
||||
'icon' => '🏙️',
|
||||
'desc' => '건설, 치과, 테마파크',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=dailylife'
|
||||
],
|
||||
[
|
||||
'title' => '맞춤 서비스',
|
||||
'icon' => '⚙️',
|
||||
'desc' => '디자인 및 물류 솔루션',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=custom'
|
||||
],
|
||||
[
|
||||
'title' => '제품 소개',
|
||||
'icon' => '💎',
|
||||
'desc' => '레이저 가죽 & 소모품',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=products'
|
||||
]
|
||||
];
|
||||
|
||||
// 3. Portfolio 섹션 (게시판 연동 그룹) 설정
|
||||
// 제공된 텍스트 내용을 기반으로 4개 카테고리 분류
|
||||
$board_groups = [
|
||||
'tech' => [
|
||||
'bo_table' => 'laser_tech',
|
||||
'title' => 'TECH FRONTIERS',
|
||||
'desc' => '물리학자들의 새로운 아이디어와 레이저 기술의 비약적 발전'
|
||||
],
|
||||
'life' => [
|
||||
'bo_table' => 'laser_life',
|
||||
'title' => 'LASER IN DAILY LIFE',
|
||||
'desc' => '전문가들이 전하는 우리 삶 속에 스며든 레이저 이야기'
|
||||
],
|
||||
'product' => [
|
||||
'bo_table' => 'laser_goods',
|
||||
'title' => 'CUSTOM PRODUCTS',
|
||||
'desc' => '승화 인쇄용 가죽 블랭크 및 다양한 맞춤형 레이저 소모품'
|
||||
],
|
||||
'service' => [
|
||||
'bo_table' => 'laser_service',
|
||||
'title' => 'QUALITY & SERVICE',
|
||||
'desc' => '편리한 물류 서비스와 산업 표준을 초과하는 품질 보증'
|
||||
]
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="creative-portfolio-container">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<img src="<?php echo G5_THEME_URL ?>/img/supernova_hero.jpg" alt="Supernova Laser World" class="bg-img">
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="hero-shapes">
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">LASER TECHNOLOGY JOURNAL</span>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line"><?php echo $hero_config['title_top']; ?></span>
|
||||
<span class="title-line gradient-text"><?php echo $hero_config['title_main']; ?></span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
<?php echo $hero_config['subtitle']; ?>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="<?php echo $hero_config['btn_1_url']; ?>" class="btn-primary"><?php echo $hero_config['btn_1_txt']; ?></a>
|
||||
<a href="<?php echo $hero_config['btn_2_url']; ?>" class="btn-secondary"><?php echo $hero_config['btn_2_txt']; ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="creative-showcase">
|
||||
<?php foreach($shortcut_boxes as $box): ?>
|
||||
<div class="showcase-item" onclick="location.href='<?php echo $box['url']; ?>'">
|
||||
<div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<p class="box-desc"><?php echo $box['desc']; ?></p>
|
||||
</div>
|
||||
<div class="hover-indicator">GO ➔</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio-section" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">DISCOVER</span>
|
||||
<h2 class="section-title">주요 저널 및 제품</h2>
|
||||
<p class="section-subtitle">슈퍼노바가 제안하는 기술의 기적과 솔루션</p>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-filter">
|
||||
<button class="filter-btn active" data-filter="all">전체 보기</button>
|
||||
<?php foreach($board_groups as $key => $group): ?>
|
||||
<button class="filter-btn" data-filter="<?php echo $key; ?>"><?php echo $group['title']; ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
<?php
|
||||
foreach($board_groups as $key => $group):
|
||||
// 최신글 추출 (이미지 포함된 게시물 위주)
|
||||
$list = get_latest('gallery', $group['bo_table'], 5, 40);
|
||||
|
||||
if(is_array($list) && count($list) > 0) {
|
||||
foreach($list as $lt) {
|
||||
$thumb = get_list_thumbnail($group['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = $lt['href'];
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80); // 본문 요약
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $key; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $group['title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
endforeach;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">WHY CHOOSE SUPERNOVA?</span>
|
||||
<h2 class="section-title">슈퍼노바만의 특별한 가치</h2>
|
||||
<p class="section-subtitle">품질과 서비스의 확실한 보증을 제공합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="process-timeline">
|
||||
<div class="process-step">
|
||||
<div class="step-number">01</div>
|
||||
<div class="step-content">
|
||||
<h3>Customization</h3>
|
||||
<p>고객 샘플 기반 디자인, 사양, 포장 맞춤 제작</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">02</div>
|
||||
<div class="step-content">
|
||||
<h3>Logistics</h3>
|
||||
<p>고객 요구에 맞춘 비용 효율적 물류 솔루션 제공</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">03</div>
|
||||
<div class="step-content">
|
||||
<h3>Innovation</h3>
|
||||
<p>15년 전문성을 바탕으로 한 지속적인 제품 혁신</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">04</div>
|
||||
<div class="step-content">
|
||||
<h3>Support</h3>
|
||||
<p>모든 제품에 대한 무료 기술 지원 및 철저한 안내</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>글로벌 레이저 기술의 파트너</h2>
|
||||
<p>전 세계 시장에서 검증된 서브리메이션 및 레이저 소재를 만나보세요.</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=contact" class="btn-primary-large">제휴 문의</a>
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=catalog" class="btn-secondary-large">제품 카탈로그</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
// 탭 필터링 로직
|
||||
$('.filter-btn').on('click', function() {
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$('.filter-btn').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
if(filterValue == 'all') {
|
||||
$('.portfolio-item').show(300);
|
||||
} else {
|
||||
$('.portfolio-item').hide();
|
||||
$('.portfolio-item[data-category="'+filterValue+'"]').show(300);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS 스타일링 (기능 및 디자인 유지, 색상 테마 조정) */
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px; /* Hero 높이 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
|
||||
}
|
||||
.hero-background .bg-img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.hero-content {
|
||||
max-width: 1400px; margin: 0 auto; padding: 0 30px; width: 100%;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
position: relative; z-index: 1; color: #fff;
|
||||
}
|
||||
.hero-text { max-width: 50%; }
|
||||
.hero-badge {
|
||||
background: #ff6b6b; color: #fff; padding: 5px 12px;
|
||||
border-radius: 20px; font-weight: bold; font-size: 0.85rem; letter-spacing: 1px;
|
||||
}
|
||||
.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin: 20px 0; }
|
||||
.hero-title .gradient-text {
|
||||
background: linear-gradient(to right, #ff6b6b, #feca57);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-subtitle { font-size: 1.2rem; opacity: 0.9; margin-bottom: 40px; font-weight: 300; line-height: 1.6; }
|
||||
|
||||
/* Hero Visual (Small Boxes) */
|
||||
.creative-showcase {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
|
||||
}
|
||||
.showcase-item {
|
||||
background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
padding: 20px; border-radius: 12px; text-align: center;
|
||||
width: 170px; height: 170px;
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
|
||||
}
|
||||
.showcase-item:hover {
|
||||
background: rgba(255,255,255,0.95); transform: translateY(-5px);
|
||||
}
|
||||
.showcase-item:hover h4, .showcase-item:hover .item-icon, .showcase-item:hover .box-desc {
|
||||
color: #333;
|
||||
}
|
||||
.item-icon { font-size: 2.5rem; margin-bottom: 10px; color: #fff; transition: 0.3s;}
|
||||
.showcase-item h4 { font-size: 1.1rem; color: #fff; margin: 0 0 5px; font-weight: 700; transition: 0.3s;}
|
||||
.box-desc { font-size: 0.75rem; color: #ddd; margin: 0; line-height: 1.3; transition: 0.3s;}
|
||||
.hover-indicator {
|
||||
position: absolute; bottom: 10px; font-size: 0.8rem; font-weight: bold; color: #ff6b6b;
|
||||
opacity: 0; transform: translateY(10px); transition: 0.3s;
|
||||
}
|
||||
.showcase-item:hover .hover-indicator { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* Portfolio Section */
|
||||
.portfolio-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-top: 40px;
|
||||
}
|
||||
.portfolio-wrapper {
|
||||
position: relative; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1); height: 320px;
|
||||
}
|
||||
.portfolio-image { width: 100%; height: 100%; }
|
||||
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
text-align: center; padding: 25px;
|
||||
opacity: 0; transition: opacity 0.3s ease;
|
||||
}
|
||||
.portfolio-wrapper:hover .portfolio-overlay { opacity: 1; }
|
||||
.portfolio-wrapper:hover .portfolio-image img { transform: scale(1.1); }
|
||||
|
||||
.overlay-content h3 { color: #fff; font-size: 1.4rem; margin-bottom: 15px; line-height: 1.3; }
|
||||
.overlay-content .summary { color: #ccc; font-size: 0.9rem; margin-bottom: 25px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.category-tag {
|
||||
display: inline-block; padding: 4px 12px; background: #ff6b6b; color: #fff;
|
||||
border-radius: 20px; font-size: 0.7rem; margin-bottom: 15px; font-weight: bold;
|
||||
}
|
||||
.btn-view {
|
||||
display: inline-block; padding: 8px 25px; border: 1px solid #fff; color: #fff;
|
||||
text-decoration: none; border-radius: 30px; transition: 0.2s; font-size: 0.9rem;
|
||||
}
|
||||
.btn-view:hover { background: #fff; color: #000; }
|
||||
|
||||
/* Filter Buttons */
|
||||
.portfolio-filter { text-align: center; margin-bottom: 30px; }
|
||||
.filter-btn {
|
||||
background: none; border: none; font-size: 1rem; color: #666; padding: 10px 20px;
|
||||
cursor: pointer; font-weight: 500; transition: 0.3s;
|
||||
}
|
||||
.filter-btn.active, .filter-btn:hover { color: #ff6b6b; font-weight: 700; border-bottom: 2px solid #ff6b6b;}
|
||||
|
||||
/* Process & CTA */
|
||||
.step-number {
|
||||
background: #fff; color: #ff6b6b; border: 2px solid #ff6b6b;
|
||||
width: 50px; height: 50px; line-height: 46px; border-radius: 50%;
|
||||
margin: 0 auto 20px; font-weight: bold; font-size: 1.2rem;
|
||||
}
|
||||
.cta-section { background: linear-gradient(135deg, #ee5253 0%, #ff9f43 100%); color: #fff; padding: 80px 0; text-align: center; }
|
||||
.cta-buttons .btn-primary-large { background: #fff; color: #ee5253; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; margin-right: 15px; }
|
||||
.cta-buttons .btn-secondary-large { border: 2px solid #fff; color: #fff; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.hero-content { flex-direction: column; text-align: center; }
|
||||
.hero-text { max-width: 100%; margin-bottom: 40px; }
|
||||
.hero-visual { width: 100%; display: flex; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,373 @@
|
||||
/* Modern Minimal Theme Styles */
|
||||
|
||||
/* CSS Variables for consistent theming */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #64748b;
|
||||
--accent-color: #f59e0b;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--text-light: #94a3b8;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-accent: #f1f5f9;
|
||||
--border-color: #e2e8f0;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
margin-right: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #1d4ed8;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-accent);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-image-placeholder {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.minimal-shape {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.minimal-shape::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: var(--spacing-xl);
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.feature-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--bg-accent);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.content-text p {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
padding: var(--spacing-sm) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.benefits-list li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.visual-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.minimal-geometry {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-content h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-content p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background-color: white;
|
||||
color: var(--primary-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary-large:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
|
||||
|
||||
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
|
||||
|
||||
/* Print Styles */
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
document.addEventListener('scroll',()=>{
|
||||
document.querySelectorAll('.board-card').forEach(el=>{
|
||||
el.style.transform = `translateY(${window.scrollY*0.03}px)`;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,877 @@
|
||||
/* Creative Portfolio Theme Styles */
|
||||
|
||||
/* CSS Variables for Creative Theme */
|
||||
:root {
|
||||
--primary-color: #ffffff;
|
||||
--secondary-color: #4ecdc4;
|
||||
--accent-color: #45b7d1;
|
||||
--tertiary-color: #96ceb4;
|
||||
--quaternary-color: #feca57;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--text-light: #bdc3c7;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e9ecef;
|
||||
--border-light: #f1f3f4;
|
||||
--shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 8px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 8px 16px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 16px 32px 0 rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
/* overflow-x: hidden; */
|
||||
}
|
||||
|
||||
.container {
|
||||
/* max-width: 1200px; !important; */ /* 💡 [수정] 고정 너비 제거 */
|
||||
width: 90%; /* 💡 [추가] 화면 너비의 90% 사용 (좌우 5% 여백) */
|
||||
max-width: 1600px; /* 💡 [추가] 너무 넓어지는 것 방지 (선택 사항) */
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/*background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);*/
|
||||
overflow: hidden;
|
||||
/* ✅ 단일 이미지 HERO 설정 */
|
||||
/*background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1920&q=80");*/
|
||||
background-image: url("./img/main.png");
|
||||
background-size: cover; /* ⭐ 가장 중요 */
|
||||
background-position: center; /* ⭐ 중앙 고정 */
|
||||
background-repeat: no-repeat; /* ⭐ 반복 금지 */
|
||||
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.hero-shapes {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: float-shape 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, var(--quaternary-color), var(--primary-color));
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes float-shape {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(180deg); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
/*background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));*/
|
||||
background: #040AEAFF;
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.creative-showcase {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
animation: showcase-float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.showcase-item:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
|
||||
color: white;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(135deg, var(--quaternary-color), var(--primary-color));
|
||||
color: white;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
||||
color: white;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.item-content h4 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes showcase-float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
/* Portfolio Section */
|
||||
.portfolio-section {
|
||||
padding: var(--spacing-lg) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.portfolio-filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: transparent;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn.active,
|
||||
.filter-btn:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.portfolio-item {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.portfolio-item:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.portfolio-image {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .portfolio-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(255, 107, 107, 0.9), rgba(78, 205, 196, 0.9));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .portfolio-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.overlay-content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.overlay-content p {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
/*background: white;*/
|
||||
color: var(--primary-color);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Process Section */
|
||||
.process-section {
|
||||
padding: var(--spacing-sm) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.process-timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.process-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
|
||||
}
|
||||
|
||||
.process-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.process-step.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.process-step:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
margin: 0 var(--spacing-xl);
|
||||
}
|
||||
|
||||
.step-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.step-content p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.step-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.step-features li {
|
||||
padding: var(--spacing-xs) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.step-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.skill-category.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.skill-category:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
height: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
/* Testimonials Section */
|
||||
.testimonials-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.testimonials-slider {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.testimonial-slide {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.testimonial-slide.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.testimonial-content {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-2xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-text p {
|
||||
font-size: 1.25rem;
|
||||
font-style: italic;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.author-photo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.author-photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.author-info h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.author-info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.testimonial-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.testimonial-prev, .testimonial-next {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.testimonial-prev:hover, .testimonial-next:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-text p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary-large, .btn-secondary-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary-large {
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary-large:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.btn-secondary-large {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary-large:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: white;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
/* PC 전용 - 모바일 반응형 제거 */
|
||||
|
||||
/* 메인 레이아웃 그리드 */
|
||||
.layout-main-content1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.layout-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.layout-inner-row {
|
||||
flex: 1;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user