html {
  scroll-behavior: auto; /* 預設為正常滾動 */
}

html .page-scroll {
  scroll-behavior: smooth; /* 僅在特定情境啟用平滑滾動 */
}


#mod {
  display: none;
}


.remind {
  color:#e60b4f;
}

.remind p{
  color:#EA0B52;
}

a {
  color: #000000;
  display: inline-block; /* 確保 transform 影響的是整個元素框架 */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    text-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform, text-shadow; /* 告訴瀏覽器預計會改變哪些屬性 */
}

a:hover {
  color: #334c8e;
  text-decoration: none;
  transform: translateY(-10px); /* 僅使用位移效果，避免放大造成抖動 */
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* 增加陰影效果 */
}

a:active {
  color: #000000;
  transform: translateY(2px); /* 向下壓縮效果 */
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); /* 減少陰影強度 */
}

.go {
  cursor: pointer;
  display: inline-block; /* 確保 transform 影響的是整個元素框架 */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    text-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.go:hover {
  color: #e60b4f;
  transform: translateY(-10px); /* 僅使用位移效果，避免放大造成抖動 */
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* 增加陰影效果 */
}

.go:active {
  transform: translateY(2px); /* 向下壓縮效果 */
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); /* 減少陰影強度 */
}

.goto {
  cursor: pointer;
  display: inline-block; /* 確保 transform 影響的是整個元素框架 */
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
    text-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.goto:hover {
  transform: translateY(-10px); /* 僅使用位移效果，避免放大造成抖動 */
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* 增加陰影效果 */
}

.goto:active {
  transform: translateY(2px); /* 向下壓縮效果 */
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15); /* 減少陰影強度 */
}

.required_font {
  color: #e60b4f !important;
}

/* 以下為header的css */
body .heading_title h4 {
  font-size: 1.7rem;
  min-width: 150px;
  font-weight: 700;
  padding: 0 0 15px 0;
  margin: 0 0 30px 0;
  font-family: "Raleway", sans-serif;
  position: relative;
  background-image: url(../images/heading_main_border.png);
  background-position: left bottom;
  background-repeat: no-repeat;
  clear: both;
}

body .heading_title h4 .goto {
  cursor: pointer;
  color: #334c8e;
  transition: color 0.3s;
}

/* .container-fluid {
  background: rgba(17, 17, 37, 0.98);
  min-height: 90px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 75, 135, 0.5);
  box-shadow: 0px 4px 8px rgba(0, 75, 135, 0.5);
  backdrop-filter: blur(5px);
} */

/* .navbar-nav li a {
  color: #ffffff;
}

.navbar-nav li a {
  color: #ffffff;
} */

/* 匯出excel按鈕 */
.heading_title button {
  min-height: 45px;
  background-color: #e60b4f;
  color: #fff;
  width: 150px;
  height: 45px;
  text-transform: uppercase;
  font-size: 18px;
  padding: 0;
  margin-left: 30px;
  font-weight: 500;
  cursor: pointer;
  transition: ease all 0.5s;
  border-radius: 5px;
}
/* 匯出excel按鈕的hover特效 */
.heading_title button:hover,
.heading_title button:focus {
  cursor: pointer;
  background-color: #334c8e;
  border: 1px solid gray;
  color: #ffffff;
  transform: translateY(-10px);
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
}

/* 以下為header的載入動畫 */
/* #preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: #fff;
}

.spinner {
  width: 50px;
  height: 50px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 6px solid #e0af14;
  border-top: 6px solid #e60b4f;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
} */
/* 添加淡出效果 */
/* #preloader.fade-out {
  animation: fadeOut 0.5s ease forwards;
} */

