/* ----------------------------------------------------------------
Custom CSS
-----------------------------------------------------------------*/

html {scroll-behavior: auto;}
/* ==========================================
   全局與尺寸定義
   ========================================== */
:root {
	--max-page-width: 1920px;
	--max-content-width: 1644px;
	--header-height: 110px;
	--gutter-x: 60px;
	--logoWidth: 258px;
	--logoHeight: 180px;
	--logoTop: 0px;
	--navGap: 10px;
	--darkBlue: #0a2373;
	--linkBlue: #00479e;
	--linkFilter: brightness(0) saturate(100%) invert(11%) sepia(60%) saturate(7496%) hue-rotate(205deg) brightness(93%) contrast(103%);
	--medBlue: #0096e1;
	--medBlue60: #009ee199;
	--lightBlue: #e5f5fc;
	--submenu-bg: var(--lightBlue);
	--submenu-text-blue: #0088cc;
	--brand-blue: #0088cc;
	--text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

	@media (max-width: 1024px) {
		--header-height: 110px;
		--gutter-x: 40px;
		--logoWidth: 210px;
	}
	@media (max-width: 992px) {
		--logoWidth: 190px;
		--logoTop: 10px;
	}
	@media (max-width: 767.9px) {
		--header-height: 76px;
		--gutter-x: 20px;
		--logoWidth: 176px;
	}
}

