body {
    font-family: 'Prompt', sans-serif;
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
.bg_load{
    position: absolute;
    z-index: 2;
    height: 100vh;
    width: 100%;
    background: rgba(0,0,0,0.8);
    animation: bgload 1s;
}
@keyframes bgload{
    form{
        opacity:0;
    }
    to{
        opacity:1;
    }
}
.king{
    position: absolute;
    width: 52%;
    margin-top: 2%;
    margin-left: 26%;
}
.Visitking{
    position: absolute;
    width: 24%;
    margin-top: 34%;
    margin-left: 41%;
    cursor: pointer;
}
.Visitking:hover{
    width: 24.5%;
    transition-duration:0.3s; 
}
/*contacttor*/
.boxcontacttor{position: absolute;background: rgba(255,255,255,0.5);width: 100%;height: 81vh;margin-top: 9%;}
.subcontor{position: absolute;margin-top: 6%;margin-left: 45%;font-size: 30px;font-weight: bold;color: #032f67;text-shadow: 1px 1px 1px #000;}
/*contacttor*/
 /*content1*/
 #boxcontent1{ width:102%; height:92vh;background-color: rgb(255 255 255 / 87%); margin-top:7vh; margin-left:-2ex;}
.content1 {
   /*  background-image: url('img/background/bg-content.jpg'); */
   background: rgb(25 40 56 / 50%);
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display:inline-block;
    overflow: hidden;
}
.content2 {
   
    max-width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
}
.subject {
    font-family: 'Prompt', sans-serif;
    margin-left: 8%;
    margin-top: 15%;
    font-size: 30px;
    color: #183b5f;
    font-weight: bold;
    

}
.subjectEN{
    position:absolute;
    font-family: 'Prompt', sans-serif;
    margin-left:8%;
    margin-top: 1%;
    font-size:23px;
    color:#003890;
    font-weight:bold;
}
.subject2 {font-family: 'Prompt', sans-serif; margin-left:30%; margin-top: 5%;font-size:25px;color:#003890;font-weight:bold;}
.content {
    /*position: absolute; */
    font-size: 14px;
    font-family: 'Prompt', sans-serif;
    /* margin-top: 4%; */
    color: #000000;
   /*  width: 40%; */
    margin-left: 8%;
 
    }
    .contentEN {
        position:absolute;
        font-size:13px;
        font-family: 'Prompt', sans-serif;
        margin-top:4%;
        color: #000000;
        width:40%;
        margin-left:8%;
     
        }
.boxline {position:absolute;  width:100%; height:auto; margin-top:10%; margin-left:10px; display:block; }
.barbot { width:100%; margin-top: 3vh; height:100vh;}
.icon1 { width:30%;cursor:pointer;  margin-top:3vh}
.icon2{  width:30%;  cursor:pointer; margin-top:3vh; }
.icon3 { width:30%; cursor:pointer; margin-top:3vh;}
.icon4 {width:30%; cursor:pointer; margin-top:3vh; }
.icon5 {width:30%; cursor:pointer; margin-top:3vh; }
.icon6 {width:30%; cursor:pointer; margin-top:3vh; }
#bu1{ margin-left: 0vh;}#bu2{ margin-left: -7vh;}#bu3{ margin-left: -15vh;}#bu4{ margin-left: -20vh;}#bu5{ margin-left:-23vh;}#bu6{ margin-left: 0vh;}
.fontabout {font-family: 'Prompt', sans-serif; position:absolute;margin-top:36%;margin-left:45%;color:#003890;font-size:25px;font-weight:bold;}
.colorcontent { background: -webkit-linear-gradient(rgb(255, 255, 255),  rgb(255, 255, 255));-webkit-background-clip: text;-webkit-text-fill-color: transparent; font-weight:bold;}
.fontOr {position:absolute; margin-top:6%; margin-left:10%; font-size: 16px;}.fontOr2{position: absolute;margin-top: 6%;margin-left: 8.5%;font-size: 16px;}
.fontBU {position:absolute; margin-top:6%; margin-left:28.5%; font-size: 16px;}.fontBU2 {position:absolute; margin-top:6%; margin-left:27.5%; font-size: 16px;}
.fontCe {position:absolute; margin-top:6%; margin-left:49.5%; font-size: 16px;}.fontCe2{position: absolute;margin-top: 6%;margin-left: 48%;font-size: 16px;}
.fontSf {position:absolute; margin-top:6%; margin-left:67%; font-size: 16px;}.fontSf2{position: absolute;margin-top: 6%;margin-left: 69.5%;font-size: 16px;}
.fontQr {position:absolute; margin-top:6%; margin-left:85%; font-size: 16px; }.fontQr2{position: absolute;margin-top: 6%;margin-left: 86%;font-size: 16px;}
.fontNL {position:absolute; margin-top:6%; margin-left:85%; font-size: 16px; }.fontNL2{position: absolute;margin-top: 6%;margin-left: 84.7%;font-size: 16px;}
.Excon {position:absolute; margin-left:90%;width:3%; margin-top:5%; cursor:pointer; display:none; }
.casalcontent1 {  width: 76%; margin-left: 10vh; margin-top:9vh;  }
.casalbox{margin-left: -3vh;}
#hover1{position:absolute; width:8%; margin-top:-0.1%; margin-left:9.5%; animation: hoverS 0.3s;}
#hover2{position:absolute; width:8%; margin-top:-0.1%; margin-left:29.5%; animation: hoverS 0.3s;}
#hover3{position:absolute; width:8%; margin-top:-0.1%; margin-left:49.5%; animation: hoverS 0.3s;}
#hover4{position:absolute; width:8%; margin-top:-0.1%; margin-left:68.5%; animation: hoverS 0.3s;}
#hover5{position:absolute; width:8%; margin-top:-0.1%; margin-left:85.5%; animation: hoverS 0.3s;}
#Or2,#CT2,#SER2,#SA2,#QL2{display: none;}
@keyframes hoverS {
        from{ transform:scale(0); opacity:0;   }
        to{ transform:scale(1); opacity:1;  }
    }
    .imgcamo{width:100%; height:50vh;}
/*content1*/
/*Manegement*/
#c2{ width:100%;}
.imgMA { width:40%; }.divMA{position: absolute;width: 100%;height: 100%;}
.charMA {position: absolute;
    font-weight: bold;
    color: #424200;
    font-size: 12px;
    background: whitesmoke;
    width: 15%;
    text-align: center;
    height: 26%;
    margin-top:12%;
}
.charMAE {position: absolute;
    font-weight: bold;
    color: #808000;
    font-size: 10px;
    background: whitesmoke;
    width: 15%;
    text-align: center;
    height: 26%;
    margin-top:12%;
}
.K_CHAT {margin-left: 11%;margin-top: 0%;}.charKC {margin-top: 12%;margin-left: 11%;}.divKC{margin-left: -5%;}
.K_KAI { margin-left:15%;}.charKA {margin-left: 15%;}.divKA{margin-left: 10%;}
.K_KUNG {margin-left:30%;}.charKKU { margin-left:30%;}.divKU{margin-left: 14%;}
.K_KAET { margin-left:44%;}.charKKAT { margin-left:44%;}.divKAE{margin-left: 19%;}
.K_WEE { margin-left:30%;}.charKWEE{ margin-left:30%;}.divWEE{margin-left: 52%;}
.K_SUKSUN { margin-left:39%;}.charKSUK{ margin-left:39%; }.divSU{margin-left: -24%;}
.K_SETTA { margin-left:20%;}.charKSE{ margin-left:20%; }.divSAT{margin-left: 14%;}
.K_SUPOT { margin-left:10%;}.charKsu { margin-left:10%; }.divSUP{margin-left: 43%;}
.K_SOMKID { margin-left:50%;}.charKSOM{ margin-left:50%; }.divSOM{margin-left: 22%;}
.barMA1{position:absolute; width:15%; height:0.5vh; margin-top:9%; margin-left:15%; }
.barMA2{position:absolute; width:15%; height:0.5vh; margin-top:9%; margin-left:38%; }
.barMA3{position:absolute; width:15%; height:0.5vh; margin-top:20%; margin-left:15%; }
.barMA4{position:absolute; width:15%; height:0.5vh; margin-top:20%; margin-left:38%; }
.barMA5{position:absolute; width:15%; height:0.5vh; margin-top:27.5%; margin-left:15%; }
.barMA6{position:absolute; width:15%; height:0.5vh; margin-top:27.5%; margin-left:38%; }
.barcontent2{
    position: absolute;
    width: 101%; background: rgba(220, 234, 253, 0.53);
    height: 61vh;margin-top: 4%; margin-left: 0%;display: inline-block;overflow: hidden;}
.subjectMA{
    margin-top: 1%;
    font-size: 24px;
    font-weight: bold;
    color: #000d69;
    
}
    .subjectMAEN{
       
        margin-top: 2%;
        font-size: 24px;
        font-weight: bold;
        color: #003890;
        }
.boxTopkc{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    animation: MS 1s;
    justify-items: center;
    
}
.boxbotkc{
    width: 51%;
    height: 50%;
    /* background: rgba(255, 213, 70, 0.4); */
    /* border: 2px dashed rgba(236, 198, 48, 0.5); */
    animation: MS 1s;
}
@keyframes MS{
    from{
    
    opacity: 0;
    }
    to{
        opacity: 1;
      }
}

/*Manegement*/
/*content1*/
 /*contact*/
#c3 {width:100%; }
.imgcontact {width: 100%; margin-top: 1%; height: 22vh;}
.Headoffice {border-bottom: 2px solid #005c86; border-right: 2px solid #005c86;}
.shoplaem { border-bottom: 2px solid #005c86;}
.shoprayong { border-right: 2px solid #005c86;}
.namesite {margin-top: 1%;font-size: 16px;color: #444200;font-weight: bold;}
.maping {margin-left: 12%;margin-top: 1%;width: 75%; animation:fAd1 0.5s;  }
@keyframes fAd1 {
    0% {
        
        
        opacity:0;
       
        
    }
   
    100% {
        
        opacity:1;
    }
    
    
  
}
.boxfont {color: #002444; font-size: 95%;}
.boxOR{height: 28vh;display: inline-block;overflow: hidden; background: rgba(255, 249, 249, 0.5);}
.barcontent3{
    position: absolute;
    width: 101%;background: rgba(220, 234, 253, 0.53);
    height: 61vh;margin-top: 4%; margin-left: 0%;display: inline-block;overflow: hidden;}
    #desktop{
        display: block;
    }
    #mobile{display:none;}
  
/*contact*/
/*ACHIVEMENT*/
#c4{width:100%;}#Qulitycer{}
.imgcer { width:5%; margin-top: 2%; animation:fontsu 1s; }
.iso { margin-left: 1%;  width:10%;}
.iso2 {margin-left: 3%;}
.green { margin-left: 3%;  width:10%;}
.osas { margin-left: 3%; width:4%;}
.fontAd {
    margin-top: 9%;
    width: 100%;
    font-size: 20px;
    color: #13007d;
    font-weight: bold;
    background: rgba(255, 255, 255, 0.65); }
.iconAd {width: 12%;position: absolute;margin-left: 28%;margin-top: 14%;z-index: 1; animation:fontsu 1s;}
@keyframes fAd {
    0% {
        
        transform:translateX(-34%);
        opacity:0;
       
        
    }
    25% {
        
         transform:translateX(-34%);
         opacity:0;
       
    }
    50% {
        
        opacity:1;
    }
    
    
  
}
.stuc {width: 19%;position: absolute;}
.fontstuc {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    animation: fontsu 1.5s;
    border: 1px solid #6f6f00;
    width: 64%;
    text-align: center;
    border-radius: 25px;
    color: #002052;
}
.fontModal {
    font-size: 20px;
    font-weight: bold;
     color: #002f86; 
    }
.barModal {border-bottom:3px solid #808000;}
.bodyModal {background-color:whitesmoke; border-radius:3px;}
 .fontstuc:hover { color: #3e3900;border: 1px solid #00376b;background: rgba(255, 254, 254, 0.5);}
@keyframes fontsu {
    0% { transform:scale(0)}
    25% {
         transform:scale(0);
    }
    50% {
         transform:scale(0);
    }
    75% {
         transform:scale(0);
    }
    100% {
         transform:scale(1);
    }
}
.Qulityfont{float: right;;margin-top: 3%;}
.Sefetyfont {float: left;margin-top: 3%; margin-left: 7%; }
.Clienfont {float: right;margin-top: 3%; margin-right: 7%; }
.Natfont { float: left;margin-top: 3%;}
.imgtust {width:40%;height:20vh;  border-radius:5px;}
.barcontent4{position: absolute;
    width: 100%;background: rgba(220, 234, 253, 0.53);
    height: 61vh;margin-top: 4%; margin-left: 0%;display: inline-block;overflow: hidden;}
    .scal1{position: absolute;
        width: 100%;
        margin-left: 16%;
        margin-top: -6%;
    }
.cerleam{
    width: 30%;
    position: absolute;
    margin-left: 36%;
    margin-top: 21%;
    
}
.cerry{
          /* position: absolute; */
    width: 31.2%;
    margin-left: 68%;
    margin-top: -64%;
    
}
.cersa1{
    width: 36%;
    margin-left: 31%;
    margin-top: -66%;
    
}
.cersa2{
    width: 36%;
    margin-left: 31%;
    margin-top: -21%;
    
}
/*ACHIVEMENT*/
/*Safety*/
.barsafety {position:absolute; width:18%; margin-top:5%; margin-left:-2%;  }
.fontbarsafety {position:absolute; font-weight:bold; margin-top:15%; color:#003890; z-index:1; }
.we {margin-left:6%;  font-size:25px;}
.gif {margin-top:17%; margin-left:7%;}
.priority {margin-top:19%;margin-left:8%;}
.sub {margin-top:21.5%; margin-left:9%;}
.forsafe {margin-top:24%;margin-left:8%;}
.Rank {margin-top:27%;margin-left:1%; font-size:30px; }
.Numberone {position:absolute;margin-top:26%;margin-left:9%; font-size:45px; font-weight:bold; color:#808000; font-family:Calibri; z-index:1;}
.safecontent {position:absolute; width:100%;}.ball{ width:4%;}
.fontScon {position:absolute; font-size:20px;color:#003890; font-weight:bold;  cursor:pointer; margin-top:-4%; margin-left:9%;  }
.fontScon:hover {border-radius:5px; border:1px solid#808000;background-color:white;}
.safecontent1 {margin-top:4.2%; margin-left:0%;}.ball1{margin-left:5%;}.fontScon1{width:18%;}
.safecontent2 {margin-top:7.5%; margin-left:2%;}.ball2{margin-left:6%;}.fontScon2{ width:18%;  margin-top:-4%; margin-left:10%;  }
.safecontent3 {margin-top:11.4%; margin-left:4%;}.ball3{margin-left:7%;}.fontScon3{width:10%; margin-left:11%; }
.safecontent4 {margin-top:16.3%; margin-left:6%;}.ball4{margin-left:7%;}.fontScon4{ width:15%; margin-left:11%;  }
.safecontent5 {margin-top:21.4%; margin-left:4%;}.ball5{margin-left:10%;}.fontScon5{ width:22%;  margin-left:14%; }
.safecontent6 {margin-top:26.2%; margin-left:3%;}.ball6{margin-left:10%;}.fontScon6{ width:19%;  margin-left:14%; }
.safecontent7 {margin-top:30.9%; margin-left:2%;}.ball7{margin-left:7%;}.fontScon7{width:22%;  margin-left:11%; }
.safecontent8 {margin-top:33.7%; margin-left:-1%;}.ball8{margin-left:5%; margin-top:2%;}.fontScon8{width:25%; margin-left:9%;}
.moreScontent {position:absolute; width:28%; height:55vh; /*background-color:white;*/ margin-top:10%; 
               margin-left:40%; border-radius:5px;  border-left: 2px solid#808000;
               box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.fontSafecon {font-size:20px; color:#003890; border-top-left-radius:5px; border-bottom:2px solid #808000; }
.barcontent5{position: absolute;
    width: 100%;background: rgba(220, 234, 253, 0.53);
    height: 61vh;margin-top: 4%; margin-left: 0%;display: inline-block;overflow: hidden; animation: conQ  1s; }
.textsafe{font-size: 20px;
    font-weight: bold;
    margin-top: 1%;
    margin-left: 1%;
    color: #0d4822;}
.textsafe2EN{position: absolute;width: 83%;margin-left: 8%;margin-top: 0%;color: #808000;font-size: 13px;z-index: 1;background: rgba(255,255,255,0.9);}
.textsafe2{width: 83%;margin-left: 8%;margin-top: 0%;color: #3c3c00;font-size: 14px;z-index: 1;background: rgba(255,255,255,0.9);}
.sefe0{text-align: center;margin-top: 0%;color: #292000;width: 74%;margin-left: 14%;}
.imsafe1{background-image: url(img/safety/7.jpg);
    width: 100%;
    height: 51vh;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(0.2px) opacity(0.3);}
.imsafe2{position: absolute;width: 22%;margin-left: 8%;margin-top: 3%;margin-left: 21%;}
.imsafe3{position: absolute;width: 22%;margin-left: 8%;margin-top: 3%;margin-left: 52%;}
.imsafe4{position: absolute;width: 70%;margin-left: 15%;}
.logosafe{width: 14%; margin-top: 1%;}

/*Safety*/
/*Qulity*/
.subQuality{
    width: 100%;
    /* text-align: center; */
    margin-top: 7%;
    font-size: 22px;
    font-weight: bold;
    color: #00305a;
    background: rgba(255, 255, 255, 0.85);
}
.ContentQuality {margin-top: 1%; height: 36vh; color: #03233a; animation:fAd1 0.5s;}
.textQcontent {position: absolute;margin-top: 20%;margin-left: 35%;text-shadow: 1px 1px 1px #000000;color: #808000;  }
.textQ1 {margin: 17px;}
.textQ2 {margin: 17px;}
.textQ3{margin: 17px;}
.textQ4{margin: 17px;}
.textbottomQ {width: 42%;text-align: center;margin-left: 28%;font-size: 16px;color: #424200; animation:fAd1 0.5s;}
.textcontentQ {position:absolute; margin-top:10%; color:#003890; font-size:18px;  animation: conQ  3s; }
.contentQ1 {height: 17vh;background: rgba(253, 253, 253, 0.68);}
.contentQ2 {
    width: 100%;
    height: 17vh;
    background: rgba(199, 199, 199, 0.5);}
.contentQ3 {
    width: 100%;
    height: 17vh;
    background: rgba(199, 199, 199, 0.5);
    }
.contentQ4 {
    width: 100%;
    height: 17vh;
    background: rgba(253, 253, 253, 0.68);
    }
.lcon{margin-top:-5px;}
.barcontent6{position: absolute;
    width: 100%;background: rgba(220, 234, 253, 0.53);
    height: 61vh;margin-top: 4%; margin-left: 0%;display: inline-block;overflow: hidden;}
.boxQR{position: absolute;width: 100%;margin-top: -6%;margin-left: 12%; }
@keyframes conQ{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}
/*Qulity*/
/*Environmental policy*/
.barcontent7{position: absolute;
    width: 100%;background: rgba(220, 234, 253, 0.53);
    height: 61vh;margin-top: 4%; margin-left: 0%;display: inline-block;overflow: hidden; animation:fAd1 0.5s;}
.SubNL{width: 100%;margin-top:2px;margin-left: 0%;
    font-size: 23px;color: #004802;text-align: center;font-weight: bold;}
.conNL{text-align: center;width: 50%;margin-top: 1px;margin-left: 24%; color: #3a380c; font-size: 14px;}
.conNL2{color: #002e4e;margin-top:1%;position: absolute;width: 23%;margin-left: 25%;}
.conNL3{color: #002e4e; margin-top:1%;position: absolute;width: 23%;margin-left: 51%;}
.maginNL{padding: 4px;margin-top: 4%; border-left: 2px solid #3d5a00;border-right: 2px solid #3d5a00;border-radius: 7px;}
.divlefe{
    width: 100%;
    text-align: center;
    margin-top: 6px;
}
.lefe{
    width: 4%;
}

/*Environmental policy*/


 /*content1*/
 
 
 /*content2*/

 /*back*/
.Pcontent {
    background-image: url('img/background/CMX_1531-2.jpg');
    max-width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
    animation: backgroundfade0 2s;
}
.Sumcon {
    animation: backgroundfade 2s;
    background-image: url('img/project/NewCFP.jpg');
    /*background-image: url('img/background/1092603.png');*/
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 40%;
    display: block;
}
.Pcon {
    animation: backgroundfade2 2s;
    background-image: url('img/project/DSC01580.jpg');
    max-width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
}
.Econ {
    animation: backgroundfade3 1s;
    background-image: url('img/project/IMG_2952.JPG');
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
}
.Tcon {
    animation: backgroundfade4 2s;
    background-image: url('img/project/NewCCP.jpg');
    max-width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    display: block;
}
.SIcon {
    animation: backgroundfade5 2s ;
    background-image: url('img/project/DSC01755.JPG'); 
    max-width: 100%;
    height: 100vh;
    background-size: cover; background-repeat: no-repeat; background-position: center center;
    display: block;
}
.SCG {
    animation: backgroundfade6 2s ;
    background-image: url('img/project/Poup.jpg'); animation: backgroundfade 1s ;
    max-width: 100%;height: 100vh;
    background-size: cover; background-repeat: no-repeat; background-position: center center;
    display: block;
}
@keyframes backgroundfade0 {
    from {
        filter:brightness(30%);
    }

    to {
      
    }
}
@keyframes backgroundfade {
    from {
        
        filter:brightness(30%);
       
    }

    to {
      
        
    }
}
 @keyframes backgroundfade2 {
    from {
        filter:brightness(30%);
    }
    to {
     
     
    }

}
 @keyframes backgroundfade3 {
    from {
        filter:brightness(30%);
    }
    to {
     
     
    }

}
 @keyframes backgroundfade4 {
    from {
        filter:brightness(30%);
    }
    to {
    
     
    }

}
 @keyframes backgroundfade5 {
    from {
        filter:brightness(30%);
    }
    to {
     
     
    }

}
 @keyframes backgroundfade6 {
    from {
        filter:brightness(30%);
    }
    to {
     
     
    }

}
/*back*/
#boxlogo {
    animation: sr 1s;
    position:absolute;
    width:100%;
    margin-left:50%;
    margin-top:6%;
    
}
#boxsubject {
    position:absolute;
    color:#062f90;
    width:30%;
    background-color:rgb(255, 255, 255); background: rgba(255, 255, 255, 0.6);
    margin-top:10%;
    border-top-right-radius:10px;
    border-bottom-right-radius:10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    animation:sl 1s;
}
.fontbs {
     
     font-family: 'Prompt', sans-serif;
     font-size:30px;
     font-weight:bold;
     margin-top:5px; margin-left:30px;

}
.fontBold {position:absolute; font-family:'Prompt',sans-serif; font-weight:bold; color:white; }
#project{
    font-size: 35px;
    margin-left: 5%;
    color: rgb(255, 237, 170);
    text-shadow: 3px 3px 3px #000;
    }
#Activities{margin-top: 8%;margin-left: 5%;color: #d8d8d8;}
#Period{margin-top: 10%;margin-left: 5%;color: #d8d8d8;}
#Owner{margin-top: 5%;margin-left: 5%;font-size: 18px; font-weight: bold; text-shadow: 1px 1px 1px #000}
#fontlong{font-size: 22px}
.barringth {
    
    position: absolute;
    float: right;
    width: 15%;
    
    margin-left:37%
    
}
.borderSu {
    position:absolute;
    width:8%;
    margin-left:39.8%; margin-top:-1%;
}
.logoSU {
    position: absolute;
    width: 6%;
    margin-left: 40%;
    margin-top: 0%;
    cursor: pointer;
    animation: ro 2s;
}
.logoSU:hover {
    
   transform:scale(1.1);
   transition-duration:0.3s;
    
}
.logoP {
    position: absolute;
    width: 6%;
    margin-left: 40%;
    margin-top: 6%;
    cursor: pointer;
    animation: ro 2s;
}
    .logoP:hover {
         transform:scale(1.1);
         transition-duration:0.3s;
    
    }
.logoE {
    position: absolute;
    width: 6%;
    margin-left: 40%;
    margin-top: 12%;
    cursor: pointer;
    animation: ro 2s;
}
    .logoE:hover {
       transform:scale(1.1);
   transition-duration:0.3s;
    
    }
.logoD {
    position: absolute;
    width: 6%;
    margin-left: 40%;
    margin-top: 18%;
    cursor: pointer;
    animation: ro 2s;
}
.logoD:hover {
      transform:scale(1.1);
   transition-duration:0.3s;
}
.logoSI {
    position: absolute;
    width: 6%;
    margin-left: 40%;
    margin-top: 24%;
    cursor: pointer;
    animation: ro 2s;
}
    .logoSI:hover {
         transform:scale(1.1);
         transition-duration:0.3s;
    }
.logoSC{
     position: absolute;
    width: 6%;
     margin-left:40%; margin-top:31%;
     cursor:pointer;
     animation:ro 2s;
}
    .logoSC:hover {
         transform:scale(1.1);
         transition-duration:0.3s;
    }
@keyframes sr {
    from {
      margin-left:100%
 
    }
    to {
       
        margin-left:50%

    }

}
@keyframes sl {
    from {
      margin-left:-20%
 
    }
    to {
       
        margin-left:0%

    }

}
@keyframes ro {
    from {
        transform:scale(0);
        
    }
    to {
         transform:scale(1);
    }
}
#boxPcon {position: absolute;margin-top: 67vh;width: 100%;background: rgba(0, 19, 27, 0.5);height: 30vh;}
#Projecttext{ margin-top:1%; }
#projectIP{    
    position: absolute;
    width: 27%;
    height: 18vh;
    /* background: rgba(255,255,255,0.5); */
    margin-top: 3%;
    margin-left: 51%;
}
#boxIP{ position: absolute;width: 30%;height: 12vh;margin-left: -13%;margin-top: 6%;    border-left: 1px solid #868686;border-right: 1px solid #717070;}
#boxStuc{position: absolute;width: 30%;height: 12vh; margin-left: 17%;margin-top: 6%;border-right: 1px solid #717070;}
#boxSupPi{position: absolute;width: 30%;height: 12vh; margin-left: 45%;margin-top: 6%;border-right: 1px solid #717070;}
#boxpain{position: absolute;width: 30%;height: 12vh; margin-left: 75%;margin-top: 6%;border-right: 1px solid #717070;}
#boxStaff{position: absolute;width: 30%;height: 12vh; margin-left: 102%;margin-top: 6%;border-right: 1px solid #717070;}
.imgPI{position: absolute;width: 50%;margin-left: 27%;margin-top: -15%;}
.subT{position: absolute;font-size: 16px;font-weight: bold;color: #b5b5b5;margin-top: 32%;margin-left: 1%;text-shadow: 1px 1px 1px #000;width: 100%;text-align: center;}
.DataP{position: absolute;color: #ffffff;margin-left: 17%;margin-top: 53%;font-size: 15px;text-shadow: 1px 1px 1px #000;}
/*content2*/
/*dev*/
.devcontent {
    /*background-image: url('img/background/CMX_1542-4.jpg');*/
    background-image: url('img/background/เคน.jpg');
    max-width: 100%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:center center;
    
}
.datatrain{position:absolute; width:100%; height:77.7vh; margin-top:0%; background: rgba(255, 255, 255, 0.85);}
.datacom{    position: absolute;
    position: absolute;
    width: 50.2%;
    height: 28vh;
    margin-top: 77.7vh;
    background: rgba(0, 0, 0, 0.89);
    cursor: pointer;
    display: inline-block;
    overflow: hidden; }
    
.datatec{    
    position: absolute;
    width: 50%;
    height: 28vh;
    margin-top: 77.7vh;
    margin-left: 50.2%;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.89);
    display: inline-block;
    overflow: hidden;}
.textM{position:absolute; color:rgba(255,255,255,0.8);
       font-weight:bold; text-shadow:1px 1px 2px rgba(0, 0, 0, 0.50) ;
       font-size:25px; margin-top:5%; cursor:pointer; z-index:1; text-align:center;
       border: 2px solid rgba(255,255,255, 0.5); border-radius:25px; width:25%; 
}
#JAN{margin-left:8%;border-bottom:none;}#FEB{margin-left:40%; margin-top:44%; border-top:none; }#MAR{margin-left:75%;border-bottom:none;}
#APRL{margin-left:8%; margin-top:44%; border-top:none;}#MAY{margin-left:40%;border-bottom:none;}#JUNE{margin-left:76%; margin-top:44%; border-top:none;}
#JULY{margin-left:5%;border-bottom:none;}#AUGUST{margin-left:42%; margin-top:44%; border-top:none; }#SEB{margin-left:78%;border-bottom:none;}
#OCT{margin-left:9%; margin-top:44%; border-top:none;}#NOV{margin-left:45%;border-bottom:none; }#DEC{margin-left:78%; margin-top:44%; border-top:none;}
.part{position:absolute; width:23.5%; height:30vh; margin-top:12%;}
.part1{ margin-left:1%}.part2{ margin-left:25%;}.part3{margin-left:49%;}.part4{margin-left:73.5%;}
.gra {position:absolute; width:105%; margin-left:-3%; margin-top:27vh; }
.textgra {
    position: absolute;
    font-size: 38px;
    margin-top: 5%;
    margin-left: 28%;
    font-weight: bold;
    color:#003890;
    
}
.textgra2 {
    position: absolute;
    font-size: 38px;
    margin-top: 5%;
    margin-left: 33%;
    font-weight: bold;
    color: #003890;
    
}
.textby{position:absolute; font-size:14px; margin-top:35%; z-index:3; color:rgba(255,255,255, 0.5); margin-left:92%;}
.columG{position:absolute; width:36.5%; height:70vh;}
.columG1 {margin-left:0;}.columG2{margin-left:16%;}.columG3{margin-left:32%;}
.columG4{ margin-left:47%;}.columG5{ margin-left:63%;}.columG6{margin-left:64% }
.contentTR{position:absolute; height:20vh;width:75%;}
.TR1{margin-left:20%; margin-top:6%;}.TR2{margin-left:10%; margin-top:69%;}

.imgtr{ width: 79%;height: 32vh; border-radius:5px; position: absolute;}
.texttr{ margin-top:28vh; width:79%; position:absolute; text-align:center; background:rgba(0,0,0,0.5); color:rgb(255, 255, 255); border-bottom-right-radius:3px; }
.iconM{position:absolute; width:13vh; margin-top:-10%; margin-left:-30%; }
.hoverM{position:absolute; width:20vh; margin-top:-6vh; margin-left:-7vh; z-index:-1;}
.hoverM2{position: absolute;width: 28vh;margin-top: -4%;margin-left: 34%;z-index: -1;}
.hoverM3{position: absolute;width: 24vh;margin-top: -4%;margin-left: 32%;z-index: -1;}
.casalTR{position:absolute; margin-top:0%; margin-left:0%; width:100%; border-radius:5px; box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.imgIT{position: absolute;width: 17%;margin-top: 2%;margin-left: 29%; } 
.imgTE{position: absolute;width: 9%;margin-top: 5%;margin-left: 28%;}
.imgTE1{position: absolute; width: 5%;margin-left: 37%;margin-top: 3%;}
.imgTE2{position: absolute;width: 7%;margin-top: 12%;margin-left: 37%;}
/*.imgIT:hover{transform:scale(1.05); transition-duration:0.3s; transform-origin:50% 50%;}*/
#development{ position:absolute; width:100%;}#TEC{ position:absolute; width:100%;}
#IT {width: 100%;height: 100vh;position: absolute;}
#TEC {
    width: 100%;
    height: 77.7vh;
    position: absolute;
    background-image: url('img/imgIT/ENF2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 0%;
}
.BGIT {
    background-image: url('img/imgtarin/IT3.png');
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    height: 77.7vh;
}
.BGEN {
   
   /*background: rgba(0, 9, 30, 0.50);*/
    position: absolute;
    width: 100%;
    height: 77.7vh;
     
}
.imgsystem{position: absolute; border-radius: 5px; box-shadow:2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.ETA{width: 55%; margin-top: 17%;margin-left: 22%;}
.AVL{width: 50%; margin-top: 17%;margin-left: 22%;}
.PR{width: 55%; margin-top: 18%;margin-left: 22%;}
.weld{width: 55%; margin-top: 5%;margin-left: 20%;}
.weldSP{width: 55%; margin-top:12%;margin-left: 22%;}
.weldS{width: 55%; margin-top:20%;margin-left: 22%;}
.spool{width: 50%; margin-top:17%; margin-left:22%; }
.scan{width: 45%; height:15vh; margin-top:10%; margin-left:27%;}
.system1{position:absolute; width:30%;  height:40vh;  margin-top:16%; margin-left:40%;}
.system2{position:absolute; width:30%;  height:40vh;  margin-top:17%; margin-left:0%;}
.system3{position:absolute; width:30%;  height:50vh;  margin-top:4%; margin-left:20%;}
.system4{position:absolute; width:30%;  height:30vh;  margin-top:24.5%; margin-left:20%; }
.system5{position:absolute; width:30%;  height:30vh;  margin-top:0%; margin-left:0%;}
.system6{position:absolute; width:30%;  height:30vh;  margin-top:0%; margin-left:40%; }
.system7{position:absolute; width:30%;  height:30vh;  margin-top:24.5%; margin-left:61%;}
.system8{position:absolute; width:30%;  height:30vh;  margin-top:18%; margin-left:78%;}
.ITfont{ position:absolute; width:20%; height:30vh; }
.IT1{margin-top:8%; margin-left:65%;} .textIT{position:absolute; color:white; font-weight:bold; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.50);}
.textIT1{margin-top:10vh; font-size:45px;}.textIT2{font-size:35px; margin-top:16vh; margin-left:10vh;}
.textDEPART{position:absolute; font-size:25px; font-weight:bold; color:white; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.50);}
.textHR{margin-top:46%; margin-left:25%;}
.textQC{margin-top:48%; margin-left:21%;}
.textPR{margin-top:46%; margin-left:25%;}
.textEN{margin-top:37%; margin-left:40%; width:20%;}
.iconIT{position:absolute; width:13%; margin-top:40%; margin-left:10%;}
.iconIT1{margin-top:40%; margin-left:10%;}
.iconIT2{margin-top:40%; margin-left:10%;}.iconIT3{margin-top:30%; margin-left:45%;}.iconIT4{margin-top:38%; margin-left:25%;}
.textboxIT{    
    position: absolute;
    width: 25%;
    font-size: 20px;
    margin-left: 49%;
    margin-top: 5%;
    font-weight: bold;
    /* text-shadow: 1px 1px 1px rgb(0, 0, 0); */
    background: -webkit-linear-gradient(rgb(255, 216, 0), rgb(255, 255, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;}
.textboxEN{       
    position: absolute;
    width: 25%;
    /* color: #808000; */
    font-size: 20px;
    margin-left: 46%;
    margin-top: 5%;
    font-weight: bold;
    background: -webkit-linear-gradient(rgb(255, 216, 0), rgb(255, 255, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sceenhover{
    position: absolute;
    width: 26%;
    height: 58%;
    margin-top: 2%;
    margin-left: 23%;
}
/*TEC*/
.boxTEC{position:absolute; width:20%; height:40vh;  margin-left:10%; margin-top:9%;}
.textTEC{position:absolute; color:rgba(255, 255, 255,0.8); font-size:50px; font-weight:bold; text-shadow:2px 2px 2px rgba(0, 0, 0, 0.50);}.textTEC1{margin-top:4vh;}.textTEC2{margin-top:10vh;}
.imgTEC{position:absolute; border-radius:50px; width:30%; box-shadow:2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.divTEC{position:absolute; width:68%; height:67vh; margin-top:5%; margin-left:29%; }
.ITEC1{margin-top: 7%;margin-left: 72%;width: 20%;}.ITEC2{margin-top: 28%;margin-left: 30%;width: 25%;}
.ITEC3{margin-top: 24%;margin-left: 63.5%;width: 15%}.ITEC4{margin-top: 3%;margin-left: 39%;width: 27%;}
.ITEC5{margin-left: 5%;margin-top: 13%;width: 25%;}.ITEC6{margin-top: 36%;width: 18%;margin-left: 72%;}
.ITEC7{margin-left: -4%;margin-top: -2%;width: 20%;}
/*TEC*/
.boxbot{width: 100%;margin-left: 0%; margin-top: 10%;position: absolute;}
.boxbot2{width: 100%;margin-left: 0%; margin-top: 10%;position: absolute;}
/*dev*/
 /*mobile sreen @media screen and (min-width: 300px) and (max-width:500px)*/

 /*mobile sreen*/  


 @keyframes spinner{form{transform: rotate(0deg);}to{transform: rotate(360deg);}}
 @keyframes backbox{form{ margin-left: 50%;}to{margin-left: 100%;}}