html { 
    width: 100%; 
    height: 100%;
    background: #f4f4f4;
    display: flex;
    justify-content: center;   /* 水平置中 */
    }

body { 
  margin: 0;
  font-size: 16px;

}

::-webkit-scrollbar { width: 0; height: 0; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.mobile-wrap { 
    position: relative; 
    min-height: 100vh; 
    width: 100%; 
    margin: 0 auto;
    background-color: #fffffe;
     }

.head { 
    width: 100%;
    margin: 0rem auto;}

.head img { 
    width: 7.5rem;
    margin: 0rem auto;
    background-size: cover;
    background-position: center;}

.headbg {
    width: 7.5rem; 
    height: 1rem; 
    position: fixed; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; top: 0; 
    background-color: #fff; 
    box-shadow: rgba(160, 250, 200, 0.15) 0px 2px 5px; 
    z-index: 999;
    opacity: 0.8; /* 透明度為 60% */}

.head .logo { 
    height: 1rem; display: 
    flex; justify-content: center; 
    align-items: center }

.head .logo img { 
    width: 2.6rem }

.head .lbtn { 
    padding: .1rem .16rem; 
    background-color: #d58333; 
    border-radius: .1rem; 
    font-size: 20px;
    color: #fff; 
    height: .5rem; 
    display: flex; 
    align-items: center;
    border: 1px solid #f7ecd1; /* 新增的邊框 */
    text-decoration: none;
}

.head .lbtn:hover { background-color: #ffca48; }

.head .rbtn { 
    padding: .1rem .15rem; 
    background-color: #d58333; 
    border-radius: .1rem; 
    font-size: 20px;
    color: #fff; 
    height: .5rem; 
    display: flex; 
    align-items: center;
    border: 1px solid #f7ecd1; /* 新增的邊框 */
}

.head .rbtn:hover { background-color: #ffca48; }

.lbtn img { width: 0.26rem; height: 0.26rem; margin-right: 0.1rem; }

.rbtn img { width: 0.26rem; height: 0.28rem; margin-right: 0.1rem; }

.banner { 
    width: 100%; 
    margin: 0 auto;}

.iconlist {
  width: 100%;
}

.iconbg {
  width: 7.5rem;
  height: 2.4rem;
  position: relative;
  
}

.iconbg > img {
  width: 100%;
  height: 100%;
  display: block;
  margin-top: -2.5rem;
}

.icon-items {
  list-style: none;
  padding: 0 0.2rem;
  margin: -0.1rem 0 0 0 ;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row; /* 圖示從右到左排列 */
  justify-content: space-between;
  align-items: center;
}

.icon-items li {
  width: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-items li img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.3s ease;
}

.icon-items li img:hover {
  opacity: 0.7;
}

.web { 
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem; /* 調整間距大小 */
  width: 90%;
  margin: 0 auto;
}

.weblist { 
  width: 7.11rem;
  height: 2.18rem;
  display: block;
  background-color: transparent;
}

.weblist img {     
  width: 100%;
  height: 100%;
  display: block;
}

.weblist img:hover {
  opacity: 0.8;
  transform: scale(1.02);
  transition: all 0.3s ease;
}

.ft {
  width: 100%;
  max-width: 750px;               /* 限制最大寬度，避免在大螢幕上太寬 */
  margin: 0.5rem auto;              /* 上下留白並置中 */
  padding: 0.5rem 0.6rem;           /* 四周留白，讓內容不貼邊 */
  background: #e5dacd;            /* 柔和背景色 */
  display: flex;
  flex-direction: column;         /* 內容縱向排列 */
  align-items: center;            /* 水平置中 */
  text-align: left;               /* 文字左對齊，閱讀性佳 */
}

.ft img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 0.4rem;            /* 與文字區塊留距 */
}

.ft ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
}

.ft ul li {
  color: #333;
  line-height: 1;
  margin-bottom: 0.2rem;          /* 項目間距 */
  position: relative;
  font-size: 0.23rem;
}