/* 서브공통 */
/* @media(max-width:604px) {
.container{width:100%;}
} */
.div_box{padding:1rem;box-shadow: 0 0 1px rgba(0,0,0,0.01), 0 0px 1ch rgba(0,0,0,0.1); border-radius: 3px;}
.btn_submit {background-color: var(--pointcolor);color:#fff;padding:10px;font-size:1.2rem;border-radius: 5px;border-width: 0;box-shadow: 0 12px 22px rgba(0,0,0,0.30), 0 5px 3px rgba(0,0,0,0.22);display: block;width: 50%;margin: 2rem auto;}
.btn_submit:hover{background-color: rgba(20,135,188,0.8);}
.btn_submit:active{background-color: var(--pointcolor);box-shadow: 1px 2px 0 rgb(0,0,0,0.5);top:2px;}
.remove-btn {position: absolute;top: -10px; right: -10px;width: 24px;height: 24px;border-radius: 50%;margin:0;
background: #dc3545;color: white;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 14px;}
.remove-btn:hover{background: #e60c22;color: white;}
.remove-btn:active{box-shadow: 0 12px 22px rgba(0,0,0,0.30), 0 5px 3px rgba(0,0,0,0.22);top: -10px !important;}
.btn_option{display: block;border:1px solid #ececec;padding:10px;width:100%;border-radius: 5px;cursor: pointer;position: relative;display: inline-block;transition:all 0.1s ease-in-out 0.1s;}
.btn_option:hover,.btn_option:active{background: var(--pointcolor);color: white;transition:all 0.1s ease-in-out 0.1s;}
.btn_option.on{background: var(--pointcolor);color: white;}
.ranges{width:80%;margin:1rem;padding: .375rem 1rem .375rem 1rem;line-height: 1.5;font-weight: 400;border: 5px solid var(--backcolor);border-radius: 5px;}
.on{display:block !important;}
.btn_inactive{background-color: #f1f1f1;color:#1b1b1b;box-shadow: none;}
.btn_inactive:hover{background-color: #f1f1f1;color:#1b1b1b;box-shadow: none;}
.btn_inactive:active{background-color: #f1f1f1;color:#1b1b1b;box-shadow: none;}
.upload_form{display:flex;flex-direction: column;margin-bottom:20px;}
.upload_form label{margin-bottom:5px;}
.upload_form input[type=file]::file-selector-button {width: 100px;height: 30px;background: #fff;border: 1px solid rgb(77,77,77);border-radius: 10px;
  cursor: pointer;border: 1px solid #c1c1c1;}
.modal_bg {position: fixed;inset: 0;background: rgba(0, 0, 0, .4);width: 100%;height: 100%;z-index: 9998;display: none;}
.option-title{font-size:1.5rem;font-weight: 700;margin:1rem 0;}
#infor{border: 1px solid #dddddd;padding:20px;text-align: center;}
#resultImage {max-width: 100%;max-height: 400px;margin-bottom: 1rem;border-radius: 0.25rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);margin:auto;}
.colors {width: 100%;height: 50px;padding:10px !important;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;border: 1px solid #dddddd !important;border-radius: 10px !important;}
.colors::-webkit-color-swatch {border-radius: 30px;border: none;}
.result {text-align: center;margin-top: 1rem;display: none;}
input[type=number]{ width: 100%;border: 1px solid #dddddd !important;line-height: 1.45;letter-spacing: -0.04rem;border-radius: 8px;padding: 16px;margin-top: 12px;}
input[type=text]{ font-size:12px;width: 100%;border: 1px solid #dddddd !important;line-height: 1.45;letter-spacing: -0.04rem;border-radius: 8px;padding: 10px;margin-top: 12px;}
.under-line{border-bottom: 1px solid #f1f1f1;width:100%;margin-top:15px;}
.tool-border{border:1px solid #ececec;}
.hover-text {display: none;position: absolute;top: -35px;left: 0;background-color: rgb(245, 239, 236);font-weight:500;color: #3c3737;padding: 5px;}

/* 로그인 */
#login {position:relative;width:100%;height:100vh;}
#login .container{height:100%;}
#login .btn{width:100%;font-size:15px;padding:10px;border-width: 0 0 1px;padding:10px;border-width: 0;margin-bottom:10px;}
#login .btnWrap{margin-top:10px;display:flex;}
#login .btnWrap button, #login .btnWrap a{width:50%;}
#login .btn:focus {outline: 0.5px solid var(--pointcolor);border-color: rgba(255, 255, 255, 1);}
#login .btn_submit {background-color: var(--pointcolor);color:#fff;}
#login .btn_back{background-color: var(--dark-gray);color:#fff;}
#login .btn, .btn_back {box-shadow: 0 2px 2px rgba(0,0,0,0.25), 0 2px 2ch rgba(0,0,0,0.22); border-radius: 3px;}
#login .btn_submit:hover, .btn_back:hover {box-shadow: 0 3px 3px rgba(0,0,0,0.25), 0 3px 3px rgba(0,0,0,0.22);font-weight: 700;}
#login .tit{font-size: 45px;font-weight: 700;margin-bottom:50px;}
#login .errMas{font-size: 15px;font-weight: 600;}
#login .errMas{height:5%;}


/* main/sub Top */
.subTop{overflow: hidden;padding-top:6rem;background-color: #fff;}
.subTop:after {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgb(255, 255, 255); content: "";}
.subTop .contents {display:flex;flex-direction: column;justify-content: center;align-items: center;line-height:1.5;text-align: center;width: var(--toolWidth);margin:auto;}
.subTop .textTitle {z-index: 1;}
.subTop .textContent {z-index: 1;}
@media(max-width:604px) {
    .div_box{padding:2rem;}
    .subTop .contents {width: 90%;margin:auto;}    
}

/* tool */
/* drop zone */
.off {display: none !important;}
.dropzone{width: 100%;min-height: 200px;border: 2px dashed #e3e6ed;border-radius: 10px;display: flex;align-items: center;
    justify-content: center; flex-direction: column;cursor: pointer;transition: border-color 0.3s ease;height:200px !important;background-color: #f8f9fa;margin-bottom: 2rem;}
#drop-zone{position:relative;border:2px dashed #cbd5e1;border-radius:24px;padding:80px 20px;text-align:center;background:linear-gradient(180deg,#fafbff 0%, #f8faff 100%);  cursor:pointer;overflow:hidden;transition:all .25s ease;margin-bottom: 2rem;}
#drop-zone:hover{border-color:#4f46e5;background:#eef2ff;transform:translateY(-2px);box-shadow:0 15px 35px rgba(79,70,229,.08);}
#drop-zone.dragover{border-color:#4f46e5;background:#eef2ff;transform:scale(1.01);box-shadow:0 20px 40px rgba(79,70,229,.15);}
#drop-zone::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top right,rgba(79,70,229,.08),transparent 35%);pointer-events:none;}
#drop-zone i{font-size:72px;color:#4f46e5;margin-bottom:24px;display:block;}
#drop-zone h2{font-size:32px;font-weight:800;letter-spacing:-0.03em;color:#111827;margin-bottom:12px;}
#drop-zone p{font-size:16px;color:#6b7280;line-height:1.7;}
#drop-zone .sub-text{margin-top:14px;display:inline-flex; align-items:center;gap:8px;padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #e5e7eb;font-size:13px;color:#64748b;font-weight:600;}
#drop-zone .sub-text i{font-size:14px;margin:0;color:#10b981;}

/* MOBILE */

@media(max-width:768px){

    #drop-zone{padding:60px 20px;border-radius:20px;}
    #drop-zone i{font-size:56px;margin-bottom:20px;}
    #drop-zone h2{font-size:24px;}
    #drop-zone p{font-size:14px;}
}
.drop-zone-icon {font-size: 3rem;color: #6c757d;margin-bottom: 1rem;}
.drop-zone-text {font-size: 1.2rem;color: #6c757d; margin-bottom: 1rem;}    

.image-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 1rem;margin-bottom: 2rem;}
.image-item {position: relative;border: 1px solid #ddd;border-radius: 5px;padding: 0.5rem;background: white;}
.image-item img {width: 100%;height: 150px;object-fit: contain;margin-bottom: 0.5rem;}
.image-item .dimensions-info {font-size: 1.2rem;color: #6c757d;text-align: center;}
#dropZone{width:var(--toolWidth); margin: auto;padding:100px 0 0 0;}
.dropzone .dz-error-message{display:none !important;}
.dropzone .dz-preview .dz-progress {z-index: 1;}
.dropzone .dz-message .dz-button {width: 100%;box-shadow:none; margin: 0;}
@media(max-width:500px) {    
    /* .dropzone, .drop-zone {height: 100px !important;min-height: 100px;} */    
    .div_box {padding: .5rem; }
    .dropzone, .drop-zone{flex-direction: row; min-height: auto !important; height: auto !important;margin-bottom:0;padding:1rem;}
    .dropzone i, .drop-zone i{margin:0 1rem 0 0;font-size: 2rem;}
}
/* tools */
#tools .box { border-radius: 20px; aspect-ratio: 1 / 1; background: #fff;}
#tools .box p {width: 100%; padding: 1.5rem 3.5rem;}
#tools .box .icon {position: absolute;width:100%; text-align: center; margin: 1rem 0;color:rgba(var(--pointcolor-rgb), 0.7);bottom:1.5rem;}
#tools .box .material-symbols-outlined{font-size: 40px;color:rgba(var(--pointcolor-rgb), 0.7)}
#tools .box{cursor: pointer;box-shadow: 2px 2px 2px 2px rgb(0,0,0,0.05), 0 0 1px 0  rgba(0,0,0,0.1);}
#tools .box:hover{box-shadow: 3px 3px 3px 3px rgba(0,0,0,0.1), 0 0 0 0 rgba(0,0,0,0.1);transition:all 0.2s ease-in-out 0.1s;transform: translate(-3px, -5px);}
#tools .box:active{background-color: var(--pointcolor);}
#tools .box p{text-align: center;font-size: 1.5rem;}
#tools .box .desc{width:100%;text-align: center;font-size: 1rem;color:var(--dark-gray);padding: 0 5px 20px 5px;}

@media(max-width:1440px) {
    #tools .box p  {padding: 2.5rem 3.5rem;}    
}
@media(max-width:990px) {
    #tools .tit.mb-90 {margin-bottom: 3.75rem;}
    #tools .icon img {width: 50px;}
}
@media(max-width:500px) {
    #tools .box {border-radius: 35px;height:200px;}
    #tools .box p {padding: 2rem 0 2rem 0 ;}
    #tools .box .desc{font-size:1.2rem;}
    #tools .icon img {width: 35px;}
    #tools .box .material-symbols-outlined{font-size: 30px;;}
}

@media(max-width:350px) {
    #tools .flexList {--count: 1;}
    #tools .box {margin-top: 3rem !important;}
    #tools .icon img {width: auto;}
}

/* tool공통 */
.section_width{width:var(--toolWidth);max-width: 100%; margin: auto;padding: 50px 0;}
.section_custom{width:var(--toolCustomWidth);max-width: 100%; margin: auto;padding: 50px 0;}

@media(max-width:990px) {
   .section_width {width:100%;}
   .section_custom {width:100%;}   
   .btn_submit{width:100% !important;}
}


/* img_resize */
#img_resize .container{border-radius: 10px;}
#img_resize .container h2{font-size: 2rem;font-weight: 600;padding:1rem;}
#img_resize .container label{font-size:1.2rem;font-weight: 500;padding:1rem;}
#img_resize .container select,#img_resize .container #option_detail input{width:80%;margin:1rem;}
#img_resize .container .resize_quality{border:0;padding:0}
#img_resize .container .btnArea{text-align: center;}    
#img_resize .container .opts{display:flex;align-items: center;}
#img_resize .container .resize_size{width:50%;}
#img_resize .container .opt{display:flex;flex-direction: column;align-items: center;}
#img_resize .btnArea #download-btn{margin: 0 0 3rem 0;}

@media(max-width:600px) {
   #img_resize .btnArea button{width:45%;}
   #img_resize .btnArea #download-btn{width:92%;}
   #img_resize .container #option_detail .width50{width: 48% !important;}
}

#description{width:var(--toolWidth); margin: auto;padding: 0 0 50px 0;}
#description .container{padding:2rem;border-radius: 10px;}
#description .container h2{font-size: 2rem;font-weight: 600;padding:1rem 0;}
#description .container div, #description .container li{font-size: 1.4rem;margin:1rem 0;}
#description .container{background-color: #f1f1f1;}
#description ul{padding-left:2rem;}
#description .caut{display:flex;align-items: center;border:1px solid var(--dark-gray);padding: 15px 5px;border-radius:5px;background-color:var(--dark-gray);color:#f1f1f1;}
                    

@media(max-width:990px) {
    #img_resize{width:var(--toolMoWidth);max-width: 100%; margin: auto;}
    #dropZone{width:var(--toolMoWidth); margin: auto;}
    #img_resize .container select,#img_resize .container #option_detail input{width:95%;}
    #description{width:var(--toolMoWidth);max-width: 100%; margin: auto;padding: 50px 0;}
}    



/* img_crop  */
#img_crop {padding:1rem 0;}
#img_crop .container .image-container {max-height: 600px;margin-bottom: 30px;overflow: hidden;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
#img_crop .container .cropper-bg {background-image: url("/img/sub/background.png");}
#img_crop .container .preview-panel {margin-top: 30px;text-align: center;background: #ffffff;padding: 20px;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
#img_crop .container .preview-panel button{width:30%;}
#img_crop .container .preview-panel .preview {overflow: hidden;width: 200px;height: 200px;margin: 0 auto;border: 2px solid #dee2e6;border-radius: 10px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
#img_crop .container #image-preview {display: block;max-width: 100%;border-radius: 10px;}
#img_crop .container .action-btn {margin-top: 20px;}
#img_crop .container .cropper-hidden {display: none !important;}
#img_crop .container .options-panel {padding: 25px;margin-bottom: 30px;border-radius: 10px;background: linear-gradient(to right, #f8f9fa, #ffffff);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);}
#img_crop .container .result-container {margin-top: 40px;text-align: center;background: #ffffff;padding: 30px;border-radius: 10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
#img_crop .container #result-image {max-height: 500px;margin: 0 auto;border: 2px solid #dee2e6;border-radius: 10px;display: none;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}




/* img_zipper */
#img_zipper {padding:1rem 0;}
#img_zipper .loading-spinner {display: none;text-align: center;margin: 20px 0;}
#img_zipper .preview-item {background: #fff;border: 1px solid #dee2e6;border-radius: 8px;padding: 15px;margin-bottom: 15px;position: relative;}
#img_zipper #preview-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 20px;padding: 10px;}
#img_zipper .preview-item .compression-status {position: absolute;top: 10px;left: 10px;padding: 5px 10px;border-radius: 15px;font-size: 0.8rem;color: #fff;z-index: 1;}
#img_zipper .preview-item .file-info {background: #f8f9fa;padding: 10px;border-radius: 4px;margin-top: 10px;}


/* img_watermark */
#img_watermark .sub-box {padding:10px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);margin-bottom: 2rem;border-radius: 0.5rem;}
#img_watermark .card-body {flex: 1 1 auto;padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);color: var(--bs-card-color);}
#img_watermark .preview-container {position: relative;width: 100%;height: 400px;overflow: hidden;border: 1px solid #dee2e6;background-color: #f8f9fa;margin-bottom: 1rem;
    border-radius: 0.25rem;display: flex;align-items: center;justify-content: center;}
#img_watermark #imagePreview {max-width: 100%;max-height: 100%;object-fit: contain;}
#img_watermark .watermark-preview {position: absolute;pointer-events: none;max-width: 80%;max-height: 80%;display: none;}
#img_watermark .text-watermark {padding: 10px;color: white;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);font-weight: bold;text-align: center;white-space: nowrap;}
#img_watermark input[type=text]{ font-size:12px;width: 100%;border: 1px solid #dddddd !important;line-height: 1.45;letter-spacing: -0.04rem;border-radius: 8px;padding: 10px;margin-top: 12px;}

#img_watermark .position-selector {display: grid;grid-template-columns: repeat(3, 1fr);grid-template-rows: repeat(3, 1fr);gap: 5px;margin-bottom: 1rem;}
#img_watermark .position-selector button {width: 100%;aspect-ratio: 1;padding: 0;display: flex;align-items: center;justify-content: center;}
#img_watermark .active-position {background-color: #0d6efd !important;color: white !important;}
#img_watermark .form-range {width: 100%;height: 1.5rem;padding: 0;-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;}
#img_watermark .form-control-color {width: 3rem;height: calc(1.5em + .75rem + calc(var(--bs-border-width) * 2));padding: .375rem;}
#img_watermark  .controller .position-selector button{color:#c1c1c1;background-color: #fff;margin:0;box-shadow:none;border:1px solid #cacaca;}
#img_watermark .result-container {text-align: center; margin-top: 1rem;}
#img_watermark .ranges {width:100%;margin:0;padding:0;border:0;}
#img_watermark .tab_box{display:flex;flex-wrap: wrap;align-content: center;justify-content: center;}
#img_watermark .tab_box div{width:45%;margin:auto;}
#img_watermark .tab_box button{width:100%;}
#img_watermark .title{border-bottom: 2px solid #e3e6ed}
#img_watermark .colors{width:90%;background-color: #fff;border:1px solid #fafafa; border-radius: 5px;padding:2px !important;height:20px;}
#img_watermark .color_box{display:flex;flex-wrap: wrap;justify-content: center;}
#colors::-webkit-color-swatch {border-radius: 30px;border: none;}
#img_watermark .dropzone{height:100px !important;min-height: 100px !important;}

/* img_revers */
#img_revers .preview-container {width: 100%;max-height: 500px;overflow: hidden;border: 1px solid #dee2e6;background-color: #f8f9fa;margin-bottom: 1rem;border-radius: 0.25rem;
    display: flex;align-items: center;justify-content: center;padding: 1rem;min-height: 300px;}

#img_revers .optionBbutton {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1rem;}
#img_revers .optionBbutton .btn {flex: 1;min-width: 120px;display: flex;align-items: center;justify-content: center;margin:1rem .5rem;}
#img_revers #saveImage{width:100%;margin:20px 0;}
#img_revers #imagePreview {max-width: 100%;max-height: 400px;object-fit: contain;transition: transform 0.3s ease;}
#img_revers #resultImage {max-width: 100%;max-height: 400px;margin-bottom: 1rem;border-radius: 0.25rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
#img_revers .result-container {display: none;text-align: center;margin-top: 1rem;}
#img_revers button:disabled {background-color: #efefef;color: #757575;cursor: not-allowed; /* 마우스 커서 변경 */}
#img_revers button i{margin-right:10px;}
/* QR CODE */
#qr_code #qrTab div{margin-right:1rem;}
#qr_code #qrTab button{width:100%;}
#qr_code #qrTab button i{margin-right:5px;}
#qr_code .size-badge.active {background-color: #043E7A;color: white;border-color: #043E7A;}
#qr_code .size-badge {display: inline-block;padding: 6px 12px;background-color: #f8f9fa;border: 1px solid #ddd;
    border-radius: 5px;cursor: pointer;font-size: 14px;}
#qr_code #download-section {margin-top: 20px;display: none;}
#qr_code .url_addr input{-webkit-appearance: none;-webkit-border-radius: 0;border: 0;outline: none;}
#qr_code .url_addr input::placeholder{color: #d9d9d9}
#qr_code .url_addr {width: 100%;box-sizeing: border-box;margin: 0 0 10px 0;position: relative;}
#qr_code .url_addr  label{display: inline-block;position: absolute;top: -5px;left: 14px;padding: 10px;background: white;font-size: 14px;color: #888;font-weight: bold;}
#qr_code .url_addr .ver2 label{top: initial;bottom: -20px;} 
#qr_code .url_addr label span{color: #da4841;vertical-align: -1px;}
#qr_code input, select, textarea{ width: 100%;border: 1px solid #dddddd !important;line-height: 1.45;letter-spacing: -0.04rem;border-radius: 8px;padding: 16px;margin-top: 12px;}
#qr_code input[type=checkbox]{width:10% !important; }
#qr_code #qrcode {margin: 0 auto;max-width: 100%;}
#qr_code .qr-preview {text-align: center;margin-top: 20px;padding: 20px;border: 1px solid #ddd;border-radius: 5px;background-color: #f8f9fa;}
#qr_code #message-box.on{opacity: 1;visibility: visible;}
#qr_code #message-box{opacity: 0;visibility: hidden;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 9999;width: 30%;height:300px;}
#qr_code #error-message{position:relative; background-color: rgba(255, 255, 255, 0.5); width: 100%;margin:auto;text-align:center;font-weight:700;border: 1px solid #dddddd !important;line-height: 1.45;letter-spacing: -0.04rem;border-radius: 8px;padding: 16px;margin-top: 12px;}
@media(max-width:990px) {
    #qr_code #message-box{width:70%;}
}

/* image_filter */
#image_filter .filter-options {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1rem;}
#image_filter .filter-option {text-align: center;padding: 0.5rem;border: 1px solid #f1f1f1;border-radius: 0.25rem;cursor: pointer;justify-content: space-around;transition: all 0.2s ease;}
#image_filter .filter-thumbnail {width: 100%;height: 100px;object-fit: cover;margin-bottom: 0.5rem;border-radius: 0.25rem;margin:auto;}
#image_filter .slider-box{margin-bottom:2rem;font-size:1.5rem;}
#image_filter .slider-box label {display: flex;justify-content: space-between;}
#image_filter .ranges {width:100%;margin:0;padding:0;border:0;}
#image_filter .result-container {width:100%;text-align: center; margin-top: 1rem;display: none;border: 1px solid #dddddd;padding:3rem;}
#image_filter .preview-container img{margin:auto;}

/* image_frame */
#image_frame .preview-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 1rem;
}
#image_frame .frame-preview {width: 80%;height: 80%;margin-bottom: 0.5rem;border-radius: 0.25rem;background-color: #ffffff;position: relative;}
#image_frame .set-frame .box{ aspect-ratio: 1;text-align: center;padding: 0.5rem;border: 1px solid #dee2e6;border-radius: 0.25rem;cursor: pointer;
    transition: all 0.2s ease;display: flex;flex-direction: column;align-items: center;justify-content: center;}
#image_frame .slider-box{margin-bottom:2rem;font-size:1.5rem;}
#image_frame .slider-box label {display: flex;justify-content: space-between;}
#image_frame .ranges {width:100%;margin:0;padding:0;border:0;}

#image_frame .frameOptions.thin{border: 2px solid #000;}
#image_frame .frameOptions.thick{border: 8px solid #000;}
#image_frame .frameOptions.double{border: 5px double #000;}
#image_frame .frameOptions.rounded{border: 2px solid #000; border-radius: 15px;}
#image_frame .frameOptions.shadow{box-shadow: 0 0 10px rgba(0,0,0,0.3);}


/* image_background */
#image_background .remove-option {padding: 20px 0; cursor: pointer;transition: all 0.2s ease;}
#image_background .options .box {height: 100% !important;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);margin-bottom: 2rem;border-radius: 0.5rem;}
#image_background .remove-option.active {border-color: #0d6efd !important;background-color: #f8f9fa;}
#image_background .ranges {width:100%;margin:0;padding:0;border:0;}
#image_background .btn_submit.disabled, .btn_submit:disabled {color: #fff;pointer-events: none;background-color: #958a8a;border-color: #958a8a;opacity: 0.65}

/* image_join */
#image_join .mainFlex.flexList > .box:nth-child(1){width:calc(65%);} 
#image_join .mainFlex.flexList > .box:nth-child(2){width:calc(35% - var(--x-gap));} 
#image_join .merge-options {cursor: pointer;padding: 1rem;border: 1px solid #dee2e6;border-radius: 0.25rem;text-align: center;transition: all 0.2s ease;}
#image_join .merge-options.active {background-color: #e9f7fe;border-color: #0d6efd;}
#image_join .ranges {width:100%;margin:0;padding:0;border:0;}
#image_join .image-list {min-height: 100px;background-color: #f8f9fa;border: 2px dashed #dee2e6;border-radius: 0.25rem;padding: 1rem;margin-bottom: 1rem;}
#image_join .image-item {position: relative;display: inline-block;margin: 0.5rem;border: 1px solid #dee2e6;border-radius: 0.25rem;overflow: hidden;
    background-color: white;width: 120px;height: 120px;}
#image_join .image-item img {width: 100%;height: 100%;object-fit: contain;}
#image_join .image-item .remove-btn {position: absolute;top: 5px;right: 5px;background-color: rgba(220, 53, 69, 0.8);color: white;border: none;
    border-radius: 50%;width: 24px;height: 24px;font-size: 12px;line-height: 1;padding: 0;cursor: pointer;}
#image_join .image-item .move-btn {position: absolute;margin:0;top: 5px;left: 5px;background-color: rgba(0, 123, 255, 0.8);color: white;
    border: none;border-radius: 50%;width: 24px;height: 24px;font-size: 12px;line-height: 1;padding: 0;cursor: move;}
#image_join .image-item .move-btn:active{box-shadow: 0 12px 22px rgba(0,0,0,0.30), 0 5px 3px rgba(0,0,0,0.22);top: 5px !important;}
#image_join .image-item .remove-btn:active{box-shadow: 0 12px 22px rgba(0,0,0,0.30), 0 5px 3px rgba(0,0,0,0.22);top: 5px !important;}
#image_join .preview-container {position: relative; width: 100%;overflow: hidden;border: 1px solid #dee2e6;background-color: #f8f9fa;margin-bottom: 1rem;border-radius: 0.25rem;display: flex;align-items: center;justify-content: center;min-height: 300px;padding: 1rem;}
#image_join .result-container {text-align: center;margin-top: 1rem;display: none;}

@media(max-width:1200px) {
   #image_join.section_width { width: 90%;}
}
@media(max-width:990px) {
   #image_join.section_width { width: 95%;}
}
@media(max-width:768px) {
   #image_join.section_width { width: 100%;}
   #image_join .mainFlex.flexList > .box:nth-child(1){width:100%;} 
   #image_join .mainFlex.flexList > .box:nth-child(2){width:100%;} 
}

/* image_gif */
#image_gif .image-preview-container {position: relative;width: 100px;height: 100px;overflow: hidden;border-radius: 5px;margin: 5px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
#image_gif .preview-number { position: absolute;top: 5px;left: 5px;background-color: rgba(0, 0, 0, 0.6);color: white;font-size: 12px;padding: 2px 5px;border-radius: 3px;}
#image_gif .image-preview {width: 100%;height: 100%;object-fit: cover;}
#image_gif .ranges {width:100%;margin:0;padding:.375rem 0;border:0;}
/* #image_gif #resultSection {text-align: center;margin-top: 1rem;} */
#image_gif .previewHeader{display: flex;justify-content: space-between;align-items: center;}
#image_gif .previewHeader button{width:15%;min-width: 15%;margin:0;padding: 5px;background-color: #fff;color:#27262b;font-size:14px;}
#image_gif #gifPreview {max-width: 100%;max-height: 20rem;margin-bottom: 1rem;border-radius: 0.25rem;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);margin:auto;}
#image_gif #previewGif{object-fit:contain;}
@media(max-width:500px) {
   #image_gif .previewHeader button{width:25%;}
   #image_gif select{font-size:1.2rem !important;padding: 10px;}
} 
/* image_slice */
#image_slice .preview-number { position: absolute;top: 5px;left: 5px;background-color: rgba(0, 0, 0, 0.6);color: white;font-size: 12px;padding: 2px 5px;border-radius: 3px;}
#image_slice .ranges {width:100%;margin:0;}
#image_slice .drop-zone-icon {font-size: 3rem;color: #6c757d;margin-bottom: 1rem;}
#image_slice .image-preview-container {max-width: 100%;max-height: 400px;margin: 0 auto 20px;text-align: center;position: relative;}
#image_slice .image-preview {max-width: 100%;max-height: 400px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);border-radius: 5px;}
#image_slice .grid-overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0; pointer-events: none;}
#image_slice .grid-row {width: 100%;height: 1px;}
#image_slice .grid-column {height: 100%;width: 1px;}
#image_slice .grid-line {position: absolute; background-color: rgba(255, 0, 0, 0.5);}
#image_slice .slices-preview {display: flex;flex-wrap: wrap;gap: 10px;margin-top: 20px;}
#image_slice .slice-preview-item {border: 1px solid #dee2e6;border-radius: 5px;padding: 5px;position: relative;margin-bottom: 10px;background: white;}
#image_slice .slice-preview-item img {max-width: 120px;max-height: 120px;display: block;}
#image_slice .slice-info {position: absolute;top: 5px;left: 5px;background-color: rgba(0, 0, 0, 0.6);color: white;border-radius: 3px;font-size: 10px;padding: 2px 5px;}
#image_slice .btn-group .btn_submit{margin: 20px 0 0 0;}

/* image_compare */
#image_compare .container{max-height: 100%;}
#image_compare .previewHeader{display: flex;justify-content: flex-end;align-items: center;}
#image_compare .prevWrap button{width:15%;min-width: 15%;margin:0;padding: 5px;background-color: #fff;color:#27262b;font-size:14px;}
#image_compare .previewHeader button{margin-right:10px;}
#image_compare .previewHeader .on{background-color: rgba(var(--pointcolor-rgb), 0.8);color:#fff;}
#image_compare .ranges {width:100%;margin:20px 0;padding:0;border: 0;}
#image_compare #fadeView pre{border:1px solid #efefef;padding:5px 10px;border-radius:15px;font-weight: 500;}
@media(max-width:640px) {
    #image_compare .previewHeader button{width:20%;min-width: 20%;font-size:12px;}   
    #image_compare .prevWrap button{width:25%;min-width: 25%;font-size:12px;}
}

/* image_exif */
#image_exif .sub-title{font-size:16px;}
#image_exif .text-info{display:flex; flex-wrap:wrap;justify-content:flex-start;padding:2rem 0 0 2rem; align-items: center;}
#image_exif .dropzone-img{ padding:1rem;margin-bottom:2rem;display:flex;justify-content:center;}  
#image_exif .dropzone-img img{ max-height:500px;}  
#image_exif .rawDataBox{background-color: rgb(15 23 42 / 1);overflow: auto;max-height: 24rem;} 
#image_exif .rawData{color: rgb(203 213 225 / 1);} 
#image_exif .flex div:nth-child(2){font-weight:500;}
@media(max-width:604px) {
    #image_exif .dropzone-img img{ max-height:350px;} 
}

/* image_compress */
#image_compress .sub-title{font-size:16px;}
#image_compress .text-info{display:flex; flex-wrap:wrap;justify-content:flex-start;padding:2rem 0 0 2rem; align-items: center;}
#image_compress .dropzone-img{ padding:1rem;min-height: 400px;display: flex;align-items: center;}  
#image_compress .dropzone-img img{ max-height:500px;margin:auto;}  
#image_compress .fileSize{text-align:center;font-size: 2rem;font-weight: 500;padding: 1rem 0;}  
#image_compress .dropArea.imgOn{width:70% !important; margin-right:1rem;}
#image_compress .ranges{width:100%;padding: 0;margin:0;border: 1px solid var(--backcolor);border-radius: 0;}
@media(max-width:604px) {
    #image_compress .dropzone-img{ padding:.5rem;min-height: 100px;}  
    #image_compress .dropzone-img img{ max-height:350px;} 
    .compInfo, .fileInfo, .easySet{font-size:1.2rem;}
    .compInfo select{font-size:1.2rem !important;}
}
@media(max-width:860px) {
    #image_compress .dropArea.imgOn{width:100% !important; margin-right:0;}
    #image_compress .imgArea{flex-direction: column;}
    #image_compress #dataInfo{width:100%;}
}
@media(max-width:768px) {
    #image_compress .px-1em{padding:1rem;}
}

/* image_mosaic */
#image_mosaic .ranges{width:100%;padding: 0;margin:0;border: 1px solid var(--backcolor);border-radius: 0;}
#image_mosaic .dropzone-img{ padding:1rem;min-height: 400px;display: flex;align-items: center;}  
#image_mosaic .dropzone-img img{ max-height:500px;margin:auto;}  
#image_mosaic #mycanvas {cursor: crosshair;}
#dropzone.imgOn{flex-direction: row; min-height: auto !important; height: auto !important;margin-bottom:0;padding:1rem;}
#dropzone.imgOn i{margin:0 1rem 0 0;}

/* image_favicon */
/* #image_favicon .flexList .box:nth-child(1){width:67%;}
#image_favicon .flexList .box:nth-child(2){width:30%;}
#image_favicon .esayBox .flex div{width:100%;margin-bottom:10px;}
@media(max-width:604px) {
    #image_favicon .flexList .box:nth-child(1){width:100%;}
    #image_favicon .flexList .box:nth-child(2){width:100%;}
} */

#image_favicon .freeview{display: flex;align-items: flex-end;}
#image_favicon #dropzone .flexList .box:nth-child(1){width:calc(70% - var(--x-gap));}
#image_favicon #dropzone .flexList .box:nth-child(2){width:30%;padding-left: 25px;}
#image_favicon #dropzone .flexList .box .favifreeview{position: relative; width:150px; display: flex; align-items: center;text-align: center; margin: 0 0 2rem 0;padding:10px 10px 5px 10px;border: 1px solid #efefef;border-width: 2px 2px 0 2px;border-radius: 10px 10px 0 0;}
#image_favicon #dropzone .flexList .box .favifreeview .cancel{position: absolute;right:10px;font-size: 1.3rem; font-weight: 600;}

#image_favicon .freeview .imgCover img{margin:1rem;}
#image_favicon #optionInfo .options .favibox{display:flex;align-items:center;border:1px solid var(--light-gray);border-radius: 5px;padding:10px;cursor: pointer;}
#image_favicon #optionInfo .options .favibox.active{display:flex;border:1px solid var(--pointcolor);}
#image_favicon #optionInfo .options .favibox div{text-align: left;width:100%;padding:0 0 0 2rem;}
#image_favicon #optionInfo .options .favibox div pre:nth-child(2){font-size:1.3rem;}
#image_favicon #optionInfo .options .favibox input{width:2rem;height:2rem;margin:0 0 0 1rem;accent-color: var(--pointcolor);}
#image_favicon .rsBoxCover .codeArea{background-color: #1b1a1a;color:#efefef;z-index: 10;border-radius: 5px;white-space: pre-wrap;font-family: monospace;padding:1rem;}
#image_favicon .rsBoxCover .copyCode{pointer-events: auto !important;border-radius: 2px; z-index: 100; background-color: #efefef;color:#000; right:0;top:0;padding:.3rem .5rem;margin:.5rem;cursor: pointer;}
#image_favicon .rsBoxCover .copyCode i {pointer-events: none;}
#image_favicon .rsBoxCover .absolute{font-size: 12px; border: 1px solid #efefef;border-width: 0 1px 2px 0;left:0; top:0;padding:10px;border-radius: 0 0 10px 0;}
#image_favicon .resultBox .box{border:1px solid #feefee;padding:5px;min-width:65px;min-height:80px;border-radius: 3px;}

@media(max-width:768px) {
  #image_favicon .freeview .imgCover img{margin:.5rem;}
  #image_favicon #dropzone .flexList .box:nth-child(2){width:100%;padding-left: 0;}  
  #image_favicon #dropzone .flexList .box:nth-child(1){width:100%;}
  #image_favicon #dropzone .flexList .box:nth-child(2){display: flex;gap:0 55px;}
    #image_favicon #dropzone .flexList .box .favifreeview {margin: 2rem 0 4rem 0;padding: 5px 10px 5px 10px;}
}

/* image_banner  */
#image_banner #optionInfo .options .bannerbox{display:flex;align-items:center;border:1px solid var(--light-gray);border-radius: 5px;padding:10px;cursor: pointer;}
#image_banner #optionInfo .options .bannerbox:hover{border:1px solid var(--pointcolor);color:var(--pointcolor)}
#image_banner #optionInfo .options .bannerbox.active{border:1px solid var(--pointcolor);color:var(--pointcolor)}
#image_banner #optionInfo .options .bannerbox div{text-align: center;width:100%;}
#image_banner .palette #optionInfo,#image_banner .palette #canvasInfo{width:calc(75% - var(--x-gap));}
#image_banner .palette #colorInfo{width:25%;}
#image_banner #canvasFrame{border:none; background:transparent;}
#image_banner #canvasInfo{min-height: 500px;overflow: auto;}
#image_banner .colorBox{margin-top:5px}
#image_banner .colorBox .box{display:flex;align-items: center;justify-content: center;}
#image_banner .colorBox .box > div{border: 1px solid #efefef;width:40px;height:40px;cursor: pointer;transition: all 0.2s ease-in-out;border-radius: 5px;}
#image_banner .colorBox .box > div:hover{transform: scale(1.05);border: 2px solid var(--pointcolor) !important;}
#image_banner .colorBox .box > div.active{border: 2px solid var(--pointcolor) !important;}
#image_banner .colorBox .box > div.colorCustom{border: 1px dashed var(--pointcolor);}
#image_banner .ranges{width:100%;margin:0;padding:5px 0;border:0;}
#image_banner #fonts{padding:10px;margin-top:5px;}
#image_banner .textAlign {margin-top:20px;}
#image_banner .textAlign > div{width:30px;height:30px;}
#image_banner .textAlign > div:hover, #image_banner .textAlign > div.active{border:1px solid var(--pointcolor);transform: scale(1.05);}
#image_banner #diagramBox .flexList {--x-gap:1rem;--y-gap:1rem}
#image_banner .btn_option:hover .hover-text {display: block;}

#image_banner #optionBox .quickBtn{margin:5px;}
@media(max-width:640px) {
    #image_banner .palette #optionInfo,#image_banner .palette #canvasInfo{width:100%;}
    #image_banner .palette #colorInfo{width:100%;}
    .div_box{padding:15px;}
    #image_banner .colorBox {--x-gap:.5rem;--y-gap:.5rem;--count: 8;}
    #image_banner .colorBox .box > div{width:25px;height:25px;}
    #image_banner #optionBox .flexList {--x-gap:5px;--y-gap:5px;}
    #image_banner #optionBox .flexList .btn_option{padding:5px;margin-top:20px;}
}


/* image_map */
#image_map #canvasCover{max-height: 600px;overflow: auto;position: relative;}
#image_map input,#image_map select {margin-top:5px;}
#image_map #optionInfo .config{padding:5px 15px;}
#image_map #canvasBox {display: inline-block;transform-origin: top left;}
#image_map #canvasBox canvas{cursor: crosshair;}
#image_map .fileInfo{display: flex;}
#image_map .fileInfo > div {margin-right:10px;}
#image_map .zoomBox{align-items: center;justify-content: center;text-align: center;}
#image_map .zoom{padding:5px;width:33%;}
#image_map .drawList{padding:20px;}
#image_map .drawList .areaList{background: #fcfcfc; cursor: pointer;display: flex;justify-content: space-between;padding:10px;border:1px solid #ececec;margin:5px 0;}
#image_map .drawList .areaList .textArea,#image_map .drawList .areaList .delArea{display: flex;align-items: center;justify-content: center;}
#image_map .drawList .areaList .delArea{width:30px;}
#image_map .drawList .areaList .textArea .icon{margin:0 10px 0 0;padding:10px;}
#image_map .drawList .areaList:hover,#image_map .drawList .areaList.active{border-color: var(--pointcolor);color:var(--pointcolor);}
#image_map .drawList .areaList.active{background: rgba(35,25,176,0.1);}
#image_map .codeBox{background-color: #1b1a1a;color:#efefef;z-index: 10;border-radius: 5px;white-space: pre-wrap;font-family: monospace;padding:1rem;}
#image_map #target{padding:10px;}