@charset "UTF-8";main{display:flex;justify-content:space-between;position:relative}main color-select{position:absolute;left:240px;bottom:110px}main .main-left{width:290px;height:100vh;overflow-y:auto;background:#121212 0% 0% no-repeat padding-box}main .main-left::-webkit-scrollbar-track{background-color:#121212}main .main-left::-webkit-scrollbar-thumb{border-radius:8px;background-color:#4e4e4e!important}main .main-left::-webkit-scrollbar-thumb:hover{background:#6E6D6D!important}main .main-left .main-btn{padding:15px;border-bottom:1px solid #656565}main .main-left .main-btn #backHome{width:100%;height:44px;border:1px solid #656565;border-radius:4px;display:flex;justify-content:center;align-items:center;font: 500 15px/20px Roboto;color:#b1b1b1;background:#121212 0% 0% no-repeat padding-box;cursor:pointer;transition:.2s}main .main-left .main-btn #backHome:before{font-size:18px;content:"";color:#b1b1b1;margin-inline-end:11px}main .main-left .main-btn #backHome:hover{background:#595667 0% 0% no-repeat padding-box;color:#fff}main .main-left .main-btn #backHome:hover:before{color:#fff}main .main-left .main-btn #upload{width:100%;height:46px;border-radius:4px;border:none;display:flex;justify-content:center;align-items:center;font: 500 15px/20px Roboto;color:#f5f5f5;background:#6D4DFF 0% 0% no-repeat padding-box;cursor:pointer;transition:.2s;margin-top:10px}main .main-left .main-btn #upload:before{content:"";color:#f5f5f5;font-size:18px;margin-inline-end:11px}main .main-left .main-btn #upload:hover{background:#8864FF 0% 0% no-repeat padding-box}main .main-left .handle-area{padding:15px}main .main-left .handle-area .crop-area{padding-bottom:15px;border-bottom:1px solid #656565;margin-bottom:15px}main .main-left .handle-area .crop-area .title{font: 14px/19px Roboto;color:#b2b2b2;margin-bottom:6px}main .main-left .handle-area .crop-area .crop-area-btns{display:flex;flex-wrap:wrap}main .main-left .handle-area .crop-area .crop-area-btns .crop-item,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color{width:50%;font-size:0;text-align:center;margin-bottom:5px;cursor:pointer}main .main-left .handle-area .crop-area .crop-area-btns .crop-item p,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn p,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color p{font: 13px/18px Roboto;color:#c6c6c6}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container{width:60px;height:60px;margin:0 auto;display:flex;align-items:center;justify-content:center}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.cropFree:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.cropFree:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.cropFree:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.crop1_1:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.crop1_1:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.crop1_1:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.crop16_9:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.crop16_9:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.crop16_9:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.crop9_16:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.crop9_16:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.crop9_16:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.crop3_2:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.crop3_2:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.crop3_2:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.crop2_3:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.crop2_3:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.crop2_3:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.crop4_3:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.crop4_3:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.crop4_3:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.crop3_4:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.crop3_4:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.crop3_4:before{content:"";color:#c6c6c6;font-size:51px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.rotateHor:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.rotateHor:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.rotateHor:before{content:"";color:#c6c6c6;font-size:28px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.rotateVer:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.rotateVer:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.rotateVer:before{content:"";color:#c6c6c6;font-size:28px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.rotate-90:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.rotate-90:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.rotate-90:before{content:"";color:#c6c6c6;font-size:28px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.rotate90:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.rotate90:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.rotate90:before{content:"";color:#c6c6c6;font-size:28px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.rotateFree:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.rotateFree:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.rotateFree:before{content:"";color:#c6c6c6;font-size:28px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item .img-container.draw:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn .img-container.draw:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color .img-container.draw:before{content:"";color:#c6c6c6;font-size:28px}main .main-left .handle-area .crop-area .crop-area-btns .crop-item:hover p,main .main-left .handle-area .crop-area .crop-area-btns .crop-item.active p,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn:hover p,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn.active p,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color:hover p,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color.active p{color:#ac9aff}main .main-left .handle-area .crop-area .crop-area-btns .crop-item:hover .img-container:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item.active .img-container:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn:hover .img-container:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-btn.active .img-container:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color:hover .img-container:before,main .main-left .handle-area .crop-area .crop-area-btns .crop-item-color.active .img-container:before{color:#ac9aff}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn{display:flex;justify-content:center;align-items:center;position:relative}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-select{width:24px;height:24px;background:#FF0000;border:2px solid rgba(255,255,255,.462745098);opacity:1;border-radius:14px}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-select:hover{border:2px solid #AC9AFF}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list{display:none;position:absolute;padding:18px 15px 14px;background:#332F2F 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #00000029;border:1px solid #464646;bottom:60px;right:35px;border-radius:8px}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list:after{content:"";position:absolute;bottom:-20px;left:50%;transform:translate(-50%);border-width:10px;border-style:solid;border-color:#332F2F transparent transparent transparent}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list .color-list-item{width:24px;height:24px;opacity:1;border-radius:24px;margin-bottom:15px;border:2px solid transparent}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list .color-list-item:hover,main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list .color-list-item.active{border:2px solid #AC9AFF}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list .color-list-item.last-item:hover,main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list .color-list-item.last-item.active{border:2px solid #AC9AFF}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list .more-color{padding-top:12px;border-top:1px solid #919191;width:24px;height:24px;background:url(/image/svg/icon_more.svg) no-repeat bottom center;background-size:24px 24px}main .main-left .handle-area .crop-area .crop-area-btns #colorBtn .color-list .more-color:hover{background-image:url(/image/svg/icon_more_hover.svg)}main .main-right{flex-grow:1;background:#F0F0F0 0% 0% no-repeat padding-box}main .main-right .main-right-banner-wapper{height:64px;background:#FCFCFC 0% 0% no-repeat padding-box}main .main-right .main-right-banner{padding:0 80px 0 15px;height:64px;background:#FCFCFC 0% 0% no-repeat padding-box;display:flex;justify-content:space-between;align-items:center;position:relative}main .main-right .main-right-banner .banner-logo{display:flex;align-items:center}main .main-right .main-right-banner .banner-logo p{font: 500 20px/26px Roboto;color:#1e1e2e;margin-inline-start:8px}main .main-right .main-right-banner .banner-logo .save-status{display:flex;align-items:center;margin-inline-start:21px}main .main-right .main-right-banner .banner-logo .save-status>span{display:inline-block;width:31px;height:22px;margin-inline-end:7px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzAuNzM0IiBoZWlnaHQ9IjIxLjYxIiB2aWV3Qm94PSIwIDAgMzAuNzM0IDIxLjYxIj4KICA8ZGVmcz4KICAgIDxjbGlwUGF0aCBpZD0iY2xpcC1wYXRoIj4KICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZV8zMTY0MiIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgMzE2NDIiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTAuMTQgMC4xMSkiIGZpbGw9IiM2ZDRkZmYiLz4KICAgIDwvY2xpcFBhdGg+CiAgPC9kZWZzPgogIDxnIGlkPSJpY29uX0Nsb3VkX2Rpc2tfc2F2ZWQiIGRhdGEtbmFtZT0iaWNvbl9DbG91ZCBkaXNrX3NhdmVkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTUxOC44NDUgLTIwLjUpIj4KICAgIDxwYXRoIGlkPSJTdWJ0cmFjdGlvbl8yIiBkYXRhLW5hbWU9IlN1YnRyYWN0aW9uIDIiIGQ9Ik0tMjA3NS4wNjEtMjE2MS40MjZhOC4xMTMsOC4xMTMsMCwwLDAtNy45Ny05LjU3NCw4LjEsOC4xLDAsMCwwLTYuOTUsMy45MzQsNi4zMjEsNi4zMjEsMCwwLDAtNS42MjkuNzc5LDYuMjUyLDYuMjUyLDAsMCwwLTIuNzI4LDQuOTIzLDYuMzEzLDYuMzEzLDAsMCwwLTMuNjYyLDUuNjcxLDYuMzU5LDYuMzU5LDAsMCwwLC4xMjEsMS4yMzQsNi4zMTUsNi4zMTUsMCwwLDAsNi4xODIsNS4wNjloMTguMDY4YTYuMzQsNi4zNCwwLDAsMCw2LjM2My02LjNBNi4zLDYuMywwLDAsMC0yMDc1LjA2MS0yMTYxLjQyNlptLTIuNTY4LDEwLjIzNUgtMjA5NS43YTQuNTA1LDQuNTA1LDAsMCwxLTQuNS00LjUsNC41MzEsNC41MzEsMCwwLDEsMy4wNjgtNC4yMjNsLjYzOS0uMjI3LS4wNDEtLjY3N2E0LjQ3Miw0LjQ3MiwwLDAsMSwxLjk0NC0zLjk4NSw0LjY1Myw0LjY1MywwLDAsMSw0LjY1NS0uMzE1bC44MTEuMzY4LjM3Ny0uODA3YTYuMzMsNi4zMywwLDAsMSw1LjcxNS0zLjY0MSw2LjMxLDYuMzEsMCwwLDEsNi4zLDYuMyw3Ljc3Myw3Ljc3MywwLDAsMS0uNDU3LDIuNDc1LDcuNTg4LDcuNTg4LDAsMCwwLDEuMDA2LjQ5LDQuNTI0LDQuNTI0LDAsMCwxLDMuMTEyLDQuMjM4QTQuNTM4LDQuNTM4LDAsMCwxLTIwNzcuNjI5LTIxNTEuMTkxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzYyMC44NDUgMjE5MS41KSIgZmlsbD0iIzZkNGRmZiIvPgogICAgPGcgaWQ9Imljb25fYXBwbHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE1MjUuMTQgMjMuODkpIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoKSI+CiAgICAgIDxwYXRoIGlkPSLlr7nli75fMTNfIiBkYXRhLW5hbWU9IuWvueWLviAoMTMpIiBkPSJNMTQuMDIsNS4yNWEuODE3LjgxNywwLDAsMSwxLjI2LDEuMDM5bC0uMDM3LjA0NS03LjUzMSw4LjVhLjgxNy44MTcsMCwwLDEtMS4xNDkuMDc0bC0uMDQyLS4wNEwyLjI4NiwxMC42QS44MTcuODE3LDAsMCwxLDMuNCw5LjQxMWwuMDQyLjA0TDcuMDY3LDEzLjFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjI0NSAtMC45MzEpIiBmaWxsPSIjNmQ0ZGZmIiBzdHJva2U9IiM2ZDRkZmUiIHN0cm9rZS13aWR0aD0iMC40Ii8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K) no-repeat;background-size:cover}main .main-right .main-right-banner .banner-logo .save-status>p{font: 14px/19px Roboto;color:#6d4dff}main .main-right .main-right-banner .banner-logo .save-status>p span{font:inherit}main .main-right .main-right-banner .banner-logo .save-status.saving>span{background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMC43MzQiIGhlaWdodD0iMjEuNjEiIHZpZXdCb3g9IjAgMCAzMC43MzQgMjEuNjEiPgogIDxwYXRoIGlkPSJpY29uX0Nsb3VkX2Rpc2tfc2F2aW5nX2JnIiBkYXRhLW5hbWU9Imljb25fQ2xvdWQgZGlza19zYXZpbmdfYmciIGQ9Ik0tMjA3NS4wNjEtMjE2MS40MjZhOC4xMTMsOC4xMTMsMCwwLDAtNy45Ny05LjU3NCw4LjEsOC4xLDAsMCwwLTYuOTUsMy45MzQsNi4zMjEsNi4zMjEsMCwwLDAtNS42MjkuNzc5LDYuMjUyLDYuMjUyLDAsMCwwLTIuNzI4LDQuOTIzLDYuMzEzLDYuMzEzLDAsMCwwLTMuNjYyLDUuNjcxLDYuMzU5LDYuMzU5LDAsMCwwLC4xMjEsMS4yMzQsNi4zMTUsNi4zMTUsMCwwLDAsNi4xODIsNS4wNjloMTguMDY4YTYuMzQsNi4zNCwwLDAsMCw2LjM2My02LjNBNi4zLDYuMywwLDAsMC0yMDc1LjA2MS0yMTYxLjQyNlptLTIuNTY4LDEwLjIzNUgtMjA5NS43YTQuNTA1LDQuNTA1LDAsMCwxLTQuNS00LjUsNC41MzEsNC41MzEsMCwwLDEsMy4wNjgtNC4yMjNsLjYzOS0uMjI3LS4wNDEtLjY3N2E0LjQ3Miw0LjQ3MiwwLDAsMSwxLjk0NC0zLjk4NSw0LjY1Myw0LjY1MywwLDAsMSw0LjY1NS0uMzE1bC44MTEuMzY4LjM3Ny0uODA3YTYuMzMsNi4zMywwLDAsMSw1LjcxNS0zLjY0MSw2LjMxLDYuMzEsMCwwLDEsNi4zLDYuMyw3Ljc3Myw3Ljc3MywwLDAsMS0uNDU3LDIuNDc1LDcuNTg4LDcuNTg4LDAsMCwwLDEuMDA2LjQ5LDQuNTI0LDQuNTI0LDAsMCwxLDMuMTEyLDQuMjM4QTQuNTM4LDQuNTM4LDAsMCwxLTIwNzcuNjI5LTIxNTEuMTkxWiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjEwMiAyMTcxKSIgZmlsbD0iIzZkNGRmZiIgb3BhY2l0eT0iMC40MTUiLz4KPC9zdmc+Cg==) no-repeat;background-size:cover;display:flex;align-items:center;justify-content:center}main .main-right .main-right-banner .banner-logo .save-status.saving>span>span{display:inline-block;width:14px;height:14px;margin-top:3px;margin-inline-start:3px;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCI+CiAgPGRlZnM+CiAgICA8Y2xpcFBhdGggaWQ9ImNsaXAtcGF0aCI+CiAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGVfMzEyNTYiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDMxMjU2IiB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMSAxMTAuODkxKSIgZmlsbD0iIzZkNGRmZiIvPgogICAgPC9jbGlwUGF0aD4KICA8L2RlZnM+CiAgPGcgaWQ9Imljb25fQ2xvdWRfZGlza19zYXZpbmdfbG9hZGluZyIgZGF0YS1uYW1lPSJpY29uX0Nsb3VkIGRpc2tfc2F2aW5nX2xvYWRpbmciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzEgLTExMC44OTEpIiBjbGlwLXBhdGg9InVybCgjY2xpcC1wYXRoKSI+CiAgICA8cGF0aCBpZD0iaWNsb2FkaW5nIiBkPSJNMS44MzMsNy41OWE1Ljc1Niw1Ljc1NiwwLDAsMSwxMS41MTIsMCwuOTU5Ljk1OSwwLDAsMS0xLjkxOSwwQTMuODM3LDMuODM3LDAsMSwwLDcuNTksMTEuNDI3YS45NTkuOTU5LDAsMCwxLDAsMS45MTlBNS43NzMsNS43NzMsMCwwLDEsMS44MzMsNy41OVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDIzMC4zNTEgMTEwLjM2KSIgZmlsbD0iIzZkNGRmZiIvPgogIDwvZz4KPC9zdmc+Cg==) no-repeat;background-size:cover;animation:rotate 1s linear infinite}main .main-right .banner-handle{display:flex}main .main-right .banner-handle .banner-handle-item{font: 15px/20px Roboto;color:#1e1e2e;display:flex;align-items:center;margin:0 18px;cursor:pointer;border:none;background:none}main .main-right .banner-handle .banner-handle-item.disabled{opacity:.6;cursor:no-drop}main .main-right .banner-handle .banner-handle-item#restore:before{content:"";color:#1e1e2e;font-size:24px;margin-inline-end:5px}main .main-right .banner-handle .banner-handle-item#undo:before{content:"";color:#1e1e2e;font-size:24px;margin-inline-end:5px}main .main-right .banner-handle .banner-handle-item#redo:before{content:"";color:#1e1e2e;font-size:24px;margin-inline-end:5px}main .main-right .banner-handle .banner-handle-item:hover{color:#5f56fb}main .main-right .banner-handle .banner-handle-item:hover#restore:before{color:#6d4dff}main .main-right .banner-handle .banner-handle-item:hover#undo:before{color:#6d4dff}main .main-right .banner-handle .banner-handle-item:hover#redo:before{color:#6d4dff}main .main-right .banner-handle .banner-handle-item:hover.disabled{color:#1e1e2e}main .main-right .banner-handle .banner-handle-item:hover.disabled#undo:before,main .main-right .banner-handle .banner-handle-item:hover.disabled#redo:before,main .main-right .banner-handle .banner-handle-item:hover.disabled#restore:before{color:#1e1e2e}main .main-right .banner-handle .handle-btn{display:flex;background:#E6E6E6 0% 0% no-repeat padding-box;border-radius:22.5px;align-items:center;justify-content:space-between;padding:5px}main .main-right .banner-handle .handle-btn button{width:88px;height:30px;display:flex;align-items:center;justify-content:center;font: 500 12px/16px Roboto;color:#1e1e2e;border:1px solid #E6E6E6;background:#FFFFFF 0% 0% no-repeat padding-box;border-radius:20px;cursor:pointer;transition:.2s}main .main-right .banner-handle .handle-btn button#cancel{margin-right:10px}main .main-right .banner-handle .handle-btn button#cancel:hover{background:#EFEBFD 0% 0% no-repeat padding-box;border:1px solid #C4B7FF}main .main-right .banner-handle .handle-btn button#apply{border:1px solid #B0A1FD;color:#6d4dff}main .main-right .banner-handle .handle-btn button#apply:hover{background:#E8E3FF 0% 0% no-repeat padding-box;border:1px solid #BAACFF}main .main-right .banner-dowmload button{display:flex;align-items:center;justify-content:center;border:none;width:180px;height:44px;background:#6D4DFF 0% 0% no-repeat padding-box;border-radius:4px;font: 500 17px/23px Roboto;color:#fff;cursor:pointer;transition:.2s}main .main-right .banner-dowmload button:hover{background:#8864FF 0% 0% no-repeat padding-box}main .main-right .banner-dowmload button:before{content:"";color:#1e1e2e;font-size:22px;color:#fff;margin-inline-end:5px}main .main-right .head_portrait{width:44px;height:44px;border-radius:22px;margin-inline-start:8px;position:absolute;right:25px}main .main-right .head_portrait>img{height:44px;width:44px;object-fit:cover;position:relative;z-index:1;box-shadow:#8c8c974d 0 0 0 1px;border-radius:50%;user-select:none}main .main-right .head_portrait .team-icon{z-index:1;width:18px;height:18px;position:absolute;bottom:-4px;inset-inline-start:32px;background:rgb(187,187,206);box-shadow:0 2px 4px #1e1e2e26;border:2px solid rgb(255,255,255);border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden}main .main-right .head_portrait .team-icon>img{width:100%;height:100%;object-fit:contain}main .main-right-content{display:flex;height:calc(100vh - 64px);position:relative}main .main-right-content #cropSize{position:absolute;z-index:999999;color:red}main .main-right-content .content-left{flex-grow:1;background:#F0F0F0 0% 0% no-repeat padding-box;display:flex;align-items:center;justify-content:center;position:relative}main .main-right-content .content-left #panl-canvas{display:none;position:absolute;right:12px;top:calc(50% - 130px);cursor:pointer}main .main-right-content .content-left .canvas-mask{position:absolute;height:30px;width:50px}main .main-right-content .content-left .top-mask{right:12px;top:calc(50% - 130px);background:linear-gradient(to bottom,rgb(240,240,240),rgba(240,240,240,0))}main .main-right-content .content-left .deep-mask{right:12px;top:calc(50% + 100px);background:linear-gradient(to top,rgb(240,240,240),rgba(240,240,240,0))}main .main-right-content .content-left .content-container{width:90%;height:90%;max-width:90%;max-height:90%;position:relative;display:flex;align-items:center;justify-content:center}main .main-right-content .content-left .upload-warp{width:100%;display:flex;justify-content:center;align-items:center}main .main-right-content .content-left .upload-box{width:637px;height:353px;transform:scale(1);background:#F7F7F7 0% 0% no-repeat padding-box;border:1px dashed #C3C3C3;border-radius:8px}main .main-right-content .content-left .no-img{text-align:center;margin-top:31px;font: 13px/18px Roboto;letter-spacing:0px;color:#1e1e2e}main .main-right-content .content-left .simple-images{margin-top:9px;width:685px;display:flex;justify-content:space-between}main .main-right-content .content-left .simple-images .item{width:160px;height:90px;border-radius:9px;background:#fff;overflow:hidden;border:2px solid #F0F0F0;transition:.2s;cursor:pointer}main .main-right-content .content-left .simple-images .item:hover{border:2px solid #000}main .main-right-content .content-left .upload-btn{text-align:center;padding-top:120px}main .main-right-content .content-left .upload-btn .title{font: 500 17px/23px Roboto;color:#1e1e2e;margin-bottom:6px}main .main-right-content .content-left .upload-btn .des{font: 15px/20px Roboto;color:#919191;margin-bottom:22px}main .main-right-content .content-left .upload-btn button{border:none;width:206px;height:44px;margin:0 auto;display:flex;align-items:center;justify-content:center;background:#6D4DFF 0% 0% no-repeat padding-box;border-radius:4px;font: 500 17px/23px Roboto;color:#fff;cursor:pointer;transition:.2s}main .main-right-content .content-left .upload-btn button:before{content:"";color:#f5f5f5;font-size:18px;margin-inline-end:11px}main .main-right-content .content-left .upload-btn button:hover{background:#8864FF 0% 0% no-repeat padding-box}main .main-right-content .content-left .module-cropper{width:100%;height:100%;position:absolute;top:0;left:0}main .main-right-content .content-left .module-cropper .cropper-center{display:none;width:97px;height:38px;background:rgba(0,0,0,.7058823529) 0% 0% no-repeat padding-box;box-shadow:0 3px 6px #00000029;border:1px solid #1F1F1F;border-radius:5px;font: 15px/20px Roboto;color:#fff;margin-inline-start:-20px;text-align:center;line-height:38px}main .main-right-content .content-left .module-cropper .cropper-center:after,main .main-right-content .content-left .module-cropper .cropper-center:before{display:none}main .main-right-content .content-left #cropperImg{max-width:100%;max-height:100%}main .main-right-content .content-left .module-cropper-content{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}main .main-right-content .content-left .module-cropper-bg{width:100%;height:100%;overflow:hidden;position:relative}main .main-right-content .content-left .cropper-view-box{outline-color:#fff;outline:2px solid #ffffff}main .main-right-content .content-left .cropper-img-box{position:relative;top:0;left:0;width:100%;height:100%}main .main-right-content .content-left .cropper-line{background-color:#fff!important}main .main-right-content .content-left .point-ne,main .main-right-content .content-left .point-nw,main .main-right-content .content-left .point-sw,main .main-right-content .content-left .point-se{width:22px;height:22px;background:url(../public/image/svg/icon_control_point.svg) no-repeat;background-size:cover;opacity:1;z-index:10000}main .main-right-content .content-left .point-nw{left:-11px;top:-11px}main .main-right-content .content-left .point-ne{right:-11px;top:-11px}main .main-right-content .content-left .point-sw{left:-11px;bottom:-11px}main .main-right-content .content-left .point-se{right:-11px;bottom:-11px}main .main-right-content .content-left .point-e{height:38px;width:16px;background:url(../public/image/svg/icon_control_point1.svg) no-repeat;background-size:cover;right:-8px;margin-top:-19px;opacity:1;z-index:10000}main .main-right-content .content-left .point-s{width:38px;height:14px;background:url(../public/image/svg/icon_control_point2.svg) no-repeat;background-size:cover;bottom:-7px;opacity:1;margin-left:-19px;z-index:10000}main .main-right-content .content-left .point-w{height:38px;width:16px;background:url(../public/image/svg/icon_control_point1.svg) no-repeat;background-size:cover;left:-8px;margin-top:-19px;opacity:1;z-index:10000}main .main-right-content .content-left .point-n{width:38px;height:14px;background:url(../public/image/svg/icon_control_point2.svg) no-repeat;background-size:cover;top:-7px;opacity:1;margin-left:-19px;z-index:10000}main .main-right-content .content-left .cropper-face{opacity:0}main .main-right-content .content-right{width:260px;padding:21px 5px 21px 21px;border:1px solid #F0F0F0;background:#FAFAFA 0% 0% no-repeat padding-box;box-sizing:border-box;position:relative}main .main-right-content .content-right>h4{font: 14px/19px Roboto;color:#818181}main .main-right-content .content-right>h4 em{font-style:normal;display:none}main .main-right-content .content-right .contentlist{height:calc(100vh - 125px);overflow:auto;margin-top:12px}main .main-right-content .content-right .contentlist.flexgrid{display:flex;align-items:center;justify-content:center}main .main-right-content .content-right .contentlist .no-result{display:none}main .main-right-content .content-right .contentlist .listtotal{padding:3px;overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column;gap:14px}main .page-home-top{position:sticky;top:0;padding-top:22px;padding-inline:24px;width:100%;background-color:#fff;z-index:9;border-start-start-radius:16px}main .page-home-top .page-home-top-h1{font: 600 20px/27px Noto Sans;letter-spacing:0px;color:#000}main .page-home-top .page-home-top-des{font: 14px/19px Noto Sans;letter-spacing:0px;color:#8c8c97;margin-top:2px}main .page-home-top .page-home-title{display:flex;justify-content:space-between;align-items:center}main .page-home-top .avatar-tab{display:flex;gap:24px;height:31px;margin-top:35px;margin-bottom:16px}main .page-home-top .avatar-tab .avatar-tab-item{font: 14px/19px Noto Sans;color:#1e1e2e;position:relative;cursor:pointer}main .page-home-top .avatar-tab .avatar-tab-item:after{content:"";width:0px;height:4px;background:#7258FE 0% 0% no-repeat padding-box;position:absolute;bottom:0;left:50%;transform:translate(-50%);transition:width .3s ease}main .page-home-top .avatar-tab .avatar-tab-item.active{color:#7258fe}main .page-home-top .avatar-tab .avatar-tab-item.active:after{width:100%}main .avatar-list{padding-inline:24px;display:none}main .avatar-list .list-items{display:grid;row-gap:20px;column-gap:24px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin-bottom:16px}main .avatar-list .list-items.allavatars{display:block}main .avatar-list .list-items .create-avatar,main .avatar-list .list-items .custom-avatar{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100%;height:160px;background:#F9F9FB 0% 0% no-repeat padding-box;border:1px solid rgba(86,74,254,.1019607843);border-radius:6px;cursor:pointer}main .avatar-list .list-items .create-avatar i,main .avatar-list .list-items .custom-avatar i{font-style:normal;width:42px;height:42px;display:flex;justify-content:center;align-items:center;transition:transform .3s}main .avatar-list .list-items .create-avatar i:before,main .avatar-list .list-items .custom-avatar i:before{content:"";font-family:icomoon;color:#8c8c97;font-size:42px}main .avatar-list .list-items .create-avatar .create-text,main .avatar-list .list-items .custom-avatar .create-text{font: 14px/19px Noto Sans;color:#8c8c97;transition:transform .3s}main .avatar-list .list-items .create-avatar:hover i,main .avatar-list .list-items .create-avatar:hover .create-text,main .avatar-list .list-items .custom-avatar:hover i,main .avatar-list .list-items .custom-avatar:hover .create-text{transform:translateY(-3px)}main .avatar-list .avatar-cate-title{font: 500 16px/22px Noto Sans;color:#1e1e2e;display:flex;align-items:center;margin-bottom:10px}main .avatar-list .avatar-cate-title p{margin-inline-start:8px}main .avatar-list .avatar-cate-title .fold-avatar{cursor:pointer;transition:transform .3s ease}main .avatar-list .avatar-cate-title .fold-avatar.fold{transform:rotate(-90deg);transition:transform .3s ease}main .avatar-list::-webkit-scrollbar{display:none}.global-loading{position:fixed;width:100%;height:100%;background:rgba(0,0,0,.65);z-index:9999999}.global-loading .global-loading-main{width:185px;height:131px;background:rgba(255,255,255,.78);border-radius:8px;text-align:center;padding-top:25px;position:absolute;top:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.global-loading .global-loading-main p{font: 14px/19px Roboto;color:#1e1e2e}.global-loading .global-loading-main:before{content:"";display:inline-block;width:50px;height:50px;background:url(../public/image/svg/large_loading.svg) no-repeat;background-size:cover;margin-bottom:10px;animation:rotate 3s linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}