@charset "UTF-8";
/* CSS Document */

/* ใช้ Google Font Noto Sans Thai แทนฟอนต์ไฟล์เก่า */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;600;700&display=swap');

/* html,body{width:100%; height:100%;} */
html {
  width: 100%;
  overflow: visible;
}

body {
  width: 100%;
  height: 100%;
  background: #FFFFFF;
  color: #0b1d37;
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans Thai', Verdana, Geneva, sans-serif;
  font-size: 22px;
  line-height: 1em;
  position: relative;
  -webkit-font-smoothing: antialiased;
}

img { border:none; display:block; }
ul, li { margin:0; padding:0; list-style:none; }

a {
  color:#2c5482;
  text-decoration:none;
  transition:0.4s ease;
  outline: none;
}
a:hover { transition:0.2s ease; }

/* ================================
   TYPOGRAPHY – UX READABILITY v2
   ================================ */

body {
  font-size: 18px;          /* ตัวเล็กลงนิดนึงแต่โปร่งขึ้น */
  line-height: 1.7;         /* ระยะบรรทัดห่างขึ้น */
  letter-spacing: 0;        /* ไม่บีบ/ไม่ถ่างตัวอักษร */
}

/* หัวข้อหลัก / รอง */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 0.4em;
  font-weight: 500;         /* หนักขึ้นนิด อ่านง่ายบนพื้นขาว */
}

/* paragraph ทั่วไป */
p {
  font-size: 1rem;          /* ~18px ตาม body */
  line-height: 1.8;
  padding-top: 0.7em;
  padding-bottom: 0.7em;
}

/* ข้อความในสไลด์หน้าแรก */
.slider article h2 {
  font-size: 2.1rem;        /* ~38px */
  line-height: 1.4;
  margin-bottom: 0.4em;
}

.slider article p {
  font-size: 1rem;
  line-height: 1.8;
  max-width: 32rem;         /* ไม่ให้ยาวเต็มจอเกินไป */
  padding-bottom: 1.2em;
  padding-right: 0;
}

/* บล็อก Services + Vision + About ให้โปร่งเป็นพิเศษ */
.services-present .type h2 {
  font-size: 2.1rem;
  line-height: 1.4;
}

.services-present .type p {
  font-size: 1rem;
  line-height: 1.9;
}

.vision-present .fixwidth section p,
.about-present .type p {
  font-size: 1rem;
  line-height: 1.9;
  max-width: 38rem;
}

/* ฟอร์ม – กันตัวหนังสือแนบขอบ */
input[type=text],
.form-style textarea {
  line-height: 1.5;
}


.fixwidth {
  max-width:1280px;
  margin:0 auto;
  min-width:300px;
}

.col100{width:100%;}
.col90{width:90%; float:left;}
.col80{width:80%; float:left;}
.col70{width:70%; float:left;}
.col60{width:60%; float:left;}
.col50{width:50%; float:left;}
.col40{width:40%; float:left;}
.col30{width:30%; float:left;}
.col20{width:20%; float:left;}
.col10{width:10%; float:left;}
.col33{width:33.3333%; float:left;}
.col15{width:15%; float:left;}
.col25{width:25%; float:left;}
.col35{width:35%; float:left;}
.col45{width:45%; float:left;}
.col55{width:55%; float:left;}
.col65{width:65%; float:left;}
.col75{width:75%; float:left;}
.col85{width:85%; float:left;}

.clearfix { clear:both !important; }

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

.border-links {
  display:inline-block;
  padding:0.5em 1em;
}
.border-links.white {
  border:1px solid #FFFFFF;
  color:#FFF;
}
.border-links.white:hover {
  background:#FFFFFF;
  color:#2d5582;
}
.border-links.blue {
  border:1px solid #2d5582;
  color:#2c5482;
}
.border-links.blue:hover {
  background:#2d5582;
  color:#FFFFFF;
}

.border-style {
  position:absolute;
  display:block;
  top:0;
  width:1px;
  height:100%;
  background:#cccccc;
  border:none;
  margin:0;
  padding:0;
}
.border-style.left-side  { left:0; }
.border-style.right-side { right:0; }

.border-style:before,
.border-style:after {
  content:' ';
  display:block;
  width:20px;
  background:#cccccc;
  height:1px;
  position:absolute;
}
.border-style:before { top:0; }
.border-style:after  { bottom:0; }
.border-style.left-side:before  { left:0; }
.border-style.right-side:before { right:0; }
.border-style.left-side:after   { left:0; }
.border-style.right-side:after  { right:0; }

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

