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

.activity{
	margin:0;
	padding:0;
	min-height:707px;
	background:url(../images/activity/bg.png) top center no-repeat;
	position: relative;
	margin-top: 25px;
}
.activity .vdo{
	margin:0;
	padding:0;	
}
.activity .vdo .vdo-top{
	margin:0;
	padding:0;	
	padding-top:93px;
	font: 35px/50px 'Kanit', Arial, sans-serif;
	color:#fff;
}
.activity .vdo .vdo-top span{
	color:#ff0000;
}
.activity .vdo .vdo-mid{
	margin:0;
	padding:0;	
	margin-top:20px;
}
.activity .vdo .vdo-mid .pic{
	margin:0;
	padding:0;
}
.activity .vdo .vdo-mid .pic img{
	max-width:100%;
	height:auto;
}
.activity .vdo .vdo-mid .text{
	padding:20px 26px;
	font: 16px/24px 'Kanit', Arial, sans-serif;
}
.activity .vdo .vdo-mid .text a{
	color:#2b2b2b;
}
.activity .vdo .vdo-mid .text a:hover{
	color:#0da8ec;
}
.activity .vdo .vdo-bottom{
	margin:0;
	padding:0;
	text-align:right;
}

.activity .act-calendar{
	width:450px;	
}
.activity .act-calendar .act-top{
	padding: 20px 20px;
	padding-top: 40px;
	padding-left: 30px;
	height:284px;
	background:url(../images/act-calendar/bg-top.png) top left no-repeat;
}
.activity .act-calendar .act-top .date{
	font: 112px/112px 'Kanit', Arial, sans-serif;
	color: #fff;
}
.activity .act-calendar .act-top .month{
	font: 45px/45px 'Kanit', Arial, sans-serif;
	color: #fff;
}
.activity .act-calendar .act-mid{
	background:#fff;
	padding-bottom: 20px;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
.activity .act-calendar .act-bottom{
	margin:0;
	padding:0;
	margin-top:20px;
	text-align:right;
}
@media (max-width: 374px) {
.activity .act-calendar{
		
width: 308px;
}
}
@media (min-width: 375px) and (max-width: 413px){
.activity .act-calendar{
		
width: 360px;
}
.activity .act-calendar .act-bottom{
		
}
}
@media (min-width: 414px) and (max-width: 575px){
.activity .act-calendar{
		
width: 410px;
}
}
@media (min-width: 576px) and (max-width: 767px){
.activity{
		
}
}
@media (min-width: 768px) and (max-width: 991px){
.activity{
		
}	
}
@media (min-width: 992px) and (max-width: 1199px){
.activity .vdo .vdo-bottom{
		
/* margin-right: -141px; */
		
text-align: center;
}
}