/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

body {
  overflow-x: hidden;
}

/* Add your custom styles here */

.testimonial-card .swiper-slide-active {
  margin: 0 auto;
}
.testimonial-card {
  width: 100%;
  max-height: 425px;
  min-height: 425px;
  background: #fff;
  border-radius: 0 16px;
  overflow: hidden;
  /* padding: 24px 20px 20px 20px; */
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  margin: 0 auto;
  margin-bottom: 32px;
}
.testimonial-card:hover {
}
.testimonial-image {
  width: 100%;
}
.testimonial-image img {
  width: 100%;

  object-fit: cover;
  margin-bottom: 16px;
}
.testimonial-title h3 {
  font-family: "Noto Serif TC";
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #454545;
  text-align: left;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制為兩行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 2.4em; /* 兩行的高度 */
  line-height: 1.2;
}
.testimonial-content {
  color: #444;
  font-size: 1em;
  text-align: left;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 3.2em;
}
.testimonial-date {
  font-size: 14px;
  color: #454545;
  margin-bottom: 4px;
  text-align: left;
  width: 100%;
}
.testimonials-swiper-container .swiper-pagination {
  bottom: 8px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0; /* 移除間距，讓線條連在一起 */
  height: 1px; /* 改為1px粗度 */
}
.testimonials-swiper-container .swiper-pagination-bullet {
  width: 32px;
  height: 1px; /* 改為1px粗度 */
  border-radius: 0; /* 移除圓角，變成線條 */
  background: #CECBC7; /* 其他顏色為#CECBC7 */
  opacity: 1;
  margin: 0 !important; /* 移除間距 */
  transition: background 0.2s;
}
.testimonials-swiper-container .swiper-pagination-bullet-active {
  background: #454545; /* active顏色為#454545 */
}
.testimonials-swiper-container .swiper-button-prev,
.testimonials-swiper-container .swiper-button-next {
  position: static !important;
  right: auto !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  transform: none !important;
}
.testimonials-swiper-container .swiper-button-prev::after,
.testimonials-swiper-container .swiper-button-next::after {
  font-size: 14px !important;
  line-height: 1;
}
.testimonials-swiper-container .swiper-slide {
  box-sizing: border-box;
}
@media (max-width: 600px) {
  .testimonials-slick {
    overflow: visible; /* 手機版時允許 overflow，讓 arrow button 顯示 */
  }
  
  .testimonials-slick .testimonial-card {
    width: 90vw; /* 手機版時設定固定寬度，避免被切到 */
    max-width: 90vw;
    margin: 0 auto; /* 置中顯示 */
  }
  
  /* 手機版時 arrow button 正常顯示 */
  .testimonials-slick .slick-prev,
  .testimonials-slick .slick-next {
    display: block !important; /* 強制顯示 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  
  .testimonials-slick .slick-prev {
    left: 10px; /* 左箭頭位置 */
  }
  
  .testimonials-slick .slick-next {
    right: 10px; /* 右箭頭位置 */
  }
  
  .testimonials-slick .slick-prev::before,
  .testimonials-slick .slick-next::before {
    color: #333;
    font-size: 18px;
    font-weight: bold;
  }
}

.testimonial-text-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 20px 0 20px;
}
.testimonial-view-more {
  margin-top: 24px;
  font-size: 16px;
  font-family: "Noto Serif TC";

  display: inline-flex;
  align-self: flex-start;
  gap: 4px;
  color: #454545;
  text-decoration: underline;
  font-weight: 600;
  margin-top: 15px;
  border-bottom: 1px solid #454545;
  padding-bottom: 1px;
  transition: color 0.2s, border-color 0.2s;
}
.testimonial-view-more:hover {
  color: #000;
  border-bottom-color: #000;
  text-decoration: none;
}
.testimonial-arrow {
  font-size: 1.1em;
  margin-left: 2px;
}

/* VIEW MORE SVG 圖標樣式 */
.view-more-icon {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  vertical-align: middle; /* 確保與文字水平對齊 */
  display: inline-block;
  position: relative;
  top: -1px; /* 微調位置確保完美對齊 */
}

