@charset "UTF-8";
/** ----------------------------------------------------------------------------
 * Table of Contents:
 *
 * 1.0 - Common
 * 2.0 - Heading
 * 3.0 - List
 * 4.0 - Button
 * 5.0 - Form
 * 6.0 - Table
 * 7.0 - Tab
 * 8.0 - Toggle
 * 9.0 - Box
 * 10.0 - Icons
 * 11.0 - Module
 *
 * 20.0 - 기존 mp-toolkit 스타일
 * -----------------------------------------------------------------------------
 */

/** ----------------------------------------------------------------------------
 * 1.0 - Common
 * -----------------------------------------------------------------------------
 */


/* Layout */
.align-left {
    text-align: left !important;
}
.align-center {
    text-align: center !important;
}
.align-right {
    text-align: right !important;
}
.layout-left {
    float: left;
}
.layout-right {
    float: right;
}
.group { /* float 요소 해제 */
    zoom: 1;
}
.group:before {
    display: table;
    content: '';
}
.group:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    content: '';
}
caption, legend, .off-screen { /* 화면에 숨김 */
    overflow: hidden;
    position: absolute;
    left: -9999em;
    width: 1px;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    text-indent: -9999em;
    background: none;
    font-size: 1px;
    line-height: 1px;
}
caption {
    position: static;
}

/* Animation */
.motion {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    /*transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);*/
}
.motion-1 {
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
}
.motion-2 {
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    /*transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);*/
}
.motion-3 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    /*transition: all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);*/
}

