/*-----------------------------------------------------------------------------------------------------------------
                                                    Color Define
Major Color
1.white       =	#FFFFFF;
2.red         =	#FF0000;
3.green       =	#008000;
4.black       =	#000000;

Minor Color
----Grey----
1.grey       = #808080;
2.darkgrey   = #A9A9A9; 
3.silver     = #C0C0C0;
4.lightgray  = #D3D3D3;
5.More-lightgray  = #f2f2f2
----Red---
1.drakred    = #8B0000;
2.Tomato     = #FF6347;
3.Pink       =#F7D4D4;
----Green---
1.forestgreen = #228B22;
2.darkgreen   = #006400;
3.lime        = #00FF00;
4.limegreen   = #32CD32;

----White----
1. WhiteSmoke=#F5F5F5;

---Orange----
1.Orange =#FFA500;
/*-----------------------------------------------------------------------------------------------------------------
|                                                                                                                 |
|                                                 Miscelleneous                                                    |
|                                                                                                                 |
------------------------------------------------------------------------------------------------------------------*/

/*||------------------------Inital Flex---------------------------------------*/
.box100, .box100T, .box100B, .box100M, .box100W, .box95, .box90, .box80, .box75, .box70, .box65,.box60, .box50, .box40, .box35, .box30, .box25,
 .box20,.box20b10,.box16, .box15,  .box10,.boxD2, .boxD3, .boxD4, .boxD5, .mShow, .mbBox,.box100b60,.box50b25, .box80b60, .box5, .box3, .box90b40,.box50b25t, .box100b70t, 
 .box100b90, .box100b80, .box100b50, .box25b50, .box90b70, .box50W, .box55, .box45, .box60b30, .box18, .box17, .box18b80, .box80b18, .box80b30, .boxSp ,
 .box100b40,.box100b20, .box100b33 ,.box100b25, .box100b34, .box35b10, .box40b20, .box80b40, .box100b70, .box50b10, .box90b45, .hSI, .box100b30, .mtShow, .box60b50, .box100b50t, .box100b25t{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  
  /*background-color:  #f2f2f2*/
}

.flx-colum {
  -webkit-flex-flow: column wrap;
  flex-flow: column wrap; }
/*
/*||------------------------flex Property--------------------------------------*/
/*||  Box %*/
.box100 {
  width: 100%;
}

.box100T {
  width: 100%;
  display: none;
}

.box100B {
  width: 100%;
}

.box100M {
  width: 100%;
}

.box100W {
  width: 100%;
  display: none;
}


.box100b40 {
  width: 100%;
}
.box100b34{
  width:100%;
}
.box100b33 {
  width: 100%;
}

.box100b70 {
  width: 100%;
}
.box100b70t {
  width: 100%;
}
.box100b65 {
  width: 100%;
}

.box100b25 {
  width: 100%;
}
.box100b25t {
  width: 100%;
}
.box100b20 {
  width: 100%;
}

.box50W {
  width: 50%;
  display: none;
}

.box95 {
  width: 95%;
}

.box90 {
  width: 90%;
}
.box85 {
  width: 85%;
}
.box80 {
  width: 80%;

}
.box80b40 {
  width: 80%;

}
.box80b30 {
  width: 80%;
}

.box80b18 {
  width: 80%;

}

.box90b45 {
  width: 90%;
}

.box75 {
  width: 75%;
}

.box70 {
  width: 70%;
}

.box65 {
  width: 65%;
}
.box60 {
  width: 60%;
}
.box55 {
  width: 55%;
}
.box50 {
  width: 50%;
}
.box45{
  width: 45%;
}

.box40 {
  width: 40%;
}

.box40b20{
  width:40%;
}


.box35 {
  width: 35%;
}
.box35b10 {
  width: 35%;
}


.box30 {
  width: 30%;
}



.box25 {
  width: 25%;
}
.box20b10{
  width: 20%;
}
.box20 {
  width: 20%;
}


.box18 {
  width: 18%;
}

.box18b80 {
  width: 18%;
}

.box17 {
  width: 17%;
}

.box16 {
  width: 16%;
}

.box15 {
  width: 15%;
}


.box10 {
  width: 10%;
}



