html { 
  scroll-behavior: auto !important; 
}
    :root{
      --bg: #f4f6f9;
      --card: #ffffff;
      --text: #1f2937;
      --muted:#6b7280;
      --brand:#f4b400; 
      --brand2:#1e73be; 
      --radius: 16px;
      --shadow: 0 10px 24px rgba(0,0,0,.08);
      --max: 980px;
      --gap: 18px;
    }

    .for_pc{ display: block; }
    .for_m {display: none !important;}

@media (max-width: 787px){
  
    .for_pc{  display:none;}
    .for_m {display: block !important;}
    img{width: 100%;}
}
    


    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family:"Noto Sans TC", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans TC", sans-serif;
      color:var(--text);
      background:var(--bg);
      line-height:1.6;
    }


    .page{
      padding: 0;
      overflow: hidden;
    }
    .container{
      width:100%;
      max-width: var(--max);
      margin:0 auto;
    }


#header {
    z-index: 9999;
}
@media (min-width: 768px) {
    .header {
        padding-left: 40px;
        padding-right: 20px;
    }
}

.header {
    position: fixed !important;
    width: 100%;
    top: 0;
    z-index: 100;
    padding: 10px 32px;
    box-shadow: 0 2px 4px -0px rgba(0, 0, 0, 0.16);
    background: white;
}

@media (min-width: 768px) {
    .header-container {
        justify-content: flex-start;
    }
}
.header-container {
    flex: 1;
    align-items: center;
    justify-content: center;
}

.logo-link {
    display: flex;
    margin: 0;
    padding: 15px 0;
}

