@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;}
.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,
.desc-box:hover {
    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;
}

/* 체크박스 스타일 */
.btn-check { display: none; /* 체크박스 숨김 */ }
.btn-label {display: inline-block; padding: 5px 10px; margin: 5px; border-radius: 8px; border: 1px solid #ccc; background: #fff; cursor: pointer; font-size: 14px; color: #333; transition: all .2s; }
/* Hover 효과 */
.btn-label:hover {background: #e9e9e9;}
/* 체크된 상태 */
.btn-check:checked + .btn-label {background: #0162af;color: white;}