.index_top-banner {
    width: 100%;
    height: 700px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/kv_e7bedcc5.jpg'); /* 默认 JPG */
}

/* WebP 适配 */
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=")) {
    .index_top-banner {
        background-image: url('../images/kv_e7bedcc5.webp');
    }
}

/* index_part-bg-shuoming 容器样式 */
.index_part-top-shuoming {
    width: 60%;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
    padding-top: 330px; /* 使用 padding 代替 margin */
}

/* 标题样式 */
.index_part-top-shuoming .title {
    font-size: 60px; /* 标题字体大小 */
    font-weight: 700; /* 粗体 */
    color: #fafafa; /* 标题颜色 */
    margin-top: 30px; /* 额外添加上边距 */
    
}

/* 说明文字样式 */
.index_part-top-shuoming .description {
    font-size: 18px; /* 说明文字字体大小 */
    color: #c4b704; /* 说明文字颜色 */
    font-weight: 450; /* 加粗 */
    margin-top: 20px; /* 额外添加上边距 */
    margin-bottom: 20px; /* 标题和说明之间的间距 */
    line-height: 1.6; /* 设置行距，可以根据需要调整 */
}

.index_part-top-time {
    color: #ddd; /* 更柔和的熔岩文字色 */
    font-size: 23px;
    font-weight: bold;
    padding: 15px 35px;
    border-radius: 12px;
    margin-top: 35px;
    display: inline-block;
    text-align: center;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease-in-out; /* 让交互效果更缓慢、自然 */

    /* 🔥 更暗的熔岩背景 */
    background: linear-gradient(135deg, #1a0000, #3d0e0e, #5a1a1a);

    /* 🌫️ 低调光影 */
    box-shadow: 0 0 8px rgba(90, 30, 10, 0.2);

    /* 深色边框 */
    border: 1px solid rgba(90, 30, 10, 0.4);
}

/* 倒计时文本 */
.index_part-top-time span {
    font-size: 26px;
    font-family: 'Roboto', sans-serif;
    color: #743100; /* 深橙色熔岩字体 */
}

/* 鼠标悬浮效果 */
.index_part-top-time:hover {
    transform: scale(1.03, 1.03); /* 轻微拉长 */
    box-shadow: 0 0 15px rgba(90, 30, 10, 0.4);
}


.index_part3-bg {
    width: 100%;
    min-height: auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/part3-bg_c99e9a72.jpg');
}

/* WebP 适配 */
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=")) {
    .index_part3-bg {
        background-image: url('../images/part3-bg_c99e9a72.webp');
    }
}




/* index_part-bg-shuoming 容器样式 */
.index_part-bg-shuoming {
    width: 40%;
    box-sizing: border-box;
    text-align: center;
    margin: 0 auto;
    padding-top: 20px; /* 使用 padding 代替 margin */
}

/* 标题样式 */
.index_part-bg-shuoming .title {
    font-size: 30px; /* 标题字体大小 */
    font-weight: bold; /* 粗体 */
    color: #fafafa; /* 标题颜色 */
    margin-top: 30px; /* 额外添加上边距 */
    
}

/* 说明文字样式 */
.index_part-bg-shuoming .description {
    font-size: 16px; /* 说明文字字体大小 */
    color: #c4b704; /* 说明文字颜色 */
    font-weight: 500; /* 加粗 */
    margin-top: 15px; /* 额外添加上边距 */
    margin-bottom: 20px; /* 标题和说明之间的间距 */
    line-height: 1.6; /* 设置行距，可以根据需要调整 */
}




.index_part4-bg {
    width: 100%;
    min-height: 390px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('../images/bg_part4.png');
}

/* WebP 适配 */
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=")) {
    .index_part4-bg {
        background-image: url('../images/bg_part4.webp');
    }
}

.index_part1-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1800px;
    margin: 0 auto;
    padding: 20px 0;
}

