body {
  overflow-x: hidden;
  line-height: 1.5em;
  font-family: 'Noto Sans TC', 'Noto Sans SC', 'Roboto Condensed', 'Calibri', Helvetica, sans-serif; 
}

html,
body {
  touch-action: manipulation;
}

.paging {
  width: 100%;
  position: absolute;
  bottom: 40px;
  display: flex;
  justify-content: center;
}

.current-page,
.total-page {
  color: #fff;
  z-index: 2000;
  cursor: pointer;
}

.current-page {
  margin-right: 10px;
}

.total-page {
  margin-left: 10px;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
  vertical-align: middle;
}

.full {
  height: 100vh;
}

.medium {
  height: 50vh;
}

.auto {
  height: auto;
}

.w-fit {
  width: fit-content;
  display: inline-flex;
}

.bottom-0 {
  bottom: 0;
}

.align-center {
  align-items: center;
}

.d-flex.align-center {
  flex-direction: column;
  align-items: center;
}

.justify-content-start {
  justify-content: flex-start;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-end {
  justify-content: flex-end;
}

.clickable {
  cursor: pointer;
}