html{
    scroll-behavior:smooth;
    overflow:visible;
    font-family: 'Kanit', sans-serif;
	}

body{
    padding: 0px;
    margin: 0px;
    /* margin: 0px 10% 0px 10%;    */
    /* background: url(Bokeh-white.jpg) no-repeat fixed center;
    background-position: center;
    background-size: cover;    
    background-repeat: no-repeat; */
    /* background: url(Bokeh-white.jpg) no-repeat fixed center ; */
    /* background-size: cover; */
    background-color: rgb(255, 255, 249);
}


.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
  }

.grid-container{
    margin: 0px 10% 0px 10%;   
   
    display: grid;
    grid-template-areas: "header header"
                         "sideber content "
                         "footer footer";
    
    grid-template-columns: 25% 75%;
   /* background-image: url("bangkok.jpg");
    background-size: cover;*/
    
    color: #333;
  
}

img.bg_img2{
    display: none;        
}

.grid-container2 {
    display: grid;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    grid-template-columns: 85% 15%;
    background-color: transparent;    
  } 

.griditem2{   
    justify-self: right;
    align-self: center;    
    width:16px;
    height:16px;
    background-image: url(pic/right-chevron-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    transition: .1s ease-out;
    background-position: right;
    margin-right: 5px;
}

.a2:hover .griditem2{   
    justify-self: right;
    align-self: center; 
    width:16px;
    height:16px;
    background-image: url(pic/left-chevron-w2.png);
    background-size: cover;
    background-repeat: no-repeat;
    transition: .1s ease-out;
    background-position: right;
    margin-right: 0px;

}




/*###############ส่วนหัว###################*/
.header{
    z-index: 10;
    grid-area: header;
}





p{
    padding: 0px;
    margin: 0px;
}



/*####### Content #############*/
.grid.content {
    /*display: grid;
    grid-template-columns: 50% 50%;
    border:  2px solid #f0f;    */
    /*padding: 10px;*/
    padding-left: 10px;
    /* font-size: 60px; */
    grid-area:content;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 0px 50px 0px 0px;
    z-index: 10;  
}
.content ul{
    padding: 0;
    margin: 0;
}
.content ul li{
    list-style: none;
    text-decoration: none;
    float: left;
    /*padding-right: 15px;*/
  
    text-align: center;
    background-color: rgba(255, 20, 224, 0.5);
}

.content ul ul li{
    float: inherit;
    border: none;
}



/***************** กำหนดเมนูด้านซ้าย *********************/
.sbmargin{
    margin-top: 0px;
}

.sidebar{
    z-index: 10;
    font-size: 16px;
    grid-area: sideber;
    z-index: 25;
    font-family: 'Kanit', sans-serif;
    /*background-color: rgba(255, 115, 0, 0.39);*/
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 20px 0px 0px 0px;
}

.sidebar .content1{
    font-size: 15px;
}

.sidebar p #sidebar{
    padding-bottom: 50px;
}

.sidebar ul{
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-decoration: none;
    text-align: start;
    

}

.sidebar ul li li{
    padding-top: 10px;
    padding-left: 5px;
    padding-bottom: 10px;
    background-color:rgba(255, 0, 179, 0.5);

}

nav.contrainerp ul li{
    float: right;
}

li,ul{
    list-style: none;
}

a{
    text-decoration: none;
}

a li {
    margin: 5px;
    padding: 5px;
    border-radius: 20px;
    padding-left: 10px;
}

.sbmargin li{
    padding-left: 10px;
}

 


/******* animation button *******************************************/
a.a1.noclick li {
    cursor: no-drop;
}

a.a1.resize li {
    font-size: 16px;

}

a.a1 li {
    /* background: rgb(212, 222, 255); */
    background-image: linear-gradient(rgb(233, 240, 255),rgb(249, 240, 255));
    z-index: 10;
	color: #333;
	cursor: pointer;
	display: block;
	position: relative;
    border-radius: 20px 0px 0px 20px; 
    border: 2px solid rgb(32, 84, 253);
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}

.a1 li:hover {
	padding-left: 1%;
}

.content1 li:hover {
	padding-left: 1%;
}

.a1 li:hover:before {
	top: 0%;
	bottom: auto;
    height: 100%;
    
}



/********* จบ animation button ***************************************/
/***************** จบกำหนดเมนูด้านซ้าย *********************/


