body {
  overflow-x: hidden;
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#header .header__content .container #menu-toggle .toggle {
  display: block;
  width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

#header .header__content .container #menu-toggle .toggle-switch i {
  font-size: 0.75rem;
}

#header .header__content .container .header-search {
  margin-left: auto;
}

#header .header__content .container .header-search input {
  width: 11.5rem;
}

#top-bar .container .logo img,
#header .header__content .container .link__home img,
#header .header__content .container .video-home img,
.page__login #header .logo img {
  width: auto;
}

#header .header__content .container .logo a img {
  height: auto;
}

.page-search {
  justify-content: flex-end;
  width: 100%;
  max-width: var(--width-container-large);
  margin: 0 auto;
}

.video-auth-loader {
  min-height: 55vh;
  display: grid;
  place-items: center;
  color: var(--color-primary);
  font-size: 1.125rem;
}

body:not(.video-auth-pending) .video-auth-loader {
  display: none;
}

.video-empty,
.video-error {
  min-height: 14rem;
  display: grid;
  place-items: center;
  padding: 2rem;
  color: #666;
  text-align: center;
}

.video-error a {
  color: var(--color-primary);
  font-weight: 700;
}

.video-toast {
  position: fixed;
  z-index: 12000;
  top: 1rem;
  right: 1rem;
  max-width: min(24rem, calc(100% - 2rem));
  padding: 0.75rem 1rem;
  color: #fff;
  background: var(--color-primary);
  box-shadow: 0 6px 20px rgb(0 0 0 / 24%);
}

.banner-carousel .swiper-slide .slide__wrapper .img {
  width: 100%;
  aspect-ratio: 2880 / 704;
  overflow: hidden;
}

