@charset "utf-8";
/* DEFAULT CSS :: Anuthep Janthamas */

/* Reset */
*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
input, button, textarea, select {
   font: inherit;
}


/* Selection Drag & Drop element */
::-moz-selection{ background: #0d569b; color: #fff; }
::selection{ background: #0d569b; color: #fff; }


/* Scroll bar */
::-webkit-scrollbar{ width: 5px; height: 5px; } /* Scroll size */
::-webkit-scrollbar-track{ background: #333 } /* Scroll background */
::-webkit-scrollbar-thumb{ background: #b39d4f } /* Scroll tab */
/*::-webkit-scrollbar-thumb{ background: #0d569b } Scroll tab */


html{
   /* ขนาดของ font เป็น %
   เพื่อใช้เทคนิค rem ในการอ้างอิง font-size */
   font-size: 62.5%;

   /* ยกเลิกการใช้งาน */
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: rgba(255,255,255,0);
}

body{
   /* ฟิลเตอร์ทำให้เว็บเป็นโทนสีขาวดำ
   filter: grayscale(0%); */

   box-sizing: border-box;
   position: relative;

   /* ซ่อน Scroll-bar ในแนวแกน X */
   overflow-x: hidden !important;
   width: 100%;

   /* Padding-top 60px ใช้ในกรณีต้องการดันขอบด้านบน
   เพื่อไม่ให้ข้อมูลซ้อนทับกันกับ Navigate
   เนื่องจาก Navigate มี fixed ตำแหน่งหน้าจอ */
   padding-top: 0px;

   /* background: #fff; */
   font-family: 'prompt';
   font-size: 2rem;
   color: #222;

   transition: all 0.3s ease;
}
/* ตั้งค่าการใช้งาน Font ภายในเว็บ */
body, input, textarea, select, button{
   font-family: 'Prompt', sans-serif;
   font-size: 2rem;
   line-height: 30px;
   font-weight: normal;
   text-align: left;
}
img{
   display: block;
   margin: 0 auto;
}
a{
   cursor: pointer;
   text-decoration: none;
   /* link ลิ้งที่ยังไม่เคยเยี่ยมชม
   visited ลิ้งที่เข้าเยี่ยมชมแล้ว
   active ขณะที่กำลังคล๊ก
   hover ขณะที่เมาส์อยู่ด้านบน
   focus ตัว Browser โฟกัสไปที่ลิ้ง */
   color: #222;
}
h1,h2,h3,h4,h5,h6{ font-weight: unset }
p{ text-indent: 20px }
b{
   font-family: 'prompt_medium';
   font-weight: normal;
}
i{ font-style: italic }
u{ text-decoration: underline }
/* ขีดเส้นทับ */
s{ text-decoration: line-through }
/* ตัวยก */
sup{
   vertical-align: super;
   font-size: smaller;
}
/* ตัวห้อย */
sub{
   vertical-align: sub;
   font-size: smaller;
}
small{ font-size: smaller }
big{ font-size: larger }
table, th, td{
   border: 1px solid #ddd;
   border-collapse: collapse;
   padding: 10px;
}


/* Hide
ใช้สำหรับซ่อน Element */
.hide{
   display: none !important;
}


/* Space
ใช้สำหรับสร้างพื้นที่ว่างระหว่างส่วนแต่ละส่วน */
.space-10,.space-20,.space-30,.space-40,
.space-50,.space-60,.space-70{ display: block }
.space-10{ height: 10px }
.space-20{ height: 20px }
.space-30{ height: 30px }
.space-40{ height: 40px }
.space-50{ height: 50px }
.space-60{ height: 60px }
.space-70{ height: 70px }


/* Container
ใช้สำหรับห่อหุ้ม Element */
.container{
   display: block;
   box-sizing: border-box;
   position: relative;
   width: 100%;
   /* ตั้งค่าความกว้างสูงสุดของหน้าเว็บ */
   max-width: 1200px;
   margin: 0 auto;
   /* ตั้งค่าระยะห่างของขอบจอ */
   padding: 0px 20px;

   transition: filter 0.1s linear;
}
   .craft{
      background-color: #c6dbd8;
      background-image: url('../../../upload/img/_craft.svg');
      background-size: 100px 100px;
      background-repeat: repeat;
   }


/* Section
ใช้สำหรับแบ่งส่วนต่างๆ ออกจากกัน */
.section{
   display: block;
   padding: 30px 0px;
}



/* 404 page
หน้าแสดงข้อผิดพลาดพิเศษ */
.p404{
   display: block;
   padding: 100px 0px 50px;
}
.p404-title{
   display: block;
   font-family: 'prompt_medium';
   font-size: 20rem;
   line-height: 150px;
   text-align: center;
   color: #988753;
   transition: color 0.3s ease;
}
.dark .p404-title{
      color: #fff;
   }
.p404-des{
   display: block;
   padding-top: 10px;
   text-align: center;
   transition: color 0.3s ease;
}
   .dark .p404-des{
      color: #fff;
   }


.footer{
   display: block;
}
.footer-copy_right{
   display: block;
   padding: 15px 0px;
   border-top: 1px solid #eee;
   text-align: center;
}
.footer-msg{
   display: block;
   width: 100%;
   max-width: 800px;
   margin: 0 auto;
   padding: 30px 0px;
   text-align: center;
}



/* Form
ฟอร์มในการกรอกข้อมูลอะไรต่างๆ */
.form{
   display: block;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
}
   .form.mini{
      max-width: 500px;
   }
/* Group > Row > Col > Box
ใช้สำหรับจัดกลุ่มของฟอร์ม */
.form-group{
   display: block;
}
.form-row{
   display: block;
   box-sizing: border-box;
   padding: 0px;
}
/* column */
.form-col_1,
.form-col_2,
.form-col_3,
.form-col_4{
   display: block;
   box-sizing: border-box;
   padding: 10px 10px 0px;
}
   .form-col_1{
      display: inline-block;
      width: 50%;
   }
   .form-col_2{ width: 100% }
   .form-col_3{ width: 100% }
   .form-col_4{ width: 100% }
/* form box */
.form-box{
   display: block;
   position: relative;
   background-color: #dde9ec;
   border-radius: 10px;
   transition: background 0.3s ease;
}
.form-label{
   display: block;
   padding: 0px 0px 3px 3px;
}
   .form-label span{
      font-size: 1.8rem;
      color: #b487a0;
   }
.form-input{
   display: inline-block;
   vertical-align: top;
   width: 100%;
   height: 50px;
   /* background-color: #dde9ec; */
   background-color: rgba(255, 255, 255, 0);
   outline: 0px;
   padding: 10px 20px;
   border: 0px;
   border-radius: 10px;
   /* font-family: 'prompt_medium'; */
   font-family: 'prompt';
   line-height: 30px;
   color: #007373;
   transition: background 0.3s ease;
}
.form-textarea{
   display: inline-block;
   vertical-align: top;
   width: 100%;
   min-width: 100%;
   max-width: 100%;
   min-height: 50px;
   /* background-color: #dde9ec; */
   background-color: rgba(255, 255, 255, 0);
   outline: 0px;
   padding: 10px 20px;
   border: 0px;
   border-radius: 10px;
   /* font-family: 'prompt_medium'; */
   font-family: 'prompt';
   line-height: 30px;
   color: #007373;
   transition: background 0.3s ease;
}
.form-submit{
   display: block;
   padding: 10px 10px 0px;
   text-align: center;
}
.form-submit_des{
   display: block;
   padding: 10px;
   color: #555;
}
.form-submit_button{
   cursor: pointer;
   display: inline-block;
   justify-self: center;
   background-image: url('../img/patter-slash_left_b_10px.png');
   background-repeat: repeat;
   background-size: 10px 10px;
   background-color: #0d569b;
   padding: 10px 20px;
   border-radius: 15px;
   outline: 0px;
   border: 0px;
   font-family: 'prompt';
   font-size: 2.2rem;
   color: #fff;
   user-select: none;
   text-shadow: 0px 3px 5px rgba(0,0,0,0.5);
   transition: background 0.3s ease;
}
   .form-submit_button:hover{
      background-color: #116bbe;
      color: #fff !important;
   }
@media only screen and (min-width: 800px){
   .form-col_1,
   .form-col_2,
   .form-col_3,
   .form-col_4{
      display: inline-block;
      vertical-align: top;
   }
   .form-col_1{ width: 25% }
   .form-col_2{ width: 50% }
   .form-col_3{ width: 75% }
   .form-col_4{ width: 100% }
}



/* Button */
.button{
   cursor: pointer;
   display: inline-block;
   justify-self: center;
   /* background-image: url('../img/patter-slash_left_b_10px.png');
   background-repeat: repeat;
   background-size: 10px 10px; */
   background-color: #0d569b;
   padding: 5px 20px;
   border-radius: 15px;
   outline: 0px;
   border: 0px;
   font-family: 'prompt';
   font-size: 2rem;
   color: #fff;
   user-select: none;
   text-shadow: 0px 3px 5px rgba(0,0,0,0.5);
   transition: background 0.3s ease;
}
   .button:hover{
      background-color: #116bbe;
      color: #fff !important;
   }

   /* Button size
   คลาสควบคุมขนาดของปุ่ม */
   .button.big{
      padding: 10px 30px;
      border-radius: 20px;
      font-family: 'prompt';
      font-size: 2.4rem;
   }
   .button.small{
      padding: 0px 10px;
      border-radius: 10px;
      font-family: 'prompt_ex';
      font-size: 1.8rem;
   }

   /* Button color
   คลาสควบคุมสีของปุ่ม */
   .button.gray{
      background-color: #bbb;
   }
      .button.gray:hover{
         background-color: #aaa;
      }
   .button.gold{
      background-color: #b09e68;
   }
      .button.gold:hover{
         background-color: #ceb772;
      }
   .button.green{
      background-color: #5ca368;
   }
      .button.gold:hover{
         background-color: #80c18b;
      }