@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);
/*
  danny 240328
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $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','Microsoft JhengHei','PingFang TC','Helvetica','Arial',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','Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif;}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; font-size:10px; }





/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: ' ';display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset、input reset、select reset */
button, input, select{ font-family:'Noto Sans TC','Microsoft JhengHei','PingFang TC','Helvetica','Arial',sans-serif; border: none; }




/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; -webkit-text-size-adjust:none; background: linear-gradient(to bottom,  #ffffff 0%,#f0edea 350px,#f0edea 100%); box-sizing: border-box; padding: 35px 0 0 0; }

/* header */
header{ width: 100vw; height: 70px; display: flex; justify-content: space-between; align-items: center; font-size: 1.8rem; color: #000; box-sizing: border-box; padding: 0 2vw 0 2vw; z-index: 999; position: fixed; left: 0; top: 0; background: #fff;   }
header.active{ width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: start; align-items: start; background: #fff; position: fixed; left: 0; top: 0; padding: 10px 2vw 0 2vw;  }
header h3{ width: 60vw; display: flex; align-items: center; position: relative; margin: 0 30px 0 0; }
header h3 img{ width: 100%;}
header h3 a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
header.active .col-2{ width: 100%;}
header nav{ width: 100%; display: flex; flex-direction: column; align-items: center; margin: 50px 0 0 0; display: none;  }
header.active nav{ display: flex; }
header .mainnav{ width: 100%; display: flex; flex-direction: column;  margin: 0 0 30px 0; color: #505657;  }
header .mainnav li{ width: 100%; height: 70px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-bottom:1px solid #E2E2E2; }
/* header .mainnav li:after{ content:''; display: block; width: 100%; height: 1px; border-radius: 10px; margin: 5px auto 0; transition: all .6s cubic-bezier(.23,1,.32,1); background: #E2E2E2; } */
header .mainnav li:hover:after{ width: 100%;}
header .language{ display: flex; gap:10px; margin: 0 0 10px 0; }
header .language li{ width: fit-content; height: 40px; border-radius: 20px; display: flex; justify-content: center; align-items: center; padding: 0 10px; transition: all .6s cubic-bezier(0.19, 1, 0.22, 1);  }
header .language li.active,header .language li:hover{ background: #2F5597; color: #fff;  }
/* hamburg */
.hamburg-box{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; z-index: 9999; transition: all .3s cubic-bezier(.23,1,.32,1);  }
.hamburg-box .line-box{ width: 20px; height: 20px; position: relative; }
.hamburg-box .line{ width: 20px; height: 2px; border-radius: 30px; background: #0134A1; position: absolute; transition: all .3s cubic-bezier(.23,1,.32,1); }
.hamburg-box li:nth-child(1){ top: 0; }
.hamburg-box li:nth-child(2){ top: 50%; }
.hamburg-box li:nth-child(3){ top: 100%; }
.hamburg-box.active{ z-index: 9999; position: fixed; right: 10px; top: 20px; }
.hamburg-box.active li:nth-child(1),.hamburg-box.active li:nth-child(1){ top: 50%; transform: rotate(45deg); }
.hamburg-box.active li:nth-child(2),.hamburg-box.active li:nth-child(2){ opacity: 0; }
.hamburg-box.active li:nth-child(3),.hamburg-box.active li:nth-child(3){ top: 50%; transform: rotate(-45deg); }
/* kv */
.kv-box{ width: 96vw; height: 420px; margin: 0 auto;  }
/* .kv-slider{ height: 480px; } */
.kv-slider li{ width: 100%; height: 100%; border-radius: 10px; overflow: hidden; position: relative; }
.kv-slider li img{ width: 100%; height: 100%; object-fit: cover; object-position: center bottom;  }
.kv-slider .slick-list, .kv-slider .slick-track{ height: 100%;}
.kv-slider li a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.kv-slider .slick-dots{ display: flex; justify-content: center; align-items: center; gap:10px; margin: 20px 0 0 0; }
.kv-slider .slick-dots li{ width: 15px; height: 15px; border-radius: 50px; background: #fff; cursor: pointer; }
.kv-slider .slick-dots li button{ display: none; }
.kv-slider .slick-dots li.slick-active{ background: #505657; }
.kv-slider .pc{ display: none;}
.kv-slider .mobile{ display: block;}
/* arrow */
.arrow{ display: flex; gap:20px; justify-content: center; align-items: center; color: #CCCCCC; margin: 10px 0 0 0; }
.prev:after{ content:'\e900'; font-size: 4rem; cursor: pointer; }
.next:after{ content:'\e901'; font-size: 4rem; cursor: pointer; }
.prev:hover:after{ color: #505657; }
.next:hover:after{ color: #505657; }

h2{ font-size: 3.2rem; line-height: 1.58; color: #000; font-weight: 300; text-align: center; margin: 0 0 20px 0;  }

/* intro */
.intro-box{ width: 96vw; margin: 100px auto 60px;  display: flex; flex-direction: column; justify-content: center; font-size: 1.8rem; line-height: 1.58; color: #505657; text-align: center; }

/* news */
.news-box{ }
.news-scroll{ width: 96vw; height: 400px; margin: 0 auto 70px; border-radius: 10px; background: #fff;font-size: 1.8rem; line-height: 1.58; color: #505657; box-sizing: border-box; padding: 30px 10px 10px 30px; overflow-y: hidden ; }
.news-list{ width: 100%; height: 100%; overflow-y: scroll ; box-sizing: border-box; padding: 0 20px 0 0; }
.news-list li{ display: flex; flex-direction: column; margin: 0 0 10px 0;  }
.news-list li .col-1{ font-size: 2.3rem; flex-shrink: 0; align-self: flex-start; }
.news-list li .col-2{ display: flex; align-items: start;}
.type01 .news-list li .col-1{ color: #4DA13A; }
.type02 .news-list li .col-1{ color: #CB0018; }
.news-list::-webkit-scrollbar{ background: #fff; width: 5px; margin: 0 30px 0 0;  }
.news-list::-webkit-scrollbar-thumb{ background: #AAB0B1; border-radius: 10px; }

/* sdgs */
.sdgs-action{ width: 96vw; margin: 0 auto;}
.action-list>li{ display: flex; flex-direction: column; justify-content: space-between; margin: 0 0 2vw 0; }
.action-list .single-box{  width: 100%; border-radius: 10px; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; box-sizing: border-box; padding: 50px 0; margin: 0 0 2vw 0; }
.action-list .single-box .tit{ font-size: 2.6rem; font-weight: bold; }
.action-list .single-box .subtit{ font-size: 3.3rem; font-weight: bold; opacity: .3; }
.action-list .color01 .tit,.action-list .color01 .subtit{ color: #4DA13A; }
.action-list .color02 .tit,.action-list .color02 .subtit{ color: #FC9A38; }
.action-list .color03 .tit,.action-list .color03 .subtit{ color: #57A8DB; }
.action-list .sdgs-list{ display: flex; justify-content: center; flex-wrap: wrap; gap:10px; width: 320px; margin: 10px 0 0 0; }
.action-list .multi-list{ width: 100%; display: flex; flex-wrap: wrap; gap:2vw; }
.action-list .multi-list>li{ width: 47vw; aspect-ratio: 1/1; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.8rem; line-height: 1.38; color: #fff; overflow: hidden; }
.action-list .multi-list>li .imgbg{ width: 100%; height: 100%; object-fit: cover;}
.action-list .multi-list>li .txt-box{ text-align: center; margin: 20px 0 0 0; }
.action-list .color01 .multi-list>li{ background: #8AC17A; }
.action-list .color02 .multi-list>li{ background: #FBB35F; }
.action-list .color03 .multi-list>li{ background: #5AACE0; }

/* footer */
footer{ height: 530px; overflow: hidden; position: relative; margin: 80px 0 0 0; background: linear-gradient(to bottom, transparent 20%,#fff 300px,#fff 300px,#fff 100%); }
footer .bg{ width: 100%; height: 100%; object-fit: none; object-position: center 10px; }
.footer-box{ display: flex; flex-direction: column; position: absolute; left: 50%; top: 130px; transform: translate(-50%,0);  }
.footer-box .logo-list{ display: flex; flex-direction: column; gap:15px; align-items: center; margin: 0 0 40px 0; }
.footer-box .logo-list li{ position: relative; }
.footer-box .logo-list li a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.footer-box .flex-col{ display: flex; gap:20px; align-items: center; font-size: 1.4rem; line-height: 1.58; color: #505657; white-space: nowrap;; }
.footer-note{ width: 96vw; max-width: 1000px; font-size: 1.2rem; line-height: 1.58; color: #505657; text-align: center; position: absolute; left: 50%; bottom: 20px; transform: translate(-50%,-50%); }

/* gototop */
.gototop-box{ width: 45px; height: 45px; border-radius: 10px 0 0 10px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.16); position: fixed; right: 0; bottom: 200px; color: #2F5597; display: flex; justify-content: center; align-items: center; cursor: pointer;  }
.gototop-box:after{ content:'\e966'; font-size: 2.4rem; }

/* pupwindow */
.pupwindow-box{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.3); position: fixed; left: 0; top: 0; z-index: 9999; display: none; }
.sdgs-detail{ width:96vw;  border-radius: 10px; box-sizing: border-box; padding: 40px 20px 40px 20px; background: #fff; font-size: 1.6rem; line-height: 1.58; color: #000; position: relative; }
.sdgs-detail .tit{ font-size: 2.4rem; font-weight: bold; color: #4DA13A; text-align: center; }
.sdgs-detail .tit:after{ content: ''; display: block; width: 100%; height: 1px;  margin: 20px 0 30px 0; }
.showpup01 .tit{ color: #4DA13A; }
.showpup02 .tit{ color: #FC9A38; }
.showpup03 .tit{ color: #57A8DD; }
.showpup01 .tit:after{  background: #4DA13A; }
.showpup02 .tit:after{ background: #FC9A38; }
.showpup03 .tit:after{ background: #57A8DD; }
.sdgs-detail .txt-box{ box-sizing: border-box; padding: 0 10px 0 10px; }
.sdgs-detail .num-list{ list-style: decimal;}
.sdgs-detail .num-list li{ margin: 0 0 0 25px;}
.sdgs-detail .icon-close{ font-size: 3rem; color: #505657; position: absolute; right: 20px; top: 20px; cursor: pointer; }
.sdgs-detail .slick-dots{ display: flex; justify-content: center; align-items: center; gap:10px; margin: 50px 0 0 0; }
.sdgs-detail .slick-dots li{ width: 15px; height: 15px; border-radius: 50px; background: #DEDEDE; cursor: pointer; }
.sdgs-detail .slick-dots li button{ display: none; }
.sdgs-detail .slick-dots li.slick-active{ background: #505657; }

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


}





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


}





/* $Pc
--------------------------------------------------------------------------------------*/
@media screen and (min-width: 1025px){

html,body{ min-width: 100%; height: auto; background: linear-gradient(to bottom,  #ffffff 0%,#fff 90px,#f0edea 300px,#f0edea 100%); box-sizing: border-box; padding: 45px 0 0 0; }

/* header */
header{ width: 100%; height: 90px; display: flex; justify-content: space-between; align-items: center; font-size: 1.8rem; color: #000; box-sizing: border-box; padding: 0 2vw 0 2vw; position: fixed; left: 0; top: 0; background: #fff;  }
header h3{ width: auto; display: flex; align-items: center; position: relative; margin: 0 30px 0 0; }
header h3 a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
header nav{ width: auto; display: flex; flex-direction: row; align-items: center; margin: 0 0 0 0; }
header .mainnav{ display: flex; flex-direction: row; gap:30px; margin: 0 30px 0 0; }
header .mainnav li{ cursor: pointer; width: auto; border:none;  }
header .mainnav li:after{ content:''; display: block; width: 0; height: 2px; border-radius: 10px; margin: 5px auto 0; transition: all .6s cubic-bezier(.23,1,.32,1); background: #2F5597; }
header .mainnav li:hover:after{ width: 100%;}
header .language{ display: flex; gap:10px; margin: 0 0 10px 0; }
header .language li{ height: 40px; border-radius: 20px; display: flex; justify-content: center; align-items: center; padding: 0 10px; transition: all .6s cubic-bezier(0.19, 1, 0.22, 1); white-space: nowrap;  }
header .language li.active,header .language li:hover{ background: #2F5597; color: #fff;  }
/* hamburg */
.hamburg-box{ width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; cursor: pointer; position: relative; z-index: 9999; transition: all .3s cubic-bezier(.23,1,.32,1); display: none;  }
.hamburg-box .line-box{ width: 20px; height: 20px; position: relative; }
.hamburg-box .line{ width: 20px; height: 2px; border-radius: 30px; background: #1F1F1F; position: absolute; transition: all .3s cubic-bezier(.23,1,.32,1); }
.hamburg-box li:nth-child(1){ top: 0; }
.hamburg-box li:nth-child(2){ top: 50%; }
.hamburg-box li:nth-child(3){ top: 100%; }
.hamburg-box.active{ z-index: 9999; position: fixed; right: 10px; top: 20px; }
.hamburg-box.active li:nth-child(1),.hamburg-box.active li:nth-child(1){ top: 50%; transform: rotate(45deg); }
.hamburg-box.active li:nth-child(2),.hamburg-box.active li:nth-child(2){ opacity: 0; }
.hamburg-box.active li:nth-child(3),.hamburg-box.active li:nth-child(3){ top: 50%; transform: rotate(-45deg); }

/* kv */
.kv-box{ width: 96vw; height: 560px; margin: 0 auto;  }
.kv-slider{ height: 530px; }
.kv-slider li{ width: 100%; height: 100%; border-radius: 10px; overflow: hidden; position: relative; }
.kv-slider li img{ width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
.kv-slider .slick-list, .kv-slider .slick-track{ height: 100%;}
.kv-slider li a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.kv-slider .slick-dots{ display: flex; justify-content: center; align-items: center; gap:10px; }
.kv-slider .slick-dots li{ width: 15px; height: 15px; border-radius: 50px; background: #fff; cursor: pointer; }
.kv-slider .slick-dots li button{ display: none; }
.kv-slider .slick-dots li.slick-active{ background: #505657; }
.kv-slider .pc{ display: block;}
.kv-slider .mobile{ display: none;}

h2{ font-size: 3.6rem; line-height: 1.58; color: #000; font-weight: 300; text-align: center; margin: 0 0 30px 0;  }

/* intro */
.intro-box{ width: 96vw; max-width: 1100px; margin: 50px auto;  display: flex; flex-direction: column; justify-content: center; font-size: 1.8rem; line-height: 1.58; color: #505657; text-align: center; }

/* news */
.news-box{ }
.news-scroll{ width: 96vw; max-width: 1100px; height: 260px; margin: 0 auto 70px; border-radius: 10px; background: #fff;font-size: 1.8rem; line-height: 1.58; color: #505657; box-sizing: border-box; padding: 30px 10px 10px 30px; overflow-y: hidden ; }
.news-list{ width: 100%; height: 100%; overflow-y: scroll ; box-sizing: border-box; padding: 0 20px 0 0; }
.news-list li{ display: flex; flex-direction: row; margin: 0 0 10px 0;  }
.news-list li .col-1{ font-size: 2.3rem; flex-shrink: 0; align-self: flex-start; }
.news-list li .col-2{ display: flex; align-items: start;}
.news-list li .col-2:before{ content:''; display: block; width: 1px; height: 100%; min-height: 25px; background-color: #8C9293; margin: 0 15px;   }
.type01 .news-list li .col-1{ color: #4DA13A; }
.type02 .news-list li .col-1{ color: #CB0018; }
.news-list::-webkit-scrollbar{ background: #fff; width: 5px; margin: 0 30px 0 0;  }
.news-list::-webkit-scrollbar-thumb{ background: #AAB0B1; border-radius: 10px; }

/* sdgs */
.sdgs-action{ width: 96vw; max-width: 1100px; margin: 0 auto;}
.action-list>li{ display: flex; flex-direction: row; justify-content: space-between; margin: 0 0 15px 0; }
.action-list>li:nth-child(2){ flex-direction: row-reverse;}
.action-list .single-box{  width: 540px; aspect-ratio: 1/1; border-radius: 10px; background: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 0 0 0; }
.action-list .single-box .tit{ font-size: 4rem; font-weight: bold; }
.action-list .single-box .subtit{ font-size: 5rem; font-weight: bold; opacity: .3; }
.action-list .color01 .tit,.action-list .color01 .subtit{ color: #4DA13A; }
.action-list .color02 .tit,.action-list .color02 .subtit{ color: #FC9A38; }
.action-list .color03 .tit,.action-list .color03 .subtit{ color: #57A8DB; }
.action-list .sdgs-list{ display: flex; justify-content: center; flex-wrap: wrap; gap:10px; width: 320px; margin: 50px 0 0 0; }
.action-list .multi-list{ width: 540px; display: flex; flex-wrap: wrap; gap:20px; }
.action-list .multi-list>li{ width: 260px; aspect-ratio: 1/1; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2.4rem; line-height: 1.38; color: #fff; overflow: hidden; transition: all .6s cubic-bezier(.23,1,.32,1); cursor: pointer; }
.action-list .multi-list>li .imgbg{ width: 100%; height: 100%; object-fit: cover;}
.action-list .multi-list>li .txt-box{ text-align: center; margin: 20px 0 0 0; }
.action-list .color01 .multi-list>li{ background: #8AC17A; }
.action-list .color02 .multi-list>li{ background: #FBB35F; }
.action-list .color03 .multi-list>li{ background: #5AACE0; }
.action-list .color01 .multi-list>li:hover{ background: #61AC4B; }
.action-list .color02 .multi-list>li:hover{ background: #F89929; }
.action-list .color03 .multi-list>li:hover{ background: #2496DE; }

/* footer */
footer{ height: 350px; overflow: hidden; position: relative; margin: 80px 0 0 0; }
footer .bg{ width: 100%; height: 100%; object-fit: cover; }
.footer-box{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; position: absolute; left: 50%; bottom: 100px; transform: translate(-50%,0); top:auto;  }
.footer-box .logo-list{ display: flex; flex-direction: row; gap:25px; margin: 0 80px 0 0; }
.footer-box .logo-list li{ position: relative; }
.footer-box .logo-list li a{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; }
.footer-box .flex-col{ display: flex; gap:20px; align-items: center; font-size: 1.4rem; line-height: 1.58; color: #505657; white-space: nowrap;; }
.footer-note{ width: 96vw; max-width: 1000px; font-size: 1.4rem; line-height: 1.58; color: #505657; text-align: center; position: absolute; left: 50%; bottom: 10px; transform: translate(-50%,-50%); }

/* gototop */
.gototop-box{ width: 70px; height: 70px; border-radius: 10px 0 0 10px; background: #fff; box-shadow: 0 3px 6px rgba(0,0,0,.16); position: fixed; right: 0; bottom: 200px; color: #2F5597; display: flex; justify-content: center; align-items: center; cursor: pointer;  }
.gototop-box:after{ content:'\e966'; font-size: 2.4rem; }

/* pupwindow */
.pupwindow-box{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,.3); position: fixed; left: 0; top: 0; z-index: 9999; display: none; }
.sdgs-detail{ width: 700px;  border-radius: 10px; box-sizing: border-box; padding: 60px 20px 60px 20px; background: #fff; font-size: 1.8rem; line-height: 1.58; color: #000; position: relative; }
.sdgs-detail .tit{ font-size: 3.6rem; font-weight: bold; color: #4DA13A; text-align: center; }
.sdgs-detail .tit:after{ content: ''; display: block; width: 100%; height: 1px;  margin: 20px 0 30px 0; }
.showpup01 .tit{ color: #4DA13A; }
.showpup02 .tit{ color: #FC9A38; }
.showpup03 .tit{ color: #57A8DD; }
.showpup01 .tit:after{  background: #4DA13A; }
.showpup02 .tit:after{ background: #FC9A38; }
.showpup03 .tit:after{ background: #57A8DD; }
.sdgs-detail .txt-box{ box-sizing: border-box; padding: 0 10px 0 10px; }
.sdgs-detail .num-list{ list-style: decimal;}
.sdgs-detail .num-list li{ margin: 0 0 0 25px;}
.sdgs-detail .icon-close{ font-size: 3rem; color: #505657; position: absolute; right: 20px; top: 20px; cursor: pointer; }
.sdgs-detail .slick-dots{ display: flex; justify-content: center; align-items: center; gap:10px; margin: 50px 0 0 0; }
.sdgs-detail .slick-dots li{ width: 15px; height: 15px; border-radius: 50px; background: #DEDEDE; cursor: pointer; }
.sdgs-detail .slick-dots li button{ display: none; }
.sdgs-detail .slick-dots li.slick-active{ background: #505657; }

}





/* $1025~1279
--------------------------------------------------------------------------------------*/
@media screen and (min-width:1025px) and (max-width:1279px){


}