:root {
  --primary-color: #196FFF;
  --primary-color-rgb: 25, 111, 255;
  --second-color: #0099FF;
  --third-color: #fff;
  --fourth-color: #F4F4F4;
  --btn-active: #196FFF;
  --border-color: #CFCFCF;
  --default-color: #333;
  --sub-color: #8A8A8A;
  --border-radius: 1.55rem;
  --line-color: 9, 197, 94;
  --error-color-rgb: 255, 100, 136;
  --line_gradient-1: 102, 194, 255;
  --line_gradient-2: 255, 170, 238;
}

@layer main_style {

  html,
  body {
    font-size: 3.125vw;
    letter-spacing: 0.03em;
    overflow-x: hidden;
    color: var(--default-color);
  }

  body {
    position: relative;
    overflow: hidden;
    width: 100%;
    font-family: "Noto Sans JP", "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
    font-weight: 400;
    font-style: normal;
    background: var(--fourth-color);
  }

  .container {
    width: var(--container_width);
  }

  img {
    display: block;
    border: none;
    outline: 0;
    width: 100%;
    height: auto;
  }

  svg {
    display: block;
  }


  .index h2,
  .page h1 {
    font-size: 3.12rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.04em;
  }

  .page h2 {
    font-size: 2.5rem;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: 0.04em;
  }

  .page .sub_title {
    font-size: 2rem;
    line-height: 1.25;
  }

  h3 {
    font-size: 1.4rem;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  h4,
  .page h3.card_title {
    font-size: 1.22rem;
    line-height: 1.8;
    font-weight: 500;
  }

  .page h3.card_title {
    line-height: 1.5;
  }

  ul.ul_list {
    padding-left: 1.6em;
  }

  ul.ul_list,
  ol.ol_list {
    font-size: 0.88rem;
    line-height: 1.5;
  }

  ul.ul_list li~li {
    margin-top: 0.1rem;
    font-weight: 400;
  }


  .text_hide {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
}

/* input select 基本樣式 */
@layer form_style {

  button,
  input,
  optgroup,
  select,
  textarea {
    padding: 0.25rem 0.5rem;
    box-sizing: border-box;
    line-height: 1.25;
    border: 1px solid #E4E4E4;
    border-radius: 5px;
    overflow: hidden;

    &:focus-visible {
      outline: 3px solid rgba(var(--primary-color-rgb), .2);
      outline-offset: -1px;
    }

    &:invalid {
      border: 1px solid rgb(var(--error-color-rgb));

      &:focus-visible {
        outline: 3px solid rgb(var(--error-color-rgb), .2);
        outline-offset: -1px;
      }
    }
  }

  select {
    appearance: base-select;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("../images/icon_dropdown.svg"), #fff;
    background-repeat: no-repeat;
    background-position: right 1% center;
    background-size: 1rem;

    &::after {
      content: "";
      display: block;
      position: absolute;
      width: 1rem;
      height: 1rem;
      right: 0;
      margin: auto;
    }

    &>button {
      display: flex;
      align-items: center;
      width: 100%;
      color: currentColor;
      outline: 0;
      border: 0;

      &>svg {
        margin: 0 0 0 auto;
        width: 1.2rem;
        height: 1.2rem;
      }
    }

    &:has(option:not([hidden]):checked) {
      /* color: #ccc; */
    }

    &::picker-icon {
      display: none;
    }

    &::picker(select) {
      appearance: base-select;
      cursor: default;
      padding: 0.25rem;
      margin: 0.25rem 0;
      border-radius: 2px;
      border: 1px solid #E4E4E4;
      transition: opacity 225ms ease-in-out, transform 225ms ease-in-out;
      transform-origin: top;
      transform: translateY(0);
      background: rgba(255, 255, 255, .92);
      opacity: 1;

      @starting-style {
        transform: translateY(-0.25rem) scale(0.95);
        opacity: 0;
      }
    }

    option {
      padding: 0.25rem 0.5rem;
      border-radius: 2px;
      outline: none;

      &:after {}

      &::checkmark {
        display: none;
      }

      &:checked {
        background-color: transparent;

        &::after {
          opacity: 1;
        }
      }

      &:hover,
      &:focus-visible {
        background-color: rgba(var(--primary-color-rgb), 1);
        color: #fff;
      }
    }

    & .select_icon {
      position: absolute;
      right: 0;
      width: 1.6rem;
    }
  }
}

/* 按鈕樣式 */
@layer btn_style {

  a.btn_link {
    color: #167BD9;
    text-decoration: underline;
  }

  a.btn_block {
    display: block;
    font-size: 1.22rem;
    line-height: 1.8;
    font-weight: 500;
    transition: all ease .3s;
  }

  a.btn_app img {
    display: block;
  }

  .btn_scroll svg {
    stroke: #1D1D1D;
    stroke-width: 2px;
  }

  .btn_top {
    width: 2.85rem;
    padding: 0.8rem;
    box-sizing: border-box;
    border-radius: 100%;
    border: 1px solid var(--border-color);
    background: rgba(255, 255, 255, 0.90);
  }

  .btn_top svg {
    display: block;
    transform: scaleY(-1);
    stroke-width: 3px;
  }

  a.btn_arrow {
    padding: 0.8333rem;
    width: fit-content;
    height: fit-content;
    border-radius: 100%;
    background: #FFF;
    box-shadow: 0px 0px 5px 0px rgba(105, 105, 105, 0.25);
    z-index: 3;
  }

  a.btn_arrow img {
    width: 1.66rem;
  }

  a.btn_arrow svg {
    width: 1.66rem;
    stroke: var(--default-color);
    stroke-width: 3px;
  }

  a.btn_primary {
    display: flex;
    padding: 0.5rem 0.5rem 0.5rem 1.6rem;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border-radius: 5.55556rem;
    color: var(--btn_color);
    background: var(--btn_bg);
  }

  a.btn_primary .arrow,
  a.btn_second .arrow,
  a.btn .arrow {
    width: 2.22rem;
    height: 2.22rem;
    display: block;
    margin-left: 0.8rem;
  }

  a.btn_primary .arrow svg,
  a.btn_second .arrow svg,
  a.btn .arrow svg {
    stroke-width: 3px;
    border-radius: 100%;
  }

  a.btn_primary .arrow svg {
    stroke: var(--btn_bg);
    background: var(--btn_color);
  }

  a.btn_back {
    color: var(--default-color);
  }

  a.btn_back span {
    margin-left: 1.1rem;
  }

  a.btn_back .arrow {
    padding: 0.6rem;
    margin: 0;
    width: 3.33rem;
    height: 3.33rem;
    background: var(--third-color);
    border-radius: 100%;
    border: 1px solid var(--border-color);
    box-sizing: border-box;
  }

  a.btn_back .arrow svg {
    stroke: var(--default-color);
    transform: scaleX(-1);
  }


  a.btn_second {
    display: grid;
    justify-content: space-between;
    align-items: center;
    grid-template-columns: 4.4rem 1fr 3rem;
    gap: 1.1rem;
    padding: 1.6rem;
    box-sizing: border-box;
    color: var(--default-color);
    border-radius: var(--border-radius);
    background: var(--third-color);
  }

  a.btn_second .arrow svg {
    stroke: var(--default-color);
  }

  a.btn_tab {
    display: grid;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.25;
    text-align: center;
    border-radius: 1000px;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    background: var(--third-color);
  }

  a.btn_tab.is-active {
    color: var(--third-color);
    background: var(--primary-color);
  }

  button.label_btn {
    color: var(--second-color);
    border: 1px solid var(--second-color);
    background: var(--third-color);
    transition: all ease .3s;
  }

  .btn_social {
    padding: 0.4rem;
    border-radius: 4.54545rem;
    border: 1px solid var(--border-color);
    background: var(--third-color);
  }

  .btn_social svg {
    opacity: 0.8;
  }

  .btn_disable {
    cursor: default;
    opacity: 0.3;
  }
}

/* 按鈕樣式 end*/

@layer other_style {

  /* tab */
  .tab_content {
    display: none;
  }

  .tab_content.is-active {
    display: block;
  }

  /* 影片共用 */
  .item_video {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: rgb(74, 103, 152);
  }

  .item_video::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }

  .item_video .video_iframe,
  .item_video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: auto;
    opacity: 0.8;
  }

  .item_video a.btn_play {
    position: absolute;
    width: 5.55rem;
    height: 5.55rem;
    inset: 0;
    margin: auto;
    z-index: 2;
  }

  /* 影片共用 end*/
}

