.tabBar {
  position: fixed;
  top: 4%;
  right: 4%;
  width: 34%;
  height: 50px;
  :global {
    .tabBarBox {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      gap: 3%;
      .tabItem {
        text-align: center;
        width: 33%;
        font-size: 18px;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
      }
    }
    .underlineBox {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 31%;
      height: 4px;
      transition: transform 0.3s ease-in-out;
      .underline {
        width: 80%;
        height: 100%;
        margin: 0 auto;
        background-color: #fff;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .tabBar {
    width: 90%;
    :global {
      .tabBarBox {
        .tabItem {
          font-size: 15px;
          width: 33%;
        }
      }
    }
  }
}
