.edit-container{height:calc(100vh - 153px);padding:32px 0;overflow:auto}.preview{position:-webkit-sticky;position:sticky;top:0;width:380px;max-height:720px;background:#fff;border-radius:16px}.preview .header{padding:16px 24px;box-shadow:0 3px 6px 1px rgba(0,0,0,.06)}.preview .header .switch-btn{border:1px solid #ddd;border-radius:8px;overflow:hidden;background:#fafafa;width:96px;height:40px}.preview .header .switch-btn div{width:50%;transition:all .5s}.preview .header .switch-btn div i{transition:all .5s;color:#ddd;font-size:20px}.preview .header .switch-btn div.active{background-color:var(--primary-color);border-radius:8px}.preview .header .switch-btn div.active i{color:#fff}.container.outbox{padding:17px 0}.container .upgradeBtn{background:#ff8b3e}.container .upgradeBtn:hover{background:#f8cb61!important}.container .arrow-bottom{display:inline-block;width:8px;height:8px;border-bottom:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg) translateY(-4px);margin:0 0 0 8px}footer{padding:20px 0;border-top:1px solid #ddd}.template-item{border:1px solid #ddd;border-radius:8px;padding:16px;height:234px;position:relative;cursor:pointer}.template-item.active{border-color:var(--primary-color)}.template-item .active-right{width:24px;height:24px;border-radius:50%;background-color:var(--primary-color);position:absolute;top:0;right:0;transform:translate3d(50%,-50%,0);color:#fff}.template-item .img-box{width:100%;height:168px;background-size:cover}.page-btn{width:32px;height:32px;border-radius:50%;background:#c1c1c1;color:#fff;cursor:pointer}.color-picker{border:1px solid #ddd;border-radius:4px;padding:12px 24px;cursor:pointer;transition:all .5s}.color-picker:hover{border-color:var(--primary-color)}.color-picker .color-out{background:#f2f2f2;border-radius:6px;padding:4px;width:40px;height:40px}.color-picker .color-out .color-inner{width:100%;height:100%;border-radius:4px}.background-out{position:relative;cursor:pointer;border-radius:8px;border:1px solid #ddd;padding:10px;height:100%}.background-out .active-right{width:24px;height:24px;border-radius:50%;background-color:var(--primary-color);position:absolute;top:0;right:0;transform:translate3d(50%,-50%,0);color:#fff}.background-out.active{border-color:var(--primary-color)}.background-out img{object-fit:cover;height:54px!important;width:100%}.upload-box .ant-upload,.upload-box .ant-upload-list-item-container{width:88px!important;height:88px!important}.social-item{padding:12px;border-radius:4px;border:1px solid #ddd;position:relative;cursor:pointer}.social-item.active{border:2px solid var(--primary-color)}.social-item .social-check{position:absolute;top:0;right:0;width:20px;height:20px;transform:translate3d(50%,-50%,0);border-radius:50%;background:var(--primary-color);color:#fff}.social-fill-item{padding:16px 24px;border-radius:4px}.social-fill-item .input-box input{max-width:336px;width:90%;margin-top:10px}.social-fill-item .action-list{font-size:20px}.social-fill-item .action-list span{cursor:pointer}.social-fill-item .line{height:24px;border-left:1px solid hsla(0,0%,87%,.867);margin:0 16px}.preview-base .phone-container-out{position:relative;border-radius:30px;width:264px;height:552px;overflow:hidden;background:url(/assets/h5/phone-container.png);padding:40px 6px 6px}.preview-base .phone-container-out .phone-container-in{height:100%;border-radius:0 0 34px 34px;overflow:hidden}.preview-base .phone-container-out .phone-container-in .iframe{width:100%;height:100%;border:none}.preview-base .phone-container-out .phone-container-in .iframe html{zoom:.7}.active-right{width:24px;height:24px;border-radius:50%;background-color:var(--primary-color);position:absolute;top:0;right:0;transform:translate3d(50%,-50%,0);color:#fff}@media screen and (max-width:768px){.template-item{padding:0;max-height:180px}.template-item .img-box{border-radius:8px 8px 0 0;height:75%}.color-picker{padding:8px}.color-picker .ml-20{margin-left:8px}.social-fill-list .social-fill-item{padding:12px}.social-item{padding:0}}.hidden,.mobbie_show{display:none}.visible{display:inline-block}@media screen and (max-width:576px){.contact_item .ml-24{margin-left:8px}.mobbie_show{display:inline-block}}.upload-item{position:relative;width:100px;height:100px;border-radius:4px;border:1px solid #ddd;padding:12px;cursor:pointer}.upload-item-close{position:absolute;top:-15px;right:-10px;font-size:24px;color:#999;cursor:pointer}.upmodel-container{max-width:536px;width:auto!important}.upmodel-container .upmodel-box{padding:16px 0}.upmodel-container .upgradeBtn{width:100%;background:#ff8b3e}.upmodel-container .upgradeBtn:hover{background:#f7a873!important}.mask{z-index:999;position:fixed;display:none;justify-content:center;align-items:center;left:0;top:0;height:100%;width:100%;background:rgba(0,0,0,.5);transition:all 1s;opacity:0}.mask.active{opacity:1}.upgrade-container{max-width:804px;width:80%;border-radius:8px;overflow:hidden}.upgrade-container .upgradeBtn{background:#ff8b3e}.upgrade-container .upgradeBtn:hover{background:#f8cb61!important}.upgrade-container .upgrade-left{padding:40px 32px}.upgrade-container .upgrade-right{position:relative}.upgrade-container .upgrade-right .del-btn{position:absolute;top:24px;right:24px;width:40px;height:40px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;font-size:20px;cursor:pointer}