.body > div > h2 {
  display: block;
  font-size: 30px;
  color: black;
  line-height: 90px;
  border-bottom: solid 2px #e5e5e5;
  margin-top: 80px; }
  .body > div > h2 i {
    display: block;
    width: 70px;
    height: 70px;
    padding-right: 20px;
    float: left; }
.body .video {
  width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box; }
  .body .video h2 i {
    background: url("../img/webhot-new4/video.png") left center no-repeat; }
  .body .video ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .body .video ul li {
      display: block;
      width: 350px;
      margin-top: 74px;
      position: relative; }
      .body .video ul li .img {
        position: relative;
        width: 350px;
        height: 350px; }
        .body .video ul li .img video {
          width: 350px;
          height: 350px; }
        .body .video ul li .img .cover {
          display: block;
          width: 350px;
          height: 350px;
          //background: url("../img/webhot-new4/beauty.png") center center no-repeat;
          position: absolute;
          top: 0;
          left: 0;
          overflow: hidden; }
          .body .video ul li .img .cover a {
            position: absolute;
            display: block;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%);
            background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%);
            background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%);
            -webkit-transition: all 3s;
            transition: all 3s; }
            .body .video ul li .img .cover a img {
              display: block;
              margin: 120px auto 0; }
            .body .video ul li .img .cover a h2 {
              font-size: 24px;
              color: white;
              text-align: center;
              margin-top: 75px; }
        .body .video ul li .img div.hidden {
          display: none; }
      .body .video ul li .detail {
        background-color: #eee; }
        .body .video ul li .detail > div {
          padding: 16px;
          border-bottom: solid 1px #ddd; }
          .body .video ul li .detail > div h2 {
            font-size: 16px;
            color: #49ad33; }
            .body .video ul li .detail > div h2 i {
              display: inline-block;
              width: 26px;
              height: 26px;
              vertical-align: middle;
              margin-right: 5px; }
          .body .video ul li .detail > div p {
            font-size: 14px;
            color: #707070;
            margin: 3px 0 0 31px;
            line-height: 24px; }
        .body .video ul li .detail .part1 i {
          background: url("../img/common/sun.png") center center no-repeat; }
        .body .video ul li .detail .part2 i {
          background: url("../img/common/shuye.png") center center no-repeat; }
        .body .video ul li .detail .part3 i {
          background: url("../img/common/shuidi.png") center center no-repeat; }
.body .example {
  width: 100%;
  min-width: 1200px;
  margin-top: 80px;
  background-color: #eee;
  padding: 80px 0 100px; }
  .body .example h2 {
    width: 1200px;
    margin: 0 auto; }
    .body .example h2 i {
      background: url("../img/webhot-new4/picture.png") left center no-repeat; }
  .body .example ul {
    width: 1200px;
    margin: 0 auto;
    padding-left: 40px;
    box-sizing: border-box; }
    .body .example ul li p {
      line-height: 90px; }
      .body .example ul li p a {
        font-size: 30px;
        color: #707070; }
      .body .example ul li p a.more {
        float: right;
        margin-right: 40px;
        font-size: 24px;
        color: #b5b5b5; }

.animate1 {
  -webkit-animation: bofang1 .5s;
  animation: bofang1 .5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

.animate2 {
  -webkit-animation: bofang2 .5s;
  animation: bofang2 .5s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards; }

@-webkit-keyframes bofang1 {
  0% {
    background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%); }
  100% {
    background: linear-gradient(top, transparent 0%, transparent 80%, transparent 100%);
    background: -webkit-linear-gradient(top, transparent 0%, transparent 80%, transparent 100%);
    background: -ms-linear-gradient(top, transparent 0%, transparent 80%, transparent 100%); } }

@keyframes bofang1 {
  0% {
    background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 80%, black 100%); }
  100% {
    background: linear-gradient(top, transparent 0%, transparent 80%, transparent 100%);
    background: -webkit-linear-gradient(top, transparent 0%, transparent 80%, transparent 100%);
    background: -ms-linear-gradient(top, transparent 0%, transparent 80%, transparent 100%); } }
@-webkit-keyframes bofang2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2); } }
@keyframes bofang2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    -webkit-transform: scale(2);
    transform: scale(2); } }