@charset "utf-8";

/* skip */
#skip {
  height: 0;
}
#skip a {
  display: block;
  position: absolute;
  left: 0;
  top: -100px;
  width: 100%;
  height: 1px;
  text-align: center;
}
#skip a:focus,
#skip a:active {
  position: absolute;
  top: 0;
  z-index: 30;
  height: 18px;
  padding: 12px 0;
  background: #fff;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  z-index: 300;
}

/* layout */
.chat_wrap {
  height: 100%;
  overflow: hidden;
}
.chat_box {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.hot_issue + .chat_cont {
  top: 89px;
}
.chat_cont {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  bottom: 55px;
  padding: 15px 16px;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
}
.chat_cont.notice {
  bottom: 0;
}
.chat_bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55px;
  background: #fff;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  z-index: 100;
}

/* icon */
.ico_chat {
  width: 45px;
  height: 44px;
  background-image: url(../img/nut.png);
  border-radius: 30px; /* background-color:#ffed91; */
}
.ico_notice {
  width: 24px;
  height: 24px;
  background-image: url(../img/ico_notice.png);
}
.ico_guide {
  width: 24px;
  height: 24px;
  background-image: url(../img/ico_guide.png);
}
.ico_close {
  width: 25px;
  height: 24px;
  background-image: url(../img/ico_chat_close.png);
}
.ico_issue_emer {
  float: left;
  position: relative;
  top: -1px;
  width: 20px;
  height: 20px;
  background-image: url(../img/ico_issue.png);
}
.ico_issue {
  float: left;
  position: relative;
  top: -1px;
  width: 20px;
  height: 20px;
  background-image: url(../img/ico_issue_normal.png);
}
.ico_issue.normal {
  background-image: url(../img/ico_issue_normal.png);
}
.ico_nt_open {
  width: 20px;
  height: 20px;
  background-image: url(../img/ico_notice_down.png);
}
.ico_menu {
  width: 21px;
  height: 22px;
  background-image: url(../img/ico_menu.png);
}
.ico_faq {
  width: 23px;
  height: 22px;
  background-image: url(../img/ico_faq.png);
}
.ico_minus {
  width: 16px;
  height: 16px;
  background-image: url(../img/ico_minus.png);
}
.ico_plus {
  width: 16px;
  height: 16px;
  background-image: url(../img/ico_plus.png);
}
.ico_reset {
  width: 25px;
  height: 24px;
  background-image: url(../img/ico_reset.png);
}
.ico_pop_close {
  width: 18px;
  height: 19px;
  background-image: url(../img/ico_pop_close.png);
}
.ico_bpop_close {
  width: 25px;
  height: 24px;
  background-image: url(../img/ico_bpop_close.png);
}
.ico_font {
  width: 24px;
  height: 24px;
  background-image: url(../img/ico_font_on.png);
}
.ico_send {
  width: 21px;
  height: 20px;
  background-image: url(../img/ico_send.png);
}
/* .ico_reset{position: relative;top: 4px;width:18px;height:18px;background-image:url(../img/ico_reset.png);margin-left: 4px;} */

/* chat_top */
.h_tit {
  position: relative;
  height: 50px;
  padding: 12px 0 13px;
  text-align: center;
  background: #0066b3;
  z-index: 200;
  letter-spacing: -1px;
  box-sizing: border-box;
}
.h_tit > a {
  font-size: 1.9rem;
  font-weight: bold;
  color: #fff;
  vertical-align: top;
  line-height: 1.3;
}
/* .h_tit > a:hover:after{content:"";display:inline-block;position: relative;top: 2px;width:18px;height:18px;background:url(../img/ico_reset.png) 0 0 no-repeat;background-size:contain;margin-left: 8px;} */
*/ .h_tit.notice > a:hover:after {
  content: none;
}
.h_tit.notice .num {
  position: relative;
  top: 3px;
  right: 1px;
  display: inline-block;
  min-width: 22px;
  height: 22px;
  padding: 4px 7px 5px;
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -1px;
  border-radius: 5px;
  background-color: #ffe27c;
  vertical-align: top;
  box-sizing: border-box;
  text-align: left;
}
.top_btn .menu + .menu {
  margin-left: 15px;
}
.top_btn.left .menu,
.top_btn.right .menu {
  position: relative;
  float: left;
  overflow: visible;
}
.top_btn.left {
  position: absolute;
  top: 12px;
  left: 16px;
  z-index: 200;
}
.top_btn.right {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 200;
}
.notice_num {
  position: absolute;
  top: -1px;
  right: -3px;
  display: block;
  width: 13px;
  height: 13px;
  line-height: 1.25;
  border-radius: 10px;
  background: #ffea7c;
  font-size: 9px;
  font-weight: bold;
  box-sizing: border-box;
  letter-spacing: -1px;
}

.hot_issue {
  position: absolute;
  left: 0;
  right: 0;
  height: auto;
  padding: 10px 12px;
  border-radius: 0 0 15px 15px;
  background-color: #f4f4f4;
  box-sizing: border-box;
  z-index: 300;
}
.hot_issue:after {
  content: "";
  display: block;
  clear: both;
}
.issue_wrap {
  float: left;
  width: calc(100% - 46px);
}
.hot_issue .tit {
  display: block;
  font-size: 1.3rem;
  color: #333;
  margin-left: 2px;
  font-weight: 500;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: normal;
}
.hot_issue .date {
  display: none;
  margin-top: 8px;
  font-size: 1.2rem;
  color: #767676;
}
.hot_issue .issue_cont {
  display: none;
  margin-top: 8px;
  font-size: 1.3rem;
  color: #333;
  line-height: 1.4;
  word-break: break-all;
}
.hot_issue .btn_notice {
  float: right;
}
.hot_issue .btn_default {
  display: none;
  width: 100%;
  text-align: center;
}
.hot_issue.open .issue_wrap {
  max-height: 155px;
  margin-bottom: 10px;
  overflow-y: auto;
  -ms-overflow-y: auto;
}
.hot_issue.open .tit {
  overflow: visible;
  white-space: normal;
  font-weight: 500;
}
.hot_issue.open .date,
.hot_issue.open .issue_cont,
.hot_issue.open .btn_default {
  display: block;
}
.hot_issue.open .ico_nt_open {
  background-image: url(../img/ico_notice_up.png);
}

/* font wrap */
.font_wrap {
  display: none;
  position: absolute;
  bottom: 55px;
  left: 0;
  right: 0;
  height: 166px;
  padding: 15px 12px 12px;
  border-radius: 12px 12px 0 0;
  box-sizing: border-box;
  background-color: #f4f4f4;
  z-index: 400;
}
.font_inner .box_tit {
  display: block;
  font-weight: normal;
  text-align: center;
}
.font_bar {
  position: relative;
  margin-top: 37px;
  padding: 0 9px;
}
.font_bar:after {
  content: "";
  display: block;
  clear: both;
}
.font_level {
  width: 100%;
  height: 1px;
  background: #bdbdbd;
}
.font_type {
  float: left;
  position: relative;
  top: -4px;
}
.font_type.fz1 {
  width: 25%;
}
.font_type.fz2 {
  width: 25%;
}
.font_type.fz3 {
  width: 25%;
}
.font_type.fz4 {
  width: 25%;
}
.font_type.fz5 {
  position: absolute;
  right: 9px;
}
.font_type .btn_font {
  display: block;
  width: 9px;
  height: 9px;
  background-color: #bdbdbd;
  border-radius: 50%;
}
.font_type .btn_font:focus:after,
.font_type .btn_font:hover:after,
.font_type .btn_font:active:after,
.font_type .btn_font.on:after {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: #0a78cc;
  border-radius: 50%;
  position: relative;
  top: -3px;
  left: -3px;
}
.btn_control_box {
  position: relative;
}
.btn_control_box .btn_down {
  position: absolute;
  top: 0;
  left: 2px;
  padding: 4px;
}
.btn_control_box .btn_zoom {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px;
}
.font_wrap .btn_default {
  position: absolute;
  bottom: 11px;
  width: calc(100% - 24px);
  text-align: center;
}