/* 定義淡出動畫 */
@keyframes fadeOut {
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* 總管 、 客服登入畫面 */
.contact_section2 {
  padding-block: 10vh;
  padding-inline: 8vw;
}

/* 以下為頁面上方header之下的橫幅照片設定*/
/* 每個頁面上方 xxx專區 的橫幅照片設定*/
/* section.inner_banner {
  min-height: 210px;
  background: #002147;
  background: url("../images/banner6.png");
  background-size: cover;
} */

section.inner_banner {
  min-height: 330px;
  /* 先給背景色，圖片載入前有底色 */
  background-color: #002147;

  /* 單行縮寫：不重複、置中對齊 */
  background-repeat: no-repeat;
  background-position: center center;

  /* 讓圖片覆蓋整個區塊（等比例裁切） */
  background-size: cover;

  /* 指定實際圖片 */
  /* background-image: url("../images/banner3.png"); */
  background-image: url("https://ppt.cc/f3n5Ax@.png");
}


/* 每個頁面上方 xxx專區 的橫幅照片中的標題設定*/
section.inner_banner h3 {
  margin: 0;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: -1px;
  text-align: center;
  line-height: 210px !important;
  padding: 0;
  color: #fff;
}

/* 針對768px~960px的RWD */
@media (max-width: 960px) and (min-width: 768px) {

  section.inner_banner h3 {
    line-height: 150px;
    /* 調整標題的行高 */
  }
}

/* 針對350px~768px的RWD */
@media (max-width: 768px) and (min-width: 350px) {
  .heading_title button {
    min-height: 30px;
    background-color: #e60b4f;
    color: #fff;
    width: 120px;
    height: 30px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
    cursor: pointer;
  }

  section.inner_banner h3 {
    line-height: 120px;
    /* 更小螢幕時的行高 */
    font-size: 1.4rem;
  }
}
/* 頁面右側內容區域 */
.contact_section {
  padding-top: 50px;
  background: #f6f6f6;
}

/* 側欄的css */
/* #side_menu {
  padding: 0 0 50px 0;
  margin: 75px 10px 10px 10px;
  border: 1px solid #7f7f7f;
  border-radius: 5px;
  border-bottom: 5px solid #334c8e;
} */

/* 側欄項目被點擊後的字體顏色 */
.act {
  color: #e60b4f !important;
}
/* 
#side_menu .sm1 {
  padding: 10px;
  background-color: #334c8e;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: bolder;
  text-align: center;
}

#side_menu .sm2 {
  background-color: #a8b7df;
  width: 100%;
  height: 5px;
}

.side_menu {
  padding: 10px;
  text-align: center;
  border-bottom: 1px solid #848080;
  margin: 10px 10px;
  font-weight: bolder;
  display: block;
  cursor: pointer;
  font-size: 1.2rem;
}

.side_menu:hover {
  color: #d22222 !important;
  border-color: #a82424;
}

.side_menu span {
  font-size: 0.8rem;
} */

/* 整個footer */
/* .footer-box {
  background-color: #1b1f3b;
  padding: 50px 0;
  color: #ffffff;
} */

/* 左下角網站名稱 + logo的區域 */
/* .footer-box .footer_blog .full {
  margin-bottom: 10px;
} */

/* .footer-box .footer_blog p {
  line-height: 1.5rem;
  margin-bottom: 0.5rem;
  color: white;
  word-wrap: break-word; 
} */

/* 左下角網站名稱 + logo的區域的標題 */
/* .footer-box .footer_blog .full .title {
  padding: 5px;
  margin-top: 4px;
  font-size: 1.8rem;
  font-weight: bolder;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: solid #e0af14 2px;
  margin-bottom: 10px;
} */

/* 左下角網站名稱 + logo的區域的介紹文字 */
/* .footer-box .footer_blog .full .cont p {
  padding: 5px 20px 5px 0px;
  color: #ffffff;
} */

/* footer中間那欄的網站地圖標題 */
/* .footer-box .footer_blog h3 {
  margin-bottom: 10px;
  font-size: 1.8rem;
  color: #fff;
  font-weight: 600;
  margin-top: 14px;
  float: right;
  width: 100%;
  padding-bottom: 15px;
  border-bottom: solid #e0af14 2px;
  margin-bottom: 15px;
} */

/* .footer-box .footer_blog ul {
  list-style: none;
  width: 100%;
  float: left;
}

.footer-box .footer_blog ul li {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
} */
/* footer聯繫方式的icon */
/* .footer-box .footer_blog ul li img {
  max-width: 30px;
  margin-right: 15px;
  margin-top: 15px;
} */
/* footer聯繫方式icon右側文字 */
/* .footer-box .footer_blog ul li span {
  margin-top: 15px;
  font-size: 1.2rem;
} */
/* footer中間的網站地圖文字 */
/* .footer-box .footer_blog ul li a {
  color: #ffffff;
  font-size: 1.2rem;
  text-decoration: none;
  transition: color 0.3s;
} */
/* footer中間的網站地圖文字，滑鼠懸停時 */
/* .footer-box .footer_blog ul li a:hover {
  color: #e60b4f;
} */

/* .footer_bottom {
  background-color: #0f1527;
  padding: 20px 0;
  text-align: center;
  color: #ffffff;
} */

/* .footer_bottom a {
  color: #ffffff;
  text-decoration: none;
} */

/* .footer_bottom a:hover {
  color: #e60b4f;
} */

/* custom.js中的向上捲動至頂的按鈕css */
#scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #e60b4f;
  color: #ffffff;
  padding: 10px;
  border-radius: 50%;
  display: none;
  text-align: center;
  width: 40px;
  height: 40px;
}

