.tiaojiao-sort {
  border: 1px solid #d2d2d2;

  .sl {
    border-bottom: 1px dashed #d2d2d2;

    .change_duoxuan {
      display: none;
    }

    .inner {
      height     : 64px;
      line-height: 64px;
      overflow   : hidden;

      &.on {
        height: auto;
      }
    }

    &:last-child {
      border-bottom: none;
    }

    .sl-tit {
      border-right    : 1px solid #d2d2d2;
      width           : 146px;
      padding-left    : 24px;
      margin-bottom   : -1000px;
      padding-bottom  : 1000px;
      float           : left;
      background-color: #f7f7f7;
    }

    .sl-list {
      float        : left;
      padding-left : 30px;
      padding-right: 190px;
      position     : relative;
      overflow     : hidden;

      ul {
        width   : 809px;
        overflow: hidden;

        li {
          float       : left;
          margin-right: 35px;

          a {
            font-size: 18px;

            i {
              @include tr(0.4s,all);
            }
          }
        }
      }

      .ctrl {
        position   : absolute;
        top        : 0;
        right      : 0;
        font-size  : 0;
        line-height: 0;

        a {
          display    : inline-block;
          width      : 95px;
          font-size  : 18px;
          color      : #333;
          line-height: 36px;
          text-align : center;
          margin     : 14px 0;

          span {
            font-size  : 12px;
            margin-left: 5px;
          }
        }

        label {
          display         : inline-block;
          width           : 95px;
          font-size       : 18px;
          color           : #333;
          line-height     : 36px;
          text-align      : center;
          margin          : 14px 0;
          background-color: #f7f7f7;
          cursor          : pointer;
        }
      }

      .dx-ctrl {
        display: none;

        a {
          border          : 1px solid #d2d2d2;
          display         : inline-block;
          width           : 80px;
          font-size       : 16px;
          line-height     : 32px;
          text-align      : center;
          margin          : 20px 0;
          cursor          : pointer;
          background-color: #c30000;
          color           : #fff;
          @include tr(0.4s,all);

          &.disable {
            opacity         : 0.3;
            color           : #333;
            background-color: #fff;
            cursor          : default;
            @include tr(0.4s,all);
          }
        }

        .cannel {
          border     : 1px solid #d2d2d2;
          display    : inline-block;
          width      : 80px;
          font-size  : 16px;
          color      : #333;
          line-height: 32px;
          text-align : center;
          margin     : 20px 0;
          cursor     : pointer;
        }
      }

      .select {
        display     : inline-block;
        line-height : 36px;
        cursor      : pointer;
        position    : relative;
        z-index     : 5;
        margin-top  : 13px;
        margin-right: 35px;
        float       : left;
        overflow    : hidden;

        .select-tit {
          display       : inline-block;
          border        : 1px solid #d2d2d2;
          padding       : 0 24px;
          vertical-align: top;

          span {
            font-size  : 12px;
            margin-left: 5px;
          }
        }

        ul {
          width     : auto;
          border    : 1px solid #d2d2d2;
          margin-top: -1px;
          overflow  : hidden;
          display   : none;

          li {
            float        : none;
            margin-right : 0;
            border-bottom: 1px solid #d2d2d2;

            &:last-child {
              margin-bottom: -1px;
            }

            a {
              font-size: 16px;
              padding  : 0 24px;
            }
          }
        }
      }
    }

    .change_duoxuan:checked~.inner {
      height: auto;

      .sl-list {
        ul {
          li {
            a {
              i {
                background      : url("../images/search.ele.png") no-repeat 9999px 9999px;
                display         : inline-block;
                height          : 12px;
                width           : 12px;
                background-color: #fff;
                border          : 1px solid #ccc;
                font-size       : 0;
                margin-right    : 5px;
                @include tr(0.4s,all);
              }
            }

            &.selected {
              a {
                i {
                  border-color       : #e4393c;
                  background-position: -1px -107px;
                }
              }
            }
          }
        }

        .dx-ctrl {
          display: block;
        }
      }
    }
  }
}

