/* CSS Document */
body { background:#d6b46e; margin:0; font:12px Tahoma, Geneva, sans-serif ; color:#4f4f4f; line-height:18px;}
.clear { clear:both;}
.hide { display:none;}
#warpper { width:1088px; margin:0 auto; background:url(../images/drop-shadow-bg.png) repeat-y center top; overflow: hidden;}
#contentwarpper { width:1000px; margin:0 44px; background:#FFFFFF; overflow:hidden;}
#logoWarpper { width:132px; margin:10px auto;}
#menuWarpper {
	width: 86%;
	height: 34px;
	text-align: left;
	margin-top: 10px;
	margin-right: 0;
	margin-left: 132px;
	margin-bottom: 10px;
}
.menuInside { width:auto; height:34px; display:inline-block; margin:0 -2px;}
#slideWarpper { width:980px; height:460px; margin:0 10px; border-top:2px #ac9448 solid; border-bottom:2px #ac9448 solid; background:url(../images/slide-bg-ptrn.jpg) repeat center center; padding:10px 0;}
#controlNavBg {
	width:980px;
	height:60px;
	background:url(../images/index-slide-imgs/slide-control-nav-bg.jpg) no-repeat center top;
}
#contentWarpperInside { width:980px; height:auto; overflow:hidden; margin:10px;}
.contentLeft { width:476px; height:auto; overflow:hidden; float:left; margin-bottom: 10px; }
.contentRight { width:476px; height:auto; overflow:hidden; float:left; margin-left: 28px; }
.projectHead { width:425px; padding: 0 25px 10px; border-bottom:2px #ac9448 solid; height:16px;}
.detachSlideHome {
	width: 425px;
	margin-top: 0;
	margin-right: 25px;
	margin-left: 25px;
	margin-bottom: 20px;
}
.detachSlideHomeHead {
	width:425px;
	height:40px;
	margin-top:10px;
    position: relative;
}
.detachSlideHomeSlde {
	width:425px;
	height:165px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}
.detachSlideHomeSlde2 {
	width:425px;
	height:125px;
	margin-top: 10px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left: 0;
}
.projectHeadLine {  width:425px; padding: 0 25px 0; border-bottom:2px #ac9448 solid; }
.detachSlideDetail { width:425px; height:60px; margin-top:10px; font-size:14px; line-height:20px;}
.csrNewsWarpper { width:980px; height:auto;}
.csrHead {width: 955px; height: 25px; background-color: #c9aa64; margin: 10px 0; margin-left: 10px; padding-top: 8px; padding-left: 25px;}
.csrSlideHomeHead { width:425px; height: auto ; font-size: 14px; font-weight: bold; line-height: 18px; color: #c9ab65; padding: 10px 0 0}
.csrImg { width:219px; height:126px; float:left;}
.csrdetail { width:186px; height:126px; float:left; margin-left:20px;}
.contactWarpper { width:980px; height:auto; overflow:hidden; border-bottom:2px #ac9448 solid; padding-bottom:10px; }
.contactHead {width: 707px; height: 25px; background-color: #d6b46e; margin: 10px 0; margin-left: 10px;  padding-top: 8px; padding-left: 25px; float:left;margin-bottom: 30px;}
.contactPhoneNum { width:235px; height:23px; float:left; background-color:#4f4f4f; margin: 10px 0 0 3px;  padding-top: 10px; text-align:center;}

.contentLeftContact { width:732px; height:auto; overflow:hidden; float:left; }
.contactImg { width:161px; height:95px; float:left;}
.contactdetail { width:540px; height:80px; float:left; margin-left:5px; color:#6f6f6f; padding-top:15px;}
.contactSlideHome { width:707px; margin:0 0 0 25px;}
.contentRightContact { width:245px; height:auto; overflow:hidden; float:left; margin-left: 3px; text-align:center; }

.FooterWarpper { width:930px; height:auto; padding:10px 25px; overflow:hidden; color:#6f6f6f}
.footerSection { width:160px; height:auto; float:left; margin-left:25px;}
.footerSectionHead { width:100%; height:auto; border-bottom:2px #ac9448 solid; padding-bottom:5px; font-size:14px;}
.footetLink { font-size:14px; line-height:25px; padding-top:5px;}
.coppyRightHead {width: 955px; height: 25px; background-color: #c9aa64; padding-top: 13px; margin-left: 10px;  padding-right: 25px; text-align:right;margin-bottom: 45px;}

#contentBigImg { width:980px; height:465px; margin:10px; }
.menuContent { width:980px; height:45px; margin:0 10px; border-bottom:2px #ac9448 solid; padding-bottom:10px; }
.menuContentLeft { width:476px; height:45px; overflow:hidden; float:left; text-align:center; }
.menuContentRight { width:504px; height:45px; overflow:hidden; float:left; text-align:center; margin-top:7px;}
.menuInside.content { width:15px; height:34px; display:inline-block; margin:0 -2px; text-align:center;}
.contentLeftSubContent { width:441px; height:auto; overflow:hidden; float:left; margin:0 18px; }
.contentLeftSubContent.right { margin: 0; width: 503px; }
.subContentDetail { width:441px;}
.subContentConvenent { width:441px; margin:20px 0 0 0;}
.convenectListWarpper { width:441px; height:37px; margin:10px 0;}
.convenentImg { width:38px; height:37px; float:left;}
.convenentDetail { width:200px; height:27px; float:left; margin-left:10px; padding-top:10px;}
.detachMenuWarpper { width:230px; float:left; height:92px; border-bottom:2px #ac9448 solid; padding-bottom: 10px;}
.detachMenu { width:auto; margin-right:10px; float:left; margin:0 15px;}
.detachMenuWarpper.left { margin-left:43px; width:190px;}
.galleryHead { width:503px; height:15px; margin-top:10px;}
.gallerImg { width:100px; height:85px; margin:20px 20px 0 0; float:left; }

.planHeadText { width:450px; height:20px; border-bottom:2px #ac9448 solid; padding-bottom: 10px; margin-top:10px; }


.contentLeftSubContentPlan { width:450px; height:auto; overflow:hidden; float:left; margin:0 18px; }
.contentLeftSubContentPlan.right { width:450px; margin: 0 0 0 44px; }
.planHeadTextThai { width:440px; height:auto; margin:5px 0 0 5px;}
.planImg { width:450px; height:215px; margin:20px 0 10px 0;}
.planDetail { width:450px; height:auto; margin:10px 0 10px 0; font-size: 14px; line-height: 18px; border-bottom:2px #ac9448 solid; border-top:2px #ac9448 solid; padding:10px 0;}
.planImgGroupWarpper { width:450px; height:215px; margin-top:70px; }
.contentLeftSubContent.right.plan { margin: 40px 0px 0px 14px; width: 480px; }
#contactLine { border-top:2px #ac9448 solid; height:5px; }
.contactMapWarpper { width:450px; height:450px; margin:10px 0 10px 25px;}
.contactMenuWarp { width:450px; margin:10px 0 10px 25px; }
.contactMenuBtn { width:auto; height:70px; margin:10px; float:left; }
.contactDetailWarpper { width:450px; margin:10px 0 10px 25px; font-size:14px;}
.contactDetailWarpper > h1 { font-size:16px; font-weight:bold; padding-bottom:10px;}
.contactFormWarpper { width:450px; margin:30px 0 0px 25px; font-size:14px; height:373px; }
.projectHeadContact { width:425px; padding: 10px 25px 10px; border-bottom:2px #ac9448 solid; height:16px; border-top:2px #ac9448 solid;}
.contactKnowWarpper { width:450px; margin:20px 0 10px 25px; height:250px; overflow:hidden;}
.contactJobWarpper { width:450px; height:315px; margin:10px 0 10px 25px;}
.csrImgWarpper { width:450px; height:300px; margin:10px 0 10px 25px;}
.gallerImgCSR { width: 100px; height: 85px; margin: 10px 15px 0 0; float: left; }
.promotionWarp { width:670px; height:auto; overflow:hidden; float:left }
.promotionHead { width:670px; height: 23px; background-color: #c9aa64; margin: 10px 0; padding-top: 10px; padding-left: 25px; }
.allProjectWarp { width:300px; height:auto; overflow:hidden; float:left; margin-left:10px;}
.allProjectHead { width:275px; height: 23px; background-color: #c9aa64; margin: 10px 0; padding-top: 10px; padding-left:25px;}
.bannerPromoWarp { width:620px; height:365px; margin:25px auto;}
.promoTextDetail { width:620px; height:auto; margin:25px auto; }
.allProjectContentWarp { width:300px; height:auto; overflow:hidden;border-left:2px #ac9448 solid; margin-top:25px;}
.allProjectMap { width:252px; height:161px; margin:0 auto;}
.allProjectMapDetail { width:252px; height:auto; margin:10px auto; font-size:14px; font-weight:bold; color:#c8aa64;}
.allProjectIconWarp { width:252px; height:auto; margin:20px auto; overflow: hidden;  }
.allProjectIcon { width:120px; height:65px; float:left; text-align:center; margin:10px 0;  }
.loanWarpper { width:950px; height:auto; overflow:hidden; margin:0 auto; font-size:12px; }
.loanHeadText {font-size:14px; font-weight:bold; color:#a2884d;}

.projectVideo {
	width: 435px;
	height: auto;
	margin-top: 20px;
	margin-right: 40px;
	margin-left: 20px;
	margin-bottom: 20px;0; float: left;}
.projectVideo2 {
	width: 435px;
	height: auto;
	margin-top: 20px;
	margin-right: 40px;
	margin-left: 0px;
	margin-bottom: 20px;0; float: left;}


.vdoThumb { width:100%; height: auto; cursor: pointer; }
.projectSubHeadTag { width: 160px; height: auto; position: absolute; right: 0; top: 0;}
.allProjectIconWarp { width: 100%; padding: 10px 15px; box-sizing: border-box; }
.allProjectIconWarp > li { width: 90px; list-style: none; display: inline-block; padding: 10px; }
.csrWrap {
    width: 100%; height: auto; overflow: hidden; padding-bottom: 80px;
}
.csrWrap2 {
    width: 100%; height: auto; overflow: hidden; padding-bottom: 5px;
}
.projectGalleryImgWrap { width: 100%; padding: 5px 0 30px; overflow: hidden; }
.projectGalleryImgWrap > li { width: 25%; float: left; padding: 5px; list-style: none; overflow: hidden; box-sizing: border-box;}


#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #e3d08d;
  /* change if the mask should have another color then white */
  z-index: 99;
  /* makes sure it stays on top */
}
#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url(../images/preloader.gif);
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}

#floatbar {
     width:1000px;
     position: fixed;
     /* center the element */
     right: 0;
     left: 0;
     margin-right: auto;
     margin-left: auto;
     /* center the element end */
     z-index: 99;
     background: #9d9d9d;
     height: 32px;
     color: #FFFFFF;
     font-size: 18px;
     padding:5px;
     
}

#floatbar a {
     color:#FFFFFF;
     margin-Left: 10px;
    
    
}
.floatbariconLeft { width:auto; height:32px; overflow:hidden; float:Left; margin-Left:20px; }
.floatbariconRight { width:auto; height:32px; overflow:hidden; float:Right; margin-Right:20px; }
.bannerFadin{ animation:fading 2s }@keyframes fading{0%{opacity:0}50%{opacity:1}100%}	

#contentBigImg2 { width:980px; height:980px; margin:10px; }