@import url("reset.css");
@import url("styleShare.css");
@import url("animate.min.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined");
@import url('https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&family=Noto+Sans+TC:wght@100..900&display=swap');
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 2.4rem;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}


.chiron-goround-tc-<uniquifier> {
  font-family: "Chiron GoRound TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.noto-sans-tc-<uniquifier> {
  font-family: "Noto Sans TC", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


*{box-sizing:border-box;transition-duration:0.3s;}
html{ font-size: 62.5%; /* 將根元素的預設文字大小改為 10px。(10 / 16 * 100% = 62.5%) */}
html , body{width: 100%; height: 100%;font-family:"Chiron GoRound TC", Arial}
body{font-size:1rem;background-color:#772d24 }

/* 最外框 */
#WARPPER{}
.autobox{width: 100%; max-width:1600px;margin: auto; position: relative;}
.bgLine{background: linear-gradient(to left,rgba(124,44,35,0.5) 0%,rgba(124,44,35,0.8) 50%, rgba(124,44,35,1) 100%);min-height:100%;}
.no-scroll { overflow: hidden;height: 100%;}

/*背景圖*/
.indexBg{display:flex; width:100%;height: 100%; min-height:600px;flex-direction: column;justify-content: space-between; background:url("../images/bg.jpg") 70% bottom no-repeat;background-attachment: fixed;background-size:auto 110%;}
.mainBg{display:flex; width:100%;height: auto; min-height:100%;flex-direction: column; background: url("../images/bg.jpg") 10vw top no-repeat;background-attachment: fixed;background-size:auto 100%;}
 .star {
      position: fixed;
      width: 20px;
      height: 20px;
      background-image: url('../images/star-image.png'); /* 替換成你的星星圖片路徑 */
      background-size: cover;
      animation: twinkling 3s infinite;z-index:99
    }

    @keyframes twinkling {
      0%, 100% {
        opacity: 1;
      }
      50% {
        opacity: 0;
      }
		 /* 在螢幕寬度小於等於 768px 時，減少星星數量 */
      .star {
        display: none;
      }
    }

/* 頁首 */
#HEADER{}
#INDEXHEADER{display: flex;flex-direction: column;align-items: flex-start;justify-content: flex-start;padding-left:5vw;}
#INDEXHEADER>img:first-child{width:8vw}
#INDEXHEADER > a{display: flex;flex-direction: column;width:50vw;padding-top:2rem;border-bottom:rgba(239,232,222,1.00) 4px solid;}
#INDEXHEADER > a img {width:100%}
#INDEXHEADER > a img:last-child{display: none}

/*內頁首*/
#MAINHEADER{display: flex;height: 100%; flex-direction: column;align-items: flex-start;justify-content: flex-start;padding-left:5vw;position: fixed;top: 0;left: 0;background: url("../images/bg_Line.png") right 90% no-repeat;background-size:100% auto}
#MAINHEADER>img:first-child{width:8vw;position: relative;z-index: 999}
#MAINHEADER > a{display: flex;flex-direction: column;width:8vw;padding-top:2rem;}
#MAINHEADER > a img {width:100%}
#MAINHEADER > a img:last-child{display: none}




/* 選單 */
.main_column nav{position: fixed;justify-content: flex-start; width: 100%; left:13vw;top: 0;border-bottom: rgba(255,255,255,0.2) 1px solid;z-index: 110}

#TOPNAV{display: flex;width: 50%;justify-content: center; margin: 0 0 0 5vw;padding: 1rem;text-shadow: 2px 2px 10px rgba(0,0,0,0.5)}
#TOPNAV li,#TOPNAV li a{display: flex;align-items: center;justify-content: center;font-family: "Noto Sans TC"}
#TOPNAV li:first-child{position: absolute;right:0;top:2rem; background-color: rgba(118,45,38,1.00);border-radius: 10rem 0 0 10rem;padding-left: 2rem}
#TOPNAV li:first-child a{font-size:1.2vw;}
#TOPNAV li:first-child a span{font-size:2vw;padding-right: 0.5rem}
#TOPNAV li a{font-size:2vw;font-weight: 800;color:rgba(239,232,222,1.00);padding:0.5vw 1.5rem;}

.main_column{display: flex;align-items: flex-start;flex-direction: column;margin-left: 13vw;}
.main_column #TOPNAV{width:100%;margin: 0;padding-left:3vw;justify-content:flex-start;}
.main_column #TOPNAV li a{font-size:2rem;}
.main_column #TOPNAV li:first-child{position: static; background-color:transparent;border-radius:0;padding-left: 2rem; border-right: rgba(255,255,255,0.2) 1px solid;}
.main_column #TOPNAV li:first-child a{color:rgba(232,208,174,1.00)}
.main_column #TOPNAV li:first-child a span{font-size:2rem;}

.all_Tab li a{background-image: linear-gradient(#ca8e36, #ca8e36);
  background-position: center bottom;
  background-size: 0 1px;
  background-repeat: no-repeat;
  transition: background-size 0.15s;}

.all_Tab li a:hover{background-size: 100% 4px;;color:#ca8e36}

/* 內容 */
#CONTENT{width: 100%;padding:0 4vw;position: relative;z-index: 100}
.wordbox{display: block; width: 100%;max-width: 1200px;height:100%;min-height:800px;  padding:4rem;font-size: 2rem;color: rgba(255,255,255,1.00);line-height:1.6}
.wordbox p,.wordbox ul,.wordbox table{padding:0 0 2rem 0}
.wordbox h2{display: flex;align-items: center; margin:4rem 0 2rem 0;color:rgba(232,208,174,1.00);}
.wordbox h2 span{font-size:3rem;padding-right:1rem}
.wordbox h3{display: flex;align-items: center; padding:1rem 2rem 1rem 0; margin: 2rem; color:rgba(232,208,174,1.00);font-size:5rem;font-weight: 300;border-right:rgba(232,208,174,1.00)  1px solid;white-space:nowrap;text-shadow: 2px 2px 10px rgba(0,0,0,0.5)}
.wordbox h4{display: flex;align-items: center; margin:4rem 0 2rem 0;padding-left: 1rem; color:rgba(225,214,197,1.00);font-size:2.2rem;border-left:rgba(232,208,174,1.00) 1rem solid}
.wordbox a{color:rgba(232,208,174,1.00);border-bottom: rgba(232,208,174,1.00) 1px solid;word-break: break-all;}
.wordbox a span{font-size:2rem;}
.wordbox hr{border: none;border-bottom: rgba(255,255,255,0.5) 1px solid;margin:4rem 0}

.slogan{display: flex;align-items: center;width: 100%;padding:5rem 2rem 1rem 0;margin-bottom: 4rem; font-size: 1.8rem;color:rgba(232,208,174,1.00);font-weight: 800}
.slogan ul{margin: 0;padding: 0}
.slogan ul li{padding-right: 1rem;}
.slogan ul li br{display:none}

.focus{color: rgba(255,202,0,1.00);font-weight: 800;}
.focus span{font-size: 1.8rem;padding-right: 1rem}

.tableBox{width: 100%;border:rgba(232,192,133,1.00) 4px solid;background: linear-gradient(to top,rgba(232,192,200,0.5) 0%,rgba(232,192,100,0.5) 100%);}
.tableBox th{border:rgba(232,192,133,1.00) 1px solid;padding:1rem  2rem;background-color: rgba(0,0,0,0.5)}
.tableBox td{border:rgba(232,192,133,1.00) 1px solid;padding:1rem  2rem}
.tableLastTd{width:8rem;text-align: center;white-space:nowrap;}
.tableLastTd100{width:11rem;text-align: center;white-space:nowrap;}
.table_nowrap{white-space:nowrap;width:18rem}
.tableBoxRight{text-align: right}


.colorlist { text-align: center; }
.colorlist li{ display: inline-block;width: 5rem; height:5rem;border:rgba(255,255,255,1) 2px solid ;}

.publishTime{display: flex;width: 100%;border-top: rgba(255,255,255,0.1) 1px solid ;padding: 1rem;font-size: 1.5rem;}

/* 面包屑 */
#POS{ display:block;  font:0.8rem  Arial , "新細明體";line-height:40px;}

/* 頁尾 */
#FOOTER{display: flex;align-items:flex-start;width: 100%;padding: 2rem 0 0 0;color:#efe8de;font-size:1.8rem;position: relative;flex-direction: column;}
#FOOTER p{width: 100%;text-align: center; background-color: rgba(0,0,0,0.5);padding: 0.5rem 1rem;}
.unit{display: flex;width:80%;align-items: center;justify-content: flex-start; flex-wrap: wrap;padding-left:5vw;}
.unit ul{display: flex;align-items: center;justify-content:center;flex-wrap: wrap;padding-bottom: 2rem;padding-left:1rem}

.unit ul li{display: flex;align-items: center;justify-content: flex-start;flex-wrap: wrap;padding: 0 0.5rem}
.unit ul li img{display: block; width: auto;height:4rem;}


.searchLife{display:flex;align-items: center;justify-content: center;color: rgba(118,45,38,1.00);font-size: 2rem;position: absolute;right: 2rem;background-color: rgba(255,255,255,1.00);font-weight: 800;border: rgba(118,45,38,1.00) 4px solid;overflow: hidden;padding-right: 1rem;text-shadow: 0 0 0 rgba(118,45,38,0)}
.searchLife span{ color: rgba(255,255,255,1.00); background-color: rgba(118,45,38,1.00);font-size: 3rem;padding: 0.5rem;margin-right: 1rem }
.main_column .searchLife{top:1rem;position: fixed;padding: 0}
#TOPNAV li .searchLife{color: rgba(118,45,38,1.00);padding:0 1rem 0 0;}

/*回最上頁*/
.goTOP{ display: flex; font-size:5rem; color: rgba(232,192,133,0.8); position:fixed; right:1rem; bottom:4rem; opacity: 0.5; z-index:1002}

/*選單XX*/
.menu-wrapper {
  display: none;
  position: fixed;
	top:3rem;
  right: 2rem;
  margin: auto;
  width: 40px;
  height: 5px;
  cursor: pointer;
}

.hamburger-menu,
.hamburger-menu:after,
.hamburger-menu:before {
  width: 40px;
  height: 5px;border-radius: 10px
}

.hamburger-menu {
  position: relative;
  transform: translateY(25px);
  background:  rgba(232,208,174,1.00);
  transition: all 0ms 300ms;
}
.hamburger-menu.animate {
  background: rgba(255, 255, 255, 0);
}

.hamburger-menu:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 15px;
  background:  rgba(232,208,174,1.00);
  transition: bottom 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu:after {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  background: rgba(232,208,174,1.00);
  transition: top 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:after {
  top: 0;
  transform: rotate(45deg);
  transition: top 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}

.hamburger-menu.animate:before {
  bottom: 0;
  transform: rotate(-45deg);
  transition: bottom 300ms cubic-bezier(0.23, 1, 0.32, 1), transform 300ms 300ms cubic-bezier(0.23, 1, 0.32, 1);
}



/*隱藏*/
/*.showhide{display:block}*/
#TOPNAV .hideshow{display: none}




/*20241030最新消息*/
.masterList{display: flex;flex-direction: column;margin-bottom:10rem}
.masterList li{display: flex;padding: 1rem 0;flex-wrap: wrap}
.masterList div img{width:10rem;height: 10rem; border-radius:10rem}

.masterListR,.masterListL{display: flex;}
.masterListR{flex: 0 1 40%;padding: 0 1rem;justify-content:space-between;align-items: center}
.masterListR span{display: flex;flex-direction: column; align-items: center;justify-content: center; text-align: center; font-size: 1.2rem;flex-wrap: wrap;}

.masterListL{flex: 0 1 60%;flex-direction: column;justify-content: center;padding-left: 5rem}
.masterListL h5{display: flex;align-items: center;font-size: 2.5rem;padding-bottom: 1rem}
.masterListL p{padding:0}

.masterx2{display: flex;align-items: center;justify-content: center;color: rgba(255,255,255,1.00);background-color: rgba(89,0,1,1.00); padding: 1rem;font-size: 1rem;width:6rem;flex-wrap: wrap;text-align: center}


.youtube-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
  height: 0;
}

.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


@media (min-width: 1025px) {
	nav{display: block}
	/* 樣式適用於寬度大於等於 1024 像素的設備 */}

@media (min-width: 768px) and (max-width: 1024px) {
	.indexBg{display:flex; width:100%;height: auto; min-height:100%;background:url("../images/bg_M.jpg") 55% 50% no-repeat;background-size:cover;padding-left:0;}
	#INDEXHEADER>img:first-child{width:20rem}
	#INDEXHEADER > a{display: flex;flex-direction: column;width:70vw;padding-top:2rem;border-bottom:rgba(239,232,222,1.00) 4px solid;}
	#TOPNAV{flex-direction: column;}
	#TOPNAV li:first-child{top:4rem;padding:0 4rem;background-color:transparent;border-radius:0;}
	#TOPNAV li:first-child a{font-size:3rem;}
	#TOPNAV li:first-child a span{font-size:5rem;padding-right:1rem}
	#TOPNAV li a{font-size:4rem;padding:1rem 0;}
	
	.wordbox h3{white-space:wrap;}
	
	
	.main_column #TOPNAV{flex-direction: row;padding-left: 0}
	.main_column #TOPNAV li a,.main_column #TOPNAV li:first-child a{font-size:2rem;padding:2rem 1rem}
	.main_column #TOPNAV li:first-child{padding: 0}

	
	
	#FOOTER{width: 100%;padding:1rem 0 0 0;font-size:2.5rem;position:static;}
	#FOOTER p{width: 100%; padding: 1rem;border-radius:0;text-align:justify;}
	.searchLife{font-size:2.5rem;position: absolute;top:200px; right:35%;border: rgba(118,45,38,1.00) 2px solid;overflow: hidden;padding-right: 1rem}
	.searchLife span{ font-size:3.5rem;padding: 0.5rem; }
	.main_column #TOPNAV li .searchLife{top:8rem;right:13vw;position: absolute;color: rgba(118,45,38,1.00);padding:0 1rem 0 0;}

	.table_nowrap{white-space:pre-wrap;width: auto}
}


@media (max-width: 767px) { 
	.menu-wrapper {display: block;z-index: 1100}
	.indexBg{display:flex; width:100%;height: auto; min-height:100%;background:url("../images/bg_M.jpg") 55% 70% no-repeat;background-size:cover;padding-left:0;}
	#INDEXHEADER{padding-left:4rem;}
	#INDEXHEADER>img:first-child{width:10rem}
	#INDEXHEADER > a img:nth-child(1),#INDEXHEADER > a img:nth-child(2),#INDEXHEADER > a img:nth-child(3){display: none}
	#INDEXHEADER > a img:last-child{display: block}
	#INDEXHEADER > a{border-bottom:none}
	
	#MAINHEADER{display: flex;height: 100%; flex-direction: row;align-items: flex-start;justify-content: flex-start;padding-left:0;position: absolute;top: 0;left: 0;background: url("../images/bg_Line.png") -10% top no-repeat;background-size:50% auto}
	#MAINHEADER>img:first-child{width:6rem;position: relative;z-index: 999}
	#MAINHEADER > a{display: flex;flex-direction: column;width:20rem;padding:2rem 0 0 1rem;}
	#MAINHEADER > a img:first-child{display: none}
	#MAINHEADER > a img:last-child{display: block}
	.wordbox h2{display:block;}
	.wordbox h3{white-space:wrap;}
	
	.main_column{margin-left:0;padding-top: 10rem}
	#CONTENT{padding:0}
	.wordbox{padding:2rem;}
	.wordbox h3{display: flex;align-items: center; padding:1rem 0 0; margin-left:0; color:rgba(232,208,174,1.00);font-size:4rem;font-weight: 300;border-right:none}
	
	nav{display: none;position: relative;z-index: 1009}
	#TOPNAV{display: flex;width:100%;height: 100%;align-items: center; justify-content: center;flex-direction: column; margin:0;padding:0;position: fixed;background-color: rgba(0,0,0,0.8);top: 0;left: 0}
	#TOPNAV li:first-child{display: flex;flex-direction: column; position:static; background-color:transparent;border-radius:0;padding-left:0;border-bottom: rgba(255,255,255,0.5) 2px solid}
	#TOPNAV li:first-child a{font-size:3rem;color:rgba(232,208,174,1.00)}
	#TOPNAV li:first-child a span{display: none}
	#TOPNAV li a{font-size:3rem;padding:1.5rem 0;}
	#TOPNAV li:last-child{margin-top: 4rem}
	
	.main_column #TOPNAV{justify-content: center}
	.main_column #TOPNAV li a,.main_column #TOPNAV li:first-child a{font-size:3rem;padding:1.5rem 0;}
	.main_column #TOPNAV li:first-child{border-right: none;padding-left: 0}
	
	#FOOTER{width: 100%;padding:1rem 0 0 0;font-size:1.3rem;position:static;}
	#FOOTER p{text-align: left}
	.unit{width: 100%; padding:1rem 1rem 0 1rem ;margin-top: 2rem; background-color: rgba(255,255,255,0.1)}
	.unit ul{display: flex;width: 100%;align-items: center;justify-content: flex-start;flex-wrap: wrap;padding-bottom: 2rem}
	.unit ul li{display: flex;align-items: center;justify-content: center;flex-wrap: wrap;padding: 0 0.5rem;text-align: center;}
	.unit ul li:first-child{width: 100%;padding-bottom: 1rem;justify-content: flex-start}
	#TOPNAV li .searchLife{font-size:2rem;position:static;border: rgba(118,45,38,1.00) 2px solid;overflow: hidden;padding-right: 1rem}
	.unit ul li img{height: 3.8rem}
	.searchLife span{ font-size:2.5rem;padding: 0.5rem; }
	.main_column #TOPNAV li .searchLife{color: rgba(118,45,38,1.00);padding:0 1rem 0 0; font-size:3rem;}
	.main_column .searchLife{position: static;}

	
	.slogan{flex-direction: column;align-items: flex-start;padding-top: 0;padding-right: 0;position: relative;z-index: 999}
	.slogan ul li{font-weight: 300; font-size:1.8rem}
	.slogan ul li br{display: block}
	
	.tableBox{font-size: 1.5rem}
	.wordbox table p{padding:0 0 2rem 0}
	.table_nowrap{white-space:pre-wrap;width: auto}
	.tableBox th,.tableBox td{padding:0.5rem }
	.tableLastTd{width:8rem;text-align: center;white-space:nowrap;}
    .tableLastTd100{width:6rem;text-align: center;white-space:nowrap;}
	
	/*隱藏*/
	.showhide{display:none}
	#TOPNAV .hideshow{display:block }
	
	
	/**/
	.masterListR,.masterListL{flex: 0 1 100%;padding: 0}
	.masterListR {justify-content: center;align-items: flex-start}
	.masterListR span{padding:0.5rem;}
	.masterListR span:first-child{display: none}
	
	.masterListL h5{font-size:2.2rem}
	.masterListL p{font-size: 1.5rem}
    .wordbox ul{padding:0 }

}

@media print {
    /* 樣式適用於列印時的樣式設定 */
}