.box-book {
	background: #e5f0f6 url(../images/bg-book.jpg);
	background-size: auto 100%;
    padding: 25px;
}
	.box-book .b-container {
		max-width: 1000px;
		margin: auto;
	}
		.box-book .box-head {
			text-align: center;
		    color: #fff;
		    padding: 15px;
		    background: #123e6d;
		}
			.box-book .box-head h4 {
				margin: 0px;
			}
			
	.box-book .box-List {
		padding-top: 40px;
	}
		.box-book .box-List .item {
		    margin-bottom: 45px;
		    position: initial;
		}
		.box-book .box-List .item:nth-child(4n+1)::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 40px;
			background: url(../images/wood.png) no-repeat center;
			background-size: calc(100% - 3px) 100%;
			z-index: 1;
			left: 0px;
			margin-top: -196px;
		}
			.box-book .box-List .book {
			    background: #cda80e url(../images/bg-logobook.png) no-repeat right 15%;
			    background-size: 50% auto;
			    color: #ffffff;
			    padding: 40% 7% 20% 7%;
			    box-shadow: 1px -1px 0px 0px #ececec, 2px -2px 0px 0px #ececec, 3px -3px 0px 0px #ececec, 4px -4px 0px 0px #ececec, 5px -5px 0px 0px #ececec, 6px -6px 0px 0px #bd9c13 !important;
			    position: relative;
			    z-index: 2;
			    text-align: center;
			}
			.box-book .box-List .item.major .book {
				background-color: #113f6e;
			    box-shadow: 1px -1px 0px 0px #ececec, 2px -2px 0px 0px #ececec, 3px -3px 0px 0px #ececec, 4px -4px 0px 0px #ececec, 5px -5px 0px 0px #ececec, 6px -6px 0px 0px #113f6e !important;
			}
			.box-book .box-List .item.major .book:before {
				content: "";
			    background: url(../images/img-Bow.png) no-repeat center;
			    background-size: contain;
			    position: absolute;
			    left: 0px;
			    top: 0px;
			    width: 30px;
			    height: 25px;

			}
			.box-book .box-List .book::after {
			    content: "";
			    border-top: 1px solid #bd9d14;
			    width: 7px;
			    position: absolute;
			    top: -3px;
			    left: 0px;
			    transform: rotate(-40deg);
			}
			.box-book .box-List .item.major .book::after {
			    border-color: #113f6e;
			}
				.box-book .box-List img {
					width: 45%;
					margin: auto;
					display: block;
					margin-bottom: 25%;
				    pointer-events: none;
				}
				.box-book .box-List p {
					font-size: 80%;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					height: 34px;
				}
				
			.box-book .box-List a.btn {
		        margin: 40px auto 15px auto;
		        display: table;
		        position: relative;
		        z-index: 2;
		        font-size: 15px;
			 }
			.box-book .box-List span {
				background: rgba(9, 97, 168, 0.1);
				padding: 3px 7px;
				border-radius: 10px;
				min-width: 100px;
				display: block;
				text-align: center;
				position: relative;
				z-index: 2;
				font-size: 13px;
				word-break: break-all;
			}

.box-form {
    background: url(../images/BG-form.jpg) no-repeat;
    background-size: 100% 100%;
    padding: 40px;
    color: #f1cc33;
}		
	.box-form .box-head {
		position: relative;
		text-align: center;
		color: #fff;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
		.box-form .box-head h4{
			position: relative;
			color: #fff;
			padding-bottom: 20px;
			margin-bottom: 20px;
		}
		.box-form .box-head h4::after {
			content: "";
			border-bottom: 2px solid #cda80f;
			width: 150px;
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
		}

	.box-form form {
		max-width: 1000px;
		margin: auto;
	}
		.box-form form textarea {
		    resize: none;
		}
	
    /* ---------------------------------------------------**** Mobile and Tablet ****--------------------------------------------------- */
    @media only screen and (min-width: 320px) and (max-width: 1024px) {
		.box-form {
		    padding-left: 5px;
		    padding-right: 5px;
		}
		.box-book {
	        padding-left: 0px;
		    padding-right: 0px;
		}
		.box-book .container {
		    max-width: 100%;
	        margin: 0px;
		    width: 100% !important;
		}
		.box-book .box-List {
	        padding-left: 20px;
		    padding-right: 20px;
		}
		.box-book .box-List a.btn {
		    font-size: 80%;
		}
		.box-book .box-List .item:nth-child(4n+1)::after {
		    margin-top: -204px;
		}
    }

    /* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {

        /* แนวตั้ง */
        @media only screen and (orientation:portrait){
			.box-book .box-List .item {
			    padding: 0px 7px;
			}
			.box-book .box-List span {
			    font-size: 75%;
			}
        }
        /* แนวนอน */
        @media only screen and (orientation:landscape){

        }
    }

    /* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
    @media only screen and (min-width: 320px) and (max-width: 767px) {
		.box-book .box-List .item {
		    padding: 0px 7px;
		}
        /* แนวตั้ง */
        @media only screen and (orientation:portrait){
			.box-book .box-List .item:nth-child(2n+1)::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 40px;
				background: url(../images/wood.png) no-repeat center;
				background-size: calc(100% - 3px) 100%;
				z-index: 1;
				left: 0px;
				margin-top: -215px;
			}
        }
        /* แนวนอน */
        @media only screen and (orientation:landscape){
			.box-book .box-List span {
			    font-size: 75%;
			}
        }
    }
