html,
body {
  width: 100%;
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
}
.container {
  max-width: 100%;
  min-width: 1500px;
  height: 100%;
  max-height: 100%;
  min-height: 600px;
  background-color: rgb(197, 197, 197);
  position: relative;
  overflow: hidden;
}
/* 大图 */
.view {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  background-color: rgb(152, 183, 230);
}
.img {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
  top: 0;
  background: url('../imgs/img.jpg') no-repeat center/ cover;
}
/* 缩略图 */
.preview {
  width: 100%;
  min-width: 1500px;
  height: 200px;
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 100;
}
.thumbnail {
  width: 300px;
  height: 200px;
  padding: 20px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
}
.thumbnail img {
  width: 260px;
  height: 160px;
}
/* 遮罩 begin*/
.cover {
  width: 260px;
  height: 160px;
  background-color: #00000062;
  position: absolute;
  top: 20px;
  -webkit-transition: all 0.1s ease-in-out 0s;
  -o-transition: all 0.1s ease-in-out 0s;
  -moz-transition: all 0.1s ease-in-out 0s;
  transition: all 0.1s ease-in-out 0s;
}

.thumbnail:hover .cover {
  background-color: #00000000;
}

.animate0 {
  z-index: 99;
  -webkit-animation: zero 0.5s ease-out;
     -moz-animation: zero 0.5s ease-out;
       -o-animation: zero 0.5s ease-out;
          animation: zero 0.5s ease-out;
}
@-webkit-keyframes zero {
  from {
    left: -500px;
  }
  to {
    left: 0;
  }
}
@-moz-keyframes zero {
  from {
    left: -500px;
  }
  to {
    left: 0;
  }
}
@-o-keyframes zero {
  from {
    left: -500px;
  }
  to {
    left: 0;
  }
}
@keyframes zero {
  from {
    left: -500px;
  }
  to {
    left: 0;
  }
}
.animate1 {
  -webkit-animation: one 0.5s ease-out;
     -moz-animation: one 0.5s ease-out;
       -o-animation: one 0.5s ease-out;
          animation: one 0.5s ease-out;
}
@-webkit-keyframes one {
  from {
    top: 350px;
  }
  to {
    top: 0px;
  }
}
@-moz-keyframes one {
  from {
    top: 350px;
  }
  to {
    top: 0px;
  }
}
@-o-keyframes one {
  from {
    top: 350px;
  }
  to {
    top: 0px;
  }
}
@keyframes one {
  from {
    top: 350px;
  }
  to {
    top: 0px;
  }
}
.animate2 {
  -webkit-animation: two 1s ease-in;
     -moz-animation: two 1s ease-in;
       -o-animation: two 1s ease-in;
          animation: two 1s ease-in;
}
@-webkit-keyframes two {
  from {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-moz-keyframes two {
  from {
    -moz-transform: scale(0.1);
         transform: scale(0.1);
  }
  to {
    -moz-transform: scale(1);
         transform: scale(1);
  }
}
@-o-keyframes two {
  from {
    -o-transform: scale(0.1);
       transform: scale(0.1);
  }
  to {
    -o-transform: scale(1);
       transform: scale(1);
  }
}
@keyframes two {
  from {
    -webkit-transform: scale(0.1);
       -moz-transform: scale(0.1);
         -o-transform: scale(0.1);
            transform: scale(0.1);
  }
  to {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}
.animate3 {
  -webkit-animation: three 1s ease-out;
     -moz-animation: three 1s ease-out;
       -o-animation: three 1s ease-out;
          animation: three 1s ease-out;
}
@-webkit-keyframes three {
  from {
    -webkit-transform: scale(2);
            transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-moz-keyframes three {
  from {
    -moz-transform: scale(2);
         transform: scale(2);
  }
  to {
    -moz-transform: scale(1);
         transform: scale(1);
  }
}
@-o-keyframes three {
  from {
    -o-transform: scale(2);
       transform: scale(2);
  }
  to {
    -o-transform: scale(1);
       transform: scale(1);
  }
}
@keyframes three {
  from {
    -webkit-transform: scale(2);
       -moz-transform: scale(2);
         -o-transform: scale(2);
            transform: scale(2);
  }
  to {
    -webkit-transform: scale(1);
       -moz-transform: scale(1);
         -o-transform: scale(1);
            transform: scale(1);
  }
}
.animate4 {
  -webkit-animation: four 0.7s ease-out;
     -moz-animation: four 0.7s ease-out;
       -o-animation: four 0.7s ease-out;
          animation: four 0.7s ease-out;
}
@-webkit-keyframes four {
  from {
    -webkit-transform: rotate(-360deg) scale(0.1);
            transform: rotate(-360deg) scale(0.1);
  }
  to {
    -webkit-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}
@-moz-keyframes four {
  from {
    -moz-transform: rotate(-360deg) scale(0.1);
         transform: rotate(-360deg) scale(0.1);
  }
  to {
    -moz-transform: rotate(0deg) scale(1);
         transform: rotate(0deg) scale(1);
  }
}
@-o-keyframes four {
  from {
    -o-transform: rotate(-360deg) scale(0.1);
       transform: rotate(-360deg) scale(0.1);
  }
  to {
    -o-transform: rotate(0deg) scale(1);
       transform: rotate(0deg) scale(1);
  }
}
@keyframes four {
  from {
    -webkit-transform: rotate(-360deg) scale(0.1);
       -moz-transform: rotate(-360deg) scale(0.1);
         -o-transform: rotate(-360deg) scale(0.1);
            transform: rotate(-360deg) scale(0.1);
  }
  to {
    -webkit-transform: rotate(0deg) scale(1);
       -moz-transform: rotate(0deg) scale(1);
         -o-transform: rotate(0deg) scale(1);
            transform: rotate(0deg) scale(1);
  }
}