/*
Structure instruction：
  # [Default Css]
    - [Root Css]: :root { ... }
    - [Structure]: html, body, main, #wrap ...
    - [HtmlTag]: h1, a, ::-webkit-scrollbar ...

  # [Plugins]
    - [Plugins Modified]: Bootstrap Modals...
    - [Plugins SelfMade]: My Modals...

  # [Public Style]
    - [Simple Css]: typesetting, color ... ( Single Css )
    - [Elements]: button, checkbox, icon ... ( Simple Component )
    - [Components]: RWD_table, user_avatar ... ( Complex Components )

  # [Pages]
    - [Include Page]: header, footer
    - [Current Page]: #login, #about

  -- Author Comebuy
*/

@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap);


/*######### [Default Css] #########*/
  /*====== [Root Css] ======*/
    :root {
      /* color */
      --c-f7: #F7F7F7;
      --c-ef: #EFEFEF;

      --primary: #00a4ab; /* Teal */
      --primary-hover: #5090a4; /* Teal */
      --primary-light: #7FE9C6;
      --primary2: #5090a4; /* Slate Blue */
      
      --secondary: #eee;
      --secondary-hover: #f0f0f0;
      
      --dark: #262626;
      --dark-hover: #333;
      
      --swiper-theme-color: #00a4ab;

      /* font */
      --ff-default: 'Noto Sans TC';
      --ff-Lexend: 'Lexend';
      --ff-fontawesome: 'Font Awesome 5 Free';

      --fs-14: .875rem;
      --fs-16: 1rem;
      --fs-18: 1.125rem;
      --fs-20: 1.25rem;
      --fs-22: 1.375rem;
      --fs-24: 1.5rem;
      --fs-28: 1.75rem;
      --fs-32: 2rem;
      --fs-36: 2.25rem;
      --fs-h1: 2.5rem;

      --comp-height-lg: 56px;
      --comp-height: 44px;

      --header-height: 64px;
      --main-full-height: calc(100vh - var(--header-height));
    }

    @media (max-width: 991.98px) {
      :root {
        --comp-height-lg: 48px;
        --comp-height: 40px;
      }
    }


  /*====== [Structure] ======*/
    /* html { scroll-behavior: smooth; } */
    body { font-family: var(--ff-Lexend), var(--ff-default), 'Microsoft JhengHei', sans-serif; }
    #wrap { display: flex; flex-direction: column; margin-inline: auto; min-height: 100vh; min-height: 100dvh; max-width: 1920px; }
    main { flex-grow: 1; }
    [v-cloak] { opacity: 0; }


  /*====== [HtmlTag] =======*/
    a { color: var(--bs-dark); text-decoration: none; }
    a:hover { color: inherit; text-decoration: none; }
    label { margin-bottom: 0; }



