@charset "UTF-8";
:root {
  --text-color: #000;
  --bg-color: #fff;
  --secondary-bg-color: rgba(0, 0, 0, .1);
  --font-primary: Inter, sans-serif;
  --font-secondary: Inter, sans-serif;
  --hero-opacity: 100;
  --font-size-base: 24px;
  --line-height-base: 1.7;
  --font-size-xl-max: 140;
  --font-size-xl-min: 50;
  --font-size-xl: calc(var(--font-size-xl-min) * 1px + (var(--font-size-xl-max) - var(--font-size-xl-min)) * ((100vw - 320px) / (1440 - 320)));
  --font-size-h1-max: 78;
  --font-size-h1-min: 50;
  --font-size-h1: calc(var(--font-size-h1-min) * 1px + (var(--font-size-h1-max) - var(--font-size-h1-min)) * ((100vw - 320px) / (1440 - 320)));
  --font-size-h2-max: 58;
  --font-size-h2-min: 40;
  --font-size-h2: calc(var(--font-size-h2-min) * 1px + (var(--font-size-h2-max) - var(--font-size-h2-min)) * ((100vw - 320px) / (1440 - 320)));
  --font-size-h3-max: 44;
  --font-size-h3-min: 30;
  --font-size-h3: calc(var(--font-size-h3-min) * 1px + (var(--font-size-h3-max) - var(--font-size-h3-min)) * ((100vw - 320px) / (1440 - 320)));
  --font-size-h4-max: 32;
  --font-size-h4-min: 24;
  --font-size-h4: calc(var(--font-size-h4-min) * 1px + (var(--font-size-h4-max) - var(--font-size-h4-min)) * ((100vw - 320px) / (1440 - 320)));
  --font-size-h5-max: 24;
  --font-size-h5-min: 18;
  --font-size-h5: calc(var(--font-size-h5-min) * 1px + (var(--font-size-h5-max) - var(--font-size-h5-min)) * ((100vw - 320px) / (1440 - 320)));
  --font-size-h6-max: 18;
  --font-size-h6-min: 14;
  --font-size-h6: calc(var(--font-size-h6-min) * 1px + (var(--font-size-h6-max) - var(--font-size-h6-min)) * ((100vw - 320px) / (1440 - 320)));
}

/* .has-light-hero .site-hero,
.has-light-hero .header--colored {
  --text-color: #000;
  --bg-color: #fff;
  --secondary-bg-color: rgba(0, 0, 0, .1);
} */

.scheme-dark,
/* .has-dark-hero  */
.site-hero,
/* .has-dark-hero  */
.header--colored {
  --text-color: #fff;
  --bg-color: #000;
  --secondary-bg-color: rgba(255, 255, 255, .15);
}

/* Document Setup
 * =========================================== */
* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  overflow-wrap: anywhere;
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  /* var(--font-primary) */
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: -0.01em;
}
section{
  pointer-events: initial;
  position: relative;
  top: 100vh;
  padding: 6vw;
  /* 200px */
  width: 100%;
  min-height: 100vh;
  z-index: 2;
}
section h2{
  margin: 0 0 50px;
  padding: 0;
  font-size: 2em;
  color: #fff;
}
section p{
  font-size: 1em;
  color: #fff;

}

section .site-main{
  pointer-events: none;
}

section .content{
  pointer-events: initial;

}
section a{
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--text-color), var(--text-color));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: color 1s cubic-bezier(0.23, 1, 0.32, 1), background 1s cubic-bezier(0.23, 1, 0.32, 1);
}

@media (max-width: 1024px) {
  body.toggled-on {
    overflow: hidden;
    pointer-events: none;
  }
}
/* Element Base
 * =========================================== */
h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  margin-top: 5px;
  margin-bottom: 5px;
  font-family: var(--font-secondary);
  font-weight: 600;
}


@media (min-width: 1024px) {
  h1,
h2,
h3 {
    font-weight: 700;
  }
}

