@import 'https://fonts.googleapis.com/css?family=Prompt:400,400i,500,500i,600,600i,700,700i&subset=thai';
 
@font-face {
  font-family: 'db_helvethaica';
  src: url("fonts/db_helvethaica_x_med_cond_v3.2-webfont.eot");
  src: url("fonts/db_helvethaica_x_med_cond_v3.2-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/db_helvethaica_x_med_cond_v3.2-webfont.woff2") format("woff2"), url("fonts/db_helvethaica_x_med_cond_v3.2-webfont.woff") format("woff"), url("fonts/db_helvethaica_x_med_cond_v3.2-webfont.ttf") format("truetype"), url("fonts/db_helvethaica_x_med_cond_v3.2-webfont.svg#db_helvethaica") format("svg");
  font-weight: 500;
  font-style: normal; }

@font-face {
  font-family: 'db_helvethaica';
  src: url("fonts/db_helvethaica_x_v3.2-webfont.eot");
  src: url("fonts/db_helvethaica_x_v3.2-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/db_helvethaica_x_v3.2-webfont.woff2") format("woff2"), url("fonts/db_helvethaica_x_v3.2-webfont.woff") format("woff"), url("fonts/db_helvethaica_x_v3.2-webfont.ttf") format("truetype"), url("fonts/db_helvethaica_x_v3.2-webfont.svg#db_helvethaica") format("svg");
  font-weight: 400;
  font-style: normal; }

@font-face {
  font-family: 'db_helvethaica';
  src: url("fonts/db_helvethaica_x_li_v3.2-webfont.eot");
  src: url("fonts/db_helvethaica_x_li_v3.2-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/db_helvethaica_x_li_v3.2-webfont.woff2") format("woff2"), url("fonts/db_helvethaica_x_li_v3.2-webfont.woff") format("woff"), url("fonts/db_helvethaica_x_li_v3.2-webfont.ttf") format("truetype"), url("fonts/db_helvethaica_x_li_v3.2-webfont.svg#db_helvethaica") format("svg");
  font-weight: 300;
  font-style: normal; }

@font-face {
  font-family: 'db_helvethaica';
  src: url("fonts/db_helvethaica_x_thin_v3.2-webfont.eot");
  src: url("fonts/db_helvethaica_x_thin_v3.2-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/db_helvethaica_x_thin_v3.2-webfont.woff2") format("woff2"), url("fonts/db_helvethaica_x_thin_v3.2-webfont.woff") format("woff"), url("fonts/db_helvethaica_x_thin_v3.2-webfont.ttf") format("truetype"), url("fonts/db_helvethaica_x_thin_v3.2-webfont.svg#db_helvethaica") format("svg");
  font-weight: 200;
  font-style: normal; }
 
@font-face {
  font-family: 'fontello';
  src: url("fonts/fontello-fontend.eot?");
  src: url("fonts/fontello-fontend.eot?#iefix") format("embedded-opentype"), url("fonts/fontello-fontend.woff?") format("woff"), url("fonts/fontello-fontend.ttf?") format("truetype"), url("fonts/fontello-fontend.svg?#fontello") format("svg");
  font-weight: normal;
  font-style: normal; }

[class^="icon-"]:before, [class*=" icon-"]:before {
  font-family: "fontello";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: .2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: .2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ }

html, body, div{ margin:0; padding:0; }
html { 
	-ms-text-size-adjust: 100%; 
	-webkit-text-size-adjust: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box; 
 
}
*,
*:before,
*:after {
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #ffffff;
  color: #000000;
  font-family: "db_helvethaica", sans-serif;
  font-weight: 400;
  font-size: 22px;   }

img{ border:none; max-width:100%; outline:0; vertical-align:middle;  }
:focus { outline:0; }
a:active { outline:none; }
.word-wrap { word-wrap: break-word; } 
.clear{ clear:both; }
.clearvdo{ clear:both; }
.box{ display:block; position:relative; }
.boxleft, .left{ float:left; }
.boxright, .right{ float:right; }

.txt-center{ text-align:center; }
.txt-left{ text-align:left; }
.txt-right{ text-align:right; }

.table{ display:table; width:100%; margin:0; padding:0; position:relative; }
.table-row{ display:table-row; }
.table-cell{ display:table-cell; }

