*, *:before, *:after {
  box-sizing:border-box;
  padding:0;
  margin:0;
}
img,picture{vertical-align:middle;max-width:100%;}
figure{margin:0}
html{
	font-size:12px;
	overflow-y:overlay;
	scrollbar-width:none; /* Firefox */
	-ms-overflow-style:none; /* IE 10+ */
}
body{
	max-width:100%;
	height:100vh;
	margin:0;
	padding:0;
	font-family:'Noto Sans TC',sans-serif;
  font-family:Arial, "Hiragino Kaku Gothic Pro W3", Meiryo, sans-serif;
  background-color:#2d3042;
  position:relative;
	color:#efefef;
	scrollbar-width:none; /* Firefox */
	-ms-overflow-style:none; /* IE 10+ */
	display:flex;
	place-content:center;
}
body::-webkit-scrollbar{
	display:none;
}
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
.backgroundVideoPlayer {
	/* object-fit:cover; */
	/* strech to fill fullscreen */
  object-fit:fill;
  width:100vw;
  height:100vh;
  position:absolute;
}
#loader{
	position:absolute;
	left:0;
	right:0;
	top:0;
	bottom:0;
	opacity:.9;
	background-color:#333;
}
header{
	width:100%;
	height:20em;
  padding:3em 3em 3em 5em;
	display:grid;
	grid-template-columns:auto auto;
}
/* header>.logo {
	color:#fad648;
	font-family:'Source Sans Pro', sans-serif;
	font-weight:normal;
	font-size:4em;
	text-align:left;
	text-shadow:0 3px 4px #000;
}

header>.logo>small {
 display:block;  
 font-size:.75em;
} */

.headerLogo{
	opacity:.8;
	width:12vw;
}
.footerLogo1{
	opacity:.8;
	width:10vw;
	display:inline-block;
}
.footerLogo2{
	opacity:.8;
	width:8vw;
	display:inline-block;
}

header>nav {
	justify-self:flex-end;
	opacity:.5;
	-webkit-transition:opacity .35s ease, -webkit-transform .25s ease;
	transition:opacity .35s ease, transform .25s ease;
}

header>nav>div
,header>nav>ul {
	background-color:#d3d3d344;
	padding:0 1.5em 1em 1.5em;
	border-radius:0 0 25px 25px;
	font-size:1.5em;
	text-shadow:1px 3px 4px #000, -1px -2px 2px #000;
	cursor:pointer;
}
header>nav>div{
	padding:1em 1.5em .5em 1.5em;
	border-radius:25px 25px 0 0;
	color:#fad648;	
}
header>nav>ul>li {
	display:block;
}
header>nav>ul>li>a {
	display:block;
	padding:.1em 0 .1em .5em;
	min-width:10em;
	-webkit-transition:color .15s ease-out, background-color .15s ease-out, text-shadow .25s ease-out;
	transition:color .15s ease-out, background-color .15s ease-out, text-shadow .25s ease-out;
}
[data-autoFill]{
	position: relative;
}
[data-autoFill]::before {
	content: attr(data-autoFill);
  color: #eee;
	position: absolute;
	padding:.1em 0 .1em .5em;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
	width:0;
	overflow: hidden;
	transition:width .15s ease-in;
}
[data-autoFill]:hover:not(.selected)::before {
	width: 100%;
	transition:width 1s cubic-bezier(.7,0,.84,0) .15s;
}


header>nav>ul>li>a.selected{
	color:#FFFFFF;
	text-shadow:
	0 -1px 0 #cbc, 0 1px 0 #edf, 0 0 8px #DcE;
	border-radius:10px;
  background-color:rgba(255, 255, 255,.15);
}

header>nav>ul>li>a:hover{
	border-radius:10px;
	background-color:rgba(255, 255, 255,.3);
}
header>nav>ul>li>a.viewGroupPlaying
,.nowPlaying
{
	color:#FFFFFF;
	text-shadow:
		0 -1px 0 #0cf,
		0 1px 0 #00c,
		0 0 12px #09f;
}

.itemContainer {
	position:absolute;
	bottom:6em;
	display:flex;
	padding:0 3em;
	justify-content:center;
	width:100%;
	-webkit-transition:opacity .5s ease, -webkit-transform .75s ease;
  transition:opacity .5s ease, transform .75s ease;
}
.cardContainer {
	position:relative;
	display:grid;
	padding:2em;
	grid-auto-flow:column;
	/* grid-template-columns:repeat(var(--cardPerPage), auto); */
	gap:3em;
	overflow-y:hidden;
	overflow-x:scroll;
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
	perspective:1920px;
  scroll-snap-points-x:repeat(100px);
	scroll-snap-type:x mandatory;
	/* 	scroll-padding:50%; */
	scrollbar-width:none; /* Firefox */
	-ms-overflow-style:none; /* IE 10+ */
	-webkit-transition:opacity .35s ease, -webkit-transform .25s ease;
  transition:opacity .35s ease, transform .25s ease;
}

