.banner {
  position: relative;
  width: 100%;
  height: 40vh;
}

.banner .container_1200 {
  position: relative;
  height: 100%;
}

.banner .title {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  align-items: flex-start;
  color: white;
}

main {
  min-height: calc(100vh - 40vh - 6rem - 90px);
}

@media screen and (orientation: landscape) and (max-width: 1200px) {
  .banner {
    position: relative;
    width: 100%;
    height: 55vh;
  }
}

/* 頁面nav */
main > .container_1200 {
  position: relative;
  display: flex;
  gap: 1.5rem;
}

.page_nav {
  width: 25%;
  height: max-content;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  flex-shrink: 0;
  position: sticky;
  top: 2rem;
}

.page_nav > .ham_btn {
  display: none;
}

.page_nav nav > p {
  line-height: 1.25;
  margin: 1.2rem 0 0.5rem;
  font-weight: 600;
  color: white;
  letter-spacing: 1px;
}

.page_nav nav a {
  display: flex;
  align-items: baseline;
  color: white;
  margin: 0.5rem 0;
  letter-spacing: 1px;
}

.page_nav nav a > p {
  font-size: var(--note_size);
  color: white;
  margin: 0;
  line-height: 1.25;
}

.page_nav nav a > span {
  font-weight: 600;
  font-size: var(--note_size);
  margin: 0 0.5rem 0 0;
}

.page_nav nav a > span.ball {
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: white;
  transform: translateY(-50%);
}

@media screen and (max-width: 1200px) {
  .page_nav {
    width: max-content;
    height: max-content;
    max-height: calc(100vh - 2rem);
    overflow: unset;
    position: fixed;
    top: unset;
    bottom: 0.8rem;
    left: 0.8rem;
    z-index: var(--z_header);
  }

  .page_nav > .ham_btn {
    display: block;
    width: 38px;
    height: 38px;
    border-radius: var(--border-radius);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    box-shadow: var(--shadow);
    position: relative;
    cursor: pointer;
  }

  .page_nav > .ham_btn > span {
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: var(--gray_2);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transition: 0.3s;
  }

  .page_nav > .ham_btn > span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 7px));
  }

  .page_nav > .ham_btn > span:nth-child(2) {
    transform: translate(-50%, -50%);
  }

  .page_nav > .ham_btn > span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 7px));
  }

  .page_nav.active > .ham_btn > span:nth-child(1) {
    width: 1.05rem;
    height: 1px;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .page_nav.active > .ham_btn > span:nth-child(2) {
    width: 0;
  }

  .page_nav.active > .ham_btn > span:nth-child(3) {
    width: 1.05rem;
    height: 1px;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .page_nav nav {
    position: absolute;
    bottom: calc(38px + 0.5rem);
    left: 0;
    width: max-content;
    height: max-content;
    max-width: calc(100vw - 1.6rem);
    max-height: calc(100vh - 2rem - 38px);
    overflow: auto;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(5px);
    box-shadow: var(--shadow);
    border-radius: var(--border-radius);
    opacity: 0;
    pointer-events: none;
    transition: 0.3s;
  }

  .page_nav.active nav {
    opacity: 1;
    pointer-events: unset;
  }

  .page_nav nav p {
    color: var(--blue);
  }

  .page_nav nav a > p {
    color: var(--gray_2);
  }

  .page_nav nav a > span {
    color: var(--gray_1);
    margin: 0 0.5rem 0 0;
  }

  .page_nav nav a > span.ball {
    background: var(--gradient);
  }
}

main .content {
  width: 100%;
}

.cate_wrap {
  width: 100%;
}

.cate_wrap:not(:last-child) {
  margin: 0 0 calc(var(--item_spacing) * 6);
}

.cate_title {
  color: white;
}

.group {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--item_spacing);
}

.group:not(:last-child) {
  margin: 0 0 var(--item_spacing);
}

.group_title {
  width: 100%;
  position: relative;
  padding: 1.5rem;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.group_title > h4 {
  margin: 0;
  color: var(--gray_1);
  display: flex;
  align-items: baseline;
}

.group_title span {
  color: var(--blue);
  margin: 0 0.5rem 0 0;
  flex-shrink: 0;
}

.group_title .ball {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gradient);
  transform: translateY(-25%);
}

.group_item {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--item_spacing);
}

.group_item > .tr {
  padding: 1rem 1.5rem;
  border-radius: var(--border-radius);
  overflow: hidden;
  background: var(--white_bg);
  backdrop-filter: blur(5px);
  display: flex;
}

/* download */
.download .group_item {
  flex-direction: column;
}
.download p {
  margin: 0;
  line-height: 1.5;
}

.download .tr {
  width: 100%;
  gap: var(--btn_spacing);
  align-items: center;
}

.download .tr > .td:nth-child(1) {
  width: 2.5rem;
  flex-shrink: 0;
  color: var(--blue);
  font-weight: 600;
}

.download .tr > .td:nth-child(2) {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  gap: 0.5rem;
}

.download .tr > .td:nth-child(2) > span {
  color: var(--gray_2);
}

.download .tr > .td:nth-child(3),
.download .tr > .td:nth-child(4) {
  width: 110px;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  gap: var(--btn_spacing);
}

.download .tr a {
  font-size: var(--note_size);
  font-weight: 600;
  background: white;
  padding: var(--btn_padding);
  border-radius: 25px;
  color: var(--blue);
  transition: 0.3s;
}

