@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@200..900&display=swap');

/* ===== Reset & Base ===== */
/*body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, header, main, section, article, figure, footer {
	padding: 0;
	margin: 0;
}*/
html, body, div, span, applet, object, iframe, h1,h2,h3,h4,h5,h6, p, blockquote, pre, a, abbr, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,tfoot, thead, tr, th, td, article, aside, details, figcaption, figure, footer, header, main, nav, section, summary {
    margin: 0;
    padding: 0;
    border: 0;
}
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: "Noto Serif TC", serif;
	font-size: 16px;
	padding: 0;
	overflow-x: hidden;
	padding-top: 110px;
}
@media screen and (max-width: 1366px) {
	body {
		padding-top: 60px;
	}
}
section, article, footer {
  	display: block;
}

ul, ol, li {
	list-style-type: none;
	list-style-image: none;
}
a, button {
	display: block;
	text-decoration: none;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
	background: transparent;
	outline: none;
	transition: all 0.3s ease-out;
	font-family: "Noto Serif TC", serif;
}
input, select {
	font-family: "Noto Serif TC", serif;
}
input, textarea, select, button{
    font:inherit;
}
a:hover, a:active, button:hover, button:active, :link, :visited, :hover, :active, :focus {
	transition: all 0.3s ease-out;
}
img {
	border: 0;
	display: block;
	margin: 0 auto;
	width: 100%;
}
.text-center {
  	text-align: center;
}
.pc {
	display: block;
}
.mb {
	display: none;
}
@media screen and (max-width: 820px) {
	.pc {
		display: none;
	}
	.mb {
		display: block;
	}
}

.site {
  	display: none;
}
/* --- 選單樣式 ----------------------------------------------------------------------- */
.navbar {
	width: 100%; height: 110px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08);
	position: fixed;
	top: 0; left: 0;
	z-index: 1000;
}
.nav-container {
	margin: 0 auto;
	height: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 32px;
}
.nav-menu {
	display: flex;
	align-items: center;
	margin-left: auto;
}
.nav-menu > li {
	position: relative;
	margin-left: 15px;
}
.nav-menu > li > a {
	padding: 10px 12px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .1em;
	display: flex;
	align-items: center;
	gap: 5px;
	color: #1a1818;
}
.nav-menu > li > a:hover {
	color: #e68f3a;
}
@media screen and (max-width: 1366px) {
	.navbar {
		height: 60px;
	}
	.navbar .logo {
		width: 100%;
		flex: 0 0 180px;
	}
	.nav-menu > li {
		margin-left: 0px;
	}
	.nav-menu > li > a {
		font-size: 16px;
	}
}
@media screen and (max-width: 992px) {
	.nav-container {
		padding: 0 24px;
	}
	.nav-menu {
		position: absolute;
		top: 60px; left: -100%;
		flex-direction: column;
		background: #fff;
		width: 100%;
		height: calc(100vh - 60px);
		transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
		overflow-y: auto;
		align-items: flex-start;
		padding: 0;
	}
	.nav-menu.active { left: 0; }
	.nav-menu > li {
		width: 100%;
		margin: 0;
	}
	.nav-menu > li > a {
		padding: 15px 24px;
		border-bottom: 1px solid #f0f0f0;
		justify-content: space-between;
	}
}
@media screen and (max-width: 500px) {
	.nav-container {
		padding: 0 1rem;
	}
}


