.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height:100%;
		z-index: -1;
	}

	.title {
		padding: 20px 0;
		text-align: center;
		color: #000;

		h2 {
			/* font-size: 22px; */
			font-weight: 500;
			letter-spacing: 1.6px;
			flex-shrink: 0;
			color: #191c20;
		}

		p {
			flex-shrink: 0;
			color: #aab7cc;
			text-align: center;

			/*  font-size: 14px; */
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			letter-spacing: 0.7px;
			text-transform: uppercase;
		}

	}

	.banner {
		position: relative;
		/* min-height:120px; */
		padding: 5.3333vw 0;
		/* height: 100%; */

		h3 {
			color: #0059ef;
			font-size: 3.2rem;
			font-weight: 900;
			font-family: "OPPOSans";
		}

		h1 {
			color: #0059ef;
			font-size: 5.2rem;
			font-weight: 900;
			font-family: "OPPOSans";
		}

		p {
			margin-top: 3.3333vw;
			color: #333;
			font-size: 2rem;
		}

		ul {
			display: flex;
			margin-top: 5.3333vw;
			/* margin-bottom: 60px; */

			li {
				margin-right: 1.3333vw;
				cursor: pointer;

				img {
					width: 25.4rem;
					height: auto;
				}
			}
		}
	}

	/* 公司简介 */
	.about {
		/* position: relative; */
		background: url('../images/index/about-bg.png') center/100% 100% no-repeat;

		.title {
			padding-top: 35px;
		}

		.introduce {
			margin-top: 15px;

			flex-shrink: 0;
			color: #4b5360;
			text-align: center;
			font-style: normal;
			font-weight: 400;

		}

		.data {
			margin-top: 48px;
			padding-right: 60px;
			padding-left: 120px;

			li {
				.up {
					letter-spacing: -2px;

					.num {
						flex-shrink: 0;
						color: #0059ef;
						font-size: 5rem;
						font-weight: 600;

					}

					.year {

						color: #0059ef;
						color: #0059ef;
						font-size: 2.2rem;
						font-weight: 400;

					}

					.plus {
						font-size: 5rem;
						font-weight: 400;
						font-family: "OPPOSans";
						color: #0059ef;
					}
				}

				.down {
					margin-top: -5px;

					color: #4B5360;

					font-size: 1.8rem;

					font-weight: 400;

				}
			}

			li::before {
				content: "";
				position: absolute;
				left: 2px;
				top: 15px;
				bottom: 0;
				width: 1px;
				background-color: #ccc;
			}

			li:first-child::before {
				display: none;
			}
		}

		.cert {
			margin-top: 350px;
			display: flex;
			justify-content: space-between;

			.prev,
			.next {
				height: 48px;
				cursor: pointer;
				margin-top: 120px;
			}

			.content {
				padding: 0;
				width: 90%;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 10px;

				.title {
					display: flex;
					justify-content: center;

					div {
						margin: 0 5px;
					}

					img {
						height: 40px;
					}
				}

				ul {
					display: flex;
					flex-wrap: nowrap;
					overflow: hidden;
					width: 100%;
					margin-bottom: 30px;
					padding-right: 30px;
                    justify-content: space-around;
					li {
						min-width: 150px;
						flex: 0 0 auto;
						list-style: none;
						text-align: center;
						user-select: none;
						pointer-events: none;

						img {
							height: 60px;
						}

						p {
							margin-top: 10px;
							/* font-size: 12px; */
							color: #4B5360;
							text-align: center;
							font-weight: 400;

						}
					}
				}
			}
		}
	}

	/* 数智化产品 */
	.products {
		/* 	position: relative; */
		background: url('../images/index/products-bg.png') center/100% 100% no-repeat;
		/* height: 800px; */

		.title {
			padding-top: 130px;
		}

		.product-box {
			display: flex;
		}

		.product {
			margin-top: 10px;

			.bg {
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			}

			.topic {

				h2 {
					/* font-size: 16px; */
					font-weight: 500;
				}

				p {
					/* font-size: 12px; */
					color: #AAB7CC;
				}
			}

			.top {
				padding: 20px 15px;
				cursor: pointer;
				width: 35%;
				height: 228px;

				.function {
					width: 70%;
					display: flex;
					flex-wrap: wrap;
					margin-top: 10px;

					li {
						display: flex;
						align-items: center;
						width: 50%;
						font-size: 14px;
						color: #505050;
						line-height: 1.7;

						img {
							width: 15px;
						}
					}
				}

				.btn {
					padding: 0;
					display: flex;
					margin-top: 15px;

					li {

						display: flex;
						justify-content: center;
						align-items: center;
						cursor: pointer;
						margin-right: 13px;
						/* 	padding: 5px 15px; */
						background-color: #0059ef;


						border-radius: 50px;
						width: 122px;
						height: 32px;
						flex-shrink: 0;
						border-radius: 16px;
						background: var(--ty_, linear-gradient(90deg, #5442F4 1.5%, #1F62D1 50.5%, #4285F4 100%));
						box-shadow: 0 0 8px 0 #2966ffe6;
						color: #ffffff;

						font-size: 16px;

						font-weight: 400;

					}
				}
			}

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				align-content: space-between;
				width: 65%;
				padding-left: 22px;

				li {
					width: 49%;

					.topic {
						display: flex;
						justify-content: space-between;
						padding: 20px 25px;
						height: 102px;
						background-color: #fff;
						box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
						cursor: pointer;
					}

					p {
						margin-top: 10px;
						color: #919191;
						font-family: "OPPOSans";
						font-size: 14px;
						font-style: normal;
						font-weight: 400;
						line-height: 26px;
					}

					img {
						width: 48px;
						height: auto;
					}
				}

				@media (max-width: 768px) {
					li {
						width: 100%;
					}
				}
			}

			.more {
				margin-top: 22px;
				height: 22px;
				flex-shrink: 0;
				color: #4285f4;
				text-align: center;

				font-size: 1.6px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}
		}

		.goods {
			margin-top: 30px;
			padding-bottom: 15px;

			.goods-box {
				display: flex;
			}

			ul {
				display: flex;
				justify-content: space-between;

				li {
					position: relative;
					text-align: center;
					/* padding: 15px 15px 5px 15px; */

					/* margin-left: 15px; */
					.bg {
						box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
						border-radius: 10px;
					}

					.goods-box1 {
						border-radius: 10px 10px 0px 0px;
						padding: 15px 0px 0px 0px;
						flex-shrink: 0;
						box-shadow: 0 4rpx 4rpx 0 #9d97971a;
					}

					.goods-box2 {
						padding: 10px;
						border-radius: 0px 0px 10px 10px;
						
					}
					
					.goods-bg1{
						background: linear-gradient(180deg, #DDECFF 45%, #C5D4FF 100%);
					}
					
					.goods-btm-bg1{
						background-color: #ddecff;
					}
					
					.goods-bg2{
						background: linear-gradient(180deg, #EAE9FF 45%, #D6CFFA 100%);
					}
					.goods-btm-bg2{
						background-color: #dcd9f8;
					}
					
					.goods-bg3{
						background: linear-gradient(180deg, #DDECFF 67.5%, #C5D4FF 100%);
					}
					.goods-btm-bg3{
						background-color: #ced9f5;
					}
					
					.goods-bg4{
						
						background: linear-gradient(180deg, #D6F3FE 45%, #82C4E0 100%);
						
					}
					.goods-btm-bg4{
						background-color: #b5d7f2;
					}
					
					.goods-bg5{
						background: linear-gradient(180deg, #E4F2E8 45%, #BAECD3 100%);
					
						
					}
					.goods-btm-bg5{
						background-color:#ceefde;
					}

					h3 {




						margin-bottom: 20px;
						color: #000000;
						text-align: center;
						font-family: "PingFang SC";

						font-style: normal;
						font-weight: 600;
						line-height: normal;
					}

					.goods-img {
						width: auto;
						/* height: auto; */
						height: 166px;
					}

					p {
						display: flex;
						justify-content: space-between;
						align-items: center;
						/* padding-top: 10px; */


						span:first-child {
							color: #ff990a;
							font-size: 1.2rem;
							font-style: normal;
							font-weight: 700;
							line-height: normal;


							strong {
								font-weight: 500;
								font-size: 28px;
							}
						}

						span:last-child {
							color: #ffffff;
							font-family: "PingFang SC";
							font-size: 16px;
							font-style: normal;
							font-weight: 400;
							line-height: normal;
							width: 104px;
							padding: 5px 10px;
							flex-shrink: 0;
							border-radius: 16px;
							background: var(--ty_, linear-gradient(90deg, #5442F4 1.5%, #1F62D1 50.5%, #4285F4 100%));
							box-shadow: 0 0 8px 0 #2966ffe6;
						}
					}
				}

				@media (min-width: 1200px) {
					li {
						width: 19%;
						height: auto;
					}
				}
			}

			.more {


				text-align: center;
				color: #4285F4;

				cursor: pointer;

				margin-top: 22px;
				height: 22px;
				flex-shrink: 0;
				color: #4285f4;
				text-align: center;

				font-size: 16px;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
			}
		}
	}

	/* 数智化服务 */
	.services {
		background: url('../images/index/services-bg.png') center/100% 100% no-repeat;
		/* position: relative; */
		/* height: 800px; */

		.title {
			padding-top: 35px;
		}

		.container {

			padding-bottom: 68px;

			@media (min-width: 1200px) {
				display: flex;
				justify-content: space-between;

				.module {
					width: 49%;
				}
			}

			.module {
				background: url('../images/index/service-header.png') center/100% 100% no-repeat;
				/* position: relative; */
				padding: 20px;

				h3 {
					display: flex;
					align-items: center;
					margin-bottom: 20px;
					color: #000000;
					font-size: 2.4rem;
					font-style: normal;
					font-weight: 500;
					line-height: normal;

					img {
						height: 20px;
					}
				}

				ul {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.service-bg1 {
						background: url('../images/index/service-bg1.png') center/100% 100% no-repeat;
					}

					.service-bg2 {
						height: 68px !important;
						background: url('../images/index/service-bg2.png') center/100% 100% no-repeat;
					}

					.service-bg3 {
						background: url('../images/index/service-bg3.png') center/100% 100% no-repeat;
					}

					.service-bg4 {
						background: url('../images/index/service-bg4.png') center/100% 100% no-repeat;
					}


					.item {
						height: 78px;
						/* margin: 10px; */
						padding: 20px;
						margin-top: 10px;
						width: calc(50% - 5px);
						cursor: pointer;

						.bg {
							box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);

						}

						h4 {
							font-size: 1.8rem;
							font-weight: 500;
							color: #000;
							line-height: 0.6;
						}

						p {
							font-size: 12px;
							color: #AAB7CC;
						}

					}
				}

				.big {
					/* margin-bottom: 10px; */

					.item {
						height: 156px;
						padding: 20px;

						h4 {
							line-height: 1.5;
						}
					}
				}

				.medium {
					.item {
						width: 100%;
					}
				}
			}
		}
	}

	/* 数智化解决方案 */
	.solutions {
		.solutions-box1 {
			height: 175px !important;
			background: url('../images/index/solutions-header.png') center/100% 100% no-repeat;
		}

		.solutions-box2 {
			height: 500px !important;
			background: url('../images/index/solutions-bg.png') center/100% 100% no-repeat;
		}

		.solutions-box2 .container {
			display: none;
		}

		.solutions-box2 .active {
			display: flex;
		}

		/* position: relative; */
		/* height: 800px; */

		.bg {
			img {
				width: 100%;
				height: auto;
			}

			img:last-child {
				margin-top: -2px;
			}
		}

		.title {
			padding-top: 35px;
			padding-bottom: 5px;

			h2 {
				color: #fff;
			}
		}

		.nav {
			margin-top: 10px;
			display: flex;
			gap: 20%;
			justify-content: center;
			color: #fff;
			font-size: 18px;

			li {
				padding-bottom: 5px;
				position: relative;
				cursor: pointer;
			}

			li.active::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 25%;
				width: 50%;
				height: 3px;
				background-color: #00F0FF;
				border-radius: 3px;
			}
		}

		.container {
			display: flex;
			justify-content: space-between;
			margin-top: -2px;
			margin-bottom: 50px;

			.left {
				width: 30%;
				margin-top: 50px;
				display: flex;
				flex-direction: column;
				justify-content: center;

				.topic {
					color: #fff;

					h4 {
						/* font-size: 20px; */
					}

					p {
						/* font-size: 10px; */
					}
				}

				

				.option {
					margin-top: 50px;

					li {
						padding: 10px 10px;
						cursor: pointer;
						color: #fff;
						background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.0));
						border-left: none;
					}

					li.left-active {
						background: linear-gradient(to right, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.0));
						border-left: 5px solid #fff;
					}
				}
			}

			.right-box {
				display: none;
			}

			.right-active {
				display: block;
			}

			.right {
				position: relative;
				width: 70%;
				margin-top: 67px;
				padding: 40px 30px;
				background-color: #fff;
				border-radius: 5px;

				h2 {
					display: flex;
					align-items: center;
					/* font-size: 20px; */
					font-weight: 500;
					color: #000;

					img {
						height: 20px;
						margin-right: 5px;
					}
				}

				p {
					width: 75%;
					margin-top: 20px;
					margin-left: 20px;
					/* 	font-size: 12px; */
					color: #727272;
				}

				ul {
					width: 75%;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-top: 20px;
					margin-left: 20px;

					li {
						display: flex;
						align-items: center;
						width: 48%;
						padding: 10px 15px;
						margin-bottom: 15px;
						background-color: #E9F2FB;
						border-radius: 5px;
						color: #2D2D2D;
						height: 55px;

						img {
							width: 20px;
							height: auto;
							margin-right: 5px;
						}
					}
				}

				.icon {
					position: absolute;
					right: 0;
					bottom: 0;
					width: 25%;
				}
			}
		}
	}

	/* 天翼企业文化 */
	.culture {
		position: relative;
		/* height: 700px; */
		.title {
			padding-top: 35px;
		}

		.slogan {
			text-align: center;
			color: #4B5360;
			/* font-size: 14px; */
			line-height: 1.8;
			margin-top: 10px;
		}

		.container-wide {
			padding: 0 0px;
		}

		.rules {
			display: flex;
			justify-content: space-between;
			margin-top: 40px;

			li {
				display: flex;
				align-items: center;
				margin-right: 10px;

				img {
					width:8rem;
					height: auto;
					margin-right: 10px;
				}

				div {
					h4 {
						/* font-size: 18px; */
						font-weight: 600;
						color: #000;
					}

					p {
						/* max-width: ; */
						/* font-size: 14px; */
						color: #4B5360;
						padding-right: 10px;
					}
				}
			}

			/* 添加左侧竖线 */
			.line div {
				width: 1.5px;
				height: 50px;
				background: linear-gradient(180deg, rgba(74, 93, 123, 0) 0.5%, #5B96F6 41.5%, rgba(74, 93, 123, 0) 100%);
				margin-left: -15px;
			}

		}

		.values {
			position: relative;
			margin-top: 40px;
			margin-bottom: 150px;

			.bg {
				img {
					width: 100%;
					height: auto;
				}

				h2 {
					position: absolute;
					top:55%;
					left:50%;
					transform: translate(-35%, -55%);
					color: #fff;
					/* font-size: 22px; */
					font-weight: 600;
				}
			}

			ul {
				position: relative;
				height: 200px;

				li {
					/* 		width: 120px; */
					text-align: center;
					position: absolute;

					h4 {
						position: relative;

						img {
							width: 100px;
							height: auto;
						}

						span {
							position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%, -70%);
							font-size: 16px;
							color: #fff;
						}
					}

					p {
						/* font-size: 12px; */
						color: #0059EF;
					}
				}

				.v1 {
					top: 80%;
					left: 5%;
				}

				.v2 {
					top: 30%;
					left: 25%;
				}

				.v3 {
					top: 30%;
					right: 20%;
				}

				.v4 {
					top: 70%;
					right: 5%;
				}
			}
		}
	}

	/* 天翼最新动态 */
	.updates {
		background: linear-gradient(90deg, #F0F4FF 0%, #E3F0FF 100%);
		padding-bottom: 60px;

		/* height: 800px; */
		.title {
			padding-top: 35px;
		}

		ul {
			display: flex;
			gap: 30px;
			justify-content: space-between;
			margin-top: 10px;

			@media (max-width: 768px) {
				flex-wrap: wrap;
			}

			li {
				width: 100%;
				padding: 15px;
				background-color: #fff;
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
				border-radius: 10px;
				cursor: pointer;

				img {
					width: 100%;
					height: 239px;
				}

				h3 {
					margin-top: 10px;
					color: #000000;
					font-family: "OPPOSans";
					/* 	 font-size: 18px; */
					font-style: normal;
					font-weight: 500;
					line-height: normal;
				}

				p {

					color: #727272;
					margin-top: 10px;

					font-family: "OPPOSans";
					/* font-size: 14px; */
					font-style: normal;
					font-weight: 400;
					line-height: normal;
				}

				div {
					/* font-size: 14px; */
					color: #4285F4;
					margin-top: 10px;
					display: flex;
					justify-content: flex-end;
					align-items: center;

					img {
						width: 40px;
						height: auto;
						margin-right: 5px;
					}
				}
			}
		}
	}


	/* 自定义更宽的容器 */
	.container-wide {
		width: 100%;
		padding-right: var(--bs-gutter-x, 0.75rem);
		/* 继承 Bootstrap 的内边距 */
		padding-left: var(--bs-gutter-x, 0.75rem);
		margin-right: auto;
		margin-left: auto;
	}

	/* 响应式宽度控制（根据需求调整断点和 max-width） */
	@media (min-width: 576px) {
		.container-wide {
			max-width: 680px;
		}
	}

	@media (min-width: 768px) {
		.container-wide {
			max-width: 860px;
		}
	}

	@media (min-width: 992px) {
		.container-wide {
			max-width: 1100px;
		}
	}

	@media (min-width: 1200px) {
		.container-wide {
			max-width: 1500px;
			/* 默认 Bootstrap 大屏宽度 */
		}
	}