@CHARSET "UTF-8";
  
  
  
  
  /* 전체 스크롤바 트랙(바탕) */
::-webkit-scrollbar {
  width: 6px;          /* 세로 스크롤바 너비 */
  height: 6px;         /* 가로 스크롤바 높이 */
}

/* 스크롤바 트랙 배경 */
::-webkit-scrollbar-track {
  background: #bfd5ea;  /* 트랙 배경색 */
  border-radius: 10px;   /* 모서리 둥글게 */
}

/* 스크롤바 슬라이더(Thumb) */
::-webkit-scrollbar-thumb {
  background-color: #c0c0c0; /* 슬라이더 색 */
  border-radius: 6px;        /* 모서리 둥글게 */
}

/* 슬라이더를 호버했을 때 */
::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0;
}

/* 스크롤바 모서리(가로/세로 교차점) */
::-webkit-scrollbar-corner {
  background: #f0f0f0;
}
  
  
 .header_chat{  } 
 
.header_chat .popup_top_title{ display: inline-block; width: 100%; text-align: center; padding: 15px 0;  }  
.header_chat .popup_top_title h3{ font-weight: bold; font-size: 17px;  }
.header_chat .r { position: absolute; right: 15px; top:17px; display: flex; gap:10px;  }
 
.header_chat .btn_close { display:inline-block; width:30px; height:30px; border:0; 
background:#fff url('/resources/images/ico_close.svg') left center; background-size: 30px; background-repeat:no-repeat;
width: 35px; height: 35px; background-size: 27px; cursor: pointer; }
 