/* chat_cont */
.faq_wrap {
  clear: both;
  padding-top: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #b6cfe3;
}
.faq_tit_box {
  text-align: center;
}
.faq_tit_box:before {
  content: "";
  position: relative;
  top: 13px;
  display: block;
  width: 100%;
  height: 1px;
  background: #b6cfe3;
  z-index: -1;
}
.faq_tit_box .tit_wrap {
  display: block;
  width: 89px;
  height: 26px;
  background: #fff;
  margin: 0 auto;
}
.faq_tit_box .tit_wrap .tit:before {
  content: "";
  display: inline-block;
  width: 31px;
  height: 26px;
  background: url(../img/nut.png) 0 0 no-repeat;
  background-size: contain;
}
.faq_tit_box .tit_wrap .tit > span {
  display: inline-block;
  font-size: 1.5rem;
  vertical-align: top;
  margin: 6px 0 6px 6px;
}
.faq_list .faq_link {
  display: block;
  height: 33px;
  padding: 10px;
  color: #333;
  font-size: 1.3rem;
  box-sizing: border-box;
}
.faq_list .faq_link:focus,
.faq_list .faq_link:hover,
.faq_list .faq_link.on {
  color: #0a78cc;
  font-weight: bold;
}

.bot_wrap {
  position: relative;
}
.bot_wrap.faq {
  margin-bottom: 23px;
}
.bot_wrap + .user_wrap,
.user_wrap + .bot_wrap {
  margin-top: 20px;
}
.bot_wrap + .bot_wrap {
  margin-top: 10px;
}
.bot_name {
  float: left;
  margin-right: 5px;
}
.bot_box .bot_txt {
  position: relative;
  line-height: 1.29;
  border-radius: 0 15px 15px 15px;
}
.bot_box .bot_txt + .time {
  margin: 0 0 0 50px;
}
.bot_box .bot_txt + .bot_txt {
  clear: both;
  margin-top: 5px;
}
.bot_box .bot_txt .chat_talk {
  float: left;
  min-height: 45px;
  max-width: 80%;
  padding: 10px;
  line-height: 1.43;
  background: #f1f9ff;
  border-radius: 0 15px 15px 15px;
  border: 1px solid #d4e7f5;
  box-sizing: border-box;
}
.bot_box .bot_txt .chat_talk + .chat_talk {
  clear: both;
  margin: 5px 0 0 50px;
}

.btn_default_list {
  margin-top: 10px;
}
.btn_default_list li + li {
  margin-top: 6px;
}
.btn_default {
  position: relative;
  display: block;
  max-width: 100%;
  min-height: 38px;
  padding: 9px 10px;
  color: #333;
  line-height: 1.43;
  border-radius: 5px;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.05);
  border: 1px solid #d4e7f5;
  background-color: #fff;
  box-sizing: border-box;
}
.btn_default:focus,
.btn_default:hover {
  font-weight: 500;
}
.btn_default.on {
  background-color: #0a78cc;
  color: #fff;
  font-weight: 500;
}
.btn_default.link:after {
  content: "";
  position: absolute;
  top: 9px;
  right: 10px;
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/ico_link.png) right center no-repeat;
  background-size: contain;
}
.btn_default.link.on:after {
  background: url(../img/ico_link_on.png) right center no-repeat;
  background-size: contain;
}
.btn_default.download > .download-file-name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90%;
}
.btn_default.download:after {
  content: "";
  position: absolute;
  top: 9px;
  right: 10px;
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/ico_download.png) right center no-repeat;
  background-size: contain;
}
.btn_default.download.on:after {
  background: url(../img/ico_download_on.png) right center no-repeat;
  background-size: contain;
}
.btn_default.more,
.btn_default.close {
  text-align: center;
}
.btn_default.more > span:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  width: 21px;
  height: 20px;
  background: url(../img/ico_more.png) 0 0 no-repeat;
  background-size: contain;
  margin-left: 3px;
  vertical-align: top;
}
.btn_default.more.on > span:after {
  background: url(../img/ico_more_on.png) 0 0 no-repeat;
  background-size: contain;
}
.btn_default.close > span:after {
  content: "";
  position: relative;
  top: 1px;
  display: inline-block;
  width: 21px;
  height: 20px;
  background: url(../img/ico_more_close.png) 0 0 no-repeat;
  background-size: contain;
  margin-left: 3px;
  vertical-align: top;
}
.btn_default.close.on > span:after {
  background: url(../img/ico_more_close_on.png) 0 0 no-repeat;
  background-size: contain;
}

.menu_box_wrap {
  clear: both;
}
.menu_box_wrap + .time,
.faq_wrap + .time {
  width: 100%;
}
.chat_menu {
  font-size: 0;
  margin: 0 -12px 0 0;
}
.chat_menu li {
  display: inline-block;
  width: 33.33%;
  vertical-align: top;
}
.chat_menu .icon_box {
  display: block;
  min-height: 80px;
  margin: 7px 10px 0 0;
  border-radius: 10px;
  padding: 5px 10px 7px;
  border: 1px solid #b6cfe3;
  background-color: #fff;
  box-sizing: border-box;
}
.icon_box .icon {
  display: block;
  height: 45px;
  background-repeat: no-repeat;
  background-size: contain !important;
  margin: auto auto 7px auto;
}
.icon_box .icon.qmenu {
  width: 45px;
  background-image: url(../img/ico_menu01.png);
}
/* .icon_box .icon.menu02{width:45px;background-image:url(../img/ico_menu02.png);}
.icon_box .icon.menu03{width:45px;background-image:url(../img/ico_menu03.png);}
.icon_box .icon.menu04{width:45px;background-image:url(../img/ico_menu04.png);}
.icon_box .icon.menu05{width:45px;background-image:url(../img/ico_menu05.png);}
.icon_box .icon.menu06{width:45px;background-image:url(../img/ico_menu06.png);}
.icon_box .icon.menu07{width:45px;background-image:url(../img/ico_menu07.png);}
.icon_box .icon.menu08{width:45px;background-image:url(../img/ico_menu08.png);}
.icon_box .icon.menu09{width:45px;background-image:url(../img/ico_menu09.png);} */
.icon_box .m_txt {
  position: relative;
  display: block;
  font-size: 1.4rem;
  padding: 2px 0;
  text-align: center;
  color: #333;
}
.icon_box:focus,
.icon_box:hover,
.icon_box:active,
.icon_box.on {
  border: 2px solid #0a78cc;
}
.icon_box:focus .m_txt,
.icon_box:hover .m_txt,
.icon_box:active .m_txt,
.icon_box.on .m_txt {
  color: #0a78cc;
  font-weight: bold;
}