.cardContainer:hover .card {
	-webkit-transform:rotateY(35deg);
	transform:rotateY(35deg);
}

.cardContainer .card:hover ~ .card {
	opacity:.5;
	-webkit-filter:brightness(.7);
	-webkit-transform:rotateY(-35deg);
	filter:brightness(.7);
	transform:rotateY(-35deg);
}

.cardContainer .card:hover {
	opacity:1;
	-webkit-filter:brightness(1);
  -webkit-transform:rotateY(0deg) scale(1.2);
	filter:brightness(1);
  transform:rotateY(0deg) scale(1.2);
}
.cardContainer::-webkit-scrollbar {
 width:2em;
}
/* 
 .cardContainer::-webkit-scrollbar-track-piece:start {
	background:transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}

.cardContainer::-webkit-scrollbar-track-piece:end {
	background:transparent url('images/backgrounds/scrollbar.png') repeat-y !important;
}
 */
.cardContainer::-webkit-scrollbar-track {
	-webkit-box-shadow:none !important;
	background-color:transparent;
}
.cardContainer::-webkit-scrollbar{
	background-color:transparent;
}
.cardContainer::-webkit-scrollbar-thumb {
	background-color:transparent;
}
.cardContainer:hover{
  scrollbar-width:thin; /* Firefox */
  -ms-overflow-style:none; /* IE 10+ */
}
.cardContainer:hover::-webkit-scrollbar-track {
  -webkit-box-shadow:none !important;
  background-color:transparent !important;
}
.cardContainer:hover::-webkit-scrollbar {
  width:6px !important;
	background-color:transparent;
}
.cardContainer:hover::-webkit-scrollbar-thumb {
  background-color:#acacac;
}

.card {
	--width:180px;
	--height:150px;
	opacity:.7;
	position:relative;
	z-index:2;
/*   display:flex;
  align-items:center;
  justify-content:center; */
  height:var(--height);
  width:var(--width);
  border-radius:25px;
  background-color:#ffffff;
  overflow:hidden;
	cursor:pointer;
	-webkit-filter:brightness(.9);
	filter:brightness(.9);
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transition:all .35s ease;
	transition:all .35s ease;
  /* scroll-snap-align:center; */
	scroll-snap-align:start;

}
/* 
.card::before {
  content:'';
  position:absolute;
  display:block;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:25px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.8), rgba(0, 0, 0, 0.8));
  z-index:2;
  opacity:0;
  -webkit-transition:all 0.5s;
  transition:all 0.5s;
}

.card:hover:before {
  opacity:1;
} */

.card:hover .content {
  opacity:1;
}

.card .content {
	white-space:pre-wrap;
  z-index:3;
  opacity:.6;
  -webkit-transform:translateY(-5%);
  -webkit-transition:opacity .35s ease, -webkit-transform .25s ease;
  transform:translateY(-5%);
  transition:opacity .35s ease, transform .25s ease;
	font-family:'Noto Sans TC',sans-serif;
	font-size:1.4em;
	font-weight:700;
	font-family:'Noto Sans TC',sans-serif;
	margin:.8em;
	line-height:1.2;
	text-align:center;
	color:#000;
}
.card:hover{
	opacity:1;
	border-radius:0;
}
.card:hover .content {
  opacity:1;
  -webkit-transform:translateY(-20%);
	transform:translateY(-20%);
}
.cardControl{
	--size:2em;
	--opacity:0;
	position:absolute;
	z-index:1;
	bottom:calc( var(--size)/2 + 50% + 1em );	
	cursor:pointer;
}
.cardControl.left{
	left:0;
}
.cardControl.right{
	right:var(--size);
}
.-cg-arrow_lft::before
,.-cg-arrow_rgt::before
{
	content:"";position:absolute;z-index:10;
	-webkit-clip-path:var(--cph);clip-path:var(--cph);
	width:var(--size);height:var(--size);background-color:currentColor;
}
.-cg-arrow_lft::before
{
	--cph:polygon(
		10% 50%,40% 15%,40% 33%,90% 33%,
		90% 67%,40% 67%,40% 85%);
}
.-cg-arrow_rgt::before
{
	--cph:polygon(
		90% 50%,60% 85%,60% 67%,10% 67%,
		10% 33%,60% 33%,60% 15%
	);
}
.-cg-play
,.-cg-439002
,.-cg-439007
,.-cg-534001
{
	--u:5em;
	width:var(--u);
	height:var(--u);
	color:#fff;
	z-index:100;
	cursor:pointer;
	display:flex;
	align-items:center;
	place-content:center;
}
.cg-playList{
	--u:1em;
	position:relative;
	display:inline-block;
	transform: translate(.25em, -0.75em);/*dunno why*/
	margin-right:1em;
}
.cg-playList::before
,.cg-playList::after
,.-cg-534001::before
,.-cg-play::before
,.-cg-439002::before
,.-cg-439007::before
,.crossed::after
{
	content:"";
	position:absolute;
	clip-path:var(--cph);
	width:var(--u);
	height:var(--u);
	background-color:currentColor;
	--cg_wg:1;
	--a:9%;
	--cph:polygon( 0 calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)), calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)) calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)), calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)) 0, calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)) 0, calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)) calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)), 100% calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)), 100% calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)), calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)) calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)), calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)) 100%, calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)) 100%, calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)) calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)), 0 calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)) );	
	-webkit-transition:clip-path .25s ease-out;
	transition:clip-path .25s ease-out;
}
.crossed::after{
	-webkit-transform: scale(.35) translate(30px,0px) rotate(45deg);
	transform: scale(.35) translate(30px,0px) rotate(45deg);
	opacity: 0.7;
	color: black;
}

