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

.noto-sans---{
  font-family: "Noto Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

*{  box-sizing: border-box;
    font-family: 'Noto Sans TC', sans-serif; }

img { border-style: none; }
a img  {    border: none; } 


html, body{  
  background-color: #f0f7f1;
  background-image: url(img/bg_top0.png);
  background-position: top center;
  background-repeat: repeat-x;
}

#btn_home{
  position: fixed;
  right: 50px;
  top: 50px;

  width:215px;
  height:62px;
  background-image: url(img/btn_home.png);
  background-size:cover;
  background-position: center center;
  cursor: pointer;
  z-index:998;
}

#btn_back{
  position: fixed;
  right: 55px;
  bottom: 55px;

  width:130px;
  height:130px;
  background-image: url(img/btn_back.png);
  background-size:cover;
  background-position: center center;
  cursor: pointer;
  z-index:998;}
#btn_backk{
  position: fixed;
  left: 55px;
  bottom: 55px;

  width:130px;
  height:130px;
  background-image: url(img/btn_back.png);
  background-size:cover;
  background-position: center center;
  cursor: pointer;
  z-index:998;
}

.btn_toclick,.btn_click{
  display:block;
  width:150px;
  height:150px;
  background-size:cover;
  background-position: center center;}
.btn_toclick{
  background-image: url(img/btn_toclick.png);}
.btn_click{
  background-image: url(img/btn_click.png);
  cursor: pointer;
   -webkit-filter: drop-shadow(1px 1px 7px rgba(30, 30, 30, 0.8));
  filter: drop-shadow(1px 1px 7px rgba(30, 30, 30, 0.8));}

.home_btn{
  position: fixed;
  right: 50px;
  bottom: 50px;
  z-index:998;
  display:flex;
  flex-direction: column;
  gap:15px;
}

.page_btn{
  position: fixed;
  right: 50px;
  top: 50px;
  z-index:998;
}



/* ---------------------------

　　 ✦ ✦   TOP　 ✦ ✦

------------------------------ */


.container{
  width:100%;

  padding-block:30px;
  padding-inline:80px;
}

.top{
  width:100%;
  padding-bottom:50px;
  color:#ffffff;
  text-shadow: 0px 0px 10px #333333;
}

.bg_top{
  background-image: url(img/bg_top1.png);
  background-repeat: no-repeat;
  background-position: top right;

}

.top h1{
  font-size:24px;
  line-height:1.8;}
.top h2{
  font-size:16px;
  line-height:1.3;
  font-family: Arial, Helvetica, sans-serif;

}


/* ---------------------------

　　 ✦ ✦   圖片輪轉　 ✦ ✦

------------------------------ */

.img_holder{  }

.img_holder header {
  width: 100%;  
  height: 100vh;
  overflow: hidden;}

.imgfit{
  display:block;
  overflow: hidden;
  width:100%;
  height:100vh;
  background-color:#555555;

  position: relative;
}
.imgfit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img_p{
  width:100%;
  height:96vh;
  position: absolute;
  top:0;
  left:0;
  z-index: 5;

  display:flex;
  flex-direction: column;
  justify-content: space-between;
  padding:80px;

}

.img_p h1{
  font-size:60px;}
.img_p h2{
  font-size:48px;
  font-weight: normal;
  padding:5px 0;
}
.img_p h3{
  font-size:40px;
  font-weight: normal;
}
.img_p h4{
  font-size:32px;
  font-weight: normal;
  padding-bottom:5px;
}
.img_p p{
 font-size:18px;
 padding:5px 0;
}

.img_p h1,.img_p h2,
.img_p h3,.img_p h4,.img_p p{
  color:#ffffff;
      text-shadow:
    1px 1px 5px black,
    0 0 3em black,
    0 0 2em black;
}



/* ---------------------------

　　 ✦ ✦   演化樹　 ✦ ✦

------------------------------ */

.container_tree{
  max-width: 1200px;
  margin:0 auto;
  padding-bottom:30px;
}

.tree_bg{
  position: relative;
  width:100%;
}

.tree{
  position:absolute;
  top:0;
  bottom:0;
  z-index: 5;

  width:34.3%;
  margin-top:5.6%;
  margin-left:41.5%;
}

