/** mixins **/

.m-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  padding: 10px 20px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 5px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation: toastAnim 1s linear forwards;
  animation: toastAnim 1s linear forwards;
  white-space: nowrap;
}

@-webkit-keyframes toastAnim {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  70% {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
}

@keyframes toastAnim {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  70% {
    opacity: 1;
    -webkit-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }

  100% {
    opacity: 0;
    -webkit-transform: translate(-50%, -100%);
    transform: translate(-50%, -100%);
  }
}
/** mixins **/

.sns-bottom {
  height: 1.02rem;
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -0 -0;
  width: 7.5rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #eae9ec;
}

.sns-bottom .item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 0.29rem;
}

.sns-bottom .item-facebook::before {
  display: block;
  content: "";
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -0 -1.06rem;
  width: 0.49rem;
  height: 0.49rem;
}

.sns-bottom .item-ins::before {
  display: block;
  content: "";
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -1.06rem -1.06rem;
  width: 0.49rem;
  height: 0.49rem;
}

.sns-bottom .item-x::before {
  display: block;
  content: "";
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -0.57rem -1.59rem;
  width: 0.41rem;
  height: 0.42rem;
}

.sns-bottom .item-discord::before {
  display: block;
  content: "";
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -0 -1.59rem;
  width: 0.53rem;
  height: 0.42rem;
}

.sns-bottom .item-youtube::before {
  display: block;
  content: "";
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -2.12rem -1.06rem;
  width: 0.56rem;
  height: 0.4rem;
}

.sns-bottom .item-instagram::before {
  display: block;
  content: "";
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -1.06rem -1.06rem;
  width: 0.49rem;
  height: 0.49rem;
}

.sns-bottom .item-reddit::before {
  display: block;
  content: "";
  background: url(https://www.fragpunk.com/pc/gw/20240516114856/assets/sprite-f70ded_f70dede4.png) no-repeat;
  background-size: 7.54rem 2.05rem;
  background-position: -1.59rem -1.06rem;
  width: 0.49rem;
  height: 0.47rem;
}