@charset "utf-8";

.arrowWrap .arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    transition: 0.4s ease;
    transform: rotate(0);
}

.arrowWrap .arrow.small {
    width: 4px;
    height: 4px;
}

.arrowWrap .arrow:before,
.arrowWrap .arrow:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 6px;
    border-bottom: 8px solid white;
    background-color: transparent;
    transition: 0.4s ease;
    transform: rotate(0);
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
}

.arrowWrap .arrow.small:before,
.arrowWrap .arrow.small:after {
    width: 2px;
    height: 4px;
    border-bottom: 6px solid white;
}

.arrowWrap .arrow:before {
    transform: rotate(-135deg);
}

.arrowWrap .arrow:after {
    transform: rotate(135deg);
}

.arrowWrap.active .arrow {
    transform: rotate(0);
    transform: translate(0, -10px);
}

.arrowWrap.active .arrow:before {
    transform: rotate(-45deg);
}

.arrowWrap.active .arrow:after {
    transform: rotate(45deg);
}

select.customize {
    height: 24px;
    padding-right: 15px;
    padding-left: 5px;
    border-top: 1px solid #A0A0A0;
    border-right: 1px solid #D0D0D0;
    border-bottom: 1px solid #D0D0D0;
    border-left: 1px solid #A0A0A0;
    background: #FFF url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEVJREFUeNpi/P//PwOpgImBDMB0/vz5/yCMLoFLHMUmZAW4FMMAI8hPuBQZGhoy4rQJmyQuDSjOQ1aETwPceXQJcoAAAwBtwyPfpXWbeQAAAABJRU5ErkJggg==') right center no-repeat;
    color: #666;
    vertical-align: middle;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
}

select.customize::-ms-expand {
    display: none;
}

select.customize option[disabled] {
    background: #DADADA;
}

select.customize:hover {
    background-color: #F5FAFC;
}

select.customize:focus {
    background-color: #FFFFFF;
}

.close-btn {
    position: absolute;
    width: 17px;
    height: 17px;
    color: transparent;
    transition: all ease 0.3s;
    cursor: pointer;
    box-sizing: border-box;
}

.close-btn:before,
.close-btn:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 17px;
    height: 1px;
    margin-top: -1px;
    margin-left: -9px;
    background: rgba(255, 255, 255, .5);
    transition: all ease 1s;
}

