

.header-section {
	background: url('../img/cp_bg_01.png ') no-repeat center center fixed;
	background-size: cover;
	padding: 175px 0;
}



.container {
	width: 80%;
	margin: auto;
	
	overflow-x: hidden;
}
.header-section .container{
	margin-top:50px;
}



/* 支付中台产品板块 */
.payment-product {
	margin: 80px 0;
}

.product-section {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	justify-content: space-between;
	align-items: center;     /* 垂直居中 */
}

.product-text {
	width: 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 500px;
}
.product-text p{
	font-size: 30px;
	font-weight: bold;	
	-webkit-animation: fadeInLeft 1s ease 0.3s forwards;
}


.product-image {
	width: 45%;
	text-align: right;
}

/* 价值展示板块 */
.value-section {
	background: var(--light-gray);
	padding: 80px 0;
}
.value-cards {
display: flex;
justify-content: space-between; /* 元素间等距分布 */
flex-wrap: wrap; /* 自动换行 */
gap: 12px; /* 元素间距 */
}

.value-card {
	background: white;
	padding: 30px;
	border-radius: 15px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	margin-bottom: 12px;
	width: calc(33.33% - 72px);
	text-align: center;
	transition: transform 0.4s;
}
.value-card:hover{
	transform: translateY(-10px);
}

.value-card i {
	font-size: 24px;
	margin-right: 10px;
}

.value-card h3 {
	color: var(--primary-color);
	margin-bottom: 15px;
}

.value-card p,span {
	line-height: 1.6;
	-webkit-animation: fadeInRight 1s ease 0.3s forwards;
}

/* Tab切换样式 */
.tab-container {
	margin: 80px 0;
	text-align: center;
}

.tab-buttons {
	display: flex;
	justify-content: center;
	margin-bottom: 40px;
}

.tab-button {
	padding: 12px 30px;
	margin: 0 10px;
	background: none;
	border: none;
	font-size: 18px;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
}

.tab-button.active {
	color: var(--primary-color);
}


.enhancement-tab-button.active::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 0;
	width: 100%;
	height: 3px;
	background: var(--primary-color);
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}

/* 增值服务板块 */
.enhancement-section {
	display: flex;
	gap: 40px;
}


 /* 服务保障板块 */
 .service-section {
	display: flex;
	gap: 40px;
}

.service-tabs {
	width: 30%;
}


/* 下划线*/
.value-card h3.with-divider {
position: relative; /* 为伪元素定位 */
display: flex;            /* 让图标和文字一行显示 */
  align-items: center; 

}

.solution-button {
	background: #f18b09;
    color: white;
    padding: 15px 40px;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    margin-top: 30px;
	transition: transform 0.4s;
}
.solution-button:hover{
	
	transition: all 0.3s ease;
	box-shadow: 0 6px 10px 0 rgba(245, 144, 2, 0.6);
}

@media (max-width: 992px) {
	.value-card {
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.product-text,.product-image{
		width: 100%;
		height: auto;
		text-align: center;
	}

	/*移动端tab切换效果*/
	.service-wrapper {
		flex-direction: column;
	  }
	
	  .tab-nav {
		width: 100%!important;
		margin-bottom: 16px;
	  }
	
	  .service-content {
		width: 100%!important;
	  }
	
	  .tab-nav .service-tab-button {
		padding: 12px 16px;
		font-size: 16px;
	  }
	  
	}

.value-card h3.with-divider::after {
content: ''; /* 必填属性 */
position: absolute;
left: 50%; /* 水平居中 */
transform: translateX(-50%); /* 精准居中 */
bottom: -10px; /* 距离标题的间距 */
width: 100%; /* 线条长度 */
height: 1px; /* 线条厚度 */
background: #0b0b0b; /* 线条颜色（橙色） */
}

/* 基元素 */
.value-card:nth-of-type(odd) h3 {
	color: blue;
  }
/* icon元素 */
.value-card h3.with-divider::before ,.support-card span.icon::before{
	content: "";
	display: inline-block;
	width: 1.17em;
	height: 1.17em;
	margin-right: 8px;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	text-align: left;
  }
  .value-card h3[data-icon="icon-1"]::before {
	background-image: url("../img/icon-1.svg");
  }
  .value-card h3[data-icon="icon-2"]::before {
	background-image: url("../img/icon-2.svg");
  }
  .value-card h3[data-icon="icon-3"]::before {
	background-image: url("../img/icon-3.svg");
  }
  .value-card h3[data-icon="icon-4"]::before {
	background-image: url("../img/icon-4.svg");
  }
  .value-card h3[data-icon="icon-5"]::before {
	background-image: url("../img/icon-5.svg");
  }
  .value-card h3[data-icon="icon-6"]::before {
	background-image: url("../img/icon-6.svg");
  }


/*-- 分账模式 */
.fz,.service-tab-container{
	padding:80px 0;
}
.fz p{
	text-align: center;
	-webkit-animation: fadeInDown 1s ease 0.3s forwards;
}

/**/
.enhancement-tab-container { 
	background: var(--light-gray);
	padding: 80px 0;
}



/*服务保障*/
.tab-nav {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 30%;
  }	
.tab-nav .service-tab-button{
	text-align: left;
	border-radius: 5px;
	display: flex;
    align-items: center;
	width: 80%;
	justify-content: flex-start;
	
}
.tab-nav .service-tab-button.active{
	background-image: linear-gradient(to right, #f18b0a, #f8b43a);
	color: #ffffff;
}
.service-tab-container .service-content{
	width: 60%;
}
/* icon元素 */
.tab-nav button.service-tab-button::before {
	content: "";
	display: inline-block;
	width: 1.17em;
	height: 1.17em;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-size: contain;
	vertical-align: middle;
	text-align: left;
  }
  .tab-nav button[data-icon="icon-1"]::before {
	background-image: url("../img/fw_4_1.svg");
  }
  .tab-nav button[data-icon="icon-2"]::before {
	background-image: url("../img/fw_3_1.svg");
  }
  .tab-nav button[data-icon="icon-3"]::before {
	background-image: url("../img/fw_2_1.svg");
  }
  .tab-nav button[data-icon="icon-4"]::before {
	background-image: url("../img/fw_1_1.svg");
  }

  .tab-nav button.active[data-icon="icon-1"]::before {
	background-image: url("../img/fw_4_2.svg");
  }
  .tab-nav button.active[data-icon="icon-2"]::before {
	background-image: url("../img/fw_3_2.svg");
  }
  .tab-nav button.active[data-icon="icon-3"]::before {
	background-image: url("../img/fw_2_2.svg");
  }
  .tab-nav button.active[data-icon="icon-4"]::before {
	background-image: url("../img/fw_1_2.svg");
  }
