/*body*/
.row [class^="col-"] {
  padding:10px;
}
/*「對於所有在 .row 裡 class 名稱以 col- 開頭的欄位，設定 10px 的內距，讓欄位內容不會緊貼邊界。」*/






body[data-type="fullpage"]:not(#managehome) #wrap > :not(:last-child) { margin-bottom: 0px; }
/*「在全頁模式（data-type=fullpage）下，除了 managehome 頁面外，讓 #wrap 區塊中每個子元素（除了最後一個）沒有底部間距。」*/


#bodyinpage .fcol.fcol-header{
  background:#efefef;
}
/*「設定 #bodyinpage 裡的 .fcol.fcol-header 元素背景顏色為淡灰色。*/





/*logo*/

 #logo img {
   padding: 0 16px 16px;
 }
/*「對 #logo 區塊內的圖片設定內距：圖片的上方不留空隙，左右兩邊各留 16px，下方也留 16px。」*/





/*top*/  
.navbar-nav > li > a {
    color: #fff;
}
/*「將導覽列 .navbar-nav 裡每個清單項目 (<li>) 中的連結 (<a>) 的文字顏色設定為白色。」*/







.topnavbar .container {
  text-align: justify;
  font-size: 0;
  /*text-align: center;*/ 
  padding-top:0px;
}
/*「將 .topnavbar 中的 .container 文字設定為左右對齊，取消上方內距，並把字體大小設為 0（通常是為了避免排版空隙）。」*/

.topnavbar .container::after {
  content: "";
  display: inline-block;
  width: 100%;
}
/*「在 .topnavbar .container 元素後面加入一個寬度為 100%、看不見的 inline-block 元素，用來參與排版。」*/

.topnavbar {
  background-color: #fff;    /* 背景顏色為白色 */
  top: 0px;                  /* 設置距離視窗頂端為 0px，確保位置在最上方 */
  position: relative;        /* 設置位置為相對定位，使其相對於正常流動布局定位 */
  z-index: 100;              /* 設置 z-index 層級，確保此區塊在其他元素上方 */
  width: 100%;               /* 寬度設置為 100%，確保填滿整個視窗 */
  padding: .6rem 0;          /* 上下內距為 0.6rem，左右內距為 0（僅設置上下間距） */
  height: 100px;             /* 高度設為 100px */
  border-bottom: 8px solid #ddd; /* 底部邊框設置為 8px 寬的灰色邊框 */
}






/*nav*/
#nav {
  margin-top: 22px; /* 設定導覽列的上邊距為 22px */
}

#nav ul li a {
  white-space: nowrap; /* 防止文字換行 */
  color: #333; /* 設定文字顏色為深灰色 */
  line-height: 1.3; /* 設定行高為 1.3 */
  font-weight: normal; /* 設定字重為正常 */
  padding: 10px 18px; /* 設定左右內距為 18px，上下內距為 10px */
  font-size: 95%; /* 設定字型大小為 95% */
  border-bottom: solid 1rem transparent; /* 預設底部邊框為透明 */
  transition: all 0.5s; /* 所有屬性變化的過渡效果時間為 0.5 秒 */
}

#nav ul li a:hover {
  color: #000; /* 滑鼠懸停時，文字顏色變為黑色 */
  border-bottom: solid 1rem #ddd; /* 底部邊框顏色變為淺灰色 */
}

#nav ul li.current a {
  border-bottom: solid 1rem #ddd; /* 設定當前頁面底部邊框為灰色 */
  padding-top: 1rem; /* 增加 1rem 的上內距 */
  color: #115593; /* 設定當前頁面文字顏色為深藍色 */
}

#nav .subnav {
  position: absolute; /* 設定子選單的定位為絕對定位 */
  top: 100%; /* 將子選單放置在父元素下方 */
  max-width: 200px; /* 設定子選單的最大寬度為 200px */
  background-color: #ddd; /* 設定子選單的背景顏色為灰色 */
}

#nav ul .subnav li a {
  background-color: #fff; /* 設定子選單項目的背景顏色為白色 */
  color: #fff; /* 設定文字顏色為白色 */
  text-align: left; /* 文字對齊方式為左對齊 */
  width: 200px; /* 設定子選單項目的寬度為 200px */
}

