/************************************/
/*           網頁全域設定            */
/************************************/
/*border-box的計算方式：width = 內容 + 內距 (Padding) + 邊框 (Border)*/
/*content-box的計算方式：width = 內容*/
/*強烈建議使用 border-box）*/
* {
  box-sizing: border-box;
}
body{
    background-color:rgb(204, 205, 205);/*全域背景顏色*/
    font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif;
}
html, body, div{
  margin:0;/*讓瀏覽器與div容器間沒有間隙*/
  padding: 0;
}
p, h1, h2, h3, h4{
  margin:0;
  padding:0; 
  word-break: break-all;/*字太長時，允許自動換行*/
  /*word-wrap:break-word;/*字太長時，允許自動換行*/
  overflow-wrap: break-word;/*字串太長時，允許自動換行*/
}
/************************************/
/*           橫幅標頭設定            */
/************************************/
header {
  display: flex;
  width:100%;   
  max-width:1200px;/*設定最大寬度*/
  height:120px; /*設定高度*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/  
  padding-top:10px;
  padding-bottom:10px;
  border: 1px solid rgb(114, 54, 5); /*邊框設定*/
  background-color: #FFF4A3;
  background-image: 
        url("../pic/bg-LogoBanner-Leftside.png"), 
        url("../pic/bg-LogoBanner-Rightside.png"),
        url("../pic/bg-LogoBanner.png"); /*公司Banner-背景圖*/
  background-position: left top, right top, center top;
  background-repeat: no-repeat, no-repeat, repeat-x;
  background-size: auto,auto, auto;
  align-items: center;      /* 水平置中對齊 */
  justify-content: center;  /* 垂直置中對齊 */
}
.header-title{
  color:#042266;
  /*-webkit-text-stroke: 0.3px rgb(32, 153, 245);/* 字體周圍加上粗線 */
  padding-left:5px;
  text-align: center;/*Header預設是display:flex，須建立一個div;*/
}
.header-title h1 span, .header-title h2 span{
  color:#0ca807; 
  font-size:24px;
  /*-webkit-text-stroke: 0.3px rgb(8, 197, 11);/* 字體周圍加上粗線 */
}

/************************************/
/*             導覽列設定            */
/************************************/
.navbar{
  display:block;
  max-width:1200px;/*一定要用max-width*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/
  position: sticky;/*螢幕scroll時，固定在上方位置(top:0)*/
  top: 0;
  z-index: 999;/*垂直軸的權限最高，不會被其他圖層覆蓋*/
}
.navbar-hide{
  display:block;  
}
.mobile-br {
  display: none;/*(手機版)：把導覽列的換行標籤藏起來 */
}
ul {
  display:flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #333333;
  font-size:20px;
  justify-content: center;
}
ul li a {
  display: block;
  color: white;
  text-decoration: none;
  padding:10px 10px 10px 10px;/*順序：上右下左*/
  margin:10px 5px 10px 5px; /*順序：上右下左*/
  border:1px solid rgb(220, 218, 218);
}
ul li a:hover {
  background-color: #111111;
}

/************************************/
/*             Roadmap設定           */
/************************************/
.roadmap{
  /*display:block;*/
  max-width:1200px;/*一定要用max-width*/
  background-color:#80807f;/*背景顏色*/
  color:rgb(244, 244, 245);/*字體顏色*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/
  padding:10px 5px 10px 5px;/*順序：上右下左*/
  text-align: center; /*字體靠左*/ 
  font-size: 20px;/*字體大小*/
  position: sticky;/*螢幕scroll時，固定在上方位置*/
  background-image: 
        url("../pic/bg-roadmap-leftend.png"), 
        url("../pic/bg-roadmap-rightend.png"),
        url("../pic/bg-roadmap.png"); /*公司Roadmap-背景圖*/

  background-position: left top, right top, center top;
  background-repeat: no-repeat, no-repeat, repeat-x;
  /*background-size: auto,auto, auto; */
}
.roadmap p a{
  font-weight:bold;  
  color:aliceblue;
}
.roadmap p span{
  font-weight:bold;  
}

