/* Frame */
.frame {
	height: 316px;
	line-height: 316px;
	overflow: hidden;
}
.frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}
.frame ul li {
	float: left;
	width: 316px;
	height: 100%;
	margin: 0 12px 0 0;
	padding: 0;
	cursor: pointer;
}
/* Scrollbar */
.scrollbar {
	margin: 48px auto 24px auto;
	height: 3px;
	box-sizing:border-box;
	background: #f5f5f5;
	border-top:1px solid #d0d0d0;
	line-height: 0;
	width:100%;
	max-width:650px;
}
.scrollbar .handle {
	width: 100px;
	background: #292a33;
	cursor: pointer;
	height: 40px;
	background: url(../img/scroll-touch-bg.png) no-repeat 50% 50% / 40px 40px;
	top: -20px;
	position: relative;
}
.scrollbar .handle .mousearea {
	position: absolute;
	top: -9px;
	left: 0;
	width: 100%;
	height: 20px;
}

/* Pages */
.pages {
	list-style: none;
	margin: 20px 0;
	padding: 0;
	text-align: center;
}
.pages li {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0 4px;
	text-indent: -999px;
	border-radius: 10px;
	cursor: pointer;
	overflow: hidden;
	background: #fff;
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
}
.pages li:hover {
	background: #aaa;
}
.pages li.active {
	background: #666;
}

/* Controls */
.controls { margin: 0; text-align: center; }