header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100px;
  color:#FFFFFF;
  z-index:9999;
}
header .fixwidth { position:relative; }

header .logo {
  position:absolute;
  top:20px;
  left:0;
}
header .logo .white  { display:block; }
header .logo .colour { display:none; }

header nav a {
  color:#fff;
  display:block;
}
header nav ul {
  float:right;
  padding-top:3em;
}
header nav li {
  float:left;
  margin:0 0 0 1.2em;
  font-size:1.2em;
  position:relative;
}
header nav li:after {
  content:' ';
  display:block;
  width:0;
  height:1px;
  background:#FFF;
  bottom:0px;
  transition:0.4s ease;
}
header nav li:hover:after,
header nav li.current:after {
  width:100%;
  transition:0.4s ease;
}

header .mobile-menu {
  height:40px;
  width:40px;
  background:none;
  border:1px solid #FFFFFF;
  position:absolute;
  top:1.5em;
  right:1.5em;
  z-index:999;
  line-height:8px;
  cursor:pointer;
  display:none;
}
header .mobile-menu span {
  width:22px;
  display:inline-block;
  margin:2px 0;
  background:#FFFFFF;
  height:3px;
}
#pages header .mobile-menu span { background:#163d6b; }

header .mobile-menu.active { background:#FFFFFF; }
header .mobile-menu.active span { background:#163d6b; }

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

#pages h1 { color:#FFFFFF; }

.cover {
  height:240px;
  background:#163d6b;
}
.cover .fixwidth { padding-top:150px; }

.tree-nav ul { overflow:hidden; }
.tree-nav li {
  float:left;
  margin-right:0.5em;
  position:relative;
}
.tree-nav li,
.tree-nav li a {
  color:#FFF;
  display:block;
}
.tree-nav li.last:after {
  content:' ';
  display:block;
  position:absolute;
  top:12px;
  left:0;
  height:1px;
  width:3000px;
  background:#FFF;
}

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

#pages:before {
  content:' ';
  display:block;
  height:100px;
  width:100%;
}

#pages .fixcontent{}
#pages .fixcontent h1,
#pages .fixcontent h2,
#pages .fixcontent h3,
#pages .fixcontent h4,
#pages .fixcontent h5,
#pages .fixcontent h6 {
  line-height:1.3em;
}

#pages header {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100px;
  color:#FFFFFF;
  background:#FFFFFF;
}
#pages header .fixwidth { position:relative; }
#pages header .logo {
  position:absolute;
  top:20px;
  left:0;
}
#pages header nav a {
  color:#2d5582;
  display:block;
}
#pages header nav ul {
  float:right;
  padding-top:3em;
}
#pages header nav li {
  float:left;
  margin:0 0 0 1.2em;
  font-size:1.1em;
  position:relative;
}
#pages header nav li:after {
  content:' ';
  display:block;
  width:0;
  height:1px;
  background:#2d5582;
  bottom:0px;
  transition:0.4s ease;
}
#pages header nav li:hover:after,
#pages header nav li.current:after {
  width:100%;
  transition:0.4s ease;
}

#pages header .logo .white  { display:none; }
#pages header .logo .colour { display:block; }

#pages header .language li { background:#2d5582; }
#pages header .language li:hover { background:#2d5582; }
#pages header .language li:hover a { color:#FFFFFF; }
#pages header .language li:first-of-type {
  background:none;
  color:#2d5582;
}
#pages header .language li:first-of-type a {
  color:#2d5582;
  white-space: pre;
}
#pages header .language a { color:#FFFFFF; }
#pages header .language:after { border:1px solid #2d5582; }

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