#nav ul li .subnav a span {
  display: inline-block; /* 設定為行內區塊元素 */
  max-width: 200px; /* 設定最大寬度為 200px */
  padding: 0px 10px; /* 設定左右內距為 10px */
  border-bottom: solid 0rem #ddd; /* 設定底部邊框為透明 */
}

#nav ul li .subnav a span:hover {
  display: inline-block; /* 設定為行內區塊元素 */
  max-width: 200px; /* 設定最大寬度為 200px */
  border-top: 0px solid; /* 移除上邊框 */
  padding: 0px 10px; /* 設定左右內距為 10px */
  border-bottom: solid 0rem #ddd; /* 移除底部邊框 */
}

#nav li.has-subnav ul li a {
  color: #333; /* 設定子選單項目的文字顏色為深灰色 */
  width: 200px; /* 設定寬度為 200px */
  white-space: pre-line; /* 保留空白字元，並自動換行 */
  border-bottom: solid 0rem #ddd; /* 設定底部邊框為透明 */
}

#nav li.has-subnav ul li a:hover {
  color: #fff; /* 滑鼠懸停時，文字顏色變為白色 */
  width: 200px; /* 設定寬度為 200px */
  white-space: pre-line; /* 保留空白字元，並自動換行 */
  border-bottom: solid 0rem #ddd; /* 移除底部邊框 */
}




/* Banner */
.swiper-container {
  height: auto !important; /* 設定容器高度為自動調整，並強制應用此樣式 */
}

.swiper-wrapper, .swiper-slide {
  height: 0 !important; /* 設定包裹和每個滑動項目的高度為 0（強制覆蓋其他樣式） */
  padding-bottom: calc(600 / 1920 * 100%); /* 計算高度與寬度的比例，通常是為了使圖片保持特定比例( 注意圖片高度與寬度要去掉單位) */
}

.swiper-slide {
  width: 100% !important; /* 設定每個滑動項目的寬度為 100%，使其填滿容器 */
}





/*Index_1*/
#bodyinhome .fcol.fcol-1 .container{
  padding-top:60px;
}
/*#bodyinhome .fcol.fcol-1 .container：

#bodyinhome：選擇具有 id="bodyinhome" 的元素。

.fcol.fcol-1：選擇該元素下的所有 class 為 fcol fcol-1 的子元素。

.container：選擇具有 class="container" 的元素，這通常是用來包裹其他內容的容器。

padding-top: 60px;：這行樣式設置了容器的上內距（padding-top）為 60px，意味著容器的上邊距將會有 60px 的間距，這樣內容會被推開，留出空間。*/








/* Owl */
.owl-carousel.owl-theme {
  padding: 0 1rem 2rem; /* 設置輪播容器的內距：上方0，下方2rem，左右各1rem */
}

.owl-carousel.owl-theme .owl-nav {
  top: 50%;
  margin: 0;
  transform: translateY(-50%); /* 將導航箭頭垂直居中 */
}

.owl-carousel.owl-theme .owl-dots {
  bottom: 0; /* 將圓點導航（dots）放置在輪播容器的底部 */
}

.owl-carousel.owl-theme button:focus {
  outline: none; /* 當按鈕被聚焦時，移除輪廓 */
}

.owl-carousel.owl-theme .owl-nav,
.owl-carousel.owl-theme .owl-dots {
  position: absolute;
  left: 0;
  right: 0; /* 將導航（箭頭和圓點）定位為絕對定位並置於容器的左右兩側 */
}

.owl-carousel.owl-theme .owl-nav .owl-prev {
  float: left;
  transform: translateX(-100%); /* 設置左側導航箭頭位置，將其推到容器左邊外面 */
}

.owl-carousel.owl-theme .owl-nav .owl-next {
  float: right;
  transform: translateX(100%); /* 設置右側導航箭頭位置，將其推到容器右邊外面 */
}

.owl-carousel.owl-theme .owl-nav .owl-prev:hover,
.owl-carousel.owl-theme .owl-nav .owl-next:hover {
  background: none;
  color: inherit; /* 當滑鼠懸停在導航箭頭上時，移除背景並繼承文字顏色 */
}

.owl-carousel.owl-theme .owl-nav .fa {
  font-size: 3em; /* 設置箭頭圖示的大小 */
}

