.web-page .content-wrapper .content{display:flex;justify-content:space-between;margin-top:calc(100vw * 20 / 1915)}.web-page .content-wrapper .content .choose-img-wrapper{text-align:center}.web-page .content-wrapper .content .choose-img-wrapper .choose-img-content{padding:calc(100vw * 32 / 1915);margin-bottom:calc(100vw * 30 / 1915)}.web-page .content-wrapper .content .card-hover{transition:all .3s ease}.web-page .content-wrapper .content .card-hover:hover{box-shadow:0 calc(100vw * 12 / 1915) calc(100vw * 28 / 1915) 0 #1f268733;transform:translateY(calc(-100vw * 5 / 1915))}.web-page .content-wrapper .content .glassmorphism{border-radius:calc(100vw * 16 / 1915);border:1px solid rgba(255,255,255,.3);box-shadow:0 calc(100vw * 8 / 1915) calc(100vw * 32 / 1915) 0 #1f268726;background:#ffffffb3;-webkit-backdrop-filter:blur(calc(100vw * 10 / 1915));backdrop-filter:blur(calc(100vw * 10 / 1915))}.web-page .content-wrapper .content .dropzone{border:calc(100vw * 2 / 1915) dashed #9ca3af;transition:all .3s ease;padding:calc(100vw * 48 / 1915);cursor:pointer;border-radius:calc(100vw * 12 / 1915)}.web-page .content-wrapper .content .dropzone div{display:flex;flex-direction:column;align-items:center;justify-content:center}.web-page .content-wrapper .content .dropzone div img{width:calc(100vw * 45 / 1915);margin-bottom:calc(100vw * 16 / 1915)}.web-page .content-wrapper .content .dropzone div h3{font-size:calc(100vw * 18 / 1915);margin-bottom:calc(100vw * 8 / 1915)}.web-page .content-wrapper .content .dropzone div .tips{color:#6b7280;font-size:calc(100vw * 16 / 1915);margin-bottom:calc(100vw * 16 / 1915)}.web-page .content-wrapper .content .dropzone div input{display:none}.web-page .content-wrapper .content .dropzone div button{transition-property:color,background-color,border-color,fill,stroke,-webkit-text-decoration-color;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,-webkit-text-decoration-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;color:#fff;padding:calc(100vw * 8 / 1915) calc(100vw * 24 / 1915);background:#6f43ff;border-radius:calc(100vw * 8 / 1915);cursor:pointer;border:none}.web-page .content-wrapper .content .dropzone div .img-format{margin-top:calc(100vw * 16 / 1915);color:#9ca3af;font-size:calc(100vw * 14 / 1915)}.web-page .content-wrapper .content .dropzone.active{border-color:#6f43ff;background-color:#4f46e50d}.web-page .content-wrapper .content .display-none{display:none}.web-page .content-wrapper .content .preview-section{padding:calc(100vw * 32 / 1915)}.web-page .content-wrapper .content .preview-section .title-wrapper{display:flex;align-items:center;margin-bottom:calc(100vw * 24 / 1915)}.web-page .content-wrapper .content .preview-section .title-wrapper img{width:calc(100vw * 24 / 1915);margin-right:calc(100vw * 12 / 1915)}.web-page .content-wrapper .content .preview-section .title-wrapper h2{font-size:calc(100vw * 18 / 1915)}.web-page .content-wrapper .content .preview-section .preview-content{display:flex;justify-content:space-between}.web-page .content-wrapper .content .preview-section .preview-content .img-view-wrapper{width:49%;box-shadow:0 calc(100vw*4/1915) calc(100vw*6/1915) calc(-100vw*1/1915) #0000001a,0 calc(100vw*2/1915) calc(100vw*4/1915) calc(-100vw*2/1915) #0000001a;border-radius:calc(100vw * 8 / 1915);display:flex;align-items:center;justify-content:center}.web-page .content-wrapper .content .preview-section .preview-content .img-view-wrapper img{max-width:100%;max-height:calc(100vw * 384 / 1915)}.web-page .content-wrapper .content .preview-section .preview-content .img-color-wrapper{width:48%}.web-page .content-wrapper .content .preview-section h3{text-align:left;font-size:calc(100vw * 17 / 1915);font-weight:400;font-family:HarmonyOS-Medium,Arial,Helvetica,sans-serif;margin-bottom:calc(100vw * 16 / 1915)}.web-page .content-wrapper .content .preview-section .colorPalette{display:flex;flex-wrap:wrap}.web-page .content-wrapper .content .preview-section .color-swatch{display:flex;align-items:center;flex-direction:column;justify-content:center;font-weight:700;font-size:calc(100vw * 14 / 1915);transition:transform .3s ease;width:calc(100vw * 174 / 1915);margin-right:calc(100vw * 16 / 1915);margin-bottom:calc(100vw * 16 / 1915)}.web-page .content-wrapper .content .preview-section .color-swatch:nth-child(3n){margin-right:0}.web-page .content-wrapper .content .preview-section .color-swatch:hover{transform:scale(1.05)}.web-page .content-wrapper .content .preview-section .color-swatch .color-background-wrapper{width:100%;margin-bottom:calc(100vw * 8 / 1915)}.web-page .content-wrapper .content .preview-section .color-swatch .color-background-wrapper .color-background{height:calc(100vw * 96 / 1915);width:100%;box-shadow:0 calc(100vw * 4 / 1915) calc(100vw * 6 / 1915) #0000001a;border-radius:calc(100vw * 8 / 1915)}.web-page .content-wrapper .content .preview-section .color-swatch .color-value-wrapper{display:flex;align-items:center;justify-content:space-between;width:100%}.web-page .content-wrapper .content .preview-section .color-swatch .color-value-wrapper span{font-size:calc(100vw * 14 / 1915);line-height:calc(100vw * 20 / 1915)}.web-page .content-wrapper .content .preview-section .color-swatch .color-value-wrapper button{font-size:calc(100vw * 12 / 1915);line-height:calc(100vw * 16 / 1915);padding:calc(100vw * 4 / 1915) calc(100vw * 8 / 1915);border-radius:calc(100vw * 4 / 1915);cursor:pointer;background:#f3f4f6;border:none}.web-page .content-wrapper .content .preview-section .color-swatch .color-value-wrapper button:hover{background:#e5e7eb}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.web-page .content-wrapper .content .preview-section .fade-in{animation:fadeIn .2s ease forwards}.web-page .content-wrapper .content .loading-section{padding:calc(100vw * 32 / 1915)}.web-page .content-wrapper .content .loading-section .loading-content{display:flex;flex-direction:column;align-items:center;justify-content:center}.web-page .content-wrapper .content .loading-section .loading-content .animate-spin{width:calc(100vw * 48 / 1915);height:calc(100vw * 48 / 1915);margin-bottom:calc(100vw * 16 / 1915);animation:spin 1s linear infinite;border-radius:50%;border-top-width:calc(100vw * 2 / 1915);border-bottom-width:calc(100vw * 2 / 1915);border-left-width:0;border-right-width:0;border-color:#6366f1;border-style:solid}@keyframes spin{to{transform:rotate(360deg)}}.web-page .content-wrapper .content .base-explain-wrapper{margin-top:calc(100vw * 40 / 1915);text-align:left}.web-page .content-wrapper .content .base-explain-wrapper .base-explain-content{margin-top:calc(100vw * 20 / 1915)}.web-page .content-wrapper .content .base-explain-wrapper .base-explain-content div{line-height:calc(100vw * 28 / 1915);margin-bottom:calc(100vw * 15 / 1915);font-size:calc(100vw * 15 / 1915)}.web-page .content-wrapper .content .base-explain-wrapper .base-explain-content div span{font-family:HarmonyOS-Bold,Arial,Helvetica,sans-serif;font-size:calc(100vw * 15 / 1915)}.web-page .content-wrapper .content .copied{background:#dcfce7!important}