@charset "utf-8";

#dychat-20210908 {display:none !important;}
.btn_robot {z-index:50;bottom:25px;}
.layer_wrap .question_list li button {text-align: left;}
.chat_list > li::before {display:block;}
.chat_wrap .chat_bottom .chat_input_wrap input {padding:6px 0;}

footer .down_button a {right:25px;}

.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(/site/www/chatbot/images/icon/icon_close.svg) center no-repeat;
    background-size: 12px auto;
    filter: var(--base-color-hue);
    background-color: #fff !important;
}

.chat_list > li::before {content:"";width:32px;height:32px;position:absolute;left:0;top:0;background:url("/site/www/chatbot/images/common/icon_logo_dd.svg") center no-repeat;background-size:32px auto;
	filter: inherit; /* 이미지 색상 반전 */
}

.btn_robot button .chat_ani01 {display:inline-block;position:absolute;bottom:-8px;left:50%;width:80px;height:84px;transform: translateX(-50%); background:url("/site/www/chatbot/images/common/robot_body_dd.svg") center no-repeat;background-size:80px auto;z-index:11;filter:inherit;}

.btn_robot button .chat_ani02 {display:none;}
.btn_robot button .chat_ani03 {display:none;}
.btn_robot .bloom_area {opacity:0;display:inline-block;position:absolute;bottom:10px;left:-260px;;width:250px;transform: translateX( 0% );background-image:none;background-color:#b8008c;color:#fff;border:1px solid #ddd;border-radius:10px;padding:10px;z-index:10;line-height:120%;font-size:14px;}

.btn_robot.active .bloom_area {
	-webkit-animation: bloom_effect ease-out 2s forwards;
	animation: bloom_effect ease-out 2s forwards;
	font-size:12px;
}

.show_first_wrap {position:relative;-webkit-animation: bloom_effect ease-out 2s forwards;opacity:0;
	animation: bloom_effect ease-out 1s 0.2s forwards;}
.show_first_wrap .show_first_con {background-color:#dddddd80;border-radius:15px;border:1px solid #ddd;padding:2px 6px 6px 6px;position:absolute;bottom:0;right:0px;width:220px;}
.btn_robot:hover .show_first_con {background-color: #e2e2e2;}
.show_first_wrap .btn_close {
    display:none;
    position: absolute;
    top: -8px;
    right: -8px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 30px;
    background: #fff url(/site/www/chatbot/images/icon/icon_close.svg) center no-repeat;
    background-size: 12px auto;
    filter: var(--base-color-hue);
    background-color: #fff !important;
}

.chat_chacrater {padding:5px 10px;padding-left:30px;background:url("/site/www/chatbot/images/common/icon_logo_dd.svg") left center no-repeat;color:#000;font-weight:bold;font-size:16px;}
.chat_chacrater_txt {font-size:11px;line-height:120%;margin-bottom:5px;}
.show_first_input_wrap {}
.show_first_input_wrap input {width:100%;border-radius:20px;padding:5px 35px 5px 15px;font-size:12px;background:#fff url("/site/www/chatbot/images/common/btn_send_on.svg") right 15px center no-repeat;background-size:20px auto;filter: var(--base-color-hue);}

.chat_simple_wrap {padding:17px 18px;border-radius:50px;background: rgb(221,15,131);background: linear-gradient(142deg, rgba(221,15,131,1) 0%, rgba(116,2,159,1) 100%);}
.chat_simple_wrap .chat_simple_txt {display:block;width:0px;height:30px;font-size:13px;color:#000;padding:3px 30px 0 15px;background:#fff url("/site/www/chatbot/images/common/bull_simple_send.jpg") right 15px center no-repeat;border-radius:20px;font-weight:bold;white-space : normal;overflow:hidden;
    -webkit-animation: chat_box_size ease-out 0.5s 1s forwards;
	animation: chat_box_size ease-out 0.5s 1s forwards;
    overflow:hidden;
}
.chat_simple_wrap .chat_simple_txt span {color:#b8008c;display:inline;}
.txt_flow {position:relative;-webkit-animation: bloom_effect ease-out 0.5s 1.5s forwards;
	animation: bloom_effect ease-out 0.5s 1.5s forwards;width:210px;overflow:hidden;height:30px;opacity:0;}
.txt_flow p {
    opacity:1;position: absolute; white-space: nowrap;will-change: transform;animation: marquee 60s linear infinite;
}

.btn_robot2 {position:fixed;bottom:20px;left:50%;transform: translateX( -50% );z-index:100;}
.btn_robot2 .chat_center_wrap {position:relative;width:410px;
    padding:4px 4px;border-radius:30px;padding-left:40px;
    background: rgb(116,2,159,1);background: rgb(221,15,131);background: linear-gradient(142deg, rgba(221,15,131,1) 0%, rgba(116,2,159,1) 100%);
}
.btn_robot2 .chat_center_wrap::after {display:block;content:"";width:32px;height:32px;position:absolute;left:5px;top:2px;background:url("/site/www/chatbot/images/common/icon_logo_dd.svg") center no-repeat;background-size:32px auto;}
.btn_robot2 .chat_center_wrap .txt_flow2 {background:#fff url("/site/www/chatbot/images/common/bull_simple_send.jpg") right 15px center no-repeat;padding:2px 15px 2px 10px;padding-right:45px;border-radius:20px;font-weight:bold;font-size:14px;color:#000;}

.txt_flow2 {position:relative;width:367px;height:30px;}
.txt_flow2 div {position:relative;width:320px;height:30px;overflow:hidden;}
.txt_flow2 p {height:25px;overflow:hidden;opacity:1;position: absolute;left:10px; white-space: nowrap;will-change: transform;animation: marquee 30s linear infinite; }

.sub_type {position:relative;height:60px;}
.sub_type .btn_robot2 {position:absolute !important;bottom:0;padding:10px 0;text-align:center;}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes chat_box_size {
	0% { width:0px;}
	100% { width:260px; font-size:13px;}
}

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

@keyframes bloom_effect {
	0% { opacity:0; }
	45% { opacity:0; }
	100% { opacity:1; }
}

@media (max-width: 1680px) {
    footer .down_button a {
        right: 34px;
    }
	.btn_robot {z-index:50;bottom:10px;right:10px;}
}

@media only screen and (max-width: 1200px){
	.btn_robot {bottom:10px;}
}

@media only screen and (max-width: 768px){
    .btn_robot2 .chat_center_wrap {width:310px;}
    .txt_flow2 {width:267px;height:30px;}
    .txt_flow2 div {width:220px;}
}