/* pages/instrument/instrument.wxss */
page {
  background: #f8f8f8;
}

.nav {
  position: fixed;
  z-index: 99;
  width: 100%;
  top: 0;
  .logo {
    width: 223rpx;
  }
  .nav_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 32rpx;
  }
}

.footer {
  position: fixed;
  z-index: 10;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 153rpx;
  background: #ffffff;
  box-shadow: 0rpx -3rpx 7rpx 1rpx rgba(173, 191, 207, 0.21);
  color: #fff;
  .btn {
    width: 690rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #000000;
    border-radius: 45rpx;
  }
}

.main {
  text-align: center;
  padding-bottom: 153rpx;
  .top {
    .top_title {
      height: 45rpx;
      font-size: 48rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      line-height: 1;
      margin: 70rpx 0 48rpx;
    }

    .top_tips {
      width: 470rpx;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      margin: 0 auto 18rpx;
      line-height: 1;
      &:last-child {
        margin-bottom: 0;
        /*margin-bottom: 60rpx;*/
      }
    }
  }

  .banner_list {
    height: 460rpx;
    border-radius: 30rpx;
    // margin: 43rpx 35rpx 51rpx;
    // margin: 43rpx 35rpx 67rpx;
    margin: 43rpx 35rpx 89rpx;
    background-color: #ababab;
  }

  .banner_item {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
  }

  .form {
    margin: 0 33rpx;
    text-align: left;
  }

  .form_item {
    margin-bottom: 51rpx;
    &.is-instrument {
      margin-bottom: 70rpx;
    }
    &.is-inputCode {
      margin-bottom: 48rpx;
    }
    &.is-codeImg {
      margin-bottom: 51rpx;
    }
    &.is-channel {
      margin-bottom: 0;
    }

    .label_box {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      font-size: 28rpx;
      font-weight: bold;
      color: #030000;
      font-family: PingFang SC;
      margin-bottom: 30rpx;
      .label_text {
        display: flex;
        align-items: center;
        font-size: 26rpx;
        color: #666;
        .label-tips {
          font-weight: 400;
        }
        .label::after {
          content: "*";
          color: #eb5858;
          margin-left: 10rpx;
        }
        .right_icon {
          width: 10rpx;
          height: 20rpx;
          vertical-align: middle;
          margin-left: 14rpx;
        }
      }
    }
    .photo_box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 160rpx;
      height: 160rpx;
      background: #ffffff;
      border: 1px solid #dddddd;
      border-radius: 20rpx;
    }
  }
}

.instrument_list {
  // border: 1px solid #fbf0de;
  // .instrument_item {
  //   // background-color: #fbf0de;
  // }
  .instrument_img {
    width: 100%;
    height: 160rpx;
    background-color: #ababab;
  }
}

.add {
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
}

.ipt_box {
  position: relative;
}

.ipt {
  height: 80rpx;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 3rpx;
  padding-left: 28rpx;
  padding-right: 56rpx;
  font-size: 28rpx;
  /*font-weight: 400;*/
}

.icon {
  position: absolute;
  width: 30rpx;
  height: 30rpx;
  right: 26rpx;
  bottom: 30rpx;
}

.cover {
  display: inline-block;
  position: relative;
  width: 303rpx;
  height: 218rpx;
  border-radius: 30rpx;
  overflow: hidden;
  border: 2rpx solid transparent;
  margin-right: 16rpx;
  box-sizing: border-box;
  .image {
    width: 100%;
    height: 160rpx;
  }

  .desc {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 63rpx;
    background-color: #ffffff;
    padding: 0 24rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: #000000;
    font-family: PingFang SC;
    /*text-align: center;*/
    line-height: 63rpx;
    box-sizing: border-box;
  }
}

.cover:last-child {
  margin-right: 0;
}

.active_cover {
  border-color: #f4e3cb;
  .desc {
    background: linear-gradient(90deg, #efdcc2, #fff2df);
  }
}

.popup_box {
  border-radius: 30rpx;
  background: #fff;
  position: relative;
  padding: 80rpx 0;
}

.popup_box > .close_icon {
  position: absolute;
  right: 20rpx;
  top: 20rpx;
  width: 50rpx;
}

.popup_box > .success_icon {
  width: 130rpx;
  margin: auto;
}

.popup_box > .tip {
  font-weight: bold;
  font-size: 30rpx;
  text-align: center;
  margin-top: 20rpx;
}

.popup_box3 {
  border-radius: 30rpx;
  position: relative;
  width: calc(100% - 60rpx);
  height: 100%;
  padding: 30rpx;
}

.popup_box3 > .popup_box3btn {
  background: #000000;
  color: #fff;
  font-size: 32rpx;
  width: 270rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin: 30rpx auto 0;
  text-align: center;
  border-radius: 45rpx;
}

.form_item.is-tab {
  margin-bottom: 24rpx;
}

.inputCode_box {
  width: 690rpx;
  margin: 0 auto 30rpx;
  padding: 47rpx 30rpx 43rpx 20rpx;
  background-color: #fff;
  border-radius: 30rpx;
  box-sizing: border-box;
}

.tab_list {
  display: flex;
  height: 58rpx;
  /*margin-top: 56rpx;*/
}

.tab_item {
  position: relative;
  height: 58rpx;
  line-height: 58rpx;
  /*margin-right: 66rpx;*/
  font-size: 30rpx;
  color: #666666;
}

.tab_item:nth-child(1) {
  min-width: 214rpx;
  margin-right: 60rpx;
}

/*.tab_item:nth-child(1) {
margin-right: 60rpx;
}
.tab_item:nth-child(2) {
  min-width: 214rpx;
}*/

.tab_item.is-active {
  color: #000000;
  font-size: 36rpx;
  font-weight: 800;
}

.tab_item.is-active .tab_active_line {
  display: block;
}

.tab_active_line {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0rpx;
  right: 0;
  margin: 0 auto;
  width: 80rpx;
  height: 4rpx;
  border-radius: 2rpx;
  background: linear-gradient(90deg, #eecda1, #ffe9c7);
}

.footer-btn-scan {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer-btn-scan-img {
  width: 30rpx;
  height: 30rpx;
  margin-right: 20rpx;
}

.bind_info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 640rpx;
  padding-bottom: 47rpx;
  text-align: center;
  background: #ffffff;
  border-radius: 30rpx;
}

.bind_success_icon {
  width: 120rpx;
  height: 120rpx;
  background: #8ee2b1;
  border-radius: 50%;
  margin: 48rpx auto 27rpx;
}

.bind_success_text {
  line-height: 1 !important;
  overflow: visible;
  font-size: 30rpx;
  color: #030000;
  line-height: 60rpx;
  margin-bottom: 40rpx;
  text-align: center;
}

.bind_successBtn_ok {
  width: 270rpx;
  height: 90rpx;
  line-height: 90rpx;
  margin: 0 auto;
  text-align: center;
  background: #000000;
  border-radius: 45rpx;
  color: #fff;
}