a.btn, .btn, /* Button */
.ui-select, /* Select */
input.ui-form /* Form */ {
    position: relative;
    display: inline-block;
    padding: 7px 1em;
    border: 1px solid #d5d9df;
    border-radius: 2px;
    box-sizing: border-box;
    outline: none;
    line-height: 1.42857143;
    font-size: 1em;
    /*white-space: nowrap;*/
    vertical-align: middle;

    text-decoration: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    /*-webkit-user-select: none;*/
    /*-moz-user-select: none;*/
    /*-ms-user-select: none;*/
    /*user-select: none;*/
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
textarea.ui-form {
    position: relative;
    display: inline-block;
    width: 100%;
    padding: 7px 1em;
    border: 1px solid #d5d9df;
    border-radius: 2px;
    box-sizing: border-box;
    outline: none;
    line-height: 1.42857143;
    font-size: 1em;
    vertical-align: middle;
    text-decoration: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
a.btn:hover, .btn:hover, a.btn:active, .btn:active, a.btn:focus, .btn:focus,
.ui-select:hover, .ui-select:active, .ui-select:focus, .ui-select.open,
input.ui-form:hover, input.ui-form:active, input.ui-form:focus {
    border-color: #828d9e;
    z-index: 1;
}
a.btn:hover, .btn:hover, a.btn:active, .btn:active, a.btn:focus, .btn:focus {
    color: #f0606c;
    border-color: #f0606c;
}
.width-xs {
    width: 110px;
    padding: 7px 0.6em !important;
}
.width-ss {
    width: 150px;
}
.width-sm {
    width: 200px;
}
.width-mm {
    width: 300px;
}
.width-md {
    width: 40%;
}
.width-lg {
    width: 70%;
}
.width-xl {
    width: 85%;
}
.width-full {
    width: 100%;
}


/** ----------------------------------------------------------------------------
 * 2.0 - Heading
 * -----------------------------------------------------------------------------
 */

/** ----------------------------------------------------------------------------
 * 3.0 - List
 * -----------------------------------------------------------------------------
 */

.list-dot, .list-num {
    margin: 0;
    padding: 0;
}
.list-dot > li, .list-num > li {
    position: relative;
    list-style: none;
}
.list-dot > li:before {
    display: inline-block;
    content: '';
    width: 3px;
    height: 3px;
    margin: -2px 4px 0 0;
    border-radius: 50%;
    background: #969ba2;
    vertical-align: middle;
}
.list-num > li {
    padding-left: 24px;
}
.list-num .num {
    position: absolute;
    top: 3px;
    left: 0;
    display: block;
    width: 17px;
    height: 17px;
    background: #485a73;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 17px;
}

.list-decimal {

}
.list-decimal > li {
    padding-left: 2px !important;
    list-style-type: decimal !important;
}
.list-horizon > li {
    float: left;
    margin-right: 20px;
}
.list-horizon > li:last-child {
    margin-right: 0;
}


/** ----------------------------------------------------------------------------
 * 4.0 - Button
 * -----------------------------------------------------------------------------
 */

a.btn, .btn {
    /*margin: 0 2px;*/
    background-color: transparent;
    text-align: center;
    white-space: nowrap;
    text-decoration: none !important;
    font-weight: 400;
    color: inherit;
}
a.btn i, .btn i {
    vertical-align: middle;
}
.btn-icon-right i {
    margin-left: 0.24em;
}
a.btn-bd-primary, .btn-bd-primary {
    z-index: 1;
    border-color: #364864;
    color: #364864;
}
a.btn-bd-accent, .btn-bd-accent {
    z-index: 1;
    border-color: #f0606c;
    color: #f0606c;
}
a.btn-bd-green, .btn-bd-green {
    z-index: 1;
    border-color: #53b9a5;
    color: #53b9a5;
}
a.btn-bd-blue, .btn-bd-blue {
    z-index: 1;
    border-color: #57a8c3;
    color: #57a8c3;
}
a.btn-bd-gold, .btn-bd-gold {
    z-index: 1;
    border-color: #dd9649;
    color: #dd9649;
}
a.btn-bd-black, .btn-bd-black {
    z-index: 1;
    border-color: #364864;
    color: #364864;
}
a.btn-bg-primary, .btn-bg-primary {
    z-index: 1;
    border-color: #2f415d !important;
    color: #fff !important;
    background-color: #2f415d !important;
}
a.btn-bg-accent, .btn-bg-accent {
    z-index: 1;
    border-color: #f06068 !important;
    color: #fff !important;
    background-color: #f06068 !important;
}
a.btn-bg-green, .btn-bg-green {
    z-index: 1;
    border-color: #53b9a5 !important;
    color: #fff !important;
    background-color: #53b9a5 !important;
}
a.btn-bg-blue, .btn-bg-blue {
    z-index: 1;
    border-color: #57a8c3 !important;
    color: #fff !important;
    background-color: #57a8c3 !important;
}
a.btn-bg-gold, .btn-bg-gold {
    z-index: 1;
    border-color: #dd9649 !important;
    color: #fff !important;
    background-color: #dd9649 !important;
}
a.btn-bg-black, .btn-bg-black {
    z-index: 1;
    border-color: #2f415d !important;
    color: #fff !important;
    background-color: #2f415d !important;
}
[class^='btn btn-icon-']::before, [class^='btn btn-icon-']::after {
    display: inline-block;
    font-family: 'FontAwesome';
    font-size: 0.9em;
}
a.btn-icon-external-link::after, .btn-icon-external-link::after {
    margin-left: 5px;
    content: '\f08e';
}
a.btn-xs, .btn-xs {
    padding: 0 8px;
    font-size: 0.857142em;
}
a.btn-sm, .btn-sm {
    padding: 4px 0.8em;
    font-size: 0.928571em;
}
a.btn-md, .btn-md {
    padding: 7px 1em;
    font-size: 1em;
}
a.btn-lg, .btn-lg {
    padding: 8px 1.1em;
    font-size: 1.142857em;
    font-weight: 600;
}
a.btn-xl, .btn-xl {
    padding: 10px 1.2em;
    font-size: 1.285714em;
    font-weight: 600;
}
.btn-list {
    margin: 0;
    padding: 0;
}
.btn-list > li {
    float: left;
    list-style: none !important;
}
.btn-list > li > a.btn, .btn-list > li > .btn {
    margin-left: -1px;
    border-radius: 0;
}
.btn-list > li:first-child > a.btn, .btn-list > li:first-child > .btn {
    margin-left: 0;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.btn-list > li:last-child > a.btn, .btn-list > li:last-child > .btn {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}
.btn-wrap {
    margin: 20px 0;
}
a.btn-search::before, .btn-search::before {
    display: inline-block;
    margin: 0 6px 0 0;
    color: #d5d9df;
    font-family: 'FontAwesome';
    font-size: 17px;
    content: '\f002';
}

/** ----------------------------------------------------------------------------
 * 5.0 - Form
 * -----------------------------------------------------------------------------
 */

.required {
   font-weight: 700;
    color: #f0606c;
}

/* Input */

input[type="text"], input[type="password"] {
    cursor: auto;
}

/* Checkbox,  Input */
input[type='radio'], input[type='checkbox'], input[type='radio'] + label, input[type='checkbox'] + label {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.571;
}
input[type='radio'] {
    margin-top: -1px;
}
input[type='radio'] + label,
input[type='checkbox'] + label {
    position: relative;
    z-index: 0;
    margin-right: 20px;
    cursor: pointer;
}
input[type='radio'].ui-form + label,
input[type='checkbox'].ui-form + label {
    padding-left: 20px;
}
input[type='radio'].ui-form + label.no-label,
input[type='checkbox'].ui-form + label.no-label {
    padding-left: 0
}
input[type='radio'].ui-form,
input[type='checkbox'].ui-form {
    position: absolute;
    z-index: -1000;
    left: -1000em;
    overflow: hidden;
}
input[type="radio"].ui-form + label::before,
input[type="checkbox"].ui-form + label::before {
    position: absolute;
    top: 50%;
    left: 0;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    color: #d5d9df;
    font-family: 'FontAwesome';
    font-size: 17px;
    line-height: 18px;
    /*vertical-align: -1px;*/
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
}
input[type="radio"].ui-form:checked + label::before,
input[type="checkbox"].ui-form:checked + label::before {
    color: #f0606c; /* f06068 444850 */
}
input[type="radio"].ui-form + label::before {
    content: '\f1db';
}
input[type="radio"].ui-form:checked + label::before {
    content: '\f058'; /* f192 */
}
input[type="checkbox"].ui-form + label::before {
    content: '\f096';
}
input[type="checkbox"].ui-form:checked + label::before {
    content: '\f046';
}
input[type="checkbox"].ui-form.reverse:checked + label::before {
    content: '\f14a';
}


/* Select */
select.ui-form {
    position: relative;
    display: inline-block;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d5d9df;
    border-radius: 0;
    box-sizing: border-box;
    outline: none;
    line-height: 1.42857143;
    font-size: 1em;
    vertical-align: middle;
    text-decoration: none;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
    background: #fff;
}
.ui-select-outer {
    display: inline-block;
    z-index: 9;
}
.ui-select {
    padding: 7px 0.6em;
    text-align: left !important;
    background: #fff;
    box-sizing: content-box;
}
.ui-select.open {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
}
.ui-select.open span {
    color: #828d9e;
}
.ui-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px;
}
.ui-select.open:after {
    border-color: #828d9e;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
}
.ui-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0);
}
.ui-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none;
}
.ui-select.disabled:after {
    border-color: #cccccc;
}
.ui-select.wide {
    width: 100%;
}
.ui-select.wide .list {
    left: 0 !important;
    right: 0 !important;
}
.ui-select.right {
    float: right;
}
.ui-select.right .list {
    left: auto;
    right: 0;
}
.ui-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px;
}
.ui-select.small:after {
    height: 4px;
    width: 4px;
}
.ui-select.small .option {
    line-height: 34px;
    min-height: 34px;
}
.ui-select .list {
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: calc(100% +  2px );
    width: calc(100% +  2px );
    background-color: #fff;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border: 1px solid #828d9e;
    border-top: 0;
    box-shadow: 0 2px 3px 0 rgba(34,36,38,.15);
    box-sizing: border-box;
    opacity: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    pointer-events: none;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: translateY(-21px);
    -ms-transform: translateY(-21px);
    transform: translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9;
    text-align: left !important;
}
.ui-select .list:hover .option:not(:hover) {
    background-color: transparent !important;
}
.ui-select .option {
    cursor: pointer;
    font-weight: 400;
    list-style: none;
    outline: none;
    padding: 5px 0.6em;
    border-top: 1px solid #ebf0f5;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
.ui-select .option:hover, .ui-select .option.focus, .ui-select .option.selected.focus {
    background-color: #ebf0f5;
}
.ui-select li:before {
    display: none !important;
}
.ui-select li:first-child.option {
    border-top: 1px dashed #828d9e;
}
.ui-select .option.selected {
    font-weight: 600;
}
.ui-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default;
}
.no-csspointerevents .ui-select .list {
    display: none;
}

