main .video-button{max-width:346px;width:100%;height:56px;display:flex;justify-content:center;align-items:center;font-size:16px;font-weight:500;color:var(--color-white);background:linear-gradient(102.67deg,#5CFFF5 2.47%,#685BFF 39.92%,#B124F3 90.82%);border-radius:12px;transition:all .2s linear;margin:0 auto;cursor:pointer}main .video-button:hover{opacity:.8}main .top-banner{background:linear-gradient(180deg,#E8E7FF 6%,#F9EDFF 26.89%,var(--color-white) 100%);background-size:100% 1080px;background-repeat:no-repeat;background-repeat:no-repeat;color:var(--color-block-drak);padding:96px 0 140px;text-align:center}main .top-banner::before{content:none}.top-banner .text{padding:0 14px}.top-banner h1{font-size:56px;line-height:1.2}.top-banner h1 span{-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;background-image:linear-gradient(105deg,#5CFFF5 6.9%,#685BFF 35.29%,#B124F3 69.41%)}.top-banner .desc{font-size:18px;margin:12px auto 80px;text-align:center;max-width:100%;font-weight:500}.image-to-video-wrapper{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}.image-to-video-wrapper .img-grid{max-width:540px;width:calc(50% - 97px);position:relative;display:flex;justify-content:space-between;margin-right:97px;gap:40px}.image-to-video-wrapper .img-grid .img-item{max-width:240px;width:50%}.image-to-video-wrapper .img-grid .img-item:nth-child(2){position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:300px;width:60%}.image-to-video-wrapper .img-grid img{width:100%;border-radius:20px}.image-to-video-wrapper .form-box{max-width:664px;width:50%;padding:28px;box-shadow:0 6px 20px 6px #302C5F0A;border-radius:24px;background:var(--color-white);position:relative}.image-to-video-wrapper .form-label{text-align:left;margin-bottom:16px}.image-to-video-wrapper .form-label span{color:#FF4F17}.image-to-video-wrapper .no-data{text-align:center;width:100%;font-size:18px;color:var(--color-red)}.image-to-video-wrapper .image-upload{margin-bottom:24px}.image-to-video-wrapper .upload-content{padding:12px}.image-to-video-wrapper .upload-box{border:2px dashed #D4D6DA;background:#F8F8F9;border-radius:12px;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;position:relative;min-height:200px;transition:all .2s}.image-to-video-wrapper .upload-box:not(.is-loading,.is-uploaded):hover{background:rgba(104,91,255,.05);border-color:var(--color-primary)}.image-to-video-wrapper .upload-text{font-size:14px;margin:8px auto 4px}.image-to-video-wrapper .upload-tips{font-size:12px;color:rgba(42,48,72,.6);max-width:460px;margin:0 auto}.image-to-video-wrapper .file-upload{opacity:0;height:100%;width:100%;cursor:pointer;position:absolute;top:0;left:0}.image-to-video-wrapper .img-box{width:100%;display:none;height:200px}.image-to-video-wrapper .img-operate{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);border-radius:12px;display:flex;justify-content:center;align-items:center;gap:12px;color:var(--color-white);opacity:0;transition:opacity .2s}.image-to-video-wrapper .img-operate span{position:relative;z-index:1;transition:opacity .2s}.image-to-video-wrapper .img-operate span:hover{opacity:.8}.image-to-video-wrapper .upload-img{width:100%;height:100%;-o-object-fit:contain;object-fit:contain}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.image-to-video-wrapper .loading-box{animation:spin 1s linear infinite;color:var(--color-primary);display:none}.image-to-video-wrapper .upload-box.is-loading .file-upload{pointer-events:none}.image-to-video-wrapper .upload-box.is-loading .loading-box,.image-to-video-wrapper .upload-box.is-uploaded .img-box{display:block}.image-to-video-wrapper .upload-box.is-loading .upload-content,.image-to-video-wrapper .upload-box.is-loading .img-box,.image-to-video-wrapper .upload-box.is-uploaded .upload-content{display:none}.image-to-video-wrapper .upload-box.is-uploaded:hover .img-operate{opacity:1}.image-to-video-wrapper .image-list{display:flex;gap:20px}.image-to-video-wrapper .image-list li{max-width:150px;width:30%;transition:all .2s;cursor:pointer}.image-to-video-wrapper .image-list li:hover{opacity:.8}.image-to-video-wrapper .image-list li img{border-radius:12px}.image-to-video-wrapper .dropdown-box{position:absolute;top:26px;right:32px;font-size:14px}.image-to-video-wrapper .dropdown-text{display:flex;align-items:center;transition:all .2s;cursor:pointer;border-radius:18px;border:1px solid #D4D6DA;gap:4px;padding:4px 12px;font-size:12px}.image-to-video-wrapper .dropdown-logo{width:18px}.image-to-video-wrapper .dropdown-desc{font-size:14px}.image-to-video-wrapper .dropdown-box.active .dropdown-text{background:#D4D6DA}.image-to-video-wrapper .dropdown-box .dropdown-icon{min-width:12px;transition:all .2s}.image-to-video-wrapper .dropdown-box.active .dropdown-icon{transform:rotate(180deg);color:var(--color-primary)}.image-to-video-wrapper .dropdown-list{position:absolute;top:120%;left:0;min-width:146px;border-radius:8px;box-shadow:0 4px 8.4px 2px #00000026;background:var(--color-white-lighter);padding:4px;pointer-events:none;z-index:2;opacity:0;transition:all .3s;max-height:400px}.image-to-video-wrapper .dropdown-box.active .dropdown-list{opacity:1;pointer-events:all}.image-to-video-wrapper .dropdown-list li{padding:5px 8px;transition:all .3s;display:flex;align-items:center;border-radius:6px;height:32px;cursor:pointer;white-space:nowrap;font-size:14px}.image-to-video-wrapper .dropdown-list li .model-name{font-size:14px}.image-to-video-wrapper .dropdown-list li:hover{background:#ECEAFF}.image-to-video-wrapper .dropdown-list li.active{color:var(--color-primary)}.image-to-video-wrapper .dropdown-list li img{width:18px;margin-right:8px}.image-to-video-wrapper .video-box{width:100%;margin-top:100px;position:relative}.image-to-video-wrapper .video-box.to-left::before,.image-to-video-wrapper .video-box.to-right::after{content:'';position:absolute;top:0;left:-1px;width:10%;max-width:100px;height:100%;background:linear-gradient(90deg,#FFFFFF 0%,rgba(255,255,255,0) 100%);z-index:1}.image-to-video-wrapper .video-box.to-right::after{left:unset;right:-1px;background:linear-gradient(270deg,#FFFFFF 0%,rgba(255,255,255,0) 100%)}.image-to-video-wrapper .arrow-btn{position:absolute;top:50%;transform:translateY(-50%);right:-4px;width:40px;height:40px;background-color:rgb(250 250 250 / 95%);border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;filter:drop-shadow(0 2px 4px rgba(0,0,0,.1));border:2px solid rgba(237,237,237,1);z-index:2;padding-left:2px}.image-to-video-wrapper .arrow-btn:hover{background-color:var(--color-white)}.image-to-video-wrapper .arrow-btn.is-left{right:unset;left:-4px;transform:scaleX(-1) translateY(-50%)}.image-to-video-wrapper .video-box.to-left .arrow-btn.is-left,.image-to-video-wrapper .video-box.to-right .arrow-btn.is-right{display:flex}.image-to-video-wrapper .video-content{display:flex;gap:4px;padding:2px 0}.image-to-video-wrapper .video-item{flex-shrink:0;max-width:220px;width:20%;position:relative;cursor:pointer;border-radius:16px;border:2px solid transparent;overflow:hidden;padding:2px}.image-to-video-wrapper .video-item.active{border-color:var(--color-primary)}.image-to-video-wrapper .video-item video{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:16px}.image-to-video-wrapper .video-info{position:absolute;bottom:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:12px 10px;width:100%;font-size:14px;color:var(--color-white);gap:24px;pointer-events:none;text-align:left;transition:opacity .2s}.image-to-video-wrapper .video-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.image-to-video-wrapper .hot-num{display:flex;align-items:center}.image-to-video-wrapper .hot-num img{margin:-3px 3px 0 0}.image-to-video-wrapper .bottom-btn{position:absolute;bottom:0;left:0;z-index:2;display:flex;justify-content:center;align-items:center;padding:12px 10px;width:100%;display:none}.image-to-video-wrapper .video-btn{display:flex;justify-content:center;align-items:center;gap:4px;padding:6px 8px;width:100%;height:40px;font-size:16px;color:var(--color-white);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:rgba(235,236,238,.2);border-radius:8px;transition:all .2s linear}.image-to-video-wrapper .video-btn:hover{background:rgba(235,236,238,.4)}.image-to-video-wrapper .video-btn svg{min-width:20px}.image-to-video-wrapper .video-item:hover .video-info{opacity:0}.image-to-video-wrapper .video-item:hover .bottom-btn{display:flex}.image-to-video-wrapper .video-create{margin-top:60px;width:100%}.image-to-video-wrapper .create-btn{margin-bottom:16px}@media(max-width:1100px){.image-to-video-wrapper .img-grid{width:calc(50% - 48px);margin-right:48px}.image-to-video-wrapper .video-box{margin-top:60px}.image-to-video-wrapper .video-item{width:160px}.image-to-video-wrapper .video-btn{font-size:14px}.image-to-video-wrapper .video-btn svg{min-width:18px;width:18px;height:18px}}@media(max-width:992px){main .top-banner{padding:60px 0}.top-banner h1{font-size:28px}.top-banner .desc{font-size:14px;margin:12px auto 24px}.image-to-video-wrapper .img-grid{width:100%;margin:30px 0 48px;max-width:400px}.image-to-video-wrapper .img-grid .img-item{max-width:180px}.image-to-video-wrapper .img-grid .img-item:nth-child(2){max-width:220px}.image-to-video-wrapper .img-grid img{border-radius:16px}.image-to-video-wrapper .form-box{width:100%}.image-to-video-wrapper .form-box{padding:16px}.image-to-video-wrapper .dropdown-box{top:16px;right:16px}.image-to-video-wrapper .form-box{max-width:580px}.image-to-video-wrapper .form-label{margin-bottom:14px;font-size:14px}.image-to-video-wrapper .image-upload .form-label{padding-right:134px}.image-to-video-wrapper .no-data{font-size:16px}.image-to-video-wrapper .image-upload{margin-bottom:20px}.image-to-video-wrapper .img-operate{background:none;opacity:1;width:70px;height:34px;left:unset;right:0;color:var(--color-block-drak)}.image-to-video-wrapper .image-list{gap:8px}.image-to-video-wrapper .image-list li{max-width:102px}.image-to-video-wrapper .image-list li img{border-radius:8px}.image-to-video-wrapper .video-box{margin-top:24px}.image-to-video-wrapper .video-create{margin-top:24px}.image-to-video-wrapper .video-item:hover .bottom-btn,.image-to-video-wrapper .bottom-btn{display:none}.image-to-video-wrapper .video-content{gap:2px}.image-to-video-wrapper .img-operate span{background:#fff;border-radius:4px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;box-shadow:rgba(0,0,0,.1) 0 2px 4px}.image-to-video-wrapper .img-operate span svg{width:16px;height:16px}.image-to-video-wrapper .img-operate .delete-btn svg{width:14px;height:14px}.image-to-video-wrapper .dropdown-text{padding:4px 8px}.image-to-video-wrapper .dropdown-desc{font-size:12px}.image-to-video-wrapper .dropdown-logo{width:16px}.image-to-video-wrapper .dropdown-list li img{width:16px;margin-right:4px}}@media(max-width:576px){.image-to-video-wrapper .img-grid .img-item{max-width:154px}.image-to-video-wrapper .img-grid .img-item:nth-child(2){max-width:192px}.image-to-video-wrapper .dropdown-list{left:unset;right:0;transform:none}}