@charset "utf-8";

body {
	background-color: #e6e6e6;
	overflow: hidden;
}

.viewer {
	box-sizing: border-box;
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	overflow: hidden;
}

.window {
	box-sizing: border-box;
	position: absolute;
	margin: 0;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0;
	overflow: hidden;
}

#a_right {
	box-sizing: border-box;
	position: absolute;
	width: 28px;
	height: 53px;
	top: 50%;
	left: 50%;
	padding: 0;
	transform: rotate(180deg);
	cursor: pointer;
	margin-top: -26px;
}

#a_left {
	box-sizing: border-box;
	position: absolute;
	width: 28px;
	height: 53px;
	left: 50%;
	top: 50%;
	padding: 0;
	transform: none;
	cursor: pointer;
	margin-top: -26px;
}

#a_up {
	box-sizing: border-box;
	position: absolute;
	width: 53px;
	height: 28px;
	top: 50%;
	left: 50%;
	padding: 0;
	transform: none;
	cursor: pointer;
	margin-left: -26px;
}

#a_down {
	box-sizing: border-box;
	position: absolute;
	width: 53px;
	height: 28px;
	top: 50%;
	left: 50%;
	padding: 0;
	transform: rotate(180deg);
	cursor: pointer;
	margin-left: -26px;
}

@media only screen and (min-height: 900px) {
	
	.viewer {
		width: 1273px;
		height: 874px;
	}

	.window {
		width: 1197px;
		height: 798px;
	}

	.graphic {
		box-sizing: border-box;
		display: block;
		position: absolute;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0;
	}

	#d_center{
		box-sizing: border-box;
		position: absolute;
		width: 1197px;
		height: 798px;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	#d_right {
		box-sizing: border-box;
		position: absolute;
		width: 1197px;
		height: 798px;
		top: 0;
		left: 1197px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#d_left {
		box-sizing: border-box;
		position: absolute;
		width: 1197px;
		height: 798px;
		top: 0;
		left: -1197px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#d_top {
		box-sizing: border-box;
		position: absolute;
		width: 1197px;
		height: 798px;
		top: -798px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#d_bottom {
		box-sizing: border-box;
		position: absolute;
		width: 1197px;
		height: 798px;
		top: 798px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	@keyframes center_to_left {
		from {left: 0;}
		to {left: -1197px;}
	}
	@keyframes center_to_right {
		from {left: 0;}
		to {left: 1197px;}
	}
	@keyframes center_to_top {
		from {top: 0;}
		to {top: -798px;}
	}
	@keyframes center_to_bottom {
		from {top: 0;}
		to {top: 798px;}
	}

	@keyframes left_to_center {
		from {left: -1197px;}
		to {left: 0;}
	}
	@keyframes right_to_center {
		from {left: 1197px;}
		to {left: 0;}
	}

	@keyframes top_to_center {
		from {top: -798px;}
		to {top: 0;}
	}
	@keyframes bottom_to_center {
		from {top: 798px;}
		to {top: 0;}
	}

	#a_right {
		margin-left: 609px;
	}

	#a_left {
		margin-left: -637px;
	}

	#a_up {
		margin-top: -437px;
	}

	#a_down {
		margin-top: 409px;
	}
}

@media only screen and (max-height: 900px) {
		
	.viewer {
		width: 914px;
		height: 635px;
	}

	.window {
		width: 838px;
		height: 559px;
	}

	.graphic {
		box-sizing: border-box;
		height: 559px;
		display: block;
		position: absolute;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0;
	}

	#d_center{
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
	}

	#d_right {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 0;
		left: 838px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#d_left {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 0;
		left: -838px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#d_top {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: -559px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#d_bottom {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 559px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	@keyframes center_to_left {
		from {left: 0;}
		to {left: -838px;}
	}
	@keyframes center_to_right {
		from {left: 0;}
		to {left: 838px;}
	}
	@keyframes center_to_top {
		from {top: 0;}
		to {top: -559px;}
	}
	@keyframes center_to_bottom {
		from {top: 0;}
		to {top: 559px;}
	}

	@keyframes left_to_center {
		from {left: -838px;}
		to {left: 0;}
	}
	@keyframes right_to_center {
		from {left: 838px;}
		to {left: 0;}
	}

	@keyframes top_to_center {
		from {top: -559px;}
		to {top: 0;}
	}
	@keyframes bottom_to_center {
		from {top: 559px;}
		to {top: 0;}
	}

	#a_right {
		margin-left: 429px;
	}

	#a_left {
		margin-left: -457px;
	}

	#a_up {
		margin-top: -317px;
	}

	#a_down {
		margin-top: 289px;
	}
	#label_left {
		font-size: 18px;
	}
}

