@charset "utf-8";

/* --------------------------------------------------------
Reset
----------------------------------------------------------*/
body > * :disabled {cursor:not-allowed !important;}
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;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1;}
/*
ol, ul {list-style:none;}
*/
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
table {border-collapse:separate; border-spacing:0;}

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

.tooltip .tooltip-inner {border-radius:4px !important;}
/* --------------------------------------------------------
GLOBAL class
----------------------------------------------------------*/


.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;}
.required {display:inline-flex; align-items:center; color:#ff0000; font-size:12px; vertical-align:middle; font-style:normal; margin:0 2px;}
.errorMessage {display:block; color:#ff0000; font-size:12px; font-style:normal;}
.ui-tooltip {display:block; position:absolute; z-index:400; padding:0 16px; border-radius:20px; background:rgba(0,0,0,0.6); color:#FFF; font-size:14px; line-height:26px;}
.ui-helper-hidden-accessible {}
.filter_blur6 {filter:blur(6px); -webkit-filter:blur(6px);}
.text_left {text-align:left;}
.text_right {text-align:right;}
.text_center {text-align:center;}
.hidden {display:none;}
.hide {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
.sound_only {position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; border:0; clip:rect(0,0,0,0);}
.noData {display:flex; justify-content:center; align-items:center; font-size:14px; position:relative; height:calc(100% - 0px); min-height:80px; overflow:hidden !important; color:#666; font-size:14px;}

/* selectList */
.selectBox.active {}
.selectBox.active .selectNum {border-radius:0 0 20px 20px;}
.selectBox.active .selectList {display:block;}
.selectBox {position:relative;}
.selectBox .selectNum {display:block; position:relative; width:100%; height:36px; overflow:hidden; border-radius:20px; background:#424242; color:#fff; font-size:14px; text-indent:20px; text-overflow:ellipsis; line-height:36px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.selectBox .selectNum:after{content:"";position:absolute;top: 14px;right: 18px;border-bottom: 5px solid #fff;border-left: 5px solid transparent;border-right: 5px solid transparent;}
.selectBox .selectNum:focus,
.selectBox .selectNum:hover {background:#424242; color:#fff;}
.selectBox .selectList {display:none; position:absolute; z-index:999; left:0; bottom:36px; width:100%; border-radius:20px 20px 0 0; background:#424242;}
.selectBox .selectList ul {margin: 20px 20px 0 20px; border-bottom:1px solid #999999; box-sizing:border-box; position:relative; z-index:2;}
.selectBox .selectList li {display:block;}
.selectBox .selectList li a {display:block; width:100%; height:35px; overflow:hidden; color:#FFF; font-size:14px; text-overflow:ellipsis; line-height:35px; white-space:nowrap;}
.selectBox .selectList li a:hover {}
.selectBox .selectList .selectDim { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0); z-index:1;}

/* ------------------------------------------------------------------
SCROLL , SELECTION
------------------------------------------------------------------ */
/* ---- Scroll bar - webkit ----*/
::-webkit-scrollbar {height:12px; width:12px}
::-webkit-scrollbar-thumb {border:4px solid transparent; background-color:#909090; background-clip:padding-box; border-radius:7px;}

@media (max-width:992px) {
	::-webkit-scrollbar {height:4px; width:4px}
	::-webkit-scrollbar-thumb {border:0px solid transparent; background-color:#909090; background-clip:padding-box; border-radius:7px;}
}


/* selection */
::selection {background:#222; color:#FFF; text-shadow:none;}
::-webkit-selection {background:#222; color:#FFF; text-shadow:none;}

/* radio , checkbox
-------------------------------------*/
.opt {position:relative; display:inline-block;}

.opt input[type=radio], 
.opt input[type=checkbox] {position:absolute; 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; font-size:15px; cursor:pointer; overflow:hidden; visibility:visible; 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; color:var(--txt-gray01-color); font-weight:500;}
.opt input[type=radio]+label:before {display:inline-block; width:19px; min-width:19px; height:19px; color:#c7c9d1; font-size:30px; vertical-align:middle; border-radius:50%; box-sizing:border-box;}
.opt input[type=checkbox]+label:before {display:inline-block; width:19px; min-width:19px; height:19px; color:#c7c9d1; font-size:30px; vertical-align:middle; border-radius:4px; box-sizing:border-box;}

.opt input[type=radio]:disabled+label,
.opt input[type=checkbox]:disabled+label {cursor:default; opacity:0.4;}
.opt input[type=radio]:disabled+label:before,
.opt input[type=checkbox]:disabled+label:before {color:#ddd;}

.opt input[type=radio]+label:before {content:''; box-shadow:inset 0 0 0 2px #929292;}
.opt input[type=radio]:checked+label:before {content:''; 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(--border-main-color); background:var(--bg-main-color);}
.opt input[type=checkbox]:checked+label:before {background:var(--prime-color); box-shadow:none;}
.opt input[type=checkbox]:checked+label:after {content:"\ea41"; display:flex; justify-content: center; align-items: center; width:19px; height:19px; font-family: boxicons !important; position:absolute; top:0; left:0; font-weight: 900; color:#fff;}

/* .opt input[type=checkbox]:indeterminate+label:before {background:var(--prime-color); box-shadow:none;}
.opt input[type=checkbox]:indeterminate+label:after {content:''; width:19px; height:19px; background:url(../img/icon/icon_checkbox_partial.svg)no-repeat; position:absolute; top:50%; left:0; transform:translate(0, -50%); color:#fff;} */

.opt.dark {display:block; margin:10px 0;}
.opt.dark input[type=radio]+label span.text, 
.opt.dark input[type=checkbox]+label span.text {color:#fff; font-size:16px; font-weight:300;}
.opt.dark input[type=checkbox]:checked+label:before {background:#fff;}
.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;}


/* ------------------------------------------------------------------
FORM INPUT
------------------------------------------------------------------ */
input[type=number],
input[type=text],
input[type=password] {width:100%; height:40px; padding:0 10px; border:0; border:1px solid var(--border-main-color); background-color:var(--bg-main-color); color:var(--txt-black-color); border-radius:6px; font-size:14px; font-family:"Pretendard Variable", Pretendard; line-height:36px; box-sizing:border-box;}
input[type=password] {}
input[type=number]:focus,
input[type=text]:focus,
input[type=password]:focus {box-shadow:inset 0 0 0 1px var(--prime-color);}
input[type=number]:disabled,
input[type=text]:disabled,
input[type=password]:disabled {background:#fff; color:rgba(0,0,0,0.6); text-shadow:1px 1px 0px rgba(255,255,255,1); opacity:0.5;}
input[type=submit] {margin:0; padding:0; border:none; font-size:13px; cursor:pointer; appearance:none; font-family:"Pretendard Variable", Pretendard; color:#2e2e2e; font-weight:600;}

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

/* placeholder */
input:-ms-input-placeholder {color:#a9a9a9 !important;}
input::-webkit-input-placeholder {color:#a9a9a9 !important;}

/* inputFile
-------------------------------------*/
.inputFile {max-width:600px; margin-top:14px;}
.inputFile input {position:absolute; z-index:-1; width:0px; height:0px; overflow:hidden; opacity:0;}
.inputFile input:focus + label, .inputFile input + label:hover {background:#f8f8f8;}
.inputFile input + label {display:inline-block; position:relative; width:100%; padding:0; border:1px solid #ddd; background:#FFF; color:#333; cursor:pointer; visibility:visible;}
.inputFile input + label span {display:block; width:80%; padding:0 10px; overflow:hidden; text-align:left; text-overflow:ellipsis; white-space:nowrap;}
.inputFile input + label strong {display:block; position:absolute; top:0; right:0; padding:0 50px; border-left:1px solid #2c2c2c; background:#2c2c2c; color:#fff;}
.inputFile input + label span,
.inputFile input + label strong {height:40px; font-size:14px; line-height:40px;}

.inputFile ~ .agreement {margin:6px 0 !important;}

/* --------------------------------------------------------
FORM TEXTAREA
----------------------------------------------------------*/
textarea {width:100%; padding:8px; border:1px solid var(--border-sub-color); background-color:var(--bg-main-color); border-radius:6px; font-family:"Pretendard Variable", Pretendard; color:var(--txt-black-color); font-size:14px; line-height:20px; box-sizing:border-box; resize:none;}
textarea:focus {border-color:var(--prime-color);}
textarea:disabled {background:var(--bg-sub-color); color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}

/* --------------------------------------------------------
FORM SELECT
----------------------------------------------------------*/
select {width:100%; height:40px; padding:0; font-size:14px; color:var(--txt-gray01-color); border:1px solid var(--border-main-color); background:var(--bg-main-color); border-radius:6px; box-sizing:border-box; text-indent:8px; font-family: "Pretendard Variable", Pretendard;}
select:hover {}
select:focus,
select:active {border-bottom:1px solid var(--prime-color);}
select option:hover {background:#efefef;}
select option[selected] {background:#efefef; color:#000;}
select:disabled {background:#f8f8f8; color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}

/* --------------------------------------------------------
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.3s;}
.multiModal.active {display:flex; flex-wrap:wrap; overflow:auto;}
.multiModal {display:none; position:fixed; z-index:99; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.8); justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center;}
/* .multiModal:after {position:fixed; z-index:1; top:0px; left:0px; right:0px; bottom:0px; background:rgba(0,0,0,0.8); content:''; animation:dimShowPop 0.1s;} */
.multiModal::-webkit-scrollbar {height:10px; width:10px}
.multiModal::-webkit-scrollbar-thumb {border:2px solid transparent; background-color:rgba(255, 255, 255, 0.6); background-clip:padding-box; border-radius:7px;}
.modalBox {position:relative; z-index:2; width:410px; border-radius:16px; background:var(--bg-third-color); box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box; animation:ShowPop 0.1s;}

.modalBox .mbHeader {display:flex; justify-content:space-between; align-items:center; height:50px; padding:0 6px 0 20px; border-bottom:1px solid var(--border-main-color);}
.modalBox .mbHeader .backBtn {display:none;}
.modalBox .mbHeader .title {display:flex; flex-direction:row; align-items:center;}
.modalBox .mbHeader .title h2 {color:var(--txt-black-color); font-size:20px;}
.modalBox .mbHeader .tools {display:flex;}
.modalBox .mbHeader .tools .close {width:40px; height:40px; font-size:26px;}
.modalBox .mbBody {padding:20px;}
.modalBox .mbBody::-webkit-scrollbar {height:4px; width:4px}
.modalBox .mbBody::-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:700px; overflow:auto;}

.modalBox .buttonWrap {padding:0 20px 20px;}



/* --------------------------------------------------------
searchFilterBox
----------------------------------------------------------*/

/* --------------------------------------------------------
TOAST
----------------------------------------------------------*/

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

.toastModal {display:flex; display:-webkit-flex; position:fixed; z-index:99; left:0px; right:0px; bottom:0px; justify-content:center;-webkit-justify-content:center;}
.toastModal .toastBox {position:relative; z-index:2; width:500px;}
.toastModal .toastBox.w600 {width:600px;}
.toastModal .toastBox .toast {display:flex; display:-webkit-flex; margin:4px; padding:10px 20px; border-radius:4px; background:#333; box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box;animation:ToastShow 0.3s;justify-content:space-between;align-items:center; -webkit-justify-content:space-between; -webkit-align-items:center;}
.toastModal .toastBox .toast.hide {animation:ToastHide 0.3s;}
.toastModal .toastBox .toast .text {color:#FFF;}e
.toastModal .toastBox .toast .tools {}
.toastModal .toastBox .toast .tools button {color:#FFF;}

/* --------------------------------------------------------
BUTTON
----------------------------------------------------------*/
button {margin:0; padding:0; border:none; background:none; font-size:14px; cursor:pointer; appearance:none; color:var(--anchor-color); font-weight:500; line-height:1;}
.button {display:flex; justify-content:center; align-items:center; position:relative; background:var(--bg-main-color); cursor:pointer; white-space:nowrap;}
.button span {position:relative; z-index:1;}
.button:hover {color:var(--prime-color); border:1px solid var(--prime-color) !important;}
.button:active {background:var(--bg-main-color); text-decoration:none;}
.button:disabled {opacity:0.4;}
.button:disabled:hover {text-decoration:none;}
.button:disabled:hover:after {display:none; content:"";}

/* button icon
----------------------------------*/
.button.iconPopup {display:flex; align-items:center; justify-content: center}
.button.iconPopup::after {content:''; font-size:0; display:block; margin:0 -6px 0 6px; width:16px; height:16px; background:url(../img/icon/icon_popup.svg)no-repeat; background-size:cover; filter:brightness(0); opacity:0.5;}


/* button icon
----------------------------------*/
.button.icon {display:flex; align-items:center; gap:4px;}
.button.icon .bx {}
.button.icon .text {font-weight:600;}
.button.icon.midium .bx {font-size:14px;}
.button.icon.midium .text {font-size:14px;}
.button.iconbig {display:flex; align-items:center; gap:4px;}
.button.iconbig .bx {font-size:20px;}


/* button color
----------------------------------*/
.button.prime {color:var(--prime-color); border:1px solid var(--prime-color) !important;}
.button.bgPrime {background:var(--prime-color); border:1px solid var(--prime-color); color:#fff;}
.button.bgPrime:hover {border:1px solid var(--prime-color);}
.button.bgGray {background:var(--txt-gray02-color); color:var(--txt-gray02-color);}

.button.warning {color:#ed5565; border:1px solid #ed5565 !important;}
.button.warning:hover {background:var(--bg-main-color);}

.button.ai-transform-btn {background:linear-gradient(45deg, #667eea 0%, #764ba2 100%);; color:#fff; border: 0 !important;}
.button.black {background:#333; color:#fff;}
.button.gray {background:#f3f3f3; color:#333; border:0;}
.button.gray:hover {border:0 !important;}

.button.borderline {border:1px solid var(--border-main-color);}

/* fullWidth */
.button.fw {width:calc(100% - 0px);}

/* button align */
.button.center {justify-content:center;}

/* button size */
.button.mini {display:flex; justify-content:center; align-items:center; padding:4px 8px; border-radius:4px;}
.button.midium {padding:8px 12px; border-radius:6px;}
.button.midiumType02 {padding:12px; border-radius:6px;}
.button.midiumLandscape {padding:4px 16px; border-radius:6px;}

/* buttonWrap */
.buttonWrap {}
.buttonWrap hr {display:inline-block; vertical-align:middle; width:1px; height:22px; background:#CCC; margin:0 10px;}
/* button progress */
.button .progress {position:absolute; z-index:1; top:0px; left:0px; bottom:0px; background:rgba(0,0,0,0.14); pointer-events:none;}

/* button circle */
button.circle {width:40px; height:40px; border-radius:50%;}

/* button square */
button.square {width:36px; min-width: 36px; height:36px; border-radius:6px;}
/* button ico */
/* button.ico {width:36px; height:36px; min-width: 36px; border-radius:6px; border:0;}
button.ico:hover,
button.ico:active {border:0;} */



/* --------------------------------------------------------
SWITCH
----------------------------------------------------------*/
button.switch {display:inline-block; position:relative; width:54px; height:30px; border-radius:20px; vertical-align:middle; visibility:visible;}
button.switch:before,
button.switch:after {position:absolute; top:10px; line-height:10px; font-size:10px; color:rgba(255,255,255,1); font-weight:bold; transition:0.15s ease-out;-webkit-transition:0.15s ease-out; opacity:0;}
button.switch .switch_handle {position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:10px; background:#fff; pointer-events:none; transition:left 0.15s ease-out;-webkit-transition:left 0.15s ease-out;}
button.switch[role="switch"][data-on]:before {content:attr(data-on); left:6px;}
button.switch[role="switch"][data-off]:after {content:attr(data-off); right:6px;}
button.switch[role="switch"][aria-checked="true"] {background:var(--prime-color);}
button.switch[role="switch"][aria-checked="true"][data-on]:before {opacity:1;}
button.switch[role="switch"][aria-checked="true"] .switch_handle {left:29px;}
button.switch[role="switch"][aria-checked="false"] {background:#757575;}
button.switch[role="switch"][aria-checked="false"][data-off]:after {opacity:1;}
button.switch:disabled {cursor:not-allowed; opacity:0.5;}
/* --------------------------------------------------------
SWITCH
----------------------------------------------------------*/
.switch {display:inline-block; position:relative; width:54px; height:30px; border-radius:20px; vertical-align:middle; visibility:visible;}
.switch input {position:absolute; width:100%; height:100%; margin:0; opacity:0;}
.switch input:focus ~ .switch_label {outline:1px dotted var(--prime-color);}
.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:0;}
.switch .switch_input:checked ~ .switch_handle {left:29px;}
.switch .switch_label {display:block; position:relative; height:inherit; border-radius:inherit; background:#9b9ca3; 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 {right:10px; content:attr(data-off); color:rgba(255,255,255,1); font-weight:bold; opacity:0;}
.switch .switch_label:after {left:10px; opacity:0; content:attr(data-on); color:#fff; font-weight:bold;}
.switch .switch_handle {position:absolute; top:5px; left:5px; width:20px; height:20px; border-radius:10px; background:#fff; cursor:pointer; transition:left 0.15s ease-out;-webkit-transition:left 0.15s ease-out;}
.switch .switch_handle:before {display:none; position:absolute; top:50%; left:50%; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:#bd0635; content:'';}
.switch .switch_input:disabled ~ .switch_label,
.switch .switch_input:disabled ~ .switch_handle {cursor:default;}

/* --------------------------------------------------------
PROGRESS
----------------------------------------------------------*/
.progressBox {}
.progressBox .progress {position:relative; height:4px; margin:8px 0;}
.progressBox .progress:after {display:block; width:100%; height:4px; background:#eee; content:'';}
.progressBox .progress .progressbar {display:block; position:absolute; height:4px; background:var(--prime-color); transition:all 0.08s ease 0s;}
.progressBox .tools {font-size:12px;}

/* --------------------------------------------------------
TABLE
----------------------------------------------------------*/

.tableWrap {overflow:hidden;}
.tableWrap table {width:100%; color:#464646; font-size:14px; border-top:1px solid #e5e5e5; margin:0 -1px;}
.tableWrap table tbody {}
.tableWrap table tr th,
.tableWrap table tr td {position:relative; height:40px; padding:0 4px; overflow:hidden; border:0; text-align:center; text-overflow:ellipsis; vertical-align:middle; font-size:13px; word-break: break-word;}
.tableWrap table thead {border-bottom:1px solid #e5e5e5;}
.tableWrap table thead tr th {border-bottom:2px solid #e5e5e5; border-left:1px solid #e5e5e5; background:#f8f8f9; text-align:center; font-weight:400; line-height:14px;}
.tableWrap table thead tr th:first-child {border-left:0;}
.tableWrap table thead tr th.leftBorder {border-left:1px solid #e5e5e5;}

.tableWrap table thead tr th[aria-sort] {}
.tableWrap table thead tr th[aria-sort]:hover {background:#fff;}
.tableWrap table thead tr th[aria-sort] button {font-size:13px; font-weight:400; line-height:14px; padding:6px; font-family:'Noto Sans KR', sans-serif; width:100%; height:100%;}
.tableWrap table thead tr th[aria-sort] button:hover {text-decoration:underline;}
.tableWrap table thead tr th[aria-sort] button:active {box-shadow:inset 0 0 0 2px rgb(165 0 52); text-decoration:none;}
.tableWrap table thead tr th[aria-sort] button[aria-pressed="true"] {color:#cf0652;}
.tableWrap table thead tr th[aria-sort] button[aria-pressed="true"]:after  {color:#cf0652;}
.tableWrap table thead tr th[aria-sort] button:after {color:#68696e; font-size:10px; margin:0 4px;}
.tableWrap table thead tr th[aria-sort="ascending"] button:after {content:"▼";}
.tableWrap table thead tr th[aria-sort="descending"] button:after {content:"▲";}

.tableWrap table tbody tr td {border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; height:50px;}
.tableWrap table tbody tr td .title,
.tableWrap table tbody tr td .description {display:block; text-align:left; white-space:normal; word-break:break-all;}
.tableWrap table tbody tr td .title {padding-top:4px;}
.tableWrap table tbody tr td .description {padding-bottom:6px; line-height:18px;}
.tableWrap table tbody tr td .jsmartable-collapse {display:block; width:28px; height:28px; border-radius:50%; padding:0; filter:grayscale(1); opacity:0.6; margin:0 auto;}
.tableWrap table tbody tr td .jsmartable-collapse:hover {filter:grayscale(0); opacity:1;}
.tableWrap table tbody tr td .jsmartable-collapse:active {filter:grayscale(0.5); opacity:1;}
.tableWrap table tr th.left, .tableWrap table tr td.left {text-align:left;}
.tableWrap table tr th.center, .tableWrap table tr td.center {text-align:center;}
.tableWrap table tr th.right, .tableWrap table tr td.right {text-align:right;}
.tableWrap.fixed table {table-layout:fixed;}
.tableWrap.even table tbody tr:nth-child(even) {background:#fafafa;}
.tableWrap.odd  table tbody tr:nth-child(odd) {background:#fafafa;}
.tableWrap.box table {border:1px solid #DBDBDB;}
.tableWrap.noline table thead tr th, .tableWrap.noline table tbody tr td {border-left:0;}
.tableWrap.line table thead tr th:first-child, .tableWrap.line table tbody tr td:first-child {border-left:0px;}

/* sticky */
.tableWrap.sticky table {border-top:0;}
.tableWrap.sticky table tr th {position:sticky; top:0; z-index:1; border-top:1px solid #e5e5e5;}

/* tableResponsive */
.tableResponsive.nonRespons {overflow:hidden;}
.tableResponsive.nonEllipsis {}
.tableResponsive.nonEllipsis table tr td {white-space:inherit;}
.tableResponsive {border-top:2px solid #000;}
.tableResponsive table {width:100%; max-width:100%; color:#464646; font-size:14px; table-layout:initial;}
.tableResponsive table tbody {}
.tableResponsive table tr th,
.tableResponsive table tr td {font-size:15px; padding:20px 10px; overflow:hidden; border:0; text-align:center; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; border-bottom:1px solid #d9d9d9;}
.tableResponsive table tr th {font-size:17px; padding:16px 10px;}
.tableResponsive table tr td.left {text-align:left;}

.tableResponsive.lineBox {border-right:1px solid #d9d9d9;}
.tableResponsive.lineBox tr th,
.tableResponsive.lineBox tr td {font-size:15px; padding:10px; overflow:hidden; border:0; text-align:center; text-overflow:ellipsis; vertical-align:middle; white-space:nowrap; border-bottom:1px solid #d9d9d9;  border-left:1px solid #d9d9d9;}
.tableResponsive.lineBox tr th {font-size:15px; background:#f4f5f9;}

@media (max-width:990px) {
	/* tableResponsive */
	.tableResponsive {width:100%; overflow-x:auto; overflow-y:hidden;}
	.tableResponsive.nonEllipsis table tr th {padding:16px 0px;}
}


.tableWrap table tbody tr td .jsmartable-collapse {}
.tableWrap table tbody tr td .jsmartable-collapse i {display:block; width:28px; height:28px;}
.tableWrap table tbody tr td .jsmartable-collapse .fa::after {content:''; color:#fff; display:block; width:28px; height:28px; background-size:cover;}
.tableWrap table tbody tr td .jsmartable-collapse .fa-plus::after,
.tableWrap table tbody tr td .jsmartable-collapse .fa-minus::after {background:url(../img/icon/icon_arrowDown.svg)no-repeat center; background-size:60%;}
.tableWrap table tbody tr td .jsmartable-collapse .fa-minus::after {transform:rotate(180deg);}

/* --------------------------------------------------------
loading
----------------------------------------------------------*/
.loading {position:relative;}
.loading:before {position:absolute; z-index:9999; top:50%; left:50%; width:40px; height:40px; margin:-50px 0 0 -20px; border:4px solid transparent; border-color:var(--prime-color) var(--prime-color) var(--prime-color) rgba(255,255,255,0); border-radius:50%; content:""; animation:rotate-loading 0.5s linear 0s infinite normal;transform-origin:50% 50%;-webkit-animation:rotate-loading 0.5s linear 0s infinite normal; -webkit-transform-origin:50% 50%;}
.loading:after {position:absolute; z-index:9998; top:0px; left:0px; right:0px; bottom:0px; background:rgba(255, 255, 255, 0.7); content:"Loading..."; font-size:16px; font-weight:500; display:flex; display:-webkit-flex; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center;  padding-top:50px; box-sizing:border-box;}
.modalBox.loading:after {position:absolute; border-radius:16px; z-index:9998; top:0px; left:0px; right:0px; bottom:0px; background:rgba(255, 255, 255, 0.7); content:"Loading..."; font-size:16px; font-weight:500; display:flex; display:-webkit-flex; justify-content:center;align-items:center; -webkit-justify-content:center; -webkit-align-items:center;  padding-top:50px; box-sizing:border-box;}

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

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

/* --------------------------------------------------------
ui-slider
----------------------------------------------------------*/
.ui-slider.ui-widget-content {border:0px; background:#333438;	 color:#222222; height:5px; margin:15px 15px 0 15px; position:relative;}
.ui-slider .ui-widget-header {border:0px; background:#88002b; color:#222222; font-weight:bold;}
.ui-slider .ui-slider-handle {top:-8px;}
.ui-slider .ui-state-default,
.ui-slider .ui-widget-content .ui-state-default,
.ui-slider .ui-widget-header .ui-state-default {border:0px; background:#fff; font-weight:normal; font-size:16px; color:#5c6063; width:20px; height:20px; border-radius:50%; margin-left:-11px; cursor:col-resize; position:absolute; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);}
.ui-slider .ui-state-active,
.ui-slider .ui-widget-content .ui-state-active,
.ui-slider .ui-widget-header .ui-state-active  {border:0px; background:#fff; font-weight:normal; color:#555555; width:20px; height:20px; border-radius:50%; margin-left:-11px;}

.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}


/* --------------------------------------------------------
ui-datepicker
----------------------------------------------------------*/
.ui-datepicker {z-index:200 !important; width:280px; height:auto; margin:5px auto 0; border-radius:4px; background:#313238; box-shadow:0 1px 3px rgba(53, 57, 74, 0.4);}
.ui-datepicker a {text-decoration:none;}

.ui-datepicker table {width:100%;}
.ui-datepicker-header {color:#fff; line-height:60px;}
.ui-datepicker-title {font-size:20px; font-weight:bold; text-align:center; color:#fff;}
.ui-datepicker-prev, .ui-datepicker-next {display:inline-block; height:60px; padding:0 10px; overflow:hidden; color:#fff; font-size:12px; text-align:center; cursor:pointer;}
.ui-datepicker-prev:hover, .ui-datepicker-next:hover {color:#FFF;}
.ui-datepicker-prev {float:left;}
.ui-datepicker-next {float:right;}
.ui-datepicker thead {}
.ui-datepicker thead th {padding:5px 0; color:#fff; font-size:6pt; text-transform:uppercase;}
.ui-datepicker tbody td {padding:0;}
.ui-datepicker tbody td.ui-datepicker-today a {background:var(--prime-color); color:#FFF;}
.ui-datepicker td span, .ui-datepicker td a {display:inline-block; width:calc(100% - 4px); height:36px; margin:2px; border-radius:50%; color:rgba(255,255,255,0.6); font-size:12px; text-align:center; line-height:36px;}
.ui-datepicker-calendar .ui-state-default {background:rgba(0,0,0,0);}
.ui-datepicker-calendar .ui-state-hover {background:#fff; color:var(--prime-color);}
.ui-datepicker-calendar .ui-state-active {position:relative; background:#fff !important; color:var(--prime-color) !important;}
.ui-datepicker-unselectable .ui-state-default {background:#f4f4f4; color:#b4b3b3;}
.ui-datepicker-calendar td:first-child .ui-state-active {width:100%; margin-left:0;}
.ui-datepicker-calendar td:last-child .ui-state-active {width:100%; margin-right:0;}
.ui-datepicker-calendar tr:last-child .ui-state-active {height:100%; margin-bottom:0;}
.ui-datepicker-buttonpane {padding:14px 0; overflow:hidden; text-align:center;}
.ui-datepicker-buttonpane button {display:inline-block; margin:0 4px; padding:8px 20px; border:0px; border-radius:20px; background:#494a51; color:#eee; font-size:12px;}
.ui-datepicker-buttonpane button.ui-datepicker-current {}
.ui-datepicker-buttonpane button.ui-datepicker-close {}

/* --------------------------------------------------------
ui-selectmenu
----------------------------------------------------------*/
.ui-selectmenu-button {display:inline-block; position:relative; padding:0 4px 0 8px; overflow:visible; border-bottom:1px solid #929292; line-height:34px; vertical-align:middle; box-sizing:border-box; outline-offset:-1px;}
.ui-selectmenu-button.ui-button {width:100%; background:#FFF; color:#333; font-size:14px; text-align:left; white-space:nowrap; cursor:pointer;}
.ui-selectmenu-button.ui-button:hover {text-decoration:underline;}
.ui-selectmenu-button span.ui-selectmenu-text {display:block; width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ui-selectmenu-button .ui-selectmenu-icon.ui-icon {float:right; margin-top:0; }
.ui-selectmenu-button .ui-selectmenu-icon.ui-icon:before {display:inline-block; content:""; width:11px; height:7px; background:url(../img/icon/icon_select_Arrow.svg) no-repeat; -o-transition:all .16s cubic-bezier(.7,0,.3,1);transition:all .16s cubic-bezier(.7,0,.3,1);-webkit-transform:all .16s cubic-bezier(.7,0,.3,1); transform:all .16s cubic-bezier(.7,0,.3,1);-webkit-transition:all .16s cubic-bezier(.7,0,.3,1);}
.ui-selectmenu-button:active ,
.ui-selectmenu-button.ui-selectmenu-button-open {border-bottom:1px solid var(--prime-color);}
.ui-selectmenu-button.ui-selectmenu-button-open span {color:#333;}
.ui-selectmenu-button.ui-selectmenu-button-open .ui-selectmenu-icon.ui-icon:before {transform:rotate(180deg);}
.ui-selectmenu-disabled.ui-selectmenu-button:hover {background:#FFF; color:#333;}
.ui-selectmenu-disabled.ui-selectmenu-button:hover .ui-selectmenu-icon.ui-icon:before {background-position:0 -15px;}
.ui-selectmenu-disabled.ui-selectmenu-button:active:after,
.ui-selectmenu-disabled.ui-selectmenu-button.ui-selectmenu-button-open:after {border:0;}
.ui-selectmenu-menu.ui-selectmenu-open {display:block; z-index:9999; box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);}
.ui-selectmenu-menu {display:none; position:absolute; top:0; left:0; margin:0; padding:0; border-radius:6px; animation:selectShow 0.3s;}
.ui-selectmenu-menu .ui-menu {max-height:500px; padding-bottom:1px; overflow:auto; border:1px solid #c5c5c5; background:#fff; color:#333; overflow-x:hidden; border-radius:6px;}
.ui-selectmenu-menu .ui-menu.h260 {height:260px;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item {display:block;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper {display:block; padding:8px; color:#666; font-size:14px; cursor:pointer;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover {background:#eee; text-decoration:underline;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper:active {box-shadow:inset 0 0 0 2px rgb(165 0 52); text-decoration:none;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active {background:#efefef; text-decoration:underline;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active:active {background:#cbcbcb;}
.ui-selectmenu-menu .ui-menu li.ui-selectmenu-optgroup {display:block; padding:8px; color:#444; font-size:14px; font-weight:bold;}
.ui-selectmenu-menu .ui-menu li.ui-state-disabled {border:0 !important;}
.ui-selectmenu-menu .ui-menu li.ui-state-disabled .ui-menu-item-wrapper {cursor:default;}

@keyframes selectShow {
	0% {opacity:0; transform:scale(1);-webkit-transform:scale(1);}
	10% {opacity:0.6; transform:scale(1.06);-webkit-transform:scale(1.06);}
	100% {opacity:1; transform:scale(1);-webkit-transform:scale(1);}
}