.cg-playList::before {
	--cph:polygon(75% 100%,-10% 100%,-10% 0%,100% 0%,100% 20%,-10% 20%,-10% 40%,100% 40%,100% 60%,-10% 60%,-10% 80%,75% 80%);
	box-shadow:
	inset 0 -2px 0,
	-2px 4px 0 -2px,
	0 -2px 0 0;
}
.-cg-534001::before
,.-cg-439002::before
,.-cg-439007::before
{
	--u:2.4em;
}

.-cg-439002::before{
	--cph:polygon(10% 0%,40% 0%,40% 110%,60% 110%,60% 0%,90% 0%,90% 100%,60% 100%,60% 105%,40% 105%,40% 100%,10% 100%);
}
.-cg-439007::before{
	--startX:60%;
	--barWidth:5%;
	--barGap:10%;
	--cph:polygon(
		0% 40%,20% 40%,40% 20%,50% 20%,50% 80%,40% 80%,20% 60%,-5% 60%,
/* 	0% 30%,20% 30%,40% 10%,50% 10%,50% 90%,40% 90%,20% 70%,-5% 70%, speaker-body*/
		-5% 105%,
		var(--startX) 105%,
		var(--startX) 0%,
		calc(var(--startX) + var(--barWidth)) 0%,
		calc(var(--startX) + var(--barWidth)) 105%,
		calc(var(--startX) + var(--barWidth) + var(--barGap)) 105%,
		calc(var(--startX) + var(--barWidth) + var(--barGap)) 0%,
		calc(var(--startX) + var(--barWidth)*2 + var(--barGap)) 0%,
		calc(var(--startX) + var(--barWidth)*2 + var(--barGap)) 105%,
		calc(var(--startX) + var(--barWidth)*2 + var(--barGap)*2) 105%,
		calc(var(--startX) + var(--barWidth)*2 + var(--barGap)*2) 0%,
		calc(var(--startX) + var(--barWidth)*3 + var(--barGap)*2) 0%,
		calc(var(--startX) + var(--barWidth)*3 + var(--barGap)*2) 105%,
		-5% 105%
	);
}
div.componentDisplaying>.cg-playList::after
,.-cg-play::before
{
	--cph:polygon( 20% 0,90% 50%,20% 100%, 20% 90%, 20% 80%, 20% 70%, 20% 60%, 20% 50%, 20% 40%, 20% 30%, 20% 20%, 20% 10% );
}
.cg-playList::after{
	--u:.5em;
	transform: translate(0.8em, 0.75em);
}
.-cg-534001.selected::before{
	--cph:polygon(
		0 calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)),
		15% calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)),
		40% calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)),
		65% calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)),
		80% calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)),
		100% calc(50% - var(--cg_wg)*var(--a)*var(--ajm,1)),
		100% calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)),
		80% calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)),
		65% calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)),
		40% calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)),
		15% calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1)),
		0 calc(50% + var(--cg_wg)*var(--a)*var(--ajm,1))
	);
}
#controlContainer
,.footerTextContainerControl
{
	position:absolute;
	bottom:3em;
	display:flex;
	justify-content:center;
	gap:6em;
}
.footerTextContainerControl{
	pointer-events:auto;
	right:3em;
	transform:translate(2.5em,-1.5em) scale(.5);
}
.footer{
	pointer-events:none;
	position:absolute;
	bottom:3em;
	left:3em;
	right:3em;
	gap:3em;
	display:grid;
	grid-template-columns: auto auto 1fr;
	justify-content:flex-start;
}
.footerText{
	place-self:flex-end;
	opacity:.5;
	font-size:1.4em;
	color:#fff;
}

