.top{
  display: flex;
  justify-content: space-between;
  .left{
    // border-bottom: 1px solid #0c67a1;
    // border-right: 6px solid #0c67a1;
    // transform: skewX(-45deg);
    pointer-events: all;
    // background-color: rgba(0, 0, 0, 0.9);
    // margin-right: -24px;
    // margin-left: -25px;
    user-select: none;
    .leftContent{
      // transform: skewX(45deg);
      display: flex;
      align-items: center;
      // padding: 10px 30px 10px 50px;
      font-family: "Electrolize";
      padding: 20px 20px;
    }
  }
  .right{
    // width: 100px;
    height: 46px;
    border-bottom: 1px solid #0c67a1;
    border-left: 6px solid #0c67a1;
    transform: skewX(45deg);
    pointer-events: all;
    background-color: rgba(0, 0, 0, 0.9);
    margin-right: -24px;
    user-select: none;
    .rightContent{
      // transform: skewX(-45deg);
      display: flex;
      justify-content: end;
      padding-left: 20px;
      padding-right: 30px;
      .item{
        // transform: skewX(-45deg);
        padding: 8px 10px 2px;
        cursor: pointer;
        svg{
          transform: skewX(-45deg);
          width: 26px;
          height: 26px;
          fill: #0c67a1;
          g{
            fill: #0c67a1;
          }
        }
        // border-bottom: solid 2px #0c67a1;
      }
      .active{
        svg{
          fill: #14f2fa;
          g{
            fill: #14f2fa;
          }
        }
      }
    }
  }
}