/* main.css */

/* General Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}


/* 本地字體 */

@font-face {
  font-family: 'MyLocalFont1';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/ALGER.TTF') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyLocalFont2';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/ART.TTF') format('truetype'),
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'MyLocalFont3';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/QwitcherGrypen-Regular.ttf') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyLocalFont3';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/QwitcherGrypen-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'MyLocalFont4';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/LXGWWenKaiTC-Regular.ttf') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyLocalFont4';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/LXGWWenKaiTC-Bold.ttf') format('truetype'),
  font-weight: bold;
  font-style: normal;
}



@font-face {
  font-family: 'MyLocalFont5';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/Chrluen.ttf') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyLocalFont6';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/JOKERMAN.TTF') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'MyLocalFont7';  /* 藝術英文自定義字體名稱 */
  src: url('../fonts/FASCR.TTF') format('truetype'),
  font-weight: normal;
  font-style: normal;
}

/* 背景圖片樣式 */
.background-image {
    background-image: url('../img/backimg.jpg');
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
}

/* 網站名稱字體特效*/
.sitename-text { 
    font-size: 22px;	
    font-weight:bold;             												/* bold粗體  normal字型效果*/
    background: linear-gradient(90deg, #f22afb, #fbcc2a ); /* 漸變字型效果*/
    -webkit-background-clip: text;												/* 漸變字型效果*/
    color: transparent;																		/* 漸變字型效果*/
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  /*陰影字型效果*/
    -webkit-text-stroke: 0px #f5fb2a; 					 /*文字描邊效果*/
    letter-spacing: 2px; 												 /* 每個字符間隔 2px */
    font-family: 'MyLocalFont6',  'MyLocalFont4', 'DFKai-SB', '標楷體', 'LXGW WenKai TC', 'Noto Sans TC', serif;  /* 中文字體優先使用 DFKai-SB */
}

/* 程式標題字體特效*/
.appname-title { 
    font-size: 30px;	
    font-weight:bold;             												/* bold粗體  normal字型效果*/
    background: linear-gradient(270deg, #d856f7, #26a027 ); /* 漸變字型效果*/
    -webkit-background-clip: text;												/* 漸變字型效果*/
    color: transparent;																		/* 漸變字型效果*/
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);  /*陰影字型效果*/
    -webkit-text-stroke: 0px #f5fb2a; 					 /*文字描邊效果*/
    letter-spacing: 2px; 												 /* 每個字符間隔 2px */
    font-family: 'MyLocalFont5',  'DFKai-SB', '標楷體', 'MyLocalFont4', 'LXGW WenKai TC', 'Noto Sans TC', serif;  /* 中文字體優先使用 DFKai-SB */
}



/* 返回頂部按鈕樣式 */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
}


/* 手寫板滑鼠樣式 控制特定圖層 */
#myboard {
   cursor: url('../img/Edit.png') 0 32, help;
}

/* 文章內容專用區塊 引用 與程式碼 */
blockquote {
    margin: 20px;
    padding: 10px;
    font-size: 18px;
    font-family:PMingLiU; /* 新細明體 */
    font-weight:bold; /* 粗體 */
    background-color: #eeeeee;
    border-left: 5px solid #00aae1;
    margin: 5px 0 0 20px;
    padding-left: 20px;
    border-radius: 6px;
    width: 90%;
}

pre {
     background: #000000 url() repeat-y scroll left top;
     border: 1px solid #CCCCCC;
     color: #FFFFFF;
     display: block;
     font-family:Times New Roman; /* Courier New體 */
     font-size: 14pt;
     line-height: 100%;
     margin: 5px 0 0 20px;
     max-height: 200px;
     overflow: auto;
     padding: 10px 10px 10px 21px;
     width: 90%;
} 