h1{font-weight: 800;font-size: 24pt;margin: 10pt;}
h6{font-weight: 500;font-size: 13pt;margin: 0; color: #221815;}
.small{font-size: 11pt;}
.txt{position: absolute;  left: 50%; transform: translateX(-50%); }
.txt_center{text-align: center;}
.egl{font-family: sans-serif;}
.thin{font-weight: 100;}
.brown{ color: #b37e1b;}
.weight{font-weight: 800;}
.blue{color: #0295be;}
@media (max-width: 787px){
.header{padding: 5vw 0 2vw 5vw; width: 100vw;}
.txt{width: 100vw;}
h1{font-weight: 700; font-size:4vw; margin:2vw; line-height: 1.4;}
h6{font-weight: 500;font-size: 2.5vw;margin: 4vw; line-height: 1.4;}
.logo-link {
    display: flex;
    margin: 0;
    padding: 0;
}

.small{font-size: 2.2vw;}
}


@media (max-width: 787px){

  .topbar{ height: 15vw; }
  .topbar__logo{ height: 10vw }
}


/* ===== 共用 ===== */
.action-bar{
  position: fixed;
  z-index: 1200;
  width: 100vw;
  overflow: hidden;
}

.action-group a{
  display: block;
}

/* ===== PC：右側直排 ===== */
.only-pc{
  position: fixed;
  right: 0px;
  top:45%;
  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
  gap: 8px;
}

.only-pc img{
  width: 56px;     /* 依你的直式圖 */
  height: auto;
  display: block;
}

/* ===== Mobile：底部橫排 ===== */
.only-mobile{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;

}

.only-mobile img{
  height: auto;   /* 手機版高度 */
  width: 33vw;
  display: block;
}

/* ===== 顯示控制 ===== */
.only-mobile{ display: none; }

@media (max-width: 767px){
  .action-group a{  display: block;width: 33vw;}

  .only-pc{ display: none; }
  .only-mobile{ display: flex;flex-wrap: wrap; }
  
  /* 避免底 bar 蓋內容 */
  body{
    padding-bottom:11vw;
 
        width: 100vw;
  }
}




.top_KV{width: 100%;height:820px;}
.KV_title {position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
@media (max-width: 767px){
.top_KV{height: 173vw; width: 100vw;}
.KV_title{ position: absolute ; width: 100%; top: 11vw;}
.KV_title img{ width: 100%;}

}

.Area01{ position: relative;height: 564px;}
.Area01_main01 {    margin:-252px 0 0 413px ;position: absolute;}
.Area01bg{position: absolute;  left: 50%; transform: translateX(-50%);}
.Area01_main{position: absolute; left: 50%; transform: translateX(-50%); top: 170px;}
.Area01 .notes{bottom: 54px; width: 1140px;}
@media (max-width: 767px){

.Area01{ position: relative;height:80vw; width: 96vw; margin: 0 auto;}
.Area01_main01 {margin: 0 0 0 37vw; position: absolute; width:16vw; z-index: 1;}
.Area01bg{position: absolute;  left: 0; transform: translateX(0%);}
.Area01_main{position: absolute; left: 50%; transform: translateX(-50%); top: 25vw; width: 90vw;}
.Area01 .notes{margin-bottom: -14vw;; width: 95vw;}
}



.Area02{ position: relative;height:760px;}
.Area02bg{position: absolute;  left: 50%; transform: translateX(-50%);}
.Area02_main{position: absolute; left: 50%; transform: translateX(-50%); top: 130px;}
.Area02 .notes{bottom: 50px; width: 1140px;}
.Area02 .form{left: 50%; top: 330px; position: absolute; transform: translateX(-50%); width: 1133px; height: 270px;}
.form_txt{    font-weight: 700;    font-size: 20pt; color:#231815;}
.form_txt_01 { position: absolute;    margin: 38px 0 0 43px;}
.form_txt_02 { position: absolute;    margin: 173px 0 0 43px;}
.form_txt_03 { position: absolute;    margin: 19px 0 0 190px;}
.form_txt_04 { position: absolute;    margin: 154px 0 0 178px;}
.form_txt_05 { position: absolute;    margin:36px 0 0 517px}
.form_txt_06 { position: absolute;    margin: 154px 0 0 515px;}
.form_txt_07 { position: absolute;    margin:20px 0 0 814px ;}
.form_txt_08 { position: absolute;    margin:154px 0 0 845px;}
@media (max-width: 767px){
  
.Area02{ position: relative;height:101vw; width: 96vw; margin: 0 auto;}
.Area02bg{position: absolute;  left: 0; transform: translateX(0%);}
.Area02_main{position: absolute; left: 50%; transform: translateX(-50%); top: 14vw; width: 90vw;}
.Area02 .form{left: 0%; top: 40vw; position: absolute; transform: translateX(0%); width:96vw; height: 31vw;}
.Area02 .notes{ margin-bottom: -13vw; width: 95vw;}
.form_txt{    font-weight: 700;    font-size: 8.3pt;line-height: 1.4;}
.form_txt_01 {  position: absolute; margin:3vw 0 0 4.5vw; }
.form_txt_02 { position: absolute;    margin: 18vw 0 0 4.5vw;}
.form_txt_03 { position: absolute;    margin: 3vw 0 0 11.5vw;}
.form_txt_04 { position: absolute;    margin: 18.5vw 0 0 11.5vw;}
.form_txt_05 { position: absolute;    margin:5.5vw 0 0 40.5vw;}
.form_txt_06 { position: absolute;    margin:18.5vw 0 0 39.5vw;}
.form_txt_07 { position: absolute;    margin:3vw 0 0 65.5vw;}
.form_txt_08 { position: absolute;    margin:18.5vw 0 0 69.5vw;}

}


.Area03{ position: relative;height: 818px;}
.Area03bg{position: absolute;  left: 50%; transform: translateX(-50%);}
.Area03_main01{position: absolute; left: 50%; transform: translateX(-50%); margin: 180px 0 0 -30px;}
.Area03_main02{position: absolute; left: 50%; transform: translateX(-50%); margin: 115px 0 0 290px;}
.Area03 .notes{bottom: 77px; width: 1140px;}
@media (max-width: 767px){
.Area03bg{position: absolute;  left: 0; transform: translateX(0%);}
.Area03{ position: relative;height:108vw; width: 96vw; margin: 0 auto;}
.Area03_main01{position: absolute; left: 0%; transform: translateX(-0%); margin:21vw 2vw 0 4vw;}
.Area03_main02{position: absolute; left: 0%; transform: translateX(-0%); margin: 19vw 4vw 0 46vw;}
.Area03 .notes{margin-bottom:-14.5vw; width: 95vw;}

}


.Area04{ position: relative;height: 818px;}
.Area04bg{position: absolute;  left: 50%; transform: translateX(-50%);}
.Area04_main01{position: absolute; left: 50%; transform: translateX(-50%); margin:130px 0 0 -300px;}
.Area04_main02{position: absolute; left: 50%; transform: translateX(-50%); margin: 165px 0 0 260px;}
.Area04_main03{position: absolute; left: 50%; transform: translateX(-50%); margin: 305px 0 0 260px;}
.Area04_main04{position: absolute; left: 50%; transform: translateX(-50%); margin: 445px 0 0 260px;}
.Area04 .notes{bottom: 47px; width: 1140px;}
@media (max-width: 767px){
.Area04bg{position: absolute;  left: 0; transform: translateX(0%);}
.Area04{ position: relative;height:175vw; width: 96vw; margin: 0 auto;}
.Area04_main01{position: absolute; left: 0%; transform: translateX(-0%); margin:21vw 2vw 0 4vw;}
.Area04_main02{position: absolute; left: 0%; transform: translateX(-0%); margin: 19vw 4vw 0 46vw;}
.Area04 .notes{bottom:10.5vw; width: 96vw;}
.Area04_main01{position: absolute; left: 50%; transform: translateX(-50%); margin: 20vw 0 0 0; width: 55vw;}
.Area04_main02{position: absolute; left: 50%; transform: translateX(-50%); margin: 75vw 0 0 0; width: 90vw;}
.Area04_main03{position: absolute; left: 50%; transform: translateX(-50%); margin: 90vw 0 0 0; width: 90vw;}
.Area04_main04{position: absolute; left: 50%; transform: translateX(-50%); margin: 105vw 0 0 0; width: 90vw;}

}



.Area05{ position: relative;height: 818px;}
.Area05bg{position: absolute;  left: 50%; transform: translateX(-50%);}
.Area05 .notes{bottom: 47px; width: 1140px;}
.Area05 .txt01 {margin: 0 0 0 -305px;}
.Area05 .txt02 {margin: 0 0 0  301px;}
.Area05 .notes01{width: 550px; margin: 575px 0 0 -292px;}
.Area05 .notes02{width: 550px; margin: 575px 0 0 307px;}
.incomeTable{position: absolute;left: 50%; transform: translateX(-50%);width: 600px;}

#incomeTable{
  font-weight: 500;
  width:100%;
  max-width:550px;
  margin:135px 0 0 -298px ;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-family:"Noto Sans TC", sans-serif;
}


.th-flex{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.icon{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}


#thLeft{
  background:#2f86c9;
  color:#fff;
  font-size:22px;
  padding:16px;
  text-align:center;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
      font-weight: 500;
}


#thRight{

  background:#f4b63b;
  color:#111;
  font-size:22px;
  font-weight: 500;
  padding:16px;
  text-align:center;
  border-bottom:3px solid #fff;
}



#r1c1,
#r1c2,
#r2c1,
#r2c2,
#r3c1,
#r3c2,
#r4c1,
#r4c2{
  background:#e9e9e9;
  font-size:15pt;

  text-align:center;
  padding:23px 10px;
  border-bottom:3px solid #fff;
}


#r1c1,
#r2c1,
#r3c1,
#r4c1{
  border-right:3px solid #fff;
}

#r4c1,
#r4c2{
  border-bottom:0;
}




