*

/* 全局樣式:統一所有元素的邊距與框模型 */
* {
  margin: 0;
  /* 移除所有元素的預設外邊距，統一布局起點 */
  padding: 0;
  /* 移除所有元素的預設內邊距，確保容器寬度計算一致 */
  box-sizing: border-box;
  /* 設置 box 模型為 border-box，使寬度和高度包含內邊距與邊框 */
}

.fa-bars {
  font-size: 36px;
  color: rgb(237, 10, 10);
}

/* 針對首頁導航欄：設定標題區、Logo、及選單樣式 */
header {
  background: linear-gradient(90deg, rgba(0, 212, 255, 1)0%, rgba(9, 9, 121, 1) 35%, rgba(2, 0, 36, 1) 100%);
  opacity: 0.9;
  color: white;
  font-weight: 600;
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: visible;
  /* 確保不會裁剪子元素 */
  position: relative;
  z-index: 2;
}

nav.navbar ul {

  list-style: none;
  margin: 0 20px 0 0;
  padding: 0;
}

nav.navbar li {
  margin: 0 15px;
}

nav.navbar a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  padding: 10px 10px;
  transition: all 0.3s ease;
  /* 讓所有變化更平滑 */
}

nav.navbar a:hover {
  background-color: #e01055;
  border-radius: 5px;

  color: #fff;
  /* 懸停時文字顏色 */
}

nav.navbar a:active {
  color: yellow;
  transform: scale(0.95);
  /* 增加按下時的縮放效果 */
}

.has-dropdown {
  position: relative;
  z-index: 2;
  /* 避免被背景遮擋 */
}

/* Dropdown 樣式 */
.dropdown {
  display: none;
  position: absolute;
  /* 使用 absolute，避免影響其他元素 */
  top: 100%;
  /* 下拉選單從父元素的下方開始 */
  text-align: center;
  left: 0;
  margin-top: 5px;
  border-radius: 5px;
  padding: 0;
  list-style: none;
  /*min-width: 150px; 確保選單不會太窄 */
  /*box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);  增加陰影效果 */
  z-index: 3;
  /* 保證選單在最上層 */
}

.dropdown li {
  /* 調整選項內的邊距 */
  margin: 5px 0;
  /* 控制選項間的距離 */
  font-size: 18px;
  line-height: 1;
  /* 控制選項的行高 */
}

.dropdown li a {
  color: white;
  text-decoration: none;
  display: block;
}

.dropdown li:hover {
  background-color: #00d37e;
  /* 滑過效果 */
  border-radius: 5px;
  width: 100%;
}

/* 選單項目的樣式 */


/* 滑過父元素時顯示下拉選單 */
.has-dropdown:hover .dropdown {
  display: block;
}

nav ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

.li_1::before {
  content: "cloud";
  /* Material Icons 名稱 */
  font-family: 'Material Icons';
  margin-right: 8px;
  display: inline-block;
  vertical-align: middle;
  color: yellow;
}

.nav li {
  margin: 0 20px;
  font-size: 16px;
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  justify-content: center;
  align-items: center;
}

/*.navigation a {
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  font-size: 18px;
}

.navigation a:hover {
  background-color: #e01055;
  border-radius: 5px;
  transition: background-color 0.3s;
}*/
.here-image {
  position: relative;
  /* 確保背景圖能與其他元素區分 */
  background: url("sunmoonlakehotel.jpg") center;
  background-size: 100% 100%;

  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  clip-path: inset(0 0 10% 0);
  /* 裁剪掉底部10% */
  z-index: 1;
  /* 設為較低的層級 */
}

.here-text {
  display: flex;
  flex-direction: column;
  /* 垂直排列 */
  align-items: center;
  /* 水平置中 */
  justify-content: center;
  /* 垂直置中 */
  position: absolute;
  top: 40%;
  left: 52%;
  transform: translate(-50%, -50%);
  /* 完全置中 */
  text-align: center;
  width: 80%;
  /* 確保文字區塊有固定比例 */
  max-width: 600px;
  /* 避免區塊過大 */
  color: white;

}

.here-text h1 {
  font-size: 48px;
  margin-bottom: 20px;
  /* h1 和 h2 間的間距 */
}

.here-text h2 {
  font-size: 24px;
  margin: 0;
  color: white;
  margin-bottom: 20px;
}

.here-text button {
  border: none;
  border-radius: 10%;
  margin: 20px;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  font-size: 16px;
  font-weight: 600;
  color: rgb(251, 252, 252);
  background-color: #069ce8;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #e01055;
}

.hero {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(12, 3, 51, 0.3), rgba(12, 3, 51, 0.3));
  position: relative;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 30px;
}

.back-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.content {
  text-align: center;
}

.content h1 {
  font-size: 160px;
  color: #fff;
  font-weight: 600;
  transition: 0.5s;
  margin-top: 50px;
  margin-bottom: 10px;
}

.content h1:hover {
  -webkit-text-stroke: 2px white;
  color: transparent;
}

.content h3 {
  font-size: 26px;
  color: #fff;
  font-weight: 600;
  transition: 0.5s;
}

.content a {
  text-decoration: none;
  display: inline-block;
  color: #fff;
  font-size: 24px;
  border: 2px solid white;
  padding: 14px 50px;
  margin: 10px;
  transition: 0.5s;
}

.content a:hover {
  background: #fff;
  color: #000;
}


.audio {
  margin: 20px
}

@media (min-aspect-ratio: 16/9) {
  .back-video {
    width: 100%;
    height: auto;
    object-fit: cover;
    /* 保持影片比例 */
  }
}