.latest-posts-flex-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 32px auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.latest-post-flex-item {
  display: flex;
  width: 100%;
  overflow: hidden;
  border-bottom: 1px solid #454545;
}
.latest-post-date {
  min-width: 110px;
  color: #535353;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 24px 18px 0 24px;
  letter-spacing: 1px;
}
.latest-post-content {
  flex: 1;
  padding: 24px 32px 24px 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.latest-post-title h3 {
  font-family: "Noto Serif TC";

  font-size: 1.2em;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #222;
}
.latest-post-excerpt {
  color: #444;
  font-size: 1em;
  margin-bottom: 18px;
  line-height: 1.6;
}
.latest-post-view-more {
  font-family: "Noto Serif TC";

  color: #454545;
  text-decoration: underline;
  font-weight: 600;
  align-self: flex-start;
  border-bottom: 1px solid #454545;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.latest-post-view-more:hover {
  color: #000;
  border-bottom-color: #000;
}
@media (max-width: 900px) {
  .latest-posts-flex-wrap {
    max-width: 100%;
    gap: 20px;
  }
  .latest-post-flex-item {
    flex-direction: column;
  }
  .latest-post-date {
    min-width: 100%;
    padding: 16px 16px 0 16px;
    justify-content: flex-start;
  }
  .latest-post-content {
    padding: 16px;
  }
}

/* slick carousel */

.testimonials-slick {
  width: 100%;
  max-width: 1200px;
  margin: 2em auto;
  position: relative;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .testimonials-slick {
    padding-bottom: 48px;
  }
}
.testimonials-slick .slick-slide {
  display: flex;
/*   justify-content: center; */
  align-items: stretch;
  height: auto;
  padding: 0; /* 移除 padding，讓 Slick 的 spaceBetween 生效 */
}
.testimonials-slick .testimonial-card {
  width: 320px; /* 設定固定寬度，讓 Slick 能夠計算間距 */
  max-width: 100%;
  margin: 0 12px; /* 強制設定左右間距 */
}
.testimonials-slick .slick-arrow {
  z-index: 10;
  width: 32px;
  height: 32px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  top: 50%;
  transform: translateY(-50%);
}
.testimonials-slick .slick-prev {
  left: -40px;
}
.testimonials-slick .slick-next {
  right: -40px;
}
@media (max-width: 1024px) {
  .testimonials-slick .testimonial-card {
    width: 300px; /* 平板時稍微減少寬度 */
    margin: 0 10px; /* 平板時減少間距 */
  }
  .testimonials-slick .slick-prev {
    left: -24px;
  }
  .testimonials-slick .slick-next {
    right: -24px;
  }
}
@media (max-width: 768px) {
  .testimonials-slick .testimonial-card {
    width: 280px; /* 小平板時進一步減少寬度 */
    margin: 0 8px; /* 小平板時進一步減少間距 */
  }
}
@media (max-width: 600px) {
  .testimonials-slick .testimonial-card {
    width: 90vw; /* 手機版時設定固定寬度，避免被切到 */
    max-width: 90vw;
  
  }
  .testimonials-slick .slick-prev,
  .testimonials-slick .slick-next {
    left: 0;
    right: 0;
  }
}

.testimonials-slick .custom-arrow {
  background: none;
  border: none;
  color: #000;
  font-size: 28px;
  width: auto;
  height: auto;
  box-shadow: none;
  border-radius: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
.testimonials-slick .slick-prev.custom-arrow {
  left: -32px;
}
.testimonials-slick .slick-next.custom-arrow {
  right: -32px;
}
@media (max-width: 600px) {
  .testimonials-slick .custom-arrow {
    display: none !important;
  }
}
.testimonials-slick .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0; /* 修改：gap為0 */
  height: 3px; /* 修改：高度為3px */
  bottom: -32px;
  position: relative;
  margin-top: 16px;
}
.testimonials-slick .slick-dots li {
  margin: 0 !important;
  padding: 0 !important;
  width: 50px !important; /* 修改：寬度為50px */
  height: 1px !important; /* 修改：一般高度為1px */
  box-shadow: none !important;
}
.testimonials-slick .slick-dots button {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #bbb !important;
  border-radius: 0 !important; /* 修改：移除圓角 */
  opacity: 1 !important;
  transition: background 0.2s;
  font-size: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.testimonials-slick .slick-dots .slick-active button {
  background: #000 !important;
  height: 3px !important; /* 修改：active時高度為3px */
}

/* 案例分享輪播 - 使用與testimonials-slick相同的pagination樣式 */
.case-story-carousel .slick-dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0; /* 修改：gap為0 */
  height: 3px; /* 修改：高度為3px */
  bottom: 0; /* 修改：移除負值 */
  position: relative;
  margin-top: 32px; /* 修改：增加與卡片的距離 */
}
.case-story-carousel .slick-dots li {
  margin: 0 !important;
  padding: 0 !important;
  width: 50px !important; /* 修改：寬度為50px */
  height: 1px !important; /* 修改：一般高度為1px */
  box-shadow: none !important;
}
.case-story-carousel .slick-dots button {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #bbb !important;
  border-radius: 0 !important; /* 修改：移除圓角 */
  opacity: 1 !important;
  transition: background 0.2s;
  font-size: 0 !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.case-story-carousel .slick-dots .slick-active button {
  background: #000 !important;
  height: 3px !important; /* 修改：active時高度為3px */
}

.case-story-carousel .slick-dots li button::before,
.case-story-carousel .slick-dots li button::after {
  content: none !important;
  display: none !important;
}

.testimonials-slick .slick-arrow::before,
.testimonials-slick .slick-arrow::after,
.testimonials-slick .slick-dots li button::before,
.testimonials-slick .slick-dots li button::after {
  content: none !important;
  display: none !important;
}

/* 移除CSS隱藏規則，讓Slick自己控制pagination */

/* --- Swiper 輪播設計稿優化 --- */
.testimonials-swiper-container {
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
.testimonials-swiper-container .swiper-wrapper {
  /* gap: 24px; */
}
.testimonials-swiper-container .swiper-slide {
  background: #f7f7f7;
  /* border-radius: 12px; */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.testimonials-swiper-container .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.testimonials-swiper-container .swiper-button-prev,
.testimonials-swiper-container .swiper-button-next {
  position: absolute;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #bbb;
  background: #fff;
  color: #333;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, color 0.2s, border 0.2s;
  z-index: 20;
  cursor: pointer;
}
.testimonials-swiper-container .swiper-button-prev {
  top: 45%;
  margin-top: -28px;
}
.testimonials-swiper-container .swiper-button-next {
  top: 55%;
  margin-top: -28px;
}
.testimonials-swiper-container .swiper-button-prev:hover,
.testimonials-swiper-container .swiper-button-next:hover {
  background: #eee;
  color: #000;
  border-color: #000;
}
@media (max-width: 900px) {
  .testimonials-swiper-container {
    padding: 0 16px;
  }
  .testimonials-swiper-container .swiper-button-prev,
  .testimonials-swiper-container .swiper-button-next {
    width: 32px;
    height: 32px;
    font-size: 18px;
    right: 4px;
  }
}
@media (max-width: 600px) {
  .testimonials-swiper-container {
    overflow: hidden;
    padding: 0 !important;
  }
  .testimonials-swiper-container .swiper-slide img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .swiper-arrows-vertical {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    display: flex;
    flex-direction: row;
    gap: 8px;
  }
  .swiper-arrows-vertical .swiper-button-next,
  .swiper-arrows-vertical .swiper-button-prev {
    width: 28px;
    height: 28px;
    font-size: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    opacity: 0.95;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
  }
}
.testimonials-swiper-container .swiper-wrapper {
  justify-content: flex-end !important;
}
@media (max-width: 600px) {
  .testimonials-swiper-container .swiper-wrapper {
    justify-content: unset !important;
  }
}
/* --- END Swiper 輪播設計稿優化 --- */

/* 保留自訂外側箭頭樣式 */
.testimonials-swiper-container .swiper-arrows-vertical {
  position: absolute;
  top: 15%;
  right: -15%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 20;
  pointer-events: none;
}
.testimonials-swiper-container .swiper-arrows-vertical .swiper-button-prev,
.testimonials-swiper-container .swiper-arrows-vertical .swiper-button-next {
  position: static !important;
  margin: 0 !important;
  pointer-events: auto;
}
@media (max-width: 900px) {
  .testimonials-swiper-container .swiper-arrows-vertical {
    right: -36px;
  }
}
@media (max-width: 600px) {
  .testimonials-swiper-container .swiper-arrows-vertical {
    right: 5%;
    top: 25%;
  }
  .swiper-arrows-vertical .swiper-button-next,
  .swiper-arrows-vertical .swiper-button-prev {
    background: unset;
    color: #fff;
    border: #fff solid 1px;
    border-radius: 50px;
  }
}

/* 移除 Swiper 專用樣式，恢復 Slick 樣式 */
.custom-carousel-wrapper {
  width: 100%;
  /* max-width: 1200px; */
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  overflow: hidden;
  /* overflow: visible; */
  left: 0;
  margin-bottom: 60px;
}
.custom-swiper-wrapper {
  width: 100% !important;
  justify-content: flex-end !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}
@media (max-width: 600px) {
  .custom-swiper-wrapper {
    overflow: hidden !important;
    display: flex;
    justify-content: center !important;
  }
}
.custom-swiper-outer,
.testimonials-swiper-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.custom-carousel-track {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 24px;
  scroll-behavior: smooth;
  width: 100%;
  max-width: none;
}
.swiper-slide {
  /* width: 33vw !important; */
}
@media (max-width: 600px) {
  .swiper-slide {
    width: 100% !important;
/*     margin: unset !important; */
  }
}
.custom-carousel-item {
  /* flex: 100%; */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.custom-carousel-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}
.custom-carousel-arrows-vertical {
  position: absolute;
  top: 15%;
  right: -48px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 20;
  pointer-events: none;
}
.custom-carousel-arrows-vertical .custom-arrow {
  background: #fff;
  border: 1.5px solid #bbb;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  color: #333;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: background 0.2s, color 0.2s, border 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.custom-carousel-arrows-vertical .custom-arrow:hover {
  background: #eee;
  color: #000;
  border-color: #000;
}
@media (max-width: 900px) {
  .custom-carousel-arrows-vertical {
    right: -36px;
  }
  .custom-carousel-item {
    min-width: 50vw;
    flex-basis: 50vw;
  }
  .custom-carousel-arrows-vertical .custom-arrow {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  .custom-carousel-arrows-vertical {
    right: -20px;
  }
  .custom-carousel-item {
    min-width: 100vw;
    flex-basis: 100vw;
  }
  .custom-carousel-arrows-vertical .custom-arrow {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }
}

/* custom_menu RWD burger-btn + popup menu */
.custom-menu-burger-btn,
.custom-menu-popup {
  display: none;
}
@media (max-width: 1024px) {
  .custom-menu-burger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border: 1px solid #bbbbbb00;
    border-radius: 8px;
    cursor: pointer;
    z-index: 1001;
    position: relative;
    margin: 0 0 0 8px;
  }
  .custom-menu-burger-btn span {
    display: block;
    height: 3px;
    width: 28px;
    background: #454545 !important;
    margin: 2px 0;
    border-radius: 2px;
    transition: all 0.3s;
  }
  .custom-menu-popup {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
  }
  .custom-menu-popup.active {
    display: flex;
  }
  .custom-menu-popup-inner {
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    background: #fff;
    border-radius: 18px;
    max-width: 92vw;
    width: 340px;
    height: 70vh;
    max-height: 80vh;
    padding: 36px 24px 24px 24px;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 1.5px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #bbb #f7f7f7;
    transition: box-shadow 0.2s, border-radius 0.2s;
    margin-top: 40px;
  }
  .custom-menu-popup-inner::-webkit-scrollbar {
    width: 6px;
    background: #f7f7f7;
    border-radius: 8px;
  }
  .custom-menu-popup-inner::-webkit-scrollbar-thumb {
    background: #bbb;
    border-radius: 8px;
  }
  .custom-menu-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #333;
    cursor: pointer;
    z-index: 10;
  }
  .custom-menu-popup-content,
  .custom-menu-popup-content nav,
  .custom-menu {
    width: 100%;
    box-sizing: border-box;
  }
  .custom-menu-popup-inner,
  .custom-menu-popup-content,
  .custom-menu-popup-content nav,
  .custom-menu,
  .custom-menu ul,
  .custom-menu li {
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    width: 100%;
  }
  /* 隱藏桌面 menu */
  .custom-menu-rwd-wrap .custom-menu-wrapper {
    display: none !important;
  }
  .custom-menu-container {
    margin-top: 60px;
    padding: 0 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: stretch;
  }
  .custom-menu {
    flex-direction: column;
    gap: 18px;
    align-items: stretch;
    width: 100%;
  }
  .custom-menu a {
    font-size: 1.25em;
    font-weight: 600;
    padding: 12px 0;
    letter-spacing: 0.5px;
    color: #454545 !important;
    text-decoration: none !important;
    border-radius: 8px;
    transition: background 0.18s, color 0.18s;
    display: block;
    text-align: left;
  }
  .custom-menu a:hover {
    background: #f2f2f2;
    color: #000 !important;
  }
  .custom-menu li > a::before {
    content: "- ";
    color: #454545;
    font-weight: 600;
    margin-right: 4px;
    font-size: 1.1em;
    letter-spacing: 0.2em;
  }
}

/* custom_menu 水平/垂直排列與文字樣式修正 */
.custom-menu {
  display: flex;
  flex-direction: row;
  gap: 20px;
}
@media (max-width: 1024px) {
  .custom-menu {
    flex-direction: row;
    gap: 16px;
  }
}
@media (max-width: 900px) {
  .custom-menu {
    flex-direction: column;
    gap: 10px;
  }
}
.custom-menu a {
  color: #454545 !important;
  text-decoration: none !important;
}

.custom-menu ul,
.custom-menu li {
  list-style: none;
  padding: 0;
  margin: 0;
}

button:focus,
button:hover {
  background-color: unset !important;

  color: unset !important;

  text-decoration: none;
}

/* 進場一行行動畫 */
.line-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.line-animate.in-view {
  opacity: 1;
  transform: translateY(0);
}

.elementor-319
  .elementor-element.elementor-element-870f64e
  .fluentform-widget-wrapper
  .ff-el-group
  .ff-btn-submit {
  background-color: #1a7efb !important;
  background-color: #454545 !important;
  color: #ffffff !important;
  border-radius: 50px;
}

/* cards-column.css - 文章專欄卡片區塊樣式 */
.cards-column-section {
  max-width: 1280px;
}
.cards-column-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.cards-column-card {
  display: flex;
  flex-direction: row;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.cards-column-card-img {
  width: 50%;
  min-height: 480px; /* 調整為480px以容納圖片高度 */
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.cards-column-card-img img {
  width: 640px !important;
  height: 480px !important;
  object-fit: cover;
  display: block;
}
.cards-column-card-content {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 48px 48px;
  text-align: center;
}
.cards-column-title {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 12px;
  color: #222;
}
.cards-column-date {
  font-size: 0.98em;
  color: #454545;
  margin-bottom: 16px;
}
.cards-column-excerpt {
  color: #444;
  font-size: 1em;
  line-height: 1.6;
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
}
.cards-column-viewmore {
  display: inline-block;
  margin-top: 10px;
  font-size: 1em;
  color: #454545;
  text-decoration: underline;
  font-weight: 600;
  border-bottom: 1px solid #454545;
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.cards-column-viewmore:hover {
  color: #000;
  border-bottom-color: #000;
}
.cards-column-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
}
.cards-column-arrow {
  font-size: 1.2em;
  color: #888;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 4px;
  transition: background 0.15s;
  user-select: none;
}
.cards-column-arrow:hover {
  background: #f0f0f0;
  color: #222;
}
.cards-column-page {
  font-size: 1em;
  color: #888;
  margin: 0 4px;
  cursor: pointer;
  padding: 2px 8px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s, border-bottom 0.15s !important; /* 添加border-bottom動畫 */
  text-decoration: none;
  border-bottom: 2px solid transparent !important; /* 預設透明底線 */
}
.cards-column-page.active {
  background: transparent !important; /* 移除背景色 */
  color: #222 !important; /* 改為深色文字 */
  border-bottom: 2px solid #222 !important; /* 添加下底線 */
  border-radius: 0 !important; /* 移除圓角 */
}
@media (max-width: 700px) {
  .cards-column-card {
    flex-direction: column;
  }
  .cards-column-card-img, .cards-column-card-content {
    width: 100%;
    min-height: 160px;
    padding: 18px 10px;
  }
  .cards-column-card-content {
    padding: 18px 10px;
  }
}

/* 隱藏 Swiper 的預設樣式 */
.testimonials-swiper-container .swiper-pagination {
  display: none;
}





/* 案例分享輪播 - 完全獨立的樣式系統 */
.case-story-carousel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  overflow: visible; /* 允許 arrow button 顯示在容器外側 */
  padding: 0 30px; /* 為外側 arrow button 騰出空間 */
}

.case-story-slides {
  width: 100%;
  position: relative;
  display: flex; /* 預設 flex 布局 */
  flex-wrap: wrap; /* 允許換行 */
  gap: 20px; /* 間距 */
  justify-content: center; /* 置中 */
  align-items: center;
}

.case-story-slides.slick-initialized {
  display: block; /* Slick 初始化後改為 block */
  flex-wrap: nowrap; /* 不換行 */
  gap: 0; /* 移除間距 */
}

.case-story-item {
  width: calc(50% - 10px); /* 預設兩列布局 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
  transition: none; /* 移除過渡效果，避免閃爍 */
}

.case-story-slides.slick-initialized .case-story-item {
  width: 50% !important; /* Slick 初始化後的寬度 */
  transition: none; /* 移除過渡效果 */
}

.case-story-image {
  width: 100%;
  height: auto;
  display: block;
  text-align: center;
  margin: 0 auto;
  background: none;
  border: none;
}

.case-story-image img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  transition: none; /* 移除過渡效果，避免閃爍 */
}

/* 案例分享輪播的 Arrow Navigation - 卡片外側位置，無 hover 效果 */
.case-story-nav {
  display: none !important; /* 修改：隱藏arrow btn */
}

.case-story-prev,
.case-story-next {
  display: block !important; /* 強制顯示 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border: none;
  color: #333;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: none; /* 移除過渡效果 */
}

.case-story-prev {
  left: -20px; /* 左箭頭位置在卡片外側 */
}

.case-story-next {
  right: -20px; /* 右箭頭位置在卡片外側 */
}

.case-story-prev::before,
.case-story-next::before {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

/* 案例分享輪播的響應式設計 - 與 testimonial 輪播一致 */
@media (max-width: 1024px) {
  .case-story-item {
    width: calc(50% - 10px); /* 平板版保持兩列 */
  }
  
  .case-story-nav {
    padding: 0 15px;
  }
  
  .case-story-prev,
  .case-story-next {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  .case-story-item {
    width: calc(50% - 10px); /* 小平板版保持兩列 */
  }
  
  .case-story-nav {
    padding: 0 10px;
  }
  
  .case-story-prev,
  .case-story-next {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

@media (max-width: 600px) {
  .case-story-item {
    width: 100%; /* 手機版單列 */
  }
  
  .case-story-nav {
    padding: 0 15px;
  }
  
  .case-story-prev,
  .case-story-next {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* 案例分享輪播的 Slick 特定樣式覆蓋 */
.case-story-slides.slick-initialized .slick-slide {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 50% !important; /* 桌機版顯示 2 張 */
  min-width: 50% !important;
  max-width: 50% !important;
  box-sizing: border-box !important;
}

.case-story-slides.slick-initialized .slick-track {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
}

.case-story-slides.slick-initialized .slick-list {
  width: 100% !important;
  overflow: hidden !important;
}

/* 桌機版特定樣式 */
@media (min-width: 1025px) {
  .case-story-slides.slick-initialized .slick-slide {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    padding: 0 10px !important;
  }
}

/* 平板版特定樣式 */
@media (max-width: 1024px) and (min-width: 769px) {
  .case-story-slides.slick-initialized .slick-slide {
    width: 50% !important;
    min-width: 50% !important;
    max-width: 50% !important;
    padding: 0 8px !important;
  }
}

/* 手機版特定樣式 */
@media (max-width: 600px) {
  .case-story-slides.slick-initialized .slick-slide {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}



/* FAQ 樣式 */
.faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px 0;
}

.faq-item {
  margin-bottom: 20px;
  border: none; /* 移除外框線 */
  border-radius: 0; /* 移除圓角 */
  overflow: visible; /* 改為visible */
  transition: all 0.3s ease;
  border-bottom: 1px solid #898989; /* 底線顏色改為 #898989 */
}

.faq-item:hover {
  border-color: transparent; /* 移除hover時的邊框 */
  box-shadow: none; /* 移除hover時的陰影 */
}

.faq-question {
  background: transparent; /* 移除背景色 */
  padding: 15px 0 8px 0; /* 減少padding，特別是底部 */
  margin: 0;
  font-family: "Noto Sans TC", "Noto Sans CJK TC", "Noto Sans", "Arial", "sans-serif" !important;
  font-size: 20px; /* 修改：字級20px */
  font-weight: bold; /* 修改：粗體 */
  color: #454545; /* 標題文字顏色 */
  cursor: default; /* 移除cursor pointer */
  transition: color 0.3s ease;
  border: none; /* 移除所有邊框 */
}

.faq-question:hover {
  background: transparent; /* 移除hover背景 */
  color: #333; /* hover時稍微深一點的顏色 */
}

/* 問題編號樣式 */
.faq-number {
  color: #C39E98 !important; /* 問題編號顏色 */
  font-weight: bold;
  margin-right: 8px;
}

.faq-answer {
  padding: 8px 0 15px 0; /* 減少頂部padding，增加底部padding */
  background: transparent; /* 移除背景色 */
  color: #555;
  line-height: 1.6;
  font-size: 16px;
  border: none; /* 移除答案區域的邊框 */
}

/* FAQ 響應式設計 */
@media (max-width: 768px) {
  .faq-container {
    padding: 15px;
  }
  
  .faq-question {
    padding: 15px;
    font-size: 16px;
  }
  
  .faq-answer {
    padding: 15px;
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .faq-question {
    padding: 12px;
    font-size: 15px;
  }
  
  .faq-answer {
    padding: 12px;
    font-size: 14px;
  }
}

/* 案例分享輪播的 Arrow Button 樣式 - 最高優先級 */
.testimonials-slick.case-story-slick .slick-prev,
.testimonials-slick.case-story-slick .slick-next {
  display: block !important; /* 強制顯示 */
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 1001 !important; /* 確保在最上層 */
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: none !important;
  border-radius: 50% !important;
  color: #333 !important;
  font-size: 20px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.testimonials-slick.case-story-slick .slick-prev {
  left: 10px !important; /* 左箭頭位置 */
}

.testimonials-slick.case-story-slick .slick-next {
  right: 10px !important; /* 右箭頭位置 */
}

.testimonials-slick.case-story-slick .slick-prev::before,
.testimonials-slick.case-story-slick .slick-next::before {
  color: #333 !important;
  font-size: 18px !important;
  font-weight: bold !important;
}

/* 案例分享輪播的響應式 Arrow Button 樣式 */
@media (min-width: 1025px) {
  .testimonials-slick.case-story-slick .slick-prev {
    left: -40px !important; /* 桌機版左箭頭位置 */
  }
  
  .testimonials-slick.case-story-slick .slick-next {
    right: -40px !important; /* 桌機版右箭頭位置 */
  }
  
  .testimonials-slick.case-story-slick .slick-prev,
  .testimonials-slick.case-story-slick .slick-next {
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
}

@media (max-width: 1024px) and (min-width: 601px) {
  .testimonials-slick.case-story-slick .slick-prev {
    left: -24px !important; /* 平板版左箭頭位置 */
  }
  
  .testimonials-slick.case-story-slick .slick-next {
    right: -24px !important; /* 平板版右箭頭位置 */
  }
  
  .testimonials-slick.case-story-slick .slick-prev,
  .testimonials-slick.case-story-slick .slick-next {
    width: 32px !important;
    height: 32px !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
}

/* ACF Repeater Field 短代碼字體樣式 */
/* 護膚項目 */
.skin-care-items .item-title {
  font-size: 18px !important;
  font-weight: normal;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.3;
}

.skin-care-items .item-description {
  font-size: 14px !important;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 雷射治療項目 */
.laser-treatment-items .item-title {
  font-size: 18px !important;
  font-weight: normal;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.3;
}

.laser-treatment-items .item-description {
  font-size: 14px !important;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 緊膚項目 */
.skin-tightening-items .item-title {
  font-size: 18px !important;
  font-weight: normal;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.3;
}

.skin-tightening-items .item-description {
  font-size: 14px !important;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 體雕項目 */
.body-sculpting-items .item-title {
  font-size: 18px !important;
  font-weight: normal;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.3;
}

.body-sculpting-items .item-description {
  font-size: 14px !important;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 臉部美化項目 */
.facial-enhancement-items .item-title {
  font-size: 18px !important;
  font-weight: normal;
  color: #333;
  margin-bottom: 8px;
  line-height: 1.3;
}

.facial-enhancement-items .item-description {
  font-size: 14px !important;
  color: #666;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* 響應式設計 - 手機版字體調整 */
@media (max-width: 768px) {
  .skin-care-items .item-title,
  .laser-treatment-items .item-title,
  .skin-tightening-items .item-title,
  .body-sculpting-items .item-title,
  .facial-enhancement-items .item-title {
    font-size: 16px !important;
  }
  
  .skin-care-items .item-description,
  .laser-treatment-items .item-description,
  .skin-tightening-items .item-description,
  .body-sculpting-items .item-description,
  .facial-enhancement-items .item-description {
    font-size: 13px !important;
  }
}

@media (max-width: 480px) {
  .skin-care-items .item-title,
  .laser-treatment-items .item-title,
  .skin-tightening-items .item-title,
  .body-sculpting-items .item-title,
  .facial-enhancement-items .item-title {
    font-size: 15px !important;
  }
  
  .skin-care-items .item-description,
  .laser-treatment-items .item-description,
  .skin-tightening-items .item-description,
  .body-sculpting-items .item-description,
  .facial-enhancement-items .item-description {
    font-size: 12px !important;
  }
}

/* 沒有內容時的提示文字樣式 */
.no-content {
  color: #656565 !important; /* 很淺的灰色 */
  font-size: 14px;
  font-style: italic;
  text-align: center;
  padding: 20px;
  margin: 10px 0;
}

/* ACF錯誤提示樣式 */
.acf-error {
  color: #999 !important; /* 淺灰色 */
  font-size: 13px;
  text-align: center;
  padding: 15px;
  margin: 10px 0;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 4px;
}

/* RS Info Content 樣式 */
.rs-info-content {
  height: 350px !important;
  resize: vertical; /* 允許垂直調整大小 */
}
@media (max-width: 768px) {
  .rs-info-content {
    height: 250px !important;
  }
}

/* 送出表單按鈕字體樣式 */
.ff-btn-submit {
  font-family: "Noto Serif TC", serif !important;
  font-weight: bold !important;
}

/* WP Table Builder 字體樣式 - 根據實際HTML結構更新 */
.wptb-preview-table,
.wptb-preview-table .wptb-cell,
.wptb-preview-table .wptb-text-container,
.wptb-preview-table .wptb-text-container p {
  font-family: "Noto Sans TC", sans-serif !important;
}

/* WP Table Builder 第一行（標題行）樣式 */
.wptb-preview-table .wptb-row:first-child .wptb-cell {
  background-color: #EBEBEB!important;
}

.wptb-preview-table .wptb-row:first-child .wptb-text-container,
.wptb-preview-table .wptb-row:first-child .wptb-text-container p {
  font-size: 20px !important;
  font-weight: bold !important;
}

/* WP Table Builder 第一列（標題列）樣式 */
.wptb-preview-table .wptb-cell[data-x-index="0"] {
  background-color: #EBEBEB !important;
  width: 20% !important; /* 第一列寬度設為20% */
}

.wptb-preview-table .wptb-cell[data-x-index="0"] .wptb-text-container,
.wptb-preview-table .wptb-cell[data-x-index="0"] .wptb-text-container p {
  font-size: 20px !important;
  font-weight: bold !important;
}

/* WP Table Builder 其他欄位樣式 */
.wptb-preview-table .wptb-text-container,
.wptb-preview-table .wptb-text-container p {
  font-size: 16px !important;
}

/* WP Table Builder 其他格子背景色 - 白色（排除第一行和第一列） */
.wptb-preview-table .wptb-row:not(:first-child) .wptb-cell:not([data-x-index="0"]) {
  background-color: #ffffff !important;
}

/* WP Table Builder 表格整體樣式 */
.wptb-preview-table {
  border-collapse: collapse !important;
  width: 100% !important;
}

.wptb-preview-table .wptb-cell {
  padding: 12px 16px !important;
  border: 1px solid #000000 !important;
  text-align: center !important;
}

/* 確保樣式優先級 - 覆蓋內聯樣式 */
.wptb-preview-table .wptb-cell[style*="background-color"] {
  background-color: #B9B9B9 !important;
}

.wptb-preview-table .wptb-text-container[style*="color"] {
  color: inherit !important;
}

/* RS Form Info 樣式 - 針對內部checkbox項目 */
.rs-form-info .ff-el-input--content {
  display: flex !important;
  justify-content: space-between !important; /* 恢復space-between */
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

/* RS Form Info 內的 checkbox 項目 */
.rs-form-info .ff-el-form-check {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* 手機版 RS Form Info 樣式 */
@media (max-width: 768px) {
  .rs-form-info .ff-el-input--content {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  
  .rs-form-info .ff-el-form-check {
    width: 100% !important;
  }
}

/* RS Button Hover Effect */
.rs-btn:hover {
    opacity: 0.5;
}