@-webkit-keyframes banner {
  0% {
    opacity: 0;
    z-index: 1;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6); }
  20% {
    opacity: 1;
    z-index: 2;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  60% {
    opacity: 0.8;
    z-index: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-moz-keyframes banner {
  0% {
    opacity: 0;
    z-index: 1;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6); }
  20% {
    opacity: 1;
    z-index: 2;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  60% {
    opacity: 0.8;
    z-index: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-ms-keyframes banner {
  0% {
    opacity: 0;
    z-index: 1;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6); }
  20% {
    opacity: 1;
    z-index: 2;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  60% {
    opacity: 0.8;
    z-index: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@-o-keyframes banner {
  0% {
    opacity: 0;
    z-index: 1;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6); }
  20% {
    opacity: 1;
    z-index: 2;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  60% {
    opacity: 0.8;
    z-index: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
@keyframes banner {
  0% {
    opacity: 0;
    z-index: 1;
    -webkit-transform: scale(0.6);
    -moz-transform: scale(0.6);
    -ms-transform: scale(0.6);
    -o-transform: scale(0.6);
    transform: scale(0.6); }
  20% {
    opacity: 1;
    z-index: 2;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2); }
  60% {
    opacity: 0.8;
    z-index: 1;
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -o-transform: scale(0.9);
    transform: scale(0.9); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1); } }
.pagination {
  text-align: center;
  font: 15px/20px "calibri"; }
  .pagination span {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px; }
    .pagination span.active {
      background: rgba(0, 0, 0, 0.4); }

.banner_slide {
  width: 1200px;
  height: 450px;
  position: relative;
  margin: 200px auto 20px; }
  .banner_slide .banner_item {
    visibility: hidden; }
    .banner_slide .banner_item.active {
      visibility: visible; }
      .banner_slide .banner_item.active > div {
        opacity: 1;
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1); }
        .banner_slide .banner_item.active > div:nth-of-type(1) {
          -webkit-animation: banner 1.1s 0.2s;
          -moz-animation: banner 1.1s 0.2s;
          -ms-animation: banner 1.1s 0.2s;
          -o-animation: banner 1.1s 0.2s;
          animation: banner 1.1s 0.2s; }
        .banner_slide .banner_item.active > div:nth-of-type(2) {
          -webkit-animation: banner 0.9s 0.3s;
          -moz-animation: banner 0.9s 0.3s;
          -ms-animation: banner 0.9s 0.3s;
          -o-animation: banner 0.9s 0.3s;
          animation: banner 0.9s 0.3s; }
        .banner_slide .banner_item.active > div:nth-of-type(3) {
          -webkit-animation: banner 1.3s 0.5s;
          -moz-animation: banner 1.3s 0.5s;
          -ms-animation: banner 1.3s 0.5s;
          -o-animation: banner 1.3s 0.5s;
          animation: banner 1.3s 0.5s; }
        .banner_slide .banner_item.active > div:nth-of-type(4) {
          -webkit-animation: banner 1s 0.4s;
          -moz-animation: banner 1s 0.4s;
          -ms-animation: banner 1s 0.4s;
          -o-animation: banner 1s 0.4s;
          animation: banner 1s 0.4s; }
        .banner_slide .banner_item.active > div:nth-of-type(5) {
          -webkit-animation: banner 1.2s;
          -moz-animation: banner 1.2s;
          -ms-animation: banner 1.2s;
          -o-animation: banner 1.2s;
          animation: banner 1.2s; }
    .banner_slide .banner_item:nth-of-type(1) > div {
      background: yellowgreen; }
    .banner_slide .banner_item:nth-of-type(2) > div {
      background: skyblue; }
    .banner_slide .banner_item > div {
      position: absolute;
      opacity: 0;
      -webkit-transform: scale(0.6);
      -moz-transform: scale(0.6);
      -ms-transform: scale(0.6);
      -o-transform: scale(0.6);
      transform: scale(0.6);
      -webkit-transition: 0.3s;
      -moz-transition: 0.3s;
      -ms-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s; }
      .banner_slide .banner_item > div:nth-of-type(1) {
        width: 260px;
        height: 200px;
        left: 0;
        top: 0;
        -webkit-transition-delay: 0.2s;
        -moz-transition-delay: 0.2s;
        -ms-transition-delay: 0.2s;
        -o-transition-delay: 0.2s;
        transition-delay: 0.2s; }
      .banner_slide .banner_item > div:nth-of-type(2) {
        width: 400px;
        height: 200px;
        left: 280px;
        top: 0;
        -webkit-transition-delay: 0.3s;
        -moz-transition-delay: 0.3s;
        -ms-transition-delay: 0.3s;
        -o-transition-delay: 0.3s;
        transition-delay: 0.3s; }
      .banner_slide .banner_item > div:nth-of-type(3) {
        width: 360px;
        height: 230px;
        left: 0;
        top: 220px;
        -webkit-transition-delay: 0.5s;
        -moz-transition-delay: 0.5s;
        -ms-transition-delay: 0.5s;
        -o-transition-delay: 0.5s;
        transition-delay: 0.5s; }
      .banner_slide .banner_item > div:nth-of-type(4) {
        width: 300px;
        height: 230px;
        left: 380px;
        top: 220px;
        -webkit-transition-delay: 0.4s;
        -moz-transition-delay: 0.4s;
        -ms-transition-delay: 0.4s;
        -o-transition-delay: 0.4s;
        transition-delay: 0.4s; }
      .banner_slide .banner_item > div:nth-of-type(5) {
        width: 500px;
        height: 450px;
        left: 700px;
        top: 0; }

/*# sourceMappingURL=style.css.map */