﻿.train_banner{position:relative;overflow:hidden;width:100%;max-height:600px; margin:0 auto;}
.train_banner .banner_images{width:1000%;}
.train_banner .banner_images li{float:left;width:10%;}
.train_banner .banner_images li a{display:block;width:100%}
.train_banner .banner_images li a img{display:block;width:100%;object-fit:cover}


.train_banner .banner_index{position:absolute;bottom:20px;width:100%;text-align:center}
.banner_index-frame{display:inline-block}
.train_banner .banner_index li{float:left;margin-right:15px;width:10px;height:10px;border-radius:50%;background:#fff;transition:all .3s}
.train_banner .banner_index li.current{width:40px;border-radius:5px;background-color:#1998da;transition:all .3s}
.train_banner .banner_index li:hover{transform:scale(1.5)}
.train_banner .banner_index li.current:hover{transform:scale(1)}



.train_banner_left{position:absolute;top:0;left:0;z-index:5;width:5%;height:100%;background:-webkit-linear-gradient(left,#000,rgba(255,255,255,0));background:-o-linear-gradient(right,#000,rgba(255,255,255,0));background:-moz-linear-gradient(right,#000,rgba(255,255,255,0));background:linear-gradient(to right,#000,rgba(255,255,255,0));color:#fff;text-align:center;opacity:.3;cursor:pointer;transition:all .5s}
.train_banner_right{position:absolute;top:0;right:0;z-index:5;width:5%;height:100%;background:-webkit-linear-gradient(left,rgba(255,255,255,0),#000);background:-o-linear-gradient(right,rgba(255,255,255,0),#000);background:-moz-linear-gradient(right,rgba(255,255,255,0),#000);background:linear-gradient(to right,rgba(255,255,255,0),#000);color:#fff;text-align:center;opacity:.3;cursor:pointer;transition:all .5s}
.train_banner_left:hover,.train_banner_right:hover{display:block;opacity:.5}
.train_banner_li{position:absolute;top:50%;width:100%;text-align:center}

@media (max-width: 1199px) {
.train_banner .banner_images li a img{display:block; height:450px; object-fit:cover}
}

@media (max-width: 992px) {
.train_banner .banner_images li a img{display:block; height:320px; object-fit:cover}
}

@media (max-width: 767px) {
.train_banner .banner_images li a img{display:block; height:180px; object-fit:cover}
}

