body {
  font-family: "Kanit";
  overflow-x: hidden;
}
.c-w {
  color: white;
}

/* nav */
.navbar {
  padding: 1.5rem 0rem !important;
}
.nav-custom {
  min-height: 81px;
  padding: 15px 5px;
  text-align: center;
  text-transform: uppercase;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
  font-size: 0.75em;
}
/* end nav */

/* banner */
@media (min-width: 576px) {
  .bg-img-banner {
	background-image: url("../images/banner/home_banner_mobile.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 500px !important;
  }
  .banner-md {
	display: none;
  }
}

@media (min-width: 768px) {
  .bg-img-banner {
	background-image: url("../images/banner/home_banner_mobile.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	height: 550px !important;
  }
  .banner-md {
	display: none;
  }
}

@media (min-width: 1220px) {
  .bg-img-banner {
	background-image: url("../images/banner/home_banner.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }
  .banner-md {
	  display: table;
  }
}

.bg-img-banner-contact {
	background-image: url("../images/banner/cover-bg_0002.jpg");
	background-position: center;
	background-repeat: no-repeat;
  background-size: cover;
  height: 338px;
}

.bg-img-banner-policy {
  background-image: url("../images/banner/cover_02.jpg");
	background-position: center;
	background-repeat: no-repeat;
  background-size: cover;
  height: 338px;
}

.bg-img-banner-why {
  background-image: url("../images/why/top_head.png");
  color: #ffffff;
  text-shadow: black 0.1em 0.1em 0.2em;
  font-family: 'Roboto', sans-serif;
	background-position: center;
	background-repeat: no-repeat;
  background-size: cover;
  height: 338px;
}

.bg-img-banner-type {
	background-image: url("../images/banner/type.png");
	background-position: center;
	background-repeat: no-repeat;
  background-size: cover;
  height: 400px;
  color: #ffffff
}
.logo-banner {
  margin-bottom: 2em;
}
.text-banner {
  font-style: oblique;
  font-family: "Kanit";
  text-transform: uppercase;
  font-weight: 600;
  color: #1d2124;
  text-shadow: 2px 2px #343a40ad;
  font-size: 1.3rem;
}
.text-hotline {
  color: #1d2124;
  text-shadow: 2px 2px #343a40ad;
  font-weight: bolder;
  font-size: 3rem;
  line-height: 50px;
}
.btn-tilted {
  color: #fff;
  background: #e22b1d;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  outline: 0;
  font-size: 1rem;
  padding: 12px 35px;
  display: inline-block;
  transform: skew(-21deg);
}
.btn-tilted:visited { color: #fff; }
.btn-tilted:hover { background: #c10315; }
.btn-tilted> span { display: inline-block; transform: skew(21deg); } /* Un-skew the text */
.btn-tilted-home {
  color: #fff;
  background: #dc3545;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  padding: 0.7rem;
  transform: skew(-21deg);
  position: absolute;
  width: 88%;
  top: -7px;
  margin-left: 23px;
}
.btn-tilted-4w {
  color: #fff;
  background: #28a745;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  padding: 2rem;
  display: inline-block;
  transform: skew(-21deg);
  height: 7rem;
}
.btn-tilted-4w:visited { color: #fff; }
.btn-tilted-4w:hover { background: #269e42; }
.btn-tilted-4w> span { display: inline-block; transform: skew(21deg); }
.btn-tilted-6w {
  color: #fff;
  background: #007bff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  padding: 2rem;
  display: inline-block;
  transform: skew(-21deg);
  height: 7rem;
}
.btn-tilted-6w:visited { color: #fff; }
.btn-tilted-6w:hover { background: #0174ee; }
.btn-tilted-6w> span { display: inline-block; transform: skew(21deg); }
.btn-tilted-custom {
  color: #fff;
  background: #dbd031;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border: 0;
  outline: 0;
  font-size: 1.1rem;
  padding: 2rem;
  display: inline-block;
  transform: skew(-21deg);
  height: 7rem;
}
.btn-tilted-custom:visited { color: #fff; }
.btn-tilted-custom:hover { background: #dbd031; }
.btn-tilted-custom> span { display: inline-block; transform: skew(21deg); }
.btn-tel {
  color: #ffffff;
  background-color: #e22b1d;
  background-image: none;
  border-color: #e22b1d;
}
/* end banner */

/* type */
.card-body {
  background-color: #f5f6f6;
}
/* end type */

/* why */
.why-section {
  background-image: url("../images/why/why_bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.why-title {
  color: #ffffff;
}
/* end why */

/* gallery */
.mt-2-65 {
  margin-top: 2.65rem;
}
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}
.column img {
  margin-top: 8px;
  vertical-align: middle;
}
@media screen and (max-width: 800px) {
  .column {
	flex: 50%;
	max-width: 50%;
  }
}
@media screen and (max-width: 600px) {
  .column {
	flex: 100%;
	max-width: 100%;
  }
}
/* end gallery */

/* contact */
.contact-section {
  background-image: url("../images/contact/Background_contact.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 175px;
}
.contact-title {
  font-size: 4rem;
  font-family: "Kanit";
  font-weight: 900;
  color: #ffffff;
  margin-top: 20px;
  height: 83px;
}
.btn-contact {
  margin-top: 3em;
}

/* end contact */

/* footer */
.copy-right {
  font-size: 14px;
  font-family: "Kanit";
  color: rgb(0, 0, 0);
}
.footer {
  background: #343a40;
  color: white;
  padding-left: 10rem;
  padding-right: 10rem;
  height: 50px;
  padding-top: 12px;
}

/* end footer */

/* page why */
.why {
  padding-left: 15rem;
  padding-right: 15rem;
  padding-top: 50px;
}
.bg-gray {
  background-color: aliceblue;
}
.why-dec {
  line-height: 2rem;
}
/* end page why */

.c-blue {
  color: #007bff !important;
}

.w4-header {
  background-image: url("../images/type/head_bg.png");
  background-repeat: no-repeat;
  background-size: cover;
}
/* end type */

.contact {
  padding-left: 15rem;
  padding-right: 15rem;
  padding-top: 50px;
  padding-bottom: 50px;
}

.dropdown-menu{
  transform: translate3d(80px, 14px, 0px)!important;
  background-color: #00000000 !important;
  border: none;

}

@media (min-width: 768px) {
  /* show 3 items */
  .carousel-inner .active,
  .carousel-inner .active + .carousel-item,
  .carousel-inner .active + .carousel-item + .carousel-item {
    display: block;
  }

  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
  .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
    transition: none;
  }

  .carousel-inner .carousel-item-next,
  .carousel-inner .carousel-item-prev {
    position: relative;
    transform: translate3d(0, 0, 0);
  }

  .carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
    position: absolute;
    top: 0;
    right: -33.3333%;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* left or forward direction */
  .active.carousel-item-left + .carousel-item-next.carousel-item-left,
  .carousel-item-next.carousel-item-left + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
  .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  /* farthest right hidden item must be abso position for animations */
  .carousel-inner .carousel-item-prev.carousel-item-right {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
    visibility: visible;
  }

  /* right or prev direction */
  .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
  .carousel-item-prev.carousel-item-right + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
  .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
    position: relative;
    transform: translate3d(100%, 0, 0);
    visibility: visible;
    display: block;
    visibility: visible;
  }
}

.drop-4w {
  background: url(../images/menu_03.jpg) no-repeat right top;
  height: 128px;
  width: 272px;
}
.drop-6w {
  background: url(../images/menu_05.jpg) no-repeat right top;
  height: 128px;
  width: 272px;
}
.drop-10w {
  background: url(../images/menu_06.jpg) no-repeat right top;
  height: 128px;
  width: 272px;
}
.drop-trailer {
  background: url(../images/menu_07.jpg) no-repeat right top;
  height: 128px;
  width: 272px;
}
.drop-custom {
  background: url(../images/custom_03.jpg) no-repeat right top;
  height: 128px;
  width: 272px;
}

@media (min-width: 576px) {
  .bd-example {
    padding: 1.5rem;
    margin-right: 0;
    margin-left: 0;
    border-width: .2rem;
  }
}
.bd-example {
  position: relative;
  padding: 1rem;
  margin: 1rem -15px 0;
  border: solid #f8f9fa;
  border-width: .2rem 0 0;
}

p {
  color: #495057;
  line-height: 30px;
}
strong {
  color: #1d2124
}

.warranty {
  padding-left: 15rem;
  padding-right: 15rem;
}

.carousel-watermark {
  position: absolute;
  bottom: 15px;
  /* right: 30px; */
  opacity: 0.6;
  width: 30%;
  height: auto;
}