/**
 * Theme Name: Primer
 * Theme URI: https://github.com/godaddy/wp-primer-theme
 * Author: GoDaddy
 * Author URI: https://www.godaddy.com/
 * Description: Primer is a powerful theme that brings clarity to your content in a fresh design.
 * Version: 1.8.6
 * License: GPL-2.0
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: primer
 * Domain Path: /languages
 * Tags: custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, left-sidebar, one-column, right-sidebar, rtl-language-support, sticky-post, threaded-comments, three-columns, translation-ready, two-columns
 *
 * This theme, like WordPress, is licensed under the GPL.
 * Use it to make something cool, have fun, and share what you've learned with others.
 *
 * Copyright ? 2017 GoDaddy Operating Company, LLC. All Rights Reserved.
 */
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
    ## Posts and pages
	## Comments
# Compatibility
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/


/*--------------------------------------------------------------
# Site Layout
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@500&display=swap');

/*** CUSTOM CONTAINER : TO ARRANGE ALL ELEMENT TO GRID ***/
.container-main{

  display:grid;
  width:100vw;
  /*heigth:700vh;*/
  grid-template-columns: 1fr 1170px 1fr;
  grid-template-rows:    0.5fr auto;
  grid-template-areas: 
  "menu-bar menu-bar menu-bar"
  "side-left content side-right";
  
  grid-gap: 0.2rem;
  
  /*grid-gap: 0.2rem;*/
  /*text-align: center;*/
  
  font-family: "Sarabun";
	font-weight:500;
	font-size:14px;
	color: #000000;
	
    
    
}

#side-left-space{
	/*background-color: green;*/
	grid-area:side-left;
	padding-top:25px;
}
#side-right-space{
	/*background-color: red;*/
	grid-area:side-right;
	padding-top:25px;
}



#content {
  /*max-width: 1100px;*/
  display:inline-grid;
						/*** width=1110 content=736.67=66.36% | side-menu-r=363.33 **/
  grid-template-columns: 1fr;
  grid-template-rows:    1fr;
  grid-template-areas: 
	  "primary-contentr";
	  
  /*border-bottom: 3px dotted grey;*/
  
  grid-area: content;
  text-align: center;
  
  
}
	/*** Div inside content-area-container ***/
	#title-post{
		text-align: center;
		padding:10px;
	}
	#content p{
		text-align:left;
	}


#slide-top{
  grid-area: slide-top;
  background-color: #ecd98b;
  /*padding-top:25px;*/
}
#static-menu{
  display:inline-grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows:    1fr;
  grid-template-areas: 
	  "paperless request e-money ict";
	  
  grid-area: static;
  /*background-color: #ecbb8b;*/
  border-bottom: 3px dotted grey;

}
	#paperless{grid-area: paperless;}
		#paperless img{display: block;
						width: 100%;
						max-width: 292.5px;
						height: auto;}
	
	#request{grid-area: request;}
		#request img{display: block;
						width: 100%;
						max-width: 292;
						height: auto;}
	#e-money {grid-area: e-money;}
		#e-money img{display: block;
						width: 100%;
						max-width: 292;
						height: auto;}
	#ict{grid-area: ict;}
		#ict img{display: block;
						width: 100%;
						max-width: 292;
						height: auto;}


#link-dropdown{
  grid-area: link-drop;
  background-color: #c2ec8b;
  padding-top:25px;
}
#news3{
  grid-area: news3;
  background-color: #8bece6;
  padding-top:25px;
}
#news-text{
  grid-area: news-text;
  background-color: #8ba9ec;
  padding-top:25px;
}
#questions{
  grid-area: questions;
  background-color: #b48bec;
  padding-top:25px;
}
#contacts{
  grid-area: contacts;
  background-color: #e68bec;
  padding-top:25px;
}


/*  
.site-content:after {
    content: " ";
    display: block;
    clear: both; 
}
@media only screen and (max-width: 61.063em) {
    .site-content {
      margin-top: 1.38889%;
	} 
}
*/