.positionRelative{
	position: relative;
}

/* 
.mainVideoPlayer{
	opacity:0;
	position:absolute;
}

.mainVideoPlayer{
	left:3em;
	right:3em;
	top:3em;
	bottom:3em;
} */
[data-tooltip]:hover~.tooltip{
	--opacityDelay:0s;
	--transformDelay:.25s;
}

.tooltip{
	opacity:0;
	--opacityDelay:1.1s;
	--transformDelay:1s;
	white-space:pre-wrap;
	pointer-events:none;
	position:absolute;
	z-index:10;
	padding:.5em;
  border-radius:3px;
  background-color:hsla(0, 0%, 20%, 0.9);
  color:#fff;
  font-size:1.4em;
	line-height:1.4;
}
.tooltipFontSize2X{
	font-size:2.8em;
}

.pointerEventsNone{
	pointer-events:none;
}
.displayNone{
	display:none;
}

.circularButton:hover
,.squaredButton:hover
{
	opacity:.9;
	-webkit-transform:translate(-2px,-2px);
	transform:translate(-2px,-2px);
	-webkit-filter:.4px;
	filter:.4px;
	box-shadow:3px 3px 3px 1px black;
}
.circularButton
,.circularButton:active
,.squaredButton
,.squaredButton:active
{
	transform:unset;
	/* opacity:.4; */
	-webkit-filter:blur(1px);
	filter:blur(1px);
	box-shadow:
	-.5px -.5px 1px #aaa6,
	1px 1px 1px 1px #aaa;
	-webkit-transition:opacity .25s ease,-webkit-transform.25s ease,-webkit-filter .25s ease,box-shadow .25s ease;
	transition:opacity .25s ease,transform.25s ease,filter .25s ease,box-shadow .25s ease;
}

.circularButton{
	border-radius:50%;
}
@media(max-width:1024px){
	header{
		padding:1em 0 1em 1em;
		opacity:.8;
	}
	/*
	header>.logo {
		font-size:1.5em;
	} 
	header>nav{
		position:absolute;
		bottom:5em;
		right:1em;
	} */
	header>nav>div
	,header>nav>ul {
		font-size:1.2em;
		padding:1em 1em .5em 1em;
		border-radius:0;
	}
	header>nav>ul {
		padding:.5em 1em;
	}
	.backgroundVideoPlayer {
		height:unset;
		top:5.5em;
	}
	#controlContainer
	{
    top:70%;
    left: 0;
		right: 0;
	}
	#itemContainerControl
	,#backgroundVideoControl
	,#backgroundVideoSoundControl
	,#footerTextContainerControl
	,.cardControl
	{
		display:none;
	}
	.itemContainer
	,#logo
	,#backgroundVideoControlTooltip
	{
		transform:unset !important;
		opacity:1 !important;
	}
	#controlContainer
	{
		display:block;
	}
	#backgroundVideoControlTooltip
	{
		position:relative; /* dunno why absolute won't work*/
		text-align: center !important;
		left:0 !important;
		right:0 !important;
		width:100% !important;
		font-size:1.2em;
	}
	.content{
		font-size:1.1em;
	}
	.itemContainer{
		top:50%;
	}
	.cardContainer {
		padding:.5em;
		-webkit-transform-style:unset;
		transform-style:unset;
		perspective:unset;
		gap:1em;
	}
	.card{
		--width:36vw;
		--height:30vw;
		opacity:1;
	}
	.cardContainer::-webkit-scrollbar{
		width:0em;
	}
	.cardContainer:hover{
		scrollbar-width:none;
	}
	.-cg-play
	,.-cg-439002
	,.-cg-439007
	,.-cg-534001
	{
		--u:3em;
	}
	.-cg-play::before
	,.-cg-439002::before
	,.-cg-439007::before{
		--u:1.2em;
	}
	.footer{
		left:1em;
		right:1em;
		bottom:1em;
		gap:.5em;
	}
	
	.headerLogo{
		opacity:1;
		width:22vw;
	}
	.footerLogo1{
		opacity:1;
		width:18vw;
	}
	.footerLogo2{
		opacity:1;
		width:16vw;
	}
	.footerText{
		font-size:1em;
	}
	.webCounter{
		width: 1.7em;
		vertical-align: baseline;
	}
}