@charset "utf-8";
/* body */
@media screen and (max-width: 1385px) {
    body.no_scroll {overflow-y: hidden;}
}

/* bg */
#bg {width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #000; visibility: hidden; opacity: 0; transition: all 0.2s;z-index:11;}
#bg.on {opacity: 0.8; visibility: visible;}

/* haeder */
#header {height: 8rem; padding: 0 5.4rem 0 4.5rem; background: #fff; border-bottom: 1px solid #dcdbdb;}
#header .ai_logo {position: absolute; left: 50%; transform: translateX(-50%);}
#header .media_btn .media {height: 3rem;}
#header .media_btn .arr {transition: all 0.3s;}
#header .media_btn:hover .arr {animation: arr_motion 0.5s 2;}
@keyframes arr_motion {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(0.5rem);
    }
}
#header .ai_logo img {height: 4rem;}
#header .set_btn img {height: 3rem;}
#header .media_btn .tit {margin: 0 1.1rem 0 1.3rem;}
#header .bn_btn{position:relative;}
#header .bn_btn .badge{
    position: absolute;
    top: 13px;
    right: -7px;
    width: 25px;
    height: 25px;
    display: flex;
    background: #e72488;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    z-index: 5;
    line-height: 1.2;
    border: 2px solid #fff;
}
#header .bn_btn img {height: 2.7rem;}
#header .right_logo {gap: 1.5rem;}

@media screen and (max-width: 1385px) {
    #header {/* background: #2f2f2f; */ border-bottom: 0; padding: 0 3.3rem 0 3.7rem;}
    #header .media_btn .media {height: 3.8rem;}
    #header .set_btn img {height: 3.1rem;}
}

@media screen and (max-width: 768px) {
    #header {padding: 0 1.5rem; height: 7rem;}
    #header .media_btn .media {width: 3rem; height: auto;}
    #header .ai_logo img {width: 14rem; height: auto;}
    #header .right_logo {gap: 1rem;}
    #header .right_logo .set_btn img {width: 2.8rem; height: auto;}
    #header .bn_btn .badge {font-size: 12px; width: 25px; height: 25px;}
}

@media screen and (max-width: 551px) {
    #header .ai_logo {left: 35%;}
}

@media screen and (max-width: 430px) {
    #header {position: fixed; top: 0; left: 0; width: 100%; z-index: 9999;}
    #header .ai_logo {left: 30%;}
    #header .ai_logo img {width: 12rem;}
}

@media screen and (max-width: 380px) {
    #header .ai_logo {left: 29%;}
    #header .ai_logo img {width: 10rem;}
}

@media screen and (max-width: 355px) {
    #header .media_btn .media {width: 2.5rem;}
    #header .ai_logo {left: 27%;}
    #header .ai_logo img {width: 9rem;}
    #header .bn_btn img {height: 2.5rem;}
}

/* cont_wrap */
.cont_wrap {height: calc(100vh - 8rem); display: flex; justify-content: center; position: relative; overflow: hidden;}
.cont_wrap::before {content: ''; position: absolute; top: -12rem; left: 0; width: 100%; height: 45.6rem; background-image: url('../images/bg1.png'); background-position: center; background-repeat: no-repeat; background-size: 100%; z-index: -1;}
.cont_wrap::after {content: ''; position: absolute; bottom: -13.1rem; left: 0; width: 100%; height: 51.2rem; background-image: url('../images/bg2.png'); background-position: center; background-repeat: no-repeat; background-size: 100%; z-index: -1;}
.cont_wrap .cont_area {width: 132.1rem; height: 100%; padding: 4.7rem 0 3rem 0; margin-left: 0; transition: all 0.5s;}
.cont_wrap .cont_area.media {margin-left: calc(100% - 147rem);}
.cont_wrap .busan_logo {width: 13.2rem; height: 3.4rem; background-image: url('/humanframe/theme/busan22/assets/chatbot/images/busan_logo.png'); background-repeat: no-repeat; background-size: 100%; left: 4.5rem; top: 2rem; z-index:11;}
.cont_bx {width: 100%; height: 100%; max-width: 132.1rem; justify-content: flex-end; margin: 0 auto;}

