bishengWeb/src/style/zk.scss

.nav-link1,.nav-link2,.nav-link3,.nav-link4,.nav-link5 {
    background-image: none;
    text-decoration: none;
    color: white;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin-bottom: 40px;
    & span {
      font-weight: 400;
      font-size: 12px;
      color: #666666;
      margin-bottom: -3px;
    }
  }
  .nav-link1 {
    background-image: url('../assets/nav/icon1.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .nav-link1.active {
    background-image: url('../assets/nav/icon1-active.png');
    background-size: 100%;
    background-repeat: no-repeat;
    & span {
      color: #FFCF33;
    }
  }
  .nav-link2 {
    background-image: url('../assets/nav/icon2.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .nav-link2.active {
    background-image: url('../assets/nav/icon2-active.png');
    background-size: 100%;
    background-repeat: no-repeat;
    & span {
      color: #FFCF33;
    }
  }
  .nav-link3 {
    background-image: url('../assets/nav/icon3.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .nav-link3.active {
    background-image: url('../assets/nav/icon3-active.png');
    background-size: 100%;
    background-repeat: no-repeat;
    & span {
      color: #FFCF33;
    }
  }
  .nav-link4 {
    background-image: url('../assets/nav/icon4.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .nav-link4.active {
    background-image: url('../assets/nav/icon4-active.png');
    background-size: cover;
    background-repeat: no-repeat;
    & span {
      color: #FFCF33;
    }
  }
  .nav-link5 {
    background-image: url('../assets/nav/icon5.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .nav-link5.active {
    background-image: url('../assets/nav/icon5-active.png');
    background-size: 100%;
    background-repeat: no-repeat;
    & span {
      color: #FFCF33;
    }
  }
  .xinDuiHua-box{
    background-image: url('../assets/chat/duihua-bg.png');
    background-size: 30px 100%;
    background-repeat: no-repeat;
  }
  .xinDuiHua-boxR{
    width: 30px;
    height: 100%;
    background-image: url('../assets/npc/border-r.png');
    background-size: 30px 100%;
    background-repeat: no-repeat;
    background-color: #000;
    opacity: 70%;
  }
  .xinDuiHua{
    display: flex;
    padding-top: 21px;
    width: 100%;
    z-index: 1;
    .xinDuiHua-btn{
      width: 260px;
      height: 35px;
      background: #0D0D0D;
      border-radius: 18px;
      border: 1px solid #2C2C2C;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #CCCCCC;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 14px;
    }
    .xinDuiHua-del{
      margin-left: 14px;
      width: 35px;
      height: 35px;
      background: #000000;
      border-radius: 28px;
      border: 1px solid #2C2C2C;
      display: flex;
      justify-content: center;
      align-items: center;
      >img{
        width: 14px;
      }
    }
  }
  .xinDuiHua-list-active{
    background-color: rgba(255, 225, 128, 0.1);
    >div:nth-of-type(1){
      >div{
        >p{
          color: #E5BB2E!important;
        }
      }
    }
  }
  .xinDuiHua-list-item{
    width: 100%;
    height: 63px;
    border-radius: 7px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >div:nth-of-type(1){
      margin-left: 14px;
      display: flex;
      align-items: center;
      >img{
        width: 35px;
        height: 35px;
      }
      >div{
        margin-left: 14px;
        >p{
          width: 190px;
          // width: 126px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: rgba(255, 255, 255, 0.5);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        >div{
          width: 35px;
          height: 14px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 7px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 2px;
        }
      }
    }
    >div:nth-of-type(2){
      display: flex;
      align-items: center;
      >img:nth-of-type(1){
        width: 14px;
      }
      >img:nth-of-type(2){
        width: 35px;
        margin-left: 10px;
        margin-right: 14px;
      }
    }
  }
  .duihua-chat{
    width: calc(100% - 288px);
    height: 100%;
    // background-image: url('../assets/chat/duihua-bg.png');
    // background-size: 30px 100%;
    // background-repeat: no-repeat;
    
  }
  .chatShare{
    .duihua-chat{
      width: 100%!important;
      height: 100%;
    }
    .chata{
      height: 96vh!important;
    }
  }
  .chatShareM{
    .duihua-chat{
      width: 100%!important;
      height: 100%;
    }
  }
  .duihua-chat-top{
    width: 100%;
    height: 49px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(13, 13, 13, 0.5);
    backdrop-filter: blur(10px);
    // opacity: 0.8;
    // &::before{
    //   content: "";
    //   width: 100%;
    //   height: 100%;
    //   left: 0;
    //   top: 0;
    //   position: absolute;
    //   background: rgba(13, 13, 13, 0.5);
    //   backdrop-filter: blur(20px);
    //   opacity: 0.8;
    // }
    >div:nth-of-type(1){
      display: flex;
      align-items: center;
      margin-left: 35px;
      >img{
        width: 35px;
      }
      >p{
        margin-left: 21px;
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 15px;
        color: #FEFEFE;
      }
      >div{
        margin-left: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 13px;
        border-radius: 7px;
      }
      >div:nth-of-type(1){
        width: 70px;
        height: 21px;
        background: rgba(67, 175, 210, 0.15);
        color: #43AFD2;
      }
      >div:nth-of-type(2){
        width: 77px;
        height: 21px;
        background: rgba(255, 195, 0, 0.15);
        color: #D1B352;
      }
    }
    >div:nth-of-type(2){
      margin-right: 21px;
      >img{
        width: 18px;
      }
    }
  }
  .duihua-input-box{
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding-bottom: 40px; */
    .duihua-input{
      width: 85%;
      background: #1A1A1A;
      box-shadow: 0px 2px 5px 0px rgba(0,1,51,0.15);
      border-radius: 21px;
      padding: 9px 22px 9px 22px;
      & textarea {
        // width: calc(100% - 85px)!important;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        height: 20px!important;
        line-height: 20px!important;
      }
    }
    .duihua-input-btn{
      /* width: 84px; */
      height: 42px;
      background: #FFD54C;
      border-radius: 30px;
      >div{
        width: 100%;
        height: 100%;
      }
      .duihua-input-btn-send{
        display: flex;
        justify-content: center;
        align-items: center;
        >img{
          width: 20px;
        }
      }
    }
  }
  .avatarZk{
    margin-top: 14px;
    >p{
      font-family: PingFang SC;
      font-weight: 400;
      color: #FFFEFE;
    }
  }
  .chat-end-zk{
    background: #2E2406;
    border-radius: 40px;
    padding: 13px 20px 13px 20px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 13px;
    line-height: 15px;
    color: #FFFFFF;
  }
  .chat-end-btn{
    display: flex;
    justify-content: flex-end;
    margin-top: 7px;
    >img{
      margin-left: 14px;
    }
  }
  .chat-start-zk{
    background: #1A1A1A;
    box-shadow: 0px 2px 5px 0px rgba(0,1,51,0.15);
    border-radius: 20px;
    padding: 13px 20px 13px 20px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    & p {
      font-size: 13px;
      line-height: 15px;
    }
  }
  .chat-start-btn{
    >img{
      width: 28px;
      margin-right: 14px;
    }
  }
  .chat-start-btnM{
    >img{
      width: 20px;
      margin-right: 10px;
    }
  }





  .npcInfoBox{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    .npcInfo{
      width: 338px;
      height: 100%;
      background: #000000;
      box-shadow: 0px 0px 50px 0px rgba(255,255,255,0.4);
      position: absolute;
      right: 0;
      padding-left: 15px;
      >p:nth-of-type(1){
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 15px;
        color: #FEFEFE;
        margin-top: 18px;
      }
      >div:nth-of-type(1){
        width: 309px;
        height: 127px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 14px;
        margin-top: 25px;
        >div:nth-of-type(2){
          display: flex;
          align-items: center;
          margin-left: 21px;
          margin-top: 21px;
          >img{
            width: 43px;
          }
          >p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            margin-left: 14px;
          }
        }
        >p{
          margin-left: 21px;
          margin-top: 15px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999999;
        }
        .npcInfoItemBg{
          position: relative;
          overflow: hidden;
          height: 64px;
          margin-bottom: -56px;
          background: rgba(0, 0, 0, 0.06);
          -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
          mask-image: linear-gradient(to bottom, #fff, transparent);
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          >span{
            width: 200px;
            height: 200px;
            font-size: 18px;
            cursor: default;
            cursor: pointer;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0);
            border: 1px solid transparent;
            position: absolute;
            top: -50%;
            -webkit-filter: blur(50px) saturate(2);
            filter: blur(50px) saturate(2);
            >span{
              transform: scale(1);
              font-size: 140px;
              font-weight: 700;
              line-height: 1 !important;
              color: #fff;
              >div{
                height: 160px;
                width: 160px;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                line-height: 1;
                text-align: center;
              }
            }
          }
        }
      }
      >div:nth-of-type(2){
        margin-top: 27px;
        >p{
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 15px;
          color: #FEFEFE;
        }
        >div{
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          margin-top: 3px;
          >img{
            width: 14px;
            margin-left: 14px;
          }
        }
      }
      >div:nth-of-type(3){
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 27px;
        >p{
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 15px;
          color: #FEFEFE;
        }
        >div{
          margin-right: 14px;
        }
      }
      >div:nth-of-type(4){
        display: flex;
        justify-content: space-between;
        margin-top: 27px;
        margin-bottom: 14px;
        >p{
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 15px;
          color: #FEFEFE;
        }
        >span{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FF6060;
          margin-right: 14px;
        }
      }
      >div:nth-of-type(5),>div:nth-of-type(6),>div:nth-of-type(7){
        width: 309px;
        height: 35px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 7px;
        >p{
          margin-left: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
        }
        >img{
          width: 21px;
          margin-right: 13px;
        }
      }
      >div:nth-of-type(8){
        position: absolute;
        bottom: 14px;
        width: 309px;
        height: 35px;
        background: #FFD54C;
        border-radius: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .selectNpc{
    background: rgba(0, 0, 0, 0.6)!important;
    .zidingyi{
      width: 237px;
      height: 122px;
      background: #131313;
      border-radius: 14px;
      margin-top: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
      position: relative;
      >div{
        display: flex;
        p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #FFFFFF;
          margin-left: 10px;
        }
      }
    }
    .selectNpcH3{
      font-weight: 600;
      color: #FFFFFF;
    }
    .selectNpcP{
      font-weight: 400;
      color: #999999;
    }
    .acss-134lb3j{
      --rows:4;
    }
    .selectNpcSpotlightCard{
      
      .acss-1iddemf{
        background: rgba(45, 45, 45, 0.75);
      }
      .hover-card::before{
        background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
      }
      .hover-card::after{
        background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%);
      }
      .acss-13wwyd1{
        background: #111111;
      }
    }
    .active{
      border-radius: 12px;
      border: 1px solid #FFD025;
    }
    .selectNpcFlexbox{
      height: 100%;
      display: block;
      padding-bottom: 14px;
      >div:nth-of-type(2){
        display: flex;
        align-items: self-start;
        padding: 14px 14px 0 14px;
        >div{
          margin-left: 15px;
          >p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }
          >div{
            display: flex;
            >div{
              margin-top: 4px;
              padding: 0 6px;
              height: 17px;
              background: rgba(255, 213, 76, 0.15);
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 7px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 10px;
              color: #CCCCCC;
            }
          }
        }
      }
      >p{
        padding: 0 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 21px;
      }
      .npcInfoItemBg{
        position: relative;
        overflow: hidden;
        height: 64px;
        margin-bottom: -56px;
        background: rgba(0, 0, 0, 0.06);
        -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
        mask-image: linear-gradient(to bottom, #fff, transparent);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        >span{
          width: 180px;
          height: 180px;
          font-size: 18px;
          cursor: default;
          cursor: pointer;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0);
          border: 1px solid transparent;
          position: absolute;
          top: -50%;
          -webkit-filter: blur(50px) saturate(2);
          filter: blur(50px) saturate(2);
          >span{
            transform: scale(1);
            font-size: 140px;
            font-weight: 700;
            line-height: 1 !important;
            color: #fff;
            >div{
              height: 130px;
              width: 130px;
              position: relative;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-align-items: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              line-height: 1;
              text-align: center;
            }
          }
        }
      }
    }
    .selectNpcOk{
      width: 127px;
      height: 35px;
      background: #FFD025;
      border-radius: 18px;
      margin: 20px auto 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #010101;
    }
  }

  .chatShare{
    width: 100vw;
    height: 100vh;
    background: #262626;
    display: flex;
    justify-content: center;
    align-items: center;
    >div{
      width: 98vw;
      height: 96vh;
      background: #000000;
      border-radius: 14px;
      overflow: hidden;
    }
  }
  .chatShareM{
    .chatShareM-tit{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      border-bottom: 1px solid #333333;
      >div:nth-of-type(1){
        img{
          width: 20px;
          margin-left: 15px;
        }
      }
      >p{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #FFFFFF;
      }
      >div:nth-of-type(2){
        img{
          width: 25px;
          margin-right: 15px;
        }
      }
    }
  }




  .npcInfoBoxM{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    .npcInfo{
      width: 280px;
      height: 100%;
      background: #000000;
      box-shadow: 0px 0px 25px 0px rgba(255,255,255,0.4);
      position: absolute;
      right: 0;
      padding-left: 15px;
      >p:nth-of-type(1){
        font-family: PingFang SC;
        font-weight: 600;
        font-size: 15px;
        color: #FEFEFE;
        margin-top: 18px;
      }
      >div:nth-of-type(1){
        width: 250px;
        /* height: 105px; */
        background: rgba(255, 255, 255, 0.05);
        border-radius: 10px;
        margin-top: 15px;
        padding-bottom: 14px;
        >div:nth-of-type(2){
          display: flex;
          align-items: center;
          margin-left: 15px;
          margin-top: 15px;
          >img{
            width: 30px;
          }
          >p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            margin-left: 10px;
          }
        }
        >p{
          margin-left: 15px;
          margin-top: 10px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 13px;
          color: #999999;
        }
        .npcInfoItemBg{
          position: relative;
          overflow: hidden;
          height: 64px;
          margin-bottom: -56px;
          background: rgba(0, 0, 0, 0.06);
          -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
          mask-image: linear-gradient(to bottom, #fff, transparent);
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          >span{
            width: 180px;
            height: 180px;
            font-size: 18px;
            cursor: default;
            cursor: pointer;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0);
            border: 1px solid transparent;
            position: absolute;
            top: -50%;
            -webkit-filter: blur(50px) saturate(2);
            filter: blur(50px) saturate(2);
            >span{
              transform: scale(1);
              font-size: 140px;
              font-weight: 700;
              line-height: 1 !important;
              color: #fff;
              >div{
                height: 130px;
                width: 130px;
                position: relative;
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-align-items: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                line-height: 1;
                text-align: center;
              }
            }
          }
        }
      }
      >div:nth-of-type(2){
        margin-top: 20px;
        >p{
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 14px;
          color: #FEFEFE;
          margin-left: 5px;
        }
        >div{
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          margin-top: 3px;
          >img{
            width: 13px;
            margin-left: 14px;
          }
        }
      }
      >div:nth-of-type(3){
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 27px;
        >p{
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 14px;
          color: #FEFEFE;
          margin-left: 5px;
        }
        >div{
          margin-right: 20px;
        }
      }
      >div:nth-of-type(4){
        display: flex;
        justify-content: space-between;
        margin-top: 27px;
        margin-bottom: 14px;
        >p{
          font-family: PingFang SC;
          font-weight: 600;
          font-size: 14px;
          color: #FEFEFE;
          margin-left: 5px;
        }
        >span{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FF6060;
          margin-right: 20px;
        }
      }
      >div:nth-of-type(5),>div:nth-of-type(6),>div:nth-of-type(7){
        width: 240px;
        height: 40px;
        background: rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        margin-left: 5px;
        >p{
          margin-left: 10px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #999999;
        }
        >img{
          width: 20px;
          margin-right: 10px;
        }
      }
      >div:nth-of-type(8){
        position: absolute;
        bottom: 14px;
        width: 309px;
        height: 35px;
        background: #FFD54C;
        border-radius: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #000000;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .duiHuaBoxM{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10;
    .duiHua{
      width: 280px;
      height: 100%;
      background: #000000;
      box-shadow: 0px 0px 25px 0px rgba(255,255,255,0.4);
      position: absolute;
      left: 0;
      >div:nth-of-type(1){
        margin-top: 20px;
        display: flex;
        margin-left: 15px;
        >div:nth-of-type(1){
          width: 200px;
          height: 35px;
          background: #01050D;
          border-radius: 18px;
          border: 1px solid #2C2C2C;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #CCCCCC;
        }
        >div:nth-of-type(2){
          margin-left: 15px;
          width: 35px;
          height: 35px;
          background: #0D0A01;
          border-radius: 18px;
          border: 1px solid #2C2C2C;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      >div:nth-of-type(2){
        .active{
          background: rgba(255, 225, 128, 0.1);
          color: #E5BB2E;
          >div:nth-of-type(1){
            >p{
              width: 100px;
              overflow:hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow:ellipsis;
            }
          }
        }
        >div{
          border-radius: 5px;
          display: flex;
          justify-content: space-between;
          >div{
            display: flex;
            align-items: center;
          }
          >div:nth-of-type(1){
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 13px;
            >p{
              width: 170px;
              overflow:hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              -o-text-overflow:ellipsis;
            }
          }
          >div:nth-of-type(2){
            >div{
              display: flex;
              align-items: center;
              justify-content: center;
              align-items: center;
              border-radius: 30px;
              border: 1px solid #333333;
            }
          }
        }
      }
    }
  }
  .modal-bg{
    background: rgba(0, 0, 0, 0.6);
  }
  .duiHuaPopM{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex!important;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  .duiHuaPopDiv{
    width: 300px;
    background: #262626;
    border-radius: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 25px;
    >h2{
      margin-top: 25px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 15px;
      color: #FFFFFF;
    }
    >input{
      width: 270px;
      height: 45px;
      background: #1A1A1A;
      border-radius: 10px;
      padding-left: 15px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      margin-top: 24px;
    }
    >p{
      margin-top: 45px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 15px;
      color: #FFFFFF;
    }
    >div{
      display: flex;
      justify-content: space-between;
      margin-top: 30px;
      >div{
        width: 100px;
        height: 40px;
        border-radius: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 15px;
      }
      >div:nth-of-type(1){
        background: #333333;
        color: #CCCCCC;
      }
      >div:nth-of-type(2){
        background: #FFD54C;
        color: #000000;
        margin-left: 30px;
      }
    }
  }
  .popUpDiv{
    width: 325px;
    /* max-height: 550px; */
    background: #262626;
    border-radius: 15px;
    >div:nth-of-type(1){
      width: 100%;
      height: 50px;
      border-radius: 10px 10px 0px 0px;
      background: rgba(255, 195, 0, 0.1);
      display: flex;
      align-items: center;
      justify-content: space-between;
      >p{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #FFFFFF;
        margin-left: 20px;
      }
      >img{
        width: 15px;
        margin-right: 15px;
      }
    }
    >div:nth-of-type(2){
      max-height: 500px;
      display: flex;
      flex-direction: column;
      align-items: center;
      >div{
        width: 305px;
        padding: 10px;
        /* height: 340px; */
        background: #1A1A1A;
        border-radius: 15px;
        margin-top: 10px;
        >div{
          width: 45px;
          height: 15px;
          background: rgba(255, 195, 0, 0.15);
          border-radius: 5px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 9px;
          color: #D1B352;
        }
        >p:nth-of-type(1){
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          margin-top: 5px;
          margin-left: 5px;
        }
        >p:nth-of-type(2){
          font-family: PingFang SC;
          font-weight: 300;
          font-size: 14px;
          color: #CCCCCC;
          margin-top: 5px;
          margin-left: 5px;
        }
      }
    }
  }

  .externalUse{
    >p{
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #FEFEFE;
      margin-top: 14px;
      margin-left: 14px;
    }
    >div:nth-of-type(1){
      display: flex;
      margin-top: 18px;
      margin-left: 14px;
      >div{
        width: 339px;
        height: 81px;
        background: #1A1A1A;
        border-radius: 7px;
        border: 1px solid #666666;
        margin-right: 27px;
        >div{
          display: flex;
          margin-left: 20px;
          margin-top: 20px;
          align-items: center;
          >img{
            width: 14px;
          }
          >p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #FFFFFF;
            margin-left: 14px;
          }
        }
        >p{
          margin-left: 47px;
        }
      }
      .active{
        background: #1A170D;
        border: 1px solid #FFD025;
        >div{
          >p{
            color: #FFD54C;
          }
        }
      }
    }
    .externalUseTabOne{
      margin-top: 14px;
      border-radius: 7px 7px 0px 0px;
      background: rgba(255, 255, 255, 0.1);
      >div:nth-of-type(1){
        display: flex;
        justify-content: space-between;
        padding-top: 14px;
        align-items: center;
        >p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
          margin-left: 20px;
        }
        >div{
          width: 108px;
          height: 27px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 7px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 14px;
          >img{
            width: 14px;
          }
          p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            margin-left: 6px;
          }
        }
      }
      
    }
    .externalUseTabOne-header{
      font-family: PingFang SC;
      font-weight: 400!important;
      font-size: 14px;
      color: #FFFFFF!important;
    }
    .externalUseTabOne-body{
      font-family: PingFang SC;
      font-weight: 300;
      font-size: 14px;
      color: #CCCCCC;
    }
    .externalUseTabTwo{
      margin-top: 14px;
      border-radius: 7px 7px 0px 0px;
      background: rgba(255, 255, 255, 0.1);
      >div:nth-of-type(1){
        display: flex;
        justify-content: space-between;
        padding-top: 14px;
        >div:nth-of-type(1){
          margin-left: 20px;
          margin-top: 6px;
          >p:nth-of-type(1){
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
          }
          >p:nth-of-type(2){
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
          }
        }
        >div:nth-of-type(2){
          display: flex;
          height: 34px;
          align-items: center;
          margin-right: 14px;
          >div:nth-of-type(1){
            width: 271px;
            height: 34px;
            background: #0D0D0D;
            border-radius: 7px;
            display: flex;
            align-items: center;
            >div{
              width: 74px;
              height: 27px;
              background: rgba(255, 255, 255, 0.8);
              border-radius: 7px;
              margin-left: 3px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #1A1A1A;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            >p{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #999999;
              margin-left: 14px;
            }
          }
          >div:nth-of-type(2){
            width: 74px;
            height: 27px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 7px;
            margin-left: 7px;
            display: flex;
            align-items: center;
            justify-content: center;
            >img{
              width: 14px;
              margin-right: 7px;
            }
          }
        }
      }
    }
  }
  .createShare{
    width: 406px;
    padding: 25px;
    background: #262626;
    border-radius: 14px;
    >div:nth-of-type(1){
      >img{
        width: 18px;
        margin-right: 11px;
      }
      >p{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
      }
    }
    >div{
      display: flex;
      align-items: center;
    }
    .createShareDiv{
      margin-top: 18px;
      >div:nth-of-type(1){
        width: 80px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
      }
      >div:nth-of-type(2){
        >input{
          width: 271px;
          height: 34px;
          background: #1A1A1A;
          border-radius: 7px;
          padding-left: 13px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
          outline: none;
        }
      }
    }
    .createShareSpan{
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 11px;
      color: #666666;
      text-decoration-line: underline;
      margin-top: 6px;
      margin-left: 80px;
      cursor: pointer;
    }
    .createShareBtn{
      width: 100%;
      display: flex;
      margin-top: 35px;
      justify-content: flex-end;
      >div{
        width: 95px;
        height: 34px;
        background: #404040;
        border-radius: 17px;
        margin-left: 27px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FEFEFE;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      >div:nth-of-type(2){
        background: #FFD025;
        color: #010101;
      }
    }
  }
  .shareLink{
    width: 813px;
    background: #262626;
    border-radius: 14px;
    padding: 20px 20px 25px 27px;
    >div:nth-of-type(1){
      display: flex;
      align-items: center;
      justify-content: space-between;
      >div{
        display: flex;
        align-items: center;
        >img{
          width: 18px;
          margin-right: 11px;
        }
        >p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #FFFFFF;
        }
      }
      >img{
        width: 14px;
        cursor: pointer;
      }
    }
    >div:nth-of-type(2){
      width: 758px;
      height: 95px;
      background: rgba(255, 255, 255, 0.05);
      box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
      border-radius: 14px;
      >div:nth-of-type(1){
        height: 41px;
        margin-top: 26px;
        background: rgba(255, 213, 76, 0.08);
        border-radius: 14px 14px 0px 0px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        >p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          margin-left: 13px;
        }
        >img{
          width: 14px;
          margin-right: 14px;
          cursor: pointer;
        }
      }
      >div:nth-of-type(2){
        height: 54px;
        display: flex;
        align-items: center;
        >p{
          margin-left: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
        }
      }
    }
    >div:nth-of-type(3){
      display: flex;
      margin-top: 25px;
      align-items: center;
      >p{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FEFEFE;
      }
      >div{
        margin-left: 60px;
      }
    }
  }
  .dialogueLog{
    height: calc(100% - 14px);
    margin-top: 14px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 7px 7px 0px 0px;
    width: calc(100% - 28px);
    margin-left: 14px;
    padding: 20px;
    >div:nth-of-type(1){
      
      >p:nth-of-type(1){
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
      }
      >p:nth-of-type(2){
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
        margin-top: 2px;
      }
    }
    >div:nth-of-type(2){
      margin-top: 20px;
      .dialogueLog-header{
        font-family: PingFang SC;
        font-weight: 400!important;
        font-size: 14px;
        color: #FFFFFF!important;
      }
      .dialogueLog-body{
        font-family: PingFang SC;
        font-weight: 300;
        font-size: 14px;
        color: #CCCCCC;
      }
      .dialogueLog-body-one{
        >p{
          font-family: PingFang SC;
          font-weight: 300;
          font-size: 14px;
          color: #CCCCCC;
        }
        >span{
          display: block;
          font-family: PingFang SC;
          font-weight: 300;
          font-size: 12px;
          color: #666666;
          margin-top: 10px;
        }
      }
      .dialogueLog-body-four{
        >div{
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-weight: 300;
          font-size: 14px;
          color: #FF6060;
          >img{
            width: 14px;
            margin-right: 7px;
          }
        }
        >div:nth-of-type(1){
          margin-bottom: 14px;
          color: #52D191;
        }
      }
      .dialogueLog-zhanwei{
        margin-top: 68px;
        >p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          margin-top: 20px;
        }
      }
    }
  }

  .Log{
    width: 47%;
    height: 100vh;
    background: #000000;
    position: fixed;
    right: 0;
    box-shadow: 0px 0px 34px 0px rgba(255,255,255,0.2);
  }
  
  .Quote{
    width: 650px;
    max-height: 515px;
    background: #262626;
    border-radius: 14px;
    padding: 14px;
    >div:nth-of-type(1){
      display: flex;
      align-items: center;
      margin-left: 5px;
      >img{
        width: 16px;
      }
      >p{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #FFFFFF;
        margin-left: 12px;
      }
    }
    >p{
      margin-left: 5px;
      margin-top: 6px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
    }
    >div:nth-of-type(2){
      >div:nth-child(odd){
        background: #1A1A1A;
      }
      >div:nth-child(even){
        background: #333333;
      }
      >div{
        width: 623px;
        /* height: 176px; */
        box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
        border-radius: 14px;
        margin-top: 14px;
        >div:nth-of-type(1){
          height: 34px;
          background: #3C3622;
          border-radius: 14px 14px 0px 0px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          >div:nth-of-type(1){
            display: flex;
            align-items: center;
            >span{
              margin-left: 15px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 9px;
              color: #D1B352;
            }
            >p{
              margin-left: 5px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #D1B352;
              text-decoration-line: underline;
            }
          }
          >div:nth-of-type(2){
            display: flex;
            align-items: center;
            >span{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 9px;
              color: #C1C0BC;
            }
            >div{
              width: 20px;
              height: 20px;
              background: rgba(255, 255, 255, 0.1);
              border-radius: 50%;
              margin-left: 15px;
              margin-right: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
              >img{
                width: 11px;
              }
            }
            >p{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #D1B352;
              text-decoration-line: underline;
              margin-right: 13px;
            }
          }
        }
        >div:nth-of-type(2){
          padding: 13px;
          >p:nth-of-type(1){
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 24px;
          }
          >p:nth-of-type(2){
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 24px;
          }
        }
      }
    }
  }

  .feedback{
    width: 406px;
    background: #262626;
    border-radius: 14px;
    padding: 25px;
    >div:nth-of-type(1){
      display: flex;
      align-items: center;
      >img{
        width: 19px;
      }
      >p{
        margin-left: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 16px;
        color: #FFFFFF;
      }
    }
    >textarea{
      width: 352px;
      height: 271px;
      background: #1A1A1A;
      box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
      border-radius: 7px;
      outline: none;
      padding: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      margin-top: 15px;
    }
    >div:nth-of-type(2){
      margin-top: 27px;
      display: flex;
      justify-content: flex-end;
      >div{
        margin-left: 27px;
        width: 95px;
        height: 34px;
        background: #404040;
        border-radius: 17px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FEFEFE;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
      >div:nth-of-type(2){
        background: #FFD025;
        color: #010101;
      }
    }
  }

  .completeRecords{
    width: 650px;
    /* height: 799px; */
    background: #262626;
    border-radius: 14px;
    padding: 14px;
    position: relative;
    >div:nth-of-type(1){
      margin-left: 6px;
      margin-top: 6px;
      display: flex;
      align-items: center;
      >img{
        width: 15px;
      }
      >p{
        margin-left: 10px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #FFFFFF;
      }
    }
    >div:nth-of-type(2){
      position: absolute;
      right: 20px;
      top: 20px;
      cursor: pointer;
      >img{
        width: 15px;
      }
    }
    >div:nth-of-type(3){
      max-height: 745px;
      margin-top: 6px;
      >div:nth-child(odd){
        background: #333333;
      }
      >div:nth-child(even){
        background: #1A1A1A;
      }
      >div{
        padding: 14px;
        width: 623px;
        box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
        border-radius: 14px;
        margin-top: 14px;
        >p:nth-of-type(1){
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #FFFFFF;
          line-height: 24px;
        }
        >p:nth-of-type(2){
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          line-height: 24px;
        }
      }
    }
  }


  .dataContent{
    width: 880px;
    height: 535px;
    background: #262626;
    border-radius: 14px;
    display: flex;
    position: relative;
    >div:nth-of-type(1){
      width: 229px;
      height: 100%;
      border-right: 1px solid #4D4D4D;
      >p{
        cursor: pointer;
        margin-left: 20px;
        margin-top: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #D1B352;
        text-decoration-line: underline;
      }
      >div{
        margin-top: 26px;
        margin-left: 20px;
        .active{
          color: #FFD54C;
          background: rgba(255, 225, 128, 0.1);
        }
        >div{
          cursor: pointer;
          width: 190px;
          height: 40px;
          border-radius: 7px;
          display: flex;
          align-items: center;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #999999;
          >img{
            width: 14px;
            margin-left: 20px;
            margin-right: 10px;
          }
          >span{
            margin-top: 2px;
          }
        }
      }
    }
    >div:nth-of-type(2){
      .dataContentRight{
        >p{
          margin-top: 20px;
          margin-left: 20px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #FFFFFF;
        }
        .gengxinshuju{
          margin-top: 10px;
          margin-left: 20px;
          width: 176px;
          height: 27px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 7px;
          display: flex;
          overflow: hidden;
          .active{
            color: #333333;
            background: #FFD54C;
          }
          >div{
            width: 50%;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            >img{
              width: 14px;
              margin-left: 5px;
            }
            >p{
              margin-top: 2px;
            }
          }
        }
        >textarea{
          margin-top: 14px;
          margin-left: 14px;
          width: 623px;
          height: 372px;
          background: #1A1A1A;
          box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
          border-radius: 14px;
          resize: none;
          outline: none;
          padding: 18px 14px;
          font-family: PingFang SC;
          font-weight: 300;
          font-size: 14px;
          color: #FFFFFF;
        }
        .shujusuoyin{
          width: 624px;
          height: 413px;
          margin-left: 14px;
          margin-top: 10px;
          display: flex;
          align-content: flex-start;
          flex-wrap: wrap;
          >div{
            width: 305px;
            height: 135px;
            box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
            border-radius: 3px;
            margin-bottom: 14px;
            background: #333333;
            position: relative;
            .p1{
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 14px;
              color: #FFFFFF;
              margin-left: 16px;
              margin-top: 14px;
            }
            .p2{
              width: 278px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 12px;
              color: #999999;
              margin-left: 14px;
              margin-top: 10px;
            }
            .p3{
              width: 278px;
              font-family: PingFang SC;
              font-weight: 300;
              font-size: 12px;
              color: #FFFFFF;
              margin-left: 14px;
              margin-top: 10px;
            }
            .del{
              position: absolute;
              width: 14px;
              right: 14px;
              top: 14px;
              cursor: pointer;
            }
          }
          >div:nth-child(even){
            margin-left: 14px;
          }
          .shujusuoyinDefault{
            background: #1A1A1A;
          }
          .shujusuoyinEdit{
            textarea{
              width: 291px;
              height: 91px;
              background: #333333;
              border-radius: 3px;
              border: 1px solid #D1B352;
              resize: none;
              outline: none;
              margin-top: 2px;
              margin-left: 7px;
              padding: 9px 7px;
            }
          }
          .shujusuoyinAdd{
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            cursor: pointer;
            >img{
              width: 14px;
              margin-right: 10px;
            }
            >p{
              margin-top: 2px;
            }
          }
        }
        .gengxinshujuBtn{
          width: 100%;
          display: flex;
          justify-content: flex-end;
          margin-top: 14px;
          >div{
            width: 95px;
            height: 34px;
            background: #404040;
            border-radius: 17px;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FEFEFE;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 27px;
            cursor: pointer;
          }
          >div:nth-of-type(2){
            color: #010101;
            background: #FFD025;
          }
        }
        /* .fuzhushuju{
          width: 623px;
          height: 68px;
          background: #1A1A1A;
          box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
          border-radius: 14px;
          padding: 18px 14px 12px 14px;
          margin-left: 14px;
          margin-top: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        } */
      }
    }
    .guan{
      position: absolute;
      top: 20px;
      right: 20px;
      width: 15px;
      cursor: pointer;
    }
  }
  
  .delTitle{
    width: 406px;
    height: 169px;
    background: #262626;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    >p:nth-of-type(1){
      margin-top: 27px;
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #FFFFFF;
    }
    >p:nth-of-type(2){
      margin-top: 25px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
    }
    >div{
      display: flex;
      margin-top: 25px;
      >div{
        width: 95px;
        height: 34px;
        background: #404040;
        border-radius: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FEFEFE;
        cursor: pointer;
      }
      >div:nth-of-type(2){
        margin-left: 27px;
        background: rgba(255, 96, 96, 0.2);
        color: #FF6060;
      }
    }
  }

  .dialogueDetails{
    width: 880px;
    height: 521px;
    background: #262626;
    border-radius: 14px;
    >div:nth-of-type(1){
      width: 880px;
      height: 54px;
      background: #333333;
      border-radius: 14px 14px 0px 0px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      >div{
        display: flex;
        align-items: center;
        margin-left: 27px;
        >img{
          width: 15px;
        }
        >span{
          margin-left: 10px;
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #FFFFFF;
        }
      }
      >img{
        width: 15px;
        margin-right: 20px;
        cursor: pointer;
      }
    }
    >div:nth-of-type(2){
      display: flex;
      >div:nth-of-type(1){
        width: 229px;
        height: 467px;
        border-right: 1px solid #333333;
        padding-top: 20px;
        margin-left: 20px;
        .active{
          color: #FFD54C;
          background: rgba(255, 225, 128, 0.1);
        }
        >div{
          width: 190px;
          height: 40px;
          border-radius: 7px;
          display: flex;
          align-items: center;
          >img{
            margin-left: 21px;
            width: 14px;
          }
          >span{
            margin-left: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
          }
        }
      }
      .buQuan_box{
        margin-left: 26px;
        >div{
          margin-top: 28px;
          >p:nth-of-type(1){
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }
          >p:nth-of-type(2){
            margin-top: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }
        }
      }
      .npc_box{
        margin-left: 14px;
        >div:nth-child(even){
          background: #1A1A1A;
        }
        >div{
          margin-top: 14px;
          width: 600px;
          background: #333333;
          box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15);
          border-radius: 14px;
          padding: 14px;
          >p:nth-of-type(1){
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #FFFFFF;
          }
          >p:nth-of-type(2){
            margin-top: 10px;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }
        }
      }
    }
  }
  .Login{
    width: 100%;
    height: 100%;
    background: url("/src/assets/Login/bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    >img{
        position: absolute;
    }
    >div{
        width: 948px;
        height: 474px;
        background: rgba(0, 0, 0, 0.7);
        box-shadow: 0px 0px 27px 0px rgba(250,203,50,0.1);
        border-radius: 20px;
        display: flex;
        >img{
            width: 145px;
            margin-left: 60px;
            margin-top: 40px;
        }
        >div:nth-of-type(1){
            margin-left: 87px;
            margin-top: 40px;
            position: relative;
            >div:nth-of-type(1){
                display: flex;
                margin-top: 20px;
                >div{
                    margin-right: 20px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                    color: rgba(255, 255, 255, 0.5);
                    line-height: 34px;
                    cursor: pointer;
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 14px;
                }
                .active{
                    color: #FFFFFF;
                    border-bottom: 3px solid #FFD025;
                }
            }
        }
        .Login_input{
            margin-left: 7px;
            width: 311px;
            >div{
                height: 55px;
                display: flex;
                align-items: center;
                border-bottom: 1px solid rgba(238, 238, 238, 0.2);
                >img{
                    width: 12px;
                    margin-left: 7px;
                }
                >input{
                   margin-left: 20px;
                   height: 100%; 
                   width: 260px;
                   background: none;
                   outline: none;
                }
            }
        }
        .LoginBtn{
            position: absolute;
            left: 0;
            bottom: 41px;
            width: 310px;
            height: 40px;
            background: #FFD025;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            cursor: pointer;
        }
    }
  }
  .border-radius-14{
    border-radius: 14px!important;
  }
  .border-radius-7{
    border-radius: 7px;
  }
  .skillSettings{
    width: 542px;
    margin: 0 auto;
    .skillSettingsTitle{
      display: flex;
      justify-content: space-between;
      align-items: center;
      >p{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        margin-left: 7px;
      }
      >img{
        margin-right: 5px;
        width: 14px;
        cursor: pointer;
      }
    }
    .skillSettingsDiv{
      margin-top: 10px;
      border-radius: 7px;
      background: rgba(255, 255, 255, 0.1);
      /* padding: 20px 14px; */
      >div{
        /* padding: 20px 14px 0px 14px; */
        >p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
        }
        input{
          background: #0F0F0F!important;
          border-radius: 7px!important;
          border: none;
          outline: 1px solid #997e1f!important;
        }
        textarea{
          background: #0F0F0F!important;
          border-radius: 7px!important;
          border: none;
          outline: 1px solid #997e1f!important;
          color: #fff!important;

        }
      }
      .jiedian{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #666666;
        display: block;
        padding-top: 20px;
        margin-left: 13px;
      }
      .skillSettingsDiv_biaodan{
        label{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px!important;
          color: #FFFFFF;
        }
        p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px!important;
          color: #666666;
        }
      }
      .skillSettingsDiv_bitian{
        margin-right: 14px;
        label{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 12px!important;
          color: #FFFFFF;
        }
        .data-\[state\=checked\]\:bg-primary[data-state=checked]{
          background: #E6B71E!important;
          >span{
            background: #FFFFFF!important;
          }
        }
      }
      .skillSettingsDiv_bg{
        background: #0F0F0F;
        border-radius: 7px;
      }
      .skillSettingsDiv_shangchuan{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 11px;
          color: #999999;
          margin-top: 3px;
        }
      }
    }
    .skillSettingsInput{
      input{
        border: 1px solid #FFD025;
        outline: none!important;
      }
    }
  }
  .skillSettingsBtn{
    width: 542px;
    margin: 34px auto;
    >div{
      display: flex;
      justify-content: center;
      .skillSettingsBtn1{
        background: #FFD025!important;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #010101!important;
      }
      .skillSettingsBtn2{
        border: 1px solid #FFD54C!important;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #FFD025!important;
        background: #000!important;
      }
    }
  }
  .Skill_box{
    height: 100%;
    padding-bottom: 30px;
    .css-15l7r2q{
      gap: 36px!important;
    }
    .acss-134lb3j{
      --rows: 10!important;
      --max-item-width: 264px!important;
    }
    .selectNpcSpotlightCard{
      .acss-1iddemf{
        /* background: rgba(45, 45, 45, 0.75); */
        background: #121212;
      }
      .hover-card::before{
        background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
      }
      .hover-card::after{
        background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%);
      }
      .acss-13wwyd1{
        background: #111111;
      }
    }
    .selectNpcFlexboxZiDing{
      height: 180px;
      position: relative;
      >div{
        margin-left: 14px;
        margin-top: 27px;
        display: flex;
        align-items: center;
        >img{
          width: 15px;
        }
        >span{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 15px;
          color: #FFFFFF;
          margin-left: 8px;
        }
      }
      >p{
        margin-top: 20px;
        margin-left: 14px;
        font-family: PingFang SC;
        font-weight: 300;
        font-size: 12px;
        color: #CCCCCC;
      }
      >img{
        width: 68px;
        margin: 7px 0;
        margin-left: 180px;
      }
    }
    .selectNpcFlexbox{
      width: 100%;
      height: 100%;
      min-height: 180px;
      // height: 190px;
      // display: flex;
      // flex-direction: column;
      // justify-content:space-between;
      /* padding: 14px; */
      // position: relative;
      padding-bottom: 55px;
      >div:nth-of-type(2){
        display: flex;
        align-items: center;
        padding: 14px 14px 0 14px;
        p{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
        }
      }
      >p{
        padding: 0 14px;
        font-family: PingFang SC;
        font-weight: 300;
        font-size: 12px;
        color: #CCCCCC;
        margin-top: 8px;
      }
      >div:nth-of-type(3){
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 14px;
        position: absolute;
        bottom: 14px;
        >div{
          display: flex;
          align-items: center;
          >div{
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .bianji{
            border-radius: 14px;
            border: 1px solid #999999;
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 12px;
            color: #999999;
            cursor: pointer!important;
          }
          .create{
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            cursor: pointer!important;
          }
        }
        .data-\[state\=checked\]\:bg-primary[data-state=checked]{
          background: #E6B71E!important;
        }
        .data-\[state\=unchecked\]\:bg-ring[data-state=unchecked]{
          background: #666666!important;
        }
        .bg-background{
          background: #FFFFFF!important;
        }
      }
      .npcInfoItemBg{
        width: 100%;
        position: absolute;
        overflow: hidden;
        height: 64px;
        margin-bottom: -56px;
        background: rgba(0, 0, 0, 0.06);
        -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
        mask-image: linear-gradient(to bottom, #fff, transparent);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        >span{
          width: 180px;
          height: 180px;
          font-size: 18px;
          cursor: default;
          cursor: pointer;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0);
          border: 1px solid transparent;
          position: absolute;
          top: -50%;
          -webkit-filter: blur(50px) saturate(2);
          filter: blur(50px) saturate(2);
          >span{
            transform: scale(1);
            font-size: 140px;
            font-weight: 700;
            line-height: 1 !important;
            color: #fff;
            >div{
              height: 130px;
              width: 130px;
              position: relative;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-align-items: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              line-height: 1;
              text-align: center;
            }
          }
        }
      }
      .del{
        position: absolute;
        right: 14px;
        top: 14px;
      }
    }
  }
  .btn-r{
    >div:nth-of-type(1){
      width: 95px;
      width: 244px;
      height: 34px;
      background: #141414;
      border-radius: 17px;
      position: relative;
      >input{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        outline: none;
        background: none;
        color: #fff;
        padding-left: 40px;
        ::placeholder {
          color: #666!important;
        }
      }
      >img{
        width: 14px;
        margin-left: 14px;
        margin-top: 10px;
      }
    }
    >div:nth-of-type(2){
      width: 95px;
      margin-left: 20px;
      height: 34px;
      border-radius: 17px;
      border: 1px solid #E6B71E;
      display: flex;
      align-items: center;
      justify-content: center;
      /* justify-content: space-between; */
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #E6B71E;
      cursor: pointer;
      >span{
        margin-top: 2px;
      }
    }
  }
  .dialogueLog-header{
    font-family: PingFang SC;
    font-weight: 400!important;
    font-size: 14px;
    color: #FFFFFF!important;
  }
  .dialogueLog-body{
    font-family: PingFang SC;
    font-weight: 300;
    font-size: 14px;
    color: #CCCCCC;
  }
  .Dropdown{
    >div{
      margin-top: 0!important;
    }
    button{
      border: none;
      outline: none!important;
      outline-color: none;
      padding-top: 0;
      padding-bottom: 0;
      >span{
        background: none!important;
      }
    }
  }
  
  .shangchuan{
    .zichanTab{
      // width: 203px;
      height: 27px;
      background: #313131!important;
      border-radius: 7px!important;
      padding: 0!important;
      margin-top: 7px;
      >button{
        border: none;
        width: 50%;
        height: 100%;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #CCCCCC;
      }
      >button:hover{
        /* background: none!important; */
      }
      .data-\[state\=active\]\:bg-background[data-state=active]{
        background: #FFD54C !important;
        border-radius: 7px!important;
        color: #333333 !important;
      }
    }
    .shangchuanBtn{
      border-radius: 17px!important;
    }
    .bg-primary{
      background: #CCA629!important;
    }
    .text-muted-foreground{
      width: 203px;
      height: 27px;
      background: #333333!important;
      border-radius: 7px;
      padding: 0!important;
      >button{
        border: none;
        width: 50%;
        height: 100%;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #FFFFFF;
      }
      >button:hover{
        /* background: none!important; */
      }
      .data-\[state\=active\]\:bg-background[data-state=active]{
        background: #FFD54C!important;
        border-radius: 7px!important;
        color: #333333!important;
      }
    }
  }
  .shangchuanInput{
    >div{
      margin-top: 7px;
      input{
        margin-left: 14px;
        width: 630px!important;
        height: 34px!important;
        background: #1A1A1A!important;
        border-radius: 7px!important;
        outline: none!important;
        --tw-ring-color:none!important;
        border: none!important;
        --tw-ring-offset-color:none!important
      }
    }
  }

  .zichan{
    .zichanBtn{
      >button{
        border-radius: 7px!important;
        background: rgba(255, 255, 255, 0.1)!important;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #FFFFFF!important;
      }
    }
    .zichanTab{
      width: 203px;
      height: 27px;
      background: #333333!important;
      border-radius: 7px;
      padding: 0!important;
      >button{
        border: none;
        width: 50%;
        height: 100%;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #FFFFFF;
      }
      >button:hover{
        /* background: none!important; */
      }
      .data-\[state\=active\]\:bg-background[data-state=active]{
        background: #FFD54C!important;
        border-radius: 7px!important;
        color: #333333!important;
      }
    }
  }

  .zhanghao{
    /* .zhanghaoBtn{
      >button{
        border-radius: 7px!important;
        background: rgba(255, 255, 255, 0.1)!important;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #FFFFFF!important;
      }
    } */
    .zhanghaoTab{
      width: 203px;
      height: 27px;
      background: #333333!important;
      border-radius: 7px;
      padding: 0!important;
      >button{
        border: none;
        width: 50%;
        height: 100%;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #FFFFFF;
      }
      >button:hover{
        /* background: none!important; */
      }
      .data-\[state\=active\]\:bg-background[data-state=active]{
        background: #FFD54C!important;
        border-radius: 7px!important;
        color: #333333!important;
      }
    }
  }

  .side-bar-arrangement{
    position: relative;
    overflow: visible!important;
    box-shadow: 0px 0px 34px 0px rgba(255,255,255,0.2);
    transition: 500ms;
    .shouqi{
      position: absolute;
      right: -39px;
      top: 0;
      cursor: pointer;
    }
    .search-zhan{
      margin-top: 14px;
      margin-left: 14px;
      position: relative;
      width: 251px;
      height: 34px;
      background: #1A1A1A;
      border-radius: 17px;
      >input{
        width: 100%;
        height: 100%;
        padding-left: 20px;
        background: none;
        outline: none;
        color: #fff;
      }
      >img{
        position: absolute;
        top: 10px;
        right: 14px;
        width: 14px;
      }
    }
  }

  .Disclosure-item{
    padding: 14px 0;
    margin-left: 7px;
    border-radius: 7px; 
    .Disclosure-item-z{
      width: 264px;
      position: relative;
      padding-left: 14px;
      >div:nth-of-type(1){
        position: absolute;
        width: 3px;
        height: 27px;
        border-radius: 1px;
        left: 0;
        top: 4px;
      }
      >div:nth-of-type(2){
        display: flex;
        align-items: center;
        >span{
          font-family: PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #FFFFFF;
        }
      }
      >p{
        text-align: left;
        font-family: PingFang SC;
        font-weight: 300;
        font-size: 11px;
        color: #999999;
        margin-top: 4px;
      }
    }
    .Disclosure-item-s{
      width: 68px;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      >div:nth-of-type(1){
        position: absolute;
        width: 3px;
        height: 27px;
        border-radius: 1px;
        left: 0;
        top: 4px;
      }
      >div:nth-of-type(2){
        width: 20px;
        height: 20px;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      >p{
        width: 100%;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 11px;
        color: #FFFFFF;
        margin-top: 8px;
      }
    }
  }
  .Disclosure-item:hover{
    background: #1A170D;
  }
  .Disclosure-item:hover .Disclosure-item-z>div:nth-of-type(1){
    background: #FFD025;
  }
  .Disclosure-item:hover .Disclosure-item-z>div:nth-of-type(2)>span{
    color: #FFD025;
  }
  .npc_zujianList{
    padding: 7px!important;
    max-width: 517px;
    display: flex;
    flex-wrap: wrap;
    max-height: 288px;
    position: relative;
    background: #0D0D0D!important;
    .gengduo{
      position: absolute;
      height: 40px;
      width: 100%;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #0D0D0D!important;
      cursor: pointer;
      z-index: 10;
      >span{
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .daoru{
    margin-top: 7px;
    width: 100%;
    height: 31px;
    >div{
      width: 237px;
      height: 27px;
      border-radius: 14px;
      border: 1px solid #FFD025;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #FFD025;
      margin-left: 14px;
      background: #0D0D0D;
      cursor: pointer;
    }
  }
  .npc_zujianList_item{
    width: 236px;
    height: 122px;
    background: #1A1A1A;
    border-radius: 7px;
    margin: 7px;
    position: relative;
    cursor: pointer;
    .npcInfoItemBg{
      position: absolute;
      overflow: hidden;
      width: 100%;
      height: 64px;
      top: 0;
      left: 0;
      // margin-bottom: -56px;
      background: rgba(0, 0, 0, 0.06);
      -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
      mask-image: linear-gradient(to bottom, #fff, transparent);
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      z-index: -1;
      >span{
        width: 180px;
        height: 180px;
        font-size: 18px;
        cursor: default;
        cursor: pointer;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0);
        border: 1px solid transparent;
        position: absolute;
        top: -50%;
        -webkit-filter: blur(50px) saturate(0.4);
        filter: blur(50px) saturate(0.4);
        >span{
          transform: scale(1);
          font-size: 140px;
          font-weight: 700;
          line-height: 1 !important;
          color: #fff;
          >div{
            height: 140px;
            width: 140px;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-align-items: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            line-height: 1;
            text-align: center;
          }
        }
      }
    }
    >div:nth-of-type(2){
      display: flex;
      padding-top: 14px;
      justify-content: space-between;
      >div:nth-of-type(1){
        margin-left: 14px;
        display: flex;
        align-items: center;
        >p{
          max-width: 130px;
          margin-left: 10px;
          margin-right: 6px;
          word-wrap: break-word;
          word-break: break-all;
          color: #fff;
          font-weight: 600;
        }
      }
      >div:nth-of-type(2){
        margin-right: 14px;
        z-index: 1000;
      }
    }
    >p{
      margin-top: 15px;
      margin-left: 14px;
      width: 211px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #999999;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: normal;
      line-height: 20px;
    }
  }

  .my-input{
    ::placeholder {
      color: #666!important;
    }
  }
  .temps{
    position: relative;
    .fanhui{
      position: absolute;
      top: 23px;
      right: 34px;
      width: 68px;
      height: 34px;
      border-radius: 17px;
      border: 1px solid #E6B71E;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #E6B71E;
      cursor: pointer;
    }
    >p:nth-of-type(1){
      font-family: PingFang SC;
      font-weight: 600;
      font-size: 18px;
      color: #FEFEFE;
      margin-top: 26px;
    }
    >p:nth-of-type(2){
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 12px;
      color: #999999;
      margin-top: 6px;
    }
    .css-15l7r2q{
      gap: 36px!important;
    }
    .acss-134lb3j{
      --rows: 10!important;
      --max-item-width: 264px!important;
    }
    .selectNpcSpotlightCard{
      .acss-1iddemf{
        /* background: rgba(45, 45, 45, 0.75); */
        background: #121212;
      }
      .hover-card::before{
        background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
      }
      .hover-card::after{
        background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%);
      }
      .acss-13wwyd1{
        background: #111111;
      }
    }
    .selectNpcFlexbox{
      height: 127px;
      padding-bottom: 14px;
      display: block;
      /* padding: 14px; */
      >div:nth-of-type(2){
        display: flex;
        align-items: self-start;
        padding: 14px 14px 0 14px;
        >div{
          margin-left: 15px;
          >p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }
          >div{
            display: flex;
            >div{
              margin-top: 4px;
              padding: 0 6px;
              height: 17px;
              background: rgba(255, 213, 76, 0.15);
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 7px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 10px;
              color: #CCCCCC;
            }
          }
        }
      }
      >p{
        padding: 0 14px;
        line-height: 21px;
        font-family: PingFang SC;
        font-weight: 300;
        font-size: 12px;
        color: #CCCCCC;
      }
      .npcInfoItemBg{
        position: relative;
        overflow: hidden;
        height: 64px;
        margin-bottom: -56px;
        background: rgba(0, 0, 0, 0.06);
        -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
        mask-image: linear-gradient(to bottom, #fff, transparent);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        >span{
          width: 180px;
          height: 180px;
          font-size: 18px;
          cursor: default;
          cursor: pointer;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0);
          border: 1px solid transparent;
          position: absolute;
          top: -50%;
          -webkit-filter: blur(50px) saturate(2);
          filter: blur(50px) saturate(2);
          >span{
            transform: scale(1);
            font-size: 140px;
            font-weight: 700;
            line-height: 1 !important;
            color: #fff;
            >div{
              height: 130px;
              width: 130px;
              position: relative;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-align-items: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              line-height: 1;
              text-align: center;
            }
          }
        }
      }
      .del{
        position: absolute;
        right: 14px;
        top: 14px;
      }
    }
  }

  .shandian{
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1A1A1A;
    border-radius: 0px 14px 14px 0px;
    cursor: pointer;
  }
  .outline-color:focus{
    outline: 1px solid #ffd025!important
  }
  .daimabg{
    background: none!important;
  }
  .baogao-btn{
    width: 122px;
    height: 34px!important;
    border-radius: 17px!important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px!important;
  }
  .baogao-btn1{
    background: #404040!important;
    color: #FEFEFE!important;
    &:hover{
      background: #404040!important;
      color: #FEFEFE!important;
    }
  }
  .baogao-btn2{
    background: #FFD025!important;
    color: #010101!important;
    margin-left: 40px;
    &:hover{
      background: #FFD025!important;
      color: #010101!important;
    }
  }
  .baogao-btn3{
    border: 1px solid #FFD025!important;
    background: none!important;
    color: #FFD025!important;
     &:hover{
      border: 1px solid #FFD025!important;
      background: none!important;
      color: #FFD025!important;
    }
  }
  .bg-background{
    background: #404040!important;
    color: #FEFEFE!important;
    &:hover{
      background: #404040!important;
      color: #FEFEFE!important;
    }
  }
  .bg-destructive{
    background: rgba(255, 96, 96, 0.2)!important;
    color: #FF6060!important;
    &:hover{
      background: rgba(255, 96, 96, 0.2)!important;
      color: #FF6060!important;
    }
  }

  .xuanzelan{
    background: rgba(255, 255, 255, 0.1)!important;
  }
  .xuanzelan-i:hover{
    background: rgba(255, 255, 255, 0.1)!important;
  }
  .text-foreground{
    color: #fff!important;
  }
  .file-component-tab-column{
    textarea{
      color: #fff;
      outline:none
    }
  }
  .text-secondary-foreground{
    color: #fff!important;
  }
  .file-component-arrangement{
    .file-component-variable{
      color: #fff!important;
    }
    .file-component-variables-span{
      color: #fff!important;
    }
  }
  .text-primary{
    color: #fff!important;
  }
  .bisheng-chat-desc-span{
    color: #fff!important;
  }
  .chat-message-div{
    background: #000;
    border: none!important;
  }
  .bisheng-chat-input-div{
    background: #000;
  }
  .bisheng-chat-input{
    textarea{
      background: #1A1A1A!important;
    }
    textarea:focus{
      border: 1px solid #997e1f;
    }
  }
  .style-system{
    >div{
      padding: 14px 20px 14px 20px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px!important;
      color: #FFFEFE!important;
    }
  }
  .style-question{
    >div{
      padding: 14px 20px 14px 20px;
      background: #1A1A1A;
      border: 1px solid #43AFD2;
      border-radius: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px!important;
      color: #999999!important;
    }
  }
  .style-answer{
    >div{
      padding: 14px 20px 14px 20px;
      background: #0B1F26;
      border-radius: 20px;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 14px!important;
      color: #ffffff!important;
      line-height: 20px!important;
    }
  }
  .shengcheng-btn{
    width: 135px;
    height: 27px!important;
    border-radius: 14px!important;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 14px!important;
    background: #FFD54C!important;
    color: #010101!important;
    margin: 0 auto;
    &:hover{
      background: #FFD54C!important;
      color: #010101!important;
    }
  }
  .input-primary{
    border-color: #997e1f;
    &:focus{
      border: 1px solid #997e1f!important;
      outline: none!important;
    }
  }
  .border-Select{
    background: #0F0F0F;
    border-radius: 7px;
    border: 1px solid #997E1F;
  }
  .border-input{
    background: #0F0F0F;
    border-radius: 7px;
    color: #fff;
  }
  .language-python,.language-bash{
    background: none!important;
  }
  .api-modal-tablist-div{
    .zichanTab{
      // width: 203px;
      height: 27px;
      background: #313131!important;
      border-radius: 7px!important;
      padding: 0!important;
      margin-top: 7px;
      >button{
        border: none;
        width: 50%;
        height: 100%;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #CCCCCC;
      }
      >button:hover{
        /* background: none!important; */
      }
      .data-\[state\=active\]\:bg-background[data-state=active]{
        background: rgba(255, 213, 76, 0.2)!important;
        border-radius: 7px!important;
        color: #FFFFFF!important;
      }
    }
  }
  .Variabl{
    .zichanTab{
      // width: 203px;
      height: 27px;
      background: #313131!important;
      border-radius: 7px!important;
      padding: 0!important;
      margin-top: 7px;
      >button{
        border: none;
        width: 50%;
        height: 100%;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 12px!important;
        color: #CCCCCC;
      }
      >button:hover{
        /* background: none!important; */
      }
      .data-\[state\=active\]\:bg-background[data-state=active]{
        background: rgba(255, 213, 76, 0.2)!important;
        border-radius: 7px!important;
        color: #FFFFFF!important;
      }
    }
    .btn{
      background: #FFD54C!important;
      color: #010101!important;
      &:hover{
        background: #FFD54C!important;
        color: #010101!important;
      }
    }
  }
  
  .promptTextarea{
    textarea:focus{
        // border: none!important;
        outline: 1px solid #997e1f!important;
    }
    textarea::-webkit-input-placeholder{
      color: #ccc!important;
    }
  }
  .data-\[state\=checked\]\:translate-x-5[data-state=checked]{
    width: 18px!important;
    height: 18px!important;
    background: #FFFFFF!important;
  }
  .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked]{
    width: 18px!important;
    height: 18px!important;
    background: #FFFFFF!important;
  }
  .data-\[state\=checked\]\:bg-primary[data-state=checked]{
    width: 37px!important;
    height: 20px!important;
    background: #E6B71E!important;
  }
  .data-\[state\=unchecked\]\:bg-ring[data-state=unchecked]{
    width: 37px!important;
    height: 20px!important;
    background: #4D4D4D!important;
  }

  .build-tab{
    display: flex;
    margin-left: 28px;
    >div{
      margin-top: 25px;
      margin-right: 38px;
      .build-tab-item{
        >div:nth-of-type(1){
          display: flex;
          align-items: center;
          i{
            width: 20px;
            height: 20px;
          }
          span{
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 18px;
            color: #999999;
            margin-left: 5px;
          }
        }
        >div:nth-of-type(2){
          width: 60px;
          height: 4px;
          border-radius: 2px;
          margin-top: 3px;
        }
      }
      .active{
        >div:nth-of-type(1){
          span{
            font-family: PingFang SC;
            font-weight: 600;
            font-size: 18px;
            color: #FFFFFF;
            margin-left: 5px;
          }
        }
        >div:nth-of-type(2){
          background: #FFD025;
        }
      }
    }
    >div:nth-of-type(1){
      i{
        background-image: url('../assets/npc/npc-icon1.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
      .active{
        i{
          background-image: url('../assets/npc/npc-icon1-active.png')!important;
          background-size: 100%;
          background-repeat: no-repeat;
        }
      }
    }
    >div:nth-of-type(2){
      i{
        background-image: url('../assets/npc/npc-icon2.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
      .active{
        i{
          background-image: url('../assets/npc/npc-icon2-active.png')!important;
          background-size: 100%;
          background-repeat: no-repeat;
        }
      }
    }
    >div:nth-of-type(3){
      i{
        background-image: url('../assets/npc/npc-icon3.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
      .active{
        i{
          background-image: url('../assets/npc/npc-icon3-active.png')!important;
          background-size: 100%;
          background-repeat: no-repeat;
        }
      }
    }
  }

  .npcInput{
    // margin-left: 14px;
    // width: 89%!important;
    // height: 34px!important;
    background: #1A1A1A!important;
    border-radius: 7px!important;
    outline: none!important;
    --tw-ring-color:none!important;
    border: none!important;
    --tw-ring-offset-color:none!important;
    color: #fff!important;
    
    &::-webkit-input-placeholder{
      color: #666!important;
    }
    // outline: #997e1f;
    &:focus{
      // border: none!important;
      outline: 1px solid #997e1f!important;
    }
  }
  .npcInput1{
    background: #262626!important;
    border-radius: 7px!important;
    outline: none!important;
    --tw-ring-color:none!important;
    border: none!important;
    --tw-ring-offset-color:none!important;
    color: #fff!important;
    
    &::-webkit-input-placeholder{
      color: #666!important;
    }
    // outline: #997e1f;
    &:focus{
      // border: none!important;
      outline: 1px solid #997e1f!important;
    }
  }
  .npcInput2{
    background: #1a1a1a!important;
    border-radius: 7px!important;
    outline: none!important;
    --tw-ring-color:none!important;
    border: none!important;
    --tw-ring-offset-color:none!important;
    color: #fff!important;
    
    &::-webkit-input-placeholder{
      color: #666!important;
    }
    // outline: #997e1f;
    &:focus{
      // border: none!important;
      outline: 1px solid #997e1f!important;
    }
  }
  .npcInput3{
    background: #0F0F0F!important;
    border-radius: 17px!important;
    outline: none!important;
    --tw-ring-color:none!important;
    border: none!important;
    --tw-ring-offset-color:none!important;
    color: #fff!important;
    
    &::-webkit-input-placeholder{
      color: #666!important;
    }
    // outline: #997e1f;
    &:focus{
      // border: none!important;
      outline: 1px solid #997e1f!important;
    }
  }
  .npcInput4{
    background: #000000!important;
    border-radius: 7px!important;
    outline: none!important;
    --tw-ring-color:none!important;
    border: none!important;
    --tw-ring-offset-color:none!important;
    color: #fff!important;
    
    &::-webkit-input-placeholder{
      color: #666!important;
    }
    // outline: #997e1f;
    &:focus{
      // border: none!important;
      outline: 1px solid #997e1f!important;
    }
  }
  .questionTextarea{
    width: 95%!important;
    margin-left: 2.5%;
    height: 40px!important;
    background: #1A1A1A!important;
    box-shadow: 0px 2px 7px 0px rgba(0,1,51,0.15)!important;
    border-radius: 20px!important;
    padding: 10px 0;
    padding-left: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 11px;
    color: #FFFFFF;
  }
  .skillSheet{
    height: 100%;
    padding: 0 27px 30px 27px;
    padding-bottom: 30px;
    .css-15l7r2q{
      gap: 27px!important;
    }
    .acss-134lb3j{
      --rows: 10!important;
      --max-item-width: 298px!important;
    }
    .skillSheetSpotlightCard{
      .acss-1iddemf{
        /* background: rgba(45, 45, 45, 0.75); */
        background: #121212;
      }
      .hover-card::before{
        background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.06), transparent 40%);
      }
      .hover-card::after{
        background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.4), transparent 40%);
      }
      .acss-13wwyd1{
        background: #111111;
      }
    }
    .selectNpcFlexbox{
      min-height: 127px;
      display: block;
      /* padding: 14px; */
      >div:nth-of-type(2){
        display: flex;
        align-items: self-start;
        padding: 14px 14px 0 14px;
        >div{
          margin-left: 15px;
          >p{
            font-family: PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
          }
          >div{
            display: flex;
            >div{
              margin-top: 4px;
              padding: 0 6px;
              height: 17px;
              background: rgba(255, 213, 76, 0.15);
              border-radius: 8px;
              display: flex;
              justify-content: center;
              align-items: center;
              margin-right: 7px;
              font-family: PingFang SC;
              font-weight: 400;
              font-size: 10px;
              color: #CCCCCC;
            }
          }
        }
      }
      >p{
        padding: 0 14px;
        line-height: 21px;
        font-family: PingFang SC;
        font-weight: 300;
        font-size: 12px;
        color: #CCCCCC;
      }
      .npcInfoItemBg{
        position: relative;
        overflow: hidden;
        height: 64px;
        margin-bottom: -56px;
        background: rgba(0, 0, 0, 0.06);
        -webkit-mask-image: linear-gradient(to bottom, #fff, transparent);
        mask-image: linear-gradient(to bottom, #fff, transparent);
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        >span{
          width: 180px;
          height: 180px;
          font-size: 18px;
          cursor: default;
          cursor: pointer;
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-align-items: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          background: rgba(0, 0, 0, 0);
          border: 1px solid transparent;
          position: absolute;
          top: -50%;
          -webkit-filter: blur(50px) saturate(2);
          filter: blur(50px) saturate(2);
          >span{
            transform: scale(1);
            font-size: 140px;
            font-weight: 700;
            line-height: 1 !important;
            color: #fff;
            >div{
              height: 130px;
              width: 130px;
              position: relative;
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-align-items: center;
              -webkit-box-align: center;
              -ms-flex-align: center;
              align-items: center;
              -webkit-box-pack: center;
              -ms-flex-pack: center;
              -webkit-justify-content: center;
              justify-content: center;
              line-height: 1;
              text-align: center;
            }
          }
        }
      }
      .del{
        position: absolute;
        right: 14px;
        top: 14px;
      }
    }
  }
  ::-webkit-scrollbar {
    width: 0;
  }
  ::-webkit-scrollbar-horizontal {
    display: none;
  }
  ::-webkit-scrollbar-thumb {
    display: none;
  }
    
  .SelectTrigger{
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px!important;
    border: none;
    &:focus{
      // border: 1px solid #997e1f!important;
    border: none!important;
      outline: none!important;
    }
  }
  .yichu{
    width: calc(100% - 130px); /* 定义容器宽度 */
    white-space: nowrap; /* 确保文本在一行内显示 */
    overflow: hidden; /* 隐藏溢出的内容 */
    text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
  }
  .box-shadow{
    box-shadow: 0px 0px 4px 0px rgba(255,255,255,0.5)!important;
  }
  .input-dialog{
    color: #999999;
  }
  .daimaStyle{
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px!important;
    border: none;
    overflow: hidden;
    margin: 6px 0;
    &:focus{
      // border: 1px solid #997e1f!important;
      border: none!important;
      outline: none!important;
    }
    .code-block-modal{
      background: rgba(255, 213, 76, 0.04);
    }
    .overflow-auto{
      background: rgba(255, 255, 255, 0.05)!important;
      background-color: rgba(255, 255, 255, 0.05)!important;

      .language-sql{
      background-color: rgba(255, 255, 255, 0.00)!important;
      // background: rgba(255, 255, 255, 0.05)!important;
        // background: none;
        span{
        background: none;
      // background: rgba(255, 255, 255, 0.05)!important;
        }
      }
    }
  }