@charset "utf-8";

/* CSS Document */

ul{padding:0;margin:0;}

ul li{list-style:none;}

a{color:#000;}

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

.clear{clear:both;}

.imgw100{width: 100%;height: auto;}

.container {max-width: 900px;}

.btn1 {position: absolute;left: 3%;top: 29%;width: 44%;}

.btn2 {position: absolute;left: 47%;top: 23%;width: 52%;}

.boxtel {position: absolute;left: 23.2%;top: 67%;width: 44%;}

.boxtel .tel1 {width: 100%;position: absolute;left: 0;top: 0;}

.boxtel .tel2 {width: 100%;position: absolute;left: 0;top: 0;animation: telfade 1.5s infinite;-moz-animation: telfade 1.5s infinite;-webkit-animation: telfade 1.5s infinite;-o-animation: telfade 1.5s infinite;}

.box1 .itemall{position: absolute;}

.box1 .item1{left: 11%;top: 8%;width: 13%;height: 6%;}

.box1 .item2{left: 33%;top: 8%;width: 13%;height: 6%;}

.box1 .item3{left: 55%;top: 8%;width: 13%;height: 6%;}

.box1 .item4{left: 77%;top: 8%;width: 13%;height: 6%;}

.box1 .item5{left: 8%;top: 18%;width: 15%;height: 7%;}

.box1 .item6{left: 32%;top: 18%;width: 16%;height: 7%;}

.box1 .item7{left: 53%;top: 18%;width: 19%;height: 7%;}

.box1 .item8{left: 76%;top: 18%;width: 16%;height: 7%;}

.box1 .item9{left: 8%;top: 28%;width: 15%;height: 6%;}

.box1 .item10{left: 32%;top: 28%;width: 15%;height: 6%;}

.box1 .item11{left: 54%;top: 28%;width: 17%;height: 6%;}

.box1 .item12{left: 75%;top: 28%;width: 17%;height: 6%;}

.box1 .item13{left: 8%;top: 37%;width: 15%;height: 6%;}

.box1 .item14{left: 32%;top: 37%;width: 15%;height: 6%;}

.box1 .item15{left: 54%;top: 37%;width: 15%;height: 6%;}

.box1 .item16{left: 76%;top: 37%;width: 15%;height: 6%;}

.box1 .item17{left: 8%;top: 46%;width: 15%;height: 6%;}

.box1 .item18{left: 32%;top: 47%;width: 15%;height: 5%;}

.box1 .item19{left: 54%;top: 47%;width: 15%;height: 5%;}

.box1 .item20{left: 76%;top: 47%;width: 15%;height: 5%;}

.box1 .item21{left: 8%;top: 57%;width: 15%;height: 6%;}

.box1 .item22{left: 35%;top: 57%;width: 26%;height: 6%;}

.box1 .item23{left: 68%;top: 57%;width: 26%;height: 6%;}

.box1 .item24{left: 45%;top: 70%;width: 50%;height: 7%;}

.box1 .item25{left: 48%;top: 79%;width: 43%;height: 3%;}

.boxcontact .title{font-size: 26px;color: #fff;font-weight: bold;margin-bottom: 5px;margin-top: 40px;}

.boxcontact .boxin{background-color: #e9e9e9;width: 100%;border-radius: 30px;padding: 30px 20px;font-size: 18px;font-weight: bold;margin-bottom: 40px;}

.boxcontact .boxin .text{margin-bottom: 5px;}

.boxcontact .btnsubmit{float: left;width: 200px;margin-top: 10px;font-weight: bold;}

.boxcontact .text2{float: left;margin:15px 0 0 10px;}

.box4 .item1{position: absolute;width: 23%;height: 3%;left: 67%;top: 17%;}

.box4 .item2{position: absolute;width: 23%;height: 3%;left: 67%;top: 20%;}

#videoyou {position: absolute;top: 44.5%;left: -2.5%;right: 0;margin: auto;width: 75%;}

.title{font-size:70px;color:#027fbf;font-width:bold;}
p{font-size:22px;}
@media (max-width: 700px) {
.title{font-size: 50px;}
}

/* Preloader */

#preloader {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: #fff; /* change if the mask should have another color then white */

    z-index: 999999; /* makes sure it stays on top */

    display: none;

}

#status {

    width: 200px;

    height: 200px;

    position: absolute;

    left: 50%; /* centers the loading animation horizontally one the screen */

    top: 50%; /* centers the loading animation vertically one the screen */

    background-image: url(../images/preloader.gif); /* path to your loading animation */

    background-repeat: no-repeat;

    background-position: center bottom;

    text-align:center;

    margin: -100px 0 0 -100px; /* is width and height divided by two */

}

#status p {

    text-align: center;

}

/* Animation Keyframes*/

@keyframes telfade{

    0% { opacity: 1; }

    10% { opacity: 0; }

    20% { opacity: 1; }

    30% { opacity: 0; }

    40% { opacity: 1; }

    100% { opacity: 1; }

}

@keyframes lighteffect{

    0% { left: -100% }

    100% { left: 100%; }  

}



@keyframes s1 {

    0% { opacity: 0; }

    20% { opacity: 1; }

    40% { opacity: 1; }

    60% { opacity: 1; }

    80% { opacity: 1; }

    100% { opacity: 0; }

}

@keyframes s2 {

    0% { opacity: 0; }

    20% { opacity: 0; }

    40% { opacity: 1; }

    60% { opacity: 1; }

    80% { opacity: 1; }

    100% { opacity: 0; }

}

@keyframes s3 {

    0% { opacity: 0; }

    20% { opacity: 0; }

    40% { opacity: 0; }

    60% { opacity: 1; }

    80% { opacity: 1; }

    100% { opacity: 0; }

}