index.scss

.detail-box {
  .btns-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 44px;
    background-color: $bg_fff;
    display: flex;
    justify-content: space-between;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    z-index: 3;

    .consult {
      display: inline-block;
      height: 100%;
      background-color: $bg_fff;
      text-align: center;
      padding-top: 3px;

      .iconerji {
        display: block;
        height: 20px;
        line-height: 20px;
        font-size: 20px;
        color: $active;
      }

      span {
        display: block;
        font-size: 12px;
        color: $color_555;
      }
    }

    .consult-s {
      width: 95px;
    }

    .consult-m {
      width: 50%;
    }

    .consult-l {
      width: 100%;
      height: 100%;
      line-height: 44px;
      text-align: center;
      font-size: 18px;
      color: $white;
      background: linear-gradient(90deg, $bg_active 0%, $bg_007FD0 100%);

      i {
        font-size: 25px;
        margin-right: 10px;
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
      }
    }

    .btn {
      height: 100%;
      color: $white;
      font-size: 16px;
      border: none;
      padding: 8px 0;
      text-align: center;
    }

    .btn-s {
      width: 140px;

      span {
        display: block;
      }

      span:nth-child(1) {
        font-size: 14px;
      }

      span:nth-child(2) {
        font-size: 12px;
      }
    }

    .sign-up-now {
      width: 50%;
      color: #fff;
      font-size: 16px;
      background: linear-gradient(270deg, rgba(255, 64, 0, 1) 0%, rgba(253, 119, 0, 1) 100%);
    }

    .learn-now {
      background-color: #0099FF;
      font-size: 16px;
      color: #FFF;
    }

    .get-course {
      width: 280px;
      height: 44px;
      background: linear-gradient(90deg, rgba(253, 119, 0, 1) 0%, rgba(255, 64, 0, 1) 100%);
    }

    .btn-m {
      width: 50%;
    }

    .btn-l {
      width: 280px;
    }

    .bg-FCCD05 {
      background: linear-gradient(90deg, $bg_FCCD05 0%, $bg_FF9500 100%);
    }

    .bg-FD7700 {
      background: linear-gradient(90deg, $bg_FD7700 0%, $bg_FF4000 100%);
    }

    .bg-09f {
      background: linear-gradient(90deg, $bg_0198FE 0%, $bg_077FD0 100%);
    }

    .bg-F4AAA7 {
      background-color: $bg-F4AAA7;
    }

    .bg-E02E24 {
      background-color: $bg_E02E24;
    }

  }
}


.cancel-bargain {
  width: 300px;
  height: 139px;
  background-color: $bg_fff;
  margin: 194px auto 20px auto;
  border-radius: 5px;
  padding: 15px 0 0 0;
  text-align: center;
  position: relative;

  .top-img {
    height: 30px;
    line-height: 30px;

    i {
      color: #f3ac3c;
      font-size: 30px;
    }
  }

  .tip-mess {
    font-size: 14px;
    color: $color_666;
    margin-top: 3px;
    padding: 0 15px;
  }

  .btns {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    border-top: 1px solid $sp_ddd;

    button {
      width: 150px;
      height: 100%;
      background-color: $bg_fff;
      font-size: 16px;
      border: none;
    }

    :nth-child(1) {
      color: $color_333;
      border-right: 1px solid $sp_ddd;
      border-radius: 0 0 0 5px;
    }

    :nth-child(2) {
      color: $active;
      border-radius: 0 0 5px 0;
    }
  }


}