/*THREE*/

#main-canvas {
	position: fixed;
	z-index: -100;

	top:0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*NAVIGATION*/
#sideNavigation.dotstyle {
    position: absolute;

    z-index: 500;
    right: 25px;
    top: 50%;
    transform: translate(0, -50%);
}

/*INFO WINDOWS*/

#main-window {
	position: fixed;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;

	display: flex;
}

#main-window .info-fill {
	position: relative;
	height: 100%;
	flex: 1;
}

#main-window .center-blank {
	height: 100%;
	width: auto;
}

#main-window .info-fill .info-window {
	--sideOffset: 10%;
	position: absolute;
	bottom: 30px;
	padding: 0px;
	width: calc(100% - var(--sideOffset) - 30px);
	max-width: 700px;

	max-height: calc(100% - 30px - 70px);

	pointer-events: auto;
}

#main-window .info-fill#museum .info-window {
	right: var(--sideOffset);
}

#main-window .info-fill#taiwan .info-window {
	left: var(--sideOffset);
}

/*Info images in INFO WINDOWS*/

#main-window .info-fill .info-images {
	--sideOffset: 0px;

	/*圖片邊框制定*/
	--imgBorderInner: 10px;
	--imgBorderOuter: 2px;

	/*夠寬的話每張寬度限定*/
	--borderOffset: calc((var(--imgBorderInner) + var(--imgBorderOuter)) * 2);
	--singleImgWidth: calc(50% - var(--borderOffset));
	--doubleImgWidth: calc(42% - var(--borderOffset));
	/*若圖片高度比較高(對比例而言)則會另外採用的寬度*/
	--singleImgWidth-higherHeight: calc(38% - var(--borderOffset));
	--doubleImgWidth-higherHeight: calc(30% - var(--borderOffset));

	position: absolute;
	display: block;

	bottom: 25%;
	top: 90px;
	padding: 0px;

	width: calc(100% - var(--sideOffset) - 10px);
	max-width: 800px;

	/*background-color: #3a260b66;*/

	z-index: -100;
	pointer-events: none;
}

#main-window .info-fill#museum .info-images {
	right: var(--sideOffset);
}

#main-window .info-fill#taiwan .info-images {
	left: var(--sideOffset);
}

#main-window .info-fill .info-images .pic-group {
	/*給每個年份用，最多只限定放兩張(除非有另外指定)*/
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	display: block;
}

#main-window .info-fill .info-images .pic-group .pic-link {
	position: absolute;
	display: block;
	background-color: #fff;
	border: solid var(--darkGreen) var(--imgBorderOuter);
	padding: var(--imgBorderInner);
	width: var(--singleImgWidth);
	/*clickable*/
	pointer-events: auto;
	/*single img, 1st*/
	bottom: 0;
	left: 50%;
	transform: translate(-50%, 0);
}

#main-window .info-fill .info-images .pic-group .pic-link img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
}

#main-window .info-fill .info-images .pic-group .pic-link::before {
	/*enlarge mark*/
	content: "";
	position: absolute;
	display: block;
	--offset: calc(var(--imgBorderInner) + var(--imgBorderOuter));
	bottom: var(--offset);
	right: var(--offset);
	z-index: 1;
	width: 38px;
	height: 38px;
	background-image: url(../../images/routerHistory/圖片放大.png);
	background-repeat: no-repeat;
}

/*pic group => 2 pics*/

#main-window .info-fill .info-images .pic-group.twoPics .pic-link {
	width: var(--doubleImgWidth);
	/*double imgs, 1st*/
	bottom: 0;
	left: 25%;
	transform: translate(-50%, 0);
}

#main-window .info-fill .info-images .pic-group.twoPics .pic-link~.pic-link {
	/*double imgs, 2nd(or next)*/
	bottom: unset;
	top: 50%;
	left: 75%;
	transform: translate(-50%, -50%);
}

/*pic group : museum => 2 pics*/
/*史博是從右而佐依序排列*/

#main-window .info-fill#museum .info-images .pic-group.twoPics .pic-link {
	left: 75%;
}

#main-window .info-fill#museum .info-images .pic-group.twoPics .pic-link~.pic-link {
	left: 25%;
}

/*pic group : 若圖片比例上高度過高則會採用的一個方案*/
#main-window .info-fill .info-images .pic-group .pic-link.higher-height {
	width: var(--singleImgWidth-higherHeight);
}

#main-window .info-fill .info-images .pic-group.twoPics .pic-link.higher-height {
	width: var(--doubleImgWidth-higherHeight);
}