ul.squareBookList {
	display: grid;
	display: -ms-grid;
	grid-template-columns: repeat(5, 1fr);
	-ms-grid-columns:  1fr 1fr 1fr 1fr 1fr;	
	row-gap: 16px;
	column-gap: 36px;
	margin-top: 19px;
}

ul.squareBookList li{
	cursor: pointer;
}
ul.squareBookList li a{
	color: #4c4c4c;
}
ul.squareBookList li a:hover{
	color: #1283ca;
} 

ul.squareBookList li span.book-img{
	width: 100%;
}

ul.squareBookList li img{
	width: 100%;
	aspect-ratio: 1 / 1.43;
	filter: drop-shadow(10px 6px 6px #c3c3c3);
}

p.content {
	margin: 5px 0;
	padding:13px;
	font-size:15px;
	border:3px solid #36ceed;
	border-image: linear-gradient(to right, #8ed1de, #ffcdf3aa, #c1b0e6) 1;
}

.tab li:nth-child(1):hover, .tab li:nth-child(1).on {
	background: #ff5e5b;
   	border-bottom: 2px solid #cd201c;
}

.tab li:nth-child(1):hover a, .tab li:nth-child(1).on a {
	color: white;
}

.tab li:nth-child(2):hover, .tab li:nth-child(2).on {
	background: #ffd29c;
   	border-bottom: 2px solid #dd8113;
}

.tab li:nth-child(2):hover a, .tab li:nth-child(2).on a {
	color: black;
}

.tab li:nth-child(3):hover, .tab li:nth-child(3).on {
	background: #fffab1;
   	border-bottom: 2px solid #ece028;
}

.tab li:nth-child(3):hover a, .tab li:nth-child(3).on a {
	color: black;
}

.tab li:nth-child(4):hover, .tab li:nth-child(4).on {
	background: #9fff1f;
   	border-bottom: 2px solid #7bc716;
}

.tab li:nth-child(4):hover a, .tab li:nth-child(4).on a {
	color: black;
}

.tab li:nth-child(4):hover, .tab li:nth-child(4).on {
	background: #ceff8e;
   	border-bottom: 2px solid #7bc716;
}

.tab li:nth-child(4):hover a, .tab li:nth-child(4).on a {
	color: black;
}

.tab li:nth-child(5):hover, .tab li:nth-child(5).on {
	background: #c8e7ff;
   	border-bottom: 2px solid #006ac0;
}

.tab li:nth-child(5):hover a, .tab li:nth-child(5).on a {
	color: black;
}

.tab li:nth-child(6):hover, .tab li:nth-child(6).on {
	background: #ffe0f7;
   	border-bottom: 2px solid #d9a3cb;
}

.tab li:nth-child(6):hover a, .tab li:nth-child(6).on a {
	color: black;
}

.tab li:nth-child(7):hover, .tab li:nth-child(7).on {
	background: #dbf1ff;
   	border-bottom: 2px solid #3993ca;
}

.tab li:nth-child(7):hover a, .tab li:nth-child(7).on a {
	color: black;
}

.tab li:nth-child(8):hover, .tab li:nth-child(8).on {
	background: #fff39c;
   	border-bottom: 2px solid #dbcd69;
}

.tab li:nth-child(8):hover a, .tab li:nth-child(8).on a {
	color: black;
}

.tab li:nth-child(9):hover, .tab li:nth-child(9).on {
	background: #768bff;
   	border-bottom: 2px solid #3244a8;
}

.tab li:nth-child(9):hover a, .tab li:nth-child(9).on a {
	color: white;
}

.tab li:nth-child(10):hover, .tab li:nth-child(10).on {
	background: #fbcad4;
   	border-bottom: 2px solid #ca6d7f;
}

.tab li:nth-child(10):hover a, .tab li:nth-child(10).on a {
	color: black;
}

.tab li:nth-child(11):hover, .tab li:nth-child(11).on {
	background: #ebff98;
   	border-bottom: 2px solid #b2cd44;
}

.tab li:nth-child(11):hover a, .tab li:nth-child(11).on a {
	color: black;
}

@media screen and (max-width: 1024px) {
	
	ul.tab {
		flex-wrap: wrap;
	}
	ul.tab li{
		flex: 1 1 20%;
		margin: 0 6px;
	}
}

@media screen and (max-width: 640px) {
	ul.squareBookList {
		grid-template-columns: repeat(2, 1fr);
		-ms-grid-columns:  1fr 1fr;	
		row-gap: 8px;
		column-gap: 18px;
		margin-top: 4px;
	}
	ul.tab li{
		flex: 1 1 40%;
	}
}

ul.tab {
	display: flex;
	justify-content: space-between;
}

ul.tab li{
	width: 84px;
	padding: 0 8px;
	float: none;
   	border-bottom: 2px solid #CCC;
}

ul.tab li a {
	text-overflow: ellipsis;
	overflow: hidden; 
	white-space: nowrap;
}