* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: "微软雅黑", "Microsoft YaHei", Arial, sans-serif;
    background-color: #f2ebe1;
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}
/** 幻灯片样式 */
.slideshow-container {
    position: relative;
    width: 100%;
    height: auto; /* 根据实际需要调整 */
    margin: auto;
    overflow: hidden;
}

/* 幻灯片过渡动画 */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}


.slide.active {
    position: relative;    opacity: 1;
}

.slide.fade-out {
    opacity: 0;
}


.slide img {
    width: 100%;
    vertical-align: middle;
}

.dots-container {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(250, 247, 241, 0.67); /* 白色半透明背景 */
    padding: 2px;
    border-radius: 20px;
    display: flex;
    z-index: 10;
    transition: background-color 0.3s ease; /* 添加过渡效果 */
}

/* 移除圆点容器悬停效果 */
.dots-container:hover {
    /* 悬停状态保持原样，不改变背景颜色 */
}

.dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color:#f77979;
    margin: 0 5px;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
}

.dot.active {
    width: 100px;
    border-radius: 5px;
    background-color: #f77979;
}

/* 定义CSS变量默认值 */
:root {
    --slide-duration: 2000ms;
}

.progress-bar {
    height: 100%;
    background-color: #ec2829; /* 修改进度条颜色为红色 */
    width: 0%;
    transition: none; /* 默认无过渡 */
}

.progress-bar.animate {
    width: 100%;
    transition: width var(--slide-duration) linear;
}

.top {
    width: 100%;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 110px;
    /* background: url("../img/top-bj.png"); */
    /* background-color: #ec2829; */
}

.page {
    width: 750px;
    max-width: 100%;
    margin: 0 auto;
    background: url("../img/bj.png") no-repeat center top;
    background-size: cover;
}

.custom-box {
    width: 500px;
    /* height: 400px; */
    border-radius: 10px;
    position: relative;
    margin: 0 auto;
}

.custom-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 20px;
    background: linear-gradient(to bottom, #f6a73e, #f1eae0) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: 1;
}

.custom-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.62),
    rgba(255, 246, 233, 0.62),
    rgba(255, 255, 255, 0.62));
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(138, 106, 59, 0.2); /* 使用主题色调的投影 */
    z-index: 2;
}

/* Logo容器样式 */
.logo-container {
    position: absolute;
    top: 1.25rem; /* 20px转换为rem (20/16=1.25) */
    left: 50%;
    transform: translateX(-50%); /* 左右居中对齐 */
    z-index: 4;
}

/* Logo图片样式 */
.logo-image {
    width: 5.75rem; /* 60px转换为rem (60/16=3.75) */
    /* height: 5.75rem; 60px转换为rem (60/16=3.75) */
    display: block;
}

/* 新增内容样式 */
.custom-content {
    position: relative;
    z-index: 3;
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* background: url("../img/h.png") no-repeat center 20px; */
}

/* 第一行 - 宣传语 */
.slogan {
    text-align: center;
    flex-shrink: 0;
    margin-top: 6.55rem; /* 20px转换为rem (20/16=1.25)，与logo-container保持一致的间距 */
}

.slogan-chinese {
    font-size: 30px;
    font-weight: bold;
    color: #4e4e4e;
    margin-bottom: 10px;
}

.slogan-english {
    font-weight: revert;
    font-size: 18px;
    text-transform: uppercase; /* 添加这一行使英文全大写 */
    color: #866638;
    margin-top: 5px;
}

/* 第二行 - 链接 */
.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px; /* 增大按钮间距 */
    flex-shrink: 0;
    padding-top: 15px;
}

.link-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 284px;
    height: 60px;
    box-sizing: border-box;
    padding-left: 50px;
    background: url(../img/button1.png) 0% 0% / 100% 100% no-repeat;
    text-decoration: none;
    border-radius: 5px;
    overflow: hidden;
    /* 移除过渡动画效果 */
    /* transition: 0.3s; */
}

