@font-face {
  src: url("/static/scss/fonts/CSChatThaiUI.ttf");
  font-family: 'fc-subject-rounded'; }

html {
  font-size: 18px; }

body {
  font-family: 'fc-subject-rounded'; }

h1 {
  font-size: 2.2rem; }

h2 {
  font-size: 1.8rem; }

h3 {
  font-size: 1.5rem; }

a {
  text-decoration: none; }

a.underline:hover {
  text-decoration: underline; }

.bg-evblue {
  background-color: #035690; }

.nav-item.flag img {
  max-height: 25px;
  max-width: 25px; }

.navbar .megamenu {
  padding: 1rem; }
  .navbar .megamenu .dropdown-item {
    transition: box-shadow 0.2s ease;
    border: 1px solid rgba(3, 86, 144, 0.25);
    border-radius: .5rem; }
    .navbar .megamenu .dropdown-item:hover, .navbar .megamenu .dropdown-item:focus {
      background-color: white;
      box-shadow: 0 0 10px 3px rgba(3, 86, 144, 0.5); }
  .navbar .megamenu img {
    max-width: 100%; }

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
  .navbar .has-megamenu {
    position: static !important; }
  .navbar .megamenu {
    left: 0;
    right: 0;
    top: inherit;
    margin-top: 0;
    width: 100%;
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto; }
  .navbar .nav-item:not(:last-child) {
    border-right: 1px solid silver; } }

/* ============ desktop view .end// ============ */
/* ============ mobile view ============ */
@media (max-width: 991px) {
  .navbar.fixed-top .navbar-collapse, .navbar.sticky-top .navbar-collapse {
    overflow-y: auto;
    max-height: 90vh;
    margin-top: 10px; } }

/* ============ mobile view .end// ============ */
/* ============ desktop view ============ */
@media all and (min-width: 992px) {
  .navbar .nav-item .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: visibility .15s linear, opacity .15s linear; }
  .navbar .nav-item:hover .dropdown-menu {
    visibility: visible;
    opacity: 1; }
  .navbar .nav-item .dropdown-menu {
    margin-top: 0; } }

/* ============ desktop view .end// ============ */
.navbar {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem; }

.navbar-brand img {
  max-height: 3.5rem; }

.footer {
  background-color: #035690;
  color: white;
  padding-top: 1rem;
  padding-bottom: 1rem; }
  .footer a {
    color: white; }
    .footer a.sub-button {
      margin-left: 1rem;
      text-decoration: none; }
      .footer a.sub-button img {
        height: 2.5rem; }
      .footer a.sub-button:last-child {
        margin-right: 1rem; }

.banner {
  max-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; }
  .banner img {
    min-width: 100%;
    min-height: 100%; }

.intro-video {
  width: 100%;
  background-color: rgba(3, 86, 144, 0.4); }
  .intro-video video {
    display: block; }

.about-line {
  background-color: rgba(128, 128, 128, 0.1); }
  .about-line .row {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem; }
  .about-line img {
    border-radius: 1rem; }

.img-frame {
  text-align: center; }
  .img-frame.h100 img {
    max-height: 100px; }
  .img-frame.h200 img {
    max-height: 200px; }
  .img-frame.h250 img {
    max-height: 250px;
    max-width: inherit; }
  .img-frame.h300 img {
    max-height: 300px;
    max-width: 300px; }

.product-list {
  background-color: rgba(3, 86, 144, 0.3); }

.benefit-line {
  background-color: rgba(3, 86, 144, 0.4); }
  .benefit-line .text-center {
    padding: 1.2rem 0; }
  .benefit-line .row .benefit {
    transform: skew(-10deg);
    margin-top: 0.3rem;
    color: black;
    margin: 0 1rem 1rem 1rem;
    padding: 0.5rem;
    background-color: white; }

.row .product {
  text-decoration: none;
  color: black;
  transition: box-shadow 0.2s ease;
  margin: 0 1rem 2rem 1rem;
  padding: 0.5rem;
  background-color: white; }
  .row .product:hover {
    box-shadow: 0 0 10px 3px rgba(3, 86, 144, 0.5); }

