@charset "UTF-8"; @font-face { font-family: "GenRyuMinTW"; src: url("../../assets/fonts/GenRyuMinTW-EL.ttf") format("truetype"); font-weight: 200; font-style: normal; } @font-face { font-family: "GenRyuMinTW"; src: url("../../assets/fonts/GenRyuMinTW-L.ttf") format("truetype"); font-weight: 300; font-style: normal; } @font-face { font-family: "GenRyuMinTW"; src: url("../../assets/fonts/GenRyuMinTW-R.ttf") format("truetype"); font-weight: 400; font-style: normal; } @font-face { font-family: "GenRyuMinTW"; src: url("../../assets/fonts/GenRyuMinTW-M.ttf") format("truetype"); font-weight: 500; font-style: normal; } @font-face { font-family: "GenRyuMinTW"; src: url("../../assets/fonts/GenRyuMinTW-SB.ttf") format("truetype"); font-weight: 600; font-style: normal; } @font-face { font-family: "GenRyuMinTW"; src: url("../../assets/fonts/GenRyuMinTW-B.ttf") format("truetype"); font-weight: 700; font-style: normal; } @font-face { font-family: "GenRyuMinTW"; src: url("../../assets/fonts/GenRyuMinTW-H.ttf") format("truetype"); font-weight: 900; font-style: normal; } /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } audio:not([controls]) { display: none; height: 0; } img, svg { max-width: 100%; height: auto; } img[width], img[height], svg[width], svg[height] { max-width: none; } img { font-style: italic; } svg { fill: currentColor; } input, select, textarea { display: block; margin: 0; padding: 0; width: 100%; outline: 0; border: 0; border-radius: 0; background: none transparent; color: inherit; font: inherit; line-height: normal; appearance: none; } input:autofill, select:autofill, textarea:autofill { -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out"; -webkit-transition-delay: 9999s; } select { text-transform: none; } select::-ms-expand { display: none; } select::-ms-value { background: none; color: inherit; } textarea { overflow: auto; resize: vertical; } button { display: inline-block; overflow: visible; margin: 0; padding: 0; outline: 0; border: 0; background: none transparent; color: inherit; vertical-align: middle; text-align: center; text-decoration: none; text-transform: none; font: inherit; line-height: normal; cursor: pointer; user-select: none; } :root { interpolate-size: allow-keywords; } html { font-size: 62.5%; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media (min-width: 1920px) { html { font-size: 0.6vw; } } template, [hidden] { display: none; } * { margin: 0; padding: 0; box-sizing: border-box; } address { font-style: inherit; } dfn, cite, em, i { font-style: italic; } b, strong { font-weight: 700; } a { color: inherit; text-decoration: none; } a:hover, a:active, a:focus { outline: 0; } a svg { pointer-events: none; } ul, ol { margin: 0; padding: 0; list-style: none; } p, figure { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } a, area, button, input, label, select, textarea, [tabindex] { -ms-touch-action: manipulation; touch-action: manipulation; } [hreflang] > abbr[title] { text-decoration: none; } table { border-spacing: 0; border-collapse: collapse; } hr { display: block; margin: 1em 0; padding: 0; height: 1px; border: 0; border-top: 1px solid #CCCCCC; } pre { font-size: 1.2rem; line-height: 1.2; color: #AD00FF; white-space: pre-wrap; } :root { --color-white: #ffffff; --color-gray-100: #efefef; --color-gray-200: #e1e1e7; --color-gray-300: #cbcbd0; --color-gray-400: #c0c0c5; --color-gray-500: #a5a4a9; --color-gray-600: #838388; --color-gray-700: #58585b; --color-gray-800: #333335; --color-gray-900: #1a1a1c; --color-gold-500: #d6b676; --color-gold-300: #edc371; --color-gold-200: #f5e7aa; --color-brand-1: #0a1b19; --color-brand-2: #060707; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #000; background-color: #000; min-height: 100dvh; } main { position: relative; transition: opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); margin-bottom: 46.6rem; background-color: #000; opacity: 0; min-height: 100vh; } @media (max-width: 1099.98px) { main { margin-bottom: 63.3rem; min-height: 100dvh; } } main.-landed { opacity: 1; animation: fadeIn 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .-menu-open main { opacity: 0.5; } main > div { position: relative; background-color: var(--color-white); margin-top: -9rem; min-height: 100vh; } @media (max-width: 1099.98px) { main > div { margin-top: -6rem; } } .header { width: 100vw; height: auto; position: sticky; top: 0; z-index: 1000; display: flex; justify-content: space-between; padding: 2.5rem 4.8rem; background-color: var(--color-white); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.3s ease, opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); transform: translateY(-100%); } @media (max-width: 1099.98px) { .header { padding: 1.2rem 2.4rem; } } .-landed .header { transform: translateY(0); } .header.-top { color: #fff; background-color: transparent; } .header.-hide { transform: translateY(-100%); } .header__left { display: flex; align-items: center; gap: 3.2rem; } @media (max-width: 1099.98px) { .header__left { width: 100%; height: auto; flex-direction: row-reverse; justify-content: space-between; } } .header__left-hamburger { width: 3.6rem; height: 3.6rem; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.8rem; transition: transform 0.3s ease; } @media (min-width: 1100px) { .header__left-hamburger:hover { transform: scale(1.1); } } .header__left-hamburger > span { width: 2.4rem; height: 0.1rem; background-color: var(--color-gold-500); border-radius: 0.2rem; transition: background-color 0.3s ease; } .-top .header__left-hamburger > span { background-color: var(--color-white); } .header__left-logo { width: auto; height: 2.9rem; } @media (max-width: 1099.98px) { .header__left-logo { width: auto; height: 2.2rem; } } .header__left-logo > img { width: auto; height: 100%; transition: filter 0.3s ease; } .-top .header__left-logo > img { filter: brightness(0) invert(1); } .header__right { display: flex; gap: 1.2rem; } @media (max-width: 1099.98px) { .header__right { display: none; } } .header__right > a { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; display: flex; justify-content: center; align-items: center; padding: 1rem 1.2rem; border: 1px solid rgba(165, 164, 169, 0.5); border-radius: 0.3rem; min-width: 11.2rem; transition: border-color 0.3s ease; } body.language-en .header__right > a, .header__right > a.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .-top .header__right > a { border-color: rgba(255, 255, 255, 0.5); } @media (min-width: 1100px) { .header__right > a:hover { border-color: #a5a4a9; } .-top .header__right > a:hover { border-color: #fff; } .header__right > a:hover.-solid { background-color: rgba(214, 182, 118, 0.6); } .-top .header__right > a:hover.-solid { background-color: rgba(255, 255, 255, 0.6); } } .header__right > a.-solid { background-color: var(--color-gold-500); border-color: var(--color-gold-500); color: var(--color-white); transition: background-color 0.3s ease; } .-top .header__right > a.-solid { background-color: #D9D9D9; border-color: #D9D9D9; color: var(--color-gray-900); } .menu { width: auto; height: 100vh; position: fixed; top: 0; left: 0; display: flex; flex-direction: column; gap: 6.8rem; padding: 4.8rem 4rem; background-color: var(--color-white); z-index: 1001; transform: translateX(-100%); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); pointer-events: none; } @media (max-width: 1099.98px) { .menu { width: 100vw; height: auto; transform: translateX(0) translateY(-100%); padding: 2.4rem; gap: 3.2rem; } } .-menu-open .menu { transform: translateX(0); pointer-events: auto; } @media (max-width: 1099.98px) { .-menu-open .menu { transform: translateX(0) translateY(0); } } .menu__top { width: 100%; height: auto; display: flex; justify-content: space-between; align-items: center; } .menu__top-logo { width: auto; height: 2.9rem; } @media (max-width: 1099.98px) { .menu__top-logo { width: auto; height: 2.2rem; } } .menu__top-close { width: 2.4rem; height: 2.4rem; display: flex; justify-content: center; align-items: center; transition: transform 0.3s ease; } @media (min-width: 1100px) { .menu__top-close:hover { transform: scale(1.1); } } .menu__top-close > svg { width: 100%; height: auto; } .menu__content { width: 40.6rem; height: auto; display: flex; flex-direction: column; gap: 3.5rem; } @media (max-width: 1099.98px) { .menu__content { width: 100%; height: 100dvh; gap: 2.4rem; } } .menu__content-nav { display: flex; flex-direction: column; gap: 3.5rem; } @media (max-width: 1099.98px) { .menu__content-nav { gap: 2.4rem; } } .menu__content-nav > a { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gray-800); } body.language-en .menu__content-nav > a, .menu__content-nav > a.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .menu__content > span { width: 3rem; height: 0.1rem; background-color: #C0A36B; } .menu__content-cta { width: 100%; height: auto; font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; justify-content: center; align-items: center; gap: 1.2rem; padding: 1.2rem; border: 1px solid rgba(26, 26, 28, 0.5); border-radius: 0.3rem; min-width: 11.2rem; transition: border-color 0.3s ease; } body.language-en .menu__content-cta, .menu__content-cta.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (min-width: 1100px) { .menu__content-cta:hover { border-color: var(--color-gold-900); } } .menu__content-cta > svg { width: 2.4rem; height: auto; } .menu__content-text { display: flex; flex-direction: column; gap: 1.2rem; color: #C0A36B; } .menu__content-text > p { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .menu__content-text > p, .menu__content-text > p.-en { font-size: 2.4rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .menu__content-text > p { font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .menu__content-text > p, .menu__content-text > p.-en { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .menu__content-text > span { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; } body.language-en .menu__content-text > span, .menu__content-text > span.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .footer { width: 100vw; height: calc(100% + 46.6rem); position: fixed; bottom: -46.6rem; left: 0; z-index: -1; } @media (max-width: 1099.98px) { .footer { width: 100vw; height: calc(100% + 63.3rem); bottom: -63.3rem; } } .footer__sticky { width: 100%; height: 100vh; position: sticky; top: 0; display: flex; align-items: flex-end; padding: 8rem 10rem; background-color: var(--color-brand-2); } @media (max-width: 1099.98px) { .footer__sticky { padding: 6rem 2.4rem; } } .footer__wrapper { width: 100%; height: auto; display: flex; flex-direction: column; gap: 8rem; } @media (max-width: 1099.98px) { .footer__wrapper { gap: 2.4rem; } } .footer__wrapper-gold { width: 100%; height: auto; display: flex; flex-direction: column; gap: 2rem; color: var(--color-gold-500); } @media (max-width: 1099.98px) { .footer__wrapper-gold { gap: 2.4rem; } } .footer__wrapper-gold-top { width: 100%; height: auto; display: flex; justify-content: space-between; align-items: center; } @media (max-width: 1099.98px) { .footer__wrapper-gold-top { gap: 1.2rem; } } .footer__wrapper-gold-top-logo { width: auto; height: 3.4rem; } .footer__wrapper-gold-top-logo > img { width: auto; height: 100%; } .footer__wrapper-gold-top-logo > img.-desktop { display: block; } .footer__wrapper-gold-top-logo > img.-mobile { display: none; } @media (max-width: 1099.98px) { .footer__wrapper-gold-top-logo > img.-desktop { display: none; } .footer__wrapper-gold-top-logo > img.-mobile { display: block; } } .footer__wrapper-gold-top-cta { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; align-items: center; gap: 1.4rem; border: 1px solid rgba(214, 182, 118, 0.5); border-radius: 0.3rem; padding: 1.2rem 1.6rem; transition: border-color 0.3s ease, color 0.3s ease; } body.language-en .footer__wrapper-gold-top-cta, .footer__wrapper-gold-top-cta.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .footer__wrapper-gold-top-cta.-mobile { display: none; } @media (max-width: 1099.98px) { .footer__wrapper-gold-top-cta { justify-content: center; } .footer__wrapper-gold-top-cta.-desktop { display: none; } .footer__wrapper-gold-top-cta.-mobile { display: flex; } } @media (min-width: 1100px) { .footer__wrapper-gold-top-cta:hover { border-color: #d6b676; } } .footer__wrapper-gold-top-cta > svg { width: 2rem; height: auto; color: var(--color-gold-500); } .footer__wrapper-gold-top-cta > svg path { fill: var(--color-gold-500); } .footer__wrapper-gold-text { width: 30rem; height: auto; font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .footer__wrapper-gold-text, .footer__wrapper-gold-text.-en { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .footer__wrapper-gold-text.-mobile { display: none; } @media (max-width: 1099.98px) { .footer__wrapper-gold-text { font-size: 1.4rem; } .footer__wrapper-gold-text.-desktop { display: none; } .footer__wrapper-gold-text.-mobile { display: block; } } .footer__wrapper-bottom { display: flex; flex-direction: column; gap: 2.4rem; color: var(--color-gray-300); } .footer__wrapper-bottom-map { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; width: 100%; height: auto; display: flex; justify-content: space-between; } body.language-en .footer__wrapper-bottom-map, .footer__wrapper-bottom-map.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .footer__wrapper-bottom-map { flex-direction: column; align-items: flex-start; gap: 2.4rem; } } .footer__wrapper-bottom-map-nav { display: flex; gap: 2rem; } @media (max-width: 1099.98px) { .footer__wrapper-bottom-map-nav { width: 100%; height: auto; flex-direction: column; gap: 1.2rem; padding-bottom: 2.4rem; border-bottom: 0.1rem solid var(--color-gray-700); } } .footer__wrapper-bottom-map-nav > a { transition: color 0.3s ease; } @media (min-width: 1100px) { .footer__wrapper-bottom-map-nav > a:hover { color: var(--color-white); } } .footer__wrapper-bottom-map-base { display: flex; gap: 3.6rem; } @media (max-width: 1099.98px) { .footer__wrapper-bottom-map-base { flex-direction: column; gap: 1.2rem; } } .footer__wrapper-bottom-map-base > a { transition: color 0.3s ease; } @media (min-width: 1100px) { .footer__wrapper-bottom-map-base > a:hover { color: var(--color-white); } } .footer__wrapper-bottom-map > select { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; width: auto; height: 3.6rem; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-gray-300); border-radius: 0.3rem; padding: 0.8rem 1.4rem; color: var(--color-gray-300); appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7236 5.35151C11.8507 5.281 12.0141 5.30706 12.1124 5.42171C12.2106 5.53638 12.2113 5.70185 12.1222 5.8166L12.0782 5.86238L7.70324 9.61238C7.58626 9.71252 7.41372 9.71252 7.29674 9.61238L2.92174 5.86238L2.8778 5.8166C2.78864 5.70185 2.7894 5.53638 2.88756 5.42171C2.98583 5.30706 3.14928 5.281 3.27636 5.35151L3.32824 5.38753L7.49999 8.96297L11.6717 5.38753L11.7236 5.35151Z' fill='%23D6B676'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; padding-right: 3.6rem; } body.language-en .footer__wrapper-bottom-map > select, .footer__wrapper-bottom-map > select.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (min-width: 1100px) { .footer__wrapper-bottom-map > select { display: none; } } .footer__wrapper-copyright { width: 100%; height: auto; display: flex; justify-content: space-between; } .footer__wrapper-copyright > select { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; width: auto; height: 3.6rem; display: flex; justify-content: center; align-items: center; cursor: pointer; border: 1px solid rgba(165, 164, 169, 0.5); border-radius: 0.3rem; padding: 0.8rem 1.4rem; color: var(--color-gray-300); appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7236 5.35151C11.8507 5.281 12.0141 5.30706 12.1124 5.42171C12.2106 5.53638 12.2113 5.70185 12.1222 5.8166L12.0782 5.86238L7.70324 9.61238C7.58626 9.71252 7.41372 9.71252 7.29674 9.61238L2.92174 5.86238L2.8778 5.8166C2.78864 5.70185 2.7894 5.53638 2.88756 5.42171C2.98583 5.30706 3.14928 5.281 3.27636 5.35151L3.32824 5.38753L7.49999 8.96297L11.6717 5.38753L11.7236 5.35151Z' fill='%23D6B676'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.2rem center; padding-right: 3.6rem; transition: border-color 0.3s ease; } body.language-en .footer__wrapper-copyright > select, .footer__wrapper-copyright > select.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .footer__wrapper-copyright > select { display: none; } } @media (min-width: 1100px) { .footer__wrapper-copyright > select:hover { border-color: var(--color-gold-900); } } .page-index { position: relative; display: flex; flex-direction: column; z-index: 1; } .page-index__hero { width: 100vw; height: 100vh; position: relative; display: flex; align-items: center; padding: 0 9.8rem; overflow: hidden; } @media (max-width: 1099.98px) { .page-index__hero { padding: 4rem 2.4rem; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 1.5rem; } } .page-index__hero-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; object-fit: cover; } .page-index__hero-bg > img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); } .-landed .page-index__hero-bg > img { transform: scale(1); } .page-index__hero-content { display: flex; flex-direction: column; gap: 1.6rem; color: var(--color-white); } .page-index__hero-content > h2 { font-size: 4.6rem; line-height: 6.6rem; font-weight: 500; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; white-space: pre-line; transform: translateY(3.6rem); transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); } body.language-en .page-index__hero-content > h2, .page-index__hero-content > h2.-en { font-size: 5.6rem; line-height: 7.1rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__hero-content > h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__hero-content > h2, .page-index__hero-content > h2.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .-landed .page-index__hero-content > h2 { transform: translateY(0); } .page-index__hero-content > p { width: 100%; height: auto; font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; max-width: 43.5rem; white-space: pre-line; transform: translateY(8rem); transition: transform 1.2s cubic-bezier(0.25, 0.1, 0.25, 1); } body.language-en .page-index__hero-content > p, .page-index__hero-content > p.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__hero-content > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-index__hero-content > p, .page-index__hero-content > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .-landed .page-index__hero-content > p { transform: translateY(0); } .page-index__hero > span { width: 3.6rem; height: 3.6rem; position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; z-index: 1; border-radius: 50%; border: 1px solid var(--color-gray-300); color: var(--color-gray-300); transition: transform 0.3s ease; cursor: pointer; } .page-index__hero > span > svg { width: 1.1rem; height: auto; } .page-index__hero > span > svg.-mobile { display: none; } @media (min-width: 1100px) { .page-index__hero > span:hover { transform: scale(1.1) translateX(-50%); } } @media (max-width: 1099.98px) { .page-index__hero > span { width: 2rem; height: 2rem; position: relative; left: auto; bottom: auto; transform: translateX(0); border: none; } .page-index__hero > span > svg { width: 100%; height: auto; display: none; } .page-index__hero > span > svg.-mobile { display: block; } } .page-index__partners { width: 100%; height: auto; position: relative; display: flex; align-items: center; justify-content: center; padding: 12rem 10rem; background-color: var(--color-brand-1); overflow: hidden; } @media (max-width: 1099.98px) { .page-index__partners { padding: 6rem 2.4rem; } } .page-index__partners-deco { width: 50rem; height: auto; position: absolute; bottom: 0; right: 0; transform: translate(100%, 10%) rotate(20deg); transition: transform 1.6s 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); } @media (max-width: 1099.98px) { .page-index__partners-deco { display: none; } } .page-index__partners-deco.is-inview { transform: translate(38%, 10%) rotate(0deg); } .page-index__partners-deco > img { width: 100%; height: auto; } .page-index__partners-wrapper { width: 100%; height: auto; display: flex; flex-direction: column; justify-content: center; gap: 13.8rem; } @media (max-width: 1099.98px) { .page-index__partners-wrapper { gap: 8rem; } } .page-index__partners-title { display: flex; flex-direction: column; gap: 2rem; } @media (max-width: 1099.98px) { .page-index__partners-title { gap: 0.8rem; } } .page-index__partners-title > p { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gold-500); transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__partners-title > p, .page-index__partners-title > p.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__partners-title > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-index__partners-title > p, .page-index__partners-title > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__partners-title > p.is-inview { transform: translateY(0); opacity: 1; } .page-index__partners-title > h2 { font-size: 3.6rem; line-height: 5.2rem; font-weight: 500; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gray-300); white-space: pre-line; transform: translateY(12rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__partners-title > h2, .page-index__partners-title > h2.-en { font-size: 4rem; line-height: 1.5rem; font-weight: 500; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__partners-title > h2 { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__partners-title > h2, .page-index__partners-title > h2.-en { font-size: 2.4rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__partners-title > h2.is-inview { transform: translateY(0); opacity: 1; } .page-index__partners-numbers { display: flex; gap: 3rem; } @media (max-width: 1099.98px) { .page-index__partners-numbers { width: 60%; height: auto; flex-direction: column; gap: 4.4rem; } } .page-index__partners-numbers-item { display: flex; flex-direction: column; gap: 3.6rem; padding-bottom: 2.4rem; transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } @media (max-width: 1099.98px) { .page-index__partners-numbers-item { gap: 0; } } .page-index__partners-numbers-item:nth-child(1) { transition-delay: 0.1s; } .page-index__partners-numbers-item:nth-child(2) { transition-delay: 0.2s; } .page-index__partners-numbers-item:nth-child(3) { transition-delay: 0.3s; } .page-index__partners-numbers-item.is-inview { transform: translateY(0); opacity: 1; } .page-index__partners-numbers-item > h3 { width: 100%; height: auto; font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; padding-top: 1.2rem; color: var(--color-gray-300); border-top: 1px solid rgba(181, 181, 181, 0.5); } body.language-en .page-index__partners-numbers-item > h3, .page-index__partners-numbers-item > h3.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__partners-numbers-item > h3 { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; } body.language-en .page-index__partners-numbers-item > h3, .page-index__partners-numbers-item > h3.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__partners-numbers-item > p { font-size: 4.6rem; line-height: 6.6rem; font-weight: 500; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; display: flex; align-items: baseline; gap: 1.6rem; font-size: 8rem; color: var(--color-gold-500); } body.language-en .page-index__partners-numbers-item > p, .page-index__partners-numbers-item > p.-en { font-size: 5.6rem; line-height: 7.1rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__partners-numbers-item > p { font-size: 3.6rem; line-height: 5.2rem; font-weight: 500; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; gap: 0.6rem; } body.language-en .page-index__partners-numbers-item > p, .page-index__partners-numbers-item > p.-en { font-size: 4rem; line-height: 1.5rem; font-weight: 500; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__partners-numbers-item > p > span { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__partners-numbers-item > p > span, .page-index__partners-numbers-item > p > span.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__partners-numbers-item > p > span { font-size: 2rem; } } .page-index__banner { width: 100%; height: 100vh; position: relative; display: flex; align-items: flex-end; justify-content: center; padding: 12rem 10rem; background-color: var(--color-brand-1); overflow: hidden; } @media (max-width: 1099.98px) { .page-index__banner { padding: 8rem 2.4rem; } } .page-index__banner-bg { width: 110%; height: 110%; position: absolute; top: 0; left: 0; } .page-index__banner-bg > img { width: 100%; height: 100%; position: absolute; object-fit: cover; } .page-index__banner-content { width: 100%; height: auto; display: flex; flex-direction: column; gap: 1.8rem; color: var(--color-white); } @media (max-width: 1099.98px) { .page-index__banner-content { gap: 1.2rem; } } .page-index__banner-content > h2 { font-size: 3.6rem; line-height: 5.2rem; font-weight: 500; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; white-space: pre-line; transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__banner-content > h2, .page-index__banner-content > h2.-en { font-size: 4rem; line-height: 1.5rem; font-weight: 500; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__banner-content > h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__banner-content > h2, .page-index__banner-content > h2.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__banner-content > h2.is-inview { transform: translateY(0); opacity: 1; } .page-index__banner-content > p { width: 100%; height: auto; font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); max-width: 50rem; opacity: 0; white-space: pre-line; } body.language-en .page-index__banner-content > p, .page-index__banner-content > p.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__banner-content > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-index__banner-content > p, .page-index__banner-content > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__banner-content > p.is-inview { transform: translateY(0); opacity: 1; } .page-index__context { width: 100%; height: auto; position: relative; display: flex; justify-content: center; padding: 12rem 20rem; background-color: var(--color-white); } @media (max-width: 1099.98px) { .page-index__context { flex-direction: column; align-items: flex-start; padding: 8rem 2.4rem; gap: 8rem; } } .page-index__context-wrapper { width: 100%; height: auto; display: flex; flex-direction: column; gap: 16rem; } @media (max-width: 1099.98px) { .page-index__context-wrapper { width: 100vw; height: auto; flex-direction: row; overflow-x: scroll; overflow-y: hidden; padding: 0 2.4rem; margin-left: -2.4rem; gap: 2.4rem; min-width: 100vw; -ms-overflow-style: none; scrollbar-width: none; } .page-index__context-wrapper::-webkit-scrollbar { display: none; } } .page-index__context-item { width: 100%; height: auto; display: flex; justify-content: space-between; gap: 7.2rem; } @media (max-width: 1099.98px) { .page-index__context-item { width: calc(100vw - 4.8rem); height: auto; flex-direction: column; gap: 1.6rem; min-width: calc(100vw - 4.8rem); } } .page-index__context-item:nth-child(even) { flex-direction: row-reverse; } @media (max-width: 1099.98px) { .page-index__context-item:nth-child(even) { flex-direction: column; } } .page-index__context-item-img { width: 52%; height: auto; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 1rem; } .page-index__context-item-img::before { content: ""; display: block; padding-bottom: 68%; } @media (max-width: 1099.98px) { .page-index__context-item-img { width: 100%; height: auto; border-radius: 0.5rem; } } .page-index__context-item-img > figure { width: 120%; height: 120%; position: absolute; display: flex; justify-content: center; align-items: center; overflow: hidden; } .page-index__context-item-img > figure > img { width: 100%; height: 100%; object-fit: cover; } .page-index__context-item-content { flex: 1; display: flex; flex-direction: column; gap: 2.4rem; } @media (max-width: 1099.98px) { .page-index__context-item-content { gap: 1.2rem; } } .page-index__context-item-content > h2 { font-size: 3.2rem; line-height: 4.4rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gray-900); white-space: pre-line; transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__context-item-content > h2, .page-index__context-item-content > h2.-en { font-size: 4.8rem; line-height: 5.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__context-item-content > h2 { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__context-item-content > h2, .page-index__context-item-content > h2.-en { font-size: 2.4rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__context-item-content > h2.is-inview { transform: translateY(0); opacity: 1; } .page-index__context-item-content > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-600); transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__context-item-content > p, .page-index__context-item-content > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__context-item-content > p.is-inview { transform: translateY(0); opacity: 1; } .page-index__context-progress { width: 60vw; height: 0.1rem; display: flex; justify-content: space-between; align-items: center; background-color: rgba(165, 164, 169, 0.5); margin-top: 2.4rem; } @media (min-width: 1100px) { .page-index__context-progress { display: none; } } .page-index__context-progress > span { background-color: var(--color-gray-900); height: 100%; width: calc(var(--index-context-final-width, 0.33) * 100%); min-width: calc(var(--index-context-base-width, 0.33) * 100%); } .page-index__card { width: 100%; height: auto; display: flex; justify-content: center; padding: 13.8rem 10rem 20rem; background-color: var(--color-brand-1); } @media (max-width: 1099.98px) { .page-index__card { padding: 8rem 2.4rem; } } .page-index__card-wrapper { width: 100%; height: auto; display: flex; flex-direction: column; gap: 3.2rem; } @media (max-width: 1099.98px) { .page-index__card-wrapper { gap: 4rem; } } .page-index__card-wrapper-top { width: 100%; height: auto; display: flex; justify-content: space-between; } .page-index__card-wrapper-top > h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gold-500); white-space: pre-line; transform: translateY(3rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__card-wrapper-top > h2, .page-index__card-wrapper-top > h2.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__card-wrapper-top > h2 { font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__card-wrapper-top > h2, .page-index__card-wrapper-top > h2.-en { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__card-wrapper-top > h2.is-inview { transform: translateY(0); opacity: 1; } .page-index__card-wrapper-top-navigation { display: flex; gap: 1rem; } @media (max-width: 1099.98px) { .page-index__card-wrapper-top-navigation { display: none; } } .page-index__card-wrapper-top-navigation > button { width: 2.8rem; height: 2.8rem; display: flex; justify-content: center; align-items: center; border: 1px solid var(--color-gold-500); border-radius: 50%; transition: transform 0.3s ease; } @media (min-width: 1100px) { .page-index__card-wrapper-top-navigation > button:hover { transform: scale(1.1); } } .page-index__card-wrapper-top-navigation > button:first-child > svg { transform: rotate(90deg); } .page-index__card-wrapper-top-navigation > button:last-child > svg { transform: rotate(-90deg); } .page-index__card-wrapper-top-navigation > button > svg { width: 1rem; height: auto; color: var(--color-gold-500); } .page-index__card-swiper { width: 100vw; height: auto; display: flex; flex-direction: column; gap: 3.2rem; padding: 0 10rem !important; margin-left: -10rem !important; } @media (max-width: 1099.98px) { .page-index__card-swiper { display: flex !important; padding: 0 !important; margin-left: -2.4rem !important; } } .page-index__card-swiper-wrapper { width: 100%; height: auto; transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1) !important; } @media (max-width: 1099.98px) { .page-index__card-swiper-wrapper { padding: 0 2.4rem; overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; width: 100vw !important; max-width: 100vw !important; box-sizing: border-box !important; gap: 2.4rem; } .page-index__card-swiper-wrapper::-webkit-scrollbar { display: none; } } .page-index__card-swiper-wrapper.is-inview { animation: cardSwiper 1s cubic-bezier(0.25, 0.1, 0.25, 1); } @media (max-width: 1099.98px) { .page-index__card-swiper-wrapper.is-inview { animation: cardSwiperMobile 1s cubic-bezier(0.25, 0.1, 0.25, 1); } } @keyframes cardSwiper { from { gap: 6rem; transform: translateX(16rem); } to { gap: 0; transform: translateX(0); } } @keyframes cardSwiperMobile { from { gap: 6rem; transform: translateX(16rem); } to { gap: 2.4rem; transform: translateX(0); } } .page-index__card-swiper-item { position: relative; display: flex; flex-direction: column; padding: 3.2rem; background-color: #122D2C; border-radius: 0.5rem; overflow: hidden; transition: background-color 0.6s ease; transition-property: transform, background-color !important; } .page-index__card-swiper-item::before { width: 30rem; height: 30rem; content: ""; border-radius: 50%; background: radial-gradient(rgba(181, 192, 107, 0.5) 0%, rgba(10, 27, 25, 0.5) 100%), #1E1C18; position: absolute; top: var(--mouseY); left: var(--mouseX); transform: translate(-50%, -50%); z-index: -1; filter: blur(80px); opacity: 0; transition: opacity 0.6s ease; } @media (max-width: 1099.98px) { .page-index__card-swiper-item { width: 80vw !important; } .page-index__card-swiper-item::before { width: 120vw; height: 120vw; position: absolute; bottom: 0; right: 0; transform: translate(50%, 50%); } .page-index__card-swiper-item.-active { background-color: rgba(18, 45, 44, 0.5); } .page-index__card-swiper-item.-active::before { opacity: 1; } } @media (min-width: 1100px) { .page-index__card-swiper-item:hover { background-color: rgba(18, 45, 44, 0.5); } .page-index__card-swiper-item:hover::before { opacity: 1; } } .page-index__card-swiper-item > span { font-size: 1.5rem; font-weight: 500; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gold-500); } .page-index__card-swiper-item > h3 { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-white); margin-bottom: 2rem; } body.language-en .page-index__card-swiper-item > h3, .page-index__card-swiper-item > h3.-en { font-size: 2.4rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__card-swiper-item > p { color: var(--color-gray-300); } .page-index__card-progress { width: 60vw; height: 0.1rem; display: flex; justify-content: space-between; align-items: center; background-color: rgba(165, 164, 169, 0.5); } @media (min-width: 1100px) { .page-index__card-progress { display: none; } } .page-index__card-progress > span { background-color: var(--color-gold-500); height: 100%; width: calc(var(--index-card-final-width, 0.2) * 100%); min-width: calc(var(--index-card-base-width, 0.2) * 100%); } .page-index__service { width: 100%; height: auto; display: flex; justify-content: center; padding: 11rem 11.4rem 11.4rem; background-color: var(--color-gray-100); } @media (max-width: 1099.98px) { .page-index__service { padding: 12rem 2.4rem; background-color: var(--color-white); } } .page-index__service-wrapper { width: 100%; height: auto; display: flex; flex-direction: column; gap: 4.8rem; } @media (max-width: 1099.98px) { .page-index__service-wrapper { gap: 2.4rem; } } .page-index__service-wrapper > h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gold-500); transform: translateY(3rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__service-wrapper > h2, .page-index__service-wrapper > h2.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__service-wrapper > h2.is-inview { transform: translateY(0); opacity: 1; } .page-index__service-main { width: 100%; height: auto; display: flex; gap: 10rem; } @media (max-width: 1099.98px) { .page-index__service-main { flex-direction: column; } } .page-index__service-main-navigation { width: 25%; height: auto; display: flex; flex-direction: column; gap: 2rem; transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } @media (max-width: 1099.98px) { .page-index__service-main-navigation { width: 100%; height: auto; } } .page-index__service-main-navigation.is-inview { transform: translateY(0); opacity: 1; } .page-index__service-main-navigation-item { display: flex; flex-direction: column; gap: 0; padding-bottom: 2rem; cursor: pointer; transition: gap 0.3s ease; } @media (min-width: 1100px) { .page-index__service-main-navigation-item:hover svg { transform: translateX(0); opacity: 1; } } .page-index__service-main-navigation-item.-active { gap: 0.8rem; } @media (max-width: 1099.98px) { .page-index__service-main-navigation-item.-active { gap: 2.4rem; } } .page-index__service-main-navigation-item.-active .page-index__service-main-navigation-item-content { height: auto; } .page-index__service-main-navigation-item.-active span { transform: translateX(0); opacity: 1; color: var(--color-gold-500); } @media (max-width: 1099.98px) { .page-index__service-main-navigation-item.-active span { transform: translateX(0) rotate(180deg); } } .page-index__service-main-navigation-item:not(:last-child) { border-bottom: 1px solid var(--color-gray-500); } .page-index__service-main-navigation-item-title { display: flex; align-items: center; justify-content: space-between; color: var(--color-gray-900); } .page-index__service-main-navigation-item-title > h3 { font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__service-main-navigation-item-title > h3, .page-index__service-main-navigation-item-title > h3.-en { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__service-main-navigation-item-title > span { width: 2.4rem; height: auto; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; transform: translateX(-100%); } .page-index__service-main-navigation-item-title > span.-mobile { display: none; } @media (max-width: 1099.98px) { .page-index__service-main-navigation-item-title > span { width: 1.2rem; height: auto; opacity: 1; transform: translateX(0); } .page-index__service-main-navigation-item-title > span.-mobile { display: block; color: var(--color-gray-900); } .page-index__service-main-navigation-item-title > span.-desktop { display: none; } } .page-index__service-main-navigation-item-title > span > svg { width: 100%; height: auto; } .page-index__service-main-navigation-item-content { display: flex; flex-direction: column; gap: 1.6rem; height: 0; transition: height 0.6s ease; overflow: hidden; } .page-index__service-main-navigation-item-content > figure { display: none; } @media (max-width: 1099.98px) { .page-index__service-main-navigation-item-content > figure { width: 100%; height: auto; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 0.5rem; } .page-index__service-main-navigation-item-content > figure::before { content: ""; display: block; padding-bottom: 62%; } .page-index__service-main-navigation-item-content > figure > img { width: 100%; height: 100%; position: absolute; object-fit: cover; } } .page-index__service-main-navigation-item-content > h4 { display: none; } @media (max-width: 1099.98px) { .page-index__service-main-navigation-item-content > h4 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: block; color: var(--color-gray-900); } body.language-en .page-index__service-main-navigation-item-content > h4, .page-index__service-main-navigation-item-content > h4.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__service-main-navigation-item-content > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-700); } body.language-en .page-index__service-main-navigation-item-content > p, .page-index__service-main-navigation-item-content > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__service-main-navigation-item-content > p.-mobile { display: none; } @media (max-width: 1099.98px) { .page-index__service-main-navigation-item-content > p { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; } body.language-en .page-index__service-main-navigation-item-content > p, .page-index__service-main-navigation-item-content > p.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__service-main-navigation-item-content > p.-mobile { display: block; } .page-index__service-main-navigation-item-content > p.-desktop { display: none; } } .page-index__service-main-content { position: relative; flex: 1; } @media (max-width: 1099.98px) { .page-index__service-main-content { display: none; } } .page-index__service-main-content-item { position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; gap: 3.6rem; display: flex; flex-direction: column; } .page-index__service-main-content-item.-active { animation: serviceContentItemActive 1s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 1; pointer-events: auto; } @keyframes serviceContentItemActive { from { opacity: 0; transform: translateY(6rem); } to { opacity: 1; transform: translateY(0); } } .page-index__service-main-content-item-img { display: flex; align-items: flex-start; gap: 2rem; } .page-index__service-main-content-item-img > figure { position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 0.5rem; } .page-index__service-main-content-item-img > figure::before { content: ""; display: block; padding-bottom: 62%; } .page-index__service-main-content-item-img > figure:first-child { width: 60%; height: auto; } .page-index__service-main-content-item-img > figure:last-child { flex: 1; } .page-index__service-main-content-item-img > figure > img { width: 100%; height: 100%; position: absolute; object-fit: cover; } .page-index__service-main-content-item-content { width: 60%; height: auto; display: flex; flex-direction: column; gap: 2rem; } @media (max-width: 1099.98px) { .page-index__service-main-content-item-content { width: 100%; height: auto; } } .page-index__service-main-content-item-content > h3 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gray-900); } body.language-en .page-index__service-main-content-item-content > h3, .page-index__service-main-content-item-content > h3.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__service-main-content-item-content > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-700); white-space: pre-line; } body.language-en .page-index__service-main-content-item-content > p, .page-index__service-main-content-item-content > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__news { width: 100%; height: auto; display: flex; justify-content: center; padding: 12rem 10rem; background-color: var(--color-white); } @media (max-width: 1099.98px) { .page-index__news { padding: 0 2.4rem 6rem; background-color: var(--color-gray-100); } } .page-index__news-wrapper { width: 100%; height: auto; display: flex; flex-direction: column; gap: 3.6rem; } @media (max-width: 1099.98px) { .page-index__news-wrapper { gap: 0; } } .page-index__news-banner { width: 100%; height: auto; position: relative; } .page-index__news-banner-img { width: 100%; height: auto; position: relative; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 1rem; } .page-index__news-banner-img::before { content: ""; display: block; padding-bottom: 35%; } @media (max-width: 1099.98px) { .page-index__news-banner-img { width: 100vw; height: auto; margin-left: -2.4rem; border-radius: 0; } .page-index__news-banner-img::before { content: ""; display: block; padding-bottom: 89%; } } .page-index__news-banner-img > figure { width: 120%; height: 120%; position: absolute; display: flex; justify-content: center; align-items: center; overflow: hidden; } .page-index__news-banner-img > figure > img { width: 100%; height: 100%; object-fit: cover; } .page-index__news-banner-content { width: 46%; height: auto; position: absolute; bottom: 4.8rem; left: 4.8rem; display: flex; flex-direction: column; gap: 1.2rem; color: var(--color-gold-900); } @media (max-width: 1099.98px) { .page-index__news-banner-content { width: calc(100vw - 4.8rem); height: auto; left: 50%; bottom: 2rem; transform: translateX(-50%); text-align: center; } } .page-index__news-banner-content > p { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__news-banner-content > p, .page-index__news-banner-content > p.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__news-banner-content > p { display: none; } } .page-index__news-banner-content > h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; transform: translateY(3rem); opacity: 0; transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); } body.language-en .page-index__news-banner-content > h2, .page-index__news-banner-content > h2.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__news-banner-content > h2 { font-size: 1.8rem; line-height: 2.8rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__news-banner-content > h2, .page-index__news-banner-content > h2.-en { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__news-banner-content > h2.is-inview { transform: translateY(0); opacity: 1; } .page-index__news-content { width: 100%; height: auto; display: flex; gap: 25.3rem; padding: 0 7.2rem; } @media (max-width: 1099.98px) { .page-index__news-content { padding: 0; gap: 0; flex-direction: column; } } .page-index__news-content-categories { display: flex; flex-direction: column; gap: 2.4rem; } @media (max-width: 1099.98px) { .page-index__news-content-categories { width: 100vw; height: auto; flex-direction: row; justify-content: center; padding: 1.2rem 0; margin-left: -2.4rem; border-top: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--color-gray-300); } } .page-index__news-content-categories > button { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; display: flex; align-items: center; gap: 1rem; color: var(--color-gray-900); transition: color 0.3s ease; } body.language-en .page-index__news-content-categories > button, .page-index__news-content-categories > button.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (min-width: 1100px) { .page-index__news-content-categories > button:hover { color: var(--color-gold-500); } } @media (max-width: 1099.98px) { .page-index__news-content-categories > button { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; flex-direction: column; gap: 0.4rem; } body.language-en .page-index__news-content-categories > button, .page-index__news-content-categories > button.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__news-content-categories > button::after { width: 0.5rem; height: 0.5rem; content: ""; display: inline-block; border-radius: 50%; background-color: var(--color-gold-500); opacity: 0; transform: translateX(-1rem); transition: opacity 0.3s ease, transform 0.3s ease; } @media (max-width: 1099.98px) { .page-index__news-content-categories > button::after { transform: translate(0, 1rem); } } .page-index__news-content-categories > button.-active { color: var(--color-gold-500); } .page-index__news-content-categories > button.-active::after { opacity: 1; transform: translateX(0); } .page-index__news-content-list { position: relative; flex: 1; } @media (max-width: 1099.98px) { .page-index__news-content-list { flex: 0 0 auto; } } .page-index__news-content-list-wrapper { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; flex-direction: column; gap: 2rem; } @media (max-width: 1099.98px) { .page-index__news-content-list-wrapper { padding: 2rem 0; gap: 1.2rem; } } .page-index__news-content-list-wrapper.-active { opacity: 1; pointer-events: auto; } .page-index__news-content-list-wrapper > a { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; gap: 1.4rem; color: var(--color-gold-500); margin-left: auto; transition: color 0.3s ease; } body.language-en .page-index__news-content-list-wrapper > a, .page-index__news-content-list-wrapper > a.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (min-width: 1100px) { .page-index__news-content-list-wrapper > a:hover { color: var(--color-gold-300); } .page-index__news-content-list-wrapper > a:hover > span { border-color: var(--color-gold-300); } } .page-index__news-content-list-wrapper > a > span { width: 2rem; height: auto; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid var(--color-gold-500); transition: border-color 0.3s ease; } .page-index__news-content-list-wrapper > a > span > svg { width: 0.9rem; height: auto; transform: rotate(-90deg); } .page-index__news-content-list-item { width: 100%; height: auto; display: flex; gap: 3.2rem; padding-right: 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-gray-300); cursor: pointer; } @media (min-width: 1100px) { .page-index__news-content-list-item:hover { border-color: var(--color-gray-100); } .page-index__news-content-list-item:hover > p { color: var(--color-gold-500); } } @media (max-width: 1099.98px) { .page-index__news-content-list-item { width: auto; height: auto; padding: 0 0 1.2rem; gap: 0.4rem; flex-direction: column; } } @media (max-width: 1099.98px) { .page-index__news-content-list-item.-active > p { color: var(--color-gold-500); } } .page-index__news-content-list-item.-active > p:last-child { height: auto; } .page-index__news-content-list-item > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-500); transition: color 0.3s ease; white-space: pre-line; transition: height 0.6s ease; } body.language-en .page-index__news-content-list-item > p, .page-index__news-content-list-item > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__news-content-list-item > p { color: var(--color-gold-500); } } .page-index__news-content-list-item > p:last-child { height: 0; overflow: hidden; } @media (max-width: 1099.98px) { .page-index__news-content-list-item > p:last-child { display: none; } } .page-index__news-content-list-item > h3 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-index__news-content-list-item > h3, .page-index__news-content-list-item > h3.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__news-popup { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding-top: 12rem; padding-bottom: 12rem; cursor: pointer; z-index: 2000; overflow-y: auto; } @media (max-width: 1099.98px) { .page-index__news-popup { width: 100%; height: 100dvh; padding-top: 9.2rem; padding-bottom: 0; background-color: transparent; transform: translateY(100%); transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } } .page-index__news-popup.-active { opacity: 1; pointer-events: auto; } @media (max-width: 1099.98px) { .page-index__news-popup.-active { transform: translateY(0); } } .page-index__news-popup-wrapper { width: 70%; height: auto; display: flex; flex-direction: column; gap: 3.6rem; padding: 4.6rem 5.5rem; background-color: var(--color-white); border-radius: 1rem; cursor: default; } @media (max-width: 1099.98px) { .page-index__news-popup-wrapper { width: 100%; height: auto; position: relative; padding: 4.8rem 2.4rem; box-shadow: 0px -4px 14.5px 0px rgba(0, 0, 0, 0.25); gap: 1.2rem; } } .page-index__news-popup-title { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 3.6rem; border-bottom: 1px solid var(--color-gray-300); } @media (max-width: 1099.98px) { .page-index__news-popup-title { position: sticky; top: -4.4rem; background-color: var(--color-white); } .page-index__news-popup-title::before { width: 100%; height: 4.8rem; content: ""; position: absolute; top: 0; left: 0; transform: translateY(-100%); display: block; background-color: var(--color-white); } } .page-index__news-popup-title-text { display: flex; flex-direction: column; color: var(--color-gray-900); } @media (max-width: 1099.98px) { .page-index__news-popup-title-text { gap: 1.2rem; } } .page-index__news-popup-title-text > h3 { font-size: 3.2rem; line-height: 4.4rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__news-popup-title-text > h3, .page-index__news-popup-title-text > h3.-en { font-size: 4.8rem; line-height: 5.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__news-popup-title-text > h3 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__news-popup-title-text > h3, .page-index__news-popup-title-text > h3.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__news-popup-title-text > h4 { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; } body.language-en .page-index__news-popup-title-text > h4, .page-index__news-popup-title-text > h4.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__news-popup-title-text > h4 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-index__news-popup-title-text > h4, .page-index__news-popup-title-text > h4.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__news-popup-title-close { width: 2.4rem; height: auto; display: flex; transition: transform 0.3s ease; } @media (min-width: 1100px) { .page-index__news-popup-title-close:hover { transform: scale(1.2); } } @media (max-width: 1099.98px) { .page-index__news-popup-title-close { position: absolute; top: -3.2rem; right: -0.9rem; } } .page-index__news-popup-main { width: 100%; height: auto; display: flex; gap: 10rem; } @media (max-width: 1099.98px) { .page-index__news-popup-main { flex-direction: column; gap: 2.4rem; } } .page-index__news-popup-main-left { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-700); } body.language-en .page-index__news-popup-main-left, .page-index__news-popup-main-left.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__news-popup-main-left { display: flex; gap: 1.6rem; } } .page-index__news-popup-main-content { flex: 1; display: flex; flex-direction: column; gap: 2rem; white-space: pre-line; } .page-index__news-popup-main-content > figure { width: 100%; height: auto; display: flex; flex-direction: column; gap: 1.2rem; } .page-index__news-popup-main-content > figure > figcaption { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; color: var(--color-gray-700); } body.language-en .page-index__news-popup-main-content > figure > figcaption, .page-index__news-popup-main-content > figure > figcaption.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__news-popup-main-content > div { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-900); white-space: pre-line; } body.language-en .page-index__news-popup-main-content > div, .page-index__news-popup-main-content > div.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__news-popup-main-content > div h1 { display: none; } .page-index__news-popup-main-content > div h2 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: bold; margin-bottom: 1.6rem; } body.language-en .page-index__news-popup-main-content > div h2, .page-index__news-popup-main-content > div h2.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-index__news-popup-main-content > div h3 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: bold; margin-bottom: 1.6rem; } body.language-en .page-index__news-popup-main-content > div h3, .page-index__news-popup-main-content > div h3.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-index__news-popup-main-content > div h4, .page-index__news-popup-main-content > div h5, .page-index__news-popup-main-content > div h6 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: bold; margin-bottom: 1.6rem; } body.language-en .page-index__news-popup-main-content > div h4, .page-index__news-popup-main-content > div h4.-en, body.language-en .page-index__news-popup-main-content > div h5, .page-index__news-popup-main-content > div h5.-en, body.language-en .page-index__news-popup-main-content > div h6, .page-index__news-popup-main-content > div h6.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-index__news-popup-main-content > div p { margin-bottom: 3.2rem; } @media (max-width: 1099.98px) { .page-index__news-popup-main-content > div p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-index__news-popup-main-content > div p, .page-index__news-popup-main-content > div p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__news-popup-main-content > div p:has(img.aligncenter) { align-self: center; } .page-index__news-popup-main-content > div p:has(img.alignright) { align-self: flex-end; } .page-index__news-popup-main-content > div strong { font-weight: 700; } .page-index__news-popup-main-content > div em { font-style: italic; } .page-index__news-popup-main-content > div blockquote { display: flex; flex-direction: column; gap: 1.6rem; padding-left: 3.2rem; margin-bottom: 3.2rem; } .page-index__news-popup-main-content > div blockquote > p { margin-bottom: 0; } .page-index__news-popup-main-content > div ul { list-style-type: disc; } .page-index__news-popup-main-content > div ul li::marker { font-size: 2.4rem; } .page-index__news-popup-main-content > div ol { list-style-type: decimal; } .page-index__news-popup-main-content > div ol, .page-index__news-popup-main-content > div ul { margin-inline-start: 2rem; margin-bottom: 3.2rem; } .page-index__news-popup-main-content > div hr { margin-block-start: 2rem; margin-block-end: 4rem; } @media (max-width: 767.98px) { .page-index__news-popup-main-content > div hr { margin-block-start: 1rem; margin-block-end: 1rem; } } .page-index__news-popup-main-content > div table { width: 100%; border-collapse: collapse; } .page-index__news-popup-main-content > div table th { font-weight: bold; padding: 10px; } .page-index__news-popup-main-content > div table td { padding: 10px; } .page-index__news-popup-main-content > div a { position: relative; } .page-index__news-popup-main-content > div a::after { content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background-color: #000; opacity: 0.4; transition: opacity 0.3s; } .page-index__news-popup-main-content > div a:hover::after { opacity: 1; } .page-index__news-popup-main-content > span { width: 100%; height: 0.1rem; background-color: var(--color-gray-300); } .page-index__news-popup-main-content > h6 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-700); white-space: pre-line; } body.language-en .page-index__news-popup-main-content > h6, .page-index__news-popup-main-content > h6.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__news-popup-main-content > button { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; align-items: center; gap: 1.6rem; margin-left: auto; color: #C0A36B; transition: color 0.3s ease; } body.language-en .page-index__news-popup-main-content > button, .page-index__news-popup-main-content > button.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__news-popup-main-content > button > svg { width: 2rem; height: 2rem; } @media (min-width: 1100px) { .page-index__news-popup-main-content > button:hover { color: var(--color-gold-500); } } .page-index__award { width: 100%; height: auto; display: flex; padding: 12rem 9.8rem; gap: 10rem; border-top: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--color-gray-300); background-color: var(--color-white); } @media (max-width: 1099.98px) { .page-index__award { padding: 10rem 2.4rem 8rem; } } .page-index__award-wrapper { width: 100%; height: auto; position: relative; display: flex; align-items: flex-start; gap: 4.6rem; } @media (max-width: 1099.98px) { .page-index__award-wrapper { flex-direction: column; gap: 3.6rem; } } .page-index__award-sticky { position: relative; display: flex; align-items: flex-start; gap: 10rem; } .page-index__award-sticky-title { width: 48%; height: auto; display: flex; flex-direction: column; gap: 1.2rem; transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } .page-index__award-sticky-title.is-inview { transform: translateY(0); opacity: 1; } @media (max-width: 1099.98px) { .page-index__award-sticky-title { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__award-sticky-title, .page-index__award-sticky-title.-en { font-size: 2.4rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } @media (max-width: 1099.98px) { .page-index__award-sticky-title { width: 100%; height: auto; gap: 1rem; } } .page-index__award-sticky-title > h2 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gold-500); } body.language-en .page-index__award-sticky-title > h2, .page-index__award-sticky-title > h2.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__award-sticky-title > h2 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-index__award-sticky-title > h2, .page-index__award-sticky-title > h2.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__award-sticky-title > h3 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gray-800); } body.language-en .page-index__award-sticky-title > h3, .page-index__award-sticky-title > h3.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__award-sticky-title > a { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; gap: 1.4rem; align-items: center; color: var(--color-gold-500); transition: color 0.3s ease; margin-top: 0.8rem; } body.language-en .page-index__award-sticky-title > a, .page-index__award-sticky-title > a.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (min-width: 1100px) { .page-index__award-sticky-title > a:hover { color: var(--color-gold-300); } } .page-index__award-sticky-title > a > span { width: 2rem; height: 2rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid var(--color-gold-500); } .page-index__award-sticky-title > a > span > svg { width: 0.8rem; height: auto; transform: rotate(-90deg); margin-left: 0.2rem; } .page-index__award-sticky-img { flex: 1; } @media (max-width: 1099.98px) { .page-index__award-sticky-img { display: none; } } .page-index__award-sticky-img > figure { width: 100%; height: auto; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; overflow: hidden; } .page-index__award-sticky-img > figure::before { content: ""; display: block; padding-bottom: 106%; } .page-index__award-sticky-img > figure > img { width: 100%; height: 100%; position: absolute; object-fit: cover; transition: opacity 0.3s ease; opacity: 0; } .page-index__award-sticky-img > figure > img.-active { opacity: 1; } .page-index__award-list { flex: 1; display: flex; flex-direction: column; gap: 1.2rem; min-width: 30vw; } @media (max-width: 1099.98px) { .page-index__award-list { width: 100vw; height: auto; margin-left: -2.4rem; flex-direction: row; border-top: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--color-gray-300); padding: 1.2rem 2.4rem; gap: 3.6rem; overflow-x: auto; scrollbar-width: none; } .page-index__award-list::-webkit-scrollbar { display: none; } } .page-index__award-list-item { width: 100%; height: auto; display: flex; gap: 3.2rem; padding-right: 1.6rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--color-gray-300); cursor: pointer; transition: border-color 0.3s ease; } @media (min-width: 1100px) { .page-index__award-list-item:hover { border-color: var(--color-gray-100); } .page-index__award-list-item:hover > p { color: var(--color-gold-500); } } @media (max-width: 1099.98px) { .page-index__award-list-item { width: auto; height: auto; border-bottom: none; padding: 0; gap: 0; flex-direction: column; } } @media (max-width: 1099.98px) { .page-index__award-list-item.-active > p { color: var(--color-gold-500); } .page-index__award-list-item.-active > p::after { opacity: 1; transform: translateY(0); } } .page-index__award-list-item.-active > .page-index__award-list-item-awards { height: auto; } .page-index__award-list-item > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-500); transition: color 0.3s ease; white-space: pre-line; transition: height 0.6s ease; } body.language-en .page-index__award-list-item > p, .page-index__award-list-item > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__award-list-item > p { display: flex; flex-direction: column; align-items: center; } .page-index__award-list-item > p::after { width: 0.5rem; height: 0.5rem; content: ""; background-color: var(--color-gold-500); border-radius: 50%; opacity: 0; transform: translateY(1rem); transition: opacity 0.3s ease, transform 0.3s ease; } } .page-index__award-list-item-awards { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; flex-direction: column; gap: 1.2rem; height: 0; transition: height 0.6s ease; overflow: hidden; } body.language-en .page-index__award-list-item-awards, .page-index__award-list-item-awards.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__award-list-item-awards { display: none; } } .page-index__award-list-item-awards-item { display: flex; flex-direction: column; color: var(--color-gray-500); transition: color 0.3s ease; } .page-index__award-list-item-awards-item > h4 { font-weight: bold; } @media (min-width: 1100px) { .page-index__award-list-item-awards-item:hover { color: var(--color-gold-500); } } .page-index__award-mobile { width: 100%; height: auto; display: none; } @media (max-width: 1099.98px) { .page-index__award-mobile { display: flex; justify-content: center; position: relative; transition: height 0.3s ease; } } .page-index__award-mobile-item { width: 100%; height: auto; position: absolute; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; gap: 3.6rem; } .page-index__award-mobile-item.-active { opacity: 1; pointer-events: auto; } .page-index__award-mobile-item > figure { width: 100%; height: auto; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 0.5rem; overflow: hidden; margin: 0 auto; } .page-index__award-mobile-item > figure::before { content: ""; display: block; padding-bottom: 78%; } .page-index__award-mobile-item > figure > img { width: 100%; height: 100%; position: absolute; object-fit: cover; } .page-index__award-mobile-item > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: #C0A36B; white-space: pre-line; text-align: center; } body.language-en .page-index__award-mobile-item > p, .page-index__award-mobile-item > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__exclusive { width: 100%; height: 200vh; position: relative; display: flex; flex-direction: column; justify-content: flex-end; background-color: var(--color-brand-1); } .page-index__exclusive-img { width: 100%; height: 200vh; position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; } .page-index__exclusive-img-sticky { width: 100vw; height: 100vh; position: sticky; top: 0; display: flex; justify-content: center; align-items: center; overflow: hidden; } .page-index__exclusive-img-sticky > figure { position: absolute; } .page-index__exclusive-img-sticky > figure:nth-child(1) { width: 37rem; height: auto; opacity: calc(var(--progress)); transform: translate(calc(var(--progress) * -20vw), calc(var(--progress) * -15vw)); z-index: 6; } @media (max-width: 1099.98px) { .page-index__exclusive-img-sticky > figure:nth-child(1) { width: 18.3rem; height: auto; transform: translate(calc(var(--progress) * -32vw), calc(var(--progress) * -80vw)); } } .page-index__exclusive-img-sticky > figure:nth-child(2) { width: 34.6rem; height: auto; opacity: calc(var(--progress)); transform: translate(calc(var(--progress) * 36vw), calc(var(--progress) * -13vw)); z-index: 5; } @media (max-width: 1099.98px) { .page-index__exclusive-img-sticky > figure:nth-child(2) { width: 13.5rem; height: auto; transform: translate(calc(var(--progress) * 32.5vw), calc(var(--progress) * -95vw)); } } .page-index__exclusive-img-sticky > figure:nth-child(3) { width: 20.5rem; height: auto; opacity: calc(var(--progress) * 0.6); transform: translate(calc(var(--progress) * -35vw), 0); filter: blur(15px); z-index: 4; } @media (max-width: 1099.98px) { .page-index__exclusive-img-sticky > figure:nth-child(3) { width: 12.7rem; height: auto; transform: translate(calc(var(--progress) * -28vw), calc(var(--progress) * -55vw)); } } .page-index__exclusive-img-sticky > figure:nth-child(4) { width: 17.57em; height: auto; opacity: calc(var(--progress) * 0.3); transform: translate(calc(var(--progress) * 20vw), calc(var(--progress) * 5vw)); filter: blur(15px); z-index: 3; } @media (max-width: 1099.98px) { .page-index__exclusive-img-sticky > figure:nth-child(4) { width: 11rem; height: auto; transform: translate(calc(var(--progress) * 32vw), calc(var(--progress) * 60vw)); } } .page-index__exclusive-img-sticky > figure:nth-child(5) { width: 18.5rem; height: auto; opacity: calc(var(--progress)); transform: translate(calc(var(--progress) * -16vw), calc(var(--progress) * 20vw)); z-index: 2; } @media (max-width: 1099.98px) { .page-index__exclusive-img-sticky > figure:nth-child(5) { width: 11.5rem; height: auto; transform: translate(calc(var(--progress) * -40vw), calc(var(--progress) * 70vw)); } } .page-index__exclusive-img-sticky > figure:nth-child(6) { width: 22.1rem; height: auto; opacity: calc(var(--progress)); transform: translate(calc(var(--progress) * 20vw), calc(var(--progress) * 18vw)); z-index: 1; } @media (max-width: 1099.98px) { .page-index__exclusive-img-sticky > figure:nth-child(6) { width: 13.6rem; height: auto; transform: translate(calc(var(--progress) * 20vw), calc(var(--progress) * 90vw)); } } .page-index__exclusive-wrapper { width: 100%; height: 100vh; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; z-index: 1; } .page-index__exclusive-wrapper > h3 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-gold-500); } body.language-en .page-index__exclusive-wrapper > h3, .page-index__exclusive-wrapper > h3.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__exclusive-wrapper > h3 { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; color: #C0A36B; } body.language-en .page-index__exclusive-wrapper > h3, .page-index__exclusive-wrapper > h3.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } } .page-index__exclusive-title { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; color: var(--color-gray-300); transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } .page-index__exclusive-title.is-inview { transform: translateY(0); opacity: 1; } @media (max-width: 1099.98px) { .page-index__exclusive-title { gap: 0.4rem; } } .page-index__exclusive-title > h2 { font-size: 3.6rem; line-height: 5.2rem; font-weight: 500; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__exclusive-title > h2, .page-index__exclusive-title > h2.-en { font-size: 4rem; line-height: 1.5rem; font-weight: 500; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__exclusive-title > h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; text-align: center; white-space: pre-line; } body.language-en .page-index__exclusive-title > h2, .page-index__exclusive-title > h2.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__exclusive-title > p { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; } body.language-en .page-index__exclusive-title > p, .page-index__exclusive-title > p.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-index__exclusive-title > p { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; text-align: center; white-space: pre-line; } body.language-en .page-index__exclusive-title > p, .page-index__exclusive-title > p.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__contact { width: 100%; height: auto; position: relative; display: flex; justify-content: center; padding: 12rem 10rem; background-color: #1A2B27; overflow: hidden; } @media (max-width: 1099.98px) { .page-index__contact { width: 100vw; height: 60dvh; padding: 6rem 2.4rem; align-items: center; } } .page-index__contact::before { width: 60rem; height: 60rem; content: ""; border-radius: 50%; background: radial-gradient(rgba(181, 192, 107, 0.5) 0%, rgba(10, 27, 25, 0.5) 100%), #1E1C18; position: absolute; top: var(--mouseY); left: var(--mouseX); transform: translate(-50%, -50%); z-index: 0; filter: blur(80px); } @media (max-width: 1099.98px) { .page-index__contact::before { top: auto; left: auto; transform: translate(50%, 50%); bottom: 0; right: 0; } } .page-index__contact-wrapper { width: 100%; height: auto; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3.6rem; z-index: 1; } @media (max-width: 1099.98px) { .page-index__contact-wrapper { gap: 2.4rem; align-items: center; } } .page-index__contact-wrapper > a { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; justify-content: center; align-items: center; padding: 1.5rem 1.2rem; color: var(--color-white); background-color: var(--color-gold-500); border-radius: 0.3rem; min-width: 11.2rem; transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), background-color 0.3s ease; opacity: 0; } body.language-en .page-index__contact-wrapper > a, .page-index__contact-wrapper > a.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__contact-wrapper > a.is-inview { transform: translateY(0); opacity: 1; } @media (min-width: 1100px) { .page-index__contact-wrapper > a:hover { background-color: var(--color-gold-300); } } .page-index__contact-title { display: flex; flex-direction: column; gap: 0.8rem; } @media (max-width: 1099.98px) { .page-index__contact-title { align-items: center; gap: 1rem; } } .page-index__contact-title > h2 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: var(--color-white); } body.language-en .page-index__contact-title > h2, .page-index__contact-title > h2.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-index__contact-title > h2 { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-index__contact-title > h2, .page-index__contact-title > h2.-en { font-size: 2.4rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-index__contact-title > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-100); transform: translateY(6rem); transition: transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1), opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1); opacity: 0; } body.language-en .page-index__contact-title > p, .page-index__contact-title > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-index__contact-title > p.is-inview { transform: translateY(0); opacity: 1; } @media (max-width: 1099.98px) { .page-index__contact-title > p { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; text-align: center; } body.language-en .page-index__contact-title > p, .page-index__contact-title > p.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-news { width: 100%; height: auto; position: relative; display: flex; flex-direction: column; align-items: center; padding: 14.6rem 10rem 12rem; z-index: 1; min-height: 100vh; background-color: var(--color-white); } @media (max-width: 1099.98px) { .page-news { padding: 8.4rem 0 12rem; } } .page-news__wrapper { width: 100%; height: auto; display: flex; flex-direction: column; position: relative; gap: 4.8rem; } @media (max-width: 1099.98px) { .page-news__wrapper { gap: 2.4rem; } } .page-news__wrapper-breadcrumb { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; display: flex; align-items: center; gap: 1.6rem; } body.language-en .page-news__wrapper-breadcrumb, .page-news__wrapper-breadcrumb.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-news__wrapper-breadcrumb { width: 100%; height: auto; padding: 0 2.4rem; } } .page-news__wrapper-content { display: flex; flex-direction: column; align-items: center; gap: 4.8rem; padding: 0 17rem; } @media (max-width: 1099.98px) { .page-news__wrapper-content { padding: 0; gap: 2.4rem; } } .page-news__wrapper-back { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: 1.2rem; color: #C0A36B; transition: color 0.3s ease; } body.language-en .page-news__wrapper-back, .page-news__wrapper-back.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (min-width: 1100px) { .page-news__wrapper-back:hover { color: var(--color-gold-300); } } @media (max-width: 1099.98px) { .page-news__wrapper-back { right: 2.4rem; } } .page-news__wrapper-back > span { width: 1.2rem; height: auto; display: flex; justify-content: center; align-content: inherit; } .page-news__wrapper-back > span > svg { transform: rotate(-90deg); } .page-news__category { width: 100%; height: auto; display: flex; justify-content: center; } @media (max-width: 1099.98px) { .page-news__category { border-top: 1px solid var(--color-gray-300); border-bottom: 1px solid var(--color-gray-300); padding: 1.2rem 2.4rem; gap: 2.4rem; } } .page-news__category > button { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; padding: 0 4.5rem 1.2rem; border-bottom: 3px solid var(--color-gray-200); transition: border-color 0.3s ease; } body.language-en .page-news__category > button, .page-news__category > button.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-news__category > button.-active { border-color: #C0A36B; } @media (max-width: 1099.98px) { .page-news__category > button.-active { color: #C0A36B; } .page-news__category > button.-active::after { opacity: 1; transform: translateY(0); } } @media (min-width: 1100px) { .page-news__category > button:hover { border-color: #C0A36B; } } @media (max-width: 1099.98px) { .page-news__category > button { display: flex; flex-direction: column; align-items: center; border-bottom: none; padding: 0; } .page-news__category > button::after { width: 0.5rem; height: 0.5rem; content: ""; border-radius: 50%; background-color: #C0A36B; opacity: 0; transform: translateY(1rem); transition: opacity 0.3s ease, transform 0.3s ease; } } .page-news__list { width: 100%; height: auto; position: relative; } .page-news__list-wrapper { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; flex-direction: column; gap: 2rem; } @media (max-width: 1099.98px) { .page-news__list-wrapper { padding: 0 2.4rem; gap: 1.2rem; } } .page-news__list-wrapper.-active { opacity: 1; pointer-events: auto; } .page-news__list-wrapper > a { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; gap: 1.4rem; color: var(--color-gold-500); margin-left: auto; transition: color 0.3s ease; } body.language-en .page-news__list-wrapper > a, .page-news__list-wrapper > a.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (min-width: 1100px) { .page-news__list-wrapper > a:hover { color: var(--color-gold-300); } .page-news__list-wrapper > a:hover > span { border-color: var(--color-gold-300); } } .page-news__list-wrapper > a > span { width: 2rem; height: auto; display: flex; justify-content: center; align-items: center; border-radius: 50%; border: 1px solid var(--color-gold-500); transition: border-color 0.3s ease; } .page-news__list-wrapper > a > span > svg { width: 0.9rem; height: auto; transform: rotate(-90deg); } .page-news__list-item { width: 100%; height: auto; display: flex; gap: 3.2rem; padding-right: 1.6rem; padding-bottom: 2rem; border-bottom: 1px solid var(--color-gray-300); cursor: pointer; transition: border-color 0.3s ease; } @media (min-width: 1100px) { .page-news__list-item:hover { border-color: var(--color-gray-100); } .page-news__list-item:hover > h3 { color: var(--color-gray-700); } } @media (max-width: 1099.98px) { .page-news__list-item { width: auto; height: auto; gap: 0.4rem; flex-direction: column; } } @media (max-width: 1099.98px) { .page-news__list-item.-active > p { color: var(--color-gold-500); } } .page-news__list-item.-active > p:last-child { height: auto; } .page-news__list-item > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: #DEBF84; transition: color 0.3s ease; white-space: pre-line; transition: height 0.6s ease; } body.language-en .page-news__list-item > p, .page-news__list-item > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-news__list-item > h3 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; white-space: pre-line; transition: color 0.3s ease; } body.language-en .page-news__list-item > h3, .page-news__list-item > h3.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-news__list-item > h3 { white-space: wrap; } } .page-news__list-popup { width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: flex-start; background-color: rgba(0, 0, 0, 0.5); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding-top: 12rem; padding-bottom: 12rem; cursor: pointer; z-index: 2000; overflow-y: auto; } @media (max-width: 1099.98px) { .page-news__list-popup { width: 100%; height: 100dvh; padding-top: 9.2rem; padding-bottom: 0; background-color: transparent; transform: translateY(12rem); transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); } } .page-news__list-popup.-active { opacity: 1; pointer-events: auto; } @media (max-width: 1099.98px) { .page-news__list-popup.-active { transform: translateY(0); } } .page-news__list-popup-wrapper { width: 70%; height: auto; display: flex; flex-direction: column; gap: 3.6rem; padding: 4.6rem 5.5rem; background-color: var(--color-white); border-radius: 1rem; cursor: default; } @media (max-width: 1099.98px) { .page-news__list-popup-wrapper { width: 100%; height: auto; position: relative; padding: 4.8rem 2.4rem; box-shadow: 0px -4px 14.5px 0px rgba(0, 0, 0, 0.25); gap: 1.2rem; } } .page-news__list-popup-wrapper > span { width: 100%; height: 0.1rem; background-color: var(--color-gray-500); } .page-news__list-popup-title { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 3.6rem; border-bottom: 1px solid var(--color-gray-300); } @media (max-width: 1099.98px) { .page-news__list-popup-title { position: sticky; top: -4.4rem; background-color: var(--color-white); } .page-news__list-popup-title::before { width: 100%; height: 4.8rem; content: ""; position: absolute; top: 0; left: 0; transform: translateY(-100%); display: block; background-color: var(--color-white); } } .page-news__list-popup-title-text { display: flex; flex-direction: column; color: var(--color-gray-900); } @media (max-width: 1099.98px) { .page-news__list-popup-title-text { gap: 1.2rem; } } .page-news__list-popup-title-text > h3 { font-size: 3.2rem; line-height: 4.4rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-news__list-popup-title-text > h3, .page-news__list-popup-title-text > h3.-en { font-size: 4.8rem; line-height: 5.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-news__list-popup-title-text > h3 { font-size: 2.4rem; line-height: 3.6rem; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } body.language-en .page-news__list-popup-title-text > h3, .page-news__list-popup-title-text > h3.-en { font-size: 3rem; line-height: 3.9rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-news__list-popup-title-text > h4 { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; } body.language-en .page-news__list-popup-title-text > h4, .page-news__list-popup-title-text > h4.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-news__list-popup-title-text > h4 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-news__list-popup-title-text > h4, .page-news__list-popup-title-text > h4.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-news__list-popup-title-close { width: 2.4rem; height: auto; display: flex; transition: transform 0.3s ease; } @media (min-width: 1100px) { .page-news__list-popup-title-close:hover { transform: scale(1.2); } } @media (max-width: 1099.98px) { .page-news__list-popup-title-close { position: absolute; top: -3.2rem; right: -0.9rem; } } .page-news__list-popup-main { width: 100%; height: auto; display: flex; gap: 10rem; } @media (max-width: 1099.98px) { .page-news__list-popup-main { flex-direction: column; gap: 2.4rem; } } .page-news__list-popup-main-left { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-700); } body.language-en .page-news__list-popup-main-left, .page-news__list-popup-main-left.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-news__list-popup-main-left { display: flex; gap: 1.6rem; } } .page-news__list-popup-main-content { flex: 1; display: flex; flex-direction: column; gap: 2rem; white-space: pre-line; } .page-news__list-popup-main-content > figure { width: 100%; height: auto; display: flex; flex-direction: column; gap: 1.2rem; } .page-news__list-popup-main-content > figure > figcaption { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; color: var(--color-gray-700); } body.language-en .page-news__list-popup-main-content > figure > figcaption, .page-news__list-popup-main-content > figure > figcaption.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-news__list-popup-main-content > div { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-900); white-space: pre-line; } body.language-en .page-news__list-popup-main-content > div, .page-news__list-popup-main-content > div.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-news__list-popup-main-content > div h1 { display: none; } .page-news__list-popup-main-content > div h2 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: bold; margin-bottom: 1.6rem; } body.language-en .page-news__list-popup-main-content > div h2, .page-news__list-popup-main-content > div h2.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-news__list-popup-main-content > div h3 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: bold; margin-bottom: 1.6rem; } body.language-en .page-news__list-popup-main-content > div h3, .page-news__list-popup-main-content > div h3.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-news__list-popup-main-content > div h4, .page-news__list-popup-main-content > div h5, .page-news__list-popup-main-content > div h6 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; font-weight: bold; margin-bottom: 1.6rem; } body.language-en .page-news__list-popup-main-content > div h4, .page-news__list-popup-main-content > div h4.-en, body.language-en .page-news__list-popup-main-content > div h5, .page-news__list-popup-main-content > div h5.-en, body.language-en .page-news__list-popup-main-content > div h6, .page-news__list-popup-main-content > div h6.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-news__list-popup-main-content > div p { margin-bottom: 3.2rem; } @media (max-width: 1099.98px) { .page-news__list-popup-main-content > div p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; } body.language-en .page-news__list-popup-main-content > div p, .page-news__list-popup-main-content > div p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } } .page-news__list-popup-main-content > div p:has(img.aligncenter) { align-self: center; } .page-news__list-popup-main-content > div p:has(img.alignright) { align-self: flex-end; } .page-news__list-popup-main-content > div strong { font-weight: 700; } .page-news__list-popup-main-content > div em { font-style: italic; } .page-news__list-popup-main-content > div blockquote { display: flex; flex-direction: column; gap: 1.6rem; padding-left: 3.2rem; margin-bottom: 3.2rem; } .page-news__list-popup-main-content > div blockquote > p { margin-bottom: 0; } .page-news__list-popup-main-content > div ul { list-style-type: disc; } .page-news__list-popup-main-content > div ul li::marker { font-size: 2.4rem; } .page-news__list-popup-main-content > div ol { list-style-type: decimal; } .page-news__list-popup-main-content > div ol, .page-news__list-popup-main-content > div ul { margin-inline-start: 2rem; margin-bottom: 3.2rem; } .page-news__list-popup-main-content > div hr { margin-block-start: 2rem; margin-block-end: 4rem; } @media (max-width: 767.98px) { .page-news__list-popup-main-content > div hr { margin-block-start: 1rem; margin-block-end: 1rem; } } .page-news__list-popup-main-content > div table { width: 100%; border-collapse: collapse; } .page-news__list-popup-main-content > div table th { font-weight: bold; padding: 10px; } .page-news__list-popup-main-content > div table td { padding: 10px; } .page-news__list-popup-main-content > div a { position: relative; } .page-news__list-popup-main-content > div a::after { content: ""; position: absolute; width: 100%; height: 1px; left: 0; bottom: 0; background-color: #000; opacity: 0.4; transition: opacity 0.3s; } .page-news__list-popup-main-content > div a:hover::after { opacity: 1; } .page-news__list-popup-main-content > span { width: 100%; height: 0.1rem; background-color: var(--color-gray-300); } .page-news__list-popup-main-content > h6 { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-700); white-space: pre-line; } body.language-en .page-news__list-popup-main-content > h6, .page-news__list-popup-main-content > h6.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-news__list-popup-main-content > button { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; display: flex; align-items: center; gap: 1.6rem; margin-left: auto; color: #C0A36B; transition: color 0.3s ease; } body.language-en .page-news__list-popup-main-content > button, .page-news__list-popup-main-content > button.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-news__list-popup-main-content > button > svg { width: 2rem; height: 2rem; } @media (min-width: 1100px) { .page-news__list-popup-main-content > button:hover { color: var(--color-gold-500); } } .page-news__pagination { width: 100%; height: auto; display: flex; justify-content: center; } .page-news__pagination-btn { width: 3rem; height: 3rem; display: flex; justify-content: center; align-items: center; } .page-news__pagination-btn.-active { color: var(--color-gold-500); } .page-contact { width: 100%; height: auto; position: relative; display: flex; flex-direction: column; align-items: center; background-color: var(--color-gray-100); padding: 15rem 10rem 12rem; z-index: 1; min-height: 100vh; } @media (max-width: 1099.98px) { .page-contact { padding: 8.4rem 0rem 12rem; background-color: var(--color-white); } } .page-contact__wrapper { width: 100%; height: auto; display: flex; flex-direction: column; gap: 4.8rem; } @media (max-width: 1099.98px) { .page-contact__wrapper { gap: 2.4rem; } } .page-contact__wrapper-breadcrumb { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; display: flex; align-items: center; gap: 1.6rem; } body.language-en .page-contact__wrapper-breadcrumb, .page-contact__wrapper-breadcrumb.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-contact__wrapper-breadcrumb { width: 100%; height: auto; padding: 0 2.4rem; } } .page-contact__wrapper-content { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 4.8rem; padding: 0 17rem; } @media (max-width: 1099.98px) { .page-contact__wrapper-content { padding: 0; gap: 2.4rem; } } .page-contact__form { width: 100%; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; padding: 6.2rem 13rem; background-color: #fff; border-radius: 0.5rem; } @media (max-width: 1099.98px) { .page-contact__form { padding: 4.8rem 2.4rem 0; } } .page-contact__form > h2 { font-size: 2rem; line-height: 1.5; font-weight: 400; font-family: "GenRyuMinTW", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: #282A1D; } body.language-en .page-contact__form > h2, .page-contact__form > h2.-en { font-size: 2.4rem; font-weight: 400; font-family: "Wittgenstein", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (max-width: 1099.98px) { .page-contact__form > h2 { white-space: pre-line; } } .page-contact__form-agreement { display: flex; align-items: flex-start; gap: 0.8rem; } .page-contact__form-agreement > input[type=checkbox] { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; cursor: pointer; flex: 0 0 auto; border: 1px solid var(--color-gold-500); } .page-contact__form-agreement > input[type=checkbox]:checked { background-color: #C0A36B; } .page-contact__form-agreement > label { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; color: var(--color-gray-700); cursor: pointer; user-select: none; } body.language-en .page-contact__form-agreement > label, .page-contact__form-agreement > label.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-contact__form-agreement > label > a { text-decoration: underline; } .page-contact__form-grid { width: 100%; height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3.8rem; } @media (max-width: 1099.98px) { .page-contact__form-grid { display: flex; flex-direction: column; gap: 2rem; } } .page-contact__form-grid-column { display: flex; gap: 1rem; } .page-contact__form-grid-column > label { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; flex: 0 0 7.6rem; color: var(--color-gray-700); } body.language-en .page-contact__form-grid-column > label, .page-contact__form-grid-column > label.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-contact__form-grid-column > input { border-bottom: 1px solid rgba(192, 163, 107, 0.5); flex: 1; } .page-contact__form-grid-row { grid-column: span 2; display: flex; align-items: center; gap: 1rem; } .page-contact__form-grid-row.-textarea { flex-direction: column; align-items: flex-start; gap: 1rem; } .page-contact__form-grid-row.-textarea > textarea { width: 100%; height: auto; border: 1px solid rgba(192, 163, 107, 0.5); padding: 1rem; min-height: 11.6rem; } .page-contact__form-grid-row.-textarea > span { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; color: var(--color-gray-700); } body.language-en .page-contact__form-grid-row.-textarea > span, .page-contact__form-grid-row.-textarea > span.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-contact__form-grid-row > p { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; flex: 0 0 auto; min-width: 7.6rem; color: var(--color-gray-700); } body.language-en .page-contact__form-grid-row > p, .page-contact__form-grid-row > p.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-contact__form-grid-row-radio { display: flex; align-items: center; } .page-contact__form-grid-row-radio > label { font-size: 1.4rem; line-height: 2.1rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.042rem; color: var(--color-gray-700); cursor: pointer; padding-left: 1rem; } body.language-en .page-contact__form-grid-row-radio > label, .page-contact__form-grid-row-radio > label.-en { font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-contact__form-grid-row-radio > input { width: 1.4rem; height: 1.4rem; position: relative; display: flex; justify-content: center; align-items: center; border: 1px solid #C0A36B; border-radius: 50%; cursor: pointer; } .page-contact__form-grid-row-radio > input:not(:first-child) { margin-left: 1rem; } .page-contact__form-grid-row-radio > input:checked::after { transform: scale(1); } .page-contact__form-grid-row-radio > input::after { width: 1rem; height: 1rem; content: ""; position: absolute; background-color: #C0A36B; border-radius: 50%; transform: scale(0); transition: transform 0.3s ease; } .page-contact__form-note { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; color: #ee5252; display: none; } body.language-en .page-contact__form-note, .page-contact__form-note.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } .page-contact__form-note.-show { display: block; } .page-contact__form-button { display: flex; justify-content: center; align-items: center; padding: 1.6rem 1.2rem; min-width: 11.2rem; background-color: var(--color-gold-500); border-radius: 0.3rem; color: var(--color-white); transition: background-color 0.3s ease; } @media (min-width: 1100px) { .page-contact__form-button:hover { background-color: var(--color-gold-300); } } .page-contact__form-button.-disabled { background-color: var(--color-gray-400); cursor: not-allowed; opacity: 0.6; } @media (min-width: 1100px) { .page-contact__form-button.-disabled:hover { background-color: var(--color-gray-400); } } .page-thank { width: 100%; height: auto; position: relative; display: flex; flex-direction: column; align-items: center; background-color: var(--color-gray-100); padding: 15rem 10rem 12rem; z-index: 1; min-height: 100vh; } @media (max-width: 1099.98px) { .page-thank { padding: 8.4rem 0rem 12rem; background-color: var(--color-white); } } .page-thank__wrapper { width: 100%; height: auto; display: flex; flex-direction: column; gap: 4.8rem; } @media (max-width: 1099.98px) { .page-thank__wrapper { gap: 2.4rem; } } .page-thank__wrapper-breadcrumb { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; display: flex; align-items: center; gap: 1.6rem; } body.language-en .page-thank__wrapper-breadcrumb, .page-thank__wrapper-breadcrumb.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-thank__wrapper-breadcrumb { width: 100%; height: auto; padding: 0 2.4rem; } } .page-thank__wrapper-content { width: 100%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 4.8rem; padding: 0 17rem; } @media (max-width: 1099.98px) { .page-thank__wrapper-content { padding: 0; gap: 2.4rem; } } .page-thank__form { width: 100%; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.6rem; padding: 6.2rem 13rem; background-color: #fff; border-radius: 0.5rem; min-height: 60vh; } @media (max-width: 1099.98px) { .page-thank__form { padding: 4.8rem 2.4rem 0; } } .page-thank__form > h2 { font-size: 1.8rem; line-height: 3.2rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; color: #282A1D; } body.language-en .page-thank__form > h2, .page-thank__form > h2.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } @media (max-width: 1099.98px) { .page-thank__form > h2 { white-space: pre-line; } } .page-thank__form > p { font-size: 1.6rem; line-height: 2.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.048rem; white-space: pre-line; } body.language-en .page-thank__form > p, .page-thank__form > p.-en { line-height: 1.5; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0; } .page-thank__form-button { font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; font-family: "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; letter-spacing: 0.036rem; display: flex; justify-content: center; align-items: center; padding: 1.6rem 1.2rem; min-width: 11.2rem; background-color: var(--color-gold-500); border-radius: 0.3rem; color: var(--color-white); transition: background-color 0.3s ease; margin-top: 4.8rem; line-height: 1; } body.language-en .page-thank__form-button, .page-thank__form-button.-en { line-height: 2.1rem; font-weight: 400; font-family: "Roboto", "Noto Sans TC", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; } @media (min-width: 1100px) { .page-thank__form-button:hover { background-color: var(--color-gold-300); } } .page-thank__form-button.-disabled { background-color: var(--color-gray-400); cursor: not-allowed; opacity: 0.6; } @media (min-width: 1100px) { .page-thank__form-button.-disabled:hover { background-color: var(--color-gray-400); } }