.five{
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    margin: 70px 0;
    padding: 100px 0;
    border-top: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
}
.five #freebox{
    margin-bottom: 70px;
	animation-name:fadeInUp;
	animation-duration:0.5s;
}
.five #freebox li{
    float: left;
    width: calc((100% / 3) - 40px);
    margin: 0 20px;
	padding: 30px 0;
}
.five #freebox li >b{
	display: block;
    text-align: center;
    font-size: 60px;
    color: #0f8d94;
}
.five #freebox li:hover >b{
	animation-name:bounce;
	animation-duration:1s;
}
.five #freebox li >p{
    text-align: center;
    font-size: 22px;
    color: #0f7a94;
    font-weight: bold;
    line-height: 120%;
    margin: 10px 0 40px;
}
.five #freebox li article{
    text-align: center;
    color: #828282;
    font-size: 15px;
}
.five #about{
    color: #4b4f52;
    font-size: 16px;
    text-align: center;
    line-height: 170%;
	animation-name:fadeInUp;
	animation-duration:1s;
	background: rgba(255, 255, 255, 0.48);
    padding: 50px;
}
.five .aboutmore{
    margin-top: 50px;
	text-align:center;
}
.five .aboutmore a{
    display: inline-block;
    border: 1px solid #a9a9a9;
    color: #fff;
	background: #f36b1b;
    font-size: 16px;
    padding: 3px 30px;
    border-radius: 10px;
	transition:all linear 0.3s;
}
.five .aboutmore a:hover{
    color: #fff;
    background: #0f8d94;
}
.news-title{
	margin:50px 0 10px;
}
.news-title h3 a{
	color:#474747;
	font-size:24px;
}
.news-title h3 a b{
	font-size:14px;
	font-weight:normal;
	margin-left: 10px;
}
#news{
	border-top:1px solid #d2d2d2;
	border-bottom:1px solid #d2d2d2;
}
#news li{
	overflow:hidden;
}
#news li p,
#news li h3{
	float:left;
	color:#898989;
	font-size:14px;
	padding:10px 15px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;

}
#news li p{
	min-width:82px;
}
#news li h3{
	width:calc(100% - 120px - 157px);
}
#news li h3 a{
	color:#1f1f1f;
}
#news li p:first-child{
	border-left:1px solid #d2d2d2;
	border-right:1px solid #d2d2d2;
}
#news li p.more{
	float:right;
	border:1px solid #898989;
	margin-top:7px;
	padding:0;
}
#news li p.more a{
	color:#105ca1;
	font-size:12px;
	display:block;
	padding:2px 8px;
}

#news li p.more a:hover{
	background:#105ca1;
	color:#fff;
}
#indexshow{
	margin-top: 20px;
}
#indexshow .book-show a,
#indexshow .book-show div{
	outline:none;
}
#indexshow .book-show .showbox{
	margin: 0 5px;
}
#indexshow .book-show .showbox .showbox-photo {
	background-repeat:no-repeat;
	background-position:50% 50%;
	background-size:cover;
	margin:0 5px;
	outline:none;
	-webkit-filter: brightness(90%);
	transition:linear all 0.3s;
}
#indexshow .book-show .showbox:hover .showbox-photo{
	-webkit-filter: brightness(120%);
}
#indexshow .book-show .showbox .showbox-photo a{
	display:block;
}
#indexshow .book-show .showbox .showbox-photo a img{
	width:100%;
}
#indexshow .book-show .showbox h3{
	margin: 0 5px;
    background: #2075a7;
    text-align: center;
    padding: 5px 15px;
    font-size: 18px;
    font-weight: normal;
    background-image: radial-gradient(circle 248px at center, #36ccd4 0%, #2aa6c5 47%, #0562a5 100%);
	border-bottom: 2px solid #02121b;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color:#fff;
	transition:linear all 0.3s;
}
#indexshow .book-show .showbox:hover h3{
    background-image: radial-gradient(circle 248px at center, #36d45f 0%, #2ac585 47%, #05a52f 100%);
}
#indexshow .book-show .showbox h3 a{
	color:#fff;
}
#indexshow .book-show .showbox article {
    margin: 0 5px;
    background: #1f272b;
    padding: 10px;
    text-align: center;
    height: 46px;
    overflow: hidden;
}
#indexshow .book-show .showbox article a{
	color:#fff;
}
#indexshow div.more{
	text-align: center;
    margin: 0 5px;
    background: #1f272b;
    padding: 0 0 20px;
}
#indexshow div.more a{
	display: inline-block;
    color: #fff;
    font-size: 15px;
    padding: 5px 35px;
    border-radius: 10px;
    background-image: linear-gradient(to top, #4481eb 0%, #04befe 100%);
	border: 2px solid #4381eb;
	transition:linear all 0.3s;
}
#indexshow div.more a:hover{
	border: 2px solid #0eb5fc;
}
#indexshow .price{
	margin: 0 5px;
    background: #1f272b;
    color: #fff;
    text-align: center;
    height: 23px;
    overflow: hidden;
    padding-bottom: 15px;
    font-weight: bold;
    font-size: 16px;
}
@media screen and (max-width: 640px) {
	.five #freebox li >p{
	    font-size: 20px;	
	}
	.five #freebox li >b{
		font-size:50px;
	}
	.five #freebox li{
	    width: 90%;
		margin:0 5%;	
	}
	.five #about{
		padding: 40px 30px;		
	}
}
@media screen and (max-width: 480px) {
	#news li p.more{
		display:none;
	}
	#news li h3{
		width:calc(100% - 157px);
	}
	#indexshow .book-show .showbox{
		margin:0 15px;	
	}
	#indexshow .book-show .showbox article{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height:1em;
	}
	#indexshow .book-show .showbox h3,
	.five section{
		font-size: 16px;
	}
	.five .aboutmore a,
	.five #about{
		font-size: 14px;
	}
	.five{
		padding: 60px 0;	
	}
}