/* --- 下拉選單 ---------------------------------------------------------------- */
.dropdown {
	position: absolute;
	top: 100%; left: 0;
	background: #fff;
	width: 150px;
	display: none;
	padding-top: 16px;
}
.dropdown li { position: relative; }
.dropdown li a {
	padding: 12px;
	display: block;
	font-size: 15px;
	font-weight: 500;
	color: #333;
	border: 1px solid #ddc5b3;
	margin-top: -1px;
	letter-spacing: .1em;
	transition: all .3s;
}
.dropdown li a:hover {
	background: #ffefe3;
	transition: all .3s;
}
/*.has-dropdown > a:after,
.has-subdropdown > a:after {
	content: "+";
}*/
/* --- 第三層選單 ---------------------------------------------------------------------- */
.subdropdown {
    position: absolute;
    top: 0;
    left: 100%;
    background: #fff;
    width: 150px;
    display: none;
}
.subdropdown.fly-left {
    left: auto;
    right: 100%;
}
.subdropdown li a {
    padding: 9px 12px;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    border: 1px solid #ddc5b3;
    margin-top: 0px;
    letter-spacing: .1em;
    transition: all .3s;
}
.subdropdown li a:hover {
    background: #ffefe3;
}
/* --- 漢堡 ------------------------------------------------------------------------- */
.menu-toggle {
	display: none;
	cursor: pointer;
	width: 24px; height: 24px;
	background: url("../img/menu.svg") no-repeat center;
	background-size: 100%;
	margin-right: 8px;
	appearance: none;
	border: 0;
	transition: all .05s;
}
.menu-toggle.active {
	background: url("../img/close.svg") no-repeat center #fff;
	background-size: 100%;
	opacity: .5;
	transition: all .05s;
}
@media screen and (max-width: 992px) {
	.has-dropdown > a:after,
	.has-subdropdown > a:after {
		content: "+";
		padding-left: 4px;
	}
	.menu-toggle {
		display: block;
		margin-left: 8px;
		order: 1;
	}
	.dropdown {
		position: static;
		width: 100%;
		box-shadow: none;
		background: #fcfcfc;
		padding: 0;
		border: none;
		display: none;
	}
	.dropdown li a {
		padding: 12px 40px;
		border-bottom: 1px solid #f0f0f0;
	}
	.subdropdown {
        position: static;
        width: 100%;
        display: none;
        background: #f5f5f5;
    }
    .subdropdown li a {
        padding: 12px 56px;
    }
}
.sr-only{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}


/* --- 搜尋按鈕 ----------------------------------------------------------------- */
.search-btn {
	cursor: pointer;
	background: #fff;
	border: 1px solid #e68f3a;
	border-radius: 50%;
	width: 38px; height: 38px;
	flex: 0 0 38px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 30px;
}
.search-btn img {
	width: 18px;
}
@media screen and (max-width: 1366px) {
	.search-btn {
		margin-left: 10px;
	}
}
@media screen and (max-width: 992px) {
	.search-btn {
		margin-left: auto;
		margin-right: 10px;
	}
}
/* --- 滿版搜尋 Modal ------------------------------------------------------------ */
.search-modal {
	position: fixed;
	top: 0; left: 0;
	width: 100%; height: 100%;
	z-index: 2000;
	display: none;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(5px);
}
.close-search {
	position: absolute;
	top: 40px; right: 40px;
	width: 18px;
	cursor: pointer;
	opacity: 0.5;
	appearance: none;
	border: 0;
}
.close-search:hover { opacity: 1; }
.search-content { 
	width: 80%;
	max-width: 800px;
	text-align: center;
	display: flex;
}
.search-content input,
.search-content button {
	font-size: 24px;
	font-weight: 500;
	letter-spacing: .075em;
}
.search-content input {
	width: 100%;
	border: none;
	border-bottom: 1px solid #333;
	background: transparent;
	padding: 15px;
	outline: none;
	text-align: center;
}
.search-content button {
	flex: 0 0 100px;
	border: 0;
	appearance: none;
	background: #e68f3a;
	color: #fff;
	transition: all .3s;
}
.search-content button:hover {
	background: #cc761f;
}
@media screen and (max-width: 1366px) {
	.search-content input {
		padding: 12px;
	}
	.search-content button {
		flex: 0 0 80px;
	}
	.search-content input,
	.search-content button {
		font-size: 20px;
	}
}



