@charset "utf-8";

#dychat-20210908 {display:none !important;}
.btn_robot {z-index:50;bottom:60px;}
.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(../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("../images/common/icon_logo_dd.svg") center no-repeat;background-size:32px auto;
	filter: inherit; /* 이미지 색상 반전 */
}
.btn_robot {width: 144px; height: 144px;}
.btn_robot button {/* background: linear-gradient(-90deg, #4db8ac 0%, #4DBBC5 25%, #4E98B5 50%, #507AA8 75%, #2F4FA1 100%) !important; */ background: none; position: absolute; width: 100%; height: 100%; z-index: 1;}
.btn_robot button .chat_ani01 {display:inline-block;position:absolute;bottom:-8px;left:50%;width:80px;height:84px;transform: translateX(-50%); /* background:url("../images/common/robot_body_dd.svg") center no-repeat;background-size:80px auto; */ background: none; 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:#005295;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(../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("../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("../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("../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:76px;left:50%;transform: translateX( -50% );z-index:100; transition: all 0.5s ease-out;}
.btn_robot2 .chat_center_wrap {position:relative;width:517px; padding:11px 4px;border-radius:30px;padding-left:40px; background: #fff; border: 1px solid #E4E4E4;box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.06);}
.btn_robot2 .chat_center_wrap::after {display:block;content:"";width:30px;height:30px;position:absolute;left:16px;top:10px;background:url("../images/common/icon_logo_dd.svg") center no-repeat;background-size:32px auto;}
.btn_robot2 .chat_center_wrap .txt_flow2 {background:#fff url("../images/common/bull_simple_send.svg") right 15px center no-repeat;padding:2px 15px;padding-right:45px;border-radius:20px;font-weight:bold;font-size:14px;color:#000;}

.txt_flow2 {position:relative;width:100%;height:30px;}
.txt_flow2 div {position:relative;width:100%;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; line-height: 1.6;font-size: 18px;}

.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 {bottom: 40px;}
    .btn_robot2 .chat_center_wrap {width:310px;padding: 4px;}
    .txt_flow2 {width:100%;height:30px;padding: 2px 15px 2px 40px; font-size: 14px;}
    .btn_robot2 .chat_center_wrap .txt_flow2 {padding: 2px 15px 2px 40px;}
    .txt_flow2 div {width:220px;}
    .txt_flow2 p {font-size: 16px;}
    .btn_robot2 .chat_center_wrap::after {top: 4px;left: 6px;}
}

.fullpage-wrapper:has(footer.active) ~ .btn_robot2 {bottom: 280px;}