//列表总体布局及格式
.mobile-list {
  .mb-header {
    background-color: #6b8a47;
  }

  .mb-body {
    background-color: #ffffff;
    padding-left: 12px;

    
  }

  .mb-footer {
  }
}

//列表楼层信息
.mobile-list {
  .mb-header {
    .mb-banner {
      height: 171px;
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
  .mb-body {
    .mb-flooer-1 {
      margin-top: 16px;
      .mb-box-body {
        margin: 14px 12px 0 0;
        .mb-box-body-item {
          font-weight: 500;
          font-size: 10px;
          color: #424242;
          line-height: 18px;
          word-break: break-word;
        }
      }
    }
    .mb-flooer-2 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-box-body {
        .mb-box-remark {
          margin: 14px 12px 0 0;

          font-weight: 500;
          font-size: 10px;
          color: #424242;
          line-height: 18px;
          word-break: break-word;
        }
        .mb-box-body-rows {
          display: flex;
          justify-content: flex-start;
          overflow-x: auto;

          margin-top: 17px;

          .mb-box-body-item {
            display: flex;
            background-color: #f2f3f7;
            border-radius: 7px;

            min-width: 106px;
            height: 137px;

            margin-right: 9px;

            background-size: cover;
            background-repeat: no-repeat;

            .mb-box-body-item-title {
              font-weight: 500;
              font-size: 11px;
              color: #ffffff;

              display: flex;
              flex-direction: column;
              justify-content: flex-end;

              padding: 0 10px 10px 10px;
            }
          }
        }
      }
    }

    .mb-flooer-3 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-box-body {
        .mb-box-remark {
          margin: 14px 12px 0 0;

          font-weight: 500;
          font-size: 10px;
          color: #424242;
          line-height: 18px;
          word-break: break-word;
        }
        .mb-box-body-rows {
          display: flex;
          justify-content: flex-start;
          overflow-x: auto;

          background-color: #f9f9f9;

          padding: 9px;

          margin-top: 17px;

          .mb-box-body-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            background-color: #fff;
            border-radius: 7px;

            width: 124px;
            height: 180px;
            background-size: cover;
            background-repeat: no-repeat;

            margin-right: 9px;
            .mb-box-body-item-header {
              height: 90px;
              width: 124px;
              background-size: cover;
              background-repeat: no-repeat;

              border-top-left-radius: 7px;
              border-top-right-radius: 7px;
            }
            .mb-box-body-item-label {
              width: 124px;
              height: 90px;
              background-color: #fff;

              display: flex;
              flex-direction: column;
              justify-content: flex-start;

              padding: 0 9px;
              .mb-box-body-item-title {
                font-weight: 500;
                font-size: 11px;
                color: #424242;
                line-height: 15px;

                margin-top: 14px;

                word-break: break-word;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .mb-box-body-item-remark {
                font-weight: 500;
                font-size: 10px;
                color: #424242;
                line-height: 15px;
                opacity: 0.73;

                margin-top: 11px;
                margin-bottom: 9px;

                word-break: break-word;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
      }
    }

    .mb-flooer-4 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-box-body {
        .mb-box-remark {
          margin: 14px 12px 0 0;

          font-weight: 500;
          font-size: 10px;
          color: #424242;
          line-height: 18px;
          word-break: break-word;
        }
        .mb-box-body-rows {
          display: flex;
          justify-content: flex-start;
          overflow-x: auto;

          background-color: #f9f9f9;

          padding: 9px;

          margin-top: 17px;

          .mb-box-body-item {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            background-color: #fff;
            border-radius: 7px;

            width: 124px;
            height: 180px;
            background-size: cover;
            background-repeat: no-repeat;

            margin-right: 9px;
            .mb-box-body-item-header {
              height: 90px;
              width: 124px;
              background-size: cover;
              background-repeat: no-repeat;

              border-top-left-radius: 7px;
              border-top-right-radius: 7px;
            }
            .mb-box-body-item-label {
              width: 124px;
              height: 90px;
              background-color: #fff;

              display: flex;
              flex-direction: column;
              justify-content: flex-start;

              padding: 0 9px;
              .mb-box-body-item-title {
                font-weight: 500;
                font-size: 11px;
                color: #424242;
                line-height: 15px;

                margin-top: 14px;

                word-break: break-word;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .mb-box-body-item-remark {
                font-weight: 500;
                font-size: 10px;
                color: #424242;
                line-height: 15px;
                opacity: 0.73;

                margin-top: 11px;
                margin-bottom: 9px;
                

                word-break: break-word;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
      }
    }

    .mb-flooer-5 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-box-body {
        .mb-box-body-item {
          font-weight: 500;
          font-size: 10px;
          color: #424242;
          line-height: 18px;
          word-break: break-word;
          white-space: pre-wrap;
        }
      }
    }
    .mb-flooer-6 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-box-body {
        .mb-box-body-item {
          .mb-box-label {
            font-weight: 500;
            font-size: 10px;
            color: #424242;
            line-height: 18px;
            word-break: break-word;
            margin-bottom: 10px;

            white-space: pre-wrap;
          }
          .mb-box-img {
            background-size: cover;
            background-repeat: no-repeat;

            height: 110px;
          }
        }
      }
    }

    .mb-flooer-7 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-fgf {
        border-top: 1px solid #9d9d9d;
        width: 100%;
        height: 1px;
        margin: 18px 0;
      }
      .mb-box-body {
        .mb-box-remark {
          font-weight: 500;
          font-size: 10px;
          color: #424242;
          line-height: 18px;
          word-break: break-word;
          margin-bottom: 10px;
        }
        .mb-frist-box {
          margin-top: 18px;
        }
        .mb-box-body-rows {
          .mb-box-body-item {
            display: flex;
            justify-content: flex-start;
            .mb-box-body-left {
              background-size: cover;
              background-repeat: no-repeat;

              border-radius: 7px;
              width: 102px;
              height: 75px;
            }

            .mb-box-body-right {
              width: 100%;
              margin-left: 13px;
              margin-right: 12px;
              .mb-box-body-title {
                font-weight: bold;
                font-size: 14px;
                color: #424242;
                line-height: 19px;
              }
              .mb-box-body-remark {
                font-weight: 400;
                font-size: 10px;
                color: #424242;
                line-height: 16px;
                opacity: 0.65;
                white-space: pre-wrap;

                margin-top: 10px;
                height: 45px;

                word-break: break-word;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
      }
    }

    .mb-flooer-8 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-fgf {
        border-top: 1px solid #9d9d9d;
        width: 100%;
        height: 1px;
        margin: 18px 0;
      }
      .mb-box-body {
        .mb-margin-top{
          margin-top: 10px;
        }
        .mb-box-body-item {
          .mb-box-body-title {
            font-weight: bold;
            font-size: 14px;
            color: #424242;
            line-height: 19px;
          }
          .mb-box-body-content {
            font-weight: 400;
            font-size: 10px;
            color: #424242;
            line-height: 16px;
            opacity: 0.65;

            white-space: pre-wrap;

            margin-top: 10px;
          }
        }
      }
    }

    .mb-flooer-9 {
      margin-top: 21px;
      padding-right: 12px;

      .mb-box-body {
        .mb-box-body-item {
        }
      }
    }
  }
}

//box样式及格式
.mobile-list {
  .mb-box {
    .mb-box-header {
      .mb-box-header-fh-box {
        display: flex;
        flex-direction: column;
        justify-content: center;

        margin-right: 4px;

        .mb-box-header-fh {
          border-top: 3px solid #326FF4;
          width: 15px;
        }
      }
      .mb-box-header-label {
        font-weight: 800;
        font-size: 18px;
        color: #424242;
      }
    }

    .mb-box-body {
      margin-top: 14px;
    }
  }
}

//背景图片的统一样式
.mobile-list {
  .mb-bg-img-1 {
    background-size: 100%;
    background-repeat: no-repeat;
  }
}

.mobile-list {
  .mb-title-flex-1 {
    display: flex;
    justify-content: flex-start;

    .mb-mb-title-flex-fh-box {
      display: flex;
      flex-direction: column;
      justify-content: center;

      margin-right: 4px;

      .mb-mb-title-flex-fh {
        border-left: 3px solid #326FF4;
        height: 15px;
      }
    }
  }
}