.a2 ul.upup a.a3 li{
    z-index: 10;
    background: rgb(233, 250, 255);
    background-image: linear-gradient(rgb(233, 250, 255),rgb(249, 254, 255));
}

/*กว้างข่องมาตรา*/

 .a2.a2short ul{
    width: 230px;
    }

.a2 {
    background-image: linear-gradient(rgb(233, 240, 255),rgb(249, 240, 255));
    z-index: 10;
    color: #333;
	cursor: pointer;
	display: block;
    position: relative;
    padding: 5px;
    border-radius: 20px 0px 0px 20px; 
    border: 2px solid rgb(32, 84, 253);
    margin: 5px;
    padding: 5px;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}


.a2:hover {
    padding-left: 2%;
}



.a2:hover:before {
    bottom: 0%;
	top: auto;
	height: 100%;
}


/********* จบ animation button ***************************************/
/***************** จบกำหนดเมนูด้านซ้าย *********************/



.a3{
    background: rgb(212, 222, 255);
}

a.a3 li {
    
	color: #333;
	cursor: pointer;
	display: block;
	position: relative;
    border: 2px solid rgb(32, 84, 253);
    border-radius: 0px 20px 20px 0px; 

/*** บนลงล่าง ***/
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;


}
/*ชั้นที่ 2*/
.a3 li:hover {
	padding-left: 1%;
}


.a3 li:hover:before {
/*** บนลงล่าง *****/
	top: 0%;
	bottom: auto;
    height: 100%;
    

}
 
 a.a4 li {
     color: #333;
     cursor: no-drop;
     display: block;
     position: relative;
     border: 2px solid rgb(255, 0, 0);
     transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
 }
 .a4 li:hover {
     color: #fff !important;
     background-color: transparent;
 }
 .a4 li:hover:before {
     left: 0%;
     right: auto;
     width: 100%;
 }
 
 .a4 li:before {
     display: block;
     position: absolute; 
     border-radius: 20px;   
     top: 0px;
     right: 0px;
     height: 100%;
     width: 0px;
     z-index: -1;
     content: '';
     color: #fff !important;
     background-image: linear-gradient(rgb(199, 26, 26),rgb(255, 108, 108));
     transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1) 0s;
 }
 
 /******* จบ Animate a4 ***********/

 /**** menu Hot Link ****/


/*************************************************/


    
    .sidebar li li{
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
    background-color:rgb(255, 255, 255);
    
    }
    
    /********* แบบใหม่ ***********/
    
    /***** เลิกชี้ *****/
    .a2 ul {
    /*ยื่นขอบซ้ายออกมา*/
    padding-left:20px;
    left: 100%;
    transition: max-height 0.5s ease-out;
    max-height:0;
    position: absolute;
    overflow: hidden;
    width: 150%;
    visibility: hidden;
    
    }



    .a2 .upup{
    margin-top: -32px;
    /*เอาข้อความไปทางขวา*/
    margin-left: -15px;
    }
    /**** จบเลิกชี้ ****/
    
    /**** ช่องว่างของ Hover ****/
    .a2 a li{
    margin: 2px;
    }
    

    /* ชั้น1 */
    /****** เม้าชี้แสดง ******/
    .a2:hover > ul{
    display: block;
    max-height:300px;
    border-radius: 0px 20px 20px px;
    /*border: 2px solid rgb(37, 119, 185);*/
    visibility: visible;
    left: 100%;
    margin-top: -32px;
    margin-left: -15px;
    /* background-color: #a2ed56; */
    }
    
    iframe{
      border: 0px #999 solid;
      border-radius: 50px;
    }

/*************************************************/

.hotlink ul {
    list-style: none;
    text-decoration: none;
    padding-left:20px;
    transition: max-height 0.3s ease-out;
    max-height:0;
    overflow:hidden;
    /* position: absolute; */
    
   }

.a5 { 
    text-align:left;
    cursor: grab;
    color: #fff;
    border: 5px solid rgb(255, 0, 0);
    margin: 5px;
    padding: 5px;
    border-radius: 20px;  
    background-image: linear-gradient(rgb(255, 0, 0),rgb(255, 166, 0));
}

.a5 ul li{
    border: 2px solid rgb(0, 105, 0);
    transition: all 0.5s ease-out;
}

