.frame {overflow: hidden; position: relative;}
.frame ul {list-style: none; margin: 0; padding: 0; position: absolute;}
.frame ul li { float: left; margin: 0 1px 0 0; padding: 0; cursor: pointer; }
.frame ul li img {width:100%;}
.frame ul li.active { color: #fff; background: #a03232; }

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

.sp01 {
	font:18px 'tahoma';
	text-align:center;
	line-height:290px;	
	width:662px;
	height:300px;
}

.sp02 {
	font:18px 'tahoma';
	text-align:center;
	line-height:290px;
	background-color:red;
	width:622px;
	height:300px;
}

.sp03 {
	font:18px 'tahoma';
	text-align:center;
	line-height:290px;
	background-color:blue;
	width:622px;
	height:300px;
}


/* ボタン用 */
.rolling-wrap {
	position: relative;
	display: inline-block;	
}

.rolling-btn {
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px; 
	border: none;
	border-radius: 20px;
	background: rgba(0,0,0,0.45);
	color: #fff;
	font-size: 22px;
	line-height: 40px;
	cursor: pointer;
	user-select: none;
	z-index:5;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	outline:none;
}

.rolling-prev {
	left: 6px;

}

.rolling-next {
	right: 6px;
}

.rolling-btn:hover {
	background: rgba(0,0,0,0.65);
}


/* 進捗バー — 현행은 iframe 내부 오버레이라 흐름 높이 0. absolute 로 재현 */
.progress-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7px;
  height: 4px;
  background: rgba(0,0,0,0.15);
  overflow: hidden;
}
.progress-bar .progress {
  width: 0;
  height: 100%;
  background: #1178e9; /* 色はお好みで */
}


/* 테마 적용 보정 */
.rolling-wrap { display: block; width: 662px; }
.top-slider a { display: block; }