@charset "utf-8";
/* slide
--------------------------------------------------------- */
.slides{
    margin: 0 auto;
    position: relative;
    width: 100%;
    aspect-ratio: 2304/1400;
}
.slides li{
    opacity: 0;
    transition: opacity 2s ease;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.slides li.active{
    opacity: 1;
    z-index: 1;
}
    @media screen and (max-width:600px) {
        .slides{width: 100%; height: auto; overflow: hidden; aspect-ratio: 750/540;}
        .slides li{display: flex; justify-content: center; align-items: center;}
        .slides li img{width: 120%; height: auto;}
    }

.dots{
  display: flex;
  justify-content: center;
  gap: 17px;
  margin-top: 20px;
}
.dots span{
  width: 10px;
  height: 10px;
  background: #e3e3e3;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.dots span.active{background: #bfbfbf;}
    @media screen and (max-width:600px) {
        .dots{margin-top:15px;gap: 12px;}
        .dots span{width:8px; height:8px;}
    }