.banner-carousel .swiper-slide .slide__wrapper .img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-carousel .swiper-button-prev,
.banner-carousel .swiper-button-next {
  color: rgb(255 255 255 / 88%);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.banner-carousel .swiper-pagination-bullet {
  width: 1.5rem;
  height: 1.5rem;
  background: #fff;
  opacity: 0.9;
}

.banner-carousel .swiper-pagination-bullet-active {
  background: #fff;
}

.video__list .container .list .item .img,
.video-slider .swiper .swiper-wrapper .swiper-slide .slide__wrapper .img {
  overflow: hidden;
  background: #fff;
  aspect-ratio: 16 / 9;
}

.video__list .container .list .item .img a,
.video-slider .swiper .swiper-wrapper .swiper-slide .slide__wrapper .img a {
  height: 100%;
}

.video__list .container .list .item .img a img,
.video-slider .swiper .swiper-wrapper .swiper-slide .slide__wrapper .img a img {
  height: auto;
}

.video-slider .swiper-button-prev,
.video-slider .swiper-button-next {
  padding: 0;
  background: transparent;
  border: 0;
}

.category-banner picture,
.category-banner picture img {
  display: block;
  width: 100%;
}

.category-banner picture img {
  height: auto;
}

.category-banner .img .category-banner-fallback {
  width: 100%;
  aspect-ratio: 2880 / 704;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  color: #fff;
  overflow: hidden;
}

.category-banner .img .category-banner-fallback img {
  flex: 0 0 auto;
  width: clamp(4rem, 10vw, 8rem);
  height: clamp(4rem, 10vw, 8rem);
  object-fit: cover;
  border-radius: 50%;
}

.category-banner-fallback strong {
  font-size: clamp(1.25rem, 3vw, 2.5rem);
}

.video-banner .video-container iframe {
  border: 0;
}

.video-banner .banner__wrapper .functions .actions .copy svg {
  width: 1.5rem;
}

.video-banner .banner__wrapper .functions .actions .copy i {
  color: #c1c1c1;
  font-size: 1.25rem;
}

.video-banner .banner__wrapper .functions .actions .copy.copied i {
  color: #fff;
}

.membership-gate {
  min-height: 35rem;
  padding: 2rem 2rem 6rem;
  background: #e6e6e6;
  text-align: center;
}

.membership-gate h1 {
  color: var(--color-primary);
  font-size: 1.625rem;
  line-height: 3.25rem;
  font-weight: 700;
  margin: 0 auto;
}

.membership-gate .actions {
  width: 100%;
  max-width: 840px;
  padding: 2.5rem 1rem;
  margin: 0 auto;
  background: #fff;
  border-radius: 1rem;
}

.membership-gate .actions__wrapper {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.membership-gate h2 {
  font-size: 1.3125rem;
  font-weight: 500;
}

.membership-gate .btn__action {
  display: block;
  width: 100%;
  max-width: 400px;
  padding: 12px 24px;
  margin: 1rem auto;
  color: #fff;
  background: var(--color-primary);
  border: 0;
  border-radius: 0.5rem;
  font-size: 1.375rem;
  line-height: 1;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.membership-gate .btn__action:hover,
.membership-gate .btn__action:focus-visible {
  filter: brightness(1.25);
}

.membership-gate p {
  margin: 0 auto 1rem;
  color: #666;
  font-size: 1rem;
  font-weight: 300;
}

.membership-gate p a {
  color: var(--color-primary);
}

.membership-gate hr {
  width: 90%;
  max-width: 420px;
  margin: 2rem auto;
  border: 0;
  border-top: 1px solid #bbb;
}

.search__video-list .search__functions .search__keyword form,
.search__video-list .search__functions .search__keyword {
  position: relative;
}

.search__video-list .search__functions .search__keyword button {
  top: 0.125rem;
  right: 0;
}

.video__list .container .functions .btn-load[data-loading="true"] {
  cursor: wait;
  opacity: 0.65;
}

.video__list .container .functions .btn-load:focus-visible,
.search__box button:focus-visible,
#menu-toggle .toggle:focus-visible {
  outline: 3px solid #129bf4;
  outline-offset: 2px;
}

#hk-remark {
  width: 100%;
  max-width: var(--width-container);
  margin: 0 auto 2rem;
}

@media (max-width: 900px) {
  #header .header__content .container .header-search {
    display: none;
  }

  #header .header__content .container #menu-toggle .toggle {
    position: relative;
    height: 2.25rem;
  }

  #header .header__content .container #menu-toggle .toggle .icon-bar {
    position: absolute;
    top: 50%;
    left: 0;
  }

  #header .header__content .container #menu-toggle.open .toggle .icon-bar {
    background-color: transparent;
    transform: none;
  }

  #header .header__content .container #menu-toggle.open .toggle .icon-bar::before {
    top: 0;
    transform: rotate(45deg);
  }

  #header .header__content .container #menu-toggle.open .toggle .icon-bar::after {
    top: 0;
    transform: rotate(-45deg);
  }

  #header .header__content .container #menu-toggle .category-dropdown {
    position: absolute;
    top: 2.25rem;
    left: 0;
  }

  .page-search {
    display: flex;
  }

  .page-search .search__keyword {
    margin-left: auto;
  }

  .banner-carousel .swiper-slide .slide__wrapper .img {
    aspect-ratio: 1920 / 768;
  }

  .banner-carousel .swiper-slide .slide__wrapper .img img {
    height: auto;
  }

  .category-banner .img .category-banner-fallback {
    aspect-ratio: 1920 / 768;
    gap: 1rem;
  }

  .banner-carousel .swiper-pagination-bullet {
    width: 0.75rem;
    height: 0.75rem;
  }

  .membership-gate {
    padding: 1.5rem 2rem 6rem;
  }

  .membership-gate h1 {
    font-size: 1.25rem;
    line-height: 2.75rem;
  }

  .membership-gate .actions {
    padding: 3rem 2rem;
  }

  .membership-gate h2 {
    font-size: 1.125rem;
    line-height: 2.25rem;
  }

  .membership-gate .btn__action {
    margin: 0.5rem auto;
    font-size: 1.125rem;
    line-height: 1.25rem;
  }

  .membership-gate p {
    margin: 0 auto;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .membership-gate hr {
    margin: 1rem auto;
  }
}

@media (max-width: 420px) {
  .video__list .container .list .item .img {
    flex-basis: 46%;
    margin-right: 0.875rem;
  }

  .video__list .container .list .item .txt {
    min-width: 0;
  }
}