/* 按钮悬停效果 - 背景图片改为button1-1.png */
.link-item:hover {
    background: url(../img/button1-1.png) 0% 0% / 100% 100% no-repeat;
}

.link-icon.product {
    width: 23px;
    height: 23px;
    background: url("../img/home.png") no-repeat center center;
    background-size: contain;
    flex-shrink: 0;
}

/* 进入官网按钮悬停时图标变化 */
.link-item:hover .link-icon.product {
    background: url("../img/home1.png") no-repeat center center;
    background-size: contain;
}

.link-icon.contact {
    width: 23px;
    height: 23px;
    background: url("../img/download.png") no-repeat center center;
    background-size: contain;
    flex-shrink: 0;
}

/* 下载APP按钮悬停时图标变化 */
.link-item:hover .link-icon.contact {
    background: url("../img/download1.png") no-repeat center center;
    background-size: contain;
}

.link-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
    text-align: left; /* 文字左对齐 */
}

.link-text-chinese {
    font-size: 18px;
    font-weight: bold;
    /* 将按钮中文文字颜色改为白色，提升对比度与可读性 */
    color: #fff;
    margin-bottom: 5px;
    text-align: center;
    line-height: 1.2;
}

.link-text-english {
    font-size: 10px;
    /* 将按钮英文文字颜色改为白色，保持与中文一致的视觉风格 */
    color: #fff;
    text-align: center;
    line-height: 1.2;
}

/* 按钮悬停时文字颜色变为红色 */
.link-item:hover .link-text-chinese,
.link-item:hover .link-text-english {
    color: #ff0000;
}

/* 第三行 - 图片 */
.image-container {
    text-align: center;
    flex-shrink: 0;
    padding: 5px 0;
}

.content-image {
    max-width: 90%;
    max-height: 70px;
    border-radius: 5px;
    display: inline-block;
}
.footer {
    width: 100%;
    max-width: 750px;
    margin: 20px auto 0;
    padding: 0 30px;
}

.footer-content {
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

.footer-text-chinese {
    font-size: 14px;
    color: #ec2829;
    line-height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-text-chinese span{
    margin: 0 20px;
}
.footer-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #866638, transparent);
    margin: 15px 0;
}

.footer-text-english {
    font-size: 14px;
    color: #a8a8a8;
}

/* 调整图片样式 */
.footer-text-chinese img {
    vertical-align: middle;
}
.modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999; /* 提高z-index确保在移动端置于最顶层 */
    justify-content: center;
    align-items: center;
}

/* 浮窗弹窗特殊样式 - 悬浮紧贴右边 */
#floatPicModal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 50%; /* 垂直居中 */
    right: 0; /* 紧贴右边 */
    transform: translateY(-50%); /* 垂直居中偏移 */
    width: auto; /* 自适应宽度 */
    height: auto; /* 自适应高度 */
    z-index: 9999; /* 提高z-index确保在移动端置于最顶层 */
    background: none; /* 移除背景 */
    justify-content: flex-end; /* 内容靠右对齐 */
    align-items: center;
}

/* 弹窗背景遮罩 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px); /* 高斯模糊效果 */
    -webkit-backdrop-filter: blur(10px); /* Safari兼容 */
}

/* 弹窗内容 */
.modal-content {
    width: 72%; /* 宽度72% */
    max-width: 540px;
    border-radius: 10px;
    padding: 30px;
    position: relative;
    z-index: 3;
    text-align: center;

}

.modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid transparent;
    border-radius: 20px;
    background: linear-gradient(to bottom, #f6a73e, #f1eae0) border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    z-index: -2; /* 降低层级，放在内容下方 */
}

.modal-content::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.62),
    rgba(255, 246, 233, 0.62),
    rgba(255, 255, 255, 0.62));
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(138, 106, 59, 0.2); /* 使用主题色调的投影 */
    z-index: -1;
}
.modal-header,
.download-options,
.qr-section {
    position: relative;
    z-index: 4; /* 高于modal-content的z-index(3) */
}
/* 关闭按钮 */
.modal-close-icon {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 10001; /* 确保关闭按钮在最顶层 */
    background: url("../img/close.png") no-repeat center center;
    background-size: contain;
}

