@charset "utf-8";
h2{
	background:url(../images/title_bg.png)  repeat-x 0 90%;
	width:97%;
	margin:0 auto;
	padding-bottom:20px;
	font-size:30px;
	display:inline-block;		
}
h3{
	font-size:20px;
	margin:50px auto;
	width:93%;
	background: #d4f2fb;
	padding:2% 2% 2% 5%;
	border-radius:30px;
}
.crossover{
	vertical-align:middle;
	margin-right:10px;
}
.pict{
	text-align:center;
	margin:30px auto;
}
.recommend{
	margin:20px auto;
	display: flex;
	flex-wrap:wrap;
}
.recommend .box{
	border:1px solid #cccccc;
	padding:1%;
	width:97%;
	margin:3% auto;
	overflow:hidden;
	float:left;
}
.recommend .box .pict{
	float:left;
	margin:10px ;
	width:40%;
}
.recommend .box .txt{
	width:97%;
	padding-left:1%;
	margin:1% auto;
}
.recommend .box .txt h4{
	font-size:18px;
	padding:8px 8px 0 8px;
}
.recommend .box .txt p{
	padding:7px;
}
.recommend .box .txt ul{
	overflow:hidden;	
}
.recommend .box .txt ul li {
	width:97.5%;
	margin:2% auto;
	padding:3% 0;
	text-align:center;
	background:#eeeeee;
	border-radius:5px;
	display:inline-block;
}
.recommend .box .txt ul li img{
	vertical-align:middle;
}
.books{
	display: flex;
	flex-wrap: wrap;
	margin: 2% 2% 5% 2%;
	border: 1px solid #cccccc;
	border-radius: 30px;
	box-shadow: 3px 5px 3px #cccccc;
}
.books .img_area{
	width: 300px;
	margin:0 auto;
	padding: 5%;
}
.books .img_area img{
	width: 100%;
}
.books .txt_area{
	width: 90%;
	padding: 5%
}
.books .txt_area h4{
	text-align: left;
font-size:20px;

}
.shop{
	display: flex;
flex-wrap: wrap;
justify-items: center;
align-items: center;
margin-top:20px ;
}
.shop li{
	width:42%;
	margin: 2%;
	background: #eeeeee;
	padding: 3% 2%;
	box-shadow: 3px 5px 3px #cccccc;
}
.shop li:hover{
	box-shadow: none;
}
.shop li img{
	display: block;
	margin: 0 auto;
}
.af_link_bt a{
	display: block;
	border: #1dbef9 3px solid;
	width: 80%;
	margin: 0 auto;
	text-align: center;
	padding: 1.5%;
	border-radius:15px;
	font-weight:bold;
}
.af_link_bt a img{
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}
@media screen and (min-width:768px) {
h3{
	width:96%;
	padding:1.5% 1% 1.5% 3%;
}
	.pict{
	width:600px;
}
.recommend .box{
	padding:1%;
	width:44%;
	margin:1.5%;
	float:left;
}
.recommend .box .txt{
	float:left;
	width:52%;
	padding-left:1%;
}
.recommend .box .pict{
	width:40%;
	float:left;
}
.af_link_bt a{
	width: 50%;
}
}
@media screen and (min-width:1080px) {
.recommend .box .pict{
	width:200px;
}
.books .img_area{
	width: 30%;
	padding: 2%;
}
.books .txt_area{
	width: 62%;
	padding: 2% 2% 2% 0;
}
.shop li{
	width:20%;
	margin: 2%;
	padding: 2%;
}

}