@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;
}
.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;
}
 }