@charset "UTF-8";
/* CSS Document */

/*===========================================
 WORK PAGE -IMAGE VIEWER
===========================================*/

#main-view {
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

#main-view a {
	display: block;
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
#main-view a img {
	position: relative;
	width: 100%;
}

#image-viewer ul {
	width: 100%;
	display: inline-block;
	margin-top: 3rem;
	text-align: center;
}
#image-viewer ul li {
	position: relative;
	width:60px;
	display: inline-block;
	margin: 0.5rem 0.25rem;
	cursor: pointer;
}
#image-viewer ul li:hover {
	opacity:1;
}
#image-viewer ul li:after {
	content:'';
	display: block;
	width: 7px;
	height: 7px;
	background: #ddd;
	border-radius:5px;
	margin: 0.2rem auto 0;
}
#image-viewer ul li.active:after {
	background: #09f;
}
#image-viewer ul li img {
	width:60px;
	height: 60px;
}
#image-viewer ul li span {
	display: block;
	font-size:1rem;
	color: #aaa;
	overflow:hidden;
	white-space: nowrap;
	transition: ease .2s;
	-webkit-transition: ease .2s;
}
#image-viewer ul li:hover span {
	color: #000;
}
#image-viewer ul li.active span {
	color:#000;
}