html {
  font-size: 15px !important;
}

body {
  font-family: Microsoft JhengHei;
}

img {
  max-width: unset;
}

@font-face {
  font-family: arial;
  src: url(font-family/arial.ttf);
}

@font-face {
  font-family: Monotype-SohoGothicPro-MediumItalic;
  src: url(font-family/Monotype-SohoGothicPro-MediumItalic.otf);
}

@font-face {
  font-family: SohoGothicPro-Bold;
  src: url(font-family/SohoGothicPro-Bold.otf);
}

/* position */

.top-0 {
  top: 0;
}

.left-0 {
  left: 0;
}

.bottom-0 {
  bottom: 0;
}

.translate-middle {
  transform: translate(-50%, -50%);
}

/* background image */

.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

.bg-top {
  background-position: top;
}

.bg-right {
  background-position: right;
}

.bg-no-repeat {
  background-repeat: no-repeat;
}

/* ratio */
/*
.ratio {
  position: relative;
  width: 100%;
}

.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-16x9 {
  padding-top: calc(9 / 16 * 100%);
}
*/

/* first cut */

.card-1-mb {
  min-height: 100vh;
  height: calc(131 / 69 * 100vw);
  overflow: hidden;
  background-size: cover;
  background-position: 50% 75%;
  position: relative;
}

.card-1-mb .title-position {
  position: absolute;
  transform: translateY(-100%);
}

.card-1-mb .title-style {
  color: #99cc33;
  font-size: 18vw;
  font-family: Monotype-SohoGothicPro-MediumItalic;
  text-shadow: 0.8vw 0.7vw 1vw #000;
  line-height: 1.2;
}

.card-1-mb .title-1 {
  top: 22.5%;
  left: 20%;
}

.card-1-mb .title-2 {
  top: 33%;
  right: 10%;
  text-align: end;
}

