@charset"UTF-8";


.slide-wrapper {
width: calc(100% - 2rem);
height: auto;
margin: auto 1%;
position: relative;
overflow: hidden;
}
.slide {
height: 100%;
display: flex;
transition: all 0.3s;
}
.slide div {
height: 100%;
width: 100%;
font-size: 16px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.slide div:nth-of-type(1) {
background-color: #21323a;
}
.slide div:nth-of-type(2) {
background-color: #21323a;
}
.slide div:nth-of-type(3) {
background-color: #21323a;
}
.slide div:nth-of-type(4) {
background-color: #21323a;
}
.slide div:nth-of-type(5) {
background-color: #21323a;
}
.slide div:nth-of-type(6) {
background-color: #21323a;
}
.slide div:nth-of-type(7) {
background-color: #21323a;
}
.slide div:nth-of-type(8) {
background-color: #21323a;
}
.slide div:nth-of-type(9) {
background-color: #21323a;
}
.next, .prev {
position: absolute;
width: 20px;
height: 20px;
bottom: 50%;
z-index: 10;
cursor: pointer;
border-top: solid 5px #fff;
border-right: solid 5px #fff;
}

.next {
right: 10px;
transform: rotate(45deg) translateY(50%);
}
.prev {
left: 25px;
transform: rotate(-135deg) translateY(-50%);
}
.indicator {
width: 100%;
position: absolute;
bottom: 20px;
display: flex;
column-gap: 18px;
z-index: 10;
justify-content: center;
align-items: center;
opacity: 0.01;
}
.indicator li {
width: 14px;
height: 14px;
border-radius: 50%;
background-color: #fff;
border: 2px #000 solid;
cursor: pointer;
}
.indicator li.active {
background-color: #000;
}