@import "../../style/var.less";
@import "../../style/mixins.less";

.itd {
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: #FFFFFF;
  &-divider {
    margin: 0;
    border-color: #ECE9E9;
  }
  &-head {
    width: 100% !important;
    @{deep} & > div {
      width: 100% !important;
      z-index: 100;
    }
    @{deep} .cr-tabbar {
      background-color: #f5f5f5;
      font-size: @font-size-16;
      padding: @padding-lg+1 0;
      &-item {
        position: relative;
        &::after {
          position: absolute;
          top: 26px;
          // transition: width .2s linear;
          content: " ";
          display: block;
          width: 0;
          height: 4px;
          background: @orange-light;
          border-radius: @border-radius-lx;
        }
        &--active {
          font-weight: 600;
          &::after {
            width: 32px;
          }
        }
      }
    }
  }
  &-quali {
    padding: 13px 20px 24px;
    font-size: 18px;
    font-weight: 600;
    color: #242629;
    line-height: 24px;
    background-color: #FFFFFF;
    &-item {
      display: flex;
      flex-direction: column;
      &:not(:first-child), &:not(:last-child) {
        margin: 24px 0px 24px;
      }
      &:first-child, &:last-child  {
        margin: 0;
      }
      &-title {
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: 600;
        color: #242629;
        line-height: 24px;
      }
      &-content {
        padding: 16px 20px 16px;
        background: #F6F7FA;
        border-radius: 14px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        // line-height: 18px;
      }
      &-extra {
        padding: 20px 20px 16px;
        background: #F6F7FA;
        border-radius: 14px;
        &:not(:last-child) {
          margin: 10px 0;
        }
        &-image {
          height: 200px;
          &_large {
            height: 400px;
          }
        }
        &-desc {
          margin-top: 12px; 
          font-size: 12px;
          font-weight: 400;
          color: #333333;
          line-height: 18px;
          text-align: center;
        }
      }
    }
  }
  &-product {
    padding: 16px 20px 0;
    &-pro {
      display: flex;
      &-title {
        padding: 14px 0 31px 18px;
        width: 121px;
        background: #F6F7FA;
        border-radius: 16px 0px 0px 0px;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 14px;
      }
      &-value {
        flex: 1;
        padding: 14px 0 28px 13px;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 14px;
      }
    }
    &-comp {
      display: flex;
      &-title {
        padding: 0 0 19px 18px;
        width: 121px;
        background: #F6F7FA;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 20px;
      }
      &-value {
        flex: 1;
        padding: 0 0 16px 13px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
    }
    &-divider {
      margin: 0;
      border-color: #ECE9E9;
    }
    &-no {
      display: flex;
      &-title {
        padding: 20px 0 0px 18px;
        width: 121px;
        border-radius: 0px 0px 0px 16px;
        background: #F6F7FA;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 20px;
      }
      &-value {
        flex: 1;
        padding: 20px 0 16px 13px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
    }
  }
  &-comp {
    padding: 16px 20px 0;
    &-info {
      display: flex;
      &-title {
        padding: 14px 0 31px 18px;
        width: 121px;
        background: #F6F7FA;
        border-radius: 16px 0px 0px 0px;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 14px;
      }
      &-value {
        flex: 1;
        padding: 14px 0 28px 13px;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 14px;
      }
    }
    &-branch {
      display: flex;
      &-title {
        padding: 0 0 19px 18px;
        width: 121px;
        background: #F6F7FA;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 20px;
      }
      &-value {
        flex: 1;
        padding: 0 0 16px 13px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
    }
    &-item {
      display: flex;
      &-title {
        padding: 16px 0 16px 18px;
        width: 121px;
        background: #F6F7FA;
        font-size: 12px;
        font-weight: 600;
        color: #666666;
        line-height: 20px;
      }
      &-value {
        flex: 1;
        padding: 16px 0 16px 13px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
      }
      &:last-child {
        .itd-comp-item-title {
          border-radius: 0 0 0 16px;
        }
      }
    }
  }
}

