.index {
	width: 1440px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-bottom: 100px;
	font-family: Inter, sans-serif
}

.font-alimama {
	font-family:sans-serif
}

.height-box {
	width: 100%;
	height: 600px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding-top: 130px;
	background: url(../images/6.png) no-repeat 50%;
	background-size: cover
}

.height-box .title {
	width: 1012px;
	font-size: 47.81px;
	font-weight: 400;
	line-height: 60px;
	color: #fff
}

.height-box .title span {
	background: linear-gradient(166.94deg, #714dff, #9c83ff 31.28%, #e151ff 77.97%, #fff759 99.81%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

.height-box .text1 {
	margin-top: 70px;
	width: 838px;
	height: 90px;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
	color: #f5f5f5;
	text-align: center;
	vertical-align: middle
}

.height-box .change {
	margin-top: 30px;
	width: 140px;
	height: 36px;
	border-radius: 10px;
	background: radial-gradient(232.31% 233.33% at 49.88242001% 100%, #8a6cff 0, rgba(53, 41, 128, 0) 25.24%), linear-gradient(180deg, rgba(243, 238, 255, 0), rgba(243, 238, 255, .04)), rgba(147, 130, 255, .01);
	box-shadow: 0 2px 5px rgba(16, 0, 51, .39), 0 8px 8px rgba(16, 0, 51, .34), 0 19px 11px rgba(16, 0, 51, .2), 0 34px 14px rgba(16, 0, 51, .06), 0 53px 15px rgba(16, 0, 51, .01), inset 0 0 12px hsla(0, 0%, 100%, .08), inset 0 -8px 32px #1e0d49;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #f4f0ff
}

.boxStyle {
	margin-top: 80px
}

.boxStyle h1 {
	font-size: 48px;
	font-weight: 400;
	line-height: 60px;
	color: #fff
}

.box1 .list {
	display: flex;
	margin-top: 6px
}

.box1 .list .item:last-child:after {
	content: "";
	position: absolute;
	right: 0;
	top: 72px;
	width: 1px;
	height: 16px;
	background: rgba(138, 108, 255, .5)
}

.box1 .list .item:last-child:before {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	width: 1px;
	height: 180px;
	background: linear-gradient(180deg, rgba(243, 238, 255, 0), rgba(243, 238, 255, .12))
}

.box1 .list .item {
	width: 462px;
	height: 180px;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	padding: 16px 35px 40px;
	position: relative
}

.box1 .list .item i {
	position: absolute;
	left: 0;
	top: 72px;
	width: 1px;
	height: 16px;
	background: rgba(138, 108, 255, .5)
}

.box1 .list .item i:before {
	content: "";
	position: absolute;
	left: 0;
	top: -72px;
	width: 1px;
	height: 180px;
	background: linear-gradient(180deg, rgba(243, 238, 255, 0), rgba(243, 238, 255, .12))
}

.box1 .list .item img {
	width: 40px;
	height: 40px
}

.box1 .list .item p {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(239, 237, 253, .7);
	text-align: left;
	vertical-align: top
}

.box2 .list {
	display: flex;
	margin-top: 30px
}

.box2 .list .item {
	width: 392px;
	height: 234px;
	background: rgba(209, 170, 215, .01);
	border-radius: 20px;
	border: 1px solid rgba(209, 170, 215, .06);
	box-shadow: inset 0 24px 48px 1px rgba(199, 211, 234, .05), inset 0 1px 1px 1px rgba(199, 211, 234, .12);
	margin: 0 10px;
	box-sizing: border-box;
	padding: 36px 20px
}

.box2 .list .item h3 {
	font-size: 24px;
	font-weight: 400;
	line-height: 28.8px;
	color: #fff;
	text-align: left;
	margin-bottom: 8px
}

.box2 .list .item p {
	font-size: 14px;
	line-height: 21px;
	color: hsla(0, 0%, 100%, .6);
	text-align: left
}

.box3 .list {
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	width: 936px;
	background: url(../images/7.png) no-repeat 50%
}

.box3 .list .item {
	width: 468px;
	height: 220px;
	box-sizing: border-box;
	padding: 32px;
	display: flex;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(239, 237, 253, .7);
	text-align: left
}

.box3 .list .item:first-child {
	background: radial-gradient(100% 100.23% at 100% 100.2277904328%, rgba(138, 108, 255, .2) 0, rgba(3, 0, 20, 0) 100%);
	align-items: end
}

.box3 .list .item:nth-child(2) {
	background: radial-gradient(100% 100.23% at 0 100.2277904328%, hsla(0, 0%, 100%, .03) 0, rgba(3, 0, 20, 0) 100%);
	align-items: end
}

.box3 .list .item:nth-child(2) p {
	background: linear-gradient(30deg, #714dff, #9c83ff 31.28%, #e151ff 77.97%, #fff759 99.81%), rgba(239, 237, 253, .7);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

.box3 .list .item:nth-child(3) {
	background: radial-gradient(100% 100.25% at 100% 0, hsla(0, 0%, 100%, .03) 0, rgba(3, 0, 20, 0) 100%)
}

.box3 .list .item:nth-child(3) p {
	background: linear-gradient(30deg, #714dff, #9c83ff 31.28%, #e151ff 77.97%, #fff759 99.81%), rgba(239, 237, 253, .7);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

.box3 .list .item:nth-child(4) {
	background: radial-gradient(100% 100.25% at 0 0, rgba(138, 108, 255, .2) 0, rgba(3, 0, 20, 0) 100%)
}

.box4 .list {
	display: flex;
	margin-top: 30px
}

.box4 .list .item {
	width: 394px;
	height: 270px;
	margin: 0 10px;
	border-radius: 20px;
	background: hsla(0, 0%, 6%, .8);
	box-sizing: border-box;
	padding: 30px 36px
}

.box4 .list .item img {
	width: 128px;
	height: 128px
}

.box4 .list .item p {
	margin-top: 10px;
	font-size: 19px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(239, 237, 253, .7)
}

.box5 {
	width: 1216px;
	height: 470px;
	border-radius: 16px;
	background: hsla(0, 0%, 100%, 0);
	box-shadow: inset 0 1px 1px rgba(199, 211, 234, .12), inset 0 24px 48px rgba(199, 211, 234, .05);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center
}

.box5,
.box5 h1 {
	margin-top: 80px
}

.box5 h1 {
	font-size: 48px;
	font-weight: 400;
	line-height: 60px;
	color: #fff
}

.box5 .text {
	margin-top: 30px;
	font-size: 24px;
	font-weight: 400;
	line-height: 29px;
	color: hsla(0, 0%, 100%, .7)
}

.box5 button {
	border-radius: 10px;
	background: radial-gradient(231.9% 572.22% at 50% 100%, #8a6cff 0, rgba(53, 41, 128, 0) 25.24%), linear-gradient(180deg, rgba(243, 238, 255, 0), rgba(243, 238, 255, .04)), rgba(147, 130, 255, .01);
	box-shadow: 0 2px 5px rgba(16, 0, 51, .39), 0 8px 8px rgba(16, 0, 51, .34), 0 19px 11px rgba(16, 0, 51, .2), 0 34px 14px rgba(16, 0, 51, .06), 0 53px 15px rgba(16, 0, 51, .01), inset 0 0 12px hsla(0, 0%, 100%, .08), inset 0 -8px 32px #1e0d49;
	padding: 8px 17px 8px 17px;
	margin-top: 30px;
	font-size: 14px;
	font-weight: 500;
	color: #f4f0ff
}

.box5 button span {
	margin-left: 4px;
	font-weight: 400
}

@media screen and (max-width:768px) {
	.index {
		width: 100%;
		overflow: hidden;
		padding-bottom: 30px
	}
	.height-box {
		height: auto;
		padding: 50px 20px 0
	}
	.height-box .title {
		width: auto;
		font-size: 28px
	}
	.height-box .title span {
		display: block
	}
	.height-box .text1 {
		margin-top: 20px;
		width: 100%;
		height: auto;
		font-size: 16px;
		font-weight: 400
	}
	.height-box .change {
		margin-top: 20px
	}
	.boxStyle {
		margin-top: 40px
	}
	.boxStyle h1 {
		font-size: 26px;
		line-height: 30px
	}
	.box1 .list {
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 20px
	}
	.box1 .list .item:last-child:after {
		width: 16px
	}
	.box1 .list .item:last-child:after,
	.box1 .list .item:last-child:before {
		top: auto;
		right: auto;
		left: 50%;
		bottom: 0;
		height: 1px;
		transform: translateX(-50%)
	}
	.box1 .list .item:last-child:before {
		width: calc(100vw - 40px);
		background: linear-gradient(0deg, rgba(243, 238, 255, 0), rgba(243, 238, 255, .12))
	}
	.box1 .list .item {
		width: 100%
	}
	.box1 .list .item i {
		width: 16px
	}
	.box1 .list .item i,
	.box1 .list .item i:before {
		top: 0;
		left: 50%;
		height: 1px;
		transform: translateX(-50%)
	}
	.box1 .list .item i:before {
		width: calc(100vw - 40px);
		background: linear-gradient(0deg, rgba(243, 238, 255, 0), rgba(243, 238, 255, .12))
	}
	.box1 .list .item p {
		font-size: 14px;
		text-align: center
	}
	.box2 .list {
		margin-top: 20px;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 0 20px
	}
	.box2 .list .item {
		width: 100%;
		height: auto;
		padding: 20px 18px;
		margin-bottom: 10px
	}
	.box2 .list .item:last-child {
		margin-bottom: 0
	}
	.box2 .list .item h3 {
		font-size: 18px;
		line-height: 24px
	}
	.box2 .list .item p {
		font-size: 14px
	}
	.box3 .list {
		margin-top: 20px;
		width: 100%;
		background: none;
		box-sizing: border-box;
		padding: 0 20px
	}
	.box3 .list .item {
		width: 100%;
		height: auto;
		padding: 18px 0;
		font-size: 14px;
		line-height: 20px;
		position: relative;
		background: none!important;
		align-items: top!important
	}
	.box3 .list .item :after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 1px;
		background: linear-gradient(90deg, rgba(243, 238, 255, 0) 0, rgba(243, 238, 255, .12))
	}
	.box4 .list {
		margin-top: 20px;
		width: 100%;
		flex-wrap: wrap;
		box-sizing: border-box;
		padding: 20px
	}
	.box4 .list .item {
		width: 100%;
		height: auto;
		margin: 0 0 10px 0;
		padding: 15px 20px
	}
	.box4 .list .item img {
		width: 80px;
		height: 80px
	}
	.box4 .list .item p {
		font-size: 14px
	}
	.box5 {
		width: calc(100% - 40px);
		height: auto;
		padding-bottom: 40px
	}
	.box5,
	.box5 h1 {
		margin-top: 40px
	}
	.box5 h1 {
		font-size: 28px;
		line-height: 36px
	}
	.box5 .text {
		margin-top: 20px;
		font-size: 14px;
		line-height: 20px
	}
	.box5 button {
		padding: 8px 12px 8px 12px;
		margin-top: 15px;
		font-size: 12px
	}
}
*{
    padding: 0;
    margin: 0;
}
body,html{background:#060606}
button{all:unset;cursor:pointer}
#app{width:100%;background:#060606;display:flex;justify-content:center}