/* --- 首頁Hero Banner 輪播 ------------------------------------------------------------------------ */
.slider-controls {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 2rem;
}
.swiper-pagination {
	position: static;
	display: flex;
	gap: 24px;
	align-items: center;
	justify-content: center;
}
.swiper-pagination-bullet {
	width: 24px; height: 24px;
	background: rgba(255,255,255,.75);
	opacity: 1;
	border-radius: 50%;
	transition: background 0.2s, transform 0.2s;
	margin: 0 !important;
}
.eventSwiper .swiper-pagination-bullet {
	background: rgba(230, 143, 58, .5);
}
.swiper-pagination-bullet-active {
	background: #e68f3a;
}
.eventSwiper .swiper-pagination-bullet-active {
	background: rgba(230, 143, 58, 1);
}
@media (max-width: 992px) {
	.slider-controls {
		margin-top: 1.25rem;
	}
	.swiper-pagination-bullet {
		width: 12px;
		height: 12px;
	}
	.swiper-pagination {
		gap: 12px;
	}
}


/* KV */
.kvSwiper .swiper-slide a .kv-text{
	position: absolute;
	bottom: 150px; 
	left: 110px;
	color: #fff;
	text-shadow: 0 0 20px rgba(0,0,0,0.72);
	font-weight: 700;
}
.kv-text .tag {
  font-size: 2rem;
  letter-spacing: 1px;
  border: 4px solid #fff;
  width: fit-content;
  margin-bottom: 16px;
  padding: 10px 24px;
  border-radius: 3rem;
}
.kv-text h3 {
  font-size: 3rem;
  letter-spacing: 1px;
}
.kvSwiper .slider-controls {
	position: absolute;
	bottom: 40px; right: 54px;
}
@media (max-width: 1440px) {
	.kv-text .tag {
  font-size: 1.75rem;
}
	.kv-text h3 {
		font-size: 2.5rem;
	}
.kvSwiper .swiper-slide a .kv-text {
bottom: 128px;
	left: 7.6vw;}
}
@media (max-width: 1366px) {
	.kvSwiper .swiper-slide a .kv-text {
		bottom: 15%; left: 5%;
	}
	
	.kvSwiper .slider-controls {
		bottom: 32px; right: 43px;
	}
}
@media (max-width: 820px) {
	.kv-text .tag {
    font-size: 24px;
    border: 3px solid #fff;
    margin-bottom: 12px;
    padding: 8px 15px;
  }
 .kv-text h3 {
    font-size: 2.5rem;
  }
	 
.kvSwiper .swiper-slide a .kv-text {
    bottom: 11%;
    left: 5%;
  }
}
@media (max-width: 500px) {
	/*.kvSwiper .swiper-slide a .kv-text {
		position: relative;
		bottom: 0; left: 0;
		padding-left: 24px;
		margin: 24px 0;
		color: #000;
		text-shadow: none;
	}*/
.kvSwiper .swiper-slide a .kv-text {
  color: #fff;
  text-shadow: 0 0 10px rgba(0,0,0,0.8);
  font-weight: 700;
	left: 4%;
}
 .kv-text .tag {
    font-size: 18px;
    border: 2px solid #fff;
    margin-bottom: 8px;
    padding: 5px 10px;
  }
	.kv-text h3 {
		font-size: 26px;
	}
	.kvSwiper .slider-controls {
		/*top: 32vw; */
		bottom: 5vw; 
		right: 1rem;
	}
  .kvSwiper{
    min-height:260px;
  }

  .kvSwiper .swiper-slide img{
    width:100%;
    height:260px;
    object-fit:cover;
  }
}

/*--Hashtag 跑馬燈 ----------------------------------------------------------------*/
.ticker-wrapper {
  overflow: hidden;
  border-top: 2px solid #e68f3a;
  border-bottom: 2px solid #e68f3a;
  padding: 20px 0;
  user-select: none;
  margin: 40px 0;
}
.ticker-wrapper:hover .ticker-track {
  	animation-play-state: paused;
}
.ticker-track {
	display: flex;
	width: max-content;
	animation: marquee 24s linear infinite;
}
@keyframes marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 0 24px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.075em;
	white-space: nowrap;
}
.ticker-item a {
	color: inherit;
	transition: all .3s;
}
.ticker-item a:hover {
	color: #e68f3a;
	border-bottom:1px solid #e68f3a;
	transition: all .3s;
}
@media (max-width: 1366px) {
	.ticker-wrapper {
		border-top: 1px solid #e68f3a;
		border-bottom: 1px solid #e68f3a;
		padding: 15px 0;
		margin: 36px 0;
	}
	.ticker-item {
		padding: 0 20px;
		font-size: 24px;
	}
}
@media (max-width: 820px) {
	
	.ticker-item {
		padding: 0 16px;
		font-size: 22px;
	}
  .ticker-wrapper {
    padding: 1rem 0;
    margin: 2rem 0;
  }
}
@media (max-width: 500px) {
	.ticker-wrapper {
		padding: .8rem 0;
		margin: 1.25rem 0;
	}
	.ticker-item {
		padding: 0 12px;
		font-size: 4.25vw;
		font-weight: 600;
	}
}


