@font-face {
  font-family: "Futura-Std-Light";
  src: url(../font/Futura\ Std\ Light.otf) format("opentype");
}

body,
html {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
  --vw-base: calc(100vw / 1920);
  background-color: #66696b;
  transition: background-color 0.45s ease;
}

body>* {}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}

button,
input,
textarea,
select,
option {
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
  border-radius: 0;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #e1ecf0;
  overflow: hidden;
  transition: background-color 0.45s ease;
}

/* html.contact-is-light-on,
html.contact-is-light-on body, */
html.contact-is-light-on .container {
  background-color: #838e94;
}


/* 02 內頁沒有首頁進場流程，header 載入後直接顯示跑馬燈。 */
body .header .slog-marquee {
  clip-path: inset(0 0% 0 0);
}

.material_fixed {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-image: url(../img/index/bg-Material.jpg);
  background-repeat: repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity 0.45s ease;
  /* z-index: 10; */
}

html.contact-is-light-on .material_fixed {
  opacity: 1;
  mix-blend-mode: multiply;
}



/*main1*/
.main1 {
  position: relative;
  width: 100%;
  height: calc(950*var(--vw-base));
  overflow: hidden;
}

.main1 .animation {
  position: absolute;
  top: calc(176*var(--vw-base));
  left: calc(163*var(--vw-base));
  z-index: 1;
  width: calc(675*var(--vw-base));
  height: calc(675*var(--vw-base));
  overflow: visible;
  border-radius: 50%;
  background: transparent;
  isolation: isolate;
  cursor: grab;
}

.main1 .animation.is-dragging {
  cursor: grabbing;
}