.pro_main_top {
  .left {
    position: relative;

    #swiper-container3 {
      width: 418px;

      .swiper-slide {
        img {
          display: block;
          width  : 100%;
        }
      }
    }

    #swiper-container2 {
      width     : 360px;
      margin-top: 25px;

      .swiper-slide {
        img {
          display: block;
          width  : 52px;
          border : 2px solid #fff;
        }

        &.active-nav {
          img {
            border: 2px solid #008c00;
          }
        }
      }
    }

    .swiper-left {
      background-color: #008c00;
      width           : 10px;
      height          : 56px;
      position        : absolute;
      left            : 0;
      bottom          : 0;
      cursor          : pointer;
      color           : #fff;
      text-align      : center;
      line-height     : 56px;
      font-size       : 12px;
    }

    .swiper-right {
      background-color: #008c00;
      width           : 10px;
      height          : 56px;
      position        : absolute;
      right           : 0;
      bottom          : 0;
      cursor          : pointer;
      color           : #fff;
      text-align      : center;
      line-height     : 56px;
      font-size       : 12px;
    }
  }

  .right {
    width      : 530px;
    margin-left: 30px;

    .title {
      font-size  : 24px;
      font-weight: bold;
      color      : #333;
    }

    .info {
      padding         : 30px 26px;
      background-color: #f5f5f5;

      .price {
        border-bottom : 1px dashed #d2d2d2;
        line-height   : 26px;
        padding-bottom: 20px;

        i {
          font-size  : 26px;
          line-height: 26px;
          font-weight: bold;
          color      : #e60b16;
        }
      }

      .address {
        padding-top: 13px;
        height     : 32px;
      }

      .address-info {
        padding-left: 60px;
        line-height : 36px;
      }
    }

    .tip {
      color      : #c30000;
      line-height: 42px;
    }

    .num {
      height: 42px;
    }

    .btn {
      a {
        width       : 220px;
        display     : inline-block;
        border      : 1px solid #c30000;
        text-align  : center;
        line-height : 48px;
        font-size   : 18px;
        margin-right: 20px;

        &.addcar {
          background-color: #c30000;
          color           : #fff;
        }
      }
    }
  }

  .shoucang {
    a {
      color       : #999999;
      font-size   : 14px;
      line-height : 14px;
      position    : relative;
      padding-left: 20px;

      span {
        position   : absolute;
        top        : 50%;
        left       : 0;
        margin-top : -8px;
        height     : 16px;
        line-height: 16px;
        font-size  : 16px;
        display    : inline-block;
        float      : left;
      }
    }
  }
}

.num-select {
  width              : 130px;
  display            : inline-block;
  -webkit-user-select: none;
  -moz-user-select   : none;
  -ms-user-select    : none;
  user-select        : none;

  input {
    &.number {
      display    : inline-block;
      line-height: 40px;
      text-align : center;
      border     : 1px solid #a0a0a0;
      width      : 78px;
      padding    : 0;
      margin-left: -1px;
      outline    : none;
    }
  }

  span {
    display    : inline-block;
    line-height: 40px;
    text-align : center;
    border     : 1px solid #a0a0a0;

    &.jian {
      width : 24px;
      cursor: pointer;
    }

    &.jia {
      width      : 24px;
      cursor     : pointer;
      margin-left: -1px;
    }
  }
}

.pro_main_bottom {
  .left {
    width: 200px;

    .tit {
      border-bottom   : 1px solid #a0a0a0;
      line-height     : 48px;
      text-align      : center;
      font-size       : 18px;
      font-weight     : bold;
      background-color: #f5f5f5;
    }

    .xgfl {
      border: 1px solid #a0a0a0;

      ul {
        padding: 20px;

        li {
          display     : inline-block;
          margin-right: 46px;

          a {
            display    : inline-block;
            line-height: 2em;
          }
        }
      }
    }

    .history {
      border: 1px solid #a0a0a0;

      .list {
        padding: 20px;

        .item {
          width        : 158px;
          border-bottom: 1px solid #f5f5f5;

          a {
            display: block;

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

            .content {
              margin  : 10px 0;
              position: relative;

              .title {
                font-size    : 14px;
                line-height  : 14px;
                margin-bottom: 5px;
              }

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

                span {
                  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;
              }
            }
          }
        }
      }
    }
  }

  .right {
    width      : 748px;
    margin-left: 28px;

    .pro_main_tab {
      border  : 1px solid #a0a0a0;
      overflow: hidden;
      height  : 52px;

      a {
        line-height     : 49px;
        height          : 49px;
        display         : inline-block;
        border-left     : 1px solid #a0a0a0;
        border-top      : 1px solid #a0a0a0;
        padding         : 0 24px;
        margin-left     : -1px;
        font-size       : 18px;
        float           : left;
        background-color: #fff;
        position        : relative;
        z-index         : 1;
        top             : -1px;

        i {
          color: #10bb55;
        }

        &.on {
          border-right : 1px solid #a0a0a0;
          border-bottom: 3px solid #008c00;
        }
      }

      &.pl {
        border: 1px solid #f3f3f3;

        a {
          border-left: 1px solid #f3f3f3;
          border-top : 1px solid #f3f3f3;

          &.on {
            border-right: 1px solid #f3f3f3;
          }
        }
      }
    }

    .info {
      border : 1px solid #a0a0a0;
      padding: 20px 30px 30px;

      table {
        width: 100%;

        tr {
          td {
            width      : 33.333333%;
            font-size  : 18px;
            line-height: 36px;
          }
        }
      }

      .info-content {
        border-top : 1px solid #f5f5f5;
        padding    : 30px 0 0;
        margin-top : 20px;
        color      : #999;
        font-size  : 16px;
        line-height: 24px;
      }
    }

    .content {
      img {
        display  : block;
        max-width: 100%;
        width    : 100%;
        height   : auto!important;
      }
    }

    .pro_main_pl {
      margin-top: -1px;

      .pl-sort {
        background-color: #f5f5f5;
        height          : 50px;
        line-height     : 50px;
        padding         : 0 10px;

        input {
          display: inline-block;
          margin : 18px 10px 18px 0;
          float  : left;
          width  : 14px;
          height : 14px;
        }

        label {
          display     : inline-block;
          margin-right: 15px;
          float       : left;
          cursor      : pointer;
        }

        a {
          display      : inline-block;
          float        : right;
          padding-right: 22px;
          background   : url("../images/pj_more.png") no-repeat right center;
        }
      }

      .pl-list {
        .item {
          padding      : 40px 0;
          min-height   : 54px;
          position     : relative;
          border-bottom: 1px solid #d2d2d2;

          .photo {
            position     : absolute;
            left         : 0;
            top          : 40px;
            width        : 54px;
            height       : 54px;
            border-radius: 100%;
          }

          .star {
            display: inline-block;
          }

          .inner {
            padding-left: 70px;
            font-size   : 14px;
            line-height : 26px;

            .thumb-list {
              margin-top: 15px;

              ul {
                li {
                  width              : 72px;
                  height             : 72px;
                  background-position: center;
                  background-size    : cover;
                }
              }
            }
          }
        }
      }
    }
  }
}

