@charset "utf-8";
/* pretendard */
@font-face{font-family:"Pretendard";src:local(Pretendard-Thin),url(../font/Pretendard-Thin.woff2) format('woff2'),url(../font/Pretendard-Thin.woff) format('woff');font-weight:100;}
@font-face{font-family:"Pretendard";src:local(Pretendard-Light),url(../font/Pretendard-Light.woff2) format('woff2'),url(../font/Pretendard-Light.woff) format('woff');font-weight:200;}
@font-face{font-family:"Pretendard";src:local(Pretendard-ExtraLight),url(../font/Pretendard-ExtraLight.woff2) format('woff2'),url(../font/Pretendard-ExtraLight.woff) format('woff');font-weight:300;}
@font-face{font-family:"Pretendard";src:local(Pretendard-Regular),url(../font/Pretendard-Regular.woff2) format('woff2'),url(../font/Pretendard-Regular.woff) format('woff');font-weight:400;}
@font-face{font-family:"Pretendard";src:local(Pretendard-Medium),url(../font/Pretendard-Medium.woff2) format('woff2'),url(../font/Pretendard-Medium.woff) format('woff');font-weight:500;}
@font-face{font-family:"Pretendard";src:local(Pretendard-SemiBold),url(../font/Pretendard-SemiBold.woff2) format('woff2'),url(../font/Pretendard-SemiBold.woff) format('woff');font-weight:600;}
@font-face{font-family:"Pretendard";src:local(Pretendard-Bold),url(../font/Pretendard-Bold.woff2) format('woff2'),url(../font/Pretendard-Bold.woff) format('woff');font-weight:700;}
@font-face{font-family:"Pretendard";src:local(Pretendard-ExtraBold),url(../font/Pretendard-ExtraBold.woff2) format('woff2'),url(../font/Pretendard-ExtraBold.woff) format('woff');font-weight:800;}
@font-face{font-family:"Pretendard";src:local(Pretendard-Black),url(../font/Pretendard-Black.woff2) format('woff2'),url(../font/Pretendard-Black.woff) format('woff');font-weight:900;}


.chatArea {color: var(--grey-darken4);text-decoration: none;}
.chatArea, .chatArea * {margin:0;padding:0;box-sizing : border-box;word-break: keep-all; line-height: 1.4; border:none;font-family: "Pretendard", sans-serif !important; letter-spacing: -0.025em;}
.chatArea ul,.chatArea ol,.chatArea li{list-style:none;box-sizing: border-box;}
.chatArea a {text-decoration: none;display: inline-block; cursor: pointer;}
.chatArea img {max-width: 100%;}

button {background-color: transparent}

/* common */
.primaryTxt{
    color: var(--primary-base) !important;
}
.secondaryTxt{
    color: var(--secondary-base) !important;
}
.greyTxt{
    color: var(--grey-base) !important;
}
.dangerTxt{
    color: var(--danger-base) !important;
}
.infoTxt{
    color: var(--info-base) !important;
}

.floating{
    position: fixed;
    bottom: 60px;
    right: 30px;
    z-index: 50;
}
.floatingBtn{
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    gap: 4px 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
    transition: var(--transition);
}
.quickMenuBtn{
    background-color: var(--primary-base);
    color: #fff;
}
.aiBtn{
    background-color: #fff;
    position: relative;
}
.aiBtn .iconAi{
    width: 48px;
    height: 48px;
    background-image: url(../image/icon-ai.gif);
}
.aiBtn>span{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    padding-top: 8px;
    width: 100%;
    text-align: center;
    transform: translateY(100%);
}
.quickMenuArea{
    display: none;
    position: relative;
}
.quickMenuW{
    position: absolute;
    right: 112px;
    top: 3px;
    display: flex;
    gap: 0 16px;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
}
.quickMenu{
    display: block;
    height: 78px;
    width: 206px;
    background-color: #fff;
    padding: 12px 20px;
    border: 1px solid var(--border-color);
    transition: var(--transition);
}
.quickMenuArea.active .quickMenuW{
    z-index: 9999;
    opacity: 1;
    visibility: visible;
}
.quickMenu>p{
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    margin-top: 8px;
}
.iconQick1{
    background-image: url(../image/quick-icon1.svg);
}
.iconQick2{
    background-image: url(../image/quick-icon2.svg);
}
.iconQick3{
    background-image: url(../image/quick-icon3.svg);
}
.iconQick4{
    background-image: url(../image/quick-icon4.svg);
}
.quickMenuMoW{
    display: none;
}
@media screen and (min-width: 1201px){
    .quickMenuBtn:hover{
        background-color: var(--primary-darken2);
    }
    .aiBtn:hover{
        background-color: var(--grey-lighten4);
    }
}