@media screen and (max-width: 1400px) {
    .cont_wrap .cont_area {padding: 4.7rem 3.3rem 3rem 3.7rem;}
    .cont_wrap .cont_area.media {margin-left: 0;}
}

@media screen and (max-width: 1385px) {
    .cont_wrap .cont_area {padding: 3.8rem 3.3rem 2.4rem 3.7rem;}
    .cont_wrap::before {background-image: url('../images/bg1_tab.png'); width: 149.3rem; height: 70.7rem; top: -27.5rem;}
    .cont_wrap::after {background-image: url('../images/bg2_tab.png'); width: 140.1rem; height: 79.2rem; bottom: -48.5rem; left: 0;}
    .cont_wrap .busan_logo {left: 3.7rem;}
}

@media screen and (max-width: 768px) {
    .cont_wrap {height: calc(100dvh - 7rem); }
    .cont_wrap .cont_area {padding: 0;}
    .cont_bx {height: 100%;}
    .cont_wrap .busan_logo {width: 10rem; left: 1.5rem; top: 1.5rem;}
}

@media screen and (max-width: 480px) {
    .cont_wrap {height: 100dvh; padding-top: 7rem;}
    .cont_wrap .busan_logo {top: 8.5rem;}
}

/* 3D boogi */
.boogi_area {width: 100%; justify-content: flex-start; z-index: 1; transition: all 0.5s;}
.boogi_area.media {margin-left: calc(100% - 147rem);}
.boogi_area .boogi {height: 100%; width: 100%;}
.boogi_area .boogi #canvas-container {height: 100%; max-width: 100%;}
 
@media screen and (max-width: 1400px) {
    .boogi_area.media {margin-left: 0;}
}
 
@media screen and (max-width: 1385px) {
    .boogi_area .boogi #canvas-container canvas {max-width: 100%;}
}


/* @media screen and (max-width: 768px) {
    .boogi_area .boogi {width: 32.6rem;}
} */

@media screen and (max-width: 768px) {
    .boogi_area {width: 100%; justify-content: center;}
}

/* chat */
.chat_wrap {width: 64rem; z-index:10;}
.chat_area {padding-right: 0.5rem;max-height: calc(100vh - 28.5rem);min-height: calc(100vh - 28.5rem);overflow-y: auto;overflow-y: scroll;}
.chat_area::-webkit-scrollbar {width: 0.8rem;}
.chat_area::-webkit-scrollbar-thumb {background-color: none; border-radius: 10px; background-clip: padding-box; border: 1px solid rgba(174, 154, 191, 0.6);}
.chat_area::-webkit-scrollbar-track {background-color: transparent;}

@media screen and (max-width: 1385px) {
    .chat_wrap {width: calc(100% - 41.4rem); max-width: 55%;}
    .chat_area {/* max-height: 54.5rem; */ margin-bottom: 2rem;}
}

@media screen and (max-width: 1025px) {
    .chat_wrap {width: 50%;}
}

@media screen and (max-width: 768px) {
    .chat_wrap {position: absolute; top: auto; right: auto; bottom: -3.5rem; left: 0; width: calc(100% + 3rem); height: 60vh; max-width: 100%; padding: 4rem 2rem 2rem 2rem; box-shadow: 0 -0.1rem 1rem rgba(0,0,0,0.32); border-radius: 3rem 3rem 0 0; background: rgba(255,255,255,0.82); transition: height 0.5s;}
    .chat_wrap::before {content: ''; position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%); width: 8rem; height: 0.6rem; background: #959595; border-radius: 1rem;}
    .chat_area {max-height: calc(60vh - 16rem); min-height: calc(60vh - 16rem);}
    .chat_wrap.down {height: 30vh;}
    .chat_wrap.down .chat_area {height: calc(30vh - 16rem); min-height: calc(30vh - 16rem);}
}

