@media (max-width: 799px) 
{	
	.arrow_pc{
		display: none!important;
	}	

	.large_image{
		max-width: 75%!important;
		max-height: 75%!important;
	}

	.thumbnail_panel
	{
		height: 100vh!important;
		position: absolute!important;		
	}

	.thumbnail_group{
		width: 100px!important;
		height: 100%!important;			
	}

	.thumbnail{
		width: 100px!important;
		position: relative!important;
		top: 50%!important;
		left: 50%!important;
		transform: translate(-50%,-50%)!important;
	}	
}

@media (max-width: 499px) 
{
	.arrow_pc{
		display: none!important;
	}

	.image_panel
	{
		width: 100%!important;
		height: 70vh!important;
		position: absolute!important;
	}	

	.large_image{
		max-width: 75%!important;
		max-height: 75%!important;
	}

	.thumbnail_panel
	{
		width: 100%!important;	
		height: 100px!important;
		position: absolute!important;		
		margin-top: 70vh!important;		
	}

	.thumbnail_group{
		width: 100%!important;
		height: 100px!important;	
	}

	.thumbnail{
		width: 300px!important;
		position: absolute!important;
		top: 0!important;
		left: 50%!important;
		transform: translate(-50%,0)!important;	
	}	
}
body{
	background-color: #333;
	margin:0;
	padding:0;
}

.image_panel{
	height: 100vh;
	width: 70%;
	float: right;	
	overflow: hidden;	
	position: relative;	
	-webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.large_image{
	max-width: 85%;
	max-height: 85%;
	border: 20px solid #FFF;
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);	
}


.thumbnail_panel{
	position: relative;
	height: 100vh;
	text-align: center;
	width: 30%;
	float: left;
	overflow: hidden;	
	-webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none;
}

.thumbnail_group{
	width: 300px;
	height: 400px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;		
	top: 50%;
	transform: translateY(-50%);
}


.thumbnail{
	height: 300px;
	width: 300px;		
	position: relative;		
	overflow: hidden;	
		
}


.thumbnail_image{
	float: left;
	width: 100px;
	height: 100px;
}
.thumbnail_image img{
	width: 70%;
	height: 70%;
	margin-top: 13px;
	border: 2px solid #fff;
}
.thumbnail_image img:hover{
	opacity: 0.5;
}
.thumbnail_image_click img{
	width: 80%;
	height: 80%;
	margin-top: 5px;
	border: 5px solid #fff;
}


.arrow_pc{
	overflow: hidden;
	position: relative;	
}
.arrow_pc_img{
	width: 50px;
	height: 25px;			
	opacity: 0.5;	
}
.arrow_pc_img:hover{
	opacity: 1;
}
.arrow_pc_img:active{
	margin-top: 1px;
	margin-left: 1px;		
}
.arrow_pc_left{
	width: 80px;
	float: left;
	height: 30px;
	display: none;
}
.arrow_pc_right{
	width: 80px;
	float: right;
	height: 30px;
	display: none;
}

.arrow_sph_left{
	position: absolute;
	width: 20px;
	height: 100px;
	left: 2px;
	opacity: 0.5;
	display: none;
}
.arrow_sph_right{
	position: absolute;
	width: 20px;
	height: 100px;
	right: 2px;
	display: none;
	opacity: 0.5;
}
.arrow_sph_left img,.arrow_sph_right img
{
	width: 15px;
	height: 30px;
	margin-top: 35px;	
}
.arrow_sph_left:hover,.arrow_sph_right:hover{
	opacity: 1;
}
.arrow_sph_left:active,.arrow_sph_right:active{
	top: 1px;
}

.arrow_spv_up{
	position: absolute;
	width: 100px;
	height: 20px;
	top: 2px;
	opacity: 0.5;
	display: none;
}
.arrow_spv_down{
	position: absolute;
	width: 100px;
	height: 20px;
	bottom: 2px;
	display: none;
	opacity: 0.5;
}
.arrow_spv_up img,.arrow_spv_down img
{
	width: 30px;
	height: 15px;
}
.arrow_spv_up:hover,.arrow_spv_down:hover{
	opacity: 1;
}
.arrow_spv_up:active,.arrow_spv_down:active{
	left: 1px;
}