.ir {
    position: absolute;
    text-indent: -9999em;
    visibility: hidden;
}

html.overflowHidden{
    height: 100vh;
    max-height: var(--view-height);
    overflow: hidden;
}

/* Typography */
.black{
    font-weight: 900;
}
.extrabold{
    font-weight: 800;
}
.bold{
    font-weight: 700;
}
.semibold{
    font-weight: 600;
}
.medium{
    font-weight: 500;
}
.regular{
    font-weight: 400;
}

.indent{
    padding-left: 11px;
    text-indent: -11px;
}
.underline{
    text-decoration: underline;
}

@media (max-width: 1200px){
}
@media (max-width: 1023px){
}
@media (max-width: 767px){

}
@media (max-width: 500px){
}

/*thumb*/
.thumbW{
    position: relative;
    display: block;
    width: 100%;
}
.thumb{
    position: relative;
    height: 0;
    width: 100%;
    padding-top: calc((160 / 270) * 100%);
    overflow: hidden;
}
.thumbW:has(.thumb.rounded){
    border-radius: 20px;
}
.thumb.rounded{
    border-radius: 20px;
}
.thumbInner{
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: cover;
    top: 0;
    left: 0;
    z-index: 1;
}
.thumbW.sm .thumb::after,
.thumbW:not(.sm)::after{
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: inherit;
    top: 0;
    left: 0;
    box-sizing: border-box;
    border: 2px solid var(--primary-base);
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 2;
}
@media screen and (min-width: 1201px){
    .thumbW.sm:hover .thumb::after,
    .thumbW:not(.sm):hover::after{
        opacity: 1;
        visibility: visible;
    }
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
    .thumb.thumbVideo::before,
    .thumb.thumbVideo.lg::before{
        width: 58px;
        height: 58px;
    }
}
@media screen and (max-width: 500px){
}

/* 챗봇 */
.chatArea{
    display: block !important;
    position: fixed;
    padding: 30px 142px;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transform: translate(0, 0);
    transition: all .25s ease-in-out, backgroundColor .01s ease-in-out, transform .15s ease-out;
}
html:has(.chatArea.active:not(.min)){
    height: 100vh;
    max-height: var(--view-height);
    overflow: hidden;
}
.chatArea.active{
    opacity: 1;
    visibility: visible;
    /*z-index: 999;*/
    z-index: 99999;
}
.chatArea:not(.min){
    transform: translate(0, 0) !important;
}
.floatingBtn.aiClose{
    background-color: #fff;
    position: fixed;
    bottom: 60px;
    right: 30px;
}
.chat{
    width: 100%;
    max-width: var(--container);
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
}
.chatHead{
    width: 100%;
    height: 88px;
    padding: 0 40px;
    position: relative;
    box-shadow: 0 3px 10px rgba(0, 76, 174, .08);
    display: flex;
    gap: 0 18px;
    align-items: center;
    background-color: #fff;
    transition: var(--transition);
}
.chatArea .iconAi{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-size: 32px auto;
    background-color: var(--primary-lighten5);
    border: 1px solid var(--primary-lighten3);
}
.chatHeadTit{
    display: flex;
    align-items: center;
    gap: 0 8px;
}
.chatHeadTit>h2{
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
}
.chatHeadTit>p{
    font-size: 14px;
    line-height: 1;
}
.chatHeadTitW>p{
    font-size: 14px;
    line-height: 1;
    margin-top: 8px;
}
.chatHeadTitW>p>br{
    display: none;
}
.chatHeadBtnW{
    margin-left: auto;
    display: flex;
    gap: 0 16px;
}
.chatArea .chatHeadBtn{
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex;
    margin: 0 !important;
    align-items: center;
    justify-content: center;
    background-color: var(--grey-lighten5);
    transition: var(--transition);
}
.chatArea .chatHeadBtn.primary{
    background-color: var(--primary-base);
}

