*{margin: 0;padding: 0;box-sizing: border-box;}

.wrapper{width: 1300px;margin: 0 auto;}
.part1{background: url(../img/bg-01.jpg) center/cover no-repeat ;height: 800px;}

.logo{ position: absolute; top:20px; }

/****头部banner*****/
.header-banner{ position: relative; }
.header-banner-left{ padding-top: 180px; width: 45%; }
.animation-box1 { animation: slideInFromLeft 1s ease-out forwards; }
.animation-box2{ margin-top: 40px; animation: fadeIn 1s ease-out 1s forwards; /* 延迟1秒开始 */ opacity: 0; /* 初始状态为透明 */ }
.animation-box3{ margin-top: 90px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; animation: fadeInUp 1s ease-out 2s forwards; /* 延迟2秒开始 */ opacity: 0; /* 初始状态为透明 */ }
.animation-box3 .stat-item { opacity: 0; animation: fadeInUp 0.8s ease-out forwards; }

/* 设置每个统计项的不同延迟时间 */
.animation-box3 .stat-item:nth-child(1) { animation-delay: 1.2s; }
.animation-box3 .stat-item:nth-child(2) { animation-delay: 2.4s; }
.animation-box3 .stat-item:nth-child(3) { animation-delay: 2.6s; }
.stat-item{ display: inline-flex; flex-direction: column; }
.stat-item .stat-number{ font-size: 2.8rem; font-weight: 700; margin-bottom: .5rem; color: #d12c34; background: linear-gradient(45deg, #fd4453, #e4434b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-item .stat-label{ font-size: 18px; color: #242424; }    
.header-banner-right{ background: url(../img/banner-computer.png) left bottom no-repeat; width: 600px; height: 650px; position: absolute; top:60px; right:150px; }

.animation-box4{ position: absolute; animation: floatUpDown 3s ease-in-out infinite; top:60px; right:-160px; }

.service-code{ position: absolute; right:10px; bottom: 0px; z-index: 111; }
.code-li{ width:160px; height: 160px; padding:5px; border-radius: 5px; border:1px solid #e8e8e8; 
display: inline-block; background-color: #fff; transition: all .3s; }
.code-li + .code-li{ margin-left: 15px; }
.service-code img{ width:150px; height: 150px; }
.code-li:hover { transform: scale(1.1);}

/*********************************痛点**************/
.mt80{margin-top: 80px;}
.part2,.part3,.part4{padding-bottom:70px;}
.part2{ background: #f8faff url(../img/part2-bg.png) center top no-repeat;}
/*******轮播图******/
.carousel{ margin-top: 40px;position:relative;}
#slider-wrap{
	position:relative;
	overflow:hidden;
	transition: all .3s;
}

#slider-wrap ul#slider{
	width:100%;
	height:100%;	
	position:absolute;
	top:0;
	left:0;		
}

#slider-wrap ul#slider li{
	float:left;
	position:relative;
		list-style: none;
}
#slider-wrap ul#slider li img{ border-radius: 10px;}
#slider-wrap,#slider-wrap ul#slider li,#slider-wrap ul#slider li img{width: 670px;height:385px }
.animated{opacity: 0; }
/*btns*/
.btns{
	position:absolute;
	padding:10px 2px;
	top:45%;
	cursor:pointer;	
	background:rgba(0,0,0,0.3);
	z-index:100;
	transition: all 0.1s ease;
}

.btns:hover{
	background:rgba(0,0,0,0.6);	
}
.btns img{ width: 40px;}
#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 0px;}
#counter{
	top: 30px; 
	right:35px; 
	width:auto;
	position:absolute;
}
#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}
/*bar*/
#pagination-wrap{
	min-width:20px;
	margin-top:340px;
	margin-left: auto; 
	margin-right: auto;
	height:15px;
	position:relative;
	text-align:center;
}

#pagination-wrap ul {
	width:100%;
}

#pagination-wrap ul li{
	margin: 0 4px;
	display: inline-block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#fff;
	opacity:0.5;
	position:relative;
  top:0;    
}

#pagination-wrap ul li.active{
  width:12px;
  height:12px;
  top:3px;
	opacity:1;
	box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;	
}

