.mian{
  position: relative;
  width: 100%;
  height: 380px;
  overflow: hidden;
}
.carousel{
  display: flex;
  width: 100%;
  height: 100%;
  transform: translateX(0px);
  transition: all 0.5s;
}
.carousel img{
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  object-fit: contain;
}
.left,.right{
  position: absolute;
  top: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, .3);
  cursor: pointer;
  transform: translateY(-12px);
  background-repeat: no-repeat;
  background-size: 60%;
  background-position: center;
  transition: all .3s;
}
.left{
  left: 5px;
  background-image: url('../images/banner/left.png');
}
.right{
  right: 5px;
  background-image: url('../images/banner/right.png');
}
.left:hover{
  background-color: rgba(0, 0, 0, .7);
}
.right:hover{
  background-color: rgba(0, 0, 0, .7);
}
.indexBox{
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}
.indexBox span{
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 1px solid #ddd;
  border-radius: 50%;
  margin: 0 1.5px;
  transition: all .3s;
}
.indexBox span.actve{
  background: #ddd;
}
@media screen and (max-width:768px){
  .mian{
    height: 275px;
  }
}