/* ========================================
   Swiper 共用樣式（取代原本 Slick）
   .bar-pagination：長條分頁點，套用在任何 Swiper 容器上即可
   ======================================== */
.bar-pagination .swiper-pagination-bullet {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: #000;
  opacity: .25;
  margin: 0 4px !important;
  transition: opacity .3s, background-color .3s;
}
.bar-pagination .swiper-pagination-bullet-active {
  background: #c8a063;
  opacity: 1;
}

/* 大圖輪播（Bootstrap Carousel）指示點：統一改成長條、選中為金色，跟 Swiper 分頁一致 */
#myCarousel .carousel-indicators [data-bs-target] {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  opacity: .5;
  background-color: #fff;
}
#myCarousel .carousel-indicators .active {
  background-color: #c8a063;
  opacity: 1;
}

/* Index3 影音報導 - Swiper */
#Index3 .newsSwiper {padding-bottom: 40px;}
#Index3 .newsSwiper .swiper-slide {height: auto;}

/* 全站保險：避免任何裝飾性元素（如圖片陰影）意外撐開版面造成手機橫向捲動 */
html, body {
  overflow-x: hidden;
}

/* Feature 視覺設計概念 - Swiper */
#Feature .featureSwiper {padding-bottom: 40px;}
#Feature .featureSwiper .swiper-slide {height: auto;}

/* 入口設計理念 - 圖片後方灰色偏移陰影（不受斷點/版面影響） */
.imgShadow {
  position: relative;
  display: block;
  margin-bottom: 40px; /* 圖片(含陰影)與下方標題之間的間距 */
}
.imgShadow img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
/* 桌面版：加大欄位左右間距，讓三張圖之間的留白更明顯 */
@media (min-width: 768px) {
  .feature {
    padding-left: 37px;
    padding-right: 37px;
  }
}
.imgShadow::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 35px;
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
  z-index: 0;
}
/* 手機版：欄位留白加大，圖片跟著縮小，陰影才有內縮空間、不會太貼邊 */
@media (max-width: 767px) {
  .feature {
    padding-left: 10px;
    padding-right: 45px;
  }
  .imgShadow::after {
    top: 15px;
    left: 25px;
  }
}


/* Team 標誌牆 - Swiper */
#Team .teamSwiper {padding-bottom: 40px;}
#Team .teamSwiper .swiper-slide img {width: 100%;text-decoration: none;filter: grayscale(80%);transition: .3s;}
#Team .teamSwiper .swiper-slide img:hover {filter: grayscale(0%);}

/* Plan 未來展望 - Swiper（主圖 + 縮圖導覽）*/
#Advantage .planThumbsSwiper {padding-bottom: 40px;margin-top: 8px;}
#Advantage .planThumbsSwiper .swiper-slide {opacity: .5;cursor: pointer;transition: opacity .3s;}
#Advantage .planThumbsSwiper .swiper-slide-thumb-active {opacity: 1;}

#header {position: fixed;z-index: 10;right: 0;left: 0;top: 0;text-align: center;box-shadow: 0px 7px 7px -4px rgba(0,0,0,0.5);}
#header .collapse .navbar-nav{margin-left: auto;}

/* Header 漢堡選單：展開時，原本手繪三條線圖示換成 X */
.navbar-toggler {
  border: none;
  box-shadow: none !important;
  position: relative;
}
.navbar-toggler-icon {
  transition: opacity 0.2s ease;
}
.navbar-toggler-close {
  display: none;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
}
.navbar-toggler-close-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background-color: #c8a063;
}
.navbar-toggler-close-line-1 { transform: translateY(-50%) rotate(45deg); }
.navbar-toggler-close-line-2 { transform: translateY(-50%) rotate(-45deg); }

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  display: none;
}
.navbar-toggler[aria-expanded="true"] .navbar-toggler-close {
  display: inline-block;
}
.header--fixed {position: fixed;z-index: 10;right: 0;left: 0;top: 0}
.headroom {transition: transform .25s ease-in-out;will-change: transform}
.headroom--pinned {transform: translateY(0)}
.headroom--unpinned {transform: translateY(-100%)}

.heroSwiper{margin-top: 5.5rem}
.heroSwiper .swiper-pagination {bottom: 2rem;}
.heroSwiper .swiper-button-prev,
.heroSwiper .swiper-button-next {color: #fff;}
.carousel-inner picture{-webkit-filter:brightness(.9);}
footer {font-size: 0.8rem;letter-spacing: 3px}

.bg-dark2 {--bs-bg-opacity: 1;background-color: #9e9e9e!important;}

/*loading*/
#spinner {
opacity:0;
visibility:hidden;
transition:opacity .5s ease-out,visibility 0 linear .5s;
z-index:999999
}
#spinner.show {
transition:opacity .5s ease-out,visibility 0 linear 0;
visibility:visible;
opacity:1
}

