first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
<!--
|
||||
* 환경설정에서 모듈 추가를 사용하려면 반드시 class="flex_box" 를 포함해야 합니다.
|
||||
|
||||
* 참고사항
|
||||
- 섹션을 좌/우 에 배치하는 경우
|
||||
- <div class="flex_box left"></div>
|
||||
- <div class="flex_box right"></div>
|
||||
- 와 같이 class="flex_box" 를 두개로 배치한 후 css를 추가해주세요.
|
||||
|
||||
- 생성되는 모듈은 각 섹션의 좌측부터 순서대로 배치되며
|
||||
- 지정된 width 를 벗어나면 줄바꿈 되어 생성 됩니다.
|
||||
|
||||
- class="flex_box" 를 사용하지 않고 직접 메인페이지를 구성할 수 있습니다.
|
||||
-->
|
||||
|
||||
<div class="flex_box"></div>
|
||||
<div class="flex_box"></div>
|
||||
@@ -0,0 +1 @@
|
||||
/* 레이아웃 CSS */
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
<!--
|
||||
* 환경설정에서 모듈 추가를 사용하려면 반드시 class="flex_box" 를 포함해야 합니다.
|
||||
|
||||
* 참고사항
|
||||
- 섹션을 좌/우 에 배치하는 경우
|
||||
- <div class="flex_box left"></div>
|
||||
- <div class="flex_box right"></div>
|
||||
- 와 같이 class="flex_box" 를 두개로 배치한 후 css를 추가해주세요.
|
||||
|
||||
- 생성되는 모듈은 각 섹션의 좌측부터 순서대로 배치되며
|
||||
- 지정된 width 를 벗어나면 줄바꿈 되어 생성 됩니다.
|
||||
|
||||
- class="flex_box" 를 사용하지 않고 직접 메인페이지를 구성할 수 있습니다.
|
||||
-->
|
||||
|
||||
<div class="flex_box"></div>
|
||||
<div class="flex_box"></div>
|
||||
<div class="flex_box"></div>
|
||||
@@ -0,0 +1 @@
|
||||
/* 레이아웃 CSS */
|
||||
@@ -0,0 +1,29 @@
|
||||
<?php
|
||||
if (!defined('_INDEX_')) {
|
||||
header('Location: ' . G5_URL);
|
||||
exit;
|
||||
}
|
||||
// 이 레이아웃 전용 CSS 파일을 불러옵니다.
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/basic.LR/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
?>
|
||||
|
||||
<!-- 💡 [핵심 수정] Rebuilder 시스템과 연동되는 2단 레이아웃 구조로 변경 -->
|
||||
<main class="layout-main-content">
|
||||
<div class="two-column-layout container">
|
||||
|
||||
<!-- 1. 왼쪽 콘텐츠 영역 -->
|
||||
<div class="col_left">
|
||||
<div class="flex_box" data-layout="main-content-left">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2. 오른쪽 사이드바 영역 -->
|
||||
<aside class="col_right">
|
||||
<div class="flex_box" data-layout="main-content-right">
|
||||
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</main>
|
||||
@@ -0,0 +1,25 @@
|
||||
/*!* 💡 [핵심 수정] 공통 CSS의 position:fixed를 무력화합니다. *!*/
|
||||
/*#header {*/
|
||||
/* position: relative !important;*/
|
||||
/*}*/
|
||||
|
||||
/* Basic.LR Layout Style */
|
||||
.two-column-layout {
|
||||
display: flex;
|
||||
gap: 30px; /* 좌우 콘텐츠 사이의 간격 */
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.col_left {
|
||||
width: 75%; /* 왼쪽 콘텐츠 너비 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.col_right {
|
||||
width: 25%; /* 오른쪽 사이드바 너비 */
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
<!--
|
||||
* 환경설정에서 모듈 추가를 사용하려면 반드시 class="flex_box" 를 포함해야 합니다.
|
||||
|
||||
* 참고사항
|
||||
- 섹션을 좌/우 에 배치하는 경우
|
||||
- <div class="flex_box left"></div>
|
||||
- <div class="flex_box right"></div>
|
||||
- 와 같이 class="flex_box" 를 두개로 배치한 후 css를 추가해주세요.
|
||||
|
||||
- 생성되는 모듈은 각 섹션의 좌측부터 순서대로 배치되며
|
||||
- 지정된 width 를 벗어나면 줄바꿈 되어 생성 됩니다.
|
||||
|
||||
- class="flex_box" 를 사용하지 않고 직접 메인페이지를 구성할 수 있습니다.
|
||||
-->
|
||||
<div class="flex_box"></div>
|
||||
<div class="flex_box flex_box_l"></div>
|
||||
<div class="flex_box flex_box_r"></div>
|
||||
<div class="cb"></div>
|
||||
@@ -0,0 +1,4 @@
|
||||
/* 레이아웃 CSS */
|
||||
.flex_box_l {float:left; width: 30%;}
|
||||
.flex_box_r {float:right; width: 70%;}
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
<?php
|
||||
if (!defined('_INDEX_')) {
|
||||
header('Location: '.G5_URL);
|
||||
exit;
|
||||
}
|
||||
?>
|
||||
|
||||
<!-- 📌 메인 페이지에만 표시될 Hero 섹션을 3단 레이아웃의 바깥으로 이동 -->
|
||||
<section id="hero-prestige" class="hero-prestige">
|
||||
<div class="hero-slider"></div>
|
||||
<div class="hero-content">
|
||||
<h1 class="reveal-up"></h1>
|
||||
<p class="reveal-up" data-delay="200"></p>
|
||||
<!-- <a href="#story" class="cta-button reveal-up" data-delay="400">성진미도어 이야기 보기</a>-->
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 📌 3단 레이아웃을 감싸는 새로운 div 추가 -->
|
||||
<div class="main-content-wrapper">
|
||||
<div class="three-column-layout container">
|
||||
|
||||
<!-- 1. 좌측 사이드바 -->
|
||||
<aside class="layout-sidebar-left">
|
||||
<div class="sidebar-inner">
|
||||
<?php if($is_admin) { ?> <h3 class="sidebar-title">광고 영역</h3> <?php } ?>
|
||||
<!-- 💡 [수정] 좌측 모듈 영역에 고유 ID 부여 -->
|
||||
<div class="flex_box flex_box_l" data-layout="main-left"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- 2. 중앙 메인 콘텐츠 -->
|
||||
<main class="layout-main-content">
|
||||
|
||||
<!-- 💡 [수정] 메인 콘텐츠 상단 모듈 영역에 고유 ID 부여 -->
|
||||
<div class="flex_box" data-layout="main-content-top"></div>
|
||||
|
||||
<!-- 💡 [핵심 수정] 탭 모듈을 호출하는 영역 -->
|
||||
<div class="flex_box" data-layout="main-content-middle">
|
||||
<?php
|
||||
// 1. 커스텀 탭 모듈 파일을 포함합니다.
|
||||
include_once(G5_THEME_PATH.'/rb.custom/tabs/tab_module.php');
|
||||
|
||||
// 2. 탭으로 표시할 내용을 배열로 정의합니다.
|
||||
$main_tabs_config = [
|
||||
[
|
||||
'title' => '공지사항', // 탭에 표시될 이름
|
||||
'type' => 'board', // 타입: 'board' (게시판)
|
||||
'id' => 'notice', // 게시판 ID (bo_table)
|
||||
'options' => ['rows' => 5, 'subject_len' => 40] // 옵션
|
||||
],
|
||||
[
|
||||
'title' => '회사소개', // 탭에 표시될 이름
|
||||
'type' => 'content', // 타입: 'content' (콘텐츠 페이지)
|
||||
'id' => 'company', // 콘텐츠 ID (co_id)
|
||||
],
|
||||
[
|
||||
'title' => '갤러리',
|
||||
'type' => 'board',
|
||||
'id' => 'gallery',
|
||||
'options' => ['rows' => 5, 'subject_len' => 35]
|
||||
],
|
||||
];
|
||||
|
||||
// 3. 설정 배열을 인자로 하여 탭 모듈 함수를 호출합니다.
|
||||
$tmp =rb_tabs($main_tabs_config);
|
||||
rb_log($tmp);
|
||||
|
||||
echo $tmp;
|
||||
// echo rb_tabs($main_tabs_config);
|
||||
?>
|
||||
<h3>sdfsfsfsf</h3>
|
||||
</div>
|
||||
|
||||
<div class="flex_box" data-layout="main-content-bottom"></div>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 3. 우측 사이드바 -->
|
||||
<aside class="layout-sidebar-right">
|
||||
<div class="sidebar-inner">
|
||||
<?php if($is_admin) { ?> <h3 class="sidebar-title">광고 영역</h3> <?php } ?>
|
||||
<!-- 💡 [수정] 우측 모듈 영역에 고유 ID 부여 -->
|
||||
<div class="flex_box flex_box_r" data-layout="main-right"></div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- 📌 3단 레이아웃 끝 -->
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
/*
|
||||
!* 레이아웃 CSS *!
|
||||
.flex_box_l {float:left; width: 30%;}
|
||||
.flex_box_r {float:right; width: 70%;}
|
||||
|
||||
*/
|
||||
/* 📌 [전체 수정] float 대신 Modern Flexbox를 사용하여 레이아웃을 안정적으로 구성합니다. */
|
||||
|
||||
.three-column-layout {
|
||||
display: flex;
|
||||
gap: 30px; /* 컬럼 사이의 간격 */
|
||||
}
|
||||
|
||||
.layout-sidebar-left {
|
||||
flex: 0 0 240px; /* 좌측 사이드바 너비 고정 */
|
||||
}
|
||||
|
||||
.layout-main-content {
|
||||
flex: 1; /* 중앙 콘텐츠가 남은 공간을 모두 차지하도록 설정 */
|
||||
min-width: 0; /* 내용이 많아져도 레이아웃이 깨지지 않도록 설정 */
|
||||
}
|
||||
|
||||
.layout-sidebar-right {
|
||||
flex: 0 0 240px; /* 우측 사이드바 너비 고정 */
|
||||
}
|
||||
|
||||
/* 반응형: 1024px 이하에서는 세로로 쌓이도록 변경 */
|
||||
@@ -0,0 +1,23 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!--
|
||||
* 환경설정에서 모듈 추가를 사용하려면 반드시 class="flex_box" 를 포함해야 합니다.
|
||||
|
||||
* 참고사항
|
||||
- 섹션을 좌/우 에 배치하는 경우
|
||||
- <div class="flex_box left"></div>
|
||||
- <div class="flex_box right"></div>
|
||||
- 와 같이 class="flex_box" 를 두개로 배치한 후 css를 추가해주세요.
|
||||
|
||||
- 생성되는 모듈은 각 섹션의 좌측부터 순서대로 배치되며
|
||||
- 지정된 width 를 벗어나면 줄바꿈 되어 생성 됩니다.
|
||||
|
||||
- class="flex_box" 를 사용하지 않고 직접 메인페이지를 구성할 수 있습니다.
|
||||
-->
|
||||
|
||||
<div class="flex_box"></div>
|
||||
@@ -0,0 +1 @@
|
||||
/* 레이아웃 CSS */
|
||||
@@ -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,767 @@
|
||||
/* 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 */
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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,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,842 @@
|
||||
/* 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 */
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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,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,766 @@
|
||||
/* 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 */
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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,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,781 @@
|
||||
/* 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 */
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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,21 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
|
||||
/**
|
||||
* laser.TLRB 레이아웃 설정 파일
|
||||
* 각 영역(Row)별로 가로 칸(Column) 개수를 설정합니다.
|
||||
*/
|
||||
|
||||
$layout_grid_config = [
|
||||
// '영역ID' => 칸 개수
|
||||
'top' => 1, // main-content-top (1칸: 100%)
|
||||
'middle' => 2, // main-content-middle (2칸: 50% / 50%)
|
||||
'middle1' => 1, // main-content-middle1 (1칸: 100%)
|
||||
'bottom' => 3, // main-content-bottom (3칸: 33% / 33% / 33%)
|
||||
'bottom1' => 1, // main-content-bottom (1칸: 100%)
|
||||
'left_ad' => false,
|
||||
'right_ad' => true,
|
||||
// 필요하다면 아래처럼 추가 가능
|
||||
// 'extra' => 4, // main-content-extra (4칸)
|
||||
];
|
||||
?>
|
||||
@@ -0,0 +1,72 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 이 레이아웃 전용 CSS 파일을 불러옵니다.
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/laser.TLRB/style.css?ver='.G5_SERVER_TIME.'">', 0);
|
||||
|
||||
// 💡 [핵심] 설정 파일 로드
|
||||
$config_path = __DIR__ . '/config.php';
|
||||
if (file_exists($config_path)) {
|
||||
include_once($config_path);
|
||||
} else {
|
||||
// 설정 파일이 없을 경우 기본값
|
||||
$layout_grid_config = [
|
||||
'top' => 1,
|
||||
'middle' => 1,
|
||||
'bottom' => 1,
|
||||
'left_ad' => false,
|
||||
'right_ad' => false,
|
||||
];
|
||||
}
|
||||
?>
|
||||
|
||||
<div class="main-content-wrapper">
|
||||
<div class="three-column-layout container">
|
||||
<?php if ($layout_grid_config['left_ad']===true): ?>
|
||||
<!-- 1. 좌측 사이드바 -->
|
||||
<aside class="layout-sidebar-left">
|
||||
<div class="sidebar-inner">
|
||||
<?php if($is_admin) { ?> <h3 class="sidebar-title">광고 영역</h3> <?php } ?>
|
||||
<!-- 💡 [수정] 좌측 모듈 영역에 고유 ID 부여 -->
|
||||
<div class="flex_box flex_box_l" data-layout="main-left"></div>
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif; ?>
|
||||
<!-- Rebuilder 시스템의 메인 콘텐츠 영역 -->
|
||||
<main class="layout-main-content">
|
||||
|
||||
<?php foreach ($layout_grid_config as $row_name => $columns): ?>
|
||||
<!-- 행(Row) 시작 -->
|
||||
<div class="layout-row layout-row-<?php echo $row_name; ?>" data-columns="<?php echo $columns; ?>">
|
||||
|
||||
<?php if ($columns == 1): ?>
|
||||
<!-- 1칸일 경우: 기존 ID 그대로 사용 (호환성 유지) -->
|
||||
<div class="flex_box layout-col" data-layout="main-content-<?php echo $row_name; ?>">
|
||||
<!-- --><?php //echo rb_get_modules('main-content-'.$row_name); ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<!-- 2칸 이상일 경우: 번호를 붙여서 분할 -->
|
||||
<?php for ($i = 1; $i <= $columns; $i++): ?>
|
||||
<div class="flex_box layout-col" data-layout="main-content-<?php echo $row_name; ?>-<?php echo $i; ?>">
|
||||
<!-- --><?php //echo rb_get_modules('main-content-'.$row_name.'-'.$i); ?>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
<?php endif; ?>
|
||||
|
||||
</div>
|
||||
<!-- 행(Row) 끝 -->
|
||||
<?php endforeach; ?>
|
||||
|
||||
</main>
|
||||
<!-- 3. 우측 사이드바 -->
|
||||
<?php if ($layout_grid_config['right_ad']===true): ?>
|
||||
<aside class="layout-sidebar-right">
|
||||
<div class="sidebar-inner">
|
||||
<?php if($is_admin) { ?> <h3 class="sidebar-title">광고 영역</h3> <?php } ?>
|
||||
<!-- 💡 [수정] 우측 모듈 영역에 고유 ID 부여 -->
|
||||
<div class="flex_box flex_box_r" data-layout="main-right"></div>
|
||||
</div>
|
||||
</aside>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,28 @@
|
||||
/* laser.TLRB Layout Style - Dynamic Grid */
|
||||
|
||||
.layout-main-content {
|
||||
width: 100%;
|
||||
padding-top: 80px !important;
|
||||
}
|
||||
|
||||
|
||||
/* 행(Row) 스타일 */
|
||||
.layout-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px; /* 행 사이 간격 */
|
||||
gap: 20px; /* 열 사이 간격 */
|
||||
}
|
||||
|
||||
.layout-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* 열(Column) 스타일 */
|
||||
.layout-col {
|
||||
flex: 1; /* 남은 공간을 균등하게 차지 */
|
||||
min-width: 0; /* 내용물이 넘쳐도 레이아웃 깨짐 방지 */
|
||||
}
|
||||
|
||||
/* 모바일 반응형 */
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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,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 */
|
||||
|
||||
|
||||
Reference in New Issue
Block a user