/* 챗봇 */
.chatbot_wrap {
  position:fixed;
  bottom:40px;
  right:48px;
  z-index:120;
}
:root {
  --navy:#0b1f3a;
  --blue:#0169d8;
  --blue2:#3b82f6;
  --blue-soft:#0169d81a;
  --grad:
    linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    #0169d8;
  --grad-card:linear-gradient(135deg, #2f6bf6 0%, #5c9bff 100%);
  --ink:#1e2124;
  --gray:#58616a;
  --line:#e9edf4;
  --bg:#f3f8ff;
  --shadow:0 10px 40px rgba(11, 31, 58, 0.12);
  --shadow-sm:0 3px 14px rgba(11, 31, 58, 0.08);
}
.chatbot_wrap * {
  box-sizing:border-box;
  margin:0;
  padding:0;
  letter-spacing:-0.03em;
}
.chatbot_wrap .panel {
  width:440px;
  max-width:100%;
  background:var(--bg);
  border-radius:24px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow);
  position:relative;
  z-index:2;
  transition:
    transform 0.25s,
    opacity 0.25s;
}
.panel.hidden {
  transform:translateY(20px) scale(0.96);
  opacity:0;
  pointer-events:none;
  display:none;
}
.chatbot_wrap .hd {
  position:relative;
  background:var(--grad);
  color:#fff;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.chatbot_wrap .hd .av {
  width:46px;
  height:46px;
  border-radius:50%;
  background:#ffffff1a;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(0, 0, 0, 0.18);
  overflow:hidden;
}
.chatbot_wrap .hd .meta {
  flex:1;
}
.hd .meta h1 {
  font-size:18px;
  font-weight:800;
  letter-spacing:-0.3px;
}
.chatbot_wrap .hd .meta .st {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:#fffc;
  margin-top:2px;
}
.chatbot_wrap .hd .dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:#3ddc84;
}
.chatbot_wrap .hd .x {
  width:30px;
  height:30px;
  border-radius:9px;
  background:url("/images/icon_x.svg") no-repeat 50% 50%;
  color:#fff;
  border:none;
  cursor:pointer;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0;
  transition:0.2s linear;
}
.chatbot_wrap .hd .x:hover {
  transform:scale(1.1);
}
.chatbot_wrap .back {
  position:absolute;
  top:0;
  left:12px;
  width:42px;
  height:100%;
  background:url("/images/arrow_back.svg") no-repeat 50% 50%;
  display:none;
  font-size:0;
}
.chatbot_wrap .back:hover {
  opacity:0.7;
}
.chatbot_wrap.page_in .hd {
  padding-left:54px;
}
.chatbot_wrap.page_in .back {
  display:block !important;
}