.btn_outside_wrap {
  clear: both;
  padding: 10px 0 0 50px;
}
.btn_outside_wrap .btn {
  display: inline-block;
  min-width: 90px;
  height: 38px;
  color: #333;
  line-height: 1.43;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid #d4e7f5;
  background: #fff;
}
.btn_outside_wrap .btn:focus,
.btn_outside_wrap .btn:hover,
.btn_outside_wrap .btn:active,
.btn_outside_wrap .btn.on {
  background-color: #0a78cc;
  color: #fff;
  font-weight: 500;
}
.btn_outside_wrap .btn.disabled {
  color: #999;
  cursor: not-allowed;
}
.btn_outside_wrap .btn.disabled:focus,
.btn_outside_wrap .btn.disabled:hover,
.btn_outside_wrap .btn.disabled:active {
  background: #fff;
  font-weight: normal;
}

.query_wrap {
  clear: both;
  padding: 4px 0 0 50px;
}
.query_list:after {
  content: "";
  display: block;
  clear: both;
}
.query_list {
  margin-left: -6px;
}
.query_list .btn_default {
  float: left;
  min-width: 83px;
  margin: 6px 0 0 6px;
  padding: 8px 15px;
  text-align: left;
  box-shadow: none;
}

.carousel_list .slick-list {
  padding: 6px 0 0 6px;
  overflow: visible;
}
.carousel_list .slick-slide {
  width: 280px !important;
}
.carousel_list .slick-slide + .slick-slide {
  margin-left: 12px;
}
.query_box .query_tit {
  display: block;
  height: 40px;
  padding: 11px 10px;
  border-radius: 10px 10px 0 0;
  background-color: #f7b47a;
  box-sizing: border-box;
}
.query_box .btn_default_list {
  margin-top: 0;
  padding: 10px;
  background-color: #f1f9ff;
}
.slick-dots {
  bottom: -20px;
}
.slick-dots li button,
.slick-dots li button:before,
.slick-dots li {
  width: 6px;
  height: 6px;
  content: "";
  padding: 0;
}
.slick-dots li button:before {
  background-color: #c5c5c5;
  border-radius: 50%;
  opacity: 1;
}
.slick-dots li.slick-active button:before {
  background-color: #0a78cc;
  opacity: 1;
}
.slick-dotted.slick-slider {
  margin-bottom: 21px;
  overflow: visible !important;
}
.slick-prev.slick-disabled,
.slick-next.slick-disabled {
  opacity: 0;
}
.slick-prev:before,
.slick-next:before {
  display: none;
}
.slick-prev {
  display: block;
  width: 30px;
  height: 30px;
  background: url(../img/ico_arr_right.png) center no-repeat
    rgba(255, 255, 255, 0.6);
  background-size: 20px;
  background-position: center;
  font-size: 1px;
  z-index: 500;
  padding: 5px;
  left: -66px;
  box-sizing: border-box;
  border: 1px solid #efefef;
}
.slick-prev:hover,
.slick-prev:focus {
  background: url(../img/ico_arr_right.png) center no-repeat
    rgba(255, 255, 255, 0.6);
  background-size: 20px;
}
.slick-next {
  display: block;
  right: -16px;
  width: 30px;
  height: 30px;
  background: url(../img/ico_arr_left.png) center no-repeat
    rgba(255, 255, 255, 0.6);
  background-size: 20px;
  padding: 5px;
  border: 1px solid #efefef;
  box-sizing: border-box;
  z-index: 100;
}
.slick-next:hover,
.slick-next:focus {
  background: url(../img/ico_arr_left.png) center no-repeat
    rgba(255, 255, 255, 0.6);
  background-size: 20px;
}

.img_area {
  position: relative;
  max-width: fit-content;
  margin-top: 10px;
}
.img_area:after {
  content: "";
  display: block;
  clear: both;
}
.img_area > a {
  display: inline-block;
}
.img_area > a > img {
  max-width: 100%;
  height: auto !important;
}
.img_area .bot_img {
  float: left;
  max-width: 200px;
}
.img_area .btn_enlage {
  position: absolute;
  bottom: 0;
  float: left;
  margin-left: 6px;
  width: 24px;
  height: 24px;
  padding: 5px;
  box-sizing: border-box;
}

/*
 * 260615 case 3-1. 관련 인텐트 word 캐러셀
 * - 기존 query_list/flex-wrap 구조는 항목이 많을 때 아래 줄로 떨어진다.
 * - 퍼블 chat_type.html 기준처럼 btn_default_list.variable-width를 Slick 대상으로 사용한다.
 */
.query_wrap.word .btn_default_list {
  margin: 10px 0 0;
}

.query_wrap.word .btn_default_list li + li {
  margin-top: 0;
}

.query_wrap.word .btn_default {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: none;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  text-align: center;
}

/*
 * 260615 case 3-2. 관련 인텐트 word 캐러셀 화살표 보정
 * - 기존 전역 .slick-prev { left:-66px; }가 word 캐러셀에도 적용되면 prev가 화면 밖으로 빠진다.
 * - 시나리오 캐러셀 보정과 분리하기 위해 query_wrap.word 범위에만 위치/크기 override를 둔다.
 */
.query_wrap.word .slick-prev:before,
.query_wrap.word .slick-next:before {
  display: none;
}

.query_wrap.word .slick-prev,
.query_wrap.word .slick-next {
  position: absolute;
  top: 50%;
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid #d4dae4;
  border-radius: 4px;
  box-sizing: border-box;
  text-indent: -9999px;
  transform: translateY(-50%);
  z-index: 90;
}

.query_wrap.word .slick-prev {
  left: -4px;
  padding: 8px;
  /* 기존 인터페이스 기준 화살표 방향을 유지한다. */
  background: url(../img/ico_arr_right.png) center no-repeat
    rgba(255, 255, 255, 0.75);
  background-size: 20px 20px;
}

.query_wrap.word .slick-prev:hover,
.query_wrap.word .slick-prev:focus {
  background: url(../img/ico_arr_right.png) center no-repeat
    rgba(255, 255, 255, 1);
  background-size: 20px 20px;
}

.query_wrap.word .slick-next {
  right: -4px;
  padding: 10px;
  /* 기존 인터페이스 기준 화살표 방향을 유지한다. */
  background: url(../img/ico_arr_left.png) center no-repeat
    rgba(255, 255, 255, 0.75);
  background-size: 20px 20px;
}

.query_wrap.word .slick-next:hover,
.query_wrap.word .slick-next:focus {
  background: url(../img/ico_arr_left.png) center no-repeat
    rgba(255, 255, 255, 1);
  background-size: 20px 20px;
}

.accordion {
  width: 260px;
  max-width: 100%;
  margin-top: 10px;
}
div.accordion + div.accordion {
  margin-top: 6px;
}
.accordion .btn_default .acc_tit {
  float: left;
  display: block;
  width: calc(100% - 38px);
}
.accordion .btn_default .acc_tit:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/ico_arr_down.png) 0 0 no-repeat;
  background-size: contain;
}
.accordion .btn_default.on .acc_tit:after {
  background: url(../img/ico_arr_up.png) 0 0 no-repeat;
  background-size: contain;
}
.accordion .acc_cont {
  display: none;
  padding: 10px;
}

