@charset "utf-8";
/* CSS Document */
@-ms-viewport {
   width: device-width;
}
@-o-viewport { 
   width: device-width;
}
@viewport {
   width: device-width; 
}

@font-face {
    font-family: 'THSarabunNewRegular';
    src: url('../fonts/thsarabunnew.eot');
    src: url('../fonts/thsarabunnew.eot') format('embedded-opentype'),
         url('../fonts/thsarabunnew.woff') format('woff'),
         url('../fonts/thsarabunnew.ttf') format('truetype'),
         url('../fonts/thsarabunnew.svg#THSarabunNewRegular') format('svg');
}

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

}


html,body{margin:0; padding:0; font:11px Tahoma,Arial; color:#404040; width:100%; height:100%; min-height:100%;}
body{background:#3b5998; font-family:'tahoma' ,Arial;}

a{color:#404040; text-decoration:none; cursor:pointer;}
p{width:100%; clear:both; margin:5px 0;}
h1{margin:0px; padding:6px 0; color:#606060;}
h2{margin:0; padding:8px 0;}
h3{margin:0; padding:8px 0;}
h4{margin:0; padding:8px 0;}
select{width:100%; color:#606060;}
img{border:none;}
input[type=button],input[type=submit],input[type=image]{cursor:pointer;}
ul{margin:0; padding:0;}
input[type="button"], input[type="submit"], input[type="reset"],input[type=image]{-webkit-appearance: none; appearance:none; border:none;}
.frm label{float:left;}
.frm .select_div{float:left;}
.h_page{font-size:20px; color:#901a1c; margin:0 0 5px 0; padding:5px 0 2px 0; border-bottom:1px solid #901a1c;}
.h_table{background:#7989C4; color:#fff;}
.h_table td, .h_table th{padding:7px 0;}
.btn_1{
	background-color:#1f3f82; 
	border:1px solid #3152b0; 
	border-radius:2px; text-align:center; 
	padding:10px 10px; color:#fff; 
	font-size:13px;
	background: -webkit-linear-gradient(top,#5171ca, #1f3f82); 
	background: -o-linear-gradient(top,#5171ca, #1f3f82); 
	background: -moz-linear-gradient(top,#5171ca, #1f3f82); 
	background: -ms-linear-gradient(top,#5171ca, #1f3f82);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5171ca', endColorstr='#1f3f82',GradientType=0 ) !important;
	background: linear-gradient(top,#5171ca, #1f3f82); 
	cursor:pointer;
}

.btn_2{
	/*background:#EEF1FA;*/
	background:#7989c4; color:#fff !important;
    border: 1px solid #ADB6C7 !important;
    border-radius: 3px;	
	cursor:pointer;
	padding:5px 10px;
	behavior:url(border-radius.htc);
}
.btn_2:hover{background:#EEF1FA; color:#333 !important;}

.btn_3{
	background-color:#ff9500; 
	border:1px solid #ff9500; 
	border-radius:2px; text-align:center; 
	padding:10px 10px; color:#fff; 
	font-size:12px;
	background: -webkit-linear-gradient(top,#fdae3f, #ff9500); 
	background: -o-linear-gradient(top,#fdae3f, #ff9500); 
	background: -moz-linear-gradient(top,#fdae3f, #ff9500); 
	background: -ms-linear-gradient(top,#fdae3f, #ff9500);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdae3f', endColorstr='#ff9500',GradientType=0 );!important;
	background: linear-gradient(top,#fdae3f, #ff9500); 
	cursor:pointer;
	behavior:url(border-radius.htc);
}

.btn_4{
	background-color:#0cb829; 
	border:1px solid #0cb829; 
	border-radius:2px; text-align:center; 
	padding:10px 10px; color:#fff; 
	font-size:12px;
	background: -webkit-linear-gradient(top,#27d144, #0cb829); 
	background: -o-linear-gradient(top,#27d144, #0cb829); 
	background: -moz-linear-gradient(top,#27d144, #0cb829); 
	background: -ms-linear-gradient(top,#27d144, #0cb829);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#27d144', endColorstr='#0cb829',GradientType=0 );!important;
	background: linear-gradient(top,#ff9500, #0cb829); 
	cursor:pointer;
	behavior:url(border-radius.htc);
}

.btn_5{
	background-color:#ec9213; 
	border:1px solid #e8c38e; 
	border-radius:2px; text-align:center; 
	padding:10px 10px; color:#fff; 
	font-size:14px;
	background: -webkit-linear-gradient(top,#e8c38e, #ec9213); 
	background: -o-linear-gradient(top,#e8c38e, #ec9213); 
	background: -moz-linear-gradient(top,#e8c38e, #ec9213); 
	background: -ms-linear-gradient(top,#e8c38e, #ec9213);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e8c38e', endColorstr='#ec9213',GradientType=0 );!important
	background: linear-gradient(top,#e8c38e, #ec9213); 
	cursor:pointer;
}


.star{float:left; color:#EF2B2E; padding:1px 1px;}
.label_select{color:#FF9500; padding:1px 1px; cursor:pointer; text-decoration:underline;}
select{width:100%;}

.underline{width:100%; height:1px; margin:0; padding:5px 0; border-bottom:1px solid #ccc;}
.width_100{width:100%;}
.box_border {border: 1px solid #3B5998; background:#FDFDFD; border-radius: 5px; behavior:url(border-radius.htc);}
.align_center {text-align: center; width: 100%;}
.align_right {text-align:right; width: 100%;}
.success_word{color:#05741F; font-size:14px; text-align:center;}
.unsuccess_word{color:#BC0104; font-size:14px; text-align:center;}

.left{clear:both; float:left;}
.center{float:left;}
.right{float:right;}
.warning_1{color:#4cd964; font:16px 'quarklight'; margin:5px 0;}

#shadow{background:#000; width:100%; position:fixed; top:0; left:0; display:none;}
#loading{width:50px; margin-left:-25px; left:50%; position:fixed; top:250px; display:none;}

.inner{width:800px; margin:0px auto; overflow:hidden; clear:both;}

.menu_br{clear:both; float:left;}
.menu_line2{font-size:11px; padding-top:13px;}
.sep2{padding:0 3px; text-align:center; padding-top:11px;}

#top{background:#1f3f82; width:100%; min-width:980px; padding:10px 0 5px 0; top:0; left:0; z-index:8000; min-height:88px; position:relative;}
#top .inner{position:relative;}
#top_2{background:#34559c; position:absolute; bottom:0; width:100%; height:25px;}

#logo{margin:10px 0 0px 0px; background:#fff; padding:2px;}
#logo img{width:60px;}

#top_emp{background:#910F02; height:25px; padding:0px 0 0 0; width:100%;  position:relative; z-index:8001;}
#emp_name{color:#fff; width:20%; font-size:13px; padding:3px 24px 0 0; background:url(../../images/icon-user.png) right 3px no-repeat; height:22px; white-space:nowrap;}

.menu_login{padding:0 0 5px 0;}

#broker_name{color:#fff; padding:30px 0 0 30px; font:16px 'times new roman'; text-transform:uppercase;}
#broker_name span#name2{color:#fc5a5a;}

#call_center{float:right; color:#fff; position:absolute; top:0px; right:0px; white-space:nowrap; font:20px 'THSarabunNewRegular';}



#container{width:100%; background:#fff; padding:20px 0; text-align:left; clear:both; float:left; height:100%; min-height:65%; height:auto !important;}
#container table{float:left;}

#col_left{width:699px; padding-right:30px; overflow:hidden; border-right:1px dashed #d9d9de;}
.left_blog{width:100%; padding-bottom:30px;}

#col_right{width:180px; padding:0 0 0 30px;}
.right_blog{width:100%; margin-bottom:30px;}


.h_section{font:18px 'tahoma'; color:#3B5998; border-bottom:1px solid #d9d9de; padding:5px 0 5px 0; margin:0 0 10px 0 !important; width:100%;}
.h_app{font:18px 'tahoma'; color:#3B5998; padding:5px 0 5px 0; margin:0 0 10px 0 !important; width:100%;}

/*///////////// LOGIN //////////////*/
#logo_login{padding:40px 0 30px 0; font-size:20px; color:#910f02;}
#logo_login img{margin:0 0 15px 0; width:90px;}
#logo_login p{padding:5px 0 0 0; margin:0;}
#login_frm{width:60%; padding:20px 5%; margin:0px auto; background:#eef1fa; font-size:14px;}
#login_frm label{width:120px; text-align:left; padding:0 0 0 10px;}
#login_frm .txt{width:250px;}
#remember_login{margin:0px 5px 0 0; line-height:18px;}
#login_frm b{padding:0px 0 0 0; line-height:18px;}
#login_frm a{color:#F8B524;}
#login_frm h1{clear: both; color: #3B5998; float: left; font-size: 28px; margin: 0 0 15px; padding: 5px 0; width: 100%; font-size:20px;}
#clearcookie{width:70%; margin:20px auto 20px auto; float:none; font-size:15px !important;}


/*//////////// FORM /////////////*/
.h_frm {background:#7989C4; color:#FFFFFF; font-size:14px; margin:0 0 10px; padding:5px 2% !important; width:96% !important;}
.frm p{padding:0 0 7px 0px; clear:both; float:left; width:100%;}
.frm b{font-weight:normal;}
.frm b.label{padding:0 5px 0 0; float:left; line-height:25px; width:80px; text-align:right;}
.h_frm{background:#e0e0e0; color:#222; padding:5px 2% !important; width:96% !important; margin:0 0 10px 0; font-size:14px;}
.frm label{clear:both; float:left; padding:0 10px 0 0; line-height:20px;}
/*.frm .label_2{width:100px;}*/
.frm_inner{padding:5px 2% 30px 2%; width:96%; clear:both; float:left;}
.lb_description{color:#AC0C0F; font-size:12px; font-style:italic;}
.txt{border:1px solid #ccc; padding:0 5px; line-height:25px; height:24px; float:left; margin-right:3px;}
.txt_1{width:50px; float:left;}
.txt_2{width:120px; float:left;}
.txt_3{width:150px; float:left;}
.txt_short{width:30px; float:left;}
.txt_mini{width:10px; float:left;}
.txt_firstname{margin-right:2px;}


.select_1{width:65px; float:left; height:26px;}
.select_2{width:130px; float:left; height:26px;}
.select_3{width:200px; float:left; height:26px;}
.select_short{width:55px; float:left; height:26px;}

.frm .highlight{background:#fbfaee; border:1px solid #FFCF63;}
.frm .highlight_2{background:#f0fff4; border:1px solid #c9fcd6;}
.frm .highlight_3{background:#f1d1ff; border:1px solid #e6abff;}
.frm .color_1{color:#038023;}

select{width:97%; height:100%;}

.frm i.star{float:left; padding:0 3px 0 2px; color:#C0070A; font-style:normal; font-size:12px; line-height:25px;}
.frm i.seperate{padding:3px 3px; text-align:center; float:left; display:inline-block; font-style:normal;}

.frm .frm_col{float:left;}
.frm .frm_col .txt{}
.frm .three_col .frm_col{float:left; width:31.5%; padding-left:10px;}
.frm .three_col .txt_2{width:115px;}
.frm .three_col .col_1{}
.frm .three_col .col_2{}
.frm .three_col .col_3{}
.frm .three_col .col_span2{width:60%;}

.frm .file{display:none;}
.frm .fake_file{padding:5px 0; font-size:12px; min-width:125px; float:left;}
.frm .fake_path{float:left; padding:5px 0 0 3px;}


/* ///////////////// S MENU ///////////////*/
#s_menu{padding:30px 5% 15px 5%; width:89%;}
#s_menu a{
	display:block; width:99.5%; 
	border:1px solid #adb6c7; padding:12px 0;
	font-size:18px; margin:0 0 15px 0;
	color:#3c5ca5; border-radius:10px; 
	background:#eef1fa;
}
#s_menu a:hover{
	background:#7989c4; color:#fff;
}


#footer{border-top:1px solid #ccc; background:#EEF1FA; clear:both; width:100%; text-align:center; font:12px 'tahoma'; padding:10px 0 5px 0; color:#404040; line-height:20px;}
#menu_footer{padding-left:10px; width:100%;}
#menu_footer ul{width:100%; margin:0; padding:10px 0 20px 0px; float:left; width:23%; }
#menu_footer ul li{margin:0; color:#404040; list-style:none; float:left; padding:0 0 0px 0; width:100%; text-align:left; font-size:12px; line-height:17px;}
#menu_footer ul li a{color:#404040; display:block; list-style-position: inside; list-style-type: disc; display: list-item;}
#menu_footer ul li a:hover{color:#000; text-decoration:underline;}
#menu_footer ul li.topic{font-size:13px; text-decoration:underline; font-weight:bold; padding:0 0 5px 0; list-style:none;}

#menu_footer ul#menu_footer1{width:54%;}
#menu_footer ul#menu_footer1 li{width:50%;}

#menu_footer2{display:none;}

#copyright{border-top:1px solid #ccc; padding:5px 0 0 0; font-size:9px; width:100%; color:#404040}



/*////////// BACK TO TOP BUTTON ///////////*/
#back-top {position: fixed; bottom: 30px; right:30px; width:60px !important; height:60px;	}
#back-top a{}
#back-top a:hover{}

#back-top img{width:100%;}

@media screen and  (max-width: 767px) and (-webkit-min-device-pixel-ratio:0) { 
	select:focus, textarea:focus, input:focus {font-size: 16px !important;} 
}

@media only screen and  (max-width: 767px){
	#logo_login{font-size:15px; padding:10px 0 20px 0; }	
	#clearcookie{width:95%;}
	
}

@media only screen and (max-width:479px){
	
	/*/////////// FORM ///////////*/
	.frm label{font-size:12px;}
	.frm .three_col .frm_col{width:98%; padding-left:0px;}
	.frm .three_col .frm_col .txt_2{width:250px;}
	.frm b.label{text-align:left; width:150px; margin-bottom:7px; font-size:14px;}
	.frm .three_col{padding:0px; margin:0;}
	.frm .fake_path{margin:3px 0 0 100px;}
	
	.h_bar span{font-size:12px;}
	
	#login_frm{width:90%; padding:10px 2%;}
	#login_frm label{width:24%; padding:0 0 0 2%;}
	#login_frm .txt{width:67%; padding:0 2%; margin-right:0px;}
	#login_frm #btn_login{width:100%;}
	.frm .emp_label{width:0px !important; height:0px;}	
	
	#back-top{display:none !important;}
}


@media only screen and (min-width:480px) and (max-width:767px){
	#login_frm{width:90%; padding:10px 2%;}
	#login_frm label{width:24%; padding:0 0 0 2%;}
	#login_frm .txt{width:67%; padding:0 2%; margin-right:0px;}
	#login_frm #btn_login{width:100%;}
	.frm .emp_label{width:0px !important; height:0px;}
}