.invisible,.q1 .q-section{opacity:0}.result,body{overflow:hidden}body,html{margin:0;font-family:Roboto,sans-serif;color:#fff}.q-section-number,.q-section-title{margin-bottom:20px;font-weight:700}.hide{display:none!important}.home{width:100vw;height:100vh;background:#1469FF}.home .star-bottom,.home .star-top{width:235px;border-top:135px solid #ff3c82}.home .star{position:absolute;top:50%;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);z-index:10}.home .star-top{border-left:80px solid transparent;border-right:80px solid transparent;position:relative}.home .star-bottom:before,.home .star-top:before{content:'';position:absolute;top:-194px;left:calc(50% - 40px);border-bottom:60px solid #ff3c82}.home .star-top:before{border-left:40px solid transparent;border-right:40px solid transparent}.home .star-bottom{border-left:80px solid transparent;border-right:80px solid transparent;position:relative;-ms-transform:rotate(180deg);transform:rotate(180deg)}.circle,.square{-ms-transform:translate(-50%,-50%)}.home .star-bottom:before{border-left:40px solid transparent;border-right:40px solid transparent}.circle,.square,.text-block{top:50%;left:50%;position:absolute}.circle{transform:translate(-50%,-50%);width:500px;height:500px;z-index:9;border-radius:50%;background:#0027c8}.square{transform:translate(-50%,-50%);width:400px;height:400px;z-index:8;background:#000}.result-text,.text-block{-ms-transform:translate(-50%,-50%)}.text-block{transform:translate(-50%,-50%);z-index:20;text-align:center}.text-block-title{font-weight:700;font-size:64px}.text-block-desc{font-size:24px;margin-top:20px}.q-section{background:#1469FF;height:100%;width:60%}.q-section-wrapper{width:380px;padding:40px 30px}.q-section-number{font-size:64px;color:#ff3c82}.q-section-title{font-size:36px;line-height:48px}.q-section-desc{color:#0027c8;font-size:24px;line-height:1.5em;margin-bottom:30px}.q-section-options{list-style:none;padding:0}.q-section-options li{padding:10px 30px;border:2px solid;border-radius:30px;margin:0 0 10px;font-size:20px;text-align:center;cursor:pointer;transition:all .4s}.q-section-options li:hover{background:#fff;color:#1469FF}.animate-section{position:absolute;top:0;right:0;bottom:0;left:60%;background:#0027c8}.animate-section-square{width:200px;height:200px;background:#ff3c82;position:absolute;top:100vh;left:50px}.animate-section-triangle{width:0;height:0;border-style:solid;border-width:0 70px 120px;border-color:transparent transparent #fff;position:absolute;top:calc(100vh + 100px);right:-20px}.animate-section-circle{width:400px;height:400px;border-radius:50%;background:#000;position:absolute;bottom:-900px;right:-50px}.q1,.q2{width:100vw;height:100vh;position:relative}.q1{background:#ff3c82;transition:background .5s}.q2,.q2 .q-section{background:#0027c8}.q1 .animate-section{left:100%}.q2 .q-section{position:absolute;right:0;opacity:0}.q2 .animate-section{left:0;right:60%;background:#ff3c82}.q2 .animate-section-square{width:300px;height:300px;-ms-transform:rotate(40deg);transform:rotate(40deg);background:#1469FF;bottom:-400px;top:unset;left:-170px}.q2 .animate-section-triangle{border-width:0 150px 250px;top:120vh;left:100px;-ms-transform:rotate(25deg);transform:rotate(25deg)}.q2 .animate-section-circle{width:200px;height:200px;left:70px;bottom:-300px}.calculating{height:5700px;width:100vw;background:#ff3c82}.calculating .text-block{position:fixed;z-index:20;color:#000}.calculating .small-circle{border-radius:50%}.result{width:0;height:100vh;position:relative;background:#1469FF}.result-text{position:absolute;left:50%;transform:translate(-50%,-50%);top:30%;font-size:24px}.result-ans{position:absolute;left:50%;-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%);top:40%;font-size:64px;font-weight:700}.result .tri{position:absolute;border-style:solid;border-width:62px 36px 0;border-color:#0027c8 transparent transparent}.result .triangle1,.result .triangle2,.result .triangle6{border-top-color:#000}.result .triangle1{top:50%;left:5%}.result .triangle2{top:0;left:10%}.result .triangle3{top:60%;left:20%}.result .triangle4{top:20%;left:22%}.result .triangle5{top:10%;left:60%}.result .triangle6{top:60%;left:75%}.result .triangle7{top:45%;left:95%}.result .tri{top:-100px}.result .triangle-blue{position:absolute;border-style:solid;border-width:0 180px 300px;border-color:transparent transparent #0027c8;bottom:-400px;left:37%;z-index:10}.result .triangle-white{position:absolute;border-style:solid;border-width:0 180px 310px;border-color:transparent transparent #fff;bottom:-400px;left:39%;z-index:7}.result .triangle-black{position:absolute;border-style:solid;border-width:0 160px 270px;border-color:transparent transparent #000;bottom:-400px;left:43%;z-index:5}.result-result{position:absolute;top:240px;left:800px;width:400px}.result-per{color:#0027c8;font-size:36px;font-weight:700;margin-bottom:40px;padding-left:100px}.result-desc{margin-bottom:40px;color:#fff;font-size:20px;line-height:36px}.result-btn{padding:10px 30px;border:2px solid #fff;border-radius:30px;font-size:20px;text-align:center;cursor:pointer;transition:all .4s}.result-btn:hover{background:#fff;color:#1469FF}
/*# sourceMappingURL=all.css.map */