.no-csspointerevents .ui-select.open .list {
    display: block;
}


/** ----------------------------------------------------------------------------
 * 6.0 - Table
 * -----------------------------------------------------------------------------
 */

.tb-basic table {
    border: 0;
    width: 100%;
    border-collapse: collapse;
}
.tb-basic + .tb-basic {
    margin-top: 20px;
}
.tb-basic th, .tb-basic td {
    padding: 10px 10px 8px;
    border: 1px solid #d5d9df;
    line-height: 1.385;
    font-size: 14px;
}
.tb-basic th {
    background-color: #e8ebee;
    text-align: center;
    color: #364864;
}
.tb-top-border table {
    border-top: 2px solid #364864;
}
.tb-top-border tr:first-child th, .tb-top-border tr:first-child td {
    border-top: 0;
}
.tb-thead-color thead th {
    border: 0;
    border-left: 1px solid #59677d;
    background: #364864;
    color: #fff;
}
.tb-thead-color thead th:first-child {
    border: 0;
}
.tb-thead-color tbody tr:first-child {
    border-top: 0;
}
.tb-side-no-border th:first-child, .tb-side-no-border td:first-child {
    border-left: 0;
}
.tb-side-no-border th:last-child, .tb-side-no-border td:last-child {
    border-right: 0;
}
.tb-no-border th, .tb-no-border td {
    border: 0;
    border-bottom: 1px solid #d5d9df;
}
tbody.align-center td {
    text-align: center;
}
td.no-data {
    padding: 30px 0;
    text-align: center;
}
th .fa-asterisk {
    color: #f0606c;
    font-size: 9px;
    vertical-align: top;
}
td span.tip {
    display: inline-block;
    margin-left: 6px;
    color: #6f747c;
}
td p.tip {
    margin: 6px 0 0;
    color: #6f747c;
}
p.tb-text {
    margin: 0;
    font-size: 0.933333em;
}
p.tb-text + .tb-basic {
    margin-top: 0;
}

