@charset "utf-8";

.submit {
    display: none;
}

.error-message {
}

.error-message .error {
    color: red;
    padding: 5px 5px 5px 5px;
    display: block;
}


body {
    min-width: 800px;
    margin: 0;
    padding: 0;
}

.container {
    /*display: flex;*/
}

.container-column {
    /*flex-direction: column;*/
}

.wd-100p {
    width: 100% !important;
}

.wd-95p {
    width: 95% !important;
}

.wd-90p {
    width: 90% !important;
}

.wd-85p {
    width: 85% !important;
}

.wd-80p {
    width: 80% !important;
}

.wd-75p {
    width: 75% !important;
}

.wd-70p {
    width: 70% !important;
}

.wd-65p {
    width: 65% !important;
}

.wd-60p {
    width: 60% !important;
}

.wd-55p {
    width: 55% !important;
}

.wd-50p {
    width: 50% !important;
}

.wd-45p {
    width: 45% !important;
}

.wd-40p {
    width: 40% !important;
}

.wd-35p {
    width: 35% !important;
}

.wd-30p {
    width: 30% !important;
}

.wd-25p {
    width: 25% !important;
}

.wd-20p {
    width: 20% !important;
}

.wd-15p {
    width: 15% !important;
}

.wd-10p {
    width: 10% !important;
}

.wd-5p {
    width: 5% !important;
}


.wd-10 {
    width: 10px !important;
}

.wd-15 {
    width: 15px !important;
}

.wd-20 {
    width: 20px !important;
}

.wd-30 {
    width: 30px !important;
}

.wd-40 {
    width: 40px !important;
}

.wd-50 {
    width: 50px !important;
}

.wd-60 {
    width: 60px !important;
}

.wd-70 {
    width: 70px !important;
}

.wd-80 {
    width: 80px !important;
}

.wd-90 {
    width: 90px !important;
}

.wd-100 {
    width: 100px !important;
}

.wd-110 {
    width: 110px !important;
}

.wd-120 {
    width: 120px !important;
}

.wd-130 {
    width: 130px !important;
}

.wd-140 {
    width: 140px !important;
}

.wd-150 {
    width: 150px !important;
}

.wd-160 {
    width: 160px !important;
}

.wd-170 {
    width: 170px !important;
}

.wd-180 {
    width: 180px !important;
}

.wd-190 {
    width: 190px !important;
}

.wd-200 {
    width: 200px !important;
}

.wd-250 {
    width: 250px !important;
}

.wd-300 {
    width: 300px !important;
}

.wd-350 {
    width: 350px !important;
}

.wd-400 {
    width: 400px !important;
}

.wd-450 {
    width: 450px !important;
}

.wd-500 {
    width: 500px !important;
}


.ht-10 {
    height: 10px !important;
}

.ht-15 {
    height: 15px !important;
}

.ht-20 {
    height: 20px !important;
}

.ht-30 {
    height: 30px !important;
}

.ht-40 {
    height: 40px !important;
}

.ht-50 {
    height: 50px !important;
}

.ht-60 {
    height: 60px !important;
}

.ht-70 {
    height: 70px !important;
}

.ht-80 {
    height: 80px !important;
}

.ht-90 {
    height: 90px !important;
}

.awaiter-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
    border: 1px solid #d9e2ec;
    border-radius: 18px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.awaiter-summary .summary-card {
    position: relative;
    overflow: hidden;
    border: 0;
    border-right: 1px solid #e5edf5;
    border-radius: 0;
    background: transparent;
    padding: 18px 18px 20px;
    min-height: 118px;
    box-sizing: border-box;
}