.sec-wrap {
	max-width: 1440px;
	margin: 0 auto 40px;
}
.sec-title {
	color: #e68f3a;
	font-size: 32px;
	font-weight: 700;
	letter-spacing: 0.075em;
	margin-bottom: 1.5rem;
}
.sec-title::before {
    content: "";
    display: inline-block;
    width: 1px; height: 1em;
    background: #e68f3a;
    margin-right: 20px;
    vertical-align: middle;
	margin-top: -2px;
    box-shadow: 
        5px 0 0 0 rgba(230, 143, 58, 0.6),
        10px 0 0 0 rgba(230, 143, 58, 0.3);
}
@media screen and (max-width: 1440px) {
	.sec-wrap {
		width: 90%;
		margin-bottom: 2.5rem;
	}
    .sec-title {
        font-size: 1.75rem;
		margin-bottom: 1.25rem;
    }
}
@media screen and (max-width: 1366px) {
	/*.sec-wrap {
		margin: 0 32px 48px;
	}*/
    .sec-title {
        font-size: 26px;
		margin-bottom: 24px;
    }
}
@media screen and (max-width: 820px) {
	/*.sec-wrap {
		margin: 0 24px 48px;
	}*/
    .sec-title {
        font-size: 22px;
		margin-bottom: 20px;
    }
}


