Hugging Face's logo

Spaces:
nkjoy
/
anycoder-112e3536
Running

App Files Community
nkjoy commited on
Commit
69cd699
Β·
verified Β·
1 Parent(s): 89a89a6

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +908 -19
index.html CHANGED
@@ -1,19 +1,908 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ko" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ν™”λͺ©μ—° | 진심을 담은 프리미엄 남뢁 맀칭</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="preconnect" href="https://fonts.googleapis.com">
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;500;700&family=Noto+Sans+KR:wght@300;400;500;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
11
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ hwamok: {
18
+ deep: '#0B3D3D',
19
+ forest: '#1A5F4A',
20
+ jade: '#2E8B74',
21
+ mint: '#4FBDA3',
22
+ gold: '#C8A96E',
23
+ goldLight: '#DCC895',
24
+ goldDark: '#9A7B3D',
25
+ cream: '#FAF7F2',
26
+ warm: '#F5F0E8'
27
+ }
28
+ },
29
+ fontFamily: {
30
+ serif: ['Playfair Display', 'Noto Serif KR', 'serif'],
31
+ sans: ['Noto Sans KR', 'sans-serif'],
32
+ }
33
+ }
34
+ }
35
+ }
36
+ </script>
37
+ <style>
38
+ :root {
39
+ --deep-green: #0B3D3D;
40
+ --gold: #C8A96E;
41
+ --gold-light: #DCC895;
42
+ }
43
+
44
+ *, *::before, *::after {
45
+ box-sizing: border-box;
46
+ margin: 0;
47
+ padding: 0;
48
+ }
49
+
50
+ html {
51
+ scroll-behavior: smooth;
52
+ }
53
+
54
+ body {
55
+ font-family: 'Noto Sans KR', sans-serif;
56
+ background-color: #FAF7F2;
57
+ color: #2D2D2D;
58
+ overflow-x: hidden;
59
+ }
60
+
61
+ /* ============ GLASSMORPHISM ============ */
62
+ .glass {
63
+ background: rgba(255, 255, 255, 0.12);
64
+ backdrop-filter: blur(24px);
65
+ -webkit-backdrop-filter: blur(24px);
66
+ border: 1px solid rgba(255, 255, 255, 0.18);
67
+ }
68
+
69
+ .glass-strong {
70
+ background: rgba(255, 255, 255, 0.85);
71
+ backdrop-filter: blur(32px);
72
+ -webkit-backdrop-filter: blur(32px);
73
+ border: 1px solid rgba(255, 255, 255, 0.4);
74
+ }
75
+
76
+ .glass-dark {
77
+ background: rgba(11, 61, 61, 0.7);
78
+ backdrop-filter: blur(20px);
79
+ -webkit-backdrop-filter: blur(20px);
80
+ border: 1px solid rgba(200, 169, 110, 0.15);
81
+ }
82
+
83
+ /* ============ ANIMATIONS ============ */
84
+ @keyframes fadeInUp {
85
+ from { opacity: 0; transform: translateY(40px); }
86
+ to { opacity: 1; transform: translateY(0); }
87
+ }
88
+
89
+ @keyframes fadeInScale {
90
+ from { opacity: 0; transform: scale(0.92); }
91
+ to { opacity: 1; transform: scale(1); }
92
+ }
93
+
94
+ @keyframes shimmer {
95
+ 0% { background-position: -200% center; }
96
+ 100% { background-position: 200% center; }
97
+ }
98
+
99
+ @keyframes float {
100
+ 0%, 100% { transform: translateY(0); }
101
+ 50% { transform: translateY(-10px); }
102
+ }
103
+
104
+ @keyframes glowPulse {
105
+ 0%, 100% { box-shadow: 0 0 20px rgba(200, 169, 110, 0.15); }
106
+ 50% { box-shadow: 0 0 40px rgba(200, 169, 110, 0.35); }
107
+ }
108
+
109
+ @keyframes gentleRotate {
110
+ 0% { transform: rotate(0deg); }
111
+ 100% { transform: rotate(360deg); }
112
+ }
113
+
114
+ .animate-fade-up {
115
+ animation: fadeInUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
116
+ }
117
+
118
+ .animate-fade-scale {
119
+ animation: fadeInScale 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
120
+ }
121
+
122
+ .animate-float {
123
+ animation: float 6s ease-in-out infinite;
124
+ }
125
+
126
+ .reveal {
127
+ opacity: 0;
128
+ transform: translateY(50px);
129
+ transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
130
+ }
131
+
132
+ .reveal.visible {
133
+ opacity: 1;
134
+ transform: translateY(0);
135
+ }
136
+
137
+ /* ============ NAVIGATION ============ */
138
+ .nav-container {
139
+ transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
140
+ }
141
+
142
+ .nav-scrolled {
143
+ background: rgba(255, 255, 255, 0.92);
144
+ backdrop-filter: blur(20px);
145
+ -webkit-backdrop-filter: blur(20px);
146
+ box-shadow: 0 4px 30px rgba(0,0,0,0.06);
147
+ }
148
+
149
+ .nav-scrolled .nav-link {
150
+ color: var(--deep-green);
151
+ }
152
+
153
+ .nav-scrolled .nav-logo-text {
154
+ color: var(--deep-green);
155
+ }
156
+
157
+ .nav-scrolled .nav-logo-sub {
158
+ color: var(--gold);
159
+ }
160
+
161
+ /* ============ BUTTONS ============ */
162
+ .btn-gold {
163
+ background: linear-gradient(135deg, #C8A96E 0%, #DCC895 50%, #C8A96E 100%);
164
+ color: #0B3D3D;
165
+ font-weight: 600;
166
+ letter-spacing: 0.05em;
167
+ position: relative;
168
+ overflow: hidden;
169
+ transition: all 0.4s ease;
170
+ }
171
+
172
+ .btn-gold::before {
173
+ content: '';
174
+ position: absolute;
175
+ top: 0;
176
+ left: -100%;
177
+ width: 100%;
178
+ height: 100%;
179
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
180
+ transition: left 0.6s ease;
181
+ }
182
+
183
+ .btn-gold:hover::before {
184
+ left: 100%;
185
+ }
186
+
187
+ .btn-gold:hover {
188
+ transform: translateY(-3px);
189
+ box-shadow: 0 12px 30px rgba(200, 169, 110, 0.4);
190
+ }
191
+
192
+ .btn-outline-gold {
193
+ border: 1.5px solid #C8A96E;
194
+ color: #C8A96E;
195
+ background: transparent;
196
+ transition: all 0.4s ease;
197
+ position: relative;
198
+ overflow: hidden;
199
+ }
200
+
201
+ .btn-outline-gold::before {
202
+ content: '';
203
+ position: absolute;
204
+ top: 0;
205
+ left: 0;
206
+ width: 0;
207
+ height: 100%;
208
+ background: #C8A96E;
209
+ transition: width 0.4s ease;
210
+ z-index: -1;
211
+ }
212
+
213
+ .btn-outline-gold:hover::before {
214
+ width: 100%;
215
+ }
216
+
217
+ .btn-outline-gold:hover {
218
+ color: #0B3D3D;
219
+ transform: translateY(-3px);
220
+ }
221
+
222
+ /* ============ HERO ============ */
223
+ .hero-section {
224
+ position: relative;
225
+ min-height: 100vh;
226
+ overflow: hidden;
227
+ }
228
+
229
+ .hero-bg {
230
+ position: absolute;
231
+ inset: 0;
232
+ background:
233
+ radial-gradient(ellipse at 30% 50%, rgba(11, 61, 61, 0.7) 0%, transparent 60%),
234
+ radial-gradient(ellipse at 70% 20%, rgba(200, 169, 110, 0.15) 0%, transparent 50%),
235
+ linear-gradient(135deg, #0B3D3D 0%, #143D3D 40%, #1A4A3A 70%, #0B3D3D 100%);
236
+ z-index: 1;
237
+ }
238
+
239
+ .hero-pattern {
240
+ position: absolute;
241
+ inset: 0;
242
+ background-image:
243
+ radial-gradient(circle at 20% 80%, rgba(200, 169, 110, 0.03) 0%, transparent 50%),
244
+ radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
245
+ z-index: 2;
246
+ }
247
+
248
+ .hero-content {
249
+ position: relative;
250
+ z-index: 10;
251
+ }
252
+
253
+ .hero-image-wrapper {
254
+ position: relative;
255
+ }
256
+
257
+ .hero-image-wrapper::before {
258
+ content: '';
259
+ position: absolute;
260
+ inset: -20px;
261
+ border: 1px solid rgba(200, 169, 110, 0.2);
262
+ border-radius: 50%;
263
+ animation: gentleRotate 30s linear infinite;
264
+ }
265
+
266
+ .hero-image-wrapper::after {
267
+ content: '';
268
+ position: absolute;
269
+ inset: -40px;
270
+ border: 1px dashed rgba(200, 169, 110, 0.1);
271
+ border-radius: 50%;
272
+ animation: gentleRotate 45s linear infinite reverse;
273
+ }
274
+
275
+ /* ============ SECTION DIVIDERS ============ */
276
+ .section-divider {
277
+ height: 1px;
278
+ background: linear-gradient(90deg, transparent, #C8A96E, transparent);
279
+ opacity: 0.4;
280
+ }
281
+
282
+ /* ============ CARDS ============ */
283
+ .card-lift {
284
+ transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
285
+ }
286
+
287
+ .card-lift:hover {
288
+ transform: translateY(-12px);
289
+ box-shadow: 0 25px 50px rgba(11, 61, 61, 0.12);
290
+ }
291
+
292
+ /* ============ PROCESS STEPS ============ */
293
+ .process-line {
294
+ position: absolute;
295
+ top: 50%;
296
+ left: 0;
297
+ right: 0;
298
+ height: 2px;
299
+ background: linear-gradient(90deg, #C8A96E, #DCC895, #C8A96E);
300
+ z-index: 0;
301
+ }
302
+
303
+ .process-step {
304
+ position: relative;
305
+ z-index: 1;
306
+ }
307
+
308
+ .process-step-number {
309
+ width: 56px;
310
+ height: 56px;
311
+ border-radius: 50%;
312
+ background: linear-gradient(135deg, #0B3D3D, #1A5F4A);
313
+ color: #C8A96E;
314
+ display: flex;
315
+ align-items: center;
316
+ justify-content: center;
317
+ font-family: 'Playfair Display', serif;
318
+ font-weight: 600;
319
+ font-size: 1.25rem;
320
+ box-shadow: 0 4px 20px rgba(11, 61, 61, 0.3);
321
+ transition: all 0.4s ease;
322
+ }
323
+
324
+ .process-step:hover .process-step-number {
325
+ transform: scale(1.15);
326
+ box-shadow: 0 8px 30px rgba(200, 169, 110, 0.4);
327
+ }
328
+
329
+ /* ============ ACCORDION ============ */
330
+ .accordion-content {
331
+ max-height: 0;
332
+ overflow: hidden;
333
+ transition: max-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.4s ease;
334
+ }
335
+
336
+ .accordion-content.open {
337
+ max-height: 500px;
338
+ }
339
+
340
+ .accordion-icon {
341
+ transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
342
+ }
343
+
344
+ .accordion-icon.rotate {
345
+ transform: rotate(180deg);
346
+ }
347
+
348
+ /* ============ FORM ============ */
349
+ .form-glass-input {
350
+ background: rgba(255, 255, 255, 0.08);
351
+ border: 1px solid rgba(200, 169, 110, 0.2);
352
+ backdrop-filter: blur(10px);
353
+ color: #fff;
354
+ transition: all 0.4s ease;
355
+ }
356
+
357
+ .form-glass-input::placeholder {
358
+ color: rgba(255, 255, 255, 0.45);
359
+ }
360
+
361
+ .form-glass-input:focus {
362
+ background: rgba(255, 255, 255, 0.15);
363
+ border-color: rgba(200, 169, 110, 0.6);
364
+ outline: none;
365
+ box-shadow: 0 0 20px rgba(200, 169, 110, 0.15);
366
+ }
367
+
368
+ /* ============ GRADIENT TEXT ============ */
369
+ .text-gradient-gold {
370
+ background: linear-gradient(135deg, #C8A96E, #DCC895, #C8A96E);
371
+ background-size: 200% 200%;
372
+ -webkit-background-clip: text;
373
+ -webkit-text-fill-color: transparent;
374
+ background-clip: text;
375
+ animation: shimmer 4s ease infinite;
376
+ }
377
+
378
+ /* ============ STORY CARDS ============ */
379
+ .story-card-image {
380
+ position: relative;
381
+ overflow: hidden;
382
+ }
383
+
384
+ .story-card-image img {
385
+ transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
386
+ }
387
+
388
+ .story-card:hover .story-card-image img {
389
+ transform: scale(1.08);
390
+ filter: brightness(1.1);
391
+ }
392
+
393
+ .story-card-overlay {
394
+ background: linear-gradient(to top, rgba(11, 61, 61, 0.85) 0%, transparent 60%);
395
+ }
396
+
397
+ /* ============ PRICE CARDS ============ */
398
+ .price-card {
399
+ position: relative;
400
+ transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
401
+ }
402
+
403
+ .price-card:hover {
404
+ transform: translateY(-8px);
405
+ }
406
+
407
+ .price-card.featured {
408
+ border: 2px solid #C8A96E;
409
+ transform: scale(1.03);
410
+ }
411
+
412
+ .price-card.featured:hover {
413
+ transform: scale(1.05) translateY(-10px);
414
+ }
415
+
416
+ .price-card .price-ribbon {
417
+ position: absolute;
418
+ top: -1px;
419
+ right: 20px;
420
+ background: linear-gradient(135deg, #C8A96E, #DCC895);
421
+ color: #0B3D3D;
422
+ padding: 6px 16px;
423
+ font-size: 0.75rem;
424
+ font-weight: 700;
425
+ letter-spacing: 0.08em;
426
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 85%, 0 100%);
427
+ padding-bottom: 14px;
428
+ }
429
+
430
+ /* ============ MOBILE MENU ============ */
431
+ .mobile-menu {
432
+ transform: translateX(100%);
433
+ transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
434
+ }
435
+
436
+ .mobile-menu.open {
437
+ transform: translateX(0);
438
+ }
439
+
440
+ /* ============ DECORATIVE ============ */
441
+ .deco-line {
442
+ width: 60px;
443
+ height: 2px;
444
+ background: linear-gradient(90deg, #C8A96E, transparent);
445
+ }
446
+
447
+ .deco-diamond {
448
+ width: 8px;
449
+ height: 8px;
450
+ background: #C8A96E;
451
+ transform: rotate(45deg);
452
+ }
453
+
454
+ /* ============ MANAGER CARD 3D ============ */
455
+ .manager-card {
456
+ perspective: 1000px;
457
+ }
458
+
459
+ .manager-card-inner {
460
+ transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
461
+ transform-style: preserve-3d;
462
+ }
463
+
464
+ .manager-card:hover .manager-card-inner {
465
+ transform: rotateY(8deg) rotateX(-5deg) translateY(-5px);
466
+ }
467
+
468
+ /* ============ SCROLLBAR ============ */
469
+ ::-webkit-scrollbar {
470
+ width: 6px;
471
+ }
472
+
473
+ ::-webkit-scrollbar-track {
474
+ background: #FAF7F2;
475
+ }
476
+
477
+ ::-webkit-scrollbar-thumb {
478
+ background: #C8A96E;
479
+ border-radius: 3px;
480
+ }
481
+
482
+ /* ============ VIDEO SECTION ============ */
483
+ .video-thumbnail {
484
+ position: relative;
485
+ cursor: pointer;
486
+ overflow: hidden;
487
+ }
488
+
489
+ .video-thumbnail::before {
490
+ content: '';
491
+ position: absolute;
492
+ inset: 0;
493
+ background: rgba(11, 61, 61, 0.4);
494
+ transition: background 0.4s ease;
495
+ z-index: 1;
496
+ }
497
+
498
+ .video-thumbnail:hover::before {
499
+ background: rgba(11, 61, 61, 0.2);
500
+ }
501
+
502
+ .play-btn {
503
+ position: absolute;
504
+ top: 50%;
505
+ left: 50%;
506
+ transform: translate(-50%, -50%) scale(1);
507
+ width: 72px;
508
+ height: 72px;
509
+ border-radius: 50%;
510
+ background: rgba(255, 255, 255, 0.9);
511
+ display: flex;
512
+ align-items: center;
513
+ justify-content: center;
514
+ z-index: 2;
515
+ transition: all 0.4s ease;
516
+ }
517
+
518
+ .play-btn::before {
519
+ content: '';
520
+ position: absolute;
521
+ inset: -8px;
522
+ border-radius: 50%;
523
+ border: 2px solid rgba(255, 255, 255, 0.4);
524
+ animation: pulse 2s ease infinite;
525
+ }
526
+
527
+ @keyframes pulse {
528
+ 0% { transform: scale(1); opacity: 1; }
529
+ 100% { transform: scale(1.3); opacity: 0; }
530
+ }
531
+
532
+ .video-thumbnail:hover .play-btn {
533
+ transform: translate(-50%, -50%) scale(1.1);
534
+ background: #fff;
535
+ }
536
+
537
+ /* ============ MAP ============ */
538
+ .map-container {
539
+ position: relative;
540
+ overflow: hidden;
541
+ border-radius: 16px;
542
+ }
543
+
544
+ .map-container iframe {
545
+ width: 100%;
546
+ height: 100%;
547
+ border: none;
548
+ }
549
+
550
+ /* ============ FOOTER ============ */
551
+ .footer-link {
552
+ position: relative;
553
+ transition: color 0.3s ease;
554
+ }
555
+
556
+ .footer-link::after {
557
+ content: '';
558
+ position: absolute;
559
+ bottom: -2px;
560
+ left: 0;
561
+ width: 0;
562
+ height: 1px;
563
+ background: #C8A96E;
564
+ transition: width 0.3s ease;
565
+ }
566
+
567
+ .footer-link:hover::after {
568
+ width: 100%;
569
+ }
570
+
571
+ /* ============ LOADING ============ */
572
+ .page-loader {
573
+ position: fixed;
574
+ inset: 0;
575
+ background: #0B3D3D;
576
+ z-index: 9999;
577
+ display: flex;
578
+ align-items: center;
579
+ justify-content: center;
580
+ transition: opacity 0.6s ease, visibility 0.6s ease;
581
+ }
582
+
583
+ .page-loader.hidden {
584
+ opacity: 0;
585
+ visibility: hidden;
586
+ }
587
+
588
+ .loader-logo {
589
+ font-family: 'Playfair Display', serif;
590
+ font-size: 2.5rem;
591
+ color: #C8A96E;
592
+ letter-spacing: 0.3em;
593
+ animation: fadeInScale 0.8s ease;
594
+ }
595
+
596
+ /* ============ STATS COUNTER ============ */
597
+ .stat-number {
598
+ font-family: 'Playfair Display', serif;
599
+ font-size: 3.5rem;
600
+ font-weight: 600;
601
+ color: #C8A96E;
602
+ line-height: 1;
603
+ }
604
+
605
+ /* ============ TOAST ============ */
606
+ .toast {
607
+ position: fixed;
608
+ bottom: 30px;
609
+ left: 50%;
610
+ transform: translateX(-50%) translateY(100px);
611
+ background: #0B3D3D;
612
+ color: #fff;
613
+ padding: 16px 32px;
614
+ border-radius: 12px;
615
+ box-shadow: 0 10px 40px rgba(0,0,0,0.2);
616
+ z-index: 999;
617
+ transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
618
+ display: flex;
619
+ align-items: center;
620
+ gap: 12px;
621
+ }
622
+
623
+ .toast.show {
624
+ transform: translateX(-50%) translateY(0);
625
+ }
626
+ </style>
627
+ </head>
628
+ <body>
629
+ <!-- Page Loader -->
630
+ <div class="page-loader" id="pageLoader">
631
+ <div class="text-center">
632
+ <div class="loader-logo mb-4">ν™”λͺ©μ—°</div>
633
+ <div class="text-hwarmok-goldLight text-sm tracking-[0.5em]">ν™”λͺ©μ—°</div>
634
+ </div>
635
+ </div>
636
+
637
+ <!-- Toast -->
638
+ <div class="toast" id="toast">
639
+ <i class="fas fa-check-circle text-hwarmok-mint"></i>
640
+ <span id="toastMessage">μ ‘μˆ˜κ°€ μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.</span>
641
+ </div>
642
+
643
+ <!-- Navigation -->
644
+ <nav class="nav-container fixed top-0 left-0 right-0 z-50 py-4 px-6 lg:px-12" id="navbar">
645
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
646
+ <!-- Logo -->
647
+ <a href="#hero" class="flex items-center gap-3">
648
+ <div class="w-10 h-10 rounded-full border-2 border-hwarmok-gold flex items-center justify-center">
649
+ <span class="nav-logo-sub text-hwarmok-gold font-serif text-sm font-bold">花</span>
650
+ </div>
651
+ <div>
652
+ <span class="nav-logo-text text-white font-serif text-xl font-bold tracking-wider">ν™”λͺ©μ—°</span>
653
+ <span class="nav-logo-sub text-hwarmok-gold text-[10px] tracking-[0.3em] block">HWAMOKYEON</span>
654
+ </div>
655
+ </a>
656
+
657
+ <!-- Desktop Nav -->
658
+ <div class="hidden lg:flex items-center gap-10">
659
+ <a href="#brand" class="nav-link text-white/80 text-sm font-medium hover:text-hwarmok-gold transition-colors tracking-wide">λΈŒλžœλ“œ</a>
660
+ <a href="#service" class="nav-link text-white/80 text-sm font-medium hover:text-hwarmok-gold transition-colors tracking-wide">프리미엄 맀칭</a>
661
+ <a href="#media" class="nav-link text-white/80 text-sm font-medium hover:text-hwarmok-gold transition-colors tracking-wide">μƒμƒν•œ μ†Œν†΅</a>
662
+ <a href="#contact" class="nav-link text-white/80 text-sm font-medium hover:text-hwarmok-gold transition-colors tracking-wide">μƒλ‹΄μ ‘μˆ˜</a>
663
+ </div>
664
+
665
+ <!-- CTA + Mobile Toggle -->
666
+ <div class="flex items-center gap-4">
667
+ <a href="#contact" class="hidden md:inline-flex btn-gold px-6 py-2.5 rounded-full text-sm">
668
+ <i class="fas fa-phone-alt mr-2 text-xs"></i> λ¬΄λ£Œμƒλ‹΄
669
+ </a>
670
+ <button class="lg:hidden text-white nav-link text-xl" id="mobileToggle">
671
+ <i class="fas fa-bars"></i>
672
+ </button>
673
+ </div>
674
+ </div>
675
+ </nav>
676
+
677
+ <!-- Mobile Menu -->
678
+ <div class="mobile-menu fixed inset-0 z-[60] bg-hwarmok-deep/95 backdrop-blur-xl" id="mobileMenu">
679
+ <div class="flex flex-col h-full p-8">
680
+ <div class="flex justify-between items-center mb-12">
681
+ <span class="text-hwarmok-gold font-serif text-2xl font-bold">ν™”λͺ©μ—°</span>
682
+ <button class="text-white text-2xl" id="mobileClose">
683
+ <i class="fas fa-times"></i>
684
+ </button>
685
+ </div>
686
+ <div class="flex flex-col gap-6">
687
+ <a href="#brand" class="mobile-nav-link text-white text-2xl font-serif font-light hover:text-hwarmok-gold transition-colors">λΈŒλžœλ“œ μŠ€ν† λ¦¬</a>
688
+ <a href="#service" class="mobile-nav-link text-white text-2xl font-serif font-light hover:text-hwarmok-gold transition-colors">프리미엄 맀칭</a>
689
+ <a href="#media" class="mobile-nav-link text-white text-2xl font-serif font-light hover:text-hwarmok-gold transition-colors">μƒμƒν•œ μ†Œν†΅</a>
690
+ <a href="#contact" class="mobile-nav-link text-white text-2xl font-serif font-light hover:text-hwarmok-gold transition-colors">μƒλ‹΄μ ‘μˆ˜</a>
691
+ </div>
692
+ <div class="mt-auto">
693
+ <a href="#contact" class="btn-gold w-full py-4 rounded-xl text-center block text-base">
694
+ <i class="fas fa-phone-alt mr-2"></i> λ¬΄λ£Œμƒλ‹΄ μ‹ μ²­
695
+ </a>
696
+ </div>
697
+ </div>
698
+ </div>
699
+
700
+ <!-- ============ HERO ============ -->
701
+ <section class="hero-section" id="hero">
702
+ <div class="hero-bg"></div>
703
+ <div class="hero-pattern"></div>
704
+
705
+ <!-- Floating decorative elements -->
706
+ <div class="absolute top-1/4 left-[10%] w-2 h-2 rounded-full bg-hwarmok-gold/30 animate-float" style="animation-delay: 0s;"></div>
707
+ <div class="absolute top-1/3 right-[15%] w-3 h-3 rounded-full bg-hwarmok-gold/20 animate-float" style="animation-delay: 2s;"></div>
708
+ <div class="absolute bottom-1/4 left-[20%] w-1.5 h-1.5 rounded-full bg-hwarmok-mint/30 animate-float" style="animation-delay: 4s;"></div>
709
+
710
+ <div class="hero-content min-h-screen flex items-center px-6 lg:px-12 pt-20">
711
+ <div class="max-w-7xl mx-auto w-full grid lg:grid-cols-2 gap-12 items-center">
712
+ <!-- Left: Text -->
713
+ <div class="text-center lg:text-left order-2 lg:order-1">
714
+ <div class="flex items-center gap-3 mb-6 justify-center lg:justify-start animate-fade-up" style="animation-delay: 0.2s;">
715
+ <div class="deco-line"></div>
716
+ <span class="text-hwarmok-gold text-xs tracking-[0.4em] uppercase font-medium">Premium Marriage Agency</span>
717
+ </div>
718
+
719
+ <h1 class="animate-fade-up" style="animation-delay: 0.4s;">
720
+ <span class="block text-white font-serif text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-3">
721
+ 진심을 담은
722
+ </span>
723
+ <span class="block text-gradient-gold font-serif text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-3">
724
+ μΈμ—°μ˜ μ‹œμž‘
725
+ </span>
726
+ <span class="block text-white/50 font-serif text-xl md:text-2xl lg:text-3xl font-light italic">
727
+ 결과둜 증λͺ…ν•˜λŠ” 프리미엄 맀칭
728
+ </span>
729
+ </h1>
730
+
731
+ <p class="text-white/50 text-base md:text-lg mt-8 max-w-lg mx-auto lg:mx-0 leading-relaxed animate-fade-up" style="animation-delay: 0.6s;">
732
+ λ‚¨λΆμ˜ 문화적 차이λ₯Ό μ΄ν•΄ν•˜κ³  μ§„μ‹€λœ 화합을 μ΄λŒμ–΄λ‚΄λŠ” 전문적이고 λ”°λœ»ν•œ μ•ˆλ‚΄μž,<br>
733
+ <span class="text-hwarmok-gold">ν™”λͺ©μ—°</span>이 ν•¨κ»˜ν•©λ‹ˆλ‹€.
734
+ </p>
735
+
736
+ <div class="flex flex-col sm:flex-row gap-4 mt-10 justify-center lg:justify-start animate-fade-up" style="animation-delay: 0.8s;">
737
+ <a href="#contact" class="btn-gold px-8 py-4 rounded-full text-sm">
738
+ <i class="fas fa-heart mr-2"></i>λ¬΄λ£Œμƒλ‹΄ μ‹ μ²­
739
+ </a>
740
+ <a href="#service" class="btn-outline-gold px-8 py-4 rounded-full text-sm">
741
+ <i class="fas fa-search mr-2"></i>μ„œλΉ„μŠ€ μ•Œμ•„λ³΄κΈ°
742
+ </a>
743
+ </div>
744
+
745
+ <!-- Trust badges -->
746
+ <div class="flex items-center gap-6 mt-10 justify-center lg:justify-start animate-fade-up" style="animation-delay: 1s;">
747
+ <div class="flex items-center gap-2">
748
+ <i class="fas fa-shield-alt text-hwarmok-gold/60 text-sm"></i>
749
+ <span class="text-white/40 text-xs">신원인증 μ™„λΉ„</span>
750
+ </div>
751
+ <div class="w-px h-4 bg-white/20"></div>
752
+ <div class="flex items-center gap-2">
753
+ <i class="fas fa-lock text-hwarmok-gold/60 text-sm"></i>
754
+ <span class="text-white/40 text-xs">κ°œμΈμ •λ³΄ 보호</span>
755
+ </div>
756
+ <div class="w-px h-4 bg-white/20"></div>
757
+ <div class="flex items-center gap-2">
758
+ <i class="fas fa-award text-hwarmok-gold/60 text-sm"></i>
759
+ <span class="text-white/40 text-xs">VIP μ „λ‹΄ λ§€λ‹ˆμ €</span>
760
+ </div>
761
+ </div>
762
+ </div>
763
+
764
+ <!-- Right: Visual -->
765
+ <div class="order-1 lg:order-2 flex justify-center animate-fade-scale" style="animation-delay: 0.3s;">
766
+ <div class="hero-image-wrapper relative w-72 h-72 md:w-96 md:h-96">
767
+ <div class="absolute inset-0 rounded-full overflow-hidden border-4 border-hwarmok-gold/30 shadow-2xl shadow-hwarmok-gold/10">
768
+ <img
769
+ src="https://images.unsplash.com/photo-1519741497674-611481863552?w=600&h=600&fit=crop&q=80"
770
+ alt="Wedding couple"
771
+ class="w-full h-full object-cover"
772
+ >
773
+ </div>
774
+ <!-- Floating card -->
775
+ <div class="absolute -bottom-4 -left-8 glass-dark rounded-2xl p-4 shadow-xl animate-float" style="animation-delay: 1s;">
776
+ <div class="flex items-center gap-3">
777
+ <div class="w-10 h-10 rounded-full bg-hwarmok-gold/20 flex items-center justify-center">
778
+ <i class="fas fa-users text-hwarmok-gold text-sm"></i>
779
+ </div>
780
+ <div>
781
+ <div class="text-white text-xs font-bold">μ„±ν˜Ό μ»€ν”Œ</div>
782
+ <div class="text-hwarmok-gold text-lg font-serif font-bold">1,200<span class="text-xs ml-1">쌍</span></div>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ <!-- Another floating element -->
787
+ <div class="absolute -top-4 -right-4 glass rounded-2xl p-3 shadow-xl animate-float" style="animation-delay: 2.5s;">
788
+ <div class="flex items-center gap-2">
789
+ <i class="fas fa-star text-hwarmok-gold text-sm"></i>
790
+ <span class="text-white text-xs">λ§Œμ‘±λ„ 98%</span>
791
+ </div>
792
+ </div>
793
+ </div>
794
+ </div>
795
+ </div>
796
+ </div>
797
+
798
+ <!-- Scroll indicator -->
799
+ <div class="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 animate-bounce">
800
+ <div class="w-6 h-10 border-2 border-white/30 rounded-full flex justify-center pt-2">
801
+ <div class="w-1 h-2 bg-white/50 rounded-full animate-pulse"></div>
802
+ </div>
803
+ </div>
804
+ </section>
805
+
806
+ <!-- ============ BRAND STORY ============ -->
807
+ <section class="py-24 lg:py-32 bg-hwarmok-cream relative overflow-hidden" id="brand">
808
+ <!-- Background decoration -->
809
+ <div class="absolute top-0 right-0 w-96 h-96 rounded-full bg-hwarmok-gold/5 blur-3xl"></div>
810
+ <div class="absolute bottom-0 left-0 w-72 h-72 rounded-full bg-hwarmok-jade/5 blur-3xl"></div>
811
+
812
+ <div class="max-w-7xl mx-auto px-6 lg:px-12">
813
+ <!-- Section Header -->
814
+ <div class="text-center mb-20 reveal">
815
+ <div class="flex items-center justify-center gap-3 mb-4">
816
+ <div class="deco-diamond"></div>
817
+ <span class="text-hwarmok-gold text-xs tracking-[0.4em] uppercase font-medium">Brand Story</span>
818
+ <div class="deco-diamond"></div>
819
+ </div>
820
+ <h2 class="text-hwarmok-deep font-serif text-3xl md:text-4xl lg:text-5xl font-bold mb-4">ν™”λͺ©μ—° μ†Œκ°œ</h2>
821
+ <p class="text-gray-500 max-w-xl mx-auto">λ‹¨μˆœν•œ λ§Œλ‚¨μ΄ μ•„λ‹Œ, ν‰μƒμ˜ λ™λ°˜μžλ₯Ό μ°ΎλŠ” 여정에 진심을 λ‹€ν•©λ‹ˆλ‹€</p>
822
+ </div>
823
+
824
+ <!-- CEO Message -->
825
+ <div class="grid lg:grid-cols-2 gap-12 lg:gap-20 items-center mb-24 reveal">
826
+ <div class="relative">
827
+ <div class="relative rounded-3xl overflow-hidden shadow-2xl">
828
+ <img
829
+ src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=750&fit=crop&q=80"
830
+ alt="CEO Yang Yujin"
831
+ class="w-full h-[500px] object-cover"
832
+ >
833
+ <div class="absolute inset-0 bg-gradient-to-t from-hwarmok-deep/40 to-transparent"></div>
834
+ </div>
835
+ <!-- Quote decoration -->
836
+ <div class="absolute -top-6 -left-6 w-20 h-20 border-l-4 border-t-4 border-hwarmok-gold/30 rounded-tl-3xl"></div>
837
+ <div class="absolute -bottom-6 -right-6 w-20 h-20 border-r-4 border-b-4 border-hwarmok-gold/30 rounded-br-3xl"></div>
838
+ </div>
839
+ <div>
840
+ <div class="flex items-center gap-3 mb-6">
841
+ <div class="deco-line"></div>
842
+ <span class="text-hwarmok-gold text-xs tracking-[0.3em] uppercase">CEO Message</span>
843
+ </div>
844
+ <h3 class="text-hwarmok-deep font-serif text-2xl md:text-3xl font-bold mb-2">μ•ˆλ…•ν•˜μ„Έμš”, ν™”λͺ©μ—° λŒ€ν‘œ</h3>
845
+ <h3 class="text-hwarmok-gold font-serif text-2xl md:text-3xl font-bold mb-8">μ–‘μœ μ§„μž…λ‹ˆλ‹€</h3>
846
+
847
+ <div class="space-y-5 text-gray-600 leading-relaxed">
848
+ <p>ν™”λͺ©μ—°μ€ λ‹¨μˆœν•œ κ²°ν˜Όμ •λ³΄νšŒμ‚¬κ°€ μ•„λ‹™λ‹ˆλ‹€. 남과 λΆμ΄λΌλŠ” λ‹€λ₯Έ μ„Έκ³„μ—μ„œ 온 두 μ‚¬λžŒμ΄ ν•˜λ‚˜μ˜ 가정을 μ΄λ£¨λŠ” 것, 그것은 μž‘μ€ 기적과도 같은 μΌμž…λ‹ˆλ‹€.</p>
849
+ <p>μ €ν¬λŠ” 이 기적을 ν˜„μ‹€λ‘œ λ§Œλ“œλŠ” <span class="text-hwarmok-jade font-medium">μ „λ¬Έ λ§€λ‹ˆμ €</span>이자, <span class="text-hwarmok-jade font-medium">믿을 수 μžˆλŠ” λ™λ°˜μž</span>κ°€ λ˜κ² μŠ΅λ‹ˆλ‹€. 문화적 차이λ₯Ό λ„˜μ–΄ μ„œλ‘œλ₯Ό μ΄ν•΄ν•˜κ³ , μ§„μ •ν•œ 화합을 μ΄λ£¨λŠ” κ·Έλ‚ κΉŒμ§€ ν™”λͺ©μ—°μ΄ ν•¨κ»˜ν•˜κ² μŠ΅λ‹ˆλ‹€.</p>
850
+ </div>
851
+
852
+ <div class="mt-8 pt-8 border-t border-hwarmok-gold/20">
853
+ <div class="flex items-center gap-4">
854
+ <img
855
+ src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=80&h=80&fit=crop&q=80"
856
+ alt="CEO Signature"
857
+ class="w-14 h-14 rounded-full object-cover border-2 border-hwarmok-gold/30"
858
+ >
859
+ <div>
860
+ <div class="text-hwarmok-deep font-bold text-lg">μ–‘μœ μ§„</div>
861
+ <div class="text-gray-400 text-sm">ν™”λͺ©μ—° λŒ€ν‘œμ΄μ‚¬</div>
862
+ </div>
863
+ </div>
864
+ </div>
865
+ </div>
866
+ </div>
867
+
868
+ <!-- Philosophy -->
869
+ <div class="mb-24 reveal">
870
+ <div class="text-center mb-14">
871
+ <span class="text-hwarmok-gold text-xs tracking-[0.4em] uppercase">Our Philosophy</span>
872
+ <h3 class="text-hwarmok-deep font-serif text-2xl md:text-3xl font-bold mt-2">ν™”λͺ©μ—°μ˜ μ² ν•™</h3>
873
+ </div>
874
+ <div class="grid md:grid-cols-3 gap-6">
875
+ <div class="card-lift bg-white rounded-3xl p-8 shadow-lg shadow-hwarmok-deep/5 border border-hwarmok-gold/10">
876
+ <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-hwarmok-deep to-hwarmok-forest flex items-center justify-center mb-6 shadow-lg shadow-hwarmok-deep/20">
877
+ <i class="fas fa-handshake text-hwarmok-gold text-xl"></i>
878
+ </div>
879
+ <h4 class="text-hwarmok-deep font-bold text-lg mb-3">문화적 이해</h4>
880
+ <p class="text-gray-500 text-sm leading-relaxed">λ‚¨λΆμ˜ μ–Έμ–΄, μƒν™œμŠ΅κ΄€, κ°€μΉ˜κ΄€μ˜ 차이λ₯Ό μ„Έμ‹¬ν•˜κ²Œ νŒŒμ•…ν•˜κ³  μ€‘μž¬ν•©λ‹ˆλ‹€. μ„œλ‘œλ₯Ό μ΄ν•΄ν•˜λŠ” 것이 μ§„μ •ν•œ ν™”ν•©μ˜ μ‹œμž‘μž…λ‹ˆλ‹€.</p>
881
+ </div>
882
+ <div class="card-lift bg-white rounded-3xl p-8 shadow-lg shadow-hwarmok-deep/5 border border-hwarmok-gold/10">
883
+ <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-hwarmok-jade to-hwarmok-mint flex items-center justify-center mb-6 shadow-lg shadow-hwarmok-jade/20">
884
+ <i class="fas fa-shield-alt text-white text-xl"></i>
885
+ </div>
886
+ <h4 class="text-hwarmok-deep font-bold text-lg mb-3">μ² μ €ν•œ 검증</h4>
887
+ <p class="text-gray-500 text-sm leading-relaxed">가쑱관계증λͺ…μ„œ, ν˜ΌμΈκ΄€κ³„μ¦λͺ…μ„œ, 재직증λͺ…μ„œ λ“± μ„œλ₯˜ 검증을 톡해 μ‹ λ’°ν•  수 μžˆλŠ” λ§€μΉ­λ§Œμ„ μ§„ν–‰ν•©λ‹ˆλ‹€.</p>
888
+ </div>
889
+ <div class="card-lift bg-white rounded-3xl p-8 shadow-lg shadow-hwarmok-deep/5 border border-hwarmok-gold/10">
890
+ <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-hwarmok-gold to-hwarmok-goldLight flex items-center justify-center mb-6 shadow-lg shadow-hwarmok-gold/20">
891
+ <i class="fas fa-heart text-hwarmok-deep text-xl"></i>
892
+ </div>
893
+ <h4 class="text-hwarmok-deep font-bold text-lg mb-3">λ°€μ°© μΌ€μ–΄</h4>
894
+ <p class="text-gray-500 text-sm leading-relaxed">맀칭 이후에도 μ „λ‹΄ λ§€λ‹ˆμ €κ°€ ꡐ제 κ³Όμ •λΆ€ν„° 결혼, μ •μ°©κΉŒμ§€ 지속적인 관리λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€.</p>
895
+ </div>
896
+ </div>
897
+ </div>
898
+
899
+ <!-- Stats -->
900
+ <div class="glass-strong rounded-3xl p-8 md:p-12 shadow-xl reveal">
901
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
902
+ <div>
903
+ <div class="stat-number" data-target="1200">0</div>
904
+ <div class="text-gray-500 text-sm mt-2">λˆ„μ  μ„±ν˜Ό μ»€ν”Œ</div>
905
+ </div>
906
+ <div>
907
+ <div class="stat-number" data-target="98">0</div>
908
+ <div class="text-gray-500 text-sm mt-2">고객 만