.download .tr a:hover {
  background: var(--gradient);
  color: white;
}

@media screen and (max-width: 768px) {
  .download .tr {
    flex-wrap: wrap;
    gap: var(--btn_spacing);
    align-items: flex-start;
  }

  .download .tr > .td:nth-child(1),
  .download .tr > .td:nth-child(2) {
    width: 100%;
  }

  .download .tr > .td:nth-child(3),
  .download .tr > .td:nth-child(4) {
    width: calc(50% - var(--btn_spacing) / 2);
  }

  .download .tr a {
    width: 100%;
    text-align: center;
    font-size: var(--note_size);
    font-weight: 600;
    background: white;
    padding: var(--btn_padding);
    border-radius: 25px;
    color: var(--blue);
    transition: 0.3s;
  }
}

/* 精選重播 */
.highlight .group_item {
  align-items: stretch;
}
.highlight .h_item {
  width: calc((100% - var(--item_spacing) * 2) / 3);
  padding: 1rem;
  background: var(--white_bg);
  backdrop-filter: blur(5px);
  border-radius: var(--border-radius);
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.h_img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius);
  overflow: hidden;
  position: relative;
}

.h_img > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.h_img > .gradient_bg {
  z-index: 0;
  opacity: 0;
  transition: 0.3s;
}

.h_img:hover > img {
  transform: scale(108%);
}

.h_img:hover > .gradient_bg {
  opacity: 1;
}

.h_img .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--btn_padding);
  background: var(--gradient);
  width: max-content;
  border-radius: 25px;
  font-size: var(--note_size);
  font-weight: 600;
  color: white;
  z-index: 10;
}

.h_info {
  width: 100%;
  margin: 1rem 0 2rem;
}

.h_info > p {
  color: var(--gray_1);
  line-height: 1.25;
  margin: 0 0 0.5rem;
}

.h_info > span {
  color: var(--gray_2);
}

.h_btns {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: var(--btn_spacing);
}

.h_btns > a {
  background: white;
  border-radius: 25px;
  padding: var(--btn_padding);
  color: var(--blue);
  font-size: var(--note_size);
  font-weight: 600;
  transition: 0.3s;
  text-align: center;
}

.h_btns > a:hover {
  background: var(--gradient);
  color: white;
}

@media screen and (max-width: 1320px) {
  .highlight .h_item {
    width: calc((100% - var(--item_spacing) * 1) / 2);
    padding: 0.8rem;
  }
}

@media screen and (max-width: 1200px) {
  .highlight .h_item {
    width: calc((100% - var(--item_spacing) * 2) / 3);
  }
}

@media screen and (max-width: 768px) {
  .highlight .h_item {
    width: calc((100% - var(--item_spacing) * 1) / 2);
    padding: 0.5rem;
  }

  .h_btns > a {
    width: 50%;
  }
}

@media screen and (max-width: 586px) {
  .highlight .h_item {
    width: 100%;
    padding: 0.8rem;
  }
}

/* 未開放 */
.unpublished {
  width: 80%;
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--white_bg);
  backdrop-filter: blur(5px);
  border-radius: var(--border-radius);
}

.unpublished > h2 {
  width: max-content;
  max-width: 100%;
  font-weight: 400;
  letter-spacing: 1.5px;
  line-height: 1.2;
  margin: 0.5rem 0 1rem;
  background: var(--gradient);
  -webkit-background-clip: text; /* 讓背景被文字裁切 */
  -webkit-text-fill-color: transparent; /* 文字填色透明 */
}

.unpublished > p {
  letter-spacing: 1px;
  color: var(--gray_1);
}

.unpublished > p > span {
  color: var(--blue);
  font-weight: 600;
}

.unpublished > a {
  width: max-content;
  background: white;
  color: var(--blue);
  font-weight: 600;
  font-size: var(--note_size);
  letter-spacing: 1px;
  padding: var(--btn_padding);
  border-radius: 25px;
  display: block;
  margin: 4rem auto 0;
  transition: 0.3s;
}

.unpublished > a:hover {
  background: var(--gradient);
  color: white;
}

@media screen and (max-width: 768px) {
  .unpublished {
    width: 90%;
    padding: 2rem;
  }

  .unpublished > a {
    margin: 2rem auto 0;
  }
}

/* 輪播尺寸 */
#lightcase-case {
  width: 72vw !important;
  margin: 0 !important;
  top: 46% !important;
  transform: translate(-50%, -50%) !important;
}

.lightcase-contentInner {
  width: 72vw !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-height: 85vh;
}

.lightcase-contentInner > iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

@media screen and (max-width: 1200px) {
  #lightcase-case {
    width: 85vw !important;
  }

  .lightcase-contentInner {
    width: 85vw !important;
  }
}

@media screen and (max-width: 768px) {
  #lightcase-case {
    width: 80vw !important;
  }

  .lightcase-contentInner {
    width: 80vw !important;
  }
}

@media screen and (max-width: 636px) {
  #lightcase-case {
    width: 90vw !important;
  }

  .lightcase-contentInner {
    width: 90vw !important;
  }
}

@media screen and (max-width: 500px) {
  #lightcase-case {
    width: 95vw !important;
  }

  .lightcase-contentInner {
    width: 95vw !important;
  }
}