@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* reset styles */
html {line-height: 1.5;-webkit-text-size-adjust: 100%;width:100%;height:100%;padding: 0;}body {margin: 0;width: 100%;height: 100%;padding: 0;}main {display: block;}img {border-style: none;}button, input, optgroup, select, textarea {font-family: inherit;font-size: 100%;line-height: 1.5;margin: 0;}button, input {overflow: visible;}button, select {text-transform: none;}button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;}button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {border-style: none;padding: 0;}button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;}legend {box-sizing: border-box;color: inherit;display: table;max-width: 100%;padding: 0;white-space: normal;}progress {vertical-align: baseline;}textarea {overflow: auto;}[type="checkbox"], [type="radio"] {box-sizing: border-box;padding: 0;}[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button {height: auto;}[type="search"] {-webkit-appearance: textfield;outline-offset: -2px;}[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}::-webkit-file-upload-button {-webkit-appearance: button;font: inherit;}details {display: block;}summary {display: list-item;}template {display: none;}
body, html{
	font-size: 16px;
}
/* reset styles */


* {
	--borderRadius: 4em;

	--colorCyan:#00A3C6;

	--colorBlack:#000000;
	--colorWhite: #ffffff;

	--colorText:var(var(--colorBlack));

	
	--colorButtonNormal: rgba(0,0,0,0.5);
	--colorButtonHover: var(--colorCyan);

	--colorHoverLine:rgba(0,163,198,0.3);

	--hoverOutline:0 2px 10px rgba(0,195,237,0.7);
	
	--fontSansSerif: "Source Sans 3", sans-serif;
	--fontSerif:"Playfair Display", sans-serif;

	--fontNormal:var(--fontSansSerif);
	--fontHeader:var(--fontSerif);

	--buttonTransition: all 0.3s ease-in-out !important;
	font-family: var(--fontNormal);

    --nextIcon:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5702 11.5997L8.97021 6.99973L10.024 5.94598L15.6777 11.5997L10.024 17.2535L8.97021 16.1997L13.5702 11.5997Z" fill="%23000000"/></svg>');
    --nextIconWhite:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.5702 11.5997L8.97021 6.99973L10.024 5.94598L15.6777 11.5997L10.024 17.2535L8.97021 16.1997L13.5702 11.5997Z" fill="%23ffffff"/></svg>');
    --prevIcon:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0777 11.5998L15.6777 16.1998L14.624 17.2535L8.97023 11.5998L14.624 5.94604L15.6777 6.99979L11.0777 11.5998Z" fill="%23000000"/></svg>');
    --prevIconWhite:url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.0777 11.5998L15.6777 16.1998L14.624 17.2535L8.97023 11.5998L14.624 5.94604L15.6777 6.99979L11.0777 11.5998Z" fill="%23ffffff"/></svg>');
	--closeIcon:url('data:image/svg+xml,<svg width="30" xmlns="http://www.w3.org/2000/svg" height="30" viewBox="0 0 30 30" fill="none"><mask maskUnits="userSpaceOnUse" width="24" style="mask-type:alpha" id="mask0_24_60" x="3" y="3" height="24"><rect width="24" height="24" x="3" y="3" fill="%23D9D9D9"/></mask><g mask="url(%23mask0_24_60)"><path d="M10.8849 19.5998L9.82141 18.5363L13.5944 14.7633L9.82141 11.0153L10.8849 9.95178L14.6579 13.7248L18.4059 9.95178L19.4694 11.0153L15.6964 14.7633L19.4694 18.5363L18.4059 19.5998L14.6579 15.8268L10.8849 19.5998Z" fill="white"/></g></svg>');
	--filterIcon:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="white"><path d="M455.39-180q-15.08 0-25.23-10.16Q420-200.31 420-215.39v-231.53L196.08-731.38q-11.54-15.39-3.35-32 8.2-16.62 27.66-16.62h519.22q19.46 0 27.66 16.62 8.19 16.61-3.35 32L540-446.92v231.53q0 15.08-10.16 25.23Q519.69-180 504.61-180h-49.22ZM480-468l198-252H282l198 252Zm0 0Z"/></svg>');
}


/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
	scrollbar-width: auto;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
	width: 3px;
}

.tippy-content{
	font-family: var(--fontRegular);
	font-weight: 300 !important;
	padding: 0.8em 1em !important;
}