/* 筆記截圖用qrcode */
.qrcodetext1{
  display: none;
  position: fixed;
  background-color:#FFFFFF;
  border-width: 1px;
  border-style: solid;
  margin: 1;
  padding: 5px;
  line-height: 25px;
  z-index: 9999;
  height: 300px;
  width: 270px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.qrcodetext2{
  display: none;
  position: fixed;
  background-color:#FFFFFF;
  border-width: 1px;
  border-style: solid;
  margin: 1;
  padding: 5px;
  line-height: 25px;
  top: 100px;
  right: 40%;
  z-index: 600;
  height: 300px;
  width: 270px;
}

/* 網站URL專用圖層用qrcode */
.qrcodeurl {
  display: none;
  position: fixed;
  background-color: #FFFFFF;
  border-width: 1px;
  border-style: solid;
  margin: 1;
  padding: 5px;
  line-height: 25px;
  z-index: 600;
  height: 300px;
  width: 270px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.qrcodeurl1{
  display: none;
  position: fixed;
  background-color:#FFFFFF;
  border-width: 1px;
  border-style: solid;
  margin: 5px;
  padding: 5px; /* 內部元素距離邊緣的間距 */
  line-height: 25px;
  z-index: 500;
  height: 282px;
  width: 258px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 筆記圖片用qrcode */
.qrcodepic{
  display: none;
  position: fixed;
  background-color:#FFFFFF;
  border-width: 1px;
  border-style: solid;
  margin: 5px;
  padding: 5px; /* 內部元素距離邊緣的間距 */
  line-height: 25px;
  z-index: 500;
  height: 282px;
  width: 258px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* div圖層用qrcode */
div.qrcodetext{
  display: none;
  position: absolute;
  background-color:#FFFFFF;
  border-width: 1px;
  border-style: solid;
  margin: 1;
  padding: 5px;
  line-height: 25px;
  top:200px;
  left:400px;
  z-index: 10;

}

/* 調整卡片 header 背景顏色 */
.card-header {
  background-color: #d4edda; /* 淡綠色 */
  display: flex;
  align-items: center; /* 垂直置中 */
  justify-content: space-between; /* 如需兩邊對齊 */
  padding-bottom: 1px; /* 調整下邊距 */
  padding-top: 10px; /* 可選的上邊距調整 */    				          
}

/* 美化卡片 */
.card {
  margin-bottom: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

    /* 限制卡片圖片在超出容器寬度時自動縮放 */
        .card-body img {
            max-width: 100%;  /* 最大寬度為容器寬度 */
            height: auto;     /* 等比例縮放 */
            display: block;   /* 保證圖片不超過容器，並消除 inline 元素的間隙 */
            margin-left: auto; /* 左側自動外邊距 */
            margin-right: auto; /* 右側自動外邊距 */
        }
 
/* 浮動工具列 開始 */
/* 浮動工具列 */
.floating-toolbar {
    position: fixed;
    top: 10px; /* 假設工具列在menu下方 */
    right: 10px;
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 主按鈕樣式 */
.main-button-toolbar {
    width: 40px;
    height: 40px;
    cursor: pointer;
}

/* 隱藏按鈕集合 */
.button-collection {
    display: none;
    flex-direction: column;
    align-items: center;
    margin-top: 17px;
    background-color: #f0f0f0; /* 工具列背景色，可根據需要調整 */
    border-radius: 5px; /* 圓角效果，使工具列更具現代感 */
    padding: 5px 5px; /* 增加內邊距，讓圖標不靠近邊緣 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 添加陰影，讓工具列浮起來 */  
    gap: 5px; /* 設置按鈕之間的間距 */  
            
}


/* 調整工具列圖片的間距 */
.button-collection a {
    display: inline-block;
    margin: 0px; /* 可以根據需要調整數值 */
}

/* 每個按鈕的樣式 */
.button-collection img {
    width: 30px;
    height: 30px;
    margin: 2px 0;
    cursor: pointer;
    vertical-align: middle; /* 對齊 */    
    transition: transform 1s; /* 增加動畫效果 */    
}

/* 滑鼠經過時的浮起效果 */
.button-collection img:hover {
    transform: translateY(-5px); /* 向上浮起5px */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* 增加陰影效果 */
}

/* 點擊按下時的效果 */
.button-collection img:active {
    transform: translateY(2px); /* 向下移動2px，模擬按下的感覺 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 陰影變小，模擬按下去的效果 */
}



/* 隱藏選單專用圖層 */
.info-hiddenDiv {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999; /* 確保在最上層 */
    display: none; /* 預設隱藏 */
    background: rgba(0, 0, 0, 0.7); /* 半透明背景，可依需求調整 */
    padding: 20px;
    border-radius: 10px;
    color: white;
    text-align: left; /* 文字靠左 */
}

.info-hiddenDiv p {
    margin: 0;
    padding-left: 10px; /* 調整縮排 */
}

/* 浮動工具列 開始結束 */


/* 固定頂部導航欄樣式 */
.navbar {
    background-color: rgba(188, 213, 255, 0.6);  /* 0.8 透明度 #bcebff淡天空藍色 */
    z-index: 450;
    font-size: 18px;
		font-family: '新細明體','DFKai-SB', '標楷體', 'MyLocalFont4', 'LXGW WenKai TC', 'Noto Sans TC', serif;  /* 中文字體優先使用 DFKai-SB */    
}

.navbar .nav-link {
    color: black;
    transition: color 0.3s ease;
}

.navbar .nav-link:focus, .navbar .nav-link:active {
    color: red; /* 點擊時字體變為紅色 */
}

.navbar .icon-color {
    color: #03142e; /* bootstrap icon 自定義原本色彩 */
    cursor: pointer;
    transition: color 0.3s ease;    
}

.navbar .icon-hover:hover {
    color: #007bff; /* bootstrap icon 滑鼠懸停時變為藍色 */
}

/* 固定頂部大型選單導航欄樣式 */
.nav-item.dropdown-large {
  position: static !important;
}

/* 控制大型選單的顯示 */
.nav-item.dropdown-large .dropdown-menu-large {
    display: none; /* 預設隱藏 */
    position: absolute;
    top: 100%; /* 位置在按鈕下方 */
    left: 150px;
    width: 55%; /* 選單寬度 */
    z-index: 400; /* 確保選單在上層 */
    padding: 1rem; /* 內邊距 */
    background-color: rgba(255, 255, 255, 1); /* 背景色為白色，透明度90% */
    border: 1px solid rgba(0, 0, 0, 0.15); /* 邊框 */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.9); /* 投影效果 */
    border-radius: 0.5rem; /* 圓角效果 */
    transition: all 0.3s ease; /* 平滑過渡效果 */
}

/* 調整每一行之間的間隔 */
.nav-item.dropdown-menu-large ul {
    padding-left: 0; /* 去除內部的預設縮排 */
    margin: 0; /* 去除外部間距 */
    list-style: none; /* 去除項目符號 */
}

.nav-item.dropdown-menu-large ul > li {
    margin-bottom:100rem; /* 調整每一行之間的間距 */
}

/* 調整每個項目之間的間隔 */
.nav-item.dropdown-menu-large li {
    margin-bottom: 10px; /* 調整每一行之間的間距 */
}

/* 或者調整內部間距 */
.nav-item.dropdown-menu-large li {
    padding-bottom: 1rem; /* 調整每一行之間的內部間距 */
}

/* 確保選單項目不會擁擠在一起 */
.nav-item .dropdown-menu-large .row {
    margin-bottom: 1rem; /* 調整行之間的外部間距 */
}

.nav-item .dropdown-menu-large > li > ul {
  padding: 0;
  margin: 0;
}
.nav-item .dropdown-menu-large > li > ul > li {
  list-style: none;
  margin-bottom: 0.5rem; /* 調整每個項目之間的間距 */
}
.nav-item .dropdown-menu-large > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: normal;
}
.nav-item .dropdown-menu-large > li ul > li > a:hover,
.nav-item .dropdown-menu-large > li ul > li > a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.nav-item .dropdown-menu-large .disabled > a,
.nav-item .dropdown-menu-large .disabled > a:hover,
.nav-item .dropdown-menu-large .disabled > a:focus {
  color: #999999;
}
.nav-item .dropdown-menu-large .disabled > a:hover,
.nav-item .dropdown-menu-large .disabled > a:focus {
  text-decoration: none;
  background-color: transparent;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  cursor: not-allowed;
}
.nav-item .dropdown-menu-large .dropdown-header {
  color: #428bca;
  font-size: 18px;
}


/* 通用 iframe 控制 */
.iframe-wrapper {
    display: flex;
    justify-content: center; /* 水平置中 */
    align-items: center;     /* 垂直置中 */
    height: 100vh;           /* 使父元素高度佔滿整個視窗 */
}

.iframe-container {
    position: relative;
    width: 80%;              /* 通用寬度設置為 80% */
    padding-bottom: 80%;  /* 56.25%16:9 的比例 */
    overflow: hidden;
}

    .iframe-container .responsive-iframe {
        width: 100%;
        height: 80%;          /* YouTube iframe 高度佔 80% */
        border: none;
    }  
       
}

/* 平板畫面控制 */
@media (min-width: 450px) and (max-width: 768px) {
    .iframe-container {
        width: 80%;           /* 平板寬度 80% */
        height: 100%;          /* 高度佔螢幕 100% */
        padding-bottom: 80%;  /* 56.25%16:9 的比例 */        
    }



    .iframe-container .responsive-iframe {
        width: 100%;
        height: 100%;          /* YouTube iframe 高度佔 80% */
        border: none;
    }    

}

/* 手機畫面控制 */
@media (max-width: 450px) {
    .iframe-container {
        width: 100%;          /* 手機寬度佔滿 100% */
        height: auto;         /* 高度自動調整，保持比例 */
        padding-bottom: 80%;  /* 56.25%16:9 的比例 */         
    }
    
    .iframe-container .responsive-iframe {
        width: 100%;
        padding-bottom: 56.25%;  /* 56.25%16:9 的比例 */         
        border: none;
    }  
          
}


/* 浮動工具列自適應樣式 */
@media (max-width: 991px) {
    .floating-toolbar {
    top: 70px; /* 假設工具列在menu下方 */
    right: 10px;
    }
    .main-button, .button-collection img {
        width: 30px;
        height: 30px;
    }
}


/* 響應式設計，針對小螢幕設備 */
@media (min-width: 450px) and (max-width:768px) {
    .floating-toolbar {
    display: none; /* 隱藏工具列 */
    }
    .main-button, .button-collection img {
        width: 30px;
        height: 30px;
    }
}


/* 浮動工具列自適應樣式 */
@media (max-width: 450px) {
    .floating-toolbar {
        display: none; /* 隱藏工具列 */
    }
    .main-button, .button-collection img {
        width: 30px;
        height: 30px;
    }
}

/* 浮動工具列自適應樣式結束 */



/* 響應式設計，針對小螢幕設備  的nav*/
@media (max-width: 768px) {
.nav-item  .dropdown-menu-large {
    margin-left: 0 ;
    margin-right: 0 ;
  }
.nav-item  .dropdown-menu-large > li {
    margin-bottom: 30px;
  }
.nav-item  .dropdown-menu-large > li:last-child {
    margin-bottom: 0;
  }
.nav-item  .dropdown-menu-large .dropdown-header {
    padding: 3px 15px !important;
  }
}



/* 響應式設計，針對小螢幕設備 */
@media (min-width: 450px) and (max-width: 768px) {
  .dropdown-menu-large {
    display: none; /* 預設隱藏 */  	
    margin-left: 0;
    margin-right: 0;
    width: 100%; /* 小螢幕時選單全寬顯示 */
    max-height: 300px; /* 設定高度較小時可滾動 */
    overflow-y: auto; /* 小螢幕時啟用垂直滾動 */
    max-width: none; /* 移除最大寬度限制 */
    padding: 10px 0; /* 減少內邊距 */
  }

  .dropdown-menu-large > li {
    margin-bottom: 20px; /* 調整列間距 */
  }

}

/* 響應式設計，針對手機設備 */
@media (max-width: 450px) {
.nav-item.dropdown-large .dropdown-menu-large {
    display: none; /* 預設隱藏 */
    position: absolute; /* 確保能控制位置 */
    left: 0; /* 靠左對齊 */
    margin: 0; /* 移除邊距 */
    width: 100vw; /* 設定為螢幕寬度 */
    max-height: 300px; /* 設定高度較小時可滾動 */
    overflow-y: auto; /* 啟用垂直滾動 */
    padding: 10px 0; /* 減少內邊距 */
    box-sizing: border-box; /* 確保填充和邊框在寬度內 */
  }

  .nav-item .dropdown-menu-large > li {
    margin-bottom: 20px; /* 調整列間距 */
  }

  .nav-item .dropdown-menu-large > li:last-child {
    margin-bottom: 0;
  }

  .nav-item .dropdown-menu-large .dropdown-header {
    padding: 3px 15px !important;
  }
}




/* 子子菜單在桌面設備上向左彈出並對齊父項 */
@media (min-width: 992px) {
    .dropdown-submenu:hover .dropdown-menu {
        display: block;
        left: auto;  /* 取消默認的左邊距  left: -100%;向左彈出 */
        right: 100%; /* 向左彈出時相對於父菜單的右邊 */         
        top: 0;   /* 子菜單與父菜單項垂直對齊 */
        background-color: rgba(188, 235, 255, 0.8); /* 子子菜單背景色 */
    }
    
    /* 使父項 dropdown-item 和子項 dropdown-menu 垂直對齊 */
    .dropdown-submenu {
        position: relative;
    }

    .dropdown-submenu .dropdown-menu {
        position: absolute;
        top: 0; /* 確保子菜單與父菜單項對齊 */
    }    
}

/* 子子菜單在平板或手機上往下彈出 */
/* 平板樣式 (450px 至 991px) */
@media (min-width: 450px) and (max-width: 991px) {
    .dropdown-submenu .dropdown-menu {
        display: none;
        background-color: rgba(188, 235, 255, 0.9); /* 子子菜單背景色 */
    }
    .dropdown-submenu:focus .dropdown-menu,
    .dropdown-submenu:active .dropdown-menu,
    .dropdown-submenu .dropdown-menu.show {
        display: block;
        left: 100%; /* 保持向右彈出 */
        top: 0;
    }
    
    .navbar {
    background-color: rgba(12, 161, 247, 0.8);  /* 0.6 透明度 #bcebff淡天空藍色 */
    z-index: 450;
    }
    
    /* 讓超過螢幕寬度的導航欄能夠水平滾動 */
    .navbar-nav {
        display: flex;
        flex-wrap: nowrap;  /* 禁止導航項目換行 */
        overflow-x: auto;   /* 當內容超出寬度時，顯示水平滾動條 */
        overflow-y: auto; /* 禁止垂直滾動 */
    }
    
}

/* 手機樣式 (小於300px) */

@media (max-width: 450px)  {
    .dropdown-submenu .dropdown-menu {
        display: none;
        background-color: rgba(188, 235, 255, 0.9); /* 子子菜單背景色 */
    }
    /*.dropdown-submenu:focus .dropdown-menu,
    .dropdown-submenu:active .dropdown-menu { */
 		.dropdown-submenu .dropdown-menu.show {   
        display: block;
        left: 100%; /* 保持向右彈出 */
        top: 0;
    }
    
    .navbar {
    background-color: rgba(50, 107, 168, 1);  /* 0.8 透明度 #bcebff淡天空藍色 */
    z-index: 450;
    }
    
    /* 讓超過螢幕寬度的導航欄能夠水平滾動 */
    .navbar-nav {
        display: flex;
        flex-wrap: nowrap;  /* 禁止導航項目換行 */
        overflow-x: auto;   /* 當內容超出寬度時，顯示水平滾動條 */
        overflow-y: auto; /* 禁止垂直滾動 */
    }
    
}

/* 子菜單樣式 */
.dropdown-menu {
    background-color: rgba(188, 235, 255, 0.8); /* 使用 rgba() 設置背景顏色和透明度為80% */
    border: none; /* 可選：移除邊框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 可選：添加陰影效果 */
}



/* Section "home" 樣式 */
.section-home {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.section-home .left,
.section-home .right {
    flex: 1;
    min-width: 50%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;    /*內容居中顯示*/
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Section "news" 樣式 */
.section-news {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.section-news .left,
.section-news .right {
    flex: 1;
    min-width: 50%;
    padding: 20px;
    box-sizing: border-box;
}



/* Section "intro" 樣式 */
.section-intro {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.section-intro .left,
.section-intro .center,
.section-intro .right {
    flex: 1;
    min-width: 33.33%;
    padding: 20px;
    box-sizing: border-box;
}


/* Section "media" 樣式 */
.section-media {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.section-media .part1,
.section-media .part2,
.section-media .part3,
.section-media .part4 {
    flex: 1;
    min-width: 25%;
    padding: 20px;
    box-sizing: border-box;
}



/* 手機設備上的響應式樣式 */
@media (max-width: 767px) {
    /* Section "home" 在手機上的樣式 */
    .section-home .left {
        order: 2; /* 右半部分變成上半部分 */
        min-width: 100%;
    }
    .section-home .right {
        order: 1; /* 左半部分變成下半部分 */
        min-width: 100%;
    }


    /* Section "news" 在手機上的樣式 */
    .section-news .left,
    .section-news .right {
        min-width: 100%;
    }


    /* Section "intro" 在手機上的樣式 */
    .section-intro .left,
    .section-intro .right {
        min-width: 100%; /* 左右部分佔據整個寬度 */
    }

    .section-intro .center {
        min-width: 100%; /* 中間部分佔據整個寬度 */
    }
    
    /* Section "intro" 在手機上的樣式 */
    .section-intro .left,
    .section-intro .right {
        min-width: 100%;
    }

    /* Section "media" 在手機上的樣式 */
    .section-media .part1,
    .section-media .part2,
    .section-media .part3,
    .section-media .part4 {
        min-width: 100%;
    }
}