.top-ad {
  img {
    display: block;
    width  : 100%;
  }
}

.brand {
  .banner {
    height          : 458px;
    background-color: #fff4ea;

    .pic {
      background-position: center;
      background-size    : cover;
      width              : 960px;
      margin-left        : 240px;
      height             : 458px;
    }
  }

  .brand-tit {
    color       : #f8ba81;
    font-size   : 26px;
    height      : 30px;
    line-height : 30px;
    padding-left: 20px;
    position    : relative;

    &::before {
      content         : "";
      display         : block;
      width           : 4px;
      height          : 30px;
      background-color: #f8ba81;
      position        : absolute;
      left            : 0;
      top             : 0;
    }

    a {
      float    : right;
      font-size: 18px;
    }
  }

  .feichang {
    .inner {
      overflow: hidden;
    }

    .list {
      width   : 480px;
      height  : 318px;
      overflow: hidden;
      float   : left;

      a {
        display: block;
        float  : left;
        border : 1px solid #d2d2d2;
        width  : 238px;
        height : 104px;
      }
    }

    .qiehuan {
      width : 238px;
      height: 316px;
      float : left;
      border: 1px solid #d2d2d2;

      .swiper-slide {
        width              : 240px;
        height             : 318px;
        background-position: center;
        background-size    : cover;
      }

      .swiper-pagination-bullet {
        width     : 12px;
        height    : 12px;
        box-shadow: 0 0 5px #ccc;
        opacity   : 0.5;

        &.swiper-pagination-bullet-active {
          opacity: 1;
        }
      }
    }
  }

  .brand-list {
    .list {
      .item {
        width        : 220px;
        float        : left;
        margin-right : 22.5px;
        margin-bottom: 22.5px;
        border       : 1px solid #d2d2d2;

        &.ad {
          width : 222px;
          border: 0;

          img {
            display: block;
            width  : 100%;
          }
        }

        a {
          display: block;

          .pic {
            width              : 180px;
            height             : 190px;
            margin             : 20px;
            background-size    : cover;
            background-position: center;
          }

          .content {
            height    : 48px;
            padding   : 15px;
            margin-top: -2px;
            position  : relative;

            .title {
              font-size    : 18px;
              line-height  : 18px;
              margin-bottom: 10px;
            }

            .price {
              color    : #c30000;
              font-size: 14px;

              span {
                font-size  : 24px;
                line-height: 24px;
                display    : inline-block;
              }
            }

            .more {
              position        : absolute;
              bottom          : 15px;
              right           : 15px;
              width           : 70px;
              line-height     : 26px;
              color           : #fff;
              border-radius   : 5px;
              font-size       : 14px;
              background-color: #ff870f;
              text-align      : center;
            }
          }
        }
      }
    }

    &.lvse {
      .brand-tit {
        color         : #666;
        border-bottom : 1px solid #33a589;
        padding-bottom: 20px;

        &::before {
          background-color: #33a589;
        }
      }
    }

    &.jkqx {
      .brand-tit {
        color         : #666;
        border-bottom : 1px solid #16a4d0;
        padding-bottom: 20px;

        &::before {
          background-color: #16a4d0;
        }
      }
    }

    &.bjp {
      .brand-tit {
        color         : #666;
        border-bottom : 1px solid #5d60b8;
        padding-bottom: 20px;

        &::before {
          background-color: #5d60b8;
        }
      }
    }

    &.elssp {
      .brand-tit {
        color         : #666;
        border-bottom : 1px solid #d39338;
        padding-bottom: 20px;

        &::before {
          background-color: #d39338;
        }
      }
    }
  }

  .brand-main {
    .brand-des {
      .brand-logo {
        background-position: center;
        background-size    : cover;
        height             : 146px;
        width              : 267px;
        border             : 1px solid #ccc;
      }

      .brand-content {
        font-size  : 16px;
        line-height: 26px;
        color      : #333;
        border     : 1px solid #ccc;
        width      : 880px;
        padding    : 34px 25px;
        margin-left: -1px;
      }

      .brand-type-tit {
        height          : 70px;
        line-height     : 70px;
        width           : 267px;
        border          : 1px solid #ccc;
        margin-top      : -1px;
        text-align      : center;
        background-color: #f7f7f7;
      }

      .brand-type {
        width      : 880px;
        height     : 70px;
        line-height: 0;
        border     : 1px solid #ccc;
        margin-top : -1px;
        margin-left: -1px;
        padding    : 0 25px;
        font-size  : 0;

        a {
          height      : 70px;
          line-height : 70px;
          display     : inline-block;
          font-size   : 18px;
          margin-right: 36px;
          @include tr(0.4s, color);

          &:hover {
            color: #000;
            @include tr(0.4s, color);
          }
        }
      }
    }
  }
}