/** ----------------------------------------------------------------------------
 * 7.0 - Tab
 * -----------------------------------------------------------------------------
 */


.line-tab {
    height: 42px;
    margin-bottom: 40px;
    overflow: hidden;
}
.line-tab > ul:after {
    display: block;
    content: '';
    padding-top: 40px;
    border-bottom: 2px solid #f0606c;
}
.line-tab > ul > li {
    float: left;
}
.line-tab > ul > li > a {
    position: relative;
    display: block;
    height: 40px;
    box-sizing: border-box;
    margin: 0 0 0 -1px;
    padding: 0 16px;
    border: 1px solid #d5d9df;
    border-bottom: 0;
    line-height: 40px;
    text-decoration: none;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.line-tab > ul > li:first-child > a {
    margin: 0;
}
.line-tab > ul > li > a:hover, .line-tab > ul > li > a:active, .line-tab > ul > li > a:focus {
    text-decoration: none;
    border-color: #f0606c;
    z-index: 1;
}
.line-tab .current a {
    z-index: 2;
    height: 44px;
    padding: 0 12px 0 16px;
    border: 2px solid #f0606c;
    background: #fff;
    color: #f0606c;
}
.line-tab .current a:after {
    margin-left: 12px;
    font-family: FontAwesome;
    content: '\f0d7';
    font-size: 15px;
    vertical-align: -1px;
}

.mp-tab {
    margin: 10px 0;
}
.tab-head {

}
.tab-menu {
    margin: 0;
    padding: 0;
}
.tab-menu > li {
    float: left;
    list-style: none;
}
.tab-menu > li > * {
    position: relative;
    display: block;
    margin-left: -1px;
    padding: 4px 16px;
    border: 1px solid #d5d9df;
    text-decoration: none;
    cursor: pointer;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.tab-menu > li:first-child > * {
    margin: 0 !important;
}
.tab-menu > li.active > * {
    z-index: 2;
    border-color: #f0606c;
    color: #fff;
    background-color: #f0606c;
}
.tab-menu > li > *:hover, .tab-menu > li > *:active, .tab-menu > li > *:focus {
    z-index: 1;
    border-color: #f0606c;
    text-decoration: none;
}
.tab-body {
    margin-top: -1px;
    padding: 10px 2%;
    border: 1px solid #d5d9df;
}
.tab-cont {
    display: none;
}
.tab-cont.active {
    display: block;
}
.tab-cont > h2, .tab-cont > h3 {
    margin: 0;
}
/* Vertical */
.tab-vertical {

    border: 1px solid #d5d9df;

}
.tab-vertical .tab-head {
    float: left;
    margin: -1px 0 -1px -1px;
}
.tab-vertical .tab-menu > li {
    float: none;
}

.tab-vertical .tab-menu > li > * {
    margin: -1px 0 0;
}
.tab-vertical .tab-body {
    float: left;
    border: none;
}
.mp-tab.color-blue .tab-menu > li > *:hover, .mp-tab.color-blue .tab-menu > li > *:active, .mp-tab.color-blue .tab-menu > li > *:focus {
    border-color: #0a6f8c;
    color: #0a6f8c;
}
.mp-tab.color-blue .tab-menu > li.active > * {
    border-color: #0a6f8c;
    background-color: #0a6f8c;
    color: #fff;
}
.mp-tab.color-blue .tab-body {
    margin-top: 40px;
    padding: 0;
    border: none;
}

.line-tab.color-blue > ul:after {
    border-color: #0a6f8c;
}
.line-tab.color-blue > ul > li > a:hover, .line-tab.color-blue > ul > li > a:active, .line-tab.color-blue > ul > li > a:focus, .line-tab.color-blue .current a {
    border-color: #0a6f8c;
    color: #0a6f8c;
}


/** ----------------------------------------------------------------------------
 * 8.0 - Toggle
 * -----------------------------------------------------------------------------
 */

.mp-toggle {
    overflow: hidden;
}
.mp-toggle .toggle-target {
    position: relative;
    display: block;
    padding: 4px 30px 4px 10px;
    border: 1px solid #d5d9df;
    box-sizing: border-box;
    background: #e8ebee;
    text-decoration: none;
}
.mp-toggle .btn.toggle-target {
    padding-right: 2em;
}
.mp-toggle .toggle-target:hover, .mp-toggle .toggle-target:active, .mp-toggle .toggle-target:focus {
    color: inherit;
}
.mp-toggle .toggle-icon {
    position: absolute;
    top: 50%;
    right: 0;
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    color: #9ea7b5;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    line-height: 40px;
}
.mp-toggle .toggle-icon:before {
    font-family: FontAwesome;
}
.mp-toggle .btn.toggle-target {
    padding-right: 2em;
}
.mp-toggle .btn .toggle-icon {
    width: 24px;
    height: 20px;
    margin-top: -10px;
    line-height: 20px;
}
.mp-toggle .toggle-content {
    margin-top: -1px;
    padding: 10px;
    border: 1px solid #d5d9df;
    box-sizing: border-box;
    opacity: 0;
}
.mp-toggle .toggle-text {

}
.mp-toggle.expanded {

}
.mp-toggle.expanded .toggle-content {
    opacity: 1;
}
.mp-toggle .icon-down-up:before {
    content: '\f078';
}
.mp-toggle.expanded .icon-down-up:before {
    content: '\f077';
}
.mp-toggle .icon-caret:before {
    content: '\f0d7';
}
.mp-toggle.expanded .icon-caret:before {
    content: '\f0d8';
}
.mp-toggle .icon-chevron:before {
    content: '\f078';
}
.mp-toggle.expanded .icon-chevron:before {
    content: '\f077';
}
.mp-toggle .icon-angle:before {
    content: '\f107';
}
.mp-toggle.expanded .icon-angle:before {
    content: '\f106';
}
.mp-toggle .icon-chevron-circle:before {
    content: '\f13a';
}
.mp-toggle.expanded .icon-chevron-circle:before {
    content: '\f139';
}
.mp-toggle .icon-plus-minus:before {
    content: '\f067';
}
.mp-toggle.expanded .icon-plus-minus:before {
    content: '\f068';
}



/** ----------------------------------------------------------------------------
 * 9.0 - Box
 * -----------------------------------------------------------------------------
 */

.box-s {
    margin: 10px 0;
    padding: 10px 1em;
}
.box-m {
    margin: 10px 0;
    padding: 16px 1.5em;
}
.box-l {
    margin: 10px 0;
    padding: 24px 2em;
}
.bg-primary {
    background-color: #364864;
    color: #fff;
}
.bg-accent {
    background-color: #f0606c;
    color: #fff;
}
.bg-success {
    background-color: #dff0d8;
}
.bg-info {
    background-color: #dae6f0;
}
.bg-warning {
    background-color: #fcf8e3;
}
.bg-danger {
    background-color: #f2dede;
}
.bg-gray {
    background-color: #e6e9ec;
}
.bg-salmon {
    background-color: #f5f2f0;
}
.bd-primary {
    border-color: #364864;
}
.bd-accent {
    border-color: #f0606c;
}
.bd-success {
    border-color: #dff0d8;
}
.bd-info {
    border-color: #dae6f0;
}
.bd-warning {
    border-color: #fcf8e3;
}
.bd-danger {
    border-color: #f2dede;
}
.bd-gray {
    border-color: #e6e9ec;
}
.bd-salmon {
    border-color: #f5f2f0;
}
.border-1 {
    border-width: 1px;
    border-style: solid;
}
.border-2 {
    border-width: 2px;
    border-style: solid;
}
.border-3 {
    border-width: 3px;
    border-style: solid;
}
.border-4 {
    border-width: 4px;
    border-style: solid;
}
.border-5 {
    border-width: 5px;
    border-style: solid;
}
.round-s {
    border-radius: 2px;
}
.round-m {
    border-radius: 5px;
}
.round-l {
    border-radius: 10px;
}

.box-m h3 {
    margin-bottom: 6px;
    font-size: 1em;
}

/** ----------------------------------------------------------------------------
 * 10.0 - Icons
 * -----------------------------------------------------------------------------
 */



/** ----------------------------------------------------------------------------
 * 11.0 - Module
 * -----------------------------------------------------------------------------
 */

/* Paging */
.paging {
    margin-bottom: 20px;
    padding-top: 12px;
    border-top: 1px solid #e8ebee;
}
.paging * {
    display: inline-block;
    margin: 0 3px;
    padding: 7px 0.8em;
    border: 1px solid #d5d9df;
    border-radius: 2px;
}
.paging .dots {
    color: #929496;
}
.paging .next {
    padding: 7px 0.6em;
}
.paging .current {
    border-color: #175bc4;
    color: #175bc4;
}
.paging .next::after {
    display: inline-block;
    margin-left: 6px;
    color: #c5c9cf;
    font-family: 'FontAwesome';
    font-size: 12px;
    content: '\f054';
    text-align: right;
}
.paging .prev::before {
    display: inline-block;
    margin-right: 6px;
    color: #c5c9cf;
    font-family: 'FontAwesome';
    font-size: 12px;
    content: '\f053';
    text-align: left;
}


/** ----------------------------------------------------------------------------
 * 20.0 - 기존 mp-toolkit 스타일
 * -----------------------------------------------------------------------------
 */

/**
 * 01 - commons
 * 02 - button
 * 03 - form
 */

/* 01 - commons */
.left {
    float: left;
}

.cell {
    display: inline-block;
}

/* 02 - button */
.btn-general, input[type="submit"].btn-general, input[type="button"].btn-general {
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1px;
    padding: 5px 10px;
    border-radius: 2px;
    border: 1px solid #d4d5d6;
    background: #e4e5e6;
    font-size: 0.875em;
    color: #7e8489;
    line-height: 1.5;
    cursor: pointer;
}
.btn-general:hover, input[type="submit"].btn-general:hover, input[type="button"].btn-general:hover {
    background: #ecedee;
}

.btn-blue, input[type="submit"].btn-blue, input[type="button"].btn-blue {
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.875em;
    border-color: #005aab;
    background: #005aab;
    color: #fff;
    line-height: 1.5;
    cursor: pointer;
}
.btn-blue:hover, input[type="submit"].btn-blue:hover, input[type="button"].btn-blue:hover {
    background: #006ac9;
}

.btn-gray, input[type="submit"].btn-gray, input[type="button"].btn-gray {
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.875em;
    border-color: #595959;
    background: #595959;
    color: #fff;
    line-height: 1.5;
    cursor: pointer;
}
.btn-gray:hover, input[type="submit"].btn-gray:hover, input[type="button"].btn-gray:hover {
    background: #717171;
}

.btn-red, input[type="submit"].btn-red, input[type="button"].btn-red {
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.875em;
    border-color: #cd3d51;
    background: #cd3d51;
    color: #fff;
    line-height: 1.5;
    cursor: pointer;
}
.btn-red:hover, input[type="submit"].btn-red:hover, input[type="button"].btn-red:hover {
    background: #df4258;
}

.btn-orange, input[type="submit"].btn-orange, input[type="button"].btn-orange {
    display: inline-block;
    margin-right: 2px;
    margin-bottom: 1px;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 0.875em;
    border-color: #e39300;
    background: #e39300;
    color: #fff;
    line-height: 1.5;
    cursor: pointer;
}
.btn-orange:hover, input[type="submit"].btn-orange:hover, input[type="button"].btn-orange:hover {
    background: #ffa500;
}

input[type="submit"].btn-general,
input[type="submit"].btn-blue,
input[type="submit"].btn-gray,
input[type="submit"].btn-red,
input[type="submit"].btn-orange,
input[type="button"].btn-general,
input[type="button"].btn-blue,
input[type="button"].btn-gray,
input[type="button"].btn-red,
input[type="button"].btn-orange {
    padding: 8px 10px;
}

.btn-roll {
    display: inline-block;
    margin-left: 2px;
    border-radius: 3px;
    border: 1px solid #005aab;
    background: #fff;
    color: #005aab;
    font-size: 0.875em;
}
.btn-roll i {
    display: inline-block;
    padding: 10px 12px;
    background: #005aab;
    color: #fff;
}
.btn-roll em {
    padding: 10px 12px 10px 8px;
    font-style: normal;
}

.btn-general i {
    padding-right: 2px;
    color: #7e8489;
}
.btn-blue i,
.btn-gray i,
.btn-orange i,
.btn-red i {
    padding-right: 2px;
    color: #ffffff;
}
.btn-blue a,
.btn-gray a,
.btn-orange a,
.btn-red a {
    color: #ffffff;
}
.btn-general:hover, .btn-general a:hover,
.btn-blue:hover, .btn-blue a:hover,
.btn-gray:hover, .btn-gray a:hover,
.btn-red:hover, .btn-red a:hover,
.btn-orange:hover, .btn-orange a:hover,
.btn-roll:hover {
    text-decoration: none;
}

.btn-xl {
    padding: 8px 14px;
    font-size: 1.2em;
    line-height: 2;
    border-radius: 3px;
}
.btn-lg {
    padding: 6px 12px;
    font-size: 1em;
    line-height: 1.7;
    border-radius: 3px;
}
.btn-sm {
    padding: 4px 8px;
    font-size: 0.775em;
    line-height: 1.4;
    border-radius: 1px;
}
.btn-xs {
    padding: 3px 7px;
    font-size: 0.675em;
    line-height: 1.2;
    border-radius: 0;
}

.btn-block {
    display: block;
    width: 100%;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
    width: 100%;
}

/* 03 - form */
input[type=checkbox]:checked.mp-checkbox + label.mp-checkbox-label {
    background-position: 0 -21px;
    white-space: nowrap;
    width: auto;
}
input[type=checkbox].mp-checkbox {
    position: absolute;
    z-index: -1000;
    left: -1000px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
}
input[type=checkbox].mp-checkbox + label.mp-checkbox-label {
    padding-left: 23px;
    height: 21px;
    display: inline-block;
    line-height: 21px;
    background-repeat: no-repeat;
    background-position: 0 -1px;
    vertical-align: middle;
    cursor: pointer;
    white-space: nowrap;
    width: auto;
    margin-right: 8px;
}
label.mp-checkbox-label {
    background-image: url(img/checkbox-gray.png);
    background-repeat: no-repeat;
    background-size: 20px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
label.mp-checkbox-red {
    background-image: url(img/checkbox-red.png);
}
label.mp-checkbox-blue {
    background-image: url(img/checkbox-blue.png);
}

.mp-select-outer {
    overflow: hidden;
    height: 36px;
    display: inline-block;
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    margin-right: 2px;
    border-radius: 3px;
    background: #fff url("img/select-down.png") no-repeat 100% 50%;
    background-size: 40px;
    vertical-align: middle;
}
.mp-select-outer:hover, .mp-select-outer:focus, .mp-select-outer:active {
    background-image: url("img/select-down-hover.png");
}
.mp-select {
    background: transparent;
    border: 0;
    height: 36px;
    padding-left:10px;
    font-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
}
.select-width-md {
    width: 220px;
}
.select-width-md .mp-select {
    width: 250px;
    max-width: 250px;
}
.select-width-sm {
    width: 100px;
}
.select-width-sm .mp-select {
    width: 130px;
    max-width: 130px;
}

.mp-textbox, input[type="text"].mp-textbox {
    font-size: 14px;
    height: 36px;
    width: auto;
    display: inline-block;
    line-height: 28px;
    background-color: #ffffff;
    border: 1px solid #dfdfdf;
    box-sizing: border-box;
    padding: 3px 10px;
    margin-right: 2px;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    vertical-align: middle;
}






/** ----------------------------------------------------------------------------
 * .my-library : 마이 라이브러리
 * -----------------------------------------------------------------------------
 */

.my-library {

}
.my-library {

}
.my-library .btn-wrap {
    padding: 15px 0;
}

/* 사용자 정보 */
.my-info .box-m a {
    margin-left: 10px;
}

/* 사용자 정보 수정 */
.my-info-modify {

}
.my-info .mp-toggle .toggle-target, .my-info-modify .mp-toggle .toggle-target {
    display: inline-block;
    vertical-align: middle;
}
.my-info .mp-toggle .toggle-target {
    margin-left: 6px;
}

/* 비밀번호 변경 */
.my-password-modify {

}