.header_chat .btn_close2 { display:inline-block;  border:0; position:relative;
background:#fff; width: 42px; height: 42px; background-size: 27px; border: 1px solid #eee; } 
 

.header_chat .btn_close2 i { position: absolute; width: 25px; height: 1px; background: #232323; left: 8px; bottom:10px;   }
 
.chat_wait_top { height: 200px; width: 100%; background: #89CDA4; position: relative;  } 

.chat_wait_top .img img{ width: 100% !important; height: 100% !important;
 max-width: 100% !important; max-height: 100% !important; object-fit: cover; 
 margin: 0 !important; padding: 0 !important; border-radius: 100px;  }


.chat_wait_top .box { position: absolute; left: 50%; bottom: 0%; transform: translate(-50%, 50%); text-align: center;  }

.chat_wait_top .img { width: 150px; height: 150px; border-radius: 100px; background: #fff; overflow: hidden; 
  padding: 5px;  border: 1px solid #eee;   }
 
 .chat_wait_top .box p { margin-top: 5px; display: inline-block; width: 100%;  }
 
 
 .chat_wait_memo{  text-align: center;  padding: 60px 30px 50px;  }
 
 
 .chat_wait_memo .time{ padding: 10px 15px; border-radius: 10px; background: #595959; color:#fff; font-weight: bold; font-size: 25px;   }
  .chat_wait_memo p { margin-top: 30px;  }
  
  
 .chat_wait_memo .memo { text-align: left; font-size: 15px; line-height: 2; padding: 15px;  background: #eee;  border-radius: 10px;  } 
  
  
 .header_chat{     } 
 .header_chat .header_top { padding: 10px 15px; background: #F2FCF4; display: flex; align-items: center; width: 100%;  }
 
.header_chat .img { display:table-cell; vertical-align:middle; width: 60px; height: 60px; overflow:hidden; }
.header_chat .img img { width:100%; height:100%; object-fit: cover; border-radius: 250px;  }
.header_chat .info { display:table-cell; vertical-align:middle; text-align:left; padding-left:15px; }
.header_chat .info .name { font-size:15px; font-weight:700; line-height:1.2em; margin-bottom:4px; }
.header_chat .info .name > span { display:inline-block; padding-right:5px;}
  
 .header_chat .info .name{ font-size: 19px;  }
 .header_chat .info .name strong { color:#89CDA4; font-weight: 500;  }
 .header_chat .info .name em{ margin-left: 5px; font-size: 19px; font-weight: bold;  }
 
 .header_chat .btn_close{  position: static; margin-left: auto; padding: 20px;
  border-radius: 5px; background-color: #fff; background-position: center; border: 1px solid #eee;  }
  
  
  .chat_list{  }
  
  .header_chat{ position: fixed; top:0;  width: 100%; max-width: 648px;  }
  
  .chat_wrap{  padding: 141px 0 75px ;  height: 100%;  }
  .chat_data {  padding: 15px 15px;   overflow: auto;  height: 100%;  }
  .chat_data .title{ display: flex; align-items: center; gap:10px; padding: 12px 15px; background: #f6f8fc; font-size: 19px;  }
  .chat_data .memo { background: #fff; padding: 15px 15px; line-height: 1.5; }
  
  .chat_detail #wrap { background: #bfd5ea; width: 100%; height: 100%;  }
  .chat_data{ width: 100%; height: 100%;  }
  
   .chat_data ul li { border-radius: 10px; overflow: hidden; margin-top: 20px;   } 
   .chat_data ul li:first-child { margin-top: 0;  }
   
   .chat_data ul li strong { min-width: 70px; }
  
  .chat_top{ width: 100%; padding: 25px 0; background: #bfd5ea; z-index: 20; display: flex;  }
  
  .chat_top > div { width: 100%; text-align: center;  }
  .chat_top div div { width: 100%; display: flex; gap:10px; justify-content: center; border-left: 1px solid #eee;  }
  .chat_top div:first-child > div{ border-left: 0;  }
  
  
  .chat_detail{  }
  
  .chat_data .color_red{ color: #cb342d;  }
  
  
  
  
  .chat_detail{ overflow: hidden; }
  
  
  .chat_data .chat .nick{ font-size: 17px;  }
  
  .chat_data .message_box { display: flex; gap: 7px; margin-top: 10px; align-items: flex-end; margin-top: 5px;   }
  
  .chat_data .memo{  font-size: 19px; }
  .chat_data .message_box .box{ background: #ffffff;
    border-radius: 0 12px 12px 12px;     padding: 12px 16px;
    line-height: 26px;
    font-size: 19px; position: relative; max-width: 70%;    }
  
  .chat_data .message_box .box {
    word-break: break-word;
    overflow-wrap: break-word;
}
  
  
  .chat_data .my .message_box { flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end; }
    
    
  .chat_data .my .send-time { text-align: right; order:2;  }
  
  .chat_data .my .nick { display: none; }
  
  
  .chat_data .my .message_box .box { border-radius: 12px 0 12px 12px; background-color:#fff12a; order: 2; font-size: 17px; }
  .chat_data .send-time { font-size: 15px; margin-bottom: 5px;  }
  
   .chat_data .my .message_box .box .reply_box{ border-bottom: 1px solid #ebe29a;  }
  
  .chat_data .my.chat .nick { text-align: right;  }
  
  
  .chat_input{ display: flex; align-items: center; position: fixed; bottom:0; width: 100%; max-width: 648px; padding: 10px 15px;
  background: #fff;  border-top: 1px solid #eee; gap:10px;   } 
  .chat_input i{ width: 50px; height: 50px; background: #fff; }
  
  .chat_input input{ height: 50px;  } 
  
  .chat_input input[type=text] { width: calc(100% - 50px); height: 50px; border: 0; padding: 0 15px; font-size: 15px; 
  border: 1px solid #eee; border-radius: 10px;   }
  
  
  .chat_input input[type=text]::placeholder { color:#a2a2a2;  }
  .chat_input input[type=button] { width: 50px; height: 50px; background: #fff; border: 0;  }
  
  
  
  
  
  
  
  .chat_input .file { position: relative; }
  #form_chat input[type=file] { position: absolute; left: 0; top: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer;
  display: none;  }
  
  
  
  
  
  
  .chat_input i { background: url('/resources/images/icon_file.svg') no-repeat center; }
  .chat_input input[type=button] { background: url('/resources/images/icon_send.svg') no-repeat center; }
  
   .chat_input input[type=button],  .chat_input i{ background-size: 20px; border: 1px solid #eee; border-radius: 10px;  }
   
   
   
  .chat_data .chat_file .message_box .box { padding: 0; overflow: hidden; }
  
  
  
  .consulting_li ul li { display: inline-block; width: 100%;  }
  
  .consulting_li ul li a{ display: flex; width: 100%; gap:10px; color:#fff; padding: 20px 0; background: #DA4841; 
  text-align: center; font-size: 15px; align-items: center; justify-content: center; font-weight: bold;
  border-top:1px solid #bc4c4c;  }
  
  .consulting_li ul li:first-child a { border-top:0;  }
  
  
  
  
  .chat_li_info li { display: flex; gap:10px; font-size: 19px;  }
  
  
  
  
  .reduction_pop p { font-size: 15px; line-height: 1.5; margin: 20px 0; text-align: center;  }
  .reduction_pop p span{ color:red; }
  .memo_pop_w h5{ margin: 8px 0; font-size: 17px;  }
  
  
  .memo_pop_w .btn{ display: flex; gap:10px; }
  .memo_pop_w .btn a, .memo_pop_w .btn input, .memo_pop_w .btn span { width: 100%; height: 50px; line-height: 50px; border-radius: 10px; color:#fff; 
  text-align: center; font-size: 13px;  }  
  .memo_pop_w .btn span{ background: #D9D9D9; border-color: #ECECEC; cursor: pointer; }
  .memo_pop_w .btn a, .memo_pop_w .btn input  { background: #89CDA4; border: 0;   }
  
  .chat_close_pop2 .btn { margin-top: 20px;  }
  
  .chat_close_pop table { width: 100%; margin: 20px 0;  }
  
  
  .chat_close_pop table th, .chat_close_pop table td { height: 50px; border: 1px solid #eee; font-size: 13px; padding: 0 15px;   }
  .chat_close_pop table th { background: #F5F5F5; width: 30%;   }
  
  
  
  .chat .message_box .details { display: flex; gap: 5px; align-items: center; }
  .chat .message_box .details i { display: inline-block; width: 15px; height: 25px; 
  background: url(/resources/images/ico_answer1.svg) center no-repeat;;   }
  
  
  .chat.my .message_box .details i { background: url(/resources/images/ico_answer2.svg) center no-repeat;;   }
  
  
  
  .msg_answer { position: fixed; bottom: 69px; width: 100%; max-width: 650px; padding: 20px 20px 0; display: none;  }
  .msg_answer > div { background: #f9f9f9; padding: 15px; 
  border-top-right-radius: 10px; border-top-left-radius: 10px;  position: relative;
	display: flex; gap:10px; align-items: center;  }
  
  
  .msg_answer > div img{ width: 50px; height: 50px; object-fit: cover; }
  .msg_answer .memo { width: calc(100% - 60px);  padding-right: 30px;  }
  
  
  .msg_answer > div strong { display: inline-block; width: 100%; font-size: 17px;  }
  .msg_answer > div p { font-size: 15px; color: #949494; margin-top: 5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;  }
  
  .msg_close{ position: absolute; right: 10px; top:10px; width: 30px; height: 30px; 
background: #fff url(/resources/images/ico_close.svg) center; cursor: pointer; }
  
  
  
  .chat_data.answer{ padding-bottom: 100px;  }
  
  
  
  
  .reply_box { display: inline-block; width: 100%; margin-bottom: 5px; padding-bottom: 5px; border-bottom: 1px solid #f2f2f2;  }
  .reply_box .reply_writer { font-size: 13px; color:#4b4b4b; }
  .reply_box .reply_preview { font-size: 13px; margin-top: 3px; color:#4b4b4b; 
   white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;    }
  
  
  
  .chat_data ul li.typing { height: 30px;  }
  .chat_data ul li.typing .typing_wrap{ position: fixed; bottom: 80px; z-index: 999;  }
  .typing_wrap {
  display: flex;
  gap: 4px;
  align-items: center;
  height: 10px;
  background: url('/resources/images/typing_bg.svg') left no-repeat;
  width: 80px; height: 50px; padding-left: 27px;
}

.typing_wrap i {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #999;
  border-radius: 50%;
  opacity: 0.3;
  animation: typing-dot 1.2s infinite ease-in-out;
  cursor: auto;
}

.typing_wrap i:nth-child(1) {
  animation-delay: 0s;
}
.typing_wrap i:nth-child(2) {
  animation-delay: 0.2s;
}
.typing_wrap i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing-dot {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  40% {
    opacity: 1;
    transform: scale(1.3);
  }
}
  
  
  
.chat_data ul li.type2 .memo { background: none; padding: 60px 0; text-align: center;   }
.chat_data ul li.type2 .memo p { line-height: 1.6; color:#5d5d5d;  }
  
  .chat_data .send-time{ max-width: 70px;  }
  .chat_data .send-time span { width: 100%; display: inline-block; }
  
  
  
  .chat_wait_top{  }
  
  
  
  .chat_wait_info{ display: flex; align-items: center; justify-content: center; margin-top: 110px; gap:20px;   }
  .chat_wait_info div {  text-align: center; border: 1px solid #eee; border-radius: 10px; padding: 20px;  }
  .chat_wait_info img{ width: 27px;  }
  
  .chat_wait_info span { color: #707070; font-size: 13px;  }
  .chat_wait_info span, .chat_wait_info strong { display: inline-block; width: 100%; margin-top: 5px;  }
  .chat_wait_info strong { font-size: 30px;  margin-top: 10px; }
  
  
  
  
  
  .call_memo_pop textarea { width: 100%; height: 250px; border: 1px solid #d7d7d7; padding: 15px; resize: none;  }
  .call_memo_pop .btn { margin-top: 10px;  }
  
  
  
  
  
  .call_memo_btn{ flex-wrap: wrap; gap:10px;  }