/************************************/
/*             總內容設定            */
/*     總內容 = 側內容 + 主內容       */
/************************************/
.content-container{
  display:flex;
  flex-wrap:wrap;
  max-width:1200px;/*一定要用max-width*/
  min-height:500px;/*一定要用min-height*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/
  background-color:#a1f986;
}
/************************************/
/*      側內容(左側說明欄)設定        */
/************************************/
.content-side{
  flex: none; 
  width: 20%; /* 牢牢固定在 20% */
  height:auto;
  margin:0;
  padding:10px;
  font-size:20px;
  color:#0e0e0f;
  text-align: justify;/*貼齊左右兩側*/
  word-break: break-all;
  background-image: url("../pic/bg-content-side.png"); /*公司側內容-背景圖*/
  background-position: center;
  background-size:cover;
}
.company_content_side{
  flex: none; 
  width: 20%; /* 牢牢固定在 20% */
  height:auto;
  margin:0;
  padding:10px;
  color:#111111;
  background-image: url("../pic/bg-content-side.png"); /*公司側內容-背景圖*/
  background-position: center;
  background-size:cover;
}
/************************************/
/*             主內容設定            */
/************************************/
.content-main{
  flex: none; 
  width: 80%;/* 牢牢固定在 80% */
  padding:20px;
}
/************************************/
/*          主內容-公司介紹          */
/************************************/
.company_content_main{
  flex: none; 
  width: 80%;/* 牢牢固定在 80% */
  padding:40px 90px 40px 90px;/*順序：上右下左*/
  background-color: #94f79a;
  background-image: url("../pic/bg-content-main.png"); /*主內容(公司介紹)-背景圖*/
  /*background-repeat: no-repeat;*/
  background-size: cover; /*自動放大*/ 
}
.company-info{
  text-align: justify;/*貼齊螢幕的左右兩側*/
  word-break: break-all;
  border:1px solid rgb(15, 200, 12);
  padding:50px 80px 50px 80px;/*順序：上右下左*/
  background-color:#f1f5f8;
  opacity: 0.8;/*透明度*/ 
  p{
    color:rgb(3, 50, 91);
    font-size:20px;
  }
  h1, h2, h3, h4{
    color:rgb(1, 59, 67);
  }
}
/************************************/
/*        主內容-產品選項設定         */
/************************************/
.product-main{
  flex: none; 
  width: 80%;/* 牢牢固定在 80% */
  padding:20px;
  background-image: url("../pic/bg-content-product.png"); /*主內容(產品選項)-背景圖*/
  background-position: center;
  background-size: cover; /*自動放大*/ 
}
.product-container{
  display: grid; /* 啟用無敵的 Grid 網格系統 */  
  grid-template-columns: repeat(3, 1fr); /*強迫規定畫面上「只能有3欄」，每欄各平分 1/3的空間 (1fr) */
  justify-items:center;  /* 讓這3欄裡面的產品卡片水平置中 */
  max-width: 800px;    /* 限制產品區域的最大寬度（可依喜好改 700px~900px） */
  margin: 0 auto;
  gap:10px; 
}
.product{
  display:flex;
  flex-direction:column;   /* 💡 關鍵一：設定由上到下排列 */
  align-items: center;      /* 水平置中對齊 */
  justify-content: center;  /* 垂直置中對齊 */
  text-align:center;
  max-width: 240px; /* 限制最大寬度 */
  height:auto;  
  border-radius: 15px;
  border: 2px solid #8b8b8b;
  padding-top:10px;
  padding-bottom:10px;
  margin-right:10px;/* 彼此間的間距 */
  margin-top:10px;/* 彼此間的間距 */
  text-decoration: none; /* 💡 確保超連結字體不會出現底線 */ 
  background-color: rgb(242, 243, 242); /* For browsers that do not support gradients */
  background-image: linear-gradient(rgb(203, 204, 203) 10%, rgb(242, 243, 242) 50%, rgb(203, 204, 203) 90%);
}
.img-product{
  width: 70%;            /* 寬度佔滿卡片的 80% */
  height: auto;          /* 高度依比例自動縮放 */
  aspect-ratio: 1 / 1;   /* 保持正方形 */
  border: 1px solid #036a44;
  border-radius: 15px;   /* 圓角 */
  object-fit: cover;     /* 確保圖片不變形 */
}
.product-title{
  color: #393838;
  font-size: 18px;  /* 電腦版字體較小 */
  font-weight:bold;
  margin-top: 10px; /* 與上方圖片的間距 */
  margin-bottom: 0;
}
.product:hover, .product:active{
  border: 3px solid #c4f0df;
  background-color:rgb(4, 106, 17);
  background-image:none;
  cursor: pointer;
  .product-title{
    color:aliceblue;  
    font-weight:bold;
  }
}
/************************************/
/*        主內容-機械產品設定         */
/************************************/
.machine-container{
  display:flex;
  flex-direction:row;   /* 左右排列*/
  width:100%;
  max-width:800px;/*一定要用max-width*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/ 
  /*border-collapse: collapse;*/
  border: 3px solid #012115;
  /*background-color:#fafbfb;*/
  align-items: center; /*左右兩個子區塊相對於外圍黑框「垂直置中」*/
  justify-content: center;/* 希望當表格比較矮、圖片比較高時，表格也能垂直置中，可用這行 */
}
.machine-photo{
  width:40%;
  height: auto; /* 高度依比例自動縮放 */
  /*display: flex; /*讓圖片區塊本身也成為 Flex 容器，方便不論在電腦版或手機版，裡面的圖片都能輕鬆置中 */
  justify-content: center;
  align-items: center;
}
.machine-photo img{
  width:100%;
  height:auto; 
}
.machine-spec{
  width:60%;
  height: auto; 
  /*display: flex;/* 同樣讓規格區塊也具備 flex 垂直置中，確保裡面的表格完美居中 */
  align-items: center;
  justify-content: center;
}
.tb-machine{
  width: 100%;
  max-width:470px;/*一定要用max-width*/
  height:auto;
  margin-left:auto;
  margin-right:auto;
  border-collapse: collapse;
}
.tb-machine-lable{
  width: 100px; /* 這裡一樣可以固定寬度 */
  font-size: 18px;
  font-weight: bold;
  background-color: #e0f7fa;
  border: 1px solid #04AA6D;
  padding: 10px;
  text-align: center;
}
.tb-machine-value{
  border: 1px solid #04AA6D;
  font-size: 18px;
  padding: 10px;
  text-align: justify;/*貼齊螢幕的左右兩側*/
  word-break: break-all; /* 表格欄位的自動換行設定 */ 
}

/************************************/
/*      主內容-其他內容背景設定       */
/************************************/
.other-main{
  flex: none; 
  width: 80%;/* 牢牢固定在 80% */
  padding:20px;
  background-image: url("../pic/bg-content-others.png"); /*主內容(產品選項)-背景圖*/
  background-position: center;
  background-size:cover; /*自動放大*/ 
}

/************************************/
/*        主內容-友站連結設定         */
/************************************/
.client-container{
  display: grid; /* 啟用無敵的 Grid 網格系統 */  
  grid-template-columns: repeat(4, 1fr); /*強迫規定畫面上「只能有4欄」，每欄各平分 1/4的空間 (1fr) */
  justify-items:center;  /* 讓這4欄裡面的產品卡片水平置中 */
  max-width: 800px;    /* 限制產品區域的最大寬度（可依喜好改 700px~900px） */
  margin: 0 auto;
  gap:10px; 
}
.client{
  display:flex;
  flex-direction:column;   /* 💡 關鍵一：設定由上到下排列 */
  align-items: center;      /* 水平置中對齊 */
  justify-content: center;  /* 垂直置中對齊 */
  text-align:center; /* 字行置中 */
  max-width: 240px; /* 限制最大寬度 */
  height:auto;  
  border-radius: 15px;
  border: 3px solid #124277;
  padding-top:10px;
  padding-bottom:10px;
  margin-right:10px;/* 彼此間的間距 */
  margin-top:10px;/* 彼此間的間距 */
  text-decoration: none; /* 💡 確保超連結字體不會出現底線 */ 
  background-color:rgb(38, 97, 165); /* For browsers that do not support gradients */
  background-image: linear-gradient(rgb(155, 190, 243) 5%, rgb(38, 97, 165) 50%, rgb(155, 190, 243) 95%);
}
.img-client{
  width: 70%;            /* 寬度佔滿卡片的 80% */
  height: auto;          /* 高度依比例自動縮放 */
  aspect-ratio: 1 / 1;   /* 保持正方形 */
  border: 1px solid #036a44;
  border-radius: 15px;   /* 圓角 */
  object-fit: cover;     /* 確保圖片不變形 */
}
.client-title{
  color: #12327b;
  font-size: 20px;  /* 電腦版字體較小 */
  font-weight:bold;
  margin-top: 10px; /* 與上方圖片的間距 */
  margin-bottom: 0;
}
.client:hover, .client:active{
  border: 3px solid #c4f0df;
  background-color:rgb(4, 106, 17);
  cursor: pointer;
  .client-title{
    color:aliceblue;  
    font-weight:bold;
  }
}
/************************************/
/*       主內容-操作影片設定          */
/************************************/
.doc-title{
  width:100%;
  max-width:800px;/*一定要用max-width*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/ 
  margin-top:20px;
  padding: 10px;
  text-align: center;  
  font-size: 20px;
  font-weight:bold;
  background-color:#0d518c;
  color:rgb(221, 232, 243);
}
.doc{
  display:flex;
  flex-direction:row;/*手機版時，為(上中下)排列*/
  width: 100%;
  max-width:800px;/*一定要用max-width*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/ 
  background-color: #cae5f5; 
}
.doc-lable{  /* 此欄位為影片的說明欄 */
  width:50%; /* 此欄位占.doc的50% */
  background-color:#c4f0df; 
  font-size:18px;
  color:#012115;
  text-align:left;  
  padding-left:10px;
}
.doc-video{
  width:50%; /* 此欄位占.doc的50% */
}
.doc-video iframe {
  width:100%;
  aspect-ratio: 16 / 9;  /* 💡 核心魔法：強制影片永遠維持 16:9 比例，高度自動計算！ */
  height: auto;          /* 高度設定為自動 */
  border: none;          /* 拿掉難看的預設灰色框線 */
  border-radius: 10px;  /* 偷偷加點圓角，影片質感會大幅提升！ */
}

/************************************/
/*     主內容-表格(聯絡方式)設定      */
/************************************/
.tb-contact{
  width: 100%;
  max-width:700px;
  border-collapse: collapse;
  border: 3px solid #012115;
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
}
.tb-contact-lable{
  width: 100px; /* 這裡一樣可以固定寬度 */
  font-size: 18px;
  font-weight: bold;
  background-color: #e0f7fa;
  border: 1px solid #23619f;
  padding: 10px;
  text-align: center;
}
.tb-contact-value{
  border: 1px solid #23619f;
  font-size: 18px;
  padding: 10px;
  background-color: #b6cdf6;
  text-align: left;
  word-break: break-all; /* 表格欄位的自動換行設定 */ 
}
/************************************/
/*     主內容-表單(聯絡方式)設定      */
/************************************/
/* 容器背景色 */
.contact-form {
  background-color: #62b6e2; /* 截圖中的底色 */
  border: 2px solid #052963;
  padding: 30px;
  width: 100%;
  max-width: 700px;
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
  font-size:20px;  
}
/* 多行文字區塊與按鈕對齊 */
.contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #7f7f7f;
  margin-top: 10px;
  margin-bottom: 10px;
}
.form-button {
  padding: 4px 4px;
  font-size: 16px;
  cursor: pointer;
}