.modal-content h2 {
    color: #4e4e4e;
    margin-bottom: 20px;
}

.modal-content p {
    color: #866638;
    margin-bottom: 30px;
    line-height: 1.6;
}

.modal-close {
    background: #f6a73e;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    /* 移除过渡动画效果 */
    /* transition: background 0.3s ease; */
}

/* 移除模态框关闭按钮悬停效果 */
.modal-close:hover {
    /* 悬停状态保持原样，不改变背景颜色 */
}
/* 弹窗内容区域样式 */
.modal-header {
    /* background: url("../img/h.png") no-repeat center center; */
    height: 130px;
    padding-top: 65px;
}


.modal-header .chinese-title {
    font-size: 24px;
    font-weight: bold;
    color: #ec2829;
    margin-bottom: 5px;
}

.modal-header .english-title {
    font-size: 16px;
    color: #ea6869;
    text-transform: uppercase;
}

/* 下载选项区域 */
.download-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
    margin-top: 20px;
}

.download-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 60px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 30px;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1),
    inset 0 -2px 5px rgba(255, 255, 255, 0.5);
    position: relative;
    padding-right: 10px;
}

.download-option-left {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
}

.download-icon {
    font-size: 16.7px;
    width: 30px;
    height: 30px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.android-icon {
    background-image: url("../img/android.png"); /* 你需要准备安卓图标 */
}

.ios-icon {
    background-image: url("../img/ios.png"); /* 你需要准备苹果图标 */
}

.download-text {
    font-size: 16px;
    font-weight: revert;
    color: #f98d95;
    flex: 1;
    text-align: center;
}

.download-button {
    /* 将下载按钮文字颜色改为白色，确保在新的深色背景上清晰可见 */
    color: #fff;
    font-size: 16px;
    /* 添加默认背景图片button1.png，与主要按钮保持一致的视觉风格 */
    background: url(../img/nav-on.png) 0% 0% / 100% 100% no-repeat;
    width: 124px;
    /* height: 52px; */
    padding: 8px 20px;
    cursor: pointer;
    font-weight: bold;
    /* 移除过渡动画效果 */
    /* transition: background 0.3s ease; */
    border: none; /* 移除默认边框 */
    outline: none; /* 移除焦点轮廓 */
}

/* 下载按钮悬停效果 - 背景图片改为button1-1.png，文字颜色改为红色 */
.download-button:hover {
    background: url(../img/nava2.png) 0% 0% / 100% 100% no-repeat;
    color: #ff0000;
}



/* 二维码区域 */
.qr-section {
    margin-top: 20px;
}
.qr-section .content-image{
    margin-top: 20px;
}

.qr-text {
    font-size: 14px;
    color: #866638;
    margin-bottom: 15px;
}

.qr-code {
    width: 150px;
    height: 150px;
    border: 2px solid #c4b196;
    border-radius: 10px;
    margin: 0 auto;
    background: url("../img/qrcode.png") no-repeat center; /* 你需要准备二维码图片 */
    background-size: contain;
}
@media screen and (max-width: 750px) {

    .dot {
        width: 5px;
        height: 5px;
        margin: 0 2px;

    }

    .dot.active {
        width: 30px;
    }
    .links{
        gap:15px;
        /* padding-top: 15px; */
        margin-top: -30px;

    }
    /* 在小屏设备上为按钮添加默认背景图片，保持视觉一致性 */
    .link-item {
        background: url(../img/button1.png) 0% 0% / 100% 100% no-repeat;
        /* background-color: #FF4C4C; 统一主题红色 */
    }

    /* 小屏设备上的主要按钮悬停效果 */
    .link-item:hover {
        background: url(../img/button1-1.png) 0% 0% / 100% 100% no-repeat;
    }

    .link-item:hover .link-text-chinese,
    .link-item:hover .link-text-english {
        color: #ff0000;
    }

    .link-item:hover .link-icon.product {
        background: url(../img/home1.png) 0% 0% / 100% 100% no-repeat;
    }

    .link-item:hover .link-icon.contact {
        background: url(../img/download1.png) 0% 0% / 100% 100% no-repeat;
    }

    /* 下载选项按钮在小屏上也添加默认背景图片，保持视觉一致性 */
    .download-button {
        background: url(../img/nav-on.png) 0% 0% / 100% 100% no-repeat;
        width: 90px;
        height: 36px;
        font-size: 12px;
    }
    
    /* 小屏设备上的下载按钮悬停效果 */
    .download-button:hover {
        background: url(../img/nava2.png) 0% 0% / 100% 100% no-repeat;
        color: #ff0000;
    }

    /* 调整顶部容器的padding */
    .top {
        padding: 0 15px;
        height: 60px; /* 减小顶部高度 */
        /* background-color: #ec2829; */
    }

    /* 优化顶部图片大小 */
    .top li img {
        max-height: 30px; /* 限制图片最大高度 */
        width: auto; /* 保持宽高比 */
    }

    .top li:nth-child(2) img {
        max-height: 55px; /* 根据需要调整高度 */
        width: auto; /* 保持宽高比 */
    }



    /* 调整自定义盒子的宽度 */
    .custom-box {
        width: 85%;
        height: auto;
    }

    /* 移动端Logo样式适配 */
    .logo-container {
        top: 0.625rem; /* 移动端距离顶部10px (10/16=0.625rem) */
    }

    .logo-image {
        width: 3.5rem; /* 移动端图片大小40px (40/16=2.5rem) */
        /* height: 3.5rem; 移动端图片大小40px (40/16=2.5rem) */
    }

    /* 调整链接按钮宽度 */
    .link-item {
        height: 40px;
        width: 65%;
    }
    .link-text-chinese{
        font-size: 12px;
        margin-bottom:2px;
    }
    .link-text-english{
        font-size: 9px;
    }

    .link-icon.product,.link-icon.contact{
        width: 18px;
        height: 18px;
        margin-left: -25px;
    }
    .custom-content {
        padding: 5px;
        /* background: url(../img/h.png) no-repeat center 5px; */
        background-size: 100px;

    }
        .content-image{
        margin-top: 5px;
     max-height: 15px;
    }
    /* 调整页面最大宽度 */
    .page {
        width: 100%;
    }
    .slogan{
        margin: 10px 0;
        margin-top: 3.55rem;
    }
    .slogan-chinese{
        font-size: 14px;
        margin: 0;
    }
    .image-container{
        padding: 0;
    }
    .footer-text-chinese {
    font-size: 12px;
    }
    .footer-text-chinese img{
        width: 12px;
    }
    .footer-text-chinese span{
        margin: 0 2px;
    }
    .footer-text-english{
        font-size: 12px;

    }
    .delay-text {
        font-size: 10px;
    }
    .download-text{
     font-size: 12px;
    }
    /* 调整页脚的padding */
    .footer {
        padding: 0;
    }
    .footer-content{
        padding: 0;
    }

    .modal-header {
        padding-top: 35px;
        /* background: url("../img/h.png") no-repeat center top; */
background-size: 100px;
        height: 80px;
    }
        /* 调整模态框宽度 */
    .modal-content {
        width: 80%;
        padding: 20px;
    }

    /* 调整下载选项的padding */
    .download-option {
        padding: 0 0 0 10px;
        height: 42px;
        gap: 8px;
        margin-bottom: 6px;
    }

    .download-options {
        gap: 5px;
        margin-bottom: 0px;
        margin-top: 30px;
    }


    .slogan-english {
        font-size: 11px; /* 减小字体 */
        margin-top: 5px;
    }

    /* 移动端客服框样式 - 尺寸缩小一倍 */
    .kefu-contain {
        width: 85px; /* 原来171px缩小一倍 */
        height: 214px; /* 原来429px缩小一倍 */
        background-size: 50% !important; /* 背景图片缩小一倍 */
    }

    .kefu-expend {
        top: 110px; /* 原来220px缩小一倍 */
        font-size: 9px; /* 原来18px缩小一倍 */
    }

    /* QQ客服和微信客服的字体大小调整 */
    .kefu-expend .qq-service,
    .kefu-expend .wechat-service {
        font-weight: 700;
    }

    .kefu-expend .qq-service div span,
    .kefu-expend .wechat-service div span {
        font-size: 7px; /* 客服标题字体缩小 */
    }

    .kefu-expend .qq-number,
    .kefu-expend .wechat-number {
        font-size: 8px; /* 客服号码字体缩小 */
    }

    /* 客服图标尺寸调整 */
    .kefu-expend img {
        width: 10px !important; /* 原来20px缩小一倍 */
        margin-right: 1px !important; /* 原来2px缩小一倍 */
    }

    /* 关闭按钮尺寸调整 */
    .kefu-expend .close_btn {
        width: 15px !important; /* 原来30px缩小一倍 */
    }

    /* 微信客服间距调整 */
    .kefu-expend .wechat-service {
        margin-top: 10px !important; /* 原来20px缩小一倍 */
    }

    /* 关闭按钮容器间距调整 */
    .kefu-expend > div:last-child {
        margin-top: 10px !important; /* 原来20px缩小一倍 */
    }

    /* 迷你客服按钮尺寸调整 */
    .kefu-box-mini .kefu-mini {
        width: 25px !important; /* 原来50px缩小一倍 */
    }
    
    /* 移动端弹窗z-index优化 - 确保在所有移动端元素之上 */
    .modal {
        z-index: 99999 !important; /* 移动端使用更高的z-index值 */
    }
    
    #floatPicModal {
        z-index: 99999 !important; /* 浮窗弹窗在移动端也使用更高的z-index值 */
    }
    
    .modal-close-icon {
        z-index: 100001 !important; /* 关闭按钮在移动端保持最高层级 */
    }
    
    /* 弹窗内容在移动端的层级优化 */
    .modal-content {
        z-index: 100000 !important; /* 确保弹窗内容在移动端正确显示 */
    }
}