/*######### [Plugins] #########*/
  /*====== [Plugins Modified] ======*/
    /*=== Bootstrap ===*/
      .btn {
        --bs-btn-focus-box-shadow: transparent; --bs-navbar-toggler-focus-width: 0;
        display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-btn); 
      }

      /* ratio */
      .ratio-2x1 { --bs-aspect-ratio: 50%; }
      .ratio-5x3 { --bs-aspect-ratio: 60%; }
      .ratio-3x2 { --bs-aspect-ratio: 66.6%; }

      .form-control { background-color: #F3F3F3; border-radius: 0; min-height: var(--comp-height); }
      .form-control:focus { background-color: #F3F3F3; box-shadow: none !important; }
      .navbar-brand { padding-block: 0; }

      .dropdown-menu {
        --bs-dropdown-link-active-bg: var(--primary);
      }

      /* pagination */
      .pagination {
        --bs-pagination-padding-x: 1rem;
        --bs-pagination-font-size: 1.125rem;
        --bs-pagination-color: #4F4F4F;
        --bs-pagination-border-width: 0px;
        --bs-pagination-border-radius: 0px;
        --bs-pagination-hover-color: var(--dark, #262626);
        --bs-pagination-hover-bg: transparent;
        --bs-pagination-focus-color: var(--dark, #262626);
        --bs-pagination-focus-bg: transparent;
        --bs-pagination-focus-box-shadow: none;
        --bs-pagination-active-color: var(--dark, #262626);
        --bs-pagination-active-bg: transparent;
        --bs-pagination-disabled-color: #ccc;
        --bs-pagination-disabled-bg: transparent;
      }
      .pagination { font-weight: 300; font-size: 18px; flex-wrap: wrap; justify-content: center; }
      .pagination .active>.page-link,
      .pagination .page-link.active { font-weight: 500; }
      @media (max-width: 575.98px) {
        .pagination { 
          --bs-pagination-padding-x: 0.75rem;
          --bs-pagination-font-size: .9375rem;
        }
      }


  /*====== [Plugins SelfMade] ======*/
    /*=== js- ===*/



/*######### [Public Style] #########*/
  /*====== [Simple Css] ======*/
    /*=== typesetting ===*/
      .flex-center { display: flex; align-items: center; justify-content: center; }
      .flex-center-a { display: flex; align-items: center; }
      .pt-120 { padding-top: 120px; }
      .pt-80 { padding-top: 80px; }
      .size-50 { width: 50px; height: 50px; }

      .container-1600 { max-width: 1600px; margin-inline: auto; }
      @media (min-width: 1700px) {
        .container-3xl-1600 { max-width: 1600px; margin-inline: auto; }
      }
      .container-1200 { max-width: 1200px; margin-inline: auto; }
      .container-1000 { max-width: 1000px; margin-inline: auto; }
      .container-800 { max-width: 800px; margin-inline: auto; }
      .container-600 { max-width: 600px; margin-inline: auto; }
      .max-w-320 { max-width: 320px; }

      .h-main-full { height: var(--main-full-height); }
      .max-h-main-full { max-height: var(--main-full-height); }


    /*=== color ===*/
      .bg-f7 { background-color: var(--c-f7); }
      .bg-ef { background-color: var(--c-ef); }
      .bg-img { background: center / cover no-repeat; }
      .bg_eTreego_gradient { --def: linear-gradient(to right, #B7D33C 0%, #00A4AB 60.5%); --bg: url(); background-image: var(--bg), linear-gradient(to right, #B7D33C 0%, #00A4AB 60.5%); }
      .c_primary { color: var(--primary); }
      .error { color: red; }


    /*=== font ===*/
      .fs-14 { font-size: var(--fs-14) !important; }
      .fs-16 { font-size: var(--fs-16) !important; }
      .fs-18 { font-size: var(--fs-18) !important; }
      .fs-20 { font-size: var(--fs-20) !important; }
      .fs-22 { font-size: var(--fs-22) !important; }
      .fs-24 { font-size: var(--fs-24) !important; }
      .fs-28 { font-size: var(--fs-28) !important; }
      .fs-32 { font-size: var(--fs-32) !important; }
      .fs-36 { font-size: var(--fs-36) !important; }
      @media (min-width: 576px) {
        .fs-sm-14 { font-size: var(--fs-14) !important; }
        .fs-sm-16 { font-size: var(--fs-16) !important; }
        .fs-sm-18 { font-size: var(--fs-18) !important; }
        .fs-sm-20 { font-size: var(--fs-20) !important; }
        .fs-sm-22 { font-size: var(--fs-22) !important; }
        .fs-sm-24 { font-size: var(--fs-24) !important; }
        .fs-sm-28 { font-size: var(--fs-28) !important; }
        .fs-sm-32 { font-size: var(--fs-32) !important; }
        .fs-sm-36 { font-size: var(--fs-36) !important; }
      }
      @media (min-width: 992px) {
        .fs-lg-14 { font-size: var(--fs-14) !important; }
        .fs-lg-16 { font-size: var(--fs-16) !important; }
        .fs-lg-18 { font-size: var(--fs-18) !important; }
        .fs-lg-20 { font-size: var(--fs-20) !important; }
        .fs-lg-22 { font-size: var(--fs-22) !important; }
        .fs-lg-24 { font-size: var(--fs-24) !important; }
        .fs-lg-28 { font-size: var(--fs-28) !important; }
        .fs-lg-32 { font-size: var(--fs-32) !important; }
        .fs-lg-36 { font-size: var(--fs-36) !important; }
      }


  /*====== [Elements] ======*/
    /*=== button ===*/
      [class*="btn_"] {
        --default-color: ; --default-bg: ;
        --hover-color: ; --hover-bg: ;
        --bs-btn-color: var(--default-color); --bs-btn-bg: var(--default-bg); --bs-btn-border-color: var(--default-bg);
        --bs-btn-disabled-color: var(--default-color); --bs-btn-disabled-bg: var(--default-bg); --bs-btn-disabled-border-color: var(--default-bg);
        --bs-btn-hover-color: var(--hover-color); --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-border-color: var(--hover-bg);
        --bs-btn-active-color: var(--hover-color); --bs-btn-active-bg: var(--hover-bg); --bs-btn-active-border-color: var(--hover-bg);
      }
      [class*="btn_outline_"] {
        --default-color: ; --default-bg: ;
        --hover-color: ; --hover-bg: ;
        --bs-btn-color: var(--default-color); --bs-btn-bg: var(--default-bg); --bs-btn-border-color: var(--default-color);
        --bs-btn-disabled-color: var(--default-color); --bs-btn-disabled-bg: var(--default-bg); --bs-btn-disabled-border-color: var(--default-color);
        --bs-btn-hover-color: var(--hover-color); --bs-btn-hover-bg: var(--hover-bg); --bs-btn-hover-border-color: var(--hover-bg);
        --bs-btn-active-color: var(--hover-color); --bs-btn-active-bg: var(--hover-bg); --bs-btn-active-border-color: var(--hover-bg);
      }

      .btn_white { --default-bg: white; --default-color: var(--dark); --hover-bg: #f3f3f3; --hover-color: var(--dark); }
      .btn_dark { --default-bg: var(--dark); --default-color: white; --hover-bg: var(--dark-hover); --hover-color: white; }
      .btn_primary { --default-bg: var(--primary); --default-color: white; --hover-bg: var(--primary-hover); --hover-color: white; }
      .btn_secondary { --default-bg: var(--secondary); --default-color: var(--primary); --hover-bg: var(--secondary-hover); --hover-color: var(--primary); }

      .btn_white_dark { --default-bg: white; --default-color: var(--dark); --hover-bg: var(--dark); --hover-color: white; }
      .btn_white_primary { --default-bg: white; --default-color: var(--primary); --hover-bg: var(--primary); --hover-color: white; }
      .btn_secondary_primary { --default-bg: var(--secondary); --default-color: var(--primary); --hover-bg: var(--primary); --hover-color: white; }

      .btn_active_darker {
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-btn-hover-bg), black 6%);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-hover-bg), black 6%);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-btn-hover-bg), black 12%);
      }
      .btn_active_lighter {
        --bs-btn-hover-border-color: color-mix(in srgb, var(--bs-btn-hover-bg), white 6%);
        --bs-btn-active-bg: color-mix(in srgb, var(--bs-btn-hover-bg), white 6%);
        --bs-btn-active-border-color: color-mix(in srgb, var(--bs-btn-hover-bg), white 0%);
      }

      .btn_md { font-size: var(--fs-18); min-height: var(--comp-height); font-weight: 500; padding: 4px 26px; }
      .btn_lg { font-size: var(--fs-18); min-height: var(--comp-height-lg); font-weight: 500; padding: 4px 32px; }

      .btn { border-radius: 100vmax; }
      .btn_arrow { --color: var(--primary); --border-color: var(--primary); color: var(--color); border: 1px solid var(--border-color); padding: 12px 15px; border-radius: 100vmax; }
      .btn_arrow::after { content: '→'; display: block; line-height: 0; }
      .btn_arrow_dark { --color: var(--dark); --border-color: var(--dark); }

      .btn_power { --color: var(--primary-light); --border-color: var(--primary); --hover-color: var(--primary); color: var(--color); border: 1px solid var(--border-color); padding: 0; width: 40px; height: 40px; border-radius: 100vmax; background: url(../img/icon/power.svg) center / 28px 28px no-repeat; }


    /*=== <a> alink ===*/
      .ch_aLine a { text-decoration: underline; }


    /*=== label_required ===*/
      .label_required::before { content: '* '; display: inline; font-size: 1.2em; color: #00F0FF; line-height: 0.8; }


    /*=== animate ===*/
      .animate_fadeInUp { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); animation: fadeInUp 1s ease forwards; }
      @keyframes fadeInUp {
        100% { opacity: 1; -webkit-transform: translateZ(0); transform: translateZ(0); }
      }



  /*====== [Components] ======*/
    /*=== title ===*/
      .page_title { font-size: var(--fs-h1); font-weight: 600; }
      .section_title { font-size: var(--fs-32); font-weight: 600; margin-bottom: 30px; }


    /*=== search_input ===*/
      .page_title_with_search_input { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
      .search_input { max-width: 380px; width: 100%; position: relative; }
      .search_input .search_input--input { border-radius: 100vmax; background-color: #fff; border-color: #000; padding-inline: 24px 60px; font-size: var(--fs-18); }
      .search_input .search_input--btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
      .search_input .search_input--btn::after { content: '\f002'; display: block; font-family: var(--ff-fontawesome); font-weight: bold; font-size: 1.2em; color: var(--primary); }
      .search_input .search_input--btn:active { border-color: transparent; }
      @media (max-width: 767.98px) {
        .page_title_with_search_input > .search_input { max-width: unset; }
      }


    /*=== arrow_list ===*/
      .arrow_list { list-style: url(../img/icon/arrow1.svg); }
      .arrow_list li { padding-left: 1em; }
      .arrow_list li + li { margin-top: 1em; }


    /*=== banner ===*/
      .banner { background-position-y: bottom; }
      .banner_img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
      .banner_full_height { height: var(--main-full-height); z-index: -1; }
      .banner_max_full_height { max-height: var(--main-full-height); }
      @media (max-width: 991.98px) {
        .banner_max_full_height { height: var(--main-full-height); }
      }
      .banner_text_container--center { height: 100%; display: flex; align-items: center; }
      .banner_text_container--bottom { height: 100%; display: flex; align-items: center; }
      @media (max-width: 991.98px) {
        .banner_text_container--bottom { align-items: flex-end; }
      }

      .banner_text { padding: 48px 60px 48px 0; max-width: 800px; }
      .banner_text--en { color: white; font-size: 40px; font-weight: 600; }
      .banner_text--tw { color: white; font-size: 44px; font-weight: 300; }
      .banner_text--title { color: white; font-size: 40px; font-weight: 700; }
      .banner_text--desc { color: white; font-size: 28px; font-weight: 300; margin-top: 8px; }
      @media (max-width: 1599.98px) {
        .banner_text--en { font-size: 36px; }
        .banner_text--tw { font-size: 40px; }
        .banner_text--title { font-size: 36px; }
        .banner_text--desc { font-size: 24px; }
      }
      @media (max-width: 768.98px) {
        .banner_text--en { font-size: 24px; }
        .banner_text--tw { font-size: 28px; }
        .banner_text--title { font-size: 24px; }
        .banner_text--desc { font-size: 22px; }
      }


    /*=== page_editor ===*/
      .page_editor { font-size: var(--fs-18); }
      .page_editor .part { margin-bottom: 50px; }
      .page_editor .title { font-size: var(--fs-22); font-weight: 700; margin-bottom: 20px; }


    /*=== news_card ===*/
      .news_card { --news-color: var(--dark); color: var(--news-color); }
      .news_card--img { width: 100%; aspect-ratio: 3/2; background: rgba(222,222,222,0.85); overflow: hidden; }
      .news_card--img > img { width: 100%; height: 100%; object-fit: cover; transition: .5s transform ; }
      .news_card--body { padding-block: 24px; border-bottom: 1px solid var(--primary); }
      .news_card--date { display: inline-block; border: 1px solid var(--news-color); border-radius: 100vmax; padding-inline: 10px; font-size: var(--fs-18); font-weight: 400; margin-bottom: 12px; transition: all 0.3s ease; }
      .news_card--title { flex-grow: 1; min-height: 100px; font-size: var(--fs-22); font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; transition: color 0.3s ease; }

      a.news_card:hover .news_card--img > img { transform: scale(1.03); filter: brightness(0.8); }
      a.news_card:hover .news_card--date { color: var(--primary); border-color: var(--primary); }
      a.news_card:hover .news_card--arrow { color: var(--primary); border-color: var(--primary); }
      a.news_card:hover .news_card--title { color: var(--primary); }
      @media (max-width: 575.98px) {
        .news_card--title { font-size: var(--fs-20); }
      }


    /*=== affix_list ===*/
      .affix_menu { display: flex; flex-direction: column; gap: 10px; padding: 18px 10px; background: #EFEFEF; border-radius: 15px;
        width: 200px; max-height: calc(100vh - var(--header-height) - 100px); }
      .affix_menu--title { font-size: var(--fs-18); font-weight: 700; text-align: center; padding: 2px 6px; }
      .affix_menu--link { border: 1px solid white; background: white; color: var(--dark); padding: 4px 6px; cursor: pointer; user-select: none; }
      .affix_menu--link:hover { border: 1px solid var(--primary); background: var(--primary) !important; color: white !important; }
      .affix_menu--link.active { border: 1px solid var(--primary); color: var(--primary); }


    /*=== editor ===*/
      .editor iframe,
      .editor video { aspect-ratio: 16/9; max-width: 100%; height: auto; object-fit: contain; }
      .editor iframe:not([width]),
      .editor video:not([width]) { width: 100%; }
      .editor img { max-width: 100%; height: auto; }
      .editor table { max-width: 100%; }
      .editor a[href] { color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; }
      .editor a[id]:not([href]) { position: relative; top: calc(-1 * var(--header-height) - 4px); }


    /**/



/*######### [Pages] #########*/
  /*====== [Include Page] ======*/
    /*=== header ===*/
      header { position: sticky; top: 0; z-index: 99; background-color: #fff; box-shadow: 0 0px 8px #eee; }
      header .navbar { min-height: var(--header-height); }
      .header-vLine { width: 1px; height: 24px; background-color: #999; margin-inline: 16px; }
      .header_lang_dropdown {  }
      .header_lang_dropdown .dropdown-menu { min-width: 0px; padding-block: 0px; overflow: hidden; border-color: #999; }
      .navbar-collapse_fullscreen { overflow: auto; height: calc(var(--main-full-height) + var(--bs-navbar-padding-y)); background-color: #fff;  }
      .navbar-collapse { transition: none !important; }
      [aria-expanded="false"] .expanded_false,
      [aria-expanded="true"] .expanded_true { display: block; }
      [aria-expanded="false"] .expanded_true,
      [aria-expanded="true"] .expanded_false { display: none; }
      @media (max-width: 991.98px) {
        .header-vLine { display: none; }
      }

      /* navbar-nav */
      header .navbar-nav { display: inline-flex; flex-wrap: wrap; flex-direction: row; text-align: start; gap: 3rem; padding-block: 32px; }
      header .navbar-nav .nav-item { white-space: nowrap; }
      header .nav-item-title { color: var(--primary); margin-bottom: 24px; font-weight: 700; }
      @media (max-width: 991.98px) {
        header .navbar-nav { display: flex; flex-direction: column; gap: 2rem; }
        header .navbar-nav .nav-link { padding-block: .25rem; }
        header .nav-item-title { margin-bottom: 8px; }
      }



    /*=== footer ===*/
      footer { color: white; background-color: #191c19; }
      footer > .footer_top { position: relative; }
      @media (min-width: 1200px) {
        footer .footer_top { max-width: unset; }
      }

      .footer_top .fixedButtons { position: fixed; right: 15px; bottom: 15px; display: flex; flex-direction: column; z-index: 99; }
      .footer_top .toTopBtn { width: 50px; height: 50px; font-size: 28px; padding: 4px; border: 1px solid #777; }
      .footer_top .contactBtn { width: 50px; height: 50px; padding: 4px; }
      @media (max-width: 575.98px) {
        .footer_top .toTopBtn { width: 40px; height: 40px; font-size: 24px; }
        .footer_top .contactBtn { width: 40px; height: 40px; }
      }

      footer > .footer_body { padding-block: 50px; }
      footer .footer-logo { width: 177px; margin-bottom: 36px; }
      footer .list_title { font-size: var(--fs-14); line-height: 1.2; color: #909090; margin-bottom: 24px; }
      footer .list { font-size: var(--fs-14); display: flex; flex-direction: column; gap: 6px; }
      footer .list .list_item { color: #efefef; }
      footer .list a.list_item:hover { color: #ccc; }
      footer .list_item._phone { font-size: var(--fs-28); line-height: 1; white-space: nowrap; width: fit-content; }
      footer .list_item._address { color: #ccc; }
      footer .list_item._email { color: #ccc; }
      footer .list_item._icon { font-size: 30px; line-height: 0; }
      footer .list_item._copyright { font-size: var(--fs-14); color: #777; }
      @media (max-width: 575.98px) {
        footer .list_title { font-size: 12px; }
      }
      @media (min-width: 1200px) {
        footer .container { max-width: unset; padding-inline: 36px; }
      }



  /*====== [Current Page] ======*/
    /*=== index ===*/
      .index_banner { position: relative; color: white; text-align: center; background-color: #f9f9f9; background-position-y: bottom; height: var(--main-full-height); }
      .index_banner .index_banner--logo { width: clamp(400px, 35vw, 536px); }
      .index_banner .index_banner--desc { font-size: var(--fs-36); margin-top: 36px; }
      @media (max-width: 991.98px) {
        .index_banner .index_banner--logo { width: 278px; }
        .index_banner .index_banner--desc { font-size: var(--fs-22); margin-top: 24px; }
      }

      .index_main { display: flex; flex-direction: column; row-gap: 90px; }

      .index_tdBlock_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid #000; }
      .index_tdBlock { display: flex; flex-direction: column; padding: 30px; border: 1px solid black; position: relative; }
      .index_tdBlock .index_tdBlock--btnBlock { margin-top: auto; padding-top: 32px; }
      .index_tdBlock .index_tdBlock--title { font-size: var(--fs-28); font-weight: 600; color: var(--primary); margin-top: 8px; }
      .index_tdBlock .index_tdBlock--subTitle { font-size: var(--fs-24); font-weight: 700; margin-top: 4px; }
      .index_tdBlock .index_tdBlock--content { font-size: var(--fs-18); font-weight: 300; margin-top: 16px; }

      .index_tdBlock + .index_tdBlock { font-weight: 300; }
      .col-span-3 { grid-column: span 3 / span 3; }
      @media (min-width: 992px) {
        .col-span-lg-1 { grid-column: span 1 / span 1; }
      }


      .index_section_supplier { position: relative; }
      .index_section_supplier--img { --bs-aspect-ratio: calc(5 / 9 * 100%); min-height: 400px; max-height: 600px; background-position-x: 85%; }
      .index_section_supplier--text { height: 100%; max-width: 800px; padding-block: 30px; display: flex; flex-direction: column; justify-content: end; z-index: 1;  }
      .index_section_supplier--text ._title { font-size: var(--fs-36); margin-bottom: 24px; }
      .index_section_supplier--text ._desc { line-height: 1.75; min-height: 200px; }
      @media (min-width: 992px) {
        .index_section_supplier--img { max-height: min(80vw, var(--main-full-height)); }
        .index_section_supplier--text { position: absolute; bottom: 0; color: white; padding: 48px; text-shadow: 1px 1px rgba(0,0,0,0.5); }
      }

      /* 基本上與 index_section_supplier 相似 */
      .index_section_carousel { position: relative; }
      .index_section_carousel--img { --bs-aspect-ratio: calc(5 / 9 * 100%); min-height: 400px; max-height: 600px; }
      .index_section_carousel--text { height: 100%; max-width: 800px; padding-block: 30px; display: flex; flex-direction: column; justify-content: end; z-index: 1;  }
      .index_section_carousel--text ._title { font-size: var(--fs-36); margin-bottom: 24px; }
      .index_section_carousel--text ._desc { line-height: 1.5; min-height: 150px; font-size: var(--fs-18); font-weight: 300; }
      @media (max-width: 991.98px) {
        .index_section_carousel--text { color: var(--bs-body-color) !important; }
      }
      @media (min-width: 992px) {
        .index_section_carousel--img { max-height: min(80vw, var(--main-full-height)); }
        .index_section_carousel--text { position: absolute; bottom: 0; color: white; padding: 48px; text-shadow: 1px 1px rgba(0,0,0,0.5); }
      }


      .index_section_video { position: relative; background: var(--primary); padding: 60px 12px; }
      .index_section_video .swiper-slide iframe { display: block; width: 100%; height: auto; aspect-ratio: 3/2; }
      .index_section_video .swiper-button-prev,
      .index_section_video .swiper-button-next { position: static; margin: 0; --swiper-navigation-size: 28px; --swiper-theme-color: white; }
      @media (min-width: 992px) {
        .index_section_video { padding: 60px 48px; }
      }

      .index_section_about { }
      .index_section_about--img { --bs-aspect-ratio: calc(492 / 355 * 100%); min-height: 400px; max-height: min(100vw, 800px); background-position: 40% 25%; position: relative; z-index: -1; }
      .index_section_about--textBlock { --textBlock-text: black; display: flex; align-items: center; font-size: var(--fs-18); background-color: #F3F3F3; color: black; transition: .5s color, .5s background-color; }
      .index_section_about--textBlock:hover { --textBlock-text: white; background-color: var(--primary); color: white; }
      .index_section_about--textBlock ._link { font-size: 36px; font-weight: 500; transition: .5s color; }
      .index_section_about--textBlock:hover ._link { color: white; }
      @media (min-width: 768px) {
        .index_section_about--img { max-height: min(80vw, var(--main-full-height)); }
        .index_section_about { max-height: var(--main-full-height); }
      }

      .index_extension { width: 100%; aspect-ratio: 16/9; max-height: 860px; font-size: var(--fs-28); color: white; }

      .index_btn_primary {
        --default-bg: var(--primary);
        --default-color: black;
        --hover-bg: var(--dark);
        --hover-color: white
      }
      /* 前 index_btn_primary */
      .index_solution_btn { background-color: #66C8CD; border-color: #66C8CD; color: black; }
      .index_solution_btn:hover { background-color: var(--primary); border-color: var(--primary); color: black; }

      .index_btn_more{
        --hover-bg: var(--primary);
        --hover-color: white
      }


    /*=== history ===*/
      .history_timelineList { position: sticky; top: calc(var(--header-height) + 12px); display: flex; flex-direction: column; gap: 16px; border-left: 1px solid #D0D0D0; width: min(calc(180px + 1vw), 200px); max-height: calc(100vh - var(--header-height)); overflow-y: auto; }
      .history_timelineList > ._item { display: flex; align-items: center; height: 50px; font-size: var(--fs-22); font-weight: 300; padding-inline: 24px; color: #909090; transition: 0.25s all; }
      .history_timelineList > ._item.active { position: relative; color: var(--primary); font-size: var(--fs-32); font-weight: 500; }
      .history_timelineList > ._item.active::after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 24px; width: 2px; background: var(--primary); }
      .history_timelineContent { display: flex; flex-direction: column; gap: 50px; }
      .history_timelineContent > ._cont { position: relative; }
      .history_timelineContent > ._cont > ._pin { position: absolute; width: 100%; height: auto; bottom: 0; top: calc(-1 * ( 2px + var(--header-height)) ); z-index: -999; }
      @media (max-width: 767.98px) {
        .history_timelineList { width: calc(60px + 5vw); gap: 0px; }
        .history_timelineList > ._item { font-size: var(--fs-18); padding-inline: 12px; }
        .history_timelineList > ._item.active { font-size: var(--fs-22); }
      }


    /*=== managementTeam ===*/
      .managementTeam_tabList { --bs-link-color: var(--primary); --bs-nav-link-hover-color: var(--primary-hover); --bs-nav-pills-link-active-color: var(--primary); --bs-nav-pills-link-active-bg: white;
        display: flex; flex-wrap: nowrap; margin-inline: auto; gap: 12px; padding: 6px; background: #F1F1F1; border-radius: 12px; width: fit-content; }
      .managementTeam_tabList .nav-item { width: 110px; display: flex; align-items: center; }
      .managementTeam_tabList .nav-link { padding: 4px; font-weight: 400; font-size: var(--fs-20); width: 100%; line-height: 1.1; min-height: 40px; }
      .managementTeam_tabList .nav-link.active,
      .managementTeam_tabList .show > .nav-link { font-weight: 700; }
      @media (max-width: 575.98px) {
        .managementTeam_tabList { gap: 6px; }
        .managementTeam_tabList .nav-item { width: 100px; }
        .managementTeam_tabList .nav-link { font-size: var(--fs-18); min-height: 36px; }
      }

      .managementTeam_card_container { display: flex; flex-direction: column; gap: 30px; }
      .managementTeam_card { display: flex; gap: 24px; }
      .managementTeam_card > ._img { flex-shrink: 0; width: 300px; aspect-ratio: 3/2; background: #d9d9d9 center / cover no-repeat; }
      .managementTeam_card > ._txt { display: flex; flex-direction: column; gap: 8px; }
      @media (max-width: 767.98px) {
        .managementTeam_card_container { gap: 50px; }
        .managementTeam_card { flex-direction: column; gap: 10px; }
        .managementTeam_card > ._img { width: 100%; }
      }


    /*=== product ===*/
      .product_imgList_img { width: 380px; aspect-ratio: 1/1; object-fit: contain; }
      .product_imgList_btn { width: 100%; max-width: 360px; font-size: var(--fs-24); padding-block: 8px; min-height: var(--comp-height-lg); }
      .product_topic { padding-top: 60px; }
      .product_topic .product_topic--title { font-size: var(--fs-28); font-weight: 300; }
      .product_topic .product_topic--series { font-size: var(--fs-32); font-weight: 600; margin-top: 40px; color: var(--primary); }
      .product_topic .product_topic--desc { font-size: var(--fs-32); font-weight: 400; margin-top: 16px; }
      @media (max-width: 991.98px) {
        .product_imgList_img { width: 360px; }
        .product_imgList_btn { max-width: 300px; font-size: var(--fs-20); }
        .product_topic { padding-top: 48px; }
        .product_topic .product_topic--title { font-size: var(--fs-24) }
        .product_topic .product_topic--series { font-size: var(--fs-28); margin-top: 24px; }
        .product_topic .product_topic--desc { font-size: var(--fs-28); margin-top: 8px; }
      }

      .product_topicSwiper_container { position: relative; padding-block: 40px 100px; padding-inline: 48px; user-select: none; }
      .product_topicSwiper_container .swiper-button-prev,
      .product_topicSwiper_container .swiper-button-next { --swiper-navigation-sides-offset: -8px; color: white; width: 50px; height: 50px; border-radius: 100vmax; border-color: var(--primary); }
      .product_topicSwiper_container .swiper-button-prev:after,
      .product_topicSwiper_container .swiper-button-next:after { --swiper-navigation-size: 32px; }
      .product_topicSwiper_container .swiper-button-disabled { display: none !important; }
      .product_topicSwiper_container .product_topicSwiper:not(.swiper-horizontal) ~ .swiper-button-prev,
      .product_topicSwiper_container .product_topicSwiper:not(.swiper-horizontal) ~ .swiper-button-next { opacity: 0; }
      @media (max-width: 575.98px) {
        .product_topicSwiper_container { padding-block: 40px 60px; padding-inline: 0; }
        .product_topicSwiper_container .swiper-wrapper { flex-direction: column; gap: 50px; }
      }


      .product_specForm ._title { padding-right: 36px; width: 0px; white-space: nowrap; }
      @media (max-width: 575.98px) {
        .product_specForm ._title { padding-right: 24px; }
      }

      .product_card { border-radius: 16px; }
      .product_card ._card_pin { position: absolute; top: calc(-1 * var(--header-height) - 8px); pointer-events: none; width: 100%; height: 1px; }
      .product_card ._card_head { position: relative; z-index: 2; }
      .product_card ._card_title { width: 100%; font-size: var(--fs-24); justify-content: start; padding: 12px 24px; border-radius: 16px !important; box-shadow: none !important; }
      .product_card ._card_title::after { content: '\f077'; color: white; font-size: var(--fs-20); font-family: var(--ff-fontawesome); font-weight: bold; display: block; margin-left: auto; transition: 0.25s transform; }
      .product_card ._card_title.collapsed::after { transform: rotate(180deg); }
      .product_card ._card_body { transform: translateY(-20px); background-color: #fff; border-radius: 0 0 16px 16px; font-weight: 500; }
      .product_card ._card_body > .accordion-body { padding: calc(36px + 20px) 36px 36px 36px; }
      .product_card ._spec_imgs { display: flex; justify-content: center; gap: 16px; max-width: 800px; margin-inline: auto; }
      .product_card ._spec_img_main { width: 100%; max-height: 375px; max-width: 620px; }
      .product_card ._spec_img_subs { width: 100%; max-height: 375px; max-width: 160px; display: flex; flex-direction: column; gap: 8px; overflow: auto; scroll-snap-type: y mandatory; }
      .product_card ._spec_img_subs > * { border: 2px solid #eee; scroll-snap-align: start; }
      .product_card ._spec_img_subs > *.active { border: 2px solid var(--primary); }
      .product_card ._spec_img_subs::-webkit-scrollbar { width: 8px; height: 8px; display: none; }
      .product_card ._spec_img_subs:hover::-webkit-scrollbar { display: block; }
      .product_card ._spec_img_subs::-webkit-scrollbar-track { background: #f1f1f1; }
      .product_card ._spec_img_subs::-webkit-scrollbar-thumb { background: #888; border-radius: 100vmax; }
      .product_card ._spec_img_subs::-webkit-scrollbar-thumb:hover { background: #555; }

      .product_card ._spec_title { font-size: var(--fs-20); color: var(--primary); margin-bottom: 24px; }
      .product_solutionIcon { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; border: 1px solid var(--primary-light); border-radius: 100vmax; margin-inline: auto; }
      @media (max-width: 991.98px) {
        .product_card ._spec_imgs { flex-direction: column; }
        .product_card ._spec_img_main { width: 100%; max-width: unset; }
        .product_card ._spec_img_subs { width: 100%; max-width: unset; gap: 0; flex-direction: row; scroll-snap-type: x mandatory; }
        .product_card ._spec_img_subs > * { flex-shrink: 0; width: 32%; }
        .product_card ._spec_img_subs > * + * { margin-left: calc(1.33% * 3 / 2); }
      }

      .product_transBg { --textBlock-text: black; color: black; background-color: #fff; padding-block: 1rem; font-size: var(--fs-18); transition: .5s color, .5s background-color; }
      .product_transBg:hover { --textBlock-text: white; color: white; background-color: var(--primary); }
      .product_transBg ._link { font-size: 32px; font-weight: 500; transition: .5s color; }
      .product_transBg:hover ._link { color: white; }
      @media (min-width: 1200px) {
        .product_transBg { padding-block: 3rem; }
        .product_transBg--container { max-width: 1160px; }
      }

      .product_newsSection { color: white; background-color: #5090a4; padding-block: 60px 100px; }
      .product_newsSection .section_title { margin-bottom: 48px; }

      .product_downloadSection { padding-block: 100px; }
      .product_downloadSection ._content { font-size: var(--fs-20); font-weight: 300; }
      .product_downloadSection ._content a { text-decoration: underline; }
      @media (max-width: 575.98px) {
        .product_card ._card_body > .accordion-body { padding: calc(12px + 20px) 12px 12px 12px; }
      }


    /*=== charging ===*/
      .charging_summary > *:not(:last-child) { border-right: 1px solid #909090; }
      @media (min-width: 1200px) {
        .charging_summary.gx-xl-6 { --bs-gutter-x: 5rem; }
      }
      .charging_summary--title { color: var(--primary); font-size: var(--fs-22); font-weight: 600; }
      .charging_summary--desc { margin-top: 16px; font-size: var(--fs-18); }
      @media (max-width: 991.98px) {
        .charging_summary > *:not(:last-child) { border-right: 0; }
      }

      .charging_needs { max-width: 420px; color: var(--primary); font-size: var(--fs-18); font-weight: 400; padding-bottom: 16px; }
      .charging_knows { max-width: 420px; color: var(--primary); font-size: var(--fs-18); font-weight: 400; padding-bottom: 16px; }
      .charging_contactSection { padding-block: 100px; }
      .charging_contactSection ._container { max-width: 800px; font-size: var(--fs-22); }
      @media (max-width: 991.98px) {
        .charging_needs { max-width: unset; }
        .charging_knows { max-width: unset; }
        .charging_contactSection { padding-block: 36px 100px; }
      }


    /*=== extension ===*/
      .section_gaps { display: flex; flex-direction: column; gap: 80px; }

      .exFrame_text { text-align: center; }
      .exFrame_text .exFrame_text--title { color: var(--primary); font-size: var(--fs-22); font-weight: 600; }
      .exFrame_text .exFrame_text--desc { margin-top: 16px; font-size: var(--fs-18); }

      .exFrame_media { text-align: center; }
      .exFrame_media > iframe,
      .exFrame_media > video { object-fit: contain; aspect-ratio: 16/9; max-width: 100%; height: auto; margin-inline: auto; }
      .exFrame_media > img { object-fit: cover; aspect-ratio: 16/9; max-width: 100%; height: auto; margin-inline: auto; }
      .exFrame_media > iframe:not([width]),
      .exFrame_media > video:not([width]),
      .exFrame_media > img:not([width]) { width: 100%; }

      .exFrame_halfImageText { --ch-width: 50%; display: flex; }
      .exFrame_halfImageText > .exFrame_halfImageText--img { width: var(--ch-width); flex-shrink: 0; }
      .exFrame_halfImageText > .exFrame_halfImageText--img > img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
      .exFrame_halfImageText > .exFrame_halfImageText--text { width: var(--ch-width); min-height: 240px; padding: 1rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
      .exFrame_halfImageText._textImg > .exFrame_halfImageText--text,
      .exFrame_halfImageText:nth-child(even) > .exFrame_halfImageText--text { order: -1; }
      .exFrame_halfImageText .exFrame_halfImageText--title { color: var(--primary); font-size: var(--fs-22); font-weight: 600; }
      .exFrame_halfImageText .exFrame_halfImageText--desc { margin-top: 16px; font-size: var(--fs-18); }
      @media (max-width: 991.98px) {
        .exFrame_halfImageText { --ch-width: 100%; flex-direction: column; }
        .exFrame_halfImageText:nth-child(n) > .exFrame_halfImageText--text { order: 2; padding-inline: 0; }
      }

      .exFrame_imageSwiperAutoView .swiper-slide { height: 500px; width: auto; }
      @media (max-width: 575.98px) {
        .exFrame_imageSwiperAutoView .swiper-slide { height: 380px; }
      }



    /*=== news & news-detail ===*/
      .news_detail_title { font-size: var(--fs-22); font-weight: 600; }
      .news_detail_editor { display: flex; flex-direction: column; row-gap: 3rem; }
      .news_detail_endHR { border-bottom: 1px solid #909090; margin-block: 3rem; }

      .news_detail_pagination { display: flex; justify-content: space-between; }
      .news_detail_pagination .page_item { position: relative; width: 100%; height: 100%; display: flex; align-items: center; gap: 20px; padding-block: 32px; max-width: 500px; }
      .news_detail_pagination .page_item:hover { opacity: 0.8; }
      .news_detail_pagination .page_item::after { content: ''; position: absolute; bottom: 0; height: 1px; width: 100%; background: #000; }
      .news_detail_pagination .page_item.page_prev { justify-content: start; text-align: left; padding-right: var(--padding-gap); margin-right: auto; }
      .news_detail_pagination .page_item.page_next { justify-content: end; text-align: right; padding-left: var(--padding-gap); margin-left: auto; }

      .news_detail_pagination .page_item.page_prev ._arrow { rotate: 180deg; }
      .news_detail_pagination .page_item.page_next ._arrow { order: 2; }
      .news_detail_pagination .page_item ._text { align-self: start; }
      .news_detail_pagination .page_item ._text > ._func { font-weight: 600; margin-bottom: 8px; }
      .news_detail_pagination .page_item ._text > ._title { font-size: var(--fs-22); font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

      @media (max-width: 991.98px) {
        .news_detail_pagination { flex-direction: column; gap: 20px; }
        .news_detail_pagination .page_item { flex-direction: column; gap: 16px; padding-block: 20px; max-width: 450px; }
        .news_detail_pagination .page_item.page_prev { align-self: start; align-items: start; text-align: left; }
        .news_detail_pagination .page_item.page_next { align-self: end; align-items: end; text-align: right; }
        .news_detail_pagination .page_item ._text { align-self: unset; order: -1; }
        .news_detail_pagination .page_item ._text > ._title { font-size: var(--fs-20); }
      }


    /*=== download ===*/
      .download_list { display: flex; flex-direction: column; row-gap: 20px; }
      .download_list .download_item { display: flex; align-items: center; justify-content: space-between; column-gap: 20px; padding-block: 10px; padding-inline: 6px; border-bottom: 1px solid #e1e1e1; }
      .download_item .download_item--title { font-size: var(--fs-18); }
      .download_item .download_item--btn { flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; width: 40px; height: 40px; border-radius: 100vmax; border: 1px solid var(--primary); }
      .download_item .download_item--btn::after { content: ''; flex-shrink: 0; width: 60%; height: 60%; -webkit-mask: url('../img/icon/download.svg') center / contain no-repeat; mask: url('../img/icon/download.svg') center / contain no-repeat; background: var(--default-color); transition: .15s background; }
      /* .download_item .download_item--btn:hover::after { background: var(--hover-color); } */
      .download_item:hover { background: #F3F3F3; color: #444; }
      .download_item:hover .download_item--btn { background-color: var(--hover-bg); }
      .download_item:hover .download_item--btn::after { background-color: var(--hover-color); }


    /*=== FAQs ===*/
      .faq_list { display: flex; flex-direction: column; row-gap: 50px; }
      .faq_list > .faq_item { display: flex; flex-direction: column; row-gap: 24px; }
      .faq_list > .faq_item > .faq_item_row { display: flex; column-gap: 12px; }

      [class*=faq_item--icon] { flex-shrink: 0; width: 40px; height: 40px; border-radius: 100vmax; border: 1px solid var(--primary); background: var(--primary); color: white; font-size: 20px; display: flex; align-items: center; justify-content: center; }
      .faq_item--icon_Q { background: var(--primary); color: white; }
      .faq_item--icon_A { background: white; color: var(--primary); }

      .faq_item--text_Q { display: flex; align-items: center; min-height: 40px; font-size: 20px; }
      .faq_item--text_A { display: flex; align-items: center; min-height: 40px; }


    /*=== policies/ ===*/



/*###### [Note] ######*/
  /* Mobile() -> PC */
    @media (width >= 576px){} /* sm */
    @media (width >= 768px){} /* md */
    @media (width >= 992px){} /* lg */
    @media (width >= 1200px){} /* xl */
    @media (width >= 1400px){} /* xxl */

  /* PC(xxl) -> Mobile */
    @media (width < 1400px){} /* xl */
    @media (width < 1200px){} /* lg */
    @media (width < 992px){} /* md */
    @media (width < 768px){} /* sm */
    @media (width < 576px){} /*  */