body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  /* 确保高度适配内容 */
  overflow-x: hidden;
  /* 禁止水平滚动 */
}

@font-face {
  font-family: 'ZCOOLWenYi';
  src: url('fonts/站酷文艺体.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

.map-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.map-background {
  position: absolute;
  /* 背景随内容滚动 */
  top: 0;
  left: 0;
  width: 100%;
  /* 宽度适配窗口 */
  height: 1080px;
  /* 初始高度 */
  
  background-size: cover;
  /* 背景图覆盖 */
  background-position: center;
  /* 居中显示 */
  background-repeat: no-repeat;
  /* 不重复 */
  z-index: -1;
  /* 确保背景在内容下方 */
}

.line-上海,
.line-江苏,
.line-浙江,
.line-福建,
.line-广东,
.line-湖北,
.line-河南,
.line-青海,
.line-西藏 {
  position: absolute;
  width: auto;
  height: auto;
}

.line-上海 {
  top: 50%;
  left: 50%;
}

.line-江苏 {
  top: 40%;
  left: 45%;
}

.line-浙江 {
  top: 45%;
  left: 52%;
}

.line-福建 {
  top: 60%;
  left: 58%;
}

.line-广东 {
  top: 70%;
  left: 48%;
}

.line-湖北 {
  top: 55%;
  left: 43%;
}

.line-河南 {
  top: 45%;
  left: 40%;
}

.line-青海 {
  top: 30%;
  left: 20%;
}

.line-西藏 {
  top: 25%;
  left: 10%;
}

.line-* img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.year-buttons {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 10px;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  border-radius: 8px;
}

.year-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  width: 20%;
  height: auto;
}

.year-btn img {
  width: 100%;
  height: 100%;
}

.year-btn.active img {
  content: attr(data-img-active);
}

.popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  aspect-ratio: 16 / 9;
  border-radius: 10px;
}

.popup-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 20px;
 
  background-image: url('images/01-bg-1.png');
  background-size: cover;
  padding: 30px;
  aspect-ratio: 16 / 9; /* 设置图片和视频的16:9比例 */
  width: 80%;
  height: 65%;
  max-width: 800px;
  max-height: 450x; 
  z-index: 10;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.close-button {
  position: absolute;
  top: 1%;
  right: 1%;
  font-size: 40px;
  color: red;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
}



.popup-logo1{
	position: absolute;
	top: 5%;
	right: 32%;
	width: 5%;
	background: none;
	border: none;
	z-index: 10;	
}
.popup-logo2{
	position: absolute;
	top: 10%;
	right: 32%;
	width: 5%;
	background: none;
	border: none;
	z-index: 10;	
}

/* 轮播区域样式，已有的部分保持不变 */
.carousel {
	display: flex;
	align-items: center;
	position: relative;
	width: 100%;
	overflow: hidden;
	flex-direction: column;
	align-items: center;
}

/* 左右箭头样式，已有的部分保持不变 */
.arrow {
	font-size: 30px;
	background: rgba(0, 0, 0, 0.5);
	color: darkgoldenrod;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
	padding: 10px;
}

#prev-arrow, #next-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	cursor: pointer;
	padding: 10px;

	/* 去除原有按钮背景相关的样式设置 */
	background: none;
	border: none;

	/* 设置按钮内图片的样式 */
	img {
		width: 40px; /* 根据图片实际大小调整宽度，可自行设置合适的值 */
		height: auto;
	}
}

#prev-arrow {
	left: 10px;
}

#next-arrow {
	right: 10px;
}


.description-container {
	display: flex;
	flex-direction: row;
	justify-content:space-between; /* 可根据需要调整对齐方式 */
	align-items: flex-start;
	width: 100%;

}

/* 轮播容器样式，用于放置图片和视频 */
#carousel-container {
	 
	display: flex;
	justify-content: center;
	align-items: center;

	width: 100%;
	height: 100%;
}

/* 图片和视频样式，已有的部分保持不变 */
.carousel img,.carousel video {
	
	width: 98%;
	height: auto;
	aspect-ratio: 16 / 9; /* 设置图片和视频的16:9比例 */
	border-radius: 20px; /* 设置图片和视频的圆角效果，可根据需要调整半径值 */
	z-index: 9;

	/* 添加以下属性来显示轮廓线 */
	outline: 1px solid #3c8c00; /* 这里设置轮廓线宽度为2px，颜色为#3c8c00，可根据需要调整 */
}

.part-one {
	font-family: 'ZCOOLWenYi', sans-serif;
	font-size: 28px;
	color: #3c8c00;
	margin-bottom: 3%; /* 清除之前设置的底部间距，因为现在通过flex布局来控制间隔 */
	text-align: left; /* 明确设置靠左对齐，虽然默认就是靠左，但为了确保一致性添加此属性 */
}

.part-two {

	font-family: 'Source Han Sans', sans-serif;
	font-size: 22px;
	color: #1f1a17;
	margin-top: 5px;
	text-align: left; /* 明确设置靠左对齐，虽然默认就是靠左，但为了确保一致性添加此属性 */
	margin-left: 0;
}

.part-three {
	font-family: 'Source Han Sans', sans-serif;
	font-size: 16px;
	color: #3c8c00;
	text-align: left; /* 设置第三部分靠右对齐 */
	margin-bottom: 5px;
	margin-right: 20px;
}



/* Media Queries for iPad and Mobile */
@media (max-width: 1024px) {
 .map-container {
    width: 100%;
    height: auto;
  }

 .popup-content {
    width: 85%;
  }

 .carousel img,
 .carousel video {
    max-width: 500px;
  }

 .part-one {
    font-size: 28px;
  }

 .part-two {
    font-size: 18px;
  }

 .part-three {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
 .map-container {
    width: 100%;
    height: auto;
  }

 .year-buttons {
    top: 5px;
    right: 5px;
    gap: 5px;
  }

 .popup-content {
    width: 95%;
  }

 .carousel img,
 .carousel video {
    max-width: 400px;
  }

 .part-one {
    font-size: 24px;
  }

 .part-two {
    font-size: 16px;
  }

 .part-three {
    font-size: 12px;
  }
}

@media (max-width: 375px) {
 .map-container {
    width: 100%;
    height: auto;
  }

 .year-buttons {
    top: 5px;
    right: 5px;
    gap: 3px;
  }

 .popup-content {
    width: 95%;
  }

 .carousel img,
 .carousel video {
    max-width: 300px;
  }

 .part-one {
    font-size: 20px;
  }

 .part-two {
    font-size: 14px;
  }

 .part-three {
    font-size: 10px;
  }
}