/* Footer 主题化样式 - 统一颜色对比度 */

/* 友情链接区域 */
.foot_yqlj {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    height: auto;
    font-size: 16px;
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    line-height: 24px;
    padding: 8px 0;
    font-weight: 700;
    background: var(--bg-light, #fff); /* 白色背景 */
}

.foot_yqlj a {
    display: inline-block;
    margin-right: 18px;
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
}

.foot_yqlj a:hover {
    color: var(--theme-color-dark, #0056b3) !important; /* 悬停时深主题色 */
    text-decoration: underline;
    font-weight: bold;
}

/* Footer主容器 */
.footerOut {
    margin-top: 15px;
    background-color: var(--bg-light, #fff); /* 白色背景 */
}

/* Footer导航区域 */
.footer {
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #dfdfdf);
    background: var(--bg-light, #fff); /* 白色背景 */
}

.footer .footNav {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    height: auto;
}

/* Footer列表项 */
.footerLi {
    float: left;
    border-right: 1px solid var(--border-color-light, #eee);
    min-height: 180px;
    padding-left: 40px;
    padding-right: 40px;
    background: var(--bg-light, #fff); /* 白色背景 */
}/* 
Footer标题样式 */
.footerLi h3 {
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    line-height: 32px;
    font-weight: bold;
    font-size: 16px;
}

.footerLi h3 i {
    padding: 16px;
    background: url(../images/footIco2.png) no-repeat center top;
    font-size: 0;
    margin-right: 5px;
    vertical-align: middle;
    /* 图标主题化 */
    filter: hue-rotate(var(--theme-hue-rotate, 0deg));
}

/* Footer链接列表 */
.footerLi .list {
    padding-left: 37px;
    width: 100px;
}

.footerLi .list li {
    list-style-type: disc;
    list-style-position: inside;
    font-size: 10px;
    color: var(--theme-color-light, rgba(0, 123, 255, 0.3)); /* 主题色浅色圆点 */
}

.footerLi .list li a {
    font-size: 14px;
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    line-height: 28px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footerLi .list li a:hover {
    color: var(--theme-color-dark, #0056b3) !important; /* 悬停时深主题色 */
    text-decoration: underline;
    font-weight: bold;
}

/* 联系我们区域 */
.foot_contact {
    margin-bottom: 20px;
    width: 250px;
    padding-left: 20px;
    background: var(--bg-light, #fff); /* 白色背景 */
}

.foot_contact .nr {
    padding-left: 37px;
}

.foot_contact .nr p {
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    line-height: 24px;
}

.foot_contact .nr p b {
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    font-weight: bold;
    font-size: 16px;
}

.foot_contact .nr .graycl {
    color: var(--text-muted, #666) !important; /* 次要文字颜色 */
    font-size: 12px;
    line-height: 20px;
}

.foot_contact .nr p img {
    vertical-align: middle;
}

/* 右侧二维码区域 */
.footer .footNav .right {
    width: 215px;
    text-align: center;
    background: var(--bg-light, #fff); /* 白色背景 */
}

.footer .footNav .right p {
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    line-height: 30px;
    font-size: 16px;
    font-weight: 700;
}

.footer .footNav .right img {
    border: 2px solid var(--border-color, #dfdfdf);
    border-radius: 8px;
}

/* Footer版权信息 */
.footerCopy {
    text-align: center;
    height: 60px;
    line-height: 60px;
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    background: var(--bg-gray, #f9f9f9); /* 浅灰背景 */
    font-weight: bold;
}

.footerCopy a {
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    text-decoration: none;
}

.footerCopy a:hover {
    color: var(--theme-color-dark, #0056b3) !important; /* 悬停时深主题色 */
    text-decoration: underline;
}/
* 回到顶部按钮区域 */
.topUp {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
}

.topUp ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.topUp li {
    margin-bottom: 5px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 在线客服按钮 */
.topUp .kefu a {
    text-decoration: none;
}

.topUp .kefu_open {
    background: var(--theme-color, #007bff) !important; /* 主题色背景 */
    color: #fff !important; /* 白色文字 */
    padding: 10px 15px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.3s ease;
    cursor: pointer;
}

.topUp .kefu_open:hover {
    background: var(--theme-color-dark, #0056b3) !important; /* 悬停时深主题色背景 */
    color: #fff !important; /* 悬停时白色文字 */
}

/* 回到顶部按钮 */
.topUp .topBackOn {
    background: var(--theme-color, #007bff) !important; /* 主题色背景 */
    color: #fff !important; /* 白色文字 */
    padding: 10px 15px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    line-height: 16px;
}

.topUp .topBackOn:hover {
    background: var(--theme-color-dark, #0056b3) !important; /* 悬停时深主题色背景 */
    color: #fff !important; /* 悬停时白色文字 */
}

/* 微信二维码悬停区域 */
.topUp .topUpWx {
    position: relative;
}

.topUp .topUpWxk {
    position: absolute;
    right: 100%;
    bottom: 0;
    background: var(--bg-light, #fff); /* 白色背景 */
    border: 1px solid var(--border-color, #dfdfdf);
    border-radius: 4px;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: none;
    z-index: 1001;
}

.topUp .topUpWx:hover .topUpWxk {
    display: block;
}

.topUp .topUpWxk img {
    border: 1px solid var(--border-color, #dfdfdf);
    border-radius: 4px;
}

.topUp .topUpWxk p {
    color: var(--theme-color, #007bff) !important; /* 主题色文字 */
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    font-weight: bold;
}

/* 微信图标按钮 */
.topUp .topUpWx > div:first-child {
    background: var(--success-color, #28a745) !important; /* 绿色背景（微信色） */
    color: #fff !important; /* 白色文字 */
    padding: 10px 15px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.topUp .topUpWx > div:first-child:hover {
    background: var(--success-color-dark, #1e7e34) !important; /* 悬停时深绿色背景 */
    color: #fff !important; /* 悬停时白色文字 */
}

/* 响应式调整 */
@media (max-width: 768px) {
    .foot_yqlj,
    .footer .footNav {
        width: 100%;
        padding: 0 15px;
        box-sizing: border-box;
    }
    
    .footerLi {
        float: none;
        border-right: none;
        border-bottom: 1px solid var(--border-color-light, #eee);
        padding: 20px 15px;
        min-height: auto;
    }
    
    .footer .footNav .right {
        width: 100%;
        margin-top: 20px;
    }
    
    .topUp {
        right: 10px;
        bottom: 10px;
    }
}

/* 确保所有链接颜色统一 */
.footerOut a {
    color: var(--theme-color, #007bff) !important;
    transition: all 0.3s ease;
}

.footerOut a:hover {
    color: var(--theme-color-dark, #0056b3) !important;
}

/* 特殊按钮保持白色文字 */
.topUp .kefu_open,
.topUp .topBackOn,
.topUp .topUpWx > div:first-child {
    color: #fff !important;
}

.topUp .kefu_open *,
.topUp .topBackOn *,
.topUp .topUpWx > div:first-child * {
    color: #fff !important;
}/* 新
增的主题化CSS类 */
.theme-phone {
    color: var(--theme-color, #007bff) !important;
    font-weight: bold;
    font-size: 18px;
}

.theme-muted {
    color: var(--text-muted, #666) !important;
    font-size: 12px;
    line-height: 20px;
}

.theme-text {
    color: var(--theme-color, #007bff) !important;
    font-weight: bold;
}

/* 覆盖原有的颜色类 */
.footerOut .fontcl3 {
    color: var(--theme-color, #007bff) !important;
}

.footerOut .graycl {
    color: var(--text-muted, #666) !important;
}

.footerOut .maincl {
    color: var(--theme-color, #007bff) !important;
}

/* 确保图标颜色正确 */
.footerLi h3 .ico_1 {
    background-position: center -1px;
}

.footerLi h3 .ico_2 {
    background-position: center -34px;
}

.footerLi h3 .ico_3 {
    background-position: center -64px;
}

.footerLi h3 .ico_4 {
    background-position: center -96px;
}

/* 微信按钮特殊样式 */
.topUp .topUpWx {
    background: var(--success-color, #28a745) !important;
    color: #fff !important;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    text-align: center;
    position: relative;
}

.topUp .topUpWx:before {
    content: "微信";
    display: block;
    font-weight: bold;
}