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

.vision{
	width:100%;
	height: auto;
	background:url(../images/content/history/bg.jpg) top center no-repeat;
	}
.vi-bolck{
	width:100%;
	/* margin-top: 40px; */
	padding:40px;
	background:url(../../images/content/vision/bg.png) bottom center no-repeat;
	background-size:100%;
	}
.vi-top{
	width:100%;
	height:
	auto;
	font: 30px/30px 'kanit', Arial, sans-serif;
	color: #ff7100;
	font-weight:
	bold;
	}
.vi-text{
	height:
	auto;
	font: 18px/26px 'kanit', Arial, sans-serif;
	text-align:
	left;
	color: #ffffff;
	margin: 40px;
	margin-top: 60px;
	padding: 15px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #ff7100d1;
	}
	.vi-text span{
		display:block;
	}
.vi-pic{
	width:100%;
	height:
	auto;
	margin-top: 0;
	text-align:
	center;
	margin-bottom:20px;
	}
.vi-pic img{
	max-width:100%;
	height:auto;
	border:10px solid #fff;
	
	-webkit-box-shadow: 8px 7px 6px 0px rgba(0,0,0,0.08);
-moz-box-shadow: 8px 7px 6px 0px rgba(0,0,0,0.08);
box-shadow: 8px 7px 6px 0px rgba(0,0,0,0.08);
	}
.mission-block{
	height:
	auto;
	background: #6621ca;
	/* margin-top: 70px; */
	position:
	absolute;
	/* left: -30px; */
	/* top: 60px; */
	padding-bottom:50px;
	padding: 40px;
	}
	.mission-block-2{
	height:
	auto;
	background: #ff9d00;
	/* margin-top: 70px; */
	position:
	absolute;
	/* left: -30px; */
	/* top: 60px; */
	padding-bottom:50px;
	padding: 40px;
	}
.mi-top{
	width:100%;
	height:auto;
	font: 30px/30px 'kanit', Arial, sans-serif;
	color:#fff;
	font-weight:bold;
	}
.mi-text{
	width:100%;
	height:auto;
	font: 18px/30px 'kanit', Arial, sans-serif;
	text-align:left;
	color:#fff;
	padding-top:20px;
	}
@media (max-width: 374px) {

.vi-bolck {
    height: auto;
	padding: 0px;
	margin-top: 15px;
}
.mission-block {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}
.mission-block-2 {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}

.mi-text {
    font: 16px/30px 'kanit', Arial, sans-serif;
}
.vision {
    height: auto;
}

.vi-text {
	margin:0;
	margin-top:20px;
    font: 21px/30px 'kanit', Arial, sans-serif;
}
	}
@media (min-width: 375px) and (max-width: 413px) {

.vi-bolck {
    height: 451px;
    padding: 0px;
    margin-top: 15px;
}
.mission-block {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}
.mission-block-2 {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}

.mi-text {
    font: 16px/30px 'kanit', Arial, sans-serif;
}
.vision {
    height: auto;
}

.vi-text {
	margin:0;
	margin-top:20px;
    font: 21px/30px 'kanit', Arial, sans-serif;
}
	}
@media (min-width: 414px) and (max-width: 767px) {
.vision .container-cv-5{
	 padding-right: 0px; 
     padding-left: 0px;	
}
.vi-bolck {
    height: 480px;
    padding: 0px;
    margin-top: 15px;
}
.mission-block {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}
.mission-block-2 {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}
.mi-text {
    font: 16px/30px 'kanit', Arial, sans-serif;
}
.vision {
    height: auto;
}

.vi-text {
	margin:0;
	margin-top:20px;
    font: 21px/30px 'kanit', Arial, sans-serif;
}
.vi-text span{
	display: inline;
}
	}
@media (min-width: 768px) and (max-width: 991px) { 

.vi-bolck {
    height: auto;
	padding: 20px;
	margin-top: 15px;
}
.mission-block {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}
.mission-block-2 {
    margin-top: 0;
    position: relative;
    left: 0;
    top: 0;
	padding: 20px;
}
.mi-text {
    font: 16px/30px 'kanit', Arial, sans-serif;
}
.vision {
    height: auto;
}

.vision .container-cv-5{
	width:100%;
	}
	.vi-text{
		margin:0px;
		margin-top:40px;	
	}
	}
@media (min-width: 992px) and (max-width: 1199px) { 
.vision .container-cv-5{
	width:100%;
	}
	.vi-text {
    font: 20px/30px 'kanit', Arial, sans-serif;
}
.vi-bolck{
	height: 669px;	
}
}
@media (min-width: 1281px) and (max-width: 1366px) { 
.vision .container-cv-5{
	width:100%;
	}
	.vi-bolck {
	    height: 756px;
	}
}
@media (min-width: 1367px) and (max-width: 1440px) { 
.vi-bolck{
	    height: 755px;	
}
 }
@media (min-width: 1441px) and (max-width: 1600px) { ... }