.editmode .owl-carousel.owl-loaded {
  display: flex;
  flex-wrap: wrap; /* 在編輯模式下，將輪播設為彈性容器並允許換行 */
}

.editmode .owl-carousel > div {
  flex: 0 0 25%;
  max-width: 25%; /* 在編輯模式下，輪播項目寬度為25% */
}

.owl-carousel .owl-item img {
  display: block;
  width: 100%;
  box-shadow: 0 2px 5px rgba(44,44,44,0.15); /* 設置圖片陰影效果，並使圖片充滿容器寬度 */
}





/*Index_2*/
#bodyinhome .fcol.fcol-2{
  border-top: solid 0.1rem #ddd;
  border-bottom: solid 0.1rem #ddd;
  padding: 2rem 0;
  margin-bottom: 1rem;
}
/*#bodyinhome 區塊中的 .fcol.fcol-2：上下邊框為灰色實線（0.1rem），垂直內邊距 2rem，下外邊距 1rem*/



.newsBox {
    padding: 20px 0 20px 0;
}

.newsBox {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/*.newsBox 是整個新聞區的外框：上下內邊距為 20px，寬度最大為 1280px，置中對齊*/





.newsBox .title {
    text-align: left;
}

.newsBox .title {
    color: #1f1c1d;
}
/*新聞區的標題 .title：文字靠左，顏色為深灰黑色（#1f1c1d）*/



.title {
    width: 100%;
    font-size: 1.313rem;
    line-height: 34px;
    margin-bottom: 50px;
    font-family: Noto Serif, PT Serif, "source-han-serif-tc", Songti TC, serif;
}
/*標題的樣式：寬度全滿，字體大小約 21px，行高 34px、底部間距 50px，使用襯線字型*/




.newsBox .newsList li {
    width: 100%;
    border-bottom: 1px solid #dddddd;
    list-style: none;
    padding: 0 10px 13px 10px;
    margin-bottom: 25px;
}
/*每個新聞項目（li）：寬度100%，下方有灰色邊框，左右 padding 10px，底部 13px，下外距 25px*/


.newsBox .newsList li span {
    font-size: 1.188rem;
    color: #6e6e6e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*內容文字 .span：字體大小約 19px，顏色偏灰，過長文字以省略號結尾，單行顯示*/



/*針對小於 768px 的螢幕（如手機）*/
@media screen and (max-width: 768px) {
.newsBox .newsList li  {
    font-size: 1.188rem;
    color: #6e6e6e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
 }
}

.newsBox .newsList li time {
    font-size: 1rem;
    color: #6abadd;
    border: 1px solid #6abadd;
    padding: 0 11px;
    line-height: 29px;
    margin-right: 25px;
    transition: 0.4s;
    display: inline-block;
    vertical-align: middle;
}

.newsBox .newsList li .more {
    float: right;
    color: #6abadd;
    font-size: 1rem;
}

@media(max-width:768px){
.newsBox {
    width: 100%;
    margin: 0 auto;
    padding:27px 0 0 0 ;
  }
}

@media(max-width:768px){
.newsBox {
    width: 100%;
    margin: 0 auto;
 }
}

@media screen and (max-width: 960px) {
  /*.newsBox .newsList li .more {
    display: none; }*/
  .newsBox .newsList li time {
    margin-right: 9px; } }

@media screen and (max-width: 768px) {
  .newsBox .newsList li {
    width: 95%;
    margin: 0 auto 25px auto; }
  .newsBox .newsList li time {
    font-size: 0.8rem; }
   .newsBox .newsList li span {
    font-size: 1rem; }
  .newsBox .newsList li span {
    width: 100%;
    font-size: 1rem;
    margin-top: 10px; }
  .moreBtn a {
    font-size: 1.15rem;
    width: 180px;
    height: 39px;
    line-height: 35px; }
  .newsTitle time {
    bottom: -32px; }
  .othernewsList li {
    width: 49%;
    display: inline-block;
    vertical-align: top;
    float: none; }
  .othernewsList li span {
    width: 100%;
    font-size: 0.875rem; } }





/*針對小於 750px 的螢幕*/
@media screen and (max-width: 750px) {
  .newsTitle time, .othernewsList li time {
    width: 90px;
    bottom: 0px;
    float: none;
    display: block;
    margin: 0 0 7px 0;
    font-size: 0.8rem;
    padding: 0 8px;
    line-height: 25px; }
  .newsTitle h2 {
    width: 100%;
    float: none;
    font-size: 1.2rem; }
  .newsBox .newsList li span {
    font-size: 0.875rem; }
  .newspage .back {
    padding-top: 30px; }
  .othernewsList li time {
    margin-bottom: 2px; }
  .othernewsList {
    padding: 0 0 0 10px; }
  .newsxpage .back {
    margin-top: 30px; } }


@media(max-width:768px){
.newsBox .newsList li span {
    font-size: 1rem;
 }
}


/*特別小的裝置（360px 以下手機）*/
@media (max-width: 360px) {
  .newsBox .newsList li span {
    width: 69%; /* 為了讓文字不擠到畫面外 */
  }
}

@media(max-width:900px){
  #bodyinhome .fcol.fcol-2 .col-md-8{
    flex: 0 0 100%;
  }
}
/*在 #bodyinhome 區塊中，找到同時具有 .fcol 和 .fcol-2 類別的元素內部的 .col-md-8 元素，把它的 flex 寬度設定為 100%。*/




/*Index_3*/
#bodyinhome .fcol.fcol-3 .container{
  max-width:100%;
  width:100%; 
}
/*位於 #bodyinhome 中的 .fcol-3 區塊裡的 .container 寬度設為 100%，讓它填滿整個父元素。常用於滿版設計的 section。*/


