/* ======================================================================
   目錄 (Table of Contents)
   ======================================================================
   01. CSS 變數 (Root Variables)
   02. 全域基礎樣式 (Global / Base)
   03. 連結與底色 (Links & Background Utility)
   04. 輪播 Carousel 外層容器
   05. 導覽列 Logo 與 Navbar
   06. 導覽列下拉按鈕效果 (item-btn)
   07. 搜尋列 (Search Form)
   08. Navbar 外框
   09. Google 翻譯外掛樣式
   10. 首頁 Banner 輪播控制箭頭
   11. 產品介紹區塊 (Service Box)
   12. 作品/服務項目 Hover 效果 (Port Effect)
   13. 首頁最新消息清單 (RWD News List / Info Series)
   14. Footer 頁尾 (Stek Footer)
   15. 內頁共用 - 分類選單與內容容器 (Category / Content)
   16. 內頁共用 - Banner 與頁面標題
   17. 內頁共用 - 表格與說明文字 (About / Table)
   18. 內頁共用 - 分類選單清單 (Category Menu List)
   19. Tab 頁籤樣式
   20. 最新消息列表頁 (News List Page)
   21. 最新消息內容頁 (News Content Page)
   22. 分頁 Pagination
   23. 線上預約表單 (Google Form Embed)
   24. 回頂端按鈕與 icomoon 字型 (Gotop / Icon Font)
   25. 其他共用元件 (Label / Breadcrumb / Title / Features)
   26. 上架列表樣式 (Demo Style)
   27. 聯絡我們 (Contact)
   28. 麵包屑 (breadcrumb)
   29. 搜尋結果
   ====================================================================== */

/* ======================================================================
   01. CSS 變數 (Root Variables)
   ====================================================================== */
:root {
  --color-navy: #0d1730; /* 深藍近黑，標題與底色用 */
  --color-primary: #193d95; /* 品牌主色：深藍 */
  --color-primary-dark: #0f255c; /* 主色深階，做漸層 */
  --color-primary-light: #d6e2f7; /* 主色淺色調 */
  --color-accent: #e30110; /* 品牌強調色：紅 */
  --color-muted: #6f6f6f; /* 中性灰 */
  --color-paper: #f5f8fd; /* 藍圖紙底色 */
  --color-line: rgba(25, 61, 149, 0.16); /* 藍圖格線色 */
  --color-ink: #1c2333; /* 內文黑 */
  --color-text-light: #fff; /* 白色文字 */
  --color-text-dark: #333333; /* 黑色文字 */
  --font-family: "Roboto", "Noto Sans TC", sans-serif;
  --shadow-default: 0 2px 4px rgba(13, 23, 48, 0.08); /* 通用預設陰影 */
  --shadow-hover: 0 5px 12px rgba(25, 61, 149, 0.16); /* hover 時加深/加大的陰影 */
  --border-radius: 4px;
}

/* ======================================================================
   02. 全域基礎樣式 (Global / Base)
   ====================================================================== */
html,
body,
li {
  font-family: "Roboto", "Noto Sans TC", sans-serif !important;
}
@media (min-width: 1200px) {
  .container {
    width: 1200px;
  }
}
.tmargin {
  margin-top: 30px;
}
.bmargin {
  margin-bottom: 30px;
}
.bgmargin {
  margin-bottom: 60px;
}

/* ======================================================================
   03. 連結與底色 (Links & Background Utility)
   ====================================================================== */
a {
  color: #db4814;
  text-decoration: none;
}
a:hover,
a:focus {
  color: transparent;
  text-decoration: none;
}
.org {
  color: #db4814;
}
.yellowbg {
  background-color: #fdfbf5;
}
.graywbg {
  background-color: #fcfcfc;
}

/* ======================================================================
   04. 輪播 Carousel 外層容器
   ====================================================================== */
.carousel {
  position: relative;
}
@media (min-width: 1200px) {
  .carousel {
    position: relative;
    margin-top: 0px;
  }
}

/* ======================================================================
   05. 導覽列 Logo 與 Navbar
   ====================================================================== */
/*-----------LOGO更改--------------*/
.navbar-brand img {
  display: block;
  width: auto;
  height: 100%;
  margin: 0;
  object-fit: contain;
}
.navbar-brand {
  height: 72px;
  padding: 8px 20px 8px 0;
}
.navbar {
  min-height: 72px;
}
nav ul li {
  height: 56px;
  overflow: hidden;
}

