@charset "utf-8";

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

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

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

#chat_con .question_list {margin-top:20px;}
#chat_con .question_list li {margin-top:10px;}
#chat_con .question_list li:first-child {margin-top:0;}
#chat_con .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 center no-repeat;}
#chat_con .question_list li button:hover {background-color:#f5f5f5;color:#222;}
#chat_con .btn_link_wrap {display:flex;gap:8px;margin-top:10px;flex-wrap: wrap;}
#chat_con .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 center no-repeat;color:#1a1a1a;}
#chat_con .btn_link_wrap button:hover {background-color:#666;color:#fff;border-color:#666;}
#chat_con .btn_link_wrap button.bull_link {background:url("../images/icon/bull_link.svg") 15px center no-repeat;}
#chat_con .btn_link_wrap button.bull_link:hover {background-color:#666;color:#fff;border-color:#666;}

#chat_con .btn_detail_wrap {display:flex;gap:10px;margin-top:10px;flex-wrap: wrap;justify-content: center;}
#chat_con .btn_detail_wrap button {position:relative;display:inline-block;padding:8px 20px;padding-left:42px;border-radius:20px;font-size:14px;border:1px solid var(--base-color);color:var(--base-color);background-color:#fff;}
#chat_con .btn_detail_wrap button::before {content:"";display:block;width:18px;height:18px;background:url("../images/common/btn_send_on.svg") center no-repeat;background-size:18px auto;position:absolute;left:15px;top:10px;filter: var(--base-color-hue);}

#chat_con .answer_box {border:1px solid #e4e4e4;border-radius:15px;font-size:13px;line-height:20px;padding:20px;margin-top:20px;}
#chat_con .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;}
#chat_con .answer_box .typing_effect {line-height:26px;}

#chat_con .chat_wrap .chat_bottom {margin-top:10px;}
#chat_con .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;}
#chat_con .chat_wrap .chat_bottom .chat_input_wrap.on {border:2px solid var(--base-color);}
#chat_con .chat_wrap .chat_bottom .chat_input_wrap input {font-size:22px;padding:10px 0;width:100%;font-weight:600;border:none;height:36px !important;}
#chat_con .chat_wrap .chat_bottom .chat_input_wrap input::-webkit-input-placeholder {font-weight:400;color:#ababab;}
#chat_con .chat_wrap .chat_bottom .chat_input_wrap input:-ms-input-placeholder {font-weight:400;color:#ababab;}
#chat_con .chat_wrap .chat_bottom .chat_input_wrap input:focus {outline: none;}
#chat_con .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_con .chat_wrap .chat_bottom .chat_input_wrap .btn_reset.on {display:block;}
#chat_con .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_con .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_con .chat_input_ex {margin-top:20px;text-align:center;color:#ababab;text-align:right;padding:0 10px;}
#chat_con .chat_input_ex img {width:auto;height:14px;}

#chat_con .evalution_area {display:flex;gap:8px;margin-top:20px;justify-content: end;}
#chat_con .evalution_area button {padding:0;}
#chat_con .evalution_area .btn_good {width:20px;height:20px;background:url("../images/icon/icon_good.svg") center no-repeat;background-size:18px auto;}
#chat_con .evalution_area .btn_bad {width:20px;height:20px;background:url("../images/icon/icon_bad.svg") center no-repeat;background-size:18px auto;}
#chat_con .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);}
#chat_con .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);}
#chat_con .evalution_area .btn_copy {width:20px;height:20px;background:url("../images/icon/icon_copy.svg") center no-repeat;background-size:18px auto;}
#chat_con .evalution_area .btn_sound {width:20px;height:20px;background:url("../images/icon/icon_sound2.svg") center no-repeat;background-size:18px auto;}
#chat_con .evalution_area .btn_replay {width:20px;height:20px;background:url("../images/icon/icon_replay_off.svg") center no-repeat;background-size:18px auto;}
#chat_con .evalution_area .btn_replay.on {background:url("../images/icon/icon_replay_om.svg") center no-repeat;background-size:18px auto;}

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

#chat_con .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); /* 이미지 색상 반전 */}
#chat_con .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); /* 이미지 색상 반전 */}

#chat_con .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); /* 이미지 색상 반전 */}

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

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

#chat_con .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;} 
}

@media only screen and (max-width: 768px){
	#chat_con #container {padding:10px;}
	#chat_con .chat_wrap .chat_area {height:calc(100vh - 130px);}
	#chat_con .chat_wrap {height:calc(100vh - 100px );}
	#chat_con .chat_wrap * {font-size:14px;letter-spacing: -0.6px;}
	#chat_con .chat_list > li > p.chat_id {font-size:16px;padding-left:30px;}
	#chat_con .answer_box .answer_box_tit {font-size:16px;}
	#chat_con .btn_link_wrap button {font-size:12px;}
	#chat_con .chat_wrap .chat_bottom .chat_input_wrap {padding:5px 50px 5px 20px;}
	#chat_con .chat_wrap .chat_bottom .chat_input_wrap input {font-size:14px;}
	#chat_con .chat_wrap .chat_bottom .chat_input_wrap .btn_send {right:22px;top:13px;width:20px;height:20px;background-size:20px auto;}
	#chat_con .chat_wrap .chat_bottom .chat_input_wrap.on .btn_send {background-size:20px auto;}
	#chat_con .question_list li button {background-size:20px auto;padding:10px 20px;padding-left:40px;background-position-x: 15px;}
	#chat_con .chat_list > li::before {width:26px;height:26px;background-size:26px auto;top:1px;}
}