.sch_box_tit_wrap {
  overflow: auto;
  padding-top: 1px;
  margin-top: -1px;
}
.related_sch_tit {
  float: left;
}
.related_sch_tit > span:before {
  float: left;
  content: "";
  position: relative;
  top: 2px;
  margin-right: 5px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/ico_chat_sch.png) 0 0 no-repeat;
  background-size: contain;
}
.related_sch_tit > span:before {
  content: "";
  position: relative;
  top: 2px;
  margin-right: 5px;
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/ico_chat_sch.png) 0 0 no-repeat;
  background-size: contain;
}
.related_sch_tit > span {
  float: left;
  display: block;
  line-height: 1.43;
  margin-bottom: 10px;
}
.related_sch_tit > span {
  display: block;
  line-height: 1.43;
  margin-bottom: 10px;
}
.related_sch_tit > span > p {
  float: left;
}
.related_sch_tit > span > .sch-det {
  font-size: 1.3rem;
  line-height: 1.38;
  font-weight: normal;
}
/* .sch-query{text-overflow: ellipsis;overflow: hidden; white-space: nowrap; max-width: 29%} */
.sch_box {
  padding: 10px 12px 12px;
  border-radius: 10px;
  background-color: #fff;
}
.sch_box + .sch_box {
  margin-top: 14px;
}
.sch_box_wrap {
  float: left;
}
.sch_box .sch_top:after {
  content: "";
  display: block;
  clear: both;
}
.sch_top .sch_tit {
  float: left;
  width: calc(100% - 100px);
  line-height: 24px;
}
.sch_top .btn_doc_download {
  float: right;
  display: block;
  min-width: 86px;
  height: 24px;
  font-size: 1.2rem;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid #d4e7f5;
  background: #fff;
  box-sizing: border-box;
}
.sch_top .btn_doc_download:focus,
.sch_top .btn_doc_download:hover,
.sch_top .btn_doc_download:active,
.sch_top .btn_doc_download.on {
  background-color: #0a78cc;
  color: #fff;
  font-weight: 500;
}
.sch_cont {
  margin-top: 14px;
  font-size: 1.3rem;
  line-height: 1.38;
  color: #555;
}
.sch_cont li + li {
  margin-top: 14px;
}
.sch_cont .point1 {
  color: #1f486f;
}
.sch_cont .point2 {
  color: #ff3131;
}

.chat_cont.notice .no_result {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 500;
}
.chat_cont.notice .no_result .alert:before {
  content: "";
  position: relative;
  top: -3px;
  display: inline-block;
  margin-right: 2px;
  width: 20px;
  height: 20px;
  background: url(../img/ico_issue_normal.png) 0 0 no-repeat;
  background-size: contain;
  vertical-align: top;
}
.accordian.notice {
  width: 100%;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}
.accordian.notice + .accordian.notice {
  margin-top: 15px;
}
.acc_tit_box {
  position: relative;
  padding: 10px 12px;
  min-height: 49px;
  display: block;
  border-radius: 10px 10px 0 0;
  background-color: #f4f4f4;
  border: 1px solid transparent;
  border-bottom: none;
}
.acc_tit_box .notice_tit:after {
  content: "";
  display: block;
  clear: both;
}
.notice_tit .issue_tit {
  display: inline-block;
  width: 100%;
  font-size: 1.3rem;
  padding: 3px 0;
  word-break: keep-all;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  color: #333;
  margin-left: 2px;
  text-overflow: ellipsis;
}
.notice_tit .ico_issue_emer + .issue_tit {
  width: calc(100% - 22px);
}
.notice_tit .ico_issue + .issue_tit {
  width: calc(100% - 22px);
}
.notice_tit .date {
  display: inline-block;
  margin-top: 10px;
  font-size: 1.2rem;
  color: #767676;
}
.acc_tit_box .btn_notice {
  position: absolute;
  bottom: 10px;
  right: 12px;
  z-index: 100;
}
.acc_tit_box + .acc_cont {
  display: none;
  border-radius: 10px 10px 0 0;
}
.accordian.notice .acc_cont {
  font-size: 1.3rem;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 0 0 10px 10px;
  background-color: #f4f4f4;
  border: 1px solid transparent;
  border-top: none;
}
.accordian.notice .acc_cont .cont_box {
  border-top: 1px solid #dcdcdc;
  padding: 10px 0;
}
.accordian.notice .acc_cont .btn_default {
  margin-top: 10px;
  width: 100%;
  text-align: center;
}

.acc_tit_box.on {
  border: 1px solid #d4e7f5;
  border-bottom: none;
  background-color: #f1f9ff;
}
.acc_tit_box.on .issue_tit {
  font-weight: bold;
}
.acc_tit_box.on .ico_nt_open {
  background-image: url(../img/ico_notice_up.png);
}
.acc_tit_box.on + .acc_cont {
  display: block;
  border: 1px solid #d4e7f5;
  border-top: none;
  background-color: #f1f9ff;
}

.time {
  clear: both;
  display: block;
  padding-top: 5px;
  font-size: 1.2rem;
  color: #767676;
}

.user_box:after {
  content: "";
  display: block;
  clear: both;
}
.user_box .user_txt {
  float: right;
  max-width: 80%;
  position: relative;
  padding: 10px;
  line-height: 1.43;
  border-radius: 15px 0 15px 15px;
  color: #333;
  border: 1px solid #f5da4c;
  background-color: #fff496;
}
.user_box .user_txt:after {
  content: "";
  display: block;
  clear: both;
}
.user_box .user_txt + .user_txt {
  clear: both;
  margin-top: 10px;
}
.time.user {
  clear: both;
  text-align: right;
}

/* chat_bottom */
.bottom_innner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 9px 16px 10px 12px;
  z-index: 100;
}
.bottom_innner:after {
  content: "";
  display: block;
  clear: both;
}
.btm_control {
  position: absolute;
  top: 0;
  left: 0;
}
.btm_control .btn {
  width: 35px;
  height: 35px;
  padding: 7px;
  box-sizing: border-box;
}
.btm_control .btn + .btn {
  margin-left: 4px;
}
.btm_control .btn.menu:focus .ico_menu,
.btm_control .btn.menu:hover .ico_menu,
.btm_control .btn.menu:active .ico_menu,
.btm_control .btn.menu.on .ico_menu {
  background-image: url(../img/ico_menu_on.png);
}
.btm_control .btn.faq:focus .ico_faq,
.btm_control .btn.faq:hover .ico_faq,
.btm_control .btn.faq:active .ico_faq,
.btm_control .btn.faq.on .ico_faq {
  background-image: url(../img/ico_faq_on.png);
}

.btm_control:after {
  content: "";
  position: relative;
  top: 4px;
  display: inline-block;
  width: 1px;
  height: 28px;
  background: #f0f0f0;
  vertical-align: top;
  margin: 0 9px 0 7px;
}
.inp_box {
  margin: 0 0 0 97px;
}
.inp_txt .inp {
  display: block;
  width: 100%;
  ime-mode: active;
  height: 35px;
  padding: 10px 35px 10px 4px;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn_send {
  position: absolute;
  top: 0;
  right: 0;
}
.btn_send .btn {
  width: 35px;
  height: 35px;
  padding: 7px;
  box-sizing: border-box;
}
.inp_txt .inp:focus + .btn_send .ico_send,
.btn_send .btn:focus .ico_send {
  background-image: url(../img/ico_send_on.png);
}

.auto_keyword {
  display: none;
  background-color: #fff;
  position: absolute;
  bottom: 55px;
  left: 0;
  right: 0;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.07);
  z-index: 100;
  overflow: hidden;
}
.keyword_box .sch_keyword {
  color: #333;
  display: block;
  padding: 9px 14px 9px 16px;
  line-height: 1.43;
  box-sizing: border-box;
}
.keyword_box .sch_keyword strong {
  font-weight: bold;
}
.keyword_box .sch_keyword:focus,
.keyword_box .sch_keyword:hover,
.keyword_box .sch_keyword:active,
.keyword_box .sch_keyword.on {
  background: #f1f9ff;
}

