@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');
* { margin:0; padding: 0; font-family:Arial, "Noto Sans TC", sans-serif; box-sizing: border-box; color: #333; }

:root{
    --color-primary:#86c636;
    --color-secondary:#3fa8bb;
    --color-tertiary:#284966;
    --color-accent:#FFC500;
    --color-gray-222:#222;
    --color-gray-333:#333;
    --color-gray-777:#777;
    --color-gray-aaa:#aaa;
    --color-gray-ccc:#ccc;
    --color-gray-eee:#eee;
    --color-blue-1:#3B6ECE;
    --color-blue-2:#4D6BDA;
    --color-green-1:#00B900;
    --color-green-2:#03E78B;
    --color-red-1:#f00;
}

.wrapper{ overflow-x: hidden; }

.container{ max-width:1328px; margin: auto; padding: 0 24px; }
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }
.relative{ position: relative; }
.absolute{ position: absolute; }
.hidden_x{ overflow-x: hidden; }
.z1{ z-index: 10; }
.z2{ z-index: 20; }
.z3{ z-index: 30; }
.z4{ z-index: 40; }
.z5{ z-index: 50; }
h1{ font-size: 3rem; }
h2{ font-size: 2.25rem; }
h3{ font-size: 1.75rem; }
h4{ font-size: 1.5rem; }
p{ font-size: 1rem; line-height: 1.6; }
a{  text-decoration: none; }
img{ max-width: 100%; }