.service_img {
  position: relative;
}
/*讓裡面的 .service_text 可以用 position: absolute 疊加在圖片上。*/



.service_img img{
  border-radius:0px
}
/*圓角設為 0（圖片是矩形、不帶圓角）。*/



.service_text {
  position: absolute;  /* 絕對定位，讓它疊在父層（通常是圖片）上 */
  display: table-cell; /* 模擬表格儲存格，用來垂直置中 */
  z-index: 999;        /* 疊層順序高，蓋住圖片 */
  text-align: center;  /* 文字水平置中 */
  vertical-align: middle; /* 垂直置中（和 table-cell 搭配） */
  width: 100%;         /* 寬度撐滿父層 */
  height: 100%;        /* 高度撐滿父層 */
  color: #fff;         /* 文字為白色 */
  top: 0px;
  bottom: 0;
  left: 0;
  right: 0;            /* 讓它完全覆蓋父層 */
  padding: 0 15px 15px 15px; /* 內邊距 */
  background: rgba(0, 0, 0, 0); /* 背景為全透明 */
  text-shadow: black 0.1em 0.1em 0.2em; /* 黑色陰影效果（被覆蓋） */
  border-radius: 0px;  /* 無圓角 */
  text-shadow: none;   /*  覆蓋上面的陰影，最終不顯示陰影 */
}


.service_text:hover {
  position: absolute;             /* 保持絕對定位，覆蓋圖片 */
  display: table-cell;            /* 保持表格儲存格，用於垂直置中 */
  z-index: 999;                   /* 疊層順序高，確保在最上層 */
  text-align: center;             /* 文字水平置中 */
  vertical-align: middle;         /* 垂直置中 */
  width: 100%;
  height: 100%;
  color: #fff;                    /* 白色文字 */
  top: 0px; bottom: 0; left: 0; right: 0;
  padding: 0 15px 15px 15px;      /* 保持內邊距 */
  background-color: rgba(0,0,0,0.55);  /* 背景變成半透明黑 */
  transition: 0.5s;               /* 漸變效果持續 0.5 秒 */
}


.service_text div {
  font-size: 20px;                      /* 字體大小為 20px */
  line-height: 30px;                   /* 行高 30px，文字垂直間距 */
  position: relative;                  /* 使用 relative 搭配 top 定位 */
  top: 45%;                            /* 離父層上方 45%，讓文字往中間靠近 */
  font-weight: bold;                   /* 粗體字 */
  border: 1px solid #fff;              /* 白色邊框 */
  padding: 8px;                        /* 內邊距 */
  background: rgba(75,75,75,0.45);     /* 半透明深灰背景 */
  width: 60%;                          /* 占父層寬度 60% */
  margin: 0 auto;                      /* 水平置中 */
  text-shadow: none;                   /* 不要文字陰影 */
}

