/* set global config vars */
/* defualt page width setting(PC) */
/* off canvas menu width *eg. 70px or 70% */
/* main slide margin top */
/* header height */
/* footer height */
/* global body setting */
/* default font family */
/* text sizing multiplier */
/* text sizing */
/* default theme color */
/* special theme */
/* insert special theme for this website */
/* text sizing */
/* text sizing mobile */
@font-face {
  font-family: 'prompt-regular';
  src: url("../../../fonts/Prompt-Regular/Prompt-Regular.eot");
  src: url("../../../fonts/Prompt-Regular/Prompt-Regular.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Prompt-Regular/Prompt-Regular.woff") format("woff"), url("../../../fonts/Prompt-Regular/Prompt-Regular.ttf") format("truetype"), url("../../../fonts/Prompt-Regular/Prompt-Regular.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'prompt-light';
  src: url("../../../fonts/Prompt-Light/Prompt-Light.eot");
  src: url("../../../fonts/Prompt-Light/Prompt-Light.eot?#iefix") format("embedded-opentype"), url("../../../fonts/Prompt-Light/Prompt-Light.woff") format("woff"), url("../../../fonts/Prompt-Light/Prompt-Light.ttf") format("truetype"), url("../../../fonts/Prompt-Light/Prompt-Light.svg") format("svg");
  font-weight: normal;
  font-style: normal; }

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

/*html[lang=th] .fontface-menu{
      font-family: 'helvethaicaX_ext';
}

html[lang=th] .fontface-title{
      font-family: 'helvethaicaX_med';
}

html[lang=th] .fontface-content{
      font-family: 'helvethaicaX_regular';
}*/
/*html[lang=en] .fontface-menu{
      font-family: 'akzidenzBE_ex';
}

html[lang=en] .fontface-title{
      font-family: 'akzidenzBE_md';
}

html[lang=en] .fontface-content{
      font-family: 'akzidenzBE_light';
}*/
/* note : for IE8,7 need css3pie helper*/
.main-bg .index-video-wrapper {
  height: 630px;
  background-image: url("../../../../images/site/bg/bg-video.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  /* Video overlay and content */
  /* CSS from jQuery Background Video plugin */
  /**
     * Set default positioning as a fallback for if the plugin fails
     */
  /**
     * Fade in videos
     * Note the .js class - so non js users still
     * see the video
     */
  /**
     * Pause/play button
     */ }
  .main-bg .index-video-wrapper .brand-video-wrapper {
    width: 100%;
    height: 100%; }
  .main-bg .index-video-wrapper .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    pointer-events: none;
    /* Allows right click menu on the video */ }
  .main-bg .index-video-wrapper .video-hero--content {
    position: relative;
    text-align: center;
    color: #fff;
    margin: 260px 0; }
    .main-bg .index-video-wrapper .video-hero--content h1 {
      margin: 0 0 10px; }
    .main-bg .index-video-wrapper .video-hero--content p {
      font-size: 1.2rem;
      margin: 0; }
  .main-bg .index-video-wrapper .jquery-background-video-wrapper {
    position: relative;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover; }
  .main-bg .index-video-wrapper .jquery-background-video {
    position: absolute;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%); }
  .main-bg .index-video-wrapper .js .jquery-background-video {
    opacity: 0;
    -webkit-transition: opacity 300ms linear;
    -o-transition: opacity 300ms linear;
    transition: opacity 300ms linear; }
  .main-bg .index-video-wrapper .js .jquery-background-video.is-visible {
    opacity: 1; }
  .main-bg .index-video-wrapper .jquery-background-video-pauseplay {
    position: absolute;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 105px;
    height: 45px;
    top: 15px;
    right: 15px;
    padding: 0;
    cursor: pointer;
    outline: none !important; }
  .main-bg .index-video-wrapper .jquery-background-video-pauseplay span {
    display: none; }
  .main-bg .index-video-wrapper .jquery-background-video-pauseplay.play {
    background-image: url("../../../../images/site/icons/play-video.png");
    background-position: 0 0; }
  .main-bg .index-video-wrapper .jquery-background-video-pauseplay.pause {
    background-image: url("../../../../images/site/icons/pause-video.png");
    background-position: 0 0; }

