#chatbot{
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  width: 420px;
  height: 720px;
  border-radius: 10px;
  box-shadow: 3px 6px 10px #ccc;
  letter-spacing: 0px;
  line-height: 1.5;
}

/*///////////////////////////////////////////////챗봇 상단 박스*/
#chatbot .chat_top{
  position: relative;
  padding: 15px 20px;
  background: #FF417B;
  border-radius: 10px 10px 0 0;
}
/*챗봇상담텍스트*/
#chatbot .chat_top>.title{
  color: #fff;
  text-align: center;
}
/*상단 박스 버튼*/
#chatbot .chat_top>button{
  display: inline-block;
  position: absolute;
  top: 17px;
  width: 23px;
  text-indent: -9999px;
  overflow: hidden;
  border-radius: 0;
}
/*홈 버튼*/
#chatbot .chat_top .btn_home{
  left: 20px;
  background: url(/chatbot/img/icon_home.png) 50% 50% no-repeat;
  background-size: 20px;
}
/*닫기 버튼*/
#chatbot .chat_top .btn_close{
  right: 20px;
  background: url(/chatbot/img/icon_close.png) 50% 50% no-repeat;
  background-size: 20px;
}

/*///////////////////////////////////////////////챗봇 메인 박스*/
#chatbot .chat_main{
  background: #F3F3F3;
  height: 606px;
}
#chatbot .chat_main_in{
  position: absolute;
  top: 54px;
  bottom: 175px;
  padding-bottom: 30px;
  width: 100%;
  overflow: auto;
  font-size: 14px;
}
.chat_main_in::-webkit-scrollbar {
  width: 6px;  /* 스크롤바의 너비 */
}

.chat_main_in::-webkit-scrollbar-thumb {
  height: 5%; /* 스크롤바의 길이 */
  background: rgb(255, 65, 123, .5); /* 스크롤바의 색상 */
  
  border-radius: 10px;
}

.chat_main_in::-webkit-scrollbar-track {
  background: rgb(255, 155, 185, .1);  /*스크롤바 뒷 배경 색상*/
}
/*////////////////////////////////////////////////////답변 영역*/
#chatbot .chat_main_in .answer{
  margin: 30px 0 30px 60px;
  position: relative;
  max-width: 74%;
}
/*챗봇 아이콘*/
#chatbot .chat_main_in .answer .icon_bot{
  display: inline-block;
  position: absolute;
  top: 0px;
  left: -50px;
  width: 41px;
  height: 41px;
  background: url(/chatbot/img/icon_chat.png) 50% 50% no-repeat;
  background-size: 40px;
}
/*답변 텍스트*/
#chatbot .chat_main_in .answer>.txt{
  display: inline-block;
  padding: 12px;
  background: #fff;
  border-radius: 0 10px 10px 10px;
  box-shadow: 0px 1px 2px #ccc;
  min-width: 100px;
}
/*답변시간*/
#chatbot .chat_main_in .answer>.time{
  padding-top: 5px;
  font-size: 12px;
  color: #666;
}

/*////////////////////////////////////////////////////인트로 카테고리*/
#chatbot .chat_main_in .category2{
  margin: 30px auto;
}
#chatbot .chat_main_in .category2>ul{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 auto;
  width: 80%;
  text-align: center;
}
#chatbot .chat_main_in .category2>ul li{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 18px 0 12px 0;
  width: calc(100% / 3 - 8px);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 1px 2px #ccc;
  cursor: pointer;
}
#chatbot .chat_main_in .category2>ul li>.iconbox img{
  width: auto;
  height: 36px;
}
/*카테고리 리스트 박스*/
#chatbot .chat_main_in .answer .category_list{
  margin-top: 5px;
  padding: 12px;
  max-width: 250px;
  background: #fff;
  border-radius: 0 10px 10px 10px;
  box-shadow: 0px 1px 2px #ccc;
}
/*카테고리 리스트*/
#chatbot .chat_main_in .answer .category_list ul li{
  padding: 0 20px;
  margin: 5px 0;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid #FF87AC;
  box-sizing: border-box;
  cursor: pointer;
}
/*상담원 연결 버튼*/
#chatbot .answer .btn_consultant{
  margin-top: 12px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 30px;
  cursor: pointer;
  background: #FF87AC;
  color: #fff;
}
/*처음으로 버튼*/
#chatbot .answer .btn_home{
  margin-top: 12px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 30px;
  cursor: pointer;
  background: #FF87AC;
  color: #fff;
}
/*어드민에서 추가되는 버튼*/
#chatbot .answer .btn_add{
  margin-top: 12px;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 30px;
  border: 1px solid #FF87AC;
  box-sizing: border-box;
  cursor: pointer;
}

/*////////////////////////////////////////////////////질문 영역*/
#chatbot .chat_main_in .questions{
  margin: 0 20px 30px 0;
  text-align: right;
}
/*질문 텍스트*/
#chatbot .chat_main_in .questions>.txt{
  display: inline-block;
  padding: 12px;
  background: #FF417B;
  color: #fff;
  border-radius: 10px 0 10px 10px;
}
/*질문 시간*/
#chatbot .chat_main_in .questions>.time{
  padding-top: 5px;
  font-size: 12px;
  color: #666;
}

