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

.history{
	margin:0;
	padding:0;	
}
.history .para-1{
	position:relative;
	padding:30px 20px;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0da7ec+1,dee7ea+43,ffffff+69 */
	background: linear-gradient(to bottom, #3157f3 40%, #dee7ea 90%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.history .para-1 .line{
	position:absolute;
	top: 430px;
	right: -950px;
}
.history .para-1 .detail{
	margin-top:30px;
	font: 16px/24px 'Kanit', Arial, sans-serif;	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0ea2e7+1,ffffff+97 */
	color: #fff;
}
.history .para-1 .detail1{
	margin-top: 0px;
	font: 16px/24px 'Kanit', Arial, sans-serif;	
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0ea2e7+1,ffffff+97 */
	color: #fff;
}
.history .para-1 .building{
		
}
.history .para-1 img{
	max-width:100%;
	height:auto;
}

.history .para-2{
	margin-top:30px!important;
	font: 16px/24px 'Kanit', Arial, sans-serif;		
}
.history .para-2 .para-block{
	/* margin:15px; */
	min-height: 175px;
	margin-bottom: 30px;
	padding:15px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.history .para-2 .year{
	padding:15px;
	font: 24px/24px 'Kanit', Arial, sans-serif;	
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0da7ec+1,c70a08+100 */
	background: linear-gradient(to right,  #0b28a0 1%,#e567da 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	color:#fff;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.history .para-2 .detail{
	padding:15px;
	font: 16px/24px 'Kanit', Arial, sans-serif;		
}
@media (min-width: 320px) and (max-width: 767px) { 
.history .para-1 .line{
	display:none;	
}
	.history .para-2 .para-block{
		min-height:auto;	
	}
}
@media (min-width: 768px) and (max-width: 990px) { 
.history .para-1 .line{
	display:none;	
}
	.history .para-2 .para-block{
		min-height:auto;	
	}
}
@media (min-width: 991px) and (max-width: 1190px) { 
.history .para-1 .line{
	top: 492px;
    right: -580px;	
}
}
@media (min-width: 1200px) and (max-width: 1280px) { 
.history .para-1 .line {
    top: 381px;
    right: -786px;
}
 }
@media (min-width: 1281px) and (max-width: 1366px) { 
.history .para-1 .line {
    top: 421px;
    right: -913px;
}
 }
@media (min-width: 1367px) and (max-width: 1440px) { 
.history .para-1 .line {
    top: 410px;
    right: -893px;
}
 }
@media (min-width: 1441px) and (max-width: 1600px) {
	.history .para-1 .line {
    top: 430px;
    right: -933px;
}
}