@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; font-style:normal;}

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:collapse; 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
----------------------------------------------------------*/
.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;}
.fb_dir_x {flex-direction:row;}
.fb_dir_y {flex-direction:column;}
.fi_start {align-self:flex-start;}
.fi_end {align-self:flex-end;}
.fi_xy {align-self:center;}

.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:#1D76FB; font-size:14px; vertical-align:middle; font-style:normal;}
.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);}
.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;}

.pdt0  {padding-top:0 !important;}
.pdb0  {padding-bottom:0 !important;}
.mgt0  {margin-top:0 !important;}
.mgt10  {margin-top:10px !important;}
.mgt30  {margin-top:30px !important;}
.mgb0  {margin-bottom:0 !important;}
.mgb10 {margin-bottom:10px !important;}
.mgb20 {margin-bottom:20px !important;}
.mgb30 {margin-bottom:30px !important;}
.mgb50 {margin-bottom:50px !important;}
.mgl10  {margin-left:10px !important;}
.mgl20  {margin-left:20px !important;}

/* 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:10px; width:10px}
::-webkit-scrollbar-thumb {border:3px solid transparent; background-color:#909090; border-radius:5px; background-clip: padding-box;}
::-webkit-scrollbar::before {content:''; display:block; width:4px; height:2px; background:url(../img/common/scroll_t.svg)no-repeat; position:relative;}
::-webkit-scrollbar::after {content:''; display:block; width:4px; height:2px; background:url(../img/common/scroll_t.svg)no-repeat; position:relative;}

.filterWrap::-webkit-scrollbar-thumb {border:8px solid transparent; background-color:#d4d4d4; background-clip:padding-box; border-radius:10px;}
@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:5px;}
}


/* 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] {position:absolute; left:0; width:100%; height:100%; margin:0; opacity:0;}
.opt input[type=checkbox] {position:absolute; left:0; width:100%; height:100%; margin:0; opacity:0;}
.opt input[type=radio]+label {display:flex; justify-content:flex-start; align-items:center; font-size:15px; cursor:pointer; overflow:hidden; visibility:visible; word-break:break-all; min-height: 24px;}
.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; min-height: 24px;}
.opt input[type=checkbox]+label:hover:before{box-shadow: inset 0 0 0 2px #16646E;}
.opt input[type=radio]+label > span {margin-left: 10px;}
.opt input[type=checkbox]+label > span, .opt input[type=checkbox]+label > div {margin-left: 11px;}
.opt input[type=radio]+label span.text {display:flex; align-items:center; margin:0 11px; color:#333;}
.opt input[type=checkbox]+label span.text {display:flex; align-items:center; margin:0 11px; color:#333;}
.opt input[type=radio]+label:before {display:inline-block; width:20px; min-width:20px; height:20px; 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:20px; min-width:20px; height:20px; color:#c7c9d1; font-size:30px; vertical-align:middle; border-radius: 4px; box-sizing:border-box;}
/* .opt input[type=checkbox].allSelectIcon:checked+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%); filter:grayscale(1) brightness(10);} */

