@charset "utf-8"; /* ----------------------------------------------
UI.CSS
* writer : uxcamp
* email : master@uxcamp.net
* license : © 2025 uxcamp. All rights reserved.
* version : 1.0.0
* last update : 2025.06.20
------------------------------------------------*/
@import url(//cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css); 
@import url('https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css');

/* --------------------------------------------------------
Reset
----------------------------------------------------------*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; box-sizing:border-box; -webkit-box-sizing:border-box;} 

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;} 
body { line-height:1;} 
ol, ul {} 
blockquote, q { quotes:none;} 
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none;} 
table { border-collapse:separate; border-spacing:0;} 

legend { position:absolute; width:0; height:0; overflow:hidden; font-size:0; text-indent:-9999px; line-height:0;} 
caption { position:absolute; width:0; height:0; overflow:hidden; font-size:0; text-indent:-9999px; line-height:0;} 
label { cursor:pointer;}

/* ---- Setting ---- */ 
body > * :disabled { cursor:not-allowed !important;} 

:root {
    /* ---- 프라이머리 컬러 시스템 ---- */
    --prime-color: #7d38ce;
    --prime-hover: #6a2db3;
    --prime-light: #9857e3;
    --prime-lighter: #b380e8;
    --prime-lightest: #e6d9f5;
    
    /* ---- 기본 컬러 ---- */
    --white-color: #ffffff;
    --black-color: #1e2939;
    --default-color: #dde1e9;
    
    /* ---- 그레이 컬러 시스템 ---- */
    --gray-100: #f8f9fa;
    --gray-200: #f3f4f6;
    --gray-300: #eaedf0;
    --gray-400: #d1d5dc;
    --gray-500: #7a828d;
    --gray-600: #6b7280;
    --gray-700: #4b5563;
    --gray-800: #374151;
    --gray-900: #1f2937;
    
    /* ---- 상태 컬러 ---- */
    --success-color: #64a644;
    --success-light: #86c55f;
    --info-color: #1cb6ed;
    --info-light: #4fc9f2;
    --warning-color: #fc6e51;
    --warning-light: #fd8b77;
    --danger-color: #ed5565;
    --danger-light: #f2777a;
    
    /* ---- 배경 컬러 (통합) ---- */
    --bg-main: var(--white-color);
    --bg-sub: #fafafa;
    --bg-third: #efefef;
    --bg-section: var(--gray-100);
    
    /* ---- 테두리 컬러 ---- */
    --border-main: #e6e6e6;
    --border-sub: #eeeeee;
    --border-light: var(--gray-300);
    --border-dark: var(--gray-400);
    
    /* ---- 텍스트 컬러 (통합) ---- */
    --text-primary: var(--black-color);
    --text-secondary: #333333;
    --text-tertiary: #777777;
    --text-quaternary: #999999;
    --text-disabled: var(--gray-400);
    --text-white: var(--white-color);
    --text-muted: var(--gray-500);
    
    /* ---- 앵커 컬러 ---- */
    --anchor-color: var(--text-secondary);
    --anchor-hover: var(--prime-color);
    
    /* ---- 기존 변수들 (하위 호환) ---- */
    --cleargray-color: var(--gray-300);
    --clearlowgray-color: var(--gray-200);
    --gray-color: var(--gray-500);
    
    /* ---- 레이아웃 변수들 (통합) ---- */
    --layout-prime-color: var(--prime-color);
    --layout-anchor-color: var(--anchor-color);
    --layout-bg-main-color: var(--bg-main);
    --layout-bg-sub-color: var(--bg-sub);
    --layout-bg-third-color: var(--bg-third);
    --layout-border-main-color: var(--border-main);  
    --layout-border-sub-color: var(--border-sub);
    --layout-txt-black-color: var(--text-primary);
    --layout-txt-white-color: var(--text-white);
    --layout-txt-gray01-color: var(--text-secondary);
    --layout-txt-gray02-color: var(--text-tertiary);
    --layout-txt-gray03-color: var(--text-quaternary);
    --layout-txt-gray04-color: var(--text-disabled);
    
    /* ---- 보드 변수들 (통합) ---- */
    --board-bg-01: var(--bg-main);
    --board-bg-02: var(--bg-sub);
    --board-bg-03: var(--bg-third);
    --board-border-01: var(--border-main);
    --board-border-02: var(--border-sub);
    --board-txt-black-color: var(--text-primary);
    --board-txt-white-color: var(--text-white);
    --board-txt-gray01-color: var(--text-secondary);
    --board-txt-gray02-color: var(--text-tertiary);
    --board-txt-gray03-color: var(--text-quaternary);
    --board-txt-gray04-color: var(--text-disabled);
    
    /* ---- 레이아웃 크기 ---- */
    --round-s: .46rem;
    --round-m: .7rem;
    --round-l: 1.4rem;
    --round-x: 2.6rem;
    --round-circle: 50%;
    
    --padding-s: 0.8rem;
    --padding-m: 1.0rem;
    --padding-l: 1.4rem;
    --padding-x: 1.8rem;

    --gap-s: 0.8rem;
    --gap-m: 1.0rem;
    --gap-l: 1.4rem;
    --gap-x: 1.8rem;
} 

/* ------------------------------------------------------------------
SCROLL , SELECTION
------------------------------------------------------------------ */
/* ---- Scroll bar - webkit ----*/
::-webkit-scrollbar { height:10px; width:10px;} 
::-webkit-scrollbar-thumb { border:2px solid transparent; background-color:rgba(0, 0, 0, 0.16); background-clip:padding-box; border-radius:20px} 

/* selection */
::selection { background:var(--gray-800); color:var(--text-white); text-shadow:none;}
::-webkit-selection { background:var(--gray-800); color:var(--text-white); text-shadow:none;} 

/* ms-clear */
input::-ms-clear { display:none;} 

/* placeholder */
input::-webkit-input-placeholder { color:rgba(0, 0, 0, 0.5) !important;} 

/* --------------------------------------------------------
GLOBAL class
----------------------------------------------------------*/
.tossface {font-family:Tossface;}
.animate {transition:all .2s cubic-bezier(.7,0,.3,1);transform:all .2s cubic-bezier(.7,0,.3,1);-webkit-transition:all .2s cubic-bezier(.7,0,.3,1);}
.ellipsis {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.restrict {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.required {display:block;}
.filter_blur6 {filter:blur(6px); -webkit-filter:blur(6px);}
.filter_blur10 {-webkit-filter:blur(10px);filter:blur(10px);}
.hide {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
.sr-only {position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip-path:inset(50%);clip:rect(0 0 0 0);}

/* round */
.round-s {border-radius:var(--round-s) !important;}
.round-m {border-radius:var(--round-m) !important;}
.round-l {border-radius:var(--round-l) !important;}
.round-x {border-radius:var(--round-x) !important;}
.round-circle {border-radius:var(--round-circle) !important;}

/* padding */
.padding-s {padding:var(--padding-s) !important;}
.padding-m {padding:var(--padding-m) !important;}
.padding-l {padding:var(--padding-l) !important;}
.padding-x {padding:var(--padding-x) !important;}

/* color */
.color-pr {color:var(--prime-color) !important;}
.color-de {color:var(--default-color) !important;}
.color-wh {color:var(--white-color) !important;}
.color-bl {color:var(--black-color) !important;}
.color-gr {color:var(--gray-color) !important;}
.color-cg {color:var(--cleargray-color) !important;}
.color-clg {color:var(--clearlowgray-color) !important;}
.color-su {color:var(--success-color) !important;}
.color-in {color:var(--info-color) !important;}
.color-wa {color:var(--warning-color) !important;}
.color-da {color:var(--danger-color) !important;}

/* bg */
.bg-pr {background:var(--prime-color) !important;}
.bg-de {background:var(--default-color) !important;}
.bg-wh {background:var(--white-color) !important;}
.bg-bl {background:var(--black-color) !important;}
.bg-gr {background:var(--gray-color) !important;}
.bg-cg {background:var(--cleargray-color) !important;}
.bg-clg {background:var(--clearlowgray-color) !important;}
.bg-su {background:var(--success-color) !important;}
.bg-in {background:var(--info-color) !important;}
.bg-wa {background:var(--warning-color) !important;}
.bg-da {background:var(--danger-color) !important;}

/* line */
.line-pr {border:1px solid var(--prime-color) !important;}
.line-de {border:1px solid var(--default-color) !important;}
.line-wh {border:1px solid var(--white-color) !important;}
.line-bl {border:1px solid var(--black-color) !important;}
.line-gr {border:1px solid var(--gray-color) !important;}
.line-cg {border:1px solid var(--cleargray-color) !important;}
.line-clg {border:1px solid var(--clearlowgray-color) !important;}
.line-su {border:1px solid var(--success-color) !important;}
.line-in {border:1px solid var(--info-color) !important;}
.line-wa {border:1px solid var(--warning-color) !important;}
.line-da {border:1px solid var(--danger-color) !important;}

/* shadowline */
.shadowline-pr {box-shadow:inset 0 0 0 1px var(--prime-color) !important;}
.shadowline-de {box-shadow:inset 0 0 0 1px var(--default-color) !important;}
.shadowline-wh {box-shadow:inset 0 0 0 1px var(--white-color) !important;}
.shadowline-bl {box-shadow:inset 0 0 0 1px var(--black-color) !important;}
.shadowline-gr {box-shadow:inset 0 0 0 1px var(--gray-color) !important;}
.shadowline-cg {box-shadow:inset 0 0 0 1px var(--cleargray-color) !important;}
.shadowline-clg {box-shadow:inset 0 0 0 1px var(--clearlowgray-color) !important;}
.shadowline-su {box-shadow:inset 0 0 0 1px var(--success-color) !important;}
.shadowline-in {box-shadow:inset 0 0 0 1px var(--info-color) !important;}
.shadowline-wa {box-shadow:inset 0 0 0 1px var(--warning-color) !important;}
.shadowline-da {box-shadow:inset 0 0 0 1px var(--danger-color) !important;}

/* gap */
.gap-s {gap:var(--gap-s) !important;}
.gap-m {gap:var(--gap-m) !important;}
.gap-l {gap:var(--gap-l) !important;}
.gap-x {gap:var(--gap-x) !important;}


/* --------------------------------------------------------
GLOBAL class
----------------------------------------------------------*/
/* flexBox__align */
.fb_x {display:flex; display:-webkit-flex; justify-content:center;/* */ -webkit-justify-content:center;}
.fb_y {display:flex; display:-webkit-flex; align-items:center;/* */ -webkit-align-items:center;}
.fb_xy {display:flex; display:-webkit-flex; justify-content:center; align-items:center;/* */ -webkit-justify-content:center; -webkit-align-items:center;}
.fb_e {display:flex; display:-webkit-flex; justify-content:flex-start;/* */ -webkit-justify-content:flex-start;}
.fb_w {display:flex; display:-webkit-flex; justify-content:flex-end;/* */ -webkit-justify-content:flex-end;}
.fb_ey {display:flex; display:-webkit-flex; justify-content:flex-start; align-items:center;/* */ -webkit-justify-content:flex-start; -webkit-align-items:center;}
.fb_wy {display:flex; display:-webkit-flex; justify-content:flex-end; align-items:center;/* */ -webkit-justify-content:flex-end; -webkit-align-items:center;}
.fb_ew {display:flex; display:-webkit-flex; justify-content:space-between;/* */ -webkit-justify-content:space-between;}
.fb_ewy {display:flex; display:-webkit-flex; justify-content:space-between; align-items:center;/* */ -webkit-justify-content:space-between; -webkit-align-items:center;}

/* flexBox__align_option */
.fb_dir_x {flex-direction:row ;}
.fb_dir_y {flex-direction:column;}

/* flexBox_item_align */
.fi_start {align-self:flex-start;}
.fi_end {align-self:flex-end;}
.fi_xy {align-self:center;}


/* ------------------------------------------------------------------
FORM Font
------------------------------------------------------------------ */
input, textarea, select, button ,table tr td { font-family: "Pretendard Variable", Pretendard;} 

/* ------------------------------------------------------------------
FORM INPUT
------------------------------------------------------------------ */
input {width:100%; height:40px; padding:0 8px; font-weight:400; box-sizing:border-box; border:1px solid var(--default-color); background: var(--white-color); color:var(--black-color); border-radius: var(--round-m);}
input:hover {border:1px solid var(--prime-color);}
input[readonly] {opacity:0.5; pointer-events:none;}
input[readonly]:hover,
input[readonly]:focus {outline:none; box-shadow:none;}
input[disabled] {background:var(--cleargray-color) !important; color:rgba(0,0,0,0.4); pointer-events:none;}
input[disabled]:hover,
input[disabled]:focus {outline:none; box-shadow:none;}

/* data-status */
/* input[data-status] {} 
input[data-status="confirm"] { border:1px solid var(--prime-color);} 
input[data-status="confirm"]:hover { box-shadow:0 0 0 3px rgba(100 81 246 / 20%);} 
input[data-status="confirm"] ~ .desc { color:var(--prime-color);} 
input[data-status="warning"] { border:1px solid #EF4444; color:#EF4444; background: url(../images/svg/input_warning.svg) no-repeat center right 10px #FAFAFA;} 
input[data-status="warning"]:hover { box-shadow:0 0 0 3px rgba(239 68 68 / 20%);} 
input[data-status="warning"] ~ .desc { color:#EF4444;} */

/* ------------------------------------------------------------------
SELECT
------------------------------------------------------------------ */
select {width:100%; height:40px; padding:0 14px; border:1px solid var(--default-color); border-radius:var(--round-m); background:url(../img/form/drop_down.svg)#fff no-repeat right 6px center; cursor:pointer; appearance:none; box-sizing:border-box; -webkit-appearance:none;}
select option:hover,
select option[selected] {background:var(--prime-color); color:var(--text-white);}
select:disabled {background:url(../img/form/drop_down.svg)var(--gray-300) no-repeat right 6px center; pointer-events:none;}

/* ------------------------------------------------------------------
INPUT ADDON
------------------------------------------------------------------ */
.inputAddon {display:flex; align-items:center; position:relative; width:100%;}
.inputAddon input {padding:0 50px 0 40px;}
.inputAddon .bx {display:flex; justify-content:center; align-items:center; position:absolute; top:0; left:0; width:40px; height:40px; opacity:0.6; color:var(--text-primary); font-size:16px;}
.inputAddon .button {position:absolute; top:0; right:0; margin:5px;}
/* --------------------------------------------------------
FORM TEXTAREA
----------------------------------------------------------*/
textarea {width:100%; padding:8px; font-size:16px; font-weight:400; box-sizing:border-box; resize:none; border-radius:var(--round-m); color: var(--black-color); background: var(--white-color); border: 1px solid var(--default-color);}
textarea:hover {border:1px solid var(--prime-color);}
textarea[readonly] {opacity:0.5; pointer-events:none;}
textarea[readonly]:hover,
textarea[readonly]:focus {pointer-events:none;}
textarea[disabled] {background:var(--cleargray-color) !important; color:rgba(0,0,0,0.7); text-shadow:1px 1px 0px rgba(255,255,255,1); pointer-events:none;}
textarea[disabled]:hover,
textarea[disabled]:focus {outline:none; box-shadow:none;}

/* ----------------------------------------------
BUTTON
------------------------------------------------*/
button {margin:0; padding:0; border:none; background:none; cursor:pointer; transition:all 0.2s ease 0s;-webkit-font-smoothing:antialiased; -webkit-appearance:none; appearance:none; color:inherit;}
.button {display:flex; justify-content:center; align-items:center; position:relative; overflow:hidden; border:none; font-weight:700; white-space:nowrap;}
.button span {position:relative; z-index:1;}
.button:hover {opacity:0.6;}
.button:active {}
.button:disabled {background:var(--cleargray-color) !important; color:rgba(0, 0, 0, 0.3) !important; pointer-events:none;}
.button[readonly] {opacity:0.5; pointer-events:none;}
.button[readonly]:hover,
.button[disabled]:hover {opacity:1;}

/* button OPTION
----------------------------------*/
/* option - shap */
.button.round-circle {padding:0 !important; border-radius:var(--round-circle);}
.button.round-circle.sBtn {width:30px; font-size:18px;}
.button.round-circle.mBtn {width:40px; font-size:26px;}
.button.round-circle.lBtn {width:50px; font-size:40px;}

/* option - icon */
.button.bxicon {display:flex; align-items:center; gap:6px;}
.button.bxicon.sBtn .bx {font-size:16px;}
.button.bxicon.mBtn .bx {font-size:20px;}
.button.bxicon.lBtn .bx {font-size:26px;}

/* option - btnSize */
.button.ssBtn {height:24px;padding:0 12px;font-size: 12px;}
.button.sBtn {height:30px;padding:0 12px;font-size: 12px;}
.button.mBtn {height:40px; padding:0 20px; font-size:14px;}
.button.lBtn {height:50px; padding:0 30px; font-size:18px;}

/* option - fullsize */
.button.fw {width:calc(100% - 0px) !important;}

/* option - gapunset */
.button.gapunset {gap:unset !important;}

/* ------------------------------------------------------------------
FORM radio , checkbox
------------------------------------------------------------------ */
.opt {display:flex; justify-content:center; align-items:center; position:relative;}
.opt input[type=radio],
.opt input[type=checkbox] {position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; margin:0; opacity:0;}
.opt input[type=radio]+label,
.opt input[type=checkbox]+label {display:flex; justify-content:flex-start; align-items:center; visibility:visible; position:relative; font-size:15px; cursor:pointer; word-break:break-all;}
.opt input[type=radio]+label span.text,
.opt input[type=checkbox]+label span.text {display:flex; align-items:center; margin:0 6px; overflow:hidden; color:var(--text-secondary); font-weight:500; line-height:18px;}
.opt input[type=radio]+label:before {display:inline-block; width:18px; min-width:18px; height:18px; border-radius:50%; color:var(--gray-400); font-size:30px; vertical-align:middle; box-sizing:border-box;}
.opt input[type=checkbox]+label:before {display:inline-block; width:18px; min-width:18px; height:18px; border-radius:4px; background:var(--white-color); color:var(--gray-400); font-size:30px; vertical-align:middle; box-sizing:border-box;}
.opt input[type=radio]:disabled+label,
.opt input[type=checkbox]:disabled+label {opacity:0.5; cursor:default; filter:grayscale(1);}
.opt input[type=radio]:disabled+label:before,
.opt input[type=checkbox]:disabled+label:before {color:var(--gray-300);}
.opt input[type=radio]+label:before {content:''; background:var(--white-color); box-shadow:inset 0 0 0 2px var(--gray-500);}
.opt input[type=radio]:checked+label:before {box-shadow:inset 0 0 0 6px var(--prime-color);}
.opt input[type=checkbox]+label:before {content:''; box-shadow:inset 0 0 0 1px var(--gray-500);}
.opt input[type=checkbox]:checked+label:before {background:var(--prime-color); box-shadow:none;}
.opt input[type=checkbox]:checked+label:after {content:"\ea41"; position:absolute; top:50%; left:0; width:18px; height:18px; color:var(--white-color); font-style:normal; font-variant:normal; font-size:16px; font-weight:400; font-family:boxicons !important; text-rendering:auto; line-height:1; transform:translate(0, -50%);}
.opt input[type=checkbox]:indeterminate+label:before {background:var(--prime-color); box-shadow:none;}
.opt input[type=checkbox]:indeterminate+label:after {content:''; position:absolute; top:50%; left:0; width:19px; height:19px; background:url(../img/icon/icon_checkbox_partial.svg)no-repeat; transform:translate(0, -50%);filter:grayscale(1) brightness(10);}
.opt.dark {display:block; margin:10px 0;}
.opt.dark input[type=radio]+label span.text,
.opt.dark input[type=checkbox]+label span.text {color:var(--white-color); font-size:16px; font-weight:300;}
.opt.dark input[type=checkbox]:checked+label:before {background:var(--white-color);}
.opt.dark input[type=checkbox]:checked+label:after {filter:none;}
.opt input[type=radio]:focus ~ label,
.opt input[type=checkbox]:focus ~ label {outline:-webkit-focus-ring-color auto 1px;}

/* --------------------------------------------------------
SWITCH
----------------------------------------------------------*/
.switch {display:inline-block; position:relative; width:64px; height:30px; border-radius:20px; vertical-align:middle;}
.switch input {position:absolute; z-index:1; left:0; width:100%; height:100%; margin:0; opacity:0; pointer-events:none;}
.switch .switch_input:checked ~ .switch_label {background:var(--prime-color);}
.switch .switch_input:checked ~ .switch_label:before {opacity:0;}
.switch .switch_input:checked ~ .switch_label:after {opacity:1;}
.switch .switch_input:checked ~ .switch_handle {left:38px;}
.switch .switch_label {display:block; position:relative; height:inherit; border-radius:inherit; background:var(--gray-500); font-size:10px; cursor:pointer; transition:0.15s ease-out;-webkit-transition:0.15s ease-out;}
.switch .switch_label:before, .switch_label:after {position:absolute; top:10px; line-height:10px; transition:inherit;-webkit-transition:inherit;}
.switch .switch_label:before {content:attr(data-off); right:10px; color:var(--white-color); font-weight:bold;}
.switch .switch_label:after {content:attr(data-on); left:10px; opacity:0; color:var(--white-color); font-weight:bold;}
.switch .switch_handle {position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:10px; background:var(--white-color); cursor:pointer; transition:left 0.15s ease-out;-webkit-transition:left 0.15s ease-out;}
.switch .switch_handle:before {content:''; display:none; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:var(--danger-color);}
.switch .switch_input:disabled ~ .switch_label,
.switch .switch_input:disabled ~ .switch_handle {opacity:0.5; cursor:not-allowed !important;}

/* --------------------------------------------------------
cardBox
----------------------------------------------------------*/
.cardBox {} 


/* --------------------------------------------------------
LABELBOX
----------------------------------------------------------*/
.labelBox { display: inline-flex; align-items:center; height: 24px; padding:0 14px; font-size: 12px; font-weight:600; white-space:nowrap; width: fit-content;} 

/* --------------------------------------------------------
ICONBOX
----------------------------------------------------------*/
.iconBox { padding: 3px 3px; font-size: 10px; font-weight:800; min-width:14px; height:14px; display: inline-flex; vertical-align: middle; justify-content: space-evenly; align-items: center;} 

/* --------------------------------------------------------
MODAL
----------------------------------------------------------*/

@keyframes ShowPop { 
 0% { opacity:0; transform:translate3d(0, -100px, 0);} 
100% { opacity:1; transform:translate3d(0, 0, 0);} 
 }

@keyframes HidePop { 
 0% { opacity:1; transform:translate3d(0, 0, 0);} 
100% { opacity:0; transform:translate3d(0, -100px, 0);} 
 }

@keyframes dimShowPop { 
 0% { opacity:0;} 
100% { opacity:1;} 
 }
@keyframes dimHidePop { 
 0% { opacity:1;} 
100% { opacity:0;} 
 }

.multiModal.hide {}
.multiModal.hide .modalBox {animation:HidePop 0.3s;}
.multiModal.hide .multiModal:after {animation:dimHidePop 0.2s;}
.multiModal.active {display:flex; flex-wrap:wrap; overflow:auto;}
.multiModal {display:none; flex-wrap:wrap; justify-content:center; align-items:center; position:fixed; z-index:99; top:0px; left:0px; right:0px; bottom:0px; overflow:auto; -webkit-justify-content:center; -webkit-align-items:center; -ms-flex-pack:center; -ms-flex-align:center;}
.multiModal:after {content:''; position:fixed; z-index:1; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.6); animation:dimShowPop 0.1s;}
.modalBox {position:relative; z-index:2; width:400px; overflow:hidden; border-radius:16px; background:var(--white-color); box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box; animation:ShowPop 0.2s;}
.modalBox.responseHeight {height:100%;}
.modalBox.w310 {width:310px;}
.modalBox.w400 {width:400px;}
.modalBox.w500 {width:500px;}
.modalBox.w560 {width:560px;}
.modalBox.w600 {width:600px;}

.modalBox .mbHeader {display:flex; justify-content:space-between; align-items:center; height:42px; padding:0 20px; border-bottom:1px solid var(--cleargray-color);}
.modalBox .mbHeader .backBtn {display:none;}
.modalBox .mbHeader .title {display:flex; align-items:center; flex-direction:row;}
.modalBox .mbHeader .title h2 {color:var(--prime-color); font-size:16px; font-weight:500;}

.modalBox .mbHeader .tools {display:flex;}
.modalBox .mbHeader .tools button {margin:0 3px;}
.modalBox .mbHeader ~ .mbBody {}
.modalBox .mbBody {padding:10px;}
.modalBox .mbBody::-webkit-scrollbar {height:4px; width:4px}
.modalBox .mbBodyt::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:rgba(0,0,0,0.2); background-clip:padding-box;}
.modalBox .mbBody .mbBodyContents {width:calc(100% - 0px); height:100%; max-height:1000px; overflow:auto;}
.modalBox .mbBody .mbBodyContents .article {height:100%; margin:20px; color:var(--text-muted); font-size:15px; line-height:20px;}
.modalBox .mbBody .mbBodyContents .article .icon i {color:var(--prime-color); font-size:60px; line-height:1.2;}

.modalBox .buttonWrap {display:flex; justify-content:center; align-items:center; padding:16px; border-top:1px solid var(--cleargray-color); gap:10px;}
.modalBox .buttonWrap span {}
.modalBox .buttonWrap button {min-width:calc(50% - 5px);}

/* ----------------------------------------------
LODER
------------------------------------------------*/
/* loader */
.loading { overflow:hidden;} 
.loading:before { content:""; position:absolute; top:50%; left:50%; width:60px; height:60px; border-radius:50%; margin:-40px 0 0 -40px; z-index:999; border-top:4px solid var(--prime-color); border-right:4px solid rgba(255, 255, 255, 0); border-bottom:4px solid var(--prime-color); border-left:4px solid rgba(255, 255, 255, 0); font-size:10px; transform:translateZ(0); animation:load 0.6s infinite linear; -webkit-transform:translateZ(0); -webkit-animation:load 0.6s infinite linear;} 

@-webkit-keyframes load { 
 0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);} 
 100% { transform:rotate(360deg); -webkit-transform:rotate(360deg);} 
 }
@keyframes load { 
 0% { transform:rotate(0deg); -webkit-transform:rotate(0deg);} 
 100% { transform:rotate(360deg); -webkit-transform:rotate(360deg);} 
 }

/* --------------------------------------------------------
MODULE UI
----------------------------------------------------------*/
/* headingBox */
.headingBox {display:flex;flex-direction:column;gap:10px;line-height: 1.2;}
.headingBox h2 {font-size:22px;}
.headingBox .desc {color:var(--gray-color); font-size:12px;}

/* headingBox */
.bbsHeading {display:flex;gap:10px;line-height: 1.2;justify-content: space-between;align-items: center;width: 100%;}
.bbsHeading h2 {font-size:22px;font-weight: 500;}

/* breadcrumbs */
.breadcrumbs {}
.breadcrumbs ul {display:flex;}
.breadcrumbs ul li {display:flex; align-items:center; color:var(--black-color); font-size:12px;}
.breadcrumbs ul li::before {content:"\ea50"; color:var(--gray-color); font-size:20px; font-family:boxicons!important;}
.breadcrumbs ul li:first-child::before {display:none;}