.klyk {
  width      : 198px;
  border     : 1px solid #a0a0a0;
  position   : absolute;
  top        : 74px;
  left       : 50%;
  margin-left: 400px;

  .tit {
    font-size : 12px;
    position  : relative;
    padding   : 0 20px;
    margin-top: 10px;

    &::after {
      display         : block;
      width           : 106px;
      height          : 1px;
      background-color: #dcdcdc;
      content         : "";
      position        : absolute;
      top             : 50%;
      right           : 20px;
    }
  }

  .list {
    padding: 20px;

    .item {
      width        : 158px;
      border-bottom: 1px solid #f5f5f5;

      a {
        display: block;

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

        .content {
          margin  : 10px 0;
          position: relative;

          .title {
            font-size    : 14px;
            line-height  : 14px;
            margin-bottom: 5px;
          }

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

            span {
              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;
          }
        }
      }
    }
  }
}

.cjwt {
  border-top: 1px solid #dcdcdc;
  padding   : 40px 0;

  .left {
    width: 220px;

    .pannel {
      margin-bottom: 20px;

      .tit {
        background-color   : #2d8800;
        color              : #fff;
        line-height        : 58px;
        font-size          : 20px;
        padding-left       : 20px;
        cursor             : pointer;
        background-image   : url("../images/ppp.png");
        background-repeat  : no-repeat;
        background-position: 92% center;

        &.on {
          background-image: url("../images/jjj.png");
        }
      }

      ul {
        display: none;

        li {
          margin-top: 7px;

          a {
            background-color: #f5f5f5;
            display         : block;
            line-height     : 50px;
            padding-left    : 30px;
            color           : #333;

            &.on,
            &:hover {
              color: #2d8800;
            }
          }
        }
      }
    }
  }

  .right {
    width: 940px;

    .tit {
      background-color: #f5f5f5;
      color           : #333333;
      line-height     : 55px;
      font-size       : 18px;
      padding-left    : 25px;
    }

    ul {
      padding: 0 25px;

      li {
        a {
          border-bottom: 1px solid #d2d2d2;
          display      : block;
          color        : #333;
          line-height  : 70px;

          &:hover {
            color: #666;
          }
        }
      }
    }

    .content {
      padding: 58px 68px;

      strong {
        color: #333;
      }
    }
  }
}

.zjpj {
  .tit {
    background-color: #f5f5f5;
    color           : #333333;
    line-height     : 55px;
    font-size       : 18px;
    padding-left    : 25px;
  }

  .inner {
    border        : 1px solid #e5e5e5;
    overflow      : hidden;
    padding-bottom: 60px;

    .pic {
      margin-top : 54px;
      margin-left: 100px;

      a {
        img {
          display: block;
          border : 1px solid #dcdcdc;
        }

        p {
          line-height: 40px;
        }
      }
    }

    .right {
      width      : 780px;
      padding-top: 54px;
      font-size  : 18px;

      .star {
        font-size    : 16px;
        margin-bottom: 40px;
      }

      textarea {
        resize        : none;
        vertical-align: top;
        width         : 600px;
        height        : 128px;
        border        : 1px solid #dcdcdc;
        margin-bottom : 40px;
      }
    }
  }
}

.verify-code {
  font-size : 20px;
  text-align: center;
  cursor    : pointer;
  border    : 1px solid #ddd;
  float     : right;
}

.cerify-code-panel {
  width   : 245px;
  height  : 100%;
  overflow: hidden;
  float   : left;
}

.verify-code-area {
  float: left;
}

.verify-input-area {
  float        : left;
  width        : 126px;
  padding-right: 10px;
}

.verify-change-area {
  line-height: 30px;
  float      : left;
  display    : none;
}

.varify-input-code {
  display: inline-block;
  width  : 126px;
  height : 40px;
}

.verify-change-code {
  color : #337AB7;
  cursor: pointer;
}

.verify-btn {
  width           : 200px;
  height          : 42px;
  background-color: #3ea600;
  color           : #FFFFFF;
  border          : none;
  float           : right;
  border-radius   : 5px;
}