header .language {
  position:absolute;
  top:1em;
  right:0;
  width:150px;
  text-align:left;
}
header .language li {
  background:#FFFFFF;
  display:none;
  height:30px;
  line-height:30px;
  transition:0.4s ease;
}
header .language li:hover {
  background:#2d5582;
  transition:0.4s ease;
}
header .language li:hover a { color:#FFFFFF; }
header .language li:first-of-type {
  background:none;
  display:block;
  border:none;
}
header .language li:first-of-type a {
  color:#FFFFFF;
  white-space: pre;
}
header .language a {
  color:#2d5582;
  display:block;
  padding:0 30px 0 10px;
}

header .language:hover li { display:block; }
header .language:hover:after {
  background:#2d5582;
  transition:0.4s ease;
}
header .language:after {
  content:' ';
  display:block;
  position:absolute;
  top:5px;
  right:5px;
  width:20px;
  height:20px;
  background:#FFFFFF;
  border-radius:24px;
  transition:0.4s ease;
}

.slider {
  background:#163d6b;
  height:500px;
  color:#FFFFFF;
}
.slider article {
  width:540px;
  height:auto;
  padding-top:200px;
}
.slider article h2 { line-height:0.9em; }
.slider article h2 p { padding:0; }
.slider article p {
  padding-bottom:2em;
  padding-right:150px;
}

.slides-navigation .next { right:1em; }
.slides-navigation .prev { left:1em; }

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

footer {
  margin:0;
  padding:0;
  position:relative;
}
footer img {
  padding-right:1em;
  margin:1em 1em 1em 0;
  float:left;
  border-right:1px dashed #cccccc;
}
footer .wrap {
  float:left;
  padding-top:1em;
}
footer article {
  background:#2c5482;
  color:#FFFFFF;
  font-size:0.85em;
}
footer nav { font-size:0.9em; }
footer nav li { display:inline-block; }
footer span {
  font-size:0.75em;
  line-height:0.4em;
}

footer .footer-quote {
  position:relative;
  height:150px;
  overflow:hidden;
}
footer .footer-quote .paragraph-1 {
  float:left;
  width:260px;
  padding:20px;
  margin-right:3em;
  position:relative;
}
footer .footer-quote .paragraph-1 h4 {
  position:relative;
  z-index:2;
  padding:0;
  margin:0.5em 0 0 0;
  font-size:1.2em;
}
footer .footer-quote .paragraph-1 p {
  position:relative;
  z-index:2;
  padding:0;
  margin:0.5em 0;
}
footer .footer-quote .paragraph-1 .bg-darkblue {
  position:absolute;
  height:200%;
  width:2000px;
  top:0;
  right:0;
  background:#163d6b;
}

footer .footer-quote .paragraph-2 { padding-right:200px; }
footer .footer-quote .paragraph-2 p {
  padding:3em;
  margin:0;
}
footer .footer-quote .social {
  position:absolute;
  top:3em;
  right:0;
  width:200px;
}
footer .footer-quote .social .fb,
footer .footer-quote .social .tt,
footer .footer-quote .social .rss,
footer .footer-quote .social .gg {
  background:url('../images/social.gif');
  width:28px;
  height:28px;
  margin:0 0.5em;
  display:inline-block;
  transition:0s ease;
}
footer .footer-quote .social .fb        { background-position:0 0; }
footer .footer-quote .social .fb:hover { background-position:0 -28px; transition:0s ease; }
footer .footer-quote .social .tt        { background-position:-28px 0; }
footer .footer-quote .social .tt:hover { background-position:-28px -28px; transition:0s ease; }
footer .footer-quote .social .rss        { background-position:-56px 0; }
footer .footer-quote .social .rss:hover { background-position:-56px -28px; transition:0s ease; }
footer .footer-quote .social .gg        { background-position:-84px 0; }
footer .footer-quote .social .gg:hover { background-position:-84px -28px; transition:0s ease; }

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

.services-present { position:relative; }
.services-present:before {
  content:' ';
  display:block;
  background:url('../images/graphic-fade-1.png') no-repeat top;
  width:760px;
  height:61px;
  position:absolute;
  top:0;
  right:0;
}
.services-present section { overflow:hidden; }
.services-present section:first-of-type { background:#FFFFFF; }
.services-present section:first-of-type { text-align:left; }
.services-present section:first-of-type img { float:left; }
.services-present section {
  background:#edeef0;
  text-align:right;
}
.services-present section img { float:right; }
.services-present .fixwidth {
  min-height:300px;
  position:relative;
}
.services-present .type {
  width:470px;
  padding:1em;
  margin:2em 6em;
  position:absolute;
  top:0;
}
.services-present .type p { margin:0.5em 0; }
.services-present .type.right-side { right:4em; }
.services-present .type.left-side  { left:4em; }

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

.vision-present {
  background:url('../images/pattern-graphic-1.gif') top center repeat;
  background-attachment:fixed;
  min-height:580px;
  padding-top:100px;
}
.vision-present .fixwidth { max-width:1100px; }
.vision-present .fixwidth section {
  text-align:center;
  position:relative;
  margin-top:130px;
  padding-bottom:1em;
}
.vision-present .fixwidth section h3 {
  position:relative;
  color:#2d5582;
  width:120px;
  margin:0 auto;
  font-size:1.4em;
  box-sizing:border-box;
}
.vision-present .fixwidth section p {
  padding:0 1.5em;
  margin:1em 0;
}
.vision-present .fixwidth section img {
  display:inline-block;
  width:186px;
  height:187px;
  margin-top:-120px;
}

.vision-present .border-links {
  text-align:center;
  display:block;
  max-width:33.333333%;
  margin:0 auto;
  margin-bottom:3em;
}

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

.about-present {
  height:600px;
  background:url('../images/content/main-about.jpg');
  background-size:cover;
  overflow:hidden;
  position:relative;
}
.about-present:before {
  content:' ';
  display:block;
  background:url('../images/graphic-fade-2.png');
  height:9px;
  width:100%;
  top:0;
}
.about-present .type {
  width:620px;
  float:right;
  padding-top:8em;
}
.about-present .type p,
.about-present .type a { /* margin-left:230px; */ }
.about-present .type p { padding:0 0 1em 0; }

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

#pages .vision {
  background:url('../images/pattern-graphic-1.gif') top center repeat;
  background-attachment:fixed;
}
#pages .vision section {
  text-align:center;
  margin:2.5em 0;
  padding:0 1em;
  box-sizing:border-box;
}
#pages .vision section img { display:inline-block; }
#pages .vision section h2 {
  font-size:1.6em;
  padding-top:0.5em;
}
#pages .vision section p {
  padding:1em 4em;
}
#pages .vision {}