.mt-10{ margin-top: 10px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.mt-50{ margin-top: 50px; }
.mt-60{ margin-top: 60px; }
.mt-70{ margin-top: 70px; }
.mt-80{ margin-top: 80px; }
.mt-90{ margin-top: 90px; }
.mt-100{ margin-top: 100px; }
.mb-10{ margin-bottom: 10px; }
.mb-20{ margin-bottom: 20px; }
.mb-30{ margin-bottom: 30px; }
.mb-40{ margin-bottom: 40px; }
.mb-50{ margin-bottom: 50px; }
.mb-60{ margin-bottom: 60px; }
.mb-70{ margin-bottom: 70px; }
.mb-80{ margin-bottom: 80px; }
.mb-90{ margin-bottom: 90px; }
.mb-100{ margin-bottom: 100px; }
.ml-10{ margin-left: 10px; }
.ml-20{ margin-left: 20px; }
.ml-30{ margin-left: 30px; }
.ml-40{ margin-left: 40px; }
.ml-50{ margin-left: 50px; }
.ml-60{ margin-left: 60px; }
.ml-70{ margin-left: 70px; }
.ml-80{ margin-left: 80px; }
.ml-90{ margin-left: 90px; }
.ml-100{ margin-left: 100px; }
.mr-10{ margin-right: 10px; }
.mr-20{ margin-right: 20px; }
.mr-30{ margin-right: 30px; }
.mr-40{ margin-right: 40px; }
.mr-50{ margin-right: 50px; }
.mr-60{ margin-right: 60px; }
.mr-70{ margin-right: 70px; }
.mr-80{ margin-right: 80px; }
.mr-90{ margin-right: 90px; }
.mr-100{ margin-right: 100px; }

.pt-10{ padding-top: 10px; }
.pt-20{ padding-top: 20px; }
.pt-30{ padding-top: 30px; }
.pt-40{ padding-top: 40px; }
.pt-50{ padding-top: 50px; }
.pt-60{ padding-top: 60px; }
.pt-70{ padding-top: 70px; }
.pt-80{ padding-top: 80px; }
.pt-90{ padding-top: 90px; }
.pt-100{padding-top: 100px; }
.pb-10{ padding-bottom: 10px; }
.pb-20{ padding-bottom: 20px; }
.pb-30{ padding-bottom: 30px; }
.pb-40{ padding-bottom: 40px; }
.pb-50{ padding-bottom: 50px; }
.pb-60{ padding-bottom: 60px; }
.pb-70{ padding-bottom: 70px; }
.pb-80{ padding-bottom: 80px; }
.pb-90{ padding-bottom: 90px; }
.pb-100{padding-bottom: 100px; }
.pl-10{ padding-left: 10px; }
.pl-20{ padding-left: 20px; }
.pl-30{ padding-left: 30px; }
.pl-40{ padding-left: 40px; }
.pl-50{ padding-left: 50px; }
.pl-60{ padding-left: 60px; }
.pl-70{ padding-left: 70px; }
.pl-80{ padding-left: 80px; }
.pl-90{ padding-left: 90px; }
.pl-100{padding-left: 100px; }
.pr-10{ padding-right: 10px; }
.pr-20{ padding-right: 20px; }
.pr-30{ padding-right: 30px; }
.pr-40{ padding-right: 40px; }
.pr-50{ padding-right: 50px; }
.pr-60{ padding-right: 60px; }
.pr-70{ padding-right: 70px; }
.pr-80{ padding-right: 80px; }
.pr-90{ padding-right: 90px; }
.pr-100{padding-right: 100px; }

/** header **/
.mobileMenu{ display: none; }

header{ position: fixed; top: 0; left: 0; height: 113px; width: 100%; background-color: #fff; box-shadow: 0 5px 10px rgba(0,0,0,0.1); }
header .container{ max-width: none; }
header ul{ display: flex; justify-content: flex-end; gap:40px; list-style: none; }
header ul li{ position: relative; }
header ul li .grid{ display: block; line-height: 113px; color: #333; font-size: 1.5rem; }
header ul li .grid:hover{ color: var(--color-primary); }
header ul li .dropdownMenu{ font-size: 1.3rem;display: none; position: absolute; top: 113px; left:50%; transform: translateX(-50%); flex-direction: column; }
header ul li:hover .dropdownMenu{ display: block; }
header ul li .dropdownMenu a{ display: block; color: #000; white-space:nowrap; background-color: #fff; padding: 10px 12px; min-width: 160px; text-align: center; }
header ul li .dropdownMenu a:hover{ background-color: var(--color-secondary); color: #fff; }
header .menuBtn{ display: none; }
/* header .logo{ width: 300px; height: 62px; position: absolute; top: 0px; bottom: 0px; left: 20px; margin: auto; background-image: url(../images/layout/logo.png); background-repeat: no-repeat; background-position: center; background-size: cover; } */
header .logo{ width: 420px; height: 75px; position: absolute; top: 0px; bottom: 0px; left: 20px; margin: auto; background-image: url(../images/layout/logo.png); background-repeat: no-repeat; background-position: center; background-size: cover; }

/** footer **/
footer{ padding: 0 20px; position: relative; background: linear-gradient(to right, var(--color-primary) 0%, var(--color-secondary) 100%); height: 130px; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 1rem; }

/** web top **/
.goToWebTop{ position: fixed; right: 10px; bottom: 10px; background-color: #fff; display: flex; width: 50px; height: 50px; border-radius: 50%; justify-content: center; align-items: center; }
.goToWebTop i{ color: #000; }

/** 浮動按鈕 **/
.floatBtnBox{ position: fixed; z-index: 20; right: 10px; top: 50%; transform: translateY(-50%); display: flex; gap:10px; flex-direction: column; }
.floatBtnBox .btns{ display: flex; z-index: 10; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%;line-height: 50px; background-color: var(--color-secondary); }
.floatBtnBox .btns.line{ background-color: #00B900; display: none; }
.floatBtnBox .btns.line img{ width: 60%; }
.floatBtnBox .btns.contact i{ color: #fff; font-size: 1.375rem; }

/** 動畫 **/
.animation_box {
  opacity: 0;
  transform: translate(0, 0); /* 先不移動 */
  transition: all 0.5s ease-out;
}
/* 設定根據不同方向的進場效果 */
.animation_box[data-direction="left"] {
  transform: translateX(-10%); /* 預設從左邊滑入 */
}

.animation_box[data-direction="right"] {
  transform: translateX(10%); /* 預設從右邊滑入 */
}

.animation_box[data-direction="top"] {
  transform: translateY(-10%); /* 預設從上面滑入 */
}

.animation_box[data-direction="bottom"] {
  transform: translateY(10%); /* 預設從下面滑入 */
}
/* 加上 active 後，會變得可見並移動回原位 */
.animation_box.active {
  opacity: 1;
  transform: translate(0, 0);
}



/***************************平板***************************/
@media screen and (width < 1200px) {
    h1{ font-size: 2.25rem; }
    h2{ font-size: 1.75rem; }
    h3{ font-size: 1.5rem; }
    h4{ font-size: 1.375rem; }

    .text-pad-center{ text-align: center; }
    .text-pad-left{ text-align: left; }
    .text-pad-right{ text-align: right; }

    .mt-pad-10{ margin-top: 10px; }
    .mt-pad-20{ margin-top: 20px; }
    .mt-pad-30{ margin-top: 30px; }
    .mt-pad-40{ margin-top: 40px; }
    .mt-pad-50{ margin-top: 50px; }
    .mt-pad-60{ margin-top: 60px; }
    .mt-pad-70{ margin-top: 70px; }
    .mt-pad-80{ margin-top: 80px; }
    .mt-pad-90{ margin-top: 90px; }
    .mt-pad-100{ margin-top: 100px; }
    .mb-pad-10{ margin-bottom: 10px; }
    .mb-pad-20{ margin-bottom: 20px; }
    .mb-pad-30{ margin-bottom: 30px; }
    .mb-pad-40{ margin-bottom: 40px; }
    .mb-pad-50{ margin-bottom: 50px; }
    .mb-pad-60{ margin-bottom: 60px; }
    .mb-pad-70{ margin-bottom: 70px; }
    .mb-pad-80{ margin-bottom: 80px; }
    .mb-pad-90{ margin-bottom: 90px; }
    .mb-pad-100{ margin-bottom: 100px; }
    .ml-pad-10{ margin-left: 10px; }
    .ml-pad-20{ margin-left: 20px; }
    .ml-pad-30{ margin-left: 30px; }
    .ml-pad-40{ margin-left: 40px; }
    .ml-pad-50{ margin-left: 50px; }
    .ml-pad-60{ margin-left: 60px; }
    .ml-pad-70{ margin-left: 70px; }
    .ml-pad-80{ margin-left: 80px; }
    .ml-pad-90{ margin-left: 90px; }
    .ml-pad-100{ margin-left: 100px; }
    .mr-pad-10{ margin-right: 10px; }
    .mr-pad-20{ margin-right: 20px; }
    .mr-pad-30{ margin-right: 30px; }
    .mr-pad-40{ margin-right: 40px; }
    .mr-pad-50{ margin-right: 50px; }
    .mr-pad-60{ margin-right: 60px; }
    .mr-pad-70{ margin-right: 70px; }
    .mr-pad-80{ margin-right: 80px; }
    .mr-pad-90{ margin-right: 90px; }
    .mr-pad-100{ margin-right: 100px; }

    .pt-pad-10{ padding-top: 10px; }
    .pt-pad-20{ padding-top: 20px; }
    .pt-pad-30{ padding-top: 30px; }
    .pt-pad-40{ padding-top: 40px; }
    .pt-pad-50{ padding-top: 50px; }
    .pt-pad-60{ padding-top: 60px; }
    .pt-pad-70{ padding-top: 70px; }
    .pt-pad-80{ padding-top: 80px; }
    .pt-pad-90{ padding-top: 90px; }
    .pt-pad-100{padding-top: 100px; }
    .pb-pad-10{ padding-bottom: 10px; }
    .pb-pad-20{ padding-bottom: 20px; }
    .pb-pad-30{ padding-bottom: 30px; }
    .pb-pad-40{ padding-bottom: 40px; }
    .pb-pad-50{ padding-bottom: 50px; }
    .pb-pad-60{ padding-bottom: 60px; }
    .pb-pad-70{ padding-bottom: 70px; }
    .pb-pad-80{ padding-bottom: 80px; }
    .pb-pad-90{ padding-bottom: 90px; }
    .pb-pad-100{padding-bottom: 100px; }
    .pl-pad-10{ padding-left: 10px; }
    .pl-pad-20{ padding-left: 20px; }
    .pl-pad-30{ padding-left: 30px; }
    .pl-pad-40{ padding-left: 40px; }
    .pl-pad-50{ padding-left: 50px; }
    .pl-pad-60{ padding-left: 60px; }
    .pl-pad-70{ padding-left: 70px; }
    .pl-pad-80{ padding-left: 80px; }
    .pl-pad-90{ padding-left: 90px; }
    .pl-pad-100{padding-left: 100px; }
    .pr-pad-10{ padding-right: 10px; }
    .pr-pad-20{ padding-right: 20px; }
    .pr-pad-30{ padding-right: 30px; }
    .pr-pad-40{ padding-right: 40px; }
    .pr-pad-50{ padding-right: 50px; }
    .pr-pad-60{ padding-right: 60px; }
    .pr-pad-70{ padding-right: 70px; }
    .pr-pad-80{ padding-right: 80px; }
    .pr-pad-90{ padding-right: 90px; }
    .pr-pad-100{padding-right: 100px; }

    .wrapper{ overflow-x: hidden; }

    /** header **/
    .mobileMenu{ display: block; animation: close_menu 5s forwards; position: fixed; width: 80%; max-width: 440px; height: 100dvh; background-color: var(--color-gray-333); }
    .openMenu .mobileMenu{ animation: open_menu 1s forwards; }
    @keyframes open_menu{
      0%{ opacity: 0; }
      10%{ opacity: 1; }
      100%{ opacity: 1; }
    }
    @keyframes close_menu{
      50%{ opacity: 1; }
      60%{ opacity: 0; }
      100%{ opacity: 0; }
    }
    .mobileMenu .titleFlex{ display: flex; height: 44px; border-bottom: 1px solid var(--color-gray-222); }
    .mobileMenu .titleFlex .backMainMenu{ width: 50px;  }
    .mobileMenu .titleFlex .backMainMenu .backMainMenuBtn{ display: none; width: 100%; height: 44px; color: var(--color-gray-777); font-size: 0; justify-content: center; align-items: center; }
    .mobileMenu .titleFlex .backMainMenu .backMainMenuBtn.open{ display: flex; }
    .mobileMenu .titleFlex .backMainMenu .backMainMenuBtn i{ font-size: 1rem; color: inherit;}
    .mobileMenu .titleFlex h2{ font-size: 1rem; color: var(--color-gray-777); flex: 1; text-align: center; line-height: 44px; }
    .mobileMenu .titleFlex .closeBtn{ width: 50px; height: 44px; display: flex; color: var(--color-gray-777); font-size: 0; justify-content: center; align-items: center; }
    .mobileMenu .titleFlex .closeBtn i{ font-size: 1rem; color: inherit;}
    .mobileMenu ul li{ display: flex; border-bottom: 1px solid var(--color-gray-222); }
    .mobileMenu ul li .grid{ display: block; padding: 12px 20px; flex:1; color: #fff; }
    .mobileMenu ul li a{ font-size: 1rem; }
    .mobileMenu ul li .arrow{ width: 50px; height: 44px; display: flex; justify-content: center; align-items: center; font-size: 0; color: var(--color-gray-777); border-left: 1px solid var(--color-gray-222); }
    .mobileMenu ul li .arrow i{ font-size: 1rem; color: inherit; }
    
    .mobileMenu .menuList{ width: 100%; overflow: hidden; position: relative; }

    .mobileMenu .menuListMain{ transition: transform 0.5s; transform: translateX(0); }
    .mobileMenu .menuListMain.close{ transform: translateX(-100%); }
    .menuList1,.menuList2,.menuList3,.menuList4,.menuList5{ transform: translateX(100%); transition: transform 0.5s; position: absolute; top: 0; width: 100%; }
    .menuList1.open,.menuList2.open,.menuList3.open,.menuList4.open,.menuList5.open{ transform: translateX(0%); }

    .webContent{ position: relative; background-color: #fff; width: 100%; transition:transform 0.5s; transform:none; min-height: 100dvh; }
    .webContentMask{ opacity: 0; visibility: hidden; transition:opacity 0.5s; }
    .wrapper.openMenu .webContent{ transform:translateX(440px) }
    .wrapper.openMenu .webContentMask{ visibility:visible; opacity: 1; position: absolute; inset: 0; margin: auto; background-color: rgba(0,0,0,0.4); z-index: 50; }

    header{ position: sticky; display: flex; align-items: center; }
    header .container{ width: 100%; display: flex; align-items: center; justify-content: space-between; }
    header .menuBtn{ width: 30px; display: block; }
    header .menuBtn span{ display: block; height: 2px; background-color: var(--color-primary); margin: 5px 0; border-radius: 4px;  }
    header .pcMenu{ display: none; }
    header .logo{ position: static; margin: 0; }

 
}


/***************************平板***************************/
@media screen and (width < 1024px) {
    /** header **/
    
}

/***************************手機***************************/
@media screen and (width < 768px) {
    h1{ font-size: 1.75rem; }
    h2{ font-size: 1.5rem; }
    h3{ font-size: 1.375rem; }
    h4{ font-size: 1.25rem; }

    .text-sp-center{ text-align: center; }
    .text-sp-left{ text-align: left; }
    .text-sp-right{ text-align: right; }

    .mt-sp-10{ margin-top: 10px; }
    .mt-sp-20{ margin-top: 20px; }
    .mt-sp-30{ margin-top: 30px; }
    .mt-sp-40{ margin-top: 40px; }
    .mt-sp-50{ margin-top: 50px; }
    .mt-sp-60{ margin-top: 60px; }
    .mt-sp-70{ margin-top: 70px; }
    .mt-sp-80{ margin-top: 80px; }
    .mt-sp-90{ margin-top: 90px; }
    .mt-sp-100{ margin-top: 100px; }
    .mb-sp-10{ margin-bottom: 10px; }
    .mb-sp-20{ margin-bottom: 20px; }
    .mb-sp-30{ margin-bottom: 30px; }
    .mb-sp-40{ margin-bottom: 40px; }
    .mb-sp-50{ margin-bottom: 50px; }
    .mb-sp-60{ margin-bottom: 60px; }
    .mb-sp-70{ margin-bottom: 70px; }
    .mb-sp-80{ margin-bottom: 80px; }
    .mb-sp-90{ margin-bottom: 90px; }
    .mb-sp-100{ margin-bottom: 100px; }
    .ml-sp-10{ margin-left: 10px; }
    .ml-sp-20{ margin-left: 20px; }
    .ml-sp-30{ margin-left: 30px; }
    .ml-sp-40{ margin-left: 40px; }
    .ml-sp-50{ margin-left: 50px; }
    .ml-sp-60{ margin-left: 60px; }
    .ml-sp-70{ margin-left: 70px; }
    .ml-sp-80{ margin-left: 80px; }
    .ml-sp-90{ margin-left: 90px; }
    .ml-sp-100{ margin-left: 100px; }
    .mr-sp-10{ margin-right: 10px; }
    .mr-sp-20{ margin-right: 20px; }
    .mr-sp-30{ margin-right: 30px; }
    .mr-sp-40{ margin-right: 40px; }
    .mr-sp-50{ margin-right: 50px; }
    .mr-sp-60{ margin-right: 60px; }
    .mr-sp-70{ margin-right: 70px; }
    .mr-sp-80{ margin-right: 80px; }
    .mr-sp-90{ margin-right: 90px; }
    .mr-sp-100{ margin-right: 100px; }

    .pt-sp-10{ padding-top: 10px; }
    .pt-sp-20{ padding-top: 20px; }
    .pt-sp-30{ padding-top: 30px; }
    .pt-sp-40{ padding-top: 40px; }
    .pt-sp-50{ padding-top: 50px; }
    .pt-sp-60{ padding-top: 60px; }
    .pt-sp-70{ padding-top: 70px; }
    .pt-sp-80{ padding-top: 80px; }
    .pt-sp-90{ padding-top: 90px; }
    .pt-sp-100{padding-top: 100px; }
    .pb-sp-10{ padding-bottom: 10px; }
    .pb-sp-20{ padding-bottom: 20px; }
    .pb-sp-30{ padding-bottom: 30px; }
    .pb-sp-40{ padding-bottom: 40px; }
    .pb-sp-50{ padding-bottom: 50px; }
    .pb-sp-60{ padding-bottom: 60px; }
    .pb-sp-70{ padding-bottom: 70px; }
    .pb-sp-80{ padding-bottom: 80px; }
    .pb-sp-90{ padding-bottom: 90px; }
    .pb-sp-100{padding-bottom: 100px; }
    .pl-sp-10{ padding-left: 10px; }
    .pl-sp-20{ padding-left: 20px; }
    .pl-sp-30{ padding-left: 30px; }
    .pl-sp-40{ padding-left: 40px; }
    .pl-sp-50{ padding-left: 50px; }
    .pl-sp-60{ padding-left: 60px; }
    .pl-sp-70{ padding-left: 70px; }
    .pl-sp-80{ padding-left: 80px; }
    .pl-sp-90{ padding-left: 90px; }
    .pl-sp-100{padding-left: 100px; }
    .pr-sp-10{ padding-right: 10px; }
    .pr-sp-20{ padding-right: 20px; }
    .pr-sp-30{ padding-right: 30px; }
    .pr-sp-40{ padding-right: 40px; }
    .pr-sp-50{ padding-right: 50px; }
    .pr-sp-60{ padding-right: 60px; }
    .pr-sp-70{ padding-right: 70px; }
    .pr-sp-80{ padding-right: 80px; }
    .pr-sp-90{ padding-right: 90px; }
    .pr-sp-100{padding-right: 100px; }

    .container{  padding: 0 20px; }

    /** header **/
    .mobileMenu{ max-width: none; }
    .wrapper.openMenu .webContent{ transform: translateX(80%); }
    .mobileMenu ul li a{ font-size: 0.875rem; }

    header{ height: 60px; }
    header .logo{ width: 180px; height: 37px; }
    header .menuBtn{ width: 20px; }

    /** footer **/
    footer{ height: 80px; font-size: 0.75rem; }

    /** web top **/
    .goToWebTop{ width: 30px; height: 30px; }

    /** 浮動按鈕 **/
    .floatBtnBox .btns{ width: 30px; height: 30px; }
    .floatBtnBox .btns.contact i{ font-size: 0.875rem; }
}