/* ======================================================================
   06. 導覽列下拉按鈕效果 (item-btn)
   ====================================================================== */
.item-btn {
  top: 0;
  position: relative;
  height: 112px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
  text-align: center;
}
.item-top {
  color: var(--color-text-muted);
}
.item-bottom {
  color: var(--color-accent);
  font-size: 14px;
}
.item-top,
.item-bottom {
  height: 56px;
  width: 90px;
  position: relative;
  text-align: center;
  font-weight: 400;
}
.item-btn:hover {
  top: -56px;
}

nav.navbar.bootsnav ul.nav > li > a {
  padding: 28px 8px !important;
}

@media (max-width: 992px) {
  nav.navbar.bootsnav .navbar-brand {
    height: 72px;
    padding: 8px 15px;
  }
  .navbar-brand img {
    width: auto;
    height: 100%;
  }
  nav ul li {
    height: 50px;
    overflow: hidden;
  }
  .item-btn {
    display: flex;
    align-items: center;
    height: unset;
    text-align: left;
  }
  .item-top {
    color: var(--color-text-muted);
  }
  .item-bottom {
    color: var(--color-primary);
  }
  .item-top,
  .item-bottom {
    display: flex;
    align-items: center;
    height: 40px;
    position: relative;
    text-align: left;
  }
  .item-btn:hover {
    top: unset;
  }
  nav.navbar.bootsnav ul.nav > li > a {
    padding: 8px 8px !important;
  }
}

@media (max-width: 767px) {
  nav.navbar.bootsnav .navbar-header {
    height: 72px;
  }
  nav.navbar.bootsnav .navbar-brand {
    height: 72px;
  }
  .navbar-brand img {
    width: auto;
    height: 100%;
  }
}

/* ======================================================================
   07. 搜尋列 (Search Form)
   ====================================================================== */
/*-----------搜尋更改--------------*/
.navbar-form {
  border-color: transparent !important;
  margin: 0;
  padding: 0;
  box-shadow: 0 0 0 transparent;
}
.form-control {
  display: block !important;
  width: 100% !important;
}
.input-group {
  width: 100%;
}

.search-btn {
  background: transparent;
  border: none;
}

/* ======================================================================
   08. Navbar 外框
   ====================================================================== */
/*-----------nav更改--------------*/
.navbar {
  position: relative;
  border: 1px solid #ccc;
}

/* ======================================================================
   09. Google 翻譯外掛樣式
   ====================================================================== */
.goog-te-gadget-simple {
  background-color: transparent !important;
  opacity: 0.8;
  border-left: 1px solid transparent !important;
  border-top: 1px solid transparent !important;
  border-bottom: 1px solid transparent !important;
  border-right: 1px solid transparent !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}
.goog-te-gadget-simple .goog-te-menu-value {
  color: var(--color-text-muted) !important;
}
.goog-te-gadget-icon {
  display: none !important;
}
.goog-te-menu-value span {
  border-left: rgba(255, 255, 255, 0) !important;
  color: var(--color-text-muted) !important;
  font-size: 15px;
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif !important;
}
@media (max-width: 919px) {
  .goog-te-gadget-simple .goog-te-menu-value {
    color: #e7cd7c !important;
  }
  #google_translate_element {
    margin-top: 0px;
  }
}
#goog-gt-tt {
  color: var(--color-text-muted) !important;
  box-shadow: 0 0 0 transparent !important;
  font-size: 15px !important;
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif !important;
}

/*++++++++++++++++++++++++++++++++++++*/

/* ======================================================================
   10. 首頁 Banner 輪播控制箭頭
   ====================================================================== */
/*-----------topbanner更改--------------*/
#carousel-id .item img {
  width: 100%;
  height: auto;
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  background-image: -o-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 0, 0, 0)),
    to(rgba(0, 0, 0, 0))
  );
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
  background-repeat: repeat-x;
}
.carousel-control.right {
  right: 0;
  left: auto;
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  background-image: -o-linear-gradient(
    left,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(0, 0, 0, 0)),
    to(rgba(0, 0, 0, 0))
  );
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
  background-repeat: repeat-x;
}

.icon-right,
.icon-left {
  position: absolute;
  top: 40%;
  z-index: 5;
  display: inline-block;
  font-size: 35px;
}