.sort {
  background-color: #f7f7f7;
  height          : 80px;
  line-height     : 80px;
  font-size       : 18px;
  position        : relative;
  z-index         : 5;

  .fl {
    margin-left: 30px;

    & > a {
      display         : inline-block;
      width           : 90px;
      height          : 40px;
      line-height     : 40px;
      border          : 1px solid #dcdcdc;
      text-align      : center;
      background-color: #fff;
      margin-right    : 5px;
      @include tr(0.4s, background-color);

      &.on,
      &:hover {
        background-color: #2d8800;
        color           : #fff;
        @include tr(0.4s, background-color);
      }
    }

    label {
      display            : inline-block;
      width              : 85px;
      padding-right      : 5px;
      height             : 40px;
      line-height        : 40px;
      border             : 1px solid #dcdcdc;
      text-align         : center;
      background-color   : #fff;
      margin-right       : 5px;
      position           : relative;
      cursor             : pointer;
      -webkit-user-select: none;
      -moz-user-select   : none;
      -ms-user-select    : none;
      user-select        : none;
      background-image   : url("../images/jg_jt.png");
      background-repeat  : no-repeat;
      background-position: 68px center;

      &.on,
      &:hover {
        background-color: #2d8800;
        color           : #fff;
        @include tr(0.4s, background-color);
      }

      #jiageorder {
        display: none;
      }

      ul {
        position        : absolute;
        z-index         : 5;
        background-color: #fff;
        width           : 90px;
        left            : -1px;
        border          : 1px solid #dcdcdc;
        visibility      : hidden;
        opacity         : 0;
        @include tr(0.4s,opacity);

        a {
          font-size  : 14px;
          line-height: 30px;

          &.on {
            color: #c30000;
          }
        }
      }

      #jiageorder:checked~ul {
        visibility: visible;
        opacity   : 1;
        @include tr(0.4s,opacity);
      }
    }
  }

  .fr {
    font-size   : 18px;
    margin-right: 20px;
    color       : #333;
  }
}

.brand-main-list {
  .item {
    width : 234px;
    border: 3px solid #fff;
    @include tr(0.4s, border);

    &:hover {
      border: 3px solid #2d8800;
      @include tr(0.4s, border);
    }

    a {
      display: block;
    }

    .pic {
      width              : 234px;
      height             : 234px;
      background-size    : cover;
      background-position: center;

      a {
        width : 100%;
        height: 100%;
      }
    }

    .price {
      color    : #c30000;
      font-size: 14px;
      padding  : 0 10px;

      span {
        font-size  : 24px;
        line-height: 24px;
        display    : inline-block;
      }
    }

    .title {
      padding    : 10px 10px 15px;
      font-size  : 18px;
      line-height: 24px;
    }

    .btn {
      font-size  : 0;
      line-height: 0;
      padding    : 0 10px 20px;

      a {
        display    : inline-block;
        font-size  : 14px;
        line-height: 34px;
        width      : 105px;
        text-align : center;
        border     : 1px solid #d2d2d2;

        &.brand-sc {
          padding-left       : 15px;
          width              : 90px;
          background-image   : url("../images/shoucang.png");
          background-position: 25px center;
          background-repeat  : no-repeat;
        }

        &.brand-car {
          margin-left        : -1px;
          padding-left       : 20px;
          width              : 85px;
          background-image   : url("../images/gwck.png");
          background-position: 7px center;
          background-repeat  : no-repeat;
        }
      }
    }
  }
}
