body { margin: 0; font-family: "Microsoft YaHei", 微软雅黑, Arial, Helvetica, Sans-Serif; }

.header { width: 100%; height: 74px; background-color: #001730; position: fixed; left: 0; top: 0; z-index: 99; transform: translateY(0px); transition: all 0.3s; }
.headerHide { transform: translateY(-74px); transition: all 0.3s; }
.header .logo { font-size: 30px; font-weight: 600; width: 280px; height: 70px; line-height: 70px; margin-left: 0%; float: left; }
.header .logo img { height: 52px; width: 178px; margin: 9px auto 10px 97px; }
.header .btn { height: 70px; margin: 15px 60px 15px 0; float: right; }
.header .btn img { width: 24px; height: 24px; vertical-align: text-top; margin-top: -1px; margin-left: -3px; margin-right: 3px; border-radius: 40%; }
.header .btn > div { display: none; margin: 0; width: 148px; height: 40px; border-radius: 6px; font-size: 18px; float: left; line-height: 40px; text-align: center; cursor: pointer; transition: all 0.2s; transform: scale(1); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.header .btn > div+div { margin-left: 12px; }
.header .btn .btn1 { background-color: #fff; border: 1px solid #f1f1f1; color: #666; }
.header .btn .btn1:hover { background-color: #f1f1f1; }
.header .btn .btn2 { background-color: #25A4FF; color: #fff; }
.header .btn .btn2:hover { background-color: #79BBFF; }
.header .btn .btn3 { width: auto; padding: 0 20px; height: 38px; line-height: 38px; font-size: 16px; border: 2px solid #fff; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 50px; }
.header .btn .btn3:hover { border: 2px solid #25A4FF; color: #25A4FF; }
.header .btn > div:active { transition: all 0.2s; transform: scale(0.96); }

.kv { width: 100%; height: 650px; z-index: -1; background-image: linear-gradient(rgb(255, 255, 255), rgb(235, 244, 255), rgb(255, 255, 255)); }
.kv .kv2 { width: 100%; max-width: 1500px; margin: 0 auto; height: 650px; position: relative; }
.kv .h2 { position: absolute; left: 100px; top: 150px; font-size: 48px; font-weight: bold; height: 48px; line-height: 48px; color: #37425A; }
.kv .h2a { position: absolute; left: 100px; top: 215px; font-size: 48px; font-weight: bold; height: 48px; line-height: 48px; color: #25A4FF;
background: linear-gradient(45deg, #37425A, #25A4FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kv .desc { position: absolute; left: 100px; top: 286px; font-size: 18px; height: 48px; line-height: 48px; color: #2B2D42; }
.kv .btn { position: absolute; transition: all 0.3s; left: 100px; top: 340px; font-size: 16px; font-weight: 500; width: 220px; height: 50px; line-height: 50px; color: #fff; background-color: #25A4FF; text-align: right; border-radius: 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.kv .btn2 { position: absolute; transition: all 0.3s; left: 340px; top: 340px; font-size: 16px; font-weight: 500; width: 130px; height: 46px; line-height: 46px; border: 2px solid #25A4FF; color: #25A4FF; text-align: center; border-radius: 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.kv .btn img { width: 18px; height: 18px; float: right; margin: 16px 24px 0 14px; }
.kv .btn:hover { background-color: #79BBFF; transition: all 0.3s; }
.kv .btn2:hover { background-color: #79BBFF; border: 2px solid #79BBFF; color: #fff; transition: all 0.3s; }
.kv .btn:active { transition: all 0.2s; transform: scale(0.96); }
.kv .btn2:active { transition: all 0.2s; transform: scale(0.96); }
.kv .face { width: 200px; height: 50px; line-height: 50px; position: absolute; left: 105px; top: 420px; }
.kv .face .user { width: 60px; height: 60px; position: absolute; top: 0; border-radius: 42px; transform: translateX(0px); transition: all 0.3s; }
.kv .face .user:hover { transform: translateX(-10px); transition: all 0.3s; }
.kv .face .user .img { width: 50px; height: 50px; border: 5px solid rgb(235, 244, 255); border-radius: 34px; }
.kv .face .user:nth-child(4) { right: 30px; }
.kv .face .user:nth-child(3) { right: 70px; }
.kv .face .user:nth-child(2) { right: 110px; }
.kv .face .user:nth-child(1) { right: 150px; }
.kv .comment { width: 400px; height: 80px; position: absolute; left: 295px; top: 422px; color: #2B2D42; }
.kv .comment img { width: 16px; height: 16px; display: inline-block; margin-right: 0px; }
.kv .comment .line { height: 26px; line-height: 26px; }
.kv .flash { width: 520px; height: 300px; position: absolute; right: 100px; top: 170px; }
.kv .flash img { width: 520px; float: right; transition: all 0.3s; }

/* 大屏设备 - 800px以下 */
@media (max-width: 1200px) {
	.kv .flash { right: 50px; transition: all 0.3s; }
}
/* 大屏设备 - 800px以下 */
@media (max-width: 1000px) {
	.kv .flash { width: 400px; right: 0px; transition: all 0.3s; }
	.kv .flash img { width: 400px; transition: all 0.3s; }
}

.h3 { width: 100%; height: 60px; line-height: 60px; font-size: 38px; text-align: center; font-weight: 500; margin-top: 40px; color: #2C3346; }
.h3x { width: 100%; height: 38px; line-height: 38px; font-size: 18px; text-align: center; font-weight: 400; margin-top: 0px; color: #2C3346; }
.h4x { width: 100%; height: 60px; line-height: 15px; font-size: 15px; text-align: center; color: #0D0D0E; }
.h4x a { color: #0D0D0E; padding: 0 2px; }
.h4x a:hover { color: #25A4FF; }

.test { width: 90%; overflow: hidden; margin: 0 auto; padding: 30px 30px 40px 30px; height: 170px; display: flex; gap: 20px; }
.test .user { border: 1px solid #D9E7FF; border-radius: 15px; height: 170px; flex: 1; }
.test .user .face img { width: 38px; height: 38px; margin: 42px 0 0 32px; }
.test .user .name { font-size: 18px; font-weight: 600; margin: 14px 32px 5px 32px; color: #2C3346; }
.test .user .desc { font-size: 14px; color: #333; margin: 0 0 0 32px; line-height: 26px; color: #2C3346; }

.test2 { width: 90%; overflow: hidden; margin: 0 auto; padding: 30px 30px 40px 30px; height: 220px; display: flex; gap: 20px; }
.test2 .user { border: 1px solid #E2E8F0; border-radius: 15px; height: 220px; flex: 1; background-color: #fff; }
.test2 .user .face img { width: 38px; height: 38px; margin: 25px 0 0 20px; }
.test2 .user .name { font-size: 18px; font-weight: 600; margin: 16px 32px 0 20px; color: #2C3346; }
.test2 .user .address { font-size: 14px; color: rgb(69, 79, 105); margin: 18px 0 12px 20px; }
.test2 .user .address img { width: 16px; height: 16px; vertical-align: middle; margin-top: -2px; margin-right: 6px; }
.test2 .user .btn { transition: all 0.3s; font-size: 16px; font-weight: 500; margin: 0 20px; height: 46px; line-height: 46px; color: #fff; background-color: #25A4FF; text-align: center; border-radius: 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.test2 .user .btn img { width: 14px; height: 14px; margin: 16px 0 0 10px; }
.test2 .user .btn:hover { background-color: #79BBFF; transition: all 0.3s; }
.test2 .user .btn:active { transition: all 0.2s; transform: scale(0.96); }

.combo { width: 90%; overflow: hidden; margin: 0 auto; padding: 30px 30px 40px 30px; height: 250px; display: flex; gap: 20px; }
.combo .user { border: 1px solid #E2E8F0; border-radius: 15px; height: 250px; flex: 1; }
.combo .user .face { width: 42px; height: 42px; margin: 25px 0 0 20px; background-image: linear-gradient(to right, rgb(0, 122, 255), rgb(124, 183, 248)); border-radius: 100%; position: relative; }
.combo .user .face div { width: 36px; height: 36px; line-height: 36px; position: absolute; top: 3px; left: 3px; background-color: #fff; font-size: 20px; font-weight: 600; text-align: center; border-radius: 100%; }
.combo .user .name { font-size: 18px; font-weight: 600; margin: 16px 32px 12px 20px; color: #2C3346; }
.combo .user .list .txt { font-size: 14px; padding-left: 50px; color: #2C3346; position: relative; margin-top: 4px; height: 24px; line-height: 22px; margin-left: 0; }
.combo .user .list .txt::after { content: ''; position: absolute; left: 20px; top: 0; width: 28px; height: 28px; line-height: 20px; text-align: center; border-radius: 5px; font-size: 14px; color: #25A4FF; z-index: -1; }
.combo .user .list .txt img { position: absolute; left: 22px; top: 7px; width: 16px; height: 16px; z-index: 1; }

.getInfo { width: 100%; background-color: #F6FBFF; overflow: auto; }
.get { width: 90%; overflow: hidden; margin: 0 auto 10px auto; padding: 30px; height: 90px; display: flex; gap: 20px; }
.get .item { border: 1px solid #D9E7FF; border-radius: 15px; height: 90px; flex: 1; background-color: #fff; }
.get .item .txt { font-size: 14px; padding-left: 60px; color: #2C3346; position: relative; margin-top: 24px; height: 24px; line-height: 22px; margin-right: 15px; }
.get .item .txt img { position: absolute; left: 22px; top: 7px; width: 22px; height: 22px; z-index: 1; }


.details { width: 1280px; margin: 32px auto 20px auto; height: 180px; }
.details .leftArrow { width: 24px; height: 178px; float: left; border-radius: 10px; position: relative; background-color: #ffffff00; transition: all 0.3s; margin-right: 6px; }
.details .rightArrow { width: 24px; height: 178px; float: left; border-radius: 10px; position: relative; background-color: #ffffff00; transition: all 0.3s; margin-left: 6px; }
.details .leftArrow::after { content: ''; width: 12px; height: 12px; border-top: 2px solid #25A4FF; border-right: 2px solid #25A4FF; position: absolute; right: 2px; transform: rotate(225deg); margin-top:80px; transition: all 0.3s; }
.details .rightArrow::after { content: ''; width: 12px; height: 12px; border-top: 2px solid #25A4FF; border-right: 2px solid #25A4FF; position: absolute; left: 2px; transform: rotate(45deg); margin-top:80px; transition: all 0.3s; }
.details .leftArrow:hover { background-color: #ffffff50; transition: all 0.3s; }
.details .rightArrow:hover { background-color: #ffffff50; transition: all 0.3s; }
.details .leftArrow:hover::after { border-color: #79BBFF; transition: all 0.3s; }
.details .rightArrow:hover::after { border-color: #79BBFF; transition: all 0.3s; }
.details .list { width: 1220px; height: 180px; float: left; overflow: hidden; position: relative; }
.details .list .item { width: 392px; height: 178px; border: 1px solid #e5e5e5; display: block; border-radius: 20px; margin: 0; background-color: #ffffff; position: absolute; top: 0px; left: 252px; opacity: 0; transition: all 0s; }
.details .list .item.pa { left: -392px; top: 0; opacity: 0; transition: all 1s; }
.details .list .item.p1 { left: 0px; top: 0; opacity: 1; transition: all 1s; }
.details .list .item.p2 { left: 413px; top: 0; opacity: 1; transition: all 1s; }
.details .list .item.p3 { left: 826px; top: 0; opacity: 1; transition: all 1s; }
.details .list .item.pb { left: 1239px; top: 0; opacity: 0; transition: all 1s; }
.details .list .item .realname { position: absolute; right: 20px; height: 20px; left: 20px; top: 20px; font-size: 14px; font-weight: bolder; }
.details .list .item .realname img { width: 16px; height: 16px; display: inline-block; margin-right: 4px; }
.details .list .item .level { position: absolute; width: 200px; height: 30px; line-height: 30px; left: 18; top: 40px; font-size: 12px; color: #999; }
.details .list .item .level img { width: 20px; height: 20px; display: inline-block; margin-right: 0; margin-bottom: -6px; }
.details .list .item .words { position: absolute; right: 20px; height: 20px; left: 20px; top: 70px; font-size: 14px; white-space: normal; }
.details .list .item .address { position: absolute; right: 20px; height: 20px; left: 20px; bottom: 20px; font-size: 14px; text-align: right; color: #999; }
.reviewsLogo { width: 1220px; margin: 30px auto 0 auto; height: 30px; }
.reviewsLogo img { height: 20px; float: right; }
/* 大屏设备 - 1300px以下 */
@media (max-width: 1300px) {
	.details { width: 980px; }
	.details .list { width: 920px; }
	.details .list .item { width: 292px; }
	.details .list .item.pa { left: -292px; }
	.details .list .item.p1 { left: 0px; }
	.details .list .item.p2 { left: 313px; }
	.details .list .item.p3 { left: 626px; }
	.details .list .item.pb { left: 939px; }
	.reviewsLogo { width: 980px; }
}
/* 大屏设备 - 1000px以下 */
@media (max-width: 1000px) {
	.details { width: 800px; }
	.details .list { width: 740px; }
	.details .list .item { width: 232px; }
	.details .list .item .realname { padding-right: 0px; }
	.details .list .item .realname img { margin-right: 0px; }
	.details .list .item.pa { left: -253px; }
	.details .list .item.p1 { left: 0px; }
	.details .list .item.p2 { left: 253px; }
	.details .list .item.p3 { left: 506px; }
	.details .list .item.pb { left: 759px; }
	.reviewsLogo { width: 800px; }
}

.community { background-color: #F6FBFF; height: 150px; width: 100%; position: relative; margin-top: 50px; }
.community .title { position: absolute; left: 100px; top: 30px; width: 200px; height: 60px; line-height: 60px; font-size: 38px; font-weight: 500; color: #2C3346; }
.community .desc { position: absolute; left: 100px; top: 87px; right: 450px; height: 60px; line-height: 20px; font-size: 16px; color: #454F69; }
.community .icons { position: absolute; right: 100px; top: 50px; height: 50px; width: 400px; text-align: right; }
.community .icons .icon { width: 76px; height: 48px; border-radius: 14px; border: 1px solid #25A4FF; float: right; text-align: center; margin-left: 10px; background-color: #fff; cursor: pointer; transform: scale(1); transition: all 0.2s; box-shadow: 0 10px 15px -3px rgba(212, 212, 216, 0.5), 0 4px 6px -4px rgba(212, 212, 216, 0.5); }
.community .icons .icon img { height: 28px; margin-top: 10px; filter: grayscale(100%); opacity: 0.8; }
.community .icons .icon:active { transform: scale(0.9); transition: all 0.2s; }

.buy { width: 1200px; overflow: auto; margin: 0 auto; padding: 32px 30px 30px 30px; display: flex; gap: 20px; }
.buy .left { flex: 1; border: 1px solid #e5e7eb; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); height: 400px; transform: scale(1); transition: all 0.2s; }
.buy .right { flex: 1; border: 1px solid #e5e7eb; border-radius: 15px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); height: 400px; transform: scale(1); transition: all 0.2s; }
.buy .left:hover { transform: scale(1.07); transition: all 0.2s; }
.buy .right:hover { transform: scale(1.07); transition: all 0.2s; }
.buy .h7 { font-size: 18px; font-weight: 500; margin: 25px 0 20px 30px; }
.buy .price { font-size: 16px; margin: 0 20px 20px 20px; padding-top: 8px; border-top: 1px solid #666; color: #999; }
.buy .price span { font-size: 38px; font-weight: bold; color: #2C3346; padding-left: 14px; }
.buy .txt { font-size: 16px; padding-left: 44px; color: #666; position: relative; margin-top: 12px; height: 28px; line-height: 28px; margin-left: 18px; }
.buy .txt img { position: absolute; left: 10px; top: 5px; width: 22px; height: 22px; z-index: 1; }
.buy .btn { transition: all 0.3s; font-size: 16px; font-weight: 500; margin: 25px 30px 0 30px; height: 46px; line-height: 46px; color: #fff; background-color: #25A4FF; text-align: center; border-radius: 10px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.buy .btn:hover { background-color: #79BBFF; transition: all 0.3s; }
.buy .btn:active { transition: all 0.2s; transform: scale(0.96); }

.question { background-color: #F6FBFF; width: 100%; overflow: auto; padding: 50px 0 40px 0; color: #2C3346; }
.question .title { width: 25%; padding-left: 5%; font-size: 39px; font-weight: 600; float: left; padding-top: 5px; }
.question .list { width: 65%; margin-right: 5%; float: right; }
.question .list .item { height: 60px; border-bottom: 1px solid #e5e7eb; overflow: hidden; margin-bottom: 10px; transition: all 0.3s; }
.question .list .item .h7 { height: 60px; line-height: 60px; font-size: 18px; font-weight: 400; display: block; width: 100%; position: relative; text-indent: 1.2em; transition: all 0.3s; cursor: pointer; }
.question .list .item .h7::after { content: ''; width: 8px; height: 8px; border-top: 1px solid #000; border-right: 1px solid #000; position: absolute; right: 30px; top: 20px; transform: rotate(225deg); transition: all 0.2s; }
.question .list .item .desc { color: #444F69; padding: 0 20px; line-height: 26px; opacity: 0; transition: all 0.2s; }
.question .list .item.open { height: 150px; transition: all 0.3s; }
.question .list .item.open .h7::after { transform: rotate(135deg); }
.question .list .item.open .desc { opacity: 1; transition: all 0.3s; }

.order { width: 89%; overflow: hidden; margin: 0 auto; padding: 30px 30px 40px 30px; height: 402px; display: flex; gap: 25px; }
.order .ul { border-radius: 15px; height: 400px; flex: 1; background-color: #fff; overflow: hidden; }
.order .ul .li { height: 100px; opacity: 1; transition: all 0.3s; line-height: 100px; width: 100%; border-radius: 30px; font-size: 18px; font-weight: 400; overflow: hidden; }
.order .ul .hide { height: 0; opacity: 0; transition: all 0.5s; }
.order .ul .even { background-color: #F6FBFF; }
.order .ul .li img { height: 44px; width: 44px; border-radius: 100%; margin-left: 40px; margin-bottom: -14px; }
.order .ul .li span { margin-right: 50px; float: right; font-size: 20px; font-weight: 600; color: #25A4FF; }




.footer { width: 100%; height: 350px; background-color: #001730; color: #fff; overflow: hidden; }
.footer .logo { width: 250px; float: left; height: 150px; margin-left: 80px; margin-top: 50px; }
.footer .logo .icon { width: 200px; }
.footer .icons { margin: 20px 0 0 10px;}
.footer .icons img { width: 24px; height: 24px; margin-right: 10px; filter: brightness(100); }
.footer .menu { width: 450px; float: right; height: 250px; margin-right: 35px; }
.footer .menu .item { width: 150px; float: right; height: 250px; }
.footer .menu .item > div { font-size: 16px; height: 34px; line-height: 34px; }
.footer .menu .item > div:nth-child(1) { font-size: 18px; font-weight: 600; margin-top: 30px; margin-bottom: 8px; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #25A4FF; }
.footer .copyright { width: 90%; height: 100px; line-height: 100px; text-align: center; border-top: 1px solid #ffffff50; clear: both; margin: 0 auto; }




	/* 毛玻璃效果 Start */
	.dialog {
		content: '';
		/* 定位：覆盖在父元素上方 */
		position: fixed; /* 或 absolute，根据场景选择 */
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		/* 毛玻璃核心样式 */
		background: #25A4FF20; /* 半透明白色背景（可调整颜色和透明度） */
		backdrop-filter: blur(4px) saturate(1.5); /* 模糊+饱和度调整 */
		-webkit-backdrop-filter: blur(4px) saturate(1.5); /* 兼容 Safari */

		/* 可选：添加边框/阴影增强层次感 */
		border: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

		transform: scale(1.2); transition: all 0.2s; opacity: 0; z-index: -1;
	}
	.dialog .alert { width: 360px; height: 440px; background-color: #fff; position: fixed; top: 50%; left: 50%; margin-top: -200px; margin-left: -180px; border-radius: 20px; overflow: hidden; }
	.dialog .alert .title { text-align: center; font-size: 24px; font-weight: bold; height: 60px; line-height: 60px; color: #25A4FF; background-color: #07c160; color: #fff; }
	.dialog .alert .title img { width: 32px; height: 32px; margin-bottom: -8px; filter: brightness(100); }
	.dialog .alert .content { margin: 20px auto 10px auto; width: 200px; height: 200px; text-align: center; }
	.dialog .alert .content img { width: 200px; height: 200px; }
	.dialog .alert .other { text-align: center; font-size: 17px; height: 50px; line-height: 50px; color: #666; margin: 15px 24px; background-color: #fafafa; border-radius: 8px; }
	.dialog .alert .other img { width: 24px; height: 24px; display: inline-block; vertical-align: text-bottom; margin-right: 4px; }
	.dialog .alert .other span { color: #ff6900; font-weight: bold; }
	.dialog .btn { height: 50px; margin: 0 25px; }
	.dialog .btn > div { margin: 0; width: 148px; height: 50px; border-radius: 14px; font-size: 18px; float: left; line-height: 50px; text-align: center; cursor: pointer; }
	.dialog .btn > div+div { margin-left: 12px; }
	.dialog .btn .btn1 { background-color: #fff; border: 1px solid #f1f1f1; color: #666; }
	.dialog .btn .btn1:hover { background-color: #f1f1f1; }
	.dialog .btn .btn2 { background-color: #07c160; color: #fff; }
	.dialog .btn .btn2:hover { background-color: #07c160cc; }
	.dialog.showDialog { transform: scale(1); transition: transform 0.5s, opacity 0.5s; opacity: 1; z-index: 12; }
	/* 毛玻璃效果 End */


	/* 以下为滚动图片样式 Start */

    .scroll-container {
	  position: absolute; left: 10%; bottom: 0px;
      width: 80%;
	  height: 120px;
	  margin: 0 auto;
      overflow: hidden;
      white-space: nowrap; /* 禁止换行 */
      padding: 0;
	  mask-image: linear-gradient(to right,#000,transparent 0,#000 15%,#000 85%,transparent)
    }

    .scroll-wrapper {
      display: inline-block; /* 让内容横向排列 */
      animation: scroll 80s linear infinite; /* 滚动动画 */
    }

    .scroll-item {
      display: inline-block;
      margin: 0; /* 图片间距 */
      height: 120px; /* 图片高度，可调整 */
      width: 210px;
	  overflow: hidden;
    }

    .scroll-item img {
	  margin-left: -15px;
      height: 120px; /* 图片高度，可调整 */
      width: 240px; /* 保持宽高比 */
      vertical-align: middle;
	  filter: grayscale(100%);
	  opacity: 0.5;
    }

    /* 鼠标悬停暂停（移动端可省略） */
    .scroll-container:hover .scroll-wrapper {
      animation-play-state: paused;
    }

    /* 滚动动画定义 */
    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%); /* 滚动到自身一半长度 */
      }
    }

	/* 以上为滚动图片样式 End */

	.friends { margin-left: -200px; }