.service-list
{
    padding-bottom:100px;
    section
    {
      background-color: #fafafa;
      padding:40px;
      position: relative;
      .icon
      {
        text-align:center;
        display: flex;
        justify-content:center;
        align-items:center;
        i
        {
          color:$main-color;
          font-size:80px;
        }
      }

      h2
      {
        text-align: center;
        margin-bottom: 30px;
        font-weight: 500;
        a
        {
            color:$main-color;
        }
      }
      p
      {
        line-height:21px;
        color:#666666;
        font-size:15px;
        margin-bottom:50px;
      }
      .more
      {
        a
        {
          color:#fff;
          padding:10px 20px;
          background: $main-color;
          border-radius: 5px;
        }
      }
    }
    @media(min-width:980px)
    {
      display: flex;
      flex-wrap: wrap;
      section
      {
        width: calc((100% - 80px) / 3);
        margin:0 20px 40px 20px;
        &:nth-child(3n)
        {
          margin-right: 0px;
        }
        &:nth-child(3n + 1)
        {
          margin-left: 0px;
        }
        .icon
        {
          margin-bottom:30px;
        }
        .more
        {
          position: absolute;
          bottom:40px;
          left:40px;
        }
      }
    }
    @media(max-width:979px)
    {
      section
      {
        display: flex;
        padding:20px 10px;
        margin-bottom:20px;
        .icon
        {
          width:70px;
          height:50px;
          i
          {
            font-size:30px;
            margin:0px;
          }
        }
        .data
        {
          flex:1;
          h2
          {
            text-align:left;
            margin-bottom:10px;
          }
          p
          {
            margin-bottom:20px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .more
          {
              text-align: right;
              a
              {
                  padding:5px 15px;

              }
          }
        }
      }
    }
}