/* popup */
.dimed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 300;
}
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  z-index: 350;
  border-radius: 20px;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}
.popup_top {
  position: relative;
  height: 45px;
  padding: 12px 20px;
  background-color: #0a78cc;
  box-sizing: border-box;
}
.popup_top .pop_tit {
  font-size: 1.6rem;
  line-height: 1.3;
  color: #fff;
}
.popup_top .pop_close {
  position: absolute;
  top: 13px;
  right: 20px;
}
.popup .layer_cont {
  padding: 20px;
}
.pop_box .cont_tit {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
}
.pop_box .cont_tit + .star_rating_box,
.pop_box .cont_tit + .opinion {
  margin-top: 10px;
}
.pop_box .cont_tit.alert {
  text-align: center;
}
.popup .layer_cont .btn_default {
  width: 100%;
  margin-top: 20px;
  text-align: center;
}

.star_rating_box {
  text-align: center;
  margin-bottom: 30px;
}
.star_rating_box .ico_star {
  display: inline-block;
  width: 46px;
  height: 46px;
  padding: 6px;
  background: url(../img/ico_star.png) center no-repeat;
  background-size: 34px 34px;
  text-indent: -9999px;
  vertical-align: top;
  cursor: pointer;
  box-sizing: border-box;
}
.star_rating_box .ico_star.is_selected {
  background-image: url(../img/ico_star_on.png);
  -ms-backface-visibility: hidden; /* IE 랜더링 이미지 깨짐 방지*/
}
.opinion {
  width: 100%;
  height: 90px;
  border: 1px solid #e6e6e6;
  background: #fff;
  resize: none;
  line-height: 1.43;
  padding: 10px;
  box-sizing: border-box;
  -ms-overflow-y: auto;
}

/* 260615 만족도 조사: chat_layer.html의 layer_pop survey 스타일을 suggestion_layer에만 적용한다. */
#suggestion_layer.layer_pop {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 350;
  width: 320px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
}

#suggestion_layer .layer_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#suggestion_layer .layer_top + .layer_cont {
  margin-top: 24px;
}

#suggestion_layer .layer_top_tit {
  font-size: 1.8rem;
  font-weight: 600;
}

#suggestion_layer .btn_pop_close {
  width: 24px;
  height: 24px;
}

#suggestion_layer .layer_cont {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#suggestion_layer .top_tit {
  display: block;
  font-weight: 600;
}

#suggestion_layer .cont_box + .cont_box {
  margin-top: 24px;
}

#suggestion_layer .star_rating_box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0 0;
}

#suggestion_layer .star_rating_box .ico_star {
  float: none;
  width: 36px;
  height: 36px;
  padding: 0;
  background-size: contain;
}

#suggestion_layer .star_rating_box .ico_star + .ico_star {
  margin-left: 12px;
}

#suggestion_layer .opinion_box {
  margin: 12px 0 6px;
}

#suggestion_layer .opinion_box .opinion {
  height: 120px;
  padding: 12px 16px;
  border-radius: 8px;
  outline: none;
}

#suggestion_layer .opinion_num {
  display: block;
  color: #707070;
  font-size: 1.4rem;
  text-align: right;
}

#suggestion_layer .btn_default_list.w_half {
  margin-top: 24px;
}

#suggestion_layer .btn_default_list.w_half .btn_default {
  width: 100%;
  text-align: center;
}

.layer_cont.alert .cont_tit {
  text-align: center;
}
.layer_cont.alert .cont_tit + .pop_txt_box {
  margin-top: 20px;
  line-height: 1.43;
  text-align: center;
  word-break: keep-all;
}
.btn_pop_close {
  position: fixed;
  top: 13px;
  right: 16px;
  z-index: 350;
}
.popup.guide {
  width: auto;
  overflow: visible;
  background: transparent;
}
.popup.guide .layer_cont {
  padding: 0;
}
.pop_img_box .img_guide {
  width: 340px;
  max-height: calc(100vh - 100px);
  -ms-backface-visibility: hidden; /* IE 랜더링 이미지 깨짐 방지*/
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast; /* 크롬,사파리 등 랜더링 이미지 깨짐 방지*/
}

/* service_wrap */
.service_wrap {
  box-sizing: border-box;
  padding: 0 15px;
  margin: 41px auto auto auto;
  text-align: center;
  color: #3a3a3a;
}
.img_chk {
  width: 46px;
  height: 45px;
  margin: 0 auto;
}
.img_chk > img {
  max-width: 100%;
  -ms-backface-visibility: hidden; /* IE 랜더링 이미지 깨짐 방지*/
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast; /* 크롬,사파리 등 랜더링 이미지 깨짐 방지*/
}
.main_tit {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 7px 0 20px;
  white-space: pre-line;
  line-height: 1.4;
}
.info_txt {
  line-height: 1.4;
  word-break: keep-all;
}
.info_txt + .info_txt {
  margin-top: 18px;
}
.btn_start {
  margin: 44px auto auto auto;
}
.btn_start .btn_default {
  display: inline-block;
  min-width: 90px;
  text-align: center;
}

/*
 * 260616 에러페이지 퍼블(chat_error.html) 반영.
 * - 400.jsp/500.jsp가 퍼블 기준 body.service_bg / sub_txt / btn_default_list.service class를 사용하도록 변경됨.
 * - 전역 .main_tit, .btn_default 스타일 영향이 큰 파일이라 service_bg 하위로만 override를 제한한다.
 */
.service_bg {
  display: flex;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding: 40px 15px 0;
  background-color: #eff6ff;
  box-sizing: border-box;
}

.service_bg .service_wrap {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

.service_bg .service_wrap .main_tit {
  margin: 0;
  font-weight: 600;
  text-align: center;
  white-space: normal;
  word-break: keep-all;
}

.service_bg .service_wrap .sub_txt {
  margin-top: 12px;
  line-height: 1.5;
  text-align: center;
  word-break: keep-all;
}

/* 260616 퍼블 service 버튼: 기존 btn_start 대신 btn_default_list.service 구조를 사용한다. */
.service_bg .btn_default_list.service {
  margin-top: 20px;
}

.service_bg .btn_default_list.service li + li {
  margin-top: 0;
}

.service_bg .btn_default_list.service .btn_default.blue {
  width: 160px;
  margin: 0 auto;
  color: #fff;
  border-color: #0962ba;
  background-color: #0962ba;
  font-weight: 400;
}

.service_bg .btn_default_list.service .btn_default.blue:hover,
.service_bg .btn_default_list.service .btn_default.blue:focus,
.service_bg .btn_default_list.service .btn_default.blue.on {
  color: #fff;
  border-color: #0458aa;
  background-color: #0458aa;
  font-weight: 400;
}

/* loading */
.loading {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top: 4px solid #0a78cc;
  border-radius: 50%;
  -webkit-animation: spin 1s infinite linear;
  animation: spin 1s infinite linear;
  z-index: 350;
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .bot_wrap:last-child,
  .user_wrap:last-child {
    margin-bottom: 15px;
  }
  .accordion {
    width: 316px;
  }
  .acc_cont {
    position: relative;
    top: -5px;
  }
}

@media (max-width: 360px) {
  .pop_img_box .img_guide {
    max-width: calc(100vw - 30px);
  }
}

/* main_icon */
.slide_btn_wrap .button {
  display: block;
  width: 70px;
  height: 70px;
  position: fixed;
  bottom: 0;
  right: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #0a78cc;
}
.slide_btn_wrap .button .ico_main {
  width: 70px;
  height: 70px;
  background-image: url(../img/chat_icon.png);
  -ms-backface-visibility: hidden; /* IE 랜더링 이미지 깨짐 방지*/
  backface-visibility: hidden;
  image-rendering: -webkit-optimize-contrast
    /* 크롬,사파리 등 랜더링 이미지 깨짐 방지*/;
}
.slide-button-info {
  position: absolute;
  padding: 0 55px 0 20px;
  color: #f1f9ff;
  line-height: 68px;
  height: 70px;
  right: 30px;
  top: 0px;
  background: #f0811f;
  border-radius: 50px 10px 10px 50px;
  z-index: -1;
  transition: all 0.35s ease-in-out;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.5rem;
  text-align: center;
}

/* KOFONS publish merge overrides: 기존 JSP/JS 런타임 class는 유지하고 퍼블 시각값만 입힌다. */
/* Skip link: 키보드 포커스 접근성 링크 색상/높이. */
#skip a:focus,
#skip a:active {
  height: 40px;
  padding: 9px 0;
  background: #1176d4;
  color: #fff;
}