.close-btn:before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.close-btn:after {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.close-btn:hover,
.close-btn:focus {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.close-btn:hover:before,
.close-btn:focus:before,
.close-btn:hover:after,
.close-btn:focus:after {
    background: rgba(255, 255, 255, 1);
}

.ui-datepicker {
    margin-top: 1px;
}

.ui-datepicker table {
    font-size: 12px !important;
    color: #666;
}

.ui-datepicker td {
    padding: 3px !important;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
.ui-button.ui-state-disabled:hover,
.ui-button.ui-state-disabled:active {
    border: none !important;
    background: none !important;
    font-family: tahoma !important;
    font-size: 11px;
    color: #666 !important;
    text-align: center !important;
}

.ui-widget-header {
    border: none !important;
    background: rgba(28, 42, 53, .9) !important;
    color: #FFF !important;
}

.ui-datepicker-prev.ui-state-hover,
.ui-datepicker-next.ui-state-hover {
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
}

.ui-datepicker-prev .ui-icon {
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    background-position: -65px 0px !important;
    background-image: url(/resources/img/icon/main_icons.png) !important;
    vertical-align: middle !important;
    opacity: .5 !important;
}

.ui-datepicker-next .ui-icon {
    width: 12px !important;
    height: 12px !important;
    margin-top: -6px !important;
    margin-left: -2px !important;
    background-position: -80px 0px !important;
    background-image: url(/resources/img/icon/main_icons.png) !important;
    vertical-align: middle !important;
    opacity: .5 !important;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 2px !important;
}

.ui-datepicker-year {
    width: 50px !important;
    margin-right: 2px !important;
}

.ui-datepicker-month {
    width: 50px !important;
    margin-left: 5px !important;
}

.ui-datepicker-today {
    border-radius: 5px;
    background: rgba(28, 42, 53, .8) !important;
    color: #FFF !important;
}

.ui-datepicker-current-day {
    border-radius: 5px;
    background: rgba(28, 42, 53, .1) !important;
}

.ui-datepicker .ui-datepicker-calendar .ui-datepicker-today a {
    color: #FFF !important;
}

.ui-datepicker .ui-datepicker-calendar .ui-datepicker-current-day a {
    color1: #666 !important;
}

.ui-datepicker-calendar .ui-datepicker-week-end a,
.ui-datepicker-calendar .ui-datepicker-week-end span {
    color: #ce2020 !important;
}

.checkbox[type=checkbox],
.checkbox[type=radio] {
    display: none;
}

label.checkboxArea:hover label.checkboxWrap {
    box-shadow: 0px 0px 4px 1px rgba(0, 125, 184, 0.3);
}

label.checkboxWrap {
    display: block;
    display: inline-block;
    position: relative;
    width: 24px;
    height: 24px;
    margin-top: -3px;
    padding: 3px;
    border-radius: 5px;
    background-color: white;
    background-image: -webkit-linear-gradient(top, #eeeeee, white 25px);
    background-image: -moz-linear-gradient(top, #eeeeee, white 25px);
    background-image: -o-linear-gradient(top, #eeeeee, white 25px);
    background-image: linear-gradient(to bottom, #eeeeee, white 25px);
    vertical-align: middle;
    box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
    cursor: pointer;
}

label.checkboxWrap.radio {
    border-radius: 12px;

}

.checkboxInput {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

.checkboxLabel {
    display: block;
    position: relative;
    height: 18px;
    line-height: 18px;
    border-radius: inherit;
    background-size: 20px;
    background-color: #eceeef;
    background-image: none;
    font-weight: bold;
    text-align: center;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out;
    -webkit-transition-property: opacity background;
    -moz-transition-property: opacity background;
    -o-transition-property: opacity background;
    transition-property: opacity background;
}

.checkboxLabel:before,
.checkboxLabel:after {
    position: absolute;
    top: 50%;
    line-height: 1;
    margin-top: -.5em;
    -webkit-transition: inherit;
    -moz-transition: inherit;
    -o-transition: inherit;
    transition: inherit;
}

.checkboxLabel.radio {
    background-size: 0px;
}

.checkboxInput:checked~.checkboxLabel {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px;
    background-color: #47a8d8;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l2.667 3L9 1' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    transition: background-size 0.05s ease-out;
}

.checkboxInput.radio:checked~.checkboxLabel.radio {
    background-position: center;
    background-size: 10px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='-1 -1 2 2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='0' cy='0' r='1' fill='%23fff'%3E%3C/circle%3E%3C/svg%3E");
    transition: background-size 0.15s;
}

.checkboxInput:checked~.checkboxLabel:before {
    opacity: 0;
}

.checkboxInput:checked~.checkboxLabel:after {
    opacity: 1;
}

.inputLabel {
    height: 24px;
    line-height: 24px;
    margin-right: 10px;
    margin-left: 5px;
    color: #666;
    cursor: pointer;
}

.inputLabel:checked {
    font-weight: bold;
}

.lds-dual-ring {
    display: inline-block;
    width: 30px;
    height: 30px;
}

.lds-dual-ring:after {
    content: " ";
    display: block;
    width: 18px;
    height: 18px;
    margin: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    border-color: #fff transparent #fff transparent;
    animation: lds-dual-ring 1.2s linear infinite;
}

#mainLoadingArea {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, .9);
}

#mainLoadingArea .loadingIcon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 13px;
    margin-top: -20px;
    margin-left: -77px;
    border: 0;
    background: url(data:image/gif;base64,R0lGODlhlgANAKIHAMzi5FnYeeXw8czh5Nnp67/a3f///////yH/C05FVFNDQVBFMi4wAwEAAAAh+QQFFAAHACwAAAAAlgANAAADXnh60v4wykmrvTjrHdfiYCiOZNkpZqquLIg6RizPdG3feK7vfO//swcDBiwaj8ik0iBZOp/QaC8irVqvSSp2y+3Smt6wGCp8jM9ooHDYarvfpg98Tq9LPC+7fq/yJAAAIfkEBQAABwAsAAAAAJYADQAAA2V4etT+MMpJq7046x3X4mAojmTZKWaqriyIOl4sz3Rt33iu77z9MLCecEgsGo9AyCLAbDqfT6R0Sh2eDtBstsrtej9KhXbc/JrPRgl6zT7/fu24PB1s2e94FTjP7/uve3+CgykeCQAh+QQFAAAHACwAAAAAlgANAAADa3h6MP4wykmrvTjrzSFYSyeOZGmeUoiubOt2CgTOdG3feK7vfO/jMtlvSCwaj8jDBBloOp9QaHJKpaaO0Wy2yu3+rkat2Oktm23Ls3rNVjmUj7Z8bo3DX/i8HuXe+/+AETQNEoSBh4gcHwsJACH5BAUAAAcALAAAAACWAA0AAANseHrV/jDKSau9OOsd1+JgKI5k2Slmqq4siDpGLM90bd94ru987/+zBwMGLBqPyKTSIFEGntCodEqtRpfYbC3itHq/Vq04y02Cz+jAeJ1sst/wuE74kNvvb+Gwxe/7TR9/goOEEh4vhYmKKh4JACH5BAUAAAcALBoABQA8AAMAAAMUaLrcHTDKSauVLufLO9fg4o1kkAAAIfkEBQAABwAsLgAFADwAAwAAAxRoutwdMMpJq5Uu58s71+DijWSQAAAh+QQFAAAHACxCAAUAPAADAAADFGi63B0wykmrlS7nyzvX4OKNZJAAACH5BAUAAAcALAAAAACWAA0AAAN0eHow/jDKSau9OOvNIVhLJ45kaZ5SiK5s63YKZMx0bd94ru987//AYA1ykAmPyKRyyTRMmtBoNECtWq/YrNZKk0i/YOF2TB53I+G0OlduuwNn9HpOr8cHxYd9z48S8y+BgoMoKoSHiIkpIAwTDYqQkR0fCwkAIfkEBQAABwAsAAAAAJYADQAAA2Z4etT+MMpJq7046x3X4mAojmTZKWaqriyIOl4sz3Rt33iu77z9MLCecEgsGo9ACHLJZBqe0KhUejw1r9jddLutKrPg8IxLhnq/4rR6/WokCey4nPl7t+74POmj7/v/EjKAg4QsHgkAIfkEBSgABwAsAAAAAJYADQAAA154etL+MMpJq7046x3X4mAojmTZKWaqriyIOkYsz3Rt33iu73zv/7MHAwYsGo/IpNIgWTqf0GgvIq1ar0kqdsvt0presBgqfIzPaKBw2Gq736YPfE6vSzwvu36v8iQAACH5BAUAAAcALAAAAACWAA0AAANjeHrU/jDKSau9OOsd1+JgKI5k2Slmqq4siDpeLM90bd94ru+8/TCwnnBILBqPQAhyyWwiA9CodPpROq/Y7GzKlVZ/2rCY2S1/weO0WvtDr99wIrhFr9tV57t+z3e/+oCBeAsJACH5BAUAAAcALAAAAACWAA0AAANpeHow/jDKSau9OOvNIVhLJ45kaZ5SiK5s63YKBM50bd94ru987+My2W9ILBqPyMMkyWw6QYGodEqlDlPPrHZY7Xavka14jPOapeAwec1mBx/tuLwpfNnveJYqz+/7sSANEoJ/hYYcHwsJACH5BAUAAAcALAAAAACWAA0AAANteHrV/jDKSau9OOsd1+JgKI5k2Slmqq4siDpGLM90bd94ru987/+zBwMGLBqPyKTSIFk6n7yAdEqtWq9Y6i8C7Xpn2bA4vIV8z9Cxeh0om9HwuNwmfMzveK9w2Or7/yYfgIOEhRIeL4aKiyoeCQAh+QQFAAAHACxHAAUAPAADAAADFBi63P6QmUmrtTHrfHvfYBh4JJUAACH5BAUAAAcALDMABQA8AAMAAAMUGLrc/pCZSau1Met8e99gGHgklQAAIfkEBQAABwAsHwAFADwAAwAAAxQYutz+kJlJq7Ux63x732AYeCSVAAAh+QQFAAAHACwAAAAAlgANAAADdHh6MP4wykmrvTjrzSFYSyeOZGmeUoiubOt2CmTMdG3feK7vfO//wGANcpAJj8ikcsk0THKBqHRKrVqv06Z2q5RAseAwlksu97w4sXodMLvftCd8Tq/HH8WHfc/fEvMvgYKDKCqEh4iJKSAMEw2KkJEdHwsJACH5BAUAAAcALAAAAACWAA0AAANqeHrU/jDKSau9OOsd1+JgKI5k2Slmqq4siDpGLM90bd94ru987/+zBwMGLBqPyKTSIJEFntCodBpdWq/YXsRJ7Xqz4DB4G/Oap+K0+thcu99v4QNOr1+Fw5Z+zzd9+oCBghIeL4OHiCoeCQAh+QQFFAAHACwAAAAAlgANAAADXnh60v4wykmrvTjrHdfiYCiOZNkpZqquLIg6RizPdG3feK7vfO//swcDBiwaj8ik0iBZOp/QaC8irVqvSSp2y+3Smt6wGCp8jM9ooHDYarvfpg98Tq9LPC+7fq/yJAAAOw==);
}

#mainLoadingArea .progressBar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 25px;
    margin-top: -30px;
    margin-left: -150px;
    padding: 3px;
    border: 3px solid #bfd4dd;
    border-radius: 15px;
    background: #FFF;
}

#mainLoadingArea .progressInner {
    width: 100%;
    height: 100%;
    line-height: 13px;
    border-radius: 15px;
    background: #FAFAFA;
    background-repeat: no-repeat;
    background-size: 0;
    background-image: linear-gradient(to top, #09b700, #2bde22 25px);
    font-family: tahoma;
    font-weight: bold;
    font-size: 10px;
    color: rgba(4, 77, 0, .8);
    text-align: center;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, .5);
    box-shadow: inset 0px 0px 2px 1px rgba(0, 0, 0, 0.1),
        inset 2px 2px 2px 1px rgba(255, 255, 255, .3);
}

#mainLoadingArea .loadingMent {
    position: absolute;
    top: 50%;
    width: 100%;
    line-height: 18px;
    font-size: 11px;
    color: #666;
    letter-spacing: -1px;
    text-align: center;
    animation: blink-effect .7s alternate-reverse infinite;
}

#mainLoadingArea .loadingMent strong {
    color: #045e00;
}

#uiDialogConfirm {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: #212C35 !important;
    transition: background-color 1s !important;
    opacity: .9 !important;
}

.dialogBody {
    position: fixed;
    top: calc(50% - 125px);
    left: calc(50% - 250px);
    z-index: 101;
    width: 500px;
    height: 250px;
    margin-top: 50px;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .05);
    opacity: 0;
}

.dialogTitle {
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    border-bottom: 1px solid #EAEAEA;
    font-family: 'NotoSansKR' !important;
    font-weight: 600 !important;
    font-size: 14px;
    color: #666;
    cursor: move;
}

.ui-dialog.ui-widget.ui-widget-content {
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .05);
}

