/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */@layer properties;@layer theme, base, components, utilities;@layer theme{#tailwind,#tailwind :host{--font-sans:"Noto Sans TC",微軟正黑體,"Microsoft JhengHei",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% 0.245 262.881);--color-gray-50:oklch(98.5% 0.002 247.839);--color-gray-700:oklch(37.3% 0.034 259.733);--color-black:#000;--color-white:#fff;--spacing:0.25rem;--container-2xl:42rem;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-xl:1.25rem;--text-xl--line-height:1.4;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--text-3xl:1.875rem;--text-3xl--line-height:1.2;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--radius-lg:0.5rem;--ease-out:cubic-bezier(0,0,0.2,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--font-number:Arial,sans-serif}}@layer base{#tailwind *,#tailwind ::backdrop,#tailwind ::file-selector-button,#tailwind :after,#tailwind :before{border:0 solid;box-sizing:border-box;margin:0;padding:0}#tailwind,#tailwind :host{line-height:1.5;-webkit-text-size-adjust:100%;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);tab-size:4;-webkit-tap-highlight-color:transparent}#tailwind hr{border-top-width:1px;color:inherit;height:0}#tailwind abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}#tailwind h1,#tailwind h2,#tailwind h3,#tailwind h4,#tailwind h5,#tailwind h6{font-size:inherit;font-weight:inherit}#tailwind a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}#tailwind b,#tailwind strong{font-weight:bolder}#tailwind code,#tailwind kbd,#tailwind pre,#tailwind samp{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}#tailwind small{font-size:80%}#tailwind sub,#tailwind sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}#tailwind sub{bottom:-.25em}#tailwind sup{top:-.5em}#tailwind table{border-collapse:collapse;border-color:inherit;text-indent:0}#tailwind :-moz-focusring{outline:auto}#tailwind progress{vertical-align:baseline}#tailwind summary{display:list-item}#tailwind menu,#tailwind ol,#tailwind ul{list-style:none}#tailwind audio,#tailwind canvas,#tailwind embed,#tailwind iframe,#tailwind img,#tailwind object,#tailwind svg,#tailwind video{display:block;vertical-align:middle}#tailwind img,#tailwind video{height:auto;max-width:100%}#tailwind ::file-selector-button,#tailwind button,#tailwind input,#tailwind optgroup,#tailwind select,#tailwind textarea{background-color:transparent;border-radius:0;color:inherit;font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}#tailwind :where(select:is([multiple],[size])) optgroup{font-weight:bolder}#tailwind :where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}#tailwind ::file-selector-button{margin-inline-end:4px}#tailwind ::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){#tailwind ::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}#tailwind textarea{resize:vertical}#tailwind ::-webkit-search-decoration{-webkit-appearance:none}#tailwind ::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}#tailwind ::-webkit-datetime-edit{display:inline-flex}#tailwind ::-webkit-datetime-edit-fields-wrapper{padding:0}#tailwind ::-webkit-datetime-edit,#tailwind ::-webkit-datetime-edit-day-field,#tailwind ::-webkit-datetime-edit-hour-field,#tailwind ::-webkit-datetime-edit-meridiem-field,#tailwind ::-webkit-datetime-edit-millisecond-field,#tailwind ::-webkit-datetime-edit-minute-field,#tailwind ::-webkit-datetime-edit-month-field,#tailwind ::-webkit-datetime-edit-second-field,#tailwind ::-webkit-datetime-edit-year-field{padding-block:0}#tailwind :-moz-ui-invalid{box-shadow:none}#tailwind ::file-selector-button,#tailwind button,#tailwind input:where([type=button],[type=reset],[type=submit]){appearance:button}#tailwind ::-webkit-inner-spin-button,#tailwind ::-webkit-outer-spin-button{height:auto}#tailwind [hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{#tailwind .pointer-events-none{pointer-events:none!important}#tailwind .relative{position:relative!important}#tailwind .z-10{z-index:10!important}#tailwind .mx-auto{margin-inline:auto!important}#tailwind .mt-4{margin-top:calc(var(--spacing)*4)!important}#tailwind .mt-8{margin-top:calc(var(--spacing)*8)!important}#tailwind .mb-2{margin-bottom:calc(var(--spacing)*2)!important}#tailwind .mb-4{margin-bottom:calc(var(--spacing)*4)!important}#tailwind .mb-8{margin-bottom:calc(var(--spacing)*8)!important}#tailwind .mb-12{margin-bottom:calc(var(--spacing)*12)!important}#tailwind .ml-2{margin-left:calc(var(--spacing)*2)!important}#tailwind .block{display:block!important}#tailwind .flex{display:flex!important}#tailwind .grid{display:grid!important}#tailwind .hidden{display:none!important}#tailwind .inline{display:inline!important}#tailwind .inline-block{display:inline-block!important}#tailwind .inline-flex{display:inline-flex!important}#tailwind .h-5{height:calc(var(--spacing)*5)!important}#tailwind .h-16{height:calc(var(--spacing)*16)!important}#tailwind .min-h-\[80px\]{min-height:80px!important}#tailwind .min-h-\[212px\]{min-height:212px!important}#tailwind .min-h-\[360px\]{min-height:360px!important}#tailwind .min-h-screen{min-height:100vh!important}#tailwind .w-1\/2{width:50%!important}#tailwind .w-5{width:calc(var(--spacing)*5)!important}#tailwind .w-16{width:calc(var(--spacing)*16)!important}#tailwind .w-\[60px\]{width:60px!important}#tailwind .w-full{width:100%!important}#tailwind .max-w-2xl{max-width:var(--container-2xl)!important}#tailwind .max-w-\[630px\]{max-width:630px!important}#tailwind .max-w-\[1200px\]{max-width:1200px!important}#tailwind .shrink-0{flex-shrink:0!important}#tailwind .transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)!important}#tailwind .cursor-pointer{cursor:pointer!important}#tailwind .list-disc{list-style-type:disc!important}#tailwind .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))!important}#tailwind .flex-col{flex-direction:column!important}#tailwind .flex-row{flex-direction:row!important}#tailwind .flex-wrap{flex-wrap:wrap!important}#tailwind .items-center{align-items:center!important}#tailwind .justify-between{justify-content:space-between!important}#tailwind .justify-center{justify-content:center!important}#tailwind .justify-start{justify-content:flex-start!important}#tailwind .gap-2{gap:calc(var(--spacing)*2)!important}#tailwind .gap-4{gap:calc(var(--spacing)*4)!important}#tailwind .gap-6{gap:calc(var(--spacing)*6)!important}#tailwind .gap-8{gap:calc(var(--spacing)*8)!important}#tailwind .overflow-hidden{overflow:hidden!important}#tailwind .rounded-full{border-radius:calc(infinity*1px)!important}#tailwind .rounded-lg{border-radius:var(--radius-lg)!important}#tailwind .border{border-style:var(--tw-border-style)!important;border-width:1px!important}#tailwind .border-t-4{border-top-style:var(--tw-border-style)!important;border-top-width:4px!important}#tailwind .border-r-2{border-right-style:var(--tw-border-style)!important;border-right-width:2px!important}#tailwind .border-l-2{border-left-style:var(--tw-border-style)!important;border-left-width:2px!important}#tailwind .border-\[var\(--color-red\)\]{border-color:var(--color-red)!important}#tailwind .border-current{border-color:currentcolor!important}#tailwind .bg-\[var\(--color-black\)\]{background-color:var(--color-black)!important}#tailwind .bg-\[var\(--color-red\)\]{background-color:var(--color-red)!important}#tailwind .bg-\[var\(--color-white\)\]{background-color:var(--color-white)!important}#tailwind .bg-gray-50{background-color:var(--color-gray-50)!important}#tailwind .bg-cover{background-size:cover!important}#tailwind .bg-position-\[center_bottom\]{background-position:bottom!important}#tailwind .bg-no-repeat{background-repeat:no-repeat!important}#tailwind .p-2{padding:calc(var(--spacing)*2)!important}#tailwind .p-4{padding:calc(var(--spacing)*4)!important}#tailwind .p-8{padding:calc(var(--spacing)*8)!important}#tailwind .p-12{padding:calc(var(--spacing)*12)!important}#tailwind .px-4{padding-inline:calc(var(--spacing)*4)!important}#tailwind .px-5{padding-inline:calc(var(--spacing)*5)!important}#tailwind .px-6{padding-inline:calc(var(--spacing)*6)!important}#tailwind .px-8{padding-inline:calc(var(--spacing)*8)!important}#tailwind .py-2{padding-block:calc(var(--spacing)*2)!important}#tailwind .py-3{padding-block:calc(var(--spacing)*3)!important}#tailwind .py-4{padding-block:calc(var(--spacing)*4)!important}#tailwind .py-8{padding-block:calc(var(--spacing)*8)!important}#tailwind .py-12{padding-block:calc(var(--spacing)*12)!important}#tailwind .pt-8{padding-top:calc(var(--spacing)*8)!important}#tailwind .pt-16{padding-top:calc(var(--spacing)*16)!important}#tailwind .pb-4{padding-bottom:calc(var(--spacing)*4)!important}#tailwind .pl-6{padding-left:calc(var(--spacing)*6)!important}#tailwind .text-center{text-align:center!important}#tailwind .text-left{text-align:left!important}#tailwind .font-number{font-family:var(--font-number)!important}#tailwind .text-2xl{font-size:var(--text-2xl)!important;line-height:var(--tw-leading,var(--text-2xl--line-height))!important}#tailwind .text-3xl{font-size:var(--text-3xl)!important;line-height:var(--tw-leading,var(--text-3xl--line-height))!important}#tailwind .text-lg{font-size:var(--text-lg)!important;line-height:var(--tw-leading,var(--text-lg--line-height))!important}#tailwind .text-sm{font-size:var(--text-sm)!important;line-height:var(--tw-leading,var(--text-sm--line-height))!important}#tailwind .text-xl{font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}#tailwind .font-bold{--tw-font-weight:var(--font-weight-bold)!important;font-weight:var(--font-weight-bold)!important}#tailwind .font-extrabold{--tw-font-weight:var(--font-weight-extrabold)!important;font-weight:var(--font-weight-extrabold)!important}#tailwind .font-semibold{--tw-font-weight:var(--font-weight-semibold)!important;font-weight:var(--font-weight-semibold)!important}#tailwind .text-\[var\(--color-black\)\]{color:var(--color-black)!important}#tailwind .text-\[var\(--color-gray\)\]{color:var(--color-gray)!important}#tailwind .text-\[var\(--color-red\)\]{color:var(--color-red)!important}#tailwind .text-\[var\(--color-white\)\]{color:var(--color-white)!important}#tailwind .text-blue-600{color:var(--color-blue-600)!important}#tailwind .text-gray-700{color:var(--color-gray-700)!important}#tailwind .italic{font-style:italic!important}#tailwind .shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,rgba(0,0,0,.1)),0 1px 2px -1px var(--tw-shadow-color,rgba(0,0,0,.1))!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}#tailwind .transition{transition-duration:var(--tw-duration,var(--default-transition-duration))!important;transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,visibility,content-visibility,overlay,pointer-events!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important}#tailwind .transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration))!important;transition-property:all!important;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))!important}#tailwind .duration-300{--tw-duration:300ms!important;transition-duration:.3s!important}#tailwind .ease-in-out{--tw-ease:var(--ease-in-out)!important;transition-timing-function:var(--ease-in-out)!important}#tailwind .ease-out{--tw-ease:var(--ease-out)!important;transition-timing-function:var(--ease-out)!important}#tailwind .hover\:bg-\[var\(--color-red\)\]{#tailwind &:hover{@media (hover:hover){background-color:var(--color-red)!important}}}#tailwind .hover\:text-\[var\(--color-white\)\]{#tailwind &:hover{@media (hover:hover){color:var(--color-white)!important}}}#tailwind .focus\:ring-2{#tailwind &:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)!important;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)!important}}#tailwind .focus\:ring-\[var\(--color-red\)\]{#tailwind &:focus{--tw-ring-color:var(--color-red)!important}}#tailwind .focus\:outline-none{#tailwind &:focus{--tw-outline-style:none!important;outline-style:none!important}}#tailwind .md\:order-1{@media (width >= 48rem){order:1!important}}#tailwind .md\:order-2{@media (width >= 48rem){order:2!important}}#tailwind .md\:order-3{@media (width >= 48rem){order:3!important}}#tailwind .md\:mb-0{@media (width >= 48rem){margin-bottom:calc(var(--spacing)*0)!important}}#tailwind .md\:block{@media (width >= 48rem){display:block!important}}#tailwind .md\:flex{@media (width >= 48rem){display:flex!important}}#tailwind .md\:hidden{@media (width >= 48rem){display:none!important}}#tailwind .md\:inline{@media (width >= 48rem){display:inline!important}}#tailwind .md\:w-1\/2{@media (width >= 48rem){width:50%!important}}#tailwind .md\:w-1\/3{@media (width >= 48rem){width:33.33333%!important}}#tailwind .md\:w-1\/6{@media (width >= 48rem){width:16.66667%!important}}#tailwind .md\:w-2\/3{@media (width >= 48rem){width:66.66667%!important}}#tailwind .md\:grid-cols-3{@media (width >= 48rem){grid-template-columns:repeat(3,minmax(0,1fr))!important}}#tailwind .md\:flex-col{@media (width >= 48rem){flex-direction:column!important}}#tailwind .md\:flex-row{@media (width >= 48rem){flex-direction:row!important}}#tailwind .md\:justify-start{@media (width >= 48rem){justify-content:flex-start!important}}#tailwind .md\:gap-12{@media (width >= 48rem){gap:calc(var(--spacing)*12)!important}}#tailwind .md\:pt-8{@media (width >= 48rem){padding-top:calc(var(--spacing)*8)!important}}#tailwind .md\:pl-8{@media (width >= 48rem){padding-left:calc(var(--spacing)*8)!important}}#tailwind .md\:text-center{@media (width >= 48rem){text-align:center!important}}#tailwind .md\:text-left{@media (width >= 48rem){text-align:left!important}}#tailwind .md\:text-3xl{@media (width >= 48rem){font-size:var(--text-3xl)!important;line-height:var(--tw-leading,var(--text-3xl--line-height))!important}}#tailwind .md\:text-xl{@media (width >= 48rem){font-size:var(--text-xl)!important;line-height:var(--tw-leading,var(--text-xl--line-height))!important}}#tailwind .lg\:mt-16{@media (width >= 64rem){margin-top:calc(var(--spacing)*16)!important}}#tailwind .lg\:mb-16{@media (width >= 64rem){margin-bottom:calc(var(--spacing)*16)!important}}#tailwind .lg\:flex{@media (width >= 64rem){display:flex!important}}#tailwind .lg\:inline-block{@media (width >= 64rem){display:inline-block!important}}#tailwind .lg\:px-12{@media (width >= 64rem){padding-inline:calc(var(--spacing)*12)!important}}#tailwind .lg\:pt-12{@media (width >= 64rem){padding-top:calc(var(--spacing)*12)!important}}#tailwind .lg\:text-left{@media (width >= 64rem){text-align:left!important}}#tailwind .lg\:text-right{@media (width >= 64rem){text-align:right!important}}#tailwind .md\:\[\&\>li\]\:w-3\/8{@media (width >= 48rem){#tailwind &>li{width:37.5%!important}}}}@layer utilities{#tailwind #tailwind [class*=text-]:hover,#tailwind #tailwind [class*=text-]:link,#tailwind #tailwind [class*=text-]:visited{color:inherit}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){#tailwind *,#tailwind ::backdrop,#tailwind :after,#tailwind :before{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-duration:initial;--tw-ease:initial}}}
#tailwind img{
  display: inline;
}
#tailwind{
  --default-red: #fb484a;
      --color-red: #b40505;
      --color-white: #fefffe;
      --color-black: #292e52;
      --color-gray: #9a9a9a;

    /* 自訂 H1 的 clamp 字體大小 */
    .h1 {
      font-size: clamp(40px, 6vw, 58px);
      line-height: 1.5;
    }
    .h2 {
      font-size: clamp(30px, 5vw, 50px);
      line-height: 1.5;
    }
    h1.h1{
      text-shadow:0px 0px 5px var(--default-red),0px 0px 10px var(--default-red),0px 0px 15px var(--default-red);
    }
    /* Swiper 容器高度，確保內容可見 */
    .swiper {
      width: 100%;
    }
    /* 自訂圖示的預設顏色 */
    .page-indicator .icon,
    .page-indicator .text {
      color: var(--color-gray);
      transition: color 0.3s ease-in-out;
    }
    /* 自訂圖示活躍狀態的顏色 */
    .page-indicator.active .icon,
    .page-indicator.active .text {
      color: var(--color-red);
    }

    /* Custom Swiper pagination styles for the second Swiper */
    .swiper-pagination-bullets-primary .swiper-pagination-bullet {
      background: var(--color-black);
      opacity: 1;
    }

    .swiper-pagination-bullets-primary .swiper-pagination-bullet-active {
      background: var(--color-red);
    }

    .swiper-button-next-custom,
    .swiper-button-prev-custom {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--color-white);
      border: 1px solid var(--color-red);
      border-radius: 50%;
      cursor: pointer;
      z-index: 10;
      transition: background-color 0.3s ease, color 0.3s ease;
    }

    .swiper-button-next-custom {
      right: 10px;
    }

    .swiper-button-prev-custom {
      left: 10px;
    }

    .swiper-button-next-custom svg,
    .swiper-button-prev-custom svg {
      width: 24px;
      height: 24px;
      stroke: var(--color-red);
    }

    .swiper-button-prev-custom svg {
      transform: rotate(180deg);
    }

    .swiper-button-next-custom:hover,
    .swiper-button-prev-custom:hover {
      background-color: var(--color-red);
    }

    .swiper-button-next-custom:hover svg,
    .swiper-button-prev-custom:hover svg {
      stroke: var(--color-white);
    }

    /* Disabled state for custom navigation buttons */
    .swiper-button-next-custom.swiper-button-disabled,
    .swiper-button-prev-custom.swiper-button-disabled {
      opacity: 1;
      cursor: not-allowed;
    }
    .circle-img-wrapper {
      aspect-ratio: 1 / 1;
    }
    .circle-dash{
      aspect-ratio: 1 / 1;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 192.4 192.4'><circle cx='96.2' cy='96.2' r='96' fill='none' stroke='%23b40505' stroke-dasharray='2 4' stroke-miterlimit='10' stroke-width='.4'/></svg>");
      background-size: cover;
      border-radius: 50%;
      overflow: hidden;
      animation: spin 16s linear infinite;
      & img{
        animation: reverse-spin 16s linear infinite;
      }
    }
    
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
    }

    @keyframes reverse-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