/************ NEW Navigation **************/	
/* RESET RULES */
/*@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@500&display=swap');*/

:root {
  --white: #fff;
  --black: #221f1f;
  --lightpurples: #9e91f2;
  --darkgray: #1e1f26;
  --black2: #000000;
  
  --main-radius:5px;
  --main-padding:5px;
  --main-padding2:8px;
  
  --main-navfont-size:14px;
  --hover-link-color: red;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


li, a{
	font-family: "Sarabun";
	font-weight:500;
	font-size:var(--main-navfont-size);
	color: #000000;
	text-decoration: none;
}

/* MAIN RULES*/
#site-logo{
	display: block;
	width: 100%;
	max-width: 280px;
	height: auto;
	cursor: pointer;
	
	/*margin-left: 130px;*/
	grid-area: site-logo;

	
}

#menu-bar{
	/*
	grid-template-columns:1fr;
	grid-template-rows:1fr;
	grid-template-areas:
	"main-menu-drop";
	grid-area:menu-bar;
	background-color:grey;*/
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: inline-grid;
  
  
  padding: 10px;
  z-index: 2;
  background: var(--white);
  transition: transform 0.4s;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  
  
  grid-template-columns: 0.2fr 0.45fr 0.09fr 0.15fr 0.14fr 0.14fr 0.2fr 0.13fr 0.1fr 0.07fr 0.2fr;
  grid-template-rows: 1.5fr;
  grid-template-areas:
    "left-spacing site-logo nav1 nav2 nav3 nav4 nav5 nav6 nav7 nav8 right-spacing";

  grid-area:menu-bar;
    
	
	
	
}
/*
.trigger-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: inline-grid;
  
  
  padding: 5px;
  z-index: 2;
  background: var(--white);
  transition: transform 0.4s;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  
  
  grid-template-columns: 0.2fr 0.45fr 0.09fr 0.15fr 0.14fr 0.14fr 0.2fr 0.13fr 0.1fr 0.07fr 0.2fr;
  grid-template-rows: 1.5fr;
  grid-template-areas:
    "left-spacing site-logo nav1 nav2 nav3 nav4 nav5 nav6 nav7 nav8 right-spacing";

  grid-area:main-menu-drop;
    
  
  
}*/

#left-spacing{
	grid-area: left-spacing;
	
}

#right-spacing{
	grid-area: right-spacing;
}

.nav_links{
	list-style-type: none;
}

#nav1{
	grid-area: nav1;
	list-style-type: none; /* NO BULLET */
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;

}
#nav1 li a{
	transition: all 0.3s ease 0s;
	color:var(--black);
}
#nav1 li a:hover{
	color: var(--hover-link-color);
}

/***************** START Nav2 *******************/

#nav2{ /** Dropdown : เกี่ยวกับเรา **/
	grid-area: nav2;
	list-style-type: none;
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;
}
#nav2 li a{
	transition: all 0.3s ease 0s;
	color:var(--black);
}
#nav2 li a:hover{
	color: var(--hover-link-color);
}

#dropdown-menu {
  /*display: none;*/ /* No transition */
  
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
  list-style-type: none; /* NO BULLET */
  font-size:var(--main-navfont-size);
 
  
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 500ms ease-in-out;
  /*transition is an animater of visibility, opacity transform with styles*/
  
  
}
#a-dropbtn{
	transition: all 0.3s ease 0s;
	color:var(--white);
	
}


#dropdown:hover #dropdown-menu{
  /*display: block;*/  /* No transition */
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  /*transition:hidden 0.5s , opacity 0.5s;*/
  
}


#dropdown {
  position: relative;
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size:var(--main-navfont-size);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
}
#dropdown-menu li{
	display: inline-block;
	min-width: 200px;
	margin: 5px 0;
	padding:var(--main-padding2);
	border-bottom: 1px solid grey;
	text-align: left;
	
}
#dropdown-menu li:last-child {
	
	border-bottom: none;
	font-size:var(--main-navfont-size);
}
/***************** END Nav2 *******************/