/************************************/
/*     主內容-表格(產品項目)設定      */
/************************************/
.tb-product{
  width: 100%;
  max-width:750px;
  border-collapse: collapse;
  border: 3px solid #012115;
  margin-top:10px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
}
.tb-product-lable{
  width: 100px; /* 這裡一樣可以固定寬度 */
  font-size: 18px;
  font-weight: bold;
  background-color: #e0f7fa;
  border: 1px solid #04AA6D;
  padding: 10px;
  text-align: center;
}
.tb-product-value{
  border: 1px solid #04AA6D;
  font-size: 18px;
  padding: 10px;
  text-align:justify;/*貼齊左右兩側*/
  word-break: break-all; /* 表格欄位的自動換行設定 */ 
}
/**********************/
/* 公司google地圖設定  */
/**********************/
.map{
  width: 100%;
  max-width: 800px; /* 💡 電腦版限制最大寬度為原設定的 800px */
  margin: 0 auto;   /* 讓地圖在網頁中置中 */ 
}
.map iframe{
  width: 100%;                /* 💡 寬度強制填滿容器 */
  aspect-ratio: 8 / 6;        /* 💡 核心魔法：強制地圖永遠鎖定 8:6 的寬高比！ */
  height: auto;               /* 高度設定為自動（會依據 8:6 比例自動計算） */
  border-radius: 10px;        /* 偷偷加上圓角，跟地圖搭起來質感非常好！ */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 加上淡淡的陰影，讓地圖看起來更立體 */
}