.chatbot_wrap .view {
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.chatbot_wrap .view::-webkit-scrollbar {
  width:6px;
}
.view::-webkit-scrollbar-thumb {
  background:#d6deec;
  border-radius:6px;
}
.chatbot_wrap .hide {
  display:none;
}

/* Hero */
.chatbot_wrap .hero {
  position:relative;
  background:var(--grad);
  padding:32px 18px 28px;
  color:#fff;
}
.chatbot_wrap .hero .hi {
  font-size:16px;
  color:#fffc;
  font-weight:500;
  line-height:1;
}
.chatbot_wrap .hero .q {
  font-size:21px;
  font-weight:700;
  line-height:1;
  margin-top:8px;
  letter-spacing:-0.78px;
}
.chatbot_wrap .hero .mascot {
  position:absolute;
  bottom:42px;
  right:10px;
  width:auto;
  height:133px;
  aspect-ratio:1/1;
  background:url("/images/img_hoko_hand.webp") repeat-x 0 0 / auto 100%;
  animation:hokoHandMoveX 1s steps(8) infinite;
}
@keyframes hokoHandMoveX {
  from {
    background-position:0 0;
  }
  to {
    background-position:-1064px 0;
  }
}
.chatbot_wrap .view .inbox {
  position:relative;
  background:#fff;
  border-radius:28px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:8px;
  padding:12px 12px 12px 0;
  border:2px solid #ff710d;
  height:56px;
  margin-top:20px;
}
.chatbot_wrap .view .inbox input {
  flex:1;
  min-width:0;
  width:100%;
  height:52px;
  border:none;
  outline:none;
  font-size:16px;
  font-family:inherit;
  background:transparent;
  color:var(--ink);
  text-overflow:ellipsis;
  padding:0 24px;
}
.chatbot_wrap .view .inbox input::placeholder {
  color:#a6afbf;
}
.chatbot_wrap .view .inbox .send {
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  flex-shrink:0;
  background:#ff710d;
  color:#fff;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(37, 99, 235, 0.4);
}
.chatbot_wrap .view .inbox .send:hover {
  transform:scale(1.05);
}

/* Home body */
.chatbot_wrap .body {
  padding:20px 8px 20px 20px;
}
.in_scroll {
  height:440px;
  max-height:calc(100vh - 400px);
  overflow:auto;
  padding-right:8px;
}
.chatbot_wrap ::-webkit-scrollbar-thumb {
  background-color:#b1b8be;
}

.chatbot_wrap .bigcard {
  background:#fff;
  border-radius:16px;
  padding:20px;
  margin-bottom:8px;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.08);
  transition:
    transform 0.18s,
    box-shadow 0.18s;
  min-height:150px;
}
.chatbot_wrap .bigcard:hover {
  transform:translateY(-3px);
}
.chatbot_wrap .bigcard .tag {
  display:inline-block;
  font-size:12px;
  font-weight:600;
  line-height:20px;
  color:#0169d8;
  background:#0169d81a;
  padding:1px 8px;
  border-radius:11px;
  margin-bottom:12px;
}
.chatbot_wrap .bigcard .t {
  font-size:20px;
  color:#1e2124;
  font-weight:600;
  line-height:1.4;
  letter-spacing:-0.6px;
  margin-bottom:8px;
}
.chatbot_wrap .bigcard .d {
  font-size:14px;
  color:#464c53;
  line-height:1.4;
  max-width:54%;
}
.chatbot_wrap .bigcard .mas {
  position:absolute;
  right:0;
  bottom:0;
  width:120px;
  height:120px;
  background:url("/images/icon_hoko_excl.webp") no-repeat 50% 50% / contain;
}

.chatbot_wrap .scut {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  height:82px;
  gap:12px;
  background:#fff;
  padding:16px 20px 16px 86px;
  margin-bottom:9px;
  cursor:pointer;
  border-radius:16px;
  background:#fff;
  box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.08);
  transition:0.16s;
}
.chatbot_wrap .scut:hover {
  border-color:var(--blue);
  background:#fafcff;
}
.chatbot_wrap .scut .ic {
  position:absolute;
  top:50%;
  left:20px;
  width:50px;
  height:50px;
  border-radius:8px;
  background:#f4f5f6;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
}
.chatbot_wrap .scut .type {
  font-size:12px;
  color:#0169d8;
  font-weight:600;
  line-height:22px;
  padding:0 8px;
  background:#0169d81a;
  border-radius:22px;
}
.chatbot_wrap .scut .mid {
  font-size:16px;
  color:#1e2124;
  font-weight:600;
  line-height:1.4;
}