.hidden{
	display: none !important;
}
.blur{
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

/* Bottom Nodes Switcher */
.bottomNode{
	transition: all 0.3s ease-in-out !important;
	box-shadow: 0 0 0 2px #ffffff80 !important;
}
body.hasHover .bottomNode:hover{
	background-color: var(--colorButtonHover) !important;
	box-shadow: var(--hoverOutline) !important;
}

.vignetteTop, .vignetteBottom{
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
	pointer-events: none !important;
	opacity: 0.5 !important;
}
.vignetteBottom{
	background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%) !important;
}

/* Languages */
.languagesContainer > .ggskin_svg{
	position: relative !important;
	margin: 1.2rem 1rem 0 0.5rem;
	transition: transform 0.3s ease-in-out !important;
}
.languagesContainer.expanded > .ggskin_svg{
	transform: rotate(90deg) !important;
}
.languagesContainer{
	display: flex !important;
    justify-content: flex-end;
    align-items: flex-start;
	flex-direction: row;
}
.languagesSelector{
    display: flex !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin: 1rem 0 0 0;
    flex-direction: column-reverse;
    justify-content: flex-end;
    align-items: flex-end;
    height: 5em !important;
    overflow-y: hidden;
	gap:0.2rem;
}
.languagesSelector > div{
    font-size: 0.9rem !important;
	display: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 4em !important;
	cursor:pointer !important;
	overflow: hidden !important;
}
.languagesSelector > div.selected, .languagesSelector.expanded > div{
  display: block !important;
}

.languagesSelector > div > div{
	font-size: 0.9rem !important;
	overflow: hidden !important;
	color:var(--colorWhite);
	transition: color 0.2s ease-in-out !important;
	text-align: right !important;
}
body.hasHover .languagesSelector > div:hover > div{
	color:var(--colorButtonHover);
}
html [lang^="en"] .langZh,
html [lang^="en"] .langJa{
	display: none !important;
}
html [lang^="zh"] .langEn,
html [lang^="zh"] .langJa{
	display: none !important;
}
html [lang^="ja"] .langEn,
html [lang^="ja"] .langZh{
	display: none !important;
}

/* Languages */


/* Bottom Node Name */
.bottomCenterContainer{
	display: flex !important;
    justify-content: center;
    align-items: flex-end;
	gap:10px;
}
.bottomCenterContainer > div{
	position: relative !important;
	top:0 !important;
	left:0 !important;
	bottom: auto !important;
	right: auto !important;
	transform: none !important;
	margin: 10px 0;
}
.nodeName{
	cursor: pointer !important;
	user-select: none !important;
}
.nodeName, .nodeName > div{
	background: none !important;
	height: 40px !important;
    display: flex !important;
    align-items: center;
	overflow: hidden !important;
}
.nodeName > div{
	font-family: var(--fontHeader) !important;
	font-size: 2rem !important;
	color:var(--colorWhite) !important;
}

@media (max-width: 1300px) {
	.nodeName > div{
		font-size: 1.5rem !important;
	}
}
@media (max-width: 600px) {
	.nodeName > div{
		font-size: 1.0rem !important;
	}
}

@media (max-width: 1100px) {
	.languagesContainer{
		display: none !important;
	}
	.bottomRightContainer, .bottomLeftContainer{
		align-items: flex-start !important;
		align-content: flex-start !important;
	}
}
/* Bottom Node Name */

/* Bottom  Buttons */
.bottomRightContainer, .bottomLeftContainer{
	display: flex !important;
	justify-content: flex-end;
	align-items: flex-end;
	max-width: 50%;
	flex-wrap: wrap;
	left: auto !important;
	right: auto !important;
	
}
.bottomRightContainer{
	right: 0 !important;
	justify-content: flex-end;
}
.bottomLeftContainer{
	left: 0 !important;
	justify-content: flex-start;
}

.bottomRightContainer > div, .bottomLeftContainer > div{
	position: relative !important;
	top:0 !important;
	left:0 !important;
	margin: 10px 10px 10px 0 !important;
}
.bottomLeftContainer > div{
	margin: 10px 0px 10px 10px !important;
}
/* Bottom  Buttons */

/* Map */
.ggskin_map{
	background-color: #0c141e !important;
}
.mapPin{
	cursor: default !important;
}
.mapPinAnimate{
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-name: bgCircleSize;
    transform-origin: center center;
    animation-timing-function: ease-out;
}
@keyframes bgCircleSize {
    0% {
        transform: scale(0.9);
        opacity: 1;
    }

    25% {
        transform: scale(0.9);
        opacity: 1;
    }

    100% {
        transform: scale(2);
        opacity: 0;
    }
}
.centerMapButtonHidden{
	transform: scale(0) !important;
}
/* Map */