/************************************/
/*           橫幅標尾設定            */
/************************************/
/*電腦版(左中右)，手機版(上中下)，RWD響應式設定*/
footer {
  display:flex;
  flex-direction:row;/*手機版時，為(上中下)排列*/
  max-width:1200px;/*一定要用max-width*/
  min-height:120px;/*一定要用min-height*/
  margin-left: auto;/*左側邊緣置中*/
  margin-right: auto;/*右側邊緣置中*/
  background-color: #075888; 
}
footer .foot_address{
  width: 40%;
  margin: auto;
  padding: 10px;
  text-align: center;  
  font-size: 20px;
  color:aliceblue; 
  word-break: break-all;/*字太長時，允許自動換行*/
  overflow-wrap: break-word;/*字串太長時，允許自動換行*/
}
footer .foot_contact{
  width: 30%;
  margin: auto;
  padding: 10px;
  text-align: center;  
  font-size: 20px;
  color:aliceblue; 
}
footer .foot_email{
  width: 30%;
  margin: auto;
  padding: 10px;
  text-align: center;  
  font-size: 20px;
  color:aliceblue; 
  word-break: break-all;/*字太長時，允許自動換行*/
  overflow-wrap: break-word;/*字串太長時，允許自動換行*/
}

/************************************/
/*         手機版網頁設定            */
/************************************/
@media (max-width:700px) {
  /**********************/
  /*     公司Banner設定    */
  /**********************/
  header {
  background-image:url("../pic/bg-LogoBannerM.png"); /*公司Banner-手機版背景圖*/
  background-position: center;
  background-repeat:no-repeat;
  background-size:cover;
}
  /**********************/
  /*     產品選單設定    */
  /**********************/
  .product-container {
    grid-template-columns: repeat(1, 1fr);/*強迫欄位變成「只有 1 欄」*/
    justify-items: center;
  }
  .product{
    display:flex;
    flex-direction: row;     /* 💡 關鍵二：強制切換為「左右排列」 */
    justify-content:flex-start; /* 讓內容靠左對齊起點 */
    align-items: center;      /* 垂直方向置中對齊 */
    width: 100%;/*限制它最大就是螢幕寬度，框框才不會爆出去 */
    max-width:none; /*取消原本的max-width*/
    height: auto; /* 主內容的產品選項自動決定高度，避免重疊 */
  }
  .product-title{
    font-size: 18px;  /* 電腦版字體較小 */
    font-weight: bold;/*字體較小*/
    color:#033451;/*主內容的產品選項，字體變動*/
    margin:0;/*產品項目的字體是margin-top:10px 取消*/
  }
  .img-product{
    width:70px;
    height:70px;
    flex-shrink: 0;   /* 確保圖片絕對不會被右邊的大字擠壓變形 */
    margin-right: 20px; /* 與右邊文字拉開距離 */
    margin-left: 20px; /* 與右邊文字拉開距離 */
  }
  /**********************/
  /*     總內容設定      */
  /**********************/
  .product-main{
    flex: auto; /*主內容(產品選項)*/
    width: 100%;
    height: auto; /*讓內容自動決定高度，避免重疊 */ 
  }
  .content-container{
    flex-direction: column;/*總內容排列(上中下)*/ 
  }
  .content-main {
    flex: auto; /*主內容的比例採自動*/
    width: 100%;
    height: auto; /*讓內容自動決定高度，避免重疊 */
  }
  .other-main {
    flex: auto; /*主內容的比例採自動*/
    width: 100%;
    height: auto; /*讓內容自動決定高度，避免重疊 */
  }
  .company_content_main{
    flex: auto; /*主內容(公司簡介)*/
    width: 100%;
    height: auto; /*讓內容自動決定高度，避免重疊 */ 
    padding:20px 20px 20px 20px;/*順序：上右下左*/  
  }
  .company-info{
    padding:30px;/*主內容(公司簡介)*/
  }
  /**********************/
  /*      友站連結       */
  /**********************/
  .client-container {
    grid-template-columns: repeat(1, 1fr);/*強迫欄位變成「只有 1 欄」*/
    justify-items: center;
  }
  .client{
    display:flex;
    flex-direction: row;     /* 💡 關鍵二：強制切換為「左右排列」 */
    justify-content:flex-start; /* 讓內容靠左對齊起點 */
    align-items: center;      /* 垂直方向置中對齊 */
    width: 100%;/*限制它最大就是螢幕寬度，框框才不會爆出去 */
    max-width:none; /*取消原本的max-width*/
    height: auto; /* 主內容的產品選項自動決定高度，避免重疊 */
  }
  .client-title{
    font-size: 20px;  /* 電腦版字體較小 */
    font-weight: bold;/*主內容的產品選項，字體變動*/
    color:#03263b;/*主內容的產品選項，字體變動*/
    margin:0;/*產品項目的字體是margin-top:10px 取消*/
  }
  .img-client{
    width:70px;
    height:70px;
    flex-shrink: 0;   /* 確保圖片絕對不會被右邊的大字擠壓變形 */
    margin-right: 20px; /* 與右邊文字拉開距離 */
    margin-left: 20px; /* 與右邊文字拉開距離 */
  }
  /**********************/
  /*   聯絡方式(表格)    */
  /**********************/
  .tb-contact{
    width: 100%;
    max-width:none;/*最大寬度限制取消，直接就是width=100%*/
    height: auto; /*讓內容自動決定高度，避免重疊 */
  }
  /**********************/
  /*   產品項目(圖片)    */
  /**********************/
  .tb-product-value img{
    width:100%;
    height:auto;
  }
  /**********************/
  /*  機械產品項目(圖片)  */
  /**********************/
  .machine-container{
    flex-direction: column;/*上下排列*/
    align-items: center;   /* 手機版時，強迫內部的【圖片區塊】與【規格區塊】水平置中對齊 */
    padding: 15px 0;       /* 稍微幫手機版上下加點內距，讓畫面呼吸，不會太擠 */
  }
  .machine-photo{
    width:70%;
    height:auto;   
    justify-content: center;  /*  水平置中內部的 <img> */
    margin-bottom: 15px;      /* 幫圖片跟下方的表格之間加點距離，視覺更舒服 */
  }   
  .machine-spec{
    width:100%;
    height:auto;  
    padding: 0 10px;     /* 防止表格在手機版時死貼著左右螢幕邊緣 */
  }
   /**********************/
  /*    操作影片設定      */
  /**********************/
  .doc{
    flex-direction: column;/*標尾排列(上中下)*/ 
  }
  .doc-video, .doc-lable{
    width:100%;
    padding:0;
  }

  /**********************/
  /*       標尾設定      */
  /**********************/
  footer{
    flex-direction: column;/*標尾排列(上中下)*/
  }
  footer .foot_address, footer .foot_contact, footer .foot_email{
    width:100%;
    height:auto;  
    padding:10px auto 10px auto ; /*順序：上右下左*/
  }
  /**********************/
  /*     導覽列設定      */
  /**********************/
  .navbar-hide{
    display:none; /*導覽列部分按鈕取消*/ 
  }
  .mobile-br {
    display: block; /*導覽列的換行標籤生效*/
  }
  /**********************/
  /*     Roadmap設定      */
  /**********************/
  .roadmap{
  background-image: url("../pic/bg-roadmap.png"); /*公司Roadmap-背景圖*/
  background-position:center;
  background-repeat: repeat-x;
  background-size:cover;
}
  /**********************/
  /*     側欄位設定      */
  /**********************/
  .company_content_side {
    display:none; /*公司簡介的側欄位消失*/  
  } 
  .content-side{
    flex:none; /*側內容的20%比例取消*/ 
    width: 100%;
    height:auto; /* 讓內容自動決定高度，避免重疊 */ 
    background-image: none; /* 背景圖消失 */ 
    background-color:#043f92; 
    font-size:18px;
    color:#f7f7f9;/* 字體顏色改變 */  
  }
}