/* 全局通用样式 */
.banner {
    width: 100%;
}
.banner img {
    width: 100%;
}
/* 顶部导航 */
.logo{
	width: 190px;
    height: 34px;
}
.nav-active {
	font-weight: 500;
	color: #094A9B;
}
/* 选中状态的底部蓝色条 - 伪元素实现，宽度小于文字 */
.nav-active::after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 50%;
	height: 0.125rem;
	width: 50%;
	transform: translateX(-50%);
	border-radius: 0.125rem;
	background-color: #094A9B;
	box-sizing: border-box;
}

/* 关于我们*/
.about-bg {
    padding-top: 20px;
    width: 100%;
    background-image: url(../images/关于我们背景图@2x.png);
    background-size: 100% 620px;
    background-repeat: no-repeat;
}
.about-cases {
    display: flex;
    gap: 120px;
    height: 102px;
}
.about-text-num{
    font-size: 40px;
    font-weight: bold;
    transition: font-size 0.3s ease; /* 可选过渡效果 */
}
.dividing-line {
    height: 60px;
    width: 1px;
    margin-top: 6px;
}
.function-max {
    position: relative;
    top: -180px;
}
.function-block {
    width: 294px;
    height: 347px;
    color: #515151;
    /* 外部阴影核心样式 */
    box-shadow: 3px 4px 3px 2px rgba(0, 0, 0, 0.1);
    /* 可选：如果需要让阴影和元素边缘更贴合，可添加圆角（根据需求调整） */
    border-radius: 4px;
    /* 可选：防止阴影被父元素裁剪 */
    overflow: visible;
}
.function-block .icon {
    width: 97px;
    height: 97px;
    margin-bottom: 20px;
}
.function-block .text-xs {
    line-height: 1.4rem;
    font-size: 14px;
}
.bg-zhas {
    background-image: url(../images/软件开发icon.png);
}
.bg-zhhy {
    background-image: url(../images/智慧会议icon.png);
}
.bg-szhgl {
    background-image: url(../images/数字化管理平台icon.png);
}
.bg-rjkf {
    background-image: url(../images/软件开发icon.png);
}


/* 解决方案平铺卡片样式 */
#solutionContainer {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 卡片基础样式：默认小尺寸 */
.solution-card {
    width: 221px; /* 小卡片宽度 */
    height: 552px; /* 小卡片高度 */
    flex-shrink: 0; /* 固定宽度，不被挤压 */
    z-index: 1;
}

/* 激活态（放大）样式 */
.solution-card.active {
    width: 700px;
    height: 552px;
    z-index: 10; /* 放大后层级更高，避免被遮挡 */
}
/* 激活态标题放大 */
.solution-card.active h3 {
    font-size: 28px;
}

/* 解决方案卡片样式补充 */
.solution-card .right-arrow {
    display: none;
    transition: all 0.2s ease;
}
.solution-card.active .right-arrow {
    display: block; /* 激活态显示箭头 */
}

/* 文字样式优化 */
.solution-card p {
    max-width: 98%;
    line-height: 1.4;
    width: 663px;
    height: 73px;
    font-size: 20px;
}

/* 图片适配：确保图片填满容器，不变形 */
.solution-card img {
    object-fit: cover;
}
.solution-text {
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 24px;
    text-shadow: 0px 3px 6px #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

/* 宣传视频选项栏样式 */
.video-left {
    width: 425px;
    padding-top: 10px;
}
.video-item {
    background-color: #F5F5F5;
    color: #515151;
    width: 100%;
    height: 101px;
}
.video-item img {
    width: 71px;
    height: 71px;
}
.video-item h4 {
    font-size: 22px;
}
.video-item p {
    display: none;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: left;
    line-height: 36px;
    font-style: normal;
    text-transform: none;
    margin-left: 18px;
    width: 371px;
}

/* 视频选项激活态 */
.video-item.active {
    height: 204px;
    background: linear-gradient(to right, #004092, #3D84DF);
    color: #FFFFFF;
}
.video-item.active p {
    display: block;
}
.video-item.active .text-gray-500 {
    color: rgba(255,255,255,0.8); /* 选中态描述文字颜色 */
}
.video-item:hover:not(.active) {
    background-color: #ECECEC; /* 未选中态 hover 效果 */
}
.video-right {
    width: 969.5px;
    height: 545.5px;
}

/* 视频播放区域样式 */
#videoCover {
    transition: opacity 0.3s ease;
}
#videoPlayer {
    position: absolute;
    top: 0;
    left: 0;
}