@media (max-aspect-ratio: 16/9) {
  .back-video {
    width: auto;
    height: 100%;
    object-fit: cover;
  }
}


body {
  font-family: Arial, sans-serif;
  /* 設定網頁的全局字體為 Arial，若不支持則使用 sans-serif */
  background-color: #13747a;
  /* 背景色設為深藍綠色，營造簡潔的視覺效果 */

}

/* 頁面主標題樣式 */
h1 {
  font-size: 24px;
  /* 主標題字體大小 */
  text-align: center;
  /* 標題置中 */
  margin-bottom: 20px;
  /* 與下方元素保持 20px 間距 */
}

/* 次標題樣式 */
h2 {
  font-size: 20px;
  /* 次標題字體大小 */
  text-align: center;
  /* 次標題置中 */
  margin-bottom: 20px;
  /* 與下方元素保持 20px 間距 */
}

/* 段落文字樣式 */
p {
  font-size: 16px;
  /* 段落落字體大小 */
}

/* 縮排樣式 */
.indent {
  padding-left: 20px;
  /* 左縮排 20px */
}

/* 橫幅樣式 */
.banner {
  background-image: url('Dalle_flexbox.jpg');
  /* 設置背景圖片 */
  background-color: #f3f3f3;
  /* 若圖片未加載則顯示淺灰色背景 */
  background-size: cover;
  /* 背景圖片完全覆蓋容器 */
  background-position: center;
  /* 圖片居中顯示 */
  height: 300px;
  /* 橫幅高度，可根據需要調整 */
  display: flex;
  /* 使用 Flexbox 排版 */
  align-items: center;
  /* 垂直居中對齊內容 */
  justify-content: center;
  /* 水平居中對齊內容 */
  color: #fb061f;
  /* 文字顏色紅色，與背景形成對比 */
  text-align: center;
  /* 文字居中對齊 */
  padding: 20px;
  /* 內部內容與邊框保持 20px 間距 */
}

/* 橫幅內部內容樣式 */
.banner-content h1 {
  font-size: 36px;
  /* 橫幅主標題字體大小 */
  margin-bottom: 10px;
  /* 與下方按鈕保持 10px 間距 */
}

.banner-content .btn {
  display: inline-block;
  /* 使按鈕成為塊級元素但不換行 */
  background-color: #007BFF;
  /* 按鈕背景顏色 */
  color: #fff;
  /* 按鈕文字顏色 */
  padding: 10px 20px;
  /* 內邊距，上下 10px，左右 20px */
  border-radius: 5px;
  /* 圓角按鈕 */
  text-decoration: none;
  /* 移除文字下劃線 */
  font-size: 16px;
  /* 按鈕文字大小 */
  transition: background-color 0.3s;
  /* 背景顏色過渡效果 */
}

/* 按鈕的滑鼠懸停效果 */
.banner-content .btn:hover {
  background-color: #0056b3;
  /* 滑鼠懸停時的顏色 */
}

/* Flex 父容器 */
.flex-container {
  display: flex;
  /* 啟用 Flexbox 排列 */
  flex-wrap: wrap;
  /* 允許子容器換行排列 */
  justify-content: space-evenly;
  /* 子容器在水平方向均勻分布 */
  align-items: center;
  /* 子容器垂直置中 */
  padding: 20px;
  /* 容器內部間距 */
  background-color: #e0e0e0;
  /* 背景色 */
  border-radius: 10px;
  /* 圓角 */
  min-height: 300px;
  /* 最小高度 */
  border: 2px solid #ccc;
  /* 容器邊框為淺灰色，實邊，寬度2px */
  gap: 20px;
  /* 子容器之間的間距為 20px */
}

/* Flex 子容器（方塊） */
.box {
  display: flex;
  /* 子容器內也可以使用 Flexbox */
  flex-direction: column;
  /* 文字垂直置中 */
  width: 400px;
  /* 方塊寬度 */
  height: 500px;
  /* 方塊高度 */
  background-color: dodgerblue;
  /* 方塊背景色 */
  color: white;
  /* 文字顏色 */
  font-size: 16px;
  /* 字體大小*/
  font-weight: bold;
  /* 字體加粗 */
  line-height: 1.4;
  /* 行距比例例 */
  border-radius: 5px;
  /* 圓角邊框*/
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* 方塊陰影 */
  transition: transform 0.3s, background-color 0.3s;
  /* 滑鼠懸停過渡效果 */
  overflow: auto;
  /* 啟用滾動條，防止內容溢出時無法顯示 */
  padding: 20px;
  /* 內邊距，避免文字緊貼邊框 */
  text-align: left;
  /* 文字靠左對齊 */
  margin: 20px 0;
  /* 上下外邊距為 20px */
}

/* 特殊樣式 - 不同方塊顏色 */
.box.A {
  background-color: #f44336;
  /* 紅色背景 */
  border-radius: 10px;
  /* 圓角 */
  word-wrap: break-word;
  /* 自動換行防止文字溢出 */
  overflow: hidden;
  /* 滾動條防止內容溢出容器 */
}

.box.B {
  background-color: #4caf50;
  /* 綠色 */
}

.box.C {
  background-color: #2196f3;
  /* 藍色 */
}

.box.D {
  background-color: #ff9800;
  /* 橙色 */
}

/* Hover 效果 */
.box:hover {
  transform: scale(1.1);
  /* 鼠標懸停時放大 */
  background-color: #333;
  /* 變成深色 */
}