@media only screen and (min-width: 40.063em) and (max-width: 64em) {
	
	#wrapper {
		position: relative;
		width: 100%;
		height: auto;
		display: table;
		background-color: #E8E8E8;
	}
	.section {		
		width: auto;
		max-width: 1200px;
		margin: 0 auto;
		display: block;
	}
	.section-set {
		height: auto;
    	width: 100%;
		display: block;
		padding: 0 25px;
	}

/*--MENU------------------------------------------------------------------------------------*/
.menu {
		width: auto;
		display: block;
		background-image: url("../img/objects/header-bg.png");
		background-position: center;
		background-size: cover;
		background-color: #333;
	}
	.menu-set {
		height: auto;
    	width: 100%;
		padding: 50px 25px 130px 25px   ;	
		margin: 0 auto;
		display: block;
	}
		.menu .left {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}
			.menu .left a {
				width: auto;
				height: 80px;
				display: block;
			}
				.menu .left a img{
					width: auto;
					height: 100% ;
					display: block;
				}
			.menu .left .text {
				width: auto;
				height: auto;
				display: block;
			}
				.menu .left .text .top {
					height: auto;
					display: inline-block;
					color: #FFF;
					font-size:1.7rem;
				}
				.menu .left .text .low {
					display: block;
					color: #24964B;
					font-size:1rem;
				}
		.menu .right {
			width: 100%;
			height: auto;
			text-align: center;
			margin-top: 20px;
		}
			.menu .right a {
				width: auto;
				height: auto;
				margin:0 15px 0 15px;
				font-family: "NotoSansThai-Regular";
				font-size: 16px;
				color: #FFF;
			}
				.menu .right a.active {
					color: #24964B;
					font-weight: bold;
					pointer-events: none;
				}
				
			.small-headermenu-box {
				display: none
			}
/*-SLIDER------------------------------------------------------------------------------------*/
.section-slider {
	width: auto;
    margin: 0 auto;
    display: block;
	margin-bottom: 50px;
}
	.slider-box {
		height: auto;
		width: 100%;
		display: flex;
		background-color: #FFF;
		border-radius: 15px;
		padding: 10px;
		margin-top: -80px;
	}
	.slider-box .article-slider {
		width: 50%;
		height: auto;
		position: relative;
		padding-right: 10px;
	}
	
		.slider-box .article-on-slider {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 10px;
			position: relative;
		}

			.slider-box .article-on-slider img {
				width: 100%;
				height: auto;
				display: block;
				border-radius: 10px;
			}
			.slider-box .article-on-slider .des {
				width: 100%;
				height: auto;
				display: flex;
				position: relative;
				align-items: center;
				padding: 15px 100px 25px 0;
			}
			.slider-box .article-on-slider .text {
				font-size: 14px;
				color: #111;
			}
			.slider-box .article-on-slider a {
				width: auto;
				height: auto;
				display: inline-block;
				position: absolute;
				right: 0;
				border-radius: 10px;
				background-color: #266333;
				color: #FFF;
				padding: 3px 10px;
			}
	.slider-side {
		width: 50%;
		height: auto;
		border-radius: 10px;
		background-color: #FFF;
	}	


.video-container {
	position: relative;
	padding-bottom: 56.25%;
	width: 100%;
	
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 10px ;
}
	.category-bar {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}
		.category-bar a {
		    font-size: 14px;
			color: #666;
			font-weight: normal;
			margin-right: 10px;
		}
		.category-bar a.active {
			color:#266333;
			font-weight: bold;
			pointer-events: none;
		}
/*-ARTICLE------------------------------------------------------------------------------------*/
.section-article {
	width: auto;
    margin: 0 auto;
    display: block;
    margin-bottom: 50px;

}
	.article-set {
	    height: auto;
		width: 100%;
		display: block;
		padding: 0 25px;
	}
	.article-set .title {
        font-weight: bold;
        font-size: 26px;
        color: #266333;
        margin-bottom: 15px;
    }
		.article-set .title a {
			font-size: 14px;
			color: #FFF;
			font-weight: normal;
				margin-top: 15px;
			float: right;
		}
	.article-show-box {
		width: 100%;
		height: auto;
		margin-top: 10px;
		display: grid !important;
		grid-template-columns: repeat(auto-fill, 32%);
		justify-content: space-between;
	}
		.article-show-box .article-show-grid {
			width: 100%;
			height: auto;
			display: block;
			margin-bottom: 20px;
			position: relative;
			border-radius: 8px 8px 10px 10px;
			background-color: #FFF;
		}
			.article-show-box .article-show-grid img {
				width: 100%;
				height: auto;
				display: block;
				border-radius: 10px 10px 0 0;
			}
			.article-show-grid .option {
				width: 100%;
							height: auto;
							display: flex;
							padding: 10px 5px;
							position: relative;
							flex-wrap: wrap;
			}
				.article-show-grid .option .left {
				width: 100%;
								height: auto;
								display: block;
								text-align: left;
								color: #111;
								font-size: 11px;
				}
				.article-show-grid .option .right {
					width: 100%;
								height: auto;
								display: flex;
								justify-content: center;
								padding-top: 10px;
				}
					.article-show-grid .option .right a {
						width: auto;
									height: auto;
									display: inline-block;
									border-radius: 10px;
									background-color: #266333;
									color: #FFF;
									padding: 3px 10px;
									font-size: 11px;
					}
/*--PROJECT---------------------------------------------------------------------------------*/
.section-project {
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 50px;
}
.section-project-inpage {
	width: 100%;
    height: auto;
    display: flex;
    background-color: #424242;
}
	.project-inpage-set {
		    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 25px;
    display: block;
}
	.project-menu {
		width: 100%;
		height: auto;
		display: flex;
		margin-bottom: 20px;
	}
	.project-menu a {
		width: auto;
		height: auto;
		display: inline-block;
		margin-right: 10px;
		color: #B5B5B5;
	}
	.project-menu a.active {
		color: #FFF;
	}
	.project-index .title {
			font-weight: bold;
			font-size: 28px;
			color: #F47932;
			margin-bottom: 15px;
		}
			.project-index .title a {
				font-size: 14px;
				color: #FFF;
				font-weight: normal;
				margin-top: 15px;
				float: right;
			}
		.project-index .project-grid {
			width: 100%;
			height: auto;
			margin-top: 10px;
			display: grid !important;
			grid-template-columns: repeat(auto-fill, 49%);
			justify-content: space-between;
		}
			.project-index .project-grid .project-list {
				width: 100%;
				height: auto;
				display: block;
				margin-bottom: 20px;
				position: relative;
				border-radius: 8px 8px 10px 10px;
				background-color: #222;
			}
			.project-index .project-grid .project-list .tag-box {
				height: auto;
				width: 50%;
				display: inline-block;
				position: absolute;
				top: 10px;
				right: 10px;
				text-align: right;
			}
				.project-index .project-grid .project-list .tag-box .tag {
					height: auto;
					width: auto;
					display: inline-block;
					font-size: 11px;
					padding: 5px 10px;
					border-radius: 8px;
					color: #FFF;
					margin-bottom: 5px;
					background-color: #222;			
				}	
			.project-index .project-grid .project-list .tag-box.left {
				left: 10px;
				right: inherit;
				text-align: left;
			}
				.project-index .project-grid .project-list .tag-box .tag-3 {
					height: auto;
					width: auto;
					display: inline-block;
					font-size: 11px;
					padding: 5px 10px;
					border-radius: 8px;
					color: #FFF;
					margin-bottom: 5px;
					background-color: #387833;
				}
				.project-index .project-grid .project-list .tag-box .tag-2 {
					height: auto;
					width: auto;
					display: inline-block;
					font-size: 11px;
					padding: 5px 10px;
					border-radius: 8px;
					color: #FFF;
					margin-bottom: 5px;
					background-color: #C85410;
				}
				.project-index .project-grid .project-list  img {
					height: auto;
					width: 100%;
					display: block;
					border-radius: 10px 10px 0 0;
				}
				
				.project-index .project-grid .project-list .result-box {
					height: auto;
					width: 100%;
					display: block;
					padding: 10px;
					position: relative;
				}
					.project-index .project-grid .project-list .result-box a {
						width: 100%;
						height: auto;
						display: block;
						text-align: center;
						color:#F47932;
						margin:20px 0 0 0;			
						font-size: 12px;
					}
	

					.project-index .project-grid .project-list .result-box .project-amount {
						width: 100%;
						display: block;
						height: auto;
						padding: 5px 0 0 0;
					}
						.project-index .project-grid .project-list .result-box .text-des {
							width: 100%;
							display: flex;
							height: auto;
							font-size: 12px;
							color: #C9C9C9;
						}
						.project-index .project-grid .project-list .result-box .text-des .left {
							width: 50%;
							text-align: left;
						}
						.project-index .project-grid .project-list .result-box .text-des .right {
							width: 50%;
							text-align: right;
						}
						.progress-bar {
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							background-clip: padding-box;
							clear: both;
							position: relative;
							width: 100%;
							height: 10px;
							margin: 5px 0 ;
							background-color: #3E3E3E;
							overflow: hidden;
						}
						.progress-bar>.bar {
							-webkit-border-radius: 5px;
							-moz-border-radius: 5px;
							border-radius: 5px;
							background-clip: padding-box;
							position: absolute;
							top: 0;
							left: 0;
							height: 10px;
							background-color: #F47932;
						}
					


