#top {
  width: 0.7rem;
  position: fixed;
  right: 30px;
  bottom: 10%;
  font-size: 0;
  z-index: 10;
}
#top a {
  display: inline-block;
  width: 100%;
  margin-bottom: 10px;
}
#top a img {
  display: block;
  width: 100%;
}

#subsequent {
  width: 100%;
  background: white;
  padding: 50px 0;
}
#subsequent .content {
  width: 1200px;
  height: 480px;
  margin: auto;
  position: relative;
  margin-top: 30px;
}

canvas {
  position: absolute;
}

#can1 {
  z-index: 1;
}

#can2 {
  top: 0;
  left: 305px;
  z-index: 2;
}

#can3 {
  top: 0;
  left: 765px;
  z-index: 1;
}

#can4 {
  top: 240px;
  left: 0;
  z-index: 4;
}

#can5 {
  top: 240px;
  left: 500px;
  z-index: 3;
}

#banner {
  width: 100%;
  position: relative;
}
#banner img {
  display: block;
  width: 100%;
}

nav {
  width: 100%;
  height: 30px;
  background: #eeeeee;
}
nav div {
  width: 85%;
  min-width: 1200px;
  margin: auto;
  height: 30px;
  line-height: 30px;
  color: #828691;
  font-size: 0.2rem;
}
nav a:hover {
  color: #1d65d4;
}

#content {
  width: 100%;
  background: #fff;
  padding: 50px 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 3.5rem;
}
#content > div {
  font-size: 0;
}
#content .content-one {
  display: inline-block;
  width: 3rem;
  height: 4rem;
  position: relative;
}
#content .content-one-img {
  width: 100%;
  height: 100%;
  background: url("../img/59ba302c71738.jpg");
  background-size: 105%;
  background-repeat: no-repeat;
  overflow: hidden;
  -webkit-filter: grayscale(80%);
          filter: grayscale(80%);
}
#content .content-one-show {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background: rgba(28, 34, 42, 0.7);
  position: absolute;
  left: 0;
  top: 0;
}
#content .content-one-show > div {
  width: 100%;
}
#content .content-one-show > div > div {
  width: 100px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: auto;
}
#content .content-one-show > div > div img {
  display: block;
  width: 0.7rem;
}
#content .content-one-show > div > div:nth-child(2) {
  margin-top: 15px;
  margin-bottom: 10px;
  width: 100%;
  font-size: 0;
}
#content .content-one-show > div > div:nth-child(2) > div {
  width: 0.9rem;
  height: 0;
  border-top: 1px solid #fff;
  margin: auto;
}
#content .content-one-show > div h3 {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 0.3rem;
}
#content .content-one:nth-child(2) .content-one-img {
  background: url("../img/img86.jpg");
  background-size: 105%;
  background-repeat: no-repeat;
}
#content .content-one:nth-child(3) .content-one-img {
  background: url("../img/img87.jpg");
  background-size: 105%;
  background-repeat: no-repeat;
}
#content .content-one:nth-child(4) .content-one-img {
  background: url("../img/VCG4195811899.jpg");
  background-size: 105%;
  background-repeat: no-repeat;
}
#content .content-one:nth-child(5) .content-one-img {
  background: url("../img/VCG41621204956.jpg");
  background-size: 105%;
  background-repeat: no-repeat;
}
#content .content-one:hover > div {
  background-color: rgba(54, 84, 194, 0.8);
}