/***************** START Nav3 *******************/

#nav3{/** Dropdown : ติดต่อเรา **/
	grid-area: nav3;
	list-style-type: none;
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;
}
#nav3 li a{
	transition: all 0.3s ease 0s;
	color:var(--black);
}


#nav3 li a:hover{
	color: var(--hover-link-color);*/
}
#dropdown-nav3{
	position: relative;
	display: inline-block;
}
#dropdown-menu-nav3 {
  
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
  list-style-type: none; /* NO BULLET */
  font-size:var(--main-navfont-size);
 
  
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 500ms ease-in-out;
  
}
#dropdown-nav3:hover #dropdown-menu-nav3 {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#dropdown-nav3 #a-dropbtn-nav3 {
   
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size:var(--main-navfont-size);
}
#dropdown-menu-nav3 li{
	display: inline-block;
	min-width: 300px;
	margin: 5px 0;
	padding:var(--main-padding2);
	border-bottom: 1px solid grey;
	text-align: left;
	
}
#dropdown-menu-nav3 li:last-child {
	
	border-bottom: none;
	font-size:var(--main-navfont-size);
}

/***************** END Nav3 *******************/


/***************** START Nav4 : E-Service *******************/
#nav4{
	grid-area: nav4;
	list-style-type: none;
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;
}
#nav4 li a{
	transition: all 0.3s ease 0s;
	color:var(--black);
}
#nav4 li a:hover{
	color: var(--hover-link-color);
}
#dropdown-nav4{
	position: relative;
	display: inline-block;
}
#dropdown-menu-nav4 {
 position: absolute;
  background-color: #f9f9f9;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
  list-style-type: none; /* NO BULLET */
  font-size:var(--main-navfont-size);
 
  
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 500ms ease-in-out;
  
}
#dropdown-nav4:hover #dropdown-menu-nav4 {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#dropdown-nav4 #a-dropbtn-nav4 {
   
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size:var(--main-navfont-size);
}
#dropdown-menu-nav4 li{
	display: inline-block;
	min-width: 300px;
	margin: 5px 0;
	padding:var(--main-padding2);
	border-bottom: 1px solid grey;
	text-align: left;
	
}
#dropdown-menu-nav4 li:last-child {
	
	border-bottom: none;
	font-size:var(--main-navfont-size);
}

/***************** END Nav4 *******************/


/***************** START Nav5 : หน่วยงานในสังกัด p*******************/
#nav5{
	grid-area: nav5;
	list-style-type: none;
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;
}
#nav5 li a{
	transition: all 0.3s ease 0s;
	color:var(--black);
}
#nav5 li a:hover{
	color: var(--hover-link-color);
}
#dropdown-nav5{
	position: relative;
	display: inline-block;
}
#dropdown-menu-nav5 {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
  list-style-type: none; /* NO BULLET */
  font-size:var(--main-navfont-size);
 
  
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 500ms ease-in-out;
  
}
#dropdown-nav5:hover #dropdown-menu-nav5 {
 visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#dropdown-nav5 #a-dropbtn-nav5 {
   
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size:var(--main-navfont-size);
}
#dropdown-menu-nav5 li{
	display: inline-block;
	min-width: 300px;
	margin: 5px 0;
	padding:var(--main-padding2);
	border-bottom: 1px solid grey;
	text-align: left;
	
}
#dropdown-menu-nav5 li:last-child {
	
	border-bottom: none;
	font-size:var(--main-navfont-size);
}

/***************** END Nav5 *******************/

