/* Technetium PHP Framework version 2.9
   Author: Tony Leung
   E-mail: info@technetium.info */

@charset "utf-8";

/* html tags */
:root {
	--bs-black:#000000;
	--bs-white:#FFFFFF;
	--bs-gutter:40px;
	--transition-duration:0.8s;
}
*, *:before, *:after {
	box-sizing:border-box;
	transition-property:none;
	transition-duration:0.15s;
	transition-timing-function:ease-in-out;
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
} 
html {
	height:100%;
	font-size:20px;
}
body {
	height:100%;
	min-height:100%;
	max-height:999em;
	margin:0;
	padding:0;
	background-color:var(--body-bg,#FFFFFF);
	background-image:var(--scene-slideshow-bg);
	background-repeat:no-repeat;
	background-size:100% 100%;
	font-family:"Object Sans", Arial, "Noto Sans HK", "微軟正黑體", "Microsoft JhengHei", Helvetica, sans-serif;
	font-size:1rem;
	color:var(--bs-primary,#000000);
	-webkit-text-size-adjust:none;
}
aside, footer, header, hgroup, nav, section, artivle, iframe {
	display:block;
}
article {
	margin:0 0 30px 0;
}
article:last-child {
	margin-bottom:0;
}
iframe {
	border:none;
}
h1, h2, h3, h4, h5, h6 {
	margin:20px 0 10px 0;
	font-weight:400;
}
p {
	margin:0 0 0.8em 0;
	line-height:1.3em;
}
pre {
	margin:0 0 0.8em 0;
}
ol, ul {
	margin:0 0 0.8em 0;
	padding:0 0 0 20px;
}
li {
	margin:0 0 5px 0;
}
li ol, li ul {
	margin:5px 0 0 0;
}
li ol {
	list-style-type:lower-latin;
}
li ol ol {
	list-style-type:lower-roman;
}
h1:first-child, h2:first-child, h3:first-child,
h4:first-child, h5:first-child, h6:first-child {
	margin-top:0;
}
h1:last-child, h2:last-child, h3:last-child,
h4:last-child, h5:last-child, h6:last-child,
p:last-child, pre:last-child,
ol:last-child, ul:last-child, dl:last-child {
	margin-bottom:0;
}
a {
	color:#707070;
	text-decoration:none;
	outline:none;
	-webkit-transition:all 0.2s;
	-moz-transition:all 0.2s;
	transition:all 0.2s;
}
a:hover {
	color:#333333;
	text-decoration:underline;
}
a:focus {
	outline:none;
}
a * {
	cursor:pointer;
}
a[id][name] {
	float:left;
}
h1 a, h1 a:hover, h1 a:focus, h1 a:active,
h2 a, h2 a:hover, h2 a:focus, h2 a:active,
h3 a, h3 a:hover, h3 a:focus, h3 a:active,
h4 a, h4 a:hover, h4 a:focus, h4 a:active,
h5 a, h5 a:hover, h5 a:focus, h5 a:active,
h6 a, h6 a:hover, h6 a:focus, h6 a:active {
	color:inherit;
	text-decoration:inherit;
}
img {
	border:none;
}
article img {
	max-width:100%;
}
hr, div.hr {
	margin:15px 0;
	border:none;
	border-top:2px dotted #CCCCCC;
}
sup {
	position:relative;
	top:-4px;
	vertical-align:baseline;
}
sub {
	position:relative;
	top:2px;
	vertical-align:baseline;
}
::selection {
	background:#454545;
	color:#FFFFFF;
}
::-moz-selection {
	background:#454545;
	color:#FFFFFF;
}


/* shared classes */


/* website framework */
.page-wrapper {
	width:100%;
	min-height:100%;
	overflow:hidden;
	position:relative;
	display:flex;
	flex-direction:column;
}

.page-header {
	width:100%;
	position:fixed;
	top:3rem;
	z-index:3;
}
.page-header .btn {
	color:inherit;
}
.page-header > .hgroup {
	position:absolute;
	right:3.5rem;
	display:flex;
	flex-direction:column;
	align-items:flex-end;
}
.page-header .book-title {
	margin-bottom:1rem;
	font-size:2rem;
	font-weight:bold;
	line-height:1.3;
	text-align:right;
}
.page-header .pagination {
	display:block;
}
.page-header .pagination .badge {
	border:none;
	font-size:1.4rem;
	font-weight:bold;
	color:var(--bs-white);
}
.page-header .pagination .badge + .badge {
	margin-left:1.2rem;
}
.page-header .nav-block {
	position:absolute;
	left:3.5rem;
	display:flex;
}
.page-header .nav-block .btn {
	width:4rem;
	height:4rem;
	padding:0;
	font-size:2.4rem;
	font-weight:bold;
	line-height:4rem;
	text-align:center;
}
.page-header .nav-block .btn.nav-trigger {
	position:relative;
	border-radius:50%;
	background:var(--bs-primary);
	color:var(--bs-white);
}
.page-header .nav-block .btn.nav-trigger:hover {
	background:var(--bs-primary-darker);
}
.page-header .nav-block .btn.nav-trigger .icon {
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	transition-property:opacity;
	transition-duration:var(--transition-duration);
}
.page-header .nav-block .btn.nav-trigger .icon-list,
.page-header .nav-block .btn.nav-trigger.active .icon-times {
	opacity:1;
}
.page-header .nav-block .btn.nav-trigger .icon-times,
.page-header .nav-block .btn.nav-trigger.active .icon-list {
	opacity:0;
}
.page-header .nav-block .language {
	padding:0;
	list-style:none;
	display:flex;
}
.page-header .nav-block .language:not(:first-child) {
	margin-left:2rem;
}
.page-header .nav-block .language li {
	margin:0;
}

.page-content {
	position:relative;
	flex-grow:1;
}

.scene {
	height:auto;
	top:0;
	bottom:0;
	padding:11rem 3.5rem 3.5rem 3.5rem;
}

#preload {
	width:1px;
	height:1px;
	overflow:hidden;
	position:fixed;
	top:-1px;
}

#debug {
	position:fixed;
	bottom:1rem;
	right:1rem;
	color:#FFFFFF;
	text-shadow:0 0 10px rgba(0,0,0,0.5);
	z-index:9999;
}