@media (max-width: 768px) {
  .service_text div {
    font-size: 18px;          /* 字體縮小，適應小螢幕 */
    line-height: 20px;        /* 行距也跟著縮小 */
    position: relative;       /* 使用相對定位，搭配 top */
    top: 40%;                 /* 將區塊往下推 40%，大致垂直置中 */
  }
}


@media (max-width: 480px) {
  .service_text div {
    font-size: 24px;       /* 增加字體大小，讓手機上更清晰 */
    line-height: 30px;     /* 行高調整為 30px，保持可讀性 */
    position: relative;    /* 使用相對定位 */
    top: 40%;              /* 往下推 40%，使文字接近垂直中間 */
  }
}


@media (max-width: 480px) {
  #bodyinpage.rwd-collapse.viewmode.default.about-us .fcol.fcol-3 .container{
  padding:40px 20px 40px;
  }
}
/*在 <body> 元素有以下類別時：

rwd-collapse

viewmode

default

about-us

並且在 .fcol.fcol-3 區塊內的 .container 元素

會套用：

padding-top: 40px

padding-right: 20px

padding-bottom: 40px

padding-left: 20px*/


@media (max-width: 768px) {
.service_text div {
  width:100%;
 }
}
/*當畫面變小時（例如平板或手機），將原本 .service_text div 的寬度從：60%變為100%*/




/*Index4~6*/
#bodyinhome .fcol.fcol-4,
#bodyinhome .fcol.fcol-5,
#bodyinhome .fcol.fcol-6{
  display:none;
}
/*首頁區塊隱藏*/



/*about*/
.pic.row img {
  border: 4px solid #fff;                           /* 加上 4px 白色實線邊框 */
  box-shadow: 0 5px 5px rgba(44,44,44,0.25);        /* 加上陰影效果，讓圖片浮起來 */
}


.pic.row a{
  display:block;
}
/*將 .pic.row 區塊內的超連結（<a>）設定為 block。讓 <a> 元素變成區塊元素，整個區塊都可以被點擊，不只是一小段文字或圖片的一部分。*/


.pic img{
  border:4px solid #fff;
  box-shadow: 0 5px 5px rgba(44,44,44,0.25);
}
/*針對 .pic 區塊內的圖片加上：白色實線邊框,下方陰影效果*/


.pic a{
  display:block;
}
/*確保 .pic 區塊內的超連結也以區塊形式呈現。若 .pic 和 .pic.row 都用在不同結構中，這樣可確保所有圖片連結都能完整點擊。*/



/*h1*/
.h1title h1{
  color:#333;
}
/*將 <h1> 的文字顏色設為深灰色（#333 為比純黑 #000 淡一點的灰色）*/



/* side */
#side ul li a {
    color: #555;                             /* 文字顏色為深灰色（#555） */
    display: block;                          /* 讓超連結擴展為整個區塊（整個區塊都可點） */
    padding: 10px 20px;                      /* 上下內距 10px，左右內距 20px */
    transition: .3s;                         /* 滑鼠滑過時的過渡效果持續 0.3 秒 */
    border-bottom: 1px dashed #555;          /* 下方加上一條虛線分隔線，顏色同文字 */
}


ul.product-list li h3 {
    flex: 1 0 auto;                    /* 彈性盒子配置：可伸展但不縮小，基礎寬度自動 */
    max-height: 3.15rem;              /* 最大高度限制，超過會被截斷 */
    margin: 0.7rem 0;                 /* 上下外距 0.7rem，左右無 */
    font-size: 1.05rem;               /* 字體大小約為 16.8px（視瀏覽器基準） */
    line-height: 1.5;                 /* 行高為 1.5 倍字體高度 */
    color: #000;                      /* 黑色文字 */
    overflow: hidden;                 /* 超出容器內容不顯示 */
    padding: 0 16px;                  /* 左右內距 16px */
}


body[data-type="fullpage"] .product-list-div h2 a.show-all {
    color: #fff;
    transition-property: left, color;
    background: #2886c8;
    text-shadow: none;
    padding: 0 10px;
}


/*form*/
.mark{
   background:none;
}


/*footer*/
#foot-nav{
  display:none;
}