body {
  background-color: #f9f9f9; }

.product-box {
  padding: 65px 0 50px; }
  .product-box > .li {
    margin-bottom: 40px; }
    .product-box > .li.run .cont {
      animation: text-run .3s ease .2s forwards; }
    .product-box > .li:nth-child(2).run .cont {
      animation: text-run .3s ease .5s forwards; }
    .product-box > .li > .title {
      text-align: right;
      height: 50px;
      line-height: 50px;
      margin-right: -20px; }
      .product-box > .li > .title > .box {
        color: #fff;
        font-size: 20px;
        line-height: 50px;
        padding: 0 50px;
        display: inline-block;
        float: left; }
      .product-box > .li > .title > .more {
        font-size: 22px;
        color: #999; }
        .product-box > .li > .title > .more::after {
          content: '>'; }
    .product-box > .li > .box {
      display: flex;
      flex-wrap: wrap;
      margin-right: -15px;
      margin-top: 15px; }
      .product-box > .li > .box > div {
        width: 25%; }
        .product-box > .li > .box > div > .box {
          background-color: #fff;
          box-shadow: 1px 1px 4px rgba(200, 200, 200, 0.2);
          margin-right: 15px; }
      .product-box > .li > .box > .head-item > .box {
        background-size: cover;
        background-position: center center;
        height: 100%; }
      .product-box > .li > .box > .item {
        box-sizing: border-box; }
        .product-box > .li > .box > .item > .box {
          display: block;
          height: 100%;
          transition-duration: .2s;
          -webkit-transition-duration: .2s;
          -moz-transition-duration: .2s;
          -ms-transition-duration: .2s;
          overflow: hidden; }
          .product-box > .li > .box > .item > .box:hover {
            transform: translateY(-5px);
            -webkit-transform: translateY(-5px);
            -moz-transform: translateY(-5px);
            -ms-transform: translateY(-5px); }
          .product-box > .li > .box > .item > .box > img {
            width: 100%; }
          .product-box > .li > .box > .item > .box > .cont {
            padding: 10px;
            text-align: center;
            transform: translateY(50px);
            -webkit-transform: translateY(50px);
            -moz-transform: translateY(50px);
            -ms-transform: translateY(50px);
            opacity: 0; }
            .product-box > .li > .box > .item > .box > .cont > .title {
              font-size: 18px;
              font-weight: bold; }
            .product-box > .li > .box > .item > .box > .cont > .sub {
              margin: 10px 0;
              color: #666; }

@keyframes text-run {
  from {
    transform: translateY(50px);
    opacity: 0; }
  to {
    transform: translateY(0);
    opacity: 1; } }

@media screen and (max-width: 1200px) {
  html, body {
    min-width: 900px  !important; }
  .block {
    width: 60%;
    min-width: 900px !important; } }