/* Layout: 대화 영역과 하단 입력바의 높이/배경을 퍼블 기준으로 맞춘다. */
.chat_cont {
  top: 56px;
  bottom: 64px;
  padding: 16px 20px;
  background-color: #eff6ff;
}

.chat_bottom {
  height: 64px;
  background: #fff;
  box-shadow: none;
  z-index: 150;
}

/* Icons: 퍼블 이미지명을 기존 runtime class에 매핑한다. */
.ico_chat,
.ico_logo {
  width: 46px;
  height: 36px;
  margin: 0 6px 0 0;
  border-radius: 0;
  background-image: url(../img/ico_chat.png);
}

.ico_home {
  width: 24px;
  height: 24px;
  background-image: url(../img/ico_home.png);
}

.top_btn.right .menu.home .ico_menu {
  width: 24px;
  height: 24px;
  background-image: url(../img/ico_home.png);
}

.ico_close {
  width: 24px;
  height: 24px;
}

.ico_font {
  width: 24px;
  height: 24px;
  background-image: url(../img/ico_font.png);
}

.ico_send {
  width: 24px;
  height: 24px;
}

/* Header: 공통/공지 헤더의 타이틀 정렬과 우측 버튼 간격. */
.chat_top.common,
.chat_top.notice {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  height: 56px;
  padding: 14px 14px 14px 20px;
  background: #fff;
  box-sizing: border-box;
}

.chat_top .h_tit {
  position: static;
  flex: 1;
  height: auto;
  padding: 0 !important;
  background: transparent;
  text-align: left !important;
  letter-spacing: 0;
}

.chat_top .h_tit > a,
.chat_top .h_tit .top_title_box > span {
  color: #222;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1.35;
}

.top_btn.right {
  display: flex;
  align-items: center;
  top: 16px;
  right: 14px;
}

.top_btn.right .menu + .menu {
  margin-left: 12px;
}

/* Bot messages: 봇 아바타, 전송시간, 말풍선 컨테이너 구조. */
.bot_wrap {
  clear: both;
  display: flex;
  flex-direction: column;
}

.chat_bot_box {
  display: flex;
  flex-direction: column;
}

.bot_wrap + .user_wrap,
.user_wrap + .bot_wrap,
.bot_wrap + .bot_wrap,
.user_wrap + .user_wrap {
  margin-top: 24px;
}

.bot_name {
  float: none;
  margin: 0;
}

.ico_chat_box {
  position: relative;
  display: flex;
  align-items: flex-end;
  z-index: 100;
}

.ico_chat_box .time {
  margin: 0 0 4px 0;
}

.bot_box {
  display: flex;
  flex-direction: column;
  margin: -2px 0 0 0;
}

.bot_box .bot_txt {
  position: relative;
  line-height: 1.45;
  border-radius: 0;
}

.bot_box .bot_txt + .bot_txt {
  clear: none;
  margin-top: 10px;
}