.point-item{display: inline-block;}
.img-title{display: block; margin-bottom: 15px;}
.part-con{display: grid;grid-template-columns: 1.2fr 1fr;gap: 2rem;margin-top: 50px;}
.point-item p{font-size: 20px;line-height: 2; color: #1e2c46;}
.point-item p em{font-style: normal;}
.point-item p em,.point-item p b{ color: #2d61fc;}
.point-item-txt{ font-size: 20px; color: #eb3140; background: url(../img/icon-error.png) 5px center no-repeat; width: 50%; float:left;padding: 10px 10px 10px 30px}
.point-item-txt:last-child{width:100%}
h1{text-align: center;font-family: Noto Sans SC;font-size: 50px;letter-spacing: .1em; color: #303133;line-height: 3; padding-top: 40px;}
h2{font-family: Noto Sans SC;font-size: 40px;opacity: .4; font-weight: normal; line-height: 3; }

/********part3 产品功能*********/
.part3{background-color: #fff;}
.part3-con-li{ width: calc(33.3% - 55px); margin: 25px; border: 1px solid #c5d3fe; background-color: #fefefe; box-shadow: 0 0 17px rgb(171 193 255 / 52%); 
border-radius: 40px; list-style: none; padding: 40px 0; display: inline-flex; flex-direction: column; align-items: center; transition: all .3s;}
.part3-con-li i{ width: 60px; height: 60px; border-radius: 10px; background-color: #dee6ff;  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 10px;}
.part3-con-li h4{font-family: Noto Sans SC; font-size: 28px; color: #303133; line-height: 2.5; font-weight: 500;}
.part3-con-li p{ color: #303133;}
.part3-con-li:hover{ transform: translateY(-20px); box-shadow: 0 0 24px rgb(171 193 255 / 80%);border: 1px solid #81a1ff;}

/********part4*********/
.part4{background: url(../img/part4-bg-l.png) left 200px no-repeat, url(../img/part4-bg-r.png) right top no-repeat #fafbff;}
.part4-con{background: url(../img/part4-bg-c.png)  center bottom no-repeat; height: 700px; position: relative;}
.part4-con .part-title{ position: absolute; top:32%; left:45%; text-align: center;}
.part4-con .part-title h3{ font-size: 30px; color: #2d61fc; font-weight: 500; line-height: 2;}
.part4-con .flex{ display: flex; justify-content: space-between;}
.part4-con .part3-con-li{ background-color: rgba(255,255,255,.5); padding: 30px; align-items: flex-start; backdrop-filter: blur(10px);}
.part4-con .part3-con-li p{ line-height: 1.8;}

footer{ background-color: #4b5060; color: #dde4f2; padding: 30px 0; display: flex;}
footer p{ font-weight: normal; padding: 4px 0; font-size: 14px;}
.footer-l{ float: left;}
.footer-r{ float: right;}
footer .code-li{ width:80px; height: 80px;}
footer .code-li img{ width: 70px; }

/* 添加媒体查询 */
@media (max-width: 1020px) {
	.wrapper{ width: 90%;}
	.logo{ left: 0; top: 0;}
	img{ max-width: 100%;}
	h1{ font-size: 38px; line-height: 1.8; letter-spacing: 0;}
    .part1{ height:auto; padding-bottom:100px; }
    .header-banner-left{ width: 100%; padding-top: 100px;}
    .header-banner-right{ position: relative; top:0; right:inherit; background-size: contain; width: auto;height: 300px;}
    /* .part3-con,.part4-con .flex{display: flex; flex-direction: column; align-items: center;} */
	.part-con{grid-template-columns: 100%;}
    .part3-con-li,.part4-con .part3-con-li{ width: 100%; margin: 10px 0; }
	.part3-con-li h4{ font-size: 22px; line-height: 1.8; font-weight: bold;}
	.animation-box2{margin-top: 20px;}
	.animation-box2 img{max-width: 100%;}
	.animation-box3{ margin-top: 40px;}
	.animation-box4{top: 30px; right: 0;}
	.logo,.animation-box4,.animation-box3 .stat-item{transform: scale(.7); }
	/* .animated{opacity: 1;} */
	.stat-item .stat-label{ font-size: 15px;}
	.point-item-txt,.point-item p{font-size: 16px;}
	.service-code{ bottom: -60px;}
	.point-item img{ height: 45px;}
	.mt80{ margin-top: 40px;}
	#slider-wrap,#slider-wrap ul#slider li,#slider-wrap ul#slider li img{width: 360px;height:230px }
	.carousel{ margin-top: 0;}
	.part4-con{ background: none; height: auto;}
	.part-title{ display: none;}
	.part4-con .flex{ flex-direction: column;}
	.footer-l,.footer-r{ float: inherit;}
}

@media (max-width: 480px) {
    .stat-item .stat-number {
        font-size: 2rem;
    }
    
    .code-li {
        width: 120px;
        height: 120px;
    }
    
    .service-code img {
        width: 110px;
        height: 110px;
    }
}

@font-face {
    font-family: Noto Sans SC;
    src: url('./img/NOTOSANS-REGULAR.ttf');
}
/* 添加动画关键帧 */
@keyframes floatUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* 添加从左渐入的动画 */
@keyframes slideInFromLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* 添加淡入动画 */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* 添加渐入动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}