/* =========================================================
   商品詳細頁已恢復使用系統原始 CSS
   已移除 products/info.php 的自訂版型、Swiper、側欄、頁籤與推薦商品樣式。
   首頁 Swiper 動畫已限定在 .pageIndex .swiper-banner，不再影響商品頁。
   ========================================================= */

@charset "utf-8";

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;500;700;900&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho&display=swap");

/* ========================================================= | 烏魚子新案件｜依產品包裝色系調整 | 主色：珊瑚紅／霧銀灰／墨黑灰／暖白 | ========================================================= */

:root {
  --brand-coral: #EF6D64;
  --brand-coral-dark: #C6534D;
  --brand-silver: #D7D6DA;
  --brand-silver-light: #F3F1F0;
  --brand-ink: #3B393A;
  --brand-taupe: #A58F89;
  --brand-white: #FFFFFF;
}
#content_main { margin: 0; }
.bannerindex { position: static; height: auto; }
.swiper-banner { position: static; margin: 0; height: auto; }
.pageIndex .swiper-banner .swiper-banner .swiper-slide img { width: 100%; height: auto; }

@media screen and (max-width: 768px) {
  .bannerindex { padding: 0; margin: 0; }
}
.pageIndex .swiper-banner .swiper-slide img { height: auto; }

/* 開場動畫 */

.pageIndex #page::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: transparent;
  backdrop-filter: grayscale(1) blur(7px);
  z-index: 1000000000000010000000;
  animation: action-bg 4.3s cubic-bezier(0.73, 0.08, 0.11, 0.99) forwards;
  pointer-events: none;
}
.pageIndex #page::after {
  content: "";
  display: block;
  background-image: url(https://pic03.eapple.com.tw/liouao/LOGO.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 100000000000001000000000;
  transform: translate(-50%,-50%);
  pointer-events: none;
  animation: action-logo 3s cubic-bezier(0.73, 0.08, 0.11, 0.99) forwards;
}
.pageIndex .swiper-banner .swiper-wrapper { transform: scale(0.8); animation: action-banner 5s cubic-bezier(0.73, 0.08, 0.11, 0.99) forwards; }

