.banner { width: 100%; height: 500px; overflow: hidden; position: relative; }
.banner > ul { display: block; height: 500px; position: absolute; top:0; left: 0; }
.banner > ul > li  { float:left; height: 500px; }
.banner > ul > li > a { display: block; font-size: 200px; text-align: center; line-height: 500px; font-weight: bold; }
.banner > ul > li > a > img{width:100%; height:500px;}
.left-btn,.right-btn { width: 63px; height: 122px; position: absolute; top: 30%; right: 30px; background: url("../images/right-1.png"); cursor: pointer; }
.left-btn { left: 30px; background: url("../images/left-1.png"); }
.img-btn-list { width: 100%; position: absolute; bottom: 40px; left: 0; text-align: center; }
.img-btn-list > span  { display: inline-block; width: 15px; height: 15px; border-radius: 12px; margin: 0 5px; background: rgba(0,0,0,0.8); cursor: pointer; }
.img-btn-list > span.current { border: 1px solid rgba(0,0,0,0.8); background: rgba(255,255,255,0.8); }

@media screen and (min-width: 1400px) {
    .banner { width: 100%; height: 550px; overflow: hidden; position: relative; }
    .banner > ul { display: block; height: 550px; position: absolute; top:0; left: 0; }
    .banner > ul > li  { float: left; height: 550px; }
    .banner > ul > li > a { display: block; font-size: 200px; text-align: center; line-height: 550px; font-weight: bold; }
    .banner > ul > li > a > img{width:100%; height:550px;}
    .left-btn,.right-btn { width: 63px; height: 122px; position: absolute; top: 45%; right: 30px; background: url("../images/right-1.png"); cursor: pointer; }
    .left-btn { left: 30px; background: url("../images/left-1.png"); }
    .img-btn-list { width: 100%; position: absolute; bottom: 40px; left: 0; text-align: center; }
    .img-btn-list > span  { display: inline-block; width: 15px; height: 15px; border-radius: 12px; margin: 0 5px; background: rgba(0,0,0,0.8); cursor: pointer; }
    .img-btn-list > span.current { border: 1px solid rgba(0,0,0,0.8); background: rgba(255,255,255,0.8); }
}

@media screen and (max-width: 1300px) {
    .banner { width: 100%; height: 450px; overflow: hidden; position: relative; }
    .banner > ul { display: block; height: 450px; position: absolute; top:0; left: 0; }
    .banner > ul > li  { float: left; height: 450px; }
    .banner > ul > li > a { display: block; font-size: 200px; text-align: center; line-height: 450px; font-weight: bold; }
    .banner > ul > li > a > img{width:100%; height:450px;}
    .left-btn,.right-btn { width: 63px; height: 122px; position: absolute; top: 35%; right: 30px; background: url("../images/right-1.png"); cursor: pointer; }
    .left-btn { left: 30px; background: url("../images/left-1.png"); }
    .img-btn-list { width: 100%; position: absolute; bottom: 40px; left: 0; text-align: center; }
    .img-btn-list > span  { display: inline-block; width: 15px; height: 15px; border-radius: 12px; margin: 0 5px; background: rgba(0,0,0,0.8); cursor: pointer; }
    .img-btn-list > span.current { border: 1px solid rgba(0,0,0,0.8); background: rgba(255,255,255,0.8); }
}