.popup_wrap .popup_wrap {
    background: #ccc;
}
.popup_wrap .popup,
.popup_wrap2 .popup {
    position: absolute;
    top: 80px;
    right: -560px;
    z-index: 1;
    transition: all cubic-bezier(0.8, 0, 0, 1) 0.4s;
    visibility: hidden;
    z-index: 19;
}
.popup_wrap .popup.active, .popup_wrap2 .popup.active {
    right: 0;
    visibility: initial;
}
.popup_wrap .popup .inner, .popup_wrap2 .popup .inner  {
    height: calc((var(--vh, 1vh) * 100) - 80px);
    background: #fff;
    box-shadow: var(--shadow-object);
    padding: 30px 20px;
    width: 560px;
    border-radius: inherit;
}
.popup_wrap .popup > .inner > .title,
.popup_wrap2 .popup > .inner > .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.popup_wrap .popup > .inner > .title h5,
.popup_wrap2 .popup > .inner > .title h5 {
    font-size: 22px;
    color: var(--txt-default);
    line-height: 30px;
    display: flex;
    align-items: baseline;
    font-weight: 700;
}
.popup_wrap .popup > .inner > .title .tool-tip {
    margin-left: 2px;
    margin-top: 2px;
    position: relative;
    display: flex;
    align-items: center;
}
.popup_wrap .popup > .inner > .title .tool-tip i {
    font-size: 20px;
    font-weight: 400;
    color: var(--icon-default);
    cursor: pointer;
}

.popup_wrap .popup > .inner > .title .tool-tip span {
    font: var(--font-sub-bold);
    color: #fff;
    background: var(--icon-default);
    border-radius: var(--default-bdrs);
    padding: 8px 12px;
    position: absolute;
    left: calc(100% + 9px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    visibility: hidden;
    transition: all 0.1s;
    opacity: 0;
}
.popup_wrap .popup > .inner > .title .tool-tip span.active {
    visibility: initial;
    opacity: 1;
}
.popup_wrap .popup > .inner > .title .tool-tip span::after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-top: 4px solid transparent;
    border-right: 8px solid var(--icon-default);
    border-bottom: 4px solid transparent;
    position: absolute;
    right: calc(100% - 1px);
    top: 0;
    bottom: 0;
    margin: auto;
}
.popup_wrap .popup > .inner > .title .popup_close,
.popup_wrap2 .popup > .inner > .title .popup_close {
    display: flex;
    background: none;
    flex-shrink: 0;
}
.popup_wrap .popup > .inner > .title .popup_close .icon,
.popup_wrap2 .popup > .inner > .title .popup_close .icon {
    width: 20px;
}
.popup_wrap .popup > .inner > .segment,
.popup_wrap2 .popup > .inner > .segment{
    height: calc((var(--vh, 1vh) * 100) - 190px);
    overflow-y: auto;
    overflow-x: hidden;
}
.popup_wrap .popup > .inner .toDo-list-none {
    display: flex;
    height: 70vh;
    align-items: center;
    justify-content: center;
}
.popup_wrap .popup > .inner .top-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--gray-80);
    padding: 20px 5px;
    cursor: pointer;
    background: #fff;
    width: 100%;
}
.popup_wrap .popup > .inner .top-title > .circle {
    width: 10px;
    height: 10px;
    background: #ccc;
    border-radius: 100%;
    transition: all 0.1s;
}
.popup_wrap .popup > .inner li.active .top-title > .circle {
    background: var(--primary-60);
}
.popup_wrap .popup > .inner .top-title > .icon {
    width: 16px;
}
.popup_wrap .popup > .inner .top-title .name {
    font-size: 17px;
    line-height: 24px;
    color: var(--txt-default);
    font-weight: 700;
}
.popup_wrap .popup > .inner .top-title > div {
    display: flex;
    align-items: center;
}
.popup_wrap .popup > .inner .top-title > div > .dec {
    font-size: 14px;
    padding: 4px 8px;
    color: #fff;
    background: var(--red-sign);
    border-radius: var(--default-bdrs);
    line-height: 1;
    margin-right: 10px;
}
.popup_wrap .popup > .inner .acc-list .top-title + div {
    display: none;
}
.popup_wrap .popup > .inner .acc-list .top-title .icon {
    width: 18px;
    height: 18px;
    transition: all 0.3s;
}
.popup_wrap .popup > .inner .acc-list .top-title.active .icon {
    transform: rotate(180deg);
}
.popup_wrap .popup > .inner .acc-list .acc-segment {
    padding: 20px 10px;
    border: 1px solid var(--gray-90);
}
.popup_wrap .popup > .inner .acc-list .acc-segment > a {
    display: block;
}

