.banner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow:hidden;
}

.banner_box {
    display: flex;
    flex-wrap: nowrap;
    /* width: 100vw; */
    transition: transform 0.5s ease;
    will-change: transform;
}

.banner_box li {
    flex: 0 0 100%;
    list-style: none;
    /* overflow: hidden; */
    height: calc(100vh - 158px); 
}

.banner_box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* object-position: center; */
    /* min-width: 100%; */
    /* min-height: 100%; */
    display: block;
}


.dots {
    position: absolute;
    left:50%;
    bottom: 26px;
    transform: translateX(-50%);
    display: flex;
    gap: 14px;
    z-index: 3;
}

.dot {
    width: 16px;
    height: 16px;
    border-radius:50%;
    background:#fff;

    border:1px solid #fff;
    cursor: pointer;
}

.dot.active {
    width: 60px;
    height: 16px;
    border-radius:8px;
}
.arrow_box {
    transform: rotate(90deg);
}