#pages .profile {
  background:url('../images/content/about-content-1.jpg') top center no-repeat;
  background-size:cover;
  min-height:600px;
  padding-bottom:2em;
}
#pages .profile .wrap {
  padding-left:50%;
  position:relative;
  padding-top:6em;
}
#pages .profile .wrap:after {
  content:' ';
  display:block;
  height:1px;
  width:100%;
  clear:both;
}

#pages .profile .wrap .paragraph1 h3 {
  margin-left:-100px;
  padding-right:100px;
}
#pages .profile .wrap .paragraph2 { padding:2em 0 0 0; }
#pages .profile .wrap .paragraph3 h3 { margin:0; }
#pages .profile .wrap .paragraph4 {
  position:absolute;
  bottom:0em;
  left:0;
  width:50%;
}
#pages .profile .wrap .paragraph4 p { padding:0 2em; }

#pages .profile .wrap .paragraph1 p,
#pages .profile .wrap .paragraph1 h2,
#pages .profile .wrap .paragraph2 p,
#pages .profile .wrap .paragraph2 h2,
#pages .profile .wrap .paragraph3 p,
#pages .profile .wrap .paragraph3 h2,
#pages .profile .wrap .paragraph4 p,
#pages .profile .wrap .paragraph4 h2 {
  padding-bottom:0em;
}

#pages .profile .wrap h2,
#pages .profile .wrap h3 {
  line-height:1em;
}

#pages .quote {
  background:url('../images/content/about-content-2.jpg') top right no-repeat;
  background-size:cover;
  padding:10em 0;
}
#pages .quote .wrap {
  position:relative;
  padding:3em;
  width:500px;
}
#pages .quote .wrap h2 { font-size:1.8em; }

#pages .products-meterial { overflow:hidden; }
#pages .products-meterial section {
  position:relative;
  height:230px;
}
#pages .products-meterial section img {}
#pages .products-meterial section .type {
  position:absolute;
  top:20px;
  right:2em;
  width:300px;
}
#pages .products-meterial section .type h2 { font-size:1.8em; }
#pages .products-meterial section .type p {
  padding:0 0 0.5em 0;
}

#pages .products-quote {
  background:url('../images/content/products-content-5.jpg') bottom center no-repeat;
  background-size:cover;
  min-height:600px;
}
#pages .products-quote h1,
#pages .products-quote h2,
#pages .products-quote h3,
#pages .products-quote h4,
#pages .products-quote h5,
#pages .products-quote p {
  padding:0 0 0.5em 0;
}
#pages .products-quote .wrap {
  width:600px;
  padding:6em 0;
}

#pages .products-quote .wrap ul {
  padding-left:1em;
  font-size:25px;
}
#pages .products-quote .wrap ul li {
  list-style-type:disc;
}

#pages .products-detail { display:none; }
#pages .products-detail img { margin:3em auto; }
#pages .vbox-content h3 { padding-top:1em; }

#pages .faqs.fixwidth ul { padding-left:300px; }

#pages .faqs ul { padding:3em 0; }
#pages .faqs ul li {
  border-bottom:1px solid #2c5482;
  padding:2em 0;
}
#pages .faqs ul li h3 { font-size:1.4em; }
#pages .faqs ul li p { padding:0.5em 0; }

