/* ========================================================
 * 文件名称：comon.css
 * 文件作用：网站公共样式文件，包含全局重置、通用布局类、头部导航、页脚、浮动客服等
 * 适用页面：全站通用
 * ======================================================== */

/* -------------------------- 全局样式重置 -------------------------- */
/* 重置HTML标签的默认边距和内边距，统一盒模型 */
body,html,div,h1,h2,h3,h4,h5,h6,p,span,a,img,button,input,textarea,ul,li,i,button {
    border: 0;
    padding: 0;
    margin: 0;
}

/* 移除列表项默认样式 */
li {list-style: none;}

/* 统一链接样式，移除下划线 */
a {text-decoration: none;color: #000;}
a:hover,a:active {color: #000;}

/* 图片块级显示 */
img {display: block;}

/* -------------------------- Flex布局工具类 -------------------------- */
/* 弹性布局兼容写法，支持多浏览器 */
.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

/* -------------------------- 字体设置 -------------------------- */
/* 引入苹方字体作为默认字体 */
@font-face {
    font-family: 'PingFang Regular';
    src:url('../font/PingFang Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* 页面基础字体设置，支持多种备选字体 */
body {
    font-family: 'PingFang SC','微软雅黑','Helvetica Neue',Helvetica,STHeitiSC-Light,WOL_SB,'Segoe UI Semibold','Segoe UI',Tahoma,Helvetica,sans-serif;
}

/* 移除按钮默认焦点样式 */
button {outline: none;}

/* -------------------------- 定位工具类 -------------------------- */
.rel {position: relative;}       /* 相对定位 */
.abs {position: absolute;}       /* 绝对定位 */
.fix {position: fixed;}          /* 固定定位 */

/* -------------------------- 浮动工具类 -------------------------- */
.fl {float: left;}               /* 左浮动 */
.fr {float: right;}              /* 右浮动 */

/* -------------------------- 文本对齐工具类 -------------------------- */
.align {text-align: center;}     /* 居中对齐 */

/* -------------------------- 轮播图样式 -------------------------- */
/* 轮播指示器样式 */
.top-banner .swiper-pagination-bullet {
	background: #fe9c7e;
	width: 12px;
	height: 4px;
	border-radius: 2px;
	margin: 0 8px;
	opacity: 1;
}
/* 轮播激活状态指示器 */
.top-banner .swiper-pagination-bullet-active {width: 18px;}

/* -------------------------- 标题模块样式 -------------------------- */
.title {
    padding: 80px 0 50px 0;
    text-align: center;
}
.title h3 {
    font-size: 26px;
    color: #3b426b;
    padding-bottom: 20px;
    font-weight: 500;
}
.title p {font-size: 18px;color: #5d6494;}
/* 标题下方的按钮样式 */
.title div {
    margin: 30px auto;
    background: linear-gradient(120deg,#2f6df7,#3bdae8);
    font-size: 16px;
    color: #fff;
    width: 126px;
    height: 45px;
    text-align: center;
    line-height: 45px;
    cursor: pointer;
    border-radius: 23px;
    transition: all .2s;
}
.title div:hover {
    box-shadow: 0 10px 14px 0 rgba(23,57,126,.15), 0 4px 8px 0 rgba(30,62,124,.15);
    margin-top: 28px;
    margin-bottom: 32px;
}

/* -------------------------- 隐藏元素工具类 -------------------------- */
.none {display: none!important;}

/* -------------------------- 头部导航样式 -------------------------- */
/* 导航列表项 */
.header li {
    color: #3b426b;
    padding: 0 22px;
    line-height: 32px;
    font-size: 14px;
}
/* 顶层导航项 */
.header .top-li {line-height: 80px;color: #3b426b;}
.header .top-li.active {color: #fb6638;}

/* 页面容器宽度 */
.marginauto {margin: 0 auto;width: 1200px;}

/* 头部菜单容器 */
.head-menu {position: relative;}

/* 头部整体布局 */
.header {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

/* 导航项悬停效果 */
.header li:hover {color: #fb6638;}
.header li:hover .top-li {color: #fb6638;}
.header li:hover .submenu {display: flex;flex-wrap: wrap;}

/* 二级下拉菜单 */
.header li .submenu {
    position: absolute;
    top: 80px;
    left: 0;
    width: 600px;
    background: #fff;
    font-size: 12px;
    padding: 34px 20px 14px 20px;
    z-index: 99;
    border-radius: 4px;
    box-shadow: 0 0 24px rgba(0,0,0,0.1);
    display: none;
}
.header li .submenu li {
    width: 200px;
    box-sizing: border-box;
    padding: 0 0 20px 0;
}
.header li .submenu .head-subtit {
    color: #7d88a2;
    font-size: 12px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 180px;
}
.header li .submenu .head-tit {
    font-size: 14px;
    color: #3b426b;
    padding-bottom: 20px;
    position: relative;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 180px;
}
.header li .submenu .head-tit:after {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 0;
    width: 36px;
    height: 2px;
    background: #fb6638;
}


/* -------------------------- 顶部轮播横幅 -------------------------- */
.top-banner {
	color: #fff;
	width: 100%;
	height: 560px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.top-banner .swiper-container {height: 100%;}
.bannerItem {align-items: center;height: 560px !important;}
.bannerItem img {margin-left: 100px;}
.top-banner .swiper-wrapper {margin-left: 40px;}
.bannerItem h2 {font-size: 30px;margin: 50px 20px 28px 0;font-weight: 500;}
.bannerItem p {font-size: 18px;width: 500px;line-height: 36px;margin-bottom: 30px;}


/* -------------------------- 视频展示区域 -------------------------- */
.video-de {justify-content: center;text-align: center;}
.video-de p {padding-top: 20px;color: #7D88A2;font-size: 14px;}
.video-de video {
    width: 326px;
    margin: 0 40px;
    height: 580px;
    border-radius: 6px;
    box-shadow: 2px 0px 20px #eee;
}

/* -------------------------- 分页组件样式 -------------------------- */
.es-pager {
    position: relative;
    display: inline-block;
    margin: 0;
    margin-top: 10px;
    padding: 0;
}
.es-pager li {
    float: left;
    margin-left: 6px;
    font-size: 12px;
    color: #7D88A2;
    list-style: none;
    line-height: 30px;
    height: 30px;
    border-radius: 4px;
    width: 30px;
    text-align: center;
    border: 1px solid #ccc;
}
.es-pager li a {display: inline-block;color: #7D88A2;text-decoration: none;width: 100%;}
.es-pager li a span {font-size: 14px;vertical-align: middle;}
.es-pager li:hover:not(.splitter):not(.active):not(.record-info):not(.page-info) {
    background: #fb6638;
    border: 1px solid #fb6638;
}
.es-pager li:hover:not(.splitter):not(.active):not(.record-info):not(.page-info) a {color: #fff;}
.es-pager li:active:not(.page-info):not(.record-info), .es-pager li.active {
    background: #fb6638;
    border: 1px solid #fb6638;
}
.es-pager li:active:not(.page-info):not(.record-info) a, .es-pager li.active a {color: #7D88A2;}
.es-pager li.active a {color: #fff;}
.es-pager.round li:first-child {border-bottom-right-radius: 4px;border-top-right-radius: 4px;}
.es-pager.round li:last-child {border-bottom-left-radius: 4px;border-top-left-radius: 4px;}
.es-pager .splitter, .es-pager .record-info, .es-pager .page-info {
    padding: 0 8px;
    line-height: 30px;
    border: none;
    width: auto;
}
.es-pager .pager-info {height: 30px;line-height: 30px;}
.es-pager select, .es-pager input {outline: none;}
.es-pager .currentpage {
    width: 30px;
    height: 30px;
    margin: 1px;
    margin-left: 8px;
    padding: 0 5px;
    text-align: center;
    border: 1px solid #f2f2f2;
    border-radius: 4px;
    color: #7D88A2;
}
.es-pager .pagecount {float: left;height: 30px;line-height: 30px;padding: 0 5px;}
.es-pager .pagesize {border: none;}

/* 不同主题的分页样式 */
.es-pager.success li:active:not(.page-info):not(.record-info), .es-pager.success li.active {background-color: #54c952;}
.es-pager.warning li:active:not(.page-info):not(.record-info), .es-pager.warning li.active {background-color: #ff6e1e;}
.es-pager.danger li:active:not(.page-info):not(.record-info), .es-pager.danger li.active {background-color: #fc5768;}

/* -------------------------- 浮动工具按钮容器 -------------------------- */
.float-wrapper{position: fixed;right: 10px;top: 72%;z-index: 160;cursor: pointer;}







/* 底部全局 + 核心约束：总宽度≤1200px */
.footer{position:relative;width:100%;background:#0a0a12;overflow:hidden;box-sizing:border-box;}
/* 核心容器：总宽度限制1200px + 居中 + 三区布局 */
.footer .marginauto{position:relative;z-index:2;max-width:1200px;width:100%;margin:0 auto;padding:50px 20px 40px;color:#fff;font-size:16px;display:flex;align-items:flex-start;flex-wrap:nowrap;gap:0;overflow-x:hidden;box-sizing:border-box;}
/* 左侧区：Logo+介绍+入口 */
.footer-left-module{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;width:240px;flex-shrink:0;color:#fff;padding:0 15px;box-sizing:border-box;}
/* Logo 样式 */
.footer-logo{margin-bottom:16px;}
.footer-logo img{width:90px;height:auto;}
/* 描述文字样式：自动换行 */
.footer-desc{margin-bottom:20px;font-size:14px;line-height:1.6;color:#ccc;white-space:normal;width:100%;box-sizing:border-box;}
.footer-desc p{margin:0;}
/* 入口链接样式 */
.footer-entry-link{display:inline-block;margin-bottom:10px;font-size:14px;color:#fff;text-decoration:none;transition:color 0.2s ease;}
.footer-entry-link:hover{color:#0088FF;}
/* 竖线分隔符 */
.footer-divider{width:2px;height:260px;background-color:rgba(255,255,255,0.2);margin:0 8px;flex-shrink:0;}
/* 中间区：720px 5个菜单左右均匀均分 */
.footer-middle-group{display:flex;width:720px;flex-shrink:0;justify-content:space-between;padding:0 10px;box-sizing:border-box;}
/* 中间5列自动均分 */
.footer-item{flex:1;padding:0 10px;text-align:left;box-sizing:border-box;}
/* 中间区标题 */
.footer .footer-tit{padding-bottom:15px;font-size:16px;color:#fff;font-weight:600;line-height:1.4;margin-top:0;}
/* 中间区链接文字 */
.footer a p{color:#fff;padding-top:12px;font-size:14px;line-height:1.5;text-decoration:none;margin:0;}
.footer a:hover p{color:#0088FF;transition:color 0.2s ease;}

/* 右侧整体容器 */
.footer-right{width:150px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:0 6px;box-sizing:border-box;}

/* 二维码外层组容器 */
.qr-wrapper-group{display:flex;gap:4px;margin-bottom:6px;justify-content:center;}

/* 单个二维码卡片容器 */
.qr-card{display:flex;flex-direction:column;align-items:center;}

/* 二维码外框样式 */
.qr-wrapper{width:160px;height:160px;background:linear-gradient(145deg,#151522,#0a0a12);border:1px solid #0088FF;border-radius:1px;padding:2px;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;margin-bottom:14px;box-shadow:0 0 15px rgba(0,136,255,0.5);box-sizing:border-box;}

/* 二维码图片 */
.qr-wrapper img{width:100%;height:100%;object-fit:contain;opacity:1;transition:opacity 0.15s ease;}

/* 按钮容器 - 上4下4两行布局 */
.qr-controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;row-gap:8px;max-width:162px;width:162px;}

/* 功能按钮基础样式 */
.qr-btn{width:36px;height:36px;border-radius:1px;background:linear-gradient(145deg,#f0f7ff,#e6f2ff);border:1px solid transparent;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;box-sizing:border-box;overflow:hidden;}

/* 按钮内部图标 */
.qr-btn img{width:24px;height:24px;object-fit:contain;display:block;}

/* 按钮悬浮状态 */
.qr-btn:hover{border-color:#0088FF;box-shadow:0 0 15px rgba(0,136,255,0.3);background:linear-gradient(145deg,#e6f2ff,#d1e7ff);}

/* 按钮选中/激活状态 */
.qr-btn.active{border-color:#0088FF;background:linear-gradient(145deg,#d1e7ff,#bae0ff);}

/* 备用样式（保留不动） */
.footer-img img{width:120px;height:120px;}
.footer-img{margin-left:0;text-align:center;flex-shrink:0;}
.footer-qrcode-group{display:flex;align-items:center;gap:12px;padding:0 5px;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#fff #1c1c25;flex-shrink:0;}
.footer-qrcode-group::-webkit-scrollbar-track,.footer-qrcode-group::-webkit-scrollbar-thumb{background:transparent;border-radius:0;}
.footer:last-of-type{margin-top:-40px;padding-top:0;}
.footer-bottom{position:relative;z-index:2;text-align:center;padding-top:40px;border-top:2px solid rgba(255,255,255,.8);color:#fff;font-size:16px;max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box;}
/* 友情链接+备案号+版权 修复正常 */
.footer .copyright-wrap{background:#0a0a12;padding:10px 20px;box-sizing:border-box;max-width:1200px;margin:0 auto;}
.copyright{font-size:12px;color:#fff;text-align:center;line-height:30px;border-top:1px solid rgba(255,255,255,0.15);padding:10px 0;}
.copyright a{color:#fff;text-decoration:none;}
.copyright a:hover{color:#0088FF;}
.link-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14px;color:#ccc;line-height:28px;padding:6px 0;width:100%;box-sizing:border-box;}
.link-label{margin-right:8px;color:#fff;}
.link-item{color:#ccc;margin:0 8px;white-space:nowrap;text-decoration:none;}
.link-item:hover{color:#00E676;}
.beian-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14px;padding:4px 0;}
.beian-item{display:inline-flex;align-items:center;margin:0 14px;text-decoration:none;white-space:nowrap;color:#1E90FF;}
.beian-item:hover{color:#0088FF;}
.beian-icon{width:16px;height:16px;margin-right:4px;background:center/contain no-repeat;}








/*侧边栏悬浮按钮相关代码*/
.common-float-win div { box-sizing: border-box; }
.common-float-win { position: fixed; z-index: 1000; right: 16px; bottom: 240px; width: 64px; height: auto;}
.common-float-win .common-float-item { width: 64px; height: 64px; border: 1px solid #0088FF; background-color: #ffffff;  background-position: center 12px; background-repeat: no-repeat; border-radius: 0; padding-top: 34px; margin-bottom: 8px; transition: all .2s ease; cursor: pointer; position: relative; box-shadow: 1px 2px 6px rgba(0,0,0,.1); }
.common-float-icon { display: block; margin: 0 auto; transition: all .2s ease; }
.common-float-name { line-height: 17px; font-size: 12px; margin-top: 5px; color: #585e81; text-align: center; transition: color .2s ease; }
.common-float-win .common-float-item:hover { background-color: #fb6638; }
.common-float-win .common-float-item:hover .common-float-name { color: #fff; }
.common-float-item.float-kefu { background-image: url(/default/img/chaticon/kefu.act.webp); }
.common-float-item:hover.float-kefu { background-image: url(/default/img/chaticon/kefu.webp); }
.no-bubble .hover-floatwin { display: none; }
.common-float-item[href] { display: block; box-sizing: border-box; }
.common-float-item.float-fuwuhao { background-image: url(/default/img/chaticon/fuwuhao.act.webp); }
.common-float-item:hover.float-fuwuhao { background-image: url(/default/img/chaticon/fuwuhao.webp); }
.common-float-item.float-wxworker { background-image: url(/default/img/chaticon/wechat.act.webp); }
.common-float-item:hover.float-wxworker { background-image: url(/default/img/chaticon/wechat.webp); }
.common-float-item.float-phone { background-image: url(/default/img/chaticon/phone.act.webp); }
.common-float-item:hover.float-phone { background-image: url(/default/img/chaticon/phone.webp); }
.common-float-item.float-qrcode { background-image: url(/default/img/chaticon/qrcode.act.webp); }
.common-float-item:hover.float-qrcode { background-image: url(/default/img/chaticon/qrcode.webp); }
.common-float-item.back-top { padding: 0; height: 30px; background: #fff;  transition: all .2s ease; border: unset; display: flex; align-items: center; justify-content: center; height: 0; overflow: hidden; }
.common-float-item.back-top.show { height: 30px; }
.common-float-item.back-top:hover { transform: scale(1.04); background: #fff; }
.common-float-item .hover-floatwin { width: 150px; padding: 12px 0; position: absolute; top: 0; left: -162px; border-radius: 0; background: #fb6638; transition: opacity .2s ease; opacity: 0; z-index: -1; }
.common-float-item .hover-floatwin-img { display: block; margin: 0 auto 10px; width: 126px; height: 126px; }
.common-float-item .hover-floatwin-desc { line-height: 21px; color: #ffffff; font-size: 14px; text-align: center; }
.common-float-item:hover .hover-floatwin { opacity: 1; z-index: 1; }