/* 证书样式 */
.certificate-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.certificate-img {
    width: 237px;
}
.certificate-img img {
    height: 338px;
}
.certificate-item2 {
    height: 342px;
    display: flex;
    align-items: center
}
.certificate-img2 {
    width: 393px;
    height: 273px;
}
.certificate-img2 img {
    height: 273px;
}
.certificate-name {
    font-size: 20px;
    margin-top: 40px;
    text-align: center;
    color: #515151;
}        
/* 发展历程 */
.li-height {
	display: flex;
	margin-bottom: 30px;
}
.vertical-line {
	width: 1px;
    height: 100%;
    position: relative;
    right: -12px;
    top: 10px;
    margin-right: -10;
    background-color: #707070;
}
.date {
    display: flex;
    height: 40px;
    line-height: 50px;
    font-size: 28px;
    font-weight: bold;
    color: #003477;
    align-items: center;
}
.origin {
	display: block;
    color: #003477;
    font-size: 40px;
    border: 6px solid #CCDDF8;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    margin-right: 18px;
    background-color: #003477;
}
.liClass {
	margin-left: 40px;
}
.liClass > div {
	display: flex;
    align-items: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.li-origin {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #003477;
	margin-right: 10px;	
}

/* 发展历程 */
/* 发展历程 - 右侧年份列表容器（添加相对定位，用于放置指示线） */
/* 发展历程 - 左侧滚动容器（固化540px高度） */
/* 发展历程样式 */
.history-timeline {
    position: relative;
}

.history-content-item {
    display: none;
}
.history-content-item.active {
    display: block;
}

/* 发展历程文字样式 */
.subtitle-en {
    color: #ABABAB;
    font-size: 20px;
}
.subtitle-cn {
    color: #515151;
    font-size: 30px;
}
.subtitle-more {
    font-size: 16px;
    color: #515151;
    /* 一、核心可点击样式（必备） */
    cursor: pointer; /* 鼠标悬浮时显示手型光标，直观提示可点击 */
    
    /* 二、优化交互反馈（推荐，提升用户体验） */
    /* 1. 悬浮状态样式（鼠标移上去的视觉变化） */
    transition: all 0.2s ease; /* 样式变化平滑过渡，不生硬 */
}

.subtitle-more img {
    width: 17px;
    height: 17px;
    margin-left: 6px;
}
.bg-blue-jk {
    background-color: #004092;
}

.history-timeline {
    position: relative;
    margin: auto;
    max-width: 1500px;
    overflow: hidden; /* 核心：阻止容器整体滚动 */
    height: 540px;
    /* 火狐专属：隐藏整个时间线容器的滚动条 */
    scrollbar-width: none; 
    /* IE/Edge旧版 */
    -ms-overflow-style: none; 
}

/* 左侧内容区（新增的history-content-left类） */
.history-content-left {
    overflow: hidden; /* 裁剪超出内容，根源阻止滚动条 */
    height: 100%; /* 继承父容器高度 */
    /* Webkit（Chrome/Edge/Safari）隐藏滚动条 */
    -webkit-overflow-scrolling: touch;
}

/* 内层内容容器（实际可能产生滚动条的容器） */
.year-content {
    height: 100%;
    overflow: hidden; /* 火狐关键：内层也裁剪，避免产生滚动条 */
    scrollbar-width: none; /* 火狐兜底：隐藏内层滚动条 */
}

/* Webkit内核（Chrome/Edge/Safari）隐藏所有滚动条 */
.history-timeline::-webkit-scrollbar,
.history-content-left::-webkit-scrollbar,
.year-content::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* ========== 火狐终极兜底：强制隐藏滚动条（兼容所有版本） ========== */
@-moz-document url-prefix() {
    .history-timeline,
    .history-content-left,
    .year-content {
        scrollbar-width: none !important; /* 强制隐藏 */
        /* 兜底：将滚动条设为透明（旧版火狐兼容） */
        scrollbar-color: transparent transparent;
    }
    /* 旧版火狐：隐藏滚动条轨道和滑块 */
    .history-timeline scrollbar,
    .history-content-left scrollbar,
    .year-content scrollbar {
        display: none !important;
    }
    .history-timeline scrollbar thumb,
    .history-content-left scrollbar thumb,
    .year-content scrollbar thumb {
        background: transparent !important;
    }
}

.developmentPath-ul {
    width: 1300px;
    height: 540px; /* 强制固化左侧高度 */
    display: flow-root;
    position: relative;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin: 0;
    padding: 0;
}
.developmentPath-ul::-webkit-scrollbar {
    width: 0 !important;
    display: none;
}

/* 右侧容器 - 垂直居中布局（确保年份列表343px垂直居中） */
.choose-date {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中（年份列表本身宽度77px） */
    justify-content: center; /* 垂直居中，使343px列表在父容器中垂直居中 */
    height: 540px; /* 与左侧滚动容器高度一致，实现垂直居中对齐 */
}

/* 右侧年份列表（固化343px高度，限制指示线偏移范围） */
.choose-ul {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 343px; /* 强制固化右侧高度 */
    width: 77px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative; /* 作为指示线的直接参考，确保偏移范围准确 */
}

/* 右侧年份指示线（仅在343px列表内偏移） */
.year-indicator-line {
    position: absolute;
    top: 0;
    left: calc(54px - 2px); /* 对齐li-font-size右侧边框 */
    width: 2px;
    height: 40px; /* 指示线固定高度，可按需调整 */
    background-color: #000000;
    border-radius: 1px;
    transition: top 0.2s ease;
    z-index: 10;
    /* 限制指示线不超出右侧343px列表范围 */
    max-top: calc(343px - 40px);
    min-top: 0;
    max-bottom: 20px;
}

.li-height {
	display: flex;
	margin-bottom: 30px;
}
.vertical-line {
	width: 1px;
    height: 100%;
    position: relative;
    right: -12px;
    top: 10px;
    margin-right: -10;
    background-color: #707070;
}
.date {
    display: flex;
    height: 40px;
    line-height: 50px;
    font-size: 28px;
    font-weight: bold;
    color: #003477;
    align-items: center;
}
.origin {
	display: block;
    color: #003477;
    font-size: 40px;
    border: 6px solid #CCDDF8;
    width: 28px;
    height: 28px;
    border-radius: 14px;
    margin-right: 18px;
    background-color: #003477;
}
.liClass {
	margin-left: 40px;
}
.liClass > div {
	display: flex;
    align-items: center;
    margin-bottom: 10px;
    letter-spacing: 2px;
}
.li-origin {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	background-color: #003477;
	margin-right: 10px;	
}
.year-content {
	display: flex;
    position: relative;
	overflow: visible;
	height: 100%;
	margin-left: 60px;
}
.choose-a {
	font-family: Segoe UI-Regular, Segoe UI;
	color: #9C9C9C;
}
.li-height::before{
    border-bottom:0px;
}
.li-height2 {
	width: 54px;
}
.li-height2:hover,
.li-font-size:hover {
	color: #000000;
	font-size: 20px;
}
.li-font-size {
	color: #000000;
	font-size: 20px;
	width: 54px;
}
.li-range-highlight {
	color: #003477;
	background-color: rgba(204, 221, 248, 0.3);
	border-radius: 4px;
}
.choose-ul::-webkit-scrollbar {
	width: 4px;
	height: 1px;
}
.choose-ul::-webkit-scrollbar-thumb {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #ADADAD;
}
/* 兜底：隐藏视频下载按钮，兼容不支持controlsList的浏览器 */
video::-webkit-media-controls-download-button {
    display: none !important;
}
/* 确保画中画、播放速度控件正常显示 */
video::-webkit-media-controls-picture-in-picture-button {
    display: inline !important;
}
video::-webkit-media-controls-playback-rate-button {
    display: inline !important;
}
/* 原有样式保留 */
#playBtn {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}
#playBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.video-right video,
.video-right img {
    object-fit: cover;
    height: auto;
    max-height: 600px;
}
/* 原有视频区域样式补充（确保视频比例一致） */
.video-right video,
.video-right img {
    object-fit: cover;
    height: auto;
    max-height: 600px;
}
/* 修复播放按钮样式，确保点击区域正常 */
#playBtn {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}
#playBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* 宣传视频结束 */

/* 合作客户 - 核心滚动样式 */
.cases-scroll-container {
    overflow-x: auto;          /* 仅横向滚动 */
    overflow-y: hidden;        /* 隐藏竖向滚动 */
    height: calc(120px * 2 + 2rem); /* 2行高度=卡片高度*2 + 行间距 */
    position: relative;
    -webkit-overflow-scrolling: touch; /* 移动端顺滑滚动 */
    /* 隐藏滚动条（可选，提升视觉） */
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* IE/Edge */
}
/* 隐藏Webkit滚动条（Chrome/Edge/Safari） */
.cases-scroll-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* 合作客户 - 滚动容器（仅隐藏溢出+控制动画） */
.cases-scroll-container {
    overflow: hidden; /* 核心：隐藏溢出的克隆列表，只显示可视区域 */
    height: calc(120px * 2 + 2rem); /* 2行高度=卡片高度*2 + 行间距 */
    position: relative;
}

/* 动画容器（包含原列表+克隆列表，作为动画载体） */
.cases-animate-wrap {
    display: flex; /* 横向排列原列表+克隆列表 */
    flex-direction: column;
    width: fit-content; /* 宽度自适应内容 */
    /* 核心动画：无限横向滚动 */
    animation: scrollX 45s linear infinite; /* 60s完成一次滚动，可调整速度 */
}

/* 定义无限滚动动画（核心：平移单列表宽度） */
@keyframes scrollX {
    0% {
		transform: translateX(0px);
	}
	100% {
		transform: translateX(-4656px);
	}
}

/* 客户列表 - Grid强制2行布局 */
.cases-list {
    display: grid;
    grid-auto-columns: 300px; /* 每列（卡片）宽度300px */
    grid-auto-flow: column; /* 列优先排列（横向） */
    column-gap: 59px;
    width: fit-content; /* 宽度自适应列数 */
}

/* 客户卡片样式 */
.case-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid #eee; */
    border-radius: 8px;
    flex-shrink: 0; /* 禁止卡片收缩 */
}