#compass {
  .content-layout {
    display: block;
  }

  .swiper-container {
    display: block;
  }

  .swiper-wrapper {
    display: flex;
  }

  .swiper-slide {
    display: block;
    flex-shrink: 0;
    width: 100%;
  }

  /* swiper-slide 在手機版不需要 grid-area */
  .swiper-slide[data-area] {
    grid-area: unset;
  }

  .image-block {
    margin-bottom: 1rem;
  }


  @media (min-width: 64rem) {
    .content-layout {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "text1 image text2"
        ". image ."
        ". image text3";
      gap: 1rem;
    }

    .swiper-container {
      all: unset;
      display: contents;
      --top-position: 60px;
      --line-width: 150px;
      --line-height: var(--top-position);
    }
    .swiper-wrapper {
      display: contents;
    }
    .swiper-slide::before {
      content: '';
      position: absolute;
      top: var(--top-position);
      width: 10px;
      height: 10px;
      background-color: var(--color-red);
      border-radius: 50%;
      z-index: 10;
    }
    .swiper-slide::after {
      content: '';
      position: absolute;
      top: var(--top-position);
      width: var(--line-width);
      height: var(--line-height);
      z-index: 5;
    }

    .swiper-slide[data-area="text1"] {
      grid-area: text1;
      &::before {
        left: 100%;
        transform: translate(-50%, -50%);
      }
      &::after {
        left: 100%;
        border-top: 2px solid var(--color-red);
        border-right: 2px solid var(--color-red);
        border-top-right-radius: 4px;
      }
    }

    .swiper-slide[data-area="text2"] {
      grid-area: text2;
      &::before {
        left: 0;
        transform: translate(-50%, -50%);
      }
      &::after {
        left: calc(var(--line-width) * -1);
        border-top: 2px solid var(--color-red);
        border-left: 2px solid var(--color-red);
        border-top-left-radius: 4px;
      }
    }

    .swiper-slide[data-area="text3"] {
      grid-area: text3;
      &::before {
        left: 0;
        transform: translate(-50%, -50%);
      }
      &::after {
        left: calc(var(--line-width) * -1);
        top: 0;
        border-bottom: 2px solid var(--color-red);
        border-left: 2px solid var(--color-red);
        border-bottom-left-radius: 4px;
      }
    }

    .image-block {
      grid-area: image;
      margin-bottom: 0;
    }
  }
}
#double-efficiency {
  .swiper-button-next-custom,
  .swiper-button-prev-custom{
    top: 30%;
  }
}