.opt input[type=radio]:disabled+label {cursor:default; opacity:0.4;}
.opt input[type=checkbox]:disabled+label {cursor:default; opacity:0.4;}
.opt input[type=radio]:disabled+label:before {color:#ddd;}
.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 #1D828F;}
.opt input[type=checkbox]+label:before {content:''; box-shadow:inset 0 0 0 2px #848C9D;}
.opt input[type=checkbox]+label:before:hover {content:''; box-shadow:inset 0 0 0 2px #16646E;}
.opt input[type=checkbox]:checked+label:before {box-shadow:none;}
.opt input[type=checkbox]:checked+label:after {content:''; width:20px; height:20px; background:url(../img/icon/checkbox_n.svg) no-repeat; position:absolute; top:50%; left:0; transform:translate(0, -50%);}
.opt input[type=checkbox]:checked+label:after:hover {content:''; width:20px; height:20px; background:url(../img/icon/checkbox_o.svg) no-repeat; position:absolute; top:50%; left:0; transform:translate(0, -50%); filter:grayscale(1) brightness(10);}
.opt input[type=checkbox]:indeterminate+label:after {content:''; width:20px; height:20px; background:url(../img/icon/indeterminate_n.svg) no-repeat; position:absolute; top:50%; left:0; transform:translate(0, -50%); filter:grayscale(1) brightness(10);}
.opt input[type=checkbox]:indeterminate+label:after:hover {content:''; width:20px; height:20px; background:url(../img/icon/indeterminate_o.svg) no-repeat; position:absolute; top:50%; left:0; transform:translate(0, -50%); filter:grayscale(1) brightness(10);}

.opt input[type=checkbox]:indeterminate+label:before {background: #1D828F; 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%); filter:grayscale(1) brightness(10);}

.opt.dark {display:block; margin:10px 0;}
.opt.dark input[type=radio]+label span.text {color:#fff; font-size:16px; font-weight:300;}
.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 {outline:-webkit-focus-ring-color auto 1px;}
.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 #DADDE2; color:#333; font-size:14px; font-family:'Roboto', sans-serif; line-height:36px; box-sizing:border-box; border-radius:6px;}
input[type=password] {font-family:Arial, Helvetica, sans-serif;}
input[type=number]:focus,
input[type=text]:focus,
input[type=password]:focus {box-shadow:inset 0 0 0 1px #333; border-bottom:1px solid transparent;}
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; background:none; font-size:13px; cursor:pointer; appearance:none; font-family:'Roboto', sans-serif; color:#2e2e2e; font-weight:600;}


.opt input[type=checkbox].allSelectIcon:checked+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%); filter:grayscale(1) brightness(10);}
/* ms-clear */
input::-ms-clear {display:none;}

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

input.guideText:-ms-input-placeholder {color:#383838 !important;}
input.guideText::-webkit-input-placeholder {color:#383838 !important;}

/* addon
-------------------------------------*/
.inputWrap {display:-webkit-box; display:flex; position:relative;}
.inputWrap .addon {}
.inputWrap .addon span.hding {display:inline-block; color:#6e768f; padding:0 12px; border:1px solid rgba(0,0,0,0.08); line-height:34px; vertical-align:top;}
.inputWrap .addon span.hding label,
.inputWrap .addon span.hding label:before {vertical-align:top;}
.inputWrap input {display:block; height:36px; color:#757575; border:1px solid #DADDE2; padding: 7px 46px 7px 41px; font-size:14px; font-weight:400;}
.inputWrap input:focus {border:1px solid #333; box-shadow:none;}
/* .inputWrap .autocomplete {position:absolute; top:36px; left:0; right:0; text-align:left; background:#fff; border:1px solid #929292; border-radius:10px; z-index:999; overflow:auto;} */

.inputBox {position: relative;}
.inputBox .textRemove {height: 20px !important; width: 20px !important; display: none;}
.inputBox .textRemove::before {height: 20px; width: 20px; background-size: 20px;}
.inputBox input:valid ~ .textRemove {display:block; top:10px; right:16px; z-index:9;}
.inputWrap input:valid ~ .textRemove {display:block; top:8px; right:16px; z-index:9;}
.inputWrap input:valid ~ .autocomplete {display:block;}

/* addon function */
.inputWrap input:focus ~ .addon span.hding,
.inputWrap input:focus ~ .addon button {border-color:#a50034 !important;}
.inputWrap input:disabled ~ .addon {background:#f8f8f8;}

/* addon first */
.inputWrap .addon:first-child {position:absolute; top:50%; left:4px; transform:translate(0, -50%);}
.inputWrap .addon:first-child .iconSearch {display:block; width:32px; height:32px; font-size:0;}
.inputWrap .addon:first-child .iconSearch::before {content:''; display:block; background:url(../img/icon/icon_search.svg)no-repeat 3px 5px; width:32px; height:32px;}
.inputWrap input:last-child {border-radius:20px; text-indent: 24px;}
.inputWrap input:nth-child(2) {border-radius:20px; padding: 0px 30px}

/* addon last */
/* addon last */
.inputWrap input:first-child {border-radius: 6px;}
.inputWrap input:focus {outline: none; border: solid 2px #333;}
.inputWrap .addon:last-child {}
.inputWrap .addon:last-child .mag-glass {position: absolute; background: transparent; left: 8px; border: none; top:0px;}
.inputWrap .addon span.i:before {font-size:20px; vertical-align:top;}
.inputWrap .addon button {margin:0; padding:0; width:33px; height:33px; font-size:0; box-shadow:none;}
.inputWrap .addon i.mag-glass{margin:0; padding:0; width:36px; height:36px; font-size:0; box-shadow:none;}
.inputWrap .addon i.mag-glass::before{content: ''; display:block; background:url(../img/icon/icon_search.svg)no-repeat center; width:36px; height:36px;}

/* label animation
-------------------------------------*/
.inputWrap.label {position:relative;}
.inputWrap.label label {display:block; position:absolute; left:6px; bottom:10px; color:#999; font-size:14px; text-align:left; transition:0.2s; pointer-events:none; visibility:visible; font-weight:500;}
.inputWrap.label input {margin-top:20px; border:0px; border-bottom:1px solid #ddd; border-radius:0; background:none; color:#666;}
.inputWrap.label input:focus {border-bottom:1px solid #a50034; box-shadow:none;}
.inputWrap.label input:focus ~ label, .inputWrap.label input:valid ~ label {left:0px; bottom:40px; color:#666; font-size:16px;}
.inputWrap.label input:disabled {border-bottom:1px solid #eee;}
.inputWrap.label input:disabled ~ label {color:#ddd;}

/* 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 #dedede; border-radius:8px; font-family:'Roboto', sans-serif; color:#333; font-size:14px; line-height:20px; box-sizing:border-box; resize:none;}
textarea:hover {background:#F5F6FA;}
textarea:focus-visible {border-color:#354056;}
textarea:disabled {background:#f8f8f8; color:rgba(0,0,0,0.3); text-shadow:1px 1px 0px rgba(255,255,255,1);}
textarea.error {border-color:#D92D20;}

/* --------------------------------------------------------
FORM SELECT
----------------------------------------------------------*/
select {width:100%; height:34px; padding:0; border:0; font-size:14px; color: #333; border-bottom:1px solid #929292; box-sizing:border-box; text-indent:8px; font-family: 'Noto Sans KR', sans-serif; border-radius: 0px;  appearance:none; -webkit-appearance: none; background: url(../img/icon/icon_select_Arrow.svg) no-repeat right;}
select:hover {}
select:focus,
select:active {border-bottom:1px solid #a50034;}
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.sessionExtend {z-index: 999 !important;}
.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:6px;}
.modalBox {position:relative; z-index:2; width:410px; border-radius:16px; background:#fff; box-shadow:0 10px 10px rgba(0, 0, 0, 0.2); box-sizing:border-box; animation:ShowPop 0.1s;}
.modalBox.responseHeight {height:100%;}
.modalBox.w400 {width:400px;}
.modalBox.w410 {width:410px;}
.modalBox.w426 {width:426px;}
.modalBox.w484 {width:484px;}
.modalBox.w483 {width:483px;}
.modalBox.w480 {width:480px;}
.modalBox.w500 {width:500px;}
.modalBox.w508 {width:508px;}
.modalBox.w600 {width:600px;}
.modalBox.w604 {width:604px;}
.modalBox.w720 {width:720px;}
.modalBox.w722 {width:722px;}
.modalBox.w724 {width:724px;}
.modalBox.w634 {width:634px;}
.modalBox.w800 {width:800px;}
.modalBox.w830 {width:830px;}
.modalBox.w960 {width:960px;}
.modalBox.w970 {width:970px;}
.modalBox.w1080 {width:1080px;}
.modalBox.w1130 {width:1130px;}
.modalBox.w1250 {width: 1250px;}
.modalBox .mbHeader {display:flex; justify-content:space-between; align-items:center; min-height:50px; padding:24px 24px; box-sizing:border-box;}
.modalBox .mbHeader .backBtn {display:none;}
.modalBox .mbHeader .title {display:flex; flex-direction:row; align-items:center;}
.modalBox .mbHeader .title h2 {color:#000; font-size:20px; word-break: break-word; font-weight:700;}

.modalBox .mbHeader .tools {display:flex;}
.modalBox .mbHeader .tools button {margin:0 3px;}
.modalBox .mbHeader ~ .mbBody {}
.modalBox .mbBody {padding: 0 24px 24px 24px; box-sizing: border-box;}
.modalBox .mbBody.newMBBody {padding:14px 40px;}
.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.mh_876 {max-height:876px;}
.modalBox .mbBody .mbBodyContents {width:calc(100% - 0px); max-height:700px; overflow-y:auto; overflow-x:hidden;}
/* .w1080.modalBox .mbBody .mbBodyContents {max-height:1000px;} */
.modalBox .mbBody .mbBodyContents .mbBodyHeader {}
.modalBox .mbBody .mbBodyContents .mbBodyHeader .title {}
.modalBox .mbBody .mbBodyContents .mbBodyHeader .title h3 {font-size:16px; font-weight:600; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.modalBox .mbBody .mbBodyContents .guide {display:flex; justify-content:flex-end;}
.modalBox .mbBody .mbBodyContents .article {color:#555; font-size:15px; line-height:20px; height: 100%;}
.modalBox .mbBody .mbBodyContents .article .deleteAccount {text-align:center; word-break: keep-all; height: auto;}
.modalBox .buttonWrap {padding:24px 24px; gap: 10px; display: flex; justify-content: center; flex-wrap: wrap;}
.modalBox .buttonWrap span {}
.modalBox .buttonWrap button {min-width:170px;}
.modalBox .buttonWrap.btnRsize button {margin:0 5px; min-width:140px;}

/* ellipsis */
.ellipsis {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient: vertical; word-wrap:break-word;}
.ellipsis.line_01 {-webkit-line-clamp:1;}
.ellipsis.line_02 {-webkit-line-clamp:2;}
.ellipsis.line_03 {-webkit-line-clamp:3;}
.ellipsis.line_04 {-webkit-line-clamp:4;}

/* --------------------------------------------------------
searchFilterBox
----------------------------------------------------------*/
.searchFilterBox {position:relative;}
.searchFilterBox.active {}
.searchFilterBox.active .search {border-bottom:1px solid #a50034;}
.searchFilterBox .search {display:flex; display:-webkit-flex; position:relative; width:100%; padding:0 4px 0 8px; overflow:visible; border-bottom:1px solid #929292; background:#FFF; color:#333; font-size:14px; text-align:left; line-height:34px; vertical-align:middle; white-space:nowrap; cursor:pointer; box-sizing:border-box;}
.searchFilterBox .search:active {border-bottom:1px solid #a50034;}
.searchFilterBox .search .text {display:block; text-align:left; width:calc(100% - 10px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.searchFilterBox .search .icon {font-size:0; display:flex; align-items:center; justify-content:center;}
.searchFilterBox .search .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);}

.autocomplete {position:absolute; width:100%; min-width:200px; text-align:left; background:#fff; border:1px solid #929292; border-radius:10px; box-sizing:border-box; overflow:hidden; z-index:9; max-height:unset;}
.autocomplete {-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);}
.autocomplete .inputWrap {padding:10px; width:auto !important; border-bottom:1px solid #e5e5e5;}
.autocomplete .inputWrap .addon:first-child {left:14px; z-index:2;}
.autocomplete .inputWrap input {}
.autocomplete .inputWrap input:focus {z-index:1;}
.autocomplete .inputWrap .textRemove {position:absolute; top:50%; right:32px; z-index:9; transform: translate(-50%, -50%);}
.autocomplete .initText {font-size:14px; padding:10px 14px; background:#f8f8f9; border-bottom:1px solid #e5e5e5;}
.autocomplete ul {max-height:200px; overflow:auto;}
.autocomplete ul li {display:flex; display:-webkit-flex; justify-content:flex-start;align-items:center; -webkit-justify-content:flex-start; -webkit-align-items:center; padding:0 14px;}
.autocomplete ul li:hover {background:#efefef; text-decoration:underline;}
.autocomplete ul li:active {box-shadow:inset 0 0 0 2px rgb(165 0 52); text-decoration:none;}
.autocomplete ul li:active:first-child {border-radius: 10px 10px 0 0;}
.autocomplete ul li:active:last-child {border-radius: 0 0 10px 10px;}
.autocomplete ul li:active .item {border-bottom:1px solid #a50034;}
.autocomplete ul li .opt {width:100%;}
.autocomplete ul li .opt label {padding:8px 0;}
.autocomplete ul li .text {margin-left:10px; width:calc(100% - 26px); font-size:13px;}
.autocomplete ul li .text em {color:#a50034; font-style:normal;}
.autocomplete ul li .opt input[type=checkbox] {display:none;}
.autocomplete ul li .item {font-size:13px; width:100%; cursor:pointer; padding:10px 14px; border-bottom:1px solid #ddd; position:relative;}
.autocomplete ul li .item[aria-current="true"]::before,
.autocomplete ul li .item[aria-selected="true"]::before {content:''; display:block; width:10px; height:10px; background:url(../img/icon/icon_check.svg)no-repeat; position:absolute; top:50%; left:-4px; transform:translate(0, -50%);}
.autocomplete .buttonWrap {padding:10px 30px; border-top:1px solid #e5e5e5;}

/* --------------------------------------------------------
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;}
.toastModal .toastBox .toast .tools {}
.toastModal .toastBox .toast .tools button {color:#FFF;}

/* --------------------------------------------------------
BUTTON
----------------------------------------------------------*/
button {margin:0; padding:0; border:none; background:none; font-size:16px; cursor:pointer; appearance:none; color:#2e2e2e; font-weight:500;}
.button {font-weight:500; justify-content:center; display:inline-flex; position:relative; height:36px; padding:10.5px 16px; overflow:hidden; border:none; border-radius:8px;  background:#fff; color:#fff; cursor:pointer; white-space:nowrap; box-sizing:border-box; align-items:center;}
.button.btnNoBorder {box-shadow: none;}
.button span {position:relative; z-index:1;}
.button > .add {height:100%; display:flex; align-items:center; justify-content:center;}
.button > .add::before {content:""; display:inline-block; background:url(../img/icon/ic_add.svg) no-repeat center; height:14px; width:14px; filter: invert(100%) brightness(2); background-size:contain; filter: unset;}
.button > .help {height:100%; display:flex; align-items:center; justify-content:center;}
.button > .help::before {content:""; display:inline-block; background:url(../img/icon/ic_help.svg) no-repeat center; height:14px; width:14px; filter: invert(100%) brightness(2); background-size:contain; filter: unset;}
.button:hover {text-decoration:underline;}
.button:active {text-decoration:none !important;}
.button:disabled {opacity:0.4;}
.button:disabled:hover {text-decoration:none;}
.button:disabled:hover:after {display:none; content:"";}
.button.large{height:48px; padding:15px 16px;}
.button.large > .add::before{height:18px; width:18px;}
.button.small{height:28px; padding:7.5px 14px; font-size:12px;}
.button.small > .add::before{height:12px; width:12px;}

/* --------------------------------------------------------
BUTTON - primary
----------------------------------------------------------*/
.button.primary {background:#1D828F;}
.button.primary:hover {background:#16646E;}
.button.primary:active {background:#10454C;}

/* --------------------------------------------------------
BUTTON - secondary
----------------------------------------------------------*/
.button.secondary {background:#354056;}
.button.secondary:hover {background:#262F44;}
.button.secondary:active {background:#172033;}

.ttBtn.button.secondary {background:#697387;}

/* --------------------------------------------------------
BUTTON - secondary
----------------------------------------------------------*/
.button.bubbleButton.secondary {background:#262F44; width: 100%; border-radius: 0; padding: 12px 24px; width: 100%; box-sizing: border-box; font-size: 14px; font-weight: 500; min-height: 44px; border-bottom: 1px solid #fff;}
.button.bubbleButton.secondary:hover  {background:#262F44; text-decoration: none;}
.button.bubbleButton.secondary:active  {background:#262F44;}

/* --------------------------------------------------------
BUTTON - tertiary
----------------------------------------------------------*/
.button.tertiary {color:#333333; background:#fff; border:1px solid #DADDE2;}
.button.tertiary:hover {background:#F5F6FA;}
.button.tertiary:active {background:#DADDE2;}
.button.tertiary > .add::before {filter:unset;}

.ttBtn.button.tertiary {color:#333333; background: #DADDE2; border: 0px;}

/* --------------------------------------------------------
BUTTON - light
----------------------------------------------------------*/
.button.light {color:#333333; background:#F5F6FA;}
.button.light:hover {background:#DADDE2;}
.button.light:active {background:#BEC2CB;}
.button.light > .add::before {filter:unset;}

/* --------------------------------------------------------
BUTTON - dark
----------------------------------------------------------*/
.button.dark {background:rgba(0, 0, 0, 0.30);}
.button.dark:hover {background:rgba(0, 0, 0, 0.50);}
.button.dark:active {background:rgba(0, 0, 0, 0.70);}

/* --------------------------------------------------------
BUTTON - text
----------------------------------------------------------*/
.button.text {color:#333333; background:transparent}
.button.text:hover {background:transparent;}
.button.text:active {background:transparent;}
.button.text > .add::before  {filter:unset;}

.button > .open::before{content:""; display:inline-block; background:url(../img/icon/ic_open.svg) no-repeat; height:18px; width:18px; background-position:center;}

/* --------------------------------------------------------
BUTTON - delete
----------------------------------------------------------*/
.button.delete {color:#D92D20; border:1px solid #FFFAFA; background:rgba(253, 49, 46, 0.10);}
.button.delete:hover {background:rgba(253, 49, 46, 0.30);}
.button.delete:active {background:rgba(253, 49, 46, 0.60);}
.button.delete > .add {filter:brightness(0) saturate(100%) invert(29%) sepia(89%) saturate(1496%) hue-rotate(340deg) brightness(84%) contrast(108%);}

.button.iconOnly{border:none; background:none; font-size: 0;}
.button.filled{border:none; background:#F5F6FA;}
.button.outlined{border: 1px solid #DADDE2;}
.button.circular{border-radius:50%; padding:0px; align-items:center; justify-content:center;}
.button.iconBtn:hover{background:#DADDE2;}
.button.iconBtn:active{background:#BEC2CB;}
.button.dark:hover{background:rgba(0, 0, 0, 0.45);}
.button.dark:active{background:rgba(0, 0, 0, 0.55);}
.button.add::before{background:url(../img/icon/ic_add.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.checklist::before{background:url(../img/icon/button_check_headerIcon.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.apps::before{background:url(../img/icon/ic_apps.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.notification::before{background:url(../img/icon/button_icon_noti_header.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.menu::before{background:url(../img/icon/icon_menu.png) no-repeat center; content:""; width:100%; height:100%;}
.button.refresh::before{background:url(../img/icon/ic_refresh.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.icRight::before{background:url(../img/icon/ic_arrow_right.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.icLeft::before{background:url(../img/icon/ic_arrow_right.svg) no-repeat center; transform: rotate(180deg); content:""; width:100%; height:100%;}
.button.icDown::before{background:url(../img/icon/ic_arrow_down.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.icUp::before{background:url(../img/icon/ic_arrow_up.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.icMore::before{background:url(../img/icon/ic_more.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.back::before{background:url(../img/icon/ic_back.svg) no-repeat center; content:""; width:100%; height:100%;}
.button.edit::before{background:url(../img/icon/ic_edit.svg) no-repeat center; content:""; width:100%; height:100%; filter: unset;}
.button.icDelete::before{background:url(../img/icon/ic_delete.svg) no-repeat center; content:""; width:100%; height:100%; filter: unset;}
.button.home::before{background:url(../img/icon/ic_home.svg) no-repeat center; content:""; width:100%; height:100%; filter: unset;}
.button.icDownload::before{background:url(../img/common/ic_download.svg)no-repeat center; content:""; width:100%; height:100%; filter: unset;}
.button.icClose::before{background:url(../img/common/ic_close_gnb.svg)no-repeat center; content:""; width:100%; height:100%; filter: unset;}
.button.icDownload.moveTop {transform: rotate(180deg);}
.button.iconBtn.square{border-radius:8px;  padding:0px; align-items:center; justify-content:center; min-width:unset;}
/* .button.iconBtn.square.add::before{background:url(../img/icon/ic_add.svg) no-repeat center; content:""; width:100%; height:100%;} */
.button.iconBtn{width:36px;}
.button.large.iconBtn{width:48px;}
.button.large.iconBtn::before{background-size:32px;}
.button.small.iconBtn{width:28px;}
.button.small.iconBtn::before{background-size:18px;}
.button.micro.iconBtn{width:24px; height:24px; padding:0px;}
.button.micro.iconBtn::before{background-size:16px;}
/* --------------------------------------------------------
BUTTON
----------------------------------------------------------*/
.weekBox {display:flex; align-items:center; gap: 10px;}
.weekBox .btnWeek {width:42px; height:42px; border:1px solid #999; box-sizing:border-box; border-radius:50%;}
.weekBox .btnWeek[aria-pressed="true"] {background:#1d828f; border:1px solid #1d828f; color:#fff;}
.weekBox .btnWeek[aria-pressed="true"]:hover {background:#1d828f;}
.weekBox .btnWeek[aria-pressed="true"]:active {background:#1d828f;}
.weekBox .btnWeek[aria-pressed="true"]:disabled {background:#d593a8;}
.weekBox .btnWeek abbr {text-decoration:none; cursor:pointer;}

/* 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.iconDownload {display:flex; align-items:center; justify-content: center}
.button.iconDownload::before {content:''; font-size:0; display:block; margin:0 6px 0 6px; width:16px; height:16px; background:url(../img/common/ic_download.svg)no-repeat; background-size:cover; filter:brightness(0); opacity:0.5;}


/* button icon
----------------------------------*/
.button.big.icon {display:flex; align-items:center; padding: 0 40px 0 20px !important;}
.button.big.icon::before {content:''; display:block; width:26px; height:26px; background:#ddd; margin:0 6px;}
.button.big.icon.site::before {background:url(../img/icon/icon_site.png)no-repeat center;}
.button.big.icon.account::before {background:url(../img/icon/icon_account.png)no-repeat center;}
.button.big.icon.license::before {background:url(../img/icon/icon_license.png)no-repeat center;}

/* button color
----------------------------------*/
.button.active {background:#a50034; color:#FFF;}

.button.prime {color:#a50034; border:0; background:none;}
.button.prime:hover {background:#f5f5f5;}
.button.prime:active {background:#ccc;}

.button.activePrime {color:#fff; background:#a50034; box-shadow:inset 0 0 0 1px #a50034;}
.button.activePrime:hover {background:#88002b; box-shadow:none;}
.button.activePrime:active {background:#6b0022; box-shadow:inset 0 0 0 3px #9d0032;}

button.button.extend {background: transparent; font-size:14px; height:auto; color:#383838; border: 0px;}
button.button.extend:hover {background:#DADDE2; color:#666;}
button.button.extend:active {background:#BEC2CB; color:#666;}

button.button.help {background: transparent; font-size:14px; height:auto; color:#383838; border: none;}
button.button.help:hover {background:#DADDE2; color:#666;}
button.button.help:active {background:#BEC2CB; color:#666;}

button.button.extendDark {background:#313238; font-size:14px; height:26px; padding:0 20px; color:#fff; box-shadow: inset 0 0 0 1px #fff;}
button.button.extendDark:hover {background:#1c1d21; color:#fff;}
button.button.extendDark:active {background:#000; box-shadow: inset 0 0 0 2px #7d2c47;}

button.button.white {background:#fff; font-size:14px; height:40px; padding:0 24px; color:#383838;}
button.button.white:hover {background:#f5f5f5; color:#666;}
button.button.white:disabled:hover {background:#fff;}
button.button.white:active {background:#ccc; color:#666;}
button.button.white[data-icon="warning"] {position:relative; padding:0 34px 0 24px;}
button.button.white[data-icon="warning"]::before {content:''; display:block; width:19px; height:19px; background:url(../img/page/icon_exclamationMark.svg)no-repeat; position:absolute; top:10px; right:10px;}

button.button.install {background:#fff; font-size:14px; height:40px; padding:0 24px; color:#a50034; box-shadow:inset 0 0 0 2px #a50034; font-weight:600;}
button.button.install:hover {background:#f5f5f5;}
button.button.install:active {background:#ccc; color:#a50034; box-shadow:inset 0 0 0 3px #9d0032;}
button.button.install[data-icon="check"] {position:relative;}
button.button.install[data-icon="check"]::before {content:''; display:inline-block; vertical-align:middle; margin:0 6px 0 -6px; width:19px; height:18px; background:url(../img/page/icon_exclamationMark.svg)no-repeat; background-size:cover;}

button.button.itemCtrl {background:#fff; font-size:14px; height:36px; color:#383838; border:2px solid transparent; box-shadow:0 0px 2px rgba(0, 0, 0, 0.4);}
button.button.itemCtrl:hover {background:#cf0652; color:#fff;}
button.button.itemCtrl:disabled {background:rgba(255, 255, 255, 0.4) !important; color:rgba(0, 0, 0, 0.3) !important;}
button.button.itemCtrl:disabled:hover {background:rgba(255, 255, 255, 0.4) !important; color:rgba(0, 0, 0, 0.3) !important;}
button.button.itemCtrl:active {background:#fff; color:#383838; border:2px solid #cf0652;}
button.button.itemCtrl.active {background:#fff; color:#383838; border:2px solid #cf0652;}

button.button.transparent {background:transparent; font-size:16px; height:48px; color:#fff; padding:0 40px; box-shadow:inset 0 0 0 2px #fff;}
button.button.transparent:hover {background:rgba(255, 255, 255, 0.2); color:#fff;}
button.button.transparent:disabled {background:rgba(255, 255, 255, 0.4) !important; color:rgba(0, 0, 0, 0.3) !important;}
button.button.transparent:disabled:hover {background:rgba(255, 255, 255, 0.4) !important; color:rgba(0, 0, 0, 0.3) !important;}
button.button.transparent:active {background:rgba(255, 255, 255, 0.5); color:#fff; box-shadow:none;}

button.button.squareGray {font-size:16px; font-weight:600; width:calc(100% - 20px); height:40px; margin:11px 10px; text-align:center; color:#555; background:#fff; padding:0;}
button.button.squareGray:hover {background:#eee; color:#666;}
button.button.squareGray:active {background:#cfcfcf; color:#666;}

button.catagory{width:24px; height:24px; font-size:0px; min-width:unset; padding:0px; border-radius:4px;}
button.catagory::before {width:24px; height:24px; background:url(../img/icon/ic_reflow-navi.svg) no-repeat center; background-size:100% !important; filter:brightness(0); content:"";}

button.refresh{width:28px; height:28px; padding:0px; border-radius:4px; border:none !important; background:#fff; font-size:0px; gap:unset;}
/* button.catagory.siteManagement::before {background:url(../img/common/menu_management.svg) no-repeat center;}
button.catagory.partnerCenter::before {background: url(../img/common/menu_partner.svg) no-repeat center;}
button.catagory.accountManagement::before {background:url(../img/common/menu_account.svg) no-repeat center; background-size:120% !important;} */

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

/* button mini */
.button.mini {height:26px; line-height:26px; padding:0 10px; font-size:12px; }

/* button midium */
.button.midium {height:40px; line-height:40px; padding:0 30px; font-size:16px;}

/* button big */
.button.big {height:50px; line-height:50px; padding:0 40px; font-size:16px;}

/* 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, square, ico */
button.circle,
button.square,
button.ico {display:inline-block; vertical-align:middle; overflow:hidden; color:transparent; padding:0; font-size:0px;}

button.square:before,
button.ico:before {content:''; display:block;}
button.backBtn {box-shadow: none;}
button.backBtn:before {content:''; background: url(../img/common/icon_backArrow_header\ 1.svg) no-repeat; height: 24px; width: 24px; margin: auto;}

/* button circle */
button.circle {width:40px; height:40px; border-radius:50%;}
button.circle_32 {width:32px; height:32px; border-radius:50%;}
button.circle_24 {width:24px; height:24px; border-radius:50%;}
button.circle_18 {width:18px; height:18px; border-radius:50%;}
button.circle_16 {width:16px; height:16px; border-radius:50%;}
button.circle:before {content:''; display:block; filter:grayscale(1); opacity:0.6;}
button.circle:hover:before {filter:grayscale(0); opacity:1;}
button.circle:active:before {filter:grayscale(1); opacity:0.6;}
button.circle:disabled:hover {filter:grayscale(1);}
button.circle:disabled:hover::before {opacity:0.6;}




/* 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;}

/* UI - button mapping
------------------------------------------------*/
.button.iconL {display: inline-flex; align-items: center; padding: 0 10px;}
.btnFilter {display: flex; align-items: center; justify-content: center;}
.btnFilter::before {content: ""; margin: 5px; width:14px; height:14px; background:url(../img/icon/ic_filter.svg)no-repeat; background-size: cover; position: relative; top:0px; margin:0 5px 0 0;}
.btnFilter[data-sort="on"]::after {content: ""; height: 6px; width: 6px; display: inline-flex; border-radius: 50%; background-color:rgba(29, 130, 143, 1); margin: auto; margin: 0 5px;}
.button.btnSearch::before {content:''; display:block; background:url(../img/icon/icon_search.svg)no-repeat 4px 4px; width:33px; height:33px;}
.button.close {font-size:0; width:32px; height:32px; padding:0; background:none; box-shadow:none; border:unset !important;}
.button.close::before {content:""; display:block; background:url(../img/common/ic_close.svg)no-repeat center center; height: 32px; width: 32px;}

.button.close:active {background:#ccc;}

.button.circle.refresh {background:url(../img/icon/icon_refresh.svg) no-repeat center; border:0;}
.button.circle.refresh_round {width:34px; height:34px;}
.button.circle.refresh_round::before {background:url(../img/icon/icon_refresh.png) no-repeat center; width:30px; height:33px;}
.button.circle.export {background:url(../img/icon/icon_export.png)#fff no-repeat center; width:40px; height:40px;}
.button.circle.date {background:url(../img/icon/icon_date.png)#fff no-repeat center; width:40px; height:40px;}

.button.circle.write::before {background:url(../img/icon/icon_write.svg) no-repeat center; width:40px; height:40px;}

.button.circle.write2::before {background:url(../img/icon/btn_edit_n.svg) no-repeat ; width:40px; height:40px; opacity: 1; filter: brightness(1);}
.button.circle.write2:hover:before {background:url(../img/icon/btn_edit_o.svg) no-repeat ; width:40px; height:40px;}
.button.circle.write2:active:before {background:url(../img/icon/btn_edit_p.svg) no-repeat ; width:40px; height:40px;}
.button.circle.write2:disabled:before {background:url(../img/icon/btn_edit_d.svg) no-repeat ; width:40px; height:40px;}
.button.circle.add::before {background:url(../img/icon/icon_add.svg) no-repeat center; width:100%; height:100%;}
.button.circle.delete::before {background:url(../img/icon/icon_delete.svg) no-repeat center; width:40px; height:40px;}

.button.circle.btnArrow {width:48px; height:48px;}
.button.circle.btnArrow::before {background:url(../img/icon/icon_slideArrow.svg) no-repeat center; width:48px; height:48px;}
.button.circle.downArrow {width:24px; height:24px;}
.button.circle.downArrow::before {background:url(../img/common/detailview_btn_arrow_down.svg) no-repeat center; width:24px; height:24px;}
.button.circle.upArrow {width:24px; height:24px;}
.button.circle.upArrow::before {background:url(../img/common/detailview_btn_arrow_up.svg) no-repeat center; width:24px; height:24px;}
.button.circle.return {width:48px; height:48px; min-width:48px; background:#989898; border:0;}
.button.circle.return:hover {opacity:0.7;}
.button.circle.return:active {opacity:1;}
.button.circle.return::before {background:url(../img/common/btn_back.svg) no-repeat center; width:48px; height:48px; filter:grayscale(1) brightness(10); opacity:1;}
.button.circle.pincode {width:50px; height:50px; border:0; box-shadow: none;}
.button.circle.pincode::before {background:url(../img/icon/icon_pincode.svg) no-repeat center; width:50px; height:50px;}

.button.circle.detailViewDown {width:22px; height:22px;}
.button.circle.detailViewDown::before {background:url(../img/common/detailview_btn_arrow_down_n.svg) no-repeat center; width:22px; height:22px;}
.button.circle.detailViewDown:hover:before {background:url(../img/common/detailview_btn_arrow_down_o.svg) no-repeat center;}
.button.circle.detailViewDown:active:before {background:url(../img/common/detailview_btn_arrow_down_p.svg) no-repeat center;}


.button.circle.detailViewUp {width:22px; height:22px;}
.button.circle.detailViewUp::before {background:url(../img/common/detailview_btn_arrow_up_n.svg) no-repeat center; width:22px; height:22px;}
.button.circle.detailViewUp:hover:before {background:url(../img/common/detailview_btn_arrow_up_o.svg) no-repeat center;}
.button.circle.detailViewUp:active:before {background:url(../img/common/detailview_btn_arrow_up_p.svg) no-repeat center;}


.circle.point {width:24px; height:24px;}
.circle.point::before {content:''; width:24px; height:24px; background:url(../img/common/header_icon_point_n.svg)no-repeat center;}
.circle.point:hover:before {content:''; background:url(../img/common/header_icon_point_o.svg)no-repeat;}
.circle.point:active:before {content:''; background:url(../img/common/header_icon_point_p.svg)no-repeat; filter: brightness();}

/* circle */
.button.circle.setting {box-shadow:none;}
.button.circle.setting::before {background:url(../img/icon/icon_setting.svg) no-repeat center; width:40px; height:40px; opacity:1;}
.button.circle.setting:active {background:#f5f5f5; box-shadow:inset 0 0 0 3px #7d2c47;}

.button.circle.out {width:32px; min-width:32px; height:32px;}
.button.circle.out::before {background:url(../img/icon/icon_out.svg) no-repeat center; width:inherit; height:inherit;}
.button.circle.out:active {background:#f5f5f5; box-shadow:inset 0 0 0 3px #7d2c47;}
[dir=rtl] .button.circle.out {transform:rotate(180deg);}

.button.circle.arrow::before {background:url(../img/icon/btn_arrow_down_n.svg) no-repeat center; height: 40px; width: 40px; opacity: 1; filter: brightness(1);}
.button.circle.arrow:active:before {background:url(../img/icon/btn_arrow_down_p.svg) no-repeat center; height: 40px; width: 40px;}
.button.circle.arrow:hover:before {background:url(../img/icon/btn_arrow_down_o.svg) no-repeat center; height: 40px; width: 40px;}
.button.circle.arrow:disabled:before {background:url(../img/icon/btn_arrow_down_d.svg) no-repeat center; height: 40px; width: 40px;}
.button.circle.arrow.up {transform:rotate(180deg);}

.button.circle.edit::before {background:url(../img/icon/icon_edit.svg) no-repeat center; width:40px; height:40px;}

.button.circle.delete::before {background:url(../img/icon/btn_delete_n.svg) no-repeat center; width:40px; height:40px; opacity: 1; filter: brightness(1);}
.button.circle.delete:hover::before {background:url(../img/icon/btn_delete_o.svg) no-repeat center; width:40px; height:40px;}
.button.circle.delete:active::before {background:url(../img/icon/btn_delete_p.svg) no-repeat center; width:40px; height:40px;}
.button.circle.delete:disabled::before {background:url(../img/icon/btn_delete_d.svg) no-repeat center; width:40px; height:40px;}

.button.circle.refresh {width:30px; min-width:30px; height:30px;}
.button.circle.refresh::before {background:url(../img/icon/icon_refresh.svg) no-repeat center; width:inherit; height:inherit;}

/* .btnMore > .button.more::before {width:32px; height:32px; background-size: cover;} */
/* .btnMore > .button.more:hover::before {width:32px; height:32px; background-size: cover; background:url(../img/icon/btn_card_more_o.svg);}
.btnMore > .button.more:active::before {width:32px; height:32px; background-size: cover; background:url(../img/icon/btn_card_more_p.svg);} */


.button.circle.like {width: 30px;min-width: 30px;height: 30px;}
.button.circle.like::before {background: url(../img/common/btn_like_n.svg) no-repeat center;width: inherit;height: inherit;}
.button.circle.like:active:before {background: url(../img/common/btn_like_s.svg) no-repeat center;width: inherit;height: inherit;}
.button.circle.like[aria-pressed="true"]:before {background: url(../img/common/btn_like_s.svg) no-repeat center;width: inherit;height: inherit; filter: grayscale(0);}

.button.circle.minus {width:30px; min-width:30px; height:30px;}
.button.circle.minus::before {background:url(../img/icon/btn_minus.svg) no-repeat center; width:inherit; height:inherit;}
.button.circle.plus {width:30px; min-width:30px; height:30px;}
.button.circle.plus::before {background:url(../img/icon/btn_plus.svg) no-repeat center; width:inherit; height:inherit;}

.button.more {width:32px; height:32px; padding:0px; display:block; border-radius:50%; background:transparent;}
.button.more::before {content:""; background:url(../img/icon/ic_more.svg) no-repeat center; opacity: 1; filter: brightness(1); width:32px; height:32px; display:block;}
/* .button.more:active {background:url(../img/icon/btn_card_more_p.svg);}
.button.more:hover {background:url(../img/icon/btn_card_more_o.svg);}
.button.more:disabled {background:url(../img/icon/btn_card_more_d.svg);} */

.button.circle.moreN {width:32px; min-width:32px; height:32px;}
.button.circle.moreN::before {background:url(../img/common/btn_more_n.svg) no-repeat center; width:inherit; height:inherit;}

.button.circle.return {width:32px; min-width:32px; height:32px; color:#fff; border:0; box-shadow:none;}
.button.circle.return:hover {opacity:0.7;}
.button.circle.return:active {opacity:1;}
.button.circle.return::before {background:url(../img/icon/btn_back_n.svg) no-repeat center; width: 100%; height: 100%; filter: unset;}
.button.circle.return:hover:before {background:url(../img/icon/btn_back_o.svg) no-repeat center; width:inherit;}
.button.circle.return:active:before {background:url(../img/icon/btn_back_p.svg) no-repeat center; width:inherit;}

.button.circle.play {width:32px; min-width:32px; height:32px; background:#666; color:#fff; border:0; box-shadow:none;}
.button.circle.play:hover {opacity:0.7;}
.button.circle.play:active {opacity:1;}
.button.circle.play::before {background:url(../img/icon/icon_play.svg) no-repeat center; width:inherit; height:inherit; filter:grayscale(1) brightness(10); opacity:1;}

.button.circle.stop {width:32px; min-width:32px; height:32px; background:#666; color:#fff; border:0; box-shadow:none;}
.button.circle.stop:hover {opacity:0.7;}
.button.circle.stop:active {opacity:1;}
.button.circle.stop::before {background:url(../img/icon/icon_stop.svg) no-repeat center; width:inherit; height:inherit; filter:grayscale(1) brightness(10); opacity:1;}

.button.btnZoom {width:30px; min-width:30px; max-width:30px; height:30px; box-shadow:none; background:none;}
.button.btnZoom::before {background:url(../img/icon/icon_image_zoom.svg) no-repeat center; width:inherit; height:inherit; opacity:0.8;}

.button.btnRefresh {width:30px; min-width:30px; height:30px; box-shadow:none; background:none;}
.button.btnRefresh::before {background:url(../img/icon/icon_image_refresh.svg) no-repeat center; width:inherit; height:inherit; opacity:0.8;}

.button.circle.clearPlay {width:30px; min-width:30px; height:30px;}
.button.circle.clearPlay::before {background:url(../img/icon/icon_play.svg) no-repeat center; width:inherit; height:inherit; filter:brightness(0);}

.button.circle.clearStop {width:30px; min-width:30px; height:30px;}
.button.circle.clearStop::before {background:url(../img/icon/icon_Stop.svg) no-repeat center; width:inherit; height:inherit; filter:brightness(0); background-size:cover;}

.button.ico.btnMenu::before {background:url(../img/common/menu_icon_menu.svg) no-repeat center; width:40px; height:40px;}
.button.circle.export {background:url(../img/icon/icon_export.png)#fff no-repeat center; width:40px; height:40px;}
.button.circle.date {background:url(../img/icon/icon_date.png)#fff no-repeat center; width:40px; height:40px;}


.button.ico.backBtn {background:none; box-shadow:none;}
.button.ico.backBtn::before {background:url(../img/icon/icon_backArrow_header.png) no-repeat center; width:36px; height:36px;}
.button.ico.backBtn:hover {background:#f5f5f5;}
.button.ico.backBtn:active {background:#ccc;}

.button.ico.btnMenu::before {background:url(../img/icon/icon_menu.svg) no-repeat center; width:36px; height:36px;}
.button.backArrow {width:30px; height:30px; margin:4px; border:0; font-size:0;}
.button.backArrow::before {background:url(../img/icon/icon_slideArrow.svg) no-repeat center; border:0; width:30px; height:30px; padding:0; background-size:100%;}

.button.clearArrow {width:30px; height:30px; margin:4px; border:0; font-size:0; box-shadow:none; transform:rotate(270deg);}
.button.clearArrow::before {background:url(../img/icon/icon_slideArrow.svg) no-repeat center; border:0; width:30px; height:30px; padding:0; background-size:100%;}

.button.clearArrowLeft {width:21px; height:21px; margin:4px; border:0; font-size:0; box-shadow:none;}
.button.clearArrowLeft::before {background:url(../img/common/header_btn_more.svg) no-repeat center; transform: rotate(180deg); border:0; width:21px; height:21px; padding:0; background-size:100%;}

.button.clearArrowRight {width:21px; height:21px; margin:4px; border:0; font-size:0; box-shadow:none;}
.button.clearArrowRight::before {background:url(../img/common/header_btn_more_n.svg) no-repeat center; border:0; width:21px; height:21px; padding:0; background-size:100%;}
.button.clearArrowRight:hover:before {background:url(../img/common/header_btn_more_o.svg) no-repeat center;}
.button.clearArrowRight:active:before {background:url(../img/common/header_btn_more_s.svg) no-repeat center; filter: unset;}

.button.iconAssign,
.button.iconAbout {display:flex; align-items:center; justify-content:center;}

.button.iconAssign::before,
.button.iconAbout::before {content:''; display:block; width:20px; height:20px; margin-right:6px;}
.button.iconAssign::before {background:url(../img/icon/icon_assign.svg) no-repeat center;}
.button.iconAbout::before {background:url(../img/icon/icon_about.svg) no-repeat center;}

.textRemove {width:17px; height:17px; font-size:0; display:none; position:absolute;}
.textRemove::before {content:''; display:block; background:url(../img/common/ic_close.svg)no-repeat center; width:17px; height:17px;}
.textRemove.load::before {content:''; display:block; background:url(../img/common/icon_search_loading.svg)no-repeat center; width:17px; height:17px;}

/* button 20 x 20 */
.button.circle.exportBtn {width:20px; height:20px; margin:4px; border:0; font-size:0;}
.button.circle.exportBtn::before {background:url(../img/common/btn_export_n.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%;}
.button.circle.exportBtn:active:before {background:url(../img/common/btn_export_p.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%;}
.button.circle.exportBtn:hover:before {background:url(../img/common/btn_export_o.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%;}
.button.circle.exportBtn:disabled:before {background:url(../img/common/btn_export_d.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%;}

.button.circle.dark.exportBtn {width:20px; height:20px; margin:4px; border:0; font-size:0;}
.button.circle.dark.exportBtn:active {box-shadow: inset 0 0 3px #a50034;}
.button.circle.dark.exportBtn::before {background:url(../img/common/btn_export_dark_n.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%;}
.button.circle.dark.exportBtn:active:before {background:url(../img/common/btn_export_dark_p.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%; filter: unset;}
.button.circle.dark.exportBtn:hover:before {background:url(../img/common/btn_export_o.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%;}
.button.circle.dark.exportBtn:disabled:before {background:url(../img/common/btn_export_dark_d.svg) no-repeat center; border:0; width:20px; height:20px; padding:0; background-size:100%;}

.button.supportButton {position: relative; display: flex; flex-direction: row; align-items: center; height: auto; padding: 11px;}
.button.supportButton:before {content:''; display: flex; background:url(../img/common/ic_about\ role_18.svg)no-repeat center; width:17px; height:17px; margin-right: 5px;}

/* --------------------------------------------------------
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:#1d828f;}
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 #a50034;}
.switch .switch_input:checked ~ .switch_label {background:#a50034;}
.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;}

.button.circle.navarrow {width:30px; height:30px; box-shadow: none !important; display: flex; align-items: center; justify-content: center; position: absolute;}
/* .button.circle.navarrow:active {box-shadow: inset 0 0 0 3px #7d2c47 !important;} */
.button.circle.navarrow::before {background:url(../img/common/ic_arrow_down.svg) no-repeat center; width:12px; height:8px; opacity:1; filter: grayscale(1);}
/* .button.circle.navarrow.up {transform:rotate(180deg);} */
.button.circle.navarrow.up::before {background:url(../img/common/ic_arrow_up.svg) no-repeat center; width:12px; height:8px; opacity:1; filter: grayscale(1);}

/* --------------------------------------------------------
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:#a50034; transition:all 0.08s ease 0s;}
.progressBox .tools {font-size:12px;}

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

.tableWrap {overflow:hidden;}
.tableWrap table {width:100%; color:#333; 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:53px; padding:10px 10px; overflow:hidden; border:0; text-align:center; text-overflow:ellipsis; vertical-align:middle; font-size:14px; word-break: break-word;}
.tableWrap table thead {border-bottom:1px solid #e5e5e5;}
.tableWrap table thead tr th {border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; background:rgba(245, 246, 250, 1); text-align:center; font-weight:700; line-height:14px; font-size:14px; color:#697387;}
.tableWrap table thead tr th:first-child {border-left:0;}
.tableWrap table thead tr th.leftBorder {border-left:1px solid #e5e5e5;}
.tableWrap table tbody tr:hover{background:rgba(218, 221, 226, 1);}

.tableWrap table thead tr th[aria-sort] {}
.tableWrap table thead tr th[aria-sort] button {display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; line-height:14px; padding:6px; font-family:'Noto Sans KR', sans-serif; width:100%; height:100%; color:#697387}
.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 #383838; text-decoration:none;}
.tableWrap table thead tr th[aria-sort] button[aria-pressed="true"] {color:#383838; display: inline-flex; display: flex; align-items: center; justify-content: center;}
.tableWrap table thead tr th[aria-sort] button[aria-pressed="true"]:after  {color:#383838; display: flex; align-items: center; justify-content: center;}
.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:''; display:block; width:12px; height:8px; background:url(../img/common/navi_depth_arrow_up_n.svg)no-repeat; position:relative;}
.tableWrap table thead tr th[aria-sort="descending"] button:after {content:''; display:block; width:12px; height:8px; background:url(../img/common/navi_depth_arrow_down_n.svg)no-repeat; position:relative;}

.tableWrap table tbody tr td {border-bottom:1px solid #e5e5e5; border-left:1px solid #e5e5e5; height:50px;}
.tableWrap table tbody tr td.jsmartable-row-append-td {width: 40px !important;}
.tableWrap table tbody tr td[rowspan] {border-right: 1px solid #e5e5e5;}
.tableWrap table tbody tr td:first-child {border-left: 0px;}
.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:unset; top:0; 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;}
}

/* jsmartable */
.jsmartable {}
.jsmartable .jsmartable-row {background:#fff !important; outline:none !important;}
.jsmartable .jsmartable-row .jsmartable-col {border:0 !important; padding:0; background:#ccc;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable {background:#f8f8f9 !important; border:0; margin:0; border-bottom:1px solid #ddd;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow {outline:none !important;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow:last-child .jsmartable-subcol {border-bottom:0px;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol {white-space:normal; word-break:break-word; outline:0px solid transparent; border:0; border-bottom:1px solid #ddd;padding:10px;background:none !important; text-align:left;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol:first-child {font-size:13px; min-width: 80px;}

.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol[aria-sort] {}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol[aria-sort] button {font-size:13px; font-weight:400; line-height:14px; padding:6px; font-family:'Noto Sans KR', sans-serif;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol[aria-sort] button[aria-pressed="true"] {color:#cf0652;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol[aria-sort] button[aria-pressed="true"]:after  {color:#cf0652;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol[aria-sort] button:after {color:#68696e; font-size:10px; margin:0 4px;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol[aria-sort="ascending"] button:after {content:"▲";}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol[aria-sort="descending"] button:after {content:"▼";}

.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol button {font-family:'Noto Sans KR', sans-serif; word-break:keep-all; text-align:left;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol .button {margin:2px 0; text-align:center;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol .button.white {width:100%; padding:0;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol .buttonWrap {text-align:left !important;}
.jsmartable .jsmartable-row .jsmartable-col .jsmartable-subtable .jsmartable-subrow .jsmartable-subcol .catagory {margin:unset;}
.jsmartable-subtable {background:none !important; border:1px solid #ddd;}
.jsmartable-subtable tr {}
.jsmartable-subtable td {border:0;}
.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;}
.button.closeDark {font-size: 0; width: 30px; height: 30px; padding: 0; background: none; box-shadow: none;}
.button.closeDark:active {background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 2px #a50034;}
.button.closeDark:hover {background: rgba(255, 255, 255, 0.2);}
.button.closeDark::before {content: ""; display: block; background: url(../img/icon/dark_btn_popup_close_n.svg) no-repeat center center; width: 30px; height: 30px; filter: brightness(10);}
.button.closeDark:hover:before {content: ""; display: block; background: url(../img/icon/dark_btn_popup_close_o.svg) no-repeat center center; width: 30px; height: 30px; filter: unset;}
.button.closeDark:active:before {content: ""; display: block; background: url(../img/icon/dark_btn_popup_close_p.svg) no-repeat center center; width: 30px; height: 30px; filter: unset;}
.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:#354056 #354056 #354056 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);}
}

/* warning */
.warning {position:relative;}
.warning:before {position:absolute; z-index:9999; top:50%; left:50%; width:49px; height:46px; margin:-60px 0 0 -23px; background:url(../img/common/icon_warning.png) no-repeat; content:"";}
.warning:after {position:absolute; z-index:9998; top:0px; left:0px; right:0px; bottom:0px; background:rgba(255, 255, 255, 0.7); content:attr(data-warningTxt); text-align:center; 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;}

/* --------------------------------------------------------
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:#a50034; 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:#a50034;}
.ui-datepicker-calendar .ui-state-active {position:relative; background:#fff !important; color:#a50034 !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
----------------------------------------------------------*/
.selectWrap.h_28 .ui-selectmenu-menu {top: 4px !important;}
.selectWrap.h_28 .ui-selectmenu-button {display:inline-block; position:relative; padding:4px 10px 4px 12px; box-sizing: border-box; overflow:visible; border:1px solid #DADDE2; border-radius: 6px; line-height:19.6px; vertical-align:middle; box-sizing:border-box;}
.ui-selectmenu-button {display:inline-block; position:relative; padding:8px 10px 8px 12px; box-sizing: border-box; overflow:visible; border:1px solid #DADDE2; border-radius: 6px; line-height:19.6px; vertical-align:middle; box-sizing:border-box;}
.ui-selectmenu-button.ui-button {width:100%; height: auto; color:#333; background-color: #FFF; font-size:14px; text-align:left; white-space:nowrap; cursor:pointer; font-weight: 400;}
.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:16px; height:16px; background:url(../img/icon/ic_arrow_down.svg);}
.ui-selectmenu-button:active ,
.ui-selectmenu-button.ui-selectmenu-button-open {border:1px solid #354056;}
.ui-selectmenu-button.ui-selectmenu-button-open span {color:#333;}
.ui-selectmenu-button.ui-selectmenu-button-open .ui-selectmenu-icon.ui-icon:before {content: ""; width: 16px; height: 16px; background: url(../img/icon/ic_arrow_up.svg) no-repeat;}
.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 #DADDE2; background:#fff; color:#333; overflow-x:hidden; border-radius:8px;}
.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: 11px 15px; color:#666; font-size:14px; cursor:pointer; word-break:break-all;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper:hover {background:#eee; text-decoration:underline; background-color: #F5F6FA;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper:active {box-shadow:none; text-decoration:none; background-color: #DADDE2;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active {background:#efefef;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper.ui-state-active:active {background:#e4e4e4;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper.depthOne {padding-left:18px;}
.ui-selectmenu-menu .ui-menu li.ui-menu-item .ui-menu-item-wrapper.depthTwo {padding-left:28px;}
.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);}
}


/* UI - regionGroup
------------------------------------------------*/
.modalBox .mbBody .mbBodyContents .article .regionGroup {margin-bottom:40px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup:last-child {margin-bottom:0;}
.modalBox .mbBody .mbBodyContents .article .regionGroup h3 {font-size:16px; line-height:18px; color:#555; font-weight:600; margin-left:20px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList {font-size:0px; margin:0 18px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt {display:inline-block; vertical-align:middle; width:33.3%; margin:10px 0;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .text {font-size:14px; letter-spacing:-0.4px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .text::before {content:''; display:inline-block; vertical-align:middle; width:35px; height:21px; margin-right:6px; background:url(../img/icon/icon_flag.png)no-repeat;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .canada::before {background-position:0px 0px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .mexico::before {background-position:-35px 0px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .uSA::before {background-position:-70px 0px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .argentina::before {background-position:0px -21px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .bolivia::before {background-position:-35px -21px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .brazil::before {background-position:-70px -21px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .chile::before {background-position:0px -42px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .colombia::before {background-position:-35px -42px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .costaRica::before {background-position:-70px -42px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .dominica::before {background-position:0px -63px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .dominicanRepublic::before {background-position:-35px -63px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .ecuador::before {background-position:-70px -63px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .elSalvador::before {background-position:0px -84px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .guatemala::before {background-position:-35px -84px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .honduras::before {background-position:-70px -84px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .jamaica::before {background-position:0px -105px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .nicaragua::before {background-position:-35px -105px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .panama::before {background-position:-70px -105px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .paraguay::before {background-position:0px -126px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .peru::before {background-position:-35px -126px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .puertoRico::before {background-position:-70px -126px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .uruguay::before {background-position:0px -147px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .venezuela::before {background-position:-35px -147px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .albania::before {background-position:0px -168px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .austria::before {background-position:-35px -168px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .belgium::before {background-position:-70px -168px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .bosniaAndHerzegovina::before {background-position:0px -189px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .bulgaria::before {background-position:-35px -189px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .croatia::before {background-position:-70px -189px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .czechRepublic::before {background-position:0px -210px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .denmark::before {background-position:-35px -210px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .estonia::before {background-position:-70px -210px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .finland::before {background-position:0px -231px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .france::before {background-position:-35px -231px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .germany::before {background-position:-70px -231px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .greece::before {background-position:0px -252px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .hungary::before {background-position:-35px -252px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .ireland::before {background-position:-70px -252px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .italy::before {background-position:0px -273px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .kosovo::before {background-position:-35px -273px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .latvia::before {background-position:-70px -273px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .lithuania::before {background-position:0px -294px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .luxembourg::before {background-position:-35px -294px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .malta::before {background-position:-70px -294px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .netherlands::before {background-position:0px -315px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .norway::before {background-position:-35px -315px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .poland::before {background-position:-70px -315px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .portugal::before {background-position:0px -336px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .republicOfMacedonia::before {background-position:-35px -336px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .romania::before {background-position:-70px -336px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .serbia::before {background-position:0px -357px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .slovakia::before {background-position:-35px -357px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .slovenia::before {background-position:-70px -357px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .spain::before {background-position:0px -378px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .sweden::before {background-position:-35px -378px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .switzerland::before {background-position:-70px -378px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .unitedKingdom::before {background-position:0px -399px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .algeria::before {background-position:0px -420px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .angola::before {background-position:-35px -420px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .armenia::before {background-position:-70px -420px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .azerbaijan::before {background-position:0px -441px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .bahrain::before {background-position:-35px -441px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .benin::before {background-position:-70px -441px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .burkinaFaso::before {background-position:0px -462px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .burundi::before {background-position:-35px -462px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .cameroon::before {background-position:-70px -462px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .capeVerde::before {background-position:0px -483px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .centralAfricanRepublic::before {background-position:-35px -483px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .chad::before {background-position:-70px -483px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .congo::before {background-position:0px -504px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .coteDivoire::before {background-position:-35px -504px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .djibouti::before {background-position:-70px -504px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .drCongo::before {background-position:0px -525px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .egypt::before {background-position:-35px -525px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .equatorialGuinea::before {background-position:-70px -525px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .eritrea::before {background-position:0px -546px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .ethiopia::before {background-position:-35px -546px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .gabon::before {background-position:-70px -546px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .gambia::before {background-position:0px -567px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .georgia::before {background-position:-35px -567px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .ghana::before {background-position:-70px -567px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .guinea::before {background-position:0px -588px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .guineaBissau::before {background-position:-35px -588px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .iran::before {background-position:-70px -588px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .iraq::before {background-position:0px -609px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .israel::before {background-position:-35px -609px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .jordan::before {background-position:-70px -609px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .kenya::before {background-position:0px -630px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .kuwait::before {background-position:-35px -630px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .lebanon::before {background-position:-70px -630px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .liberia::before {background-position:0px -651px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .malawi::before {background-position:-35px -651px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .mali::before {background-position:-70px -651px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .mauritania::before {background-position:0px -672px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .mayotte::before {background-position:-35px -672px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .morocco::before {background-position:-70px -672px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .niger::before {background-position:0px -693px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .nigeria::before {background-position:-35px -693px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .oman::before {background-position:-70px -693px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .pakistan::before {background-position:0px -714px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .palestine::before {background-position:-35px -714px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .qatar::before {background-position:-70px -714px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .rwanda::before {background-position:0px -735px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .saoTomePrincipe::before {background-position:-35px -735px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .saudiArabia::before {background-position:-70px -735px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .senegal::before {background-position:0px -756px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .seychelles::before {background-position:-35px -756px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .sierraLeone::before {background-position:-70px -756px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .somalia::before {background-position:0px -777px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .southAfrica::before {background-position:-35px -777px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .sudan::before {background-position:-70px -777px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .syria::before {background-position:0px -798px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .tanzania::before {background-position:-35px -798px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .togo::before {background-position:-70px -798px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .tunisia::before {background-position:0px -819px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .turkey::before {background-position:-35px -819px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .uganda::before {background-position:-70px -819px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .unitedArabEmirates::before {background-position:0px -840px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .zambia::before {background-position:-35px -840px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .belarus::before {background-position:0px -861px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .kazakhstan::before {background-position:-35px -861px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .kyrgyzstan::before {background-position:-70px -861px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .mongolia::before {background-position:0px -882px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .russianFederation::before {background-position:-35px -882px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .ukraine::before {background-position:-70px -882px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .uzbekistan::before {background-position:0px -903px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .australia::before {background-position:0px -924px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .bangladesh::before {background-position:-35px -924px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .cambodia::before {background-position:-70px -924px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .china::before {background-position:0px -945px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .chinaWasu::before {background-position:-35px -945px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .chinaCntv::before {background-position:-70px -945px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .hongKong::before {background-position:0px -966px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .india::before {background-position:-35px -966px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .indonesia::before {background-position:-70px -966px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .japan::before {background-position:0px -987px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .korea::before {background-position:-35px -987px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .malaysia::before {background-position:-70px -987px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .myanmar::before {background-position:0px -1008px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .nepal::before {background-position:-35px -1008px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .newZealand::before {background-position:-70px -1008px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .philippines::before {background-position:0px -1029px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .singapore::before {background-position:-35px -1029px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .sriLanka::before {background-position:-70px -1029px;}
/*  */
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .taiwan::before {background-position:0px -1050px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .thailand::before {background-position:-35px -1050px;}
.modalBox .mbBody .mbBodyContents .article .regionGroup .regionList .opt .vietnam::before {background-position:-70px -1050px;}
/* side navigation bar */
.modalBox.common {padding: 0;}
.modalBox.common .mbBody {padding: 0; overflow: unset; max-height: unset;}
.modalBox.common .mbBody .mbBodyContents{max-height:unset; height:auto;}
.modalBox.common .mbBody .mbBodyContents .infoBox{display:flex; flex-wrap:wrap;}
.modalBox.common .mbBody .mbBodyContents .infoBox > div{width:100%; box-sizing:border-box;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoHeader{padding:27px 24px; display:flex; align-items:center;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoHeader > .title{flex-grow:1;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoHeader > .title > h2{font-size:20px; font-weight:700; word-break:break-all; color:#111;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody{display:flex;flex-direction:column; gap:16px; padding: 0 20px 0 24px; margin: 0 4px 24px 0; box-sizing: border-box; max-height: 700px; overflow: scroll;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > div{width:100%; font-size:14px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description{display:flex; flex-direction:column; gap:24px; word-break:break-all; box-sizing:border-box; }
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .info{display:flex; flex-wrap:wrap; gap:8px; word-break:break-all; align-items:center;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .info > .site{border-radius:50%; background:#354056; color:#fff; font-weight:700; width:24px; height:24px; align-items:center; display:flex; justify-content:center;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .info > strong{font-size:16px; color:#333; font-weight:500;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .info > .badge{background:#5196B8; padding:2px 10px; border-radius:100px; font-size:14px; font-weight:400; color:#fff;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .cardBox{display:flex; flex-direction:column; gap:8px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .cardBox .card{border-radius:8px; padding:12px; display:flex; flex-direction:column; gap:8px; border:1px solid rgba(0, 0, 0, 10%);}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .cardBox .card .cardHeader .title{flex-grow:1; margin-right:10px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .cardBox .card .cardHeader .title h3{font-size:14px; font-weight:700;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .cardBox .card .cardBody p{font-size:14px; font-weight:500; margin-bottom:8px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .cardBox .card .cardBody .dateInfo{font-weight:400; font-size:12px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .highlight{flex-shrink:0; border-radius:50%; width:6px; height:6px; background:rgba(29, 130, 143, 1); display:inline-block;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .buttonBox{display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid rgba(0, 0, 0, 10%); padding-bottom:16px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .buttonBox > button > .count{font-size:12px; font-weight:700; margin-left:2px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .tagBox{display:flex; flex-wrap:wrap; gap:8px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description .tagBox > button {align-items:center; gap:6px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl{word-break:break-all;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl dt{font-size:16px; font-weight:500; margin-bottom:2px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl dd{font-size:13px; font-weight:400;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList{display:flex; flex-direction:column; gap:16px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dt{font-weight:700; font-size:12px; min-height:24px; border-bottom:1px solid rgba(0, 0, 0, 10%);}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd{display:flex; align-items:center; min-height:40px; gap:10px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd .textBox{flex-grow:1; font-size:16px; font-weight:400; word-break:break-all;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd .thumbBox{height:40px; width:40px; flex-shrink:0;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd .thumbBox > img{height:100%; width:100%;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd.vertical{flex-direction:column; gap:4px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd.vertical > p{flex-grow:1; font-size:14px; font-weight:400; word-break:break-all; text-align:center;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd.vertical .thumbBox{height:189px; width:100%; margin-bottom:12px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd.vertical .thumbBox > img{height:100%; width:100%;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd .pageLink{flex-shrink:0; width:20px; height:20px; display:flex; align-items:center; font-size:0px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .description dl.linkList dd .pageLink img{filter:brightness(0); max-height:100%; max-width:100%;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .thumbBox{height:189px; display:flex; align-items:center; justify-content:center; background:#e7e7e7; border:1px solid #ccc; box-sizing:border-box;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoBody > .thumbBox > img{max-width:100%; max-height:100%;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoFooter{padding: 0 24px 24px 24px; flex-direction:column; display:flex; gap:8px;}
.modalBox.common .mbBody .mbBodyContents .infoBox > .infoFooter > button{width:100%; gap:8px; font-size:16px;}

/* alert span */
span.alert{width:18px; height:18px; display:inline-block; margin-right:4px; font-size:0px;}
span.alert::before{content:""; height:inherit; width:inherit; background:url(../img/icon/ic_alert_info.svg) no-repeat center; display:inline-block;}
/* iconRight */
.iconRightArrow::after{padding:5px; height:36px; width:36px; content:""; margin-left:4px; background:url(../img/icon/ic_arrow_right.svg) no-repeat center;}

.badge{border-radius:100px; display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:400; word-break:break-all; min-height:16px; box-sizing:border-box;}
.badge > .icon{margin:0px; padding:0px; width:15px; height:15px; display:inline-flex;}
.badge > .icon::before{width: 15px; height:15px; content:""; background:url(../img/icon/ic_info_fill.svg) no-repeat center; display:inline-block;}
.badge.large{padding:4px 12px; }
.badge.medium{padding:2px 10px; }
.badge.small{padding:1.5px 8px; font-size:12px;}
.badge.dark{color:#fff !important;}
.badge.light.custom{background:#E6F2F8; color:#36799A;}
.badge.light.custom .icon.info::before{background:url(../img/icon/ic_info_fill_custom.svg) no-repeat center;}
.badge.light.primary{background:#DFEDEF; color:#16646E;}
.badge.light.primary .icon.info::before{background:url(../img/icon/ic_info_fill_custom.svg) no-repeat center;}
.badge.light.secondary{background:#E8EBF0; color:#354056;}
.badge.light.secondary .icon.info::before{background:url(../img/icon/ic_info_fill_secondary.svg) no-repeat center;}
.badge.light.info{background:#DDECFF; color:#0E66E8;}
.badge.light.info .icon.info::before{background:url(../img/icon/ic_info_fill_info.svg) no-repeat center;}
.badge.light.confirm{background:#D1FADF; color:#027948;}
.badge.light.confirm .icon.info::before{background:url(../img/icon/ic_info_fill_confirm.svg) no-repeat center;}
.badge.light.warn{background:#FEEFC7; color:#B54708;}
.badge.light.warn .icon.info::before{background:url(../img/icon/ic_info_fill_warning.svg) no-repeat center;}
.badge.light.error{background:#FEE4E2; color:#B32318;}
.badge.light.error > .icon.info::before{background:url(../img/icon/ic_info_fill_error.svg) no-repeat center;}
.badge > .icon.wait::before{background:url(../img/common/ic_status_wait.svg) no-repeat center; border-radius:50%;}
.badge > .icon.approve::before{background:url(../img/common/ic_status_check.svg) no-repeat center; border-radius:50%;}
.badge > .icon.cancel::before{background:url(../img/common/ic_status_x.svg) no-repeat center; border-radius:50%;}
.badge > .icon.reject::before{background:url(../img/common/ic_status_reject.svg) no-repeat center; border-radius:50%;}
.badge.info > .icon.down::before{background:url(../img/common/ic_arrow_info_down.svg) no-repeat center; border-radius:50%;}
.badge.info > .icon.up::before{transform: rotate(180deg); background:url(../img/common/ic_arrow_info_down.svg) no-repeat center; border-radius:50%;}
.badge.error > .icon.up::before{background:url(../img/common/ic_arrow_error_up.svg) no-repeat center; border-radius:50%;}
.badge.error > .icon.down::before{transform:rotate(180deg); background:url(../img/common/ic_arrow_error_up.svg) no-repeat center; border-radius:50%;}
.badge.secondary > .icon.down::before{background:url(../img/common/ic_arrow_secondary_down.svg) no-repeat center; border-radius:50%;}
.badge.secondary > .icon.up::before{transform:rotate(180deg); background:url(../img/common/ic_arrow_secondary_down.svg) no-repeat center; border-radius:50%;}
.badge.light{}
.badge.dark.custom{background:#5196B8;}
.badge.dark.primary{background:#1D828F;}
.badge.dark.secondary{background:#354056;}
.badge.dark.info{background:#0E66E8;}
.badge.dark.confirm{background:#12B76A;}
.badge.dark.warn{background:#F79009;}
.badge.dark.error{background:#D92D20;}