-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
503 lines (501 loc) · 36.1 KB
/
index.html
File metadata and controls
503 lines (501 loc) · 36.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스킨 케어 | Aesop 대한민국</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="./css/style.css">
<link rel="icon" href="https://www.aesop.com/_ui/responsive/theme-alpha/images/favicon.ico">
<script defer src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"></script>
<script defer type="module" src="./js/main.js"></script>
</head>
<body>
<header>
<div class="banner">
<button class="btn open-modal">
<p class="content">전 구매 무료배송 및 선물포장과 단독 기프트 메시지 카드 혜택을 즐겨보세요.</p>
<span class="material-symbols-outlined">add</span>
</button>
</div>
<div class="nav-wrap">
<nav class="nav-primary">
<ul class="header-menu">
<li class="header-menu-item">스킨 케어</li>
<li class="header-menu-item">바디 & 핸드</li>
<li class="header-menu-item">헤어</li>
<li class="header-menu-item">향수</li>
<li class="header-menu-item">홈</li>
<li class="header-menu-item">키트 & 트래블</li>
<li class="header-menu-item">기프트 가이드</li>
<li class="header-menu-item">읽기</li>
<li class="header-menu-item">스토어</li>
<li class="header-menu-item">페이셜 어포인트먼트</li>
<li class="header-menu-item"><svg class="" focusable="false" height="18" role="img" tabindex="-1" viewBox="0 0 16 16" width="18" style="height: 18px; width: 18px;"><title id="search-138">search</title><g><path d="M11.9544 10.8246C12.8838 9.65831 13.3941 8.18223 13.3941 6.68793C13.3941 3.00683 10.3872 0 6.68793 0C2.98861 0 0 3.00683 0 6.68793C0 10.369 3.00683 13.3759 6.68793 13.3759C8.16401 13.3759 9.64009 12.8656 10.8246 11.9362L14.8519 15.9636L16 14.8155L11.9544 10.8246ZM6.68793 11.7904C3.89977 11.7904 1.62187 9.51253 1.62187 6.72437C1.62187 3.93622 3.89977 1.65831 6.68793 1.65831C9.47608 1.65831 11.754 3.93622 11.754 6.72437C11.754 9.51253 9.47608 11.7904 6.68793 11.7904Z"></path></g></svg></li>
</ul>
</nav>
<div class="nav-secondary">
<ul class="header-menu">
<li class="header-menu-item">로그인</li>
<li class="header-menu-item">위시리스트</li>
<li class="header-menu-item">카트</li>
</ul>
</div>
</div>
<div class="float-inquiry">
<span class="material-symbols-outlined">mode_comment</span>
</div>
</header>
<main>
<section class="main-vis fade">
<a href="/" class="logo">
<svg focusable="false" height="40" role="img" tabindex="-1" viewBox="0 0 489.7 154.3"><title>aesop</title><g><path d="M48.6,22.5L31.8,62.2h34.2L48.6,22.5z M28.6,70.3c-3.2,7.4-9.6,21.7-14.9,42c-1.9-0.3-3.5-0.9-6.6-0.9c-3.1,0-5,0.6-7.1,0.9C14.3,81.2,38,28.9,49.4,0c1.3,0.2,2.3,0.5,4,0.5c1.4,0,2.3-0.2,3.5-0.5c12.3,33.7,47.8,111.7,48.1,112.3c-2.7-0.5-5.5-0.9-9.5-0.9c-4.2,0-7.2,0.5-10.3,0.9c-5.6-19.2-12.2-33.2-16.2-42H28.6z"></path><path d="M172.4,66.6c0-5.3,0-26.6-19.2-26.6c-14,0-20.7,10.6-22.2,26.6H172.4z M130.9,73.3c0,4.5,0,13.6,4.3,21c7.4,12.1,17.8,12.5,22.5,12.5c15.7,0,23.1-9.6,25.5-13l1.9,0.4c-1,4.5-1,7.1-1.1,9.6c-7.1,6.7-16.8,10.5-29.8,10.5c-24.4,0-39.3-15.4-39.3-40.1c0-22.1,12.2-40.7,38.5-40.7c35.8,0,35.3,31.1,35.1,39.8H130.9z"></path><path d="M249.6,52.1c-0.6-2.4-1.6-6.4-6.2-9.6c-3.4-2.4-7.8-2.7-10.4-2.7c-9.8,0-14.9,5.1-14.9,12c0,9.3,9.5,12.7,15.1,14.1c14.3,3.7,25.8,6.7,25.8,22.8c0,12.2-8.5,25.8-30.8,25.8c-13,0-22-5.5-23.7-6.7c2.1-3.9,3.4-10.7,3.7-12.8l1.9-0.5c1.1,2.7,2.7,7.1,8.7,10.6c4,2.4,8.2,3,11.7,3c8.4,0,16.2-4,16.2-13.2c0-9.1-5.5-10.9-22.3-16.4c-6.9-2.3-18.3-7.2-18.3-21.3c0-9.1,5.6-23.9,27.8-23.9c11.1,0,17.5,3.4,21.2,5.3c-1.6,4.2-2.7,8-3.2,13.5H249.6z"></path><path d="M291.5,73.5c0,22.3,9.8,34.6,24.5,34.6c15.4,0,25.5-13.3,25.5-34.5c0-12.5-3.9-33.8-24.7-33.8C291.5,39.8,291.5,68.6,291.5,73.5 M357.9,73c0,25.5-17.6,41.5-42,41.5c-17,0-40.8-7.7-40.8-40.6c0-25,16.7-40.6,40.8-40.6 C346.3,33.4,357.9,53.4,357.9,73"></path><path d="M399.4,49.6c-3.2,4-6.6,9.8-6.6,25.7c0,14.1,3.2,19.4,6.6,23.4c4.1,5,9.6,7.9,17,7.9 c22.9,0,22.9-27.1,22.9-32.3c0-24.2-11.6-33-22-33C408.7,41.2,403.1,44.9,399.4,49.6 M419.3,114.7c-15.1,0-23.6-8.3-26.2-14.9 c0,25.2-0.2,39.8,0.8,54.5c-2.4-0.6-4.5-0.9-8.4-0.9c-4,0-6.1,0.3-8.6,0.9c1.3-20.8,1.8-41.9,1.8-62.7c0-14.6-0.3-34.3-0.8-57.6 c2.2,0.5,4.8,0.9,7.9,0.9c2.9,0,5.6-0.5,7.9-0.9c-0.6,8.8-0.6,11.2-0.6,14.6c2.6-4.2,9.5-15.4,27.3-15.4c16,0,35.6,11.7,35.6,40.3 C455.9,98.8,440.3,114.7,419.3,114.7"></path><rect x="131.8" y="13.5" width="44.3" height="5"></rect><path d="M477.2,98.1c0,1.6,0,3,0,4.4c1.3,0,4.3,0,4.3-2.3C481.5,98.1,479.2,98.1,477.2,98.1 M484.9,109.1 c-0.4,0-0.7-0.1-1.2-0.1c-0.4,0-0.8,0.1-1.5,0.1c-2-2.9-3.6-4.5-4.7-5.8h-0.4c0,1.8,0,3.2,0.2,5.8c-0.5,0-0.7-0.1-1.3-0.1 c-0.6,0-0.8,0.1-1.1,0.1c0.1-1.3,0.2-2.7,0.2-6.2c0-3-0.1-4.4-0.1-5.7c0.9,0,1.5,0,2.9,0c2.9,0,5.9,0,5.9,2.8c0,2.5-2.7,2.9-3.9,3 c0.8,1.1,4.4,5.1,5.1,5.9L484.9,109.1z M479.2,94.8c-4.8,0-8.5,3.8-8.5,8.6c0,4.9,3.6,8.6,8.5,8.6c4.9,0,8.5-3.7,8.5-8.6 C487.8,98.7,484.3,94.8,479.2,94.8 M479.2,92.9c5.9,0,10.5,4.7,10.5,10.5c0,5.9-4.7,10.5-10.5,10.5c-5.8,0-10.5-4.6-10.5-10.5 C468.8,97.5,473.5,92.9,479.2,92.9"></path></g></svg>
</a>
<div class="txt-wrap">
<h1 class="main-vis-title">스킨 케어</h1>
<p class="desc">피부는 환경과 라이프스타일, 식단에 따라 항상 변화하고 있습니다. 이솝 레인지는 이런 점을 고려해 다양한 선호와 니즈에 맞춰 피부 건강을 우수한 상태로 가꿀 수 있도록 도와줍니다.</p>
</div>
</section>
<nav class="sub-nav fade">
<span class="selected"><a href="">모든 스킨</a></span>
<ul>
<li class="sub-nav-item"><a href="">클렌저</a></li>
<li class="sub-nav-item"><a href="">각질 제거</a></li>
<li class="sub-nav-item"><a href="">트리트먼트 & 마스크</a></li>
<li class="sub-nav-item"><a href="">토너</a></li>
<li class="sub-nav-item"><a href="">하이드레이터</a></li>
<li class="sub-nav-item"><a href="">립 & 아이</a></li>
<li class="sub-nav-item"><a href="">쉐이빙</a></li>
<li class="sub-nav-item"><a href="">선 케어</a></li>
<li class="sub-nav-item"><a href="">키트</a></li>
<li class="sub-nav-item"><a href="">스킨 케어 번들</a></li>
<li class="sub-nav-item"><a href="">스킨 케어 기프트</a></li>
</ul>
</nav>
<section class="all-category">
<div class="title-wrap fade">
<h2 class="section-title">스킨 케어 제품 보기</h2>
</div>
<div class="grid grid-category fade">
<div class="grid-item">
<div class="grid-item-title">클렌저</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4ZZCdy0DjPHai26wzW9SDP/69815913b97060903902071a095011eb/Aesop_Category_Tiles_Cleanse_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4ZZCdy0DjPHai26wzW9SDP/69815913b97060903902071a095011eb/Aesop_Category_Tiles_Cleanse_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/W7ZqpUUWjLFfD2sPTBtWs/11fc3e7882908d2251aae8131583869f/Aesop_Category_Tiles_Cleanse_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/4ZZCdy0DjPHai26wzW9SDP/69815913b97060903902071a095011eb/Aesop_Category_Tiles_Cleanse_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">각질 제거</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/1CHewatsmDnUbEnYSKBriI/3e9aac2ab8b2d1034cf3e4c02460cf02/Aesop_Category_Tiles_Exfoliate_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/1CHewatsmDnUbEnYSKBriI/3e9aac2ab8b2d1034cf3e4c02460cf02/Aesop_Category_Tiles_Exfoliate_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/1FtUFV450xzdstyAqfOghX/0c89be469f848ccfa820538181337856/Aesop_Category_Tiles_Exfoliate_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/1CHewatsmDnUbEnYSKBriI/3e9aac2ab8b2d1034cf3e4c02460cf02/Aesop_Category_Tiles_Exfoliate_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">트리트먼트 & 마스크</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/5HgBS6Z5fWyFzKhXcuqzcB/f0a9ea7e69fc4020b4b6e9e697db63da/Aesop_Category_Tiles_Treat_Masque_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/5HgBS6Z5fWyFzKhXcuqzcB/f0a9ea7e69fc4020b4b6e9e697db63da/Aesop_Category_Tiles_Treat_Masque_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/7rKlKapUiMMwGPpTzM3aKw/475612b78db354aaa86da68e461d0bef/Aesop_Category_Tiles_Treat_Masque_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/5HgBS6Z5fWyFzKhXcuqzcB/f0a9ea7e69fc4020b4b6e9e697db63da/Aesop_Category_Tiles_Treat_Masque_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">토너</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/6fuSeJzdSoJqSQnQo4IOBk/93c2d759e6eff044fa8a159894ea83be/Aesop_Category_Tiles_Tone_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/6fuSeJzdSoJqSQnQo4IOBk/93c2d759e6eff044fa8a159894ea83be/Aesop_Category_Tiles_Tone_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/1hkPZMHE9JTYUUKga80VAk/8de2f5701500e4f5994c4a3906a030fa/Aesop_Category_Tiles_Tone_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/6fuSeJzdSoJqSQnQo4IOBk/93c2d759e6eff044fa8a159894ea83be/Aesop_Category_Tiles_Tone_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">하이드레이터</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4Riu6C2Y6yCDBXkrFRZzOI/5107d949b2149d136dd86f97637af288/Aesop_Category_Tiles_Hydrate_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4Riu6C2Y6yCDBXkrFRZzOI/5107d949b2149d136dd86f97637af288/Aesop_Category_Tiles_Hydrate_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/5Nur0h1zXupQM6SjgMz1FO/e8aaf4cf529a0d249f4065b57b828635/Aesop_Category_Tiles_Hydrate_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/4Riu6C2Y6yCDBXkrFRZzOI/5107d949b2149d136dd86f97637af288/Aesop_Category_Tiles_Hydrate_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">립 & 아이</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/2JvUbe4yebevAqWjPhgOya/eb99e18b8ae9c1b864426f63b7101525/Aesop_Category_Tiles_Eyes_Lips_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/2JvUbe4yebevAqWjPhgOya/eb99e18b8ae9c1b864426f63b7101525/Aesop_Category_Tiles_Eyes_Lips_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/7kiDepq05zCYPiF4VkyVuG/38783a64586b01f347f9e960f9c5e991/Aesop_Category_Tiles_Eyes_Lips_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/2JvUbe4yebevAqWjPhgOya/eb99e18b8ae9c1b864426f63b7101525/Aesop_Category_Tiles_Eyes_Lips_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">쉐이빙</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/16DvKR5sPsatPrNbh1v74n/989457ca731aabbebc21def1cb1d9df1/Aesop_Category_Tiles_Shave_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/16DvKR5sPsatPrNbh1v74n/989457ca731aabbebc21def1cb1d9df1/Aesop_Category_Tiles_Shave_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4O8vlotkfiNrNnSro4c5EL/cfea6a46b20b383852e20ae89b91cce0/Aesop_Category_Tiles_Shave_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/16DvKR5sPsatPrNbh1v74n/989457ca731aabbebc21def1cb1d9df1/Aesop_Category_Tiles_Shave_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">선 케어</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4PhOm6KHhypYQkXJnUPRNS/bf545b927e0d2c4d78d76304a38404ea/Aesop_Category_Tiles_Sun_Care_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4PhOm6KHhypYQkXJnUPRNS/bf545b927e0d2c4d78d76304a38404ea/Aesop_Category_Tiles_Sun_Care_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/1ygD3dxSadLagsjDJZ8UDw/a19651f9dbff8f3ffb081d690204a032/Aesop_Category_Tiles_Sun_Care_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/4PhOm6KHhypYQkXJnUPRNS/bf545b927e0d2c4d78d76304a38404ea/Aesop_Category_Tiles_Sun_Care_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">키트</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/PgqlVZqYwYBte9XlMUC7W/0f12a481ab3dc650d958cdd44fd602b3/Aesop_Category_Tiles_Kits_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/PgqlVZqYwYBte9XlMUC7W/0f12a481ab3dc650d958cdd44fd602b3/Aesop_Category_Tiles_Kits_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/7nxRK2ywi7i7lKSyQomYwA/b4b2c04efac0bd8f2b9c26f5a4c886b6/Aesop_Category_Tiles_Kits_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/PgqlVZqYwYBte9XlMUC7W/0f12a481ab3dc650d958cdd44fd602b3/Aesop_Category_Tiles_Kits_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">번들</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4cXJUcNhhX66QgnJsRHURx/d4e95dc50765c61e66eb7f5e1caafc46/Aesop_Category_Tiles_Bundles_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/4cXJUcNhhX66QgnJsRHURx/d4e95dc50765c61e66eb7f5e1caafc46/Aesop_Category_Tiles_Bundles_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/7fWS4luxurDj7YyKjGtN8w/19aff3a8511d101f888a6c9108da4b9f/Aesop_Category_Tiles_Bundles_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/4cXJUcNhhX66QgnJsRHURx/d4e95dc50765c61e66eb7f5e1caafc46/Aesop_Category_Tiles_Bundles_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">스킨케어 플러스</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/3ioOsQg3FK4LNVGbqXz3eJ/db3939fa6da0732371f8d2c4772c4790/Aesop_Category_Tiles_Skin_Care_Plus_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/3ioOsQg3FK4LNVGbqXz3eJ/db3939fa6da0732371f8d2c4772c4790/Aesop_Category_Tiles_Skin_Care_Plus_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/6lIB5nGNBxpaX1DQ1jJ4Hz/360a030c66132357f617e3e90895f1fa/Aesop_Category_Tiles_Skin_Care_Plus_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/3ioOsQg3FK4LNVGbqXz3eJ/db3939fa6da0732371f8d2c4772c4790/Aesop_Category_Tiles_Skin_Care_Plus_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
<div class="grid-item">
<div class="grid-item-title">파슬리 씨드</div>
<picture class="item-thumb">
<source media="(min-width: 1025px)" srcset="https://www.aesop.com/u1nb1km7t5q7/7k6qjCsD5xhBENr4w41nx6/8d1d821c359a8bcd01b00939a0fb9512/Aesop_Category_Tiles_Parsley_Seed_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 640px)" srcset="https://www.aesop.com/u1nb1km7t5q7/7k6qjCsD5xhBENr4w41nx6/8d1d821c359a8bcd01b00939a0fb9512/Aesop_Category_Tiles_Parsley_Seed_Desktop_Tablet_860x1080px.jpg">
<source media="(min-width: 0px)" srcset="https://www.aesop.com/u1nb1km7t5q7/3dgb5JdtIukLy4oIeQmnzd/a94c86a05779142d9e2327b92f301ba4/Aesop_Category_Tiles_Parsley_Seed_Mobile_640x516px.jpg">
<img alt="decorative" loading="lazy" src="https://www.aesop.com/u1nb1km7t5q7/7k6qjCsD5xhBENr4w41nx6/8d1d821c359a8bcd01b00939a0fb9512/Aesop_Category_Tiles_Parsley_Seed_Desktop_Tablet_860x1080px.jpg">
</picture>
</div>
</div>
</section>
<section class="best-item">
<div class="title-wrap fade">
<h2 class="section-title">신제품 및 사랑받는 제품</h2>
</div>
<div class="swiper">
<div class="swiper-wrapper fade">
<div class="swiper-slide">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/1p7RpA9ngg95JUJl08Heru/04098116c0fbc9785808a5e5ce6110e0/Aesop_Kits_Gift_Kits_2021-22_Precipitous_Web_Large_1584x962px.png" alt="">
</div>
<div class="txt-wrap">
<p class="product-name">프리시피터스</p>
<p class="product-desc">대부분의 피부 타입, 특히 도시 거주자에게 적합</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-wrap">
<img src="https://images.ctfassets.net/u1nb1km7t5q7/3EfM6zrFfHbrUaVxQSoR7A/f40aa3b013d2b7a62645644891a33b38/Aesop_Skin_Exalted_Eye_Serum_15ml_Web_Medium_535x522px.png" alt="">
</div>
<div class="txt-wrap">
<p class="product-name">이그절티드 아이 세럼</p>
<p class="product-desc">비타민이 풍부한 가벼운 세럼</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/SFLFFcSkkuEojFBCs26Xo/97bb554badcd4f5265b972bed612b2ac/Aesop-Skin-Parsley-Seed-Anti-Oxidant-Intense-Serum-60mL-Web-Large-684x668px.png" alt="">
</div>
<div class="txt-wrap">
<p class="product-name">파슬리 씨드 안티 옥시던트 인텐스 세럼</p>
<p class="product-desc">피부를 탄탄하게 가꿔주는 하이드레이팅 세럼</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/4Okm4NhHan5ptJ1yApzHUn/04e93e8181d2dff9ff94b3534fc06cc0/Aesop-Skin-Purifying-Facial-Exfoliant-Paste-75mL-large.png" alt="">
</div>
<div class="txt-wrap">
<p class="product-name">퓨리파잉 엑스폴리언트 페이스트</p>
<p class="product-desc">딥 클렌징을 선사하는 각질 관리 크림</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/X8p8nJaqVBrDKAQReq7rw/9b27a60101217ba11ebd8a6673b13683/Aesop_Skin_B_Triple_C_Facial_Balancing_Gel_60mL_Web_Large_901x478px.png" alt="">
</div>
<div class="txt-wrap">
<p class="product-name">비 트리플 씨 페이셜 밸런싱 젤</p>
<p class="product-desc">비타민 B를 함유해 풍부한 영양을 선사하는 젤</p>
</div>
</div>
<div class="swiper-slide">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/5tohXrYPG52gI48cP9TbJR/c8fd45a7665745c81dffaf5c6b5895b2/Large-PNG-Aesop-Skin-Parsley-Seed-Anti-Oxidant-Facial-Toner-100mL-large.png" alt="">
</div>
<div class="txt-wrap">
<p class="product-name">파슬리 씨드 안티 옥시던트 페이셜 토너</p>
<p class="product-desc">중성, 건성, 민감성 피부</p>
</div>
</div>
</div>
<div class="swiper-btn-prev">
<span class="material-symbols-outlined">arrow_back_ios</span>
</div>
<div class="swiper-btn-next">
<span class="material-symbols-outlined">arrow_forward_ios</span>
</div>
<div class="swiper-scrollbar"></div>
</div>
</section>
<section class="skin-type">
<div class="title-wrap fade">
<h2 class="section-title">대부분의 피부 타입과 고민을 돕는 제품들</h2>
</div>
<div class="grid grid-skin-type fade">
<div class="grid-item">
<a href="" class="link">
<div class="item-name">중성 피부<span class="material-symbols-outlined">arrow_right_alt</span></div>
<div class="item-desc">유분이 많지도 건조하지도 않는 ‘균형’ 잡힌 피부</div>
</a>
</div>
<div class="grid-item">
<a href="" class="link">
<div class="item-name">건성 피부<span class="material-symbols-outlined">arrow_right_alt</span></div>
<div class="item-desc">피지 부족으로 인해 연약하고 각질이 있으며 칙칙해 보이는 피부</div>
</a>
</div>
<div class="grid-item">
<a href="" class="link">
<div class="item-name">지성 피부<span class="material-symbols-outlined">arrow_right_alt</span></div>
<div class="item-desc">과도한 피지 생성으로 모공이 넓어지고 자주 번들거리는 피부</div>
</a>
</div>
<div class="grid-item">
<a href="" class="link">
<div class="item-name">복합성 피부<span class="material-symbols-outlined">arrow_right_alt</span></div>
<div class="item-desc">과도한 피지와 건조한 피부 특성을 모두 나타내며 변화와 반응에 민감한 피부</div>
</a>
</div>
<div class="grid-item">
<a href="" class="link">
<div class="item-name">노화 피부<span class="material-symbols-outlined">arrow_right_alt</span></div>
<div class="item-desc">피지 생성과 보습 유지의 저하로 자연스럽게 약화된 피부</div>
</a>
</div>
<div class="grid-item">
<a href="" class="link">
<div class="item-name">민감성 피부<span class="material-symbols-outlined">arrow_right_alt</span></div>
<div class="item-desc">섬세하고 상태 악화와 반응성에 취약한 상태로, 다양한 피부 타입에 나타날 수 있는 피부</div>
</a>
</div>
</div>
<div class="find-skin-type fade">
<div class="title-wrap">
<h3 class="section-sub-title">피부 상태에 대한 이해</h3>
<p class="desc">피부 특성을 파악하고 가장 적합한 제품을 추천해 드립니다.</p>
<button class="btn btn--white btn--arrow">과정 시작하기
<span class="material-symbols-outlined">arrow_right_alt</span>
</button>
</div>
</div>
</section>
<section class="blend">
<div class="title-wrap fade">
<em class="title-add">컨설턴트의 추천</em>
<h2 class="section-title">추가적인 효능을 위한 블렌딩</h2>
<p class="desc">이솝의 사랑받는 제품 사용법 중, 두 가지 이상의 제품을 블렌딩해 사용하는 방법을 통해 영양을 보다 풍부하게 공급하거나 만족스러운 텍스처를 즐길 수 있습니다. 또한 다른 성분들이 동시에 작용하여 피부에 복합적인 효과를 선사합니다.</p>
</div>
<div class="flex flex-blend fade">
<div class="flex-item">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/45GMCCRUy2UEkkggWEdzg4/a6787c52f2e243a8cffa3da8cf0249fa/Aesop_Bundle_Boosted_Anti-Oxidant_Hydration_Blend_Hybris_Small_523x594px.png" alt="">
</div>
<p class="product-name">안티 옥시던트 하이드레이션 블렌드</p>
<p class="product-price">₩150,000 / 2 제품</p>
<div class="info-wrap">
<div class="info-row">
<div class="info-title">번들 소개</div>
<div class="info-desc">활성산소의 해로운 영향으로부터 피부를 탄탄하게 강화시키는 항산화 성분이 풍부한 블렌드 </div>
</div>
<div class="info-row">
<div class="info-title">구성품</div>
<div class="info-desc">파슬리 씨드 안티 옥시던트 페이셜 트리트먼트, 파슬리 씨드 안티 옥시던트 하이드레이터 </div>
</div>
</div>
<a href="/" class="btn btn-more btn--dark">더 알아보기</a>
</div>
<div class="flex-item">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/2vBulqPJ2OyKgxifK56VFG/2f23d643f200f7a7467d3d1a4dededb2/Aesop_Bundle_Makeup_Removal_Duo_for_Dry_Skin_Hybris_Small_523x594px.png" alt="">
</div>
<p class="product-name">건성 피부용 메이크업 리무버 듀오</p>
<p class="product-price">₩69,000 / 2 제품</p>
<div class="info-wrap">
<div class="info-row">
<div class="info-title">번들 소개</div>
<div class="info-desc">메이크업을 깨끗하게 지워주는, 부드럽지만 효과적 블렌드 </div>
</div>
<div class="info-row">
<div class="info-title">구성품</div>
<div class="info-desc">리무버, 퓨리파잉 페이셜 크림 클렌저 </div>
</div>
</div>
<a href="/" class="btn btn-more btn--dark">더 알아보기</a>
</div>
<div class="flex-item">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/kQgg5iOKlLICwQE0XUHT2/4af52aa6350605a7b602b683bf2cebf8/Aesop_Bundle_Enhanced_Hydration_for_Oily_and_Combination_Skin_Hybris_Small_523x594px.png" alt="">
</div>
<p class="product-name">지성 피부와 복합성 피부용 인핸스드 하이드레이션</p>
<p class="product-price">₩147,000 / 2 제품</p>
<div class="info-wrap">
<div class="info-row">
<div class="info-title">번들 소개</div>
<div class="info-desc">모공이 잘 막히는 피부에 부담을 주지 않으면서 균형을 잡아주는 수분을 공급하는 블렌드</div>
</div>
<div class="info-row">
<div class="info-title">구성품</div>
<div class="info-desc">
페뷸러스 페이스 오일, 라이트웨이트 페이셜 하이드레이팅 세럼 </div>
</div>
</div>
<a href="/" class="btn btn-more btn--dark">더 알아보기</a>
</div>
</div>
</section>
<section class="inquiry fade">
<div class="title-wrap left-block">
<h3 class="section-title">추가적인 도움이 필요한 경우</h3>
</div>
<div class="right-block">
<p class="desc">제품 선택에 보다 자세한 조언이 필요하시면 문의하기를 통해 도움을 받으세요.</p>
<button class="btn btn--blank--dark">문의하기
<span class="material-symbols-outlined">arrow_right_alt</span>
</button>
</div>
</section>
<section class="articles fade">
<div class="flex flex-article">
<div class="flex-item">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/gNfs8Bfff0V5QVCU1Pv2J/918b9560f5d934405d5a428abb7eec0d/Aesop_How_to_Curate_a_Skin_Care_Regimen_Web_Athenaeum_Thumbnail_Horizontal_Desktop_1920x1080px.jpg" alt="">
</div>
<span class="lab">Lessons from the lab</span>
<div class="txt-wrap">
<a href=""><h4 class="article-title">스킨 케어 루틴을 관리하는 방법</h4></a>
<span class="reading-time">7분 독서</span>
</div>
</div>
<div class="flex-item">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/4g99dMSJZE1mDHXK7HtmMi/82ce20ce6525893f14635c57b8d843e2/Aesop_The_Anatomy_and_Physiology_of_the_Skin_Web_Athenaeum_Thumbnail_Horizontal_Desktop_1920x1080px.jpg" alt="">
</div>
<span class="lab">Lessons from the lab</span>
<div class="txt-wrap">
<a href=""><h4 class="article-title">피부의 해부학과 생리학</h4></a>
<span class="reading-time">5분 독서</span>
</div>
</div>
<div class="flex-item">
<div class="img-wrap">
<img src="https://www.aesop.com/u1nb1km7t5q7/7Ipya7ssGoXDLRoXO5yTL0/562c1d32aa23830b1ada1724f366228f/Aesop_A_Guide_To_Skin_Hydration_Web_Athenaeum_Thumbnail_Horizontal_Desktop_1920x1080px.jpg" alt="">
</div>
<span class="lab">Lessons from the lab</span>
<div class="txt-wrap">
<a href=""><h4 class="article-title">피부의 수분 공급을 위한 가이드</h4></a>
<span class="reading-time">7분 독서</span>
</div>
</div>
</div>
</section>
</main>
<footer>
<div class="grid">
<div class="grid-item">
<div class="footer-title">이솝 커뮤니케이션</div>
<div class="footer-divider"></div>
<div class="footer-list">제품, 서비스, 스토어, 이벤트, 문화적 관심사 등 다양한 소식을 받아보실 수 있도록 이솝 이메일을 구독하세요.</div>
<div class="footer-list"><input type="checkbox" id="cb1"><label for="cb1"></label>본인은 만 14세 이상입니다 (필수)</div>
<div class="footer-list"><input type="checkbox" id="cb2"><label for="cb2"></label>개인정보수집 및 이용에 동의합니다 (필수)</div>
<div class="footer-list check-desc">이솝은 이솝의 제품, 서비스 및 홍보 행사 관련 정보를 마케팅 목적으로, 고객님이 동의 해지하시기 전까지, 고객님께 이메일로 보내 드립니다. 마케팅 목적의 개인정보 수집 및 이용에 동의하지 않으셔도 되고, 그러한 경우, 마케팅 정보를 수령하실 수 없습니다.</div>
<div class="footer-list"><input type="checkbox" id="cb3"><label for="cb3"></label>마케팅 정보 수신에 동의합니다 (필수)</div>
<div class="footer-list check-desc">뉴스레터 이메일을 통한 광고성 정보 수신에 동의합니다.</div>
<div class="footer-list">
<input type="email" name="" id="" placeholder="이메일 주소">
<button type="submit"><span class="material-symbols-outlined">navigate_next</span></button>
</div>
</div>
<div class="grid-item">
<div class="footer-title">주문 및 지원</div>
<div class="footer-divider"></div>
<div class="footer-list">문의하기</div>
<div class="footer-list">자주 묻는 질문<span class="material-symbols-outlined">north_east</span></div>
<div class="footer-list">배송<span class="material-symbols-outlined">north_east</span></div>
<div class="footer-list">반품<span class="material-symbols-outlined">north_east</span></div>
<div class="footer-list">배송 조회하기<span class="material-symbols-outlined">north_east</span></div>
<div class="footer-list">주문 내역</div>
<div class="footer-list">이용 약관</div>
</div>
<div class="grid-item">
<div class="footer-title">서비스</div>
<div class="footer-divider"></div>
<div class="footer-list">기업체 구매</div>
<div class="footer-list">페이셜 어포인트먼트</div>
<div class="footer-list">1:1 채팅 상담</div>
<div class="footer-list">린스 앤 리턴 캠페인</div>
</div>
<div class="grid-item">
<div class="footer-title">위치 기본 설정</div>
<div class="footer-divider"></div>
<div class="footer-list">배송:</div>
<div class="footer-list"><span class="choice">대한민국</span></div>
<div class="footer-list">언어:</div>
<div class="footer-list"><span class="choice">한국어</span></div>
</div>
<div class="grid-item">
<div class="footer-title">지속가능성</div>
<div class="footer-divider"></div>
<div class="footer-list block">이솝은 비콥 인증을 획득한 브랜드이며, PETA로부터 비건 인증을 받은 브랜드입니다. <span class="choice">더 알아보기</span></div>
</div>
<div class="grid-item">
<div class="footer-title">소개</div>
<div class="footer-divider"></div>
<div class="footer-list">브랜드 스토리</div>
<div class="footer-list">이솝 재단</div>
<div class="footer-list">채용</div>
<div class="footer-list">개인정보처리방침</div>
<div class="footer-list">영상정보처리기기 운영/관리 방침</div>
<div class="footer-list">정품 인증</div>
<div class="footer-list">쿠키 정책</div>
</div>
<div class="grid-item">
<div class="footer-title">소셜</div>
<div class="footer-divider"></div>
<div class="footer-list">Intagram<span class="material-symbols-outlined">north_east</span></div>
<div class="footer-list">Twitter<span class="material-symbols-outlined">north_east</span></div>
<div class="footer-list">LinkedIn<span class="material-symbols-outlined">north_east</span></div>
<div class="footer-list">Kakao Plus Friend<span class="material-symbols-outlined">north_east</span></div>
</div>
<div class="grid-item">
<div class="footer-title">주의</div>
<div class="footer-divider"></div>
<div class="footer-list block">상호: 이솝코리아 유한회사 | 주소: 서울특별시 강남구 도산대로45길 10-6 이솝코리아 | 대표자: 프레데리크미셸어완세일러 | 대표전화: 1800-1987 | 대표 이메일: [email protected] | 호스팅 사업자: SAP Hybris | 사업자 등록 번호: 220-88-56014 <span class="choice">사업자정보확인</span> | 통신판매업 신고번호: 2014-서울강남-02300</div>
</div>
</div>
<div class="footer-bottom">
<span class="copyright">© Aesop</span>
</div>
</footer>
</body>
</html>