/* 轮播图的css */
.wrapper {
		width: 100%;
		height: 48.75rem;
		border: 1px solid skyblue;
		position: relative;
		/* padding-top: 3.875rem; */
}

/* 5张图片叠加到一块 */
.wrapper li {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: none;
}
.wrapper .wrapper-title {
	position: absolute;
	/* top: 40%; */
	left: 3%;
	bottom: 8%;
	font-family: 'Source Han Sans CN';
	font-style: normal;
	font-weight: 500;
	font-size: 24px;
	color: #ffffff;
}
.wrapper-title .title-h1 {
	margin-bottom: 50px;
	font-size: 52px;
}
.wrapper img {
		width: 100%;
		height: 100%;
}

.wrapper li:nth-of-type(1) {
		display: block;
}

/* 小圆点 */
.btn {
		width: 150px;
		display: flex;
		justify-content: space-around;
		position: absolute;
		left: 46%;
		bottom: 10px;
		z-index: 100
}

.btn span {
		display: block;
		width: 15px;
		height: 15px;
		border: 1px solid white;
		border-radius: 50%;
		background-color: #CCCCCC;
}

/* 左右箭头 */
.wrapper a {
		text-decoration: none;
		font-size: 26px;
		color: white;
		position: absolute;
		top: 48%;
		cursor: pointer;
}

.wrapper a:nth-of-type(1) {
		left: 1%;

}

.wrapper a:nth-of-type(2) {
		right: 1%;
}

.btn .active {
		background-color: white;
}

/* Example for smaller screens */
@media screen and (max-width: 1200px) {
  .wrapper {
    height: 30rem; /* Reduce height for smaller screens */
  }

  .wrapper .wrapper-title {
    font-size: 18px; /* Smaller font size */
    left: 5%; /* Adjust left position */
    bottom: 5%; /* Adjust bottom position */
  }

  .wrapper-title .title-h1 {
    font-size: 36px; /* Smaller font size */
    margin-bottom: 30px; /* Reduce margin */
  }

  .btn {
    width: 100px; /* Reduce width */
    /* left: 40%; */
    bottom: 5px; /* Adjust bottom position */
  }

  .btn span {
    width: 12px; /* Smaller width */
    height: 12px; /* Smaller height */
  }

  .wrapper a {
    font-size: 20px; /* Smaller font size */
    top: 45%; /* Adjust top position */
  }

  .wrapper a:nth-of-type(1) {
    left: 2%; /* Adjust left position */
  }

  .wrapper a:nth-of-type(2) {
    right: 2%; /* Adjust right position */
  }
}

@media screen and (max-width: 480px) {
  .wrapper {
    height: 25rem; /* Further reduce height for very small screens */
  }

  .wrapper .wrapper-title {
    font-size: 16px; /* Even smaller font size */
    left: 3%; /* Adjust left position */
    bottom: 3%; /* Adjust bottom position */
  }

  .wrapper-title .title-h1 {
    font-size: 28px; /* Even smaller font size */
    margin-bottom: 20px; /* Further reduce margin */
  }

  .btn {
    width: 80px; /* Further reduce width */
    left: 35%; /* Adjust left position */
    bottom: 3px; /* Adjust bottom position */
  }

  .btn span {
    width: 10px; /* Even smaller width */
    height: 10px; /* Even smaller height */
  }

  .wrapper a {
    font-size: 18px; /* Even smaller font size */
    top: 40%; /* Adjust top position */
  }

  .wrapper a:nth-of-type(1) {
    left: 3%; /* Adjust left position */
  }

  .wrapper a:nth-of-type(2) {
    right: 3%; /* Adjust right position */
  }
}