@keyframes action-bg {
  0% { backdrop-filter: grayscale(1) blur(7px); background-color: #F7F6F4; }
  100% { backdrop-filter: grayscale(0) blur(0px); background-color: transparent; }
}

@keyframes action-banner {
  0% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes action-logo {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

/* --- 1. 核心結構：全寬置中 --- */

.pageIndex .swiper-banner .swiper-slide:before,
.pageIndex .swiper-banner .swiper-slide:after {
  content: "";
  position: absolute;
  z-index: 100;
  pointer-events: none;
  left: 0;
  width: 100%;
  text-align: center;
  opacity: 0;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.8);
  font-family: "Noto Serif TC", serif;
  font-weight: 500;
}


/* --- 4. 手機版 RWD --- */

@media (max-width: 768px) {
  /* 開場大圖依手機螢幕裁切，畫面維持置中 */

  .pageIndex #page::after {
    width: 100vw;
    height: 100dvh;
    padding-bottom: 0;
    background-size: cover;
    background-position: center center;
  }
  .pageIndex .swiper-banner .swiper-slide:before,
.pageIndex .swiper-banner .swiper-slide:after { left: 0; width: 100%; text-align: center; }

  /* 手機版標題往下移，縮短標題與內文之間的空白 */

  .pageIndex .swiper-slide:nth-child(1):after,
.pageIndex .swiper-slide:nth-child(2):after { font-size: 4.5vw; bottom: clamp(52px, 20vw, 90px); }
  .pageIndex .swiper-slide:nth-child(1):before,
.pageIndex .swiper-slide:nth-child(2):before {
    font-size: 3.5vw;
    bottom: clamp(17px, 7vw, 36px);
    width: 90%;
    margin: 0 auto;
    white-space: pre-wrap;
    right: 0;
  }
  @keyframes LiteraryFloat {
    0% { opacity: 0; transform: translateY(20px); letter-spacing: 0px; filter: blur(3px); }
    100% { opacity: 1; transform: translateY(0); letter-spacing: 1px; filter: blur(0); }
  }
}

/* 基本設定 */

.pageIndex .main_part { border-top: 0px solid #ccc; }
.path { display: none; }

/* 按鈕 */

.animated-arrow { background: #8E898B; }

/* header */

.header_area { width: 100%; padding: 0; background: transparent; }
.pageIndex .header_area { position: fixed; width: 100%; padding: 0; }
.main_header_area .container { width: 98%; max-width: 1400px; transition: all ease .3s; }
.header_area.sticky .main_header_area .container { max-width: 1600px; }
.nav-header {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  transition: all ease .3s;
}
.nav-brand { width: 100%; max-width: 120px; }
.header_area.sticky .nav-header { max-width: 160px; }
.main_header_area {
  padding: 0px;
  background: linear-gradient(135deg, rgba(247, 246, 244, 0.96) 0%, rgba(215, 214, 218, 0.94) 55%, rgba(245, 241, 239, 0.96) 100%);
  backdrop-filter: blur(4px);
  box-shadow: 0 8px 24px rgba(59, 57, 58, 0.10);
}
.navigation { padding: 10px 0; }
.stellarnav {
  position: relative;
  width: 100%;
  top: 20px;
  z-index: 99;
  line-height: normal;
}
.stellarnav > ul { font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.stellarnav li.has-sub > a:after { content: none; }
.stellarnav > ul > li > a {
  padding: 0 6px;
  letter-spacing: 0.5px;
  display: block;
  font-weight: 400;
  line-height: 20px;
  height: 30px;
  margin: 0 0 0 24px;
  transition: background-position .3s cubic-bezier(0, 0, 0.61, 1.01), color 0.3s;
}
.stellarnav > ul > li > a:hover,
.stellarnav li.has-sub:hover>a { background-position: 0% bottom; color: #EF6D64; }
.nav-brand img { display: block; }
.tp_links { display: none; }
.me_tp_features a { color: #3B393A; }
.shop_search_btn { background: #FFF; }
.stellarnav .menu-toggle:after { display: none; }
.stellarnav .menu-toggle span.bars span {
  display: block;
  width: 32px;
  height: 3px;
  border-radius: 6px;
  background: #EF6D64;
  margin: 0 auto 7px;
}
.stellarnav .menu-toggle span.bars { margin-top: 10px; }

/* 次分類 */

.stellarnav ul ul ul { right: auto; }
.stellarnav li li a,
.stellarnav li li.has-sub > a,
.stellarnav.mobile li li.has-sub a {
  padding: 8px 16px;
  font-weight: 400;
  font-size: 14px;
  color: #FFF;
  transition: all 0.3s;
}
.stellarnav li li a:hover,
.stellarnav li li.has-sub > a:hover,
.stellarnav.mobile li li.has-sub a:hover { color: #333; }
.stellarnav > ul > li > ul > li > a,
.stellarnav li li.has-sub > a { background: #fff; transition: all .2s; }
.stellarnav > ul > li.drop-left > ul { right: unset; }
.stellarnav ul ul { transform: translateX(-50%); left: 60%; }
.stellarnav ul ul ul { left: 200px; transform: translate(0%); }
.stellarnav li li { border: unset; margin-bottom: 0; }
.stellarnav li li a { padding: 10px; text-align: center; }

/* 首頁隱藏按鈕 */

.i_news_b { display: none; }

@media screen and (max-width: 1024px) {
  .main_header_area .container { max-width: 95%; }
  .stellarnav > ul > li > a { padding: 0px 10px; font-size: 16px; }
}

@media screen and (max-width: 768px) {
  .stellarnav ul ul { transform: translateX(-50%); left: 50%; }
  .stellarnav.mobile > ul > li > a,
.header_area.sticky .stellarnav.mobile > ul > li > a { color: #3B393A; padding: 8px 3px; }
  .stellarnav.mobile li li a,
.stellarnav.mobile li li.has-sub > a,
.stellarnav.mobile li li.has-sub a { color: #3B393A; }
  .main_header_area .container { max-width: 100%; }
  .nav-header { display: flex; padding: 15px 0 15px; justify-content: center; }
  .nav-brand { width: 160px; max-width: 160px; }
  .main_header_area { backdrop-filter: none; }
  .stellarnav > ul > li > a,
.header_area.sticky .stellarnav > ul > li > a { margin: 10px 0 4px 0; }
  .stellarnav.mobile > ul > li > a { padding: 15px 43px 15px 10px; }
  .nav-menu { margin: 0; }
  .nav-menu>li:not(.tp_links) { padding-right: 0; }
  .nav-dropdown>li { text-align: left; }
  .nav-dropdown>li>a { width: calc(100% - 45px); }
}
@media screen and (max-width: 400px) {
  .nav-header { padding: 15px 0 10px; }
  .stellarnav.mobile { padding: 0; }
  .stellarnav .menu-toggle:after { font-size: 8px; }
}
#content_main { background: #F7F6F4; }
#content { min-height: 100vh; }

/* 內頁BANNER 設定 */

.banner {
  --banner-height: 250px;
  --banner-main-height: 215px;
  --banner-space: 35px;
  --banner-bg: #F3F0EF;
  --page-bg: #fff;
  --corner-size: 60px;
  position: relative;
  width: 95%;
  height: var(--banner-height);
  overflow: hidden;
  background-color: var(--page-bg);
  background-image: url("https://pic03.eapple.com.tw/liouao/back01_r1_c1.png"), url("https://pic03.eapple.com.tw/liouao/back01_r1_c3.png"), linear-gradient( to bottom, var(--banner-bg) 0, var(--banner-bg) var(--banner-main-height), var(--page-bg) var(--banner-main-height), var(--page-bg) 100% );
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left clamp(10px, 4vw, 60px) top, right clamp(10px, 4vw, 60px) top, center top;
  background-size: auto var(--banner-main-height), auto var(--banner-main-height), 100% 100%;
}
.banner::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: var(--banner-space);
  z-index: 1;
  width: var(--corner-size);
  height: var(--corner-size);
  background: var(--page-bg);
  clip-path: polygon( 100% 0, 100% 100%, 0 100% );
  pointer-events: none;
}
.banner h5 {
  position: relative;
  z-index: 2;
  color: #1D1D1D;
  letter-spacing: 2px;
  font-family: "Shippori Mincho";
}

/* = = = 文章 / 部落格列表 = = = = = = = = = = = = = = = = = = = = = = */

/* 文章頁寬度 */

.blog_in_page .main_part { max-width: 1200px; }

/* 文章列表容器 */

.blog_subbox {
  display: grid;
  flex-wrap: wrap;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  padding: 10px 20px;
}

/* 文章內容 */

.blog_box_edit { line-height: 180%; text-align: justify; }
h4.blog_category_title {
  font-weight: normal;
  color: #333;
  border-bottom: 1px #ccc solid;
  padding: 10px 0;
  margin-bottom: 20px;
}
.blog_list_le,
.blog_list_ri { width: 100%; }
.blog_list_le { position: relative; height: 0; padding: 10px 3px 75%; }
.blog_list_le img {
  display: block;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.blog_list_ri { position: relative; min-height: 140px; padding: 10px 3px 30px; }
.blog_list_ri h5 { color: #222; font-size: 19px; font-weight: 600; -webkit-line-clamp: 2; }
.blog_list_ri p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  padding: 10px 0 0;
  font-size: 15px;
  line-height: 130%;
  color: #444;
}
.blog_list_ri em { display: none; }

/* 文章列表卡片 */

.subbox_item { width: 100%; margin-right: 2%; border: none; }
.subbox_item:hover { box-shadow: 0 0 8px #ddd; }
.subbox_item a {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 5px;
  gap: 10px;
  box-shadow: 0 0 4px #ccc;
}

/* 文章列表 hover 遮罩 */

.subbox_item a::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #3B393AB8;
  border: none;
  opacity: 0;
  transition: all 500ms;
  pointer-events: none;
}
.subbox_item a::before {
  content: "READ MORE";
  position: absolute;
  z-index: 19;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: 150px;
  height: 45px;
  padding: 0;
  line-height: 43px;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.85);
  transition: all 500ms;
  pointer-events: none;
}
.subbox_item a:hover::after { opacity: 1; }
.subbox_item a:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* 相關文章 */

.news_related { border-top: 1px #ccc solid; background: none; }
.blog_in_page .show_content.blog_box.clearfix { padding: 40px; }

/* 側邊分類 */

.blog_le { width: 220px; }
.blog_le .accordion { list-style-type: none; margin: auto; border-radius: 0; overflow: hidden; }
.blog_le .accordion > li:hover,
.blog_le .accordion > li.on_this_category { color: #C6534D; }
.blog_le .accordion > li:hover .link a,
.blog_le .accordion > li.on_this_category .link a { color: #C6534D !important; }
.blog_le .accordion li .link:last-child { border-bottom: 1px solid #CCC; }
.blog_ri { padding: 0; min-height: 75vh; }
.blog_back a.article_btn_back { background: #FFF; }

/* 上下頁、返回按鈕 */



.productBtn {
  width: 100%;
  margin-top: 10px;
  padding-left: 15px;
  border: none;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  background-repeat: no-repeat;
}


/* 商品分類 / 其他列表：保留原本樣式 */

.product-layer-two li.active a { background-color: #FFF; color: #fff; font-weight: bold; }
.products-list .price b { display: none; font-size: 24px; }
.products-list .more {
  padding: 4px;
  font-size: 16px;
  font-weight: bold;
  line-height: 32px;
  text-align: center;
  transition: all .5s;
}
.products-list .item a:hover .more { color: #fff; letter-spacing: 2px; }
.other_album_choice li {
  FONT-VARIANT: JIS04;
  display: inline-block;
  margin: 0 7px 7px 0;
  padding: 7px 20px;
  background: #FFF;
  border-radius: 4px;
  font-size: 15px;
}
.blog_search input[type=search] {
  box-sizing: border-box;
  width: 100%;
  padding: 10px 35px 10px 10px;
  border: solid 1px #ccc;
  border-radius: 0;
  outline: none;
  color: #999;
  font-size: 14px;

}

/* 文章 RWD */

@media screen and (max-width: 768px) {
  .blog_ri { padding: 0; min-height: 75vh; }
  .subbox_item { width: 46%; margin-right: 2%; border: none; }
  .subbox_item a::before { width: 130px; height: 40px; line-height: 38px; font-size: 14px; }
}

@media screen and (max-width: 425px) {
  .blog_subbox { padding: 20px; grid-template-columns: 1fr; }
  .subbox_item { width: 100%; margin-right: 2%; background: #fff; }
  .blog_list_le img { width: 100%; }
  .subbox_item a::before {
    width: 120px;
    height: 38px;
    line-height: 36px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
}

/* 首頁文章 */

.news_list ul li a:hover { background: #f3f3f3; }
.news_part .title_i_box {
  display: flex;
  margin-bottom: 30px;
  text-align: left;
  padding: 0px 46px;
  flex-direction: column-reverse;
}
.news_part .title_i_box h4 { font-size: 40px; color: #FFF; font-weight: 700; font-family: "Noto Serif tc"; }
.news_part .title_i_box h6 {
  font-size: 18px;
  color: #FFF;
  font-family: "Noto Sans TC";
  font-weight: normal;
  letter-spacing: 2px;
}
.news_part { width: 100%; max-width: 1400px; margin: auto; padding: 50px 0; }
.prod_part { max-width: 1440px; margin: auto; padding: 50px 20px; }
.pageIndex .products-list .pic img { object-fit: cover; width: 100%; height: auto; }

@media screen and (max-width: 1024px) {
  .pageIndex .products-list .pic img { object-fit: cover; width: 100%; }
}

@media screen and (max-width: 768px) {
  .pageIndex .products-list .pic img { object-fit: cover; width: 100%; }
}

@media screen and (max-width: 425px) {
  .news_part .title_i_box h4 { font-size: 32px; }
  .pageIndex .products-list .pic img { object-fit: cover; width: 100%; }
}

/* 聯絡 */

.contact_page .main_part { width: 100%; max-width: 100%; margin: auto; padding: 0; }
.contact_editbox { margin: auto; padding: 0; }
.contact_content { margin: auto; max-width: 1400px; padding: 10px; background: #fff; }
.blank_letter { font-family: "Noto Serif TC"; }
.contact_form li.last cite { background: #FFF; color: #fff; }
.contact_form li.last blockquote,
.contact_form li.last cite { border: 1px #FFF solid; }
.contact_le_map a { background: #8E898B; }
.ADD2:before { content: "營業時間"; }

/* --------聯絡我們表單 ---------- */

.note { font-size: 13px; text-align: right; }
.contact_form { margin-top: 30px; margin-bottom: 20px; font-size: 15px; color: #444; }
.contact_form li {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 90px;
  border-bottom: 1px solid #D6D2D2;
}
.contact_form li.last { border: none; text-align: right; margin-top: 30px; padding-left: 0; }
.contact_form li .form__label {
  display: inline-block;
  width: 85px;
  text-align: right;
  margin-left: -90px;
  padding-right: 10px;
  vertical-align: top;
}
.contact_form li .form__insert { display: inline-block; width: 100%; vertical-align: top; }
.contact_form li input.noborder,
.contact_form li textarea.noborder { border: 1px #ffffff solid; }

@media screen and (max-width: 1024px) {
  .contact_content .information_left { width: 100%; }
  .contact_content .information_right { width: 100%; padding-left: 30px; }
  .contact_content { margin: auto; padding: 10px; }
}

/* 相簿 */

.subalbum-menu h2 { color: #C6534D; }
.other_subalbum li { background: #ffffff00; }
.show-list .show_name { text-align: center; }
.show-list .show_pic img,
.pic-list .show_pic img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.0); }
.show-list .show_pic:hover img,
.pic-list .show_pic:hover img { transform: translate(-50%, -50%) scale(1.1); transition: 0.3s; }
.overlay { z-index: 2; }
.show-list .show_pic {
  display: block;
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 0;
}
.show_content { margin: auto; padding: 10px; }
.show-list .item:hover .show_name { color: #3B393A; }

/* 詢價 */

.send_simple { background: #FFF; }
.rewrite_simple { background: #999; }
.products-list .pic img { object-fit: cover; width: 100%; }
.filltext { background: #efefef; }
.separate_title { font-size: 24px; color: #333; padding: 10px 4%; background: none; }
.form_formonly li {
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 160px;
  border-bottom: 1px solid #eee;
}

.qaform .breakF { border: 1px #bbb solid; background: unset; }

/* 購物車/＝＝＝＝＝ */

.prod_part { width: 90%; }
.products-list { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; }
.products-list:before { content: none; }
.products-list .item { width: 100%; }
.products-list .name { text-align: center; font-size: 18px; font-weight: 600; letter-spacing: 0; }

/* 購物車/外層＝＝ */

.products-list .more { border: 1px solid #3B393A; color: #3B393A; }
.products-list .item a:hover .more { background: #3B393A; }
.products-list .price {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.products-list .price b { margin: 0 5px; line-height: 180%; text-align: center; color: #3B393A; }
.products-list .price b.ori_price { font-size: 14px; }

/* 外層版面：桌機版商品分類固定在左側 */

.products-list .pic { aspect-ratio: 4 / 4; }
.product_page .main_part { width: 95%; max-width: 1440px; }
.product_page .show_content {
  display: flex;
  margin: auto;
  padding: 10px;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: 20px;
}

/* 右側商品列表 */

.product_page .products-list { width: calc(100% - 280px); }

/* 商品內頁不顯示左側分類 */



/* 左側商品分類 */

.product-layer-two {
  display: block;
  flex: 0 0 250px;
  width: 250px;
  margin: 0;
  text-align: left;
}
.product-layer-two li { width: 100%; margin: 0; padding: 0; }
.product-layer-two > li.active { background: #f2f2f2; }
.product-layer-two li.active a { border: unset; border-bottom: 1px dotted #ccc; }
.product-layer-two li li a {
  padding: 10px 15px;
  color: #333;
  background-color: #F8F4F3;
  border: 1px solid #C6534D;
  font-size: 14px;
}
.product-layer-two li li a:hover { color: #FFF; background-color: #C6534D; }
.product-layer-two li a {
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #fff;
  background: #C6534D;
  border: 1px solid #C6534D;
  font-size: 20px;
  font-weight: bolder;
}

/* 購物車／商品內頁：依目前 HTML 結構整理 */







/* 商品詳細頁不需要左側分類，整個容器一起隱藏 */


/* 左側主圖＋右側購買資訊 */










/* 主圖 Swiper 僅使用自身的位移，不吃首頁 Banner 動畫 */






/* 商品縮圖固定排在主圖下方，不再絕對定位壓在主圖上 */










/* 右側商品名稱、價格、數量與購物按鈕 */


/* 下方詳細資料跨滿兩欄 */




/* 後台沒有內容時不留下空白頁籤區 */










/* 按鈕顏色 */









/* 商品側邊規格 */






/* 文章管理/＝＝＝＝＝ */

.blog_page .main_part { max-width: 1600px; }
h4.blog_category_title { font-size: 28px; }
h4.blog_category_title span { font-size: 24px; }

/* 文章管理/外層＝＝ */

.i_blog_ri,
.blog_list_ri { position: relative; min-height: 140px; }
.i_blog_ri h5,
.blog_list_ri h5 { color: #222; font-weight: 600; -webkit-line-clamp: 2; font-size: 19px; }
.i_blog_ri em,
.blog_list_ri em {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #A58F89;
  font-size: 13px;
}
.i_blog_ri p { -webkit-line-clamp: 2; padding-top: 10px; }
.blog_list_ri p { -webkit-line-clamp: 2; }
.module_i_news li a:after { opacity: 1; background: rgb(255 255 255 / 0%); border: 0; border-bottom: 1px solid #A58F896e; }
.module_i_news li a:before {
  content: "";
  bottom: 0;
  right: 0;
  left: 0%;
  opacity: 1;
  border-bottom: 3px solid #A58F89;
  width: 25%;
}
.module_i_news li a:hover:before { width: 100%; height: 100%; }
.module_i_news ul,
.blog_subbox { display: grid; gap: 10px; }
.module_i_news li,
.subbox_item { width: 100%; }
.module_i_news li a,
.subbox_item a { padding: 5px; }
.module_i_news li a:after { pointer-events: none; }
.i_blog_le,
.i_blog_ri,
.blog_list_le,
.blog_list_ri { width: 100%; padding: 10px 3px; }
.i_blog_le,
.blog_list_le { position: relative; padding-bottom: 75%; height: 0; }

/* 文章縮圖長寬比例，100% →100:100 = 1:1 正方形 */

.i_blog_le img,
.blog_list_le img {
  display: block;
  max-width: 100%;
  min-width: 100%;
  height: 100%;
  object-fit: cover;
  -moz-object-fit: cover;
  -ms-object-fit: cover;
  -o-object-fit: cover;
  -webkit-object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}

/* 側邊 */

.blog_le .accordion { border: 1px #A58F89 solid; }
.blog_le .accordion > li { transition: all 0.3s; }
/* 最新消息側欄｜選中狀態 */
.blog_le .accordion > li.on_this_category {
    background: #E7E4E3 !important;
}

.blog_le .accordion > li.on_this_category .link a {
    color: #C6534D !important;
}

/* 滑鼠移過去 */
.blog_le .accordion > li:hover {
    background: #F1EEEE !important;
}

.blog_le .accordion > li:hover .link a {
    color: #C6534D !important;
}
.accordion li .link,
.submenu li { border-bottom: 1px solid #A58F89; }
.accordion li .link a,
.submenu a { display: block; width: 100%; }
.accordion li .link a:active,
.accordion li .link a:hover { color: #fff; }
.blog_le .accordion li.open i { color: #fff; }
.blog_le .accordion li.open .link {
    color: #C6534D;
    background: #E7E4E3;
}

.blog_le .accordion li.open .link a {
    color: #C6534D !important;
}
.submenu { background: #F8F6F4; }
.submenu a { font-weight: unset; }
.submenu a:hover { background: #A58F89; }
.submenu a:before { font-weight: 600; }

/* 商品推薦 */





@media screen and (max-width: 768px) {
  .product_page .products-list { display: grid; grid-gap: 5px; grid-template-columns: 1fr 1fr; }
  .product-layer-two > li > a { display: none; }
  .product_page .products-list,
.product-layer-two { width: 100%; }
  
  
  
  
  body.pageIndex .products-list { padding: 40px 0 20px; }
  .products-list .item { width: 100%; }
  .product-layer-two { display: none; }
  
}

@media screen and (max-width: 500px) {
  .product_page .products-list { grid-template-columns: 1fr 1fr; }
}

@media screen and (max-width: 425px) {
  .product-layer-two { display: none; }
  .product_page .show_content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-around;
    margin: auto;
    padding: 10px 10px;
    flex-direction: column;
    align-content: center;
  }
  .product_page .products-list { width: 100%; }
}

@media screen and (max-width: 1024px) {
  /* 平板以下先恢復上下排列 */

  .product_page .products-list,
.product-layer-two { width: 100%; flex-basis: 100%; }
  .product_page .products-list { display: grid; }
  .product_page .clearfix:before,
.product_page .clearfix:after { display: none; }
  .products-list .item { width: 100%; }
}

@media screen and (max-width: 768px) {
  .product_page .products-list { width: 100%; display: grid; grid-gap: 10px; }

  /* .banner 手機版樣式已移至檔案最下方統一設定 */
}

/* 內頁名稱 */





/* 促銷 */

.promotion_title h2 { font-weight: bold; margin-left: 5px; }
.footer_logo { max-width: 120px; }
.footer_info li p { font-size: 18px; }
.footer a,
.footer_info li p,
.footer_info li p a { color: #3B393A; transition: all 0.3s; }
.footer .fix_ri a:hover,
.footer_info li p a:hover { color: #C6534D; transform: translateY(-1px); }
.footer_menu a {
  display: inline-block;
  padding: 5px 7px 5px 15px;
  border: none;
  margin: 0 4px 4px 0;
  font-size: 14px;
  line-height: 100%;
  color: #3B393A;
  background: none;
  border-left: 1px solid rgba(59, 57, 58, 0.35);
  transition: all 0.3s;
}
.footer_menu a:hover { background: none; color: #C6534D; font-weight: 500; }
.footer_menu a:nth-child(1) { display: none; }
.footer_menu a:nth-child(2) { border: none; }
.footer .center { position: relative; margin: 0 auto; }
.footer_info {
  padding: 0;
  display: flex;
  grid-gap: 20px;
  padding-right: 0;
  flex-wrap: wrap;
}
.footer_info ul { display: inline-block; vertical-align: top; width: 100%; }
.footer_info li { display: block; padding: 10px 0 10px 6px; }
.footer_info li:nth-child(2) { position: absolute; right: 0; top: 14px; }
.list_before.info li.info_ADD2 { padding-left: 60px; }
.list_before.info li.TEL { margin: 10px 0 5px 0; }
.box_link { display: none; }
.copy {
  padding: 15px 0;
  letter-spacing: 1px;
  border-top: 0;
  background: #514B4D;
  color: #FFFFFF;
}
.copy a { color: #FFFFFF; transition: 0.3s; }
.copy a:hover { color: #FFAAA2; }

/* 6. 回到頂部按鈕 (To Top) */

#to_top {
  bottom: 60px;
  right: 10px;
  width: 50px;
  height: 50px;
  padding-top: 10px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #2E2E2E;
  box-shadow: unset;
  border-radius: 15px;
  position: fixed;
  z-index: 999;
}
#to_top i.top { height: 15px; }
#to_top i.top:before,
#to_top i.top:after { height: 12px; background: #fff; width: 2px; }

/* = = = Footer RWD (手機版/平板) 設定 = = = */

@media screen and (max-width: 1024px) {
  .footer .center { max-width: 90%; }
  .footer_info ul { width: 100%; }
  .footer_logo { margin-bottom: 20px; }
  .footer_info li:nth-child(1) { width: 80%; }
}

@media screen and (max-width: 768px) {
  .footer .center { max-width: 90%; }
  .footer_info ul { flex-direction: column; }
  .footer_info li p { font-size: 13px; }
  .footer_menu a { font-size: 13px; padding: 8px 15px; text-align: left; margin: 2px; }

  /* 下方按鈕空間預留 */

  .footer.with_shopping_mode { padding: 30px 0 70px; }
  #to_top { bottom: 60px; }
  .footer_logo { margin-left: unset; }
}

@media screen and (max-width: 600px) {
  .footer_info li:nth-child(2) { position: relative; }
  .footer_menu a:nth-child(2) { border-left: 1px #ccc solid; }
  #to_top { width: 40px; border-radius: 10px; }
  .footer_info li:nth-child(1) { grid-template-columns: 1fr; display: block; width: 100%; }
}

@media screen and (max-width: 400px) {
  .footer_menu a { margin: 3px; }
}

/* 浮動按鈕：拉高預設與 Hover 對比 */

.info_fix .linksBtn,
.info_fix:hover > .linksBtn,
.info_fix .info_fix_links a {
  background: #FFFFFF !important;
  color: #C6534D !important;
  border: 2px solid #C6534D !important;
  box-shadow: 0 5px 16px rgba(59, 57, 58, 0.18) !important;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease !important;
}

/* 圖示跟著按鈕文字顏色，避免被原始 CSS 蓋掉 */

.info_fix .linksBtn i,
.info_fix .info_fix_links a i { color: inherit !important; }

/* 只有游標真的移到按鈕上才反轉 */

.info_fix .linksBtn:hover,
.info_fix .info_fix_links a:hover {
  background: #C6534D !important;
  color: #FFFFFF !important;
  border-color: #C6534D !important;
  transform: translateY(-2px);
}

/* 購物車數量標籤 */

.info_fix .info_fix_car b { background: #C6534D !important; color: #FFFFFF !important; border: 1px solid #FFFFFF; }
.info_fix .info_fix_car:hover b { background: #FFFFFF !important; color: #C6534D !important; border-color: #C6534D; }

/* ========================================================= | 新案件主題色集中覆寫 | 後續只要修改最上方 :root 色票，即可快速微調整站顏色 | ========================================================= */

body { color: var(--brand-ink); font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif; }
.main_header_area { border-bottom: 1px solid rgba(59, 57, 58, 0.08); }
.stellarnav > ul > li > a { color: var(--brand-ink); background: linear-gradient(to right, var(--brand-coral) 50%, transparent 50%) 100% bottom / 200% 10% no-repeat; }
.stellarnav > ul > li > a:hover,
.stellarnav li.has-sub:hover > a { color: var(--brand-coral-dark); }
.stellarnav li li a { color: var(--brand-ink); background: rgba(255, 255, 255, 0.96); }
.stellarnav li li a:hover { color: var(--brand-coral-dark); background: var(--brand-silver-light); }
.animated-arrow,
.linksBtn,
.contact_form li.last cite,
.send_simple { background: var(--brand-coral); }
.products-list .more,
.product-layer-two li a,
.product-layer-two li li a { border-color: var(--brand-coral); }
.products-list .more,
.products-list .price b,
.product-layer-two li li a,
.banner h5,
.subalbum-menu h2 { color: var(--brand-coral-dark); }
.products-list .item a:hover .more,
.product-layer-two li a,
.product-layer-two li li a:hover,
.blog_le .accordion > li:hover,
.blog_le .accordion > li.on_this_category,
.blog_le .accordion li.open .link {
  background: var(--brand-coral);
  color: #fff;
}
.module_i_news li a::before { border-color: var(--brand-coral); background: var(--brand-coral); }

/* 後段品牌色統整：Footer 保持亮色，不再覆蓋成深色 */

.footer { background: linear-gradient( 135deg, #E9E4E2 0%, #CBC5C7 55%, #E2DBD9 100% ); color: #3B393A; }
.footer .fix_ri a:hover,
.footer_info li p a:hover,
.footer_menu a:hover,
.copy a:hover { color: var(--brand-coral); }
.info_fix_links a { background: rgba(239, 109, 100, 0.92); }
.info_fix_links a:hover,
.info_fix:hover > .linksBtn { background: var(--brand-coral-dark); color: #fff; }

@media screen and (max-width: 1024px) {
  .header_area .main_header_area,
.header_area.sticky .main_header_area { background: linear-gradient(135deg, #F7F6F4 0%, #D7D6DA 55%, #F5F1EF 100%); }
}

@media screen and (max-width: 768px) {
  .pageIndex .swiper-slide:nth-child(1)::after,
.pageIndex .swiper-slide:nth-child(2)::after {
    width: 92%;
    margin: 0 auto;
    right: 0;
    line-height: 1.55;
  }
}


/* ========================================================= | 2026.07.16｜HEADER / FOOTER 最終調整 | 1. 首頁未下滑：黑色透明漸層＋白色文字 | 2. 下滑後及所有內頁：銀白漸層＋縮小 LOGO | 3. Footer：LOGO、聯絡資訊、選單橫向排列 | ========================================================= */

/* ---------- HEADER：桌機首頁初始／下滑後 ---------- */

/* 首頁一般狀態先寫，sticky 狀態再覆蓋；手機版不吃這些位移。 */
@media screen and (min-width: 769px) {
  .pageIndex .header_area .main_header_area {
    background: linear-gradient(180deg, rgba(18,18,18,.88) 0%, rgba(18,18,18,.62) 55%, rgba(18,18,18,.12) 88%, rgba(18,18,18,0) 100%);
    border-bottom: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .pageIndex .header_area .nav-brand { max-width: 60px; }
  .pageIndex .header_area .nav-brand img { filter: brightness(0) invert(1); transition: filter .35s ease; }
  .pageIndex .header_area .nav-header { max-width: 150px; }
  .pageIndex .header_area .stellarnav { top: 20px; }
  .pageIndex .header_area .stellarnav > ul > li > a,
  .pageIndex .header_area .me_tp_features,
  .pageIndex .header_area .me_tp_features a,
  .pageIndex .header_area .me_tp_features i { color: #fff; }
  .pageIndex .header_area .stellarnav > ul > li > a:hover,
  .pageIndex .header_area .stellarnav li.has-sub:hover > a { color: #f19a94; }

  body:not(.pageIndex) .header_area .main_header_area,
  .pageIndex .header_area.sticky .main_header_area {
    background: linear-gradient(135deg, rgba(250,249,248,.98) 0%, rgba(215,214,218,.97) 52%, rgba(247,244,242,.98) 100%);
    border-bottom: 1px solid rgba(59,57,58,.10);
    box-shadow: 0 6px 20px rgba(59,57,58,.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  body:not(.pageIndex) .header_area .nav-brand,
  .pageIndex .header_area.sticky .nav-brand { width: 100%; max-width: 45px; transition: max-width .35s ease; }
  body:not(.pageIndex) .header_area .nav-brand img,
  .pageIndex .header_area.sticky .nav-brand img { filter: none; }
  body:not(.pageIndex) .header_area .nav-header,
  .pageIndex .header_area.sticky .nav-header { max-width: 110px; transition: max-width .35s ease, padding .35s ease; }
  body:not(.pageIndex) .header_area .stellarnav,
  .pageIndex .header_area.sticky .stellarnav { top: 8px; transition: top .35s ease; }
  body:not(.pageIndex) .header_area .stellarnav > ul > li > a,
  body:not(.pageIndex) .header_area .me_tp_features a,
  .pageIndex .header_area.sticky .stellarnav > ul > li > a,
  .pageIndex .header_area.sticky .me_tp_features a { color: var(--brand-ink); }
}

/* ---------- FOOTER：LOGO 與資訊同一排 ---------- */

.footer .center { max-width: 1720px; width: 90%; padding: 28px 0; }
.footer_info,
.footer_info > ul { width: 100%; }
.footer_info > ul { display: flex; align-items: center; justify-content: space-between; gap: 45px; }

/* 第一組：LOGO＋聯絡資訊 */

.footer_info > ul > li:first-child {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 36px;
  width: auto;
  padding: 0;
}
.footer_info > ul > li:first-child .footer_logo { flex: 0 0 120px; width: 120px; max-width: 120px; margin: 0; }
.footer_info > ul > li:first-child p,
.footer_info > ul > li:first-child .list_before,
.footer_info > ul > li:first-child .info { margin-top: 0; margin-bottom: 0; }
.footer_info li p { line-height: 1.75; }

/* 第二組：右側 Footer 選單，取消原本絕對定位 */

.footer_info > ul > li:nth-child(2) { position: static; flex: 0 0 auto; width: auto; padding: 0; }

/* ---------- Footer 平板 / 手機 ---------- */

@media screen and (max-width: 1024px) {
  .footer_info > ul { flex-wrap: wrap; gap: 25px; }
  .footer_info > ul > li:first-child { flex: 1 1 100%; width: 100%; }
  .footer_info > ul > li:nth-child(2) { flex: 1 1 100%; width: 100%; }
}

@media screen and (max-width: 600px) {
  .footer .center { width: 88%; }
  .footer_info > ul { display: block; }
  .footer_info > ul > li:first-child { display: block; width: 100%; }
  .footer_info > ul > li:first-child .footer_logo { display: block; width: 105px; max-width: 105px; margin: 0 0 20px; }
  .footer_info > ul > li:nth-child(2) { position: static; width: 100%; margin-top: 20px; }
}

/* ========================================================= | FOOTER 修正：LOGO｜聯絡資訊（直排）｜選單按鈕 | ========================================================= */

@media screen and (min-width: 769px) {
  .footer .center { width: 90%; max-width: 1720px; padding: 32px 0; }
  .footer_info {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    gap: 42px;
    width: 100%;
    padding: 0;
    flex-wrap: nowrap;
  }
  .footer_info > .footer_logo,
.footer_info > a.footer_logo { width: 120px; max-width: 120px; margin: 0; justify-self: start; }

  /* 右側再分成：資訊＋按鈕 */

  .footer_info > ul {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) auto;
    align-items: center;
    gap: 45px;
    width: 100%;
    margin: 0;
  }
  .footer_info > ul > li:first-child {
    display: block;
    width: auto;
    padding: 0;
    margin: 0;
    flex: none;
  }
  .footer_info > ul > li:first-child p {
    display: block;
    margin: 0;
    padding: 2px 0;
    line-height: 1.75;
    white-space: normal;
  }

  /* 右欄按鈕／選單 */

  .footer_info > ul > li:nth-child(2) {
    position: static;
    width: auto;
    padding: 0;

    margin: 0;
    flex: none;
    justify-self: end;
    white-space: nowrap;
  }
}

@media screen and (max-width: 1100px) and (min-width: 769px) {
  .footer_info { grid-template-columns: 120px minmax(0, 1fr); gap: 28px; }
  .footer_info > .footer_logo,
.footer_info > a.footer_logo { width: 105px; max-width: 105px; }
  .footer_info > ul { grid-template-columns: minmax(300px, 1fr) auto; gap: 24px; }
  .footer_info li p { font-size: 15px; }
  .footer_menu a { padding: 5px 6px 5px 10px; margin-right: 1px; font-size: 13px; }
}

/* 手機版維持上下排列 */

@media screen and (max-width: 768px) {
  .footer_info { display: block; }
  .footer_info > ul { display: block; width: 100%; }
  .footer_info > ul > li:first-child,
.footer_info > ul > li:nth-child(2) { display: block; position: static; width: 100%; }
  .footer_info > ul > li:first-child p { display: block; margin: 0; padding: 2px 0; }
}

/* =========================================================
   手機版 HEADER／主選單｜統一版
   下滑前後完全同一套位置；LOGO 原色；選單固定左側可捲到底
   ========================================================= */

@media screen and (max-width: 768px) {
  :root { --mobile-header-height: 68px; --mobile-bottom-menu-height: 50px; }

  .header_area {
    position: fixed !important; top: 0 !important; right: 0 !important; left: 0 !important;
    width: 100% !important; height: var(--mobile-header-height) !important; margin: 0 !important;
    z-index: 99999; overflow: visible !important; transform: none !important;
  }
  .header_area .main_header_area {
    height: var(--mobile-header-height) !important; min-height: var(--mobile-header-height) !important; padding: 0 !important;
    overflow: visible !important;
    background: linear-gradient(135deg, rgba(249,248,247,.99) 0%, rgba(218,217,220,.99) 55%, rgba(246,243,241,.99) 100%) !important;
    box-shadow: 0 3px 12px rgba(59,57,58,.12); backdrop-filter: none;
  }
  .header_area .main_header_area .container,
  .header_area .navigation {
    position: relative; width: 100% !important; max-width: 100% !important;
    height: var(--mobile-header-height) !important; min-height: var(--mobile-header-height) !important;
    margin: 0 !important; padding: 0 !important; overflow: visible !important;
  }

  .header_area .nav-header {
    position: relative; z-index: 1; display: flex; width: 100%;
    height: var(--mobile-header-height) !important; min-height: var(--mobile-header-height) !important;
    max-width: none !important; margin: 0 !important; padding: 6px 0 !important;
    align-items: center; justify-content: center; overflow: visible;
  }
  .header_area .nav-brand { width: 46px !important; max-width: 46px !important; margin: 0 auto !important; }
  .header_area .nav-brand img { display: block; width: 100%; height: auto; max-height: 54px; object-fit: contain; filter: none !important; }

  .header_area .stellarnav.mobile {
    position: fixed !important; top: 0 !important; right: auto !important; left: 0 !important;
    width: 100vw !important; height: var(--mobile-header-height) !important; margin: 0 !important; padding: 0 !important;
    z-index: 100000; overflow: visible !important; transform: none !important; transition: none !important; pointer-events: none;
  }
  .header_area .stellarnav.mobile .menu-toggle {
    position: absolute !important; top: 0 !important; right: auto !important; bottom: auto !important; left: 10px !important;
    display: flex; width: 46px; height: var(--mobile-header-height) !important; margin: 0 !important; padding: 0 8px !important;
    box-sizing: border-box; align-items: center; justify-content: center; line-height: 1; z-index: 100002;
    transform: none !important; transition: none !important; pointer-events: auto;
  }
  .header_area .stellarnav.mobile .menu-toggle span.bars {
    display: flex; width: 30px; height: 21px; margin: 0 !important; padding: 0; flex-direction: column; justify-content: center;
    gap: 6px; transform: none !important; pointer-events: none;
  }
  .header_area .stellarnav.mobile .menu-toggle span.bars span {
    display: block; width: 30px; height: 3px; margin: 0 !important; flex: 0 0 3px; border-radius: 3px; background: var(--brand-ink);
  }

  .header_area .stellarnav.mobile > ul {
    position: fixed !important; top: var(--mobile-header-height) !important; right: auto !important;
    bottom: calc(var(--mobile-bottom-menu-height) + env(safe-area-inset-bottom, 0px)) !important; left: 0 !important;
    width: min(68vw, 320px) !important; min-width: 260px; height: auto !important; max-height: none !important;
    margin: 0 !important; padding: 0 0 12px !important; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch; background: rgba(247,246,244,.99); box-shadow: 0 8px 16px rgba(59,57,58,.14);
    z-index: 100001; transform: none !important; transition: none !important; pointer-events: auto;
  }
  .header_area .stellarnav.mobile > ul > li.has-sub { position: relative; }
  .header_area .stellarnav.mobile > ul > li > a:not(.dd-toggle) {
    display: flex; min-height: 60px; margin: 0 !important; padding: 15px 58px 15px 15px; align-items: center;
    color: var(--brand-ink) !important; background: none;
  }
  .header_area .stellarnav.mobile > ul > li > a.dd-toggle,
  .header_area .stellarnav.mobile > ul > li.open > a.dd-toggle {
    position: absolute; top: 0; right: 0; display: flex; width: 52px; height: 60px; margin: 0; padding: 0;
    align-items: center; justify-content: center; color: var(--brand-ink) !important; background: none; border: 0; box-shadow: none; transform: none;
  }
  .header_area .stellarnav.mobile > ul > li > a.dd-toggle:hover,
  .header_area .stellarnav.mobile > ul > li > a.dd-toggle:focus { background: none; }
  .header_area .stellarnav.mobile .dd-toggle .icon-plus { position: relative; inset: auto; margin: 0; }
  .header_area .stellarnav.mobile > ul > li > ul { left: auto; width: 100%; margin: 0; padding: 0; transform: none; }
  .header_area .stellarnav.mobile > ul > li > ul > li > a,
  .header_area .stellarnav.mobile li li a { padding: 14px 20px; color: var(--brand-ink) !important; text-align: left; }

  .header_area .box_search, .header_area .shop_search { display: none; }
  .pageIndex .bannerindex { margin-top: var(--mobile-header-height) !important; }
  .pageIndex #content_main, body:not(.pageIndex) #content_main { padding-top: 0; }
}

/* ========================================================= | 內頁 BANNER 手機版最終設定 | 1. 與固定 HEADER 分開 | 2. 手機只顯示右側裝飾圖 | 3. 保留底色、白色留白與右下倒角 | ========================================================= */

@media screen and (max-width: 768px) {
  /* 改由 Banner 自己避開固定 Header，避免重複留白 */

  body:not(.pageIndex) #content_main { padding-top: 0; }
  body:not(.pageIndex) .banner {
    --banner-height: 200px;
    --banner-main-height: 170px;
    --banner-space: 30px;
    --corner-size: 42px;
    height: var(--banner-height);
    margin-top: var(--mobile-header-height, 68px);
    background-color: var(--page-bg);
    background-image: url("https://pic03.eapple.com.tw/liouao/back01_r1_c3.png"), linear-gradient( to bottom, var(--banner-bg) 0, var(--banner-bg) var(--banner-main-height), var(--page-bg) var(--banner-main-height), var(--page-bg) 100% );
    background-repeat: no-repeat, no-repeat;
    background-position: left top, center top;
    background-size: auto var(--banner-main-height), 100% 100%;
  }
  body:not(.pageIndex) .banner::after { right: 0; bottom: var(--banner-space); width: var(--corner-size); height: var(--corner-size); }
  body:not(.pageIndex) .banner h5 { font-size: 26px; }
}

/* ========================================================= | 商品分類選單｜桌機文字狀態＋手機版重新顯示 | ========================================================= */

.product_page .product-layer-two > li { width: 100%; margin: 0; padding: 0 10px; background: transparent; }
.product_page .product-layer-two > li > a {
  display: block;
  padding: 14px 15px;
  color: #2D2B2C;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(59, 57, 58, 0.16);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  transition: color .25s ease;
}
.product_page .product-layer-two > li.active,
.product_page .product-layer-two > li.on_this_category { background: transparent; }
.product_page .product-layer-two > li.active > a,
.product_page .product-layer-two > li.on_this_category > a,
.product_page .product-layer-two > li > a:hover {
  color: #EF6D64;
  background: transparent;
}

@media screen and (max-width: 768px) {
  /* 手機版使用系統原本的商品分類收合功能 */

  .product_page .product_menu_list {
    display: block;
    width: 100%;
    flex: 0 0 100%;
    order: 0;
    min-height: 0;
    margin: 0 0 22px;
  }

  /* 收合按鈕 */

  .product_page .product_menu_list > h5 {
    display: flex !important;
    width: 100%;
    margin: 0;
    padding: 14px 18px;
    align-items: center;
    justify-content: space-between;
    color: #3B393A;
    background: #F3F0EF;
    border: 1px solid rgba(59, 57, 58, 0.15);
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 1px;
    text-align: left;
    cursor: pointer;
  }
  .product_page .product-layer-two {
    width: 100% !important;
    flex: 0 0 100%;
    margin: 0;
    padding: 8px 0 0;
    text-align: left;
  }
  .product_page .product-layer-two > li { width: 100%; padding: 0; }
  .product_page .product-layer-two > li > a { display: block !important; padding: 12px 8px; font-size: 16px; }
  .product_page .show_content { align-items: stretch; }
}



/* =========================================================
   2026-10-06｜平板 Header
   769–1100px 使用單排緊湊版，避免 1024px Header 堆疊
   ========================================================= */

@media screen and (min-width: 769px) and (max-width: 1100px) {
  .header_area .main_header_area .container,
  .pageIndex .header_area .main_header_area .container { width: 96%; max-width: none; }

  .header_area .navigation,
  .pageIndex .header_area .navigation {
    display: grid; grid-template-columns: 72px minmax(0,1fr) auto; grid-template-areas: "logo nav tools";
    align-items: center; column-gap: 14px; min-height: 84px; padding: 0 8px;
  }
  .header_area .nav-header,
  .pageIndex .header_area .nav-header {
    grid-area: logo; display: flex; width: 72px; max-width: none; height: 84px; padding: 0; align-items: center; justify-content: center;
  }
  .header_area .nav-brand,
  .pageIndex .header_area .nav-brand { width: 62px; max-width: 62px; margin: 0; }

  .header_area .me_tp_features,
  .pageIndex .header_area .me_tp_features {
    grid-area: tools; position: static !important; display: flex; width: auto !important; margin: 0;
    align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap;
  }
  .header_area .box_search, .header_area .shop_search { display: none; }

  .header_area .stellarnav,
  .pageIndex .header_area .stellarnav { grid-area: nav; position: relative; top: 0; width: 100%; margin: 0; }
  .header_area .stellarnav > ul { display: flex; width: 100%; margin: 0; align-items: center; justify-content: center; flex-wrap: nowrap; }
  .header_area .stellarnav > ul > li > a,
  .pageIndex .header_area .stellarnav > ul > li > a {
    height: auto; margin: 0 5px; padding: 10px 3px; font-size: 14px; line-height: 1.4; white-space: nowrap;
  }

  .pageIndex .header_area.sticky .nav-brand { width: 45px; max-width: 45px; }
  .pageIndex .header_area.sticky .nav-brand img { filter: none; }
  .pageIndex .header_area.sticky .stellarnav { top: 0; }
}

/* =========================================================
   右下速撥選單｜預設直接展開
   保留原本按鈕尺寸、位置、圓角與 hover 樣式
   ========================================================= */
.info_fix .info_fix_links,
.info_fix #info_fix_links {
  display: flex !important;
  flex-direction: column;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}

.info_fix .info_fix_links a {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.info_fix > .linksBtn,
.info_fix > span.linksBtn {
  display: none !important;
}