body {
	padding:0;
	margin:0;
	display:flex;
	justify-content:center;
	align-items:center;
	height:100vh;
}
* {
	box-sizing:border-box;
}
#warp {
	position:relative;
	width:300px;
	height:360px;
	border:1px solid black;
}
.prev {
	width:50px;
	height:20px;
	line-height:20px;
	cursor:pointer;
	margin:5px;
}
.now {
	position:absolute;
	bottom:0;
	right:0px;
	width:80px;
	height:20px;
	text-align:center;
	line-height:20px;
	cursor:pointer;
	margin:5px;
}
.next {
	position:absolute;
	top:0;
	right:0;
	line-height:20px;
	width:50px;
	height:20px;
	cursor:pointer;
	margin:5px;
}
.year {
	font-size:20px;
	font-weight:700;
	text-align:center;
}
.mot {
	text-align:center;
}
.title {
	margin:auto;
	width:280px;
	height:20px;
	color:white;
	background-color:gray;
}
.title span {
	list-style:none;
	margin:0 3px;
	width:34px;
	height:20px;
	text-align:center;
	line-height:20px;
	float:left;
}
.main {
	margin:10px auto;
	width:280px;
	height:240px;
}
li {
	list-style:none;
	margin:3px;
	width:34px;
	height:34px;
	text-align:center;
	line-height:34px;
	background-color:linen;
	float:left;
}
.hover:hover {
	cursor:pointer;
	border:1px solid red;
	line-height:32px;
	background-color:ghostwhite;
}
.active {
	background-color:indianred;
	color:white;
}