.awaiter-summary .summary-card::before {
    content: "";
    position: absolute;
    top: 18px;
    left: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.awaiter-summary .summary-card::after {
    content: "";
    position: absolute;
    right: -18px;
    bottom: -22px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: rgba(148, 163, 184, 0.12);
}

.awaiter-summary .summary-card .label {
    margin: 0 0 0 18px;
    font-size: 13px;
    color: #475467;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.awaiter-summary .summary-card .value {
    position: relative;
    z-index: 1;
    margin: 18px 0 0;
    font-size: 34px;
    line-height: 1;
    color: #111827;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.awaiter-summary .summary-card .value em {
    font-style: normal;
    font-size: 14px;
    font-weight: 700;
    color: #475467;
    margin-left: 6px;
}

.awaiter-summary .summary-card.total {
    background: #ffffff;
}

.awaiter-summary .summary-card.using {
    background: #ffffff;
}

.awaiter-summary .summary-card.idle {
    background: #ffffff;
}

.awaiter-summary .summary-card.duplic {
    border-right: 0;
    background: #ffffff;
}

.awaiter-summary .summary-card.total::before {
    background: #2563eb;
}

.awaiter-summary .summary-card.using::before {
    background: #0ea5e9;
}

.awaiter-summary .summary-card.idle::before {
    background: #64748b;
}

.awaiter-summary .summary-card.duplic::before {
    background: #f59e0b;
}

.awaiter-summary .summary-card.total::after {
    background: rgba(37, 99, 235, 0.12);
}

.awaiter-summary .summary-card.using::after {
    background: rgba(14, 165, 233, 0.12);
}

.awaiter-summary .summary-card.idle::after {
    background: rgba(100, 116, 139, 0.12);
}

.awaiter-summary .summary-card.duplic::after {
    background: rgba(245, 158, 11, 0.14);
}

@media (max-width: 1100px) {
    .awaiter-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .awaiter-summary .summary-card:nth-child(2) {
        border-right: 0;
    }

    .awaiter-summary .summary-card:nth-child(-n+2) {
        border-bottom: 1px solid #e5edf5;
    }

    .awaiter-summary .summary-card.duplic {
        border-right: 0;
    }
}

@media (max-width: 720px) {
    .awaiter-summary {
        grid-template-columns: 1fr;
    }

    .awaiter-summary .summary-card {
        border-right: 0;
        border-bottom: 1px solid #e5edf5;
    }

    .awaiter-summary .summary-card:last-child {
        border-bottom: 0;
    }
}

.awaiter-status {
    display: inline-block;
    min-width: 46px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #FFA512;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    white-space: pre-line;
    line-height: 1.25;
    text-align: center;
    letter-spacing: 0.02em;
    box-sizing: border-box;
}

.awaiter-status[data-progress-step="1"] {
    background: #7ca9fb;
}

.awaiter-status[data-progress-step="5"] {
    background: #FFA512;
}

.awaiter-status[data-progress-step="10"] {
    background: #44B98E;
}

.awaiter-status[data-progress-step="11"] {
    background: #7b8794;
}

.ht-100 {
    height: 100px !important;
}

.ht-120 {
    height: 120px !important;
}

.ht-150 {
    height: 150px !important;
}

.ht-200 {
    height: 200px !important;
}

.ht-250 {
    height: 250px !important;
}

.ht-300 {
    height: 300px !important;
}

.ht-350 {
    height: 350px !important;
}

.ht-400 {
    height: 400px !important;
}

.ht-450 {
    height: 450px !important;
}

.ht-500 {
    height: 500px !important;
}

.ht-550 {
    height: 500px !important;
}

.ht-600 {
    height: 500px !important;
}

.ht-650 {
    height: 500px !important;
}

.ht-700 {
    height: 500px !important;
}


/*========================================================================
common spacer
========================================================================*/
.mg-auto {
    margin: auto !important;
}

.mg-none {
    margin: 0 !important;
}

.mgb-0 {
    margin-bottom: 0px !important;
}

.mgb-5 {
    margin-bottom: 5px !important;
}

.mgb-10 {
    margin-bottom: 10px !important;
}

.mgb-15 {
    margin-bottom: 15px !important;
}

.mgb-20 {
    margin-bottom: 20px !important;
}

.mgb-25 {
    margin-bottom: 25px !important;
}

.mgb-30 {
    margin-bottom: 30px !important;
}

.mgb-40 {
    margin-bottom: 40px !important;
}

.mgb-50 {
    margin-bottom: 50px !important;
}

.mgb-60 {
    margin-bottom: 60px !important;
}

.mgb-70 {
    margin-bottom: 70px !important;
}

.mgb-80 {
    margin-bottom: 80px !important;
}

.mgb-90 {
    margin-bottom: 90px !important;
}

.mgb-100 {
    margin-bottom: 100px !important;
}

.mgt-0 {
    margin-top: 0px !important;
}

.mgt-5 {
    margin-top: 5px !important;
}

.mgt-10 {
    margin-top: 10px !important;
}

.mgt-15 {
    margin-top: 15px !important;
}

.mgt-20 {
    margin-top: 20px !important;
}

.mgt-25 {
    margin-top: 25px !important;
}

.mgt-30 {
    margin-top: 30px !important;
}

.mgt-40 {
    margin-top: 40px !important;
}

.mgt-50 {
    margin-top: 50px !important;
}

.mgt-60 {
    margin-top: 60px !important;
}

.mgt-70 {
    margin-top: 70px !important;
}

.mgt-80 {
    margin-top: 80px !important;
}

.mgt-90 {
    margin-top: 90px !important;
}

.mgt-100 {
    margin-top: 100px !important;
}

.mgt-280 {
    margin-top: 280px !important;
}

.mgl-0 {
    margin-left: 0px !important;
}

.mgl-5 {
    margin-left: 5px !important;
}

.mgl-10 {
    margin-left: 10px !important;
}

.mgl-15 {
    margin-left: 15px !important;
}

.mgl-20 {
    margin-left: 20px !important;
}

.mgl-25 {
    margin-left: 25px !important;
}

.mgl-30 {
    margin-left: 30px !important;
}

.mgl-40 {
    margin-left: 40px !important;
}

.mgl-50 {
    margin-left: 50px !important;
}

.mgl-60 {
    margin-left: 60px !important;
}

.mgl-70 {
    margin-left: 70px !important;
}

.mgl-80 {
    margin-left: 80px !important;
}

.mgl-90 {
    margin-left: 90px !important;
}

.mgl-100 {
    margin-left: 100px !important;
}

.mgr-0 {
    margin-right: 0px !important;
}

.mgr-5 {
    margin-right: 5px !important;
}

.mgr-10 {
    margin-right: 10px !important;
}

.mgr-15 {
    margin-right: 15px !important;
}

.mgr-20 {
    margin-right: 20px !important;
}

.mgr-25 {
    margin-right: 25px !important;
}

.mgr-30 {
    margin-right: 30px !important;
}

.mgr-40 {
    margin-right: 40px !important;
}

.mgr-50 {
    margin-right: 50px !important;
}

.mgr-60 {
    margin-right: 60px !important;
}

.mgr-70 {
    margin-right: 70px !important;
}

.mgr-80 {
    margin-right: 80px !important;
}

.mgr-90 {
    margin-right: 90px !important;
}

.mgr-100 {
    margin-right: 100px !important;
}

.pd-none {
    padding: 0 !important;
}

.pdb-0 {
    padding-bottom: 0 !important;
}

.pdb-5 {
    padding-bottom: 5px !important;
}

.pdb-10 {
    padding-bottom: 10px !important;
}

.pdb-15 {
    padding-bottom: 15px !important;
}

.pdb-20 {
    padding-bottom: 20px !important;
}

.pdb-25 {
    padding-bottom: 25px !important;
}

.pdb-30 {
    padding-bottom: 30px !important;
}

.pdb-40 {
    padding-bottom: 40px !important;
}

.pdb-50 {
    padding-bottom: 50px !important;
}

.pdb-60 {
    padding-bottom: 60px !important;
}

.pdb-70 {
    padding-bottom: 70px !important;
}

.pdb-80 {
    padding-bottom: 80px !important;
}

.pdb-90 {
    padding-bottom: 90px !important;
}

.pdb-100 {
    padding-bottom: 100px !important;
}

.pdt-0 {
    padding-top: 0px !important;
}

.pdt-5 {
    padding-top: 5px !important;
}

.pdt-10 {
    padding-top: 10px !important;
}

.pdt-15 {
    padding-top: 15px !important;
}

.pdt-20 {
    padding-top: 20px !important;
}

.pdt-25 {
    padding-top: 25px !important;
}

.pdt-30 {
    padding-top: 30px !important;
}

.pdt-40 {
    padding-top: 40px !important;
}

.pdt-50 {
    padding-top: 50px !important;
}

.pdt-60 {
    padding-top: 60px !important;
}

.pdt-70 {
    padding-top: 70px !important;
}

.pdt-80 {
    padding-top: 80px !important;
}

.pdt-90 {
    padding-top: 90px !important;
}

.pdt-100 {
    padding-top: 100px !important;
}

.pdt-155 {
    padding-top: 155px !important;
}

.pdl-0 {
    padding-left: 0px !important;
}

.pdl-5 {
    padding-left: 5px !important;
}

.pdl-10 {
    padding-left: 10px !important;
}

.pdl-15 {
    padding-left: 15px !important;
}

.pdl-20 {
    padding-left: 20px !important;
}

.pdl-25 {
    padding-left: 25px !important;
}

.pdl-30 {
    padding-left: 30px !important;
}

.pdl-40 {
    padding-left: 40px !important;
}

.pdl-50 {
    padding-left: 50px !important;
}

.pdl-60 {
    padding-left: 60px !important;
}

.pdl-70 {
    padding-left: 70px !important;
}

.pdl-80 {
    padding-left: 80px !important;
}

.pdl-90 {
    padding-left: 90px !important;
}

.pdl-100 {
    padding-left: 100px !important;
}

.pdr-0 {
    padding-right: 0px !important;
}

.pdr-5 {
    padding-right: 5px !important;
}

.pdr-10 {
    padding-right: 10px !important;
}

.pdr-15 {
    padding-right: 15px !important;
}

.pdr-20 {
    padding-right: 20px !important;
}

.pdr-25 {
    padding-right: 25px !important;
}

.pdr-30 {
    padding-right: 30px !important;
}

.pdr-40 {
    padding-right: 40px !important;
}

.pdr-50 {
    padding-right: 50px !important;
}

.pdr-60 {
    padding-right: 60px !important;
}

.pdr-70 {
    padding-right: 70px !important;
}

.pdr-80 {
    padding-right: 80px !important;
}

.pdr-90 {
    padding-right: 90px !important;
}

.pdr-100 {
    padding-right: 100px !important;
}

.pd-5 {
    padding: 5px !important;
}

.pd-10 {
    padding: 10px !important;
}

.pd-15 {
    padding: 15px !important;
}

.pd-20 {
    padding: 20px !important;
}


/*========================================================================
common align
========================================================================*/
.ta-c {
    text-align: center !important;
}

.ta-l {
    text-align: left !important;
}

.ta-r {
    text-align: right !important;
}


/*========================================================================
common etc
========================================================================*/
.dp-n {
    display: none !important;
}

.dp-b {
    display: block !important;
}

.dp-ib {
    display: inline-block !important;
}

.fl-l {
    float: left !important;
}

.fl-r {
    float: right !important;
}

.clear {
    clear: both !important;
}

.brd-n {
    border: none !important;
}

.pos-abs {
    position: absolute !important;
}

.pos-rel {
    position: relative !important;
}


/*========================================================================
font-size
========================================================================*/
.fs-40 {
    font-size: 40px !important;
}

.fs-39 {
    font-size: 39px !important;
}

.fs-38 {
    font-size: 38px !important;
}

.fs-37 {
    font-size: 37px !important;
}

.fs-36 {
    font-size: 36px !important;
}

.fs-35 {
    font-size: 35px !important;
}

.fs-34 {
    font-size: 34px !important;
}

.fs-33 {
    font-size: 33px !important;
}

.fs-32 {
    font-size: 32px !important;
}

.fs-31 {
    font-size: 31px !important;
}

.fs-30 {
    font-size: 30px !important;
}

.fs-29 {
    font-size: 29px !important;
}

.fs-28 {
    font-size: 28px !important;
}

.fs-27 {
    font-size: 27px !important;
}

.fs-26 {
    font-size: 26px !important;
}

.fs-25 {
    font-size: 25px !important;
}

.fs-24 {
    font-size: 24px !important;
}

.fs-23 {
    font-size: 23px !important;
}

.fs-22 {
    font-size: 22px !important;
}

.fs-21 {
    font-size: 21px !important;
}

.fs-20 {
    font-size: 20px !important;
}

.fs-19 {
    font-size: 19px !important;
}

.fs-18 {
    font-size: 18px !important;
}

.fs-17 {
    font-size: 17px !important;
}

.fs-16 {
    font-size: 16px !important;
}

.fs-15 {
    font-size: 15px !important;
}

.fs-14 {
    font-size: 14px !important;
}

.fs-13 {
    font-size: 13px !important;
}

.fs-12 {
    font-size: 12px !important;
}

.fs-11 {
    font-size: 11px !important;
}

.fs-10 {
    font-size: 10px !important;
}

.fs-9 {
    font-size: 9px !important;
}

.fs-8 {
    font-size: 8px !important;
}

.fs-7 {
    font-size: 7px !important;
}

/*========================================================================
font-weight
========================================================================*/
.fw-200 {
    font-weight: 200 !important;
}

.fw-300 {
    font-weight: 300 !important;
}

.fw-400 {
    font-weight: 400 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

/*========================================================================
font-color
========================================================================*/
.fc-red {
    color: red !important;
}

.fc-orange {
    color: orange !important;
}

.fc-blue {
    color: blue !important;
}

.fc-skyblue {
    color: #4091FA !important;
}

.fc-green {
    color: #00AF26 !important;
}

.fc-black {
    color: black !important;
}

.fc-white {
    color: white !important;
}

.fc-dark-gray {
    color: #465057 !important;
}

.fc-light-gray {
    color: #c7c7c7 !important;
}

/*========================================================================
label radio
========================================================================*/
label.select {

}

label.select input[type=radio] {
    display: none;
}

label.select span {
    display: inline-block;
    cursor: pointer;
    width: 90px;
    /*border: 1px solid #333;*/
    border-radius: 5rem;
    line-height: 24px;
    text-align: center;
    font-weight: bold;
}

label.select span {
    background-color: #fff;
    /*color: #465057;*/
}

label.select input[type=radio]:checked ~ span {
    border: 1px solid #e6e6e6;
    background-color: #f3f3f6;
    /*color: #465057;*/
}

/*========================================================================
opacity
========================================================================*/
.op-light {
    opacity: 0.3;
}

.op-medium {
    opacity: 0.5;
}

.op-heavy {
    opacity: 0.9;
}

/*========================================================================
resize
========================================================================*/
.txt-cancel {
    text-decoration: line-through;
!important;
}

.txt-underline {
    text-decoration: underline;
!important;
}

/*========================================================================
resize
========================================================================*/
.resize-no {
    resize: none;
}

/* jstree */
.jstree {
    position: relative;
    padding-bottom: 90px;
}

.jstree .jstree-icon.page {
    background: url('/img/common/ic_page.png') center no-repeat;
    background-size: 15px auto;
}

.jstree .jstree-icon.folder {
    background: url('/img/common/ic_folder.png') center no-repeat;
    background-size: 15px auto;
}

.jstree a.jstree-anchor.jstree-disabled {
    color: red;
    text-decoration: line-through;
}

/*========================================================================
 TOAST POPUP
========================================================================*/
.toast-box {
    display: none;
    position: fixed;
    z-index: 30;
    bottom: 40px;
    right: 40px;
}

.toast-box.on {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
}

.toast-box .toast-alert {
    display: none;
    position: relative;
    background-color: #fff;
    border: 1px solid #0162af;
    border-radius: 8px;
    margin-top: 10px;
}

.toast-box .toast-alert .toast-header {
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    background-color: #0162af;
    align-items: flex-start;
}

.toast-box .toast-alert .toast-header .header-title {
    width: 100%;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 400;
}

.toast-box .toast-alert .toast-header .header-title h1 {
    font-size: 16px;
    font-weight: 600;
}

.toast-box .toast-alert .toast-header .close {
    cursor: pointer;
}

.toast-box .toast-alert .toast-body {
    padding: 10px;
    font-size: 14px;
}

.toast-box .toast-alert .toast-body p {
    padding: 2px 0;
}

.toast-box .toast-alert.warning {
    border: 1px solid #e66464;
}

.toast-box .toast-alert.warning .toast-header {
    background-color: #e66464;
}

/*========================================================================
 HOVER ANIMATION
========================================================================*/
.hv-shake:hover {
    animation: shake 2s infinite;
}

.hv-jelly:hover {
    animation: jelly 1s infinite;
}

.hv-zoomInOut:hover {
    animation: zoomInOut 1s infinite;
}


/*팝업 이미지*/
.popup-image {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.popup-image img {
    display: block;
    max-width: 80%;
    max-height: 80%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* 지점 슬라이드 */
details > summary {
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.5s;
}

details[open] > summary ~ * {
    animation: reveal 0.5s;
}

.det {
    margin: 5px 0 10px;
    padding: 5px 10px;
    line-height: 25px;
    border-radius: 5px;
    box-shadow: 1px 1px 2px gray;
}

details > summary > .tit {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    padding-right: 5px;
}

details > summary > .ch {
    float: right;
    padding-right: 10px;
}

details > summary > .tx {
    font-size: 13px;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}


/* 햄버거 메뉴 */

a {
    text-decoration: none;
    color: black;
}

/*html,body {width: 100%; overflow-x: hidden; overflow-y: auto;}*/
/*
* {margin: 0; padding: 0;}

input[id="hamburger"] {
    display: none;
}
input[id="hamburger"] + label {
    display: block;
    width: 50px;
    height: 35px;
    position: relative;
    cursor: pointer;
}
input[id="hamburger"] + label span {
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    border-radius: 30px;
    background: #ffe600;
    transition: all 0.35s;
}
input[id="hamburger"] + label span:nth-child(1) {
    top: 0;
}
input[id="hamburger"] + label span:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
}
input[id="hamburger"] + label span:nth-child(3) {
    bottom: 0;
}
input[id="hamburger"]:checked + label {
    z-index: 99;
}
input[id="hamburger"]:checked + label span {
    background: #6f14dc;
}
input[id="hamburger"]:checked + label span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
input[id="hamburger"]:checked + label span:nth-child(2) {
    opacity: 0;
}
input[id="hamburger"]:checked + label span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
}
div[class="sidebar"] {
    width: 100%;
    height: 100%;
    background: white;
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 98;
    transition: all 0.45s;
}

input[id="hamburger"]:checked + label + div {
    right: 0;
}

.nav_mobile {
    position: absolute;
    top:119px;
    width: 100%;
}

.sidebar {
    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sidebar::-webkit-scrollbar {
    display: none;
}

.li_mobile {
    color:#ffe600;
    position:relative;
    float:left;
    width:100%;
    list-style-type:none;
    font-size:20px;
    border-bottom:1px solid #ccc;
    font-family: 'Noto Sans KR';
    font-weight:bold;
    padding-top: 20px;
    padding-bottom: 20px;
    text-align: center;
}

.sidebar a {
    padding: 0;
    text-decoration: none;
    display: block;
}

.li_mobile a{
    display:block;
    font-weight:bold;
    line-height:40px;
    margin:0px;
    padding:0;
    text-align:center;
    text-decoration:none;
    transition: all 0.4s;
}

.li_mobile a:hover, .li_mobile:hover a {
    text-decoration: none;
    color: #eee;
    padding: 0;
    margin: 0;
    border: 0px;
}
 */

/* 설명 hover */
.desc-marker {
    border: 1px solid black;
    border-radius: 50%;
    padding: 2px;
    width: 5px;
    height: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    margin-left: 5px;
}

.desc-marker:after {
    content: '?';
}

.desc-box {
    padding: 15px 20px;
    background-color: #444444;
    border-radius: 5px;
    color: #ffffff;
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all ease 0.5s;
    max-width: 80%;
}

.desc-marker:hover + .desc-box {
    visibility: visible;
    opacity: 1;
    z-index: 999;
}


/* */
.page-personsecure {
    max-width: 80rem;
    margin: 0 auto;
    font-size: 1.5rem;
}

.page-personsecure ul.tab-menu {
}

.page-personsecure ul.tab-menu li {
    float: left;
    width: 50%;
    height: 5rem;
    line-height: 5rem;
    text-align: center;
    font-size: 1.7rem;
    margin-bottom: 2rem;
    background: #f7f7f7;
    border-bottom: 1px solid #0081ff;
}

.page-personsecure ul.tab-menu li a {
    display: block;
}

.page-personsecure ul.tab-menu li.on {
    background: #fff;
    border: 1px solid #0081ff;
    border-bottom: none;
    color: #0081ff;
}

.page-personsecure ul.tab-menu2 {
    margin-bottom: 7rem;
}

.page-personsecure ul.tab-menu2 li {
    float: left;
    width: calc((100% - 2.4rem) / 3);
    text-align: center;
    height: 4rem;
    line-height: 4rem;
    background: #eeeeee;
    cursor: pointer;
}

.page-personsecure ul.tab-menu2 li.on {
    color: #000;
    font-weight: 600;
}

.page-personsecure ul.tab-menu2 li:first-child {
    border-top-left-radius: 0.8rem;
    border-bottom-left-radius: 0.8rem;
}

.page-personsecure ul.tab-menu2 li:last-child {
    border-top-right-radius: 0.8rem;
    border-bottom-right-radius: 0.8rem;
}

.page-personsecure ul.tab-menu2 li a {
    display: block;
}

.page-personsecure ul.tab-menu2 li.on {
}

.page-personsecure .tab {
    /*display: none;*/
    clear: both;
}

.page-personsecure .tab.on {
    display: block;
}

.page-personsecure .tab strong {
    font-weight: bold;
    font-size: 1.6rem;
}

.page-personsecure .tab .title {
    font-size: 1.3rem;
    padding-top: 2rem;
}

.page-personsecure .tab .title h2 {
    text-align: center;
    font-size: 1.8rem;
    padding: 3rem 0 2rem;
}

.page-personsecure .tab .subTitle {
    margin: 2rem 0;
    text-align: center;
    font-size: 2rem;
    font-weight: bold;
}

.page-personsecure .tab .content {
    background: #f7f7f7;
    padding: 2rem;
    font-size: 1.3rem;
}

.page-personsecure .tab .content .part {
    margin-bottom: 2rem;
}

.page-personsecure .tab .content .part a {
    text-decoration: underline;
}

.page-personsecure .tab .content h3 {
    text-align: center;
    font-size: 1.5rem;
    padding: 2rem 0 2rem;
}

.page-personsecure .tab .content h4 {
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
}

.page-personsecure table {
    width: 100%;
    table-layout: fixed;
    border-top: 1px solid #e6e6e6;
    border-left: 1px solid #e6e6e6;
    margin-bottom: 1.3rem;
}

.page-personsecure table thead th {
    padding: 1rem 1rem;
    background: #eee;
    color: #333;
    font-size: 1.3rem;
    font-weight: 600;
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
}

.page-personsecure table tbody td {
    padding: 1rem 1rem;
    text-align: center;
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    font-weight: 400;
    color: #333;
    font-size: 1.3rem
}

.page-personsecure table tbody td a.txt-red {
    font-weight: 400
}

.page-personsecure table tbody td.txtleft > ul > li {
    margin: 1rem 0 0 0
}

.page-personsecure table tbody td.txtleft > ul > li:first-child {
    margin: 0
}

.page-personsecure table tbody td.txtleft > ul > li > ol {
    margin: 0 0 0 0.7rem
}

.page-personsecure table tbody td.txtleft > ul > li > ol > li {
    margin: 0 0 0 1rem;
    list-style: circle
}

.page-personsecure table tbody td .btn-gray.btn-sm {
    height: 3.3rem;
    font-size: 1.3rem
}

.page-personsecure .ol-list li {
    padding-bottom: 10px;
}

.page-personsecure .ol-list li:last-child {
    padding-bottom: 0px;
}


/* drag-drop */
.card-placeholder {
    border-radius: 10px;
    padding: 10px;
    margin: auto;
    height: 2rem;
    background-color: #cce0ef;
}

.view-card {
    background: url('/img/alarm/news.png') right center no-repeat;
}

/* drag-drop */

.com-list li {
    margin-bottom: 5px;
}

.com-list li:last-child {
    margin-bottom: 0;
}

.com-list.disc {
    list-style-type: disc !important;
}

.com-list li strong {
    font-weight: 700;
}

.com-list.type-2 {
    background: #f3f3f6;
    padding: 10px 20px;
    border-radius: 4px;
    display: none;
    width: 300px;
}

.com-list.type-2.on {
    display: block;
}

/*=================================================================================
Error
=================================================================================*/
#error-info{position:relative; width:90%; margin:80px auto; text-align:center; }
#error-info .notice{margin-bottom:20px;}
#error-info .notice .logo{margin-bottom:20px;}
#error-info .notice h3{font-size:16px;}
#error-info .notice .desc{font-size:12px; margin:20px 0;}

table.error-tbl{color:#616161; border-top:1px solid #bcbcbc; margin-bottom:10px; width:100%;}
table.error-tbl th{text-align:left; border-bottom:1px solid #e4e4e4; padding:10px 5px;  line-height:18px; font-size:12px; font-weight:normal; width:120px; background:#f4f4f4;}
table.error-tbl td{text-align:left; border-bottom:1px solid #e4e4e4; line-height:18px; padding:10px 5px;}

@media print {
    .print-check {
        display: none !important;
    }
}

.view-tbl input[type="radio"] { margin-right: 3px; }

 h4.u-tit02 {
     margin: 10px 0px 5px;
 }

.card-info {
    border: 1px solid #e6e6e6;
    background: #f3f3f6;
    padding: 15px 0 30px;
    text-align: center;
    border-radius: 10px;
}

.card-info .con {
    display: inline-block;
    vertical-align: top;
    width: 240px;
    margin: 0 34px;
    text-align: left;
}

.card-info .card {
    width: 240px;
    height: 130px;
    box-sizing: border-box;
    position: relative;
    background: #e6e6e6;
    border-radius: 10px;
}

.card-info .card.hyundai {
    background: #434343;
    padding: 10px 20px;
}

.card-info .card .btxt {
    font-size: 14px;
    color: #fff;
}

.card-info .card .num {
    font-size: 14px;
    color: #fff;
    height: 30px;
    margin-top: 10px;
}

.card-info .card .date {
    position: Absolute;
    left: 20px;
    bottom: 22px;
    font-size: 12px;
    color: #aaa;
}

.card-info .card .delete-btn {
    position: absolute;
    color: #fcd883;
    font-size: 12px;
    text-decoration: underline;
    right: 20px;
    top: 12px;
}

.card-info .card .add-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.card-info .card .add-btn span {
    font-size: 14px;
    color: #a0a0a0;
    padding-top: 73px;
    background: url('/img/common/ico-add.jpg') no-repeat center top;
    background-size: 57px auto;
    position: Absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}



/*========================================================================
blind-bg
========================================================================*/
#loading_bar{display:none; position:fixed; z-index:1000; }
#blind_bg{
    display:none; z-index:9999; position:fixed; top:0; left:0; width:100%; height:100%; background:#000;
    -khtml-opacity:.60; /*safari*/
    -ms-filter:alpha(opacity=60);/*IE8*/
    -moz-opacity:.60;/*FF*/
    filter:alpha(opacity=60); /*IE7*/
    opacity:.60;  /*all other browsers*/
}