Spaces:

nkjoy
/

kmeda

Running

App Files Files Community

kmeda / organization.html

nkjoy

- 찾아오시는 길 페이지 만들어줘!

67e2182 verified 7 months ago

raw

history blame contribute delete

9.83 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>조직도 - 케이미디어</title>
	<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
	<script src="https://cdn.tailwindcss.com"></script>
	<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
	<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
	<script src="https://unpkg.com/feather-icons"></script>
	<script src="https://cdn.jsdelivr.net/npm/orgchart@3.7.0/dist/js/jquery.orgchart.min.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/orgchart@3.7.0/dist/css/jquery.orgchart.min.css">
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');
	body {
	font-family: 'Noto Sans KR', sans-serif;
	scroll-behavior: smooth;
	}
	.glass-effect {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	}
	.gradient-text {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}

	/* 파스텔+유리카드 느낌 */
	.oc-node .oc-card {
	border-radius: 14px;
	border: 1px solid rgba(255,255,255,0.5);
	background: linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.6));
	backdrop-filter: blur(6px);
	box-shadow: 0 8px 24px rgba(16,24,40,0.08);
	transition: all 0.25s ease;
	}
	.oc-node .oc-title {
	font-weight: 700;
	color: #111827;
	letter-spacing: -0.2px;
	}
	.oc-connector, .oc-connector > span {
	border-color: #D1D5DB !important; /* 라인 연회색 */
	}
	.oc-node:hover .oc-card {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(16,24,40,0.12);
	}
	/* 분류별 색 뱃지 느낌 */
	[data-node-id="본사"] .oc-title {
	color:#0F172A;
	}
	[data-node-id="이사회-운영위원회·감사"] .oc-card {
	background:linear-gradient(180deg,#FFE4E6,#FFF);
	}
	[data-node-id="경영지원본부"] .oc-card {
	background:linear-gradient(180deg,#E0F2FE,#FFF);
	}
	[data-node-id^="에스제이지점"] .oc-card {
	background:linear-gradient(180deg,#DCFCE7,#FFF);
	}

	#chart-container {
	height: 600px;
	overflow: auto;
	padding: 20px;
	}
	</style>
	</head>
	<body class="bg-gray-50 text-gray-800">
	<!-- Navigation -->
	<nav class="fixed w-full z-50 glass-effect py-4 px-6">
	<div class="container mx-auto flex justify-between items-center">
	<a href="index.html" class="text-2xl font-bold text-white">KMedia</a>
	<div class="hidden md:flex space-x-8">
	<a href="about.html" class="text-white hover:text-purple-200 transition">회사소개</a>
	<a href="overview.html" class="text-white hover:text-purple-200 transition">회사개요</a>
	<a href="history.html" class="text-white hover:text-purple-200 transition">연혁</a>
	<a href="organization.html" class="text-white font-semibold hover:text-purple-200 transition">조직도</a>
	<a href="index.html#business" class="text-white hover:text-purple-200 transition">사업영역</a>
	<a href="index.html#promotion" class="text-white hover:text-purple-200 transition">홍보마당</a>
	<a href="index.html#communication" class="text-white hover:text-purple-200 transition">소통마당</a>
	</div>
	<button class="md:hidden text-white">
	<i data-feather="menu"></i>
	</button>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="pt-32 pb-20 bg-gradient-to-r from-purple-500 to-indigo-600 text-white">
	<div class="container mx-auto px-6 text-center">
	<h1 class="text-4xl md:text-6xl font-bold mb-6" data-aos="fade-up">조직도</h1>
	<p class="text-xl md:text-2xl max-w-3xl mx-auto" data-aos="fade-up" data-aos-delay="100">
	케이미디어의 조직 구조를 확인하세요
	</p>
	</div>
	</section>

	<!-- Organization Chart -->
	<section class="py-20 bg-white">
	<div class="container mx-auto px-6">
	<div class="max-w-6xl mx-auto">
	<div id="chart-container"></div>
	</div>
	</div>
	</section>

	<!-- Organization Description -->
	<section class="py-20 bg-gray-100">
	<div class="container mx-auto px-6">
	<div class="max-w-4xl mx-auto text-center" data-aos="fade-up">
	<h2 class="text-3xl font-bold mb-6">조직 운영 철학</h2>
	<p class="text-lg text-gray-600 leading-relaxed">
	케이미디어는 효율적인 의사결정과 유연한 조직운영을 위해
	지역별 지점과 사업별 총괄부문으로 구성된 조직구조를 유지하고 있습니다.
	이를 통해 고객 중심의 빠른 대응과 전문성 있는 서비스 제공이 가능합니다.
	</p>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-gray-900 text-white py-12">
	<div class="container mx-auto px-6">
	<div class="grid md:grid-cols-4 gap-8">
	<div>
	<h4 class="text-lg font-semibold mb-4">KMedia</h4>
	<p class="text-gray-400">사람 중심의 창의적인 미디어 솔루션</p>
	</div>
	<div>
	<h4 class="text-lg font-semibold mb-4">연락처</h4>
	<p class="text-gray-400">Tel: 02-1234-5678</p>
	<p class="text-gray-400">Email: info@kmedia.com</p>
	</div>
	<div>
	<h4 class="text-lg font-semibold mb-4">주소</h4>
	<p class="text-gray-400">서울특별시 강남구 테헤란로 123</p>
	</div>
	<div>
	<h4 class="text-lg font-semibold mb-4">Follow Us</h4>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-white"><i data-feather="facebook"></i></a>
	<a href="#" class="text-gray-400 hover:text-white"><i data-feather="instagram"></i></a>
	<a href="#" class="text-gray-400 hover:text-white"><i data-feather="twitter"></i></a>
	<a href="#" class="text-gray-400 hover:text-white"><i data-feather="linkedin"></i></a>
	</div>
	</div>
	</div>
	<div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
	<p>© 2023 KMedia. All rights reserved.</p>
	</div>
	</div>
	</footer>

	<script>
	// Initialize AOS
	AOS.init({
	duration: 1000,
	once: true
	});

	// Initialize Feather Icons
	feather.replace();

	// Organization Chart Data
	$(function() {
	var datascource = {
	'name': '본사',
	'title': '',
	'children': [
	{
	'name': '이사회',
	'title': '운영위원회 · 감사',
	'children': [
	{
	'name': '경영지원본부',
	'title': '',
	'children': [
	{
	'name': '에스제이지점',
	'title': '파주시',
	'children': [
	{ 'name': '엠부스영상전시관', 'title': '' }
	]
	},
	{
	'name': '에스제이지점',
	'title': '고양시',
	'children': [
	{ 'name': '인쇄총괄', 'title': '' }
	]
	},
	{
	'name': '에스제이지점',
	'title': '김포시',
	'children': [
	{ 'name': '디지털콘텐츠 총괄', 'title': '' }
	]
	}
	]
	}
	]
	}
	]
	};

	$('#chart-container').orgchart({
	'data' : datascource,
	'nodeContent': 'title',
	'pan': true,
	'zoom': true,
	'zoominLimit': 2,
	'zoomoutLimit': 0.5
	});
	});
	</script>
	</body>
	</html>