/*-FOOTER-----------------------------------------------------------------------------------*/
.section-footer {
	width: 100%;
	height: auto;
	display: block;
	padding:  0;
	background-color: #2D2D2D;
}
	.footer-set {
		width: auto;
		margin: 0 auto;
		display: flex;
		padding: 60px 25px;
	}
		.section-footer .logo {
			width: 70%;
			height: auto;
			display: flex;
			align-items: center;
			position: relative;
		}
			
			.section-footer .logo .detail {
				width:100%;
				height: auto;
				display: block;
				color: #B5B5B5;
				font-size: 12px;
				padding: 0 25px;
			}
				.section-footer .logo .detail span {
					color: #FFF;
				}
		.section-footer .link {
			width:30%;
			height: auto;
			display: block;text-align: right;
		}
			.section-footer .link p{
    			font-size: 15px;
				color: #FFF;
				margin-bottom: 15px;
			}
			.section-footer .link a {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				padding: 7px;
				position: relative;
				text-align: center;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				display: inline-block;
				margin:  0 0 0 20px;
				opacity: 0.8;
				border: 3px solid #FFF;
				background-color: #909090;
			}
					.section-footer .link a img {
						width: auto;
						height: 100%;
						display: block;
					}
				.section-footer .link a:hover {
					background-color: #FFF;
					border: 3px solid #FFF;
				}
				.section-footer .link a:hover img {
				}
		.end-cradit {
			width: 100%;
			height: auto;
			display: block;
			text-align: center;
			background-color: #222;
			padding: 10px 0;
			color: #B5B5B5;
			font-size: 11px;
		}
	/*PROJECT PAGE---------------------------------------------------------------------------------------------------------*/
	.section-project-page {
		width: 100%;
		height: auto;
		display: flex;
		background-color: #424242;
	}
	.project-page-set {
		    width: 100%;
		max-width: 1200px;
		margin: 0 auto;
		padding: 50px 25px;
		display: flex;
	}
		.section-project-page .left {
			width: 70%;
			height: auto;
			display: block; 
			padding-right: 20px;
		}
		.section-project-page .project-page-detail {
			width: 100%;
			height: auto;
			display: block; 
		}
			.project-page-detail .title {
				font-size: 20px;
				color: #FFF;
				margin: 0;
				padding: 0 0 10px 0;
				border-bottom: 2px solid #B5B5B5;
			}
			.project-page-detail .mini-menu {
				width: 100%;
				height: auto;
				display: flex;
				padding: 10px 0;
			}
				.project-page-detail .mini-menu .left {
					width: auto;
					height: auto;
					display:block;
					padding-right:  10px;
				}
				.project-page-detail .mini-menu .center {
					width: auto;
					height: auto;
					display:block;
				}

					.project-page-detail .mini-menu a {
						width: auto;
						height: auto;
						display: inline-block;
						color: #B5B5B5;
						font-size: 14px;
						background-color: rgba(0,0,0,0);
						border: 2px solid #B5B5B5;
						padding: 3px 13px;
						border-radius: 10px;
					}
					.project-page-detail .mini-menu a:hover {	
						color: #FFF;
						background-color: rgb(255,255,255,0.5);
					}
					.project-page-detail .mini-menu a.active {
						color: #FFF;
						background-color:#F47932;
						border: 2px solid #F47932;
					}
		
			.project-page-detail .cover {
				width: 100%;
				height: auto;
				display: block;
				position: relative;
				border-radius: 10px 10px 0 0;
			}
			.project-page-detail img {
				    border-radius: 8px;
			}
			.project-page-detail .detail {
				width: 100%;
				height: auto;
				display: block;
			}
			.project-page-detail .detail .image-style-align-left {
                width: 45%;
                float: left;
                margin: 0 10px 0 0;
            }
           .project-page-detail .detail .image-style-align-right {
                width: 45%;
                float: right;
                margin: 0 0 0 10px;
            }
			.project-page-detail .detail .content {
				margin-top: 20px;
				font-size: 14px;
				color: #B5B5B5;
				margin-bottom: 5px;
				line-height: 20px;
			}
			.project-page-detail .detail blockquote {
				padding: 0px 0 30px 60px;
				margin: 30px 0 0 0;
				text-indent: 0;
				background-image: url(../img/objects/blockquote-icon.png);
				background-repeat: no-repeat;
				background-size: 40px auto;
				background-position: top left;
				font-weight: bold;
			}
			.project-page-detail .detail h2 {
				font-size: 15px;
			}
			.project-page-detail .detail figcaption {
				font-size: 14px;
				color: #666;
				text-align: center;
				padding: 10px;
			}
			.project-page-detail .detail figcaption a {
				background-color: #333;
				color: #FFF;
				padding: 3px 8px;
				display: inline-block;
				border-radius: 3px;
			}
			.project-page-detail .detail p {
				min-height: 30px;
			}
			.project-page-detail .detail a {
				color: #F47932;
				display: inline-block;
				text-decoration: underline;
			}
			.project-page-detail .detail a:hover {
				color: #F47932;
			}
			
		.section-project-page .right {
			width: 30%;
			height: auto;
			display: block;
		}
			.section-project-page .project-page-result {
				width: 100%;
				height: auto;
				display: block;
				background-color: #606060;
				border-radius: 10px;
				padding: 20px;
				text-align: center;
			}
			.project-page-result .type {
				width: 100px;
				height: 100px;
				border: 4px solid #CD997E;
				border-radius: 50%;
				padding: 5px;
				padding: 10px;
				display: inline-block;
				background-color: #F8DCCE;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				margin-bottom: 15px;
			}
			.project-page-result .title {
				font-size: 14px;
    			color: #FFF;
				text-align: left;
				text-indent: 20px;
				margin-bottom: 20px;
			}
			
			.project-page-result .text-des {
				width: 100%;
				display: flex;
				height: auto;
				font-size: 11px;
				color: #FFF;
			}
			.project-page-result .text-des .left {
				width: 70%;
				text-align: left;
			}
			.project-page-result .text-des .right {
				width: 30%;
				text-align: right;
			}
			.project-page-result .get-title {
				height: auto;
				width: 100%;
				font-size: 15px;
				color: #FFF;
				display: block;
				margin: 20px 0 0 0;
			}
			.project-page-result .get-amount {
				font-size: 45px;
				color: #F6E5DC;
				font-weight: bold;
				font-family: monospace;
				padding: 5px 0;
				text-align: center;
			}
			.project-page-result a {
				width: 100%;
				height: auto;
				display: block;
				background-color: #F17C7C;
				color: #FFF;
				margin: 10px 0 0 0;
				padding: 15px 10px;				
				font-family: "NotoSansThai-Regular";
				font-size: 18px;
				border-radius: 3px;
				text-align: center;
			}
			.project-page-result a:hover {
				background-color: #CD5D5D;
    			color: #FFF;
			}
			.project-page-result a.close {
				background-color: #C0735E;
				color: #E0B8A9;
    			pointer-events: none;
				cursor: default;
			}
			.project-page-result a.succeeded {				
				background-color: #387833;
				color: #74B183;
    			pointer-events: none;
				cursor: default;
			}

	.section-project-need {
		width: 100%;
		height: auto;
		display: block;
		padding: 60px 15px;
		background-color: #373737;
	}
		.section-project-need .title {
			font-weight: bold;
			font-size: 30px;
			color: #FFF;
			margin-bottom: 15px;
			text-align: center;
		}
		.section-project-need .des {
			font-size: 16px;
			color: #B5B5B5;
			text-align: center;
			padding: 0 100px;
		}
		.section-project-need .project-need-grid {
			width: 100%;
			height: auto;
			display: flex;
			padding-top: 30px;
		}
		.project-need-grid .project-need-list {
			width: 33.33%;
			height: auto;
			display: block;
			padding: 0 10px;
			text-align: center;
		}
		.project-need-list .head {
			height: auto;
			width: 100%;
			font-size: 17px;
			color: #F47932;
			margin: 10px 0;
		}
		.project-need-list .amount {
			height: auto;
			width: 100%;
			font-size: 30px;
			color: #FF4F4F;
			font-weight: bold;
			margin: 10px 0;
		}
		.project-need-list .end {
			height: auto;
			width: 100%;
			font-size: 17px;
			color: #F47932;
			margin: 10px 0 0 0;
		}
