.story_div {
	margin-top: 40px;
	width: 100%;
	font-size: 1em;
	color: #837a69;
	font-family: Arial, Microsoft JhengHei;
}

.story_list_div {
	
}

.story_list {
	width: 200px;
	padding: 19px 19px 0px 19px;
	margin: 20px 40px 40px 0px;
	position: relative;
	display: inline-block;
	text-align: left;
	vertical-align: top;
	color: #333;
	/*color: #837a69;*/
}

.list_type1 {
	background-color: #fee5c7;
}

.list_type2 {
	background-color: #e8ffd1;
}

.list_type3 {
	background-color: #d1eeff;
}

.list_story_pic {
	width: 100%;
	border: 3px solid white;
	box-sizing: border-box;
	box-shadow: 4px 4px 4px rgba(100, 100, 100, 0.5);
}

.list_no {
	font-size: 3em;
	color: #837a69;
}

.list_title_str {
	font-size: 1.45em;
	padding-bottom: 20px;
	border-bottom: 1px solid #837a69;
	line-height: 1em;
	color: #333;
}

.list_more {
	cursor: pointer;
}

.list_more:hover {
	opacity: 0.8;
	filter: alpha(opacity:80);
}

.list_footer {
	position: absolute;
	left: 0px;
	bottom: -49px;
}

.list_shadow {
	background: url('../../images/uniuse/list_shadow.png') repeat-y 0px -50px;
	width: 13px;
	height: 100%;
	position: absolute;
	top: 0px;
	right: -14px;
}

.story_list_page_div {
	margin-top: 40px;
	text-align: center;
}

.left_arrow {
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	margin: 0px 5px;
}

.page_div {
	display: inline-block;
	vertical-align: middle;
}

.right_arrow {
	display: inline-block;
	cursor: pointer;
	vertical-align: middle;
	margin: 0px 5px;
}

.odd_page {
	display: inline-block;
	background: url('../../images/uniuse/odd_page.png') no-repeat 0px 0px;
	width: 30px;
	height: 30px;
	vertical-align: top;
	line-height: 30px;
	text-align: center;
	font-size: 1.25em;
	color: #675c50;
	cursor: pointer;
	margin: 0px 5px;
}	

.odd_page:hover {
	background-image: url('../../images/uniuse/even_page.png');
	color: white;
}	

.even_page {
	display: inline-block;
	background: url('../../images/uniuse/even_page.png') no-repeat 0px 0px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	font-size: 1.25em;
	color: white;
	cursor: pointer;
	margin: 0px 5px;
}

.story_list_page_bg {
	display: inline-block;
	padding: 10px;
	background-color: #e8e8e8;
	border-radius: 8px;
}

.dis_none {
	display: none;
}

.paperclip {
	position: absolute;
	top: -10px;
	right: 7px;
}

@media all and (max-width: 899px) {
	.story_list {
		width: 580px;
		padding-top: 30px;
		color: #333;
	}

	.list_story_pic {
		width: 200px;
		margin-left: 70px;
		margin-top: -68px;
	}

	.paperclip {
		top: -10px;
		left: 80px;
	}

	.list_title {
		width: 90px;
	}

	.list_no {
		font-size: 4em;
		color: #837a69;
	}

	.list_title_pic {
		margin-left: 4px;
	}

	.list_title_str {
		font-size: 2em;
		padding-bottom: 15px;
		margin-left: 290px;
		margin-top: -155px;
	}

	.list_title_key {
		margin-left: 290px;
	}

	.list_more {
		margin-left: 290px;
	}
}

@media all and (max-width: 639px) {
	.story_list {
		width: 280px;
		color: #333;
	}

	.list_story_pic {
		display: none;
	}

	.paperclip {
		display: none;
	}

	.list_title {
		width: 90px;
	}

	.list_no {
		font-size: 4em;
		color: #837a69;
	}

	.list_title_pic {
		margin-left: 4px;
	}

	.list_title_str {
		font-size: 2em;
		padding-bottom: 15px;
		margin-left: 70px;
		margin-top: -56px;
		color: #333;
	}

	.list_title_key {
		margin-left: 70px;
	}

	.list_more {
		margin-left: 70px;
	}
}