/* chat - boogi */
.chat_area .boogi_bx {gap: 2.2rem; margin-bottom: 2.1rem;}
.chat_area .boogi_bx:last-of-type {margin-bottom: 0;}
.chat_area .boogi_bx .boogi_img {width: 6.8rem; height: 6.8rem; flex-shrink: 0; border-radius: 50%; overflow: hidden;}
.chat_area .boogi_bx img {width: 100%; object-fit: cover;}
.chat_area .boogi_bx .text_wrap {width: calc(100% - 8rem);}
.chat_area .boogi_bx .text_bx {width: 100%; max-width: max-content; border-radius: 1rem; background: rgba(255,255,255,0.72); padding: 1.5rem 1.7rem; box-shadow: 0 0 1rem rgb(0 0 0 / 9%); border: 1px solid #e3e3e3; margin-bottom: 1.4rem;}
.chat_area .boogi_bx .text_bx .txt {line-height: 2.4rem;white-space: pre-line;}
.chat_area .boogi_bx .ref_bx .txt {margin-bottom: 2.3rem;}
.chat_area .boogi_bx .ref_bx .list {gap: 1.6rem; margin-bottom: 2.3rem;}
.chat_area .boogi_bx .ref_bx .list li {width: 17.1rem; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;  border-radius: 1.9rem; border: 1px solid #e6027e; color: #e6027e;  padding: 0.8rem 1.2rem 0.8rem 1.5rem; transition: all 0.3s;}
.chat_area .boogi_bx .ref_bx .list li a {transition: all 0.3s;}
.chat_area .boogi_bx .ref_bx .list li:hover {background: #e6027e; color: #fff;}
.chat_area .boogi_bx .ref_bx .list li:hover a {color: #fff;}

/* chat - user */
.chat_area .user_wrap {margin-bottom: 2.1rem;}
.chat_area .user_bx {width: 48.5rem; max-width: max-content; padding: 1.5rem 1.7rem; border-radius: 1rem; background: #8f2eda; box-shadow: 0 0 1rem rgb(0 0 0 / 9%);}
.chat_area .user_bx .txt {line-height: 2.4rem;}

/* chat - time */
.chat_area .time {margin-top: 1rem;}

@media screen and (max-width: 1385px) {
    /* chat - user */
    .chat_area .user_bx {width: 100%;}
}

@media screen and (max-width: 1025px) {
    /* chat - boogi */
    .chat_area .boogi_bx .boogi_img {width: 5rem; height: 5rem;}
    .chat_area .boogi_bx .text_wrap {width: calc(100% - 7.2rem);}
    .chat_area .boogi_bx .text_bx {padding: 1.5rem 2rem;}
    .chat_area .boogi_bx .text_bx .txt {font-size: 1.6rem; line-height: 2.2rem;}
    .chat_area .boogi_bx .ref_bx .list li {width: 14rem; padding: 0.6rem 1.2rem 0.4rem 1.2rem;}
    .chat_area .boogi_bx .ref_bx .list li a {font-size: 1.5rem;}
    
    /* chat -user */
    .chat_area .user_bx {padding: 1rem 1.8rem;}
    .chat_area .user_bx .txt {font-size: 1.6rem; line-height: 2.2rem;}
}

@media screen and (max-width: 768px) {
    /* chat - boogi */
    .chat_area .boogi_bx {flex-direction: column; gap: 1rem;}
    .chat_area .boogi_bx .boogi_img {width: 4rem; height: 4rem;}
    .chat_area .boogi_bx .text_wrap {width: 100%;}
    .chat_area .boogi_bx .text_bx {width: max-content; max-width: 80%; padding: 1.5rem 1.8rem; margin-bottom: 0.5rem;}
    .chat_area .boogi_bx .text_bx .txt {font-size: 1.5rem; line-height: 2rem;}
    .chat_area .boogi_bx .ref_bx .txt {font-size: 1.4rem; margin-bottom: 1.5rem;}
    .chat_area .boogi_bx .ref_bx .list {gap: 1rem; margin-bottom: 1rem;}
    .chat_area .boogi_bx .ref_bx .list li {width: 13rem; padding: 0.4rem 1.2rem;}
    .chat_area .boogi_bx .ref_bx .list li a {font-size: 1.4rem;}

    /* chat - user */
    .chat_area .user_bx {padding: 1rem 1.8rem; width: 80%;}
    .chat_area .user_bx .txt {font-size: 1.5rem; line-height: 2rem;}

    /* chat - time */
    .chat_area .time {font-size: 1.4rem; margin-top: 0.5rem;}
}

@media screen and (max-width: 480px) {
    /* chat - boogi */
    .chat_area .boogi_bx .text_bx {max-width: 100%;}
    /* chat - user */
    .chat_area .user_bx {width: 100%;}
}

/* input_wrap */
.input_wrap {position: fixed; bottom: 3rem; right: 50%; transform: translateX(50%); width: 100%; max-width: 132.1rem; margin: 0 auto; transition: all 0.5s;}
.input_wrap .input_bx {width: 100%; gap: 3rem; height: 7.3rem; margin-bottom: 2rem; padding: 0 3.5rem; border: 1px solid #dcdbdb; background: #fff; border-radius: 1rem;}
.input_wrap .input_bx .input_area {width: 100%;}
.input_wrap .input_bx input {width: 100%; height: 4rem; font-size: 1.6rem; color: #020202; text-overflow: ellipsis;}
.input_wrap .input_bx input:focus{outline:none;}
.input_wrap .btn_area {display: flex; align-items: center; gap: 10px;}
.input_wrap .btn_area .voice_bx,
.input_wrap .btn_area .text_bx {gap: 1.1rem;}
.input_wrap .btn_area button {font-size: 0;}
.input_wrap .btn_area button.voice {width: 2.4rem; height: 3.1rem; background: url('../images/voice_icon.png') no-repeat; background-size: 100%;}
.input_wrap .btn_area button.voice2 {width: 4rem; height: 4.1rem; background: url('../images/voice_icon2.png') no-repeat; background-size: 100%;}
.input_wrap .btn_area button.send {display: none; width: 3.1rem; height: 2.5rem; background: url('../images/send_icon.png') no-repeat; background-size: 100%;}
.input_wrap .btn_area button.stop {display: none; width: 3.1rem; height: 3.1rem; background: url('../images/ico_stop.png') no-repeat; background-size: 100%;}
.input_wrap .btn_area.on button.send,
.input_wrap .btn_area.on button.stop{display: block;}
.input_wrap .btn_area.on .voice_bx {display: none;}
.cont_area.media .input_wrap {transform: translateX(0); right: 7.5rem;}

@media screen and (max-width: 1400px) {
    /* .cont_area.media .input_wrap {left: 50%;} */
}

@media screen and (max-width: 1385px) {
    .input_wrap {position: static; transform: translateX(0);}
    .input_wrap .input_bx {padding: 0 2rem;}
}

@media screen and (max-width: 1025px) {
    .input_wrap .input_bx {height: 6rem;}
    .input_wrap p {font-size: 1.6rem;}
}

@media screen and (max-width: 768px) {
    .input_wrap .input_bx {height: 5rem; gap: 2rem; padding: 0 1.5rem; margin-bottom: 1rem;}
    .input_wrap .input_bx input {height: 3rem; font-size: 1.6rem;}
    .input_wrap .btn_area button.voice {width: 2rem; height: 2.7rem;}
    .input_wrap .btn_area button.voice2 {width: 3.6rem; height: 3.7rem;}
    .input_wrap .btn_area button.send {width: 2.5rem; height: 2.1rem;}
    .input_wrap p {font-size: 1.3rem;}
}

/* media_board */
.media_board {left: -53.4rem; width: 45rem; height: 100%; background: #313131; box-shadow: 0.3rem 0 1.2rem rgba(0,0,0,0.34); transition: all 0.5s; z-index: 99;}
.media_board.on {left: 0;}
.media_board .media_header {background: #222020; height: 8rem; padding: 0 3rem;}
.media_board .media_header .flex {gap: 1.6rem;}
.media_board .media_header .flex img {height: 3.5rem;}
.media_board .media_body {height: calc(100vh - 8rem); overflow-y: auto; padding: 2.6rem 3rem 2.4rem 3rem; background: #313131;}
.media_board .media_body::-webkit-scrollbar {width: 0.8rem;}
.media_board .media_body::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;}
.media_board .media_body::-webkit-scrollbar-track {background-color: transparent;}
.media_board .media_body .today_info {padding: 2rem 3rem; gap: 7rem; background: #3d3d3d; margin-bottom: 2.4rem; border-radius: 1rem;}
.media_board .media_body .today_info .date_bx::before {content: ''; position: absolute; top: 0; right: -3.5rem; width: 0.1rem; height: 5.1rem; background: #fff; opacity: 0.36;}
.media_board .media_body .today_info .date_bx p {line-height: 1;}
.media_board .media_body .today_info .date_bx .day {margin-bottom: 1.1rem;}
.media_board .media_body .today_info .weather_bx {gap: 2.5rem;}
.media_board .media_body .shorts_bx {width: 100%; height: calc(100vh - 24.7rem); border-radius: 1rem; overflow: hidden;}
.media_board .media_body .shorts_bx a {display: block; width: 100%; height: 100%;}
.media_board .media_body .shorts_bx video{display: block; width: 100%; height: 100%;}
.media_board .close_btn {width: 6rem; height: 14rem; right: -3rem; top: 50%; transform: translateY(-50%); padding-right: 1rem; background: #313131; gap: 1.2rem; border-radius: 3rem; z-index: -1;}
.media_board .close_btn img {margin-right: 0.3rem;}
.media_board .close_btn p {line-height: 1.2;}

@media screen and (max-width: 1385px) {
    .media_board {left: -102%; width: 100%; background: #000;}
    .media_board .media_header {background: #fff; height: 9rem; padding: 0;}
    .media_board .media_header .flex {justify-content: center; gap: 1.7rem;}
    .media_board .media_header p {font-size: 2.6rem; color: #222222;}
    .media_board .media_body {height: calc(100% - 9rem); display: flex; justify-content: center; padding: 0;}
    .media_board .media_body .shorts_bx {position: relative; max-width: 40rem; height: 100%; border-radius: 0;}
    .media_board .media_body .shorts_bx a img {width: 100%; object-fit: cover;}
    .media_board .media_body .shorts_bx .shorts_on {width: 5.2rem; height: 5.2rem; bottom: 1.7rem; left: 50%; transform: translateX(-50%); background: url('../images/shorts_up.png') no-repeat; background-size: 100%;}
    .media_board .close_btn {width: 1.8rem; height: 3.2rem; padding-right: 0; transform: translateY(0); top: 3rem; right: auto; left: 3.7rem; z-index: 1; border-radius: 0; background: none;}
    .media_board .close_btn img {margin-right: 0;}
}

@media screen and (max-width: 768px) {
    .media_board .media_header {height: 7rem;}
    .media_board .media_header .flex {gap: 1.2rem;}
    .media_board .media_header .flex img {width: 3rem;}
    .media_board .media_header p {font-size: 2.2rem;}
    .media_board .media_body {height: calc(100% - 7rem);}
    .media_board .media_body .shorts_bx .shorts_on {width: 4.5rem; height: 4.5rem; bottom: 1rem;}
    .media_board .close_btn {width: 1.2rem; top: 2rem; left: 2.2rem;}
}

/* setting_wrap */
.set_wrap {display: none; width: 100%; max-width: 84.4rem; padding: 4rem 2.8rem; border-radius: 1rem; background: #fff; z-index: 999;}
.set_wrap.on {display: block;}
.set_wrap .set_header {padding: 0 2.2rem 3rem 2.2rem;}
.set_wrap .set_header::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0.1rem; background: #dbdbdb;}
.set_wrap .set_body {padding: 4.5rem 2.2rem 0 2.2rem;}
.set_wrap .set_list {width: 100%; gap: 4.8rem;}
.set_wrap .set_list:not(:last-of-type) {margin-bottom: 2.6rem;}
.set_wrap .set_list .tit {min-width: 7rem; flex-shrink: 0;}
.set_wrap .set_list .set_con {width: 100%;}
.set_wrap .set_list .sel_bx.type1 {width: 25rem; margin-right: 1.9rem;}
.set_wrap .set_list .sel_bx.type2 {width: calc(100% - 26.9rem);}
.set_wrap .set_list select {width: 100%; height: 4.5rem; background: url('../images/sel_arr.png') top 2rem right 1.8rem #fff no-repeat; border: 1px solid #dcdbdb; padding: 0 2.4rem; border-radius: 0.3rem; font-size: 1.7rem; font-weight: 500; color: #444444; font-family: "NotoSans", sans-serif;}
.set_wrap .set_list input {width: 100%; height: 4.5rem; background: #fff; border: 1px solid #dcdcdc; padding: 0.2rem 2.4rem 0 2.4rem; border-radius: 0.3rem; font-size: 1.7rem; font-weight: 500; color: #444444;}
.set_wrap button {display: block; width: 13.6rem; padding: 1.7rem 0; border-radius: 0.5rem; background: #000000; border: 1px solid #dcdbdb; line-height: 1; margin: 3rem auto 0 auto; transition: all 0.3s;}
.set_wrap button:hover {background: #e72488;}
.set_wrap .tg_bx {margin-bottom: 5rem;}
.set_wrap .tg_bx .set_list {width: 50%; margin-bottom: 0;}
.set_wrap .tg_switch {display: block; position: relative; width: 5rem; height: 2.3rem; border-radius: 1.2rem; background-color: #d9dbe5; cursor: pointer;}
.set_wrap .tg_switch .tg_btn {width: 2.3rem; height: 2.3rem; position: absolute; top: 50%; left: 0; transform: translateY(-50%); border-radius: 50%; background: #747474; box-shadow: 0.3rem 0 1.2rem rgba(0 0 0 / 34%);}
.set_wrap .tg_switch, .set_wrap .tg_btn {transition: all 0.2s ease-in;}
/*
.set_wrap #ttsYn:checked~.tg_switch .tg_btn {left: calc(100% - 2.3rem); background: #503ad1;}
.set_wrap #dialect:checked~.tg_switch .tg_btn {left: calc(100% - 2.3rem); background: #503ad1;}
*/

.option_wrap {gap: 1.4rem;}
.option_wrap .tg_switch {display: block; position: relative; width: 6.9rem; height: 3rem; border-radius: 1.5rem; background-color: #747474; cursor: pointer;}
.option_wrap .tg_switch .tg_btn {width: 1.6rem; height: 1.6rem; position: absolute; top: 50%; left: 0.6rem; transform: translateY(-50%); border-radius: 50%; background: #fff; box-shadow: 0.3rem 0 1.2rem rgba(0 0 0 / 34%);}
.option_wrap .tg_switch .tg_name {position: absolute; top: 49%; left: 3rem; transform: translateY(-50%);}
.option_wrap .tg_switch .tg_name.type2 {left: 2.5rem;}
.option_wrap .tg_switch, .option_wrap .tg_btn, .option_wrap .tg_name {transition: all 0.2s ease-in;}
.option_wrap #ttsYn:checked~.tg_switch,
.option_wrap #dialect:checked~.tg_switch {background: #503ad1;}
.option_wrap #ttsYn:checked~.tg_switch .tg_btn {left: calc(100% - 2.2rem);}
.option_wrap #dialect:checked~.tg_switch .tg_btn {left: calc(100% - 2.2rem);}
.option_wrap #ttsYn:checked~.tg_switch .tg_name {left: 1.2rem;}
.option_wrap #dialect:checked~.tg_switch .tg_name {left: 0.5rem;}


@media screen and (max-width: 1385px) {
    /* .set_wrap {max-width: calc(100% - 7rem);} */
}

@media screen and (max-width: 850px) {
    .set_wrap {width: calc(100% - 7rem);}
    .set_wrap .set_list .sel_bx.type1 {width: 40%;}
    .set_wrap .set_list .sel_bx.type2 {width: calc(60% - 1.9rem);}
}

@media screen and (max-width: 768px) {
    .set_wrap {width: calc(100% - 4rem);}
    .set_wrap {padding: 3rem 2.8rem;}
    .set_wrap .set_list .sel_bx.type1 {width: 40%; margin-right: 1.2rem;}
    .set_wrap .set_list .sel_bx.type2 {width: calc(60% - 1.2rem);}

    .option_wrap {gap: 0.5rem;}
}

/* @media screen and (max-width: 580px) {
    .set_wrap .tg_bx {flex-direction: column; align-items: flex-start;}
    .set_wrap .tg_bx .set_list {margin-bottom: 1.5rem; width: 100%; justify-content: space-between;}
} */

@media screen and (max-width: 768px) {
    .set_wrap {width: calc(100% - 3rem); padding: 1.5rem;}
    .set_wrap .set_header {padding: 0 0.8rem 1rem 0.8rem;}
    .set_wrap .set_header p {font-size: 1.8rem;}
    .set_wrap .set_header .set_close img {width: 1.5rem;}
    .set_wrap .set_body {padding: 1.5rem 0.8rem 0 0.8rem;}
    .set_wrap .set_list:not(:last-of-type) {margin-bottom: 1rem;}
    .set_wrap .set_list.sel {flex-direction: column; align-items: flex-start; gap: 0.5rem;}
    .set_wrap .set_list .tit {font-size: 1.5rem; min-width: 5rem;}
    .set_wrap .set_list select {height: 3.5rem; padding: 0 1.4rem; background-position: top 1.5rem right 1.2rem; background-size: 1rem; font-size: 1.4rem;}
    .set_wrap button {width: 9rem; padding: 1rem 0; font-size: 1.5rem;}
    .set_wrap .set_list input {padding: 0.2rem 1.4rem 0 1.4rem; height: 3.5rem; font-size: 1.4rem;}
    .set_wrap .tg_bx {flex-direction: column; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem;}
    .set_wrap .tg_bx .set_list {width: 100%; justify-content: space-between; margin-bottom: 0;}
    .set_wrap .tg_switch {width: 4rem; height: 1.8rem; border-radius: 0.8rem;}
    .set_wrap .tg_switch .tg_btn {width: 1.8rem; height: 1.8rem;}
/*
    .set_wrap #ttsYn:checked~.tg_switch .tg_btn {left: calc(100% - 1.8rem);}
    .set_wrap #dialect:checked~.tg_switch .tg_btn {left: calc(100% - 1.8rem);}
*/
    .set_wrap .set_txt {font-size: 1.4rem;}
}

/* banner_wrap */
.banner_wrap {display: none; width: 100%; max-width: 76.2rem; padding-bottom: 5.6rem; z-index: 12;}
.banner_wrap.on {display: block;}
.banner_wrap .img_bx {width: 100%; height: 38.1rem;}
.banner_wrap .banner_slide img {width: 100%;}
.banner_wrap .btn_wrap {bottom: -5.6rem; width: 100%; background: #fff; height: 6.6rem; padding: 0 2.5rem; border-radius: 1.5rem 1.5rem 0 0; z-index: 1;}
.banner_wrap .btn_wrap .page {position: static; width: auto; font-size: 1.8rem; color: #000; font-weight: 500;}
.banner_wrap .btn_wrap .page .swiper-pagination-current {font-weight: 700;}
.banner_wrap .btn_wrap .page .divider {font-weight: 200;}
.banner_wrap .btn_wrap .btn_bx {gap: 1.5rem;}
.banner_wrap .btn_wrap .btn_bx .check_bx {gap: 0.5rem;}
.banner_wrap .btn_wrap .bn_close {gap: 1.1rem;}

@media screen and (max-width: 762px) {
    .banner_wrap {max-width: 90%;}
    .banner_wrap .img_bx {height: auto;}
}

@media screen and (max-width: 768px) {
    .banner_wrap {max-width: 100%; padding-bottom: 4rem;}
    .banner_wrap .btn_wrap {height: 4.7rem; bottom: -4rem; padding: 0 2em;}
    .banner_wrap .btn_wrap .page {font-size: 1.5rem;}
    .banner_wrap .btn_wrap .btn_bx {gap: 1rem;}
    .banner_wrap .btn_wrap .btn_bx .check_bx label {font-size: 1.5rem;}
    .banner_wrap .btn_wrap .bn_close img {width: 1.3rem; margin-bottom: 0.2rem;}
}

/* 로딩 모달 */
#loading-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-box {
  text-align: center;
  color: #fff;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 14px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 16px;
  opacity: 0.8;
}

/* 부기 말풍선 로딩 상태 */
.chat_area .boogi_bx.boogi_loading .text_bx {
  /* 필요하면 배경 살짝 다르게 */
  /* background: rgba(255,255,255,0.6); */
}

/* 말풍선 안에서 점 3개가 깜빡이는 애니메이션 */
.chat_area .boogi_bx .typing-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.2rem;
  border-radius: 50%;
  background: #999;
  opacity: 0.3;
  animation: typingBlink 1s infinite;
}

/* 두 번째, 세 번째 점은 약간 딜레이 */
.chat_area .boogi_bx .typing-dot:nth-child(2) {
  animation-delay: 0.2s;
}
.chat_area .boogi_bx .typing-dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBlink {
  0%, 80%, 100% {
    opacity: 0.2;
  }
  40% {
    opacity: 1;
  }
}

/* 혹시 전역 span 스타일에 block이 걸려있을 수 있으므로 재지정 */
.chat_area .boogi_bx .typing-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.2rem;
  border-radius: 50%;
  background: #999;
  opacity: 0.3;
  animation: typingBlink 1s infinite;
}

.msg-strong {
  font-weight: 700;
  color: #8f2eda;
  background: rgb(255 100 189 / 12%);
  padding: 0 3px;
  border-radius: 4px;
}

#canvas-container {

}

#transition-mask {
	position: fixed;
	opacity: 0;
	pointer-events: none;
	z-index: 5;
	transition: opacity 0.3s ease;
	background: radial-gradient(
		circle at center,
		rgba(255, 255, 255, 0.98) 0%,
		rgba(255, 255, 255, 0.95) 65%,
		rgba(255, 255, 255, 0.6) 80%,
		rgba(255, 255, 255, 0) 100%
	);
	top:0;
	left:0;
	z-index:9;
	width: 100%;
	height: 100%;
}

.md-scope,
.md-scope * {
  all: revert;
  box-sizing: border-box;
}

/* 다시 원하는 것만 지정 */
.md-scope { 
  font-size: 16px;
  line-height: 1.6;
  color: inherit;
  font-family: inherit;
  white-space: normal;
}

.md-scope h3 { margin: 10px 0 6px; font-size: 16px; font-weight: 700; }
.md-scope p  { margin: 6px 0; }
.md-scope ul { margin: 6px 0 8px; padding-left: 18px; }
.md-scope li { margin: 4px 0; }
.md-scope strong { font-weight: 700; }

/* 2026-04-10 스크롤 버튼 추가 */
.scroll_bottom_btn {
    position: absolute;
    bottom: calc(100% + 4rem);
    /* 입력창(input_wrap) 높이에 따라 조절하세요 */
    right: 32rem;
    background: url('/humanframe/theme/busan22/assets/chatbot/images/chat_down.png') no-repeat;
    background-size: 100%;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    font-size: 0;
    z-index: 100;
    transition: opacity 0.3s ease;
    /* 부드럽게 나타나도록 애니메이션 */
}

@media screen and (max-width: 1400px) {
    .scroll_bottom_btn {right: auto; left: 50%; transform: translateX(-50%); bottom: calc(100% + 2rem);}
}