/*Layouts.css
1.직접 만든 레이아웃 또는 커스텀 레이아웃
*/
.overlay-layout {
    overscroll-behavior: none;
}

.frame-layout {
    bottom: -100%;
    position: absolute;
    left: 0;
    transition: bottom .5s ease-in-out;
    background-color: var(--basic-white);
}

.frame-layout.sidebar-frame-layout {
    bottom: initial;
    top: 0;
    left: -100%;
    transition: left 0s;
}

.frame-layout.opened {
    bottom: 0;
    transition: bottom .5s ease-in-out;
}

.frame-layout.h-resize-type-1.full {
    height: 100%;
    max-height: 100%;
}

.frame-layout.h-resize-type-1 {
    height: auto;
    max-height: 100%;
}

.frame-layout.h-resize-type-1 .frame-body {
    max-height: calc(100vh - 73px);
    overflow-y: auto;
    height: auto;
}

.frame-layout.h-resize-type-1.is-footer .frame-body {
    max-height: calc(75vh - (73px + 96px));
}

.frame-layout.h-resize-type-1 .frame-body::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

.frame-layout.h-resize-type-1 .frame-body::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

.frame-layout.sidebar-frame-layout.opened {
    bottom: initial;
    left: 0;
    transition: left 0s;
}

.footer ul.list-group li {
    background-color: var(--basic-white);
}

.footer ul.list-group li * {
    transition: all 0s;
}

.footer ul.list-group li.active *,
.footer ul.list-group li:hover * {
    color: var(--basic-black) !important;
    transition: all 0s;
}


.footer ul.list-group li:hover svg path,
.footer ul.list-group li.active svg path {
    transition: all 0s;
    fill: var(--basic-black) !important;
}

.footer ul.list-group li:nth-child(4) svg path,
.footer ul.list-group li:nth-child(4) svg path,
.footer ul.list-group li:nth-child(5) svg path,
.footer ul.list-group li:nth-child(5) svg path {
    transition: all 0s;
    fill: none !important;
    stroke: var(--basic-gray-medium) !important;
}

.footer ul.list-group li:hover:nth-child(4) svg path,
.footer ul.list-group li.active:nth-child(4) svg path,
.footer ul.list-group li:hover:nth-child(5) svg path,
.footer ul.list-group li.active:nth-child(5) svg path {
    transition: all 0s;
    fill: none !important;
    stroke: var(--basic-black) !important;
}


.content-wrapper {
    padding-bottom: 62px;
}

/*반응형 CSS*/
/* 가로 반응형 */
@media (min-width: 320px) {
    .frame-layout,
    .footer {
        max-width: 500px;
        width: 100%;
    }

    .frame-layout.sidebar-frame-layout {
        width: 100%;
        max-width: 345px;
    }

    .content-wrapper {
        max-width: 500px;
        min-width: initial;
    }
}

@media (min-width: 576px) {
    .content-wrapper {
        max-width: 500px;
        min-width: 500px;
    }
}

@media (min-width: 768px) {
}

@media (min-width: 992px) {
    .frame-layout,
    .footer {
        width: calc(500px - 24px);
    }

    .frame-layout.sidebar-frame-layout {
        width: 100%;
        max-width: 345px;
    }
}

@media (min-width: 1200px) {
}

@media (min-width: 1400px) {
}
