body ,html,body > *{
    overflow: hidden;

}
body {
    display: flex;
    flex-direction: row;
    height:  calc((var(--vh, 1vh) * 100));
}
body > * {
    height: 100%;
}




nav {
    width: 260px;
    border-right: 1px solid #eee;
    background-color: #fff;
}
nav > .wrap{
    height: 100%;
}
nav > .wrap,
nav .contentArea{
    display: flex;
    flex-direction: column;
}
    nav .contentArea,
    nav .contentArea .bottomBox {
        flex: 1;
        overflow: hidden;
    }
nav .titleArea,
nav .contentArea .topBox,
nav .contentArea .bottomBox{
    padding: 20px;

}
nav .contentArea .topBox{
    padding-top: unset;
}
nav .titleArea .control,
nav div.title,
nav .chatList li.content > button {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2px;
    width: 100%;
}
nav .titleArea .control{
    position: relative;
    gap: 12px;
    height: 40px;
}
nav .titleArea .control .logo {
    display: block;
    flex: 1;
    height: 32px;
    /* overflow: hidden; */
    background-repeat: no-repeat;
    background-size: auto 100%;
    /* background-image: url(../resources/logoB.png); */

}
nav .titleArea .control .logo video{
    position: relative;
    height: 72px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    left: -10px;
  clip-path: inset(3px 3px);

}
nav .titleArea .btn {
    position: relative;
    z-index: 2;
    margin-top: 12px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}
nav .titleArea .btn .icon {
    width: 20px;
    height: 20px;
}
    .ic-chat {
        background-image: url(../resources/icon-chat.png);
    }



nav .contentArea .bottomBox{
    background-color: #f5f5f5;
    overflow-y: auto;    
    padding-right: 12px;
}

nav .chatList li {
    margin-bottom: 6px;
}

nav div.title {
    justify-content: space-between;
    margin-top: 12px;
    margin-bottom: 6px;
}
    nav div.title:nth-child(1) {margin-top: unset;}

nav div.title h5 {
    font-weight: 800;
}
nav div.title h6 {
    color: #999;
}

nav div.title .icon {
    width: 24px;
    height: 24px;
    background-size: 14px auto;
}
    .ic-refresh {
        background-image: url(../resources/icon-refresh.png);
    }
nav .chatList .content .label {
    height: 24px;
    line-height: 24px;
    font-size: .9rem;
    padding: 0 8px;
    border-radius: 12px;
    background-color: #eee;
    color: #555;
}
    nav .chatList .content .label[data-cate="과학"]{background-color: #cce2cb; color: #333;}
    nav .chatList .content .label[data-cate="국어"]{background-color: #ffcdb6; color: #333;}
    nav .chatList .content .label[data-cate="기술"]{background-color: #55cbcd; color: #fff;}
    nav .chatList .content .label[data-cate="도덕"]{background-color: #dfa5d5; color: #fff;}
    nav .chatList .content .label[data-cate="범교과"]{background-color: #afc0ee; color: #fff;}
    nav .chatList .content .label[data-cate="사회"]{background-color: #97c1a9; color: #fff;}
    nav .chatList .content .label[data-cate="상업경제"]{background-color: #fccfca; color: #333;}
    nav .chatList .content .label[data-cate="수학"]{background-color: #f6eac2; color: #333;}
    nav .chatList .content .label[data-cate="실과"]{background-color: #fca4b2; color: #fff;}
    nav .chatList .content .label[data-cate="역사"]{background-color: #f6c465; color: #333;}
    nav .chatList .content .label[data-cate="영어"]{background-color: #5dacdb; color: #fff;}
    nav .chatList .content .label[data-cate="음악"]{background-color: #7dced2; color: #333;}
    nav .chatList .content .label[data-cate="일본어"]{background-color: #accdd4; color: #333;}
    nav .chatList .content .label[data-cate="체육"]{background-color: #6b845c; color: #fff;}
    nav .chatList .content .label[data-cate="통합교과"]{background-color: #5299b9; color: #fff;}
    nav .chatList .content .label[data-cate="통합과학"]{background-color: #497662; color: #fff;}
    nav .chatList .content .label[data-cate="정치와법"]{background-color: #bbce8e; color: #333;}
    nav .chatList .content .label[data-cate="직업"]{background-color: #c7a5c6; color: #333;}
    nav .chatList .content .label[data-cate="윤리"]{background-color: #fff1a3; color: #333;}
    nav .chatList .content .label[data-cate="미술"]{background-color: #ffa8f3; color: #333;}
    nav .chatList .content .label[data-cate="성공적인 직업생활"]{background-color: #eee; color: #333;}
    nav .chatList .content .label[data-cate="가정"]{background-color: #b8f3b0; color: #333;}
    
nav .chatList .content .icon.ic-category{
    flex: none;
    width: 24px;
    height: 24px;
    background-size: 18px auto;
    /* background-image: url(../resources/chatbot-icon1.png) !important; */
}
nav .chatList .content  .title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    flex: 1;
    text-align: left;
}

nav .chatList .content .icon.ic-arrowR{
    opacity: .3;
    background-size: 8px auto;
    width: 20px;
    height: 20px;
}
    .ic-arrowR {
        background-image: url(../resources/icon-arrowR.png);
    }




.loaderWrap{
    position: fixed;
    z-index: 99;
    width: calc(100% - 260px);
    right: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    backdrop-filter: blur(10px);
    background-color: rgba(255,255,255, .7);
    background-image: url(../resources/bg-intro5.png);
    background-size: cover;
    background-position: center;
}
body.onload .loaderWrap{
    width: 100%;
}
.loader {
    position: relative;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: linear-gradient(var(--color-primary), var(--color-primaryLight), var(--color-orange1));
    animation: loader 2s linear infinite;
}

@keyframes loader {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(var(--color-primary), var(--color-primaryLight), var(--color-orange1));
}

.loader span:nth-child(1) {
    filter: blur(5px);
}

.loader span:nth-child(2) {
    filter: blur(10px);
}

.loader span:nth-child(3) {
    filter: blur(25px);
}

.loader span:nth-child(4) {
    filter: blur(50px);
}

.loader:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #fff;
    border: solid var(--color-primaryLight) 10px;
    border-radius: 50%;

}

.loaderWrap{
    overflow: hidden;

}
.loaderWrap:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    background-image: url(../resources/logo-symbol.png);
    background-repeat: no-repeat;
    background-size: auto 100px;
    background-position: center;
}

.loaderWrap.hide {
    opacity: 0;
}

body.onload .loaderWrap.hide{
    height: 0;
}
.loaderWrap.remove {
    z-index: -5;
    transition: none;
}