@charset "UTF-8";

.chatbot_wrap{position: fixed; right: 40px; bottom: 40px;}

.chatbot_wrap > .inner{position: relative;}

.chatbot_wrap > .inner > .chatbot_close_button{display: none;}
.chatbot_wrap > .inner.on > .chatbot_close_button{display: block; width: 70px;height: 70px; background: url(../../images/sub/chat_close.png) no-repeat center; background-color: #fff;border-radius: 16px;box-shadow: 0 7px 11px rgba(0, 0, 0, 0.3);}

.chatbot_wrap > .inner.on > .chatbot_button{display: none;}
.chatbot_wrap > .inner > .chatbot_button{display: block;width: 70px;height: 70px;padding-top: 47px;font-size: 13px;line-height: 13px;color: #fff;text-align: center;background: url(../../images/sub/chat_bot.png) no-repeat top 14px center;background-color: #09443f;border-radius: 16px;box-shadow: 0 7px 11px rgba(0, 0, 0, 0.3);box-sizing: border-box;}

.chatbot_wrap > .inner.on > .chat_wrap{display: block; position: absolute; right: 0; bottom: 100px; width: 400px; min-height: 500px; padding: 20px; background-color: #fff; border: 1px solid #eaeaea; border-radius: 16px; box-shadow: 0 7px 11px rgba(0, 0, 0, 0.12); box-sizing: border-box;}

.chatbot_wrap > .inner > .chat_wrap{display: none;}

.chatbot_wrap > .inner > .chat_wrap > .chat_header{position: relative;}
.chatbot_wrap > .inner > .chat_wrap > .chat_header::after{content: '';position: absolute;bottom: -38px;right: -20px;left: -20px;height: 1px;background-color: #e9e9e9;}
.chatbot_wrap > .inner > .chat_wrap > .chat_header > .restart_button{float: left;padding: 0 10px;font-size: 14px;line-height: 28px;color: #fff;background-color: #59b197;border-radius: 14px;}
.chatbot_wrap > .inner > .chat_wrap > .chat_header > .advice_button{float: right; width: 28px; height: 28px; background: url(../../images/sub/question.png) no-repeat center; background-color: #606060; border-radius: 100%;}

.chatbot_wrap > .inner > .chat_wrap > .chat_contents{position: absolute;top: 58px;right: 0;bottom: 70px;left: 20px;overflow-y: auto; padding-top: 20px; padding-right: 20px;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li + li{margin-top: 25px;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li.answer{text-align: left;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li.answer > i.bot_name{display: block; position: relative; padding-left: 50px; font-size: 18px; line-height: 40px; font-weight: 700; font-style: normal;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li.answer > i.bot_name::before{content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 40px; background: url(../../images/sub/chat_bot_character.png) no-repeat top center; background-color: #aae1d1; border-radius: 100%;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li > .bubble{display: inline-block; padding: 13px; margin-top: 10px; font-size: 15px; line-height: 18px; border-radius: 8px;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li > .bubble + .bubble{margin-top: 5px;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li > .bubble > span{display: block;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li.answer > .bubble{background-color: #eef5f4;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li.question > .bubble{background-color: #ededed;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li > span.date{display: block; margin-top: 5px; margin-bottom: 10px; font-size: 13px; line-height: 13px; color: #747474;}
.chatbot_wrap > .inner > .chat_wrap > .chat_contents > .chat_list > li.question{text-align: right;}
span + .button_list_wrap{margin-top: 10px;}
.bubble_button_list{display: flex; flex-wrap: wrap;}
.bubble_button_list > li{flex: 1 1 40%; min-width: 100px; padding: 2px;}
.bubble_button_list > li > a, .bubble_button_list2 > li > a{display: block;padding: 8px 8px;text-align: center;font-size: 14px;line-height: 20px;color: #2f4f4b;background-color: #cee2df;border-radius: 45px;}
.bubble_button_list2 > li > a{border-radius: 5px; text-align: left;}
.bubble_button_list2 > li + li{margin-top: 4px;}
.button_list_wrap2{position: relative; padding: 0 18px 0 17px;}
.button_list_wrap2 > .bubble1{position: absolute; top: 50%; left: 0; width: 12px; height: 20px; margin-top: -10px; background: url(../../images/sub/bubble1.png) no-repeat 0 0;}
.button_list_wrap2 > .bubble2{position: absolute; top: 50%; right: 0; width: 13px; height: 20px; margin-top: -10px; background: url(../../images/sub/bubble2.png) no-repeat 0 0;}
.list_list{margin-top: 5px; text-align: center;}
.list_list > li{display: inline-block; margin: 0 2px;}
.list_list > li > a{display: block; width: 8px; height: 8px; background-color: rgba(0, 0, 0, 0.2); border-radius: 100%;}
.list_list > li.on > a{background-color: #279385;}

.chatbot_wrap > .inner > .chat_wrap > .chat_input{position: absolute;right: 0;bottom: 0;left: 0;padding: 10px 20px 20px 65px;border-top: 1px solid #f1f1f1;}
.chatbot_wrap > .inner > .chat_wrap > .chat_input > a{position: absolute;bottom: 20px;left: 20px;width: 38px;height: 38px;font-size: 18px;line-height: 38px;color: #747474;font-weight: 700;text-align: center;background-color: #fff;border: 1px solid #ddd;border-radius: 8px;}
.chatbot_wrap > .inner > .chat_wrap > .chat_input > input[type="text"]{height: 40px; padding: 0 40px 0 5px; line-height: 38px; border: 1px solid #ddd; border-radius: 8px;}
.chatbot_wrap > .inner > .chat_wrap > .chat_input > input[type="text"]:focus{outline: none;}
.chatbot_wrap > .inner > .chat_wrap > .chat_input > .chat_send_button{position: absolute; bottom: 20px; right: 20px; width: 40px; height: 40px; background: url(../../images/sub/send.png) no-repeat center; cursor: pointer;}

.font_size_wrap{display: none;}
.font_size_wrap.on{display: block; position: absolute; top: 0; right: 0; bottom: 70px; left: 0; z-index: 5; background-color: rgba(0, 0, 0, 0.12); border-radius: 16px 16px 0 0;}
.font_size_wrap > .inner{position: absolute; top: 50%; left: 50%; width: 270px; height: 120px; padding: 20px; margin-top: -60px; margin-left: -135px; background-color: #fff; border-radius: 10px; box-sizing: border-box;}
.font_size_wrap > .inner > p{font-weight: 600;}
.font_size_wrap > .inner > .font_size_close{position: absolute; top: 15px; right: 15px; width: 26px; height: 26px; background: url(../../images/sub/font_size_close.png) no-repeat center; border: 1px solid #eaeaea; border-radius: 4px;}
.font_size_wrap > .inner > .size_list{display: flex; flex-wrap: wrap; margin-top: 20px;}
.font_size_wrap > .inner > .size_list > li{flex: 1; text-align: center;}
.font_size_wrap > .inner > .size_list > li > a{display: block; width: 40px; height: 40px; margin: 0 auto; line-height: 40px; color: #000; background-color: #eaeaea; border-radius: 100%;}
.font_size_wrap > .inner > .size_list > li.on > a{display: block; width: 40px; height: 40px; margin: 0 auto; line-height: 40px; color: #fff; background-color: #49b87b; border-radius: 100%;}
.font_size_wrap > .inner > .size_list > li:nth-child(1) > a{font-size: 12px;}
.font_size_wrap > .inner > .size_list > li:nth-child(2) > a{font-size: 14px;}
.font_size_wrap > .inner > .size_list > li:nth-child(3) > a{font-size: 16px;}
.font_size_wrap > .inner > .size_list > li:nth-child(4) > a{font-size: 18px;}
.blind{position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);}