.box5{
  width: 5%;
}

.box3{
  width: 3%;
}

.box100b90{
  width: 100%;
}

.box100b80{
  width: 100%;
}

.box100b60{
  width: 100%;
}





.box100b30{
  width: 100%;
}
.box50b25{
  width: 50%;
}
.box50b25t{
  width: 50%;
}

.box60b30{
  width: 60%;
}

.box60b50{
  width: 60%;
}

.box70b60{
  width: 70%;
}

.box90b40{
  width:90%;
}

.box90b70{
  width:90%;
}

.box25b50{
  width: 25%;
}

.box50b10{
  width: 50%;
}
.box2 {
  width: 2%;
}

.box1 {
  width: 1%;
}
.boxSp {
  width: 0.5%;
}
/*||  Box divider */
.boxD2 {
  width: 50%;
}


.boxD3 {
  width: 33.33%;
}

.boxD4 {
  width: 25%;
}

.boxD5{
  width: 20%;
}

.box1W {
  width: 1%;
  display: none;
}




.mbBox {
  width: 90%;
}



/*||------------------------flex Property--------------------------------------*/
.flx-center {
  justify-content: center;
  align-items: center;
}

.flx-start {
  justify-content: flex-start;
  /*align-content: center;*/
  align-items: center;
}

.flx-end {
  justify-content: flex-end;
  /*align-content: center;*/
  align-items: center;
}

.flx-sAround{
  justify-content: space-around;
  /*align-content: center;*/
  align-items: flex-start;
}

.flx-sBetween {
  justify-content: space-between;
  /*align-content: center;*/
  align-items: center;
}
.flx-StartCenter {
  align-content: flex-start;
  justify-content: center;
}

.flx-startC {
  align-content: flex-start;
}

.flx-endC {
  justify-content: flex-end;
  align-content: flex-end;
}


.stickyPosisionTop {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0; 
}


.stickyPosisionTop5h {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 5vh; 
}

.stickyPosisionBottom {
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
}


.stickyPosisionBottom5h {
  position: -webkit-sticky;
  position: sticky;
  bottom: 5vh; 
}

.stickyPosisionBottom8h {
  position: -webkit-sticky;
  position: sticky;
  bottom: 8vh; 
}
/*||------------------------Position Property--------------------------------------*/

.frontPos {
  position: absolute;
  top: 3h;
  right: 0;
  z-index: 1;
}

