.chatbot_box{position: fixed; right: 100px; bottom: 100px; z-index: 9992;
border-radius: 20px; border: 1px solid #eeeeee; background: #fff; box-shadow:1px 1px 15px rgba(0,0,0,0.2);
padding: 10px; width: 360px; transition-duration: 1s; opacity: 0; visibility: hidden}

.chatbot_box.on_chat{opacity: 1; visibility: visible}

.top_chat{position: relative; padding: 10px}
.top_chat h2{font-size: 20px;}
.top_chat .chatbot_close{position: absolute; right: 10px; top: 10px}
.chatbot_box .chat{height: 500px; overflow-y: auto; background: #f8f8f8; border-radius: 20px; padding: 20px 20px}

.chatbot_box .chat .chat_box{display: flex; 
    flex-direction: column;
    align-items: flex-start; gap:10px}
.chatbot_box .chat .chat_box h3{display: flex; gap:10px; color: #888888; font-size: 16px;
    align-items: center;
    justify-content: flex-start;}
.chatbot_box .chat .chat_box h3 img{width: 40px; height: 40px; border-radius: 40px; overflow: hidden;
border: 1px solid #eeeeee}


.chat_txt{border-radius:0 28px 28px 28px; background: #fff; padding: 15px;  }
.chat_txt p{font-size: 17px; line-height: 150%; word-break: keep-all}


.goods_search{ }
.goods_search p{font-size: 16px; color: #777777; margin-bottom: 10px;display: block; width: 100%}
.goods_search button{font-size: 16px; color: #555555; border: 1px solid #eee; padding: 10px; border-radius: 50px;
background: #fff}

.goods_search_flex{display: flex; gap:10px;
flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;}
    
    
.chatbot_box .chat .chat_box p.date{color: #999999; font-size: 12px}    

.chatbot_box .chat .chat_box + .chat_box{margin-top: 20px}
.chatbot_box .chat .chat_box.user{align-items: flex-end;}
.chatbot_box .chat .chat_box.user .chat_txt{background: #564ef1; border-color: #564ef1; border-radius: 28px 0 28px 28px}
.chatbot_box .chat .chat_box.user .chat_txt p{color: #fff}

.chat_input{margin-top: 15px;
background: #fff; height: 56px; border-radius: 56px; border: 1px solid #ddd; padding: 0 25px; display: flex; 
    justify-content: space-between;
    align-items: center;}

.chat_input input{border: 0; height: 54px; line-height: 54px; font-size: 16px}
.chat_input input::placeholder{color: #a1a4b2}


.chat_input button{background: #fff; border: 0}




.ai_pop{position: fixed; z-index: 9999; background: rgba(0,0,0,0.5); left: 0; top: 0; width: 100%; height: 100%; transition-duration: 0.5s}
.ai_pop.close_ai{opacity: 0; visibility: hidden}


.ai_pop .ai_pop_content{width: 100%; max-width: 1280px; 
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); text-align: center}




.ai_pop_close{display: inline-flex; height: 38px; border-radius: 38px; padding: 0 15px; border: 0; background: #fff; 
box-shadow: 1px 1px 15px rgba(0,0,0,0.1);
    justify-content: center;
    align-items: center; margin-top: 20px; gap:10px}
.ai_pop_close span{color: #666; font-size: 15px}



.ai_pop_are{display: flex;background: #574ef1; padding:120px 80px 100px 80px; border-radius: 500px; box-shadow: 1px 1px 15px rgba(0,0,0,0.1);
    align-items: center;
    justify-content: flex-start; gap:70px}

.ai_pop .ai_pop_content .ai_pop_title{text-align: left; padding-left: 155px; position: relative }
.ai_pop .ai_pop_content .ai_pop_title h2{color: #fff; font-size: 32px; font-weight: 800}
.ai_pop .ai_pop_content .ai_pop_title img{position: absolute; left: 0; top: 0%;
transform: translateY(-50%);}

.ai_pop .ai_pop_content .ai_pop_input{margin-top: 10px;
background: #fff; height: 76px; border-radius: 76px; border: 1px solid #ddd; padding: 0 10px 0 30px; display: flex; 
    justify-content: space-between;
    align-items: center; overflow: hidden; text-align: left}



.ai_pop .ai_pop_content .ai_pop_input input{border: 0; height: 74px; line-height: 74px; font-size: 18px; flex:auto}
.ai_pop .ai_pop_content .ai_pop_input input::placeholder{color: #a1a4b2}


.ai_pop .ai_pop_content .ai_pop_input button{background: #fff; border: 0; height: 60px; width: 60px; border-radius: 60px;
box-shadow: 1px 1px 15px rgba(0,0,0,0.1);
}


.ai_pop .ai_pop_content .search_suggestion{display: flex; text-align: left; margin-top: 25px; padding: 0 60px; gap:10px;
justify-content: flex-start;
    align-items: center;}
.ai_pop .ai_pop_content .search_suggestion p{font-weight: bold; color: #2ce597; font-size: 20px}
.ai_pop .ai_pop_content .search_suggestion i{width: 3px; background: #ffffff; height: 16px; opacity: 0.1; }
.ai_pop .ai_pop_content .search_suggestion button{
	border: 2px solid #756efe; background: #574ef1;
	box-shadow: 1px 1px 15px rgba(0,0,0,0.1); height: 46px; padding: 0 15px; color: #fff; font-size: 16px;
	border-radius: 46px
}


.ai_pop_are .left{width: 50%}
.ai_pop_are .right{width: 50%}

.ai_pop_are .right p{
	background: rgba(255,255,255,0.15); height: 34px; padding: 0 15px; color: #fff; font-size: 16px;
	border-radius: 46px; display: inline-flex;
	justify-content: center;
    align-items: center; margin-bottom: 20px
}


.ai_pop_are .right h3{font-size: 28px; font-weight: 800; color: #fff; word-break: keep-all}
.ai_pop_are .right h3 b{font-weight: 800; color: #2ce597}
.ai_pop_are .right button{height: 64px; background: #30f17d; padding: 0 30px;
font-size: 22px; font-weight: 800; color: #3c35bd;
border-radius: 64px; display: inline-flex; 	justify-content: center;
    align-items: center; margin-top: 30px; border: 0; box-shadow: 1px 1px 15px rgba(0,0,0,0.1);}


.ai_pop_are .right button:disabled{opacity: 0.1;
cursor: not-allowed;pointer-events: none; }


.pop_ani_icon{position: absolute; right: 80px; top: -30px; z-index: 2}


@keyframes popUpDown {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.pop_ani_icon.icon01{animation: popUpDown 1s ease-in-out infinite;}
.pop_ani_icon.icon02{right: auto; top: auto; left: 80px; bottom: -30px; animation: popUpDown 1.5s ease-in-out infinite;}
.pop_ani_icon.icon03{top: auto; bottom: -30px; animation: popUpDown 1.3s ease-in-out infinite;}



@media (max-width: 1280px){
	
.ai_pop .ai_pop_content{max-width: 96%}

.ai_pop .ai_pop_content .ai_pop_title h2{font-size: 26px}
.ai_pop .ai_pop_content .search_suggestion p{font-size: 16px}
.ai_pop_are .right h3{font-size: 24px}
	
.ai_pop .ai_pop_content .ai_pop_input{margin-top: 18px}	
	
}

@media (max-width: 1024px){
	
	.ai_pop{display: none}
	
}



@media (max-width: 600px){
	
	.chatbot_box{right: auto; bottom: auto; left: 50%; top: 50%; width: 96%;
	transform: translate(-50%, -50%);}
	.chatbot_box .chat{height: 60vh}
	
}