.header {
      display: flex;
      background-color: rgb(255, 255, 255);
      padding: 5px 0;
      border-bottom: #818181 solid 0.5px;
      height: 50px;
      position: fixed;
      width: 100%;
      z-index: 2;
      top: 0;
  }

  .header nav {
      width: 100%;
      margin-right: 0px;
      text-align: right;
      font-size: 0px;
  }

  .header nav a {
      display: inline-block;
      height: 35px;
      font-size: 16px;
      color: rgb(0, 0, 0);
      text-decoration: none;
      padding: 10px;
      transition: color 0.3s;
  }

  .navA {
      display: block;
  }

  .navB {
      display: none;
  }


  /* 當視窗寬度小於或等於1400px時 */
  @media screen and (max-width: 1400px) {

      /* 隱藏導覽列A */
      .navA {
          display: none;
      }

      /* 顯示導覽列B */
      .navB {
          display: block;
      }
  }


  .header .logo img {
      max-width: auto;
      height: 100%;
      margin-left: 25px;
  }

  .header .logo {
      display: inline-block;
      display: flex;
  }

  ul {
      /* 取消ul預設的內縮及樣式 */
      margin: 0;
      padding: 0;
      list-style: none;
  }

  ul.drop-down-menu {
      display: inline-block;
      font-size: 13px;
      margin-top: 5px;
  }

  ul.drop-down-menu li {
      position: relative;
      white-space: nowrap;
  }


  ul.drop-down-menu>li {
      float: left;
      margin: 0px;
      /* border: #333 solid; */
  }

  ul.drop-down-menu a {
      background-color: #fff;
      color: #333;
      display: block;
      padding: 0 15px 8px 15px;
      text-decoration: none;
      line-height: 45px;
  }

  ul.drop-down-menu a:hover {
      /* 滑鼠滑入按鈕變色*/
      background-color: #b8b6b6;
      color: #252670;
  }

  ul.drop-down-menu li:hover>a {
      /* 滑鼠移入次選單上層按鈕保持變色*/
      background-color: #b8b6b6;
      color: #252670;
  }


  ul.drop-down-menu ul {
      border: #ccc 1px solid;
      position: absolute;
      z-index: 98;
      top: 100%;
      width: 100%;
      left: 0;
      box-sizing: border-box;
  }


  ul.drop-down-menu ul {
      /*隱藏次選單*/
      display: none;
      text-align: center;
  }

  ul.drop-down-menu li:hover>ul {
      /* 滑鼠滑入展開次選單*/
      display: block;
  }

  .banner img {
      width: 100%;
      height: auto;
      /* 保持圖片的原始比例 */
      max-height: 520px;
      /* 限制圖片的最大高度，您可以根據需要調整這個值 */
      object-fit: cover;
      /* 保持圖片比例的同時填滿容器 */
  }

  .wrap {
      width: 1280px;
      margin: auto;
  }

  .about {
      padding: 40px 0 60px;
      text-align: center;
  }

  .about .wrap {
      display: flex;
  }

  .about .wrap .item {
      width: 400px;
      margin: 0 12px;
      text-align: center;
  }

  .about>h2 {
      text-align: center;
      width: 100%;
      font-size: 38px;
      padding: 20px 0;
      font-weight: 550;
  }


  .item>p {
      margin-top: 10px;
      line-height: 1.5;
  }

  .about>p {
      width: 860px;
      margin: auto;
      padding: 5px 55px 60px 55px;
      text-align: center;
      line-height: 1.6;
  }

  .about .wrap .item img {
      width: 150px;
      height: 150px;
      border: 3px solid #ddd;
      border-radius: 50%;
      /* 圓形外框 */
      transition: transform 0.3s, border-color 0.3s;
  }

  .about .wrap .item img:hover {
      transform: scale(1.2);
      border-color: rgb(57, 120, 171);
  }

  .about .wrap .item h3,
  .about .wrap .item p {
      transition: color 0.3s;
  }


  .about .wrap .item:hover h3,
  .about .wrap .item:hover p {
      color: royalblue;
  }


  .pro {
      background-color: rgba(19, 33, 59, 0.921);
  }

  .pro .wrap {
      display: flex;
  }

  .pro .wrap .item {
      width: 50%;
  }

  .pro .item img {
      width: 100%;
  }

  .pro .txt {
      display: flex;
      flex-direction: column;
      padding: 0 20px;
      text-align: center;
      justify-content: center;
  }

  .pro>p {
      line-height: 1.;
  }

  .item h3 {
      font-size: 32px;
      padding: 26px 0px 10px;
      font-weight: bold;
  }


  .pro2 {
      padding: 40px 0;
      background-color: #f2f2f2;
      text-align: center;
  }

  .pro2 .wrap {
      display: flex;
  }

  .pro2 .item {
      margin: 0 10px;
      width: 400px;
      text-align: center;
  }

  .pro2>h2 {
      width: 960px;
      margin: auto;
      text-align: center;
      font-size: 38px;
      padding: 20px 0;
      font-weight: bold;
  }

  .pro2 .item h3 {
      font-size: 26px;
  }

  .pro2>p {
      width: 960px;
      margin: auto;
      text-align: center;
      padding: 5px 55px 60px 55px;
      line-height: 1.6;
  }

  .pro2 a {
      text-decoration: none;
      font-weight: bold;
  }


  .pro2 .wrap .item {
      margin: 15px;
      padding: 20px;
      background: white;
      /* 增加對比 */
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
      /* 添加陰影 */
      border-radius: 5px;
      /* 輕微圓角 */
      width: calc(33.333% - 30px);
      /* 三欄排列 */
  }

  .pro2 .wrap .item img {
      width: 100%;
      /* 圖片寬度自適應 */
      height: auto;
      /* 圖片高度自適應 */
      margin-bottom: 15px;
      border-radius: 5px;
      /* 圖片輕微圓角 */
  }

  .pro2 .wrap .item h3 {
      margin-bottom: 10px;
      color: #333;
      transition: color 0.3s;
  }

  .pro2 .wrap .item:hover img {
      transform: scale(1.05);
      /* 圖片縮放效果 */
      box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
      /* 懸浮時陰影加深 */
  }

  .pro2 .wrap .item:hover h3,
  .pro2 .wrap .item:hover p {
      color: royalblue;
      /* 滑鼠懸浮時文字顏色變化 */
  }

  .pro2 .wrap .item p {
      font-size: 14px;
      color: #666;
      transition: color 0.3s;
  }


  .sidenav {
      height: calc(96.5% - 60px);
      width: 0;
      position: fixed;
      z-index: 1;
      top: 60px;
      right: 0;
      background-color: rgb(37, 89, 152);
      overflow-x: hidden;
      transition: 0.5s;
      border-radius: 10px 10px 10px 10px;
      padding: 15px 0px 15px 0px;

  }

  .sidenav a {
      padding: 15px 0px 15px 0px;
      text-decoration: none;
      font-size: 16px;
      color: #ffffff;
      display: block;
      transition: 0.3s;
      text-align: center;
  }

  .sidenav a:hover {
      color: #1f2c56;
  }

  .sidenav ul {
      list-style-type: none;
      /* 移除列表前面的點 */
      padding: 10px 20px 10px 30px;
      /* 子選單向內縮進 */
      background-color: rgb(120, 141, 165);
      border-radius: 5px 5px 5px 5px;
  }

  .sidenav ul li a {
      display: block;
      color: #000000;
      /* 子選單項目的顏色 */
      padding: 8px 15px;
      /* 子選單項目的間距和填充 */
      text-decoration: none;
      /* 移除超連結下劃線 */
      font-size: 14px;
  }

  .sidenav ul li a:hover {
      color: #e4e4e4;
  }

  .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: rgb(30, 72, 124);
      color: aliceblue;
      padding: 5px 0;
  }

  .footer-info {
      display: flex;
      flex-direction: row;
      /* 水平排列 */
      align-items: center;
      flex-wrap: wrap;
      margin-left: 25px;
  }

  .footer-info p {
      margin-right: 5px;
      /* 調整間距 */
  }

  .footer-info p::after {
      content: "/";
      padding: 0 10px;
  }

  .footer-info p:last-child::after {
      content: none;
  }

  .footer_logo {
      margin-right: 20px;
      margin-top: 5px;
  }

  .flex-container {
      display: flex;
      align-items: start;
      justify-content: space-between;
  }

  .image-container {
      flex: 1;
      padding-left: 0px;
      transform: scale(0.7);
      /* 將圖片縮小到原始尺寸的50% */

  }

  #main-content {
      flex: 3;
      min-width: 600px;
  }

  .responsive-iframe-container {
    position: relative;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 的寬高比 */
    width: 100%;
  }
  
  .responsive-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }