@charset "utf-8";
body{
	font-family: "微軟正黑體","Arial Unicode MS", san-serif;
	letter-spacing:1px;
	font-size:1em;
	margin:0;
}
*{ box-sizing:border-box; }
*:focus { outline: #ff1100 dashed 3px!important; outline-offset: -3px !important;}
button, input, select, textarea {
    font-size: 1em;
    margin: 0;
    vertical-align: baseline;
    *vertical-align: middle;
	font-family: "微軟正黑體","Arial Unicode MS", san-serif;
}
img{ width:100%; }
a{ color:#555;}
/*----- 跳到主內容按鈕+主內容錨點樣式 -----*/
a#gotocenter {
	z-index: -999;
	position: absolute;
	padding: 1em;
	top: 0;
	background: #fff;
	color: #009688;
	opacity: 0;
}
a#gotocenter:focus {
	z-index: 999;
	opacity: 1;
}
.anchor-fix {
	/*visibility:hidden;*/
    position:absolute;
    top: 0;/*錨點位差*/
}

/*----- 回上方按鈕樣式 -----*/
.goTop a{
    background: rgba(0, 0, 0, .3);
	color:#fff;
    padding: 1em;
    position: fixed;
    right: 1em;
    bottom: 1em;
    z-index: 500;
}
.goTop a .fa{
	font-size:1.5em;
}
.goTop a:hover{
    background: rgba(0, 0, 0, .7);
}
.goTop span { display:none; }

/*----- 字級選項樣式 -----*/
/*.animate {
  -webkit-transition: font-size .3s;
  -moz-transition: font-size .3s;
  -o-transition: font-size .3s;
  -ms-transition: font-size .3s;
  transition: font-size .3s;
}
a:focus + .fontSizeControl { display: block;}*/

.fontSizeControl {
	display: none;
    text-align: center;
    background: rgba(0,0,0,.5);
    padding: .5em;
}
.fontSizeControl a {
	display: inline-block;
    height: 25px;
    vertical-align: middle;
}
.fontSizeControl a img {
    height: 100%;
    width: auto;
}
.fontSizeControl button {
	display: block;
    margin: .25em auto;
    width: 100%;
    border: 0;
	color:#fff;
    background: #333;
}
.resize-sm { font-size: .85em; }
.resize-md { font-size: 1em; }
.resize-lg { font-size: 1.25em; }

.socialLogin{
	margin-top:.5em;
    display: none;	
}
.socialLogin .fa{
	margin-right:.5em;
}
.path{
	font-size:1.2em;
    margin-bottom: 4px;
}
.fbBtn{
	background: #3F51B5;
    border: 1px solid #2b3b90;
}
.googleBtn{
	background: #d45e56;
    border: 1px solid #b1322d;
}
.fbBtn:hover, .fbBtn:focus{
	background: #2b3b90;
}
.googleBtn:hover, .googleBtn:focus{
	background: #b1322d;
}

/*----- 版型樣式 -----*/
.gytfWrap{
    width: 100%;
    margin: auto;
    position: relative;
}
.webWrap{
	width:85%;
	margin:auto;	
    position: relative;
}
.newsWrap{
	padding-left:1%;
}
.mainContent{
	position:relative;	
}
.onPc{ visibility:visible;}
.onMobile{ visibility:hidden; display:none;}
.mmMenu ul{
	text-align:center;
}
.mmMenu li{
	display:inline-block;
	margin:.25em 0;
	width:30%;
}
.mmMenu li.logoutBtn{
	width:93%;
}
.mmMenu .loginBtn {
	width: 100%;
    font-size: 1.15em;
    border-radius: 0;
    height: 4em;
    white-space: inherit;
    vertical-align: top;
}
.mmMenu li.logoutBtn .loginBtn{
    height: 3em;
}
.txtC{ text-align:center;}
.innerMMBlock{
	position: fixed;
    z-index: 100;
    background: rgba(157, 157, 157, 0.5);
    left: 0;
    top: 12vh;
    padding: 1em;
    border-radius: 0 .5em .5em 0;
}
.innerMMBlock li{
	display:block;
	margin:.25em 0;
	width:100%;
}
.innerMMBlock.mmMenu .loginBtn {
    display: block;
    width: 3em;
    height: auto;
    padding: .5em 0;
}

/*----- header樣式 -----*/
header {
    position: relative;
    top: 0;
    background: #ffffff;
    padding: .5em 0;
}
.mainLogo { margin: 0; display: block; }
.mainLogo a {
    position: relative;
    left: 0;
    height: 70px;
    width: auto;
}
.mainLogo img {
    height: 100%;
    width: auto;
}
.navMenu {
    position: absolute;
    top: 10%;
    right: 75px;
	z-index: 100;
}
.navMenu li{
	display:inline-block;
	vertical-align:top;
    background: #35b5aa;
}
.navMenu li:nth-child(3n){
    background: #5dc4bb;
}
.navMenu li:nth-child(3n-1){
    background: #9adad4;
}
.navMenu a {
    display: block;
    width: 70px;
    height: 70px;
	text-align:center;
	padding:1em;
	font-size:.85em;
    color: #232323;
    background: rgba(255,255,255, 0);
	transition:all ease-out .2s;
}
.navMenu li:first-child{
    background:none;
}
.navMenu li:first-child a{
    color: #ccc;
    width: auto;
    height: auto;
	padding:0;
}
.navMenu li:first-child a:hover, .navMenu li:first-child a:focus{
    background:none;
}
.navMenu li a:hover, .navMenu li a:focus{
    background: rgba(255,255,255, .2);
}
.navMenu li .fa, .navMenu li img{
    font-size: 1.25em;
    display: block;
    position: relative;
    top: -.25em;
}
.navMenu li.fb-btn{
    background: #78a0d9;
    font-size: 1.25em;
}
.navMenu li.fb-btn .fa{
	top:.5em;
}
.navMenu li.langBox, .navMenu li.resizeBox{
    background: #e8901d;
}
.navMenu li.langBox.keep{
    background: #e8781d;
}
.navMenu li img{
	width:20px;
	margin:auto;
}
.navMenu li.langBox a, .navMenu li.resizeBox a{
	display: flex;
    flex-direction: column;
}
#openMM{
	color:#fff;
	font-size:1.5em;	
}
#menuBtn{
    display: flex;
    width: 70px;
    height: 70px;
    text-align: center;
    padding: 1em;
    /*font-size: 1.5em;*/
		font-size: .9em;
    color: #232323;
    background: #51b9ae;
    transition: all ease-out .2s;
    position: absolute;
    top: 10%;
    right: 0;
    justify-content: center;
    align-items: center;
		flex-wrap: wrap;	
}
.menuList {
	background: #ffffff;
    padding: .5em;
    position: absolute;
    top: 100%;
    right: -75px;
    display: none;
    width: auto;
    z-index: 200;
    margin-top: .5em;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
}
.menuList li {
    display: block;
}
.menuList li a {
	width: auto;
    height: auto;
    display: block;
    color: #016e74;
    font-size: 1.25em;
    padding: .5em;
    background: #fff;
    border-bottom: 1px dashed #ccc;
    font-weight: bold;
	text-align:left;
}
.menuList li a:hover, .menuList li a:focus {
	color: #ffffff;
    background: #109199;
}
.menuList li:last-child a {
    border-bottom: 0;
}

.hamburger {
padding: 0;
cursor: pointer;
transition-property: opacity, filter;
transition-duration: 0.15s;
transition-timing-function: linear;
font: inherit;
color: inherit;
text-transform: none;
background-color: transparent;
border: 0;
margin: 0;
overflow: visible; }
.hamburger:hover {
opacity: 0.7; }

.hamburger-box {
width: 40px;
height: 24px;
display: inline-block;
position: relative; }

