@font-face {
    font-family: 'CrimsonText';
    src: url('./font/CrimsonText-Regular.eot');
    src: url('./font/CrimsonText-Regular.eot?#iefix') format('embedded-opentype'),
      
         url('./font/CrimsonText-Regular.woff') format('woff'),
         url('./font/CrimsonText-Regular.ttf') format('truetype'),
         url('./font/CrimsonText-Regular.svg#CrimsonText') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CrimsonTextBd';
    src: url('./font/CrimsonText-Bold.eot');
    src: url('./font/CrimsonText-Bold.eot?#iefix') format('embedded-opentype'),
      
         url('./font/CrimsonText-Bold.woff') format('woff'),
         url('./font/CrimsonText-Bold.ttf') format('truetype'),
         url('./font/CrimsonText-Bold.svg#CrimsonTextBd') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
	font-family: 'DBHelvethaicaX';
    src: url('./DBHelvethaicaX/DBHelvethaicaX-55Regular.eot');
    src: url('./DBHelvethaicaX/DBHelvethaicaX-55Regular.eot?#iefix') format('embedded-opentype'),
         url('./DBHelvethaicaX/DBHelvethaicaX-55Regular.woff') format('woff2'),
         url('./DBHelvethaicaX/DBHelvethaicaX-55Regular.woff') format('woff'),
         url('./DBHelvethaicaX/DBHelvethaicaX-55Regular.ttf') format('truetype'),
         url('./DBHelvethaicaX/DBHelvethaicaX-55Regular.svg#DBhx65Med') format('svg');
    font-weight: normal;
    font-style: normal;
}

div#loadPage,div#loadPage_content{position:fixed;margin:auto;left:0;top:0;width:100%;height:100%;color:#000;background-color:#FFF;z-index:500000000;text-align:center;opacity:.7;padding-top:200px;vertical-align:middle;filter:alpha(opacity=70);display:none}

/* ====== preload ========== */

img{
	max-width: 100%;
}

html{
  width:100%; height: 100%;
}

body{
  margin: 0;
  padding: 0;
  width:100%; 
 overflow-x: hidden;
 font-family: 'CrimsonText'; font-size: 16px; line-height: 120%;
    background: #F3EEE5;
 color:#5A5A5A;
}
 

a{
	text-decoration: none;
	 color: #5A5A5A;
}

a:hover{
	 color: #cccccc;
}

h1{
	margin:0; padding:0;
	font-size:42px;	 line-height: 120%;
	font-weight:normal;    font-family: 'CrimsonTextBd';
	letter-spacing: 2px; color: #C57B57;
}

h2{
    margin:0; padding:0;
	font-size:24px;	 line-height: 120%;
	font-weight:normal;    color: #C57B57;  
}
 
h3{
	margin:0; padding:0;
	font-size:36px;	 line-height: 120%;
	font-weight:normal;      font-family: 'CrimsonTextBd';
}
 
h4{
	margin:0; padding:0;
	font-size:30px;	 line-height: 120%; color: #C57B57;  
	font-weight:normal;      font-family: 'CrimsonTextBd';
}
 

a ,a:hover ,a:link{
  text-decoration: none;
}
 
b{
	font-family: 'CrimsonTextBd'; line-height: 140%;
}

.bull{
	font-family: "sans-serif";
	width: 20px;
}
  

ul, li {
    margin:0; 
    padding:0; 
    list-style:none;
}

table{
	font-family: 'CrimsonText';
}

table td{
	padding-top: 5px;
}

.left{
	float: left;
}

.right{
	float: right;
}


.clear{
	clear:both;	
}

 
.top5{
	padding-top:5px;	
}	

.top10{
	padding-top:10px;	
}	

.top20{
	margin-top: 20px;
}

.top30{
	margin-top: 30px;
}
		
.top40{
	margin-top: 40px;
}

.top60{
	margin-top: 60px;
}

.size48{
	font-size: 48px; line-height: 120%;
}

