@charset "UTF-8";
/*3d科技假髮*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=REM:ital,wght@0,100..900;1,100..900&display=swap");
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  font-family: "Noto Sans TC", sans-serif;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

p, a, span {
  font-family: "Noto Sans TC", sans-serif;
}

:root {
  --primary-color: #ffd801;
  --secondary-color: #061036;
  --third-color: #061036;
  --third-hover-color: #1b7fcc;
  --hover-btn-color: #2e3f80;
  --text-color: #3c3c4a;
  --text-color-100: #455465;
  --text-color-200: #707070;
  --text-color-300: #b9b9ed;
  --text-color-400: #a8a8a81f;
  --remark-color: #ffff06;
  /*交通攻略*/
  --transportation-color: #461951;
  --taoyuan-color: #734bef;
  --taoyuan-color-2: #591bb2;
  --taoyuan-mrt-color: #822f8f;
  --taipei-mrt-color: #0000fa;
  --guoguang-color: #173182;
  --mrt-normal: #354f9e;
  --mrt-exit: #6482cc;
  --taxi-color: #8b3715;
  --taxi-color-2: #95223b;
  --matsuyama-color: #eebc27;
  --matsuyama-color-2: #aa7815;
  --fuxing-color:#845131;
  --kaohsiung-color: #030a56;
  --kaohsiung-color-2: #045446;
  --route-color: #59a0dd;
  --attractions-color: #356023;
  --k2-color: #efff09;
  --white-color: #ffffff;
  --grey-color: #f0f0eb;
  --grey-color-100: #aaaaaa;
  --grey-color-200: #403939;
  --block-color: #000000;
  --remark-red: #df182c;
  --bg-cololr: #f5f5f5;
  --fb-color: #465a97;
  --line-color: #53e01e;
  --state-color: #d3ba42;
  --float-light-color: #455465;
  --float-light-hover: #061036;
  --float-dark-bg: #a09688;
  --float-dark-text: #ffffff;
}

.main-wrapper {
  position: relative;
}

.mark-red {
  color: var(--remark-red) !important;
}

.mark {
  display: inline; /* 讓 box-decoration-break 生效 */
  padding: 0.1em 0.4em;
  background: transparent;
  background-image: linear-gradient(to top, rgba(255, 225, 0, 0.7), rgba(255, 225, 0, 0.3), 50%, rgba(255, 225, 0, 0));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mark2 {
  display: inline; /* 讓 box-decoration-break 生效 */
  padding: 0.1em 0.4em;
  background: transparent;
  background-image: linear-gradient(to top, rgba(255, 225, 0, 0.5), rgba(255, 225, 0, 0.2) 10%, rgba(255, 225, 0, 0));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mark3 {
  display: inline; /* 讓 box-decoration-break 生效 */
  background: transparent;
  background-image: linear-gradient(to right, rgba(255, 225, 0, 0.7), rgba(255, 225, 0, 0.3) 50%, rgba(255, 225, 0, 0.5));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mark4 {
  display: inline; /* 讓 box-decoration-break 生效 */
  background: transparent;
  background-image: linear-gradient(to right, rgba(255, 225, 0, 0.7), rgba(255, 225, 0, 0.3) 50%, rgba(255, 225, 0, 0.5));
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.index-title {
  font-size: 36px;
  font-weight: bold;
  font-family: "REM", sans-serif;
  color: var(--primary-color);
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}
@media (max-width: 900.98px) {
  .index-title {
    font-size: 28px;
  }
}
@media (max-width: 480.98px) {
  .index-title {
    font-size: 21px;
  }
}
.index-title span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-20px);
  animation: slideInLeft 0.5s forwards;
}

.index-subtitle {
  font-size: 54px;
  font-weight: 700;
  color: var(--secondary-color);
  margin-left: 100px;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInLeft 0.8s forwards;
  position: relative;
  z-index: 2;
}
@media (max-width: 1500.98px) {
  .index-subtitle {
    font-size: 52px;
  }
}
@media (max-width: 900.98px) {
  .index-subtitle {
    font-size: 48px;
    margin-left: 60px;
  }
}
@media (max-width: 480.98px) {
  .index-subtitle {
    font-size: 36px;
    margin-left: 40px;
  }
}
.index-subtitle span {
  display: inline-block;
  margin: 0 -4px;
}

@keyframes slide-up-reenter {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  } /* 先推出去 */
  51% {
    transform: translateY(100%);
  } /* 瞬間回到底部 */
  100% {
    transform: translateY(0);
  } /* 再移上來 */
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes gradientMove {
  0% {
    background-position: 0% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scrolldown {
  0% {
    transform: translateY(0); /* 初始位置 */
    opacity: 0.8;
  }
  100% {
    transform: translateY(10px); /* 向下移動 20px */
    opacity: 0.3;
  }
}
/*首頁 short 背景移動動畫 */
@keyframes move-bg {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -1000px 0; /* 向左移動 */
  }
}
/* 素人現身說法 amateur 上下漂浮動畫 */
@keyframes floatVar {
  0%, 100% {
    transform: translateY(var(--base, 0px));
  }
  50% {
    transform: translateY(calc(var(--base, 0px) + var(--amp, 0px)));
  }
}
/* ✅short-TITLE ATDER 不規則晃動動畫 */
@keyframes wobble {
  0%, 100% {
    transform: rotate(0deg);
  }
  5% {
    transform: rotate(3deg);
  }
  10% {
    transform: rotate(-4deg);
  }
  15% {
    transform: rotate(2deg);
  }
  20% {
    transform: rotate(-3deg);
  }
  25% {
    transform: rotate(1deg);
  }
  30%, 100% {
    transform: rotate(0deg);
  }
}
/*順時針旋轉*/
@keyframes spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/*逆時針旋轉*/
@keyframes spin-reverse {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
.space-height {
  padding: 45px 0px;
}
@media (max-width: 1210.98px) {
  .space-height {
    padding: 40px 0px;
  }
}
@media (max-width: 834.98px) {
  .space-height {
    padding: 39px 0px;
  }
}

.domo-all-menu {
  background-color: #fff;
  width: 100%; /* 容器的寬度設為父容器的 100% */
  position: fixed;
  box-shadow: 0px 3px 7px rgba(192, 192, 192, 0.76);
  z-index: 99;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  max-width: calc(100% - 160px);
  padding: 8px 0px;
}
@media (max-width: 1420.98px) {
  .header-content {
    max-width: calc(100% - 80px);
  }
}
@media (max-width: 1242.98px) {
  .header-content {
    max-width: calc(100% - 40px);
  }
}
@media (max-width: 1200.98px) {
  .header-content {
    max-width: calc(100% - 120px);
  }
}
@media (max-width: 834.98px) {
  .header-content {
    max-width: calc(100% - 40px);
  }
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.header-logo a {
  display: block;
  flex-shrink: 0;
  background: url(../image/logo.svg) no-repeat;
  background-size: contain;
  width: 280px;
  height: 83px;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 1520.98px) {
  .header-logo a {
    width: 224px;
    height: 66px;
  }
}
@media (max-width: 1438.98px) {
  .header-logo a {
    width: 250px;
    height: 73px;
  }
}
@media (max-width: 1210.98px) {
  .header-logo a {
    width: 212px;
    height: 62px;
  }
}

/*nav-icon*/
.nav-icon .nav-list {
  display: flex;
}
@media (max-width: 540.98px) {
  .nav-icon .nav-list {
    display: none;
  }
}

.nav-menu {
  display: flex;
}

.nav-item {
  font-family: "Noto Sans TC", sans-serif;
  color: #707070;
  font-size: 16px;
  padding: 36px 16px;
  display: flex;
}
@media (max-width: 1520.98px) {
  .nav-item {
    padding: 36px 10px;
    letter-spacing: 1px;
  }
}
@media (max-width: 1420.98px) {
  .nav-item {
    padding: 48px 8px;
  }
}
@media (max-width: 1297.98px) {
  .nav-item {
    font-size: 14px;
    padding: 24px 8px;
  }
}
@media (max-width: 1200.98px) {
  .nav-item {
    /* PCmenu-隱藏 */
    display: none;
  }
}
.nav-item a {
  color: #707070;
}

.nav-item .nav-item-iconbox {
  width: 12px;
  height: 12px;
  box-sizing: border-box;
}

.nav-item .nav-item-iconbox img {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.nav-link {
  padding: 8px;
  position: relative;
}

.nav-icon .nav-link .icon-link {
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #646464;
  border-radius: 50%;
}

.nav-link img {
  padding: 5px;
  width: 70%;
  height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
}

.dm-menu {
  background-color: #393939;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 105px;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 16px;
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.4s;
}
@media (max-width: 1297.98px) {
  .dm-menu {
    top: 90px;
  }
}

.nav-list .nav-item {
  cursor: pointer;
}

.nav-menu .nav-list:nth-child(1):hover .dm-menu,
.nav-menu .nav-list:nth-child(2):hover .dm-menu,
.nav-menu .nav-list:nth-child(4):hover .dm-menu,
.nav-menu .nav-list:nth-child(5):hover .dm-menu,
.nav-menu .nav-list:nth-child(6):hover .dm-menu {
  transform: scaleY(1);
}

.dm-menu .dm-menu-list a {
  color: #fff;
  padding: 16px;
}

.dm-menu li a:hover {
  background: #cfc8af;
  color: #393939;
  padding: 16px;
}

.nav-list:hover .nav-item {
  position: relative;
}

.nav-list:hover .nav-item::after {
  content: "";
  position: absolute;
  bottom: 30px; /* 視覺上可微調，讓底線貼近 nav-item 底部 */
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #f4d700; /* 你想要的底線顏色 */
}
@media (max-width: 1297.98px) {
  .nav-list:hover .nav-item::after {
    bottom: 13px;
  }
}

.nav-icon .nav-list .icon-link {
  position: relative;
}

.nav-link span {
  display: none;
}

/* 會員中心 */
.nav-icon .nav-link:nth-child(1):hover a:nth-child(1)::after {
  content: "會員中心";
  letter-spacing: 1px;
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 46px;
  left: -23px;
  z-index: 15;
  width: 62px;
  padding: 8px;
  background-color: #393939;
  border-radius: 8px;
}

.nav-icon .nav-link:nth-child(1):hover a:nth-child(1)::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #393939;
  top: 39px;
  left: 5px;
}

/* 客服中心 */
.nav-icon .nav-link:nth-child(2):hover a:nth-child(1)::after {
  content: "客服中心";
  letter-spacing: 1px;
  font-size: 14px;
  color: #fff;
  position: absolute;
  top: 46px;
  left: -23px;
  z-index: 15;
  width: 62px;
  padding: 8px;
  background-color: #393939; /* 你想要的底線顏色 */
  border-radius: 8px;
}

.nav-icon .nav-link:nth-child(2):hover a:nth-child(1)::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #393939;
  top: 39px;
  left: 5px;
}

/* 語言 */
.nav-icon .nav-link:nth-child(3):hover .language-box {
  transform: scaleY(1);
}

.language-box {
  background-color: #393939;
  position: absolute;
  z-index: 10;
  transform: scaleY(0);
  transform-origin: top;
  transition: 0.4s;
  z-index: 15;
  width: 80px;
  display: block;
  left: -14px;
  top: 54px;
  border-radius: 8px;
}

.language-box::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  z-index: 15;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #393939;
  top: -7px;
  left: 27px;
}

.language-box a {
  font-size: 14px;
  color: #fff;
  text-align: center;
  padding: 8px;
  display: block;
}

.language-box .cn:hover {
  color: #393939; /* 你想要的 hover 顏色 */
  background-color: #f4d700; /* hover 時底線顏色 */
  border-radius: 7px 7px 0px 0px;
}

.language-box .en:hover {
  color: #393939; /* 你想要的 hover 顏色 */
  background-color: #f4d700; /* hover 時底線顏色 */
  border-radius: 0px 0px 7px 7px;
}

.language-box:has(.cn:hover)::after {
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #f4d700;
}

/* 手機版mob-burger */
.domo-mob-nav {
  display: none;
}
@media (max-width: 1200.98px) {
  .domo-mob-nav {
    display: block;
    padding: 16px 8px;
  }
}
@media (max-width: 290px) {
  .domo-mob-nav {
    margin-top: -8px;
  }
}

.mob-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: all 0.4s ease;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #fff;
  z-index: 99;
  overflow-y: auto;
}

.mob-nav-list {
  flex: 1; /* 內容可伸縮填滿空間 */
  overflow-y: auto; /* 內容可滾動 */
}

.mob-im-menu {
  overflow-y: scroll;
}

.mob-im-menu::-webkit-scrollbar {
  display: none;
}

.mobMenu {
  display: none;
}

.domo-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明黑 */
  z-index: 98;
  display: none;
}

.domo-overlay.active1 {
  display: block;
}

@media (max-width: 1200.98px) {
  .domo-mob-burger {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 1200.98px) {
  .domo-mob-burger {
    width: 30px;
    height: 2px;
    background-color: #393939;
    position: relative;
    cursor: pointer;
  }
}

@media (max-width: 1200.98px) {
  .domo-mob-burger::after {
    position: absolute;
    content: "";
    width: 30px;
    height: 2px;
    background-color: #393939;
    top: -10px;
  }
}

@media (max-width: 1200.98px) {
  .domo-mob-burger::before {
    position: absolute;
    content: "";
    width: 30px;
    height: 2px;
    background-color: #393939;
    bottom: -10px;
  }
}

@media (max-width: 1200.98px) {
  .mobMenu {
    display: block;
  }
}

@media (max-width: 1200.98px) {
  .mob-menu {
    background: #393939;
    color: #fff;
    font-family: "Noto Sans TC", sans-serif;
    position: fixed;
    width: 360px;
    z-index: 999;
    right: 0;
    top: 0;
    bottom: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s ease;
    pointer-events: none;
    padding-bottom: 80px;
  }
}
@media (max-width: 540.98px) {
  .mob-menu {
    width: 65%;
  }
}

@media (max-width: 1200.98px) {
  .mob-menu.active1 {
    display: flex;
    flex-direction: column;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (max-width: 1200.98px) {
  .mob-item {
    padding: 8px 16px;
    background: #393939;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
@media (max-width: 540.98px) {
  .mob-item {
    padding: 16px 24px;
  }
}

@media (max-width: 1200.98px) {
  .mob-item-domo {
    width: 100%;
  }
}

@media (max-width: 1200.98px) {
  .mob-item-domo .ta-c:hover {
    color: #fff;
  }
}

@media (max-width: 1200.98px) {
  .mob-toggle {
    display: flex;
    width: 100%;
    font-size: 16px;
  }
}

@media (max-width: 1200.98px) {
  .mob-toggle .arrow {
    width: 10px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    display: inline-block;
    transform: rotate(45deg);
    transition: 0.3s;
    margin-left: 8px;
    margin-top: 4px;
  }
}

@media (max-width: 1200.98px) {
  .mob-navlist.active1 .mob-toggle .arrow {
    transform: rotate(-135deg);
  }
}

@media (max-width: 1200.98px) {
  .mob-navlist.active1 .mob-item {
    background: #645947;
    /* 這是展開時的背景顏色 */
  }
}

@media (max-width: 1200.98px) {
  .mob-in-list {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: #e0ddd3;
    position: relative;
    z-index: 10;
  }
}

@media (max-width: 1200.98px) {
  .mob-navlist.active1 .mob-in-list {
    max-height: 1000px;
    /* 根據內容高度調整 */
  }
}

@media (max-width: 1200.98px) {
  .mob-in-item {
    display: block;
  }
}

@media (max-width: 1200.98px) {
  .mob-in-item a {
    display: block;
    padding: 14px 16px;
    color: #393939;
    font-size: 15px;
    background-color: #cfc8af;
    text-decoration: none;
  }
}
@media (max-width: 360px) {
  .mob-in-item a {
    font-size: 14px;
  }
}

@media (max-width: 1200.98px) {
  .mob-in-item a:hover {
    background: #ccc6b2;
    color: #000;
  }
}

@media (max-width: 1200.98px) {
  .mob-item p {
    color: #fff;
    letter-spacing: 2px;
  }
}
@media (max-width: 360px) {
  .mob-item p {
    font-size: 16px;
    letter-spacing: 1px;
  }
}

@media (max-width: 1200.98px) {
  .mob-item-img {
    margin-bottom: 8px;
  }
}

@media (max-width: 1200.98px) {
  .mob-in-list .mob-in-item a {
    padding: 8px 24px;
  }
}

@media (max-width: 1200.98px) {
  .ta-c {
    text-align: center;
    color: #fff;
    display: block;
  }
}

@media (max-width: 1200.98px) {
  .ta-c .mob-k2-link {
    display: block;
    width: 100%;
  }
}

@media (max-width: 1200.98px) {
  .mob-item .ta-c {
    letter-spacing: 2px;
    font-weight: bold;
  }
}

@media (max-width: 1200.98px) {
  .mob-navlist.active1 .ta-c {
    color: #fff;
  }
}

@media (max-width: 1200.98px) {
  .ta-c span {
    width: 16px;
    height: 16px;
    /* display: inline-flex; */
  }
}

@media (max-width: 1200.98px) {
  .ta-c .mob-k2-link {
    display: block;
  }
}

@media (max-width: 1200.98px) {
  .ta-c span img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 1200.98px) {
  .bg-gary {
    background-color: #6a6b70;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-close {
    position: relative;
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-close::before {
    position: absolute;
    content: "";
    width: 36px;
    height: 2px;
    top: 16px;
    background-color: #fff;
    transform: translateY(9px) rotate(45deg);
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-close::after {
    position: absolute;
    content: "";
    width: 36px;
    height: 2px;
    top: 34px;
    background-color: #fff;
    transform: translateY(-9px) rotate(-45deg);
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-box {
    display: flex;
    justify-content: space-between;
    padding: 25px 8px 16px 16px;
  }
}
@media (max-width: 540.98px) {
  .mob-nav-box {
    padding: 16px 8px 16px 16px;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-icon {
    display: flex;
    opacity: 0;
  }
}
@media (max-width: 540.98px) {
  .mob-nav-icon {
    opacity: 1;
  }
}

@media (max-width: 1200.98px) {
  .mob-nab-list {
    width: 50px;
    height: 50px;
  }
}

@media (max-width: 1200.98px) {
  .mob-nab-list:nth-child(3) {
    display: flex;
    width: 120px;
    align-items: center;
  }
}

@media (max-width: 1200.98px) {
  .mob-nab-list:nth-child(3) a {
    color: #fff;
    display: flex;
    width: 50%;
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 1200.98px) {
  .mob-nab-list {
    padding: 8px;
  }
}

@media (max-width: 1200.98px) {
  .mob-nab-list img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 1200.98px) {
  .domo-mob-box span {
    width: 16px;
    height: 16px;
    display: inline-flex;
    margin-left: 8px;
  }
}

@media (max-width: 1200.98px) {
  .domo-mob-bo span img {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 1200.98px) {
  .arrow {
    display: inline-block;
    transition: transform 0.3s ease;
    margin-left: 8px;
  }
}

@media (max-width: 1200.98px) {
  .mob-navlist.active1 .arrow img {
    transform: rotate(180deg);
  }
}

/* 社群ICON */
@media (max-width: 1200.98px) {
  .mob-nav-main {
    justify-content: space-evenly;
    padding: 16px;
    display: flex;
    background-color: #393939;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-main .mob-nav-sc {
    display: block;
    width: 50px;
    height: 50px;
    text-indent: 101%;
    overflow: hidden;
    white-space: nowrap;
  }
}
@media (max-width: 540.98px) {
  .mob-nav-main .mob-nav-sc {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-sc a {
    display: block;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-main .mob-nav-sc:nth-child(1) {
    background: url(../img/header/ig-w.svg) no-repeat;
    background-size: contain;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-main .mob-nav-sc:nth-child(2) {
    background: url(../img/header/fb-w.svg) no-repeat;
    background-size: contain;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-main .mob-nav-sc:nth-child(3) {
    background: url(../img/header/yt-w.svg) no-repeat;
    background-size: contain;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-main .mob-nav-sc:nth-child(4) {
    background: url(../img/header/line-w.svg) no-repeat;
    background-size: contain;
  }
}

@media (max-width: 1200.98px) {
  .mob-nav-main .mob-nav-sc:nth-child(5) {
    background: url(../img/header/tik-tok-w.svg) no-repeat;
    background-size: contain;
  }
}

@media (max-width: 450.98px) {
  .mob-menu {
    width: 80%;
  }
}

@media (max-width: 450.98px) {
  .mob-nav-main {
    padding: 8px;
  }
}

@media (max-width: 430.98px) {
  .mob-menu {
    width: 100%;
  }
}

@media (max-width: 430.98px) {
  .mob-nav-box {
    padding: 8px 8px 16px 16px;
  }
}

@media (max-width: 430.98px) {
  .mob-item {
    padding: 8px;
  }
}

@media (max-width: 430.98px) {
  .header-logo {
    width: 240px;
  }
}
@media (max-width: 360px) {
  .header-logo {
    width: 220px;
  }
}
@media (max-width: 290px) {
  .header-logo {
    width: 200px;
  }
}

.footer-outbox {
  width: 100%;
  background: #403c39;
  padding: 36px 0px;
  display: flex;
  justify-content: center;
}
@media (max-width: 460.98px) {
  .footer-outbox {
    padding: 24px 0px 8px;
  }
}
.footer-outbox .footer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 580.98px) {
  .footer-outbox .footer-container {
    width: calc(100% - 48px);
  }
}
@media (max-width: 440.98px) {
  .footer-outbox .footer-container {
    width: calc(100% - 32px);
  }
}
.footer-outbox .footer-container .footer-logo {
  margin-bottom: 16px;
}
@media (max-width: 580.98px) {
  .footer-outbox .footer-container .footer-logo {
    order: 1;
  }
}
.footer-outbox .footer-container .footer-logo a {
  display: block;
  flex-shrink: 0;
  background: url(../image/logo-mob-w.svg) no-repeat;
  background-size: contain;
  width: 365px;
  height: 105px;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 440.98px) {
  .footer-outbox .footer-container .footer-logo a {
    width: 280px;
    height: 81px;
  }
}

.footer-tel-box {
  margin-bottom: 32px;
}
@media (max-width: 580.98px) {
  .footer-tel-box {
    order: 2;
  }
}
.footer-tel-box p {
  font-size: 21px;
  font-weight: 500;
  padding: 8px 0px;
  text-align: center;
  color: var(--white-color);
}
.footer-tel-box a {
  font-size: 28px;
  font-weight: 500;
  color: var(--primary-color);
}

.footer-icon-box {
  display: flex;
  margin-bottom: 8px;
}
@media (max-width: 580.98px) {
  .footer-icon-box {
    order: 4;
    margin-bottom: 32px;
  }
}
.footer-icon-box li {
  width: 50px;
  height: 50px;
  margin: 0px 8px;
}
.footer-icon-box li a {
  display: block;
}
.footer-icon-box li a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 400.98px) {
  .footer-icon-box li {
    width: 40px;
    height: 40px;
  }
}

.footer-qrcode-box {
  margin-bottom: 56px;
}
@media (max-width: 580.98px) {
  .footer-qrcode-box {
    order: 6;
    margin-bottom: 24px;
  }
}
@media (max-width: 380.98px) {
  .footer-qrcode-box {
    margin-bottom: 8px;
  }
}
.footer-qrcode-box .qrcode-title {
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  color: var(--white-color);
  margin-bottom: 16px;
}

.footer-qrcode-wrap {
  display: flex;
}
.footer-qrcode-wrap .qrcode-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 161px;
  height: 169px;
  margin: 0px 8px;
}
@media (max-width: 580.98px) {
  .footer-qrcode-wrap .qrcode-box {
    width: 150px;
    height: 157px;
  }
}
@media (max-width: 380.98px) {
  .footer-qrcode-wrap .qrcode-box {
    width: 50%;
    height: 50%;
  }
}
.footer-qrcode-wrap .qrcode-box a {
  display: block;
  margin-bottom: 8px;
}
.footer-qrcode-wrap .qrcode-box a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.footer-qrcode-wrap .qrcode-box p {
  display: block;
  font-size: 18px;
  color: var(--white-color);
}

.footer-link {
  display: flex;
  padding: 16px 0px 32px;
}
@media (max-width: 580.98px) {
  .footer-link {
    width: 100%;
    flex-wrap: wrap;
    order: 6;
  }
}
@media (max-width: 460.98px) {
  .footer-link {
    padding: 16px 0px;
  }
}
@media (max-width: 580.98px) {
  .footer-link {
    justify-content: center;
  }
}
@media (max-width: 580.98px) {
  .footer-link li {
    width: 20%;
  }
  .footer-link li:nth-child(6), .footer-link li:nth-child(7) {
    display: none;
  }
}
@media (max-width: 432.98px) {
  .footer-link li {
    width: 30%;
  }
}
@media (max-width: 300.98px) {
  .footer-link li {
    width: 33%;
  }
}
.footer-link li a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--white-color);
  text-align: center;
  padding: 8px;
}

.footer-brand-main {
  display: flex;
  overflow-x: auto; /* ✅ 允許水平滾動 */
  scroll-behavior: smooth; /* 按鈕平滑滾動 */
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.footer-brand-main::-webkit-scrollbar {
  display: none;
}
.footer-brand-main .dragging {
  cursor: grabbing; /* 拖曳時游標 */
}

.footer-brand-box {
  margin: 0 auto;
  max-width: 900px; /* 建議：限制容器寬度，例如剛好放4張 */
  position: relative;
  /*slider-左右按鈕*/
}
@media (max-width: 980.98px) {
  .footer-brand-box {
    max-width: 683px; /* 建議：限制容器寬度，例如剛好放4張 */
  }
}
@media (max-width: 780.98px) {
  .footer-brand-box {
    max-width: 450px; /* 建議：限制容器寬度，例如剛好放4張 */
  }
}
@media (max-width: 580.98px) {
  .footer-brand-box {
    max-width: 376px;
    order: 5;
  }
}
@media (max-width: 460.98px) {
  .footer-brand-box {
    max-width: 300px;
  }
}
@media (max-width: 360.98px) {
  .footer-brand-box {
    max-width: 260px;
  }
}
@media (max-width: 320.98px) {
  .footer-brand-box {
    max-width: 200px;
  }
}
.footer-brand-box .brand-slider-btn {
  font-size: 30px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  z-index: 8;
  opacity: 0.5;
}
.footer-brand-box .brand-slider-btn img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.footer-brand-box .brand-slider-btn:hover {
  opacity: 1;
}
.footer-brand-box .brand-slider-btn:focus {
  outline: 0px;
}
.footer-brand-box .brand-left {
  top: 22%;
  left: -40px;
}
@media (max-width: 780.98px) {
  .footer-brand-box .brand-left {
    top: 20%;
  }
}
@media (max-width: 560.98px) {
  .footer-brand-box .brand-left {
    top: 16%;
  }
}
@media (max-width: 460.98px) {
  .footer-brand-box .brand-left {
    top: 23%;
  }
}
.footer-brand-box .brand-right {
  top: 22%;
  right: -40px;
}
@media (max-width: 780.98px) {
  .footer-brand-box .brand-right {
    top: 20%;
  }
}
@media (max-width: 560.98px) {
  .footer-brand-box .brand-right {
    top: 16%;
  }
}
@media (max-width: 460.98px) {
  .footer-brand-box .brand-right {
    top: 23%;
  }
}
.footer-brand-box .brand-card {
  flex: 0 0 auto; /* 防止被壓縮 */
  margin-right: 16px;
  padding-bottom: 24px;
}
.footer-brand-box .brand-card .brand-img {
  width: 213px;
  height: 91px;
  margin-bottom: 8px;
}
@media (max-width: 580.98px) {
  .footer-brand-box .brand-card .brand-img {
    width: 180px;
    height: 77px;
  }
}
@media (max-width: 460.98px) {
  .footer-brand-box .brand-card .brand-img {
    width: 300px;
    height: 129px;
  }
}
@media (max-width: 360.98px) {
  .footer-brand-box .brand-card .brand-img {
    width: 260px;
    height: 112px;
  }
}
@media (max-width: 320.98px) {
  .footer-brand-box .brand-card .brand-img {
    width: 200px;
    height: 86px;
  }
}
.footer-brand-box .brand-card .brand-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.footer-brand-box .brand-card .brand-text {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: var(--white-color);
  display: block;
}

.copyright {
  background: var(--block-color);
  padding: 8px 0px;
}
@media (max-width: 834.98px) {
  .copyright {
    margin-bottom: 81px;
  }
}
@media (max-width: 290.98px) {
  .copyright {
    margin-bottom: 81px;
  }
}
.copyright p {
  font-size: 14px;
  text-align: center;
  color: var(--white-color);
}

.float-icon-arrow {
  position: fixed;
  right: 0px;
  bottom: 3%;
  width: 60px;
  z-index: 95;
}
@media (max-width: 834.98px) {
  .float-icon-arrow {
    display: none;
  }
}

.float-icon-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.float-icon-main .float-icon-item {
  position: relative;
  z-index: 99;
  margin: 0 auto;
  margin-bottom: 10px;
}
.float-icon-main .float-icon-item .float-light-shop,
.float-icon-main .float-icon-item .float-light-line,
.float-icon-main .float-icon-item .float-light-messenger,
.float-icon-main .float-icon-item .float-light-stores {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 8px;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: var(--float-light-color);
  border-radius: 50%;
  transition: background-color 0.4s ease; /* 平滑背景過渡 */
}
.float-icon-main .float-icon-item .float-light-shop img,
.float-icon-main .float-icon-item .float-light-line img,
.float-icon-main .float-icon-item .float-light-messenger img,
.float-icon-main .float-icon-item .float-light-stores img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.float-icon-main .float-icon-item .float-light-shop:hover,
.float-icon-main .float-icon-item .float-light-line:hover,
.float-icon-main .float-icon-item .float-light-messenger:hover,
.float-icon-main .float-icon-item .float-light-stores:hover {
  background: var(--float-light-hover);
}
.float-icon-main .float-icon-item .float-light-shop:hover::after,
.float-icon-main .float-icon-item .float-light-line:hover::after,
.float-icon-main .float-icon-item .float-light-messenger:hover::after,
.float-icon-main .float-icon-item .float-light-stores:hover::after {
  opacity: 1;
}
.float-icon-main .float-icon-item .float-light-shop::after {
  position: absolute;
  content: "耗材購買";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-light-hover);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-light-messenger::after {
  position: absolute;
  content: "臉書客服";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-light-hover);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-light-line::after {
  position: absolute;
  content: "加入好友";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-light-hover);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-light-stores::after {
  position: absolute;
  content: "門市資訊";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-light-hover);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-light-top {
  position: relative;
  display: block;
  height: 80px;
  width: 30px;
  overflow: hidden;
}
.float-icon-main .float-icon-item .float-light-top::after {
  position: absolute;
  content: "Go Top";
  color: var(--float-light-color);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  bottom: 0;
  left: 0px;
  writing-mode: sideways-lr; /* 垂直排列 */
  text-orientation: mixed; /* 保持文字橫向 */
  transition: transform 0.3s ease-out;
}
.float-icon-main .float-icon-item .float-light-top img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center; /* 靠上置中 */
  /* 預設位置：往下藏一點點 */
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  /* cubic-bezier 做彈性往上推的感覺 */
}
.float-icon-main .float-icon-item .float-light-top:hover::after {
  transform: translateY(-8px); /* 稍微多一點位移 */
}
.float-icon-main .float-icon-item .float-light-top:hover img {
  animation: slide-up-reenter 0.8s forwards;
}
.float-icon-main .float-icon-item .float-dark-shop,
.float-icon-main .float-icon-item .float-dark-line,
.float-icon-main .float-icon-item .float-dark-messenger,
.float-icon-main .float-icon-item .float-dark-stores {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  padding: 8px;
  -o-object-fit: contain;
     object-fit: contain;
  background-color: var(--float-dark-bg);
  border-radius: 50%;
  transition: background-color 0.4s ease; /* 平滑背景過渡 */
}
.float-icon-main .float-icon-item .float-dark-shop img,
.float-icon-main .float-icon-item .float-dark-line img,
.float-icon-main .float-icon-item .float-dark-messenger img,
.float-icon-main .float-icon-item .float-dark-stores img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.float-icon-main .float-icon-item .float-dark-shop:hover::after,
.float-icon-main .float-icon-item .float-dark-line:hover::after,
.float-icon-main .float-icon-item .float-dark-messenger:hover::after,
.float-icon-main .float-icon-item .float-dark-stores:hover::after {
  opacity: 1;
}
.float-icon-main .float-icon-item .float-dark-shop::after {
  position: absolute;
  content: "耗材購買";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-dark-text);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-dark-messenger::after {
  position: absolute;
  content: "臉書客服";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-dark-text);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-dark-line::after {
  position: absolute;
  content: "加入好友";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-dark-text);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-dark-stores::after {
  position: absolute;
  content: "門市資訊";
  font-family: "Noto Sans TC", sans-serif;
  font-size: 14px;
  color: var(--float-dark-text);
  left: -60px;
  top: 14px;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.float-icon-main .float-icon-item .float-dark-top {
  position: relative;
  display: block;
  height: 80px;
  width: 30px;
  overflow: hidden;
}
.float-icon-main .float-icon-item .float-dark-top::after {
  position: absolute;
  content: "Go Top";
  color: var(--float-dark-text);
  font-family: "Noto Sans TC", sans-serif;
  font-size: 16px;
  bottom: 0;
  left: 0px;
  writing-mode: sideways-lr; /* 垂直排列 */
  text-orientation: mixed; /* 保持文字橫向 */
  transition: transform 0.3s ease-out;
}
.float-icon-main .float-icon-item .float-dark-top img {
  width: 100%;
  height: 100%;
  filter: invert(1) brightness(2);
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center; /* 靠上置中 */
  /* 預設位置：往下藏一點點 */
  transform: translateY(0);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  /* cubic-bezier 做彈性往上推的感覺 */
}
.float-icon-main .float-icon-item .float-dark-top:hover::after {
  transform: translateY(-8px); /* 稍微多一點位移 */
}
.float-icon-main .float-icon-item .float-dark-top:hover img {
  animation: slide-up-reenter 0.8s forwards;
}

/* 手機 sticky-container */
.sticky-container {
  display: none;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 90;
  background-color: var(--float-light-color);
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}
@media (max-width: 834.98px) {
  .sticky-container {
    display: block;
  }
}
.sticky-container .store-line {
  background: var(--float-light-color);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color);
  padding: 8px 0px;
}
.sticky-container .store-line img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.sticky-container .sticky-content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--white-color);
}
.sticky-container .sticky-content .sticky-line {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0px;
  background: var(--float-light-color);
  color: var(--white-color);
  border-right: 1px solid var(--white-color);
}
@media (max-width: 290.98px) {
  .sticky-container .sticky-content .sticky-line {
    font-size: 14px;
  }
}
.sticky-container .sticky-content .sticky-line:nth-child(3) {
  border: 0;
}
.sticky-container .sticky-content .sticky-line img {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.get-start-header {
  width: 100%;
  background: var(--bg-cololr);
  position: relative;
  padding: 104px 0px 148px;
}
@media (max-width: 1320.98px) {
  .get-start-header {
    padding: 104px 0px 0px;
  }
}
@media (max-width: 1000.98px) {
  .get-start-header {
    padding: 64px 0px 600px;
  }
}
@media (max-width: 768.98px) {
  .get-start-header {
    background: var(--primary-color);
    padding: 64px 0px 490px;
  }
}
@media (max-width: 712.98px) {
  .get-start-header {
    padding: 64px 0px 520px;
  }
}
@media (max-width: 612.98px) {
  .get-start-header {
    padding: 64px 0px 480px;
  }
}
@media (max-width: 500.98px) {
  .get-start-header {
    padding: 64px 0px 500px;
  }
}
@media (max-width: 460.98px) {
  .get-start-header {
    padding: 36px 0px 420px;
  }
}
@media (max-width: 440.98px) {
  .get-start-header {
    padding: 36px 0px 480px;
  }
}
@media (max-width: 400.98px) {
  .get-start-header {
    padding: 33px 0px 440px;
  }
}
@media (max-width: 363.98px) {
  .get-start-header {
    padding: 36px 0px 440px;
  }
}
@media (max-width: 330.98px) {
  .get-start-header {
    padding: 36px 0px 430px;
  }
}
@media (max-width: 295.98px) {
  .get-start-header {
    padding: 36px 0px 480px;
  }
}
.get-start-header::before {
  content: "";
  display: block;
  width: 82.5vw;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fae600;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
@media (max-width: 1724.98px) {
  .get-start-header::before {
    width: 90vw;
  }
}
@media (max-width: 1450.98px) {
  .get-start-header::before {
    width: 95vw;
  }
}
@media (max-width: 1320.98px) {
  .get-start-header::before {
    height: 750px;
  }
}
@media (max-width: 1000.98px) {
  .get-start-header::before {
    height: calc(100% - 0px);
  }
}
@media (max-width: 768.98px) {
  .get-start-header::before {
    display: none;
  }
}

.get-header-container {
  position: relative;
}
.get-header-container .get-header-content {
  max-width: 1245px;
  margin: 0 auto;
}
@media (max-width: 1320.98px) {
  .get-header-container .get-header-content {
    max-width: 1045px;
  }
}
@media (max-width: 1200.98px) {
  .get-header-container .get-header-content {
    max-width: 900px;
  }
}
@media (max-width: 1000.98px) {
  .get-header-container .get-header-content {
    max-width: 800px;
  }
}
@media (max-width: 834.98px) {
  .get-header-container .get-header-content {
    max-width: 90%;
  }
}
.get-header-container .header-subtitle-main {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  margin-left: 16px;
}
@media (max-width: 428.98px) {
  .get-header-container .header-subtitle-main {
    padding: 16px 0px;
  }
}
.get-header-container .header-subtitle-main .header-subtitle-icon {
  width: 40px;
  height: 40px;
  margin-right: 16px;
  position: relative;
}
@media (max-width: 768.98px) {
  .get-header-container .header-subtitle-main .header-subtitle-icon {
    margin-left: 16px;
  }
}
@media (max-width: 500.98px) {
  .get-header-container .header-subtitle-main .header-subtitle-icon {
    width: 30px;
    height: 30px;
  }
}
.get-header-container .header-subtitle-main .header-subtitle-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.get-header-container .header-subtitle-main .header-subtitle-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: url(../img/get-start-icon-after.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 10s linear infinite; /* 4秒轉一圈，可自行調整 */
}
@media (max-width: 500.98px) {
  .get-header-container .header-subtitle-main .header-subtitle-icon::after {
    width: 40px;
    height: 40px;
  }
}
.get-header-container .header-subtitle-main .header-subtitle-icon::before {
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  background: url(../img/get-start-icon-befor.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin-reverse 10s linear infinite;
}
@media (max-width: 500.98px) {
  .get-header-container .header-subtitle-main .header-subtitle-icon::before {
    width: 50px;
    height: 50px;
  }
}

.get-start-header-main {
  width: 100%;
  margin: 0px auto 0px;
  display: flex;
  align-items: center;
}
@media (max-width: 1000.98px) {
  .get-start-header-main {
    width: 80%;
  }
}
@media (max-width: 834.98px) {
  .get-start-header-main {
    width: 100%;
  }
}

.header-title {
  font-size: 60px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 24px;
}
@media (max-width: 912.98px) {
  .header-title {
    font-size: 48px;
  }
}
@media (max-width: 540.98px) {
  .header-title {
    font-size: 36px;
    margin-bottom: 4px;
  }
}

.header-subtitle {
  font-size: 24px;
  color: var(--text-color);
  font-family: "REM", sans-serif;
}
@media (max-width: 540.98px) {
  .header-subtitle {
    font-size: 20px;
  }
}

.crumbs-link {
  color: var(--text-color-200);
  text-decoration: underline;
}
.crumbs-link:hover {
  color: var(--third-hover-color);
}

.crumbs-text {
  color: var(--text-color-200);
  font-size: 16px;
  margin-bottom: 16px;
}
@media (max-width: 540.98px) {
  .crumbs-text {
    font-size: 14px;
    margin-bottom: 16px;
  }
}
.crumbs-text .crumbs-main-link {
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: underline;
}
.crumbs-text .crumbs-main-link:hover {
  color: var(--third-hover-color);
}

/* Arrow + Fraction 容器 */
.swiper-arrow-main {
  position: absolute;
  bottom: -17px;
  right: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  z-index: 10;
}
@media (max-width: 1320.98px) {
  .swiper-arrow-main {
    bottom: 48px;
  }
}
@media (max-width: 1200.98px) {
  .swiper-arrow-main {
    right: 100px;
    bottom: 20px;
  }
}
@media (max-width: 1000.98px) {
  .swiper-arrow-main {
    bottom: -556px;
    right: auto;
    left: 0%;
    transform: translate(0%, 50%);
    width: 100%;
  }
}
@media (max-width: 768.98px) {
  .swiper-arrow-main {
    bottom: -446px;
  }
}
@media (max-width: 712.98px) {
  .swiper-arrow-main {
    bottom: -468px;
  }
}
@media (max-width: 612.98px) {
  .swiper-arrow-main {
    bottom: -430px;
  }
}
@media (max-width: 500.98px) {
  .swiper-arrow-main {
    bottom: -450px;
  }
}
@media (max-width: 460.98px) {
  .swiper-arrow-main {
    bottom: -380px;
  }
}
@media (max-width: 440.98px) {
  .swiper-arrow-main {
    bottom: -420px;
  }
}
@media (max-width: 400.98px) {
  .swiper-arrow-main {
    bottom: -404px;
  }
}
@media (max-width: 384.98px) {
  .swiper-arrow-main {
    bottom: -394px;
  }
}
@media (max-width: 330.98px) {
  .swiper-arrow-main {
    bottom: -380px;
  }
}
@media (max-width: 300.98px) {
  .swiper-arrow-main {
    bottom: -358px;
  }
}
@media (max-width: 295.98px) {
  .swiper-arrow-main {
    bottom: -435px;
  }
}

/* 左右箭頭 */
.btn-prev1,
.btn-next1 {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: var(--text-color-100);
  aspect-ratio: 1/1;
  cursor: pointer;
}
@media (max-width: 1000.98px) {
  .btn-prev1,
  .btn-next1 {
    background: transparent;
  }
}

.btn-prev1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1000.98px) {
  .btn-prev1 {
    position: absolute;
    left: 0px;
    top: -1000%;
  }
}
@media (max-width: 850.98px) {
  .btn-prev1 {
    top: -1000%;
  }
}
@media (max-width: 440.98px) {
  .btn-prev1 {
    left: -27px;
    top: -1000%;
  }
}
@media (max-width: 360.98px) {
  .btn-prev1 {
    left: -18px;
  }
}
.btn-prev1 .prev-arrow {
  width: 20px;
  height: 20px;
  color: var(--white-color);
}
@media (max-width: 1000.98px) {
  .btn-prev1 .prev-arrow {
    width: 60px;
    height: 60px;
    color: var(--text-color-100); /* 控制顏色 */
  }
}

.btn-next1 {
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1000.98px) {
  .btn-next1 {
    position: absolute;
    right: 0px;
    top: -1000%;
  }
}
@media (max-width: 850.98px) {
  .btn-next1 {
    top: -900%;
  }
}
@media (max-width: 850.98px) {
  .btn-next1 {
    top: -1000%;
    right: -27px;
  }
}
@media (max-width: 360.98px) {
  .btn-next1 {
    right: -16px;
  }
}
.btn-next1 .next-arrow {
  width: 20px;
  height: 20px;
  color: var(--white-color);
}
@media (max-width: 1000.98px) {
  .btn-next1 .next-arrow {
    width: 60px;
    height: 60px;
    color: var(--text-color-100); /* 控制顏色 */
  }
}

/* Fraction */
.custom-fraction {
  font-size: 36px;
  font-weight: 600;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--text-color);
  padding: 5px 12px;
  border-radius: 20px;
  display: block;
}

/* Swiper 容器 */
.swiper1 {
  width: 100%;
  max-width: 1245px;
  height: 440px;
  position: relative;
  overflow: visible !important;
}
@media (max-width: 900.98px) {
  .swiper1 {
    width: 90%;
  }
}

/* Slides */
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  visibility: visible;
}

/*video*/
.swiper-video {
  width: 640px;
  max-width: 100%;
  aspect-ratio: 640/440;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}
@media (max-width: 1320.98px) {
  .swiper-video {
    width: 500px;
    height: auto;
  }
}
@media (max-width: 1000.98px) {
  .swiper-video {
    width: 100%;
  }
}
.swiper-video video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain; /* 關鍵：讓影片像 background-size: contain */
}

.swiper-video-2 {
  width: 640px;
  height: 440px;
  aspect-ratio: 640/440; /* 等比16:9 */
  background: #000;
  display: flex;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1320.98px) {
  .swiper-video-2 {
    width: 500px;
    height: auto;
  }
}
@media (max-width: 1000.98px) {
  .swiper-video-2 {
    width: 100%;
  }
}

.swiper-video-2 video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper-flex-box {
  display: flex;
  align-items: center;
}
@media (max-width: 1000.98px) {
  .swiper-flex-box {
    flex-direction: column;
    padding: 48px 48px 0px;
    background: var(--white-color);
    border-radius: 30px;
    min-height: 919px;
  }
}
@media (max-width: 768.98px) {
  .swiper-flex-box {
    min-height: 800px;
  }
}
@media (max-width: 712.98px) {
  .swiper-flex-box {
    min-height: 820px;
  }
}
@media (max-width: 612.98px) {
  .swiper-flex-box {
    padding: 36px 48px 0px;
    min-height: 800px;
  }
}
@media (max-width: 580.98px) {
  .swiper-flex-box {
    min-height: 780px;
  }
}
@media (max-width: 500.98px) {
  .swiper-flex-box {
    padding: 36px 28px 0px;
    border-radius: 16px;
    min-height: 760px;
  }
}
@media (max-width: 460.98px) {
  .swiper-flex-box {
    min-height: 726px;
  }
}
@media (max-width: 400.98px) {
  .swiper-flex-box {
    min-height: 690px;
  }
}
@media (max-width: 390.98px) {
  .swiper-flex-box {
    min-height: 705px;
  }
}
@media (max-width: 371.98px) {
  .swiper-flex-box {
    min-height: 720px;
  }
}
@media (max-width: 360.98px) {
  .swiper-flex-box {
    padding: 24px 16px 0px;
  }
}
@media (max-width: 330.98px) {
  .swiper-flex-box {
    min-height: 738px;
  }
}
@media (max-width: 300.98px) {
  .swiper-flex-box {
    min-height: 738px;
  }
}

.swiper-mob-title-main {
  display: none;
}
@media (max-width: 1000.98px) {
  .swiper-mob-title-main {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
.swiper-mob-title-main .swiper-mob-en {
  font-size: 18px;
  font-family: "REM", sans-serif;
  color: var(--text-color);
  margin-bottom: 8px;
}
.swiper-mob-title-main .swiper-mob-num {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-color);
  margin-bottom: 16px;
}
.swiper-mob-title-main .swiper-mob-title {
  font-size: 24px;
  font-family: "Noto Sans TC", sans-serif;
  margin-bottom: 24px;
  color: var(--text-color);
  font-weight: 500;
}
@media (max-width: 1000.98px) {
  .swiper-mob-title-main .swiper-mob-title {
    font-size: 36px;
  }
}
@media (max-width: 712.98px) {
  .swiper-mob-title-main .swiper-mob-title {
    font-size: 28px;
    line-height: 32px;
  }
}
@media (max-width: 612.98px) {
  .swiper-mob-title-main .swiper-mob-title {
    font-size: 32px;
    line-height: 42px;
    text-align: center;
  }
}
@media (max-width: 440.98px) {
  .swiper-mob-title-main .swiper-mob-title {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (max-width: 384.98px) {
  .swiper-mob-title-main .swiper-mob-title {
    font-size: 24px;
    line-height: 32px;
  }
}
.swiper-mob-title-main .swiper-mob-title span {
  position: relative;
}
.swiper-mob-title-main .swiper-mob-title span::after {
  content: "";
  position: absolute;
  background-color: var(--primary-color);
  height: 4px;
  left: 0;
  right: 0;
  bottom: -2px;
}

.swiper-text-list {
  flex: 1; /* 讓文字區塊自動撐滿剩餘空間 */
  width: 53.333%;
  margin-top: -150px;
  margin-left: -6.6667%;
  padding: 40px 60px;
  border-radius: 30px;
  background-color: var(--white-color);
  position: relative;
  z-index: 2;
  max-width: 40%;
}
@media (max-width: 1200.98px) {
  .swiper-text-list {
    padding: 40px;
  }
}
@media (max-width: 1000.98px) {
  .swiper-text-list {
    background: transparent;
    width: 100%;
    max-width: 90%;
    margin: 0 auto;
  }
}
@media (max-width: 712.98px) {
  .swiper-text-list {
    padding: 40px 0px 16px;
  }
}
@media (max-width: 480.98px) {
  .swiper-text-list {
    max-width: 100%;
  }
}
@media (max-width: 460.98px) {
  .swiper-text-list {
    padding: 24px 0px 16px;
  }
}
@media (max-width: 384.98px) {
  .swiper-text-list {
    padding: 24px 0px 16px;
  }
}
@media (max-width: 330.98px) {
  .swiper-text-list {
    padding: 16px 0px;
  }
}
.swiper-text-list::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
  width: 35px;
  height: 30px;
  top: 150px;
  right: 99%;
  clip-path: polygon(0 100%, 100% 0, 100% calc(100% - 1px));
}
@media (max-width: 1000.98px) {
  .swiper-text-list::before {
    display: none;
  }
}

/* 保留文字區塊顯示，即使 slide 被 hidden */
.swiper-slide.swiper-slide-hidden .swiper-text-list {
  opacity: 1 !important; /* 文字永遠可見 */
  pointer-events: auto !important; /* 文字可互動 */
}

/* 保持 slide 淡出效果 */
.swiper-slide.swiper-slide-hidden .swiper-video {
  opacity: 0; /* 影片淡出 */
  pointer-events: none;
}

/* 如果需要整個 slide fade 效果，但文字不受影響 */
.swiper-slide.swiper-slide-hidden {
  opacity: 0; /* slide 透明 */
  pointer-events: none;
}

.swiper-title {
  font-size: 28px;
  font-family: "Noto Sans TC", sans-serif;
  margin-bottom: 40px;
  color: var(--text-color);
}
@media (max-width: 1320.98px) {
  .swiper-title {
    margin-bottom: 24px;
  }
}
@media (max-width: 1200.98px) {
  .swiper-title {
    margin-bottom: 16px;
  }
}
@media (max-width: 1000.98px) {
  .swiper-title {
    display: none;
  }
}
.swiper-title span {
  position: relative;
}
.swiper-title span::after {
  content: "";
  position: absolute;
  background-color: var(--primary-color);
  height: 4px;
  left: 0;
  right: 0;
  bottom: -2px;
}

.swiper-text {
  font-family: "Noto Sans TC", sans-serif;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-color);
}
@media (max-width: 1320.98px) {
  .swiper-text {
    font-size: 16px;
    line-height: 24px;
  }
}
.swiper-text a {
  font-weight: 700;
  color: var(--text-color);
  position: relative;
}
.swiper-text a::before {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: -2px;
  left: 0;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background: url(../img/obj_wave_01.svg);
  height: 6px;
}

.swiper-subtitle {
  color: var(--text-color);
  margin-bottom: 24px;
}
@media (max-width: 1320.98px) {
  .swiper-subtitle {
    margin-bottom: 16px;
  }
}
@media (max-width: 1000.98px) {
  .swiper-subtitle {
    display: none;
  }
}
.swiper-subtitle .swiper-en {
  font-size: 18px;
  font-family: "REM", sans-serif;
}
.swiper-subtitle .swiper-num {
  font-size: 42px;
  font-family: "Noto Sans TC", sans-serif;
  font-weight: 700;
}
@media (max-width: 1320.98px) {
  .swiper-subtitle .swiper-num {
    font-size: 28px;
  }
}

/*container--最外面Banner設定*/
.get-start-container {
  background: url(../img/get-bg.svg);
  width: 100%;
  height: auto;
  background-position: top center;
  background-repeat: repeat-y;
  background-size: cover;
  position: relative;
}
@media (max-width: 1000.98px) {
  .get-start-container {
    padding-top: 80px;
  }
}
@media (max-width: 360.98px) {
  .get-start-container {
    padding-top: 60px;
  }
}
.get-start-container .get-start-content {
  /*01區塊 背景設定*/
  position: relative;
  padding: 220px 0px 260px;
  z-index: 1;
}
@media (max-width: 1712.98px) {
  .get-start-container .get-start-content {
    padding: 164px 0px 190px;
  }
}
@media (max-width: 1320.98px) {
  .get-start-container .get-start-content {
    padding: 160px 0px 160px;
  }
}
@media (max-width: 1200.98px) {
  .get-start-container .get-start-content {
    padding: 126px 0px 116px;
  }
}
@media (max-width: 1000.98px) {
  .get-start-container .get-start-content {
    max-width: 90%;
    padding: 80px 0px 40px;
    margin: 0 auto 80px;
    background: var(--white-color);
    box-shadow: 0 -6px 6px rgba(0, 0, 0, 0.15), 0px 0 6px rgba(0, 0, 0, 0.15), 0 6px 6px rgba(0, 0, 0, 0.15); /* 下 */
    border-radius: 30px;
  }
}
@media (max-width: 460.98px) {
  .get-start-container .get-start-content {
    padding: 40px 0px;
  }
}
.get-start-container .get-start-content span {
  position: absolute;
  content: "";
  display: block;
  width: 1584px;
  height: 864px;
  top: 230px;
  right: 0;
  background-color: #fff;
  mix-blend-mode: multiply;
  border-radius: 30px 0 0 30px;
  z-index: 2;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), -6px 0 12px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.15); /* 下 */
}
@media (max-width: 1832.98px) {
  .get-start-container .get-start-content span {
    width: 86vw;
  }
}
@media (max-width: 1728.98px) {
  .get-start-container .get-start-content span {
    width: 88vw;
  }
}
@media (max-width: 1712.98px) {
  .get-start-container .get-start-content span {
    top: 180px;
  }
}
@media (max-width: 1638.98px) {
  .get-start-container .get-start-content span {
    width: 90vw;
  }
}
@media (max-width: 1576.98px) {
  .get-start-container .get-start-content span {
    width: 92vw;
  }
}
@media (max-width: 1476.98px) {
  .get-start-container .get-start-content span {
    width: 94vw;
  }
}
@media (max-width: 1422.98px) {
  .get-start-container .get-start-content span {
    width: 96vw;
  }
}
@media (max-width: 1320.98px) {
  .get-start-container .get-start-content span {
    top: 180px;
    width: 89vw;
    height: 765px;
  }
}
@media (max-width: 1260.98px) {
  .get-start-container .get-start-content span {
    width: 92vw;
  }
}
@media (max-width: 1200.98px) {
  .get-start-container .get-start-content span {
    width: 91vw;
    height: 730px;
  }
}
@media (max-width: 1024.98px) {
  .get-start-container .get-start-content span {
    width: 93vw;
  }
}
@media (max-width: 1000.98px) {
  .get-start-container .get-start-content span {
    display: none;
  }
}
.get-start-container .get-start-content::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 406px;
  height: 1243px;
  aspect-ratio: 406/1243;
  background: url(../img/get-bg-r.png) top right/contain no-repeat;
  z-index: 3;
}
@media (max-width: 1422.98px) {
  .get-start-container .get-start-content::after {
    width: 360px;
    height: auto;
  }
}
@media (max-width: 1320.98px) {
  .get-start-container .get-start-content::after {
    width: 320px;
    height: auto;
  }
}
@media (max-width: 1200.98px) {
  .get-start-container .get-start-content::after {
    display: none;
  }
}
.get-start-container .get-start-content::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 214px;
  height: 1243px;
  aspect-ratio: 214/1243;
  background: url(../img/get-bg-l.png) top left/contain no-repeat;
  z-index: 3;
}
@media (max-width: 1422.98px) {
  .get-start-container .get-start-content::before {
    width: 150px;
    height: auto;
  }
}
@media (max-width: 1320.98px) {
  .get-start-container .get-start-content::before {
    width: 120px;
    height: auto;
  }
}
@media (max-width: 1200.98px) {
  .get-start-container .get-start-content::before {
    display: none;
  }
}

.get-start-box {
  max-width: 1245px;
  margin: 0 auto 36px;
}
@media (max-width: 1320.98px) {
  .get-start-box {
    max-width: 1000px;
  }
}
@media (max-width: 1200.98px) {
  .get-start-box {
    max-width: 900px;
  }
}
@media (max-width: 1080.98px) {
  .get-start-box {
    max-width: 850px;
  }
}
@media (max-width: 780.98px) {
  .get-start-box {
    max-width: 100%;
  }
}

.get-start-main {
  width: 100%;
  margin: -40px auto 0px;
  display: flex;
  align-items: center;
}
@media (max-width: 1320.98px) {
  .get-start-main {
    margin: 0px auto;
  }
}
@media (max-width: 1000.98px) {
  .get-start-main {
    flex-direction: column;
    margin: 0px auto;
  }
}

.get-title-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  padding: 0px 16px 0px;
  margin-right: 15%;
}
@media (max-width: 1322.98px) {
  .get-title-main {
    margin-left: 3%;
    margin-right: 12%;
  }
}
@media (max-width: 1200.98px) {
  .get-title-main {
    margin-top: 80px;
  }
}
@media (max-width: 1000.98px) {
  .get-title-main {
    margin-right: 0%;
    margin-bottom: 48px;
    flex-direction: row;
    margin-top: 0px;
    width: auto;
  }
}
@media (max-width: 628.98px) {
  .get-title-main {
    flex-direction: column;
    margin-left: 0%;
    margin-bottom: 16px;
  }
}

.get-title-num {
  font-size: 36px;
  font-family: "REM", sans-serif;
  margin-bottom: 8px;
  color: var(--secondary-color);
}
@media (max-width: 1000.98px) {
  .get-title-num {
    margin-bottom: 0px;
    margin-right: 8px;
  }
}
@media (max-width: 628.98px) {
  .get-title-num {
    margin-right: 0px;
    margin-bottom: 8px;
  }
}

.get-title-en {
  font-size: 36px;
  line-height: 6px;
  font-weight: 500;
  color: var(--secondary-color);
  display: inline-block;
  letter-spacing: 2px;
  transform: rotate(90deg) translateY(-50%);
  transform-origin: center center;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 1000.98px) {
  .get-title-en {
    transform: rotate(0deg) translateY(0%);
  }
}

.get-title-1 {
  font-size: 36px;
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 8px;
  writing-mode: vertical-rl;
  color: var(--secondary-color);
  margin-top: -60px;
  margin-bottom: 52px;
}
@media (max-width: 1000.98px) {
  .get-title-1 {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    transform: none; /* ← 若你有 rotate 必須清掉 */
    white-space: normal; /* 修正被擠出直排問題 */
    letter-spacing: normal; /* 橫排不需要 8px 間距 */
    width: auto;
    height: auto;
    display: block;
  }
}

.get-title {
  font-size: 36px;
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 8px;
  writing-mode: vertical-rl;
  color: var(--secondary-color);
}
@media (max-width: 1000.98px) {
  .get-title {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    transform: none; /* ← 若你有 rotate 必須清掉 */
    white-space: normal; /* 修正被擠出直排問題 */
    letter-spacing: normal; /* 橫排不需要 8px 間距 */
    width: auto;
    height: auto;
    display: block;
  }
}
@media (max-width: 380.98px) {
  .get-title {
    font-size: 32px;
  }
}
@media (max-width: 290.98px) {
  .get-title {
    font-size: 28px;
  }
}

.get-start-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60%;
}
@media (max-width: 1000.98px) {
  .get-start-wrap {
    width: 80%;
  }
}
@media (max-width: 600.98px) {
  .get-start-wrap {
    width: 90%;
  }
}
.get-start-wrap .get-start-video {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 的比例 (9 ÷ 16 = 0.5625) */
  height: 0;
  aspect-ratio: 16/9; /* 等比16:9 */
  margin-bottom: 24px;
  position: relative;
  z-index: 5;
  margin-top: -24px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.1), -6px 0 12px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1);
}
@media (max-width: 1200.98px) {
  .get-start-wrap .get-start-video {
    margin-bottom: 36px;
  }
}
@media (max-width: 1000.98px) {
  .get-start-wrap .get-start-video {
    margin-top: 0px;
  }
}
.get-start-wrap .get-start-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.get-start-title {
  margin: 0 auto;
}
.get-start-title .get-mob-text {
  display: none;
  font-size: 21px;
  line-height: 36px;
  text-align: center;
  color: var(--text-color);
}
@media (max-width: 540.98px) {
  .get-start-title .get-mob-text {
    display: block;
  }
}
.get-start-title .get-text {
  width: 516px;
  font-size: 21px;
  line-height: 36px;
  text-align: center;
  color: var(--text-color);
}
@media (max-width: 1320.98px) {
  .get-start-title .get-text {
    font-size: 18px;
    line-height: 32px;
    max-width: 432px;
  }
}
@media (max-width: 780.98px) {
  .get-start-title .get-text {
    font-size: 21px;
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 700.98px) {
  .get-start-title .get-text {
    font-size: 18px;
    line-height: 32px;
  }
}
@media (max-width: 540.98px) {
  .get-start-title .get-text {
    display: none;
  }
}

.mark-wave {
  position: relative;
}
.mark-wave:after {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.get-price-container {
  max-width: 1245px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
@media (max-width: 1320.98px) {
  .get-price-container {
    max-width: 1000px;
  }
}
@media (max-width: 1200.98px) {
  .get-price-container {
    max-width: 850px;
  }
}
@media (max-width: 842.98px) {
  .get-price-container {
    max-width: 94%;
  }
}
@media (max-width: 780.98px) {
  .get-price-container {
    flex-direction: column;
  }
}

.get-price-box {
  flex: 0 0 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 842.98px) {
  .get-price-box {
    flex: 0 0 32%;
  }
}
@media (max-width: 780.98px) {
  .get-price-box {
    flex: 0 0 80%;
    margin-bottom: 36px;
  }
}
.get-price-box .get-price-title {
  text-align: center;
  color: var(--white-color);
  font-size: 21px;
  padding: 24px 0px;
}
.get-price-box:nth-child(1) .get-price-title {
  position: relative;
  display: block;
  z-index: 1;
}
.get-price-box:nth-child(1) .get-price-title::after {
  position: absolute;
  content: "";
  background: url(../img/price-title-01.svg);
  background-size: auto 100%;
  background-size: contain;
  width: 155px;
  height: 52px;
  aspect-ratio: 155/52;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.get-price-box:nth-child(2) .get-price-title {
  position: relative;
  display: block;
  z-index: 1;
}
.get-price-box:nth-child(2) .get-price-title::after {
  position: absolute;
  content: "";
  background: url(../img/price-title-02.svg);
  background-size: auto 100%;
  background-size: contain;
  width: 176px;
  height: 52px;
  aspect-ratio: 176/52;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.get-price-box:nth-child(3) .get-price-title {
  position: relative;
  display: block;
  z-index: 1;
}
.get-price-box:nth-child(3) .get-price-title::after {
  position: absolute;
  content: "";
  background: url(../img/price-title-03.svg);
  background-size: auto 100%;
  background-size: contain;
  width: 129px;
  height: 52px;
  aspect-ratio: 129/52;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.ger-price-img {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 780.98px) {
  .ger-price-img {
    width: 100%;
  }
}
.ger-price-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.gpt-text-box {
  height: 80px;
}
@media (max-width: 780.98px) {
  .gpt-text-box {
    height: auto;
  }
}

.get-price-text {
  font-size: 18px;
  color: var(--text-color);
  line-height: 28px;
}
@media (max-width: 1320.98px) {
  .get-price-text {
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }
}
@media (max-width: 780.98px) {
  .get-price-text {
    font-size: 24px;
    line-height: 36px;
  }
}

.get-mark-text {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--primary-color);
  text-shadow: 1px 1px 0 var(--text-color-100), -1px 1px 0 var(--text-color-100), 1px -1px 0 var(--text-color-100), -1px -1px 0 var(--text-color-100), 0 1px 0 var(--text-color-100), 1px 0 0 var(--text-color-100), -1px 0 0 var(--text-color-100), 0 -1px 0 var(--text-color-100);
}
@media (max-width: 842.98px) {
  .get-mark-text {
    font-size: 16px;
  }
}
@media (max-width: 780.98px) {
  .get-mark-text {
    font-size: 24px;
  }
}

.get-price-mark {
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 1320.98px) {
  .get-price-mark {
    max-width: 900px;
  }
}
@media (max-width: 1200.98px) {
  .get-price-mark {
    max-width: 800px;
  }
}
@media (max-width: 1200.98px) {
  .get-price-mark {
    max-width: 75%;
  }
}
.get-price-mark p {
  font-size: 24px;
  font-weight: 500;
  display: block;
  background: var(--primary-color);
  text-align: center;
  padding: 16px 0px;
  position: relative;
  z-index: 2;
}
@media (max-width: 1320.98px) {
  .get-price-mark p {
    font-size: 21px;
    line-height: 32px;
    padding: 8px 16px;
  }
}

/*02固定方式*/
.get-fixed-container {
  position: relative;
  z-index: 0;
  padding: 100px 0px 308px;
}
@media (max-width: 1320.98px) {
  .get-fixed-container {
    padding: 48px 0px 268px;
  }
}
@media (max-width: 1021.98px) {
  .get-fixed-container {
    padding: 50px 0px 310px;
  }
}
@media (max-width: 1000.98px) {
  .get-fixed-container {
    padding: 0px 0px 80px;
  }
}
.get-fixed-container::after {
  content: "";
  display: block;
  width: 77.5vw;
  height: calc(100% - 180px);
  position: absolute;
  top: 97px;
  left: 0;
  z-index: 2;
  background-color: var(--white-color);
  border-top-right-radius: 0px;
  border-bottom-right-radius: 30px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 0px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15); /* 下 */
}
@media (max-width: 1775.98px) {
  .get-fixed-container::after {
    width: 82.5vw;
  }
}
@media (max-width: 1638.98px) {
  .get-fixed-container::after {
    width: 87.2vw;
  }
}
@media (max-width: 1422.98px) {
  .get-fixed-container::after {
    width: 86.2vw;
  }
}
@media (max-width: 1320.98px) {
  .get-fixed-container::after {
    height: calc(100% - 130px);
    top: 30px;
    width: 82.2vw;
  }
}
@media (max-width: 1290.98px) {
  .get-fixed-container::after {
    width: 81.8vw;
  }
}
@media (max-width: 1200.98px) {
  .get-fixed-container::after {
    width: 81.5vw;
  }
}
@media (max-width: 1100.98px) {
  .get-fixed-container::after {
    width: 81vw;
  }
}
@media (max-width: 1024.98px) {
  .get-fixed-container::after {
    width: 80vw;
  }
}
@media (max-width: 1000.98px) {
  .get-fixed-container::after {
    display: none;
  }
}
.get-fixed-container::before {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  height: auto;
  content: "";
  background: url(../img/get-bg2.png);
  width: 100%;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
}

.get-fixed-content {
  max-width: 62.5vw;
  margin: 60px auto 0px;
  position: relative;
  z-index: 4;
  display: flex;
}
@media (max-width: 1880.98px) {
  .get-fixed-content {
    max-width: 62vw;
  }
}
@media (max-width: 1775.98px) {
  .get-fixed-content {
    max-width: 70vw;
    margin: 60px 0px 0px 16.1vw;
  }
}
@media (max-width: 1730.98px) {
  .get-fixed-content {
    max-width: 70.2vw;
  }
}
@media (max-width: 1638.98px) {
  .get-fixed-content {
    margin: 60px 0px 0px 18.1vw;
    max-width: 73.2vw;
  }
}
@media (max-width: 1422.98px) {
  .get-fixed-content {
    margin: 60px 0px 0px 7.6vw;
    max-width: 83.2vw;
  }
}
@media (max-width: 1320.98px) {
  .get-fixed-content {
    margin: 61px 0px 0px 12vw;
    max-width: 75vw;
  }
}
@media (max-width: 1290.98px) {
  .get-fixed-content {
    margin: 61px 0px 0px 3vw;
    max-width: 84vw;
  }
}
@media (max-width: 1024.98px) {
  .get-fixed-content {
    margin: 61px 0px 0px 2.2vw;
  }
}
@media (max-width: 1000.98px) {
  .get-fixed-content {
    flex-wrap: wrap;
    margin: 61px auto 0px;
    padding: 100px 0px 260px;
    max-width: 90%;
    border-radius: 30px;
    background: var(--white-color);
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15); /* 下 */
  }
}

.fixed-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  padding: 24px 0px;
  background: var(--white-color);
  margin-bottom: 4px;
  border-top-right-radius: 20px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15); /* 下 */
}
@media (max-width: 1000.98px) {
  .fixed-title-wrap {
    width: 100%;
    box-shadow: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 48px 0px;
  }
}
@media (max-width: 628.98px) {
  .fixed-title-wrap {
    flex-direction: column;
  }
}
@media (max-width: 380.98px) {
  .fixed-title-wrap {
    padding: 24px 0px;
  }
}

.fixed-content {
  width: 100%;
  display: flex;
  position: relative;
}
@media (max-width: 1000.98px) {
  .fixed-content {
    order: 2;
    height: 700px;
  }
}
@media (max-width: 860.98px) {
  .fixed-content {
    height: 760px;
  }
}
@media (max-width: 768.98px) {
  .fixed-content {
    height: 1500px;
  }
}
@media (max-width: 684.98px) {
  .fixed-content {
    height: 1550px;
  }
}
@media (max-width: 540.98px) {
  .fixed-content {
    height: 1600px;
  }
}
@media (max-width: 500.98px) {
  .fixed-content {
    height: 1650px;
  }
}
@media (max-width: 435.98px) {
  .fixed-content {
    height: 1700px;
  }
}
@media (max-width: 419.98px) {
  .fixed-content {
    height: 1750px;
  }
}
@media (max-width: 380.98px) {
  .fixed-content {
    height: 1670px;
  }
}
@media (max-width: 290.98px) {
  .fixed-content {
    height: 1700px;
  }
}
@media (max-width: 288.98px) {
  .fixed-content {
    height: 1720px;
  }
}
@media (max-width: 280.98px) {
  .fixed-content {
    height: 1740px;
  }
}

.fixed-tab-content {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100%;
  /*隱藏設定*/
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.fixed-tab-content.active {
  display: block;
  opacity: 1;
}
.fixed-tab-content.fade-out {
  opacity: 0;
}
@media (max-width: 1320.98px) {
  .fixed-tab-content {
    width: 85%;
  }
}
@media (max-width: 1000.98px) {
  .fixed-tab-content {
    margin-top: 48px;
  }
}
@media (max-width: 768.98px) {
  .fixed-tab-content {
    width: 90%;
  }
}

.fixed-title {
  font-size: 48px;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--secondary-color);
  margin-bottom: 48px;
}
@media (max-width: 1000.98px) {
  .fixed-title {
    text-align: center;
  }
}
@media (max-width: 1000.98px) {
  .fixed-title {
    font-size: 36px;
    margin-bottom: 28px;
  }
}

.fixed-img-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
}
@media (max-width: 768.98px) {
  .fixed-img-content {
    flex-direction: column;
  }
}

@media (max-width: 1320.98px) {
  .fixed-l-img-main {
    width: 40%;
  }
}
@media (max-width: 768.98px) {
  .fixed-l-img-main {
    width: 70%;
  }
}
@media (max-width: 500.98px) {
  .fixed-l-img-main {
    width: 80%;
  }
}
@media (max-width: 435.98px) {
  .fixed-l-img-main {
    width: 100%;
  }
}

.fixed-img {
  width: 100%;
  max-width: 269px;
  margin: 16px 0px 0px 36px;
}
@media (max-width: 1320.98px) {
  .fixed-img {
    max-width: 220px;
  }
}
@media (max-width: 768.98px) {
  .fixed-img {
    max-width: 100%;
    margin: 32px auto 60px;
  }
}
.fixed-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.fixed-ex-img {
  width: 100%;
  max-width: 497px;
}
.fixed-ex-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 500.98px) {
  .fixed-ex-img .fixed-pc-img {
    display: none;
  }
}
.fixed-ex-img .fixed-mob-img {
  display: none;
}
@media (max-width: 500.98px) {
  .fixed-ex-img .fixed-mob-img {
    display: block;
  }
}

.fixed-img-title p {
  font-size: 24px;
  color: var(--grey-color-100);
  line-height: 36px;
}
@media (max-width: 1000.98px) {
  .fixed-img-title p {
    font-size: 21px;
  }
}
.fixed-img-title p span {
  color: var(--text-color-300);
  position: relative;
}
.fixed-img-title p span::after {
  position: absolute;
  content: "";
  height: 6px;
  left: 0;
  bottom: 0;
  width: 100%;
  background: rgba(250, 229, 0, 0.7176470588);
}

.fixed-img-title {
  transform: rotate(-10deg);
}

.fixed-r-img-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70%;
}
@media (max-width: 1320.98px) {
  .fixed-r-img-main {
    width: 50%;
  }
}
@media (max-width: 768.98px) {
  .fixed-r-img-main {
    width: 100%;
  }
}
.fixed-r-img-main .fixed-r-text {
  font-size: 16px;
  line-height: 24px;
  color: var(--third-hover-color);
  text-align: center;
}
@media (max-width: 768.98px) {
  .fixed-r-img-main .fixed-r-text {
    margin-bottom: 16px;
    font-size: 21px;
    line-height: 32px;
  }
}
@media (max-width: 380.98px) {
  .fixed-r-img-main .fixed-r-text {
    font-size: 18px;
    line-height: 28px;
  }
}

.fixed-r-img-title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  margin-right: 24px;
}
@media (max-width: 768.98px) {
  .fixed-r-img-title {
    margin-right: 0px;
  }
}
.fixed-r-img-title .fixed-r-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--secondary-color);
  position: relative;
}
.fixed-r-img-title .fixed-r-title::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  width: 117px;
  height: 37px;
  aspect-ratio: 117/37;
  background-repeat: no-repeat;
  background-size: contain;
  background: url(../img/fiexd-r-ill-bg.svg);
}
.fixed-r-img-title .fixed-r-img {
  width: 44px;
  height: 39px;
  aspect-ratio: 44/39;
}
.fixed-r-img-title .fixed-r-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.fiexd-illustrate {
  display: flex;
  margin-left: 64px;
  margin-bottom: 40px;
  max-width: 1000px;
}
@media (max-width: 1200.98px) {
  .fiexd-illustrate {
    margin-left: 0px;
  }
}
@media (max-width: 1200.98px) {
  .fiexd-illustrate {
    flex-direction: column;
  }
}
.fiexd-illustrate .ill-title {
  font-size: 24px;
  font-weight: 500;
  position: relative;
  color: var(--white-color);
  margin-right: 36px;
  flex: 0 0 146px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 1200.98px) {
  .fiexd-illustrate .ill-title {
    margin-right: 0px;
    flex: 0 0 60px;
    margin-bottom: 24px;
  }
}
.fiexd-illustrate .ill-title::after {
  content: "";
  position: absolute;
  background: url(../img/fiexd-illustrate-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 146px;
  height: 54px;
  aspect-ratio: 146/54;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.fiexd-illustrate .ill-text {
  font-size: 24px;
  color: var(--text-color);
  line-height: 36px;
}
@media (max-width: 1320.98px) {
  .fiexd-illustrate .ill-text {
    font-size: 21px;
    line-height: 28px;
  }
}

.fiexd-advantage {
  display: flex;
  margin-left: 60px;
  margin-bottom: 40px;
  align-items: flex-start;
}
@media (max-width: 1200.98px) {
  .fiexd-advantage {
    margin-left: 0px;
  }
}
@media (max-width: 540.98px) {
  .fiexd-advantage {
    flex-direction: column;
  }
}

.fiexd-adv-title-main {
  display: flex;
  align-items: center;
  margin-right: 64px;
  position: relative;
  flex: 0 0 122px;
}
@media (max-width: 860.98px) {
  .fiexd-adv-title-main {
    margin-right: 24px;
  }
}
@media (max-width: 540.98px) {
  .fiexd-adv-title-main {
    flex: 0 0 72px;
    margin-bottom: 16px;
  }
}
.fiexd-adv-title-main::after {
  position: absolute;
  content: "";
  background: url(../img/fiexd-adv-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 117px;
  height: 37px;
  aspect-ratio: 117/37;
  z-index: -1;
}
.fiexd-adv-title-main .fiexd-adv-img {
  width: 69px;
  height: 57px;
  aspect-ratio: 69/57;
}
.fiexd-adv-title-main .fiexd-adv-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.fiexd-adv-title-main .fiexd-adv-title {
  font-size: 24px;
  color: var(--remark-red);
}

.fiexd-adv-list .fiexd-adv-item {
  position: relative;
}
.fiexd-adv-list .fiexd-adv-item::after {
  position: absolute;
  content: "";
  background: url(../img/fiexd-adv-icon02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 20px;
  height: 18px;
  aspect-ratio: 20/18;
  top: 24%;
  left: 0%;
  transform: translate(0%, 0%);
}
@media (max-width: 1320.98px) {
  .fiexd-adv-list .fiexd-adv-item::after {
    top: 18%;
  }
}
.fiexd-adv-list .fiexd-adv-item p {
  font-size: 28px;
  line-height: 32px;
  margin-left: 24px;
  color: var(--secondary-color);
}
@media (max-width: 1320.98px) {
  .fiexd-adv-list .fiexd-adv-item p {
    font-size: 21px;
    line-height: 28px;
  }
}
.fiexd-adv-list .fiexd-adv-item p span {
  font-size: 18px;
  color: var(--text-color);
  line-height: 24px;
}
.fiexd-adv-list .fiexd-adv-item p span:hover {
  color: var(--taoyuan-color);
}
.fiexd-adv-list .fiexd-adv-item p span:active {
  color: var(--taoyuan-color);
}

/*tab內容間距調整*/
.fixed-tab-content:nth-child(1) .fixed-img-content,
.fixed-tab-content:nth-child(1) .fiexd-illustrate,
.fixed-tab-content:nth-child(1) .fiexd-advantage,
.fixed-tab-content:nth-child(1) .fiexd-shortcoming, .fixed-tab-content:nth-child(3) .fixed-img-content,
.fixed-tab-content:nth-child(3) .fiexd-illustrate,
.fixed-tab-content:nth-child(3) .fiexd-advantage,
.fixed-tab-content:nth-child(3) .fiexd-shortcoming {
  margin-bottom: 80px;
}
@media (max-width: 1290.98px) {
  .fixed-tab-content:nth-child(1) .fixed-img-content,
  .fixed-tab-content:nth-child(1) .fiexd-illustrate,
  .fixed-tab-content:nth-child(1) .fiexd-advantage,
  .fixed-tab-content:nth-child(1) .fiexd-shortcoming, .fixed-tab-content:nth-child(3) .fixed-img-content,
  .fixed-tab-content:nth-child(3) .fiexd-illustrate,
  .fixed-tab-content:nth-child(3) .fiexd-advantage,
  .fixed-tab-content:nth-child(3) .fiexd-shortcoming {
    margin-bottom: 60px;
  }
}
@media (max-width: 768.98px) {
  .fixed-tab-content:nth-child(1) .fixed-img-content,
  .fixed-tab-content:nth-child(1) .fiexd-illustrate,
  .fixed-tab-content:nth-child(1) .fiexd-advantage,
  .fixed-tab-content:nth-child(1) .fiexd-shortcoming, .fixed-tab-content:nth-child(3) .fixed-img-content,
  .fixed-tab-content:nth-child(3) .fiexd-illustrate,
  .fixed-tab-content:nth-child(3) .fiexd-advantage,
  .fixed-tab-content:nth-child(3) .fiexd-shortcoming {
    margin-bottom: 80px;
  }
}

/*缺點*/
.fiexd-shortcoming {
  display: flex;
  margin-left: 60px;
  align-items: flex-start;
}
@media (max-width: 1200.98px) {
  .fiexd-shortcoming {
    margin-left: 0px;
  }
}
@media (max-width: 540.98px) {
  .fiexd-shortcoming {
    flex-direction: column;
    margin-left: 0px;
  }
}

.fiexd-short-title-main {
  display: flex;
  align-items: center;
  margin-right: 64px;
  position: relative;
  flex: 0 0 122px;
}
@media (max-width: 860.98px) {
  .fiexd-short-title-main {
    margin-right: 24px;
  }
}
@media (max-width: 540.98px) {
  .fiexd-short-title-main {
    flex: 0 0 56px;
    margin-bottom: 16px;
    margin-right: 0px;
  }
}
.fiexd-short-title-main::after {
  position: absolute;
  content: "";
  background: url(../img/fiexd-adv-bg.svg);
  background-repeat: no-repeat;
  background-size: contain;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 117px;
  height: 37px;
  aspect-ratio: 117/37;
  z-index: -1;
}
.fiexd-short-title-main .fiexd-short-img {
  width: 69px;
  height: 57px;
  aspect-ratio: 69/57;
}
.fiexd-short-title-main .fiexd-short-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.fiexd-short-title-main .fiexd-short-title {
  font-size: 24px;
  color: var(--secondary-color);
}

.fiexd-short-list .fiexd-adv-item {
  position: relative;
}
.fiexd-short-list .fiexd-adv-item::after {
  position: absolute;
  content: "";
  background: var(--secondary-color);
  top: 24%;
  left: 0%;
  transform: translate(0%, 0%);
  width: 15px;
  height: 15px;
  aspect-ratio: 15/15;
  z-index: -1;
}
@media (max-width: 1320.98px) {
  .fiexd-short-list .fiexd-adv-item::after {
    top: 16%;
  }
}
@media (max-width: 407.98px) {
  .fiexd-short-list .fiexd-adv-item::after {
    top: 8%;
  }
}
.fiexd-short-list .fiexd-adv-item p {
  font-size: 21px;
  line-height: 28px;
  color: var(--text-color);
  margin-left: 24px;
}
@media (max-width: 1320.98px) {
  .fiexd-short-list .fiexd-adv-item p {
    font-size: 18px;
    line-height: 24px;
  }
}

/*箭頭*/
.fixed-tab-arrow {
  display: none;
  position: absolute;
  z-index: 8;
}
@media (max-width: 834.98px) {
  .fixed-tab-arrow {
    display: block;
  }
}

.fixed-right-arrow {
  right: 0;
  top: 60%;
  transform: translate(0%, -50%);
  border: transparent;
  background: transparent;
  width: 60px;
  height: 60px;
  color: var(--text-color-100);
  padding: 0px;
}

.fixed-left-arrow {
  left: 0;
  top: 60%;
  transform: translate(0%, -50%);
  border: transparent;
  background: transparent;
  width: 60px;
  height: 60px;
  color: var(--text-color-100);
  padding: 0px;
}

/* ======= 側邊導覽 ======= */
.fixed-sidebar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 60px;
  margin-top: -63px;
}
@media (max-width: 1320.98px) {
  .fixed-sidebar {
    margin-top: -79px;
  }
}
@media (max-width: 1000.98px) {
  .fixed-sidebar {
    order: 1;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.fixed-tab-btn {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  padding: 1.5rem 0.75rem;
  font-size: 21px;
  font-weight: 600;
  border: none;
  background: var(--white-color);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 4px;
}
@media (max-width: 1000.98px) {
  .fixed-tab-btn {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.15), 0px 0 0px rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.15);
  }
}
@media (max-width: 540.98px) {
  .fixed-tab-btn {
    padding: 0.75rem 0.5px;
  }
}
.fixed-tab-btn:last-child {
  border-bottom-right-radius: 20px;
}
@media (max-width: 1000.98px) {
  .fixed-tab-btn:last-child {
    border-bottom-right-radius: 0px;
  }
}
.fixed-tab-btn:hover {
  background: var(--hover-btn-color);
  color: var(--white-color);
}
.fixed-tab-btn.active {
  background: var(--secondary-color);
  color: var(--white-color);
}
@media (max-width: 1000.98px) {
  .fixed-tab-btn {
    width: 33%;
  }
}
@media (max-width: 380.98px) {
  .fixed-tab-btn {
    font-size: 18px;
  }
}
@media (max-width: 310.98px) {
  .fixed-tab-btn {
    font-size: 16px;
  }
}

/*============03 更了解 DOMO HAIR 科技假髮===========*/
/*背景*/
.get-learn-container {
  width: 100%;
  position: relative;
  z-index: 0;
}
.get-learn-container::before {
  content: "";
  display: block;
  width: 82.5vw;
  height: calc(100% - 340px);
  position: absolute;
  top: 168px;
  right: 0;
  background-color: #fff;
  border-radius: 30px 0 0 30px;
  z-index: 2;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), -6px 0 12px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1880.98px) {
  .get-learn-container::before {
    width: 84.2vw;
  }
}
@media (max-width: 1832.98px) {
  .get-learn-container::before {
    width: 86vw;
  }
}
@media (max-width: 1728.98px) {
  .get-learn-container::before {
    width: 88vw;
  }
}
@media (max-width: 1712.98px) {
  .get-learn-container::before {
    top: 180px;
  }
}
@media (max-width: 1638.98px) {
  .get-learn-container::before {
    width: 90vw;
  }
}
@media (max-width: 1576.98px) {
  .get-learn-container::before {
    width: 92vw;
  }
}
@media (max-width: 1476.98px) {
  .get-learn-container::before {
    width: 94vw;
  }
}
@media (max-width: 1422.98px) {
  .get-learn-container::before {
    width: 96vw;
  }
}
@media (max-width: 1320.98px) {
  .get-learn-container::before {
    width: 89vw;
  }
}
@media (max-width: 1260.98px) {
  .get-learn-container::before {
    width: 92vw;
  }
}
@media (max-width: 1200.98px) {
  .get-learn-container::before {
    width: 91vw;
  }
}
@media (max-width: 1024.98px) {
  .get-learn-container::before {
    width: 93vw;
  }
}
@media (max-width: 1000.98px) {
  .get-learn-container::before {
    display: none;
  }
}
.get-learn-container::after {
  content: "";
  display: block;
  position: absolute;
  width: 545px;
  height: 545px;
  left: 100px;
  top: 400px;
  background: var(--primary-color);
  border-radius: 50%;
  z-index: 1;
}
@media (max-width: 834.98px) {
  .get-learn-container::after {
    display: none;
  }
}

.get-learn-content {
  position: relative;
  padding: 150px 0px 230px;
  max-width: 1245px;
  margin: 0 auto;
  z-index: 3;
}
@media (max-width: 1000.98px) {
  .get-learn-content {
    padding: 80px 0px;
  }
}

.get-learn-box {
  max-width: 1245px;
  margin: 60px auto 0px;
  position: relative;
  display: flex;
  z-index: 3;
}
@media (max-width: 1322.98px) {
  .get-learn-box {
    max-width: 1080px;
  }
}
@media (max-width: 1320.98px) {
  .get-learn-box {
    max-width: 1000px;
  }
}
@media (max-width: 1200.98px) {
  .get-learn-box {
    max-width: 900px;
    margin: 60px 0px 0px 145px;
  }
}
@media (max-width: 1080.98px) {
  .get-learn-box {
    margin: 60px 0px 0px 125px;
  }
}
@media (max-width: 1040.98px) {
  .get-learn-box {
    margin: 60px 0px 0px 105px;
  }
}
@media (max-width: 1000.98px) {
  .get-learn-box {
    margin: 60px auto 0px;
    flex-direction: column;
    background: var(--white-color);
    border-radius: 30px;
    padding-bottom: 48px;
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15);
  }
}
@media (max-width: 950.98px) {
  .get-learn-box {
    max-width: 90%;
  }
}
@media (max-width: 834.98px) {
  .get-learn-box {
    margin: 0px auto 0px;
  }
}

.get-learn-main {
  width: 40px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  padding: 0 16px;
  margin-right: 4%;
}
@media (max-width: 1322.98px) {
  .get-learn-main {
    margin-left: 0%;
    margin-right: 0%;
  }
}
@media (max-width: 1000.98px) {
  .get-learn-main {
    display: none;
  }
}
.get-learn-main .get-title {
  margin-top: 52px;
  position: relative;
}
@media (max-width: 1000.98px) {
  .get-learn-main .get-title {
    margin-top: 0px;
  }
}
.get-learn-main .get-title::after {
  position: absolute;
  content: "";
  width: 28px;
  height: 28px;
  background: url(../img/yellow-plus.svg);
  background-position: center;
  background-repeat: no-repeat;
  transform: rotate(10deg);
  right: -36px;
  bottom: 80px;
  display: none;
}

.get-learn-title-mob {
  display: none;
  font-size: 36px;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--secondary-color);
  text-align: center;
  padding: 80px 0px 36px;
}
@media (max-width: 434.98px) {
  .get-learn-title-mob {
    padding: 48px 0px 8px;
  }
}
@media (max-width: 380.98px) {
  .get-learn-title-mob {
    font-size: 32px;
    line-height: 36px;
  }
}
@media (max-width: 346.98px) {
  .get-learn-title-mob {
    font-size: 28px;
  }
}
.get-learn-title-mob span {
  font-size: 36px;
  font-family: "REM", sans-serif;
}
@media (max-width: 1000.98px) {
  .get-learn-title-mob span {
    margin-right: 8px;
  }
}
@media (max-width: 628.98px) {
  .get-learn-title-mob span {
    margin-bottom: 8px;
    margin-right: 0px;
  }
}
@media (max-width: 380.98px) {
  .get-learn-title-mob span {
    font-size: 32px;
    margin-bottom: 0px;
  }
}
@media (max-width: 346.98px) {
  .get-learn-title-mob span {
    font-size: 28px;
  }
}
@media (max-width: 1000.98px) {
  .get-learn-title-mob {
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 628.98px) {
  .get-learn-title-mob {
    flex-direction: column;
  }
}

.get-learn-wrap {
  position: relative;
  z-index: 3;
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
@media (max-width: 1320.98px) {
  .get-learn-wrap {
    width: 90%;
  }
}

.get-learn-box1 {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--text-color);
}
.get-learn-box1 .learn-title-main {
  width: 50%;
}
@media (max-width: 834.98px) {
  .get-learn-box1 .learn-title-main {
    width: 100%;
  }
}
@media (max-width: 834.98px) {
  .get-learn-box1 {
    border-bottom: none;
  }
}

.learn-title {
  display: flex;
  align-items: center;
  margin: 36px 0px;
}
@media (max-width: 939.98px) {
  .learn-title {
    margin: 24px 0px;
  }
}
@media (max-width: 834.98px) {
  .learn-title {
    margin: 24px 0px;
  }
}
@media (max-width: 420.98px) {
  .learn-title {
    flex-direction: column;
  }
}

.learn-title-num {
  color: var(--primary-color);
  font-weight: 500;
  font-family: "REM", sans-serif;
  font-size: 36px;
  margin-right: 16px;
}
@media (max-width: 420.98px) {
  .learn-title-num {
    margin-right: 0px;
    margin-bottom: 8px;
  }
}

.learn-title-text {
  font-size: 24px;
  font-weight: 500;
  color: var(--secondary-color);
}

.learn-img {
  width: 50%;
  max-width: 322px;
  height: 123px;
  aspect-ratio: 322/123;
  margin: 24px auto 36px;
}
@media (max-width: 834.98px) {
  .learn-img {
    max-width: 80%;
    width: 60%;
    height: auto;
    margin: 24px auto 80px;
  }
}
@media (max-width: 768.98px) {
  .learn-img {
    margin: 24px auto 48px;
  }
}
@media (max-width: 680.98px) {
  .learn-img {
    width: 70%;
  }
}
@media (max-width: 540.98px) {
  .learn-img {
    margin: 24px auto;
    width: 80%;
  }
}

.learn-text {
  width: 100%;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-color);
  padding: 0px 24px;
  box-sizing: border-box;
}
@media (max-width: 834.98px) {
  .learn-text {
    padding: 0px;
  }
}

.text-center {
  margin-bottom: 24px;
}
@media (max-width: 420.98px) {
  .text-center {
    margin-bottom: 0px;
  }
}

.text-width {
  width: 100%;
}

.learn-title-box {
  display: flex;
  margin-bottom: 24px;
}
@media (max-width: 590.98px) {
  .learn-title-box {
    flex-direction: column;
  }
}

.get-learn-box2 {
  width: 48%;
  padding: 24px 0px;
  margin-top: 16px;
  border-right: 1px solid var(--text-color);
}
@media (max-width: 834.98px) {
  .get-learn-box2 {
    width: 100%;
    border-right: none;
  }
}
@media (max-width: 590.98px) {
  .get-learn-box2 {
    margin-top: 0px;
    padding: 0px;
  }
}
.get-learn-box2 .lerarn-title-image {
  width: 143px;
  height: 110px;
  aspect-ratio: 322/123;
}
@media (max-width: 590.98px) {
  .get-learn-box2 .lerarn-title-image {
    width: 50%;
    height: auto;
    margin: 0 auto;
  }
}
.get-learn-box2 .lerarn-title-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.get-learn-box3 {
  width: 48%;
  margin: 24px 0px;
}
@media (max-width: 834.98px) {
  .get-learn-box3 {
    width: 100%;
  }
}
@media (max-width: 590.98px) {
  .get-learn-box3 {
    margin: 0px;
  }
}
.get-learn-box3 .lerarn-title-image {
  width: 113px;
  height: 114px;
  aspect-ratio: 113/114;
}
@media (max-width: 590.98px) {
  .get-learn-box3 .lerarn-title-image {
    width: 40%;
    height: auto;
    margin: 0 auto;
  }
}
.get-learn-box3 .lerarn-title-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.get-learn-box4 {
  width: 100%;
  padding: 24px 0px;
  margin: 24px 0px 36px;
  border-top: 1px solid var(--text-color);
  border-bottom: 1px solid var(--text-color);
}
@media (max-width: 834.98px) {
  .get-learn-box4 {
    border-top: 0px;
  }
}
.get-learn-box4 .get-learn-video-box {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 540.98px) {
  .get-learn-box4 .get-learn-video-box {
    width: 90%;
  }
}
@media (max-width: 450.98px) {
  .get-learn-box4 .get-learn-video-box {
    width: 100%;
  }
}
.get-learn-box4 .get-learn-video-box .get-learn-video {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  aspect-ratio: 16/9;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
@media (max-width: 939.98px) {
  .get-learn-box4 .get-learn-video-box .get-learn-video {
    margin-bottom: 0px;
  }
}
.get-learn-box4 .get-learn-video-box .get-learn-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.get-learn-box4 .get-learn-text-content {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 1322.98px) {
  .get-learn-box4 .get-learn-text-content {
    width: 90%;
  }
}
@media (max-width: 939.98px) {
  .get-learn-box4 .get-learn-text-content {
    width: 70%;
    flex-wrap: wrap;
    margin: 0 auto;
  }
}
@media (max-width: 834.98px) {
  .get-learn-box4 .get-learn-text-content {
    width: 100%;
  }
}
.get-learn-box4 .get-learn-text-content .learn-title {
  flex: 0 0 40%;
}
@media (max-width: 939.98px) {
  .get-learn-box4 .get-learn-text-content .learn-title {
    flex: 0 0 100%;
  }
}
.get-learn-box4 .get-learn-text-content .learn-text-main-04 {
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 415.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 {
    width: 85%;
  }
}
.get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list {
  position: relative;
}
.get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list::after {
  position: absolute;
  content: "";
  background: var(--text-color);
  top: 37%;
  left: 0%;
  width: 10px;
  height: 10px;
  aspect-ratio: 15/15;
  z-index: -1;
}
@media (max-width: 939.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list::after {
    top: 25%;
  }
}
@media (max-width: 834.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list::after {
    left: -3%;
  }
}
@media (max-width: 680.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list::after {
    top: 33%;
    left: -4%;
  }
}
@media (max-width: 469.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list::after {
    top: 16%;
  }
}
@media (max-width: 450.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list::after {
    left: -6%;
  }
}
@media (max-width: 320.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list::after {
    left: -8%;
  }
}
@media (max-width: 1000.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list:nth-child(1)::after {
    top: 20%;
  }
}
@media (max-width: 366.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list:nth-child(1)::after {
    top: 16%;
  }
}
@media (max-width: 320.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list:nth-child(1)::after {
    top: 10%;
  }
}
.get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list-2 {
  position: relative;
}
.get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list-2::after {
  position: absolute;
  content: "";
  background: var(--text-color);
  top: 17%;
  left: 0%;
  transform: translate(0%, 0%);
  width: 10px;
  height: 10px;
  aspect-ratio: 15/15;
  z-index: -1;
}
@media (max-width: 834.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list-2::after {
    left: -3%;
  }
}
@media (max-width: 680.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list-2::after {
    top: 17%;
    left: -4%;
  }
}
@media (max-width: 450.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list-2::after {
    left: -6%;
  }
}
@media (max-width: 366.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list-2::after {
    top: 12%;
  }
}
@media (max-width: 320.98px) {
  .get-learn-box4 .get-learn-text-content .learn-text-main-04 .leatn-list-2::after {
    left: -8%;
  }
}

.get-ensure-title-main {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 48px;
}
@media (max-width: 622.98px) {
  .get-ensure-title-main {
    align-items: flex-start;
    justify-content: start;
    margin-left: 26%;
  }
}
@media (max-width: 540.98px) {
  .get-ensure-title-main {
    margin-left: 20%;
  }
}
@media (max-width: 500.98px) {
  .get-ensure-title-main {
    margin-left: 22%;
  }
}
@media (max-width: 450.98px) {
  .get-ensure-title-main {
    margin-left: 17%;
  }
}
@media (max-width: 423.98px) {
  .get-ensure-title-main {
    margin-left: 10%;
  }
}
@media (max-width: 390.98px) {
  .get-ensure-title-main {
    margin-left: 5%;
  }
}
@media (max-width: 310.98px) {
  .get-ensure-title-main {
    margin-bottom: 24px;
    align-items: center;
  }
}
.get-ensure-title-main .get-ensure-title {
  font-size: 48px;
  color: var(--secondary-color);
}
@media (max-width: 834.98px) {
  .get-ensure-title-main .get-ensure-title {
    font-size: 36px;
    line-height: 48px;
    text-align: center;
  }
}
@media (max-width: 622.98px) {
  .get-ensure-title-main .get-ensure-title {
    display: none;
  }
}
.get-ensure-title-main .get-ensure-title-mob {
  display: none;
}
@media (max-width: 622.98px) {
  .get-ensure-title-main .get-ensure-title-mob {
    display: block;
    text-align: center;
    font-size: 36px;
    line-height: 48px;
    text-align: center;
    color: var(--secondary-color);
    margin-right: 8px;
  }
}
@media (max-width: 380.98px) {
  .get-ensure-title-main .get-ensure-title-mob {
    font-size: 32px;
  }
}
@media (max-width: 346.98px) {
  .get-ensure-title-main .get-ensure-title-mob {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (max-width: 280.98px) {
  .get-ensure-title-main .get-ensure-title-mob {
    margin-right: 4px;
  }
}
.get-ensure-title-main .get-ensure-icon {
  width: 60px;
  height: 60px;
}
@media (max-width: 310.98px) {
  .get-ensure-title-main .get-ensure-icon {
    width: 40px;
    height: 40px;
  }
}
.get-ensure-title-main .get-ensure-icon img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.get-ensure-wrap {
  display: flex;
  justify-content: space-between;
}
@media (max-width: 1322.98px) {
  .get-ensure-wrap {
    align-items: center;
  }
}
@media (max-width: 1200.98px) {
  .get-ensure-wrap {
    flex-wrap: wrap;
    margin-bottom: 24px;
  }
}
.get-ensure-wrap .get-learn-list {
  width: 45%;
}
@media (max-width: 1322.98px) {
  .get-ensure-wrap .get-learn-list {
    width: 48%;
  }
}
@media (max-width: 1200.98px) {
  .get-ensure-wrap .get-learn-list {
    width: 100%;
    order: 2;
  }
}
.get-ensure-wrap .get-learn-video-main {
  width: 50%;
}
@media (max-width: 1200.98px) {
  .get-ensure-wrap .get-learn-video-main {
    width: 80%;
    margin: 0 auto;
    order: 1;
  }
}
@media (max-width: 939.98px) {
  .get-ensure-wrap .get-learn-video-main {
    width: 80%;
    margin: 0 auto;
  }
}
.get-ensure-wrap .get-learn-video-main .get-learn-video {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  aspect-ratio: 16/9;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}
.get-ensure-wrap .get-learn-video-main .get-learn-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.get-ensure-wrap .get-learn-item {
  list-style-type: decimal;
  color: var(--text-color);
  margin-left: 24px;
}
.get-ensure-wrap .get-learn-item p {
  font-size: 18px;
  color: var(--text-color);
  line-height: 30px;
}
.get-ensure-wrap .mark-ensure {
  position: relative;
}
.get-ensure-wrap .mark-ensure:after {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: -4px;
  left: 0px;
}
.get-ensure-wrap .mark-ensure-1 {
  position: relative;
}
.get-ensure-wrap .mark-ensure-1:after {
  display: none;
  content: "";
  width: 98%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  top: 27px;
  left: 0px;
}
.get-ensure-wrap .mark-ensure-1 .mark-ensure-span-3 {
  display: none;
  position: absolute;
  width: 92%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  top: 27px;
  left: 0px;
}
@media (max-width: 474.98px) {
  .get-ensure-wrap .mark-ensure-1 .mark-ensure-span-3 {
    display: block;
  }
}
@media (max-width: 452.98px) {
  .get-ensure-wrap .mark-ensure-1 .mark-ensure-span-3 {
    width: 98%;
  }
}
.get-ensure-wrap .mark-ensure-2 {
  position: relative;
}
.get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
  display: none;
  position: absolute;
  width: 10%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
@media (max-width: 496.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
    display: block;
  }
}
@media (max-width: 440.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
    width: 30%;
  }
}
@media (max-width: 430.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
    width: 43%;
  }
}
@media (max-width: 405.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
    width: 59%;
  }
}
@media (max-width: 385.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
    width: 85%;
  }
}
@media (max-width: 360.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
    width: 98%;
  }
}
@media (max-width: 340.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-1 {
    bottom: 28px;
  }
}
.get-ensure-wrap .mark-ensure-2 .mark-ensure-span-2 {
  display: none;
  position: absolute;
  width: 17%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
@media (max-width: 340.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-2 {
    display: block;
  }
}
@media (max-width: 318.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-2 {
    width: 44%;
  }
}
@media (max-width: 296.98px) {
  .get-ensure-wrap .mark-ensure-2 .mark-ensure-span-2 {
    width: 71%;
  }
}
.get-ensure-wrap .mark-ensure-2:after {
  content: "";
  display: block;
  width: 70%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
@media (max-width: 1322.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 98%;
  }
}
@media (max-width: 1320.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 85%;
  }
}
@media (max-width: 1200.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 95%;
  }
}
@media (max-width: 939.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 6%;
  }
}
@media (max-width: 870.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 10%;
  }
}
@media (max-width: 834.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 16%;
  }
}
@media (max-width: 820.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 18%;
  }
}
@media (max-width: 782.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 25%;
  }
}
@media (max-width: 740.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 33%;
  }
}
@media (max-width: 700.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 40%;
  }
}
@media (max-width: 670.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 47%;
  }
}
@media (max-width: 628.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 59%;
  }
}
@media (max-width: 585.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 70%;
  }
}
@media (max-width: 550.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 80%;
  }
}
@media (max-width: 520.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 90%;
  }
}
@media (max-width: 496.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    width: 98%;
    bottom: 28px;
  }
}
@media (max-width: 340.98px) {
  .get-ensure-wrap .mark-ensure-2:after {
    bottom: 88px;
  }
}
.get-ensure-wrap .mark-ensure-2::before {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 29px;
  left: 0px;
}
@media (max-width: 1322.98px) {
  .get-ensure-wrap .mark-ensure-2::before {
    width: 98%;
  }
}
@media (max-width: 1200.98px) {
  .get-ensure-wrap .mark-ensure-2::before {
    display: none;
  }
}
@media (max-width: 939.98px) {
  .get-ensure-wrap .mark-ensure-2::before {
    display: block;
  }
}
@media (max-width: 496.98px) {
  .get-ensure-wrap .mark-ensure-2::before {
    bottom: 56px;
  }
}

.ensure-title {
  display: flex;
  align-items: center;
  margin: 16px 0px;
}
.ensure-title .ensure-title-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: var(--secondary-color);
}

@media (max-width: 1000.98px) {
  .get-learn-box5 .get-learn-video-main {
    width: 80%;
    margin: 0 auto;
  }
}
@media (max-width: 622.98px) {
  .get-learn-box5 .get-learn-video-main {
    width: 90%;
  }
}
@media (max-width: 450.98px) {
  .get-learn-box5 .get-learn-video-main {
    width: 100%;
  }
}

.get-learn-box6 .ensure-text {
  font-size: 18px;
  line-height: 30px;
  color: var(--text-color);
  margin-bottom: 16px;
}

/*=======要選擇科技假髮?還是植髮?=======*/
.get-transplant-container {
  position: relative;
  z-index: 1;
  padding: 0px 0px 120px;
}
@media (max-width: 1000.98px) {
  .get-transplant-container {
    padding: 0px 0px 200px;
  }
}
@media (max-width: 834.98px) {
  .get-transplant-container {
    padding: 0px 0px 100px;
  }
}
@media (max-width: 664.98px) {
  .get-transplant-container {
    padding: 0px 0px 60px;
  }
}
.get-transplant-container::before {
  content: "";
  display: block;
  width: 82.5vw;
  height: calc(100% - 216px);
  position: absolute;
  top: 0px;
  left: 0;
  background-color: #fff;
  border-radius: 0px 30px 30px 0px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 0px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15);
  z-index: 3;
}
@media (max-width: 1880.98px) {
  .get-transplant-container::before {
    width: 84vw;
  }
}
@media (max-width: 1880.98px) {
  .get-transplant-container::before {
    width: 86vw;
  }
}
@media (max-width: 1724.98px) {
  .get-transplant-container::before {
    width: 90vw;
  }
}
@media (max-width: 1540.98px) {
  .get-transplant-container::before {
    width: 93vw;
  }
}
@media (max-width: 1450.98px) {
  .get-transplant-container::before {
    width: 95vw;
  }
}
@media (max-width: 1320.98px) {
  .get-transplant-container::before {
    height: calc(100% - 250px);
  }
}
@media (max-width: 1000.98px) {
  .get-transplant-container::before {
    display: none;
  }
}
.get-transplant-container::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  background: url(../img/get-bg3.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  background-position: top center;
  z-index: 2;
}

.get-transplant-content {
  position: relative;
  max-width: 1245px;
  margin: 0 auto;
  padding-top: 140px;
  display: flex;
  z-index: 4;
}
@media (max-width: 1410.98px) {
  .get-transplant-content {
    max-width: 1170px;
  }
}
@media (max-width: 1320.98px) {
  .get-transplant-content {
    max-width: 1000px;
  }
}
@media (max-width: 1100.98px) {
  .get-transplant-content {
    max-width: 90%;
  }
}
@media (max-width: 1000.98px) {
  .get-transplant-content {
    flex-direction: column;
    padding-top: 100px;
    padding-bottom: 100px;
    background: var(--white-color);
    border-radius: 30px;
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 0px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15);
  }
}
@media (max-width: 834.98px) {
  .get-transplant-content {
    padding-bottom: 80px;
  }
}
@media (max-width: 664.98px) {
  .get-transplant-content {
    padding-bottom: 60px;
    padding-top: 60px;
  }
}
@media (max-width: 400.98px) {
  .get-transplant-content {
    padding-bottom: 36px;
  }
}

.get-transplant-main {
  width: calc(100% - 40px);
}
@media (max-width: 1000.98px) {
  .get-transplant-main {
    margin: 0px auto;
  }
}

.get-transplant-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60%;
  margin: 0 auto 48px;
}
@media (max-width: 1200.98px) {
  .get-transplant-wrap {
    width: 80%;
  }
}
@media (max-width: 622.98px) {
  .get-transplant-wrap {
    width: 90%;
  }
}
@media (max-width: 450.98px) {
  .get-transplant-wrap {
    width: 100%;
  }
}
.get-transplant-wrap .get-transplant-video {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 的比例 (9 ÷ 16 = 0.5625) */
  height: 0;
  aspect-ratio: 16/9; /* 等比16:9 */
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
  margin-top: -24px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.1), -6px 0 12px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.1);
}
.get-transplant-wrap .get-transplant-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.transplan-text {
  width: 80%;
  margin: 24px auto;
}
@media (max-width: 1000.98px) {
  .transplan-text {
    width: 100%;
    margin: 24px auto 0px;
  }
}
@media (max-width: 620.98px) {
  .transplan-text {
    margin: 0px auto;
  }
}
.transplan-text .get-transplant {
  font-size: 21px;
  line-height: 36px;
  text-align: center;
  max-width: 400px;
  margin: 0 auto;
  color: var(--text-color);
}

.get-transplant-title-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 40px;
  margin-top: -100px;
  padding: 0px 16px 0px;
}
@media (max-width: 1000.98px) {
  .get-transplant-title-main {
    display: none;
  }
}

.get-transplant-title-mob-main {
  display: none;
}
@media (max-width: 1000.98px) {
  .get-transplant-title-mob-main {
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
  }
}
@media (max-width: 628.98px) {
  .get-transplant-title-mob-main {
    flex-direction: column;
    align-items: center;
  }
}
.get-transplant-title-mob-main .get-title-mob-num {
  font-size: 36px;
  font-family: "REM", sans-serif;
  margin-right: 8px;
  color: var(--secondary-color);
}
@media (max-width: 628.98px) {
  .get-transplant-title-mob-main .get-title-mob-num {
    margin-right: 0px;
    margin-bottom: 8px;
  }
}
@media (max-width: 380.98px) {
  .get-transplant-title-mob-main .get-title-mob-num {
    font-size: 32px;
    line-height: 42px;
  }
}
.get-transplant-title-mob-main .get-transplant-mob-title {
  font-size: 36px;
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 4px;
  text-align: center;
  color: var(--secondary-color);
}
@media (max-width: 600.98px) {
  .get-transplant-title-mob-main .get-transplant-mob-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 44px;
  }
}
@media (max-width: 380.98px) {
  .get-transplant-title-mob-main .get-transplant-mob-title {
    font-size: 32px;
    line-height: 42px;
  }
}
@media (max-width: 320.98px) {
  .get-transplant-title-mob-main .get-transplant-mob-title {
    font-size: 28px;
    line-height: 36px;
  }
}

.get-transplant-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 36px;
  font-family: "Noto Sans TC", sans-serif;
  letter-spacing: 8px;
  color: var(--secondary-color);
  writing-mode: vertical-rl;
}
.get-transplant-title span {
  display: inline-block;
  transform: rotate(-90deg) translateY(10%);
  margin-bottom: 16px;
}

.mark-transplant {
  position: relative;
}
.mark-transplant:after {
  content: "";
  display: block;
  width: 100%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
.mark-transplant:nth-child(1) .mark-transplant-1 {
  display: none;
  width: 100%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
@media (max-width: 598.98px) {
  .mark-transplant:nth-child(1) .mark-transplant-1 {
    display: block;
    left: 44%;
    width: 13%;
  }
}
@media (max-width: 540.98px) {
  .mark-transplant:nth-child(1) .mark-transplant-1 {
    left: 39%;
    width: 23%;
  }
}
@media (max-width: 450.98px) {
  .mark-transplant:nth-child(1) .mark-transplant-1 {
    left: 40%;
    width: 18%;
  }
}
@media (max-width: 414.98px) {
  .mark-transplant:nth-child(1) .mark-transplant-1 {
    left: 31%;
    width: 39%;
  }
}
@media (max-width: 370.98px) {
  .mark-transplant:nth-child(1) .mark-transplant-1 {
    left: 22%;
    width: 56%;
  }
}
@media (max-width: 324.98px) {
  .mark-transplant:nth-child(1) .mark-transplant-1 {
    left: 11%;
    width: 79%;
  }
}
@media (max-width: 300.98px) {
  .mark-transplant:nth-child(1) .mark-transplant-1 {
    left: 2%;
    width: 95%;
  }
}
@media (max-width: 537.98px) {
  .mark-transplant:nth-child(1)::after {
    bottom: 34px;
  }
}
.mark-transplant:nth-child(2) .mark-transplant-2 {
  display: none;
  width: 100%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
@media (max-width: 347.98px) {
  .mark-transplant:nth-child(2) .mark-transplant-2 {
    display: block;
    width: 16%;
    left: 42%;
  }
}
@media (max-width: 324.98px) {
  .mark-transplant:nth-child(2) .mark-transplant-2 {
    width: 26%;
    left: 37%;
  }
}
@media (max-width: 300.98px) {
  .mark-transplant:nth-child(2) .mark-transplant-2 {
    width: 45%;
    left: 27%;
  }
}
@media (max-width: 347.98px) {
  .mark-transplant:nth-child(2)::after {
    bottom: 37px;
  }
}
@media (max-width: 485.98px) {
  .mark-transplant:nth-child(3)::after {
    bottom: 34px;
  }
}
@media (max-width: 449.98px) {
  .mark-transplant:nth-child(3)::after {
    bottom: 0px;
  }
}
@media (max-width: 441.98px) {
  .mark-transplant:nth-child(3)::after {
    bottom: 34px;
  }
}
.mark-transplant:nth-child(3) .mark-transplant-3 {
  display: none;
  width: 100%;
  height: 6px;
  background: url(../img/obj_wave_01.svg);
  background-size: auto 100%;
  background-repeat: repeat-x;
  position: absolute;
  bottom: 0px;
  left: 0px;
}
@media (max-width: 485.98px) {
  .mark-transplant:nth-child(3) .mark-transplant-3 {
    display: block;
    left: 43%;
    width: 13%;
  }
}
@media (max-width: 449.98px) {
  .mark-transplant:nth-child(3) .mark-transplant-3 {
    display: none;
  }
}
@media (max-width: 441.98px) {
  .mark-transplant:nth-child(3) .mark-transplant-3 {
    display: block;
  }
}
@media (max-width: 414.98px) {
  .mark-transplant:nth-child(3) .mark-transplant-3 {
    left: 39%;
    width: 22%;
  }
}
@media (max-width: 370.98px) {
  .mark-transplant:nth-child(3) .mark-transplant-3 {
    left: 31%;
    width: 42%;
  }
}
@media (max-width: 324.98px) {
  .mark-transplant:nth-child(3) .mark-transplant-3 {
    left: 18%;
    width: 63%;
  }
}
@media (max-width: 300.98px) {
  .mark-transplant:nth-child(3) .mark-transplant-3 {
    left: 10%;
    width: 80%;
  }
}

.get-transplant-box {
  display: flex;
  justify-content: space-around;
}
@media (max-width: 768.98px) {
  .get-transplant-box {
    flex-wrap: wrap;
    justify-content: center;
  }
}
.get-transplant-box .get-transplant-block {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--text-color);
  border-radius: 30px;
  overflow: hidden;
  position: relative;
}
@media (max-width: 768.98px) {
  .get-transplant-box .get-transplant-block {
    width: 80%;
  }
}
@media (max-width: 600.98px) {
  .get-transplant-box .get-transplant-block {
    width: 90%;
  }
}
@media (max-width: 422.98px) {
  .get-transplant-box .get-transplant-block {
    width: 100%;
  }
}
@media (max-width: 1014.98px) {
  .get-transplant-box .get-transplant-block:nth-child(2) .get-transplant-color {
    opacity: 1;
  }
}
@media (max-width: 768.98px) {
  .get-transplant-box .get-transplant-block:nth-child(2) .get-transplant-color {
    opacity: 0;
  }
}
@media (max-width: 768.98px) {
  .get-transplant-box .get-transplant-block:nth-child(1) {
    margin-bottom: 48px;
  }
}
@media (max-width: 847.98px) {
  .get-transplant-box .get-transplant-block:nth-child(1) .get-transplant-color {
    height: 57px;
  }
}
@media (max-width: 768.98px) {
  .get-transplant-box .get-transplant-block:nth-child(1) .get-transplant-color {
    opacity: 0;
  }
}
.get-transplant-box .get-transplant-block .get-transplant-color {
  opacity: 0;
  position: absolute;
  background: var(--text-color);
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 40px;
}
@media (max-width: 891.98px) {
  .get-transplant-box .get-transplant-block .get-transplant-color {
    opacity: 1;
    height: 28px;
  }
}

.tranplant-up {
  padding: 24px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tranplant-up .tranplant-up-img {
  width: 68px;
  height: 68px;
  margin-bottom: 8px;
}
.tranplant-up .tranplant-up-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.tranplant-up-title {
  font-size: 24px;
  color: var(--text-color);
}

.tranplant-down {
  background-color: var(--text-color);
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
}
@media (max-width: 1054.98px) {
  .tranplant-down {
    padding: 16px;
  }
}
@media (max-width: 891.98px) {
  .tranplant-down {
    padding: 16px 16px 0px;
  }
}
@media (max-width: 768.98px) {
  .tranplant-down {
    padding: 16px;
  }
}
.tranplant-down .ng-icon {
  position: relative;
  padding-left: 24px;
}
.tranplant-down .ng-icon::before {
  position: absolute;
  content: "";
  width: 15px;
  height: 15px;
  background: url(../img/ng.svg);
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  top: 8px;
}
.tranplant-down .ok-icon {
  position: relative;
  padding-left: 24px;
}
.tranplant-down .ok-icon::before {
  position: absolute;
  content: "";
  left: 0;
  top: 8px;
  width: 15px;
  height: 15px;
  background: url(../img/ok.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
.tranplant-down li {
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 768.98px) {
  .tranplant-down li {
    width: 90%;
  }
}
.tranplant-down li p {
  font-size: 16px;
  line-height: 28px;
  color: var(--white-color);
}

.service-container {
  background: url(../img/service-bg.svg);
  width: 100%;
  height: auto;
  background-position: top center;
  background-repeat: repeat-y;
  background-size: cover;
  padding: 168px 0px 80px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1000.98px) {
  .service-container {
    padding: 108px 0px 80px;
  }
}
@media (max-width: 834.98px) {
  .service-container {
    padding: 108px 0px 40px;
  }
}
@media (max-width: 540.98px) {
  .service-container {
    padding: 108px 0px 0px;
  }
}

.service-content {
  background: url(../img/service-bg-2.svg);
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}
@media (max-width: 1200.98px) {
  .service-content {
    width: 146%;
    background-size: contain;
    background-position: top left;
    left: -98px;
  }
}
@media (max-width: 1000.98px) {
  .service-content {
    width: 160%;
  }
}
@media (max-width: 912.98px) {
  .service-content {
    width: 165%;
    top: -36px;
  }
}
@media (max-width: 834.98px) {
  .service-content {
    width: 177%;
    top: -18px;
    left: -136px;
  }
}
@media (max-width: 768.98px) {
  .service-content {
    width: 215%;
  }
}
@media (max-width: 540.98px) {
  .service-content {
    width: 227%;
    top: -6px;
    left: -99px;
  }
}

.service-main {
  position: relative;
  z-index: 2;
  max-width: 1245px;
  margin: 0px auto;
  padding-bottom: 40px;
}
@media (max-width: 1320.98px) {
  .service-main {
    max-width: 1045px;
  }
}
@media (max-width: 1200.98px) {
  .service-main {
    max-width: 900px;
  }
}
@media (max-width: 1000.98px) {
  .service-main {
    max-width: 800px;
  }
}
@media (max-width: 834.98px) {
  .service-main {
    max-width: 90%;
  }
}
@media (max-width: 440.98px) {
  .service-main {
    max-width: 80%;
  }
}
.service-main .service-title {
  font-size: 60px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 24px;
}
@media (max-width: 912.98px) {
  .service-main .service-title {
    font-size: 48px;
  }
}
@media (max-width: 540.98px) {
  .service-main .service-title {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 4px;
  }
}
@media (max-width: 440.98px) {
  .service-main .service-title {
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
}
.service-main .service-link {
  color: var(--text-color-200);
  text-decoration: underline;
}
.service-main .service-link:hover {
  color: var(--third-color);
}
.service-main .service-text {
  color: var(--text-color-200);
  font-size: 16px;
  margin-bottom: 16px;
}
@media (max-width: 540.98px) {
  .service-main .service-text {
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 16px;
  }
}
.service-main .service-main-link {
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: underline;
}
.service-main .service-main-link:hover {
  color: var(--third-hover-color);
}

.service-subtitle-main {
  display: flex;
  align-items: center;
  padding: 24px 0px;
  margin-left: 16px;
}
@media (max-width: 428.98px) {
  .service-subtitle-main {
    padding: 16px 0px;
  }
}
.service-subtitle-main .service-subtitle-icon {
  width: 40px;
  height: 40px;
  margin-right: 16px;
  position: relative;
}
.service-subtitle-main .service-subtitle-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.service-subtitle-main .service-subtitle-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: url(../img/get-start-icon-after.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 10s linear infinite; /* 4秒轉一圈，可自行調整 */
}
@media (max-width: 500.98px) {
  .service-subtitle-main .service-subtitle-icon::after {
    width: 40px;
    height: 40px;
  }
}
.service-subtitle-main .service-subtitle-icon::before {
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  background: url(../img/get-start-icon-befor.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin-reverse 10s linear infinite;
}
@media (max-width: 500.98px) {
  .service-subtitle-main .service-subtitle-icon::before {
    width: 50px;
    height: 50px;
  }
}
.service-subtitle-main .service-subtitle {
  font-size: 24px;
  color: var(--text-color);
  font-family: "REM", sans-serif;
}
@media (max-width: 540.98px) {
  .service-subtitle-main .service-subtitle {
    font-size: 20px;
  }
}

.step-tel {
  color: var(--text-color);
  font-weight: 500;
}

.step-fb {
  color: var(--fb-color);
  font-weight: 500;
}

.step-line {
  color: var(--line-color);
  font-weight: 500;
}

/*SLIDER*/
.service-slider {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.service-main-slider {
  width: 100%;
  max-width: 900px;
  margin: 40px auto;
}
@media (max-width: 1000.98px) {
  .service-main-slider {
    max-width: 800px;
    margin: 40px auto 0px;
  }
}
@media (max-width: 834.98px) {
  .service-main-slider {
    max-width: 600px;
  }
}
@media (max-width: 620.98px) {
  .service-main-slider {
    max-width: 550px;
    margin: 0px auto;
    order: 2;
  }
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

.step-item-img {
  width: 560px;
  height: 315px;
  margin: 0 auto 36px;
  aspect-ratio: 560/315;
}
@media (max-width: 768.98px) {
  .step-item-img {
    width: 500px;
    height: auto;
  }
}
@media (max-width: 620.98px) {
  .step-item-img {
    width: 80%;
  }
}
@media (max-width: 440.98px) {
  .step-item-img {
    margin: 0 auto 16px;
    width: 90%;
  }
}
@media (max-width: 300.98px) {
  .step-item-img {
    width: 95%;
  }
}

@media (max-width: 440.98px) {
  .step-item-content {
    min-height: 470px;
  }
}
@media (max-width: 300.98px) {
  .step-item-content {
    min-height: 500px;
  }
}

.step-img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.step-text-content {
  max-width: 80%;
  margin: 0 auto;
  padding-bottom: 24px;
}

.step-title-content {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
.step-title-content .step-line {
  display: block;
  background: var(--grey-color-100);
  max-width: 268px;
  width: 30%;
  height: 4px;
}
@media (max-width: 1000.98px) {
  .step-title-content .step-line {
    width: 20%;
  }
}
@media (max-width: 440.98px) {
  .step-title-content .step-line {
    width: 10%;
  }
}

.step-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 8px;
}

.step-title {
  font-size: 18px;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--text-color);
  margin-bottom: 8px;
}
.step-title span {
  font-size: 42px;
  font-weight: 500;
  line-height: 42px;
  font-family: "REM", sans-serif;
}
@media (max-width: 834.98px) {
  .step-title span {
    font-size: 36px;
    line-height: 36px;
  }
}

.step-title-b {
  font-size: 28px;
  line-height: 36px;
  font-weight: 500;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--text-color);
  text-align: center;
}
@media (max-width: 834.98px) {
  .step-title-b {
    font-size: 24px;
    line-height: 30px;
  }
}

.step-text {
  margin-top: 10px;
  font-size: 21px;
  line-height: 32px;
  color: var(--text-color);
}
@media (max-width: 834.98px) {
  .step-text {
    font-size: 18px;
    line-height: 24px;
  }
}

.step-title-bmain {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.step-title-bs {
  font-size: 18px;
  color: var(--remark-red);
}

/* 下方 8 個豆豆 ICON */
.custom-step-dots {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.custom-step-dots img {
  width: 50px;
  cursor: pointer;
  opacity: 0.5;
  transition: 0.3s;
}

.custom-step-dots img.active {
  opacity: 1;
  transform: scale(1.15);
}

.swiper-button-prev,
.swiper-button-next {
  color: #999; /* 預設灰色 */
  opacity: 0.5;
  transition: 0.3s;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 1;
  color: #373430;
}

/* 豆豆基本設定 */
.slider-dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  justify-content: space-around;
  position: relative;
  flex-wrap: wrap;
  width: 800px;
  margin: 0 auto;
}
@media (max-width: 1000.98px) {
  .slider-dots {
    width: 600px;
  }
}
@media (max-width: 620.98px) {
  .slider-dots {
    order: 0;
    width: 400px;
    margin: 0px auto 48px;
  }
}
@media (max-width: 428.98px) {
  .slider-dots {
    margin: 0px auto 32px;
    width: 90%;
  }
}
.slider-dots::after {
  position: absolute;
  content: "";
  background: var(--grey-color-100);
  width: 80%;
  height: 6px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
@media (max-width: 620.98px) {
  .slider-dots::after {
    display: none;
  }
}

.dot {
  width: 60px; /* 你可調整大小 */
  height: 60px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 2;
  cursor: pointer;
  transition: transform 0.3s ease; /* 只縮放，不變色 */
}
@media (max-width: 834.98px) {
  .dot {
    width: 50px;
    height: 50px;
  }
}
@media (max-width: 620.98px) {
  .dot {
    width: 22%;
  }
}
@media (max-width: 440.98px) {
  .dot {
    height: 55px;
    margin-bottom: 8px;
  }
}

.dot.active {
  transform: scale(1.2); /* 放大效果 */
}

/* 普通狀態圖片 */
.dot[data-index="1"] {
  background-image: url("../img/step1.svg");
}

.dot[data-index="2"] {
  background-image: url("../img/step2.svg");
}

.dot[data-index="3"] {
  background-image: url("../img/step3.svg");
}

.dot[data-index="4"] {
  background-image: url("../img/step4.svg");
}

.dot[data-index="5"] {
  background-image: url("../img/step5.svg");
}

.dot[data-index="6"] {
  background-image: url("../img/step6.svg");
}

.dot[data-index="7"] {
  background-image: url("../img/step7.svg");
}

.dot[data-index="8"] {
  background-image: url("../img/step8.svg");
}

/* active 狀態圖片 */
.dot.active[data-index="1"] {
  background-image: url("../img/step1-a.svg");
}

.dot.active[data-index="2"] {
  background-image: url("../img/step2-a.svg");
}

.dot.active[data-index="3"] {
  background-image: url("../img/step3-a.svg");
}

.dot.active[data-index="4"] {
  background-image: url("../img/step4-a.svg");
}

.dot.active[data-index="5"] {
  background-image: url("../img/step5-a.svg");
}

.dot.active[data-index="6"] {
  background-image: url("../img/step6-a.svg");
}

.dot.active[data-index="7"] {
  background-image: url("../img/step7-a.svg");
}

.dot.active[data-index="8"] {
  background-image: url("../img/step8-a.svg");
}

.get-style-header {
  width: 100%;
  background: var(--bg-cololr);
  position: relative;
  padding: 104px 0px 148px;
}
@media (max-width: 1320.98px) {
  .get-style-header {
    padding: 104px 0px 0px;
  }
}
@media (max-width: 1000.98px) {
  .get-style-header {
    padding: 64px 0px 80px;
  }
}
@media (max-width: 768.98px) {
  .get-style-header {
    background: var(--primary-color);
  }
}
@media (max-width: 500.98px) {
  .get-style-header {
    padding: 64px 0px;
  }
}
@media (max-width: 384.98px) {
  .get-style-header {
    padding: 48px 0px;
  }
}
.get-style-header::before {
  content: "";
  display: block;
  width: 82.5vw;
  height: 800px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fae600;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 30px;
}
@media (max-width: 1724.98px) {
  .get-style-header::before {
    width: 90vw;
  }
}
@media (max-width: 1450.98px) {
  .get-style-header::before {
    width: 95vw;
  }
}
@media (max-width: 1320.98px) {
  .get-style-header::before {
    height: 750px;
  }
}
@media (max-width: 1000.98px) {
  .get-style-header::before {
    height: calc(100% - 0px);
  }
}
@media (max-width: 768.98px) {
  .get-style-header::before {
    display: none;
  }
}

.get-start-header-main {
  max-width: 1245px;
  margin: 0px auto 0px;
  display: flex;
  align-items: center;
  position: relative;
  z-index: 2;
  margin: 0 auto;
}
@media (max-width: 1320.98px) {
  .get-start-header-main {
    max-width: 1045px;
  }
}
@media (max-width: 1200.98px) {
  .get-start-header-main {
    max-width: 900px;
  }
}
@media (max-width: 1000.98px) {
  .get-start-header-main {
    max-width: 100%;
    width: 100%;
  }
}
@media (max-width: 834.98px) {
  .get-start-header-main {
    max-width: 90%;
  }
}
@media (max-width: 460.98px) {
  .get-start-header-main {
    max-width: 100%;
  }
}
.get-start-header-main .get-style-header-container {
  display: flex;
  align-items: center;
}
@media (max-width: 1320.98px) {
  .get-start-header-main .get-style-header-container {
    justify-content: center;
  }
}
@media (max-width: 1000.98px) {
  .get-start-header-main .get-style-header-container {
    flex-direction: column;
    padding: 36px 36px 0px;
    background: var(--white-color);
    border-radius: 30px;
    min-height: 700px;
    width: 72%;
    margin: 0 auto;
  }
}
@media (max-width: 500.98px) {
  .get-start-header-main .get-style-header-container {
    border-radius: 16px;
    min-height: 600px;
  }
}
@media (max-width: 460.98px) {
  .get-start-header-main .get-style-header-container {
    min-height: 560px;
  }
}
@media (max-width: 390.98px) {
  .get-start-header-main .get-style-header-container {
    min-height: 523px;
  }
}
@media (max-width: 371.98px) {
  .get-start-header-main .get-style-header-container {
    min-height: 500px;
  }
}
@media (max-width: 300.98px) {
  .get-start-header-main .get-style-header-container {
    width: 80%;
    padding: 24px 24px 0px;
  }
}
.get-start-header-main .get-style-header-container .get-style-header-content {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.get-start-header-main .get-style-header-container .get-style-header-content .get-style-img {
  width: 645px;
  height: 443px;
  aspect-ratio: 645/443;
  border-radius: 30px;
}
@media (max-width: 1320.98px) {
  .get-start-header-main .get-style-header-container .get-style-header-content .get-style-img {
    width: 500px;
    height: auto;
  }
}
@media (max-width: 1000.98px) {
  .get-start-header-main .get-style-header-container .get-style-header-content .get-style-img {
    width: 100%;
  }
}
@media (max-width: 500.98px) {
  .get-start-header-main .get-style-header-container .get-style-header-content .get-style-img {
    border-radius: 16px;
  }
}
.get-start-header-main .get-style-header-container .get-style-header-content .get-style-img {
  overflow: hidden;
}
.get-start-header-main .get-style-header-container .get-style-header-content .get-style-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.get-start-header-main .get-style-header-container .get-style-text-content {
  flex-shrink: 1;
  width: 53.333%;
  margin-top: -150px;
  margin-left: -6.6667%;
  padding: 40px 60px;
  border-radius: 30px;
  background-color: var(--white-color);
  position: relative;
  z-index: 2;
  max-width: 40%;
}
@media (max-width: 1320.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    padding: 40px;
  }
}
@media (max-width: 1000.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    background: transparent;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 24px 0px;
  }
}
@media (max-width: 712.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    padding: 40px 0px 16px;
  }
}
@media (max-width: 500.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    padding: 16px 0px;
  }
}
@media (max-width: 480.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    max-width: 100%;
  }
}
@media (max-width: 460.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    padding: 24px 0px 16px;
  }
}
@media (max-width: 384.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    padding: 24px 0px 16px;
  }
}
@media (max-width: 330.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content {
    padding: 16px 0px;
  }
}
.get-start-header-main .get-style-header-container .get-style-text-content::before {
  content: "";
  display: block;
  position: absolute;
  background-color: #fff;
  width: 35px;
  height: 30px;
  top: 150px;
  right: 99%;
  clip-path: polygon(0 100%, 100% 0, 100% calc(100% - 1px));
}
@media (max-width: 1000.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content::before {
    display: none;
  }
}
.get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle-text {
  font-size: 21px;
  display: block;
  line-height: 36px;
  margin-bottom: 36px;
  color: var(--text-color);
}
@media (max-width: 1320.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle-text {
    font-size: 16px;
    line-height: 24px;
  }
}
@media (max-width: 460.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle-text {
    margin-bottom: 24px;
  }
}
.get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle-text .style-b {
  font-weight: 700;
}
.get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle {
  font-size: 28px;
  color: var(--text-color);
  position: relative;
}
@media (max-width: 384.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle {
    font-size: 24px;
  }
}
.get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle::after {
  position: absolute;
  content: "";
  background: var(--primary-color);
  bottom: -2px;
  left: 0;
  height: 4px;
  width: 100%;
}
@media (max-width: 1000.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content .style-subtitle::after {
    bottom: -4px;
  }
}
.get-start-header-main .get-style-header-container .get-style-text-content .style-title {
  margin-bottom: 36px;
  color: var(--text-color);
}
@media (max-width: 1000.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content .style-title {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 60px;
  }
  .get-start-header-main .get-style-header-container .get-style-text-content .style-title span {
    margin-top: 10px;
  }
}
@media (max-width: 460.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content .style-title {
    margin-bottom: 42px;
  }
}
@media (max-width: 390.98px) {
  .get-start-header-main .get-style-header-container .get-style-text-content .style-title {
    margin-bottom: 32px;
  }
}

/*主內容背景圖*/
.style-container {
  background: url(../img/get-bg.svg);
  width: 100%;
  height: auto;
  background-position: top center;
  background-repeat: repeat-y;
  background-size: cover;
  position: relative;
}

/*一般款--背景設定*/
.generally-container {
  position: relative;
  padding: 98px 0px;
}
@media (max-width: 1000.98px) {
  .generally-container {
    padding: 80px 0px 0px;
    margin-bottom: 80px;
  }
}
.generally-container::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  background: url(../img/generally-bg.svg);
  width: 100%;
  background-position: top center;
  background-size: cover;
  z-index: 2;
}
.generally-container::before {
  content: "";
  display: block;
  width: 77.5vw;
  height: calc(100% - 180px);
  position: absolute;
  top: 97px;
  right: 0;
  z-index: 3;
  background-color: var(--white-color);
  border-top-right-radius: 0px;
  border-bottom-right-radius: 30px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 0px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1775.98px) {
  .generally-container::before {
    width: 80vw;
  }
}
@media (max-width: 1638.98px) {
  .generally-container::before {
    width: 81.2vw;
  }
}
@media (max-width: 1500.98px) {
  .generally-container::before {
    width: 80vw;
  }
}
@media (max-width: 1422.98px) {
  .generally-container::before {
    width: 86.2vw;
  }
}
@media (max-width: 1320.98px) {
  .generally-container::before {
    height: calc(100% - 200px);
    width: 82.2vw;
  }
}
@media (max-width: 1290.98px) {
  .generally-container::before {
    width: 86.8vw;
  }
}
@media (max-width: 1200.98px) {
  .generally-container::before {
    width: 86.5vw;
  }
}
@media (max-width: 1100.98px) {
  .generally-container::before {
    width: 86vw;
  }
}
@media (max-width: 1024.98px) {
  .generally-container::before {
    width: 85vw;
  }
}
@media (max-width: 1000.98px) {
  .generally-container::before {
    display: none;
  }
}

/*一般款*/
.gerneally-main {
  position: relative;
  z-index: 4;
  max-width: 63vw;
  margin: 0 auto;
}
@media (max-width: 1880.98px) {
  .gerneally-main {
    max-width: 62.5vw;
  }
}
@media (max-width: 1775.98px) {
  .gerneally-main {
    max-width: 68vw;
  }
}
@media (max-width: 1638.98px) {
  .gerneally-main {
    max-width: 70.2vw;
  }
}
@media (max-width: 1422.98px) {
  .gerneally-main {
    max-width: 81.8vw;
  }
}
@media (max-width: 1320.98px) {
  .gerneally-main {
    max-width: 75vw;
  }
}
@media (max-width: 1290.98px) {
  .gerneally-main {
    max-width: 84vw;
  }
}
@media (max-width: 1000.98px) {
  .gerneally-main {
    flex-wrap: wrap;
    margin: 60px auto 0px;
    padding: 60px 0px 0px;
    max-width: 90%;
    border-radius: 30px;
    background: var(--white-color);
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15); /* 下 */
  }
}
@media (max-width: 768.98px) {
  .gerneally-main {
    margin: 0px auto 0px;
    padding: 60px 0px;
  }
}

/*內容左右寬度*/
.generally-table-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 64px;
}
@media (max-width: 1000.98px) {
  .generally-table-wrap {
    flex-direction: column;
    padding-top: 0px;
  }
}
.generally-table-wrap .generally-l-content {
  width: 48%;
}
@media (max-width: 1000.98px) {
  .generally-table-wrap .generally-l-content {
    width: 42%;
  }
}
@media (max-width: 768.98px) {
  .generally-table-wrap .generally-l-content {
    width: 100%;
    margin-bottom: 36px;
  }
}
.generally-table-wrap .generall-r-content {
  width: 48%;
}
@media (max-width: 1000.98px) {
  .generally-table-wrap .generall-r-content {
    width: 55%;
  }
}
@media (max-width: 768.98px) {
  .generally-table-wrap .generall-r-content {
    width: 80%;
  }
}
@media (max-width: 360.98px) {
  .generally-table-wrap .generall-r-content {
    width: 90%;
  }
}

/*一般款 左側按鈕區塊*/
.generally-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  margin-top: -64px;
}
@media (max-width: 1000.98px) {
  .generally-sidebar {
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 0px;
  }
}
@media (max-width: 768.98px) {
  .generally-sidebar {
    justify-content: center;
  }
}
.generally-sidebar .generally-title-wrap {
  background: var(--white-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  text-align: center;
  padding: 24px 0px;
  border-radius: 30px 0 0 0px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 8px;
}
@media (max-width: 1000.98px) {
  .generally-sidebar .generally-title-wrap {
    width: 100%;
    box-shadow: none;
    padding: 0px;
    margin-bottom: 60px;
  }
}
@media (max-width: 330.98px) {
  .generally-sidebar .generally-title-wrap {
    margin-bottom: 32px;
  }
}
.generally-sidebar .generally-title-wrap .generally-title {
  writing-mode: vertical-rl;
  background: var(--white-color);
  display: block;
  font-size: 36px;
  letter-spacing: 8px;
  color: var(--secondary-color);
}
@media (max-width: 1000.98px) {
  .generally-sidebar .generally-title-wrap .generally-title {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
  }
}

/*一般款 左側按鈕設定*/
.generally-tab-btn {
  padding: 0.75rem 0.75rem;
  font-size: 21px;
  font-weight: 600;
  border: none;
  background: var(--white-color);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.01), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.01);
}
.generally-tab-btn:last-child {
  border-bottom-left-radius: 20px;
}
@media (max-width: 1000.98px) {
  .generally-tab-btn:last-child {
    border-bottom-left-radius: 0px;
  }
}
@media (max-width: 1000.98px) {
  .generally-tab-btn {
    width: 25%;
    flex-direction: row;
    justify-content: center;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.15), 0px 0 0px rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.15);
  }
}
@media (max-width: 1000.98px) {
  .generally-tab-btn {
    flex-direction: column;
  }
}
@media (max-width: 768.98px) {
  .generally-tab-btn {
    font-size: 18px;
  }
}
@media (max-width: 612.98px) {
  .generally-tab-btn {
    width: 50%;
    box-shadow: none;
    border: 1px solid var(--grey-color-100);
    border-radius: 0px;
    margin-bottom: 0px;
  }
}
@media (max-width: 330.98px) {
  .generally-tab-btn {
    font-size: 16px;
  }
}
.generally-tab-btn span {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
}
@media (max-width: 1000.98px) {
  .generally-tab-btn span {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
  }
}
.generally-tab-btn:hover {
  background: var(--hover-btn-color);
  color: var(--white-color);
}
.generally-tab-btn.active {
  background: var(--secondary-color);
  color: var(--white-color);
}

/*內容左區塊設定*/
.generally-l-content .generally-figure {
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768.98px) {
  .generally-l-content .generally-figure {
    margin-bottom: 36px;
  }
}
@media (max-width: 460.98px) {
  .generally-l-content .generally-figure {
    margin-bottom: 16px;
  }
}
.generally-l-content .generally-figure .generally-figure-caption {
  font-size: 60px;
  color: var(--secondary-color);
  font-family: "Noto Sans TC", sans-serif;
  position: relative;
  text-align: center;
  margin-bottom: 36px;
}
@media (max-width: 1200.98px) {
  .generally-l-content .generally-figure .generally-figure-caption {
    font-size: 52px;
  }
}
@media (max-width: 1200.98px) {
  .generally-l-content .generally-figure .generally-figure-caption {
    font-size: 48px;
  }
}
@media (max-width: 900.98px) {
  .generally-l-content .generally-figure .generally-figure-caption {
    font-size: 40px;
  }
}
@media (max-width: 500.98px) {
  .generally-l-content .generally-figure .generally-figure-caption {
    font-size: 48px;
  }
}
@media (max-width: 460.98px) {
  .generally-l-content .generally-figure .generally-figure-caption {
    font-size: 40px;
  }
}
@media (max-width: 300.98px) {
  .generally-l-content .generally-figure .generally-figure-caption {
    font-size: 36px;
  }
}
.generally-l-content .generally-figure .generally-figure-caption::after {
  position: absolute;
  content: "";
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 35%);
  background: url(../img/generally-title.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  width: 300px;
  height: 48px;
  aspect-ratio: 300/48;
  z-index: -1;
}
@media (max-width: 900.98px) {
  .generally-l-content .generally-figure .generally-figure-caption::after {
    width: 240px;
    height: auto;
  }
}
@media (max-width: 330.98px) {
  .generally-l-content .generally-figure .generally-figure-caption::after {
    width: 213px;
    height: auto;
  }
}
.generally-l-content .generally-figure .generally-figure-img {
  margin: 0 auto;
}
@media (max-width: 440.98px) {
  .generally-l-content .generally-figure .generally-figure-img {
    display: none;
  }
}
.generally-l-content .generally-figure .generally-figure-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.generally-l-content .generally-figure .generally-mob-figure-img {
  display: none;
}
@media (max-width: 440.98px) {
  .generally-l-content .generally-figure .generally-mob-figure-img {
    display: block;
  }
}
.generally-l-content .generally-figure .generally-mob-figure-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.generally-table-main:nth-child(1) .generally-figure-img {
  width: 308px;
  height: 72px;
  aspect-ratio: 308/72;
}
@media (max-width: 1730.98px) {
  .generally-table-main:nth-child(1) .generally-figure-img {
    width: 257px;
    height: auto;
  }
}
@media (max-width: 900.98px) {
  .generally-table-main:nth-child(1) .generally-figure-img {
    width: 180px;
    height: auto;
  }
}
@media (max-width: 768.98px) {
  .generally-table-main:nth-child(1) .generally-figure-img {
    width: 308px;
    height: auto;
  }
}
@media (max-width: 500.98px) {
  .generally-table-main:nth-child(1) .generally-figure-img {
    width: 254px;
    height: auto;
  }
}
.generally-table-main:nth-child(1) .generally-mob-figure-img {
  width: 309px;
  height: 114px;
  aspect-ratio: 309/114;
}
@media (max-width: 330.98px) {
  .generally-table-main:nth-child(1) .generally-mob-figure-img {
    width: 222px;
    height: auto;
  }
}
.generally-table-main:nth-child(2) .generally-figure-img {
  width: 370px;
  height: 72px;
  aspect-ratio: 370/72;
}
@media (max-width: 1730.98px) {
  .generally-table-main:nth-child(2) .generally-figure-img {
    width: 300px;
    height: auto;
  }
}
@media (max-width: 900.98px) {
  .generally-table-main:nth-child(2) .generally-figure-img {
    width: 216px;
    height: auto;
  }
}
@media (max-width: 768.98px) {
  .generally-table-main:nth-child(2) .generally-figure-img {
    width: 340px;
    height: auto;
  }
}
@media (max-width: 500.98px) {
  .generally-table-main:nth-child(2) .generally-figure-img {
    width: 300px;
    height: auto;
  }
}
.generally-table-main:nth-child(2) .generally-mob-figure-img {
  width: 233px;
  height: 114px;
  aspect-ratio: 233/114;
}
@media (max-width: 330.98px) {
  .generally-table-main:nth-child(2) .generally-mob-figure-img {
    width: 167px;
    height: auto;
  }
}
.generally-table-main:nth-child(3) .generally-figure-img {
  width: 431px;
  height: 72px;
  aspect-ratio: 431/72;
}
@media (max-width: 1730.98px) {
  .generally-table-main:nth-child(3) .generally-figure-img {
    width: 343px;
    height: auto;
  }
}
@media (max-width: 900.98px) {
  .generally-table-main:nth-child(3) .generally-figure-img {
    width: 251px;
    height: auto;
  }
}
@media (max-width: 768.98px) {
  .generally-table-main:nth-child(3) .generally-figure-img {
    width: 431px;
    height: auto;
  }
}
@media (max-width: 580.98px) {
  .generally-table-main:nth-child(3) .generally-figure-img {
    width: 448px;
    height: auto;
  }
}
@media (max-width: 500.98px) {
  .generally-table-main:nth-child(3) .generally-figure-img {
    width: 350px;
    height: auto;
  }
}
@media (max-width: 460.98px) {
  .generally-table-main:nth-child(3) .generally-figure-img {
    width: 360px;
    height: auto;
  }
}
.generally-table-main:nth-child(3) .generally-mob-figure-img {
  width: 230px;
  height: 86px;
}
@media (max-width: 440.98px) {
  .generally-table-main:nth-child(3) .generally-mob-figure-img {
    width: 260px;
    height: auto;
  }
}
@media (max-width: 330.98px) {
  .generally-table-main:nth-child(3) .generally-mob-figure-img {
    width: 220px;
    height: auto;
  }
}
.generally-table-main:nth-child(4) .generally-figure-img {
  width: 431px;
  height: 72px;
  aspect-ratio: 431/72;
}
@media (max-width: 1730.98px) {
  .generally-table-main:nth-child(4) .generally-figure-img {
    width: 343px;
    height: auto;
  }
}
@media (max-width: 900.98px) {
  .generally-table-main:nth-child(4) .generally-figure-img {
    width: 280px;
    height: auto;
  }
}
@media (max-width: 768.98px) {
  .generally-table-main:nth-child(4) .generally-figure-img {
    width: 480px;
    height: auto;
  }
}
@media (max-width: 580.98px) {
  .generally-table-main:nth-child(4) .generally-figure-img {
    width: 448px;
    height: auto;
  }
}
@media (max-width: 500.98px) {
  .generally-table-main:nth-child(4) .generally-figure-img {
    width: 380px;
    height: auto;
  }
}
@media (max-width: 460.98px) {
  .generally-table-main:nth-child(4) .generally-figure-img {
    width: 360px;
    height: auto;
  }
}
.generally-table-main:nth-child(4) .generally-mob-figure-img {
  width: 230px;
  height: 86px;
}
@media (max-width: 440.98px) {
  .generally-table-main:nth-child(4) .generally-mob-figure-img {
    width: 260px;
    height: auto;
  }
}
@media (max-width: 330.98px) {
  .generally-table-main:nth-child(4) .generally-mob-figure-img {
    width: 220px;
    height: auto;
  }
}

/*一般款 特色清單*/
.generally-list {
  margin-left: 48px;
  margin-bottom: 80px;
}
@media (max-width: 1000.98px) {
  .generally-list {
    margin-left: 0px;
  }
}
@media (max-width: 768.98px) {
  .generally-list {
    margin-bottom: 36px;
  }
}
@media (max-width: 330.98px) {
  .generally-list {
    margin-left: 12px;
  }
}
.generally-list .generally-item {
  list-style: square;
  color: var(--text-color-100);
  font-size: 21px;
  line-height: 32px;
}
@media (max-width: 1200.98px) {
  .generally-list .generally-item {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 768.98px) {
  .generally-list .generally-item {
    font-size: 24px;
    line-height: 36px;
  }
}
@media (max-width: 500.98px) {
  .generally-list .generally-item {
    font-size: 21px;
    line-height: 32px;
  }
}
@media (max-width: 460.98px) {
  .generally-list .generally-item {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 380.98px) {
  .generally-list .generally-item {
    font-size: 16px;
    line-height: 24px;
  }
}
.generally-list .generally-item::marker {
  color: var(--text-color-100);
}

/*一般款 特性度*/
.generally-state-list {
  margin-left: 28px;
}
@media (max-width: 1000.98px) {
  .generally-state-list {
    margin-left: 0px;
  }
}
@media (max-width: 330.98px) {
  .generally-state-list {
    margin-left: -20px;
  }
}
.generally-state-list .generally-state-item {
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  max-width: 447px;
}
.generally-state-list .generally-state-item i {
  font-size: 24px;
  line-height: 32px;
  color: var(--secondary-color);
  margin-right: 8px;
}
@media (max-width: 1500.98px) {
  .generally-state-list .generally-state-item i {
    font-size: 21px;
    line-height: 28px;
  }
}
@media (max-width: 1200.98px) {
  .generally-state-list .generally-state-item i {
    font-size: 18px;
  }
}
@media (max-width: 1000.98px) {
  .generally-state-list .generally-state-item i {
    font-size: 16px;
    flex: 0 0 48px;
  }
}
@media (max-width: 768.98px) {
  .generally-state-list .generally-state-item i {
    font-size: 24px;
    flex: 0 0 80px;
  }
}
@media (max-width: 500.98px) {
  .generally-state-list .generally-state-item i {
    font-size: 21px;
    flex: 0 0 64px;
  }
}
@media (max-width: 330.98px) {
  .generally-state-list .generally-state-item i {
    font-size: 18px;
    flex: 0 0 54px;
    line-height: 18px;
  }
}
.generally-state-list .generally-state-item .score {
  position: relative;
  display: block;
  border: 1px solid var(--primary-color);
  width: 60px;
  height: 30px;
  margin-right: 4px;
}
@media (max-width: 1450.98px) {
  .generally-state-list .generally-state-item .score {
    width: 50px;
    height: 21px;
  }
}
@media (max-width: 900.98px) {
  .generally-state-list .generally-state-item .score {
    width: 38px;
    height: 16px;
  }
}
@media (max-width: 738.98px) {
  .generally-state-list .generally-state-item .score {
    width: 46px;
    height: 18px;
  }
}
@media (max-width: 400.98px) {
  .generally-state-list .generally-state-item .score {
    width: 35px;
  }
}
@media (max-width: 330.98px) {
  .generally-state-list .generally-state-item .score {
    width: 28px;
    height: 14px;
  }
}
@media (max-width: 300.98px) {
  .generally-state-list .generally-state-item .score {
    width: 25px;
  }
}
.generally-state-list .generally-state-item .score::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--primary-color);
}
.generally-state-list .generally-state-item .half {
  position: relative;
  width: 60px;
  height: 30px;
}
@media (max-width: 1500.98px) {
  .generally-state-list .generally-state-item .half {
    width: 50px;
    height: 21px;
  }
}
@media (max-width: 900.98px) {
  .generally-state-list .generally-state-item .half {
    width: 38px;
    height: 16px;
  }
}
@media (max-width: 738.98px) {
  .generally-state-list .generally-state-item .half {
    width: 46px;
    height: 18px;
  }
}
@media (max-width: 400.98px) {
  .generally-state-list .generally-state-item .half {
    width: 35px;
  }
}
@media (max-width: 330.98px) {
  .generally-state-list .generally-state-item .half {
    width: 28px;
    height: 14px;
  }
}
.generally-state-list .generally-state-item .half::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--primary-color);
}
.generally-state-list .generally-state-item .note {
  position: relative;
}
.generally-state-list .generally-state-item .note::before {
  position: absolute;
  content: "";
  background: url(../img/good.svg);
  width: 34px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  left: 67px;
  top: 0;
}
@media (max-width: 1422.98px) {
  .generally-state-list .generally-state-item .note::before {
    width: 24px;
    height: 22px;
    left: 57px;
  }
}
@media (max-width: 900.98px) {
  .generally-state-list .generally-state-item .note::before {
    left: 45px;
    top: -4px;
  }
}
@media (max-width: 768.98px) {
  .generally-state-list .generally-state-item .note::before {
    width: 36px;
    height: 28px;
    top: -6px;
  }
}
@media (max-width: 500.98px) {
  .generally-state-list .generally-state-item .note::before {
    left: 50px;
  }
}
@media (max-width: 500.98px) {
  .generally-state-list .generally-state-item .note::before {
    left: 36px;
  }
}
@media (max-width: 330.98px) {
  .generally-state-list .generally-state-item .note::before {
    width: 23px;
    height: 23px;
  }
}
.generally-state-list .generally-item-text {
  font-size: 18px;
  color: var(--secondary-color);
  margin-left: 76px;
}
@media (max-width: 1200.98px) {
  .generally-state-list .generally-item-text {
    margin-left: 62px;
    font-size: 16px;
  }
}
@media (max-width: 768.98px) {
  .generally-state-list .generally-item-text {
    margin-left: 87px;
  }
}
@media (max-width: 500.98px) {
  .generally-state-list .generally-item-text {
    margin-left: 72px;
  }
}
@media (max-width: 500.98px) {
  .generally-state-list .generally-item-text {
    margin-left: 60px;
  }
}

.generall-r-content .style-img {
  width: 420px;
  height: 350px;
  aspect-ratio: 420/350;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 36px;
}
@media (max-width: 1200.98px) {
  .generall-r-content .style-img {
    width: 360px;
    height: auto;
  }
}
@media (max-width: 900.98px) {
  .generall-r-content .style-img {
    width: 324px;
  }
}
@media (max-width: 768.98px) {
  .generall-r-content .style-img {
    border-radius: 16px;
    width: 80%;
  }
}
@media (max-width: 712.98px) {
  .generall-r-content .style-img {
    width: 100%;
  }
}
.generall-r-content .style-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.generall-r-content .style-ex {
  width: 211px;
  height: 48px;
  aspect-ratio: 211/48;
  margin-bottom: 24px;
  margin-left: 8px;
}
.generall-r-content .style-ex img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.generall-r-content .figure-generall {
  display: flex;
  width: 80%;
  justify-content: flex-end;
  font-size: 18px;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--secondary-color);
}
.generall-r-content .generall-l {
  width: 29px;
  height: 22px;
}
.generall-r-content .generall-l img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.generall-r-content .generall-r {
  width: 20px;
  height: 20px;
}
.generall-r-content .generall-r img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.generall-r-content .generally-caption {
  font-size: 18px;
  line-height: 32px;
  color: var(--text-color);
  font-family: "Noto Sans TC", sans-serif;
  width: 80%;
  margin-bottom: 24px;
}
@media (max-width: 1200.98px) {
  .generall-r-content .generally-caption {
    font-size: 16px;
    line-height: 28px;
  }
}
@media (max-width: 900.98px) {
  .generall-r-content .generally-caption {
    width: 78%;
  }
}
@media (max-width: 768.98px) {
  .generall-r-content .generally-caption {
    width: 100%;
    font-size: 21px;
    line-height: 36px;
  }
}
@media (max-width: 500.98px) {
  .generall-r-content .generally-caption {
    font-size: 18px;
    line-height: 28px;
  }
}

.generally-table-content {
  position: relative;
  width: 100%;
}
@media (max-width: 900.98px) {
  .generally-table-content {
    width: 95%;
    margin: 0 auto;
  }
}
@media (max-width: 768.98px) {
  .generally-table-content {
    padding: 64px 0px 0px;
    width: 100%;
  }
}
@media (max-width: 460.98px) {
  .generally-table-content {
    padding: 44px 0px 0px;
  }
}
.generally-table-content .generally-table-main {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  min-height: 810px;
}
@media (max-width: 1200.98px) {
  .generally-table-content .generally-table-main {
    min-height: 740px;
  }
}
@media (max-width: 1000.98px) {
  .generally-table-content .generally-table-main {
    min-height: 750px;
  }
}
.generally-table-content .table-active {
  display: flex;
  opacity: 1;
  justify-content: flex-end;
  align-items: center;
}
@media (max-width: 900.98px) {
  .generally-table-content .table-active {
    justify-content: space-around;
  }
}
@media (max-width: 768.98px) {
  .generally-table-content .table-active {
    flex-wrap: wrap;
  }
}
.generally-table-content .fade-out {
  opacity: 0;
}

/*統一等高設定*/
.generally-l-content,
.generall-r-content {
  display: flex;
  flex-direction: column;
}
@media (max-width: 1000.98px) {
  .generally-l-content,
  .generall-r-content {
    align-items: center;
  }
}

/*白金款-背景*/
.platinum-container {
  position: relative;
  padding: 98px 0px;
}
.platinum-container::after {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  background: url(../img/platinum-bg.svg);
  width: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  z-index: 0;
}
@media (max-width: 1000.98px) {
  .platinum-container {
    padding: 0px 0px 80px;
  }
}
.platinum-container::before {
  content: "";
  display: block;
  width: 77vw;
  height: calc(100% - 140px);
  position: absolute;
  top: 97px;
  left: 0;
  z-index: 1;
  background-color: var(--white-color);
  border-top-right-radius: 0px;
  border-bottom-right-radius: 30px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 0px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15);
}
@media (max-width: 1880.98px) {
  .platinum-container::before {
    width: 76vw;
  }
}
@media (max-width: 1775.98px) {
  .platinum-container::before {
    width: 76.5vw;
  }
}
@media (max-width: 1638.98px) {
  .platinum-container::before {
    width: 77.5vw;
  }
}
@media (max-width: 1422.98px) {
  .platinum-container::before {
    width: 83.5vw;
  }
}
@media (max-width: 1320.98px) {
  .platinum-container::before {
    width: 82.2vw;
  }
}
@media (max-width: 1290.98px) {
  .platinum-container::before {
    width: 84.5vw;
    height: calc(100% - 190px);
  }
}
@media (max-width: 1000.98px) {
  .platinum-container::before {
    display: none;
  }
}

/*白金款*/
.platinum-main {
  position: relative;
  z-index: 4;
  max-width: 63vw;
  margin: 0 auto;
}
@media (max-width: 1880.98px) {
  .platinum-main {
    max-width: 62.5vw;
  }
}
@media (max-width: 1775.98px) {
  .platinum-main {
    max-width: 65vw;
  }
}
@media (max-width: 1638.98px) {
  .platinum-main {
    max-width: 67vw;
  }
}
@media (max-width: 1422.98px) {
  .platinum-main {
    max-width: 81.8vw;
  }
}
@media (max-width: 1320.98px) {
  .platinum-main {
    max-width: 79vw;
  }
}
@media (max-width: 1290.98px) {
  .platinum-main {
    max-width: 84vw;
  }
}
@media (max-width: 1000.98px) {
  .platinum-main {
    flex-wrap: wrap;
    margin: 60px auto 0px;
    padding: 0px;
    max-width: 90%;
    border-radius: 30px;
    background: var(--white-color);
    box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15); /* 下 */
  }
}
@media (max-width: 768.98px) {
  .platinum-main {
    margin: 0px auto 0px;
  }
}

/*白金內容區塊基本設定*/
.platinum-table-wrap {
  display: flex;
  align-items: flex-start;
  padding-top: 72px;
  position: relative;
}
@media (max-width: 1000.98px) {
  .platinum-table-wrap {
    flex-wrap: wrap;
    padding-top: 0px;
  }
}
@media (max-width: 768.98px) {
  .platinum-table-wrap {
    padding: 0px 0px 60px;
  }
}
.platinum-table-wrap .platinum-l-content {
  width: 48%;
}
@media (max-width: 1000.98px) {
  .platinum-table-wrap .platinum-l-content {
    width: 42%;
  }
}
@media (max-width: 768.98px) {
  .platinum-table-wrap .platinum-l-content {
    width: 100%;
    align-items: center;
    margin: 0 0 36px;
  }
}
.platinum-table-wrap .platinum-r-content {
  width: 48%;
}
@media (max-width: 1000.98px) {
  .platinum-table-wrap .platinum-r-content {
    width: 55%;
    align-items: center;
  }
}
@media (max-width: 768.98px) {
  .platinum-table-wrap .platinum-r-content {
    width: 80%;
  }
}
@media (max-width: 360.98px) {
  .platinum-table-wrap .platinum-r-content {
    width: 90%;
  }
}

/*操作TABLE*/
.platinum-table-content {
  position: relative;
  width: 94%;
}
@media (max-width: 1880.98px) {
  .platinum-table-content {
    width: 92%;
  }
}
@media (max-width: 843.98px) {
  .platinum-table-content {
    width: 95%;
  }
}
@media (max-width: 1000.98px) {
  .platinum-table-content {
    order: 1;
    margin: 0 auto;
    justify-content: space-between;
  }
}
.platinum-table-content .platinum-table-main {
  display: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  min-height: 700px;
}
@media (max-width: 1200.98px) {
  .platinum-table-content .platinum-table-main {
    min-height: 630px;
  }
}
@media (max-width: 768.98px) {
  .platinum-table-content .platinum-table-main {
    min-height: 750px;
  }
}
@media (max-width: 500.98px) {
  .platinum-table-content .platinum-table-main {
    min-height: 550px;
  }
}
@media (max-width: 460.98px) {
  .platinum-table-content .platinum-table-main {
    min-height: 500px;
  }
}
.platinum-table-content .platinum-active {
  display: flex;
  opacity: 1;
  justify-content: flex-start;
}
@media (max-width: 1000.98px) {
  .platinum-table-content .platinum-active {
    justify-content: flex-end;
    align-items: center;
  }
}
@media (max-width: 768.98px) {
  .platinum-table-content .platinum-active {
    flex-wrap: wrap;
    padding-top: 64px;
    justify-content: center;
  }
}
.platinum-table-content .platinum-out {
  opacity: 0;
}

.platinum-table-main:nth-child(1) .platinum-figure-img {
  width: 308px;
  height: 71px;
  aspect-ratio: 308/71;
}
@media (max-width: 1730.98px) {
  .platinum-table-main:nth-child(1) .platinum-figure-img {
    width: 308px;
    height: auto;
  }
}
.platinum-table-main:nth-child(1) .platinum-figure-mob-img {
  width: 233px;
  height: 86px;
  aspect-ratio: 233/86;
}
@media (max-width: 768.98px) {
  .platinum-table-main:nth-child(1) .platinum-figure-mob-img {
    width: 197px;
    height: auto;
  }
}
@media (max-width: 580.98px) {
  .platinum-table-main:nth-child(1) .platinum-figure-mob-img {
    width: 243px;
    height: auto;
  }
}
@media (max-width: 400.98px) {
  .platinum-table-main:nth-child(1) .platinum-figure-mob-img {
    width: 233px;
    height: auto;
  }
}
@media (max-width: 330.98px) {
  .platinum-table-main:nth-child(1) .platinum-figure-mob-img {
    width: 210px;
    height: auto;
  }
}
.platinum-table-main:nth-child(2) .platinum-figure-img {
  width: 459px;
  height: 60px;
  aspect-ratio: 344/45;
}
@media (max-width: 1730.98px) {
  .platinum-table-main:nth-child(2) .platinum-figure-img {
    width: 344px;
    height: auto;
  }
}
@media (max-width: 768.98px) {
  .platinum-table-main:nth-child(2) .platinum-figure-img {
    width: 484px;
    height: auto;
  }
}
.platinum-table-main:nth-child(2) .platinum-figure-mob-img {
  width: 266px;
  height: 86px;
  aspect-ratio: 266/86;
}
@media (max-width: 768.98px) {
  .platinum-table-main:nth-child(2) .platinum-figure-mob-img {
    width: 198px;
    height: auto;
  }
}
@media (max-width: 580.98px) {
  .platinum-table-main:nth-child(2) .platinum-figure-mob-img {
    width: 238px;
    height: auto;
  }
}
@media (max-width: 400.98px) {
  .platinum-table-main:nth-child(2) .platinum-figure-mob-img {
    width: 246px;
    height: auto;
  }
}
@media (max-width: 330.98px) {
  .platinum-table-main:nth-child(2) .platinum-figure-mob-img {
    width: 220px;
    height: auto;
  }
}
.platinum-table-main:nth-child(3) .platinum-figure-img {
  width: 333px;
  height: 115px;
  aspect-ratio: 333/115;
}
@media (max-width: 1730.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-img {
    width: 290px;
    height: auto;
  }
}
@media (max-width: 834.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-img {
    width: 232px;
    height: auto;
  }
}
@media (max-width: 768.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-img {
    width: 377px;
    height: auto;
  }
}
@media (max-width: 500.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-img {
    width: 400px;
    height: auto;
  }
}
@media (max-width: 460.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-img {
    width: 360px;
    height: auto;
  }
}
.platinum-table-main:nth-child(3) .platinum-figure-mob-img {
  width: 290px;
  height: 100px;
}
@media (max-width: 580.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-mob-img {
    width: 258px;
    height: auto;
  }
}
@media (max-width: 440.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-mob-img {
    width: 260px;
    height: auto;
  }
}
@media (max-width: 400.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-mob-img {
    width: 280px;
    height: auto;
  }
}
@media (max-width: 330.98px) {
  .platinum-table-main:nth-child(3) .platinum-figure-mob-img {
    width: 220px;
    height: auto;
  }
}

/*白金-整合等高*/
.platinum-l-content,
.platinum-r-content {
  display: flex;
  flex-direction: column;
}

/*白金-內容左側區塊*/
@media (max-width: 100.98px) {
  .platinum-l-content {
    align-items: center;
  }
}
.platinum-l-content {
  /*白金-左上區塊設定*/
}
.platinum-l-content .platinum-figure {
  margin-bottom: 48px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 768.98px) {
  .platinum-l-content .platinum-figure {
    margin-bottom: 36px;
  }
}
@media (max-width: 460.98px) {
  .platinum-l-content .platinum-figure {
    margin-bottom: 16px;
  }
}
.platinum-l-content .platinum-figure {
  /*標題*/
}
.platinum-l-content .platinum-figure .platinum-figure-caption {
  font-size: 60px;
  color: var(--secondary-color);
  font-family: "Noto Sans TC", sans-serif;
  position: relative;
  text-align: center;
  margin-bottom: 36px;
}
@media (max-width: 1200.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption {
    font-size: 52px;
  }
}
@media (max-width: 1200.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption {
    font-size: 48px;
  }
}
@media (max-width: 900.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption {
    font-size: 40px;
  }
}
@media (max-width: 500.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption {
    font-size: 48px;
  }
}
@media (max-width: 460.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption {
    font-size: 40px;
  }
}
@media (max-width: 300.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption {
    font-size: 36px;
  }
}
.platinum-l-content .platinum-figure .platinum-figure-caption::after {
  position: absolute;
  content: "";
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 35%);
  background: url(../img/platinum-title.svg);
  background-repeat: no-repeat;
  background-position: left top;
  background-size: contain;
  width: 300px;
  height: 48px;
  aspect-ratio: 300/48;
  z-index: -1;
}
@media (max-width: 900.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption::after {
    width: 276px;
    height: auto;
  }
}
@media (max-width: 300.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-caption::after {
    width: 230px;
  }
}
.platinum-l-content .platinum-figure {
  /*副標題*/
}
.platinum-l-content .platinum-figure .platinum-figure-img {
  margin: 0 auto;
}
@media (max-width: 1000.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-img {
    display: none;
  }
}
@media (max-width: 768.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-img {
    display: block;
  }
}
@media (max-width: 580.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-img {
    display: none;
  }
}
.platinum-l-content .platinum-figure .platinum-figure-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.platinum-l-content .platinum-figure .platinum-figure-mob-img {
  display: none;
}
@media (max-width: 1000.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-mob-img {
    display: block;
    margin: 0 auto;
  }
}
@media (max-width: 768.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-mob-img {
    display: none;
  }
}
@media (max-width: 580.98px) {
  .platinum-l-content .platinum-figure .platinum-figure-mob-img {
    display: block;
  }
}
.platinum-l-content .platinum-figure .platinum-figure-mob-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/*白金-特色清單*/
.platinum-list {
  margin-left: 48px;
  margin-bottom: 80px;
}
@media (max-width: 1000.98px) {
  .platinum-list {
    margin-left: 0px;
  }
}
@media (max-width: 768.98px) {
  .platinum-list {
    margin-bottom: 36px;
  }
}
@media (max-width: 330.98px) {
  .platinum-list {
    margin-left: 24px;
  }
}
.platinum-list .platinum-item {
  list-style: square;
  color: var(--text-color-100);
  font-size: 21px;
  line-height: 32px;
}
@media (max-width: 1200.98px) {
  .platinum-list .platinum-item {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 768.98px) {
  .platinum-list .platinum-item {
    font-size: 24px;
    line-height: 36px;
  }
}
@media (max-width: 500.98px) {
  .platinum-list .platinum-item {
    font-size: 21px;
    line-height: 32px;
  }
}
@media (max-width: 460.98px) {
  .platinum-list .platinum-item {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 380.98px) {
  .platinum-list .platinum-item {
    font-size: 16px;
    line-height: 24px;
  }
}
.platinum-list .platinum-item::marker {
  color: var(--text-color-100);
}

/*白金款 特性度*/
.platinum-state-list {
  margin-left: 28px;
}
@media (max-width: 1000.98px) {
  .platinum-state-list {
    margin-left: 0px;
  }
}
@media (max-width: 330.98px) {
  .platinum-state-list {
    margin-left: -20px;
  }
}
.platinum-state-list .platinum-state-item {
  margin-bottom: 8px;
  display: flex;
  max-width: 447px;
}
.platinum-state-list .platinum-state-item i {
  font-size: 24px;
  line-height: 32px;
  color: var(--secondary-color);
  margin-right: 8px;
}
@media (max-width: 1500.98px) {
  .platinum-state-list .platinum-state-item i {
    font-size: 21px;
    line-height: 28px;
  }
}
@media (max-width: 1200.98px) {
  .platinum-state-list .platinum-state-item i {
    font-size: 18px;
  }
}
@media (max-width: 1000.98px) {
  .platinum-state-list .platinum-state-item i {
    font-size: 16px;
    flex: 0 0 48px;
  }
}
@media (max-width: 768.98px) {
  .platinum-state-list .platinum-state-item i {
    font-size: 24px;
    flex: 0 0 80px;
  }
}
@media (max-width: 500.98px) {
  .platinum-state-list .platinum-state-item i {
    font-size: 21px;
    flex: 0 0 64px;
  }
}
@media (max-width: 330.98px) {
  .platinum-state-list .platinum-state-item i {
    font-size: 18px;
    flex: 0 0 54px;
    line-height: 18px;
  }
}
.platinum-state-list .platinum-state-item .score {
  position: relative;
  display: block;
  border: 1px solid var(--state-color);
  width: 60px;
  height: 30px;
  margin-right: 4px;
}
@media (max-width: 1500.98px) {
  .platinum-state-list .platinum-state-item .score {
    width: 50px;
    height: 21px;
  }
}
@media (max-width: 900.98px) {
  .platinum-state-list .platinum-state-item .score {
    width: 38px;
    height: 16px;
  }
}
@media (max-width: 738.98px) {
  .platinum-state-list .platinum-state-item .score {
    width: 46px;
    height: 18px;
  }
}
@media (max-width: 400.98px) {
  .platinum-state-list .platinum-state-item .score {
    width: 35px;
  }
}
@media (max-width: 330.98px) {
  .platinum-state-list .platinum-state-item .score {
    width: 28px;
    height: 14px;
  }
}
@media (max-width: 300.98px) {
  .platinum-state-list .platinum-state-item .score {
    width: 25px;
  }
}
.platinum-state-list .platinum-state-item .score::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--state-color);
}
.platinum-state-list .platinum-state-item .half {
  position: relative;
  width: 60px;
  height: 30px;
}
@media (max-width: 1500.98px) {
  .platinum-state-list .platinum-state-item .half {
    width: 50px;
    height: 21px;
  }
}
@media (max-width: 900.98px) {
  .platinum-state-list .platinum-state-item .half {
    width: 38px;
    height: 16px;
  }
}
@media (max-width: 738.98px) {
  .platinum-state-list .platinum-state-item .half {
    width: 46px;
    height: 18px;
  }
}
@media (max-width: 400.98px) {
  .platinum-state-list .platinum-state-item .half {
    width: 35px;
  }
}
@media (max-width: 330.98px) {
  .platinum-state-list .platinum-state-item .half {
    width: 28px;
    height: 14px;
  }
}
.platinum-state-list .platinum-state-item .half::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--state-color);
}
.platinum-state-list .platinum-state-item .note {
  position: relative;
}
.platinum-state-list .platinum-state-item .note::before {
  position: absolute;
  content: "";
  background: url(../img/good.svg);
  width: 34px;
  height: 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  left: 67px;
  top: 0;
}
@media (max-width: 1422.98px) {
  .platinum-state-list .platinum-state-item .note::before {
    width: 24px;
    height: 22px;
    left: 57px;
  }
}
@media (max-width: 900.98px) {
  .platinum-state-list .platinum-state-item .note::before {
    left: 45px;
    top: -4px;
  }
}
@media (max-width: 768.98px) {
  .platinum-state-list .platinum-state-item .note::before {
    width: 36px;
    height: 28px;
    top: -6px;
  }
}
@media (max-width: 500.98px) {
  .platinum-state-list .platinum-state-item .note::before {
    left: 50px;
  }
}
@media (max-width: 500.98px) {
  .platinum-state-list .platinum-state-item .note::before {
    left: 36px;
  }
}
@media (max-width: 330.98px) {
  .platinum-state-list .platinum-state-item .note::before {
    width: 23px;
    height: 23px;
  }
}
.platinum-state-list .platinum-item-text {
  font-size: 18px;
  color: var(--secondary-color);
  margin-left: 76px;
}

/*白金-內容右側*/
.platinum-r-content .style-img {
  width: 420px;
  height: 350px;
  aspect-ratio: 420/350;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  margin-bottom: 36px;
}
@media (max-width: 1200.98px) {
  .platinum-r-content .style-img {
    width: 360px;
    height: auto;
  }
}
@media (max-width: 900.98px) {
  .platinum-r-content .style-img {
    width: 324px;
  }
}
@media (max-width: 768.98px) {
  .platinum-r-content .style-img {
    border-radius: 16px;
    width: 80%;
  }
}
@media (max-width: 712.98px) {
  .platinum-r-content .style-img {
    width: 100%;
  }
}
.platinum-r-content .style-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.platinum-r-content .style-ex {
  width: 211px;
  height: 48px;
  aspect-ratio: 211/48;
  margin-bottom: 24px;
  margin-left: 8px;
}
.platinum-r-content .style-ex img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.platinum-r-content .platinum-generall {
  display: flex;
  width: 80%;
  justify-content: flex-end;
  font-size: 18px;
  font-family: "Noto Sans TC", sans-serif;
  color: var(--secondary-color);
}
.platinum-r-content .platinum-l {
  width: 29px;
  height: 22px;
}
.platinum-r-content .platinum-l img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.platinum-r-content .platinum-r {
  width: 20px;
  height: 20px;
}
.platinum-r-content .platinum-r img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.platinum-r-content .platinum-caption {
  font-size: 18px;
  line-height: 32px;
  color: var(--text-color);
  font-family: "Noto Sans TC", sans-serif;
  width: 80%;
  margin-bottom: 24px;
}
@media (max-width: 1200.98px) {
  .platinum-r-content .platinum-caption {
    font-size: 16px;
    line-height: 28px;
  }
}
@media (max-width: 900.98px) {
  .platinum-r-content .platinum-caption {
    width: 78%;
  }
}
@media (max-width: 768.98px) {
  .platinum-r-content .platinum-caption {
    width: 100%;
    font-size: 21px;
    line-height: 36px;
  }
}
@media (max-width: 500.98px) {
  .platinum-r-content .platinum-caption {
    font-size: 18px;
    line-height: 28px;
  }
}

/*白金款 右側按鈕區塊*/
.platinum-sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  margin-top: -74px;
}
@media (max-width: 1000.98px) {
  .platinum-sidebar {
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 0px;
  }
}
@media (max-width: 768.98px) {
  .platinum-sidebar {
    justify-content: center;
  }
}
.platinum-sidebar .platinum-title-wrap {
  background: var(--state-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  text-align: center;
  padding: 64px 0px;
  border-radius: 0px 30px 0px 0px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.15), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.15);
  margin-bottom: 8px;
}
@media (max-width: 1290.98px) {
  .platinum-sidebar .platinum-title-wrap {
    padding: 48px 0px;
  }
}
@media (max-width: 1000.98px) {
  .platinum-sidebar .platinum-title-wrap {
    width: 100%;
    box-shadow: none;
    padding: 60px 0px;
    margin-bottom: -8px;
    border-radius: 30px 30px 0px 0px;
  }
}
.platinum-sidebar .platinum-title-wrap .platinum-title {
  writing-mode: vertical-rl;
  display: block;
  font-size: 36px;
  letter-spacing: 8px;
  color: var(--secondary-color);
}
@media (max-width: 1000.98px) {
  .platinum-sidebar .platinum-title-wrap .platinum-title {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
  }
}

/*白金款 左側按鈕設定*/
.platinum-tab-btn {
  padding: 0.75rem 0.75rem;
  font-size: 21px;
  font-weight: 600;
  border: none;
  background: var(--white-color);
  color: var(--text-color);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.01), 6px 0 12px rgba(0, 0, 0, 0.01), 0 6px 12px rgba(0, 0, 0, 0.01);
}
.platinum-tab-btn:last-child {
  border-bottom-right-radius: 20px;
}
@media (max-width: 1000.98px) {
  .platinum-tab-btn:last-child {
    border-bottom-right-radius: 0px;
  }
}
@media (max-width: 1000.98px) {
  .platinum-tab-btn {
    width: 33.33%;
    flex-direction: row;
    justify-content: center;
    border-radius: 10px 10px 0px 0px;
    box-shadow: 0 -3px 3px rgba(0, 0, 0, 0.15), 0px 0 0px rgba(0, 0, 0, 0), 0 3px 3px rgba(0, 0, 0, 0.15);
  }
}
@media (max-width: 1000.98px) {
  .platinum-tab-btn {
    flex-direction: column;
  }
}
@media (max-width: 768.98px) {
  .platinum-tab-btn {
    font-size: 18px;
  }
}
@media (max-width: 612.98px) {
  .platinum-tab-btn {
    width: 50%;
    margin-bottom: 0px;
  }
}
@media (max-width: 330.98px) {
  .platinum-tab-btn {
    font-size: 16px;
  }
}
.platinum-tab-btn span {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
}
@media (max-width: 1000.98px) {
  .platinum-tab-btn span {
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
  }
}
.platinum-tab-btn:hover {
  background: var(--hover-btn-color);
  color: var(--white-color);
}
.platinum-tab-btn.active {
  background: var(--secondary-color);
  color: var(--white-color);
}

@media (max-width: 612.98px) {
  .platinum-sidebar .platinum-tab-btn:last-child {
    width: 100%;
    box-shadow: none;
    border: 1px solid var(--grey-color-100);
    border-radius: 0px;
    margin-bottom: 0px;
  }
}

.payment-container {
  background: url(../img/service-bg.svg);
  width: 100%;
  height: auto;
  background-position: top center;
  background-repeat: repeat-y;
  background-size: cover;
  padding: 168px 0px 80px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1000.98px) {
  .payment-container {
    padding: 108px 0px 80px;
  }
}
@media (max-width: 834.98px) {
  .payment-container {
    padding: 108px 0px 40px;
  }
}
@media (max-width: 540.98px) {
  .payment-container {
    padding: 108px 0px 0px;
  }
}
.payment-container::after {
  background: url(../img/pay-bg.svg);
  content: "";
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}
@media (max-width: 1200.98px) {
  .payment-container::after {
    width: 146%;
    background-size: contain;
    background-position: top left;
    left: -98px;
  }
}
@media (max-width: 1000.98px) {
  .payment-container::after {
    width: 132%;
  }
}
@media (max-width: 834.98px) {
  .payment-container::after {
    width: 200%;
    top: -94px;
    left: -136px;
  }
}
@media (max-width: 768.98px) {
  .payment-container::after {
    width: 215%;
  }
}
@media (max-width: 600.98px) {
  .payment-container::after {
    width: 268%;
    top: -70px;
    left: -99px;
  }
}
@media (max-width: 540.98px) {
  .payment-container::after {
    top: -80px;
    left: -130px;
  }
}
@media (max-width: 440.98px) {
  .payment-container::after {
    top: -56px;
    left: -118px;
  }
}
@media (max-width: 390.98px) {
  .payment-container::after {
    top: -40px;
  }
}
@media (max-width: 360.98px) {
  .payment-container::after {
    width: 300%;
  }
}
@media (max-width: 320.98px) {
  .payment-container::after {
    width: 336%;
  }
}

.payment-title-content {
  margin-bottom: 80px;
}
@media (max-width: 540.98px) {
  .payment-title-content {
    margin-bottom: 40px;
  }
}

.payment-main {
  position: relative;
  z-index: 2;
  max-width: 1245px;
  margin: 0px auto;
  padding-bottom: 40px;
}
@media (max-width: 1320.98px) {
  .payment-main {
    max-width: 1045px;
  }
}
@media (max-width: 1200.98px) {
  .payment-main {
    max-width: 900px;
  }
}
@media (max-width: 1000.98px) {
  .payment-main {
    max-width: 800px;
  }
}
@media (max-width: 834.98px) {
  .payment-main {
    max-width: 90%;
  }
}
.payment-main .payment-title {
  font-size: 60px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 24px;
}
@media (max-width: 912.98px) {
  .payment-main .payment-title {
    font-size: 48px;
  }
}
@media (max-width: 540.98px) {
  .payment-main .payment-title {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 4px;
  }
}
@media (max-width: 440.98px) {
  .payment-main .payment-title {
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
}
.payment-main .payment-link {
  color: var(--text-color-200);
  text-decoration: underline;
}
.payment-main .payment-link:hover {
  color: var(--third-hover-color);
}
.payment-main .payment-text {
  color: var(--text-color-200);
  font-size: 16px;
}
@media (max-width: 540.98px) {
  .payment-main .payment-text {
    font-size: 14px;
    line-height: 21px;
  }
}
.payment-main .payment-main-link {
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: underline;
}
.payment-main .payment-main-link:hover {
  color: var(--third-hover-color);
}

.payment-subtitle-main {
  display: flex;
  align-items: center;
  padding: 24px 0px;
  margin-left: 16px;
}
@media (max-width: 428.98px) {
  .payment-subtitle-main {
    padding: 16px 0px;
  }
}
.payment-subtitle-main .payment-subtitle-icon {
  width: 40px;
  height: 40px;
  margin-right: 16px;
  position: relative;
}
.payment-subtitle-main .payment-subtitle-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.payment-subtitle-main .payment-subtitle-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: url(../img/get-start-icon-after.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 10s linear infinite; /* 4秒轉一圈，可自行調整 */
}
@media (max-width: 500.98px) {
  .payment-subtitle-main .payment-subtitle-icon::after {
    width: 40px;
    height: 40px;
  }
}
.payment-subtitle-main .payment-subtitle-icon::before {
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  background: url(../img/get-start-icon-befor.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin-reverse 10s linear infinite;
}
@media (max-width: 500.98px) {
  .payment-subtitle-main .payment-subtitle-icon::before {
    width: 50px;
    height: 50px;
  }
}
.payment-subtitle-main .payment-subtitle {
  font-size: 24px;
  color: var(--text-color);
  font-family: "REM", sans-serif;
}
@media (max-width: 540.98px) {
  .payment-subtitle-main .payment-subtitle {
    font-size: 20px;
  }
}

.pay-top-content {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}
@media (max-width: 1320.98px) {
  .pay-top-content {
    margin-bottom: 80px;
  }
}
@media (max-width: 768.98px) {
  .pay-top-content {
    flex-direction: column;
    margin: 0 auto 80px;
    width: 90%;
  }
}
@media (max-width: 466.98px) {
  .pay-top-content {
    margin: 0 auto 40px;
  }
}
@media (max-width: 466.98px) {
  .pay-top-content {
    width: 100%;
  }
}
.pay-top-content .pay-top-title {
  width: 276px;
  height: 117px;
  aspect-ratio: 276/117;
  margin-bottom: 24px;
}
@media (max-width: 1320.98px) {
  .pay-top-content .pay-top-title {
    height: auto;
    width: 230px;
  }
}
@media (max-width: 768.98px) {
  .pay-top-content .pay-top-title {
    display: none;
  }
}
.pay-top-content .pay-top-title img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.pay-top-content .pay-top-mob-title {
  display: none;
}
@media (max-width: 768.98px) {
  .pay-top-content .pay-top-mob-title {
    display: block;
    width: 262px;
    height: 115px;
    aspect-ratio: 262/115;
    margin-bottom: 24px;
  }
}
@media (max-width: 540.98px) {
  .pay-top-content .pay-top-mob-title {
    width: 230px;
    height: auto;
  }
}
@media (max-width: 440.98px) {
  .pay-top-content .pay-top-mob-title {
    width: 210px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .pay-top-content .pay-top-mob-title {
    width: 180px;
    height: auto;
  }
}
@media (max-width: 280.98px) {
  .pay-top-content .pay-top-mob-title {
    width: 170px;
    height: auto;
  }
}
.pay-top-content .pay-l-content {
  width: 50%;
}
@media (max-width: 768.98px) {
  .pay-top-content .pay-l-content {
    width: 100%;
    margin-bottom: 48px;
  }
}
.pay-top-content .pay-l-content .pay-top-text {
  font-size: 21px;
  color: var(--text-color-100);
  line-height: 32px;
}
@media (max-width: 1320.98px) {
  .pay-top-content .pay-l-content .pay-top-text {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 768.98px) {
  .pay-top-content .pay-l-content .pay-top-text {
    font-size: 21px;
    line-height: 32px;
  }
}
@media (max-width: 540.98px) {
  .pay-top-content .pay-l-content .pay-top-text {
    font-size: 18px;
    line-height: 28px;
  }
}
.pay-top-content .pay-r-content {
  width: 40%;
}
@media (max-width: 768.98px) {
  .pay-top-content .pay-r-content {
    width: 80%;
    margin: 0 auto;
  }
}
@media (max-width: 540.98px) {
  .pay-top-content .pay-r-content {
    width: 90%;
  }
}
.pay-top-content .pay-r-content .pay-top-suntitle {
  font-size: 21px;
  text-align: center;
  color: var(--secondary-color);
  margin-bottom: 16px;
}
@media (max-width: 768.98px) {
  .pay-top-content .pay-r-content .pay-top-suntitle {
    font-size: 30px;
    line-height: 48px;
    font-weight: 500;
    margin-bottom: 32px;
  }
}
@media (max-width: 360.98px) {
  .pay-top-content .pay-r-content .pay-top-suntitle {
    font-size: 24px;
    line-height: 36px;
  }
}
.pay-top-content .pay-r-content .pay-r-content-img {
  width: 100%;
  height: auto;
}
.pay-top-content .pay-r-content .pay-r-content-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.pay-down-content p {
  text-align: center;
  font-size: 18px;
  line-height: 32px;
  color: var(--text-color-100);
}
@media (max-width: 360.98px) {
  .pay-down-content p {
    font-size: 16px;
    line-height: 28px;
  }
}
.pay-down-content .pay-cardname {
  font-size: 21px;
  font-weight: bold;
}
@media (max-width: 440.98px) {
  .pay-down-content .pay-cardname {
    font-size: 18px;
    line-height: 28px;
  }
}
.pay-down-content .pay-down-subtitle {
  margin-bottom: 36px;
}
.pay-down-content .pay-down-text {
  margin-bottom: 8px;
}
.pay-down-content .mark-text {
  font-size: 30px;
}
@media (max-width: 360.98px) {
  .pay-down-content .mark-text {
    font-size: 24px;
  }
}
.pay-down-content .pay-down-title {
  font-size: 60px;
  color: var(--secondary-color);
  font-weight: bold;
  text-align: center;
  margin-bottom: 48px;
  position: relative;
}
@media (max-width: 1320.98px) {
  .pay-down-content .pay-down-title {
    font-size: 48px;
  }
}
@media (max-width: 540.98px) {
  .pay-down-content .pay-down-title {
    font-size: 42px;
  }
}
@media (max-width: 466.98px) {
  .pay-down-content .pay-down-title {
    font-size: 36px;
  }
}
@media (max-width: 360.98px) {
  .pay-down-content .pay-down-title {
    font-size: 32px;
  }
}
@media (max-width: 290.98px) {
  .pay-down-content .pay-down-title {
    font-size: 28px;
  }
}
.pay-down-content .pay-down-title::after {
  position: absolute;
  content: "";
  background: url(../img/pay-down-title.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 544px;
  height: 37px;
  aspect-ratio: 544/37;
  z-index: -1;
  left: 50%;
  bottom: -8px;
  transform: translate(-50%, 0%);
}
@media (max-width: 540.98px) {
  .pay-down-content .pay-down-title::after {
    width: 450px;
    height: auto;
  }
}
@media (max-width: 540.98px) {
  .pay-down-content .pay-down-title::after {
    width: 360px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .pay-down-content .pay-down-title::after {
    width: 313px;
    height: auto;
  }
}
@media (max-width: 290.98px) {
  .pay-down-content .pay-down-title::after {
    width: 270px;
    height: auto;
  }
}

.pay-down-content {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 466.98px) {
  .pay-down-content {
    width: 90%;
  }
}
@media (max-width: 360.98px) {
  .pay-down-content {
    width: 100%;
  }
}

.pay-down-img-main {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 600.98px) {
  .pay-down-img-main {
    gap: 8px;
  }
}
@media (max-width: 360.98px) {
  .pay-down-img-main {
    margin-top: 24px;
  }
}
.pay-down-img-main .down-img {
  width: 30%;
  height: auto;
}
@media (max-width: 768.98px) {
  .pay-down-img-main .down-img {
    width: 48%;
  }
}
@media (max-width: 540.98px) {
  .pay-down-img-main .down-img {
    width: 100%;
    margin: 0 auto;
  }
}
.pay-down-img-main .down-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.gyaeanty-container {
  background: url(../img/service-bg.svg);
  width: 100%;
  height: auto;
  background-position: top center;
  background-repeat: repeat-y;
  background-size: cover;
  padding: 168px 0px 0px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1000.98px) {
  .gyaeanty-container {
    padding: 108px 0px 0px;
  }
}
@media (max-width: 834.98px) {
  .gyaeanty-container {
    padding: 108px 0px 0px;
  }
}
.gyaeanty-container::after {
  background: url(../img/pay-bg.svg);
  content: "";
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}
@media (max-width: 1200.98px) {
  .gyaeanty-container::after {
    width: 146%;
    background-size: contain;
    background-position: top left;
    left: -98px;
  }
}
@media (max-width: 1000.98px) {
  .gyaeanty-container::after {
    width: 132%;
  }
}
@media (max-width: 834.98px) {
  .gyaeanty-container::after {
    width: 200%;
    top: -94px;
    left: -136px;
  }
}
@media (max-width: 768.98px) {
  .gyaeanty-container::after {
    width: 215%;
  }
}
@media (max-width: 600.98px) {
  .gyaeanty-container::after {
    width: 268%;
    top: -70px;
    left: -99px;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-container::after {
    top: -80px;
    left: -130px;
  }
}
@media (max-width: 440.98px) {
  .gyaeanty-container::after {
    top: -56px;
    left: -118px;
  }
}
@media (max-width: 390.98px) {
  .gyaeanty-container::after {
    top: -40px;
  }
}
@media (max-width: 360.98px) {
  .gyaeanty-container::after {
    width: 300%;
  }
}
@media (max-width: 320.98px) {
  .gyaeanty-container::after {
    width: 336%;
  }
}

.gyaeanty-title-content {
  margin-bottom: 100px;
}
@media (max-width: 540.98px) {
  .gyaeanty-title-content {
    margin-bottom: 60px;
  }
}

.gyaeanty-main {
  position: relative;
  z-index: 2;
  max-width: 1245px;
  margin: 0px auto;
  padding-bottom: 40px;
}
@media (max-width: 1320.98px) {
  .gyaeanty-main {
    max-width: 1045px;
  }
}
@media (max-width: 1200.98px) {
  .gyaeanty-main {
    max-width: 900px;
  }
}
@media (max-width: 1000.98px) {
  .gyaeanty-main {
    max-width: 800px;
  }
}
@media (max-width: 834.98px) {
  .gyaeanty-main {
    max-width: 90%;
  }
}
.gyaeanty-main .gyaeanty-title {
  font-size: 60px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 24px;
}
@media (max-width: 912.98px) {
  .gyaeanty-main .gyaeanty-title {
    font-size: 48px;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-main .gyaeanty-title {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 4px;
  }
}
@media (max-width: 440.98px) {
  .gyaeanty-main .gyaeanty-title {
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
}
.gyaeanty-main .gyaeanty-link {
  color: var(--text-color-200);
  text-decoration: underline;
}
.gyaeanty-main .gyaeanty-link:hover {
  color: var(--third-hover-color);
}
.gyaeanty-main .gyaeanty-text {
  color: var(--text-color-200);
  font-size: 16px;
}
@media (max-width: 540.98px) {
  .gyaeanty-main .gyaeanty-text {
    font-size: 14px;
    line-height: 21px;
  }
}
.gyaeanty-main .gyaeanty-main-link {
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: underline;
}
.gyaeanty-main .gyaeanty-main-link:hover {
  color: var(--third-hover-color);
}

.gyaeanty-subtitle-main {
  display: flex;
  align-items: center;
  padding: 24px 0px;
  margin-left: 16px;
}
@media (max-width: 428.98px) {
  .gyaeanty-subtitle-main {
    padding: 16px 0px;
  }
}
.gyaeanty-subtitle-main .gyaeanty-subtitle-icon {
  width: 40px;
  height: 40px;
  margin-right: 16px;
  position: relative;
}
.gyaeanty-subtitle-main .gyaeanty-subtitle-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.gyaeanty-subtitle-main .gyaeanty-subtitle-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: url(../img/get-start-icon-after.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 10s linear infinite; /* 4秒轉一圈，可自行調整 */
}
@media (max-width: 500.98px) {
  .gyaeanty-subtitle-main .gyaeanty-subtitle-icon::after {
    width: 40px;
    height: 40px;
  }
}
.gyaeanty-subtitle-main .gyaeanty-subtitle-icon::before {
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  background: url(../img/get-start-icon-befor.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin-reverse 10s linear infinite;
}
@media (max-width: 500.98px) {
  .gyaeanty-subtitle-main .gyaeanty-subtitle-icon::before {
    width: 50px;
    height: 50px;
  }
}
.gyaeanty-subtitle-main .gyaeanty-subtitle {
  font-size: 24px;
  color: var(--text-color);
  font-family: "REM", sans-serif;
}
@media (max-width: 540.98px) {
  .gyaeanty-subtitle-main .gyaeanty-subtitle {
    font-size: 20px;
  }
}

.gyaeanty-top-main {
  width: 70%;
  margin: 0 auto 80px;
  padding: 48px 0px;
  background: var(--white-color);
  box-shadow: 1px 1px 10px 1px rgba(102, 102, 102, 0.5) inset;
}
@media (max-width: 1320.98px) {
  .gyaeanty-top-main {
    width: 80%;
    box-sizing: border-box;
  }
}
@media (max-width: 1200.98px) {
  .gyaeanty-top-main {
    width: 90%;
  }
}
@media (max-width: 1000.98px) {
  .gyaeanty-top-main {
    width: 100%;
  }
}
@media (max-width: 834.98px) {
  .gyaeanty-top-main {
    width: 70%;
    padding: 36px 24px;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-top-main {
    margin: 0 auto 60px;
  }
}
@media (max-width: 440.98px) {
  .gyaeanty-top-main {
    width: 100%;
  }
}
@media (max-width: 320.98px) {
  .gyaeanty-top-main {
    margin: 0 auto 24px;
  }
}
.gyaeanty-top-main .gyaeanty-top-title {
  text-align: center;
  font-size: 28px;
  line-height: 48px;
  font-weight: 500;
  color: var(--secondary-color);
  margin-bottom: 16px;
}
@media (max-width: 834.98px) {
  .gyaeanty-top-main .gyaeanty-top-title {
    font-size: 24px;
    line-height: 36px;
    margin-bottom: 8px;
  }
}
@media (max-width: 320.98px) {
  .gyaeanty-top-main .gyaeanty-top-title {
    font-size: 22px;
    line-height: 32px;
  }
}
.gyaeanty-top-main .gyaeanty-top-text {
  text-align: center;
  font-size: 21px;
  line-height: 28px;
  color: var(--text-color-200);
}
@media (max-width: 834.98px) {
  .gyaeanty-top-main .gyaeanty-top-text {
    font-size: 18px;
  }
}
@media (max-width: 320.98px) {
  .gyaeanty-top-main .gyaeanty-top-text {
    font-size: 16px;
    line-height: 24px;
  }
}

.gyaeanty-middle-main {
  display: flex;
  justify-content: space-around;
}
@media (max-width: 540.98px) {
  .gyaeanty-middle-main {
    flex-wrap: wrap;
  }
}
.gyaeanty-middle-main .gyaeanty-middle-img {
  width: 45%;
  height: auto;
}
@media (max-width: 540.98px) {
  .gyaeanty-middle-main .gyaeanty-middle-img {
    width: 80%;
    margin: 0 auto 24px;
  }
}
.gyaeanty-middle-main .gyaeanty-middle-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.gyaeanty-content {
  margin-bottom: 60px;
}
@media (max-width: 540.98px) {
  .gyaeanty-content {
    margin-bottom: 24px;
  }
}

.gyaeanty-iso-container {
  width: 100%;
  height: auto;
  background: url(../img/iso-bg.svg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 80px 0px;
}
@media (max-width: 1200.98px) {
  .gyaeanty-iso-container {
    padding: 40px 0px;
  }
}
.gyaeanty-iso-container .gyaeanty-iso-content {
  max-width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
@media (max-width: 834.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content {
    max-width: 90%;
  }
}
@media (max-width: 768.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main {
  width: 30%;
  background: var(--white-color);
  padding: 24px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
@media (max-width: 1200.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main {
    padding: 16px;
  }
}
@media (max-width: 768.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main {
    padding: 8px;
    width: 48%;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main {
    width: 100%;
    margin-bottom: 16px;
  }
}
@media (max-width: 460.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main {
    padding: 16px;
  }
}
@media (max-width: 768.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main:nth-child(3) {
    margin-top: 16px;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main:nth-child(3) {
    margin-top: 0px;
    margin-bottom: 0px;
  }
}
.gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .iso-img {
  width: 90%;
  margin: 0 auto 16px;
  height: auto;
}
@media (max-width: 1200.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .iso-img {
    width: 100%;
  }
}
.gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .iso-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .gyaeanty-iso-text {
  text-align: center;
  font-size: 21px;
  line-height: 28px;
  color: var(--text-color-200);
}
@media (max-width: 1320.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .gyaeanty-iso-text {
    font-size: 18px;
    line-height: 24px;
  }
}
@media (max-width: 768.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .gyaeanty-iso-text {
    font-size: 16px;
    line-height: 22px;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .gyaeanty-iso-text {
    font-size: 24px;
    line-height: 32px;
  }
}
@media (max-width: 360.98px) {
  .gyaeanty-iso-container .gyaeanty-iso-content .gyaeanty-iso-main .gyaeanty-iso-text {
    font-size: 18px;
  }
}

.gyaeanty-footer-mob {
  display: none;
}
@media (max-width: 540.98px) {
  .gyaeanty-footer-mob {
    display: block;
    width: 100%;
    height: auto;
  }
  .gyaeanty-footer-mob img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.gyaeanty-footer {
  width: 100%;
  height: auto;
  background: url(../img/gyaeanty-footer-bg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  padding: 140px 0px;
  position: relative;
}
@media (max-width: 540.98px) {
  .gyaeanty-footer {
    padding: 0px;
  }
}
.gyaeanty-footer::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
@media (max-width: 540.98px) {
  .gyaeanty-footer::after {
    display: none;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-footer {
    background: transparent;
  }
}
.gyaeanty-footer .gyaeanty-footer-main {
  position: relative;
  z-index: 2;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--white-color);
}
@media (max-width: 680.98px) {
  .gyaeanty-footer .gyaeanty-footer-main {
    width: 80%;
    box-sizing: border-box;
  }
}
@media (max-width: 540.98px) {
  .gyaeanty-footer .gyaeanty-footer-main {
    margin: 40px auto 60px;
  }
}
@media (max-width: 400.98px) {
  .gyaeanty-footer .gyaeanty-footer-main {
    width: 90%;
    margin: 40px auto;
  }
}
@media (max-width: 340.98px) {
  .gyaeanty-footer .gyaeanty-footer-main {
    padding: 24px;
  }
}
.gyaeanty-footer .gyaeanty-footer-main .gyaeanty-footer-title {
  font-size: 28px;
  color: var(--white-color);
  font-weight: 500;
  margin-bottom: 24px;
  text-align: center;
}
@media (max-width: 340.98px) {
  .gyaeanty-footer .gyaeanty-footer-main .gyaeanty-footer-title {
    font-size: 24px;
    line-height: 32px;
  }
}
.gyaeanty-footer .gyaeanty-footer-main .gyaeanty-footer-text {
  font-size: 21px;
  line-height: 32px;
  color: var(--white-color);
  text-align: center;
}
@media (max-width: 350.98px) {
  .gyaeanty-footer .gyaeanty-footer-main .gyaeanty-footer-text {
    font-size: 18px;
    line-height: 28px;
  }
}

/*最外框*/
.overseas-container {
  background: url(../img/service-bg.svg);
  width: 100%;
  height: auto;
  background-position: top center;
  background-repeat: repeat-y;
  background-size: cover;
  padding: 168px 0px 0px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1000.98px) {
  .overseas-container {
    padding: 108px 0px 0px;
  }
}
@media (max-width: 834.98px) {
  .overseas-container {
    padding: 108px 0px 0px;
  }
}
.overseas-container::after {
  background: url(../img/pay-bg.svg);
  content: "";
  width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}
@media (max-width: 1200.98px) {
  .overseas-container::after {
    width: 146%;
    background-size: contain;
    background-position: top left;
    left: -98px;
  }
}
@media (max-width: 1000.98px) {
  .overseas-container::after {
    width: 132%;
  }
}
@media (max-width: 834.98px) {
  .overseas-container::after {
    width: 200%;
    top: -94px;
    left: -136px;
  }
}
@media (max-width: 768.98px) {
  .overseas-container::after {
    width: 215%;
  }
}
@media (max-width: 600.98px) {
  .overseas-container::after {
    width: 268%;
    top: -70px;
    left: -99px;
  }
}
@media (max-width: 540.98px) {
  .overseas-container::after {
    top: -80px;
    left: -130px;
  }
}
@media (max-width: 440.98px) {
  .overseas-container::after {
    top: -56px;
    left: -118px;
  }
}
@media (max-width: 390.98px) {
  .overseas-container::after {
    top: -40px;
  }
}
@media (max-width: 360.98px) {
  .overseas-container::after {
    width: 300%;
  }
}
@media (max-width: 320.98px) {
  .overseas-container::after {
    width: 336%;
  }
}

.overseas-main {
  position: relative;
  z-index: 2;
  max-width: 1245px;
  margin: 0px auto;
  padding-bottom: 60px;
}
@media (max-width: 1320.98px) {
  .overseas-main {
    max-width: 1045px;
  }
}
@media (max-width: 1200.98px) {
  .overseas-main {
    max-width: 900px;
  }
}
@media (max-width: 1000.98px) {
  .overseas-main {
    max-width: 800px;
  }
}
@media (max-width: 834.98px) {
  .overseas-main {
    max-width: 90%;
  }
}
.overseas-main {
  /*標題外框*/
}
.overseas-main .overseas-title-content {
  margin-bottom: 100px;
}
@media (max-width: 540.98px) {
  .overseas-main .overseas-title-content {
    margin-bottom: 60px;
  }
}
.overseas-main {
  /*標題*/
}
.overseas-main .overseas-title {
  font-size: 60px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 24px;
}
@media (max-width: 912.98px) {
  .overseas-main .overseas-title {
    font-size: 48px;
  }
}
@media (max-width: 540.98px) {
  .overseas-main .overseas-title {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 4px;
  }
}
@media (max-width: 440.98px) {
  .overseas-main .overseas-title {
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
}
.overseas-main {
  /*麵包屑-首頁連結*/
}
.overseas-main .overseas-link {
  color: var(--text-color-200);
  text-decoration: underline;
}
.overseas-main .overseas-link:hover {
  color: var(--third-hover-color);
}
.overseas-main {
  /*麵包屑*/
}
.overseas-main .overseas-text {
  color: var(--text-color-200);
  font-size: 16px;
}
@media (max-width: 540.98px) {
  .overseas-main .overseas-text {
    font-size: 14px;
    line-height: 21px;
  }
}
.overseas-main {
  /*麵包屑-本頁連結*/
}
.overseas-main .overseas-main-link {
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: underline;
}
.overseas-main .overseas-main-link:hover {
  color: var(--third-hover-color);
}

/*副標題外框*/
.overseas-subtitle-main {
  display: flex;
  align-items: center;
  padding: 24px 0px;
  margin-left: 16px;
}
@media (max-width: 428.98px) {
  .overseas-subtitle-main {
    padding: 16px 0px;
  }
}
.overseas-subtitle-main {
  /*副標題-ICON*/
}
.overseas-subtitle-main .overseas-subtitle-icon {
  width: 40px;
  height: 40px;
  margin-right: 16px;
  position: relative;
}
.overseas-subtitle-main .overseas-subtitle-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.overseas-subtitle-main .overseas-subtitle-icon::after {
  content: "";
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  background: url(../img/get-start-icon-after.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin 10s linear infinite; /* 4秒轉一圈，可自行調整 */
}
@media (max-width: 500.98px) {
  .overseas-subtitle-main .overseas-subtitle-icon::after {
    width: 40px;
    height: 40px;
  }
}
.overseas-subtitle-main .overseas-subtitle-icon::before {
  content: "";
  display: block;
  position: absolute;
  width: 60px;
  height: 60px;
  background: url(../img/get-start-icon-befor.svg);
  background-position: center;
  background-size: contain;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: spin-reverse 10s linear infinite;
}
@media (max-width: 500.98px) {
  .overseas-subtitle-main .overseas-subtitle-icon::before {
    width: 50px;
    height: 50px;
  }
}
.overseas-subtitle-main .overseas-subtitle {
  font-size: 24px;
  color: var(--text-color);
  font-family: "REM", sans-serif;
}
@media (max-width: 540.98px) {
  .overseas-subtitle-main .overseas-subtitle {
    font-size: 20px;
  }
}

/*內容*/
.overseas-top-main {
  width: 90%;
  margin: 0 auto 60px;
  border: 1px solid var(--text-color-200);
  background-color: var(--white-color);
  border-radius: 16px;
  padding: 60px 40px;
  box-sizing: border-box;
}
@media (max-width: 1320.98px) {
  .overseas-top-main {
    width: 80%;
  }
}
@media (max-width: 1000.98px) {
  .overseas-top-main {
    width: 90%;
  }
}
@media (max-width: 480.98px) {
  .overseas-top-main {
    padding: 60px 20px;
  }
}

/*內容標題*/
.over-seas-title {
  font-size: 28px;
  line-height: 48px;
  font-weight: 700;
  color: var(--secondary-color);
  text-align: center;
  margin-bottom: 24px;
}
@media (max-width: 1320.98px) {
  .over-seas-title {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (max-width: 480.98px) {
  .over-seas-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 36px;
  }
}
@media (max-width: 400.98px) {
  .over-seas-title {
    font-size: 21px;
    line-height: 28px;
  }
}

.over-seas-text {
  color: var(--text-color);
  font-size: 21px;
  text-align: center;
  line-height: 32px;
  width: 80%;
  margin: 0 auto 16px;
}
@media (max-width: 1320.98px) {
  .over-seas-text {
    line-height: 36px;
    width: 100%;
  }
}
@media (max-width: 480.98px) {
  .over-seas-text {
    font-size: 18px;
    line-height: 28px;
  }
}

.over-seas-mark {
  font-size: 24px;
  color: var(--secondary-color);
  position: relative;
}
@media (max-width: 480.98px) {
  .over-seas-mark {
    font-size: 21px;
  }
}
.over-seas-mark::after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  bottom: -2px;
  left: 0;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background: url(../img/obj_wave_01.svg);
  height: 6px;
}

.over-seas-subtitle {
  font-size: 21px;
  line-height: 36px;
  color: var(--secondary-color);
  font-weight: bold;
  text-align: center;
  margin-bottom: 48px;
}
@media (max-width: 480.98px) {
  .over-seas-subtitle {
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 36px;
  }
}

.over-seas-link-main {
  display: flex;
  justify-content: space-around;
  width: 50%;
  margin: 0 auto 48px;
}
@media (max-width: 768.98px) {
  .over-seas-link-main {
    width: 80%;
    margin: 0 auto 36px;
  }
}
@media (max-width: 480.98px) {
  .over-seas-link-main {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
}

.overseas-link-box {
  width: 100px;
  height: 100px;
  display: block;
  box-sizing: border-box;
  padding: 16px;
  border-radius: 8px;
}
.overseas-link-box img {
  width: 100%;
  width: 100%;
}

.overseas-line {
  background-color: var(--line-color);
}
@media (max-width: 480.98px) {
  .overseas-line {
    margin-bottom: 24px;
  }
}
.overseas-line:hover {
  opacity: 0.8;
}

.overseas-fb {
  background-color: var(--fb-color);
}
.overseas-fb:hover {
  opacity: 0.8;
}

.over-seas-s-text {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-color);
  text-align: center;
}
@media (max-width: 480.98px) {
  .over-seas-s-text {
    font-size: 16px;
    line-height: 24px;
  }
}
.over-seas-s-text a {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--text-color);
  text-align: center;
}
.over-seas-s-text a:hover {
  color: var(--third-hover-color);
}

.overseas-buttom-main {
  width: 100%;
  margin: 0 auto;
}

.overseas-buttom-title {
  font-size: 30px;
  color: var(--white-color);
  position: relative;
  text-align: center;
  max-width: 297px;
  margin: 0 auto;
  height: 70px;
  aspect-ratio: 297/70;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
@media (max-width: 480.98px) {
  .overseas-buttom-title {
    font-size: 24px;
    width: 200px;
    height: auto;
  }
}
.overseas-buttom-title::after {
  content: "";
  display: block;
  width: 100%;
  position: absolute;
  background-size: auto 100%;
  width: 297px;
  height: 70px;
  aspect-ratio: 297/70;
  left: 0px;
  background: url(../img/over-b-img.svg);
  background-repeat: no-repeat;
  background-size: contain;
  z-index: -1;
  top: 0px;
}
@media (max-width: 480.98px) {
  .overseas-buttom-title::after {
    width: 200px;
    height: auto;
  }
}

.overseas-buttom-wrap {
  width: 90%;
  border: 1px solid var(--text-color-200);
  background-color: var(--white-color);
  border-radius: 16px;
  padding: 80px 40px 40px;
  margin: -40px auto 0px;
  box-sizing: border-box;
}
@media (max-width: 1320.98px) {
  .overseas-buttom-wrap {
    width: 80%;
  }
}
@media (max-width: 1000.98px) {
  .overseas-buttom-wrap {
    width: 90%;
  }
}
@media (max-width: 834.98px) {
  .overseas-buttom-wrap {
    padding: 40px;
  }
}
@media (max-width: 540.98px) {
  .overseas-buttom-wrap {
    padding: 60px 40px 40px;
  }
}
@media (max-width: 480.98px) {
  .overseas-buttom-wrap {
    margin: -26px auto 0px;
    padding: 60px 20px 40px;
  }
}
.overseas-buttom-wrap .overseas-btm-main {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}
@media (max-width: 1320.98px) {
  .overseas-buttom-wrap .overseas-btm-main {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 834.98px) {
  .overseas-buttom-wrap .overseas-btm-main {
    flex-wrap: wrap;
  }
}

.overseas-buttom {
  width: 175px;
  height: 169px;
  aspect-ratio: 175/169;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 834.98px) {
  .overseas-buttom {
    width: 40%;
    height: auto;
    justify-content: center;
  }
}
@media (max-width: 768.98px) {
  .overseas-buttom {
    width: 50%;
  }
}
@media (max-width: 320.98px) {
  .overseas-buttom {
    width: 80%;
  }
}
.overseas-buttom img {
  width: 70%;
  height: 70%;
  -o-object-fit: contain;
     object-fit: contain;
  margin-bottom: 16px;
}
.overseas-buttom span {
  font-size: 21px;
  font-weight: bold;
  color: var(--secondary-color);
  position: relative;
  z-index: 2;
}
.overseas-buttom {
  /*來台灣訂製須知*/
}
.overseas-buttom:nth-child(1) {
  margin-bottom: 16px;
}
.overseas-buttom:nth-child(1) span {
  display: block;
  background: url(../img/over-btn1.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(1) span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(1) span {
    width: 110px;
    height: auto;
  }
}
.overseas-buttom:nth-child(1):hover img {
  transform: rotate(15deg);
}
.overseas-buttom:nth-child(1):hover span {
  display: block;
  background: url(../img/over-btn-hover1.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(1):hover span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(1):hover span {
    width: 110px;
    height: auto;
  }
}
.overseas-buttom {
  /*門市交通攻略*/
}
.overseas-buttom:nth-child(2) {
  margin-bottom: 16px;
}
.overseas-buttom:nth-child(2) span {
  display: block;
  background: url(../img/over-btn2.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(2) span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(2) span {
    width: 110px;
    height: auto;
  }
}
.overseas-buttom:nth-child(2):hover img {
  transform: rotate(12deg);
}
.overseas-buttom:nth-child(2):hover span {
  display: block;
  background: url(../img/over-btn-hover2.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(2):hover span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(2):hover span {
    width: 110px;
    height: auto;
  }
}
.overseas-buttom {
  /*保養修剪保固*/
}
.overseas-buttom:nth-child(3) span {
  display: block;
  background: url(../img/over-btn3.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(3) span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(3) span {
    width: 110px;
    height: auto;
  }
}
.overseas-buttom:nth-child(3):hover img {
  transform: rotate(12deg);
}
.overseas-buttom:nth-child(3):hover span {
  display: block;
  background: url(../img/over-btn-hover3.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(3):hover span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(3):hover span {
    width: 110px;
    height: auto;
  }
}
.overseas-buttom {
  /*其他常見問題*/
}
.overseas-buttom:nth-child(4) span {
  display: block;
  background: url(../img/over-btn4.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(4) span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(4) span {
    width: 110px;
    height: auto;
  }
}
.overseas-buttom:nth-child(4):hover img {
  transform: rotate(12deg);
}
.overseas-buttom:nth-child(4):hover span {
  display: block;
  background: url(../img/over-btn-hover4.png) no-repeat;
  background-size: contain;
  width: 160px;
  height: 35px;
  aspect-ratio: 160/35;
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}
@media (max-width: 480.98px) {
  .overseas-buttom:nth-child(4):hover span {
    width: 140px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .overseas-buttom:nth-child(4):hover span {
    width: 110px;
    height: auto;
  }
}

/*來台訂製須知*/
.important-header-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-bottom: 36px;
  margin-top: -200px;
}
@media (max-width: 1200.98px) {
  .important-header-content {
    margin-top: -80px;
  }
}
@media (max-width: 620.98px) {
  .important-header-content {
    align-items: center;
  }
}
@media (max-width: 540.98px) {
  .important-header-content {
    margin-top: -24px;
  }
}

.important-header {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}
@media (max-width: 620.98px) {
  .important-header {
    margin-bottom: 0px;
    align-items: flex-start;
    justify-content: space-around;
    width: 100%;
  }
}

.important-header-img {
  width: 217px;
  height: 154px;
  aspect-ratio: 217/154;
}
@media (max-width: 540.98px) {
  .important-header-img {
    width: 180px;
    height: auto;
  }
}
@media (max-width: 540.98px) {
  .important-header-img {
    width: 154px;
  }
}
@media (max-width: 360.98px) {
  .important-header-img {
    width: 126px;
  }
}
@media (max-width: 330.98px) {
  .important-header-img {
    width: 110px;
  }
}
@media (max-width: 300.98px) {
  .important-header-img {
    width: 100px;
  }
}
@media (max-width: 282.98px) {
  .important-header-img {
    width: 94px;
  }
}
.important-header-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.important-title {
  font-size: 48px;
  font-weight: 500;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 0 white, 2px 2px 0 white, -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 5px rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊度、顏色 */
}
@media (max-width: 620.98px) {
  .important-title {
    margin-top: 32px;
    font-size: 36px;
  }
}
@media (max-width: 540.98px) {
  .important-title {
    margin-top: 20px;
    font-size: 30px;
  }
}
@media (max-width: 440.98px) {
  .important-title {
    font-size: 24px;
  }
}
@media (max-width: 330.98px) {
  .important-title {
    margin-top: 14px;
    font-size: 22px;
  }
}

.important-list {
  display: flex;
  padding: 24px;
}
@media (max-width: 620.98px) {
  .important-list {
    width: 90%;
    justify-content: space-around;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 24px 0px;
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(41, 41, 41, 0.6);
    margin-top: -60px;
  }
}
@media (max-width: 440.98px) {
  .important-list {
    flex-wrap: wrap;
    margin-top: -40px;
    padding: 16px 0px;
  }
}
@media (max-width: 360.98px) {
  .important-list {
    margin-top: -33px;
  }
}
@media (max-width: 330.98px) {
  .important-list {
    margin-top: -27px;
  }
}

.important-item {
  border-right: 1px solid var(--text-color-200);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0px 16px;
}
@media (max-width: 620.98px) {
  .important-item {
    border-right: 0px;
    padding: 0px;
  }
}
@media (max-width: 440.98px) {
  .important-item {
    width: 50%;
  }
  .important-item:first-child {
    margin-bottom: 16px;
  }
  .important-item:nth-child(2) {
    margin-bottom: 16px;
  }
}
.important-item:last-child {
  border-right: 0px;
}
.important-item .important-link {
  color: var(--text-color-200);
  font-size: 18px;
}
@media (max-width: 440.98px) {
  .important-item .important-link {
    font-size: 16px;
  }
}
.important-item .important-link:hover {
  color: var(--third-hover-color);
  font-weight: 500;
}
.important-item a {
  display: block;
}

/*保養修剪保固*/
.maintainance-header-img {
  width: 152px;
  height: 154px;
  aspect-ratio: 152/154;
}
@media (max-width: 620.98px) {
  .maintainance-header-img {
    transform: rotate(3deg);
  }
}
@media (max-width: 540.98px) {
  .maintainance-header-img {
    width: 180px;
    height: auto;
  }
}
@media (max-width: 540.98px) {
  .maintainance-header-img {
    width: 154px;
  }
}
@media (max-width: 360.98px) {
  .maintainance-header-img {
    width: 126px;
  }
}
@media (max-width: 330.98px) {
  .maintainance-header-img {
    width: 110px;
  }
}
@media (max-width: 300.98px) {
  .maintainance-header-img {
    width: 100px;
  }
}
@media (max-width: 282.98px) {
  .maintainance-header-img {
    width: 94px;
  }
}
.maintainance-header-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.maintainance-title {
  font-size: 48px;
  font-weight: 500;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 0 white, 2px 2px 0 white, -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 5px rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊度、顏色 */
}
@media (max-width: 620.98px) {
  .maintainance-title {
    margin-top: 40px;
    font-size: 36px;
  }
}
@media (max-width: 540.98px) {
  .maintainance-title {
    margin-top: 46px;
    font-size: 30px;
  }
}
@media (max-width: 440.98px) {
  .maintainance-title {
    font-size: 24px;
    margin-top: 51px;
  }
}
@media (max-width: 440.98px) {
  .maintainance-title {
    margin-top: 42px;
  }
}
@media (max-width: 330.98px) {
  .maintainance-title {
    font-size: 22px;
    margin-top: 33px;
  }
}
@media (max-width: 300.98px) {
  .maintainance-title {
    margin-top: 26px;
  }
}

.maintainance-list {
  display: flex;
  padding: 24px;
}
@media (max-width: 620.98px) {
  .maintainance-list {
    width: 90%;
    justify-content: space-around;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 24px 0px;
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(41, 41, 41, 0.6);
    margin-top: -49px;
  }
}
@media (max-width: 440.98px) {
  .maintainance-list {
    flex-wrap: wrap;
    margin-top: -49px;
    padding: 16px 0px;
  }
}
@media (max-width: 360.98px) {
  .maintainance-list {
    margin-top: -40px;
  }
}
@media (max-width: 330.98px) {
  .maintainance-list {
    margin-top: -34px;
  }
}
@media (max-width: 300.98px) {
  .maintainance-list {
    margin-top: -31px;
  }
}
@media (max-width: 280.98px) {
  .maintainance-list {
    margin-top: -29px;
  }
}

/*其他問題*/
.other-faq-header-img {
  width: 150px;
  height: 169px;
  aspect-ratio: 150/169;
}
@media (max-width: 620.98px) {
  .other-faq-header-img {
    display: none;
  }
}
@media (max-width: 540.98px) {
  .other-faq-header-img {
    width: 180px;
    height: auto;
  }
}
@media (max-width: 540.98px) {
  .other-faq-header-img {
    width: 154px;
  }
}
@media (max-width: 360.98px) {
  .other-faq-header-img {
    width: 126px;
  }
}
@media (max-width: 330.98px) {
  .other-faq-header-img {
    width: 110px;
  }
}
@media (max-width: 300.98px) {
  .other-faq-header-img {
    width: 100px;
  }
}
@media (max-width: 282.98px) {
  .other-faq-header-img {
    width: 94px;
  }
}
.other-faq-header-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.other-faq-header-mob-img {
  display: none;
}
@media (max-width: 620.98px) {
  .other-faq-header-mob-img {
    display: block;
    width: 74px;
    height: 107px;
    aspect-ratio: 74/107;
  }
  .other-faq-header-mob-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
}

.other-faq-title {
  font-size: 48px;
  font-weight: 500;
  position: relative;
  z-index: 2;
  text-shadow: 0 0 0 white, 2px 2px 0 white, -2px -2px 0 white, 2px -2px 0 white, -2px 2px 0 white, 2px 2px 5px rgba(0, 0, 0, 0.5); /* 水平偏移、垂直偏移、模糊度、顏色 */
}
@media (max-width: 620.98px) {
  .other-faq-title {
    margin-top: 32px;
    font-size: 36px;
  }
}
@media (max-width: 540.98px) {
  .other-faq-title {
    font-size: 30px;
  }
}
@media (max-width: 440.98px) {
  .other-faq-title {
    margin-top: 36px;
    font-size: 24px;
  }
}
@media (max-width: 330.98px) {
  .other-faq-title {
    margin-top: 40px;
    font-size: 22px;
  }
}

.other-faq-list {
  display: flex;
  padding: 24px;
}
@media (max-width: 620.98px) {
  .other-faq-list {
    width: 90%;
    justify-content: space-around;
    width: 100%;
    position: relative;
    z-index: 2;
    padding: 24px 0px;
    background-color: var(--white-color);
    border-radius: 8px;
    box-shadow: inset 0 0 5px rgba(41, 41, 41, 0.6);
    margin-top: -10px;
  }
}
@media (max-width: 440.98px) {
  .other-faq-list {
    flex-wrap: wrap;
    margin-top: -19px;
    padding: 16px 0px;
  }
}
@media (max-width: 360.98px) {
  .other-faq-list {
    margin-top: -20px;
  }
}
@media (max-width: 330.98px) {
  .other-faq-list {
    margin-top: -16px;
  }
}
@media (max-width: 300.98px) {
  .other-faq-list {
    margin-top: -17px;
  }
}

/*手風琴區塊設定*/
/*問題按鈕*/
.important-accordion {
  box-sizing: border-box;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid var(--secondary-color);
  border-radius: 16px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  box-sizing: border-box;
  background: var(--white-color);
}
@media (max-width: 540.98px) {
  .important-accordion {
    flex-direction: column;
  }
}
@media (max-width: 414.98px) {
  .important-accordion {
    padding: 16px;
  }
}
.important-accordion:hover {
  background-color: var(--remark-color);
}

/*Q ICON*/
.important-q {
  width: 46px;
  height: 46px;
  aspect-ratio: 1/1;
  margin-right: 16px;
}
@media (max-width: 620.98px) {
  .important-q {
    width: 80px;
    height: auto;
  }
}
@media (max-width: 540.98px) {
  .important-q {
    width: 64px;
    margin-bottom: 16px;
    margin-right: 0px;
  }
}
@media (max-width: 440.98px) {
  .important-q {
    width: 48px;
    margin-bottom: 8px;
  }
}
@media (max-width: 360.98px) {
  .important-q {
    width: 36px;
  }
}
.important-q img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.important-q-title {
  color: var(--secondary-color);
  font-weight: 500;
  font-size: 24px;
  line-height: 32px;
}
@media (max-width: 440.98px) {
  .important-q-title {
    font-size: 21px;
    line-height: 28px;
  }
}
@media (max-width: 360.98px) {
  .important-q-title {
    font-size: 18px;
    line-height: 24px;
  }
}

/*展開設定*/
.acc-active {
  border-bottom: 0px;
  border-radius: 16px 16px 0px 0px;
  margin-bottom: 0px;
  background-color: var(--remark-color);
}

.important-panel {
  max-height: 0;
  overflow: hidden;
  padding: 0 48px; /* 初始 padding 上下為 0 */
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 16px;
  background: var(--white-color);
  transition: max-height 0.4s ease, padding 0.4s ease;
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--text-color);
}
.important-panel h2 {
  font-size: 28px;
  line-height: 42px;
  font-weight: 500;
  color: var(--third-color);
}
.important-panel h3 {
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: var(--third-color);
}
.important-panel h4 {
  font-size: 21px;
  line-height: 32px;
  font-weight: 500;
  color: var(--third-color);
}
@media (max-width: 360.98px) {
  .important-panel {
    font-size: 16px;
    line-height: 24px;
  }
}
.important-panel p {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--text-color);
}
@media (max-width: 360.98px) {
  .important-panel p {
    font-size: 16px;
    line-height: 24px;
  }
}
.important-panel div p {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: var(--text-color);
}
@media (max-width: 360.98px) {
  .important-panel div p {
    font-size: 16px;
    line-height: 24px;
  }
}
.important-panel {
  /*YT 套入*/
}
.important-panel div iframe {
  width: 560px;
  height: 315px;
  aspect-ratio: 560/315;
  margin: 24px auto;
  display: block;
}
@media (max-width: 700.98px) {
  .important-panel div iframe {
    width: 90%;
    height: auto;
  }
}
@media (max-width: 430.98px) {
  .important-panel div iframe {
    width: 100%;
    height: auto;
  }
}
.important-panel iframe {
  width: 560px;
  height: 315px;
  aspect-ratio: 560/315;
  margin: 24px auto;
  display: block;
}
@media (max-width: 700.98px) {
  .important-panel iframe {
    width: 90%;
    height: auto;
  }
}
@media (max-width: 430.98px) {
  .important-panel iframe {
    width: 100%;
    height: auto;
  }
}

.important-panel.open {
  max-height: 2000px; /* 足夠大以容納內容 */
  padding: 24px 48px 24px; /* 展開時才有 padding */
  border: 1px solid var(--secondary-color);
  border-radius: 0px 0px 16px 16px;
  border-top: 0px;
}
@media (max-width: 440.98px) {
  .important-panel.open {
    padding: 24px;
  }
}
@media (max-width: 360.98px) {
  .important-panel.open {
    padding: 16px;
  }
}

.transportation-warp {
  position: relative;
  z-index: 2;
  max-width: 1245px;
  margin: 0px auto;
  padding-bottom: 60px;
}
@media (max-width: 1320.98px) {
  .transportation-warp {
    max-width: 1045px;
  }
}
@media (max-width: 1200.98px) {
  .transportation-warp {
    max-width: 900px;
  }
}
@media (max-width: 1000.98px) {
  .transportation-warp {
    max-width: 800px;
  }
}
@media (max-width: 834.98px) {
  .transportation-warp {
    max-width: 90%;
  }
}
.transportation-warp {
  /*標題外框*/
}
.transportation-warp .overseas-title-content {
  margin-bottom: 100px;
}
@media (max-width: 540.98px) {
  .transportation-warp .overseas-title-content {
    margin-bottom: 60px;
  }
}
.transportation-warp {
  /*標題*/
}
.transportation-warp .overseas-title {
  font-size: 60px;
  font-weight: bold;
  color: var(--secondary-color);
  margin-bottom: 24px;
}
@media (max-width: 912.98px) {
  .transportation-warp .overseas-title {
    font-size: 48px;
  }
}
@media (max-width: 540.98px) {
  .transportation-warp .overseas-title {
    font-size: 36px;
    line-height: 42px;
    margin-bottom: 4px;
  }
}
@media (max-width: 440.98px) {
  .transportation-warp .overseas-title {
    margin-bottom: 16px;
    letter-spacing: 2px;
  }
}
.transportation-warp {
  /*麵包屑-首頁連結*/
}
.transportation-warp .overseas-link {
  color: var(--text-color-200);
  text-decoration: underline;
}
.transportation-warp .overseas-link:hover {
  color: var(--third-hover-color);
}
.transportation-warp {
  /*麵包屑*/
}
.transportation-warp .overseas-text {
  color: var(--text-color-200);
  font-size: 16px;
  line-height: 24px;
}
@media (max-width: 540.98px) {
  .transportation-warp .overseas-text {
    font-size: 14px;
    line-height: 21px;
  }
}
.transportation-warp {
  /*麵包屑-本頁連結*/
}
.transportation-warp .overseas-main-link {
  color: var(--secondary-color);
  font-weight: 500;
  text-decoration: underline;
}
.transportation-warp .overseas-main-link:hover {
  color: var(--third-hover-color);
}

/*內容*/
.transportation-container {
  width: 90%;
  margin: 0 auto 60px;
  padding: 0px 40px;
  box-sizing: border-box;
}
@media (max-width: 1200.98px) {
  .transportation-container {
    width: 100%;
  }
}
@media (max-width: 1000.98px) {
  .transportation-container {
    width: 90%;
  }
}
@media (max-width: 480.98px) {
  .transportation-container {
    padding: 20px;
    margin-bottom: 0px;
  }
}
@media (max-width: 440.98px) {
  .transportation-container {
    padding: 0px;
  }
}

/*內容標題*/
.transportation-title {
  font-size: 28px;
  line-height: 48px;
  font-weight: 700;
  color: var(--secondary-color);
  text-align: center;
  margin-bottom: 24px;
}
@media (max-width: 1320.98px) {
  .transportation-title {
    font-size: 28px;
    line-height: 36px;
  }
}
@media (max-width: 480.98px) {
  .transportation-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 24px;
  }
}
@media (max-width: 400.98px) {
  .transportation-title {
    font-size: 21px;
    line-height: 28px;
  }
}

.transportation-text {
  color: var(--text-color);
  font-size: 21px;
  text-align: center;
  line-height: 32px;
  margin: 0 auto 16px;
}
@media (max-width: 1320.98px) {
  .transportation-text {
    line-height: 36px;
    width: 100%;
  }
}
@media (max-width: 768.98px) {
  .transportation-text {
    font-size: 18px;
    line-height: 28px;
  }
}
.transportation-text .route-style {
  font-size: 30px;
  line-height: 36px;
  font-weight: 700;
}
@media (max-width: 768.98px) {
  .transportation-text .route-style {
    font-size: 24px;
  }
}
@media (max-width: 480.98px) {
  .transportation-text .route-style {
    font-size: 21px;
    line-height: 24px;
  }
}
.transportation-text .route-style:hover {
  text-decoration: underline;
}
.transportation-text .taoyuan-route {
  color: var(--taoyuan-color-2);
}
.transportation-text .taoyuan-route:hover {
  color: var(--taoyuan-color);
}
.transportation-text .matsuyama-route {
  color: var(--matsuyama-color-2);
}
.transportation-text .matsuyama-route:hover {
  color: var(--matsuyama-color);
}
.transportation-text .kaohsiung-route {
  color: var(--kaohsiung-color);
}
.transportation-text .kaohsiung-route:hover {
  color: var(--kaohsiung-color-2);
}

/* 北區交通表格*/
.transportation-content {
  max-width: 1050px;
  margin: 0 auto;
}
.transportation-content .transportation-content-title {
  background-color: var(--transportation-color);
  font-size: 30px;
  color: var(--white-color);
  text-align: center;
  padding: 8px 0px;
}

.transportation-main {
  display: flex;
}

.transportation-btn-content {
  display: flex;
  flex: 0 0 9%;
}
@media (max-width: 834.98px) {
  .transportation-btn-content {
    display: none;
  }
}

.transportation-kaohsiung-btn-content {
  display: flex;
  flex: 0 0 11%;
}
@media (max-width: 834.98px) {
  .transportation-kaohsiung-btn-content {
    display: none;
  }
}

.transportation-main {
  display: flex;
}

/*台北交通-按鈕*/
/*北部*/
.route-btn {
  width: 100%;
  position: relative;
  display: flex;
  overflow: hidden;
}
.route-btn span {
  display: block;
  width: 44px;
  height: 44px;
  aspect-ratio: 1/1;
  margin-bottom: 4px;
}
@media (max-width: 1200.98px) {
  .route-btn span {
    width: 24px;
    height: 24px;
  }
}
.route-btn span img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.route-btn p {
  writing-mode: vertical-lr;
}

.taoyuan-route-btn,
.matsuyama-route-btm {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 50%;
  box-sizing: border-box;
}
.taoyuan-route-btn:hover .taoyuan-route-hover-style,
.matsuyama-route-btm:hover .taoyuan-route-hover-style {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.matsuyama-route-btm:hover .matsuyama-route-hover-style {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.kaohsiung-route-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.kaohsiung-route-btn:hover .kaohsiung-route-hover-style {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.taoyuan-route-hover-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}
.taoyuan-route-hover-btn:hover .taoyuan-route-txai-hover-style {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.route-main {
  position: relative;
  z-index: 1;
}

.route-hover {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-decoration: none;
  opacity: 0;
  transform: translateX(-24px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.taoyuan-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  width: 100%;
  box-sizing: border-box;
}
.taoyuan-btn p {
  color: var(--white-color);
  margin-bottom: 8px;
  font-size: 30px;
}
@media (max-width: 1200.98px) {
  .taoyuan-btn p {
    font-size: 24px;
  }
}

.kaohsiung-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  width: 100%;
  box-sizing: border-box;
}
.kaohsiung-btn .route-kaohsiung {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0px 4px;
}
.kaohsiung-btn .route-kaohsiung .airplan-icon {
  transform: rotate(-90deg);
}
.kaohsiung-btn .route-kaohsiung p {
  color: var(--white-color);
  margin-bottom: 8px;
  font-size: 30px;
}
@media (max-width: 1200.98px) {
  .kaohsiung-btn .route-kaohsiung p {
    font-size: 24px;
  }
}

.taoyuan-route-style {
  background-color: var(--taoyuan-color);
}

.taoyuan-route-hover-style {
  background-color: var(--taoyuan-color-2);
}

.matsuyama-route-style {
  background-color: var(--matsuyama-color);
}

.matsuyama-route-hover-style {
  background-color: var(--matsuyama-color-2);
  color: var(--white-color);
}

.matsuyama-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 8px;
  width: 100%;
  box-sizing: border-box;
}
.matsuyama-btn p {
  margin-bottom: 8px;
  font-size: 30px;
}
@media (max-width: 1200.98px) {
  .matsuyama-btn p {
    font-size: 24px;
  }
}

.taoyuan-route-txai-style {
  background-color: var(--taxi-color-2);
}

.taoyuan-route-txai-hover-style {
  background-color: var(--taoyuan-color);
  display: flex;
  flex-direction: column;
  color: var(--white-color);
  margin-bottom: 8px;
  font-size: 30px;
  height: 100%;
}
@media (max-width: 1200.98px) {
  .taoyuan-route-txai-hover-style {
    font-size: 24px;
  }
}
@media (max-width: 1000.98px) {
  .taoyuan-route-txai-hover-style {
    font-size: 21px;
  }
}

.kaohsiung-route-style {
  background-color: var(--kaohsiung-color);
}

.kaohsiung-route-hover-style {
  background-color: var(--kaohsiung-color-2);
  display: flex;
  flex-direction: column;
  color: var(--white-color);
  margin-bottom: 8px;
  font-size: 30px;
  height: 100%;
}
@media (max-width: 1200.98px) {
  .kaohsiung-route-hover-style {
    font-size: 24px;
  }
}
@media (max-width: 1000.98px) {
  .kaohsiung-route-hover-style {
    font-size: 21px;
  }
}

/*分店資訊*/
.transportation-store-content {
  height: 100%;
}
@media (max-width: 650.98px) {
  .transportation-store-content {
    width: 100%;
  }
}

.transportation-store-main {
  width: 70%;
  border-right: 1px solid var(--text-color);
}
@media (max-width: 650.98px) {
  .transportation-store-main {
    width: 60%;
  }
}
@media (max-width: 480.98px) {
  .transportation-store-main {
    width: 100%;
    border-right: 0px;
  }
}

.transportation-attractions-main {
  box-sizing: border-box;
  width: 29.8%;
}
@media (max-width: 650.98px) {
  .transportation-attractions-main {
    width: 39.8%;
  }
}
@media (max-width: 545.98px) {
  .transportation-attractions-main {
    width: 39.6%;
  }
}
@media (max-width: 480.98px) {
  .transportation-attractions-main {
    width: 100%;
    border-top: 1px solid var(--text-color);
    padding: 24px 0px;
  }
}
.transportation-attractions-main .transportation-attractions {
  margin: 0px 8px;
  box-sizing: border-box;
}
.transportation-attractions-main .transportation-attractions p {
  font-size: 24px;
  color: var(--text-color);
  line-height: 32px;
}
@media (max-width: 1200.98px) {
  .transportation-attractions-main .transportation-attractions p {
    font-size: 18px;
    line-height: 28px;
    font-weight: 500;
  }
}
@media (max-width: 480.98px) {
  .transportation-attractions-main .transportation-attractions p {
    font-size: 16px;
    line-height: 24px;
  }
}

.transportation-main {
  height: 100%;
  box-sizing: border-box;
  margin-bottom: 24px;
}
@media (max-width: 834.98px) {
  .transportation-main {
    margin-bottom: 0px;
    flex-wrap: wrap;
  }
}
.transportation-main .transportation-store {
  flex-wrap: wrap;
}
.transportation-main .transportation-store:nth-child(1) .transportation-attractions {
  height: 94%;
}
@media (max-width: 1200.98px) {
  .transportation-main .transportation-store:nth-child(1) .transportation-attractions {
    height: 81%;
  }
}
@media (max-width: 834.98px) {
  .transportation-main .transportation-store:nth-child(1) .transportation-attractions {
    padding: 8px 0px;
  }
}
.transportation-main .transportation-store:nth-child(2) .transportation-attractions {
  height: 100%;
}
@media (max-width: 650.98px) {
  .transportation-main .transportation-store:nth-child(2) .transportation-attractions {
    height: 79%;
  }
}

.transportation-store {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--text-color);
}

.fuxing-none {
  display: none;
}
@media (max-width: 834.98px) {
  .fuxing-none {
    display: block;
  }
}

@media (max-width: 834.98px) {
  .fuxing-mob-none {
    display: none;
  }
}

.transportation-store-title {
  font-size: 21px;
  color: var(--white-color);
  background-color: var(--text-color-100);
  padding: 8px 0px;
  text-align: center;
}
@media (max-width: 1200.98px) {
  .transportation-store-title {
    font-size: 18px;
  }
}

.transportation-store-title-2 {
  font-size: 21px;
  color: var(--white-color);
  background-color: var(--text-color-100);
  padding: 8px 0px;
  text-align: center;
}
@media (max-width: 1200.98px) {
  .transportation-store-title-2 {
    font-size: 18px;
  }
}
@media (max-width: 480.98px) {
  .transportation-store-title-2 {
    background: transparent;
    color: var(--secondary-color);
    font-weight: 700;
  }
}

.transportation-store-list .transportation-store-item:nth-child(1) {
  border-bottom: 1px solid var(--text-color);
}
.transportation-store-list .transportation-store-item:nth-child(2) {
  border-bottom: 1px solid var(--text-color);
}

.transportation-store-high {
  display: flex;
  height: 88%;
  align-items: center;
}

.transportation-store-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
@media (max-width: 834.98px) {
  .transportation-store-item {
    padding: 12px 0px;
  }
}

.transportation-store-l-main {
  width: 50%;
}
@media (max-width: 834.98px) {
  .transportation-store-l-main {
    width: 60%;
  }
}
@media (max-width: 650.98px) {
  .transportation-store-l-main {
    width: 90%;
  }
}
@media (max-width: 480.98px) {
  .transportation-store-l-main {
    width: 67%;
    min-width: 290px;
    margin: 0 auto;
  }
}
@media (max-width: 320.98px) {
  .transportation-store-l-main {
    min-width: 250px;
  }
}
.transportation-store-l-main .store-l-title {
  font-size: 30px;
  font-weight: 500;
  color: var(--text-color);
  margin-bottom: 24px;
}
@media (max-width: 1200.98px) {
  .transportation-store-l-main .store-l-title {
    font-size: 24px;
    margin-bottom: 16px;
  }
}
@media (max-width: 768.98px) {
  .transportation-store-l-main .store-l-title {
    font-size: 21px;
  }
}

.store-l-main {
  display: flex;
  margin-bottom: 8px;
}
@media (max-width: 1200.98px) {
  .store-l-main {
    margin-bottom: 4px;
  }
}
.store-l-main .add-icon {
  width: 23px;
  height: 23px;
  aspect-ratio: 1/1;
  margin-right: 8px;
}
@media (max-width: 1200.98px) {
  .store-l-main .add-icon {
    width: 18px;
    height: 18px;
    margin-right: 4px;
  }
}
.store-l-main .add-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.store-l-main .store-l-text {
  font-size: 18px;
  color: var(--text-color);
  font-weight: 500;
}
@media (max-width: 1200.98px) {
  .store-l-main .store-l-text {
    font-size: 16px;
  }
}
@media (max-width: 834.98px) {
  .store-l-main .store-l-text {
    line-height: 21px;
  }
}

.transportation-store-r-main {
  width: 40%;
  height: auto;
  box-sizing: border-box;
  padding: 8px 8px;
}
@media (max-width: 650.98px) {
  .transportation-store-r-main {
    display: none;
  }
}
.transportation-store-r-main img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.transportation-attractions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.transportation-store-item-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px 0px;
}
@media (max-width: 650.98px) {
  .transportation-store-item-2 {
    width: 90%;
  }
}
@media (max-width: 480.98px) {
  .transportation-store-item-2 {
    width: 67%;
    min-width: 290px;
    margin: 0 auto;
  }
}
@media (max-width: 320.98px) {
  .transportation-store-item-2 {
    min-width: 250px;
  }
}

/*搭乘資訊 僅電腦內容*/
.taoyuan-getting-content {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.taoyuan-getting-content .taoyuan-getting-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1%;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(1) {
  flex: 66%;
}
.taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content {
  flex: 1; /* 兩個區塊自動均分 */
}
.taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(1) .public-ticketing-content {
  min-height: 237px;
}
.taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(1) .public-boarding-place-content {
  min-height: 165px;
}
@media (max-width: 1200.98px) {
  .taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(1) .public-boarding-place-content {
    min-height: 220px;
  }
}
.taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(1) .public-drop-offpoint-content {
  min-height: 50px;
}
.taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(2) .public-ticketing-content {
  min-height: 237px;
}
.taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(2) .public-boarding-place-content {
  min-height: 165px;
}
@media (max-width: 1200.98px) {
  .taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(2) .public-boarding-place-content {
    min-height: 220px;
  }
}
.taoyuan-getting-content .taoyuan-getting-main .taoyuan-getting-public-content:nth-child(2) .public-drop-offpoint-content {
  min-height: 50px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) {
  flex: 30%;
  box-sizing: border-box;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-title-wrap {
  display: flex;
  justify-content: center;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-title-wrap .taxi-getting-title-img {
  width: 50%;
  box-sizing: border-box;
  height: auto;
  padding: 8px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-title-wrap .taxi-getting-title-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-title-wrap .taxi-getting-title-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 50%;
  box-sizing: border-box;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-title-wrap .taxi-getting-title-box .taxi-getting-title {
  font-size: 24px;
  padding: 8px 0px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-title-wrap .taxi-getting-title-box .taxi-getting-subtitle {
  font-size: 21px;
  color: var(--taxi-color);
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-pay-box,
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-branch-box {
  width: 100%;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-pay-title,
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-boarding-title,
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-branch-title {
  width: 100%;
  color: var(--white-color);
  text-align: center;
  font-size: 18px;
  background: var(--taxi-color);
  text-align: center;
  padding: 8px 0px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-pay-wrap {
  padding: 8px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-gettion-pay-text {
  font-size: 21px;
  color: var(--text-color);
  text-align: center;
  margin-bottom: 16px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-gettion-pay-subtext {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-color);
  text-align: center;
  width: 80%;
  margin: 0 auto 16px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-boarding-main {
  padding: 16px 0px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-boarding-wrap {
  display: flex;
  box-sizing: border-box;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-boarding-wrap .taxi-gettion-pay-text {
  flex: 30%;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-boarding-wrap .taxi-gettion-pay-subtext {
  flex: 60%;
  line-height: 24px;
  text-align: left;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-wrap .taxi-getting-boarding-subtitle {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  color: var(--white-color);
  background: var(--taxi-color-2);
  font-size: 18px;
  padding: 8px 0px;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-branch-box {
  width: 100%;
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-branch-box .taxi-getting-branch-title {
  width: 100%;
  text-align: center;
  background: var(--taxi-color);
  color: var(--white-color);
}
.taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-branch-subtitle {
  text-align: center;
  font-size: 21px;
  color: var(--text-color);
  padding: 8px 0px;
}
@media (max-width: 1200.98px) {
  .taoyuan-getting-content .taoyuan-getting-main:nth-child(2) .taxi-getting-branch-subtitle {
    padding: 0px;
    margin-bottom: 8px;
  }
}
.taoyuan-getting-content .taxi-getting-branch-list {
  max-width: 80%;
  margin: 0 auto;
}
@media (max-width: 1320.98px) {
  .taoyuan-getting-content .taxi-getting-branch-list {
    max-width: 98%;
  }
}
.taoyuan-getting-content .taxi-getting-branch-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
@media (max-width: 1200.98px) {
  .taoyuan-getting-content .taxi-getting-branch-item {
    align-items: start;
  }
}
.taoyuan-getting-content .taxi-getting-branch-item .taxi-getting-branch-img {
  width: 23px;
  height: 23px;
  aspect-ratio: 1/1;
  margin-right: 8px;
  margin-top: 4px;
}
.taoyuan-getting-content .taxi-getting-branch-item .taxi-getting-branch-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-content .taxi-getting-branch-item .taxi-getting-branch-subtext {
  font-size: 18px;
  line-height: 32px;
  color: var(--text-color);
}
@media (max-width: 1200.98px) {
  .taoyuan-getting-content .taxi-getting-branch-item .taxi-getting-branch-subtext {
    line-height: 24px;
  }
}
.taoyuan-getting-content .taxi-getting-branch-item:hover a {
  color: var(--third-hover-color);
}
.taoyuan-getting-content .taoyuan-getting-public-title-main {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0px;
  gap: 24px;
}
.taoyuan-getting-content .taoyuan-getting-public-title-main .taoyuan-getting-public-img {
  width: 66px;
  height: 66px;
  aspect-ratio: 1/1;
}
.taoyuan-getting-content .taoyuan-getting-public-title-main .taoyuan-getting-public-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-content .taoyuan-getting-public-title-main .taoyuan-getting-public-title {
  font-size: 21px;
}

.taxi-getting-branch-wrap {
  padding: 16px;
}
@media (max-width: 1200.98px) {
  .taxi-getting-branch-wrap {
    padding: 8px;
  }
}
.taxi-getting-branch-wrap {
  border-bottom: 1px solid var(--text-color);
}
.taxi-getting-branch-wrap:last-child {
  border-bottom: 0px;
}

.public-ticketing-content {
  width: 100%;
}
.public-ticketing-content .pulic-ticketing-title {
  background-color: var(--taoyuan-mrt-color);
  color: var(--white-color);
  padding: 8px 0px;
  font-size: 21px;
  text-align: center;
}
.public-ticketing-content .public-ticketing-main {
  padding: 16px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 168px;
}
.public-ticketing-content .public-ticketing-main .public-ticketing-text {
  font-size: 18px;
  color: var(--text-color);
  margin-bottom: 8px;
  padding: 8px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.public-ticketing-content .public-ticketing-main .public-ticketing-text .mrt-pc-fast {
  display: inline-block;
  width: 35px;
  height: 5px;
  background-color: var(--taoyuan-mrt-color);
}
.public-ticketing-content .public-ticketing-main .public-ticketing-text .mrt-pc-normal {
  display: inline-block;
  width: 35px;
  height: 5px;
  background-color: var(--mrt-normal);
}
.public-ticketing-content .public-ticketing-airplace-mrt {
  display: flex;
  align-items: center;
  justify-content: center;
}
.public-ticketing-content .public-ticketing-airplace-mrt .public-ticketing-airplace-text {
  flex: 4;
  text-align: center;
  font-size: 18px;
  color: var(--text-color);
}
.public-ticketing-content .public-ticketing-airplace-mrt .public-boarding-airplace-subtext {
  flex: 6;
  line-height: 24px;
  font-size: 18px;
  color: var(--text-color);
}

.public-boarding-place-content {
  width: 100%;
}
.public-boarding-place-content .pulic-bording-place-title {
  background-color: var(--taoyuan-mrt-color);
  color: var(--white-color);
  padding: 8px 0px;
  font-size: 21px;
  text-align: center;
}
.public-boarding-place-content .public-boarding-place-main {
  display: flex;
  flex-direction: column;
  min-height: 120px;
  justify-content: center;
}
@media (max-width: 1200.98px) {
  .public-boarding-place-content .public-boarding-place-main {
    min-height: 180px;
  }
}
.public-boarding-place-content .public-boarding-place-main .public-boarding-place-text {
  font-size: 18px;
  color: var(--text-color);
  margin-bottom: 8px;
  padding: 8px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 4;
}
.public-boarding-place-content .public-boarding-place-main .public-boarding-airplace-subtext {
  flex: 6;
}
.public-boarding-place-content .public-boarding-airplace-mrt {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0px;
}
@media (max-width: 1200.98px) {
  .public-boarding-place-content .public-boarding-airplace-mrt {
    flex-direction: column;
    margin-bottom: 8px;
  }
}
.public-boarding-place-content .public-boarding-airplace-mrt .public-boarding-airplace-text {
  flex: 4;
  text-align: center;
  font-size: 18px;
  color: var(--text-color);
}
.public-boarding-place-content .public-boarding-airplace-mrt .public-boarding-airplace-subtext {
  flex: 6;
  line-height: 24px;
  font-size: 18px;
  color: var(--text-color);
}
@media (max-width: 1200.98px) {
  .public-boarding-place-content .public-boarding-airplace-mrt .public-boarding-airplace-subtext {
    text-align: center;
  }
}

.public-drop-offpoint-content {
  width: 100%;
}
.public-drop-offpoint-content .pulic-drop-offpoint-title {
  background-color: var(--taoyuan-mrt-color);
  color: var(--white-color);
  padding: 8px 0px;
  font-size: 21px;
  text-align: center;
}
.public-drop-offpoint-content .public-drop-offpoint-text {
  text-align: center;
  font-size: 18px;
  color: var(--text-color);
  padding: 16px 0px;
}

.taoyuan-transfer-mrt-content {
  width: 100%;
}
.taoyuan-transfer-mrt-content .pulic-bording-place-title {
  width: 100%;
  background-color: var(--taipei-mrt-color);
  color: var(--white-color);
  padding: 8px 0px;
  font-size: 21px;
  text-align: center;
}
.taoyuan-transfer-mrt-content .pulic-bording-place-subtitle {
  font-size: 18px;
  padding: 16px 0px;
  text-align: center;
  color: var(--text-color);
}
.taoyuan-transfer-mrt-content .pulic-bording-place-text {
  font-size: 21px;
  color: var(--text-color);
  text-align: center;
  line-height: 24px;
  padding: 16px 0px;
}
.taoyuan-transfer-mrt-content .pulic-bording-place-text .taipei-mrt-text {
  color: var(--taipei-mrt-color);
  font-weight: 700;
  font-size: 24px;
}

.taoyuan-transfer-mrtpurpose-content {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main .taoyuan-transfer-mrtpurpose-box {
  display: flex;
  flex-wrap: wrap;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main .taoyuan-transfer-mrtpurpose-title {
  width: 100%;
  padding: 8px 0px;
  background: var(--taipei-mrt-color);
  color: var(--white-color);
  box-sizing: border-box;
  border: 1px solid var(--white-color);
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main .taoyuan-transfer-mrtpurpose-subtitle {
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  padding: 8px 0px;
  color: var(--white-color);
  background: var(--mrt-exit);
}
@media (max-width: 1200.98px) {
  .taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main .taoyuan-transfer-mrtpurpose-subtitle {
    min-height: 64px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(1) {
  flex: 75%;
  box-sizing: border-box;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(1) .taoyuan-transfer-mrtpurpose-wrap {
  flex: 1;
  border: 1px solid var(--white-color);
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(1) .taoyuan-transfer-mrtpurpose-wrap .taoyuan-transfer-mrtpurpose-img {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(1) .taoyuan-transfer-mrtpurpose-wrap .taoyuan-transfer-mrtpurpose-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(2) {
  flex: 25%;
  box-sizing: border-box;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(2) .taoyuan-transfer-mrtpurpose-wrap {
  border: 1px solid var(--white-color);
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(2) .taoyuan-transfer-mrtpurpose-wrap .taoyuan-transfer-mrtpurpose-img {
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main:nth-child(2) .taoyuan-transfer-mrtpurpose-wrap .taoyuan-transfer-mrtpurpose-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main .taoyuan-transfer-attractions-title {
  width: 100%;
  padding: 8px 0px;
  background: var(--attractions-color);
  color: var(--white-color);
  box-sizing: border-box;
  text-align: center;
  font-size: 21px;
  border: 1px solid var(--white-color);
}
.taoyuan-transfer-mrtpurpose-content .taoyuan-transfer-mrtpurpose-main .taoyuan-transfer-attractions-box .taoyuan-transfer-attractions-text {
  text-align: center;
  font-size: 18px;
  color: var(--text-color);
  padding: 8px;
}

.taoyuan-transfer-mrtpurpose-wrap .taoyuan-transfer-mrtpurpose-text {
  text-align: center;
  font-size: 21px;
  color: var(--text-color);
  padding: 8px 0px;
}

.taoyuan-transfer-mrtpurpose-title {
  width: 100%;
  background-color: var(--taipei-mrt-color);
  color: var(--white-color);
  padding: 8px 0px;
  font-size: 21px;
  text-align: center;
}

.taoyuan-transfer-mrtpurpose-line {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 0px;
}
.taoyuan-transfer-mrtpurpose-line .taoyuan-transfer-line-img {
  display: block;
  width: 30px;
  height: 30px;
  aspect-ratio: 1/1;
}
.taoyuan-transfer-mrtpurpose-line .taoyuan-transfer-line-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-transfer-mrtpurpose-line .taoyuan-transfer-line-text {
  color: var(--text-color);
  text-decoration: underline;
  font-size: 18px;
  font-weight: 500;
}
.taoyuan-transfer-mrtpurpose-line .taoyuan-transfer-line-text:hover {
  color: var(--third-hover-color);
}

/*平版按鈕*/
.transportation-mob-btn-container {
  width: 100%;
  padding: 16px 0px;
  gap: 16px;
  display: none;
}
@media (max-width: 834.98px) {
  .transportation-mob-btn-container {
    display: block;
  }
}
.transportation-mob-btn-container .ransportation-mob-btn-title {
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}

.mob-route-btn-content {
  display: flex;
  gap: 16px;
  justify-content: center;
}

.mob-route-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  border-radius: 8px;
}
@media (max-width: 290px) {
  .mob-route-btn {
    padding: 16px;
  }
}
.mob-route-btn .mob-route-img {
  width: 62px;
  height: 62px;
  aspect-ratio: 1/1;
}
.mob-route-btn .mob-route-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.mob-route-btn .mob-route-btn-text {
  font-size: 18px;
  color: var(--white-color);
}

.taoyuan-style {
  background-color: var(--taoyuan-color);
}

.matsuyama-style {
  background-color: var(--matsuyama-color);
}

.kaohsiung-style {
  background-color: var(--kaohsiung-color);
}

.taoyuan-roadmap-container {
  margin-top: 80px;
}
@media (max-width: 834.98px) {
  .taoyuan-roadmap-container {
    margin-top: 0px;
  }
}

.taoyuan-roadmap-title-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--text-color-100);
}
@media (max-width: 768.98px) {
  .taoyuan-roadmap-title-main {
    flex-wrap: wrap;
  }
}

@media (max-width: 834.98px) {
  .taoyuan-roadmap-information {
    display: none;
  }
}

.taoyuan-roadmap-pad-information {
  display: none;
}
@media (max-width: 834.98px) {
  .taoyuan-roadmap-pad-information {
    display: flex;
    flex-wrap: wrap;
  }
}

/*左側標題 */
.taoyuan-roadmap-wrap {
  display: flex;
  align-items: center;
}
@media (max-width: 768.98px) {
  .taoyuan-roadmap-wrap {
    width: 100%;
    justify-content: center;
    margin-bottom: 28px;
  }
}
@media (max-width: 430.98px) {
  .taoyuan-roadmap-wrap {
    flex-wrap: wrap;
  }
}
.taoyuan-roadmap-wrap .taoyuan-text-style {
  color: var(--taoyuan-color);
}
.taoyuan-roadmap-wrap .matsuyama-text-style {
  color: var(--matsuyama-color);
}
.taoyuan-roadmap-wrap .kaohsiung-text-style {
  color: var(--kaohsiung-color);
}
.taoyuan-roadmap-wrap .taoyuan-roadmap-title-icon {
  width: 65px;
  height: 65px;
  aspect-ratio: 1/1;
  margin-right: 16px;
}
@media (max-width: 430.98px) {
  .taoyuan-roadmap-wrap .taoyuan-roadmap-title-icon {
    width: 58px;
    height: auto;
    margin-right: 8px;
  }
}
.taoyuan-roadmap-wrap .taoyuan-roadmap-title-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-roadmap-wrap .taoyuan-roadmap-title {
  font-size: 38px;
  font-weight: 600;
}
@media (max-width: 330.98px) {
  .taoyuan-roadmap-wrap .taoyuan-roadmap-title {
    font-size: 32px;
  }
}
.taoyuan-roadmap-wrap .taoyuan-roadmap-title .taoyuan-roadmap-subtitle {
  font-size: 30px;
}
@media (max-width: 430.98px) {
  .taoyuan-roadmap-wrap .taoyuan-roadmap-title .taoyuan-roadmap-subtitle {
    width: 100%;
    text-align: center;
    display: block;
    margin-top: 4px;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-roadmap-wrap .taoyuan-roadmap-title .taoyuan-roadmap-subtitle {
    font-size: 24px;
    margin-top: 8px;
  }
}
@media (max-width: 430.98px) {
  .taoyuan-roadmap-wrap .taoyuan-roadmap-title .taoyuan-none {
    display: none;
  }
}

.border-r {
  border-right: 1px solid var(--text-color-100);
}
@media (max-width: 768.98px) {
  .border-r {
    border-right: 0px;
  }
}

.taoyuan-roadmap-line-main {
  display: flex;
  padding: 0 16px;
}
@media (max-width: 365.98px) {
  .taoyuan-roadmap-line-main {
    padding: 0 8px;
  }
}
.taoyuan-roadmap-line-main .taoyuan-roadmap-icon {
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
  margin-right: 8px;
}
@media (max-width: 330.98px) {
  .taoyuan-roadmap-line-main .taoyuan-roadmap-icon {
    width: 30px;
    height: auto;
  }
}
.taoyuan-roadmap-line-main .taoyuan-roadmap-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-roadmap-line-main .taoyuan-roadmap-line {
  display: flex;
  align-items: center;
}
.taoyuan-roadmap-line-main .taoyuan-roadmap-line p {
  color: var(--text-color-200);
  font-size: 21px;
}
@media (max-width: 330.98px) {
  .taoyuan-roadmap-line-main .taoyuan-roadmap-line p {
    font-size: 18px;
  }
}
.taoyuan-roadmap-line-main .taoyuan-roadmap-hvoer-line {
  display: flex;
  align-items: center;
}
.taoyuan-roadmap-line-main .taoyuan-roadmap-hvoer-line span {
  font-size: 21px;
}
@media (max-width: 330.98px) {
  .taoyuan-roadmap-line-main .taoyuan-roadmap-hvoer-line span {
    font-size: 18px;
  }
}

/*右側按鈕連結 區塊*/
.taoyuan-roadmap-line-content {
  display: flex;
}
@media (max-width: 768.98px) {
  .taoyuan-roadmap-line-content {
    width: 100%;
    justify-content: center;
  }
}
.taoyuan-roadmap-line-content .taoyuan-none {
  display: none;
}
.taoyuan-roadmap-line-content .taoyuan-roadmap-line-main {
  position: relative;
}
.taoyuan-roadmap-line-content .taoyuan-roadmap-line-main:hover .taoyuan-roadmap-line {
  opacity: 0;
}
.taoyuan-roadmap-line-content .taoyuan-roadmap-line-main:hover .taoyuan-roadmap-hvoer-line {
  opacity: 1;
}
.taoyuan-roadmap-line-content .taoyuan-roadmap-line-main:first-child span {
  color: var(--matsuyama-color);
}
.taoyuan-roadmap-line-content .taoyuan-roadmap-line-main:nth-child(2) span {
  color: var(--taoyuan-color-2);
}
.taoyuan-roadmap-line-content .taoyuan-roadmap-line-main:nth-child(3) span {
  color: var(--kaohsiung-color);
}
.taoyuan-roadmap-line-content .taoyuan-roadmap-line-main .taoyuan-roadmap-hvoer-line {
  position: absolute;
  top: 0;
  left: 16px;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
@media (max-width: 365.98px) {
  .taoyuan-roadmap-line-content .taoyuan-roadmap-line-main .taoyuan-roadmap-hvoer-line {
    left: 8px;
  }
}

/*平板&手機才出現的按鈕區塊*/
.taoyuan-roadmap-mobile-btns {
  width: 100%;
  display: none;
  border-bottom: 1px solid var(--text-color-100);
}
@media (max-width: 834.98px) {
  .taoyuan-roadmap-mobile-btns {
    display: flex;
  }
}
.taoyuan-roadmap-mobile-btns a {
  display: block;
  padding: 8px 0px;
  margin: 8px 0;
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.taoyuan-roadmap-mobile-btns a:nth-child(1) {
  border-right: 2px solid var(--text-color-200);
}
.taoyuan-roadmap-mobile-btns a:hover {
  color: var(--secondary-color);
}
.taoyuan-roadmap-mobile-btns .mobile-btns-noactive {
  color: var(--text-color-200);
}
.taoyuan-roadmap-mobile-btns .mobile-btns-active {
  color: var(--secondary-color);
}

/*搭乘路線 區塊*/
@media (max-width: 834.98px) {
  .dis-none {
    display: none;
  }
}

.taoyuan-getting-title {
  font-size: 48px;
  font-weight: 500;
  color: var(--secondary-color);
  text-align: center;
  padding: 24px 0px;
  position: relative;
  margin: 24px 0;
}
@media (max-width: 834.98px) {
  .taoyuan-getting-title {
    width: 100%;
  }
}
@media (max-width: 440.98px) {
  .taoyuan-getting-title {
    font-size: 32px;
  }
}
@media (max-width: 360.98px) {
  .taoyuan-getting-title {
    font-size: 36px;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-getting-title {
    font-size: 28px;
  }
}
.taoyuan-getting-title::after {
  position: absolute;
  background: url(../image/taoyuan-route-title1.svg);
  content: "";
  width: 321px;
  height: 49px;
  aspect-ratio: 321/49;
  background-repeat: no-repeat;
  bottom: 10px;
  left: 51%;
  transform: translate(-50%, 0%);
  z-index: -1;
}
@media (max-width: 440.98px) {
  .taoyuan-getting-title::after {
    width: 250px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .taoyuan-getting-title::after {
    width: 225px;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-getting-title::after {
    width: 200px;
    left: 53%;
  }
}

.taoyuan-getting-there-pc {
  width: 1160px;
  height: 664px;
  aspect-ratio: 1160/664;
  -o-object-fit: contain;
     object-fit: contain;
  margin: 0 auto;
}
@media (max-width: 1300.98px) {
  .taoyuan-getting-there-pc {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 834.98px) {
  .taoyuan-getting-there-pc {
    display: none;
  }
}
.taoyuan-getting-there-pc img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/*搭乘路線- 平板尺寸 區塊*/
.taoyuan-getting-there-pad {
  display: none;
}
@media (max-width: 834.98px) {
  .taoyuan-getting-there-pad {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
}

/* 搭乘路線 平板 區塊*/
.taoyuan-getting-there-pad-cantiner {
  display: flex;
  gap: 4px;
}

.taoyuan-getting-there-pad-top {
  display: flex;
  justify-content: space-between;
  max-width: 80%;
  margin: 0 auto;
}
@media (max-width: 505.98px) {
  .taoyuan-getting-there-pad-top {
    max-width: 85%;
  }
}
@media (max-width: 390.98px) {
  .taoyuan-getting-there-pad-top {
    max-width: 96%;
  }
}

.taoyuan-getting-there-left {
  flex: 80%;
}

.taoyuan-getting-there-right {
  flex: 20%;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (max-width: 800.98px) {
  .taoyuan-getting-there-right {
    flex: 3%;
  }
}
@media (max-width: 660.98px) {
  .taoyuan-getting-there-right {
    flex: 8%;
  }
}
@media (max-width: 540.98px) {
  .taoyuan-getting-there-right {
    flex: 10%;
  }
}
@media (max-width: 505.98px) {
  .taoyuan-getting-there-right {
    flex: 15%;
  }
}
@media (max-width: 390.98px) {
  .taoyuan-getting-there-right {
    flex: 20%;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-getting-there-right {
    flex: 26%;
  }
}
.taoyuan-getting-there-right .position-store {
  width: 40px;
  height: 40px;
  aspect-ratio: 1/1;
}
@media (max-width: 430.98px) {
  .taoyuan-getting-there-right .position-store {
    width: 32px;
    height: auto;
  }
}
.taoyuan-getting-there-right .position-store img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-there-right .position-icon-1 {
  position: absolute;
  content: "";
  left: 50%;
  top: 20%;
  transform: translate(-50%, 0%);
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 20.5%;
  }
}
@media (max-width: 650.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 21.5%;
  }
}
@media (max-width: 600.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 22.5%;
  }
}
@media (max-width: 580.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 23.5%;
  }
}
@media (max-width: 540.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 24.5%;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 26%;
  }
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 24%;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 16%;
  }
}
@media (max-width: 430.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 15.5%;
  }
}
@media (max-width: 400.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 16%;
  }
}
@media (max-width: 380.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 17%;
  }
}
@media (max-width: 340.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 17.5%;
  }
}
@media (max-width: 320.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 18.5%;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 18%;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-getting-there-right .position-icon-1 {
    top: 19%;
  }
}
.taoyuan-getting-there-right .position-icon-2 {
  position: absolute;
  content: "";
  left: 50%;
  top: 39%;
  transform: translate(-50%, 0%);
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 40.5%;
  }
}
@media (max-width: 650.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 41.5%;
  }
}
@media (max-width: 600.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 42.5%;
  }
}
@media (max-width: 540.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 44%;
  }
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 43%;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 37.5%;
  }
}
@media (max-width: 430.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 38%;
  }
}
@media (max-width: 400.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 38.5%;
  }
}
@media (max-width: 380.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 39.2%;
  }
}
@media (max-width: 340.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 40%;
  }
}
@media (max-width: 320.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 40.5%;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 39.5%;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-getting-there-right .position-icon-2 {
    top: 41%;
  }
}
.taoyuan-getting-there-right .position-icon-3 {
  position: absolute;
  content: "";
  left: 50%;
  top: 58%;
  transform: translate(-50%, 0%);
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 61%;
  }
}
@media (max-width: 600.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 62%;
  }
}
@media (max-width: 540.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 62.5%;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 63%;
  }
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 62%;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 59%;
  }
}
@media (max-width: 430.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 59.5%;
  }
}
@media (max-width: 400.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 60%;
  }
}
@media (max-width: 340.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 61%;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 60%;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-getting-there-right .position-icon-3 {
    top: 61.5%;
  }
}
.taoyuan-getting-there-right .position-icon-4 {
  position: absolute;
  content: "";
  left: 50%;
  top: 80%;
  transform: translate(-50%, 0%);
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 82%;
  }
}
@media (max-width: 600.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 82.5%;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 81.5%;
  }
}
@media (max-width: 430.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 82.2%;
  }
}
@media (max-width: 380.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 82.5%;
  }
}
@media (max-width: 340.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 83.5%;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 84%;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-getting-there-right .position-icon-4 {
    top: 84.5%;
  }
}
.taoyuan-getting-there-right .taoyuan-getting-there-pad-line {
  width: 4px;
  height: 75%;
  background: url(../image/taxi-line.png);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top;
  margin: 0 auto;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-right .taoyuan-getting-there-pad-line {
    height: 76%;
  }
}
@media (max-width: 440.98px) {
  .taoyuan-getting-there-right .taoyuan-getting-there-pad-line {
    height: 77%;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-getting-there-right .taoyuan-getting-there-pad-line {
    height: 78%;
  }
}

.taoyuan-getting-there-government-r-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.taoyuan-getting-there-government-r-content .taoyuan-getting-there-government--exit {
  font-size: 21px;
  font-weight: 500;
  display: flex;
}
.taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-l-main {
  flex: 6;
  padding: 16px;
  box-sizing: border-box;
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-l-main {
    padding: 8px;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-l-main {
    flex: 100%;
    font-size: 18px;
  }
}
.taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-l-main img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-r-main {
  flex: 4;
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-r-main {
    flex: 100%;
    max-width: 95%;
    margin: 0 auto;
  }
}
.taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-r-main .taoyuan-getting-there-government-r-main-title {
  font-size: 21px;
  font-weight: 500;
  color: var(--guoguang-color);
  margin-bottom: 24px;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-r-main .taoyuan-getting-there-government-r-main-title {
    display: none;
  }
}
.taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-r-main .taoyuan-getting-there-government-r-wrap-text {
  font-size: 16px;
  font-weight: 500;
  display: block;
  color: var(--text-color);
  margin-bottom: 8px;
}
.taoyuan-getting-there-government-r-content .taoyuan-getting-there-government-r-main .taoyuan-getting-there-government-r-wrap-text:hover {
  color: var(--third-hover-color);
}

/* 上方捷運及巴士 &虛線 */
.taoyuan-getting-mrt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 120px;
}
.taoyuan-getting-mrt .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  margin: 0 auto 8px;
}
.taoyuan-getting-mrt .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-mrt .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane {
  font-size: 21px;
  color: var(--taoyuan-color);
  margin-bottom: 8px;
}
@media (max-width: 500.98px) {
  .taoyuan-getting-mrt .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane {
    font-size: 18px;
  }
}
.taoyuan-getting-mrt .taoyuan-getting-there-pad-line {
  display: block;
  background: url(../image/mrt-line-p.png);
  background-position: top;
  background-repeat: repeat-y;
  background-size: contain;
  width: 4px;
  height: 128px;
  margin: 0 auto;
}

.taoyuan-getting-bus {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 120px;
}
.taoyuan-getting-bus .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  margin: 0 auto 8px;
}
.taoyuan-getting-bus .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-bus .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane {
  font-size: 21px;
  color: var(--guoguang-color);
  margin-bottom: 8px;
}
@media (max-width: 500.98px) {
  .taoyuan-getting-bus .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane {
    font-size: 18px;
  }
}
.taoyuan-getting-bus .taoyuan-getting-there-pad-line {
  display: block;
  background: url(../image/bus-line.png);
  background-position: top;
  background-repeat: repeat-y;
  background-size: contain;
  width: 4px;
  height: 128px;
  margin: 0 auto;
}

.taoyuan-getting-there-pad-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-img {
  width: 32px;
  height: 32px;
  aspect-ratio: 1/1;
  margin: 0 auto 8px;
}
.taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane {
  font-size: 21px;
  color: var(--taxi-color);
  margin-bottom: 4px;
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane {
    font-size: 18px;
  }
}
.taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane-text {
  font-size: 18px;
  color: var(--taxi-color);
  margin-bottom: 8px;
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-pad-icon .taoyuan-getting-there-pad-airplane-text {
    font-size: 16px;
  }
}

/*捷運及巴士 中間內容*/
.taoyuan-getting-there-pad-middle {
  max-width: 88%;
  margin: -42px 0px 36px 56px;
  position: relative;
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-pad-middle {
    margin: -108px 0px 36px 56px;
  }
}
@media (max-width: 390.98px) {
  .taoyuan-getting-there-pad-middle {
    max-width: 100%;
    margin: -108px 0px 36px 5px;
  }
}
.taoyuan-getting-there-pad-middle::after {
  position: absolute;
  content: "";
  left: -15px;
  top: 58px;
  transform: translate(-50%, 0%);
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../image/taoyuan-line.png);
  width: 31px;
  height: 79px;
  z-index: -1;
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-pad-middle::after {
    top: 90px;
  }
}
@media (max-width: 390.98px) {
  .taoyuan-getting-there-pad-middle::after {
    left: 32px;
  }
}
@media (max-width: 390.98px) {
  .taoyuan-getting-there-pad-middle::after {
    left: 27px;
  }
}
.taoyuan-getting-there-pad-middle .pad-middle-text {
  font-size: 16px;
  color: var(--taxi-color);
  font-weight: 500;
  text-align: center;
  margin-right: 8px;
}
@media (max-width: 500.98px) {
  .taoyuan-getting-there-pad-middle .pad-middle-text {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 16px;
  }
}
.taoyuan-getting-there-pad-middle .pad-middle-subtitle-main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.taoyuan-getting-there-pad-middle .pad-middle-subtitle-main .pad-middle-subtitle-main-text {
  font-size: 18px;
  color: var(--white-color);
  background: var(--taipei-mrt-color);
  padding: 8px;
  box-sizing: border-box;
  border-radius: 8px;
  margin-right: 8px;
}
.taoyuan-getting-there-pad-middle .pad-middle-subtitle-main .pad-middle-subtitle-main-title {
  font-size: 18px;
  color: var(--taipei-mrt-color);
}
.taoyuan-getting-there-pad-middle .pad-middle-title {
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: var(--white-color);
  padding: 8px 0px;
  background: var(--taipei-mrt-color);
  border-radius: 8px;
}

/*路線 內容*/
.taoyuan-getting-there-pad-down {
  display: flex;
  max-width: 100%;
  margin: 0 auto;
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-title {
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 4px;
  color: var(--white-color);
  background: var(--taipei-mrt-color);
  writing-mode: vertical-lr;
  display: flex;
  align-items: center;
  padding: 24px 8px 0px;
  min-width: 40px;
  border-radius: 8px;
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-title {
    padding: 24px 4px 0px;
  }
}
@media (max-width: 340.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-title {
    font-size: 18px;
    min-width: 28px;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r {
  width: 86%;
  margin-left: 16px;
}
@media (max-width: 430.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r {
    margin-left: 8px;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 {
  width: 100%;
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box {
  display: none;
  width: 100%;
  position: relative;
  height: 40px;
  align-items: center;
  font-size: 21px;
  color: var(--guoguang-color);
  font-weight: 500;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box {
    display: flex;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box {
    font-size: 18px;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box::after {
  position: absolute;
  content: "";
  left: 7px;
  bottom: 15px;
  border-left: 2px dashed var(--taipei-mrt-color);
  border-bottom: 2px dashed var(--taipei-mrt-color);
  width: 80%;
  height: 16px;
}
@media (max-width: 650.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box::after {
    width: 75%;
  }
}
@media (max-width: 434.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box::after {
    width: 65%;
  }
}
@media (max-width: 400.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box::after {
    width: 55%;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box::after {
    width: 48%;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1 .pad-down-exit-mob-img-box .pad-down-exit-subtext {
  text-align: right;
  width: 100%;
  display: block;
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box {
  display: flex;
  width: 100%;
  position: relative;
  height: 40px;
  align-items: center;
  font-size: 21px;
  color: var(--guoguang-color);
  font-weight: 500;
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box {
    font-size: 18px;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box::after {
  position: absolute;
  content: "";
  left: 7px;
  bottom: 15px;
  border-left: 2px dashed var(--third-hover-color);
  border-bottom: 2px dashed var(--third-hover-color);
  width: 80%;
  height: 16px;
}
@media (max-width: 650.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box::after {
    width: 75%;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box::after {
    width: 70%;
  }
}
@media (max-width: 434.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box::after {
    width: 65%;
  }
}
@media (max-width: 400.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box::after {
    width: 55%;
  }
}
@media (max-width: 320.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box::after {
    width: 50%;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box::after {
    width: 42%;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box .pad-down-exit-subtext {
  text-align: right;
  width: 100%;
  display: block;
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .taoyuan-getting-there-pad-down-exit {
  color: var(--third-hover-color);
  flex: 398px;
}
@media (max-width: 800.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .taoyuan-getting-there-pad-down-exit {
    width: 53%;
  }
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .taoyuan-getting-there-pad-down-exit {
    width: 100%;
    flex: 0;
  }
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .taoyuan-getting-there-pad-down-exit {
    margin-bottom: 8px;
  }
}
@media (max-width: 505.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .taoyuan-getting-there-pad-down-exit {
    margin-bottom: 4px;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-link {
  color: var(--third-hover-color);
  margin-top: 4px;
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-link:hover {
  color: var(--taoyuan-color-2);
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-img {
  display: block;
  width: 40%;
  height: 4px;
  background: url(../image/mrt-line-b.png);
  background-repeat: repeat-x;
  background-size: contain;
}
@media (max-width: 800.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-img {
    width: 46%;
  }
}
@media (max-width: 768.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-img {
    width: 40%;
  }
}
@media (max-width: 670.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-img {
    width: 35%;
  }
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-img {
    display: none;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box {
  display: none;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r .taoyuan-getting-there-pad-down-r-1:nth-child(2) .pad-down-exit-mob-img-box {
    display: flex;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title {
  display: flex;
  width: 100%;
  align-items: center;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title {
    align-items: flex-start;
    flex-direction: column;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .taoyuan-getting-there-pad-down-exit {
  font-size: 21px;
  font-weight: 500;
  display: flex;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .taoyuan-getting-there-pad-down-exit {
    margin-bottom: 8px;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .taoyuan-getting-there-pad-down-exit {
    font-size: 18px;
    margin-bottom: 4px;
  }
}
@media (max-width: 461.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .taoyuan-getting-there-pad-down-exit {
    flex-wrap: wrap;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .taoyuan-getting-there-pad-down-exit {
    font-size: 16px;
  }
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .taoyuan-getting-there-pad-down-exit a {
  color: var(--taipei-mrt-color);
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .taoyuan-getting-there-pad-down-exit a:hover {
  color: var(--third-hover-color);
}
.taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .pad-down-exit-img {
  display: block;
  width: calc(100% - 210px);
  height: 4px;
  background: url(../image/mrt-line.png);
  background-repeat: repeat-x;
  background-size: contain;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down .taoyuan-getting-there-pad-down-r-title .pad-down-exit-img {
    display: none;
  }
}

.mrt-color {
  color: var(--taipei-mrt-color);
}

.taoyuan-getting-there-pad-down-r-content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-pad-down-r-content {
    margin-bottom: 24px;
  }
}
.taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-l-main {
  flex: 6;
  padding: 16px;
  box-sizing: border-box;
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-l-main {
    padding: 8px;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-l-main {
    flex: 100%;
  }
}
.taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-l-main img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main {
  flex: 4;
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main {
    flex: 100%;
    max-width: 90%;
    margin: 0 auto;
  }
}
.taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main .taoyuan-getting-there-pad-down-r-main-title {
  font-size: 21px;
  font-weight: 500;
  color: var(--guoguang-color);
  margin-bottom: 24px;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main .taoyuan-getting-there-pad-down-r-main-title {
    display: none;
  }
}
.taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main .taoyuan-getting-there-pad-down-r-wrap .taoyuan-getting-there-pad-down-r-wrap-text {
  font-size: 16px;
  font-weight: 500;
  display: block;
  color: var(--text-color);
  margin-bottom: 8px;
}
@media (max-width: 460.98px) {
  .taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main .taoyuan-getting-there-pad-down-r-wrap .taoyuan-getting-there-pad-down-r-wrap-text {
    font-size: 18px;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main .taoyuan-getting-there-pad-down-r-wrap .taoyuan-getting-there-pad-down-r-wrap-text {
    font-size: 16px;
  }
}
.taoyuan-getting-there-pad-down-r-content .taoyuan-getting-there-pad-down-r-main .taoyuan-getting-there-pad-down-r-wrap a:hover {
  color: var(--third-hover-color);
}

/*市政府站*/
.taoyuan-getting-there-government-content {
  display: flex;
  max-width: 100%;
  margin: 24px auto 0px;
  position: relative;
}
.taoyuan-getting-there-government-content::after {
  position: absolute;
  content: "";
  z-index: -1;
  width: 5px;
  height: 80px;
  background: var(--taipei-mrt-color);
  left: 28px;
  top: -37px;
  transform: translate(-50%, 0%);
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-government-content::after {
    left: 23px;
  }
}
.taoyuan-getting-there-government-content .taoyuan-getting-there-government-title {
  font-size: 21px;
  line-height: 28px;
  letter-spacing: 4px;
  color: var(--white-color);
  background: var(--taipei-mrt-color);
  writing-mode: vertical-lr;
  display: flex;
  align-items: center;
  padding: 24px 8px 0px;
  min-width: 40px;
  border-radius: 8px;
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-title {
    padding: 24px 4px 0px;
  }
}
.taoyuan-getting-there-government-content .taoyuan-getting-there-government-main {
  width: 86%;
  margin-left: 16px;
}
@media (max-width: 430.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main {
    margin-left: 8px;
  }
}
.taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .taoyuan-getting-there-government--title {
  font-size: 21px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .taoyuan-getting-there-government--title {
    align-items: flex-start;
    flex-direction: column;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .taoyuan-getting-there-government--title {
    font-size: 18px;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .taoyuan-getting-there-government--title {
    font-size: 16px;
    line-height: 24px;
  }
}
.taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box {
  display: none;
  width: 100%;
  position: relative;
  height: 40px;
  align-items: center;
  font-size: 21px;
  color: var(--guoguang-color);
  font-weight: 500;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box {
    display: flex;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box {
    font-size: 18px;
  }
}
.taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box::after {
  position: absolute;
  content: "";
  left: 7px;
  bottom: 15px;
  border-left: 2px dashed var(--taipei-mrt-color);
  border-bottom: 2px dashed var(--taipei-mrt-color);
  width: 75%;
  height: 16px;
}
@media (max-width: 520.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box::after {
    width: 70%;
  }
}
@media (max-width: 434.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box::after {
    width: 65%;
  }
}
@media (max-width: 400.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box::after {
    width: 55%;
  }
}
@media (max-width: 320.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box::after {
    width: 42%;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box::after {
    width: 30%;
  }
}
.taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-mob-img-box .pad-down-exit-subtext {
  text-align: right;
  width: 100%;
  display: block;
}
.taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-img {
  display: block;
  width: calc(100% - 210px);
  height: 4px;
  background: url(../image/mrt-line.png);
  background-repeat: repeat-x;
  background-size: contain;
}
@media (max-width: 700.98px) {
  .taoyuan-getting-there-government-content .taoyuan-getting-there-government-main .pad-down-exit-img {
    display: none;
  }
}

/*搭乘資訊 平板已下 --使用網站為 travel*/
.taoyuan-table-content {
  width: 100%;
}

/* TAB 按鈕 */
.taoyuan-tab {
  display: flex;
  gap: 24px;
  padding: 24px 0px;
  max-width: 80%;
  margin: 0 auto;
}
@media (max-width: 768.98px) {
  .taoyuan-tab {
    max-width: 90%;
  }
}
@media (max-width: 540.98px) {
  .taoyuan-tab {
    gap: 4%;
    padding: 0px;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-tab {
    gap: 2%;
  }
}

.taoyuan-tab .taoyuan-tab-btn {
  flex: 1;
  width: 33%;
  height: 33%;
  aspect-ratio: 1/1;
  background: var(--text-color-200);
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
  cursor: pointer;
  border-radius: 50%;
  transition: 0.3s ease;
  color: var(--white-color);
  font-size: 24px;
}
@media (max-width: 540.98px) {
  .taoyuan-tab .taoyuan-tab-btn {
    font-size: 21px;
    margin-top: 0px;
  }
}
@media (max-width: 480.98px) {
  .taoyuan-tab .taoyuan-tab-btn {
    font-size: 18px;
  }
}
@media (max-width: 480.98px) {
  .taoyuan-tab .taoyuan-tab-btn {
    font-size: 16px;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-tab .taoyuan-tab-btn {
    font-size: 14px;
  }
}
.taoyuan-tab .taoyuan-tab-btn.taoyuan-mrt.active {
  background: var(--taoyuan-mrt-color);
}
.taoyuan-tab .taoyuan-tab-btn.guoguang.active {
  background: var(--guoguang-color);
}
.taoyuan-tab .taoyuan-tab-btn.text-color.active {
  background: var(--taxi-color);
}
.taoyuan-tab .taoyuan-tab-btn span {
  display: block;
  width: 50%;
  height: 50%;
  aspect-ratio: 1/1;
  margin-top: 20%;
}
@media (max-width: 640.98px) {
  .taoyuan-tab .taoyuan-tab-btn span {
    margin-top: 10%;
  }
}
@media (max-width: 540.98px) {
  .taoyuan-tab .taoyuan-tab-btn span {
    width: 40%;
    height: auto;
  }
}
.taoyuan-tab .taoyuan-tab-btn span img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

/* 所有內容的外層 */
.taoyuan-table-content {
  position: relative;
  width: 100%;
}

/* 每個 TAB 的主區塊 */
.taoyuan-table-main {
  display: none; /* 預設不顯示 */
  opacity: 0; /* 透明 */
  transition: opacity 0.6s ease;
  align-items: center;
}

.taoyuan-table-main.active {
  display: flex; /* 顯示 */
  opacity: 1;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  gap: 8px;
  margin-top: 48px;
  padding: 8px 0px;
  border-top: 1px solid var(--text-color);
}

.taoyuan-table-main.fade-out {
  opacity: 0;
}

/*tab內容-設定*/
.taoyuan-table-title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.taoyuan-table-title .airplane-img {
  width: 65px;
  height: 65px;
  aspect-ratio: 1/1;
  margin-right: 16px;
}
.taoyuan-table-title .airplane-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-table-title .airplane-title {
  font-size: 21px;
  color: var(--text-color);
}

.taoyuam-table-wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
}

.taoyuam-table-list:nth-child(1) {
  width: 49%;
}
@media (max-width: 440.98px) {
  .taoyuam-table-list:nth-child(1) {
    width: 100%;
  }
}
.taoyuam-table-list:nth-child(2) {
  width: 49%;
}
@media (max-width: 440.98px) {
  .taoyuam-table-list:nth-child(2) {
    width: 100%;
  }
}
.taoyuam-table-list:nth-child(3), .taoyuam-table-list:nth-child(4) {
  width: 100%;
}
.taoyuam-table-list:nth-child(5) {
  width: 100%;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}
@media (max-width: 440.98px) {
  .taoyuam-table-list:nth-child(5) {
    flex-wrap: wrap;
    gap: 8px;
  }
}

.taoyuam-table-list-title {
  width: 100%;
  text-align: center;
  color: var(--white-color);
  font-size: 21px;
  padding: 8px 0px;
}
@media (max-width: 440.98px) {
  .taoyuam-table-list-title {
    font-size: 19px;
  }
}

.mrt-table-list-title {
  width: 100%;
  text-align: center;
  color: var(--white-color);
  font-size: 21px;
  padding: 8px 0px;
}
@media (max-width: 440.98px) {
  .mrt-table-list-title {
    width: 40px;
    font-size: 19px;
    writing-mode: vertical-lr;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.mrt-table-item:nth-child(1) {
  width: 50%;
}
@media (max-width: 440.98px) {
  .mrt-table-item:nth-child(1) {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 48px;
  }
}
.mrt-table-item:nth-child(2) {
  width: 50%;
}
@media (max-width: 440.98px) {
  .mrt-table-item:nth-child(2) {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}

.mrt-after-line {
  position: relative;
}
.mrt-after-line::after {
  display: none;
  position: absolute;
  width: 5px;
  height: 80px;
  content: "";
  background: var(--taipei-mrt-color);
  top: -80px;
  left: 50%;
  transform: translate(-50%, 0%);
}
@media (max-width: 440.98px) {
  .mrt-after-line::after {
    display: block;
  }
}

.taoyuam-mrt-color {
  background-color: var(--taoyuan-mrt-color);
}

.taipei-mrt-color {
  background-color: var(--taipei-mrt-color);
}

.taoyuam-table-item {
  padding: 24px 0px;
}

.taoyuam-table-item-text {
  text-align: center;
  font-size: 18px;
  line-height: 24px;
}
@media (max-width: 580.98px) {
  .taoyuam-table-item-text {
    font-size: 16px;
  }
}

.taoyuam-table-item-text {
  font-size: 18px;
  line-height: 24px;
}
@media (max-width: 580.98px) {
  .taoyuam-table-item-text {
    font-size: 16px;
  }
}

.mrt-fast {
  position: relative;
  margin-left: 108px;
}
@media (max-width: 768.98px) {
  .mrt-fast {
    margin-left: 88px;
  }
}
@media (max-width: 680.98px) {
  .mrt-fast {
    margin-left: 70px;
  }
}
@media (max-width: 620.98px) {
  .mrt-fast {
    margin-left: 55px;
  }
}
@media (max-width: 580.98px) {
  .mrt-fast {
    margin-left: 46px;
  }
}
@media (max-width: 540.98px) {
  .mrt-fast {
    margin-left: 34px;
  }
}
.mrt-fast::after {
  position: absolute;
  content: "";
  left: -40px;
  top: 12px;
  width: 35px;
  height: 4px;
  background: var(--taoyuan-mrt-color);
}
@media (max-width: 580.98px) {
  .mrt-fast::after {
    left: -20px;
    width: 20px;
  }
}
@media (max-width: 440.98px) {
  .mrt-fast::after {
    left: 43px;
    width: 35px;
  }
}
@media (max-width: 420.98px) {
  .mrt-fast::after {
    left: 30px;
  }
}
@media (max-width: 380.98px) {
  .mrt-fast::after {
    left: 16px;
  }
}
@media (max-width: 360.98px) {
  .mrt-fast::after {
    left: 0px;
  }
}
@media (max-width: 320.98px) {
  .mrt-fast::after {
    left: -12px;
  }
}
@media (max-width: 290.98px) {
  .mrt-fast::after {
    width: 20px;
  }
}

.mrt-normal {
  position: relative;
  margin-left: 108px;
}
@media (max-width: 768.98px) {
  .mrt-normal {
    margin-left: 88px;
  }
}
@media (max-width: 680.98px) {
  .mrt-normal {
    margin-left: 70px;
  }
}
@media (max-width: 620.98px) {
  .mrt-normal {
    margin-left: 55px;
  }
}
@media (max-width: 580.98px) {
  .mrt-normal {
    margin-left: 46px;
  }
}
@media (max-width: 540.98px) {
  .mrt-normal {
    margin-left: 34px;
  }
}
.mrt-normal::after {
  position: absolute;
  content: "";
  left: -40px;
  top: 12px;
  width: 35px;
  height: 4px;
  background: var(--mrt-normal);
}
@media (max-width: 580.98px) {
  .mrt-normal::after {
    left: -20px;
    width: 20px;
  }
}
@media (max-width: 440.98px) {
  .mrt-normal::after {
    left: 43px;
    width: 35px;
  }
}
@media (max-width: 420.98px) {
  .mrt-normal::after {
    left: 30px;
  }
}
@media (max-width: 380.98px) {
  .mrt-normal::after {
    left: 16px;
  }
}
@media (max-width: 360.98px) {
  .mrt-normal::after {
    left: 0px;
  }
}
@media (max-width: 320.98px) {
  .mrt-normal::after {
    left: -12px;
  }
}
@media (max-width: 290.98px) {
  .mrt-normal::after {
    width: 20px;
  }
}

.taoyuam-table-item-box:nth-child(1) {
  margin-bottom: 16px;
}

.taoyuam-table-spacing {
  padding: 24px 0px;
}

.taoyuam-table-item-img {
  width: 40%;
  height: auto;
  margin: 0 auto;
}
@media (max-width: 604.98px) {
  .taoyuam-table-item-img {
    width: 60%;
  }
}
@media (max-width: 440.98px) {
  .taoyuam-table-item-img {
    display: none;
  }
}
.taoyuam-table-item-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.taoyuam-table-item-mob-img {
  display: none;
}
@media (max-width: 440.98px) {
  .taoyuam-table-item-mob-img {
    display: block;
    width: 50%;
    height: auto;
    margin-left: 8px;
  }
}
.taoyuam-table-item-mob-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.taoyuam-route-item-content {
  padding: 16px 0px;
  min-height: 120px;
}
@media (max-width: 795.98px) {
  .taoyuam-route-item-content {
    min-height: 216px;
  }
}
@media (max-width: 605.98px) {
  .taoyuam-route-item-content {
    min-height: 232px;
  }
}
@media (max-width: 440.98px) {
  .taoyuam-route-item-content {
    min-height: 60px;
  }
}

.taoyuam-attractions-item-content {
  padding: 16px 0px;
  min-height: 120px;
}
@media (max-width: 795.98px) {
  .taoyuam-attractions-item-content {
    min-height: 120px;
  }
}
@media (max-width: 440.98px) {
  .taoyuam-attractions-item-content {
    min-height: 90px;
  }
}

.taoyuam-route-item-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-bottom: 8px;
}
@media (max-width: 795.98px) {
  .taoyuam-route-item-box {
    justify-content: space-around;
    margin-bottom: 16px;
  }
}
@media (max-width: 350.98px) {
  .taoyuam-route-item-box {
    justify-content: flex-start;
  }
}
.taoyuam-route-item-box .taoyuam-route-item-title {
  font-size: 21px;
  flex: 0 0 86px;
}
@media (max-width: 795.98px) {
  .taoyuam-route-item-box .taoyuam-route-item-title {
    flex: 0 0 80%;
    margin-bottom: 8px;
  }
}
@media (max-width: 440.98px) {
  .taoyuam-route-item-box .taoyuam-route-item-title {
    flex: 0 0 95%;
  }
}
.taoyuam-route-item-box .taoyuam-route-item-text {
  font-size: 16px;
  color: var(--route-color);
  line-height: 24px;
  margin-left: 16px;
  flex: 0 0 160px;
  position: relative;
}
@media (max-width: 605.98px) {
  .taoyuam-route-item-box .taoyuam-route-item-text {
    flex: 0 0 89px;
  }
}
@media (max-width: 440.98px) {
  .taoyuam-route-item-box .taoyuam-route-item-text {
    flex: 0 0 160px;
  }
}
.taoyuam-route-item-box .taoyuam-route-item-text::after {
  position: absolute;
  content: "";
  left: -12px;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 80%;
  background: var(--route-color);
}

.aoyuam-route-ite-line {
  display: flex;
  align-items: center;
}
.aoyuam-route-ite-line .aoyuam-route-ite-line-img {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  align-items: center;
}
.aoyuam-route-ite-line .aoyuam-route-ite-line-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.taoyuam-route-item-line {
  text-decoration: underline;
}

.attractions-mrt-color {
  background-color: var(--attractions-color);
}

.taoyuam-attractions-text {
  font-size: 16px;
  text-align: center;
  margin-bottom: 8px;
}

@media (max-width: 440.98px) {
  .taoyuam-route-table-container {
    width: 89%;
  }
}
@media (max-width: 410.98px) {
  .taoyuam-route-table-container {
    width: 85%;
  }
}
@media (max-width: 320.98px) {
  .taoyuam-route-table-container {
    width: 82%;
  }
}

.taxi-table-content {
  gap: 8px;
}
.taxi-table-content .taxi-table-title-img {
  width: 60%;
  height: auto;
}
.taxi-table-content .taxi-table-title-img img {
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.taxi-table-content:nth-child(1) {
  width: 50%;
  display: flex;
  align-items: center;
}
@media (max-width: 540.98px) {
  .taxi-table-content:nth-child(1) {
    width: 100%;
  }
}
.taxi-table-content .taxi-table-title-main {
  width: 39%;
}
.taxi-table-content .taxi-table-title-main .taxi-table-title {
  text-align: center;
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
}
.taxi-table-content .taxi-table-title-main .taxi-table-subtitle {
  text-align: center;
  font-size: 21px;
  color: var(--taxi-color);
  font-weight: 500;
}
.taxi-table-content:nth-child(2) {
  width: 48%;
  display: flex;
  flex-direction: column;
}
@media (max-width: 540.98px) {
  .taxi-table-content:nth-child(2) {
    width: 100%;
  }
}
.taxi-table-content .taxi-table-subtitle-text {
  display: block;
  padding: 8px 0px;
  color: var(--white-color);
  text-align: center;
  font-size: 21px;
}
.taxi-table-content .taxi-bgcolor {
  background-color: var(--taxi-color);
}
.taxi-table-content:nth-child(3) {
  width: 100%;
}
.taxi-table-content:nth-child(3) .taxi-table-wrap {
  width: 49%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 540.98px) {
  .taxi-table-content:nth-child(3) .taxi-table-wrap {
    width: 100%;
  }
}
.taxi-table-content:nth-child(3) .taxi-table-wrap:nth-child(1), .taxi-table-content:nth-child(3) .taxi-table-wrap:nth-child(2) {
  min-height: 120px;
}
.taxi-table-content:nth-child(3) .taxi-table-wrap .taxi-table-wrap-text {
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}
.taxi-table-content:nth-child(3) .taxi-table-wrap .taxi-table-wrap-text:nth-child(1) {
  margin-bottom: 8px;
}
.taxi-table-content .charging-text {
  color: var(--text-color);
}
.taxi-table-content .taxi-table-text-l {
  font-size: 24px;
  padding: 16px 0px;
  text-align: center;
}
.taxi-table-content .taxi-table-text-s {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 16px;
  text-align: center;
}
.taxi-table-content .taxi-table-text-m {
  font-size: 18px;
  margin-bottom: 16px;
  text-align: center;
}
.taxi-table-content .taxi-table-main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}
.taxi-table-content .taxi-table-main .taxi-table-subtitle-text {
  width: 100%;
}
.taxi-table-content .taxi-table-main .taxi-table-wrap-subtitle {
  width: 60%;
  margin: 16px auto 0px;
  padding: 8px 0px;
  text-align: center;
  font-size: 21px;
  line-height: 30px;
  color: var(--white-color);
}
@media (max-width: 540.98px) {
  .taxi-table-content .taxi-table-main .taxi-table-wrap-subtitle {
    width: 80%;
  }
}
@media (max-width: 360.98px) {
  .taxi-table-content .taxi-table-main .taxi-table-wrap-subtitle {
    width: 90%;
    font-size: 18px;
  }
}
.taxi-table-content .taxi-table-main .taxi-bgcolor-2 {
  background: var(--taxi-color-2);
}
.taxi-table-content .taxi-table-wrap {
  width: 48%;
}
@media (max-width: 580.98px) {
  .taxi-table-content .taxi-table-wrap {
    width: 100%;
  }
}
.taxi-table-content .taxi-table-wrap .taxi-table-wrap-title {
  width: 100%;
  font-size: 21px;
  text-align: center;
  padding: 24px 0px;
}

.table-domo-store {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 24px;
}
@media (max-width: 780.98px) {
  .table-domo-store {
    width: 85%;
  }
}
@media (max-width: 750.98px) {
  .table-domo-store {
    width: calc(100% - 32px);
  }
}
@media (max-width: 540.98px) {
  .table-domo-store {
    width: 85%;
  }
}
@media (max-width: 360.98px) {
  .table-domo-store {
    width: 95%;
  }
}
.table-domo-store .table-domo-store-ingfor {
  display: flex;
  padding: 8px 0px;
  align-items: center;
}
.table-domo-store .table-domo-store-ingfor .store-ingfor-icon {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
  flex: 0 0 24px;
  margin-right: 8px;
}
@media (max-width: 360.98px) {
  .table-domo-store .table-domo-store-ingfor .store-ingfor-icon {
    margin-right: 4px;
  }
}
.table-domo-store .table-domo-store-ingfor .store-ingfor-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.border-b {
  border-bottom: 1px solid var(--text-color);
}

@media (max-width: 540.98px) {
  .border-mob-b {
    border-bottom: 1px solid var(--text-color);
  }
}

.store-infor-tel {
  font-size: 18px;
  color: var(--text-color);
  padding: 4px 0px;
}

.store-infor-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--text-color);
  padding: 4px 0px;
}

/*松山-交通攻略*/
.matsuyama-roadmap-content {
  max-width: 98%;
  margin: 0 auto;
}

/*平面圖*/
.matsuyama-map-title {
  font-size: 48px;
  font-weight: 500;
  color: var(--secondary-color);
  text-align: center;
  padding: 24px 0px;
  position: relative;
  margin: 24px 0;
}
@media (max-width: 470.98px) {
  .matsuyama-map-title {
    font-size: 40px;
  }
}
@media (max-width: 440.98px) {
  .matsuyama-map-title {
    font-size: 32px;
  }
}
@media (max-width: 330.98px) {
  .matsuyama-map-title {
    font-size: 28px;
  }
}
.matsuyama-map-title::after {
  position: absolute;
  background: url(../image/matsuyama-route-title1.svg);
  content: "";
  width: 461px;
  height: 49px;
  aspect-ratio: 461/49;
  background-repeat: no-repeat;
  bottom: 10px;
  left: 51%;
  transform: translate(-50%, 0%);
  z-index: -1;
}
@media (max-width: 470.98px) {
  .matsuyama-map-title::after {
    width: 380px;
    height: auto;
    left: 53%;
  }
}
@media (max-width: 440.98px) {
  .matsuyama-map-title::after {
    width: 290px;
  }
}

.matsuyama-map-img {
  max-width: 1064px;
  max-height: 555px;
  aspect-ratio: 1064/555;
  margin: 0 auto;
}
.matsuyama-map-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.matsuyama-travel-by-title {
  font-size: 48px;
  font-weight: 500;
  color: var(--secondary-color);
  text-align: center;
  padding: 24px 0px;
  position: relative;
  margin: 24px 0;
}
@media (max-width: 440.98px) {
  .matsuyama-travel-by-title {
    font-size: 32px;
  }
}
@media (max-width: 330.98px) {
  .matsuyama-travel-by-title {
    font-size: 28px;
  }
}
.matsuyama-travel-by-title::after {
  position: absolute;
  background: url(../image/taoyuan-route-title1.svg);
  content: "";
  width: 321px;
  height: 49px;
  aspect-ratio: 321/49;
  background-repeat: no-repeat;
  bottom: 10px;
  left: 51%;
  transform: translate(-50%, 0%);
  z-index: -1;
}
@media (max-width: 440.98px) {
  .matsuyama-travel-by-title::after {
    width: 200px;
    height: auto;
  }
}

.matsuyama-travel-by-title-main {
  margin-bottom: 24px;
}

.matsuyama-travel-by-subtitle {
  font-size: 24px;
  color: var(--text-color);
  text-align: center;
  margin-bottom: 16px;
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-subtitle {
    font-size: 21px;
  }
}
@media (max-width: 571.98px) {
  .matsuyama-travel-by-subtitle {
    font-size: 28px;
    line-height: 42px;
  }
}
@media (max-width: 440.98px) {
  .matsuyama-travel-by-subtitle {
    font-size: 26px;
    line-height: 36px;
  }
}
@media (max-width: 340.98px) {
  .matsuyama-travel-by-subtitle {
    font-size: 21px;
    line-height: 28px;
  }
}
.matsuyama-travel-by-subtitle .matsuyama-transportation-link {
  font-size: 36px;
  font-weight: 500;
  color: var(--secondary-color);
  text-decoration: underline;
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-subtitle .matsuyama-transportation-link {
    font-size: 30px;
  }
}
@media (max-width: 571.98px) {
  .matsuyama-travel-by-subtitle .matsuyama-transportation-link {
    font-size: 36px;
  }
}
@media (max-width: 340.98px) {
  .matsuyama-travel-by-subtitle .matsuyama-transportation-link {
    font-size: 28px;
  }
}

/*連結設定*/
.mrt-my-link {
  scroll-margin-top: 120px; /* 調成你覺得剛好的距離 */
}
@media (max-width: 834.98px) {
  .mrt-my-link {
    scroll-margin-top: 80px;
  }
}

.taxi-my-link {
  scroll-margin-top: 160px; /* 調成你覺得剛好的距離 */
}
@media (max-width: 834.98px) {
  .taxi-my-link {
    scroll-margin-top: 120px;
  }
}

/*購票與搭乘說明*/
.matsuyama-travel-by-mrt-wrap {
  display: flex;
  flex-wrap: wrap;
  margin: 48px;
}
@media (max-width: 1320.98px) {
  .matsuyama-travel-by-mrt-wrap {
    margin: 48px 0px;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-wrap {
    align-items: center;
  }
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-wrap {
    margin: 48px 0px 0px;
  }
}
.matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-title {
  font-size: 21px;
  line-height: 32px;
  color: var(--text-color);
  font-weight: 500;
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-title {
    padding: 8px 0px;
  }
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-title {
    text-align: center;
    font-size: 24px;
  }
}
.matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-text {
  display: flex;
  align-items: center;
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-text {
    justify-content: center;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-text {
    padding: 8px 0px;
    align-items: start;
    font-size: 18px;
    line-height: 24px;
    font-weight: 500;
    color: var(--text-color);
  }
}
@media (max-width: 1000.98px) and (max-width: 768.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-text {
    font-size: 16px;
    line-height: 21px;
  }
}
@media (max-width: 1000.98px) and (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-text {
    font-size: 18px;
    line-height: 24px;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-area-text span {
    background-color: var(--text-color);
    width: 15px;
    height: 15px;
    margin-right: 4px;
    margin-top: 6px;
    display: inline-block;
    border-radius: 50%;
    box-sizing: border-box;
  }
}
.matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-pay-text {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  text-align: center;
  color: var(--text-color);
  padding: 8px 0px;
}
@media (max-width: 768.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-pay-text {
    font-size: 16px;
    line-height: 21px;
  }
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-wrap .matsuyama-travel-by-mrt-pay-text {
    font-size: 18px;
    line-height: 24px;
  }
}

.matsuyama-travel-by-mrt-area {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.matsuyama-travel-by-mrt-pay {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.matsuyama-travel-by-mrt-title-main {
  flex: 1;
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-mrt-title-main {
    flex: 40%;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-title-main {
    flex: 32%;
  }
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-title-main {
    flex: 100%;
    margin: 24px 0px;
  }
}

.matsuyama-travel-by-mrt-area {
  flex: 1;
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-mrt-area {
    flex: 43%;
  }
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-area {
    flex: 100%;
  }
}

.matsuyama-travel-by-mrt-pay {
  flex: 1;
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-mrt-pay {
    flex: 25%;
  }
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-mrt-pay {
    flex: 100%;
  }
}

.matsuyama-travel-by-mrt-title-img {
  width: 80%;
  margin: 0 auto 16px;
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-mrt-title-img {
    width: 60%;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-title-img {
    width: 70%;
  }
}
.matsuyama-travel-by-mrt-title-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.matsuyama-travel-by-mrt-title {
  width: 70%;
  margin: 0 auto;
  font-size: 28px;
  line-height: 32px;
  text-align: center;
  color: var(--white-color);
  background: var(--taoyuan-mrt-color);
  padding: 8px 16px;
  box-sizing: border-box;
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-mrt-title {
    font-size: 24px;
    width: 60%;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-title {
    font-size: 21px;
    width: 80%;
  }
}
@media (max-width: 768.98px) {
  .matsuyama-travel-by-mrt-title {
    width: 90%;
  }
}
@media (max-width: 640.98px) {
  .matsuyama-travel-by-mrt-title {
    font-size: 28px;
    width: calc(100% - 32px);
  }
}
@media (max-width: 340.98px) {
  .matsuyama-travel-by-mrt-title {
    font-size: 21px;
    width: calc(100% - 100px);
    padding: 4px 0px;
  }
}
@media (max-width: 300.98px) {
  .matsuyama-travel-by-mrt-title {
    width: calc(100% - 32px);
  }
}

.matsuyama-travel-by-mrt-map {
  width: 100%;
  max-width: 1090px;
  height: 812px;
  aspect-ratio: 1090/812;
  margin: 0 auto 48px;
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-mrt-map {
    width: 855px;
    height: auto;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-mrt-map {
    width: 100%;
    height: auto;
  }
}
@media (max-width: 834.98px) {
  .matsuyama-travel-by-mrt-map {
    display: none;
  }
}
.matsuyama-travel-by-mrt-map img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.matsuyama-travel-by-mrt-map-pad {
  max-width: 100%;
  padding: 24px 0px 48px;
  display: none;
}
@media (max-width: 834.98px) {
  .matsuyama-travel-by-mrt-map-pad {
    display: block;
  }
}
.matsuyama-travel-by-mrt-map-pad .matsuyama-travel-map-pad {
  width: 100%;
  position: relative;
}
.matsuyama-travel-by-mrt-map-pad .matsuyama-travel-map-pad-title {
  width: 80%;
  margin: 0 auto;
  padding: 8px;
  margin-bottom: 24px;
  text-align: center;
  font-size: 24px;
  color: var(--white-color);
  border-radius: 5px;
}
@media (max-width: 420.98px) {
  .matsuyama-travel-by-mrt-map-pad .matsuyama-travel-map-pad-title {
    font-size: 21px;
  }
}
@media (max-width: 380.98px) {
  .matsuyama-travel-by-mrt-map-pad .matsuyama-travel-map-pad-title {
    width: 95%;
  }
}
.matsuyama-travel-by-mrt-map-pad .matsuyama-travel-map-pad-title::after {
  position: absolute;
  content: "";
  left: 34px;
  top: 16px;
  width: 31px;
  height: 56px;
  aspect-ratio: 31/56;
  background: url(../image/matsuyam-line.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 550.98px) {
  .matsuyama-travel-by-mrt-map-pad .matsuyama-travel-map-pad-title::after {
    left: 18px;
    z-index: -1;
  }
}
.matsuyama-travel-by-mrt-map-pad .fuxing-bgcolor {
  background: var(--fuxing-color);
}

.matsuyama-travel-map-content {
  display: flex;
  max-width: 95%;
  margin: 0 auto;
}
@media (max-width: 550.98px) {
  .matsuyama-travel-map-content {
    max-width: 100%;
  }
}
.matsuyama-travel-map-content .matsuyama-traval-pad-title {
  font-size: 21px;
  letter-spacing: 10px;
  line-height: 28px;
  color: var(--white-color);
  border-radius: 5px;
  padding: 36px 8px 0px;
  writing-mode: vertical-lr;
  box-sizing: border-box;
  flex: 0 0 40px;
}
@media (max-width: 300.98px) {
  .matsuyama-travel-map-content .matsuyama-traval-pad-title {
    font-size: 18px;
    flex: 0 0 30px;
    padding: 36px 3px 0px;
  }
}

.matsuyama-travel-map-main {
  margin-top: 48px;
  width: 80%;
  margin: 24px auto 0px;
}

.matsuyama-travel-map-list {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 8px 0px;
}
.matsuyama-travel-map-list .matsuyama-travel-map-list-title {
  font-size: 21px;
  color: var(--text-color);
}
@media (max-width: 640.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-list-title {
    width: 100%;
    margin-bottom: 16px;
  }
}
@media (max-width: 290.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-list-title {
    margin-bottom: 0px;
  }
}
.matsuyama-travel-map-list .matsuyama-travel-map-item {
  display: flex;
  flex: 0 0 310px;
  justify-content: space-between;
}
@media (max-width: 290.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-item {
    flex-wrap: wrap;
  }
}
@media (max-width: 640.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-item {
    flex: 0 0 100%;
  }
}
@media (max-width: 460.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-item {
    align-items: center;
  }
}
.matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-text {
  font-size: 18px;
  color: var(--third-hover-color);
}
@media (max-width: 460.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-text {
    flex: 140px;
    line-height: 24px;
  }
}
@media (max-width: 290.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-text {
    flex: 100%;
    padding: 8px 0px;
  }
}
.matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-text span {
  background: var(--third-hover-color);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-line {
  display: flex;
}
@media (max-width: 460.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-line {
    flex: 100px;
    justify-content: flex-end;
  }
}
@media (max-width: 290.98px) {
  .matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-line {
    justify-content: start;
  }
}
.matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-line span {
  width: 23px;
  height: 23px;
  aspect-ratio: 1/1;
}
.matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-line span img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-line a {
  text-decoration: underline;
}
.matsuyama-travel-map-list .matsuyama-travel-map-item .matsuyama-travel-map-item-line a:hover {
  color: var(--third-hover-color);
}

.matsuyama-attractions-map-title {
  width: 100%;
  font-size: 21px;
  text-align: center;
  background: var(--attractions-color);
  padding: 8px 0px;
  color: var(--white-color);
}

.matsuyama-attractions-map-text {
  font-size: 18px;
  color: var(--text-color);
  padding: 8px 0px;
  text-align: center;
}

.matsuyama-traval-attractions-content {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
}
.matsuyama-traval-attractions-content .matsuyama-travel-map-main {
  width: 80%;
  margin: 0 auto;
  padding: 24px 0px;
}
@media (max-width: 360.98px) {
  .matsuyama-traval-attractions-content .matsuyama-travel-map-main {
    width: 95%;
  }
}
@media (max-width: 290.98px) {
  .matsuyama-traval-attractions-content .matsuyama-travel-map-main {
    width: 85%;
  }
}
.matsuyama-traval-attractions-content .matsuyama-attractions-map-content {
  width: 80%;
  margin: 0 auto;
}
.matsuyama-traval-attractions-content .matsuyama-attractions-map-content .matsuyama-attractions-map-main {
  padding: 24px 0px;
}
@media (max-width: 360.98px) {
  .matsuyama-traval-attractions-content .matsuyama-attractions-map-content {
    width: 95%;
  }
}

.mt-48 {
  margin-top: 48px;
}

.matsuyama-travel-map-content {
  display: flex;
}
.matsuyama-travel-map-content .zhongxiao-line {
  position: relative;
  padding-bottom: 48px;
}
.matsuyama-travel-map-content .zhongxiao-line::after {
  width: 5px;
  height: 50px;
  position: absolute;
  content: "";
  top: -14%;
  left: 50%;
  transform: translate(-50%, 0%);
  background: var(--taipei-mrt-color);
}
@media (max-width: 640.98px) {
  .matsuyama-travel-map-content .zhongxiao-line::after {
    top: -13%;
  }
}
@media (max-width: 290.98px) {
  .matsuyama-travel-map-content .zhongxiao-line::after {
    top: -12%;
  }
}

.zhongxiao-color {
  background: var(--taipei-mrt-color);
}

/*計程車*/
.matsuyama-travel-by-taxi {
  border: 1px solid var(--taxi-color);
}

.matsuyama-travel-by-taxi-box {
  display: flex;
  background: var(--taxi-color);
  align-items: center;
  padding: 8px 24px;
}
@media (max-width: 550.98px) {
  .matsuyama-travel-by-taxi-box {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 290.98px) {
  .matsuyama-travel-by-taxi-box {
    padding: 8px 0px;
  }
}
.matsuyama-travel-by-taxi-box .matsuyama-travel-by-taxi-title {
  font-size: 32px;
  color: var(--white-color);
}
@media (max-width: 360.98px) {
  .matsuyama-travel-by-taxi-box .matsuyama-travel-by-taxi-title {
    padding: 8px 0px;
  }
}
@media (max-width: 290.98px) {
  .matsuyama-travel-by-taxi-box .matsuyama-travel-by-taxi-title {
    width: 60%;
    text-align: center;
  }
}
.matsuyama-travel-by-taxi-box .matsuyama-travel-by-taxi-subtitle {
  font-size: 26px;
  color: var(--white-color);
}
@media (max-width: 360.98px) {
  .matsuyama-travel-by-taxi-box .matsuyama-travel-by-taxi-subtitle {
    padding: 8px 0px;
  }
}
.matsuyama-travel-by-taxi-box .matsuyama-travel-by-taxi-text {
  font-size: 18px;
  color: var(--white-color);
}
@media (max-width: 550.98px) {
  .matsuyama-travel-by-taxi-box .matsuyama-travel-by-taxi-text {
    width: 100%;
    padding: 8px 0px;
    text-align: center;
  }
}

.matsuyama-travel-by-taxi-title-main {
  display: flex;
  gap: 16px;
  max-width: 80%;
  margin: 0px auto;
  padding: 24px 0px;
  border-bottom: 1px solid var(--text-color);
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-taxi-title-main {
    max-width: 90%;
  }
}
@media (max-width: 550.98px) {
  .matsuyama-travel-by-taxi-title-main {
    flex-wrap: wrap;
  }
}
.matsuyama-travel-by-taxi-title-main .matsuyama-travel-by-taxi-title-img {
  width: 320px;
  height: 216px;
  aspect-ratio: 320/216;
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-taxi-title-main .matsuyama-travel-by-taxi-title-img {
    width: 280px;
    height: auto;
  }
}
@media (max-width: 550.98px) {
  .matsuyama-travel-by-taxi-title-main .matsuyama-travel-by-taxi-title-img {
    width: 100%;
    height: auto;
  }
}
.matsuyama-travel-by-taxi-title-main .matsuyama-travel-by-taxi-title-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.matsuyama-travel-by-taxi-title-box {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 16px 0px;
  color: var(--text-color);
}
@media (max-width: 550.98px) {
  .matsuyama-travel-by-taxi-title-box {
    width: 90%;
    margin: 0 auto;
  }
}
.matsuyama-travel-by-taxi-title-box .matsuyama-travel-taxi-title {
  font-size: 21px;
  line-height: 28px;
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-taxi-title-box .matsuyama-travel-taxi-title {
    font-size: 18px;
    line-height: 24px;
  }
}
.matsuyama-travel-by-taxi-title-box .matsuyama-travel-taxi-subtitle {
  font-size: 24px;
  padding: 8px 0px;
}
.matsuyama-travel-by-taxi-title-box .matsuyama-travel-taxi-text {
  font-size: 16px;
  line-height: 21px;
  padding: 8px 0px;
  font-weight: 500;
  color: var(--remark-red);
}

.matsuyama-travel-by-store-content {
  display: flex;
  flex-wrap: wrap;
  max-width: 80%;
  margin: 48px auto;
}
@media (max-width: 1320.98px) {
  .matsuyama-travel-by-store-content {
    max-width: 90%;
  }
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-store-content {
    max-width: 95%;
  }
}
@media (max-width: 1000.98px) {
  .matsuyama-travel-by-store-content {
    margin: 24px auto;
  }
}
@media (max-width: 320.98px) {
  .matsuyama-travel-by-store-content {
    max-width: 85%;
  }
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store {
  flex: 0 0 50%;
  padding: 24px 0px;
  box-sizing: border-box;
  border: 1px solid var(--text-color-400);
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-store-content .matsuyama-travel-by-store {
    flex: 0 0 100%;
    border-right: 0px;
  }
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(1), .matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(2) {
  border-top: 0px;
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(3), .matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(4) {
  border-bottom: 0px;
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(1), .matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(3) {
  border-left: 0px;
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(2), .matsuyama-travel-by-store-content .matsuyama-travel-by-store:nth-child(4) {
  border-right: 0px;
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-title {
  font-size: 21px;
  color: var(--text-color);
  text-align: center;
  margin-bottom: 16px;
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store {
  display: flex;
  gap: 16px;
  max-width: 65%;
  margin: 0 auto 8px;
}
@media (max-width: 1200.98px) {
  .matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store {
    max-width: 80%;
  }
}
@media (max-width: 768.98px) {
  .matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store {
    gap: 4px;
    max-width: 90%;
  }
}
@media (max-width: 655.98px) {
  .matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store {
    max-width: 310px;
  }
}
@media (max-width: 380.98px) {
  .matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store {
    max-width: 264px;
  }
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store .matsuyama-travel-taxi-img {
  width: 23px;
  height: 23px;
  aspect-ratio: 1/1;
}
@media (max-width: 320.98px) {
  .matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store .matsuyama-travel-taxi-img {
    margin-top: 3px;
  }
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store .matsuyama-travel-taxi-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.matsuyama-travel-by-store-content .matsuyama-travel-by-store .matsuyama-travel-taxi-store .matsuyama-travel-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--text-color);
}

/*高雄*/
.kaohsiung-map-content-title {
  font-size: 48px;
  font-weight: 500;
  color: var(--secondary-color);
  text-align: center;
  padding: 24px 0px;
  position: relative;
  margin: 24px 0;
}
@media (max-width: 550.98px) {
  .kaohsiung-map-content-title {
    font-size: 40px;
  }
}
@media (max-width: 440.98px) {
  .kaohsiung-map-content-title {
    font-size: 32px;
  }
}
@media (max-width: 330.98px) {
  .kaohsiung-map-content-title {
    font-size: 28px;
  }
}
.kaohsiung-map-content-title::after {
  position: absolute;
  background: url(../image/kaohsiung-route-title1.svg);
  content: "";
  width: 546px;
  height: 49px;
  aspect-ratio: 546/49;
  background-repeat: no-repeat;
  bottom: 10px;
  left: 51%;
  transform: translate(-50%, 0%);
  z-index: -1;
}
@media (max-width: 550.98px) {
  .kaohsiung-map-content-title::after {
    width: 400px;
    height: auto;
  }
}
@media (max-width: 440.98px) {
  .kaohsiung-map-content-title::after {
    width: 320px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .kaohsiung-map-content-title::after {
    width: 310px;
  }
}
@media (max-width: 330.98px) {
  .kaohsiung-map-content-title::after {
    width: 258px;
    bottom: 18px;
  }
}

.kaohsiung-map-content-img {
  max-width: 870px;
  width: 897px;
  height: 380px;
  aspect-ratio: 870/380;
  margin: 0 auto;
}
@media (max-width: 1200.98px) {
  .kaohsiung-map-content-img {
    width: 90%;
    height: auto;
  }
}
.kaohsiung-map-content-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.kaohsiung-hitchhike-title {
  font-size: 48px;
  font-weight: 500;
  color: var(--secondary-color);
  text-align: center;
  padding: 24px 0px;
  position: relative;
  margin: 24px 0;
}
@media (max-width: 834.98px) {
  .kaohsiung-hitchhike-title {
    width: 100%;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-title {
    font-size: 40px;
  }
}
@media (max-width: 440.98px) {
  .kaohsiung-hitchhike-title {
    font-size: 32px;
  }
}
@media (max-width: 330.98px) {
  .kaohsiung-hitchhike-title {
    font-size: 28px;
  }
}
.kaohsiung-hitchhike-title::after {
  position: absolute;
  background: url(../image/taoyuan-route-title1.svg);
  content: "";
  width: 321px;
  height: 49px;
  aspect-ratio: 321/49;
  background-repeat: no-repeat;
  bottom: 10px;
  left: 51%;
  transform: translate(-50%, 0%);
  z-index: -1;
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-title::after {
    width: 250px;
    height: auto;
  }
}
@media (max-width: 440.98px) {
  .kaohsiung-hitchhike-title::after {
    width: 250px;
    height: auto;
  }
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-title::after {
    width: 225px;
  }
}

.kaohsiung-hitchhike-main {
  display: flex;
  gap: 8px;
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-main {
    flex-wrap: wrap;
  }
}

.kaohsiung-hitchhike-mrt-content {
  flex: 1;
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-mrt-content {
    flex: 0 0 100%;
  }
}
.kaohsiung-hitchhike-mrt-content .kaohsiung-hitchhike-mrt-main {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 1000.98px) {
  .kaohsiung-hitchhike-mrt-content .kaohsiung-hitchhike-mrt-main {
    width: 90%;
  }
}

.kaohsiung-hitchhike-mrt-title-main .kaohsiung-hitchhike-mrt-title-img {
  width: 249px;
  height: 51px;
  aspect-ratio: 249/51;
  margin: 8px 0px;
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-mrt-title-main .kaohsiung-hitchhike-mrt-title-img {
    width: 200px;
    height: auto;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-mrt-title-main .kaohsiung-hitchhike-mrt-title-img {
    width: 249px;
    height: auto;
    margin: 8px auto;
  }
}
.kaohsiung-hitchhike-mrt-title-main .kaohsiung-hitchhike-mrt-title-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-mrt-title-main .kaohsiung-hitchhike-mrt-subtitle {
  font-size: 28px;
  font-weight: 500;
  color: var(--white-color);
  text-align: center;
  padding: 8px 0px;
  max-width: 50%;
  margin: 0 auto;
  background: var(--taoyuan-mrt-color);
}
@media (max-width: 1200.98px) {
  .kaohsiung-hitchhike-mrt-title-main .kaohsiung-hitchhike-mrt-subtitle {
    max-width: 80%;
  }
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-mrt-title-main .kaohsiung-hitchhike-mrt-subtitle {
    font-size: 21px;
  }
}

.kaohsiung-hitchhike-mrt-text-main {
  margin-bottom: 24px;
}
.kaohsiung-hitchhike-mrt-text-main .kaohsiung-hitchhike-mrt-text {
  font-size: 18px;
  line-height: 24px;
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-mrt-text-main .kaohsiung-hitchhike-mrt-text {
    font-size: 16px;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-mrt-text-main .kaohsiung-hitchhike-mrt-text {
    font-size: 18px;
  }
}

.kaohsiung-hitchhike-mrt-title {
  font-size: 21px;
  line-height: 32px;
  margin-bottom: 8px;
  min-height: 64px;
  color: var(--text-color);
}
@media (max-width: 834.98px) {
  .kaohsiung-hitchhike-mrt-title {
    font-size: 18px;
    line-height: 28px;
  }
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-mrt-title {
    min-height: 74px;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-mrt-title {
    font-weight: 500;
    font-size: 21px;
    line-height: 32px;
    min-height: 32px;
  }
}

.kaohsiung-hitchhike-mrt-subtext {
  font-size: 16px;
  line-height: 24px;
  color: var(--remark-red);
}
@media (max-width: 834.98px) {
  .kaohsiung-hitchhike-mrt-subtext {
    line-height: 18px;
  }
}

/*計程車*/
.kaohsiung-hitchhike-taxi-content {
  flex: 1;
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-content {
    border: 1px solid var(--taxi-color);
  }
}
.kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-main {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 1000.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-main {
    width: 90%;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-main {
    width: 100%;
  }
}
.kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main {
  display: flex;
  align-items: center;
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main {
    margin: 8px 0px;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main {
    justify-content: center;
    background: var(--taxi-color);
    margin: 0px 0px 8px;
  }
}
.kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title-img {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: var(--taxi-color);
  padding: 16px;
  box-sizing: border-box;
  margin-right: 16px;
}
@media (max-width: 1000.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title-img {
    margin-right: 8px;
    width: 55px;
    height: 55px;
    padding: 8px;
  }
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title-img {
    width: 40px;
    height: 40px;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title-img {
    width: 65px;
    height: 65px;
    background: transparent;
    padding: 8px;
    margin-right: 8px;
  }
}
.kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title {
  font-size: 36px;
  font-weight: 700;
  display: flex;
  align-items: center;
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title {
    font-size: 30px;
    align-items: flex-end;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title {
    font-size: 36px;
    color: var(--white-color);
  }
}
.kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title .kaohsiung-hitchhike-taxi-text {
  font-size: 26px;
  font-weight: 500;
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title .kaohsiung-hitchhike-taxi-text {
    font-size: 21px;
  }
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title .kaohsiung-hitchhike-taxi-text {
    font-size: 16px;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-title-content .kaohsiung-hitchhike-taxi-title-main .kaohsiung-hitchhike-taxi-title .kaohsiung-hitchhike-taxi-text {
    font-size: 26px;
  }
}
.kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-subtitle {
  font-size: 28px;
  font-weight: 500;
  color: var(--white-color);
  text-align: center;
  padding: 8px 0px;
  max-width: 50%;
  margin: 0 auto;
  background: var(--taoyuan-mrt-color);
}
@media (max-width: 1200.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-subtitle {
    max-width: 80%;
  }
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-subtitle {
    font-size: 21px;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-content .kaohsiung-hitchhike-taxi-subtitle {
    display: none;
  }
}

.kaohsiung-hitchhike-wrap {
  padding: 48px 0px 24px;
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-wrap {
    padding: 24px 0px;
  }
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-wrap {
    padding: 24px 0px 0px;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-wrap .kaohsiung-border-bt {
    border-bottom: 1px solid var(--text-color);
  }
}
.kaohsiung-hitchhike-wrap .kaohsiung-hitchhike-taxi-content-1 {
  width: 90%;
  margin: 0 auto 16px;
  padding: 0px 0px 16px;
}
.kaohsiung-hitchhike-wrap .kaohsiung-hitchhike-taxi-content-1 .kaohsiung-hitchhike-taxi-img {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}
.kaohsiung-hitchhike-wrap .kaohsiung-hitchhike-taxi-content-1 .kaohsiung-hitchhike-taxi-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-wrap .kaohsiung-hitchhike-mrt-img {
  width: 100%;
  height: auto;
  margin-bottom: 16px;
}
.kaohsiung-hitchhike-wrap .kaohsiung-hitchhike-mrt-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-wrap .kaohsiung-hitchhike-mrt-text {
  font-size: 18px;
  color: var(--text-color);
  font-weight: 500;
}

/*路線圖-手機板*/
.kaohsiung-hitchhike-roadmap-content {
  display: none;
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-roadmap-content {
    display: block;
  }
}

.kaohsiung-hitchhike-roadmap-img {
  width: 100%;
}
.kaohsiung-hitchhike-roadmap-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.kaohsiung-hitchhike-roadmap-link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 16px;
}
.kaohsiung-hitchhike-roadmap-link .kaohsiung-hitchhike-roadmap-link-img {
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
}
@media (max-width: 440.98px) {
  .kaohsiung-hitchhike-roadmap-link .kaohsiung-hitchhike-roadmap-link-img {
    width: 48px;
    height: auto;
  }
}
.kaohsiung-hitchhike-roadmap-link .kaohsiung-hitchhike-roadmap-link-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-roadmap-link .kaohsiung-hitchhike-roadmap-link-text {
  font-size: 36px;
  color: var(--transportation-color);
  text-decoration: underline;
  padding: 8px 0px;
}
@media (max-width: 440.98px) {
  .kaohsiung-hitchhike-roadmap-link .kaohsiung-hitchhike-roadmap-link-text {
    font-size: 28px;
  }
}

/*景點-手機板*/
.kaohsiung-hitchhike-attractions-content .kaohsiung-hitchhike-attractions-title {
  font-size: 36px;
  color: var(--white-color);
  background: var(--attractions-color);
  padding: 8px 0px;
  text-align: center;
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-attractions-content .kaohsiung-hitchhike-attractions-title {
    font-size: 28px;
  }
}
.kaohsiung-hitchhike-attractions-content .kaohsiung-hitchhike-attractions-main {
  padding: 24px;
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-attractions-content .kaohsiung-hitchhike-attractions-main {
    padding: 16px 8px;
  }
}
.kaohsiung-hitchhike-attractions-content .kaohsiung-hitchhike-attractions-main .kaohsiung-hitchhike-attractions-text {
  margin-bottom: 8px;
  font-size: 26px;
  color: var(--text-color);
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-attractions-content .kaohsiung-hitchhike-attractions-main .kaohsiung-hitchhike-attractions-text {
    font-size: 21px;
  }
}

/*手機 店資訊*/
.kaohsiung-hitchhike-taxi-adr {
  padding: 16px;
  display: none;
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-taxi-adr {
    display: block;
  }
}
.kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-title {
  font-size: 32px;
  text-align: center;
  color: var(--text-color);
  margin-bottom: 24px;
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-title {
    font-size: 28px;
    margin-bottom: 8px;
  }
}
.kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main {
  display: flex;
  align-items: center;
  padding: 8px;
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 502.98px) {
  .kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main {
    width: 100%;
    align-items: start;
    justify-content: center;
    padding: 8px 0px;
  }
}
.kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main .kaohsiung-hitchhike-taxi-adr-img {
  width: 24px;
  height: 24px;
  margin-right: 4px;
  aspect-ratio: 1/1;
}
@media (max-width: 455.98px) {
  .kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main .kaohsiung-hitchhike-taxi-adr-img {
    margin-top: 6px;
  }
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main .kaohsiung-hitchhike-taxi-adr-img {
    margin-top: 4px;
  }
}
.kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main .kaohsiung-hitchhike-taxi-adr-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main .kaohsiung-hitchhike-taxi-adr-text {
  font-size: 21px;
  line-height: 30px;
  color: var(--text-color);
  width: 80%;
}
@media (max-width: 360.98px) {
  .kaohsiung-hitchhike-taxi-adr .kaohsiung-hitchhike-taxi-adr-main .kaohsiung-hitchhike-taxi-adr-text {
    font-size: 18px;
    line-height: 24px;
  }
}

.kaohsiung-hitchhike-roadmap-pc {
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 1000.98px) {
  .kaohsiung-hitchhike-roadmap-pc {
    width: 90%;
  }
}
@media (max-width: 768.98px) {
  .kaohsiung-hitchhike-roadmap-pc {
    width: 100%;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-roadmap-pc {
    display: none;
  }
}
.kaohsiung-hitchhike-roadmap-pc img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.kaohsiung-hitchhike-store-content {
  width: 70%;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--taxi-color);
}
@media (max-width: 1200.98px) {
  .kaohsiung-hitchhike-store-content {
    width: 90%;
  }
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-store-content {
    align-items: center;
  }
}
@media (max-width: 550.98px) {
  .kaohsiung-hitchhike-store-content {
    display: none;
  }
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main {
  flex: 1;
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-title {
  font-size: 30px;
  color: var(--text-color);
  font-weight: 500;
  margin-bottom: 36px;
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-title {
    margin: 16px 0px;
  }
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-item {
  display: flex;
  margin-bottom: 8px;
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-item {
    width: 90%;
    margin: 0 auto;
  }
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-item:nth-child(3) {
  margin-bottom: 48px;
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-item .kaohsiung-hitchhike-store-infor-icon {
  width: 23px;
  height: 23px;
  margin-right: 8px;
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-item .kaohsiung-hitchhike-store-infor-icon {
    margin-top: 4px;
    margin-right: 4px;
  }
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-item .kaohsiung-hitchhike-store-infor-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-img {
  width: 90%;
  margin: 0 auto;
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-store-infor-list .kaohsiung-hitchhike-store-infor-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--text-color);
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-attractions-title {
  font-size: 21px;
  color: var(--white-color);
  background: var(--attractions-color);
  padding: 8px 0px;
  text-align: center;
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-attractions-main {
  padding: 24px;
}
@media (max-width: 650.98px) {
  .kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-attractions-main {
    padding: 16px;
  }
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-attractions-main .kaohsiung-hitchhike-attractions-text {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text-color);
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-attractions-warp {
  width: 80%; /* 佔畫面一半 */
  aspect-ratio: 4/3; /* 4:3 比例 */
  overflow: hidden; /* 避免 iframe 超出 */
  margin: 0 auto;
}
.kaohsiung-hitchhike-store-content .kaohsiung-hitchhike-store-main .kaohsiung-hitchhike-attractions-warp iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/*分區*/
.taoyuan-roadmap-partition {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 0px;
  gap: 8px;
}
.taoyuan-roadmap-partition a {
  font-size: 24px;
  color: var(--grey-color-100);
}
.taoyuan-roadmap-partition a:hover {
  color: var(--third-hover-color);
}
.taoyuan-roadmap-partition .partition-active {
  color: var(--secondary-color);
}

.taoyuan-roadmap-content .partition-getting-title {
  font-size: 48px;
  color: var(--secondary-color);
  text-align: center;
  margin: 36px 0px -33px;
  font-weight: 500;
}

@media (max-width: 834.98px) {
  .top-btn {
    position: fixed;
    right: 8px;
    bottom: 90px;
    width: 60px;
    height: 60px;
    content: "";
    color: var(--white-color);
    background: var(--float-light-color);
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0px;
    font-size: 36px;
    border-radius: 50%;
    z-index: 99;
  }
}
@media (max-width: 540.98px) {
  .top-btn {
    width: 44px;
    height: 44px;
  }
}
.top-btn:hover {
  background: var(--float-dark-bg);
}

html {
  scroll-padding-top: 80px;
}

#important-top-scroll {
  scroll-margin-top: 80px; /* header高度 */
}

/*桃園區分店*/
.taoyuan-district-content {
  max-width: 870px;
  margin: 0 auto;
  display: flex;
}

.taoyuan-district-l-content {
  position: relative;
  width: 4px;
  height: 415px;
  background: url(../image/taxi-line.png);
  background-repeat: repeat-y;
  background-size: contain;
  background-position: top;
  margin: 16px auto 0px;
}
@media (max-width: 768.98px) {
  .taoyuan-district-l-content {
    height: 440px;
  }
}
@media (max-width: 680.98px) {
  .taoyuan-district-l-content {
    height: 800px;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-district-l-content {
    height: 778px;
  }
}
@media (max-width: 440.98px) {
  .taoyuan-district-l-content {
    height: 720px;
  }
}
@media (max-width: 310.98px) {
  .taoyuan-district-l-content {
    margin: 26px auto 0px;
    height: 720px;
  }
}
@media (max-width: 310.98px) {
  .taoyuan-district-l-content {
    height: 730px;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-district-l-content {
    height: 746px;
  }
}

.taoyuan-district-icon {
  width: 60px;
  height: 60px;
  aspect-ratio: 1/1;
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0%);
}
@media (max-width: 410.98px) {
  .taoyuan-district-icon {
    width: 50px;
    height: auto;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-district-icon {
    width: 40px;
    height: auto;
  }
}
.taoyuan-district-icon:nth-child(2) {
  top: 413px;
}
@media (max-width: 900.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 396px;
  }
}
@media (max-width: 768.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 440px;
  }
}
@media (max-width: 680.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 765px;
  }
}
@media (max-width: 630.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 740px;
  }
}
@media (max-width: 590.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 765px;
  }
}
@media (max-width: 520.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 752px;
  }
}
@media (max-width: 460.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 737px;
  }
}
@media (max-width: 440.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 712px;
  }
}
@media (max-width: 410.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 700px;
  }
}
@media (max-width: 380.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 721px;
  }
}
@media (max-width: 356.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 712px;
  }
}
@media (max-width: 330.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 692px;
  }
}
@media (max-width: 310.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 680px;
  }
}
@media (max-width: 300.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 708px;
  }
}
@media (max-width: 299.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 733px;
  }
}
@media (max-width: 280.98px) {
  .taoyuan-district-icon:nth-child(2) {
    top: 746px;
  }
}
.taoyuan-district-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.taoyuan-district-r-content {
  width: calc(100% - 60px);
}
@media (max-width: 356.98px) {
  .taoyuan-district-r-content {
    width: calc(100% - 36px);
  }
}
.taoyuan-district-r-content {
  /*計程車*/
}
.taoyuan-district-r-content .taoyuan-district-taxi-content {
  width: 95%;
  margin: 0 auto 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 16px 0px;
  border-bottom: 1px solid var(--text-color);
}
@media (max-width: 768.98px) {
  .taoyuan-district-r-content .taoyuan-district-taxi-content {
    align-items: flex-start;
  }
}

.taoyuan-district-txai-title-main {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--taxi-color);
  box-sizing: border-box;
}
@media (max-width: 590.98px) {
  .taoyuan-district-txai-title-main {
    flex-wrap: wrap;
  }
}
.taoyuan-district-txai-title-main .taoyuan-district-txai-title-box {
  display: flex;
  align-items: center;
}
@media (max-width: 590.98px) {
  .taoyuan-district-txai-title-main .taoyuan-district-txai-title-box {
    width: 80%;
  }
}
@media (max-width: 345.98px) {
  .taoyuan-district-txai-title-main .taoyuan-district-txai-title-box {
    width: 100%;
  }
}
.taoyuan-district-txai-title-main .taoyuan-district-txai-title-box .taoyuan-district-txai-title {
  font-size: 30px;
  color: var(--taxi-color);
  line-height: 32px;
}
.taoyuan-district-txai-title-main .taoyuan-district-txai-title-box .taoyuan-district-txai-mark {
  font-size: 18px;
  color: var(--taxi-color);
}
.taoyuan-district-txai-title-main .taoyuan-district-txai-title-box .taoyuan-district-txai-img {
  width: 35px;
  height: 35px;
  margin: 0px 8px;
}
.taoyuan-district-txai-title-main .taoyuan-district-txai-title-box .taoyuan-district-txai-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.taoyuan-district-txai-title-main .taoyuan-district-txai-subtitle {
  color: var(--white-color);
  font-size: 18px;
  line-height: 24px;
  background: var(--taxi-color-2);
  padding: 8px;
}
@media (max-width: 380.98px) {
  .taoyuan-district-txai-title-main .taoyuan-district-txai-subtitle {
    width: 100%;
  }
}
@media (max-width: 356.98px) {
  .taoyuan-district-txai-title-main .taoyuan-district-txai-subtitle {
    font-size: 16px;
    text-align: center;
    padding: 4px 0px;
  }
}

.taoyuan-district-taxi-img {
  display: flex;
  width: 45%;
  height: auto;
}
.taoyuan-district-taxi-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (max-width: 900.98px) {
  .taoyuan-district-taxi-img {
    width: 42%;
  }
}
@media (max-width: 768.98px) {
  .taoyuan-district-taxi-img {
    width: 45%;
  }
}
@media (max-width: 680.98px) {
  .taoyuan-district-taxi-img {
    width: 90%;
    margin: 0 auto 16px;
  }
}

.taoyuan-district-infor-content {
  margin-bottom: 16px;
}

@media (max-width: 900.98px) {
  .taoyuan-district-txai-wrap {
    width: 55%;
  }
}
@media (max-width: 768.98px) {
  .taoyuan-district-txai-wrap {
    width: 50%;
  }
}
@media (max-width: 680.98px) {
  .taoyuan-district-txai-wrap {
    width: 90%;
    margin: 0 auto;
  }
}
.taoyuan-district-txai-wrap .taoyuan-district-title {
  font-size: 21px;
  line-height: 28px;
  color: var(--taxi-color);
  margin-bottom: 16px;
}
@media (max-width: 480.98px) {
  .taoyuan-district-txai-wrap .taoyuan-district-title {
    margin-bottom: 0px;
  }
}
.taoyuan-district-txai-wrap .taoyuan-district-infor-main {
  padding: 16px 0px;
}
.taoyuan-district-txai-wrap .taoyuan-district-infor-main .taoyuan-district-text {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  color: var(--text-color);
}
.taoyuan-district-txai-wrap .taoyuan-district-infor-main .taoyuan-district-mark {
  font-size: 16px;
  color: var(--taxi-color-2);
  line-height: 24px;
}
.taoyuan-district-txai-wrap .taoyuan-district-subtext {
  font-size: 18px;
  line-height: 24px;
  color: var(--text-color);
  width: calc(100% - 100px);
}
@media (max-width: 380.98px) {
  .taoyuan-district-txai-wrap .taoyuan-district-subtext {
    width: 100%;
  }
}
.taoyuan-district-txai-wrap .taoyuan-district-take-main {
  display: flex;
  align-items: center;
  padding: 4px 0px;
}
@media (max-width: 380.98px) {
  .taoyuan-district-txai-wrap .taoyuan-district-take-main {
    flex-wrap: wrap;
  }
}
.taoyuan-district-txai-wrap .taoyuan-district-take-text {
  font-size: 21px;
  line-height: 28px;
  color: var(--text-color);
  font-weight: 500;
  width: 100px;
}
@media (max-width: 380.98px) {
  .taoyuan-district-txai-wrap .taoyuan-district-take-text {
    width: 100%;
  }
}

.district-taoyuan-flagship-title {
  font-size: 30px;
  color: var(--taxi-color-2);
  margin-bottom: 24px;
  display: block;
  width: 95%;
}

/*桃園旗艦店*/
.district-taoyuan-flagship-content {
  display: flex;
  max-width: 95%;
  margin: 0 auto;
  justify-content: space-around;
}
@media (max-width: 680.98px) {
  .district-taoyuan-flagship-content {
    flex-wrap: wrap;
  }
}

.district-taoyuan-flagship-main {
  margin-bottom: 24px;
  display: block;
  width: 100%;
}
.district-taoyuan-flagship-main .district-taoyuan-flagship-box {
  display: flex;
  align-items: center;
  padding: 4px 0px;
  width: 90%;
  margin: 0 auto;
}
@media (max-width: 900.98px) {
  .district-taoyuan-flagship-main .district-taoyuan-flagship-box {
    align-items: start;
  }
}
.district-taoyuan-flagship-main .district-taoyuan-flagship-box .district-taoyuan-flagship-icon {
  width: 23px;
  height: 23px;
  aspect-ratio: 1/1;
  margin-right: 8px;
}
@media (max-width: 900.98px) {
  .district-taoyuan-flagship-main .district-taoyuan-flagship-box .district-taoyuan-flagship-icon {
    margin-top: 4px;
  }
}
.district-taoyuan-flagship-main .district-taoyuan-flagship-box .district-taoyuan-flagship-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.district-taoyuan-flagship-main .district-taoyuan-flagship-box .district-taoyuan-flagship-text {
  font-size: 18px;
  line-height: 24px;
  color: var(--text-color);
}
.district-taoyuan-flagship-main .district-taoyuan-flagship-main-img {
  width: 350px;
  height: 239px;
  aspect-ratio: 350/239;
  margin: 0 auto;
}
@media (max-width: 900.98px) {
  .district-taoyuan-flagship-main .district-taoyuan-flagship-main-img {
    width: 95%;
    height: auto;
  }
}
.district-taoyuan-flagship-main .district-taoyuan-flagship-main-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.district-taoyuan-flagship-map {
  width: 350px;
  height: 239px;
  aspect-ratio: 350/239;
}
@media (max-width: 900.98px) {
  .district-taoyuan-flagship-map {
    width: 95%;
    height: auto;
  }
}
@media (max-width: 680.98px) {
  .district-taoyuan-flagship-map {
    margin-bottom: 24px;
  }
}
.district-taoyuan-flagship-map iframe {
  width: 100%;
  height: 100%;
}

.district-taoyuan-flagship-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media (max-width: 680.98px) {
  .district-taoyuan-flagship-wrap {
    flex: none;
    width: 100%;
  }
}

.district-taoyuan-flagship-attractions {
  width: 100%;
}

.flagship-attractions-title {
  padding: 8px 0px;
  display: block;
  width: 100%;
  background: var(--taoyuan-color);
  color: var(--white-color);
  text-align: center;
  margin-bottom: 8px;
}

.flagship-attractions-text {
  font-size: 18px;
  line-height: 24px;
  padding: 4px 0px;
  text-align: center;
  display: block;
  width: 100%;
  color: var(--text-color);
}/*# sourceMappingURL=3d-common.css.map */