.main-bg .index-banner {
  position: relative; }
  .main-bg .index-banner .foo-item {
    float: left;
    position: relative; }
    .main-bg .index-banner .foo-item h1 {
      margin-top: 2em;
      margin-bottom: 25px; }
      .main-bg .index-banner .foo-item h1 p {
        margin: 0;
        font-size: 3.28rem;
        line-height: 3.28rem; }
        .main-bg .index-banner .foo-item h1 p span {
          font-size: 3.28rem;
          line-height: 3.28rem; }
    .main-bg .index-banner .foo-item p {
      margin-bottom: 105px; }
    .main-bg .index-banner .foo-item .description-wrapper {
      position: absolute;
      top: 0;
      width: 100%;
      height: 100%;
      left: 0;
      background: rgba(0, 0, 0, 0.2); }
    .main-bg .index-banner .foo-item .table {
      text-align: center;
      padding: 0 10%; }
      .main-bg .index-banner .foo-item .table .cell {
        display: table-cell;
        vertical-align: middle; }
        .main-bg .index-banner .foo-item .table .cell .btn-wrapper {
          position: absolute;
          width: 100%;
          left: 0;
          bottom: 50px;
          text-align: center; }
  @media screen and (max-width: 767px) {
    .main-bg .index-banner .slider-controller {
      bottom: 0; }
      .main-bg .index-banner .slider-controller #foo_pager {
        text-align: right; }
    .main-bg .index-banner .foo-item h1 {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 26px;
      line-height: 30px; }
      .main-bg .index-banner .foo-item h1 p {
        margin: 0;
        font-size: 26px;
        line-height: 30px; }
        .main-bg .index-banner .foo-item h1 p span {
          font-size: 26px;
          line-height: 30px; }
    .main-bg .index-banner .foo-item p {
      margin-bottom: 25px; }
    .main-bg .index-banner .foo-item .table {
      padding: 0 15px; }
      .main-bg .index-banner .foo-item .table .cell {
        vertical-align: top; }
        .main-bg .index-banner .foo-item .table .cell .btn-wrapper {
          bottom: 20px; } }

