@charset "UTF-8";



html {
    overflow: hidden;
}

.custom-hmpage {
    margin-top: 0px; /* 不再整体移动hmpage */
}

.custom-mbox5Bg {
    margin-top: -30px; /* 仅移动 "SOFTWARE"、"软件下载" 和图片部分 */
}

.custom-mbox5List {
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-mbox5Link {
    position: relative;
    display: inline-block;
    margin: 10px;
    width: 200px;
    height: 100px;
    overflow: hidden;
}

.custom-mbox5Img {
    position: relative;
    z-index: 1; /* 保证图片在最上层显示 */
    transition: transform 0.3s ease; /* 添加放大效果的过渡效果 */
}

.custom-mbox5Img img {
    width: 100%;
    height: auto;
    display: block;
}

.custom-mbox5Mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.05); /* 白色透明背景 */
    z-index: 0; /* 背景在图片下方 */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 81px rgba(0, 0, 0, 0.02); /* 添加阴影增强立体感 */
}

.custom-mbox5Link:hover .custom-mbox5Mask {
    background-color: rgba(255, 255, 255, 0.05); /* 鼠标移上时背景变为白色更显著 */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.04); /* 鼠标移上时增加阴影强度 */
}

.custom-mbox5Link {
    position: relative;
    display: inline-block;
    margin: 10px;
    width: 200px;
    height: 100px;
    overflow: hidden;
    border-radius: 8px; /* 圆角边框 */
    /* 渐变背景增强立体感 */
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.02), -4px -4px 8px rgba(255, 255, 255, 0.02); /* 内外阴影 */
}

/* 鼠标移上图片的放大效果，并返回原大小 */
.custom-mbox5Link:hover .custom-mbox5Img {
    animation: zoomInOut 0.6s ease; /* 使用动画实现放大再缩小的效果 */
}

@keyframes zoomInOut {
    0% {
        transform: scale(1); /* 起始大小 */
    }
    50% {
        transform: scale(1.5); /* 中间放大到150% */
    }
    100% {
        transform: scale(1); /* 结束时回到原大小 */
    }
}

.custom-mbox5Link:hover .custom-mbox5Mask {
    background-color: red; /* 鼠标移上时红色背景 */
}


/* 动画效果 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(10px); }
    75% { transform: translateX(-10px); }
}

@keyframes fadeIn {
    0% { opacity: 0; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}

.custom-mbox5Link {
    animation: fadeIn 0.6s ease-in-out;
}

.custom-mbox5Link.shake {
    animation: shake 0.6s ease-in-out;
}


/* 自适应样式 */
@media (max-width: 768px) {
    .custom-mbox5Link {
        width: 150px;
        height: 75px;
    }
    .custom-mbox5Bg {
        margin-top: -30px;
    }
}

@media (max-width: 480px) {
    .custom-mbox5Link {
        width: 100px;
        height: 50px;
    }
    .custom-mbox5Bg {
        margin-top: -20px;
    }
}

/* 模态框背景 */
.modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* 半透明黑色背景 */
}

/* 模态框内容 */
.modal-content {
    background-color: #fff;
    margin: 15% auto; /* 距离顶部15% */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* 宽度80% */
    max-width: 400px; /* 最大宽度 */
    text-align: center; /* 居中对齐 */
}

/* 按钮样式 */
#confirmButton, #cancelButton {
    margin: 10px;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
}

#cancelButton {
    background-color: #6c757d;
}