.card-1-mb .title-style .bottom-line {
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 200%;
  padding-top: 5%;
  background-image: radial-gradient(#44c1ff 0%, #00abff 20%, transparent 70%);
}

.card-1-mb .title-1.title-style .bottom-line {
  transform: translate(-50%, 0%);
  left: 20%;
}

.card-1-mb .title-2.title-style .bottom-line {
  transform: translate(50%, 0%);
  right: 20%;
}

.card-1-mb .subtitle-position {
  position: absolute;
  transform: translateY(-100%);
  top: 42.5%;
  right: 15%;
}

.card-1-mb .subtitle-style {
  color: #fff;
  font-size: 7vw;
  font-family: SohoGothicPro-Bold;
  font-style: italic;
  text-align: end;
  text-shadow: 0.8vw 0.7vw 1vw #000;
  line-height: 1.15;
}

.tw.card-1-mb .subtitle-position,
.cn.card-1-mb .subtitle-position {
  top: 41.5%;
  right: 14%;
}

.tw.card-1-mb .subtitle-style,
.cn.card-1-mb .subtitle-style {
  width: 46vw;
}

.card-1-mb .content-position {
  position: absolute;
  transform: translateY(-100%);
  top: 50%;
  right: 15%;
}

.card-1-mb .content-style {
  color: #e5c01f;
  font-size: 4.25vw;
  font-family: arial;
  font-style: italic;
  text-align: end;
  line-height: 1.25;
}

.tw.card-1-mb .content-style,
.cn.card-1-mb .content-style {
  font-size: 4.3vw;
  font-family: Microsoft JhengHei;
  font-style: normal;
  line-height: 1.55;
}

/* second cut */

.card-2-mb {
  min-height: 100vh;
  height: calc(8 / 3 * 100vw);
  overflow: hidden;
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
}

.card-2-mb .title-position {
  position: absolute;
  transform: translateY(-100%);
  top: 26%;
  left: 20%;
}

.card-2-mb .title-style {
  color: #99cc33;
  font-size: 15vw;
  font-family: Monotype-SohoGothicPro-MediumItalic;
  text-shadow: 0.8vw 0.7vw 1vw #000;
  line-height: 1.1;
}

.card-2-mb .content-position {
  position: absolute;
  transform: translateY(-100%);
  top: 31.5%;
  left: 20%;
}

.card-2-mb .content-style {
  color: #fff;
  font-size: 4.75vw;
  font-family: arial;
  text-shadow: 0.5vw 0.35vw 0.2vw #000;
}

.tw.card-2-mb .title-1-position,
.cn.card-2-mb .title-1-position {
  position: absolute;
  top: 17%;
  left: 8%;
  width: 80%;
  transform: translateY(-100%);
}

.tw.card-2-mb .title-2-position,
.cn.card-2-mb .title-2-position {
  position: absolute;
  top: 29%;
  right: 8%;
  width: 80%;
  transform: translateY(-100%);
}

.tw.card-2-mb .title-1-position .subtitle-img,
.tw.card-2-mb .title-2-position .title-img,
.cn.card-2-mb .title-1-position .subtitle-img,
.cn.card-2-mb .title-2-position .title-img {
  text-align: end;
  margin-top: 1.5vw;
}

.tw.card-2-mb .title-1-position .title-img > img,
.tw.card-2-mb .title-2-position .title-img > img,
.cn.card-2-mb .title-1-position .title-img > img,
.cn.card-2-mb .title-2-position .title-img > img {
  width: 57vw;
  /* -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9)); */
}

.tw.card-2-mb .title-1-position .subtitle-img > img,
.tw.card-2-mb .title-2-position .subtitle-img > img,
.cn.card-2-mb .title-1-position .subtitle-img > img,
.cn.card-2-mb .title-2-position .subtitle-img > img {
  width: 40vw;
  /* -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9)); */
}

.card-2-mb .brief-1-position {
  position: absolute;
  top: 74.5%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-2-mb .brief-2-position {
  position: absolute;
  top: 89%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card-2-mb .brief-img {
  margin-right: 6vw;
  margin-left: 3vw;
}

.card-2-mb .brief-img > img {
  width: 28vw;
  -webkit-filter: drop-shadow(0.4vw 0.4vw 0.4vw rgba(0, 0, 0, 0.6));
  filter: drop-shadow(0.4vw 0.4vw 0.4vw rgba(0, 0, 0, 0.6));
}

.card-2-mb .brief-content {
  color: #fff;
  font-size: 4.5vw;
  font-family: arial;
  text-shadow: 0.2vw 0.2vw 0.3vw #000;
  line-height: 1.15;
  white-space: nowrap;
  margin: auto 0;
}

.card-2-mb .brief-content-highlight {
  color: #e5c01f;
  font-weight: 600;
}

.tw.card-2-mb .brief-content,
.cn.card-2-mb .brief-content {
  font-family: Microsoft JhengHei;
  line-height: 1.45;
}

.cn.card-2-mb .brief-content-highlight,
.tw.card-2-mb .brief-content-highlight {
  font-weight: 500;
}

.card-2-mb .fadeIn:not([style*="none"]) .brief-content {
  animation-name: showCard2BriefTextMB;
  animation-delay: 0.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes showCard2BriefTextMB {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* third cut */

.card-3-mb {
  min-height: 100vh;
  height: calc(8 / 3 * 100vw);
  overflow: hidden;
  background-size: cover;
  background-position: 5% 50%;
  position: relative;
}

.card-3-mb .title-position {
  position: absolute;
  transform: translateY(-100%);
  top: 44.5%;
  left: 13%;
}

.card-3-mb .title-style {
  color: #99cc33;
  font-size: 15vw;
  font-family: Monotype-SohoGothicPro-MediumItalic;
  text-shadow: 0.8vw 0.7vw 1vw #000;
  line-height: 1;
}

.tw.card-3-mb .title-style,
.cn.card-3-mb .title-style {
  font-size: inherit;
}

.tw.card-3-mb .title-position,
.cn.card-3-mb .title-position {
  top: 43.75%;
  left: 10%;
  width: 76%;
}

.tw.card-3-mb .title-position .subtitle-img,
.cn.card-3-mb .title-position .subtitle-img {
  text-align: end;
  margin-top: 1.5vw;
}

.tw.card-3-mb .title-position .title-img > img,
.cn.card-3-mb .title-position .title-img > img {
  width: 57vw;
  /* -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9)); */
}

.tw.card-3-mb .title-position .subtitle-img > img,
.tw.card-3-mb .title-position .subtitle-img > img,
.cn.card-3-mb .title-position .subtitle-img > img,
.cn.card-3-mb .title-position .subtitle-img > img {
  width: 40vw;
  /* -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9)); */
}

.card-3-mb .subtitle-position {
  position: absolute;
  transform: translateY(-100%);
  top: 51.5%;
  left: 13%;
}

.tw.card-3-mb .subtitle-position,
.cn.card-3-mb .subtitle-position {
  left: 10%;
  top: 50.5%;
}

.card-3-mb .subtitle-style {
  color: #fff;
  font-size: 4.75vw;
  font-family: arial;
  text-shadow: 0.2vw 0.2vw 0.3vw #000;
  line-height: 1.1;
}

.tw.card-3-mb .subtitle-style,
.cn.card-3-mb .subtitle-style {
  font-size: 4.5vw;
  font-family: Microsoft JhengHei;
  line-height: 1.45;
}

.card-3-mb .brief-1-position {
  position: absolute;
  top: 61%;
  left: 41%;
}

.card-3-mb .brief-2-position {
  position: absolute;
  top: 75.5%;
  left: 41%;
}

.card-3-mb .brief-3-position {
  position: absolute;
  top: 90%;
  left: 41%;
}

.tw.card-3-mb .brief-1-position,
.cn.card-3-mb .brief-1-position {
  position: absolute;
  top: 61%;
  left: 35%;
}

.tw.card-3-mb .brief-2-position,
.cn.card-3-mb .brief-2-position {
  position: absolute;
  top: 74.5%;
  left: 35%;
}

.tw.card-3-mb .brief-3-position,
.cn.card-3-mb .brief-3-position {
  position: absolute;
  top: 88%;
  left: 35%;
}

.card-3-mb .brief-img {
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
}

.card-3-mb .brief-1-position .brief-img {
  left: 0;
}

.card-3-mb .brief-2-position .brief-img {
  left: 17vw;
}

.card-3-mb .brief-3-position .brief-img {
  left: 0;
}

.card-3-mb .brief-img > img {
  width: 30vw;
}

.card-3-mb .brief-position .just-position {
  position: absolute;
  left: 0;
  transform: translate(-50%, -50%);
}

.card-3-mb .brief-1-position .brief-content {
  position: absolute;
  top: 16vw;
  left: 15vw;
  transform: translateX(-50%);
}

.card-3-mb .brief-2-position .brief-content {
  position: absolute;
  top: 16vw;
  left: calc(15vw + 17vw);
  transform: translateX(-50%);
}

.card-3-mb .brief-3-position .brief-content {
  position: absolute;
  top: 16vw;
  left: 15vw;
  transform: translateX(-50%);
}

.tw.card-3-mb .brief-1-position .brief-content,
.cn.card-3-mb .brief-1-position .brief-content,
.tw.card-3-mb .brief-2-position .brief-content,
.cn.card-3-mb .brief-2-position .brief-content,
.tw.card-3-mb .brief-3-position .brief-content,
.cn.card-3-mb .brief-3-position .brief-content {
  top: 50%;
  left: 34vw;
  transform: translateY(-50%);
}

.tw.card-3-mb .brief-2-position .brief-content,
.cn.card-3-mb .brief-2-position .brief-content {
  left: calc(34vw + 17vw);
}

.card-3-mb .brief-content {
  color: #e5c01f;
  font-weight: 600;
  font-size: 4vw;
  white-space: nowrap;
  font-family: arial;
}

.tw.card-3-mb .brief-content,
.cn.card-3-mb .brief-content {
  font-weight: 500;
  font-family: Microsoft JhengHei;
}

.card-3-mb .fadeIn:not([style*="none"]) .brief-content {
  animation-name: showCard3BriefTextMB;
  animation-delay: 0.3s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes showCard3BriefTextMB {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* fourth cut */

.card-4-mb {
  min-height: 100vh;
  height: calc(8 / 3 * 100vw);
  overflow: hidden;
  background-size: cover;
  background-position: 0% 100%;
  position: relative;
}

.card-4-mb .title-position {
  position: absolute;
  transform: translateY(-100%);
  top: 20%;
  left: 8%;
}

.card-4-mb .title-style {
  color: #99cc33;
  font-size: 15vw;
  font-family: Monotype-SohoGothicPro-MediumItalic;
  text-shadow: 0.8vw 0.7vw 1vw #000;
  line-height: 1.1;
}

.tw.card-4-mb .title-style,
.cn.card-4-mb .title-style {
  font-size: inherit;
}

.tw.card-4-mb .title-position,
.cn.card-4-mb .title-position {
  top: 19%;
  left: 8%;
  width: 80%;
}

.tw.card-4-mb .title-position .subtitle-img,
.cn.card-4-mb .title-position .subtitle-img {
  text-align: end;
  margin-top: 1.5vw;
}

.tw.card-4-mb .title-position .title-img > img,
.cn.card-4-mb .title-position .title-img > img {
  width: 57vw;
  /* -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9)); */
}

.tw.card-4-mb .title-position .subtitle-img > img,
.cn.card-4-mb .title-position .subtitle-img > img {
  width: 40vw;
  /* -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.9)); */
}

.card-4-mb .subtitle-position {
  position: absolute;
  top: 22%;
  left: 8%;
}

.tw.card-4-mb .subtitle-position,
.cn.card-4-mb .subtitle-position {
  top: 21%;
}

.card-4-mb .subtitle-style {
  color: #fff;
  font-size: 4.75vw;
  font-family: arial;
  text-shadow: 0.2vw 0.2vw 0.3vw #000;
  line-height: 1.2;
}

.tw.card-4-mb .subtitle-style,
.cn.card-4-mb .subtitle-style {
  font-family: Microsoft JhengHei;
  line-height: 1.5;
}

.card-4-mb .subtitle-style .subtitle-content-highlight {
  color: #e5c01f;
  font-weight: 600;
}

.tw.card-4-mb .subtitle-style .subtitle-content-highlight,
.cn.card-4-mb .subtitle-style .subtitle-content-highlight {
  font-weight: 500;
}

.card-4-mb .brief-img-position.brief-img-1 {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, 50%);
}

.card-4-mb .brief-img-position.brief-img-2 {
  position: absolute;
  right: 56.25%;
  top: 52.5%;
  transform: translateY(-50%);
}

.card-4-mb .brief-img-position.brief-img-3 {
  position: absolute;
  left: 56.25%;
  top: 52.5%;
  transform: translateY(-50%);
}

.card-4-mb .brief-img-position img {
  width: 29vw;
  -webkit-filter: drop-shadow(0.4vw 0.4vw 0.4vw rgba(0, 0, 0, 0.6));
  filter: drop-shadow(0.4vw 0.4vw 0.4vw rgba(0, 0, 0, 0.6));
}

.card-4-mb .prd-detail-position {
  position: absolute;
  bottom: 17%;
  right: 57%;
}

.card-4-mb .prd-detail {
  position: relative;
}

.card-4-mb .prd-detail.fadeIn:not([style*="none"]) {
  animation-name: prdDetailGrowMB;
  animation-delay: 0.4s;
  animation-duration: 1.2s;
  animation-fill-mode: forwards;
  width: 0vw;
}

@keyframes prdDetailGrowMB {
  0% {
    width: 0vw;
  }

  100% {
    width: 28vw;
  }
}

.card-4-mb .prd-detail-pic {
  width: 100%;
  -webkit-filter: drop-shadow(0.3vw 0.3vw 0.3vw rgba(0, 0, 0, 0.6));
  filter: drop-shadow(0.3vw 0.3vw 0.3vw rgba(0, 0, 0, 0.6));
}

.card-4-mb .prd-detail-note {
  position: absolute;
  top: -15%;
  left: -16.5%;
  width: 113%;
}

.tw.card-4-mb .prd-detail-note,
.cn.card-4-mb .prd-detail-note {
  position: absolute;
  top: -16%;
  left: -16%;
  width: 119%;
}

.card-1,
.card-2,
.card-3,
.card-4 {
  display: none;
}

.card-1-mb,
.card-2-mb,
.card-3-mb,
.card-4-mb {
  display: block;
}

@media only screen and (min-width: 828px) {
  .card-1,
  .card-2,
  .card-3,
  .card-4 {
    display: block;
  }

  .card-1-mb,
  .card-2-mb,
  .card-3-mb,
  .card-4-mb {
    display: none;
  }

  .card-1 .set-top-30,
  .card-2 .set-top-30,
  .card-3 .set-top-30,
  .card-4 .set-top-30 {
    position: absolute;
    top: 30%;
    left: 0;
    width: 100%;
    height: 70%;
  }

  .card-1 .stretch-height-as-banner,
  .card-2 .stretch-height-as-banner,
  .card-3 .stretch-height-as-banner,
  .card-4 .stretch-height-as-banner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: calc(10 / 7 * 100%);
  }

  /* first cut */

  .card-1 {
    min-height: calc(5 / 12 * 100vw);
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-position: 71% 18%;
    position: relative;
  }

  .card-1 .title-position {
    position: absolute;
    transform: translateY(-100%);
    top: calc(24% + 10vw);
    right: 45%;
  }

  .card-1 .title-style {
    color: #99cc33;
    font-size: 7.5vw;
    font-family: Monotype-SohoGothicPro-MediumItalic;
    text-align: end;
    text-shadow: 0.3vw 0.3vw 0.5vw #000;
  }

  .card-1 .title-style .bottom-line {
    position: absolute;
    transform: translate(-50%, -90%);
    bottom: 0;
    left: 36%;
    z-index: -1;
    width: 100%;
    padding-top: 2.5%;
    background-image: radial-gradient(#44c1ff 1%, #00abff 20%, transparent 70%);
  }

  .card-1 .subtitle-position {
    position: absolute;
    transform: translateY(-100%);
    top: calc(41% + 10vw);
    right: 46%;
  }

  .card-1 .subtitle-style {
    color: #fff;
    font-size: 3.15vw;
    font-family: SohoGothicPro-Bold;
    font-style: italic;
    text-align: end;
    text-shadow: 0.25vw 0.3vw 0.3vw #000;
  }

  .tw.card-1 .subtitle-position,
  .cn.card-1 .subtitle-position {
    position: absolute;
    transform: translateY(-100%);
    top: calc(41% + 10vw);
    right: 46%;
  }

  .tw.card-1 img.subtitle-style,
  .cn.card-1 img.subtitle-style {
    width: 21vw;
  }

  .card-1 .content-position {
    position: absolute;
    transform: translateY(-100%);
    top: calc(57% + 10vw);
    right: 47%;
  }

  .card-1 .content-style {
    color: #e5c01f;
    font-size: 1.9vw;
    font-family: arial;
    font-style: italic;
    text-align: end;
    line-height: 1.25;
  }

  .tw.card-1 .content-style,
  .cn.card-1 .content-style {
    font-family: Microsoft JhengHei;
    font-style: normal;
    font-weight: bold;
  }

  /* second cut */

  .card-2 {
    min-height: calc(5 / 12 * 100vw);
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    position: relative;
  }

  .card-2 .title-position {
    position: absolute;
    top: 37%;
    left: 10%;
    transform: translateY(-100%);
  }

  .card-2 .title-style {
    color: #99cc33;
    font-size: 5.75vw;
    font-family: Monotype-SohoGothicPro-MediumItalic;
    text-shadow: 0.25vw 0.3vw 0.45vw #000;
    line-height: 1.1;
    white-space: nowrap;
  }

  .tw.card-2 img.title-1-position,
  .cn.card-2 img.title-1-position {
    position: absolute;
    top: 22%;
    left: 6%;
    transform: translateY(-100%);
  }

  .tw.card-2 img.title-1-style,
  .cn.card-2 img.title-1-style {
    width: 38vw;
    -webkit-filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
  }

  .tw.card-2 img.title-2-position,
  .cn.card-2 img.title-2-position {
    position: absolute;
    top: 37%;
    left: 12%;
    transform: translateY(-100%);
  }

  .tw.card-2 img.title-2-style,
  .cn.card-2 img.title-2-style {
    width: 38vw;
    -webkit-filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
  }

  .card-2 .content-position {
    position: absolute;
    top: 48%;
    left: 10%;
    transform: translateY(-100%);
  }

  .card-2 .content-style {
    color: #fff;
    font-size: 1.8vw;
    font-family: arial;
    text-shadow: 0.2vw 0.2vw 0.2vw #000;
    white-space: nowrap;
  }

  .card-2 .img-position {
    position: absolute;
    transform: translateX(-50%);
    bottom: 0;
    left: 45%;
  }

  .card-2 .img-style {
    display: inline-block;
    width: 75vw;
  }

  .card-2 .brief-1-position {
    position: absolute;
    bottom: 52%;
    right: 17%;
    transform: translateX(50%);
  }

  .card-2 .brief-2-position {
    position: absolute;
    top: 54%;
    right: 17%;
    transform: translateX(50%);
  }

  .card-2 .brief-img {
    margin-bottom: 2.25vh;
    text-align: center;
    padding-right: 2.25vw;
  }

  .card-2 .brief-img > img {
    width: calc(7vw + 11vh);
    -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.6));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.6));
  }

  .card-2 .brief-content {
    color: #fff;
    font-size: 1.8vw;
    font-family: arial;
    text-shadow: 0.2vw 0.2vw 0.2vw #000;
    line-height: 1.15;
    white-space: nowrap;
  }

  .card-2 .brief-content-highlight {
    color: #e5c01f;
    font-weight: 600;
  }

  .tw.card-2 .brief-content,
  .cn.card-2 .brief-content {
    text-align: center;
    font-size: 1.65vw;
    font-family: Microsoft JhengHei;
    text-shadow: 0.1vw 0.07vw 0.05vw #000;
    line-height: 1.5;
    font-weight: 600;
  }

  .card-2 .fadeIn:not([style*="none"]) .brief-content {
    animation-name: showCard2BriefText;
    animation-delay: 1.2s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  @keyframes showCard2BriefText {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  /* third cut */

  .card-3 {
    min-height: calc(5 / 12 * 100vw);
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-position-x: 75%;
    position: relative;
  }

  .card-3 .title-position {
    position: absolute;
    top: 30%;
    left: 37.5%;
    transform: translateY(-100%);
  }

  .card-3 .title-style {
    color: #99cc33;
    font-size: 5.75vw;
    font-family: Monotype-SohoGothicPro-MediumItalic;
    text-align: end;
    text-shadow: 0.25vw 0.3vw 0.45vw #000;
  }

  .tw.card-3 img.title-position,
  .cn.card-3 img.title-position {
    position: absolute;
    top: 22%;
    left: 37.5%;
    transform: translateY(-100%);
  }

  .tw.card-3 img.title-style,
  .cn.card-3 img.title-style {
    width: 40vw;
    -webkit-filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
  }

  .card-3 .subtitle-position {
    position: absolute;
    top: 37%;
    left: 37.5%;
    transform: translateY(-100%);
  }

  .card-3 .subtitle-style {
    color: #fff;
    font-size: 1.8vw;
    font-family: arial;
    text-shadow: 0.2vw 0.2vw 0.2vw #000;
  }

  .tw.card-3 .subtitle-style,
  .cn.card-3 .subtitle-style {
    font-size: 1.8vw;
    font-family: Microsoft JhengHei;
    font-style: normal;
    white-space: nowrap;
    font-weight: bold;
  }

  .card-3 .brief-1-position {
    position: absolute;
    bottom: 50%;
    left: 18.6%;
    transform: translate(-50%);
  }

  .card-3 .brief-2-position {
    position: absolute;
    top: 50%;
    left: 17.2%;
    transform: translate(-100%);
  }

  .card-3 .brief-3-position {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(0%);
  }

  .card-3 .brief-img {
    text-align: center;
    margin: 0.8vw 0;
  }

  .card-3 .brief-img > img {
    width: calc(7vw + 11vh);
  }

  .card-3 .brief-content {
    color: #e5c01f;
    font-weight: 600;
    font-size: 1.8vw;
    white-space: nowrap;
    font-family: arial;
    text-align: center;
  }

  .tw.card-3 .brief-content,
  .cn.card-3 .brief-content {
    color: #e5c01f;
    font-family: Microsoft JhengHei;
    font-size: 1.8vw;
    white-space: nowrap;
    text-shadow: 0.1vw 0.1vw 0.1vw #000;
  }

  .card-3 .fadeIn:not([style*="none"]) .brief-content {
    animation-name: showCard3BriefText;
    animation-delay: 1.8s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

  @keyframes showCard3BriefText {
    0% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  /* fourth cut */

  .card-4 {
    min-height: calc(5 / 12 * 100vw);
    height: 100vh;
    overflow: hidden;
    background-size: cover;
    background-position: left bottom;
    position: relative;
  }

  .card-4 .title-position {
    position: absolute;
    top: 28%;
    right: 37%;
    transform: translateY(-100%);
  }

  .card-4 .title-style {
    color: #99cc33;
    font-size: 5.75vw;
    font-family: Monotype-SohoGothicPro-MediumItalic;
    text-align: end;
    text-shadow: 0.25vw 0.3vw 0.45vw #000;
  }

  .tw.card-4 img.title-position,
  .cn.card-4 img.title-position {
    position: absolute;
    top: 25%;
    right: 37%;
    transform: translateY(-100%);
  }

  .cn.card-4 img.title-style,
  .tw.card-4 img.title-style {
    width: 40vw;
    -webkit-filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
    filter: drop-shadow(0.1vw 0.1vw 0.05vw rgba(0, 0, 0, 0.9));
  }

  .card-4 .subtitle-position {
    position: absolute;
    top: 30%;
    right: 37.5%;
  }

  .card-4 .subtitle-style {
    color: #fff;
    font-size: 1.68vw;
    font-family: arial;
    text-shadow: 0.2vw 0.2vw 0.2vw #000;
    text-align: end;
    line-height: 1.4;
  }

  .tw.card-4 .subtitle-position,
  .cn.card-4 .subtitle-position {
    position: absolute;
    top: 30%;
    right: 37.5%;
  }

  .tw.card-4 .subtitle-style,
  .cn.card-4 .subtitle-style {
    font-size: 1.8vw;
    font-family: Microsoft JhengHei;
    font-style: normal;
    white-space: nowrap;
    font-weight: bold;
    text-shadow: 0.1vw 0.1vw 0.1vw #000;
  }

  .card-4 .subtitle-style .subtitle-content-highlight {
    color: #e5c01f;
    font-weight: 600;
  }

  .card-4 .prd-detail-position {
    position: absolute;
    bottom: 31%;
    left: 65vh;
    transform: translateY(40%);
  }

  .card-4 .prd-detail {
    position: relative;
  }

  .card-4 .prd-detail-animation .fadeIn:not([style*="none"]) .prd-detail {
    animation-name: prdDetailGrow;
    animation-delay: 0.5s;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    width: 0;
  }

  @keyframes prdDetailGrow {
    0% {
      width: 0;
    }

    100% {
      width: 17vw;
    }
  }

  .card-4 .prd-detail > img.prd-detail-pic {
    width: 100%;
  }

  .card-4 .prd-detail > img.prd-detail-note {
    position: absolute;
    bottom: -26%;
    right: -8%;
    width: 74%;
  }

  .cn.card-4 .prd-detail > img.prd-detail-note,
  .tw.card-4 .prd-detail > img.prd-detail-note {
    display: none;
  }

  .card-4 .prd-detail > img.prd-detail-note-cn,
  .card-4 .prd-detail > img.prd-detail-note-tw {
    display: none;
  }

  .cn.card-4 .prd-detail > img.prd-detail-note-cn,
  .tw.card-4 .prd-detail > img.prd-detail-note-tw {
    display: block;
    position: absolute;
    bottom: -28%;
    right: -16%;
    width: 74%;
  }

  .card-4 .brief-1-position {
    position: absolute;
    top: 20%;
    right: 15%;
    transform: translate(30%, -50%);
  }

  .card-4 .brief-2-position {
    position: absolute;
    top: 50%;
    right: 20%;
    transform: translate(30%, -50%);
  }

  .card-4 .brief-3-position {
    position: absolute;
    top: 80%;
    right: 15%;
    transform: translate(30%, -50%);
  }

  .card-4 .brief-1-position img,
  .card-4 .brief-2-position img,
  .card-4 .brief-3-position img {
    width: calc(7vw + 11vh);
    -webkit-filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.6));
    filter: drop-shadow(0.2vw 0.2vw 0.2vw rgba(0, 0, 0, 0.6));
  }
}