/* lunbocss */  
* {  
  margin: 0;  
  padding: 0;  
}  
ul {  
  list-style: none;  
}  
  
#wrap {  
  overflow: hidden;  
  position: relative;  
  width: 100%;  
  height: auto;  
  margin: 50px auto 0;  
}  
  
#wrap .img-list {  
  display: flex;  
  position: relative;  
  left: 0px;  
  width: 100%;  
  height: auto;  
  object-fit: contain; /* 让图片适应容器，可能会被剪裁以保持宽高比 */  
  cursor: pointer;  
  transition: 0.5s ease;  
}  
  
#wrap .img-list img {  
  width: 100%;  
  max-width: 100%;  
  height: auto;  
  object-fit: contain; /* 图片将被缩放并填充整个容器，同时保持其宽高比 */  
  cursor: pointer;  
}  
  
#wrap a {  
  position: absolute;  
  top: 50%;  
  transform: translate(0, -50%);  
  display: block;  
  width: 40px;  
  height: 70px;  
  background-color: rgba(0, 0, 0, 0.7);  
  color: white;  
  user-select: none;  
  font-size: 30px;  
  text-align: center;  
  line-height: 70px;  
  text-decoration: none;  
}  
  
#wrap a.left {  
  left: 0;  
}  
  
#wrap a.right {  
  right: 0;  
}  
  
.circle-list {  
  display: flex;  
  position: absolute;  
  bottom: 20px;  
  left: 50%;  
  transform: translate(-50%, 0);  
  width: 240px;  
  height: 40px;  
  z-index: 8;  
}  
.circle-list > .circle {  
  margin: 0 5px;  
  width: 30px;  
  height: 30px;  
  background-color: #ecf0f1;  
  border-radius: 50%;  
}  
.circle-list > .circle.active {  
  background-color: #e74c3c;  
}  
  
/* 媒体查询，根据屏幕宽度调整元素大小 */  

@media (max-width: 768px) {  
  #wrap {  
    width: 640px; /* 当屏幕宽度小于或等于768px时，宽度为100% */  
  }  
}  
@media (min-width: 769px) and (max-width: 1226px) {  
  #wrap {  
    width: 900px; /* 当屏幕宽度在769px到1226px之间时，宽度为800px */  
  }  
}  
@media (min-width: 1227px) {  
  #wrap {  
    width: 1226px; /* 当屏幕宽度大于1226px时，宽度为1226px */  
  }  
}