@charset "utf-8";
/* CSS Document */
.ab_con .about_1 {
	padding-bottom:  1.2rem;
}

.ab_con .about_1 .breadcrumb{margin: 0.8rem 1.3rem 0.8rem 1.3rem}
.ab_con .about_1 .pic {
	width: 100%;
	height: 30vw;
	position: relative;
	margin-bottom: 0.5rem
}
.ab_con .about_1 .pic img {
	width: 100%;
	height: 100%;
	object-fit: cover
}
.ab_con .about_1 .list {
	padding: 0 2.8rem;
	display: flex;
	justify-content: space-between
}

.ab_con .about_1 .list .h {
	color: #606060;
	line-height: 1.167;
	margin-bottom: 0.2rem;
	font-weight: 400
}

.ab_con .about_1 .list .solid {
	width: 0.3rem;
	height: 0.04rem;
	margin-bottom: 0.15rem;
	display: none
}

.ab_con .about_1 .list .p {
	color: #7a7a7a;
	font-weight: 400;
	line-height: 1.8
}
.ab_con .about_2 {
	padding: 1.2rem 2.8rem 1rem 2.8rem;
	text-align: center;
	background-color: #f9f9f9
}

.ab_con .about_2 .top {
	margin-bottom: 0.5rem
}

.ab_con .about_2 .top .h {
	line-height: 1.3;
	margin-bottom: 0.3rem;
}

.ab_con .about_2 .top svg {
	width: 0.73rem;
	height: 0.09rem;
	margin: 0 auto;
	margin-bottom: 0.4rem
}

.ab_con .about_2 .top .p {
	line-height: 1.8;
	font-weight: 400;
	margin-bottom: 0.36rem
}

.ab_con .about_2 .pic {
	width: 100%;
	position: relative;
	margin-bottom: 0;
	background-color: #000;border-radius: 0.15rem;
	overflow: hidden;
}

.ab_con .about_2 .pic>img {
	width: 100%;
	opacity: 1
}

.ab_con .about_2 .pic.on>img {
	opacity: 0
}

.ab_con .about_2 .pic.o1>img {
	opacity: 0
}

.ab_con .about_2 .pic>video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/* height: 100%;
	object-fit: cover; */
	opacity: 0;
	transition: all 0.5s;
	padding-right: 0;
	cursor: pointer
}

.ab_con .about_2 .pic.on>video {
	opacity: 1;
	pointer-events: all
}

.ab_con .about_2 .pic.o1>video {
	opacity: 1
}

.ab_con .about_2 .pic .btn {
	position: absolute;
	right: 1rem;
	bottom: 0.8rem;
	width: 0.36rem;
	height: 0.36rem;
	cursor: pointer;
	transition: all 0.5s;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: 4px
}

.ab_con .about_2 .pic .btn img {
	width: 0.2rem;
	height: 0.2rem;
	object-fit: contain
}

.ab_con .about_2 .pic .btn img.img2 {
	display: none
}

.ab_con .about_2 .pic.on .btn img.img1 {
	display: none
}

.ab_con .about_2 .pic.on .btn img.img2 {
	display: block
}

.ab_con .about_2 .pic.o1 .btn {
	opacity: 0
}

.ab_con .about_2 .p1 {
	color: #666;
	line-height: 1.8;
	font-weight: 200
}

.section.alt { background: var(--gray-light); }
.sec-head { text-align: center; max-width: 700px; margin: 0 auto 60px; }
.sec-head h2 { color: var(--dark); font-weight: 300; margin-bottom: 0.2rem; }
/* ---------- 数字统计 ---------- */
.stats { background-image: url(../images/xadvantage.jpg); background-repeat: no-repeat; background-size: cover; padding: 64px 0; position: relative; overflow: hidden; }
.stats::before {
  content: ""; position: absolute; inset: 0;
}
.stats-grid { margin: 0.8rem 1.3rem 0.8rem 1.3rem;position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-num { font-weight: 400; color: var(--primary); line-height: 1.2; }
.stat-num small { font-size: 22px; margin-left: 2px; }
.stat-label { color: #c9c9c3; font-size: 15px; margin-top: 8px; }
/* 发展历程时间轴（年份切换） */
.timeline-wrap { background: var(--gray-light); padding: 1.2rem 2.8rem 1rem 2.8rem; }
.timeline-years {
  display: flex; gap: 4px; overflow-x: auto;
  padding-bottom: 6px; margin-bottom: 48px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.timeline-years::-webkit-scrollbar { height: 4px; }
.timeline-years::-webkit-scrollbar-thumb { background: var(--gray); border-radius: 2px; }
.year-tab {
  flex-shrink: 0; background: none; border: none; cursor: pointer;
  font-size: 26px; font-weight: 300; color: var(--text-light);
  padding: 8px 18px; font-family: inherit; position: relative;
  transition: color .25s;
}
.year-tab::after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%) scaleX(0);
  width: 28px; height: 3px; border-radius: 2px;
  background: var(--primary); transition: transform .25s;
}
.year-tab:hover { color: var(--dark); }
.year-tab.active { color: var(--primary); }
.year-tab.active::after { transform: translateX(-50%) scaleX(1); }
.timeline-stage {
  background: #fff; border-radius: 0.15rem; box-shadow: var(--shadow);
  overflow: hidden; display: flex; min-height: 320px;
}
/* 历程配图区 */
.timeline-visual {
  flex: 0 0 340px; position: relative;
  background: linear-gradient(150deg, #33332e, #4d4c45);
  overflow: hidden;
}
.timeline-visual::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
}
.timeline-visual::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(circle at 32% 28%, rgba(255,162,0,.28), transparent 62%);
}
.tl-figure {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(.92);
  transition: opacity .5s ease, transform .5s ease;
  pointer-events: none; z-index: 2;
}
.tl-figure svg { width: 132px; height: 132px; }
.tl-figure.active { opacity: 1; transform: scale(1); }
.tl-figure.active svg { animation: figurePop .6s ease; }
@keyframes figurePop {
  0% { transform: scale(.8); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.timeline-year-big {
  flex: 0 0 240px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, #33332e, #4d4c45);
  position: relative;
}
.timeline-year-big::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 30% 25%, rgba(255,162,0,.3), transparent 55%);
}
.timeline-year-big span {
  position: relative; z-index: 2;
   font-weight: 400; color: var(--primary);
  letter-spacing: 2px; line-height: 1.15; text-align: center;
}
.timeline-body { flex: 1; padding: 46px 52px; display: flex; flex-direction: column; justify-content: center; }
.timeline-body h4 {  color: var(--dark); font-weight: 400; margin-bottom: 14px; }
.timeline-body p { color: var(--text-light); font-weight: 300; max-width: 560px; }
.timeline-nav {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px;
}
.timeline-nav button {
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  border: 1.5px solid var(--gray); background: #fff;
  font-size: 17px; color: var(--dark); cursor: pointer; transition: all .25s;
}
.timeline-nav button:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.fade-swap { animation: fadeSwap .45s ease; }
@keyframes fadeSwap {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}