@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+TC:wght@200..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100dvh;
  width: 100dvw;
  overflow: hidden;
  font-family: 'Noto Sans', sans-serif;
}

body {
  background-color: darkgrey;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

article {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}

img {
  display: block;
  position: absolute;

}

p,
h1,
h2,
img {
  user-select: none
}

.c_animation {
  /* animation: float 3s ease-in-out infinite 0.5s;  */
  opacity: 0;
}

.c_animation_one {
  animation: fadeIn 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards, float 3s ease-in-out infinite 0.5s;
}

.c_animation_one_1 {
  animation: fadeIn1 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards 0.18s, float 3s ease-in-out infinite 0.5s;
}

.c_animation_two {
  animation: fadeIn2 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards 0.2s, float 3s ease-in-out infinite 0.5s;
}

.c_animation_three {
  animation: fadeIn3 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards 0.4s, float 3s ease-in-out infinite 0.5s;
}

.c_animation_fore {
  animation: fadeIn4 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards 0.5s, float 3s ease-in-out infinite 0.5s;
}


@keyframes fadeIn {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  25% {

    clip-path: inset(0 0 80% 0);
  }

  50% {

    clip-path: inset(0 0 60% 0);
  }

  75% {

    clip-path: inset(0 0 40% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeIn1 {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  25% {

    clip-path: inset(0 0 80% 0);
  }

  50% {

    clip-path: inset(0 0 60% 0);
  }

  75% {

    clip-path: inset(0 0 40% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeIn2 {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  25% {
    clip-path: inset(0 0 80% 0);
  }

  50% {
    clip-path: inset(0 0 60% 0);
  }

  75% {
    clip-path: inset(0 0 40% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeIn3 {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  25% {
    clip-path: inset(0 0 80% 0);
  }

  50% {
    clip-path: inset(0 0 60% 0);
  }

  75% {
    clip-path: inset(0 0 40% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeIn4 {
  0% {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }

  25% {
    clip-path: inset(0 0 80% 0);
  }

  50% {
    clip-path: inset(0 0 60% 0);
  }

  75% {
    clip-path: inset(0 0 40% 0);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0);
    /* 初始位置 */
  }

  50% {
    transform: translate(var(--randomX), var(--randomY));
    /* 使用隨機值 */
  }

  100% {
    transform: translate(0, 0);
    /* 回到初始位置 */
  }
}

.bg_sublogo {
  top: 19vh;
  left: 21vw;
  width: 10vw;

}

.c10 {
  top: 42vh;
  left: 27.5vw;
  width: 2.2vw;

}

.c11 {
  top: 51vh;
  left: 30.5vw;
  width: 2.4vw;
}

.c4 {
  top: 22vh;
  left: 30vw;
  width: 7.5vw;
}

.c8 {
  top: 12.5vh;
  left: 41vw;
  width: 4.2vw;
}

.c3 {
  top: 40vh;
  left: 35vw;
  width: 7.1vw;
}

.c2 {
  top: 6vh;
  left: 46vw;
  width: 6.8vw;
}

.c5 {
  width: 4.1vw;
  top: 34vh;
  left: 50.5vw;
}

.c9 {
  top: 48.8vh;
  left: 56vw;
  width: 4.7vw;
}

.c1 {
  width: 6.5vw;
  top: 1vh;
  left: 55vw;
}

.c12 {
  width: 1.5vw;
  top: 70vh;
  left: 63vw;
}

.c7 {
  width: 2.9vw;
  top: 44vh;
  left: 66vw;
}

.c6 {
  width: 3.9vw;
  top: 40vh;
  left: 67.5vw;
}

.bg_logo {
  width: 27.7vw;
  top: 1vh;
  left: 63.5vw;
}

.btn_zh {
  width: 9vw;
  top: 88vh;
  left: 38.5vw;
  animation: fadeIn6 0.4s ease-out forwards, moveIn 0.6s ease-out forwards;
}

.btn_en {
  width: 9vw;
  top: 88vh;
  left: 51.5vw;
  animation: fadeIn6 0.4s ease-out forwards, moveIn 0.6s ease-out forwards;
}

.btn_zh,
.btn_en {
  opacity: 0;
  transform: scale(0.5) translateZ(0);
  z-index: 2;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  /* 添加移動和平滑過渡 */
  padding-bottom: 0.4%;
}

.btn_zh:hover,
.btn_en:hover {
  border-bottom: 3px solid orange;
  cursor: pointer;
}


/* 被點擊後的淡出效果 */
.btn_zh.fade-out,
.btn_en.fade-out {
  opacity: 0;
  /* 淡出 */
  transform: translateX(10px);
  /* 向右側滑動 */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  /* 過渡效果 */
}

/* 加入新動畫效果 */
@keyframes fadeOut {
  0% {
    opacity: 1;
    transform: translateX(0);
    /* 開始時位置 */
  }

  100% {
    opacity: 0;
    transform: translateX(20px);
    /* 向右側移動並淡出 */
  }
}

/* 在 .fade-out 類別中添加 fadeOut 動畫 */
.btn_zh.fade-out,
.btn_en.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut2 {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }
}

.btn_zh.fade-out2,
.btn_en.fade-out2 {
  animation: fadeOut2 0.5s ease-out forwards;
}


.fadeIn6 {
  animation: fadeIn6 0.3s ease-out forwards;
}


.btn_start {
  opacity: 0;
  /* width: 14vw;
  top: 88vh;
  left: 42vw; */
  width: 6vw;
  top: 88vh;
  left: 46.5vw;
  pointer-events: none;
  /* 初始状态不可点击 */
}

.btn_start:hover {
  cursor: pointer;
}

.btn_start.enabled {
  pointer-events: auto;
  /* 可点击状态 */
}

.next_arrowL {

  width: 2.5vw;
  top: 89vh;
  left: 43.5vw;
}

.next_arrowR {

  width: 2.5vw;
  top: 89vh;
  left: 53vw;
}

.next_arrowL,
.next_arrowR {
  opacity: 0;
  /* 預設情況下隱藏 */
  transition: opacity 0.3s ease;
  /* 添加平滑過渡效果 */
}

.btn_start:hover~.next_arrowL,
.btn_start:hover~.next_arrowR {
  opacity: 1;
  /* 滑鼠滑過 btn_start 時顯示箭頭 */
}

/* .btn_start:hover {
  background-image: url(./start/next_arrowL.png);
  background-repeat: no-repeat;
} */

@keyframes fadeIn6 {
  0% {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    /* 初始時從下方開始，完全隱藏 */
  }


  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    /* 完全顯示 */
  }
}

/* 遠到近的動畫效果 */
@keyframes moveIn {
  0% {
    opacity: 0;
    transform: scale(1.5) translateY(30px);
    /* 開始時放大並稍微位於下方 */
  }


  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    /* 結束時恢復正常大小並回到原來的位置 */
  }
}


/* 導覽頁頁 */

div {
  width: 30vw;
  height: 50vh;
  position: absolute;
  /* left: 22vw;
  top: 31.5vh; */
  overflow-y: auto;
  left: 24vw;
  top: 30.5vh;
  padding-right: 0.5vw;

}

/* 定義滾動條樣式 */
div::-webkit-scrollbar {
  width: 8px;
  /* 滾動條的寬度 */
}

div::-webkit-scrollbar-track {
  background: darkgrey;
  /* 滾動條的背景 */
  border-radius: 10px;
  /* 圓角效果 */
}

div::-webkit-scrollbar-thumb {
  background-color: #888;
  /* 滾動條顏色 */
  border-radius: 10px;
  /* 圓角效果 */
  border: 2px solid darkgrey;
  /* 滾動條與背景之間的邊框 */
}

div::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* 滾動條被懸停時的顏色 */
}

.thxlist {
  width: 30vw;
  height: 100vh;
  position: fixed;
  /* 使 div 固定在螢幕上 */
  left: -100vw;
  /* 初始隱藏於螢幕外 */
  top: 0;
  background-color: rgba(233, 231, 231, 0.5);
  transition: left 0.8s cubic-bezier(0.47, 0, 0.75, 0.72);
  /* 設定動畫過渡效果 */
  z-index: 10;
  /* 確保它在其他內容之上 */
  overflow-y: auto;
  /* 當內容超出時顯示垂直滾動條 */
  backdrop-filter: blur(5px);
  /* 背景模糊效果 */

  padding-left: 5px;
}






.btn_thxlist:hover {
  cursor: pointer;
}

.pic_thxlist {
  width: 20vw;
  margin-top: 11vh;
  margin-left: 4vh;
}

.btn_thxlist1 {
  width: 3.3vw;
  top: 5vh;
  left: 25vw;
  transform: rotate(45deg);
  transition: transform 2s ease;
  /* 平滑過渡旋轉 */
}

/* 滑出 div 樣式 */
.show {
  left: 0;
  /* 顯示在螢幕內 */
  transition: left 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  /* 展開時的過渡時間保持為 0.5 秒 */
}

h1 {
  color: #000000;
  font-size: 18px;
  margin-bottom: 3vh;
}

p {
  color: #000000;
  font-size: 18px;
  margin-bottom: 2vh;
}

.title {
  writing-mode: vertical-rl;
  position: absolute;
  /* 文字垂直排列，從右到左 */
  font-size: 60px;
  /* width: 12.3vw; */
  top: 21vh;
  left: 61.5vw;

}

.titleEn {
  transform: rotate(90deg);
  position: absolute;
  /* 旋轉90度，使文字變成垂直 */
  transform-origin: left top;
  /* 設置旋轉基準點 */
  font-weight: normal;
  font-size: 35px;
  top: 21.5vh;
  left: 62vw;
}

/* 定義滾動條樣式 */
.thxlist::-webkit-scrollbar {
  width: 8px;
  /* 滾動條的寬度 */
}

.thxlist::-webkit-scrollbar-track {
  background: rgba(233, 231, 231, 0.5);
  /* 滾動條的背景 */
  border-radius: 10px;
  /* 圓角效果 */
}

.thxlist::-webkit-scrollbar-thumb {
  background-color: #888;
  /* 滾動條顏色 */
  border-radius: 10px;
  /* 圓角效果 */
  border: 2px solid rgba(233, 231, 231, 0.5);
  /* 滾動條與背景之間的邊框 */
}

.thxlist::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  /* 滾動條被懸停時的顏色 */
}

.btn_thxlist {
  width: 2.5vw;
  top: 5vh;
  left: 3vw;
  z-index: 11;
}

.btn_enter {
  width: 6vw;
  top: 77vh;
  left: 60vw;
}

.btn_enterEn {
  width: 7.5vw;
  top: 77vh;
  left: 58.5vw;
}

.bg_logo2 {
  width: 27.7vw;
  top: 1vh;
  left: 63.5vw;
}



@keyframes fadeOutRight {
  0% {
    opacity: 1;
    /* transform: translateX(0); */
    clip-path: inset(0 0 0 0);
    /* 初始狀態：從右邊開始隱藏 */
  }

  100% {
    opacity: 0;
    /* transform: translateX(100%); */
    clip-path: inset(0 0 0 100%);
    /* 最終狀態：完全顯示 */
  }
}

@keyframes fadeOutbottom {
  0% {
    opacity: 1;
    /* transform: translateX(0); */
    clip-path: inset(0 0 0 0);
    /* 初始狀態：從右邊開始隱藏 */
  }

  100% {
    opacity: 0;
    /* transform: translateX(100%); */
    clip-path: inset(0 0 100% 0);
    /* 最終狀態：完全顯示 */
  }
}



.move-left {
  animation: moveLeft 1s ease-in-out forwards;
}

.move-right {
  animation: moveRight 1s ease-in-out forwards;
}

@keyframes moveLeft {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(-150%);
    opacity: 0;
  }
}

@keyframes moveRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(150%);
    opacity: 0;
  }
}





.animation_block {
  opacity: 0;
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    clip-path: inset(0 0 0 100%);
  }

  100% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }
}

@keyframes fadeInLeft1 {
  0% {
    opacity: 1;
    clip-path: inset(0 0 0 0);
  }

  100% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
  }
}


.animation_block_open {
  opacity: 0;
}

@keyframes fadeInLeft2 {
  0% {
    opacity: 0;

  }

  100% {
    opacity: 1;

  }
}


/* 手機板 */
@media (max-width: 600px) {
  .bg_sublogo {
    width: 24vw;
    left: 11vw;
    top: 8vh;
  }

  .c10 {
    top: 48vh;
    left: -2vw;
    width: 5.5vw;
  }

  .c4 {
    width: 20vw;
    left: 5vw;
    top: 37vh;
  }

  .c11 {
    width: 5.5vw;
    left: 8vw;
    top: 56.5vh;
  }

  .c8 {
    width: 10vw;
    left: 31vw;
    top: 29vh;
  }

  .c3 {
    width: 17.5vw;
    left: 18vw;
    top: 48vh;
  }

  .c2 {
    width: 18vw;
    left: 42vw;
    top: 26vh;
  }

  .c5 {
    width: 11vw;
    left: 54vw;
    top: 42vh;
  }

  .c1 {
    width: 18vw;
    left: 66vw;
    top: 22vh;
  }

  .c9 {
    width: 12.5vw;
    left: 69vw;
    top: 51vh;
  }

  .c12 {
    width: 3vw;
    left: 85.5vw;
    top: 68vh;
  }

  .c6 {
    width: 11vw;
    left: 92vw;
    top: 44vh;
  }

  .c7 {
    width: 7.5vw;
    left: 89vw;
    top: 46vh;
  }

  .bg_logo {
    width: 70vw;
    left: 51vw;
    top: -3vh;
    z-index: -1;
  }

  .btn_zh {
    width: 33vw;
    left: 9vw;
    top: 85vh;
    z-index: 2;
  }

  .btn_en {
    width: 33vw;
    left: 57vw;
    top: 85vh;
    z-index: 2;
  }

  .btn_start {
    width: 23vw;
    left: 40vw;
    top: 85vh;
    z-index: 1;
  }

  .next_arrowL {
    width: 12vw;
    left: 25vw;
    top: 85vh;
  }

  .next_arrowR {
    width: 12vw;
    left: 66vw;
    top: 85vh;
  }

  /* 導覽頁 */
  .title {
    font-size: 48px;
    top: 24vh;
    left: 62.5vw;
  }

  .titleEn {
    font-size: 28px;
    top: 24.5vh;
    left: 65.5vw;
  }

  div {
    width: 53vw;
    height: 37vh;
    left: 5vw;
    top: 44.5vh;
  }

  h1 {
    font-size: 14px;
    margin-bottom: 2vh;
  }

  p {
    font-size: 14px;
  }

  .btn_thxlist {
    width: 10vw;
    top: 3vh;
    left: 4vw;
  }

  .btn_enter {
    width: 25vw;
    top: 85vh;
    left: 65.5vw;
  }

  .btn_enterEn {
    width: 31vw;
    top: 85vh;
    left: 59.5vw;
  }


  .thxlist {
    width: 100vw;
    background-color: darkgrey;
  }

  .pic_thxlist {
    margin-left: 4vw;
    margin-top: 11vh;
    width: 80vw;
  }

  .btn_thxlist1 {
    width: 10vw;
    top: 3vh;
    left: 84vw;
  }


}

/* 滑出 */
.slide-right {
  animation: slideRight 0.1s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes slideRight {
  0% {
    opacity: 1;
    transform: translateX(0) rotate(0deg);

  }

  100% {
    opacity: 1;
    transform: translateX(22vw) rotate(45deg);

  }
}

.slide-left {
  animation: slideLeft 0.1s cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes slideLeft {
  0% {
    opacity: 1;
    transform: translateX(22vw) rotate(45deg);


  }

  100% {
    opacity: 1;
    transform: translateX(0);
    transform: translateX(0) rotate(0deg);
  }
}


/* 手機板 */
@media (max-width: 600px) {


  @keyframes slideRight {
    0% {
      opacity: 1;
      transform: translateX(0) rotate(0deg);
    }

    100% {
      opacity: 1;
      transform: translateX(85vw) rotate(45deg);
      /* 修改为100vw */
    }
  }

  @keyframes slideLeft {
    0% {
      opacity: 1;
      transform: translateX(85vw) rotate(45deg);
      /* 修改为100vw */
    }

    100% {
      opacity: 1;
      transform: translateX(0) rotate(0deg);
    }
  }

}

@media (max-width: 375px) {

  .bg_sublogo {
    width: 18vw;
    left: 7vw;
    top: 10vw;
  }

  .c10 {
    width: 4vw;
    left: 1vw;
    top: 76vw;
  }

  .c4 {
    width: 14vw;
    left: 7vw;
    top: 57vw;
  }

  .c11 {
    width: 4vw;
    left: 8vw;
    top: 86vw;
  }

  .c3 {
    width: 15vw;
    left: 17vw;
    top: 74vw;
  }

  .c8 {
    width: 8vw;
    left: 31vw;
    top: 46vw;
  }

  .c2 {
    width: 12.5vw;
    left: 42vw;
    top: 41vw;
  }

  .c5 {
    width: 7.5vw;
    left: 50vw;
    top: 67vw;
  }

  .c1 {
    width: 14vw;
    left: 59vw;
    top: 33vw;
  }

  .c9 {
    width: 8vw;
    left: 62vw;
    top: 82.5vw;
  }

  .c12 {
    width: 3vw;
    left: 73.5vw;
    top: 97vw;
  }

  .c7 {
    width: 6vw;
    left: 84vw;
    top: 70vw;
  }

  .c6 {
    width: 8vw;
    left: 90vw;
    top: 65vw;
  }

  .btn_zh,
  .btn_en,
  .btn_start {
    top: 129vw;
  }

  .next_arrowL {
    width: 12vw;
    left: 25vw;
    top: 90vh;
  }

  .next_arrowR {
    width: 12vw;
    left: 66vw;
    top: 90vh;
  }

  .title {
    font-size: 48px;
    top: 15vh;
    left: 55.5vw;
  }

  .titleEn {
    font-size: 28px;
    top: 15.5vh;
    left: 61.5vw;
  }

  div {
    width: 52vw;
    height: 33vh;
    left: 5vw;
    top: 51.5vh;
  }

  .btn_enterEn {
    width: 31vw;
    top: 79vh;
    left: 59.5vw;
  }

  .btn_enter {
    width: 25vw;
    top: 77vh;
    left: 65.5vw;
  }

}