table.compare-table {
  width: 100%;
  table-layout: fixed; }
  table.compare-table, table.compare-table th, table.compare-table td {
    border: 1px solid #b4b4b4; }
  table.compare-table th, table.compare-table td {
    padding: 0.3rem; }
  table.compare-table th {
    background-color: gainsboro;
    text-align: center; }
  table.compare-table tr:nth-child(even) {
    background-color: #f0f0f0; }
  table.compare-table tr:last-child {
    font-weight: bold; }

.banner-follow-us {
  text-align: center;
  font-size: 2rem;
  color: #035690;
  background-color: white;
  padding-top: 3rem;
  padding-bottom: 5rem; }
  .banner-follow-us .first-line {
    padding-bottom: 1.5rem; }
  .banner-follow-us a {
    margin-left: 1rem;
    text-decoration: none; }
    .banner-follow-us a:last-child {
      margin-right: 1rem; }
  .banner-follow-us img {
    height: 2.5rem;
    border: 0; }

.row.img-factory [class^="col-"] {
  padding: 0 .75rem 1.5rem .75rem; }

.header img {
  max-width: 90px; }

.header h2 {
  display: inline-block;
  vertical-align: -9px; }

.model {
  font-size: 3rem;
  display: inline; }

.strip {
  width: 100%;
  height: 1rem;
  background-color: #035690; }

.main-img {
  width: inherit; }
  .main-img img {
    max-width: 100%;
    max-height: 400px; }

@media all and (min-width: 992px) {
  .battery-row .col:first-child {
    border-right: 1px solid silver; } }

@media all and (max-width: 991px) {
  .spec-table {
    margin: 0 auto; } }

.spec-table tr td:first-child {
  padding-right: 2rem; }

table.option-model-table {
  width: 100%;
  table-layout: fixed; }
  table.option-model-table, table.option-model-table th, table.option-model-table td {
    border: 1px solid #c8c8c8; }
  table.option-model-table tr:nth-child(even) {
    background-color: #f0f0f0; }

.battery-row h3 {
  width: auto; }

.battery-div {
  width: auto;
  margin: 0 1rem 1rem 1rem;
  padding: 1rem;
  border: 1px solid silver;
  border-radius: 10px; }

.battery-table {
  display: inline-block; }

.circle-color {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border: 0px;
  border-radius: 2rem;
  vertical-align: -.75rem;
  margin: 0 0.2rem 0 0.5rem; }
  .circle-color.red {
    background-color: red; }
  .circle-color.blue {
    background-color: blue; }
  .circle-color.yellow {
    background-color: yellow; }
  .circle-color.pink {
    background-color: pink; }
  .circle-color.grey {
    background-color: gray; }
  .circle-color.white {
    background-color: #eeeeee;
    border: 1px solid silver; }
  .circle-color.black {
    background-color: black; }
  .circle-color.wind_red {
    background-color: #c9022d; }
  .circle-color.wind_blue {
    background-color: #005ccb; }
  .circle-color.wind_pink {
    background-color: #c9b1cd; }
  .circle-color.wind_white_yellow {
    border: 1px solid silver;
    background: linear-gradient(135deg, white 50%, #ffd032 50%); }
  .circle-color.wind_white_red {
    border: 1px solid silver;
    background: linear-gradient(135deg, white 50%, #fe2925 50%); }
  .circle-color.wind_white_blue {
    border: 1px solid silver;
    background: linear-gradient(135deg, white 50%, #4698fe 50%); }
  .circle-color.wind_grey_yellow {
    border: 1px solid silver;
    background: linear-gradient(135deg, #939393 50%, #ffd032 50%); }
  .circle-color.wind_grey_red {
    border: 1px solid silver;
    background: linear-gradient(135deg, #939393 50%, #fe2925 50%); }
  .circle-color.wind_grey_blue {
    border: 1px solid silver;
    background: linear-gradient(135deg, #939393 50%, #4698fe 50%); }
  .circle-color.move_grey {
    background-color: #636365; }
  .circle-color.move_green {
    background-color: #76bfc8; }
  .circle-color.carry_red {
    background-color: #d62f37; }
  .circle-color.carry_grey {
    background-color: #a0a0a0; }
  .circle-color.max_orange {
    background-color: #fe5217; }
  .circle-color.max_blue {
    background-color: #3688f1; }
  .circle-color.flash_red {
    background-color: #dc0535; }
  .circle-color.flash_blue {
    background-color: #2d7abe; }
  .circle-color.flash_grey {
    background-color: #474c52; }
  .circle-color.hawk_grey {
    background-color: #94a1ad; }
  .circle-color.hawk_yellow {
    background-color: #f2d45a; }

.contact > div {
  padding: 0 0.5rem 1rem 0.5rem; }

.map {
  width: 100%;
  height: 100%;
  min-height: 300px; }

/*# sourceMappingURL=../COMPILED/scss/base2.css.map */