.navbar-brand img{
width: 100%;
max-width: 250px;
height: auto;
}

#About .slick-slide img {width: 100%;text-decoration: none;}
#About .slick-slide a {text-decoration: none;}
#About .slick-prev: before,.slick-next: before {color: black;}
#About .slick-slide {transition: all ease-in-out .3s;}
#About .slick-slide {margin: 0px 0px;} 


.title h2 {font-weight:700;color:#313131;line-height: 30px}
.text-title2{font-weight: bold;font-size: 1.2rem}
.text-gold {color:#c8a063}
.text-gray {color:#646B65}
.text-ps {font-size:12px;color:#c8a063;display: inline-block;}
.text-small {font-size:12px;}
.Must{display: inline-block;}
.WhiteLine{margin-bottom: -0.1rem}
.GoldBg{background-color: #f8f4f0}
.GoldLine{-moz-transform:scaleY(-1);-webkit-transform:scaleY(-1);-o-transform:scaleY(-1);transform:scaleY(-1);margin-bottom: -0.1rem}
/* ========================================
   服務詳情彈窗（設施服務規劃 View details）優化
   ======================================== */
.modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* 關閉按鈕：固定在右上角，圓形底色，加大點擊範圍 */
.modal-headerClose {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 20;
}
.CLOSE {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #c8a063;
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.25s ease;
}
.CLOSE:hover {
  background-color: #c8a063;
  transform: rotate(90deg);
}
.CLOSE-x {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
}
.CLOSE-x-line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background-color: #c8a063;
  transition: background-color 0.25s ease;
}
.CLOSE-x-line-1 { transform: translateY(-50%) rotate(45deg); }
.CLOSE-x-line-2 { transform: translateY(-50%) rotate(-45deg); }
.CLOSE:hover .CLOSE-x-line {
  background-color: #fff;
}

/* Modal 內容排版 */
.modal-body {
  padding: 2.5rem 2rem 2rem;
}
.modal-body h3.text-gold {
  margin-bottom: 0.25rem;
  font-weight: 700;
}
.modal-body h6.text-gray {
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}
.modal-body .row.g-1 {
  --bs-gutter-x: 0.75rem;
  margin-bottom: 1.75rem !important;
}
.modal-body .row.g-1 img {
  transition: transform 0.3s ease;
}
.modal-body .row.g-1 img:hover {
  transform: scale(1.03);
}
.modal-body h5.text-gold {
  position: relative;
  margin-top: 1.5rem !important;
  margin-bottom: 0.6rem;
  padding-left: 14px;
  font-weight: 700;
}
.modal-body h5.text-gold::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: 2px;
  background-color: #c8a063;
}
.modal-body p {
  line-height: 1.8;
  color: #4a4a4a;
}

@media (max-width: 767px) {
  .modal-body {
    padding: 2.25rem 1.25rem 1.5rem;
  }
}

#Team .logo img{filter: grayscale(80%);}
#Team .logo img:hover{filter: grayscale(0%);transition: .3s}


@media(min-width:851px) {
.pt-5 {padding-top: 1rem !important;}
.pb-5 {padding-bottom: 1rem !important;}
.mt-7{margin-top: 7rem !important;}
.mb-5 {margin-bottom: 3rem !important;}
.mt-5 {margin-top: 3rem !important;}
}
@media screen and (min-width: 320px) and (max-width:850px) {
.pt-5 {padding-top: 2.3rem !important;}
.pb-5 {padding-bottom: 2.3rem !important;}
.mt-7{margin-top: 3rem !important;}
.mb-5 {margin-bottom: 0rem !important;}
.mt-5 {margin-top: 0rem !important;}
.navbar-collapse .nav-item{border-bottom: solid 1px #EBEBEA;margin: 5px 0}
}

/*滾軸樣式 */
::-webkit-scrollbar {width: 8px;height: 3px}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #c8a063;}
::-webkit-scrollbar-thumb:hover {background: #646B65;}

/*iframe*/
.videobox {position: relative;width: 100%;height: 0;padding-bottom: 56.25%;}
.videobox iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.map {display: block;position: relative;height: 0;overflow: hidden;padding: 0;padding-bottom: 75%;}
.map iframe {position: absolute;height: 100%;width: 100%;left: 0;top: 0;}

/*Index*/
#Index1 .card {
  border: none;
  background: transparent;
}
#Index1 .pic {
  position: relative;
  overflow: hidden;
}
#Index1 .pic img {
  transform: scale(1);
  transition: transform 0.6s ease;
}
#Index1 .card:hover .pic img {
  transform: scale(1.08);
}
#Index1 .pic::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(200, 160, 99, 0.4), rgba(200, 160, 99, 0) 55%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
#Index1 .card:hover .pic::after {
  opacity: 1;
}
#Index1 .card-title {
  transition: color 0.25s ease;
}
#Index1 .card:hover .card-title {
  color: #A98467;
}
#Index .Stop table tr{writing-mode: vertical-rl!important;text-orientation: upright!important;vertical-align: middle;text-align: center;}
#IndexIcon img{
  background-color: #C8A063;
  border-radius: 100px;
  transition: transform 0.4s ease, background-color 0.3s ease, box-shadow 0.4s ease;
}
#IndexIcon .col-lg-4:hover img{
  background-color: #A98467;
  transform: scale(1.12) rotate(-8deg);
  box-shadow: 0 0 0 8px rgba(200, 160, 99, 0.2);
}
#IndexIcon h5.text-gold{
  transition: color 0.3s ease;
}
#IndexIcon .col-lg-4:hover h5.text-gold{
  color: #A98467;
}
#IndexIcon .bi-dash{
  display: inline-block;
  transition: transform 0.35s ease, color 0.3s ease;
}
#IndexIcon .col-lg-4:hover .bi-dash{
  transform: scaleX(2.5);
  color: #A98467;
}
#ServiceInside p{line-height: 30px;margin-bottom: 1rem;margin-top: 1rem}
#Index2 ul {list-style:disc;}
/*IndexEnd*/

