body {
 margin: 0px;
 min-height: 100vh;
 display: flex;
 flex-direction: column;
 font-family: 'Roboto', Sukhumvit, sans-serif;
 font-weight: 100;
 font-size: 18px;
 cursor: url(images/cursor-d.png), auto;
}
.container, .container-fluid {
 width: 100%;
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 position: relative;
 box-sizing: border-box;
}
@media only screen and (min-width: 1200px) {
 .container {
  max-width: 1140px;
 }
 .container-fluid {
  max-width: 1500px;
 }
}
@media only screen and. (min-width: 992px) and (max-width: 1199px) {
 .container {
  max-width: 960px;
 }
}
@media only screen and. (min-width: 768px) and (max-width: 991px) {
 .container {
  max-width: 720px;
 }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
 .container {
  max-width: 560px;
 }
}

a {
 cursor: url(images/cursor.png), auto;
}

img {
 max-width: 100%;
 object-fit: contain;
}

.header {
 background-color: #932f31;
 padding: 0px 15px;
}
 .header .container-fluid {
  display: flex;
 }
  .header img.logo {
   position: absolute;
   top: 15px;
   width: 100px;
   margin: 0px 5px;
   z-index: 1;
  }
 
  .header .box-right {
   display: flex;
   align-items: center;
   margin: 9px 0px 9px auto;
   flex-flow: wrap;
   justify-content: end;
  }
   .header .box-right a {
    color: #fff;
    padding: 10px;
    text-decoration: none;
   }
    .header .box-right i {
     font-size: 21px;
    }

img.img-no1 {
 width: 130px;
 position: absolute;
 right: 30px;
 top: 20px;
 z-index: 1;
}
 
.body {
 min-height: calc(100vh - 60px - 90px);
 display: flex;
 justify-content: center;
 align-items: center;
 position: relative;
 overflow: hidden;
}
 .body #box-bg {
  position: absolute;
  inset: 0;
  background: url(images/bg.jpg) no-repeat top center;
  background-size: cover;
  transform: scale(1.01);
 }
 .body .box-img-product {
  padding: 11% 30px 30px;
  max-width: 900px;
  margin: auto;
 }
 
 .body .box-list {
  background-color: #fff;
  display: flex;
  justify-content: center;
  padding: 20px;
  border-radius: 50px;
  font-size: 1.5em;
  font-weight: 500;
  max-width: max-content;
  margin: 35px auto 60px auto;
  box-shadow: -4px 14px 14px 6px rgb(0 0 0 / 22%);
 }
  .body .box-list .b-list {
   border-left: 1px solid #a0a0a0;
   padding-left: 20px;
   margin-left: 20px;
  }
  .body .box-list .b-list:first-child {
   border-left: none;
   padding-left: 0px;
   margin-left: 0px;
  }
   .body .box-list a {
    color: #000;
    text-decoration: none;
    display: flex;
    align-items: center;
    margin: 0px 15px;
    transition: transform .5s;
   }
   .body .box-list a:hover {
    transform: scale(1.1);
   }
    .body .box-list img {
     height: 45px;
     margin-right: 18px;
    }
    .body .box-list span {
     
    }
    
.footer {
 margin-top: auto;
 background-color: #fff;
 padding: 15px 20px;
}
 .footer .container-fluid {
  display: flex;
  justify-content: end;
 }
  .footer img {
   height: 60px;
  }
 
/* ---------------------------------------------------**** Tablet ****--------------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
 .body .box-list {
  font-size: 1em;
 }
 .body .box-list a {
  margin: 0px 10px;
 }
 .body .box-list img {
  height: 30px;
 }
}

/* ---------------------------------------------------**** Mobile ****--------------------------------------------------- */
@media only screen and (min-width: 320px) and (max-width: 767px) {
 .container-fluid {
  padding-right: 0px;
  padding-left: 0px;
 }
 .header img.logo {
  width: 70px;
 }
 .header .box-right a {
  padding: 5px 10px;
 }
 .body {
  min-height: calc(100vh - 60px - 60px);
 }
 .body .box-list {
  font-size: 15px;
  margin: 0px auto 35px auto;
  padding: 10px 20px;
 }
 .body .box-list .b-list {
  padding-left: 15px;
  margin-left: 15px;
 }
 .body .box-list a {
  margin: 0px;
  justify-content: center;
 }
 .body .box-list img {
  height: 32px;
  width: 32px;
  margin-right: 12px;
 }
 img.img-no1 {
  width: 90px;
  right: 20px;
 }
 .footer img {
  height: 30px;
 }
 /* แนวตั้ง */
 @media only screen and (orientation:portrait){
  .header img.logo {
   position: relative;
   margin: 0px 0px -22px 0px;
  }
  .body {
   min-height: calc(100vh - 81px - 60px);
  }
  .body .box-list {
   background-color: transparent;
   box-shadow: none;
   margin: auto;
   flex-direction: column;
   max-width: none;
  }
  .body .box-list .b-list {
   margin: 10px 0px;
   padding: 0px;
   border: 0;
  }
  .body .box-list a {
   padding: 10px 22px !important;
   background-color: #fff;
   border-radius: 50px;
   box-shadow: -4px 14px 14px 6px rgb(0 0 0 / 22%);
  }
  .body .box-list span {
   padding-right: 44px;
   width: 100%;
   text-align: center;
  }
  .body .box-img-product {
   padding: 115px 0px 15px;
   margin: 0px -15px;
  }
 }
 /* แนวนอน */
 @media only screen and (orientation:landscape){

 }
}