.form-style div .comment { padding-left:300px; }
.form-style div .address ul { padding:0 0 0 3em; }

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

.form-style div {
  padding:0.5em 0;
}
.form-style div label {
  width:280px;
  display:block;
  float:left;
  font-size:1em;
  padding:10px 1em 0 0;
  text-align:right;
}

/* ใช้ Noto Sans Thai กับฟอร์ม */
input[type=text] {
  height:40px;
  width:300px;
  border:none;
  background:#EAEAEA;
  padding:0 1em;
  font-size:1em;
  font-weight:lighter;
  font-family:'Noto Sans Thai', Arial, Helvetica, sans-serif;
  border-left:3px solid #EAEAEA;
  color:#666;
  outline: none;
}
.form-style textarea {
  border:none;
  width:300px;
  height:100px;
  background:#EAEAEA;
  padding:1em;
  font-size:1em;
  font-family:'Noto Sans Thai', Arial, Helvetica, sans-serif;
  color:#666;
  outline: none;
}
.form-style label { vertical-align:middle; }

input[type=text]:focus { background:#f1f1f1; }

.formalert input[type=text],
.formalert textarea { background:#fbc5ca; }

input[type=text].hilight  { border-left:3px solid #163d6b; }
textarea.hilight          { border-left:3px solid #163d6b; }

.button-style1 {
  height:40px;
  line-height:40px;
  padding:0 1em;
  border:none;
  font-size:1em;
  font-family:'Noto Sans Thai', Arial, Helvetica, sans-serif;
  border:1px solid #163d6b;
  color:#163d6b;
  cursor:pointer;
  background:none;
  transition:0.4s ease;
}
.button-style1:hover {
  background:#163d6b;
  color:#FFFFFF;
}

.show_map {
  background:url('../images/map_icon.png') no-repeat;
  background-position:10px 8px;
  padding-left:40px;
}
.show_map:hover {
  background:#163d6b url('../images/map_icon-hover.png') no-repeat;
  background-position:10px 8px;
}

#contact .form-style { padding-top:4em; }
#contact .form-style .comment {
  border-left:3px solid #ee1a30;
  padding-left:20px;
  height:30px;
  line-height:30px;
  margin-left:218px;
}

#contact .form-style .address { padding:0 6em; }
#contact .form-style .address p {
  background:#fff;
  font-size:1.4em;
  padding:0 0 0.5em 0;
}
#contact .form-style .address .lists { text-align:right; }
#contact .form-style .address h5 strong { color:#ee1a30; }
#contact .form-style .address p {
  font-size:1em;
  margin:0;
  padding:0 0 1em 0;
}
#contact .form-style .address .lists span {
  display:inline-block;
  width:150px;
}
#contact .form-style .address sup { font-size:0.5em; }

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

.coming-soon {
  background:url('../images/pattern-graphic-1.gif') top center repeat;
  background-attachment:fixed;
  min-height:500px;
}
.tone-softblue { color:#8da6c4; }
.tone-midblue  { color:#163d6b; }

.underline-style {
  display:inline-block;
  position:relative;
}
.underline-style:after {
  content:' ';
  display:block;
  position:absolute;
  bottom:5px;
  width:100%;
  height:2px;
  background:#163d6b;
}

/* ================================
   TYPOGRAPHY – UX READABILITY FIX
   ================================ */

/* ฐานตัวหนังสือทั้งเว็บ */
body {
  font-size: 18px;          /* เดิม 22px – ลดให้พอดีสายตา */
  line-height: 1.6;         /* เพิ่มระยะบรรทัด */
  letter-spacing: 0.01em;   /* เว้นตัวอักษรเล็กน้อย */
}

/* หัวข้อ */
h1, h2, h3, h4, h5, h6 {
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.35em;
}

/* ย่อหน้าเนื้อหา */
p {
  line-height: 1.6;
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}

/* ข้อความในสไลด์หน้าแรก – ปรับให้โปร่งขึ้น */
.slider article h2 {
  line-height: 1.3;
  margin-bottom: 0.4em;
}

.slider article p {
  line-height: 1.6;
  padding-bottom: 1.2em;
  padding-right: 0;   /* กันข้อความไปชนขอบขวาเกินไป */
}

/* บล็อคที่เป็น text block ยาว ๆ */
.services-present .type p,
.vision-present .fixwidth section p,
.about-present .type p {
  line-height: 1.7;
}

/* ฟอร์ม – ให้ตัวหนังสือไม่ติดขอบด้านบนเกินไป */
input[type=text],
.form-style textarea {
  line-height: 1.4;
}