/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/*全域*/
body p {
letter-spacing:.03em;
line-height:1.8em;
}

body h5 {
letter-spacing:.3em;
line-height:1em;
}

a, a:hover {
  text-decoration: none;
}

body {
    font-family: "Microsoft JhengHei", "微軟正黑體", Arial, sans-serif !important;
}
body:lang(en) {
    font-family: Arial, sans-serif !important;
}

/*header*/

.header_nav_icon, .footer_nav_icon {
margin-top:15px
}

.custom_nav_icon {
margin-right: 5px;
}


/*header menu的底線特效*/

.header__menu-item--depth-1 > .header__menu-link {
    position: relative;  /* 設置相對定位以便於定位偽元素 */
    transition: all 0.3s;  /* 平滑過渡效果 */
    border-bottom: 1px solid transparent; /* 初始化時為透明 */
    transition: border-color 0.3s; /* 可選，平滑過渡效果 */
}

.header__menu-item--depth-1 > .header__menu-link:hover, .header__menu-item--depth-1 > .header__menu-link:focus, .header__menu-item--depth-1 > .header__menu-link--active-link {
  border-color: black; /* 懸停時只改變顏色，不增加大小 */
  
}

.header__menu-item--depth-1 > .header__menu-link::before {
    content: "";  /* 偽元素需要內容，即使是空的 */
    position: absolute;  /* 使用絕對定位 */
    bottom: 0;  /* 定位到元素底部 */
    left: 0;  /* 從左邊開始 */
    width: 0;  /* 初始寬度為0 */
    height: 1px;  /* 偽元素的高度，也就是底線的厚度 */
    background-color: black;  /* 底線的顏色 */
    transition: width 0.3s;  /* 寬度的過渡效果 */
}

.header__menu-item--depth-1 > .header__menu-link:hover::before, .header__menu-item--depth-1 > .header__menu-link:focus::before {
    width: 100%;  /* 懸停或聚焦時，將寬度設置為元素的完整寬度 */
}

/*下拉 menu*/
.header__menu-item--depth-2 > .header__menu-link {
  font-size:13px !important;
  
}

.header__menu-submenu .header__menu-link {
    display: inline-flex;
    padding: .2rem 1rem !importnat;
}

.header__menu-item--depth-2 > .header__menu-link:focus, .header__menu-item--depth-2 > .header__menu-link:hover, .header__menu-item--depth-2 > .header__menu-link:active {
  background-color:#C9CACA;
  border-bottom: 1px solid transparent; /* 初始化時為透明 */
  color:#fff !important;
}


.header__menu-submenu .header__menu-item {
  background-color:#C9CACA;
  border-bottom: 1px solid transparent; /* 初始化時為透明 */
}

.header__menu-submenu .header__menu-item:hover, .header__menu-submenu .header__menu-item:focus, .header__menu-submenu .header__menu-item:active {
  color:#fff;
  background-color:#C9CACA;
  border-bottom: 1px solid transparent; /* 初始化時為透明 */
}

.header__menu-submenu .header__menu-link--active-link {
  color:#fff !important;
  background-color:#C9CACA !important;
  border-bottom: 1px solid transparent !important; /* 初始化時為透明 */
}

.header__menu-submenu {
  width:220px !important;
  max-width:235px;
  background-color:#C9CACA;
}

/*Footer*/

.footer_text, .social_footer {
display:inline-block;
margin-right:2%;
}

.footer_text:hover span, .footer_text:active span, .footer_text:hover a, .footer_text:active a{
   color:#fff !important;
}

.social_footer {
margin-top:0px
}

.footer_wrap {
    align-items: center;
    display: flex;
    flex-direction: row;
    height: 100px;
    justify-content: center;
}

/* 新增這個規則使得直接的子元素水平排列 */
.footer_wrap > div {
    display: inline-block;
    letter-spacing:.03em;
}

.footer_wrap > div  span, .footer_wrap > div  a {
    font-weight:500;
}

.footer_text_ch {
letter-spacing:0.3em !important;
}

/* 基本狀態 */
.footer_nav_icon img.custom_nav_icon {
    transition: filter 0.3s ease; /* 添加過渡效果使 hover 效果更順暢 */
    margin-left:10px;
    height:27px !important;
     width:auto !important;
}

/* hover 狀態 */
.footer_nav_icon a:hover img.custom_nav_icon {
    filter: brightness(0) invert(1);
}

.line-icon-footer {
margin-left:7px !important;
}

/* About us頁面 */
.about_text_title  {
  letter-spacing:0.3em !important;
}

.aboutus_title span  {
  letter-spacing:0.1em !important;
}

.about_text, .about_text h2 {
  letter-spacing:0.3em !important;
  line-height:2.5;
  font-weight:500;
}

.about_text p {
  font-weight:500;
}

p.about_text {
  margin-top: 35px; /* 頂部間距 */
  margin-bottom: 35px; /* 底部間距 */
}