#scroll-to-top:hover {
  background-color: #ffffff;
  color: #e60b4f;
}

.crp {
  font-size: 0.9rem;
}

/* contact_form中的表單 */
.contact_form input {
  width: 100%;
  margin-bottom: 30px;
  min-height: 50px;
  font-size: 17px;
  color: #676767;
  padding: 0px 25px;
  border: 1px solid #9cafb7;
  border-radius: 0.25rem;
}

.contact_form select {
  width: 100%;
  margin-bottom: 30px;
  min-height: 50px;
  font-size: 17px;
  color: #676767;
  padding: 0px 25px;
  border: 1px solid #9cafb7;
  border-radius: 0.25rem;
}

.contact_form textarea {
  width: 100%;
  margin-bottom: 30px;
  min-height: 60px;
  font-size: 17px;
  color: #676767;
  padding: 10px 25px;
  border: 1px solid #9cafb7;
  border-radius: 0.25rem;
}

.contact_form input[type="radio"],
.contact_form input[type="checkbox"] {
  width: 25px;
  height: 25px;
  display: inline-block !important;
  padding: 10px;
  vertical-align: middle !important;
  margin-block: auto;
  cursor: pointer;
}
.contact_form input[type="checkbox"] {
  margin-top: -15px;
}

.contact_form .form-control {
  background-color: #ffffff;
}

.contact_form .form-control.notEmpty {
  background-color: #ffffff;
}

.contact_form button {
  min-height: 50px;
  border: none;
  background-color: #e60b4f;
  color: #fff;
  width: 150px;
  height: 45px;
  /* 字體顏色翻轉 */
  text-transform: uppercase;
  font-size: 21px;
  padding: 0;
  font-weight: 500;
  cursor: pointer;
  transition: ease all 0.5s;
  border-radius: 5px;
}

.contact_form button:hover,
.contact_form button:focus {
  cursor: pointer;
  background-color: #334c8e;
  border: 1px solid gray;
  color: #ffffff;
  transform: translateY(-10px); /* 僅使用位移效果，避免放大造成抖動 */
  text-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* 增加陰影效果 */
}

/* 通用禁用樣式 */
[disabled] , [readonly] {
  cursor: not-allowed; /* 禁止符號 */
}

/* 為 readonly 屬性的表單設置背景色 */
.contact_form input[readonly],
.contact_form select[readonly],
.contact_form textarea[readonly] {
  background-color: #f5f5f5; /* 淺灰色背景 */
  color: #9a9a9a; /* 字體顏色變淡 */
}

/* 為 disabled 屬性的表單設置背景色 */
.contact_form input[disabled],
.contact_form select[disabled],
.contact_form textarea[disabled] {
  background-color: #f5f5f5; /* 淺灰色背景 */
  color: #9a9a9a; /* 字體顏色變淡 */
}