/* header */
@layer header_framework {

  /* header */
  header {
    padding: 1.36rem 3rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    z-index: 999;
    transition: all ease .3s;
    background: #fff;
    z-index: 999;
  }

  header.is-active {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(10px);
  }

  header .btn_logo img {
    width: 9.17355rem;
  }

  .main_menu {
    align-items: center;
    color: #1D1D1D;
  }

  .main_menu li {
    list-style: none;
  }

  .main_menu>li:has(.btn_menu) {
    padding: 1rem 1.1rem;
  }

  .main_menu .btn_menu {
    position: relative;
    display: block;
    padding: 0.23rem;
    width: fit-content;
    letter-spacing: 0.05em;
    margin: auto;
    transition: all ease .3s;
  }

  .main_menu .btn_menu span {
    position: relative;
    z-index: 2;
  }

  .main_menu .btn_menu::before {
    position: absolute;
    content: "";
    display: block;
    inset: 0;
    width: 0;
    height: 100%;
    margin-left: 0;
    background: var(--btn-active);
    transition: width ease .3s;
    transform-origin: left;
    z-index: 0;
  }

  /* 0418_add_調整手機板文字色彩太相近*/
  .main_menu a.btn_menu.is-active,
  header .main_menu a.btn_menu:has(+ ul.sub_menu a.is-active),
  header .main_menu .sub_menu li:has(a.is-active) {
    color: var(--second-color);
    background: transparent;
  }

  header .main_menu ul.sub_menu li {
    padding: 0.45rem 0.68rem;
    white-space: nowrap;
  }

  .select_language {
    position: relative;
    display: flex;
    margin-left: 0.5rem;
  }

  .select_language label {}

  .select_language img {
    position: absolute;
    left: 0.3rem;
    top: 0;
    bottom: 0;
    margin: auto auto auto 0;
    width: 1.5rem;
  }

  .select_language select {
    padding: 0 0 0 1.8rem;
    font-size: 1rem;
    color: var(--default-color);
    border-radius: 1000px;
    border: 1px solid #E0E0E0;
    width: 8.2em;
    min-height: 2.2em;

    &::picker(select) {
      border-radius: 1rem;
    }

    & svg {
      stroke: var(--border-color);
    }

    & option {
      padding: 0.1rem 0.5rem 0.1rem 1.8rem;

      &:hover,
      &:focus-visible {
        border-radius: 1rem;
      }
    }
  }

  /* header end */
}