.size40{
	font-size: 40px; line-height: 120%;
}

.size36{
	font-size: 36px; line-height: 120%;
}

.size30{
	font-size: 30px; line-height: 120%;
}

.size24{
	font-size: 24px; line-height: 120%;
}

.size21{
	font-size: 21px; line-height: 120%;
}

.size12{
	font-size: 12px; line-height: 120%;
}

.style1{
	color: #C57B57;
}

.style2{
	color: #7B371C;
} 
 
	.webshow{
		
	}

	.mobileshow{
		display: none;
	}

.popup{
	width: 100%; height: 100%; 	z-index: 999999;
	top: 0; bottom: 0;
	position: fixed; background: url("../../img/tp/popup.jpg") top center; 
	background-size: 100%; background-color: #F3EEE5;
	padding: 20px 0 100px 0;  overflow: scroll;
	text-align: center;   display: none;
}


.popup_house{
	width: 100%; height: 100%; 	z-index: 999999;
	top: 0; bottom: 0;
	position: fixed; background: url("../../img/tp/popup.jpg") top center; 
	background-size: 100%; background-color: #F3EEE5;
	padding: 20px 0 100px 0;  overflow: scroll;
	text-align: center;   display: none;
}

#load_popup img{
/*	width: 100%;*/
}

area:focus {
outline:0;
}

.popup_area{
	 width:90%;  margin-left: auto; margin-right: auto;
	max-width: 720px;
 
	color: #7B371C;
	min-height: 400px;
	 position: relative;
	margin-top: 10px;
	  text-align: left;
	padding: 30px 0;
    
}

.pop_padding{
	margin-top: 30px;
    padding: 40px;
}

.pop_img{
	height: 400px;
}

.popup_close{
	text-align: right; position:relative; right:0;
	margin: 0 20px 0 0; z-index:5;
}

 

.web{
	width: 100%; max-width: 1400px;
	margin-left: auto; margin-right: auto;
	position: relative;
}

.area_content{
	width:90%;  margin-left: auto; margin-right: auto;
	 position: relative; max-width: 1100px;
	border: 0px #000 solid; text-align: left;
}
 

.head_fixe{
	position: fixed; width: 100%; z-index: 99;
	   background: #F3EEE5 ;  
	
} 
 

.bg_header{
	 
}

.header{
	width: 96%; margin-left: auto; margin-right: auto;
	max-width: 1200px; border: 0px #000 solid;
	padding: 10px 0;
	
}



.logo{
	background: url("../../img/tp/anita-logo.svg") top center no-repeat;
	background-size: 157px;
	width: 163px; height: 67px; border: 0px #000 solid;
	margin: 10px 0;
}

 
.header li{
	display: inline-block; vertical-align: text-top;
	margin: 0 12px;  
	font-size: 15px; line-height: 100%;
	padding: 30px 0px;  
	margin-top: 0px; color: #7B371C;
}

.head_menu a{
	color: #7B371C;
}

.head_register{
	margin: 17px 12px 0 !important;
	border: 2px #7B371C  solid;
	padding: 10px 20px !important;
}

.header_home{
	position: absolute; width: 100%; z-index: 5;
}

.header_home a{
	color: #fff;
}

.header_home .logo{
	background: url("../../img/tp/anita.svg") top center no-repeat !important;
	background-size: 157px;
	width: 163px; height: 67px; border: 0px #000 solid;
	margin: 10px 0;
}



.header_home .header li{
	display: inline-block; vertical-align: text-top;
	margin: 0 12px;  
	font-size: 15px; line-height: 100%;
	padding: 30px 0px;  
	margin-top: 0px; color: #fff !important;
}

.header_home .head_register{
	margin: 17px 12px 0 !important;
	border: 2px #fff  solid;
	padding: 10px 20px !important;
}

.lang_act{
	border-bottom: 2px #7B371C solid;
	padding-bottom: 0px;
}

.header_home .lang_act{
	border-bottom: 2px #ffffff solid;
}