a:link{ text-decoration:none; color:#000000; }
a:visited{ text-decoration:none; color:#000000; }
a:hover{ text-decoration:none; color:#000000; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0; font-family: "db_helvethaica"; font-weight: normal; text-rendering: optimizelegibility;
  speak: none; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; }

h1 small, h2 small { font-weight: normal; color: #bfbfbf; }

h1, .h1{ margin-bottom: 0.71429; font-size: 50px; font-size: 5rem; }
h2, .h2{ margin-bottom: 0.71429; font-size: 42px; font-size: 4.2rem; }
h3, .h3{ margin-bottom: 0.95238; font-size: 32px; font-size: 3.2rem; }
h4, .h4{ margin-bottom: 1.42857; font-size: 26px; font-size: 2.6rem; }
h5, .h5{ margin-bottom: 1.42857; font-size: 22px; font-size: 2.2rem; }


#page{ display:block; position: relative; background: url("../img/bg-product.jpg") center repeat; }
.content{ display:block; position: relative; max-width:1170px; margin:0 auto; }


#header{ display:block; position: relative;  width: 100%; left: 0;  top: 0; z-index: 599;  }
.bxheader{ display:block; position: relative; height:70px;  }
.bxheader > .tb{ display:table; position: relative; width:100%; height:100%;   }
.bxheader > .tb > .c1{ display:table-cell; position: relative; vertical-align: middle; width:160px;  }
.bxheader > .tb > .c2{ display:table-cell; position: relative; vertical-align: middle; text-align: right; }
.bxheader .bxlogo{ display:block; position: relative;  }
.bxheader .bxlogo img{ max-width:147px; }

.bxlogo{ display:block; position:relative; max-height:52px;  }
.bxlogo img{ /*height:52px;*/   }

.bxmenutop{ display:block; position: relative; font-family:'Prompt'; font-size:14px; line-height:1.2; font-weight:500;  }
.bxmenutop ul{ display:block; list-style:none; padding:0 0 0 15px; margin:0;   }
.bxmenutop ul > li{ display:inline-block; position: relative; margin-right:15px; }
.bxmenutop a{ display:block; position: relative; color:#666; transition: ease 0.5s;  }
.bxmenutop a:hover{ color: rgba(102, 102, 102, 0.7); }

.icon-globe{ display:inline-block; position:relative;  background: url("../img/icon-globe.png"); background-size:100%; width: 16px; height: 16px; vertical-align: bottom; margin-right:6px; } 
.icon-home{ display:inline-block; position:relative;  background: url("../img/icon-home.png"); background-size:100%; width: 16px; height: 16px; vertical-align: bottom; margin-right:6px; } 
.icon-call{ display:inline-block; position:relative;  background: url("../img/icon-call.png"); background-size:100%; width: 16px; height: 16px; vertical-align: bottom; margin-right:6px; } 
.icon-pin{ display:inline-block; position:relative;  background: url("../img/icon-pin.png"); background-size:100%; width: 12px; height: 16px; vertical-align: bottom; margin-right:6px; } 

.bxsearch{ display:block; position: relative; } 
.bxsearch input.bxsearch{ display: inline-block; position: relative; border:#cccccc solid 1px; width: 196px; height:26px; font-size: 14px; text-indent: 26px; font-family:"Prompt"; color: rgba(102, 102, 102, 1);  }
.bxsearch button.icon{ display:block; position: absolute; width:15px; height: 14px; top:6px; left:6px; background: url("../img/icon-search-black.png") no-repeat #fff;  border: none; background-size:100%;   }

.bxsearch input.bxsearch::-moz-placeholder{ color: #CCC; opacity: 1; }
.bxsearch input.bxsearch:-ms-input-placeholder { color: #CCC; }
.bxsearch input.bxsearch::-webkit-input-placeholder {color: #CCC; }

.social-icon{ display:block; position: relative; border-left: 1px solid #040404; padding-left: 10px; }
.social-icon > a{ display:inline-block; position: relative; vertical-align: middle; }
.social-icon > a > .icon{ font-size: 18px; color:#242424;;  }
.icon-facebook:before { content: '\f300';  }
.icon-youtube-play:before { content: '\e805'; }

#bxnav{ display:block; position: relative; height:60px; background-color: rgba(0, 0, 0, 0.8); color:#fff; z-index:299; transition: ease 0.5s;   }
#bxnav > .tb{ display:table; position: relative; width:100%; height:100%; }
#bxnav > .tb > .tc{ display:table-cell; position: relative; text-align: center; vertical-align:middle; }

#bxnav.fixtop{ position:fixed; top:0; left:0; right:0; width:100%;    }

.bxnavmenu{ display:block; position: relative; }
.bxnavmenu > ul{ display:table; position: relative; width:100%; list-style: none; padding:0; margin:0;  }
.bxnavmenu > ul > li{ display:table-cell; position: relative; width:14%;  }
.bxnavmenu > ul > li > a{ display: block; position: relative; color: #fff; text-align: center; line-height: 60px; white-space: nowrap; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); overflow: hidden; transition: ease 0.5s; }
.bxnavmenu > ul > li > a:hover, 
.bxnavmenu > ul > li > a:focus, 
.bxnavmenu > ul > li > a.active { color: #bfa013; }
.bxnavmenu > ul > li > a:before {
  content: " "; border-left: 1px dotted white; position: absolute; left: 0; height: 16px; display: inline-block; top: 22px; }
.bxnavmenu > ul > li > a:after {
  content: " "; position: absolute; z-index: -1; bottom: 0; left: 0; right: 100%; height: 1px;
  background-image: linear-gradient(0deg, #664003 0%, #b59229 48%, #fbfccf 100%);
  background-image: -webkit-linear-gradient(0deg, #664003 0%, #b59229 48%, #fbfccf 100%);
  transition-property: right;
  transition-duration: 0.3s;
  transition-timing-function: ease-out; }
.bxnavmenu > ul > li > a:hover:after, 
.bxnavmenu > ul > li > a.active:after { right: 0; }
.bxnavmenu > ul > li:first-child a:before { display: none; }


#headermobile{ display:none; }
#bxnavmb{ display:none; }
#bxnavmobile{ display:none; }	
.bxnavmobile{ display:none; }


#bxlead{ display:block; position: relative; background: url("../img/lead-article.jpg") center no-repeat; height:450px; background-size: cover; margin-top:-60px; border-bottom: 2px solid #d4c569; }
#bxlead:before { content: " "; position: absolute; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.2); }
#bxlead:after { content: " "; position: absolute; left: 50%; bottom: -48px; display: block; margin-left: -52px;
    background-image: url("../img/element-bottom.png"); background-size:100%; width: 106px; height: 48px; }
#bxlead > .bx{ position: absolute; top:60px; left:0; bottom:0; right:0; z-index:59;  }
#bxlead > .bx > .tb{ display:table; position: relative; width:100%; height:100%; }
#bxlead > .bx > .tb > .tc{ display:table-cell; position: relative; vertical-align: middle; }
.bxleadtxt{ display:block; position: relative; text-shadow: 1px 0px 3px black; margin-bottom:60px;  }
.bxleadtxt > h1{ color: #bfa013; text-transform: uppercase; font-size: 50px; line-height:1; font-weight: lighter;   }
.bxleadtxt > p{ font-size:26px; font-weight: 300; color: white; padding:0; margin:0;  }
 

#bxcontent{ display:block; position: relative; padding:52px 0; }
.bxnamecat{ display:block; position: relative; padding:0 0 39px; width:31.5%; }
.bxnamecat > .bxtxt{ color:#674900; font-size:26px; margin:0 0 6px;  }
.bxnamecat > .bxcat{ display:block; position: relative;  }
.bxsel{ display:block; position: relative; }

.custom-select{ position: relative; width:100%; border:#b49716 solid 1px;  }
.custom-select select {  display: none;  } 
.select-selected{ background:#fff; }
.select-selected:after {
  position: absolute; content: "";
  top: 16px; right: 12px; width: 15px; height: 8px; background:url("../img/icn-arrow-menu.png") no-repeat; }
.select-selected.select-arrow-active:after{  background:url("../img/icn-arrow-menu-up.png") no-repeat; }

.select-items div,.select-selected {
  color: #b49716; text-align: center; padding: 8px 16px;  border:0; cursor: pointer; user-select: none; }
.select-items{
  position: absolute;  background-color: #fff; top: 100%; left: 0; right: 0; z-index: 299; }
.select-hide{ display: none; }
.select-items div:hover, .same-as-selected{ background-color:#b49716; color:#fff !important; }

.selbx{
   display:block; position: relative;  width:100%; border:#b49716 solid 1px;  overflow: hidden; cursor:pointer; background:url("../img/icn-arrow-menu.png") no-repeat 97% #fff; vertical-align: middle; color: #b49716;  } 
.selbx select {
   background: transparent; color:#b49716; padding:8px; width:110%; border:none; cursor:pointer; font-family: inherit; font-size:inherit; text-align: center; }
.selbx option {
   border:none !important;  padding:6px 0;  background:#fff; color:#b49716; font-size:16px; font-family: "db_helvethaica"; text-align: left; }


.bxitemlist{ display:block; position: relative; padding:0 0 39px;}
.bxitemlist > .bxitem{ display:inline-block; position: relative; width:31.5%; margin-right:2%; margin-bottom:52px; vertical-align:top; }
.bxitemlist > .bxitem:nth-child(3n){ margin-right:0;  }
.bxitemlist > .bxitem > .itembx{ display:block; position: relative;  }
.bxitemlist > .bxitem > .itembx > .bximg{ display:block; position: relative; }
.bxitemlist > .bxitem > .itembx > .bximg > img{ width:100%; max-width:100%; }
.bxitemlist > .bxitem > .itembx > .bxtxt{ display:block; position: relative; text-align: center; }
.bxitemlist > .bxitem > .itembx > .bxtxt > .namebx{ display:block; position: relative; padding:10px 0; font-size:26px; line-height:1.2;  }
.bxitemlist > .bxitem > .itembx > .bxtxt > .linkbx{ display:block; position: relative; max-width:240px; margin:0 auto; }

.bxitemlist.txtcenter{ text-align: center; }
.bxitemlist > .bxitem.itemwidth{ width:auto; margin-right:24px;  }
.bxitemlist > .bxitem.itemwidth:nth-child(3n){ margin-right:24px;  }
.bxitemlist > .bxitem.itemwidth > .itembx > .bximg > img{ width:auto; height: 336px; }


a.btnbx{ display:block; position: relative; max-width:220px; margin:0 auto 8px; text-align: center; height:40px; border:#b49716 solid 1px; border-radius:18px; color:#674900; transition: ease 0.5s;  }
a.btnbx > div{ display:table-cell; position: relative; height:40px; width:220px; vertical-align: middle; }
a.btnbx > div > img{ margin-right:10px;  }
a.btnbx:hover{ background:#b49716; color:#fff;  }

.bxpage{ display:block; position: relative; text-align: center; padding:46px 0 0; } 
.bxpage > a.iprev{ display:inline-block; position: relative; width:40px; height:40px; border:#bfa013 solid 1px; background: url("../img/pager-left.png") center no-repeat; background-size:10px; vertical-align: middle;  }
.bxpage > a.iprev:hover{ border:#bfa013 solid 1px; background: url("../img/pager-left-white.png") center no-repeat #bfa013; background-size:10px; }
.bxpage > a.inext{ display:inline-block; position: relative; width:40px; height:40px; border:#bfa013 solid 1px; background: url("../img/pager-right.png") center no-repeat; background-size:10px; vertical-align: middle;  }
.bxpage > a.inext:hover{ border:#bfa013 solid 1px; background: url("../img/pager-right-white.png") center no-repeat #bfa013; background-size:10px; }

.bxpage > span.iprev{ display:inline-block; position: relative; width:40px; height:40px; border:#999 solid 1px; background: url("../img/pager-left-gray.png") center no-repeat; background-size:10px; cursor:not-allowed; vertical-align: middle;   }
.bxpage > span.inext{ display:inline-block; position: relative; width:40px; height:40px; border:#999 solid 1px; background: url("../img/pager-right-gray.png") center no-repeat; background-size:10px; cursor:not-allowed; vertical-align: middle;   }
.bxpage > span.numtxt{ display:inline-block; position: relative; vertical-align: middle; margin:0 26px; color:#674900; }



#footer{ display:block; position: relative; font-family: 'Prompt'; font-size: 14px; font-weight: 400; color:#fff;  z-index: 99; background:#222324; padding:0 0 0; }

.bxfooter{ display:block; position: relative;  }
.bxfooter > .bximg{ display:block; position: relative; float:right; width:34%;  }
.bxfooter > .bxlink{ display:block; position: relative; float:left; width:66%; }

.footerbximg{ display:block; position: relative; }
.footerbximg > .tb{ display:table; position: relative; width:100%; }
.footerbximg > .tb > .c1{ display:table-cell; position: relative; vertical-align: top; width:194px; }
.footerbximg > .tb > .c1 > .bx{ display:block; position: relative; margin-top:-76px;  }
.footerbximg > .tb > .c1 > .bx > img{ max-width:100%; }
.footerbximg > .tb > .c2{ display:table-cell; position: relative; vertical-align: bottom; }
.footerbximg > .tb > .c2 > .bx{  display:block; position: relative; width:220px; padding:20px 0 0; }
.footerbximg > .tb > .c2 > .bx > .txt{ display:block; position: relative; font-size:16px; line-height:1.1;  }
.footerbximg > .tb > .c2 > .bx > .txt > .txth{ font-size:36px; font-weight:500; }
.footerbximg > .tb > .c2 > .bx > .app{ display:block; position: relative; padding:10px 0; }
.footerbximg > .tb > .c2 > .bx > .app > a{ display:inline-block; position: relative; margin-right:5px; margin-bottom:5px;  }
.footerbximg > .tb > .c2 > .bx > .app > a > img{ max-width:100px; }
.footerbximg > .tb > .c2 > .bx > .mascot{ display:block; position: relative; height: 78px; width:245px; margin-left:-24px; }
.footerbximg > .tb > .c2 > .bx > .mascot > img{ max-height:78px; position: relative; z-index:6; }
.footerbximg > .tb > .c2 > .bx > .mascot > .linebx{ display:block; position: absolute; top:20px; right:0; z-index:1; }
.footerbximg > .tb > .c2 > .bx > .mascot > .linebx > span{ display:block; position: relative; background: url("../img/msg-box-small.png") no-repeat; background-size:100%; width: 139px; height:51px; text-align: center;  }
.footerbximg > .tb > .c2 > .bx > .mascot > .linebx > span > a{ display:inline-block; position: relative; color:#84bd00; margin-top:8px; font-size:11px;  }
.footerbximg > .tb > .c2 > .bx > .mascot > .linebx > span > a > img{ max-width:27px; margin-right:6px; }

.footerbxlink{ display:block; position: relative; padding:40px 0 0; }
.footerbxlink > .tb{ display:table; position: relative; width:100%;  }
.footerbxlink > .tb > .tc{ display:table-cell; position: relative; width:33.33%; vertical-align: top; }
.footerbxlink > .tb > .tc > .bx{ display:block; position: relative; width:92%;  }
.footerbxlink > .tb > .tc:last-child > .bx{ margin:0 0 0 auto; }

.footerbxlink ul{ list-style:url("../img/bullet-polygon-white.png"); padding:0 0 0 15px; margin:0;  }
.footerbxlink ul > li{  margin-bottom:16px;  }
.footerbxlink a{ color:#fff; transition: ease 0.5s;  }
.footerbxlink a:hover{ color:#bfa013;  }

.footertxt{ 
	display:block; position: relative; padding:20px 0; background:#1f1f20; }	
.footertxtbx{ display:block; position: relative; }
.footertxtbx > .tb{ display:table; position: relative; width:100%; }
.footertxtbx > .tb > .c1{ display:table-cell; position: relative; vertical-align:middle; }
.footertxtbx > .tb > .c2{ display:table-cell; position: relative; vertical-align:middle; width:32%; text-align: right; }
.footertxtbx > .tb > .c1 > .bx,
.footertxtbx > .tb > .c2 > .bx{ display:block; position: relative; }

.footerlink{ display:block; position: relative; padding:0 0 5px; }
.footerlink a{ color:#fff; transition: ease 0.5s;  }
.footerlink a:hover{ color:#bfa013; }
.footerlink > .line{ display:inline-block; position: relative; margin:0 10px;  }
.footerlink > .line::before{ content: '|'; }

.footersocial{ display:block; position: relative; }
.footersocial > div{ display:inline-block; position: relative; }
.footersocial > a{ display:inline-block; position: relative; vertical-align: middle; font-size:24px; margin:0 2px; }
.footersocial > a > span{ display:table-cell; position: relative; width:40px; height:40px; background:#fff; border-radius:50%; text-align: center; vertical-align: middle; border:#fff solid 2px; transition: ease 0.5s;  }
.footersocial > a:hover > span{ background:#000; coloR:#fff; }
.footercopy.mobile{ display:none; }