@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;500;700;900&display=swap");
textarea:hover,
input:hover,
textarea:active,
input:active,
textarea:focus,
input:focus,
button:focus,
button:active,
button:hover,
label:focus,
.btn:active {
  outline: 0px !important;
  -webkit-appearance: none;
  box-shadow: none !important;
}

body {
  font-family: "Noto Sans TC", serif;
  margin: 0;
  padding: 0;
  width: 100vw;
  overflow-x: hidden;
  scrollbar-width: none;
  background-color: #000;
}

@media screen and (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none;
  }
}
html {
  overflow-x: hidden;
  position: relative;
}

.h-box {
  height: 100%;
  display: flex;
  overflow-x: scroll;
  padding: 0;
}
.h-box img {
  height: 100%;
  max-height: 100vh;
  margin: 0;
  box-shadow: 5px 2px 10px rgba(0, 0, 0, 0.1333333333);
  margin-left: -3px;
}

.left-right .go {
  translate: 5s;
}
.left-right .go.active {
  translate: 1s;
}

.dragging {
  cursor: grab;
}

.scroll-container {
  width: 100%;
  max-height: 100vh;
  overflow: auto; /* 允许滚动 */
  white-space: nowrap; /* 使图片水平排列 */
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none; /* 防止拖拽时选中文本 */
  cursor: grab; /* 鼠标样式 */
  position: relative;
}
.scroll-container .arrow {
  position: absolute;
  z-index: 50;
  left: 80vw;
  top: 45%;
  animation: show 5s infinite;
  font-size: 40px;
  color: #fff;
}

@keyframes show {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    transform: translateX(150%);
  }
  40% {
    opacity: 0;
    transform: translateX(0);
  }
  60% {
    opacity: 1;
    transform: translateX(150%);
  }
  80% {
    opacity: 0;
    transform: translateX(0);
  }
  90% {
    opacity: 1;
    transform: translateX(150%);
  }
  100% {
    opacity: 0;
    transform: translateX(0);
  }
}
.hide {
  display: none;
}/*# sourceMappingURL=style.css.map */