/*PAYMENT PAGE---------------------------------------------------------------------------------------------------------*/
	.section-payment {
		    width: 100%;
    height: auto;
    display: flex;
    background-color: #424242;
	}
	.payment-set {
		width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 25px;
    display: block;
	}
	.payment-page {
		width: 100%;
		height: auto;
		display: block;
		text-align: center;
	}
	.payment-page .header {
		font-weight: bold;
		font-size: 30px;
		color: #FFF;
		margin-bottom: 15px;
	}
	.payment-page .title {
		height: auto;
		width: 100%;
		text-align: center;
		font-size: 15px;
		color: #B5B5B5;
		display: block;
		margin: 0 0 30px 0;
	}
	.payment-pay-box {
		height: auto;
		width: 100%;
		border-radius: 10px;
		background-color: #FFF;
		padding: 0;
		text-align: left;
		display: flex;
	}
		.payment-pay-box .left {
			width: 30%;
			height: auto;
			display: block;
			padding: 20px;
		}
		.payment-pay-box .center {
			width: 35%;
			height: auto;
			display: block;			
			padding: 20px;
			background-color: #f1f1f1;
		}
		.payment-pay-box .right {
			width: 35%;
			height: auto;
			display: block;
			padding: 20px;
		}
	.payment-pay-box .toppic {
		height: auto;
		width: 100%;
		font-size: 15px;
		color: #666;
		display: block;
		margin: 0 0 30px 0;
	}
		.payment-pay-box .toppic span {
			background-color: #F47932;
			padding: 5px 13px;
			border-radius: 10px;
			color: #FFF;
		}
	.payment-pay-box .icon-type {
		height: auto;
		width: 100%;
		display: block;
		text-align: center;
	}
		.payment-pay-box .icon-type .type {
			width: 120px;
			height: 120px;
			border: 4px solid #CD997E;
			border-radius: 50%;
			padding: 5px;
			padding: 10px;
			display: inline-block;
			background-color: #F8DCCE;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			margin-bottom: 15px;
		}
	.payment-pay-box  .input-title {
		height: auto;
		width: 100%;
		text-align: left;
		font-size: 14px;
		color: #666;
		display: block;
		margin: 10px 0 5px  0;
	}
	.payment-pay-box  input.amout-input {
		margin-bottom: 10px;
		border: 4px solid #505050;
		border-radius: 10px;
		padding: 10px;
		text-align: center;
		width: 100%;
		font-size: 20px;
		color: #444;
		font-weight: bold;
		height: auto;
	}
	.payment-pay-box input.amout-input:focus {
		box-shadow: none !important;
		outline: none !important;
		border: 4px solid #505050;
	}
	.payment-pay-box .bank-info-box {
		padding: 0;
		margin-bottom: 30px;
	}
		.payment-pay-box .bank-info-box .bank-header {
			height: auto;
			width: 100%;
			text-align: left;
			font-size: 16px;
			color: #666;
			font-weight: bold;
			display: block;
		}
		.payment-pay-box .bank-info-box .bank-bar {
			height: auto;
			width: 100%;
			display: block;
			margin: 20px 0;
			border-bottom: 1px dashed #B1B1B1;
			padding-bottom: 20px;
			text-align: center;
		}
		.payment-pay-box .bank-info-box .bank-bar:last-of-type {
			margin: 20px 0 0 0;
			border-bottom: none;
			padding-bottom: 0;
		}
		.payment-pay-box .bank-info-box .bank-bar .logo {
			height: auto;
			width: 40%;
			display: inline-block;
			margin: 0 auto 20px auto;
		}
			.payment-pay-box .bank-info-box .bank-bar .logo img {
				height: auto;
				width: 100%;
				display: block;
				border-radius: 5px;
			}
		.payment-pay-box .bank-info-box .bank-bar .detail {
			height: auto;
			width: 100%;
			display: block;
		}
		.payment-pay-box .bank-info-box .bank-bar .bank {
			height: auto;
			width: 100%;
			font-size: 16px;
			color: #666;
			font-weight: bold;
			display: block;
			margin: 0;
		}
		.payment-pay-box .bank-info-box .bank-bar .acc {
			font-size: 45px;
			color: #444;
			font-weight: bold;
			font-family: monospace;
			padding: 0;
			line-height: 60px;
			height: auto;
			width: 100%;
			display: block;
		}
		.payment-pay-box .bank-info-box .bank-bar .name {
			height: auto;
			width: 100%;
			font-size: 16px;
			color: #666;
			font-weight: bold;
			display: block;
			margin: 0;
		}
	.or-text {
			height: auto;
			margin: 25px 0;
    		font-size: 16px;
			width: 100%;
			text-align: center;
			position: relative;
		}
		.or-text:before {
			content: "";
			height: 1px;
			width: 100%;
			background: #AC7C63;
			top: 50%;
			left: 0;
			position: absolute;
			z-index: 10;
		}
		.or-text span {
			background: #AC7C63;
			color: #FFF;
			z-index: 100;
			position: relative;
			padding: 10px 15px;
			border-radius: 3px;
		}	
	.payment-pay-box .other-text {
		height: auto;
		width: 100%;
		text-align: center;
		font-size: 14px;
		color: #666;
		display: block;
		margin: 0 0 0 0;
	}
	.payment-pay-box .other-title {
		height: auto;
		width: 100%;
		text-align: center;
		font-size: 15px;
		color: #AC7C63;
		display: block;
		margin: 10px 0;
	}

	.payment-pay-box  .input-box-set {
		height: auto;
		width: 100%;
		display: flex;
	}

	
	
	.payment-pay-box .half-input-box {
		height: auto;
		width: 100%;
		display: block;
	}
	.payment-pay-box .half-input-box:nth-child(2) {
		height: auto;
		width: 50%;
		display: block;
		padding-left: 10px;
		padding-right: 0;
	}
	.payment-pay-box .input-box {
		height: auto;
		width: 100%;
		display: block;
	}
	.payment-pay-box input.amout-text {
		margin-bottom: 10px;
		border: 3px solid #505050;
		background-color: #f1f1f1;
		border-radius: 10px;
		padding: 10px;
		text-align: left;
		width: 100%;
		font-size: 14px;
		color: #444;
		font-weight: bold;
		height: auto;
	}
	.payment-pay-box  input.amout-text:focus {
		box-shadow: none !important;
		outline: none !important;
		border: 3px solid #505050;
	}
	.payment-pay-box textarea {
		margin-bottom: 10px;
		border: 3px solid #505050;
		background-color: #f1f1f1;
		border-radius: 10px;
		padding: 10px;
		text-align: left;
		width: 100%;
		font-size: 14px;
		color: #444;
		height: 100px;
		resize: none;
    font-family: "Prompt","Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
	}
	.payment-pay-box textarea:focus {
		box-shadow: none !important;
		outline: none !important;
		border: 3px solid #505050;
	}
	.payment-pay-box  select {
		margin-bottom: 10px;
		border: 3px solid #505050;
		background-color: #f1f1f1;
		border-radius: 5px;
		padding: 10px;
		text-align: left;
		width: 100%;
		font-size: 15px;
		color: #444;
		font-weight: bold;
		height: auto;
	}
	.payment-pay-box  select:focus {
		box-shadow: none !important;
		outline: none !important;
		border: 3px solid #505050;
	}
	
		
		
		.payment-pay-box .main-btn {
			width: auto;
			height: auto;
			display: inline-block;
			background-color: #F17C7C;
			color: #FFF;
			margin: 10px 0 0 0;
			padding: 10px 20px;
			font-size: 15px;
			border-radius: 10px;
		}
		.payment-pay-box .main-btn:hover {
			background-color: #CD5D5D;
    		color: #FFF;
		}
		.payment-pay-box .payment-upload-btn {
			margin-bottom: 10px;
			background-color: #505050;
			border-radius: 5px;
			padding: 10px;
			font-family: "NotoSansThai-Regular";
			width: 100%;
			font-size: 18px;
			color: #FFF;
			height: auto;
			display: inline-block;
			text-align: center;
			cursor: pointer;
		}
		.payment-pay-box .payment-upload-btn:hover {
			background-color: #333;
			color: #FFF;
		}
		.payment-pay-box .example-slip {
			width: 60%;
			height: 200px;
			margin: 0 20% 30px 20%;
			display: none;
			border-radius: 3px;
			cursor: default;
			text-align: center;
			background-color: #505050;
			border: 3px solid #505050;
			overflow: hidden;
		}
		.payment-pay-box .example-slip.uploaded {
			display: block;
		}
		.payment-pay-box .example-slip img {
			width: auto;
			height: 100%;
			display: inline-block;
		}
		.payment-pay-box .add-name-btn {
			background-color: #CD997E;
			color: #FFF;
			margin: 15px 0;
			padding: 10px 15px;
			font-family: "NotoSansThai-Regular";
			font-size: 17px;
			border-radius: 3px;
			display: inline-block;
		}
		.payment-pay-box .add-name-btn:hover {
			background-color: #AC7C63;
			color: #FFF;
		}
		
		
/*-------------------------------------------------------------------------------------------------------------------------*/

.back-link-bar {
	width: 100%;
	height: auto;
	display: block;	
	margin-bottom: 20px;
}
	.back-link-bar a {
		width:  auto;
		height: auto;
		color: #666;
		display: inline-block;	
		padding: 3px 5px;
		border-radius: 3px;
	}
	.back-link-bar a:hover {
		color: #333;
	}
	.back-link-bar a:first-child {
		padding: 3px  5px 3px 0;
	}
	.back-link-bar span {
		width:  auto;
		height: auto;
		color: #999;
		margin:  0  5px;
		display: inline-block;	
	}
	.back-link-bar a.active {
		color: #F47932;
		pointer-events: none;
		font-weight: bold;
		
	}

/*index-article---------------------------------------------------------------------------------------*/
	.index-article  {
		width: 100%;
		height: auto;
		display:flex;
		background-color: #E8E8E8;
    margin-top: -80px;
	}
		.index-article-set  {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 50px 25px;
			display: block;
		}
		.index-article-read-set {
			width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 25px;
            display: flex;
		}
		.index-article .index-article-title {
			font-weight: bold;
			font-size: 28px;
			color: #266333;
			margin-bottom: 15px;
		}
		.index-article .index-article-grid {
			width: 100%;
			height: auto;
			margin-top: 10px;
			display: grid !important;
			grid-template-columns: repeat(auto-fill, 32%);
			justify-content: space-between;
		}
			
				.index-article .index-article-box {
					width: 100%;
					height: auto;
					display: block;
					margin-bottom: 20px;
					position: relative;
					border-radius: 8px 8px 10px 10px;
					background-color: #FFF;
				}
					.index-article .index-article-box img {
						width: 100%;
						height: auto;
						display: block;
						border-radius: 10px 10px 0 0;
					}
					.index-article .index-article-box .detail {
						    width: 100%;
							height: auto;
							display: flex;
							align-items: center;						
					}
					
					.index-article .option {
							width: 100%;
							height: auto;
							display: flex;
							padding: 10px 5px;
							position: relative;
							flex-wrap: wrap;
						}
							.index-article .option .left {
								width: 100%;
								height: auto;
								display: block;
								text-align: left;
								color: #111;
								font-size: 11px;
							}
							.index-article .option .right {
								width: 100%;
								height: auto;
								display: flex;
								justify-content: center;
								padding-top: 10px;
								
							}
								.index-article .option .right a {
									width: auto;
									height: auto;
									display: inline-block;
									border-radius: 10px;
									background-color: #266333;
									color: #FFF;
									padding: 3px 10px;
									font-size: 11px;
								}
	
	
	.article-read-set  {
        width: 100%;
        display: block;
    }
	
	
	
	
	
	.article-read-box {
		width: 100%;
		height: auto;
		display: block;
		padding: 0 ;
	}			
	.article-read-body {
		width: 100%;
		height: auto;
		display: block;
		padding: 0 ;
	}
			.article-read-box .title-eng {
				font-size: 20px;
				color: #FFF;
				margin: 20px 0 0 0;
			}
			.article-read-box .title {
				font-size: 15px;
				color: #266333;
				margin-bottom: 20px;
			}	
			.article-read-box .cover {
				width: 100%;
				height: auto;
				display: block;
				border-radius: 10px 10px 0 0;
			}	
			.article-read-box .content {
				width: 100%;
				height: auto;
				display: block;
				background-color: #FFF;
				padding: 20px;
				border-radius: 0 0 10px 10px;
			}	
				.article-read-box .detail {
					font-size: 14px;					
					color:#333;
					margin-bottom: 5px;
					line-height: 20px;
					
				}
				.article-read-box .detail p {
					min-height: 30px;
				}
				.article-read-box .detail img {
					border-radius: 8px;
				}
					.article-read-box .detail .image-style-align-left {
						width: 45%;
						float: left;
						margin: 0 10px 0 0;
					}
					.article-read-box .detail .image-style-align-right {
						width: 45%;
						float: right;
						margin: 0 0 0 10px;
					}
				.article-read-box .team {
					width: 100%;
					height: auto;
					display: flex;
					margin: 30px 0 0 0;
					padding: 20px 0 0 0;
					border-top: 3px solid #FFF;
				}	
				.article-read-box .team ul {
					list-style-type: disc;
					font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
					text-align: left;
					margin-bottom: 0;
					padding-left: 30px;
				}
				.article-read-box .team ul li {
					margin: 0 0 15px 0;
				}
				.article-read-box .team p {
					color: #000;
					font-size: 20px;
					font-weight: bold;
				}
				.article-read-box .team span {
					color: #666;
					font-size: 17px;
				}
				.article-read-box blockquote {
					padding: 0px 0 30px 60px;
					margin: 30px 0 0  0;
					background-image: url("../img/objects/blockquote-icon.png");
					background-repeat: no-repeat;
					background-size: 40px auto;
					background-position: top left;
				}
				.article-read-box h2 {
					font-size: 20px;
				}
				.article-read-box figcaption {
					font-size: 14px;
					color: #666;
					text-align: center;
					padding: 10px;
				}
				.article-read-box a {
						color:  #266333;
						display: inline-block;
						text-decoration: underline;
						font-weight: bold;
					}
				.article-read-box a:hover {
    					color: #347A43;
					}
	.article-other-set  {
		display: none;
	}
	.article-other {
		width: 100%;
		height: auto;
		display: block;
		padding: 50px 0 30px 0;
	}
		.article-other .title {
			font-size: 20px;
			color: #B5B5B5;
			margin-bottom: 10px;
		}
		.article-other .other-grid {
			width: 100%;
			height: auto;
			padding: 0;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;
			-webkit-box-flex: 0;
			-moz-box-flex: 0;
			-webkit-box-direction: normal;
			-moz-box-direction: normal;
			-webkit-flex: 0 1 auto;
			-ms-flex: 0 1 auto;
			flex: 0 1 auto;
			-webkit-box-orient: horizontal;
			-webkit-flex-direction: row;
			-moz-box-orient: horizontal;
			-ms-flex-direction: row;
			flex-direction: row;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
		}
		.other-box .other-list {
			flex-basis: 33.33%;
			width: 33.33%;
			height: auto;
			padding: 0 10px 20px 10px;
			box-sizing: border-box;
			-webkit-box-flex: 0;
			-webkit-flex: 0 0 auto;
			-moz-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
		}
