@charset "utf-8";
/* CSS Document */

.webboard-portfolio {
	margin     : 0;
	padding    : 0;
	padding-top: 134px !important;
}

.webboard-block {
	margin : 0;
	padding: 0;
}

.webboard-block .wb-top {
	margin       : 0;
	padding      : 0px;
	padding-left : 24px;
	color        : #ffffff;
	margin-bottom: 20px;
	background   : rgb(1, 185, 159);
	background   : linear-gradient(272deg, rgba(1, 185, 159, 1) 0%, rgba(4, 195, 99, 1) 72%, rgb(4 194 100) 100%);
	font         : 19px/42px 'anakotmai-medium', Arial, sans-serif;
}

.webboard-block .wb-top1 {
	margin       : 0;
	padding      : 0px;
	padding-left : 24px;
	color        : #ffffff;
	margin-bottom: 20px;
	background   : rgb(255, 180, 0);
	background   : linear-gradient(90deg, rgba(255, 180, 0, 1) 0%, rgba(255, 126, 0, 1) 100%);
	font         : 19px/42px 'anakotmai-medium', Arial, sans-serif;
}

.webboard-block .wb-tab-row {
	margin       : 0;
	padding      : 0;
	/* background:url(../images/news-120-1/border.jpg) bottom left repeat-x; */
	border-bottom: 1px #7a1cbb solid;
}

.webboard-block .wb-tab-row .wb-tap {
	width     : 212px;
	height    : 53px;
	text-align: center;
	font      : 20px/53px 'anakotmai-medium', Arial, sans-serif;
}

.webboard-block .wb-tab-row .wb-tap .select {
	width          : 100%;
	background     : url(../images/wb-120-1/select.png) top center no-repeat;
	background-size: 100% 100%;
}

.webboard-block .wb-tab-row .wb-tap .select a {
	color: #fff;
}

.webboard-block .wb-tab-row .wb-tap .normal {
	width          : 100%;
	background     : url(../images/wb-120-1/normal.png) top center no-repeat;
	background-size: 100% 100%;
}

.webboard-block .wb-tab-row .wb-tap .normal:hover {
	cursor: pointer;
}

.webboard-block .wb-tab-row .wb-tap .normal a {
	color: #810dae;
}

.webboard-block .wb-tab-row .wb-tap .normal:hover a {
	color: #e1e0de;
}

.webboard-block .wb-mid {
	margin : 0;
	padding: 0;
}

.webboard-block .wb-mid .table {
	margin       : 0;
	padding      : 0;
	/* background: rgb(255 255 255 / 80%); */
}

.webboard-block .wb-mid a {
	color: #292525;
}

.webboard-block .wb-mid a:hover {
	color: #032d54;
}

.webboard-block .wb-mid table thead {
	border-bottom: 3px solid #03bd8b;
	color        : #151515;
}

.webboard-block .wb-mid table thead th {
	text-align : left;
	border-top : none;
	text-shadow: 1px 1px #fff;
	text-shadow: blanchedalmond;
}

.webboard-block .wb-mid table tbody {
	background: rgb(255 255 255 / 80%);
}

.webboard-block .wb-mid .table td {
	border-bottom: 1px solid #fff;
	color        : #3e3c3c;
}

.webboard-block .wb-bottom {
	margin        : 0;
	padding       : 0px;
	padding-top   : 17px;
	padding-bottom: 20px;
	background    : rgb(255 255 255 / 80%);
}


.portfolio-block {
	margin : 0;
	padding: 0;
}

.portfolio-block .portfolio-top {
	margin        : 0;
	padding       : 0;
	color         : #8aff00;
	padding-bottom: 11px;
	margin-bottom : 20px;
	background    : url(../images/wb-120-1/line.png) bottom left no-repeat;
	font          : 28px/42px 'anakotmai-medium', Arial, sans-serif;
}

.portfolio-block .portfolio-mid {
	margin : 0;
	padding: 0;
}

.portfolio-block .portfolio-mid .pic {
	margin  : 0;
	padding : 0;
	position: relative;
}

.portfolio-block .portfolio-mid .alpha {
	position   : absolute;
	width      : 100%;
	bottom     : 0;
	left       : 0;
	height     : 161px;
	padding-top: 30px;
	background : url(../images/wb-120-1/bg-black.png) bottom left repeat-x;
}

