html, body {
  background: #fff; }

.news-list {
  width: 1180px;
  margin: 0 auto; }
  .news-list dl {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap; }
    .news-list dl dd, .news-list dl dt {
      width: 30.33%; }
      .news-list dl dd .news-item, .news-list dl dt .news-item {
        display: block;
        margin: 15px 20px;
        padding: 15px;
        -webkit-transition: all ease 0.3s;
        -o-transition: all ease 0.3s;
        transition: all ease 0.3s; }
        .news-list dl dd .news-item .news-img, .news-list dl dt .news-item .news-img {
          margin-bottom: 20px; }
          .news-list dl dd .news-item .news-img img, .news-list dl dt .news-item .news-img img {
            width: 100%;
            height: 196px; }
        .news-list dl dd .news-item .news-title, .news-list dl dt .news-item .news-title {
          color: #313131;
          font-size: 18px;
          margin-bottom: 20px;
          height: 40px;
          line-height: 20px;
          font-weight: bold; }
        .news-list dl dd .news-item .news-description, .news-list dl dt .news-item .news-description {
          color: #5C5C5C;
          font-size: 16px;
          height: 64px;
          line-height: 21px;
          margin-bottom: 25px; }
        .news-list dl dd .news-item .news-btn i, .news-list dl dt .news-item .news-btn i {
          display: inline-block;
          width: 43px;
          height: 43px;
          background: #B8B8B8;
          border-radius: 30px;
          font-size: 30px;
          line-height: 43px;
          text-align: center;
          position: relative; }
          .news-list dl dd .news-item .news-btn i:hover, .news-list dl dt .news-item .news-btn i:hover {
            background: #277AE1; }
          .news-list dl dd .news-item .news-btn i::before, .news-list dl dd .news-item .news-btn i::after, .news-list dl dt .news-item .news-btn i::before, .news-list dl dt .news-item .news-btn i::after {
            display: block;
            content: " ";
            position: absolute;
            width: 12px;
            height: 1px;
            background: #fff;
            left: 16px; }
          .news-list dl dd .news-item .news-btn i::before, .news-list dl dt .news-item .news-btn i::before {
            top: 15px;
            -webkit-transform: rotate(45deg);
                -ms-transform: rotate(45deg);
                    transform: rotate(45deg); }
          .news-list dl dd .news-item .news-btn i::after, .news-list dl dt .news-item .news-btn i::after {
            top: 23px;
            -webkit-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                    transform: rotate(-45deg); }
      .news-list dl dd:hover .news-item, .news-list dl dt:hover .news-item {
        -webkit-box-shadow: 1px 1px 15px #888888;
                box-shadow: 1px 1px 15px #888888; }
    .news-list dl dt {
      visibility: hidden; }