/* screen phone-v3 */
@media screen and (max-width: 767px) {
  .web-screen {
    display: none;
  }

  .web-v3-all-breakpoints {
    /* background-color: var(--basic-colorwhite); */
    display: flex;
    min-height: 4478px;
    width: 100%;
  }

  .web-v3-all-breakpoints .content-1 {
    align-items: flex-start;
    /* background-color: var(--basic-colorwhite); */
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100vw;
  }

  .web-v3-all-breakpoints .main-content-1 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .header {
    -webkit-backdrop-filter: blur(4px) brightness(100%);
    align-items: flex-start;
    backdrop-filter: blur(4px) brightness(100%);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 2px -1px #0000001a, 0px 1px 3px #0000001a;
    display: flex;
    flex-direction: column;
    height: 55.96px;
    padding: 15.98px 15.98px 0px 15.98px;
    position: fixed;
    width: 100vw;
    left: 0;
    top: 0;
    z-index: 999;
  }

  .web-v3-all-breakpoints .logo_optimizer {
    aspect-ratio: 3.94;
    height: 30px;
    margin-bottom: -3.00px;
    margin-top: -3.00px;
    position: relative;
    width: 118px;
  }

  .web-v3-all-breakpoints .button-2 {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 23.99px;
    position: relative;
    width: 23.99px;
  }

  .web-v3-all-breakpoints .vector-1 {
    height: 8.33%;
    left: 12.50%;
    position: absolute;
    top: 16.67%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .vector-2 {
    height: 8.33%;
    left: 12.50%;
    position: absolute;
    top: 45.83%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .vector-3 {
    height: 8.33%;
    left: 12.50%;
    position: absolute;
    top: 75.00%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .hero-1 {
    height: 596px;
    position: relative;
    width: 100vw;
  }

  .web-v3-all-breakpoints .hero-section-bg {
    display: flex;
    height: 596px;
    width: 100%;
  }

  .swiper-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  .web-v3-all-breakpoints .container-60 {
    background-image: url(../img/container.gif);
    background-position: 50% 50%;
    background-size: cover;
    height: 596px;
    opacity: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-60.bp3-animate-enter {
    animation: bp3-animate-enter-frames 0.20s linear 0.00s 1 normal forwards;
    opacity: 0;
  }

  @keyframes bp3-animate-enter-frames {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .web-v3-all-breakpoints .container-61 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    left: 16px;
    position: absolute;
    top: 165px;
    /* width: 345px; */
  }

  .web-v3-all-breakpoints .text-50 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
  }

  .web-v3-all-breakpoints .title-2 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 256px;
  }

  .web-v3-all-breakpoints .optimizer-1 {
    align-self: center;
    letter-spacing: 8.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-88 {
    align-items: center;
    color: var(--basic-colorwhite);
    display: flex;
    font-family: var(--font-family-arial-regular);
    font-size: 32px;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    text-align: center;
    position: relative;
    line-height: 38px;
  }

  .web-v3-all-breakpoints .paragraph-25 {
    align-self: stretch;
    position: relative;
    width: 100%;
  }


  .web-v3-all-breakpoints .buttons-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 12px;
    position: relative;
  }

  .web-v3-all-breakpoints .button-10 {
    align-items: center;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 148px;
  }

  .web-v3-all-breakpoints .button-10:hover {
    background: rgb(62, 98, 211);
    cursor: pointer;
  }

  .web-v3-all-breakpoints .frame-111-2 {
    gap: 8px;
  }

  .web-v3-all-breakpoints .text-21 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
  }

  .text-button .text-21:hover {
    color: rgb(184, 201, 255);
    --letter-spacing: 0px;
    text-decoration-line: underline;
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
    text-decoration-style: solid;
    font-weight: bold;
  }

  .web-v3-all-breakpoints .icon-7 {
    height: 20px;
    position: relative;
    width: 20px;
  }

  .web-v3-all-breakpoints .button-11 {
    align-items: center;
    border: 2px solid;
    border-color: var(--basic-colorwhite);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 156px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .frame-111-3 {
    gap: 12px;
  }


  .web-v3-all-breakpoints .navigation-1 {
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: space-between;
    position: relative;
    width: 960px;
  }

  .web-v3-all-breakpoints .logo_optimizer-2 {
    height: 36px;
    width: 142px;
  }

  .web-v3-all-breakpoints .group-4 {
    height: 35px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 33px;
  }

  .web-v3-all-breakpoints .group-5 {
    height: 28px;
    left: 39px;
    position: absolute;
    top: 4px;
    width: 102px;
  }

  .web-v3-all-breakpoints .container-62 {
    align-items: center;
    display: flex;
    gap: 32px;
    height: 24px;
    position: relative;
    width: 528px;
  }

  .web-v3-all-breakpoints .list-5 {
    align-items: center;
    display: flex;
    gap: 32px;
    height: 24px;
    margin-right: -115.30px;
    position: relative;
    width: 643.3px;
  }

  .web-v3-all-breakpoints .button-12 {
    align-items: center;
    aspect-ratio: 3.06;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 37px;
    justify-content: center;
    position: relative;
    width: 112px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-12:hover {
    background: rgb(62, 98, 211);
  }

  .web-v3-all-breakpoints .text-92 {
    color: var(--basic-colorwhite);
    font-family: var(--font-family-arial-bold);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .view-9 {
    align-items: center;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding-bottom: 36px;
  }

  .web-v3-all-breakpoints .container-63 {
    align-self: stretch;
    position: relative;
    width: 100vw;
    margin: 36px 0;
  }

  .web-v3-all-breakpoints .heading-2-7 {
    margin-bottom: 16px;
    display: flex;
    justify-content: center;
  }

  .web-v3-all-breakpoints .text-93 {
    align-items: flex-end;
    color: var(--cod-gray);
    display: flex;
    font-family: var(--font-family-arial-regular);
    font-size: 24px;
    font-weight: 400;
    height: 30px;
    justify-content: center;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
    width: 216px;
  }

  .web-v3-all-breakpoints .paragraph-26 {
    align-items: center;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    left: calc(50.00% - 172px);
    padding: 10px 24px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-94 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    width: 295px;
  }

  .web-v3-all-breakpoints .container-64 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
    padding: 0 15px;
  }

  .web-v3-all-breakpoints .animation-1 {
    grid-column: 1 / 2;
  }

  .web-v3-all-breakpoints .card-3 {
    background: linear-gradient(117deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1.1px solid;
    border-color: var(--mercury);
    border-radius: 16px;
    cursor: pointer;
    height: 236.17px;
    margin-right: -0.47px;
    position: relative;
    transition: all 0.2s ease;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .web-v3-all-breakpoints .card-3:hover {
    transform: translate(0, -5px);
    box-shadow: 0px 12px 5px -8px rgba(0, 0, 0, 0.2);
  }

  .web-v3-all-breakpoints .container-48 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 202px;
    width: 80%;
  }

  .web-v3-all-breakpoints .container-49 {
    align-items: center;
    background-color: var(--pattens-blue);
    border-radius: 14px;
    display: flex;
    height: 64px;
    justify-content: center;
    position: relative;
    width: 64px;
  }

  .web-v3-all-breakpoints .container-49 img {
    height: 32px;
    width: 32px;
  }

  .web-v3-all-breakpoints .icon-8 {
    height: 32px;
    overflow: hidden;
    position: relative;
    width: 32px;
  }

  .web-v3-all-breakpoints .vector-24 {
    height: 83.33%;
    left: -31532.29%;
    position: absolute;
    top: 3708.33%;
    width: 83.33%;
  }

  .web-v3-all-breakpoints .vector-25 {
    height: 50.00%;
    left: -31515.62%;
    position: absolute;
    top: 3725.00%;
    width: 50.00%;
  }

  .web-v3-all-breakpoints .vector-26 {
    height: 16.67%;
    left: -31498.96%;
    position: absolute;
    top: 3741.67%;
    width: 16.67%;
  }

  .web-v3-all-breakpoints .container-50 {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
    height: 117px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-51 {
    align-items: center;
    align-self: center;
    display: flex;
    gap: 11.99px;
    height: 54.02px;
    position: relative;
    width: 100%;
    justify-content: center;
  }

  .web-v3-all-breakpoints .heading-3-8 {
    height: 27px;
    position: relative;
    width: 90px;
  }

  .web-v3-all-breakpoints .text-95 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-24 {
    height: 24px;
    position: relative;
    width: 16px;
  }

  .web-v3-all-breakpoints .text-96 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .heading-3-9 {
    height: 27px;
    position: relative;
    width: 72px;
  }

  .web-v3-all-breakpoints .text-97 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-21 {
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-25 {
    letter-spacing: 0;
    line-height: 26px;
    width: 100%;
  }

  .web-v3-all-breakpoints .animation-2 {
    grid-column: 2 / 3;
  }

  .web-v3-all-breakpoints .vector-27 {
    height: 83.33%;
    left: -33082.29%;
    position: absolute;
    top: 3708.33%;
    width: 83.33%;
  }

  .web-v3-all-breakpoints .vector-28 {
    height: 50.00%;
    left: -33065.62%;
    position: absolute;
    top: 3725.00%;
    width: 50.00%;
  }

  .web-v3-all-breakpoints .vector-29 {
    height: 16.67%;
    left: -33048.96%;
    position: absolute;
    top: 3741.67%;
    width: 16.67%;
  }

  .web-v3-all-breakpoints .text-99 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-100 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-101 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .view-10 {
    align-self: stretch;
    background-color: var(--bglight-gray);
    position: relative;
    width: 100%;
    padding: 24px 0 24px 0;
  }

  .web-v3-all-breakpoints .view-11 {
    background-color: var(--bglight-gray);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-65 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-12 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-12 {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .title-1 {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    padding: 8px 12px;
  }

  .web-v3-all-breakpoints .icon-9 {
    height: 24px;
    position: relative;
    width: 24px;
  }

  .web-v3-all-breakpoints .frame-3-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 4px 0px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-27 {
    letter-spacing: 0;
    position: relative;
    white-space: wrap;
    width: fit-content;
    line-height: 34px;
  }

  .web-v3-all-breakpoints .line-1-1 {
    height: 2px;
    width: 108px;
    object-fit: cover;
    position: relative;
  }

  .web-v3-all-breakpoints .frame-1-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 10px 16px;
    position: relative;
    margin: 0 auto;
  }

  .web-v3-all-breakpoints .text-136 {
    letter-spacing: 0;
    line-height: 38px;
    margin-top: -1.00px;
    position: relative;
    width: fit-content;
  }

  .web-v3-all-breakpoints .text_label-4 {
    margin-top: -1.00px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-66 {
    align-self: stretch;
    position: relative;
    width: 100%;
    display: flex;
    margin: 34px 0;
    justify-content: center;
  }

  .web-v3-all-breakpoints .frame-17 {
    align-items: center;
    display: inline-flex;
    gap: 16px;
    padding: 0px 16px;
    position: relative;
  }

  .web-v3-all-breakpoints .button-13 {
    border: 2px solid;
    border-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    height: 48px;
    position: relative;
    width: 272px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-13:hover {
    background-color: rgb(237, 241, 255);
  }

  .web-v3-all-breakpoints .text-137 {
    left: calc(50.00% - 102px);
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: calc(50.00% - 12px);
    width: 204px;
  }

  .web-v3-all-breakpoints .v2-card-square {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .tab-3 {
    background-color: var(--mystic);
    border-radius: 100px;
    height: 48px;
    padding: 2px;
    width: 284px;
  }

  .web-v3-all-breakpoints .tab-4 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 50px;
    gap: 10px;
    height: 42px;
    justify-content: center;
    padding: 10px 36px;
    width: 140px;
  }

  .web-v3-all-breakpoints .text-28 {
    letter-spacing: 0;
    line-height: 24px;
    margin-left: -6.00px;
    margin-right: -6.00px;
    margin-top: -2.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .tab-5 {
    border-radius: 50px;
    gap: 10px;
    height: 42px;
    justify-content: center;
    padding: 10px 36px;
    width: 140px;
  }

  .web-v3-all-breakpoints .frame-120 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* 隱藏 Swiper 溢出內容 */
  .frame-120.swiper {
    overflow: hidden;
    width: 100%;
  }

  .swiper-controls-layout {
    margin: 24px 0;
  }

  /* 行銷服務選中時 (背景藍，文字白) */
  .tab-4.active {
    background-color: #4d79ff !important;
    /* 你的藍色 */
  }

  .tab-4.active .text-28 {
    color: #ffffff !important;
  }

  /* 系統建置選中時 (背景藍，文字白) */
  .tab-5.active {
    background-color: #4d79ff !important;
  }

  .tab-5.active .text-28 {
    color: #ffffff !important;
  }

  /* 非選中狀態的文字顏色修正 */
  .tab-4:not(.active) .text-28,
  .tab-5:not(.active) .text-28 {
    color: #6d7278 !important;
    /* 灰字 */
  }

  .tab-4:not(.active),
  .tab-5:not(.active) {
    background-color: #e8ebee !important;
    /* 灰底 */
  }

  .web-v3-all-breakpoints .container-67 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 234px minmax(0, 1fr);
    height: 480px;
    width: 608px;
  }

  .web-v3-all-breakpoints .container-68 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 100%;
    position: relative;
    transition: all 0.2s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-52 {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    height: 32px;
    left: 25px;
    position: absolute;
    top: 25px;
    transition: all 0.2s ease;
    width: 242px;
  }

  .web-v3-all-breakpoints .container-52:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-33 {
    height: 32px;
    position: relative;
    width: 32.95px;
  }

  .web-v3-all-breakpoints .text-1-2 {
    left: 0;
    line-height: 32px;
    position: absolute;
    top: -1px;
  }

  .web-v3-all-breakpoints .agent-linebot-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-3 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 96px;
    left: 25px;
    position: absolute;
    top: 73px;
    width: 242px;
  }

  .web-v3-all-breakpoints .list-item-1 {
    height: 24px;
  }

  .web-v3-all-breakpoints .icon-10 {
    height: 18px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 2px;
    width: 18px;
  }

  .web-v3-all-breakpoints .vector-30 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 4175.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-34 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 160px;
  }

  .web-v3-all-breakpoints .line-2 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 180px;
  }

  .web-v3-all-breakpoints .list-item-2 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-31 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 3975.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .ai-1 {
    height: 24px;
    margin-top: -1px;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-3 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-32 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 3775.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-38 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 128px;
  }

  .web-v3-all-breakpoints .text-1-3 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    width: 144px;
  }

  .web-v3-all-breakpoints .button-8 {
    display: flex;
    height: 24px;
    left: 25px;
    position: absolute;
    top: 185px;
    width: 88px;
  }

  .web-v3-all-breakpoints .text-1-4 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    text-align: center;
    text-decoration: underline;
    width: 64px;
  }

  .web-v3-all-breakpoints .container-69 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 298px;
  }

  .web-v3-all-breakpoints .heading-3-10 {
    height: 27px;
    position: relative;
    width: 108px;
  }

  .web-v3-all-breakpoints .geo-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-4 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-33 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5541.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-52 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 175px;
  }

  .web-v3-all-breakpoints .google-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 196px;
  }

  .web-v3-all-breakpoints .list-item-5 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-34 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5341.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-108 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-6 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-35 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5141.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-53 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 96px;
  }

  .web-v3-all-breakpoints .text-109 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 128px;
  }

  .web-v3-all-breakpoints .container-70 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 298px;
  }

  .web-v3-all-breakpoints .app-2 {
    left: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
  }

  .web-v3-all-breakpoints .list-item-7 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-36 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5541.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-54 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 176px;
  }

  .web-v3-all-breakpoints .app-3 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    width: 193px;
  }

  .web-v3-all-breakpoints .list-item-8 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-37 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5341.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-55 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 208px;
  }

  .web-v3-all-breakpoints .text-112 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 176px;
  }

  .web-v3-all-breakpoints .list-item-9 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-38 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5141.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-56 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 163px;
  }

  .web-v3-all-breakpoints .seo-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 178px;
  }

  .web-v3-all-breakpoints .container-71 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 0 16px;
  }

  .web-v3-all-breakpoints .container-72 {
    align-self: stretch;
    background-color: var(--basic-colorwhite);
    border: 1.1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    height: 234.08px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-72:hover {
    /* transform: scale(1.1); */
  }

  /* 保留你原有的基礎樣式，僅針對 Swiper 必需部分做補充 */
  .container-82 {}

  /* Swiper 容器設定 */
  .container-83.swiper {
    width: 100%;
    overflow: hidden;
    /* 隱藏超出部分 */
  }

  /* 模擬原本的卡片佈局樣式 (請確保你的原始 CSS 也有包含這些 class) */
  .case-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: auto;
  }

  /* 自定義分頁器：選中長條，未選中圓點 */
  .custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    bottom: 10px !important;
  }

  .custom-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #D1D5DB;
    /* 未選中顏色 */
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .custom-pagination .swiper-pagination-bullet-active {
    width: 24px;
    /* 長條效果 */
    border-radius: 4px;
    background-color: #4D79FF;
    /* 選中藍色 */
  }

  /* 為了讓圖片有底色（模擬原本 image 類名） */
  .image,
  .image-1,
  .image-2 {
    background-color: #f0f0f0;
    height: 200px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-39 {
    height: 32px;
    position: relative;
    width: 31.28px;
  }

  .web-v3-all-breakpoints .text-115 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-10 {
    height: 24px;
  }

  .web-v3-all-breakpoints .icon-11 {
    height: 18px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 18px;
  }

  .web-v3-all-breakpoints .vector-23 {
    height: 54.17%;
    left: 12.50%;
    position: absolute;
    top: 20.83%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .text-116 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-11 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-43 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 144px;
  }

  .web-v3-all-breakpoints .list-item-12 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-73 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-73:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .container-53 {
    align-items: center;
    display: flex;
    gap: 12px;
    height: 32px;
    left: 25px;
    position: absolute;
    top: 25px;
    width: 242px;
  }

  .web-v3-all-breakpoints .heading-3-13 {
    height: 27px;
    position: relative;
    width: 126px;
  }

  .web-v3-all-breakpoints .text-121 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-13 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-57 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 206px;
  }

  .web-v3-all-breakpoints .ig-reels-tik-tok-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 206px;
  }

  .web-v3-all-breakpoints .list-item-14 {
    height: 24px;
  }

  .web-v3-all-breakpoints .list-item-15 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-74 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 234px;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-74:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-126 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-16 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-58 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 155px;
  }

  .web-v3-all-breakpoints .ptt-dcard-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 155px;
  }

  .web-v3-all-breakpoints .list-item-17 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-127 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-18 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-75 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 234px;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-75:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-131 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-6 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100px;
    left: 25px;
    position: absolute;
    top: 73px;
    width: 242px;
  }

  .web-v3-all-breakpoints .list-item-19 {
    height: 28px;
  }

  .web-v3-all-breakpoints .text-59 {
    display: flex;
    height: 28px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 216px;
  }

  .web-v3-all-breakpoints .fb-google {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    width: 211px;
  }

  .web-v3-all-breakpoints .list-item-20 {
    height: 24px;
  }

  .web-v3-all-breakpoints .list-item-21 {
    height: 24px;
  }

  .web-v3-all-breakpoints .button-14 {
    display: flex;
    height: 24px;
    left: 25px;
    position: absolute;
    top: 189px;
    width: 88px;
  }

  .web-v3-all-breakpoints .view-13 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 100%;
    padding: 24px 0;
  }

  .web-v3-all-breakpoints .container-76 {
    align-self: stretch;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-11-1 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-8 {
    align-items: center;
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 304px;
  }

  .web-v3-all-breakpoints .frame-25 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-2-6 {
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-24 {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 10px 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .paragraph-22 {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 10px;
    position: relative;
    width: 100%;
    padding: 0 20px;
  }

  .web-v3-all-breakpoints .ai-2 {
    position: relative;
    width: fit-content;
    line-height: 28px;
  }

  .web-v3-all-breakpoints .card-4 {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    padding: 0 20px;
  }

  .web-v3-all-breakpoints .card-5 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 100%;
    margin: 0 auto;
  }

  .web-v3-all-breakpoints .card-5:hover {
    transform: translate(0, -5px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px 3px, rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
  }

  .web-v3-all-breakpoints .container-77 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-27-1 {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: center;
    position: relative;
    width: calc(100% + 10px);
  }

  .web-v3-all-breakpoints .heading-3-11 {
    flex: 1;
    flex-grow: 1;
    height: 24px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-139 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .paragraph-23 {
    align-self: stretch;
    height: 96px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-44 {
    left: 40px;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% - 48px);
  }

  .web-v3-all-breakpoints .card-6 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-6:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-78 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .card-7 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-7:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-79 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-5 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .card-8 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-8:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-80 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-6 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .card-9 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-9:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-81 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-7 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .view-14 {
    position: relative;
    width: 100%;

  }

  .web-v3-all-breakpoints .featured-works {
    align-items: center;
    background-color: var(--bglight-gray);
    display: flex;
    flex-direction: column;
    gap: 37px;
    width: 100%;
    padding: 24px 0;

  }

  .web-v3-all-breakpoints .frame-24-1 {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text_label-5 {
    position: relative;
  }

  .web-v3-all-breakpoints .container-82 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
    padding: 0 20px;
  }

  .web-v3-all-breakpoints .frame-23 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-142 {
    color: var(--cod-gray);
    font-family: var(--font-family-arial-regular);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 30px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-83::-webkit-scrollbar {
    display: none;
    width: 0;
  }

  .web-v3-all-breakpoints .container-83 {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: center;
    overflow: hidden;
    overflow-x: scroll;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .case-card {
    background-color: var(--basic-colorwhite);
    border-radius: 16px;
    box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 459px;
    overflow: hidden;
    transition: all 0.2s ease;
  }



  .web-v3-all-breakpoints .container-54 {
    align-self: stretch;
    background-color: var(--wild-sand);
    height: 224px;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .image {
    background-image: url(../img/imagewithfallback-1@2x.png);
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 224px;
    left: 1px;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .linear {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    height: 224px;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-112 {
    align-items: flex-start;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 0;
    padding: 12px 10px;
    position: absolute;
    width: 356px;
  }

  .web-v3-all-breakpoints .hash-tag-1 {
    align-items: flex-start;
    background-color: var(--brand-colorprimary-light);
    border-radius: 33554400px;
    display: flex;
    height: 36px;
    line-height: 36px;
    padding: 0 16px;
    position: relative;
    width: 128px;
  }

  .web-v3-all-breakpoints .text-1-5 {
    align-items: flex-end;
    display: flex;
    flex: 1;
    height: 36px;
    justify-content: center;
    line-height: 36px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-55 {
    align-self: stretch;
    height: 235px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-3-12 {
    display: flex;
    height: 24px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 256px;
  }

  .web-v3-all-breakpoints .text-48 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 96px;
  }

  .web-v3-all-breakpoints .paragraph-24 {
    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 51px;
  }

  .web-v3-all-breakpoints .text_label-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    height: auto;
  }

  .web-v3-all-breakpoints .container-56 {
    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 140px;
    height: 75px;
    border-top: 1px solid var(--mercury);
    padding: 25px 0px 0px;
    align-items: flex-start;
  }

  .web-v3-all-breakpoints .hash-tag-2 {
    align-items: center;
    background-color: var(--wild-sand);
    border-radius: 50px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 4px 10px;
    position: relative;
  }

  .web-v3-all-breakpoints .hash-tag-2:not(:last-child) {
    margin-right: 10px;
  }

  .web-v3-all-breakpoints .image-1 {
    background-image: url(../img/imagewithfallback-3@2x.png);
  }

  .web-v3-all-breakpoints .image-2 {
    background-image: url(../img/imagewithfallback-2@2x.png);
  }

  .web-v3-all-breakpoints .carousel-page-indicator-1 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 8px;
    height: 8px;
    justify-content: center;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-113-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
  }

  .web-v3-all-breakpoints .button-15 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 33554400px;
    height: 8px;
    position: relative;
    width: 32px;
  }

  .web-v3-all-breakpoints .button-9 {
    background-color: var(--mischka);
    border-radius: 33554400px;
    height: 8px;
    position: relative;
    width: 8px;
  }

  .web-v3-all-breakpoints .view-15 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 100%;
    padding: 24px 0;
  }

  .web-v3-all-breakpoints .text-152 {
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-26 {
    width: 100%;
    padding: 0 15px;
  }

  .web-v3-all-breakpoints .contact {
    background-color: var(--bglight-gray);
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-19 {
    align-items: center;
    background-color: var(--basic-colorwhite);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-84 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 24px;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-85 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 46px;
    padding: 30px 40px;
  }

  .web-v3-all-breakpoints .frame-32 {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }

  .web-v3-all-breakpoints .heading-2-8 {
    align-self: stretch;
    height: 30px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-153 {
    left: 0;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: -2px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-27 {
    height: 48px;
    opacity: 0.9;
    position: relative;
    width: 270px;
  }

  .web-v3-all-breakpoints .text-154 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
  }

  .web-v3-all-breakpoints .container-86 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 228px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-87 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 16px;
    height: 59px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-57 {
    align-items: flex-start;
    background-color: var(--white);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 44px;
    padding: 12px 12px 0px;
    position: relative;
    width: 44px;
  }

  .web-v3-all-breakpoints .icon-12 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-39 {
    height: 91.67%;
    left: 4.17%;
    position: absolute;
    top: 4.17%;
    width: 91.67%;
  }

  .web-v3-all-breakpoints .container-88 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 76px;
    margin-bottom: -17.00px;
    position: relative;
    width: 123.08px;
  }

  .web-v3-all-breakpoints .paragraph-28 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-155 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-29 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-3 {
    line-height: 24px;
  }

  .web-v3-all-breakpoints .container-58 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 16px;
    height: 52px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .icon-13 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-40 {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-41 {
    height: 75.00%;
    left: 4.17%;
    position: absolute;
    top: 12.50%;
    width: 91.67%;
  }

  .web-v3-all-breakpoints .container-89 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 52px;
    position: relative;
    width: 195.58px;
  }

  .web-v3-all-breakpoints .paragraph-30 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-156 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-31 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .servicetaohomecomtw-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .icon-14 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-42 {
    height: 91.67%;
    left: 12.50%;
    position: absolute;
    top: 4.17%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .vector-43 {
    height: 33.33%;
    left: 33.33%;
    position: absolute;
    top: 25.00%;
    width: 33.33%;
  }

  .web-v3-all-breakpoints .container-90 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 52px;
    position: relative;
    width: 221.5px;
  }

  .web-v3-all-breakpoints .paragraph-32 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-157 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-33 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x181-2-f-2 {
    line-height: 24px;
  }

  .web-v3-all-breakpoints .container-91 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .form {
    align-self: stretch;
    position: relative;
    padding: 32px 40px 32px 40px;
    border-radius: 24px;
    width: 100%;
    margin-top: 20px;
    box-shadow: 0px 1px 3px #0000004c, 0px 4px 8px 3px #00000026;
  }

  .web-v3-all-breakpoints .container-92 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    width: 100%;
  }

  .web-v3-all-breakpoints .container-93 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-158 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .x-input {
    align-items: center;
    align-self: stretch;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-color: var(--mercury);
    display: flex;
    height: 50px;
    padding: 12px 0;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .name-1 {
    letter-spacing: 0;
    line-height: normal;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-94 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-159 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .hellonurencycom-1 {
    letter-spacing: 0;
    line-height: normal;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-95 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 20px;
  }

  .web-v3-all-breakpoints .text-160 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-input-3 {
    align-items: center;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    border-radius: 8px;
    display: flex;
    height: 42px;
    overflow: hidden;
    padding: 8px 16px;
    position: relative;
    width: 100%;
  }

  /* 你原本的樣式保持不變 */
  .web-v3-all-breakpoints .text-input-3 {
    align-items: center;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    /* 確保變量已定義，或改為具體顏色如 #e2e8f0 */
    border-radius: 8px;
    display: flex;
    height: 42px;
    overflow: hidden;
    /* 這個屬性會切掉內容，所以選單不能放在裡面 */
    padding: 8px 16px;
    position: relative;
    width: 100%;
    background: #fff;
  }

  /* 修正下拉選單樣式 */
  .dropdown-list {
    position: absolute;
    top: 100%;
    /* 從 label + text-input 的下方開始 */
    left: 0;
    width: 100%;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    /* 確保在最上層 */
    display: none;
    /* 預設隱藏 */
  }

  /* 選單顯示時 */
  .dropdown-list.show {
    display: block;
  }

  .option-item {
    padding: 10px 16px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
  }

  .option-item:hover {
    background-color: #f3f4f6;
    color: #4D79FF;
  }

  /* 箭頭旋轉效果 */
  #dropdown-arrow {
    transition: transform 0.3s ease;
  }

  .rotate-arrow {
    transform: rotate(180deg);
  }

  .web-v3-all-breakpoints .frame-20-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
  }

  .web-v3-all-breakpoints .text-161 {
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .polygon-1-1 {
    height: 8.66px;
    position: relative;
    width: 12.77px;
  }

  .web-v3-all-breakpoints .container-96 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
  }

  .web-v3-all-breakpoints .text-162 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-area-1 {
    align-items: flex-start;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    border-radius: 8px;
    display: flex;
    height: 106px;
    overflow: hidden;
    padding: 12px 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-163 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -2.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .button-16 {
    align-items: center;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    margin: 0 auto;
    width: 148px;
    cursor: pointer;
    margin-top: 20px;
  }

  .web-v3-all-breakpoints .button-16:hover {
    background: rgb(62, 98, 211);
  }

  .web-v3-all-breakpoints .footer-2 {
    align-items: flex-start;
    background-color: var(--bunker);
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 399px;
    padding: 24px 16px 0px;
    position: relative;
    width: 100vw;
  }

  .web-v3-all-breakpoints .container-97 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 32px;
    height: 275px;
    justify-content: space-around;
    padding: 16px 160px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-98 {
    height: 224px;
    margin-right: -16.00px;
    position: relative;
    width: 944px;
  }

  .web-v3-all-breakpoints .container-99 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 268px;
    left: 0;
    position: absolute;
    top: 0;
    width: 319px;
  }

  .web-v3-all-breakpoints .logo_optimizer-3 {
    height: 46px;
    width: 181px;
  }

  .web-v3-all-breakpoints .group-6 {
    height: 44px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 42px;
  }

  .web-v3-all-breakpoints .group-7 {
    height: 36px;
    left: 50px;
    position: absolute;
    top: 5px;
    width: 130px;
  }

  .web-v3-all-breakpoints .container-100 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 116px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .paragraph-34 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x181-2-f-3 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .paragraph-35 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-4 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .paragraph-36 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .e-mail-servicetaohomecomtw-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-37 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-5 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .heading-4-1 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .follow-us-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .container-101 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 12px;
    height: 34px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .icon-link-1 {
    height: 34px;
    position: relative;
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-width: 0px;
    justify-content: center;
    border-color: transparent;
    background: #2c333d;
    border-radius: 10px;
  }

  .web-v3-all-breakpoints .icon-link-1:hover {
    background: rgb(77, 120, 255);
  }

  .web-v3-all-breakpoints .frame-116 {
    align-items: center;
    display: inline-flex;
    gap: 11px;
    left: 629px;
    position: absolute;
    top: 0;
  }

  .web-v3-all-breakpoints .container-59 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 266px;
    position: relative;
    width: 184px;
  }

  .web-v3-all-breakpoints .text-16-2 {
    letter-spacing: 5.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .list-4 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-button-footer {
    padding: 0px 4px;
  }

  .web-v3-all-breakpoints .text-49 {
    letter-spacing: 1.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .text-49:hover {
    background-color: rgb(113, 147, 255);
    color: #FFFFFF;
  }

  .web-v3-all-breakpoints .frame-115-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 0px 4px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-102 {
    align-items: center;
    align-self: stretch;
    border-color: var(--ebony-clay);
    border-top-style: solid;
    border-top-width: 1px;
    display: flex;
    flex-direction: column;
    height: 57px;
    justify-content: center;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .paragraph-38 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x2025-optimizer-all-rights-reserved-1 {
    left: calc(50.00% - 140px);
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: -1px;
    white-space: wrap;
  }

  .web-v3-all-breakpoints .ai {
    letter-spacing: 0;
    white-space: wrap;
  }

  .web-v3-all-breakpoints .animation {
    grid-row: 1 / 2;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .app {
    letter-spacing: 0;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .frame-111 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
  }

  .web-v3-all-breakpoints .image-3 {
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 224px;
    left: 1px;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .label {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .list-item {
    align-self: stretch;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .logo_optimizer {
    aspect-ratio: 3.94;
    position: relative;
  }

  .web-v3-all-breakpoints .phone {
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .tab {
    align-items: center;
    display: flex;
    position: relative;
  }

  .web-v3-all-breakpoints .text-1 {
    letter-spacing: 0;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-button {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }



  .web-v3-all-breakpoints .text-button-footer-13 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 0px 4px;
    position: relative;
  }

  .web-v3-all-breakpoints .text_label {
    letter-spacing: 0;
    line-height: 24px;
    word-wrap: break-word;
  }



  .web-v3-all-breakpoints .x181-2-f {
    left: 0;
    letter-spacing: 0;
    white-space: wrap;
  }

  .footer-container {
    width: 100%;
    background-color: #0F1114;
  }

  /* --- 折疊菜單樣式 --- */
  .accordion-section {}

  .acc-card {
    margin-bottom: 10px;
    overflow: hidden;
  }

  /* --- 图标切换逻辑 (核心部分) --- */
  .icon-box {
    display: flex;
    align-items: center;
    color: white;
    /* 确保图标是白色的 */
  }

  /* 默认状态：显示加号，隐藏上箭头 */
  .icon-plus {
    display: block;
  }

  .icon-up {
    display: none;
  }

  /* 激活状态 (.active)：隐藏加号，显示上箭头 */
  .acc-card.active .icon-plus {
    display: none;
  }

  .acc-card.active .icon-up {
    display: block;
  }

  .acc-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--acc-header-bg);
    /* 標題淺色背景 */
    color: #FFFFFF;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    border-radius: 8px;
    /* 圓角 */
    transition: background-color 0.3s;
  }

  .acc-header i {
    font-size: 14px;
    transition: transform 0.3s ease;
    /* 圖標旋轉動畫 */
  }

  /* 展開時標題的樣式調整 */
  .acc-card.active .acc-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    /* 展開時稍微變深一點點 */
  }

  /* 內容區域 */
  .acc-content {
    max-height: 0;
    overflow: hidden;
    background-color: #FFFFFF;
    /* 內容淺色背景 */
    color: #555;
    transition: max-height 0.3s ease-out;
  }

  .acc-content ul {
    list-style: none;
    padding: 0 20px;
    margin: 0;
  }

  .acc-content li {
    font-size: 14px;
    height: 50px;
    line-height: 50px;
  }

  /* --- 底部品牌信息樣式 (簡化模擬圖中效果) --- */
  .brand-footer-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 20px;
    padding: 20px;
    border-top: 1px solid #444;
  }

  .brand-col h3,
  .info-col h3 {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
    text-transform: uppercase;
  }

  .brand-logo-mock {
    font-size: 18px;
    font-weight: bold;
    color: white;
  }

  .brand-logo-mock .sub {
    display: block;
    font-size: 12px;
    font-weight: normal;
    margin-top: 5px;
    letter-spacing: 2px;
  }

  .info-col p {
    margin: 5px 0;
    font-size: 13px;
    color: #bbb;
    line-height: 20px;
  }

  .bottom-copyright {
    margin: 30px;
    font-size: 12px;
    color: #99a1ae;
    text-align: center;
  }

  /* 基础遮罩样式 */
  .overlay-base {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    /* 弹窗主体是白色的 */
    z-index: 1000;
    display: none;
    /* 初始完全隐藏 */
    overflow-y: auto;
  }

  /* 进场动画：缓慢向下移动并显现 */
  .animate-appear {
    display: block !important;
    animation: slideDown 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  /* 出场动画：缓慢向上移动并消失 */
  .animate-disappear {
    animation: slideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }

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

  @keyframes slideUp {
    from {
      transform: translateY(0);
      opacity: 1;
    }

    to {
      transform: translateY(-100%);
      opacity: 0;
    }
  }

  /* 内部 Header 还原 (image_53bc06.png) */
  .menuu23637u38283 .header {
    background-color: #050a1e;
    /* 深蓝黑色背景 */
    padding: 10px 20px;
  }

  .navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo_optimizer .group,
  .logo_optimizer .group-1 {
    height: 24px;
    /* 根据实际 Logo 大小调整 */
  }

  /* 菜单项文字还原 */
  .manu-content {
    padding: 20px;
    border-bottom: 1px solid #f5f5f5;
  }

  .text-1 {
    font-size: 18px;
    color: #333333;
    font-family: Arial, sans-serif;
  }

  /* 蓝色按钮还原 */
  .frame-108 {
    padding: 30px 20px;
  }

  .button {
    background-color: #557aff;
    border-radius: 10px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(85, 122, 255, 0.3);
  }

  .text-2 {
    color: #ffffff !important;
    font-weight: bold;
    font-size: 18px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1279px) {
  /* screen - ipad-v3 */

  .phone-screen {
    display: none;
  }

  .web-screen {
    width: 100%;
  }

  .web-v3-all-breakpoints {
    background-color: var(--basic-colorwhite);
    display: flex;
    width: 100%;
  }

  .web-v3-all-breakpoints .content-1 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .main-content-1 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .hero-1 {
    height: 666px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .hero-section-bg {
    display: flex;
    height: 666px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .swiper-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  .web-v3-all-breakpoints .container-60 {
    background-image: url(../img/container.gif);
    background-position: 50% 50%;
    background-size: cover;
    height: 666px;
    opacity: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-60.bp3-animate-enter {
    animation: bp3-animate-enter-frames 0.20s linear 0.00s 1 normal forwards;
    opacity: 0;
  }

  @keyframes bp3-animate-enter-frames {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .web-v3-all-breakpoints .container-61 {
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 4px 0px;
    position: absolute;
    top: 50%;
  }

  .web-v3-all-breakpoints .text-50 {
    width: 520px;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: -4.00px;
    height: 221px;
    position: relative;
  }

  .web-v3-all-breakpoints .title-2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .web-v3-all-breakpoints .optimizer-1 {
    align-self: stretch;
    letter-spacing: 8.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-88 {
    align-items: center;
    color: var(--basic-colorwhite);
    font-family: var(--font-family-arial-regular);
    font-size: 32px;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    line-height: 36px;
    position: relative;
    width: 256px;
  }

  .web-v3-all-breakpoints .paragraph-25 {
    align-self: stretch;
    height: 52px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text_label-3 {
    align-items: flex-end;
    display: flex;
    height: 48px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: -1px;
    width: 520px;
  }

  .web-v3-all-breakpoints .buttons-1 {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 12px;
    margin-top: 20px;
    position: relative;
    justify-content: center;
  }

  .web-v3-all-breakpoints .button-10 {
    align-items: center;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 148px;
  }

  .web-v3-all-breakpoints .button-10:hover {
    background: rgb(62, 98, 211);
    cursor: pointer;
  }

  .web-v3-all-breakpoints .frame-111-2 {
    gap: 8px;
  }

  .web-v3-all-breakpoints .text-21 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;

  }

  .text-button .text-21:hover {
    color: rgb(184, 201, 255);
    --letter-spacing: 0px;
    text-decoration-line: underline;
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
    text-decoration-style: solid;
    font-weight: bold;

  }

  .web-v3-all-breakpoints .icon-7 {
    height: 20px;
    position: relative;
    width: 20px;
  }

  .web-v3-all-breakpoints .button-11 {
    align-items: center;
    border: 2px solid;
    border-color: var(--basic-colorwhite);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 156px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-11:hover {
    background: rgba(46, 76, 167, 0.3);
    border: 2px solid #CAD6FF;
  }

  .web-v3-all-breakpoints .frame-111-3 {
    gap: 12px;
  }

  .web-v3-all-breakpoints .header {
    align-items: center;
    backdrop-filter: blur(4px) brightness(100%);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 2px -1px #0000001a, 0px 1px 3px #0000001a;
    display: flex;
    height: 72px;
    left: 0;
    padding: 0 16px;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 999;
  }

  .web-v3-all-breakpoints .navigation-1 {
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: space-between;
    position: relative;
    width: 100vw;
  }

  .web-v3-all-breakpoints .logo_optimizer-2 {
    height: 36px;
    width: 142px;
  }

  .web-v3-all-breakpoints .group-4 {
    height: 35px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 33px;
  }

  .web-v3-all-breakpoints .group-5 {
    height: 28px;
    left: 39px;
    position: absolute;
    top: 4px;
    width: 102px;
  }

  .web-v3-all-breakpoints .container-62 {
    align-items: center;
    display: flex;
    gap: 32px;
    height: 24px;
    position: relative;
  }

  .web-v3-all-breakpoints .list-5 {
    align-items: center;
    display: flex;
    gap: 15px;
    height: 24px;
    position: relative;
  }

  .web-v3-all-breakpoints .button-12 {
    align-items: center;
    aspect-ratio: 3.06;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 37px;
    justify-content: center;
    position: relative;
    width: 112px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-12:hover {
    background: rgb(62, 98, 211);
  }

  .web-v3-all-breakpoints .text-92 {
    color: var(--basic-colorwhite);
    font-family: var(--font-family-arial-bold);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .view-9 {
    align-items: center;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 60px 0;
    width: 100vw;
  }

  .web-v3-all-breakpoints .container-63 {
    align-self: stretch;
    position: relative;
    margin-bottom: 60px;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-2-7 {
    display: flex;
    justify-content: center;
  }

  .web-v3-all-breakpoints .text-93 {
    align-items: flex-end;
    color: var(--cod-gray);
    display: flex;
    font-family: var(--font-family-arial-regular);
    font-size: 36px;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-26 {
    display: flex;
    justify-content: center;
    margin-top: 20px;

  }

  .web-v3-all-breakpoints .text-94 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-left: 33px;
    margin-top: -1px;
    text-align: center;
    white-space: nowrap;
    width: 416px;
  }

  .web-v3-all-breakpoints .container-64 {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .web-v3-all-breakpoints .animation-1 {
    grid-column: 1 / 2;
  }

  .web-v3-all-breakpoints .card-3 {
    background: linear-gradient(117deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    height: 183px;
    position: relative;
    transition: all 0.2s ease;
  }

  .web-v3-all-breakpoints .card-3:hover {
    transform: translate(0, -5px);
    box-shadow: 0px 12px 5px -8px rgba(0, 0, 0, 0.2);
  }

  .web-v3-all-breakpoints .container-48 {
    align-items: center;
    display: flex;
    gap: 24px;
    height: 100%;
    position: relative;
    padding: 12px;
  }

  .web-v3-all-breakpoints .container-49 {
    align-items: center;
    background-color: var(--pattens-blue);
    border-radius: 14px;
    display: flex;
    height: 64px;
    justify-content: center;
    position: relative;
    width: 64px;
  }

  .web-v3-all-breakpoints .container-49 img {
    height: 32px;
    width: 32px;
  }

  .web-v3-all-breakpoints .icon-8 {
    height: 32px;
    overflow: hidden;
    position: relative;
    width: 32px;
  }

  .web-v3-all-breakpoints .vector-24 {
    height: 83.33%;
    left: -31532.29%;
    position: absolute;
    top: 3708.33%;
    width: 83.33%;
  }

  .web-v3-all-breakpoints .vector-25 {
    height: 50.00%;
    left: -31515.62%;
    position: absolute;
    top: 3725.00%;
    width: 50.00%;
  }

  .web-v3-all-breakpoints .vector-26 {
    height: 16.67%;
    left: -31498.96%;
    position: absolute;
    top: 3741.67%;
    width: 16.67%;
  }

  .web-v3-all-breakpoints .container-50 {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
    height: 117px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-51 {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 12px;
    height: 27px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-3-8 {
    height: 27px;
    position: relative;
    width: 90px;
  }

  .web-v3-all-breakpoints .text-95 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-24 {
    height: 24px;
    position: relative;
    width: 16px;
  }

  .web-v3-all-breakpoints .text-96 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .heading-3-9 {
    height: 27px;
    position: relative;
    width: 72px;
  }

  .web-v3-all-breakpoints .text-97 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-21 {
    align-self: stretch;
    height: 78px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-25 {
    left: 0;
    letter-spacing: 0;
    line-height: 26px;
    position: absolute;
    top: -1px;
  }

  .web-v3-all-breakpoints .animation-2 {
    grid-column: 2 / 3;
  }

  .web-v3-all-breakpoints .vector-27 {
    height: 83.33%;
    left: -33082.29%;
    position: absolute;
    top: 3708.33%;
    width: 83.33%;
  }

  .web-v3-all-breakpoints .vector-28 {
    height: 50.00%;
    left: -33065.62%;
    position: absolute;
    top: 3725.00%;
    width: 50.00%;
  }

  .web-v3-all-breakpoints .vector-29 {
    height: 16.67%;
    left: -33048.96%;
    position: absolute;
    top: 3741.67%;
    width: 16.67%;
  }

  .web-v3-all-breakpoints .text-99 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-100 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-101 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .view-10 {
    align-self: stretch;
    background-color: var(--bglight-gray);
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-11 {
    background-color: var(--bglight-gray);
    display: flex;
    justify-content: center;
    gap: 33px;
    padding: 48px 12px;
  }

  .web-v3-all-breakpoints .container-65 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 36px;
    position: relative;
    width: 30%;
  }

  .web-v3-all-breakpoints .v2-card-square {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 70%;
    overflow: hidden;
  }

  .web-v3-all-breakpoints .frame-12 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 36px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-12 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .title-1 {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    padding: 8px 12px;
  }

  .web-v3-all-breakpoints .icon-9 {
    height: 24px;
    position: relative;
    width: 24px;
  }

  .web-v3-all-breakpoints .frame-3-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 4px 0px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-27 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .line-1-1 {
    flex: 1;
    flex-grow: 1;
    height: 2px;
    object-fit: cover;
    position: relative;
  }

  .web-v3-all-breakpoints .frame-1-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 10px 16px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-136 {
    letter-spacing: 0;
    line-height: 38px;
    margin-top: -1.00px;
    position: relative;
    width: fit-content;
  }

  .web-v3-all-breakpoints .text_label-4 {
    margin-top: -1.00px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-66 {
    align-self: stretch;
    height: 52px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-17 {
    align-items: center;
    display: inline-flex;
    gap: 16px;
    padding: 0px 16px;
    position: relative;
    top: 8px;
  }

  .web-v3-all-breakpoints .button-13 {
    border: 2px solid;
    border-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    height: 48px;
    position: relative;
    width: 220px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-13:hover {
    background-color: rgb(237, 241, 255);
  }

  .web-v3-all-breakpoints .text-137 {
    left: calc(50.00% - 102px);
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: calc(50.00% - 12px);
    width: 204px;
  }



  .web-v3-all-breakpoints .tab-3 {
    background-color: var(--mystic);
    border-radius: 100px;
    height: 48px;
    padding: 2px;
    width: 284px;
  }

  .web-v3-all-breakpoints .tab-4 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 50px;
    gap: 10px;
    height: 42px;
    justify-content: center;
    padding: 10px 36px;
    width: 140px;
  }

  .web-v3-all-breakpoints .text-28 {
    letter-spacing: 0;
    line-height: 24px;
    margin-left: -6.00px;
    margin-right: -6.00px;
    margin-top: -2.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .tab-5 {
    border-radius: 50px;
    gap: 10px;
    height: 42px;
    justify-content: center;
    padding: 10px 36px;
    width: 140px;
  }

  .web-v3-all-breakpoints .frame-120 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* 隱藏 Swiper 溢出內容 */
  .frame-120.swiper {
    overflow: hidden;
    width: 100%;
  }

  /* 行銷服務選中時 (背景藍，文字白) */
  .tab-4.active {
    background-color: #4d79ff !important;
    /* 你的藍色 */
  }

  .tab-4.active .text-28 {
    color: #ffffff !important;
  }

  /* 系統建置選中時 (背景藍，文字白) */
  .tab-5.active {
    background-color: #4d79ff !important;
  }

  .tab-5.active .text-28 {
    color: #ffffff !important;
  }

  /* 非選中狀態的文字顏色修正 */
  .tab-4:not(.active) .text-28,
  .tab-5:not(.active) .text-28 {
    color: #6d7278 !important;
    /* 灰字 */
  }

  .tab-4:not(.active),
  .tab-5:not(.active) {
    background-color: #e8ebee !important;
    /* 灰底 */
  }

  .web-v3-all-breakpoints .container-67 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 234px minmax(0, 1fr);
    height: 480px;
    width: 608px;
  }

  .web-v3-all-breakpoints .container-68 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 100%;
    position: relative;
    transition: all 0.2s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-52 {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    height: 32px;
    left: 25px;
    position: absolute;
    top: 25px;
    transition: all 0.2s ease;
  }

  .web-v3-all-breakpoints .container-52:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-33 {
    height: 32px;
    position: relative;
    width: 32.95px;
  }

  .web-v3-all-breakpoints .text-1-2 {
    left: 0;
    line-height: 32px;
    position: absolute;
    top: -1px;
  }

  .web-v3-all-breakpoints .text-1-2 img {
    width: 32px;
    height: 32px;
  }

  .web-v3-all-breakpoints .agent-linebot-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-3 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 96px;
    left: 25px;
    position: absolute;
    top: 73px;
  }

  .web-v3-all-breakpoints .list-item-1 {
    height: 24px;
  }

  .web-v3-all-breakpoints .icon-10 {
    height: 18px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 2px;
    width: 18px;
  }

  .web-v3-all-breakpoints .vector-30 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 4175.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-34 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 160px;
  }

  .web-v3-all-breakpoints .line-2 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 180px;
  }

  .web-v3-all-breakpoints .list-item-2 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-31 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 3975.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .ai-1 {
    height: 24px;
    margin-top: -1px;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-3 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-32 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 3775.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-38 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 128px;
  }

  .web-v3-all-breakpoints .text-1-3 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    width: 144px;
  }

  .web-v3-all-breakpoints .button-8 {
    display: flex;
    height: 24px;
    left: 25px;
    position: absolute;
    top: 185px;
    width: 88px;
  }

  .web-v3-all-breakpoints .text-1-4 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    text-align: center;
    text-decoration: underline;
    width: 64px;
  }

  .web-v3-all-breakpoints .container-69 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 298px;
  }

  .web-v3-all-breakpoints .heading-3-10 {
    height: 27px;
    position: relative;
    width: 108px;
  }

  .web-v3-all-breakpoints .geo-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-4 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-33 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5541.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-52 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 175px;
  }

  .web-v3-all-breakpoints .google-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 196px;
  }

  .web-v3-all-breakpoints .list-item-5 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-34 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5341.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-108 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-6 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-35 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5141.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-53 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 96px;
  }

  .web-v3-all-breakpoints .text-109 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 128px;
  }

  .web-v3-all-breakpoints .container-70 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 298px;
  }

  .web-v3-all-breakpoints .app-2 {
    left: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
  }

  .web-v3-all-breakpoints .list-item-7 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-36 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5541.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-54 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 176px;
  }

  .web-v3-all-breakpoints .app-3 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    width: 193px;
  }

  .web-v3-all-breakpoints .list-item-8 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-37 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5341.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-55 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 208px;
  }

  .web-v3-all-breakpoints .text-112 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 176px;
  }

  .web-v3-all-breakpoints .list-item-9 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-38 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5141.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-56 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 163px;
  }

  .web-v3-all-breakpoints .seo-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 178px;
  }

  .web-v3-all-breakpoints .container-71 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
    height: auto;
  }

  .web-v3-all-breakpoints .container-72 {
    background-color: var(--basic-colorwhite);
    border: 1px solid var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    overflow-x: scroll;
    width: 100%;
    min-height: 234px;
    position: relative;
    transition: all 0.5s ease;
  }

  .web-v3-all-breakpoints .container-72:hover {
    /* transform: scale(1.1); */
  }

  /* Swiper 容器設定 */
  .container-83.swiper {
    width: 100%;
    overflow: hidden;
    padding: 24px;
    margin: -24px;
  }

  /* 模擬原本的卡片佈局樣式 (請確保你的原始 CSS 也有包含這些 class) */
  .case-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: auto;
  }

  /* 自定義分頁器：選中長條，未選中圓點 */
  .custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    bottom: 10px !important;
  }

  .custom-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #D1D5DB;
    /* 未選中顏色 */
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .custom-pagination .swiper-pagination-bullet-active {
    width: 24px;
    /* 長條效果 */
    border-radius: 4px;
    background-color: #4D79FF;
    /* 選中藍色 */
  }

  /* 為了讓圖片有底色（模擬原本 image 類名） */
  .image,
  .image-1,
  .image-2 {
    background-color: #f0f0f0;
    height: 200px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-39 {
    height: 32px;
    position: relative;
    width: 31.28px;
  }

  .web-v3-all-breakpoints .text-115 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-10 {
    height: 24px;
  }

  .web-v3-all-breakpoints .icon-11 {
    height: 18px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 18px;
  }

  .web-v3-all-breakpoints .vector-23 {
    height: 54.17%;
    left: 12.50%;
    position: absolute;
    top: 20.83%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .text-116 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-11 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-43 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 144px;
  }

  .web-v3-all-breakpoints .list-item-12 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-73 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-73:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .container-53 {
    align-items: center;
    display: flex;
    gap: 12px;
    height: 32px;
    left: 25px;
    position: absolute;
    top: 25px;
    width: 242px;
  }

  .web-v3-all-breakpoints .heading-3-13 {
    height: 27px;
    position: relative;
    width: 126px;
  }

  .web-v3-all-breakpoints .text-121 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-13 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-57 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 206px;
  }

  .web-v3-all-breakpoints .ig-reels-tik-tok-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 206px;
  }

  .web-v3-all-breakpoints .list-item-14 {
    height: 24px;
  }

  .web-v3-all-breakpoints .list-item-15 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-74 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 234px;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-74:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-126 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-16 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-58 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 155px;
  }

  .web-v3-all-breakpoints .ptt-dcard-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 155px;
  }

  .web-v3-all-breakpoints .list-item-17 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-127 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-18 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-75 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 234px;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-75:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-131 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-6 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100px;
    left: 25px;
    position: absolute;
    top: 73px;
    width: 242px;
  }

  .web-v3-all-breakpoints .list-item-19 {
    height: 28px;
  }

  .web-v3-all-breakpoints .text-59 {
    display: flex;
    height: 28px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 216px;
  }

  .web-v3-all-breakpoints .fb-google {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    width: 211px;
  }

  .web-v3-all-breakpoints .list-item-20 {
    height: 24px;
  }

  .web-v3-all-breakpoints .list-item-21 {
    height: 24px;
  }

  .web-v3-all-breakpoints .button-14 {
    display: flex;
    height: 24px;
    left: 25px;
    position: absolute;
    top: 189px;
    width: 88px;
  }

  .web-v3-all-breakpoints .view-13 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 100vw;
    padding: 38px 16px 16px 16px;
  }

  .web-v3-all-breakpoints .container-76 {
    align-self: stretch;
    height: 154px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-11-1 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-8 {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 304px;
  }

  .web-v3-all-breakpoints .frame-25 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-2-6 {
    align-self: stretch;
    height: 43px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-24 {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 10px 32px;
    position: relative;
    width: 538px;
  }

  .web-v3-all-breakpoints .paragraph-22 {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 10px;
    height: 47px;
    padding: 0px 32px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .ai-2 {
    position: relative;
    width: fit-content;
  }

  .web-v3-all-breakpoints .card-4 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(184px, auto) auto;
    width: 100%;
  }

  .web-v3-all-breakpoints .card-4>* {
    min-width: 0;
  }

  .web-v3-all-breakpoints .card-5 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
  }

  .web-v3-all-breakpoints .card-5:hover {
    transform: translate(0, -5px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px 3px, rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
  }

  .web-v3-all-breakpoints .container-77 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-27-1 {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: center;
    position: relative;
    width: calc(100% + 10px);
  }

  .web-v3-all-breakpoints .heading-3-11 {
    flex: 1;
    flex-grow: 1;
    height: 24px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-139 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .paragraph-23 {
    align-self: stretch;
    height: 96px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-44 {
    left: 40px;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    height: 110px;
    overflow-y: auto;
    word-break: break-all;
    line-height: 1.5;
  }

  .web-v3-all-breakpoints .card-6 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-6:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-78 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .card-7 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-7:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-79 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-5 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .card-8 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-8:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-80 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-6 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .card-9 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-9:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-81 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-7 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .view-14 {
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .featured-works {
    align-items: center;
    background-color: var(--bglight-gray);
    display: flex;
    flex-direction: column;
    gap: 37px;
    padding: 48px 0px 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-24-1 {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text_label-5 {
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-82 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100vw;
  }

  .web-v3-all-breakpoints .frame-23 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-142 {
    color: var(--cod-gray);
    font-family: var(--font-family-arial-regular);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 30px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-83::-webkit-scrollbar {
    display: none;
    width: 0;
  }

  .web-v3-all-breakpoints .container-83 {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: center;
    overflow: hidden;
    overflow-x: scroll;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .case-card {
    align-items: flex-start;
    aspect-ratio: 0.78;
    background-color: var(--basic-colorwhite);
    border-radius: 16px;
    box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 459px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
    width: 356px;
  }

  .web-v3-all-breakpoints .case-card:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .container-54 {
    align-self: stretch;
    background-color: var(--wild-sand);
    height: 224px;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .image {
    background-image: url(../img/imagewithfallback-1@2x.png);
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 224px;
    left: 1px;
    position: absolute;
    top: 0;
    width: 356px;
  }

  .web-v3-all-breakpoints .linear {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    height: 224px;
    width: 356px;
  }

  .web-v3-all-breakpoints .frame-112 {
    align-items: flex-start;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 0;
    padding: 12px 10px;
    position: absolute;
    width: 356px;
  }

  .web-v3-all-breakpoints .hash-tag-1 {
    align-items: flex-start;
    background-color: var(--brand-colorprimary-light);
    border-radius: 33554400px;
    display: flex;
    height: 36px;
    padding: 0 16px;
    position: relative;
    width: 128px;
  }

  .web-v3-all-breakpoints .text-1-5 {
    align-items: flex-end;
    display: flex;
    height: 36px;
    line-height: 36px;
    flex: 1;
    justify-content: center;
    position: relative;
  }

  .web-v3-all-breakpoints .container-55 {
    align-self: stretch;
    height: 235px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-3-12 {
    display: flex;
    height: 24px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 256px;
  }

  .web-v3-all-breakpoints .text-48 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 96px;
  }

  .web-v3-all-breakpoints .paragraph-24 {

    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 51px;
  }

  .web-v3-all-breakpoints .text_label-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    height: auto;
  }

  .web-v3-all-breakpoints .container-56 {
    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 140px;
    height: 75px;
    border-top: 1px solid var(--mercury);
    padding: 25px 0px 0px;
    align-items: flex-start;
  }

  .web-v3-all-breakpoints .hash-tag-2 {
    align-items: center;
    background-color: var(--wild-sand);
    border-radius: 50px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 4px 10px;
    position: relative;
  }

  .web-v3-all-breakpoints .hash-tag-2:not(:last-child) {
    margin-right: 10px;
  }

  .web-v3-all-breakpoints .image-1 {
    background-image: url(../img/imagewithfallback-3@2x.png);
  }

  .web-v3-all-breakpoints .image-2 {
    background-image: url(../img/imagewithfallback-2@2x.png);
  }

  .web-v3-all-breakpoints .carousel-page-indicator-1 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 8px;
    height: 8px;
    justify-content: center;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-113-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
  }

  .web-v3-all-breakpoints .button-15 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 33554400px;
    height: 8px;
    position: relative;
    width: 32px;
  }

  .web-v3-all-breakpoints .button-9 {
    background-color: var(--mischka);
    border-radius: 33554400px;
    height: 8px;
    position: relative;
    width: 8px;
  }

  .web-v3-all-breakpoints .view-15 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0px 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-152 {
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .frame-26 {
    align-items: flex-start;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 48px;
    position: relative;
    padding: 12px;
  }

  .web-v3-all-breakpoints .contact {
    background-color: var(--bglight-gray);
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-19 {
    align-items: center;
    background-color: var(--basic-colorwhite);
    border-radius: 16px;
    box-shadow: 0px 1px 3px #0000004c, 0px 4px 8px 3px #00000026;
    display: flex;
    height: 552px;
    justify-content: space-between;
    padding: 16px;
    position: relative;
    width: 96vw;
  }

  .web-v3-all-breakpoints .container-84 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 24px;
    height: 524px;
    margin-bottom: -2.00px;
    margin-top: -2.00px;
    overflow: hidden;
    position: relative;
    width: 360px;
  }

  /* 1. 控制条外层：强制在一行显示 */
  .swiper-controls-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
  }

  /* 2. 强制重置分页器：取消绝对定位和 100% 宽度 */
  .custom-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: static !important;
    /* 撤销绝对定位 */
    width: auto !important;
    /* 撤销 100% 宽度 */
    display: flex !important;
    align-items: center;
    gap: 6px;
  }

  /* 3. 修复分页器内小圆点的默认边距 */
  .custom-pagination .swiper-pagination-bullet {
    margin: 0 !important;
  }

  /* 4. 自定义箭头样式（匹配你图中的红框） */
  .custom-prev,
  .custom-next {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    color: #4D79FF;
    transition: all 0.2s;
  }

  .custom-prev:hover,
  .custom-next:hover {
    border-color: #4D79FF;
    background: #F1F1F1;
    border-radius: 50%;
  }

  /* 隐藏 Swiper 可能自带的默认巨大蓝色箭头 */
  .swiper-button-next::after,
  .swiper-button-prev::after {
    display: none !important;
  }

  /* 只有一页时隐藏整个控制条（可选） */
  .swiper-button-lock,
  .swiper-pagination-lock {
    display: none !important;
  }

  .web-v3-all-breakpoints .container-85 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 46px;
    height: 370px;
    left: 40px;
    position: relative;
    top: 40px;
    width: 304px;
  }

  .web-v3-all-breakpoints .frame-32 {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 344px;
  }

  .web-v3-all-breakpoints .heading-2-8 {
    align-self: stretch;
    height: 30px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-153 {
    left: 0;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: -2px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-27 {
    height: 48px;
    opacity: 0.9;
    position: relative;
    width: 270px;
  }

  .web-v3-all-breakpoints .text-154 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: 0;
    width: 279px;
  }

  .web-v3-all-breakpoints .container-86 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 228px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-87 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 16px;
    height: 59px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-57 {
    align-items: flex-start;
    background-color: var(--white);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 44px;
    padding: 12px 12px 0px;
    position: relative;
    width: 44px;
  }

  .web-v3-all-breakpoints .icon-12 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-39 {
    height: 91.67%;
    left: 4.17%;
    position: absolute;
    top: 4.17%;
    width: 91.67%;
  }

  .web-v3-all-breakpoints .container-88 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 76px;
    margin-bottom: -17.00px;
    position: relative;
    width: 123.08px;
  }

  .web-v3-all-breakpoints .paragraph-28 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-155 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-29 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-3 {
    line-height: 24px;
  }

  .web-v3-all-breakpoints .container-58 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 16px;
    height: 52px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .icon-13 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-40 {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-41 {
    height: 75.00%;
    left: 4.17%;
    position: absolute;
    top: 12.50%;
    width: 91.67%;
  }

  .web-v3-all-breakpoints .container-89 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 52px;
    position: relative;
    width: 195.58px;
  }

  .web-v3-all-breakpoints .paragraph-30 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-156 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-31 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .servicetaohomecomtw-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .icon-14 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-42 {
    height: 91.67%;
    left: 12.50%;
    position: absolute;
    top: 4.17%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .vector-43 {
    height: 33.33%;
    left: 33.33%;
    position: absolute;
    top: 25.00%;
    width: 33.33%;
  }

  .web-v3-all-breakpoints .container-90 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 52px;
    position: relative;
    width: 221.5px;
  }

  .web-v3-all-breakpoints .paragraph-32 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-157 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-33 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x181-2-f-2 {
    line-height: 24px;
  }

  .web-v3-all-breakpoints .container-91 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    height: 536px;
    margin-bottom: -8.00px;
    margin-top: -8.00px;
    padding: 64px 40px 0px 63px;
    position: relative;
    width: 544px;
  }

  .web-v3-all-breakpoints .form {
    align-self: stretch;
    height: 456px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-92 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    height: 78px;
    left: 0;
    position: absolute;
    top: 0;
    width: 384px;
  }

  .web-v3-all-breakpoints .container-93 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-158 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .x-input {
    align-items: center;
    align-self: stretch;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-color: var(--mercury);
    display: flex;
    height: 50px;
    padding: 12px 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .name-1 {
    letter-spacing: 0;
    line-height: normal;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-94 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-159 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .hellonurencycom-1 {
    letter-spacing: 0;
    line-height: normal;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-95 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 78px;
    left: 0;
    position: absolute;
    top: 102px;
    width: 384px;
  }

  .web-v3-all-breakpoints .text-160 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-input-3 {
    align-items: center;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    border-radius: 8px;
    display: flex;
    height: 42px;
    overflow: hidden;
    padding: 8px 16px;
    position: relative;
    width: 100%;
  }

  /* 你原本的樣式保持不變 */
  .web-v3-all-breakpoints .text-input-3 {
    align-items: center;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    /* 確保變量已定義，或改為具體顏色如 #e2e8f0 */
    border-radius: 8px;
    display: flex;
    height: 42px;
    overflow: hidden;
    /* 這個屬性會切掉內容，所以選單不能放在裡面 */
    padding: 8px 16px;
    position: relative;
    width: 100%;
    background: #fff;
  }

  /* 修正下拉選單樣式 */
  .dropdown-list {
    position: absolute;
    top: 100%;
    /* 從 label + text-input 的下方開始 */
    left: 0;
    width: 100%;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    /* 確保在最上層 */
    display: none;
    /* 預設隱藏 */
  }

  /* 選單顯示時 */
  .dropdown-list.show {
    display: block;
  }

  .option-item {
    padding: 10px 16px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
  }

  .option-item:hover {
    background-color: #f3f4f6;
    color: #4D79FF;
  }

  /* 箭頭旋轉效果 */
  #dropdown-arrow {
    transition: transform 0.3s ease;
  }

  .rotate-arrow {
    transform: rotate(180deg);
  }

  .web-v3-all-breakpoints .frame-20-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 230px;
    justify-content: center;
    margin-right: -3.00px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-161 {
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .polygon-1-1 {
    height: 8.66px;
    position: relative;
    width: 12.77px;
  }

  .web-v3-all-breakpoints .container-96 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 134px;
    left: 0;
    position: absolute;
    top: 204px;
    width: 384px;
  }

  .web-v3-all-breakpoints .text-162 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-area-1 {
    align-items: flex-start;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    border-radius: 8px;
    display: flex;
    height: 106px;
    overflow: hidden;
    padding: 12px 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-163 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -2.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .button-16 {
    align-items: center;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    left: 233px;
    position: absolute;
    top: 379px;
    width: 148px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-16:hover {
    background: rgb(62, 98, 211);
  }

  .web-v3-all-breakpoints .footer-2 {
    align-items: flex-start;
    background-color: var(--bunker);
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 399px;
    padding: 24px 16px 0px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-97 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 32px;
    height: 275px;
    padding: 16px 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-98 {
    width: 100%;
    height: 224px;
    margin-right: -16.00px;
    position: relative;
    display: flex;
    justify-content: space-between;
  }

  .web-v3-all-breakpoints .container-99 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 268px;
    width: 319px;
  }

  .web-v3-all-breakpoints .logo_optimizer-3 {
    height: 46px;
    width: 181px;
  }

  .web-v3-all-breakpoints .group-6 {
    height: 44px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 42px;
  }

  .web-v3-all-breakpoints .group-7 {
    height: 36px;
    left: 50px;
    position: absolute;
    top: 5px;
    width: 130px;
  }

  .web-v3-all-breakpoints .container-100 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 116px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .paragraph-34 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x181-2-f-3 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .paragraph-35 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-4 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .paragraph-36 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .e-mail-servicetaohomecomtw-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-37 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-5 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .heading-4-1 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .follow-us-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .container-101 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 12px;
    height: 34px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .icon-link-1 {
    height: 34px;
    position: relative;
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-width: 0px;
    justify-content: center;
    border-color: transparent;
    background: #2c333d;
    border-radius: 10px;
  }

  .web-v3-all-breakpoints .icon-link-1:hover {
    background: rgb(77, 120, 255);
  }

  .web-v3-all-breakpoints .frame-116 {
    align-items: start;
    display: flex;
    gap: 11px;
  }

  .web-v3-all-breakpoints .container-59 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-16-2 {
    letter-spacing: 5.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .list-4 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-button-footer {
    padding: 0px 4px;
  }

  .web-v3-all-breakpoints .text-49 {
    letter-spacing: 1.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .text-49:hover {
    background-color: rgb(113, 147, 255);
    color: #FFFFFF;
  }

  .web-v3-all-breakpoints .frame-115-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 0px 4px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-102 {
    align-items: center;
    align-self: stretch;
    border-color: var(--ebony-clay);
    border-top-style: solid;
    border-top-width: 1px;
    display: flex;
    flex-direction: column;
    height: 57px;
    justify-content: center;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .paragraph-38 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x2025-optimizer-all-rights-reserved-1 {
    left: calc(50.00% - 140px);
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .ai {
    letter-spacing: 0;
    line-height: 24px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .animation {
    grid-row: 1 / 2;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .app {
    letter-spacing: 0;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .frame-111 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
  }

  .web-v3-all-breakpoints .image-3 {
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 224px;
    left: 1px;
    position: absolute;
    top: 0;
    width: 356px;
  }

  .web-v3-all-breakpoints .label {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .list-item {
    align-self: stretch;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .logo_optimizer {
    aspect-ratio: 3.94;
    position: relative;
  }

  .web-v3-all-breakpoints .phone {
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .tab {
    align-items: center;
    display: flex;
    position: relative;
  }

  .web-v3-all-breakpoints .text-1 {
    letter-spacing: 0;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-button {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }



  .web-v3-all-breakpoints .text-button-footer-13 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 0px 4px;
    position: relative;
  }

  .web-v3-all-breakpoints .text_label {
    letter-spacing: 0;
    line-height: 24px;
  }

  .web-v3-all-breakpoints .title {
    flex: 0 0 auto;
    position: relative;
  }

  .web-v3-all-breakpoints .x181-2-f {
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

}

/* screen - web- */

@media screen and (min-width: 1280px) {
  .phone-screen {
    display: none;
  }

  .web-screen {
    width: 100%;
  }

  .web-v3-all-breakpoints {
    background-color: var(--basic-colorwhite);
    display: flex;
    width: 100%;
  }

  .web-v3-all-breakpoints .content-1 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .main-content-1 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .hero-1 {
    height: 666px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .hero-section-bg {
    display: flex;
    height: 666px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .swiper-mask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
  }

  .web-v3-all-breakpoints .container-60 {
    background-image: url(../img/container.gif);
    background-position: 50% 50%;
    background-size: cover;
    height: 666px;
    opacity: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-60.bp3-animate-enter {
    animation: bp3-animate-enter-frames 0.20s linear 0.00s 1 normal forwards;
    opacity: 0;
  }

  @keyframes bp3-animate-enter-frames {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  .web-v3-all-breakpoints .container-61 {
    align-items: flex-end;
    display: flex;
    height: 167px;
    justify-content: space-between;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 0px;
    position: absolute;
    top: 356px;
    width: 960px;
  }

  .web-v3-all-breakpoints .text-50 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: -4.00px;
    position: relative;
    width: 520px;
  }

  .web-v3-all-breakpoints .title-2 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 256px;
  }

  .web-v3-all-breakpoints .optimizer-1 {
    align-self: stretch;
    letter-spacing: 8.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-88 {
    align-items: center;
    color: var(--basic-colorwhite);
    font-family: var(--font-family-arial-regular);
    font-size: 32px;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    line-height: 36px;
    position: relative;
    width: 256px;
  }

  .web-v3-all-breakpoints .paragraph-25 {
    align-self: stretch;
    height: 52px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text_label-3 {
    align-items: flex-end;
    display: flex;
    height: 48px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: -1px;
    width: 520px;
  }

  .web-v3-all-breakpoints .buttons-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 12px;
    position: relative;
  }

  .web-v3-all-breakpoints .button-10 {
    align-items: center;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 148px;
  }

  .web-v3-all-breakpoints .button-10:hover {
    background: rgb(62, 98, 211);
    cursor: pointer;
  }

  .web-v3-all-breakpoints .frame-111-2 {
    gap: 8px;
  }

  .web-v3-all-breakpoints .text-21 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;

  }

  .text-button .text-21:hover {
    color: rgb(184, 201, 255);
    --letter-spacing: 0px;
    text-decoration-line: underline;
    text-underline-position: from-font;
    text-decoration-thickness: from-font;
    text-decoration-style: solid;
    font-weight: bold;

  }

  .web-v3-all-breakpoints .icon-7 {
    height: 20px;
    position: relative;
    width: 20px;
  }

  .web-v3-all-breakpoints .button-11 {
    align-items: center;
    border: 2px solid;
    border-color: var(--basic-colorwhite);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    position: relative;
    width: 156px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-11:hover {
    background: rgba(46, 76, 167, 0.3);
    border: 2px solid #CAD6FF;
  }

  .web-v3-all-breakpoints .frame-111-3 {
    gap: 12px;
  }

  .web-v3-all-breakpoints .header {
    -webkit-backdrop-filter: blur(4px) brightness(100%);
    align-items: center;
    backdrop-filter: blur(4px) brightness(100%);
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0px 1px 2px -1px #0000001a, 0px 1px 3px #0000001a;
    display: flex;
    flex-direction: column;
    height: 72px;
    left: 0;
    padding: 16px 16px 0px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
  }

  .web-v3-all-breakpoints .navigation-1 {
    align-items: center;
    display: flex;
    height: 40px;
    justify-content: space-between;
    position: relative;
    width: 960px;
  }

  .web-v3-all-breakpoints .logo_optimizer-2 {
    height: 36px;
    width: 142px;
  }

  .web-v3-all-breakpoints .group-4 {
    height: 35px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 33px;
  }

  .web-v3-all-breakpoints .group-5 {
    height: 28px;
    left: 39px;
    position: absolute;
    top: 4px;
    width: 102px;
  }

  .web-v3-all-breakpoints .container-62 {
    align-items: center;
    display: flex;
    gap: 32px;
    height: 24px;
    position: relative;
    width: 528px;
  }

  .web-v3-all-breakpoints .list-5 {
    align-items: center;
    display: flex;
    gap: 32px;
    height: 24px;
    margin-right: -115.30px;
    position: relative;
    width: 643.3px;
  }

  .web-v3-all-breakpoints .button-12 {
    align-items: center;
    aspect-ratio: 3.06;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 37px;
    justify-content: center;
    position: relative;
    width: 112px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-12:hover {
    background: rgb(62, 98, 211);
  }

  .web-v3-all-breakpoints .text-92 {
    color: var(--basic-colorwhite);
    font-family: var(--font-family-arial-bold);
    font-size: var(--font-size-xs);
    font-weight: 500;
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .view-9 {
    align-items: center;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 60px 0;
  }

  .web-v3-all-breakpoints .container-63 {
    align-self: stretch;
    position: relative;
    margin-bottom: 60px;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-2-7 {
    display: flex;
    justify-content: center;
  }

  .web-v3-all-breakpoints .text-93 {
    align-items: flex-end;
    color: var(--cod-gray);
    display: flex;
    font-family: var(--font-family-arial-regular);
    font-size: 36px;
    font-weight: 400;
    justify-content: center;
    letter-spacing: 0;
    line-height: 30px;
    text-align: center;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-26 {
    display: flex;
    justify-content: center;
    margin-top: 20px;

  }

  .web-v3-all-breakpoints .text-94 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-left: 33px;
    margin-top: -1px;
    text-align: center;
    white-space: nowrap;
    width: 416px;
  }

  .web-v3-all-breakpoints .container-64 {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    width: 960px;
  }

  .web-v3-all-breakpoints .animation-1 {
    grid-column: 1 / 2;
  }

  .web-v3-all-breakpoints .card-3 {
    background: linear-gradient(117deg, rgba(249, 250, 251, 1) 0%, rgba(255, 255, 255, 1) 100%);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 16px;
    cursor: pointer;
    display: flex;
    height: 183px;
    position: relative;
    transition: all 0.2s ease;
    width: 464px;
  }

  .web-v3-all-breakpoints .card-3:hover {
    transform: translate(0, -5px);
    box-shadow: 0px 12px 5px -8px rgba(0, 0, 0, 0.2);
  }

  .web-v3-all-breakpoints .container-48 {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    height: 117px;
    margin-left: 33px;
    margin-top: 33px;
    position: relative;
    width: 398px;
  }

  .web-v3-all-breakpoints .container-49 {
    align-items: center;
    background-color: var(--pattens-blue);
    border-radius: 14px;
    display: flex;
    height: 64px;
    justify-content: center;
    position: relative;
    width: 64px;
  }

  .web-v3-all-breakpoints .container-49 img {
    height: 32px;
    width: 32px;
  }

  .web-v3-all-breakpoints .icon-8 {
    height: 32px;
    overflow: hidden;
    position: relative;
    width: 32px;
  }

  .web-v3-all-breakpoints .vector-24 {
    height: 83.33%;
    left: -31532.29%;
    position: absolute;
    top: 3708.33%;
    width: 83.33%;
  }

  .web-v3-all-breakpoints .vector-25 {
    height: 50.00%;
    left: -31515.62%;
    position: absolute;
    top: 3725.00%;
    width: 50.00%;
  }

  .web-v3-all-breakpoints .vector-26 {
    height: 16.67%;
    left: -31498.96%;
    position: absolute;
    top: 3741.67%;
    width: 16.67%;
  }

  .web-v3-all-breakpoints .container-50 {
    align-items: flex-start;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-grow: 1;
    gap: 12px;
    height: 117px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-51 {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 12px;
    height: 27px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-3-8 {
    height: 27px;
    position: relative;
    width: 90px;
  }

  .web-v3-all-breakpoints .text-95 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-24 {
    height: 24px;
    position: relative;
    width: 16px;
  }

  .web-v3-all-breakpoints .text-96 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .heading-3-9 {
    height: 27px;
    position: relative;
    width: 72px;
  }

  .web-v3-all-breakpoints .text-97 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-21 {
    align-self: stretch;
    height: 78px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-25 {
    left: 0;
    letter-spacing: 0;
    line-height: 26px;
    position: absolute;
    top: -1px;
    width: 304px;
  }

  .web-v3-all-breakpoints .animation-2 {
    grid-column: 2 / 3;
  }

  .web-v3-all-breakpoints .vector-27 {
    height: 83.33%;
    left: -33082.29%;
    position: absolute;
    top: 3708.33%;
    width: 83.33%;
  }

  .web-v3-all-breakpoints .vector-28 {
    height: 50.00%;
    left: -33065.62%;
    position: absolute;
    top: 3725.00%;
    width: 50.00%;
  }

  .web-v3-all-breakpoints .vector-29 {
    height: 16.67%;
    left: -33048.96%;
    position: absolute;
    top: 3741.67%;
    width: 16.67%;
  }

  .web-v3-all-breakpoints .text-99 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-100 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-101 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .view-10 {
    align-self: stretch;
    background-color: var(--bglight-gray);
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-11 {
    background-color: var(--bglight-gray);
    display: flex;
    justify-content: center;
    gap: 33px;
    padding: 48px 0;
  }

  .web-v3-all-breakpoints .container-65 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 36px;
    position: relative;
    width: 304px;
  }

  .web-v3-all-breakpoints .frame-12 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 36px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-12 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .title-1 {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    gap: 8px;
    padding: 8px 12px;
  }

  .web-v3-all-breakpoints .icon-9 {
    height: 24px;
    position: relative;
    width: 24px;
  }

  .web-v3-all-breakpoints .frame-3-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 4px 0px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-27 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .line-1-1 {
    flex: 1;
    flex-grow: 1;
    height: 2px;
    object-fit: cover;
    position: relative;
  }

  .web-v3-all-breakpoints .frame-1-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 10px 16px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-136 {
    letter-spacing: 0;
    line-height: 38px;
    margin-top: -1.00px;
    position: relative;
    width: fit-content;
  }

  .web-v3-all-breakpoints .text_label-4 {
    margin-top: -1.00px;
    position: relative;
    width: 266px;
  }

  .web-v3-all-breakpoints .container-66 {
    align-self: stretch;
    height: 52px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-17 {
    align-items: center;
    display: inline-flex;
    gap: 16px;
    padding: 0px 16px;
    position: relative;
    top: 8px;
  }

  .web-v3-all-breakpoints .button-13 {
    border: 2px solid;
    border-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    height: 48px;
    position: relative;
    width: 272px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-13:hover {
    background-color: rgb(237, 241, 255);
  }

  .web-v3-all-breakpoints .text-137 {
    left: calc(50.00% - 102px);
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: calc(50.00% - 12px);
    width: 204px;
  }

  .web-v3-all-breakpoints .v2-card-square {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: relative;
    width: 608px;
  }

  .web-v3-all-breakpoints .tab-3 {
    background-color: var(--mystic);
    border-radius: 100px;
    height: 48px;
    padding: 2px;
    width: 284px;
  }

  .web-v3-all-breakpoints .tab-4 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 50px;
    gap: 10px;
    height: 42px;
    justify-content: center;
    padding: 10px 36px;
    width: 140px;
  }

  .web-v3-all-breakpoints .text-28 {
    letter-spacing: 0;
    line-height: 24px;
    margin-left: -6.00px;
    margin-right: -6.00px;
    margin-top: -2.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .tab-5 {
    border-radius: 50px;
    gap: 10px;
    height: 42px;
    justify-content: center;
    padding: 10px 36px;
    width: 140px;
  }

  .web-v3-all-breakpoints .frame-120 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: flex-end;
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
  }

  /* 隱藏 Swiper 溢出內容 */
  .frame-120.swiper {
    overflow: hidden;
    width: 100%;
  }

  /* 行銷服務選中時 (背景藍，文字白) */
  .tab-4.active {
    background-color: #4d79ff !important;
    /* 你的藍色 */
  }

  .tab-4.active .text-28 {
    color: #ffffff !important;
  }

  /* 系統建置選中時 (背景藍，文字白) */
  .tab-5.active {
    background-color: #4d79ff !important;
  }

  .tab-5.active .text-28 {
    color: #ffffff !important;
  }

  /* 非選中狀態的文字顏色修正 */
  .tab-4:not(.active) .text-28,
  .tab-5:not(.active) .text-28 {
    color: #6d7278 !important;
    /* 灰字 */
  }

  .tab-4:not(.active),
  .tab-5:not(.active) {
    background-color: #e8ebee !important;
    /* 灰底 */
  }

  .web-v3-all-breakpoints .container-67 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 234px minmax(0, 1fr);
    height: 480px;
    width: 608px;
  }

  .web-v3-all-breakpoints .container-68 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 100%;
    position: relative;
    transition: all 0.2s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-52 {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 12px;
    height: 32px;
    left: 25px;
    position: absolute;
    top: 25px;
    transition: all 0.2s ease;
    width: 242px;
  }

  .web-v3-all-breakpoints .container-52:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-33 {
    height: 32px;
    position: relative;
    width: 32.95px;
  }

  .web-v3-all-breakpoints .text-1-2 {
    left: 0;
    line-height: 32px;
    position: absolute;
    top: -1px;
  }

  .web-v3-all-breakpoints .text-1-2 img {
    width: 32px;
    height: 32px;
  }

  .web-v3-all-breakpoints .agent-linebot-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-3 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 96px;
    left: 25px;
    position: absolute;
    top: 73px;
    width: 242px;
  }

  .web-v3-all-breakpoints .list-item-1 {
    height: 24px;
  }

  .web-v3-all-breakpoints .icon-10 {
    height: 18px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 2px;
    width: 18px;
  }

  .web-v3-all-breakpoints .vector-30 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 4175.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-34 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 160px;
  }

  .web-v3-all-breakpoints .line-2 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 180px;
  }

  .web-v3-all-breakpoints .list-item-2 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-31 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 3975.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .ai-1 {
    height: 24px;
    margin-top: -1px;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-3 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-32 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 3775.00%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-38 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 128px;
  }

  .web-v3-all-breakpoints .text-1-3 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    width: 144px;
  }

  .web-v3-all-breakpoints .button-8 {
    display: flex;
    height: 24px;
    left: 25px;
    position: absolute;
    top: 185px;
    width: 88px;
  }

  .web-v3-all-breakpoints .text-1-4 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    text-align: center;
    text-decoration: underline;
    width: 64px;
  }

  .web-v3-all-breakpoints .container-69 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 298px;
  }

  .web-v3-all-breakpoints .heading-3-10 {
    height: 27px;
    position: relative;
    width: 108px;
  }

  .web-v3-all-breakpoints .geo-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-4 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-33 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5541.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-52 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 175px;
  }

  .web-v3-all-breakpoints .google-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 196px;
  }

  .web-v3-all-breakpoints .list-item-5 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-34 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5341.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-108 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-6 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-35 {
    height: 45.83%;
    left: -56083.33%;
    position: absolute;
    top: 5141.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-53 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 96px;
  }

  .web-v3-all-breakpoints .text-109 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 128px;
  }

  .web-v3-all-breakpoints .container-70 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 298px;
  }

  .web-v3-all-breakpoints .app-2 {
    left: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
  }

  .web-v3-all-breakpoints .list-item-7 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-36 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5541.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-54 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 176px;
  }

  .web-v3-all-breakpoints .app-3 {
    height: 24px;
    line-height: 24px;
    margin-top: -1px;
    width: 193px;
  }

  .web-v3-all-breakpoints .list-item-8 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-37 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5341.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-55 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 208px;
  }

  .web-v3-all-breakpoints .text-112 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 176px;
  }

  .web-v3-all-breakpoints .list-item-9 {
    height: 24px;
  }

  .web-v3-all-breakpoints .vector-38 {
    height: 45.83%;
    left: -54361.11%;
    position: absolute;
    top: 5141.67%;
    width: 66.67%;
  }

  .web-v3-all-breakpoints .text-56 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 163px;
  }

  .web-v3-all-breakpoints .seo-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 178px;
  }

  .web-v3-all-breakpoints .container-71 {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    /* 自动平分 */
    /* 不要写死 grid-template-rows 的高度，除非你确定图片永远是那个尺寸 */
    grid-template-rows: auto auto;

    width: 100%;
    /* 这里的宽度要跟随 Swiper Slide */
    max-width: 608px;
    /* 如果你想限制最大宽度，用 max-width */
    height: auto;
    /* 让内容撑开 */
  }

  .web-v3-all-breakpoints .container-72 {
    background-color: var(--basic-colorwhite);
    border: 1px solid var(--mercury);
    border-radius: 10px;
    cursor: pointer;

    width: 100%;
    /* 不要写死 298px，让 Grid 容器控制它 */
    min-height: 234px;
    /* 如果非要有高度，用 min-height 代替 height */

    position: relative;
    transition: all 0.5s ease;
  }

  .web-v3-all-breakpoints .container-72:hover {
    /* transform: scale(1.1); */
  }

  /* Swiper 容器設定 */
  .container-83.swiper {
    width: 100%;
    overflow: hidden;
    padding: 24px;
    margin: -24px;
  }

  /* 模擬原本的卡片佈局樣式 (請確保你的原始 CSS 也有包含這些 class) */
  .case-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    height: auto;
  }

  /* 自定義分頁器：選中長條，未選中圓點 */
  .custom-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    bottom: 10px !important;
  }

  .custom-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background-color: #D1D5DB;
    /* 未選中顏色 */
    opacity: 1;
    border-radius: 50%;
    transition: all 0.3s ease;
  }

  .custom-pagination .swiper-pagination-bullet-active {
    width: 24px;
    /* 長條效果 */
    border-radius: 4px;
    background-color: #4D79FF;
    /* 選中藍色 */
  }

  /* 為了讓圖片有底色（模擬原本 image 類名） */
  .image,
  .image-1,
  .image-2 {
    background-color: #f0f0f0;
    height: 200px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-39 {
    height: 32px;
    position: relative;
    width: 31.28px;
  }

  .web-v3-all-breakpoints .text-115 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-10 {
    height: 24px;
  }

  .web-v3-all-breakpoints .icon-11 {
    height: 18px;
    left: 0;
    position: absolute;
    top: 2px;
    width: 18px;
  }

  .web-v3-all-breakpoints .vector-23 {
    height: 54.17%;
    left: 12.50%;
    position: absolute;
    top: 20.83%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .text-116 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-11 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-43 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 144px;
  }

  .web-v3-all-breakpoints .list-item-12 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-73 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-73:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .container-53 {
    align-items: center;
    display: flex;
    gap: 12px;
    height: 32px;
    left: 25px;
    position: absolute;
    top: 25px;
    width: 242px;
  }

  .web-v3-all-breakpoints .heading-3-13 {
    height: 27px;
    position: relative;
    width: 126px;
  }

  .web-v3-all-breakpoints .text-121 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-13 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-57 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 206px;
  }

  .web-v3-all-breakpoints .ig-reels-tik-tok-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 206px;
  }

  .web-v3-all-breakpoints .list-item-14 {
    height: 24px;
  }

  .web-v3-all-breakpoints .list-item-15 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-74 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 234px;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-74:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-126 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-item-16 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-58 {
    display: flex;
    height: 24px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 155px;
  }

  .web-v3-all-breakpoints .ptt-dcard-1 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 155px;
  }

  .web-v3-all-breakpoints .list-item-17 {
    height: 24px;
  }

  .web-v3-all-breakpoints .text-127 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 160px;
  }

  .web-v3-all-breakpoints .list-item-18 {
    height: 24px;
  }

  .web-v3-all-breakpoints .container-75 {
    background-color: var(--basic-colorwhite);
    border: 1px solid;
    border-color: var(--mercury);
    border-radius: 10px;
    cursor: pointer;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 234px;
    position: relative;
    transition: all 0.5s ease;
    width: 298px;
  }

  .web-v3-all-breakpoints .container-75:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .text-131 {
    left: 0;
    letter-spacing: 0;
    line-height: 27px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .list-6 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100px;
    left: 25px;
    position: absolute;
    top: 73px;
    width: 242px;
  }

  .web-v3-all-breakpoints .list-item-19 {
    height: 28px;
  }

  .web-v3-all-breakpoints .text-59 {
    display: flex;
    height: 28px;
    left: 26px;
    position: absolute;
    top: 0;
    width: 216px;
  }

  .web-v3-all-breakpoints .fb-google {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    width: 211px;
  }

  .web-v3-all-breakpoints .list-item-20 {
    height: 24px;
  }

  .web-v3-all-breakpoints .list-item-21 {
    height: 24px;
  }

  .web-v3-all-breakpoints .button-14 {
    display: flex;
    height: 24px;
    left: 25px;
    position: absolute;
    top: 189px;
    width: 88px;
  }

  .web-v3-all-breakpoints .view-13 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 48px 160px 60px 160px;
    position: relative;
    width: 1280px;
  }

  .web-v3-all-breakpoints .container-76 {
    align-self: stretch;
    height: 154px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-11-1 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .view-8 {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;
    width: 304px;
  }

  .web-v3-all-breakpoints .frame-25 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-2-6 {
    align-self: stretch;
    height: 43px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-24 {
    align-items: center;
    display: flex;
    gap: 10px;
    padding: 10px 32px;
    position: relative;
    width: 538px;
  }

  .web-v3-all-breakpoints .paragraph-22 {
    align-items: center;
    align-self: stretch;
    display: flex;
    gap: 10px;
    height: 47px;
    padding: 0px 32px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .ai-2 {
    position: relative;
    width: fit-content;
  }

  .web-v3-all-breakpoints .card-4 {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 184px fit-content(100%);
    width: 960px;
  }

  .web-v3-all-breakpoints .card-5 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-5:hover {
    transform: translate(0, -5px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px 3px, rgba(0, 0, 0, 0.3) 0px 1px 3px 0px;
  }

  .web-v3-all-breakpoints .container-77 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-27-1 {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: center;
    position: relative;
    width: calc(100% + 10px);
  }

  .web-v3-all-breakpoints .heading-3-11 {
    flex: 1;
    flex-grow: 1;
    height: 24px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-139 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .paragraph-23 {
    align-self: stretch;
    height: 96px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-44 {
    left: 40px;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% - 48px);
  }

  .web-v3-all-breakpoints .card-6 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-6:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-78 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .card-7 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-7:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-79 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-5 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .card-8 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-8:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-80 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-6 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .card-9 {
    align-items: flex-start;
    background-color: var(--bglight-gray);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 12px;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    height: 184px;
    padding: 24px 24px 0px;
    position: relative;
    transition: all 0.2s ease;
    width: 304px;
  }

  .web-v3-all-breakpoints .card-9:hover {
    transform: translate(0, -5px);
  }

  .web-v3-all-breakpoints .container-81 {
    align-self: stretch;
    height: 28px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x-7 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    width: calc(100% + 1px);
  }

  .web-v3-all-breakpoints .view-14 {
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .featured-works {
    align-items: center;
    background-color: var(--bglight-gray);
    display: flex;
    flex-direction: column;
    gap: 37px;
    padding: 48px 0px 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-24-1 {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 960px;
  }

  .web-v3-all-breakpoints .text_label-5 {
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-82 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 960px;
  }

  .web-v3-all-breakpoints .frame-23 {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 10px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-142 {
    color: var(--cod-gray);
    font-family: var(--font-family-arial-regular);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 30px;
    margin-top: -1.00px;
    position: relative;
    text-align: center;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-83::-webkit-scrollbar {
    display: none;
    width: 0;
  }

  .web-v3-all-breakpoints .container-83 {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: center;
    overflow: hidden;
    overflow-x: scroll;
    position: relative;
    width: 960px;
  }

  .web-v3-all-breakpoints .case-card {
    align-items: flex-start;
    aspect-ratio: 0.78;
    background-color: var(--basic-colorwhite);
    border-radius: 16px;
    box-shadow: 0px 4px 6px -4px #0000001a, 0px 10px 15px -3px #0000001a;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: 459px;
    overflow: hidden;
    position: relative;
    transition: all 0.2s ease;
    width: 356px;
  }

  .web-v3-all-breakpoints .case-card:hover {
    transform: scale(1.1);
  }

  .web-v3-all-breakpoints .container-54 {
    align-self: stretch;
    background-color: var(--wild-sand);
    height: 224px;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .image {
    background-image: url(../img/imagewithfallback-1@2x.png);
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 224px;
    left: 1px;
    position: absolute;
    top: 0;
    width: 356px;
  }

  .web-v3-all-breakpoints .linear {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    height: 224px;
    width: 356px;
  }

  .web-v3-all-breakpoints .frame-112 {
    align-items: flex-start;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    left: 0;
    padding: 12px 10px;
    position: absolute;
    width: 356px;
  }

  .web-v3-all-breakpoints .hash-tag-1 {
    align-items: flex-start;
    background-color: var(--brand-colorprimary-light);
    border-radius: 33554400px;
    display: flex;
    height: 36px;
    padding: 0 16px;
    position: relative;
    width: 128px;
  }

  .web-v3-all-breakpoints .text-1-5 {
    align-items: flex-end;
    display: flex;
    height: 36px;
    line-height: 36px;
    flex: 1;
    justify-content: center;
    position: relative;
  }

  .web-v3-all-breakpoints .container-55 {
    align-self: stretch;
    height: 235px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .heading-3-12 {
    display: flex;
    height: 24px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 256px;
  }

  .web-v3-all-breakpoints .text-48 {
    height: 24px;
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -1px;
    white-space: nowrap;
    width: 96px;
  }

  .web-v3-all-breakpoints .paragraph-24 {

    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 51px;
  }

  .web-v3-all-breakpoints .text_label-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
    height: auto;
  }

  .web-v3-all-breakpoints .container-56 {
    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 140px;
    height: 75px;
    border-top: 1px solid var(--mercury);
    padding: 25px 0px 0px;
    align-items: flex-start;
  }

  .web-v3-all-breakpoints .hash-tag-2 {
    align-items: center;
    background-color: var(--wild-sand);
    border-radius: 50px;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 4px 10px;
    position: relative;
  }

  .web-v3-all-breakpoints .hash-tag-2:not(:last-child) {
    margin-right: 10px;
  }

  .web-v3-all-breakpoints .image-1 {
    background-image: url(../img/imagewithfallback-3@2x.png);
  }

  .web-v3-all-breakpoints .image-2 {
    background-image: url(../img/imagewithfallback-2@2x.png);
  }

  .web-v3-all-breakpoints .carousel-page-indicator-1 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 8px;
    height: 8px;
    justify-content: center;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .frame-113-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 8px;
    position: relative;
  }

  .web-v3-all-breakpoints .button-15 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 33554400px;
    height: 8px;
    position: relative;
    width: 32px;
  }

  .web-v3-all-breakpoints .button-9 {
    background-color: var(--mischka);
    border-radius: 33554400px;
    height: 8px;
    position: relative;
    width: 8px;
  }

  .web-v3-all-breakpoints .view-15 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px 0px 24px;
    position: relative;
    width: 1280px;
  }

  .web-v3-all-breakpoints .text-152 {
    letter-spacing: 0;
    line-height: 24px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .frame-26 {
    align-items: flex-start;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 48px;
    position: relative;
  }

  .web-v3-all-breakpoints .contact {
    background-color: var(--bglight-gray);
    position: relative;
    width: 960px;
  }

  .web-v3-all-breakpoints .frame-19 {
    align-items: center;
    background-color: var(--basic-colorwhite);
    border-radius: 16px;
    box-shadow: 0px 1px 3px #0000004c, 0px 4px 8px 3px #00000026;
    display: flex;
    height: 552px;
    justify-content: space-between;
    padding: 16px;
    position: relative;
    width: 960px;
  }

  .web-v3-all-breakpoints .container-84 {
    background-color: var(--brand-colorprimary-light);
    border-radius: 24px;
    height: 524px;
    margin-bottom: -2.00px;
    margin-top: -2.00px;
    overflow: hidden;
    position: relative;
    width: 360px;
  }

  /* 1. 控制条外层：强制在一行显示 */
  .swiper-controls-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    width: 100%;
  }

  /* 2. 强制重置分页器：取消绝对定位和 100% 宽度 */
  .custom-pagination.swiper-pagination-bullets.swiper-pagination-horizontal {
    position: static !important;
    /* 撤销绝对定位 */
    width: auto !important;
    /* 撤销 100% 宽度 */
    display: flex !important;
    align-items: center;
    gap: 6px;
  }

  /* 3. 修复分页器内小圆点的默认边距 */
  .custom-pagination .swiper-pagination-bullet {
    margin: 0 !important;
  }

  /* 4. 自定义箭头样式（匹配你图中的红框） */
  .custom-prev,
  .custom-next {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
    cursor: pointer;
    color: #4D79FF;
    transition: all 0.2s;
  }

  .custom-prev:hover,
  .custom-next:hover {
    border-color: #4D79FF;
    background: #F1F1F1;
    border-radius: 50%;
  }

  /* 隐藏 Swiper 可能自带的默认巨大蓝色箭头 */
  .swiper-button-next::after,
  .swiper-button-prev::after {
    display: none !important;
  }

  /* 只有一页时隐藏整个控制条（可选） */
  .swiper-button-lock,
  .swiper-pagination-lock {
    display: none !important;
  }

  .web-v3-all-breakpoints .container-85 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 46px;
    height: 370px;
    left: 40px;
    position: relative;
    top: 40px;
    width: 304px;
  }

  .web-v3-all-breakpoints .frame-32 {
    align-items: flex-start;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 16px;
    position: relative;
    width: 344px;
  }

  .web-v3-all-breakpoints .heading-2-8 {
    align-self: stretch;
    height: 30px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-153 {
    left: 0;
    letter-spacing: 0;
    line-height: 30px;
    position: absolute;
    top: -2px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-27 {
    height: 48px;
    opacity: 0.9;
    position: relative;
    width: 270px;
  }

  .web-v3-all-breakpoints .text-154 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: 0;
    width: 279px;
  }

  .web-v3-all-breakpoints .container-86 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
    height: 228px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-87 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 16px;
    height: 59px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-57 {
    align-items: flex-start;
    background-color: var(--white);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    height: 44px;
    padding: 12px 12px 0px;
    position: relative;
    width: 44px;
  }

  .web-v3-all-breakpoints .icon-12 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-39 {
    height: 91.67%;
    left: 4.17%;
    position: absolute;
    top: 4.17%;
    width: 91.67%;
  }

  .web-v3-all-breakpoints .container-88 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 76px;
    margin-bottom: -17.00px;
    position: relative;
    width: 123.08px;
  }

  .web-v3-all-breakpoints .paragraph-28 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-155 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-29 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-3 {
    line-height: 24px;
  }

  .web-v3-all-breakpoints .container-58 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 16px;
    height: 52px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .icon-13 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-40 {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-41 {
    height: 75.00%;
    left: 4.17%;
    position: absolute;
    top: 12.50%;
    width: 91.67%;
  }

  .web-v3-all-breakpoints .container-89 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 52px;
    position: relative;
    width: 195.58px;
  }

  .web-v3-all-breakpoints .paragraph-30 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-156 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-31 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .servicetaohomecomtw-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .icon-14 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .vector-42 {
    height: 91.67%;
    left: 12.50%;
    position: absolute;
    top: 4.17%;
    width: 75.00%;
  }

  .web-v3-all-breakpoints .vector-43 {
    height: 33.33%;
    left: 33.33%;
    position: absolute;
    top: 25.00%;
    width: 33.33%;
  }

  .web-v3-all-breakpoints .container-90 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 52px;
    position: relative;
    width: 221.5px;
  }

  .web-v3-all-breakpoints .paragraph-32 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-157 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-33 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x181-2-f-2 {
    line-height: 24px;
  }

  .web-v3-all-breakpoints .container-91 {
    align-items: flex-start;
    background-color: var(--basic-colorwhite);
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    height: 536px;
    margin-bottom: -8.00px;
    margin-top: -8.00px;
    padding: 64px 40px 0px 63px;
    position: relative;
    width: 544px;
  }

  .web-v3-all-breakpoints .form {
    align-self: stretch;
    height: 456px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-92 {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(1, minmax(0, 1fr));
    height: 78px;
    left: 0;
    position: absolute;
    top: 0;
    width: 384px;
  }

  .web-v3-all-breakpoints .container-93 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-158 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .x-input {
    align-items: center;
    align-self: stretch;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-color: var(--mercury);
    display: flex;
    height: 50px;
    padding: 12px 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .name-1 {
    letter-spacing: 0;
    line-height: normal;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-94 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    height: 100%;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-159 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .hellonurencycom-1 {
    letter-spacing: 0;
    line-height: normal;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .container-95 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 78px;
    left: 0;
    position: absolute;
    top: 102px;
    width: 384px;
  }

  .web-v3-all-breakpoints .text-160 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-input-3 {
    align-items: center;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    border-radius: 8px;
    display: flex;
    height: 42px;
    overflow: hidden;
    padding: 8px 16px;
    position: relative;
    width: 100%;
  }

  /* 你原本的樣式保持不變 */
  .web-v3-all-breakpoints .text-input-3 {
    align-items: center;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    /* 確保變量已定義，或改為具體顏色如 #e2e8f0 */
    border-radius: 8px;
    display: flex;
    height: 42px;
    overflow: hidden;
    /* 這個屬性會切掉內容，所以選單不能放在裡面 */
    padding: 8px 16px;
    position: relative;
    width: 100%;
    background: #fff;
  }

  /* 修正下拉選單樣式 */
  .dropdown-list {
    position: absolute;
    top: 100%;
    /* 從 label + text-input 的下方開始 */
    left: 0;
    width: 100%;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    /* 確保在最上層 */
    display: none;
    /* 預設隱藏 */
  }

  /* 選單顯示時 */
  .dropdown-list.show {
    display: block;
  }

  .option-item {
    padding: 10px 16px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s;
  }

  .option-item:hover {
    background-color: #f3f4f6;
    color: #4D79FF;
  }

  /* 箭頭旋轉效果 */
  #dropdown-arrow {
    transition: transform 0.3s ease;
  }

  .rotate-arrow {
    transform: rotate(180deg);
  }

  .web-v3-all-breakpoints .frame-20-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 230px;
    justify-content: center;
    margin-right: -3.00px;
    position: relative;
  }

  .web-v3-all-breakpoints .text-161 {
    letter-spacing: 0;
    line-height: normal;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .polygon-1-1 {
    height: 8.66px;
    position: relative;
    width: 12.77px;
  }

  .web-v3-all-breakpoints .container-96 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 134px;
    left: 0;
    position: absolute;
    top: 204px;
    width: 384px;
  }

  .web-v3-all-breakpoints .text-162 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-area-1 {
    align-items: flex-start;
    align-self: stretch;
    border: 2px solid;
    border-color: var(--mercury);
    border-radius: 8px;
    display: flex;
    height: 106px;
    overflow: hidden;
    padding: 12px 16px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-163 {
    letter-spacing: 0;
    line-height: 24px;
    margin-top: -2.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .button-16 {
    align-items: center;
    background-color: var(--brand-colorprimary-light);
    border-radius: 8px;
    display: flex;
    height: 48px;
    justify-content: center;
    left: 233px;
    position: absolute;
    top: 379px;
    width: 148px;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .button-16:hover {
    background: rgb(62, 98, 211);
  }

  .web-v3-all-breakpoints .footer-2 {
    align-items: flex-start;
    background-color: var(--bunker);
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: 399px;
    padding: 24px 16px 0px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-97 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 32px;
    height: 275px;
    justify-content: space-around;
    padding: 16px 160px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .container-98 {
    height: 224px;
    margin-right: -16.00px;
    position: relative;
    width: 944px;
  }

  .web-v3-all-breakpoints .container-99 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 268px;
    left: 0;
    position: absolute;
    top: 0;
    width: 319px;
  }

  .web-v3-all-breakpoints .logo_optimizer-3 {
    height: 46px;
    width: 181px;
  }

  .web-v3-all-breakpoints .group-6 {
    height: 44px;
    left: 0;
    position: absolute;
    top: 1px;
    width: 42px;
  }

  .web-v3-all-breakpoints .group-7 {
    height: 36px;
    left: 50px;
    position: absolute;
    top: 5px;
    width: 130px;
  }

  .web-v3-all-breakpoints .container-100 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 116px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .paragraph-34 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x181-2-f-3 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .paragraph-35 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-4 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .paragraph-36 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .e-mail-servicetaohomecomtw-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 20px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .paragraph-37 {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .phone-5 {
    line-height: 20px;
  }

  .web-v3-all-breakpoints .heading-4-1 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .follow-us-1 {
    left: 0;
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .container-101 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    gap: 12px;
    height: 34px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .icon-link-1 {
    height: 34px;
    position: relative;
    width: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-width: 0px;
    justify-content: center;
    border-color: transparent;
    background: #2c333d;
    border-radius: 10px;
  }

  .web-v3-all-breakpoints .icon-link-1:hover {
    background: rgb(77, 120, 255);
  }

  .web-v3-all-breakpoints .frame-116 {
    align-items: center;
    display: inline-flex;
    gap: 11px;
    left: 629px;
    position: absolute;
    top: 0;
  }

  .web-v3-all-breakpoints .container-59 {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 266px;
    position: relative;
    width: 184px;
  }

  .web-v3-all-breakpoints .text-16-2 {
    letter-spacing: 5.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
  }

  .web-v3-all-breakpoints .list-4 {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .text-button-footer {
    padding: 0px 4px;
  }

  .web-v3-all-breakpoints .text-49 {
    letter-spacing: 1.00px;
    line-height: 24px;
    margin-top: -1.00px;
    position: relative;
    white-space: nowrap;
    width: fit-content;
    cursor: pointer;
  }

  .web-v3-all-breakpoints .text-49:hover {
    background-color: rgb(113, 147, 255);
    color: #FFFFFF;
  }

  .web-v3-all-breakpoints .frame-115-1 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 0px 4px;
    position: relative;
  }

  .web-v3-all-breakpoints .container-102 {
    align-items: center;
    align-self: stretch;
    border-color: var(--ebony-clay);
    border-top-style: solid;
    border-top-width: 1px;
    display: flex;
    flex-direction: column;
    height: 57px;
    justify-content: center;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .paragraph-38 {
    align-self: stretch;
    height: 24px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .x2025-optimizer-all-rights-reserved-1 {
    left: calc(50.00% - 140px);
    letter-spacing: 0;
    line-height: 24px;
    position: absolute;
    text-align: center;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .ai {
    letter-spacing: 0;
    line-height: 24px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .animation {
    grid-row: 1 / 2;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .app {
    letter-spacing: 0;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .frame-111 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    position: relative;
  }

  .web-v3-all-breakpoints .image-3 {
    background-position: 50% 50%;
    background-size: cover;
    display: flex;
    height: 224px;
    left: 1px;
    position: absolute;
    top: 0;
    width: 356px;
  }

  .web-v3-all-breakpoints .label {
    align-self: stretch;
    height: 20px;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .list-item {
    align-self: stretch;
    position: relative;
    width: 100%;
  }

  .web-v3-all-breakpoints .logo_optimizer {
    aspect-ratio: 3.94;
    position: relative;
  }

  .web-v3-all-breakpoints .phone {
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .tab {
    align-items: center;
    display: flex;
    position: relative;
  }

  .web-v3-all-breakpoints .text-1 {
    letter-spacing: 0;
    white-space: nowrap;
  }

  .web-v3-all-breakpoints .text-button {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    position: relative;
    cursor: pointer;
  }



  .web-v3-all-breakpoints .text-button-footer-13 {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 10px;
    justify-content: center;
    padding: 0px 4px;
    position: relative;
  }

  .web-v3-all-breakpoints .text_label {
    letter-spacing: 0;
    line-height: 24px;
  }

  .web-v3-all-breakpoints .title {
    flex: 0 0 auto;
    position: relative;
  }

  .web-v3-all-breakpoints .x181-2-f {
    left: 0;
    letter-spacing: 0;
    position: absolute;
    top: -1px;
    white-space: nowrap;
  }
}

input {
  border: none;
  /* 去掉初始状态的边框 */
  outline: none;
  /* 去掉点击聚焦时的蓝色/黑色轮廓线 */
}