html {
    font-size: 16px;
    font-weight: 300;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

body {
    font-family: "Noto Sans KR", 'Malgun Gothic', "Apple SD Gothic Neo", 'AppleSDGothic', sans-serif;
    font-size: 1rem;
    color: #555555;
    overflow-x: hidden;
    background-color: #FFF;

}


/**
reset
 */

.fr-view img {
    height: auto !important;
}

a {
    color: #333;
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: #333;
    text-decoration: none;
}

textarea:focus, input:focus {
    outline: none;
}


.help-block-error {
    color: red;
}
.btn-link:hover {
    color: #0056b3;
    text-decoration: none;
}
/**
util
 */

.border-radius {
    border-radius: 15px;
}

.fs-p-5 {
    font-size: 1.5rem; /*24*/
}

.fs-p-4 {
    font-size: 1.5rem; /*24*/
}


.fs-p-3 {
    font-size: 1.375rem; /*22*/
}

.fs-p-2 {
    font-size: 1.125rem; /*20*/
}

.fs-p-1 {
    font-size: 1.125rem; /*18*/
}

.fs-0 {
    font-size: 1rem;
}

.fs-m-1 {
    font-size: 0.875rem; /*14*/
}

.fs-m-2 {
    font-size: 0.75rem;
}

.fs-m-3 {
    font-size: 0.625rem;
}

.fs-m-4 {
    font-size: 0.5rem;
}

/**
material design
 */

.form-control {
    border-radius: 0;
}

.form-group.form-md-line-input {
    position: relative;
    margin: 0 0 30px;
    padding-top: 20px;
}

.form-group.form-md-line-input .form-control {
    background: 0 0;
    border: 0;
    border-bottom: 1px solid #c2cad8;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    color: #555;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    font-size: 14px;
}

.form-group.form-md-line-input .form-control ~ .form-control-focus, .form-group.form-md-line-input .form-control ~ label {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;
}

.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .help-block, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .help-block {
    color: #36c6d3;
    opacity: 1;
}

.form-group.form-md-line-input .form-control ~ .form-control-focus:after, .form-group.form-md-line-input .form-control ~ label:after {
    content: '';
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 50%;
    height: 2px;
    width: 0;
    visibility: hidden;
    transition: .2s ease all;
}

.form-group.form-md-line-input .form-control ~ .form-control-focus, .form-group.form-md-line-input .form-control ~ label {

    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: none;

}

.form-group.form-md-line-input .form-control ~ label {
    top: 0;
    margin-bottom: 0;
    font-size: 16px;

}

.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label, .form-group.form-md-line-input .form-control ~ .help-block-error, .form-group.form-md-line-input .form-control ~ label, .form-horizontal .form-group.form-md-line-input > label {

    opacity: 1;
    filter: alpha(opacity=100);

}

.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus, .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label {

    color: #888;

}

.form-group.form-md-line-input .form-control ~ .form-control-focus::after, .form-group.form-md-line-input .form-control ~ label::after {
    content: '';
    position: absolute;
    z-index: 5;
    bottom: 0;
    left: 50%;
    height: 2px;
    width: 0;
    visibility: hidden;
    transition: .2s ease all;
}

.form-group.form-md-line-input .form-control.edited:not([readonly]) ~ .form-control-focus::after, .form-group.form-md-line-input .form-control.edited:not([readonly]) ~ label::after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ .form-control-focus::after, .form-group.form-md-line-input .form-control:focus:not([readonly]) ~ label::after {

    visibility: visible;
    left: 0;
    width: 100%;
    background: #36c6d3;

}



/**
radio
 */

.form-group.form-md-radios {
    margin-bottom: 22px;

}


.md-radio-inline .md-radio {
    display: inline-block;
    margin-right: 20px;
}

.md-radio input[type="radio"] {
    visibility: hidden;
    position: absolute;
}

.md-radio {
    position: relative;
}

.md-radio label {
    cursor: pointer;
    padding-left: 30px;
}

.md-radio label > span {
    display: block;
    position: absolute;
    left: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s;
}

.md-radio label > span.inc {
    background: #fff;
    left: -20px;
    top: -20px;
    height: 60px;
    width: 60px;
    opacity: 0;
    border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -webkit-animation: growCircleRadio .3s ease;
    -moz-animation: growCircleRadio .3s ease;
    animation: growCircleRadio .3s ease;
}

.md-radio label > .check {
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    background: #36c6d3;
    opacity: 0;
    z-index: 6;
    border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}

.md-radio label > .box {
    top: 0;
    border: 2px solid #666;
    height: 20px;
    width: 20px;
    border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    z-index: 5;
}

.md-radio input[type="radio"]:checked ~ label > .check {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}

.form-md-checkboxes,
.form-md-radios {
    padding-top: 5px
}

.icon-btn > .badge,
td > .mt-checkbox.mt-checkbox-single,
td > .mt-radio.mt-radio-single,
th > .mt-checkbox.mt-checkbox-single,
th > .mt-radio.mt-radio-single {
    right: -5px
}

.md-checkbox {
    position: relative
}

.md-checkbox.md-checkbox-inline {
    display: inline-block
}

.form-inline .md-checkbox.md-checkbox-inline {
    margin-right: 20px;
    top: 3px
}

.md-checkbox input[type=checkbox] {
    visibility: hidden;
    position: absolute
}

.md-checkbox label {
    cursor: pointer;
    padding-left: 30px
}

.md-checkbox label > span {
    display: block;
    position: absolute;
    left: 0;
    -webkit-transition-duration: .3s;
    -moz-transition-duration: .3s;
    transition-duration: .3s
}

.md-checkbox label > span.inc {
    background: #fff;
    left: -20px;
    top: -20px;
    height: 60px;
    width: 60px;
    opacity: 0;
    border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -webkit-animation: growCircle .3s ease;
    -moz-animation: growCircle .3s ease;
    animation: growCircle .3s ease
}

.md-checkbox label > .box {
    top: 0;
    border: 2px solid #666;
    height: 20px;
    width: 20px;
    z-index: 5;
    -webkit-transition-delay: .2s;
    -moz-transition-delay: .2s;
    transition-delay: .2s
}

.md-checkbox label > .check {
    top: -4px;
    left: 6px;
    width: 10px;
    height: 20px;
    border: 2px solid #36c6d3;
    border-top: none;
    border-left: none;
    opacity: 0;
    z-index: 5;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
    -webkit-transition-delay: .3s;
    -moz-transition-delay: .3s;
    transition-delay: .3s
}

.md-checkbox input[type=checkbox]:checked ~ label > .box {
    opacity: 0;
    -webkit-transform: scale(0) rotate(-180deg);
    -moz-transform: scale(0) rotate(-180deg);
    transform: scale(0) rotate(-180deg)
}

.md-checkbox input[type=checkbox]:checked ~ label > .check {
    opacity: 1;
    -webkit-transform: scale(1) rotate(45deg);
    -moz-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg)
}

