@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@700&display=swap');

html,body {margin: 0; padding: 0; border : 0 ;width: 100%;}
ul,ol {list-style-type: none;}
a:-webkit-any-link ,a:-moz-any-link ,a:-ms-any-link {text-decoration: none !important}

#menuToggle{display: block;position: relative;left: 30px;z-index: 1;
  -webkit-user-select: none;
  user-select: none;
      width: 50px;
      height: 50px; /*same as .menu*/

}
#menuToggle a{text-decoration: none;color: #222222;transition: color 0.3s ease;}
#menuToggle a:hover{color: #ff8c00;}
#menuToggle .lang {color: #ff8c00;display: inline-block;}
#menuToggle input{display: block;width: 55px;height: 40px;position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span{display: block;width: 53px;height: 8px;margin-bottom: 5px;position: relative;
  background: #222;border-radius: 3px;z-index: 1;transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child{transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){ transform-origin: 0% 100%;}

/* * Transform all the slices of hamburger * into a crossmark.*/
#menuToggle input:checked ~ span{opacity: 1;transform: rotate(45deg) translate(-6px, -5px);
  background: #232323;
}

/** But let's hide the middle one.*/
#menuToggle input:checked ~ span:nth-last-child(3){opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);}

/** Ohyeah and the last one should go the other direction*/
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(2.1px, -1px);
}

/** Make this absolute positioned* at the top left of the screen*/
#menu{position: absolute;width: 320px;margin: -113px 0 0 -30px;padding: 125px 20px 50px 30px;
  background: #fff;list-style-type: none;-webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  transform-origin: 0% 0%;
  transform: translate(-300%, 0);/*transform: translate(-100%, 0)*/
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
  -webkit-box-shadow: 0px 0px 18px 4px rgba(50, 50, 50, 0.7);
  	-moz-box-shadow:    0px 0px 18px 4px rgba(50, 50, 50, 0.7);
   	box-shadow:          0 0 18px 4px rgba(50, 50, 50, 0.7);
} /*f8f8f6*/

#menu li{padding: 10px 0;font: 24px 'Kanit', sans-serif;border-bottom: 2px solid rgba(204, 204, 204, 0.30);}

/** And let's slide it in from the left*/
#menuToggle input:checked ~ ul{transform: none;}

.f-nav{ z-index: 9999; position: fixed; top: 0; width: 100%;max-width: 1600px;
	-webkit-box-shadow: 0px 0px 18px 4px rgba(50, 50, 50, 0.5);
  	-moz-box-shadow:    0px 0px 18px 4px rgba(50, 50, 50, 0.5);
   	box-shadow:          0 0 18px 4px rgba(50, 50, 50, 0.5);
} /* this make our menu float top */

.content {width:100%; margin:0 auto;height: auto;max-width: 1600px;padding-bottom: 100px;
  -webkit-box-shadow: 0px 0px 18px 8px rgba(50, 50, 50, 0.27);
  -moz-box-shadow:    0px 0px 18px 8px rgba(50, 50, 50, 0.27);
   box-shadow:          0 0 18px rgba(50, 50, 50, 0.27);
}
.menu{width: 100% ;height:90px;background-color: #ff8c00;max-width: 1600px; margin: 0 auto;vertical-align: middle;}
.Lmenu {width: 30%;height: auto;display: inline-block;vertical-align: middle;margin-top: 20px;}

.Rmenu {font: 60px 'Arimo', sans-serif !important;text-align: right;letter-spacing: 2px;font-weight: bold;
margin-top: 10px;width: 69%;height: auto;display: inline-block;vertical-align: middle;}

.bLine {width:100%;height: 5px; text-align: center;background: #232323}


.footer {width: 100%;height: auto;background-color: #222;padding: 10px 0;text-align: center;}
.f_box {font: 24px 'Kanit', sans-serif;margin: 0 auto;color: #fff;letter-spacing: 1px;}

.copyright {width: 100%;height: auto;background-color: #ff8c00;padding: 3px 0;text-align: center;color: #fff;font: 20px 'Kanit', sans-serif;letter-spacing: 1px;}

.logo1 {max-width: 250px;max-height: 100px;
  -webkit-box-shadow: 0px 0px 18px 8px rgba(50, 50, 50, 0.27);
  -moz-box-shadow:    0px 0px 18px 8px rgba(50, 50, 50, 0.27);
   box-shadow:          0 0 18px rgba(50, 50, 50, 0.27);}

.logo2{ height: 80px ;width: 100%;background: #fff;
    -moz-box-shadow: 0 4px 4px rgba(50, 50, 50, 0.27);
    -webkit-box-shadow: 0 4px 4px rgba(50, 50, 50, 0.27);
    box-shadow: 0 4px 4px rgba(50, 50, 50, 0.27);

}
.logo2 > img {height: 73px;width: auto;padding-top: 3px;float: right;padding-right: 2%}

@media only screen and (min-width: 641px) and (max-width: 1000px) {
.f_box {width: 90%;}
.content {padding-bottom: 50px}
.Rmenu {font: 50px 'Arimo', sans-serif !important;}
}
@media only screen and (min-width: 481px) and (max-width: 640px) {
.Rmenu {font: 40px 'Arimo', sans-serif !important;}
.f_box {width: 90%;    font: 22px 'Kanit', sans-serif;}
.content {padding-bottom: 50px}
#menu li {font: 22px 'Kanit', sans-serif;}

}
@media only screen and (min-width: 320px) and (max-width: 480px) {

.Rmenu {font: 30px 'Arimo', sans-serif !important;width: 78%;margin-top: 20px;}
.Lmenu {width: 20%;margin-top: 30px;}
#menuToggle {left: 10px}

#menu {width: 260px;padding: 125px 20px 50px 50px;}
.f_box {width: 90%;font: 20px 'Kanit', sans-serif;}
.content {padding-bottom: 50px}
#menu li{font: 22px 'Kanit', sans-serif;}
}