/* ======================================================================
   11. 產品介紹區塊 (Service Box)
   ====================================================================== */
/*------------------產品介紹--------------------------*/
.service_box {
  padding: 60px 0; 
}
.service_title {
  margin-bottom: 30px;
}
.service_title h2 {
  text-align: center;
  color: #333;
  font-size: 21px;
  margin: 0 auto;
  width: 160px;
  font-weight: bold;
}
.service_title h2 span:before {
  content: "";
  width: 30px;
  background: var(--color-primary);
  height: 1px;
  position: absolute;
  left: 0;
  top: 60%;
}
.service_title h2 span:after {
  content: "";
  width: 30px;
  background: var(--color-primary);
  height: 1px;
  position: absolute;
  right: 0;
  top: 60%;
}
.service_title h2 span {
  text-align: center;
  display: block;
  font-size: 15px;
  color: var(--color-primary);
  margin-top: 3px;
  position: relative;
}
.service_img {
  overflow: hidden;
}
.service_img img {
  width: 100%;
  margin: 0;
  transition: 0.5s;
}
.service_img img:hover {
  transform: scale(1.1);
}
.service-list a {
  display: block;
  border-radius: 5px;
  color: #2f5a98;
}
.service_txt {
  margin: 0px;
  font-size: 19px;
  color: #073477;
  font-weight: bold;
  padding: 20px 15px;
  text-align: center;
}
.service_item{
  margin-bottom: 32px;
}


@media (min-width: 768px) {
  .service_box {
    padding: 90px 0;
  }
  .service_title h2 {
    text-align: center;
    color: #333;
    font-size: 27px;
    margin: 0 auto;
    width: 160px;
    font-weight: bold;
  }
  .service_title h2 span:before {
    content: "";
    width: 30px;
    background: var(--color-primary);
    height: 2px;
    position: absolute;
    left: 0;
    top: 60%;
  }
  .service_title h2 span:after {
    content: "";
    width: 30px;
    background: var(--color-primary);
    height: 2px;
    position: absolute;
    right: 0;
    top: 60%;
  }
  .service_title h2 span {
    text-align: center;
    display: block;
    font-size: 17px;
    color: var(--color-primary);
    margin-top: 5px;
    position: relative;
  }
  .service_title {
    margin-bottom: 50px;
  }

}

/* ======================================================================
   12. 作品/服務項目 Hover 效果 (Port Effect)
   ====================================================================== */
.text-desc {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--color-primary);
  height: 100%;
  opacity: 0;
  width: 100%;
  padding: 0px;
}
.text-desc .text-border {
  display: block;
}
.text-desc .text-h3 {
  display: block;
}
.text-desc .text-p {
  display: block;
}
.image-box {
  background: #fff;
  border: 1px solid #ccc;
  aspect-ratio: 1/1;
  display: flex;
  align-items: start;
  justify-content: start;
}
.image-box img {
  width: 100%;
  height: 80%;
  object-fit: contain;
}
.port-1 {
  float: left;
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.port-1 .text-desc {
  opacity: 1;
  top: -85%;
  transition: 0.5s;
  color: #fff;
}
.port-1.effect-2 .text-h3 {
  padding-top: 15px;
  font-size: 21px;
}

.port-1 img {
  transition: 0.5s;
}
.port-1:hover img {
  transform: scale(1.2);
}
.port-1.effect-2 .text-desc {
  top: auto;
  bottom: -80%;
}

.port-1.effect-2 .text-desc .text-p {
  display: none;
  transition: all 0.3s ease;
}

.port-1.effect-2:hover .text-desc {
  bottom: 0;
  background: var(--color-primary);
  padding-top: 30%;
}

.port-1.effect-2:hover .text-desc .text-p {
  display: block;
  transition: all 0.3s ease;
}

/* ======================================================================
   13. 首頁最新消息清單 (RWD News List / Info Series)
   ====================================================================== */
/*------------------首頁相關資訊-------------------------*/
#rwdnews_list {
  padding: 15px;
  border: 1px solid #ddd;
  height: 307px;
  overflow-y: scroll;
}
#rwdnews_list ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
#rwdnews_list ul .pic {
  display: none;
}
.newscontent span {
  color: var(--color-primary);
}
.newscontent h4 {
  padding: 0;
  margin: 0;
}
.newscontent h4 a {
  color: #333;
  font-size: 15px;
  line-height: 1.5;
}
.info-series {
  border: 1px solid #ddd;
}
.info-series img {
  width: 100%;
}
.info,
.info2,
.info3 {
  margin-bottom: 30px;
}
.info h3 {
  color: #000;
  padding-left: 60px;
  position: relative;
  margin-bottom: 20px;
  font-size: 21px;
}
.info h3:before {
  content: "";
  background: url(../images/icon.png) no-repeat;
  background-position: 0 0;
  position: absolute;
  left: 0;
  top: -16px;
  width: 56px;
  height: 54px;
}
.info2 h3 {
  color: #000;
  padding-left: 60px;
  position: relative;
  margin-bottom: 20px;
  font-size: 21px;
}
.info2 h3:before {
  content: "";
  background: url(../images/icon.png) no-repeat;
  background-position: -48px 0;
  position: absolute;
  left: 0;
  top: -16px;
  width: 56px;
  height: 54px;
}
.info3 h3 {
  color: #000;
  padding-left: 60px;
  position: relative;
  margin-bottom: 20px;
  font-size: 21px;
}
.info3 h3:before {
  content: "";
  background: url(../images/icon.png) no-repeat;
  background-position: -102px 0;
  position: absolute;
  left: 0;
  top: -16px;
  width: 56px;
  height: 54px;
}