.header .active{
	 font-weight: bold;
}

.input_lang{
	width: 45px; height: 22px;
	padding: 0; margin: 0;
	outline: none;
	border: 0; background: #94836c;
	 color: #ffffff;
	font-size: 16px;
    line-height: 90%; 
}

.header .lang{
	 
	  color: #B08E00;
	  
}

.header .lang a{
	 
	  color: #B08E00;
	 
}

.header .lang .active{
	font-weight: bold;  color: #000;
}

.header_lang{
    display: none;
}

.header_lang a{
	color: #fff;
}
 

.input_register{
     font-family: 'CrimsonText';
    font-size: 15px; line-height: 100%;
    width: 100%; height:40px;
    padding-left: 0px;  
     background: none; resize: none; outline: none;
    color: #5A5A5A; 
	border: 0;
    border-bottom: 1px #C57B57 solid;
}


.input_register_error{
     font-family: 'CrimsonText';
    font-size: 15px; line-height: 100%;
    width: 100%; height:40px;
    padding-left: 0px;  
     background: #C57B57; resize: none; outline: none;
    color: #fff; 
	border: 0;
    border-bottom: 1px #C57B57 solid;
}

.input_register::-webkit-input-placeholder{
	opacity: 1 !important; color: #5A5A5A;
}
.input_register:-moz-placeholder {
	opacity: 1 !important; color: #5A5A5A;
}

.input_register::-moz-placeholder{
	opacity: 1 !important; color: #5A5A5A;
} 

input:focus::placeholder {
  color: transparent;
}


textarea:focus::placeholder {
  color: transparent;
}

.input_area{
    height: 110px !important;
}

 
.line_foot{
	border-top: 1px #eaddd8 solid;
	margin-top: 60px;
}

.footer{ 
	width:96%;  margin-left: auto; margin-right: auto; 
	color: #7B371C; font-size: 12px; line-height: 140%;
	 position: relative; max-width: 1200px;  
	border: 0px #C91518 solid; text-align: left; 
	padding: 20px 0;
}

 
.footer_logo{
	float: left; padding: 10px 0;
	 
}
 
.footer_menu{
	float: left; padding: 22px 0px 0 140px ;
}

.footer_menu li{
	margin-top: 4px;   
}
.footer a{
	color: #7B371C;
}
 
.footer_social{
	margin-top: 26px;
	float: right;  text-align: left;
}

.footer_phone{
	font-size: 30px; line-height: 140%;
}

.footer_social img{
   margin-right: 15px;
}

.footer2{
	background: #C57B57; padding: 10px 0; 
}


.footer2 .area{ 
	width:96%;  margin-left: auto; margin-right: auto; 
	color: #ffffff; font-size: 12px; line-height: 140%;
	 position: relative; max-width: 1200px;  
	border: 0px #C91518 solid; text-align: left;  
}

.copyright{
   text-align: right; margin-top: -20px; padding-bottom: 10px;
}
 
.top_page{
	padding-top: 60px;
}

.form-radio
{
	font-weight: bold;
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     background-color: #eeeeee;
     color: #fff;
     top: 10px;
     height: 30px;
     width: 30px;
     border: 0;
     border-radius: 50px;
     cursor: pointer;     
     margin-right: 7px;
     outline: none !important;
	
}
.form-radio:checked::before
{
     position: absolute;
     font: 13px/1 'Open Sans', sans-serif;
     left: 11px;
     top: 7px;
     content: '\02143';
     transform: rotate(40deg);
}
.form-radio:hover
{
     background-color: #FFE266;
}
.form-radio:checked
{
     background-color: #FBCB00; color: #fff;
}
 
.banner{
	 width: 100%; position: relative;
}

.banner img{
	width: 100%;
}

.concept1{
	background: url("../../img/concept/01.png") -40px center no-repeat;
	min-height: 400px;
	padding: 60px 0;
}

.concept2{
	background: url("../../img/concept/02.png") -40px center no-repeat;
	min-height: 400px;
	padding: 60px 0;
}