/*///////////////////////////////////////////////챗봇 하단 박스*/
#chatbot .chat_bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  border-radius: 0 0 10px 10px;
  background: #FFD8E4;
}
/*///////////////////////////////////////////////자주묻는질문*/
#chatbot .chat_bottom .search_top{
  position: relative;
  background: #fff9fa;
  border-top: 1px solid #FF417B;
}
#chatbot .chat_bottom .search_top ul{
  display: inline-block;
  padding: 15px 0;
  text-align: center;
}
#chatbot .chat_bottom .search_top ul li{
  display: inline-block;
  padding: 5px 12px;
  margin: 5px 3px;
  border-radius: 30px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
}
#chatbot .chat_bottom .search_top ul li:hover{
  border: 1px solid #FF417B;
}
/*#버튼*/
#chatbot .chat_bottom .search_top ul li::before{
  display: inline-block;
  margin-right: 3px;
  content: '#';
  color: #FF417B;
}
/*공고내 공고문의돌아가기 버튼*/
#chatbot .chat_bottom .btn_back{
  position: absolute;
  top: -40px;
  right: 35px;
  z-index: 99;
  padding: 5px 15px;
  border-radius: 30px;
  background: #666163;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
#chatbot .chat_bottom .btn_back::before{
  display: inline-block;
  margin-right: 5px;
  content: '';
  background: url(/chatbot/img/icon_back.png) 50% 50% no-repeat;
  width: 13px;
  height: 11px;
  background-size: 13px;
}

/*///////////////////////////////////////////////챗봇 검색 박스*/
#chatbot .chat_bottom .search_box{
  position: relative;
  padding: 10px 20px;
  border-radius: 0 0 10px 10px;
}
#chatbot .chat_bottom .search_box .input_box{
  position: relative;
  background: #fff;
  border-radius: 30px;
  box-shadow: 0px 3px 3px #d1b0ba;
}
#chatbot .chat_bottom .search_box .input_box>input{
  margin-left: 40px;
  width: 78%;
  height: 40px;
  border: 0;
  vertical-align: top;
}
/*검색박스 버튼*/
#chatbot .chat_bottom .search_box .input_box>button{
  position: absolute;
  top: 8px;
  width: 23px;
  height: 24px;
  text-indent: -9999px;
  overflow: hidden;
}
/*#버튼*/
#chatbot .chat_bottom .search_box .input_box .btn_hash{
  left: 15px;
  background: url(/chatbot/img/icon_hash.png) 50% 50% no-repeat;
  background-size: 22px;
  border-radius: 0;
}
/*전송버튼*/
#chatbot .chat_bottom .search_box .input_box .btn_search{
  right: 15px;
  background: url(/chatbot/img/icon_search.png) 50% 50% no-repeat;
  background-size: 22px;
  border-radius: 0;
}
/*///////////////////////////////////////////////공고내 문의 하단 박스*/
#chatbot .inquriy_bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #FFD8E4;
}
#chatbot .inquriy_bottom ul{
  display: inline-block;
  padding: 15px 0;
  text-align: center;
}
#chatbot .inquriy_bottom ul li{
  display: inline-block;
  padding: 7px 10px;
  margin: 5px 3px;
  border-radius: 30px;
  font-size: 14px;
  background: #fff;
  box-shadow: 0px 3px 3px #d1b0ba;
  cursor: pointer;
}
/*챗봇상담 버튼*/
#chatbot .inquriy_bottom ul li.btn_chat{
  background: #FF417B;
  color: #fff;
}
/*_______________________________________________모바일 기준으로*/
@media screen and (max-width:767px){
  #chatbot{
    /*top: 0;*/
    bottom: 0px;
    right: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0px;
    box-shadow: none;
  }

  /*///////////////////////////////////////////////챗봇 상단 박스*/
  #chatbot .chat_top{
    border-radius: 0;
  }

  /*///////////////////////////////////////////////챗봇 메인 박스*/
  #chatbot .chat_main_in{
    position: absolute;
    top: 54px;
    bottom: 175px;
    padding-bottom: 20px;
    width: 100%;
    overflow: auto;
    background: #F3F3F3;
    font-size: 14px;
  }
  /*////////////////////////////////////////////////////답변 영역*/
  #chatbot .chat_main_in .answer{
    margin: 20px 0 20px 60px;
    max-width: 70%;
  }

  /*////////////////////////////////////////////////////인트로 카테고리*/
  #chatbot .chat_main_in .category2{
    margin: 20px auto;
  }
  #chatbot .chat_main_in .category2>ul li>img{
    height: 33px;
  }
  /*카테고리 리스트*/
  #chatbot .chat_main_in .answer .category_list ul li{
    font-size: 13px;
  }

  /*////////////////////////////////////////////////////질문 영역*/
  #chatbot .chat_main_in .questions{
    margin: 0 20px 20px 0;
  }

  /*///////////////////////////////////////////////자주묻는질문*/
  #chatbot .chat_bottom{
    border-radius: 0;
  }
  #chatbot .chat_bottom .search_top ul li{
    margin: 6px 2px;
    font-size: 13px;
  }
  /*공고내 공고문의돌아가기 버튼*/
  #chatbot .chat_bottom .btn_back{
    top: -40px;
    right: 20px;
  }

  /*///////////////////////////////////////////////챗봇 검색 박스*/
  #chatbot .chat_bottom .search_box{
    border-radius: 0;
  }
  #chatbot .chat_bottom .search_box .input_box>input{
    width: 75%;
  }

  /*///////////////////////////////////////////////공고내 문의 하단 박스*/
  #chatbot .inquriy_bottom ul{
    display: inline-block;
    padding: 15px 0;
    text-align: center;
  }
  #chatbot .inquriy_bottom ul li{
    padding: 7px 15px;
    margin: 5px 1%;
    font-size: 13px;
  }

}