/*VIDEO-----------------------------------------------------------------------------------------------*/	
.video-box {
	position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
}
.video-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/*OTHER-----------------------------------------------------------------------------------------------*/		
.other-set  {
	width: auto;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 ;
	display: block;
}
.other-box {
	width: 100%;
	height: auto;
	display: block;
	padding: 50px 0 30px 0;
}
	.other-box .title {
		font-family: "NotoSansThai-Regular";
		font-weight: bold;
		font-size: 30px;
		color: #666;
		margin-bottom: 15px;
		text-align: center;
	}
	.other-box .other-grid {
		width: 100%;
		height: auto;
		padding: 0;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 0;
		-moz-box-flex: 0;
		-webkit-box-direction: normal;
		-moz-box-direction: normal;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		-moz-box-orient: horizontal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.other-box .other-list {
		flex-basis: 33.33%;
		width: 33.33%;
		height: auto;
		padding: 0 10px 20px 10px;
		box-sizing: border-box;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 auto;
		-moz-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}
/*----STATUS-BOX-----------------------------------------------------------------------------------------------*/					
 .status-box {
	width: 100%;
	height: auto;
	display: flex;
	background-color: #222;
	align-items: center;
	position: relative;
	padding:  20px 10px;
	 border-radius: 0 0 10px 10px;
}			
	.status-box .text-side {
		width: 50%;
		height: auto;
		display: inline-flex;		
		align-items: center;
	}
	.status-box .text-side span {
		color: #C9C9C9;
		display: inline-flex;
		align-items: center;
		font-size: 14px;
	}
	.status-box .share-box {
		width: 50%;
		height: auto;
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
	}
	.status-box .share-box span {
			font-size: 14px;
			color: #C9C9C9;
			display: contents;
			margin-right: 5px;
		}
		.status-box .share-box .share-btn {
			width: 28px;
			height: 28px;
			display: inline-block;
			text-align: center;
			border-radius: 50%;
			font-weight: bold;
			text-transform: uppercase;
			margin-left: 5px;
			padding: 5px;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
		}
		.status-box .share-box .share-btn:hover {
			transform: scale(1.1);
		}
			.status-box .share-box .share-btn.facebook {
				background-color: #355BA5;
			}
			.status-box .share-box .share-btn.line {
				background-color: #00B900;
			}
			.status-box .share-box .share-btn.twitter {
				background-color: #1DA1F2;
			}
			.status-box .share-box .share-btn.copylink {
				background-color: #FF761B;
			}
			
		
		.status-box .share-box  i {
			height: 18px;
			width: auto;
			display: inline-block;
		}
			.status-box .share-box  i img {
				height: 100%;
				width: auto;
				display: block;
			}
/*EBOOK----------------------------------------------------------*/
.section-ebook {
	width: 100%;
    height: auto;
    display: block;
    padding: 30px 15px 30px 15px;
    background: rgb(241,215,202);
    background: -webkit-linear-gradient(rgba(241,215,202,1) 0%, rgba(246,229,220,1) 100%);
    background: -o-linear-gradient(rgba(241,215,202,1) 0%, rgba(246,229,220,1) 100%);
    background: linear-gradient(rgba(241,215,202,1) 0%, rgba(246,229,220,1) 100%);
}
	.section-ebook .title {
		font-family: "NotoSansThai-Regular";
		font-weight: bold;
		font-size: 30px;
		color: #666;
		text-align: center;
		margin-bottom: 15px;
	}
	.section-ebook .ebook-grid {
		width: 100%;
		height: auto;
		padding: 0;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 0;
		-moz-box-flex: 0;
		-webkit-box-direction: normal;
		-moz-box-direction: normal;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		-moz-box-orient: horizontal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
	.section-ebook  .ebook-grid .ebook-list {
		flex-basis: 25%;
		width: 25%;
		height: auto;
		padding: 0 10px 0px 10px;
		box-sizing: border-box;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 auto;
		-moz-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
	}
	.ebook-grid .ebook-list .ebook-box {
		height: auto;
		width: 100%;
		display: block;
		padding: 10px;
		margin-bottom: 20px;
		text-align: center;
	}
	 .ebook-box .cover {
		height: auto;
		width: 100%;
		display: block;
		padding: 0 40px;
		margin-bottom: 10px;
		position: relative;
	}
	 .ebook-box .cover a {
		height: auto;
		width: 100%;
		display: block;
		padding: 6px;
		border-radius: 5px;
		transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
	}
	 .ebook-box .cover a img {
		height: auto;
		width: 100%;
		display: block;
		border-radius: 3px;
	}
	 .ebook-box:hover .cover a {
		transform: scale(1.05);
	}
	.ebook-box .header {
		height: auto;
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #AC7C63;
		font-weight: bold;
		display: inline-block;
		margin: 0;
		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
	}
	.ebook-box:hover .header {
		color: #8F5D44;
	}

.ebook-read-page {
	width: 100%;
	height: auto;
	display: block;
	padding: 0 10px 0 10px;
}
	.ebook-read-page .title {
		height: auto;
		width: 100%;
		text-align: center;
		font-size: 19px;
		color: #666;
		font-weight: bold;
		display: inline-block;
		margin: 20px 0 ;
		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
	}
/*SUGGEST-------------------------------------------------------------------------------------------------------------------------*/
.section-suggest {
	    width: 100%;
    height: auto;
    display: flex;
    background-color: #E8E8E8;
    margin-top: -80px;
}
	.suggest-set {
	    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 25px;
    display: block;
}
.suggest-page {
	width: 100%;
    height: auto;
    display: block;
    text-align: center;
}
.suggest-page .title {
        font-weight: bold;
    font-size: 28px;
    color: #266333;
    margin-bottom: 15px;
}
	.suggest-page .suggest-detail {
		font-size: 17px;
		color: #333;
		margin-bottom: 5px;
		line-height: 30px;
	}

	.suggest-page .suggest-detail blockquote {
		padding: 0px 0 30px 60px;
		margin: 30px 0 0  0;
		background-image: url("../img/objects/blockquote-icon.png");
		background-repeat: no-repeat;
		background-size: 40px auto;
		background-position: top left;
		font-weight: bold;
	}
	.suggest-page .suggest-detail h2 {
		font-size: 19px;
		color: #266333;;
	}
	.suggest-page .suggest-detail figcaption {
		font-size: 18px;
		color: #111;
		text-align: center;
		padding: 10px;
	}
	.suggest-page .suggest-detail b {
		color: #333;
	}
	.suggest-page .suggest-detail a {
			color: #333;
			margin: 0 10px;
			text-decoration: underline;
			display: inline-block;
		}
	.suggest-page .suggest-detail a:hover {
			color: #F47932;
		}
/*----------------------------------------------------------------------------------------------------------*/
.pagination-bar {
 	width: 100%;
	height: auto;
	display: block;
	text-align: center;
	margin: 25px 0 50px 0;
}
.pagination-bar a {
    float: none;
    display: inline-block;
    height: auto;
    width: auto;
    font-size: 14px;
    margin: 0 5px;
    color: #B5B5B5;
    border-radius: 10px;
    padding: 3px 11px;
}
.pagination-bar a:hover {
    background-color: #373737;
    color: #B5B5B5;
}
.pagination-bar a.active {
    background-color:#F47932;
    color: #FFFFFF;
    pointer-events: none;
    cursor: default;
}
/*-----------------------------------------------------------------------------------------------*/

/*CONTROL---------------------------------------------------------------------------------*/
.control-page {
	width: 100%;
	height: auto;
	min-height: 100vh;
	background-color: #1D2436;
}
.login-content {
	width: 100%;
	height: auto;
	min-height: 100vh;
	display: flex;
	align-items: center;
}
	.login-content .login-set {
		width: 100%;
		height: auto;
		display: block;
		text-align: center;
	}
		.login-content .logo {
			width: 100%;
			height:auto;
			display: block;
			text-align: center;
		}
		.login-content .logo img {
			width: auto;
			max-width: 200px;
			height: auto;
			display: inline-block;
		}
		.login-content .head-title {
			width: 100%;
			height: auto;
			font-family: OrtisanSignature;
			font-size: 1.8rem;
			color: #56658F;
		}
		.login-content .head-title-sub {
			width: 100%;
			height: auto;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
    		font-size: 0.9rem;
			color: #445071;
		}
	.login-content .login-form {
		width: 100%;
		max-width: 300px;
		height: auto;
		display:inline-block;
		margin: 100px auto;
	}
		.login-content .login-form input {
			width: 100%;
			height: auto;
			display:block;
			border: none;
			border-bottom: 2px solid #445071;
			padding: 10px;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
    		font-size: 1rem;
			letter-spacing: 2px;
			background-color: transparent !important; 
			margin-bottom: 20px;
			box-sizing: border-box;
		  	caret-color: #56658F;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			color: #ADB8D7; 
		}
		.login-content .login-form input::-webkit-input-placeholder { /* Edge */
		  color: #56658F;
		}
		.login-content .login-form input:-ms-input-placeholder { /* Internet Explorer 10-11 */
		  color: #5658F;
		}
		.login-content .login-form input::placeholder {
		  color: #56658F;
		}
		.login-content .login-form input:focus {
			box-shadow: none !important;
			outline: none ;
		}
		.login-content .login-form input:-webkit-autofill,
		.login-content .login-form input:-webkit-autofill:hover, 
		.login-content .login-form input:-webkit-autofill:focus {
			font-size: 17px;
			border: none;
			border-bottom: 2px solid #445071;			
			-webkit-text-fill-color: #ADB8D7; 
			-webkit-box-shadow: 0 0 0px 1000px  transparent inset !important; 
			transition: background-color 5000s ease-in-out 0s;
		}
		.login-content .login-form input:-internal-autofill-selected {
			background-color: transparent !important; 
			background-image: none !important;
			color: #ADB8D7 !important;
		}
		.login-btn-box {
			width: 100%;
			height: auto;
			display:block;
			position: relative;
			padding: 60px 0 0 0;
		}
		.login-btn-box .login-btn {
			width: auto;
			height: auto;
			display: inline-block;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 18px;
			color: #445071;
			text-transform: uppercase;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			border: 1px solid #445071;
			border-radius: 3px;
			padding: 7px 30px 7px 30px;
		}
		.login-btn-box .login-btn:hover {
			background-color: #5A6A96;
			border: 1px solid #5A6A96;
			color: #1D2436;
		}
		.alert-text {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 3px;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 15px;
			color: #FFF;
			padding: 7px 0 ;
			background-color: #DD585A;
			position: absolute;
			top: 0;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			opacity: 0;
		}
		.login-content  .forget-password {
			width: 100%;
			height: auto;
			text-align: center;
		}
			.login-content  .forget-password a {
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				font-size: 0.9rem;
				color: #3D4862;
			}
			.login-content  .forget-password a:hover {
				color: #FFF;
			}
	.control-main-page {
		width: 100%;
		height: auto;
		min-height: 100vh;
		display: block;	
		position: relative;
	}
	.control-menu-small {
		display: none;
	}
	.control-mini-drop-menu {
		display: none;
	}
	.control-headmenu {
		width: 100%;		
		height: auto;
		display:block;
		padding: 15px 0;
	}
		.control-headmenu .left {
			width: 100%;		
			height: auto;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 14px;
			color: #6D7DA7;
			margin-bottom: 10px;
		}
			.control-headmenu .left span {
				padding: 5px 6px;
				border-radius: 3px;
				background-color: #6D7DA7;
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				font-size: 14px;
				color: #FFF;
				margin-left: 5px;
				text-transform: uppercase;
			}
		.control-headmenu .right {
			width: 100%;		
			height: auto;            
			display: flex;
			align-items: center;
		}
			.control-headmenu .right a {
				width: auto;
				height: auto;
				display: inline-block;
				margin: 0 10px;
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				font-size: 12px;
				color: #6D7DA7;
				text-transform: uppercase;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
			.control-headmenu .right a.home-btn {
				margin: 0 50px 0 0;
				font-family: "foundation icons";
				font-size: 12px;
				line-height: 12px;
			}
			.control-headmenu .right a:hover {
				color: #94A0C3;
			}
			.control-headmenu .right a.active {
				color: #FFF;
			}
			.control-headmenu .right a.logout-btn {
				border: 1px solid #6D7DA7;
				border-radius: 3px;
				padding: 5px 10px 3px 10px;
				margin: 0 0 0 15px;
			}
			.control-headmenu .right a.logout-btn:hover {
				border: 1px solid #DD585A;
				color: #FFF;
				background-color: #DD585A;
			}
	.control-footer {
		width: 100%;		
		height: auto;
		display: flex;
		align-items: center;
		padding: 15px 0 25px 0;
		
    	font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		font-size: 12px;
		color: #5A6A96;
	}
		.control-footer a:hover {
			color: #8996B8;
		}
	.control-main-page .control-content-body {
		width: 100%;
		height: 100%;
		min-height: 760px;
		display: block;
		padding: 20px;
		border-radius: 5px;
    	background-color: #2B334D;
	}	
		.control-main-page .head-title {
			width: 100%;
			height: auto;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 18px;
			color: #9CA5BD;
			margin-bottom: 10px;
			border-bottom: 2px solid #6E7B9C;
		}
		.control-main-page .head-title a.back {
			width: auto;
			height: auto;
			font-family: "foundation icons";
			font-size: 1rem;
			color: #2B334D;
			padding: 0 10px;
			background-color: #9CA5BD;
			border-radius: 3px;
			display: inline-block;
			float: right;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
		}
		.control-main-page .head-title a.back:hover {
			background-color:#6B789B;
		}
		.control-main-page .normal-title {
			width: 100%;
			height: auto;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 15px;
			color: #9CA5BD;
		}
		.control-main-page .normal-title.focus {
			color: #FFF;
		}
			.control-main-page .normal-title a {
				padding: 3px  5px ;
				background-color: #5A6A96;
				color: #1D2436;
				border-radius: 3px;
				margin-left: 10px;
				font-size: 13px;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			}
			.control-main-page .normal-title a:hover {				
				background-color: #7383AC;
				color: #1D2436;
			}
			.control-main-page .normal-title a.delete_btn {
				background-color: #B3696B;
				color: #1D2436;
			}
			.control-main-page .normal-title a.delete_btn:hover {
				background-color: #C1787A;
				color: #1D2436;
			}
		.control-main-page .filter-box {
			width: 100%;
			height: auto;
			display: flex;
			margin: 10px 0 20px 0;
			background-color: rgba(20,20,20,0.2);
			padding: 10px;
		}
		
		.control-main-page .filter-box.hide-switch{
			display: none;
		}
		.control-main-page .filter-box .filter-column {
			width: 50%;
			height: auto;
			display: block;
			padding-right: 20px;
		}
		.control-main-page .filter-box .filter-column:nth-child(2) {
			padding-left: 20px;
		}
		
		.control-main-page .filter-box .filter-line {
			width: 100%;
			height: auto;
			display: flex;
			padding: 5px 0;
			border-bottom: 1px dashed rgba(255,255,255,0.2);
		}
		.control-main-page .filter-box .filter-line:last-of-type {
			border-bottom: none;
		}
			.control-main-page .filter-box .filter-line .filter-list {
				width: 17%;
				height: auto;
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				font-size: 12px;
				color: #9CA5BD;
				padding-top: 4px;
			}			
			.control-main-page .filter-box .filter-line .filter-option {
				width: 83%;
				height: auto;
				padding: 0 0 0 10px;
			}
			.control-main-page .filter-box .filter-line .filter-option .three-column {
				box-sizing: border-box;
				display: -webkit-box;
				display: -webkit-flex;
				display: -moz-box;
				display: -ms-flexbox;
				display: flex;
				-webkit-box-flex: 0;
				-moz-box-flex: 0;
				-webkit-box-direction: normal;
				-moz-box-direction: normal;
				-webkit-flex: 0 1 auto;
				-ms-flex: 0 1 auto;
				flex: 0 1 auto;
				-webkit-box-orient: horizontal;
				-webkit-flex-direction: row;
				-moz-box-orient: horizontal;
				-ms-flex-direction: row;
				flex-direction: row;
				-webkit-flex-wrap: wrap;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
			}
		.control-main-page .filter-box .filter-column.third-columm {
			width: 33.33%;
		}
		.control-main-page .filter-box .filter-column.third-columm .filter-list {
			width: 30%;
		}
		.control-main-page .filter-box .filter-column.third-columm .filter-option {
			width: 70%;
		}
		.control-main-page .filter-box .filter-line .between-text {
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 13px;
			color: #9CA5BD;
			padding: 0 10px;
		}
		.control-main-page .date-input {
			border: none;
			padding: 6px 10px;
			border-radius: 3px;
			text-align: center;
			background-color: #333D55;
			 margin: 0 5px 0 0;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size:14px;
			box-sizing: border-box;
			caret-color: #56658F;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			color: #ADB8D7;
			cursor: pointer;
			width: 100px;
		}
			.control-main-page .date-input:hover {
				background-color: #36415A;
   				color: #7B8AAF;
			}
		.control-main-page .time-input {
			border: none;
			padding: 4px 0 4px 25px;
			border-radius: 3px;
			text-align: center;
			background-color: #333D55;
			 margin: 0 5px 0 0;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size:14px;
			box-sizing: border-box;
			caret-color: #56658F;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			color: #ADB8D7;
			cursor: pointer;
			width: 100px;
		}
			.control-main-page .date-input:hover {
				background-color: #36415A;
				color: #7B8AAF;
			}
		.control-main-page .time-input::-webkit-calendar-picker-indicator {
			background: none;
		}
		.control-main-page select {
			width: auto;
			border: none;
			padding: 6px 10px ;
			border-radius: 3px;
			text-align: center;
			background-color: #333D55;
			margin : 0 5px 0 0;
			caret-color: #56658F;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			color: #ADB8D7;
			cursor: pointer;
			font-size: 12px;
		}
		.control-main-page select:hover {
			background-color: #36415A;
    		color: #7B8AAF;
		}
		.control-main-page .text-input {
			border: none;
			padding:6px 10px;
			border-radius: 3px;
			background-color: #333D55;
			margin : 0 5px 0 0;
			box-sizing: border-box;
			caret-color: #56658F;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			color: #ADB8D7;
			cursor: pointer;
			font-size: 14px;			
    		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		}
			.control-main-page .text-input:hover {
				background-color: #36415A;
    			color: #7B8AAF;
			}
		.control-main-page .text-input::-webkit-input-placeholder { /* Edge */
		  color:  #575E73;
		}
		.control-main-page .text-input::-ms-input-placeholder { /* Internet Explorer 10-11 */
		  color:  #575E73;
		}
		.control-main-page .text-input::placeholder {
		  color: #575E73;
		}
		.control-main-page .textarea-input {
			width: 100%;
			height: 200px;
			resize:  none;
			border: none;
			padding:6px 10px;
			border-radius: 3px;
			background-color: #333D55;
			margin : 0;
			box-sizing: border-box;
			caret-color: #56658F;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			color: #ADB8D7;
			cursor: pointer;
    		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 14px;	
			
		}
			.control-main-page .textarea-input:hover {
				background-color: #36415A;
    			color: #7B8AAF;
			}
		.control-main-page .textarea-input::-webkit-input-placeholder { /* Edge */
		  color:   #575E73;
		}
		.control-main-page .textarea-input::-ms-input-placeholder { /* Internet Explorer 10-11 */
		  color:  #575E73;
		}
		.control-main-page .textarea-input::placeholder {
		  color:  #575E73;
		}
		.control-main-page .summit-btn {
			width: auto;
			height: auto;
			display: inline-block;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 0.9rem;
			text-transform: uppercase;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			border-radius: 3px;
			padding: 7px 30px;
			background-color: #5A6A96;
			color: #1D2436;
		}
			.control-main-page .summit-btn:hover {
				background-color: #7383AC;
				color: #1D2436;
			}
		.control-main-page .summit-btn.force-filter-btn {
			margin-top: 41px;
		}
		.justtext-radio-button {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
		}
			.justtext-radio-button label {
			width: auto;
			height: auto;
			display: inline-flex;
		}
			.justtext-radio-button input {
				display: none;
			}
			.justtext-radio-button span {
				width: auto;
				height: auto;
				border-radius: 3px;
				background-color: #333D55;
				margin-right: 5px;
				font-size: 12px;
				padding:6px 10px;
				color: #687AA4;
				cursor: pointer;
    			font-family: sans-serif;
			}
				.justtext-radio-button span:hover {
					background-color: #36415A;
    				color: #7B8AAF;
				}
			.justtext-radio-button input:checked + span {
				background-color: #5E79BD;
				color: #FFF;
			}
			
		.control-main-page .table-head-bar {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			border-radius:  3px 3px 0 0;
			font-size: 12px;
			background-color: #24435C;
			color: #FFF;
			margin-top: 10px;
    		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		}
			.control-main-page .table-head-bar .body {
				height: auto;
				display: block;
				text-align: center;
				padding: 10px 0;
			}
		.control-main-page .table-detail-bar {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
			font-size: 12px;
			position: relative;
			background-color:#4C6A84;
			color: #B4CBE1;			
    		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		}
			.control-main-page .table-detail-bar .body {
				height: auto;
				display: block;
				text-align: center;
				padding: 5px 0;
			}
			.control-main-page .table-detail-bar .body.text-left {
				text-align: left;
				padding: 5px 5px;
			}
			.control-main-page .table-detail-bar .body.text-right {
				text-align: right;
				padding: 5px 5px;
			}
			.control-main-page .table-detail-bar .body .save-btn {
				display: inline-block;
				padding: 4px 10px 4px 10px;
				margin-bottom: 5px;
			}
			.control-main-page .table-detail-bar .body .save-btn:last-of-type {
				margin-bottom: 0;
			}
			.control-main-page .table-detail-bar .body .ninja-btn {
				opacity: 0;
				pointer-events: none;
			}
			.control-main-page .table-detail-bar .body input {
				margin-bottom: 5px;
			}
			.control-main-page .table-detail-bar .body input:last-of-type {
				margin-bottom: 0;
			}
			.control-main-page .table-detail-bar .body .pomotion {
				width: auto;
				height: auto;
				padding: 3px 10px;
				border-radius: 3px;
				color: #FFF;
				background-color: #2D4A87;
			}
		.control-main-page .table-detail-bar:nth-child(even) {
			background-color:#4F6E89;
		}
		.control-main-page .table-detail-bar:hover {
			background-color:#385873;
			color: #FFF;
		}
		.control-main-page .table-detail-bar .drag-btn {
			font-family: "foundation icons";
			font-size: 15px;
			color: rgba(255,255,255,0.5);
			cursor: pointer;
		}
		.control-main-page .table-detail-bar .option-btn {
			background-color: #2D3A45;
			color: #FFF;
			padding: 4px 10px;
			border-radius: 3px;
			display: inline-block;
			font-size: 12px;
			opacity: 1;
		}
		.control-main-page .table-detail-bar .option-btn:hover {
			background-color: #17466E;
			color: #FFF;
		}
		.control-main-page .table-detail-bar .option-btn.timer-active {
			background-color: #DC484B;
			color: #FFF;
		}
		.control-main-page .table-detail-bar .option-btn.slided {
			background-color: #008016;
			color: #8CDB9F;
		}
		.control-main-page .table-detail-bar .option-btn.delete:hover {
			background-color: #C94444;
			color: #FFF;
		}
		.control-main-page .table-detail-bar .option-btn.showed {
			background-color: #C36700;
			color: #FFD9A3;
		}
		.control-main-page .table-detail-bar .option-btn.billed {
			background-color: #008016;
			color: #8CDB9F;
		}
		.control-main-page .table-detail-bar.deleted {
			width: 100%;
			height: auto;
			display: block;
			text-align: center;
			padding: 10px 0;
			font-size: 14px;
			background-color:rgba(20,20,20,0.2);
			color: #B4CBE1;			
    		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		}
		.control-main-page .table-detail-bar.show-table-hide {
			background-color:rgba(255,255,255,0.2);
		}
		.control-main-page .infomation-hide {
			position: absolute;
			width: 100%;
			height: auto;
			display: none;
		}
		
		
		
		.control-main-page .image-upload-box {
			width: 100%;
			height: auto;
			display: inherit;
			padding-bottom: 5px;
			margin-bottom: 3px;
			border-bottom: 1px dotted rgba(255,255,255,0.2);
		}
		.control-main-page .image-upload-box.three-column {
			flex-basis: 50%;
			width: 50%;
			height: auto;
			box-sizing: border-box;
			-webkit-box-flex: 0;
			-webkit-flex: 0 0 auto;
			-moz-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			border-bottom: none;
			padding-bottom: 0;
			margin-bottom: 5px;
		}		
		.control-main-page .image-upload-box.user-column {
			flex-basis: 25%;
			width: 25%;
			height: auto;
			box-sizing: border-box;
			-webkit-box-flex: 0;
			-webkit-flex: 0 0 auto;
			-moz-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			border-bottom: none;
			padding-bottom: 0;
			margin-bottom: 5px;
		}	
		.control-main-page .image-upload-box:last-of-type {
			padding-bottom: 0;
			margin-bottom: 0;
			border-bottom: none;
		}
			.control-main-page .image-upload-box .image-upload-btn  {
				width: auto;
				height: auto;
				border-radius: 3px;
				background-color: #333D55;
				margin-right: 5px;
				font-size: 13px;
				padding: 6px 10px;
				color: #687AA4;
				cursor: pointer;
				font-family: sans-serif;
			}
			.control-main-page .image-upload-box .image-upload-btn:hover {
				background-color: #36415A;
				color: #7B8AAF;
			}
			.control-main-page .image-upload-box .image-upload-btn.disable  {
				background-color: #263046;
				color: #3A4661;
				pointer-events: none;
			}
			.control-main-page .image-upload-box input[type="file"] {
				display: none;
			}
			.control-main-page .image-upload-box .img-example {
				width: 40px;
				min-height: 26px;
				height: auto;
				margin-right: 5px;
				margin-bottom: -9px;
				display: inline-block;
				background-image: url("../img/objects/img-upload-background.png");
				background-repeat: no-repeat;
				background-size:  auto 100%;
				background-position: center;
				background-color: #333D55;
				border-radius: 3px;
			}
				.control-main-page .image-upload-box .img-example img {
					width: 100%;
					height: auto;
					border-radius: 3px;
				}
			.control-main-page .image-upload-box .img-example.active {
				background-image: none;
				margin-bottom: 0;
			}
			.control-main-page .image-upload-box .img-example.big {
				width: 110px;
			}
			.control-main-page .image-upload-box .img-example.medium {
				width: 80px;
			}
			.control-main-page  .save-btn {
				font-family: "foundation icons";
				width: auto;
				height: auto;
				border-radius: 3px;
				background-color: #333D55;
				margin:0 5px 0 0;
				font-size: 15px;
				padding:4px 10px;
				color: #687AA4;
				
    			line-height: 23px;
				cursor: pointer;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
			.control-main-page  .save-btn:hover {
				background-color: #3B9F36;
				color: #FFF;
			}
			.control-main-page  .remov-btn {
				font-family: "foundation icons";
				width: auto;
				height: auto;
				border-radius: 3px;
				background-color: #333D55;
				margin:0 5px 0 0;
				font-size: 15px;
				padding: 6px 10px;
				color: #687AA4;
				line-height: 23px;
				cursor: pointer;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
			.control-main-page  .remov-btn:hover {
				background-color: #C14955;
				color: #FFF;
			}
			.control-main-page input[type=number] {
				width: 80px;
   				padding: 6px 0 6px 10px;
			}
			.control-main-page input[type=number]::-webkit-inner-spin-button {
			 	width: 30px;
			  	height: 30px;
			}
		.control-main-page .hint {
			width: auto;
			height: auto;
			display: inline-block;
			background-color: rgba(20,20,20,0.3);
			padding: 1px 10px;
			border-radius: 3px;
			margin-bottom: 5px;
			color: #B8B8B8;
			font-size: 12px;
		}
		.control-main-page .add-new-line {
			width: auto;
			height: auto;
			display: inline-block;
			font-size: 14px;
			text-transform: uppercase;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			border-radius: 3px;
			padding: 3px 10px;
			background-color: #5A6A96;
			color: #1D2436;			
    		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			margin-top: 10px;
		}
		.control-main-page .add-new-line:hover {
			background-color: #7383AC;
			color: #1D2436;
		}
		.control-main-page .box-off {
			opacity: 0.4;
			pointer-events: none;
			filter: grayscale(100%);
		}
	.control-main-page .checkbox-input  {
			width: auto;
			height: auto;
			display: inline-flex;
			align-items: center;
			border-radius: 3px;
			background-color: #333D55;
			margin-right: 5px;
			font-size: 13px;
    		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			padding: 5px 10px 4px 6px;
			color: #687AA4;
			cursor: pointer;
		}
		.control-main-page .checkbox-input:hover {
			background-color: #36415A;
			color: #7B8AAF;
		}
	.control-main-page .checkbox-input input  {
		display: none;
	}
	.control-main-page .checkbox-input .indicator {
		width: 20px;
		height: 20px;
		display: inline-block;
		border-radius: 3px;
		border: 2px solid #5A6A96;
		margin-right: 5px;
		font-family: "foundation icons";
		text-align: center;
		transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		color: rgba(104,122,164,0);
		font-size: 11px;
	}
	.control-main-page .checkbox-input:hover .indicator {
		background-color: rgba(20,20,20,.2);	
		color: rgba(104,122,164,0.5);
	}
	.control-main-page .checkbox-input input:checked + .indicator {
		color: rgba(104,122,164,1);
	}
	.control-main-page .or-colum {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
	}
		.control-main-page .or-colum .side {
			width: 40%;
		}
		.control-main-page .or-colum .min-text {
			width: 20%;
		}
	.control-page a[disable] {
		background-color: #7D848F !important;
		color: #5C6574 !important;
		opacity: 0.2;
		cursor: default;
		pointer-events: none;
	}
	.login-form input.error {
		border-bottom: 2px solid #FF7E80;
	}
	.login-form input.error::-webkit-input-placeholder { /* Edge */
	  color: #FF7E80;
	}
	.login-form input.error:-ms-input-placeholder { /* Internet Explorer 10-11 */
	  color: #FF7E80;
	}
	.login-form input.error::placeholder {
	  color: #FF7E80;
	}
	.control-main-page input:read-only {		
		pointer-events: none;
		
    	background-color: rgba(0,0,0,0.1);
	}
	.control-main-page textarea:read-only {		
		pointer-events: none;
		
    	background-color: rgba(0,0,0,0.1);
	}
	
	.control-table-pagination {
		width: 100%;
		height: auto;
		display: block;
		text-align: center;
		margin-top: 20px;
	}
		.control-table-pagination a {
			float: none;
			display: inline-block;
			height: auto;
			width: auto;
			font-size: 14px;
			margin: 0 5px;
			color: #ACAFBB;
			border-radius: 3px;
			padding: 3px 10px;
    		font-family: sans-serif;
		}
		.control-table-pagination a:hover {
			background-color: rgba(20,20,20,0.2);
			color: #FFFFFF;
		}
		.control-table-pagination a.active {
			background-color: #5E79BD;
			color: #FFFFFF;
			pointer-events: none;
			cursor: default;
		}
	.control-main-page .filter-box .status-btn {
		width: auto;
		height: auto;
		display: inline-block;
		font-size: 0.6rem;
		text-transform: uppercase;
		transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		border-radius: 3px;
		padding: 3px 10px;
		background-color: #333D55;
		color: #1D2436;
		font-family: sans-serif;
	}
	.control-main-page .filter-box .status-btn:hover {
		background-color: #404D6B;	
	}
	.control-main-page .filter-box .status-btn.active {
		background-color: #5A6A96;
    	color: #1D2436;
	}
	.control-main-page .form-table-bar {
		display: flex;
		align-items: center;
		width: 100%;
		height: auto;
	}
		.control-main-page .form-table-bar .header {
			padding: 1px 0;
			text-align: center;
			width: 14%;
			height: auto;
			color: #FFF;
			background-color:#282835;
			border-left: 1px solid #5D5D7B;
			border-top: 1px solid #5D5D7B;
		}
		.control-main-page .form-table-bar .header:last-of-type {
			border-right: 1px solid #5D5D7B;
		}
		.control-main-page .form-table-bar .header.focus {			
			background-color:#383853;
		}
		.control-main-page .form-table-bar .text-input {
			width: 14%;
			margin: 0;
			border-radius: 0;
			border-left: 1px solid #5D5D7B;
			border-top: 1px solid #5D5D7B;
			border-bottom: 1px solid #5D5D7B;
		}
		.control-main-page .form-table-bar .text-input:last-of-type {
			border-right: 1px solid #5D5D7B;
		}
.control-main-page .calendar-box {
	width: 100%;
	height: auto;
	display: block;
}
	.control-main-page .calendar-box .calendar-header {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
	}
		.control-main-page .calendar-box .calendar-header .calender-title {
			    width: 60%;
				height: auto;
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				font-size: 2rem;
				color: #9CA5BD;
				text-align: center;
				line-height: 1.1rem;
				padding-top: 40px;
    			padding-top: 15px;
		}
		.control-main-page .calendar-box .calendar-header .summit-btn {
			width: 20%;
			text-align: center;
		}
	.control-main-page .calendar-box .calendar-wrapper {
		width: 100%;
		height: auto;
		display: block;
		overflow: hidden;
		margin-top: 20px;
	}
		.control-main-page .calendar-box .calendar-wrapper .day-name {
			width: 100%;
			height: auto;
			display: flex;
			align-items: center;
		}
			.control-main-page .calendar-box .calendar-wrapper .day-name .day-list {
				width: 14.28%;
				height: auto;
				display: block;
				text-align: center;
				padding: 10px 0 6px 0;
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				font-size: 1.1rem;
				color: #FFF;
				border-left: solid 1px #333D55;				
				border-top: solid 1px #333D55;		
				background-color: #333D55;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-name .day-list:first-of-type {			
				background-color:  #2D374F;				
				border-radius: 5px 0 0 0;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-name .day-list:last-of-type {			
				background-color:  #2D374F;		
				border-radius:  0 5px 0 0 ;
				border-right: solid 1px #333D55;			
			}
				.control-main-page .calendar-box .calendar-wrapper .day-name .day-list span {
					font-size: 0.7rem;
					color: #FFF;
				}
		.control-main-page .calendar-box .calendar-wrapper .day-body {
			width: 100%;
			height: auto;
			display: -webkit-inline-box;
			align-items: center;
		}
			.control-main-page .calendar-box .calendar-wrapper .day-body .day-grid {
				width: 14.28%;
				height: auto;
				display: flex;
				padding: 10px 0 6px 0;
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				font-size: 1.1rem;
				color: #FFF;
				border-left: solid 1px #333D55;			
				border-bottom: solid 1px #333D55;		
				background-color: #44647F;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .day-grid:first-of-type {			
				background-color:  #3E5E7A;		
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .day-grid:last-child {
				background-color:  #3E5E7A;		
				border-right: solid 1px #333D55;			
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .day-grid.not-current {
				color: #3F596F;
				background-color: #31475A;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .grid-cont {
				width: 100%;
				height: auto;
				text-align: center;
				padding: 0 5px;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .option-bar {
				width: 100%;
				height: auto;
				display: flex;
				position: relative;
				padding: 0 33px;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .option-bar input {
				width: 100%;
				margin: 0;
				opacity: 0;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .calen-btn {
				font-family: "foundation icons";
				width: auto;
				height: auto;
				border-radius: 3px;
				background-color: #333D55;
				margin: 0;
				font-size: 0.6rem;
				padding: 4px 10px;
				color: #687AA4;
				position: absolute;
				cursor: pointer;
				left: 0;
				transition: all 0.2s ease-in-out;
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-o-transition: all 0.2s ease-in-out;
			}
			 .control-main-page .calendar-box .calendar-wrapper .day-body .add-even:hover {
				background-color: #E09925;
				color: #FFF;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .calen-btn.confirm-even {
				left: inherit;
				right: 0;
				display: none;
			}
			.control-main-page .calendar-box .calendar-wrapper .day-body .calen-btn.confirm-even:hover {
				background-color: #369A45;
				color: #FFF;
			}
			 .control-main-page .calendar-box .calendar-wrapper .day-body .delete-even {
				display: none;
			}
			 .control-main-page .calendar-box .calendar-wrapper .day-body .delete-even:hover {
				background-color: #C14955;
    			color: #FFF;
			}
	.control-main-page .calendar-box .calendar-wrapper .day-grid.active .add-even {
		display: none;
	}
	.control-main-page .calendar-box .calendar-wrapper .day-grid.active .delete-even {		
    	display: inline-block;
	}
	.control-main-page .calendar-box .calendar-wrapper .day-grid.active .option-bar input {		
    	opacity: 1;
	}	
	.control-main-page .filter-ebook {
		width: 100%;
		height: auto;
		padding: 5px 10px;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		display: -webkit-box;
		display: -webkit-flex;
		display: -moz-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-flex: 0;
		-moz-box-flex: 0;
		-webkit-box-direction: normal;
		-moz-box-direction: normal;
		-webkit-flex: 0 1 auto;
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		-moz-box-orient: horizontal;
		-ms-flex-direction: row;
		flex-direction: row;
		-webkit-flex-wrap: wrap;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
    	background-color: rgba(20,20,20,0.3);
	}
	 .filter-ebook .ebook-column {
	 	flex-basis:46%;
		width: 46%;
		height: auto;
		padding: 5px 10px;
		box-sizing: border-box;
		-webkit-box-flex: 0;
		-webkit-flex: 0 0 auto;
		-moz-box-flex: 0;
		-ms-flex: 0 0 auto;
		flex: 0 0 auto;
		margin:  10px 2%;
	}
	.filter-ebook .ebook-column .ebook-line {
		height: auto;
		width: 100%;
		display: flex;
		align-items: center;
		position: relative;
		border-radius: 3px;
		overflow: hidden;
		background-color: rgba(20,20,20,0.2);
		padding: 10px;
	}
		.ebook-line .ebook-btn{
			height: auto;
			width: 10%;
			padding: 5px 0;			
		}
			.ebook-line .ebook-btn .drag-btn {
				font-family: "foundation icons";
				cursor: pointer;
			}
			.ebook-line .ebook-btn .drag-btn:hover {
				color: #9CA5BD;
			}
		.ebook-line .ebook-list {
			width: 15%;
			height: auto;
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			font-size: 12px;
			color: #9CA5BD;
		}
		.ebook-line .ebook-option {
			width: 65%;
			height: auto;
			padding: 0 0 0 10px;
		}
		.ebook-line .ebook-delete {
			width: 10%;
			height: auto;
			padding: 5px 0;
			text-align: right;
		}
		.ebook-sortable-placeholder{
			border: 1px solid #6D7DA7;
			position: relative;
			flex-basis:50%;
			width: 50%;
			height: auto;
			padding: 5px 10px;
			box-sizing: border-box;
			-webkit-box-flex: 0;
			-webkit-flex: 0 0 auto;
			-moz-box-flex: 0;
			-ms-flex: 0 0 auto;
			flex: 0 0 auto;
			margin:  5px 0;
			border-radius: 3px;
		}

/*-----------------------------------------------------------------------------------------------------------------------*/
input.switch-live {
		display: none;
	}
	input.switch-live + label {
		font-size: 1em;
		line-height: 1;
		width: 80px;
		height: 32px;
		background-color: #999;
		background-image: none;
		border-radius: 32px;
		padding: 0.1666666667rem;
		cursor: pointer;
		display: inline-block;
		text-align: center;
		position: relative;
		font-family: inherit;
		transition: all 0.1s ease-in-out;
	}
	input.switch-live:checked + label {
		-webkit-animation:  menu-live 0.3s infinite ease-in-out;
	}
	input.switch-live + label:before {
		text-transform: uppercase;
		color: #FFF;
		content: attr(data-off-label);
		display: block;
		font-family: inherit;
		font-weight: bold;
		font-size: 0.7rem;
		line-height: 1.74rem;
		position: absolute;
		right: 0.2166666667rem;
		margin: 0.2166666667rem;
		top: 0;
		text-align: center;
		min-width: 1.6666666667rem;
		overflow: hidden;
		transition: all 0.1s ease-in-out;
	}
	input.switch-live:checked + label:before {
		color: #FFF;
		content: attr(data-on-label);
		right: auto;
		left: 0.2166666667rem;
	}
	input.switch-live + label:after {
		content: '';
		position: absolute;
		left: 3px;
		background-color: #f7f7f7;
		box-shadow: none;
		border-radius: 50%;
		height: 26px;
		width: 26px;
		transition: all 0.1s ease-in-out;
	}
	input.switch-live:checked + label:after {
		left:50px;
		background-color: #f7f7f7;
	}
	input.switch-close {
		display: none;
	}
	input.switch-close + label {
		font-size: 12px;
		line-height: 1;
		width: 80px;
		height: 32px;
		background-color: rgba(20,20,20,0.3);
		background-image: none;
		border-radius: 32px;
		padding: 3px;
		cursor: pointer;
		display: inline-block;
		margin:  0 auto;
		text-align: center;
		position: relative;
		font-family: inherit;
		transition: all 0.1s ease-in-out;
	}
	input.switch-close:checked + label {
		background-color: #008016;
	}
	input.switch-close + label:before {
		text-transform: uppercase;
		color: #646C7B;
		content: attr(data-off-label);
		display: block;
		font-family: inherit;
		font-weight: bold;
		font-size: 0.7rem;
		line-height: 1.74rem;
		position: absolute;
		right: 0.2166666667rem;
		margin: 0.2166666667rem;
		top: 0;
		text-align: center;
		min-width: 1.6666666667rem;
		overflow: hidden;
		transition: all 0.1s ease-in-out;
	}
	input.switch-close:checked + label:before {
		color: #8CDB9F;
		content: attr(data-on-label);
		right: auto;
		left: 0.2166666667rem;
	}
	input.switch-close + label:after {
		content: '';
		position: absolute;
		left: 4px;
		background-color: #f7f7f7;
		box-shadow: none;
		border-radius: 50%;
		height: 26px;
		width: 26px;
		transition: all 0.1s ease-in-out;
	}
	input.switch-close:checked + label:after {
		left:51px;
		background-color: #f7f7f7;
	}
	label[block] {
		background-color: #494E5A !important;
		color: #5E6574 !important;
		pointer-events: none !important;
	}
	label[block]:before {
    	color: #5E6574 !important;
	}
	label[block]:after {
		background-color: #5E6574 !important;
	}
	/*-ALERT-BOX------------------------------------------------------------------------------------------------------*/
.backdrop {
	width: 100%;
    height: 100%;
    position: fixed;
	align-items: center;
	display: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
	background: rgba(20,20,20,0.85);	
    z-index: 101;
}
.backdrop .gallery-set {
	width: 100%;
    height: auto;
	text-align: center;
	display: block;
}
.backdrop .gallery-show-box {
	width: auto;
    height: auto;
    display: none;
    position: relative;
    margin: 0 auto;
    pointer-events: none;
    z-index: 102;
}
.backdrop p {
	font-family: supermarket;
    font-size: 1rem;
    color: #FFF;
    text-align: center;
}
	.backdrop .gallery-show-box img {
		display: block;
		width: auto;
		height: auto;
		max-height: 75vh;
		border: 10px solid #FFF;
   		 z-index: 102;
		 position: relative;
	}
.backdrop .alert-text-box {
	width: auto;
    height: auto;
    display: none;
    position: relative;
    margin: 0 auto;
	background-color: #445161;
	border-radius: 5px;
    pointer-events: none;
    z-index: 102;
}
	.backdrop .alert-text-box .title {
		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		font-size: 17px;
		color: #FFF;
		text-align: center;
		padding: 25px 0;
	}
	.backdrop .alert-text-box .detail {
		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		font-size: 15px;
		color: #848C97;
		text-align: center;
		padding: 0 45px 25px 45px;
	}
	.backdrop .alert-text-box .phone {
		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
		color: #FFF;		
		font-size: 15px;
		padding: 10px 25px;
		border-radius: 0 0 5px 5px;
		text-align: center;
		position: relative;
		z-index: 103;
		display:block;
		width: 100%;
		background-color: #37414D;		
		cursor: pointer;
		transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-webkit-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
	}
		.backdrop .alert-text-box .phone span {
			font-size: 14px;
			width: 100%;
			height: auto;
			font-weight: normal;
			text-align: center;
			display: block;
		}
			.backdrop .alert-text-box .phone:hover {
				background-color: #30394E;		
			}
		.backdrop .alert-text-box .error {
			font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
			color: #FFF;		
			font-size: 14px;
			padding: 10px 25px;
			border-radius: 0 0 5px 5px;
			text-align: center;
			position: relative;
			z-index: 103;
			display:block;
			width: 100%;
			background-color: #9A4949;	
			cursor: pointer;
			transition: all 0.2s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-webkit-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
		}
			.backdrop .alert-text-box .error p {
				font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
				margin: 0;
				font-size:14px;
			}
/*SOFTABLE-------------------------------------------------------------*/
	.softable-box {
	  counter-reset: slides;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: auto;
	  overflow: hidden;
	}
	.soft-list{
	  position: relative;
	  z-index: 5;
	}

	.sortable-placeholder {
	  width:100%;
	  position: relative;
	  display: block;
	  background-color:  rgba(255,255,255,0.05);
	  z-index: 6;
	}

	.softable-location{
	display: block;
	  overflow: hidden;
	}
	.softable-location .table-detail-bar {
		position: absolute;
		display: flex;
	  	z-index: 1;
	}

/*------------------------------------------------------------------*/	
	.ck-content {
		height: 500px;
		background: #FFF;
		border-radius: 0 0 3px 3px !important;
		border-left: #C4C4C4 1px solid !important;
		border-right: #C4C4C4 1px solid !important;
		border-bottom: #C4C4C4 1px solid !important;
		border-top: none !important;
		font-size: 17px;
		color: #333;
		line-height: 40px;
		font-family: thsarabun,"Helvetica Neue", Helvetica, Roboto ,Arial, sans-serif;
	}
	.ui-loader {
	display: none;
	}

	.ck-content blockquote {

		background-image: url("../img/objects/blockquote-icon.png");
		background-repeat: no-repeat;
		background-size: 40px auto;
		background-position: top left;
		font-weight: bold;
		
		overflow: inherit !important;
		padding-right: 0 !important;
		padding-left: 60px !important;
		padding-top: 0;
		padding-bottom: 30px;
		margin-left: 0 !important;
		margin-top: 30px;
		font-style: normal !important;
		border-left: none !important;
	}
	.ck-content h2 {
		font-size: 20px;
	}
	.ck-content figcaption {
		font-size: 14px;
		color: #666;
		text-align: center;
		padding: 10px;
	}
	.ck-content a {
		color: #000;
		margin: 0 10px;
		text-decoration: underline;
		display: inline-block;
	}
	.ck-content a:hover {
		color: #F47932;
	}
		/*SURVEY------------------------------------------------------------------------*/
	.survey-box {
		width: 100%;
		height: auto;
		display: flex;
		background-color: #424242;
	}
	.survey-box .survey-set {
		width: 100%;
		max-width: 1440px;
		margin: 0 auto;
		padding: 30px 20px;
		display: block;
	}
	.survey-box .title {
		font-size: 23px;
		color: #FFF;
		margin: 20px 0 0 0;
		text-align: center;
		position: relative;
		width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		margin-bottom: 50px;
	}
		.survey-box .title span {
			width: 80px;
			height: 3px;
			display: inline-block;
			background-color: #F47932;
			position: absolute;
			bottom: -20px;
		}
	.survey-box .survey-list {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #666;
		padding: 50px 0;
	}
		.survey-box .survey-list .number {
			width: auto;
			height: auto;
			display:inline-flex;
			justify-content: flex-end;
			left: 0;
			position: absolute;
		}
			.survey-box .survey-list .number span {
				width: 30px;
				height: 30px;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #F47932;
				border-radius: 50%;
				font-size: 1rem;
				color: #FFF;
			}
		.survey-box .survey-list .text {
			width: 65%;
			height: auto;
			display: block;
			font-size: 0.9rem;
			color: #FFF;
			position: relative;
			padding-left: 50px;
			padding-right: 30px;
		}
		.survey-box .survey-list .option {
			width: 35%;
			height: auto;
			display: inline-flex;
			justify-content: flex-end;
		}
		.survey-box .survey-list .option-list {
			width: 50%;
			height: auto;
			display: flex;
			position: relative;
			align-items: center;
		}
		.survey-box .survey-list .option-list input[type=radio] {
			position: absolute;
			visibility: hidden;
		}
		.survey-box .survey-list .option-list label {
			display: block;
			position: relative;
			font-weight: 300;
			font-size: 1rem;
			padding: 0 0 0 35px;
			z-index: 7;
			cursor: pointer;
		}
		.survey-box .survey-list .option-list .check {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			border: 5px solid #AAAAAA;
			border-radius: 50%;
			height: 26px;
			width: 26px;
			z-index: 5;
			transition: border .25s linear;
			-webkit-transition: border .25s linear;
		}
		.survey-box .survey-list .option-list input[type=radio]:checked ~ label {
			color: #F47932;
		}
		.survey-box .survey-list .option-list input[type=radio]:checked ~ .check {
			border: 5px solid #F47932;
		}
		.survey-box .survey-list .option-list input[type=radio]:checked ~ .check::before {
			background: #F47932;
		}
			.survey-box .survey-list .option-list .check::before {
			display: block;
				position: absolute;
			content: '';
			border-radius: 50%;
			height: 10px;
			width: 10px;
			transition: border .25s linear;
			-webkit-transition: border .25s linear;
		}
		.survey-box .survey-list .option-text {
			width: 50%;
			height: auto;
			display: block;
			padding-right: 10px;
		}
		.survey-box .survey-list .option-text span {
			font-size: 1rem;
			color: #AAAAAA;
		}
		.survey-box .survey-list .option-text input[type=text] {
			border: 5px solid #AAAAAA;
			font-size: 1rem;
			padding: 5px;
			width: 100%;
			outline: none;
			border-radius: 10px;
		}

	.survey-box .alert {
		width: 100%;
		height: auto;
		display: block;
		text-align: center;
		color: #E1595B;
		padding: 20px 0;
	}
	.survey-box .send {
		width: 100%;
		height: auto;
		display: block;
		text-align: center;
		color: #FF4F51;
		padding: 20px 0;font-size: 1.1rem;
	}
		.survey-box .send a {
			width: auto;
			height: auto;
			display: inline-block;
			text-align: center;
			color: #FFF;font-size: 1.3rem;
			border-radius: 10px;
			background-color: #F47932;
			padding: 8px 20px;
		}
	a[disable], label[disable]{
		background-color: #333C48 !important;
		color: #63748B !important;
		cursor:default;
		pointer-events: none;
	}
	a.good[disable], label[disable]{
		background-color: #199C00 !important;
		color: #FFF !important;
		cursor:default;
		pointer-events: none;
	}
}