.book-all{
	margin:0;
	padding:0;
}

.book-88-1{
	width:100%;
	height:
	auto;
	padding-bottom:20px;
	min-height: 550px;
}
.bg-blue{background: #6d00ca;}
.bg-blue-2{background: #ae58f0;}
 .bg-blue-3{background: #9000ff;}
.book-88-1 .container-fluid{
	padding-right: -15px!important;
    padding-left: -15px!important;
}
.book-88-2{
	
	}
.book-88-3{

	}	
.book-88-4{
	
	}	
	
	
.midall-1{
	padding: 30px 15px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#002b5f+0,0f00bf+51,002b5f+100 */
background: #002b5f; /* Old browsers */
background: -moz-linear-gradient(left,  #002b5f 0%, #0f00bf 51%, #002b5f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #002b5f 0%,#0f00bf 51%,#002b5f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #002b5f 0%,#0f00bf 51%,#002b5f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002b5f', endColorstr='#002b5f',GradientType=1 ); /* IE6-9 */

	margin-top: 40px;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}
.midall-2{
	padding: 30px 15px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#668eea+5,6fbffc+48,668eea+100 */
background: #668eea; /* Old browsers */
background: -moz-linear-gradient(left,  #668eea 5%, #6fbffc 48%, #668eea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #668eea 5%,#6fbffc 48%,#668eea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #668eea 5%,#6fbffc 48%,#668eea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668eea', endColorstr='#668eea',GradientType=1 ); /* IE6-9 */

	margin-top: 40px;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}
.midall-3{
	padding: 30px 15px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#677b8e+0,b9c2ce+48,677b8e+100 */
background: #677b8e; /* Old browsers */
background: -moz-linear-gradient(left,  #677b8e 0%, #b9c2ce 48%, #677b8e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #677b8e 0%,#b9c2ce 48%,#677b8e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #677b8e 0%,#b9c2ce 48%,#677b8e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#677b8e', endColorstr='#677b8e',GradientType=1 ); /* IE6-9 */

	margin-top: 40px;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}
.midall-4{
	padding: 30px 15px;
	background: #c7c8ca;
	margin-top: 40px;
	-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}	
	
.book-top-bar1{
	width:100%;
	height:auto;
	padding:15px 0px;
	font: 35px/35px  'thaisanslite', Arial, sans-serif;
	color:#fff;
	/*background: url(../images/jt_0011_Vector-Smart-Object.png) 15px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	text-align:center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#002b5f+0,0f00bf+51,002b5f+100 */
background: #002b5f; /* Old browsers */
background: -moz-linear-gradient(left,  #002b5f 0%, #0f00bf 51%, #002b5f 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #002b5f 0%,#0f00bf 51%,#002b5f 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #002b5f 0%,#0f00bf 51%,#002b5f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002b5f', endColorstr='#002b5f',GradientType=1 ); /* IE6-9 */

		-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}	
.book-top-bar2{
	width:100%;
	height:auto;
	padding:15px 0px;
	font: 35px/35px  'thaisanslite', Arial, sans-serif;
	color:#fff;
	/*background: url(../images/jt_0011_Vector-Smart-Object.png) 15px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	text-align:center;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#668eea+5,6fbffc+48,668eea+100 */
background: #668eea; /* Old browsers */
background: -moz-linear-gradient(left,  #668eea 5%, #6fbffc 48%, #668eea 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #668eea 5%,#6fbffc 48%,#668eea 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #668eea 5%,#6fbffc 48%,#668eea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668eea', endColorstr='#668eea',GradientType=1 ); /* IE6-9 */

		-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}	
.book-top-bar3{
	width:100%;
	height:auto;
	padding:15px 0px;
	font: 35px/35px  'thaisanslite', Arial, sans-serif;
	color:#fff;
	/*background: url(../images/jt_0011_Vector-Smart-Object.png) 15px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	text-align:center;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#677b8e+0,b9c2ce+48,677b8e+100 */
background: #677b8e; /* Old browsers */
background: -moz-linear-gradient(left,  #677b8e 0%, #b9c2ce 48%, #677b8e 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #677b8e 0%,#b9c2ce 48%,#677b8e 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #677b8e 0%,#b9c2ce 48%,#677b8e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#677b8e', endColorstr='#677b8e',GradientType=1 ); /* IE6-9 */

		-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
	}	
		
.book-88-1 .top-1{
	font: 21px/45px  'Kanit', Arial, sans-serif;
	color:#fff;
	padding-top:20px;
	padding-left: 10px;
	background: url(../images/book/line.jpg) bottom center no-repeat;
	margin-bottom:15px;
	letter-spacing:1px;
	text-align:center;
	}	

.book-88-1 .top-2{
	font: 29px/65px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	padding-left: 10px;
	/*background: url(../images/jt_0009_Vector-Smart-Object.png) 9px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	}	
	
.book-88-1 .top-3{
	font: 29px/65px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	padding-left: 10px;
	/*background: url(../images/jt_0010_Vector-Smart-Object.png) 5px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	}	

	
.book-88-1 .mid{

padding: 20px;

}	
.book-88-1 .mid .box-date{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background: #ffffff;
	color: #6d00ca;
	font: 36px/25px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-1 .mid .box-count{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#002b5f;
	color:#fffc00;
	font: 36px/45px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-1 .mid .box-icon{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#97b132;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}		
.book-88-1 .mid .box-text{
	margin-left:20px;
	width:80%;
	height: 71px;
	overflow:hidden;
	font: 19px/23px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	/* font-weight:bold; */
}
.book-88-1 .mid .box-text a{
	color: #ffffff;
}
	
.book-88-1 .mid .box-text span{
	width:100%;
	color:#696969;
	display:block;
	
}

	
		


/********************ใหม่**********************/
.book-88-1 .mid .banner{
	background: #c7c0c0;
	margin-bottom:20px;
	padding:8px;
	width:229px;
	height:100px;
	font: 22px/24px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.book-88-1 .mid .banner .icon{
	text-align:center;
}
.book-88-1 .mid .banner .icon img{
	max-width: 24%;
	height:auto;
}
.book-88-1 .mid .banner .text{
	text-align:center;
}

.book-88-1 .mid .banner .text a{
	color:#fff;	
}
.book-88-1 .mid .banner:hover .text a{
	color:#2f2b2b;	
}



/*********************************************/
.book-88-2 .mid{

	}	
.book-88-2 .mid .box-date{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#002b5f;
	color:#fffc00;
	font: 36px/25px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-2 .mid .box-count{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#002b5f;
	color:#fffc00;
	font: 36px/45px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-2 .mid .box-icon{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#97b132;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}		
.book-88-2 .mid .box-text{
	margin-left:20px;
	width:80%;
	height: 71px;
	overflow:hidden;
	font: 19px/23px  'thaisanslite', Arial, sans-serif;
	color: #041325;
	/* font-weight:bold; */
}
.book-88-2 .mid .box-text a{
	color: #ffffff;
}
	
.book-88-2 .mid .box-text span{
	width:100%;
	color:#696969;
	display:block;
	
}
.book-88-2 .mid .box-text-2{
	margin-left:20px;
	width:80%;
	height: 71px;
	overflow:hidden;
	font: 26px/62px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	font-weight:bold;
}
.book-88-2 .mid .box-text-2 a{	
	color:#25369b;
}

/********************ใหม่**********************/
.book-88-2 .mid .banner{
	background: #c7c0c0;
	margin-bottom:20px;
	padding:8px;
	width:229px;
	height:100px;
	font: 22px/24px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.book-88-2 .mid .banner .icon{
	text-align:center;
}
.book-88-2 .mid .banner .icon img{
	max-width: 24%;
	height:auto;
}
.book-88-2 .mid .banner .text{
	text-align:center;
}

.book-88-2 .mid .banner .text a{
	color:#fff;	
}
.book-88-2 .mid .banner:hover .text a{
	color:#2f2b2b;	
}

/*********************************************/
.book-88-3 .mid{

	}	
.book-88-3 .mid .box-date{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#002b5f;
	color:#fffc00;
	font: 36px/25px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-3 .mid .box-count{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#002b5f;
	color:#fffc00;
	font: 36px/45px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-3 .mid .box-icon{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#97b132;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}		
.book-88-3 .mid .box-text{
	margin-left:20px;
	width:80%;
	height: 71px;
	overflow:hidden;
	font: 19px/23px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	/* font-weight:bold; */
}
.book-88-3 .mid .box-text a{
	color: #ffffff;
}
	
.book-88-3 .mid .box-text span{
	width:100%;
	color:#696969;
	display:block;
	
}
.book-88-3 .mid .box-text-2{
	margin-left:20px;
	width:80%;
	height: 71px;
	overflow:hidden;
	font: 26px/62px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	font-weight:bold;
}
.book-88-3 .mid .box-text-2 a{	
	color:#25369b;
}

/********************ใหม่**********************/
.book-88-3 .mid .banner{
	background: #c7c0c0;
	margin-bottom:20px;
	padding:8px;
	width:229px;
	height:100px;
	font: 22px/24px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.book-88-3 .mid .banner .icon{
	text-align:center;
}
.book-88-3 .mid .banner .icon img{
	max-width: 24%;
	height:auto;
}
.book-88-3 .mid .banner .text{
	text-align:center;
}

.book-88-3 .mid .banner .text a{
	color:#fff;	
}
.book-88-3 .mid .banner:hover .text a{
	color:#2f2b2b;	
}

/**********************************************/
.book-88-4 .top-1{
	font: 29px/65px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	padding-left: 10px;
	/*background: url(../images/jt_0011_Vector-Smart-Object.png) 15px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	}	

.book-88-4 .top-2{
	font: 29px/65px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	padding-left: 10px;
	/*background: url(../images/jt_0009_Vector-Smart-Object.png) 9px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	}	
	
.book-88-4 .top-3{
	font: 29px/65px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	padding-left: 10px;
	/*background: url(../images/jt_0010_Vector-Smart-Object.png) 5px 6px no-repeat;*/
	font-weight:bold;
	margin-bottom:15px;
	}	

.book-88-4 .mid{

	}	
.book-88-4 .mid .box-date{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background: #345c8c;
	color:#fffc00;
	font: 36px/25px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-4 .mid .box-count{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#002b5f;
	color:#fffc00;
	font: 36px/45px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
.book-88-4 .mid .box-icon{
	text-align:center;
	width: 60px;
	margin-top: 7px;
	height: 55px;
	background:#97b132;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}		
.book-88-4 .mid .box-text{
	margin-left:20px;
	width:80%;
	height: 71px;
	overflow:hidden;
	font: 19px/23px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	/* font-weight:bold; */
}
.book-88-4 .mid .box-text a{
	color: #ffffff;
}
	
.book-88- .mid .box-text span{
	width:100%;
	color:#696969;
	display:block;
	
}
.book-88-4 .mid .box-text-2{
	margin-left:20px;
	width:80%;
	height: 71px;
	overflow:hidden;
	font: 26px/62px  'thaisanslite', Arial, sans-serif;
	color:#565d85;
	font-weight:bold;
}
.book-88-4 .mid .box-text-2 a{	
	color:#25369b;
}
	
		


/********************ใหม่**********************/
.book-88-4 .mid .banner{
	background: #c7c0c0;
	margin-bottom:20px;
	padding:8px;
	width:229px;
	height:100px;
	font: 22px/24px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.book-88-4 .mid .banner .icon{
	text-align:center;
}
.book-88-4 .mid .banner .icon img{
	max-width: 24%;
	height:auto;
}
.book-88-4 .mid .banner .text{
	text-align:center;
}

.book-88-4 .mid .banner .text a{
	color:#fff;	
}
.book-88-4 .mid .banner:hover .text a{
	color:#2f2b2b;	
}

/**************************************************/
	
	
.ggggg{
	width: 60px;
	height: 55px;
	background:#cb0a00;
	margin-top: 8px;
	color:#fff;
	text-align:center;
	font: 21px/55px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}	
	
.gggg{
	width: 60px;
	height: 55px;
	background:#f5a409;
	color:#fff;
	margin-top: 7px;
	text-align:center;
	font: 23px/55px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}		
	
.ggg{
	width: 60px;
	height: 55px;
	background:#8db61f;
	color:#fff;
	margin-top: 7px;
	text-align:center;
	font: 23px/55px  'thaisanslite', Arial, sans-serif;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	}		
	
@media (max-width: 374px) { 
.book-88-1 .top-1{
	font: 21px/32px 'Kanit', Arial, sans-serif;	
}
 }
@media (min-width: 375px) and (max-width: 419px) {
	.book-88-1 .top-1{
	font: 21px/32px 'Kanit', Arial, sans-serif;	
}
	.book-top-bar1{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
	.book-top-bar2{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
	.book-top-bar3{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
	}
@media (min-width: 420px) and (max-width: 575px) { 
.book-88-1 .top-1{
	font: 21px/32px 'Kanit', Arial, sans-serif;	
}
	.book-top-bar1{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
	.book-top-bar2{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
	.book-top-bar3{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
 }
@media (min-width: 576px) and (max-width: 767px) { 
	.book-top-bar1{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
	.book-top-bar2{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
	}
	.book-top-bar3{
	font: 28px/35px  'thaisanslite', Arial, sans-serif;
	font-weight:bold;
 }
}
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) { 
.book-88-1{
	    height: 550px;	
}
.book-88-1 .top-1{
	    font: 19px/27px 'Kanit', Arial, sans-serif;	
}
 }
@media (min-width: 1200px) and (max-width: 1280px) { ... }
@media (min-width: 1281px) and (max-width: 1366px) { 
.book-88-1 .top-1{
	font: 16px/45px 'Kanit', Arial, sans-serif!important;	
}
}
@media (min-width: 1367px) and (max-width: 1440px) { 
.book-88-1 .top-1{
	font: 16px/45px 'Kanit', Arial, sans-serif!important;	
}
 }
@media (min-width: 1441px) and (max-width: 1600px) { 
.book-88-1 .top-1{
	font: 19px/45px 'Kanit', Arial, sans-serif!important;	
}
 }