nav {
  width: calc(380px / var(--navRatio));
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

#main-logo {
  width: calc(473px / var(--navRatio));
  height: calc(593px / var(--navRatio));
  background-image: url("../static/image/Main/Logo2.png");
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /* transform: translate(0, 10%) scale(1.5); */
}

#tab-back {
  width: calc(86px / var(--navRatio));
  height: calc(86px / var(--navRatio));
  background-image: url("../static/image/Main/nav/Tab_back.png");
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translate(calc(106px / var(--navRatio) / 2), 50%);
  transition: all 0.3s;
}

#nav-container {
  width: 225px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s;
  padding: calc(106px / var(--navRatio) / 2.5);
}

.nav-container-transform {
  transform: translateX(calc(calc(0px / var(--navRatio) / 2) - 100%));
}

.tab-back-transform {
  background-image: url("../static/image/Main/nav/Tab_back2.png") !important;
}
@media (min-width: 769px) and (max-width: 1366px) {
  #main-logo {
    width: calc(518px / var(--navRatio));
    height: calc(654px / var(--navRatio));
  }
  #tab-back {
    right: 4px;
    transform: translate(calc(106px / var(--navRatio) / 2), 50%);
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  #tab-back {
    transform: translate(calc(106px / var(--navRatio) / 2), 200%);
  }
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
  #tab-back {
    transform: translate(calc(106px / var(--navRatio) / 2), 166%);
  }
}

@media (max-width: 991px) and (max-height: 568px) {
  #nav-container {
    background-color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: calc(106px / var(--navRatio) / 2);
    padding-right: 0;
    width: 148px;
  }

  #tab-back {
    width: calc(85px / var(--buttonRatio));
    height: calc(85px / var(--buttonRatio));
    margin-bottom: 0rem;
    margin-top: 0rem;
    left: calc(505px / var(--navRatio) + 106px / var(--navRatio) / 4);
    transform: translate(0, 0);
    position: absolute;
    bottom: calc(380px / var(--navRatio) + 0.4rem * 4);
    top: auto;
  }

  .tab-back-transform {
    background-image: url("../static/image/Main/nav/Tab_back.png") !important;
    transform: translate(0, 0) rotate(180deg) !important;
  }
}