@charset "utf-8";
/*================================================ Layout ================================================*/
html {font-size:10px}
body {width:100%;min-height:100%; font-family:"맑은 고딕","malgun gothic",helvetica,"Apple SD Gothic Neo",sans-serif;font-size:1.4rem;font-weight:400;line-height:1.5;letter-spacing:-.05em;color:#222;word-break:break-all;word-wrap:break-word}

body{background-color:#f1f1f8;}
.wrapper{position:relative; height:100vh;min-height:100vh;}
.wrapper header{background-color:#373f52;}
.wrapper header::after{content:'';display:block;clear:both}
.wrapper header >div{float:left; margin-left:20px;}
header >div.info{width:184px;margin-left:0;}
/* header >div.time{width:500px;text-align: right;} */
header .info h1 a{display:block; width:100%;height:60px;}
header .info h1 a img{width:50%;margin-top:20px;margin-left:50px;}
header .info >div{position:relative; padding:16px 15px}
header .info >div strong{font-size:14px;font-weight:700;color:#fff;}
header .info >div strong em{display:inline-block; margin-top:-4px;padding:0 6px; border-radius:7px; background-color:#ddd; font-size:10px;font-weight:400;vertical-align:middle;}
header .info >div strong .su{background-color:#437bfe;}
header .info >div p{font-size:12px;color:#fff;}
header .info >div .btn-logout{position:absolute;top:calc(50% - 9px);right:15px; width:18px;height:18px; background:url('../images/icon_logout.svg') no-repeat 0 0;background-size:100%; text-indent:-9999px}
header >div.weather{min-width:200px;padding:9px 0;}
header .weather strong{display:block; font-size:14px;line-height:24px;font-weight:700;color:#fff;}
header .weather .img{width:24px; vertical-align:top;}
header .weather p{padding-left:20px; background:url('../images/icon_map.svg') no-repeat 0 0;background-size:18px; font-size:12px;color:#bfc4cb}
header >div.time{min-width:300px;padding:9px 0;}
header .time strong{display:block; font-size:14px;line-height:24px;font-weight:700;color:#fff;}
header .time p{padding-left:20px; background:url('../images/icon_time.svg') no-repeat 0 0;background-size:18px; font-size:12px;color:#bfc4cb}
header >div.expand{float:right; padding:16px 20px;margin:0;}
header .expand .fm-select{display:inline-block; width:150px;margin-left:20px;}
header .expand .fm-select:first-child{margin-left:0;}
header .expand .fm-select select{height:28px; border-color:#6c7e97; line-height:28px;color:#fff;}
header .expand .fm-select::after{content:'';display:block;position:absolute;top:calc(50% - 9px);right:10px; width:18px;height:18px; background:url('../../images/select_arrow02.svg') no-repeat 0 0;background-size:100%;}

.wrapper .wv-container{position:relative; height:calc(100% - 131px);padding-left:184px;}
.wrapper .container{position:relative; height:calc(100% - 131px);padding-left:184px;}
.wrapper .container nav{position:absolute;top:0;bottom:0;left:0;overflow-y:auto; width:184px;padding:10px 10px 35px 5px; background-color:#fff;}
.wrapper .container nav::-webkit-scrollbar{width:8px;}
.wrapper .container nav::-webkit-scrollbar-thumb{height:30%; border-radius:10px;background-color:#bfc4cb;}
.wrapper .container nav::-webkit-scrollbar-track{background-color:#f1f1f8;}
/* lnb */
nav >ul {}
nav >ul > li {}
nav >ul > li > a {display:block;position:relative; padding:7px 10px 5px; font-size:14px;font-weight:700;color:#373f52;}
nav >ul > li > a::after{content:'';display:block;position:absolute;top:calc(50% - 9px);right:10px; width:18px;height:18px; background:url('../../images/bul_arrow02.svg') no-repeat 0 0;background-size:100%;transition:all .5s}
nav >ul > li.on > a::after{transform: rotate(180deg);}
nav >ul > li a:hover{border-radius:5px;background-color:#f1f1f8;}
nav >ul > li ul {display:none;}
nav >ul > li > ul > li > a {display:block; padding:7px 10px 5px;  font-size:12px;color:#434a5b;}
nav >ul > li > ul > li.on a {border-radius:5px;background-color:#f1f1f8;}
nav >ul .active a{border-radius:5px;background-color:#f1f1f8;}
nav >ul li.noDepth a::after{display:none;}

.wrapper .container .contant-wrap{position:relative;top:-71px;height:calc(100% + 71px); padding:0 20px 0 10px; background-color:#f1f1f8;}
.wrapper .container .contant-wrap .breadcrumb{padding:10px 10px 15px;}
.wrapper .container .contant-wrap .breadcrumb span{display:inline-block; font-size:12px;line-height:18px;color:#7f8998;vertical-align:top;}
.wrapper .container .contant-wrap .breadcrumb span +span::before{content:'';display:inline-block; width:18px;height:18px; background:url('../../images/bul_arrow03.png') no-repeat 0 0;background-size:100%;vertical-align:top;}
.wrapper .container .contant-wrap .breadcrumb span:last-child{color:#434a5b;}
.wrapper .container .contant-wrap .contants{height:calc(100vh - 106px);}
.wrapper .container .contant-wrap .contants::-webkit-scrollbar{width:8px;}
.wrapper .container .contant-wrap .contants::-webkit-scrollbar-thumb{height:30%; border-radius:10px;background-color:#bfc4cb;}
.wrapper .container .contant-wrap .contants::-webkit-scrollbar-track{background-color:#f1f1f8;}
.wrapper .container .contant-wrap .contants >div{padding:20px 20px 40px; background-color:#fff;box-shadow:0 2px 16px 0 rgba(0, 0, 0, 0.1);}
.wrapper .container .contant-wrap .contants .cont-fill{height:100%; border-radius:8px 8px 0 0; overflow-y:auto}
.wrapper .container .contant-wrap .contants .cont-inner{border-radius:8px;}
.wrapper .container .contant-wrap .contants .cont-inner +.cont-inner{margin-top:15px;}
.wrapper .container .contant-wrap .contants .cont-half{display:flex;justify-content:space-between;}
.wrapper .container .contant-wrap .contants .cont-half >div{width:calc(50% - 5px);}

/*================================================ Commom ================================================*/
.h2tit h2{font-size:2.4rem;font-weight:700;color:#373f52;}
.h2tit p{margin-top:5px; font-size:1.4rem;color:#7f8998;}
.h3tit{padding:10px 0; border-bottom:1px solid #373f52;}
.h3tit:first-child{padding-top:0;}
.h3tit.between{display:flex;justify-content:space-between;align-items:center;}
.h3tit h3{display:inline-block; margin-right:20px; font-size:1.6rem;line-height:3.6rem;font-weight:700;color:#434a5b;}
.h3tit p{font-size:14px;color:#373f52;}
.h3tit .btn-wrap{margin:0;}
.h3tit .btns{width:100px;}
.h3tit .btns:last-child{margin-right:0;}
.h4tit{padding:10px; border-top:1px solid #d9dce0;border-bottom:1px solid #d9dce0;}
.h4tit h4{display:inline-block; margin-right:10px; font-size:1.4rem;line-height:3rem;font-weight:700;color:#434a5b;}
.h4tit-nt{padding:10px; border-bottom:1px solid #d9dce0;}
.h4tit-nt h4{display:inline-block; margin-right:10px; font-size:1.4rem;line-height:3rem;font-weight:700;color:#434a5b;}
.h5tit{padding:10px 5px;}
.h5tit h5{display:inline-block; margin-right:10px; font-size:1.2rem;line-height:1.5rem;font-weight:700;color:#434a5b;}

/* 20250904 : 모달 띄울때 상단에 여백이 생기는 현상이 있어 주석 처리 */
/* .wrapper section +section{margin-top:30px;} */ 

.requisite{position:relative; padding-left:10px;}
.requisite::before{content:'';display:block;position:absolute;top:calc(50% - 2px);left:0;  width:4px;height:4px; background-color:#ff3e3e;}
.control{padding:10px 0;}
.control:first-child{padding-top:0;}
.control::after{content:'';display:block;clear:both;}
.control .desc{margin-left:10px; font-size:12px;}
.control .btn-wrap{margin:0;}
.control .btns{padding:7px 15px 8px;margin:0 5px; font-size:1.2rem;}
.control .btns:last-child{margin-right:0;}
.control .btns.excel::before{content:'';display:inline-block; width:12px;height:12px;margin-right:5px; background:url('../../images/icon_excel.png') no-repeat 0 0;background-size:100%; vertical-align:middle;}
.control .datepicker .fm-focus{display:inline-block; margin-left:10px;}
.control .datepicker .fm-label{margin:0;}
.btn-download{display:inline-block; padding-left:20px;margin-top:10px; background:url('../../images/btn_download.png') no-repeat 0 0;background-size:18px; font-size:12px;font-weight:500;color:#437bfe;text-decoration:underline;}

/* main */
.main.wrapper .contant-wrap{
    top:0;
    height:100%;
    padding-bottom:15px;
}

.main.wrapper .contant-wrap .contants{
    position:relative;
    top:-61px;
    min-height:calc(100vh - 85px);

    /* 기존 flex 제거 */
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
    align-content:start;
}

/* 공통 카드 */
.main.wrapper .contants section{
    position:relative;
    min-width:0;
    height:205px;
    margin:0;
    padding:10px 20px;
    border-radius:8px;
    background-color:#fff;
    box-shadow:0 2px 16px rgba(55, 63, 82, 0.1);
}

/* grid 기준 span */
.main.wrapper .contants section.quarter{
    grid-column:span 1;
}

.main.wrapper .contants section.half{
    grid-column:span 2;
}

.main.wrapper .contants section.full{
    grid-column:1 / -1;
}

.main.wrapper .contants section.triple{
    grid-column:span 3;
}

/* 기존 notice만 49% 주던 예외 제거 */
.main.wrapper .contants section.notice{
    grid-column:span 2;
}

/* 모니터링 지도 높이 */
.main.wrapper .contants section.h400{
    height:700px;
}

/* 태블릿 */
@media (max-width: 1024px) {
    .main.wrapper .contant-wrap .contants{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .main.wrapper .contants section.quarter,
    .main.wrapper .contants section.half,
    .main.wrapper .contants section.notice,
    .main.wrapper .contants section.triple{
        grid-column:span 1;
    }

    .main.wrapper .contants section.full{
        grid-column:1 / -1;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    .main.wrapper .contant-wrap .contants{
        grid-template-columns:1fr;
    }

    .main.wrapper .contants section.quarter,
    .main.wrapper .contants section.half,
    .main.wrapper .contants section.notice,
    .main.wrapper .contants section.triple,
    .main.wrapper .contants section.full{
        grid-column:1 / -1;
    }
}

/* 충전함 사용현황 */
.main.wrapper .contants section.usage-status {
    height: auto;
    min-height: 430px;
    overflow: hidden;
}

.main.wrapper .usage-status .usage-layout {
    display: flex;
    gap: 20px;
    align-items: stretch;
    margin-top: 14px;
    width: 100%;
}

.main.wrapper .usage-status .usage-summary {
    flex: 0 0 420px;
    min-width: 360px;
}

.main.wrapper .usage-status .usage-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* 첫 번째 카드만 전체폭 */
.main.wrapper .usage-status .usage-summary-grid > dl:first-child {
    grid-column: 1 / -1;
}

/* 나머지 카드는 모두 기본 1칸 */
.main.wrapper .usage-status .usage-summary-grid > dl {
    grid-column: auto;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid #edf0f6;
    border-radius: 10px;
    background: #fafbfe;
    min-height: 96px;
    box-sizing: border-box;
}

.main.wrapper .usage-status .usage-summary-grid dt {
    font-size: 13px;
    line-height: 1.4;
    color: #7f8998;
    margin-bottom: 8px;
}

.main.wrapper .usage-status .usage-summary-grid dd {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin: 0;
    flex-wrap: wrap;
}

.main.wrapper .usage-status .usage-summary-grid dd strong {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: #434a5b;
}

.main.wrapper .usage-status .usage-summary-grid dd span {
    font-size: 15px;
    color: #667085;
}

.main.wrapper .usage-status .usage-chart-panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.main.wrapper .usage-status .usage-chart-panel .chart-control {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 16px auto;
    padding: 4px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f8fafc;
    flex-shrink: 0;
}

.main.wrapper .usage-status .usage-chart-panel .chart-control button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.main.wrapper .usage-status .usage-chart-panel .chart-control button:hover {
    background: #eef2ff;
    color: #3b82f6;
}

.main.wrapper .usage-status .usage-chart-panel .chart-control button.active {
    background: #4f7cf3;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(79, 124, 243, 0.2);
}

.main.wrapper .usage-status .usage-chart-wrap {
    position: relative;
    width: 100%;
    height: 320px;
    min-width: 0;
    overflow: hidden;
}

.main.wrapper .usage-status .usage-chart-wrap canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
    max-height: 100%;
}

@media (max-width: 1200px) {
    .main.wrapper .usage-status .usage-layout {
        flex-direction: column;
    }

    .main.wrapper .usage-status .usage-summary {
        flex: none;
        min-width: 0;
    }

    .main.wrapper .usage-status .usage-chart-panel .chart-control {
        margin: 0 0 16px 0;
    }

    .main.wrapper .usage-status .usage-chart-wrap {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .main.wrapper .usage-status .usage-summary-grid {
        grid-template-columns: 1fr;
    }

    .main.wrapper .usage-status .usage-summary-grid > dl:first-child,
    .main.wrapper .usage-status .usage-summary-grid > dl {
        grid-column: auto;
    }

    .main.wrapper .usage-status .usage-summary-grid dd strong {
        font-size: 24px;
    }

    .main.wrapper .usage-status .usage-chart-wrap {
        height: 260px;
    }
}

.main.wrapper section .tit.between{display:flex;justify-content:space-between;align-items:center;}
.main.wrapper section .tit h3{display:inline-block; margin-right:10px; font-size:1.6rem;font-weight:700;color:#434a5b;}
.main.wrapper section .tit .btn_more{padding-right:16px; background:url('../../images/bul_arrow03.png') no-repeat 38px center;background-size:18px; font-size:12px;color:#8b909a;}
.main.wrapper .board .total{margin-top:6px;}
.main.wrapper .board .total p{display:inline-block;margin-right:10px; color:#434a5b;}
.main.wrapper .board .total p strong{font-size:24px;font-weight:700;}
.main.wrapper .board .total span{ font-size:12px;color:#7f8998;}
.main.wrapper .board .total span +span::before{content:'';display:inline-block; width:1px;height:11px;margin:0 5px -1px; background-color:#7f8998; vertical-align:baseline;}
.main.wrapper .board ul{display:flex;justify-content:space-between; width:100%;margin-top:12px;}
.main.wrapper .board li{width:85px;height:107px;padding-top:33px; border-radius:8px; font-size:24px;font-weight:700;color:#fff;text-align:center}
.main.wrapper .board li p{font-size:14px;}
.main.wrapper .board .charging{background:#0dbda8 url('../../images/icon_board_charging.svg') no-repeat center 16px;background-size:18px;}
.main.wrapper .board .wait{background:#437bfe url('../../images/icon_board_wait.svg') no-repeat center 16px;background-size:18px;}
.main.wrapper .board .book{background:#9949ff url('../../images/icon_board_book.svg') no-repeat center 16px;background-size:18px;}
.main.wrapper .board .check{background:#ff7a00 url('../../images/icon_board_check.svg') no-repeat center 16px;background-size:18px;}
.main.wrapper .board .error{background:#7f8998 url('../../images/icon_board_error.svg') no-repeat center 16px;background-size:18px;}
.main.wrapper .operation .chart-wrap{position:relative; margin-top:10px;padding-top:51px;}
.main.wrapper .operation .chart-wrap .work{position:absolute;top:0;left:20px; width:130px;padding-left:62px; background:url('../../images/icon_operation.png') no-repeat 0 center;background-size:52px;}
.main.wrapper .operation .chart-wrap .work p{color:#434a5b;}
.main.wrapper .operation .chart-wrap .work strong{font-size:20px;font-weight:800;color:#434a5b;}
.main.wrapper .operation .chart-wrap .work strong span{margin-left:3px; font-size:16px;font-weight:400;}
.main.wrapper .operation .chart-wrap .not{left:auto;right:20px; background:url('../../images/icon_operation02.png') no-repeat 0 center;background-size:52px;}
.main.wrapper .operation .chart-wrap .chart{width:200px;height:100px;margin:0 auto;}
.main.wrapper .sales .tit span{font-size:12px;color:#7f8998;}
.main.wrapper .sales-wrap{display:flex;justify-content:space-between;} 
.main.wrapper .sales-wrap .info{margin-top:13px;}
.main.wrapper .sales-wrap .info dl{margin-top:6px; color:#434a5b;}
.main.wrapper .sales-wrap .info dl:first-child{margin-top:0;}
.main.wrapper .sales-wrap .info dt{line-height:1.3;}
.main.wrapper .sales-wrap .info dd strong{margin-right:3px; font-size:16px;font-weight:700;}
.main.wrapper .sales-wrap .info dd span{margin-left:6px; font-size:11px;color:#437bfe;}
.main.wrapper .sales-wrap .chart-wrap{width:680px;margin-top:-28px; text-align:right}
.main.wrapper .sales-wrap .chart-control{display:inline-block;position:relative; padding:2px 5px; border-radius:5px;background-color:#f1f1f8;}
.main.wrapper .sales-wrap .chart-control::before{content:'';display:block;position:absolute;top:2px; width:78px;height:22px; border:1px solid #d9dce0;border-radius:5px;background-color:#fff;transition:all .3s}
.main.wrapper .sales-wrap .chart-control button{position:relative; width:80px;height:24px; color:#434a5b;opacity:.5;}
.main.wrapper .sales-wrap .chart-control button.active{opacity:1;}
.main.wrapper .sales-wrap .chart-control.btn0::before{left:5px;}
.main.wrapper .sales-wrap .chart-control.btn1::before{left:89px;}
.main.wrapper .sales-wrap .chart-control.btn2::before{left:173px;}
.main.wrapper .sales-wrap .legend{margin-top:4px;}
.main.wrapper .sales-wrap .legend li{display:inline-block;margin-left:13px; font-size:10px;color:#7f8998;}
.main.wrapper .sales-wrap .legend li::before{content:'';display:inline-block;width:10px;height:10px;margin-right:3px; vertical-align:middle;}
.main.wrapper .sales-wrap .legend li:nth-child(1)::before{background-color:#0dbda8;}
.main.wrapper .sales-wrap .legend li:nth-child(2)::before{height:2px; background-color:#437bfe;}
.main.wrapper .sales-wrap .chart{position:relative; height:130px;padding:10px 50px;}
.main.wrapper .sales-wrap .chart .bar-wrap{display:flex;flex-direction:row;justify-content:space-between; height:100%; text-align:center}
.main.wrapper .sales-wrap .chart .bar-wrap .bar{position:relative; width:100%;}
.main.wrapper .sales-wrap .chart .bar-wrap .bar .tick{position:absolute;bottom:-17px;left:0;right:0; padding:2px 0 0; font-size:10px;color:#373f52;}
.main.wrapper .sales-wrap .chart .bar-wrap .bar .tick::after{content:'';display:block;position:absolute;top:0;right:0; width:1px;height:6px;background-color:#d9d9d9;}
.main.wrapper .sales-wrap .chart .bar-wrap .bar:first-child .tick::before{content:'';display:block;position:absolute;top:0;left:0; width:1px;height:6px;background-color:#d9d9d9;}
.main.wrapper .sales-wrap .chart .bar-wrap .bar span{display:block;position:absolute;bottom:0;left:calc(50% - 7px); width:14px; border-radius:2px 2px 0 0;background-color:#0dbda8; cursor:pointer;}
.main.wrapper .sales-wrap .chart .bar-wrap .bar.active span{background-color:#0a9988;}
.main.wrapper .sales-wrap .chart .bar-wrap .bar::after{content:'';display:block; position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;}
.main.wrapper .sales-wrap .chart svg{position:absolute;top:0;left:0;}
.main.wrapper .sales-wrap .chart .sec{display:block;}
.main.wrapper .sales-wrap .chart .bg{fill:none;}
.main.wrapper .sales-wrap .chart .line{fill:none;stroke:#437bfe;stroke-width:2px}
.main.wrapper .sales-wrap .chart .dot{fill:#fff;stroke:#437bfe;stroke-width:2px}
.main.wrapper .sales-wrap .chart .dot.active{fill:#437bfe}
.main.wrapper .sales-wrap .chart .axis{position:absolute;top:10px;bottom:5px;left:0;right:0;}
.main.wrapper .sales-wrap .chart .axis ul{display:flex;flex-direction:column-reverse;justify-content:space-between; height:100%}
.main.wrapper .sales-wrap .chart .axis li{display:flex;justify-content:space-between; position:relative; line-height:0;}
.main.wrapper .sales-wrap .chart .axis li::before{content:'';display:block;position:absolute;left:50px;right:50px;top:0; height:1px; background-color:#d9d9d9;}
.main.wrapper .sales-wrap .chart .axis li span{display:block; width:40px;margin-top:-5px; font-size:10px;line-height:1;color:#373f52;letter-spacing:0}
.main.wrapper .sales-wrap .chart .axis li span +span{text-align:left;}
.main.wrapper .sales-wrap .chart .tootip{display:none; position:absolute; width:120px; padding:3px 7px 5px 5px; border-radius:4px;background-color:#0a9988; font-size:11px;line-height:1.2;color:#c1e5e1;text-align:left; transform:translate(-50%,0);transition:all .5s}
.main.wrapper .notice-list{margin-top:10px;}
.main.wrapper .notice-list li{margin-top:13px;}
.main.wrapper .notice-list li:first-child{margin-top:0;}
.main.wrapper .notice-list li a{display:flex;justify-content:space-between;}
.main.wrapper .notice-list li p{position:relative; max-width:410px;padding-right:40px; font-size:12px;color:#727784; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.main.wrapper .notice-list li .date{font-size:12px;color:#9498a2;}
.main.wrapper .notice-list li.notice p{font-weight:700;}
.main.wrapper .notice-list li.new p::after{content:'NEW';display:block;position:absolute;top:2px;right:0; width:32px;padding:2px 0 3px; border-radius:7px;background-color:#ff3e3e; font-size:10px;line-height:1;color:#fff;text-align:center;}
.main.wrapper .error-wrap{top:0;left:0; transform:translate(0,0);}
.main.wrapper .error-wrap .error-board{display:inline-block;}
.main.wrapper .error-wrap .error-board p{display:inline-block;margin-right:5px; font-size:12px;color:#727784;vertical-align:top;}
.main.wrapper .error-wrap .error-board p em{display:inline-block;padding:2px 6px 3px; border-radius:2px;background-color:#d9dce0; font-size:9px;line-height:1;color:#818b9a;}
.main.wrapper .error-wrap .error-board p:first-child em{background-color:#c1deff;color:#5a8dfe;}
.main.wrapper .error-wrap table{margin-top:6px; font-size:12px;color:#727784;text-align:center}
.main.wrapper .error-wrap table th{padding:4px 0; font-weight:700;}
.main.wrapper .error-wrap table td{padding:4px 0 3px;}
.main.wrapper .error-wrap table td:last-child{font-weight:700;color:#ff7a00;}
.main.wrapper .error-wrap table td.process01{color:#ff7a00;}
.main.wrapper .error-wrap table td.process02{color:#437bfe;}
.main.wrapper .error-wrap table td.process03{color:#0dbda8;}
/* 충전소모니터링 */
/* .wrapper .container .contant-wrap .fullmap{display:flex;flex-direction:row; height:100%; margin:0 -20px 0 -10px;} */
/* .wrapper .container .contant-wrap .fullmap .monitoring-wrap{display:flex;flex-direction:column; width:275px;height:100%;padding:0; border-left:1px solid #d9dce0;border-right:1px solid #d9dce0;background-color:#f1f1f8;box-shadow:10px 5px 15px 0 rgb(0,0,0,.05)} */
/* .wrapper .container .contant-wrap .fullmap .map-wrap{position:relative; width:calc(100% - 275px);padding:0;} */
.wrapper .container .contant-wrap .search-area{position:absolute;z-index:9; width: 100%; height:90px; background-color:#fff; margin:0 -20px 0 -10px;}
.wrapper .container .contant-wrap .fullmap{display:flex;flex-direction:row; height:100%; margin:0 -20px 0 -10px;}
.wrapper .container .contant-wrap .fullmap .monitoring-wrap{display:flex;flex-direction:column; width:275px;height:100%;padding:0; border-left:1px solid #d9dce0;border-right:1px solid #d9dce0;background-color:#f1f1f8;box-shadow:10px 5px 15px 0 rgb(0,0,0,.05)}
.wrapper .container .contant-wrap .fullmap .map-wrap{position:relative; width:100%;padding:0;}

/* 웹뷰 */
.wrapper .wv-contants {height: 100%;}
.wrapper .wv-contants .fullmap{display:flex;flex-direction:row; height:100%;}
.wrapper .wv-contants .fullmap .map-wrap{position:relative; width:100%;padding:0;}

/* 기존 fullmap 스타일은 덮어쓰기 */
.contants.fullmap {
    display: block;   /* flex 풀기 */
    height: auto;     /* 자동 높이 */
    margin: 0;
    padding: 0;
}

/* map-wrap: cont-inner 높이를 다 차지 */
.cont-inner .map-wrap {
    position: relative;
    height: calc(100vh - 250px); /* 필요에 맞게 높이 고정, 또는 calc */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
    margin-right: 10px;  
}

/* map-wrap: cont-inner 높이를 다 차지 */
.cont-inner2 .map-wrap {
    position: relative;
    height: 630px; /* 필요에 맞게 높이 고정, 또는 calc */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
    margin-right: 10px;  
    margin-top: 15px;
}

.monitoring-wrap .search{padding:15px 10px 0; border-bottom:1px solid #d9dce0;background-color:#fff;}
.monitoring-wrap .search .fm-control{padding-left:30px; border-color:#0dbda8;border-radius:4px;background:url('../../images/icon_search.svg') no-repeat 9px center;background-size:18px; font-size:14px;line-height:26px;}
.monitoring-wrap .search .tag{padding:10px 0;}
.monitoring-wrap .search .tag::after{content:'';display:block;clear:both;}
.monitoring-wrap .search .tag span{float:left;padding:1px 10px 3px;margin:5px 5px 5px 0; border:1px solid #d9dce0;border-radius:12px; font-size:12px;color:#434a5b;}
.monitoring-wrap .search .tag span em{margin-left:2px; font-weight:700;}
.monitoring-wrap .search .tag .check em{color:#ff7a00}
.monitoring-wrap .search .tag .error em{color:#7f8998}
.monitoring-wrap .search .tag .book em{color:#9949ff}
.monitoring-wrap .search .tag .wait em{color:#437bfe}
.monitoring-wrap .search .tag .charging em{color:#0dbda8}
.monitoring-wrap .list{display:flex;flex-direction:column; height:calc(100% - 149px);margin-top:5px; background-color:#fff;}
.monitoring-wrap .list >h3{padding:7px 10px; border-top:1px solid #d9dce0;border-bottom:1px solid #d9dce0; font-weight:700;color:#434a5b;}
.monitoring-wrap .list >div{height:100%;margin:0; overflow-y:scroll;}
.monitoring-wrap .list li a{display:block; padding:7px 10px 10px;}
.monitoring-wrap .list li a strong{color:#434a5b;}
.monitoring-wrap .list li a p{font-size:12px;color:#7f8998;}
.monitoring-wrap .list li a >div{display:flex;flex-direction:row; margin-top:4px;}
.monitoring-wrap .list li a >div p{margin-left:10px;padding-right:18px; color:#434a5b;}
.monitoring-wrap .list li a >div p:first-child{margin-left:0;}
.monitoring-wrap .list li a >div p em{display:inline-block;padding:2px 6px 3px; border-radius:2px;background-color:#ebdbff; font-size:9px;line-height:1;color:#9949ff;}
.monitoring-wrap .list li a >div p.speed em{background-color:#c1deff;color:#437bfe;}
.monitoring-wrap .list li a >div p.check{background:url('../../images/icon_map_check.svg') no-repeat right center;background-size:12px;}
.monitoring-wrap .list li a >div p.error{background:url('../../images/icon_map_error.svg') no-repeat right center;background-size:12px;}
.monitoring-wrap .list li a >div p.book{background:url('../../images/icon_map_book.svg') no-repeat right center;background-size:12px;}
.monitoring-wrap .list li a >div p.wait{background:url('../../images/icon_map_wait.svg') no-repeat right center;background-size:12px;}
.monitoring-wrap .list li a >div p.charging{background:url('../../images/icon_map_charging.svg') no-repeat right center;background-size:12px;}


.newmapmarker {
  position: relative;
  width: 48px;
  height: 48px;
  background:url('../../images/icon_marker_bg.png') no-repeat center;
  background-size:35px auto; 
}

.newmapmarker .icon,
.newmapmarker .circle,
.newmapmarker .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
}

.newmapmarker .circle {
  width: 43px;
  height: 43px;
  background: url('/images/icon_marker_circle.png') no-repeat center;
  background-size: 30px;
  top: 43%;
  z-index: 2;
}

.newmapmarker .icon {
  width: 18px;
  height: 18px;
  background: url('/images/icon_marker_img.png') no-repeat center;
  background-size: 9px;
  top: 43%;
  left: 37%;
  z-index: 3;
}

.newmapmarker .text {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  top: 43%;
  left: 58%;
  z-index: 4;
}

/* .map-wrap .newmapmarker.on {position:relative; width:48px;height:48px; background:url('../../images/icon_marker_bg.png') no-repeat center;background-size:39px auto; transform:translate(0%, -50%);border-color:red;filter: opacity(0.7) drop-shadow(0 0 0 #387adf);}
.map-wrap .newmapmarker.on .icon {position:absolute; width:18px;height:18px; background: url('../../images/icon_marker_img.png') no-repeat center;background-size:14px auto; transform:translate(48%, 55%);}
.map-wrap .newmapmarker.on .circle {position:absolute; width:42px;height:42px; background: url('../../images/icon_marker_circle.png') no-repeat center;background-size:35px auto; transform:translate(7%, -2%);}
.map-wrap .newmapmarker.on .text {position:absolute;  width:48px;height:48px; background-size:30px auto; color:#fff; font-size: 12px; font-weight: 700; margin-left:27px;margin-top:11px;} */

/* .map-wrap .newmapmarker{position:relative; width:48px;height:48px; background:url('../../images/icon_marker_bg.png') no-repeat center;background-size:30px auto; transform:translate(0%, -50%);}
.map-wrap .newmapmarker .icon {position:absolute; width:18px;height:18px; background: url('../../images/icon_marker_img.png') no-repeat center;background-size:10px auto; transform:translate(55%, 68%);}
.map-wrap .newmapmarker .circle {position:absolute; width:43px;height:43px; background: url('../../images/icon_marker_circle.png') no-repeat center;background-size:25px auto; transform:translate(5%, -1%);}
.map-wrap .newmapmarker .text {position:absolute;  width:48px;height:48px; background-size:30px auto; color:#fff; font-size: 10px; font-weight: 700; margin-left:25px;margin-top:14px;} */

.map-wrap .mapmarker{position:absolute; width:28px;height:28px; border:2px solid #434a5b;border-radius:100%; background:#fff url('../../images/ic_logo_imkev.svg') no-repeat center;background-size:18px auto;box-shadow:0 2px 5px 0 rgba(0, 0, 0, .15); transform:translate(-50%, -100%);}
.map-wrap .mapmarker::after{content:'';display:block;position:absolute;top:100%;left:calc(50% - 4px); width:0;height:0; border-top: 6px solid #434a5b;border-left: 4px solid transparent;border-right: 4px solid transparent;}
.map-wrap .mapmarker.check{border-color:#ff7a00}
.map-wrap .mapmarker.check::after{border-top-color:#ff7a00}
.map-wrap .mapmarker.error{border-color:#7f8998}
.map-wrap .mapmarker.error::after{border-top-color:#7f8998}
.map-wrap .mapmarker.book{border-color:#9949ff}
.map-wrap .mapmarker.book::after{border-top-color:#9949ff}
.map-wrap .mapmarker.wait{border-color:#437bfe}
.map-wrap .mapmarker.wait::after{border-top-color:#437bfe}
.map-wrap .mapmarker.charging{border-color:#0dbda8}
.map-wrap .mapmarker.charging::after{border-top-color:#0dbda8}
.map-wrap .mapmarker.active{width:32px;height:32px; background-size:22px auto;}
.map-wrap .maplevel{position:absolute; width:86px;height:40px; border:2px solid #434a5b;border-radius:20px;background-color:#fff; line-height:1.2; color:#434a5b;text-align:center; transform:translate(-50%, -100%);}
.map-wrap .maplevel i{font-size:12px;}
.map-wrap .maplevel strong{display:block; font-size:14px;}
.map-wrap .maplevel.level1{color:#0dbda8;border-color:#0dbda8;}
.map-wrap .maplevel.level2{color:#00a09b;border-color:#00a09b;}
.map-wrap .maplevel.level3{color:#0088a6;border-color:#0088a6;}
.map-wrap .maplevel.level4{color:#005e7b;border-color:#005e7b;}
/* 충전소 상세팝업 */
.layerCharging{display:none;}
.layerCharging .pop-layer{top:60px !important;left:459px !important;width:450px;height:calc(100% - 60px); border:0;border-right:1px solid #d9dce0;background-color:#f1f1f8;}
.layerCharging .pop-layer .header{padding:10px 40px 11px 20px !important; border-bottom:1px solid #d9dce0;background-color:#fff;}
.layerCharging .pop-layer section{margin-top:10px;padding:0 10px 14px; background-color:#fff;}
.layerCharging .pop-layer section.info{display:flex;flex-direction:column; height:calc(100% - 258px)}
.layerCharging .pop-layer .h4tit{margin:0 -10px;}
.layerCharging .pop-layer table th{padding:8px 0 8px 5px; border-bottom:1px solid #d9dce0; font-size:12px;color:#7f8998;text-align:left}
.layerCharging .pop-layer table td{border-bottom:1px solid #d9dce0; font-size:11px;color:#434a5b;}
.layerCharging .pop-layer table.type2 th{border:0;}
.layerCharging .pop-layer table.type2 td{padding:5px 0; border:0;}
.layerCharging .pop-layer .scroll-box{height:100%; margin:0 -10px;padding:0 10px 40px;}
.layerCharging .pop-layer .ui-button .ui-icon{width:18px;height:18px; background:#fff url('../../images/select_arrow.svg') no-repeat 0 0;background-size:100%; transition:all .2s}
.layerCharging .pop-layer .ui-selectmenu-button-open .ui-icon{transform:rotate(180deg);}
.layerCharging .pop-layer .selectmenu{display:inline-block; vertical-align:top;}
.ui-selectmenu-button.ui-button{width:150px;padding:5px 10px; border:1px solid #d9dce0;}
.ui-icon.check{background:url('../../images/icon_map_check.svg') no-repeat right center;background-size:12px;}
.ui-icon.error{background:url('../../images/icon_map_error.svg') no-repeat right center;background-size:12px;}
.ui-icon.book{background:url('../../images/icon_map_book.svg') no-repeat right center;background-size:12px;}
.ui-icon.wait{background:url('../../images/icon_map_wait.svg') no-repeat right center;background-size:12px;}
.ui-icon.charging{background:url('../../images/icon_map_charging.svg') no-repeat right center;background-size:12px;}
/* 충전소 설명 팝업 */
.layerChargerInfo{display:none; position:absolute;}
.layerChargerInfo .pop-layer{width:300px; border:0;border-radius:8px;box-shadow:0 2px 16px 0 rgba(0, 0, 0, .1);}
.layerChargerInfo .pop-layer .header{padding: 10px 20px 0;}
.layerChargerInfo .pop-layer .contents{padding:20px;}
.layerChargerInfo .address{padding-left:34px; background:url('../../images/icon_map02.svg') no-repeat 5px center;background-size:24px; font-size:12px;color:#373f52;}
.layerChargerInfo .tit{display:block;margin-top:8px; font-size:12px;font-weight:700;color:#7f8998;}
.layerChargerInfo .chargers{height:70px;margin-top:5px;}
.layerChargerInfo .chargers >p{margin-top:7px; font-size:12px;color:#434a5b;}
.layerChargerInfo .chargers >p em{display:inline-block; width:48px;padding:2px 0 3px; border-radius:2px;background-color:#c1deff; font-size:9px;line-height:1;font-weight:700;color:#437bfe;text-align:center}
.layerChargerInfo .chargers >p.error em{background-color:#d9dce0; color:#7f8998;}
.layerChargerInfo .chargers >p:first-child{margin-top:0;}
/* 로그인 */
.member-wrap{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%); padding:40px 60px; border-radius:8px;background-color:#fff;box-shadow:0 2px 16px 0 rgba(0, 0, 0, 0.1);}
.login{width:420px;}
.login .fm-group{margin-top:35px;}
.login .fm-group +.fm-group{margin-top:15px;}
.login .fm-group .fm-focus{display:block;}
.login .fm-group .fm-control{width:100%;padding:1rem;}
.login .btn-wrap .btns{width:100%;margin:0;}
.login .mem-join{margin-top:15px;}
.login .mem-join a{font-size:12px;font-weight:500;color:#437bfe;text-decoration:underline;}
.login .foot{margin-top:40px; font-size:12px;color:#7f8998;text-align:center}
/* 로그인 심사 중 */
.standby{text-align:center}
.standby strong{display:block; padding-top:50px; background:url('../../images/icon_exclamation.svg') no-repeat center 0;background-size:32px; font-size:20px;font-weight:700;color:#434a5b;}
.standby p{margin-top:10px; font-size:14px;color:#7f8998;}
.standby .btn-wrap{width:240px; margin:40px auto 20px;}
/* 회원가입 */
.join{position:relative;top:auto;left:auto;transform:translate(0, 0); width:960px;margin:40px auto;}
.join .h2tit +section{margin-top:50px;}
.join .tableX th, .join .tableX td{border-bottom:0;}
.join .tableX th{padding:20px 0; background-color:transparent;}
.join .tableX td{padding:10px;}
.join .tableX tr:first-child th{padding-top:30px;}
.join .tableX tr:first-child td{padding-top:20px;}
.join .tableX th label{font-size:14px;}
.join .tableX .fm-group .fm-control{padding:1rem;}
.join .tableX .fm-select select{height:40px;}
.join .tableX td .btns{width:auto;padding:11px 27px 12px; border:0;border-radius:4px;background-color:#373f52; font-size:13px;font-weight:700;color:#fff;}
.join .btn-wrap{margin-top:30px;}
.imgView::after{content:'';display:block;clear:both;}
.imgView p{float:left;overflow:hidden; width:100px;height:100px;margin-right:10px; border:1px solid #d9dce0;border-radius:4px;background:#f8f9fb url('../../images/img_addimg.png') no-repeat center;background-size:24px;}
.imgView p >img{width:100%;}
.imgView +.noti{margin:0;}
/* Bar 차트 */
.barchart{margin-top:-42px;}
.barchart .chart-control{display:inline-block;position:relative;top:0;left:calc(50% - 100px); width:200px;padding:0 26px;}
.barchart .chart-control >input{width:100%;height:32px; border:1px solid #d9dce0; text-align:center}
.barchart .chart-control >button{position:absolute;top:calc(50% - 12px); width:24px;height:24px; background:url('../../images/btn_controls.png') no-repeat 0 0;background-size:48px 24px;}
.barchart .chart-control .prev{left:0; background-position:0 0;}
.barchart .chart-control .next{right:0; background-position:right 0;}
.barchart .chart{position:relative; height:300px;padding:0 0 50px 50px;margin-top:30px;}
.barchart .chart .tit{position:absolute;bottom:0; font-size:10px;line-height:1.2;color:#373f52;}
.barchart .chart .bar-wrap{text-align:center}
.barchart .chart .bar-wrap .tit{left:50px;right:0;}
.barchart .chart .bar-wrap .bar-group{display:flex;flex-direction:row;justify-content:space-between; height:250px;}
.barchart .chart .bar-group .bar{position:relative; width:100%;}
.barchart .chart .bar-group .bar .tick{position:absolute;bottom:-25px;left:0;right:0; padding:5px 0; font-size:10px;color:#373f52;}
.barchart .chart .bar-group .bar .tick::after{content:'';display:block;position:absolute;top:0;right:0; width:1px;height:8px;background-color:#d9d9d9;}
.barchart .chart .bar-group .bar:first-child .tick::before{content:'';display:block;position:absolute;top:0;left:0; width:1px;height:8px;background-color:#d9d9d9;}
.barchart .chart .bar-group .bar span{display:block;position:absolute;bottom:0;left:calc(50% - 7px); width:14px; border-radius:2px 2px 0 0;background-color:#0dbda8; cursor:pointer;}
.barchart .chart .bar-group .bar.active span{background-color:#0a9988;}
.barchart .chart .axis{text-align:right;}
.barchart .chart .axis .tit{left:0;}
.barchart .chart .axis ul{display:flex;flex-direction:column-reverse;justify-content:space-between; position:absolute;top:0;bottom:45px;left:0;right:0;}
.barchart .chart .axis li{position:relative; line-height:0;}
.barchart .chart .axis li::before{content:'';display:block;position:absolute;left:50px;right:0;top:0; height:1px; background-color:#d9d9d9;}
.barchart .chart .axis li span{display:block; width:40px;margin-top:-5px; font-size:10px;line-height:1;color:#373f52;letter-spacing:0}
.barchart .chart .tootip{display:none; position:absolute; padding:3px 7px 5px 5px; border-radius:4px;background-color:#0a9988; font-size:10px;line-height:1.3;color:#c1e5e1; transform:translate(-50%,0);transition:all .5s}
/* BarPeriod 차트 */
.barperiodchart{}
.barperiodchart .legend{margin-top:7px; text-align:right}
.barperiodchart .legend li{display:inline-block;margin-left:10px; font-size:10px;color:#7f8998;}
.barperiodchart .legend li::before{content:'';display:inline-block;width:10px;height:10px;margin-right:3px; vertical-align:middle;}
.barperiodchart .legend li:nth-child(1)::before{background-color:#0dbda8;}
.barperiodchart .legend li:nth-child(2)::before{background-color:#b7ebe5;}
.barperiodchart .chart{margin-top:7px; position:relative; height:100px}
.barperiodchart .chart .bar-wrap{display:flex;flex-direction:column;justify-content:space-evenly; height:100%;}
.barperiodchart .chart .bar-wrap .bar{position:relative; height:20px;padding:0 10px 0 50px;}
.barperiodchart .chart .bar-wrap .tick{position:absolute;top:0;left:0;width:50px; font-size:12px;line-height:20px;font-weight:400;color:#434a5b;}
.barperiodchart .chart .bar-wrap .bar span{float:left; width:0;height:100%; animation:scale .5s ease-in-out 1 alternate}
@-webkit-keyframes scale{0%{transform: scaleX(.1);opacity:.5;} 100%{transform: scaleX(1);opacity:1;}}
.barperiodchart .chart .bar-wrap .bar span:nth-of-type(1){background-color:#0dbda8; border-radius:3px 0 0 3px;}
.barperiodchart .chart .bar-wrap .bar span:nth-of-type(2){background-color:#b7ebe5; border-radius:0 3px 3px 0;}
.barperiodchart .chart .bar-wrap .bar.active span:nth-of-type(1){background-color:#077b6d; border-radius:3px 0 0 3px;}
.barperiodchart .chart .bar-wrap .bar.active span:nth-of-type(2){background-color:#0a9988; border-radius:0 3px 3px 0;}
.barperiodchart .chart .axis ul{display:flex;justify-content:space-between; position:absolute;top:0;bottom:0;left:30px;right:-10px;}
.barperiodchart .chart .axis li{position:relative;height:100%; line-height:0;text-align:center}
.barperiodchart .chart .axis li::after{content:'';display:block;width:1px; position:absolute;left:50%;top:0;bottom:0; background-color:#d9d9d9;}
.barperiodchart .chart .axis li span{display:block;position:relative;top:calc(100% + 4px);width:40px; font-size:10px;line-height:1;color:#7f8998;letter-spacing:0}
.barperiodchart .chart .tootip{display:none; position:absolute;top:50%; padding:3px 7px 5px 5px; border-radius:4px;background-color:#0a9988; font-size:10px;line-height:1.3;color:#c1e5e1; transform:translate(0,-50%);transition:all .5s}
/* 약관 개정 */
.terms-view{height:150px;padding:10px;margin:0; text-align:left}
/* error */
.error-wrap{text-align:center; position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
.error-wrap .error >div img{height:80px}
.error-wrap .error >strong{display:inline-block; margin-top:40px; font-size:26px;line-height:1.3;color:#212529;font-weight:700;}
.error-wrap .error >p{margin-top:13px; font-size:14px;color:#868e96;word-break:keep-all;}
.error-wrap .btn-bottom{margin-top:60px;}
.error-wrap .btn-bottom a{display:inline-block; width:334px;height:56px; font-size:16px;line-height:56px;color:#fff;font-weight:700; border-radius:8px;background-color:#0dbda8;}
/* popup common */
.wrap-layer-popup.size-s .pop-layer{width:300px;}
.wrap-layer-popup.size-m .pop-layer{width:500px;}
.wrap-layer-popup.size-l .pop-layer{width:720px;}
.wrap-layer-popup.size-xl .pop-layer{width:900px;}
.wrap-layer-popup.size-xxl .pop-layer{width:1200px;min-height: 500px;}
.wrap-layer-popup .pop-layer .header{padding:10px 20px 0;}
.wrap-layer-popup .pop-layer .contents{padding:20px;}
.pop-layer .h3tit{border-bottom:0;}
.pop-layer .tableX{border-top:1px solid #373f52;}
.pop-layer .noti{margin-top:10px;padding-left:14px;text-indent:-14px; font-size:12px;color:#7f8998;}
.pop-layer .noti:first-child{margin-top:0;}
.pop-layer .btns{margin:0 3px;}
.pop-layer .alert{display:flex;justify-content:center;align-items:center; height:80px; font-size:13px;}
.pop-layer .control{padding:10px 0; border-top:1px solid #373f52;}
.pop-layer .scroll-box.tableY table{margin-left:-1px;}
.pop-layer .scroll-box.tableY table tbody th{border-left:1px solid #d9dce0;border-top:1px solid #d9dce0;background-color:#f8f9fb; font-size:12px;color:#7f8998;}
/* 비밀번호 수정 팝업 */
.layerPwChange .contents{padding:0 20px;}
.layerPwChange .fm-group{display:flex;align-items:center; margin-top:10px;}
.layerPwChange .fm-group .fm-label{width:150px; font-size:12px;font-weight:700;color:#434a5b;}
.layerPwChange .fm-group .fm-focus{flex:1 1 0}
/* 일괄 등록 결과 팝업 */
.layerUploadResult .scroll-box{height:100px;padding:10px; border:1px solid #d3d3d3}
/* 일괄 단가 수정 팝업 */
.layerPrice .control{padding-top:0; border-top:0;}
.layerPrice .control .btn-wrap{margin:-48px 30px 0 0;}

/*popup layer 정렬 박스*/
.pop-align-box {
    width:100%;
    height:70px;
    margin:-15px 0px 5px 0px;
}
.pop-align-box ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}
.pop-align-box ul li {
    background-color:#e9eef6;
    width: 200px;
    height: 50px;
    margin-top: 10px;
    border-radius: 8px;
    display:flex;
    text-align: center;
    justify-content: space-between;
    padding: 14px 20px 0px 20px
}
.pop-align-box ul li p {
    font-size: 16px;
    font-weight: 700;  
}

.pop-layer {
  max-height: 90vh;     /* 브라우저 높이의 최대 90%까지만 */
  overflow-y: auto;     /* 넘치면 스크롤 */
}