first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,376 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
|
||||
// ==============================================================================
|
||||
// [DATA CONFIGURATION] 상단 설정 영역
|
||||
// 이곳의 데이터만 수정하면 페이지 전체의 문구와 링크가 변경됩니다.
|
||||
// ==============================================================================
|
||||
|
||||
// 1. Hero 섹션 설정 (메인 타이틀 및 링크)
|
||||
$hero_config = [
|
||||
'title_top' => '새로운 지평선을 열다',
|
||||
'title_main' => 'SUPERNOVA JOURNAL',
|
||||
'subtitle' => '레이저 기술의 무한한 잠재력을 실현하고<br>일상 속 혁신을 이끄는 글로벌 파트너',
|
||||
'btn_1_txt' => '저널 구독하기',
|
||||
'btn_1_url' => G5_BBS_URL.'/board.php?bo_table=subscribe',
|
||||
'btn_2_txt' => '솔루션 문의',
|
||||
'btn_2_url' => G5_BBS_URL.'/board.php?bo_table=qa'
|
||||
];
|
||||
|
||||
// 2. Hero 우측 '바로가기 박스' 설정 (4개) - 클릭 시 이동할 게시판 URL 설정
|
||||
$shortcut_boxes = [
|
||||
[
|
||||
'title' => '최신 연구',
|
||||
'icon' => '🔬',
|
||||
'desc' => '세포 연구 및 의학 발전',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=research'
|
||||
],
|
||||
[
|
||||
'title' => '일상 활용',
|
||||
'icon' => '🏙️',
|
||||
'desc' => '건설, 치과, 테마파크',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=dailylife'
|
||||
],
|
||||
[
|
||||
'title' => '맞춤 서비스',
|
||||
'icon' => '⚙️',
|
||||
'desc' => '디자인 및 물류 솔루션',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=custom'
|
||||
],
|
||||
[
|
||||
'title' => '제품 소개',
|
||||
'icon' => '💎',
|
||||
'desc' => '레이저 가죽 & 소모품',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=products'
|
||||
]
|
||||
];
|
||||
|
||||
// 3. Portfolio 섹션 (게시판 연동 그룹) 설정
|
||||
// 제공된 텍스트 내용을 기반으로 4개 카테고리 분류
|
||||
$board_groups = [
|
||||
'tech' => [
|
||||
'bo_table' => 'laser_tech',
|
||||
'title' => 'TECH FRONTIERS',
|
||||
'desc' => '물리학자들의 새로운 아이디어와 레이저 기술의 비약적 발전'
|
||||
],
|
||||
'life' => [
|
||||
'bo_table' => 'laser_life',
|
||||
'title' => 'LASER IN DAILY LIFE',
|
||||
'desc' => '전문가들이 전하는 우리 삶 속에 스며든 레이저 이야기'
|
||||
],
|
||||
'product' => [
|
||||
'bo_table' => 'laser_goods',
|
||||
'title' => 'CUSTOM PRODUCTS',
|
||||
'desc' => '승화 인쇄용 가죽 블랭크 및 다양한 맞춤형 레이저 소모품'
|
||||
],
|
||||
'service' => [
|
||||
'bo_table' => 'laser_service',
|
||||
'title' => 'QUALITY & SERVICE',
|
||||
'desc' => '편리한 물류 서비스와 산업 표준을 초과하는 품질 보증'
|
||||
]
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="creative-portfolio-container">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<img src="<?php echo G5_THEME_URL ?>/img/supernova_hero.jpg" alt="Supernova Laser World" class="bg-img">
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="hero-shapes">
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">LASER TECHNOLOGY JOURNAL</span>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line"><?php echo $hero_config['title_top']; ?></span>
|
||||
<span class="title-line gradient-text"><?php echo $hero_config['title_main']; ?></span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
<?php echo $hero_config['subtitle']; ?>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="<?php echo $hero_config['btn_1_url']; ?>" class="btn-primary"><?php echo $hero_config['btn_1_txt']; ?></a>
|
||||
<a href="<?php echo $hero_config['btn_2_url']; ?>" class="btn-secondary"><?php echo $hero_config['btn_2_txt']; ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="creative-showcase">
|
||||
<?php foreach($shortcut_boxes as $box): ?>
|
||||
<div class="showcase-item" onclick="location.href='<?php echo $box['url']; ?>'">
|
||||
<div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<p class="box-desc"><?php echo $box['desc']; ?></p>
|
||||
</div>
|
||||
<div class="hover-indicator">GO ➔</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio-section" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">DISCOVER</span>
|
||||
<h2 class="section-title">주요 저널 및 제품</h2>
|
||||
<p class="section-subtitle">슈퍼노바가 제안하는 기술의 기적과 솔루션</p>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-filter">
|
||||
<button class="filter-btn active" data-filter="all">전체 보기</button>
|
||||
<?php foreach($board_groups as $key => $group): ?>
|
||||
<button class="filter-btn" data-filter="<?php echo $key; ?>"><?php echo $group['title']; ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
<?php
|
||||
foreach($board_groups as $key => $group):
|
||||
// 최신글 추출 (이미지 포함된 게시물 위주)
|
||||
$list = get_latest('gallery', $group['bo_table'], 5, 40);
|
||||
|
||||
if(is_array($list) && count($list) > 0) {
|
||||
foreach($list as $lt) {
|
||||
$thumb = get_list_thumbnail($group['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = $lt['href'];
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80); // 본문 요약
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $key; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $group['title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
endforeach;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">WHY CHOOSE SUPERNOVA?</span>
|
||||
<h2 class="section-title">슈퍼노바만의 특별한 가치</h2>
|
||||
<p class="section-subtitle">품질과 서비스의 확실한 보증을 제공합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="process-timeline">
|
||||
<div class="process-step">
|
||||
<div class="step-number">01</div>
|
||||
<div class="step-content">
|
||||
<h3>Customization</h3>
|
||||
<p>고객 샘플 기반 디자인, 사양, 포장 맞춤 제작</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">02</div>
|
||||
<div class="step-content">
|
||||
<h3>Logistics</h3>
|
||||
<p>고객 요구에 맞춘 비용 효율적 물류 솔루션 제공</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">03</div>
|
||||
<div class="step-content">
|
||||
<h3>Innovation</h3>
|
||||
<p>15년 전문성을 바탕으로 한 지속적인 제품 혁신</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">04</div>
|
||||
<div class="step-content">
|
||||
<h3>Support</h3>
|
||||
<p>모든 제품에 대한 무료 기술 지원 및 철저한 안내</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>글로벌 레이저 기술의 파트너</h2>
|
||||
<p>전 세계 시장에서 검증된 서브리메이션 및 레이저 소재를 만나보세요.</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=contact" class="btn-primary-large">제휴 문의</a>
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=catalog" class="btn-secondary-large">제품 카탈로그</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
// 탭 필터링 로직
|
||||
$('.filter-btn').on('click', function() {
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$('.filter-btn').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
if(filterValue == 'all') {
|
||||
$('.portfolio-item').show(300);
|
||||
} else {
|
||||
$('.portfolio-item').hide();
|
||||
$('.portfolio-item[data-category="'+filterValue+'"]').show(300);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS 스타일링 (기능 및 디자인 유지, 색상 테마 조정) */
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px; /* Hero 높이 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
|
||||
}
|
||||
.hero-background .bg-img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.hero-content {
|
||||
max-width: 1400px; margin: 0 auto; padding: 0 30px; width: 100%;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
position: relative; z-index: 1; color: #fff;
|
||||
}
|
||||
.hero-text { max-width: 50%; }
|
||||
.hero-badge {
|
||||
background: #ff6b6b; color: #fff; padding: 5px 12px;
|
||||
border-radius: 20px; font-weight: bold; font-size: 0.85rem; letter-spacing: 1px;
|
||||
}
|
||||
.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin: 20px 0; }
|
||||
.hero-title .gradient-text {
|
||||
background: linear-gradient(to right, #ff6b6b, #feca57);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-subtitle { font-size: 1.2rem; opacity: 0.9; margin-bottom: 40px; font-weight: 300; line-height: 1.6; }
|
||||
|
||||
/* Hero Visual (Small Boxes) */
|
||||
.creative-showcase {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
|
||||
}
|
||||
.showcase-item {
|
||||
background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
padding: 20px; border-radius: 12px; text-align: center;
|
||||
width: 170px; height: 170px;
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
|
||||
}
|
||||
.showcase-item:hover {
|
||||
background: rgba(255,255,255,0.95); transform: translateY(-5px);
|
||||
}
|
||||
.showcase-item:hover h4, .showcase-item:hover .item-icon, .showcase-item:hover .box-desc {
|
||||
color: #333;
|
||||
}
|
||||
.item-icon { font-size: 2.5rem; margin-bottom: 10px; color: #fff; transition: 0.3s;}
|
||||
.showcase-item h4 { font-size: 1.1rem; color: #fff; margin: 0 0 5px; font-weight: 700; transition: 0.3s;}
|
||||
.box-desc { font-size: 0.75rem; color: #ddd; margin: 0; line-height: 1.3; transition: 0.3s;}
|
||||
.hover-indicator {
|
||||
position: absolute; bottom: 10px; font-size: 0.8rem; font-weight: bold; color: #ff6b6b;
|
||||
opacity: 0; transform: translateY(10px); transition: 0.3s;
|
||||
}
|
||||
.showcase-item:hover .hover-indicator { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* Portfolio Section */
|
||||
.portfolio-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-top: 40px;
|
||||
}
|
||||
.portfolio-wrapper {
|
||||
position: relative; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1); height: 320px;
|
||||
}
|
||||
.portfolio-image { width: 100%; height: 100%; }
|
||||
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
text-align: center; padding: 25px;
|
||||
opacity: 0; transition: opacity 0.3s ease;
|
||||
}
|
||||
.portfolio-wrapper:hover .portfolio-overlay { opacity: 1; }
|
||||
.portfolio-wrapper:hover .portfolio-image img { transform: scale(1.1); }
|
||||
|
||||
.overlay-content h3 { color: #fff; font-size: 1.4rem; margin-bottom: 15px; line-height: 1.3; }
|
||||
.overlay-content .summary { color: #ccc; font-size: 0.9rem; margin-bottom: 25px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.category-tag {
|
||||
display: inline-block; padding: 4px 12px; background: #ff6b6b; color: #fff;
|
||||
border-radius: 20px; font-size: 0.7rem; margin-bottom: 15px; font-weight: bold;
|
||||
}
|
||||
.btn-view {
|
||||
display: inline-block; padding: 8px 25px; border: 1px solid #fff; color: #fff;
|
||||
text-decoration: none; border-radius: 30px; transition: 0.2s; font-size: 0.9rem;
|
||||
}
|
||||
.btn-view:hover { background: #fff; color: #000; }
|
||||
|
||||
/* Filter Buttons */
|
||||
.portfolio-filter { text-align: center; margin-bottom: 30px; }
|
||||
.filter-btn {
|
||||
background: none; border: none; font-size: 1rem; color: #666; padding: 10px 20px;
|
||||
cursor: pointer; font-weight: 500; transition: 0.3s;
|
||||
}
|
||||
.filter-btn.active, .filter-btn:hover { color: #ff6b6b; font-weight: 700; border-bottom: 2px solid #ff6b6b;}
|
||||
|
||||
/* Process & CTA */
|
||||
.step-number {
|
||||
background: #fff; color: #ff6b6b; border: 2px solid #ff6b6b;
|
||||
width: 50px; height: 50px; line-height: 46px; border-radius: 50%;
|
||||
margin: 0 auto 20px; font-weight: bold; font-size: 1.2rem;
|
||||
}
|
||||
.cta-section { background: linear-gradient(135deg, #ee5253 0%, #ff9f43 100%); color: #fff; padding: 80px 0; text-align: center; }
|
||||
.cta-buttons .btn-primary-large { background: #fff; color: #ee5253; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; margin-right: 15px; }
|
||||
.cta-buttons .btn-secondary-large { border: 2px solid #fff; color: #fff; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.hero-content { flex-direction: column; text-align: center; }
|
||||
.hero-text { max-width: 100%; margin-bottom: 40px; }
|
||||
.hero-visual { width: 100%; display: flex; justify-content: center; }
|
||||
}
|
||||
</style><?php
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 MiB |
@@ -0,0 +1,612 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
//add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/laser.TLRB/style.css">', 0);
|
||||
|
||||
// ==============================================================================
|
||||
// [설정 영역] 이곳의 변수만 변경하면 전체 내용이 적용됩니다.
|
||||
// ==============================================================================
|
||||
|
||||
// 💡 [추가] Hero 섹션 우측 바로가기 박스 표시 여부 (true: 보임, false: 숨김)
|
||||
$show_hero_visual = false;
|
||||
|
||||
|
||||
function get_bo_table_from_url_regex_index($url) {
|
||||
if (preg_match('/bo_table=([^&]+)/', $url, $matches)) {
|
||||
return $matches[1];
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
// 동적 데이터 생성 로직
|
||||
$hero_box_config = [];
|
||||
$board_groups = [];
|
||||
$icons = ['📊', '🔬', '🆕', '📅', '📷', '💡', '📦']; // 아이콘 목록
|
||||
$hero_box_config[] = [
|
||||
'title' =>'정기 구독 & 광고 문의',
|
||||
'icon' => $icons[5] ?? '📄',
|
||||
'bo_table' => '정기구독',
|
||||
'desc' => '정기 구독 & 광고 문의'
|
||||
];
|
||||
|
||||
// 메뉴 데이터 가져오기 (그누보드 공통 함수 사용)
|
||||
$menu_datas = get_menu_db(0, false);
|
||||
foreach ($menu_datas as $i=> $row) {
|
||||
if($i===1 || $i===2) {
|
||||
foreach ($row['sub'] as $sub) {
|
||||
$menu_name = $sub['me_name'];
|
||||
list($sub_ko, $sub_en) = split_menu_name($sub['me_name']);
|
||||
$menu_name = $sub_ko . '<br>'. $sub_en;
|
||||
$board_name = get_bo_table_from_url_regex_index($sub['me_link']);
|
||||
$board_groups[$board_name] = [
|
||||
'bo_table' => $board_name,
|
||||
'title' => $menu_name,
|
||||
'latest_rows' => 5,
|
||||
'latest_subject_len' => 10,
|
||||
];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 💡 [수정] 레이아웃 그리드 설정 (다차원 배열 구조)
|
||||
// 각 행(row) 안에 열(columns)을 정의하고, 각 열 안에 행(rows) 개수를 정의합니다.
|
||||
$layout_grid_config = [
|
||||
'top' => [
|
||||
'columns' => [
|
||||
['rows' => 1], // 1번 열: 1행 (통짜)
|
||||
['rows' => 2], // 2번 열: 2행 (상하 분할)
|
||||
]
|
||||
],
|
||||
'middle' => [
|
||||
'columns' => [
|
||||
['rows' => 2], // 1번 열: 2행
|
||||
['rows' => 2], // 2번 열: 2행
|
||||
],
|
||||
|
||||
],
|
||||
'bottom' => [
|
||||
'columns' => [
|
||||
['rows' => 1] // 1번 열: 1행 (통짜)
|
||||
]
|
||||
]
|
||||
];
|
||||
?>
|
||||
<div class="creative-portfolio-container">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<img src="<?php echo G5_THEME_URL ?>/rb.layout/laser/img/main.png" alt="Laser Technology 2026" class="bg-img">
|
||||
<div class="hero-overlay"></div>
|
||||
</div>
|
||||
|
||||
<div class="hero-text">
|
||||
<!-- <span class="hero-badge">Vol. 384 | MONTHLY LASER TECHNOLOGY</span>-->
|
||||
<?php
|
||||
// 💡 [수정] DB 연동: 그누보드 기본환경설정 여분필드 2번(cf_2) 사용
|
||||
// 관리자 > 환경설정 > 기본환경설정 > 여분필드 2번에 입력된 값을 출력
|
||||
// 값이 없으면 기본 텍스트 출력
|
||||
$hero_title_line = (isset($config['cf_1']) && $config['cf_1']) ? nl2br($config['cf_1']) : '2026 레이저 산업';
|
||||
$hero_title_line_text = (isset($config['cf_2']) && $config['cf_2']) ? nl2br($config['cf_2']) : '전시 지형이 움직인다';
|
||||
?>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line"> <?php echo $hero_title_line; ?></span>
|
||||
<span class="title-line gradient-text"><?php echo $hero_title_line_text; ?></span>
|
||||
</h1>
|
||||
<?php
|
||||
// 💡 [수정] DB 연동: 그누보드 기본환경설정 여분필드 2번(cf_2) 사용
|
||||
// 관리자 > 환경설정 > 기본환경설정 > 여분필드 2번에 입력된 값을 출력
|
||||
// 값이 없으면 기본 텍스트 출력
|
||||
$hero_subtitle = (isset($config['cf_3']) && $config['cf_3']) ? nl2br($config['cf_3']) : '기술 경쟁에서 시장 전략으로, 국내 전시회의 재조명.<br>월간 레이저 기술이 제안하는 2026년 산업 로드맵을 확인하십시오.';
|
||||
$hero_subtitle_but = (isset($config['cf_4']) && $config['cf_4']) ? $config['cf_4'] : '#journal-list';
|
||||
|
||||
// 💡 [추가] URL 도메인 자동 보정 로직
|
||||
// 저장된 URL이 http:// 또는 https:// 로 시작하는 경우, 현재 접속한 도메인으로 교체합니다.
|
||||
if (preg_match('/^https?:\/\/[^\/]+(.*)$/i', $hero_subtitle_but, $matches)) {
|
||||
// $matches[1]은 도메인 이후의 경로 (예: /bbs/board.php?bo_table=...)
|
||||
// 현재 접속 프로토콜과 도메인을 가져옴
|
||||
$current_domain = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'];
|
||||
$hero_subtitle_but = $current_domain . $matches[1];
|
||||
}
|
||||
?>
|
||||
<p class="hero-subtitle">
|
||||
<?php echo $hero_subtitle; ?>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="<?php echo $hero_subtitle_but; ?>" class="btn-primary">전체 기사 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-content">
|
||||
<!-- 💡 [수정] 설정에 따라 hero-visual 표시 여부 결정 -->
|
||||
<?php if ($show_hero_visual): ?>
|
||||
<div class="hero-visual">
|
||||
<div class="creative-showcase">
|
||||
<?php foreach($hero_box_config as $i => $box): ?>
|
||||
<?php if (empty($box['bo_table']) || $box['bo_table'] =='정기구독') :?>
|
||||
<div class="showcase-item btn-open-contact-modal item-<?php echo $i; ?>" onclick="location.href='#'" style="cursor:pointer;"> <div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<span class="item-desc"><?php echo $box['desc']; ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div class="showcase-item item-<?php echo $i; ?>" onclick="location.href='<?php echo G5_BBS_URL ?>/board.php?bo_table=<?php echo $box['bo_table']; ?>'" style="cursor:pointer;">
|
||||
<div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<span class="item-desc"><?php echo $box['desc']; ?></span>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio-section" id="journal-list">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<!-- <span class="section-badge">CONTENTS</span>-->
|
||||
<?php
|
||||
// 💡 [수정] DB 연동: 그누보드 기본환경설정 여분필드 1번(cf_1) 사용
|
||||
// 관리자 > 환경설정 > 기본환경설정 > 여분필드 1번에 입력된 값을 출력
|
||||
// 값이 없으면 기본값 '이달의 주요 섹션' 출력
|
||||
$section_title = (isset($config['cf_5']) && $config['cf_5']) ? $config['cf_5'] : '이달의 주요 섹션';
|
||||
?>
|
||||
<h2 class="section-title"><?php echo $section_title; ?></h2>
|
||||
<!-- <p class="section-subtitle">월간 레이저 기술 제384호 목차 구성</p>-->
|
||||
</div>
|
||||
|
||||
<div class="portfolio-filter">
|
||||
<button class="filter-btn active" data-filter="all">전체 보기</button>
|
||||
<?php foreach($board_groups as $key => $group): ?>
|
||||
<button class="filter-btn" data-filter="<?php echo $key; ?>"><?php echo $group['title']; ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
<?php
|
||||
$all_items = []; // 모든 게시판의 아이템을 담을 배열
|
||||
|
||||
foreach($board_groups as $key => $group):
|
||||
$bo_table = $group['bo_table'];
|
||||
$write_table = $g5['write_prefix'] . $bo_table;
|
||||
|
||||
// wr_8 값이 있는 게시물만 조회 (최신순)
|
||||
// wr_is_comment = 0 (댓글 제외)
|
||||
$sql = " SELECT * FROM {$write_table} WHERE wr_is_comment = 0 AND wr_8 <> '' ORDER BY wr_id DESC LIMIT {$group['latest_rows']} ";
|
||||
$result = sql_query($sql);
|
||||
while ($row = sql_fetch_array($result)) {
|
||||
|
||||
$row['bo_table'] = $bo_table;
|
||||
$row['group_key'] = $key;
|
||||
$row['group_title'] = $group['title'];
|
||||
$all_items[] = $row;
|
||||
}
|
||||
endforeach;
|
||||
|
||||
$cols = 4; // 한 줄에 보여줄 개수
|
||||
$total_count = count($all_items);
|
||||
|
||||
// 첫 줄은 무조건 출력
|
||||
$first_row_count = min($total_count, $cols);
|
||||
for ($i = 0; $i < $first_row_count; $i++) {
|
||||
$lt = $all_items[$i];
|
||||
$thumb = get_list_thumbnail($lt['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = get_pretty_url($lt['bo_table'], $lt['wr_id']);
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80);
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $lt['group_key']; ?>" data-index="<?php echo $i; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $lt['group_title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
// 두 번째 줄부터 4의 배수 처리
|
||||
if ($total_count > $cols) {
|
||||
$remaining_items = array_slice($all_items, $cols);
|
||||
$remaining_count = count($remaining_items);
|
||||
$valid_count = floor($remaining_count / $cols) * $cols;
|
||||
|
||||
for ($i = 0; $i < $valid_count; $i++) {
|
||||
$lt = $remaining_items[$i];
|
||||
$thumb = get_list_thumbnail($lt['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = get_pretty_url($lt['bo_table'], $lt['wr_id']);
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80);
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $lt['group_key']; ?>" data-index="<?php echo $i + $cols; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $lt['group_title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<main class="layout-main-content1">
|
||||
|
||||
<?php foreach ($layout_grid_config as $row_name => $row_config): ?>
|
||||
<!-- 행(Row) 시작 -->
|
||||
<div class="layout-row layout-row-<?php echo $row_name; ?>">
|
||||
|
||||
<?php
|
||||
$columns = $row_config['columns'];
|
||||
$col_index = 1;
|
||||
foreach ($columns as $col_config):
|
||||
$row_count = isset($col_config['rows']) ? $col_config['rows'] : 1;
|
||||
?>
|
||||
<!-- 열(Column) 시작 -->
|
||||
<div class="layout-col layout-col-<?php echo $col_index; ?>">
|
||||
<?php for ($r = 1; $r <= $row_count; $r++): ?>
|
||||
<!-- 내부 행(Inner Row) 시작 -->
|
||||
<div class="flex_box layout-inner-row" data-layout="main-content-<?php echo $row_name; ?>-col<?php echo $col_index; ?>-row<?php echo $r; ?>">
|
||||
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</div>
|
||||
<?php
|
||||
$col_index++;
|
||||
endforeach;
|
||||
?>
|
||||
|
||||
</div>
|
||||
<!-- 행(Row) 끝 -->
|
||||
<?php endforeach; ?>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
</section>
|
||||
<!-- <section class="cta-section">-->
|
||||
<!-- <div class="container">-->
|
||||
<!-- <a href="javascript:void(0);" class="btn-open-contact-modal open-contact-modal btn-secondary-large">정기 구독 신청 & 광고 게재 문의</a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
/**
|
||||
* $rowcount: 현재 선택된 필터 값을 저장하는 전역적 변수
|
||||
* 초기값은 'all'로 설정하여 초기 로드 시 동작을 제어합니다.
|
||||
*/
|
||||
var $rowcount = "all";
|
||||
|
||||
/**
|
||||
* 필터링 실행 함수
|
||||
* @param {string} filterValue - 클릭된 버튼의 data-filter 값
|
||||
*/
|
||||
function applyDynamicFilter(filterValue) {
|
||||
// 변수에 현재 필터 상태 저장 (요청하신 부분)
|
||||
$rowcount = filterValue;
|
||||
|
||||
// 애니메이션 성능을 위해 현재 표시된 것들을 먼저 숨김
|
||||
$('.portfolio-item').hide();
|
||||
|
||||
if ($rowcount === 'all') {
|
||||
/**
|
||||
* [전체 보기 모드]
|
||||
* 전체 아이템을 모두 보여줍니다. (PHP에서 이미 4의 배수로 잘랐으므로 그대로 노출)
|
||||
*/
|
||||
$('.portfolio-item').stop().fadeIn(300);
|
||||
|
||||
} else {
|
||||
/**
|
||||
* [특정 카테고리 모드]
|
||||
* 선택된 카테고리에 해당하는 아이템 전체(최대 5개) 노출
|
||||
*/
|
||||
$('.portfolio-item[data-category="' + $rowcount + '"]').stop().fadeIn(300);
|
||||
}
|
||||
|
||||
// 콘솔을 통해 현재 $rowcount에 저장된 데이터 확인
|
||||
console.log("현재 필터링 변수($rowcount) 상태: " + $rowcount);
|
||||
}
|
||||
|
||||
// 필터 버튼 클릭 이벤트 핸들러
|
||||
$('.filter-btn').on('click', function(e) {
|
||||
e.preventDefault(); // 링크 이동 방지
|
||||
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
|
||||
// 1. UI 변경: 활성화 버튼 표시
|
||||
$('.filter-btn').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
// 2. 필터 로직 실행
|
||||
applyDynamicFilter(filterValue);
|
||||
});
|
||||
|
||||
/**
|
||||
* 페이지 로드 시 초기 실행
|
||||
* 처음 접속 시 'all' 상태를 기준으로 각 섹션별 2개씩 노출합니다.
|
||||
*/
|
||||
applyDynamicFilter('all');
|
||||
|
||||
// 💡 [추가] 스크롤 애니메이션 (Intersection Observer)
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.2 // 20% 보일 때 실행
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('animate-in');
|
||||
observer.unobserve(entry.target); // 한 번 실행 후 관찰 중지
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 관찰 대상 요소 선택
|
||||
document.querySelectorAll('.process-step, .skill-category').forEach(el => {
|
||||
observer.observe(el);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* --- Hero Section 스타일 수정 --- */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 500px; /* 요청하신 높이 고정 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
z-index: -1;
|
||||
}
|
||||
.hero-background .bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover; /* 이미지가 찌그러지지 않고 영역을 꽉 채움 */
|
||||
}
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6); /* 💡 [수정] 오버레이를 더 어둡게 하여 가독성 향상 */
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.hero-content {
|
||||
max-width: 1400px; margin: 0 auto; padding: 0 30px;
|
||||
width: 100%; display: flex; justify-content: space-between; align-items: center;
|
||||
position: relative; z-index: 1; color: #fff;
|
||||
}
|
||||
.hero-text {
|
||||
max-width: 45%;
|
||||
position: absolute;
|
||||
left: 20.33%;
|
||||
top: 35.33%;
|
||||
margin-top: -240px; /* 위로 240px 이동 */
|
||||
z-index: 2;
|
||||
color: #fff;
|
||||
}
|
||||
.hero-title {
|
||||
font-size: 3.2rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
|
||||
}
|
||||
.hero-title .gradient-text {
|
||||
background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
text-shadow: none;
|
||||
}
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem; /* 💡 [수정] 크기 약간 키움 */
|
||||
opacity: 1;
|
||||
margin-bottom: 30px;
|
||||
font-weight: 700; /* 💡 [수정] 굵게 */
|
||||
line-height: 1.6;
|
||||
/* 💡 [수정] 흰색 테두리 효과 (그림자) */
|
||||
text-shadow: 1px 1px 0 #ffffff, -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff;
|
||||
color: #002060; /* 💡 [수정] 진한 남색 */
|
||||
}
|
||||
|
||||
/* 💡 [추가] Hero CTA 버튼 스타일 (최신 트렌드 반영) */
|
||||
.hero-cta {
|
||||
margin-top: 40px;
|
||||
}
|
||||
.hero-cta .btn-primary {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 18px 45px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
/* 배경: 밝은 배경에서도 잘 보이도록 진한 그라데이션 사용 */
|
||||
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); /* 보라-파랑 그라데이션 */
|
||||
border-radius: 50px;
|
||||
box-shadow: 0 10px 20px rgba(37, 117, 252, 0.3); /* 부드러운 그림자 */
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
/* 호버 시 배경 반전 효과를 위한 가상 요소 */
|
||||
.hero-cta .btn-primary::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(135deg, #2575fc 0%, #6a11cb 100%);
|
||||
z-index: -1;
|
||||
transition: opacity 0.3s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
.hero-cta .btn-primary:hover {
|
||||
transform: translateY(-3px); /* 살짝 위로 떠오름 */
|
||||
box-shadow: 0 15px 30px rgba(37, 117, 252, 0.5); /* 그림자 강조 */
|
||||
}
|
||||
.hero-cta .btn-primary:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Hero Visual (우측 작은 박스들) */
|
||||
.creative-showcase {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
.showcase-item {
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.3);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
text-align: center;
|
||||
transition: transform 0.3s, background 0.3s;
|
||||
width: 160px;
|
||||
}
|
||||
.showcase-item:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
border-color: #4facfe;
|
||||
}
|
||||
.item-icon { font-size: 2rem; margin-bottom: 10px; }
|
||||
.showcase-item h4 { font-size: 1rem; color: #fff; margin: 0 0 5px; font-weight: 600; }
|
||||
.item-desc { font-size: 0.75rem; color: #ddd; }
|
||||
|
||||
/* --- Portfolio Section (게시판 연동 & 마우스오버) --- */
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
.portfolio-item { /* 개별 아이템 */ }
|
||||
.portfolio-wrapper {
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
height: 300px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.portfolio-image { width: 100%; height: 100%; }
|
||||
.portfolio-image img {
|
||||
width: 100%; height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 마우스 오버 효과 핵심 CSS */
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
display: flex; flex-direction: column;
|
||||
justify-content: center; align-items: center;
|
||||
text-align: center;
|
||||
padding: 30px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.portfolio-wrapper:hover .portfolio-overlay { opacity: 1; }
|
||||
.portfolio-wrapper:hover .portfolio-image img { transform: scale(1.1); }
|
||||
|
||||
.overlay-content h3 { color: #fff; font-size: 1.3rem; margin-bottom: 15px; line-height: 1.4; }
|
||||
.overlay-content .summary { color: #ccc; font-size: 0.9rem; margin-bottom: 20px; line-height: 1.6; }
|
||||
.category-tag {
|
||||
display: inline-block; padding: 4px 10px;
|
||||
background: #4facfe; color: #fff; border-radius: 20px;
|
||||
font-size: 0.7rem; margin-bottom: 15px;
|
||||
}
|
||||
.btn-view {
|
||||
display: inline-block; padding: 8px 20px;
|
||||
border: 1px solid #fff; color: #fff; text-decoration: none;
|
||||
border-radius: 4px; transition: 0.2s; font-size: 0.9rem;
|
||||
}
|
||||
.btn-view:hover { background: #fff; color: #000; }
|
||||
|
||||
/* Filter Buttons */
|
||||
.portfolio-filter { text-align: center; margin-bottom: 30px; }
|
||||
.filter-btn {
|
||||
background: #0868cd; /* 💡 [수정] 기본 배경색 진한 파랑 */
|
||||
border: none; font-size: 1rem; color: #fff; /* 💡 [수정] 기본 글자색 흰색 */
|
||||
padding: 10px 20px; cursor: pointer; font-weight: 500;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.filter-btn.active, .filter-btn:hover {
|
||||
background: #4f7595;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Process & CTA 스타일 조정 */
|
||||
.process-step { padding: 20px; }
|
||||
.step-number {
|
||||
background: #fff; color: #007bff; border: 2px solid #007bff;
|
||||
width: 50px; height: 50px; line-height: 46px; border-radius: 50%;
|
||||
margin: 0 auto 20px; font-weight: bold; font-size: 1.2rem;
|
||||
}
|
||||
.cta-section { background: #fff !important; color: #fff; padding: 0px !important; text-align: center; }
|
||||
.cta-buttons .btn-primary-large { background: #fff; color: #1e3c72; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; margin-right: 15px; }
|
||||
.cta-section .btn-secondary-large { border: 2px solid #fff !important; background: #1e3c72 !important; color: #fff !important; padding: 15px 40px !important; border-radius: 30px !important; text-decoration: none; font-weight: bold; }
|
||||
|
||||
/* 💡 [추가] 플로팅 버튼 스타일 */
|
||||
.floating-contact-btn {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
background-color: #009fe3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 12px 0;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
.floating-contact-btn:hover {
|
||||
background-color: #007bb5;
|
||||
}
|
||||
.floating-contact-btn .icon { margin-right: 5px; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.hero-content { flex-direction: column; text-align: center; }
|
||||
.hero-text { max-width: 100%; margin-bottom: 40px; }
|
||||
.hero-visual { width: 100%; display: flex; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,177 @@
|
||||
|
||||
|
||||
<script src="https://unpkg.com/@studio-freight/lenis@1.0.34/dist/lenis.min.js"></script>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@700&family=Montserrat:wght@800&display=swap');
|
||||
|
||||
/* 기본 레이아웃 및 폰트 */
|
||||
:root { --point-red: #e61e25; --bg-gray: #f9f9f9; }
|
||||
.journal-main { font-family: 'Pretendard', sans-serif; color: #111; word-break: keep-all; }
|
||||
.serif-title { font-family: 'Noto Serif KR', serif; }
|
||||
.en-title { font-family: 'Montserrat', sans-serif; letter-spacing: -1px; }
|
||||
|
||||
/* [2] 양측 5% 플로팅 광고 영역 (리사이징 최적화) */
|
||||
.float-ad {
|
||||
position: fixed;
|
||||
top: 180px;
|
||||
width: 5%;
|
||||
height: 500px;
|
||||
z-index: 1000;
|
||||
transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.ad-left { left: 15px; }
|
||||
.ad-right { right: 15px; }
|
||||
.ad-inner {
|
||||
width: 100%; height: 100%; overflow: hidden; border: 1px solid #eee; background: #fff;
|
||||
}
|
||||
.ad-inner img {
|
||||
width: 100%; height: 100%; object-fit: cover; /* 어떤 사이즈든 5% 영역에 맞춤 */
|
||||
}
|
||||
|
||||
/* [3] 섹션별 디자인 */
|
||||
/* 히어로 섹션 (클래식 저널) */
|
||||
.hero-section { padding: 120px 0; background: #fff; border-bottom: 2px solid #111;
|
||||
background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=600&q=80")}
|
||||
.hero-cat { font-weight: 800; color: var(--point-red); font-size: 0.85rem; letter-spacing: 3px; }
|
||||
|
||||
/* 뉴스 & 매거진 그리드 (메트로 스타일) */
|
||||
.news-grid { padding: 80px 0; }
|
||||
.main-post { border-right: 1px solid #eee; padding-right: 40px; }
|
||||
.sub-post-list { padding-left: 20px; }
|
||||
.post-item { margin-bottom: 25px; padding-bottom: 25px; border-bottom: 1px solid #f0f0f0; }
|
||||
|
||||
/* 업체 & 기술 갤러리 */
|
||||
.tech-section { padding: 80px 0; background: var(--bg-gray); }
|
||||
.gallery-card { background: #fff; transition: 0.3s; height: 100%; }
|
||||
.gallery-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
|
||||
.gallery-img { aspect-ratio: 4/3; overflow: hidden; }
|
||||
.gallery-img img { width: 100%; height: 100%; object-fit: cover; }
|
||||
|
||||
/* 실시간 인입 섹션 (커뮤니티) */
|
||||
.live-feed { padding: 60px 0; border-top: 1px solid #111; }
|
||||
.feed-box { background: #111; color: #fff; padding: 30px; }
|
||||
|
||||
/* 모바일에서는 광고 숨김 */
|
||||
@media (max-width: 1300px) { .float-ad { display: none; } }
|
||||
</style>
|
||||
|
||||
<div class="journal-main">
|
||||
|
||||
<aside class="float-ad ad-left"><div class="ad-inner"><a href="#"><img src="좌측광고.jpg" alt="AD"></a></div></aside>
|
||||
<aside class="float-ad ad-right"><div class="ad-inner"><a href="#"><img src="우측광고.jpg" alt="AD"></a></div></aside>
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-lg-8">
|
||||
<span class="hero-cat en-title mb-3 d-block">EDITORIAL FEATURE</span>
|
||||
<h1 class="display-3 serif-title mb-4">빛이 만드는 미래,<br>그 중심의 레이저월드</h1>
|
||||
<p class="lead text-muted mb-0">대한민국 레이저 산업의 모든 정보와 업체, 기술력을 집대성한 전문 저널입니다.</p>
|
||||
</div>
|
||||
<div class="col-lg-4 d-none d-lg-block">
|
||||
<div class="p-4 border-start border-4 border-dark">
|
||||
<h5 class="fw-bold mb-3">Today's Issue</h5>
|
||||
<ul class="list-unstyled small">
|
||||
<li class="mb-2">● 국산 파이버 레이저의 글로벌 도약</li>
|
||||
<li class="mb-2">● 2026 전시회 핵심 키워드 리포트</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="news-grid">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 main-post">
|
||||
<h3 class="en-title mb-5">LASER NEWS</h3>
|
||||
<div class="mb-5">
|
||||
<img src="https://images.unsplash.com/photo-1531297484001-80022131f5a1?auto=format&fit=crop&w=1000&q=80" class="img-fluid mb-4" alt="News">
|
||||
<h2 class="serif-title h1">레이저 가공 업계의 디지털 전환: AI가 바꾸는 정밀도의 한계</h2>
|
||||
<p class="text-muted mt-3">최신 AI 제어 시스템을 도입한 가공기들이 불량률을 0.01% 이하로 낮추고 있습니다. 이번 전시회에서 공개된 핵심 기술을 분석합니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4 sub-post-list">
|
||||
<h3 class="en-title mb-5 text-muted">LATEST FEED</h3>
|
||||
<div class="post-item">
|
||||
<small class="text-danger fw-bold">국내뉴스</small>
|
||||
<h5 class="fw-bold mt-2">차세대 광원 국산화 성공 업체 인터뷰</h5>
|
||||
</div>
|
||||
<div class="post-item">
|
||||
<small class="text-danger fw-bold">해외뉴스</small>
|
||||
<h5 class="fw-bold mt-2">유럽 전시회 현장 리포트: 그린 레이저의 부상</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tech-section">
|
||||
<div class="container">
|
||||
<div class="d-flex justify-content-between align-items-end mb-5">
|
||||
<h3 class="en-title mb-0">COMPANY & TECH</h3>
|
||||
<a href="/bbs/board.php?bo_table=company" class="text-dark small fw-bold">VIEW ALL +</a>
|
||||
</div>
|
||||
<div class="row g-4">
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-card border shadow-sm">
|
||||
<div class="gallery-img"><img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=600&q=80"></div>
|
||||
<div class="p-4">
|
||||
<h5 class="serif-title mb-0">우수 업체 탐방: (주)광성레이저</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="gallery-card border shadow-sm">
|
||||
<div class="gallery-img"><img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=600&q=80"></div>
|
||||
<div class="p-4">
|
||||
<h5 class="serif-title mb-0">파이버 레이저 유지보수 가이드</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-4">
|
||||
<div class="feed-box h-100">
|
||||
<h5 class="en-title text-warning mb-4">LIVE MARKET</h5>
|
||||
<ul class="list-unstyled small mb-0">
|
||||
<li class="mb-3 border-bottom border-secondary pb-2 d-flex justify-content-between">
|
||||
<span>중고 커팅기 급매합니다</span><span class="text-white-50">12:00</span>
|
||||
</li>
|
||||
<li class="mb-3 border-bottom border-secondary pb-2 d-flex justify-content-between">
|
||||
<span>레이저 전문가 구인 중</span><span class="text-white-50">11:30</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Lenis Smooth Scroll 초기화
|
||||
const lenis = new Lenis({
|
||||
duration: 1.2,
|
||||
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
|
||||
smoothWheel: true
|
||||
});
|
||||
|
||||
function raf(time) {
|
||||
lenis.raf(time);
|
||||
requestAnimationFrame(raf);
|
||||
}
|
||||
requestAnimationFrame(raf);
|
||||
|
||||
// 스크롤 시 사이드 광고가 아주 살짝 늦게 따라오는 역동적 효과 (Parallax)
|
||||
window.addEventListener('scroll', () => {
|
||||
const scrollY = window.scrollY;
|
||||
const ads = document.querySelectorAll('.float-ad');
|
||||
ads.forEach(ad => {
|
||||
// 광고 위치가 자연스럽게 고정되도록 브라우저 성능에 맞춰 보정
|
||||
ad.style.transform = `translateY(${Math.sin(scrollY * 0.001) * 2}px)`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,376 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit;
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
|
||||
// ==============================================================================
|
||||
// [DATA CONFIGURATION] 상단 설정 영역
|
||||
// 이곳의 데이터만 수정하면 페이지 전체의 문구와 링크가 변경됩니다.
|
||||
// ==============================================================================
|
||||
|
||||
// 1. Hero 섹션 설정 (메인 타이틀 및 링크)
|
||||
$hero_config = [
|
||||
'title_top' => '새로운 지평선을 열다',
|
||||
'title_main' => 'SUPERNOVA JOURNAL',
|
||||
'subtitle' => '레이저 기술의 무한한 잠재력을 실현하고<br>일상 속 혁신을 이끄는 글로벌 파트너',
|
||||
'btn_1_txt' => '저널 구독하기',
|
||||
'btn_1_url' => G5_BBS_URL.'/board.php?bo_table=subscribe',
|
||||
'btn_2_txt' => '솔루션 문의',
|
||||
'btn_2_url' => G5_BBS_URL.'/board.php?bo_table=qa'
|
||||
];
|
||||
|
||||
// 2. Hero 우측 '바로가기 박스' 설정 (4개) - 클릭 시 이동할 게시판 URL 설정
|
||||
$shortcut_boxes = [
|
||||
[
|
||||
'title' => '최신 연구',
|
||||
'icon' => '🔬',
|
||||
'desc' => '세포 연구 및 의학 발전',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=research'
|
||||
],
|
||||
[
|
||||
'title' => '일상 활용',
|
||||
'icon' => '🏙️',
|
||||
'desc' => '건설, 치과, 테마파크',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=dailylife'
|
||||
],
|
||||
[
|
||||
'title' => '맞춤 서비스',
|
||||
'icon' => '⚙️',
|
||||
'desc' => '디자인 및 물류 솔루션',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=custom'
|
||||
],
|
||||
[
|
||||
'title' => '제품 소개',
|
||||
'icon' => '💎',
|
||||
'desc' => '레이저 가죽 & 소모품',
|
||||
'url' => G5_BBS_URL.'/board.php?bo_table=products'
|
||||
]
|
||||
];
|
||||
|
||||
// 3. Portfolio 섹션 (게시판 연동 그룹) 설정
|
||||
// 제공된 텍스트 내용을 기반으로 4개 카테고리 분류
|
||||
$board_groups = [
|
||||
'tech' => [
|
||||
'bo_table' => 'laser_tech',
|
||||
'title' => 'TECH FRONTIERS',
|
||||
'desc' => '물리학자들의 새로운 아이디어와 레이저 기술의 비약적 발전'
|
||||
],
|
||||
'life' => [
|
||||
'bo_table' => 'laser_life',
|
||||
'title' => 'LASER IN DAILY LIFE',
|
||||
'desc' => '전문가들이 전하는 우리 삶 속에 스며든 레이저 이야기'
|
||||
],
|
||||
'product' => [
|
||||
'bo_table' => 'laser_goods',
|
||||
'title' => 'CUSTOM PRODUCTS',
|
||||
'desc' => '승화 인쇄용 가죽 블랭크 및 다양한 맞춤형 레이저 소모품'
|
||||
],
|
||||
'service' => [
|
||||
'bo_table' => 'laser_service',
|
||||
'title' => 'QUALITY & SERVICE',
|
||||
'desc' => '편리한 물류 서비스와 산업 표준을 초과하는 품질 보증'
|
||||
]
|
||||
];
|
||||
?>
|
||||
|
||||
<div class="creative-portfolio-container">
|
||||
|
||||
<section class="hero-section">
|
||||
<div class="hero-background">
|
||||
<img src="<?php echo G5_THEME_URL ?>/img/supernova_hero.jpg" alt="Supernova Laser World" class="bg-img">
|
||||
<div class="hero-overlay"></div>
|
||||
|
||||
<div class="hero-shapes">
|
||||
<div class="shape shape-1"></div>
|
||||
<div class="shape shape-2"></div>
|
||||
<div class="shape shape-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<span class="hero-badge">LASER TECHNOLOGY JOURNAL</span>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line"><?php echo $hero_config['title_top']; ?></span>
|
||||
<span class="title-line gradient-text"><?php echo $hero_config['title_main']; ?></span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
<?php echo $hero_config['subtitle']; ?>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="<?php echo $hero_config['btn_1_url']; ?>" class="btn-primary"><?php echo $hero_config['btn_1_txt']; ?></a>
|
||||
<a href="<?php echo $hero_config['btn_2_url']; ?>" class="btn-secondary"><?php echo $hero_config['btn_2_txt']; ?></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="creative-showcase">
|
||||
<?php foreach($shortcut_boxes as $box): ?>
|
||||
<div class="showcase-item" onclick="location.href='<?php echo $box['url']; ?>'">
|
||||
<div class="item-content">
|
||||
<div class="item-icon"><?php echo $box['icon']; ?></div>
|
||||
<h4><?php echo $box['title']; ?></h4>
|
||||
<p class="box-desc"><?php echo $box['desc']; ?></p>
|
||||
</div>
|
||||
<div class="hover-indicator">GO ➔</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="portfolio-section" id="portfolio">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">DISCOVER</span>
|
||||
<h2 class="section-title">주요 저널 및 제품</h2>
|
||||
<p class="section-subtitle">슈퍼노바가 제안하는 기술의 기적과 솔루션</p>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-filter">
|
||||
<button class="filter-btn active" data-filter="all">전체 보기</button>
|
||||
<?php foreach($board_groups as $key => $group): ?>
|
||||
<button class="filter-btn" data-filter="<?php echo $key; ?>"><?php echo $group['title']; ?></button>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<div class="portfolio-grid">
|
||||
<?php
|
||||
foreach($board_groups as $key => $group):
|
||||
// 최신글 추출 (이미지 포함된 게시물 위주)
|
||||
$list = get_latest('gallery', $group['bo_table'], 5, 40);
|
||||
|
||||
if(is_array($list) && count($list) > 0) {
|
||||
foreach($list as $lt) {
|
||||
$thumb = get_list_thumbnail($group['bo_table'], $lt['wr_id'], 400, 300);
|
||||
$img_src = $thumb['src'] ? $thumb['src'] : G5_THEME_URL.'/img/no_img.png';
|
||||
$link = $lt['href'];
|
||||
$subject = $lt['wr_subject'];
|
||||
$content = cut_str(strip_tags($lt['wr_content']), 80); // 본문 요약
|
||||
?>
|
||||
<div class="portfolio-item" data-category="<?php echo $key; ?>">
|
||||
<div class="portfolio-wrapper">
|
||||
<div class="portfolio-image">
|
||||
<img src="<?php echo $img_src; ?>" alt="<?php echo $subject; ?>">
|
||||
</div>
|
||||
<div class="portfolio-overlay">
|
||||
<div class="overlay-content">
|
||||
<span class="category-tag"><?php echo $group['title']; ?></span>
|
||||
<h3><?php echo $subject; ?></h3>
|
||||
<p class="summary"><?php echo $content; ?></p>
|
||||
<a href="<?php echo $link; ?>" class="btn-view">자세히 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
endforeach;
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="process-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<span class="section-badge">WHY CHOOSE SUPERNOVA?</span>
|
||||
<h2 class="section-title">슈퍼노바만의 특별한 가치</h2>
|
||||
<p class="section-subtitle">품질과 서비스의 확실한 보증을 제공합니다.</p>
|
||||
</div>
|
||||
|
||||
<div class="process-timeline">
|
||||
<div class="process-step">
|
||||
<div class="step-number">01</div>
|
||||
<div class="step-content">
|
||||
<h3>Customization</h3>
|
||||
<p>고객 샘플 기반 디자인, 사양, 포장 맞춤 제작</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">02</div>
|
||||
<div class="step-content">
|
||||
<h3>Logistics</h3>
|
||||
<p>고객 요구에 맞춘 비용 효율적 물류 솔루션 제공</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">03</div>
|
||||
<div class="step-content">
|
||||
<h3>Innovation</h3>
|
||||
<p>15년 전문성을 바탕으로 한 지속적인 제품 혁신</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="process-step">
|
||||
<div class="step-number">04</div>
|
||||
<div class="step-content">
|
||||
<h3>Support</h3>
|
||||
<p>모든 제품에 대한 무료 기술 지원 및 철저한 안내</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="cta-section">
|
||||
<div class="container">
|
||||
<div class="cta-content">
|
||||
<div class="cta-text">
|
||||
<h2>글로벌 레이저 기술의 파트너</h2>
|
||||
<p>전 세계 시장에서 검증된 서브리메이션 및 레이저 소재를 만나보세요.</p>
|
||||
</div>
|
||||
<div class="cta-buttons">
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=contact" class="btn-primary-large">제휴 문의</a>
|
||||
<a href="<?php echo G5_BBS_URL ?>/board.php?bo_table=catalog" class="btn-secondary-large">제품 카탈로그</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
// 탭 필터링 로직
|
||||
$('.filter-btn').on('click', function() {
|
||||
var filterValue = $(this).attr('data-filter');
|
||||
$('.filter-btn').removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
if(filterValue == 'all') {
|
||||
$('.portfolio-item').show(300);
|
||||
} else {
|
||||
$('.portfolio-item').hide();
|
||||
$('.portfolio-item[data-category="'+filterValue+'"]').show(300);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS 스타일링 (기능 및 디자인 유지, 색상 테마 조정) */
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 600px; /* Hero 높이 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
.hero-background {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
|
||||
}
|
||||
.hero-background .bg-img {
|
||||
width: 100%; height: 100%; object-fit: cover;
|
||||
}
|
||||
.hero-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 100%);
|
||||
}
|
||||
|
||||
/* Hero Content */
|
||||
.hero-content {
|
||||
max-width: 1400px; margin: 0 auto; padding: 0 30px; width: 100%;
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
position: relative; z-index: 1; color: #fff;
|
||||
}
|
||||
.hero-text { max-width: 50%; }
|
||||
.hero-badge {
|
||||
background: #ff6b6b; color: #fff; padding: 5px 12px;
|
||||
border-radius: 20px; font-weight: bold; font-size: 0.85rem; letter-spacing: 1px;
|
||||
}
|
||||
.hero-title { font-size: 3.5rem; font-weight: 800; line-height: 1.2; margin: 20px 0; }
|
||||
.hero-title .gradient-text {
|
||||
background: linear-gradient(to right, #ff6b6b, #feca57);
|
||||
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
|
||||
}
|
||||
.hero-subtitle { font-size: 1.2rem; opacity: 0.9; margin-bottom: 40px; font-weight: 300; line-height: 1.6; }
|
||||
|
||||
/* Hero Visual (Small Boxes) */
|
||||
.creative-showcase {
|
||||
display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;
|
||||
}
|
||||
.showcase-item {
|
||||
background: rgba(255,255,255,0.1); backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
padding: 20px; border-radius: 12px; text-align: center;
|
||||
width: 170px; height: 170px;
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden;
|
||||
}
|
||||
.showcase-item:hover {
|
||||
background: rgba(255,255,255,0.95); transform: translateY(-5px);
|
||||
}
|
||||
.showcase-item:hover h4, .showcase-item:hover .item-icon, .showcase-item:hover .box-desc {
|
||||
color: #333;
|
||||
}
|
||||
.item-icon { font-size: 2.5rem; margin-bottom: 10px; color: #fff; transition: 0.3s;}
|
||||
.showcase-item h4 { font-size: 1.1rem; color: #fff; margin: 0 0 5px; font-weight: 700; transition: 0.3s;}
|
||||
.box-desc { font-size: 0.75rem; color: #ddd; margin: 0; line-height: 1.3; transition: 0.3s;}
|
||||
.hover-indicator {
|
||||
position: absolute; bottom: 10px; font-size: 0.8rem; font-weight: bold; color: #ff6b6b;
|
||||
opacity: 0; transform: translateY(10px); transition: 0.3s;
|
||||
}
|
||||
.showcase-item:hover .hover-indicator { opacity: 1; transform: translateY(0); }
|
||||
|
||||
/* Portfolio Section */
|
||||
.portfolio-grid {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 25px; margin-top: 40px;
|
||||
}
|
||||
.portfolio-wrapper {
|
||||
position: relative; border-radius: 10px; overflow: hidden;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1); height: 320px;
|
||||
}
|
||||
.portfolio-image { width: 100%; height: 100%; }
|
||||
.portfolio-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
text-align: center; padding: 25px;
|
||||
opacity: 0; transition: opacity 0.3s ease;
|
||||
}
|
||||
.portfolio-wrapper:hover .portfolio-overlay { opacity: 1; }
|
||||
.portfolio-wrapper:hover .portfolio-image img { transform: scale(1.1); }
|
||||
|
||||
.overlay-content h3 { color: #fff; font-size: 1.4rem; margin-bottom: 15px; line-height: 1.3; }
|
||||
.overlay-content .summary { color: #ccc; font-size: 0.9rem; margin-bottom: 25px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
|
||||
.category-tag {
|
||||
display: inline-block; padding: 4px 12px; background: #ff6b6b; color: #fff;
|
||||
border-radius: 20px; font-size: 0.7rem; margin-bottom: 15px; font-weight: bold;
|
||||
}
|
||||
.btn-view {
|
||||
display: inline-block; padding: 8px 25px; border: 1px solid #fff; color: #fff;
|
||||
text-decoration: none; border-radius: 30px; transition: 0.2s; font-size: 0.9rem;
|
||||
}
|
||||
.btn-view:hover { background: #fff; color: #000; }
|
||||
|
||||
/* Filter Buttons */
|
||||
.portfolio-filter { text-align: center; margin-bottom: 30px; }
|
||||
.filter-btn {
|
||||
background: none; border: none; font-size: 1rem; color: #666; padding: 10px 20px;
|
||||
cursor: pointer; font-weight: 500; transition: 0.3s;
|
||||
}
|
||||
.filter-btn.active, .filter-btn:hover { color: #ff6b6b; font-weight: 700; border-bottom: 2px solid #ff6b6b;}
|
||||
|
||||
/* Process & CTA */
|
||||
.step-number {
|
||||
background: #fff; color: #ff6b6b; border: 2px solid #ff6b6b;
|
||||
width: 50px; height: 50px; line-height: 46px; border-radius: 50%;
|
||||
margin: 0 auto 20px; font-weight: bold; font-size: 1.2rem;
|
||||
}
|
||||
.cta-section { background: linear-gradient(135deg, #ee5253 0%, #ff9f43 100%); color: #fff; padding: 80px 0; text-align: center; }
|
||||
.cta-buttons .btn-primary-large { background: #fff; color: #ee5253; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; margin-right: 15px; }
|
||||
.cta-buttons .btn-secondary-large { border: 2px solid #fff; color: #fff; padding: 15px 40px; border-radius: 30px; text-decoration: none; font-weight: bold; }
|
||||
|
||||
/* 반응형 */
|
||||
@media (max-width: 991px) {
|
||||
.hero-content { flex-direction: column; text-align: center; }
|
||||
.hero-text { max-width: 100%; margin-bottom: 40px; }
|
||||
.hero-visual { width: 100%; display: flex; justify-content: center; }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,373 @@
|
||||
/* Modern Minimal Theme Styles */
|
||||
|
||||
/* CSS Variables for consistent theming */
|
||||
:root {
|
||||
--primary-color: #2563eb;
|
||||
--secondary-color: #64748b;
|
||||
--accent-color: #f59e0b;
|
||||
--text-primary: #1e293b;
|
||||
--text-secondary: #64748b;
|
||||
--text-light: #94a3b8;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8fafc;
|
||||
--bg-accent: #f1f5f9;
|
||||
--border-color: #e2e8f0;
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
margin-right: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-md);
|
||||
background: linear-gradient(135deg, var(--text-primary) 0%, var(--primary-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: #1d4ed8;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-accent);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-image-placeholder {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.minimal-shape {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.minimal-shape::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: -20px;
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border: 2px solid var(--primary-color);
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: var(--spacing-xl);
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.feature-card.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: var(--bg-accent);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-card p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Content Section */
|
||||
.content-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background-color: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.content-text p {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.benefits-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.benefits-list li {
|
||||
padding: var(--spacing-sm) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.benefits-list li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.content-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.visual-placeholder {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.minimal-geometry {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(45deg, var(--primary-color) 0%, var(--accent-color) 100%);
|
||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
|
||||
animation: rotate 10s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-content h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-content p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background-color: white;
|
||||
color: var(--primary-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary-large:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
|
||||
|
||||
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
|
||||
|
||||
/* Print Styles */
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
document.addEventListener('scroll',()=>{
|
||||
document.querySelectorAll('.board-card').forEach(el=>{
|
||||
el.style.transform = `translateY(${window.scrollY*0.03}px)`;
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,877 @@
|
||||
/* Creative Portfolio Theme Styles */
|
||||
|
||||
/* CSS Variables for Creative Theme */
|
||||
:root {
|
||||
--primary-color: #ffffff;
|
||||
--secondary-color: #4ecdc4;
|
||||
--accent-color: #45b7d1;
|
||||
--tertiary-color: #96ceb4;
|
||||
--quaternary-color: #feca57;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--text-light: #bdc3c7;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #ffffff;
|
||||
--bg-tertiary: #ffffff;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e9ecef;
|
||||
--border-light: #f1f3f4;
|
||||
--shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 8px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 8px 16px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 16px 32px 0 rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.5rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
/* overflow-x: hidden; */
|
||||
}
|
||||
|
||||
.container {
|
||||
/* max-width: 1200px; !important; */ /* 💡 [수정] 고정 너비 제거 */
|
||||
width: 90%; /* 💡 [추가] 화면 너비의 90% 사용 (좌우 5% 여백) */
|
||||
max-width: 1600px; /* 💡 [추가] 너무 넓어지는 것 방지 (선택 사항) */
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-section {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/*background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);*/
|
||||
overflow: hidden;
|
||||
/* ✅ 단일 이미지 HERO 설정 */
|
||||
/*background-image: url("https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?auto=format&fit=crop&w=1920&q=80");*/
|
||||
background-image: url("./img/main.png");
|
||||
background-size: cover; /* ⭐ 가장 중요 */
|
||||
background-position: center; /* ⭐ 중앙 고정 */
|
||||
background-repeat: no-repeat; /* ⭐ 반복 금지 */
|
||||
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.hero-shapes {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.shape {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
animation: float-shape 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.shape-1 {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.shape-2 {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
|
||||
top: 60%;
|
||||
right: 15%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.shape-3 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: linear-gradient(135deg, var(--quaternary-color), var(--primary-color));
|
||||
bottom: 20%;
|
||||
left: 20%;
|
||||
animation-delay: 4s;
|
||||
}
|
||||
|
||||
.shape-4 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
||||
top: 30%;
|
||||
right: 30%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
@keyframes float-shape {
|
||||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||||
50% { transform: translateY(-20px) rotate(180deg); }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
/*background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));*/
|
||||
background: #040AEAFF;
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.creative-showcase {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.showcase-item {
|
||||
position: absolute;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.3s ease;
|
||||
animation: showcase-float 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.showcase-item:hover {
|
||||
transform: scale(1.1);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.item-1 {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.item-2 {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, var(--accent-color), var(--tertiary-color));
|
||||
color: white;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.item-3 {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: linear-gradient(135deg, var(--quaternary-color), var(--primary-color));
|
||||
color: white;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.item-4 {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
background: linear-gradient(135deg, var(--secondary-color), var(--accent-color));
|
||||
color: white;
|
||||
animation-delay: 3s;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.item-content h4 {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@keyframes showcase-float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-10px); }
|
||||
}
|
||||
|
||||
/* Portfolio Section */
|
||||
.portfolio-section {
|
||||
padding: var(--spacing-lg) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.portfolio-filter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: transparent;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-btn.active,
|
||||
.filter-btn:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.portfolio-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.portfolio-item {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.portfolio-item:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.portfolio-image {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.portfolio-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .portfolio-image img {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.portfolio-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(135deg, rgba(255, 107, 107, 0.9), rgba(78, 205, 196, 0.9));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.portfolio-item:hover .portfolio-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
text-align: center;
|
||||
color: white;
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.overlay-content h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.overlay-content p {
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-view {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
/*background: white;*/
|
||||
color: var(--primary-color);
|
||||
border-radius: var(--radius-sm);
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-view:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* Process Section */
|
||||
.process-section {
|
||||
padding: var(--spacing-sm) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.process-timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.process-timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
|
||||
}
|
||||
|
||||
.process-step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.process-step.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.process-step:nth-child(even) {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
box-shadow: var(--shadow-lg);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.step-content {
|
||||
flex: 1;
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
margin: 0 var(--spacing-xl);
|
||||
}
|
||||
|
||||
.step-content h3 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.step-content p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-md);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.step-features {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.step-features li {
|
||||
padding: var(--spacing-xs) 0;
|
||||
color: var(--text-secondary);
|
||||
position: relative;
|
||||
padding-left: var(--spacing-lg);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.step-features li::before {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--primary-color);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/* Skills Section */
|
||||
.skills-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.skills-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.skill-category {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
border: 1px solid var(--border-color);
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
|
||||
.skill-category.animate-in {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.skill-category:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.skill-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-category h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skill-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.skill-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.skill-name {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.skill-level {
|
||||
height: 8px;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.skill-bar {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
|
||||
border-radius: var(--radius-sm);
|
||||
transition: width 1s ease;
|
||||
}
|
||||
|
||||
/* Testimonials Section */
|
||||
.testimonials-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.testimonials-slider {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.testimonial-slide {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.testimonial-slide.active {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.testimonial-content {
|
||||
background: var(--bg-card);
|
||||
padding: var(--spacing-2xl);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-text p {
|
||||
font-size: 1.25rem;
|
||||
font-style: italic;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.author-photo {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 3px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.author-photo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.author-info h4 {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.author-info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.testimonial-controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-top: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.testimonial-prev, .testimonial-next {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: var(--bg-card);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.testimonial-prev:hover, .testimonial-next:hover {
|
||||
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
|
||||
border-color: transparent;
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.cta-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.cta-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.cta-text p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.cta-buttons {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-primary-large, .btn-secondary-large {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
font-size: 1.125rem;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-primary-large {
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-primary-large:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-3px);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.btn-secondary-large {
|
||||
background: transparent;
|
||||
color: white;
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary-large:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: white;
|
||||
}
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
/* PC 전용 - 모바일 반응형 제거 */
|
||||
|
||||
/* 메인 레이아웃 그리드 */
|
||||
.layout-main-content1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layout-row {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.layout-row:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.layout-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.layout-inner-row {
|
||||
flex: 1;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user