.concept3{
	background: url("../../img/concept/03.png") -40px center no-repeat;
	min-height: 400px;
	padding: 60px 0;
}

.concept4{
	background: url("../../img/concept/04.png") -40px center no-repeat;
	min-height: 400px;
	padding: 60px 0;
}

.concept5{
	background: url("../../img/concept/05.png") -40px center no-repeat;
	min-height: 400px;
	padding: 60px 0;
}

.conceptL{
	display: inline-block; vertical-align: top; width: 37%;
}

.conceptR{
	display: inline-block; vertical-align: top; width: 59%;
	margin-left: 3%;
}

.concept_text{
	margin-top: 20px;
	margin-left: 40px; padding-left: 40px;
	border-left: 1px #C57B57 solid;
	padding-bottom: 20px;
}

.btn_prev{
	float: left; cursor: pointer;
	color: #C57B57; margin-top: 30px;
	border-bottom: 1px #C57B57 solid;
	padding: 5px 20px; 
}


.btn_next{
	float: right; cursor: pointer;
	color: #C57B57; margin-top: 30px;
	border-bottom: 1px #C57B57 solid;
	padding: 5px 20px; 
}


.projectL{
	display: inline-block; vertical-align: top; width: 47%;
}

.projectR{
	display: inline-block; vertical-align: top; width: 49%;
	margin-left: 3%;
}

.projectL2{
	display: inline-block; vertical-align: top; width: 60%;
}

.projectR2{
	display: inline-block; vertical-align: top; width: 40%;
	margin-left: -40px; margin-top: 40px
	
}

.project_hilight{
	font-family: 'CrimsonTextBd';  color: #C57B57;
	background: url("../../img/project/Line-14.png") top left no-repeat;
	background-size: 80px;
	padding: 0 0 0 100px;
}

.projectR2 .area{
	padding: 0 0 0 100px;
}

.projectR2 .text{
	min-height: 250px;
}

.project_thumb{
	display: inline-block; vertical-align: top;
	width: 30%; margin-right: 5px; margin-top: 10px;
}

.project_thumb_area{
	float: right; width: 35%;
}

.housetype_box1{
	display: inline-block; vertical-align: top;
	margin-top: 40px;
}

.housetype_box2{
	display: inline-block; vertical-align: top;
	margin-left: 40px; margin-top: 40px;
}


.housetype_icon{
	display: inline-block; vertical-align: top;
	color: #C57B57; margin: 0 10px;
}

.icon_bed{
	background: url("../../img/housetype/bed.svg") center center no-repeat;
	width: 54px; height: 45px;
}

.icon_bath{
	background: url("../../img/housetype/bath.svg") center center no-repeat;
	width: 54px; height: 45px;
}

.icon_park{
	background: url("../../img/housetype/park.svg") center center no-repeat;
	width: 54px; height: 45px;
}

.btn_plan{
	display: inline-block; vertical-align: top;
	font-size: 18px; line-height: 140%;
	color: #C57B57; font-family: 'CrimsonTextBd'; 
	border: 2px #C57B57 solid; padding: 10px 30px;
}

.masterplan{
	padding-top: 120px;
}

.location_box{
	display: inline-block; vertical-align: top;
	margin: 30px 120px 0 0px;
}

.icon_education{
	background: url("../../img/location/education.svg") top center no-repeat;
	width: 57px; height: 60px;
}

.icon_lifestyle{
	background: url("../../img/location/lifestyle.svg") top center no-repeat;
	width: 57px; height: 60px;
}

.icon_health{
	background: url("../../img/location/health.svg") top center no-repeat;
	width: 57px; height: 60px;
}

.contactL{
	display: inline-block; vertical-align: top; width: 37%;
	margin-top: 50px;
}

.contactR{
	display: inline-block; vertical-align: top; width: 59%;
	margin-left: 3%; margin-top: 50px;
}