.portfolio-block .portfolio-mid .alpha .text {
	padding: 20px;
	font   : 18px/26px 'Kanit', Arial, sans-serif;

}

.portfolio-block .portfolio-mid .alpha .text a {
	color: #fff;
}

.portfolio-block .portfolio-mid .alpha .text a:hover {
	color: #fee570;
}

.portfolio-block .portfolio-mid .alpha .view {
	width                : 92px;
	height               : 29px;
	margin-left          : 0;
	margin-top           : 65px;
	margin-bottom        : 10px;
	margin-right         : 20px;
	padding              : 5px;
	padding-left         : 44px;
	/* padding-top       : 20px; */
	color                : #fff;
	-webkit-border-radius: 50px;
	-moz-border-radius   : 50px;
	border-radius        : 50px;
	background           : #8dbb00 url(../images/eye.png) 11px 8px no-repeat;
	font                 : 16px/22px 'anakotmai-medium', Arial, sans-serif;
}

.portfolio-block .portfolio-mid .pic img {
	max-width: 100%;
	height   : auto;
}

.portfolio-block .portfolio-bottom {
	margin : 0;
	padding: 0;
}

@media (max-width: 374px) {

	.webboard-block .wb-tab-row .wb-tap {
		width    : 159px;
		font-size: 16px;
	}

	.portfolio-block .portfolio-mid .alpha .text {
		font: 15px/20px 'anakotmai-medium', Arial, sans-serif;
	}

}

@media (min-width: 375px) and (max-width: 419px) {

	.webboard-block .wb-tab-row .wb-tap {
		width    : 165px;
		font-size: 16px;
	}

	.portfolio-block .portfolio-top {
		/* color:#333; */
	}

	.portfolio-block .portfolio-mid .alpha {
		padding-top: 8px;
	}

	.portfolio-block .portfolio-mid .alpha .text {
		font: 16px/23px 'anakotmai-medium', Arial, sans-serif;
	}
}

@media (min-width: 420px) and (max-width: 575px) {

	.webboard-block .wb-tab-row .wb-tap {
		width    : 191px;
		font-size: 18px;
	}

	.portfolio-block .portfolio-mid .alpha {
		padding-top: 8px;
	}
}

@media (min-width: 576px) and (max-width: 767px) {
	...
}

@media (min-width: 768px) and (max-width: 991px) {}

@media (min-width: 992px) and (max-width: 1199px) {
	.webboard-portfolio {
		/* min-height: 934px; */
	}

	.portfolio-block .portfolio-mid .alpha {
		display      : -ms-flexbox;
		display      : flex;
		-ms-flex-wrap: wrap;
		flex-wrap    : wrap;
	}

	.portfolio-block .portfolio-mid .alpha .p-0 {
		-ms-flex : 0 0 100%;
		flex     : 0 0 100%;
		max-width: 100%;
	}

	.portfolio-block .portfolio-mid .alpha .d-flex {
		display: -ms-blockbox !important;
		display: block !important;
	}

	.portfolio-block .portfolio-mid .alpha .text {
		padding: 0px 20px;
		font   : 14px/20px 'anakotmai-medium', Arial, sans-serif;
	}

	.portfolio-block .portfolio-mid .alpha .view {
		margin-top: 11px;
	}
}

@media (min-width: 1200px) and (max-width: 1280px) {
	.portfolio-block .portfolio-mid .alpha .text {
		padding: 20px;
		font   : 15px/24px 'anakotmai-medium', Arial, sans-serif;
	}
}

@media (min-width: 1281px) and (max-width: 1366px) {
	.portfolio-block .portfolio-mid .alpha .text {
		padding: 20px;
		font   : 15px/24px 'anakotmai-medium', Arial, sans-serif;
	}
}

@media (min-width: 1367px) and (max-width: 1440px) {
	.portfolio-block .portfolio-mid .alpha .text {
		padding: 20px;
		font   : 15px/24px 'anakotmai-medium', Arial, sans-serif;
	}
}

@media (min-width: 1441px) and (max-width: 1600px) {
	.portfolio-block .portfolio-mid .alpha .text {
		padding: 20px;
		font   : 18px/26px 'anakotmai-medium', Arial, sans-serif;
	}
}