/****** 基本样式 ******/
body {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    max-width: 1000px;
    font-family: "微软雅黑", "Microsoft YaHei", Arial, sans-serif;
    background-color: #fff;
}

div,
input,
p,
dl,
dd,
dt,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    padding: 0;
}

ul,
ol {
    list-style-type: none;
}

img {
    display: block;
    border: none;
    vertical-align: top; /* 消除图片间隙 */
}

a {
    display: block;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

/****** 主容器样式 ******/
.container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    font-size: 0; /* 消除inline-block元素间隙 */
    line-height: 0; /* 消除图片间隙 */
}

/****** 顶部区域样式 ******/
.top-section {
    position: relative;
    width: 100%;
}

.home-image {
    width: 100%;
    height: auto;
    display: block;
}

/****** 按钮容器样式 ******/
.button-container {
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0 5%;
}

.toggle-btn {
    cursor: pointer;
    max-width: 20%;
    height: auto;
    position: relative;
}

/* PC端按钮位置 */
.toggle-btn:nth-child(1) {
    left: -75px;
}
.toggle-btn:nth-child(2) {
    left: -20px;
}

.toggle-btn:nth-child(3){
    left: 25px;
}
.toggle-btn:nth-child(4) {
    left: 65px;
}

/****** 展开内容区域样式 ******/
.expand-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.expand-content {
    width: 100%;
    height: auto;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.expand-content.active {
    display: block;
    opacity: 1;
}

/****** 底部区域样式 ******/
.bottom-section {
    width: 100%;
}

/****** 响应式设计 - 平板 ******/
@media screen and (max-width: 768px) {
    body {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    .button-container {
        bottom: 10px;
        padding: 0 3%;
    }
    
    .toggle-btn {
        max-width: 22%;
    }
    
    /* 平板端按钮位置调整（按比例缩放） */
    .toggle-btn:nth-child(1) {
        left: -57px;
    }
    .toggle-btn:nth-child(2) {
        left: -15px;
    }
    
    .toggle-btn:nth-child(3){
        left: 19px;
    }
    .toggle-btn:nth-child(4) {
        left: 49px;
    }
}

/****** 响应式设计 - 手机 ******/
@media screen and (max-width: 480px) {
    .button-container {
        bottom: 15px; /* 从-10px改为20px，上移了30px */
        padding: 0 2%;
        /* 保持flex布局，不使用grid */
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    }
    
    .toggle-btn {
        max-width: 10%; /* 改回与PC端一致 */
        margin: 0; /* 去除margin */
    }
    
    /* 手机端按钮位置调整（按比例缩小） */
    .toggle-btn:nth-child(1) {
        left: -20px; /* -75px * 0.5 */
    }
    .toggle-btn:nth-child(2) {
        left: -7px; /* -20px * 0.5 */
    }
    
    .toggle-btn:nth-child(3){
        left: 7px; /* 25px * 0.5 */
    }
    .toggle-btn:nth-child(4) {
        left: 18px; /* 65px * 0.5 */
    }
}

/****** 超小屏幕适配 ******/
@media screen and (max-width: 320px) {
    .button-container {
        bottom: 5px; /* 从-20px改为10px，上移了30px */
        padding: 0 1%;
    }
    
    .toggle-btn {
        max-width: 18%;
    }
    
    /* 超小屏幕按钮位置调整（进一步缩小偏移） */
    .toggle-btn:nth-child(1) {
        left: -30px; /* -75px * 0.4 */
    }
    .toggle-btn:nth-child(2) {
        left: -8px; /* -20px * 0.4 */
    }
    
    .toggle-btn:nth-child(3){
        left: 10px; /* 25px * 0.4 */
    }
    .toggle-btn:nth-child(4) {
        left: 26px; /* 65px * 0.4 */
    }
}

/****** 大屏幕适配 ******/
@media screen and (min-width: 1200px) {
    body {
        max-width: 1000px;
    }
    
    .container {
        max-width: 1000px;
    }
}

/****** 消除图片间隙的额外样式 ******/
.top-section,
.expand-section,
.bottom-section {
    font-size: 0;
    line-height: 0;
}

.top-section img,
.expand-section img,
.bottom-section img {
    vertical-align: top;
    font-size: 0;
    line-height: 0;
}