.circle-container {
	position: relative;
	width: 50%;
	height: 50%;
	border-radius: 50%;
	border: 6px dashed #fff;
	/* -webkit-transform-style: preserve-3d;
	-webkit-transform: perspective(800px) rotateY(0deg) rotateX(0deg); */
	/* animation: move 5s infinite alternate; */
}

.circle-item {
	position: absolute;
	width: 200px;
	height: 110px;
	/* border-radius: 50%; */
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	/* transform-style: preserve-3d; */ /* 保持3D效果 */
	/* animation: flip 1s ease-in-out; /* 应用翻转动画，持续1秒，使用ease-in-out缓动 */
    /* transform-origin: 50% 250px;
    animation: rotate 10s linear infinite; */
}

/* 定义翻转动画 */
@keyframes flip {
    from {
        transform: rotateY(0); /* 从0度开始 */
    }
    to {
        transform: rotateY(360deg); /* 旋转360度 */
    }
}

.circle-item img {
	width: 180px;
	height: 90px;
}

.center-item {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 300px;
	height: 180px;
	/* border-radius: 50%; */
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	z-index: 100;
}

.center-item img {
	width: 280px;
	height: 140px;
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes move {
    0% {
        transform: rotateY(20deg) rotateZ(10deg);
    }
    100% {
        transform: rotateY(-60deg) rotateZ(-10deg);
    }
}