.index_part1-box {
    width: calc(25% - 30px);
    min-height: 350px;
    background-size: 100% 100% !important; /* 强制拉伸填充整个容器 */
    background-position: center !important;
    background-repeat: no-repeat !important;
    transition: background-image 0.3s ease-in-out;
    position: relative; /* 保持 relative 以定位内部图片 */
    cursor: pointer; /* 让鼠标悬停时变成手型 */
}

/* 默认背景 */
.index_part1-box {
    background-image: url('../images/part1-box-bgh.jpg') !important;
}

/* 鼠标悬停 */
.index_part1-box:hover {
    background-image: url('../images/part1-box-bg.jpg') !important;
}

/* WebP 适配 */
@supports (background-image: url("data:image/webp;base64,UklGRiIAAABXRUJQVlA4TAYAAAAvAAAAAAfQ//73v/+BiOh/AAA=")) {
    .index_part1-box {
        background-image: url('../images/part1-box-bgh.webp') !important;
    }
    .index_part1-box:hover {
        background-image: url('../images/part1-box-bg.webp') !important;
    }
}

/* 内部图片样式 */
.inner-image {
    position: absolute; /* 使用绝对定位控制图片位置 */
    top: 30px; /* 控制上部距离 */
    left: 50%; /* 水平居中：将左边缘移到容器中间 */
    transform: translateX(-50%); /* 水平居中：向左偏移自身宽度的一半 */
    bottom: auto; /* 不设置底部距离，依靠 top 控制 */
    width: 150px; /* 固定宽度 */
    height: 150px; /* 固定高度 */
    max-height: 100%; /* 限制图片不超过容器高度 */
    transition: transform 0.3s ease-in-out; /* 添加平滑过渡效果 */
}

/* 鼠标悬停在 .index_part1-box 时放大内部图片 5% */
.index_part1-box:hover .inner-image {
    transform: translateX(-50%) scale(1.10); /* 保留水平居中并放大 5% */
}

/* 容器样式 */
.text-container {
    padding: 20px; /* 内边距，可根据需要调整 */
    margin-top: 200px; /* 修正：使用 margin-top 控制上部距离 */
    border-radius: 10px; /* 圆角，可根据需要调整 */
    width: 100%; /* 容器宽度，可根据需要调整 */
    text-align: center; /* 文字居中 */
}

/* 标题文字样式 */
.text-container .title {
    color: #FFC107; /* 亮黄色，与图片标题颜色一致 */
    font-size: 24px; /* 较大字体，可调整 */
    font-weight: bold; /* 加粗 */
    font-family: Arial, "Microsoft YaHei", sans-serif; /* 字体 */
    margin-bottom: 10px; /* 与内容文字的间距 */
}

/* 鼠标悬停在 .text-container 时改变标题颜色 */
.index_part1-box:hover .title {
    color: #FFFFFF; /* 鼠标悬停时标题变为白色 */
}

/* 内容文字样式 */
.text-container .content {
    color: #e3e4a7; /* 白色，与图片内容颜色一致 */
    font-size: 16px; /* 较小字体，可调整 */
    font-family: Arial, "Microsoft YaHei", sans-serif; /* 字体 */
    line-height: 1.5; /* 行高，增加可读性 */
}


.index_part2-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1880px;
    margin: 0 auto;
    padding: 40px 0;
}

/* 新增包裹层，用于控制图片和文字的整体布局 */
.index_part2-item {
    width: calc(20% - 10px); /* 与原来box的宽度一致 */
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer; /* 鼠标经过时变成手形 */
}