/***************** START Nav6 : CM1 MIS *******************/
#nav6{
	grid-area: nav6;
	list-style-type: none;
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;
}
#nav6 li a{
	transition: all 0.3s ease 0s;
	color:var(--black);
}
#nav6 li a:hover{
	color: var(--hover-link-color);
}
#dropdown-nav6{
	position: relative;
	display: inline-block;
}
#dropdown-menu-nav6 {
  position: absolute;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
  list-style-type: none; /* NO BULLET */
  font-size:var(--main-navfont-size);
 
  
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 500ms ease-in-out;
  
}
#dropdown-nav6:hover #dropdown-menu-nav6 {
 visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#dropdown-nav6 #a-dropbtn-nav6 {
   
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size:var(--main-navfont-size);
}
#dropdown-menu-nav6 li{
	display: inline-block;
	min-width: 300px;
	margin: 5px 0;
	padding:var(--main-padding2);
	border-bottom: 1px solid grey;
	text-align: left;
	
}
#dropdown-menu-nav6 li:last-child {
	
	border-bottom: none;
	font-size:var(--main-navfont-size);
}

/***************** END Nav6 *******************/


/***************** START Nav7 : Social *******************/

#nav7{
	grid-area: nav7;
	list-style-type: none;
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;
}
#nav7 li a{
	transition: all 0.3s ease 0s;
	color:var(--black);
}
#nav7 li a:hover{
	color: var(--hover-link-color);
}
#dropdown-nav7{
	position: relative;
	display: inline-block;
}
#dropdown-menu-nav7 {
 position: absolute;
  background-color: #f9f9f9;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  
  list-style-type: none; /* NO BULLET */
  font-size:var(--main-navfont-size);
 
  
  visibility: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 500ms ease-in-out, transform 500ms ease-in-out, visibility 500ms ease-in-out;
  
}
#dropdown-nav7:hover #dropdown-menu-nav7 {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
#dropdown-nav7 #a-dropbtn-nav7 {
   
  border: none;
  outline: none;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-size:var(--main-navfont-size);
}
#dropdown-menu-nav7 li{
	display: inline-block;
	min-width: 150px;
	margin: 5px 0;
	padding:var(--main-padding2);
	border-bottom: 1px solid grey;
	text-align: left;
	
}
#dropdown-menu-nav7 li:last-child {
	
	border-bottom: none;
	font-size:var(--main-navfont-size);
}

/***************** END Nav7 *******************/
#nav8{
	grid-area: nav8;
	list-style-type: none;
	font-size:var(--main-navfont-size);
	text-align: center;
	margin: auto;
}
#nav8 ul{
	display: none;
}




.trigger-menu {
	
	display: none;
	margin-left: 20px;
	margin-right: 80px;
	border: none;
	cursor: pointer;
	transition: all 0.3s ease 0s;
	
	
}

.trigger-menu:hover {
	
	
}


.trigger-menu {
  
  align-items: center;
  font-size: 1.3rem;
 
  letter-spacing: 0.2em;
}


.lottie-wrapper {
  display: none;
  position: fixed;
  bottom: 50px;
  right: 25px;
  z-index: 1;
  padding: 5px;
  border-radius: 5px;
}

.page-main section {
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  height: 100vh;
}

.page-main section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.25);
}



/* BODY CLASSES*/
.menu-open {
  overflow: hidden;
}

.menu-open #menu-bar {
  background: var(--white);
}

.menu-open .page-header .menu {
  display: block;
}

.menu-open .page-header svg {
  transform: rotate(45deg);
}

.menu-open-with-lottie .page-header .menu {
  padding: 5vh 0;
}

.scroll-down #menu-bar {
  transform: translate3d(0, -100%, 0);
}

.scroll-down .lottie-wrapper {
  background: var(--darkgray);
}

.scroll-up #menu-bar {
  transform: none;
}

.scroll-up:not(.menu-open) #menu-bar {
  background: var(--white);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}




/* FOOTER*/
.page-footer {
  position: fixed;
  right: 25px;
  bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 1rem;
  padding: 5px;
  border-radius: 5px;
  background: var(--darkgray);
}

.page-footer a {
  display: flex;
  margin-left: 4px;
}