/* jumper */
#jumper {
  position: fixed;
  bottom: 13rem;
  right: 2rem;
  cursor: pointer;
  z-index: 10000;
}

#jumper a {
  display: inline-block;
  border-radius: 15px;
  overflow: hidden;
}
#m-jumper {
  display: none;
}

/* gotop button */
#goTop {
  opacity: 0; /* 初始透明 */
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  z-index: 10000;
  font-size: 1.2rem;
  border: none;
  background-color: #fff;
  color: #777;
  cursor: pointer;
  padding: 1rem 1.4rem;
  border-radius: 15px;
  border: 2px solid #ddd;
  transition: all 0.1s ease;
  pointer-events: none; /* 初始不能點擊 */
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

#goTop svg {
  fill: #777;
}

#goTop.show {
  opacity: 1;
  pointer-events: auto; /* 顯示時才可點擊 */
}

#goTop:hover {
  background-color: #f7f7f7;
}

@media (max-width: 1024px) {
  #jumper {
    bottom: 12rem;
    right: 1rem;
  }

  #jumper a {
    display: inline-block;
    scale: 0.7;
  }
}

@media (max-width: 720px) {
  #m-jumper {
    display: block;
    position: fixed;
    bottom: 17rem;
    right: 2rem;
    cursor: pointer;
    z-index: 1000;
  }
}

@media (max-width: 430px) {
  #m-jumper a {
    display: inline-block;
    border-radius: 15px;
    overflow: hidden;
  }
  #goTop {
    bottom: 10rem;
  }
}