/* 編輯器中的編輯內容區 */
.ck-content {
  min-height: 100px;
  margin-bottom: 10px;
}

/* 針對編輯器的 button 樣式不進行向上位移 */
.ck-toolbar button:hover {
  /* 取消位移 因為編輯器在contact_form內所以會有一般button的hover特效 */
  transform: translateY(0px);
  color: inherit;
}

/* 2顆按鈕均勻分布在該列中 */
.button-group-desktop .btn {
  width: 48%; /* 按鈕各佔寬度的48% */
  padding: 8px;
  font-size: 0.95rem;
  margin-top: 10px;
  margin-bottom: 50px;
}

/* 3顆按鈕一列 */
.button-group-desktop-3 .btn {
  width: 31%; /* 按鈕各佔寬度的48% */
  padding: 8px;
  font-size: 0.95rem;
  margin-top: 10px;
  margin-bottom: 50px;
}

/* cust */
.contact_form label {
  background: #d2def7;
  padding-left: 5px;
  float: left;
  font-weight: bolder;
  margin-bottom: 0;
}

.contact_form label:after {
  content: "";
  width: 30px;
  height: 20px;
  display: inline-block;
  background: transparent;
  /*border-top: 50px solid transparent;*/
  border-bottom: 20px solid #d2def7;
  /*border-left: 50px solid transparent;*/
  border-right: 30px solid #f6f6f6;
}

/* 以下為電腦版尺寸表格設定 */
/* 表格文字垂直置中 */
#rwd1 tbody tr td {
  vertical-align: middle;
  font-size: 1.2rem;
}

#rwd1 thead tr th {
  vertical-align: middle;
  font-size: 1.4rem;
}

/* 以下為手機板 (768px以下) 表格樣式 */
@media (max-width: 768px) {
  /* 滿版顯示 */
  table {
    width: 100%; /* 表格寬度填滿容器 */
  }

  /* thead欄位名稱 */
  #rwd1 thead tr th {
    font-size: 0.6rem;
  }
  /* tbody欄位內容 */
  #rwd1 tbody tr td {
    font-size: 0.6rem;
    padding: 5px;
  }
}

/* 報修狀況的類別 以及預防保養提醒中建立預約單按鈕的css */
.otype,.booking {
  background-color: #575b60;
  color: #fff;
  border-radius: 5px;
  padding: 5px 10px;
}

.booking:hover {
  color:#ffffff;
}


/* 以下為分頁按鈕 */
.pagination {
  display: flex;
  justify-content: center;
}

.pagination-centered ul {
  text-align: center;
}

/* 分頁按鈕樣式 */
.pagination li a {
  font-size: 16px;
  color: #707079;
  border: 1px solid #334c8e;
  border-radius: 2px;
  padding: 7px 13px 5px;
  margin-right: 7px;
  display: inline-block;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  background-color: white;
  text-decoration: none;
}
/* 目前頁面的分頁按鈕樣式 */
.pagination li.active a {
  background-color: #e60b4f; /* 深藍 */
  color: white;
  font-weight: bold;
  border-color: #e60b4f; /* 與背景色一致 */
  box-shadow: 0px 4px 8px rgba(0, 75, 135, 0.3);
}
/* 目前頁面的分頁按鈕樣式 - 為了覆蓋bootstrap樣式 ，換專案時可以測試此專案是否會被覆蓋，若不會可以拿掉 */
.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #e60b4f;
  border-color: #e60b4f;
}

/* 定義抖動動畫 */
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-2px);
  }
  50% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-2px);
  }
}

/* 懸停效果 */
.pagination li a:hover {
  color: #334c8e; /* 改變文字顏色 */
  border-color: #334c8e; /* 輕微改變邊框顏色 */
  box-shadow: 0px 4px 8px rgba(230, 11, 79, 0.3); /* 添加陰影 */
  transform: translateY(-5px) scale(1.05); /* 向上位移並放大 */
  transition: transform 0.3s ease; /* 過渡效果 */
}