.tree_bg img,.tree img{
  width:100%;
  height:auto;
}

.tree{font-size:0;}
.tree a img{
  margin:0;
  padding:0;

}

/* ---------------------------

　　 ✦ ✦   每一頁 ✦ ✦

------------------------------ */


.ddt{
  border-left:15px solid #366b5e;
  padding-left:20px;
  color:#366b5e;
  margin-bottom:30px;}
.ddt h1{
    font-family: Arial, Helvetica, sans-serif;
  font-size:36px;
  line-height:1.4;
  letter-spacing: 2px;}
.ddt h2{
  font-size:24px;
  line-height:1.4;
}

.noo{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;}

.dd{  }
.dd p{
  font-size:24px;
  line-height:1.8;
  padding-bottom:10px;
}

.img_out{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

.imgt img{
  width:100%;
  height:auto;
  margin-bottom:5px;}
.imgt h2{
  font-size:13px;
  color:#666666;
  padding-bottom:5px;
  font-weight: 500;}
.imgt h3{
  font-size:20px;
  line-height:1.5;
  font-weight: 600;}
.imgt p{
  font-size:15px;
  font-weight: 500;
  line-height:1.4;
  padding-bottom:0;}

.pho{color:#366b5e;}

.nnote{
  font-size:13px;
  color:#666666;
  line-height: 1.4;
}

.imgf{
  display: flex;
  justify-content: space-between;
  width:auto;
}

.img21{  width:65%;}
.div49{ margin-top:30px;width:48%;}
.div50 { margin-top:30px;width:49%;}
.div21 {  margin-top:30px;width:33.5%;}


.img22{  width:58%;}
.div31 {  margin-top:30px;width:30%;}
.div32 {  margin-top:30px;width:67.5%;}
.div33 {  margin-top:30px;width:39.2%;}


.img23{ width:79.5%;}

.div25{  width:30%;}
.div30{  width:32%;}
.div70{  width:66%;}

.div35{  width:35%;}

.div20 {  width:17.5%;}
.div40 {  width:39.3%;}


.div30,.div20,.div40,.div25,.div35
  {margin-top:30px;}


.dfa{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
}





.mb30{margin-bottom: 30px;}


.mr15{margin-right:15px;}
.hbs{padding-right:210px;}


footer{
  width:100%;
  text-align: center;
  padding:20px 0;

  color:#366b5e;
  font-size:14px;
  letter-spacing: 1px;}


/* --------------------------
  
 　      RWD 手機 平板

-----------------------------*/



@media (max-width: 750px) {



  .bg_top{
  background-image: url(img/bg_top2.png);}



  .img_p{   padding:30px;}
  .img_p h1{ font-size:44px;}
  .img_p h2{ font-size:30px; padding:5px 0;  }
  .img_p h3{ font-size:28px;}
  .img_p h4{ font-size:20px;line-height:25px;}

  .img_p p{ font-size:14px; }

  .btn_toclick,.btn_click{
      width:100px;height:100px;}
  #btn_back,#btn_backk{
      right:20px;bottom:20px;
      width:90px;height:90px;}
  .home_btn{ right:20px; bottom:20px;}
  .page_btn{ right: 20px; top: 100px;}

  .hbs{padding-right:150px;}

.treet h1{
  font-size:32px;
  color:#366b5e;
  border-left:10px solid #366b5e;
  padding-left:15px;
  margin-top:20px; 
  letter-spacing: 2px;
}


  .mr15{margin-right:0;}



  .container{
    padding-block:20px;
    padding-inline:30px;}
  .top h1{font-size:20px;}
  .top h2{font-size:15px;}

  .imgt img{margin-bottom:2px;}
    
  .div30,.img21,.div33,.img22,.img23,
  .div20,.div40,.div21,.div25,
  .div70
  {  width:100%;}

  .div30,.div20,.div40,.div25,.div35
  {margin-top:20px;}


  .ddt{  border-left:10px solid #366b5e;
  padding-left:10px;}
  .ddt h1{ font-size:28px;}
  .ddt h2{ font-size:16px; }
  .dd p{   font-size:17px;}


  .imgt h3{font-size:18px;}
  .imgt p{font-size:14px;}


}