/* main.css */

/* General Styles */
body {
 	 font-family: "PMingLiU", "MingLiU", "DFKai-SB", "Microsoft JhengHei", "PingFang TC", "Heiti TC", "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: 24px;	
    font-weight:bold;             												/* bold粗體  normal字型效果*/
    background: linear-gradient(270deg,var(--sitename-primary-color), var(--sitename-secondary-color)); /* 漸變字型效果*/
    -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: 'MyLocalFont1',  'MyLocalFont4', 'DFKai-SB', '標楷體', 'LXGW WenKai TC', 'Noto Sans TC', serif;  /* 中文字體優先使用 DFKai-SB */
}

/* 程式標題字體特效*/
.appname-title { 
    font-size: 26px;	
    font-weight:normal;             												/* bold粗體  normal字型效果*/
    background: linear-gradient(270deg,var(--appname-primary-color), var(--appname-secondary-color)); /* 漸變字型效果*/
    -webkit-background-clip: text;												/* 漸變字型效果*/
    color: transparent;																		/* 漸變字型效果*/
    text-shadow: 2px 2px 2px 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 */
}


/* 內容標題字體特效*/
.content-title { 
    /*font-size: 26px;*/	
    font-weight:normal;             												/* bold粗體  normal字型效果*/
    background: linear-gradient(180deg,var(--content-primary-color), var(--content-secondary-color)); /* 漸變字型效果*/
    -webkit-background-clip: text;												/* 漸變字型效果*/
    color: transparent;																		/* 漸變字型效果*/
    text-shadow: 2px 2px 2px 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: 600;
  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: var(--card-header-color); /* 淡綠色 */
  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);
}


/*Panel色彩*/

/* Label 樣式的 Panel 標題，標籤紙風格 */
.panel-heading.label-style {
    background-color: #f5f5f5;
    color: #003f39;
    border-color: #e0e0e0;
    border-left: 8px solid transparent;  /* 左側彩色邊條寬度 */
    cursor: pointer;
}

