html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
.banner{width:100%;height:340px;float:left;background:#ccc;position:relative;}
.bullet{float:left;width:100%;position:absolute;bottom:2em;padding-left:43%;}
.bullet > .b1,
.bullet > .b2,
.bullet > .b3,
.bullet > .b4,
.bullet > .b5,
.bullet > .b6,
.bullet > .b7,
.bullet > .b8{float:left;border:1px solid #fff;background:rgba(255,255,255,0.4);padding:4.5px;border-radius:50%;margin-left:5px;cursor:pointer;}
.banner > img{float:left;width:100%;height:100%;position:absolute;background-size:100% 100%;}
.bullet > .bullet_hover.active{background:rgba(255,255,255,0.9);}
.arrowLeft{float:left;width:50px;height:50px;background:green;position:relative}

@media only screen and (min-width:200px) and (max-width:360px){
.banner{width:100%;height:150px;float:left;background:#ccc;position:relative;}
.bullet{float:left;width:100%;position:absolute;bottom:0.5em;padding-left:42%;}	
}
@media only screen and (min-width:360px) and (max-width:767px){
.banner{width:100%;height:220px;float:left;background:#ccc;position:relative;}
.bullet{float:left;width:100%;position:absolute;bottom:0.5em;*padding-left:50%;}		
}
@media only screen and (min-width:768px) and (max-width:992px){
.banner{width:100%;height:250px;float:left;background:#ccc;position:relative;}
.bullet{*float:left;width:100%;position:absolute;bottom:0.5em;*padding-left:50%;margin:0 auto;}	
}