.bot_box .bot_txt .chat_talk {
  float: none;
  display: inline-block;
  min-height: 0;
  max-width: 100%;
  padding: 10px 12px;
  color: #222;
  background: #fff;
  border: 0;
  border-radius: 0 12px 12px 12px;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* Quick menu: JS가 생성하는 메인 메뉴 카드와 메뉴 아이콘. */
.menu_box_wrap {
  clear: both;
  margin-top: 10px;
}

.chat_menu {
  display: flex;
  flex-wrap: wrap;
  width: auto;
  margin: -10px 0 0 -10px;
  font-size: inherit;
}

.chat_menu li {
  display: block;
  width: 33.33%;
}

.chat_menu .icon_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 92px;
  min-height: 0;
  margin: 10px 0 0 10px;
  padding: 12px 5px;
  border: 0;
  border-radius: 12px;
  background-color: #fff;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.icon_box .icon,
.icon_box .icon.qmenu {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto 8px auto;
  background-repeat: no-repeat;
  background-size: contain !important;
}

.icon_box .icon.menu01,
.icon_box .icon.qmenu.menu01 {
  background-image: url(../img/ico_menu01.png);
}
.icon_box .icon.menu02,
.icon_box .icon.qmenu.menu02 {
  background-image: url(../img/ico_menu02.png);
}
.icon_box .icon.menu03,
.icon_box .icon.qmenu.menu03 {
  background-image: url(../img/ico_menu03.png);
}
.icon_box .icon.menu04,
.icon_box .icon.qmenu.menu04 {
  background-image: url(../img/ico_menu04.png);
}
.icon_box .icon.menu05,
.icon_box .icon.qmenu.menu05 {
  background-image: url(../img/ico_menu05.png);
}
.icon_box .icon.menu06,
.icon_box .icon.qmenu.menu06 {
  background-image: url(../img/ico_menu06.png);
}
.icon_box .icon.menu07,
.icon_box .icon.qmenu.menu07 {
  background-image: url(../img/ico_menu07.png);
}
.icon_box .icon.menu08,
.icon_box .icon.qmenu.menu08 {
  background-image: url(../img/ico_menu08.png);
}
.icon_box .icon.menu09,
.icon_box .icon.qmenu.menu09 {
  background-image: url(../img/ico_menu09.png);
}

.icon_box .m_txt {
  display: table;
  width: 100%;
  padding: 0;
  color: #333;
  text-align: center;
}

.icon_box .m_txt > span {
  display: table-cell;
  color: #333;
  font-size: 1.4rem;
  vertical-align: middle;
}

.icon_box:hover,
.icon_box:active {
  border: 0;
  background-color: #cfe8ff;
}

.icon_box:focus,
.icon_box.on {
  border: 0;
  background-color: #1176d4;
}

.icon_box:hover .m_txt,
.icon_box:active .m_txt,
.icon_box:hover .m_txt > span,
.icon_box:active .m_txt > span {
  color: #333;
}

.icon_box:focus .m_txt,
.icon_box.on .m_txt,
.icon_box:focus .m_txt > span,
.icon_box.on .m_txt > span {
  color: #fff;
  font-weight: 600;
}

/* Answer buttons: 링크/다운로드/더보기 등 공통 버튼 pill 스타일. */
.btn_default {
  min-height: 40px;
  padding: 8px 16px;
  color: #222;
  text-align: center;
  border: 1px solid #d4dae4;
  border-radius: 999px;
  background-color: #f3f5f9;
  box-shadow: none;
}

.btn_default:hover,
.btn_default:active {
  background-color: #e2ecfa;
}

.btn_default:focus,
.btn_default.on {
  border-color: #1176d4;
  background-color: #1176d4;
  color: #fff;
  font-weight: 600;
}

.btn_default.link:after,
.btn_default.download:after {
  top: 50%;
  right: 16px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
}

.btn_default.more > span:after,
.btn_default.close > span:after {
  width: 16px;
  height: 16px;
}

/* Timeout actions: 타임아웃 종료 확인 버튼을 퍼블의 반반 버튼 구조로 표시한다. */
.btn_default_list.w_half {
  display: flex;
  margin-top: 10px;
}

.btn_default_list.w_half li {
  flex: 1 1 0;
  width: calc(50% - 4px);
}

.btn_default_list.w_half li + li {
  margin: 0 0 0 8px;
}

.btn_default_list.w_half .btn_default {
  font-weight: 400;
}

.btn_default_list.w_half .btn_default.gray {
  border-color: #e3e6ea;
  background-color: #e3e6ea;
}

.btn_default_list.w_half .btn_default.blue {
  color: #fff;
  border-color: #0962ba;
  background-color: #0962ba;
}

.btn_default_list.w_half .btn_default.gray:hover,
.btn_default_list.w_half .btn_default.gray:focus,
.btn_default_list.w_half .btn_default.gray.on {
  color: #222;
  border-color: #d7dbe2;
  background-color: #d7dbe2;
}

.btn_default_list.w_half .btn_default.blue:hover,
.btn_default_list.w_half .btn_default.blue:focus,
.btn_default_list.w_half .btn_default.blue.on {
  color: #fff;
  border-color: #0458aa;
  background-color: #0458aa;
}

/* Related intents: 관련질문 버튼의 hash 아이콘과 wrapping layout. */
.query_wrap {
  clear: both;
  padding: 10px 0 0 0;
}

.query_list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.query_list:after {
  content: none;
}

.query_list .btn_default {
  float: none;
  display: inline-flex;
  align-items: center;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 8px 16px;
  text-align: center;
}

.btn_default.word {
  background-color: #fff;
}

.btn_default.word:before {
  content: "";
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url(../img/ico_hash.png) 0 0 no-repeat;
  background-size: contain;
}

.btn_default.word:focus,
.btn_default.word.on {
  background-color: #deefff;
  color: #222;
}

.btn_default.word:focus:before,
.btn_default.word.on:before {
  background-image: url(../img/ico_hash_on.png);
}

/* Accordion: 상세보기/접기형 답변의 제목 버튼과 화살표 상태. */
.accordion {
  width: auto;
  max-width: 100%;
  margin-top: 10px;
}

div.accordion + div.accordion {
  margin-top: 8px;
}

.accordion .btn_default .acc_tit:after {
  content: none;
}

.accordion .btn_default.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.accordion .btn_default.title .acc_tit {
  float: none;
  flex: 1;
  width: auto;
  min-width: 0;
  color: #222;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.accordion .btn_default.title:after {
  content: "";
  display: block;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin-left: 8px;
  background: url(../img/ico_ac_arr_down.png) right center no-repeat;
  background-size: contain;
}

.accordion .btn_default.title.on .acc_tit,
.accordion .btn_default.title:focus .acc_tit {
  color: #fff;
  font-weight: 600;
}

.accordion .btn_default.title.on:after,
.accordion .btn_default.title:focus:after {
  background-image: url(../img/ico_ac_arr_up.png);
}

.accordion .acc_cont {
  width: auto;
  max-width: 100%;
  margin: 8px 0;
  padding: 0;
  color: #444;
  font-size: 1.5rem;
  word-break: break-word;
  overflow-wrap: break-word;
  overflow-x: hidden;
}

/* Image answers: 답변 이미지가 말풍선 밖으로 넘치지 않도록 한다. */
.img_area {
  position: relative;
  max-width: 100%;
  margin: 10px auto auto;
}

.img_area .bot_img {
  float: none;
  max-width: 100%;
}

.img_area > .bot_img > img {
  max-width: 100%;
  height: auto !important;
}

/* User messages: 사용자 말풍선, 꼬리 이미지, 전송시간 위치. */
.user_wrap {
  clear: both;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* User question bubble: 퍼블의 user_box flex 구조를 맞춰 긴 질의가 자연폭으로 표시되게 한다. */
.user_wrap .user_box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.user_box .user_txt {
  position: relative;
  float: none;
  display: inline-block;
  min-height: 42px;
  /* 퍼블에는 max-width 제한이 없어 짧은 질의가 불필요하게 줄바꿈되지 않는다. */
  max-width: none;
  margin-right: 8px;
  padding: 8px 12px;
  color: #222;
  border: 1px solid #82c2ff;
  border-radius: 12px;
  background-color: #fff;
  /* 퍼블 default.css의 전역 border-box 효과를 말풍선에만 좁혀 적용한다. */
  box-sizing: border-box;
}

.user_box .user_txt:after {
  content: "";
  position: absolute;
  top: 8px;
  right: -8px;
  display: block;
  width: 8px;
  height: 8px;
  clear: none;
  background: url(../img/ico_user_arr.png) 0 0 no-repeat;
  background-size: contain;
}

/* Message timestamp: bot은 아이콘 옆, user는 말풍선 위에 표시한다. */
.time {
  display: block;
  margin: 6px 0 0 0;
  padding-top: 0;
  color: #6b6b6b;
}

.time.user {
  margin: 0 9px 6px 0;
}

/* Bottom input: 입력창, 글자크기 버튼, 전송 버튼, 자동완성 레이어. */
.bottom_innner {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 10px 20px;
  background: #fff;
  box-sizing: border-box;
}

.btm_control {
  position: static;
  display: flex;
  align-items: center;
}

.btm_control:after {
  content: none;
}

.btm_control .btn,
.font_control .btn_font {
  width: 24px;
  height: 24px;
  padding: 0;
}

/* 260615 case 1. 글자크기: sheet가 열린 상태에서는 on 아이콘으로 버튼 상태를 보여준다. */
.font_control .btn_font.on .ico_font {
  background-image: url(../img/ico_font_on.png);
}

.inp_box {
  flex: 1;
  margin: 0 0 0 12px;
}

.inp_box .inp_txt {
  position: relative;
}

.inp_txt .inp {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 9px 42px 9px 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #f3f4f5;
  /* 퍼블 input 규칙과 동일하게 padding 포함 크기/말줄임을 유지한다. */
  box-sizing: border-box;
  text-overflow: ellipsis;
  outline: none;
}

.inp_txt .inp:focus {
  border-color: #61b3ff;
  background: #fff;
  box-shadow: 0 0 6px 0 rgba(85, 173, 255, 0.33);
}

.btn_send {
  top: 10px;
  right: 12px;
}

.btn_send .btn {
  width: 24px;
  height: 24px;
  padding: 0;
}

/* 260615 case 2. 전송버튼: 입력값이 있거나 포커스 가능한 상태일 때 퍼블의 활성 아이콘을 사용한다. */
.btn_send.on .ico_send,
.btn_send .btn:not(:disabled):focus .ico_send {
  background-image: url(../img/ico_send_on.png);
}

.auto_keyword {
  bottom: 64px;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.04);
}

.keyword_box .sch_keyword {
  min-height: 40px;
  padding: 8px 16px;
  color: #222;
}

.keyword_box .sch_keyword:hover,
.keyword_box .sch_keyword:active,
.keyword_box .sch_keyword:focus,
.keyword_box .sch_keyword.on,
.keyword_box .sch_keyword.is_selected {
  /* 260615 case 2. 자동완성: 마우스 hover와 키보드 선택 상태를 같은 배경으로 맞춘다. */
  background-color: #f3f4f5;
}

/* 260615 case 1. 글자크기: 퍼블의 하단 sheet는 기본 숨김, 버튼 클릭 시 .active로 노출한다. */
.font_size_box {
  display: none;
}

.font_size_box.active {
  display: block;
}

.font_list {
  position: absolute;
  right: 0;
  bottom: 64px;
  left: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100%;
  padding: 16px 0;
  border-radius: 20px 20px 0 0;
  background-color: #fff;
  box-shadow: 0 -2px 5px 0 rgba(0, 0, 0, 0.04);
  box-sizing: border-box;
}

/* sheet 꼬리 삼각형은 별도 이미지 없이 border만으로 만든다. */
.font_list:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 18px;
  z-index: 200;
  width: 0;
  height: 0;
  border-right: 7px solid transparent;
  border-left: 7px solid transparent;
  border-top: 10px solid #fff;
}