.box-book {
	background: #e5f0f6 url(../images/bg-book.jpg);
	background-size: auto 100%;
    padding: 25px;
}
	.box-book .b-container {
		max-width: 1000px;
		margin: auto;
	}
		.box-book .box-head {
			text-align: center;
		    color: #fff;
		    padding: 15px;
		    background: #123e6d;
		}
			.box-book .box-head h4 {
				margin: 0px;
			}
			
	.box-book .box-List {
		padding-top: 40px;
	}
		.box-book .box-List .item {
		    margin-bottom: 45px;
		    position: initial;
		}
		.box-book .box-List .item:nth-child(4n+1)::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 40px;
			background: url(../images/wood.png) no-repeat center;
			background-size: calc(100% - 3px) 100%;
			z-index: 1;
			left: 0px;
			margin-top: -196px;
		}
			.box-book .box-List .book {
			    background: #cda80e url(../images/bg-logobook.png) no-repeat right 15%;
			    background-size: 50% auto;
			    color: #ffffff;
			    padding: 40% 7% 20% 7%;
			    box-shadow: 1px -1px 0px 0px #ececec, 2px -2px 0px 0px #ececec, 3px -3px 0px 0px #ececec, 4px -4px 0px 0px #ececec, 5px -5px 0px 0px #ececec, 6px -6px 0px 0px #bd9c13 !important;
			    position: relative;
			    z-index: 2;
			    text-align: center;
			}
			.box-book .box-List .item.major .book {
				background-color: #113f6e;
			    box-shadow: 1px -1px 0px 0px #ececec, 2px -2px 0px 0px #ececec, 3px -3px 0px 0px #ececec, 4px -4px 0px 0px #ececec, 5px -5px 0px 0px #ececec, 6px -6px 0px 0px #113f6e !important;
			}
			.box-book .box-List .item.major .book:before {
				content: "";
			    background: url(../images/img-Bow.png) no-repeat center;
			    background-size: contain;
			    position: absolute;
			    left: 0px;
			    top: 0px;
			    width: 30px;
			    height: 25px;

			}
			.box-book .box-List .book::after {
			    content: "";
			    border-top: 1px solid #bd9d14;
			    width: 7px;
			    position: absolute;
			    top: -3px;
			    left: 0px;
			    transform: rotate(-40deg);
			}
			.box-book .box-List .item.major .book::after {
			    border-color: #113f6e;
			}
				.box-book .box-List img {
					width: 45%;
					margin: auto;
					display: block;
					margin-bottom: 25%;
				    pointer-events: none;
				}
				.box-book .box-List p {
					font-size: 80%;
					line-height: 1.4;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					height: 34px;
				}
				
			.box-book .box-List a.btn {
		        margin: 40px auto 15px auto;
		        display: table;
		        position: relative;
		        z-index: 2;
		        font-size: 15px;
			 }
			.box-book .box-List span {
				background: rgba(9, 97, 168, 0.1);
				padding: 3px 7px;
				border-radius: 10px;
				min-width: 100px;
				display: block;
				text-align: center;
				position: relative;
				z-index: 2;
				font-size: 13px;
				word-break: break-all;
			}

.box-form {
    background: url(../images/BG-form.jpg) no-repeat;
    background-size: 100% 100%;
    padding: 40px;
    color: #f1cc33;
}		
	.box-form .box-head {
		position: relative;
		text-align: center;
		color: #fff;
		padding-bottom: 15px;
		margin-bottom: 15px;
	}
		.box-form .box-head h4{
			position: relative;
			color: #fff;
			padding-bottom: 20px;
			margin-bottom: 20px;
		}
		.box-form .box-head h4::after {
			content: "";
			border-bottom: 2px solid #cda80f;
			width: 150px;
			position: absolute;
			bottom: 0px;
			left: 50%;
			transform: translateX(-50%);
		}

	.box-form form {
		max-width: 1000px;
		margin: auto;
	}
		.box-form form textarea {
		    resize: none;
		}
	
    /* ---------------------------------------------------**** Mobile and Tablet ****--------------------------------------------------- */
    @media only screen and (min-width: 320px) and (max-width: 1024px) {
		.box-form {
		    padding-left: 5px;
		    padding-right: 5px;
		}
		.box-book {
	        padding-left: 0px;
		    padding-right: 0px;
		}
		.box-book .container {
		    max-width: 100%;
	        margin: 0px;
		    width: 100% !important;
		}
		.box-book .box-List {
	        padding-left: 20px;
		    padding-right: 20px;
		}
		.box-book .box-List a.btn {
		    font-size: 80%;
		}
		.box-book .box-List .item:nth-child(4n+1)::after {
		    margin-top: -204px;
		}
    }

    /* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
    @media only screen and (min-width: 768px) and (max-width: 1024px) {

        /* แนวตั้ง */
        @media only screen and (orientation:portrait){
			.box-book .box-List .item {
			    padding: 0px 7px;
			}
			.box-book .box-List span {
			    font-size: 75%;
			}
        }
        /* แนวนอน */
        @media only screen and (orientation:landscape){

        }
    }

    /* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
    @media only screen and (min-width: 320px) and (max-width: 767px) {
		.box-book .box-List .item {
		    padding: 0px 7px;
		}
        /* แนวตั้ง */
        @media only screen and (orientation:portrait){
			.box-book .box-List .item:nth-child(2n+1)::after {
				content: "";
				position: absolute;
				width: 100%;
				height: 40px;
				background: url(../images/wood.png) no-repeat center;
				background-size: calc(100% - 3px) 100%;
				z-index: 1;
				left: 0px;
				margin-top: -215px;
			}
        }
        /* แนวนอน */
        @media only screen and (orientation:landscape){
			.box-book .box-List span {
			    font-size: 75%;
			}
        }
    }