html {scroll-behavior: smooth;}
a {color: unset; text-decoration: none;}
body {padding-top: var(--header-height); font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans HK", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
html[lang="zh-hk"] body {font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans HK", "Noto Sans SC", "Heiti TC", "LiHei Pro", "Microsoft JhengHei", "微軟正黑體", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
html[lang="zh-cn"] body {font-family: Roboto, "Helvetica Neue", Arial, "Noto Sans SC", "Noto Sans HK", "Heiti TC", "LiHei Pro", "Microsoft JhengHei", "微軟正黑體", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;}
h1, h2, h3, h4, h5, h6, p, ul, li, .nav-link, .submenu-title, .submenu-list, div {font-family: 'Roboto', 'Noto Sans HK', sans-serif;}
.psgo-content-container {width: 100%; max-width: var(--max-content-width); margin-left: auto; margin-right: auto; padding-left: var(--gutter-x); padding-right: var(--gutter-x);}
body.menu-open, body.mobile-menu-open {overflow: clip !important; padding-right: var(--scrollbar-width, 0px);}
.body-dim {opacity: 0; transition: all 0.3s ease;}
.menu-open .body-dim {position: fixed; top: 0; left: 0; display: block; width: 100%; height: 100dvh; background-color: #000000; opacity: 0.5; z-index: 890;}
button {margin: 0; padding: 0; border: none; background: none; font: inherit; color: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;}
main {overflow: clip;}
.g-7, .gx-7 {--bs-gutter-x: 70px;}
/* langs show/hide */
.en, .tc, .sc {display: none;}
html[lang="zh-hk"] .tc {display: inline-block;}
html[lang="zh-cn"] .sc {display: inline-block;}
html[lang="en"] .en {display: inline-block;}
/* font size 100% (16px) */
html {font-size: 100%; transition: font-size 0.2s ease;}
html.font-s {font-size: 90%; /* Small: 14.4px */}
html.font-m {font-size: 100%; /* Normal: 16px */}
html.font-l {font-size: 112.5%; /* Large: 18px */}

h1 {font-size: 6.25rem; font-weight: 450; line-height: 1.11; letter-spacing: 0.25rem; text-transform: uppercase; color: #ffffff;}
html[lang="zh-hk"] h1, html[lang="zh-cn"] h1 {font-size: 5.5rem; letter-spacing: 34px;}
h2.section-title {font-size: 3.375rem; font-weight: 900; line-height: 1.11; color: var(--darkGreyColor);}
h2 {font-size: 3rem; font-weight: 400; line-height: 1.25; color: var(--mainPinkColor); letter-spacing: -0.025rem;}
h3 {font-size: 2.125rem; font-weight: 900; line-height: 1.06; color: var(--darkGreyColor); margin-bottom: .75rem;}
h4 {font-size: 1.25rem; font-weight: 900; line-height: 1.06; color: var(--darkGreyColor); margin-bottom: .5rem;}
p, ul, li {font-size: inherit; font-weight: 300; line-height: 1.56; letter-spacing: 0.4px; color: #000000; text-align: left;}
html[lang="zh-hk"] p, html[lang="zh-hk"] ul, html[lang="zh-hk"] li, 
html[lang="zh-cn"] p, html[lang="zh-cn"] ul, html[lang="zh-cn"] li {font-size: inherit; letter-spacing: inherit; font-weight: 400; color: #323232;}
a {transition: all 0.2s;}
strong {font-size: inherit; font-weight: 700; line-height: inherit;}
p.stagement, p.stagement a {font-size: 0.875rem; font-weight: 400; line-height: 1.5; color: #000000;}
p a {color: var(--darkBlue); text-decoration: none;}
.fw-400 {font-weight: 500 !important;}
.fs-small {font-size: 75%; font-weight: 400;}
html[lang="zh-hk"] .fs-small, html[lang="zh-cn"] .fs-small {font-size: 75%; letter-spacing: 1px;}
.ls-small {letter-spacing: 0.4px;}
p a:hover {color: var(--medBlue);}
.medBlue {color: var(--medBlue) !important;}
.darkBlue {color: var(--darkBlue) !important;}
.en-LS {letter-spacing: 0.4px}

@media (max-width: 767.9px) {
	p, ul, li {/*font-size: 0.875rem;*/}
}
/* ==========================================
   Section width control
   ========================================== */
.section-fullwidth {width: 100%;}
.section-standard {width: 100%; max-width: var(--max-page-width); min-height: 8vh; margin-left: auto; margin-right: auto;}
.psgo-content-container {max-width: 1644px; margin: 0 auto; padding: 0 var(--gutter-x); height: 100%; position: relative;}
footer {position: relative; width: 100%; padding-top: 32px; max-width: 100%; margin-left: auto; margin-right: auto; /*background-color: #ffffff;*/ z-index: 910;}

/* ==========================================
   Hero Banner Section
   ========================================== */
.hero-section {height: calc(100vh - var(--header-height)); max-height: 700px; min-height: 600px; margin-bottom: 48px; background-color: var(--darkBlue);}
.hero-bg-image {width: 100%; height: 100%; background-size: cover; background-position: top center; position: relative; background-color: var(--darkBlue);}
.hero-text h1 {font-size: 4rem; line-height: 1.1; text-shadow: var(--text-shadow);}

/* =========================================================
   Hero Slider
   ========================================================= */
.hero-slider-section .splide__slide {height: 700px; background-size: cover; background-position: center; background-color: var(--darkBlue); color: #ffffff; position: relative; overflow: clip;}
#hero-slider-list {background-color: var(--darkBlue); color: #ffffff;}
.hero-slider-section .psgo-content-container {z-index: 2;}
.hero-overlay {position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; mix-blend-mode: multiply;
	background: linear-gradient(180deg, rgba(0, 32, 60, 0.0) 0%, rgba(0, 32, 60, 0.35) 60%, rgba(0, 32, 60, 0.6) 100%); z-index: 1;}
.hero-slide-link {display: block; width: 100%; height: 100%; text-decoration: none; color: inherit; position: relative;}
.hero-slide-link:hover {text-decoration: none; color: inherit;}
/* Slide content animation */
.hero-slide-content {position: absolute; bottom: 120px; color: #ffffff; opacity: 0;
  transform: translateX(150px); /* 初始位置偏右 50px */ transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease; transition-delay: 0.25s;}
.splide__slide.is-active .hero-slide-content {opacity: 1; transform: translateX(0);}
.hero-slide-content.text-right {right: 60px; text-align: right;}
.hero-slide-content.text-left {left: 60px; text-align: left;}
.category-tag {font-size: 1.35rem; font-size: clamp(1.125rem, 1.163rem + 0.182vw, 1.35rem); line-height: 1.15; letter-spacing: 4px; font-weight: 600; color: #ffffff; text-transform: uppercase; margin-bottom: 10px; text-shadow: var(--text-shadow); display: block;}
html[lang="zh-hk"] .category-tag, html[lang="zh-cn"] .category-tag {font-size: 1.375rem; font-size: clamp(1.25rem, 1.163rem + 0.182vw, 1.375rem); letter-spacing: 12px; margin-bottom: 16px;}
.slide-title {font-size: 4rem; font-size: clamp(2.8125rem, 2.125rem + 1.824vw, 4rem); font-weight: 400; line-height: 1.1; color: #ffffff; text-shadow: var(--text-shadow);}
html[lang="zh-hk"] .slide-title, html[lang="zh-cn"] .slide-title {font-size: 3.9375rem; font-size: clamp(3rem, 2.125rem + 1.824vw, 3.9375rem); line-height: 1.21; letter-spacing: 3px;}
/* Pagination & Play/Pause */
.slider-controls-wrapper {position: absolute; bottom: 40px; left: 0; right: 0; pointer-events: none; z-index: 10;}
.custom-controls {position: absolute; right: var(--gutter-x); bottom: 0; display: flex; align-items: center; gap: 16px; pointer-events: auto;}
/* Pagination */
.splide__pagination {position: static; padding: 0; display: flex; gap: 8px;}
.splide__pagination__page {width: 10px; height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.0); border: 2px solid #ffffff; padding: 0; opacity: 1; transition: all 0.3s ease;}
.splide__pagination__page.is-active {background: #ffffff; width: 10px; transform: scale(1);}
/* Play / Pause */
.splide__toggle {background: transparent; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 6px 6px 3px 6px;}
.splide__toggle .splide__toggle__play {width: 100%; height: auto; display: none;}
.splide__toggle .splide__toggle__pause {width: 100%; height: auto; display: inline-block;}
.splide__toggle.is-active .splide__toggle__play {display: inline-block;}
.splide__toggle.is-active .splide__toggle__pause {display: none;}
/* Single Slide content settnig */
#hero-slider-list .slide-3 .hero-overlay {width: 50%; height: 100%; top: 0; left: unset; right: 0; bottom: unset; background: linear-gradient(90deg, rgba(30, 127, 214, 0.0) 0%, rgba(30, 127, 214, 0.1) 60%, rgba(30, 127, 214, 0.2) 100%);}
#hero-slider-list .slide-3 .hero-slide-content {top: 22%; bottom: 20%;}
#hero-slider-list .slide-4 .hero-slide-content {bottom: 22%;}
#hero-slider-list .slide-5 .hero-overlay {width: 50%; height: 100%; top: 0; left: unset; right: 0; bottom: unset; background: linear-gradient(90deg, rgba(30, 127, 214, 0.0) 0%, rgba(30, 127, 214, 0.2) 60%, rgba(30, 127, 214, 0.3) 100%);}
#hero-slider-list .slide-5 .hero-slide-content {top: 14%; bottom: unset;}
#hero-slider-list .slide-6 .hero-overlay {height: 60%;}

@media (max-width: 767.9px) {
	.hero-slide-content {bottom: 90px;}
	.hero-slide-content.text-right {right: 22px;}
	.hero-slide-content.text-left {left: 22px;}
	.category-tag {font-size: 1.125rem; font-size: clamp(1.125rem, 1.163rem + 0.182vw, 1.35rem);}
	.slide-title {font-size: 2.8125rem; font-size: clamp(2.8125rem, 2.125rem + 1.824vw, 4rem); line-height: 1.08;}
	html[lang="zh-hk"] .slide-title, html[lang="zh-cn"] .slide-title {font-size: 2.125rem; font-size: clamp(3rem, 2.125rem + 1.824vw, 3.9375rem); letter-spacing: 2px;}
}
/* Global Video Modal 自訂樣式 */
.clickable-modal-video, .custom-inline-video {cursor: pointer; transition: opacity 0.2s ease, transform 0.2s ease;}
.clickable-modal-video:hover, .custom-inline-video:hover, 
.clickable-modal-video:focus-visible, .custom-inline-video:focus-visible {opacity: 0.8;}
.clickable-modal-video * {/*pointer-events: none;*/}
.modal-backdrop.show {opacity: 0.85 !important;}
#modalVideoPlayer {width: 100% !important; height: auto !important; max-height: 95vh; object-fit: contain; outline: none; border-radius: 8px; /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);*/}
#globalVideoModal .modal-dialog {display: flex !important; align-items: center !important; justify-content: center !important;  min-height: 100vh !important;  margin: 0 auto !important; max-width: 95vw !important;}
#globalVideoModal .modal-content {background: transparent !important; border: none !important; box-shadow: none !important; overflow: visible !important;}
#globalVideoModal .modal-body {padding: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important;}
#globalVideoModal #modalImagePlayer {width: 100% !important; height: auto !important; max-height: 90vh !important; object-fit: contain !important; outline: none; 
	border-radius: 10px !important; border: solid 18px rgba(255, 255, 255, 1) !important; -webkit-box-sizing: border-box; box-sizing: border-box;}
#globalVideoModal.has-announcement .modal-content {width: auto; min-width: 1000px; max-width: 1000px; flex-direction: column-reverse;}
#globalVideoModal.has-announcement .modal-content .btn-close {position: absolute; top: -22px; right: -22px; cursor: pointer; width: 14px; height: 14px; 
	padding: .125em .125em; background-color: transparent; border-radius: 50%; z-index: calc(var(--bs-modal-zindex) + 1);}
#globalVideoModal #modalVideoPlayer {width: 100% !important; height: auto !important; max-height: 90vh !important; object-fit: contain !important; outline: none; border-radius: 8px;}
#globalVideoModal .modal-backdrop.show {opacity: 0.85 !important;}
.modal-backdrop {--bs-backdrop-zindex: 900;}
.custom-inline-video {cursor: pointer; object-fit: cover;}

@media (min-width: 1200px) {
	#globalVideoModal .modal-dialog {max-width: 95vw !important; margin: 2.5vh auto;}
}
@media (max-width: 1200px) {
	#globalVideoModal.has-announcement .modal-content {min-width: 90vw !important; max-width: 90vw !important; margin: 2.5vh auto;}
}
/* Latest Updates Accordion */
#latestUpdatesAccordion {--bs-gutter-x: 70px; --bs-gutter-x: 22px;}
.latest-updates-section {background-color: #ffffff;}
.news-accordion-item {display: inline-block; background-color: var(--medBlue); border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px;
  overflow: hidden; transition: background-color 0.3s ease, transform 0.2s ease;}
.news-accordion-item.active, .news-accordion-item:hover, .news-accordion-item:focus-within {background-color: var(--darkBlue);}
.news-header {width: 100%; background: transparent; border: none; text-align: left; color: #ffffff; cursor: pointer; box-shadow: none !important;}
.news-accordion-item .news-date {line-height: 1.2;}
.news-accordion-item .news-category, 
.news-accordion-item .news-date {color: #000000;}
.news-accordion-item.active .news-category, .news-accordion-item.active .news-date,
.news-accordion-item:hover .news-category, .news-accordion-item:hover .news-date,
.news-accordion-item:focus-within .news-category, .news-accordion-item:focus-within .news-date {color: var(--medBlue); color: #ffffff;}
.news-accordion-item .news-title {padding: 0; color: #ffffff;}
.news-body {background-color: #ffffff; padding: 0 0 0 0; position: relative;}
.news-accordion-item .readmore {display: none; position: absolute; bottom: 0; background-color: rgb(255 255 255 / 80%); padding: 8px 20px 4px 22px; padding-right: 20px; max-width: unset; border-radius: 0 10px 0 0; opacity: 0; transition: opacity 0.2s ease;}
.news-accordion-item:hover .readmore, .news-accordion-item:focus-within .readmore {background-color: rgb(255 255 255 / 100%); opacity: 1;}
.news-img {width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover;}
.cover-wrap {scroll-margin-top: calc(var(--header-height, 80px) + 20px); border-radius: 8px; transition: background-color 0.3s ease, box-shadow 0.3s ease;}
.cover-wrap.highlight-news {background-color: var(--lightBlue); box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);}
.news-accordion-item {display: flex; flex-direction: column; height: 100%;}/* 確保卡片能夠撐滿網格的整體高度 */
.news-header {display: flex; flex-direction: column; flex-grow: 1;}/* 讓 header 自動佔滿空間 */
.news-title {flex-grow: 1;}/* 讓標題文字區塊填滿剩餘空間 */

.news-body-wrap {display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.5s ease, opacity 0.5s ease, margin-top 0.3s ease; overflow: hidden; margin-top: 0;}
.news-body-wrap .news-body {min-height: 0;}
.news-accordion-item.is-opened .news-body-wrap {grid-template-rows: 1fr; opacity: 1;}
/* WCAG 2.2 尊重「減少動態效果」設定 */
@media (prefers-reduced-motion: reduce) {.news-body-wrap {transition: none !important;}}

@media (max-width: 767.9px) {
	.news-accordion-item .news-category {font-size: 0.875rem;}
	.news-accordion-item .news-date {font-size: 0.875rem;}
	.news-accordion-item .news-title {font-size: 1.125rem;}
	.news-img {/*aspect-ratio: 16 / 6;*/ object-fit: cover; object-position: center;}
}
.mobile-column-collapsible {display: flex !important; height: auto !important; opacity: 1 !important;}
.news-toggle-btn-wrapper {display: none !important;}

/* Column 2 show/hide */
@media (max-width: 767.98px) {
	.mobile-column-collapsible:not(.is-expanded) {display: none !important;}
	.mobile-column-collapsible.is-expanded {display: flex !important;}
	.news-toggle-btn .arrow-icon {width: 14px; height: 14px; border-right-color: var(--medBlue); border-bottom-color: var(--medBlue); border-right-width: 2px; border-bottom-width: 2px;}
	.news-toggle-btn.is-expanded .arrow-icon {transform: rotate(-135deg); margin-top: 5px;}
	#latestUpdatesAccordion .news-toggle-btn-wrapper {display: block !important;}
	.news-toggle-btn {background: transparent; border: none; padding: 10px; cursor: pointer; box-shadow: none !important;}
	.news-toggle-btn.is-expanded {margin-top: 24px;}
}

/* Newsletter Slider */
.newsletter-title {font-size: 4rem; font-size: clamp(1.875rem, 0.729rem + 3.184vw, 4rem); font-weight: 500; line-height: 1.2; color: var(--medBlue); letter-spacing: 1px; margin-bottom: 26px; transition: all 0.3s ease;}
html[lang="zh-hk"] .newsletter-title, html[lang="zh-cn"] .newsletter-title {font-size: 4rem; font-size: clamp(2.5rem, 0.729rem + 3.184vw, 4rem); font-weight: 400; letter-spacing: 8px;}

.newsletter-img {width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 0% 0%; display: block;}
.newsletter-caption {position: absolute; bottom: 20px; left: 20px; right: 20px; color: #ffffff; z-index: 2; pointer-events: none;}
.newsletter-caption {position: absolute; bottom: 20px; left: 20px; right: 20px; color: #ffffff; z-index: 2; pointer-events: none;}
.issue-number {font-size: 1.375rem; font-weight: 400; line-height: 1; letter-spacing: 1px; text-shadow: var(--text-shadow);}
.issue-number span.large {font-size: 6.125rem; font-weight: 400; letter-spacing: 1px;}
.newsletter-caption .slide-text {font-size: 2.3125rem; font-size: clamp(1.5rem, 1.028rem + 1.311vw, 2.3125rem); font-weight: 400; line-height: 1.3; color: #ffffff; margin: 0; text-shadow: var(--text-shadow);}
html[lang="zh-hk"] .newsletter-caption .slide-text, html[lang="zh-cn"] .newsletter-caption .slide-text {letter-spacing: 2px;}
.newsletter-slider-wrapper {width: 100%;}
.newsletter-card {display: block; position: relative; width: 100%; height: auto; border-radius: 0px; overflow: hidden; text-decoration: none;}
.blue-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(0 150 225 / 60%); transition: opacity 0.3s ease; z-index: 1;}
#newsletter-slider {position: relative;}
#newsletter-slider .splide__slide {box-sizing: border-box; flex-shrink: 0; background-color: var(--darkBlue);}
#newsletter-slider .splide__slide a {pointer-events: none; cursor: default;}
#newsletter-slider .splide__slide.is-active a {pointer-events: auto; cursor: pointer;}
.splide__slide.is-active .blue-overlay, .newsletter-card:hover .blue-overlay {opacity: 0 !important;}
#newsletter-slider .splide__slide {margin-right: 60px !important;}
/* splide arrow */
#newsletter-slider .splide__arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 40px !important; height: 40px !important; min-width: 40px; min-height: 40px; padding: 0 20px; background: transparent; border: none;
	font-size: 2.5rem; color: #333333; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease, color 0.3s ease;}
#newsletter-slider .splide__arrow:hover {color: var(--medBlue);}
#newsletter-slider .splide__arrow:disabled {opacity: 0.2; cursor: not-allowed;}
#newsletter-slider .splide__arrow--prev {left: calc(59% - 25% - 65px);}
#newsletter-slider .splide__arrow--next {left: auto; right: calc(59% - 25% - 65px);}
@media (max-width: 1359.9px) {
	.issue-number span.large {font-size: 5rem;}
	.slide-text {font-size: 2rem;}
}
@media (max-width: 1199.9px) {
	#newsletter-slider .splide__arrow--prev {left: calc(50% - 25% - 50px);}
	#newsletter-slider .splide__arrow--next {left: auto; right: calc(50% - 25% - 50px);}
}
@media (max-width: 767.9px) {
	.newsletter-title {letter-spacing: 1px; margin-bottom: 16px;}
	html[lang="zh-hk"] .newsletter-title, html[lang="zh-cn"] .newsletter-title {letter-spacing: 4px;}
	.issue-number {font-size: 0.875rem;}
	.issue-number span.large {font-size: 3.75rem;}
	.slide-text {font-size: 1.125rem;}
	#newsletter-slider .splide__slide {margin-right: 30px !important;}
	#newsletter-slider .splide__arrow--prev {left: 8%;}
	#newsletter-slider .splide__arrow--next {right: 8%;}
}
@media (max-width: 575.9px) {
	#newsletter-slider .splide__arrow--prev {left: 5%;}
	#newsletter-slider .splide__arrow--next {right: 5%;}
}

/* =========================================================
   Key Publications 通用與缺角框線樣式
   ========================================================= */
.publication-item {position: relative; margin-bottom: 100px;}
.publication-item {display: grid; grid-template-columns: 35% 1fr; column-gap: 40px; align-items: start; padding-top: 40px; margin-top: 40px;}
.publication-item:last-of-type {margin-bottom: 0px;}
.pub-cover-wrapper {margin-top: -40px;}
.pub-cover-img {width: 100%; height: auto; margin-bottom: 40px;}
.pub-cover-wrapper a {display: inline-block;}
.pub-cover-wrapper a:focus-visible .pub-cover-img {opacity: 0.6;}
.pub-content-box {position: relative; padding: 25px 20px 20px 20px; border-right: 2px solid #009fe3;}
.pub-content-box::before {content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 2px; background-color: #009fe3;}
.pub-border-bottom {border-bottom: 2px solid #009fe3;position: absolute; bottom: 0; width: calc(100% - (var(--bs-gutter-x))); margin-left: calc(var(--bs-gutter-x) * .5);}
.pub-content-box {height: 100%; padding: 60px; padding-left: 0; margin-bottom: 30px;}
html[lang="zh-hk"] .pub-content-box {padding-right: 90px;}
.pub-title {font-size: 2.25rem; font-weight: 500; line-height: 1.1; color: #000000; text-align: right; margin-bottom: 0px; 
	position: absolute; bottom: -20px; right: -2px; padding: 30px 0px 0px 30px; background-color: #fff;}
html[lang="zh-hk"] .pub-title, html[lang="zh-cn"] .pub-title {letter-spacing: 4px;}
.pub-description {font-size: 1.375rem; font-weight: 300; line-height: 1.56; color: #000000; /*text-align: justify;*/ margin: 0;}
html[lang="zh-hk"] .pub-description, html[lang="zh-cn"] .pub-description {font-size: 1.3125rem; font-weight: 400; line-height: 1.81; color: #323232;}

@media (max-width: 1199.9px) {
	.publication-item {display: block;}
	.pub-cover-wrapper {width: 35%; float: left; margin-right: 35px; margin-bottom: 0px;}
	.pub-cover-img {width: 100%; height: auto; margin-bottom: 50px; display: block;}
	.pub-border-bottom {display: none;}
	.pub-content-box {position: relative; padding: 35px 20px 20px 20px; border-right: 2px solid #009fe3; border-bottom: 2px solid #009fe3;}
	.pub-content-box::before {content: ''; position: absolute; top: 0; right: 0; width: calc((100% - 35%) - 35px); height: 2px; background-color: #009fe3;}
	.pub-title {font-size: 1.5625rem; margin-bottom: 15px; position: absolute; top: -15px; bottom: unset; left: calc((35%) + 35px); right: auto; padding: 0px 30px 0px 0px; background-color: #fff;}
	.pub-description {font-size: 1.0625rem; font-weight: 300; line-height: 1.56; color: #000000; margin: 0;}
}
@media (max-width: 991.9px) {
	.publication-item {display: block;}
	.pub-cover-wrapper {width: 30%; float: left; margin-right: 35px; margin-bottom: 0px;}
	.pub-cover-img {width: 100%; height: auto; margin-bottom: 40px; display: block;}
	.pub-border-bottom {display: none;}
	.pub-content-box {position: relative; padding: 35px 20px 20px 20px; border-right: 2px solid #009fe3; border-bottom: 2px solid #009fe3;}
	.pub-content-box::before {content: ''; position: absolute; top: 0; right: 0; width: calc((100% - 30%) - 35px); height: 2px; background-color: #009fe3;}
	.pub-title {font-size: 1.5625rem; margin-bottom: 15px; position: absolute; top: -15px; bottom: unset; left: calc((30%) + 35px); right: auto; padding: 0px 30px 0px 0px; background-color: #fff;}
	.pub-description {font-size: 1.0625rem; font-weight: 300; line-height: 1.56; color: #000000; margin: 0;}
}
@media (max-width: 767.9px) {
	.publication-item {display: block; margin-top: 20px;}
	.pub-cover-wrapper {width: 50%; float: none; margin-right: 35px; margin-bottom: -50px;}
	.pub-cover-img {width: 100%; height: auto; margin-bottom: 40px; display: block;}
	.pub-border-bottom {display: none;}
	.pub-content-box {position: relative; padding: 35px 20px 20px 0px; height: auto;}
	.pub-content-box::before {content: ''; position: absolute; top: 0; right: 0; width: calc((100% - 50%) - 35px); height: 2px; background-color: #009fe3;}
	.pub-title {font-size: 1.5625rem; text-align: left; margin-bottom: 15px; position: relative; top: unset; bottom: unset; left: unset; right: unset; padding: 0px 30px 0px 0px; background-color: unset;}
	.pub-description {font-size: 1.0625rem; font-weight: 300; line-height: 1.56; color: #000000; margin: 0;}
}

/* section page */
.title-wrap {text-align: center; margin-top: 130px; text-shadow: var(--text-shadow);}
span.section-title {font-size: 2rem; font-weight: 600; line-height: 1.11; letter-spacing: 14px; text-transform: uppercase; color: #ffffff;}
html[lang="zh-hk"] span.section-title, html[lang="zh-cn"] span.section-title {font-size: 1.75rem; line-height: 2.5; letter-spacing: 1.5rem;}
.section-icon {width: 130px; margin: 0 auto 10px;}
.section-icon {background-image: var(--bg-icon); background-size: cover; background-repeat: no-repeat; transition: all 0.2s;}
.icon-title {font-size: 1.5rem; font-weight: 600; line-height: 1.14; letter-spacing: 0.25rem; text-transform: uppercase; text-align: center; color: var(--medBlue); margin-top: 25px; transition: all 0.2s;}
html[lang="zh-hk"] .icon-title, html[lang="zh-cn"] .icon-title {font-size: 1.4375rem; font-weight: 500; letter-spacing: 10px; margin-left: calc(10px / 1)}
.initiatives-link {display: inline-block; text-align: center;}
.initiatives-link:hover .section-icon, .initiatives-link:focus-within .section-icon {background-image: var(--bg-icon-hover);}
.initiatives-link:hover .icon-title, .initiatives-link:focus-within .icon-title {color: #000000;}
.section-intro-wrap {text-align: left; margin: 0 auto; max-width: 1008px; padding-bottom: 120px;}
.section-intro {font-size: 1.6875rem; font-weight: 400; line-height: 1.5; letter-spacing: 0.025rem; color: var(--medBlue); padding-bottom: 48px;}
html[lang="zh-hk"] .section-intro, html[lang="zh-cn"] .section-intro {font-size: 1.5625rem; line-height: 1.65; letter-spacing: 0.125rem;}
.section-content, .contact-company {font-size: 1.35rem; font-weight: 300; line-height: 1.6; letter-spacing: 0.4px; color: #000000; margin-bottom: 30px;}
.section-content a, .contact-company a {color: var(--darkBlue) !important;}
.section-content a:hover, .contact-company a:hover {color: var(--medBlue) !important;}
html[lang="zh-hk"] .section-content, html[lang="zh-cn"] .section-content {font-size: 1.25rem !important; font-weight: 400; color: #323232; line-height: 1.75; letter-spacing: 4px !important;}
html[lang="zh-hk"] .contact-company, html[lang="zh-cn"] .contact-company {font-size: 1.25rem; font-weight: 400; line-height: 1.6; letter-spacing: 0.25rem;}
html[lang="zh-hk"] .contact-address, html[lang="zh-cn"] .contact-address {font-size: 1.125rem; font-weight: 400; color: #323232; line-height: 1.83; letter-spacing: 0.125rem;}
.section-content ul.blue-dot li, .contact-company ul.blue-dot li {list-style-type: disc; padding-left: 16px; margin-bottom: 10px;}
html[lang="zh-hk"] .section-content ul.blue-dot li, html[lang="zh-hk"] .contact-company ul.blue-dot li, 
html[lang="zh-cn"] .section-content ul.blue-dot li, html[lang="zh-cn"] .contact-company ul.blue-dot li {list-style-type: disc; font-size: inherit; letter-spacing: inherit; padding-left: 16px; margin-bottom: 10px;}
.section-content:last-of-type {margin-bottom: 0;}
.section-content-wrap {text-align: center; margin: 0 auto; max-width: 1008px; padding-bottom: 100px;}
.section-content-head {font-size: 1.5rem; font-weight: 600; line-height: 1.54; letter-spacing: 8px; text-align: center; text-transform: uppercase; color: #000000; margin-left: calc(8px / 2); margin-bottom: 30px; padding-bottom: 30px;}
html[lang="zh-hk"] .section-content-head, html[lang="zh-cn"] .section-content-head {font-size: 1.6875rem; font-weight: 500; letter-spacing: 30px; margin-left: calc(30px / 2);}
.section-content-chart {display: flex; flex-wrap: wrap; margin-bottom: 30px;}
.section-content-chart .section-content {line-height: 1.23; text-align: left; border-left: 2px solid var(--medBlue); padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); margin-bottom: 30px;}
.section-content.with-icon {display: flex; flex-wrap: wrap; align-content: space-between;}
.principles-icon {width: 100%; padding-top: 50px;}
.principles-icon img {max-height: 87px;}
.principles-icon img.special {max-width: 205px; max-height: unset;}

.section-image-wrap {display: flex; flex-wrap: wrap; row-gap: 10px; column-gap: 10px; position: relative;}
.section-image-wrap a {width: 100%; display: inline-block;}
.section-image-wrap-full * {aspect-ratio: 2.52;}
.section-image-wrap-half * {aspect-ratio: 1.26;}
.section-image-wrap-full {width: 100%; max-width: 100%; position: relative; aspect-ratio: 2.52; background-size: cover; background-position: bottom; background-color: var(--darkBlue); overflow: hidden;}
.section-image-wrap-half {width: 50%; max-width: calc(50% - 5px); position: relative; aspect-ratio: 1.26; background-size: cover; background-position: bottom; background-color: var(--darkBlue); overflow: hidden;}
.section-image-wrap-full img, .section-image-wrap-half img {max-height: 400px;}
.section-image-layer {position: absolute; width: 100%; top: 0; background-color: var(--medBlue); opacity: 0; transition: all 0.2s;}
.section-image-wrap-full:hover .section-image-layer, .section-image-wrap-half:hover .section-image-layer, 
.section-image-wrap-full:focus-within .section-image-layer, .section-image-wrap-half:focus-within .section-image-layer {top: 0; opacity: 0.6;}
.section-image-layer-content {position: absolute; width: 100%; padding: 30px; padding-right: 26%; text-align: left;}
.section-image-layer-title {font-size: 1.875rem; font-weight: 500; line-height: 1.1; letter-spacing: 0; color: #ffffff; text-shadow: var(--text-shadow);}
html[lang="zh-hk"] .section-image-layer-title, html[lang="zh-cn"] .section-image-layer-title {font-size: 1.75rem; line-height: 1.25; letter-spacing: 1px;}
@media (max-width: 1199.9px) {
	.section-icon {width: 100px; margin-bottom: 16px;}
	.icon-title {font-size: 1.375rem; margin-top: 15px;}
	.initiatives-link {padding-bottom: 20px;}
}
@media (max-width: 767.9px) {
	span.section-title {font-size: 1.125rem; letter-spacing: 10px;}
	html[lang="zh-hk"] span.section-title, html[lang="zh-cn"] span.section-title {font-size: 1.125rem; letter-spacing: 20px;}
	h1 {font-size: 2.8125rem;}
	html[lang="zh-hk"] h1, html[lang="zh-cn"] h1 {font-size: 3rem; letter-spacing: 25px;}
	h6 {font-size: 0.9375rem;}
	.hero-section {min-height: 400px; max-height: 500px;}
	.section-icon {width: 70px; margin-bottom: 16px;}
	.icon-title {margin-top: 15px;}
	html[lang="zh-hk"] .icon-title, html[lang="zh-cn"] .icon-title {font-size: 1.25rem;}
	.initiatives-link {padding-bottom: 30px;}
	html[lang="zh-hk"] .initiatives-link, html[lang="zh-cn"] .initiatives-link {padding-bottom: 30px;}
	.section-intro-wrap {padding-bottom: 90px;}
	.section-intro {font-size: 1.375rem; line-height: 1.4125; padding-bottom: 30px;}
	.section-content {font-size: 1.0625rem;}
	.section-content.with-icon {justify-content: center;}
	html[lang="zh-hk"] .section-content, html[lang="zh-cn"] .section-content {font-size: 1.25rem; font-weight: 400; color: #323232; line-height: 1.65; letter-spacing: 0.125rem;}
	.principles-icon {padding-top: 24px;}
	.principles-icon img { }
	.section-content-head {font-size: 1.25rem;}
	html[lang="zh-hk"] .section-content-head, html[lang="zh-cn"] .section-content-head {font-size: 1.35rem;}
	.section-content-chart .section-content {text-align: center; border-left: none; margin-bottom: 0px;}
	.section-image-wrap-half * {aspect-ratio: 2.52;}
	.section-image-wrap-half {width: 100%; max-width: 100%; aspect-ratio: 2.52; background-size: cover; background-position: bottom;}
	.section-image-layer-content {padding: 15px; padding-right: 32%;}
	.section-image-layer-title {font-size: 1.3125rem; font-weight: 500; line-height: 1.1; color: #ffffff;}
}

/* third-level page */
.third-level .hero-section {height: calc(100vh - var(--header-height)); max-height: 600px; min-height: 600px; background-color: var(--darkBlue); margin-bottom: 0;}
.third-level .title-wrap.lg {max-width: 800px;}
.third-level .title-wrap.sm {max-width: 650px;}
.third-level .title-wrap span.section-title {font-size: 1.875rem; font-weight: 700; line-height: 1.11; letter-spacing: 0.5rem; text-transform: uppercase; color: var(--medBlue);}
html[lang="zh-hk"] .third-level .title-wrap span.section-title, html[lang="zh-cn"] .third-level .title-wrap span.section-title {
	font-size: 1.75rem; font-weight: 500; letter-spacing: 10px;}
.third-level h1 {font-size: 3.4375rem; font-weight: 500; line-height: 1.11; letter-spacing: 0.25rem; text-align: center; text-transform: uppercase; color: #000000;}
html[lang="zh-hk"] .third-level h1, html[lang="zh-cn"] .third-level h1 {font-size: 3.375rem; line-height: 1.3; letter-spacing: 5px;}
.third-level .title-wrap {min-width: 650px; text-align: center; border-top-left-radius: 30px; border-top-right-radius: 30px; background-color: #ffffff; 
	padding: 51px 100px 16px; margin-top: -110px; text-shadow: none; z-index: 1;}
.third-level .section-page-title {margin-top: 0px; padding-bottom: 30px; z-index: 10; position: relative;}
.page-anchor-wrap {text-transform: uppercase; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding-bottom: 0px; z-index: 100;}
.page-anchor-row {display: flex; flex-direction: row; align-items: center; padding-bottom: 20px;}
.page-anchor {font-size: 1.25rem; line-height: 1.166; font-weight: 600; letter-spacing: 0.25rem;}
html[lang="zh-hk"] .page-anchor, html[lang="zh-cn"] .page-anchor {letter-spacing: 6px;}
.page-anchor a {padding: 0 40px;}
.page-anchor:first-child a {/*border-left: 0px solid;*/}
.page-anchor:last-child a {/*border-right: 0px solid;*/}
.download-large-link {display: inline-block; max-width: 66.66%;}
.download-large {font-size: 1.125rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.025rem; text-align: left; padding: 24px; padding-left: 0; text-transform: unset; color: var(--linkBlue); 
	display: inline-block; display: flex; align-items: center; transition: color 0.2s ease;}
html[lang="zh-hk"] .download-large, html[lang="zh-cn"] .download-large {letter-spacing: 2px;}
.download-large:hover {color: var(--medBlue);}
.download-large .svg-mask-icon, .readmore .svg-mask-icon {display: inline-block; min-width: var(--size); height: var(--size); margin: var(--margin); background-color: var(--linkBlue);
	-webkit-mask: var(--icon-url) no-repeat center center / contain; mask: var(--icon-url) no-repeat center center / contain; transition: background-color 0.2s ease;}
.download-large:hover .svg-mask-icon, .link-placement:hover .readmore .svg-mask-icon {background-color: var(--medBlue);}
.download-large img {width: 35px; height: auto; margin: 0px 16px 0px 0px; filter: var(--linkFilter); transition: all 0.2s;}
.download-large:hover img {filter: none;}
.bar-black {width: 40px; border-bottom: 2px solid #000000; margin: 0 0;}
.bar-medBlue {width: 48px; border-bottom: 2px solid var(--linkBlue); margin: 0 auto 20px; padding: 10px;}
.download-regular {font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.025rem; text-transform: unset; color: var(--linkBlue); text-align: left; 
	display: flex; flex-direction: row; align-items: center; margin: 0px 0 14px 0; transition: color 0.2s;}
html[lang="zh-hk"] .download-regular {font-size: 0.9375rem; line-height: 1.3;}
.download-regular:hover, .download-regular:focus-visible {color: var(--medBlue);}
.download-regular div {display: flex;}
.download-regular .svg-mask-icon {display: inline-block; width: 24px; height: 24px; margin: 0px 16px 0px 0px; background-color: var(--linkBlue);
	-webkit-mask: url('../images/icon-download.svg') no-repeat center center / contain; mask:  url('../images/icon-download.svg') no-repeat center center / contain; transition: background-color 0.2s ease;}
.download-regular:hover .svg-mask-icon {background-color: var(--medBlue);}
.download-regular .svg-mask-icon {display: inline-block; min-width: var(--size); height: var(--size); margin: var(--margin); background-color: var(--linkBlue);
	-webkit-mask: var(--icon-url) no-repeat center center / contain; mask: var(--icon-url) no-repeat center center / contain; transition: background-color 0.2s ease;}
.download-regular:hover .svg-mask-icon {background-color: var(--medBlue);}
.download-regular img {width: 24px; height: auto; margin: 0px 8px 0px 0px; filter: var(--linkFilter); transition: filter 0.1s, color 0.2s;}
.download-regular:hover img, .download-regular:focus-visible img {filter: none;}
.download-regular.black {font-size: 1rem; font-weight: 500; line-height: 1.2; letter-spacing: 0.025rem; text-transform: unset; color: #000000; text-align: left; 
	display: flex; flex-direction: row; align-items: center; margin: 0px 0 6px 0; transition: color 0.2s;}
.download-regular.black:hover, .download-regular.black:focus-visible {color: var(--medBlue);}
.download-regular.black img {width: 24px; height: auto; margin: 0px 8px 0px 0px; filter: brightness(0) saturate(0%); transition: all 0.2s;}
.download-regular.black:hover img, .download-regular.black:focus-visible img {filter: none;}
.download-regular:last-of-type {margin-bottom: 0;}
.icon-open, .icon-close {width: 45px; padding: 10px;}

.readmore {font-size: 1rem; font-weight: 400; line-height: 1.2; letter-spacing: 0.025rem; text-transform: unset; color: var(--darkBlue); text-align: left; 
	display: flex; flex-direction: row; align-items: center; max-width: 150px; padding: 0px 0 6px 0; transition: color 0.2s;}
html[lang="zh-hk"] .readmore, html[lang="zh-cn"] .readmore {letter-spacing: 1px;} 
.readmore:hover, .readmore:focus-visible {color: var(--medBlue);}
.readmore img {width: 24px; height: auto; margin: 0px 0px 0px 8px; filter: brightness(0) saturate(100%) invert(12%) sepia(43%) saturate(5148%) hue-rotate(223deg) brightness(85%) contrast(104%); transition: filter 0.1s;}
.readmore:hover img, .readmore:focus-visible img {filter: none;}
.link-placement {/*display: block;*/ text-decoration: none; color: inherit; cursor: pointer;}
.link-placement:hover .readmore, .link-placement:focus-visible .readmore, 
.link-placement:hover .download-regular, .link-placement:focus-visible .download-regular {color: var(--medBlue);}
.link-placement:hover .readmore img, .link-placement:focus-visible .readmore img {filter: none;}
.link-placement:hover .download-regular .svg-mask-icon, .link-placement:focus-visible .download-regular .svg-mask-icon {background-color: var(--medBlue);}
.link-placement:hover .download-regular, .link-placement:focus-visible .download-regular {color: var(--medBlue);}
.link-placement:hover .download-regular .svg-mask-icon, .link-placement:focus-visible .download-regular .svg-mask-icon {background-color: var(--medBlue);}

.organisation-chart.section-intro-wrap {padding-bottom: 0;}
.head-of-psgo {background-color: var(--lightBlue)}
.open-chart-detial, .close-chart-detial {display: flex; justify-content: center; margin-bottom: 10px;}
.head-of-psgo {padding: 0px 85px 0px; max-height: 0; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; overflow: hidden; opacity: 0; transition: max-height 0.4s ease, opacity 0.35s ease, padding 0.35s ease;}
.head-of-psgo.active {max-height: 1000px; padding: 50px 85px 10px; opacity: 1;}
.open-chart-detial {max-height: 100px; opacity: 1; overflow: hidden; cursor: pointer; transition: max-height 0.2s ease, opacity 0.15s ease, filter 0.1s ease;}
.open-chart-detial:hover img, .open-chart-detial:focus-within img {filter: brightness(0) saturate(100%) invert(12%) sepia(43%) saturate(5148%) hue-rotate(223deg) brightness(85%) contrast(104%);}
.open-chart-detial.hide {max-height: 0 !important; opacity: 0 !important; pointer-events: none; transition: max-height 0.1s ease, opacity 0.1s ease;}
.close-chart-detial {cursor: pointer; display: flex; transition: opacity 0.15s ease, filter 0.1s ease;}
.close-chart-detial:hover img, .close-chart-detial:focus-within img {filter: brightness(0) saturate(100%) invert(12%) sepia(43%) saturate(5148%) hue-rotate(223deg) brightness(85%) contrast(104%);}
.team-photo {aspect-ratio: 16 / 9; object-fit: cover;}

.section-accordion-wrap {position: relative;}
.accordion-action-wrap {position: relative; display: flex; flex-wrap: wrap; padding-bottom: 60px;}
.accordion-head-block {--banner-height: 400px; height: var(--banner-height);; padding: 0 32px; display: flex; flex-direction: column; justify-content: flex-start;}
.accordion-intro-block {text-align: left; padding: 32px 0 0 32px;}
.accordion-intro {font-size: 1.5rem; font-weight: 400; line-height: 1.25; letter-spacing: 0.025rem; color: var(--medBlue); text-align: left; padding-bottom: 70px;}
html[lang="zh-hk"] .accordion-intro, html[lang="zh-cn"] .accordion-intro {font-size: 1.25rem; line-height: 1.45; letter-spacing: 2px;}
.accordion-links {padding-right: 40px;}
.accordion-content {text-align: left; padding: 32px 0 0 32px;}
ul.blue-dot {list-style-type: disc; padding-left: 16px;}
ul.blue-dot li {line-height: inherit; margin-bottom: 0.5rem;}
ul.blue-dot li::marker {color: var(--medBlue);}
.accordion-open {width: 290px; height: auto; background-color: #ffffff; border-top-left-radius: 20px; border-top-right-radius: 20px; display: flex; flex-wrap: wrap; align-items: center; 
	align-content: center; justify-content: center; flex-wrap: wrap; padding: 20px; transform: translateY(calc(var(--banner-height) - 99.5%)); 
	transition: transform 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease; cursor: pointer;}
.accordion-action-wrap.active .accordion-head-block {padding: 0 32px; display: flex; flex-direction: column; justify-content: flex-start;}
.accordion-action-wrap.active .accordion-open {background-color: var(--medBlue); border-radius: 0px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; padding: 20px; 
	transform: translateY(0);}
.accordion-action-wrap.active .accordion-open img {display: none;}
.accordion-action-wrap.active .accordion-open .accordion-open-title {color: #ffffff;}
html[lang="zh-hk"] .accordion-action-wrap.active .accordion-open .accordion-open-title, 
html[lang="zh-cn"] .accordion-action-wrap.active .accordion-open .accordion-open-title {color: #ffffff; padding-bottom: 0;}
.accordion-action-wrap.active .accordion-open .accordion-open-intro {color: #ffffff; padding-bottom: 2px;}
.accordion-open-title {font-size: 2.125rem; font-weight: 500; line-height: 1.075; color: #000000; text-align: center; padding-bottom: 6px;}
html[lang="zh-hk"] .accordion-open-title, html[lang="zh-cn"] .accordion-open-title {font-size: 1.875rem; line-height: 1.25; letter-spacing: 2px;}
.accordion-open-intro {font-size: 1.5rem; font-weight: 300; line-height: 1.143; color: #000000; text-align: center; padding-bottom: 20px;}
html[lang="zh-hk"] .accordion-open-intro, html[lang="zh-cn"] .accordion-open-intro {font-size: 1.375rem; line-height: 1.143; font-weight: 400;}
.accordion-content-close {padding: 50px 0 0 32px;}
.accordion-close {width: 290px; height: 47px; background-color: var(--medBlue); border-top-left-radius: 15px; border-top-right-radius: 15px; 
	display: flex; align-content: center; justify-content: center; flex-wrap: wrap;}
.accordion-open img, .accordion-close img {width: 30px; height: auto;}
.accordion-action-area {max-height: 0; opacity: 0; display: flex; flex-wrap: wrap; overflow: hidden; visibility: hidden; transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), visibility 0.5s ease, opacity 0.3s ease;}
.accordion-content-close {display: none;}
.accordion-action-wrap.active .accordion-action-area {opacity: 1; visibility: visible; transition: max-height 0.5s ease-in-out, opacity 0.5s ease-in-out;}
.accordion-action-wrap.active .accordion-content-close {display: block;}
.accordion-action-wrap:last-of-type {padding-bottom: 0;}
.accordion-open, .accordion-close {cursor: pointer;}

@media (max-width: 767.9px) {
	.head-of-psgo.active {padding: 30px 30px 10px;}
	.third-level .hero-section {min-height: 400px; max-height: 500px;}
	.third-level .title-wrap {min-width: 100%; border-top-left-radius: 0px; border-top-right-radius: 0px; padding: 51px 0 14px; margin-top: -110px; z-index: 1;}
	.third-level .section-page-title {padding-bottom: 18px;}
	.third-level .title-wrap span.section-title {font-size: 1.125rem;}
	.third-level h1 {font-size: 2.0625rem;}
	html[lang="zh-hk"] .third-level h1, html[lang="zh-cn"] .third-level h1 {font-size: 2.5rem; letter-spacing: 2px;}
	html[lang="zh-hk"] .third-level .title-wrap span.section-title, html[lang="zh-cn"] .third-level .title-wrap span.section-title {
	font-size: 1.35rem; font-weight: 500; letter-spacing: 10px;}
	.page-anchor-wrap {padding-bottom: 0;}
	.page-anchor-row {display: flex; flex-direction: row; align-items: center; padding-bottom: 20px;}
	.page-anchor {font-size: 1rem; text-align: center;}
	.page-anchor a {width: 86vw; width: calc(100vw - (var(--gutter-x) * 3)); display: inline-block; padding: 0 30px;}
	.download-large-link {max-width: 100%;}
	.download-large {font-size: 1.25rem;}
	.accordion-action-wrap {padding-bottom: 20px;}
	.accordion-intro-block, .accordion-content {padding: 30px 20px 0 20px;}
	.accordion-head-block {--banner-height: 200px; height: var(--banner-height); background-size: cover; padding: 0 20px !important;}
	.accordion-open-title {font-size: 1.3125rem; padding-bottom: 6px;}
	html[lang="zh-hk"] .accordion-open-title, html[lang="zh-cn"] .accordion-open-title {font-size: 1.3125rem;}
	.accordion-open-intro {font-size: 0.875rem;padding-bottom: 10px;}
	html[lang="zh-hk"] .accordion-open-intro, html[lang="zh-cn"] .accordion-open-intro {font-size: 1.125rem; line-height: 1.4;}
	.accordion-open, .accordion-close {width: 200px; height: auto; padding: 15px;}
	.accordion-open {padding-bottom: 8px;}
	.accordion-open img, .accordion-close img {width: 24px; height: auto;}
	.accordion-action-wrap.active .accordion-open {padding: 20px; padding-bottom: 14px;}
	.accordion-intro {font-size: 1.125rem; padding-bottom: 0px;}
	.accordion-links {padding-top: 0px;}
	.download-regular, .download-regular.black {font-size: 1rem;}
	.readmore {font-size: 1.0625rem;}
	.accordion-content-close {padding: 30px 0 0 20px;}
}

.whatsnews-wrap, .publications-wrap, .event-wrap {text-align: left;}
.newsletters-wrap {display: flex; flex-wrap: wrap; align-content: space-between; padding-bottom: 60px;}
.newsletters-content {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between;}
.whatsnews-image, .publications-cover, .event-cover {border: 1px solid #dedede; transition: opacity 0.2s ease, transform 0.2s ease;}
.link-placement .img-fluid {transition: opacity 0.2s ease, transform 0.2s ease;}
.whatsnews-image, .event-cover {aspect-ratio: 16 / 9; object-fit: cover;}
.current-issue {max-width: 95%;}
.news-title, .publications-title, .event-title {font-size: 1.5rem; font-weight: 500; line-height: 1.2; color: var(--medBlue); padding-bottom: 16px;}
html[lang="zh-hk"] .news-title, html[lang="zh-hk"] .publications-title, html[lang="zh-hk"] .event-title, 
html[lang="zh-cn"] .news-title, html[lang="zh-cn"] .publications-title, html[lang="zh-cn"] .event-title {font-size: 1.375rem; line-height: 1.35; letter-spacing: 1px;}
.publications-issue-title {font-size: 2.5rem; font-weight: 400; line-height: 1.15; color: #000000; padding-bottom: 20px; margin-bottom: 0;}
.news-group, .download-group, .video-group {padding-top: 12px;}
.news-group, .download-group, .video-group, .news-header {padding: 20px 24px;}
.video-group {display: flex; flex-direction: row;}
.publications-wrap .download-group {padding-left: 0; padding-right: 0;}
.section-content-head {scroll-margin-top: calc(var(--header-height, 80px) + 20px); /*padding-top: calc(var(--header-height) + 20px); margin-top: calc((var(--header-height) * -1) - 20px);*/}
.cover-wrap {padding-bottom: 60px;}
.link-placement:hover img, .link-placement:hover .whatsnews-image, .link-placement:hover .event-cover, .link-placement:hover .publications-cover, 
.link-placement:focus-visible .whatsnews-image, .link-placement:focus-visible .event-cover, .link-placement:focus-visible .publications-cover {opacity: 0.8;}
.media-wrap {padding-bottom: 30px;}
.media-wrap .download-group {border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; overflow: hidden;
	background-color: var(--lightBlue); transition: background-color 0.3s ease, transform 0.2s ease;}
.news-top, .interviews-top, .event-top {display: flex; justify-content: space-between; padding-bottom: 6px;}
.news-cat, .news-date, .news-category, .interviews-start, .interviews-date, .event-start, .event-date {font-size: 1.1rem; font-weight: 500; line-height: 1.14; letter-spacing: 2.5px; color: var(--darkBlue); text-transform: uppercase; padding-bottom: 8px;}
.news-date, .interviews-date, .event-date {letter-spacing: 1px;}
html[lang="zh-hk"] .news-cat, html[lang="zh-hk"] .news-date, html[lang="zh-hk"] .news-category, html[lang="zh-hk"] .interviews-start, html[lang="zh-hk"] .interviews-date, html[lang="zh-hk"] .event-start, html[lang="zh-hk"] .event-date,
html[lang="zh-cn"] .news-cat, html[lang="zh-cn"] .news-date, html[lang="zh-cn"] .news-category, html[lang="zh-cn"] .interviews-start, html[lang="zh-cn"] .interviews-date, html[lang="zh-cn"] .event-start, html[lang="zh-cn"] .event-date {
	font-size: 1rem; letter-spacing: 5px;}
html[lang="zh-hk"] .news-date, html[lang="zh-hk"] .interviews-date, html[lang="zh-hk"] .event-date, 
html[lang="zh-cn"] .news-date, html[lang="zh-cn"] .interviews-date, html[lang="zh-cn"] .event-date {letter-spacing: 1.5px;}
.news-date, .interviews-date, .event-date {min-width: 9rem; text-align: right;}
.news-content {position: relative; font-size: 1.125rem; max-height: 256px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0, 150, 255, 0.2) transparent;}
html[lang="zh-hk"] .news-content, html[lang="zh-cn"] .news-content {font-size: 1rem;}
.news-content::-webkit-scrollbar {width: 2px; /* 幼線寬度 */}
.news-content::-webkit-scrollbar-track {background: transparent; /* 背景透明 */}
.news-content::-webkit-scrollbar-thumb {background: rgba(0, 150, 255, 0.1); /* 半透明灰條 */ border-radius: 4px;}
.news-content::-webkit-scrollbar-thumb:hover {background: rgba(0, 150, 255, 0.4);}
.whatsnews-wrap {overflow: clip;}
.whatsnews-wrap .readmore {padding-top: 20px;}
.icon-video {width: 75px; min-width: 75px; padding-right: 20px;}
.media-wrap .event-start, .media-wrap .event-date {color: #000000;}
.media-wrap .event-title {color: var(--darkBlue);}
@media (max-width: 767.9px) {
	.news-group, .download-group, .video-group {padding-left: calc(var(--gutter-x) / 1); padding-right: calc(var(--gutter-x) / 1);}
	.news-title, .publications-title, .event-title {font-size: 1.3125rem;}
	.news-cat, .news-date, .interviews-start, .interviews-date, .event-start, .event-date {font-size: 0.875rem;}
	.current-issue {max-width: 100%;}
}

/* What's New dropdown */
.filter-dropdown-container {display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0; font-family: inherit; text-transform: uppercase;}
.filter-divider { color: #000000; font-weight: 300; user-select: none;}
.custom-dropdown {position: relative; display: inline-block;}
.dropdown-trigger {background: #ffffff; color: #000000; border: none; outline: none; padding: 8px 16px; font-size: 15px; font-weight: 600; letter-spacing: 1px; 
	cursor: pointer; display: flex; align-items: center; gap: 8px; transition: all 0.2s ease; border-radius: 4px;}
.dropdown-trigger:hover {background-color: #f5f5f5;}
.arrow-icon {display: inline-block; width: 10px; height: 10px; border-right: 1.5px solid #000000; border-bottom: 1.5px solid #000000; transform: rotate(45deg); margin-top: -3px; transition: transform 0.25s ease;}
.custom-dropdown.open .arrow-icon {transform: rotate(-135deg); margin-top: 3px;}
.dropdown-menu {position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: #ffffff; min-width: 180px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
	border: 1px solid #eaeaea; border-radius: 8px; padding: 0; margin: 8px 0 0 0; list-style: none; z-index: 999; display: none;}
.custom-dropdown.open .dropdown-menu {display: block !important;}
.dropdown-item {padding: 10px 18px; font-size: 1.125rem; font-weight: 500; color: #333333; letter-spacing: 0.125rem; cursor: pointer; text-align: center; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease;}
html[lang="zh-hk"] .dropdown-item, html[lang="zh-cn"] .dropdown-item {font-size: 1.125rem; font-weight: 500; letter-spacing: 0.125rem;}

.dropdown-item:hover { background-color: #f5f5f5; color: var(--darkBlue);}
.dropdown-item.active {font-weight: 700; color: var(--darkBlue); background-color: var(--lightBlue);}
.selected-text {text-transform: uppercase;}
@media (max-width: 767.9px) {
	.newsletters-content {padding-top: 20px;}
	.news-cat, .news-date, .interviews-start, .interviews-date {font-size: 0.9375rem;}
	.publications-title {font-size: 1.25rem;}
	.publications-issue-title {font-size: 1.875rem;}
	html[lang="zh-hk"] .publications-issue-title, html[lang="zh-cn"] .publications-issue-title {font-size: 2.25rem; line-height: 1.235;}
}

/* Event Pages */
.event-video {position: relative; margin-bottom: 80px;}
.event-video video {width: 100%; height: auto; display: block;}
.event-media-wrap {padding-bottom: 60px;}
.sound-btn {position: absolute; bottom: 0px; right: calc((var(--bs-gutter-x) * .5) + 20px); background: rgba(0, 150, 225, 0.8); font-size: 18px; font-weight: 500; color: #000;
    display: flex; align-items: center; padding: 10px 15px; border: none; border-radius: 8px 8px 0 0; cursor: pointer; transition: all 0.3s ease; z-index: 2;}
.sound-btn:hover, .sound-btn:focus-within {background: rgba(255, 255, 255, 1);}
.sound-btn img {min-width: 28px; height: auto; margin: 0 10px;}

/* accessibility */
*:focus-visible {outline: 0 !important; box-shadow: 0 0 0 .25rem #009ee150 !important;}
footer a:focus-within img {outline: 0 !important; box-shadow: 0 0 0 .25rem #009ee150 !important;}
footer .logo-block a:focus-visible {outline: 0 !important; box-shadow: none !important;}
header.site-header:focus, header.site-header:focus-visible {outline: 0 !important; box-shadow: none !important;}
.util-item:focus-visible {outline: 0 !important; box-shadow: none !important;}
.accessibility {height: 0px; width: 0px; display: inline-block; overflow: hidden; margin: 0; padding: 0; font-size: 0; text-indent: -9999px; position: absolute;}

/* ==========================================
   Fixed Header
   ========================================== */
/* Base Header */
.site-header {height: var(--header-height); z-index: 900;}
.site-header .psgo-content-container {position: relative; height: 100%; display: flex; justify-content: space-between; align-items: flex-start;}
.site-header .header-right-content {margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; height: 100%; overflow-y: clip; overflow-x: visible; z-index: 1049;}
.logo-card {position: absolute; left: var(--gutter-x); top: var(--logoTop); width: var(--logoWidth); padding: 0px; background-color: #fff; border-radius: 0 0 16px 16px; z-index: 1050;  transition: all 0.2s;}
/* Utility Nav */
.utility-nav {display: flex; align-items: center; gap: 10px; margin-top: 14px; margin-bottom: 0px;}
.utility-nav .util-item {color: #333; position: relative; padding: 8px 12px; border-radius: 5px; text-decoration: none; transition: color 0.2s;}
.utility-nav .util-item:hover { color: #0066cc;}
.util-layer {display: none; z-index: 10; transition: all 0.2s;}
.util-layer .util-item-wrap {width: 100%; margin-top: 18px;}
.util-layer .util-item-title {display: flex; justify-content: flex-end; padding: 8px 12px;}
.util-item.active .util-layer {position: absolute; top: -14px; right: -5px; height: var(--header-height); padding: 0 5px; border-radius: 0 0 10px 10px;
display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; background-color: var(--submenu-bg); z-index: 10;}
.util-subicon {position: relative; padding: 5px 10px; filter: brightness(0); transition: filter 0.2s;}
.util-subicon:hover, .util-subicon:focus-within, .util-subicon.active {filter: none;}
#psgo_searchform_desktop {width: calc(100% - 40px); width: 100%; margin-right: auto; padding: 0 12px;}
.util-subicon.searchbtn img {height: 14px;}
.util-subicon.searchbtn {position: absolute; bottom: 25px; right: 5px;}
input.searchbox {font-size: 14px; width: 100%; height: 30px; background-color: transparent; border: 0; border-bottom: 1px solid #000000;}
.util-search .util-layer {width: 300px;}
.util-share .util-layer {width: 296px;}
.util-fonts .util-layer {width: 105px;}
.util-langs .util-layer {width: 134px;}
.util-fonts .util-layer .util-subicon, .util-langs .util-layer .util-subicon {padding: 5px 10px 5px 0px;}
.util-share .util-layer .util-subicon:last-of-type {margin-right: 4px;}
.util-item img {width: auto; height: 20px; filter: brightness(0); transition: filter 0.2s;}
.util-item:hover img, .util-item:focus img, .util-item.active img  {filter: none;}
.util-item:hover, .util-item:focus, .util-item.active  {background-color: var(--submenu-bg);}

.nav {gap: var(--navGap); margin-right: -10px; transition: all 0.2s;}
.nav-link {padding: 8px 20px 34px; transition: all 0.2s;}
@media (max-width: 1120px) {.nav {gap: calc(var(--navGap) / 3);}}
@media (max-width: 992px) {
.nav {gap: calc(var(--navGap) / 2); margin: 0;} 
/*.nav-link {padding: var(--bs-nav-link-padding-y) calc(var(--bs-nav-link-padding-x) / 2);}*/
.nav-link {padding-left: calc(var(--bs-nav-link-padding-x) / 2); padding-right: calc(var(--bs-nav-link-padding-x) / 2);}
}
.main-nav, .mega-menu-column {letter-spacing: 0.25px; transition: opacity 0.2s;}
.main-nav .nav-link {font-size: 1.0625rem; font-weight: 400; line-height: 1.3125rem; color: #000000; border-radius: 10px 10px 0 0;}
html[lang="zh-hk"] .main-nav .nav-link, html[lang="zh-cn"] .main-nav .nav-link {font-size: 1rem; letter-spacing: 0.125rem;}
.main-nav .nav-link:hover, .main-nav .nav-link.active, .main-nav .nav-link.current, .main-nav .nav-link:focus-visible {
	color: var(--linkBlue) !important; background-color: var(--lightBlue); border-radius: 10px 10px 0 0;}
.main-nav .nav-link.pdcp {color: var(--darkBlue);}
.main-nav .nav-link.pdcp:hover {color: var(--lightBlue);}
.main-nav .nav-item:last-child .nav-link, .utility-nav .util-item:last-child {/*padding-right: 0;*/}
.main-nav .nav-item {position: relative;}
.main-nav.dim {opacity: 0.5;}
.main-nav.dim .nav-link {pointer-events: none}

.mega-menu-wrapper {visibility: hidden;}
.mega-menu-content {display: flex; position: relative; max-width: calc(var(--max-content-width) - (var(--gutter-x) * 2) - var(--logoWidth)); 
	margin-left: calc(var(--logoWidth) + var(--gutter-x)); padding-right: var(--gutter-x);}
.mega-menu-column {border-left: 1px solid var(--medBlue);}
.submenu-title {font-size: 1.0625rem; font-weight: 500; line-height: 1.25; color: var(--medBlue); margin-bottom: 1.25rem;}
html[lang="zh-hk"] .submenu-title, html[lang="zh-cn"] .submenu-title {letter-spacing: 3px;}
.submenu-list a {font-size: 0.9375rem; font-weight: 400; line-height: 1.275; letter-spacing: 0; color: var(--darkBlue); text-decoration: none; display: block; margin-bottom: 1.25rem; transition: color 0.2s;}
html[lang="zh-hk"] .submenu-list a, html[lang="zh-cn"] .submenu-list a  {line-height: 1.5; letter-spacing: 1px; margin-bottom: 1rem;}
.submenu-title a:hover, .submenu-title a.current {color: var(--darkBlue);}
.submenu-list a:hover, .submenu-list a.current {color: var(--medBlue);}

.mobile-menu-toggle, .utility-mobile, .utility-mobile-wrap {display: none;}
@media (max-width: 991.98px) {
	.main-nav .nav-link {font-size: 1rem;}
}
@media (max-width: 767.9px) {
	.logo-card {top: 0; left: 0;}
	.mobile-menu-toggle {margin-left: auto; flex-shrink: 0;}
	.header-right-content {display: none !important;}
	.header-right-content.active {display: flex !important; flex-direction: column; align-items: unset; width: 100%; position: fixed; top: 0; left: 0;
		height: 100vh; height: 100dvh; max-height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
		background-color: var(--submenu-bg); padding: 65px 30px; z-index: 1051;}
	.utility-mobile-wrap {display: flex; flex-wrap: wrap;}
	.utility-mobile {display: flex; position: relative; margin: 3px 0px; border-color: var(--medBlue) !important;}
	.utility-mobile .util-item-title {color: #333; position: relative; padding: 10px 0px; border-radius: 5px; text-decoration: none; transition: color 0.2s;}
	.util-item-title img {width: auto; height: 30px; filter: brightness(0); transition: filter 0.2s;}
	.mobile-util-wrap.util-fonts {margin-left: -12px}
	.mobile-util-wrap .util-subicon {padding: 0px 10px;}
	.mobile-util-wrap .util-subicon {position: relative; padding: 0px 10px; display: flex; align-items: center;}
	.mobile-util-wrap .util-subicon img {filter: brightness(0); transition: filter 0.2s; position: relative; z-index: 10;}
	.mobile-util-wrap .util-subicon.active img {filter: none; position: relative; z-index: 10;}
	.util-subitem {position: relative; display: inline-flex; align-items: center;}
	.util-subitem img {width: auto; height: 16px; filter: brightness(0); transition: filter 0.2s;}
	.util-langs .util-subitem img {height: 20px; position: relative; z-index: 100;}
	.utility-nav {display: flex; align-items: center; gap: 10px; margin-top: 14px; margin-bottom: 0px; padding: 8px 0px;}
	.util-search, .util-share, .util-fonts, .util-langs {display: none;}
	.util-search .util-layer {display: flex;}
	.util-layer .util-item-title {display: flex; justify-content: flex-end; padding: 8px 12px;}
	#psgo_searchform_mobile {width: calc(100% - 40px); width: 100%; margin-right: auto; padding: 0 12px;}
	.util-subicon.searchbtn img {height: 20px;}
	.util-subicon.searchbtn {position: absolute; padding: 10px 10px; right: 0px; bottom: 8px;}
	input.searchbox {font-size: 20px; width: 100%; height: 40px; background-color: transparent !important; border: 0; border-bottom: 1px solid #000000;}
	.mobile-util-wrap {display: flex;}
	.mobile-menu-toggle {display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 22px;
	background: transparent; border: none; cursor: pointer; padding: 0; margin-top: 30px; /*margin-right: 10px;*/ z-index: 1060;}
	.mobile-menu-toggle:focus-visible {outline: 2px solid var(--primaryBlue, #0a2373); outline-offset: 4px; border-radius: 2px;}
	.hamburger-line {width: 100%; height: 2px; background-color: #000000; border-radius: 2px; transition: transform 0.3s ease-in-out, opacity 0.2s ease-in-out; transform-origin: center;}
	.mobile-menu-toggle.active .hamburger-line:nth-child(1) {transform: translateY(9.5px) rotate(45deg);}
	.mobile-menu-toggle.active .hamburger-line:nth-child(2) {opacity: 0;}
	.mobile-menu-toggle.active .hamburger-line:nth-child(3) {transform: translateY(-9.5px) rotate(-45deg);}
	.mobile-submenu-wrap {margin-top: 10px; padding: 0px 20px 0px;}
	.mobile-sub-column {margin-bottom: 25px;}
	.mobile-sub-title {font-size: 1.0625rem; font-weight: 500; color: var(--medBlue); margin-bottom: 8px;}
	.mobile-sub-column ul li a {color: var(--darkBlue); font-size: 1rem; line-height: 1.4; display: block; padding: 4px 0;}
	.main-nav {padding-top: 60px;}
	.main-nav .nav-link {font-size: 1.375rem; font-weight: 400; line-height: 1.3125rem; color: #000000; border-radius: 10px 10px 0 0;}
	html[lang="zh-hk"] .main-nav .nav-link, html[lang="zh-cn"] .main-nav .nav-link {font-size: 1.375rem; letter-spacing: 0.125rem;}
	.nav-link {padding: 8px 20px 26px;}
	.mega-menu-wrapper {display: none;}
	.mobile-submenu-wrap {display: none;}
	.mobile-submenu-wrap.active {display: block;}
	.has-submenu > .nav-link {display: inline-flex; align-items: center; gap: 10px;}
	.has-submenu > .nav-link::after {content: ""; display: inline-block; width: 11px; height: 11px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
		transform: rotate(45deg); transform-origin: 70% 60%; transition: transform 0.25s ease;}
	.has-submenu > .nav-link[aria-expanded="true"]::after {transform: rotate(-135deg);}
}
@media (max-width: 1644px) {
	.mega-menu-wrapper {left: var(--gutter-x) !important; max-height: calc(100vh - var(--header-height)); overflow-y: auto;}
	.mega-menu-content {margin-left: calc(var(--logoWidth) + var(--gutter-x));}
}
@media (min-width: 767.9px) {
	.utility-nav, .main-nav {margin-right: -12px;}
	.mega-menu-wrapper, .has-submenu .menu-arrow {opacity: 0;}
	/* Desktop Submenu Layer */
	.mega-menu-wrapper {
		position: fixed; top: var(--header-height); left: calc(50% - (var(--max-content-width) / 2) + var(--gutter-x)); right: 0; background-color: #ffffff; 
		border-top-left-radius: 0px; border-bottom-left-radius: 16px; padding: 0; z-index: 1040;
		opacity: 0.75; max-height: 0; overflow: hidden; visibility: hidden; transform: translateY(-5px); pointer-events: none;
		transition: opacity 0.35s ease, max-height 0.4s cubic-bezier(0, 1, 0, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease; overflow-y: auto;
    }
	.mega-menu-wrapper.active {opacity: 1; max-height: calc(100vh - var(--header-height)); padding: 30px 0 40px 0; border-top: 1px solid var(--medBlue);
		visibility: visible; transform: translateY(0); pointer-events: auto;}
	.has-submenu.active .menu-arrow {position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%);
		width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 1.25rem solid var(--submenu-bg);
		z-index: 890; display: block; opacity: 1; transition: opacity 0.25s ease;}
	.has-submenu.active .menu-arrow {position: absolute; bottom: 0%; left: 50%; transform: translateX(-50%);
		width: 1.25px; height: 0; border-left: none; border-right: none; border-bottom: 25px solid var(--medBlue);
		z-index: 890; display: block; opacity: 1; transition: opacity 0.25s ease;}
}
/* WeChat Modal */
.wechat-modal-overlay {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 2000; align-items: center; justify-content: center;}
.wechat-modal-overlay.active {display: flex;}
.wechat-modal-content {position: relative; background: #ffffff; padding: 30px; border-radius: 12px; width: 320px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.15);}
.wechat-modal-close {position: absolute; top: 10px; right: 15px; background: none; border: none; font-size: 24px; cursor: pointer; color: #888;}
.wechat-modal-header {display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 1.1rem; font-weight: bold; color: var(--darkBlue, #0a2373); margin-bottom: 20px;}
.wechat-modal-header .wechat-icon {width: 24px; height: 24px;}
.wechat-qrcode-body {display: flex; justify-content: center; align-items: center; padding: 10px; background: #f8f9fa; border-radius: 8px; margin-bottom: 15px;}
.wechat-qrcode-body img {display: block; margin: 0 auto;}
.wechat-modal-tip {font-size: 0.85rem; color: #666; margin: 0; line-height: 1.4;}

/* Back to Top */
.back-to-top-btn {position: fixed; bottom: 30px; right: var(--gutter-x); /*left: calc(50% + 822px - 100px);*/ width: 34px; height: 34px; 
	border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 920;
	opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
.back-to-top-btn.active {opacity: 1; visibility: visible; transform: translateY(0);}
.back-to-top-btn:hover {transform: translateY(-3px);}
.back-to-top-btn:active {transform: translateY(0);}

/* footer */
footer a:hover, footer a.current, footer a:focus-visible {color: var(--medBlue);}
footer img {width: 100%; min-width: var(--min-width); max-width: var(--max-width); height: auto; max-height: 76px;}
.footer-support {text-align: right;}
.footer-support a {padding-left: 20px;}
.pull-left {float: left;}
.pull-right {float: right; display: flex; justify-content: flex-end;}
@media (max-width: 767.9px) {
	.footer-support a {padding-left: 16px;}
	.footer-support a:first-child {padding-left: 0px;}
	.footer-left, .footer-support {text-align: center;}
}

/* Sitemap */
.sitemap-btn-wrap {width: 100%; margin: 0 auto; text-align: center; padding-top: 80px; padding-bottom: 24px;}
.sitemap-btn {margin: 0 auto; padding: 0px 40px 0 52px; border-left: 2px solid #000; border-right: 2px solid #000; transition: all 0.3s ease;}
.sitemap-btn span {font-family: 'Roboto', 'Noto Sans HK', sans-serif; font-size: 1.25rem; font-weight: 500; line-height: 1; letter-spacing: 0.75rem; text-transform: uppercase; color: #000000; margin: 0;  margin-left: calc(0.75rem / 2); transition: all 0.3s ease;}
html[lang="zh-hk"] .sitemap-btn span, html[lang="zh-cn"] .sitemap-btn span {font-family: 'Roboto', 'Noto Sans HK', sans-serif; font-size: 1.125rem; letter-spacing: 1.5rem; margin-left: calc(1.5rem / 2);}
.sitemap-btn:hover {border-left: 2px solid var(--medBlue); border-right: 2px solid var(--medBlue);}
.sitemap-btn:hover * {color: var(--medBlue);}
.sitemap-wrap {max-width: 100%; background-color: var(--submenu-bg);}
.sitemap-wrap {max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; transition: max-height 0.4s ease-in-out, opacity 0.3s ease, visibility 0.3s;}
.sitemap-wrap.active {max-height: 1700px; opacity: 1; visibility: visible;}
.sitemap-btn {cursor: pointer;}
.sitemap-content {max-width: 1524px; display: flex; flex-wrap: wrap; padding: 50px 0px; margin: 0 auto;}
.sitemap-wrap .first-level {display: flex; align-items: center; width: 100%; margin-bottom: 40px;}
.sitemap-wrap .first-level-link {font-size: 1.125rem; font-weight: 500; letter-spacing: 0.125rem; text-transform: uppercase; transition: color 0.3s ease;}
html[lang="zh-hk"] .sitemap-wrap .first-level-link, html[lang="zh-cn"] .sitemap-wrap .first-level-link {letter-spacing: 3px;}
.sitemap-wrap .first-level-link.current {color: var(--darkBlue);}
.sitemap-wrap .first-level-link:hover, .first-level-link:focus-visible {color: var(--medBlue);}
.sitemap-wrap .second-level {display: flex; align-items: center; width: 100%; margin-bottom: 10px;}
.sitemap-wrap .second-level-link {font-size: 1.125rem; font-weight: 500; color: var(--darkBlue); transition: color 0.3s ease;}
html[lang="zh-hk"] .sitemap-wrap .second-level-link, html[lang="zh-cn"] .sitemap-wrap .second-level-link {font-size: 1.125rem; font-weight: 400; letter-spacing: 0.125rem;}
.sitemap-wrap .second-level-link.current {color: var(--darkBlue);}
.sitemap-wrap .second-level-link:hover, .second-level-link:focus-visible {color: var(--medBlue);}
.sitemap-wrap .third-level {display: flex; align-items: center; width: 100%; margin-bottom: 10px;}
.sitemap-wrap .third-level-link {font-size: 1rem; font-weight: 300; color: var(--darkBlue); transition: color 0.3s ease;}
html[lang="zh-hk"] .sitemap-wrap .third-level-link, html[lang="zh-cn"] .sitemap-wrap .third-level-link {font-size: 1rem; font-weight: 400; letter-spacing: 0.075rem;}
.sitemap-wrap .third-level-link.current {color: var(--darkBlue);}
.sitemap-wrap .third-level-link:hover, .third-level-link:focus-visible {color: var(--medBlue);}
.sitemap-wrap .nitiatives-wrap {display: flex; gap: 24px; margin-left: 16px;}

.medBlue-bar {width: 2px; height: 20px; margin-right: 14px; background-color: var(--medBlue);}
.no-bar {width: 2px; height: 20px; margin-right: 14px; background-color: transparent;}
.first-level-link {margin-bottom: 0;}

@media (max-width: 1199.9px) {
.sitemap-wrap .nitiatives-wrap {display: flex; flex-wrap: wrap; gap: 0px;}
.sitemap-wrap .nitiatives-wrap > div {margin-bottom: 15px; padding-right: 15px;}

}
@media (max-width: 767.9px) {
	.sitemap-btn {padding: 2px 30px;}
	.sitemap-btn * {font-size: 0.9375rem;}
	.sitemap-content {padding: 50px 0px 30px;}
	.sitemap-wrap .first-level {margin-bottom: 15px;}
	.sitemap-wrap .second-level {margin-bottom: 10px;}
	.sitemap-wrap .second-level {display: flex; align-items: center; justify-content: flex-start; padding-top: 8px;}
	.sitemap-wrap .third-level {margin-bottom: 10px;}
	.sitemap-wrap .nitiatives-wrap {display: none;}
	.sitemap-wrap .nitiatives-wrap.active {display: block; margin-bottom: 20px;}
	.sitemap-wrap .first-level-link {font-size: 1.125rem;}
	.sitemap-wrap .second-level-link {font-size: 0.9375rem;}
	.sitemap-wrap .third-level-link {font-size: 0.875rem;}
	.sitemap-wrap .first-level-link {display: inline-flex; align-items: center; gap: 10px;}
	.sitemap-wrap .first-level-link.has-arrow::after {content: ""; display: inline-block; width: 11px; height: 11px; border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor; transform: rotate(45deg); transform-origin: 70% 60%; transition: transform 0.25s ease;}
	.sitemap-wrap .first-level.active .first-level-link.has-arrow::after {transform: rotate(-135deg);}
}

/* ==========================================
   Mobile menu special
   ========================================== */
.mobile-menu-open footer {z-index: 1;}
.mobile-menu-open .back-to-top-btn {z-index: 1;}

/* ==========================================
   Scroll Animation 基礎設定
   ========================================== */

/* 1. 預設隱藏與初始位移（提高選擇器權重） */
div.fade-in,
div.fade-in-up,
div.fade-in-left,
div.fade-in-right,
.psgo-content-container.fade-in-up {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

div.fade-in-up,
.psgo-content-container.fade-in-up {
    transform: translateY(200px);
}

div.fade-in-left {
    transform: translateX(-100px);
}

div.fade-in-right {
    transform: translateX(100px);
}

/* 2. 當加上 .is-visible 時顯示並歸位（雙重 class 權重，不需要用 !important） */
div.fade-in.is-visible,
div.fade-in-up.is-visible,
div.fade-in-left.is-visible,
div.fade-in-right.is-visible,
.psgo-content-container.fade-in-up.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
}

/* 3. 延遲工具類別 */
.delay-100 { transition-delay: 0.1s !important; }
.delay-200 { transition-delay: 0.2s !important; }
.delay-300 { transition-delay: 0.3s !important; }

/* for UAT only
.util-item.util-langs, .mobile-util-wrap.util-langs {display: none !important;}
.utility-mobile {border: none !important;} */