@charset "utf-8";

.chat_wrap {height:calc(100vh - 100px);}
.chat_wrap .chat_area {height:calc(100vh - 230px);overflow-y:auto;padding:20px;position:relative;}

/* 스크롤바 전체 기본 꾸미기 */
.chat_wrap .chat_area::-webkit-scrollbar {
	width: 3px; 
}
.chat_wrap .chat_area::-webkit-scrollbar-thumb {
	background: #888888; /* 스크롤바 색상 */
}
.chat_wrap .chat_area::-webkit-scrollbar-track {
	background: #88888850;  /*스크롤바 뒷 배경 색상*/
}

.chat_list {}
.chat_list > li {position:relative;padding:3px;margin-top:30px;}
.chat_list > li:first-child {margin-top:0;}
.chat_list > li::before {content:"";width:33px;height:30px;position:absolute;left:0;top:0;background:url("../images/common/chat_logo_.png") center center no-repeat;background-size:33px auto;
	filter: var(--base-color-hue); /* 이미지 색상 반전 */
}
.chat_list > li > p.chat_id {color:#000;font-size:20px;font-weight:600;padding-left:38px;margin-bottom:12px;}
.chat_list > li > p {line-height:26px;}
.chat_list li.answer_area {padding-top:30px;text-align:right;}
.chat_list li.answer_area::before {display:none;}
.chat_list li.answer_area > div {display:inline-block;padding:15px 25px;border:1px solid #0a4595;color:#0a4595;border-radius:40px;text-align: left;}
.chat_list li .chat_time {font-size:12px;margin-top:5px;color:#757575;}

.question_list {margin-top:20px;}
.question_list li {margin-top:10px;}
.question_list li:first-child {margin-top:0;}
.question_list li button {color:#1f1f1f;font-weight:600;display:inline-block;padding:15px 25px;padding-left:60px;border:1px solid #ddd;border-radius:40px;background:url("../images/icon/bull_q.svg") 25px 16px no-repeat;}
.question_list li button:hover {background-color:#f5f5f5;}
.btn_link_wrap {display:flex;gap:8px;margin-top:10px;flex-wrap: wrap;}
.btn_link_wrap button {display:inline-block;padding:5px 20px;padding-left:42px;border:1px solid #ddd;border-radius:20px;font-size:14px;background:url("../images/icon/data_icon.svg") 15px 10px no-repeat;color:#1a1a1a;}
.btn_link_wrap button:hover {background-color:#666;color:#fff;border-color:#666;}
.btn_link_wrap button.bull_link {background:url("../images/icon/bull_link.svg") 15px center no-repeat;}
.btn_link_wrap button.bull_link:hover {background-color:#666;color:#fff;border-color:#666;}

.answer_box {border:1px solid #e4e4e4;border-radius:15px;font-size:13px;line-height:20px;padding:20px;margin-top:20px;}
.answer_box .answer_box_tit {color:#1e1e1e;font-size:18px;font-weight:600;background:url("../images/icon/data_icon.svg") 0 1px no-repeat;padding-left:28px;margin-bottom:10px;}
.answer_box .typing_effect {line-height:26px;}

.chat_wrap .chat_bottom {margin-top:30px;z-index: 1;position: relative;}
.chat_wrap .chat_bottom .chat_input_wrap {width:100%;border:2px solid #d9d9d9;border-radius:40px;padding:15px 90px 15px 40px;box-shadow: 0 3px 10px #33333320;position:relative;background: #fff;}
.chat_wrap .chat_bottom .chat_input_wrap.on {border:2px solid #0a4595;}
.chat_wrap .chat_bottom .chat_input_wrap input {font-size:22px;padding:4px 0;width:100%;font-weight:600;border:none;}
.chat_wrap .chat_bottom .chat_input_wrap input::-webkit-input-placeholder {font-weight:400;color:#757575;}
.chat_wrap .chat_bottom .chat_input_wrap input:-ms-input-placeholder {font-weight:400;color:#757575;}
.chat_wrap .chat_bottom .chat_input_wrap input:focus {outline: none;}
.chat_wrap .chat_bottom .chat_input_wrap .btn_reset {display:none;position:absolute;right:75px;top:20px;width:35px; height:35px;border:1px solid #aaa;color:#aaa;border-radius:50%;}
.chat_wrap .chat_bottom .chat_input_wrap .btn_reset.on {display:block;}
.chat_wrap .chat_bottom .chat_input_wrap .btn_send {position:absolute;right:35px;top:20px;width:35px; height:35px;background:url("../images/common/btn_send_off.svg") center no-repeat;}
.chat_wrap .chat_bottom .chat_input_wrap.on .btn_send {background:url("../images/common/btn_send_on.svg") center no-repeat;filter: var(--base-color-hue);}
.chat_input_ex {margin-top:20px;text-align:center;color:#ababab;}

.evalution_area {display:flex;gap:8px;margin-top:20px;justify-content: end;}
.evalution_area button {padding:0;}
.evalution_area .btn_good {width:20px;height:20px;background:url("../images/icon/icon_good.svg") center no-repeat;background-size:18px auto;}
.evalution_area .btn_bad {width:20px;height:20px;background:url("../images/icon/icon_bad.svg") center no-repeat;background-size:18px auto;}
.evalution_area .btn_good.on {background:url("../images/icon/icon_good_on.svg") center no-repeat;background-size:18px auto;filter: var(--base-color-hue);}
.evalution_area .btn_bad.on {background:url("../images/icon/icon_bad_on.svg") center no-repeat;background-size:18px auto;filter: var(--base-color-hue);}
.evalution_area .btn_copy {width:20px;height:20px;background:url("../images/icon/icon_copy.svg") center no-repeat;background-size:18px auto;}
.evalution_area .btn_sound {width:20px;height:20px;background:url("../images/icon/icon_sound2.svg") center no-repeat;background-size:18px auto;}
.evalution_area .btn_memo {display: none;}
.evalution_area .btn_replay {width:20px;height:20px;background:url("../images/icon/icon_replay_off.svg") center no-repeat;background-size:18px auto;}
.evalution_area .btn_replay.on {background:url("../images/icon/icon_replay_om.svg") center no-repeat;background-size:18px auto;}

.btn_robot {position:fixed;right:20px;bottom:20px;border-radius:40px;overflow:hidden;background-color:var(--base-color);}
.btn_robot button {position: relative;width:80px;height:80px;padding:10px;display:inline-block;background-color:transparent;}
@keyframes chatBgColor {
	0% {
	background-position: 50% 10%;
	}
	50% {
	background-position: 20% 100%;
	}
	100% {
	background-position: 50% 10%;
	}
}

.btn_robot button .chat_ani01 {display:inline-block;position:absolute;bottom:-5px;left:50%;width:60px;height:84px;transform: translateX(-50%); background:url("../images/common/robot_body.svg") center no-repeat;background-size:84px auto;z-index:11;filter: var(--base-color-hue); /* 이미지 색상 반전 */}
.btn_robot button .chat_ani02 {display:inline-block;position:absolute;bottom:50px;left:50%;;width:16px;height:22px;transform: translateX(-50%);background:url("../images/common/robot_head.svg") center no-repeat;z-index:10;filter: var(--base-color-hue); /* 이미지 색상 반전 */}
.btn_robot button .chat_ani03 {display:inline-block;position:absolute;bottom:15px;left:15px;width:50px;height:50px;background:url("../images/common/sigmoid_icon.svg") center no-repeat;z-index:10;filter: var(--base-color-hue); /* 이미지 색상 반전 */}

.btn_robot.active button .chat_ani01 {
	-webkit-animation: chat_ani01 ease-out 1s forwards; 
	animation: chat_ani01 ease-out 1s forwards;
}

.btn_robot.active button .chat_ani02 {
	-webkit-animation: chat_ani02 ease-out 1s forwards; 
	animation: chat_ani02 ease-out 1s forwards;
}

.btn_robot.active button .chat_ani03 {
	-webkit-animation: chat_ani03 ease-out 0.8s forwards; 
	animation: chat_ani03 ease-out 0.8s forwards;
}

@keyframes chat_ani01 { 
	0% { bottom:-5px; } 
	50% { bottom:-45px; } 
	85% { bottom:-5px; }
	100% { bottom:-5px; } 
}

@keyframes chat_ani02 { 
	0% { bottom:50px; } 
	50% { bottom:-45px; } 
	100% { bottom:50px; } 
}

@keyframes chat_ani03 { 
	0% { rotate: 0deg;}
	30% { rotate: 0deg;}
	100% { rotate: 360deg;} 
}



/* layer_popup */
.layer_wrap * {font-size:17px;letter-spacing: -0.6px;}
.layer_wrap {width:100%;max-width:460px;position: fixed;bottom:60px;right: 30px;z-index: 10001;display: none;}
.layer_wrap .chat_wrap .chat_header {position: relative;width: fit-content; z-index: 1;display: flex;justify-content: center;gap: 10px;align-items: center;margin: 0 auto 40px;}
.layer_wrap .chat_wrap .chat_header h2 {color: #fff;font-size: 20px;font-weight: 400;margin-bottom: -7px;}
.layer_wrap .chat_wrap .chat_area {padding:0 5px 10px 0;height: 490px;}
.layer_wrap .chat_wrap {position: relative; height:680px;background-color:#fff;border-radius:20px;padding:20px 15px 20px 20px;border: 1px solid #0a4595;overflow: hidden;}
.layer_wrap .chat_wrap::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 70px; background: #0a4595; }
.layer_wrap .chat_wrap::after {content: '';position: absolute;bottom: 0;left: 0;z-index: 0;width: 100%;height: 80px;background: #0a4595;}
.layer_wrap .chat_wrap .btn_link_wrap button {font-size:18px;font-weight: 600;text-align: left;}
.layer_wrap .chat_wrap .chat_bottom .chat_input_wrap {padding:5px 50px 5px 20px;}
.layer_wrap .chat_wrap .chat_bottom .chat_input_wrap .btn_send {right:22px;top:18px;width:20px;height:20px;background-size:20px auto;}
.layer_wrap .chat_wrap .chat_input_ex {display: none; margin-top:10px;font-size:12px;}

/* banner */
.chat_area .chat_banner {display: flex; gap: 0 12px; margin-top: 20px;}
.chat_area .chat_banner li { display: flex; justify-content: center; align-items: center; border: 1px solid #ddd; border-radius: 10px; }
.chat_area .chat_banner li a {display: flex; justify-content: center; align-items: center; gap: 0 6px; width: 112px; height: 100%; padding: 10px; font-size: 14px; font-weight: 500; color: #222; text-align: center;}
.chat_area .chat_banner li:nth-child(1) a::before {content: ''; width: 18px; height: 15px; background: url(../images/common/ic_chat01.png) no-repeat center center; background-size: cover;}
.chat_area .chat_banner li:nth-child(2) a::before {content: ''; width: 16px; height: 15px; background: url(../images/common/ic_chat02.png) no-repeat center center; background-size: cover;}
.chat_area .chat_banner li:nth-child(3) a::before {content: ''; width: 18px; height: 15px; background: url(../images/common/ic_chat03.png) no-repeat center center; background-size: cover;}

.layer_wrap .chat_list > li {margin-top:20px;}
.layer_wrap .chat_list > li:first-child {margin-top:0;}
.layer_wrap .chat_list > li > p {line-height: 24px;}
.layer_wrap .chat_list > li > p.chat_id {font-size:22px;padding-left:40px;}
.layer_wrap .chat_list > li .chat_time {font-size:18px;}

.layer_wrap .question_list li button {background-size:20px auto;padding:10px 20px;padding-left:40px;background-position-x: 15px;text-align: left;font-size: 18px;font-weight: 600;}
.layer_popup_close {position:absolute;top: 24px;right: 30px;width: 18px;height: 18px; background: url("../images/common/icon_close.png") center no-repeat; background-size: 18px auto;}

@media only screen and (max-width: 768px){
	.layer_wrap {right:0;bottom:auto;top:50%;transform: translateY( -50% ); padding:10px;}
	.layer_popup_close {top:36px;}
	.chat_area .chat_banner li a {width: 100%; padding: 6px;}
}
@media only screen and (max-width: 768px){
	.chat_wrap .chat_area {height:calc(100vh - 130px);}
	.chat_wrap {height:calc(100vh - 100px );}
	.chat_wrap * {font-size:14px;letter-spacing: -0.6px;}
	.chat_list > li > p.chat_id {font-size:16px;padding-left:30px;}
	.answer_box .answer_box_tit {font-size:16px;}
	.btn_link_wrap button {font-size:12px;}
	.chat_wrap .chat_bottom .chat_input_wrap {padding:5px 50px 5px 20px;}
	.chat_wrap .chat_bottom .chat_input_wrap input {font-size:18px;}
	.chat_wrap .chat_bottom .chat_input_wrap .btn_send {right:22px;top:13px;width:20px;height:20px;background-size:20px auto;}
	.chat_wrap .chat_bottom .chat_input_wrap.on .btn_send {background-size:20px auto;}
	.question_list li button {background-size:20px auto;padding:10px 20px;padding-left:40px;background-position-x: 15px;}
}
.loading_wrap {
  margin: 0 auto 0;
  width: 60px;
  height:60px;
  text-align: center;
  background:url("../images/common/img_loaing.gif") center no-repeat;
  background-size:70px auto;
}


.tooltip {
  position: relative;
  display: block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #8d8c8c;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 3px 0;

  position: relative;
  z-index: 1;
  
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip:hover .bull_tail {
  visibility: visible;
}

/* 툴팁 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 화살표 기본 스타일 설정 시작 */

.tooltip .bull_tail {
  visibility: hidden; 
  position: absolute;
  left:10px;
  top:21px;
  border-style: solid;
  border-width: 5px;
  margin-left: -5px;
  border-color: transparent transparent #8d8c8c transparent;
}

/* 툴팁 화살표 기본 스타일 설정 끝 */

/* -------------------------- */

/* 툴팁 방향 설정 시작 */

.tooltip .tooltip-bottom {
  width: 88px;
  top: 150%;
  left: 50%;
  margin-left: -44px;
  font-size:12px;
  display:block;
}

.evalution_area button:last-child .tooltip-bottom {
  margin-left: -70px;
}

.tooltip .tooltip-bottom::after {
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-color: transparent transparent #8d8c8c transparent;
}