body {font-family: "Bai Jamjuree", Arial, Helvetica, sans-serif; margin: 0; padding: 0;}

#width {position: fixed; top: 0; z-index: 20; padding: 0 3px; font-size: 11px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; background-color: #FF0;}
a, a:visited, a:hover {outline: none; color: #2E3FE1;} a {text-decoration: none; cursor: pointer;} a, *:hover {-webkit-tap-highlight-color: transparent;}
img {border: 0; image-rendering: -webkit-optimize-contrast;} #phone a {white-space: nowrap;}
.phlink {color: inherit !important; text-decoration: none !important; white-space: nowrap;} .phlink:hover {cursor: text;}

/*-----------------------------------------------*/

/*HEADER*/

#header {position: relative;} #header table {padding: 12px; position: relative; width: 100%;} #header table td {vertical-align: middle;}
#logo {padding-right: 0;} #logo img {width: 300px; height: 41px;}
#phone {text-align: center; font-size: 26px; line-height: 30px; font-weight: 600; vertical-align: middle !important; text-align: right; padding-bottom: 3px;}
#phone a {text-decoration: none;}
h1 {font-weight: 600; text-align: center; font-size: 18px; line-height: 22px; padding: 0 15px; margin: auto;}
h1 span {display: block;}
.h1_2 {font-size: 15px; line-height: 20px; font-weight: 600; text-align: center; margin: 3px 15px 0 15px; text-transform: uppercase; color: #1F5DA7;}

@media (max-width: 975px) {.h1_2 span {display: block;}}
@media (max-width: 900px) {h1 span {display: inline;}}
@media (max-width: 800px) {.h1_2 span {display: inline;}}
@media (max-width: 780px) {
#logo img {width: 250px; height: 34px;} #phone {font-size: 24px; line-height: 28px;}
h1 {font-size: 16px; line-height: 19px; padding: 0 10px;} .h1_2 {font-size: 14px; line-height: 18px;} .h1_2 span {display: block;}
}
@media (max-width: 720px) {
.h1_2 span {display: inline;} #logo img {width: 200px; height: 27px;}
#phone {font-size: 22px; line-height: 26px;} h1 {font-size: 15px; line-height: 19px; padding: 0 8px;}
}
@media (max-width: 645px) {h1 {font-size: 15px; line-height: 18px;} .h1_2 {font-size: 13px; line-height: 17px;}}
@media (min-width: 631px) {#logo {padding-top: 5px;}}
@media (max-width: 630px) {
#header table {width: 100%; margin: 0 auto;} #header table td {display: block;}
#logo, h1, #phone {padding-left: 0; padding-right: 0;} #logo {width: auto; text-align: center;} #logo img {width: 280px; height: 38px;}
h1 {padding: 10px 5px 0 5px;} h1 span {display: block;} .h1_2 {margin: 3px 10px 8px 10px;}
#phone {font-size: 24px; line-height: 28px; text-align: center;}
}
@media (max-width: 465px) {.h1_2 span {display: block;}} @media (max-width: 360px) {h1 span {display: inline;}}
@media (max-width: 325px) {#logo img {width: 255px; height: 35px;}}

/*-----------------------------------------------*/

/*MENU*/

#nav a:hover {background: none;} #menu, .js #menu, .slicknav_menu {display:none;}

#nav {text-align: center; position: relative; width: 100%} #nav, #nav a {height: 45px; -webkit-tap-highlight-color:transparent;}
#nav ul {margin: 0; padding: 0;} #nav li {display: inline-block; margin-left: -4px;}
#nav li, #nav a {list-style:none; vertical-align: middle;}
#nav a {display: table-cell; font-size: 18px; line-height: 21px; font-weight: 400; text-transform: uppercase; padding: 0px 20px 3px 20px; transition: 0.35s;}
#nav a.selected:hover {text-decoration: none;}

@media (max-width: 455px) {#nav a {padding: 0 15px 2px 15px}} @media (max-width: 410px) {#nav a {padding: 0 12px 2px 12px}}

@media (max-width: 375px) {
#nav {display: none;}

/*menu button*/
.slicknav_menu {display:block; position: relative; width: 100%; z-index: 100; padding: 0px; text-align: center;}
.slicknav_menu .slicknav_icon-bar {display: block; width: 1.425em; height: 0.125em;}
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {margin-top: 0.3em;}
.slicknav_btn {position: relative; display: inline-block; vertical-align: middle; padding: 0.38em; cursor: pointer; margin: 5px 5px 6px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;}
  
/*menu content*/
.slicknav_nav {margin: 0; padding: 0; list-style:none; overflow: hidden;}
.slicknav_nav a {display: block; padding: 5px 10px 8px 10px; text-decoration: none;}
.slicknav_menu li, .slicknav_menu li a {font-size: 18px; line-height: 24px; text-transform: uppercase;}
.slicknav_nav a.bordbtm {border-bottom: none !important;}

#mobilemenuarea {width: 100%;} #mobileback {visibility: hidden !important;}
.slicknav_btn {margin-bottom: 5px;} .slicknav_nav {box-shadow: 0 0 0 0; padding-top: 0;}
}

/*-----------------------------------------------*/

/*TOP PIC*/

#toppic {position: relative; max-height: 320px; max-width: 1000px; overflow: hidden; display: flex; align-items: center; background-color: #E9E1CC;}
#toppic img {width: 500px; height: 320px; width: 100vw; height: auto; max-width: 1000px;}
@media (min-width: 501px) {#toppic {height: 34vw;}} @media (max-width: 500px) {#toppic {height: 50vw;}}

/*-----------------------------------------------*/

/*BODY AREA*/

#bodyback, #bodyarea {position: relative;}
@media (min-width: 1018px) {#bodyback {margin: 10px auto auto auto; width: 1000px; padding: 0px; box-shadow: 0px 0px 30px 5px #000;}}
@media (max-width: 1019px) {#bodyback {margin: 0 auto auto auto;}}
	
#bodyhead {font-size: 24px; line-height: 27px; font-weight: 600; text-align: center;}
#bodyarea {padding: 20px 20px 20px 20px;} #bodyarea, h2 {font-size: 20px; line-height: 28px; font-weight: 400 !important;}

@media (max-width: 510px) {#bodyarea {padding: 15px 20px 35px 20px;} #bodyhead span {display: block;}}
@media (max-width: 425px) {#bodyarea, h2 {font-size: 19px; line-height: 26px;}}
@media (max-width: 315px) {#bodyhead {font-size: 22px; line-height: 26px;} #bodyhead span {display: inline;}}
@media (max-width: 300px) {#bodyarea, h2 {font-size: 18px; line-height: 25px;}}

h3 {font-size: 18px; line-height: 23px; margin: 0; padding: 2px 0 0 0; font-weight: 600; text-align: center; color: #000;}
.heading {font-weight: 600; font-size: 1.15em; line-height: 1.25em;}

/*-----------------------------------------------*/

/*Page Pics*/
.pagepic {margin-top: 35px; text-align: center; font-size: 0.85em;} .pagepic p {margin: -8px 0 0 0; padding: 0;}
.pagepic img {width: 100%;} .pictall img {max-width: 380px;}
.picleft {float: left; margin: 5px 20px 10px 0;} .picright {float: right; margin: 5px 0 10px 20px;} .piccenter {text-align: center;}

@media (min-width: 805px) {.picwide img {width: 500px;} .picwide.piccenter {display: none;}}
@media (max-width: 804px) {
.picwide img {max-width: 600px;} .picwide.picleft, .picwide.picright {display: none;}
.picwide.piccenter {width: 100%; margin: 20px auto 10px auto;}
}
@media (min-width: 681px) {.pictall.piccenter {display: none;}}
@media (max-width: 680px) {.pictall.picleft, .pictall.picright {display: none;} .pictall.piccenter {width: 100%; margin: 20px auto 10px auto;}}

/*-----------------------------------------------*/

/*BOTTOM AREA*/

.nolink, .bottomtext a {color: inherit !important; text-decoration: none !important; cursor: text;}

#bottomarea {background-color: #FEFDDD; font-size: 12px; line-height: 21px; width: 100%; padding: 5px 0 12px 0; text-align: center; border-top: 1px solid #faee9d; font-family: Arial, Helvetica, sans-serif;}
#bottomarea, #bottomarea a, .web a {color: #666666;}
#btm_menu {font-size: 14px; line-height: 24px; margin: 3px 0 10px 0;}
#btm_menu a {text-decoration: underline; text-transform: uppercase;} #btm_menu span {padding: 0 5px;}
.subzero {margin: 10px auto;} .tblogo {vertical-align: middle;}

@media (max-width: 505px) {.subzero {line-height: 1.45;} .subzero span {display: block;}}
@media (max-width: 450px) {.lic span {display: block; margin-bottom: 10px;} #bottomarea {line-height: 18px !important;}}
@media (max-width: 305px) {.coname, .city, .web a {display: block;}}

@media (max-width: 330px) {
#bottomarea {line-height: 18px; padding-top: 0;}
#btm_menu a {display: block; font-size: 16px; line-height: 38px; text-decoration: none;}
#btm_menu span {display: none;} #btm_menu a:hover {text-decoration: underline;}
#btm_menu {margin: 0 0 10px 0; padding: 5px 0; background-color:#faee9d;}
}

/*====================================================*/

/*COLORS*/

body {background-color: #000000;} @media (min-width: 1018px) {body {background: #000000 url('../back.jpg') repeat;}}

#bodyback, #bodyarea {background-color: #FFF;} #header {background-color: #F1EBAA;}
body {color: #1A1A1A;} a, a:visited, a:hover {color: #2a4ad8;}
#phone, #phone a, #bodyhead {color: #1F5DA7;} #header h1 {color: #1A1A1A;}
@media (max-width: 1019px) {#header {border-top: 6px solid #144580;}}

#nav, #nav ul, #nav li, #mobileback, #mobilemenuarea, .slicknav_menu, .slicknav_btn {background-color: #144580;}
#nav a, .slicknav_menu a, .slicknav_menu .slicknav_menutxt, .slicknav_nav, .slicknav_nav a {color: #FFF;}
#nav a.selected, #nav a.selected:hover, .slicknav_menu a.selected, .slicknav_menu a.selected:hover {background-color: #092a51; color: #F1EBAA;}
#nav a:hover, .slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover {background-color: #2D62A2;}

.slicknav_nav {background-color: #144580;}
.slicknav_menu .slicknav_icon-bar {background-color: #FFF;}
.slicknav_menu a.selected, .slicknav_menu a.selected:hover {background-color: #0d315c; color: #FFF; font-weight: 400 !important;}
.slicknav_nav .slicknav_row:hover, .slicknav_nav a:hover {background: #2D62A2;}
.slicknav_nav, .slicknav_nav a {color: #FFFFFF; font-weight: 400 !important;}
.slicknav_nav li {border-top: 1px dotted #5082BE;}

@media (max-width: 375px) {.slicknav_menu {background-color: #144580;}}