/*======================================================================================================================================= =============================================================== [[ 공통 ]] =============================================================== =======================================================================================================================================*/ /*-------------------------------------- preset --------------------------------------*/ :root { /* color by name */ --red:#df485f; --red-d1:#bb2b41; --red-a85:#df485fd9; --red-a15:#df485f26; --red-a12:#df485f1f; --red-a10:#df485f1a; --red-a08:#df485f14; --red-a05:#df485f0d; --pink:#f68989; --pink-a85:#f68989d9; --pink-a15:#ffc0cb26; --pink-a12:#f689891f; --pink-a10:#f689891a; --pink-a08:#f6898914; --pink-a05:#f689890d; --yellow:#f9a825; --yellow-a85:#f9a825d9; --yellow-a15:#f9a82526; --yellow-a12:#f9a8251f; --yellow-a10:#f9a8251a; --yellow-a08:#f9a82514; --yellow-a05:#f9a8250d; --green:#4caf50; --green-a85:#4caf50d9; --green-a15:#4caf5026; --green-a12:#4caf501f; --green-a10:#4caf501a; --green-a08:#4caf5014; --green-a05:#4caf500d; --blue:#3971ff; --blue-a85:#3971ffd9; --blue-a15:#3971ff26; --blue-a12:#3971ff1f; --blue-a10:#3971ff1a; --blue-a08:#3971ff14; --blue-a05:#3971ff0d; --purple:#9da2f4; --purple-a85:#9da2f4d9; --purple-a15:#9da2f426; --purple-a12:#9da2f41f; --purple-a10:#9da2f41a; --purple-a08:#9da2f414; --purple-a05:#9da2f40d; --charcoal:#444b59; --charcoal-a85:#444b59d9; --charcoal-a15:#444b5926; --charcoal-a12:#444b591f; --charcoal-a10:#444b591a; --charcoal-a08:#444b5914; --charcoal-a05:#444b590d; /* color by theme */ --primary:#2b3553; --primary-l1:#364362; --primary-l2:#4a5777; --primary-a85:#2b3553d9; --primary-a15:#2b355326; --primary-a12:#2b35531f; --primary-a10:#2b35531a; --primary-a08:#2b355314; --primary-a05:#2b35530d; --secondary:#3971ff; --secondary-d1:#1a54f5; --secondary-a85:#3971ffd9; --secondary-a15:#3971ff26; --secondary-a12:#3971ff1f; --secondary-a10:#3971ff1a; --secondary-a08:#3971ff14; --secondary-a05:#3971ff0d; --background:#f4f5f8; /* white validation */ --white-a95:#fffffff2; --white-a90:#ffffffe6; --white-a85:#ffffffd9; --white-a80:#fffc; --white-a75:#ffffffbf; --white-a70:#ffffffb3; --white-a65:#ffffffa6; --white-a60:#fff9; --white-a55:#ffffff8c; --white-a50:#ffffff80; --white-a45:#ffffff73; --white-a40:#fff6; --white-a35:#ffffff59; --white-a30:#ffffff4d; --white-a25:#ffffff40; --white-a20:#fff3; --white-a15:#ffffff26; --white-a12:#ffffff1f; --white-a10:#ffffff1a; --white-a08:#ffffff14; --white-a05:#ffffff0d; /* black validation */ --black:#222; --black-95:#2d2d2d; --black-90:#393939; --black-85:#444444; --black-80:#4e4e4e; --black-75:#595959; --black-70:#656565; --black-65:#707070; --black-60:#7a7a7a; --black-55:#868686; --black-50:#919191; --black-45:#9c9c9c; --black-40:#a7a7a7; --black-35:#b2b2b2; --black-30:#bdbdbd; --black-25:#c8c8c8; --black-20:#d3d3d3; --black-15:#dedede; --black-12:#e5e5e5; --black-10:#e9e9e9; --black-08:#eee; --black-05:#f5f5f5; --black-02:#fafafa; --black-a95:#000000f2; --black-a90:#000000e6; --black-a85:#000000d9; --black-a80:#000000cc; --black-a75:#000000bf; --black-a70:#000000b3; --black-a65:#000000a6; --black-a60:#00000099; --black-a55:#0000008c; --black-a50:#00000080; --black-a45:#00000073; --black-a40:#00000066; --black-a35:#00000059; --black-a30:#0000004d; --black-a25:#00000040; --black-a20:#00000033; --black-a15:#00000026; --black-a12:#0000001f; --black-a10:#0000001a; --black-a08:#00000014; --black-a05:#0000000d; --black-a02:#22222205; /* border to box shadow - white */ --bs-b1-white:inset 0 0 0 1px var(--white); --bs-b1-white-05:inset 0 0 0 1px var(--white-05); --bs-b1-white-10:inset 0 0 0 1px var(--white-10); --bs-b1-white-15:inset 0 0 0 1px var(--white-15); --bs-b1-white-20:inset 0 0 0 1px var(--white-20); --bs-b1-white-25:inset 0 0 0 1px var(--white-25); --bs-b1-white-30:inset 0 0 0 1px var(--white-30); --bs-b1-white-35:inset 0 0 0 1px var(--white-35); --bs-b1-white-40:inset 0 0 0 1px var(--white-40); --bs-b1-white-45:inset 0 0 0 1px var(--white-45); --bs-b1-white-50:inset 0 0 0 1px var(--white-50); --bs-b1-white-55:inset 0 0 0 1px var(--white-55); --bs-b1-white-60:inset 0 0 0 1px var(--white-60); --bs-b1-white-65:inset 0 0 0 1px var(--white-65); --bs-b1-white-70:inset 0 0 0 1px var(--white-70); --bs-b1-white-75:inset 0 0 0 1px var(--white-75); --bs-b1-white-80:inset 0 0 0 1px var(--white-80); --bs-b1-white-85:inset 0 0 0 1px var(--white-85); --bs-b1-white-90:inset 0 0 0 1px var(--white-90); --bs-b1-white-95:inset 0 0 0 1px var(--white-95); --bs-b1-white-a05:inset 0 0 0 1px var(--white-a05); --bs-b1-white-a10:inset 0 0 0 1px var(--white-a10); --bs-b1-white-a15:inset 0 0 0 1px var(--white-a15); --bs-b1-white-a20:inset 0 0 0 1px var(--white-a20); --bs-b1-white-a30:inset 0 0 0 1px var(--white-a30); --bs-b1-white-a40:inset 0 0 0 1px var(--white-a40); --bs-b1-white-a50:inset 0 0 0 1px var(--white-a50); /* border to box shadow - black */ --bs-b1-black:inset 0 0 0 1px var(--black); --bs-b1-black-05:inset 0 0 0 1px var(--black-05); --bs-b1-black-10:inset 0 0 0 1px var(--black-10); --bs-b1-black-15:inset 0 0 0 1px var(--black-15); --bs-b1-black-20:inset 0 0 0 1px var(--black-20); --bs-b1-black-25:inset 0 0 0 1px var(--black-25); --bs-b1-black-30:inset 0 0 0 1px var(--black-30); --bs-b1-black-35:inset 0 0 0 1px var(--black-35); --bs-b1-black-40:inset 0 0 0 1px var(--black-40); --bs-b1-black-45:inset 0 0 0 1px var(--black-45); --bs-b1-black-50:inset 0 0 0 1px var(--black-50); --bs-b1-black-55:inset 0 0 0 1px var(--black-55); --bs-b1-black-60:inset 0 0 0 1px var(--black-60); --bs-b1-black-65:inset 0 0 0 1px var(--black-65); --bs-b1-black-70:inset 0 0 0 1px var(--black-70); --bs-b1-black-75:inset 0 0 0 1px var(--black-75); --bs-b1-black-80:inset 0 0 0 1px var(--black-80); --bs-b1-black-85:inset 0 0 0 1px var(--black-85); --bs-b1-black-90:inset 0 0 0 1px var(--black-90); --bs-b1-black-95:inset 0 0 0 1px var(--black-95); --bs-b1-black-a05:inset 0 0 0 1px var(--black-a05); --bs-b1-black-a10:inset 0 0 0 1px var(--black-a10); --bs-b1-black-a15:inset 0 0 0 1px var(--black-a15); --bs-b1-black-a20:inset 0 0 0 1px var(--black-a20); --bs-b1-black-a30:inset 0 0 0 1px var(--black-a30); --bs-b1-black-a40:inset 0 0 0 1px var(--black-a40); --bs-b1-black-a50:inset 0 0 0 1px var(--black-a50); /* border to box shadow - red */ --bs-b1-red:inset 0 0 0 1px var(--red); --bs-b1-red-a05:inset 0 0 0 1px var(--red-a05); --bs-b1-red-a08:inset 0 0 0 1px var(--red-a08); --bs-b1-red-a10:inset 0 0 0 1px var(--red-a10); --bs-b1-red-a12:inset 0 0 0 1px var(--red-a12); /* border to box shadow - blue */ --bs-b1-blue:inset 0 0 0 1px var(--blue); --bs-b1-blue-a05:inset 0 0 0 1px var(--blue-a05); --bs-b1-blue-a08:inset 0 0 0 1px var(--blue-a08); --bs-b1-blue-a10:inset 0 0 0 1px var(--blue-a10); --bs-b1-blue-a12:inset 0 0 0 1px var(--blue-a12); /* border to box shadow - green */ --bs-b1-green:inset 0 0 0 1px var(--green); --bs-b1-green-a05:inset 0 0 0 1px var(--green-a05); --bs-b1-green-a08:inset 0 0 0 1px var(--green-a08); --bs-b1-green-a10:inset 0 0 0 1px var(--green-a10); --bs-b1-green-a12:inset 0 0 0 1px var(--green-a12); /* border to box shadow - primary */ --bs-b1-primary:inset 0 0 0 1px var(--primary); --bs-b1-primary-a05:inset 0 0 0 1px var(--primary-a05); --bs-b1-primary-a08:inset 0 0 0 1px var(--primary-a08); --bs-b1-primary-a10:inset 0 0 0 1px var(--primary-a10); --bs-b1-primary-a12:inset 0 0 0 1px var(--primary-a12); /* border to box shadow - secondary */ --bs-b1-secondary:inset 0 0 0 1px var(--secondary); --bs-b1-secondary-a05:inset 0 0 0 1px var(--secondary-a05); --bs-b1-secondary-a08:inset 0 0 0 1px var(--secondary-a08); --bs-b1-secondary-a10:inset 0 0 0 1px var(--secondary-a10); --bs-b1-secondary-a12:inset 0 0 0 1px var(--secondary-a12); --bs-b1-secondary-d1:inset 0 0 0 1px var(--secondary-d1); } /*-------------------------------------- reset --------------------------------------*/ html { background:unset; } html body { padding:0; font-family:"Noto Sans KR", sans-serif; font-optical-sizing:auto; font-style:normal; color:var(--black); -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; } img, fieldset, iframe { border:none; } code, kbd, samp, pre { font-family:"Noto Sans KR", sans-serif; font-size:unset; } button[disabled], .btn[disabled] { opacity:.3!important; filter:grayscale(1); cursor:auto; } /*-------------------------------------- scrollbar --------------------------------------*/ *::-webkit-scrollbar { width:.75rem; height:.75rem; } *::-webkit-scrollbar-thumb { background:var(--black-25); } *::-webkit-scrollbar-track { background:var(--background); } *:not(.tabulator-tableHolder):not(.modal-body):not(.tooltip_body)::-webkit-scrollbar { display:none; } /*-------------------------------------- input elements --------------------------------------*/ input, select, textarea, .form-control, .form-select, .form-textarea { transition:.2s, background 0s; width:100%; padding:.625rem .75rem; border-radius:.1875rem; border:none; box-shadow:var(--bs-b1-black-a15); background:white; outline:none!important; font-size:.875rem; line-height:1.25rem; color:var(--black); } input[readonly]:not(.btn):focus, select[readonly]:not(.btn):focus, textarea[readonly]:not(.btn):focus, .form-control[readonly]:not(.btn):focus, .form-select[readonly]:not(.btn):focus, .form-textarea[readonly]:not(.btn):focus { box-shadow:var(--bs-b1-black-a15); } input:not([readonly]):not(.btn):focus, select:not([readonly]):not(.btn):focus, textarea:not([readonly]):not(.btn):focus, .form-control:not([readonly]):not(.btn):focus, .form-select:not([readonly]):not(.btn):focus, .form-textarea:not([readonly]):not(.btn):focus { box-shadow:var(--bs-b1-secondary); } input:not([readonly]):not(.btn):focus, select:not([readonly]):not(.btn):focus, textarea:not([readonly]):not(.btn):focus, .form-control:not([readonly]):not(.btn):focus, .form-select:not([readonly]):not(.btn):focus, .form-textarea:not([readonly]):not(.btn):focus { box-shadow:var(--bs-b1-secondary); } input:not([type="button"])[readonly], select[readonly], textarea[readonly], .form-control:not([type="button"])[readonly], .form-select[readonly], .form-textarea[readonly] { background:var(--black-05); cursor:auto; } input:not([type="button"])[disabled], select[disabled], textarea[disabled], .form-control:not([type="button"])[disabled], .form-select[disabled], .form-textarea[disabled] { box-shadow:none; background:var(--black-a05); color:var(--black-60); cursor:auto; } select, .form-select { padding-right:1.875rem!important; background:white url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat right .375rem center / 1.375rem; cursor:pointer; } textarea, .form-textarea { resize:none; } label, .form-label { margin-bottom:.375rem; font-size:.875rem; font-weight:500; letter-spacing:-.025em; color:var(--black); } input:-webkit-autofill, input:-webkit-autofill:active { box-shadow:var(--bs-b1-black-a15),inset 0 0 0 62.5rem white!important; } input:-webkit-autofill:focus, input:-webkit-autofill:active:focus { box-shadow:var(--bs-b1-secondary),inset 0 0 0 62.5rem white!important; } input::placeholder, textarea::placeholder, .form-control::placeholder { font-weight:400; color:var(--black-30); } input::-webkit-input-placeholder, textarea::-webkit-input-placeholder, .form-control::-webkit-input-placeholder { font-weight:400; color:var(--black-30); } input::-moz-placeholder, textarea::-moz-placeholder, .form-control::-moz-placeholder { font-weight:400; color:var(--black-30); } input:-ms-input-placeholder, textarea:-ms-input-placeholder, .form-control:-ms-input-placeholder { font-weight:400; color:var(--black-30); } /* input container & wrap */ .input_container, .input_container [class^="input"], .input_wrap, .input_wrap [class^="input"] { flex:1 100%; display:flex; flex-wrap:wrap; position:relative; } .input_container, .input_wrap { row-gap:1.25rem; } .input_container .input_wrap:not([class*="type"]) label:first-child, .input_container .input_wrap:not([class*="type"]) .form-label:first-child { flex:1 100%; margin:0; padding:0; } .input_container .input_box .guide, .input_wrap .input_box .guide { margin-top:-.125rem; } /* input size(기본 40px) - .size_large(48px) & .size_small(36px) / input 엘리먼트의 상위태그(가급적 .input_container) 또는 input 엘리먼트에 직접 적용 */ .size_large input:not([type="checkbox"]):not([type="radio"]), .size_large select, .size_large textarea, input:not([type="checkbox"]):not([type="radio"]).size_large, select.size_large, textarea.size_large { padding:.875rem; border-radius:.25rem; } .size_large label, label.size_large { font-size:.875rem; } .size_small input:not([type="checkbox"]):not([type="radio"]), .size_small select, .size_small textarea, input:not([type="checkbox"]):not([type="radio"]).size_small, select.size_small, textarea.size_small { padding:.5rem .75rem; font-size:.8125rem; } /* input wrap box */ .input_wrap.box { box-shadow:var(--bs-b1-black-15); } .input_wrap.box .title_wrap { margin-bottom:0; padding:1rem 1.25rem; border-color:var(--black-15); } .input_wrap.box .title_wrap .title { font-size:1rem; } /* input box */ .input_box { gap:.5rem .375rem; } .input_box .input_box, .input_box input:not([type="checkbox"]):not([type="radio"]):not([type="button"]), .input_box select, .input_box textarea { flex:1; } .input_box input[disabled]:not([type="checkbox"]):not([type="radio"]) + .btn, .input_box select[disabled] + .btn, .input_box textarea[disabled] + .btn { opacity:.3; filter:grayscale(1); pointer-events:none; } .input_box .unit { display:inline-flex; align-items:center; } .input_box .btn { width:auto; min-width:4rem; } .input_box .guide { flex:1 100%; display:block; position:relative; margin-top:.25rem; font-size:.8125rem; line-height:1.4; letter-spacing:-.025em; color:var(--black-50); } .input_box .guide + input, .input_box .guide + input:not(.full) + .btn, .input_box .guide + select, .input_box .guide + select:not(.full) + .btn, .input_box .guide + textarea { margin-top:1.25rem; } .input_box .short, .input_box .full { flex-basis:100%!important; width:auto; } /* input type title - .input_wrap에 적용 */ .input_wrap.type_title, .input_wrap.type_title .input_box { gap:0; } .input_wrap.type_title label { display:none; } .input_wrap.type_title input:not([type="checkbox"]):not([type="radio"]), .input_wrap.type_title select, .input_wrap.type_title textarea { height:auto; padding:0; box-shadow:none; background:none; font-size:1.3125rem; font-weight:600; line-height:1.2; letter-spacing:-.02em; color:var(--black); } /* input type line - .input_wrap에 적용 */ .input_wrap.type_line { row-gap:.5rem; } .input_wrap.type_line .input_box { gap:0; padding:0 .25rem; border-bottom:1px solid var(--black-15); } .input_wrap.type_line label { flex:0 0 auto; margin-right:1.75rem; margin-bottom:0; padding:.625rem 0; line-height:1.25rem; letter-spacing:-.02em; color:var(--black-60); } .input_wrap.type_line input:not([type="checkbox"]):not([type="radio"]), .input_wrap.type_line select, .input_wrap.type_line textarea { flex:1; padding-left:0; padding-right:0; box-shadow:none; background:none!important; font-size:.9375rem; font-weight:500; letter-spacing:-.02em; word-break:keep-all; text-align:right; color:var(--black); } /* input type file - .input_box에 적용 */ .input_box.type_file .file_name { background:white; } .input_box.type_file label { margin-bottom:0; } .input_box.type_file input[type="file"] { position:absolute; width:0; height:0; padding:0; border:none; overflow:hidden; } .imgpreview { flex:1 100%; width:100%; } .imgpreview ul { display:flex; flex-wrap:wrap; } .imgpreview li { display:inline-flex; align-items:center; column-gap:.375rem; position:relative; margin:.25rem .375rem .25rem 0; padding:.5rem 2.375rem .5rem 1rem; border-radius:2.25rem; box-shadow:var(--bs-b1-black-40); font-size:.8125rem; line-height:1.25rem; letter-spacing:-.025em; } .imgpreview li .upload-del { position:absolute; top:0; right:.375rem; width:2rem; height:2.25rem; cursor:pointer; } .imgpreview li .upload-del::before, .imgpreview li .upload-del::after { content:""; position:absolute; top:50%; left:50%; width:55%; border-top:.125rem solid var(--black); } .imgpreview li .upload-del::before { transform:translate(-50%,-50%) rotate(45deg) scale(.8); } .imgpreview li .upload-del::after { transform:translate(-50%,-50%) rotate(-45deg) scale(.8); } .imgpreview .btn { margin-top:.5rem; } .imgpreview_wrap { flex:1; display:flex; flex-wrap:wrap; justify-content:center; gap:.375rem; } .imgpreview_wrap .imgpreview { display:none; } .imgpreview_wrap img { width: calc(50% - .1875rem); border-radius:.25rem; border:1px solid var(--black-15); object-position:center; object-fit:cover; } /* input checkbox & radio */ input[type="checkbox"], input[type="radio"] { position:absolute; width:1.375rem; height:1.375rem; opacity:0; cursor:pointer; z-index:1; } input[type="checkbox"] + label, input[type="radio"] + label { display:inline-block; position:relative; margin:.5rem 1rem 0 0; padding-left:1.875rem; line-height:1.375rem; cursor:pointer; } input[type="checkbox"][disabled] + label, input[type="radio"][disabled] + label { color:var(--black-50); } input[type="checkbox"] + label::before, input[type="radio"] + label::before { content:""; position:absolute; top:0; left:0; transition:.2s; width:1.375rem; height:1.375rem; box-shadow:var(--bs-b1-black-a20); background:white; } input[type="radio"] + label::before { border-radius:50%; } input[type="checkbox"]:checked + label::before, input[type="radio"]:checked + label::before { box-shadow:var(--bs-b1-black); } input[type="checkbox"]:checked + label::after { content:""; position:absolute; top:.375rem; left:.375rem; transform:rotate(135deg); width:.6875rem; height:.4375rem; border-top:.125rem solid var(--black); border-right:.125rem solid var(--black); } input[type="radio"]:checked + label::after { content:""; position:absolute; top:0; left:0; transform:scale(.5); width:1.375rem; height:1.375rem; border-radius:50%; background:var(--black); } /* input checkbox & radio type check - .input_box에 적용 */ .input_box.type_check input[type="checkbox"] + label::before { border-radius:50%; } .input_box.type_check input[type="checkbox"] + label::after, .input_box.type_check input[type="radio"] + label::after { content:""; position:absolute; top:.375rem; left:.375rem; transform:rotate(135deg); width:.6875rem; height:.4375rem; border-radius:0; border-top:.125rem solid var(--black-30); border-right:.125rem solid var(--black-30); background:none; } .input_box.type_check input[type="checkbox"]:checked + label::before, .input_box.type_check input[type="radio"]:checked + label::before { box-shadow:none; background:var(--black); } .input_box.type_check input[type="checkbox"]:checked + label::after, .input_box.type_check input[type="radio"]:checked + label::after { border-color:white; } /* input checkbox type switch - .input_box에 적용 */ .input_box.type_switch { column-gap:0; } .input_box.type_switch input[type="checkbox"] + label { flex:1 100%; margin:.3125rem 0; padding:.25rem 4rem .25rem 0; line-height:1.25rem; } .input_box.type_switch input[type="checkbox"] + label::before { left:auto; right:0; width:3rem; height:1.75rem; border-radius:1.75rem; box-shadow:none; background:var(--black-12); } .input_box.type_switch input[type="checkbox"] + label::after { content:""; position:absolute; top:0; left:auto; right:1.25rem; transform:scale(.7); transition:.2s; width:1.75rem; height:1.75rem; border-radius:50%; border:none; background:white; } .input_box.type_switch input[type="checkbox"]:checked + label::before { background:var(--secondary); } .input_box.type_switch input[type="checkbox"]:checked + label::after { right:0!important; } .input_box.type_switch .guide { margin-top:-.875rem; } .size_small .input_box.type_switch input[type="checkbox"] + label { padding:.125rem 3.5rem .125rem 0; } .size_small .input_box.type_switch input[type="checkbox"] + label::before { width:2.5rem; height:1.5rem; } .size_small .input_box.type_switch input[type="checkbox"] + label::after { right:1rem; width:1.5rem; height:1.5rem; } /* input radio type switch - .input_box에 적용 */ .input_box.type_switch input[type="radio"] { flex:0; } .input_box.type_switch input[type="radio"] + label { flex:1 1 0; display:flex; align-items:center; justify-content:center; height:2.5rem; margin:0 -1px 0 0; padding:0; box-shadow:var(--bs-b1-black-15); background:var(--black-05); color:var(--black-75); } .input_box.type_switch input[type="radio"]:first-of-type + label { border-radius:.1875rem 0 0 .1875rem; } .input_box.type_switch input[type="radio"] + label:last-of-type { margin-right:0; border-radius:0 .1875rem .1875rem 0; } .input_box.type_switch input[type="radio"] + label::before, .input_box.type_switch input[type="radio"] + label::after { display:none; } .input_box.type_switch input[type="radio"]:checked + label { box-shadow:var(--bs-b1-black); background:white; font-weight:600; color:var(--black); z-index:1; } /*-------------------------------------- button elements --------------------------------------*/ .btn { column-gap:.125rem; position:relative; transition:.2s; width:auto; min-height:2.5rem; padding:0 1rem; border-radius:.1875rem; border:none; box-shadow:var(--bs-b1-black-a40); background:white; font-size:.875rem; font-weight:600; color:var(--black); } .btn:focus { box-shadow:var(--bs-b1-black-a40); } .btn-primary { box-shadow:var(--bs-b1-black-a10); background:var(--secondary); color:white; } .btn-primary:focus { box-shadow:var(--bs-b1-black-a10); } .btn-secondary { box-shadow:var(--bs-b1-secondary-d1); color:var(--secondary-d1); } .btn-secondary:focus { box-shadow:var(--bs-b1-secondary-d1); } .btn-tertiary { box-shadow:none; background:var(--secondary-a15); color:var(--secondary-d1); } .btn-tertiary:focus { box-shadow:none; } .btn-cancel, .btn-close { box-shadow:none; background:var(--black-12); color:var(--black-85); } .btn-cancel:focus, .btn-close:focus { box-shadow:none; } .btn-gray { box-shadow:var(--bs-b1-black-a10); background:var(--black-60); font-weight:400; color:white; } .btn-gray:focus { box-shadow:var(--bs-b1-black-a10); } .btn-dark { box-shadow:var(--bs-b1-black-a10); background:var(--charcoal); font-weight:400; color:white; } .btn-dark:focus { box-shadow:var(--bs-b1-black-a10); } .btn-danger { box-shadow:var(--bs-b1-red); color:var(--red-d1); } .btn-danger:focus { box-shadow:var(--bs-b1-red); } /* button wrap */ .button_wrap { flex:1; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .375rem; width:100%; } .button_wrap .btn { flex:1; min-width:6.25rem; white-space:nowrap; } .button_wrap .full { flex-basis:100%; } .content > .button_wrap { gap:.625rem .5rem; padding:1rem 0; } .content > .button_wrap .btn { border-radius:.375rem; } .input_container .button_wrap, .input_wrap .button_wrap { padding-top:.625rem; } /* button size(기본 40px) - large(48px) & small(36px) & tiny(30px) / button 엘리먼트의 상위 태그 또는 button 엘리먼트에 직접 적용 */ .size_large .btn, .size_large.btn { min-height:3rem; border-radius:.25rem; } .size_small .btn, .size_small.btn { min-height:2.25rem; padding:0 .75rem; font-size:.8125rem; } .size_tiny .bnt, .size_tiny.btn { min-height:1.75rem; padding:0 .5625rem; font-weight:500; } /* button with icon */ .btn[class*="btn-icon"]::before { content:""; flex-shrink:0; display:inline-block; width:1.5rem; height:1.5rem; margin-left:-.25rem; background-repeat:no-repeat; background-position:center; background-size:cover; } .btn-icon-plus::before { background-image:url(/img/icon/icon_plus_white.svg); } .btn-icon-excel::before { background-image:url(/img/icon/icon_excel.svg); } .btn-icon-download::before { background-image:url(/img/icon/icon_download.svg); } .btn-icon-refresh::before { background-image:url(/img/icon/icon_refresh.svg); } /* button type switch - button(.btn)에 적용 */ .btn-switch { display:inline-flex; align-items:center; column-gap:.5rem; position:relative; min-width:unset!important; min-height:unset!important; box-shadow:none!important; padding:0!important; font-weight:500; } .btn-switch::before { content:""; order:1; transition:background .2s; width:3rem; height:1.75rem; border-radius:1.75rem; background:var(--black-12); } .btn-switch::after { content:""; position:absolute; top:0; right:1.25rem; transform:scale(.7); transition:right .2s; width:1.75rem; height:1.75rem; border-radius:50%; background:white; } .btn-switch.active::before { background:var(--secondary); } .btn-switch.active::after { right:0!important; } .size_small .btn-switch { column-gap:.375rem; } .size_small .btn-switch::before { width:2.5rem; height:1.5rem; } .size_small .btn-switch::after { right:1rem; width:1.5rem; height:1.5rem; } /*-------------------------------------- wrapper --------------------------------------*/ body > .flex { flex-wrap:wrap; min-height:100dvh; background:var(--background); } .content { flex:1 100%; min-width:unset; max-width:100%; min-height:unset; max-height:unset; margin:0; padding:4.75rem 1rem 1rem; border-radius:0; } .content:before { display:none; } .overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); } .thumb { position:relative; overflow:hidden; } .thumb::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:inherit; border:1px solid var(--black-a05); pointer-events:none; } .thumb img { position:absolute; width:100%; height:100%; object-position:center; object-fit:cover; } .scroll-lock, .scroll-locked, .scroll_lock, .scroll_locked { overflow:hidden!important; } .d_hide { position:absolute!important; visibility:hidden!important; } .d_none, .on-pc { display:none!important; } /*-------------------------------------- content_footer --------------------------------------*/ .content_footer { flex:1 100%; padding:2.5rem 1rem; letter-spacing:-.025em; } .content_footer .inner_wrap { display:flex; flex-direction:column; position:relative; } .content_footer .logo { width:8.75rem; margin:0 0 1.25rem; filter:grayscale(1) opacity(.6); } .content_footer .logo img { width:100%; } .content_footer .contact { font-size:.8125rem; color:var(--black-65); } .content_footer .contact span { font-weight:500; } .content_footer .copyright { margin:1rem 0 0; font-size:.8125rem; font-weight:500; color:var(--black-80); } /*-------------------------------------- 타이틀 & 텍스트 --------------------------------------*/ #success { font-weight:500!important; color:var(--green)!important; } #caution { font-weight:500!important; color:var(--yellow)!important; } #warning { font-weight:500!important; color:var(--red)!important; } .title_wrap { display:flex; align-items:center; column-gap:1.25rem; width:100%; padding:.5rem 0 1rem; } .title_wrap .title { flex-shrink:0; font-weight:700; letter-spacing:-.025em; color:var(--black); } .title_wrap h2.title { font-size:1.125rem; } .title_wrap h3.title { font-size:1rem; } .title_wrap h4.title { font-size:.9375rem; } .txt_list { display:block; position:relative; padding-left:.5rem; font-size:.875rem; line-height:1.1875rem; } .txt_list + .txt_list { margin-top:.375rem; } .txt_list::before { content:""; position:absolute; top:.5rem; left:0; width:.1875rem; height:.1875rem; border-radius:50%; background:var(--black-75); } .text-ovreflow { display:-webkit-box; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word; word-break:break-all; overflow:hidden; } /*-------------------------------------- box --------------------------------------*/ .box_wrap { display:flex; flex-direction:column; row-gap:1.25rem; } .box { max-width:100%; padding:1.25rem; border-radius:.625rem; border:none; box-shadow:var(--bs-b1-black-a10); background:white; letter-spacing:-.02em; } .box .title_wrap { width:calc(100% + 2.5rem); margin:-1.25rem -1.25rem 1.25rem; padding:1.25rem; border-bottom:1px solid var(--black-10); } .box:has(.tabulator_wrap) .title_wrap { margin-bottom:-1px; } .box .title_wrap .title + * { display:flex; position:relative; margin-left:auto; font-size:.875rem; font-weight:500; line-height:1.25rem; text-align:right; word-break:keep-all; color:var(--black-50); } .box .title_wrap .variance { column-gap:.25rem; margin-top:-.25rem; margin-bottom:-.25rem; padding:0 .5rem; border-radius:.25rem; background:var(--red-a10); font-size:.8125rem; line-height:1.5rem; color:var(--red); } .box .title_wrap .variance svg { position:relative; bottom:-.125rem; transform:scale(.85); margin:0 -.25rem; width:1.25rem; height:1.25rem; stroke-width:1.75; } .box .title_wrap .variance.minus { background:var(--blue-a10); color:var(--blue); } .box .title_wrap .dod::before { content:"전일대비"; } .box .title_wrap .mom::before { content:"전월대비"; } .box .content_wrap { display:flex; flex-direction:column; row-gap:.625rem; } .box .inner_box { display:flex; flex-direction:column; } .box .inner_box li { display:flex; align-items:center; padding:1rem; border:1px solid var(--black-12); background:var(--black-02); font-size:.875rem; font-weight:500; } .box .inner_box li + li { margin-top:-1px; } .box .inner_box li.current { border-color:var(--blue-a12); background:var(--blue-a08); color:var(--blue); } .box .inner_box li:first-child { border-top-left-radius:.25rem; border-top-right-radius:.25rem; z-index:1; } .box .inner_box li:first-child .body .total money { position:relative; top:-1px; font-size:1rem; font-weight:700; } .box .inner_box li:not(:first-child) { padding:.875rem 1rem 0; border-top-width:0; border-bottom-width:0; background:none; color:var(--black-75); } .box .inner_box li:not(:first-child) .head { position:relative; padding-left:.75rem; font-size:.8125rem; font-weight:400; } .box .inner_box li:not(:first-child) .head::before { content:""; position:absolute; top:calc(50% + 1px); left:.25rem; transform:translateY(-50%); width:.1875rem; height:.1875rem; border-radius:50%; background:var(--black-60); } .box .inner_box li:last-child { padding-bottom:1rem; border-bottom-width:1px; border-bottom-left-radius:.25rem; border-bottom-right-radius:.25rem; } .box .inner_box .body { margin-left:auto; } .box .inner_box .body .total { display:flex; column-gap:.125rem; } .box .inner_box .body .total.cancel { color:var(--red); } .box .inner_box .body .total money { position:relative; font-weight:600; } /*-------------------------------------- tab list --------------------------------------*/ .tab-list { display:flex; align-items:center; column-gap:.375rem; position:relative; padding:1rem 0; } .tab-list .tab-btn button, .tab-list .tab-btn .btn { height:2.25rem; padding:0 .75rem; border-radius:.3125rem; box-shadow:var(--bs-b1-black-a15); background:white; font-size:.8125rem; font-weight:500; letter-spacing:-.025em; } .tab-list .tab-btn .active { box-shadow:var(--bs-b1-black-a10); background:var(--charcoal); color:white; } .title_wrap + .tab-list { padding:0 0 1rem; } /*-------------------------------------- 이용약관 --------------------------------------*/ .terms { line-height:1.5; letter-spacing:-.03em; } .terms > h3, .terms > h4, .terms > h5 { font-size:.9375rem; font-weight:700; } .terms > p { padding-top:.625rem; } .terms > p + *:not(p):not(ol) { padding-top:2.5rem; } .terms > *:not(p) + *:not(p) { padding-top:1rem; } .terms ol { padding-top:.5rem; } .terms ol li { position:relative; padding-left:.625rem; } .terms ol li::before { content:"-"; position:absolute; top:0; left:0; } .terms ol li + li { margin-top:.5rem; } /*-------------------------------------- 로딩 효과 --------------------------------------*/ .pay_loading_wrap { display:none; position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:100000; } .pay_loading_wrap .pay_loading { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:3.125rem; } .pay_loading_wrap .pay_loading svg { width:100%; } /*-------------------------------------- 헤더(모바일) --------------------------------------*/ /* 헤더(모바일) Top 영역 */ .mobile-menu { top:0; left:0; margin:0; border:none; background:0; } .mobile-menu::before { display:none; } .mobile-menu .overlay { position:fixed; top:0; left:0; bottom:0; transition:.3s; width:100%; background:rgba(0, 0, 0, .5); opacity:0; visibility:hidden; z-index:-1; } .mobile-menu .mobile-menu-bar { column-gap:.125rem; position:relative; height:3.75rem; padding:0 1rem; background:white; } .mobile-menu .mobile-menu-bar::after { content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:1px solid var(--black-12); } .mobile-menu .main_logo { flex-shrink:0; height:1.5rem; } .mobile-menu .main_logo img { width:100%; height:auto; } .mobile-menu .header_gnb { display:flex; align-items:center; column-gap:.125rem; z-index:1; } .mobile-menu .header_gnb .icon { position:relative; width:2.5rem; height:2.5rem; padding:0; border-radius:0; border:none; cursor:pointer; } .mobile-menu .header_gnb .alert .count { display:flex; justify-content:center; position:absolute; top:.1875rem; right:1px; min-width:1.0625rem; height:1.0625rem; padding:0 .25rem; border-radius:1rem; background:var(--red); font-size:.625rem; font-weight:700; line-height:1rem; color:white; } .mobile-menu .header_gnb .user_profile::before, .mobile-menu .header_gnb .user_profile::after { content:"MY"; position:absolute; right:.25rem; bottom:.25rem; font-size:.625rem; font-weight:900; line-height:.75rem; z-index:1; pointer-events:none; } .mobile-menu .header_gnb .user_profile::before { -webkit-text-fill-color:var(--primary); -webkit-text-stroke:.1875rem; color:white; } .mobile-menu .header_gnb .icon_user { position:relative; display:block; height:100%; } .mobile-menu .header_gnb .icon_user::before, .mobile-menu .header_gnb .icon_user::after { content:""; position:absolute; top:50%; left:50%; border-radius:50%; border:.125rem solid var(--black); } .mobile-menu .header_gnb .icon_user::before { transform:translate(-50%,-82.5%); width:35%; height:35%; } .mobile-menu .header_gnb .icon_user::after { transform:translate(-50%,2.5%) rotate(45deg); width:52.5%; height:52.5%; clip-path:polygon(0 0,0 100%,100% 0); } .mobile-menu .mobile-menu-bar .mobile-menu-toggler { position:relative; width:2.5rem; height:2.5rem; margin-right:-.5rem; z-index:1; } .mobile-menu .mobile-menu-bar .mobile-menu-toggler:before, .mobile-menu .mobile-menu-bar .mobile-menu-toggler:after { content:""; position:absolute; right:.5625rem; transition:.3s; height:.125rem; margin-top:.625rem; background:var(--black); } .mobile-menu .mobile-menu-bar .mobile-menu-toggler:before { top:0; width:1.125rem; } .mobile-menu .mobile-menu-bar .mobile-menu-toggler:after { top:1.125rem; width:1.375rem; } .mobile-menu .mobile-menu-bar .mobile-menu-toggler svg { position:absolute; top:50%; right:.5625rem; transform:translateY(-50%); transition:.4s; width:.875rem; height:.125rem; background:var(--black); overflow:hidden; opacity:1; } /* 헤더(모바일) Top 영역 - active */ .mobile-menu--active .overlay { opacity:1; visibility:visible; } .mobile-menu--active .mobile-menu-bar .mobile-menu-toggler:before { transform:translateX(.0625rem) translateY(.5625rem) rotate(-45deg); width:1.5rem; } .mobile-menu--active .mobile-menu-bar .mobile-menu-toggler:after { transform:translateX(.0625rem) translateY(-.5625rem) rotate(45deg); width:1.5rem; } .mobile-menu--active .mobile-menu-bar .mobile-menu-toggler svg { width:0; opacity:0; } /* 헤더(모바일) Side 영역 */ .mobile-menu .scrollable { display:flex; flex-direction:column; justify-content:space-between; top:3.75rem; left:auto; right:0; transition:.3s; transform:translateX(100%); width:100%; height:calc(100dvh - 3.75rem); margin:0; background:white; overflow-y:auto; overscroll-behavior:contain; z-index:1; } .mobile-menu .user_info_wrap { padding:1.25rem 1rem .75rem; background:white; } .mobile-menu .user_detail { display:flex; align-items:center; gap:.375rem; margin-bottom:.625rem; } .mobile-menu .user_detail span { padding:0 .5rem 1px; border-radius:.3125rem; font-size:.75rem; font-weight:600; line-height:1.3125rem; } .mobile-menu .user_detail .user_authority { box-shadow:var(--bs-b1-red-a12); background:var(--red-a10); color:var(--red); } .mobile-menu .user_detail .user_organization { box-shadow:var(--bs-b1-blue-a12); background:var(--blue-a10); color:var(--blue); } .mobile-menu .user_greeting { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.125rem; } .mobile-menu .user_greeting p { font-size:.9375rem; line-height:1.25; letter-spacing:-.025em; } .mobile-menu .user_greeting .user_name { font-size:1.25rem; font-weight:700; } .mobile-menu .quick_menu_wrap { position:relative; padding:0 1rem 2rem; } .mobile-menu .quick_menu_wrap::after { content:""; position:absolute; left:0; right:0; bottom:0; height:.625rem; border-top:1px solid var(--black-15); background:var(--black-05); } .mobile-menu .quick_menu { padding:0; background:linear-gradient(-45deg,var(--secondary-d1),var(--secondary)); overflow:hidden; } .mobile-menu .quick_menu ul { display:flex; align-items:center; justify-content:center; padding:.75rem 1rem; } .mobile-menu .quick_menu li { flex:1; margin-top:-.375rem; border:none; } .mobile-menu .quick_menu li a { display:flex; flex-direction:column; align-items:center; font-size:.8125rem; font-weight:500; color:var(--white-a85); } .mobile-menu .quick_menu li a img { width:2.75rem; filter:brightness(100); } .mobile-menu .login_session { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; background:var(--black-a15); } .mobile-menu .login_session .timer_wrap { display:flex; align-items:center; gap:.375rem; } .mobile-menu .login_session .timer_wrap svg { width:1.125rem; height:1.125rem; color:white; stroke-width:2; } .mobile-menu .login_session .timer_wrap .timer { font-size:.875rem; font-weight:500; letter-spacing:-.02em; color:var(--white-a85); } .mobile-menu .login_session button { display:flex; align-items:center; gap:.375rem; font-size:.875rem; font-weight:600; letter-spacing:-.01em; color:var(--white-a85); } .mobile-menu .login_session button svg { width:1rem; height:1rem; color:white; stroke-width:2; } .mobile-menu .scrollable__content { padding:.25rem 1rem 1.5rem; } .mobile-menu .scrollable__content > li + li { border-top:1px solid var(--black-12); } .mobile-menu .menu { height:3.75rem; padding:0 .625rem 0 .25rem; color:var(--black); } .mobile-menu .menu .menu__icon { flex-shrink:0; width:2rem; height:2rem; margin-right:-.25rem; } .mobile-menu .menu .menu__icon img { filter:invert(.7) sepia(.7) saturate(7) hue-rotate(185deg); } .mobile-menu .menu .menu__title { display:flex; align-items:center; margin-left:.625rem; font-size:1rem; font-weight:500; color:var(--black); } .mobile-menu .menu .menu__title .menu__sub-icon { position:relative; transform:scale(.75); width:1.75rem; height:1.75rem; } .mobile-menu .menu .menu__title .menu__sub-icon::before, .mobile-menu .menu .menu__title .menu__sub-icon::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--black); } .mobile-menu .menu .menu__title .menu__sub-icon::before { transition:.2s linear; width:.125rem; height:70%; } .mobile-menu .menu .menu__title .menu__sub-icon::after { width:70%; height:.125rem; } .mobile-menu .menu .menu__title .menu__sub-icon.rotate-180::before { transform:translate(-50%,-50%) rotate(90deg); opacity:0; } .mobile-menu .menu.side_gnb .menu__title .menu__sub-icon::before { display:none; } .mobile-menu .menu.side_gnb .menu__title .menu__sub-icon::after { transform:translate(-70%,-50%) rotate(45deg); width:50%; height:50%; border-top:.125rem solid var(--black); border-right:.125rem solid var(--black); background:none; } .mobile-menu .depth_2 { margin:0; padding:0 .625rem 1rem 1.25rem; background:none; } .mobile-menu .depth_2 li .menu { height:2.625rem; padding:0 0 0 1.25rem; border-left:1px solid var(--black-15); } .mobile-menu .depth_2 li .menu .menu__title { position:relative; margin:0; padding-left:.625rem; font-size:.9375rem; font-weight:400; line-height:1.25rem; } .mobile-menu .depth_2 li .menu .menu__title::before { content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); width:.1875rem; height:.1875rem; border-radius:50%; background:var(--black-75); } .mobile-menu .logout-btn { display:flex; align-items:center; justify-content:center; border-top:1px solid var(--black-12); } .mobile-menu .logout-btn a { flex:1; display:flex; align-items:center; justify-content:center; height:3.75rem; padding:0 1rem; font-size:.9375rem; color:var(--primary); } .mobile-menu .logout-btn svg { position:relative; top:-1px; margin-right:.375rem; width:1.125rem; height:1.125rem; } /* 헤더(모바일) Side 영역 - active */ .mobile-menu--active .scrollable { transform:translateX(0); } /* 헤더(모바일) Floating button 영역 */ .mobile-menu .float_button_wrap { display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; row-gap:.3125rem; position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; height:0; padding:0 1rem 1.25rem; pointer-events:none; } .mobile-menu .float_button { flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:3.5rem; max-width:unset; height:3.5rem; margin:0; border-radius:50%; background:var(--primary); overflow:hidden; cursor:pointer; pointer-events:auto; } .mobile-menu .float_button a { width:100%; height:100%; padding:.25rem; font-size:.875rem; font-weight:500; text-transform:uppercase; color:white; } /*-------------------------------------- 헤더(PC웹) --------------------------------------*/ .top-bar-boxed { display:none; } /*-------------------------------------- 사이드 네비(PC웹) --------------------------------------*/ .side-nav { display:none; } /*-------------------------------------- form filter --------------------------------------*/ .form_filter .input_container, .form_filter .input_wrap { row-gap:.625rem; } .form_filter .input_box { row-gap:.375rem; } .form_filter .input_box .short + .input_box { margin:.25rem 0 0; } .form_filter .input_box label:first-child, .form_filter .input_box .form-label:first-child { flex:1 100%; margin:0; padding:0; } .form_filter .date { width:clamp(16.25rem,100%,16.25rem); min-width:16.25rem; } .form_filter .sorting { flex:1 100%; display:flex; column-gap:.25rem; margin-top:-.125rem; } .form_filter .sorting .btn { flex:1; max-width:4rem; min-width:unset; min-height:1.75rem; padding:0 .5rem; font-size:.75rem; font-weight:500; white-space:nowrap; } .form_filter .button_wrap { flex-wrap:nowrap; margin-top:1rem; } .form_filter .button_wrap .btn { margin:0; } .form_filter .more_wrap { width:calc(100% + 2.5rem); margin:1rem -1.25rem -1.25rem; border-top:1px solid var(--black-12); } .form_filter .more_wrap button { display:flex; align-items:center; justify-content:center; column-gap:.125rem; width:100%; height:2.75rem; font-size:.8125rem; font-weight:500; color:var(--black-75); } .form_filter .more_wrap svg { width:1.125rem; height:1.125rem; } .form_filter .more_wrap.short svg { transform:scaleY(-1); } .form_filter .progress_bar_wrap { position:absolute; left:1.25rem; right:1.25rem; bottom:.75rem; height:.25rem; background:var(--black-10); } .form_filter .progress_bar { position:absolute; top:0; left:0; bottom:0; background:var(--charcoal); } .form_filter .progress_text { display:none; } /*-------------------------------------- tabulator --------------------------------------*/ .tabulator_container { display:flex; flex-direction:column; box-shadow:none; } .tabulator_container::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:inherit; border:1px solid var(--black-10); pointer-events:none; } .form_filter ~ .tabulator_container { margin-top:1.25rem; } /* Tabulator - sorting_wrap */ .tabulator_sorting_wrap { padding-bottom:1.25rem; } .tabulator_sorting_wrap:not(:has(.button_wrap)) { padding:0; } .tabulator_sorting_wrap + .tabulator_wrap { padding-top:3.5rem; } .tabulator_sorting_wrap .rows_per_page { position:absolute; top:1.25rem; right:1.25rem; } /* Tabulator - summary_wrap */ .tabulator_summary_wrap { order:-1; display:flex; flex-direction:column; row-gap:.375rem; padding-bottom:1.25rem; } .tabulator_summary_wrap .input_wrap { flex-wrap:nowrap; align-items:center; padding:0 .5rem 0 1rem; border-radius:.25rem; box-shadow:var(--bs-b1-black-a05); background:var(--black-05); } .tabulator_summary_wrap .input_wrap label { flex-shrink:0; margin:0; } .tabulator_summary_wrap .input_wrap input:not([type="button"]) { height:2.5rem; padding:0 .5rem; background:none; font-size:.9375rem; font-weight:500; letter-spacing:-.025em; text-align:right; color:var(--black); cursor:auto; } .tabulator_summary_wrap .input_wrap.blue { box-shadow:var(--bs-b1-blue-a12); background:var(--blue-a10); } .tabulator_summary_wrap .input_wrap.red { box-shadow:var(--bs-b1-red-a12); background:var(--red-a10); } .tabulator_summary_wrap .input_wrap.green { box-shadow:var(--bs-b1-green-a12); background:var(--green-a12); } .tabulator_summary_wrap .btn_more { margin:0 -.375rem 0 -.625rem; padding:.625rem .5625rem .5rem .5625rem; } .tabulator_summary_wrap .btn_more.active { transform:scaleY(-1); padding:.5rem .5625rem .625rem .5625rem; } .tabulator_summary_wrap .btn_more svg { width:1.375rem; height:1.375rem; } .tabulator_summary_wrap .tabulator_total_cnt_wrap { order:-1; padding:.375rem 0; } .tabulator_summary_wrap .tabulator_total_cnt_wrap input:not([type="button"]) { padding:0; box-shadow:none!important; background:none; font-size:1.0625rem; font-weight:700; } .tabulator_summary_wrap .tabulator_title { order:-1; padding:.375rem 0; box-shadow:none!important; background:none; font-size:1.0625rem; font-weight:700; } /* Tabulator - header */ .tabulator_wrap { width:calc(100% + 2.5rem); margin-left:-1.25rem; margin-right:-1.25rem; } .tabulator { border:none; } .tabulator .tabulator-header { border-color:var(--black-12); font-weight:600; } .tabulator .tabulator-header .tabulator-headers { margin-bottom:-1px; } .tabulator .tabulator-header .tabulator-headers .tabulator-col .tabulator-col-content { padding-left:.5rem; padding-right:.5rem; border-bottom:1px solid var(--black-12); } .tabulator .tabulator-header .tabulator-headers .tabulator-col .tabulator-col-title { text-align:center!important; } .tabulator .tabulator-header .tabulator-frozen-rows-holder { min-width:unset; font-weight:400; } .tabulator .tabulator-header .tabulator-frozen-rows-holder .tabulator-row { border-top-width:1px; border-bottom-width:0; } /* Tabulator - body(tableholder) */ .tabulator .tabulator-tableHolder { height:auto!important; overflow:hidden; } .tabulator .tabulator-tableHolder .tabulator-table { width:100%; } .tabulator .tabulator-tableHolder .tabulator-row, .tabulator .tabulator-header .tabulator-row { border-color:var(--black-12); line-height:1.75rem; overflow:hidden; } .tabulator .tabulator-tableHolder .tabulator-row.tabulator-row-odd, .tabulator .tabulator-tableHolder .tabulator-row.tabulator-row-odd:hover, .tabulator .tabulator-header .tabulator-row.tabulator-row-odd, .tabulator .tabulator-header .tabulator-row.tabulator-row-odd:hover { background:white; } .tabulator .tabulator-tableHolder .tabulator-row.tabulator-row-even, .tabulator .tabulator-tableHolder .tabulator-row.tabulator-row-even:hover, .tabulator .tabulator-header .tabulator-row.tabulator-row-even, .tabulator .tabulator-header .tabulator-row.tabulator-row-even:hover { background:var(--background); } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-cell, .tabulator .tabulator-header .tabulator-row .tabulator-cell { justify-content:center!important; padding-left:.5rem; padding-right:.5rem; font-weight:400; white-space:nowrap; text-overflow:ellipsis; text-align:center!important; vertical-align:middle; overflow:hidden; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-cell .btn, .tabulator .tabulator-header .tabulator-row .tabulator-cell .btn { padding:0 .5rem; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle, .tabulator .tabulator-header .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle { position:absolute; top:0; left:0; width:100%; height:100%; margin:0; border-radius:0; background:none; opacity:1; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-open, .tabulator .tabulator-tableHolder .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close, .tabulator .tabulator-header .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-open, .tabulator .tabulator-header .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close { position:absolute; top:0; left:.5rem; width:100%; height:100%; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") no-repeat center 60% / 1.375rem; font-size:0; cursor:pointer; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close, .tabulator .tabulator-header .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle .tabulator-responsive-collapse-toggle-close { transform:scaleY(-1); background-position:center 40%; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse, .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse { padding:.25rem 1.25rem .75rem 3rem; border:none; background:none; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse table, .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse table { table-layout:fixed; width:100%; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse tr, .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse tr { display:flex; } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse tr:not(:first-child), .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse tr:not(:first-child) { border-top:1px dotted var(--black-12); } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse th, .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse td, .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse th, .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse td { display:inline-flex; align-items:center; padding:.375rem .5rem; font-size:.8125rem; color:var(--black-60); } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse td:last-child, .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse td:last-child { flex-grow:1; justify-content:flex-end; white-space:normal; text-align:right; color:var(--black); } .tabulator .tabulator-tableHolder .tabulator-row .tabulator-responsive-collapse td strong, .tabulator .tabulator-header .tabulator-row .tabulator-responsive-collapse td strong { font-weight:inherit; } .tabulator .tabulator-tableHolder .tabulator-placeholder, .tabulator .tabulator-header .tabulator-placeholder { width:100%!important; padding:1rem 0 1.5rem; } .tabulator .tabulator-tableHolder .tabulator-placeholder span, .tabulator .tabulator-header .tabulator-placeholder span { padding:0; color:var(--black-50); } .tabulator .tabulator-tableHolder .tabulator-placeholder span::before, .tabulator .tabulator-header .tabulator-placeholder span::before { content:""; display:block; width:7.5rem; height:7.5rem; margin:0 auto .5rem; background:url(/img/icon/svg_empty_search.svg) no-repeat center / cover; } /* Tabulator - footer */ .tabulator .tabulator-footer { display:flex; align-items:center; justify-content:center; margin:0; padding:1rem 0 .5rem; } .tabulator .tabulator-footer .tabulator-paginator { display:inline-flex; align-items:center; justify-content:center; margin:0; text-align:center; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-page { flex:1; display:inline-block; min-width:2.25rem; margin:0; padding:0; border:none; border-radius:.1875rem; box-shadow:none; background:white; font-size:.8125rem; font-weight:500; line-height:2.25rem; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:hover { background-color:white; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-page:focus { box-shadow:none; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[disabled] { cursor:auto; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="first"], .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="last"] { display:inline-block; background-size:60%; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="prev"], .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="next"] { background-size:55%; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages { display:flex!important; align-items:center; justify-content:center; column-gap:.3125rem; margin:0 .375rem; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page { display:none; padding:0 .375rem; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page.active { display:inline-block; background:white; color:var(--black); } .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages:not(:has(.tabulator-page))::before { content:"1"; display:flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; font-size:.8125rem; font-weight:500; color:var(--black); opacity:.3; pointer-events:none; } .tabulator .tabulator-footer .tabulator-paginator:has(.tabulator-page[data-page="prev"][disabled]):has(.tabulator-page[data-page="next"][disabled]) .tabulator-page.active { box-shadow:none; background:none; color:var(--black); opacity:.3; pointer-events:none; } /*-------------------------------------- litepicker --------------------------------------*/ .datepicker { cursor:pointer; } .litepicker { position:fixed!important; top:0!important; left:0!important; right:0!important; bottom:0!important; width:auto; margin:0; border-radius:0; box-shadow:none; font-family:"Noto Sans KR", sans-serif; overflow-y:auto; overscroll-behavior:contain; } .litepicker::before, .litepicker::after { display:none; } .litepicker .container__main { min-height:calc(100dvh - 5rem); } .litepicker .container__months { width:100%!important; padding:4.75rem 0 1rem; box-shadow:none; } .litepicker .container__months::before { content:"날짜 선택"; display:flex; align-items:center; justify-content:center; position:fixed; top:0; left:0; right:0; height:3.75rem; padding:0 1rem; border-bottom:1px solid var(--black-15); background:white; font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:var(--black); z-index:1; } .litepicker .container__months .month-item { flex:1 100%; padding:0 1rem 1.5rem; } .litepicker .container__months .month-item-header { padding:0; } .litepicker .container__months .month-item-header div { display:flex; justify-content:center; } .litepicker .container__months .month-item-header div > .month-item-name, .litepicker .container__months .month-item-header div > .month-item-year { width:auto; margin:0; height:2.5rem; padding:0 1.625rem 0 .5rem; border-radius:0; box-shadow:none; background-position:right top .75rem; background-size:1.25rem; font-size:1.125rem; font-weight:600; text-align:left; direction:rtl; cursor:pointer; } .litepicker .container__months .month-item-header div > .month-item-name { order:1; } .litepicker .container__months .month-item .button-previous-month, .litepicker .container__months .month-item .button-next-month { flex-shrink:0; position:relative; width:2.5rem; height:2.5rem; padding:0; opacity:1; visibility:visible; cursor:pointer; } .litepicker .container__months .month-item .button-previous-month:hover, .litepicker .container__months .month-item .button-next-month:hover { background:none; } .litepicker .container__months .month-item .button-previous-month::before, .litepicker .container__months .month-item .button-next-month::before { content:""; position:absolute; top:50%; left:50%; transform:translate(-70%,-50%) rotate(45deg) scale(.8); width:35%; height:35%; border-top:.125rem solid var(--black); border-right:.125rem solid var(--black); } .litepicker .container__months .month-item .button-previous-month *, .litepicker .container__months .month-item .button-next-month * { display:none!important; } .litepicker .container__months .month-item .button-previous-month { transform:scaleX(-1); } .litepicker .container__months .month-item-weekdays-row { align-items:center; justify-content:center; width:100%; margin:0; padding:.5rem 0 .25rem; border-bottom:1px solid var(--black-12); color:var(--black-60); } .litepicker .container__months .month-item-weekdays-row > div { width:auto; font-size:.8125rem; } .litepicker .container__months .month-item-weekdays-row > div[title="일요일"] { color:var(--red); } .litepicker .container__days { row-gap:.375rem; width:100%; padding:.375rem 0; } .litepicker .container__days > div, .litepicker .container__days > a { flex:0 0 14.285%; position:relative; width:auto; padding:.75rem 0; font-size:.875rem; line-height:1.25rem; letter-spacing:-.025em; } .litepicker .container__days > div:nth-child(7n) { border-top-right-radius:.1875rem!important; border-bottom-right-radius:.1875rem!important; } .litepicker .container__days > div:nth-child(7n+1) { border-top-left-radius:.1875rem!important; border-bottom-left-radius:.1875rem!important; } .litepicker .container__days > div:nth-child(7n-6), .litepicker .container__days > div:nth-child(7n-6):hover, .litepicker .container__days > div:nth-child(7n-6).is-today:not(.is-start-date):not(.is-end-date), .litepicker .container__days > div:nth-child(7n-6).is-today:not(.is-start-date):not(.is-end-date):hover, .litepicker .container__days > div:nth-child(7n-6).is-today:not(.is-start-date):not(.is-end-date)::after, .litepicker .container__days > a:nth-child(7n-6), .litepicker .container__days > a:nth-child(7n-6):hover { color:var(--red); } .litepicker .container__days .day-item, .litepicker .container__days .day-item:hover { transition:none; box-shadow:none; background:none; font-weight:400; color:var(--black); cursor:pointer; } .litepicker .container__days .day-item.is-today, .litepicker .container__days .day-item.is-today:hover { font-weight:400; color:var(--black); } .litepicker .container__days .day-item.is-today::after { content:"오늘"; position:absolute; left:0; right:0; bottom:0; font-size:.625rem; font-weight:500; line-height:1rem; text-align:center; color:var(--secondary-d1); } .litepicker .container__days .day-item.is-in-range, .litepicker .container__days .day-item.is-in-range:hover { background:var(--secondary-a08); } .litepicker .container__days .day-item.is-start-date, .litepicker .container__days .day-item.is-start-date:hover, .litepicker .container__days .day-item.is-end-date, .litepicker .container__days .day-item.is-end-date:hover { background:var(--secondary); font-weight:700; color:white; } .litepicker .container__days .day-item.is-start-date::after, .litepicker .container__days .day-item.is-end-date::after { color:white; } .litepicker .container__days .day-item.is-start-date { border-radius:.1875rem 0 0 .1875rem!important; } .litepicker .container__days .day-item.is-end-date { border-radius:0 .1875rem .1875rem 0!important; } .litepicker .container__footer { display:flex; flex-direction:row; align-items:center; justify-content:center; column-gap:.375rem; position:sticky; bottom:0; height:5rem; padding:0 1rem; border-radius:0; border-top:1px solid var(--black-15); box-shadow:none; background:white; text-align:center; z-index:1; } .litepicker .container__footer .preview-date-range { position:fixed; top:1rem; margin:0; background:white; font-size:1.0625rem; font-weight:600; line-height:1.75rem; letter-spacing:-.02em; color:var(--black); } .litepicker .container__footer [class^="button"] { flex:1; transition:.2s; min-height:3rem; margin:0; padding:0 1rem!important; border-radius:.25rem; border:none; font-size:.875rem; font-weight:600; } .litepicker .container__footer .button-cancel { background:var(--black-12); color:var(--black-75); } .litepicker .container__footer .button-apply { flex-grow:2; box-shadow:var(--bs-b1-black-a10); background:var(--secondary); color:white; } .litepicker .container__tooltip { display:none; } /*-------------------------------------- 모달(기본) --------------------------------------*/ /* 모달(기본) */ .modal { position:fixed; top:0; left:0; right:0; bottom:0; transition:opacity .2s, visibility .2s; width:100%; height:100%; margin:0; background:rgba(0,0,0,.5); opacity:0; visibility:hidden; overflow-y:auto; overscroll-behavior:contain; z-index:100000; } .modal .overlay { background:none; } .modal .modal-dialog { position:relative; top:100dvh; transition:top .3s; width:100%; max-width:33.75rem; margin:0 auto; background:white; } .modal .modal-content { display:flex; flex-direction:column; min-height:100dvh; border-radius:0; box-shadow:none; } .modal .modal-header { flex-shrink:0; position:sticky; top:0; height:3.75rem; padding:0 1rem; border-bottom:1px solid var(--black-15); background:white; z-index:2; } .modal .modal-header h2 { margin-right:auto; font-size:1.0625rem; font-weight:600; letter-spacing:-.02em; color:var(--black); } .modal .modal-header .btn { margin-left:.375rem; } .modal .modal-header .btn-close, .tooltip_head .tooltip_close { flex-shrink:0; position:relative; width:2.5rem; height:2.5rem; margin-right:-.5rem; padding:0; border:none; background:none; } .modal .modal-header .btn-close *, .tooltip_head .tooltip_close * { display:none; } .modal .modal-header .btn-close::before, .modal .modal-header .btn-close::after, .tooltip_head .tooltip_close::before, .tooltip_head .tooltip_close::after { content:""; position:absolute; top:50%; left:50%; width:55%; border-top:.125rem solid var(--black); } .modal .modal-header .btn-close::before, .tooltip_head .tooltip_close::before { transform:translate(-50%,-50%) rotate(45deg); } .modal .modal-header .btn-close::after, .tooltip_head .tooltip_close::after { transform:translate(-50%,-50%) rotate(-45deg); } .modal .modal-body { display:block; position:relative; padding:1.5rem 1rem; } .modal .modal-body .overflow-x-auto { width:calc(100% + 2rem); margin-left:-1rem; margin-right:-1rem; } .modal .modal-body .panel_wrap { display:flex; flex-direction:column; row-gap:1.75rem; } .modal .modal-body > strong, .modal .modal-body .panel > strong, .tooltip_body > strong, .tooltip_body .panel > strong { display:block; margin:1rem 0; font-size:1rem; font-weight:600; color:var(--black); } .modal .modal-body > h2, .modal .modal-body .panel > h2, .tooltip_body > h2, .tooltip_body .panel > h2 { margin:.25rem 0 .5rem; font-size:.9375rem; font-weight:400; color:var(--black); } .modal .modal-body > p, .modal .modal-body .panel > p, .tooltip_body > p, .tooltip_body .panel > p { margin:.25rem 0; font-size:.875rem; font-weight:400; word-break:keep-all; color:var(--black); } .modal .modal-body table, .tooltip_body table { position:relative; width:100%; letter-spacing:-.02em; border-spacing:0; table-layout:fixed; } .modal .modal-body table::before, .tooltip_body table::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-top:1px solid var(--black); border-bottom:1px solid var(--black); z-index:1; pointer-events:none; } .modal .modal-body tbody, .tooltip_body tbody { text-align:left; } .modal .modal-body th, .modal .modal-body td, .tooltip_body th, .tooltip_body td { padding:.875rem .625rem; border-bottom:1px solid var(--black-20); font-size:.875rem; font-weight:1.3; vertical-align:top; } .modal .modal-body th:not(:last-child), .modal .modal-body td:not(:last-child), .tooltip_body th:not(:last-child), .tooltip_body td:not(:last-child) { border-right:1px solid var(--black-20); } .modal .modal-body th, .tooltip_body th { background:var(--black-05); font-weight:700; } .modal .modal-body td, .tooltip_body td { font-weight:400; } .modal .modal-body .th_l th, .tooltip_body .th_l th, .modal .modal-body .td_l td, .tooltip_body .td_l td { text-align:left; } .modal .modal-body .th_c th, .tooltip_body .th_c th, .modal .modal-body .td_c td, .tooltip_body .td_c td { text-align:center; } .modal .modal-body .th_r th, .tooltip_body .th_r th, .modal .modal-body .td_r td, .tooltip_body .td_r td { text-align:right; } .modal .modal-body .tabulator .tabulator-tableHolder { overflow:auto; } .modal .modal-body .tabulator .tabulator-tableHolder .tabulator-table { width:auto; } .modal .modal-footer { flex-shrink:0; display:flex; align-items:center; justify-content:center; column-gap:.375rem; position:relative; margin-top:auto; padding:1rem; border:none; background:white; text-align:unset; } .modal .modal-footer button, .modal .modal-footer .btn { flex:1; min-height:3rem; border-radius:.25rem; } .modal .modal-footer .btn-cancel ~ .btn, .modal .modal-footer .btn-close ~ .btn { flex-grow:2; } /* 모달(기본) - size_large(1600px) & size_medium(1200px) & size_default(540px) & size_small(360px) / modal 클래스에 직접 적용 */ .size_large .modal-dialog { max-width:100rem; } .size_medium .modal-dialog { max-width:75rem; } .size_default .modal-dialog { max-width:33.75rem; } .size_small .modal-dialog { max-width:22.5rem; } /* 모달(기본) - show */ .show_modal { opacity:1; visibility:visible; } .show_modal .modal-dialog { top:0; } /*-------------------------------------- 모달(공지사항/게시글) --------------------------------------*/ .modal[class*="board"] .board-title-box { letter-spacing:-.02em; color:var(--black); } .modal[class*="board"] .board-title-box h4 { margin-bottom:1.25rem; font-size:1.3125rem; font-weight:600; line-height:1.2; } .modal[class*="board"] .board-title-box .board-notice-desc { font-size:.9375rem; line-height:1.5; } .modal[class*="board"] img#preview { width:100%; margin:1.25rem 0; } /*-------------------------------------- 모달(알림/확인) --------------------------------------*/ .modal[class*="alert"], .modal[class*="confirm"] { z-index:100001; } .modal[class*="alert"] .modal-dialog, .modal[class*="confirm"] .modal-dialog { top:50%; transform:translateY(-50%); width:80%; max-width:18.75rem; border-radius:.625rem; overflow:hidden; } .modal[class*="alert"] .modal-content, .modal[class*="confirm"] .modal-content { min-height:unset; } .modal[class*="alert"] .modal-body, .modal[class*="confirm"] .modal-body { min-height:6.25rem; padding:1.5rem; } .modal[class*="alert"] .modal-footer, .modal[class*="confirm"] .modal-footer { column-gap:0; padding:0; border-top:1px solid var(--black-15); } .modal[class*="alert"] .modal-footer button, .modal[class*="alert"] .modal-footer .btn, .modal[class*="confirm"] .modal-footer button, .modal[class*="confirm"] .modal-footer .btn { border-radius:0; box-shadow:none; background:none; color:var(--black); } .modal[class*="alert"] .modal-footer button + button, .modal[class*="alert"] .modal-footer .btn + .btn, .modal[class*="confirm"] .modal-footer button + button, .modal[class*="confirm"] .modal-footer .btn + .btn { border-left:1px solid var(--black-15); } /*-------------------------------------- 모달(메인) --------------------------------------*/ /* 모달(메인) */ .type_main .modal-dialog { padding-top:1rem; border-radius:1rem 1rem 0 0; overflow:unset; } .type_main .modal-content { min-height:unset; } .type_main .modal-header::before { content:""; position:absolute; top:0; left:50%; transform:translate(-50%,-100%); width:2rem; height:.25rem; border-radius:.25rem; background:var(--black-20); } .type_main .modal-body { min-height:11.5rem; padding:0 1rem; } .type_main .modal-body .swiper-container { width:calc(100% + 2rem); margin:0 -1rem; } .type_main .modal-body .board-title-box { padding:1.5rem 1rem; } .type_main .modal-body .board-title-box h4 { margin:0; font-size:1.25rem; font-weight:600; line-height:1.25; letter-spacing:-.04em; word-break:keep-all; color:var(--black); } .type_main .modal-footer { position:sticky; bottom:0; min-height:3.75rem; padding:.5rem; border-top:1px solid var(--black-15); z-index:2; } .type_main .modal-footer input[type="checkbox"] + label { margin:0 auto 0 0; padding:0 .25rem; font-size:.875rem; font-weight:500; line-height:2.5rem; color:var(--black-75); } .type_main .modal-footer input[type="checkbox"] + label::before, .type_main .modal-footer input[type="checkbox"] + label::after { display:none; } .type_main .modal-footer button, .type_main .modal-footer .btn { flex:0 auto; min-height:2.5rem; border-radius:0; box-shadow:none; } /* 모달(메인) - show */ .type_main.show_modal .modal-dialog { top:calc(100dvh - 20rem); } /*-------------------------------------- 모달(영수증) --------------------------------------*/ .type_receipt .title_wrap .title { flex-shrink:0; font-size:1.5rem; font-weight:800; line-height:1.2; } .type_receipt .modal-body { letter-spacing:-.02em; } .type_receipt .receipt_wrap .status_mark { display:inline-flex; align-items:center; justify-content:center; position:absolute; top:0; left:50%; transform:rotate(-15deg) translate(0,50%); width:11.25rem; padding:.5rem 0 1rem; background:var(--black-a08); font-size:4rem; font-weight:600; font-style:normal; line-height:4rem; white-space:nowrap; color:white; } .type_receipt .receipt_wrap .status_mark.cancel { background:var(--red-a15); filter:grayscale(.4); } .type_receipt .receipt_wrap ul { position:relative; padding:.75rem 0; } .type_receipt .receipt_wrap li { display:flex; column-gap:1.5rem; } .type_receipt .receipt_wrap dl { flex:1 50%; display:flex; column-gap:1.25rem; padding:.25rem 0; font-size:.8125rem; line-height:1.1875rem; letter-spacing:-.04em; } .type_receipt .receipt_wrap dt { flex-shrink:0; color:var(--black-50); } .type_receipt .receipt_wrap dt:first-child:last-child { flex:1; position:relative; margin:-.75rem 0 .25rem; padding:.75rem 0; font-size:1rem; font-weight:700; color:var(--black); } .type_receipt .receipt_wrap dt:first-child:last-child::after { content:""; position:absolute; left:0; right:0; bottom:0; border-bottom:.125rem solid var(--black); } .type_receipt .receipt_wrap dd { margin-left:auto; font-weight:500; text-align:right; word-break:keep-all; } .type_receipt .info_wrap { padding:.75rem 0; } .type_receipt .info_wrap .info_box { padding:.75rem 1rem; border-radius:.375rem; background:var(--black-05); } .type_receipt .info_wrap .info_box p { font-size:.75rem; line-height:1.125rem; color:var(--black-75); } .type_receipt .info_wrap .info_box p + p { margin-top:.375rem; } .type_receipt .info_wrap .copyright { margin-top:1rem; font-size:.8125rem; font-weight:500; text-align:center; color:var(--black-75); } .type_receipt .button_wrap { padding-top:1rem; } /*-------------------------------------- 모달(PG 연동) --------------------------------------*/ .type_api .input_wrap { row-gap:1rem; padding-bottom:1.5rem; } .type_api .title_wrap { column-gap:.5rem; width:calc(100% + 2.5rem); margin:-1.25rem -1.25rem 0; padding:1rem 1.25rem; border-bottom:1px solid var(--black-10); } .type_api .title_wrap .thumb { width:2.125rem; height:2.125rem; border-radius:.375rem; } .type_api .title_wrap .btn { min-width:3.25rem; min-height:1.875rem; margin-left:auto; padding:0 .625rem; font-size:.8125rem; color:white; } .type_api .input_box label:first-child { display:flex; align-items:center; justify-content:space-between; } .type_api .input_box .btn-switch:not(.active) { color:var(--black-50); } .type_api .input_box .hide-vd-text:not(.active) { display:none; } .type_api .unUsed_info { filter:grayscale(1); opacity:.6; } .type_api .unUsed_info::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:inherit; background:var(--black-a05); } .type_api .input_wrap:not(.unUsed_info) { box-shadow:var(--bs-b1-black-40); } .type_api .input_wrap:not(.unUsed_info) .title_wrap { border-color:var(--black-40); } /*-------------------------------------- 툴팁(기본) --------------------------------------*/ .tooltip_open:not(.btn) { display:inline-flex; align-items:center; justify-content:center; width:1.25rem; height:1.25rem; margin-left:.125rem; border-radius:50%; box-shadow:var(--bs-b1-black-40); background:var(--black-05); font-size:.8125rem; font-weight:600; color:var(--black-50); cursor:pointer; } .tooltip_open:not(.btn)::before { content:"?"; } .tooltip_modal { position:fixed; top:0; left:0; right:0; bottom:0; transition:opacity .2s,visibility .2s; opacity:0; visibility:hidden; z-index:100001; } .tooltip_modal .overlay { background:rgba(0,0,0,.5); } .tooltip_modal .tooltip_dialog { position:relative; top:50%; transform:translateY(-50%); width:80%; max-width:21.25rem; margin:0 auto; border-radius:.625rem; background:white; overflow:hidden; } .tooltip_modal .tooltip_head { flex-shrink:0; display:flex; padding:1.25rem; } .tooltip_modal .tooltip_head h2 { margin-right:auto; font-size:1rem; font-weight:600; line-height:1.25rem; } .tooltip_modal .tooltip_head .tooltip_close { display:none; top:-1px; width:2rem; height:2rem; } .tooltip_modal .tooltip_head + .tooltip_body { padding-top:0; } .tooltip_modal .tooltip_body { height:100%; min-height:6.25rem; max-height:18.75rem; padding:1.25rem; overflow-y:auto; overscroll-behavior:contain; } .tooltip_modal .tooltip_body img { margin-bottom:.625rem; } .tooltip_modal .tooltip_body .input_wrap { padding:.5rem 0 1rem; } .tooltip_modal .tooltip_foot { flex-shrink:0; display:flex; align-items:center; justify-content:center; column-gap:.375rem; padding:0 .5rem; border-top:1px solid var(--black-15); } .tooltip_modal .tooltip_foot .btn { flex:1; min-height:3rem; border-radius:0; box-shadow:none; background:none; font-size:.9375rem; color:var(--black); } .tooltip_modal .tooltip_foot .btn + .btn { border-left:1px solid var(--black-15); } .tooltip_modal .tooltip_foot .btn-cancel + .btn, .tooltip_modal .tooltip_foot .btn-close + .btn { color:var(--secondary-d1); } /* 툴팁 - active */ .tooltip_open.active + .tooltip_modal { opacity:1; visibility:visible; } /* tooltip size full - .tooltip_modal에 적용 */ .size_full .tooltip_dialog { display:flex; flex-direction:column; top:0; transform:none; width:100%; max-width:unset; height:100dvh; border-radius:0; } .size_full .tooltip_head { align-items:center; position:sticky; top:0; height:3.75rem; padding:0 1rem; border-bottom:1px solid var(--black-15); background:white; z-index:2; } .size_full .tooltip_head h2 { font-size:1.0625rem; letter-spacing:-.02em; } .size_full .tooltip_head .tooltip_close { display:block; top:0; width:2.5rem; height:2.5rem; } .size_full .tooltip_body { position:relative; min-height:unset; max-height:unset; padding:1.5rem 1rem; } .size_full .tooltip_foot { position:sticky; bottom:0; height:3.75rem; margin-top:auto; border-top:1px solid var(--black-a15); background:white; z-index:2; } .size_full .tooltip_foot .btn { height:100%; } /*-------------------------------------- 토스트 UI 커스텀 --------------------------------------*/ /* 토스트 - container */ #toast-container { display:flex; flex-direction:column; align-items:center; row-gap:.5rem; } #toast-container > div { width:100%; max-width:27.5rem; margin:0; padding:1.25rem 3.375rem; border-radius:.625rem; box-shadow:none; background-color:var(--black-a60); background-position:1.25rem center; background-size:1.375rem; color:white; backdrop-filter:blur(.5rem); opacity:1; } #toast-container > div:hover { box-shadow:none; } /* 토스트 - position */ .toast-top-left, .toast-top-center, .toast-top-full-width, .toast-top-right, .toast-bottom-left, .toast-bottom-center, .toast-bottom-full-width, .toast-bottom-right { top:unset; left:0; right:0; bottom:0; padding:0 1rem 2.5rem; } /* 토스트 - contents */ .toast-title { font-size:.9375rem; font-weight:600; } .toast-title + .toast-message { margin-top:.125rem; } .toast-message { font-size:.875rem; font-weight:400; } .toast-close-button, button.toast-close-button { float:unset; position:absolute; top:.6875rem!important; left:unset; right:.6875rem!important; transform:none; width:2.5rem; height:2.5rem; font-size:0; opacity:1; } .toast-close-button, button.toast-close-button::before, .toast-close-button, button.toast-close-button::after { content:""; position:absolute; top:50%; left:50%; width:50%; border-top:.125rem solid white; } .toast-close-button, button.toast-close-button::before { transform:translate(-50%,-50%) rotate(45deg) scale(.9); } .toast-close-button, button.toast-close-button::after { transform:translate(-50%,-50%) rotate(-45deg) scale(.9); } .toast-close-button:focus, button.toast-close-button:focus, .toast-close-button:hover, button.toast-close-button:hover { opacity:1; } /* 토스트 - type */ .toast, .toast-success, .toast-info, .toast-warning, .toast-error { background-color:#030303; } #toast-container > .toast-success { background-image:url(../img/icon/toast_success.svg)!important; } #toast-container > .toast-info { background-image:url(../img/icon/toast_info.svg)!important; } #toast-container > .toast-warning { background-image:url(../img/icon/toast_warning.svg)!important; } #toast-container > .toast-error { background-image:url(../img/icon/toast_error.svg)!important; } /* 토스트 - progress */ .toast-progress { bottom:.4375rem; padding:0 1.25rem; background-color:white; background-clip:content-box; } /*====================================== 로그인 페이지 ======================================*/ .login { padding:0; background:unset; overflow:unset; } .login_wrap { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; min-height:100dvh; background:url(/img/bg_login.jpg) no-repeat center / cover; } .login_form { flex:1 100%; max-width:25.5rem; margin:auto 1.5rem 0; padding:2rem 1.5rem; border-radius:.875rem; border:1px solid white; box-shadow:inset 0 0 0 .125rem white,0 0 .125rem var(--black-a05),0 .25rem 1.25rem var(--black-a05); overflow:hidden; z-index:1; } .login_form::before { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:inherit; border:1px solid white; background:var(--white-a20); backdrop-filter:blur(.25rem); z-index:-1; } .login_form .title { flex:1; margin-bottom:1.25rem; } .login_form .logo { display:block; width:8rem; margin:0 0 .75rem -.3125rem; } .login_form h2 { display:block; margin-bottom:1rem; font-size:1.375rem; font-weight:700; line-height:1.25; letter-spacing:-.025em; } .login_form p { font-size:.875rem; font-weight:500; letter-spacing:-.03em; color:var(--black-60); } .login_form .input_box { row-gap:.625rem; } .login_form .type_check { margin-top:-.25rem; } .login_form .type_check label { margin:0 auto 0 0; } .login_form .type_check .terms { font-size:.875rem; font-weight:500; line-height:1.375rem; color:var(--black-75); } .login_form .button_wrap .btn { min-height:3.25rem; font-size:.9375rem; } .login_wrap .copyright { flex:1 100%; margin-top:auto; padding:1.5rem 0; font-size:.75rem; letter-spacing:-.05em; text-align:center; color:var(--black-a50); } /*====================================== 대시보드 페이지 ======================================*/ .dashboard { display:flex; flex-direction:column; row-gap:1.25rem; } .dashboard .box .content_wrap { flex-direction:column-reverse; } /* box - chart */ .dashboard .chart_wrap { width:100%; min-height:12rem; } .dashboard .chart_wrap:has(#myLineChart) { height:16rem; } .dashboard .chart_wrap canvas { width:100%!important; height:100%!important; } /* box - tabulator */ .dashboard .tabulator_container { position:relative; } .dashboard .tabulator_container::after { left:-1.25rem; right:-1.25rem; border-bottom:none; } /* box - notice */ .dashboard .box.notice { order:1; } .dashboard .notice_pagination_wrap { column-gap:.875rem; margin-right:-.25rem; } .dashboard .notice_pagination_wrap button { display:flex; align-items:center; color:var(--black-75); } .dashboard .notice_pagination_wrap button svg { position:relative; bottom:-1px; width:1.25rem; height:1.25rem; margin:0 -.125rem; } .dashboard .notice_pagination_wrap .prev::after { content:"이전"; } .dashboard .notice_pagination_wrap .next::before { content:"다음"; } .dashboard .notice_wrap { margin:-1rem 0; } .dashboard .notice_list { transform:none; padding:1rem 0; box-shadow:none; } .dashboard .notice_list + .notice_list { border-top:1px solid var(--black-10); } .dashboard .notice_list .text-base { width:100%; font-size:.875rem; line-height:1.25rem; } .dashboard .notice_list .text-slate-400 { margin-top:.125rem; font-size:.8125rem; color:var(--black-50); } .dashboard .notice_list .text-slate-500, .dashboard .notice_list img { display:none; } /*======================================================================================================================================= ==================================================== [[ Mobile Large (500px 이상) ]] ==================================================== =======================================================================================================================================*/ @media (min-width:500px) { /*-------------------------------------- input elements --------------------------------------*/ /* input wrap box */ .input_wrap.box { padding:1.5rem; border-radius:.5rem; } .input_wrap.box .title_wrap { width:calc(100% + 3rem); margin:-1.5rem -1.5rem 0; padding:1.125rem 1.5rem; } /* input box */ .input_box { column-gap:.625rem; } .input_box .btn { min-width:5rem; } .input_box .short { flex:0 1 auto!important; min-width:7.75rem; } .input_box .btn.short { min-width:fit-content; } /*-------------------------------------- button elements --------------------------------------*/ .btn { padding:0 1.25rem; } /* button wrap */ .button_wrap { column-gap:.625rem; } /* button size(기본 40px) - large(48px) & small(36px) & tiny(30px) / button 엘리먼트의 상위 태그 또는 button 엘리먼트에 직접 적용 */ .size_small .btn, .size_small.btn { padding:0 1rem; } /*-------------------------------------- wrapper --------------------------------------*/ .content { padding:5rem 1.5rem 1.5rem; } /*-------------------------------------- content_footer --------------------------------------*/ .content_footer { padding:2.5rem 1.5rem; } .content_footer .logo { width:10rem; } /*-------------------------------------- 타이틀 & 텍스트 --------------------------------------*/ .title_wrap { padding:1rem 0 1.5rem; } .title_wrap h2.title { font-size:1.375rem; } .title_wrap h3.title { font-size:1.125rem; } .title_wrap h4.title { font-size:1rem; } /*-------------------------------------- box --------------------------------------*/ .box { padding:1.5rem 1.75rem; } .box .title_wrap { width:calc(100% + 3.5rem); margin:-1.5rem -1.75rem 1.5rem; padding:1.25rem 1.75rem; } .box .content_wrap { row-gap:.75rem; } .box .inner_box li { font-size:.9375rem; } .box .inner_box li:first-child .body .total money { font-size:1.125rem; } .box .inner_box li:not(:first-child) .head { font-size:.875rem; } .box .inner_box .body .total money { top:-1px; font-size:1rem; } /*-------------------------------------- tab list --------------------------------------*/ .tab-list { column-gap:.5rem; } .tab-list .tab-btn button, .tab-list .tab-btn .btn { min-width:4rem; padding:0 1rem; } /*-------------------------------------- 헤더(모바일) --------------------------------------*/ /* 헤더(모바일) - Top 영역 */ .mobile-menu .overlay { z-index:0; } .mobile-menu .mobile-menu-bar { column-gap:.375rem; padding:0 1.5rem; } .mobile-menu .main_logo { height:1.5625rem; } .mobile-menu .header_gnb { column-gap:.375rem; } /* 헤더(모바일) - Top 영역 - active */ .mobile-menu--active .overlay { width:calc(100% - 22.5rem); } /* 헤더(모바일) - Side 영역 */ .mobile-menu .scrollable { width:22.5rem; } .mobile-menu .user_info_wrap { padding:1.5rem 1.5rem .75rem } .mobile-menu .quick_menu_wrap, .mobile-menu .scrollable__content { padding-left:1.5rem; padding-right:1.5rem; } .mobile-menu .menu { padding:0 .25rem; } .mobile-menu .depth_2 { padding-right:.5rem; } /* 헤더(모바일) Floating button 영역 */ .mobile-menu .float_button_wrap { row-gap:.4375rem; padding:0 1.5rem 1.25rem; } .mobile-menu .float_button { width:3.75rem; height:3.75rem; } /*-------------------------------------- form filter --------------------------------------*/ .form_filter .input_box .short + .input_box { margin:0; } .form_filter .sorting { position:absolute; top:0; right:0; margin-top:-.25rem; } .form_filter .sorting .btn { min-width:2.875rem; min-height:1.625rem; } .form_filter .more_wrap { width:calc(100% + 3.5rem); margin:1.5rem -1.75rem -1.5rem; } .form_filter .more_wrap button { height:3.25rem; font-size:.875rem; } .form_filter .more_wrap svg { width:1.25rem; height:1.25rem; margin-bottom:-1px; } .form_filter .more_wrap.short svg { margin-bottom:0; } .form_filter .progress_bar_wrap { left:1.75rem; right:1.75rem; bottom:.9375rem; } /*-------------------------------------- tabulator --------------------------------------*/ /* Tabulator - sorting_wrap */ .tabulator_sorting_wrap + .tabulator_wrap { padding-top:4.125rem; } .tabulator_sorting_wrap .button_wrap .full { flex:2; } .tabulator_sorting_wrap .rows_per_page { top:1.5rem; right:1.75rem; } /* Tabulator - summary_wrap */ .tabulator_summary_wrap .tabulator_total_cnt_wrap { margin-bottom:.625rem; } .tabulator_summary_wrap .tabulator_total_cnt_wrap input:not([type="button"]) { font-size:1.125rem; } .tabulator_summary_wrap .tabulator_title { margin-bottom:.625rem; font-size:1.125rem; } /* Tabulator - header */ .tabulator_wrap { width:calc(100% + 3.5rem); margin-left:-1.75rem; margin-right:-1.75rem; } /* Tabulator - body(tableholder) */ .tabulator .tabulator-tableHolder { overflow:auto; } .tabulator .tabulator-tableHolder .tabulator-table { width:auto; } /* Tabulator - footer */ .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="first"], .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="last"] { margin:0 .25rem; box-shadow:var(--bs-b1-black-15); } .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="prev"], .tabulator .tabulator-footer .tabulator-paginator .tabulator-page[data-page="next"] { margin:0 .25rem; box-shadow:var(--bs-b1-black-15); } .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages { column-gap:.5rem; } .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page { display:block; box-shadow:var(--bs-b1-black-a15); } .tabulator .tabulator-footer .tabulator-paginator .tabulator-pages .tabulator-page.active { background:var(--charcoal); color:white; } /*-------------------------------------- litepicker --------------------------------------*/ .litepicker { top:50%!important; left:50%!important; right:unset!important; bottom:unset!important; transform:translate(-50%,-50%); width:calc(100% - 3rem); max-width:40rem; border-radius:.625rem; box-shadow:0 0 0 500vw rgba(0,0,0,.4); } .litepicker .container__main { min-height:unset; } .litepicker .container__months { flex-wrap:nowrap; } .litepicker .container__months .month-item { width:50%; padding:0 .5rem; } .litepicker .container__months .month-item-header div > .month-item-name, .litepicker .container__months .month-item-header div > .month-item-year { padding-right:1.375rem!important; background-position:right top .8125rem; background-size:1.125rem; font-size:.9375rem; } .litepicker .container__months .month-item .button-previous-month, .litepicker .container__months .month-item .button-next-month { width:2rem; height:2rem; box-shadow:var(--bs-b1-black-40); } .litepicker .container__months:has(.month-item:nth-child(2)) > .month-item:nth-child(1) .button-next-month, .litepicker .container__months:has(.month-item:nth-child(2)) > .month-item:nth-child(2) .button-previous-month { display:none; } .litepicker .container__months .month-item-weekdays-row { position:relative; border:none; } .litepicker .container__months .month-item-weekdays-row::after { content:""; position:absolute; left:-.5rem; right:-.5rem; bottom:0; border-bottom:1px solid var(--black-12); } .litepicker .container__days { row-gap:.1875rem; } .litepicker .container__days > div, .litepicker .container__days > a { padding:.625rem 0; font-size:.8125rem; } .litepicker .container__footer { column-gap:.625rem; height:4.25rem; } .litepicker .container__footer [class^="button"] { flex:0 auto; width:auto!important; min-width:7.5rem; min-height:2.75rem; } /*-------------------------------------- 모달(기본) --------------------------------------*/ /* 모달(기본) */ .modal { overflow-y:unset; overscroll-behavior:unset; } .modal .modal-dialog { top:50%; left:50%; transform:translate(-50%,-50%); transition:none; width:calc(100% - 3rem); margin:0; background:none; } .modal .modal-content { height:100%; min-height:unset; background:none; } .modal .modal-header { height:4rem; padding:0 1.5rem; border-radius:.625rem .625rem 0 0; } .modal .modal-header h2 { font-size:1.125rem; font-weight:700; } .modal .modal-body { height:100%; max-height:31rem; padding:1.5rem; margin:0 0 -1px; background:white; overflow-y:auto; overscroll-behavior:contain; } .modal .modal-body:first-child { border-top-left-radius:.625rem; border-top-right-radius:.625rem; } .modal .modal-body:last-child { border-bottom-left-radius:.625rem; border-bottom-right-radius:.625rem; } .modal .modal-body .overflow-x-auto { width:calc(100% + 3rem); margin-left:-1.5rem; margin-right:-1.5rem; } .modal .modal-footer { column-gap:.625rem; left:0; right:0; bottom:unset; padding:.75rem 1.5rem; border-top:1px solid var(--black-15); border-radius:0 0 .625rem .625rem; } .modal .modal-footer button, .modal .modal-footer .btn { flex:0 auto; min-width:7.5rem; min-height:2.75rem; } .modal .modal-footer .btn-cancel ~ .btn, .modal .modal-footer .btn-close ~ .btn { flex:0 auto; } /*-------------------------------------- 모달(알림/확인) --------------------------------------*/ .modal[class*="alert"] .modal-dialog, .modal[class*="confirm"] .modal-dialog { transform:translate(-50%,-50%); } .modal[class*="alert"] .modal-body, .modal[class*="confirm"] .modal-body { min-height:7.5rem; } .modal[class*="alert"] .modal-footer button, .modal[class*="alert"] .modal-footer .btn, .modal[class*="confirm"] .modal-footer button, .modal[class*="confirm"] .modal-footer .btn { flex:1; min-width:unset; min-height:3rem; font-size:.9375rem; } /*-------------------------------------- 모달(메인) --------------------------------------*/ /* 모달(메인) */ .type_main .modal-dialog { padding:0; border-radius:0; } .type_main .modal-header::before { display:none; } .type_main .modal-body { max-height:calc(100dvh - 18rem); padding:0 1.5rem; } .type_main .modal-body .swiper-container { width:calc(100% + 3rem); margin:0 -1.5rem; } .type_main .modal-body .board-title-box { padding:1.5rem; } .type_main .modal-body .board-title-box h4 { font-size:1.3125rem; line-height:1.2; } .type_main .modal-footer input[type="checkbox"] + label { padding:0 1.25rem; border-radius:.25rem; box-shadow:var(--bs-b1-black-a40); font-weight:600; line-height:2.75rem; color:var(--black); } .type_main .modal-footer button, .type_main .modal-footer .btn { border-radius:.25rem; box-shadow:var(--bs-b1-black-a40); } /* 모달(메인) - show */ .type_main.show_modal .modal-dialog { top:50%; } /*-------------------------------------- 모달(영수증) --------------------------------------*/ .type_receipt .receipt_wrap li { column-gap:2.5rem; } .type_receipt .receipt_wrap li:not(:first-child) { padding-left:1.5rem; } .type_receipt .receipt_wrap dl { column-gap:1.75rem; padding:.3125rem 0; font-size:.875rem; line-height:1.25rem; } .type_receipt .receipt_wrap dt:first-child:last-child { margin:-.875rem 0 .5rem; padding:.875rem 0; font-size:1.125rem; } .type_receipt .info_wrap .info_box { padding:1rem 1.25rem; } .type_receipt .info_wrap .info_box p { font-size:.8125rem; line-height:1.25rem; } .type_receipt .info_wrap .info_box p + p { margin-top:.625rem; } .type_receipt .info_wrap .copyright { font-size:.875rem; } .type_receipt .button_wrap .btn { flex:0 auto; } /*-------------------------------------- 모달(PG 연동) --------------------------------------*/ .type_api .title_wrap .btn { min-width:5rem; min-height:2.25rem; padding:0 1rem; } /*-------------------------------------- 툴팁(기본) --------------------------------------*/ .tooltip_modal .tooltip_dialog { border-radius:.625rem; } .modal .tooltip_modal .overlay { border-radius:.625rem; } /* 툴팁 - active */ /* tooltip size full - .tooltip_modal에 적용 */ .size_full .tooltip_dialog { max-width:33.75rem; height:100%; max-height:38.25rem; } .size_full .tooltip_head { height:4rem; padding:0 1.5rem; } .size_full .tooltip_head h2 { font-size:1.125rem; font-weight:700; } .size_full .tooltip_body { padding:1.5rem; } .size_full .tooltip_foot { height:4.25rem; } .modal .size_full .tooltip_dialog { max-height:100%; } /*-------------------------------------- 토스트 UI 커스텀 --------------------------------------*/ /* 토스트 - container */ #toast-container { row-gap:.625rem; } /* 토스트 - position */ .toast-top-left, .toast-top-center, .toast-top-full-width, .toast-top-right, .toast-bottom-left, .toast-bottom-center, .toast-bottom-full-width, .toast-bottom-right { padding:0 0 2.5rem; } /*====================================== 로그인 페이지 ======================================*/ .login_form { padding:2.5rem 2rem; } .login_form h2 { font-size:1.4375rem; } .login_form p { font-size:.9375rem; } .login_wrap .copyright { font-size:.8125rem; } /*====================================== 대시보드 페이지 ======================================*/ /* box - chart */ .dashboard .chart_wrap:has(#myLineChart) { height:18.75rem; } /* box - tabulator */ .dashboard .tabulator_container::after { left:-1.75rem; right:-1.75rem; } /* box - notice */ .dashboard .notice_pagination_wrap { column-gap:1.25rem; } .dashboard .notice_pagination_wrap button { column-gap:.125rem; height:1.5rem; margin-top:-.25rem; margin-bottom:-.25rem; } .dashboard .notice_list .text-base { font-size:.9375rem; } } /*======================================================================================================================================= ======================================================= [[ Tablet (768px 이상) ]] ======================================================= =======================================================================================================================================*/ @media (min-width:768px) { /*-------------------------------------- input elements --------------------------------------*/ /* input box */ .input_box { column-gap:.625rem; } /* input column_2 */ .input_container.column_2, .input_wrap.column_2 { display:flex; flex-wrap:wrap; column-gap:1.75rem; } .input_container.column_2 > *, .input_wrap.column_2 > * { align-self:flex-start; flex-basis:calc(50% - .875rem)!important; row-gap:1.75rem; } /*-------------------------------------- button elements --------------------------------------*/ /* button size(기본 40px) - large(48px) & small(36px) & tiny(30px) / button 엘리먼트의 상위 태그 또는 button 엘리먼트에 직접 적용 */ .size_small .btn, .size_small.btn { padding:0 1.125rem; } /*-------------------------------------- wrapper --------------------------------------*/ .content { padding:6rem 2rem 2rem } /*-------------------------------------- content_footer --------------------------------------*/ .content_footer { padding:2.5rem 2rem; } .content_footer .inner_wrap { align-items:flex-start; } .content_footer .logo { margin:0 0 .625rem; } .content_footer .contact { font-size:.875rem; } .content_footer .copyright { position:absolute; right:0; bottom:0; margin:0; } /*-------------------------------------- 헤더(모바일) --------------------------------------*/ /* 헤더(모바일) - Top 영역 */ .mobile-menu { display:block; } .mobile-menu .mobile-menu-bar { column-gap:.5rem; height:4.5rem; padding:0 2rem; } .mobile-menu .main_logo { height:1.75rem; } .mobile-menu .header_gnb { column-gap:.5rem; } /* 헤더(모바일) - Top 영역 - active */ .mobile-menu--active .overlay { width:calc(100% - 23.75rem); } /* 헤더(모바일) - Side 영역 */ .mobile-menu .scrollable { top:4.5rem; width:23.75rem; height:calc(100dvh - 4.5rem); } .mobile-menu .user_info_wrap { padding:1.5rem 2rem 1rem; } .mobile-menu .quick_menu_wrap, .mobile-menu .scrollable__content { padding-left:2rem; padding-right:2rem; } .mobile-menu .logout-btn a { height:4rem; font-size:1rem; } .mobile-menu .logout-btn svg { top:0; margin-right:.5rem; width:1.25rem; height:1.25rem; } /* 헤더(모바일) Floating button 영역 */ .mobile-menu .float_button_wrap { padding:0 1.75rem 1.25rem; } /*-------------------------------------- form filter --------------------------------------*/ .form_filter form { display:flex; flex-direction:column; } .form_filter .d_none { display:flex!important; } .form_filter .input_container { column-gap:.625rem; } .form_filter .input_wrap { flex-basis:auto; column-gap:.625rem; } .form_filter .input_box { flex-basis:min-content; } .form_filter .sorting { margin-top:-.125rem; } .form_filter .sorting .btn { align-items:flex-start; min-width:2.375rem; min-height:1.5rem; font-size:.6875rem; line-height:1.375rem; letter-spacing:-.05em; } .form_filter .more_wrap { display:none; } .form_filter .progress_bar_wrap { bottom:.875rem; } /*-------------------------------------- tabulator --------------------------------------*/ .tabulator_container { width:100%; max-width:calc(100vw - 4rem); } /* Tabulator - sorting_wrap */ .tabulator_sorting_wrap { display:flex; align-items:center; column-gap:1.25rem; position:absolute; top:1.5rem; right:1.75rem; } .tabulator_sorting_wrap .button_wrap .btn { min-width:fit-content; } .tabulator_sorting_wrap .rows_per_page { position:static; } .tabulator_sorting_wrap .rows_per_page select { min-width:7.5rem; } /* Tabulator - summary_wrap */ .tabulator_summary_wrap { flex-direction:row; flex-wrap:wrap; column-gap:.625rem; } .tabulator_summary_wrap .input_wrap { flex:0 1 auto; } .tabulator_summary_wrap .input_wrap label { font-size:.8125rem; } .tabulator_summary_wrap .input_wrap input:not([type="button"]) { max-width:7.5rem; height:2.25rem; font-size:.875rem; } .tabulator_summary_wrap .input_wrap.d_none { display:flex!important; } .tabulator_summary_wrap .btn_more { display:none; } .tabulator_summary_wrap .tabulator_total_cnt_wrap, .tabulator_summary_wrap .tabulator_title { flex:1 100%; } /*-------------------------------------- litepicker --------------------------------------*/ .litepicker .container__months { padding-left:.5rem; padding-right:.5rem; } .litepicker .container__months .month-item { padding:0 1rem; } .litepicker .container__months .month-item-header div > .month-item-name, .litepicker .container__months .month-item-header div > .month-item-year { padding:0 1.5rem 0 .75rem!important; background-position:right top .75rem; background-size:1.1875rem; font-size:1rem; } .litepicker .container__months .month-item .button-previous-month, .litepicker .container__months .month-item .button-next-month { width:2.25rem; height:2.25rem; border-radius:.25rem; } .litepicker .container__months .month-item-weekdays-row::after { left:-1.5rem; right:-1.5rem; } .litepicker .container__months .month-item-weekdays-row > div { font-size:.875rem; } .litepicker .container__days > div, .litepicker .container__days > a { padding:.6875rem; font-size:.875rem; } /*-------------------------------------- 모달(기본) --------------------------------------*/ /* 모달(기본) */ .modal .modal-dialog { width:calc(100% - 4rem); } /*====================================== 로그인 페이지 ======================================*/ .login_form { padding:3.125rem 2.5rem; } .login_form .title { text-align:center; } .login_form .logo { width:8.25rem; margin:0 auto 1rem; } .login_form h2 { font-size:1.5rem; } .login_wrap .copyright { padding-bottom:2.5rem; font-size:.875rem; } /*====================================== 대시보드 페이지 ======================================*/ .dashboard .box .content_wrap { flex-direction:row; column-gap:1.25rem; } .dashboard .box .inner_box { flex:1 50%; } /* box - notice */ .dashboard .notice_wrap { flex:1; } } /*======================================================================================================================================= ====================================================== [[ Monitor Small (1280px 이상) ]] ====================================================== =======================================================================================================================================*/ @media (min-width: 1280px) { /*-------------------------------------- input elements --------------------------------------*/ /* input wrap box */ .input_wrap.box .title_wrap { margin-bottom:.5rem; } /* input column_2 */ .input_container.column_2 .input_wrap, .input_wrap.column_2 .input_wrap { gap:.75rem 1.25rem; } .input_container.column_2 .input_box, .input_wrap.column_2 .input_box { flex-basis:calc(50% - .625rem); } .input_container.column_2 .input_box .full, .input_wrap.column_2 .input_box .full { flex-basis:auto!important; } /*-------------------------------------- button elements --------------------------------------*/ button:not([disabled]), .btn:not([disabled]) { transition:filter .3s; } button:not([disabled]):hover, .btn:not([disabled]):hover { filter:brightness(.88) contrast(1.2); } /*-------------------------------------- wrapper --------------------------------------*/ .content { max-width:calc(100% - 15rem); margin-left:auto; padding:5rem 4rem 3rem; } .on-pc { display:block!important; } /*-------------------------------------- content_footer --------------------------------------*/ .content_footer { max-width:calc(100% - 15rem); height:100%; margin-top:auto; margin-left:auto; padding:0 4rem 2.5rem; } .content_footer .inner_wrap { flex:1 100%; align-self:flex-end; } .content_footer .logo { width:10rem; } .content_footer .contact { display:flex; } .content_footer .contact p + p::before { content:"\00a0/\00a0"; } /*-------------------------------------- tab list --------------------------------------*/ .title_wrap + .tab-list { top:-.1875rem; padding:0 0 0 1rem; } .title_wrap + .tab-list .tab-btn button, .title_wrap + .tab-list .tab-btn .btn { height:2rem; border-radius:.25rem; } .content:has(.tab-list) .title_wrap, .content:has(.tab-list) .tab-list { display:inline-flex; width:auto; } /*-------------------------------------- 헤더(모바일) --------------------------------------*/ .mobile-menu { display:none; } /*-------------------------------------- 헤더(PC웹) --------------------------------------*/ .top-bar-boxed { display:block; position:fixed; top:0; left:0; right:0; height:auto; margin:0; padding:0; } .top-bar-boxed::before, .top-bar-boxed::after { display:none; } .header_wrap .header_left { flex:0 0 15rem; display:flex; align-items:center; height:3.5rem; border:none; background:var(--primary); padding:0 1.5rem; } .header_wrap .header_right { flex:1; display:flex; align-items:center; justify-content:flex-end; column-gap:1.125rem; height:3.5rem; padding:0 1.5rem; border-bottom:1px solid var(--black-12); background:white; } .header_wrap .logo { transform:none; height:1.5rem; opacity:1; animation:none; z-index:unset; } .header_wrap .logo img { width:auto; height:100%; } .header_wrap .breadcrumb_wrap { transform:none; height:auto; animation:none; opacity:1; z-index:unset; } .header_wrap .breadcrumb { display:flex; align-items:center; column-gap:.4375rem; margin:0; padding:0; border:none; color:unset; } .header_wrap .breadcrumb li { display:flex; align-items:center; column-gap:.25rem; font-size:.875rem; font-weight:500; line-height:1.3125rem; letter-spacing:-.02em; color:var(--black-60); } .header_wrap .breadcrumb li::before { display:none; } .header_wrap .breadcrumb li:not(.active)::after { content:""; display:inline-block; transform:rotate(45deg) scale(.75); width:.625rem; height:.625rem; border-top:.125rem solid var(--black); border-right:.125rem solid var(--black); opacity:.4; } .header_wrap .breadcrumb li:not(:first-child) { margin:0; padding:0; } .header_wrap .breadcrumb li img { display:inline-block; width:1.3125rem; height:1.3125rem; opacity:.4; } .header_wrap .breadcrumb li.active { font-weight:600; color:var(--primary)!important; } .header_wrap .user_info_wrap { display:flex; align-items:center; } .header_wrap .user_info_wrap .icon { display:flex; align-items:center; justify-content:center; position:relative; transition:.3s; width:2.5rem; height:2.5rem; padding:.25rem; border-radius:.375rem; border:none; cursor:pointer; } .header_wrap .user_info_wrap .icon img { width:100%; height:100%; } .header_wrap .user_info_wrap .icon:hover { background:var(--primary-a08); } .header_wrap .user_info_wrap .icon:last-child { margin-right:-.25rem; } .header_wrap .user_info_wrap .user_profile { margin-right:-.625rem; padding:.3125rem; } .header_wrap .user_info_wrap .user_profile img { opacity:.75; } .header_wrap .user_info_wrap .alert .count { display:flex; justify-content:center; position:absolute; top:.1875rem; right:1px; min-width:1.0625rem; height:1.0625rem; padding:0 .25rem; border-radius:1rem; background:var(--red); font-size:.625rem; font-weight:700; line-height:1rem; color:white; } .header_wrap .user_name { display:flex; align-items:center; margin-right:.5rem; } .header_wrap .user_name p { padding:0 .5rem; font-size:.875rem; font-weight:500; } .header_wrap .user_name p::after { content:"님"; font-weight:400; } .header_wrap .user_badge { display:inline-flex; align-items:center; margin:0 .1875rem; padding:0 .5rem 1px; border-radius:.3125rem; box-shadow:var(--bs-b1-primary-a12); background:var(--primary-a10); font-size:.75rem; font-weight:600; line-height:1.3125rem; letter-spacing:-.02em; color:var(--primary); } .header_wrap .user_badge.red { box-shadow:var(--bs-b1-red-a12); background:var(--red-a10); color:var(--red); } .header_wrap .user_badge.blue { box-shadow:var(--bs-b1-blue-a12); background:var(--blue-a10); color:var(--blue); } .header_wrap .login_session_box { display:flex; align-items:center; gap:.75rem; position:relative; padding-left:1.125rem; } .header_wrap .login_session_box::before { content:""; position:absolute; top:50%; left:0; transform:translateY(-50%); height:1rem; border-left:1px solid var(--black-20); } .header_wrap .login_session_box .timer_wrap { display:flex; align-items:center; gap:.375rem; } .header_wrap .login_session_box .timer_wrap svg { width:1.0625rem; height:1.0625rem; color:var(--black-50); } .header_wrap .login_session_box .timer_wrap .timer { font-size:.875rem; font-weight:500; letter-spacing:-.02em; color:var(--black-50); } .header_wrap .login_session_box .button_wrap { display:flex; align-items:center; column-gap:.25rem; } .header_wrap .login_session_box .button_wrap button { display:inline-flex; align-items:center; justify-content:center; transition:.3s; min-width:2.75rem; padding:0 .5rem; border-radius:.25rem; box-shadow:var(--bs-b1-black-50); font-size:.8125rem; line-height:1.75rem; color:var(--black); } .header_wrap .login_session_box .button_wrap button:hover { background:var(--black-a05); } /* 헤더(PC웹) Floating button 영역 */ .header_wrap .float_button_wrap { display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; row-gap:.3125rem; position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; height:0; padding:0 1.5rem 1.25rem; pointer-events:none; } .header_wrap .float_button { flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; width:3.75rem; height:3.75rem; border-radius:50%; background:var(--primary); overflow:hidden; cursor:pointer; pointer-events:auto; } .header_wrap .float_button:hover { animation:signal_primary 1.5s infinite; z-index:1; } .header_wrap .float_button a { width:100%; height:100%; padding:.25rem; font-size:.875rem; font-weight:500; text-transform:uppercase; color:white; } @keyframes signal_primary { 0% { box-shadow:0 0 0 0 var(--primary-a85); } 70% { box-shadow:0 0 0 1.75rem transparent; } 100% { box-shadow:0 0 0 0 transparent; } } /*-------------------------------------- 사이드 네비 --------------------------------------*/ /* 사이드 네비 - Depth 1 */ .side-nav { display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; width:15rem; height:100vh; margin:0; padding:3.5rem 0 0; background:var(--primary); overflow-y:auto; overscroll-behavior:contain; } .side-nav .side-menu { transform:none!important; height:3rem; margin:0; padding:0 1.375rem; border-radius:0; color:unset; animation:none!important; opacity:1!important; } .side-nav .side-menu::before { display:none!important; } .side-nav .side-menu:hover { background:var(--primary-l2)!important; } .side-nav .side-menu .side-menu__icon { flex-shrink:0; width:1.875rem; height:1.875rem; margin-left:-.25rem; opacity:.6; } .side-nav .side-menu .side-menu__title { margin-left:.5rem; font-size:.875rem; color:var(--white-a90); } .side-nav .side-menu .side-menu__title .side-menu__sub-icon { transition:.3s; margin-right:0; opacity:.6; pointer-events:none; } .side-nav .side-menu .side-menu__title .side-menu__sub-icon svg { width:1.125rem; height:1.125rem; } .side-nav .side-menu .side-menu__title .side-menu__sub-icon.rotate-180 { transform:scaleY(-1); } /* 사이드 네비 - Depth 2 */ .side-nav .depth-2 { border-radius:0; border-top:1px solid var(--primary); background:var(--primary-l1); } .side-nav .depth-2::before { display:none; } .side-nav .sub-side-menu { padding-left:2.5rem; border-bottom:1px solid var(--primary); } .side-nav .sub-side-menu .side-menu__icon { width:1.6875rem; height:1.6875rem; margin-right:-.125rem; } /* 사이드 네비 - active & open */ .side-nav > ul > li:not(:first-child) > .side-menu.side-menu--active, .side-nav .side-menu.side-menu--open { background:var(--primary-l1)!important; } .side-nav .side-menu.side-menu--active { background:var(--secondary)!important; } .side-nav .side-menu.side-menu--active .side-menu__icon { opacity:1; } .side-nav .side-menu.side-menu--active .side-menu__title { color:white!important; } /* 사이드 네비 - 메뉴 history */ .side-nav .menu_history_wrap { margin-top:auto; padding:3rem 1.375rem 1.375rem; } .side-nav .menu_history p { margin:0 0 .75rem; font-size:.875rem; font-weight:500; color:var(--white-a90); } .side-nav .menu_history ul { display:flex; flex-direction:column; row-gap:.5rem; letter-spacing:-.025em; } .side-nav .menu_history li { transition:.2s; padding:0 .75rem; border-radius:.25rem; border:1px solid var(--white-a50); font-size:.75rem; line-height:2.25rem; color:white; } .side-nav .menu_history li:hover { background:var(--white-a10); } /*-------------------------------------- form filter --------------------------------------*/ .form_filter form { flex-direction:row; column-gap:2.5rem; } .form_filter label, .form_filter .form-label { font-size:.8125rem; } .form_filter .input_box { row-gap:.25rem; } .form_filter .button_wrap { flex-shrink:0; align-self:flex-end; } .form_filter .button_wrap .btn { min-width:7.5rem; } /*-------------------------------------- 모달(메인) --------------------------------------*/ /* 모달(기본) */ .modal .modal-dialog { width:calc(100% - 8rem); } /* 모달(메인) */ .type_main .modal-body { max-height:calc(100dvh - 21.875rem); } /*-------------------------------------- 토스트 UI 커스텀 --------------------------------------*/ /* 토스트 - container */ #toast-container { align-items:flex-end; } /* 토스트 - position */ .toast-top-left, .toast-top-center, .toast-top-full-width, .toast-top-right, .toast-bottom-left, .toast-bottom-center, .toast-bottom-full-width, .toast-bottom-right { padding:0 3rem 3rem 18rem; } /*====================================== 대시보드 페이지 ======================================*/ .dashboard { flex-direction:row; column-gap:1.75rem; } .dashboard .title_wrap .title { font-size:1.0625rem; } .dashboard .box_wrap { flex:1; max-width:calc(100% - 24rem); } .dashboard .box_wrap.side { flex:0 21.5rem; max-width:21.5rem; } .dashboard .box .content_wrap { flex-direction:column-reverse; } /* box - tabulator */ .dashboard .tabulator_container::after { left:-1.75rem; right:-1.75rem; } /* box - notice */ .dashboard .box.notice { order:0; } .dashboard .notice_wrap { max-width:18rem; } } /*======================================================================================================================================= ====================================================== [[ Monitor Medium (1600px 이상) ]] ====================================================== =======================================================================================================================================*/ @media (min-width: 1600px) { /*====================================== 대시보드 페이지 ======================================*/ .dashboard { column-gap:2.5rem; } .dashboard .box_wrap { align-self:flex-start; flex-direction:row; flex-wrap:wrap; column-gap:1.25rem; } .dashboard .box { align-self:flex-start; flex:1 100%; } .dashboard .box .content_wrap { column-gap:1.75rem; row-gap:1rem; } /* box - daily */ .dashboard .box.daily .content_wrap { flex-direction:row; } /* box - monthly */ .dashboard .box.monthly { flex-basis:calc(44% - .625rem); } /* box - chart */ .dashboard .box.chart { flex-basis:calc(56% - .625rem); } .dashboard .chart_wrap:has(#myLineChart) { height:18.125rem; } } /*======================================================================================================================================= ====================================================== [[ Monitor Large (1824px 이상) ]] ====================================================== =======================================================================================================================================*/ @media (min-width: 1824px) { /*-------------------------------------- form filter --------------------------------------*/ .form_filter form { column-gap:2rem; } .form_filter .input_container { flex-wrap:nowrap; } /*====================================== 대시보드 페이지 ======================================*/ /* box - monthly */ .dashboard .box.monthly { flex-basis:calc(40% - .625rem); } .dashboard .box.monthly .inner_box li:not(:first-child) { padding:1.125rem 1rem 0; } .dashboard .box.monthly .inner_box li:last-child { padding-bottom:1.3125rem; } /* box - chart */ .dashboard .box.chart { flex-basis:calc(60% - .625rem); } .dashboard .chart_wrap:has(#myLineChart) { height:19.75rem; } } /*======================================================================================================================================= ====================================================== [[ 잔재 (삭제 전 확인 필요) ]] ====================================================== =======================================================================================================================================*/ /*reset.css*/ .cf { zoom: 1; } .cf::before, .cf::after { content:""; display:table; clear:both; } /* top */ .notification .notification__icon { width:1.5rem; height:1.5rem; } .notification_list { position:absolute; transform:translate(-166px,53px); width:224px; margin:0; inset:0 auto auto 0; opacity:1; visibility:hidden; z-index:9999; } .notification_list .show>.dropdown-content { margin-top:.25rem; } .notification_list .dropdown-content { transition:margin-top .2s; position:relative; width:100%; padding:.5rem; border-radius:.375rem; box-shadow:0 3px 10px #00000017; } .notification_list .dropdown-content .dropdown-item { display:flex; align-items:center; transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter; transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter; transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-text-decoration-color,-webkit-backdrop-filter; transition-duration:300ms; padding:.5rem; border-radius:.375rem; } .notification_list.show { opacity:1; visibility:visible; } /* calc-wrap */ .calc-table > div { padding-bottom:33px; } .calc-wrap span { display:inline-block; } .calc-wrap .calc-cnt { vertical-align:super; } .calc-wrap .calc-item { vertical-align:top; } .calc-wrap .calc-title { width:100px; } /* 스위치 슬라이더 및 기타*/ .switch { display:inline-block; position:relative; width:40px; height:20px; } .switch input { width:0; height:0; opacity:0; } .fa-regular { font-size:1.125rem; } .fa-square-xmark:before, .fa-times-square:before, .fa-xmark-square:before { font-family:"Font Awesome 6 Free"; } .selectBox { padding:10px 0 24px 0; } .selectBox select { height:29px; padding:0 0 0 6px; border-radius:3px; font-size:14px; font-weight:bold; line-height:29px; } .box-btn { margin:22px 0 0 0; text-align:center; } .form-check { width:max-content; margin-right:1rem; padding:0 !important; } /* admin */ .admin-title { margin-top:1.5rem; margin-left:1.5rem; } .admin-title-header { font-size:1.5rem; font-weight:800; line-height:1.75rem; } .admin-search-box { flex-wrap:wrap; padding-bottom:3rem; } .merchant-list-search { height:40px; } .multiple-select { width:72%; } .merchant-search-list-box { width:auto; height:2.375rem; cursor:pointer; } .btn-group { width:7rem; height:17px; overflow:hidden; } .merchant-search-list-box .dropdown-menu { display:block; position:absolute; top:2rem; left:-.8125rem; right:-2.0625rem; height:40vh; padding-bottom:.75rem; border-radius:.375rem; border:solid 1px #e5e7eb; background:#fff; overflow:scroll; -ms-overflow-style:none; scrollbar-width:none; } .merchant-search-list-box .dropdown-menu button { display:block; width:100%; padding:.375rem .75rem; } .merchant-search-list-box .dropdown-menu .multiselect-filter { position:sticky; top:0; margin-bottom:.75rem; border-bottom:.0625rem solid #e5e7eb; } .merchant-search-list-box .dropdown-menu .multiselect-filter input { padding:.625rem .75rem; border:none; } .merchant-search-list-box .dropdown-menu .multiselect-filter input:focus { box-shadow:none; } .merchant-list-box .dropdown-menu { display:block; position:absolute; top:2rem; left:-.8125rem; right:-2.0625rem; height:40vh; padding-bottom:.75rem; border-radius:.375rem; border:solid 1px #e5e7eb; background:#fff; overflow:scroll; -ms-overflow-style:none; scrollbar-width:none; } .merchant-list-box .dropdown-menu button { display:block; width:100%; padding:.375rem .75rem; } .merchant-list-box .dropdown-menu .multiselect-filter { position:sticky; top:0; margin-bottom:.75rem; border-bottom:.0625rem solid #e5e7eb; } .merchant-list-box .dropdown-menu .multiselect-filter input { padding:.625rem .75rem; padding-left:1.125rem; border:none; } .merchant-list-box .dropdown-menu .multiselect-filter input:focus { box-shadow:none; } .common-btn-1, .common-btn-2 { display:inline-block; height:40px; padding:0 54px; border-radius:3px; border:2px solid #e1e1e1; font-size:18px; font-family:'NotoSansCJKkr-Regular'; line-height:36px; text-align:center; color:#fff; } .common-btn-1 { background:#04abc4; } .common-btn-2 { background:#6e7074; } #popupHeader { position:relative; padding:13px 0 18px 26px; background:#e4e6e9; } #popupHeader a { position:absolute; top:13px; right:13px; } .eventContents { padding:13px 36px 45px 27px; } .eventContents .txt-1 { position:relative; right:-32px; text-align:right; color:#121212; } .eventContents h2 { padding:12px 0 18px 0; font-size:16px; color:#121212; } .eventContents .box-table { margin-bottom:27px; padding:0 0 0 21px; } .common-table-1 { width:100%; border-bottom:1px solid #696a6b; } .common-table-1 thead th, .common-table-1 tbody td { font-size:14px; text-align:center; color:#2d2e2f; } .common-table-1 thead th { padding:7px 0; border-top:1px solid #696a6b; background:#ebebeb; } .common-table-1 tbody td { padding:9px 0; border-bottom:1px solid #e1e1e1; } .common-table-1 tbody tr:last-child td { border-bottom:none; } .list-type-1 { padding:12px 0 0 21px; } .list-type-1 li { color:#2d2e2f; } .box-info-number { display:-webkit-flex; display:flex; align-items:center; justify-content:space-between; padding:55px 30px 0 27px; } .box-info-number .txt-1 { font-size:16px; font-weight:bold; color:#121212; } .common-inputType-1 { width:100%; height:36px; margin:0 11px; padding-left:10px; border-radius:3px; border:1px solid #b7b7b7; line-height:36px; } .box-info-number .btn-1 { display:inline-block; height:46px; padding:0 28px; border:0; background:#4d7cfe; font-family:'NotoSansCJKkr-Medium'; font-size:20px; line-height:46px; color:#fff; } /* detail-popup */ #detail-popup-wrap { position:fixed; transition:.3s; right:0; width:0px; height:100vw; box-shadow:0 1px 15px 0 rgb(87 87 87 / 15%); background-color:white; z-index:60; opacity:0; } #detail-popup-wrap .popup-header { position:relative; width:100%; height:200px; padding-top:10px; border-radius:10px; box-shadow:0 1px 15px 0 rgb(87 87 87 / 15%); background-color:#064E3B; } #detail-popup-wrap .popup-header p { position:relative; padding-top:10px; font-size:19px; text-align:center; color:white; } #detail-popup-wrap .popup-header .popup-close-btn { position:absolute; top:15px; right:10px; width:30px; } #detail-popup-wrap .popup-header .header-img-wrap { position:absolute; left:calc(50% - 50px); bottom:-50px; width:100px; height:100px; border-radius:50px; box-shadow:0 1px 15px 0 rgb(87 87 87 / 15%); background-color:white; } #detail-popup-wrap .popp-contents-wrap { padding:80px 20px; } #detail-popup-wrap .popp-contents-wrap input { margin-bottom:20px; border-radius:.375rem; border:1px solid #e8e8e8; } #tree-content-wrap { margin-top:20px } #tree-content-wrap .search-wrap { position:absolute; top:30px; left:30px; z-index:4; } #tree-content-wrap .btn-wrap { margin-bottom:20px; margin-top:10px; padding-bottom:20px; border-bottom:1px solid #E2E8F0; } /* Payment page */ .payment { min-height:auto; padding:0 0 1rem; border-radius:1rem; } .payment .inner-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; } .payment .tab-wrap { position:relative; width:100%; max-width:33.75rem; padding-top:.75rem; border-bottom:.0625rem solid #d1d5d9; } .payment .tab-wrap li { display:inline-block; position:relative; } .payment .tab-wrap li:before { content:""; position:absolute; left:0; right:0; bottom:-.0625rem; height:.1875rem; border-top-left-radius:.1875rem; border-top-right-radius:.1875rem; background:#064e3b; opacity:0; } .payment .tab-wrap li a { display:block; padding:0 1rem; font-size:.875rem; font-weight:bold; line-height:3.25rem; } .payment .tab-wrap li.current:before { opacity:1; } .payment .content-wrap { width:100%; max-width:33.75rem; margin:0 auto; padding:2rem 0 1rem; } /* Payment page - payForm */ .payment .content-wrap .payForm { display:none; margin:0; padding:0; } .payment .content-wrap .payForm.active { display:block; } .payment .payForm .form-label { margin-bottom:.375rem; font-size:.8125rem; font-weight:bold; } .payment .payForm .input { width:100%; margin:0 .5rem 1rem; } .payment .payForm .input.w33 { width:calc(33.33% - 1rem); } .payment .payForm .input.w50 { width:calc(50% - 1rem); } .payment .payForm .input.w66 { width:calc(66.66% - 1rem); } .payment .payForm .input .multiple { display:flex; align-items:center; } .payment .payForm .input .multiple span { padding:0 .375rem; } .payment .payForm .mt-2, .payment .payForm .mt-3 { margin:0; } .payment .payForm .pos_aps_r { margin:.25rem 0 -1.25rem; } .payment .payForm .payBt { width:100%; margin:1.5rem 0 1rem; text-align:center; } .payment .payForm .payBt .btn { width:40%; max-width:12.5rem; } .payment .payForm .payBt .btn+.btn { margin-left:.5rem; } /* Payment page - cardInfo */ .payment .content-wrap .cardInfo { display:none; width:100%; max-width:33.75rem; margin:0; padding:0; } .payment .content-wrap .cardInfo.active { display:block; } /* EastpayReq page */ .east-pay { height:97%; } .east-pay .content-wrap { max-width:30rem; height:100%; } .east-pay .content-wrap .cardInfo.active { display: block; } .east-pay .inner-wrap { padding-top:1.25rem; } .east-pay .payForm .input_container .input_list { display:flex; gap:0 1.5rem; } .east-pay .payForm .input_container:nth-child(2) { padding-bottom:2.5rem; } .east-pay .payForm .input_container:last-child { padding-top:2.5rem; border-top:.0625rem solid #d7d9da; } .east-pay .content-wrap .payForm { display:none; margin:0; padding:0; } .east-pay .content-wrap .payForm.active { display:block; } .east-pay .payForm .form-label { margin-bottom:.375rem; font-size:.8125rem; font-weight:bold; } .east-pay .payForm .input { width:100%; margin:0 0 1rem; } .east-pay .payForm .input.w33 { width:calc(33.33% - 1rem); } .east-pay .payForm .input.w50 { width:calc(50% - 1rem); } .east-pay .payForm .input.w66 { width:calc(66.66% - 1rem); } .east-pay .payForm .input .multiple { display:flex; align-items:center; } .east-pay .payForm .input .multiple span { padding:0 .375rem; } .east-pay .payForm .mt-2, .east-pay .payForm .mt-3 { margin:0; } .east-pay .payForm .pos_aps_r { margin:.25rem 0 -1.25rem; } .east-pay .payForm .payBt { width:100%; margin:1.5rem 0 1rem; text-align:center; } .east-pay .payForm .payBt .btn { width:40%; max-width:12.5rem; } .east-pay .payForm .payBt .btn+.btn { margin-left:.5rem; } .east-pay .input textarea { height:10rem; resize:none; } .east-pay .box { box-shadow:none; background:none; } .east-pay .main-title-wrap { width:100%; max-width:33.75rem; padding-top:.75rem; margin-bottom:2rem; border-bottom:.0625rem solid #d1d5d9; } .east-pay .title { padding-bottom:1rem; font-size:1.0625rem; font-weight:bold; line-height:3.25rem; } .east-pay .main-title-wrap .title:before { content:""; position:absolute; left:0; right:0; bottom:-.0625rem; height:.1875rem; border-top-left-radius:.1875rem; border-top-right-radius:.1875rem; background:#064e3b; } .east-pay .btn-wrap button { flex-grow:1; max-width:18rem; } /* Invitation page */ .invitation { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:auto; padding:0 0 1rem; border-radius:1rem; } .invitation .content:before { display:none; } .invitation .inner-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; } .invitation .tab-wrap { position:relative; width:100%; max-width:33.75rem; padding-top:.75rem; border-bottom:.0625rem solid #d1d5d9; } .invitation .tab-wrap li { display:inline-block; position:relative; } .invitation .tab-wrap li:before { content:""; position:absolute; left:0; right:0; bottom:-.625rem; height:.1875rem; background:#064e3b; border-top-left-radius:.1875rem; border-top-right-radius:.1875rem; opacity:0; } .invitation .tab-wrap li a { display:block; padding:0 1rem; font-size:.875rem; font-weight:bold; line-height:3.25rem; } .invitation .tab-wrap li.current:before { opacity:1; } .invitation .content-wrap { width:100%; max-width:33.75rem; margin:0 auto; padding:2rem 0 1rem; } .invitation .input { width:100%; margin:0 0 1rem; } .invitation .input > label { display:inline-block; margin-bottom:.375rem; font-size:.8125rem; font-weight:bold; } .invitation .input textarea { height:11.25rem; resize:none; } .invitation .btn-wrap { margin:1.5rem 0 1rem; text-align:center; } .invitation .btn-wrap button { width:60%; max-width:12.5rem; } .invitation .switch { display:block; margin:0 auto; text-align:center; } .invitation .is-end-date { background-color:#064E3B!important; } .invitation .btn-group { width:auto; } .invitation .btn-send-msg { text-align:center; z-index:99999; } .invitation .merchant-send-list-box { width:auto; height:2.375rem; cursor:pointer; } .invitation .dropdown-menu { display:block; position:absolute; top:2rem; left:-.8125rem; right:-2.0625rem; height:40vh; padding-bottom:.75rem; border-radius:.375rem; border:solid 1px #e5e7eb; background:#fff; scrollbar-width:none; -ms-overflow-style:none; overflow:scroll; } .invitation .dropdown-menu button { display:block; width:100%; padding:.375rem .75rem; } .invitation .dropdown-menu .multiselect-filter { position:sticky; top:0; margin-bottom:.75rem; border-bottom:.0625rem solid #e5e7eb; } .invitation .dropdown-menu .multiselect-filter input { padding:.625rem .875rem; border:none; } .invitation .dropdown-menu .multiselect-filter input:focus { box-shadow:none; } .invitation .multiselect-container .multiselect-option.active:not(.multiselect-active-item-fallback), .invitation .multiselect-container .multiselect-group.active:not(.multiselect-active-item-fallback), .invitation .multiselect-container .multiselect-all.active:not(.multiselect-active-item-fallback), .invitation .multiselect-container .multiselect-option:not(.multiselect-active-item-fallback):active, .invitation .multiselect-container .multiselect-group:not(.multiselect-active-item-fallback):active, .invitation .multiselect-container .multiselect-all:not(.multiselect-active-item-fallback):active { background-color:#fff!important; } /* invitation page - reset */ .invitation .w-12 { width:auto; } .invitation .mr-2, .invitation .mt-2, .invitation .mt-3, .invitation .mt-4, .invitation .mt-5 { margin:0; } .invitation .p-5 { padding:0; } /* Invitation page - invitationForm */ .invitation .content-wrap .invitationForm { display:none; margin:0; padding:0; } .invitation .content-wrap .invitationForm.active { display:block; } /* Invitation page - userInfo */ .invitation .content-wrap .userInfo { display:none; width:100%; max-width:33.75rem; margin:0; padding:0; } .invitation .content-wrap .userInfo.active { display:block; } .invitation .userInfo .admin-search-form { position:relative; padding:1rem 1.25rem; border-radius:.5rem; box-shadow:0 .25rem 1.25rem rgb(0 0 0 / 4%); background:#fff; } .invitation .userInfo .admin-search-form:after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:inherit; border:.0625rem solid #064e3b; pointer-events:none; } .invitation .userInfo .search-wrap { padding:0; } .invitation .userInfo .search-wrap .input:nth-child(2) { width:calc(100% - 6.25rem); } .invitation .userInfo .search-wrap .input:nth-child(2)+.btn-wrap { position:absolute; right:1.25rem; bottom:1rem; width:5.5rem; white-space:nowrap; } .invitation .userInfo .search-wrap .input:nth-child(2)+.btn-wrap .btn { width:100%; } .invitation .userInfo .merchant-send-list-box, .userInfo .merchant-search-list-box { height:2.375rem; } .invitation .userInfo .user-list { margin-top:2.25rem; } /* MultiSelect Custom 2022.11.29 */ .multiselect__wrapper > span { display:inline-flex; -webkit-box-align:center; -webkit-box-pack:center; align-items:center; justify-content:center; column-gap:.25rem; position:relative; height:1.875rem; margin:.3125rem .3125rem 0 0; padding:0 .625rem; border-radius:1.875rem; font-size:.8125rem; letter-spacing:-.02rem; } .multiselect__wrapper > span::after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; border-radius:inherit; border:.0625rem solid transparent; pointer-events:none; } .multiselect__wrapper .multiselect__clear-btn { border-radius:.375rem; background:#e7e7e7; color:#424242; } .multiselect__wrapper .multiselect__clear-btn::before { content:"전체삭제"; } .multiselect__wrapper .multiselect__clear-btn svg { width:1rem; height:1rem; color:#1b293b; } .multiselect__wrapper .multiselect__selected { background: rgba(7,79,60,.08); color:#074f3c; } .multiselect__wrapper .multiselect__selected::after { border-color:rgba(7,79,60,.7); } .multiselect__wrapper .multiselect__remove-btn { align-items:center; justify-content:center; width:1.125rem; height:1.125rem; margin:0 -.125rem 0 0; border-radius:50%; background:rgba(7,79,60,.4); } .multiselect__wrapper .multiselect__remove-btn svg { width:.75rem; height:.75rem; color:#fff; } /* Login alert box */ .login_alert_box { display:none; position:fixed; left:50%; bottom:3.125rem; transform:translateX(-50%); width:80%; max-width:20rem; margin:0; padding:0 1.75rem; border-radius:3.25rem; background:rgba(0,0,0,.8); z-index:9999; cursor:pointer; animation:scrolldown 0.7s ease-in infinite alternate; } .login_alert_box span { display:flex; align-items:center; justify-content:space-between; height:3.25rem; font-size:.9375rem; font-weight:500; line-height:3.25rem; color:#fff; } .login_alert_box span::after { content:"연장"; font-weight:bold; color:#cce568; } .login_alert_box.after span::after { content:"확인"; } @keyframes scrolldown { 0% { margin:0; } 100% { margin:0 0 .1875rem; } } .cw-8 { width:4rem; } .ch-8 { height:4rem; } .BG_trans_white { background:white; color:rgb(var(--color-slate-500) / var(--tw-text-opacity)); } .BG_trans_green { background:#ee8186; color:white; } .BG_trans_green:hover { background:#eb5050 !important; color:white !important; } .group { display:block; width:100%; height:70vh; gap:unset; grid-template-columns:unset; position:relative; } .swiper-container.change-swiper-container { position:relative; margin-top:.5rem; } .swiper-container.change-swiper-container .change-btnPrev { background:#ffffff; color:#333; position:absolute; top:-2rem; right:7rem; left:unset; width:25px; height:25px; } .swiper-container.change-swiper-container .change-btnNext { background:#ffffff; color:#333; position:absolute; top:-2rem; right:4.5rem; left:unset; width:25px; height:25px; } .swiper-container.change-swiper-container .change-btnPrev::after, .swiper-container.change-swiper-container .change-btnNext::after { font-size:1rem; } .swiper-container.change-swiper-container .change-btnPrev::after{ content:'\f359'; font-family:'Font Awesome 5 Free'; font-weight:400; font-size:25px; color:#fff; background:var(--bgColor); } .swiper-container.change-swiper-container .change-btnNext::after { content:'\f35a'; font-family:'Font Awesome 5 Free'; font-weight:400; font-size:25px; color:#fff; background:var(--bgColor); } .swiper-container.change-swiper-container .change-btnPrev:hover, .swiper-container.change-swiper-container .change-btnNext:hover { transform:scale(1.1); transition:transform .6s ease; } /* float 체크박스 */ .float_item { text-align:right; } /* 계정내역 입력폼 박민성 07/25 */ .admin-info .primary-flex-content .admin-level-list { list-style-type:none; padding:0; } .admin-info .primary-flex-content .admin-level-list li { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid #ddd; } .trigger-box { transform-origin:center; transform:scaleX(1); cursor:pointer; } /* active 클래스가 제거될 때 */ @keyframes rotate { from { transform:rotate(0deg) scaleX(-1); } to { transform:rotate(360deg) scaleX(-1); } } /* 반시계 방향 회전 애니메이션 */ @keyframes rotateReverse { from { transform:rotate(360deg); } to { transform:rotate(0deg); } } /* 테마 작업 종료 // 박민성 */ #c-form { visibility:collapse; } /* 파일선택 버튼식 */ #upload_file_btn, #update_titleBtn { display:block; padding:10px 20px; width:165px; font-size:.875rem; font-weight:700; background:var(--bgColor); color:#fff; border-radius:5px; } #update_titleBtn { display:none; } #theme-trigger-btn { fill:var(--bgColor); } /* 호버시 툴팁 버전 */ .lwt { position: relative; cursor: pointer; } /* 툴팁 스타일 */ .lwt::before { content:attr(data-tooltip); position:absolute; bottom:35%; background-color:black; color:white; padding:5px 10px; border-radius:5px; white-space:nowrap; font-size:12px; opacity:0; visibility:hidden; transition:opacity 0.5s; z-index:900; } .lwt:hover::before { opacity:1; visibility:visible; } .lwt::after { content:''; position:absolute; top:50%; margin-left:10px; transform:translateY(-50%); width:20px; height:20px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjcmltc29uIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaWNvbi1uYW1lPSJhbGVydC1jaXJjbGUiIGRhdGEtbHVjaWRlPSJhbGVydC1jaXJjbGUiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFsZXJ0LWNpcmNsZSBibG9jayBteC1hdXRvIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTIiPjwvbGluZT48bGluZSB4MT0iMTIiIHkxPSIxNiIgeDI9IjEyLjAxIiB5Mj0iMTYiPjwvbGluZT48L3N2Zz4=') no-repeat center center; background-size:contain; } input[type=file]::file-selector-button { width:150px; height:30px; transition:background .5s ease, color .5s ease; cursor:pointer; background:var(--bgColor); color:#fff; border-radius:10px; border:1px solid #eaeaea; } input[type=file]::file-selector-button:hover { background:#4d4d4d; color:#fff; border-radius:10px; border:1px solid #eaeaea; } .tabulator-dummy { color:lightgray; } /**========================= [[ 370px - 429px ]] =========================**/ @media (min-width:370px) and (max-width:429px) { #c-form { display:none; } .mobile-menu .main_logo .w-10 { display:block; width:100%; height:35px; } /* 리사이즈 차트 */ .dailyStatsChart.resizeChart { width:100%; } .change-call-info { display:none; } /* admin 두번째 폼디자인 */ .admin-info .primary-flex-content .admin-level-list { list-style-type:none; padding:0; } .admin-info .primary-flex-content .admin-level-list li { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid #ddd; } /* active 클래스가 제거될 때 */ @keyframes rotate { from { transform:rotate(0deg) scaleX(-1); } to { transform:rotate(360deg) scaleX(-1); } } /* 반시계 방향 회전 애니메이션 */ @keyframes rotateReverse { from { transform:rotate(360deg); } to { transform:rotate(0deg); } } @keyframes bg-fill { 0% { transform:translateX(-100%); } 100% { transform: translateX(0); } } /* 모바일 대제목 제거 */ #change-title-wrap { color:unset; padding-left:unset; position:unset; overflow:unset; z-index:unset; border:unset; border-radius:unset; } #change-title-wrap::before { content:''; position:absolute; top:0; left:0; width:48.5%; height:100%; background:var(--bgColor); animation:bg-fill 1s forwards; border:1px solid; border-radius:10px; display:none; } .lwt { position:relative; display:inline; cursor:pointer; } /* 툴팁 스타일 */ .lwt::before { content:attr(data-tooltip); position:absolute; bottom:35%; background-color:black; color:white; padding:5px 10px; border-radius:5px; white-space:pre-wrap; word-wrap:break-word; font-size:12px; opacity:0; visibility:hidden; transition:opacity 0.5s; z-index:900; max-width:250px; min-width:250px; } .lwt:hover::before { opacity:1; visibility:visible; } .lwt::after { content:''; position:absolute; top:50%; margin-left:10px; transform:translateY(-50%); width:20px; height:20px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjcmltc29uIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaWNvbi1uYW1lPSJhbGVydC1jaXJjbGUiIGRhdGEtbHVjaWRlPSJhbGVydC1jaXJjbGUiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFsZXJ0LWNpcmNsZSBibG9jayBteC1hdXRvIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTIiPjwvbGluZT48bGluZSB4MT0iMTIiIHkxPSIxNiIgeDI9IjEyLjAxIiB5Mj0iMTYiPjwvbGluZT48L3N2Zz4=') no-repeat center center; background-size:contain; } .lwt-content { position:absolute; bottom:20%; transform:translateX(-50%); left:50%; width:700px; height:700px; border-radius:5px; visibility:hidden; transition:opacity 0.3s; z-index:100; } .lwt-content img { max-width:700px; max-height:700px; min-width:400px; min-height:400px; } .lwt:hover + .lwt-content { opacity:1; visibility:visible; } } /**========================= [[ 430px - 767px ]] =========================**/ @media (min-width:430px) and (max-width:767px) { #c-form { display:none; } .header_wrap .user_info_wrap{ flex-direction:unset; } /* 리사이즈 차트 */ .dailyStatsChart.resizeChart { width:100%; } /* 계정내역 입력폼 박민성 07/25 */ .admin-info .primary-flex-content .admin-level-list { list-style-type:none; padding:0; } .admin-info .primary-flex-content .admin-level-list li { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid #ddd; } /* 반응형 CPID 폼 */ .swiper-container.change-swiper-container .change-btnNext, .swiper-container.change-swiper-container .change-btnPrev { display:none; } .lwt { position:relative; display:inline; cursor:pointer; } /* 툴팁 스타일 */ .lwt::before { content:attr(data-tooltip); position:absolute; bottom:35%; background-color:black; color:white; padding:5px 10px; border-radius:5px; white-space:pre-wrap; word-wrap:break-word; font-size:12px; opacity:0; visibility:hidden; transition:opacity 0.5s; z-index:900; max-width:250px; min-width:250px; } .lwt:hover::before { opacity:1; visibility:visible; } .lwt::after { content:''; position:absolute; top:50%; margin-left:10px; transform:translateY(-50%); width:20px; height:20px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjcmltc29uIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaWNvbi1uYW1lPSJhbGVydC1jaXJjbGUiIGRhdGEtbHVjaWRlPSJhbGVydC1jaXJjbGUiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFsZXJ0LWNpcmNsZSBibG9jayBteC1hdXRvIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTIiPjwvbGluZT48bGluZSB4MT0iMTIiIHkxPSIxNiIgeDI9IjEyLjAxIiB5Mj0iMTYiPjwvbGluZT48L3N2Zz4=') no-repeat center center; background-size:contain; } .lwt-content { position:absolute; bottom:20%; transform:translateX(-50%); left:50%; width:700px; height:700px; border-radius:5px; visibility:hidden; transition:opacity 0.3s; z-index:100; } .lwt-content img { max-width:700px; max-height:700px; min-width:400px; min-height:400px; } .lwt:hover + .lwt-content { opacity:1; visibility:visible; } } /**========================= [[ 640px 이하 ]] =========================**/ @media (max-width:640px) { .east-pay .payForm .input_container .input_list { gap:0 .75rem; } .east-pay .payForm .input.w50 { width:calc((100% - 0.75rem)/2); } .east-pay .payForm .input_container:nth-child(2) { padding-bottom:1rem; } .east-pay .payForm .input_container:last-child { padding-top:1.5rem; } .east-pay .btn-wrap button { max-width:100%; } } /**========================= [[ 640px 이상 ]] =========================**/ @media(min-width:640px) { /* Payment page */ .payment { padding:0 1rem; } /* Invitation page - reset */ .invitation .input { flex-direction:column; } /* Invitation page - userInfo */ .invitation .userInfo .search-wrap { width:calc(100% + 1rem); margin-left:-.5rem; margin-right:-.5rem; } .invitation .userInfo .search-wrap .input { margin:0 .5rem 1rem; } .invitation .userInfo .search-wrap .input:nth-child(2), .userInfo .search-wrap .input:nth-child(2) input { width:100%; } .invitation .userInfo .search-wrap .input:nth-child(2)+.btn-wrap { position:relative; right:auto; bottom:auto; margin:0 .5rem 1rem; } .invitation .userInfo .search-wrap .input:nth-child(2)+.btn-wrap .btn { padding-left:1.25rem; padding-right:1.25rem; } } /**========================= [[ 사이즈 766px 이하 ]] =========================**/ @media (max-width:766px) { .east-pay .content-wrap { max-width:33.75rem; margin:0 auto; } .east-pay .inner-wrap { padding-top:0; } } /**========================= [[ 사이즈 768px 이상 ]] =========================**/ @media(min-width:768px) { /* Payment page */ .payment { padding-top:1.5rem; } .payment .tab-wrap { padding-top:1.5rem; } .payment .tab-wrap li a { font-size:.9375rem; } /* Invitation page - reset */ .invitation { padding-top:1.5rem; } .invitation .tab-wrap li a { font-size:.9375rem; } } /**========================= [[ 사이즈 768px - 1279px ]] =========================**/ @media (min-width:768px) and (max-width:1279px) { #c-form { visibility:collapse; } #m-none-item { display:none; } .top-bar-boxed .logo { overflow:unset; margin-right:2rem; margin-left:unset; } .top-bar-boxed .logo img { width:8.5rem; height:3rem; margin-left:-.5rem; } .top-bar-boxed .logo .logo__image { display:none; } .breadcrumb.breadcrumb-light { margin-left:unset; padding:unset; } .side-nav > ul ul { background:#fff; } .header_wrap .user_info_wrap{ flex-direction:unset; } .header_wrap .user_organization { margin:-2px 0 0 10px; } .change-call-info { display:none; } /* admin 두번째 폼디자인 */ .admin-info .primary-flex-content .admin-level-list { list-style-type:none; padding:0; } .admin-info .primary-flex-content .admin-level-list li { display:flex; justify-content:space-between; align-items:center; padding:15px 0; border-bottom:1px solid #ddd; } /* admin 네번째 폼디자인 */ #change-theme-style, #change-theme-style:hover, #change-theme-style:focus, #change-theme-style:active { width:60px; height:60px; line-height:60px; border-radius:15px; } /* 로고 */ .top-bar-boxed .logo .w-10 { display:block; width:100%; height:40px; margin:unset; } /* 반응형 가맹점 폼 */ .lwt { position:relative; cursor:pointer; } /* 툴팁 스타일 */ .lwt::before { content:attr(data-tooltip); position:absolute; bottom:35%; background-color:black; color:white; padding:5px 10px; border-radius:5px; white-space:pre-wrap; word-wrap:break-word; font-size:12px; opacity:0; visibility:hidden; transition:opacity 0.5s; z-index:900; max-width:250px; min-width:250px; } .lwt:hover::before { opacity:1; visibility:visible; } .lwt::after { content:''; position:absolute; top:50%; margin-left:10px; transform:translateY(-50%); width:20px; height:20px; background:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJjcmltc29uIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgaWNvbi1uYW1lPSJhbGVydC1jaXJjbGUiIGRhdGEtbHVjaWRlPSJhbGVydC1jaXJjbGUiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFsZXJ0LWNpcmNsZSBibG9jayBteC1hdXRvIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIxMCI+PC9jaXJjbGU+PGxpbmUgeDE9IjEyIiB5MT0iOCIgeDI9IjEyIiB5Mj0iMTIiPjwvbGluZT48bGluZSB4MT0iMTIiIHkxPSIxNiIgeDI9IjEyLjAxIiB5Mj0iMTYiPjwvbGluZT48L3N2Zz4=') no-repeat center center; background-size:contain; } .lwt-content { position:absolute; bottom:20%; transform:translateX(-50%); left:50%; width:700px; height:700px; border-radius:5px; visibility:hidden; transition:opacity 0.3s; z-index:100; } .lwt-content img { max-width:700px; max-height:700px; min-width:400px; min-height:400px; } .lwt:hover + .lwt-content { opacity:1; visibility:visible; } } /**========================= [[ 1280px 이상 ]] =========================**/ @media(min-width:1280px) { /* Payment page */ .payment .inner-wrap { display:block; } .payment .tab-wrap { max-width:none; border:none; } .payment .tab-wrap li:nth-child(1) { width:33rem; } .payment .tab-wrap li a { padding:0; font-size:1.0625rem; cursor:auto; } .payment .tab-wrap li.current:before { opacity:0; } .payment .content-wrap { display:flex; max-width:none; padding:.5rem 0 0!important; } /* Payment page - payForm */ .payment .content-wrap .payForm { flex-shrink:0; display:block; width:30rem; box-shadow:0 .25rem 1.25rem rgba(0, 0, 0, .04); overflow-y:hidden; } .payment .payForm .input { margin:0 .75rem 1.375rem; } .payment .payForm .input:nth-child(1) { width:calc(60% - 1.5rem); } .payment .payForm .input:nth-child(2) { width:calc(40% - 1.5rem); } .payment .payForm .input:nth-child(3) { width:calc(60% - 1.5rem); } .payment .payForm .input:nth-child(4) { width:calc(40% - 1.5rem); } .payment .payForm .input:nth-child(5) { width:calc(60% - 1.5rem); } .payment .payForm .input:nth-child(6) { width:calc(40% - 1.5rem); } .payment .payForm .input:nth-child(7) { width:calc(50% - 1.5rem); } .payment .payForm .input:nth-child(8) { width:calc(50% - 1.5rem); } .payment .payForm .input:nth-child(9) { width:calc(70% - 1.5rem); } .payment .payForm .input:nth-child(10) { width:calc(30% - 1.5rem); } .payment .payForm .input:nth-child(11) { width:calc(40% - 1.5rem); } .payment .payForm .input:nth-child(12) { width:calc(30% - 1.5rem); } .payment .payForm .input:nth-child(13) { width:calc(30% - 1.5rem); } /* Payment page - cardInfo */ .payment .content-wrap .cardInfo { display:block; width:calc(100% - 33rem); max-width:none; margin-left:3rem; padding:2rem 1.75rem 1rem; box-shadow:0 .25rem 1.25rem rgba(0, 0, 0, .04); } /* Invitation page - reset */ .invitation { padding:1.5rem 1rem 0; } .invitation .inner-wrap { display:block; } .invitation .tab-wrap { max-width:none; border:none; } .invitation .tab-wrap li:nth-child(1) { width:23rem; } .invitation .tab-wrap li a { padding:0; font-size:1.0625rem; } .invitation .tab-wrap li.current:before { opacity:0; } .invitation .content-wrap { display:flex; max-width:none; padding:.5rem 0 2rem; } /* Invitation page - invitationForm */ .invitation .content-wrap .invitationForm { flex-shrink:0; display:block; position:relative; width:20rem; padding:1.2rem 1.2rem 3.5rem; border-radius:1.625rem; background:#454545; } .invitation .content-wrap .invitationForm:before, .content-wrap .invitationForm:after { content:""; position:absolute; top:0; left:0; right:0; bottom:0; box-sizing:border-box; border-radius:inherit; pointer-events:none; } .invitation .content-wrap .invitationForm:before { box-shadow:inset 0 0 .6rem rgba(0, 0, 0, .5); z-index:1; } .invitation .content-wrap .invitationForm:after { border:1.2rem solid #454545; border-bottom-width:3.5rem; } .invitation .content-wrap .mobile-button-shape1:before, .content-wrap .mobile-button-shape1:after, .content-wrap .mobile-button-shape2:before, .content-wrap .mobile-button-shape2:after { content:""; position:absolute; box-sizing:border-box; pointer-events:none; } .invitation .content-wrap .mobile-button-shape1:before, .content-wrap .mobile-button-shape2:before, .content-wrap .mobile-button-shape2:after { top:30%; left:-.1875rem; width:.375rem; height:3rem; border-radius:.1875rem; background:#454545; } .invitation .content-wrap .mobile-button-shape1:after { left:50%; bottom:.6875rem; transform:translateX(-50%); width:2.125rem; height:2.125rem; border-radius:50%; background:#767676; z-index:1; } .invitation .content-wrap .mobile-button-shape2:before { height:2.25rem; margin-top:-4rem; } .invitation .content-wrap .mobile-button-shape2:after { height:2.25rem; margin-top:-7rem; } .invitation .content-wrap .invitation-search-form { height:100%; min-height:32.5rem; padding:1rem; border-radius:.5rem; background:#fff; overflow:hidden; } /* Invitation page - userInfo */ .invitation .content-wrap .userInfo { display:block; width:calc(100% - 23rem); max-width:none; margin-left:3rem; padding:2rem; box-shadow:0 .25rem 1.25rem rgb(0 0 0 / 4%); background:#fff; overflow-y:auto; } .invitation .userInfo .admin-search-form { padding:0; border-radius:0; box-shadow:none; background:none; } .invitation .userInfo .admin-search-form:after { display:none; } .invitation .userInfo .search-wrap .input { flex-direction:row; align-items:center; width:auto; } .invitation .userInfo .search-wrap .input>label { margin:0 .75rem 0 0; white-space:nowrap; text-align:right; } .invitation .userInfo .search-wrap .input:nth-child(2), .userInfo .search-wrap .input:nth-child(2) input { width:auto; } .invitation .userInfo .merchant-send-list-box, .userInfo .merchant-search-list-box { width:auto; } .invitation .userInfo .user-list { margin-top:1rem; } }