*{margin:0;padding:0;box-sizing:border-box}a{color:#0870a0;text-decoration:none}a:visited{color:#0870a0}a:hover{color:#0870a0}a:active{color:#0870a0}.hide-include{display:none}body{width:100vw;height:auto;overflow-x:hidden}.headline{font-size:1.5rem;margin:12px 0}.subline{font-size:1rem;margin:8px 0}.divider{border-bottom:1px dashed #626462;margin:15px 0}.empty{position:relative;height:64px}.dl-btn{position:relative;display:flex;justify-content:center;justify-items:center;align-items:center;color:snow;letter-spacing:3px;width:240px;height:40px;border-radius:21px;background-color:#009df1;box-shadow:12px 12px 24px #ccc,-12px -12px 24px #f4f4f4;cursor:pointer;font-size:1rem}.dl-btn:hover{box-shadow:0 0 20px 10px rgba(179,217,255,.8)}.dl-btn span{font-size:.3rem;letter-spacing:0}.align-center{text-align:center}.layout-center{display:flex;justify-content:center;justify-items:center;align-items:center}.layout-flex{display:flex}.layout-row{flex-direction:row}.layout-col{flex-direction:column}.bottom-container{position:relative;padding:32px 0;background:#51515d;color:#fcfcfc}.bottom-container a,.bottom-container a:active,.bottom-container a:hover{color:#e0e0e0;text-decoration:none;font-size:1.2rem;padding-bottom:5px;border-bottom:1px dashed #b3bcb3}.bottom-container .bi-qr{position:relative;display:flex;flex-direction:row;justify-content:center}.bottom-container .bi-qr .qr-item{width:50%}.bottom-container .bi-qr .qr-item span{font-size:.8rem}.bottom-container .bi-qr .qr-item img{width:120px}.bottom-container .ap-contact-row{margin:20px 0;text-align:left}.bottom-container .ap-contact-row img{width:1.5rem;vertical-align:middle;margin-right:5px}.bottom-container .bottom-row{display:flex;flex-direction:row}.bottom-container .bottom-row .bottom-item{position:relative;width:20%;text-align:center}.bottom-container .bottom-row .bottom-item lable{display:block;font-weight:700;color:#fcfcfc;margin-bottom:15px}.bottom-container .bottom-row .bottom-item div{margin:10px 0;color:#e0e0e0}.bottom-container .bottom-row .bi-qr{width:30%}.bottom-container .bottom-row .bi-contact{width:30%}.bottom-container .bottom-row .bi-contact lable{text-align:left}.bottom-container .contact-row{display:none;position:red;padding:10px;flex-direction:row;justify-content:center}.bottom-container .contact-row .bottom-item-2{width:30%;text-align:center}.bottom-container .contact-row .bi-qr{width:70%}.bottom-container .contact-row .bi-qr .qr-item{text-align:center}.bottom-container .contact-row .bi-qr .qr-item img{width:65%}.bottom-container .contact-row .bi-qr .qr-item span{font-size:.5rem}.bottom-container .bottom-copyrigth{color:#e0e0e0;margin-top:16px}.bottom-container .bottom-copyrigth div{margin-top:8px}.bottom-container .bottom-copyrigth div a,.bottom-container .bottom-copyrigth div a:active,.bottom-container .bottom-copyrigth div a:hover{font-size:.8rem}.mini-header{position:relative;background:#77d3fe;padding-left:32px;height:100px;display:flex;align-items:center;flex-direction:row}.mini-header .logo{position:relative;width:64px;height:64px;border-radius:12px;background:linear-gradient(145deg,#6fa6dc 0,#0dabf4 30%,#8bdaff 100%);box-shadow:5px 5px 10px #50baec,-5px -5px 10px #079ee2;cursor:pointer}.mini-header .logo img{border-radius:150px;border:4px solid #fff;width:70%;height:70%;opacity:.8}.mini-header .logo-text{color:#fff;margin-left:16px;font-size:1.5rem;cursor:pointer}.mini-header .client-menu{position:absolute;color:#fff;font-size:1.2rem;right:45px;cursor:pointer}@media screen and (max-width:768px){.bottom-container{font-size:.8rem!important}.bottom-container a,.bottom-container a:active,.bottom-container a:hover{font-size:.8rem!important}.bottom-container .bottom-row .bi-qr,.bottom-container .bottom-row .bottom-item-2{display:none}.bottom-container .bottom-row .bottom-item-1{width:30%!important}.bottom-container .bottom-row .bi-contact{width:70%!important}.contact-row{display:flex!important}.contact-row .bottom-item-3{position:relative;text-align:center}.contact-row .bottom-item-3 lable{display:block;font-weight:700;color:#fcfcfc;margin-bottom:15px}.contact-row .bottom-item-3 div{margin:5px 0;color:#e0e0e0}}.main-container{background-color:#f9f9f9;color:#333;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding-top:50px}h1{font-size:2rem;color:#4caf50;margin-bottom:20px}.container{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;max-width:1000px;margin:20px auto;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}.upload-section{margin-bottom:20px}input[type=file]{margin:20px 0;padding:10px;border:2px solid #4caf50;border-radius:5px;background-color:#fff;cursor:pointer}input[type=radio]{cursor:pointer}.button{background-color:#28a745;color:#fff;border:none;padding:10px 15px;border-radius:5px;cursor:pointer;font-size:16px}.button:hover{background-color:#218838}.result-section{margin-top:20px;padding:10px;border:1px solid #ccc;border-radius:5px;background-color:#e9ecef}#compression-options,#format-options,#preview-container,#result-container{display:block;margin:0 20px;text-align:center;flex:1}#compressed-preview,#original-preview{max-width:100%;max-height:200px;display:block;margin:auto;border:1px solid #ddd;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.1);margin-top:10px}label{display:block;margin:5px 0;font-size:1rem;cursor:pointer}button{padding:10px 20px;font-size:1rem;color:#fff;background-color:#4caf50;border:none;border-radius:5px;cursor:pointer;transition:background-color .3s ease}button:hover{background-color:#45a049}a{display:inline-block;margin-top:10px;color:#4caf50;text-decoration:none;font-size:1rem;transition:color .3s ease}.row{display:flex;justify-content:space-between;align-items:flex-start;width:100%;max-width:1200px;margin:20px auto}#options-container,#preview-container,#result-container{flex:1;margin:0 10px;text-align:center}#preview-container,#result-container{max-width:300px;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%}#options-container{max-width:400px;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}#compression-percentage{font-size:1.2rem;font-weight:700;color:#4caf50;margin-top:10px}#upload-container{display:flex;justify-content:center;align-items:center;margin:20px auto;max-width:400px;background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.1)}#image-upload{width:100%;max-width:100%;padding:10px;border:2px solid #4caf50;border-radius:5px;background-color:#fff;cursor:pointer;box-sizing:border-box}#compression-options,#corner-radius-options,#format-options{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:20px;padding:10px;border:1px solid #ddd;border-radius:5px;background-color:#fff;box-shadow:0 2px 5px rgba(0,0,0,.1)}#compression-options label,#corner-radius-options label,#format-options label{flex:1;text-align:center;margin:0 5px}.options-row{display:flex;justify-content:space-between;align-items:center;margin-top:10px;width:100%}.options-row label{flex:1;text-align:center;margin:0 5px}.modal{display:none;position:fixed;z-index:1000;left:0;top:0;width:100vw;height:100vh;background-color:rgba(0,0,0,.8);display:flex;justify-content:center;align-items:center;flex-direction:row}.modal-content{max-width:80%;max-height:80%;border:2px solid #fff;border-radius:5px;box-shadow:0 4px 10px rgba(0,0,0,.5);display:block;margin:auto}.close{position:absolute;top:20px;right:35px;color:#fff;font-size:40px;font-weight:700;cursor:pointer}.close:focus,.close:hover{color:#bbb;text-decoration:none;cursor:pointer}#compressed-preview-container img,#original-preview-container img{border:1px solid #ccc;border-radius:5px;padding:5px;margin:5px;background-color:#f9f9f9;box-shadow:0 2px 5px rgba(0,0,0,.1)}#original-preview-container{position:relative}.remove-button{position:absolute;top:0;right:-25px;color:#f44336;border:none;font-size:16px;font-weight:700;border-radius:50%;width:20px;height:20px;display:flex;justify-content:center;align-items:center;cursor:pointer;background-color:transparent}.remove-button:hover{color:#d32f2f;background-color:transparent!important}.image-info{text-align:center;font-size:.9rem;color:#555;margin-top:5px}.compression-percentage{color:#4caf50;font-weight:700;margin-top:2px;font-size:.9rem}