.contact-dial-icons {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.contact-dial-wheel {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 calc(8*var(--vw-base)) calc(18*var(--vw-base)) rgba(56, 64, 68, 0.18);
  pointer-events: none;
  user-select: none;
  transform: rotate(var(--dial-rotation, 0deg));
  transform-origin: center;
  transition: transform 0.78s cubic-bezier(0.22, 0.72, 0.24, 1);
}

.contact-dial-wheel.is-dragging {
  cursor: grabbing;
  transition: none;
}

.contact-dial-plate {
  --dial-hole-radius: calc(52.5*var(--vw-base));
  --dial-hole-edge: calc(53*var(--vw-base));
  --dial-disc-radius: calc(337.5*var(--vw-base));
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background: #ffffff;
  transition: background-color 0.45s ease;
  pointer-events: none;
  mask-image:
    radial-gradient(circle at 76.7% 20.1%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 11% 47.7%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 24.6% 79.1%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 57.9% 88.4%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 73.3% 80.3%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 27.4% 17.6%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 43.8% 10.7%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 61.5% 11.5%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 86.5% 34.5%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 15.9% 30.5%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 14.4% 65%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 40.3% 88%, transparent 0 var(--dial-hole-radius), #000 var(--dial-hole-edge)),
    radial-gradient(circle at 50% 50%, #000 calc(var(--dial-disc-radius) - 1px), transparent var(--dial-disc-radius));
  mask-composite: intersect;
}

html.contact-is-light-on .contact-dial-plate {
  background-color: #9ca6aa;
}

.contact-dial-shadow-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.contact-dial-hole-shadow {
  position: absolute;
  top: var(--dial-y);
  left: var(--dial-x);
  width: calc(105*var(--vw-base));
  height: calc(105*var(--vw-base));
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.001);
  box-shadow:
    inset 0 calc(2*var(--vw-base)) calc(10*var(--vw-base)) rgba(56, 64, 68, 0.23),
    inset 0 calc(-2*var(--vw-base)) calc(5*var(--vw-base)) rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
}

.contact-dial-core {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  display: grid;
  width: calc(336*var(--vw-base));
  height: calc(336*var(--vw-base));
  place-items: center;
  border-radius: 50%;
  background: #58595b;
  transform: translate(-50%, -50%);
  overflow: visible;
}

.contact-dial-inner-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(310*var(--vw-base));
  height: calc(310*var(--vw-base));
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.contact-dial-content {
  position: relative;
  z-index: 1;
  display: grid;
  width: calc(304*var(--vw-base));
  justify-items: center;
  color: rgba(255, 255, 255, 0.92);
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  text-align: center;
  overflow: visible;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.contact-dial-copy {
  display: grid;
  grid-area: 1 / 1;
  width: 100%;
  justify-items: center;
}

.contact-dial-copy[hidden] {
  display: none;
}

.contact-dial-content.is-changing {
  opacity: 0;
  transform: translateY(calc(4*var(--vw-base)));
}

.contact-dial-title {
  display: block;
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: calc(25*var(--vw-base));
  font-weight: 400;
  letter-spacing: 0.2em;
  line-height: 1.4;
  padding: 0.16em 0.35em 0.2em;
  text-indent: 0;
  white-space: nowrap;
  overflow: visible;
}

.contact-dial-number {
  font-family: "new-astro", sans-serif;
  font-weight: 400;
}

.contact-dial-detail {
  width: max-content;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: calc(7*var(--vw-base));
  padding-inline: 0.35em;
  color: rgba(255, 255, 255, 0.86);
  font-family: inherit;
  font-size: calc(14*var(--vw-base));
  font-weight: 400;
  letter-spacing: 0.035em;
  line-height: 1.45;
  white-space: nowrap;
  overflow: visible;
}

.contact-dial-detail[hidden] {
  display: none;
}

.contact-dial-empty,
.contact-dial-button,
.contact-dial-static {
  position: absolute;
  top: var(--dial-y);
  left: var(--dial-x);
  width: calc(105*var(--vw-base));
  height: calc(105*var(--vw-base));
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

.contact-dial-button {
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.22s ease;
}

.contact-dial-static {
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.contact-dial-button img,
.contact-dial-static img {
  display: block;
  width: calc(70*var(--vw-base));
  height: calc(67*var(--vw-base));
  object-fit: contain;
  pointer-events: none;
}

.contact-dial-button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 calc(2*var(--vw-base)) #f16d25;
}

.contact-pole {
  position: absolute;
  right: calc(0*var(--vw-base));
  bottom: calc(120*var(--vw-base));
  width: calc(164*var(--vw-base));
  height: calc(121*var(--vw-base));
  z-index: 2;
  pointer-events: none;
  transform: rotate(var(--pole-counter-rotation, 0deg));
  transform-origin: 70% 70%;
  transition: transform 0.78s cubic-bezier(0.22, 0.72, 0.24, 1);
}

.main1 .animation.is-dragging .contact-pole {
  transition: none;
}

.contact-pole img {
  /* object-position: 70% 70%; */
}








































.main1 .info {
  position: absolute;
  left: calc(960*var(--vw-base));
  top: calc(235*var(--vw-base));
  width: calc(855*var(--vw-base));
}

.main1 .txt {
  position: relative;
  width: 100%;
}


.main1 .txt h1 {
  position: relative;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 500;
  font-size: calc(30*var(--vw-base));
  color: #f16d25;
  letter-spacing: 0.2em;
  line-height: 1.15em;
}

.main1 .txt h2 {
  position: relative;
  margin-top: calc(17*var(--vw-base));
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: calc(30*var(--vw-base));
  color: #ffffff;
  letter-spacing: 0.05em;
  line-height: 1.2em;
}

.main1 .txt p {
  position: relative;
  margin-top: calc(40*var(--vw-base));
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 300;
  font-size: calc(20*var(--vw-base));
  color: #595959;
  letter-spacing: 0.1em;
  line-height: 2em;
  text-align: justify;
  text-transform: uppercase;
  transition: color 0.45s ease;
}

html.contact-is-light-on .main1 .txt p {
  color: #ffffff;
}

/* UNIQUE WAVE */
.contact-unique-wave {
  margin-top: calc(40*var(--vw-base));
  width: 100%;
  position: relative;
  pointer-events: none;
  opacity: 1;
  z-index: 10;
  --contact-unique-off-fill: transparent;
  --contact-unique-on-fill: #7a858b;
  --contact-water-off: #7b7876;
  --contact-water-on: #e1ecf0;
  --contact-outline-off: #7b7876;
  --contact-outline-on: #e1ecf0;
  --contact-level: 0;
  --contact-level-target: 0.72;
  --contact-water-level: 40%;
  --contact-wave-speed: 3.2s;
}

.contact-unique-wave svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
}

.contact-unique-fo {
  width: 100%;
  height: 100%;
  position: relative;
}

.contact-unique-material {
  opacity: 0;
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

html.contact-is-light-on .contact-unique-material {
  opacity: 1;
}

.contact-u-base {
  position: absolute;
  inset: 0;
  background: var(--contact-unique-off-fill);
  opacity: .92;
  transition: background-color 0.45s ease;
}

html.contact-is-light-on .contact-unique-wave .contact-u-base {
  background: var(--contact-unique-on-fill);
}

.contact-u-water-level {
  position: absolute;
  inset: 0;
  clip-path: inset(calc((1 - var(--contact-level)) * 100%) 0 0 0);
}

.contact-u-water-wave {
  position: absolute;
  inset: 0;
  background: var(--contact-water-off);
  will-change: clip-path;
  animation: fuWaveClip var(--contact-wave-speed) ease-in-out infinite;
  transition: background-color 0.45s ease;
}

html.contact-is-light-on .contact-unique-wave .contact-u-water-wave {
  background: var(--contact-water-on);
}

.contact-unique-outline {
  transition: stroke 0.45s ease;
}

html.contact-is-light-on .contact-unique-wave .contact-unique-outline {
  stroke: var(--contact-outline-on);
}

@keyframes fuWaveClip {

  0%,
  100% {
    clip-path: polygon(0% calc(var(--contact-water-level) - 10%),
        16% calc(var(--contact-water-level) - 11%),
        33% calc(var(--contact-water-level) - 5%),
        54% calc(var(--contact-water-level) + 5%),
        70% calc(var(--contact-water-level) + 6%),
        84% calc(var(--contact-water-level) + 4%),
        100% calc(var(--contact-water-level) - 3%),
        100% 100%,
        0% 100%);
  }

  50% {
    clip-path: polygon(0% calc(var(--contact-water-level) + 5%),
        15% calc(var(--contact-water-level) + 10%),
        34% calc(var(--contact-water-level) + 11%),
        51% calc(var(--contact-water-level) + 7%),
        67% calc(var(--contact-water-level) - 5%),
        84% calc(var(--contact-water-level) - 10%),
        100% calc(var(--contact-water-level) - 9%),
        100% 100%,
        0% 100%);
  }
}

.wave-en {
  position: absolute;
  left: calc(23*var(--vw-base));
  top: calc(172*var(--vw-base));
  color: #595959;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: calc(20 * var(--vw-base));
  line-height: 1.1em;
  letter-spacing: 0.2em;
  transition: color 0.45s ease;
}


.wave-en .num {
  font-family: "noto sans tc", sans-serif;
  font-weight: 300;
}


.wave-cn {
  position: absolute;
  right: 0;
  top: calc(172*var(--vw-base));
  color: #595959;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 300;
  font-size: calc(20 * var(--vw-base));
  line-height: 1.1em;
  letter-spacing: 0.1em;
  transition: color 0.45s ease;
}

html.contact-is-light-on .contact-unique-wave .wave-en,
html.contact-is-light-on .contact-unique-wave .wave-cn {
  color: #ffffff;
}

/* Contact page entrance sequence */
.main1 .animation {
  transform-origin: 50% 50%;
  animation: contact-dial-enter 1.2s cubic-bezier(0.2, 0.75, 0.25, 1) both;
}

.main1 .txt h1 {
  animation: contact-copy-fade-up 0.68s ease-out 0.12s both;
}

.main1 .txt h2 {
  animation: contact-copy-fade-up 0.68s ease-out 0.34s both;
}

.main1 .txt p {
  animation: contact-copy-fade-up 0.68s ease-out 0.56s both;
}

.contact-unique-wave {
  animation: contact-wave-fade-in 0.8s ease-out 1.35s both;
}

@keyframes contact-dial-enter {
  0% {
    opacity: 0;
    transform: scale(0.24) rotate(-270deg);
  }

  68% {
    opacity: 1;
    transform: scale(1.04) rotate(8deg);
  }

  84% {
    transform: scale(0.99) rotate(-2deg);
  }

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

@keyframes contact-copy-fade-up {
  from {
    opacity: 0;
    transform: translateY(calc(12*var(--vw-base)));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contact-wave-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .main1 .animation,
  .main1 .txt h1,
  .main1 .txt h2,
  .main1 .txt p,
  .contact-unique-wave {
    animation: none;
  }
}