/* ======================================================================
   14. Footer 頁尾 (Stek Footer)
   ====================================================================== */
/*-----------footer-----------*/
.stek-footer {
  width: 100%;
  font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
}

/* 上方認證資訊列 */
.stek-topline {
  background: #a0ddfc;
  padding: 8px 0;
  text-align: center;
}
.stek-topline p {
  margin: 0;
  font-size: 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  color: #242424;
  line-height: 1.6;
  letter-spacing: 1px;
}
.stek-topline .dot {
  color: var(--color-accent);
  margin: 0 8px;
  font-weight: bold;
}

/* 主要聯絡資訊區 */
.stek-main {
  background: #77caec;
  padding: 22px 0;
}
.stek-flex {
  display: flex;
  align-items: start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.stek-logo {
  flex-shrink: 0;
  min-width: 200px;
}
.stek-logo img {
  max-width: 220px;
  height: auto;
  display: block;
}

.stek-contact {
  flex: 1;
  min-width: 280px;
  color: #204172;
}
.stek-contact p {
  margin: 3px 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
}
.stek-contact .addr {
  font-size: 16px;
}
.stek-contact a {
  color: #12305c;
}
.stek-contact a:hover {
  color: #1a4f8b;
}

.stek-qr {
  flex-shrink: 0;
}
.stek-qr img {
  width: 180px;
  height: auto;
  padding: 4px;
  box-sizing: border-box;
}

/* Copyright */
.stek-footer footer {
  padding: 0;
  color: #fff;
  background-color: #1a4f8b;
  line-height: 45px;
  text-align: center;
}

/* RWD：手機版垂直置中排列 */
@media (max-width: 768px) {
  .stek-flex {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .stek-contact {
    text-align: center;
  }
}

/* ======================================================================
   15. 內頁共用 - 分類選單與內容容器 (Category / Content)
   ====================================================================== */
/*-----------內頁--------------*/
.category_content {
  padding-top: 34px;
}
.category_parent_link {
  display: none !important;
}
.nav_cate_current {
  display: none !important;
}

/* ======================================================================
   16. 內頁共用 - Banner 與頁面標題
   ====================================================================== */
.PRO-banner {
  margin-top: 80px;
  position: relative;
}
.page-title {
  position: absolute;
  text-align: center;
  top: 164px;
  width: 100%;
  font-size: 23px;
  text-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
  z-index: 10;
  color: #fff;
}
.page-title span {
  display: block;
  font-size: 13px;
  margin-top: 8px;
}

@media (min-width: 768px) {
  .PRO-banner {
    margin-top: 0px;
    position: relative;
  }

  .category_menu {
    padding: 40px 0;
  }
}

.PRO-banner img {
  width: 100%;
  left: 0;
  top: 0;
  z-index: 4;
}

.category_menu {
  padding: 40px 0;
}

.category_content {
  min-height: 600px;
  padding: 0;
}

#myTab {
  margin-top: 15px;
}

.hero-feature {
  padding: 0;
  margin: 0;
}

/* ======================================================================
   17. 內頁共用 - 表格與說明文字 (About / Table)
   ====================================================================== */
.GoodsDescrBody2 table {
  width: 250px !important;
  height: auto !important;
  overflow-x: scroll;
  display: block;
  margin: 0 auto;
}

@media only screen and (min-width: 400px) {
  .GoodsDescrBody2 table {
    width: 500px !important;
  }
}
@media only screen and (min-width: 1024px) {
  .GoodsDescrBody2 table {
    width: auto !important;
    overflow-x: hidden;
  }
}

.category_content h3 {
  position: relative;
  display: inline-block;
  color: var(--color-primary);
  margin: 16px 0 10px 0;
  font-size: 19px;
  padding: 12px;
  border-radius: 5px;
  letter-spacing: 0.1px;
  padding-left: 16px;
}

.category_content h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 60%;
  background-color: var(--color-primary);
}

