html {
  scroll-behavior: smooth;
  }
  :root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
  }
  body {
  margin:0;
  overflow-x:hidden;
  font-family: 'Kanit', sans-serif;
  }
  a{
  text-decoration:none;
  }
  li{
  list-style:none;
  }
  em{
  font-style:normal;
  color:#138275;
  }
  p{
  font-size:1.2em;
  color:rgba(1,1,1,0.6);
  }
  .title{
  font-size:3em;
  font-family: 'Archivo Black', sans-serif;
  }
  .sub-title{
  font-size:1em;
  font-family: 'Kanit', sans-serif;
  color:gray;
  }
  .btn1{
  padding:10px 20px;
  box-shadow:0px 3px 8px -3px rgba(1,1,1,0.5);
  outline:none;
  border:0;
  background:#138275;
  border-radius:20px;
  color:#fff;
  font-weight:400;
  text-align:center;
  transition:0.5s;
  }
  .btn1:hover{
  background-color:#1e1e1e;
  }
  .logout{
    padding:5px;
    width:60px;
    height:30px;
    border-radius:5px;
    border:2px solid black;
  background:#138275;
    font-weight:400;
    color:#fff;
  }
  .btn1n{
  box-shadow:0px 3px 8px -3px rgba(1,1,1,0.5);
  outline:none;
  border:1px solid black;
  background:#138275;
  border-radius:20px;
  color:#fff;
  font-weight:400;
  text-align:center;
  transition:0.5s;
  width:50px;
  height:20px;
  }
  .btn1n:hover{
  background-color:#1e1e1e;
  }
  .btn2{
  padding:5px 20px;
  box-shadow:0px 3px 8px -3px rgba(1,1,1,0.5);
  outline:none;
  border:0;
  background:#4033ff;
  border-radius:20px;
  color:#fff;
  font-weight:400;
  text-align:center;
  transition:0.5s;
  }
  .btn2:hover{
  background:#3d35ec;
  }
  @media (max-width:900px){
  .btn1{
  padding:5px 10px;
  }
  }
  .banner{
  text-align:center;
  }
  .ml9 {
  position: relative;
  font-weight: 200;
  font-size:3.1em;
  }
  .ml9 .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
  }
  .ml9 .letter {
  transform-origin: 50% 100%;
  display: inline-block;
  line-height: 1em;
  }
  
  .loading{
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(#9ad5ff , #0071d6);
  }
  
  .loader{
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: perspective(500px) rotatex(45deg);
  }
  
  .loader span{
  position: absolute;
  display: block;
  border: 15px solid #fff;
  box-sizing: border-box;
  border-radius: 50%;
  box-shadow: 0 10px 0 #e0e0e0 , inset 0 10px 0 #e0e0e0;
  animation: animate 4.5s ease-in-out infinite;
  }
  
  .loader span:nth-child(1){
  animation-delay: 0s;
  
  }
  
  .loader span:nth-child(2){
  animation-delay: 1.5s;
  }
  
  .loader span:nth-child(3){
  animation-delay: 3s;
  }
  
  @keyframes animate{
  0%{
  transform: translatez(-100px);
  width: 100%;
  height: 100%;
  }
  25%{
  transform: translatez(100px);
  width: 100%;
  height: 100%;
  }
  50%{
  transform: translatez(100px);
  width: 35%;
  height: 35%;
  }
  75%{
  transform: translatez(-100px);
  width: 35%;
  height: 35%;
  }
  100%{
  transform: translatez(-100px);
  width: 100%;
  height: 100%;
  }
  }
  
  /* Add animation to "page content" */
  .page-animate {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
  }
  
  @-webkit-keyframes animatebottom {
  from { bottom:0px; opacity:0 } 
  to { bottom:0px; opacity:1 }
  }
  
  @keyframes animatebottom { 
  from{ bottom:0px; opacity:0 } 
  to{ bottom:0; opacity:1 }
  }
  
  #myPageShow {
  display: none;
  }
  header{
  position:static;
  top:0;
  width:100%;
  z-index:999;
  }
  
  .topnav {
  overflow: hidden;
  width:90%;
  margin:auto;
  background-color: #fff;
  z-index:9999;
  }
  
  .topnav a {
  float: right;
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition:0.5s;
  }
  
  .topnav .logo{
  float:left;
  font-family: 'Fredoka One', cursive;
  color:#000;
  font-size:2em;
  }
  
  .active {
  color:gray;
  }
  
  .topnav .icon {
  display: none;
  }
  
  .dropdown {
  float: right;
  overflow: hidden;
  }
  
  .dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: #000;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  }
  
  .dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  }
  
  .dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
  }
  
  .topnav a:hover, .dropdown:hover .dropbtn {
  color:#138275;
  }
  
  .dropdown-content a:hover {
  background-color: #ddd;
  color: black;
  }
  
  .dropdown:hover .dropdown-content {
  display: block;
  }
  
  @media screen and (max-width: 900px) {
  .topnav{
  background:#fff;
  width:100%;
  }
  .topnav a:not(:first-child), .dropdown .dropbtn {
  display: none;
  }
  .topnav a.icon {
  float: right;
  display: block;
  }
  }
  
  @media screen and (max-width: 900px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
  }
  .topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
  display: block;
  width: 100%;
  text-align: left;
  }
  .topnav .logo{
  font-size:1.5em;
  }
  }
  /*MAIN*/
  .main{
  width:100%;
  height:80vh;
  background-image:url("https://i.ibb.co/w6DYdtx/main-bg.webp");
  background-attachment:fixed;
  background-size:cover;
  }
  
  .main section{
  position:absolute;
  top:15vh;
  left:3em;
  width:40%;
  }
  
  .main section .sub-title{
  color:#1e1e1e;
  }
  
  @media (max-width:900px){
  .main{
  height:50vh;
  background-attachment:local;
  background-size:100% 100%;
  }
  .main section{
  width:80%;
  }
  }
  
  .section0{
  width:90%;
  background:whitesmoke;
  padding:30px 10px;
  box-shadow:0px 6px 16px -6px rgba(1,1,1,0.5);
  border-radius:5px;
  position:relative;
  top:5vh;
  margin:100px;
  }
  
  .section0 .card{
  width:24%;
  display:inline-block;
  }
  
  .section0 .card table{
  width:100%;
  }
  
  .section0 .card table td:nth-child(1){
  width:20%;
  }
  
  .section0 .card .title{
  font-size:1em;
  }
  
  .section0 .card i{
  font-size:3em;
  color:#138275;
  margin:0px 10px;
  float:left;
  }
  
  @media (max-width:720px){
  .section0{
  overflow-x:auto;
  scrollbar-width:none;
  scroll-behavior: smooth;
  display:flex;
  align-items:left;
  justify-content: left;
  position:relative;
  top:0vh;
  padding:20px;
  }
  .section0 .card{
  min-width:90%;
  display:inline-block;
  }
  }
  
  .section1{
  width:95%;
  margin:auto;
  }
  
  .section1 .cards{
  width:30%;
  height:250px;
  border-radius:5px;
  box-shadow:0px 6px 16px -6px rgba(1,1,1,0.5);
  position:relative;
  margin:1%;
  display:inline-block;
  background-image:url("https://i.ibb.co/yq0f7VT/card.png");
  background-size:cover;
  }
  
  .section1 .cards section{
  width:40%;
  padding:20px;
  }
  
  .section1 .cards section .title{
  font-size:1.5em;
  }
  
  .section1 .cards section .sub-title{
  display:block;
  margin-bottom:5vh;
  }
  
  @media (max-width:720px){
  .section1{
  overflow-x:auto;
  scrollbar-width:none;
  scroll-behavior: smooth;
  display:flex;
  align-items:left;
  justify-content: left;
  margin-top:5vh;
  }
  .section1 .cards{
  min-width:99%;
  display:inline-block;
  }
  }
  
  .section2{
  width:95%;
  margin:auto;
  }
  
  .section2 table{
  width:100%;
  }
  
  .section2 table td{
  width:50%;
  }
  
  .section2 table td li{
  padding:5px 0px;
  }
  
  .section2 table td li:before{
  content:"\f0a4";
  font-family:"FontAwesome";
  color:#138275;
  margin:0px 5px;
  }
  
  .section2 table td img{
  width:90%;
  margin:auto;
  height:90%;
  }
  
  .section3{
  width:100%;
  background-image:url("https://i.ibb.co/RhDMqPX/bg.webp");
  background-size:cover;
  background-attachment:fixed;
  }
  
  .section3 table{
  width:90%;
  height:70vh;
  margin:auto;
  }
  
  .section3 table td{
  width:50%;
  height:70vh;
  }
  
  .section3 table td li{
  padding:5px 0px;
  }
  
  .section3 table td li:before{
  content:"\f0a4";
  font-family:"FontAwesome";
  color:#138275;
  margin:0px 5px;
  }
  
  .section3 .card {
  position: relative;
  width: 60%;
  height:90%;
  overflow: hidden;
  border-radius: 5px;
  }
  
  .section3 .card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 900;
  display: block;
  width: 100%;
  height: 100%;
  }
  
  .section3 .card_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-size:100% 100%;
  transform: translateX( 700px );
  background-image: url(https://i.ibb.co/w784353/slide4.png);
  background-repeat:no-repeat;
  animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
  }
  
  .section3 .card_part.card_part-two {
  z-index: 6;
  background-image: url(https://i.ibb.co/zGB2MbJ/slide1.png);
  animation-delay: 7s;
  background-repeat:no-repeat;
  }
  
  .section3 .card_part.card_part-three {
  z-index: 5;
  background-image: url(https://i.ibb.co/Cs64fpv/slide2.png);
  animation-delay: 14s;
  background-repeat:no-repeat;
  }
  
  .section3 .card_part.card_part-four {
  z-index: 4;
  background-image: url(https://i.ibb.co/Ch3xHbZ/slide3.png);
  animation-delay: 21s;
  background-repeat:no-repeat;
  }
  
  
  @keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -700px ); }
  100% { transform: translateX( -700px ); }
  }
  
  @media (max-width:720px){
  .section2 table td,.section3 table td{
  display:block;
  width:96%;
  margin:2% 0%;
  }
  .section2 table td img{
  display:none;
  }
  .section3 .card {
  position: relative;
  width: 60%;
  height:90%;
  }
  .section3 table td{
  height:50vh;
  }
  }
  
  .slick{
  background:#f8f8f8;
  padding:30px 0px;
  }
  .slick table{
  width:100%;
  margin-left:auto;
  margin-right:auto;
  }
  
  .slick table td{
  width:30%;
  padding:1%;
  }
  
  .slick table td ul li{
  list-style:none;
  padding:10px 0px;
  }
  
  .slick table td ul li a{
  text-decoration:none;
  transition:0.5s;
  }
  
  .slick table td ul li a:hover{
  color:#8798bd;
  }
  
  .slick table td ul li h3{
  color:#000;
  font-weight:bold;
  }
  
  .slick table td ul li p{
  color:rgba(1,1,1,0.7);
  }
  
  .slick table td:nth-child(1) ul{
  text-align:right;
  }
  
  .slick table td:nth-child(3) ul{
  text-align:left;
  }
  
  .slick table td:nth-child(2) .card{
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  }
  
  .slick .card {
  position: relative;
  width: 90%;
  height:70vh;
  overflow: hidden;
  border-radius: 5px;
  }
  
  
  .slick .card::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  z-index: 900;
  display: block;
  width: 100%;
  height: 100%;
  }
  
  .slick .card_part {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 7;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background-size:cover;
  transform: translateX( 700px );
  background-image: url("https://i.ibb.co/BjTv902/slick1.webp");
  background-repeat:no-repeat;
  animation: opaqTransition 28s cubic-bezier(0, 0, 0, 0.97) infinite;
  }
  
  
  .slick .card_part.card_part-two {
  z-index: 6;
  background-image: url("https://i.ibb.co/L6MCbHt/slick2.webp");
  animation-delay: 7s;
  background-repeat:no-repeat;
  }
  
  .slick .card_part.card_part-three {
  z-index: 5;
  background-image: url("https://i.ibb.co/qMcnqn8/slick3.webp");
  animation-delay: 14s;
  background-repeat:no-repeat;
  }
  
  .slick .card_part.card_part-four {
  z-index: 4;
  background-image: url("https://i.ibb.co/1ZsVZhX/slick4.webp");
  animation-delay: 21s;
  background-repeat:no-repeat;
  }
  
  
  @keyframes opaqTransition {
  3% { transform: translateX( 0 ); }
  25% { transform: translateX( 0 ); }
  28% { transform: translateX( -700px ); }
  100% { transform: translateX( -700px ); }
  }
  
  
  @media (max-width:600px){
  .slick table td{
  width:100%;
  display:block;
  }
  .slick table td:nth-child(1) ul{
  text-align:left;
  }
  }
  
  @media (max-width:500px){
  .slick table td{
  width:100%;
  display:block;
  }
  .slick table td:nth-child(1) ul{
  text-align:left;
  }
  .title{
  font-size:1.3em;
  }
  .sub-title{
  font-size:0.6em;
  }
  .slick table td ul li{
  padding:5px 0px;
  }
  }
  .section4{
  width:100%;
  height:60vh;
  border-radius:5px;
  text-align:center;
  background-image: url(https://i.ibb.co/phXVD7v/bg2.png);
  background-size:cover;
  padding:30px;
  }
  
  .section4 .sub-title{
  color:#000;
  }
  
  .footer{
  background:#000;
  padding:30px 0px;
  font-family: 'Play', sans-serif;
  }
  
  .footer .column{
  width:20%;
  margin:0% 1%;
  display:inline-block;
  }
  
  .footer .column ul{
  width:100%;
  }
  
  .footer .column ul li{
  list-style:none;
  padding:5px 0px;
  color:gray;
  }
  
  .footer .column ul li a{
  text-decoration:none;
  font-size:0.8em;
  color:gray;
  transition:0.5s;
  }
  
  .footer .column ul li a:hover{
  color:#138275;
  }
  
  .footer .column ul .title{
  font-family: 'Fredoka One', cursive;
  font-size:1.2em;
  color:#fff;
  }
  
  .footer .column ul li input{
  padding:5px 5px;
  outline:none;
  border:0;
  width:70%;
  height:30px;
  color:#1e1e1e;
  }
  
  .footer .column ul li .btn1{
  background:;
  outline:none;
  border:0;
  padding:5px;
  color:#fff;
  height:44px;
  font-size:0.5em;
  background:#138275;
  border-radius:0px;
  }
  
  .footer .column ul li i{
  font-size:1.5em;
  margin:0px 10px;
  }
  
  .sub-footer{
  background:#1e1e1e;
  padding:5px 0px;
  text-align:center;
  color:gray;
  font-size:12px;
  font-family: 'Play', sans-serif;
  }
  
  @media (max-width:720px){
  .footer .column{
  width:90%;
  display:block;
  margin:0% 0%;
  }
  
  .footer .column:nth-child(2),.footer .column:nth-child(3){
  width:40%;
  display:inline-block;
  }
  }
  
  @media (max-width:1200px){
  .footer .column ul li input{
  padding:5px 5px;
  outline:none;
  border:0;
  width:70%;
  height:34px;
  color:#1e1e1e;
  }
  }
  
  @media (max-width:940px){
  .footer .column ul li input{
  padding:5px 5px;
  outline:none;
  border:0;
  width:60%;
  height:34px;
  color:#1e1e1e;
  }
  }
  
  .overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0, 0.9);
  }
  
  .overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
  }
  
  .overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
  }
  .overlay .closebtn:hover {
  color: #ccc;
  }
  .overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 70%;
  background: white;
  }
  .overlay input[type=text]:hover {
  background: #f1f1f1;
  }
  .overlay button {
  float: left;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
  }
  
  .overlay button:hover {
  background: #bbb;
  }