/* blog頁面 */
.blog_banner_text span {
   letter-spacing:0.3em !important;
  line-height:2;
}

/* Workflow */

.workfolw_title span {
  letter-spacing:0.3em !important;
}

.workflow_sq_h2 {
   letter-spacing:0.3em !important;
   padding: 10px!important;
   border:1px solid #000000 !important;
   width: 100% !important;
}

.workflow_sq {
  display: flex;
  justify-content: center;
}

.step_text {
   letter-spacing:0.3em !important;
  line-height:2;
}

.step_no {
font-size:20px;}

.step_title {
   letter-spacing:0.3em !important;
  line-height:2;
  margin-left:10px;
}

.project_title span , .project_title a {
  letter-spacing:0.2em !important;
  font-family: Arial !important;
 }

.project_title {
  display:inline-block;
  margin-right:20px;
 }

.project_banner_text, .project_banner_text p, .project_banner_text span {
  letter-spacing:0.2em !important;
  line-height:0.6;
}

.project_name, .project_name a{
  letter-spacing:0.4em !important;
  font-weight:300;
}

.project_text p {
  font-weight:300;
  color:black;
  letter-spacing:0.3em !important;
  line-height:2.5;
}

.project_main_title .project_main_title_ch {
  letter-spacing:0.3em !important;
}

.project_main_title {
  display:block;
  padding-bottom:20px;
}

.button-wrapper a 
  letter-spacing:0.3em !important;
}

.project_main_title_en {
  font-family: Arial !important;
  letter-spacing:0.2em !important;
}

.project_main_title span {
  font-weight:500;
}

/* 聯絡我們 */
.contact_text p, .contact_text a, .contact_form_mes h2 {
    letter-spacing:0.2em !important;
    font-weight:500 !important;
}
.contact_title p, .contact_title span, .contact_title_line p, .contact_title_line span {
    letter-spacing:0.2em !important;
    font-weight:700 !important;
}

.contact_title, .contact_title_line {
    margin-top:5%;
}

.contact_text a:hover, 
.contact_text a:focus, 
.contact_text a:active {
    color: gray;
}

.contact_form_title {
   
    display: flex;
    /* width: 13%; */
    justify-content: center;
    /* margin: auto; */
    margin-bottom: 18px;
}

.contact_form_title span {
    margin: 0;              /* 移除p標籤的預設邊距 */
    color: #fff;            /* 白色文字 */
    font-weight: 500;       /* 文字加粗 */
    font-size: 20px;
    letter-spacing: 0.3em !important;
    background-color: #000; 
    padding-left:16px;
    padding-right:16px;
    padding-top:7px;
    padding-bottom:7px;
}

/* 聯絡我們 表單 */
/* 使整個表單透明 */
.hs-form {
    background-color: transparent !important;
}

/* 使用 flexbox 讓表單分成兩欄 */
.hs-form .hs-form-fields {
    display: flex;
    flex-wrap: wrap;
}

/* 預設每個表單欄位占 50% 的寬度 */
.hs-form .hs-form-field {
    flex-basis: 50% !important;
    box-sizing: border-box;
    padding-right: 10px;
    padding-left: 10px;
}

/* 設定表單文字的間距、字體粗細和大小 */
.hs-form, 
.hs-form label, 
.hs-form input, 
.hs-form select, 
.hs-form textarea, 
.hs-form button {
    letter-spacing: 0.2em !important;
    font-weight: 500 !important;
    font-size: 18px !important;
}

.hs-form input, 
.hs-form select, 
.hs-form textarea, 
.hs-form button {
    border: 1px solid #000 !important;
}

/* 按鈕的樣式設定 */
.actions .hs-button.primary.large {
    background-color: #fff!important;
    border: 1px solid #000!important;
    color: #000!important;
    width: 190px;
    font-weight: 700 !important;
    margin: auto;
    display: block;
}

/* 按鈕在 hover、focus、active 狀態的樣式 */
.actions .hs-button.primary.large:hover,
.actions .hs-button.primary.large:focus,
.actions .hs-button.primary.large:active {
    color: #808080 !important;           /* 文字為灰色 */
    border-color: #808080 !important;    /* 框線為灰色 */
}

  .workflow_space {
    display:none;
  }