/* 卡片图片适配 */
.case-item img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain; /* 图片不变形 */
}

/* 保留hover效果 */
.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 动画暂停类（鼠标移入时添加） */
.cases-animate-wrap.paused {
    animation-play-state: paused;
}

/* 废弃原有无效样式 */
#cases > img, .cases-gap {
    display: none;
}


/* 侧边导航 */
.icon-connect {
	width: 50px;
	height: 180px;
	background: #FFFFFF;
	border-radius: 8px 8px 8px 8px;
	opacity: 1;
	border: 1px solid #E1E1E1;
	text-align: center;
}
.icons {
	visibility:hidden;
	position: fixed;
	bottom: 60px;
    right: 0.8rem;
    z-index: 9999;
}
.toparrow {
	width: 52px;
	height: 50px;
	background: #262626;
	border-radius: 8px 8px 8px 8px;
	opacity: 1;
	margin-top: 6px;
}

.toparrow-img {
	width: 40px;
    padding-top: 10px;
    padding-left: 10px;
}
.weixinDiv:hover .wx {
	visibility: visible;
}

.weixin-top {
	float: left;
	margin-top: 20px;
	margin-left: 9px;
	border-bottom: 1px solid #D9D9D9;
	padding-bottom: 4px;
}


/* 底部 */
.divbottom {
	width: 100%;
	height: 350px;
	background: #242424;
	border-radius: 0px 0px 0px 0px;
	opacity: 1;
}

