.banner {}
  .banner .banner-inner {height: 100%; overflow: hidden}
    .banner .banner-inner ul {height: 100%; position: relative; margin: 0; padding: 0}
      .banner .banner-inner ul li {margin: 0; padding: 0; list-style: none; background: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 900; transition: opacity 2s}
        .banner .banner-inner ul li a {display: block}
        .banner .banner-inner ul li img {display: block; width: 100%; height: auto; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); -webkit-transform: translateY(-50%) translateX(-50%)}
        .banner .banner-inner ul li .banner-caption {display: block; position: absolute; bottom: 40px; right: 40px; padding: 25px; background-color: #fff; font-size: 3rem; text-transform: uppercase; color: #00588A; border-radius: 5px; background: linear-gradient(#fff, #ccc);}

      .banner .banner-inner ul li.prev-active {opacity: 0; z-index: 998}
      .banner .banner-inner ul li.active {opacity: 1; z-index: 1000}
      .banner .banner-inner ul li.next-active {opacity: 0; z-index: 999}