.banner{
    width: 100%;
    
    overflow: hidden;
    
    z-index: -1
}

.banner img{
    height: 100%;
    
}

#autoslide {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}


#pause{
    display: none;
}

@media (min-width:320px){
    
    .banner{
        height: 170px;
    }

}


@media (min-width:425px){
    
    .banner{
        height: 230px;
    }

}

@media (min-width:450px){
    
    .banner{
        height: 250px;
    }

}


@media (min-width:550px){
    
    .banner{
        height: 270px;
    }

}


@media (min-width:700px){
    
    .banner{
        height: 330px;
    }

}

@media (min-width:850px){
    
    .banner{
        height: 360px;
    }

}

@media (min-width:980px){
    
    .banner{
        height: 400px;
    }

}

@media (min-width:1100px){
    
    .banner{
        height: 500px;
        overflow: hidden;
    }

}

@media (min-width:1200px){
    
    .banner{
        width: 100%;
       
        overflow: hidden;
    }
    
    .banner img{
        height: auto;
        width: 100%;
    }

}


@media (min-width:1366px){
    
    .banner{
        width: 100%;
        height: 380px;
        overflow: hidden;
    }
    
    .banner img{
        height: auto;
        width: 100%;
    }

}

@media (min-width:1440px){
    
    .banner{
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
    
    .banner img{
        height: auto;
        width: 100%;
    }

}