.index_part2-box {
    width: 100%; /* 填满item宽度 */
    height: 200px; /* 恢复固定高度 */
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    border-radius: 5px;
    border: 3px solid #505050;
    background: linear-gradient(145deg, #303030, #707070);
    box-shadow: 
        3px 3px 8px rgba(0, 0, 0, 0.6),
        inset 3px 3px 8px rgba(255, 255, 255, 0.2),
        inset -3px -3px 8px rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.index_part2-box img {
    width: 100%;
    height: 100%; /* 图片填充整个box */
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.index_part2-box:hover {
    border-color: #bebcbc;
    box-shadow: 
        inset 3px 3px 12px rgba(255, 255, 255, 0.8),
        inset -3px -3px 12px rgba(0, 0, 0, 0.4);
}

.index_part2-box:hover img {
    transform: scale(1.10);
}

/* 文字容器样式 */
.news-info {
    width: 100%; /* 与图片宽度一致 */
    padding: 10px;
    box-sizing: border-box;
    color: #e2cc08;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin-top: 10px; /* 与图片容器保持间距 */
}

.news-title {
    margin: 0;
    font-size: 18px;
    font-weight: 550;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-date {
    margin: 5px 0 0 0;
    font-size: 14px;
    color: #cccccc;
}




/* index_part5-bg 容器样式 */
.index_part5-bg {
    width: 100%; /* 宽度为100% */
    height: 400px; /* 高度可以调整，默认为400px */
    background-image: url('../images/message-bg.webp'), url('../images/message-bg.png'); /* 优先使用webp格式 */
    background-size: cover; /* 背景图像覆盖整个容器 */
    background-position: center center; /* 背景居中对齐 */
    background-repeat: no-repeat; /* 不重复背景图像 */
    box-sizing: border-box; /* 让 padding 和 margin 计算在内 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 子元素垂直居中 */
    align-items: center; /* 子元素水平居中 */

    /* 上下边框 */
    border-top: 5px solid #000; /* 设置上边框，宽度为5px，颜色为黑色 */
    border-bottom: 5px solid #000; /* 设置下边框，宽度为5px，颜色为黑色 */
}

/* 标题样式 */
.index_part5-bg .title {
    color: #ffffff; /* 亮黄色，与图片标题颜色一致 */
    font-size: 50px; /* 较大字体，可调整 */
    font-weight: 400; /* 加粗 */
    font-family: Arial, "Microsoft YaHei", sans-serif; /* 字体 */
    margin-top: 20px; /* 控制与父容器顶部的距离 */
    margin-bottom: 50px; /* 与按钮之间的间距 */
}

/* 按钮整体样式 */
.index_part5-bg .custom-button {
    display: inline-block;
    padding: 10px 55px; /* 内边距调整 */
    font-size: 20px; /* 适中字体大小 */
    font-weight: bold; /* 加粗 */
    color: #FFD700; /* 文字颜色，金黄色 */
    text-align: center;
    text-decoration: none; /* 去掉下划线 */
    position: relative;
    
    /* 按钮基础背景 */
    background-color: #580404; /* 默认暗红色 */
    background-image: linear-gradient(to bottom, #490101, #610202);
    
    /* 3D 立体边框 */
    border: 3px solid #221d1d; /* 深红色边框 */
    border-radius: 8px; /* 轻微圆角 */
    
    /* 文字阴影，让字体更清晰 */
    text-shadow: 
        1px 1px 2px rgba(0, 0, 0, 0.8), 
        0px 0px 6px rgba(255, 215, 0, 0.5);

    /* 轻微按钮阴影 */
    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.7); 
    
    cursor: pointer; /* 鼠标指针 */
    transition: all 0.2s ease-in-out; /* 过渡效果 */
}

/* 鼠标悬停效果（弱化） */
.index_part5-bg .custom-button:hover {
    font-weight: bold; /* 加粗 */
    color: #fdfdfc; /* 文字颜色，金黄色 */
    background-image: linear-gradient(to bottom, #B22222, #FF4444);
    background-color: #580404; /* 默认暗红色 */
}

/* 鼠标按下（点击）效果 */
.index_part5-bg .custom-button:active {
    background-image: linear-gradient(to bottom, #7A0000, #A00000);
    transform: scale(0.98); /* 轻微缩小 */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
}