.md-checkbox input[type=checkbox]:disabled:checked ~ label > .check,
.md-checkbox input[type=checkbox]:disabled ~ label,
.md-checkbox input[type=checkbox]:disabled ~ label > .box,
.md-checkbox input[type=checkbox][disabled]:checked ~ label > .check,
.md-checkbox input[type=checkbox][disabled] ~ label,
.md-checkbox input[type=checkbox][disabled] ~ label > .box {
    cursor: not-allowed;
    opacity: .7;
    filter: alpha(opacity=70)
}

.has-error .md-checkbox label,
.has-error.md-checkbox label {
    color: #e73d4a
}

.has-error .md-checkbox label > .box,
.has-error .md-checkbox label > .check,
.has-error.md-checkbox label > .box,
.has-error.md-checkbox label > .check {
    border-color: #e73d4a
}

.has-success .md-checkbox label,
.has-success.md-checkbox label {
    color: #27a4b0
}

.has-success .md-checkbox label > .box,
.has-success .md-checkbox label > .check,
.has-success.md-checkbox label > .box,
.has-success.md-checkbox label > .check {
    border-color: #27a4b0
}

.has-warning .md-checkbox label,
.has-warning.md-checkbox label {
    color: #c29d0b
}

.has-warning .md-checkbox label > .box,
.has-warning .md-checkbox label > .check,
.has-warning.md-checkbox label > .box,
.has-warning.md-checkbox label > .check {
    border-color: #c29d0b
}

.has-info .md-checkbox label,
.has-info.md-checkbox label {
    color: #327ad5
}

.has-info .md-checkbox label > .box,
.has-info .md-checkbox label > .check,
.has-info.md-checkbox label > .box,
.has-info.md-checkbox label > .check {
    border-color: #327ad5
}

.form-md-checkboxes > label {
    font-size: 14px;
    color: #888;
    opacity: 1;
    filter: alpha(opacity=100)
}

.form-md-checkboxes.has-error label {
    color: #fbe1e3
}

.form-md-checkboxes.has-info label {
    color: #e0ebf9
}

.form-md-checkboxes.has-success label {
    color: #abe7ed
}

.form-md-checkboxes.has-warning label {
    color: #f9e491
}

.md-checkbox-list {
    margin: 5px 0
}

.form-horizontal .md-checkbox-list {
    margin-top: 5px
}

.md-checkbox-list .md-checkbox {
    display: block;
    margin-bottom: 10px
}

.md-checkbox-list .md-checkbox:last-child {
    margin-bottom: 0
}

.md-checkbox-inline {
    margin: 5px 0
}

.form-horizontal .md-checkbox-inline {
    margin-top: 7px
}

.md-checkbox-inline .md-checkbox {
    display: inline-block;
    margin-right: 20px
}

.md-checkbox-inline .md-checkbox:last-child {
    margin-right: 0
}

/**
icon
 */

.input-icon > i {
    color: #ccc;
    display: block;
    position: absolute;
    margin: 11px 2px 4px 10px;
    z-index: 3;
    width: 16px;
    font-size: 16px;
    text-align: center;
    left: 0;
}

.modal .input-icon > i {
    z-index: 10055;
}

.form-group.form-md-line-input > .input-icon > i {
    left: 0;
    bottom: 0;
    margin: 9px 2px 10px 10px;
    color: #888;
}

.form-group.form-md-line-input > .input-icon .form-control {
    padding-left: 34px;
}

label {
    font-weight: 400;
    color: #333;
}

.form-material .form-group label {
    font-size: 16px;
}

.help-block {

    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 14px;

}

.form-group.form-md-line-input .help-block {

    position: absolute;
    margin: 2px 0 0;
    font-size: 14px;

}
.only-desktop {
    display: none;
}


@media (min-width: 992px) {
    .border-radius {
        border-radius: 30px;
    }

    label {
        font-weight: 400;
        color: #333;
    }
    .only-mobile {
        display: none !important;
    }

}