@charset "utf-8";
/* CSS Document */
		* {
			box-sizing: border-box;
		}
		body {
			font-family: Arial, sans-serif;
			margin: 0;
			padding: 0;
		}
		.container {
			max-width: 1200px;
			margin: 0 auto;
			padding: 20px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.item {
			width: calc(33.33% - 20px);
			margin-bottom: 40px;
			background-color: #f2f2f2;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0,0,0,0.2);
		}
		.item img {
			max-width: 100%;
			height: auto;
			margin-bottom: 10px;
		}
		.item h3 {
			font-size: 18px;
			margin: 0;
			margin-bottom: 10px;
		}
		.item p {
			font-size: 14px;
			margin: 0;
			margin-bottom: 20px;
		}
		.item button {
            font-size: 16px;
			cursor: pointer;
			background-color: #4CAF50;
			color: white;
			border: none;
			padding: 10px 20px;
			border-radius: 5px;
			cursor: pointer;
			transition: background-color 0.3s ease;
		}
		.item button:hover {
			background-color: #3e8e41;
		}
		@media screen and (max-width: 768px) {
			.item {
				width: calc(50% - 20px);
			}
		}
		@media screen and (max-width: 480px) {
			.item {
				width: 100%;
			}
		}
/*导航盒子*/
                .box {
  color: #FFFFFF;                  
  width: 400px;
  height: 150px;
  margin: 10px auto;
  padding: 5px;
  border: 1px solid #49A0A4;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  background-color: #49A0A4;
  text-align: center;
  position: relative;
}
              .box:before {
               content: "";
             position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: -1;
}
          /*文字跳动*/
		@keyframes jump {
			0% {
				transform: translateY(0) rotate(0);
			}
			25% {
				transform: translateY(-5px) rotate(-5deg);
			}
			50% {
				transform: translateY(0) rotate(0);
			}
			75% {
				transform: translateY(-5px) rotate(5deg);
			}
			100% {
				transform: translateY(0) rotate(0);
			}
		}
		h1 {
			animation: jump 1s ease-in-out infinite;
		}
/*文字四周游*/
		@keyframes move {
			0% {
				transform: translate(0, 0);
			}
			25% {
				transform: translate(50%, 0);
			}
			50% {
				transform: translate(50%, 50%);
			}
			75% {
				transform: translate(0, 50%);
			}
			100% {
				transform: translate(0, 0);
			}
		}
		li {
            color: #F90307;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-25%, -25%);
			animation: move 5s ease-in-out infinite;
		}
      /*弹窗测试*/
		.overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: none;
			justify-content: center;
			align-items: center;
		}
		.popup {
			background-color: #fff;
			padding: 20px;
			border-radius: 5px;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
			max-width: 500px;
			text-align: center;
		}
		.close {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 20px;
			color: #ED8183;
			cursor: pointer;
		}
