Menghadirkan perlindungan eksklusif dengan manfaat menyeluruh, didukung akses layanan kesehatan kelas atas, serta solusi investasi jangka panjang. Dirancang bagi Anda yang mengutamakan kenyamanan, keamanan dan perencanaan finansial berkelanjutan.
Java method "com.sun.proxy.$Proxy96.getLayout(long, boolean, long)" threw an exception when invoked on com.sun.proxy.$Proxy96 object "com.liferay.layout.internal.service.LayoutLocalServiceWrapper@2451c320"; see cause exception in the Java stack trace. ---- FTL stack trace ("~" means nesting-related): - Failed at: #assign pageLayout = layoutLocalServi... [in template "1415598#1415646#1876017128" at line 132, column 65] ----
1<#assign base_url = "/web/amfs"/>
2<#if entries?has_content>
3
4<#-- Step 1: Hitung total entry -->
5<#assign totalEntries = entries?size />
6
7<#-- Step 2: Hitung kemunculan setiap tag -->
8<#assign tagCountMap = {} />
9
10<#list entries as curEntry>
11 <#assign tags = curEntry.getTags() />
12 <#list tags as tag>
13 <#assign tagName = tag.getName() />
14 <#assign currentCount = tagCountMap[tagName]!0 />
15 <#assign tagCountMap = tagCountMap + { (tagName): currentCount + 1 } />
16 </#list>
17</#list>
18
19<#-- Step 3: Ambil hanya tag yang tidak muncul di semua entry -->
20<#assign filterableTags = [] />
21<#list tagCountMap?keys as tagName>
22 <#if tagCountMap[tagName] < totalEntries>
23 <#assign filterableTags = filterableTags + [tagName] />
24 </#if>
25</#list>
26
27<section class="layanan-nasabah-section">
28 <div class="prime-iv-container">
29 <div class="prime-iv-contain">
30 <div class="header">
31 <div class="text">
32 Pilihan Produk Prime Sesuai Kebutuhan Anda
33 </div>
34 <div class="text-i">
35 Temukan ragam solusi perlindungan menyeluruh dengan manfaat
36 optimal sesuai dengan kebutuhan Anda dan keluarga.
37 </div>
38 <#assign totalButtons = (filterableTags?size) + 1>
39 <div class="button <#if totalButtons < 5>no-scroll</#if>">
40 <button class="filter-btn btn-icon active-tag" data-tag="">
41 Semua
42 </button>
43 <#list filterableTags as tagName>
44 <button class="filter-btn btn-icon" data-tag="${tagName}">${tagName}</button>
45 </#list>
46 </div>
47 </div>
48 </div>
49 <div class="prime-iv-contain-i">
50 <div class="prime-iv-contain-i-card-list">
51 <#list entries as curEntry>
52 <#assign entryId = curEntry.getClassPK()/>
53 <#assign renderer = curEntry.getAssetRenderer()/>
54 <#assign className = renderer.getClassName()/>
55 <#if className = "com.liferay.journal.model.JournalArticle">
56 <#assign journalArticle = renderer.getArticle() />
57 <#assign document = saxReaderUtil.read(journalArticle.getContentByLocale(locale.toString())) />
58 <#assign rootElement = document.getRootElement()/>
59 <#assign tagClasses = "" />
60
61 <#list curEntry.getTags() as tag>
62 <#assign tagClasses = tagClasses + " tag-" + tag.getName()?replace(" ", "-") />
63 </#list>
64
65 <#assign fieldMap = {} />
66
67 <#list rootElement.elements() as dynamicElement>
68 <#assign fieldMap = fieldMap + { (dynamicElement.attributeValue("field-reference")) : dynamicElement } />
69 </#list>
70 <div class="prime-iv-contain-i-card ${tagClasses}">
71 <#assign isTopProductString = (fieldMap["IsTopProduct"]?? && fieldMap["IsTopProduct"].element("dynamic-content")??)?then(fieldMap["IsTopProduct"].element("dynamic-content").getText(), "false") />
72 <#assign isTopProduct = isTopProductString?lower_case == "true" />
73 <#if isTopProduct>
74 <div class="product-ribbon">Produk Unggulan</div>
75 </#if>
76 <#assign ImageBackground = (fieldMap["ProductImage"]?? && fieldMap["ProductImage"].element("dynamic-content")??)?then(fieldMap["ProductImage"].element("dynamic-content").getStringValue(), "") />
77 <#assign path_image = "/documents/"/>
78 <div class="image">
79 <#if ImageBackground?has_content>
80 <#assign image_json = jsonFactoryUtil.createJSONObject(ImageBackground)/>
81 <#assign image_title = image_json.getString('title') />
82 <#assign image_grupid = image_json.getString('groupId') + "/" />
83 <#assign image_fileEntryId = image_json.getString('fileEntryId') + "/" />
84 <#assign image_name = stringUtil.replace(image_json.getString('name'), " ","%20" )/>
85 <#assign image_uuid = "/" + image_json.getString('uuid') + "/"/>
86 <#assign full_image = path_image + image_grupid + image_fileEntryId + image_name + image_uuid />
87 <img src="${full_image}" />
88 </#if>
89 </div>
90 <div class="text">
91 <#assign coverageType = (fieldMap["SubCategory"]?? && fieldMap["SubCategory"].element("dynamic-content")??)?then(fieldMap["SubCategory"].element("dynamic-content").getText(), "") />
92 <div class="text-iv">${coverageType}</div>
93 </div>
94 <div class="text-i">
95 <#assign productName = (fieldMap["Title"]?? && fieldMap["Title"].element("dynamic-content")??)?then(fieldMap["Title"].element("dynamic-content").getText(), "") />
96 <#assign ListBenefit = (fieldMap["ListBenefit"]?? && fieldMap["ListBenefit"].element("dynamic-content")??)?then(fieldMap["ListBenefit"].element("dynamic-content").getText(), "") />
97 <div class="text-v">${productName}</div>
98 <div class="text-vi">${ListBenefit}</div>
99 </div>
100 <div class="text-ii">
101 <div class="text-vii">Premi Mulai</div>
102 <#assign premi = (fieldMap["ProductPremi"]?? && fieldMap["ProductPremi"].element("dynamic-content")??)?then(fieldMap["ProductPremi"].element("dynamic-content").getText(), "") />
103 <#assign frekuensiPremi = (fieldMap["frequensiPremi"]?? && fieldMap["frequensiPremi"].element("dynamic-content")??)?then(fieldMap["frequensiPremi"].element("dynamic-content").getText(), "") />
104 <div class="text-viii">${premi}<span>${frekuensiPremi}</span></div>
105 </div>
106 <div class="text-iii">
107 <#assign URLDetailRaw = (fieldMap["URLDetail"]?? && fieldMap["URLDetail"].element("dynamic-content")??)?then(fieldMap["URLDetail"].element("dynamic-content").getData(), "") />
108 <#assign linkToPage = "" />
109
110 <#-- Pastikan field tidak kosong -->
111 <#if URLDetailRaw?has_content>
112 <#assign URLDetail = URLDetailRaw?eval />
113
114 <#-- Inisialisasi variabel -->
115 <#assign linkPageId = 0 />
116 <#assign linkPrivate = false />
117 <#assign linkGroupId = 0 />
118
119 <#-- Ambil nilai dari map -->
120 <#if URLDetail["layoutId"]??>
121 <#assign linkPageId = URLDetail["layoutId"]?number />
122 </#if>
123 <#if URLDetail["privateLayout"]??>
124 <#assign linkPrivate = URLDetail["privateLayout"] />
125 </#if>
126 <#if URLDetail["groupId"]??>
127 <#assign linkGroupId = URLDetail["groupId"]?number />
128 </#if>
129
130 <#-- Ambil layout dan friendly URL -->
131 <#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") />
132 <#assign pageLayout = layoutLocalService.getLayout(linkGroupId, linkPrivate, linkPageId) />
133 <#assign page_param = pageLayout.getThemeSetting("query-string", theme.getDevice()) />
134
135 <#-- Bangun URL akhir -->
136 <#if page_param?has_content>
137 <#assign linkToPage = pageLayout.getFriendlyURL() + "?" + page_param />
138 <#else>
139 <#assign linkToPage = pageLayout.getFriendlyURL() />
140 </#if>
141 </#if>
142
143 <button class="text-ix" onclick="window.location.href='${base_url}${linkToPage}'">Selengkapnya</button>
144 <#assign urlBuy = (fieldMap["URLBuy"]?? && fieldMap["URLBuy"].element("dynamic-content")??)?then(fieldMap["URLBuy"].element("dynamic-content").getText(), "") />
145 <#if urlBuy?has_content>
146 <button class="text-x" onclick="window.location.href='${urlBuy}'">Beli Online</button>
147 <#else>
148 <#assign URLCompareRaw = (fieldMap["URLCompare"]?? && fieldMap["URLCompare"].element("dynamic-content")??)?then(fieldMap["URLCompare"].element("dynamic-content").getData(), "") />
149
150 <#assign linkToPageCompare = ""/>
151
152 <#if URLCompareRaw?has_content>
153 <#assign URLCompare = URLCompareRaw?eval />
154
155 <#-- Inisialisasi nilai default -->
156 <#assign linkPageId = 0 />
157 <#assign linkPrivate = false />
158 <#assign linkGroupId = 0 />
159
160 <#-- Ambil nilai dari map -->
161 <#if URLCompare["layoutId"]??>
162 <#assign linkPageId = URLCompare["layoutId"]?number />
163 </#if>
164 <#if URLCompare["privateLayout"]??>
165 <#assign linkPrivate = URLCompare["privateLayout"] />
166 </#if>
167 <#if URLCompare["groupId"]??>
168 <#assign linkGroupId = URLCompare["groupId"]?number />
169 </#if>
170
171 <#-- Ambil layout dan friendly URL -->
172 <#assign layoutLocalService = serviceLocator.findService("com.liferay.portal.kernel.service.LayoutLocalService") />
173 <#assign pageLayoutCompare = layoutLocalService.getLayout(linkGroupId, linkPrivate, linkPageId) />
174 <#assign page_param_compare = pageLayoutCompare.getThemeSetting("query-string", theme.getDevice()) />
175
176 <#-- Bangun URL akhir -->
177 <#if page_param_compare?has_content>
178 <#assign linkToPageCompare = pageLayoutCompare.getFriendlyURL() + "?" + page_param_compare />
179 <#else>
180 <#assign linkToPageCompare = pageLayoutCompare.getFriendlyURL() />
181 </#if>
182 </#if>
183 <#assign productCode = (fieldMap["ProductCode"]?? && fieldMap["ProductCode"].element("dynamic-content")??)?then(fieldMap["ProductCode"].element("dynamic-content").getText(), "") />
184 <button class="text-x" onclick="window.location.href='${base_url}${linkToPageCompare}?productCode=${productCode}'">Bandingkan</button>
185 </#if>
186 </div>
187 </div>
188 </#if>
189 </#list>
190 </div>
191 </div>
192 </div>
193</section>
194
195<style>
196.layanan-nasabah-section {
197 background-color: #000000;
198}
199
200.prime-iv-container {
201 background-color: #8a7333;
202 width: 1200px;
203 height: 740px;
204 padding: 30px;
205 margin: 70px auto;
206 border-radius: 8px;
207}
208
209.prime-iv-container .prime-iv-contain {
210 background-color: #8a7333;
211 width: 900px;
212 height: 160px;
213 margin: 0 auto;
214}
215
216.prime-iv-container .prime-iv-contain .header {
217 display: flex;
218 flex-direction: column;
219 gap: 20px;
220}
221
222.prime-iv-container .prime-iv-contain .header .text {
223 color: #fdfdfd;
224 font-family: "Publico Headline Web", serif;
225 font-weight: 700;
226 font-style: normal;
227 font-size: 28px;
228 line-height: 100%;
229 letter-spacing: 0;
230 text-align: center;
231}
232
233.prime-iv-container .prime-iv-contain .header .text-i {
234 color: #ffffff;
235
236 font-weight: 400;
237 font-style: normal;
238 font-size: 15px;
239 line-height: 22px;
240 letter-spacing: 0;
241 text-align: center;
242}
243
244.prime-iv-container .prime-iv-contain .header .button {
245 width: 100%;
246 height: 100%;
247 display: flex;
248 gap: 20px;
249 margin: 0 auto;
250 overflow-x: auto;
251 overflow-y: hidden;
252 white-space: nowrap;
253 scrollbar-width: none;
254}
255
256.prime-iv-container .prime-iv-contain .header .button.no-scroll {
257 overflow: visible;
258 white-space: normal;
259 justify-content: center;
260 align-items: center;
261}
262
263.prime-iv-container .prime-iv-contain .header .button button {
264 color: #ffffff;
265 background-color: #8a7333;
266 height: 50px;
267 border-radius: 78px;
268 border: 1px solid #ffffff;
269 padding: 0 20px;
270 font-weight: 500;
271 font-style: normal;
272 font-size: 16px;
273 line-height: 26px;
274 letter-spacing: 0;
275 text-transform: capitalize;
276}
277
278.prime-iv-container .prime-iv-contain .header .button button.active-tag {
279 color: #ffffff;
280 background-color: #000000;
281 height: 50px;
282 border-radius: 78px;
283 border: 1px solid #ffffff;
284 padding: 0 20px;
285
286 font-weight: 500;
287 font-style: normal;
288 font-size: 16px;
289 line-height: 26px;
290 letter-spacing: 0;
291}
292
293.prime-iv-container .prime-iv-contain .header .button button:hover {
294 color: #ffffff;
295 background-color: #8a7333;
296 height: 50px;
297 border-radius: 78px;
298 border: 1px solid #ffffff;
299 padding: 0 20px;
300
301 font-weight: 500;
302 font-style: normal;
303 font-size: 16px;
304 line-height: 26px;
305 letter-spacing: 0;
306}
307
308.prime-iv-container .prime-iv-contain-i {
309 width: 1095px;
310 height: 440px;
311 margin: 30px auto;
312}
313
314.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-list {
315 overflow: visible;
316}
317
318.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-track {
319 display: flex;
320}
321
322.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-slide {
323 margin: 0 10px;
324}
325
326.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-prev,
327.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-next {
328 &:before {
329 font-size: 45px;
330 font-weight: 1000;
331 color: #c2c2de;
332 }
333 &:not(.slick-disabled):hover:before {
334 color: #8a7333;
335 }
336}
337
338.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-prev,
339.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-next {
340 background-color: #c2c2de;
341 width: 44px;
342 height: 44px;
343 border-radius: 30px;
344 position: absolute;
345 top: 50%;
346 border: none;
347 cursor: pointer;
348}
349
350.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-prev.slick-disabled,
351.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-next.slick-disabled {
352 background-color: #c2c2de;
353 width: 44px;
354 height: 44px;
355 border-radius: 30px;
356 position: absolute;
357 top: 50%;
358 border: none;
359 cursor: pointer;
360 opacity: .25;
361}
362
363.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-prev:not(.slick-disabled):hover,
364.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-next:not(.slick-disabled):hover {
365 background-color: #000000 !important;
366}
367
368.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-prev {
369 left: -43px;
370}
371
372.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-next {
373 right: -18px;
374}
375
376.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-prev {
377 left: -40px;
378 padding-left: 4px;
379}
380
381.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-next {
382 right: -40px;
383 padding-right: 3px;
384}
385
386.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-arrow {
387 z-index: 1;
388}
389
390.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .slick-dots {
391 display: flex;
392 justify-content: center;
393 gap: 3px;
394 align-items: center;
395 margin-top: 20px;
396 bottom: -45px;
397
398 li {
399 margin: 0px;
400 width: 14px;
401 height: 6px;
402 transition: all 0.3s ease;
403
404 button {
405 width: 100%;
406 height: 5px;
407 background-color: transparent;
408 border: 1px solid #ffffff;
409 border-radius: 5px;
410 padding: 0;
411 cursor: pointer;
412 transition: background-color 0.3s ease;
413
414 &:hover {
415 background-color: #a9a9a9;
416 }
417
418 &:before {
419 content: "";
420 }
421 }
422
423 &.slick-active {
424 width: 40px;
425 height: 5px;
426
427 button {
428 width: 100%;
429 background-color: #ffffff;
430 }
431 }
432 }
433}
434
435.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card {
436 background-color: #ffffff;
437 width: 345px;
438 height: fit-content;
439 border-radius: 12px;
440 position: relative;
441}
442
443.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .product-ribbon {
444 --f: 1em;
445 --r: .8em;
446 position: absolute;
447 top: 20px;
448 left: calc(-1 * var(--f));
449 padding-right: 1em;
450 padding-left: 2rem;
451 line-height: 2;
452 background: #fdb814;
453 border-bottom: var(--f) solid #0005;
454 border-right: var(--r) solid #0000;
455 clip-path: polygon(0 0, 0 calc(100% - var(--f)), var(--f) 100%, var(--f) calc(100% - var(--f)), 100% calc(100% - var(--f)), calc(100% - var(--r)) calc(50% - var(--f) / 2), 100% 0);
456
457 font-weight: 600;
458 font-style: normal;
459 font-size: 12px;
460 letter-spacing: 0;
461}
462
463.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .image {
464 width: auto;
465 max-height: 110px;
466 border-radius: 8px;
467 padding: 5px;
468 margin: 0 auto;
469}
470
471.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .image img {
472 width: 100%;
473 height: 110px;
474 max-height: 110px;
475 border-radius: 8px;
476 object-fit: cover;
477}
478
479.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text {
480 width: 290px;
481 height: 20px;
482 display: flex;
483 justify-content: space-between;
484 margin: 0 auto;
485 margin-top: 20px;
486}
487
488.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text .text-iv {
489 color: #353535;
490
491 font-weight: 500;
492 font-style: normal;
493 font-size: 13px;
494 line-height: 100%;
495 letter-spacing: 0;
496}
497
498.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i {
499 width: 290px;
500 min-height: 160px;
501 margin: 0 auto;
502 display: flex;
503 flex-direction: column;
504 flex: 1;
505}
506
507.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-v {
508 color: #353535;
509 font-family: 'Publico Headline Web', serif;
510 font-weight: 700;
511 font-style: normal;
512 font-size: 18px;
513 line-height: 30px;
514 letter-spacing: -0.02em;
515 flex-shrink: 0;
516}
517
518.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-vi {
519 color: #353535;
520 flex: 1;
521 min-height: 60px;
522 max-height: 80px;
523 font-weight: 400;
524 font-style: normal;
525 font-size: 15px;
526 line-height: 24px;
527 letter-spacing: 0;
528 overflow-y: auto;
529 padding: 1px;
530 padding-right: 10px;
531}
532
533.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-vi::-webkit-scrollbar {
534 width: 3px;
535}
536
537.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-vi::-webkit-scrollbar-track {
538 background: #e6e6f4;
539}
540
541.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-vi::-webkit-scrollbar-thumb {
542 background: #8a7333;
543 border-radius: 50px;
544}
545
546.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-vi::-webkit-scrollbar-thumb:hover {
547 background: #8a7333;
548}
549
550.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii {
551 background-color: #f2f2f2;
552 width: 320px;
553 height: 45px;
554 border: 1px solid #f2f2f2;
555 border-radius: 6px;
556 display: flex;
557 justify-content: space-between;
558 padding: 15px;
559 margin: 10px auto;
560}
561
562.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii .text-vii {
563 color: #353535;
564
565 font-weight: 600;
566 font-size: 13px;
567 line-height: 17px;
568 letter-spacing: 0;
569}
570
571.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii .text-viii {
572 color: #8a7333;
573
574 font-weight: 700;
575 font-size: 20px;
576 line-height: 17px;
577 letter-spacing: 0;
578}
579
580.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii .text-viii span {
581 color: #8a7333;
582
583 font-weight: 400;
584 font-size: 13px;
585 line-height: 17px;
586 letter-spacing: 0;
587}
588
589.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii {
590 width: 300px;
591 height: 45px;
592 margin: 10px auto;
593 display: flex;
594 gap: 10px;
595}
596
597.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-ix {
598 color: #ffffff;
599 background-color: #000000;
600 width: 145px;
601 height: 40px;
602 border: 1px solid #000000;
603 border-radius: 1000px;
604
605 font-weight: 600;
606 font-size: 16px;
607 line-height: 100%;
608 letter-spacing: 0;
609 text-align: center;
610}
611
612.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-ix:hover {
613 color: #ffffff;
614 background-color: #8a7333;
615 width: 145px;
616 height: 40px;
617 border: 1px solid #8a7333;
618 border-radius: 1000px;
619
620 font-weight: 600;
621 font-size: 16px;
622 line-height: 100%;
623 letter-spacing: 0;
624 text-align: center;
625}
626
627.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-x {
628 color: #000000;
629 background-color: #fffff;
630 width: 145px;
631 height: 40px;
632 border: 1px solid #808080;
633 border-radius: 1000px;
634
635 font-weight: 600;
636 font-size: 16px;
637 line-height: 100%;
638 letter-spacing: 0;
639 text-align: center;
640}
641
642.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-x:hover {
643 color: #FFFFFF;
644 background-color: #8a7333;
645 width: 145px;
646 height: 40px;
647 border: 1px solid #808080;
648 border-radius: 1000px;
649
650 font-weight: 600;
651 font-size: 16px;
652 line-height: 100%;
653 letter-spacing: 0;
654 text-align: center;
655}
656
657.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-prev:not(.slick-disabled):hover,
658.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-next:not(.slick-disabled):hover {
659 background-color: #000000 !important;
660}
661
662.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-prev, .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list .btn-slick-next {
663 background-color: #000000 !important;
664}
665
666@media (max-width: 1024px) {
667 .prime-iv-container {
668 background-color: #8a7333;
669 width: 100%;
670 height: 100%;
671 padding: 30px;
672 margin: 40px auto;
673 border-radius: 0;
674 }
675
676 .prime-iv-container .prime-iv-contain {
677 background-color: #8a7333;
678 width: 100%;
679 height: auto;
680 padding: 1px;
681 margin: 0 auto;
682 }
683
684 .prime-iv-container .prime-iv-contain .header .text {
685 color: #fdfdfd;
686 font-family: "Publico Headline Web", serif;
687 font-weight: 700;
688 font-style: normal;
689 font-size: 22px;
690 line-height: 100%;
691 letter-spacing: 0;
692 text-align: center;
693 }
694
695 .prime-iv-container .prime-iv-contain .header .text-i {
696 color: #ffffff;
697
698 font-weight: 400;
699 font-style: normal;
700 font-size: 12px;
701 line-height: 17px;
702 letter-spacing: 0;
703 text-align: center;
704 }
705
706 .prime-iv-container .prime-iv-contain-i {
707 width: 100%;
708 height: 440px;
709 margin: 30px auto;
710 }
711
712 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text {
713 width: 90%;
714 height: 20px;
715 display: flex;
716 justify-content: space-between;
717 margin: 0 auto;
718 margin-top: 20px;
719 }
720
721 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text .text-iv {
722 color: #353535;
723 font-weight: 500;
724 font-style: normal;
725 font-size: 12px;
726 line-height: 100%;
727 letter-spacing: 0;
728 }
729
730 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i {
731 width: 290px;
732 min-height: 160px;
733 margin: 0 auto;
734 display: flex;
735 flex-direction: column;
736 flex: 1;
737 }
738
739 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-v {
740 color: #353535;
741 font-family: 'Publico Headline Web', serif;
742 font-weight: 700;
743 font-style: normal;
744 font-size: 18px;
745 line-height: 30px;
746 letter-spacing: -0.02em;
747 flex-shrink: 0;
748 }
749
750 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-i .text-vi {
751 color: #353535;
752 flex: 1;
753 min-height: 60px;
754 max-height: 80px;
755 font-weight: 400;
756 font-style: normal;
757 font-size: 15px;
758 line-height: 24px;
759 letter-spacing: 0;
760 overflow-y: auto;
761 padding: 1px;
762 padding-right: 10px;
763 }
764
765 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii {
766 background-color: #f2f2f2;
767 width: 90%;
768 height: 45px;
769 border: 1px solid #f2f2f2;
770 border-radius: 6px;
771 display: flex;
772 justify-content: space-between;
773 padding: 15px;
774 margin: 10px auto;
775 }
776
777 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii .text-vii {
778 color: #353535;
779
780 font-weight: 600;
781 font-size: 10px;
782 line-height: 17px;
783 letter-spacing: 0;
784 }
785
786 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii .text-viii {
787 color: #8a7333;
788 font-weight: 700;
789 font-size: 15px;
790 line-height: 17px;
791 letter-spacing: 0;
792 }
793
794 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-ii .text-viii span {
795 color: #8a7333;
796
797 font-weight: 400;
798 font-size: 10px;
799 line-height: 17px;
800 letter-spacing: 0;
801 }
802
803 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii {
804 width: 90%;
805 height: 45px;
806 margin: 10px auto;
807 display: flex;
808 gap: 10px;
809 justify-content: center;
810 }
811
812 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-ix {
813 color: #ffffff;
814 background-color: #000000;
815 width: 145px;
816 height: 40px;
817 border: 1px solid #000000;
818 border-radius: 1000px;
819
820 font-weight: 600;
821 font-size: 12px;
822 line-height: 100%;
823 letter-spacing: 0;
824 text-align: center;
825 }
826
827 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-ix:hover {
828 color: #ffffff;
829 background-color: #8a7333;
830 width: 145px;
831 height: 40px;
832 border: 1px solid #8a7333;
833 border-radius: 1000px;
834
835 font-weight: 600;
836 font-size: 12px;
837 line-height: 100%;
838 letter-spacing: 0;
839 text-align: center;
840 }
841
842 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-x {
843 color: #000000;
844 background-color: #fffff;
845 width: 145px;
846 height: 40px;
847 border: 1px solid #808080;
848 border-radius: 1000px;
849
850 font-weight: 600;
851 font-size: 12px;
852 line-height: 100%;
853 letter-spacing: 0;
854 text-align: center;
855 }
856
857 .prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card .text-iii .text-x:hover {
858 color: #FFFFFF;
859 background-color: #8a7333;
860 width: 145px;
861 height: 40px;
862 border: 1px solid #808080;
863 border-radius: 1000px;
864
865 font-weight: 600;
866 font-size: 12px;
867 line-height: 100%;
868 letter-spacing: 0;
869 text-align: center;
870 }
871
872 .prime-iv-container .prime-iv-contain .header .button button {
873 color: #ffffff;
874 background-color: #8a7333;
875 height: 50px;
876 border-radius: 78px;
877 border: 1px solid #ffffff;
878 padding: 0 20px;
879
880 font-weight: 500;
881 font-style: normal;
882 font-size: 13px;
883 line-height: 26px;
884 letter-spacing: 0;
885 }
886
887 .prime-iv-container .prime-iv-contain .header .button button.active-tag {
888 color: #ffffff;
889 background-color: #000000;
890 height: 50px;
891 border-radius: 78px;
892 border: 1px solid #ffffff;
893 padding: 0 20px;
894
895 font-weight: 500;
896 font-style: normal;
897 font-size: 13px;
898 line-height: 26px;
899 letter-spacing: 0;
900 }
901
902 .prime-iv-container .prime-iv-contain .header .button button:hover {
903 color: #ffffff;
904 background-color: #8a7333;
905 height: 50px;
906 border-radius: 78px;
907 border: 1px solid #ffffff;
908 padding: 0 20px;
909
910 font-weight: 500;
911 font-style: normal;
912 font-size: 13px;
913 line-height: 26px;
914 letter-spacing: 0;
915 }
916
917 .prime-iv-container .prime-iv-contain .header {
918 display: flex;
919 flex-direction: column;
920 gap: 10px;
921 }
922
923 .prime-iv-container .prime-iv-contain .header .button {
924 width: 100%;
925 height: 100%;
926 display: flex;
927 gap: 5px;
928 margin: 0 auto;
929 overflow-x: auto;
930 overflow-y: hidden;
931 white-space: nowrap;
932 scrollbar-width: none;
933 padding-bottom: 2px;
934 }
935}
936</style>
937
938<script>
939$(document).ready(function(){
940 setTimeout(() => {
941 $(".prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card").sameHeight();
942 }, 300);
943
944 const count = $('.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list').children().length;
945 $('.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list').slick({
946 dots: true,
947 infinite: count > 3,
948 speed: 500,
949 slidesToShow: Math.min(3, count),
950 slidesToScroll: 1,
951 initialSlide: 0,
952 autoplay: false,
953 prevArrow: '<button class="btn-slick-prev"><svg width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.61719 18.3963L1.28385 9.84071L8.61719 1.28516" stroke="white" stroke-width="2.56667" stroke-linecap="round" stroke-linejoin="round"/></svg></button>',
954 nextArrow: '<button class="btn-slick-next"><svg width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.28125 18.3963L8.61458 9.84071L1.28125 1.28516" stroke="white" stroke-width="2.56667" stroke-linecap="round" stroke-linejoin="round"/></svg></button>',
955 centerMode: count < 3,
956 centerPadding: '0',
957 swipe: true,
958 swipeToSlide: true,
959 touchThreshold: 10,
960 responsive: [
961 {
962 breakpoint: 767,
963 settings: {
964 slidesToShow: 1,
965 slidesToScroll: 1,
966 initialSlide: 0,
967 arrows: false
968 }
969 },
970 {
971 breakpoint: 1024,
972 settings: {
973 slidesToShow: 2,
974 slidesToScroll: 1,
975 initialSlide: 0,
976 arrows: false
977 }
978 },
979 ,
980 {
981 breakpoint: 1025,
982 settings: {
983 slidesToShow: 3,
984 slidesToScroll: 1,
985 initialSlide: 0,
986 arrows: false
987 }
988 }
989 ]
990 });
991
992 if (count <= 2) {
993 $slider.slick && $slider.slick('unslick');
994 return;
995 }
996
997 $('.filter-btn').on('click', function () {
998 if (!$(this).data('tag')) {
999 $('.filter-btn').removeClass('active-tag');
1000 $(this).addClass('active-tag');
1001 } else {
1002 $(this).toggleClass('active-tag');
1003 $('.filter-btn[data-tag=""]').removeClass('active-tag');
1004 }
1005
1006 var activeTags = $('.filter-btn.active-tag').map(function () {
1007 return $(this).data('tag');
1008 }).get().filter(Boolean);
1009
1010 var slider = $('.prime-iv-container .prime-iv-contain-i .prime-iv-contain-i-card-list');
1011 slider.slick('slickUnfilter');
1012
1013 if (activeTags.length === 0) {
1014 $('.filter-btn[data-tag=""]').addClass('active-tag');
1015 } else {
1016 slider.slick('slickFilter', function () {
1017 var $card = $(this);
1018 return activeTags.some(function (tag) {
1019 var tagClass = 'tag-' + tag.replace(/\s+/g, '-');
1020 return $card.hasClass(tagClass);
1021 });
1022 });
1023 }
1024 });
1025});
1026</script>
1027</#if>