/* 全網頁 共用架構 */
@layer main_framework {

  /*----- section -----*/
  .index section {
    position: relative;
    padding: 4.6rem 0;
  }

  section .anchor {
    position: absolute;
    top: -5rem;
  }

  .row.row_between {
    justify-content: space-between;
  }


  section.section_light .title_icon .dark {
    display: none;
  }

  section.section_dark {
    background: var(--primary-color);
  }

  section.section_dark .main_title {
    color: var(--third-color);
  }

  section.section_dark .title_icon .light {
    display: none;
  }

  section.section_light .btn_primary {
    --btn_color: var(--third-color);
    --btn_bg: var(--second-color);
  }

  .lightbox .btn_primary {
    --btn_color: var(--third-color);
    --btn_bg: var(--second-color);
    grid-column: 1 / 3;
    margin: 0 auto;
    margin-top: 3rem;
  }

  section.section_dark .btn_primary {
    --btn_color: var(--second-color);
    --btn_bg: var(--third-color);
  }

  section a.btn_primary.btn_line {
    --btn_color: var(--third-color);
    --btn_bg: rgb(var(--line-color));
  }

  /*----- title -----*/
  section .row_title {
    margin-bottom: 1.66rem;
  }

  section a.btn_pre {
    transform: scale(-1);
  }

  section .main_title {
    display: flex;
    align-items: center;
  }

  section .main_title .title_icon {
    width: 4.44rem;
    margin-right: 0.56rem;
  }

  section .main_title .title_text {
    margin-bottom: 0.1em;
    text-transform: uppercase;
  }

  .content_btn {
    display: flex;
  }

  .content_btn>.btn~.btn {
    margin-left: 1.2rem;
  }

  section .row_btn {
    margin-top: 1.66rem;
  }

  .container .row_content {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.6rem;
  }

  .row_cardcolum {
    flex-direction: column;
  }

  .col_scroll:has(.item_scroll) {
    position: relative;
  }

  .item_scroll {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .dec_line {
    position: absolute;
    width: 16.66667rem;
    height: 0.33333rem;
    border-radius: 4.54545rem;
    background: linear-gradient(90deg, rgba(var(--line_gradient-1), 1) 0%, rgba(var(--line_gradient-2), 0.4) 60%, rgba(var(--line_gradient-2), 0) 100%);
    z-index: 900;
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(80%);
  }

  .dec_line.right_line {
    transform-origin: right top;
    rotate: -40deg;
  }

  .dec_line.left_line {
    transform-origin: left top;
    rotate: 220deg;
  }

  .dec_line.aos-animate {
    opacity: 1;
    transform: translateX(0);
  }

  /* 0415_add */
  .container_map .note {
    color: #333;
  }

  .container_map .is-active .note {
    color: #fff;
  }

  /* 0415_end */
  /* 關於我們 app 區塊*/
  .container_app {
    background: linear-gradient(89deg, rgba(219, 233, 255, 0.50) 62.21%, #DBE9FF 100%);
  }

  .container_started .item_app {
    display: flex;
    align-items: center;
    padding: 2.22rem 0;
    margin-top: 1.6rem;
    width: 100%;
    border-radius: var(--border-radius);
    background: linear-gradient(89deg, rgba(233, 241, 255, 0.50) 62.21%, #DBE9FF 100%);
  }

  .container_started .item_app .app_pic {
    margin-right: 3.3rem;
    width: 10rem;
    flex: none;
  }

  .container_started .item_app .app_info .text {
    margin-bottom: 1.1rem;
  }

  .container_started .item_app .app_info .btn_app {
    height: 3.33rem;
  }

  .container_started .item_app .app_info .btn_app img {
    width: auto;
    height: 100%;
  }

  .container_started .row_app .content_info,
  .page .container_started .row_app .item.item_app {
    padding-right: 38%;
  }

  .page .container_started .row_app .item.item_app {
    padding-right: 38%;
  }

  /* 側選單 */
  menu.side_menu {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 0.833rem;
    padding: 1rem;
    width: 5%;
    min-width: 4.5rem;
    box-sizing: border-box;
    z-index: 120;
  }

  menu.side_menu .btn_social {
    box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.10);
  }

  /* 0415_add */
  menu.side_menu .btn_social .icon {
    padding: 0.2rem;
    display: block;
  }

  @media screen and (min-width: 1240px) {
    menu.side_menu .btn_social .icon {
      padding: 0.3rem;
      display: block;
    }
  }

  @media screen and (max-width: 996px) {
    menu.side_menu {
      width: 8.8%;
    }
  }

  /* 0415_end */
  menu.side_menu .btn_social .icon.off {
    display: none;
  }

  menu.side_menu .btn_social.btn_disable .icon.off {
    display: block;
  }

  menu.side_menu .btn_social.btn_disable .icon.on {
    display: none;
  }

  menu.side_menu .btn_social svg {
    fill: var(--primary-color);
  }

  menu.side_menu .btn_social.btn_disable svg {
    fill: var(--default-color);
  }

  menu.side_menu .btn_social.btn_line svg {
    fill: rgb(var(--line-color));
  }

  /* 充電站點區塊 */
  /* map區塊 */
  .container_map .row_title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .container_map .row_content {
    justify-content: space-between;
    align-items: stretch;
    gap: 1.6rem;
    flex-wrap: nowrap;
  }

  .container_map .col_info {
    position: relative;
  }

  .container_map .content_btn {
    position: absolute;
    display: none;
  }


  .container_map .item_map {
    position: relative;
    border-radius: 1.1rem;
    overflow: hidden;
  }

  .container_map .item_map .btn_pin {
    position: absolute;
    width: 1.66rem;
    height: 1.66rem;
  }

  .container_map .item_map .btn_pin {
    left: 55%;
    top: 35%;
    margin: auto;
  }

  .container_map .item_map .btn_pin.is-active {
    left: 50%;
    top: 30%;
    margin: auto;
  }

  .container_map .item_content {
    padding: 1rem 1rem 1rem 1rem;
    display: grid;
    gap: 0.9rem;
    align-items: center;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    box-sizing: border-box;
  }


  .container_map .item_content.is-active {
    background: var(--station_active);
  }

  .container_map .content_pic {
    position: relative;
    height: 100%;
    max-height: 11.6rem;
    z-index: 0;
  }

  .container_map .content_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.8rem;
    overflow: hidden;
  }

  .container_map .content_pic .station_tage {
    display: block;
    position: absolute;
    right: 0.4rem;
    bottom: 0.4rem;
    padding: 0.1rem 0.55rem;
    width: fit-content;
    font-size: 0.833rem;
    background: rgba(255, 255, 255, 0.9);
    color: var(--primary-color);
    border-radius: 100px;
  }


  .container_map .info_title {
    line-height: 1.5;
    margin-bottom: 0.1rem;
  }

  .container_map .info_title,
  .container_map .content_list {
    color: var(--station_color);
  }

  .container_map .content_list {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .container_map .info_add {
    display: grid;
    grid-template-columns: 0.88rem calc(100% - 0.88rem);
    align-items: center;
    margin-bottom: 0.1rem;
    gap: 0.25rem;
    line-height: 1.5;
    font-weight: 400;
    color: var(--add_color);
  }

  .container_map .add_icon {
    padding-top: 0.03em;
  }

  .container_map .info_add svg {
    width: 0.88rem;
    height: 0.88rem;
    fill: var(--add_color);
  }

  /* step 步驟區塊 */
  .container_step .row_step {
    align-items: stretch;
    justify-content: space-between;
  }

  .container_step .item_step {
    display: grid;
    gap: 0.55rem;
    padding: 0 0.2rem;
    /* padding: 0 2.1rem; */
    text-align: center;
  }

  .container_step .step_pic {
    position: relative;
  }

  .container_step .setp_number {
    position: absolute;
    width: 40%;
    top: 0;
    left: 0;
    translate: -24% -36%;
  }

  .container_step .step_arrow {
    display: flex;
    align-items: center;
    width: 1.66rem;
    margin-bottom: 5rem;
  }

  @media screen and (max-width: 996px) {
    .step_title {
      font-size: 1.5vw;
    }

    .step_info {
      font-size: 1.2vw;
    }
  }

  @media screen and (max-width: 767px) {
    .step_title {
      font-size: 3vw;
    }

    .step_info {
      font-size: 2.5vw;
    }

  }

  @media screen and (min-width: 1200px) {
    .br_s {
      display: block;
    }
  }

  @media screen and (max-width: 1600px) {
    .br_s {
      display: none;
    }
  }

  /* TITAN 區塊 */
  .container_product .row_content {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.6rem;
  }

  .container_product .item_pic {
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .container_product .row_content .item_btn~.item_btn {
    margin-top: 1rem;
  }

  /* 產品適用場域樣式 */
  .container_product .row_area {
    gap: 0.55rem;
  }

  .container_product .area_tag {
    display: flex;
    align-items: center;
    width: 10rem;
    background: #F0F8FF;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
  }

  .container_product .area_tag .icon {
    width: 2.77rem;
  }

  /* SOLUTION 解決方案區塊 */
  .container_solution .col_info {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.6rem 1.3rem;
    box-sizing: border-box;
  }

  .container_solution .item_info {
    position: relative;
    height: 100%;
    min-height: 12.5em;
    line-height: 1.8;
  }

  .container_solution .col_info .item_info p {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .container_solution .col_info p {
    padding: 0 0.6rem;
  }

  .container_solution .col_info .btn_primary {
    margin: 0 auto;
    margin-top: 1.8rem;
  }

  /* contact 聯絡我們 */
  .container_contact .form_contact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr) 2fr;
    gap: 1.1rem;
  }

  .container_contact .item_group {
    display: grid;
    grid-template-columns: 1fr;
  }

  .container_contact .item_group>* {
    display: block;
    width: 100%;
  }

  .container_contact .item_group:nth-of-type(5),
  .container_contact .item_group:nth-of-type(6),
  .container_contact .item_group:nth-of-type(7) {
    grid-column: 1 / 3;
  }

  .container_contact .item_group:nth-of-type(6) {
    grid-template-rows: min-content 2fr;
  }

  .container_contact .label_title {
    margin-bottom: 0.3rem;
    line-height: 1.8;
  }

  .container_contact .row_content .item_form a.btn {
    grid-column: 1 / 3;
    margin: 0 auto;
    margin-top: 1.6rem;
  }

  .container_contact .form_contact textarea {
    resize: none;
    overflow-y: scroll;
  }

  .container_contact .item_group .robot {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
  }

  .container_contact .item_group .robot img {
    max-width: 180px;
    margin-right: 1vw;
  }

  .container_contact .item_group .robot input {
    padding-left: 5px;
    padding-right: 5px;
    width: 100%;
  }

  /* 最新消息 */
  .container_news .news_list {
    display: grid;
    grid-template-columns: 5.5rem calc(100% - 11rem) 2.22rem;
    grid-template-rows: 1.25rem 1fr;
    align-items: center;
    padding: 1.6rem 0 1.6rem 1.1rem;
    gap: 0.55rem;
    border-width: 1px 0;
    border-style: solid;
    border-color: var(--border-color);
  }

  .container_news .news_list~.news_list {
    margin-top: -1px;
  }

  .container_news time.date,
  .container_news .tag {
    color: var(--sub-color);
    font-size: 1rem;
    line-height: 1.25;
  }

  .container_news time.date {
    font-weight: 600;
  }

  .container_news .tag {
    padding: 0 0.6rem;
    margin-left: 0.8rem;
    width: fit-content;
    font-size: 0.85rem;
    border: 1px solid var(--sub-color);
  }

  .container_news .news_list .arrow {
    display: block;
    padding: 1rem;
    grid-row: 1 / 3;
    grid-column: 3;
  }

  .container_news .news_list .arrow svg,
  .container_news .btn_news .arrow svg {
    stroke: var(--default-color);
    stroke-width: 3px;
  }


  .container_news .news_list .news_title {
    grid-row: 2;
    grid-column: 1 / 3;
    line-height: 1.8;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .container_news .btn_news {
    transition: all ease .3s;
  }

  .container_news .btn_news .news_pic {
    border-radius: 1.1rem 1.1rem 0 0;
    overflow: hidden;
  }

  /* 0414_add */
  .news_pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

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

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

  .ratio-4x3 {
    aspect-ratio: 4 / 3;
  }

  /* 0414_end */
  /* 卡片式 最新消息 */
  .container_news .btn_news .news_contnet {
    display: grid;
    position: relative;
    margin: -1px;
    margin-top: -2rem;
    padding: 1rem 1.1rem;
    gap: 0.3rem;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    align-items: center;
    height: fit-content;
    border-radius: 1.1rem;
    background: var(--third-color);
    box-shadow: 0px 0px 15px 0px rgba(175, 195, 211, 0.20);
  }

  .container_news .news_contnet .date {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.8;
  }

  .container_news .news_contnet .tag {
    justify-self: flex-end;
    height: fit-content;
  }

  .container_news .news_contnet .news_title {
    grid-row: 2;
    grid-column: 1 / 3;
    line-height: 1.8;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .container_news .news_contnet .arrow {
    grid-column: 2/3;
    justify-self: flex-end;
    padding: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 100%;
  }

  /* 合作夥伴 */
  .container_partner .row_content {
    justify-content: space-between;
    align-items: center;
  }

  .container_partner .item_partner {
    padding: 0.8rem 0;
    border-radius: var(--border-radius);
    background: var(--third-color);
    box-sizing: border-box;
  }

  /* 0414_add */
  .partner_logo {
    margin: 0 auto;
    overflow: hidden;
    width: 100%;
  }

  .container_partner .partner_logo img {
    margin: auto;
    width: 11.11rem;
    border-radius: 30px;
  }

  @media(max-width: 998px) {
    .container_partner .partner_logo img {
      width: 8.5rem;
    }
  }

  @media(max-width: 768px) {
    .container_partner .partner_logo img {
      width: 10rem;
    }
  }

  /* 0414_add */
  .container_partner .row_logo {
    position: relative;
    flex-wrap: nowrap;
    gap: 1.6rem;
    padding: 0 5.5rem;
  }

  .container_partner .content_arrow {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    justify-content: space-between;
  }
}

/* HDRE外連 */
.container_explore .btn_hdre {
  position: relative;
  display: block;
  padding: 1.2rem;
  box-shadow: 0px 0px 5px 0px rgba(105, 105, 105, 0.20);
}


.container_explore .btn_hdre img {
  width: 70%;
  max-width: 20rem;
  margin: auto;
}

.container_explore .btn_hdre .arrow {
  position: absolute;
  bottom: 1.1rem;
  border-radius: 4.54545rem;
  border: 1px solid #EBEBEB;
  background: #FFF;
}

.container_explore .col_hdre:nth-last-of-type(1) .arrow {
  right: 1.1rem;
  margin-right: 0;
}

.container_explore .col_hdre:nth-last-of-type(2) .arrow {
  left: 1.1rem;
  scale: -1;
  margin-left: 0;
}

/* 全網頁 共用架構end */

/* page_共用架構 */
@layer page_framework {
  .page .container {
    width: var(--pagecontainer_width);
  }

  .page header {
    position: fixed;
  }

  .page .page_banner {
    position: relative;
  }

  .page .page_banner h1.banner_title {
    position: absolute;
    inset: 0;
    margin: auto;
    translate: 0 0.5em;
    width: fit-content;
    max-width: 92%;
    height: fit-content;
    text-align: center;
    color: var(--third-color);
    text-transform: uppercase;
  }

  .page main {
    position: relative;
    padding: 4.44rem 0 5.55rem 0;
  }

  .page main::before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    bottom: 0;
    padding-bottom: 8.88rem;
    z-index: 0;
    background-repeat: no-repeat;
    background-size: cover;

  }

  .page section {
    position: relative;
  }

  .page section~section {
    margin-top: 2.77rem;
  }


  .page section .main_title .title_icon {
    width: 3.55rem;
    margin-right: 0.27rem;
  }

  /* 麵包屑 */
  .item_bread {
    color: var(--default-color);
  }

  .item_bread ol {
    display: flex;
    align-items: center;
    list-style: none;
  }

  .item_bread li {}

  .item_bread li a {
    display: flex;
    align-items: center;
  }

  .item_bread li span~span {
    margin-left: 0.5em;
  }

  .item_bread li svg {
    width: 1rem;
    height: 1rem;
    stroke: var(--default-color);
    stroke-width: 1px;
  }

  .item_bread li~li a::before {
    content: ">";
    display: inline-block;
    scale: 1 1.5;
    margin: 0.55em;
    color: var(--border-color);
    font-size: 0.8rem;
  }

  .item_bread li a.is-active {
    cursor: default;
    color: var(--second-color);
  }

  .page .section_content {
    padding: 2.22rem;
    border-radius: var(--border-radius);
    background: var(--third-color);
  }

  .page .row_content {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.6rem;
  }

  .page .content_info>* {
    margin-top: 1.1rem;
  }

  .page .item_title {
    position: relative;
    padding-left: 1.1rem;
    padding-bottom: 0.25rem;
  }

  .page .item_title::before {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    content: "";
    display: block;
    margin: auto;
    width: 0.277rem;
    height: 100%;
    background: linear-gradient(0deg, var(--Color-4, #196FFF) 0%, #F29BEC 100%);
  }

  .page .item_title:has(time) .sub_title {
    margin-bottom: 0.55rem;
  }

  /* 頁面頁碼區塊 */
  .page .container_pagenumber {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
  }

  .page .container_pagenumber .btn_number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.77rem;
    height: 2.77rem;
    background: var(--third-color);
    border-radius: 100%;
    font-family: "Roboto", "Microsoft JhengHei", "微軟正黑", sans-serif;
    font-size: 1.2rem;
    color: var(--default-color);
    transition: all ease .3s;
  }

  .page .container_pagenumber .btn_number.is-active {
    background: var(--primary-color);
    color: var(--third-color);
    cursor: default;
  }

  .page .container_pagenumber .btn_number span.arrow {
    margin: 0;
    width: 1.25rem;
    height: 1.25rem;
  }

  .page .container_pagenumber .btn_number svg {
    stroke-width: 3px;
    stroke: var(--default-color);
  }

  .page .container_feature .col_card {
    padding: 1.6rem 1.1rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    transition: all ease .3s;
    cursor: default;
    box-sizing: border-box;
  }

  .page .container_feature .row_cardcolum {
    gap: 0.95rem;
  }

  .page .container_feature .row_cardcolum .item_card {
    display: flex;
    align-items: center;
    gap: 0.55rem;
  }

  .page .container_feature .item_card .card_icon {
    width: 7.77rem;
    padding: 0.55rem;
    margin: 0 auto;
    margin-bottom: 1.1rem;
    border-radius: 45.45455rem;
    box-sizing: border-box;
    background: linear-gradient(146deg, #F8F8F8 16.45%, rgba(248, 248, 248, 0.00) 86.11%);
  }

  .page .container_feature .row_cardcolum .card_icon {
    flex: none;
    width: 5.55rem;
  }

  .page .container_feature .item_card .card_title {
    margin-bottom: 0.55rem;
    text-align: center;
  }

  .page .container_feature .row_cardcolum .card_title {
    text-align: left;
    letter-spacing: 2px;
  }

  .page .container_feature .item_card p {
    line-height: 1.8;
  }

  .page .container_feature .row_card {
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 1.1rem;
  }

  .page .container_partner .item_partner,
  .page .container_partner a.btn_arrow,
  .page .container_map a.btn_arrow {
    border: 1px solid var(--border-color);
  }

  .page .container_partner .row_logo {
    margin-top: 1.1rem;
  }

  .page .container_started .item_app {
    padding: 2.22rem;
    box-sizing: border-box;
  }

  .page .container_started .item_app {
    padding-right: 5rem;
    padding-right: 26rem;
  }

  .page .container_step .step_pic {
    width: 80%;
    margin: auto;
  }


  .page .container_step .item_step {
    margin: 1rem 0;
  }

  .page .container_explore .row_content {
    flex-wrap: nowrap;
    gap: 1.2rem;
  }

  .page .container_explore .btn_hdre {
    box-shadow: none;
    border: 1px solid var(--border-color);
  }

  .page .section_label .item_label {
    display: flex;
    align-items: stretch;
    gap: 1rem;
  }

  .page .section_label .label_select {
    width: 10%;
    max-width: 10em;
    min-width: 8em;
  }

  .page .section_label .label_search {
    width: 25%;
    max-width: 25em;
    min-width: 13em
  }

  .page .section_label .label_btn {
    width: 9%;
    max-width: 10em;
    min-width: 5em;
  }

  .page .container_newscard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }

  .page .container_news .item_content h5 {
    font-size: 1.22rem;
    font-weight: 600;
  }

  .page .container_news .item_content>* {
    margin-bottom: 1.6rem;
  }

  .page .container_news .item_content img {
    margin: 0 auto;
    width: 100%;
    max-width: 800px;
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .page .container_solution .col_info {
    padding: 0;
  }

  .page .container_target .row_content {
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .page .container_target .row_content {
    flex-wrap: nowrap;
    gap: 0.27rem;
  }

  .page .container_target .btn_target {
    position: relative;
  }

  .page .container_target .btn_target::after {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0) 0%, rgba(var(--primary-color-rgb), 1) 88.08%);
    transition: all ease .3s;
  }

  .page .container_target .target_pic {
    position: relative;
  }

  .page .container_target .target_pic::before {
    content: "";
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 133%;
  }

  .page .container_target .target_pic img {
    display: block;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .page .container_target .target_title {
    position: absolute;
    display: flex;
    padding: 2.5rem 1rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    bottom: 0;
    color: #fff;
    z-index: 1;
    box-sizing: border-box;
  }

  .page .container_target .target_title .sub_title {
    width: fit-content;
    margin: auto;
  }

  .page .container_target .target_title .arrow {
    padding: 0.6rem;
    margin-left: 0;
  }

  .page .container_target .target_title .arrow svg {
    stroke: #fff;
    stroke-width: 3px;
  }

  .page .container_contact .row_content .item_form {
    width: 100%;
  }

  .page .container_map .row_cardcolum {
    gap: 0.55rem;
  }

  .page .container_map .item_content {
    --add_color: var(--primary-color);
    padding: 0.55rem;
    border: none;
    gap: 0 1rem;
    padding-bottom: 1.2rem;
  }

  .page .container_map .item_content.is-active {
    --station_active: #307DFF;
    --station_color: var(--third-color);
    --add_color: #D2D2D2;
    border-radius: 1.1rem;
  }

  .page .container_map .item_line {
    display: none;
  }

  /* titan product */
  .page .container_product .row_info {
    padding-bottom: 1.6rem;
    gap: 1.6rem;
  }

  .page .container_product .row_info~.row_info {
    padding-top: 1.6rem;
    border-top: 1px solid var(--border-color);
  }

  .page .container_product .row_info:last-of-type {
    padding-bottom: 0;
  }

  .page .container_product .item_feature {
    margin-bottom: 1.1rem;
  }

  .page .container_product .info_title {
    margin-bottom: 0.55rem;
  }

  .page .container_product .item_info {
    margin-top: 1.1rem;
  }

  .page .container_product .area_title {
    margin-bottom: 0.833rem;
    padding: 0.2rem 0.55rem;
    width: fit-content;
    border-radius: 100px;
    color: #fff;
    background: var(--default-color);
  }

  .page .container_product .area_content {
    margin-bottom: 1.6rem;
  }

}

/* page_共用架構 end*/


/* index獨立用css */
@layer index_style {

  /* index-kv */
  .section_kv {
    background: #F4F4F4;
    position: relative;
  }

  .section_kv .kv_content {
    position: relative;
    z-index: 121;
  }

  /* 0418_add */
  .section_kv .btn_scroll {
    position: absolute;
    display: block;
    margin: auto;
    right: 0;
    left: 0;
    bottom: -4.5%;
    width: 5rem;
    padding: 1.3rem;
    box-sizing: border-box;
    border-radius: 100%;
    background: #ffffffad;
    box-shadow: 0px 0px 5px 0px rgba(105, 105, 105, 0.25);
    z-index: 125;
  }

  /* 0421_add */
  .section_kv .btn_scroll {
    bottom: -2.5%;
    width: 3rem;
    padding: 0.8rem;
  }

  /* 0414_end */

  .section_kv .dec_line {
    top: 3.7rem;
    right: 24.1%;
  }

  /* index-about */
  .section_about {
    padding-bottom: 0;
  }

  .section_about .dec_line {
    top: -8rem;
    left: 23.22%;
  }

  .section_about .container {}

  .section_about .dec_pic {
    position: absolute;
    top: 1rem;
    right: 6%;
    width: 16.6%;
  }

  .section_about .content>* {
    margin-top: 1.66rem;
  }

  .section_about .content_info>* {
    margin-top: 1.1rem;
  }

  .section_about .row_info .item_pic {
    position: relative;
  }

  .section_about .container_app {
    width: 100%;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 0;
  }

  .section_station {
    --add_color: #D2D2D2;
    --station_color: #fff;
  }

  .section_station .dec_line {
    top: 5rem;
    left: 35%;
  }

  .section_station .item_content.is-active {
    --add_color: #F1F1F1;
    --station_color: var(--default-color);
    --station_active: rgba(146, 199, 255, 0.50);
  }

  .section_station .row_btn {
    justify-content: flex-end;
  }

  .section_station .item_line {
    width: 100%;
    height: 1px;
    background: #fff;
  }

  .section_station .container_map .item_content~.item_content {
    margin-top: -1px;
  }

  .section_step {
    background: var(--third-color);
  }

  .section_step .dec_line {
    top: 5rem;
    left: 50%;
  }

  .section_step .item_step {
    padding: 2.8rem 0.5rem;
  }

  .section_step .setp_number {
    width: 40%;
  }

  .section_step .step_pic {
    width: 76%;
    margin: auto;
  }

  .section_product .dec_line {
    top: -5rem;
    right: 33%;
  }

  .section_solution::before {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    display: block;
    width: 100%;
    height: calc(50% - 3rem);
    background: var(--primary-color);
    z-index: 0;
  }

  .section_solution .dec_line {
    top: -5rem;
    left: 37.5%;
  }

  .section_solution .row_title {
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: flex-end;
  }

  .section_solution .item_tab {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    margin-top: 1.66rem;
  }

  .section_solution .btn_tab~.btn_tab {
    margin-left: 1rem;
  }

  .section_solution .btn_tab {
    padding: 0.5rem 1rem;
    /* width: 10em; */
    width: 16em;
  }

  .section_solution .col_info {
    background: var(--third-color);
    border-radius: var(--border-radius);
  }

  .section_contact {
    background: var(--third-color);
  }

  .section_contact .dec_line {
    top: 5rem;
    right: 20%;
  }

  .section_contact .row_content {
    align-items: center;
  }

  .section_contact .row_content .item_form {
    padding: 3.33rem 2.5rem;
    border-radius: var(--border-radius);
    background: var(--fourth-color);
  }

  .section_contact .col_label {
    position: relative;
  }

  .section_contact .col_label .item {
    position: relative;
    z-index: 1;
  }

  .section_contact .col_label .dec_pic {
    position: absolute;
    z-index: 0;
  }

  .section_news .row_btn {
    justify-content: flex-end;
  }

  .section_news .dec_line {
    top: -5rem;
    right: 50%;
  }

  .section_partner .dec_line {
    top: 5rem;
    right: 50%;
  }

  .section_explore .dec_line {
    top: -5rem;
    right: 30%;
  }

  .section_explore .row_content {
    position: relative;
    justify-content: space-evenly;
    z-index: 1;
  }

  .section_explore .dec_pic {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
  }
}

/* page獨立用css */
@layer page_style {
  .page .dec_line:nth-of-type(1) {
    top: -5rem;
    right: 10%;
  }

  .page .dec_line:last-of-type {
    bottom: 5rem;
    left: 12%;
  }

  .page .container_find .row_map {
    position: relative;
    margin-bottom: 1.8rem;
  }

  .page .container_find .item_map {
    position: relative;
    background: #FCFCFC;
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  .page .container_find .item_map .map_country {
    position: absolute;
  }


  .page .container_map .content_arrow a.btn_arrow {
    box-shadow: none;
  }

  .page .container_map .map_country {
    position: relative;
  }

  .page .container_find .item_btn {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .page .container_find .btn_map {
    --btn_color: var(--second-color);
    --btn_bg: var(--third-color);
    display: flex;
    gap: 0.27rem;
    justify-content: center;
    flex-wrap: nowrap;
    width: 6.66rem;
    flex: none;
    color: var(--btn_color);
    font-size: 1rem;
    border: 1px solid var(--btn_color);
    box-sizing: border-box;
    background: var(--btn_bg);
  }

  .page .container_find .btn_map .icon svg {
    width: 1.1rem;
    fill: var(--btn_color);
  }

  .page .container_find .btn_map.is-active {
    --btn_color: var(--third-color);
    --btn_bg: var(--second-color);
  }

  .page .container_find .item_map .point_pin {
    position: absolute;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background: linear-gradient(180deg, #4D9AFF 0%, #09F 100%);
    box-shadow: 0px 0px 0px 0.4rem rgba(42, 154, 255, 0.20);
  }

  .page .container_find .item_map .point_pin {
    display: none;
  }

  .page .container_find .item_map .point_pin.is-active {
    display: block;
  }

  .page .container_find .point_pin.all.is-active {
    display: none;
  }

  /* 沖繩 */
  .page .container_find .point_pin.okinawa {
    inset: 0;
    margin: auto;
  }

  /* 北海道 */
  .page .container_find .point_pin.hokkaido {
    top: 22%;
    right: 20%;
  }

  /* 東北 */
  .page .container_find .point_pin.tohoku {
    top: 42%;
    right: 29%;
  }

  /* 中部 */
  .page .container_find .point_pin.chubu {
    top: 60%;
    right: 48%;
  }

  /* 關東 */
  .page .container_find .point_pin.kanto {
    top: 61%;
    right: 35%;
  }

  /* 中國 */
  .page .container_find .point_pin.chugoku {
    top: 63%;
    right: 68%;
  }

  /* 九州 */
  .page .container_find .point_pin.kyushu {
    top: 78%;
    right: 80%;
  }

  /* 四國 */
  .page .container_find .point_pin.shikoku {
    top: 75%;
    right: 67%;
  }

  /* 關西 */
  .page .container_find .point_pin.kansai {
    top: 68%;
    right: 57%;
  }
}

@layer footer {
  footer {
    position: relative;
    background: var(--third-color);
  }

  footer .item_logo {
    width: 14.3rem;
  }

  footer .btn_top {
    position: absolute;
    top: 0;
    right: 1.6rem;
    translate: 0 -50%;
    z-index: 2;
  }

  footer .btn_top.is-active {
    position: fixed;
    height: fit-content;
    bottom: 1.6rem;
    margin-top: auto;
  }

  footer .container_main {
    padding: 1.66rem 0;
  }

  footer nav.menu_content {
    margin: auto;
    width: fit-content;
    margin-bottom: 1.6rem;
  }

  footer .row_business {
    justify-content: space-between;
  }

  footer .item_business {
    display: flex;
    gap: 1.1rem;
  }

  footer .business_info {
    display: grid;
    grid-template-columns: 3.2rem 1fr;
    gap: 0.5rem;
    align-items: center;
    line-height: 1.25;
  }

  footer .content_title {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
  }

  footer .content_text {
    font-size: 0.833rem;
  }


  footer .container_bottom {
    padding: 0.833rem;
    border-top: 1px solid var(--border-color);
  }

  footer .row_bottom {
    justify-content: space-between;
    align-items: center;
  }

  footer .item_social {
    display: flex;
  }

  footer .item_copyright {
    font-size: 0.8333rem;
    color: #838383;
  }


  footer .btn_social {
    width: 1.7rem;
  }

  footer .btn_social .icon {
    display: block;
    padding: 0.15rem;
  }

  footer .btn_social .icon.off {
    display: none;
  }

  footer .btn_social.btn_disable .icon.off {
    display: block;
  }

  footer .btn_social.btn_disable .icon.on {
    display: none;
  }


  footer .btn_social~.btn_social {
    margin-left: 1.1rem;
  }

  footer .btn_social svg {
    fill: var(--default-color);
  }
}

/* @media screen and (max-width:640px){
  @layer index_style{
    .section_about .row_info .item_pic{
      margin-bottom: -12rem;
      margin-top: -4rem;
    }
  }
} */

@media screen and (max-width:767px) {
  @layer main_style {
    :root {
      --container_width: 88%;
      --pagecontainer_width: 88%;
    }

    .pc_block {
      display: none;
    }

    .index h2 {
      font-size: 2.85rem;
    }

    .page .sub_title {
      font-size: 1.8rem;
    }
  }

  /* max 767 */
  @layer header_framework {
    header {
      padding: 1.36rem 2rem
    }

    .main_menu {
      color: #fff;
    }


    header nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 0;
      color: #fff;
      font-size: 1.25em;
      font-weight: 400;
      background: rgba(20, 83, 179, 0.95);
      transition: all ease .3s;
      /* overflow: hidden; */
      overflow-y: scroll;
    }

    header nav.is-active {
      display: block;
      width: 100%;
      height: 100vh;
      padding: 2rem 0;
      bottom: 0;
    }

    header .main_menu,
    header .sub_menu {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding-bottom: 2rem;
    }

    header .main_menu li {
      width: fit-content;
    }

    header .sub_menu {
      height: 0;
      transition: all ease .3s;
    }

    header .main_menu .sub_menu>li {
      display: none;
    }

    /* 0418_add */
    header .main_menu ul.sub_menu li {
      white-space: break-spaces;
      line-height: 1.5;
    }

    .main_menu>li:has(.btn_menu) {
      padding: 1rem 0;
      width: 100%;
    }

    header .main_menu ul.sub_menu.is-active {
      display: flex;
      background: rgba(0, 0, 0, 0.2);
      height: fit-content;
      margin-top: 0.6rem;
      padding: 0.4rem 0;
      font-size: 1rem;
    }

    /* 0418_end */
    header .main_menu ul.sub_menu.is-active>li {
      display: block;
    }

    header .main_menu ul.sub_menu.is-active::before {
      display: block;
    }

    .select_language {
      margin-top: 1rem;
    }

    .btn_hamburger {
      position: relative;
      display: flex;
      display: -ms-flexbox;
      flex-direction: column;
      align-items: stretch;
      justify-content: space-between;
      width: 2.65rem;
      height: 2rem;
      z-index: 999;
    }

    .btn_hamburger::before,
    .btn_hamburger::after {
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background: rgba(51, 51, 51, 1);
      transition: all ease .3s;
    }

    .btn_hamburger::before {
      box-shadow: 0 calc(1rem - 1px) 0 rgba(51, 51, 51, 1);
    }

    .btn_hamburger.is-active {
      justify-content: center;
    }

    header .btn_hamburger.is-active::before {
      transform: rotate(45deg) translate(1px);
      box-shadow: 0 12px 0 rgba(28, 28, 28, 0);
      background: #fff;
    }

    header .btn_hamburger.is-active::after {
      transform: rotate(-45deg) translate(1px);
      background: #fff;
    }
  }

  /* max 767 */
  @layer btn_style {

    a.btn_tab {
      display: grid;
      align-items: center;
      padding: 0.5rem 1rem;
      font-size: 0.63rem;
      line-height: 1.25;
      text-align: center;
      border-radius: 1000px;
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
      background: var(--third-color);
    }

    .content_btn {
      justify-content: center;
    }

    a.btn_arrow img {
      width: 1.3rem;
    }
  }

  /* max 767 */
  @layer main_framework {

    .dec_line {
      width: 12rem;
    }

    .container_started .row_app .content_info,
    .container_started .row_app .item.item_app {
      padding-right: initial !important;
    }

    .container_started .row_app .item.item_app {
      padding: 2.22rem !important;
    }

    /* 側選單 */
    menu.side_menu {
      padding: 0.4rem;
    }

    menu.side_menu .btn_social .icon {
      padding: 0.3rem;
    }

    .container .row_content {
      align-items: center;
      flex-direction: column;
    }

    .col_scroll {
      height: 15.5rem;
    }

    .container_started .item_app {
      text-align: center;
      flex-direction: column;
    }

    .container_started .item_app .app_pic {
      width: 8rem;
      margin-right: 0;
      margin-bottom: 1rem;
    }

    .container_started .col_pic .item_pic {
      position: relative;
      z-index: 0;
    }

    .container_started .col_info .item_app {
      display: none;
    }

    .container_started .col_pic .item_app {
      position: relative;
      margin-top: 0;
      z-index: 2;
    }

    .container_started .item_pic {
      margin-top: 2rem;
      height: 0;
      padding-bottom: 100%;
      overflow: hidden;
    }

    .content_arrow {
      width: 100%;
      top: 0;
      bottom: 0;
      height: fit-content;
      margin: auto;
      justify-content: space-between;
    }

    .container_map .content_arrow .btn_pre {
      translate: -50% 0;
    }

    .container_map .content_arrow .btn_next {
      translate: 50% 0;
    }

    .container_map .item_content {
      grid-template-columns: 25% 1fr;
      min-height: 14.5rem;
    }

    /* .container_map .col_info > .item{
      display: none;
    } */

    .container_map .col_info>.item.is-active {
      display: grid;
      border-width: 1px 0;
      border-style: solid;
      border-color: #fff;
    }

    .container_map .content_list {
      grid-row: 2;
      grid-column: 1 / 3;
    }

    .container_map .note {
      grid-column: 1 / 3;
      padding: 0.5rem;
      font-size: 0.8rem;
    }

    .page .container_map .is-active .note {
      color: #fff;
    }

    .container_map .row_content {
      flex-direction: column;
      gap: 1.3rem;
    }

    .container_step .step_arrow {
      display: none;
    }

    .container_product .row_content {
      flex-direction: column;
    }

    .container_partner .row_content {
      justify-content: center;
    }

    .container_contact .form_contact {
      grid-template-rows: repeat(5, 1fr) 2fr;
    }

    .container_contact .item_group {
      grid-column: 1 / 3;
    }


  }

  /* max 767 */
  @layer page_framework {
    .page .row_content {
      flex-direction: column;
      justify-content: center;
    }

    .page .section_content {
      padding: 2rem;
    }

    .page .container_feature .row_card {
      flex-direction: column;
      gap: 1rem;
    }

    .page .container_feature .col_card {
      padding: 1.1rem;
    }

    .page .container_feature .item_card .card_icon {
      width: 6.5rem;
      margin-bottom: 0.5rem;
    }

    .page .container_partner .row_logo {
      padding: 0 4rem;
    }

    .page .container_step .item_step {
      padding: 0 0.5rem;
    }

    .page .container_explore .row_content {
      flex-direction: column;
      align-items: center;
    }

    .page .container_newscard {
      grid-template-columns: repeat(1, 1fr);
      gap: 2rem;
      padding: 0 1.5rem;
    }

    .container_news .btn_news .news_contnet {
      gap: 0.1rem;
      margin-top: -4rem;
    }

    .container_news .news_contnet .news_title {
      line-height: 1.5;
    }

    .page .container_target .row_content {
      flex-direction: column;
    }

    .page .container_target .btn_target::after {
      height: 75%;
    }

    .page .container_target .target_title {
      padding: 1.2rem 0.25rem;
    }

    .page .container_target .target_pic::before {
      padding-bottom: 70%;
    }

    .page .container_find .item_map .map_japan {
      top: 10%;
      right: 0;
      left: 0;
      margin: auto;
      width: 90%;
    }

    .page .container_find .item_map .map_okinawa {
      top: 28%;
      left: 10%;
      width: 29.53%;
    }

    .page .container_product .row_info .col_pic {
      margin: auto;
    }

    .page .container_map .item_content {
      padding-bottom: 0.4rem;
    }

  }

  /* max 767 */
  @layer index_style {

    /* 0414_add */
    .section_kv a.btn_scroll {
      bottom: 0;
      translate: 0 50%;
    }

    /* 0414_end */

    .section_about .dec_pic {
      top: 0rem;
      right: 0.5rem;
      width: 15rem;
    }

    .section_about .row_info {
      justify-content: center;
    }

    .section_about .container_app {
      position: relative;
      margin-top: -20%;
      z-index: 2;
    }

    .section_about .row_info .item_pic {
      margin-top: -2rem;
      padding-bottom: 145%;
    }

    .section_about .container_started .col_pic .item_app {
      width: 120%;
      translate: -8.33% 0;
      margin-bottom: 1.6rem;
    }

    .section_solution::before {
      height: 58%;
    }

    .section_solution .btn_tab~.btn_tab {
      margin-left: 0.5rem;
    }

    .section_contact .item_title {
      margin-bottom: 1.6rem;
    }

    .section_contact .col_label .dec_contact {
      width: 16rem;
      top: -10rem;
      right: -4.5rem;
    }

    .section_contact .col_label .dec_contact2 {
      width: 10rem;
      bottom: 2rem;
      left: -3rem;
      translate: 12% 0;
      z-index: 3;
    }


    .container_news .news_list .news_title {
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
  }

  /* max 767 */
  @layer page_style {
    .container_started .item_app .app_info .btn_app {
      height: 3rem;
    }

    .page .container_find .item_btn {
      margin: auto;
      margin-top: 1.1rem;
      width: fit-content;
      gap: 0.5rem;
    }

    .page .container_find .btn_map {
      padding: 0.5rem 0;
      width: 5.55rem;
    }

  }

  @layer footer {

    footer .main_menu {
      display: none;
    }

    footer .item_business {
      margin-top: 2rem;
      flex-direction: column;
    }

    footer .row_bottom {
      justify-content: center;
      gap: 1rem;
    }
  }
}



@media screen and (min-width:768px) {

  @layer main_style {

    :root {
      --container_width: 88%;
      --pagecontainer_width: 82%;
    }

    .m_block {
      display: none;
    }

    html,
    body {
      font-size: 1.4vw;
    }
  }

  /* min 768 */
  @layer header_style {
    .main_menu {
      display: flex;
    }

    .main_menu>li {
      position: relative;
      display: flex;
      display: -ms-flexbox;
      flex-direction: column;
      align-items: center;
    }

    .main_menu>li~li::before {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      content: "";
      display: block;
      width: 1px;
      background: var(--border-color);
      height: 1rem;
    }

    /* header .main_menu>li:last-of-type::before {
      display: none;
    } */

    header .main_menu ul.sub_menu {
      opacity: 0;
      display: flex;
      position: absolute;
      flex-direction: column;
      align-items: stretch;
      top: 3.25rem;
      font-size: 0.9em;
      border-radius: 0.45455rem;
      overflow: hidden;
      background: rgba(236, 236, 236, 0.90);
      box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
      transform: translateY(-10px);
      z-index: -1;
      pointer-events: none;
      transition: transform 0.3s;
    }

    header .main_menu>li:hover ul.sub_menu {
      opacity: 1;
      z-index: 2;
      transform: translateY(0px);
      pointer-events: auto;
    }

    header.is-active,
    .page header {
      padding: 0.833rem 3rem;
    }
  }

  /* min 768 */
  @layer main_framework {
    .container_started .col_pic .item_app {
      display: none;
    }

    .container_map .item_map {
      width: 100%;
      height: 100%;
    }

    .container_map .item_map img {
      object-fit: cover;
      object-position: left;
      height: 100%;
    }

    .container_map .col_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .container_map .content_arrow {
      right: 0;
      top: -1.66rem;
      translate: 0 -100%;
    }

    .container_map .item_content {
      grid-template-columns: 34.5% 1fr;
    }

    .container_map .content_pic {
      grid-row: 1 / 4;
    }

    .container_map .content_list {
      grid-column: 2 / 4;
      align-self: center;
      padding-bottom: 0.5em;

    }

    .container_map .note {
      grid-column: 2 / 4;
      align-self: start;
      /* padding-bottom: 0.5em; */
      /* margin-bottom: 0.5em; */
      font-size: 0.88rem;
    }

    /* .is-active .note {
      color: #ffffff;
    } */
  }

  /* min 768 */
  @layer page_framework {
    .page .container_map .col_info {
      gap: 1rem;
    }
  }

  /* min 768 */
  @layer index_style {

    /* 0414_add */
    .section_kv .kv_content a.btn_scroll {
      bottom: 11.5%;
    }

    /* 0414_end */

    .section_about .row_info {
      justify-content: space-between;
    }

    .section_about .container_app {
      position: absolute;
    }

    .section_about .item_app {
      background: transparent;
    }

    .section_about .col_info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .section_about .col_info .item_app::after {
      position: absolute;
      content: "";
      display: block;
      width: 100%;
      height: 14.44rem;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      background: linear-gradient(89deg, rgba(219, 233, 255, 0.50) 62.21%, #DBE9FF 100%);
    }

    .section_contact .col_label .dec_contact {
      width: 60%;
      bottom: 0;
      left: 0;
      translate: -83% 0;
    }

    .section_contact .col_label .dec_contact2 {
      width: 26.25%;
      bottom: 1rem;
      right: 0;
      translate: 50% 0;
      z-index: 3;
    }
  }

  /* min 768 */
  @layer page_style {
    .page .container_started .row_content {
      position: relative;
      overflow: hidden;
    }

    .page .container_started .col_pic {
      position: absolute;
      right: 0;
    }

    .page .container_find .item_map .map_japan {
      top: 0;
      right: 32.6%;
      width: 25.25%;
    }

    .page .container_find .item_map .map_okinawa {
      bottom: 9.14%;
      left: 25.9%;
      width: 7.986%;
    }

    .page .container_find a.btn_map {
      position: absolute;
    }

    .page .container_find a.btn_map[data-tabMap="all"] {
      top: 9.4%;
      left: 26%;
    }

    .page .container_find a.btn_map[data-tabMap="okinawa"] {
      top: 27.14%;
      left: 26%;
    }

    .page .container_find a.btn_map[data-tabMap="hokkaido"] {
      top: 9.4%;
      left: 47%;
    }

    .page .container_find a.btn_map[data-tabMap="tohoku"] {
      top: 27.14%;
      right: 26%;
    }

    .page .container_find a.btn_map[data-tabMap="chubu"] {
      top: 27.14%;
      left: 47%;
    }

    .page .container_find a.btn_map[data-tabMap="kanto"] {
      bottom: 27.14%;
      right: 26%;
    }

    .page .container_find a.btn_map[data-tabMap="chugoku"] {
      bottom: 27.14%;
      left: 36%;
    }

    .page .container_find a.btn_map[data-tabMap="kansai"] {
      bottom: 9.4%;
      right: 26%;
    }

    .page .container_find a.btn_map[data-tabMap="shikoku"] {
      bottom: 9.4%;
      right: 36%;
    }

    .page .container_find a.btn_map[data-tabMap="kyushu"] {
      bottom: 9.4%;
      left: 36%;
    }


  }

}


@media screen and (min-width:992px) {
  @layer main_style {

    html,
    body {
      font-size: 1.15vw;
    }
  }

  @layer index_style {

    .section_about .row_info .item_pic {
      margin-bottom: -5rem;
    }
  }
}

@media screen and (min-width:1200px) {
  @layer main_style {

    html,
    body {
      font-size: 1.1vw;
    }
  }
}


@media screen and (min-width:1440px) {
  @layer main_style {

    html,
    body {
      font-size: 1vw;
    }
  }
}

@media screen and (min-width:1600px) {
  @layer main_style {
    :root {
      --container_width: 83%;
      --pagecontainer_width: 78%;
    }

    html,
    body {
      font-size: 0.92vw;
    }
  }

  .section_about .row_info .item_pic {
    margin-bottom: -10rem;
  }
}


@media screen and (min-width:1920px) {
  @layer main_style {
    :root {
      --container_width: 82%;
      --pagecontainer_width: 76%;
    }

    html,
    body {
      font-size: 0.9vw;
    }
  }
}


@media (hover: hover) {
  .main_menu>li:hover>a {
    color: var(--primary-color);
  }

  /* 0418_add_線條動畫效果 */
  .main_menu>li:hover>a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .main_menu>li:hover>a:hover::after {
    transform: scaleX(1);
  }

  /* 0418_end_線條動畫效果 */

  .main_menu .sub_menu li:hover {
    background-color: transparent;
  }

  .main_menu .sub_menu li:hover a {
    color: var(--primary-color);
  }

  .main_menu .sub_menu li:hover a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
  }

  .main_menu .sub_menu li:hover a:hover::after {
    transform: scaleX(1);
  }

  /* 0418_end_線條動畫效果 */
  /* 0418_add */
  .main_menu a.btn_menu.is-active,
  header .main_menu a.btn_menu:has(+ ul.sub_menu a.is-active),
  header .main_menu .sub_menu li:has(a.is-active) {
    color: var(--primary-color);
    background: transparent;
  }

  a.btn:hover,
  button.label_btn:hover,
  a.btn_number:hover {
    filter: drop-shadow(0px 0px 0.5rem rgba(var(--primary-color-rgb), .5));
  }

  a.btn.is-active:hover,
  .main_menu a.btn:hover,
  a.btn_disable:hover {
    filter: none;
  }

  a.btn_line:hover {
    filter: drop-shadow(0px 0px 0.5rem rgba(var(--line-color), .5));
  }

  .section_dark a.btn:hover,
  a.btn.btn_play:hover {
    filter: drop-shadow(0px 0px 0.5rem rgba(255, 255, 255, .5));
  }

  a.btn.btn_play:hover {
    scale: 1.25;
  }

  .item_bread li a:hover,
  .item_bread li a:hover svg {
    color: var(--second-color);
    stroke: var(--second-color);
  }

  a.news_list:hover {
    background: rgba(var(--primary-color-rgb), .1);
    filter: none;
  }

  .page .container_feature .col_card:hover {
    background: #EDF5FF;
  }

  .page .container_target .btn_target:hover::after {
    height: 100%;
    background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0) 0%, rgba(var(--primary-color-rgb), 1) 75%);
  }
}


/* 外掛系列css */
/* 首頁 輪播 */
.section_kv .swiper-pagination.swiper-pagination {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: fit-content;
  gap: 0.5rem;
  top: 0;
  bottom: 0;
  right: 1rem;
  left: initial;
  margin: auto;
  margin-right: 0;
  width: fit-content;
  z-index: 99;
}

.section_kv .swiper-pagination.swiper-pagination .swiper-pagination-bullet {
  padding: 0;
  margin: 0;
  width: 0.66rem;
  height: 0.67rem;
  background: #ECECEC;
  opacity: 1;
}

.section_kv .swiper-pagination.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: #FFA5EF;
}

/* 首頁輪播影片樣式 */
.section_kv .swiper-slide video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section_kv .pc_block {
  display: none;
}

@media screen and (min-width: 768px) {
  .section_kv .pc_block {
    display: block;
  }

  .section_kv .m_block {
    display: none;
  }
}

/* partner 輪播 */
.container_partner .swiper {
  position: relative;
  padding: 0.5rem 0;
}

/* .container_partner .content_arrow{
  top: 0;
  bottom: 0;
  margin: auto 0; 
  height: fit-content;
} */
.container_partner .content_arrow {
  position: relative;
  translate: -5.5rem 0;
  margin-bottom: -4.8rem;
  width: calc(100% + 11rem);
}

.container_partner .swiper-button-next {
  right: 0;
}

.container_partner .swiper-button-prev {
  left: 0;
}

.container_partner .swiper-button-next,
.container_partner .swiper-button-prev {
  position: relative;
  margin: 0;
  width: 3.33rem;
  height: 3.33rem;
  box-sizing: border-box;
  color: var(--default-color);
}

.container_partner .swiper-button-next:after,
.container_partner .swiper-button-prev:after {
  font-size: 0.8rem;
  font-weight: 700;
}

/*--0410add_聯絡我們彈窗--*/
.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  height: 100%;
  width: 100%;
  z-index: 1001;
  background: rgba(0, 0, 0, 0.8);
  overflow: auto;
}

.lightbox.is-active {
  display: flex;
  display: -ms-flexbox;
  flex-wrap: wrap;
}

.box_modal {
  position: absolute;
  height: 95%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  justify-content: center;
  align-items: center;
  display: none;
  margin: auto;
  width: 95%;
  background: transparent;
  box-sizing: border-box;
}

.box_modal.is-active {
  display: flex;
}

.box_modal .btn_close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1002;
  width: 2em;
  min-width: 35px;
  height: 2em;
  min-height: 35px;
  box-sizing: border-box;
  color: transparent;
}

.box_modal .btn_close::before,
.box_modal .btn_close::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: block;
  content: "";
  width: 55%;
  height: 55%;
  margin: auto;
  z-index: 9;
  border-top: 2px solid #fff;
  transform-origin: center;
}

.box_modal .btn_close::before {
  transform: rotate(45deg) translate(0, 45%);
}

.box_modal .btn_close::after {
  transform: rotate(-45deg) translate(0, 45%);
}

.box_modal .modal_content img {
  display: block;
  width: 100%;
  height: auto;
}

.box_modal .modal_media::before {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.box_modal .modal_media iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.box_modal .btn_close {
  width: 3vw;
  min-width: 35px;
  height: 3vw;
  min-height: 35px;
  background: #12A3E3;
  border-radius: 50px;
  margin: 1.5vw;
}

.box_modal .title {
  text-align: center;
  color: #00447C;
  margin-bottom: 1vw;
  font-size: 3vw;
}

.box_modal .modal_content {
  position: relative;
  /* width: 92%; */
}

.box_modal .content_inner {
  position: relative;
  flex-direction: column;
  justify-content: space-between;
  padding: 3.33rem 2.5rem;
  box-sizing: border-box;
  background: var(--third-color);
  border-radius: var(--border-radius);
}

.box_modal .content_inner p {
  font-size: 1.2rem;
}

@media screen and (min-width:1200px) {
  .box_modal {
    width: 80%;
    height: max-content;
  }
}


@media screen and (min-width:1600px) {

  .box_modal .btn_close::before,
  .box_modal .btn_close::after {
    border-width: 3px;
  }
}

/*NewsMore YT iframe*/
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}