.ui-dialog .ui-widget-header {
    background: #FFF !important;
}

.ui-dialog .ui-dialog-titlebar {
    height: 40px;
    line-height: 40px;
    padding: 0px 10px !important;
}

.ui-dialog .ui-dialog-buttonpane {
    border: none !important;
}

.ui-widget-overlay {
    background-color: #212C35 !important;
    transition: background-color 1s !important;
    opacity: .9 !important;
}

.tui-grid-cell-header {
    font-family: 'NotoSansKR' !important;
}


.switchTab {
    display: block;
    height: 25px;
    border: 1px solid #F0F0F0;
    border-radius: 3px;
    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    font-size: 0;
    box-shadow: 0 1px 0 rgba(100, 100, 100, .1),
        0 1px 1px -1px rgba(100, 100, 100, .1),
        0 1px 40px rgba(100, 100, 100, 0.01) inset;
}

.switchTab label:first-child span {
    border-radius: 3px 0px 0px 3px;
}


.switchTab label:last-child span {
    border-right: 0px !important;
    border-radius: 0px 3px 3px 0px;
}

.switchTab input[type=radio] {
    visibility: hidden;
    position: absolute;
}

.switchTab input[type=radio]+span {
    display: inline-block !important;
    height: 23px;
    line-height: 23px;
    padding: 0px 9px;
    border-right: 1px solid #F0F0F0;
    background: #FFF;
    font-weight: normal;
    font-size: 11px;
    letter-spacing: -1px;
    vertical-align: middle;
    cursor: pointer;
}