.chatArea.min{
    padding: 0;
    bottom: 30px;
    right: 142px;
    width: 360px;
    height: calc(var(--view-height) - 60px - var(--header-height));
    box-shadow: 0 3px 20px rgba(0, 76, 174, .2);
    background-color: transparent;
}
.chatArea.min .floatingBtn.aiClose{
    opacity: 0;
    visibility: hidden;
}
.chatArea.min .chatHead{
    height: 108px;
    padding: 0 16px;
    gap: 0 8px;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: move;
}
.chatArea.min .chatHead{
    height: 108px;
    padding: 0 16px;
    gap: 0 8px;
}
.chatArea.min .iconAi{
    width: 38px;
    min-width: 38px;
    height: 38px;
    background-size: 24px auto;
    margin-bottom: 44px;
}
.chatArea.min .chatHeadTit{
    display: block;
    margin-bottom: 44px;
}
.chatArea.min .chatHeadTit>h2{
    font-size: 16px;
}
.chatArea.min .chatHeadTit>p{
    font-size: 14px;
    margin-top: 4px;
}
.chatArea.min .chatHeadTitW>p{
    font-size: 14px;
    position: absolute;
    bottom: 13px;
    left: 16px;
    line-height: 18px;
}
.chatArea.min .chatHeadTitW>p>br{
    display: block;
}
.chatArea.min .chatHeadBtnW{
    gap: 0 8px;
    margin-bottom: 44px;
}
.chatArea.min .chatHeadBtn{
    width: 38px;
    height: 38px;
}