.bottom-text {
	font-size: 16px;
	font-family: PingFang SC-Light, PingFang SC;
	font-weight: 300;
	color: #FFFFFF;
	text-align: center;
	margin-top: 240px;
}

.bottom-img {
	float: left;
	width: 18px;
	height: 18px;
}

.bottom-img3 {
	margin-left: 718px;
	margin-top: -126px;
	float: left;
}

.bottom-text-img {
	margin-top: 25px;
    color: #FFFFFF;
    font-size: 12px;
    display: flex;
    justify-content: center;
	gap: 140px;
	div {
		display: flex;
		justify-content: center;
		gap: 10px;
	}
}

.bottom-text2 {
	margin-top: -17px;
	margin-left: 817px;
}

.divbottom-text {
	font-size: 20px;
	font-family: Microsoft YaHei-Regular, Microsoft YaHei;
	font-weight: 400;
	color: #FFFFFF;
}

.divbottom-text2 {
	font-size: 18px;
	font-family: Microsoft YaHei-Regular, Microsoft YaHei;
	font-weight: 400;
	color: #B3B3B3;
	margin-top: 0.4375rem;
}

.divbottom-text-div {
	float: left;
	margin-top: 67px;
	margin-left: 161px;
}

.divbottom-text-div2 {
	width: 0px;
	height: 107px;
	opacity: 1;
	border: 1px solid #FFFFFF;
	float: left;
	margin-top: 85px;
	margin-left: 163px;
}