/* 상태값에 따른 색상 변화 */
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type1 .dec {
    background: var(--gray);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type1 .acc-segment {
    background: var(--gray-bg-dark);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type2 .dec {
    background: var(--blue);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type2 .acc-segment {
    background: var(--blue-bg-dark);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type3 .dec {
    background: var(--red);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type3 .acc-segment {
    background: var(--red-bg-dark);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type4 .dec {
    background: var(--green);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type4 .acc-segment {
    background: var(--green-bg-dark);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type5 .dec {
    background: var(--yellow);
}
.popup_wrap .popup > .inner .acc-list .acc-list-detail.type5 .acc-segment {
    background: var(--yellow-bg-dark);
}

.popup_wrap .popup > .inner .acc-list .acc-segment + div {
    margin-top: 4px;
}
.popup_wrap .popup > .inner .acc-list .acc-segment:first-child {
    /* border-top: 1px solid #ddd;
    margin-top: -1px; */
    border-top: none;
}
.popup_wrap .popup > .inner .acc-list .acc-segment .acc-title {
    color: var(--txt-default);
    font: var(--font-body-bold);
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    align-items: baseline;
    transition: opacity 0.2s;
}
.popup_wrap .popup > .inner .acc-list .acc-segment:hover .acc-title {
    opacity: 0.6;
}
/* 유틸리티 메뉴 내 뱃지 */
/* .popup_wrap .popup .dec { */
/*     color: #fff; */
/*     border-radius: var(--default-bdrs); */
/*     line-height: 1; */
/*     font-size: 14px; */
/*     padding: 4px 8px; */
/*     margin-left: 20px; */
/*     flex-shrink: 0; */
/*     display: flex; */
/*     align-items: center; */
/*     justify-content: center; */
/*     font-weight: 400; */
/* } */
/* .popup_wrap .popup .dec.type1 { */
/*     background: var(--gray); */
/* } */
/* .popup_wrap .popup .dec.type2 { */
/*     background: var(--blue); */
/* } */
/* .popup_wrap .popup .dec.type5 { */
/*     background: var(--yellow); */
/* } */
/* .popup_wrap .popup .dec.type3 { */
/*     background: var(--red); */
/* } */
/* .popup_wrap .popup .dec.type4 { */
/*     background: var(--green); */
/* } */

.popup_wrap .popup > .inner .acc-list .acc-segment .txt,
.popup_wrap .popup > .inner .acc-list .acc-segment .date {
    font-size: 13px;
    line-height: 17px;
    color: var(--txt-second);
}

.popup_wrap .popup2 .segment ul li {
    border-bottom: 1px solid var(--gray-80);
    padding: 20px 0;
}

.popup_wrap .popup2 .segment ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.popup_wrap .popup2 .segment ul li .date {
    font-size: 17px;
    line-height: 24px;
    color: var(--txt-default);
    font-weight: 700;
}
.popup_wrap .popup2 .segment ul li .time {
    margin-bottom: 10px;
    margin-top: 15px;
    font-size: 13px;
    color: var(--txt-second);
    display: block;
    line-height: 17px;
}
.popup_wrap .popup2 .segment ul li .list {
    background: #f8f9fb;
    padding: 20px 10px;
    border: 1px solid var(--gray-90);
}
.popup_wrap .popup2 .segment ul li .list + .list {
    margin-top: 4px;
}
.popup_wrap .popup2 .segment ul li .list a {
    display: block;
}
.popup_wrap .popup2 .segment ul .list-title {
    color: var(--txt-default);
    font-weight: 700;
    font-size: 16px;
    line-height: 21px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    word-break: keep-all;
    align-items: baseline;
    transition: opacity 0.2s;
}
.popup_wrap .popup2 .segment ul .list:hover .list-title {
   opacity: 0.6;
}
.popup_wrap .popup2 .segment ul .name {
    font-size: 13px;
    line-height: 17px;
    color: var(--txt-second);
}
.popup_wrap .popup2 .segment ul li .list.type1 {
    background: var(--gray-bg-dark);
}
.popup_wrap .popup2 .segment ul li .list.type2 {
    background: var(--blue-bg-dark);
}
.popup_wrap .popup2 .segment ul li .list.type3 {
    background: var(--red-bg-dark);
}
.popup_wrap .popup2 .segment ul li .list.type4 {
    background: var(--green-bg-dark);
}
.popup_wrap .popup2 .segment ul li .list.type5 {
    background: var(--yellow-bg-dark);
}

.popup_wrap .popup4 .sub_popup {
    position: absolute;
    top: 0;
    right: calc(100% - 830px);
    box-shadow: 0px 3px 9.7px 0.3px rgb(7 8 22 / 5%);
    z-index: -2;
    transition: all cubic-bezier(0.8, 0, 0, 1) 0.4s;
    visibility: hidden;
}
.popup_wrap .popup4 .sub_popup > .sub_inner {
    height: calc((var(--vh, 1vh) * 100) - 80px);
    background: #fff;
    padding: 30px 20px;
    width: 800px;
}
.popup_wrap .popup4 > .inner .top-title .name {
    transition: all 0.1s;
}
.popup_wrap .popup4 > .inner li.active .top-title .name {
    color: var(--primary-60);
}
.popup_wrap .popup4 .sub_popup.active {
    right: 100%;
    visibility: initial;
}
.popup_wrap .popup4 .sub_popup .sub_popup_title {
    font-size: 22px;
    color: var(--txt-default);
    display: flex;
    align-items: center;
    font-weight: 700;
    margin-bottom: 20px;
}

.popup_wrap .popup4 .sub_popup .sub_pop_close {
    width: 30px;
    height: 60px;
    box-shadow: 0px 0px 10px rgb(0 0 0 / 11%);
    border: solid 1px #ddd;
    border-left: 0;
    background-color: #fff;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: calc(100% - 1px);
    border-radius: 10px 0 0 10px;
    z-index: -1;
}
.popup_wrap .popup4 .sub_popup .sub_pop_close .icon {
    display: none;
}
.popup_wrap .popup4 .sub_popup .sub_pop_close::before {
    content: "";
    display: block;
    width: 9px;
    height: 14px;
    background-image: url("../images/btn_fold.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    transform: rotate(180deg);
    right: 7px;
    top: 0;
    bottom: 0;
    margin: auto;
}
.popup_wrap .popup4 .sub_popup .segment img {
    width: 100%;
    margin: auto;
    display: block;
}

@media (max-width: 1720px) {
    .popup_wrap .popup4 .sub_popup > .sub_inner {
        width: 680px;
    }
}
@media (max-width: 1580px) {
    .popup_wrap .popup4 .sub_popup > .sub_inner {
        width: 560px;
    }
    .popup_wrap .popup {
        right: -460px;
    }
    .popup_wrap .popup .inner {
        width: 460px;
    }
}
@media (max-width: 1380px) {
    .popup_wrap .popup4 .sub_popup > .sub_inner {
        width: 400px;
    }
    .popup_wrap .popup4 .inner {
        width: 320px;
    }
}
@media (max-width: 1100px) {
    .popup_wrap .popup,
    .popup_wrap2 .popup {
        right: 0;
        bottom: -100%;
        top: auto;
        background: #fff;
        padding-bottom: 60px;
        width: 100%;
        border-radius: 10px 10px 0 0;
    }
    .popup_wrap .popup.active, .popup_wrap2 .popup.active  {
        bottom: 0;
    }
    .popup_wrap .popup .inner,
    .popup_wrap2 .popup .inner {
        width: 100% !important;
        height: auto;
        padding: 25px 15px;
        padding-bottom: 0;
        background: none;
        position: relative;
    }
    .popup_wrap .popup .inner:after,
    .popup_wrap2 .popup .inner:after {
        content: "";
        width: 100%;
        height: 30px;
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
    }
    .popup_wrap .popup > .inner > .segment {
        height: calc(var(--vh, 1vh) * 60);
    }
    .popup_wrap .popup1 > .inner .acc-list {
       padding-bottom: 25px;
    }
    .popup_wrap .popup > .inner > .segment li:last-child {
        padding-bottom: 25px;
    }
    .popup_wrap .popup > .inner > .title {
        margin-bottom: 15px;
    }
    .popup_wrap .popup > .inner > .title h5,
    .popup_wrap2 .popup > .inner > .title h5{
        font-size: 18px;
        line-height: 26px;
        align-items: flex-end;
    }
    .popup_wrap .popup > .inner > .title .tool-tip {
        align-items: center;
        margin-bottom: 2px;
    }
    .popup_wrap .popup > .inner > .title .tool-tip i {
        line-height: 24px;
        font-size: 18px;
    }
    .popup_wrap .popup > .inner .top-title {
        padding: 18px 5px;
    }
    .popup_wrap .popup > .inner .top-title .name {
        font-size: 15px;
        line-height: 20px;
    }
    .popup_wrap .popup > .inner .top-title .dec {
        font-size: 13px;
        padding: 2px 6px;
        border-radius: 6px;
    }
    .popup_wrap .popup > .inner .acc-list .acc-segment .acc-title {
        font-size: 15px;
        line-height: 20px;
    }
    .popup_wrap .popup > .inner .acc-list .acc-segment .txt,
    .popup_wrap .popup > .inner .acc-list .acc-segment .date {
        font-size: 12px;
        line-height: 16px;
    }
    .popup_wrap .popup2 .segment ul li {
        padding: 18px 0;
    }
    .popup_wrap .popup2 .segment ul li .date {
        font-size: 15px;
        line-height: 20px;
    }
    .popup_wrap .popup2 .segment ul li .list {
        padding: 15px 10px;
    }
    .popup_wrap .popup2 .segment ul .list-title .dec {
        font-size: 12px;
    }
    .popup_wrap .popup2 .segment ul .list-title {
        font-size: 15px;
        line-height: 20px;
    }
    .popup_wrap .popup2 .segment ul .name {
        font-size: 12px;
        line-height: 16px;
    }
    .popup_wrap .popup4 .sub_popup_bg {
        background: #B5B8C080;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
        opacity: 0;
        transition: all 0.4s;
    }
    .popup_wrap .popup4 .sub_popup_bg.on {
        visibility: initial;
        opacity: 1;
    }
    .popup_wrap .popup4 .sub_popup {
        right: 0;
        bottom: -100%;
        top: auto;
        width: 100%;
        z-index: 2;
    }
    .popup_wrap .popup4 .sub_popup.active {
        right: 0;
        bottom: 0;
    }
    .popup_wrap .popup4 .sub_popup > .sub_inner {
        width: 100%;
        height: auto;
        border-radius: 10px 10px 0 0;
        background: #fff;
        padding: 25px 15px;
        padding-bottom: 60px;
    }
    .popup_wrap .popup4 .sub_popup .sub_popup_title {
        margin-bottom: 30px;
        font-size: 18px;
        line-height: 26px;
        position: relative;
    }
    .popup_wrap .popup4 .sub_popup .sub_pop_close {
        box-shadow: none;
        margin: 0;
        border: none;
        border-radius: 0;
        position: absolute;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        z-index: 0;
        height: auto;
        width: auto;
        background: none;
    }
    .popup_wrap .popup4 .sub_popup .sub_pop_close::before {
        display: none;
    }
    .popup_wrap .popup4 .sub_popup .sub_pop_close .icon {
        display: block;
        width: 20px;
        height: 20px;
    }
    .popup_wrap .popup4 .sub_popup > .sub_inner .segment {
        max-height: 50vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 25px;
    }
    .popup_wrap .popup4 .sub_popup .segment img {
        max-width: 450px;
    }
    .popup_wrap .popup > .inner .toDo-list-none {
        height: 60vh;
    }
}

@media (max-width: 500px) {
    .popup_wrap .popup > .inner > .segment,
    .popup_wrap .popup > .inner .toDo-list-none{
        height: calc(var(--vh, 1vh) * 58);
    }
}

/* 모바일 가로모드 */
@media all and (pointer: coarse) and (max-width: 920px) and (max-height: 500px) and (orientation: landscape) {
    .popup_wrap .popup > .inner > .segment {
        height: calc((var(--vh, 1vh) * 100) - 190px);
    }
}