@import "./style.css";

/* -----TAB----- */
.tab-box button {
  width: 33.3%;
  height: 100%;
  opacity: 0;
}

/* -----main----- */
.btn-group {
  display: flex;
  flex-direction: column;
  position: absolute;
  aspect-ratio: 2.5/1;
}
.btn-group button {
  width: 100%;
  height: 40%;
  margin-bottom: 4.3%;
  opacity: 0;
}

/* -----LINE UP----- */
.share-box {
  /* background: rgba(0, 0, 0, 0.5); */
  display: flex;
  justify-content: space-between;
  height: auto;
  position: absolute;
}
.share-box button {
  width: 46%;
  aspect-ratio: 1;
  opacity: 0;
}

/* PC */
@media screen and (min-width: 751px) {
  /* -----main----- */
  .btn-drop {
    aspect-ratio: 5.4 / 1;
  }
  .btn-group {
    width: 41%;
  }
  .main-sh .btn-group {
    bottom: 20.8%;
  }
  .main-bc .btn-group {
    bottom: 19.1%;
  }
  .main-ts .btn-group {
    bottom: -2.8%;
  }
}

/* MO */
@media screen and (max-width: 750px) {
  /* -----main----- */
  .btn-drop {
    aspect-ratio: 3.1/1;
  }
  .btn-group {
    width: 67%;
  }
  .main-sh .btn-group {
    bottom: 18.6%;
  }
  .main-bc .btn-group {
    bottom: 11.4%;
  }
  .main-ts .btn-group {
    bottom: -3%;
  }
  .share-box {
    bottom: 8.5%;
    width: 30%;
  }
}