.switchTab input[type=radio]:checked+span {
    background-color: #007AB4;
    background-image: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, 0));
    color: #888;
    color: #FFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .5) inset;

}

.switchTab span:hover {
    background-color: #FAFAFA;
    color: #207FC3;
}

.switchTab span.on:hover {
    background-color: #1775B8;
    color: #D7EEFF;
}

.tui-grid-cell-header {
    position: relative !important;
}

.tui-grid-cell-header a.tui-grid-btn-sorting {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 0px;
    right: 3px;
    width: 11px;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 0px center;
    background-image: url('data:image/gif;base64,R0lGODlhIQAHAKIAAAAAAP///8/Pz0pKSv///wAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFAAAEACwAAAAAIQAHAAADI0iqsr7jyclEmyNTcqX9UiZO4Gae22eRayhGXktuI9Wh4ZMAADs=');
    vertical-align: middle;
    cursor: pointer;
}

.tui-grid-cell-header a.tui-grid-btn-sorting.tui-grid-btn-sorting-down {
    background-position: -11px center;
}

.tui-grid-cell-header a.tui-grid-btn-sorting.tui-grid-btn-sorting-up {
    background-position: -22px center;
}

@keyframes lds-dual-ring {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes blink-effect {
    0% {
        opacity: 1;
    }

    25% {
        opacity: .8;
    }

    50% {
        opacity: .5;
    }

    75% {
        opacity: .3;
    }

    100% {
        opacity: .1;
    }
}