@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;700;900&display=swap');
@import url(/fonts/style.css);


/* $Reset
--------------------------------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote{margin:0;padding:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}ol,ul{list-style:none}q:before,q:after{content:''}abbr,acronym{border:0}a{background:transparent;text-decoration:none;color:inherit;cursor:pointer;line-height:1em;display:inline-block}a:active{outline:0}input,textarea,button,select,option{border:0;margin:0;outline:none;padding:0;font-size:1.6rem;font-family:'Noto Sans TC','Open Sans','Arial','Microsoft JhengHei','Apple LiGothic Medium',sans-serif;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none}select::-ms-expand{display:none}input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc}


/* $font
--------------------------------------------------------------------------------------*/
:before ,:after{ font-family:'icomoon','Microsoft JhengHei','Apple LiGothic Medium';}


/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; font-size:10px; }
body {min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; background: url('../images/bg-pic.png');}

/* $共用
--------------------------------------------------------------------------------------*/
/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}
* { box-sizing: border-box; }

/* button reset、input reset、select reset */
button, input, select{ font-family:'Microsoft JhengHei','Apple LiGothic Medium', Arial, Helvetica, sans-serif; border: none; }
button { cursor: pointer; }
p { font-size: 18px; color: #00263E; line-height: 1.4; }
.content { width: 96%; max-width: 1240px; padding: 0 20px; margin: 0 auto; position: relative; z-index: 100; }

.slick-dots { position: relative; bottom: 0; margin: 20px 0 60px 0; }
.slick-dots li button:before { font-size: 15px; color: #D0C8C9; opacity: 1;}
.slick-dots li.slick-active button:before { color: #839386; opacity: 1;}
.slick-initialized .slick-slide { display: flex; }
.slick-slide img { width: 100%; }
.banner-slick { opacity: 0; transition: opacity 0.3s ease; }

section { position: relative; }
section.kv { margin-top: 81px; }
section.news { padding: 60px 0 0; }
section.menu { background: #FEF6EB; padding: 80px 0; }
section.link-sec { background: #A1B9B1; }
section.inside-pages { margin: 60px 0 0; }
.kv { width: calc(100%); height: auto; background-size: 50%; margin:0 auto; }
.kv img { width: 100%; }

.features{ display: flex; justify-content: center; }
.features img{ width: 50%; height: 100%; }
.features.col-1 img{ width: 100%; }
.video{ width: 50%; }
.video-container{ position: relative; padding-bottom: 56.25%; padding-top:0; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed{ position: absolute; top: 0;left: 0; width: 100%; height: 100%; }


.news-list { width: 100%; display: flex; flex-wrap: wrap; gap: 40px; }
.news-list .news-box a { width:100%; line-height: 0; transition: .5s; position: relative; border:1px solid #A5BEB6; padding: 15px; }
.news-list .news-box a:hover { transform: translateY(-10px); transition: .5s; }
.news-list .news-box .img-box img,
.article .img-box img { width: 100%; line-height: 0; margin: 0 0 10px 0; }
.news-list .news-box .txt-box { line-height: 1.5; padding:0 0 30px; font-size: 18px; color: #2C2C2C; }
.news-list .news-box .txt-box span { color: #839386; font-weight: bold; }
.news-list .news-box .btn-more { width: fit-content; display: flex; align-items: center; padding: 15px 20px; font-size: 1.8rem; position: absolute; right: -10px; bottom: -10px; color: #fff; background:linear-gradient(to right, #A5BEB6 0%, #839385 100%) ; }
.news-list .news-box .btn-more span:before { margin-left: 5px; color: #fff; }

.toggleBtn { width: 100%; display: flex; justify-content: center; margin:40px auto 0 auto; padding:25px; font-size: 18px; font-weight: bold; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #BCD1CA 100%) ; color: #42372C; cursor: pointer; transition: .5s; }
.toggleBtn:hover { background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #BCD1CA 100%) ; transition: .5s; }
.toggleBtn.show-more::after { content: "查看更多 ▼"; }
.toggleBtn.show-less::after { content: "收合 ▲"; }


h2 { display:flex; width:calc(100% - 60px); max-height: 70px; justify-content: center; margin: 0 auto 30px auto;}
h2.notice { max-height: 50px;}
h2 img { width: 100%; }

section.menu .menu-box img { width: 100%; }
section.menu .link { padding: 0 0 30px; }
section.menu .note { font-size: 1.8rem; font-weight: bold; color:#839386; text-align:center}


.article { width: 100%; display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 30px; flex: 1; }
.article .img-box { max-width: 450px; height: fit-content; }
.article .txt-box { max-width: 700px; font-size: clamp(1.6rem, 1.5vw, 1.8rem); line-height: 1.8; }
.article .txt-box h3 { font-size: clamp(2rem, 1.5vw, 2.4rem); line-height: 1.8; font-weight: bold; color:#839386 ; margin-bottom: 20px; }
.article .txt-box a { color: #839386; text-decoration: underline; }
section.notice .article h3.black { color: #000; }
section.notice .article .txt-box { max-width: 1200px; }
section.notice .article .divider { width: 100%; border-bottom: 1px solid #A5BEB6; margin-bottom: 40px; padding-top: 40px; }


.features{ display: flex; justify-content: center; }
.features img{ width: 50%; height: 100%; }
.video{ width: 50%; }
.video-container{ position: relative; padding-bottom: 56.25%; padding-top:0; height: 0; overflow: hidden; }
.video-container iframe, .video-container object, .video-container embed{ position: absolute; top: 0;left: 0; width: 100%; height: 100%; }

.icon_note { width: 200px; margin: 20px auto 0 auto; }
.icon_note a { width: 100%; }

.link { width: 100%; padding:40px 0 80px;  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.link a { font-size: clamp(1.6rem, 1.5vw, 1.8rem); color:#5F5F5F; background: #FFFFFF; border: 1px solid #A5BEB6; padding: 15px; display: flex; align-items: center; transition: .5s; }
.link a:hover { background: #A5BEB6; color: #fff; transition: .5s;  }
.link a:hover span:before { color: #fff; transition: .5s;  }
.link a span { margin: 0 0 0 5px; }
.link a span:before { color: #A5BEB6; }
.link a img { margin-left: 5px; }

footer { width: 100%; font-size: 14px; background: #797774; padding: 25px 20px; color: #fff; display: inline-block; text-align: center; margin-top: auto; }
footer a { color: #fff; margin:10px 0 0; text-decoration: underline; transition: .5s; }
footer a:hover { color: #fff; transition: .5s; }

a.gototop { width: 40px; height: 40px; border-radius: 10px 0 0 10px; position: fixed; right: 0; bottom: 50px; background: #fff; color: #164240; font-size: 18px; display: flex; justify-content: center; align-items: center; z-index: 100; box-shadow: 3px 3px 5px rgba(0, 0, 0, .4); }

.deco-leaf1,
.deco-leaf2,
.deco-leaf3,
.deco-leaf4,
.deco-leaf5,
.deco-leaf6,
.deco-leaf7 { position: absolute; }
.deco-leaf1 { top:-33%; left: -32%; transform:scale(.5); }
.deco-leaf2 { top:-33%; right: -25%; transform:scale(.5); }
.deco-leaf3 { top:90%; left: -5%; transform:scale(.5); }
.deco-leaf4 { display: none; }
.deco-leaf5 { display: none; }
.deco-leaf6 { top:-60%; left: -28%; transform: rotate(177deg) scale(.5); }
.deco-leaf7 { top:-60%; right: -28%; transform: rotate(88deg) scale(.5) scaleX(-1); }


/* =========================
   Header / Nav
========================= */
nav { width: 100%; }
:root{
  --nav-h: 80px;
  --divider: #dde3e1;
  --text: #332A21;
  --hover: #839386;
  --accent: #839386; /* 漢堡/X 顏色（可改成你要的） */
  --ease: cubic-bezier(.2,.8,.2,1);
}
.no-scroll{ overflow:hidden; }
.site-header{ position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); background:#fff; z-index: 1000; overflow: hidden; transition: height 360ms var(--ease); }
.nav{ height: var(--nav-h); display:flex; align-items:center; gap: 12px; padding: 0 35px; position: relative; }
/* logo 區 */
.brand{ width:auto; height:50px; position: absolute; top: 15px; left: 25px; }
/* 選單文字 + hover */
.top-menu a{ color: var(--text); text-decoration: none; font-size: 18px; letter-spacing: .5px; transition: color 220ms var(--ease); display: flex; gap: 5px; justify-content: center;}
.top-menu a:hover{ color: var(--hover); }
/* 社群容器 */
.social_media{ display:flex; align-items:center; gap: 30px; }
/* 社群按鈕共用（高度由 RWD 控制） */
.social_media a{ display:inline-flex; align-items:center; justify-content:center; text-decoration:none; line-height: 1; }
/* =========================
   PC 
========================= */
@media (min-width: 768px){
  /* PC：menu 水平置中 */
  .top-menu{ flex: 1; display:flex; align-items:center; justify-content:center; gap: 18px; }
  /* PC：#9BC6BC 直線分隔 */
  .top-menu a + a{ position: relative; padding-left: 18px;  /* 留出直線空間 */ }
  .top-menu a + a::before{ content:""; position:absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 18px; background: var(--divider); opacity: 0; }
  /* PC：社群高度 24px */
  .social_media a{ height: 24px; }
  /* 若 icon 是 icon font：用 font-size 跟著縮 */
  .social_media .icon-fb,
  .social_media .icon-line{ font-size: 24px; line-height: 1; display:inline-block; }
  /* PC 不顯示漢堡 */
  .nav-toggle{ display:none; }
}
/* =========================
   Mobile
========================= */
@media (max-width: 767.98px){
  /* 手機：預設隱藏 menu/social，只顯示漢堡 */
  .top-menu,
  .social_media{ display:none; }
  /* 手機：漢堡/X 固定右上 20/20（開關同位置） */
  .nav-toggle{ position: absolute; top: 20px; right: 20px; width: 40px; height: 40px; border: 0; background: transparent; padding: 0; cursor: pointer; display:inline-flex; align-items:center; justify-content:center; z-index: 20;}
  /* 三條線 -> X */
  .hamburger{ width: 22px; height: 2px; background: var(--accent); display:inline-block; position:relative; transition: background 260ms var(--ease);}
  .hamburger::before,
  .hamburger::after{ content:""; position:absolute; left:0; width:22px; height:2px; background: var(--accent); transition: transform 320ms var(--ease), top 320ms var(--ease);}
  .hamburger::before{ top:-7px; }
  .hamburger::after{ top:7px; }
  /* 展開：header 變滿版白底 */
  .site-header.is-open{ height: 100vh;}
  .site-header.is-open .nav{ height: 100%;}
  /* 展開：menu 從上方約 80px 開始 */
  .site-header.is-open .top-menu{ display:flex; flex-direction:column; align-items:center; position:absolute; top: 80px; left:0; right:0; width:100%; gap: 0; padding: 0;}
  /* 手機：項目 + #9BC6BC 橫線分隔 */
  .site-header.is-open .top-menu a{ width: min(520px, calc(100% - 48px)); /* 左右留 24px */ text-align:center; padding: 30px 10px; position:relative;}
  /* 手機：關掉 PC 的直線 pseudo-element */
  .site-header.is-open .top-menu a + a::before{ content:none;}
  /* 手機：橫線 */
  .site-header.is-open .top-menu a:not(:last-child)::after{ content:""; position:absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--divider); opacity: 1;}
  /* 展開：社群固定底部置中（像圖三） */
  .site-header.is-open .social_media{ display:flex; position:absolute; left:0; right:0; bottom: 200px; justify-content:center; gap: 60px;}
  /* 手機：社群高度 30px */
  .social_media a{ height: 30px; }
  .social_media .icon-fb,
  .social_media .icon-line{ font-size: 30px; line-height: 1; display:inline-block;}
  /* 展開：漢堡變 X（按鈕位置不變） */
  .site-header.is-open .hamburger{ background: transparent; }
  .site-header.is-open .hamburger::before{ top:0; transform: rotate(45deg); }
  .site-header.is-open .hamburger::after{ top:0; transform: rotate(-45deg); }
}
/* =========================
   Header / Nav end
========================= */




/* ------------------ 
$pc
------------------ */
@media screen and (min-width: 1200px){

    html,body{ min-width: 100%; }
    body { background-size: 20%;}
    
    .kv { height: auto; background-size: 50%; margin:0 auto;}

    .news-list .news-box { width: calc(100% / 2 - 25px); }
    .news-list .news-box a { display:flex; flex-wrap:nowrap; padding: 14px; gap: 20px; }
    .news-list .news-box a .img-box { width: 50%; min-width:270px; }
    .news-list .news-box .img-box img,
    .article .img-box img {  margin: 0; }
    section.menu .link { position: absolute; padding: 0; justify-content: flex-end; top: -80px; right: 20px; }

    .article { width: 100%; display: flex; flex-wrap: wrap; gap: 50px; margin: 50px 0 30px; flex: 1; }
    .article .img-box { max-width: 450px; height: fit-content; }
    .article .txt-box { max-width: 700px; font-size: clamp(1.6rem, 1.5vw, 1.8rem); line-height: 1.8; }
    .article .txt-box h3 { font-size: clamp(2rem, 1.5vw, 2.4rem); line-height: 1.8; font-weight: bold; color:#839386 ; margin-bottom: 20px; }
    .article .txt-box a { color: #839386; text-decoration: underline; }

    a.gototop { width: 60px; height: 60px; border-radius: 30px; position: fixed; right: 20px; bottom: 40px; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 100; }

   .deco-leaf1 { top:-30%; left: -4%; transform:scale(1); }
   .deco-leaf2 { top:-30%; right: -3.5%; transform:scale(1); }
   .deco-leaf3 { top:20%; left: 10%; transform:scale(1); }
   .deco-leaf4 { display: block; top:20%; left: 0; transform: rotate(90deg) scale(1); }
   .deco-leaf5 { display: block; top:50%; right: -50px; transform: rotate(110deg) scale(1.2); }
   .deco-leaf6 { top:-30%; left: -4%; transform: rotate(177deg) scale(1); }
   .deco-leaf7 { top:-30%; right: -4%; transform: rotate(88deg) scale(1) scaleX(-1); }

   section.inside-pages .deco-leaf1 { top:-2%; left: -110px; transform:scale(.8);}
   section.inside-pages .deco-leaf2 { top:-6%; right: -90px; transform:scale(.8);}

}


/* ----------------
$Pad PRO
---------------- */
@media screen and (min-width:1024px) and (max-width:1199.98px){

    a.gototop { width: 60px; height: 60px; border-radius: 30px; position: fixed; right: 20px; bottom: 40px; font-size: 20px; display: flex; justify-content: center; align-items: center; z-index: 100; }
    .kv { width: calc(100% - 70px); height: auto; background-size: 50%; margin:0 auto; }
    .kv img { width: 100%; }

}


/* ----------------
$Pad
---------------- */
@media screen and (min-width:768px) and (max-width:1023.98px){
    html,body{ min-width: 100%; }
    .news-list .news-box { width: calc(100% / 3 - 24px);}
    .kv { width: calc(100% - 70px); height: auto; background-size: 50%; margin:0 auto; }
    .kv img { width: 100%; }

}


/* ----------------
$Mobile
---------------- */
@media screen and (max-width:767.98px){ 

    html,body{ width: 100%; -webkit-text-size-adjust:none; }
    .features{ flex-direction: column; }
    .features img{ width: 100%; }
    .video{ width: 100%; }

}


/* ----------------
$Mobile small
---------------- */
@media screen and (max-width:320px){ 


}


/* ----------------
$橫的手機版型 
---------------- */
@media screen and (orientation:landscape){ 


}