#stockIntroTable{
  font-weight: 400;
  left: 50%; transform: translateX(-50%);
  position: absolute;
  width:100%;
  max-width: 550px;
  margin:135px 0 0 301px ;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Noto Sans TC", sans-serif;
}


#stockHead1{
  width: 22%;
  background:#2f86c9;
  color:#fff;
  font-size:22px;
  font-weight:400;
  text-align:center;
  padding:14px 10px;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
}

#stockHead2{
  width: 78%;
  background:#2f86c9;
  color:#fff;
  font-size:22px;
  font-weight:400;
  text-align:left;
  padding:14px 16px;
  border-bottom:3px solid #fff;
}


#s1c1,#s1c2,
#s2c1,#s2c2,
#s3c1,#s3c2,
#s4c1,#s4c2,
#s5c1,#s5c2,
#s6c1,#s6c2,
#s7c1,#s7c2,
#s8c1,#s8c2,
#s9c1,#s9c2,
#s10c1,#s10c2{
  background:#e9e9e9;
  color:#111;
  font-size:15pt;
  padding:1px 14px;
  border-bottom:3px solid #fff;
}

/* 左欄置中 + 中線 */
#s1c1,#s2c1,#s3c1,#s4c1,#s5c1,#s6c1,#s7c1,#s8c1,#s9c1,#s10c1{
  text-align:center;
  border-right:3px solid #fff;
  padding:0px 10px;
}

/* 右欄靠左（符合你圖） */
#s1c2,#s2c2,#s3c2,#s4c2,#s5c2,#s6c2,#s7c2,#s8c2,#s9c2,#s10c2{
  text-align:left;
}

/* 最後一列不要底線 */
#s10c1,#s10c2{
  border-bottom:0;
}



