@charset "utf-8";
@import url(pretendard/font.css);
@import url(roboto/font.css);

/* Reset */
*{box-sizing:border-box;}
html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, span, form, fieldset, input, select, label, textarea, table, caption, thead, tfoot, tbody, tr, th, td{margin:0;padding:0;color:#000;font-family:'Pretendard', sans-serif;font-size:18px;font-weight:500;line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:none;}
b, span, strong, input, a, button{font-size:inherit;font-family:inherit;color:inherit;font-weight:inherit;}
article, aside, dialog, footer, header, section, footer, nav, figure, hgroup, details, summary, figure, figcaption {display: block;}
cite{display:inline}
html, body {height:100%;}
body {overflow-x:hidden;margin:0px;}
a:link {text-decoration:none;} 
a:visited {text-decoration:none;}
img{border:0;max-width:100%}
b, strong, span, em, i {font-size: inherit;font-style: normal;}
label, input, textarea, select{vertical-align:middle}
ol, ul{list-style:none;}
table{border-collapse:collapse;table-layout:fixed;}
fieldset{border:none}
.skip, hr, legend{position:absolute;left:-1000%;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden;}
button{margin:0;padding:0;border:none;background:none;cursor:pointer;display:inline-block;}
b {font-weight:500}
input{border-radius:0;appearance:none;-webkit-border-radius:0;-webkit-appearance:none}
input[type=text]::-ms-clear{display: none;}
a[href^="tel"], a[href^="mailto"] {color: inherit;text-decoration: none;}
.hidden,.scHdn{position:absolute;top:0;left:0;width:1px;height:1px;margin:1px;border:none;overflow:hidden;clip:rect(0, 0, 0, 0);}


#contents{background: #ddd;height: 100vh;position: relative;}
.pop_bg{display:none;position: absolute;left: 0;top: 0;right:0;bottom: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.4);z-index: 9;}
.floating{position: absolute;right: 50px;bottom: 50px;z-index: 10;}
.floating button{width: 70px;height: 70px;border-radius: 50%;}
.floating .btn_chatbot{background: #00B0F0 url(../img/btn_chatbot.png) no-repeat center;}
.floating .btn_chatbot.on{background: #fff url(../img/btn_close.png) no-repeat center;}

/* 챗봇 스타일 */
.pop_chatbot{display: none;position: absolute;right: 50px;bottom: 150px;z-index: 9999;}
.pop_chatbot .in{background: #fff;border-radius: 20px;width: 600px;height: 600px;}
.cont_wrap{position: relative;width: 100%;height: 100%;display: flex;flex-wrap: wrap;}

/* 초기화면 */
.cont_wrap .start{text-align: center;margin-top: 180px;}
.cont_wrap .start .txt{font-size: 30px;font-weight: bold;text-align: center;padding-top: 150px;background: url(../img/bg_chatbot_start.png) no-repeat center top;}

.cont_wrap .cont{height: 520px;width: 100%;}
.cont_wrap .cont .chatting{width: 100%;height: calc(100% - 74px);overflow-x: auto;padding: 20px 16px 10px;}
.cont_wrap .cont .chatting .user+.user{margin-top: 20px;}
.cont_wrap .cont .chatting .user+.chatbot{margin-top: 20px;}
.cont_wrap .cont .chatting .chatbot+.chatbot{margin-top: 20px;}
.cont_wrap .cont .chatting .chatbot+.user{margin-top: 20px;}

/* 사용자 채팅 */
.cont_wrap .cont .chatting .txt{display: inline-block;font-size: 16px;max-width: 85%;word-break:break-all;}
.cont_wrap .cont .chatting .user{text-align: right;}
.cont_wrap .cont .chatting .user .txt{background: #F4F4F4;padding:8px 16px;border-radius: 16px;}

/* 챗봇 채팅 */
.cont_wrap .cont .chatting .chatbot{background: url(../img/img_chatbot.png) no-repeat left top;padding-left: 45px;}
.cont_wrap .cont .chatting .chatbot strong{display: block;font-weight: bold;}
.cont_wrap .cont .chatting .chatbot .txt{margin-top: 5px;}
.cont_wrap .cont .chatting .chatbot .stxt{font-size: 14px;color:#000000;}
.cont_wrap .cont .chatting .mCSB_scrollTools{width: 5px;}

/* 상단 퀵메뉴 */
.cont_wrap .cont .quick{border-radius: 16px 16px 0 0;background: #00B0F0;}
.cont_wrap .cont .quick ul{display:flex;}
.cont_wrap .cont .quick ul li{width: 25%;text-align: center;padding:10px 0;border-left:1px solid #4cc1eb;box-sizing: border-box;}
.cont_wrap .cont .quick ul li:first-child{border-left: 0;}
.cont_wrap .cont .quick ul li button{display: block;width: 100%;background-repeat: no-repeat;background-position: center top 3px;padding-top: 30px;font-size: 16px;color: #fff;font-weight: bold;padding-bottom: 5px;}
.cont_wrap .cont .quick ul li button.quick01{background-image: url(../img/ico_quick04.svg);}
.cont_wrap .cont .quick ul li button.quick02{background-image: url(../img/ico_quick02.svg);}
.cont_wrap .cont .quick ul li button.quick03{background-image: url(../img/ico_quick03.svg);}
.cont_wrap .cont .quick ul li button.quick04{background-image: url(../img/ico_quick04.svg);}

/* 답변 평가 스타일 */
.chatbot_foot{margin-top: 20px;}
.chatbot_foot .assess{display: inline-block;margin-left: 16px;}
.chatbot_foot .assess button{border: 0;border-radius: 16px;padding:9px 16px 9px 36px;font-size: 14px;}
.chatbot_foot .assess button.good{background: #F1F5FE url(../img/ico_good.png) no-repeat left 16px center;}
.chatbot_foot .assess button.bad{background: #FDF8E5 url(../img/ico_bad.png) no-repeat left 16px center;}

/* 링크 텍스트 경우 */
.cont_wrap .cont .chatting .chatbot .link{display: block;color:#0F63C2;text-decoration: underline;font-size: 16px;}

/* 이미지 리스트 경우*/
.cont_wrap .cont .chatting .chatbot .img_list{margin-top: 16px;}
.cont_wrap .cont .chatting .chatbot .img_list ul{display: flex;flex-wrap: wrap;margin-left: -12px;}
.cont_wrap .cont .chatting .chatbot .img_list ul li{width: calc(33.33% - 12px);margin-left: 12px;}

/* 메세지 입력 */
.cont_wrap .inputArea{width: 100%; display: flex;align-items: center;justify-content: space-between;border:1px solid #212529;border-radius: 16px;padding: 0 16px;margin:16px;}
.cont_wrap .inputArea input[type="text"]{width: calc(100% - 20px);background: none;border: 0;height: 46px;outline: none;font-size: 16px;}
.cont_wrap .inputArea .btn_send{width: 17px;height: 15px;background: url(../img/ico_send.png) no-repeat;}

/* 닷리스트 스타일 */
.dot_list{margin-top: 10px;}
.dot_list span{display: block;font-size: 16px;}
.dot_list ul{margin-top: 10px;}
.dot_list ul li{position: relative;}
.dot_list ul li+li{margin-top: 5px;}
.dot_list ul li::before{content: '';width: 3px;height: 3px;border-radius: 50%;position: absolute;left: 13px;top: 15px;background:#0F63C2;}
.dot_list ul li a{display:block;font-size: 16px;border: 1px solid #F3F3F3;border-radius: 16px;padding: 5px 10px 5px 20px;}
.dot_list ul li a:hover{background: #F3F3F3;}

/* 태그 스타일 */
.tag{margin-top: 10px;}
.tag ul{display: inline-flex;gap: 5px;flex-wrap: wrap;}
.tag ul li a{display:block;font-size: 14px;text-align: center;background: #F4F4F4;padding:5px 10px;border-radius: 16px;}

/* 시간 */
.cont_wrap .cont .chatting .time{font-size: 13px;display: block;color: #777;padding:8px 0;}

/* 로딩 */
.cont_wrap .loading_box{margin-top: 10px;display: flex;align-items: center;}
.cont_wrap .loading_box .loading{width: 30px;height: 30px;border: 5px solid #00B0F0;border-top: 5px solid #fff;border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.cont_wrap .loading_box p{font-size: 16px;margin-left: 10px;}


/* 반응형 */
@media all and (max-width:768px){
    .floating{right: 15px;bottom: 20px;}
    .pop_chatbot{right: 0;bottom: 110px;}
    .pop_chatbot .in{width: calc(100% - 30px);margin:0 15px;height: auto;}
    .cont_wrap .cont{max-height: 450px;height: auto;}
    .cont_wrap .cont .quick ul li{padding:5px 0;}
    .cont_wrap .cont .quick ul li button{font-size: 14px;}
    .cont_wrap .cont .chatting{height: calc(100% - 50px);}
    .cont_wrap .cont .chatting .txt{font-size: 14px;}
    .cont_wrap .cont .chatting .chatbot{background-size: 28px 28px;padding-left: 35px;}
    .cont_wrap .cont .chatting .chatbot strong{font-size: 16px;}
    .cont_wrap .cont .chatting .chatbot .link{font-size: 14px;}
    .cont_wrap .cont .chatting .chatbot .stxt{font-size: 12px;}
    .chatbot_foot .assess{margin-left: 10px;}
    .chatbot_foot .assess button{font-size: 12px;}
    .cont_wrap .cont .chatting .time{font-size: 12px;}
    .dot_list span{font-size: 14px;}
    .dot_list ul li a{font-size: 14px;}
    .tag ul li a{font-size: 12px;}
    .cont_wrap .inputArea{margin:10px 16px 16px;}
    .cont_wrap .inputArea input[type="text"]{font-size: 14px;height: 32px;}
    .cont_wrap .loading_box p{font-size: 14px;}
}

@media all and (max-width:500px){
    .pop_chatbot{left: 0;top: 0;right: 0;bottom: auto;padding-top: 15px;z-index: 9999;}
    .floating button{width: 50px;height: 50px;}
    .floating .btn_chatbot{background-size: 28px 28px;}
    .chatbot_foot .assess{display: block;margin-left: 0;margin-top: 5px;}
    .cont_wrap .cont{height: calc(100vh - 160px);max-height: none;}
    .cont_wrap .cont .chatting{padding:20px 10px;height: calc(100vh - 212px);} 
}