/* 這一行是關鍵：確保 body 允許橫向捲動 */
body {
    overflow-x: auto; /* 允許左右滑動 */
    width: 100%;
}

/* 新增或修改這些 CSS */

/* 1. 全局圖片設定：消除圖片底部的空隙 */
img {
    display: block;
    border: 0;
}

/* 2. 表格強制重置 */
table {
    width: 650px !important;
    margin: 0 auto;
    padding: 0;
    border-spacing: 0 !important;
    border-collapse: collapse !important; /* 消除單元格間距 */
}

/* 3. 單元格強制重置 */
td {
    margin: 0;
    padding: 0 !important; /* 確保沒有內邊距撐大表格 */
    border: 0;
}

/* 4. 針對你的圖片寬度 */
table img {
    display: block; /* 再次確保 */
    width: 100%;
    height: auto; /* 建議設為 auto，避免變形，除非你很確定高度是對的 */
}

.floating {
    position: fixed;
    z-index: 9;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .0);
}

.floating .container {
    display: table;
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    border-spacing: 0;
}

/* 預設：所有的內容圖片隱藏 */
.section1-content, .section2-content {
    display: none;    /* 如果你想做動畫，可以在這裡加 opacity: 0; transition: opacity 0.5s; */
}

/* 狀態：當加上 show class 時顯示 */
.section1-content.show, .section2-content.show {
    display: block !important; /* 使用 !important 確保權重夠高，覆蓋 display: none */

    /* 如果做動畫，這裡加 opacity: 1; */
}
.section1-btn, .section2-btn {
    cursor: pointer;
}

/* (保留之前的) 按鈕 active 樣式設定 */
.section1-btn .active, .section2-btn .active {
    display: none;
}

.section1-btn .inactive, .section2-btn .inactive {
    display: inline-block;
}

.section1-btn.active .active, .section2-btn.active .active {
    display: inline-block;
}

.section1-btn.active .inactive, .section2-btn.active .inactive {
    display: none;
}