-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
581 lines (556 loc) · 34.2 KB
/
index.html
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
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- boxicons css -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- custom css -->
<link rel="stylesheet" href="styles/style.css">
<!-- custom script -->
<script src="all.js" defer></script>
<title>綠藤生機護膚蜜產品頁Clone</title>
</head>
<body>
<div class="overlay"></div>
<nav id="nav">
<div class="wrapper">
<!-- 以下行動版menu -->
<div class="menu__mobile">
<button class="menu__mobile__btn">
<i class='bx bx-menu' ></i>
</button>
<div class="menu__mobile__logo">
<a href="#">
<img src="img/logo-ch.png" alt="">
</a>
</div>
<div class="menu-mobile-main">
<ul class="menu-mobile-main__nav">
<li class="menu-mobile-main__nav__item" id="menu-mobile-main__nav__item"><a href="#">最新提案</a>
<ul class="sub-menu" id="sub-menu">
<li class="sub-menu-item"><button class="arrow">←</button></li>
<li class="sub-menu-item"><a href="#sub-menu">只到 5/16｜母親節優惠到數中</a></li>
<li class="sub-menu-item"><a href="#sub-menu">新品補貨到｜把握最佳優惠</a></li>
<li class="sub-menu-item"><a href="#sub-menu">新註冊綁定｜現折 $150</a></li>
<li class="sub-menu-item"><a href="#sub-menu">12 家門市｜邀您現場體驗新品</a></li>
</ul>
</li>
<li class="menu-mobile-main__nav__item"><a href="#">所有產品</a></li>
<li class="menu-mobile-main__nav__item"><a href="#">臉部</a></li>
<li class="menu-mobile-main__nav__item"><a href="#">頭髮</a></li>
<li class="menu-mobile-main__nav__item"><a href="#">身體</a></li>
<li class="menu-mobile-main__nav__item"><a href="#">auscentic 香氛</a></li>
<li class="menu-mobile-main__nav__item"><a href="#">保養指南</a></li>
<li class="menu-mobile-main__nav__item"><a href="#">關於綠藤</a></li>
</ul>
<ul class="menu-mobile-main__footer">
<li class="menu-mobile-main__footer__item login">
<a href="#">
<img src="https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-member.svg" alt="">
<span>登入 / 註冊</span>
</a>
</li>
<li class="menu-mobile-main__footer__item search">
<a href="#">
<img src="https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-search.svg" alt="">
<span>SEARCH</span>
</a>
</li>
</ul>
</div>
</div>
<!-- 以上行動版menu -->
<div class="navbar__left">
<div class="logo">
<a href="#">
<img src="img/logo-ch.png" alt="">
</a>
</div>
<ul class="nav-menu">
<li class="nav-menu__item"><a href="#">最新提案</a>
<div class="dropdown-menu latest">
<div class="container">
<ul class="dropdown-menu_latest_list">
<li>
<img src="img/menu-latest-01.jpg" class="latest-img" alt="">
<div class="latest-title">只到 5/16｜母親節優惠到數中</div>
<p class="latest-text">只到 5/16，綠藤母親節優惠最後倒數！官網獨家滿 2500 贈 150，滿額最高回饋 $1330</p>
<a class="latest-btn" href="#">把握優惠</a>
</li>
<li>
<img src="img/menu-latest-02.jpg" class="latest-img" alt="">
<div class="latest-title">新品補貨到｜把握最佳優惠</div>
<p class="latest-text">熟客回購 No.1 抗老精華全新升級！首批 10000 瓶熱銷斷貨，最新補貨到！</p>
<a class="latest-btn" href="#">立即前往 </a>
</li>
<li>
<img src="img/menu-latest-03.jpg" class="latest-img" alt="">
<div class="latest-title">新註冊綁定｜現折 $150</div>
<p class="latest-text">新註冊領 $100 購物金，綁定 LINE 再領 $50，把握母親節優惠！</p>
<a class="latest-btn" href="#">立即註冊</a>
</li>
<li>
<img src="img/menu-latest-04.jpg" class="latest-img" alt="">
<div class="latest-title">12 家門市｜邀您現場體驗新品</div>
<p class="latest-text">綠藤 12 間直營門市，每一間都是獨一無二的設計，邀請您有空到門市與發芽大使聊聊，現場體驗綠藤純淨保養與全新純淨香氛！</p>
<a class="latest-btn" href="#">看門市據點</a>
</li>
</ul>
</div>
</div>
</li>
<li class="nav-menu__item"><a href="#">所有產品</a>
<div class="dropdown-menu allProducts">
<ul>
<div class="dropdown-menu__title">所有產品</div>
<li class="dropdown-menu__item"><a href="#">優惠組合</a></li>
<li class="dropdown-menu__item"><a href="#">臉部保養</a></li>
<li class="dropdown-menu__item"><a href="#">頭髮保養</a></li>
<li class="dropdown-menu__item"><a href="#">身體沐浴</a></li>
<li class="dropdown-menu__item"><a href="#">居家香氛</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">綠藤純淨保養推薦</div>
<li class="dropdown-menu__item"><a href="#">22 款全系列</a></li>
<li class="dropdown-menu__item"><a href="#">精華液</a></li>
<li class="dropdown-menu__item"><a href="#">精華油</a></li>
<li class="dropdown-menu__item"><a href="#">化妝水</a></li>
<li class="dropdown-menu__item"><a href="#">洗面乳</a></li>
<li class="dropdown-menu__item"><a href="#">洗髮精</a></li>
<li class="dropdown-menu__item"><a href="#">護髮 / 潤髮</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">auscentic 純淨香氛推薦</div>
<li class="dropdown-menu__item"><a href="#">18 款全系列</a></li>
<li class="dropdown-menu__item"><a href="#">護膚蜜</a></li>
<li class="dropdown-menu__item"><a href="#">沐浴蜜</a></li>
<li class="dropdown-menu__item"><a href="#">洗手慕斯</a></li>
<li class="dropdown-menu__item"><a href="#">微香瓶</a></li>
<li class="dropdown-menu__item"><a href="#">精油</a></li>
</ul>
</div>
</li>
<li class="nav-menu__item"><a href="#">臉部</a>
<div class="dropdown-menu face">
<ul>
<div class="dropdown-menu__title">精選推薦 Top5</div>
<li class="dropdown-menu__item"><a href="#">活萃三日修護精華</a></li>
<li class="dropdown-menu__item"><a href="#">極境雙藻復原精華</a></li>
<li class="dropdown-menu__item"><a href="#">綠色海洋精華油</a></li>
<li class="dropdown-menu__item"><a href="#">奇蹟辣木油</a></li>
<li class="dropdown-menu__item"><a href="#">永續報告書</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">臉部保養</div>
<li class="dropdown-menu__item"><a href="#">精華液</a></li>
<li class="dropdown-menu__item"><a href="#">精華油</a></li>
<li class="dropdown-menu__item"><a href="#">化妝水</a></li>
<li class="dropdown-menu__item"><a href="#">洗面乳</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">依膚質</div>
<li class="dropdown-menu__item"><a href="#">敏感肌</a></li>
<li class="dropdown-menu__item"><a href="#">一般肌 / 混合肌</a></li>
<li class="dropdown-menu__item"><a href="#">乾性肌</a></li>
<li class="dropdown-menu__item"><a href="#">油性肌</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">保養需求</div>
<li class="dropdown-menu__item"><a href="#">肌膚保濕</a></li>
<li class="dropdown-menu__item"><a href="#">抗老修護</a></li>
<li class="dropdown-menu__item"><a href="#">皮膚暗沈</a></li>
<li class="dropdown-menu__item"><a href="#">細紋緊緻</a></li>
<li class="dropdown-menu__item"><a href="#">毛孔粗大</a></li>
<li class="dropdown-menu__item"><a href="#">臉部防曬</a></li>
</ul>
</div>
</li>
<li class="nav-menu__item"><a href="#">頭髮</a>
<div class="dropdown-menu hair">
<ul>
<div class="dropdown-menu__title">精選推薦 Top3</div>
<li class="dropdown-menu__item"><a href="#">頭皮淨化洗髮精</a></li>
<li class="dropdown-menu__item"><a href="#">頭皮淨化蜂膠+ 洗髮精</a></li>
<li class="dropdown-menu__item"><a href="#">強韌護色洗髮精</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">頭髮保養</div>
<li class="dropdown-menu__item"><a href="#">洗髮精</a></li>
<li class="dropdown-menu__item"><a href="#">護髮 / 潤髮</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">保養需求</div>
<li class="dropdown-menu__item"><a href="#">頭皮癢、出油扁塌</a></li>
<li class="dropdown-menu__item"><a href="#">頭髮毛躁、染燙受損</a></li>
<li class="dropdown-menu__item"><a href="#">染後護色</a></li>
</ul>
</div>
</li>
<li class="nav-menu__item"><a href="#">身體</a>
<div class="dropdown-menu body">
<ul>
<div class="dropdown-menu__title">精選推薦 Top5</div>
<li class="dropdown-menu__item"><a href="#">護膚蜜</a></li>
<li class="dropdown-menu__item"><a href="#">微香沐浴蜜</a></li>
<li class="dropdown-menu__item"><a href="#">洗手慕斯</a></li>
<li class="dropdown-menu__item"><a href="#">敏感和諧沐浴露</a></li>
<li class="dropdown-menu__item"><a href="#">ME TIME 女性私密沐浴露</a></li>
<li class="dropdown-menu__item"><a href="#">唇部保養指南</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">清潔需求</div>
<li class="dropdown-menu__item"><a href="#">香氛沐浴</a></li>
<li class="dropdown-menu__item"><a href="#">敏感肌沐浴</a></li>
<li class="dropdown-menu__item"><a href="#">私密處清潔</a></li>
</ul>
</div>
</li>
<li class="nav-menu__item"><a href="#">auscentic香氛</a>
<div class="dropdown-menu scent">
<ul>
<div class="dropdown-menu__title">產品</div>
<li class="dropdown-menu__item"><a href="#">auscentic 全系列</a></li>
<li class="dropdown-menu__item"><a href="#">身體清潔保養</a></li>
<li class="dropdown-menu__item"><a href="#">居家香氛與精油</a></li>
<div class="dropdown-menu__title title-scent">香氣</div>
<li class="dropdown-menu__item"><a href="#">花香調</a></li>
<li class="dropdown-menu__item"><a href="#">木質調</a></li>
<li class="dropdown-menu__item"><a href="#">草本調</a></li>
<li class="dropdown-menu__item"><a href="#">果香調</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">精選推薦 Top 3</div>
<li class="dropdown-menu__item"><a href="#">護膚蜜</a></li>
<li class="dropdown-menu__item"><a href="#">洗手慕斯</a></li>
<li class="dropdown-menu__item"><a href="#">微香瓶</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">auscentic 奧森青</div>
<li class="dropdown-menu__item"><a href="#">品牌故事</a></li>
<li class="dropdown-menu__item"><a href="#">設計，源自自然的原貌</a></li>
</ul>
<ul class="dropdown-menu__group">
<img src="img/menu-logo-auscentic.png" alt="" class="dropdown-menu__group-logo">
<p class="dropdown-menu__group-text">
authentic + scent = auscentic
<br>
100% 天然來源，讓自然的原貌延續在香氣之中
</p>
</ul>
</div>
</li>
<li class="nav-menu__item"><a href="#">保養指南</a>
<div class="dropdown-menu skinCare">
<ul>
<div class="dropdown-menu__title">精選指南</div>
<li class="dropdown-menu__item"><a href="#">頭皮護理與清潔指南</a></li>
<li class="dropdown-menu__item"><a href="#">乾性肌膚保濕指南</a></li>
<li class="dropdown-menu__item"><a href="#">混合肌膚保養指南</a></li>
<li class="dropdown-menu__item"><a href="#">油性肌膚保養指南</a></li>
<li class="dropdown-menu__item"><a href="#">敏感肌保養指南</a></li>
<li class="dropdown-menu__item"><a href="#">唇部保養指南</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">純淨生活部落格</div>
<li class="dropdown-menu__item"><a href="#">臉部肌膚知識</a></li>
<li class="dropdown-menu__item"><a href="#">保養品挑選與使用</a></li>
<li class="dropdown-menu__item"><a href="#">深入永續生活</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">了解非必要程序</div>
<li class="dropdown-menu__item"><a href="#">你是否真的需要眼周保養品?</a></li>
<li class="dropdown-menu__item"><a href="#">防曬的三個選擇/a></li>
<li class="dropdown-menu__item"><a href="#">別買這瓶潤髮乳</a></li>
</ul>
</div>
</li>
<li class="nav-menu__item"><a href="#">關於綠藤</a>
<div class="dropdown-menu aboutGreen">
<ul>
<div class="dropdown-menu__title">深入瞭解</div>
<li class="dropdown-menu__item"><a href="#">品牌故事</a></li>
<li class="dropdown-menu__item"><a href="#">純淨保養主張</a></li>
<li class="dropdown-menu__item"><a href="#">綠色生活21天</a></li>
<li class="dropdown-menu__item"><a href="#">認識 B 型企業</a></li>
<li class="dropdown-menu__item"><a href="#">永續報告書</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">了解非必要成份</div>
<li class="dropdown-menu__item"><a href="#">2900+ 非必要成分清單</a></li>
<li class="dropdown-menu__item"><a href="#">成分說明書</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">加入綠藤</div>
<li class="dropdown-menu__item"><a href="#">加入綠藤</a></li>
<li class="dropdown-menu__item"><a href="#">實習計畫</a></li>
</ul>
<ul>
<div class="dropdown-menu__title">更多綠藤</div>
<li class="dropdown-menu__item"><a href="#">何處購買</a></li>
<li class="dropdown-menu__item"><a href="#">媒體報導</a></li>
<li class="dropdown-menu__item"><a href="#">企業採購</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div class="navbar__right">
<ul class="side-menu">
<li>
<div class="search-area">
<a class="search-area__search-btn">
<img src="https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-search.svg" alt="">
<span class="search-area__placeholder">SEARCH</span>
</a>
<form action="" class="search-area__bar">
<input type="text" class="search-area__bar-input">
<button type="button" class="search-area__bar-submit-btn">搜尋</button>
</form>
</div>
</li>
<li class="member">
<a href="#" class="member__link" title="menu:會員登入">
<img src="https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-member.svg" alt="">
</a>
<div class="member__dropdown">
<a href="#" class="member__dropdown-item" title="sign-in">登入 / 註冊</a>
</div>
</li>
<li class="currency">
<a href="" class="currency__link" title="change-currency" >
<img class="currency__icon" src="https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-currency.png" alt="">
<span class="currency__text">更換幣別</span>
</a>
</li>
<li class="cart__wrapper">
<a class="cart">
<img class="cart__icon" src="https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-cart.svg" alt="">
<span class="cart__count">1</span>
</a>
<div class="cart__item">
<div class="upper">
<h4>花時間護膚蜜</h4>
<img src="img/cart-product-img.webp" alt="">
<span class="delete__btn"><i class='bx bx-trash'></i></span>
</div>
<div class="cart__item__sum">
<span class="cart__item__quantity">1</span>
<span class="cart__item__price"><span>x</span> NT$1,280</span>
</div>
<div class="cart__item__checkout" ontouchstart>訂單結帳</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<!-- 麵包屑 -->
<div class="breadcrumb">
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">首頁</a></li>
<li class="breadcrumb__item">
<a href="#">
<img src=" https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-right-white.svg" alt="">
<span>auscentic</span>
</a>
</li>
<li class="breadcrumb__item">
<a href="#">
<img src=" https://cdn.greenvines.com.tw/shopline/2021-rebrand/images/icon/ico-right-white.svg" alt="">
<span>花時間護膚蜜</span>
</a>
</li>
</ul>
</div>
<!-- 護膚蜜內容 -->
<section class="container-product">
<div class="product-img">
<img class="bottle" src="img/bottle.png" alt="">
<div class="photos">
<div><img src="img/slide-img-01.jpg" alt=""></div>
<div><img src="img/slide-img-02.jpg" alt=""></div>
<div><img src="img/slide-img-03.jpg" alt=""></div>
<div class="last-img"><img src="img/slide-img-01.jpg" alt=""></div>
</div>
</div>
<div class="sticky-wrap">
<!-- 產品介紹 -->
<div class="product__info">
<div class="product__title">
<h1 class="product__name">花時間｜護膚蜜</h1>
<p class="aromaTag">花香 X 草本調</p>
</div>
<p class="product__slogan">每朵想像．都是自我留白</p>
<h2 class="product__price">NT$1,280 / 100ml</h2>
<div class="product__description">
<p class="product__text">
自然：花香⨉草本調｜苦橙葉｜天竺葵｜大西洋雪松
<br>
原貌：獻給身體的濃縮營養精華，以蜜呵護肌膚，藉香氛釋放感官
<br>
<br>
香氛身體保養科學實測：韓國人體功效實驗證實，使用護膚蜜 14 天
<br>
95% 長效保濕，舒緩乾癢
<br>
90% 改善暗沉不均，透出明亮光澤
<br>
100% 回復細嫩光滑觸感
</p>
</div>
<div class="product__review">
<i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star'></i><i class='bx bxs-star-half' ></i>
688評論
</div>
<div class="shop">
<div class="quantity">
<button type="button" class="minus">−</button>
<div class="num">1</div>
<button type="button" class="add">+</button>
</div>
<button type="button" href="#" class="addToCart">
加入購物車
</button>
</div>
<!-- 促銷訊息 start-->
<p class="text-promo"><a href="#">微香沐浴護膚保養組限時優惠中，新註冊綁定 LINE 享 $150 購物金 ⟶</a></p>
<!-- 促銷訊息 end-->
<ul class="product__ingredients">
<li>
<input type="radio" name="accordion" id="all" checked>
<label for="all" class="product__ingredients__heading">全成分</label>
<div class="product__ingredients__body">
<p>
<b>精油配方</b>:<br>
佛手柑精油、肉豆蔻精油、黑胡椒精油、天竺葵精油、真正薰衣草精油、苦橙葉精油、大西洋雪松精油、安息香精油、台灣紅檜精油
</p>
<p>
<b>全成分</b><br>
角鯊烷、水、白芒花籽油、三庚酸甘油酯、戊二醇、糖基海藻糖、氫化澱粉水解產物、乙醯葡萄糖胺、白松樹皮萃取、石榴固醇、玻尿酸鈉、乙醯丙酸鈉、茴香酸鈉、檸檬酸、麥芽糊精、精油*
</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="use">
<label for="use" class="product__ingredients__heading">使用方式</label>
<div class="product__ingredients__body">
<p>
搖晃 5 秒使油水均勻混合。取適量護膚蜜均勻塗抹於身體肌膚，感受自然香氣帶來的放鬆，輕柔按摩至吸收。可加強手肘、膝蓋、雙腳等易乾燥部位，給予肌膚深層而自然的滋養。
</p>
</div>
</li>
<li>
<input type="radio" name="accordion" id="recycle">
<label for="recycle" class="product__ingredients__heading">回收資訊</label>
<div class="product__ingredients__body">
<ul>
<li>瓶身材質：50% 再生玻璃</li>
<li>旋蓋材質：PP</li>
<li>內塞材質：PE</li>
<li>包裝材質：未漂白 FSC® 認證紙</li>
<li>回收方式：100% 可回收。請將紙盒壓扁後丟入紙類回收；將瓶身丟入玻璃類回收；將內塞、旋蓋丟入塑膠類回收。</li>
<li>保存資訊：自製造日 2 年，開封後 6 個月</li>
</ul>
<p class="note">
＊提醒事項：沒有一個產品適合每一個人，如果使用後有任何皮膚敏感不適，請您先停用、觀察後續皮膚狀況，並聯繫綠藤客服，或視情況尋求醫師協助。
</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- 中間區塊 -->
<section class="section__middle__first">
<div class="leaves">
<img src="img/middle-line-leaves.png" alt="">
</div>
<div class="middle-text">
<p>花時間</p>
<p>每朵想像·都是自我留白</p>
<p class="aromaTag">花香調×草本調</p>
</div>
<div class="tree">
<img src="img/middle-tree.png" alt="">
</div>
</section>
<section class="section__middle__second">
<div class="container">
<h3>讓香氛身體保養，進入活性精華時代</h3>
<p>
請細細端詳你的臉頰：<br><br>
如果是臉，乾燥脫皮時，你會考慮以角鯊烷、玻尿酸達到舒緩柔嫩⋯⋯<br>
如果是臉，暗沉粗糙時，你會想到藉珍珠藻、海洋藤竹萃取提升細緻明亮度⋯⋯<br>
如果是臉，脆弱易敏時，你會求助於辣木油、神經醯胺協助穩定修護⋯⋯<br><br>
但換作是缺乏油脂保護、又得面對每日頻繁摩擦的身體肌膚呢？
</p>
</div>
</section>
<!-- 石頭 -->
<section class="section__middle__third">
<div class="rock">
<img src="img/middle-rock.png" alt="">
</div>
<div class="container">
<div class="description">
<h3>前所未聞的護膚蜜，獻給身體的濃縮營養精華</h3>
<h5>以蜜呵護肌膚，藉香氛釋放感官</h5>
<div class="title-bottombar"></div>
<p>auscentic 護膚蜜延續綠藤無乳化劑介入的油水雙層劑型，以 60% 油分滿足身體缺乏皮脂滋潤的需求，承載 5 種源於自然的活性成分，如同濃縮豐富營養的「蜜」，成為獻給身體的保養精華；在被動的基礎保養以外，能主動深入肌膚發揮深度保濕與修護作用，從根本幫助身體回歸細緻明亮的自然原貌，重獲柔嫩觸感；在嗅覺撫慰上，從香氣來源到基底，auscentic 亦堅持市面罕見的 100% 天然來源，讓來自植物的幽微清香，與自身、與生活，融合出自然柔和且獨一無二的氣息。</p>
</div>
<div class="image"></div>
</div>
</section>
<!-- 手肘 -->
<section class="section__middle__fourth">
<div class="container">
<div class="image"></div>
<div class="description">
<h3>北美白松樹皮萃取，來自森林的勻亮能量</h3>
<h5>有效改善手肘、膝蓋、臀部下緣⋯⋯等暗沉困擾</h5>
<div class="title-bottombar"></div>
<p>生長於高緯度的白松樹，面對極端寒冷的氣候存活百年，故樹皮衍生出強大的自我防禦能力，阻擋病蟲害等環境威脅，成為樹木生物活性極高的部分。而北美白松更被當地原住民奉為「靈樹」，自古就被用以修護皮膚、強化身體機能。
<br>
如今，原本林業運用後廢棄的樹皮，經過循環經濟升級再造，使我們可藉樹木的皮膚，從根本修護身體肌膚，透過抑制乾燥泛紅與暗沉，無需另外去角質，也能從底層透出健康明亮。
</p>
</div>
</div>
</section>
<!-- 科學實測 -->
<section class="section__middle__fifth">
<div class="container">
<div class="description">
<h3>少見的香氛身體保養科學實測</h3>
<h5>韓國人體功效實驗證實*，使用護膚蜜14 天</h5>
</div>
<div class="data-circle">
<div class="data-01">
<img src="img/data-1.png" alt="">
<p>長效保濕，舒緩乾癢</p>
</div>
<div class="data-01">
<img src="img/data-2.png" alt="">
<p>改善暗沉不均，透出明亮光澤</p>
</div>
<div class="data-01">
<img src="img/data-3.png" alt="">
<p>回復細嫩光滑觸感</p>
</div>
</div>
<small>*21 位 30-60 歲亞洲女性每天使用 2 次「花時間護膚蜜」，14 天後自我評估結果</small>
</div>
</section>
<div class="section__footer__bg">
<img src="img/footer-bg.png" alt="">
</div>
<a href="#" class="news">
新品熱銷
<br>
補貨到
<br>
→
</a>
</body>
</html>