/***** BEGIN RESET *****/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;	
}

ol, ul {
	list-style: none;
}

table{border-collapse:collapse; width:100%;}
td{vertical-align:top;}

/* Make HTML 5 elements display block-level for consistent styling */  
header, nav, article, footer, address, img {  
    display: block;  
} 

/***** END RESET *****/


body {
  font-family: 'Kanit', sans-serif!important;
  font-weight: 600;
  letter-spacing: 2px;
  background-color: transparent;
  
  }

p{font-size: 16px;line-height: 25px;}

h1, h2, h3, h4, h5 {
  font-family: 'Kanit', sans-serif;
  letter-spacing: 1px;
  font-weight: 600;
  line-height: normal;}

h1{ color: #000; margin-bottom: 10px;}

strong { letter-spacing: 1px;font-weight: 600; font-size: 14px;}


a:link, a:visited, a:active {text-decoration:none; color:#1162A5;}
a:hover {text-decoration: none; color:#000;}

img {max-width:100%; height: auto;}

header {background-color: #fff;max-width: 100%; height: auto;}

.wrapper {
  text-align: center;
  width: 100%;
  }
.wrap {
    width: 92%;
    margin: 0 auto;
	max-width: 1400px;padding: 40px 0 0 0;
}
.top {
  height: auto;
  box-sizing: border-box;
  width: 100%;
  }
/*===================== 
	header styles 
=======================*/
.header-wrap {
    width: 100%;
    margin: 0;
    background-color: #000000;
    height: auto;
    padding: 80px 0 0 0;
}
.lcolumn {float: left; width: 40%; height: auto;    left: 50px;
    display: inline-block;
    position: relative;
}


/*.lcolumn li a {  background-repeat: repeat-x;
    background-image: linear-gradient(to right,currentColor 100%,currentColor 0);
    background-size: 1px 1px;
    background-position: 0 calc(100% - 0.0em);
}*/



.lcolumn ul{display: inline-block;}
.lcolumn li {font-family: 'Kanit', sans-serif!important;
    float: left;
    margin: 0;
    padding: 0 30px;
    font-size: 40px;
    font-weight: 800;
    line-height: 50px;
    color: #FFFFFF;
    text-transform: uppercase;
    height: auto;
    letter-spacing: -1px;
}
.lcolumn li a{ color: #FFFFFF;}
.lcolumn li a:hover{ color: #C7C7C7}




.rrrcolumn {float: left;  height: auto;    right: 20px;
    display: inline-block;
    position: relative;
}

.rrrcolumn ul{display: inline-block;}
.rrrcolumn li {font-family: 'Kanit', sans-serif!important;
    float: left;
    margin: 0;
    padding: 0 30px;
    font-size: 40px;
    font-weight: 800;
    line-height: 50px;
    color: #FFFFFF;
    text-transform: uppercase;
    height: auto;
    letter-spacing: -1px;
}
.rrrcolumn li a{ color: #FFFFFF;}
.rrrcolumn li a:hover{ color: #C7C7C7}


.mcolumn {float: left; }

.rcolumn {
    float: right;
    width: auto;
    padding: 0;
    position: relative;
    display: inline-block;
    background-color: #FFFFFF;
    height: auto;
    color: #000000;
    font-size: 18px;
    font-weight: 800;
   
    text-align: center;right: 50px;
}
.rcolumn ul{display: inline-block;}
.rcolumn li{float: left; margin:0;padding: 0 30px; font-size: 18px; font-weight: 800;line-height:50px; color:  #000000; text-transform: uppercase; height: auto;letter-spacing: 0px;font-family: 'Kanit', sans-serif!important;}
.rcolumn li a{ color: #000000;}
.rcolumn:hover{  background-color: #C7C7C7}


.rrcolumn {
    float: right;
    /* width: 30%; */
    
    position: relative;
    display: inline-block;
    height: auto;padding: 0 30px 0 0;right: 30px;
}
.rrcolumn li {
    float: left;
    margin: 0;
    padding: 0 20px;
    font-size: 40px;
    font-weight: 700;
    line-height: 50px;
    color: #FFFFFF;
    height: auto;
}

.rrcolumn ul{display: inline-block;}

.rrcolumn li a{ color:  #FFFFFF;}
.rrcolumn li a:hover{ color: #C7C7C7}

.row {width: 100%; }
.row:after {content: "";display: table; clear: both;}
.main-logo {width: 100%;height: auto;margin-right: auto; margin-left: auto;}


/*---nav style---*/
.mrow {width: 100%; border-bottom: #808080 thin solid;box-shadow: 0px 3px 6px 0px #888888; }
.mrow:after {content: "";display: table; clear: both;}
.logocloumn {
    float: left;
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    top: -45px;
    display: block;
    position: relative;
}
.logocloumn img { width: 100%;height: auto;margin-right: auto; margin-left: auto;}
.navcloumn{float: left; width: auto; height: auto;}
.mlogocloumn {display: none}


/*  FOOTER
------------------------------------------------*/

footer { height: auto; display: inline-block;  padding:  30px 0; color: #FFFFFF; background-color: #000000; width: 100%;   } 
footer .foot-nav {list-style: none; margin: 0; }
footer .foot-nav li a {font-size: 12px; font-weight: bold; list-style: none;color: #FFFFFF;}
footer .foot-nav li a:hover {color:#ed1c24;}
footer .foot-nav img {max-width: 100%; padding: 0 0 0 0}
footer .soc-media {width: 100%;font-size: 12px; line-height: 25px; margin-bottom: 25px;}
footer h5{font-size: 14px;color: #FFFFFF;text-transform: uppercase;line-height: 30px;}
footer a {font-size: 12px; font-weight: bold; list-style: none;color: #FFFFFF ;line-height: 25px;}
.right {padding: 0 2% 0 0;}
.columnf {width: 25%;}
.middle {padding: 0 1%;}
.middle  a {color:#FFFFFF}
.middle  a:hover {color:#ed1c24;}
.middle  p {color:#FFFFFF;font-size: 12px;line-height: 16px;letter-spacing: 1px;}
.fco{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box; float: left; padding: 0 20px;}
.fwrap {width: 100%; margin: 0 auto; max-width: 1200px; }
.copyright p span { display: inline-block;font-size: 12px; margin-bottom: 20px;}
* { box-sizing: border-box;}



.divfooter { color: #fff; text-align: left; font-size: 12px; line-height: 20px; transition: all 0.3s;  ; margin-top: 10px; background-color: #1e608f; }
.divfooter a { color: #fff; transition: all 0.3s;font-size: 12px;}
.divfooter a:hover {opacity: 0.6;}
.footertext {text-align: center;padding: 0 ;}
.footertext p {text-align: center;font-size: 12px;font-weight: normal;line-height: normal;}
.footertext a {	text-align: center;	font-size: 12px;font-weight: bold;line-height: normal}
.icons {float: right; width: auto; padding:  0; position: relative; display: inline-block;}
.icons ul{display: inline-block;}
.icons li{float: left; margin:0;padding: 0 5px; font-size: 40px; line-height: 55px; color: #000000;}

/*  end footer
--------------*/



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

.lcolumn li{ font-size: 25px; }

}
@media screen and (max-width: 1643px){
.rrrcolumn li {
    font-size: 25px;
}
}
@media screen and (max-width: 1428px)  {

.lcolumn li {
    float: left;
    margin: 0;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 800;
    line-height: 50px;
    color: #1e608f;
    
    text-transform: uppercase;
    height: auto;
}
.rcolumn li {
    float: left;
    margin: 0;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 800;
    line-height: 50px;
    color: #FFFFFF;
    text-transform: uppercase;
    height: auto;
}
.rrrcolumn li {
    float: left;
    margin: 0;
    padding: 0 30px;
    font-size: 18px;
    font-weight: 800;
    line-height: 50px;
    color: #FFFFFF;
    text-transform: uppercase;
    height: auto;
}
}











@media screen and (max-width: 1350px)  {
/*  FOOTER
------------------------------------------------*/

footer { height: auto; display: inline-block;  padding:  30px 0; color: #FFFFFF; background-color: #1e608f; width: 100%;   } 
footer .foot-nav {list-style: none; margin: 0; }
footer .foot-nav li a {font-size: 12px; font-weight: bold; list-style: none;color: #FFFFFF;}
footer .foot-nav li a:hover {color:#5488c4;}
footer .foot-nav img {max-width: 100%; padding: 0 0 0 0}
footer .soc-media {width: 100%;font-size: 12px; line-height: 25px; margin-bottom: 25px;}
footer h5{font-size: 14px;color: #FFFFFF;text-transform: uppercase;line-height: 30px;}
footer a {font-size: 12px; font-weight: bold; list-style: none;color: #FFFFFF ;line-height: 25px;}
.right {padding: 0 2% 0 0;}
.columnf {width: 25%;}
.middle {padding: 0 1%;}
.middle  a {color:#FFFFFF}
.middle  a:hover {color:#5488c4;}
.middle  p {color:#FFFFFF;font-size: 12px;line-height: 16px;letter-spacing: 1px;}
.fco{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box; float: left; padding: 0 20px;}
.fwrap {width: 100%; margin: 0 auto; max-width: 1200px; }



}



@media screen and (max-width: 1340px)  {
.header-wrap {
    width: 100%;
    margin: 0;
	background-color: #000000;
    height: auto;
    padding:  30px 50px;
}

.lcolumn {display: none;}

.rcolumn {display: none;}

.rrcolumn {display: none;}

.mcolumn {display: none;}

.mmcolumn {display:block;}
.mlogocloumn {
    background-color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mlogocloumn img { width: 100%;height: auto;margin-right: auto; margin-left: auto; }	
	
}






@media screen and (max-width: 1212px)  {
/*===================== 
	header styles 
=======================*/
.lcolumn li{ font-size: 16px; font-weight: 700; }
/*  FOOTER
------------------------------------------------*/
footer { padding:  30px 0;   } 
footer .foot-nav li a {font-size: 12px; }
.right {padding: 0 2% 0 0;}
.columnf {width: 25%;}
.middle {padding: 0 1%;}
.fco{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box; box-sizing: border-box; float: left; padding: 0 20px;}
.fwrap {width: 100%; margin: 0 auto; }
.copyright p span { display: inline-block;font-size: 12px; margin-bottom: 20px; padding: 0 20px;}
.divfooter {padding: 0 20px; }
}


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

/*  FOOTER
------------------------------------------------*/
footer .soc-media { float: right;}
.fco{ padding: 0 }
.fwrap {width: 100%; margin: 0 auto; max-width: 900px; }

}



@media screen and (max-width: 966px)  {
.container{margin: 35px 50px 0;}
}



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

/*  FOOTER
------------------------------------------------*/
.right {padding: 0 2% 0 0;}
.columnf {width: 100%; padding-bottom: 20px}
.middle {padding: 0 1%;}
.fwrap {width: 100%; margin: 0 auto; max-width: 400px; }

}



@media screen and (max-width: 857px)  {
.container{margin: 35px 20px 0;}
	
.wrap {
    width: 100%;
    margin: 0 auto;
	max-width: 1400px;padding: 40px 0 0 0;
}
}



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

/*===================== 
	header styles 
=======================*/

.lcolumn {float: left; width: auto; height: auto;}
}


@media only screen and (min-width: 768px){
.flt-right {   float: right;}
.copyright {   text-align: left;}
}


		
@media screen and (max-width: 550px)  {	
	
/*===================== 
	header styles 
=======================*/

.lcolumn li{padding: 0 20px; }
.mcolumn {float: left; width: 50%;}
.rcolumn li{padding: 0 20px; }
.rrcolumn li{padding: 0 20px; }

}

@media screen and (max-width: 428px)  {	
	
/*===================== 
	header styles 
=======================*/
.lcolumn li{padding: 0 15px; font-size: 16px;  line-height: 30px; ;}
.rcolumn li{padding: 0 15px; font-size: 12px; line-height:30px; }

.rrcolumn li{padding: 0 15px; font-size: 12px; line-height:30px; }

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

/*  FOOTER
------------------------------------------------*/
.right {padding: 0 2% 0 0;}
.columnf {width: 100%; padding-bottom: 20px}
.middle {padding: 0 1%;}
.fwrap {width: 100%; margin: 0 auto; max-width: 280px; }

}

@media screen and (max-width: 368px)  {	
/*===================== 
	header styles 
=======================*/
.lcolumn {float: left; width: 100%; height: auto; text-align: center; border-bottom: #FFFFFF thin solid;}
.lcolumn li{float: left; margin:0;padding: 0 30px;  border-right: none; text-transform: uppercase;height: auto; text-align: center;}
.mcolumn {float: left; width: 0}
.rcolumn {float: right; width: 50%; text-align: center;}
.rcolumn li{float: left; margin:0;padding: 0 20px; border-right: none;}
.rrcolumn {float: right; width: 50%; text-align: center; }
.rrcolumn li{float: left; margin:0;padding: 0 20px; border-right: none; border-left: none;}




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

/*  FOOTER
------------------------------------------------*/
.right {padding: 0 2% 0 0;}
.columnf {width: 100%; padding-bottom: 20px}
.middle {padding: 0 1%;}
.fwrap {width: 100%; margin: 0 auto; max-width: 220px; }
footer .foot-nav li a {font-size: 10px; }
footer .soc-media {font-size: 10px; }
footer h5{font-size: 12px;line-height: 30px;}
footer a {font-size: 10px; line-height: 20px;}
.middle  p {font-size: 10px;line-height: 14px;}


}