/* 左側彩色邊條（沿用 custom-tab 的配色） */
.panel-heading.label-style.label-color-1 { border-left-color: #1976d2; }
.panel-heading.label-style.label-color-2 { border-left-color: #90d1f9; }
.panel-heading.label-style.label-color-3 { border-left-color: #43a047; }
.panel-heading.label-style.label-color-4 { border-left-color: #fbc02d; }
.panel-heading.label-style.label-color-5 { border-left-color: #e53935; }
.panel-heading.label-style.label-color-6 { border-left-color: #8e24aa; }

/* 調整 label 樣式下右側開合圖示的外觀 */
.panel-heading.label-style .clickable {
    background-color: transparent;
    color: #666;
    border-radius: 0;
    padding: 0;
    width: auto;
    height: auto;
    margin-left: 8px;
    box-shadow: none;
}

.panel-heading.label-style .clickable:hover {
    background-color: transparent;
    color: #333;
}
 
/* 浮動工具列 開始 */
/* 浮動工具列 */
.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: 80px; /* 假設工具列在menu下方 */
    left: 10px;
    z-index: 450;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 浮動工具列 結束 */


/* 課程隱藏選單專用圖層 */
.coursechoicediv {
    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; /* 文字靠左 */
}

.coursechoicediv 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 滑鼠懸停時變為藍色 */
}

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



/* iframe 自適應控制 */

    /* === 通用設定 === */
    .iframe-container {
      position: relative;
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
      z-index: 100;
    }
    
    .responsive-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    
    /* === 桌機 (一般顯示) === */
    @media (min-width: 1025px) {
      .iframe-container {
        height: 82vh;
        max-height: 82vh;
      }
    }
    
    /* === 手機直立 (小於 450px) === */
    @media (max-width: 450px) and (orientation: portrait) {
      .iframe-container {
        width: 100%;
        padding-top: 56.25%; /* 16:9 比例 */
        height: 0;
      }
    }
    
    /* === 手機橫向 === */
    @media (max-width: 450px) and (orientation: landscape) {
      .iframe-container {
        width: 100%;
        height: 80vh; /* 預留選單 */
      }
    }
    
    /* === iPad 或中型平板：直立 === */
    @media (min-width: 451px) and (max-width: 1024px) and (orientation: portrait) {
      .iframe-container {
        width: 100%;
        padding-top: 56.25%; /* 16:9 */
        height: 0;
      }
    }
    
    /* === iPad 或中型平板：橫向 === */
    @media (min-width: 451px) and (max-width: 1024px) and (orientation: landscape) {
      .iframe-container {
        width: 100%;
        height: 75vh;
      }
    }



/* iframe 自適應結束 */



/* 浮動工具列自適應樣式 */
	@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;
		}
	}

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



/* 選單自適應開始 */

	/* 子子菜單在桌面設備上向左彈出並對齊父項 */
	@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) {
	
		.navbar {
		background-color: var(--navbar-background-color); /* rgba(13, 169, 248, 0.8);   手機選單背景色 0.6 透明度 #bcebff淡天空藍色 */
		z-index: 450;
		}
		
		/* 讓超過螢幕寬度的導航欄能夠水平滾動 */
		.navbar-nav {
			display: flex;
			flex-wrap: nowrap;  /* 禁止導航項目換行 */
			overflow-x: auto;   /* 當內容超出寬度時，顯示水平滾動條 */
			overflow-y: auto; /* 禁止垂直滾動 */
		}

    /* 🔵 移除 iOS 點擊後藍色背景 */
    .navbar .nav-link:focus,
    .navbar .nav-link:active,
    .navbar .dropdown-toggle.show {
      background-color: transparent !important;
      box-shadow: none !important;
      outline: none !important;
    }

  	/* 🔵 移除 Safari 點擊陰影 */
  	.navbar .nav-link {
    	-webkit-tap-highlight-color: transparent;
  	}

    /* 子菜單樣式 */
    .nav-item  .dropdown-menu {
        background-color: var(--menu-background-color);   
    }

		.dropdown-submenu .dropdown-menu {
			display: none;
			background-color: var(--submenu-background-color); /*rgba(150, 207, 220, 0.9);  子子菜單背景色 */
		}
		.dropdown-submenu:focus .dropdown-menu,
		.dropdown-submenu:active .dropdown-menu,
		.dropdown-submenu .dropdown-menu.show {
			display: block;
			left: 100%; /* 保持向右彈出 */
			top: 0;
		}		



	}

	/* 手機樣式 (小於450px) */
	@media (max-width: 450px)  {
		
		.navbar {
			background-color:var(--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; /* 禁止垂直滾動 */
		}

    /* 移除 iOS 點擊後藍色背景 */
    .navbar .nav-link:focus,
    .navbar .nav-link:active,
    .navbar .dropdown-toggle.show {
      background-color: transparent !important;
      box-shadow: none !important;
      outline: none !important;
    }

  	/* 🔵 移除 Safari 點擊陰影 */
  	.navbar .nav-link {
    	-webkit-tap-highlight-color: transparent;
  	}


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


		.dropdown-submenu .dropdown-menu {
			display: none;
			background-color: var(--submenu-background-color);  /*rgba(150, 207, 220, 0.9); 子子菜單背景色 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;
		}

	  /* 網站名稱字體特效*/
	  .sitename-text { 
		  font-size: 22px;	
		  font-weight:bold;             												/* bold粗體  normal字型效果*/
		  background: linear-gradient(270deg,var(--sitename-primary-color), var(--sitename-secondary-color)); /* 漸變字型效果*/
		  -webkit-background-clip: text;												/* 漸變字型效果*/
		  color: transparent;																		/* 漸變字型效果*/
		  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);  /*陰影字型效果*/
		  -webkit-text-stroke: 0px #f5fb2a; 					 /*文字描邊效果*/
		  letter-spacing: 2px; 												 /* 每個字符間隔 2px */
		  font-family: 'MyLocalFont1',  'MyLocalFont4', 'DFKai-SB', '標楷體', 'LXGW WenKai TC', 'Noto Sans TC', serif;  /* 中文字體優先使用 DFKai-SB */
	  }
	  
	  .appname-title {
		display: none; /* 預設隱藏 */
	  }
	  
		
	}

/* 選單自適應結束 */





/* 大選單選單樣式  目前沒用到*/
/* 固定頂部大型選單導航欄樣式 */
.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;
}

/* 大選單選單樣式結束 */

/* 大選單選單自適應樣式 */

	/* 響應式設計，針對小螢幕設備的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;
	  }
		
	}


/* 大選單選單自適應樣式結束 */



/* 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%;
    }
}