/* Onboarding hero + body */
.chatbot_wrap .ohero {
  position:relative;
  padding:24px 20px;
  background:#0169d8;
}
.chatbot_wrap .ohero .hi {
  font-size:16px;
  color:#fffc;
  font-weight:500;
  line-height:1;
}
.chatbot_wrap .ohero .q {
  font-size:20px;
  color:#fff;
  font-weight:700;
  margin-top:12px;
  letter-spacing:-0.6px;
  line-height:1;
}
.chatbot_wrap .ohero .mascot {
  position:absolute;
  bottom:-12px;
  right:0;
  width:100px;
  height:100px;
  background:url("/images/icon_hoko_excl.webp") no-repeat 50% 50% / contain;
}
.chatbot_wrap .obody {
  position:relative;
  padding:0 20px 0;
  height:507px;
  overflow:auto;
}
.chatbot_wrap .pbar {
  width:calc(100% + 40px);
  height:8px;
  background:#fff;
  margin:0 -20px;
  overflow:hidden;
  margin-bottom:20px;
}
.chatbot_wrap .pbar i {
  display:block;
  height:100%;
  background:#ff710d;
  border-radius:0 4px 4px 0;
  transition:width 0.3s;
}
.chatbot_wrap .pstep {
	position:absolute; top:28px; left:20px;
  font-size:14px;
  font-weight:700;
  color:#fff;
  background:#ff710d;
  line-height:26px;
  height:26px;
  width:26px;
  border-radius:50%;
  margin-bottom:16px;
  letter-spacing:0.2px;
  text-align:center;
}
.chatbot_wrap .qtitle {
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  line-height:26px;
  letter-spacing:-0.78px;
  margin-bottom:8px;
  padding-left:36px;
}
.chatbot_wrap .qsub {
  font-size:16px;
  color:#464c53;
  margin-bottom:24px;
  line-height:1.4;
  letter-spacing:-0.03em;
}
.chatbot_wrap .oic_wrap {display:flex; flex-wrap:wrap; gap:8px;}
.chatbot_wrap .opt {
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  text-align:left;
  background:#fff;
  border:2px solid #fff;
  border-radius:8px;
  padding:16px 12px;
  cursor:pointer;
  transition:0.16s;
  font-family:inherit;
  box-shadow:var(--shadow-sm);
}
.chatbot_wrap .opt:hover {
  border-color:var(--blue);
  background:#fafcff;
  transform:translateX(2px);
}
.chatbot_wrap .opt:hover:after {
  content:"";
  position:absolute;
  top:0;
  right:20px;
  width:24px;
  height:100%;
  background:url("/images/icon_chat_chk.svg") no-repeat 50% 50% / contain;
}
.chatbot_wrap .opt .oic {
  width:50px;
  height:50px;
  border-radius:8px;
  background:#f4f5f6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
}
.chatbot_wrap .opt .ot {
  font-size:16px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.03em;
}
.chatbot_wrap .opt .od {
  font-size:14px;
  color:var(--gray);
  margin-top:6px;
}
.opt .omid {
  flex:1;
}
.chatbot_wrap .scroll {height:calc(100% - 177px); overflow:auto; padding:0 10px 20px; margin:0 -10px 0;}
.chatbot_wrap .field {
  margin-bottom:12px;
}
.field label {
  display:block;
  font-size:12.5px;
  font-weight:700;
  color:var(--ink);
  margin-bottom:6px;
}
.chatbot_wrap .field input {
  width:100%;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  font-family:inherit;
  outline:none;
  color:var(--ink);
  background:#fff;
}
.chatbot_wrap .field textarea {width:100%; border:1.5px solid var(--line); border-radius:12px; padding:12px 14px;}
.chatbot_wrap .field input:focus {
  border-color:var(--blue);
}
.field input::placeholder {
  color:#a6afbf;
}
.chatbot_wrap .check_area {display:flex; align-items:center; gap:10px;}
.chatbot_wrap .btn_agree {border:#666 1px solid; border-radius:16px; padding:0 10px;}
.chatbot_wrap .submit {
  position:absolute;
  bottom:16px;
  left:50%;
  width:calc(100% - 40px);
  transform:translateX(-50%);
  border:none;
  border-radius:16px;
  padding:14px 20px;
  background:var(--grad);
  color:#fff;
  font-size:17px;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
.chatbot_wrap .submit:hover {
  transform:translate(-50%, -2px);
}
.chatbot_wrap .obtns {
  position:absolute;
  top:20px;
  right:20px;
  display:none;
}
.chatbot_wrap .oback {
  font-size:13px;
  color:var(--ink);
  display:flex;
  align-items:center;
  gap:2px;
  line-height:26px;
  padding:0 12px;
  background:#fff;
  border-radius:13px;
  border:#f0f2f5 1px solid;
}
.chatbot_wrap .oback:after {
  content:"";
  display:block;
  width:16px;
  height:16px;
  background:url("/images/icon_goback.svg") no-repeat 50% 50%;
}
.chatbot_wrap .oback:hover {
  color:var(--blue);
}
.chatbot_wrap .done_wrap {
  position:relative;
  padding-bottom:90px;
}
.chatbot_wrap .done {
  padding:34px 20px 20px;
  margin:0 -20px;
  text-align:center;
  max-height:410px;
  overflow:auto;
}
.chatbot_wrap .done .mascot {
  width:100px;
  height:100px;
  margin:0 auto 16px;
  display:block;
  background:#cddafa;
  border-radius:50%;
  overflow:hidden;
}
.chatbot_wrap .done h2 {
  font-size:20px;
  font-weight:600;
  color:var(--ink);
  letter-spacing:-0.6px;
  margin:0;
  padding:0;
  border:0;
  text-align:center;
  width:100%;
}
.chatbot_wrap .done p {
  font-size:16px;
  color:#464c53;
  line-height:1.65;
  margin:4px 0 16px;
}
.chatbot_wrap .sumbox {
  background:#fff;
  border-radius:16px;
  padding:16px 24px;
  margin-bottom:12px;
  text-align:left;
  box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
.chatbot_wrap .sumrow {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:15px;
  line-height:26px;
}
.chatbot_wrap .sumrow .k {
  color:var(--gray);
  font-weight:500;
}
.chatbot_wrap .sumrow .v {
  color:var(--ink);
  font-weight:500;
  text-align:right;
  max-width:62%;
}
.chatbot_wrap .reco {
  background:#cee2ff;
  border-radius:16px;
  padding:16px 24px;
  text-align:left;
  margin-bottom:40px;
}
.chatbot_wrap .reco .rl {
  font-size:14px;
  font-weight:700;
  color:var(--blue);
  line-height:1.7;
  margin-bottom:4px;
  display:flex;
  align-items:center;
  gap:4px;
}
.chatbot_wrap .reco .rl:before {
  content:"";
  display:block;
  width:18px;
  height:18px;
  background:url("/images/icon_excl_bold.svg") no-repeat 50% 50% / contain;
}
.chatbot_wrap .reco .rt {
  font-size:16px;
  color:var(--ink);
  font-weight:500;
  line-height:1.65;
}
.chatbot_wrap .moreq {
  font-size:17px;
  font-weight:600;
  color:var(--ink);
  margin-bottom:6px;
  text-align:left;
}

#pop_agree {visibility:hidden; opacity:0; pointer-events:none; user-select:none; transition:.2s linear;}
#pop_agree .scroll.gbox {background:#fafafa;}
#pop_agree .inner {padding:20px; font-size:15px;}
#pop_agree .inner p {font-size:inherit;}
#pop_agree h3 {margin:16px 0 8px;}
#pop_agree.active {visibility:visible; opacity:1; pointer-events:auto; user-select:auto;}

/* Chat */
.chatbot_wrap .cscroll {
  /* flex:1; */
  height:522px;
  max-height:calc(100vh - 320px);
  overflow-y:auto;
  padding:18px 14px 8px;
}
.chatbot_wrap .cscroll::-webkit-scrollbar {
  width:6px;
}
.cscroll::-webkit-scrollbar-thumb {
  background:#d6deec;
  border-radius:6px;
}
.chatbot_wrap .row {
  display:flex;
  gap:12px;
  animation:rise 0.35s ease both;
}
@keyframes rise {
  from {
    opacity:0;
    transform:translateY(8px);
  }
  to {
    opacity:1;
    transform:none;
  }
}
.chatbot_wrap .row.user {
  justify-content:flex-end;
  margin-bottom:16px;
}
.chatbot_wrap .row.bot {
  margin-bottom:32px;
}
.chatbot_wrap .ava {
  width:40px;
  height:40px;
  border-radius:50%;
  background:#0169d8;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.chatbot_wrap .ava + div {
  width:calc(100% - 52px);
}
.chatbot_wrap .bubble {
  max-width:280px;
  padding:12px 14px;
  border-radius:15px;
  font-size:14px;
  line-height:1.62;
  box-shadow:var(--shadow-sm);
}
.chatbot_wrap .bot .bubble {
  background:#fff;
  border-top-left-radius:4px;
}
.chatbot_wrap .user .bubble {
  background:var(--grad);
  color:#fff;
  border-top-right-radius:4px;
}
.chatbot_wrap .bubble b {
  color:var(--blue);
  font-weight:700;
}
.user .bubble b {
  color:#fff;
}
.chatbot_wrap .bubble .lead {
  font-weight:800;
  display:block;
  margin-bottom:5px;
}
.chatbot_wrap .chatbot_answer {
  font-size:14px;
  line-height:1.58;
  letter-spacing:0;
}
.chatbot_wrap .chatbot_answer .chatbot_answer_title {
  font-size:16px;
  line-height:1.35;
  color:var(--ink);
  font-weight:800;
  margin-bottom:8px;
}
.chatbot_wrap .chatbot_answer .chatbot_answer_text {
  display:block;
  color:#464c53;
  margin-top:7px;
}
.chatbot_wrap .chatbot_answer .chatbot_answer_title + br,
.chatbot_wrap .chatbot_answer .chatbot_answer_text + br {
  display:none;
}
.chatbot_wrap .feats {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.chatbot_wrap .feat {
  font-size:13px;
  font-weight:500;
  color:var(--blue);
  background:var(--blue-soft);
  line-height:24px;
  padding:0 10px;
  border-radius:20px;
}
.chatbot_wrap .cards {
  display:flex;
  gap:9px;
  margin-top:11px;
  max-width:100%;
  overflow:auto;
  padding-right:20px;
}
.chatbot_wrap .pc {
  flex:0 0 240px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:13px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:0.16s;
}
.chatbot_wrap .pc:hover {
  transform:translateY(-2px);
  border-color:#c5d6fb;
}
.chatbot_wrap .pc .th {
  height:104px;
  display:flex;
  align-items:flex-end;
  padding:12px;
  color:#fff;
  position:relative;
}
.chatbot_wrap .pc .th.a {
  position:relative;
  background:linear-gradient(135deg, #1e5eff, #0b1f3a);
}
.pc .th.b {
  background:linear-gradient(135deg, #0ea5a4, #0b3a52);
}
.pc .th.c {
  background:linear-gradient(135deg, #f59e0b, #b45309);
}
.chatbot_wrap .pc .th .cat {
  position:absolute;
  top:12px;
  left:12px;
  font-size:12px;
  font-weight:700;
  line-height:20px;
  background:rgba(255, 255, 255, 0.2);
  padding:1px 8px;
  border-radius:12px;
}
.chatbot_wrap .pc .th h4 {
  font-size:14px;
  line-height:1.28;
  font-weight:700;
  letter-spacing:0;
  word-break:keep-all;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.chatbot_wrap .pc .th.in_img {
  padding:0;
}
.chatbot_wrap .pc .th.in_img .imgfit {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.chatbot_wrap .pc .th.in_img .txt {
  position:relative;
  z-index:1;
  height:104px;
  width:100%;
  padding:10px;
  display:flex;
  align-items:flex-end;
  color:#fff;
  background:linear-gradient(
    180deg,
    rgba(11, 31, 58, 0.08),
    rgba(11, 31, 58, 0.78)
  );
}
.chatbot_wrap .pc .th.in_img .cat {
  background:#0169d8;
}
.chatbot_wrap .pc .bd {
  padding:10px 12px 12px;
}
.pc .bd p {
  font-size:13px;
  color:var(--gray);
  line-height:1.5;
}
.chatbot_wrap .pc .tags {
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:8px;
}
.pc .tags span {
  font-size:12px;
  color:#7a8290;
  background:#f1f4f9;
  padding:3px 7px;
  border-radius:5px;
}
.chatbot_wrap .suggest {
  max-width:290px;
  margin-top:3px;
}
.suggest .st2 {
  font-size:11.5px;
  color:var(--gray);
  margin:20px 2px 7px;
  font-weight:600;
}
.chatbot_wrap .qchip {
  position:relative;
  font-size:16px;
  color:var(--ink);
  font-weight:500;
  line-height:26px;
  padding:12px 12px 12px 28px;
  border-radius:12px;
  box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.08);
  margin-bottom:4px;
  background:#fff;
  width:100%;
  text-align:left;
}
.chatbot_wrap .qchip:before {
  content:"";
  position:absolute;
  top:23px;
  left:16px;
  width:4px;
  height:4px;
  background:#0169d8;
}
.chatbot_wrap .qchip.qchip_compact {
  font-size:14px;
  line-height:1.35;
  padding:8px 10px 8px 24px;
}
.chatbot_wrap .qchip.qchip_compact:before {
  top:50%;
  left:14px;
  transform:translateY(-50%);
}
.chatbot_wrap .qchip:hover {
  border-color:var(--blue);
  background:var(--blue-soft);
  color:var(--blue);
}
.chatbot_wrap .gohome_area {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  padding:16px 0;
}
.chatbot_wrap .gohome {
  display:block;
  font-size:17px;
  color:#fff;
  font-weight:600;
  line-height:56px;
  height:56px;
  width:100%;
  background:#0169d8;
  border-radius:16px;
  box-shadow:0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
.chatbot_wrap .typing {
  display:flex;
  gap:4px;
  padding:17px 15px;
}
.chatbot_wrap .typing span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#b9c2d2;
  animation:bnc 1.2s infinite;
}
.chatbot_wrap .typing span:nth-child(2) {
  animation-delay:0.15s;
}
.typing span:nth-child(3) {
  animation-delay:0.3s;
}
@keyframes bnc {
  0%,
  60%,
  100% {
    transform:translateY(0);
    opacity:0.5;
  }
  30% {
    transform:translateY(-5px);
    opacity:1;
  }
}
.chatbot_wrap .cfoot {
  padding:10px 12px 14px;
  border-top:1px solid var(--line);
  background:var(--bg);
  flex-shrink:0;
}

.chatbot_wrap .launcher_wrap {
  position:fixed;
  right:30px;
  bottom:40px;
  z-index:121;
}
.chatbot_wrap .launcher {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  cursor:pointer;
  z-index:1;
}
.chatbot_wrap .launcher .lbub {
  position:relative;
  background:#ff710d;
  color:#fff;
  font-size:16px;
  font-weight:600;
  padding:12px 24px;
  border-radius:25px;
  white-space:nowrap;
  margin-right:19px;
}
.chatbot_wrap .launcher .lbub:before {
  content:"";
  position:absolute;
  bottom:-7px;
  right:32px;
  width:16px;
  height:8px;
  background:url("/images/arrow_launcher.svg") no-repeat 50% 50% / contain;
}
.chatbot_wrap .launcher .lbtn {
  width:auto;
  height:124px;
  aspect-ratio:1/1;
  background:url("/images/img_hoko_hand.webp") repeat-x 0 0 / auto 100%;
  animation:hokoHandMoveX2 1s steps(8) infinite;
}
@keyframes hokoHandMoveX2 {
  from {
    background-position:0 0;
  }
  to {
    background-position:-992px 0;
  }
}
.chatbot_wrap .btn_launcher_close {
  position:absolute;
  top:-4px;
  right:16px;
  width:24px;
  height:24px;
  background:#000c url("/images/icon_x2.svg") no-repeat 50% 50%;
  border-radius:50%;
  font-size:0;
}
.chatbot_wrap .btn_min {
  display:none;
}
.chatbot_wrap .launcher_wrap.min {right:48px;}
.chatbot_wrap .launcher_wrap.min .launcher,
.chatbot_wrap .launcher_wrap.min .btn_launcher_close {
  display:none !important;
}
.chatbot_wrap .launcher_wrap.min .btn_min {
  display:block;
  width:88px;
  height:88px;
  border-radius:50%;
  background:#accfff;
}
.chatbot_wrap .launcher[style="display:none;"] + .btn_launcher_close {
  display:none;
}


/* ------------------------------ PC Guide ------------------------------ */
@media screen and (max-width:1520px){
/* 챗봇 */
	.chatbot_wrap{right:20px;}
	.chatbot_wrap .launcher_wrap.min{right:20px;}
}

/* ------------------------------ PC Guide ------------------------------ */
@media screen and (max-width:1280px){
}

/* ------------------------------ Tablet PC ------------------------------ */
@media screen and (max-width:1023px){
/* 챗봇 */
	.chatbot_wrap {bottom:30px; right:30px;}
	.chatbot_wrap .launcher_wrap {right:10px; bottom:20px;}
	.chatbot_wrap .hero {padding:24px 18px 20px;}
	.in_scroll {max-height:calc(100vh - 440px);}
	.chatbot_wrap .obody,
	.chatbot_wrap .cscroll {max-height:calc(100vh - 320px);}
}

/* ------------------------------ Mobile ------------------------------ */
@media screen and (max-width:767px){
/* 챗봇 */
	.chatbot_wrap {bottom:20px; right:20px;}
	.chatbot_wrap .launcher_wrap {right:0; bottom:20px;}
	.chatbot_wrap .launcher_wrap.min {right:10px;}
	.chatbot_wrap .launcher .lbub {font-size:13px; padding:8px 16px;}
	.chatbot_wrap .btn_launcher_close {top:-6px; right:10px;}
	.chatbot_wrap .launcher_wrap.min .btn_min {width:50px; height:50px;}
	.chatbot_wrap .bigcard {padding:16px;}
	.chatbot_wrap .bigcard .t {font-size:18px;}
	.chatbot_wrap .bigcard .d {font-size:13px; max-width:60%;}
	.chatbot_wrap .bigcard .mas {width:80px; height:80px;}
	.chatbot_wrap .scut .mid {font-size:14px;}
	.chatbot_wrap .panel {width:calc(100vw - 40px);}
	.chatbot_wrap .hd {padding:10px 16px;}
	.chatbot_wrap .back {left:5px; width:30px;}
	.chatbot_wrap.page_in .hd {padding-left:40px;}
	.chatbot_wrap .row {gap:8px;}
	.chatbot_wrap .ava {width:30px; height:30px;}
	.chatbot_wrap .ava + div {width:calc(100% - 26px);}
	.chatbot_wrap .cfoot {padding:10px;}
	.chatbot_wrap .view .inbox {padding:10px 10px 10px 0; height:50px;}
	.chatbot_wrap .view .inbox input {height:48px; font-size:13px; padding:0 16px;}

	.chatbot_wrap .qchip {font-size:13px;}

	.chatbot_wrap .qtitle {font-size:18px; margin-bottom:4px;}
	.chatbot_wrap .qsub {font-size:13px; margin-bottom:20px;}
	.chatbot_wrap .opt .ot {font-size:14px;}
	.chatbot_wrap .opt .od {font-size:13px;}

	.chatbot_wrap .hero .hi,
	.chatbot_wrap .ohero .hi {font-size:13px;}
	.chatbot_wrap .hero .q,
	.chatbot_wrap .ohero .q {font-size:16px; margin-top:8px;}
	.chatbot_wrap .hero .mascot,
	.chatbot_wrap .ohero .mascot {width:80px; height:80px;}
	.chatbot_wrap .hero .mascot {bottom:46px;}
	@keyframes hokoHandMoveX {
	  from {
		background-position:0 0;
	  }
	  to {
		background-position:-640px 0;
	  }
	}
	
	.chatbot_wrap .done_wrap {padding-bottom:78px;}
	.chatbot_wrap .done {max-height:calc(100vh - 398px)}
	.chatbot_wrap .done h2 {font-size:16px;}
	.chatbot_wrap .done p,
	.chatbot_wrap .sumrow,
	.chatbot_wrap .reco .rl {font-size:13px;}
	.chatbot_wrap .reco .rt {font-size:14px;}
	.chatbot_wrap .moreq {font-size:15px;}
	.chatbot_wrap .gohome_area {padding:12px 0;}
	.chatbot_wrap .gohome {font-size:14px; line-height:44px; height:44px; border-radius:8px;}
}