@import"https://fonts.googleapis.com/css?family=Montserrat|Prompt&display=swap";@import"https://fonts.googleapis.com/css2?family=Prompt:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap";@import"https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";@import"https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";@import"https://fonts.googleapis.com/css2?family=Prompt:wght@400;600&family=Inter:wght@400;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap";:root{--primaryBackground-color: rgb(23, 91, 238);--primaryLightBackground-color: rgb(0, 140, 255);--primaryDarkBackground-color: rgb(0, 60, 226);--primaryTextColor: white;--primaryDimColor: rgb(62, 64, 175)}html{margin:0;padding:0}.program-logo{margin:10px}.grapene{padding:10px 20px;display:flex;flex:0}.grapene .head-left{display:block}.grapene .head-left .program-logo{font-weight:300}.grapene .head-right{display:flex;flex-direction:row;row-gap:20px;flex:1;justify-content:flex-end}.grapene .userlogo-menu{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}.grapene .userlogo-menu .logo{background-color:#000;border-radius:50%;height:2rem;width:2rem}body{margin:0;height:100%;width:100%}:root{--dimWord: rgb(83, 83, 83);--lightBackdrop: #f7fafd}*{font-family:Open Sans,Prompt,Sukhumvit Set,Montserrat,sans-serif}.head_nav{flex:0}.head_nav .left{display:flex;flex-direction:row;align-items:center;justify-content:center}.head_nav .left .Logo{display:flex;flex-direction:row;align-items:center;justify-content:center;font-weight:400;font-size:1.3rem;color:var(--primaryDarkBackground-color);padding:10px 0}.head_nav .left .Logo *{font-family:Poppins}.head_nav .left .Logo .b-label{padding-left:10px;color:var(--dimWord)}.head_nav .left .menuContainer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-left:4rem}.head_nav .left .menuContainer *{font-family:Poppins,Noto Sans Thai Looped,Open Sans,Prompt,Sukhumvit Set,Montserrat,sans-serif}.head_nav .left .menuContainer .item{text-decoration:none;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;font-weight:400;color:var(--dimWord)}.head_nav .left .menuContainer .item label{font-size:.85rem;padding:10px 1rem}.head_nav .left .menuContainer .item *{user-select:none;-webkit-user-select:none;cursor:pointer}.head_nav .left .menuContainer .item .ortin{display:flex;flex-direction:column;align-items:center;justify-content:center}.head_nav .left .menuContainer .item .ortin .llio{border-radius:0;height:0px;width:0px;margin-top:-6px;background-color:var(--dimWord);transition:.2s cubic-bezier(.075,.82,.165,1);position:relative;display:flex;flex-direction:unset;align-items:center;justify-content:center}.head_nav .left .menuContainer .item .ortin .llio .f{opacity:0;position:absolute;top:-10px;transition:.2s cubic-bezier(.075,.82,.165,1)}.head_nav .left .menuContainer .item:hover{color:#000}.head_nav .left .menuContainer .item:hover .ortin .llio{height:6px;width:6px;border-radius:3px}.head_nav .left .menuContainer .item:hover .ortin .llio .f{top:0;opacity:1}.head_nav .left .menuContainer .item-active,.head_nav .left .menuContainer .item-active:hover{color:#000}:is(.head_nav .left .menuContainer .item-active,.head_nav .left .menuContainer .item-active:hover) .ortin .llio{background-color:var(--primaryDarkBackground-color);width:2rem;height:1px;border:.5px}:is(.head_nav .left .menuContainer .item-active,.head_nav .left .menuContainer .item-active:hover) .ortin .llio .f{top:0;opacity:1;transform:rotate(180deg)}.head_nav .head-right .menuContainer{display:flex;flex-direction:row;align-items:center;justify-content:center;padding-left:4rem}.head_nav .head-right .menuContainer *{font-family:Poppins,Noto Sans Thai Looped,Open Sans,Prompt,Sukhumvit Set,Montserrat,sans-serif}.head_nav .head-right .menuContainer .item{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;user-select:none;-webkit-user-select:none;font-weight:400;color:var(--dimWord);border-radius:.3rem}.head_nav .head-right .menuContainer .item label{font-size:.85rem;padding:10px 1rem;color:var(--primaryBackground-color)}.head_nav .head-right .menuContainer .item *{user-select:none;-webkit-user-select:none;cursor:pointer}.head_nav .head-right .menuContainer .item:hover{background-color:#80a8ff33}.head_nav .head-right .menuContainer .item:active{background-color:var(--primaryDarkBackground-color)}.body{display:flex;flex-direction:column;align-items:center;flex:auto}.body .container{display:flex;flex-direction:row;align-items:center;justify-content:center;max-width:1100px;width:calc(100% - 40px);padding:0 20px}.body .container .first{max-width:600px;width:calc(100% - 100px);padding-right:100px;flex:2}.body .container .second{display:flex;flex-direction:column;align-items:center;justify-content:center;width:400px;flex:none}.body .hero{padding-top:2rem;padding-bottom:3rem}.body .hero h1{font-size:2.5rem;font-weight:600}.body .hero .hero-blue{color:var(--primaryBackground-color);font-family:Inter,sans-serif}.body .hero p{word-spacing:.3rem;line-height:1.5;color:#151515;font-size:1.3rem;font-weight:300}.body .hero p b{font-weight:600}.body .hero .button{display:flex;flex-flow:row;gap:20px;margin-top:2rem}.body .hero .button a{border-radius:24px;padding:12px 28px;text-decoration:none}.body .hero .button a:hover{box-shadow:0 0 10px #18002e67}.body .hero .button #tryBt{background-color:var(--primaryBackground-color);color:#fff}.body .hero .button #demoBt{border:1px solid var(--primaryBackground-color);color:var(--primaryDarkBackground-color)}.body .hero .button #tryBt:hover{background-color:var(--primaryDarkBackground-color);color:#fff}.body .dsipl{display:flex;width:100%;height:auto;overflow:hidden;flex-direction:column;justify-content:center;align-items:center}.vidfer{background-color:#151515;border-radius:1rem;height:400px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.vidfer i{color:#fff;font-size:2.5rem}.partial{background-color:var(--lightBackdrop);width:100%;height:auto;padding:20px 0}.partial .head{text-align:center;font-weight:500;color:var(--dimWord)}.partial .slide .liis{display:flex;gap:40px;justify-content:center;align-items:center;flex-direction:row}.partial .slide .liis .item{float:left}.partial .slide .liis .item img{height:80px}.partial .slide .liis .item .sssd{height:60px}.partial .slide .liis .item .circle{border-radius:50%}.function-sections{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding-top:20px;padding-bottom:20px}.function-sections .container{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:1200px;gap:20px}.function-sections .container .feature-card{background:var(--lightBackdrop);border-radius:18px;box-shadow:0 2px 8px #1668f556;padding:1.3rem 1.1rem;max-width:290px;min-width:230px;width:calc(100% - 2.2rem);display:grid;grid:auto auto 30px;flex:1 1 220px;text-align:left;height:calc(100% - 2.6rem);cursor:pointer;transition:.5s cubic-bezier(.075,.82,.165,1);gap:10px}.function-sections .container .feature-card h3{transition:.5s cubic-bezier(.075,.82,.165,1);font-weight:500;margin:0}.function-sections .container .feature-card p{margin:0}.function-sections .container .feature-card *{cursor:pointer;user-select:none;-moz-user-select:none;-webkit-user-select:none}.function-sections .container .feature-card label{text-align:end;font-size:.7rem;color:var(--dimWord);display:flex;flex-direction:row;padding-right:20px;opacity:.2;transition:.5s cubic-bezier(.075,.82,.165,1);position:relative;align-items:center;justify-content:flex-end}.function-sections .container .feature-card label i{opacity:0;font-size:1rem;transition:.5s cubic-bezier(.075,.82,.165,1);margin-right:20px}.function-sections .container .feature-card:hover{box-shadow:0 2px 10px #0011ffa2}.function-sections .container .feature-card:hover h3{color:var(--primaryBackground-color)}.function-sections .container .feature-card:hover label{opacity:1}.function-sections .container .feature-card:hover label i{opacity:1;margin-right:0}body{height:100vh;width:100vw}#root{display:grid;grid:80px auto 80px / 1fr;height:100%;width:100%}.register{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;--lineLightingColor: #ecedff}.register *{font-family:Noto Sans Thai Looped,Open Sans,Prompt,Sukhumvit Set,Montserrat,sans-serif}.register .Poppins-Fonts{font-family:Poppins,Noto Sans Thai Looped,Prompt,Sukhumvit Set,Montserrat,sans-serif}.register .container{max-width:800px;width:calc(100% - 40px);padding:20px 40px 40px;display:flex;flex-direction:row;gap:3rem;border-radius:2rem;box-shadow:0 2px 2rem #979eff2f;transition:all .3s ease-in-out}.register .container .left{max-width:100%}.register .container .left h1{font-weight:400;font-size:2.6rem;margin-bottom:5px}.register .container .left .mark{width:100%;margin-top:10px;padding-top:10px;border-top:.5px solid var(--lineLightingColor);color:var(--dimWord)}.register .container .retry-otp{border:none;padding:.5rem 1rem;border-radius:.5rem;color:var(--primaryLightBackground-color);background-color:#f9f9ff;cursor:pointer}.register .container .retry-otp:hover{background-color:#713efc;color:#fff}.register .container .card{width:calc(100% - 40px);padding:20px;display:grid;grid:auto 0px 40px / 100%;height:100%;max-width:100%}.register .container .card input[type=text],.register .container .card input[type=email],.register .container .card input[type=password]{padding:10px 20px;border-radius:5px;border:1px solid var(--lineLightingColor);width:calc(100% - 42px)}.register .container .card input[type=text]:focus,.register .container .card input[type=email]:focus,.register .container .card input[type=password]:focus{border-color:#818dff;box-shadow:inset 0 0 5px #a8a8f0;outline:none}.register .container .card input[type=email]::placeholder{color:#b1b1d3ce;opacity:1;font-weight:200}.register .container .card .register_next{background-color:var(--primaryLightBackground-color);color:#fff;border-radius:1.5rem;padding:.5rem 2rem;cursor:pointer;border:none}.register .container .card .register_next:hover{background-color:var(--primaryDarkBackground-color)}.register .container .card .cars{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.register .container .card .consume{width:100%;display:flex;flex-direction:column;align-items:stretch;justify-content:center}.register .container .card .consume .item{width:100%}.register .container .card .consume .item .small-desc{font-size:.8rem}.register .container .card .consume .slider{width:100%;overflow:hidden;height:auto}.register .container .card .consume .slider .constSlide{width:100%;height:auto;position:relative;transition:1s linear}.register .container .card .consume .slider .constSlide .item{display:flex;flex-direction:column;opacity:0;max-height:0;overflow:hidden;transition:all .6s ease}.register .container .card .consume .slider .constSlide .active{opacity:1;max-height:1000px}.register .container .card .pinStack{display:grid;grid-template-columns:repeat(var(--pin-length, 6),calc((100% - (var(--pin-length, 6) * 10px)) / var(--pin-length, 6)));gap:10px;width:calc(100% - 20px);padding:0 10px;max-width:calc((var(--pin-length)*40px) + (16px*(var(--pin-length)-1)));justify-content:center;align-items:center}.register .container .card .pinStack .pinItem{font-size:1.4rem;text-align:center;aspect-ratio:1/2}.register .container .card .pinStack .pinItem::placeholder{color:#b1b1d3ce;opacity:1;font-weight:200}.register .container .card .card-header{padding-bottom:10px}.register .container .card .alert{display:none;color:#df1919;font-size:.8rem;padding-top:10px}.register .container .card .alert-active{display:block}.register .reqNewOTP{border:unset;border-radius:.5rem;background-color:var(--lineLightingColor);padding:10px;cursor:pointer;color:var(--dimWord)}.register .reqNewOTP:hover{background-color:var(--primaryDarkBackground-color);color:#fff}.register .reqNewOTP *{cursor:pointer}.loadingLine{width:100%;display:flex;flex-direction:column;gap:8px;height:10px;margin-top:50px;margin-left:5px}.lc{height:12px;overflow:hidden;border-radius:6px;animation:lc 2.5s ease-in-out infinite}.ll{display:flex;flex-direction:row;width:max-content;gap:6px;height:100%}.l1,.l2,.l3{height:10px;border-radius:5px;transition:width .4s ease-in-out}.loadingActive .l1{background-color:#6f00ff;animation:l1 2.5s ease-in-out infinite}.loadingActive .l2{background-color:#0084ff;animation:l2 2.5s ease-in-out infinite .3s}.loadingActive .l3{background-color:#00c94d;animation:l3 2.5s ease-in-out infinite .6s}.loadingActive .card .register_next{background-color:#d3d3d3}@keyframes l1{0%{width:10px}50%{width:40px}to{width:10px}}@keyframes l2{0%{width:15px}50%{width:30px}to{width:15px}}@keyframes l3{0%{width:25px}50%{width:15px}to{width:25px}}@keyframes lc{0%{width:0%}50%{width:80%}to{width:0%}}.green{color:green}.register .container .card .disabled,.register .container .card .disabled:hover{background-color:#d3d3d3}.register .container .card .register_go{color:var(--primaryLightBackground-color);background-color:transparent}.register .container .card .register_go:hover{color:#fff}.register .container .card .register_go_back{color:#525252;background-color:transparent}.register .container .card .register_go_back:hover{background-color:transparent}@media screen and (max-width:1000px){.register .container{flex-direction:column;max-width:400px}.register .container .left *{text-align:center}.register .container .left label{display:block}.register .container .card{gap:10px}.register .container .card .pinStack input[type=text].pinItem{padding:0;flex:auto;width:auto;aspect-ratio:1/1.2}.head_nav .head-right{display:none}}@media screen and (max-width:550px){.register .container{border-radius:0;box-shadow:none}.head_nav .left{display:none}}