.banner {
	width: 100%;
	height: 595px;
	margin-top: 20px;
	text-align: center;
	background: url(/Public/Home/images/bannersbj.png) no-repeat;
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.cont p {
	display: block;
	width: 290px;
	height: 33px;
	background: url(/Public/Home/images/text.png) center center no-repeat;
	z-index: 1111111;
	margin-top: 166px;
	background-size: cover;
}
.rotation3D__item.active .cont p{
	display: block;
	width: 290px;
	height: 33px;
	background: url(/Public/Home/images/textadd.png) center center no-repeat;
	z-index: 1111111;
	margin-top: 166px;
	background-size: cover;
}
#app {
	width: 1200px;
	height: 500px;
}

.rotation3D-baseMap {
	position: absolute;
	left: 10px;
	right: 0;
	top: 40px;
	margin: auto;
	width: 1312px;
	height: 516px;
	background: url("/Public/Home/images/baseMap1.png") center center no-repeat;
}

.rotation3D {
	position: relative;
	width: 800px;
	height: 600px;
	cursor: move;
	user-select: none;
	margin: 0 auto;
	margin-top: -50px;
}

.rotation3D .center {
	display: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

.rotation3D .itemList {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 20000000;
	margin-left: -35%;
}

.rotation3D .lineList {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 10;
	transform-style: preserve-3d;
}

.rotation3D__item {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	display: block;
	cursor: pointer;
	width: 260px;
	height: 160px;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	color: white;
	/* background: #2292ef; */
	/* border-radius: 4px; */
}

.rotation3D__item .scale {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
}

.rotation3D__item .cont {
	position: relative;
	z-index: 2;
}

.rotation3D__item .cont .iconfont {
	font-size: 28px;
	margin-top: 30px;
	margin-bottom: 60px;
	display: block;
}

/*底座*/
.rotation3D__item .baseImg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.rotation3D__item.blue1 .baseImg {
	background: url("/Public/Home/images/01.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item:nth-child(1).active .baseImg {
	background: url("/Public/Home/images/01_active.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item.blue2 .baseImg {
	background: url("/Public/Home/images/02.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item:nth-child(2).active .baseImg {
	background: url("/Public/Home/images/02_active.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item.blue3 .baseImg {
	background: url("/Public/Home/images/03.png") 50% no-repeat;
	/* background-size: cover; */
	background-size: 86%;
}

.rotation3D__item:nth-child(3).active .baseImg {
	background: url("/Public/Home/images/03_active.png") 50% no-repeat;
	/* background-size: cover; */
	background-size: 86%;
}

.rotation3D__item.blue4 .baseImg {
	background: url("/Public/Home/images/04.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item:nth-child(4).active .baseImg {
	background: url("/Public/Home/images/04_active.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item.blue5 .baseImg {
	background: url("/Public/Home/images/05.png") 50% no-repeat;
	/* background-size: cover; */
	background-size: 86%;
}

.rotation3D__item:nth-child(5).active .baseImg {
	background: url("/Public/Home/images/05_active.png") 50% no-repeat;
	/* background-size: cover; */
	background-size: 86%;
}

.rotation3D__item.blue6 .baseImg {
	background: url("/Public/Home/images/06.png") 50% no-repeat;
	/* background-size: cover; */
	background-size: 78%;
}

.rotation3D__item:nth-child(6).active .baseImg {
	background: url("/Public/Home/images/06_active.png") 50% no-repeat;
	/* background-size: cover; */
	background-size: 78%;
}

.rotation3D__item.blue7 .baseImg {
	background: url("/Public/Home/images/07.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item:nth-child(7).active .baseImg {
	background: url("/Public/Home/images/07_active.png") 50% no-repeat;
	background-size: cover;
}
.rotation3D__item.blue8 .baseImg {
	background: url("/Public/Home/images/08.png") 50% no-repeat;
	background-size: cover;
}

.rotation3D__item:nth-child(8).active .baseImg {
	background: url("/Public/Home/images/08_active.png") 50% no-repeat;
	background-size: cover;
}
/*  */
.rotation3D__line {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 2px;
	height: 50%;
	padding-top: 60px;
	color: #fff;
	font-size: 50px;
	/*background: #fff;*/
	/*原点设置在中间*/
	transform-origin: 50% 0;
	transform-style: preserve-3d;
}

.rotation3D__line .pos {
	position: absolute;
	top: 0;
}

.rotation3D__line svg {
	position: absolute;
	top: 0;
}

.rotation3D__line svg path {
	stroke: #fff;
	fill: none;
	stroke-width: 3;
	animation: path-animation 100s linear 0s infinite normal;
}

@keyframes path-animation {
	0% {
		stroke-dashoffset: 800;
	}

	100% {
		stroke-dashoffset: 0;
	}
}

.rotation3D__line .dot {
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	width: 24px;
	height: 24px;
	font-size: 24px;
}

.rotation3D__line .dot1,
.rotation3D__line .dot3,
.rotation3D__line .dot4 {
	animation: svg-path-animation 6s ease-in-out 0s infinite normal;
}

.rotation3D__line .dot1 {
	offset-path: path("M0 400, 0 0");
	offset-distance: 0%;
}

.rotation3D__line .dot2 {
	offset-path: path("M0 200, 0 0");
	offset-distance: 0%;
	border-radius: 100%;
	font-size: 22px;
	color: #000;
}

.rotation3D__line .dot3 {
	offset-path: path("M20 400 S 0 200, 20 0");
	offset-distance: 0%;
}

.rotation3D__line .dot4 {
	offset-path: path("M20 0 S 40 200, 20 400");
	offset-distance: 0%;
}

@keyframes svg-path-animation {
	from {
		offset-distance: 0%;
	}

	to {
		offset-distance: 100%;
	}
}