.font_list li {
  position: relative;
}

.font_list li + li {
  margin-left: 20px;
}

.font_list .btn_fz {
  position: relative;
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: transparent;
  color: #222;
  box-sizing: border-box;
}

.font_list .btn_fz .font {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.font_list .btn_fz .fz1 {
  font-size: 1.2rem;
}

.font_list .btn_fz .fz2 {
  font-size: 1.4rem;
}

.font_list .btn_fz .fz3 {
  font-size: 1.6rem;
}

.font_list .btn_fz .fz4 {
  font-size: 1.8rem;
}

.font_list .btn_fz .fz5 {
  font-size: 2rem;
}

.font_list .btn_fz:hover,
.font_list .btn_fz:active {
  background-color: #e2ecfa;
}

.font_list .btn_fz:focus,
.font_list .btn_fz.on {
  background-color: #1176d4;
  color: #fff;
  font-weight: 600;
}

/* Session actions: 세션 종료/상담 등 답변 하단 액션 버튼. */
.btn_outside_wrap {
  clear: both;
  padding: 10px 0 0 0;
}

.btn_outside_wrap .btn {
  min-width: 90px;
  height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 999px;
  background-color: #f3f5f9;
}

.btn_outside_wrap .btn:focus,
.btn_outside_wrap .btn:hover,
.btn_outside_wrap .btn:active,
.btn_outside_wrap .btn.on {
  background-color: #1176d4;
  color: #fff;
}

/* 260615 case 3. 캐러셀: 관련 인텐트 묶음은 기존 query_wrap과 구분해 Slick layout 여백을 적용한다. */
.query_wrap.carousel {
  margin-top: 10px;
}

/* 260615 case 3. 캐러셀: 기존 .carousel_list padding/width 잔여값을 퍼블 기준으로 재정렬한다. */
.query_wrap.carousel .slick-list {
  width: 100%;
  padding: 0;
  overflow: visible;
}

/* variableWidth Slick에서 각 카드 폭을 퍼블 기준값으로 고정해 한 장+다음 장 일부가 보이게 한다. */
.query_wrap.carousel .slick-slide {
  width: 268px !important;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.05);
}

/* 260615 case 3. 캐러셀: 퍼블 chat_type.html의 query_box/query_tit_box 구조 색상과 radius를 맞춘다. */
.query_wrap.carousel .query_box {
  border-radius: 12px;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
}

.query_wrap.carousel .query_box .query_tit_box {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 40px;
  padding: 8px 14px;
  background-color: #d2e3fa;
  box-sizing: border-box;
}

.query_wrap.carousel .query_box .query_tit_box .query_tit {
  display: inline;
  height: auto;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  color: #222;
  font-weight: 600;
}

/* 캐러셀 안쪽 버튼 리스트는 카드 폭 안에서 줄바꿈/높이 계산이 안정되도록 padding을 별도 조정한다. */
.carousel_list .query_box .btn_default_list {
  margin: 0;
  padding: 10px 12px;
  background-color: transparent;
}

.query_wrap.carousel .btn_default {
  min-height: 40px;
  padding: 7px 16px;
  border: 0.5px solid #d4dae4;
  border-radius: 999px;
  background-color: #f3f5f9;
  box-shadow: none;
  color: #222;
  text-align: center;
}

.query_wrap.carousel .btn_default:hover,
.query_wrap.carousel .btn_default:active {
  background-color: #e2ecfa;
}

.query_wrap.carousel .btn_default:focus,
.query_wrap.carousel .btn_default.on {
  border-color: #1176d4;
  background-color: #1176d4;
  color: #fff;
  font-weight: 600;
}

.query_wrap.word .slick-slide + .slick-slide,
.carousel_list .slick-slide + .slick-slide {
  margin-left: 8px;
}

.query_wrap .slick-list,
.carousel_list .slick-list {
  overflow: visible !important;
}

.query_wrap .slick-list {
  width: 100%;
}

.query_wrap .slick-dots,
.carousel_list .slick-dots {
  display: flex;
  bottom: -30px;
  justify-content: center;
  align-items: center;
}

.query_wrap .slick-dots li,
.carousel_list .slick-dots li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0 -1px;
  padding: 0;
  border: none;
}

.query_wrap .slick-dots li button,
.carousel_list .slick-dots li button {
  position: relative;
  width: 20px;
  height: 20px;
  padding: 0;
}

.query_wrap .slick-dots li button:before,
.carousel_list .slick-dots li button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(17, 118, 212, 0.34);
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
}

.query_wrap .slick-dots li.slick-active button:before,
.carousel_list .slick-dots li.slick-active button:before {
  width: 18px;
  height: 6px;
  border-radius: 999px;
  background-color: #1176d4;
  opacity: 1;
}

.query_wrap.carousel .slick-prev:before,
.query_wrap.carousel .slick-next:before {
  display: none;
}

.query_wrap.carousel .slick-prev {
  position: absolute;
  top: 50%;
  left: -4px;
  display: block;
  width: 40px;
  height: 40px;
  padding: 8px;
  border: 1px solid #d4dae4;
  border-radius: 4px;
  background: url(../img/ico_arr_right.png) center no-repeat
    rgba(255, 255, 255, 0.75);
  background-size: 20px 20px;
  box-sizing: border-box;
  text-indent: -9999px;
  transform: translateY(-50%);
  z-index: 90;
}

.query_wrap.carousel .slick-prev:hover,
.query_wrap.carousel .slick-prev:focus {
  background: url(../img/ico_arr_right.png) center no-repeat
    rgba(255, 255, 255, 1);
  background-size: 20px 20px;
}

.query_wrap.carousel .slick-next {
  position: absolute;
  top: 50%;
  right: -4px;
  display: block;
  width: 40px;
  height: 40px;
  padding: 10px;
  border: 1px solid #d4dae4;
  border-radius: 4px;
  background: url(../img/ico_arr_left.png) center no-repeat
    rgba(255, 255, 255, 0.75);
  background-size: 20px 20px;
  box-sizing: border-box;
  text-indent: -9999px;
  transform: translateY(-50%);
  z-index: 90;
}

.query_wrap.carousel .slick-next:hover,
.query_wrap.carousel .slick-next:focus {
  background: url(../img/ico_arr_left.png) center no-repeat
    rgba(255, 255, 255, 1);
  background-size: 20px 20px;
}