html,body{font-size:16px;margin:0;width:100%;height:100%}h1{margin:0}div{box-sizing:border-box}#root{width:100%;height:100%}.guaGraph{margin-bottom:.5rem}.guaGraph .yao{width:10rem;height:1rem;margin-bottom:.5rem}.guaGraph .dashed{border:1px dashed #ccc;padding:0 4.5rem}.guaGraph .dashed .space{width:1rem;height:1rem;border-left:1px dashed #ccc;border-right:1px dashed #ccc}.guaGraph .yang{background-color:#000}.guaGraph .yin{border-left:4.5rem dashed #000;border-right:4.5rem dashed #000}.animationBox{display:flex;justify-content:center}.coinWrapper{width:10rem;height:30rem;position:relative}.coinWrapper .coinBox{position:absolute;bottom:0;width:5rem;height:5rem;left:2.5rem;right:2.5rem}.coinWrapper .coinBox .coin{position:absolute;bottom:0;width:100%;height:100%}.coinWrapper .coinBox .front{z-index:1}.coinWrapper .coinBox .back{z-index:0}.coinWrapper.animating .coinBox{animation:coin_rotate .5s linear infinite alternate,coin_position 2s linear infinite alternate}.coinWrapper.animating .coinBox .front{animation:coin_front .5s linear infinite alternate}.coinWrapper.animating .coinBox .back{animation:coin_back .5s linear infinite alternate}@keyframes coin_rotate{0%{transform:rotateX(0)}50%{transform:rotateX(180deg)}to{transform:rotateX(360deg)}}@keyframes coin_position{0%{bottom:0rem}10%{bottom:6rem}20%{bottom:12rem}30%{bottom:18rem}40%{bottom:22.5rem}50%{bottom:25rem}60%{bottom:22.5rem}70%{bottom:18rem}80%{bottom:12rem}90%{bottom:6rem}to{bottom:0rem}}@keyframes coin_front{0%{z-index:1}50%{z-index:0}to{z-index:1}}@keyframes coin_back{0%{z-index:0}50%{z-index:1}to{z-index:0}}.Mobile_App_Box{padding:1rem}.Mobile_App_Box .btnBox{margin-top:2rem;text-align:center}.GuaInput{padding-top:2rem;text-align:center}.GuaInput .guaGraph .yao{margin:0 auto .5rem}.GuaInput .inputBox{padding:2rem;width:100%}.GuaInput .inputBox .ant-input-number{width:100%}.GuaInput .inputBox .ant-form-item{margin-bottom:0}.GuaInput .animationBox .coinWrapper{width:7rem}.GuaInput .animationBox .coinWrapper .coinBox{left:1rem;right:1rem}.GuaInput .animationBox .coinWrapper .coinBox .coin{left:0}.explainBox .guaGraph .yao{margin:0 auto .5rem}.contentBox{height:100%}.contentBox .yaoBox .headerBox{padding:2rem 5rem 0;display:block}.contentBox .yaoBox .btnBox{margin-top:2rem;text-align:center}.contentBox .guaBox{padding:5rem 5rem 0;display:flex;flex-direction:column;align-items:center}.contentBox .guaBox .inputBox,.contentBox .guaBox .inputBox .ant-input-number{width:100%}.contentBox .explainBox{padding:0 3rem;overflow:auto;height:100%}.contentBox .explainBox li{list-style:square}