@media only  screen and (max-height: 635px) {
	.viewer {
		width: 551px;
		height: 391px;
	}

	.window {
		width: 479px;
		height: 319px;
	}

	.graphic {
		box-sizing: border-box;
		height: 319px;
		display: block;
		position: absolute;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0;
	}

	#d_center{
		box-sizing: border-box;
		position: absolute;
		width: 479px;
		height: 319px;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
	}

	#d_right {
		box-sizing: border-box;
		position: absolute;
		width: 479px;
		height: 319px;
		top: 0;
		left: 479px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#d_left {
		box-sizing: border-box;
		position: absolute;
		width: 479px;
		height: 319px;
		top: 0;
		left: -479px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#d_top {
		box-sizing: border-box;
		position: absolute;
		width: 479px;
		height: 319px;
		top: -319px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	#d_bottom {
		box-sizing: border-box;
		position: absolute;
		width: 479px;
		height: 319px;
		top: 319px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	@keyframes center_to_left {
		from {left: 0;}
		to {left: -479px;}
	}
	@keyframes center_to_right {
		from {left: 0;}
		to {left: 479px;}
	}
	@keyframes center_to_top {
		from {top: 0;}
		to {top: -319px;}
	}
	@keyframes center_to_bottom {
		from {top: 0;}
		to {top: 319px;}
	}

	@keyframes left_to_center {
		from {left: -479px;}
		to {left: 0;}
	}
	@keyframes right_to_center {
		from {left: 479px;}
		to {left: 0;}
	}

	@keyframes top_to_center {
		from {top: -319px;}
		to {top: 0;}
	}
	@keyframes bottom_to_center {
		from {top: 319px;}
		to {top: 0;}
	}

	#a_right {
		margin-left: 247px;
	}
	#a_left {
		margin-left: -275px;
	}
	#a_up {
		margin-top: -196px;
	}
	#a_down {
		margin-top: 168px;
	}
	#label_left {
		font-size: 14px;
	}
}

@media only screen and (max-width: 640px) and (orientation: portrait) {
	.viewer {
		width: 914px;
		height: 635px;
		top: 0;
		left: 0;
		transform-origin: center;
		transform: rotate(90deg);
	}

	.window {
		width: 838px;
		height: 559px;
	}

	.graphic {
		box-sizing: border-box;
		height: 559px;
		display: block;
		position: absolute;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		padding: 0;
	}

	#d_center{
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 0;
		left: 0;
		margin: 0;
		padding: 0;
	}

	#d_right {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 0;
		left: 838px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#d_left {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 0;
		left: -838px;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#d_top {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: -559px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#d_bottom {
		box-sizing: border-box;
		position: absolute;
		width: 838px;
		height: 559px;
		top: 559px;
		left: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}

	@keyframes center_to_left {
		from {left: 0;}
		to {left: -838px;}
	}
	@keyframes center_to_right {
		from {left: 0;}
		to {left: 838px;}
	}
	@keyframes center_to_top {
		from {top: 0;}
		to {top: -559px;}
	}
	@keyframes center_to_bottom {
		from {top: 0;}
		to {top: 559px;}
	}

	@keyframes left_to_center {
		from {left: -838px;}
		to {left: 0;}
	}
	@keyframes right_to_center {
		from {left: 838px;}
		to {left: 0;}
	}

	@keyframes top_to_center {
		from {top: -559px;}
		to {top: 0;}
	}
	@keyframes bottom_to_center {
		from {top: 559px;}
		to {top: 0;}
	}

	#a_right {
		margin-left: 429px;
	}

	#a_left {
		margin-left: -457px;
	}

	#a_up {
		margin-top: -317px;
	}

	#a_down {
		margin-top: 289px;
	}
}