/*News*/
@media(min-width:768px) {#News img {margin-bottom:0.8rem}}
#News .card-date {font-size:12px;color:#c8a063;font-weight: 700;margin-bottom:0.3rem}
#News .card-title {font-size: 17px}
#News .card-author {font-size:12px;color: #514F4D}
#ServiceInside ul{list-style-type: square}
/*NewsEnd*/

/*Idea*/
#Idea .card {
position:relative;
display:flex;
flex-direction:column;
min-width:0;
word-wrap:break-word;
background-color:#fff;
background-clip:border-box;
border:0px solid rgba(0,0,0,0.125);
border-radius:0
}
/*IdeaEnd*/

/*Feature*/
#Feature ol li {font-size:1rem;margin-bottom:1.5rem}
#Feature .Firstword{font-size: 2.6rem}

/*FeatureEnd*/

/*Progress*/
#Progress ol, #Progress ul {list-style: none;}
/*ProgressEnd*/

@media screen and (min-width: 320px) and (max-width:850px) {
#Slogan h3 {color:#fff;line-height:35px;text-shadow:2px 2px 4px #000;font-size:1.25rem}
#Slogan {padding:5rem 3rem;background:url(../image/feature/f1.jpg) center center no-repeat;background-size:cover;position:relative}
}

@media(min-width:851px) {
#Slogan h3 {color:#fff;line-height:35px;text-shadow:2px 2px 4px #000;font-size:1.75rem}
#Slogan {padding:8rem 3rem;background:url(../image/feature/f1.jpg) center center no-repeat;background-size:cover;position:relative}
}

@media (min-width: 1024px) {
#Slogan {background-attachment:fixed}
}


