﻿.frame {
    width: 100%;
    height: 300px;
    margin: 0 auto;
}

.banners {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    background-color: rgba(200,200,200,0.5);
}

    .banners:hover .click_left {
        display: block;
    }

    .banners:hover .click_right {
        display: block;
    }

.click_left {
    width: 3vw;
    position: absolute;
    z-index: 10;
    left: 2vw;
    display: none;
    margin-top: 2vw;
    cursor:pointer;
}

.click_right {
    width: 3vw;
    position: absolute;
    z-index: 10;
    right: 2vw;
    display: none;
    margin-top: 2vw;
    cursor: pointer;
}

    .click_left img, .click_right img {
        width: 100%;
        height: 100%;
    }

.number {
    width: 100%;
    height: 1vw;
    line-height: 1vw;
    position: absolute;
    z-index: 10;
    text-align: center;
    bottom: 1.5vw;
}

.numbers {
    display: inline-block;
}

    .numbers span {
        color: white;
        font-size: 0.7vw;
        font-weight: 300;
        display: block;
        float: left;
        width: 1.4vw;
        height: 1.4vw;
        line-height: 1.4vw;
        text-align: center;
        border-radius: 100vw;
        margin: 0 0.5vw;
    }

        .numbers span:hover {
            cursor: pointer;
        }

.banner_img {
    width: 100%;
    height: 100%;
}

    .banner_img img {
        width: 100%;
        height: 100%;
        position: absolute;
        break-inside: 1;
    }