/* PC端客服容器样式 */
.kefu-contain {
    background-image: url('../img/bg.png'); 
    background-size: contain; /* 改为contain确保背景图完整显示 */
    background-position: center; 
    background-repeat: no-repeat; 
    position: fixed; 
    right: 0px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 171px; 
    height: 429px; 
    z-index: 1000; 
    text-align: center; 
    transition: all 0.3s;  
}

/* 移动端客服容器样式 */
@media (max-width: 768px) {
    .kefu-contain {
        background-image: url('../img/bg.png'); 
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
        position: fixed; 
        right: -40px; 
        top: 27%; 
        transform: translateY(-50%); 
        width: 171px; 
        height: 429px; 
        z-index: 1000; 
        text-align: center; 
        transition: all 0.3s; 
    }
    .kefu-mini {
        right: 40px!important;
    }
}
.kefu-mini {
    transition: all 0.3s;
}
.kefu-expend {
    position: absolute;
    left: 50%;
    top: 220px;
    transform: translateX(-50%);
    width: 100%;
    display: inline-block;
    font-size: 18px;
    transition: all 0.3s;
}
.kefu-box .kefu-mini{
    width: 0px;
    display: none;
}

.kefu-box-mini .kefu-contain{
    width: 0!important;
    height: 0!important;
}
.kefu-box-mini .kefu-expend{
    display: none!important;
}
.kefu-box-mini .kefu-mini{
    display: block!important;
    position: fixed; 
    right: 0px; 
    top: 50%; 
    transform: translateY(-50%); 
    width: 50px;
}

.links .download-options {
    width: 100%;
    padding: 0 20px;
}