.label_contact{
	display: inline-block; vertical-align: top;
	margin-top: 20px; width: 45%; color: #7B371C;
}

.label_margin{
	margin-left: 6%;
}

.btn_submit{
	display: inline-block; vertical-align: top;
	background: url("../../img/contact/submit.jpg") top center repeat-x;
	padding: 10px 40px; color: #fff; font-family: 'CrimsonTextBd';
}


.pop_housetype{
	 width:90%;  margin-left: auto; margin-right: auto;
	max-width: 1000px;
 
	color: #3f3a3c;
	min-height: 400px;
	 position: relative;
	margin-top: 10px;
	  text-align: left;
	padding: 30px 0;
}

.pop_housetype h1{
	color: #3f3a3c;
}

.pop_housetype .middle{
	background: url("../../img/housetype/mid.jpg") top center repeat-y;
	width: 100%; background-size: 100%;
	min-height: 300px; padding: 20px 0;
}

.pop_housetype .subbox{
	display: inline-block; vertical-align: top;
	border-right: 1px #3f3a3c solid;
	padding: 0 5px;
}


.pop_housetype .title{
	font-size: 24px; line-height: 100%;
	padding-bottom: 20px;
	background: url("../../img/housetype/title.jpg") bottom center no-repeat;
	min-width: 200px; text-align: center; 
}

.pop_housetype_area{
	width: 90%; margin-left: auto; margin-right: auto;
	margin-top: 30px;	
}

.pop_housetypeL{
	float: left; width: 64%;
}

.pop_housetypeL img ,.pop_housetypeR img{
	width: 100%;
}

.pop_housetypeR{
	float: right; width: 32%;
}

.pop_typeB{
	padding-top: 130px;
}

.table_housetype{
	width: 80%;
}

.table_housetype th{
	border-bottom: 1px #be8463 solid;
	padding: 10px 0;
}

.table_housetype td{ 
	padding: 10px 0;
}


area {
    display: block;
    background-color:pink;
   }


.btn_gallery{
	display: inline-block; vertical-align: top; cursor: pointer;
	color: #C57B57; margin-top: 30px;
	border-bottom: 1px #C57B57 solid;
	padding: 5px 20px;  margin-left: 10px; margin-right: 10px;
}

.googlemap{
	padding-top: 40px;
}

.googlemap iframe{
	width: 100%; height: 550px;
}

@media screen and (max-width: 1400px) {
 


	
}

@media screen and (max-width: 1300px) {
	 
	 
}