@media (max-width: 767px){
.Area05bg{position: absolute;  left: 0; transform: translateX(0%);}
.Area05{ position: relative;height:auto; width: 96vw; margin: 0 auto;}
.Area05_main01{position: absolute; left: 0%; transform: translateX(-0%); margin:21vw 2vw 0 4vw;}
.Area05_main02{position: absolute; left: 0%; transform: translateX(-0%); margin: 19vw 4vw 0 46vw;}
.Area05 .notes01{width: 96vw; margin: 0 0 0 0; bottom:121vw}
.Area05 .notes02{width: 96vw; margin: 0 0 0 0; bottom:4vw;}
.Area05_01{height:88vw;}
.Area05_02{height: 115vw;}


#thLeft{
  background:#2f86c9;
  color:#fff;
  font-size:4.2vw;
  padding:1vw;
  text-align:center;
  border-right:1vw solid #fff;
  border-bottom:1vw solid #fff;
  font-weight: 500;
}


#thRight{

  background:#f4b63b;
  color:#111;
  font-weight: 500;
  font-size:4.2vw;
  padding: 1vw;
  text-align:center;
  border-bottom:1vw solid #fff;
}


#incomeTable{
  font-weight: 500;
  width:100%;
  max-width:90vw;
  margin:15vw 0 0 0;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  font-family:"Noto Sans TC", sans-serif;
}
.icon{
  width:10vw;
  height:10vw;
  display:flex;
  align-items:center;
  justify-content:center;
}


.th-flex{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5vw;
}
#r1c1,
#r1c2,
#r2c1,
#r2c2,
#r3c1,
#r3c2,
#r4c1,
#r4c2{
    background: #e9e9e9;
    font-size:3.2vw;

    text-align: center;
    padding: .5vw 1vw;
}

#stockIntroTable{
  font-weight: 400;
 left: 50%; transform: translateX(-50%);
  position: absolute;
  width:100%;
  max-width: 90vw;
  margin:15vw 0 0 0 ;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Noto Sans TC", sans-serif;
}



  #stockHead1{
  width: 22%;
  background:#2f86c9;
  color:#fff;
  font-size:4.2vw;  
  font-weight:400;
  text-align:center;
  padding:2vw .5vw;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
}

#stockHead2{
  width: 78%;
  background:#2f86c9;
  color:#fff;
  font-size:4.2vw;
  font-weight:400;
  text-align:left;
  padding:2vw .5vw;
  border-bottom:3px solid #fff;
}

  #s1c1,#s1c2,
  #s2c1,#s2c2,
  #s3c1,#s3c2,
  #s4c1,#s4c2,
  #s5c1,#s5c2,
  #s6c1,#s6c2,
  #s7c1,#s7c2,
  #s8c1,#s8c2,
  #s9c1,#s9c2,
  #s10c1,#s10c2{ font-size:3.2vw; }

}




.Area06{ position: relative;height:1228px;}
.Area06bg{position: absolute;  left: 50%; transform: translateX(-50%);}
.Area06 .notes{bottom:105px; width: 1140px;}

#etfInfoTable{
  left:50%;
  transform: translateX(-50%);
  position: absolute;
  width:100%;
  max-width: 1150px;
  margin: 134px auto 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Noto Sans TC";
  font-weight: 500;

}


#k1,#k2,#k3,#k4,#k5,#k6,#k7,
#k4b,#k5b,#k6b{ width: 18%; }

#v4,#v5,#v6{ width: 44%; }
#v4b,#v5b,#v6b{ width: 20%; }

#k1,#k2,#k3,#k4,#k5,#k6,#k7,
#k4b,#k5b,#k6b{
  background:#e6e6e6;
  color:#c98514;          
  font-weight:400;
  font-size:18pt;
  text-align:left;
  padding:14px 14px;
  vertical-align:middle;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
}

#v1,#v2,#v3,#v4,#v4b,#v5,#v5b,#v6,#v6b,#v7{
  background:#e6e6e6;
  color:#111;
  font-size:15pt;
  text-align:left;
  padding:14px 16px;
  vertical-align:middle;
  border-right:3px solid #fff;
  border-bottom:3px solid #fff;
  line-height:1.55;
}

#v1,#v2,#v3,#v4b,#v5b,#v6b,#v7{
  border-right:0;
}

#k7,#v7{
  border-bottom:0;
}

