/* 主内容区样式 */
.main {
  padding-top: 35px;
}
.container {
  /* max-width: 1520px;
  margin: 0 auto;
  padding: 0 20px; */
}
.container-part1 {
	margin: 0 auto;
	padding: 125px 0 0;
    /* display: flex;
    justify-content: center;
    margin-top: -28%;
	padding: 0 10%; */
}
.section {
  /* padding: 64px 0 0; */
  /* background: linear-gradient(180deg, #F0F8FA 0%, rgba(255, 255, 255, 0) 30%); */
}

.section-light {
  background: linear-gradient(135deg, #E6F0FF 0%, #F0F9FF 100%);
}
.section-subtitle {
  font-size: clamp(16px, 1vw, 20px);
  color: #252525;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
}

.part1{
	/* background-image: url('../image/15.png'); */
	min-height: 776px;
	background: linear-gradient(180deg, #E4F1FE 0%, rgba(228, 241, 254, 0) 100%);
	/* background-size: cover; */
	/* background-position: center; */
	/* background-repeat: no-repeat; */
	width: 100%;
	/* padding-top: 40%; */
	position: relative;
}
.part1-play{
	width:20px;
	height:20px;
}
.flex-container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	/* max-width: 1520px; */
    margin: 0 auto;
}
.flex-container-part1 {
	max-width: 720px;
	margin: 0 auto;
}
.flex-item-part1 {
	display: flex;
    justify-content: center;
    align-items: center;
	margin-top: 22px;
    gap: 28px;
}
.btn1{
	width: max-content;
	height: 48px;
	border-radius: 8px;
	position: relative;
	background: transform;
	overflow: hidden; /* 关键，让伪元素的圆角被裁切 */
	padding: 10px;
	align-items: center;
    display: flex;
}
.btn1::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* 等于你原来 border 的宽度 */
  border-radius: 8px;
  background: linear-gradient(91deg, #42B4FF 0%, #6F66F9 99%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.flex-item-part1 a{
	text-decoration: none;
}
.btn1 p{
	font-size: clamp(16px, 1vw, 20px);
	font-weight: bold;
	background: linear-gradient(90deg, #42B3FF 1%, #6F65F9 93%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
}
.btn2{
	width: max-content;
	height: 48px;
	border-radius: 8px;
	background: linear-gradient(90deg, #41B5FF 1%, #7064F9 99%);
	display:flex;
	
	font-size: clamp(16px, 1vw, 20px);
	font-weight: bold;
	color: #FFFFFF;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    cursor: pointer;
	padding: 10px;
}
.part1-image1{
	width: 827px;
	height: 640px;
	object-fit: contain;
	position: absolute;
    right: 0;
	z-index: -1;
}
.part1-image2{
	/* width: 100%; */
	width: 100%;
    max-width: 640px;
	height: 674px;
	object-fit: cover;
	position: absolute;
    left: 0;
	bottom: 0;
	z-index:-1;
}
.part1-card{
	display: flex;
    justify-content: center;
    gap: 50px;
	margin-top: 97px;
    flex-wrap: wrap;
	padding: 0 10%;
}
.card-item{
	text-align: center;	
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	width: 268px;
	height: 330px;
	border-radius: 12px;
	position: relative;	
	background: transform;
	overflow: hidden; /* 关键，让伪元素的圆角被裁切 */
	border: none;
	/* transition: all 0.3s ease; */
}
/* .card-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
} */
.card-item::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* 等于你原来 border 的宽度 */
  border-radius: 12px; 
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.card-item-label{
	font-size: clamp(16px, 1.05vw, 20px);
	font-weight: 600;
	color: #333333;
	padding: 30px 20px 8px;
}
.card-item-description{
	font-size: 14px;
	color: #3D3D3D;
	padding: 0 20px;
}
.part1-card1{
	background: #F3F9FF;
}
.part1-card1::before{
	background: linear-gradient(220deg, #5F5AEB 0%, #32D1EB 102%);
}
.part1-card2{
	background: #FFFCF4;
}
.part1-card2::before{
	background: linear-gradient(220deg, #FFD25A -1%, #F9C79F 102%);
}
.part1-card3{
	background: #F4FDFF;
}
.part1-card3::before{
	background: linear-gradient(220deg, #7089FF 0%, #FFB6DE 102%);
}
.part1-card4{
	background: #F5F5FF;
}
.part1-card4::before{
	background: linear-gradient(220deg, #7089FF 0%, #FFB6DE 102%);
}

.part2{
	position:relative;
	height: 800px;
	padding: 0 5%;
}
.part2-title{
	text-align: left;
}
.part2-title-lable{
	font-size: clamp(24px, 1.67vw, 32px);
	font-weight: bold;
	color: #3370FF;
}
.part2-title-description{
	font-size: clamp(20px, 1.67vw, 32px);
	color: #252525;
}
.part2-right{
	display: grid;
    gap: 30px;
    margin-right: 0%;
    margin-top: 50px;
	justify-items: center;
    width: 100%;
}
.part2-image1{
	width: 835px;
	height: 800px;
	object-fit: fill;
	position: absolute;
    left: 0;
    top: 0;
	z-index:-1;
}
.part2-image2{
	width: clamp(300px, 40vw, 674px);
    height: auto;
    max-height: 430px;
	object-fit: contain;
	/* position: absolute; */
    /* right: clamp(50px, 8vw, 150px); */
	/* z-index:-1; */
}
.part2-item{
	display:flex;
	width: max-content;
    padding: 0px 20px;
	height: 90px;
	border-radius: 0px 64px 64px 0px;
	opacity: 1;
	background: linear-gradient(271deg, #E0F2FD 0%, #FFFFFF 99%);
	justify-content: flex-end;
    align-items: center;
    text-align: left;
    gap: 20px;
	/* transition: all 0.3s ease; */
}
/* .part2-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
} */
.part2-item-image{
	width:20px;
	height:20px;
}
.part2-item-title{
	font-size: clamp(16px, 1vw, 22px);
	font-weight: 500;
	color: #252525;
}
.part2-item-description{
	font-size: clamp(14px, 0.83vw, 16px);
	color: #7E8495;
}
.part2-left1{
	margin-left: 15%;
}
.part2-left2{
	margin-left: 30%;
}
.part2-left3{
	margin-left: 45%;
}
.part2-left4{
	margin-left: 25%;
}
.part3{
	min-height: 710px;
	background: linear-gradient(180deg, #E4F1FD 0%, #FFFFFF 100%);
    flex-wrap: wrap;
	text-align: end;
	height: auto;
	gap: 110px;
	margin-top: -2px;
    justify-content: space-evenly;
    padding: 0 15%;
}
.flex-item-part3{
    display: grid;
    justify-content: center;
	/* min-width: 450px; */
    /* padding: 0 70px; */
}
.feature-title {
	font-size: clamp(24px, 1.9vw, 38px);
	font-weight: bold;
	color: #3370FF;
	text-align: left;
}
.feature-description {
  font-size: clamp(16px, 1.05vw, 20px);
  color: #252525;
  margin-bottom: 53px;
  text-align: left;
}
.feature-card-3 {
	padding: 0;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.feature-card-content {
  display: flex;
  gap: 12px;
}
.feature-card-icon-3 {  
    padding: 16px 16px 16px 0px;
	color: #165DFF;  
}
.p2-image{
	width:27px;
	height:27px;
}
.feature-card-txt{
	border-bottom: 1px solid #B2B2B2;
}
.feature-card-title {
	font-size: clamp(16px, 1vw, 22px);
	font-weight: 600;
	margin-bottom: 4px;
	text-align: left;
}
.feature-card-text {
  font-size: clamp(16px, 0.83vw, 16px);
  color: #6B7280;
  text-align: left;
}
.flex-item {
	flex: 1;
	min-width: 300px;
	padding: unset;
    display: grid;
    justify-content: center;
}
.part3-image{
	width: 100%;
	max-width: 636px;
	height: auto;
	object-fit: contain;  
}
.part3-btn{
	width: 170px;
	height: 52px;
	border-radius: 8px;
	background: linear-gradient(90deg, #41B5FF 1%, #7064F9 99%);
	font-size: clamp(16px, 1.05vw, 20px);
	color: #FFFFFF;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
	cursor: pointer;
	text-decoration: none;
	margin-top: 20px;
}
.part7-btn{
	width: 170px;
	height: 52px;
	border-radius: 8px;
	background: linear-gradient(90deg, #41B5FF 1%, #7064F9 99%);
	font-size: clamp(16px, 1.05vw, 20px);
	color: #FFFFFF;
	display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
	cursor: pointer;
	text-decoration: none;
}
.part3-btn-image{
	width: 9px;
	height: 13px;
}


.hero-title {
	font-size: clamp(32px, 5vw, 96px);
	font-weight: bold;
	line-height: normal;
	text-align: center;
	letter-spacing: 0em;
	background: linear-gradient(83deg, #4AE4FF 3%, #3F4BE7 70%, #AD6CE6 98%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	margin-top: 16px;
}
.hero-text{
	font-size: clamp(16px, 1.25vw, 24px);
	background: linear-gradient(86deg, #49E4FF 0%, #4168EC 35%, #AB6BE6 98%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-fill-color: transparent;
	text-align: center;
}
.hero-label {
	padding: 0 14px;
	margin-bottom: 6px;
	position: relative;
	width: max-content;
	height: 57px;
	border-radius: 8px;
	background: transform;
	overflow: hidden; /* 关键，让伪元素的圆角被裁切 */
	font-size: clamp(16px, 1.25vw, 24px);
	font-weight: bold;
	color: #377CFE;
	line-height: 57px;
}
.hero-label::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 2px; /* 等于你原来 border 的宽度 */
  border-radius: 8px;
  background: linear-gradient(90deg, #41B4FF 0%, #7067F9 101%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.part4 {
	width: 100%;	
    margin: 0 auto;
	background: #FFFFFF;
	padding: 54px 0 0;
	text-align: center;
}
.part4-title{
	font-size: clamp(24px, 4.48vw, 48px);
	font-weight: bold;
	color: #377CFE;
}
.part4-sub-title{
	font-size: clamp(16px, 1.25vw, 24px);
	color: #3D3D3D;
	padding: 2px 0 13px;
}
.part4-image{
	width: 100%;
	height: auto;
	object-fit:contain;
	padding: 0 15%;
}

.part5{
	width: 100%;
	background: linear-gradient(180deg, #E4F1FD 0%, #FFFFFF 100%);
	padding: 70px 0 59px;
}
.part5-image{
	width: 100%;
	height: auto;
	object-fit:contain;
	padding: 0 15%;
}

.part6{
	width: 100%;
	background: #FFFFFF;
	padding: 0px 0 60px;
}
.part6-image{
	width: 100%;
	height: auto;
	object-fit:contain;
	padding: 0 15%;
}
.part7{
	width: 100%;
	background: #F8FAFC;
	display: flex;
    justify-content: center;
    align-items: center;
    padding: 64px 10%;
	flex-wrap: wrap;
}
.part7-left{
	text-align: left;
	padding: 0 0px 0 65px;
	max-width: 800px;
}
.part7-image{
	width: 100%;
	max-width: 490px;
	height: auto;
	object-fit:contain;
}
.part7-title{
	font-size: clamp(24px, 4.48vw, 48px);
	font-weight: bold;
	color: #377CFE;
	text-align: left;
}
.part7-sub-title{
	font-size: clamp(16px, 1.25vw, 24px);
	color: #3D3D3D;
	text-align: left;
    padding: 36px 0 87px;
}

/* 响应式设计 */
@media (max-width: 1750px) {
	.part2-left1{
		margin-left: 30%;
	}
	.part2-left2{
		margin-left: 45%;
	}
	.part2-left3{
		margin-left: 60%;
	}
	.part2-left4{
		margin-left: 50%;
	}
}
@media (max-width: 1620px) {
	.part2-image1{
		left: -2%;
	}
	.part2-image2 {
		width: clamp(300px, 31vw, 674px);
	}
}
@media (max-width: 1620px) {
	.part2-image2{
		margin-bottom: 8%;
	}
	.part2-right{
		margin-top: 60px;
	}
}
@media (max-width: 1350px) {
	.part2-image1{
		left: -5%;
	}
	.part2-right{
		margin-top: 80px;
	}
}
@media (max-width: 1280px) {
	.part2-image1{
		left: -8%;
	}
	.part2-right{
		margin-top: 90px;
	}
}
@media (max-width: 1210px) {
	.part2-image1{
		left: -10%;
	}
	.part2-right{
		margin-top: 100px;
	}
}
@media (max-width: 1200px) {	
	/*  */
	.part3{
		margin-top: -2px;
		gap: 0px;
	}
	.flex-item-part3{
		padding: 64px 5% 20px;
	}
	.the-part3-btn{
		display:none;
	}
	.feature-title,.feature-description{
		text-align: center;
	}
	.part4-image,.part5-image,.part6-image{
		padding: 0 10%;
	}
}
@media (max-width: 1160px){
	.part2-image1{
		left: -15%;
	}
}
@media (max-width: 1100px){
	.part2-image2{
		display: none;
	}
	.part2-image1{
		left: -9%;
	}
	.part2-left1{
		margin-left: 5%;
	}
	.part2-left2{
		margin-left: 20%;
	}
	.part2-left3{
		margin-left: 35%;
	}
	.part2-left4{
		margin-left: 40%;
	}
	.part2-left0{
		margin-right: 35%;
	}
}
@media (max-width: 980px){	
	.part2-image1{
		left: -20%;
	}	
}
@media (max-width: 850px){	
	.part2-image1{
		left: -25%;
	}	
}
@media (max-width: 800px){	
	.part2-image1{
		left: -30%;
	}
	.part2{
		margin-top: -15%;
	}
}
@media (max-width: 768px) {
	.part2{
		justify-content: center;
		margin: 0 auto;
		padding: 40px 5%;
		max-height: 800px;
		height: auto;
	}
	.part2-right{
		margin: 0 auto;
	}
	.part3{
		padding: 0 5%;
	}
	.part3-image,.part4-image,.part5-image,.part6-image{
		padding: 20px 5% 0;
	}
	.part2-left1,.part2-left2,.part2-left3{
		margin-left: 0;
		width: fit-content;
	}
	.part2-left4{
		margin-left: 0;
	}
	.part2-image1{
		display:none;
	}
	.part2-title{
		text-align: center;
		margin-right: 0;
	}
	.part4{
		padding: 20px 0 0;
	}
	.part5{
		padding: 40px 5% 40px;
	}
	.part6{
		padding: 0 5% 40px;
	}
	.part7{
		padding: 40px 10%;
	}
	.part7-left{
		padding: 0;
	}
	.part7-title{
		text-align: center;
	}
	.part3-btn,.part7-btn{
		margin: 0 auto;
	}
	.part1-image2{
		object-fit: cover;
	}

  
  .section-title {
	font-size: clamp(16px, 1.25vw, 24px);
  }
  
  .flex-container {
	flex-direction: column;
  }  
	.part7-sub-title{
		padding: 20px 0 20px;
	}
	.part4-sub-title{
		padding: 12px 0 0px !important;
	}
	.flex-item-part3 {
        padding: 20px 5% 20px;
    }
	.part3-btn{
		margin: 8px auto 0;
	}
	.part4-btn{
		margin: 10px auto 0 !important;
	}
}

/* 1. 弹窗遮罩层：覆盖整个视口，半透明背景 */
.popup-overlay {
	display: none; /* 默认隐藏 */
	position: fixed; /* 固定在视口，不随滚动变化 */
	top: 0;
	left: 0;
	width: 100vw; /* 视口宽度100% */
	height: 100vh; /* 视口高度100% */
	background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明，遮挡底层内容 */
	z-index: 999; /* 确保遮罩在其他内容之上 */
	justify-content: center; /* 水平居中弹窗 */
	align-items: center; /* 垂直居中弹窗 */
}

/* 2. 弹窗表单容器：白色背景，固定宽高，居中显示 */
.popup-form {
	width: 400px; /* 表单宽度，可根据需求调整 */
	padding: 30px;
	background-color: #fff; /* 白色背景，匹配图片样式 */
	border-radius: 8px; /* 轻微圆角，优化视觉 */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影，增强层次感 */
}

/* 3. 表单标题：匹配图片"申请免费体验" */
.popup-form h3 {
	text-align: left; /* 标题居中 */
	margin: 0 0 25px; /* 底部留间距，分隔标题与输入框 */
	font-size: 18px;
	color: #333;
}

/* 4. 表单输入组：控制输入框布局，垂直排列 */
.form-group {
	margin-bottom: 20px; /* 输入框之间的间距 */
}

/* 5. 输入框样式：匹配图片的"请输入..."提示 */
.form-group input {
	width: 100%; /* 输入框占满容器宽度 */
	padding: 12px 15px; /* 内边距，让输入更舒适 */
	border: 1px solid #ddd; /* 灰色边框 */
	border-radius: 4px; /* 轻微圆角 */
	box-sizing: border-box; /* 确保padding不撑大宽度 */
	font-size: 14px;
	color: #666;
}

/* 6. 输入框提示文字样式（placeholder） */
.form-group input::placeholder {
	color: #999; /* 浅灰色提示文字，匹配图片视觉 */
}

/* 7. 提交按钮样式：居中、深色背景 */
.submit-btn {
	width: 100%; /* 按钮占满宽度 */
	padding: 12px;
	background-color: #3370FF; /* 深色背景，突出按钮 */
	color: #fff; /* 白色文字 */
	border: none; /* 去掉默认边框 */
	border-radius: 4px;
	font-size: 16px;
	cursor: pointer; /* 鼠标悬浮时显示"手"形，提示可点击 */
}

/* 8. 提交按钮 hover 效果：优化交互体验 */
.submit-btn:hover {
	background-color: #165dff; /*  hover时背景加深 */
}

/* 9. 原有按钮样式（若需优化点击交互） */
.part3-btn,.part7-btn {
	cursor: pointer; /* 提示按钮可点击 */
}