@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;
}

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: auto;
  background: #e1ecf0;
}

.container h2 {
  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;
}

.container h3 {
  position: relative;
  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;
}

.container p {
  position: relative;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 300;
  font-size: calc(24*var(--vw-base));
  color: #595959;
  letter-spacing: 0.12em;
  line-height: 1.8em;
  text-align: justify;
  text-transform: uppercase;
}


/* 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;
  /* z-index: 10; */
}

/*main1*/
.main1 {
  position: relative;
  width: 100%;
  height: calc(950*var(--vw-base));
  overflow: hidden;
  --main1-intro-delay: 0.2s;
  --time-line-intro-delay: 0.6s;
  /* background-image: url(../img/index/bg-w.jpg);
  background-repeat: repeat-y;
  background-size: cover;
  background-position: center; */
  /*min-height: 100vh;*/
}

.main1 .title {
  position: absolute;
  right: calc(30*var(--vw-base));
  top: calc(150*var(--vw-base));
  width: calc(489*var(--vw-base));
  height: calc(94*var(--vw-base));
}

.main1 .title .t1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.t1.first {
  z-index: 2;
}

.t1.second {}

.main1 .title .t1 img {
  object-fit: contain;
}

@keyframes main1-fade-right {
  from {
    opacity: 0;
    transform: translate3d(calc(50*var(--vw-base)), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes main1-fade-left {
  from {
    opacity: 0;
    transform: translate3d(calc(-50*var(--vw-base)), 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes main1-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, calc(24*var(--vw-base)), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.main1 .title .t1 {
  will-change: opacity, transform;
}

.main1 .title .t1.first {
  z-index: 2;
  animation: main1-fade-right 0.8s ease-out calc(var(--main1-intro-delay) + 0s) both;
}

.main1 .title .t1.second {
  z-index: 1;
  animation: main1-fade-right 0.8s ease-out var(--main1-intro-delay) both;
}

.main1 .title .t1-txt {
  position: absolute;
  right: 0;
  top: calc(22*var(--vw-base));
  color: #ffffff;
  font-family: "Noto Sans TC", sans-serif;
  font-size: calc(24*var(--vw-base));
  letter-spacing: 0.15em;
  line-height: 1.1em;
  writing-mode: vertical-rl;
  will-change: opacity, transform;
  animation: main1-fade-up 0.8s ease-out calc(var(--main1-intro-delay) + 0.6s) both;
}

.main1 .txt {
  position: absolute;
  top: calc(247*var(--vw-base));
  left: calc(111*var(--vw-base));
  width: calc(770*var(--vw-base));
}

.main1 .txt h2,
.main1 .txt h3,
.main1 .txt p {
  will-change: opacity, transform;
}

.main1 .txt h2 {
  animation: main1-fade-right 1s ease-out var(--main1-intro-delay) both;
}

.main1 .txt h3 {
  margin-top: calc(13*var(--vw-base));
  animation: main1-fade-right 1s ease-out calc(var(--main1-intro-delay) + 0.3s) both;
}

.main1 .txt p {
  margin-top: calc(65*var(--vw-base));
  animation: main1-fade-up 1s ease-out calc(var(--main1-intro-delay) + 0.6s) both;
}

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

  .main1 .title .t1,
  .main1 .title .t1-txt,
  .main1 .txt h2,
  .main1 .txt h3,
  .main1 .txt p {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.main1 .time-line {
  position: absolute;
  right: calc(0*var(--vw-base));
  top: calc(457*var(--vw-base));
  width: calc(951*var(--vw-base));
  height: calc(205*var(--vw-base));
  color: #595959;
  /* 前方箭頭走到 slogan 中段附近時，弧線就開始進場。 */
  --time-line-arc-start-delay: 0.7s;
  --time-line-arc-duration: 1.2s;
  --time-line-arrow-reveal-delay: 0.18s;
  --time-line-slogan-delay: 0.4s;
}

/* 沿用 951 × 205 對位圖座標，線條與 HTML 文字一起隨版面縮放。 */
.time-line__graphic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes time-line-arc-clip {
  from {
    width: 0;
  }

  to {
    width: 541px;
  }
}

@keyframes time-line-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes time-line-arrow-fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }
}

.time-line__arc-clip-rect {
  animation: time-line-arc-clip var(--time-line-arc-duration) linear calc(var(--time-line-intro-delay) + var(--time-line-arc-start-delay)) both;
}

.time-line__circle {
  opacity: 0;
  animation: time-line-fade-in 0.315s ease-out calc(var(--time-line-intro-delay) + var(--time-line-circle-delay, 0s)) both;
}

.time-line__circle--founded {
  --time-line-circle-delay: 0s;
}

.time-line__circle--developed {
  --time-line-circle-delay: 0.56s;
}

.time-line__circle--today {
  --time-line-circle-delay: 1.68s;
}

.time-line__arrow-runner {
  opacity: 0;
  visibility: hidden;
  animation: time-line-arrow-fade-in 0.084s linear calc(var(--time-line-intro-delay) + var(--time-line-arrow-delay, 0s) + var(--time-line-arrow-reveal-delay)) both;
}

.time-line__arrow-runner--lead {
  --time-line-arrow-delay: 0s;
}

.time-line__arrow-runner--middle {
  --time-line-arrow-delay: 0.21s;
}

.time-line__arrow-runner--tail {
  --time-line-arrow-delay: 0.42s;
}

.time-line__milestones {
  margin: 0;
  padding: 0;
  list-style: none;
}

.time-line__milestone {
  position: absolute;
  top: calc(-5*var(--vw-base));
  width: max-content;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: time-line-fade-in 0.42s ease-out calc(var(--time-line-intro-delay) + var(--time-line-text-delay, 0s)) both;
}

.time-line__milestone--founded {
  left: calc(70*var(--vw-base));
  --time-line-text-delay: 0.035s;
}

.time-line__milestone--developed {
  left: calc(262*var(--vw-base));
  top: calc(125*var(--vw-base));
  --time-line-text-delay: 0.56s;
}

.time-line__milestone--developed .time-line__year {
  margin-top: 0;
}

.time-line__milestone--today {
  left: calc(541*var(--vw-base));
  top: calc(-5*var(--vw-base));
  --time-line-text-delay: 1.68s;
}

.time-line__zh {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 300;
  font-size: calc(20*var(--vw-base));
  letter-spacing: 0.2em;
  line-height: 1.5;
}

.time-line__year,
.time-line__en {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: calc(22*var(--vw-base));
  line-height: calc(30*var(--vw-base));
}

.time-line__year {
  display: block;
  margin-top: calc(0*var(--vw-base));
  letter-spacing: 0.2em;
}

.time-line__en {
  letter-spacing: 0;
}

.time-line__slogan {
  position: absolute;
  left: calc(305.5*var(--vw-base));
  top: calc(24*var(--vw-base));
  font-size: calc(18*var(--vw-base));
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  opacity: 0;
  animation: time-line-fade-in 0.3s ease-out calc(var(--time-line-intro-delay) + var(--time-line-arc-start-delay) + var(--time-line-slogan-delay)) both;
}

.time-line__continuation {
  position: absolute;
  right: calc(87*var(--vw-base));
  top: calc(70*var(--vw-base));
  display: grid;
  row-gap: calc(25*var(--vw-base));
  text-align: right;
  white-space: nowrap;
  opacity: 0;
  animation: time-line-fade-in 0.42s ease-out calc(var(--time-line-intro-delay) + 2.17s) both;
}

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

  .time-line__axis,
  .time-line__axis-tail {
    stroke-dashoffset: 0;
  }

  .time-line__axis-motion,
  .time-line__axis-tail-motion {
    display: none;
  }

  .time-line__arc-clip-rect {
    width: 541px;
    animation: none;
  }

  .time-line__arrow-motion {
    display: none;
  }

  .time-line__arrow-runner,
  .time-line__circle,
  .time-line__milestone,
  .time-line__slogan,
  .time-line__continuation {
    opacity: 1;
    visibility: visible;
    animation: none;
  }
}

.main2 {
  position: relative;
  width: 100%;
  height: calc(1300*var(--vw-base));
}

.main2 .txt {
  position: absolute;
  top: calc(409*var(--vw-base));
  right: calc(143*var(--vw-base));
  width: calc(695*var(--vw-base));
  display: flex;
  flex-direction: column;
  align-items: end;
}

.main2 .txt h2,
.main2 .txt h3,
.main2 .txt p {
  opacity: 0;
  will-change: opacity, transform;
}

.main2.is-inview .txt h2 {
  animation: main1-fade-left 1s ease-out 0.2s both;
}

.main2.is-inview .txt h3 {
  animation: main1-fade-left 1s ease-out 0.5s both;
}

.main2.is-inview .txt p {
  animation: main1-fade-up 1s ease-out 0.8s both;
}


.main2 .txt h2 {}

.main2 .txt h3 {
  margin-top: calc(15*var(--vw-base));
  white-space: nowrap;
}

.main2 .txt p {
  margin-top: calc(57*var(--vw-base));
  text-align-last: end;
}

.main2 .m2-animation {
  position: absolute;
  top: calc(96*var(--vw-base));
  left: calc(127*var(--vw-base));
  /* width: calc(745*var(--vw-base)); */
  width: calc(748*var(--vw-base));
  height: calc(1024*var(--vw-base));
}

@keyframes m2-step-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.main2 .m2-process-arrow {
  opacity: 0;
}

.main2 .m2-process-flow {
  opacity: 0;
}

.main2 .m2-process-flow-template {
  display: none;
}

.main2 .m2-step {
  opacity: 0;
}

.main2.is-process-active .m2-process-arrow {
  animation: m2-step-fade-in 0.12s linear both;
}

.main2.is-flow-active .m2-process-flow {
  opacity: 1;
}

.main2.is-process-active .m2-step {
  animation: m2-step-fade-in 0.5s ease-out var(--m2-step-delay, 0s) both;
}

.main2 .m2-step--listen {
  --m2-step-delay: 0.21s;
}

.main2 .m2-step--define {
  --m2-step-delay: 0.75s;
}

.main2 .m2-step--integrate {
  --m2-step-delay: 1.43s;
}

.main2 .m2-step--create {
  --m2-step-delay: 2.06s;
}

/* m2 對位圖的 745 × 1024 座標；滑入圓形或鍵盤聚焦時揭示說明。 */
.m2-process-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #f16d25;
  pointer-events: none;
}

.m2-process-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.m2-step {
  position: absolute;
  width: calc(var(--step-size)*var(--vw-base));
  height: calc(var(--step-size)*var(--vw-base));
}

.m2-step--listen {
  --step-size: 288;
  left: calc(196*var(--vw-base));
  top: calc(74*var(--vw-base));
}

.m2-step--define {
  --step-size: 114;
  left: calc(628*var(--vw-base));
  top: calc(372*var(--vw-base));
}

.m2-step--integrate {
  --step-size: 196;
  left: calc(8*var(--vw-base));
  top: calc(496*var(--vw-base));
}

.m2-step--create {
  --step-size: 240;
  left: calc(365*var(--vw-base));
  top: calc(703*var(--vw-base));
}

.m2-step__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #595959;
  cursor: pointer;
  transition: color .3s ease;
}

.m2-step__circle {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: transparent;
  stroke: #f16d25;
  stroke-width: 1.5;
  transition: fill .3s ease;
  pointer-events: none;
}

.m2-step__label {
  position: relative;
  display: grid;
  text-align: center;
  pointer-events: none;
}

.m2-step__zh {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: calc(22*var(--vw-base));
  letter-spacing: .05em;
  line-height: 1.5;
}

.m2-step__en {
  font-family: "Raleway", sans-serif;
  font-weight: 400;
  font-size: calc(22*var(--vw-base));
  letter-spacing: 0.05em;
  line-height: 1.5;
  padding-left: 0.05em;
}

.m2-step__description {
  position: absolute;
  left: calc(100% + 24*var(--vw-base));
  top: 50%;
  width: max-content;
  transform: translateY(-50%);
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 300;
  font-size: calc(20*var(--vw-base));
  letter-spacing: .05em;
  line-height: 1.5;
  color: #595959;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, visibility .3s;
}

.m2-step--description-left .m2-step__description {
  left: auto;
  right: calc(100% + 24*var(--vw-base));
  text-align: right;
}

.m2-step__button:hover,
.m2-step__button:focus-visible {
  color: #fff;
}

.m2-step__button:hover .m2-step__circle,
.m2-step__button:focus-visible .m2-step__circle {
  fill: #f16d25;
}

.m2-step__button:hover~.m2-step__description,
.m2-step__button:focus-visible~.m2-step__description {
  opacity: 1;
  visibility: visible;
}

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

  .main2.is-inview .txt h2,
  .main2.is-inview .txt h3,
  .main2.is-inview .txt p {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .main2.is-process-active .m2-process-line {
    stroke-dashoffset: 0;
  }

  .main2.is-process-active .m2-process-arrow {
    display: none;
  }

  .main2.is-process-active .m2-step {
    animation: none;
    opacity: 1;
  }

  .m2-step__button,
  .m2-step__circle,
  .m2-step__description {
    transition: none;
  }
}












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

.main3 .txt {
  position: absolute;
  top: calc(100*var(--vw-base));
  left: calc(113*var(--vw-base));
  width: calc(800*var(--vw-base));
  display: flex;
  flex-direction: column;
  align-items: start;
}


.main3 .txt h2,
.main3 .txt h3,
.main3 .txt p {
  opacity: 0;
  will-change: opacity, transform;
}

.main3.is-inview .txt h2 {
  animation: main1-fade-right 1s ease-out 0.2s both;
}

.main3 .txt h3 {
  margin-top: calc(15*var(--vw-base));
}

.main3.is-inview .txt h3 {
  animation: main1-fade-right 1s ease-out 0.5s both;
}

.main3 .txt p {
  margin-top: calc(57*var(--vw-base));
}

.main3.is-inview .txt p {
  animation: main1-fade-up 1s ease-out 0.8s both;
}

.main3 .m3-animation {
  position: absolute;
  top: calc(155*var(--vw-base));
  right: calc(129*var(--vw-base));
  width: calc(733*var(--vw-base));
  height: calc(545*var(--vw-base));
  overflow: visible;
}

.m3-project-list {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(4, calc(138*var(--vw-base)));
  margin: 0;
  padding: 0;
  list-style: none;
}

.m3-project-row {
  position: relative;
  width: 100%;
  height: calc(138*var(--vw-base));
  border-bottom: 0;
}

.m3-project-row:not(:last-child)::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: #f16d25;
  content: "";
  clip-path: inset(0 100% 0 0);
}

@keyframes m3-project-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, calc(24*var(--vw-base)), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes m3-project-company-fade-up {
  from {
    opacity: 0;
    transform: translateY(calc(-50% + 24*var(--vw-base)));
  }

  to {
    opacity: 1;
    transform: translateY(-50%);
  }
}

@keyframes m3-line-clip-right {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

.main3 .m3-project-row__meta {
  opacity: 0;
  transform: translate3d(0, calc(24*var(--vw-base)), 0);
  will-change: opacity, transform;
}

.main3 .m3-project-row__company {
  opacity: 0;
  will-change: opacity, transform;
}

.main3 .m3-project-row__arrow {
  opacity: 0;
}

.main3 .m3-project-row:nth-child(1) {
  --m3-row-delay: 0s;
}

.main3 .m3-project-row:nth-child(2) {
  --m3-row-delay: 0.25s;
}

.main3 .m3-project-row:nth-child(3) {
  --m3-row-delay: 0.5s;
}

.main3 .m3-project-row:nth-child(4) {
  --m3-row-delay: 0.75s;
}

.main3.is-animation-active .m3-project-row__meta {
  animation: m3-project-fade-up 0.8s ease-out var(--m3-row-delay, 0s) both;
}

.main3.is-animation-active .m3-project-row__company {
  animation: m3-project-company-fade-up 0.8s ease-out var(--m3-row-delay, 0s) both;
}

@keyframes m3-project-arrow-fade-up {
  from {
    opacity: 0;
    transform: translate3d(calc(-18*var(--vw-base)),
        calc(-50% + 18*var(--vw-base)),
        0);
  }

  75% {
    opacity: 1;
    transform: translate3d(calc(4*var(--vw-base)),
        calc(-50% - 4*var(--vw-base)),
        0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }
}

.main3.is-animation-active .m3-project-row__arrow {
  animation: m3-project-arrow-fade-up 0.6s ease-out calc(var(--m3-row-delay, 0s) + 0.8s) both;
}

.main3.is-animation-active .m3-project-row:not(:last-child)::after {
  animation: m3-line-clip-right 0.8s ease-out var(--m3-row-delay, 0s) both;
}

.m3-project-row__meta {
  position: absolute;
  left: calc(64*var(--vw-base));
  top: 0;
  width: calc(240*var(--vw-base));
  height: 100%;
  color: #595959;
  white-space: nowrap;
}

.m3-project-row__number {
  position: absolute;
  left: 0;
  top: 50%;
  font-family: "Futura-Std-Light", "Futura Std Light", Futura, sans-serif;
  font-size: calc(48*var(--vw-base));
  font-weight: 300;
  letter-spacing: .1em;
  line-height: 1;
  transform: translateY(-50%);
}

.m3-project-row__arrow {
  position: absolute;
  left: calc(79*var(--vw-base));
  top: calc(50% + 2*var(--vw-base));
  display: block;
  width: calc(26*var(--vw-base));
  height: calc(28*var(--vw-base));
  margin: 0;
  overflow: visible;
  transform: translateY(-50%);
}

.m3-project-row__arrow path {
  fill: none;
  stroke: #f16d25;
  stroke-width: 1.25;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.m3-project-row__projects {
  position: absolute;
  left: calc(119*var(--vw-base));
  top: 50%;
  margin: 0;
  color: #595959;
  font-family: "Raleway", sans-serif;
  font-size: calc(20*var(--vw-base));
  font-weight: 300;
  letter-spacing: 0;
  line-height: 1;
  transform: translateY(-50%);
}

.m3-project-row__company {
  position: absolute;
  right: calc(79*var(--vw-base));
  top: 50%;
  color: #595959;
  font-family: "Noto Sans TC", sans-serif;
  font-size: calc(24*var(--vw-base));
  font-weight: 300;
  letter-spacing: .2em;
  line-height: 1.2;
  transform: translateY(-50%);
  white-space: nowrap;
}

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

  .main3.is-inview .txt h2,
  .main3.is-inview .txt h3,
  .main3.is-inview .txt p {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .main3.is-animation-active .m3-project-row__meta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .main3.is-animation-active .m3-project-row__company {
    animation: none;
    opacity: 1;
    transform: translateY(-50%);
  }

  .main3.is-animation-active .m3-project-row__arrow {
    animation: none;
    opacity: 1;
    transform: translate3d(0, -50%, 0);
  }

  .main3.is-animation-active .m3-project-row:not(:last-child)::after {
    animation: none;
    clip-path: inset(0 0 0 0);
  }
}

.main4 {
  position: relative;
  width: 100%;
  height: calc(980*var(--vw-base));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main4 .txt {
  position: relative;
  width: calc(1200*var(--vw-base));
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main4 .txt h2,
.main4 .txt h3,
.main4 .txt p {
  opacity: 0;
  will-change: opacity, transform;
}

@keyframes main4-fade-down {
  from {
    opacity: 0;
    transform: translate3d(0, calc(-24*var(--vw-base)), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes main4-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, calc(24*var(--vw-base)), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.main4.is-inview .txt h2 {
  animation: main4-fade-down 1s ease-out 0.2s both;
}

.main4.is-inview .txt h3 {
  animation: main4-fade-up 1s ease-out 0.5s both;
}

.main4.is-inview .txt p {
  animation: main4-fade-up 1s ease-out 0.8s both;
}


.main4 .txt h2 {
  padding-left: 0.2em;
}

.main4 .txt h3 {
  margin-top: calc(15*var(--vw-base));
}

.main4 .txt p {
  margin-top: calc(57*var(--vw-base));
  text-align: center;
}

.main4 .m4-animation {
  position: relative;
  margin-top: calc(40*var(--vw-base));
  width: calc(1218*var(--vw-base));
  height: calc(660*var(--vw-base));
  overflow: visible;
}

.m4-process__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* m4 對位圖：四個直徑 330 的主圓，水平重疊 33；下方橢圓在 hover 時淡入。 */
.m4-process {
  position: relative;
  width: calc(1218*var(--vw-base));
  height: calc(660*var(--vw-base));
  margin: 0;
  padding: 0;
  list-style: none;
}

.m4-step {
  position: absolute;
  top: 0;
  width: calc(330*var(--vw-base));
  height: calc(330*var(--vw-base));
  z-index: 1;
  opacity: 0;
  will-change: opacity, transform;
}

@keyframes m4-step-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, calc(24*var(--vw-base)), 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.main4.is-animation-active .m4-step {
  animation: m4-step-fade-up 1s ease-out var(--m4-step-delay, 0s) both;
}

.main4 .m4-step:nth-child(1) {
  --m4-step-delay: 0s;
}

.main4 .m4-step:nth-child(2) {
  --m4-step-delay: 0.3s;
}

.main4 .m4-step:nth-child(3) {
  --m4-step-delay: 0.6s;
}

.main4 .m4-step:nth-child(4) {
  --m4-step-delay: 0.9s;
}

.main4 .m4-step:nth-child(5) {
  --m4-step-delay: 1.2s;
}

.main4 .m4-step:nth-child(6) {
  --m4-step-delay: 1.5s;
}

.m4-step--strategy {
  left: 0;
}

.m4-step--digital {
  left: calc(297*var(--vw-base));
}

.m4-step--visualization {
  left: calc(594*var(--vw-base));
}

.m4-step--technology {
  left: calc(891*var(--vw-base));
}

.m4-step:hover {
  z-index: 20;
}

.m4-step__button {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #595959;
  cursor: pointer;
  text-align: center;
  transition: color .35s ease;
}

.m4-step__button:focus-visible {
  outline: 1px solid #f16d25;
  outline-offset: calc(4*var(--vw-base));
}

.m4-step__circle {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.m4-step__circle circle {
  fill: transparent;
  stroke: #f16d25;
  stroke-width: 1.5;
  transition: fill .35s ease;
}

.m4-step__button:hover {
  color: #fff;
}

.m4-step__button:hover .m4-step__circle circle {
  fill: #f16d25;
}

.m4-step__label {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  white-space: nowrap;
}

.m4-step__zh {
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: calc(22*var(--vw-base));
  letter-spacing: .2em;
  line-height: 1.35;
}

.m4-step__en {
  margin-top: calc(4*var(--vw-base));
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: calc(20*var(--vw-base));
  letter-spacing: .05em;
  line-height: 1.35;
}

.m4-step__details {
  position: absolute;
  left: 0;
  top: calc(285*var(--vw-base));
  width: calc(330*var(--vw-base));
  opacity: 1;
  visibility: visible;
  pointer-events: none;
}

.m4-step__details-list {
  position: relative;
  width: 100%;
  height: calc(387*var(--vw-base));
  margin: 0;
  padding: 0;
  list-style: none;
  --m4-detail-half-duration: .267857s;
  --m4-detail-half-gap: .0625s;
  --m4-detail-sequence-duration: calc(var(--m4-detail-half-duration) * 2 + var(--m4-detail-half-gap));
  --m4-detail-text-delay: .2s;
}

.m4-step__detail {
  position: absolute;
  left: 0;
  width: calc(330*var(--vw-base));
  height: calc(87*var(--vw-base));
  opacity: 0;
  transform: none;
  transition: opacity .24s ease-out;
  transition-delay: var(--m4-detail-exit-delay, 0s);
  will-change: opacity, transform;
}

.m4-step__detail:nth-child(1) {
  top: 0;
  --m4-detail-enter-delay: 0s;
}

.m4-step__detail:nth-child(2) {
  top: calc(72*var(--vw-base));
  --m4-detail-enter-delay: var(--m4-detail-sequence-duration);
}

.m4-step__detail:nth-child(3) {
  top: calc(144*var(--vw-base));
  --m4-detail-enter-delay: calc(var(--m4-detail-sequence-duration) * 2);
}

.m4-step__detail:nth-child(4) {
  top: calc(216*var(--vw-base));
  --m4-detail-enter-delay: calc(var(--m4-detail-sequence-duration) * 3);
}

.m4-step__detail:nth-child(5) {
  top: calc(288*var(--vw-base));
  --m4-detail-enter-delay: calc(var(--m4-detail-sequence-duration) * 4);
}

/* 進場由上往下，退場用 nth-last-child 反向由下往上。 */
.m4-step__detail:nth-last-child(1) {
  --m4-detail-exit-delay: 0s;
}

.m4-step__detail:nth-last-child(2) {
  --m4-detail-exit-delay: .2s;
}

.m4-step__detail:nth-last-child(3) {
  --m4-detail-exit-delay: .4s;
}

.m4-step__detail:nth-last-child(4) {
  --m4-detail-exit-delay: .6s;
}

.m4-step__detail:nth-last-child(5) {
  --m4-detail-exit-delay: .8s;
}

.m4-step:hover .m4-step__detail {
  opacity: 1;
  transition-delay: var(--m4-detail-enter-delay, 0s);
}

.m4-step__detail-graphic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  mask: url("#m4-detail-curve-mask");
  mask-type: luminance;
}

.m4-step__detail-loop {
  fill: none;
  stroke: #f16d25;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--m4-detail-half-duration) linear;
  transition-delay: var(--m4-detail-exit-delay, 0s);
}

.m4-step:hover .m4-step__detail-loop--right {
  stroke-dashoffset: 0;
  transition-delay: var(--m4-detail-enter-delay, 0s);
}

.m4-step:hover .m4-step__detail-loop--left {
  stroke-dashoffset: 0;
  transition-delay: calc(var(--m4-detail-enter-delay, 0s) + var(--m4-detail-half-duration) + var(--m4-detail-half-gap));
}

.m4-step__detail-arrow {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.m4-step__detail-arrow.is-active {
  opacity: 1;
}

.m4-step__detail-arrow.is-visible {
  visibility: visible;
}

.m4-step__detail-arrow-flow-visual {
  opacity: 0;
}

.m4-step__detail-text {
  position: absolute;
  left: 50%;
  top: 100%;
  z-index: 1;
  display: block;
  padding: 0 calc(8*var(--vw-base));
  background: transparent;
  color: #595959;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 400;
  font-size: calc(16*var(--vw-base));
  letter-spacing: .05em;
  line-height: 1.35;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .24s ease-out;
  transition-delay: var(--m4-detail-exit-delay, 0s);
  white-space: nowrap;
}

.m4-step:hover .m4-step__detail-text {
  opacity: 1;
  transition-delay: calc(var(--m4-detail-enter-delay, 0s) + var(--m4-detail-text-delay));
}

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

  .main4.is-inview .txt h2,
  .main4.is-inview .txt h3,
  .main4.is-inview .txt p {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .main4.is-animation-active .m4-step {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .m4-step__button,
  .m4-step__circle circle,
  .m4-step__details,
  .m4-step__detail,
  .m4-step__detail-loop,
  .m4-step__detail-text,
  .m4-step__detail-arrow {
    transition: none;
  }

  .m4-step__detail-arrow-flow-visual {
    opacity: 1;
  }
}