PageSourceSearch

https://www.micasita.com.tw/stores

html micasita.com.tw collected 2026-10-08 23:30:03 UTC 166,161 bytes, 7,466 lines download raw bytes

1<!DOCTYPE html>
2<html lang="zh-TW">
3<head>
4    <meta http-equiv="x-dns-prefetch-control" content="on">
5    <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
6    <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com">
7
8    <link rel="preconnect" href="https://cdn.gogoshop.cloud" crossorigin>
9    <link rel="dns-prefetch" href="https://cdn.gogoshop.cloud">
10
11    <link rel="preconnect" href="https://img.gogoshop.cloud" crossorigin>
12    <link rel="dns-prefetch" href="https://img.gogoshop.cloud">
13
14    <!--    <link rel="preconnect" href="https://connect.facebook.net" crossorigin>-->
15    <link rel="dns-prefetch" href="https://connect.facebook.net">
16    <!--    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>-->
17    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
18
19    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-solid-900.woff2"
20          as="font" type="font/woff2" crossorigin>
21    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-brands-400.woff2"
22          as="font" type="font/woff2" crossorigin>
23    <link rel="preload"
24          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/webfonts/fa-v4compatibility.woff2"
25          as="font" type="font/woff2" crossorigin>
26
27    <meta charset="utf-8"><title>營業據點 - 米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦</title>
28<meta name="description" content="">
29<meta property="og:site_name" content="米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦" />
30<meta property="og:locale" content="zh-TW" />
31<meta property="og:ttl" content="345600" />
32<meta property="og:url" content="https://www.micasita.com.tw/stores" />
33<meta property="og:type" content="website" />
34<meta property="og:title" content="營業據點 - 米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦" />
35<meta property="og:description" content="" />
36<link rel="preload" href="https://cdn.gogoshop.cloud/_/cache/app.v1788789494.css" as="style"><link rel="stylesheet" href="https://cdn.gogoshop.cloud/_/cache/app.v1788789494.css"><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"></noscript><style>
37.between-positions { height: 70px; }
38
39@media (max-width: 767px) {
40    .between-positions { height: 20px; }
41}
42
43body.mobile-page { padding-top: 60px !important; }
44
45.header .logo img{
46    max-height: 120px;
47    margin-top: 60px;
48    width: auto;
49    height: auto;
50}
51.header.style1 .main-menu,
52.header.style2 .main-menu{
53    margin-top: 100px;
54}
55.header.style3 .top-header {
56    margin-top: 100px;
57}
58.header.style4 .main-menu-wapper,
59.header.style5 .main-menu-wapper{
60    margin-top: 100px;
61}.main-menu > li > a,
62.main-menu > li > button,
63.mobile-navigation,
64.header.style-mobile .mini-cart .cart-link .icon,
65.header.style-mobile .box-settings .icon,
66.header.style3 .slogan {
67    color: #111111;
68}.box-mobile-menu{
69    background-color: rgba(17, 17, 17, 0.95);
70}
71.header.toolbar,
72.header.toolbar .box-search .icon,
73.header.toolbar .box-control .icon,
74.header.toolbar .member-menu .icon{
75    color: #111111;
76}body, a, h1, h2, h3, h4, h5, h6, .widget .widget-title {
77    color: #f1a53d;
78}
79.product-item .product-name,
80.product-item .product-name a,
81.product-item .price,
82#products-page .product-details-right .product-name,
83#products-page .product-details-right .price,
84#products-page .product-details-right label,
85.tab-product h2,
86.blog-item .blog-title,
87.blog-item .entry-meta,
88.blog-item .readmore,
89.shop_table.orders a {
90    color: #0b1c17;
91}
92#products-page .tab-details-product .box-tabs li a:after {
93    background-color: #0b1c17;
94}.button, input[type="submit"],
95    .product-details-right .cart-add.go-checkout,
96    .product-details-right .wishlist-add,
97    .mobile-action-bar .button.go-checkout,
98    .mobile-action-bar .wishlist-add.mobile-bar-btn {
99    background-color: #00d68f;
100}.product-item .price ins,
101    .product-details-right .price ins{
102    color: #b23f69;
103}.footer.style2 .widget .widget-title{
104    color: #f0f0f0;
105}.footer ul li a,
106.footer.style2 .footer-our-service ul li a,
107.footer .content,
108.footer .payment {
109    color: #f0f0f0;
110}.footer-social .social a {
111        filter: invert(1);
112    }.footer.style2 {
113    background-color: #0b1c17;
114}#alert-top, #alert-top a, #alert-top .close {
115    color: #ffce74;
116}#alert-top {
117    background-color: #0b1c17;
118}/* =========================================================
119   MI CASITA|首頁重點精品橫幅
120   ID:mcx
121   Desktop / Tablet / Mobile Responsive
122========================================================= */
123
124#mcx,
125#mcx * {
126  box-sizing: border-box !important;
127}
128
129#mcx {
130  --mcx-gold: #d8b66d;
131  --mcx-cream: #f3eadb;
132  --mcx-dark: #11120f;
133  --mcx-line: rgba(216,182,109,.38);
134  --mcx-h: 380px;
135
136  width: 100% !important;
137  max-width: 100% !important;
138  margin: 0 !important;
139  padding: 14px 16px !important;
140  overflow: hidden !important;
141
142  font-family:
143    "Noto Sans TC",
144    "PingFang TC",
145    "Microsoft JhengHei",
146    Arial,
147    sans-serif;
148
149  background:
150    linear-gradient(
151      180deg,
152      #f4efe6 0%,
153      #ebe3d5 100%
154    );
155
156  color: #fff;
157}
158
159
160/* =========================================================
161   MAIN SHELL
162========================================================= */
163
164#mcx .mcx-shell {
165  position: relative;
166  display: grid;
167  grid-template-columns: 220px minmax(0, 1fr);
168
169  width: 100%;
170  max-width: 1280px;
171  margin: 0 auto;
172
173  overflow: hidden;
174
175  border: 1px solid rgba(174,137,70,.55);
176  border-radius: 18px;
177
178  background: #11120f;
179
180  box-shadow:
181    0 14px 40px rgba(40,30,20,.12),
182    0 2px 8px rgba(0,0,0,.08);
183}
184
185
186/* =========================================================
187   BRAND
188========================================================= */
189
190#mcx .mcx-brand {
191  position: relative;
192
193  min-width: 0;
194  min-height: var(--mcx-h);
195
196  display: flex;
197  flex-direction: column;
198  justify-content: center;
199
200  padding: 30px 24px;
201
202  overflow: hidden;
203
204  background:
205    radial-gradient(
206      circle at 15% 15%,
207      rgba(216,182,109,.13),
208      transparent 35%
209    ),
210    linear-gradient(
211      155deg,
212      #171812 0%,
213      #0d0f0c 100%
214    );
215
216  border-right: 1px solid rgba(216,182,109,.28);
217}
218
219
220#mcx .mcx-brand::before {
221  content: "";
222  position: absolute;
223  width: 150px;
224  height: 150px;
225
226  right: -80px;
227  bottom: -75px;
228
229  border: 1px solid rgba(216,182,109,.16);
230  border-radius: 50%;
231}
232
233
234#mcx .mcx-brand-line {
235  width: 38px;
236  height: 2px;
237
238  margin: 0 0 19px;
239
240  background: var(--mcx-gold);
241}
242
243
244#mcx .mcx-brand-mini {
245  margin: 0 0 8px !important;
246
247  color: #c9b589;
248  font-size: 10px !important;
249  font-weight: 700;
250  letter-spacing: 2px;
251  line-height: 1.5;
252}
253
254
255#mcx .mcx-brand h2 {
256  margin: 0 !important;
257
258  color: #fff;
259  font-family:
260    Georgia,
261    "Times New Roman",
262    serif;
263
264  font-size: 22px !important;
265  font-weight: 400 !important;
266  line-height: 1.22 !important;
267  letter-spacing: .5px;
268}
269
270
271#mcx .mcx-brand h2 strong {
272  display: block;
273
274  margin-top: 4px;
275
276  color: var(--mcx-gold);
277  font-weight: 500;
278}
279
280
281#mcx .mcx-brand-sub {
282  margin: 15px 0 0 !important;
283
284  color: rgba(255,255,255,.7);
285  font-size: 12px !important;
286  line-height: 1.6;
287}
288
289
290#mcx .mcx-deco {
291  display: flex;
292  align-items: center;
293  gap: 5px;
294
295  margin-top: 23px;
296}
297
298
299#mcx .mcx-deco span {
300  display: block;
301
302  width: 7px;
303  height: 7px;
304
305  border: 1px solid var(--mcx-gold);
306
307  transform: rotate(45deg);
308}
309
310
311#mcx .mcx-deco span:nth-child(2) {
312  background: var(--mcx-gold);
313}
314
315
316/* =========================================================
317   STAGE
318========================================================= */
319
320#mcx .mcx-stage {
321  position: relative;
322
323  width: 100%;
324  min-width: 0;
325  height: var(--mcx-h);
326
327  overflow-x: hidden !important;
328  overflow-y: auto !important;
329
330  scroll-snap-type: y mandatory;
331  scroll-behavior: smooth;
332  overscroll-behavior: contain;
333
334  -webkit-overflow-scrolling: touch;
335  scrollbar-width: none;
336}
337
338
339#mcx .mcx-stage::-webkit-scrollbar {
340  width: 0;
341  height: 0;
342  display: none;
343}
344
345
346/* =========================================================
347   CARD
348========================================================= */
349
350#mcx .mcx-card {
351  position: relative;
352
353  width: 100%;
354  min-width: 0;
355  height: var(--mcx-h);
356
357  display: grid;
358
359  grid-template-columns:
360    minmax(0, 1fr)
361    minmax(175px, 220px)
362    54px;
363
364  align-items: center;
365  gap: 24px;
366
367  padding: 29px 22px 29px 31px;
368
369  overflow: hidden;
370
371  scroll-snap-align: start;
372  scroll-snap-stop: always;
373
374  color: #fff;
375}
376
377
378/* 色彩 */
379
380#mcx .mcx-red {
381  background:
382    radial-gradient(
383      circle at 80% 15%,
384      rgba(238,183,66,.22),
385      transparent 32%
386    ),
387    linear-gradient(
388      120deg,
389      #741f26 0%,
390      #421418 100%
391    );
392}
393
394
395#mcx .mcx-blue {
396  background:
397    radial-gradient(
398      circle at 75% 10%,
399      rgba(216,182,109,.18),
400      transparent 31%
401    ),
402    linear-gradient(
403      120deg,
404      #183f52 0%,
405      #102833 100%
406    );
407}
408
409
410#mcx .mcx-rojo {
411  background:
412    radial-gradient(
413      circle at 78% 15%,
414      rgba(222,141,68,.20),
415      transparent 30%
416    ),
417    linear-gradient(
418      120deg,
419      #81262d 0%,
420      #4e171d 100%
421    );
422}
423
424
425#mcx .mcx-verde {
426  background:
427    radial-gradient(
428      circle at 77% 12%,
429      rgba(216,182,109,.19),
430      transparent 30%
431    ),
432    linear-gradient(
433      120deg,
434      #1c4a39 0%,
435      #102c24 100%
436    );
437}
438
439
440#mcx .mcx-blanco {
441  color: #222018;
442
443  background:
444    radial-gradient(
445      circle at 82% 5%,
446      rgba(184,132,48,.20),
447      transparent 30%
448    ),
449    linear-gradient(
450      120deg,
451      #f5ead4 0%,
452      #e6d2ad 100%
453    );
454}
455
456
457/* 左側金色線 */
458
459#mcx .mcx-accent {
460  position: absolute;
461
462  top: 0;
463  left: 0;
464
465  width: 5px;
466  height: 100%;
467
468  background:
469    linear-gradient(
470      180deg,
471      #f5d58c 0%,
472      #aa7734 100%
473    );
474}
475
476
477/* =========================================================
478   CONTENT
479========================================================= */
480
481#mcx .mcx-content {
482  position: relative;
483  z-index: 2;
484
485  width: 100%;
486  min-width: 0;
487  max-width: 650px;
488}
489
490
491#mcx .mcx-meta {
492  display: flex;
493  align-items: center;
494  gap: 10px;
495
496  margin-bottom: 15px;
497}
498
499
500#mcx .mcx-meta span {
501  color: #e7c67f;
502
503  font-size: 10px;
504  font-weight: 800;
505  letter-spacing: 2px;
506  line-height: 1.4;
507}
508
509
510#mcx .mcx-meta small {
511  color: rgba(255,255,255,.55);
512
513  font-size: 9px;
514  letter-spacing: 1px;
515}
516
517
518#mcx .mcx-blanco .mcx-meta span {
519  color: #85601d;
520}
521
522
523#mcx .mcx-blanco .mcx-meta small {
524  color: rgba(30,28,23,.55);
525}
526
527
528#mcx .mcx-content h3 {
529  margin: 0 0 16px !important;
530
531  color: inherit;
532
533  font-size: clamp(23px, 2.15vw, 32px) !important;
534  font-weight: 700 !important;
535  line-height: 1.26 !important;
536
537  word-break: normal;
538  overflow-wrap: anywhere;
539}
540
541
542#mcx .mcx-content h3 small {
543  display: block;
544
545  margin-top: 7px;
546
547  color: #e5c37c;
548
549  font-family:
550    Arial,
551    sans-serif;
552
553  font-size: 10px !important;
554  font-weight: 700;
555  letter-spacing: 1.8px;
556  line-height: 1.5;
557}
558
559
560#mcx .mcx-blanco h3 small {
561  color: #89631e;
562}
563
564
565#mcx .mcx-content p {
566  width: 100%;
567  max-width: 100%;
568
569  margin: 0 0 7px !important;
570
571  word-break: normal;
572  overflow-wrap: anywhere;
573}
574
575
576#mcx .mcx-zh {
577  color: inherit;
578
579  font-size: 14px !important;
580  font-weight: 600;
581  line-height: 1.65 !important;
582}
583
584
585#mcx .mcx-en,
586#mcx .mcx-es {
587  max-width: 640px;
588
589  color: rgba(255,255,255,.74);
590
591  font-size: 11px !important;
592  font-weight: 400;
593  line-height: 1.52 !important;
594}
595
596
597#mcx .mcx-blanco .mcx-en,
598#mcx .mcx-blanco .mcx-es {
599  color: rgba(32,29,23,.68);
600}
601
602
603/* =========================================================
604   CTA
605========================================================= */
606
607#mcx .mcx-cta {
608  position: relative;
609  z-index: 3;
610
611  width: 100%;
612  min-width: 0;
613}
614
615
616#mcx .mcx-btn {
617  position: relative;
618
619  display: flex;
620  align-items: center;
621  justify-content: space-between;
622  gap: 15px;
623
624  width: 100%;
625
626  padding: 14px 15px;
627
628  color: #fff !important;
629  text-decoration: none !important;
630
631  border: 1px solid rgba(236,203,132,.72);
632  border-radius: 10px;
633
634  background: rgba(10,10,10,.13);
635
636  backdrop-filter: blur(6px);
637  -webkit-backdrop-filter: blur(6px);
638
639  transition:
640    transform .25s ease,
641    background .25s ease,
642    border-color .25s ease,
643    box-shadow .25s ease;
644}
645
646
647#mcx .mcx-btn:hover {
648  transform: translateY(-2px);
649
650  background: rgba(216,182,109,.13);
651
652  border-color: #efd28f;
653
654  box-shadow:
655    0 8px 24px rgba(0,0,0,.12);
656}
657
658
659#mcx .mcx-btn span {
660  display: block;
661  min-width: 0;
662}
663
664
665#mcx .mcx-btn b {
666  display: block;
667
668  margin: 0;
669
670  color: inherit;
671
672  font-size: 13px;
673  font-weight: 700;
674  line-height: 1.35;
675}
676
677
678#mcx .mcx-btn small {
679  display: block;
680
681  margin-top: 4px;
682
683  color: rgba(255,255,255,.58);
684
685  font-size: 8px;
686  font-weight: 600;
687  letter-spacing: 1px;
688  line-height: 1.35;
689
690  white-space: normal;
691}
692
693
694#mcx .mcx-btn i {
695  flex: 0 0 auto;
696
697  font-family: Arial, sans-serif;
698  font-size: 18px;
699  font-style: normal;
700}
701
702
703#mcx .mcx-blanco .mcx-btn {
704  color: #29251c !important;
705
706  border-color: rgba(105,76,28,.38);
707
708  background: rgba(255,255,255,.23);
709}
710
711
712#mcx .mcx-blanco .mcx-btn small {
713  color: rgba(41,37,28,.58);
714}
715
716
717/* =========================================================
718   NAV
719========================================================= */
720
721#mcx .mcx-nav {
722  position: relative;
723  z-index: 4;
724
725  align-self: stretch;
726
727  min-width: 0;
728
729  display: flex;
730  flex-direction: column;
731  align-items: center;
732  justify-content: center;
733
734  border-left: 1px solid rgba(255,255,255,.15);
735}
736
737
738#mcx .mcx-blanco .mcx-nav {
739  border-color: rgba(50,42,28,.16);
740}
741
742
743#mcx .mcx-nav a {
744  display: flex;
745  align-items: center;
746  justify-content: center;
747
748  width: 34px;
749  height: 34px;
750
751  color: inherit !important;
752  text-decoration: none !important;
753
754  border: 1px solid rgba(255,255,255,.23);
755  border-radius: 50%;
756
757  font-size: 14px;
758  line-height: 1;
759
760  transition:
761    background .2s ease,
762    border-color .2s ease,
763    transform .2s ease;
764}
765
766
767#mcx .mcx-nav a:hover {
768  transform: scale(1.07);
769
770  background: rgba(216,182,109,.16);
771  border-color: #d8b66d;
772}
773
774
775#mcx .mcx-nav span {
776  display: block;
777
778  margin: 11px 0;
779
780  color: #dfbf7b;
781
782  font-family: Georgia, serif;
783  font-size: 11px;
784}
785
786
787/* =========================================================
788   LAPTOP / SMALL DESKTOP
789========================================================= */
790
791@media (max-width: 1100px) {
792
793  #mcx {
794    --mcx-h: 400px;
795  }
796
797  #mcx .mcx-shell {
798    grid-template-columns: 185px minmax(0, 1fr);
799  }
800
801  #mcx .mcx-brand {
802    padding: 26px 19px;
803  }
804
805  #mcx .mcx-brand h2 {
806    font-size: 19px !important;
807  }
808
809  #mcx .mcx-card {
810    grid-template-columns:
811      minmax(0, 1fr)
812      170px
813      48px;
814
815    gap: 16px;
816
817    padding:
818      27px
819      16px
820      27px
821      25px;
822  }
823
824  #mcx .mcx-content h3 {
825    font-size: 24px !important;
826  }
827
828  #mcx .mcx-en,
829  #mcx .mcx-es {
830    font-size: 10.5px !important;
831  }
832}
833
834
835/* =========================================================
836   TABLET
837========================================================= */
838
839@media (max-width: 900px) {
840
841  #mcx {
842    --mcx-h: 420px;
843
844    padding: 12px !important;
845  }
846
847  #mcx .mcx-shell {
848    display: block;
849
850    border-radius: 16px;
851  }
852
853  #mcx .mcx-brand {
854    min-height: 0;
855
856    display: grid;
857    grid-template-columns: auto minmax(0, 1fr) auto;
858    grid-template-areas:
859      "line mini deco"
860      "title title sub";
861
862    align-items: center;
863    gap: 6px 15px;
864
865    padding: 16px 20px;
866
867    border-right: 0;
868    border-bottom: 1px solid rgba(216,182,109,.28);
869  }
870
871  #mcx .mcx-brand-line {
872    grid-area: line;
873
874    width: 27px;
875
876    margin: 0;
877  }
878
879  #mcx .mcx-brand-mini {
880    grid-area: mini;
881
882    margin: 0 !important;
883  }
884
885  #mcx .mcx-brand h2 {
886    grid-area: title;
887
888    font-size: 18px !important;
889  }
890
891  #mcx .mcx-brand h2 strong {
892    display: inline;
893
894    margin-left: 4px;
895  }
896
897  #mcx .mcx-brand-sub {
898    grid-area: sub;
899
900    margin: 0 !important;
901
902    font-size: 10px !important;
903    text-align: right;
904    white-space: nowrap;
905  }
906
907  #mcx .mcx-deco {
908    grid-area: deco;
909
910    margin: 0;
911  }
912
913  #mcx .mcx-card {
914    grid-template-columns:
915      minmax(0, 1fr)
916      minmax(145px, 180px)
917      45px;
918
919    gap: 14px;
920
921    padding:
922      25px
923      15px
924      25px
925      25px;
926  }
927
928  #mcx .mcx-content h3 {
929    font-size: 23px !important;
930  }
931
932  #mcx .mcx-zh {
933    font-size: 13px !important;
934  }
935}
936
937
938/* =========================================================
939   MOBILE
940========================================================= */
941
942@media (max-width: 640px) {
943
944  #mcx {
945    --mcx-h: 500px;
946
947    padding:
948      9px
949      8px !important;
950  }
951
952  #mcx .mcx-shell {
953    border-radius: 13px;
954  }
955
956
957  /* Brand */
958
959  #mcx .mcx-brand {
960    display: flex;
961    flex-direction: row;
962    flex-wrap: wrap;
963    justify-content: flex-start;
964    gap: 3px 10px;
965
966    padding:
967      13px
968      15px;
969  }
970
971  #mcx .mcx-brand-line {
972    width: 20px;
973
974    margin-right: 3px;
975  }
976
977  #mcx .mcx-brand-mini {
978    flex: 1;
979
980    font-size: 8px !important;
981    letter-spacing: 1.2px;
982  }
983
984  #mcx .mcx-brand h2 {
985    flex: 0 0 100%;
986
987    margin-top: 2px !important;
988
989    font-size: 16px !important;
990  }
991
992  #mcx .mcx-brand-sub {
993    display: none;
994  }
995
996  #mcx .mcx-deco {
997    display: none;
998  }
999
1000
1001  /* Card */
1002
1003  #mcx .mcx-card {
1004    grid-template-columns:
1005      minmax(0, 1fr)
1006      88px;
1007
1008    grid-template-rows:
1009      minmax(0, 1fr)
1010      auto;
1011
1012    grid-template-areas:
1013      "content content"
1014      "cta nav";
1015
1016    align-items: stretch;
1017    gap: 15px 10px;
1018
1019    padding:
1020      24px
1021      16px
1022      18px
1023      20px;
1024  }
1025
1026
1027  #mcx .mcx-content {
1028    grid-area: content;
1029
1030    display: flex;
1031    flex-direction: column;
1032    justify-content: center;
1033  }
1034
1035
1036  #mcx .mcx-meta {
1037    margin-bottom: 11px;
1038  }
1039
1040
1041  #mcx .mcx-meta span {
1042    font-size: 8px;
1043    letter-spacing: 1.4px;
1044  }
1045
1046
1047  #mcx .mcx-meta small {
1048    font-size: 8px;
1049  }
1050
1051
1052  #mcx .mcx-content h3 {
1053    margin-bottom: 13px !important;
1054
1055    font-size: clamp(21px, 6.3vw, 26px) !important;
1056    line-height: 1.25 !important;
1057  }
1058
1059
1060  #mcx .mcx-content h3 small {
1061    margin-top: 6px;
1062
1063    font-size: 8.5px !important;
1064    letter-spacing: 1.1px;
1065  }
1066
1067
1068  #mcx .mcx-zh {
1069    font-size: 12.5px !important;
1070    line-height: 1.55 !important;
1071  }
1072
1073
1074  #mcx .mcx-en,
1075  #mcx .mcx-es {
1076    font-size: 10px !important;
1077    line-height: 1.46 !important;
1078  }
1079
1080
1081  /* CTA */
1082
1083  #mcx .mcx-cta {
1084    grid-area: cta;
1085
1086    display: flex;
1087    align-items: stretch;
1088  }
1089
1090
1091  #mcx .mcx-btn {
1092    min-height: 58px;
1093
1094    padding:
1095      10px
1096      13px;
1097  }
1098
1099
1100  #mcx .mcx-btn b {
1101    font-size: 12px;
1102  }
1103
1104
1105  #mcx .mcx-btn small {
1106    font-size: 7.5px;
1107    letter-spacing: .6px;
1108  }
1109
1110
1111  /* Nav */
1112
1113  #mcx .mcx-nav {
1114    grid-area: nav;
1115
1116    min-height: 58px;
1117
1118    flex-direction: row;
1119    justify-content: space-between;
1120
1121    padding-left: 9px;
1122
1123    border-left: 1px solid rgba(255,255,255,.15);
1124  }
1125
1126
1127  #mcx .mcx-nav a {
1128    width: 28px;
1129    height: 28px;
1130
1131    font-size: 12px;
1132  }
1133
1134
1135  #mcx .mcx-nav span {
1136    margin: 0 4px;
1137
1138    font-size: 9px;
1139  }
1140}
1141
1142
1143/* =========================================================
1144   SMALL MOBILE
1145========================================================= */
1146
1147@media (max-width: 390px) {
1148
1149  #mcx {
1150    --mcx-h: 520px;
1151  }
1152
1153  #mcx .mcx-card {
1154    padding:
1155      22px
1156      13px
1157      16px
1158      17px;
1159  }
1160
1161  #mcx .mcx-content h3 {
1162    font-size: 20px !important;
1163  }
1164
1165  #mcx .mcx-zh {
1166    font-size: 12px !important;
1167  }
1168
1169  #mcx .mcx-en,
1170  #mcx .mcx-es {
1171    font-size: 9.5px !important;
1172  }
1173}
1174
1175
1176/* =========================================================
1177   REDUCED MOTION
1178========================================================= */
1179
1180@media (prefers-reduced-motion: reduce) {
1181
1182  #mcx .mcx-stage {
1183    scroll-behavior: auto;
1184  }
1185
1186  #mcx .mcx-btn,
1187  #mcx .mcx-nav a {
1188    transition: none;
1189  }
1190}
1191/* =========================================================
1192MI CASITA|Mexican Hospitality
1193主 ID:mh
1194========================================================= */
1195
1196#mh{
1197  --g:#b88b49;
1198  --g2:#d8b979;
1199  --g3:#8d672f;
1200
1201  --brown:#3e3126;
1202  --brown2:#6f5b49;
1203
1204  --cream:#fbf8f2;
1205  --cream2:#f3ede3;
1206  --cream3:#eee4d6;
1207
1208  --terra:#b56f4f;
1209
1210  position:relative;
1211  width:100%;
1212
1213  box-sizing:border-box;
1214
1215  padding:85px 22px;
1216
1217  overflow:hidden;
1218
1219  background:
1220    radial-gradient(
1221      circle at 8% 10%,
1222      rgba(184,139,73,.08),
1223      transparent 31%
1224    ),
1225    radial-gradient(
1226      circle at 93% 85%,
1227      rgba(181,111,79,.07),
1228      transparent 27%
1229    ),
1230    linear-gradient(
1231      145deg,
1232      #fffdf9 0%,
1233      #faf5ed 53%,
1234      #f8f1e8 100%
1235    );
1236
1237  color:var(--brown);
1238
1239  font-family:
1240    "Noto Serif TC",
1241    "Noto Sans TC",
1242    "PingFang TC",
1243    "Microsoft JhengHei",
1244    serif;
1245
1246  isolation:isolate;
1247}
1248
1249
1250/* =========================================================
1251背景精品細線
1252========================================================= */
1253
1254#mh:before{
1255  content:"";
1256
1257  position:absolute;
1258  inset:0;
1259
1260  background-image:
1261    linear-gradient(
1262      90deg,
1263      rgba(150,110,58,.028) 1px,
1264      transparent 1px
1265    ),
1266    linear-gradient(
1267      rgba(150,110,58,.022) 1px,
1268      transparent 1px
1269    );
1270
1271  background-size:68px 68px;
1272
1273  pointer-events:none;
1274
1275  z-index:-2;
1276}
1277
1278
1279/* 上方金線 */
1280
1281#mh:after{
1282  content:"";
1283
1284  position:absolute;
1285
1286  top:0;
1287  left:8%;
1288  right:8%;
1289
1290  height:1px;
1291
1292  background:
1293    linear-gradient(
1294      90deg,
1295      transparent,
1296      rgba(184,139,73,.25),
1297      #d8b979,
1298      rgba(184,139,73,.25),
1299      transparent
1300    );
1301
1302  opacity:.9;
1303}
1304
1305
1306/* =========================================================
1307WRAP
1308========================================================= */
1309
1310#mh .mh-w{
1311  position:relative;
1312
1313  max-width:1120px;
1314
1315  margin:0 auto;
1316
1317  padding:55px 55px 50px;
1318
1319  box-sizing:border-box;
1320
1321  border:
1322    1px solid rgba(184,139,73,.22);
1323
1324  background:
1325    linear-gradient(
1326      145deg,
1327      rgba(255,255,255,.82),
1328      rgba(255,253,248,.64)
1329    );
1330
1331  box-shadow:
1332    0 22px 65px rgba(80,60,35,.07);
1333
1334  backdrop-filter:blur(3px);
1335}
1336
1337
1338/* 精品角線 */
1339
1340#mh .mh-w:before,
1341#mh .mh-w:after{
1342  content:"";
1343
1344  position:absolute;
1345
1346  width:58px;
1347  height:58px;
1348
1349  pointer-events:none;
1350}
1351
1352#mh .mh-w:before{
1353  top:14px;
1354  left:14px;
1355
1356  border-top:
1357    1px solid rgba(184,139,73,.55);
1358
1359  border-left:
1360    1px solid rgba(184,139,73,.55);
1361}
1362
1363#mh .mh-w:after{
1364  right:14px;
1365  bottom:14px;
1366
1367  border-right:
1368    1px solid rgba(184,139,73,.55);
1369
1370  border-bottom:
1371    1px solid rgba(184,139,73,.55);
1372}
1373
1374
1375/* =========================================================
1376AMBIENT DECOR
1377========================================================= */
1378
1379#mh .mh-a{
1380  position:absolute;
1381
1382  width:360px;
1383  height:360px;
1384
1385  border-radius:50%;
1386
1387  pointer-events:none;
1388
1389  filter:blur(10px);
1390
1391  animation:mha 8s ease-in-out infinite alternate;
1392}
1393
1394
1395#mh .a1{
1396  top:-170px;
1397  right:-90px;
1398
1399  background:
1400    radial-gradient(
1401      circle,
1402      rgba(219,183,116,.15),
1403      rgba(219,183,116,.035) 50%,
1404      transparent 72%
1405    );
1406}
1407
1408
1409#mh .a2{
1410  bottom:-190px;
1411  left:-120px;
1412
1413  background:
1414    radial-gradient(
1415      circle,
1416      rgba(181,111,79,.10),
1417      transparent 70%
1418    );
1419
1420  animation-delay:2.5s;
1421}
1422
1423
1424/* =========================================================
1425TOP LABEL
1426========================================================= */
1427
1428#mht{
1429  display:flex;
1430
1431  align-items:center;
1432
1433  justify-content:center;
1434
1435  gap:14px;
1436
1437  margin-bottom:30px;
1438}
1439
1440
1441#mht span{
1442  color:var(--g);
1443
1444  font-size:10px;
1445
1446  font-weight:600;
1447
1448  letter-spacing:3.5px;
1449
1450  text-transform:uppercase;
1451}
1452
1453
1454#mht i{
1455  width:40px;
1456  height:1px;
1457
1458  background:
1459    linear-gradient(
1460      90deg,
1461      transparent,
1462      var(--g),
1463      transparent
1464    );
1465}
1466
1467
1468#mht small{
1469  color:#9d8d78;
1470
1471  font-size:10px;
1472
1473  letter-spacing:2px;
1474}
1475
1476
1477/* =========================================================
1478HEADER
1479========================================================= */
1480
1481#mhh{
1482  max-width:780px;
1483
1484  margin:0 auto;
1485
1486  text-align:center;
1487}
1488
1489
1490#mhh .mh-k{
1491  margin-bottom:13px;
1492
1493  color:#aa8a5b;
1494
1495  font-size:8px;
1496
1497  font-weight:600;
1498
1499  letter-spacing:5px;
1500}
1501
1502
1503#mhh h1{
1504  margin:0;
1505
1506  color:#35291f;
1507
1508  font-family:
1509    Georgia,
1510    "Times New Roman",
1511    "Noto Serif TC",
1512    serif;
1513
1514  font-size:clamp(36px,5vw,60px);
1515
1516  font-weight:400;
1517
1518  line-height:1.08;
1519
1520  letter-spacing:1px;
1521}
1522
1523
1524#mhh h1 em{
1525  display:block;
1526
1527  margin-top:7px;
1528
1529  color:transparent;
1530
1531  background:
1532    linear-gradient(
1533      105deg,
1534      #8d672f 0%,
1535      #c79b55 26%,
1536      #f1d99f 48%,
1537      #bf8f45 68%,
1538      #8d672f 100%
1539    );
1540
1541  background-size:220% auto;
1542
1543  -webkit-background-clip:text;
1544
1545  background-clip:text;
1546
1547  font-size:.73em;
1548
1549  font-weight:400;
1550
1551  animation:mhgold 7s linear infinite;
1552}
1553
1554
1555#mhh > p{
1556  margin:20px 0 0;
1557
1558  color:#a3917b;
1559
1560  font-family:Georgia,serif;
1561
1562  font-size:15px;
1563
1564  font-style:italic;
1565
1566  letter-spacing:1px;
1567}
1568
1569
1570/* =========================================================
1571GOLD LINE
1572========================================================= */
1573
1574#mh .mh-l{
1575  position:relative;
1576
1577  width:115px;
1578  height:1px;
1579
1580  margin:30px auto 0;
1581
1582  overflow:hidden;
1583
1584  background:
1585    rgba(184,139,73,.22);
1586}
1587
1588
1589#mh .mh-l span{
1590  position:absolute;
1591
1592  width:50%;
1593  height:100%;
1594
1595  background:
1596    linear-gradient(
1597      90deg,
1598      transparent,
1599      #dbb873,
1600      #fff1ca,
1601      #bd8f49,
1602      transparent
1603    );
1604
1605  animation:mhline 3.7s ease-in-out infinite;
1606}
1607
1608
1609/* =========================================================
1610CULTURE CARDS
1611========================================================= */
1612
1613#mhc{
1614  display:grid;
1615
1616  grid-template-columns:
1617    repeat(3,minmax(0,1fr));
1618
1619  gap:17px;
1620
1621  margin-top:55px;
1622}
1623
1624
1625#mhc .mh-c{
1626  position:relative;
1627
1628  box-sizing:border-box;
1629
1630  padding:31px 24px 27px;
1631
1632  overflow:hidden;
1633
1634  text-align:center;
1635
1636  border:
1637    1px solid rgba(184,139,73,.2);
1638
1639  background:
1640    linear-gradient(
1641      145deg,
1642      rgba(255,255,255,.95),
1643      rgba(250,245,236,.66)
1644    );
1645
1646  box-shadow:
1647    0 8px 30px rgba(74,54,35,.04);
1648
1649  transition:
1650    transform .5s ease,
1651    border-color .5s ease,
1652    box-shadow .5s ease,
1653    background .5s ease;
1654}
1655
1656
1657/* 掃光 */
1658
1659#mhc .mh-c:before{
1660  content:"";
1661
1662  position:absolute;
1663
1664  top:-100%;
1665  left:-70%;
1666
1667  width:45%;
1668  height:300%;
1669
1670  transform:rotate(25deg);
1671
1672  background:
1673    linear-gradient(
1674      90deg,
1675      transparent,
1676      rgba(230,194,123,.18),
1677      transparent
1678    );
1679
1680  transition:left .85s ease;
1681
1682  pointer-events:none;
1683}
1684
1685
1686#mhc .mh-c:hover:before{
1687  left:150%;
1688}
1689
1690
1691/* 底部流金 */
1692
1693#mhc .mh-c:after{
1694  content:"";
1695
1696  position:absolute;
1697
1698  left:50%;
1699  bottom:0;
1700
1701  width:0;
1702  height:1px;
1703
1704  transform:translateX(-50%);
1705
1706  background:
1707    linear-gradient(
1708      90deg,
1709      transparent,
1710      var(--g),
1711      var(--g2),
1712      var(--g),
1713      transparent
1714    );
1715
1716  transition:width .6s ease;
1717}
1718
1719
1720#mhc .mh-c:hover:after{
1721  width:82%;
1722}
1723
1724
1725#mhc .mh-c:hover{
1726  transform:translateY(-7px);
1727
1728  border-color:
1729    rgba(184,139,73,.42);
1730
1731  background:
1732    linear-gradient(
1733      145deg,
1734      #fffefa,
1735      #f8f0e5
1736    );
1737
1738  box-shadow:
1739    0 18px 45px rgba(85,61,34,.09);
1740}
1741
1742
1743/* 編號 */
1744
1745#mhc .mh-n{
1746  position:absolute;
1747
1748  top:13px;
1749  right:15px;
1750
1751  color:
1752    rgba(184,139,73,.42);
1753
1754  font-family:Georgia,serif;
1755
1756  font-size:9px;
1757
1758  letter-spacing:1px;
1759}
1760
1761
1762/* 圖標 */
1763
1764#mhc .mh-i{
1765  display:flex;
1766
1767  align-items:center;
1768  justify-content:center;
1769
1770  width:44px;
1771  height:44px;
1772
1773  margin:0 auto 17px;
1774
1775  border:
1776    1px solid rgba(184,139,73,.28);
1777
1778  border-radius:50%;
1779
1780  background:
1781    linear-gradient(
1782      145deg,
1783      #fffdf8,
1784      #f4ecdf
1785    );
1786
1787  transition:
1788    transform .5s ease,
1789    box-shadow .5s ease;
1790}
1791
1792
1793#mhc .mh-i span{
1794  color:var(--g);
1795
1796  font-size:17px;
1797}
1798
1799
1800#mhc .mh-c:hover .mh-i{
1801  transform:
1802    rotate(10deg)
1803    scale(1.08);
1804
1805  box-shadow:
1806    0 0 0 7px rgba(184,139,73,.06);
1807}
1808
1809
1810#mhc h3{
1811  margin:0;
1812
1813  color:#403126;
1814
1815  font-family:Georgia,serif;
1816
1817  font-size:21px;
1818
1819  font-weight:400;
1820
1821  letter-spacing:.5px;
1822}
1823
1824
1825#mhc small{
1826  display:block;
1827
1828  margin-top:7px;
1829
1830  color:var(--g);
1831
1832  font-size:8px;
1833
1834  font-weight:600;
1835
1836  letter-spacing:2.6px;
1837}
1838
1839
1840#mhc .mh-r{
1841  width:22px;
1842  height:1px;
1843
1844  margin:16px auto;
1845
1846  background:var(--g2);
1847}
1848
1849
1850#mhc p{
1851  margin:0;
1852
1853  color:#817361;
1854
1855  font-size:13px;
1856
1857  line-height:1.7;
1858
1859  letter-spacing:.6px;
1860}
1861
1862
1863/* =========================================================
1864STORY
1865========================================================= */
1866
1867#mhs{
1868  display:grid;
1869
1870  grid-template-columns:
1871    65px minmax(0,760px);
1872
1873  justify-content:center;
1874
1875  gap:25px;
1876
1877  margin-top:62px;
1878}
1879
1880
1881#mhs .mh-q{
1882  color:
1883    rgba(184,139,73,.35);
1884
1885  font-family:Georgia,serif;
1886
1887  font-size:76px;
1888
1889  line-height:.8;
1890
1891  text-align:right;
1892}
1893
1894
1895#mhs .mh-t{
1896  padding-left:29px;
1897
1898  border-left:
1899    1px solid rgba(184,139,73,.27);
1900}
1901
1902
1903#mhs .mh-lead{
1904  margin:0 0 18px;
1905
1906  color:#514033;
1907
1908  font-size:19px;
1909
1910  line-height:1.85;
1911
1912  letter-spacing:.5px;
1913}
1914
1915
1916#mhs .mh-lead strong{
1917  color:#9b7138;
1918
1919  font-weight:500;
1920}
1921
1922
1923#mhs .mh-t > p:not(.mh-lead):not(.mh-en){
1924  margin:0 0 12px;
1925
1926  color:#6f6255;
1927
1928  font-size:14px;
1929
1930  line-height:2;
1931
1932  letter-spacing:.4px;
1933
1934  text-align:justify;
1935}
1936
1937
1938#mhs b,
1939#mhs strong{
1940  color:#5a4431;
1941
1942  font-weight:600;
1943}
1944
1945
1946/* 內文金線 */
1947
1948#mhs .mh-sl{
1949  position:relative;
1950
1951  width:48px;
1952  height:1px;
1953
1954  margin:23px 0;
1955
1956  overflow:hidden;
1957
1958  background:
1959    rgba(184,139,73,.25);
1960}
1961
1962
1963#mhs .mh-sl span{
1964  display:block;
1965
1966  width:100%;
1967  height:100%;
1968
1969  background:
1970    linear-gradient(
1971      90deg,
1972      var(--g),
1973      var(--g2)
1974    );
1975}
1976
1977
1978#mhs .mh-en{
1979  max-width:700px;
1980
1981  margin:0;
1982
1983  color:#a08f7a;
1984
1985  font-family:Georgia,serif;
1986
1987  font-size:13px;
1988
1989  font-style:italic;
1990
1991  line-height:1.85;
1992}
1993
1994
1995/* =========================================================
1996FOOT
1997========================================================= */
1998
1999#mhf{
2000  display:flex;
2001
2002  align-items:center;
2003
2004  justify-content:center;
2005
2006  gap:14px;
2007
2008  margin-top:45px;
2009
2010  padding-top:25px;
2011
2012  border-top:
2013    1px solid rgba(184,139,73,.12);
2014}
2015
2016
2017#mhf .mh-d{
2018  width:7px;
2019  height:7px;
2020
2021  flex:0 0 7px;
2022
2023  border-radius:50%;
2024
2025  background:var(--g);
2026
2027  box-shadow:
2028    0 0 0 rgba(184,139,73,.25);
2029
2030  animation:mhd 2.7s ease-in-out infinite;
2031}
2032
2033
2034#mhf small{
2035  display:block;
2036
2037  margin-bottom:4px;
2038
2039  color:#af9671;
2040
2041  font-size:8px;
2042
2043  letter-spacing:3px;
2044}
2045
2046
2047#mhf strong{
2048  color:#735f4a;
2049
2050  font-size:12px;
2051
2052  font-weight:500;
2053
2054  letter-spacing:1.5px;
2055}
2056
2057
2058/* =========================================================
2059ANIMATION
2060========================================================= */
2061
2062@keyframes mhgold{
2063
2064  0%{
2065    background-position:200% center;
2066  }
2067
2068  100%{
2069    background-position:-20% center;
2070  }
2071
2072}
2073
2074
2075@keyframes mhline{
2076
2077  0%{
2078    left:-65%;
2079  }
2080
2081  60%,
2082  100%{
2083    left:125%;
2084  }
2085
2086}
2087
2088
2089@keyframes mha{
2090
2091  0%{
2092    opacity:.5;
2093    transform:scale(.93);
2094  }
2095
2096  100%{
2097    opacity:1;
2098    transform:scale(1.1);
2099  }
2100
2101}
2102
2103
2104@keyframes mhd{
2105
2106  0%,
2107  100%{
2108    box-shadow:
2109      0 0 0 0 rgba(184,139,73,.2);
2110  }
2111
2112  50%{
2113    box-shadow:
2114      0 0 0 7px rgba(184,139,73,0);
2115  }
2116
2117}
2118
2119
2120/* =========================================================
2121TABLET
2122========================================================= */
2123
2124@media(max-width:850px){
2125
2126  #mh{
2127    padding:65px 20px;
2128  }
2129
2130  #mh .mh-w{
2131    padding:
2132      45px 30px;
2133  }
2134
2135  #mhc{
2136    gap:11px;
2137  }
2138
2139  #mhc .mh-c{
2140    padding:
2141      28px 17px 25px;
2142  }
2143
2144}
2145
2146
2147/* =========================================================
2148MOBILE
2149========================================================= */
2150
2151@media(max-width:620px){
2152
2153  #mh{
2154    padding:45px 14px;
2155  }
2156
2157
2158  #mh .mh-w{
2159    padding:
2160      38px 18px 34px;
2161  }
2162
2163
2164  #mht{
2165    flex-wrap:wrap;
2166
2167    gap:8px;
2168
2169    margin-bottom:24px;
2170  }
2171
2172
2173  #mht span{
2174    width:100%;
2175
2176    font-size:9px;
2177
2178    letter-spacing:2.5px;
2179  }
2180
2181
2182  #mht i{
2183    width:24px;
2184  }
2185
2186
2187  #mhh h1{
2188    font-size:38px;
2189  }
2190
2191
2192  #mhh h1 em{
2193    font-size:.72em;
2194  }
2195
2196
2197  #mhh > p{
2198    font-size:13px;
2199  }
2200
2201
2202  #mhc{
2203    grid-template-columns:1fr;
2204
2205    gap:12px;
2206
2207    margin-top:42px;
2208  }
2209
2210
2211  #mhc .mh-c{
2212    padding:
2213      28px 22px;
2214  }
2215
2216
2217  #mhs{
2218    grid-template-columns:1fr;
2219
2220    gap:4px;
2221
2222    margin-top:45px;
2223  }
2224
2225
2226  #mhs .mh-q{
2227    font-size:52px;
2228
2229    text-align:left;
2230  }
2231
2232
2233  #mhs .mh-t{
2234    padding-left:18px;
2235  }
2236
2237
2238  #mhs .mh-lead{
2239    font-size:17px;
2240  }
2241
2242
2243  #mhs .mh-t > p:not(.mh-lead):not(.mh-en){
2244    font-size:14px;
2245
2246    line-height:1.9;
2247  }
2248
2249
2250  #mhf{
2251    justify-content:flex-start;
2252
2253    align-items:flex-start;
2254  }
2255
2256
2257  #mhf strong{
2258    line-height:1.7;
2259  }
2260
2261}
2262
2263
2264/* =========================================================
2265REDUCED MOTION
2266========================================================= */
2267
2268@media(prefers-reduced-motion:reduce){
2269
2270  #mh *,
2271  #mh *:before,
2272  #mh *:after{
2273
2274    animation:none !important;
2275
2276    transition:none !important;
2277  }
2278
2279}
2280
2281
2282/* ==================================================
2283MI CASITA|PREMIUM LIGHT DINING
2284主 ID:mch
2285香檳金 × 象牙白 × 暖咖啡
2286================================================== */
2287
2288#mch{
2289  --gold:#b58a4b;
2290  --gold2:#ddbc79;
2291  --gold3:#896533;
2292
2293  --brown:#392e25;
2294  --text:#66584b;
2295  --cream:#fffdf8;
2296
2297  position:relative;
2298  box-sizing:border-box;
2299  width:100%;
2300  padding:85px 24px;
2301  overflow:hidden;
2302
2303  background:
2304    radial-gradient(
2305      circle at 10% 10%,
2306      rgba(221,188,121,.13),
2307      transparent 32%
2308    ),
2309    radial-gradient(
2310      circle at 90% 88%,
2311      rgba(181,116,78,.08),
2312      transparent 30%
2313    ),
2314    linear-gradient(
2315      145deg,
2316      #fffefb 0%,
2317      #faf6ee 50%,
2318      #f7efe5 100%
2319    );
2320
2321  color:var(--brown);
2322
2323  font-family:
2324    "Noto Serif TC",
2325    "Noto Sans TC",
2326    "PingFang TC",
2327    "Microsoft JhengHei",
2328    serif;
2329
2330  isolation:isolate;
2331}
2332
2333#mch *,
2334#mch *:before,
2335#mch *:after{
2336  box-sizing:border-box;
2337}
2338
2339/* 精品細緻背景 */
2340
2341#mch:before{
2342  content:"";
2343  position:absolute;
2344  inset:0;
2345
2346  background-image:
2347    linear-gradient(
2348      90deg,
2349      rgba(150,110,60,.022) 1px,
2350      transparent 1px
2351    ),
2352    linear-gradient(
2353      rgba(150,110,60,.018) 1px,
2354      transparent 1px
2355    );
2356
2357  background-size:75px 75px;
2358  pointer-events:none;
2359  z-index:-1;
2360}
2361
2362/* 頂部金線 */
2363
2364#mch:after{
2365  content:"";
2366  position:absolute;
2367  top:0;
2368  left:8%;
2369  right:8%;
2370  height:1px;
2371
2372  background:linear-gradient(
2373    90deg,
2374    transparent,
2375    var(--gold),
2376    #f6dfae,
2377    var(--gold),
2378    transparent
2379  );
2380}
2381
2382/* ==================================================
2383WRAPPER
2384================================================== */
2385
2386#mch .mw{
2387  position:relative;
2388  max-width:1140px;
2389  margin:0 auto;
2390}
2391
2392/* 背景柔和金光 */
2393
2394#mch .mg{
2395  position:absolute;
2396  width:370px;
2397  height:370px;
2398  border-radius:50%;
2399  pointer-events:none;
2400
2401  background:radial-gradient(
2402    circle,
2403    rgba(215,173,99,.14),
2404    rgba(215,173,99,.04) 45%,
2405    transparent 72%
2406  );
2407
2408  animation:mchGlow 8s ease-in-out infinite alternate;
2409}
2410
2411#mch .g1{
2412  top:-160px;
2413  right:-110px;
2414}
2415
2416#mch .g2{
2417  bottom:-190px;
2418  left:-120px;
2419  animation-delay:2s;
2420}
2421
2422/* ==================================================
2423TOP
2424================================================== */
2425
2426#mct{
2427  display:flex;
2428  align-items:center;
2429  gap:16px;
2430  margin-bottom:45px;
2431}
2432
2433#mct span{
2434  color:var(--gold);
2435  font-size:10px;
2436  font-weight:600;
2437  letter-spacing:3.5px;
2438}
2439
2440#mct i{
2441  width:45px;
2442  height:1px;
2443  flex:0 0 45px;
2444
2445  background:linear-gradient(
2446    90deg,
2447    var(--gold),
2448    transparent
2449  );
2450}
2451
2452#mct small{
2453  color:#96836e;
2454  font-size:11px;
2455  letter-spacing:2px;
2456}
2457
2458/* ==================================================
2459HEADER
2460================================================== */
2461
2462#mchh{
2463  max-width:900px;
2464}
2465
2466#mchh .me{
2467  margin-bottom:18px;
2468  color:var(--gold);
2469  font-size:10px;
2470  letter-spacing:4px;
2471  font-weight:600;
2472}
2473
2474#mchh h2{
2475  margin:0;
2476  color:#382b20;
2477  font-size:clamp(38px,5.8vw,70px);
2478  font-weight:500;
2479  line-height:1.15;
2480  letter-spacing:3px;
2481}
2482
2483/* 高級香檳金流光字 */
2484
2485#mchh h2 strong{
2486  display:block;
2487  width:fit-content;
2488  max-width:100%;
2489  margin-top:10px;
2490
2491  color:var(--gold);
2492  background:linear-gradient(
2493    110deg,
2494    #825b27 0%,
2495    #bd8c45 25%,
2496    #f0d69c 48%,
2497    #b58740 70%,
2498    #825b27 100%
2499  );
2500
2501  background-size:220% auto;
2502  -webkit-background-clip:text;
2503  background-clip:text;
2504  -webkit-text-fill-color:transparent;
2505
2506  font-family:Georgia,serif;
2507  font-size:.79em;
2508  font-weight:400;
2509  font-style:italic;
2510  letter-spacing:2px;
2511
2512  animation:mchGold 8s linear infinite;
2513}
2514
2515#mchh .men{
2516  margin:24px 0 0;
2517  color:#96836d;
2518  font-family:Georgia,serif;
2519  font-size:16px;
2520  font-style:italic;
2521  line-height:1.7;
2522  letter-spacing:.7px;
2523}
2524
2525#mchh .men span{
2526  color:var(--gold);
2527}
2528
2529/* 動態金線 */
2530
2531#mch .mx{
2532  position:relative;
2533  width:160px;
2534  height:1px;
2535  margin-top:34px;
2536  overflow:hidden;
2537  background:rgba(181,138,75,.24);
2538}
2539
2540#mch .mx span{
2541  position:absolute;
2542  width:65%;
2543  height:100%;
2544
2545  background:linear-gradient(
2546    90deg,
2547    transparent,
2548    var(--gold),
2549    #f8e4b5,
2550    var(--gold),
2551    transparent
2552  );
2553
2554  animation:mchLine 3.8s ease-in-out infinite;
2555}
2556
2557/* ==================================================
2558STORY
2559================================================== */
2560
2561#mcs{
2562  display:grid;
2563  grid-template-columns:110px minmax(0,820px);
2564  gap:28px;
2565  margin-top:58px;
2566}
2567
2568#mcs .m01{
2569  padding-top:9px;
2570  color:var(--gold);
2571  font-family:Georgia,serif;
2572  font-size:11px;
2573  letter-spacing:1.5px;
2574}
2575
2576#mcs .mcp{
2577  min-width:0;
2578  padding-left:28px;
2579  border-left:1px solid rgba(181,138,75,.3);
2580}
2581
2582#mcs .mlead{
2583  margin:0 0 22px;
2584  color:#413225;
2585  font-size:22px;
2586  line-height:1.8;
2587  letter-spacing:.8px;
2588}
2589
2590#mcs .mlead strong{
2591  color:#a5793d;
2592  font-weight:600;
2593}
2594
2595#mcs .mcp > p:not(.mlead):not(.meg){
2596  margin:0 0 16px;
2597  color:var(--text);
2598  font-size:15px;
2599  line-height:2.05;
2600  letter-spacing:.5px;
2601}
2602
2603#mcs .mquote{
2604  margin:27px 0;
2605  padding:18px 22px;
2606
2607  border-left:2px solid var(--gold);
2608
2609  background:linear-gradient(
2610    90deg,
2611    rgba(221,188,121,.13),
2612    rgba(255,255,255,0)
2613  );
2614}
2615
2616#mcs .mquote span{
2617  display:block;
2618  color:#986d35;
2619  font-family:Georgia,serif;
2620  font-size:14px;
2621  letter-spacing:2px;
2622  font-style:italic;
2623}
2624
2625#mcs .mquote small{
2626  display:block;
2627  margin-top:8px;
2628  color:#87735f;
2629  font-size:12px;
2630  letter-spacing:1px;
2631}
2632
2633#mcs .meg{
2634  max-width:780px;
2635  margin:22px 0 0;
2636  color:#998773;
2637  font-family:Georgia,serif;
2638  font-size:13px;
2639  font-style:italic;
2640  line-height:1.9;
2641}
2642
2643/* ==================================================
2644THREE FEATURE CARDS
2645================================================== */
2646
2647#mcn{
2648  display:grid;
2649  grid-template-columns:repeat(3,minmax(0,1fr));
2650  gap:17px;
2651  margin-top:68px;
2652}
2653
2654#mcn .mc{
2655  position:relative;
2656  min-width:0;
2657  padding:34px 27px;
2658  overflow:hidden;
2659
2660  border:1px solid rgba(181,138,75,.22);
2661
2662  background:linear-gradient(
2663    145deg,
2664    rgba(255,255,255,.96),
2665    rgba(248,241,230,.8)
2666  );
2667
2668  box-shadow:0 10px 32px rgba(82,60,39,.045);
2669
2670  transition:
2671    transform .5s ease,
2672    border-color .5s ease,
2673    box-shadow .5s ease;
2674}
2675
2676/* 流動金光掃過 */
2677
2678#mcn .mc:before{
2679  content:"";
2680  position:absolute;
2681  top:-100%;
2682  left:-80%;
2683  width:45%;
2684  height:300%;
2685
2686  transform:rotate(25deg);
2687
2688  background:linear-gradient(
2689    90deg,
2690    transparent,
2691    rgba(232,196,128,.2),
2692    transparent
2693  );
2694
2695  transition:left .9s ease;
2696  pointer-events:none;
2697}
2698
2699#mcn .mc:hover:before{
2700  left:150%;
2701}
2702
2703/* 底部延伸金線 */
2704
2705#mcn .mc:after{
2706  content:"";
2707  position:absolute;
2708  bottom:0;
2709  left:0;
2710  width:0;
2711  height:2px;
2712
2713  background:linear-gradient(
2714    90deg,
2715    var(--gold),
2716    #f3d9a2,
2717    var(--gold)
2718  );
2719
2720  transition:width .55s ease;
2721}
2722
2723#mcn .mc:hover:after{
2724  width:100%;
2725}
2726
2727#mcn .mc:hover{
2728  transform:translateY(-8px);
2729  border-color:rgba(181,138,75,.5);
2730
2731  box-shadow:
2732    0 22px 48px rgba(82,60,39,.10),
2733    0 0 25px rgba(221,188,121,.07);
2734}
2735
2736/* 精品金色角線 */
2737
2738#mcn .mco{
2739  position:absolute;
2740  top:14px;
2741  right:14px;
2742  width:20px;
2743  height:20px;
2744
2745  border-top:1px solid var(--gold);
2746  border-right:1px solid var(--gold);
2747
2748  opacity:.55;
2749}
2750
2751#mcn .mnum{
2752  color:#b9a78c;
2753  font-family:Georgia,serif;
2754  font-size:11px;
2755  letter-spacing:2px;
2756}
2757
2758#mcn .mico{
2759  margin:19px 0 13px;
2760  color:var(--gold);
2761  font-size:28px;
2762  line-height:1;
2763
2764  transition:transform .5s ease;
2765}
2766
2767#mcn .mc:hover .mico{
2768  transform:rotate(15deg) scale(1.13);
2769}
2770
2771#mcn h3{
2772  margin:0;
2773  color:#413225;
2774  font-size:21px;
2775  font-weight:600;
2776  letter-spacing:2px;
2777}
2778
2779#mcn .ml{
2780  margin-top:12px;
2781  color:var(--gold);
2782  font-size:10px;
2783  font-weight:600;
2784  letter-spacing:2px;
2785}
2786
2787#mcn .mr{
2788  width:30px;
2789  height:1px;
2790  margin:22px 0;
2791  background:var(--gold2);
2792}
2793
2794#mcn .mc p{
2795  min-height:90px;
2796  margin:0;
2797  color:#766756;
2798  font-size:14px;
2799  line-height:1.95;
2800  letter-spacing:.3px;
2801}
2802
2803#mcn .mc small{
2804  display:block;
2805  margin-top:20px;
2806  color:#ac9477;
2807  font-family:Georgia,serif;
2808  font-size:9px;
2809  letter-spacing:1.4px;
2810}
2811
2812/* ==================================================
2813FOOT
2814================================================== */
2815
2816#mcf{
2817  display:flex;
2818  align-items:center;
2819  gap:17px;
2820
2821  margin-top:46px;
2822  padding-top:27px;
2823
2824  border-top:1px solid rgba(181,138,75,.2);
2825}
2826
2827#mcf .md{
2828  width:8px;
2829  height:8px;
2830  flex:0 0 8px;
2831  border-radius:50%;
2832  background:var(--gold);
2833
2834  animation:mchDot 3s ease-in-out infinite;
2835}
2836
2837#mcf small{
2838  display:block;
2839  margin-bottom:7px;
2840  color:#a8895b;
2841  font-family:Georgia,serif;
2842  font-size:10px;
2843  letter-spacing:3px;
2844}
2845
2846#mcf strong{
2847  display:block;
2848  color:#584534;
2849  font-size:14px;
2850  font-weight:500;
2851  line-height:1.8;
2852  letter-spacing:.8px;
2853}
2854
2855/* ==================================================
2856ANIMATIONS
2857================================================== */
2858
2859@keyframes mchGold{
2860  0%{background-position:200% center;}
2861  100%{background-position:-20% center;}
2862}
2863
2864@keyframes mchLine{
2865  0%{left:-70%;}
2866  65%,100%{left:130%;}
2867}
2868
2869@keyframes mchGlow{
2870  0%{
2871    opacity:.55;
2872    transform:scale(.92);
2873  }
2874  100%{
2875    opacity:1;
2876    transform:scale(1.12);
2877  }
2878}
2879
2880@keyframes mchDot{
2881  0%,100%{
2882    box-shadow:0 0 0 0 rgba(181,138,75,.25);
2883  }
2884  50%{
2885    box-shadow:0 0 0 8px rgba(181,138,75,0);
2886  }
2887}
2888
2889/* ==================================================
2890TABLET
2891================================================== */
2892
2893@media(max-width:850px){
2894
2895  #mch{
2896    padding:66px 22px;
2897  }
2898
2899  #mcs{
2900    grid-template-columns:90px minmax(0,1fr);
2901    gap:15px;
2902  }
2903
2904  #mcn{
2905    gap:12px;
2906  }
2907
2908  #mcn .mc{
2909    padding:28px 19px;
2910  }
2911
2912  #mcn h3{
2913    font-size:19px;
2914  }
2915
2916}
2917
2918/* ==================================================
2919MOBILE
2920================================================== */
2921
2922@media(max-width:620px){
2923
2924  #mch{
2925    padding:52px 18px;
2926  }
2927
2928  #mct{
2929    flex-wrap:wrap;
2930    gap:10px;
2931    margin-bottom:36px;
2932  }
2933
2934  #mct span{
2935    width:100%;
2936    font-size:9px;
2937    letter-spacing:2.5px;
2938  }
2939
2940  #mct i{
2941    width:30px;
2942    flex-basis:30px;
2943  }
2944
2945  #mchh h2{
2946    font-size:40px;
2947    letter-spacing:2px;
2948  }
2949
2950  #mchh h2 strong{
2951    font-size:.75em;
2952  }
2953
2954  #mchh .me{
2955    font-size:9px;
2956    letter-spacing:2px;
2957  }
2958
2959  #mchh .men{
2960    font-size:14px;
2961  }
2962
2963  #mcs{
2964    grid-template-columns:1fr;
2965    gap:13px;
2966    margin-top:43px;
2967  }
2968
2969  #mcs .m01{
2970    padding:0;
2971  }
2972
2973  #mcs .mcp{
2974    padding-left:18px;
2975  }
2976
2977  #mcs .mlead{
2978    font-size:19px;
2979  }
2980
2981  #mcs .mcp > p:not(.mlead):not(.meg){
2982    font-size:14px;
2983    line-height:1.95;
2984  }
2985
2986  #mcn{
2987    grid-template-columns:1fr;
2988    gap:13px;
2989    margin-top:47px;
2990  }
2991
2992  #mcn .mc{
2993    padding:29px 25px;
2994  }
2995
2996  #mcn .mc p{
2997    min-height:0;
2998  }
2999
3000  #mcf{
3001    align-items:flex-start;
3002    margin-top:35px;
3003  }
3004
3005  #mcf strong{
3006    font-size:13px;
3007  }
3008
3009}
3010
3011/* ==================================================
3012SMALL SCREEN
3013================================================== */
3014
3015@media(max-width:360px){
3016
3017  #mchh h2{
3018    font-size:34px;
3019  }
3020
3021  #mch{
3022    padding-left:14px;
3023    padding-right:14px;
3024  }
3025
3026}
3027
3028/* ==================================================
3029REDUCED MOTION
3030================================================== */
3031
3032@media(prefers-reduced-motion:reduce){
3033
3034  #mch *,
3035  #mch *:before,
3036  #mch *:after{
3037    animation:none !important;
3038    transition:none !important;
3039  }
3040
3041}
3042/* =========================================================
3043   MI CASITA|首頁最新文章
3044   元素 ID:ma
3045
3046   Desktop:4欄 × 2排 = 8篇
3047   Tablet:2欄
3048   Mobile:1欄
3049
3050   GoGoShop 真實文章項目:
3051   .grid-item.masonry-item
3052========================================================= */
3053
3054
3055/* =========================================================
3056   01|整體精品外框
3057========================================================= */
3058
3059#ma{
3060  position:relative !important;
3061  box-sizing:border-box !important;
3062
3063  width:calc(100% - 32px) !important;
3064  max-width:1180px !important;
3065
3066  margin:56px auto !important;
3067
3068  padding:
3069    112px
3070    28px
3071    34px !important;
3072
3073  overflow:hidden !important;
3074
3075  background:
3076    radial-gradient(
3077      circle at 8% 0%,
3078      rgba(188,137,69,.055),
3079      transparent 30%
3080    ),
3081    radial-gradient(
3082      circle at 94% 100%,
3083      rgba(157,83,54,.04),
3084      transparent 24%
3085    ),
3086    linear-gradient(
3087      180deg,
3088      #fffdfa 0%,
3089      #faf6ee 100%
3090    ) !important;
3091
3092  border:
3093    1px solid rgba(177,122,49,.58) !important;
3094
3095  border-radius:
3096    18px !important;
3097
3098  box-shadow:
3099    0 18px 50px rgba(72,47,24,.08),
3100    inset 0 0 0 5px rgba(255,255,255,.72),
3101    inset 0 0 0 6px rgba(188,136,70,.12)
3102    !important;
3103
3104  color:#51473f !important;
3105
3106  font-family:
3107    "Noto Sans TC",
3108    "PingFang TC",
3109    "Microsoft JhengHei",
3110    Arial,
3111    sans-serif !important;
3112}
3113
3114
3115/* =========================================================
3116   02|最新文章三語標題
3117========================================================= */
3118
3119#ma::before{
3120  content:
3121    "MI CASITA JOURNAL  ·  最新文章  ·  ÚLTIMOS ARTÍCULOS\A"
3122    "FOOD  ·  CULTURE  ·  MEXICO";
3123
3124  white-space:pre;
3125
3126  position:absolute !important;
3127
3128  top:23px !important;
3129  left:28px !important;
3130  right:28px !important;
3131
3132  z-index:30 !important;
3133
3134  display:block !important;
3135
3136  padding-bottom:
3137    16px !important;
3138
3139  text-align:center !important;
3140
3141  color:#5a3a23 !important;
3142
3143  font-family:
3144    "Noto Serif TC",
3145    Georgia,
3146    "Times New Roman",
3147    serif !important;
3148
3149  font-size:
3150    13px !important;
3151
3152  font-weight:
3153    600 !important;
3154
3155  line-height:
3156    1.95 !important;
3157
3158  letter-spacing:
3159    .12em !important;
3160
3161  border-bottom:
3162    1px solid rgba(174,119,51,.22) !important;
3163
3164  pointer-events:none !important;
3165}
3166
3167
3168/* =========================================================
3169   03|標題下方香檳金短線
3170========================================================= */
3171
3172#ma::after{
3173  content:"";
3174
3175  position:absolute !important;
3176
3177  top:89px !important;
3178  left:50% !important;
3179
3180  z-index:31 !important;
3181
3182  width:48px !important;
3183  height:1px !important;
3184
3185  transform:
3186    translateX(-50%) !important;
3187
3188  background:
3189    linear-gradient(
3190      90deg,
3191      transparent,
3192      #a96c29,
3193      #d8b16e,
3194      #a96c29,
3195      transparent
3196    ) !important;
3197
3198  pointer-events:none !important;
3199}
3200
3201
3202/* =========================================================
3203   04|真正文章容器
3204   關掉 Masonry 排法
3205========================================================= */
3206
3207#ma :has(> .grid-item.masonry-item){
3208  display:grid !important;
3209
3210  grid-template-columns:
3211    repeat(4,minmax(0,1fr)) !important;
3212
3213  column-gap:
3214    18px !important;
3215
3216  row-gap:
3217    28px !important;
3218
3219  width:
3220    100% !important;
3221
3222  max-width:
3223    100% !important;
3224
3225  height:
3226    auto !important;
3227
3228  margin:
3229    0 !important;
3230
3231  padding:
3232    0 !important;
3233
3234  position:
3235    relative !important;
3236
3237  align-items:
3238    start !important;
3239}
3240
3241
3242/* =========================================================
3243   05|真正單篇文章
3244   清除 Masonry 的 absolute positioning
3245========================================================= */
3246
3247#ma .grid-item.masonry-item{
3248  position:relative !important;
3249
3250  top:auto !important;
3251  left:auto !important;
3252  right:auto !important;
3253  bottom:auto !important;
3254
3255  transform:none !important;
3256
3257  box-sizing:border-box !important;
3258
3259  width:
3260    100% !important;
3261
3262  max-width:
3263    100% !important;
3264
3265  min-width:
3266    0 !important;
3267
3268  height:
3269    auto !important;
3270
3271  margin:
3272    0 !important;
3273
3274  padding:
3275    0 !important;
3276
3277  float:
3278    none !important;
3279
3280  display:block !important;
3281
3282  overflow:
3283    visible !important;
3284}
3285
3286
3287/* =========================================================
3288   06|文章內層防跑版
3289========================================================= */
3290
3291#ma .grid-item.masonry-item > *{
3292  box-sizing:border-box !important;
3293
3294  width:
3295    100% !important;
3296
3297  max-width:
3298    100% !important;
3299
3300  min-width:
3301    0 !important;
3302}
3303
3304
3305/* =========================================================
3306   07|文章圖片統一尺寸
3307========================================================= */
3308
3309#ma .grid-item.masonry-item img{
3310  display:block !important;
3311
3312  width:
3313    100% !important;
3314
3315  max-width:
3316    100% !important;
3317
3318  height:
3319    165px !important;
3320
3321  object-fit:
3322    cover !important;
3323
3324  object-position:
3325    center center !important;
3326
3327  margin:
3328    0 0 13px !important;
3329
3330  border-radius:
3331    8px !important;
3332
3333  background:
3334    #f3ede4 !important;
3335
3336  box-shadow:
3337    0 5px 16px
3338    rgba(63,42,23,.07) !important;
3339
3340  filter:
3341    saturate(.95)
3342    contrast(1.02) !important;
3343
3344  transition:
3345    transform .45s ease,
3346    filter .4s ease,
3347    box-shadow .4s ease !important;
3348}
3349
3350
3351/* =========================================================
3352   08|圖片 Hover
3353========================================================= */
3354
3355@media
3356(hover:hover)
3357and
3358(pointer:fine){
3359
3360  #ma .grid-item.masonry-item img:hover{
3361    transform:
3362      translateY(-2px)
3363      scale(1.018) !important;
3364
3365    filter:
3366      saturate(1.03)
3367      contrast(1.03) !important;
3368
3369    box-shadow:
3370      0 10px 24px
3371      rgba(63,42,23,.11) !important;
3372  }
3373
3374}
3375
3376
3377/* =========================================================
3378   09|文章標題
3379========================================================= */
3380
3381#ma .grid-item.masonry-item h1,
3382#ma .grid-item.masonry-item h2,
3383#ma .grid-item.masonry-item h3,
3384#ma .grid-item.masonry-item h4,
3385#ma .grid-item.masonry-item h5{
3386  margin:
3387    0 0 7px !important;
3388
3389  color:
3390    #392b22 !important;
3391
3392  font-family:
3393    "Noto Serif TC",
3394    "PingFang TC",
3395    "Microsoft JhengHei",
3396    serif !important;
3397
3398  font-size:
3399    14px !important;
3400
3401  font-weight:
3402    600 !important;
3403
3404  line-height:
3405    1.55 !important;
3406
3407  letter-spacing:
3408    .012em !important;
3409
3410  word-break:
3411    normal !important;
3412
3413  overflow-wrap:
3414    anywhere !important;
3415}
3416
3417
3418/* =========================================================
3419   10|文章標題連結
3420========================================================= */
3421
3422#ma .grid-item.masonry-item h1 a,
3423#ma .grid-item.masonry-item h2 a,
3424#ma .grid-item.masonry-item h3 a,
3425#ma .grid-item.masonry-item h4 a,
3426#ma .grid-item.masonry-item h5 a{
3427  color:
3428    #392b22 !important;
3429
3430  text-decoration:
3431    none !important;
3432
3433  transition:
3434    color .3s ease !important;
3435}
3436
3437
3438@media
3439(hover:hover)
3440and
3441(pointer:fine){
3442
3443  #ma .grid-item.masonry-item h1 a:hover,
3444  #ma .grid-item.masonry-item h2 a:hover,
3445  #ma .grid-item.masonry-item h3 a:hover,
3446  #ma .grid-item.masonry-item h4 a:hover,
3447  #ma .grid-item.masonry-item h5 a:hover{
3448    color:
3449      #9a642d !important;
3450  }
3451
3452}
3453
3454
3455/* =========================================================
3456   11|日期 / 分類
3457========================================================= */
3458
3459#ma .grid-item.masonry-item time,
3460#ma .grid-item.masonry-item [class*="date"],
3461#ma .grid-item.masonry-item [class*="meta"],
3462#ma .grid-item.masonry-item [class*="category"]{
3463  color:
3464    #a56b2e !important;
3465
3466  font-size:
3467    9px !important;
3468
3469  font-weight:
3470    600 !important;
3471
3472  line-height:
3473    1.5 !important;
3474
3475  letter-spacing:
3476    .035em !important;
3477}
3478
3479
3480/* =========================================================
3481   12|文章摘要
3482========================================================= */
3483
3484#ma .grid-item.masonry-item p{
3485  margin:
3486    0 0 9px !important;
3487
3488  color:
3489    #74685f !important;
3490
3491  font-size:
3492    11px !important;
3493
3494  font-weight:
3495    400 !important;
3496
3497  line-height:
3498    1.75 !important;
3499
3500  letter-spacing:
3501    .005em !important;
3502
3503  word-break:
3504    normal !important;
3505
3506  overflow-wrap:
3507    anywhere !important;
3508}
3509
3510
3511/* =========================================================
3512   13|MORE
3513========================================================= */
3514
3515#ma .grid-item.masonry-item a{
3516  text-decoration:
3517    none !important;
3518}
3519
3520
3521#ma .grid-item.masonry-item a:last-child{
3522  color:
3523    #966127 !important;
3524
3525  font-size:
3526    9px !important;
3527
3528  font-weight:
3529    700 !important;
3530
3531  letter-spacing:
3532    .13em !important;
3533
3534  text-transform:
3535    uppercase !important;
3536}
3537
3538
3539/* =========================================================
3540   14|Desktop
3541   4 × 2
3542========================================================= */
3543
3544@media (min-width:1025px){
3545
3546  #ma :has(> .grid-item.masonry-item){
3547    grid-template-columns:
3548      repeat(4,minmax(0,1fr)) !important;
3549  }
3550
3551}
3552
3553
3554/* =========================================================
3555   15|Tablet
3556   2欄
3557========================================================= */
3558
3559@media
3560(min-width:641px)
3561and
3562(max-width:1024px){
3563
3564  #ma{
3565    width:
3566      calc(100% - 26px) !important;
3567
3568    margin:
3569      44px auto !important;
3570
3571    padding:
3572      106px
3573      20px
3574      26px !important;
3575
3576    border-radius:
3577      16px !important;
3578  }
3579
3580
3581  #ma::before{
3582    top:
3583      21px !important;
3584
3585    left:
3586      22px !important;
3587
3588    right:
3589      22px !important;
3590
3591    font-size:
3592      11px !important;
3593
3594    letter-spacing:
3595      .095em !important;
3596  }
3597
3598
3599  #ma::after{
3600    top:
3601      84px !important;
3602  }
3603
3604
3605  #ma :has(> .grid-item.masonry-item){
3606    grid-template-columns:
3607      repeat(2,minmax(0,1fr)) !important;
3608
3609    column-gap:
3610      16px !important;
3611
3612    row-gap:
3613      24px !important;
3614  }
3615
3616
3617  #ma .grid-item.masonry-item img{
3618    height:
3619      190px !important;
3620  }
3621
3622}
3623
3624
3625/* =========================================================
3626   16|Mobile
3627   1欄
3628========================================================= */
3629
3630@media (max-width:640px){
3631
3632  #ma{
3633    width:
3634      calc(100% - 18px) !important;
3635
3636    margin:
3637      28px auto !important;
3638
3639    padding:
3640      103px
3641      14px
3642      18px !important;
3643
3644    border-radius:
3645      14px !important;
3646  }
3647
3648
3649  #ma::before{
3650    top:
3651      18px !important;
3652
3653    left:
3654      15px !important;
3655
3656    right:
3657      15px !important;
3658
3659    font-size:
3660      9px !important;
3661
3662    line-height:
3663      1.9 !important;
3664
3665    letter-spacing:
3666      .07em !important;
3667  }
3668
3669
3670  #ma::after{
3671    top:
3672      82px !important;
3673
3674    width:
3675      38px !important;
3676  }
3677
3678
3679  #ma :has(> .grid-item.masonry-item){
3680    grid-template-columns:
3681      minmax(0,1fr) !important;
3682
3683    row-gap:
3684      22px !important;
3685  }
3686
3687
3688  #ma .grid-item.masonry-item{
3689    width:
3690      100% !important;
3691  }
3692
3693
3694  #ma .grid-item.masonry-item img{
3695    height:
3696      210px !important;
3697  }
3698
3699
3700  #ma .grid-item.masonry-item h1,
3701  #ma .grid-item.masonry-item h2,
3702  #ma .grid-item.masonry-item h3,
3703  #ma .grid-item.masonry-item h4,
3704  #ma .grid-item.masonry-item h5{
3705    font-size:
3706      14px !important;
3707  }
3708
3709
3710  #ma .grid-item.masonry-item p{
3711    font-size:
3712      12px !important;
3713  }
3714
3715}
3716
3717
3718/* =========================================================
3719   17|Reduced Motion
3720========================================================= */
3721
3722@media (prefers-reduced-motion:reduce){
3723
3724  #ma *,
3725  #ma *::before,
3726  #ma *::after{
3727    transition:
3728      none !important;
3729
3730    animation:
3731      none !important;
3732  }
3733
3734}
3735
3736/* =========================================================
3737   MI CASITA|PREMIUM PHOTO GALLERY
3738   元素 ID:a-ma
3739
3740   Desktop:2 × 2
3741   Tablet:2 × 2
3742   Mobile:1 × 4
3743
3744   香檳金 × 象牙白 × 精品餐飲畫廊
3745========================================================= */
3746
3747
3748/* =========================================================
3749   01|整體畫廊外框
3750========================================================= */
3751
3752#a-ma{
3753  --am-gold:#b88b49;
3754  --am-gold2:#e2c07d;
3755  --am-gold3:#8c632d;
3756
3757  position:relative !important;
3758  box-sizing:border-box !important;
3759
3760  width:calc(100% - 36px) !important;
3761  max-width:1180px !important;
3762
3763  margin:62px auto !important;
3764
3765  /* 上方保留標題空間 */
3766  padding:
3767    105px
3768    26px
3769    30px !important;
3770
3771  overflow:hidden !important;
3772
3773  background:
3774    radial-gradient(
3775      circle at 8% 5%,
3776      rgba(216,180,112,.10),
3777      transparent 30%
3778    ),
3779    radial-gradient(
3780      circle at 92% 92%,
3781      rgba(163,85,52,.05),
3782      transparent 27%
3783    ),
3784    linear-gradient(
3785      145deg,
3786      #fffefa 0%,
3787      #faf6ee 55%,
3788      #f7efe4 100%
3789    ) !important;
3790
3791  border:
3792    1px solid rgba(184,139,73,.62) !important;
3793
3794  border-radius:
3795    20px !important;
3796
3797  box-shadow:
3798    0 22px 60px rgba(72,49,28,.09),
3799    inset 0 0 0 5px rgba(255,255,255,.72),
3800    inset 0 0 0 6px rgba(184,139,73,.12)
3801    !important;
3802
3803  isolation:isolate;
3804}
3805
3806
3807/* =========================================================
3808   02|精品三語標題
3809========================================================= */
3810
3811#a-ma::before{
3812  content:
3813    "MI CASITA GALLERY   ·   精選畫面   ·   GALERÍA MI CASITA\A"
3814    "FLAVOR  ·  TABLE  ·  MOMENTS";
3815
3816  white-space:pre;
3817
3818  position:absolute !important;
3819
3820  top:24px !important;
3821  left:30px !important;
3822  right:30px !important;
3823
3824  z-index:20 !important;
3825
3826  padding-bottom:
3827    17px !important;
3828
3829  text-align:center !important;
3830
3831  color:#573920 !important;
3832
3833  font-family:
3834    Georgia,
3835    "Times New Roman",
3836    "Noto Serif TC",
3837    serif !important;
3838
3839  font-size:
3840    12px !important;
3841
3842  font-weight:
3843    500 !important;
3844
3845  line-height:
3846    2 !important;
3847
3848  letter-spacing:
3849    .15em !important;
3850
3851  border-bottom:
3852    1px solid rgba(184,139,73,.20);
3853
3854  pointer-events:none !important;
3855}
3856
3857
3858/* =========================================================
3859   03|動態香檳金線
3860========================================================= */
3861
3862#a-ma::after{
3863  content:"";
3864
3865  position:absolute !important;
3866
3867  top:87px !important;
3868  left:50% !important;
3869
3870  z-index:21 !important;
3871
3872  width:90px !important;
3873  height:1px !important;
3874
3875  transform:
3876    translateX(-50%) !important;
3877
3878  background:
3879    linear-gradient(
3880      90deg,
3881      transparent 0%,
3882      #9f6a2d 18%,
3883      #efd69d 45%,
3884      #ffffff 50%,
3885      #d6a95e 58%,
3886      #9f6a2d 82%,
3887      transparent 100%
3888    ) !important;
3889
3890  background-size:
3891    220% 100% !important;
3892
3893  animation:
3894    amGoldLine 3.8s ease-in-out infinite !important;
3895
3896  pointer-events:none !important;
3897}
3898
3899
3900/* =========================================================
3901   04|真正圖片容器
3902   GoGoShop Masonry → 精品 2 × 2 Grid
3903
3904   注意:
3905   不再使用 [class*="grid"]
3906   不再動全部 div
3907========================================================= */
3908
3909#a-ma .masonry{
3910  position:relative !important;
3911
3912  display:grid !important;
3913
3914  grid-template-columns:
3915    repeat(2,minmax(0,1fr)) !important;
3916
3917  gap:
3918    18px !important;
3919
3920  width:
3921    100% !important;
3922
3923  max-width:
3924    100% !important;
3925
3926  height:
3927    auto !important;
3928
3929  margin:
3930    0 !important;
3931
3932  padding:
3933    0 !important;
3934}
3935
3936
3937/* =========================================================
3938   05|單張圖片項目
3939   清掉 Masonry JS absolute 定位
3940========================================================= */
3941
3942#a-ma .grid-item.masonry-item,
3943#a-ma .masonry > .grid-item{
3944  position:relative !important;
3945
3946  top:auto !important;
3947  left:auto !important;
3948  right:auto !important;
3949  bottom:auto !important;
3950
3951  transform:none !important;
3952
3953  box-sizing:border-box !important;
3954
3955  width:
3956    100% !important;
3957
3958  max-width:
3959    100% !important;
3960
3961  min-width:
3962    0 !important;
3963
3964  height:
3965    auto !important;
3966
3967  margin:
3968    0 !important;
3969
3970  padding:
3971    0 !important;
3972
3973  float:
3974    none !important;
3975
3976  overflow:hidden !important;
3977
3978  border:
3979    1px solid rgba(184,139,73,.17) !important;
3980
3981  border-radius:
3982    13px !important;
3983
3984  background:
3985    #fffdfa !important;
3986
3987  box-shadow:
3988    0 8px 24px rgba(63,43,24,.07)
3989    !important;
3990
3991  transition:
3992    transform .5s cubic-bezier(.2,.8,.25,1),
3993    box-shadow .5s ease,
3994    border-color .5s ease !important;
3995}
3996
3997
3998/* =========================================================
3999   06|精品內金線
4000========================================================= */
4001
4002#a-ma .grid-item.masonry-item::after,
4003#a-ma .masonry > .grid-item::after{
4004  content:"";
4005
4006  position:absolute;
4007
4008  z-index:5;
4009
4010  left:16px;
4011  right:16px;
4012  bottom:0;
4013
4014  height:1px;
4015
4016  transform:
4017    scaleX(0);
4018
4019  transform-origin:
4020    center;
4021
4022  background:
4023    linear-gradient(
4024      90deg,
4025      transparent,
4026      var(--am-gold),
4027      var(--am-gold2),
4028      var(--am-gold),
4029      transparent
4030    );
4031
4032  transition:
4033    transform .55s ease;
4034
4035  pointer-events:none;
4036}
4037
4038
4039/* =========================================================
4040   07|圖片
4041   不變形,全部統一為精品橫式比例
4042========================================================= */
4043
4044#a-ma .grid-item img,
4045#a-ma .masonry img{
4046  display:block !important;
4047
4048  width:
4049    100% !important;
4050
4051  max-width:
4052    100% !important;
4053
4054  /*
4055    桌機統一橫式精品餐飲比例
4056    不再使用之前的超高直式 400px
4057  */
4058  height:
4059    310px !important;
4060
4061  margin:
4062    0 !important;
4063
4064  padding:
4065    0 !important;
4066
4067  object-fit:
4068    cover !important;
4069
4070  object-position:
4071    center center !important;
4072
4073  border:
4074    0 !important;
4075
4076  border-radius:
4077    12px !important;
4078
4079  background:
4080    #f4eee4 !important;
4081
4082  box-shadow:
4083    none !important;
4084
4085  filter:
4086    saturate(.94)
4087    contrast(1.02)
4088    brightness(.99);
4089
4090  transition:
4091    transform .75s cubic-bezier(.2,.7,.2,1),
4092    filter .55s ease !important;
4093}
4094
4095
4096/* =========================================================
4097   08|高級 Hover
4098========================================================= */
4099
4100@media (hover:hover) and (pointer:fine){
4101
4102  #a-ma .grid-item.masonry-item:hover,
4103  #a-ma .masonry > .grid-item:hover{
4104    transform:
4105      translateY(-5px) !important;
4106
4107    border-color:
4108      rgba(184,139,73,.48) !important;
4109
4110    box-shadow:
4111      0 20px 42px rgba(65,43,22,.12)
4112      !important;
4113  }
4114
4115
4116  #a-ma .grid-item.masonry-item:hover img,
4117  #a-ma .masonry > .grid-item:hover img{
4118    transform:
4119      scale(1.025) !important;
4120
4121    filter:
4122      saturate(1.03)
4123      contrast(1.035)
4124      brightness(1.01);
4125  }
4126
4127
4128  #a-ma .grid-item.masonry-item:hover::after,
4129  #a-ma .masonry > .grid-item:hover::after{
4130    transform:
4131      scaleX(1);
4132  }
4133
4134}
4135
4136
4137/* =========================================================
4138   09|圖片柔和金色掃光
4139========================================================= */
4140
4141#a-ma .grid-item.masonry-item::before,
4142#a-ma .masonry > .grid-item::before{
4143  content:"";
4144
4145  position:absolute;
4146
4147  z-index:4;
4148
4149  top:-70%;
4150  left:-55%;
4151
4152  width:28%;
4153  height:240%;
4154
4155  transform:
4156    rotate(22deg);
4157
4158  background:
4159    linear-gradient(
4160      90deg,
4161      transparent,
4162      rgba(244,216,156,.19),
4163      rgba(255,255,255,.24),
4164      transparent
4165    );
4166
4167  pointer-events:none;
4168
4169  transition:
4170    left .9s ease;
4171}
4172
4173
4174@media (hover:hover) and (pointer:fine){
4175
4176  #a-ma .grid-item.masonry-item:hover::before,
4177  #a-ma .masonry > .grid-item:hover::before{
4178    left:
4179      135%;
4180  }
4181
4182}
4183
4184
4185/* =========================================================
4186   10|桌機
4187   2 × 2
4188========================================================= */
4189
4190@media (min-width:1025px){
4191
4192  #a-ma .masonry{
4193    grid-template-columns:
4194      repeat(2,minmax(0,1fr)) !important;
4195  }
4196
4197
4198  #a-ma .grid-item img,
4199  #a-ma .masonry img{
4200    height:
4201      310px !important;
4202  }
4203
4204}
4205
4206
4207/* =========================================================
4208   11|Tablet
4209========================================================= */
4210
4211@media
4212(min-width:641px)
4213and
4214(max-width:1024px){
4215
4216  #a-ma{
4217    width:
4218      calc(100% - 26px) !important;
4219
4220    margin:
4221      45px auto !important;
4222
4223    padding:
4224      100px
4225      18px
4226      22px !important;
4227
4228    border-radius:
4229      17px !important;
4230  }
4231
4232
4233  #a-ma::before{
4234    top:
4235      21px !important;
4236
4237    left:
4238      20px !important;
4239
4240    right:
4241      20px !important;
4242
4243    font-size:
4244      10px !important;
4245
4246    letter-spacing:
4247      .10em !important;
4248  }
4249
4250
4251  #a-ma::after{
4252    top:
4253      81px !important;
4254  }
4255
4256
4257  #a-ma .masonry{
4258    grid-template-columns:
4259      repeat(2,minmax(0,1fr)) !important;
4260
4261    gap:
4262      14px !important;
4263  }
4264
4265
4266  #a-ma .grid-item img,
4267  #a-ma .masonry img{
4268    height:
4269      230px !important;
4270  }
4271
4272}
4273
4274
4275/* =========================================================
4276   12|Mobile
4277========================================================= */
4278
4279@media (max-width:640px){
4280
4281  #a-ma{
4282    width:
4283      calc(100% - 18px) !important;
4284
4285    margin:
4286      30px auto !important;
4287
4288    padding:
4289      95px
4290      11px
4291      13px !important;
4292
4293    border-radius:
4294      14px !important;
4295  }
4296
4297
4298  #a-ma::before{
4299    top:
4300      18px !important;
4301
4302    left:
4303      14px !important;
4304
4305    right:
4306      14px !important;
4307
4308    font-size:
4309      9px !important;
4310
4311    line-height:
4312      1.9 !important;
4313
4314    letter-spacing:
4315      .075em !important;
4316  }
4317
4318
4319  #a-ma::after{
4320    top:
4321      76px !important;
4322
4323    width:
4324      58px !important;
4325  }
4326
4327
4328  #a-ma .masonry{
4329    grid-template-columns:
4330      minmax(0,1fr) !important;
4331
4332    gap:
4333      12px !important;
4334  }
4335
4336
4337  #a-ma .grid-item img,
4338  #a-ma .masonry img{
4339    height:
4340      225px !important;
4341  }
4342
4343}
4344
4345
4346/* =========================================================
4347   13|金線動畫
4348========================================================= */
4349
4350@keyframes amGoldLine{
4351
4352  0%{
4353    background-position:
4354      180% center;
4355  }
4356
4357  50%{
4358    background-position:
4359      40% center;
4360  }
4361
4362  100%{
4363    background-position:
4364      -120% center;
4365  }
4366
4367}
4368
4369
4370/* =========================================================
4371   14|Reduced Motion
4372========================================================= */
4373
4374@media (prefers-reduced-motion:reduce){
4375
4376  #a-ma::after,
4377  #a-ma *,
4378  #a-ma *::before,
4379  #a-ma *::after{
4380    animation:
4381      none !important;
4382
4383    transition:
4384      none !important;
4385  }
4386
4387}
4388
4389/* =====================================
4390   MI CASITA|爬蟲美學
4391   元素 ID:mcr
4392===================================== */
4393
4394#mcr {
4395  position: relative;
4396  isolation: isolate;
4397  display: block;
4398  width: 100%;
4399  max-width: 100%;
4400  min-width: 0;
4401  height: auto;
4402  overflow: hidden;
4403  box-sizing: border-box;
4404
4405  padding: clamp(56px, 7vw, 96px) 24px !important;
4406
4407  background:
4408    radial-gradient(
4409      ellipse at 8% 0%,
4410      rgba(153, 113, 66, .13),
4411      transparent 55%
4412    ),
4413    linear-gradient(
4414      145deg,
4415      #191510 0%,
4416      #10110e 48%,
4417      #090b09 100%
4418    ) !important;
4419
4420  border-top: 1px solid rgba(206, 176, 131, .3);
4421  border-bottom: 1px solid rgba(206, 176, 131, .2);
4422
4423  color: #eee8de;
4424  font-family:
4425    "Noto Serif TC",
4426    "Songti TC",
4427    "PMingLiU",
4428    serif;
4429
4430  -webkit-font-smoothing: antialiased;
4431}
4432
4433#mcr *,
4434#mcr *::before,
4435#mcr *::after {
4436  box-sizing: border-box;
4437}
4438
4439/* 所有內容保持可見,不套用文字進場動畫 */
4440#mcr .mcr-inner,
4441#mcr .mcr-head,
4442#mcr .mcr-grid,
4443#mcr .mcr-card,
4444#mcr .mcr-foot,
4445#mcr p,
4446#mcr h2,
4447#mcr h3,
4448#mcr h4,
4449#mcr span {
4450  opacity: 1 !important;
4451  visibility: visible !important;
4452  animation: none !important;
4453}
4454
4455/* 緩慢流動的環境光,置於內容後方 */
4456#mcr::before {
4457  content: "";
4458  position: absolute;
4459  z-index: 0;
4460  inset: -20%;
4461  pointer-events: none;
4462
4463  background: radial-gradient(
4464    ellipse at 30% 35%,
4465    rgba(196, 158, 105, .12),
4466    transparent 56%
4467  );
4468
4469  animation: mcr-glow-v2 16s ease-in-out infinite alternate;
4470}
4471
4472/* 頂部香檳金細線 */
4473#mcr::after {
4474  content: "";
4475  position: absolute;
4476  z-index: 0;
4477  top: 0;
4478  left: 12%;
4479  right: 12%;
4480  height: 1px;
4481  pointer-events: none;
4482
4483  background: linear-gradient(
4484    90deg,
4485    transparent,
4486    #cfb38a,
4487    transparent
4488  );
4489}
4490
4491#mcr .mcr-inner {
4492  position: relative;
4493  z-index: 1;
4494  width: 100%;
4495  max-width: 1120px;
4496  min-width: 0;
4497  margin: 0 auto;
4498}
4499
4500/* 標題 */
4501#mcr .mcr-head {
4502  display: block;
4503  max-width: 900px;
4504  margin: 0 auto 44px;
4505  text-align: center;
4506}
4507
4508#mcr .mcr-eyebrow {
4509  margin: 0 0 20px;
4510  color: #c8ad86 !important;
4511  font-family:
4512    "Noto Sans TC",
4513    "PingFang TC",
4514    "Microsoft JhengHei",
4515    sans-serif;
4516  font-size: 11px !important;
4517  font-weight: 400;
4518  line-height: 1.9;
4519  letter-spacing: 3px;
4520  text-transform: uppercase;
4521}
4522
4523#mcr .mcr-title {
4524  margin: 0 !important;
4525  color: #f3eee6 !important;
4526  font-size: clamp(25px, 3vw, 38px) !important;
4527  font-weight: 500 !important;
4528  line-height: 1.6 !important;
4529  letter-spacing: 2px;
4530  overflow-wrap: anywhere;
4531  text-wrap: balance;
4532}
4533
4534#mcr .mcr-subtitle {
4535  margin: 14px auto 0 !important;
4536  color: #b7a58e !important;
4537  font-family: Georgia, "Times New Roman", serif;
4538  font-size: clamp(13px, 1.3vw, 16px) !important;
4539  font-weight: 400 !important;
4540  font-style: italic;
4541  line-height: 1.8 !important;
4542  letter-spacing: .6px;
4543  text-wrap: balance;
4544}
4545
4546#mcr .mcr-line {
4547  position: relative;
4548  width: 110px;
4549  height: 1px;
4550  margin: 30px auto 0;
4551  overflow: hidden;
4552  background: rgba(200, 173, 134, .25);
4553}
4554
4555#mcr .mcr-line::after {
4556  content: "";
4557  position: absolute;
4558  top: 0;
4559  bottom: 0;
4560  left: -50%;
4561  width: 50%;
4562  background: linear-gradient(
4563    90deg,
4564    transparent,
4565    #efdab7,
4566    transparent
4567  );
4568  animation: mcr-line-v2 6s ease-in-out infinite;
4569}
4570
4571/* 桌機、平板:兩欄 */
4572#mcr .mcr-grid {
4573  display: grid !important;
4574  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
4575  align-items: stretch;
4576  gap: 22px !important;
4577  width: 100%;
4578  min-width: 0;
4579  margin: 0;
4580}
4581
4582#mcr .mcr-card {
4583  display: block;
4584  position: relative;
4585  min-width: 0;
4586  width: auto;
4587  margin: 0;
4588  padding: 30px;
4589
4590  border: 1px solid rgba(205, 178, 138, .24);
4591  border-radius: 16px 4px 16px 4px;
4592
4593  background: linear-gradient(
4594    135deg,
4595    rgba(218, 191, 147, .065),
4596    rgba(255, 255, 255, .015)
4597  );
4598
4599  box-shadow:
4600    inset 0 1px 0 rgba(255, 239, 211, .035),
4601    0 12px 28px rgba(0, 0, 0, .12);
4602
4603  transition:
4604    border-color .4s ease,
4605    background-color .4s ease,
4606    box-shadow .4s ease;
4607}
4608
4609#mcr .mcr-card-title {
4610  display: block;
4611  margin: 0 0 18px !important;
4612  color: #d2b78e !important;
4613  font-size: 19px !important;
4614  font-weight: 500 !important;
4615  line-height: 1.75 !important;
4616  letter-spacing: .8px;
4617  overflow-wrap: anywhere;
4618}
4619
4620#mcr .mcr-en {
4621  display: block;
4622  margin-top: 7px;
4623  color: #b4aa9b !important;
4624  font-family: Georgia, "Times New Roman", serif;
4625  font-size: 13px !important;
4626  font-style: italic;
4627  font-weight: 400;
4628  line-height: 1.7;
4629  letter-spacing: .3px;
4630}
4631
4632#mcr .mcr-text {
4633  display: block;
4634  margin: 0 !important;
4635  color: #c5bfb5 !important;
4636  font-family:
4637    "Noto Sans TC",
4638    "PingFang TC",
4639    "Microsoft JhengHei",
4640    sans-serif;
4641  font-size: 14px !important;
4642  font-weight: 400;
4643  line-height: 2 !important;
4644  letter-spacing: .4px;
4645  text-align: left !important;
4646  overflow-wrap: anywhere;
4647}
4648
4649/* 滑鼠經過:金框柔和亮起 */
4650@media (hover: hover) and (pointer: fine) {
4651  #mcr .mcr-card:hover {
4652    border-color: rgba(215, 183, 135, .6);
4653    background-color: rgba(200, 173, 134, .04);
4654    box-shadow:
4655      inset 0 1px 0 rgba(255, 239, 211, .06),
4656      0 16px 34px rgba(0, 0, 0, .2);
4657  }
4658}
4659
4660/* 底部品牌語 */
4661#mcr .mcr-foot {
4662  display: block;
4663  margin: 42px 0 0;
4664  padding: 28px 0 0;
4665  border-top: 1px solid rgba(205, 178, 138, .16);
4666  text-align: center;
4667}
4668
4669#mcr .mcr-quote {
4670  margin: 0 !important;
4671  color: #cbbca6 !important;
4672  font-size: 14px !important;
4673  line-height: 1.9 !important;
4674  letter-spacing: 1.2px;
4675  text-wrap: balance;
4676}
4677
4678#mcr .mcr-sign {
4679  margin: 12px 0 0 !important;
4680  color: #aaa194 !important;
4681  font-family: Georgia, "Times New Roman", serif;
4682  font-size: 10px !important;
4683  line-height: 1.9 !important;
4684  letter-spacing: 1.8px;
4685  text-transform: uppercase;
4686}
4687
4688/* 手機:單欄,移除固定最小欄寬 */
4689@media (max-width: 640px) {
4690  #mcr {
4691    padding: 52px 18px !important;
4692  }
4693
4694  #mcr .mcr-head {
4695    margin-bottom: 30px;
4696  }
4697
4698  #mcr .mcr-eyebrow {
4699    font-size: 10px !important;
4700    letter-spacing: 1.8px;
4701  }
4702
4703  #mcr .mcr-title {
4704    font-size: 25px !important;
4705    letter-spacing: 1px;
4706  }
4707
4708  #mcr .mcr-subtitle {
4709    max-width: 290px;
4710    font-size: 13px !important;
4711  }
4712
4713  #mcr .mcr-grid {
4714    grid-template-columns: minmax(0, 1fr) !important;
4715    gap: 16px !important;
4716  }
4717
4718  #mcr .mcr-card {
4719    padding: 24px 21px;
4720  }
4721
4722  #mcr .mcr-card-title {
4723    font-size: 18px !important;
4724    letter-spacing: .4px;
4725  }
4726
4727  #mcr .mcr-text {
4728    letter-spacing: .2px;
4729  }
4730
4731  #mcr .mcr-foot {
4732    margin-top: 30px;
4733    padding-top: 24px;
4734  }
4735
4736  #mcr .mcr-quote {
4737    font-size: 13px !important;
4738    letter-spacing: .5px;
4739  }
4740}
4741
4742/* 動畫只用於裝飾 */
4743@keyframes mcr-glow-v2 {
4744  from {
4745    transform: translate3d(-3%, -2%, 0);
4746  }
4747  to {
4748    transform: translate3d(5%, 3%, 0);
4749  }
4750}
4751
4752@keyframes mcr-line-v2 {
4753  0%, 15% {
4754    transform: translateX(0);
4755  }
4756  85%, 100% {
4757    transform: translateX(300%);
4758  }
4759}
4760
4761@media (prefers-reduced-motion: reduce) {
4762  #mcr::before,
4763  #mcr .mcr-line::after {
4764    animation: none !important;
4765  }
4766
4767  #mcr .mcr-card {
4768    transition: none !important;
4769  }
4770}
4771
4772/* ==========================================
4773   MI CASITA|Species Intelligence
4774   短元素 ID:mcs
4775========================================== */
4776
4777#mcs {
4778  --mcs-gold: #c7aa78;
4779  --mcs-light: #ead8b5;
4780  --mcs-text: #eee8dd;
4781
4782  position: relative;
4783  isolation: isolate;
4784  display: block;
4785  width: 100%;
4786  max-width: 100%;
4787  min-width: 0;
4788  height: auto;
4789  overflow: hidden;
4790  box-sizing: border-box;
4791
4792  padding: clamp(56px, 7vw, 96px) 24px !important;
4793
4794  background:
4795    radial-gradient(
4796      ellipse at 95% 0%,
4797      rgba(123, 143, 90, .10),
4798      transparent 48%
4799    ),
4800    linear-gradient(
4801      145deg,
4802      #171a13 0%,
4803      #0d110e 48%,
4804      #11100d 100%
4805    ) !important;
4806
4807  border-top: 1px solid rgba(199, 170, 120, .28);
4808  border-bottom: 1px solid rgba(199, 170, 120, .2);
4809  color: var(--mcs-text);
4810
4811  font-family:
4812    "Noto Serif TC",
4813    "Songti TC",
4814    "PMingLiU",
4815    serif;
4816
4817  -webkit-font-smoothing: antialiased;
4818}
4819
4820#mcs *,
4821#mcs *::before,
4822#mcs *::after {
4823  box-sizing: border-box;
4824}
4825
4826/* 內容不使用隱藏或淡入動畫 */
4827#mcs .mcs-wrap,
4828#mcs .mcs-head,
4829#mcs .mcs-grid,
4830#mcs .mcs-card,
4831#mcs .mcs-foot {
4832  opacity: 1;
4833  visibility: visible;
4834}
4835
4836/* 背景暖金光暈 */
4837#mcs::before {
4838  content: "";
4839  position: absolute;
4840  z-index: 0;
4841  inset: -20%;
4842  pointer-events: none;
4843
4844  background: radial-gradient(
4845    ellipse at 25% 45%,
4846    rgba(190, 150, 87, .09),
4847    transparent 55%
4848  );
4849
4850  animation: mcs-ambient 18s ease-in-out infinite alternate;
4851}
4852
4853/* 頂部金色髮絲線 */
4854#mcs::after {
4855  content: "";
4856  position: absolute;
4857  top: 0;
4858  left: 10%;
4859  right: 10%;
4860  height: 1px;
4861  pointer-events: none;
4862
4863  background: linear-gradient(
4864    90deg,
4865    transparent,
4866    #d2b680,
4867    transparent
4868  );
4869}
4870
4871#mcs .mcs-wrap {
4872  position: relative;
4873  z-index: 1;
4874  width: 100%;
4875  max-width: 1200px;
4876  min-width: 0;
4877  margin: 0 auto;
4878}
4879
4880/* ==========================================
4881   標題區
4882========================================== */
4883
4884#mcs .mcs-head {
4885  margin: 0 0 40px;
4886  padding: 0;
4887  text-align: left;
4888}
4889
4890#mcs .mcs-label {
4891  margin: 0 0 18px;
4892  color: var(--mcs-gold);
4893  font-family:
4894    "Noto Sans TC",
4895    "PingFang TC",
4896    "Microsoft JhengHei",
4897    sans-serif;
4898  font-size: 11px;
4899  font-weight: 400;
4900  line-height: 1.9;
4901  letter-spacing: 3px;
4902  text-transform: uppercase;
4903}
4904
4905#mcs .mcs-title {
4906  margin: 0;
4907  color: #f1eadf;
4908  font-size: clamp(26px, 3vw, 36px);
4909  font-weight: 500;
4910  line-height: 1.6;
4911  letter-spacing: 2px;
4912  overflow-wrap: anywhere;
4913}
4914
4915#mcs .mcs-sub {
4916  margin: 12px 0 0;
4917  color: #b6a991;
4918  font-family: Georgia, "Times New Roman", serif;
4919  font-size: 15px;
4920  font-style: italic;
4921  line-height: 1.8;
4922  letter-spacing: .7px;
4923}
4924
4925#mcs .mcs-rule {
4926  position: relative;
4927  width: 120px;
4928  height: 1px;
4929  margin-top: 28px;
4930  overflow: hidden;
4931  background: rgba(199, 170, 120, .3);
4932}
4933
4934#mcs .mcs-rule::after {
4935  content: "";
4936  position: absolute;
4937  inset: 0 auto 0 -60px;
4938  width: 60px;
4939  background: linear-gradient(
4940    90deg,
4941    transparent,
4942    #f5dfae,
4943    transparent
4944  );
4945  animation: mcs-rule-light 7s ease-in-out infinite;
4946}
4947
4948/* ==========================================
4949   卡片|桌機三欄
4950========================================== */
4951
4952#mcs .mcs-grid {
4953  display: grid;
4954  grid-template-columns: repeat(3, minmax(0, 1fr));
4955  align-items: stretch;
4956  gap: 22px;
4957  min-width: 0;
4958}
4959
4960#mcs .mcs-card {
4961  position: relative;
4962  display: flex;
4963  flex-direction: column;
4964  min-width: 0;
4965  margin: 0;
4966  padding: 28px 24px;
4967  overflow: hidden;
4968
4969  border: 1px solid rgba(199, 170, 120, .3);
4970  border-radius: 20px 5px 20px 5px;
4971
4972  background:
4973    radial-gradient(
4974      ellipse at 0% 0%,
4975      rgba(206, 178, 122, .065),
4976      transparent 65%
4977    ),
4978    linear-gradient(145deg, #1a1e17, #121510);
4979
4980  box-shadow:
4981    inset 0 1px 0 rgba(244, 221, 173, .04),
4982    0 12px 28px rgba(0, 0, 0, .16);
4983
4984  transition:
4985    border-color .45s ease,
4986    box-shadow .45s ease;
4987}
4988
4989/* 卡片頂部金光,光線不遮蓋文字 */
4990#mcs .mcs-card::before {
4991  content: "";
4992  position: absolute;
4993  top: 0;
4994  left: -45%;
4995  width: 45%;
4996  height: 1px;
4997  pointer-events: none;
4998
4999  background: linear-gradient(
5000    90deg,
5001    transparent,
5002    #f2d6a0,
5003    transparent
5004  );
5005
5006  animation: mcs-card-light 9s ease-in-out infinite;
5007}
5008
5009#mcs .mcs-card:nth-child(2)::before { animation-delay: -1.5s; }
5010#mcs .mcs-card:nth-child(3)::before { animation-delay: -3s; }
5011#mcs .mcs-card:nth-child(4)::before { animation-delay: -4.5s; }
5012#mcs .mcs-card:nth-child(5)::before { animation-delay: -6s; }
5013#mcs .mcs-card:nth-child(6)::before { animation-delay: -7.5s; }
5014
5015/* 圖像與物種名稱 */
5016#mcs .mcs-top {
5017  display: flex;
5018  align-items: center;
5019  gap: 16px;
5020  min-width: 0;
5021  margin-bottom: 24px;
5022}
5023
5024#mcs .mcs-photo {
5025  flex: 0 0 88px;
5026  width: 88px;
5027  height: 88px;
5028  padding: 5px;
5029  overflow: hidden;
5030
5031  border: 1px solid var(--mcs-gold);
5032  border-radius: 50%;
5033  background: #11150f;
5034
5035  box-shadow:
5036    0 0 0 4px rgba(199, 170, 120, .045),
5037    0 7px 20px rgba(0, 0, 0, .22);
5038
5039  transition:
5040    border-color .45s ease,
5041    box-shadow .45s ease;
5042}
5043
5044#mcs .mcs-photo img {
5045  display: block;
5046  width: 100%;
5047  height: 100%;
5048  max-width: 100%;
5049  margin: 0;
5050  border-radius: 50%;
5051  object-fit: cover;
5052  object-position: center;
5053}
5054
5055#mcs .mcs-name {
5056  flex: 1;
5057  min-width: 0;
5058}
5059
5060#mcs .mcs-no {
5061  display: block;
5062  margin-bottom: 7px;
5063  color: #ac9876;
5064  font-family: Arial, sans-serif;
5065  font-size: 9px;
5066  line-height: 1.5;
5067  letter-spacing: 2px;
5068}
5069
5070#mcs .mcs-name h3 {
5071  margin: 0;
5072  color: #f0e8da;
5073  font-size: 20px;
5074  font-weight: 500;
5075  line-height: 1.6;
5076  letter-spacing: .8px;
5077  overflow-wrap: anywhere;
5078}
5079
5080#mcs .mcs-latin {
5081  display: block;
5082  margin-top: 5px;
5083  color: #c6ad80;
5084  font-family: Georgia, "Times New Roman", serif;
5085  font-size: 13px;
5086  font-style: italic;
5087  line-height: 1.6;
5088  overflow-wrap: anywhere;
5089}
5090
5091/* 中英文內容 */
5092#mcs .mcs-cn {
5093  margin: 0 0 22px;
5094  color: #d0c9bd;
5095  font-family:
5096    "Noto Sans TC",
5097    "PingFang TC",
5098    "Microsoft JhengHei",
5099    sans-serif;
5100  font-size: 14px;
5101  font-weight: 400;
5102  line-height: 1.95;
5103  letter-spacing: .3px;
5104  text-align: left;
5105  overflow-wrap: anywhere;
5106}
5107
5108#mcs .mcs-cn strong {
5109  color: #e1c796;
5110  font-weight: 500;
5111}
5112
5113#mcs .mcs-en {
5114  margin: auto 0 0;
5115  padding-top: 17px;
5116  border-top: 1px solid rgba(199, 170, 120, .19);
5117  color: #b2ad9f;
5118  font-family: Georgia, "Times New Roman", serif;
5119  font-size: 13px;
5120  font-style: italic;
5121  font-weight: 400;
5122  line-height: 1.8;
5123  overflow-wrap: anywhere;
5124}
5125
5126#mcs .mcs-en strong {
5127  color: #cbbb9b;
5128  font-weight: 400;
5129}
5130
5131/* ==========================================
5132   底部按鈕
5133========================================== */
5134
5135#mcs .mcs-foot {
5136  margin-top: 42px;
5137  text-align: center;
5138}
5139
5140#mcs .mcs-btn {
5141  position: relative;
5142  display: inline-flex;
5143  align-items: center;
5144  justify-content: center;
5145  gap: 30px;
5146
5147  max-width: 100%;
5148  min-height: 72px;
5149  padding: 17px 30px;
5150  overflow: hidden;
5151
5152  border: 1px solid #b89c68;
5153  border-radius: 8px;
5154  background: linear-gradient(
5155    120deg,
5156    rgba(199, 170, 120, .11),
5157    rgba(199, 170, 120, .025)
5158  );
5159
5160  color: #e5cea2;
5161  text-decoration: none;
5162
5163  transition:
5164    border-color .4s ease,
5165    background-color .4s ease,
5166    box-shadow .4s ease;
5167}
5168
5169#mcs .mcs-btn::before {
5170  content: "";
5171  position: absolute;
5172  top: -50%;
5173  left: -65%;
5174  width: 45%;
5175  height: 200%;
5176  pointer-events: none;
5177
5178  background: linear-gradient(
5179    90deg,
5180    transparent,
5181    rgba(239, 212, 162, .1),
5182    transparent
5183  );
5184
5185  transform: skewX(-20deg);
5186  animation: mcs-button-light 10s ease-in-out infinite;
5187}
5188
5189#mcs .mcs-btn-text,
5190#mcs .mcs-arrow {
5191  position: relative;
5192  z-index: 1;
5193}
5194
5195#mcs .mcs-btn-cn {
5196  display: block;
5197  font-size: 14px;
5198  line-height: 1.7;
5199  letter-spacing: 2px;
5200}
5201
5202#mcs .mcs-btn-en {
5203  display: block;
5204  margin-top: 3px;
5205  font-family: Georgia, "Times New Roman", serif;
5206  font-size: 10px;
5207  line-height: 1.7;
5208  letter-spacing: 1.2px;
5209  text-transform: uppercase;
5210}
5211
5212#mcs .mcs-arrow {
5213  font-size: 23px;
5214  transition: transform .4s ease;
5215}
5216
5217#mcs .mcs-btn:focus-visible {
5218  outline: 2px solid #f0d5a0;
5219  outline-offset: 5px;
5220}
5221
5222/* 滑鼠互動 */
5223@media (hover: hover) and (pointer: fine) {
5224  #mcs .mcs-card:hover {
5225    border-color: rgba(223, 192, 140, .75);
5226    box-shadow:
5227      inset 0 0 24px rgba(199, 170, 120, .035),
5228      0 16px 34px rgba(0, 0, 0, .23);
5229  }
5230
5231  #mcs .mcs-card:hover .mcs-photo {
5232    border-color: #ebd19f;
5233    box-shadow:
5234      0 0 0 5px rgba(199, 170, 120, .075),
5235      0 0 22px rgba(199, 170, 120, .12);
5236  }
5237
5238  #mcs .mcs-btn:hover {
5239    border-color: #ecd3a4;
5240    background-color: rgba(199, 170, 120, .1);
5241    box-shadow: 0 0 25px rgba(199, 170, 120, .08);
5242  }
5243
5244  #mcs .mcs-btn:hover .mcs-arrow {
5245    transform: translateX(4px);
5246  }
5247}
5248
5249/* 平板兩欄 */
5250@media (max-width: 1024px) {
5251  #mcs .mcs-grid {
5252    grid-template-columns: repeat(2, minmax(0, 1fr));
5253    gap: 20px;
5254  }
5255}
5256
5257/* 手機單欄 */
5258@media (max-width: 640px) {
5259  #mcs {
5260    padding: 52px 18px !important;
5261  }
5262
5263  #mcs .mcs-head {
5264    margin-bottom: 30px;
5265  }
5266
5267  #mcs .mcs-label {
5268    font-size: 10px;
5269    letter-spacing: 1.7px;
5270  }
5271
5272  #mcs .mcs-title {
5273    font-size: 26px;
5274    letter-spacing: 1px;
5275  }
5276
5277  #mcs .mcs-sub {
5278    font-size: 13px;
5279    letter-spacing: .3px;
5280  }
5281
5282  #mcs .mcs-grid {
5283    grid-template-columns: minmax(0, 1fr);
5284    gap: 18px;
5285  }
5286
5287  #mcs .mcs-card {
5288    padding: 25px 21px;
5289  }
5290
5291  #mcs .mcs-top {
5292    gap: 15px;
5293    margin-bottom: 21px;
5294  }
5295
5296  #mcs .mcs-photo {
5297    flex-basis: 76px;
5298    width: 76px;
5299    height: 76px;
5300  }
5301
5302  #mcs .mcs-name h3 {
5303    font-size: 19px;
5304  }
5305
5306  #mcs .mcs-foot {
5307    margin-top: 30px;
5308  }
5309
5310  #mcs .mcs-btn {
5311    gap: 22px;
5312    padding: 16px 24px;
5313  }
5314}
5315
5316/* 裝飾動畫 */
5317@keyframes mcs-ambient {
5318  from { transform: translate3d(-3%, -1%, 0); }
5319  to   { transform: translate3d(4%, 3%, 0); }
5320}
5321
5322@keyframes mcs-rule-light {
5323  0%, 15%  { transform: translateX(0); }
5324  85%, 100% { transform: translateX(180px); }
5325}
5326
5327@keyframes mcs-card-light {
5328  0%, 15%  { transform: translateX(0); }
5329  85%, 100% { transform: translateX(330%); }
5330}
5331
5332@keyframes mcs-button-light {
5333  0%, 55% { left: -65%; }
5334  85%, 100% { left: 130%; }
5335}
5336
5337/* 減少動態效果 */
5338@media (prefers-reduced-motion: reduce) {
5339  #mcs::before,
5340  #mcs .mcs-rule::after,
5341  #mcs .mcs-card::before,
5342  #mcs .mcs-btn::before {
5343    animation: none;
5344  }
5345
5346  #mcs .mcs-card,
5347  #mcs .mcs-photo,
5348  #mcs .mcs-btn,
5349  #mcs .mcs-arrow {
5350    transition: none;
5351  }
5352}
5353
5354/* mcs|上下區塊結構修正 */
5355
5356#mcs {
5357  position: relative !important;
5358  display: block !important;
5359  float: none !important;
5360  clear: both;
5361  inset: auto !important;
5362  transform: none !important;
5363  width: 100% !important;
5364  max-width: 100% !important;
5365  height: auto !important;
5366  max-height: none !important;
5367  margin: 0 !important;
5368  box-sizing: border-box;
5369}
5370
5371#mcs .mcs-wrap {
5372  position: relative !important;
5373  display: flex !important;
5374  flex-direction: column !important;
5375  align-items: stretch !important;
5376  gap: 0 !important;
5377
5378  float: none !important;
5379  inset: auto !important;
5380  transform: none !important;
5381
5382  width: 100% !important;
5383  max-width: 1200px !important;
5384  min-width: 0 !important;
5385  height: auto !important;
5386  max-height: none !important;
5387  margin: 0 auto !important;
5388}
5389
5390/* 上方三格與下方六格:各自獨立 */
5391#mcs .mcs-breed,
5392#mcs .mcs-species {
5393  position: relative !important;
5394  display: block !important;
5395  flex: 0 0 auto !important;
5396  float: none !important;
5397  inset: auto !important;
5398  transform: none !important;
5399
5400  width: 100% !important;
5401  min-width: 0 !important;
5402  height: auto !important;
5403  max-height: none !important;
5404  margin: 0 !important;
5405}
5406
5407/* 標題保留正常高度 */
5408#mcs .mcs-head {
5409  position: static !important;
5410  display: block !important;
5411  float: none !important;
5412  transform: none !important;
5413  width: 100% !important;
5414  height: auto !important;
5415  margin: 0 0 36px !important;
5416}
5417
5418/* 兩個網格獨立計算高度 */
5419#mcs .mcs-grid {
5420  position: static !important;
5421  display: grid !important;
5422  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
5423  grid-template-rows: none !important;
5424  grid-auto-rows: auto !important;
5425  align-items: stretch !important;
5426
5427  width: 100% !important;
5428  min-width: 0 !important;
5429  height: auto !important;
5430  max-height: none !important;
5431  margin: 0 !important;
5432  gap: 22px !important;
5433  transform: none !important;
5434}
5435
5436#mcs .mcs-grid > .mcs-card {
5437  position: relative !important;
5438  display: flex !important;
5439  flex-direction: column !important;
5440  float: none !important;
5441  inset: auto !important;
5442  transform: none !important;
5443
5444  grid-column: auto !important;
5445  grid-row: auto !important;
5446  width: auto !important;
5447  min-width: 0 !important;
5448  height: auto !important;
5449  max-height: none !important;
5450  margin: 0 !important;
5451}
5452
5453/* 中間分隔具有自己的實際高度 */
5454#mcs .mcs-divider {
5455  position: relative !important;
5456  display: flex !important;
5457  flex: 0 0 auto !important;
5458  align-items: center !important;
5459  justify-content: center !important;
5460  gap: 22px !important;
5461
5462  inset: auto !important;
5463  transform: none !important;
5464  width: 100% !important;
5465  height: auto !important;
5466  min-height: 18px;
5467  margin: 0 !important;
5468  padding: 52px 0 !important;
5469}
5470
5471#mcs .mcs-foot {
5472  position: static !important;
5473  flex: 0 0 auto !important;
5474  height: auto !important;
5475  margin: 42px 0 0 !important;
5476  transform: none !important;
5477}
5478
5479/* 平板:兩欄,繁殖實錄第三格獨立一排 */
5480@media (max-width: 1024px) {
5481  #mcs .mcs-grid {
5482    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
5483  }
5484
5485  #mcs .mcs-breed-grid > .mcs-card:last-child {
5486    grid-column: 1 / -1 !important;
5487  }
5488}
5489
5490/* 手機:全部單欄 */
5491@media (max-width: 640px) {
5492  #mcs .mcs-grid {
5493    grid-template-columns: minmax(0, 1fr) !important;
5494    gap: 18px !important;
5495  }
5496
5497  #mcs .mcs-head {
5498    margin-bottom: 28px !important;
5499  }
5500
5501  #mcs .mcs-divider {
5502    padding: 36px 0 !important;
5503    gap: 16px !important;
5504  }
5505}
5506
5507/* =========================================================
5508   MI CASITA|REPTILE ECOLOGY JOURNAL
5509   爬蟲生態觀察筆記
5510   Element ID:mrj
5511   ========================================================= */
5512
5513#mrj{
5514  position:relative;
5515  width:calc(100% - 48px);
5516  max-width:1240px;
5517  margin:58px auto 72px !important;
5518  padding:112px 42px 46px !important;
5519  box-sizing:border-box;
5520
5521  background:
5522    radial-gradient(circle at 92% 0%,
5523      rgba(177,139,73,.09) 0,
5524      transparent 30%),
5525    radial-gradient(circle at 0% 100%,
5526      rgba(35,62,48,.055) 0,
5527      transparent 34%),
5528    #fbfaf7;
5529
5530  border:1px solid rgba(142,108,51,.28);
5531  border-radius:24px;
5532
5533  box-shadow:
5534    0 28px 70px rgba(23,27,23,.08),
5535    0 5px 18px rgba(23,27,23,.035),
5536    inset 0 0 0 1px rgba(255,255,255,.85);
5537
5538  overflow:hidden;
5539  isolation:isolate;
5540
5541  transition:
5542    transform .65s cubic-bezier(.22,.61,.36,1),
5543    box-shadow .65s ease,
5544    border-color .65s ease;
5545}
5546
5547
5548/* =========================================================
5549   三語精品標題
5550   不需要另外寫 HTML
5551   ========================================================= */
5552
5553#mrj::before{
5554  content:"REPTILE ECOLOGY JOURNAL  ·  爬蟲生態觀察筆記  ·  CUADERNO DE ECOLOGÍA DE REPTILES";
5555
5556  position:absolute;
5557  top:34px;
5558  left:42px;
5559  right:42px;
5560
5561  display:flex;
5562  align-items:center;
5563
5564  min-height:45px;
5565  padding:0 0 19px;
5566
5567  box-sizing:border-box;
5568
5569  color:#26352d;
5570
5571  font-family:
5572    "Noto Sans TC",
5573    "PingFang TC",
5574    "Microsoft JhengHei",
5575    Arial,
5576    sans-serif;
5577
5578  font-size:13px;
5579  font-weight:600;
5580  line-height:1.7;
5581  letter-spacing:.15em;
5582
5583  border-bottom:1px solid rgba(150,115,57,.25);
5584
5585  z-index:3;
5586
5587  animation:
5588    mrjTitleIn .9s cubic-bezier(.22,.61,.36,1) both;
5589}
5590
5591
5592/* 金色小標記 */
5593
5594#mrj::after{
5595  content:"";
5596
5597  position:absolute;
5598  top:32px;
5599  right:42px;
5600
5601  width:7px;
5602  height:7px;
5603
5604  border-radius:50%;
5605
5606  background:#b78a43;
5607
5608  box-shadow:
5609    0 0 0 5px rgba(183,138,67,.08),
5610    0 0 18px rgba(183,138,67,.22);
5611
5612  z-index:4;
5613
5614  animation:mrjPulse 3.2s ease-in-out infinite;
5615}
5616
5617
5618/* =========================================================
5619   整體 Hover
5620   ========================================================= */
5621
5622@media (hover:hover){
5623
5624  #mrj:hover{
5625    transform:translateY(-5px);
5626
5627    border-color:rgba(161,120,51,.48);
5628
5629    box-shadow:
5630      0 38px 90px rgba(22,28,23,.115),
5631      0 10px 25px rgba(22,28,23,.045),
5632      inset 0 0 0 1px rgba(255,255,255,.9);
5633  }
5634
5635}
5636
5637
5638/* =========================================================
5639   文章圖片
5640   不強制高度,避免 GoGoShop 圖片再次跑版
5641   ========================================================= */
5642
5643#mrj img{
5644  max-width:100%;
5645  height:auto;
5646
5647  transition:
5648    transform .75s cubic-bezier(.22,.61,.36,1),
5649    filter .75s ease,
5650    box-shadow .75s ease;
5651}
5652
5653
5654/* 圖片滑過效果 */
5655
5656@media (hover:hover){
5657
5658  #mrj a:hover img{
5659    transform:translateY(-4px) scale(1.015);
5660
5661    filter:
5662      saturate(1.04)
5663      contrast(1.025);
5664
5665    box-shadow:
5666      0 16px 32px rgba(24,32,26,.13);
5667  }
5668
5669}
5670
5671
5672/* =========================================================
5673   連結質感
5674   ========================================================= */
5675
5676#mrj a{
5677  transition:
5678    color .3s ease,
5679    opacity .3s ease;
5680}
5681
5682#mrj a:hover{
5683  color:#9b7134;
5684}
5685
5686
5687/* =========================================================
5688   文字
5689   ========================================================= */
5690
5691#mrj h1,
5692#mrj h2,
5693#mrj h3,
5694#mrj h4{
5695  color:#202922;
5696}
5697
5698#mrj p{
5699  color:#5e615d;
5700}
5701
5702
5703/* =========================================================
5704   動畫
5705   ========================================================= */
5706
5707@keyframes mrjTitleIn{
5708
5709  from{
5710    opacity:0;
5711    transform:translateY(12px);
5712    letter-spacing:.22em;
5713  }
5714
5715  to{
5716    opacity:1;
5717    transform:translateY(0);
5718    letter-spacing:.15em;
5719  }
5720
5721}
5722
5723
5724@keyframes mrjPulse{
5725
5726  0%,100%{
5727    opacity:.45;
5728    transform:scale(.82);
5729  }
5730
5731  50%{
5732    opacity:1;
5733    transform:scale(1);
5734  }
5735
5736}
5737
5738
5739/* =========================================================
5740   平板
5741   ========================================================= */
5742
5743@media (max-width:991px){
5744
5745  #mrj{
5746    width:calc(100% - 32px);
5747    margin:42px auto 56px !important;
5748
5749    padding:
5750      105px
5751      28px
5752      36px !important;
5753
5754    border-radius:20px;
5755  }
5756
5757  #mrj::before{
5758    top:30px;
5759    left:28px;
5760    right:28px;
5761
5762    font-size:11.5px;
5763    letter-spacing:.11em;
5764  }
5765
5766  #mrj::after{
5767    top:29px;
5768    right:28px;
5769  }
5770
5771}
5772
5773
5774/* =========================================================
5775   手機
5776   ========================================================= */
5777
5778@media (max-width:640px){
5779
5780  #mrj{
5781    width:calc(100% - 24px);
5782
5783    margin:
5784      28px
5785      auto
5786      42px !important;
5787
5788    padding:
5789      120px
5790      18px
5791      28px !important;
5792
5793    border-radius:17px;
5794
5795    box-shadow:
5796      0 18px 42px rgba(23,27,23,.075),
5797      inset 0 0 0 1px rgba(255,255,255,.8);
5798  }
5799
5800
5801  #mrj::before{
5802    content:
5803      "REPTILE ECOLOGY JOURNAL\A"
5804      "爬蟲生態觀察筆記\A"
5805      "CUADERNO DE ECOLOGÍA DE REPTILES";
5806
5807    white-space:pre-line;
5808
5809    top:24px;
5810    left:18px;
5811    right:18px;
5812
5813    padding-bottom:15px;
5814
5815    font-size:10.5px;
5816    line-height:1.75;
5817    letter-spacing:.09em;
5818  }
5819
5820
5821  #mrj::after{
5822    display:none;
5823  }
5824
5825
5826  /* 手機不做放大,避免圖片互相碰撞 */
5827
5828  #mrj a:hover img{
5829    transform:none;
5830  }
5831
5832}
5833
5834
5835/* =========================================================
5836   無障礙:使用者關閉動畫時
5837   ========================================================= */
5838
5839@media (prefers-reduced-motion:reduce){
5840
5841  #mrj,
5842  #mrj *,
5843  #mrj::before,
5844  #mrj::after{
5845    animation:none !important;
5846    transition:none !important;
5847  }
5848
5849}
5850
5851/* =========================================================
5852   MI CASITA
5853   2026 CARNIVAL OF PUMPKINS & SPIRITS
5854   Banner 下方精品導覽
5855   ID:mcf
5856========================================================= */
5857
5858
5859/* ===== RESET ===== */
5860
5861#mcf,
5862#mcf *,
5863#mcf *::before,
5864#mcf *::after{
5865  box-sizing:border-box !important;
5866}
5867
5868
5869/* =========================================================
5870   SECTION
5871========================================================= */
5872
5873#mcf{
5874  position:relative !important;
5875  display:block !important;
5876
5877  width:100% !important;
5878  max-width:none !important;
5879
5880  margin:0 !important;
5881  padding:26px 0 28px !important;
5882
5883  overflow:hidden !important;
5884
5885  color:#f5ead7 !important;
5886
5887  background:
5888    radial-gradient(
5889      circle at 8% 15%,
5890      rgba(126,31,44,.22),
5891      transparent 30%
5892    ),
5893    radial-gradient(
5894      circle at 91% 80%,
5895      rgba(180,112,36,.13),
5896      transparent 32%
5897    ),
5898    linear-gradient(
5899      105deg,
5900      #170d0d 0%,
5901      #1c110e 45%,
5902      #100b09 100%
5903    ) !important;
5904
5905  border:0 !important;
5906}
5907
5908
5909/* 頂部細金線 */
5910
5911#mcf::before{
5912  content:"" !important;
5913
5914  position:absolute !important;
5915  z-index:1 !important;
5916
5917  top:0 !important;
5918  left:50% !important;
5919
5920  width:min(1200px,92%) !important;
5921  height:1px !important;
5922
5923  transform:translateX(-50%) !important;
5924
5925  background:
5926    linear-gradient(
5927      90deg,
5928      transparent 0%,
5929      rgba(201,145,63,.35) 18%,
5930      #d8a95c 50%,
5931      rgba(201,145,63,.35) 82%,
5932      transparent 100%
5933    ) !important;
5934
5935  box-shadow:
5936    0 0 16px rgba(220,166,77,.24) !important;
5937}
5938
5939
5940/* 中央柔光 */
5941
5942#mcf::after{
5943  content:"" !important;
5944
5945  position:absolute !important;
5946  pointer-events:none !important;
5947
5948  z-index:0 !important;
5949
5950  top:-250px !important;
5951  left:50% !important;
5952
5953  width:600px !important;
5954  height:430px !important;
5955
5956  transform:translateX(-50%) !important;
5957
5958  border-radius:50% !important;
5959
5960  background:
5961    radial-gradient(
5962      circle,
5963      rgba(225,169,84,.095) 0%,
5964      rgba(225,169,84,.035) 35%,
5965      transparent 70%
5966    ) !important;
5967
5968  animation:
5969    mcfGlow 5.5s ease-in-out infinite alternate !important;
5970}
5971
5972
5973/* =========================================================
5974   主內容
5975   關鍵:強制真正置中
5976========================================================= */
5977
5978#mcf .mcf-wrap{
5979  position:relative !important;
5980  z-index:2 !important;
5981
5982  display:block !important;
5983
5984  width:calc(100% - 48px) !important;
5985  max-width:1200px !important;
5986
5987  min-width:0 !important;
5988
5989  margin-left:auto !important;
5990  margin-right:auto !important;
5991
5992  padding:0 !important;
5993
5994  float:none !important;
5995
5996  left:auto !important;
5997  right:auto !important;
5998
5999  transform:none !important;
6000}
6001
6002
6003/* =========================================================
6004   HEADER
6005========================================================= */
6006
6007#mcf .mcf-head{
6008  display:grid !important;
6009
6010  grid-template-columns:
6011    minmax(210px,.8fr)
6012    minmax(390px,1.45fr)
6013    minmax(260px,1fr) !important;
6014
6015  width:100% !important;
6016
6017  align-items:center !important;
6018
6019  gap:24px !important;
6020
6021  margin:0 0 18px !important;
6022  padding:0 !important;
6023
6024  animation:
6025    mcfEnter .75s ease both !important;
6026}
6027
6028
6029/* ===== 左邊小標 ===== */
6030
6031#mcf .mcf-kicker{
6032  display:flex !important;
6033
6034  align-items:center !important;
6035
6036  gap:8px !important;
6037
6038  min-width:0 !important;
6039
6040  color:#ca9a53 !important;
6041
6042  font-size:8px !important;
6043  line-height:1.4 !important;
6044
6045  font-weight:600 !important;
6046
6047  letter-spacing:.17em !important;
6048
6049  white-space:nowrap !important;
6050}
6051
6052
6053#mcf .mcf-kicker i{
6054  display:block !important;
6055
6056  width:18px !important;
6057  height:1px !important;
6058
6059  flex:0 0 18px !important;
6060
6061  background:
6062    rgba(208,159,79,.55) !important;
6063}
6064
6065
6066/* =========================================================
6067   中間主標
6068========================================================= */
6069
6070#mcf .mcf-main-title{
6071  display:flex !important;
6072
6073  align-items:baseline !important;
6074  justify-content:center !important;
6075
6076  gap:14px !important;
6077
6078  width:100% !important;
6079
6080  margin:0 !important;
6081  padding:0 !important;
6082
6083  text-align:center !important;
6084}
6085
6086
6087#mcf .mcf-main-title h2{
6088  display:block !important;
6089
6090  margin:0 !important;
6091  padding:0 !important;
6092
6093  color:#fff4df !important;
6094
6095  font-size:21px !important;
6096  line-height:1.35 !important;
6097
6098  font-weight:700 !important;
6099
6100  letter-spacing:.055em !important;
6101
6102  white-space:nowrap !important;
6103}
6104
6105
6106#mcf .mcf-main-title p{
6107  display:block !important;
6108
6109  margin:0 !important;
6110  padding:0 !important;
6111
6112  color:#bd9156 !important;
6113
6114  font-family:
6115    Georgia,
6116    "Times New Roman",
6117    serif !important;
6118
6119  font-size:8px !important;
6120  line-height:1.5 !important;
6121
6122  letter-spacing:.11em !important;
6123
6124  white-space:nowrap !important;
6125}
6126
6127
6128/* =========================================================
6129   右側介紹
6130========================================================= */
6131
6132#mcf .mcf-intro{
6133  margin:0 !important;
6134  padding:0 !important;
6135
6136  color:#cbb9a2 !important;
6137
6138  font-size:10px !important;
6139  line-height:1.6 !important;
6140
6141  letter-spacing:.065em !important;
6142
6143  text-align:right !important;
6144}
6145
6146
6147/* =========================================================
6148   NAV
6149========================================================= */
6150
6151#mcf .mcf-nav{
6152  display:grid !important;
6153
6154  grid-template-columns:
6155    repeat(4,minmax(0,1fr)) !important;
6156
6157  width:100% !important;
6158  max-width:100% !important;
6159
6160  margin:0 auto !important;
6161  padding:0 !important;
6162
6163  overflow:hidden !important;
6164
6165  border:
6166    1px solid rgba(207,157,80,.36) !important;
6167
6168  background:
6169    rgba(24,14,12,.72) !important;
6170
6171  box-shadow:
6172    0 16px 38px rgba(0,0,0,.18),
6173    inset 0 1px 0 rgba(255,255,255,.025) !important;
6174
6175  animation:
6176    mcfEnter .8s .08s ease both !important;
6177}
6178
6179
6180/* =========================================================
6181   每一個按鈕
6182========================================================= */
6183
6184#mcf .mcf-nav > a{
6185  position:relative !important;
6186
6187  display:grid !important;
6188
6189  grid-template-columns:
6190    34px minmax(0,1fr) 18px !important;
6191
6192  align-items:center !important;
6193
6194  gap:12px !important;
6195
6196  width:auto !important;
6197  min-width:0 !important;
6198
6199  min-height:74px !important;
6200
6201  margin:0 !important;
6202
6203  padding:14px 17px !important;
6204
6205  overflow:hidden !important;
6206
6207  border:0 !important;
6208  border-radius:0 !important;
6209
6210  border-right:
6211    1px solid rgba(211,161,83,.20) !important;
6212
6213  background:
6214    rgba(255,255,255,.004) !important;
6215
6216  color:#f5ead7 !important;
6217
6218  text-decoration:none !important;
6219
6220  box-shadow:none !important;
6221
6222  transition:
6223    background .42s ease,
6224    box-shadow .42s ease !important;
6225}
6226
6227
6228#mcf .mcf-nav > a:last-child{
6229  border-right:0 !important;
6230}
6231
6232
6233/* =========================================================
6234   按鈕掃光
6235========================================================= */
6236
6237#mcf .mcf-nav > a::before{
6238  content:"" !important;
6239
6240  position:absolute !important;
6241
6242  top:-10% !important;
6243  bottom:-10% !important;
6244
6245  left:-100% !important;
6246
6247  width:55% !important;
6248
6249  pointer-events:none !important;
6250
6251  transform:
6252    skewX(-20deg) !important;
6253
6254  background:
6255    linear-gradient(
6256      110deg,
6257      transparent,
6258      rgba(241,196,115,.115),
6259      transparent
6260    ) !important;
6261
6262  transition:
6263    left .75s cubic-bezier(.2,.8,.2,1) !important;
6264}
6265
6266
6267/* 底部金紅線 */
6268
6269#mcf .mcf-nav > a::after{
6270  content:"" !important;
6271
6272  position:absolute !important;
6273
6274  left:50% !important;
6275  bottom:0 !important;
6276
6277  width:0 !important;
6278  height:2px !important;
6279
6280  transform:
6281    translateX(-50%) !important;
6282
6283  background:
6284    linear-gradient(
6285      90deg,
6286      #842739 0%,
6287      #ca843d 28%,
6288      #f0c673 50%,
6289      #ca843d 72%,
6290      #842739 100%
6291    ) !important;
6292
6293  transition:
6294    width .4s ease !important;
6295}
6296
6297
6298/* =========================================================
6299   HOVER
6300========================================================= */
6301
6302#mcf .mcf-nav > a:hover{
6303  background:
6304    linear-gradient(
6305      135deg,
6306      rgba(115,29,41,.23),
6307      rgba(201,142,64,.075)
6308    ) !important;
6309
6310  box-shadow:
6311    inset 0 0 28px rgba(222,166,77,.07) !important;
6312}
6313
6314
6315#mcf .mcf-nav > a:hover::before{
6316  left:145% !important;
6317}
6318
6319
6320#mcf .mcf-nav > a:hover::after{
6321  width:100% !important;
6322}
6323
6324
6325/* =========================================================
6326   01 / 02 / 03 / 04
6327========================================================= */
6328
6329#mcf .mcf-no{
6330  display:flex !important;
6331
6332  align-items:center !important;
6333  justify-content:center !important;
6334
6335  width:29px !important;
6336  height:29px !important;
6337
6338  margin:0 !important;
6339  padding:0 !important;
6340
6341  flex:0 0 29px !important;
6342
6343  border:
6344    1px solid rgba(218,168,85,.55) !important;
6345
6346  border-radius:50% !important;
6347
6348  background:
6349    rgba(5,3,2,.18) !important;
6350
6351  color:#ddb064 !important;
6352
6353  font-family:
6354    Georgia,
6355    "Times New Roman",
6356    serif !important;
6357
6358  font-size:9px !important;
6359  line-height:1 !important;
6360
6361  letter-spacing:0 !important;
6362
6363  transition:
6364    transform .38s ease,
6365    color .38s ease,
6366    background .38s ease !important;
6367}
6368
6369
6370#mcf .mcf-nav > a:hover .mcf-no{
6371  background:
6372    #d6a251 !important;
6373
6374  color:#1c100b !important;
6375
6376  transform:
6377    rotate(-7deg)
6378    scale(1.06) !important;
6379}
6380
6381
6382/* =========================================================
6383   文字
6384========================================================= */
6385
6386#mcf .mcf-copy{
6387  display:flex !important;
6388
6389  min-width:0 !important;
6390
6391  flex-direction:column !important;
6392
6393  justify-content:center !important;
6394
6395  gap:2px !important;
6396
6397  margin:0 !important;
6398  padding:0 !important;
6399}
6400
6401
6402#mcf .mcf-copy b{
6403  display:block !important;
6404
6405  margin:0 !important;
6406  padding:0 !important;
6407
6408  color:#f6ead5 !important;
6409
6410  font-size:13px !important;
6411  line-height:1.4 !important;
6412
6413  font-weight:600 !important;
6414
6415  letter-spacing:.065em !important;
6416
6417  white-space:normal !important;
6418}
6419
6420
6421#mcf .mcf-copy small{
6422  display:block !important;
6423
6424  margin:0 !important;
6425  padding:0 !important;
6426
6427  color:#9f8060 !important;
6428
6429  font-family:
6430    Georgia,
6431    "Times New Roman",
6432    serif !important;
6433
6434  font-size:7px !important;
6435  line-height:1.5 !important;
6436
6437  font-weight:400 !important;
6438
6439  letter-spacing:.12em !important;
6440
6441  white-space:normal !important;
6442}
6443
6444
6445/* =========================================================
6446   ç®­é ­
6447========================================================= */
6448
6449#mcf .mcf-arrow{
6450  display:block !important;
6451
6452  margin:0 !important;
6453  padding:0 !important;
6454
6455  color:#d5a151 !important;
6456
6457  font-size:14px !important;
6458  line-height:1 !important;
6459
6460  text-align:right !important;
6461
6462  transition:
6463    transform .35s ease,
6464    color .35s ease !important;
6465}
6466
6467
6468#mcf .mcf-nav > a:hover .mcf-arrow{
6469  color:#efc370 !important;
6470
6471  transform:
6472    translate(3px,-1px) !important;
6473}
6474
6475
6476/* =========================================================
6477   動畫
6478========================================================= */
6479
6480@keyframes mcfEnter{
6481
6482  0%{
6483    opacity:0;
6484    transform:translateY(10px);
6485  }
6486
6487  100%{
6488    opacity:1;
6489    transform:translateY(0);
6490  }
6491
6492}
6493
6494
6495@keyframes mcfGlow{
6496
6497  0%{
6498    opacity:.35;
6499    transform:
6500      translateX(-50%)
6501      scale(.94);
6502  }
6503
6504  100%{
6505    opacity:.9;
6506    transform:
6507      translateX(-50%)
6508      scale(1.05);
6509  }
6510
6511}
6512
6513
6514/* =========================================================
6515   平板
6516========================================================= */
6517
6518@media(max-width:960px){
6519
6520  #mcf{
6521    padding:
6522      22px 0 24px !important;
6523  }
6524
6525
6526  #mcf .mcf-wrap{
6527    width:
6528      calc(100% - 32px) !important;
6529  }
6530
6531
6532  #mcf .mcf-head{
6533    display:flex !important;
6534
6535    flex-direction:column !important;
6536
6537    align-items:center !important;
6538    justify-content:center !important;
6539
6540    gap:6px !important;
6541
6542    margin-bottom:
6543      16px !important;
6544
6545    text-align:center !important;
6546  }
6547
6548
6549  #mcf .mcf-kicker{
6550    justify-content:center !important;
6551
6552    white-space:normal !important;
6553
6554    text-align:center !important;
6555  }
6556
6557
6558  #mcf .mcf-main-title{
6559    justify-content:center !important;
6560
6561    flex-wrap:wrap !important;
6562  }
6563
6564
6565  #mcf .mcf-intro{
6566    text-align:center !important;
6567  }
6568
6569
6570  #mcf .mcf-nav{
6571    grid-template-columns:
6572      repeat(2,minmax(0,1fr)) !important;
6573  }
6574
6575
6576  #mcf .mcf-nav > a{
6577    border-bottom:
6578      1px solid rgba(211,161,83,.20) !important;
6579  }
6580
6581
6582  #mcf .mcf-nav > a:nth-child(2n){
6583    border-right:0 !important;
6584  }
6585
6586
6587  #mcf .mcf-nav > a:nth-child(n+3){
6588    border-bottom:0 !important;
6589  }
6590
6591}
6592
6593
6594/* =========================================================
6595   手機
6596========================================================= */
6597
6598@media(max-width:560px){
6599
6600  #mcf{
6601    padding:
6602      19px 0 21px !important;
6603  }
6604
6605
6606  #mcf .mcf-wrap{
6607    width:
6608      calc(100% - 22px) !important;
6609  }
6610
6611
6612  #mcf .mcf-head{
6613    gap:
6614      5px !important;
6615
6616    margin-bottom:
6617      13px !important;
6618  }
6619
6620
6621  #mcf .mcf-kicker{
6622    font-size:
6623      7px !important;
6624
6625    letter-spacing:
6626      .12em !important;
6627  }
6628
6629
6630  #mcf .mcf-kicker i{
6631    width:
6632      12px !important;
6633
6634    flex-basis:
6635      12px !important;
6636  }
6637
6638
6639  #mcf .mcf-main-title{
6640    flex-direction:
6641      column !important;
6642
6643    gap:
6644      1px !important;
6645  }
6646
6647
6648  #mcf .mcf-main-title h2{
6649    font-size:
6650      17px !important;
6651
6652    white-space:
6653      normal !important;
6654  }
6655
6656
6657  #mcf .mcf-main-title p{
6658    font-size:
6659      7px !important;
6660
6661    white-space:
6662      normal !important;
6663  }
6664
6665
6666  #mcf .mcf-intro{
6667    max-width:
6668      360px !important;
6669
6670    font-size:
6671      9px !important;
6672
6673    line-height:
6674      1.6 !important;
6675  }
6676
6677
6678  /* 手機維持 2 × 2 */
6679
6680  #mcf .mcf-nav{
6681    grid-template-columns:
6682      repeat(2,minmax(0,1fr)) !important;
6683  }
6684
6685
6686  #mcf .mcf-nav > a{
6687    grid-template-columns:
6688      27px minmax(0,1fr) !important;
6689
6690    gap:
6691      8px !important;
6692
6693    min-height:
6694      67px !important;
6695
6696    padding:
6697      10px 9px !important;
6698  }
6699
6700
6701  #mcf .mcf-arrow{
6702    display:none !important;
6703  }
6704
6705
6706  #mcf .mcf-no{
6707    width:
6708      25px !important;
6709
6710    height:
6711      25px !important;
6712
6713    flex-basis:
6714      25px !important;
6715
6716    font-size:
6717      8px !important;
6718  }
6719
6720
6721  #mcf .mcf-copy b{
6722    font-size:
6723      11px !important;
6724
6725    letter-spacing:
6726      .035em !important;
6727  }
6728
6729
6730  #mcf .mcf-copy small{
6731    font-size:
6732      6px !important;
6733
6734    letter-spacing:
6735      .07em !important;
6736  }
6737
6738}
6739
6740
6741/* =========================================================
6742   小手機
6743========================================================= */
6744
6745@media(max-width:360px){
6746
6747  #mcf .mcf-wrap{
6748    width:
6749      calc(100% - 16px) !important;
6750  }
6751
6752
6753  #mcf .mcf-nav > a{
6754    padding:
6755      9px 7px !important;
6756
6757    gap:
6758      6px !important;
6759  }
6760
6761
6762  #mcf .mcf-copy b{
6763    font-size:
6764      10px !important;
6765  }
6766
6767}
6768
6769
6770/* =========================================================
6771   無動畫偏好
6772========================================================= */
6773
6774@media(prefers-reduced-motion:reduce){
6775
6776  #mcf,
6777  #mcf *,
6778  #mcf *::before,
6779  #mcf *::after{
6780    animation:none !important;
6781    transition:none !important;
6782  }
6783
6784}</style><meta><meta name="copyright" content="米卡希達廚坊 MiCASITA MEXICAN RESTAURANT"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1"><meta name="tenant_id" content="e8d5ce86"><meta name="plan_id" content="3"><meta name="currency" content="TWD">
6784<script>
6785    window.dataLayer = window.dataLayer || [];
6786    window.gtag = function () {
6787        dataLayer.push(arguments);
6788    }
6789    window.consentModeEnabled = false;
6790</script>
6790
6791    
6791<script>
6792        if (window.consentModeEnabled) {
6793            // Default consent settings - denied for all categories except security
6794            gtag('consent', 'default', {
6795                'ad_storage': 'denied',
6796                'ad_user_data': 'denied',      // Consent Mode V2 - user data for advertising
6797                'ad_personalization': 'denied', // Consent Mode V2 - personalized advertising
6798                'analytics_storage': 'denied',
6799                'functionality_storage': 'denied',
6800                'personalization_storage': 'denied',
6801                'security_storage': 'granted', // Always granted for security purposes
6802            });
6803        }
6804    </script>
6804
6805    <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 80 bytes, lines 6805-6807
6805
6806    <script async
6807            src="https://www.googletagmanager.com/gtag/js?id=
6807G-8SRED5E5FB
vendor: 16 bytes, lines 6807-6808
6807"></script>
6808    
6808<script>
6809
6810        var googleAnalytics4 = true;
6811        /*
6812                function gtag() {
6813                    dataLayer.push(arguments);
6814                }*/
6815
6816        gtag('js', new Date());
6817        gtag('config', 'G-8SRED5E5FB');
6818            </script>
6818
6819    
6819<script>
6820            </script>
6820
6821    <!-- Google Tag Manager -->
6822<script>
vendor: 327 bytes, lines 6822-6826
6822(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
6823new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
6824j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
6825'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
6826})(window,document,'script','dataLayer','
6826GTM-PJW745PQ
vendor: 3 bytes, line 6826
6826');
6826</script>
6826
6827<!-- End Google Tag Manager --><!-- Google Tag Manager -->
6828<script>
vendor: 327 bytes, lines 6828-6832
6828(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
6829new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
6830j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
6831'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
6832})(window,document,'script','dataLayer','
6832GTM-MVX27WM
vendor: 3 bytes, line 6832
6832');
6832</script>
6832
6833<!-- End Google Tag Manager -->
6834<script>
6835    var linkProductTarget = '_self';
6836    var linkOutsideTarget = '_blank';
6837</script>
6837
6838<link href="https://img.gogoshop.cloud/e8d5ce86/oU6AMFlexOa.jpg" type="image/jpeg" rel="icon"><link href="https://img.gogoshop.cloud/e8d5ce86/oU6AMFlexOa.jpg" type="image/jpeg" rel="shortcut icon"><link href="https://img.gogoshop.cloud/e8d5ce86/oU6AMFlexOa.jpg" rel="apple-touch-icon" type="image/jpeg"><meta http-equiv="X-UA-Compatible" content="IE=edge">
6838<script type="application/ld+json">[{"@context":"http://schema.org","@type":"Organization","name":"米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦","logo":"https://img.gogoshop.cloud/e8d5ce86/4k3A0njexOa.jpg","url":"https://www.micasita.com.tw","brand":[{"@type":"Brand","name":"米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦"}],"sameAs":["https://www.facebook.com/MexicanrestaurantcosinaMexicana","https://www.instagram.com/@micasita_mexican_restaurant/"],"contactPoint":{"@type":"ContactPoint","telephone":"07-2691433","contactType":"customer service"},"email":"[email protected]","address":"高雄市苓雅區新光路140å··39號"},{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://www.micasita.com.tw/","name":"米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦"}},{"@type":"ListItem","position":2,"item":{"@id":"https://www.micasita.com.tw/contact","name":"聯絡我們"}},{"@type":"ListItem","position":3,"item":{"@id":"https://www.micasita.com.tw/stores","name":"營業據點"}}]}]</script>
6838</head>
6839<body id="stores-page" class="desktop-page guest-page copy-disabled">
6840    <!-- Google Tag Manager (noscript) -->
vendor: 81 bytes, lines 6840-6842
6840
6841    <noscript>
6842        <iframe src="https://www.googletagmanager.com/ns.html?id=
6842GTM-PJW745PQ
vendor: 108 bytes, lines 6842-6845
6842"
6843                height="0" width="0" style="display:none;visibility:hidden"></iframe>
6844    </noscript>
6845    
6845<!-- End Google Tag Manager (noscript) -->
vendor: 74 bytes, lines 6845-6848
6845
6846
6847<noscript>
6848    <iframe src="https://www.googletagmanager.com/ns.html?id=
6848GTM-MVX27WM
vendor: 96 bytes, lines 6848-6850
6848"
6849            height="0" width="0" style="display:none;visibility:hidden"></iframe>
6850</noscript>
6851<div id="app">
6852    <div id="alert-top"><div class="container text-center">在高雄感受墨西哥的味道|Un bocado, todo México.</div><button type="button" class="close">×</button></div><div id="header-ontop" class="is-sticky">
6853    <header class="header ontop">
6854        <div class="main-header">
6855            <div class="container">
6856                <div class="main-menu-wapper">
6857                    <div class="row">
6858                                                    <div class="col-2">
6859                                <div class="logo">
6860                                    <a href="/">
6861                                        <img src="https://img.gogoshop.cloud/cdn-cgi/image/f=auto,q=auto,width=480/e8d5ce86/4k3A0njexOa.jpg" alt="米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦" loading="eager" fetchpriority="high">                                    </a>
6862                                </div>
6863                            </div>
6864                            <div class="col-10">
6865                                <nav class="main-menu-nav" aria-label="主選單">
6866<ul class="boutique-nav main-menu">
6867                <li class="menu-item-has-children">
6868                <a href="/pages/about">
6869                    關於米卡希達                                    </a>
6870                                    <div class="sub-menu" style="min-width:720px">
6871                        <div class="row">
6872                                                            <div class="col-sm-4">
6873                                    <ul>
6874                                        <li class="parent-menu">
6875            <a href="/pages/MiCasita"><strong>品牌故事</strong></a></li>                                    </ul>
6876                                </div>
6877                                                            <div class="col-sm-4">
6878                                    <ul>
6879                                        <li class="parent-menu">
6880            <a href="/pages/vision"><strong>文化理念</strong></a></li>                                    </ul>
6881                                </div>
6882                                                            <div class="col-sm-4">
6883                                    <ul>
6884                                        <li class="parent-menu">
6885            <a href="/pages/partnerships"><strong>合作夥伴</strong></a></li><li class="child-menu"><a href="/pages/PandeMuerto">2025 聯名款 早鳥預購</a></li>                                    </ul>
6886                                </div>
6887                                                    </div>
6888                    </div>
6889
6890                                </li>
6891                    <li class="menu-item-has-children">
6892                <a href="/blogs/new">
6893                    所有文章                                    </a>
6894                                    <div class="sub-menu" style="min-width:480px">
6895                        <div class="row">
6896                                                            <div class="col-sm-6">
6897                                    <ul>
6898                                        <li class="parent-menu">
6899            <a href="/blogs/news"><strong>公告資訊</strong></a></li><li class="child-menu"><a href="/blogs/Activity">最新活動</a></li><li class="child-menu"><a href="/blogs/DayoftheDead">2026秋季活動|南瓜與亡靈們的高雄嘉年華</a></li>                                    </ul>
6900                                </div>
6901                                                            <div class="col-sm-6">
6902                                    <ul>
6903                                        <li class="parent-menu">
6904            <a href="/blogs/mexicanculture"><strong>墨西哥文化</strong></a></li><li class="child-menu"><a href="/blogs/cacao-history">可可筆記</a></li><li class="child-menu"><a href="/pages/cacao">可可歷史|最初的巧克力</a></li>                                    </ul>
6905                                </div>
6906                                                    </div>
6907                    </div>
6908
6909                                </li>
6910                    <li class="menu-item-has-children">
6911                <a href="/categories/Food-Dining">
6912                    美食內容                                    </a>
6913                                    <div class="sub-menu" style="min-width:720px">
6914                        <div class="row">
6915                                                            <div class="col-sm-4">
6916                                    <ul>
6917                                        <li class="parent-menu">
6918            <a href="/categories/seasonal"><strong>★季節限定</strong></a></li><li class="parent-menu">
6919            <a href="/categories/Allmeals"><strong>▌所有餐點</strong></a></li><li class="child-menu"><a href="/categories/hardshell-taco">酥脆塔可 Hard Shell Taco</a></li><li class="child-menu"><a href="/categories/soft-taco">香軟塔可 Soft Taco</a></li><li class="child-menu"><a href="/categories/fajita">法士達 Fajita</a></li><li class="child-menu"><a href="/categories/burrito">墨西哥捲 Burrito</a></li><li class="child-menu"><a href="/categories/enchilada">安琪拉達 Enchilada</a></li><li class="child-menu"><a href="/categories/quesadillas">起司餅 Quesadillas</a></li><li class="child-menu"><a href="/categories/nachos">那求斯 Nachos</a></li><li class="child-menu"><a href="/categories/sauce">配料 Sauce</a></li><li class="child-menu"><a href="/categories/finger-food">炸物 下酒菜 Finger Food</a></li><li class="child-menu"><a href="/categories/childrens-meal">兒童套餐</a></li><li class="child-menu"><a href="/categories/dessert">甜點</a></li>                                    </ul>
6920                                </div>
6921                                                            <div class="col-sm-4">
6922                                    <ul>
6923                                        <li class="parent-menu">
6924            <a href="/categories/valuepackage"><strong>★超值套餐</strong></a></li><li class="parent-menu">
6925            <a href="/categories/drinks"><strong>飲品</strong></a></li><li class="child-menu"><a href="/categories/Jarritos">超人氣水果氣泡飲Jarritos</a></li><li class="child-menu">
6925<a href="/categories/alcohol-free">無酒精</a></li>                                    </ul>
6926                                </div>
6927                                                            <div class="col-sm-4">
6928                                    <ul>
6929                                        <li class="parent-menu">
6930            <a href="/categories/popularity"><strong>★店內人氣</strong></a></li><li class="parent-menu">
6931            <a href="https://shop.ichefpos.com/store/0gAV6vZh/ordering"><strong>菜單|Menu</strong></a></li>                                    </ul>
6932                                </div>
6933                                                    </div>
6934                    </div>
6935
6936                                </li>
6937                    <li>
6938                <a href="/reservation">線上預約</a>
6939            </li>
6940                    <li class="menu-item-has-children">
6941                <a href="/pages/MicasitaReptile">
6942                    Mi Casita Reptile|爬蟲生態美學                                    </a>
6943                                    <div class="sub-menu" style="min-width:480px">
6944                        <div class="row">
6945                                                            <div class="col-sm-6">
6946                                    <ul>
6947                                        <li class="parent-menu">
6948            <a href="/blogs/reptile"><strong>爬蟲生態觀察筆記</strong></a></li>                                    </ul>
6949                                </div>
6950                                                            <div class="col-sm-6">
6951                                    <ul>
6952                                        <li class="parent-menu">
6953            <a href="/categories/ReptileSeries"><strong>所有爬蟲</strong></a></li><li class="child-menu"><a href="/categories/monitorlizard">蜥蜴類|Lizards</a></li><li class="child-menu"><a href="/categories/gecko">守宮類|Geckos</a></li><li class="child-menu"><a href="/categories/Snakes">蛇類|Snakes</a></li>                                    </ul>
6954                                </div>
6955                                                    </div>
6956                    </div>
6957
6958                                </li>
6959                    <li class="menu-item-has-children">
6960                <a href="/contact">
6961                    聯絡我們                                    </a>
6962                                    <div class="sub-menu" style="min-width:240px">
6963                        <div class="row">
6964                                                            <div class="col-sm-12">
6965                                    <ul>
6966                                        <li><a href="/stores">營業據點</a></li><li><a href="/pages/terms">購物需知|訂購政策</a></li>                                    </ul>
6967                                </div>
6968                                                    </div>
6969                    </div>
6970                                </li>
6971        </ul>
6972</nav>
6973                            </div>
6974                                            </div>
6975                </div>
6976            </div>
6977        </div>
6978    </header>
6979</div>
6980
6981<header id="header-toolbar" class="header toolbar">
6982    <div class="container">
6983        <div class="inner">
6984            <div class="box-control">
6985                <div class="box-search show-icon">
6986                <a class="member-link" href="/search" aria-label="搜尋商品">
6987                    <span class="icon fa fa-search" aria-hidden="true"></span>
6988                </a>
6989            </div>
6990                    <div class="box-settings">
6991                <a class="member-link" href="#" data-toggle="modal"
6992                   data-target="#globalSettingsModal" aria-label="語系與幣別設定">
6993                    <span class="icon fa fa-globe"></span>
6994                </a>
6995            </div>
6996                    <div class="box-settings member-menu">
6997                            <a class="member-link" href="/login?redirect=/stores"
6998                   aria-label="登入">
6999                    <span class="icon fa fa-user-circle"></span>
7000                </a>
7001                <ul class="sub-menu">
7002                                            <li>
7003                                                            <a rel="nofollow" href="/orders">訂單查詢</a>
7004                                                    </li>
7005                                                <li><a href="/login?redirect=/stores">登入/註冊</a></li>
7006                            <li><a rel="nofollow" href="/password/forget">重設密碼</a>
7007                            </li>
7008                                        </ul>
7009                    </div>
7010            <div class="mini-cart">
7011                        <a class="cart-link" rel="nofollow"
7012               href="/checkout" aria-label="購物車">
7013                <span class="icon fa fa-cart-shopping" aria-hidden="true"></span>
7014                <span class="cart-count count d-none" aria-hidden="true"></span>
7015            </a>
7016                            <div class="show-shopping-cart cart-bag"></div>
7017                    </div>
7018    </div>
7019        </div>
7020    </div>
7021</header>
7022<header id="header" class="header style3">
7023    <div class="container">
7024        <div class="main-menu-wapper">
7025            <div class="row">
7026                <div class="col-sm-3 logo-wapper">
7027                    <div class="logo">
7028                        <a href="/">
7029                            <img src="https://img.gogoshop.cloud/e8d5ce86/4k3A0njexOa.jpg" alt="米卡希達墨西哥餐廳|Mi Casita Mexican Restaurant |高雄餐廳推薦" loading="eager" fetchpriority="high">                        </a>
7030                    </div>
7031                </div>
7032                <div class="col-sm-9 menu-wapper">
7033                    <div class="top-header">
7034                        <div class="slogan">Un taco, un alma.高雄塔可|道地墨西哥餐廳|高雄美食|</div>
7035                    </div>
7036                    <nav class="main-menu-nav" aria-label="主選單">
7037<ul class="boutique-nav main-menu">
7038                <li class="menu-item-has-children">
7039                <a href="/pages/about">
7040                    關於米卡希達                                    </a>
7041                                    <div class="sub-menu" style="min-width:720px">
7042                        <div class="row">
7043                                                            <div class="col-sm-4">
7044                                    <ul>
7045                                        <li class="parent-menu">
7046            <a href="/pages/MiCasita"><strong>品牌故事</strong></a></li>                                    </ul>
7047                                </div>
7048                                                            <div class="col-sm-4">
7049                                    <ul>
7050                                        <li class="parent-menu">
7051            <a href="/pages/vision"><strong>文化理念</strong></a></li>                                    </ul>
7052                                </div>
7053                                                            <div class="col-sm-4">
7054                                    <ul>
7055                                        <li class="parent-menu">
7056            <a href="/pages/partnerships"><strong>合作夥伴</strong></a></li><li class="child-menu"><a href="/pages/PandeMuerto">2025 聯名款 早鳥預購</a></li>                                    </ul>
7057                                </div>
7058                                                    </div>
7059                    </div>
7060
7061                                </li>
7062                    <li class="menu-item-has-children">
7063                <a href="/blogs/new">
7064                    所有文章                                    </a>
7065                                    <div class="sub-menu" style="min-width:480px">
7066                        <div class="row">
7067                                                            <div class="col-sm-6">
7068                                    <ul>
7069                                        <li class="parent-menu">
7070            <a href="/blogs/news"><strong>公告資訊</strong></a></li><li class="child-menu"><a href="/blogs/Activity">最新活動</a></li><li class="child-menu"><a href="/blogs/DayoftheDead">2026秋季活動|南瓜與亡靈們的高雄嘉年華</a></li>                                    </ul>
7071                                </div>
7072                                                            <div class="col-sm-6">
7073                                    <ul>
7074                                        <li class="parent-menu">
7075            <a href="/blogs/mexicanculture"><strong>墨西哥文化</strong></a></li><li class="child-menu"><a href="/blogs/cacao-history">可可筆記</a></li><li class="child-menu"><a href="/pages/cacao">可可歷史|最初的巧克力</a></li>                                    </ul>
7076                                </div>
7077                                                    </div>
7078                    </div>
7079
7080                                </li>
7081                    <li class="menu-item-has-children">
7082                <a href="/categories/Food-Dining">
7083                    美食內容                                    </a>
7084                                    <div class="sub-menu" style="min-width:720px">
7085                        <div class="row">
7086                                                            <div class="col-sm-4">
7087                                    <ul>
7088                                        <li class="parent-menu">
7089            <a href="/categories/seasonal"><strong>★季節限定</strong></a></li><li class="parent-menu">
7090            <a href="/categories/Allmeals"><strong>▌所有餐點</strong></a></li><li class="child-menu"><a href="/categories/hardshell-taco">酥脆塔可 Hard Shell Taco</a></li><li class="child-menu"><a href="/categories/soft-taco">香軟塔可 Soft Taco</a></li><li class="child-menu"><a href="/categories/fajita">法士達 Fajita</a></li><li class="child-menu"><a href="/categories/burrito">墨西哥捲 Burrito</a></li><li class="child-menu"><a href="/categories/enchilada">安琪拉達 Enchilada</a></li><li class="child-menu"><a href="/categories/quesadillas">起司餅 Quesadillas</a></li><li class="child-menu"><a href="/categories/nachos">那求斯 Nachos</a></li><li class="child-menu"><a href="/categories/sauce">配料 Sauce</a></li><li class="child-menu"><a href="/categories/finger-food">炸物 下酒菜 Finger Food</a></li><li class="child-menu"><a href="/categories/childrens-meal">兒童套餐</a></li><li class="child-menu"><a href="/categories/dessert">甜點</a></li>                                    </ul>
7091                                </div>
7092                                                            <div class="col-sm-4">
7093                                    <ul>
7094                                        <li class="parent-menu">
7095            <a href="/categories/valuepackage"><strong>★超值套餐</strong></a></li><li class="parent-menu">
7096            <a href="/categories/drinks"><strong>飲品</strong></a></li><li class="child-menu"><a href="/categories/Jarritos">超人氣水果氣泡飲Jarritos</a></li><li class="child-menu">
7096<a href="/categories/alcohol-free">無酒精</a></li>                                    </ul>
7097                                </div>
7098                                                            <div class="col-sm-4">
7099                                    <ul>
7100                                        <li class="parent-menu">
7101            <a href="/categories/popularity"><strong>★店內人氣</strong></a></li><li class="parent-menu">
7102            <a href="https://shop.ichefpos.com/store/0gAV6vZh/ordering"><strong>菜單|Menu</strong></a></li>                                    </ul>
7103                                </div>
7104                                                    </div>
7105                    </div>
7106
7107                                </li>
7108                    <li>
7109                <a href="/reservation">線上預約</a>
7110            </li>
7111                    <li class="menu-item-has-children">
7112                <a href="/pages/MicasitaReptile">
7113                    Mi Casita Reptile|爬蟲生態美學                                    </a>
7114                                    <div class="sub-menu" style="min-width:480px">
7115                        <div class="row">
7116                                                            <div class="col-sm-6">
7117                                    <ul>
7118                                        <li class="parent-menu">
7119            <a href="/blogs/reptile"><strong>爬蟲生態觀察筆記</strong></a></li>                                    </ul>
7120                                </div>
7121                                                            <div class="col-sm-6">
7122                                    <ul>
7123                                        <li class="parent-menu">
7124            <a href="/categories/ReptileSeries"><strong>所有爬蟲</strong></a></li><li class="child-menu"><a href="/categories/monitorlizard">蜥蜴類|Lizards</a></li><li class="child-menu"><a href="/categories/gecko">守宮類|Geckos</a></li><li class="child-menu"><a href="/categories/Snakes">蛇類|Snakes</a></li>                                    </ul>
7125                                </div>
7126                                                    </div>
7127                    </div>
7128
7129                                </li>
7130                    <li class="menu-item-has-children">
7131                <a href="/contact">
7132                    聯絡我們                                    </a>
7133                                    <div class="sub-menu" style="min-width:240px">
7134                        <div class="row">
7135                                                            <div class="col-sm-12">
7136                                    <ul>
7137                                        <li><a href="/stores">營業據點</a></li><li><a href="/pages/terms">購物需知|訂購政策</a></li>                                    </ul>
7138                                </div>
7139                                                    </div>
7140                    </div>
7141                                </li>
7142        </ul>
7143</nav>
7144                </div>
7145            </div>
7146        </div>
7147    </div>
7148</header>
7149<div class="main-container list-blogs">
7150    <div class="container">
7151        <div class="shop-top">
7152    <nav id="breadcrumbs" class="breadcrumbs" aria-label="麵包屑導覽">
7153        <a href="/">首頁</a><a href="/contact" data-event-category="breadcrumbs" data-event-label="聯絡我們">聯絡我們</a><a href="/stores" class="last" data-event-category="breadcrumbs" data-event-label="營業據點">營業據點</a>    </nav>
7154            </div>
7155        <div class="row">
7156                            <div class="col-12 col-sm-4 col-md-3">
7157                    <div class="widget widget_product_categories">
7158                        <nav class="sidebar-nav" aria-label="側邊選單">
7159    <h1 class="widget-title">聯絡我們</h1>
7160    <ul class="product-categories margin-bottom-30">
7161                                    <li  class="current-cat">
7162                    <a href="/stores">營業據點</a>
7163                </li>
7164                                        <li >
7165                    <a href="/pages/terms">購物需知|訂購政策</a>
7166                </li>
7167                </ul>
7168</nav>
7169                    </div>
7170                </div>
7171                        <main class="main-content col-12 col-sm-8 col-md-9">
7172                                <h3 class="pt-4 pb-5 text-center">
7172高雄米卡希達墨西哥餐廳<a name="area-690d5a9f1300e837"></a></h3>
7173<div class="container">
7174    <div class="product-list-grid desktop-columns-2 tablet-columns-2 mobile-columns-1 row">
7175                    <div class="product-item col-sm-6">
7176                <div class="blog-item">
7177                    <div class="post-thumbnail">
7178                        <a name="store-690d63268900ee7f" >
7179                                                    </a>
7180                    </div>
7181                    <a class="blog-title">
7182                        <a >高雄美食|米卡希達墨西哥餐廳</a>
7183                    </a>
7184                    <div class="blog-short-desc">
7185                        <!--
7186  Mi Casita 米卡希達|高雄營業據點與最新營業時間
7187  GoGoShop:請切換至 HTML/原始碼模式後完整貼上
7188  最後更新:2026-08-17
7189-->
7190<section lang="zh-Hant-TW" style="box-sizing: border-box; width: 100%; margin: 0; padding: 54px 16px; background-color: #f4efe6; background-image: linear-gradient(45deg,rgba(177,139,75,.045) 25%,transparent 25%),linear-gradient(-45deg,rgba(177,139,75,.045) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(177,139,75,.045) 75%),linear-gradient(-45deg,transparent 75%,rgba(177,139,75,.045) 75%); background-size: 28px 28px; background-position: 0 0,0 14px,14px -14px,-14px 0; color: #302e29; font-family: 'Noto Sans TC','PingFang TC','Microsoft JhengHei',Arial,sans-serif; line-height: 1.8; -webkit-font-smoothing: antialiased; word-break: break-word;" aria-labelledby="micasita-location-title">
7191<article style="box-sizing: border-box; width: 100%; max-width: 760px; margin: 0 auto; overflow: hidden; border: 1px solid #cdb98f; background: #fffdf9; box-shadow: 0 24px 60px rgba(48,40,27,.14);"><!-- 主視覺 --><header style="box-sizing: border-box; position: relative; padding: 58px 7% 52px; overflow: hidden; background: linear-gradient(145deg,#112a22 0%,#1d4032 60%,#274d3c 100%); color: #fff; text-align: center;">
7192<div style="position: absolute; inset: 14px; border: 1px solid rgba(214,181,113,.36); pointer-events: none;" aria-hidden="true"><br /></div>
7193<div style="position: absolute; top: -70px; right: -65px; width: 190px; height: 190px; border: 1px solid rgba(214,181,113,.18); border-radius: 50%; box-shadow: 0 0 0 22px rgba(214,181,113,.035),0 0 0 44px rgba(214,181,113,.025);" aria-hidden="true"><br /></div>
7194<p style="position: relative; margin: 0 0 12px; color: #d9bd82; font-family: Georgia,'Times New Roman',serif; font-size: 12px; font-weight: bold; letter-spacing: 3px; text-transform: uppercase;">Kaohsiung &middot; Taiwan</p>
7195<h1 id="micasita-location-title" style="position: relative; margin: 0; color: #fffaf0; font-family: Georgia,'Noto Serif TC','Times New Roman',serif; font-size: clamp(29px,6vw,43px); font-weight: 500; line-height: 1.35; letter-spacing: 1px;">高雄米卡希達墨西哥餐廳</h1>
7196<div style="position: relative; width: 46px; height: 1px; margin: 22px auto; background: #d6b571;" aria-hidden="true"><br /></div>
7197<p style="position: relative; margin: 0; color: #dce5df; font-size: 14px; letter-spacing: 1.4px;">Mi Casita Mexican Restaurant</p>
7198</header>
7199<div style="box-sizing: border-box; padding: 34px 6.5% 42px;"><!-- 地址摘要 -->
7200<section style="box-sizing: border-box; margin: 0 0 24px; padding: 21px 22px; border-left: 3px solid #a84532; background: #f8f2e8;" aria-label="餐廳地址">
7201<p style="margin: 0 0 5px; color: #8e6a2d; font-size: 11px; font-weight: 800; letter-spacing: 2px;">LOCATION|餐廳位置</p>
7202<address style="margin: 0; color: #263c33; font-size: 16px; font-style: normal; font-weight: bold; line-height: 1.8;">高雄市苓雅區新光路140巷39號</address>
7203<p style="margin: 3px 0 0; color: #746e64; font-size: 13px;">鄰近高雄三多商圈與高雄展覽館生活圈</p>
7204</section>
7205<!-- 最新營業時間 -->
7206<section style="box-sizing: border-box; margin: 0 0 24px; border: 1px solid #ded1b8; background: #fff;" aria-labelledby="micasita-hours-title">
7207<div style="box-sizing: border-box; padding: 20px 22px; border-bottom: 1px solid #ded1b8; background: #f6f0e5;">
7208<p style="margin: 0 0 4px; color: #a84532; font-size: 11px; font-weight: 800; letter-spacing: 2px;">OPENING HOURS</p>
7209<h2 id="micasita-hours-title" style="margin: 0; color: #17372c; font-family: Georgia,'Noto Serif TC',serif; font-size: 24px; font-weight: 500; line-height: 1.4;">最新營業時間</h2>
7210</div>
7211<div style="box-sizing: border-box; padding: 4px 22px 8px;">
7212<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 18px; padding: 15px 0; border-bottom: 1px solid #eee7db;"><strong style="min-width: 78px; color: #213a31; font-size: 15px;">星期日</strong> <span style="color: #514c44; font-size: 14px; text-align: right;"><time datetime="11:00">11:00</time>&ndash;<time datetime="15:00">15:00</time> <span style="color: #b79a65;">/</span> <time datetime="17:00">17:00</time>&ndash;<time datetime="20:30">20:30</time></span></div>
7213<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 18px; padding: 15px 0; border-bottom: 1px solid #eee7db;"><strong style="min-width: 78px; color: #213a31; font-size: 15px;">星期一</strong> <span style="color: #514c44; font-size: 14px; text-align: right;"><time datetime="17:00">17:00</time>&ndash;<time datetime="20:30">20:30</time></span></div>
7214<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 18px; padding: 15px 0; border-bottom: 1px solid #eee7db;"><strong style="min-width: 78px; color: #213a31; font-size: 15px;">星期二</strong> <span style="color: #514c44; font-size: 14px; text-align: right;"><time datetime="17:00">17:00</time>&ndash;<time datetime="20:30">20:30</time></span></div>
7215<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 18px; padding: 15px 0; border-bottom: 1px solid #eee7db;"><strong style="min-width: 78px; color: #213a31; font-size: 15px;">星期三</strong> <span style="display: inline-block; padding: 3px 12px; border: 1px solid #c36a58; background: #fff8f5; color: #9f3e2d; font-size: 13px; font-weight: 800; letter-spacing: 1px;">
7215公休</span></div>
7216<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 18px; padding: 15px 0; border-bottom: 1px solid #eee7db;"><strong style="min-width: 78px; color: #213a31; font-size: 15px;">星期四</strong> <span style="color: #514c44; font-size: 14px; text-align: right;"><time datetime="11:00">11:00</time>&ndash;<time datetime="14:30">14:30</time> <span style="color: #b79a65;">/</span> <time datetime="17:00">17:00</time>&ndash;<time datetime="20:30">20:30</time></span></div>
7217<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 18px; padding: 15px 0; border-bottom: 1px solid #eee7db;"><strong style="min-width: 78px; color: #213a31; font-size: 15px;">星期五</strong> <span style="color: #514c44; font-size: 14px; text-align: right;"><time datetime="11:00">11:00</time>&ndash;<time datetime="15:00">15:00</time> <span style="color: #b79a65;">/</span> <time datetime="17:00">17:00</time>&ndash;<time datetime="21:00">21:00</time></span></div>
7218<div style="display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 5px 18px; padding: 15px 0;"><strong style="min-width: 78px; color: #213a31; font-size: 15px;">星期六</strong> <span style="color: #514c44; font-size: 14px; text-align: right;"><time datetime="11:00">11:00</time>&ndash;<time datetime="15:00">15:00</time> <span style="color: #b79a65;">/</span> <time datetime="17:00">17:00</time>&ndash;<time datetime="21:00">21:00</time></span></div>
7219</div>
7220</section>
7221<!-- 聯絡資訊 -->
7222<section style="box-sizing: border-box; margin: 0 0 24px; padding: 25px 22px; background: #17372c; color: #fff;" aria-labelledby="micasita-contact-title">
7223<p style="margin: 0 0 4px; color: #d6b571; font-size: 11px; font-weight: 800; letter-spacing: 2px;">CONTACT</p>
7224<h2 id="micasita-contact-title" style="margin: 0 0 18px; color: #fffaf1; font-family: Georgia,'Noto Serif TC',serif; font-size: 23px; font-weight: 500;">聯絡米卡希達</h2>
7225<div style="padding: 12px 0; border-top: 1px solid rgba(255,255,255,.15);"><span style="display: inline-block; min-width: 82px; color: #d6b571; font-size: 13px; font-weight: bold;">電話</span> <a style="color: #fff; text-decoration: none; font-size: 15px;" href="tel:+88672691433">07-269-1433</a></div>
7226<div style="padding: 12px 0; border-top: 1px solid rgba(255,255,255,.15);"><span style="display: inline-block; min-width: 82px; color: #d6b571; font-size: 13px; font-weight: bold;">官方網站</span> <a style="color: #fff; text-decoration: none; font-size: 14px;" href="https://www.micasita.com.tw" target="_blank" rel="noopener noreferrer">www.micasita.com.tw</a></div>
7227<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;"><a style="box-sizing: border-box; flex: 1 1 150px; padding: 12px 16px; border: 1px solid #d6b571; background: #d6b571; color: #17372c; text-align: center; text-decoration: none; font-size: 14px; font-weight: 800;" href="tel:+88672691433" aria-label="致電米卡希達">立即致電</a> <a style="box-sizing: border-box; flex: 1 1 150px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.48); background: transparent; color: #fff; text-align: center; text-decoration: none; font-size: 14px; font-weight: 800;" href="https://www.micasita.com.tw/reservation" target="_blank" rel="noopener noreferrer">線上預約</a> <a style="box-sizing: border-box; flex: 1 1 150px; padding: 12px 16px; border: 1px solid rgba(255,255,255,.48); background: transparent; color: #fff; text-align: center; text-decoration: none; font-size: 14px; font-weight: 800;" href="https://www.micasita.com.tw/contact" target="_blank" rel="noopener noreferrer">官方聯絡方式</a></div>
7228</section>
7229<!-- Google 地圖 -->
7230<section style="box-sizing: border-box; overflow: hidden; border: 1px solid #ded1b8; background: #fff;" aria-labelledby="micasita-map-title">
7231<div style="box-sizing: border-box; padding: 18px 20px; background: #f6f0e5; border-bottom: 1px solid #ded1b8;">
7232<h2 id="micasita-map-title" style="margin: 0; color: #17372c; font-family: Georgia,'Noto Serif TC',serif; font-size: 21px; font-weight: 500;">前往米卡希達</h2>
7233</div>
7234<iframe style="display: block; width: 100%; border: 0;
7234" title="米卡希達墨西哥餐廳 Google 地圖" src="https://www.google.com/maps?q=高雄市苓雅區新光路140巷39號&amp;output=embed" width="100%" height="320" allowfullscreen=""></iframe> <a style="display: block; box-sizing: border-box; padding: 13px 18px; background: #fff; color: #a84532; text-align: center; text-decoration: none; font-size: 14px; font-weight: 800;" href="https://www.google.com/maps/search/?api=1&amp;query=高雄市苓雅區新光路140巷39號" target="_blank" rel="noopener noreferrer">開啟 Google 地圖導航 &rarr;</a></section>
7235<p style="margin: 22px 0 0; color: #7c7469; font-size: 12px; line-height: 1.8; text-align: center;">特殊節日、包場或臨時營業調整,請以米卡希達官網最新公告及餐廳回覆為準。</p>
7236</div>
7237<footer style="box-sizing: border-box; padding: 18px 6.5%; border-top: 1px solid #d8c6a2; background: #efe5d4; color: #776c5d; font-size: 11px; letter-spacing: .4px; text-align: center;">&copy; 2026 Mi Casita Mexican Restaurant &middot; 資料更新:2026-08-17</footer></article>
7238</section>
7239<!-- Restaurant 結構化資料|營業時間已與畫面同步 -->                    </div>
7240                </div>
7241            </div>
7242            </div>
7243</div>
7244            </main>
7245        </div>
7246    </div>
7247</div>
7248    <footer class="footer style2">
7249        <div class="footer-top">
7250            <div class="container">
7251                <div class="row flex-flow">
7252                                            <div class="col-12 col-md-6 footer-sidebar">
7253                            <div
7254                                class="widget footer-contact">
7255                                                                    <h3 class="widget-title">聯絡資訊</h3>
7256                                                                <div class="content">
7257                                                                            <ul>
7258                                                                                            <li>
7259                                                    <a href="/">
7260                                                        米卡希達廚坊 MiCASITA MEXICAN RESTAURANT                                                    </a>
7261                                                </li>
7262                                                                                                                                        <li>
7263                                                    <a href="/">
7264                                                        統一編號 38727880                                                    </a>
7265                                                </li>
7266                                                                                                                                        <li>
7267                                                    <a href="tel:07-2691433">
7268                                                        07-2691433                                                    </a>
7269                                                </li>
7270                                                                                                                                        <li>
7271                                                    <a href="mailto:[email protected]">
7272                                                        [email protected]                                                    </a>
7273                                                </li>
7274                                                                                                                                        <li>
7275                                                    <a href="https://www.google.com/maps/place/高雄市苓雅區新光路140巷39號">
7276                                                        高雄市苓雅區新光路140巷39號                                                    </a>
7277                                                </li>
7278                                                                                    </ul>
7279                                                                    </div>
7280                            </div>
7281                        </div>
7282                                            <div class="col-12 col-md-6 footer-sidebar">
7283                            <div
7284                                class="widget footer-our-service">
7285                                                                    <h3 class="widget-title">客服中心</h3>
7286                                                                <div class="content">
7287                                                                            <nav aria-label="客服中心">
7288                                            <ul>
7289                                                                                                    <li>
7290                                                        <a href="/pages/privacy">隱私權聲明|米卡希達</a>
7291                                                    </li>
7292                                                                                                    <li>
7293                                                        <a href="/pages/service">服務條款|米卡希達</a>
7294                                                    </li>
7295                                                                                                    <li>
7296                                                        <a href="/pages/return">退換政策|米卡希達</a>
7297                                                    </li>
7298                                                                                            </ul>
7299                                        </nav>
7300                                                                    </div>
7301                            </div>
7302                        </div>
7303                                    </div>
7304            </div>
7305        </div>
7306                    <div class="footer-bottom">
7307                <div class="container">
7308                    <div class="payment">
7309                        <span>米卡希達廚坊 MiCASITA MEXICAN RESTAURANT</span>
7310                    </div>
7311                </div>
7312            </div>
7313            </footer>
7314</div>
7315<div id="quick-view-modal" class="modal product-modal fade">
7316    <div class="modal-dialog" role="document">
7317        <div class="modal-content"></div>
7318    </div>
7319</div>
7320<script src="https://cdn.gogoshop.cloud/_/cache/app.zh-TW.v1788789495.js"></script>
7320<!-- 語系與幣別設定 Modal -->
7321<div class="modal fade" id="globalSettingsModal" tabindex="-1" aria-labelledby="globalSettingsModalLabel"
7322     aria-hidden="true">
7323    <div class="modal-dialog">
7324        <div class="modal-content">
7325            <div class="modal-header">
7326                <h5 class="modal-title text-dark">語系與貨幣設定</h5>
7327                <button type="button" class="btn close" data-dismiss="modal" aria-label="Close">
7328                    <span aria-hidden="true">&times;</span>
7329                </button>
7330            </div>
7331            <div class="modal-body">
7332                <div class="form-group">
7333                    <h6 class="text-secondary">選擇語系</h6>
7334                    <div class="d-flex flex-wrap gap-2">
7335                                                    <span
7336                                class="badge rounded-pill bg-dark locale-badge mr-1 mb-1"
7337                                data-value="zh-TW"
7338                                style="cursor: pointer; padding: 0.5rem 1rem; font-size: 0.9rem;">
7339                                        繁體中文                                    </span>
7340                                                    <span
7341                                class="badge rounded-pill bg-light bg-opacity-25 text-dark locale-badge mr-1 mb-1"
7342                                data-value="en"
7343                                style="cursor: pointer; padding: 0.5rem 1rem; font-size: 0.9rem;">
7344                                        English                                    </span>
7345                                            </div>
7346                    <input type="hidden" name="locale" id="selectedLocale"
7347                           value="zh-TW">
7348                </div>
7349                <div class="form-group">
7350                    <h6 class="text-secondary">選擇貨幣</h6>
7351                    <div class="d-flex flex-wrap gap-2">
7352                                                    <span
7353                                class="badge rounded-pill bg-dark currency-badge mr-1 mb-1"
7354                                data-value="TWD"
7355                                style="cursor: pointer; padding: 0.5rem 1rem; font-size: 0.9rem;">
7356                                        新台幣                                    </span>
7357                                            </div>
7358                    <input type="hidden" name="currency" id="selectedCurrency"
7359                           value="TWD">
7360                </div>
7361            </div>
7362            <div class="modal-footer">
7363                <button type="button" class="btn btn-dark" id="applyLocaleSettings">
7364                    送出                </button>
7365            </div>
7366        </div>
7367    </div>
7368</div>
7369
7370<script>
7371    document.addEventListener('DOMContentLoaded', function () {
7372        // 處理語系 badge 點擊
7373        const localeBadges = document.querySelectorAll('.locale-badge');
7374        localeBadges.forEach(badge => {
7375            badge.addEventListener('click', function () {
7376                // 移除所有語系 badge 的選中狀態
7377                localeBadges.forEach(b => {
7378                    b.classList.remove('bg-dark', 'text-white');
7379                    b.classList.add('bg-light', 'bg-opacity-25', 'text-dark');
7380                });
7381                // 設定當前 badge 為選中狀態
7382                this.classList.remove('bg-light', 'bg-opacity-25', 'text-dark');
7383                this.classList.add('bg-dark', 'text-white');
7384                // 更新隱藏欄位的值
7385                document.getElementById('selectedLocale').value = this.dataset.value;
7386            });
7387        });
7388
7389        // 處理幣別 badge 點擊
7390        const currencyBadges = document.querySelectorAll('.currency-badge');
7391        currencyBadges.forEach(badge => {
7392            badge.addEventListener('click', function () {
7393                // 移除所有幣別 badge 的選中狀態
7394                currencyBadges.forEach(b => {
7395                    b.classList.remove('bg-dark', 'text-white');
7396                    b.classList.add('bg-light', 'bg-opacity-25', 'text-dark');
7397                });
7398                // 設定當前 badge 為選中狀態
7399                this.classList.remove('bg-light', 'bg-opacity-25', 'text-dark');
7400                this.classList.add('bg-dark', 'text-white');
7401                // 更新隱藏欄位的值
7402                document.getElementById('selectedCurrency').value = this.dataset.value;
7403            });
7404        });
7405
7406        // 處理確定按鈕點擊
7407        const applyButton = document.getElementById('applyLocaleSettings');
7408        if (applyButton) {
7409            applyButton.addEventListener('click', function () {
7410                const selectedLocale = document.getElementById('selectedLocale').value;
7411                const selectedCurrency = document.getElementById('selectedCurrency').value;
7412
7413                // 建立 URL 參數
7414                const params = new URLSearchParams(window.location.search);
7415                if (selectedLocale) {
7416                    params.set('locale', selectedLocale);
7417                }
7418                if (selectedCurrency) {
7419                    params.set('currency', selectedCurrency);
7420                }
7421
7422                // 重新導向到當前頁面並帶上新的參數
7423                window.location.href = window.location.pathname + '?' + params.toString();
7424            });
7425        }
7426    });
7427</script>
7427
7428   <style>
7429    .social-button {
7430        background-color: #f4c812;
7431    }
7432</style>
7433
7434<div class="social-float">
7435    <div class="social-items">
7436                    <a href="https://line.me/ti/p/@micasita39"
7437               target="_blank" class="social-item line" data-toggle="tooltip" data-placement="left" data-title="LINE"
7438               aria-label="LINE">
7439                <i class="fab fa-line" aria-hidden="true"></i>
7440            </a>
7441                            <a href="https://www.facebook.com/MexicanrestaurantcosinaMexicana" target="_blank"
7442               class="social-item facebook" data-toggle="tooltip" data-placement="left" data-title="Facebook"
7443               aria-label="Facebook">
7444                <i class="fab fa-facebook-f" aria-hidden="true"></i>
7445            </a>
7446                            <a href="https://www.instagram.com/@micasita_mexican_restaurant" target="_blank" class="social-item instagram"
7447               data-toggle="tooltip" data-placement="left" data-title="Instagram" aria-label="Instagram">
7448                <i class="fab fa-instagram" aria-hidden="true"></i>
7449            </a>
7450                                    <a href="/contact" class="social-item email"
7451               data-toggle="tooltip" data-placement="left" data-title="Email" aria-label="Email">
7452                <i class="fas fa-envelope" aria-hidden="true"></i>
7453            </a>
7454                            <a href="tel:07-2691433" class="social-item phone" data-toggle="tooltip" data-placement="left"
7455               data-title="聯絡電話" aria-label="聯絡電話">
7456                <i class="fas fa-phone" aria-hidden="true"></i>
7457            </a>
7458            </div>
7459    <div class="social-button" data-toggle="tooltip" data-placement="left" data-title="客服"
7460         aria-label="客服" role="button">
7461        <i class="fas fa-comment" aria-hidden="true"></i>
7462        <i class="fas fa-times" aria-hidden="true"></i>
7463    </div>
7464</div>
7465<a href="#" class="scroll_top" title="移至上方"><i class="fa fa-arrow-up"></i></a></body>
7466</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.