body{
    font-family: "Microsoft YaHei", sans-serif;
}

.container{

    position: fixed;
    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

}

.banner{

    border-radius: 4px;
    box-shadow: 0 0 10px 0;

    width: 400px;
    height: 300px;


    position: relative;

    overflow: hidden;
}

.banner-action{
    position: absolute;
    top: 0;

    width: 20%;
    height: 100%;

    cursor: pointer;

    background-color: rgba(0,0,0,0);
    opacity: 0;

    z-index: 999;

    transition: background-color 0.3s, opacity 0.3s;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
}

.banner-action:hover{
    background-color: rgba(0,0,0,0.4);
    opacity: 1;
}

.banner-action:active{
    background-color: rgba(0,0,0,0.6);
    opacity: 1;
}

.banner-action-back{
    left: 0;
}

.banner-action-front{
    right: 0;
}

.banner-item{
    position: absolute;
    
    width: 100%;
    height: 100%;

    top: 0;
    left: 0;


    display: flex;
    justify-content: center;
    align-items: center;

    transition: left 0.3s;
}


#banner-item-left{
    left: -400px;
}

#banner-item-middle{
    left: 0px;
}

#banner-item-right{
    left: 400px;
}

.banner-item img{
    max-width: 100%;
    max-height: 100%;
}