.hamburger-inner {
display: block;
top: 50%;
margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 20px;
height: 3px;
background-color: #fff;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -6px; }
.hamburger-inner::after {
bottom: -10px; }

.hamburger--collapse .hamburger-inner {
top: auto;
bottom: 10%;
right: 10%;
transition-duration: 0.13s;
transition-delay: 0.13s;
transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {
top: -12px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {
transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
transform: translate3d(0, -10px, 0) rotate(-45deg);
transition-delay: 0.22s;
transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {
top: 0;
opacity: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {
top: 0;
transform: rotate(-90deg);
transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
STEP3

@media only screen and (min-width: 1000px) and (max-width: 1340px){
.mainLogo{
	margin: auto;
    text-align: center;
}
.navMenu {
    position: relative;
    text-align: center;
}
}
/*----- pad Style -----*/
@media only screen and (min-width: 430px) and (max-width: 1024px){
.mainLogo{
	margin: auto;
    text-align: center;
}
.navMenu {
	display:none;
}
}
/*----- phone Style -----*/
@media only screen and (max-width: 429px){
#openMM {
    color: #2baa9f;
	display: block;
}
.innerMMBlock{
    position: relative;
    top: 0;
    width: 85%;
    margin: auto;
    border-radius: .5em;
    text-align: center;
    padding: .5em;
	background: rgba(157, 157, 157, 0.25);
}
.innerMMBlock.mmMenu .loginBtn, .mmMenu li.logoutBtn  .loginBtn{
    width: 100%;
    height: auto;
    padding: .5em 0;
}
.mmMenu li.logoutBtn {
    padding: 0;
	height: auto;
    width: 100%;
}
#menuBtn {
	width: 65px;
    height: 65px;
    font-size: .9em;
    padding: 0.5em 1em;
    top: 5%;
    right: 2%;
}
.menuList {
    right: 0;
}
}
/*----- footer樣式 -----*/
footer {
    margin: 2em 0 0 0;
	position: relative;
}
footer .bottomAccesskey {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
}
.fatfooter{
	background:#e5e5e5;
	padding:00;
	text-align:center;
}
.slideArrow {
    font-size: 1.5em;
    position: relative;
    top: -1em;
    background: #e5e5e5;
    display: block;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    margin: auto;
    line-height: 1.5;
}
.slideArrow span { display:none; }
.f-sitemap{
	font-size: 1.25em;
    text-align: left;
    margin-left: 1.5em;
    padding-bottom: 2em;
}
.f-sitemap a{
	display: inline-block;
    vertical-align: top;
    width: 19%;
    font-weight: bold;
    text-align: left;
    padding: 1em;
    background: #d9d8d8;
	color:#333;
	margin: .25% 0;
}
.footerLink{
	list-style:none;
	padding:1em 0;
	text-align:center;
	border-bottom:1px solid #e5e5e5;	
}
.footerLink li{
	display:inline-block;
	vertical-align:top;
	margin:0 .5em;
}
.privacyLinks{
	background:#d3e8e6;
	padding:1em;
	margin: 1em 0;
	list-style:none;
	display:table;
}
.privacyLinks li{
	border-right:1px solid #36a59b;
	display: inline-block;
    padding: 0 1em;
}
.privacyLinks li:last-child{
	border-right:none;
}
.privacyLinks a{
	color:#003e38;
}
.copyright .rightBox{
	width:30%;
	text-align:right;		
	position:absolute;
	top:0;
	right:0;
}
.qrcodeBox, .aLink {
	display:inline-block;
	vertical-align:top;
	width:25%;
	margin-left:.5em;
}
.qrcodeBox {
	width:20%;
}
.footerBot .webWrap{
	margin: 1.5em auto;
}
.copyright{
	color:#036159;
}
.copyright p{
	padding:.5em 0;
}
.copyright p span{
	padding: 0 0 0 1em;
}

/*----- mobile Style -----*/
@media only screen and (max-width: 429px){
.onPc{ visibility:hidden; display:none;}
.onMobile{ visibility:visible; display:block;}
.webWrap {
    width: 100%;
}
.footerBot .webWrap {
    margin: auto;
    padding: 1em 0;
    width: 90%;
}
.f-sitemap {
    margin: 0 auto;
    width: 90%;
}
.f-sitemap a {
    width: 100%;
    margin: .25% 0;
}
.copyright p span{
	padding: 0;
	display:block;
}
.copyright .rightBox {
    width: 100%;
    text-align:center;
    position:relative;
    top: 0;
    right: 0;
	margin-top:.5em;
}
.privacyLinks li {
    border-right: none;
    display: inline-block;
	padding:0;
	width: 100%;
    text-align: center;
    border-bottom: 1px solid #d3e8e6;
}
.privacyLinks li a{
	background: #36a59b;
	color:#fff;
    padding: .5em 0;
	display:block;
}
.privacyLinks li:last-child {
    border-right: none;
    border-bottom: none;
}
}

/*20250902論壇大事紀*/
.summaryBlock ul ,.summaryBlock li{
	list-style-type: none;
}
.summaryBlock ul.summaryList{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0px 12px;
}
.summaryBlock ul.summaryList > li{
	width: 33%;
	margin: 16px 0;
}
.summaryBody li{
	position: relative;
}
.summaryBody li::before{
	content: "";
	display: block;
	background: #198680;
	border: 3px solid transparent;
	border-radius: 100%;
	position: absolute;
	top: 7px;
	left: -17px;
	width: 5px;
	height: 5px;
}
.summaryBody li::after{
	content: "";
	display: block;
	background: #198680;
	border: 1px solid transparent;
	position: absolute;
	top: 11px;
	left: -6px;
	width: 10px;
	height: 1px;
}
.summaryTop_year{
	font-size: 1.8em;
	color: #007b77;
	font-weight: 700;
	line-height: 1;
	height: 40px;
}
.summaryTop_month{
	font-size: 1.2em;
	color: #956c41;
	font-weight: 700;
	border-bottom: 3px solid #d7d7d7;
	padding: 0 10px;
	position: relative;
	height: 25px;
}
.summaryTop_month::after{
	content: "";
	display: block;
	position: absolute;
	border-top: 6px solid white;
	border-bottom: 6px solid white;
	border-left: 25px solid #d7d7d7;
	display:inline-block;
	right: 0;
	bottom: -8px;
}
.summaryBody{
	border-left: 3px solid #007b77;
	margin: 4px 0px;
}
.summaryBody ul{
	padding: 12px 24px 8px 10px;
}
.summaryBody li{
	margin-bottom:16px;
	padding-left: 14px;
	line-height: 1.5;
	font-size: 1.1em;
}
.summaryBody a{
	font-weight: 600;
}
.summaryBody li a:hover{
	background: #e4efef;
	color: #007a77;
}


/*----- pad Style -----*/
@media only screen and (min-width: 430px) and (max-width: 1024px){
	
}