Hugging Face's logo

Spaces:
nkjoy
/
kmeda
Running

App Files Community
kmeda / location.html
nkjoy's picture
nkjoy
- ์ฐพ์•„์˜ค์‹œ๋Š” ๊ธธ ํŽ˜์ด์ง€ ๋งŒ๋“ค์–ด์ค˜!
67e2182 verified
Raw
History Blame Contribute Delete
14.1 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>
 <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;
 }
 .location-card {
 transition: all 0.3s ease;
 border-radius: 12px;
 overflow: hidden;
 }
 .location-card:hover {
 transform: translateY(-5px);
 box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 .map-container {
 height: 400px;
 border-radius: 12px;
 overflow: hidden;
 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 </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 hover:text-purple-200 transition">์กฐ์ง๋„</a>
 <a href="location.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>
<!-- Locations Section -->
 <section class="py-20 bg-white">
 <div class="container mx-auto px-6">
 <div class="max-w-6xl mx-auto">
 <div class="text-center mb-16" data-aos="fade-up">
 <h2 class="text-3xl font-bold mb-4">์˜ค์‹œ๋Š” ๋ฐฉ๋ฒ•</h2>
 <p class="text-gray-600 max-w-2xl mx-auto">์ผ€์ด๋ฏธ๋””์–ด๋Š” ์ „๊ตญ ์—ฌ๋Ÿฌ ์ง€์—ญ์— ์ง€์ ์„ ๋‘๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํŽธํ•˜์‹  ์œ„์น˜์˜ ์ง€์ ์„ ๋ฐฉ๋ฌธํ•ด ์ฃผ์„ธ์š”.</p>
 </div>
<!-- Location Cards -->
 <div class="grid md:grid-cols-3 gap-8 mb-16">
 <!-- Paju Location -->
 <div class="location-card bg-white p-6 rounded-xl shadow-md" data-aos="fade-up">
 <div class="mb-4">
 <h3 class="text-xl font-bold mb-2">์— ๋ถ€์Šค ํŒŒ์ฃผ์ </h3>
 <p class="text-gray-600 flex items-center">
 <i data-feather="map-pin" class="mr-2 text-purple-600"></i>
 ๊ฒฝ๊ธฐ๋„ ํŒŒ์ฃผ์‹œ ์ž์œ ๋กœ 2210
 </p>
 </div>
 <div class="map-container mb-4">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3175.4519512345678!2d126.79012345!3d37.75123456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7c0000000000%3A0x0!2z6rO166qF7ZWZ6rWQIOyLnOuLpCDsl5DrjIDsi5zri6QgMjIxMA!5e0!3m2!1sko!2skr!4v1234567890" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
 </div>
 <div class="space-y-2">
 <p class="flex items-center">
 <i data-feather="phone" class="mr-2 text-purple-600"></i>
 031-123-4567
 </p>
 <p class="flex items-center">
 <i data-feather="clock" class="mr-2 text-purple-600"></i>
 ํ‰์ผ 09:00 - 18:00
 </p>
 </div>
 </div>
<!-- Goyang Location -->
 <div class="location-card bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="100">
 <div class="mb-4">
 <h3 class="text-xl font-bold mb-2">๊ณ ์–‘์ง€์ </h3>
 <p class="text-gray-600 flex items-center">
 <i data-feather="map-pin" class="mr-2 text-purple-600"></i>
 ๊ฒฝ๊ธฐ๋„ ๊ณ ์–‘์‹œ ์€๋น›๋กœ 61, 3์ธต
 </p>
 </div>
 <div class="map-container mb-4">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3172.123456789012!2d126.85123456!3d37.64123456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7c1234567890%3A0x0!2z6rO166qF7ZWZ6rWQIOyLnOuLpCDsl5DrjIDsi5zri6QgNjE!5e0!3m2!1sko!2skr!4v1234567891" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
 </div>
 <div class="space-y-2">
 <p class="flex items-center">
 <i data-feather="phone" class="mr-2 text-purple-600"></i>
 031-987-6543
 </p>
 <p class="flex items-center">
 <i data-feather="clock" class="mr-2 text-purple-600"></i>
 ํ‰์ผ 09:00 - 18:00
 </p>
 </div>
 </div>
<!-- Gimpo Location -->
 <div class="location-card bg-white p-6 rounded-xl shadow-md" data-aos="fade-up" data-aos-delay="200">
 <div class="mb-4">
 <h3 class="text-xl font-bold mb-2">๊น€ํฌ์ง€์ </h3>
 <p class="text-gray-600 flex items-center">
 <i data-feather="map-pin" class="mr-2 text-purple-600"></i>
 ๊ฒฝ๊ธฐ๋„ ๊น€ํฌ์‹œ ํ†ต์ง„์ ๋„์‚ฌ๋ฆฌ 480-3
 </p>
 </div>
 <div class="map-container mb-4">
 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3170.123456789012!2d126.70123456!3d37.59123456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x357b7c7890123456%3A0x0!2z6rO166qF7ZWZ6rWQIOyLnOuLpCDsl5DrjIDsi5zri6QgNDgwLTM!5e0!3m2!1sko!2skr!4v1234567892" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
 </div>
 <div class="space-y-2">
 <p class="flex items-center">
 <i data-feather="phone" class="mr-2 text-purple-600"></i>
 031-555-6666
 </p>
 <p class="flex items-center">
 <i data-feather="clock" class="mr-2 text-purple-600"></i>
 ํ‰์ผ 09:00 - 18:00
 </p>
 </div>
 </div>
 </div>
<!-- Transportation Info -->
 <div class="bg-gray-50 p-8 rounded-xl" data-aos="fade-up">
 <h3 class="text-2xl font-bold mb-6 text-center">๊ตํ†ต์•ˆ๋‚ด</h3>
 <div class="grid md:grid-cols-2 gap-8">
 <div>
 <h4 class="text-lg font-semibold mb-3 flex items-center">
 <i data-feather="subway" class="mr-2 text-purple-600"></i>
 ๋Œ€์ค‘๊ตํ†ต ์ด์šฉ์‹œ
 </h4>
 <ul class="space-y-2 text-gray-600">
 <li>โ€ข ์ง€ํ•˜์ฒ  3ํ˜ธ์„  "์ƒ›๋ณ„์—ญ"์—์„œ ๋ฒ„์Šค ํ™˜์Šน</li>
 <li>โ€ข ๋ฒ„์Šค ๋ฒˆํ˜ธ: 700๋ฒˆ, 750๋ฒˆ, 900๋ฒˆ</li>
 <li>โ€ข ๊ฐ ์ง€์ ๋ณ„ ์ •๋ฅ˜์žฅ์—์„œ ํ•˜์ฐจ ํ›„ ๋„๋ณด 5~10๋ถ„</li>
 </ul>
 </div>
 <div>
 <h4 class="text-lg font-semibold mb-3 flex items-center">
 <i data-feather="car" class="mr-2 text-purple-600"></i>
 ์ž๊ฐ€์šฉ ์ด์šฉ์‹œ
 </h4>
 <ul class="space-y-2 text-gray-600">
 <li>โ€ข ๊ฒฝ๋ถ€๊ณ ์†๋„๋กœ ํŒŒ์ฃผIC์—์„œ ์•ฝ 15๋ถ„</li>
 <li>โ€ข ์„œ์šธ์™ธ๊ณฝ์ˆœํ™˜๊ณ ์†๋„๋กœ์—์„œ ์•ฝ 20๋ถ„</li>
 <li>โ€ข ์ฃผ์ฐจ์žฅ ๋ฌด๋ฃŒ ์ด์šฉ ๊ฐ€๋Šฅ (30๋Œ€ ์ฃผ์ฐจ ๊ฐ€๋Šฅ)</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Contact CTA -->
 <section class="py-20 bg-gradient-to-r from-purple-500 to-indigo-600 text-white">
 <div class="container mx-auto px-6 text-center">
 <h2 class="text-3xl md:text-4xl font-bold mb-6" data-aos="fade-up">๋ฌธ์˜ํ•˜๊ธฐ</h2>
 <p class="text-xl mb-8 max-w-2xl mx-auto" data-aos="fade-up" data-aos-delay="100">
 ๋ฐฉ๋ฌธ ์ „์— ๋ฏธ๋ฆฌ ์—ฐ๋ฝ์ฃผ์‹œ๋ฉด ๋” ์›ํ™œํ•œ ์ƒ๋‹ด์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค
 </p>
 <div class="flex flex-col sm:flex-row justify-center gap-4" data-aos="fade-up" data-aos-delay="200">
 <a href="tel:02-1234-5678" class="bg-white text-purple-700 px-8 py-3 rounded-full font-semibold hover:bg-purple-100 transition flex items-center justify-center">
 <i data-feather="phone" class="mr-2"></i>
 ์ „ํ™”๊ฑธ๊ธฐ
 </a>
 <a href="mailto:info@kmedia.com" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-purple-700 transition flex items-center justify-center">
 <i data-feather="mail" class="mr-2"></i>
 ์ด๋ฉ”์ผ ๋ฌธ์˜
 </a>
 </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();
 </script>
</body>
</html>