.haveTips{
	margin-top: 16px;
}
div.haveTips2,
div.haveTips {
	margin-left: 12px;
	padding-bottom: 16px;
}

div.haveTips::after {
	transform: translate(-124%, 58px);
}
div.haveTips2::after {
	transform: translate(-124%, 61px);
}


div.haveTips2:hover::after,
div.haveTips:hover::after {
	content: attr(tips);
	padding: 5px;
	background-color: #FFFFFF;
	font-size: 19px;
	box-shadow: 0 0 5px #f6f6f8;
	color: #000000;
	min-width: 15em;
	max-width: 1000px;
	height: 56px;
	width: 292px;
	text-align: center;
	border-radius: 18px;
	position: absolute;
	margin-left: 30px;
    margin-top: -110px;
	opacity: 1;
	transition: all 0.5s;
	line-height: 50px;
	box-shadow: 0px 0px 2px #ABABAB;
}

.wx {
	width: 100px;
	max-width:100px;
	height: 100px;
	z-index: 999999;
	position: absolute;
	margin-left: -100px;
	margin-top: 0px;
	visibility: hidden;
}

.weixinDiv {
	height: 40px;
}
.banner-top {
	margin: auto;
	max-width: 1500px;
	position: relative;
	overflow: hidden;
}
.phone {
	font-size: 19px;
	font-family: Microsoft YaHei-Light, Microsoft YaHei;
	font-weight: 300;
	color: #FFFFFF;
	margin-top: 108px;
	margin-left: 1201px;
	font-weight: bold;
}

a {
	text-decoration: none;
}

ul {
	list-style: none;
}

html {
	scroll-behavior: smooth
}

div {
	scroll-behavior: smooth
}

.year-content::-webkit-scrollbar {
	display: none;
	/*隐藏滚轮*/
}

.index-banner-keyboard2::-webkit-scrollbar {
	display: none;
}


.position {
	position: fixed;
	height: 100px;
	width: 1500px;
	left: 0px;
	top: 0px;
	background-color: white;
}