@media screen and (max-width: 50em) {
body{ 
	font-size: 14px; line-height: 120%;
}
	
 
h1{
	font-size:36px;	 line-height: 120%;
}

h2{
    font-size:20px;	 line-height: 120%;
}
 
h3{
	font-size:30px;	 line-height: 120%;
}
 
h4{
	font-size:24px;	 line-height: 120%; color: #C57B57;  
}
 
 	
	 	
.webshow{
		display: none;
	}

	.mobileshow{
		display: block;
	}
	

	.top_head{
		padding: 80px 0 0 0;
	}	
 
	.logo{
		padding: 0px;
		text-align: center;
	}	
    
     .head_fixe{
	position: fixed; width: 100%; z-index: 99; height: 90px;
	  
} 

	.head_menu{
		display: none; padding: 10px 20px;
		background: #fff;  border-radius: 0px 0px 20px 20px; 
	}
	
	
	.head_menu a{
		color: #000;
	}

	
	.header_home .header li ,.header li{
		color: #000 !important;
		margin: 0 0px !important;  
		font-size: 15px; line-height: 100%;
		padding: 10px 0px !important;  border-bottom: 1px #999 solid;
	}

	.header_home .head_register ,.head_register{
		margin: 0px !important;
		border: 0;
		padding: 10px 0px !important;
	}

	
	.icon_menu{
		background: url("../../img/tp/icon-mobile.png") top center no-repeat;
		background-size: 26px; cursor: pointer; margin-top: 0px;
		width: 30px; height: 30px; position: absolute; display: block;
		right: 0; margin-right: 10px;
	}

	.close_mobile{
		background: url("../../img/tp/icon-close.png")top center no-repeat;
		background-size: 26px; cursor: pointer;
		width: 30px; height: 30px; margin-top: 0px;
		position: absolute; display: none;
		right: 0; margin-right: 10px;
	}
	
	
	.icon_menu2{
		background: url("../../img/tp/icon-mobile2.png")top center no-repeat ;
		background-size: 26px; cursor: pointer; margin-top: 0px;
		width: 30px; height: 30px; position: absolute; display: block;
		right: 0; margin-right: 10px;
	}
	
	.close_mobile2{
		background: url("../../img/tp/icon-close2.png")top center no-repeat; 
		background-size: 26px; cursor: pointer; margin-top: 0px;
		width: 30px; height: 30px; position: absolute; display: block;
		right: 0; margin-right: 10px; display: none;
	}
	
	 .bg_header{
	 position: absolute; z-index: 99;
    width: 100%;
}
    
    .header{
        padding: 10px;
    }

	
	.header li{
		display: inline-block; vertical-align: text-top;
		width: 100%; padding: 0;
		margin: 0; text-align: left;
		 
		margin-top: 14px;
	}
	
    .header .lang{
	display: none;
}	  
    .header_lang{
        display: block;
        position: absolute; right: 0;
		border: 1px #fff solid;
        color: #fff;
    }
	
	.headerL{
	display: none;
	}

	.headerR{
		display: none;
	}
	
	.footer{ 
	padding: 0px 0 20px;
}
	
	.footer .top10{
		margin-top: 0; padding-top: 0;
	}

	
	.footer_menu{
		display: none;
	}	
	
	.footer_social img{
		height: 16px !important;
	}
	
	.footer_phone{
	font-size: 20px; line-height: 140%;
}

	 
.conceptL{
	 width: 100%;
}

.conceptR{
	width: 100%;
	margin-left: 0%;
	margin-top: 40px;
}

.concept_text{
	margin: 0; padding: 0; border: 0;
	margin-top: 40px;
}	
	

.projectL{
	width: 100%;
}

.projectR{
	width: 100%;
	margin-left: 0%;
	margin-top: 40px;
}

.projectL2{
	width: 100%;
}

.projectR2{
	width: 100%;
	margin-left: 0%;
	margin-top: 40px;
}	
	
.projectR2 .area{
	padding: 0 0 0 0px;
}

.projectR2 .text{
	min-height: 50px;
}
	
.project_thumb{
	margin-top: 20px;
	width: 30%; margin-right: 5px;
}	

.project_hilight{ 
	background: url("../../img/project/Line-14.png") top left repeat-x;
	background-size: 80px;
	padding: 0 0 0 0px; text-align: center;
}
	
	.project_hilight span{
		background: #F3EEE5;
		padding: 0 10px;
	}
	
	
	.contactL{
	width: 100%;
	margin-top: 10px;
}

	.contactL br{
		display: none;
	}
	
.contactR{
	width: 100%;
	margin-left: 0; margin-top: 70px;
}

.label_contact{ 
	margin-top: 20px; width: 100%;  
}

	.label_margin{
		margin-left: 0;
	}	
	
}

@media screen and (max-width: 40em) {
	


	

.header{
	width: 100%; 
	padding: 10px 0;
	
}	
.logo{
	background: url("../../img/tp/anita-logo.svg") top center no-repeat;
	background-size: 100% !important;
	width: 120px; height: 50px;   
}


.header_home .logo{
	background: url("../../img/tp/anita.svg") top center no-repeat !important;
	background-size: 100% !important;
	width: 120px; height: 50px;   
}
	
	.size21{
		font-size: 18px; line-height: 120%;
	}

	
.concept1 ,.concept2 ,.concept3 ,.concept4 ,.concept5{
	 padding: 40px 0;
}
	


.googlemap iframe{
	width: 100%; height: 350px;
}
	
}