body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding-bottom:200px}.App video{position:absolute;top:50%;left:50%;width:100%;height:100%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);transition:.5s;object-fit:cover;z-index:-20;background-attachment:fixed}.App{margin:0;padding:0 0 200px}.playControl{display:-webkit-flex;display:flex;-webkit-justify-content:flex-start;justify-content:flex-start;height:60px;-webkit-align-items:center;align-items:center;background-color:#fff;padding-left:10px;padding-right:10px;grid-column-gap:10px;-webkit-column-gap:10px;column-gap:10px;grid-template-columns:25px 1fr 25px}.playControl .playGroup{width:18px;height:18px;position:relative}.playControl .playGroup .pauseButton,.playControl .playGroup .playButton{position:absolute;left:0;top:0;display:none}.avtive{display:block}.playControl .stopButton{width:14px;height:14px;border-radius:2px;background:#999}.playControl .stopButton:hover{background:#000}.playControl .progressGroup{width:340px;height:28px}.playControl .progressGroup input[type=range]{background-color:#ebeff4;width:340px;-webkit-appearance:none;height:4px;padding:0;border:none}.playControl .progressGroup input[type=range]:focus{outline:none}.playControl .progressGroup input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;cursor:default;top:0;height:20px;width:20px;-webkit-transform:translateY(0);transform:translateY(0);background-image:url(https://nangonghan.oss-cn-beijing.aliyuncs.com/img/thumb.png);background-size:20px 20px;background-attachment:hover}.playControl .frame{width:68px;height:18px;border:1px solid rgba(0,0,0,.2);font-size:12px;text-align:right;margin-left:1px;padding-right:5px}.photoContainer{width:390px;display:grid;grid-template-columns:repeat(4,auto);grid-column-gap:10px;grid-row-gap:10px;-webkit-justify-content:start;justify-content:start;margin-top:30px;z-index:2;max-height:600px;overflow-y:auto}.photoContainer .photo{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;border:1px solid rgba(0,0,155,.1);min-width:78px;min-height:78px;max-width:78px;max-height:78px;padding:5px;box-sizing:content-box;position:relative;top:0;text-overflow:ellipsis;white-space:nowrap}.photoContainer .photo .compress{max-width:72px;max-height:72px;margin:0 auto}.photoContainer .photo .grey{height:20px;bottom:0;background:rgba(62,62,62,.5);text-overflow:ellipsis;white-space:pre;overflow:hidden;padding:0 4px}.photoContainer .photo .grey,.photoContainer .photo .mask{position:absolute;width:100%;left:0;line-height:20px;color:#fff;text-align:center}.photoContainer .photo .mask{height:100%;top:0;background:rgba(0,0,0,.65);z-index:10;line-height:18px;opacity:0;font-weight:700;padding-top:22px;cursor:pointer}.baseInfo{width:390px;height:40px;border:1px solid rgba(0,0,155,.1);line-height:40px;margin-top:30px;padding-left:14px;-webkit-user-select:none;-ms-user-select:none;user-select:none}.photoContainer .photo .hoverImage{max-width:750px;max-height:750px;margin:0 auto;position:absolute;display:block;border:1px solid rgba(0,0,155,.1);background:rgba(0,0,0,.65);padding:6px;border-radius:4px;left:0;bottom:90px;display:none;color:red;text-align:center;color:#fff;z-index:2}.photoContainer .photo .hoverImage img{max-width:400px;max-height:400px}.photoContainer .photo .hoverImage p{line-height:20px;z-index:2;margin-bottom:-4px}.photoContainer .photo:hover .hoverImage{display:block}.export_button{display:grid;grid-template-columns:repeat(2,auto);grid-column-gap:5px;-webkit-justify-content:start;justify-content:start;margin-top:30px;border:1px solid rgba(0,0,0,.1);padding:10px}.svgaPlayer{max-width:750px;border:1px solid rgba(0,0,155,.1);min-height:230px;margin:30px auto 0;display:grid;place-content:start center}canvas{border:1px solid hsla(0,0%,100%,.4)}.Header{width:100%;border-bottom:1px solid rgba(0,0,0,.1);padding:20px 120px}.headerContainer{margin:0 auto;-webkit-align-items:center;align-items:center;grid-template-columns:60px auto;-webkit-justify-content:space-between;justify-content:space-between}.headerContainer,.svgaContainer{max-width:1200px;min-width:1200px;display:grid}.svgaContainer{grid-template-columns:450px 750px;-webkit-justify-content:center;justify-content:center;margin:60px auto 0;border-radius:8px;background:hsla(0,0%,100%,.4)}.upload_wrap{position:relative;display:inline-block;overflow:hidden;border-radius:2px;cursor:pointer;background:#4490f7}.upload_wrap #lottie_json{position:absolute;width:500px;height:30px;top:0;left:0;opacity:0;height:100%;width:100%;cursor:pointer;z-index:100}.upload_wrap .upload{position:absolute;top:0;left:26px;height:100%;width:100%;cursor:pointer}.submit{display:grid;grid-template-columns:repeat(2,160px);grid-column-gap:20px;-webkit-justify-content:center;justify-content:center;margin-top:30px}.left_container{grid-template-columns:repeat(1,1fr);-webkit-align-content:start;align-content:start;justify-items:start}.displayChangeValues,.left_container{display:grid;-webkit-justify-content:space-between;justify-content:space-between}.displayChangeValues{width:390px;height:40px;border:1px solid rgba(0,0,155,.1);margin-top:30px;grid-template-columns:repeat(2,auto);-webkit-align-items:center;align-items:center;line-height:10px;padding-left:10px;padding-right:10px}.displayChangeValues p{font-size:14px;margin-top:13px;-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.displayChangeValues .back{width:40px;height:22px;background:#4490f7;border-radius:11px;position:relative}.displayChangeValues .radiu{width:18px;height:18px;border-radius:100%;background:#fff;position:absolute;left:2px;top:2px;box-shadow:0 2px 4px 0 rgba(0,35,11,.2)}.svgaInput{display:grid;grid-template-columns:280px 88px;width:390px;height:30px;margin-left:0;-webkit-justify-content:space-between;justify-content:space-between;margin-top:80px}.svgaContainer h1{display:block;font-size:80px;font-weight:700}.svgaContainer h2{display:block;font-size:25px;font-weight:400;margin-top:-46px;margin-bottom:36px;line-height:30px}.svga_title{text-align:left}.dropzone_container{width:200px;height:200px;text-align:center;line-height:150px}.dropzone_container span{display:block;font-size:60px;font-weight:130;margin-bottom:-260px}.dropzone_container input:focus{outline:none}.svgaPlayer .dropzone_container{width:750px;height:200px}.svgaPlayer .dropzone_container p{font-size:18px;line-height:200px;text-align:center;color:#c9c9c9}.changeColor{display:grid;grid-template-columns:repeat(5,auto);grid-column-gap:16px;-webkit-justify-content:start;justify-content:start;margin-left:10px}.changeColor div{width:20px;height:20px;border:1px solid rgba(0,0,155,.1);border-radius:20px;cursor:pointer;margin-top:20px}.svgConfig{display:grid;width:390px;grid-gap:16px;gap:16px;margin-top:30px;border:1px solid rgba(0,0,0,.1);padding:20px 10px}.svgConfig .fillMode{width:490px;display:grid;grid-template-columns:repeat(2,auto);-webkit-justify-content:start;justify-content:start;grid-gap:20px;gap:20px}.svgConfig .fillMode>span{line-height:30px;font-size:16px}.svgConfig .bgColor{display:grid;height:30px;grid-template-columns:84px 140px 122px}.svgConfig .bgColor .colorInput .colorPicker{width:60px}.svgConfig .bgColor .bgTitle,.svgConfig .loopCount>span{line-height:30px;font-size:16px}.svgConfig .loopCount{grid-template-columns:84px 90px}.svgConfig .downloadSvg,.svgConfig .loopCount{display:grid;-webkit-justify-content:start;justify-content:start;height:30px}.svgConfig .downloadSvg{grid-template-columns:repeat(2,100px);grid-gap:20px}