@media screen and (min-width: 1201px){
    .floatingBtn.aiClose:hover{
        background-color: var(--grey-lighten4);
    }
    .chatArea .chatHeadBtn:hover{
        background-color: var(--grey-lighten3);
    }
    .chatArea .chatHeadBtn.primary:hover{
        background-color: var(--primary-darken2);
    }
    .chatArea.hide:not(.min) .chatHead,
    .chatArea.hide:not(.min) .chatBody{
        opacity: 0;
        visibility: hidden;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
    html:has(.chatArea.min.active){
        height: 100vh;
        max-height: var(--view-height);
        overflow: hidden;
    }
    .chatArea.min {
        padding: var(--container-gutter);
        bottom: 0;
        right: 0;
        width: 100%;
        height: var(--view-height);
        box-shadow: none;
        background-color: rgba(0, 0, 0, .4);
    }
    .chatArea.min .chatHead{
        cursor: default;
    }
    .chatArea{
        transform: translate(0, 0) !important;
    }
    .aiScale,
    .chatArea>.aiClose{
        display: none;
    }
}
@media screen and (max-width: 1023px){
    .chatArea.min .chatHeadBtn.aiScale{
        display: none;
    }
}
@media screen and (max-width: 767px){
    .chatArea.min{
        padding: 0;
    }
}
@media screen and (max-width: 500px){
}
@media screen and (max-width: 374px){
}


.chatBody{
    height: calc(100% - 212px);
    max-height: calc(100% - 212px);
    padding: 40px 30px 40px 40px;
    font-size: 16px;
    background-color: var(--primary-lighten5);
    transition: var(--transition);
}
.chatBodyInner{
    padding-right: 10px;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.chatBodyInner::-webkit-scrollbar {
    width: 5px;
}
.chatBodyInner::-webkit-scrollbar-track {
    background-color:var(--primary-lighten5);
    border-radius: 999px;
}
.chatBodyInner::-webkit-scrollbar-thumb {
    background-color: var(--primary-base);
    border-radius: 999px;
}
.chatBodyInner::-webkit-scrollbar-button {
    display: none;
}

.chatSpeechArea + .chatSpeechArea{
    margin-top: 30px;
}

.chatSpeechW{
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0 16px;
}
.chatSpeechArea.que .chatSpeechW{
    flex-direction: row-reverse;
}
.chatSpeech{
    max-width: 58%;
}
.chatSpeechArea.ai .chatSpeech{
    background-color: #fff;
    padding: 30px;
    box-shadow: 0 4px 16px rgba(0, 76, 174, .08);
}
.chatSpeechArea.que .chatSpeech{
    position: relative;
    margin-right: 13px;
    padding: 24px 30px;
    background-color: var(--primary-lighten3);
    width: fit-content;
}
.chatSpeechArea.que .chatSpeech::before{
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 18px;
    background-image: url(../image/icon-chat-speech.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    top: 50%;
    right: -13px;
    transform: translateY(-50%);
}
.chatSpeechHead{
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 0 10px;
}
.chatSpeechHead .iconAi{
    background-color: #fff;
}
.chatSpeechHead>strong{
    display: block;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    color: var(--primary-base);
}
.chatSpeech>p{
    font-size: 16px;
    font-weight: 500;
}
.chatSpeech>p + p{
    margin-top: 8px;
}
.chatTime{
    line-height: 1;
    display: block;
    font-size: 15px;
    color: var(--grey-base);
}
.chatSpeechBottom{
    display: flex;
    gap: 0 16px;
    margin-top: 24px;
}
.thumbBtn{
    height: 36px;
    padding: 0 14px;
    background-color: #fff;
    border-radius: 999px;
    border: 1px solid var(--border-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 6px;
    transition: var(--transition);
    font-size: 16px;
    font-weight: 500;
}
.thumbBtn.active{
    background-color: var(--primary-darken3);
    border-color: var(--primary-darken3);
    color: #fff;
}
.chatSpeechW.slide{
    position: relative;
}
.chatSpeechW.slide .chatSpeech{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 13px);
}
.chatSpeechW.slide p + .chatSlide{
    margin-top: 24px;
}
.chatSlide .swiper-container{
    overflow: hidden;
}
.chatSpeechW.slide .chatTime{
    position: absolute;
    bottom: -16px;
    right: 13px;
    transform: translateY(100%);
}
.chatEduContents{
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 0 16px;
}
.chatEduContents>.label{
    flex: 0 0 auto;
    min-width: 56px;
}
.chatEduContents>strong{
    flex-basis: 0;
    flex-grow: 1;
    max-width: calc(100% - 72px);
    display: block;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
}
.chatSlide{
    position: relative;
}
.chatSlide::after{
    content: "";
    display: block;
    position: absolute;
    width: 120px;
    height: 100%;
    top: 0;
    right: 0;
    background-image: linear-gradient(to right, transparent, #fff);
    z-index: 3;
}
.chatSlide .slideControl{
    position: absolute;
    height: calc(100% - 42px);
    top: 0;
    right: 0;
    z-index: 5;
    align-items: center;
}
.chatSpeechW.edu .chatSpeech{
    width: 484px;
}
.chatEduW{
    padding: 20px 24px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    width: 100%;
}
.chatSpeech p + .chatEduW{
    margin-top: 24px;
}
.chatEdu{
    font-size: 13px;
    font-weight: 500;
}
.chatEduW>.chatEdu:nth-child(1){
    --primary-base: var(--secondary-darken1);
    --primary-lighten4: var(--secondary-lighten4);
}
.chatEduW>.chatEdu:nth-child(2){
    --primary-base: var(--orange-base);
    --primary-lighten4: var(--orange-lighten5);
}
.chatEduW>.chatEdu:nth-child(3){
    --primary-base: var(--grey-darken4);
    --primary-lighten4: var(--grey-lighten4);
}
.chatEdu + .chatEdu{
    margin-top: 28px;
}
.chatEduHead{
    display: flex;
    align-items: flex-start;
    gap: 0 6px;
    margin-bottom: 14px;
}
.chatEduHead>strong{
    font-size: 14px;
    font-weight: 600;
    display: block;
    margin-top: 3px;
    color: var(--primary-base);
}
.chatEdu>p + .progressArea{
    margin-top: 16px;
}
.progressW{
    display: flex;
    align-items: center;
    gap: 0 10px;
}
.progressW + .progressW{
    margin-top: 8px;
}
.chatEdu .progressW>p:first-child{
    min-width: 90px;
}
.progress{
    flex-basis: 0;
    flex-grow: 1;
    max-width: 160px;
    height: 6px;
    border-radius: 999px;
    background-color: var(--primary-lighten4);
    overflow: hidden;
    position: relative;
}
.progressInner{
    position: absolute;
    height: 100%;
    border-radius: 999px;
    background-color: var(--primary-base);
    top: 0;
    left: 0;
}

.chatArea.min .chatBody{
    height: calc(100% - 172px);
    max-height: calc(100% - 172px);
    padding: 20px 10px 20px 16px;
    font-size: 15px;
}
.chatArea.min .chatBodyInner{
    padding-right: 6px;
}

.chatArea.min .chatSpeechArea + .chatSpeechArea{
    margin-top: 20px;
}

.chatArea.min .chatSpeechW{
    display: block;
}
.chatArea.min .chatSpeech{
    max-width: calc(100% - 10px);
}
.chatArea.min .chatSpeechArea.ai .chatSpeech{
    padding: 16px 10px;
}
.chatArea.min .chatSpeechArea.que .chatSpeech{
    padding: 16px 10px;
    margin-right: 10px;
    margin-left: auto;
}
.chatArea.min .chatSpeechArea.que .chatSpeech::before{
    width: 14px;
    height: 14px;
    right: -10px;
}
.chatArea.min .chatSpeechHead{
    margin-bottom: 10px;
}
.chatArea.min .chatSpeechHead .iconAi{
    margin-bottom: 0;
}
.chatArea.min .chatSpeechHead>strong{
    font-size: 15px;
}
.chatArea.min .chatSpeech>p{
    font-size: 15px;
}
.chatArea.min .chatSpeech>p + p{
    margin-top: 4px;
}
.chatArea.min .chatTime{
    font-size: 14px;
    margin-top: 8px;
}
.chatArea.min .chatSpeechArea.que .chatTime{
    text-align: right;
    padding-right: 10px;
}
.chatArea.min .chatSpeechBottom{
    gap: 0 8px;
    margin-top: 16px;
}
.chatArea.min .thumbBtn{
    height: 32px;
    padding: 0 12px;
    gap: 0 4px;
    font-size: 14px;
}
.chatArea.min .chatSpeechW.slide .chatSpeech{
    max-width: calc(100% - 10px);
}
.chatArea.min .chatSpeechW.slide p + .chatSlide{
    margin-top: 16px;
}
.chatArea.min .chatSpeechW.slide .chatTime{
    position: static;
    transform: translateY(0);
}
.chatArea.min .chatEduContents{
    margin-top: 12px;
    gap: 0 8px;
}
.chatArea.min .chatEduContents>.label{
    font-size: 13px;
    min-width: 48px;
}
.chatArea.min .chatEduContents>strong{
    max-width: calc(100% - 56px);
    font-size: 15px;
}
.chatArea.min .chatSlide{
    overflow: hidden;
}
.chatArea.min .chatSlide::after{
    width: 60px;
}
.chatArea.min .chatSlide .swiper-container{
    width: calc(100% - 80px);
    overflow: unset;
}
.chatArea.min .chatSlide .slideControl{
    height: calc(100% - 42px);
}
.chatArea.min .chatSpeechW.edu .chatSpeech{
    width: 100%
}
.chatArea.min .chatEduW{
    padding: 10px;
}
.chatArea.min .chatSpeech p + .chatEduW{
    margin-top: 10px;
}
.chatArea.min .chatEdu + .chatEdu{
    margin-top: 16px;
}
.chatArea.min .chatEduHead{
    margin-bottom: 10px;
}
.chatArea.min .chatEdu>p + .progressArea{
    margin-top: 10px;
}
.chatArea.min .progressW{
    gap: 0 8px;
    flex-wrap: wrap;
}
.chatArea.min .progressW + .progressW{
    margin-top: 4px;
}
.chatArea.min .progress{
    max-width: calc(100% - 98px);
}
.chatArea.min .progressW>p:last-child{
    flex: 1 1 100%;
    text-align: right;
}

@media screen and (min-width: 1201px){
    .thumbBtn:hover{
        background-color: var(--primary-darken3);
        border-color: var(--primary-darken3);
        color: #fff;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
    .chatArea.min .chatSlide::after{
        width: calc(33.333% - 7px);
    }
    .chatArea.min .chatSlide .swiper-container{
        width: calc(33.333% - 7px);
    }
}
@media screen and (max-width: 1023px){
    .chatArea.min .chatSlide::after{
        width: calc(50% - 10px);
    }
    .chatArea.min .chatSlide .swiper-container{
        width: calc(50% - 10px);
    }
}
@media screen and (max-width: 767px){
    .chatArea.min .chatEduContents{
        display: block;
    }
    .chatArea.min .chatEduContents>strong{
        margin-top: 8px;
    }
    .chatArea.min .chatSlide .slideControl{
        height: calc(100% - 64px);
    }
    .chatArea.min .chatSlide::after{
        width: 60px;
    }
    .chatArea.min .chatSlide .swiper-container{
        width: calc(100% - 80px);
    }
}
@media screen and (max-width: 500px){
}

.chatFoot{
    --chat-btn: 54px;

    position: relative;
    height: 124px;
    background-color: #fff;
}
.chatQArea{
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(var(--view-height) - 332px);
    background-color: #fff;
    border-top: 1px solid var(--primary-lighten3);
    transform: translateY(0);
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease-in-out;
}
.chatFoot.active .chatQArea{
    transform: translateY(-100%);
    opacity: 1;
    visibility: visible;
}
.chatQW{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 38px 20px 38px 38px;
}
.aiQClose{
    position: absolute;
    width: var(--chat-btn);
    height: var(--chat-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    top: 34px;
    right: 34px;
    transition: var(--transition);
}
.chatQList{
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 74px;
}
.chatQList::-webkit-scrollbar {
    width: 5px;
}
.chatQList::-webkit-scrollbar-track {
    background-color:var(--primary-lighten5);
    border-radius: 999px;
}
.chatQList::-webkit-scrollbar-thumb {
    background-color: var(--primary-base);
    border-radius: 999px;
}
.chatQList::-webkit-scrollbar-button {
    display: none;
}
.chatQ + .chatQ{
    margin-top: 44px;
}
.chatQHead{
    display: flex;
    align-items: flex-start;
    gap: 0 12px;
    margin-bottom: 14px;
}
.chatQHead>.icon{
    width: 40px;
    min-width: 40px;
    height: 40px;
    flex: 0 0 auto;
}
.chatQHead>strong{
    display: block;
    flex-basis: 0;
    flex-grow: 1;
    font-size: 20px;
    font-weight: 600;
    margin-top: 6px;
}
.chatQBtnW{
    display: flex;
    flex-wrap: wrap;
}
.chatQBtn{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 38px;
    font-size: 18px;
    transition: var(--transition);
}
.chatQLabel{
    gap: 16px;
}
.chatQBtnLabel{
    flex: 0 0 auto;
    padding: 0 14px;
    border-radius: 999px !important;
    border: 0 !important;
    background-color: var(--primary-lighten5) !important;
    font-weight: 500;
    color: var(--primary-base) !important;
}
.chatQTxt{
    padding: 30px;
    gap: 20px;
    background-color: var(--grey-lighten5);
}
.chatQBtnTxt{
    flex: 1 1 calc(50% - 10px);
    max-width: calc(50% - 10px);
    width: calc(50% - 10px);
    padding: 0 8px;
    color: var(--grey-base);
    font-weight: 600;
    text-align: left;
    background-color: transparent;
}
.chatFootInner{
    position: relative;
    z-index: 10;
    padding: 0 40px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0 20px;
    background-color: #fff;
    box-shadow: 0 -3px 10px rgba(0, 76, 174, .08);
}
.hamBtnBasic{
    flex: 0 0 auto;
    position: relative;
    width: var(--chat-btn);
    height: var(--chat-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: transparent;
    transition: var(--transition);
}
.hamBtnBasicLine::before,
.hamBtnBasicLine::after,
.hamBtnBasicLine{
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 999px;
    background-color: var(--grey-base);
}
.hamBtnBasicLine{
    position: relative;
    transition: var(--transition);
}
.hamBtnBasicLine::before,
.hamBtnBasicLine::after{
    content: "";
    position: absolute;
    left: 0;
}
.hamBtnBasicLine::before{
    top: -8px;
    transform: rotate(0);
    transition: .15s transform ease-out, .15s .15s top ease-out;
}
.hamBtnBasicLine::after{
    bottom: -8px;
    transition: .15s transform ease-out, .15s .15s bottom ease-out;
}
.hamBtnBasic.active .hamBtnBasicLine{
    background-color: transparent;
}
.hamBtnBasic.active .hamBtnBasicLine::before{
    top: 0;
    transform: rotate(45deg);
    transition: .15s top ease-out, .15s .15s transform ease-out;
}
.hamBtnBasic.active .hamBtnBasicLine::after{
    bottom: 0;
    transform: rotate(-45deg);
    transition: .15s bottom ease-out, .15s .15s transform ease-out;
}
.chatFootCenter{
    flex-basis: 0;
    flex-grow: 1;
    position: relative;
}
.chatFootCenter::after{
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + 40px);
    height: 74px;
    top: 27px;
    left: -20px;
    z-index: 9;
    background-color: #fff;
}
.chatFootCenter>p{
    position: relative;
    z-index: 10;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1;
}
.chatFootCenter>p>br{
    display: none;
}
.chatInput{
    width: 100%;
    height: var(--chat-btn) !important;
    background-color: var(--primary-lighten5);
    border: 1px solid var(--primary-lighten3);
    border-radius: 999px;
    padding: 0 40px;
    font-size: 18px;
    color: var(--grey-darken4);
    font-weight: 500;
    position: relative;
    z-index: 10;
}
.ui-input-text input.chatInput{
    width: 100%;
    height: var(--chat-btn) !important;
    background-color: var(--primary-lighten5);
    border: 1px solid var(--primary-lighten3);
    border-radius: 999px;
    padding: 0 40px;
    font-size: 18px;
    color: var(--grey-darken4);
    font-weight: 500;
    position: relative;
    z-index: 10;
}
.chatArea .ui-body-inherit{
    border: 0 !important;
    border-radius: 0 !important;
    text-shadow: none;
    margin: 0;
    box-shadow: none !important;
}
.chatArea.min .ui-input-text input.chatInput{
    padding: 0 16px;
    font-size: 15px;
}
.chatInput::placeholder{
    color: var(--grey-darken4);
}
.chatHistoryArea{
    position: absolute;
    bottom: calc(var(--chat-btn) / 2);
    left: 0;
    z-index: 5;
    width: 100%;
    background-color: #fff;
    padding: 10px 30px 72px 40px;
    border-radius: 8px 8px 0 0;
    border: 1px solid var(--primary-lighten3);
    box-shadow: 0 4px 10px rgba(0, 76, 174, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: 0.35s ease-in-out;
}
.chatHistoryArea:has(.chatHistory:focus-visible, .chatHistoryClose:focus-visible, .chatHistoryClose:focus),
.chatInput:focus + .chatHistoryArea,
.chatInput:focus-visible + .chatHistoryArea{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.chatHistoryW{
    display: block;
    padding-right: 10px;
    max-height: 384px;
    overflow-x: hidden;
    overflow-y: auto;
}
.chatHistoryW::-webkit-scrollbar {
    width: 5px;
}
.chatHistoryW::-webkit-scrollbar-track {
    background-color:var(--primary-lighten5);
    border-radius: 999px;
}
.chatHistoryW::-webkit-scrollbar-thumb {
    background-color: var(--primary-base);
    border-radius: 999px;
}
.chatHistoryW::-webkit-scrollbar-button {
    display: none;
}
.chatHistoryW>li{
    display: flex;
    align-items: center;
    gap: 0 8px;
    height: 64px;
}
.chatHistoryW>li + li{
    border-top: 1px solid var(--border-color);
}
.chatSend{
    flex: 0 0 auto;
    width: var(--chat-btn) !important;
    height: var(--chat-btn);
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    background-color: var(--primary-base) !important;
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    transition: var(--transition);
}
.chatHistory{
    flex-basis: 0;
    flex-grow: 1;
    text-align: left;
    padding: 8px 0 8px 42px;
    font-size: 16px;
    font-weight: 500;
    max-width: calc(100% - 32px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    position: relative;
    transition: var(--transition);
}
.chatHistory::before{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url(../image/icon-history-grey.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.chatHistoryClose{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.chatArea.min .chatFoot{
    --chat-btn: 38px;
    height: 104px;
}
.chatArea.min .chatQArea{
    height: calc(var(--view-height) - 240px - var(--header-height));
}
.chatArea.min .chatQW{
    padding: 20px 10px 20px 16px;
}
.chatArea.min .aiQClose{
    width: 32px;
    height: 32px;
    top: 16px;
    right: 20px;
}
.chatArea.min .aiQClose>.icon{
    width: 24px;
    height: 24px;
}
.chatArea.min .chatQList{
    padding-right: 10px;
}
.chatArea.min .chatQ + .chatQ{
    margin-top: 20px;
}
.chatArea.min .chatQHead{
    gap: 0 8px;
    margin-bottom: 10px;
}
.chatArea.min .chatQHead>.icon{
    width: 24px;
    min-width: 24px;
    height: 24px;
}
.chatArea.min .chatQHead>strong{
    font-size: 16px;
    margin-top: 2px;
}
.chatArea.min .chatQBtn{
    height: 32px;
    font-size: 15px;
}
.chatArea.min .chatQLabel{
    gap: 8px;
}
.chatArea.min .chatQBtnLabel{
    padding: 0 10px;
}
.chatArea.min .chatQTxt{
    gap: 2px 8px;
    padding: 10px 6px;
}
.chatArea.min .chatQBtnTxt{
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    min-height: 32px;
    padding: 4px 10px;
    height: auto;
}
.chatArea.min .chatFootInner{
    padding: 0 16px;
    gap: 0 6px;
}
.chatArea.min .hamBtnBasic{
    position: relative;
    z-index: 15;
}
.chatArea.min .hamBtnBasicLine::before,
.chatArea.min .hamBtnBasicLine::after,
.chatArea.min .hamBtnBasicLine{
    width: 20px;
    height: 2px;
}
.chatArea.min .hamBtnBasicLine::before{
    top: -6px;
}
.chatArea.min .hamBtnBasicLine::after{
    bottom: -6px;
}
.chatArea.min .hamBtnBasic.active .hamBtnBasicLine::before{
    top: 0;
}
.chatArea.min .hamBtnBasic.active .hamBtnBasicLine::after{
    bottom: 0;
}
.chatArea.min .chatFootCenter{
    flex: 1 1 calc(100% - var(--chat-btn) - 8px);
    min-width: calc(100% - var(--chat-btn) - 8px);
}
.chatArea.min .chatFootCenter::after{
    top: 19px;
}
.chatArea.min .chatFootCenter>p{
    font-size: 14px;
    line-height: 18px;
    margin-top: 6px;
}
.chatArea.min .chatFootCenter>p>br{
    display: block;
}
.chatArea.min .chatInput{
    padding: 0 16px;
    font-size: 15px;
}
.chatArea.min .chatHistoryArea{
    padding: 14px 10px 60px 16px;
}
.chatArea.min .chatHistoryW{
    padding-right: 6px;
    max-height: 240px;
}
.chatArea.min .chatHistoryW>li{
    gap: 0 6px;
    height: 40px;
}
.chatArea.min .chatHistory{
    padding: 4px 0 4px 26px;
    font-size: 14px;
}
.chatArea.min .chatHistory::before{
    width: 20px;
    height: 20px;
}
.chatArea.min .chatSend{
    position: relative !important;
    z-index: 15 !important;
    margin-bottom: 42px !important;
}
@media screen and (min-width: 1201px){
    .hamBtnBasic:hover{
        background-color: var(--grey-lighten4);
    }
    .chatSend:hover{
        background-color: var(--primary-darken2) !important;
    }
    .chatHistory:hover{
        color: var(--primary-base);
    }
    .chatHistoryClose:hover{
        background-color: var(--grey-lighten4);
    }
    .aiQClose:hover{
        background-color: var(--grey-lighten4);
    }
    .chatQBtnLabel:hover{
        background-color: var(--primary-base);
        color: #fff;
    }
    .chatQBtnTxt:hover{
        color: var(--primary-base);
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 500px){
}

/*2차 오픈 시 삭제*/
.chatBody{
    height: calc(100% - 312px);
    max-height: calc(100% - 312px);
    padding: 40px 30px 40px 40px;
}
.chatArea.min .chatBody {
    height: calc(100% - 400px);
    max-height: calc(100% - 400px);
}
.chatFoot2{
    background-color: #fff;
    padding: 30px 40px;
    height: 100px;
}
.chatQRow{
    display: flex;
    gap: 0 40px;
}
.chatQRow .chatQHead{
    margin-bottom: 0;
}
.chatArea.min .chatFoot2{
    padding: 20px 16px;
    height: 188px;
}
.chatArea.min .chatQRow{
    display: block;
}
.chatArea.min .chatQRow .chatQHead{
    margin-bottom: 10px;
}
.chatQBtnSlide .swiper-container{
    overflow: hidden;
    width: calc(100% + 16px);
}
.chatQBtnSlide .swiper-slide{
    width: fit-content;
    /* 20250904 추가*/
    height: 32px !important;
}
@media screen and (min-width: 501px){
    .chatQBtnSlide .swiper-wrapper{
        display: flex;
        gap: 18px;
    }
    .chatArea.min .swiper-wrapper{
        display: block;
    }
    .chatArea.min .swiper-slide + .swiper-slide{
        margin-top: 8px;
    }
}
@media screen and (min-width: 1201px){
}
@media screen and (max-width: 1600px){
    .chatArea:not(.min) .chatBody {
        height: calc(100% - 364px);
        max-height: calc(100% - 364px);
    }
    .chatArea:not(.min) .chatFoot2{
        height: 152px;
    }
    .chatArea:not(.min) .chatQRow{
        display: block;
    }
    .chatArea:not(.min) .chatQRow .chatQHead{
        margin-bottom: 14px;
    }
    .chatArea:not(.min) .chatQBtnSlide .swiper-wrapper{
        gap: 10px;
    }
    .chatArea:not(.min) .chatQBtnSlide .chatQBtnLabel{
        font-size: 16px;
    }
}
@media screen and (max-width: 1439px){
}
@media screen and (max-width: 1200px){
}
@media screen and (max-width: 1023px){
}
@media screen and (max-width: 767px){
}
@media screen and (max-width: 500px){
    .chatArea.min .chatBody {
        height: calc(100% - 320px);
        max-height: calc(100% - 320px);
    }
    .chatArea.min .chatFoot2{
        padding: 20px 16px;
        height: 108px;
    }
}

.closeLine{
    display: block;
    position: relative;
    height: 2px;
    width: 18px;
}
.closeLine::before,
.closeLine::after{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 999px;
    top: 0;
    left: 0;
}
.closeLine::before{
    transform: rotate(45deg);
}
.closeLine::after{
    transform: rotate(-45deg);
}