@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');
@import url('https://fonts.googleapis.com/css?family=Cabin');
body{ margin:0px; padding:0px;  }
#header{ width:100%;  background-image:url('../images/back1.jpg'); background-repeat:no-repeat; height:170px; }
#headerDiv{ width:80%; margin:auto; }
#banner{ width:100%; margin:auto; }
#logo{ float:left; width:50%;   }
#logo img{ width:105%;}
#menu{ width:100%; background-color:#8646ED; }
#menuDiv{ width:80%; margin:auto;}
#body{ width:100%; padding-top:20px; padding-bottom:20px;}
#bodyDiv{ width:80%; margin:auto; height:auto; }
#bodyDiv h1{ color:#00FFFF; font-family: 'Cabin', sans-serif; font-weight:normal; line-height:45px;}
#leftBody{ float:left; width:63%;   }
#rightBody{ float:right; width:35%; }
#noticeDiv{  width:100%; border-top:solid 4px #003366; background-color:#E1E1E1; height:440px;}
#rightBody p{color:#000000; font-family:Calibri; line-height:27px;  padding:10px;}
#noticeDiv h2{   font-family: 'Cabin', sans-serif; font-size:36px; font-weight:normal; color:#0066FF; margin-top:0px; padding:10px;}
#noticeDiv span{ color:#990000;}
.rightDiv{ margin-top:100px;} 
#leftInner{ width:47%; margin-right:3%; float:left;     }
#rightInner{ width:50%; float:right; background-color:#CC3300; background-image:url(../images/img1.jpg); background-repeat:no-repeat; height:445px;  }
#rightInner h1{ font-family: 'Cabin', sans-serif; font-size:30px; color:#FFFFFF;   background:rgba(0, 0, 0, 0.5);  padding:10px; margin-top:0px; }
#rightInner span{ }
.rightImage{ margin-top:15px;}
.rightImage img{ border:solid 2px #996666; width:372px; border-radius:5px;}
.principal{
	width: 93%;
	border: solid 3px #CCCCCC;
	background-color: #E6E6E6;
	height: auto;
	padding: 10px;
	margin-bottom: 15px;
	text-align: justify;
}
.principal img{ float:left; margin-right:3%;}
.principal p{  font-family: 'Cabin', sans-serif;  line-height:23px; font-size:12px; margin-top:0px; }
.principal h3{ color:#C40000; font-family: 'Cabin', sans-serif; font-size:18px; margin-top:0px;}
#footer{ width:100%; background-color:#602AB5; height:auto;}
#footerDiv{ width:80%; margin:auto;}
.innerFooter{ width:30%; float:left; margin-right:3%;}
.innerFooter:nth-child(3){ margin-right:0px;}
.innerFooter h1{ color:#FFFFFF; font-family: 'Cabin', sans-serif; border-bottom:solid 1px #F0F0F0; font-weight:normal; font-size:30px; padding:6px;}
.innerFooter  p{ color:#FFFFFF; font-family:Calibri;}
.innerFooter  a{ color:#FF6600;}
#companyProfile{ width:100%; background-color:#4A004A; height:250px; padding-top:20px;  }
#contents{ width:80%; margin:auto;}
#contents a{ text-decoration:none;}
#contents h1{ font-family: 'Cabin', sans-serif; color:#FFFFFF; font-weight:normal;}
#contents p{ color:#FFFFFF; font-family:Calibri; line-height:27px;}
#leftContents{ background-color:#004080; border-radius:5px; border:solid 1px #999999; font-family:Calibri; line-height:25px; padding:10px; color:#FFFFFF; padding-bottom:80px;}
#leftContents h1{ color:#00FFFF; font-family: 'Cabin', sans-serif; font-weight:normal; line-height:40px;  margin-top:0px; }
#leftContents h2{ color:#F7922A; font-family: 'Cabin', sans-serif; font-weight:normal; font-size:20px; }
#leftContents h4{ color:#FF9900; font-family:Calibri;}
#leftContents span{ color:#FF9900;}
#leftContents a{ text-decoration:none; color:#00CCFF;}
#leftContents a:hover{ color:#FF9900;}
.innerGallery{ float:left; width:32%; margin-right:1%; margin-bottom:10px;}
.innerGallery img{ height:240px;}
#galleryDiv{ width:100%; height:auto;  background-color:#004080; padding:10px; border-radius:5px;}
.btn{   background-color:#FF6600; color:#FFFFFF; font-family:"Lao UI"; border:none; padding:4px; width:80px;}
.btn:hover{  cursor:pointer; background-color:#CCCCCC; color:#000000;}
.textBox{ width:280px; padding:7px;}
.messageBox{ width:290px;}
#call{ float:right;   background-image:url('../images/mobile.png'); background-repeat:no-repeat; padding-left:20px;  background-position:left; font-weight:bold; color:#FFFFFF; font-family: 'Cabin', sans-serif; margin-top:40px; }
#call a{text-decoration:none; color:white;}
#bottomFooter{ width:100%; height:40px; background-color:#4A004A;}
#bottomFooterDiv{ width:80%; margin:auto; color:#FFFFFF; font-family: 'Cabin', sans-serif; padding-top:15px;}
#leftFoot{ float:left; }
#rightFoot{ float:right;}
#social{ float:right; font-family: 'Montserrat', sans-serif; font-size:12px; color:#666666; }
#social img{ float:left;}
.fb{ background: url(../images/fb1.png) 0  -15px no-repeat;
    width: 45px;
    height: 17px;
    z-index: 99;
    font-size: 0;
    padding: 0;
    margin: 0; }
.fb:hover{ background: url(../images/fb1.png) 0 0 no-repeat; cursor:pointer;   }
.twitter{ background: url(../images/twitter.png) 0  -17px no-repeat;
    width: 41px;
    height: 20px;
    z-index: 99;
    font-size: 0;
    padding: 0;
    margin: 0; border:0px;}
.twitter:hover{ background: url(../images/twitter.png) 0 0 no-repeat; cursor:pointer;}	
.gplus{ background: url(../images/gplus.png) 0  -17px no-repeat;
    width: 41px;
    height: 17px;
    z-index: 99;
    font-size: 0;
    padding: 0;
    margin: 0; }
	.gplus:hover{ background: url(../images/gplus.png) 0 0 no-repeat; cursor:pointer;}	

.border{}

.clear{ clear:both;}

@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {

body{ margin:0px; padding:0px;  }
#header{ width:auto;  background-image:url('../images/back1.jpg');  background-repeat:no-repeat; background-position:bottom; height:180px; }
#headerDiv{ width:auto; margin:auto; }
#banner{ width:auto; margin:auto; }
#logo{ float:none; width:auto; padding:5px; margin-top:0px; padding-top:0px;   }
#logo img{ width:100%;}
#menu{ width:auto; background-color:#8646ED; }
#menuDiv{ width:auto; margin:auto;}
#body{ width:auto; padding-top:20px; padding-bottom:20px; padding:5px;}
#bodyDiv{ width:auto; margin:auto; height:auto; }
#bodyDiv h1{ color:#00FFFF; font-family: 'Cabin', sans-serif; font-weight:normal; line-height:45px;}
#leftBody{ float:none; width:auto;   }
#rightBody{ float:none; width:auto; }
#noticeDiv{  width:auto; border-top:solid 4px #003366; background-color:#E1E1E1; height:340px; margin-top:15px; margin-bottom:10px;}
#rightBody p{color:#000000; font-family:Calibri; line-height:27px;  padding:10px;}
#noticeDiv h2{   font-family: 'Cabin', sans-serif; font-size:36px; font-weight:normal; color:#0066FF; margin-top:0px; padding:10px;}
#noticeDiv span{ color:#990000;}
.rightDiv{ margin-top:10px; } 
#leftInner{ width:auto; margin-right:0%; float:none;     }
#rightInner{ width:auto; float:none; background-color:#CC3300; background-image:url(../images/img1.jpg); background-repeat:no-repeat; height:445px;  }
#rightInner h1{ font-family: 'Cabin', sans-serif; font-size:30px; color:#FFFFFF;   background:rgba(0, 0, 0, 0.5);  padding:10px; margin-top:0px; }
#rightInner span{ }
.rightImage{ margin-bottom:15px;}
.rightImage img{ border:solid 2px #996666; width:100%; border-radius:5px;}
.principal{ width:auto;  border:solid 3px #CCCCCC; background-color:#E6E6E6; height:auto; padding:10px; margin-bottom:15px;}
.principal img{ float:left; margin-right:3%;}
.principal p{  font-family: 'Cabin', sans-serif;  line-height:23px; font-size:12px; margin-top:0px; }
.principal h3{ color:#C40000; font-family: 'Cabin', sans-serif; font-size:18px; margin-top:0px;}
#footer{ width:auto; background-color:#602AB5; height:auto; padding-top:10px; padding:5px;}
#footerDiv{ width:auto; margin:auto;}
.innerFooter{ width:auto; float:none; margin-right:0%;}
.innerFooter:nth-child(3){ margin-right:0px;}
.innerFooter h1{ color:#FFFFFF; font-family: 'Cabin', sans-serif; border-bottom:solid 1px #F0F0F0; font-weight:normal; font-size:30px; padding:6px;}
.innerFooter  p{ color:#FFFFFF; font-family:Calibri;}
.innerFooter  a{ color:#FF6600;}
#companyProfile{ width:auto; background-color:#4A004A; height:auto; padding-top:20px; padding:10px;  }
#contents{ width:auto; margin:auto;}
#contents a{ text-decoration:none;}
#contents h1{ font-family: 'Cabin', sans-serif; color:#FFFFFF; font-weight:normal; text-align:left;}
#contents p{ color:#FFFFFF; font-family:Calibri; line-height:27px; text-align:justify;}
#leftContents{ background-color:#004080; border-radius:5px; border:solid 1px #999999; font-family:Calibri; line-height:25px; padding:10px; color:#FFFFFF; padding-bottom:80px; width:auto; }
#leftContents p{ text-align:justify;}
#leftContents h1{ color:#00FFFF; font-family: 'Cabin', sans-serif; font-weight:normal; line-height:35px; font-size:27px;  margin-top:0px; }
#leftContents h2{ color:#F7922A; font-family: 'Cabin', sans-serif; font-weight:normal; font-size:20px; }
#leftContents h4{ color:#FF9900; font-family:Calibri;}
#leftContents span{ color:#FF9900;}
#leftContents a{ text-decoration:none; color:#00CCFF;}
#leftContents a:hover{ color:#FF9900;}
.innerGallery{ float:none; width:auto; margin-right:0%; margin-bottom:10px;}
.innerGallery img{ height:180px;}
#galleryDiv{ width:auto; height:auto;  background-color:#004080; padding:10px; border-radius:5px;}
.btn{   background-color:#FF6600; color:#FFFFFF; font-family:"Lao UI"; border:none; padding:4px; width:80px;}
.btn:hover{  cursor:pointer; background-color:#CCCCCC; color:#000000;}
.textBox{ width:90%; padding:7px;}
.messageBox{ width:95%;}
#call{ float:none; width:40%; margin:auto;   background-image:url('../images/mobile.png'); background-repeat:no-repeat; padding-left:0px; background-position:left; margin-bottom:30px; font-weight:bold; color:#FFFFFF; font-family: 'Cabin', sans-serif; margin-top:-15px; font-size:13px; padding-left:30px; text-align:center; }
#bottomFooter{ width:auto; height:auto; background-color:#4A004A; text-align:center;}
#bottomFooterDiv{ width:auto; margin:auto; color:#FFFFFF; font-family: 'Cabin', sans-serif; padding-top:15px;}
#leftFoot{ float:none; }
#rightFoot{ float:none; margin-left:70px; margin-top:10px;}
#social{ float:right; font-family: 'Montserrat', sans-serif; font-size:12px; color:#666666; }
#social img{ float:left;}
.fb{ background: url(../images/fb1.png) 0  -15px no-repeat;
    width: 45px;
    height: 17px;
    z-index: 99;
    font-size: 0;
    padding: 0;
    margin: 0; }
.fb:hover{ background: url(../images/fb1.png) 0 0 no-repeat; cursor:pointer;   }
.twitter{ background: url(../images/twitter.png) 0  -17px no-repeat;
    width: 41px;
    height: 20px;
    z-index: 99;
    font-size: 0;
    padding: 0;
    margin: 0; border:0px;}
.twitter:hover{ background: url(../images/twitter.png) 0 0 no-repeat; cursor:pointer;}	
.gplus{ background: url(../images/gplus.png) 0  -17px no-repeat;
    width: 41px;
    height: 17px;
    z-index: 99;
    font-size: 0;
    padding: 0;
    margin: 0; }
	.gplus:hover{ background: url(../images/gplus.png) 0 0 no-repeat; cursor:pointer;}	

.border{}

.clear{ clear:both;}