/*--首頁/我要參與 ----------------------------------------------------------------*/
/*橘底*/
.event-orange{
	width: 100%;background: #fff7f0;
}
.for-orange-back{
	margin: 0 auto; padding: 3rem 0;
}
.eventSwiper .swiper-slide a {
	border: 3px solid #e68f3a;
	color: #000;
	letter-spacing: 0.075em;
	background: #fff;
}
.eventSwiper .event-pic {
	padding: 16px;
	border-bottom: 1px solid #e68f3a;
}
.eventSwiper .event-tt,
.eventSwiper .event-info {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
.eventSwiper .event-tt {
	border-bottom: 1px solid #e68f3a;
}
.eventSwiper .event-tt i {
	font-size: .9rem;
	vertical-align: middle;
	/*margin-top: -.5em;*/
	margin-left: 5px;
}
.event-title {
	font-weight: 700;
	font-size: 28px;
    display: flex;
    align-items: end;
    gap: 10px;
    min-width: 0;
}
.event-title .title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.event-title .status {
    flex-shrink: 0;
	font-weight: 500;
	font-size: 15px;
	vertical-align: middle;
	display: inline-block;
	margin-top: -.5em;
	color: #e68f3a;
	border: 1px solid #e68f3a;
	padding: 4px 10px;
	border-radius: 40px;
}
.event-title .status.end {
	color: #808080;
	border: 1px solid #808080;
}
.event-link, .event-info {
	font-weight: 600;
}
.eventSwiper .swiper-slide a:hover .event-link {
	background: #e68f3a;
	color: #fff;
}
.event-link {
	color: #e68f3a;
	padding: 20px 10px;
	border-left: 1px solid #e68f3a;
	flex: 0 0 124px;
	font-size: 18px;
}
.event-date, .event-location {
	font-size: 20px;
}
.event-info {
	justify-content: flex-start !important;
}
.event-title, .event-date, .event-location {
	padding: 16px;
}
.event-date {
	border-right: 1px solid #e68f3a;
}
@media screen and (max-width: 1440px) {
	.event-title {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 1366px) {
    .event-title {
        font-size: 22px;
    }
    .event-title .status {
        font-size: 13px;
        padding: 3px 8px;
    }
    .event-link, .event-date, .event-location {
        font-size: 18px;
    }
	
}
@media screen and (max-width: 1200px) {
	.event-link, .event-date, .event-location {
        font-size: 1rem;
    }
	.eventSwiper .event-tt i {
  font-size: .8rem;
  vertical-align: middle;
  margin-left: 2px;
}
.event-link {
  flex: 0 0 110px;	
}
}
@media screen and (max-width: 820px) {
	.eventSwiper .swiper-slide a {
		border: 2px solid #e68f3a;
	}
	.event-title, .event-date, .event-location {
		padding: 12px;
	}
    .event-title {
        font-size: 18px;
		flex-wrap: wrap;
    }
	.event-title .title-text {
		width: 100%;
		margin-bottom: 4px;
	}
    .event-title .status {
		display: block;
        font-size: 11px;
        padding: 2px 7px;
    }
    .event-link, .event-date, .event-location {
        font-size: 14px;
    }
	.event-link {
        white-space: nowrap;
        flex-shrink: 0;
		padding: 14px 12px 12px;
		flex: 0 0 50px;
		line-height: 1.3;
    }
	.event-link i {
		display: none;
	}
	.eventSwiper .event-pic {
		padding: 12px;
	}
}

/*--Footer----------------------------------------------------------------*/

footer {
	background: url("../img/footer-bg.png") no-repeat top center;
	border-top: 1px solid rgba(230, 143, 58, .4);
	padding: 54px 48px 65px;
	position: relative;
}
footer::after {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	z-index: 1;
	content: "";
	display: block;
	width: 100%; 
	height: 12px;
	background: url("../img/footer-border.webp") no-repeat center;
	background-size: 100% 100%;
}
.footer-link {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40px;
}
.footer-link .link-wrap {
	text-align: right;
}
.footer-link .link-nav a ,
.footer-link .social-nav a {
	display: inline-block;
}
.footer-link .link-nav a {
	color: #e68f3a;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.075em;
	margin-left: 10px;
}
.footer-link .social-nav {
	margin-top: 20px;
	
}
.footer-link .social-nav a {
	color: #b7b6b6;
	font-size: 24px;
	margin-left: 4px;
}
.footer-copy {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.footer-copy .footer-slogan {
	letter-spacing: 0.075em;
	line-height: 1.55;
	color: #9e9e9e;
	font-weight: 700;
	font-size: 18px;
}
.footer-copy .copy {
	letter-spacing: 0.2em;
	font-weight: 600;
	font-size: 16px;
	margin-bottom: .4em;
}
@media screen and (max-width: 1366px) {
	footer {
		padding: 40px 32px 56px;
	}
	footer::after {
		width: 100%; height: 20px;
	}
	.footer-link .footer-logo{
		width: 100%;
		flex: 0 0 180px;
	}
	.footer-copy {
		flex-wrap: wrap;
		line-height: 1.3;
	}
	.footer-link .link-nav a {
        font-size: 16px;
    }
    .footer-link .social-nav a {
        font-size: 24px;
    }
    .footer-copy .footer-slogan {
        font-size: 15px;
    }
	.footer-copy .copy {
		font-size: 13px;
		margin-top: 1em;
		margin-bottom: 0;
	}
}
@media screen and (max-width: 820px) {
	footer {
		padding: 32px 24px 40px;
	}
	footer::after {
		width: 100%; height: 12px;
	}
	.footer-logo {
		margin-bottom: 24px;
	}
	.footer-link {
		flex-wrap: wrap;
		margin-bottom: 0;
	}
	
	.footer-link .social-nav {
		margin-top: 12px;
	}
	.footer-copy .footer-slogan{
        font-size: 13px;
		letter-spacing: 1px;
    }
	
	.footer-copy .copy {
        font-size: 12px;
		letter-spacing: 1px;
		margin-bottom: .3em;
    }
	
}
@media screen and (max-width: 500px) {
	.footer-link .link-wrap {
		text-align: left;
		width: 100%;
		margin: 0 0 32px;
	}
	.footer-link .link-nav a {
		margin-left: 0;
		margin-right: 10px;
	}
}	
	
/*--2026.07 首頁中段 - 文章區--------------------------------------------------------------------*/	
.index-topics-wrapper , .page-topics-wrapper{
	display: block;
	overflow: hidden;
	width: 100%;
	padding-bottom: 2rem;
	border-bottom: 1px #ecdccf solid;
}
.topics-border-none{
	border-bottom: none;
}
.index-topics-headlines, .page-topics-headlines{
	display: block;
	float: left;
	overflow: hidden;
	width: 45%;
	margin-right: 2rem;
}
.index-topics-headlines a img ,.page-topics-headlines a img{
	display: block;
	max-width: 100%;
	margin-bottom: .5rem;
	opacity: .93;
}
.index-topics-headlines a:hover img ,.page-topics-headlines a:hover img{
	opacity: 1;
}


.article-date{
	display: inline-flex;
	align-items: center;/* 垂直置中 */
	font-size: 1rem;
	font-weight: 500;
	color: #e68f3a;
	line-height: 1.5;
	letter-spacing: 1px;
	margin-top: -.25rem;
}

.article-date::after{
	content: "";
	width: 36px;
	height: 1px;
	background: #e68f3a;
	margin-left: .5rem;
	margin-top: .1rem;
	flex-shrink: 0;
}
/*左側標題*/
.headlines-title h3{
	display: block;
	font-weight: 700;
	color: #222;
	font-size: 1.35rem;
	line-height: 1.5;
	text-decoration: none;
	text-align: justify;
	letter-spacing: 1px;
}
.headlines-title h3:hover{
	color: #000;
	text-decoration: none;
}

/*右側3則*/
.index-topics-news{
	display: block;
	float: left;
	overflow: hidden;
	width: calc(54.999% - 2.01rem);
}
.index-topics-news ul{	
}
.index-topics-news li{	
	display: block;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1.5rem;
}
.index-topics-news li:nth-child(3){	
	margin-bottom: 0;
}
.index-topics-news li a img{	
	display: block;
	float: left;
	width: 34%;
	overflow: hidden;
	margin-right: 1rem;
	opacity: .93;
}
.index-topics-news li a:hover img{
	opacity: 1;
}

/*右側標題+文*/
.index-topics-news-text{
	display: block;
	float: left;
	width: calc(65.999% - 1rem);
	overflow: hidden;
	/*margin-top: -.25rem;*/
}
.index-topics-news-text h3,.index-topics-news-text p {
	font-weight: 500;
	color: #222;
	font-size: 1.125rem;
	line-height: 1.7;
	text-decoration: none;
	text-align: justify;
	letter-spacing: 1px;
}
.index-topics-news-text:hover{
	color: #000;
	text-decoration: none;
}
/*Gemini:card-link-wrapper*/
.card-link-wrapper {
  display: block; 
  text-decoration: none;
  color: inherit; /* 繼承父元素的文字顏色，避免標題變藍色 */
  outline: none;/* 移除點擊時的預設外框 */
  transition: transform 0.3s ease; 
}

.card-link-wrapper:hover,
.card-link-wrapper:focus {
  text-decoration: none;
  color: inherit; /* 確保文字不會變色 */
}


.btn-read-more{
	/*display: inline-flex;
	align-items: center;
	justify-content: center;*/
	display: block;
	float: right;
	margin-top: 1.5rem;
	width: fit-content;
	padding: .5rem 1.25rem;
	background: #fff;
	border: 2px solid #e68f3a;
	border-radius: 2rem;
	color: #e68f3a;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: all .3s ease;
	box-sizing: border-box;
}

.btn-read-more:hover{
	background: #e68f3a;
	color: #fff;
}

.btn-read-more:active{
	transform: translateY(1px);
}
.btn-read-more i{
	margin-left: .25rem;
	font-size: .9rem;
	transform: translateY(-2px);
}



.side-fixed-button{
    position: fixed;
    right: .25rem;
    top: 60%;
    transform: translateY(-50%);
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.side-btn{
    background:#e89436;
    color:#fff;
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    transition:.3s;
}

.side-btn:hover{
    background:#eb8929;
    transform:translateY(-2px);
}
.go-join , .go-top{
    width:48px;
    height:auto;
    border-radius:2rem;
	padding: .75rem 0 .5rem;
}

.vertical-text{
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-size:1.25rem;
    font-weight:700;
    letter-spacing:.15em;
}

.go-join i, .go-top i{
    margin-top:.5rem;
    font-size:1.5rem;
	opacity: .5;
}

.go-top span{
    font-size:.85rem;
    font-weight:700;
    letter-spacing:1px;
}

.go-join i:hover, .go-top i:hover{
	opacity: .75;
}


@media screen and (max-width: 1440px) {
.headlines-title h3 {
  font-size: 1.25rem;		
	}
}
@media screen and (max-width: 1280px) {
.article-date {
  font-size: .9rem	
	}
.index-topics-news-text h3 ,.index-topics-news-text p{
  font-size: 1rem;
	line-height: 1.5;
	}
 .headlines-title h3 {
    font-size: 1.2rem;
  }
}
@media screen and (max-width: 820px) {
.index-topics-headlines, .page-topics-headlines {
  display: block;
  float: none;
  overflow: hidden;
  width: 100%;
  margin-right: 0;
}
.index-topics-headlines a img, .page-topics-headlines a img{
  display: block;
  max-width: 50%;
  margin: 0 1.5rem  1.5rem 0;
  float: left;
  
}
.index-topics-news {
  display: block;
  float: none;
  overflow: hidden;
  width: 100%;
}	
.index-topics-news-text h3 ,.index-topics-news-text p{
    font-size: 1.125rem;
  }	
.btn-read-more {
  float: none;
  margin-top: 1.75rem;
  width: 100%;
  text-align: center;
}	
.headlines-title h3 {
  font-weight: 500;
	}
.headlines-page-mb{
margin-top: -.35rem;
	}
.side-fixed-button{
	top: auto;
    bottom: 1.25rem;
}
.go-join , .go-top{
    width:32px;
    border-radius:2rem;
	padding: .75rem 0 .5rem;
}

.vertical-text{
    font-size:1rem;
    font-weight:700;
    letter-spacing:1px;
}

.go-join i, .go-top i{
    margin-top:.35rem;
    font-size:1rem;
}

.go-top span{
    font-size:.75rem;
    font-weight:700;
    letter-spacing:0;
}
}


@media screen and (max-width: 500px) {
.index-topics-headlines ,.page-topics-headlines{  
    margin-bottom: 2rem;
  }
  .index-topics-headlines a img ,.page-topics-headlines a img{
    display: block;
    max-width: 100%;
    margin: 0 0 .25rem 0;
    float: none;
  }
 .article-date {
    font-size: .8rem;
  }
 .headlines-title h3 {
    font-size: 1.1rem;
    line-height: 1.4;
  }
.index-topics-news li {
  margin-bottom: 2rem;
}
.index-topics-news li a img {
  float: none;
  width: 100%;
  margin: 0 0 .25rem 0;
  opacity: 1;
}
.index-topics-news-text {
  float: none;
  width: 100%;
}
 .index-topics-news-text h3 ,.index-topics-news-text p{
	 font-size: 1.08rem;
    line-height: 1.4;
  }
.btn-read-more{
	font-size: 1rem;
	}
.headlines-title h3.headlines-page-mb{
	font-size: 1.1rem;
margin-top: 0;
	font-weight: 700;
	}
 footer {
    padding: 2.25rem 1.25rem 3rem;
  }
 .side-fixed-button {
    top: auto;
    bottom: 32.65vw;
    transform: none;
  }
.article-date::after {
  content: "";
  width: 24px;
  height: 1px;
  background: #e68f3a;
  margin-left: .3rem;
  margin-top: .2rem;
  flex-shrink: 0;
}
}