/* 點擊時套用抖動效果 */
.pagination li a:active {
  color: white; /* 文字變為白色 */
  background-color: #334c8e; /* 背景改為主色 */
  box-shadow: 0px 2px 4px rgba(230, 11, 79, 0.5); /* 加深陰影 */
  transform: scale(0.95); /* 輕微縮小 */
  animation: shake 0.3s; /* 加入抖動動畫 */
}

.plan_value {
  font-style: italic; /* 斜體 */
  font-weight: bold; /* 粗體 */
  color: #ff0000; /* 紅色 */
  /* font-family: 'Comic Sans MS', 'Arial', sans-serif; 活潑的字體樣式 */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); /* 字體陰影，增添效果 */
  font-size: 1.5rem; /* 調整字體大小 */
  letter-spacing: 0.05rem; /* 調整字母間距 */
}

/* 行事曆的表頭 */
.event .abstract-t {
  color: #ffffff;
  min-height: 40px;
  display: flex; /* 使用 Flexbox */
  align-items: center; /* 垂直置中 */
  justify-content: center; /* 水平置中（可選，根據需求） */
  text-align: center; /* 讓文字在多行情況下保持居中 */
}
/* 行事曆的時間內容區 */
.event .main {
  color:#000000;
  padding:10px;
}

/* 以下為行事曆的RWD */
#mycalc {
  width: 100%;
  border-collapse: collapse;
}

#mycalc th,
#mycalc td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: center;
}

#mycalc th {
  background-color: #f4f4f4;
}

.tday {
  background-color: #ABABB0;
  /* 今日背景色 */
  color: #000000;
}

.dday {
  background-color: #f9f9f9;
  /* 一般日期背景色 */
}

/* 1024px 以上 */
@media (min-width: 1024px) {
  #mycalc {
    font-size: 16px;
  }

  #mycalc th,
  #mycalc td {
    padding: 12px;
  }
}

/* 860px ~ 1024px */
@media (min-width: 860px) and (max-width: 1024px) {
  #mycalc {
    font-size: 14px;
  }

  #mycalc th,
  #mycalc td {
    padding: 10px;
  }
}

/* 768px ~ 860px */
@media (min-width: 768px) and (max-width: 860px) {
  #mycalc {
    font-size: 12px;
  }

  #mycalc th,
  #mycalc td {
    padding: 8px;
  }
}

/* 500px ~ 768px */
@media (min-width: 500px) and (max-width: 768px) {
  #mycalc {
    font-size: 10px;
  }

  #mycalc th,
  #mycalc td {
    padding: 6px;
  }
}

/* 500px 以下 */
/* 500px 以下 */
@media (max-width: 500px) {
  #mycalc-container {
    overflow-x: auto;
    /* 啟用水平滾動條 */
  }

  #mycalc {
    width: 100%;
    /* 表格寬度適應父容器 */
    font-size: 10px;
    /* 整體字體縮小 */
    border-collapse: collapse;
    /* 合併表格邊框 */
  }

  #mycalc th,
  #mycalc td {
    font-size: 9px;
    /* 單元格內文字縮小 */
    padding: 4px;
    /* 減少內邊距 */
    word-wrap: break-word;
    /* 自動換行（防止文字過長） */
    text-align: center;
    /* 單元格內容居中 */
  }

  #mycalc th {
    background-color: #f1f1f1;
    /* 增加背景顏色區分標題 */
  }
}


/* 在線客服的css */
#chatgpt {
  border: 1px solid #888aa8;
  border-radius: 5px;
  margin: 20px auto;
  font-size: 2rem;
  max-width: calc(100% - 30px);
  height: 300px;
  overflow-y: scroll;
  background: #596f8e;
  box-sizing: border-box; /* 關鍵：包含 padding */
}

#chatgpt .user {
  background: #596f8e;
  padding: 10px;
  color: #fff;
  font-size: 18px;
}

#chatgpt .bot,
#chatgpt .wait {
  background: #d1d8e2;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}