h1 {
  font-size: 9.5vh;
  /* var(--font-size-h1) */
  line-height: 1.15;
  letter-spacing: -0.02em;
}


h2 {
  font-size: var(--font-size-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
/*中文大字*/
h3 {
  font-size: 8.5vh;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h4 {
  font-size: 6.5vh;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
/*內文小字*/
h5 {
  font-size: 8.5vh;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

h6 {
  font-size: var(--font-size-h6);
}

a {
  color: var(--text-color);
  text-decoration: none;
}

p {
  font-size: 30px;
  margin: 30px 0;
}

strong {
  font-weight: 600;
}

hr {
  height: 1px;
  margin: 30px 0;
  border: 0;
  background-color: var(--text-color);
}

/* Media ------------------------------------- */
/* figure {
  display: block;
  margin: 0;
} */


iframe {
  display: block;
  max-width: 100%;
}

.iframe-container {
  width: 100%;
  position: relative;
}

.iframe-container iframe{
  width: 100%;
  height: calc(100vw * 9 / 16); /* 根据宽度计算高度 */
  max-height: 100%; /* 最大高度限制 */
  border: none; /* 去掉 iframe 默认边框*/
}

video {
  display: block;
}

svg,
img,
embed,
object {
  display: block;
  height: auto;
  max-width: 100%;
}


/* Layout
 * =========================================== */
/* Header
 * ------------------------------------------- */
.site-header {
  pointer-events: none;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 30px;
  opacity: 1; 
  visibility: inherit; 
  transform: translate(0px, 0px);;
  transition-timing-function: ease-in;
  transition: 0.5s;
  background: linear-gradient(to bottom, rgba(0,0,0,.62), rgba(0,0,0,.18) 70%, rgba(0,0,0,0));
  backdrop-filter: blur(4px);
  /* transition: background-color 0.3s ease, padding 0.3s ease; */
}

.scrolled {
  opacity: 0;
  visibility: hidden;
  transform: translate(0%, -10%); /* Change this to your desired style when scrolled */
}
@media (min-width: 1024px) {
  .site-header {
    padding: 35px 4vw;
  }
}
.admin-bar .site-header {
  top: 46px;
}
@media (min-width: 783px) {
  .admin-bar .site-header {
    top: 32px;
  }
}
.site-header svg {
  fill: var(--text-color);
  transition: fill 1s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Logo -------------------------------------- */
.site-logo {
  pointer-events: initial;
  position: relative;
  font-size: 25px;
  font-weight: 600;
  letter-spacing: -0.05em;
}
.site-logo img {
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.logo-light {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.scheme-dark .logo-light {
  opacity: 1;
}
.scheme-dark .logo-dark {
  opacity: 0;
}

.has-dark-hero .header--colored .logo-light {
  opacity: 1;
}
.has-dark-hero .header--colored .logo-dark {
  opacity: 0;
}



/*new Menu code CHATGPT*/





/* Menu -------------------------------------- */
 .site-menu {
  pointer-events: initial;
}
.site-menu ul {
  list-style: none;
  margin: 0;
  padding:  0;
}
.site-menu a {
  position: relative;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--text-color), var(--text-color));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: color 1s cubic-bezier(0.23, 1, 0.32, 1), background 1s cubic-bezier(0.23, 1, 0.32, 1);
  font-weight: 600;
  letter-spacing: .03em;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.site-menu a:hover {
  background-size: 100% 2px;
}
.site-menu .current-menu-item > a,
.site-menu .current-menu-parent > a {
  background-size: 100% 2px;
}
.site-menu .current-menu-item > a:hover,
.site-menu .current-menu-parent > a:hover {
  background-size: 0 2px;
}

@media (max-width: 1024px) {
  .site-menu {
    font-size: 32px;
    line-height: 1.15;
    font-weight: 700;
  }
  .site-menu li {
    opacity: 0;
    visibility: hidden;
    margin-top: 15px;
    transform: translateX(-10px);
    transition: opacity 0.5s, transform 0.5s;
  }

  .site-menu-wrap {
    visibility: hidden;
    z-index: 9997;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    padding: 90px 30px;
    background-color: var(--bg-color);
    transform: translateX(-100%);
    transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
    overflow-y: scroll;
  }
  .toggled-on .site-menu-wrap {
    visibility: visible;
    transform: translateX(0);
  }
  .toggled-on .site-menu li {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  .toggled-on .site-menu li:nth-child(1) {
    transition-delay: 0.1s;
  }
  .toggled-on .site-menu li:nth-child(2) {
    transition-delay: 0.2s;
  }
  .toggled-on .site-menu li:nth-child(3) {
    transition-delay: 0.3s;
  }
  .toggled-on .site-menu li:nth-child(4) {
    transition-delay: 0.4s;
  }
  .toggled-on .site-menu li:nth-child(5) {
    transition-delay: 0.5s;
  }
  .toggled-on .site-menu li:nth-child(6) {
    transition-delay: 0.6s;
  }
  .toggled-on .site-menu li:nth-child(7) {
    transition-delay: 0.7s;
  }
  .toggled-on .site-menu li:nth-child(8) {
    transition-delay: 0.8s;
  }
  .toggled-on .site-menu li:nth-child(9) {
    transition-delay: 0.9s;
  }
  .toggled-on .site-menu li:nth-child(10) {
    transition-delay: 1s;
  }

  .site-menu .sub-menu {
    display: none;
    font-size: 32px;
    font-weight: 400;
  }
  .site-menu .sub-menu a {
    opacity: 0.5;
  }
  .site-menu .sub-menu .current-menu-item > a {
    opacity: 1;
  }
  .site-menu .sub-menu li {
    display: inline-block;
    margin-right: 20px;
  }
  .site-menu .submenu-open .sub-menu {
    display: block;
  } 
}
@media (min-width: 1025px) {
  .site-menu-wrap {
    display: flex;
    align-items: center;
  }

  .site-menu ul {
    display: flex;
  }
  .site-menu > ul > li {
    position: relative;
    transition: opacity 0.5s;
  }
  .site-menu li:not(:first-child) {
    margin-left: 22px;
  }
  .site-menu li.hidden {
    opacity: 0.2;
  }
  .site-menu li:hover > .sub-menu {
    visibility: visible;
    pointer-events: auto;
  }
  .site-menu .sub-menu {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: -15px;
    flex-direction: column;
    padding: 12px 15px;
    transition: all 0.5s;
    pointer-events: none;
  }
  .site-menu .sub-menu li {
    margin: 0 0 3px;
    width: max-content;
    opacity: 0;
    transform: translateX(-10px);
  }
} 

.menu-toggle {
  pointer-events: initial;
  cursor: pointer;
  z-index: 9998;
  position: relative;
  right: -20px;
  margin-left: auto;
  padding: 10px 20px;
  user-select: none;
}
@media (min-width: 1025px) {
  .menu-toggle {
    display: none;
  }
}
.menu-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 4px 0;
  background-color: var(--text-color);
  transition: transform 0.3s, background 1s cubic-bezier(0.23, 1, 0.32, 1);
}
.toggled-on .menu-toggle span:nth-child(1) {
  transform: translate(0, 3px) rotate(45deg);
}
.toggled-on .menu-toggle span:nth-child(2) {
  transform: translate(0, -3px) rotate(-45deg);
}



/* Social Icons ------------------------------ */
.site-social {
  pointer-events: initial;
  display: flex;
}
.site-social a {
  display: inline-block;
}
@media (max-width: 1025px) {
  .site-social a {
    opacity: 0;
    visibility: hidden;
    margin-right: 10px;
    transform: translateX(-10px);
    transition: opacity 0.5s, transform 0.5s;
  }
  .site-social a:nth-child(1) {
    transition-delay: 0.1s;
  }
  .site-social a:nth-child(2) {
    transition-delay: 0.2s;
  }
  .site-social a:nth-child(3) {
    transition-delay: 0.3s;
  }
  .site-social a:nth-child(4) {
    transition-delay: 0.4s;
  }
  .site-social a:nth-child(5) {
    transition-delay: 0.5s;
  }
  .site-social a:nth-child(6) {
    transition-delay: 0.6s;
  }
  .site-social a:nth-child(7) {
    transition-delay: 0.7s;
  }
  .site-social a:nth-child(8) {
    transition-delay: 0.8s;
  }
  .site-social a:nth-child(9) {
    transition-delay: 0.9s;
  }
  .site-social a:nth-child(10) {
    transition-delay: 1s;
  }
  .toggled-on .site-social a {
    opacity: 1;
    visibility: visible;
    transform: translate(0);
  }
}
@media (min-width: 1025px) {
  .site-social a {
    margin-left: 5px;
  }
  .site-social a:first-child {
    margin-left: 30px;
  }
}





/* Hero
 * ------------------------------------------- */
.site-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 250px 30px 100px;
  background-color: var(--bg-color);
  color: var(--text-color);
  text-align: center;
}
@media (min-width: 1024px) {
  .site-hero {
    padding-right: 4vw;
    padding-left: 4vw;
  }
}
.site-hero.height-full {
  /* min-height: 100vh; */
  padding-top: 0;
  padding-bottom: 0;
}
.site-hero.aligment-left {
  text-align: left;
}
.site-hero.aligment-right {
  text-align: right;
}
.site-hero.position-bottom {
  align-items: flex-end;
  padding-bottom: 100px;
}
.no-title .site-hero {
  padding: 0;
}

.hero-media {
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  opacity: calc(0.01 * var(--hero-opacity));
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.3s ease;
}
/* .hero-media img, */
.hero-media video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
  z-index: 1;
}
.style-fixed .hero-media {
  position: fixed;
  height: 100vh;
}
.height-full .hero-media {
  height: 100vh;
}

.hero-caption {
  position: relative;
  z-index: 2;
}
.hero-caption > *:first-child {
  margin-top: 0;
}
.hero-caption > *:last-child {
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .hero-caption {
    width: 52vw;
  }
}
.width-full .hero-caption {
  width: 100%;
}
.title-small .hero-caption h1 {
  font-size: var(--font-size-h3);
  line-height: 1.15;
}
.title-medium .hero-caption h1 {
  font-size: var(--font-size-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.title-large .hero-caption h1 {
  font-size: var(--font-size-h1);
  line-height: 1.15;
  letter-spacing: -0.02em;
}
.title-huge .hero-caption h1 {
  font-size: var(--font-size-xl);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.archive .hero-title,
.search .hero-title {
  font-size: var(--font-size-h2);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin-bottom: 0;
}

/* .error404 .hero-title {
  font-size: var(--font-size-xl);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}

.error404 .hero-subtitle {
  margin-top: 0;
} */

/* Main
 * ------------------------------------------- */
.site-main {
  position: relative;
  margin-right: 30px;
  margin-left: 30px;
  padding-top: 100px;
  bottom: 5vh;
}
@media (min-width: 1024px) {
  .site-main {
    width: 52vw;
    margin: 0 auto;
  }
}
.no-title .site-main, .no-hero .site-main {
  padding-top: 250px;
}
/* .error404 .site-main, .search-no-results .site-main {
  display: none;
} */

/* Footer
 * ------------------------------------------- */
.site-footer {
  bottom: 20px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 35px 4vw;
  position: relative;
  z-index: 2;
  padding: 20px 10px;
}
.site-footer .footer-column p{
  font-size: 20px;
}

.site-footer a {
  display: block; /* 將錨點設置為區塊元素，使其單獨顯示一行 */
  text-align: left; /* 文字居中 */
  padding: 10px; /* 添加內邊距以增加可點擊區域 */
  color: #fff; /* 文字顏色 */
  text-decoration: none; /* 移除下劃線 */
}

.site-footer a:hover {
  color: #4e4e4e; /* 滑鼠懸停時的背景顏色 */
}
@media (min-width: 1024px) {
  .site-footer {
    bottom: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 35px 4vw;
  }
}
.site-footer .footer-column > *:first-child {
  margin-top: 0;
}
.site-footer .footer-column > *:last-child {
  margin-bottom: 0;
}



@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap");
body,
html {
  min-height: 100%;
  width: 100%;
  /* font-size: 1em; */
  line-height: 1.2;
  background: #18181b;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
  box-sizing: border-box;
}
body p,
html p {
  line-height: 1.6;
}
body img,
html img {
  width: 100%;
  height: auto;
}
body .button,
html .button {
  border-radius: 15px;
  opacity: 0.5;
  position: relative;
  display: table;
  padding: 0.75em 1em;
  background: #000;
  color: #fff;
  text-decoration: none;
  margin-top: 1.5em;
  text-transform: uppercase;
  /* visibility: hidden; */
}
body .button:hover,
html .button:hover {
  background: #2f2f2f;
}
body .wrapper,
html .wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 3em 0;
}

/* * * + * {
  margin: 0.75em 0 0;
} */

.swiper {
  width: 100%;
  height: 100%;
  position: relative;
  background: #fff;
  margin: 0;
}
.swiper .swiper-wrapper {
  width: 100%;
  height: 100vh;
  margin: 0;
  position: relative;
}
.swiper .swiper-wrapper .swiper-slide {
  margin: 0;
  text-align: center;
  
}
@media (min-width: 992px) {
  .swiper .swiper-wrapper .swiper-slide {
    display: grid;
    justify-items: center;
    align-items: center;
  }
}
.swiper .swiper-wrapper .swiper-slide .overlay {
  display: none;
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  opacity: 0.2;
  margin: 0;
}
@media (min-width: 992px) {
  .swiper .swiper-wrapper .swiper-slide .overlay {
    display: block;
    margin: 0;
  }
}
.swiper .swiper-wrapper .swiper-slide .swiper-image {
  position: relative;
  width: 100%;
  height: 50vh;
}
@media (min-width: 992px) {
  .swiper .swiper-wrapper .swiper-slide .swiper-image {
    display: grid;
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 10%;
    margin-bottom: 10%;

  }
}
.swiper .swiper-wrapper .swiper-slide .content-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  width: 100vw;
  justify-items: start;
  align-items: center;
}
@media (min-width: 992px) {
  .swiper .swiper-wrapper .swiper-slide .content-wrapper.content-right {
    justify-items: end;
    margin-top: 5%;
  }
}
.swiper .swiper-wrapper .swiper-slide .content-wrapper .content {
  padding: 3.5em;
  text-align: left;
  max-width: 1550px;
  color: #fff;
}
.swiper .swiper-wrapper .swiper-slide .content-wrapper .content h2 {
  font-size: 5em;
}
.swiper .swiper-wrapper .swiper-slide .content-wrapper .content :first-child {
  margin: 0;
}
.swiper .swiper-wrapper .swiper-slide .content-wrapper .content p {
  display: none;
}
@media (min-width: 992px) {
  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content {
    /* padding: 100px; */
    color: #fff;
  }
  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content p {
    display: block;
  }
}

@media screen and (max-width: 1024px) and (orientation: landscape) {
  .swiper {
    width: 100vw;
    height: 100vh;
  }

  .swiper .swiper-wrapper .swiper-slide .swiper-image {
    height: 100vh;
  }

  .swiper .swiper-wrapper .swiper-slide .content-wrapper {
    justify-items: center;
    align-items: center;
    text-align: center;
    padding: 0 10px; /* 增加內邊距確保內容不會超出屏幕 */
  }

  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content {
    padding: 1em;
    max-width: 90%;
    color: #fff;
  }

  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content h2 {
    font-size: 3em;
  }

  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content p {
    display: block;
    font-size: 1em;
  }

  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content a {
    display: inline-block;
    padding: 0.5em 1em;
    background: #000;
    color: #fff;
    text-decoration: none;
    margin-top: 10px;
  }
}

/* 縮小文字大小和內邊距確保在橫屏模式下內容不會超出 */
@media screen and (max-width: 768px) and (orientation: landscape) {
  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content h2 {
    font-size: 2em;
  }

  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content p {
    font-size: 0.9em;
  }

  .swiper .swiper-wrapper .swiper-slide .content-wrapper .content a {
    font-size: 0.9em;
    padding: 0.3em 0.6em;
  }
}

.swiper-nav-wrapper {
  position: absolute;
  top: 50%;
  width: 100%;
  /* right: 6em; */
}
.swiper-nav-wrapper .swiper-button-next,
.swiper-nav-wrapper .swiper-button-prev {
  position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 30px;
      height: 30px;
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      border-radius: 50%;
      z-index: 10;
      cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  width: 60px;
  height: 60px;
}
.swiper-nav-wrapper .swiper-button-next {
  right: 100x;
}
.swiper-nav-wrapper .swiper-button-prev {
  left: 10px;
}

.swiper-nav-wrapper .swiper-button-next:hover,
.swiper-nav-wrapper .swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.8);
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  left: 10px;
  background-repeat: no-repeat !important;
  background-position: center !important;
  right: 10px;
  width: 60px !important;
  height: 60px !important;
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
  background-image: url("data:image/svg+xml,%0A%3Csvg width='9px' height='16px' viewBox='0 0 9 16' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='chevron-right' transform='translate(4.508789, 7.870605) rotate(-180.000000) translate(-4.508789, -7.870605) translate(-0.000000, -0.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cpath d='M8.674805,7.066406 L1.924805,0.316406 C1.696288,0.105468 1.432619,0 1.133789,0 C0.834959,0 0.57129,0.105468 0.342773,0.316406 C0.114257,0.544923 0,0.808592 0,1.107422 C0,1.406251 0.114257,1.669921 0.342773,1.898438 L6.301758,7.857422 L0.342773,13.816406 C0.114257,14.044923 0,14.308592 0,14.607422 C0,14.906251 0.114257,15.169921 0.342773,15.398438 C0.465821,15.521485 0.584472,15.609375 0.69873,15.662109 C0.812989,15.714844 0.958007,15.741211 1.133789,15.741211 C1.309571,15.741211 1.454589,15.714844 1.568848,15.662109 C1.683106,15.609375 1.801757,15.521485 1.924805,15.398438 L8.674805,8.648438 C8.903321,8.419921 9.017578,8.156251 9.017578,7.857422 C9.017578,7.558592 8.903321,7.294923 8.674805,7.066406 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
  auto: 10px;
  background-repeat: no-repeat !important;
  background-position: center !important;
  right: left;
  width: 60px !important;
  height: 60px !important;
}


.site .content-wrapper{
  position: absolute;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: ".";
  width: 100%;
  justify-items: start;
  align-items: center;
  
}

.site .content-wrapper .content{
  padding: 3.5em;
  max-width: 1550px;
  color: #fff;
  text-align: left; /* 將文本靠左對齊 */
}
.site .content-wrapper.content h1{
  font-size: 200px;
  
}

.site .content-wrapper.content a{
  font-size: 60px;
  visibility: hidden;
}

figure {
  display: flex;
  align-items: flex-start;
}
figure img{
  display: flex;
  align-items: center;
  width: 30vw;
  height: auto;
}
figcaption{
    flex: 1;
    margin-left: 2vw;

}
/* 過場動畫 */
.page-transition-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  opacity: 0;
  /* transition: opacity 0.5s ease; */
  pointer-events: none; /* 點擊事件不應該作用於遮罩層 */
  animation: fadeToTransparent 1s forwards;
  /* wipeRight 3s ease forwards; */
  z-index: 9999;
}

@keyframes fadeToTransparent {
  0% {
    opacity: 1; /* 初始狀態設置為完全不透明 */
  }
  100% {
    opacity: 0; /* 結束狀態設置為完全透明 */
  }
}

@keyframes wipeRight {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}