@font-face{font-family:Raleway;src:url(/raleway/Raleway-Thin.ttf);font-weight:100}@font-face{font-family:Raleway;src:url(/raleway/Raleway-ExtraLight.ttf);font-weight:200}@font-face{font-family:Raleway;src:url(/raleway/Raleway-Light.ttf);font-weight:300}@font-face{font-family:Raleway;src:url(/raleway/Raleway-Regular.ttf);font-weight:400}@font-face{font-family:Raleway;src:url(/raleway/Raleway-Medium.ttf);font-weight:500}@font-face{font-family:Raleway;src:url(/raleway/Raleway-SemiBold.ttf);font-weight:600}@font-face{font-family:Raleway;src:url(/raleway/Raleway-Bold.ttf);font-weight:700}@font-face{font-family:Raleway;src:url(/raleway/Raleway-ExtraBold.ttf);font-weight:800}@font-face{font-family:Raleway;src:url(/raleway/Raleway-Black.ttf);font-weight:900}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-Hairline.otf);font-weight:100}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-Thin.otf);font-weight:200}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-UltraLight.otf);font-weight:300}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-Light.otf);font-weight:400}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-Regular.otf);font-weight:500}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-SemiBold.otf);font-weight:600}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-Bold.otf);font-weight:700}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-ExtraBold.otf);font-weight:800}@font-face{font-family:Montserrat;src:url(/montserrat/montserrat-Black.otf);font-weight:900}@font-face{font-family:Kanit;src:url(/kanit/Kanit-Thin.ttf);font-weight:100}@font-face{font-family:Kanit;src:url(/kanit/Kanit-ExtraLight.ttf);font-weight:200}@font-face{font-family:Kanit;src:url(/kanit/Kanit-Light.ttf);font-weight:300}@font-face{font-family:Kanit;src:url(/kanit/Kanit-Regular.ttf);font-weight:400}@font-face{font-family:Kanit;src:url(/kanit/Kanit-Medium.ttf);font-weight:500}@font-face{font-family:Kanit;src:url(/kanit/Kanit-semiBold.ttf);font-weight:600}@font-face{font-family:Kanit;src:url(/kanit/Kanit-Bold.ttf);font-weight:700}@font-face{font-family:Kanit;src:url(/kanit/Kanit-ExtraBold.ttf);font-weight:800}@font-face{font-family:Kanit;src:url(/kanit/Kanit-Black.ttf);font-weight:900}@font-face{font-family:Poppins;src:url(/poppins/Poppins-Black.ttf);font-weight:900}@font-face{font-family:Poppins;src:url(/poppins/Poppins-ExtraBold.ttf);font-weight:800}@font-face{font-family:Poppins;src:url(/poppins/Poppins-Bold.ttf);font-weight:700}@font-face{font-family:Poppins;src:url(/poppins/Poppins-SemiBold.ttf);font-weight:600}@font-face{font-family:Poppins;src:url(/poppins/Poppins-Medium.ttf);font-weight:500}@font-face{font-family:Poppins;src:url(/poppins/Poppins-Regular.ttf);font-weight:400}@font-face{font-family:Poppins;src:url(/poppins/Poppins-Light.ttf);font-weight:300}@font-face{font-family:Poppins;src:url(/poppins/Poppins-Thin.ttf);font-weight:200}.bg{background-color:#fff;position:fixed;z-index:99;width:100%;top:0}.bg .header-container{margin-top:5%;display:flex}.bg .header-container .header-menu{display:flex;flex-direction:row-reverse;justify-content:space-between;align-items:center;width:80%;margin:0 auto}.bg .header-container .header-menu .hamburger-menu{display:none}.bg .header-container .header-menu .nav-menu{position:relative;display:flex;list-style:none;cursor:none}.bg .header-container .header-menu .nav-menu__item{margin:0 1em;display:inline-block}.bg .header-container .header-menu .nav-menu__item:before{cursor:none;content:"";display:block;width:0;height:2px;background:#000;transition:width .3s}.bg .header-container .header-menu .nav-menu__item:hover:before{cursor:none;width:100%}.bg .header-container .header-menu .nav-menu .last{position:relative;margin:0 1em;display:inline-block;color:#000}.bg .header-container .header-menu .nav-menu .last:hover>a{color:#888;cursor:default}.bg .header-container .header-menu .nav-menu .last:after{content:"coming soon";position:absolute;font-size:.7rem;top:-50%;left:0;color:transparent}.bg .header-container .header-menu .nav-menu .last:hover:after{color:#888;transition:.2s ease-in-out}.bg .header-container .header-menu a{color:#000;text-decoration:none}.bg .header-container .header-menu .logo{position:relative;font-weight:900;font-size:1.5rem;letter-spacing:1px;cursor:none}.bg .header-container .header-menu .logo .odetec{position:absolute;left:-550%;color:#fff;opacity:0}.bg .header-container .header-menu .logo .logo__t{position:absolute;left:100%}.bg .header-container .header-menu .logo:hover .logo__t{left:630%;transition:.25s linear}.bg .header-container .header-menu .logo:hover .odetec{color:#000;opacity:1;transition:.1s linear;left:100%}.bg .header-container .header-menu .vertical-line{height:300px;width:1px;background-color:transparent;position:absolute;top:130%;left:11.5%;animation:logo 1s linear;animation-play-state:paused;animation-delay:calc(var(--scroll) * -1s);animation-iteration-count:1;animation-fill-mode:both}.bg .header-container .button-container{display:none}@keyframes logo{to{height:0}}@media screen and (max-width:500px){.nav-menu{align-items:center}.nav-menu__item{font-size:.7rem!important;margin:.5rem!important}.nav-menu .last{font-size:.7rem}}.footer{text-align:right;max-width:80%;margin:0 auto;padding-top:2em;border-top:1px solid #000;padding-bottom:5em}.footer p{margin:0;padding-right:2%}.footer p a{text-decoration:none;color:#000}.jumboton{position:absolute;width:100%;height:300px;text-align:center;top:50%;left:50%;transform:translate(-50%,-50%)}.jumboton__title{text-transform:uppercase;margin:0;font-size:8em;line-height:1;color:#000}.jumboton__title:hover{-webkit-text-stroke:1.5px #000;color:#fff;transition:.1s ease-in-out}.jumboton__subtitle{margin:0;font-size:1.8em;letter-spacing:4px;font-weight:200}.jumboton__subtitle:hover{font-weight:400;transition:.1s ease-in-out}.click-out{color:#fff;opacity:0;transition:.3s ease-in-out}.click-in{color:#000!important}.round-jumboton{position:relative;width:50px;height:50px;border:8px solid #000;border-radius:100%;margin:2em auto 0;animation:blink 1s infinite}.round-jumboton:hover{animation:none;background-color:#000}.round-jumboton:before{content:"click";color:transparent;position:absolute;top:20%;left:-45%;font-weight:300;width:100px}.round-jumboton:hover:before{top:120%;color:#000;transition:.1s linear}@keyframes blink{0%{opacity:0}to{opacity:1}}@keyframes cursor{0%{width:60px;height:60px}50%{width:40px;height:40px}to{width:60px;height:60px}}.container{text-align:center;margin-top:35vh}.container .title{color:#fff;font-size:3rem;margin:0}.container .subtitle{opacity:0;margin:0;font-size:1.5rem;font-weight:200;letter-spacing:.5px}.interact{margin-top:2em;opacity:0}.interact .selected-color{position:relative;margin:0 auto;width:100px;height:100px;background:linear-gradient(180deg,#6a95f2,#c8a4cf 30%,#ffc97f 50%,#84b6d7 75%,#6a95f2);border-radius:100%;animation:gradient 100s linear infinite;transition:.2s linear}.interact .selected-color:hover{animation-play-state:paused;width:80px;height:80px}.interact .selected-color:hover .childs{visibility:visible;transition:1s ease-in-out;transition-delay:.2s}.interact .selected-color .childs{visibility:hidden;width:30px;height:30px;background-color:#000;border-radius:100%;position:absolute;top:100%}.interact .selected-color .blue{background-color:#6a95f2;left:-30%;top:70%}.interact .selected-color .yellow{background-color:#ffc97f;left:0}.interact .selected-color .pink{background-color:#c8a4cf;left:40%;top:105%}.interact .selected-color .green{background-color:#84b6d7;left:80%;top:90%}@keyframes gradient{to{background-position:0 -3000px}}@media screen and (max-width:500px){.jumboton__title{font-size:2.5rem}.jumboton__subtitle{font-size:1rem}}.ourwork{margin-top:70em;margin-bottom:5em}.ourwork .head .work_title{text-transform:uppercase;font-size:4em;line-height:1;margin:0 0 1em}.works .grid{display:flex;list-style:none;flex-wrap:wrap;max-width:80%;margin:0 auto}.works .grid .each-work{position:relative;width:31%;margin:1%;text-decoration:none;color:#000}.works .grid .each-work img{width:100%}.works .grid .each-work .description{z-index:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-weight:600;font-size:1.3rem;color:#fff;opacity:0}.works .grid .each-work:hover>.description{opacity:100%;transition:.2s ease-in}.works .grid .each-work .background-hover{position:absolute;width:100%;height:100%;background-color:rgba(0,0,0,.5);opacity:0;pointer-events:none}.works .grid .each-work:hover>.background-hover{opacity:100%;transition:.2s ease-in}.modal-container{width:100vw;height:100vh;position:fixed;top:0;left:0;background-color:rgba(0,0,0,.5);z-index:1000}.modal{z-index:1001;border-radius:25px;max-width:700px;padding:1em;width:calc(100% - 2em);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff}.modal .close-section{position:absolute;top:5px;right:10px}.modal .close-section .close-button{cursor:pointer;font-size:1.5rem;padding:.2em .5em;font-weight:500;color:#000;border:none;background-color:transparent}.modal .close-section .close-button:hover{color:#cd5c5c}.modal .close-section .close-button:active,.modal .close-section .close-button:focus{outline:none}.modal .content-section{text-align:center}.modal .content-section h1{color:#000;font-size:2.5rem;line-height:1;margin-top:1em;letter-spacing:2px;font-weight:800;text-transform:uppercase}.modal .content-section h1 .website-link{text-decoration:none;color:#000;font-size:1.5rem;font-weight:500}.modal .content-section h1 .website-link:before{content:"";display:block;width:0;height:2px;background:#000;transition:width .3s}.modal .content-section h1 .website-link:hover:before{cursor:none;width:100%}.modal .content-section h1 .website-link:hover{font-weight:600}.modal .content-section p{color:#000;font-weight:400;font-size:1.3rem;letter-spacing:.1px;border-bottom:1px solid #000;display:inline-block;margin-bottom:0;padding-bottom:16px}.modal .content-section ul{font-size:1rem;list-style:none;padding:0}.modal .content-section ul li{color:#000}.modal .content-section img{width:100%}@media screen and (max-width:500px){.ourwork{margin-top:43em}.head .work_title{font-size:1.8rem!important}.works .grid .each-work{width:95%;margin:0 auto}.content-section h1{font-size:1.5rem}}html{cursor:none}body,html{box-sizing:border-box;margin:0;padding:0;height:100%}body{font-family:Poppins}.thai{font-family:Kanit}