.a5 ul li:hover{
    color: #fff;
    background-image: linear-gradient(rgb(0, 105, 0),rgb(30, 255, 0));
}

/**************** เมนูด้านล่างสุด ***************/

.footer{
    grid-area: footer;
    background-color: rgba(210, 238, 255, 0.9);
	font-size:16px;
	color:#333;
	width:100%;
	text-align:center;
    overflow:hidden;
    border-radius: 0px 0px 50px 50px;
}

.footerhead{
    font-size: 16px;
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: red;
    color: rgb(0, 89, 255);
}

.footerb{
    font-size: 16px;
}

.red1{
    text-decoration-line: underline;
    text-decoration-color: red;
}

.footertext{
    font-size: 14px;
}

.hbgmenu{
    display: none;
}


/* Set width and height in JS */
.placeholder {
    margin: 0px;
    padding: 0px;
    position: absolute;
    display:block;
    z-index: 0;
    width: 100%;
    /* min-height: 1500px; */
    height: 100%;
  }
  
  
  .parallax-window {
    /* min-height: 1500px; */
    height: 100%;
    width: 100%;
    background: transparent;
    position: relative;
  }
  
  .alink{
      background: url(pic/7-1.png);  
      background-size: cover;  
      transition: all 0.3s ease-out;
  }

  .alink:hover{
      background: url(pic/7-2.png);
      background-size: cover;  
  }



/**************** จบเมนูด้านล่างสุด ***************/

@media only screen and (min-width: 1300px) {
    .grid-container {
        margin: 0px 15% 0px 15%;   
    }
  }

@media only screen and (max-width: 1079px) {

    .a2 ul.upup a.a3.max1080 li{
        padding-top: 18px;
        padding-bottom: 18px;
    }
  
    /***** เลิกชี้ ****/
    .a2.max1080 ul {
    padding-left:20px;
    }
    .a2.max1080 .upup{
    margin-top: -57px;
    margin-left: -15px;
    }
    /**** จบเลิกชี้ ****/
    
    /**** ช่องว่างของ Hover ****/
    .a2.max1080 a li{
    margin: 2px;
    }
    
    .a2.max1080:hover > ul{
    margin-top: -57px;
    margin-left: -15px;
    }
}

@media only screen and (max-width: 860px) {

    .grid-container{
        margin: 0px 0px 0px 0px;   

        display: grid;
        grid-template-areas: "hbgmenu"
                             "header"
                             "content "
                             "footer";
        grid-template-columns: 100%;
        color: #333;
    }

 

    body{
        margin: 0px;
    }

    .hbgmenu{
        color: #333;
        z-index: 9999;
        display: block;
        top: 0;
        position: sticky;
        background-image: linear-gradient(rgb(231, 249, 255),rgb(66, 186, 255));
    }

    .hbgtest b{
        color: rgb(75, 75, 75);
    }

    
    iframe{
        border: 0px #999 solid;
        border-radius: 50px 50px 0px 0px;
    }



    .sidebar{
        display: none;
    }
    
    .grid.content{
        border-radius: 50px 50px 0px 0px;
        margin: 0px;
        padding: 0px;
    }



    img.bg_img1{
        display: none;        
    }

    img.bg_img2{
        display: inline;        
    }

/********* HBG เมนู ********/

    
    h1 {
        font-family: 'Oswald', sans-serif;
        text-align: center;
    }
    
    a {
        color: #a2ed56;
    }
    
    a:hover {
        color: #83e4e2;
        text-decoration: none;
    }
    
    .container {
        margin: 0 auto;
        max-width: 80em;
    }
    
    main .container {
        padding: 1em;
    }
    
    p {
        margin-left: auto;
        margin-right: auto;
        max-width: 40em;
    }
    
    .screen-reader-text {
        clip: rect(1px 1px 1px 1px);
        clip: rect(1px, 1px, 1px, 1px);
        height: 1px;
        /* overflow: hidden;
        position: absolute !important; */
        width: 1px;
    }
    
    
    
    /************************************************/
    /****************** NAVIGATION ******************/
    /************************************************/
    nav {
        background: transparent;
        color: #333;
        left: 0;
        position: relative;
        top: 0;
        width: 100%;
        z-index: 9999;
        
    }
    
    /*** INPUT ***/
    nav input {
        opacity: 0;
        position: absolute;
        z-index: -1;
    }
    
    /*** LABEL ***/
    nav label {
        cursor: pointer;
        display: block;
        font: 2em/1 'Oswald', sans-serif;
        padding: 0.5em;
        
    }
    
    /* Hamburger Icon */
    #menu-icon,
    #menu-icon:before,
    #menu-icon:after {
        background: rgb(75, 75, 75);
        border-radius: 0.05em;
        height: 0.2em;
        transition: all 0.2s ease-in-out;
        width: 100%;
    }
    
    #menu-icon {
        
        display: inline-block;
        margin: 0.4em 0;
        max-width: 1em;
        position: relative;
    }
    
    nav label #menu-icon {
        
        float: right;
    }
    
    #menu-icon:before,
    #menu-icon:after {
        
        content: '';
        left: 0;
        position: absolute;
    }
    
    #menu-icon:before {
        top: -0.4em;
    }
    
    #menu-icon:after {
        bottom: -0.4em;
    }
    
    /* Close Icon */
    nav input[type=checkbox]:checked + label #menu-icon {
        background: transparent;
    }
    
    nav input[type=checkbox]:checked + label #menu-icon:before {
        top: 0;
        transform: rotate(-45deg);
    }
    
    nav input[type=checkbox]:checked + label #menu-icon:after {
        bottom: 0;
        transform: rotate(45deg);
    }
    
