.carousel {
    width: 60%;
    margin: 16px auto;
}

.service-img {
    padding: 30px 0;
    width: 100%;
    height: 600px;
    overflow: hidden;
    position: relative;
}

.service-img ul {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    transition: transform .3s;
}

.service-img li {
    min-width: 100%;
    height: 100%;
}

.service-img li img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#prev0,
#next0 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 40px;
    padding: 0 8px 4px;
    cursor: pointer;
}

#prev0:hover,
#next0:hover {
    opacity: .8;
} 

#prev0 {
    left: 0;
}

#next0 {
    right: 0;
}

#prev1,
#next1 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 40px;
    padding: 0 8px 4px;
    cursor: pointer;
}

#prev1:hover,
#next1:hover {
    opacity: .8;
} 

#prev1 {
    left: 0;
}

#next1 {
    right: 0;
}

#prev2,
#next2 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 40px;
    padding: 0 8px 4px;
    cursor: pointer;
}

#prev2:hover,
#next2:hover {
    opacity: .8;
} 

#prev2 {
    left: 0;
}

#next2 {
    right: 0;
}

.hidden {
    display: none;
}

.carousel nav button + button {
    margin-left: 8px;
}
.carousel nav button {
    border: none;
    width: 16px;
    height: 16px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
}

.carousel nav .current {
    background: #999;
}