/* page specific styles */
.scene#slideshow .tab-content {
	position:relative;
}
.scene#slideshow .tab-content > .tab-pane {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
}
.scene#slideshow .tab-content > .tab-pane.show {
	position:relative;
	z-index:9;
}
.scene#slideshow .tab-content .card {
	height:100%;
	border:none;
	background:none;
}
.scene#slideshow .tab-content .card-image {
	overflow:hidden;
	flex-shrink:0;
}
.scene#slideshow .tab-content .card-image img {
	width:100%;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.scene#slideshow .tab-content .card-image .img-holder {
	overflow:hidden;
	position:relative;
	border-radius:1.25rem;
}
.scene#slideshow .tab-content .card-image .img-holder .enlarge {
	width:2.1rem;
	height:2.1rem;
	position:absolute;
	bottom:0.4rem;
	left:0.4rem;
	border-radius:50%;
	background:var(--bs-primary);
	font-size:1.25rem;
	color:var(--bs-white);
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
}
.scene#slideshow .tab-content .card-image .img-holder .enlarge:before {
	content:'\e906';
	font-family:fisherieshall-icons;
}
.scene#slideshow .tab-content .card-image .swiper-wrapper {
	height:auto;
}
.scene#slideshow .tab-content .card-image .swiper-pagination {
	height:0.6rem;
	position:relative;
	bottom:auto;
	margin-top:1rem;
	display:flex;
	justify-content:center;
}
.scene#slideshow .tab-content .card-image .swiper-pagination-bullet {
	width:0.6rem;
	height:0.6rem;
	margin:0 0.6rem;
	border-radius:50%;
	background:var(--bs-primary);
	display:block;
}
.scene#slideshow .tab-content .card-image .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
	opacity:0.3;
}
.scene#slideshow .tab-content .card-image .preload {
	width:1px;
	height:1px;
	overflow:hidden;
	position:fixed;
	top:-1px;
	left:-1px;
}
.scene#slideshow .tab-content .card-image .preload img {
	max-width:none;
	max-height:none;
}
.scene#slideshow .tab-content .card-body {
	padding:0;
}
.scene#slideshow .tab-content .card-title {
	margin:0;
	font-size:3.5rem;
	font-weight:bold;
	line-height:1.2;
}
.scene#slideshow .tab-content .card-meta {
	padding:0;
	list-style:none;
}
.scene#slideshow .tab-content .card-meta li {
	margin:0;
} 
html[data-lang=zh-hk] .scene#slideshow .tab-content .card-title {
	font-size:4.2rem;
}
html[data-lang=zh-hk] .scene#slideshow .tab-content .card-content,
html[data-lang=zh-hk] .scene#slideshow .tab-content .card-meta {
	font-size:1.2rem;
	line-height:2rem;
}

.scene#navigation {
	top:10rem;
	bottom:0;
	padding-top:3.5rem;
}
.scene#navigation .scroll-wrapper {
	--scrollbar-width:0.5rem;
	--scrollbar-color:var(--bs-primary);
	height:100%;
	overflow:auto;
	scrollbar-width:thin;
	scrollbar-color:var(--scrollbar-color) transparent;
}
.scene#navigation .scroll-wrapper::-webkit-scrollbar {
	width:var(--scrollbar-width);
}
.scene#navigation .scroll-wrapper::-webkit-scrollbar-track {
	background:transparent;
}
.scene#navigation .scroll-wrapper::-webkit-scrollbar-thumb {
	border-radius:calc(var(--scrollbar-width) * 0.5);
	background:var(--scrollbar-color);
}
.scene#navigation nav + nav {
	margin-top:6rem;
}
.scene#navigation .nav-group-header {
	margin-bottom:1.5rem;
	display:flex;
	flex-wrap:nowrap;
	align-items:center;
}
.scene#navigation .nav-group-title {
	font-size:1.4rem;
	flex-shrink:0;
	align-self:flex-start;
}
.scene#navigation .nav-group-note {
	max-width:28rem;
	font-size:0.8rem;
	flex-shrink:0;
}
.scene#navigation .nav-group-title + .nav-group-note {
	margin-left:1.5rem;
}
.scene#navigation .nav {
	margin-top:-1.75rem;
}
.scene#navigation .nav > li {
	width:15.75rem;
	margin:1.75rem 1.75rem 0 0;
	display:flex;
	flex-direction:column;
}
.scene#navigation .nav .btn {
	width:100%;
	padding:0;
	margin-top:auto;
}
.scene#navigation .nav .btn .title {
	font-size:1.2rem;
	color:var(--bs-primary);
	line-height:1.5rem;
	text-align:left;
	white-space:nowrap;
	display:flex;
	align-items:flex-start;
}
.scene#navigation .nav .btn .title .badge {
	width:2.5rem;
	top:auto;
	margin-right:0.5em;
	padding:0.25em;
	font-size:1rem;
	flex-shrink:0;
}
.scene#navigation .nav .btn img {
	max-width:100%;
}
html[data-lang=zh-hk] .scene#navigation .nav .btn .title {
	font-size:1.5rem;
}
.scene-bg[for=navigation] {
	background-image:var(--scene-navigation-bg);
}
