.header,.ui,.ui-menu{top:0;width:100%;left:0}*{margin:0;color:#fff;font-family:Comfortaa,sans-serif;box-sizing:border-box}body,html{position:relative;width:100%;height:100%;overflow:hidden}body:not([data-usescroller=true]),html:not([data-usescroller=true]){height:unset;overflow:unset}a{text-decoration:none}ul{list-style:none;padding:0}.header{position:fixed;background-color:rgba(0,0,0,.75);z-index:99;transition:.4s;transition-delay:.3s;opacity:1;box-shadow:0 0 20px 10px rgba(0,0,0,.3)}.ui .scroll,.ui-menu,[data-isScrollTop=true] .header,[data-menu-open=true] .ui-menu-button-lineMiddle{opacity:0}.header-inner{position:relative;width:95%;max-width:1500px;margin:0 auto;padding:15px 20px}.header-title{font-size:35px}@media only screen and (max-width:800px){.header-inner{padding:13px 20px}.header-title{font-size:27px}}.header-menu{position:absolute;right:20px;bottom:20px;display:flex;justify-content:space-between}.header-menu-item{padding:0 10}@media only screen and (max-width:800px){.header-menu{display:none}}.ui{position:fixed;z-index:99;height:100%;pointer-events:none}.ui-menu{position:absolute;height:100%;background-color:rgba(0,0,0,.9);pointer-events:none;transition:.5s}[data-menu-open=true] .ui-menu{opacity:1;pointer-events:auto}.ui-menu-list{width:100%;height:100%;display:flex;flex-direction:column;flex-wrap:wrap;justify-content:center;align-items:center;font-size:20px}.ui-menu-list-item{display:block;margin-bottom:30px}.ui-menu-button{pointer-events:auto;position:absolute;right:10px;top:5px;width:50px;height:50px;border-radius:5px;border:none;cursor:pointer;z-index:999}@media only screen and (min-width:800px){.ui-menu-button{display:none}}.ui-menu-button span{display:block;width:60%;margin:auto;height:2px;background-color:#FFF;position:absolute;left:0;right:0;top:calc((100% - 4px)/ 2);border-radius:3px;transition:.2s}.ui-menu-button-lineTop{transform:translateY(-8px)}[data-menu-open=true] .ui-menu-button-lineTop{transform:rotate(45deg)}.ui-menu-button-lineBottom{transform:translateY(8px)}[data-menu-open=true] .ui-menu-button-lineBottom{transform:rotate(-45deg)}.ui .ui-header-menu{pointer-events:auto;position:absolute;right:20px;top:30px;display:flex;justify-content:space-between}.ui .ui-header-menu-container{position:relative;width:95%;max-width:1500px;margin:0 auto;padding:15px 20px}.ui .ui-header-menu-item{padding:0 10}.ui .scroll{position:absolute;left:50%;bottom:50px;font-size:18px;transition:.3s;transform:translateX(-50%) translateY(-70px)}@media only screen and (min-width:800px){.ui .scroll{bottom:100px}}.ui .scroll::after{content:"";position:absolute;left:50%;top:110%;border-right:5px solid transparent;border-top:5px solid #FFF;border-left:5px solid transparent}[data-isScrollTop=true] .ui .scroll{opacity:1;transform:translateX(-50%) translateY(0)}#canvas{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-99}.transform-container{width:100%;position:absolute;left:0;top:0}.transform-container .section{width:80%;min-height:200vh;margin:0 auto;padding:70px 0}.transform-container .mainVis{position:relative;padding-top:150px;height:100vh}@media only screen and (max-width:800px){.ui .ui-header-menu{display:none}.transform-container .mainVis{padding-top:90px}}.transform-container .mainVis .title-wrapper{text-align:center;display:block}.transform-container .mainVis .title-wrapper .title{font-size:60px}@media only screen and (max-width:800px){.transform-container .mainVis .title-wrapper .title{font-size:40px}}.transform-container .mainVis .title-wrapper .title-sub{padding-top:5px;font-size:20px}.transform-container .about{padding-top:200px}.transform-container .about h1{font-size:40px;padding-bottom:30px}.transform-container .about-inner{width:80%;max-width:700}@media only screen and (max-width:800px){.transform-container .about{padding-top:50px}.transform-container .about h1{font-size:30px}.transform-container .about-inner{width:100%}}.transform-container .about-desc{margin-bottom:50px}.transform-container .about-example{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;padding:0}.transform-container .about-example-item{width:30%;list-style:none}.transform-container .about-example-item figure{width:100%;margin-bottom:40px}.transform-container .about-example-item figure a{width:100%;display:block;margin-bottom:10px}.transform-container .about-example-item figure img{width:100%;border-radius:8px}.transform-container .about-example-item figure figcaption{font-size:14px}.transform-container .about-more{display:block;text-align:right}.transform-container .usage{padding-top:100px}.transform-container .usage h1{font-size:40px;padding-bottom:30px}@media only screen and (max-width:800px){.transform-container .about-example-item{width:100%}.transform-container .usage{padding-top:50px}.transform-container .usage h1{font-size:30px}}.transform-container .usage-inner{width:80%;max-width:600;margin-left:auto}.transform-container .usage p{margin-bottom:10px}.transform-container .usage p .small{font-size:12px}.transform-container .usage .import,.transform-container .usage .install{padding-bottom:30px}.transform-container .usage .code{display:inline-block;padding:10px 20px;background-color:rgba(0,0,0,.4);border-radius:5px}.footer{position:absolute;left:0;bottom:0;width:100%}.footer .copyright{background-color:rgba(0,0,0,.8);width:100%;text-align:center;font-size:12px;padding:15px 0}@media only screen and (max-width:800px){.transform-container .usage-inner{width:100%}.footer .copyright{padding:15px 0 25px}}.examples-container{position:relative;width:90%;max-width:1200px;margin:120 auto 0;padding-bottom:100px}.examples-container h1{font-size:35px;margin-bottom:40px}.examples-list{display:flex;flex-wrap:wrap;width:100%;margin-bottom:20px}.examples-list-item{position:relative;width:30%;margin:0 1.666% 20px;border-radius:5px;overflow:hidden}@media only screen and (max-width:800px){.examples-container h1{font-size:30px}.examples-list-item{width:100%}}.examples-list-item-link{display:block;width:100%}.examples-list-item-link .img-container{width:100%}.examples-list-item-link .img-container::after{content:"";display:block;width:100%;padding-top:70%}.examples-list-item img{position:absolute;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.examples-list-item p{position:absolute;left:0;bottom:0;padding:10px;border-radius:5px;background-color:rgba(0,0,0,.8)}.examples-list-item-code{display:inline-block!important;position:absolute;right:0;top:0;padding:10px;color:#FFF;z-index:20;border-radius:0 0 0 5px;transition:.3s}.examples-list-item-code:hover{background-color:rgba(255,255,255,.3)}