.index-discover-inspire {
  text-align: center; }
  .index-discover-inspire .discover-wrapper .owl-carousel-custom .owl-stage-outer {
    max-width: 1280px;
    margin: 0 auto; }
  .index-discover-inspire .discover-wrapper.mobileHide {
    display: block; }
    .index-discover-inspire .discover-wrapper.mobileHide .main-image {
      width: 305px;
      height: 350px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
      .index-discover-inspire .discover-wrapper.mobileHide .main-image.featured-image {
        width: 630px;
        height: 350px; }
  .index-discover-inspire .discover-wrapper.mobileShow {
    display: none;
    padding: 0 15px; }
    .index-discover-inspire .discover-wrapper.mobileShow ul li {
      margin-bottom: 15px;
      height: auto; }
      .index-discover-inspire .discover-wrapper.mobileShow ul li:last-child {
        margin-bottom: 0; }
    .index-discover-inspire .discover-wrapper.mobileShow .main-image {
      width: 100%;
      max-width: 100%;
      height: auto;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out; }
      .index-discover-inspire .discover-wrapper.mobileShow .main-image.featured-image {
        width: 100%;
        max-width: 100%;
        height: auto; }
    @media screen and (max-width: 414px) {
      .index-discover-inspire .discover-wrapper.mobileShow .main-image {
        height: auto; } }
  @media screen and (max-width: 1199px) {
    .index-discover-inspire .discover-wrapper.mobileHide {
      display: none; }
    .index-discover-inspire .discover-wrapper.mobileShow {
      display: block; } }
  .index-discover-inspire ul {
    list-style: none;
    overflow: hidden; }
    .index-discover-inspire ul li {
      height: 350px;
      position: relative; }
      .index-discover-inspire ul li a {
        height: 100%;
        display: block;
        position: relative; }
      .index-discover-inspire ul li .initial-wrapper {
        top: auto;
        height: 85px;
        padding: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3); }
        .index-discover-inspire ul li .initial-wrapper .styled {
          color: #fff; }
          .index-discover-inspire ul li .initial-wrapper .styled .icons {
            display: inline-block;
            vertical-align: middle;
            margin: 0 10px;
            width: 35px;
            height: 35px; }
          .index-discover-inspire ul li .initial-wrapper .styled span {
            display: block; }
      .index-discover-inspire ul li:hover .initial-wrapper {
        background: rgba(0, 0, 0, 0.75); }
  @media screen and (max-width: 999px) {
    .index-discover-inspire ul li {
      height: auto; }
      .index-discover-inspire ul li.large .main-image.mobileShow, .index-discover-inspire ul li.small .main-image.mobileShow {
        display: block;
        opacity: 1;
        visibility: visible; }
      .index-discover-inspire ul li.large .main-image.mobileHide, .index-discover-inspire ul li.small .main-image.mobileHide {
        display: none;
        opacity: 0;
        visibility: hidden; } }

.index-brand-arrivals {
  width: 100%;
  min-height: 650px;
  text-align: center;
  position: relative;
  background: transparent; }
  .index-brand-arrivals .content {
    display: block;
    width: 100%;
    height: 100%; }
  .index-brand-arrivals a {
    color: #fff; }
  .index-brand-arrivals .main-image {
    max-width: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  .index-brand-arrivals .description-wrapper {
    background: rgba(0, 0, 0, 0.2); }
    .index-brand-arrivals .description-wrapper .table {
      padding-right: 14%;
      padding-left: 14%; }
    .index-brand-arrivals .description-wrapper h2 {
      font-size: 3.28rem;
      line-height: 3.28rem;
      color: #fff;
      margin-bottom: 29px; }
      .index-brand-arrivals .description-wrapper h2 p {
        font-size: 3.28rem;
        line-height: 3.28rem; }
        .index-brand-arrivals .description-wrapper h2 p span {
          font-size: 3.28rem;
          line-height: 3.28rem; }
    .index-brand-arrivals .description-wrapper p {
      font-size: 1.37rem;
      line-height: 1.85rem;
      color: #fff;
      margin-bottom: 70px; }
    .index-brand-arrivals .description-wrapper .btn-light {
      cursor: pointer; }
  @media screen and (max-width: 999px) {
    .index-brand-arrivals .description-wrapper h2 {
      font-size: 1.85rem;
      line-height: 3.28rem; }
      .index-brand-arrivals .description-wrapper h2 p {
        font-size: 1.85rem;
        line-height: 3.28rem; }
        .index-brand-arrivals .description-wrapper h2 p span {
          font-size: 1.85rem;
          line-height: 3.28rem; }
    .index-brand-arrivals .description-wrapper p {
      font-size: 1.2rem; } }
  @media screen and (max-width: 767px) {
    .index-brand-arrivals .description-wrapper h2 {
      font-size: 1.85rem;
      line-height: 1.85rem;
      margin-bottom: 20px; }
      .index-brand-arrivals .description-wrapper h2 p {
        font-size: 1.85rem;
        line-height: 1.85rem;
        margin-bottom: 0; }
        .index-brand-arrivals .description-wrapper h2 p span {
          font-size: 1.85rem;
          line-height: 1.85rem; }
    .index-brand-arrivals .description-wrapper p {
      margin-bottom: 20px; } }

.index-cooking-class {
  width: 100%;
  min-height: 650px;
  text-align: center;
  position: relative;
  background: transparent; }
  .index-cooking-class .content {
    display: block;
    width: 100%;
    height: 100%; }
  .index-cooking-class a {
    color: #fff; }
  .index-cooking-class .main-image {
    max-width: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  .index-cooking-class .description-wrapper {
    padding: 5px;
    background: rgba(0, 0, 0, 0.2); }
    .index-cooking-class .description-wrapper .table {
      padding-right: 14%;
      padding-left: 14%; }
    .index-cooking-class .description-wrapper h2 {
      font-size: 3.28rem;
      line-height: 3.28rem;
      color: #fff;
      margin-bottom: 29px; }
      .index-cooking-class .description-wrapper h2 p {
        font-size: 3.28rem;
        line-height: 3.28rem; }
        .index-cooking-class .description-wrapper h2 p span {
          font-size: 3.28rem;
          line-height: 3.28rem; }
    .index-cooking-class .description-wrapper p {
      font-size: 1.37rem;
      line-height: 1.85rem;
      color: #fff;
      margin-bottom: 70px; }
    .index-cooking-class .description-wrapper .btn-light {
      cursor: pointer; }
  @media screen and (max-width: 999px) {
    .index-cooking-class .description-wrapper h2 {
      font-size: 1.85rem;
      line-height: 3.28rem; }
      .index-cooking-class .description-wrapper h2 p {
        font-size: 1.85rem;
        line-height: 3.28rem; }
        .index-cooking-class .description-wrapper h2 p span {
          font-size: 1.85rem;
          line-height: 3.28rem; }
    .index-cooking-class .description-wrapper p {
      font-size: 1.2rem; } }
  @media screen and (max-width: 767px) {
    .index-cooking-class .description-wrapper h2 {
      font-size: 1.85rem;
      line-height: 1.85rem;
      margin-bottom: 20px; }
      .index-cooking-class .description-wrapper h2 p {
        font-size: 1.85rem;
        line-height: 1.85rem;
        margin-bottom: 0; }
        .index-cooking-class .description-wrapper h2 p span {
          font-size: 1.85rem;
          line-height: 1.85rem; }
    .index-cooking-class .description-wrapper p {
      margin-bottom: 20px; } }

.index-social {
  padding-top: 25px; }
  .index-social .social-networks {
    padding: 0; }

.video-online .video-embed-wrapper {
  display: block;
  max-width: 100%; }

@media screen and (max-width: 767px) {
  .video-online li {
    margin-bottom: 15px; }
    .video-online li:last-child {
      margin-bottom: 0; } }

.index-brand-knowledge {
  width: 100%;
  min-height: 650px;
  text-align: center;
  position: relative;
  background: transparent; }
  .index-brand-knowledge .content {
    display: block;
    width: 100%;
    height: 100%; }
  .index-brand-knowledge a {
    color: #fff; }
  .index-brand-knowledge .main-image {
    max-width: 100%;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out; }
  .index-brand-knowledge .description-wrapper {
    padding: 5px;
    background: rgba(0, 0, 0, 0.2); }
    .index-brand-knowledge .description-wrapper .table {
      padding-right: 14%;
      padding-left: 14%; }
    .index-brand-knowledge .description-wrapper h2 {
      font-size: 3.28rem;
      line-height: 3.28rem;
      color: #fff;
      margin-bottom: 30px; }
      .index-brand-knowledge .description-wrapper h2 p {
        font-size: 3.28rem;
        line-height: 3.28rem; }
        .index-brand-knowledge .description-wrapper h2 p span {
          font-size: 3.28rem;
          line-height: 3.28rem; }
    .index-brand-knowledge .description-wrapper p {
      font-size: 1.37rem;
      line-height: 1.85rem;
      color: #fff;
      margin-bottom: 30px; }
    .index-brand-knowledge .description-wrapper .btn-light {
      cursor: pointer; }
  @media screen and (max-width: 999px) {
    .index-brand-knowledge .description-wrapper h2 {
      font-size: 1.85rem;
      line-height: 3.28rem; }
      .index-brand-knowledge .description-wrapper h2 p {
        font-size: 1.85rem;
        line-height: 3.28rem; }
        .index-brand-knowledge .description-wrapper h2 p span {
          font-size: 1.85rem;
          line-height: 3.28rem; }
    .index-brand-knowledge .description-wrapper p {
      font-size: 1.2rem; } }
  @media screen and (max-width: 767px) {
    .index-brand-knowledge .description-wrapper h2 {
      font-size: 1.85rem;
      line-height: 1.85rem;
      margin-bottom: 20px; }
      .index-brand-knowledge .description-wrapper h2 p {
        font-size: 1.85rem;
        line-height: 1.85rem;
        margin-bottom: 0; }
        .index-brand-knowledge .description-wrapper h2 p span {
          font-size: 1.85rem;
          line-height: 1.85rem; }
    .index-brand-knowledge .description-wrapper p {
      margin-bottom: 20px; } }