.about h4 {
  margin-top: 15px;
  display: inline-block;
  border-bottom: 2px solid #959595;
  color: #2f5a98;
  font-size: 17px;
  font-weight: bold;
}
.about h5 {
  color: #76a2e4;
  font-size: 17px;
  font-weight: bold;
}
.about p {
  margin-bottom: 15px;
  color: #333;
  font-size: 17px;
  line-height: 1.5;
}
.about {
  margin: 10px 10px 0px;
  clear: both;
  overflow: hidden;
}
.about-title {
  margin: 30px auto;
  font-size: 25px;
  color: #2f5a98;
  font-weight: bold;
}
.about img {
  max-width: 100%;
}

.CodeNum {
  background: transparent;
  color: #333;
  border-radius: 0px;
  font-size: 15px;
  padding: 0;
  margin-top: 10px;
}
.dyPic {
  max-width: 100%;
  width: 400px;
}
.PersonNum {
  background: transparent !important;
  color: #333 !important;
  border-radius: 0px;
  font-size: 15px !important;
  padding: 0 !important;
  margin-top: 10px !important;
}

/* ======================================================================
   18. 內頁共用 - 分類選單清單 (Category Menu List)
   ====================================================================== */
.category_menu {
  padding: 24px 0 0 0;
}
.category_menu ul {
  border: 1px solid #ccc;
}
.category_menu h3 {
  background: var(--color-muted);
  color: #fff;
  font-size: 17px;
  padding: 10px 15px;
  margin-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.category_menu h3 i {
  font-size: 17px;
  margin-right: 5px;
  color: #ffffff;
}
.profile_content {
  padding: 30px 0 60px 0;
}
.nav_cate_item {
  color: #0068b6;
  border-bottom: 1px solid #ccc;
}

.fa-chevron-right {
  position: absolute;
  right: 0;
}

.nav_cate_item a {
  color: var(--color-primary);
  font-size: 15px;
}
.category_menu li:last-child {
  border-bottom: none;
}

/* ======================================================================
   19. Tab 頁籤樣式
   ====================================================================== */
/*--------------tab---------------*/

.tab-content {
  font-size: 15px;
  background-color: #fff;
  padding: 20px 30px;
  min-height: 550px;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  border: 1px solid #ff8328;
  border-radius: 0px;
  border-bottom-color: transparent;
  background-color: #ff8328;
  color: #fff;
}
.nav-tabs > li > a:hover {
  border-color: #ff8328 #ff8328 #fff;
  background-color: #fff;
  border-radius: 0px;
}
.nav-tabs {
  border-bottom: 1px solid #ff8328;
}
.box3 table,
.box3 .alltext {
  width: 100% !important;
  background-color: #fff;
}
.box3 .breadcrumb {
  padding: 0;
  margin: 15px 0 25px 0;
  background-color: transparent !important;
  border: 0;
  border-radius: 0;
}

.box3 h3 {
  margin: 10px 0 30px 0;
}

.box3 h3 {
  margin: 10px 0 30px 0;
}
r .breadcrumb .page-title {
  color: #000;
  font-weight: 100;
  margin: 5px 0;
  letter-spacing: 2px;
}
.box3 .breadcrumb > span + span:before {
  padding: 0 5px;
  color: #db4814;
  content: "/\00a0";
}

/* ======================================================================
   20. 最新消息列表頁 (News List Page)
   ====================================================================== */
/*----------------最新消息--------------------*/
#LinkContainer {
  display: none;
}
.thumbnail {
  border: 1px solid #dadada;
}
.news_more {
  background-color: #dc1e37;
  color: #fff;
  border-color: #dc1e37;
}
.news_more:hover {
  background-color: #333;
  color: #fff;
  border-color: #333;
}
/*-----------------原本的--新聞頁面設定--------------------------*/

