/* 固定在 iframe 的頂端 */
.sticky-box {
  background-color: #ffffff;                    /* {建議加上背景色，避免捲動時與後方文字重疊} */
  border: 2px solid blue;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);     /* {選填：加點陰影增加分辨度} */
  box-sizing: border-box;
  left: 0;
  padding: 5px 10px;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 222;                                   /* {確保顯示在最上層} */
}

/* {讓 .sticky-box 內的所有文字元素（如 p, button）都變成粗體字} */
.sticky-box * {color: blue; font-weight: bold; font-size: 16px;}

.row-sticky {
  display: flex;
  align-items: center;                            /* {垂直置中對齊} */
  justify-content: space-between;                 /* {兩端對齊，或用 margin-left: auto 擠到右邊} */
}

/* {每個橫行的元素都有固定寬度，且前後接續} */
.row-sticky p {
  margin: 0;                                      /* {清除瀏覽器預設的 p 標籤間距} */
  overflow: hidden;
  text-overflow: ellipsis;                        /* {文字過長時顯示省略號} */
  white-space: nowrap;                            /* {避免文字因寬度不足而自動斷行} */
}

.titleManual { margin: 0; }                       /* {消除段落預設上下外距，避免跑版} */

/* .input-btn 單獨靠右，距右邊界 10px */
.input-btn {
  margin-left: auto;                              /* {關鍵：在 Flex 佈局中，這會將元素推到最右側} */
  margin-right: 10px;                             /* {距離右邊界 10px} */
}
/* <End> {第一個文字框：固定在頂部} */

/* 讓外層容器轉為 Flex 佈局 */
.dspTopic {
  background-color: #ffffff;
  padding: 5px;
  border: 2px solid green;
  margin-bottom: 5px;
  margin-top: 5px;
}

.dspTopic h4 {
  color: brown;
  margin-top: 5px;
  margin-bottom: 10px;
}

.dspTopic p {
  margin: 5px 0;              /* {段落上下的間距，可自行調整} */
  padding-left: 1.5em;        /* {整體向右縮排，留出括號的空間 } */
  text-indent: -1.4em;        /* {第一行向左凸回 2.2em，使括號對齊邊緣} */
}

#mainManual {
  display: flex;                                  /* {讓圖片和文字 div 保持在同一行} */
  align-items: flex-start;                        /* {讓圖片和文字從頂端對齊(可依需求改為 center 居中)} */
  gap: 10px;                                      /* {設定圖片與文字之間的間隔為 10px} */
}

.img-container {
  display: flex;                                  /* {啟用彈性佈局，子元素自動排成一行} */
  gap: 10px;                                      /* {設定圖片之間的間距(可依需求調整)} */
  align-items: center;                            /* {如果圖片高度不同，這可以讓它們垂直居中對齊} */
}

.imgMain {
  border: 1px solid blue;
  height:650px; 
  width: 900px;
}

.img1 {
  border: 1px solid blue;
  height:300px; 
  width: 410px;
}

.img2 {
  border: 1px solid blue;
  height:100px; 
  width: 400px;
}

.img3 {
  border: 1px solid blue;
  height:650px; 
  width: 800px;
}

.img4 {
  border: 1px solid blue;
  height:150px; 
  width: 400px;
}

.img5 {
  border: 1px solid blue;
  height:400px; 
  width: 620px;
}

.img6 {
  border: 1px solid blue;
  height:250px; 
  width: 620px;
}

img7 {
  border: 1px solid blue;
  height:200px; 
  width: 410px;
}


.Content {
  display: flex;                                  /* {啟用 Flexbox 彈性佈局} */
  align-items: center;                            /* {讓容器內的所有子元素在垂直方向居中對齊} */
  gap: 8px;                                       /* {可選：設定元素之間的水平間距(依需求調整)} */
}

.subImg1 {
  height: 25px;
  width: 30px;
}

.subImg2 {
  height: 30px;
  width: 40px;
}