nongminwang/assets/css/moreservice.less

//更多服务
.moreServices {
  width: 100%;
  height: 646px;

  .inner {
      position: relative;

      // 标题
      .title {
          width: 300px;
          text-align: center;
          margin: 0 auto;
          font-family: PingFang SC, PingFang SC;

          >h1 {
              font-weight: 600;
              font-size: 36px;
              color: #000000;
              line-height: 42px;
              letter-spacing: 3px;
              font-style: normal;
              text-transform: none;
          }

          >p {
              height: 34px;
              font-weight: 600;
              font-size: 24px;
              color: #F4F4F4;
              line-height: 24px;
              letter-spacing: 2px;
              font-style: normal;
              text-transform: none;
          }
      }

      .title::before {
          content: " ";
          display: inline-block;
          position: absolute;
          top: 14px;
          left: 34px;
          width: 366px;
          height: 23px;
          background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/images/Frame 486.png") no-repeat;
      }

      .title::after {
          content: " ";
          display: inline-block;
          position: absolute;
          top: 14px;
          right: 34px;
          width: 366px;
          height: 23px;
          background: url("http://img.bjzxtw.org.cn/master/bjzxtw/public/images/Frame 485.png") no-repeat;
      }

      >.serviceList {
          >li {
              width: 380px;
              float: left;
              position: relative;
              margin: 17px 30px 40px 0;

              >img {
                  width: 240px;
                  height: 240px;
              }

              >.detail {
                  width: 170px;
                  height: 240px;
                  position: absolute;
                  background-color: #fff;
                  top: -12px;
                  right: 0;
                  box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.1);
                  border: 1px solid #F0F0F0;

                  >img {
                      width: 52px;
                      height: 52px;
                      margin: 54px 57px 14px 61px
                  }

                  >h3 {
                      font-family: PingFang SC;
                      font-weight: 600;
                      font-size: 20px;
                      color: #000000;
                      line-height: 23px;
                      letter-spacing: 2px;
                      text-align: center;
                      font-style: normal;
                      text-transform: none;
                  }

                  >p {
                      width: 116px;
                      height: 32px;
                      line-height: 30px;
                      border: 1px solid #eee;
                      margin: 26px 25px 34px 29px;
                      border-radius: 18px;
                      font-weight: 400;
                      font-size: 12px;
                      color: #139602;
                      letter-spacing: 1px;
                      text-align: center;
                      font-style: normal;
                      text-transform: none;
                      a{
                          color: #139602;
                      }
                  }

                  >p:hover {
                      background-color: #139602;
                  }
                  >p:hover a{
                      color: #fff;
                  }
              }

              >.detail::after {
                  content: "";
                  width: 0;
                  height: 0;
                  border-left: 31px solid transparent;
                  border-top: 10px solid #e1e1e1;
                  position: absolute;
                  top: - 70px;
                  left: - 40px;
              }
          }

          >li:nth-child(3),
          >li:nth-child(6) {
              margin-right: 0;
          }

      }
  }
}

.moreServiceBox {
  width: 1200px;
  margin: 0 auto;
  height: 208px;
  display: flex;
  justify-content: space-between;
  .listBox {
      border: 1px solid #E8E7E6;
      width: 210px;
      height: 191px;
      text-align: center;
      .line {
          width: 152px;
          background: #49A769;
          height: 1px;
          margin: 0 auto;
          margin-bottom: 20px;
      }
      img {
          margin-top: 30px;
          margin-bottom: 10px;
      }
      a {
          color: #333333;
          font-size: 16px;
          display: block;
          width: 210px;
          height: 191px;
          
      }
  }
}