.News_Title {
  background-color: #e0ffff;
  padding: 5px;
  color: #4682b4;
  font-size: 18px;
}
.News_Category {
  background-color: #e0ffff;
  padding: 5px;
  color: #4682b4;
  font-size: 18px;
}
.newslist {
  overflow: hidden;
}
.newslist img.news_pic {
  width: 40%;
  float: left;
  padding: 1%;
}
.newslist h3.news_title {
  margin-top: -5px;
}
.news_title {
  color: #333;
  line-height: 1.3;
  padding: 5px 0px;
  font-size: 21px;
}
.news_info {
  font-size: 15px;
  line-height: 1.8;
  color: #222;
  padding: 5px 0;
}
.news_date {
  color: #8c8c8c;
  padding-right: 30px;
}
.news_sort {
  color: #8c8c8c;
  padding-right: 30px;
}
.news_author {
  color: #8c8c8c;
  padding-right: 30px;
}
.news_more {
  float: right;
}
.type_icon {
  margin-right: 10px;
}
.NEWS_type {
  padding-bottom: 20px;
  margin-left: -30px;
}
.NEWS_type li {
  line-height: 2;
}
.NEWS_type .badge {
  background-color: #afeeee;
  font-size: 8px;
  margin-left: 8px;
}
.news_icon01 {
  margin-right: 8px;
}
.news_icon02 {
  margin-right: 8px;
}
.news_icon03 {
  margin-right: 8px;
}
@media (max-width: 767px) {
  .newslist img.news_pic {
    width: 100%;
    float: left;
    padding: 1%;
  }
  .news {
    margin: 0 2px;
  }
}
.News_AD {
  border: 0;
}
.content_pic {
  padding: 5%;
}

/* ======================================================================
   21. 最新消息內容頁 (News Content Page)
   ====================================================================== */
.news_content {
  min-height: 500px;
  line-height: 2;
  font-size: 16px;
  background: #fff;
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 40px;
}

/* ======================================================================
   22. 分頁 Pagination
   ====================================================================== */
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
  background-color: #333;
  border-color: #333;
}
.pagination > li > a,
.pagination > li > span {
  color: #fa871a;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #fff;
  background-color: #fa871a;
  border-color: #ddd;
}
.news {
  border-top: 4px solid var(--color-primary);
  margin-top: -10px;
}
#main-container.container {
  background-color: #fff;
  min-height: 500px;
  margin-bottom: 40px;
  padding-top: 40px;
}

/* ======================================================================
   23. 線上預約表單 (Google Form Embed)
   ====================================================================== */
/*------------------線上預約-----------------*/
.freebirdFormviewerViewCenteredContent {
  width: 1200px !important;
}

/* ======================================================================
   24. 回頂端按鈕與 icomoon 字型 (Gotop / Icon Font)
   ====================================================================== */
/*------------------top-----------------*/
/*gotop換iconfont*/
@font-face {
  font-family: "icomoon";

  src: url("../fonts/icomoon.eot?mz9gi1");
  src:
    url("../fonts/icomoon.eot?mz9gi1#iefix") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?mz9gi1") format("truetype"),
    url("../fonts/icomoon.woff?mz9gi1") format("woff"),
    url("../fonts/icomoon.svg?mz9gi1#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-gotop:before {
  content: "\e900";
}
.icon-left:before {
  content: "\e902";
  font-size: 70px;
}
.icon-right:before {
  content: "\e901";
  font-size: 70px;
}

@media screen and (min-width: 992px) {
  .icon-left:before {
    font-size: 90px;
  }
  .icon-right:before {
    font-size: 90px;
  }
}

/*#gotop {
	
    cursor: pointer;
    border-radius:50%;
    background: #8fa8c9;
    width: 50px;
    height: 50px;
    font-size: 17px;
    margin: auto;font-weight: normal;
    text-align: center;
    
}*/

#gotop:hover {
  background: #7e7e7e;
}

#gotop {
  display: none;
  position: fixed;
  right: 30px !important;
  bottom: 70px !important;
  padding: 10px 15px 4px !important;
  font-size: 30px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  cursor: pointer !important;
  -webkit-border-radius: 30px !important;
  -moz-border-radius: 30px !important;
  border-radius: 30px !important;
  z-index: 10;
}