.frontPosLeft {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.frontPosBottom {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.frontPosBottomSticky {
  position: absolute;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.frontPosh5h {
  position: absolute;
  top: 5vh;
  right: 0;
  z-index: 1;
}

.frontPosh40h {
  position: absolute;
  top: 40vh;
  right: 0;
  z-index: 1;
}
.frontPosh5 {
  position: absolute;
  top: 5%;
  right: 0;
  z-index: 1;
}
.frontPosh10h {
  position: absolute;
  top: 10vh;
  right: 0;
  z-index: 1;
}

.frontPosh60h {
  position: absolute;
  top: 60vh;
  right: 0;
  z-index: 1;
}

.frontPosh80h {
  position: absolute;
  top: 80vh;
  right: 0;
  z-index: 1;
}


.frontPosh55h {
  position: absolute;
  top: 55vh;
  right: 0;
  z-index: 1;
}

.frontPosh50h {
  position: absolute;
  top: 50vh;
  right: 0;
  z-index: 1;
}

.behidePos {
  position: absolute;
  z-index: -1;
}

 .abPos {
     position: absolute;
 }

 .rePos {
     position: relative;
 }
 .frontPosPrice {
  position: absolute;
  top: 380vh;
  right: 0;
  z-index: 1;
}

.frontPosMobile {
  position: absolute;
  top: 16vh;
  right: 0;
  z-index: 1;
}

.frontPosTablet{
  position: absolute;
  top: 24vh;
  right: 0;
  z-index: 1;
}

.frontPosPC{
  position: absolute;
  top: 51vh;
  right: 0;
  z-index: 1;
}
/* ||-----------------------Hihgt box---------------------------------------*/
  /*---------------------- Vh---------------*/
  .h100h {
    height: 100vh;
  }
  .h95h {
    height: 95vh;
  }
  .h90h {
    height: 90vh;
  }
 
  .h85h {
    height: 85vh;
  }

  
.h80h {
  height: 80vh;
}

.h80h60h {
  height: 80vh;
}

.h60h80 {
  height: 60vh;
}

.h75h {
  height: 75vh;
}
.h70h {
  height: 70vh;
}
.h65h {
  height: 65vh;
}

.h60h {
  height: 60vh;
}
.h55h {
  height: 55vh;
}

.h50h {
  height: 50vh;
}
.h45h {
  height: 45vh;
}
.h40h {
  height: 40vh;
}
.h35h {
  height: 35vh;
}
.h30h {
  height: 30vh;
}

.h30h50h {
  height: 30vh;
}



.h25h {
  height: 25vh;
}


.h20h {
  height: 20vh;
}

.h15h {
  height: 15vh;
}

.h12h {
  height: 12vh;
}


.h10h {
  height: 10vh;
}


.h8h {
  height: 8vh;
}

.h6h {
  height: 6vh;
}

.h5h {
  height: 5vh;
}

.h4h {
  height: 4vh;
}

.h3h {
  height: 3vh;
}

.h2h {
  height: 2vh;
}

.h1h {
  height: 1vh;
}
.h30h40h {
  height: 30vh;
}
  /*-------- %---------------*/
  .h200 {
    height: 200%;
  }
.h100 {
  height: 100%;
}

.h95 {
  height: 95%;
}
.h90 {
  height: 90%;
}
.h85 {
  height: 85%;
}

.h80 {
  height: 80%;
}

.h75 {
  height: 75%;
}
.h70 {
  height: 70%;
}

.h65 {
  height: 65%;
}

.h60 {
  height: 60%;
}
.h55 {
  height: 55%;
}
.h50 {
  height: 50%;
}
.h45 {
  height: 45%;
}

.h40 {
  height: 40%;
}
.h35 {
  height: 35%;
}

.h30 {
  height: 30%;
}


.h30h50 {
  height: 30%;
}

.h25 {
  height: 25%;
}
.h20 {
  height: 20%;
}

.h15 {
  height: 15%;
}
.h14 {
  height: 14%;
}

.h10 {
  height: 10%;
}
.h9 {
  height: 9%;
}

.h8{
  height: 8%;
}
.h7 {
  height: 7%;
}
.h6 {
  height: 6%;
}
.h5 {
  height: 5%;
}

.h3 {
  height: 3%;
}
.h2 {
  height: 2%;
}

.h1 {
  height: 1%;
}

.h90h80 {
  height: 90%;
}

.h50h80 {
  height: 50%;
}

.hSI{
  height: 1600%;/*798% 658%;*/
}


.hIndx{
  height: 200%;/*798% 658%;*/
}

.hPOS{
  height: 650%;
}

.hOne{
  height: 2500%;
}



/*-------- px--------------*/
.h10px {
  height: 10px;
}

.h15px {
  height: 15px;
}

.h20px {
  height: 20px;
}

.h30px {
  height: 30px;
}

.h40px {
  height: 40px;
}

.h50px {
  height: 50px;
}

.h60px {
  height: 60px;
}


/* ||-----------------------Color box---------------------------------------*/

/* ||-----------------------Color box---------------------------------------*/
.bgRed {
  background-color: #FF0000;
}

.bgRedB {
  background-color: #FF3838;
}

.bglightRed {
  background-color: #F7D4D4;
}

.bgWhite {
  background-color: #FFFFFF;
}

.bgGrey {
  background-color: #D3D3D3;
}

.bglightGrey {
  background-color: #F8F8F8;
}
.bgSuperlightGrey {
  background-color: #F5F5F5;
}


.bgBlack {
  background-color: #000000;
}

.bgStrongBlue{
  background-color: #004AAD;
}

.bgBlueLight{
  background-color: #CDE8EF;
}

.bgGreyBlue{
  background-color: #E9F1F4;
}

.bgBlueB{
  background-color: #38B6FF;
}

.bgYellowB{
  background-color: #FFD638;
}F

.bgBlueL{
  background-color: #6CC4F5;
}

.bgBlueSpl{
  background-color: #D2EDFF;/*#A0DCFF;*/
}

.bgEgg{
  background-color: #FFF1E9;
}

.bgBrown{
  background-color: #4C2D20;
}
/* ||----------------------Opcityx---------------------------------------*/
.opc3{
  opacity: 0.3;
}
/*-------------------------------------------*/

/* ||-----------------------font box---------------------------------------*/
.fontS {
  font-family: 'Open Sans', sans-serif;
}
.fontBold {
  font-weight: bold;
}


.font8vmn {
  font-size: 8vmin;
}

.font7vmn {
  font-size: 7vmin;
}
.font65vmn {
  font-size: 6.5vmin;
}
.font6vmn {
  font-size: 6vmin;
}

.font5vmn {
  font-size: 5vmin;
}
.font45vmn {
  font-size: 4.5vmin;
}

.font4vmn {
  font-size: 4vmin;
}
.font35vmn {
  font-size: 3.5vmin;
}

.font3vmn {
  font-size: 3vmin;
}

.font28vmn {
  font-size: 2.8vmin;
}

.font25vmn {
  font-size: 2.5vmin;
}

.font22vmn {
  font-size: 2.2vmin;
}

.font2vmn {
  font-size: 2vmin;
}

.font2vmx {
  font-size: 2 vmax;
}

.font1vmn {
  font-size: 1vmin;
}

.fontB7h {
  font-size: 7vh;
  font-weight: bold;
}

.fontB6h {
  font-size: 6vh;
  font-weight: bold;
}
.fontB5h {
  font-size: 5vh;
  font-weight: bold;
}
.fontB45h {
  font-size: 4.5vh;
  font-weight: bold;
}

.fontB4h {
  font-size: 4vh;
  font-weight: bold;
}
.fontB35h {
  font-size: 3.5vh;
  font-weight: bold;
}


.fontB3h {
  font-size: 3vh;
  font-weight: bold;
}

.font4h {
  font-size: 4vh;
}
.font3h {
  font-size: 3vh;
}


.fontB25h {
  font-size: 2.5vh;
  font-weight: bold;
}

.font25h {
  font-size: 2.5vh;
}

.fontB22h {
  font-size: 2.2vh;
  font-weight: bold;
}

.font18h {
  font-size: 1.8vh;
}

.fontB15h {
  font-size: 1.5vh;
  font-weight: bold;
}
.fontB14h {
  font-size: 1.4vh;
  font-weight: bold;
}

.font14h {
  font-size: 1.4vh;
}

.fontB13h {
  font-size: 1.3vh;
  font-weight: bold;
}

.fontB12h {
  font-size: 1.2vh;
  font-weight: bold;
}

.fonth2 {
  font-size: 2.2vmin;
  font-weight: bold;
}

.fontB2h {
  font-size: 2vh;
  font-weight: bold;
}

.font2h {
  font-size: 2vh;
}

.font2h18h {
  font-size: 1.9vh;
}


.fontBold {
  font-weight: bold;
}
.fontsm {
  font-size: 1vh;
}

.fontBig {
  font-size: 80%;
}

.font90 {
  font-size: 90%;
}


.font120{
  font-size: 120%;

}

.font150{
  font-size: 150%;

}
.font100 {
  font-size: 100%;
}






.fontRed{
  color: #FF0000;
}

.fontwhite{
  color: #FFFFFF;
}

.fontBlack{
  color: #000000;
}

.fontDarkGrey{
  color: #595959;;
}


.fontBlueB{
  color: #38B6FF;
}

.fontYellowB{
  color: #FFD638;
}
.fontStrongBlue{
  color: #004AAD;
}

.fontNote {
  font-size: 1.5vh;
  /*color:#A9A9A9; */
}


.fontLink {
  text-decoration: none;
  cursor: pointer;
}



.fontKanit{
  font-family: 'Kanit', sans-serif;
}


.fontOpenSan{
  font-family: 'Open Sans', sans-serif;
}


.border5R{
  border-radius: 5px ;
}



.borderBottom5R {
  border-bottom-left-radius:  5px;
  border-bottom-right-radius:  5px;
}

.borderBlueBottom5 {
  border-bottom: solid 5px #38B6FF; 
}
.borderBlueBottom {
  border-bottom: solid 1px #38B6FF; 
}
.borderGreyBottom {
  border-bottom: solid 1px #808080;; 
}

.borderBlueBottom2 {
  border-bottom: solid 2px #38B6FF; 
}

.borderWhite {
  border: solid 1px #FFFFFF; 
}

.borderBlue {
  border: solid 1px #38B6FF; 
}
.borderlightGrey{
  border: solid 1px#a6a6a6;;
}
.borderRed{
  border: solid 1px #FF0000;
}

.borderYellowB {
  border: solid 1px #FFD638; 
}
.borderBlueTable {
  border-left: solid 1px #38B6FF; 
  border-right: solid 1px #38B6FF; 
  border-bottom: solid 1px #38B6FF; 
}

.borderBlueTable1 {
  border-right: solid 1px #38B6FF; 
  border-bottom: solid 1px #38B6FF; 
}

.borderBlueTable2 {
  border-left: solid 1px #38B6FF; 
  border-right: solid 1px #38B6FF; 
}
.borderBlueTable3 {
  border-left: solid 1px #38B6FF; 
  border-bottom: solid 1px #38B6FF; 
}

.redLineC {
  border-bottom: solid 1px #FF0000;
  text-align: center;
  border-radius: 0px;
}

.blueLineC {
  border-bottom: solid 1px #38B6FF;
  text-align: center;
  border-radius: 0px;
}

.whiteLineC {
  border-bottom: solid 1px #FFFFFF;
  text-align: center;
  border-radius: 0px;
}

.borderWhiteLeft {
  border-left: solid 1px #FFFFFF; 
}
/* ||-----------------------Color box---------------------------------------*/
.buttonAct:hover{
  background-color: #3366cc; /*#909090; #804000;*/
  color: #FFFFFF;
}

/* ||-----------------------Reposive box---------------------------------------*/

.tShow {
  display: none;
}

.wShow {
  display: none;
}

.wtShow {
  display: none;
}

.mShowR {
  display: none;
}

.notShow {
  display: none;
}

.box100b50, .box100b50t{
  width: 100%;
}
/*-----------------------------------------------------------------------------------------------------------------
|                                                                                                                 |
|                                                 Resposive                                                       |
|                                                                                                                 |
------------------------------------------------------------------------------------------------------------------*/

@media (min-width: 580px) {
 



}



@media (min-width: 690px) {
  .tShow{
    display: -webkit-flex;
    display: flex;
  }
  .mShow{
    display: none;
  }

  .wtShow {
    display: -webkit-flex;
    display: flex;
  }


  

  


  .box100b50{
    width: 50%;
  }

  .notShow {
    display: none;
  }

  .h60h80 {
    height: 80vh;
  }
  .box50b25t{
    width: 25%;
  }

  .box100b70t {
    width: 85%;
  }
  .box100b25t {
    width: 50%;
  }


}


@media (min-width: 1200px) {
  .wShow{
    display: -webkit-flex;
    display: flex;
  }
  .tShow, .mtShow{
    display: none;
  }
  
  .box100b30{
    width: 30%;
  }

  .box100b40 {
    width: 40%;
  }
  .box100b50, .box100b50t{
    width: 50%;
  }
  .box100b80{
    width: 80%;
  }

  .box100b70 {
    width: 70%;
  }

  .box100b60{
    width: 60%;
  }
  .box100b25 {
    width: 25%;
  }
  .box100b25t {
    width: 25%;
  }
  .box90b70{
    width:70%;
  }
  .box90b45 {
    width: 45%;
  }

  .box50b25{
    width: 25%;
  }
  .h30h50h {
    height: 50vh;
  }

  .font2h18h {
    font-size: 1.8vh;
  }

  .box60b50{
    width: 50%;
  }

  .box100b70t {
    width: 70%;
  }



  .hIndx{
    height: 180%;
  }

  .hSI{
    height: 120%;/*423%;*/
  }
  .notShow {
    display: none;
  }

  .hOne{
    height: 1000%;
  }

  .hPOS{
    height: 300%;
  }
  
  
}


@media (min-width: 1500px) {


}