/*ZoomIn Hover — 與「設施服務規劃」統一動畫節奏（縮放倍率、時間）與金色調性*/
    .hover-mask a {
      display: block;
      position: relative;
      overflow: hidden;
    }
    .hover-mask img {
      width: 100%;
      height: auto;
      transform: scale(1);
      transition: transform 0.6s ease;
    }
    .hover-mask:hover img {
      transform: scale(1.08);
    }
    /* 金色調性蒙版，跟設施服務規劃的 hover 效果呼應 */
    .hover-mask a::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to top, rgba(200, 160, 99, 0.4), rgba(200, 160, 99, 0) 55%);
      opacity: 0;
      transition: opacity 0.35s ease;
    }
    .hover-mask:hover a::before {
      opacity: 1;
    }
    .hover-mask a h2 {
      display: block;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      margin-top: 0px;
      margin-bottom: 0px;
      height: 100%;
      width: 100%;
      padding: 40% 50%;
      text-align: center;
      background-color: transparent;
      transition: opacity 0.3s ease;
      background-image: url("../image/youtube.png");
      background-position: center;
      background-repeat: no-repeat;
      opacity: 1;
    }
    .hover-mask:hover a h2 {
      background-image: url("../image/youtube2.png");
      background-position: center;
      background-repeat: no-repeat;
      opacity: 1;
    }
    /* 地理位置&項目影片：影片縮圖本身效果已由 .hover-mask 統一處理，這裡不額外加整塊浮動 */

    /* 影音報導：卡片標題滑過變色，呼應圖片區的金色調性 */
    #Index3 .swiper-slide .text-title2 {
      transition: color 0.25s ease;
    }
    #Index3 .swiper-slide:hover .text-title2 {
      color: #A98467;
    }


    /*與我聯絡*/
        :root{
            --dy-gold: #b8955a;
            --dy-gold-light: #d8b98a;
            --dy-ink: #2a2620;
            --dy-line: #e6ddcd;
        }

        .dy-intro{
            max-width: 760px;
            margin: 0 auto;
            text-align: left;
            color: #5a5347;
            line-height: 1.9;
        }

        /* ---- 上下堆疊版面：表單／聯絡資訊（不做卡片外框，純內容分段） ---- */
        .dy-contact-grid{
            display:flex;
            flex-direction:column;
            gap: 40px;
            max-width: 760px;
            margin: 0 auto;
        }

        .dy-form-block{
            padding-top: 8px;
        }

        .dy-side{
            padding-top: 28px;
            border-top: 1px solid var(--dy-line);
        }
        .dy-side p{
            line-height: 2;
        }
        .dy-side .text-gold{
            color: var(--dy-gold);
        }
        .dy-side a{
            color: var(--dy-gold);
        }
        .dy-side a:hover{ color:#8a6c3c; }

        /* ---- 段落小標籤：比照 feature.html「中文 ENGLISH ―――」的寫法 ---- */
        .dy-eyebrow{
            display:flex;
            align-items:baseline;
            gap:10px;
            margin-bottom: 18px;
        }
        .dy-eyebrow .zh{
            font-size:1rem;
            font-weight:600;
            color: var(--dy-ink);
            letter-spacing:.05em;
        }
        .dy-eyebrow .en{
            font-family:'Raleway', sans-serif;
            font-size:.72rem;
            letter-spacing:.15em;
            color: var(--dy-gold);
            text-transform:uppercase;
            white-space:nowrap;
        }
        .dy-eyebrow .en::after{
            content:"―――";
            margin-left:8px;
            letter-spacing:0;
        }
        #contactForm .form-label{
            color: var(--dy-ink);
            font-weight:500;
            font-size:.93rem;
            display:flex;
            align-items:baseline;
        }
        #contactForm .Must{
            color:#b3492f;
            display:inline-block;
            width:1em;
            text-align:left;
        }

        #contactForm .form-control{
            width:100%;
            border-radius:4px;
            border:1px solid #ddd4c2;
            padding:.65rem .9rem;
            background:#fdfcf9;
        }
        #contactForm .form-control:focus{
            border-color: var(--dy-gold);
            box-shadow: 0 0 0 .18rem rgba(184,149,90,.18);
            background:#fff;
        }

        /* 業種：把預設 radio 換成可點選色塊，仍是原生 radio，不影響驗證邏輯 */
        #contactForm .dy-industry-group{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        #contactForm .dy-industry-group .form-check{
            margin:0;
            padding:0;
        }
        #contactForm .dy-industry-group .form-check-input{
            position:absolute;
            opacity:0;
            width:0; height:0;
        }
        #contactForm .dy-industry-group .form-check-label{
            display:inline-block;
            padding:.5rem 1.1rem;
            border:1px solid #ddd4c2;
            border-radius: 999px;
            font-size:.88rem;
            color:#6b6353;
            background:#fdfcf9;
            cursor:pointer;
            transition: all .15s ease;
        }
        #contactForm .dy-industry-group .form-check-input:checked + .form-check-label{
            background: var(--dy-gold);
            border-color: var(--dy-gold);
            color:#fff;
        }
        #contactForm .dy-industry-group .form-check-input:focus-visible + .form-check-label{
            outline: 2px solid var(--dy-gold);
            outline-offset: 2px;
        }

        #contactForm #submitBtn{
            display:block;
            width:100%;
            padding:.85rem 1rem;
            border-radius:4px;
            letter-spacing:.15em;
            font-size:.95rem;
            font-weight:600;
            background: var(--dy-gold);
            border: 1px solid var(--dy-gold);
            color:#fff;
            transition: all .2s ease;
            margin-bottom: 20px;
        }
        #contactForm #submitBtn:hover{
            background: #a17d47;
            border-color: #a17d47;
            color:#fff;
        }
        #contactForm #submitBtn:disabled{
            opacity:.7;
        }

        #formMsg{
            margin-top: 20px;
            border-radius:4px;
            padding:.75rem 1rem;
            font-size:.92rem;
        }
        #formMsg.text-success{ background:#f1f6ee; border:1px solid #cfe3c4; color:#3f6b2c; }
        #formMsg.text-danger{ background:#fbeeec; border:1px solid #f0c8c2; color:#a13a2a; }