@media (max-width: 767px){
.Area06bg{position: absolute;  left: 0; transform: translateX(0%);}
.Area06{ position: relative;height:236vw; width: 96vw; margin: 0 auto;}
.Area06_main01{position: absolute; left: 0%; transform: translateX(-0%); margin:21vw 2vw 0 4vw;}
.Area06_main02{position: absolute; left: 0%; transform: translateX(-0%); margin: 19vw 4vw 0 46vw;}
.Area06 .notes{bottom:5.5vw; width: 95vw;}


#etfInfoTable{
  left:50%;
  transform: translateX(-50%);
  position: absolute;
  width:95%;
  max-width: 95vw;
  margin: 14vw auto 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: "Noto Sans TC";
  font-weight: 400;

}

#v1,#v2,#v3,#v4,#v4b,#v5,#v5b,#v6,#v6b,#v7{
  background:#e6e6e6;
  color:#111;
  font-size:3.2vw;
  text-align:left;
  padding: 2.3vw;
  vertical-align:middle;
  border-right:1vw solid #fff;

  line-height:1.55;
}
#k1,#k2,#k3,#k4,#k5,#k6,#k7,
#k4b,#k5b,#k6b{
  font-size:3.2vw;
  padding:  2vw;
  border-right:1vw solid #fff;
  border-bottom:1vw solid #fff;
}
#k7{  border-bottom:0vw solid #fff;}
#k1,#k2,#k3,#k4,#k5,#k6,#k7,
#k4b,#k5b,#k6b{ width: 25%; }

}
.Area07{ position: relative;height: 2400px; } 
.Area07_title{font-size: 32pt; font-weight: 800; height: 90px; position: relative; margin: 0 auto; /* width: 100%; */ text-align: center;}
.act_btn {position:relative ; left: 50%; transform: translateX(-50%);margin: 40px 0 0 0;width: 1220px;height: 120px; z-index: 10;pointer-events: all; } 
.Area07_01 {  position: relative;  z-index: 2;  height: 950px}
.Area07_02 { position: absolute;  top: 0; left: 0; width: 100%; height: 850px; z-index: 1;  transform: translateY(100px);}
.Area07bg{position: absolute; left: 50%; transform: translateX(-50%);} 
.Area07_main{position: absolute; left: 50%; transform: translateX(-50%); top: 170px;} 
.Area07_pin { position: relative; width: 100%; overflow: hidden; /* 隱藏超出邊界的第二區 */ }
.Area07_01, .Area07_02 { position: relative; /* 回歸自然排列 */ width: 100%; display: block; }
.Area07_01 .notes{bottom: 95px; width: 1150px; } 
.Area07_02 .notes{bottom: -50px; width:1145px; }


@media (max-width: 767px){

.Area07{ position: relative;height:318vw; width: 100vw;} 
.Area07_title{font-size: 18pt; font-weight: 800; height:10vw; position: relative; margin: 0 auto; text-align: center;}
.act_btn {top: 1vw; position: relative; left: 50%; transform: translateX(-50%); margin: 0px 0 0 0; width: 96vw; height:17vw; display: flex;justify-content: center;} 
.act_btn a{width: 46vw;display: block;}
.Area07_01{ position: relative;height: 89vw;} 
.Area07_02{ position: relative;height:181vw;} 
.Area07bg{position: absolute; left: 50%; transform: translateX(-50%);} 
.Area07_pin{ height: 100%;}
.Area07_main{position: absolute; left: 50%; transform: translateX(-50%); top: 170px;} 
.Area07_01 .notes{bottom: -21vw; width: 96vw; } 
.Area07_02 .notes{bottom: 6vw; width: 96vw;            }
.Area07bg{position: absolute; left: 50%; transform: translateX(-50%); width: 96vw;}

}


.Area08 {
 width: 1200px; left: 50%; transform: translateX(-50%); position: relative; height: 1070px;
}
.line{background-color: #0295be; width: 1200px;height: 10px;margin: 10px 0; }

.fotter{ background-color: #0295be; color: #fff; height: 30px; bottom: 0; text-align: center; position: relative;width: 100%;font-size: 6pt;}
@media (max-width: 767px){
 .Area08 {width: 100vw;height:248vw;}
 .line{background-color: #0295be; width: 90vw;height: 1vw;margin: 0 auto; }

.fotter{ background-color: #0295be; color: #fff; height:12vw; bottom: 0; text-align: center; position: relative;width: 100%;padding: 1vw;}
}





@keyframes rotate-360-cw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate-360-ccw {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

[data-aos="rotate-once"] {
  transform: rotate(0deg);
  opacity: 1; 
  transition-property: transform, opacity; 
}


[data-aos="rotate-once"].aos-animate {
  transform: rotate(360deg);
  opacity: 1;
}

[data-aos="rotate-once"],
[data-aos="rotate-once-counter"] {  transform-origin: center center;  will-change: transform;}