/* ======================================================================
   25. 其他共用元件 (Label / Breadcrumb / Title / Features)
   ====================================================================== */
.label {
  font-size: 16px;
  line-height: 2;
  background-color: #fff;
  color: #fa871a;
  padding: 0;
}
.view-first .mask {
  display: none;
}
.li-item p {
  line-height: 1.5;
  color: #333;
  font-size: 15px;
}
.breadcrumb {
  margin-right: -15px;
  margin-left: -15px;
  padding: 8px 15px;
  margin-top: 43px;
  margin-bottom: 20px;
  list-style: none;
  border-radius: 4px;
  background-color: transparent !important;
}

.breadcrumb .current {
  color: var(--color-primary);
  font-weight: 700;
}

.breadcrumb li:first-child span {
  display: none;
}
.breadcrumb a {
  color: var(--color-muted);
}

.breadcrumb a:hover {
  color: var(--color-primary);
}
.title-none {
  font-size: 21px;
  color: var(--color-primary);
  font-weight: bold;
}
.features-box a h4 {
  color: var(--color-primary);
  font-weight: bold;
}

/* ======================================================================
   26. 上架列表樣式 (Demo Style)
   ====================================================================== */
/*上架設定*/
.demo-style {
  clear: both;
  overflow: hidden;
}
.demo-style img {
  max-width: 100%;
  height: auto;
}
.demo-title {
  color: #333;
  font-size: 21px;
  border-bottom: 1px dotted #333;
  margin-bottom: 5px;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 5px 8px;
}
.demo-style div {
  padding: 5px;
}
.demo-style p {
  font-size: 17px;
  line-height: 1.8;
  color: #333;
}
.demo-date {
  font-size: 21px;
  font-weight: bold;
  color: #1e6dab;
}
.demo-date span {
  margin-left: 10px;
  color: #b5c8e4;
  font-size: 17px;
}
.demo-list {
  list-style: none;
  padding: 0;
  font-size: 17px;
  margin: 10px 0 10px 0;
}
.demo-list li {
  padding-left: 15px;
  position: relative;
}
.demo-list li:before {
  content: "";
  background: #333;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  position: absolute;
  top: 8px;
  left: 0px;
}

/* ======================================================================
   27. 聯絡我們 (Contact)
   ====================================================================== */
.contact-img img {
  max-width: 100%;
}
.panel-title2 {
  font-size: 19px;
  line-height: 1.4;
  margin: 0;
}

.panel-title2 .label {
  font-size: 19px;
  color: var(--color-primary);
}

.box {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  padding: 10px !important;
}
.box h4 {
  font-size: 17px;
  color: #fff;
  background-color: var(--color-primary);
  margin-top: 0px;
  border-radius: 8px 8px 0 0;
  padding: 12px;
}
.box h3 {
  font-size: 1.1em;
  color: #000000;
  margin-left: 0px;
  border-radius: 8px 8px 0 0;
  padding: 5px;
}
.box ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box li {
  font-size: 15px;
  margin-bottom: 5px;
}
.advice-fa {
  font-size: 17px;
  width: 15px;
  margin-left: 10px;
  margin-right: 10px;
}
.demo-style {
  margin-top: 20px;
}

.contact-title {
  font-size: 21px;
  color: #fff;
  background-color: var(--color-primary);
  margin-top: 40px;
  padding: 10px 15px;
  border-radius: var(--border-radius);
}
.contact-box {
  padding: 0;
  margin: 0 auto;
  list-style: none;
}
.contact-box li h3 {
  font-size: 19px;
  border-bottom: 1px solid #ccc;
  display: inline-block;
  padding: 5px;
}
.contact-box li {
  width: 100%;
  float: left;
}

.svc-scope {
  padding-top: 34px;
}

/* ======================================================================
   28. 麵包屑 (breadcrumb)
   ====================================================================== */
.container.box3 .breadcrumb a {
  color: var(--color-primary-dark);
}
.container.box3 .breadcrumb .active {
  color: var(--color-ink);
}
.container.box3 .breadcrumb a:hover {
  color: var(--color-primary);
}

/* ======================================================================
   29. 搜尋結果
   ====================================================================== */
.thumbnail-list {
  margin: 64px 0;
}