/* 手機版樣式，針對較小屏幕尺寸 */
@media (max-width: 768px) {
   /* 調整手機板表單間距 */
  select {
  padding-top:10px !important;
  padding-bottom:10px !important;
  }
  
    /* 基本字體和間距調整 */
    body p, .step_title, .project_name {
        font-size: 14px; 
        letter-spacing: 0.1em;
        line-height: 1.5;
    }
  
  .about_text p, .about_text h2 {
        letter-spacing: 0em !important;
        line-height: 1;
  }
  

    /* 導航和頭部 */
    .custom_nav_icon {
        margin-right: 15px !important;
    }
    
    .header__container--left .header__menu-col {
        margin-top: 10px;
    }

    /* 修正footer對於小屏幕的呈現 */
    .footer_wrap {
        flex-direction: column;
        height: auto;
    }

    .footer_text, .social_footer {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* about us頁面 */
    p.about_text {
        margin-top: 20px;
        margin-bottom: 20px;
        letter-spacing: 0em !important;
        line-height:2 !important;
    }

    /* Workflow */
    .workflow_sq_h2 {
        padding: 5px;
    }
  
    /* 假設對於較小的屏幕，我們希望一些區塊堆疊起來 */
    .workflow_sq {
        flex-direction: column;
    }

    .project_title {
        margin-right: 10px;
    }
  
  .header_nav_icon {
        display:none;
   }
  
  .aboutus_title span  {
  letter-spacing:0em !important;
}
  
  .footer_text_ch {
letter-spacing:0.2em !important;
}
  
 .footer_text {
letter-spacing:0.02em !important;
}
.footer_nav_icon {
margin-top:15px !important;
}
  
  .workflow_sq_h2 {
   letter-spacing:0.1em !important;
    text-align:center !important;
    line-height:1.7;
}
  
  .workfolw_title span {
  letter-spacing:0.2em !important;
    font-size: 15px;
    padding: 8px;
    line-height:2;
}
  .workflow_botoom_text {
    font-size:17px;
    letter-spacing:0.1em !important;
  }
  
  .workflow_space {
    line-height:0;
    display:block;
  }
  
  .step, .step_title {
    display:block;
    text-align: center;
    font-size:18px !important;
    letter-spacing: 0.05em !important;
  }
  
  .step_title_en {
    text-align: center;
    font-size:18px !important;
    letter-spacing: 0.05em;
    font-family: arial;
    line-height: 2.2;
  }
  
  .step_text {
    letter-spacing: 0em !important;
    line-height: 2.2;
    text-align: center;
    font-size: 15px !important;
    
  }

  /* 手機版移除qrcode */
#hs_cos_wrapper_widget_1697795365894 {
display:none;
}
  .contact_title {
    margin-top:;
}
  
  .contact_title p, .contact_title span {
      letter-spacing: 0em !important;
    font-weight: 700 !important;
  }
  
  .contact_title_line {
  padding-bottom:20px;
  }
  
  .contact_title_line p, .contact_title_line span {
      letter-spacing: -0.02em !important;
    font-weight: 700 !important;
    line-height: 1;
  }
  
  .contact_title_line span {
    margin-left:-10px;
  }
  
  .contact_title_line p {
    margin-left:-5px;
  }
  
  .contact_text p, .contact_text a, .contact_form_mes h2 {
  letter-spacing: 0.03em !important;
    line-height:1.5 !important;
  }
  .contact_text {
    
   
  }
  
.contact_form_title {
  justify-content:left;
  padding-left:10px;
}

.contact_form_title span {
    margin: 0;              /* 移除p標籤的預設邊距 */
    color: #fff;            /* 白色文字 */
    font-weight: 500;       /* 文字加粗 */
    font-size: 20px;
    letter-spacing: 0.3em !important;
    background-color: #000; 
    
    padding-left:16px;
    padding-right:16px;
    padding-top:3px;
    padding-bottom:3px;
   text-align: left; /* 確保內容靠左對齊 */
}
  
  .contact_form_mes h2 {
    text-align: left !important;
    padding-left: 10px;
  }
  
  .hs-form, .hs-form label, .hs-form input, .hs-form select, .hs-form textarea, .hs-form button {
    letter-spacing: 0.01em !important;
    font-size: 18px !important;
    padding: 0;
  }
  
  .project_title {
  display:block;
   
  }
  
  .project_title_wrapper p {
  line-height: 0.4;
  }
  
  .project_banner_text, .project_banner_text p, .project_banner_text span {
  letter-spacing: -0.01em !important;
  line-height:1;
}

}


/* 部落格 */
/* 默认情况下隐藏模块 */
.blog-post__sidebar, .blog-post__meta, .blog-comments, .blog-post-section > #hs_cos_wrapper_related_posts{
    display: none;
}

/* 設定部落格側欄區塊寬度 */
.blog-post__body-wrapper {
    display: flex;
}


/* 当屏幕宽度大于 768px 时（通常为平板和桌面设备），显示模块 */
@media screen and (min-width: 768px) {
    .blog-post__sidebar, .blog-post__meta {
        display: block;
    }
    .blog-post__body {
    flex: 0 0 79%;
}

.blog-post__sidebar {
    flex: 0 0 20%;
    padding-left: 30px;
}

.blog-post__body p {
    letter-spacing: 0.2em !important;
    line-height: 2.5;
}
}

/* 部落格手機樣式 */
@media (max-width: 768px) {
  .blog-post__body p {
    letter-spacing: 0em !important;
    line-height: 2.5;
}
  /* About us頁面 */
.about_text_title  {
  letter-spacing:0.1em !important;
}
}