.loaderWrap{
    transition: all 1s ease-in;
}
@media only screen and (max-height:700px) {
    
    section.content .welcomeArea .chatbotBox .chatBox{
        margin-top: unset;
    }
    .sortBox{
        display: none;
    }

}
@media only screen and (max-height:650px) {
    nav .contentArea{
        overflow-y: auto;
        display: block;
    }
    nav .contentArea .bottomBox{
        overflow-y: unset;
        height: fit-content;
    }
    section.content[data-state="welcome"] .welcomeArea{
        height: 100%;
        overflow: hidden;
        overflow-y: auto;
        padding: 40px 0;
    }
    section.content .welcomeArea > .wrap{
        height: fit-content;
    }
}
@media only screen and (max-width:1080px) {
    @media only screen and (max-height:650px) {
        
        body.headerON nav .titleArea{
            padding-bottom: 12px;
        }
    }
    .ic-hamburger{
        display: block;
    }
    .ic-hamburger.ON div {
        background-color: var(--color-primary);
      }
      .ic-hamburger.ON .top-bun {
        transform: rotate(-45deg) translateX(-4px) translateY(4.5px);
        margin-top: 0;
      }
      .ic-hamburger.ON .bottom-bun {
        opacity: 0;
      }
      .ic-hamburger.ON .meat {
        transform: rotate(45deg) translateX(3px) translateY(3px);
        margin-top: 0;
      }
      
      .ic-hamburger.ON + .nav {
        top: 0;
        transform: scale(1);
      }
    
    nav {
        z-index: 99;
        position: fixed;

        height: unset;
    }
    nav .titleArea{
        padding-top: 12px;
    }
    .loaderWrap{
        width: 100%;
    }
    section.content{
        padding-top: 68px;
    }
    body:not(.headerON) nav .titleArea {
        position: fixed;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    body:not(.headerON) nav .titleArea .btn {
        width: fit-content;
        gap: 10px;
        padding: 0;
        width: 40px;
        flex: none;
        justify-content: center;
        margin-top: unset;
    }
    body:not(.headerON) nav .titleArea .btn h5{
        display: none;
    }
    body:not(.headerON) nav .contentArea {
        display: none;
    }

    nav .titleArea .btn {

        transition: none;
    }
    body.headerON nav{
        height: 100%;

        width: 90%;
        max-width: 340px;
        box-shadow: 0 0 20px rgba(0,0,0,.1);
    }

    section.content .welcomeArea > .wrap > .titleBox{
        width: 70%;
    }
    
  section.content .welcomeArea > .wrap > .titleBox::after{
    left: -1%;
  }
    section.content .welcomeArea > .wrap > .titleBox::before{
    right: -1%;
      
  
    }
    section.content .welcomeArea > .wrap{
        padding: 0 20px;
        gap: 20px;
    }
    .sortBox{
        display: none;
    }
    section.content .welcomeArea .chatbotBox .chatBox{
        margin-top: unset;
    }
    section.content .welcomeArea .chatbotBox .chatBox .chatList{
        margin-top: 6px;
        margin-bottom: 20px;
    }
    section.content .welcomeArea .chatbotBox{
        max-width: 600px
    }
    .chatbotBox .chatList{
        grid-template-columns: repeat(3, 1fr);
    }
    .chatbotBox .chatList .chatItem:nth-child(n+4){
        display: none;
    }
}
@media only screen and (max-width:600px) {
    html{
        font-size: 10px;
    }

    h1 {
        font-size: 3.4rem;
        line-height: 5rem;
    }
    h2 {
        font-size: 3rem;
        line-height: 3.8rem;
    }
    h3 {
        font-size: 2.4rem;
        line-height: 3rem;
    }
    h4{
        font-size: 2rem;
        line-height: 2.4rem;
    }
    h5{
        font-size: 1.3rem;
        line-height: 1.7rem;
    }
    h6{
        font-size: 1.3rem;
        line-height: 1.6rem;
    }

    .chatbotBox .chatList{
        grid-template-columns: repeat(2, 1fr);
    }
    .chatbotBox .chatList .chatItem:nth-child(n+3){
        display: none;
    }
}