/* layer_popup */
#chat_con .layer_wrap * {font-size:14px;letter-spacing: -0.6px;word-break: break-all;}
#chat_con .layer_wrap {width:100%;height:640px;max-width:410px;position: fixed;bottom:30px;right: 10px;z-index: 10001;display: none;padding:20px;}
#chat_con .layer_wrap .chat_wrap .chat_area {padding:0 5px 10px 0;height:485px;}

#chat_con .layer_wrap .chat_wrap .chat_top_btn_area + .chat_area {height:430px;}

#chat_con .layer_wrap .chat_wrap {height:600px;background-color:#fff;border-radius:20px;padding:20px 15px 20px 20px;}
#chat_con .layer_wrap .chat_wrap .btn_link_wrap button {font-size:12px;text-align:left;}
#chat_con .layer_wrap .chat_wrap .chat_bottom .chat_input_wrap {padding:5px 50px 5px 20px;height:50px;}
#chat_con .layer_wrap .chat_wrap .chat_bottom .chat_input_wrap input {font-size:14px;}
#chat_con .layer_wrap .chat_wrap .chat_bottom .chat_input_wrap .btn_send {right:5px;top:13px;width:20px;height:20px;background-size:20px auto;}
#chat_con .layer_wrap .chat_wrap .chat_input_ex {margin-top:10px;font-size:12px;}

#chat_con .layer_wrap .chat_list > li {margin-top:20px;}
#chat_con .layer_wrap .chat_list > li:first-child {margin-top:0;}
#chat_con .layer_wrap .chat_list > li::before {width:26px;height:26px;background-size:26px auto;top:1px;}
#chat_con .layer_wrap .chat_list > li > p {line-height: 24px;}
#chat_con .layer_wrap .chat_list > li > p.chat_id {font-size:16px;padding-left:30px;}
#chat_con .layer_wrap .chat_list > li .chat_time {font-size:11px;}

#chat_con .layer_wrap .question_list li button {background-size:20px auto;padding:10px 20px;padding-left:40px;background-position-x: 15px;}
#chat_con .layer_popup_close {position:absolute;top:8px;right:8px;width: 32px;height: 32px;padding:0;border: 1px solid #eee;border-radius: 30px;background:#fff url("../images/icon/icon_close.svg") center no-repeat;background-size:12px auto;filter: var(--base-color-hue); background-color:#fff !important;}

@media only screen and (max-width: 768px){
	#chat_con .layer_wrap {right:0;bottom:auto;top:50%;transform: translateY( -50% ); height:620px;}
	#chat_con .layer_popup_close {top:-2px;right:2px;}
	#chat_con .layer_wrap .chat_wrap .chat_bottom .chat_input_wrap .btn_send {right:20px;}
	#chat_con .btn_robot .bloom_area {display:none !important;}
}

#chat_con .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;
  filter: var(--base-color-hue);
}

@media only screen and (max-width: 320px){
	#chat_con .layer_wrap {height:500px;}
	#chat_con .layer_wrap .chat_wrap {height:480px;}
	#chat_con .layer_wrap .chat_wrap .chat_area {height:360px;}
}

#chat_con .chat_input_ex {position:relative;}
#chat_con .chat_input_ex .txt_letter {position:absolute;left:8px;top:1px;line-height:0;}
#chat_con .chat_input_ex .img_copyright {text-align: right;padding-right:8px;line-height:0;}
#chat_con .chat_input_ex img {width:auto;height:13px;}
#chat_con .chat_input_ex {padding:0;}
#chat_con .layer_wrap .chat_wrap .chat_input_ex {margin-top:12px;}
#chat_con .chat_wrap .chat_bottom {margin:0 -15px 0 -20px;padding:0 20px 20px;
	background: rgb(255,255,255);
	overflow: hidden;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 40%, rgba(209,209,209,1) 100%);
}
#chat_con .chat_wrap .chat_bottom .chat_input_wrap {background-color:#fff;}

#chat_con .chat_top_btn_area {display: flex;flex-wrap: wrap;gap:4px;margin-bottom: 19px;}

#chat_con .chat_top_btn_area button {border:1px solid #d9d9d9;background-color:#fff;padding:8px 15px;font-size:13px;border-radius:40px;color:#1e1e1e;box-shadow: 0px 3px 3px #ddd;font-weight:bold;}
#chat_con .chat_top_btn_area button:hover,
#chat_con .chat_top_btn_area button:focus,
#chat_con .chat_top_btn_area button.active {color:var(--base-color);background-color:#fff;border:1px solid var(--base-color);color:var(--base-color);}