/************   กดแล้วแสดงเป็นไง  **********/
    /*** MENU ***/
    /* Overlay */
    nav input:checked ~ #overlay {
        background-image: linear-gradient(rgb(217, 245, 255),rgb(237, 251, 253),rgb(66, 186, 255));
        bottom: 0;
        left: 0;
        height: 100%;
        position: fixed;
        right: 0;
        top: 0;
        width: 100%;
        z-index: -1;
        
    }
    
    /* List */
    nav ul {
        
        font-size: 16px;
        list-style: none;
        margin: 0;
        overflow: hidden;
        opacity: 0;
        max-height: 0;
        text-align: left;
        transition: all 0.2s ease-in-out;
    }

    nav ul li:hover > ul{
        display: block;
        margin: 0;
        max-height: 300px;
        overflow: inherit;
        opacity: 100;
        transition: all 0.5s ease-in-out;
        
    }
    
    nav input:checked ~ ul {
        transition: all 0.2s ease-in-out;
        margin: 1em;
        max-height: inherit;
        opacity: 1;
    }
    
    nav ul > li {
        margin: 0.5em 0;
        
    }
    
    nav ul li {
        /* color: #1d1f20!important; */
        
        text-decoration: none;
        padding: 2px;
        margin: 7px;
        padding-left: 15px;
        border-radius: 20px;
    }

    nav ul a {
    color: #333;  

    }

    nav ul li:hover > a{
        /* text-decoration: underline; */
        font-size: 17px;
        /* text-decoration-color: red; */
        color: blue;
        transition: all 0.2s ease-in-out;
    }

    nav ul li:hover{
        background: rgba(255, 255, 255, 0.2);
        cursor: grab;
        /* text-decoration: underline; */
        font-size: 17px;
        border: blue 1px solid;
        /* text-decoration-color: red; */
        color: blue;
        transition: all 0.2s ease-in-out;
    }

    .img2{
        display: none;
    }
    
    nav ul li img{
        padding-left: 20px;
    }

    nav ul li:hover > .img1{
        display: none;
    }
    nav ul li:hover > .img2{
        display: inline;
    }





/**************** เมนูด้านล่างสุด ***************/

.footer{
    z-index: 10;
    grid-area: footer;
    background-color: rgba(210, 238, 255, 0.9);
	font-size:14px;
	color:#333;
	width:100%;
	text-align:center;
    overflow:hidden;
    border-radius: 0px 0px 0px 0px;
}

.footerhead{
    text-decoration: none;
    color: rgb(0, 89, 255);
    font-size: 14px;
}

.footerb{
    font-size: 12px;
}

.footertext{
    font-size: 12px;
}
/**************** จบเมนูด้านล่างสุด ***************/

}





@media only screen and (max-width: 600px) {
    nav ul li {
        /* color: #1d1f20!important; */
        text-decoration: none;
        padding-left: 10px;
        border-radius: 20px;
    }

    nav ul li.hbgli{
        margin-left: -20px;
    }
    
    }