.input-box{width:100vw;height:80vh;align-items:center}.input-box,.input-div{display:flex;justify-content:center}.input-div{width:35%;background-color:#fafafa;box-shadow:1px 1px 10px 3px rgba(0,0,0,.4);padding:30px;border-radius:10px}.from-item{display:flex;width:100%}#wrap{height:600px;width:90%;border:1px solid rgba(216,145,68,.782);position:relative;margin:0 auto;overflow:hidden;background-color:#0045c2;background-size:100% 100%}.wrap-bg{background-image:url(../img/cx.283a0158.png)}#wrap>p{width:40px;height:40px;border-radius:50%;background-color:red;position:absolute;top:0;left:0;color:#000;font-size:25px;text-align:center;line-height:40px}.flex{justify-content:space-between}.ball-text,.flex{display:flex;align-items:center}.ball-text,.bottom{justify-content:center}.bottom{width:90%;margin:0 auto}.flex-speed{display:flex;align-items:center;font-size:28px}#ballSpeed{margin:10px}.flex-speed>button{font-size:28px;margin:0 10px}#text{width:100%}#text>p{display:flex;justify-content:center;align-items:center;width:50px;height:50px;background-color:#274b69;border-radius:10px;color:#fff;margin:0;padding:0}.ball3d-bg{background-image:url(../img/bg.9628c7b5.jpg)}.item{margin-top:20px}.box{font-family:Montserrat,sans-serif;background-color:#111;color:#fff;width:calc(700px*var(--scales));height:calc(333px*var(--scales));display:flex;justify-content:center;align-items:center;perspective:1800px;perspective-origin:50% 50%;overflow:hidden;zoom:1;transform:scale(1)}.container{position:absolute;top:46%;transform-style:preserve-3d;transform:rotateY(-90deg) rotateX(0deg) rotate(16deg)}.floor{width:100vmax;height:100vmax;background-image:radial-gradient(rgba(0,0,0,.8666666666666667),transparent 33%,#111 66%),repeating-linear-gradient(rgba(170,255,170,.2),transparent 1px 40px,rgba(170,255,170,.2) 41px),repeating-linear-gradient(270deg,rgba(170,255,170,.2) 0,transparent 1px 40px,rgba(170,255,170,.2) 41px);transform:translate(-50%,-50%) rotateX(90deg) translateZ(-180px)}.floor,.leg{position:absolute}.leg{transform-style:preserve-3d;transform:rotateX(-90deg);transform-origin:top}.leg:first-child{top:36px;left:36px}.leg:nth-child(2){top:36px;right:36px}.leg:nth-child(3){top:324px;left:36px}.leg:nth-child(4){top:324px;right:36px}.leg:after{content:"";position:absolute;top:18px;left:-18px;width:22px;height:162px;background-image:linear-gradient(#111,rgba(17,17,17,.06666666666666667)),linear-gradient(270deg,#222,#777,#222);border-radius:0 0 50% 50%/0 0 5px 5px;transform:rotateY(90deg)}.table{position:absolute;top:calc(-180px*var(--scales));left:calc(-360px*var(--scales));height:calc(360px*var(--scales));width:calc(720px*var(--scales));background-color:#066;background-image:radial-gradient(hsla(0,0%,100%,.06666666666666667),rgba(0,0,0,.2)),linear-gradient(270deg,#fff 6px,hsla(0,0%,100%,0) 0 calc(100% - 6px),#fff calc(100% - 6px)),linear-gradient(#fff 6px,hsla(0,0%,100%,0) 0 calc(50% - 3px),#fff calc(50% - 3px) calc(50% + 3px),hsla(0,0%,100%,0) calc(50% + 3px) calc(100% - 6px),#fff calc(100% - 6px));transform:rotateX(90deg);transform-style:preserve-3d}.table>.net{width:5%;left:50%;transform:rotateY(-90deg);transform-origin:left;transform-style:preserve-3d;background-image:repeating-linear-gradient(45deg,#ababab 0 1px,hsla(0,0%,67%,0) 1px 4px),repeating-linear-gradient(135deg,#ababab 0 1px,hsla(0,0%,67%,0) 1px 4px);border:2px solid #fff}.table>.net,.table>.net>.top{position:absolute;height:100%}.table>.net>.top{top:0;right:-1px;width:2px;background-color:#ddd;transform:rotateY(90deg)}.table>.net>.left{top:-1px}.table>.net>.left,.table>.net>.right{position:absolute;left:0;width:100%;height:2px;background-color:#ccc;transform:rotateX(90deg)}.table>.net>.right{bottom:-1px}.table>.front{top:100%;transform:rotateX(-90deg);transform-origin:top}.table>.back,.table>.front{position:absolute;left:0;width:100%;height:18px;background-color:#004d4d}.table>.back{top:0;transform:rotateX(-90deg) rotateY(180deg);transform-origin:top}.table>.back,.table>.front{display:flex;justify-content:center;align-items:center;font-size:10.8px;color:hsla(0,0%,100%,.6)}.table>.left{left:0;transform:rotateY(90deg);transform-origin:left}.table>.left,.table>.right{position:absolute;top:0;width:18px;height:100%;background-color:#033}.table>.right{right:0;transform:rotateY(-90deg);transform-origin:right}.ballWrapper{position:absolute;bottom:1px;transform-style:preserve-3d;-webkit-animation:ballLeft calc(2s*var(--ballSpeed)) cubic-bezier(.4,.5,.6,.6) infinite,ballHeight calc(0.5s*var(--ballSpeed)) calc(-1.75s*var(--ballSpeed)) ease-in infinite alternate,ballZ calc(16s*var(--ballSpeed)) cubic-bezier(.4,.5,.6,.6) infinite;animation:ballLeft calc(2s*var(--ballSpeed)) cubic-bezier(.4,.5,.6,.6) infinite,ballHeight calc(0.5s*var(--ballSpeed)) calc(-1.75s*var(--ballSpeed)) ease-in infinite alternate,ballZ calc(16s*var(--ballSpeed)) cubic-bezier(.4,.5,.6,.6) infinite}@-webkit-keyframes ballLeft{0%,to{left:calc(-354.006px*var(--scales))}50%{left:calc(354.006px*var(--scales))}}@keyframes ballLeft{0%,to{left:calc(-354.006px*var(--scales))}50%{left:calc(354.006px*var(--scales))}}@-webkit-keyframes ballHeight{0%{height:calc(54px*var(--scales))}to{height:0}}@keyframes ballHeight{0%{height:calc(54px*var(--scales))}to{height:0}}@-webkit-keyframes ballZ{0%,to{transform:translateZ(var(--pos0))}6.25%{transform:translateZ(var(--pos1))}12.5%{transform:translateZ(var(--pos2))}18.75%{transform:translateZ(var(--pos3))}25%{transform:translateZ(var(--pos4))}31.25%{transform:translateZ(var(--pos5))}37.5%{transform:translateZ(var(--pos6))}43.75%{transform:translateZ(var(--pos7))}50%{transform:translateZ(var(--pos8))}56.25%{transform:translateZ(var(--pos9))}62.5%{transform:translateZ(var(--pos10))}68.75%{transform:translateZ(var(--pos11))}75%{transform:translateZ(var(--pos12))}81.25%{transform:translateZ(var(--pos13))}87.5%{transform:translateZ(var(--pos14))}93.75%{transform:translateZ(var(--pos15))}}@keyframes ballZ{0%,to{transform:translateZ(var(--pos0))}6.25%{transform:translateZ(var(--pos1))}12.5%{transform:translateZ(var(--pos2))}18.75%{transform:translateZ(var(--pos3))}25%{transform:translateZ(var(--pos4))}31.25%{transform:translateZ(var(--pos5))}37.5%{transform:translateZ(var(--pos6))}43.75%{transform:translateZ(var(--pos7))}50%{transform:translateZ(var(--pos8))}56.25%{transform:translateZ(var(--pos9))}62.5%{transform:translateZ(var(--pos10))}68.75%{transform:translateZ(var(--pos11))}75%{transform:translateZ(var(--pos12))}81.25%{transform:translateZ(var(--pos13))}87.5%{transform:translateZ(var(--pos14))}93.75%{transform:translateZ(var(--pos15))}}.ballWrapper .ball{position:absolute;top:calc(-11.988px*var(--scales));left:calc(-5.994px*var(--scales));width:calc(11.988px*var(--scales));height:calc(11.988px*var(--scales));background-color:#fff;background-image:radial-gradient(circle at 50% 10%,#fff,#888);border-radius:50%;transform:rotateY(90deg);text-align:center}.ball-text{line-height:calc(11.988px*var(--scales));color:#000;font-size:16px;transform:scale(.8)}.ballWrapper .ballShadow{position:absolute;bottom:0;left:0;width:calc(35.964px*var(--scales));height:calc(35.964px*var(--scales));background-image:radial-gradient(#000,transparent 50%);transform:rotateX(-90deg) translateY(calc(11.988px*var(--scales)));-webkit-animation:ballShadowTransform calc(0.5s*var(--ballSpeed)) calc(-1.75s*var(--ballSpeed)) ease-in infinite alternate;animation:ballShadowTransform calc(0.5s*var(--ballSpeed)) calc(-1.75s*var(--ballSpeed)) ease-in infinite alternate}@-webkit-keyframes ballShadowTransform{0%{transform:translate(-50%,50%) rotateX(90deg) scale(4);opacity:.1}to{transform:translate(-50%,50%) rotateX(90deg) scale(1);opacity:.6}}@keyframes ballShadowTransform{0%{transform:translate(-50%,50%) rotateX(90deg) scale(4);opacity:.1}to{transform:translate(-50%,50%) rotateX(90deg) scale(1);opacity:.6}}:root{--pos0:calc(35px*var(--scales));--pos1:calc(-80px*var(--scales));--pos2:calc(105px*var(--scales));--pos3:calc(-10px*var(--scales));--pos4:calc(-125px*var(--scales));--pos5:calc(60px*var(--scales));--pos6:calc(-55px*var(--scales));--pos7:calc(130px*var(--scales));--pos8:calc(15px*var(--scales));--pos9:calc(-100px*var(--scales));--pos10:calc(85px*var(--scales));--pos11:calc(-30px*var(--scales));--pos12:calc(-145px*var(--scales));--pos13:calc(40px*var(--scales));--pos14:calc(-75px*var(--scales));--pos15:calc(110px*var(--scales));--scales:1.5;--ballSpeed:1}*{margin:0;padding:0}body{background:#f0f8ff}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}