@import url(perfect-scrollbar.css);:root { --counselor-color:#7948ff; --counselor-text-color:#553ca5; --main-color:#0498dc; --linkey-color:#3ec2ff; --red-color:#d5383a; overflow:hidden; } 
html { font-size:14px; overflow:hidden !important; height:100%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; -webkit-overflow-scrolling:auto;top:0;left:0; position:relative;} 
body { font-family:'Noto Sans KR', 'NanumSquare', 'Nanum Gothic', 'Malgun Gothic', sans-serif !important; font-size:1rem; overflow:hidden !important; height:100%; letter-spacing:-0.04615em; color:#333333; -webkit-text-size-adjust:none; /* touch-action:manipulation; -webkit-overflow-scrolling: auto; *//* touch-action: none; */top:0;left:0;position:relative; }
body.text-small { font-size:0.8462rem; } 
body.text-big { font-size:1.2308rem; } 
body * { letter-spacing:inherit; word-break:keep-all; color:inherit; -webkit-tap-highlight-color:transparent; } 
body > .ui-autocomplete { display:none !important; } 
/* Components */
hr { margin:20px 0; } 
.speech-content hr { margin:16px 0; border-top:1px solid #eaeaea; } 

.popup hr { margin:16px 0; border-top:1px solid #eaeaea; } 

.pop-tabs .tabs hr { margin:16px 0; border-top:1px solid #eaeaea; }

p { margin-bottom : 0}
a { text-decoration:none; } 
a:hover { text-decoration:none; color:inherit; outline:none; } 
@media (hover: none) { a:not(.disabled):not(:disabled):hover { text-decoration:inherit; color:inherit; outline:none; } }
button { padding:0; cursor:pointer; border:none; background:transparent; } 
::-webkit-input-placeholder { font-weight:400 !important; color:#a5a5a5; } 
:-ms-input-placeholder { font-weight:400 !important; color:#a5a5a5; } 
::-ms-input-placeholder { font-weight:400 !important; color:#a5a5a5; } 
::placeholder { font-weight:400 !important; color:#a5a5a5; }

/*
input,
select,
button,
textarea { font-size:1rem; font-weight:normal; padding:0; border:1px solid #eaeaea; -webkit-appearance:none; -moz-appearance:none; appearance:none; }
button { cursor:pointer; -webkit-appearance:button; -moz-appearance:button; appearance:button; }
button a { text-decoration:none !important; }
textarea { display:block; width:100%; resize:none; }
button { border:none; }
*/

button:disabled {cursor:default;}
input:focus,
input:active,
textarea:focus,
textarea:active,
select:focus,
select:active,
button:focus,
button:active { font-weight:500; outline:none; } 
input:read-only,
input.readonly,
select:read-only,
textarea:read-only,
input:disabled,
select:disabled,
textarea:disabled { color:#676767; background-color:#f8f8f8; } 
input[readonly],
input[readonly='readonly'],
input[data-readonly='true'],
input.readonly,
textarea[readonly],
textarea[readonly='readonly'],
textarea[data-readonly='true'],
textarea.readonly { color:#676767; background-color:#f8f8f8; } 
input[type=checkbox],
input[type=radio]::-ms-check { position:absolute; overflow:hidden; width:0; height:0; opacity:0; } 
::-ms-check { border-radius:50%; } 
::-ms-clear { display:none; } 
.hidden { position:absolute !important; overflow:hidden !important; width:0 !important; height:0 !important; opacity:0 !important; display:none !important; } 
.disabled { pointer-events:none; opacity:0.4; } 
/* iOS에서 라디오 클릭 이슈 */
label > input,
label > select,
label > input + i,
label > select + i,
label > input + i + span,
label > select + i + span { pointer-events:none; } 
/* //iOS에서 라디오 클릭 이슈 */
/* inputs */
.input-group { width:100%; min-width:200px; } 
.input-group + .input-group,
.input-group + .btn,
.input-wrap + .input-wrap,
.input-wrap + .btn { margin-top:16px; } 
.input-group .input-wrap + .input-wrap,
.input-group .input-wrap + .btn { margin-top:0; } 
.input-group .input-wrap .input-info { font-size:0.8571rem; line-height:1.5; margin-top:4px; color:#767676; } 
.input-group .input-wrap.toggle .input-info { padding-right:68px; } 

.input-group .input-wrap.toggle span.input-title.required::after { margin-left:0.25em; content:'*'; color:#d5383a; } 


span.required::after { margin-left:0.25em; content:'*'; color:#d5383a; } 

/* inputs - checkbox */
.input-wrap.check { display:flex; flex-wrap:nowrap; width:100%; } 
.input-wrap.check label { display:flex; align-items:center; flex:1; max-width:none; height:36px; }
.input-wrap.check label input[type=checkbox] { position:absolute; opacity:0; } 
.input-wrap.check label input[type=checkbox] ~ .icon-check { position:relative; display:flex; align-items:center; flex:0 0 28px; justify-content:center; width:28px; max-width:28px; height:28px; opacity:1; background:url(../images/checkbox_uncheck.svg) no-repeat center; } 
.input-wrap.check label input[type=checkbox]:checked ~ .icon-check { background-image:url(../images/checkbox_check.svg); } 
.input-wrap.check label input[type=checkbox]:disabled ~ .icon-check { background-image:url(../images/checkbox_uncheck_dim.svg); } 
.input-wrap.check label input[type=checkbox]:disabled:checked ~ .icon-check { background-image:url(../images/checkbox_check_dim.svg); } 
.input-wrap.check label input[type=checkbox] ~ span { font-size:0.8571rem; margin-left:6px; color:#999999; width:auto; white-space: nowrap;}
.input-wrap.check label input[type=checkbox]:checked ~ span { color:#333333; width:auto; white-space: nowrap;}
.input-wrap.check label input[type=checkbox]:disabled ~ span { color:#959595; width:auto; white-space: nowrap;}
.input-wrap.check.error label input[type=checkbox] ~ span { color:#d5383a; } 
.input-wrap.check.error label input[type=checkbox] ~ .icon-check { border:1px solid #d5383a; border-radius:50%; } 
/* inputs - radio */
.input-wrap.radio { display:flex; flex-wrap:nowrap; width:100%; } 
.input-wrap.radio label { display:flex; align-items:center; flex:1; max-width:none; height:36px; } 
.input-wrap.radio label input[type=radio] { position:absolute; opacity:0; } 
.input-wrap.radio label input[type=radio] ~ .icon-radio { position:relative; display:flex; align-items:center; flex:0 0 28px; justify-content:center; width:28px; max-width:28px; height:28px; opacity:1; background:url(../images/radio_def.svg) no-repeat center; } 
.input-wrap.radio label input[type=radio]:checked ~ .icon-radio { background-image:url(../images/radio_sel.svg); } 
.input-wrap.radio label input[type=radio]:disabled ~ .icon-radio { background-image:url(../images/radio_def_dim.svg); } 
.input-wrap.radio label input[type=radio]:disabled:checked ~ .icon-radio { background-image:url(../images/radio_sel_dim.svg); } 
.input-wrap.radio label input[type=radio] ~ span { font-size:0.8571rem; margin-left:6px; color:#999999; width:auto; white-space: nowrap;}
.input-wrap.radio label input[type=radio]:checked ~ span { color:#333333; width:auto; white-space: nowrap;}
.input-wrap.radio label input[type=radio]:disabled ~ span { color:#959595; width:auto; white-space: nowrap;}
/* inputs - 토글스위치 */
.input-wrap.toggle { display:flex; flex-wrap:nowrap; width:100%; } 
.input-wrap.toggle label { display:flex; align-items:center; flex:1 1 auto; max-width:none; height:36px; } 
.input-wrap.toggle label .input-title { /*font-size:1rem; font-weight:500;*/ flex:1; } 
.input-wrap.toggle label input[type=checkbox] { position:absolute; opacity:0; } 
.input-wrap.toggle label input[type=checkbox] ~ .icon-toggle { position:relative; display:flex; align-items:center; flex:0 0 52px; justify-content:center; width:28px; max-width:52px; height:28px; opacity:1; background:url(../images/toggle_off.svg) no-repeat center; } 
.input-wrap.toggle label input[type=checkbox]:checked ~ .icon-toggle { background-image:url(../images/toggle_on.svg); } 
.input-wrap.toggle label input[type=checkbox]:disabled ~ .icon-toggle { background-image:url(../images/toggle_off_dim.svg); } 
.input-wrap.toggle label input[type=checkbox]:disabled:checked ~ .icon-toggle { background-image:url(../images/toggle_on_dim.svg); } 
.input-wrap.toggle label input[type=checkbox] ~ span { font-size:0.8571rem; margin-left:6px; color:#999999; } 
.input-wrap.toggle label input[type=checkbox]:checked ~ span { color:#333333; } 
.input-wrap.toggle label input[type=checkbox]:disabled ~ span { color:#959595; } 
/* dropdown */
/*.input-wrap.select { width:100%; } */
.input-wrap.select { flex-wrap : nowrap; } 
.conversation-area .input-wrap.select .ui-selectmenu-button { width:100%; } 
.conversation-area .ui-selectmenu-button { position:relative; display:flex; align-items:center; justify-content:flex-start; height:40px; border:1px solid #eaeaea; border-radius:12px; background:#ffffff; } 
.conversation-area .ui-selectmenu-button .ui-icon { font-weight:500; position:absolute; right:16px; width:6px; height:6px; transform:rotate(45deg) translateY(-50%); border-right:1px solid #333333; border-bottom:1px solid #333333; background:none; } 
.conversation-area .ui-selectmenu-button:hover { border-color:#0498dc; outline:none; background-color:#ffffff; } 
.conversation-area .ui-selectmenu-button:hover .ui-icon { transform:rotate(-135deg) translateY(-50%); border-color:#0498dc; } 
@media (hover: none) { .conversation-area .ui-selectmenu-button:hover { border-color:inherit; outline:none; background-color:inherit; }
  .conversation-area .ui-selectmenu-button:hover .ui-icon { transform:inherit; border-color:inherit; } }
.conversation-area .ui-selectmenu-button.ui-state-disabled { opacity:1; color:#959595; background-color:#f8f8f8; } 
.conversation-area .ui-selectmenu-button.ui-state-disabled .ui-icon { border-color:#959595; } 

/* table */
table tr.on {
    border : 2px solid #19ccdc!important;
}


.popup .map-group {
	text-align: left;
	width: auto;
	padding: 10px;
	background-color: #fff;
}
.popup .map-group ul.store-list {
    display: block;
}

.popup .map-group ul.store-list li .input-group {
    display: block;
}

/* pagination */

.off-screen {
    display: none;
}
.page-nav {
    width: 500px;
    text-align: center;
}
.page-nav a {
    display: inline-block;
    padding: 3px 5px;
    margin-right: 10px;
    font-family:Tahoma;
    background: #ccc;
    color: #000;
    text-decoration: none;
}
.page-nav a.active {
    background: #333;
    color: #fff;
}



/* input text */
.input-group { position:relative; display:flex; align-items:center; flex-wrap:nowrap; width:100%; /*max-width:268px;*/ } 



.input-group.wrap { flex-wrap:wrap; } 
.input-group.wrap .input-wrap { flex:0 0 100%; } 
.input-group + .input-group { margin-top:8px; } 
/*.input-group .input-wrap { display:flex; align-items:flex-start; flex:1; flex-wrap:wrap; justify-content:flex-end; } */

/* block 클래스 사용시 그룹이 오른쪽에 붙는 것을 왼쪽에 붙는 것으로 변경*/
.input-group .input-wrap { display:flex; align-items:flex-start; flex:1; flex-wrap:wrap; justify-content:flex-start; } 

.input-group.title-top { flex-wrap:wrap;} 
.input-group.title-top .input-wrap { flex:1 1 auto; max-width:100%; } 
/* .input-group.title-top .input-wrap { flex:0 0 100%; max-width:100%; } */
.input-group label { font-size:0.8571rem; display:flex; align-items:center; flex:1; width:100%; }
/*.input-group label.input-title { display:flex; align-items:center; align-self:flex-start; flex:0 0 78px; max-width:78px; height:36px; color:#767676; }*/
.input-group label.input-title { display:flex; align-items:center; align-self:flex-start; flex:0 0 78px; height:36px; color:#767676; }
.input-group label.input-title.wide { flex:0 0 100%; max-width:100%; height:auto; margin-bottom:6px; } 
label.required::after { margin-left:0.25em; content:'*'; color:#d5383a; } 



.input-group input,
.input-group textarea { font-size:0.8571rem; overflow:hidden; flex:1; height:36px; text-indent:12px; text-overflow:ellipsis; word-break:break-all; } 
.input-group textarea { height:auto; padding:0.5714rem 0.8571rem; resize:none; text-indent:0; } 
.input-group .btn-input { font-size:0.8571rem; display:flex; align-items:center; align-self:flex-start; flex:0 0 36px; justify-content:center; min-width:36px; height:36px; margin-left:3px; color:#a5a5a5; border:1px solid #cccccc; border-radius:12px; background-color:#ffffff; } 
.input-group.wrap .btn-input.block { flex:0 0 100%; max-width:calc(100% - 78px); } 
/* .input-group.title-top .input-wrap .btn-input.block { flex: 0 0 100%; max-width:calc(100% - 78px); } */
.input-group .input-wrap ~ .input-wrap .btn-input.block { margin-top:3px; } 
/* .input-group .input-wrap + .btn-input { align-self:center; } */
.input-group .btn-input:hover { border-color:#cccccc; background-color:#fbfbfb; } 
@media (hover: none) { .input-group .btn-input:hover { border-color:inherit; background-color:inherit; } }
.input-group .btn-input:active,
.input-group .btn-input.active { border-color:#0498dc; background-color:#ffffff; } 
.input-group .btn-input:disabled,
.input-group .btn-input.disabled { pointer-events:none; border-color:rgba(204, 204, 204, 0.4); background-color:rgba(255, 255, 255, 0.4); } 
.input-group .btn-input i { position:relative; display:block; width:16px; height:16px; } 
.input-group .btn-input i.icon-search { width:20px; height:20px; background:url(../images/ico_btn_search_nor.svg) no-repeat center; } 
.input-group .btn-input:hover i.icon-search { background-image:url(../images/ico_btn_search_foc.svg); } 

.input-group .btn-input i.icon-attach { width:20px; height:20px; background:url(../images/ico_btn_attachment_nor.svg) no-repeat center; } 
.input-group .btn-input:hover i.icon-attach { background-image:url(../images/ico_btn_attachment_foc.svg); } 

@media (hover: none) { .input-group .btn-input:hover i.icon-search { background-image:url(../images/ico_btn_search_nor.svg); } }
.input-group .btn-input:active i.icon-search,
.input-group .btn-input.active i.icon-search { background-image:url(../images/ico_btn_search_pre.svg); } 
.input-group .btn-input:disabled i.icon-search { background-image:url(../images/ico_btn_search_dim.svg); } 
.input-group .btn-input i.icon-calendar { background:url(../images/ico_btn_calendar_nor.svg) no-repeat center; } 
.input-group .btn-input:hover i.icon-calendar { background-image:url(../images/ico_btn_calendar_foc.svg); } 
@media (hover: none) { .input-group .btn-input:hover i.icon-calendar { background-image:url(../images/ico_btn_calendar_nor.svg); } }
.input-group .btn-input:active i.icon-calendar,
.input-group .btn-input.active i.icon-calendar { background-image:url(../images/ico_btn_calendar_pre.svg); } 
.input-group .btn-input:disabled i.icon-calendar { background-image:url(../images/ico_btn_calendar_dim.svg); } 
.input-group .btn-input i.icon-time { background:url(../images/ico_btn_time_nor.svg) no-repeat center; } 
.input-group .btn-input:hover i.icon-time { background-image:url(../images/ico_btn_time_foc.svg); } 
@media (hover: none) { .input-group .btn-input:hover i.icon-time { background-image:url(../images/ico_btn_time_nor.svg); } }
.input-group .btn-input:active i.icon-time,
.input-group .btn-input.active i.icon-time { background-image:url(../images/ico_btn_time_pre.svg); } 
.input-group .btn-input:disabled i.icon-time { background-image:url(../images/ico_btn_time_dim.svg); } 
/*.input-wrap.text { align-items:center; justify-content:flex-end; } */
/* 레이블이 단독으로 쓰일때 오른쪽 끝에 붙는 것을 왼쪽 끝으로 변경*/
.input-wrap.text { align-items:center; justify-content:flex-start; } 
.input-wrap.text span.validate-text,
.input-wrap.text span.text-count { font-size:0.7143rem; line-height:1.5; flex:0 0 100%; order:9; width:100%; } 
.input-wrap.text span.text-count { flex:0 0 60px; margin-top:3px; text-align:right; letter-spacing:normal; color:#959595; } 
.input-wrap.text span.text-count strong { color:#333333; } 
.input-wrap.text span.text-count + .validate-text { flex:0 0 100%; order:8; max-width:calc(100% - 60px); } 
.input-wrap.text span.validate-text.error { color:#d5383a; } 
.input-wrap.text span.validate-text.success { color:#0498dc; } 
.input-wrap.text span.validate-text.error,
.input-wrap.text span.validate-text.success { margin-top:3px; padding:0 2px 0 80px; } 
.input-group.title-top .input-wrap.text span.validate-text.error,
.input-group.title-top .input-wrap.text span.validate-text.success { padding-left:0; } 
.input-wrap.text .input-title.wide ~ span.validate-text.error,
.input-wrap.text .input-title.wide ~ span.validate-text.success { padding-left:2px; } 
.input-wrap.text input,
.input-wrap.text textarea { min-height:36px; border:1px solid #eaeaea; border-radius:12px; } 
.input-wrap.text textarea { /* max-height:67px; */
  overflow-y:hidden; } 
.title-top .input-wrap.text input,
.title-top .input-wrap.text textarea { flex:0 0 100%; max-width:100%; } 
.input-wrap.text input.error,
.input-wrap.text textarea.error { border-color:#d5383a; } 
.input-wrap.text input:focus,
.input-wrap.text textarea:focus,
.input-wrap.text input.active,
.input-wrap.text textarea.active { padding-right:32px; border-color:#0498dc; } 
.input-wrap.text .input-title ~ input,
.input-wrap.text .input-title ~ textarea,
.input-wrap.text .input-title ~ .text-area 
.input-wrap.text .input-title ~ .rating-form { flex:1; width:calc(100% - 78px); } 
.input-wrap.text .input-title.hidden ~ input,
.input-wrap.text .input-title.hidden ~ textarea,
.input-wrap.text .input-title.wide ~ input,


/*.input-wrap.text .input-title.wide ~ textarea { \*flex:0 0 100%;\* max-width:100%; } */
.input-wrap.text .input-title.wide ~ textarea { flex:0 0 100%; max-width:100%; } 



/* .input-wrap.text .input-title ~ .text-area { max-height:52px; overflow-y:auto; position:relative; } */
/* .input-wrap.text .input-title.hidden ~ span.validate-text { } */
.input-wrap.text .input-title.hidden ~ span.validate-text.error,
.input-wrap.text .input-title.hidden ~ span.validate-text.success { padding:3px 2px; } 
.input-wrap.text .btn-clear { display:none; align-items:center; align-self:flex-end; justify-content:center; width:28px; height:40px; margin-left:-28px; transform:translateX(-6px); } 
/* .input-wrap input:focus + .btn-clear,
.input-wrap textarea:focus + .btn-clear { display:flex; } */
.input-wrap.text .btn-clear.show { display:flex; } 
.input-wrap.text .btn-clear .icon-clear { width:20px; height:20px; background:url(../images/btn_chat_cancel_nor.svg) no-repeat center center; } 
.input-wrap.text .btn-clear:hover .icon-clear { background-image:url(../images/btn_chat_cancel_foc.svg); } 
@media (hover: none) { .input-wrap.text .btn-clear:hover .icon-clear { background-image:url(../images/btn_chat_cancel_nor.svg); } }
.input-wrap.text .btn-clear:active .icon-clear { background-image:url(../images/btn_chat_cancel_pre.svg); } 
.input-wrap.text .btn-clear:disabled .icon-clear { background-image:url(../images/btn_chat_cancel_dim.svg); } 
/* radio group */
.input-group.radio-group { flex-wrap:wrap; justify-content:flex-start; } 
.input-group + .input-group.radio-group { margin-top:0; } 
.input-group.radio-group .input-wrap.radio { flex:0 0 33.3333%; width:auto; padding-right:16px; } 
.input-group.radio-group .input-wrap.radio.block { flex:0 0 100%;} 
/* .input-group.radio-group .input-wrap.radio:nth-child(1row) */
/* check group */
.input-group.check-group { flex-wrap:wrap; } 
.input-group + .input-group.check-group { margin-top:0; } 
.input-group.check-group .input-wrap.check { flex:0 0 33.3333%; width:auto; padding-right:16px; } 
.input-group.check-group .input-wrap.check.block { flex:0 0 100%; }

/* select group */

.input-group .input-wrap.select { display: flex;
    align-items: flex-start;
    flex: 1;
    flex-wrap: nowrap;
    justify-content: flex-start; }
.input-group.title-top .input-wrap.select { display: flex;
    align-items: flex-start;
    flex: 1;
    flex-wrap: wrap;
    justify-content: flex-start; }


/* 기본버튼 */
.btn { font-size:1rem; font-weight:500; line-height:1.43; position:relative; display:flex; align-items:center; justify-content:center; height:40px; padding:0 8px; transition:0.15s all; text-align:center; } 
.btn:focus { outline:none; box-shadow:none; } 
.btn:disabled,
.btn.disabled { opacity:0.4 !important; } 
.btn.default { font-size:1rem; display:flex; align-items:center; justify-content:center; width:268px; max-width:100%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; } 
.btn.default span { display:flex; flex:1; justify-content:center; text-align:center; } 
.btn.default:active,
.btn.default:disabled { color:#ffffff; background-color:#0498dc; } 
.btn.default:not(.disabled):not(:disabled):hover { background-color:#def5ff; } 
.btn.default:not(.disabled):not(:disabled):focus,
.btn.default:not(.disabled):not(:disabled):active,
.btn.default:not(.disabled):not(:disabled).active { color:#ffffff; background-color:#0498dc; } 
@media (hover: none) { .btn.default:not(.disabled):not(:disabled):hover { color:inherit; background-color:inherit; } }
/* .btn.default:hover::after,
.btn.default:focus::after { border-color:#ffffff; } */
.btn.default:active,
.btn.default:disabled { opacity:0.6; } 
.btn.primary { font-size:14px; display:flex; align-items:center; justify-content:center; width:268px; max-width:100%; height:40px; color:#ffffff; border-color:#1e5fcb; border-radius:12px; background-color:#1e5fcb; }
.btn.primary.narrow { width:50px}
.btn.primary:not(:disabled):hover { border-color:#1046a5; background-color:#1046a5; } 
@media (hover: none) { .btn.primary:not(:disabled):hover { border-color:#1e5fcb; background-color:#1046a5; } }
.btn.primary:not(:disabled):active,
.btn.primary:not(:disabled).active { border-color:#0b3c91; background-color:#0b3c91; } 
.btn.secondary { font-size:1rem; display:flex; align-items:center; justify-content:center; width:268px; max-width:100%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; }
.btn.secondary.black { font-size:1rem; display:flex; align-items:center; justify-content:center; width:268px; max-width:100%; height:40px; color:#333333; border:1px solid #e4e9f2; border-radius:12px; background-color:#ffffff; }
.btn.left { text-align:left; }
.btn.secondary.narrow { width:50px} 
.btn.secondary:not(:disabled):hover { /* color:#ffffff; */
  background-color:#def5ff; } 
@media (hover: none) { .btn.secondary:not(:disabled):hover { /* color:#ffffff; */
    background-color:inherit; } }
.btn.secondary:not(:disabled):focus,
.btn.secondary:not(:disabled):active,
.btn.secondary:not(:disabled).active { color:#ffffff; background-color:#0498dc; } 
.btn.primary:disabled,
.btn.secondary:disabled { /* flex:0 0 100%; width:100%; */
  opacity:0.4; } 
.btn.primary.wide,
.btn.secondary.wide { flex:0 0 100%; width:300px; /* max-width:500px; */ min-width:268px; max-width:calc(100vw - 60px - 32px + 6px); } 






.popup .btn { font-size:1rem; font-weight:500; line-height:1.43; position:relative; display:flex; align-items:center; justify-content:center; height:40px; padding:0 8px; transition:0.15s all; text-align:center; } 
.popup .btn:focus { outline:none; box-shadow:none; } 
.popup .btn:disabled,
.popup .btn.disabled { opacity:0.4 !important; } 
.popup .btn.default { font-size:1rem; display:flex; align-items:center; justify-content:center; width:268px; max-width:100%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; } 
.popup .btn.default span { display:flex; flex:1; justify-content:center; text-align:center; } 
.popup .btn.default:active,
.popup .btn.default:disabled { color:#ffffff; background-color:#0498dc; } 
.popup .btn.default:not(.disabled):not(:disabled):hover { background-color:#def5ff; } 
.popup .btn.default:not(.disabled):not(:disabled):focus,
.popup .btn.default:not(.disabled):not(:disabled):active,
.popup .btn.default:not(.disabled):not(:disabled).active { color:#ffffff; background-color:#0498dc; } 
@media (hover: none) { .popup .btn.default:not(.disabled):not(:disabled):hover { color:inherit; background-color:inherit; } }
/* .btn.default:hover::after,
.btn.default:focus::after { border-color:#ffffff; } */
.popup .btn.default:active,
.popup .btn.default:disabled { opacity:0.6; } 
.popup .btn.primary { font-size:14px; display:flex; align-items:center; justify-content:center; width:268px; max-width:100%; height:40px; color:#ffffff; border-color:#1e5fcb; border-radius:12px; background-color:#1e5fcb; }
.popup .btn.primary.narrow { width:50px}
.popup .btn.primary:not(:disabled):hover { border-color:#1046a5; background-color:#1046a5; } 
@media (hover: none) { .popup .btn.primary:not(:disabled):hover { border-color:#1e5fcb; background-color:#1046a5; } }
.popup .btn.primary:not(:disabled):active,
.popup .btn.primary:not(:disabled).active { border-color:#0b3c91; background-color:#0b3c91; } 
.popup .btn.secondary { font-size:14px; display:flex; align-items:center; justify-content:center; width:268px; max-width:100%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; }
.popup .btn.secondary.narrow { width:50px} 
.popup .btn.secondary:not(:disabled):hover { /* color:#ffffff; */
  background-color:#def5ff; } 
@media (hover: none) { .popup .btn.secondary:not(:disabled):hover { /* color:#ffffff; */
    background-color:inherit; } }
.popup .btn.secondary:not(:disabled):focus,
.popup .btn.secondary:not(:disabled):active,
.popup .btn.secondary:not(:disabled).active { color:#ffffff; background-color:#0498dc; } 
.popup .btn.primary:disabled,
.popup .btn.secondary:disabled { /* flex:0 0 100%; width:100%; */
  opacity:0.4; } 
.popup .btn.primary.wide,
.popup .btn.secondary.wide { flex:0 0 100%; width:300px;/* max-width:500px; */ min-width:268px; max-width:calc(100vw - 60px - 32px + 6px); } 





.speech-content .btn.primary.wide,
.speech-content .btn.secondary.wide { width:calc(100vw - 60px - 32px + 6px); } 
.speech-content .speech-btns { width:268px; } 
.speech-content > .btn,
.speech-content > .btn.primary.wide,
.speech-content > .btn.secondary.wide { width:calc(100vw - 60px - 32px + 6px); max-width:268px; }

/* QA 테이블 border 추가*/
.speech-content .speech-text table {border: 1px solid black}
.speech-content .speech-text table tr td {border: 1px solid black}

/* 리치폼에서 테이블 border 없애기*/
.speech-content .form-body .speech-text table {border: 0px solid}
.speech-content .form-body .speech-text table tr td {border: 0px solid}

.speech-btns .btn.primary,
.speech-btns .btn.secondary { flex:1; width:auto; max-width:calc(100% - 6px); } 
.speech-btns.hor .btn.primary,
.speech-btns.hor .btn.secondary,
.speech-btns.hor button { flex:0 0 50%; width:auto; max-width:calc(50% - 6px); } 
.speech-btns.flex .btn.primary,
.speech-btns.flex .btn.secondary { flex:1; width:auto; max-width:none; } 
.slide-group + .btn.primary.wide,
.slide-group + .btn.secondary.wide { max-width:300px; } 
.speech-btns .btn.primary.wide,
.speech-btns .btn.secondary.wide { min-width:calc(100% - 6px); } 
.btn.premary,
.btn.secondary { padding:0 16px; } 
.speech-btns.flex .btn.premary,
.speech-btns.flex .btn.secondary { padding:0 8px; } 
.btn.premary span,
.btn.secondary span { flex:1 1 100%; margin-top:10px; margin-bottom:10px} 
.tn.premary span + i,
.btn.secondary span + i { /* position:absolute; top:50%; right:16px; */
  display:block; flex:0 0 12px; width:12px; height:12px; /* transform:translateY(-50%); */ margin-left:8px; } 
.btn .icon-detail { background:url(../images/ico_btn_detail_nor.svg) no-repeat center; background-size:12px 12px; }
.btn .icon-detail-black { background:url(../images/ico_btn_detail_black_nor.svg) no-repeat center; background-size:12px 12px; }
.btn .icon-link { background:url(../images/ico_btn_link_nor.svg) no-repeat center; background-size:12px 12px; }
.btn .icon-link-black { background:url(../images/ico_btn_link_nor_black.svg) no-repeat center; background-size:12px 12px; }
.btn .icon-all { background:url(../images/ico_btn_detail_big_nor.svg) no-repeat center; background-size:12px 12px; } 
.btn .icon-download { background:url(../images/ico_btn_download_nor.svg) no-repeat center; background-size:12px 12px; } 
.btn:not(:disabled):hover .icon-detail { background-image:url(../images/ico_btn_detail_foc.svg); } 
@media (hover: none) { .btn:not(:disabled):hover .icon-detail { background-image:url(../images/ico_btn_download_nor.svg); } }
.btn:not(:disabled):focus .icon-detail,
.btn:not(:disabled):active .icon-detail,
.btn:not(:disabled).active .icon-detail { background-image:url(../images/ico_btn_detail_pre.svg); } 
/* .btn:disabled .icon-detail { background-image:url(../images/ico_btn_detail_dim.svg); } */
.btn:not(:disabled):hover .icon-link { background-image:url(../images/ico_btn_link_foc.svg); } 
@media (hover: none) { .btn:not(:disabled):hover .icon-link { background-image:url(../images/ico_btn_link_nor.svg); } }
.btn:not(:disabled):focus .icon-link,
.btn:not(:disabled):active .icon-link,
.btn:not(:disabled).active .icon-link { background-image:url(../images/ico_btn_link_pre.svg); } 
/* .btn:disabled .icon-link { background-image:url(../images/ico_btn_link_dim.svg); } */
.btn:not(:disabled):hover .icon-all { background-image:url(../images/ico_btn_detail_big_foc.svg); } 
@media (hover: none) { .btn:not(:disabled):hover .icon-all { background-image:url(../images/ico_btn_detail_big_nor.svg); } }
.btn:not(:disabled):focus .icon-all,
.btn:not(:disabled):active .icon-all,
.btn:not(:disabled).active .icon-all { background-image:url(../images/ico_btn_detail_big_pre.svg); } 
/* .btn:disabled .icon-all { background-image:url(../images/ico_btn_detail_big_dim.svg); } */
.btn:not(:disabled):hover .icon-download { background-image:url(../images/ico_btn_download_foc.svg); } 
@media (hover: none) { .btn:not(:disabled):hover .icon-download { background-image:url(../images/ico_btn_download_nor.svg);; } }
.btn:not(:disabled):focus .icon-download,
.btn:not(:disabled):active .icon-download,
.btn:not(:disabled).active .icon-download { background-image:url(../images/ico_btn_download_pre.svg); } 
.speech-content + .btn { min-width:288px; max-width:calc(100vw - 60px); margin-top:8px; } 
.speech-content > .btn + .btn { margin-top:8px; } 
.speech-content > .speech-title + .btn,
.speech-content > .speech-text + .btn { margin-top:12px; } 
.slide-group + .btn { margin-top:8px; } 
.store-info + .btn { margin-top:16px; } 
.btn-pop-close { position:absolute; /*top:20px;*/ right:20px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; } 
.btn-pop-close.ui-state-active { border:none; background:none; } 
.btn-pop-close .icon-close { position:relative; display:block; } 
.btn-pop-close .icon-close::before,
.btn-pop-close .icon-close::after { position:absolute; top:50%; left:50%; display:block; width:16px; height:2px; content:''; border-radius:1px; background-color:#000000; } 
.btn-pop-close .icon-close::before { transform:translate(-50%, -50%) rotate(45deg); } 
.btn-pop-close .icon-close::after { transform:translate(-50%, -50%) rotate(-45deg); } 
/* .btn:disabled .icon-download { background-image:url(../images/ico_btn_download_dim.svg); } */






.popup .speech-content .btn.primary.wide,
.popup .speech-content .btn.secondary.wide { width:calc(100vw - 60px - 32px + 6px); } 
.popup .speech-content .speech-btns { width:268px; } 
.popup .speech-content > .btn,
.popup .speech-content > .btn.primary.wide,
.popup .speech-content > .btn.secondary.wide { width:calc(100vw - 60px - 32px + 6px); max-width:268px; } 
.popup .speech-btns .btn.primary,
.popup .speech-btns .btn.secondary { flex:1; width:auto; max-width:calc(100% - 6px); } 
.popup .speech-btns.hor .btn.primary,
.popup .speech-btns.hor .btn.secondary,
.popup .speech-btns.hor button { flex:0 0 50%; width:auto; max-width:calc(50% - 6px); } 
.popup .speech-btns.flex .btn.primary,
.popup .speech-btns.flex .btn.secondary { flex:1; width:auto; max-width:none; } 
.popup .slide-group + .btn.primary.wide,
.popup .slide-group + .btn.secondary.wide { max-width:300px; } 
.popup .speech-btns .btn.primary.wide,
.popup .speech-btns .btn.secondary.wide { min-width:calc(100% - 6px); } 
.popup .btn.premary,
.popup .btn.secondary { padding:0 16px; } 
.popup .speech-btns.flex .btn.premary,
.popup .speech-btns.flex .btn.secondary { padding:0 8px; } 
.popup .btn.premary span,
.popup .btn.secondary span { flex:1 1 100%; } 
.popup .btn.premary span + i,
.popup .btn.secondary span + i { /* position:absolute; top:50%; right:16px; */
  display:block; flex:0 0 12px; width:12px; height:12px; /* transform:translateY(-50%); */ margin-left:8px; } 
.popup .btn .icon-detail { background:url(../images/ico_btn_detail_nor.svg) no-repeat center; background-size:12px 12px; } 
.popup .btn .icon-link { background:url(../images/ico_btn_link_nor.svg) no-repeat center; background-size:12px 12px; } 
.popup .btn .icon-all { background:url(../images/ico_btn_detail_big_nor.svg) no-repeat center; background-size:12px 12px; } 
.popup .btn .icon-download { background:url(../images/ico_btn_download_nor.svg) no-repeat center; background-size:12px 12px; } 
.popup .btn:not(:disabled):hover .icon-detail { background-image:url(../images/ico_btn_detail_foc.svg); } 
@media (hover: none) { .popup .btn:not(:disabled):hover .icon-detail { background-image:url(../images/ico_btn_download_nor.svg); } }
.popup .btn:not(:disabled):focus .icon-detail,
.popup .btn:not(:disabled):active .icon-detail,
.popup .btn:not(:disabled).active .icon-detail { background-image:url(../images/ico_btn_detail_pre.svg); } 
/* .btn:disabled .icon-detail { background-image:url(../images/ico_btn_detail_dim.svg); } */
.popup .btn:not(:disabled):hover .icon-link { background-image:url(../images/ico_btn_link_foc.svg); } 
@media (hover: none) { .btn:not(:disabled):hover .icon-link { background-image:url(../images/ico_btn_link_nor.svg); } }
.popup .btn:not(:disabled):focus .icon-link,
.popup .btn:not(:disabled):active .icon-link,
.popup .btn:not(:disabled).active .icon-link { background-image:url(../images/ico_btn_link_pre.svg); } 
/* .btn:disabled .icon-link { background-image:url(../images/ico_btn_link_dim.svg); } */
.popup .btn:not(:disabled):hover .icon-all { background-image:url(../images/ico_btn_detail_big_foc.svg); } 
@media (hover: none) { .popup .btn:not(:disabled):hover .icon-all { background-image:url(../images/ico_btn_detail_big_nor.svg); } }
.popup .btn:not(:disabled):focus .icon-all,
.popup .btn:not(:disabled):active .icon-all,
.popup .btn:not(:disabled).active .icon-all { background-image:url(../images/ico_btn_detail_big_pre.svg); } 
/* .btn:disabled .icon-all { background-image:url(../images/ico_btn_detail_big_dim.svg); } */
.popup .btn:not(:disabled):hover .icon-download { background-image:url(../images/ico_btn_download_foc.svg); } 
@media (hover: none) { .popup .btn:not(:disabled):hover .icon-download { background-image:url(../images/ico_btn_download_nor.svg);; } }
.popup .btn:not(:disabled):focus .icon-download,
.popup .btn:not(:disabled):active .icon-download,
.popup .btn:not(:disabled).active .icon-download { background-image:url(../images/ico_btn_download_pre.svg); } 
.popup .speech-content + .btn { min-width:288px; max-width:calc(100vw - 60px); margin-top:8px; } 
.popup .speech-content > .btn + .btn { margin-top:8px; } 
.popup .speech-content > .speech-title + .btn,
.popup .speech-content > .speech-text + .btn { margin-top:12px; } 
.popup .slide-group + .btn { margin-top:8px; } 
.popup .store-info + .btn { margin-top:16px; } 
.popup .btn-pop-close { position:absolute; /*top:20px;*/ right:20px; display:flex; align-items:center; justify-content:center; width:24px; height:24px; } 
.popup .btn-pop-close.ui-state-active { border:none; background:none; } 
.popup .btn-pop-close .icon-close { position:relative; display:block; } 
.popup .btn-pop-close .icon-close::before,
.popup .btn-pop-close .icon-close::after { position:absolute; top:50%; left:50%; display:block; width:16px; height:2px; content:''; border-radius:1px; background-color:#000000; } 
.popup .btn-pop-close .icon-close::before { transform:translate(-50%, -50%) rotate(45deg); } 
.popup .btn-pop-close .icon-close::after { transform:translate(-50%, -50%) rotate(-45deg); } 
.popup .speech-text { line-height: 150% }
/* .btn:disabled .icon-download { background-image:url(../images/ico_btn_download_dim.svg); } */









/* Common Layout */
.wrapper { display:flex; overflow:hidden; flex-direction:column; height:100%; max-height:100%; background-color:#0c2651; /* min-height:100vh; */top:0;left:0;position:relative;} 
/* Skip Nav */
.skip-nav { position:fixed; z-index:99; width:100%; } 
/* .skip-nav li { } */
.skip-nav li a { display:block; overflow:hidden; height:0; text-align:center; color:#ffffff; background-color:#0498dc; } 
.skip-nav li a:focus { font-size:1.5385rem; font-weight:500; height:auto; padding:10px; } 
/* loading */
.loading { position:relative; display:flex; padding-top:4px; } 
.slide-loading { padding:20px; } 
.slide-loading .loading { margin:0 auto; } 
.loading .dot { display:block; width:6px; height:6px; margin:0 3px; border-radius:50%; background-color:#0498dc; } 
.loading .dot-1 { animation:loadingDot1 2s infinite; } 
.loading .dot-2 { animation:loadingDot2 2s infinite; } 
.loading .dot-3 { animation:loadingDot3 2s infinite; } 
@keyframes loadingDot1 { 0% { transform:translateY(-2px); opacity:1; }
  33.3333% { transform:translateY(0); opacity:0.6; }
  66.6666% { transform:translateY(0); opacity:0.3; }
  100% { transform:translateY(-2px); opacity:1; } }
@keyframes loadingDot2 { 0% { transform:translateY(0); opacity:0.6; }
  33.3333% { transform:translateY(-2px); opacity:1; }
  66.6666% { transform:translateY(0); opacity:0.6; }
  100% { transform:translateY(0); opacity:0.6; } }
@keyframes loadingDot3 { 0% { transform:translateY(0); opacity:0.3; }
  33.3333% { transform:translateY(0); opacity:0.6; }
  66.6666% { transform:translateY(-2px); opacity:1; }
  100% { transform:translateY(0); opacity:0.3; } }
/* Header */
.header { z-index:10; display:flex; align-items:center; flex:0 0 70px; width:100%; max-height:70px; padding:0 16px; background-color:#f5f7fa; /* touch-action: none; */} 
.header .header-action { display:flex; flex:1; } 
.header .header-action.left { justify-content:flex-start; } 
.header .header-action.left { justify-content:flex-start; } 
.header .header-action.right { justify-content:flex-end; } 
.header .header-action .btn-header { font-size:0.8571rem; font-weight:500; display:flex; align-items:center; min-width:22px; height:22px; } 
.header .header-action .btn-header i { width:22px; height:22px; } 
.header .header-action .btn-header i + span { font-weight:bold; } 
.header .header-action .btn-header:not(:disabled):hover { color:#3ec2ff; } 
@media (hover: none) { .header .header-action .btn-header:not(.disabled):not(:disabled):hover { color:inherit; } }
.header .header-action .btn-header:active { color:#0498dc; } 
.header .header-action .btn-header:disabled { cursor:auto; opacity:0.4; } 
.header .header-action .btn-header .icon-arrow { display:flex; align-items:center; justify-content:center; width:14px; height:14px; transition:0.15s all; } 
.header .header-action .btn-header .icon-arrow::after { display:block; width:6px; height:6px; content:''; transform:rotate(45deg); border-width:0; border-style:solid; } 
.header .header-action .btn-header .icon-arrow.left::after { border-bottom-width:1px; border-left-width:1px; } 
.header .header-action .btn-header .icon-arrow.right::after { border-top-width:1px; border-right-width:1px; } 
.header .header-action .btn-header .icon-arrow.up::after { border-top-width:1px; border-left-width:1px; } 
.header .header-action .btn-header .icon-arrow.down::after { border-right-width:1px; border-bottom-width:1px; } 
.header .header-action .btn-header:hover .icon-arrow { border-top-color:#3ec2ff; border-right-color:#3ec2ff; border-bottom-color:#3ec2ff; border-left-color:#3ec2ff; } 
@media (hover: none) { .header .header-action .btn-header:hover .icon-arrow { border-top-color:inherit; border-right-color:inherit; border-bottom-color:inherit; border-left-color:inherit; } }
.header .header-action .btn-header:active .icon-arrow,
.header .header-action .btn-header:disabled .icon-arrow { border-color:#cccccc; } 
.header .header-action .btn-header .icon-menu { background:url(../images/ico_topbar_menu_nor@3x.png) no-repeat center; background-size:22px; } 
.header .header-action .btn-header:hover .icon-menu { background-image:url(../images/ico_topbar_menu_pre@3x.png); background-size:22px; } 
@media (hover: none) { .header .header-action .btn-header:hover .icon-menu { background-image:url(../images/ico_topbar_menu_nor@3x.png); background-size:22px; } }
.header .header-action .btn-header:active .icon-menu { background-image:url(../images/ico_topbar_menu_pre@3x.png); background-size:22px; } 
.header .header-action .btn-header:disabled .icon-menu { background-image:url(../images/ico_topbar_menu_dim@3x.png); background-size:22px; }
/*  
.header .header-action .btn-header .icon-chat { background:url(../images/ico_topbar_chat_nor@3x.png) no-repeat center; background-size:22px; } 
.header .header-action .btn-header:hover .icon-chat { background-image:url(../images/ico_topbar_chat_pre@3x.png); background-size:22px; }
 */ 
.header .header-action .btn-header .icon-chat-onprem { background:url(../images/ico_btn_refresh_nor.svg) no-repeat center; background-size:22px; } 
.header .header-action .btn-header:hover .icon-chat-onprem { background-image:url(../images/ico_btn_refresh_foc.svg); background-size:22px; }
@media (hover: none) { .header .header-action .btn-header:hover .icon-chat-onprem { background-image:url(../images/ico_btn_refresh_nor.svg); background-size:22px; } }

.header .header-action .btn-header .icon-chat-paas { background:url(../images/ico_topbar_chat_nor@3x.png) no-repeat center; background-size:22px; } 
.header .header-action .btn-header:hover .icon-chat-paas { background-image:url(../images/ico_topbar_chat_pre@3x.png); background-size:22px; } 
@media (hover: none) { .header .header-action .btn-header:hover .icon-chat-paas { background-image:url(../images/ico_topbar_chat_nor@3x.png); background-size:22px; } }



.header .header-action .btn-header .icon-close { background:url(../images/ico_topbar_close_nor.svg) no-repeat center; background-size:18px; } 
.header .header-action .btn-header:hover .icon-close { background-image:url(../images/ico_topbar_close_pre.svg); } 
@media (hover: none) { .header .header-action .btn-header:hover .icon-close { background-image:url(../images/ico_topbar_close_nor.svg); } }
.header .header-action .btn-header:active .icon-close { background-image:url(../images/ico_topbar_close_pre.svg); } 
.header .header-action .btn-header:disabled .icon-close { background-image:url(../images/ico_topbar_close_dim.svg); } 
.header .header-action .btn-header ~ .btn-header { margin-left:16px; } 
/* .header .header-action .btn-header .icon-back { } */
.header h1 { display:flex; flex:0 0 140px; justify-content:center; } 
.header h1 .logo-header { font-size:2.4615rem; font-weight:bold; display:flex; align-items:center; justify-content:center; height:32px; } 
.header h1 .ui-selectmenu-menu { position:fixed; top:10px !important; left:50% !important; overflow:hidden; width:140px; transform:translateX(-50%); border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.1); } 
.header h1 .ui-selectmenu-menu .ui-menu { overflow:hidden; padding:0 10px; border:none; background:none; } 
.header h1 .ui-selectmenu-menu .ui-menu .ui-menu-item { position:relative; display:flex; align-items:center; justify-content:center; height:46px; } 
.header h1 .ui-selectmenu-menu .ui-menu .ui-menu-item + .ui-menu-item { border-top:1px solid rgba(4, 152, 220, 0.1); } 
.header h1 .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-menu-item-wrapper { font-size:0.8571rem; font-weight:bold; position:relative; z-index:1; background:none; } 
.header h1 .ui-selectmenu-menu .ui-menu .ui-menu-item .ui-menu-item-wrapper.ui-state-active { color:#0498dc; border:none; } 



ul.ui-menu { max-height: 600px !important; }
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper { position:relative; display:flex; align-items:center; justify-content:left; height:45px; } 
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active { font-weight:bold; color:#000000; border:none; background:none; } 
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper::before { position:absolute; z-index:0; top:0; right:50%; bottom:0; left:50%; height:100%; content:''; transition:0.25s all; opacity:0; background-color:rgba(4, 152, 220, 0.25); } 
.ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active::before { right:-20px; left:-20px; opacity:1; } 



.header h1 .ui-selectmenu-menu .ui-menu .ui-menu-item:before { position:absolute; z-index:0; top:0; right:50%; left:50%; height:100%; content:''; transition:0.25s all; background-color:#f5f7fa; } 
.header h1 .ui-selectmenu-menu .ui-menu .ui-menu-item:hover::before { right:-16px; left:-16px; } 
@media (hover: none) { .header h1 .ui-selectmenu-menu .ui-menu .ui-menu-item:hover::before { right:inherit; left:inherit; } }
/* .header h1 .logo-header::before { display:flex; width:100%; height:100%; content:'LOGO'; color:#0498dc; } */
.header .charactor-img { position:absolute; transition:0.5s all; } 
.header .charactor-img.bot,
.header .charactor-img.counselor-ready,
.header .charactor-img.counselor { z-index:9; top:50%; left:0; margin-left:0; transition:0.3s all; transform:translate(0, -50%); } 
.chatbot-start .header .charactor-img { left:50%; transform:translate(-50%, 80px) scale(2); opacity:0; } 
.header .charactor-img .ani-charactor { position:relative !important; width:34px; height:34px; } 
.header .charactor-img .ani-charactor * { position:static !important; } 
.header .charactor-img.bot .face { width:34px; height:34px; border-radius:0; /* background:url(../images/img_topbar_linkey.svg) no-repeat center top; background-size:60px; */ }
/* .charactor-img.counselor-ready .face { background-image:url(../images/img_topbar_cs.svg); } */
/* .charactor-img.counselor .face { background-image:url(../images/img_topbar_cs.svg); } */
/* .chat-started .header .charactor-img,
.counseling-started .header .charactor-img { position:absolute; top:60px; left:50%; margin-left:0; transform:translate(-50%, 0); } */
/* .chat-started .header .charactor-img,
.counseling-started .header .charactor-img { } */
.charactor-img.bot .face .ani-charactor,
.charactor-img.bot .face .cs-change { position:relative; display:none; width:34px; height:34px; } 
.charactor-img.bot .face .ani-charactor.default { display:block; } 
/* .charactor-img.counselor-ready .face .ani-charactor.cs-change { display:block; } */
.charactor-img.counselor-ready .face .ani-charactor.default { display:none; } 
.charactor-img.counselor .face .ani-charactor:not(.cs-change) { display:none; } 
.charactor-img.counselor .face .cs-change { display:block !important; } 
/* .header .charactor-img.bot .face,
.header .charactor-img.counselor-ready .face,
.header .charactor-img.counselor .face { animation:headerCharactorBounce 1.5s infinite; } */
.header .charactor-img.bot .shadow,
.header .charactor-img.counselor-ready .shadow { right:0; width:60px; /* animation:headerCharactorBounceShadow 1.5s infinite; */ }
.header .logo-header img { display:none; } 
.header h1 { display:flex; align-items:center; justify-content:center; } 
.header h1 label { position:relative; display:inline-block; align-items:center; width:auto; height:auto; padding-left:35px; transition:0.5s all; } 
.chatbot-start .header h1 label { padding-left:0; } 
.chat-started .header h1 label,
.counseling-started .header h1 label { padding:0; } 
.chat-started .header .charactor-img,
.counseling-started .header .charactor-img { width:68px; height:68px; } 
.chat-started .header .charactor-img .face .ani-charactor,
.counseling-started .header .charactor-img .face .ani-charactor { width:68px; height:68px; } 
.header h1 select { font-size:0.8571rem; font-weight:bold; line-height:1.67; color:#000000; border:none; } 
.header h1 select ~ i.icon-arrow { display:block; width:18px; height:18px; background:url(../images/ico_topbar_dropdown_def.svg) no-repeat center; } 
.header h1 select:focus ~ i.icon-arrow { background-image:url(../images/ico_topbar_dropdown_sel.svg); } 
.header h1 .ui-selectmenu-button { font-size:0.8571rem; /* padding-left:40px; */ font-weight:bold !important; line-height:18px; display:inline-block; align-items:center; justify-content:center; width:auto; padding:0; border:none; background:transparent; }
.header h1 .ui-selectmenu-button:focus { outline:none; }
.header h1 .ui-selectmenu-button .ui-selectmenu-text { font-weight:bold !important; margin-right: 0px}
.header h1 .ui-selectmenu-button .ui-selectmenu-icon { order:1; width:18px; height:18px; /* transform:translateY(-2px); */ background:url(../images/ico_topbar_dropdown_def.svg) no-repeat center; background-size:18px; } 
/* left menu */
.left-menu { position:fixed; z-index:-1; top:0; left:0; display:flex; align-items:flex-start; width:100vw; height:100%; transition:0.25s all; transform:translateX(-100%); opacity:0; background-color:rgba(0, 0, 0, 0.6); } 
.left-menu.active { z-index:999; transform:translateX(0); opacity:1; background-color:rgba(0, 0, 0, 0.6); } 
.left-menu .menu-body { position:relative; flex-direction:column; width:240px; /* display:flex; */ height:100%; padding:54px 0 0; background-color:#f5f7fa; } 
.left-menu .menu-body .menu-list { /* display:flex; flex-direction:column; */
  position:relative; overflow-x:hidden; overflow-y:auto; width:100%; height:100%; padding:16px 20px 20px; /* -webkit-overflow-scrolling:touch; */
  ; } 
.left-menu .menu-body .menu-list ul { /* padding-bottom:60px; */ }
.left-menu .menu-body .menu-list .menu { display:flex; flex-direction:column; } 
.left-menu .menu-body .menu-list .menu.fontsize { min-height:300px; padding:38px 16px 16px; border:1px solid #eaeaea; border-radius:12px; background-color:#ffffff; } 
.left-menu .menu-body .menu-list .menu + .menu { margin-top:8px; } 
.left-menu .menu-body .menu-list .menu:not(.fontsize) > button { line-height:1.53; display:flex; align-items:stretch; flex-direction:column; justify-content:flex-start; width:100%; max-width:100%; height:100%; min-height:150px; margin-left:0; padding:38px 16px 16px; border:1px solid #eaeaea; border-radius:12px; background-color:#ffffff; } 
.left-menu .menu-body .menu-list .menu:not(.fontsize) > button:hover { border-color:#0498dc; } 
@media (hover: none) { .left-menu .menu-body .menu-list .menu:not(.fontsize) > button:hover { border-color:inherit; } }
.left-menu .menu-body .menu-list .menu:not(.fontsize) > button:active { border-color:#0498dc; background-color:#fafbfc; } 
.left-menu .menu-body .menu-list .menu.fontsize > button.btn.primary { font-size:14px; font-weight:500; align-items:center; flex:auto; justify-content:center; min-width:0; max-width:100%; height:40px; } 
.left-menu .menu-body .menu-list .menu i.icon-menu { display:inline-block; margin-bottom:10px; background:none; } 
.left-menu .menu-body .menu-list .menu i.icon-menu img { display:block; width:22px; height:24px; } 
.left-menu .menu-body .menu-list .menu .menu-sub-title { font-size:0.8571rem; font-weight:normal; line-height:1.5; width:100%; margin-bottom:8px; text-align:left; color:#767676; } 
.left-menu .menu-body .menu-list .menu .menu-title { font-size:1rem; font-weight:bold; display:flex; align-items:center; width:100%; /* justify-content:space-between; */ color:#333333; } 
.left-menu .menu-body .menu-list .menu .menu-title::after { display:block; flex:0 0 18px; max-width:18px; height:18px; content:''; background:url(../images/ico_menu_arrow.svg) no-repeat center center; background-size:18px; } 
.left-menu .menu-body .menu-list .menu .radio-group { /* margin-top:15px; */
  min-width:0; } 
.left-menu .menu-body .menu-list .menu > .btn-group { display:flex; flex-direction:row; margin-top:16px; } 
.left-menu .menu-body .menu-list .menu > .btn-group button { font-weight:bold; height:40px; margin:0 3px; color:#0498dc; border:1px solid #0498dc; border-radius:12px !important; background-color:#ffffff; } 
.left-menu .menu-body .menu-list .menu > .btn-group .active { color:#ffffff; background-color:#0498dc; } 
.left-menu .menu-body .menu-list .menu .btn-set-font-small { font-size:12px !important; } 
.left-menu .menu-body .menu-list .menu .btn-set-font-normal { font-size:14px !important; } 
.left-menu .menu-body .menu-list .menu .btn-set-font-big { font-size:16px !important; } 
.left-menu .btn-pop-close { position:absolute; top:24px; width:22px; height:22px; } 
.left-menu .btn-pop-close:hover { border:inherit; background-color:inherit; } 
.left-menu .menu-body .menu-list .menu.logout {display: none; }
.left-menu .menu-body .menu-list .menu.logout.show {display: block; }
.left-menu .menu-body .menu-list .menu.logout.hide {display: none;  }
@media (hover: none) { .left-menu .btn-pop-close:hover { border:inherit; background-color:inherit; } }
/*.left-menu .btn-survay { position:absolute; bottom:24px; left:100%; width:86px; margin-left:16px; padding:0; animation:survayBounce 2.5s infinite;}*/
/*.left-menu .btn-survay { position:absolute; left : 35px; bottom:24px; padding:5px; font-size:1rem;  width:166px; max-width:100%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; !* transition:0.2s all; *! }*/
.left-menu .btn-survay { position:absolute; left : 35px; top:600px; padding:5px; font-size:1rem;  width:166px; max-width:100%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff;}
.left-menu .btn-survay img { display:block; max-width:100%; } 






/* Assistant */
/* left menu */
/* 
.assistant-menu { position:fixed; z-index:-1; top:0; left:0; display:flex; align-items:flex-start; width:100vw; height:100%; transition:0.25s all; transform:translateX(-100%); opacity:0; background-color:rgba(0, 0, 0, 0.6); } 
.assistant-menu.active { z-index:999; transform:translateX(0); opacity:1; background-color:rgba(0, 0, 0, 0.6); } 
.assistant-menu .menu-body { position:relative; flex-direction:column; width:100%; display:flex; height:100%; padding:54px 0 0; background-color:#f5f7fa; } 
.assistant-menu .menu-body .menu-list { display:flex; flex-direction:column;
  position:relative; overflow-x:hidden; overflow-y:auto; width:100%; height:100%; padding:16px 20px 20px; -webkit-overflow-scrolling:touch;
  ; }
*/   
/*.assistant-menu .menu-body .menu-list .menu:last-child { min-height:300px; padding:38px 16px 16px; border:1px solid #eaeaea; border-radius:12px; background-color:#ffffff; } */
.assistant-menu .menu-body .menu-list ul { padding-bottom:60px; }
.assistant-menu .menu-body .menu-list .menu { display:flex; flex-direction:column; padding:38px 16px 16px; border:1px solid #eaeaea; border-radius:12px; background-color:#ffffff;} 
.assistant-menu .menu-body .menu-list .menu + .menu { margin-top:8px; } 
.assistant-menu .menu-body .menu-list .menu:not(:last-child) > button { line-height:1.53; display:flex; align-items:stretch; flex-direction:column; justify-content:flex-start; width:100%; max-width:100%; height:100%; min-height:150px; margin-left:0; padding:38px 16px 16px; border:1px solid #eaeaea; border-radius:12px; background-color:#ffffff; } 
.assistant-menu .menu-body .menu-list .menu:not(:last-child) > button:hover { border-color:#0498dc; }
.assistant-menu .menu-body .btn {margin-bottom: 10px}

@media (hover: none) { .assistant-menu .menu-body .assistant-list .menu:not(:last-child) > button:hover { border-color:inherit; } }
.assistant-menu .menu-body .menu-list .menu:not(:last-child) > button:active { border-color:#0498dc; background-color:#fafbfc; } 
.assistant-menu .menu-body .menu-list .menu:last-child > button.btn.primary { font-size:14px; font-weight:500; align-items:center; flex:auto; justify-content:center; min-width:0; max-width:100%; height:40px; } 
.assistant-menu .menu-body .menu-list .menu i.icon-menu { display:inline-block; margin-bottom:10px; background:none; } 
.assistant-menu .menu-body .menu-list .menu i.icon-menu img { display:block; width:22px; height:24px; } 
.assistant-menu .menu-body .menu-list .menu .menu-sub-title { font-size:0.8571rem; font-weight:normal; line-height:1.5; width:100%; margin-bottom:8px; text-align:left; color:#767676; } 
.assistant-menu .menu-body .menu-list .menu .menu-title { font-size:1rem; font-weight:bold; display:flex; align-items:center; width:100%; /* justify-content:space-between; */ color:#333333; } 
.assistant-menu .menu-body .menu-list .menu .menu-title::after { display:block; flex:0 0 18px; max-width:18px; height:18px; content:''; background:url(../images/ico_menu_arrow.svg) no-repeat center center; background-size:18px; } 
.assistant-menu .menu-body .menu-list .menu .radio-group { /* margin-top:15px; */
  min-width:0; } 
.assistant-menu .menu-body .menu-list .menu > .btn-group { display:flex; flex-direction:row; margin-top:16px; } 
.assistant-menu .menu-body .menu-list .menu > .btn-group button { font-weight:bold; height:40px; margin:0 3px; color:#0498dc; border:1px solid #0498dc; border-radius:12px !important; background-color:#ffffff; } 
.assistant-menu .menu-body .menu-list .menu > .btn-group .active { color:#ffffff; background-color:#0498dc; } 
.assistant-menu .menu-body .menu-list .menu .btn-set-font-small { font-size:12px !important; } 
.assistant-menu .menu-body .menu-list .menu .btn-set-font-normal { font-size:14px !important; } 
.assistant-menu .menu-body .menu-list .menu .btn-set-font-big { font-size:16px !important; } 
.assistant-menu .btn-pop-close { position:absolute; top:24px; width:22px; height:22px; } 
.assistant-menu .btn-pop-close:hover { border:inherit; background-color:inherit; } 
@media (hover: none) { .assistant-menu .btn-pop-close:hover { border:inherit; background-color:inherit; } }
/*.left-menu .btn-survay { position:absolute; bottom:24px; left:100%; width:86px; margin-left:16px; padding:0; animation:survayBounce 2.5s infinite;}*/
.assistant-menu .btn-survay { position:absolute; left : 35px; bottom:24px; padding:5px; font-size:1rem;  width:166px; max-width:100%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; /* transition:0.2s all; */ }
.assistant-menu .btn-survay img { display:block; max-width:100%; } 







/* .left-menu .menu-body { } */
/* Convercation Area */
.conversation-area { height: 500px;position:relative; z-index:0; overflow-x:hidden; overflow-y:auto; flex:1; padding:20px 16px 0; border-radius:0 0 0 0; background-color:#f5f7fa; /* -webkit-overflow-scrolling:touch; *//* touch-action: none; */ }
.conversation-area.mCustomScrollbar { /* overflow-y:hidden; */
  padding-top:0; /* padding-bottom:20px; */ }
/* .conversation-area.mCustomScrollbar > .mCustomScrollBox { padding-top:20px; padding-bottom:0; } */
#chatConsole { padding-top:20px; padding-bottom:0; } 
.conversation-area > .ps__rail-y { right:3px; } 
.concersation-area[data-simplebar] { overflow:hidden !important; } 
.conversation-area::before { position:fixed; z-index:9; top:70px; left:0; display:block; width:100%; height:20px; content:''; background-image:linear-gradient(to bottom, #f5f7fa, rgba(245, 247, 250, 0)); } 
/* .conversation-area::after { position:fixed; z-index:9; bottom:92px; left:0; display:block; width:100%; height:20px; content:''; border-radius:0 0 12px 12px; background-image:linear-gradient(to bottom, rgba(245, 247, 250, 0), #f5f7fa); } */
.conversation-area .partition { display:flex; align-items:center; width:100%; margin-bottom:30px; } 
.conversation-area div ~ .partition { margin-top:30px; } 
.conversation-area .partition::before,
.conversation-area .partition::after { display:block; flex:1; content:''; opacity:0.3; border-top:1px dashed #959595; } 
.conversation-area .partition .comment.start { color:#959595; } 
.conversation-area .partition .comment.counseling-start,
.conversation-area .partition .comment.counseling-end { font-weight:500; color:#553ca5; } 
.conversation-area .partition .comment { line-height:1.67; padding:0 10px; text-align:center; } 
.conversation-area .partition .comment dl { display:flex; align-items:center; width:100%; } 
.conversation-area .partition .comment dl dt { font-size:0.9231rem; font-weight:normal; position:relative; color:#a5a5a5; } 
.conversation-area .partition .comment dl dd { font-size:0.9231rem; position:relative; color:#767676; } 
.conversation-area .partition .comment dl dt + dd { margin-left:0.5em; } 
.conversation-area .partition .comment dl dd ~ dt { margin-left:0.5em; padding-left:0.5em; } 
.conversation-area .partition .comment dl dd ~ dt::before { position:absolute; top:50%; left:0; display:block; width:1px; height:8px; margin-top:-4px; margin-left:-0.5px; content:''; background-color:#d9d9d9; } 
.conversation-area .slide-group + .btn.default { margin-top:8px; } 
.conversation-area + hr { display:block; width:100%; height:20px; margin:0; border:none; border-radius:0 0 12px 12px; background-color:#f5f7fa; } 
/* Convercation Area > 말풍선 */
/* .conversation-area .speech-bubble { position:relative; display:flex; clear:both; flex-direction:column; margin-top:24px; } */ 
.conversation-area .speech-bubble { position:relative; display:flex; clear:both; flex-direction:column; margin-top:8px; } 
.conversation-area .speech-bubble ~ * { clear:both; } 
.conversation-area .speech-bubble > button { max-width:500px; min-height:40px; } 
.conversation-area .speech-bubble .error-img { display:block; margin-bottom:24px; } 
.conversation-area .speech-bubble .error-img img { display:block; width:108px !important; height:108px !important; margin:0 auto; } 
.speech-content { font-size:1rem; line-height:1.43; position:relative; /* min-width:300px; */ overflow:hidden; width:300px; max-width:300px; padding:15px 16px; border-radius:12px; } 
#loadingBox .speech-content,
.speech-bubble.user .speech-content { width:auto !important; } 
.speech-content.text-only { width:auto; max-width:500px; } 
.speech-content.text-only .speech-text { max-width:calc(100vw - 72px); } 
.speech-bubble.user .speech-content { overflow:visible; } 
.onboard .speech-content { margin:0 auto; padding:0; } 
.speech-content p { line-height:1.43; } 
/* .speech-title { font-size:1rem; font-weight:bold; margin-bottom:12px; width:100%; display:inline-block} */ 
.speech-title { font-size:1rem; font-weight:bold;width:100%; display:inline-block}
.speech-title span { display:block; } 
.speech-title strong { font-weight:bold; color:#0498dc; } 
/* .speech-text { } */
.speech-text { width:100%;}
.speech-text p { word-break:keep-all; } 
.onboard p:last-child span { display:inline-block; } 
.speech-text ~ .speech-title,
.speech-text ~ .speech-text { margin-top:16px; } 
.onboard .speech-text ~ .speech-title,
.onboard .speech-text ~ .speech-text { margin-top:0; } 
.speech-text p strong { font-weight:bold; } 
.speech-text a { text-decoration:underline; color:#0498dc; } 
.speech-img { margin-top:15px; } 
.speech-img img { max-width:100%; } 
/*.speech-btns { display:flex; flex-direction:column; width:calc(100% + 6px); min-width:274px; margin-top:12px; margin-right:-3px; margin-left:-3px; } */
/*.speech-btns { display:flex; flex-direction:column; width:100%; min-width:274px; margin-top:12px; } */
.speech-btns { display:flex; flex-direction:column; width:100%; margin-top:12px; } 
.btn + .speech-btns { margin-top:5px; } 
.speech-btns button { flex:0 0 160px; width:160px; max-width:calc(50% - 6px) !important; min-height:40px; margin:3px; } 
/* .speech-btns button.wide { flex: 1; max-width:100% !important; } */
.speech-btns button.wide { flex:1; min-width:calc(100% - 6px); } 
.speech-content .speech-btns { /* min-width:auto; */
  /* width:calc(100% + 6px); */
  max-width:calc(100vw - 60px - 32px + 6px); } 
.speech-content .speech-btns + .speech-btns { margin-top:0; } 
.speech-content .speech-btns button { flex:0 0 50%; max-width:calc(50% - 6px); } 
/* .speech-content .speech-btns button ~ button { margin-top:8px; } */
.speech-btns.hor { flex-direction:row; flex-wrap:wrap; } 
.speech-btns.hor button { flex:0 0 50%; max-width:calc(50% - 6px); } 
.speech-btns.flex { flex-wrap:nowrap; } 
.speech-btns.flex button { flex:1; } 
/* speech-map-area */
.speech-map-area { width:100%; min-width:100%; height:192px; margin-top:6px; background-color:#f5f5f5; } 
.speech-map-area + .store-info { margin-top:10px; } 
.store-list { } 
.speech-map-area + .store-list { } 
.store-list li { padding:16px 8px; } 
.store-list li + li { border-top:1px solid #e4e9f2; } 
.store-list li:hover { background-color:rgba(0, 0, 0, 0.02); } 
@media (hover: none) { .store-list li:hover { background-color:inherit; } }
.store-list + button { margin-top:8px; } 
.store-info { line-height:1.43; width:100%; min-width:256px; } 
.store-info + .store-info { margin-top:16px; padding-top:16px; border-top:1px solid #eaeaea; } 
.store-info .store-tag { display:block; margin-bottom:4px; } 
.store-info .store-tag img { width:50px; } 
.store-info .store-title { font-weight:bold; display:flex; justify-content:space-between; width:100%; } 
.store-list li.active .store-info .store-title { font-weight:bold; color:#0498dc; } 
.store-info .store-title .dist { font-size:0.7143rem; font-weight:normal; line-height:2; color:#959595; } 
.store-info .tel { font-size:0.8571rem; line-height:1.67; margin-top:6px; } 
.store-info .address { font-size:0.8571rem; line-height:1.5; margin-top:6px; color:#676767; } 
.store-info dl { line-height:1.43; display:flex; align-items:center; flex-wrap:wrap; } 
.store-info dl dt { font-size:1rem; font-weight:bold; flex:1 1 100%; } 
.store-info dl dd { font-size:0.8571rem; flex:1 1 100%; text-align:left; color:#767676; } 
/* .speech-content .speech-btns.hor button ~ button { margin-top:0; margin-left:8px; } */
.store-info dl dd .address { } 
.speech-content + .speech-content { margin-top:8px; } 
.speech-content p { word-break:keep-all; } 
.speech-bubble.user .speech-content p { word-break:break-all; } 
.speech-content p ~ p { margin-top:12px; } 
.speech-content .overflowed-text p ~ p { /* margin-top:1rem; */ }
.speech-content .overflowed-text { overflow-x:hidden; overflow-y:hidden; height:auto; max-height:7.15em; margin-bottom:25px; /* transition:0.2s all; */ }
.speech-content .overflowed-text.expanded { overflow-y:hidden; max-height:none; /* -webkit-overflow-scrolling:touch; */ }
.speech-content .overflowed-text ~ .btn-toggle-text { position:absolute; bottom:0; left:0; width:100%; height:25px; border-top:1px solid #e4e9f2; border-radius:0 0 12px 12px; background-color:rgba(245, 247, 250, 0.5); } 
.speech-content .overflowed-text ~ .btn-toggle-text:hover { background-color:#eff1f5; } 
@media (hover: none) { .speech-content .overflowed-text ~ .btn-toggle-text:hover { background-color:inherit; } }
/* .speech-content .overflowed-text ~ .btn-toggle-text:focus, */
.speech-content .overflowed-text ~ .btn-toggle-text:active { background-color:#eff1f5; } 
.speech-content .overflowed-text ~ .btn-toggle-text i { display:block; width:5px; height:5px; margin:0 auto; transition:0.2s all; transform:rotate(45deg) translateY(-50%); border-right:1px solid #333333; border-bottom:1px solid #333333; } 
/* .speech-content p.overflowed-text.expanded ~ .btn-toggle-text { } */
.speech-content .overflowed-text.expanded ~ .btn-toggle-text i { transform:rotate(-135deg) translateY(-50%); } 
/* .conversation-area .speech-bubble .speech-date { font-size:0.7692rem; line-height:1.2; display:block; margin-top:8px; padding:0 4px; color:#999999; } */ 
.conversation-area .speech-date { font-size:0.7692rem; line-height:1.2; display:block; margin-top:8px; padding:0 4px; color:#999999; } 
/* Convercation Area > 말풍선 > 봇*/
.speech-bubble.bot { align-items:flex-start; width:auto; min-width:288px; max-width:500px; } 
.speech-bubble.bot .speech-content { padding:12px 16px 16px; border:1px solid #e4e9f2; background-color:#ffffff; } 
.speech-bubble.bot::before,
.speech-bubble.bot::after { position:absolute; top:0; left:0; display:block; width:0; height:0; content:''; } 
.speech-bubble.bot::before { border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid #e4e9f2; } 
.speech-bubble.bot::after { margin-top:2px; margin-left:1px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-left:8px solid #ffffff; } 
/* Convercation Area > 말풍선 > 사용자*/
.speech-bubble.user { float:right; align-items:flex-end; width:calc(100vw - 60px); min-width:288px; max-width:500px; padding-bottom:24px; } 
.speech-bubble.user .speech-content { padding:9px 16px 11px; color:#ffffff; background-color:#0498dc; } 
/* .speech-bubble.user .speech-content p { } */
.speech-bubble.user::after { position:absolute; top:0; right:0; display:block; width:0; height:0; content:''; border-top:6px solid transparent; border-right:8px solid #0498dc; border-bottom:6px solid transparent; } 
.speech-bubble.user + .speech-bubble.bot, .speech-bubble.user + .speech-bubble.counselor, .speech-bubble.user + .speech-bubble.user {margin-top: 0;}
/* Convercation Area > 말풍선 > 평가*/
.speech-bubble.evaluation { } 
.speech-bubble.evaluation::before,
.speech-bubble.evaluation::after { display:none; } 
.evaluation-wrap { font-size:10px; display:flex; align-items:center; } 
.complete .evaluation-wrap { color:#0498dc; } 
.evaluation-wrap .btn-evaluation { font-size:10px; display:flex; align-items:center; } 
.evaluation-wrap .btn-evaluation span { color:#585858; } 
.evaluation-wrap.active .btn-evaluation span { opacity:0; } 
.evaluation-wrap .btn-evaluation span strong { font-weight:bold; } 
.evaluation-wrap .icon-evaluation img { display:block; width:38px; height:45px; } 
.evaluation-wrap span + .icon-evaluation,
.evaluation-wrap .icon-evaluation + span { margin-left:12px; } 
.evaluation-wrap .evaluation-answer { position:absolute; z-index:-1; top:9px; width:240px; height:auto; max-height:0; transition:0.2s all; transform:translateY(100%); opacity:0; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; } 
.evaluation-wrap.active .evaluation-answer { z-index:2; max-height:120px; transform:translateY(0); opacity:1; } 
.evaluation-wrap .evaluation-answer ul { padding:0 16px; } 
.evaluation-wrap .evaluation-answer li { padding:14px 0; } 
.evaluation-wrap .evaluation-answer li a { font-size:1rem; font-weight:500; display:flex; align-items:center; color:#0498dc; } 
.evaluation-wrap .evaluation-answer li + li { border-top:1px solid rgba(4, 152, 220, 0.1); } 
.evaluation-wrap .evaluation-answer li a span { flex:1; } 
.evaluation-wrap .evaluation-answer li a::after { display:block; flex:0 0 6px; width:6px; min-width:6px; height:6px; content:''; transform:rotate(45deg); border-top:1px solid #0498dc; border-right:1px solid #0498dc; } 
.evaluation-wrap .evaluation-answer::before { position:absolute; top:12px; display:block; content:''; border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid #0498dc; } 
.evaluation-wrap .evaluation-answer::after { position:absolute; top:12px; display:block; content:''; transform:translateX(-2px); border-top:4px solid transparent; border-bottom:4px solid transparent; border-left:6px solid #ffffff; } 
.evaluation-wrap > span { display:flex; align-items:center; } 
.evaluation-wrap .icon-check { display:block; width:15px; height:15px; margin-right:4px; background:url(../images/img_check_evaluation.svg) no-repeat center; } 
.evaluation-wrap .rating { display:flex; align-items:center; margin:0 12px 0 6px; } 
.evaluation-wrap .rating .star { display:block; width:8px; height:8px; margin:0 1.5px; background:url(../images/ico_star_small_nor.svg) no-repeat center; } 
.evaluation-wrap .rating .star.on { background-image:url(../images/ico_star_small_sel.svg); } 
.speech-bubble.evaluation.user .evaluation-wrap .evaluation-answer { right:50px; } 
.speech-bubble.evaluation.bot .evaluation-wrap .evaluation-answer { left:50px; } 
.speech-bubble.evaluation.user .evaluation-wrap .evaluation-answer::before { left:100%; } 
.speech-bubble.evaluation.user .evaluation-wrap .evaluation-answer::after { left:100%; } 
.speech-bubble.evaluation.bot .evaluation-wrap .evaluation-answer::before { } 
.speech-bubble.evaluation.bot .evaluation-wrap .evaluation-answer::after { } 
/* Convercation Area > 말풍선 > 상담사*/
.speech-bubble.counselor { align-items:flex-start; width:calc(100vw - 60px); min-width:288px; max-width:500px; } 
.speech-bubble.counselor .speech-content { font-size:1.0769rem; font-weight:500; padding:4px; } 
.speech-bubble.counselor .speech-content .counselor-img { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; margin-bottom:10px; } 
.speech-bubble.counselor .speech-content .counselor-img img { display:block; max-width:100%; max-height:100%; margin:auto; } 
.speech-bubble.counselor .speech-content .name { color:#553ca5; } 
/* Convercation Area > 상담영역*/
.conversation-area .counseling-area { position:relative; min-height:calc(100vh - 176px); padding-top:20px; padding-bottom:60px; } 
.conversation-area .counseling-area.ended { min-height:auto; padding-bottom:0; } 
/* Convercation Area > 입력 폼*/
.speech-content.input-data-form { width:calc(100vw - 60px); max-width:300px !important; padding:0 !important; } 
.speech-content.input-data-form .input-group { /* max-width:100%; */ }
.input-data-form .form-title { padding:15px 16px 0px 16px; }
.input-data-form .form-title.dispatch-step { color:#ffffff; border-top-left-radius:12px; border-top-right-radius:12px; background-color:#0498dc; } 
.input-data-form .form-title.dispatch-step .step { display:flex; align-items:flex-start; justify-content:space-between; margin-top:20px; } 
.input-data-form .form-title.dispatch-step .step li { font-size:12px; line-height:1.33; position:relative; flex:1; text-align:center; } 
.input-data-form .form-title.dispatch-step .step li ~ li::before { position:absolute; top:20px; left:0; display:block; width:5px; height:5px; content:''; transform:rotate(45deg) translateX(-100%); opacity:0.3; border-top:1px solid #ffffff; border-right:1px solid #ffffff; } 
.input-data-form .form-title.dispatch-step .step li i { display:block; width:48px; height:42px; margin:0 auto; } 
.input-data-form .form-title.dispatch-step .step li i.icon-step-1 { background:url(../images/step_linkey_01_off.svg) no-repeat center; } 
.input-data-form .form-title.dispatch-step .step li.active i.icon-step-1 { background-image:url(../images/step_linkey_01_on.svg); } 
.input-data-form .form-title.dispatch-step .step li i.icon-step-2 { background:url(../images/step_linkey_02_off.svg) no-repeat center; } 
.input-data-form .form-title.dispatch-step .step li.active i.icon-step-2 { background-image:url(../images/step_linkey_02_on.svg); } 
.input-data-form .form-title.dispatch-step .step li i.icon-step-3 { background:url(../images/step_linkey_03_off.svg) no-repeat center; } 
.input-data-form .form-title.dispatch-step .step li.active i.icon-step-3 { background-image:url(../images/step_linkey_03_on.svg); } 
.input-data-form .form-title.dispatch-step .step li i.icon-step-4 { background:url(../images/step_linkey_04_off.svg) no-repeat center; } 
.input-data-form .form-title.dispatch-step .step li.active i.icon-step-4 { background-image:url(../images/step_linkey_04_on.svg); } 
.input-data-form .form-title.dispatch-step .step li i + span { font-size:0.8571rem; display:block; margin-top:10px; text-align:center; opacity:0.5; } 
.input-data-form .form-title.dispatch-step .step li.active i + span { opacity:1; } 
.input-data-form .form-title h3 { font-size:1rem; font-weight:bold; line-height:1.43; text-align:center; } 
.input-data-form .form-body { padding:0 16px; }
.input-data-form .form-agreement { display:flex; flex-wrap:nowrap; margin-top:12px; }
.input-data-form .form-agreement .btn.detail { font-size:0.8571rem; align-self:center; justify-content:flex-start; width:auto; min-width:94px; height:28px; padding:0 16px; /* color:#0498dc; border:1px solid #0498dc; border-radius:12px; */ text-align:left; letter-spacing:-0.0429rem; } 
.input-data-form .form-agreement .btn.detail.disabled,
.input-data-form .form-agreement .btn.detail:disabled { flex:initial !important; width:auto; min-width:94px; } 
.input-data-form .form-agreement .btn.detail .icon-detail { width:10px; height:10px; background-size:10px; } 
/* .input-data-form .form-body .input-group .btn-input .icon-search { } */
.input-data-form .form-footer { display:flex; /* margin-top:24px; */ flex-wrap:wrap; padding:0px 16px 12px 16px;} 
.input-data-form .form-footer .speech-btns { margin-top:0; } 
.input-data-form .form-footer .btn-submit { font-size:1.0769rem; font-weight:500; flex:1; padding:17px; text-align:center; color:#0498dc; } 
.input-data-form .form-footer .btn-submit:disabled { color:#a5a5a5; } 
/* 업로드 프리뷰 */
.speech-bubble.user.preview:hover .speech-content { background-color:#0477ac; } 
@media (hover: none) { .speech-bubble.user.preview:hover .speech-content { background-color:inherit; } }
.speech-bubble.user.preview.disabled { pointer-events:all; opacity:1; } 
.speech-bubble.user.preview.disabled .speech-content { z-index:1; background-color:#f5f7fa; } 
.speech-bubble.user.preview.disabled .speech-content::before { position:absolute; top:0; left:0; width:100%; height:100%; content:''; border-radius:12px; background-color:rgba(4, 152, 220, 0.4); } 
.speech-bubble.user.preview:hover::after { border-right-color:#0477ac; } 
@media (hover: none) { .speech-bubble.user.preview:hover::after { border-right-color:inherit; } }
.speech-bubble.user.preview.disabled::after { z-index:0; border-right-color:rgba(4, 152, 220, 0.4); } 
.uploaded-file { position:relative; width:calc(230px - 32px); } 
.speech-bubble.user.preview.disabled .speech-content .uploaded-file { pointer-events:none; } 
.speech-tooltip { position:absolute; bottom:0; left:0; margin-left:-8px; transform:translateX(-100%); } 
.speech-tooltip .btn-tooltip { display:block; width:20px; height:20px; background:url(../images/info_file_def.svg) no-repeat center; } 
.speech-tooltip .btn-tooltip:hover { background-image:url(../images/info_file_sel.svg); } 
/*@media (hover: none) { .speech-tooltip .btn-tooltip:hover { background-image:url(../images/info_file_nor.svg); } }*/
.speech-tooltip .btn-tooltip .icon-tooltip { } 
.speech-tooltip p { font-size:0.7143rem; position:absolute; display:none; max-width:206px; margin-top:4px; padding:4px 8px; white-space:nowrap; color:#333333; border:1px solid #e4e9f2; border-radius:4px; background-color:#ffffff; } 
.speech-tooltip .btn-tooltip:hover + p,
.speech-tooltip .btn-tooltip:focus + p { display:block; } 
.uploaded-file .btn-file { display:flex; align-items:center; max-width:100%; } 
.uploaded-file .btn-file .icon { position:relative; display:flex; overflow:hidden; align-items:center; flex:0 0 50px; justify-content:center; max-width:50px; max-height:50px; margin-right:8px; } 
.uploaded-file .btn-file .icon img { display:block; max-width:50px; max-height:50px; } 
.uploaded-file .btn-file .icon .progress { width:38px; height:38px; background-color:transparent; } 
.uploaded-file .btn-file .info { display:flex; overflow:hidden; flex:1 1 auto; flex-direction:column; justify-content:space-between; height:50px; padding:4px 0; text-align:left; text-overflow:ellipsis; } 
.uploaded-file .btn-file .info .name { line-height:1.43; display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } 
.uploaded-file .btn-file .info .size { font-size:0.8571rem; font-weight:normal; line-height:1.67; color:rgba(255, 255, 255, 0.6); } 
.uploaded-file .btn-file .info .size.error { font-weight:bold; color:#ffe50a; } 
/* .uploaded-file .file-info { } */
/* 출동예약 조회정보 */
.dispatch-info { padding:15px; width:100%; background-color:#f8f8f8} 
.dispatch-info dl { display:flex; } 
.dispatch-info dl + dl { margin-top:12px; } 
.dispatch-info dl dt { font-size:0.8571rem; line-height:1.5; flex:0 0 78px; color:#767676; } 
.dispatch-info dl dd { font-size:0.8571rem; font-weight:500; line-height:1.5; flex:1; word-break:break-all;white-space:normal;} 

.pop-content .dispatch-info dl dt { font-size:0.8571rem; line-height:1.5; flex:0 0 160px; color:#767676; } 
/* end scroll btn */
.btn-end-scroll { position:fixed; z-index:-1; right:16px; bottom:92px; width:42px; height:42px; transition:0.5s all; transform:translateY(100%); opacity:0; background:url(../images/btn_floating_dim.svg) no-repeat center; background-size:contain; } 
.btn-end-scroll:disabled,
.btn-end-scroll.disabled { background-image:url(../images/btn_floating_dim.svg); } 
.btn-end-scroll.active { z-index:9; transform:translateY(0); opacity:1; background-image:url(../images/btn_floating_nor.svg); } 
.btn-end-scroll:hover { background-image:url(../images/btn_floating_pre.svg); } 
@media (hover: none) { .btn-end-scroll:hover { background-image:url(../images/btn_floating_nor.svg); } }
.btn-end-scroll .icon-end-scroll { }
 
/* Quick menu */
.composer-area { display:flex; align-items:center; flex:initial; min-height:72px; padding:14px 16px; /* touch-action: none; */} 
.composer-area.disabled,
.composer-area .disabled { opacity:1 !important; } 
.composer-area .input-shortcut { position:relative; align-self:flex-end; flex:0 0 32px; order:0; max-width:32px; height:44px; margin-right:8px; } 
.composer-area .input-shortcut .btn-toggle-shortcut { display:flex; align-items:center; justify-content:center; width:32px; height:44px; transition:0.15s all; border-radius:50%; background:url(../images/btn_shotcut_+_nor.svg) no-repeat center; background-size:32px; }  
.composer-area .input-shortcut .btn-toggle-shortcut:hover { background-image:url(../images/btn_shotcut_+_foc.svg); background-size:32px; } 
.composer-area .input-shortcut.expanded .btn-toggle-shortcut { background-image:url(../images/btn_shotcut_x_nor.svg); background-size:32px; } 
.composer-area .input-shortcut.expanded .btn-toggle-shortcut:hover { background-image:url(../images/btn_shotcut_x_foc.svg); background-size:32px; }

/* Quick menu 아래방향 */
.composer-area .input-shortcut .btn-toggle-shortcut2 { display:flex; align-items:center; justify-content:center; width:32px; height:44px; transition:0.15s all; border-radius:50%; background:url(../images/btn_shotcut_foc2.svg) no-repeat center; background-size:32px; } 
.composer-area .input-shortcut .btn-toggle-shortcut2.expanded { background-image:url(../images/btn_shotcut_sel@3x2.png); background-size:32px; }  
@media (hover: none) { .composer-area .input-shortcut .btn-toggle-shortcut:hover { background-image:url(../images/btn_shotcut_foc2.svg); background-size:32px; } }

/* Quick menu 아래방향 */
.composer-area .input-shortcut .btn-toggle-shortcut2:hover { background-image:url(../images/btn_shotcut_foc2.svg); background-size:32px; } 
.composer-area .input-shortcut .btn-toggle-shortcut2.expanded:hover { background-image:url(../images/btn_shotcut_sel@3x2.png); background-size:32px; } 
@media (hover: none) { .composer-area .input-shortcut .btn-toggle-shortcut2:hover { background-image:url(../images/btn_shotcut_foc2.svg); background-size:32px; } }
.composer-area .input-shortcut .shortcut-menu .shortcut-title { display:none; text-align: center; margin-bottom: 10px}
.composer-area .input-shortcut .shortcut-menu .shortcut-buttons { display:flex}
/*.composer-area .input-shortcut .shortcut-menu { position:fixed; z-index:9; bottom:0px; left:0; display:flex; overflow:hidden; align-items:flex-start; !* justify-content:center; *! width:100%; height:auto; max-height:0; padding:0 15px; transition:0.2s all; color:#ffffff; background-color:#0c2651; } */
.composer-area .input-shortcut .shortcut-menu { position:fixed; z-index:9; bottom:0px; left:0; overflow:hidden; align-items:flex-start; /* justify-content:center; */ width:100%; height:auto; max-height:0; padding:0 15px; transition:0.2s all; color:#ffffff; background-color:#0c2651; }
.composer-area .input-shortcut.expanded .shortcut-menu { max-height:150px; padding-top:20px; padding-bottom:20px; }
.composer-area .input-shortcut .shortcut-menu .btn-shortcut { flex:initial; margin:0 auto; padding:0 8px; }
.composer-area .input-shortcut .shortcut-menu .btn-shortcut i { display:block; width:52px; height:52px; margin:0 auto; transition:0.15s all; }
.composer-area .input-shortcut .shortcut-menu .btn-shortcut span { font-size:0.8571rem; font-weight:normal; line-height:1.33; display:block; margin-top:5px; text-align:center; word-break:keep-all; color:rgba(255, 255, 255, 0.9); }

.input-shortcut2 { z-index:9;  display:flex; overflow:hidden; align-items:flex-start; /* justify-content:center; */ width:100%; height:auto; max-height:0px; padding:0 15px; transition:0.2s all; color:#ffffff; background-color:#0c2651; } 
.input-shortcut2.expanded { max-height:300px; padding-top:5px; padding-bottom:15px; } 


.input-shortcut2 .btn-keyword { font-size:0.8571rem; font-weight:500; display:flex; align-items:center; align-self:center; flex:0 0 42px; justify-content:center; max-width:42px; height:28px; margin-right:3px; transition:0.25s all; color:#0498dc; border:1px solid #cccccc; border-radius:12px; } 
.input-shortcut2 .btn-keyword:hover { border-color:#0498dc; } 
@media (hover: none) { .input-shortcut2  .btn-keyword:hover { border-color:inherit; } }
.input-shortcut2 .btn-keyword:active { color:#ffffff; border-color:#0498dc; background-color:#0498dc; } 
.input-shortcut2  .btn-keyword + label,
.input-shortcut2  .btn-keyword + textarea,
.input-shortcut2  .btn-keyword + input { margin-left:5px; } 



.input-shortcut-faq { z-index:9;  display:flex; overflow:hidden; align-items:flex-start; /* justify-content:center; */ width:100%; height:auto; max-height:0px; padding:0 15px; transition:0.2s all; color:#ffffff; background-color:#0c2651; } 
.input-shortcut-faq.expanded { max-height:300px; padding-top:5px; padding-bottom:15px; } 
.input-shortcut-faq .shortcut-menu { max-height:160px;position:relative;width:inherit } 


.input-shortcut-faq .btn-keyword { font-size:0.8571rem; font-weight:500; display:flex; align-items:center; align-self:center; flex:0 0 42px; justify-content:center; max-width:42px; height:28px; margin-right:3px; transition:0.25s all; color:#0498dc; border:1px solid #cccccc; border-radius:12px; } 
.input-shortcut-faq .btn-keyword:hover { border-color:#0498dc; } 
@media (hover: none) { .input-shortcut-faq  .btn-keyword:hover { border-color:inherit; } }
.input-shortcut-faq .btn-keyword:active { color:#ffffff; border-color:#0498dc; background-color:#0498dc; } 
.input-shortcut-faq  .btn-keyword + label,
.input-shortcut-faq  .btn-keyword + textarea,
.input-shortcut-faq  .btn-keyword + input { margin-left:5px; } 

 
/* 파일 업로드 */
.composer-area .input-file-upload { position:relative; flex:0 0 32px; order:0; max-width:32px; height:32px; margin-right:8px; } 
.composer-area .input-file-upload input { } 
.composer-area .input-file-upload .btn-upload { display:flex; align-items:center; justify-content:center; width:32px; height:32px; transition:0.15s all; opacity:0.5; border-radius:50%; background:url(../images/btn_upload_nor.svg) no-repeat center; background-size:32px; } 
.composer-area .input-file-upload .btn-upload:hover { background-image:url(../images/btn_upload_foc.svg); } 
@media (hover: none) { .composer-area .input-file-upload .btn-upload:hover { background-image:url(../images/btn_upload_nor.svg); } }
.composer-area .input-file-upload .btn-upload:active { background-image:url(../images/btn_upload_pre.svg); } 
.composer-area .input-file-upload .btn-upload:disabled,
.composer-area .input-file-upload .btn-upload.disabled { background-image:url(../images/btn_upload_dim.svg); } 
.composer-area .input-form { position:relative; display:flex; overflow-x:hidden; align-items:center; flex:1; flex-direction:row; flex-wrap:nowrap; justify-content:center; order:1; /* height:44px; */ padding:0 10px 0 16px; border-radius:22px; background-color:#ffffff; } 
.composer-area .input-form .keywords { display:flex; flex:0 0 90px; flex-wrap:nowrap; height:21px; } 
.composer-area .input-form .keywords.ddl { flex:0 0 90px; } 
.composer-area .input-form .keywords.hns { flex:0 0 135px; } 
.composer-area .input-form .btn-keyword { font-size:0.8571rem; font-weight:500; display:flex; align-items:center; align-self:center; flex:0 0 42px; justify-content:center; max-width:42px; height:28px; margin-right:3px; transition:0.25s all; color:#0498dc; border:1px solid #cccccc; border-radius:12px; } 
.composer-area .input-form .btn-keyword:hover { border-color:#0498dc; } 
@media (hover: none) { .composer-area .input-form .btn-keyword:hover { border-color:inherit; } }
.composer-area .input-form .btn-keyword:active { color:#ffffff; border-color:#0498dc; background-color:#0498dc; } 
.composer-area .input-form .text-area { position:relative; overflow-y:auto; flex:1; max-height:calc(1.43em * 3); /*padding-right:16px;  -webkit-overflow-scrolling:touch; */ }
.composer-area .input-form .text-area ~ div{align-self:flex-end;}
.composer-area .input-form label,
.composer-area .input-form textarea,
.composer-area .input-form input { display:block; flex:1; order:0; resize:none; border:none; } 
.composer-area .input-form .btn-keyword + label,
.composer-area .input-form .btn-keyword + textarea,
.composer-area .input-form .btn-keyword + input { margin-left:5px; } 
.composer-area .input-form textarea,
.composer-area .input-form label input { line-height:1.54; display:block; overflow-x:hidden; width:100%; min-height:44px; border:none; background-color:transparent; } 
.composer-area .input-form textarea { overflow:hidden; min-height:44px; padding:calc(22px - 0.77rem) 0 calc(22px - 0.77rem) 0; } 
.composer-area .input-form.disabled { background-color:#f8f8f8; } 
.composer-area .input-form .btn-clear { display:none; align-items:center; align-self:flex-end; justify-content:center; width:28px; height:44px; margin-left:8px; } 
.composer-area .input-form input:focus + .btn-clear,
.composer-area .input-form textarea:focus + .btn-clear { display:flex; } 
.composer-area .input-form .btn-clear.show { display:flex; } 
.composer-area .input-form .btn-clear .icon-clear { display:block; width:20px; height:20px; background:url(../images/btn_chat_cancel_nor.svg) no-repeat center center; background-size:20px; } 
.composer-area .input-form .btn-clear:hover .icon-clear { background-image:url(../images/btn_chat_cancel_pre.svg); } 
@media (hover: none) { .composer-area .input-form .btn-clear:hover .icon-clear { background-image:url(../images/btn_chat_cancel_nor.svg); } }
.composer-area .input-form .btn-clear:active .icon-clear,
.composer-area .input-form .btn-clear:disabled .icon-clear { background-image:url(../images/btn_chat_cancel_dim.svg); } 



/* FAQ(입력 도우미) 버튼 */
.composer-area .input-form .btn-faq { display:flex; align-items:center; align-self:flex-end; justify-content:center; /*width:28px; height:44px;*/ width:100%;height:100%;} 
.composer-area .input-form input:focus + .btn-faq,
.composer-area .input-form textarea:focus + .btn-faq { display:flex; } 
.composer-area .input-form .btn-faq.show { display:flex; } 
.composer-area .input-form .btn-faq .icon-faq { display:flex ;width:30px; height:44px; background:url(https://brity.s3.us-east-2.amazonaws.com/images/ht-dt/icon_input_help.svg) no-repeat center center; background-size:20px; }
.composer-area .input-form .btn-faq:hover .icon-faq { background-image:url(https://brity.s3.us-east-2.amazonaws.com/images/ht-dt/icon_input_help_hover_select.svg); }
@media (hover: none) { .composer-area .input-form .btn-faq .icon-faq { background-image:url(https://brity.s3.us-east-2.amazonaws.com/images/ht-dt/icon_input_help.svg); } }
.composer-area .input-form .btn-faq.active .icon-faq { background-image:url(https://brity.s3.us-east-2.amazonaws.com/images/ht-dt/icon_input_help_hover_select.svg); }

.composer-area .input-form .btn-send { display:flex; align-items:center; align-self:flex-end; justify-content:center; width:28px; min-width:28px; height:44px; }
.composer-area .input-form .btn-send .icon-send { width:20px; height:20px; margin-left:4px; transition:0.2s all; background:url(../images/btn_send_nor.svg) no-repeat center center; background-size:20px; } 
.composer-area.input-state-focused .input-form .btn-send .icon-send { background-image:url(../images/btn_send_foc.svg); }  
  
.composer-area .input-form .text-count { font-size:10px !important; position:absolute; top:14px; right:14px; display:none; color:#757575; } 
.composer-area .input-form .text-count span { display:inline-block; } 
.composer-area .input-form .text-count.warning { display:block; } 
.composer-area .input-form .text-count.limit { display:block; color:#d5383a !important; } 
.composer-area .input-form .text-count .current-count { color:#333333; } 
.composer-area .input-form .text-count.warning .warning-count { display:inline-block; color:#959595; } 
.composer-area .input-form .text-count.warning .limit-count { color:#959595; } 
.composer-area .input-form .text-count.limit .current-count { color:#d5383a; } 
.composer-area .input-form .text-count.limit .limit-count { color:#d5383a; } 

.autocomplete-list { position:fixed; z-index:9; bottom:72px; left:0; display:flex; overflow:hidden; width:100%; height:auto; max-height:0; padding:0; transition:0.2s all; background-color:#0c2651; /* display:none !important; */ }
.autocomplete-list.mCustomScrollbar { display:block; } 
.autocomplete-list.expanded { max-height:200px; padding:10px 0; } 
.autocomplete-list ul { position:relative; display:block; overflow-y:auto; flex-direction:column; width:100%; height:auto; max-height:180px; padding:0 20px; /* -webkit-overflow-scrolling:touch; */ }
.autocomplete-list ul li { font-size:1rem; min-height:47px; position:relative; color:#ffffff;display:flex;align-items:center;padding:12px 0;height:auto; } 
.autocomplete-list ul li + li { border-top:1px solid rgba(255, 255, 255, 0.1); } 
.autocomplete-list ul li a { display:block; /* overflow:hidden; white-space:nowrap; text-overflow:ellipsis; */ /* opacity:0.5; transition:0.2s all; */ }
.autocomplete-list ul li a:hover,
.autocomplete-list ul li a:focus { /* opacity:1; */ }
.autocomplete-list ul li a::before,
.autocomplete-list ul li a::before { position:absolute; z-index:0; top:0; right:50%; bottom:0; left:50%; display:block; content:''; transition:0.25s all; opacity:0; background-color:rgba(0, 0, 0, 0.25); } 
.autocomplete-list ul li a:hover::before { right:-20px; left:-20px; opacity:1; } 
@media (hover: none) { .autocomplete-list ul li a:hover::before { right:inherit; left:inherit; opacity:inherit; } }
/* .composer-area .autocomplete-list ul li a span { } */
.autocomplete-list ul li a span { position:relative;display:inline-block;line-height:1.43; } 
.autocomplete-list ul li a span strong { font-weight:bold; color:#3ec2ff; } 
.autocomplete-list .ps--active-x > .ps__rail-x,
.autocomplete-list .ps--active-y > .ps__rail-y { width:2px; display:block; /* background-color:transparent; */ opacity:1; background-color:rgba(0, 0, 0, 0.1); } 
.autocomplete-list .ps__thumb-x,
.autocomplete-list .ps__thumb-y { /* width:11px; */ background-color:rgba(255, 255, 255, 0.3); width:2px; }

/* stopword(금지어) 플로팅 리스트 */
.stopword-list { position:fixed; z-index:9; bottom:72px; left:0; display:flex; overflow:hidden; width:100%; height:auto; max-height:0; padding:0; transition:0.2s all; background-color:#0c2651; /* display:none !important; */ }
.stopword-list.mCustomScrollbar { display:block; } 
.stopword-list.expanded { max-height:200px; padding:10px 0; } 
.stopword-list ul { position:relative; display:block; overflow-y:auto; flex-direction:column; width:100%; height:auto; max-height:180px; padding:0 20px; /* -webkit-overflow-scrolling:touch; */ }
.stopword-list ul li { font-size:1rem; min-height:47px; position:relative; color:#ffffff;display:flex;align-items:center;padding:12px 0;height:auto; } 
.stopword-list ul li + li { border-top:1px solid rgba(255, 255, 255, 0.1); } 
.stopword-list ul li a { display:block; /* overflow:hidden; white-space:nowrap; text-overflow:ellipsis; */ /* opacity:0.5; transition:0.2s all; */ }
.stopword-list ul li a:hover,
.stopword-list ul li a:focus { /* opacity:1; */ }
.stopword-list ul li a::before,
.stopword-list ul li a::before { position:absolute; z-index:0; top:0; right:50%; bottom:0; left:50%; display:block; content:''; transition:0.25s all; opacity:0; background-color:rgba(0, 0, 0, 0.25); } 
.stopword-list ul li a:hover::before { right:-20px; left:-20px; opacity:1; } 
 
/* 인트로 캐릭터 플로팅 버튼 */
.chat-floating-charactor { position:fixed; z-index:99; right:25px; bottom:35px; } 
.chat-floating-charactor .charactor { position:absolute; z-index:3; right:0; bottom:0; display:block; transition:0.2s all; transform:scale(0.666666); transform-origin:100% 100%; } 
.chat-floating-charactor .charactor-bubble { font-size:1.1538rem; font-weight:500; position:absolute; top:-26px; right:0; display:flex; align-items:center; justify-content:center; width:150px; height:33px; transition:0.2s all; transform:translateY(-20px); transform-origin:100% 100%; animation:charactorBounceBubble 2s infinite; text-align:center; opacity:0.85; border:2px solid #e4e9f2; border-radius:16.5px; background-color:#ffffff; } 
.chat-floating-charactor .charactor-bubble::before { position:absolute; top:100%; left:calc(50% + 25px); display:block; content:''; border-top:10px solid #e4e9f2; border-right:5px solid transparent; border-left:5px solid transparent; } 
.chat-floating-charactor .charactor-bubble::after { position:absolute; top:calc(100% - 3px); left:calc(50% + 25px); display:block; content:''; border-top:10px solid #ffffff; border-right:5px solid transparent; border-left:5px solid transparent; } 
.chat-floating-charactor .charactor-bubble strong { color:#3ec2ff; } 
/* 봇 캐릭터 */
.charactor-img.bot { /* position:relative; */
  display:inline-block; } 
.charactor-img.bot .face { position:relative; width:74px; height:74px; /* animation:charactorBounce 2s infinite; */
  /* border-radius:50%; */
  /* background-color:#3ec2ff; */ }
.charactor-img.bot .face * { position:absolute; } 
.charactor-img.bot .face .eye-1 { top:20px; left:18px; width:3px; height:3px; transition:0.5s all; border-radius:50%; background-color:#000000; } 
.charactor-img.bot .face .eye-2 { top:20px; left:29px; width:3px; height:3px; transition:0.5s all; border-radius:50%; background-color:#000000; } 
.charactor-img.bot .face .mouth { top:27px; left:19px; width:12px; height:6px; transition:0.5s all; border-top:0 solid transparent; /* transform:rotate(45deg); */ border-right:2px solid #000000; border-bottom:2px solid #000000; border-left:2px solid #000000; border-radius:0 0 12px 12px; } 
.charactor-img.bot .face .tail { right:5px; bottom:-2px; transition:0.5s all; transform:rotate(60deg); border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:15px solid #3ec2ff; } 
.charactor-img.bot .face .pin { top:0; right:0; width:15px; height:15px; transition:0.5s all; } 
.charactor-img.bot .face .pin::before { position:absolute; top:0; right:0; display:block; width:10px; height:10px; content:''; transition:0.5s all; border:2px solid #000000; border-radius:50%; } 
.charactor-img.bot .face .pin::after { position:absolute; bottom:0; left:4px; display:block; width:2px; height:10px; content:''; transition:0.5s all; transform:rotate(45deg); background-color:#000000; } 
.charactor-img.bot .shadow { position:absolute; right:0; bottom:0; width:60px; height:5px; transition:0.2s all; animation:charactorBounceShadow 2s infinite; opacity:0.1; border-radius:50%; background-color:#000000; } 
/* 상담준비 캐릭터 */
/* .charactor-img.counselor-ready { } */
.charactor-img.counselor-ready .face { position:relative; width:60px; height:60px; animation:charactorBounce 2s infinite; border-radius:50%; /* background-color:#6c8eff; */ }
.charactor-img.counselor-ready .face * { position:absolute; } 
.charactor-img.counselor-ready .face .eye-1 { top:28px; left:11px; width:3px; height:3px; border-radius:50%; background-color:#000000; } 
.charactor-img.counselor-ready .face .eye-2 { top:26px; left:22px; width:3px; height:3px; border-radius:50%; background-color:#000000; } 
.charactor-img.counselor-ready .face .mouth { top:35px; left:15px; width:9px; height:4px; transform:rotate(-15deg); border-top:0 solid transparent; border-right:2px solid #000000; border-bottom:2px solid #000000; border-left:2px solid #000000; border-radius:0 0 12px 12px; } 
.charactor-img.counselor-ready .face .tail { right:-5px; bottom:10px; transform:rotate(30deg); border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:15px solid #6c8eff; } 
.charactor-img.counselor-ready .face .pin { top:0; right:0; width:15px; height:15px; } 
.charactor-img.counselor-ready .face .pin::before { position:absolute; top:-6px; right:-6px; display:block; width:16px; height:16px; content:''; border:2px solid #000000; border-radius:50%; } 
.charactor-img.counselor-ready .face .pin::after { position:absolute; bottom:0; left:4px; display:block; width:2px; height:10px; content:''; transform:rotate(45deg); background-color:#000000; } 
.charactor-img.counselor-ready .shadow { position:absolute; right:0; bottom:-16px; width:60px; height:5px; transition:0.2s all; animation:charactorBounceShadow 2s infinite; opacity:0.1; border-radius:50%; background-color:#000000; } 
/* 상담사 캐릭터 */
/* .charactor-img.counselor { position:relative; } */
.charactor-img.counselor .face { position:relative; width:60px; height:60px; /* animation:charactorBounce 2s infinite; */ animation:none !important; border-radius:50%; background-color:transparent; } 
/* .charactor-img.counselor .face::before { position:absolute; width:100%; height:100%; content:''; transform:rotate(30deg); border-top:2px solid #000000; border-right:2px solid transparent; border-bottom:2px solid transparent; border-left:2px solid #000000; border-radius:50%; } */
.charactor-img.counselor .face * { position:absolute; } 
.charactor-img.counselor .face .eye-1 { top:28px; left:20px; width:3px; height:6px; border-radius:50%; background-color:#000000; } 
.charactor-img.counselor .face .eye-2 { top:28px; left:36px; width:3px; height:6px; border-radius:50%; background-color:#000000; } 
.charactor-img.counselor .face .mouth { top:40px; left:17px; width:25px; height:10px; transform:rotate(0); border-top:0 solid transparent; border-right:2px solid #000000; border-bottom:2px solid #000000; border-left:2px solid #000000; border-radius:0 0 12px 12px; } 
.charactor-img.counselor .face .tail { z-index:9; right:-10px; bottom:18px; width:80px; height:14px; transform:rotate(0); border-top:0 solid transparent; border-bottom:0 solid transparent; border-left:0 solid transparent; } 
.charactor-img.counselor .face .tail::before,
.charactor-img.counselor .face .tail::after { position:absolute; display:block; width:14px; height:20px; content:''; background-color:#6c8eff; } 
.charactor-img.counselor .face .tail::before { left:0; border-radius:50% 0 0 50%; } 
.charactor-img.counselor .face .tail::after { right:0; border-radius:0 50% 50% 0; } 
.charactor-img.counselor .face .pin { top:0; right:0; width:15px; height:15px; } 
.charactor-img.counselor .face .pin::before { position:absolute; top:56px; right:12px; display:block; width:10px; height:10px; content:''; border:2px solid #000000; border-radius:50%; } 
.charactor-img.counselor .face .pin::after { position:absolute; bottom:-48px; left:-15px; display:block; width:28px; height:28px; content:''; transform:rotate(-60deg); border-top:2px solid transparent; border-right:2px solid #0000; border-bottom:2px solid #000000; border-left:2px solid transparent; border-radius:50%; background-color:transparent; } 
.charactor-img.counselor .shadow { display:none; } 
.chat-floating-charactor .btn-enter { position:relative; right:0; bottom:0; overflow:hidden; max-width:0; height:60px; transition:0.2s all; text-align:left; } 
.chat-floating-charactor .btn-enter span { line-height:1.54; display:block; min-width:200px; } 
.chat-floating-charactor .btn-close { position:absolute; top:0; left:0; width:60px; height:60px; transition:0.25s all; border-radius:50%; } 
.chat-floating-charactor .btn-close .icon-close { width:20px; height:20px; transition:0.2s all; opacity:0.5; } 
.chat-floating-charactor .btn-close .icon-close::before,
.chat-floating-charactor .btn-close .icon-close::after { position:absolute; top:50%; left:50%; display:block; width:20px; height:2px; margin-top:-1px; margin-left:-10px; content:''; background-color:#ffffff; } 
.chat-floating-charactor .btn-close .icon-close::before { transform:rotate(45deg); } 
.chat-floating-charactor .btn-close .icon-close::after { transform:rotate(-45deg); } 
.chat-floating-charactor .btn-close:hover { transform:rotate(-90deg); } 
.chat-floating-charactor .btn-close:hover .icon-close { opacity:1; } 
@media (hover: none) { .chat-floating-charactor .btn-close:hover { transform:inherit; }
  .chat-floating-charactor .btn-close:hover .icon-close { opacity:inherit; } }
/* 인트로 캐릭터 플로팅 버튼 - 활성화*/
.chat-floating-charactor.active .charactor { transform:scale(1) translate(-19px, -30px); /* cursor: auto; */ }
.chat-floating-charactor.active .charactor-bubble { transform:translateY(100%) scale(0.2); opacity:0; } 
.chat-floating-charactor.active .charactor .charactor-img.bot .shadow { opacity:1; } 
.chat-floating-charactor.active .btn-enter { width:calc(100vw - 40px); max-width:320px; padding-left:55px; color:#ffffff; border-radius:30px; background-color:#0c2651; box-shadow:0 3px 6px 0 rgba(21, 44, 83, 0.2); } 
.chat-floating-charactor.active .btn-enter:hover { color:#3ec2ff; } 
@media (hover: none) { .chat-floating-charactor.active .btn-enter:not(.disabled):not(:disabled):hover { color:inherit; } }
/* 온보딩 */
.onboard { /* transition:0.3s all; */
  position:relative; clear:both; /* padding-top:20px; */
  /* padding-bottom:30px; */
  text-align:center; } 
.onboard + * { margin-top:30px; } 
.onboard .slide-group { margin:24px auto 0 !important; } 
/* .chat-started .conversation-area .onboard,
.counseling-started .counseling-area .onboard { padding-top:95px; } */
.onboard .onboard-img { z-index:999; /* position:fixed; */
  /* left:50%; */
  /* transform: translate(-50%,calc(50vh - 28px)) scale(1.421); */
  top:0; margin-bottom:14px; /* transition:0.3s all; */ }
.onboard .onboard-img { /* position:absolute; */
  /* top:20px; */
  z-index:1; /* transform:translate(-50%,0) scale(1); */ }
/* .onboard .onboard-img.loaded { position:absolute; top:20px; z-index:1; transform:translate(-50%,0) scale(1); } */
.onboard .onboard-img img,
.onboard .onboard-img .ani-charactor,
/* .onboard img { display:block; width:76px !important; height:76px !important; margin:0 auto; transition:0.3s all; } */ 
.onboard img { display:block; width:76px; height:76px; margin:0 auto; transition:0.3s all; } 
.onboard .onboard-img.counseling-ready { } 
.onboard .onboard-img.counseling-ready .ready { display:block; } 
.onboard .onboard-img.counseling-ready .success { display:none; } 
.onboard .onboard-img.counseling-success { } 
.onboard .onboard-img.counseling-success .ready { display:none; } 
.onboard .onboard-img.counseling-success .success { display:block; } 
/* .onboard:first-child { height:20px; } */
.onboard:first-child .onboard-img,
.onboard:first-child img { /* height:0; */ } 
.counseling-area .onboard:first-child .onboard-img,
.counseling-area .onboard:first-child img { height:76px; } 
.chatbot-start .onboard:first-child .onboard-img,
.chatbot-start .onboard:first-child img { height:76px; } 
.onboard:first-child .speech-text img,
.onboard:first-child .onboard-img img,
.onboard:first-child .onboard-img .ani-charactor { opacity:0; } 
.onboard:first-child .slide-group img { opacity:1 !important; } 
.counseling-area .onboard:first-child .speech-text img,
.counseling-area .onboard:first-child .onboard-img img { opacity:1; } 
/* .chatbot-start .onboard:first-child { height:76px; } */
.chatbot-start .onboard:first-child img,
.chatbot-start .onboard:first-child .ani-charactor { opacity:1; } 
.onboard .onboard-title { font-size:1.5385rem; line-height:1.47; display:block; text-align:center; word-break:keep-all; } 
.onboard .onboard-title strong { font-weight:500; color:#0498dc; } 
.onboard .onboard-text,
.onboard .onboard-sub-title { font-size:0.8571rem; line-height:1.54; display:block; margin-top:20px; text-align:center; color:#767676; } 
/* .onboard .onboard-text p { } */
/* .onboard .slides { } */
/* 이미지 프레임 */
.img-frame { max-width:100%; } 
/* .img-slides .img-frame { } */
/* .img-wrap { } */
/*.img-wrap img { display:block; width:100%; max-width:268px; } */
/*.img-wrap img { display:block; width:100%; max-width:266px; } */

.img-wrap { padding:15px; border:1px solid #e4e9f2; border-radius:12px; background-color:#ffffff; }

.img-wrap img { display:flex; width:100%; align-items:center;} 


.img-wrap .img-info { display:flex; align-items:center; min-height:28px; margin-top:8px; } 
.img-wrap .img-info .img-title { display:block; overflow:hidden; flex:1; width:auto; white-space:nowrap; text-overflow:ellipsis; } 
.img-wrap .img-info .img-btns { display:flex; flex:initial; } 
.img-wrap .img-info .img-title + .img-btns { margin-left:16px; } 
.img-wrap .img-info .img-btns .btn { font-size:0.8571rem; flex:0 0 auto; width:auto; height:28px; padding:0 16px; } 
.img-wrap .img-info .img-btns .btn + .btn { margin-left:6px; } 
/* 슬라이드 */
.slide-group { position:relative; display:none; max-width:500px; margin-right:-4px; /* width:100%; */ margin-left:-4px; padding-bottom:36px; } 
/*.slide-group.loaded { display:block; } */

.slide-group.loaded { display:block; } 


.speech-text + .slide-group { margin-top:12px; } 
/* .onboard ~ .slide-group { margin-top:30px; } */
.speech-content ~ .slide-group { margin-top:8px; } 
.slide-group .slick-list { /* width:calc(100vw - 60px); */
  max-width:500px; margin-right:-20px; margin-left:-20px; } 
.speech-content .slide-group .slick-list { width:auto; } 
.slide-group.faq-menu .slick-list { margin:0 auto; background-size:calc(140px - 6px); } 
.speech-content .slide-group.faq-menu .slick-list { width:calc(100%); margin:0 auto; background-size:calc(140px - 6px); } 
.onboard .slide-group.faq-menu .slick-list { width:296px; margin:0 auto; background-size:calc(140px - 6px); } 
.onboard .slide-group.faq-menu .slick-list .slick-slide,
.onboard .slide-group.faq-menu .slick-list .slide-item { width:296px; padding:0; } 
.slide-group.faq-menu .slick-slide:last-child .grid-group { /* background:url(../images/img_list_pw_linkey.svg) no-repeat calc(100% - 4px) bottom; background-size:calc(50% - 8px) */
  max-width:296px; background:url(../images/img_list_pw_linkey@3x.png) no-repeat; background-position-x:calc(100% - 8px); background-position-y:bottom; background-size:125px 128px; } 
.slide-group.faq-menu.icon-disabled .grid-group,
.slide-group.faq-menu.slide-selected .grid-group { background-image:none; } 
/* .slide-group .slick-slide { width:calc(100% - 32px); } */
.slide-group .slide-item,
.slide-group .slick-slide { /* max-width:calc(100vw - 32px); */
  padding:0 3px; } 
.slide-group.faq-menu .slide-item { max-width:none; } 
.speech-content .slide-group .slide-item { max-width:100%; } 
/* .slide-group .slick-list { overflow:visible; } */
.popup .prod-list { } 
.grid-group { display:flex; flex-wrap:wrap; margin-right:-4px; margin-left:-4px; width:276px; } 
.grid-group li,
.popup .prod-list .slide-item { flex:0 0 50%; max-width:50%; padding:0 4px !important; display:flex;} 


.popup .slide-item { flex:0 0 50%; max-width:100%; padding:0 4px !important; } 
.popup .slide-item2 { flex:0 0 50%; max-width:35%; padding:0 4px !important; } 

.grid-group li.blank { font-size:0.8571rem; line-height:1.5; display:flex; align-items:center; justify-content:center; max-width:calc(50% - 6px); margin-right:3px; margin-left:3px; color:#8d9198; border:1px solid #e4e9f2; border-radius:12px; } 
.grid-group li.blank strong { font-weight:bold; } 
.grid-group li:nth-child(2n) ~ li { margin-top:8px; } 

/*20210616*/
.grid-full {max-width:100% !important; flex:0 0 100% !important;}
.grid-full .speech-title {width:82%; margin-left:15px;}
.grid-full .speech-title > div:first-child{display:none;}
.grid-full .speech-title strong{margin-right:8px;}
.grid-full .speech-title br{display:none;}

.grid-group li button,
.popup .prod-list .slide-item button { line-height:1.43; /*display:flex; flex-direction:column; justify-content:flex-end;*/ width:100%; padding:18px; /* border:1px solid #e4e9f2; border-radius:12px; */ } 

.popup .slide-item button { line-height:1.43; /*display:flex; flex-direction:column; justify-content:flex-end;*/ width:100%; padding:18px; border:1px solid #e4e9f2; border-radius:12px; }


.grid-group li button:focus,
.grid-group li button:active,
/* .grid-group li button.active { border-color:#3ec2ff; background-color:#ffffff; } */ 
.grid-group li button.active { border-color:#3ec2ff;}

/* sel model type */
.sel-model-type { position:relative; width:calc(100vw - 32px); max-width:500px; } 
.popup .sel-model-type { width:calc(100vw - 40px); max-width:320px; margin:0 auto; /* margin-top:24px; */ }
.popup .pop-comment + .sel-model-type { margin-top:24px; } 
.speech-content + .sel-model-type { margin-top:8px; } 
.sel-model-type .grid-group { position:relative; z-index:1; } 
.sel-model-type .grid-group li button { align-items:stretch; justify-content:space-between; height:243px; padding:24px 16px; text-align:center; background-color:#ffffff; } 
.sel-model-type .grid-group li button:hover { border-color:#0498dc; } 
@media (hover: none) { .sel-model-type .grid-group li button:hover { border-color:inherit; } }
.sel-model-type .grid-group li button:active { border-color:#0498dc; } 
.sel-model-type .grid-group li button:active { background-color:#fafbfc; } 
.sel-model-type .grid-group li button .img { margin:0 auto; } 
.sel-model-type .grid-group li button .img img { display:block; width:100%; max-width:124px; max-height:124px; } 
.sel-model-type .grid-group li button span { font-size:1rem; font-weight:bold; line-height:1.43; text-align:center; white-space:pre-wrap; word-break:keep-all; } 
.sel-model-type .bg-charactor { position:absolute; z-index:0; right:0; bottom:20px; width:calc(50% - 6px); text-align:right; } 
.sel-model-type .bg-charactor img { display:inline-block; width:100%; max-width:137px; } 
/* slide type 1 - faq 메뉴 (2X2) */
/* .slide-group.slide-type-1 { padding-left: 10px; padding-right: 10px; } */
.faq-menu { max-width:296px; margin-right:auto; margin-bottom:24px; margin-left:auto; } 
.speech-content .faq-menu { max-width:276px; margin-right:-3px; margin-bottom:0; margin-left:-3px; } 
.slide-group.faq-menu .slide-item { padding:0; } 
.speech-content .slide-group.faq-menu .slide-item { } 
.slide-group.faq-menu .slide-item button { width:140px; max-width:100%; height:140px; padding:14px; text-align:left; background-color:#ffffff; } 
.speech-content .slide-group.faq-menu .slide-item button { width:130px; height:130px; padding:14px; } 
.slide-group.faq-menu .slide-item button:hover { border-color:#0498dc; } 
@media (hover: none) { .slide-group.faq-menu .slide-item button:hover { border-color:inherit; } }
.slide-group.faq-menu .slide-item button:active { border-color:#0498dc; background-color:#fafbfc; } 
.slide-group.faq-menu .slide-item button .icon { display:flex; align-items:center; justify-content:center; width:24px; height:24px; margin-bottom:12px; } 
.slide-group.faq-menu .slide-item button .icon img { display:block; max-width:100%; max-height:100%; } 
.slide-group.faq-menu .slide-item button > span { font-size:1rem; font-weight:normal; line-height:1.29; display:flex; align-items:center; flex-wrap:wrap; min-height:2.8571rem; } 
.slide-group.faq-menu .slide-item button strong,
.slide-group.faq-menu .slide-item button strong span { font-weight:bold; } 
.slide-group.faq-menu .grid-group li { flex:0 0 148px; padding:0 4px; } 
.speech-content .slide-group.faq-menu .grid-group { width:272px; margin-right:-3px; margin-bottom:0; margin-left:-3px; } 
.speech-content .slide-group.faq-menu .grid-group li { flex:0 0 136px; max-width:136px; padding:0 3px; } 
.onboard .slide-group.faq-menu { max-width:296px !important; margin-top:20px; } 
.onboard .slide-group.faq-menu .grid-group { width:296px; max-width:100%; margin:0 auto; } 
.onboard .slide-group.faq-menu .grid-group li { flex:0 0 148px !important; max-width:50% !important; } 
.onboard .onboard-title { font-size:1.3rem !important; line-height:1.4 !important; } 
.onboard .onboard-sub-title { font-size:0.8571rem !important; line-height:1.5 !important; margin-top:12px !important; color:#767676 !important; } 
/* .onboard .speech-text p,
.onboard .speech-text p span { font-size:20px; } 
.onboard .speech-text p[style*="text-align"]:last-child,
.onboard .speech-text p[style*="text-align"]:last-child span { color:#767676; font-size:12px !important; } */
.speech-content .slide-group.faq-menu .grid-group li.blank { flex:0 0 130px; max-width:130px; margin-right:3px; margin-left:3px; } 
/* .slide-group.slide-type-1 .slide-item button span strong .font-blue { } */
/* slide type 2 - 이미지 검색 (2X3) */
.slide-group.slide-type-2 { overflow:hidden; } 
.popup .slide-group.slide-type-2 { width:320px; max-width:100%; margin:24px auto 0; } 
.slide-group.slide-type-2 .slick-list { width:auto; margin:0 -16px; } 
.popup .slide-group.slide-type-2 .slick-list { min-width:100%; margin:0 auto; } 
.popup .slide-group.slide-type-2:not(.prod-list):not(.slick-dotted) .slick-list .slick-track,
.popup .slide-group.slide-type-2:not(.prod-list):not(.slick-dotted) .slick-list .slick-track .slick-slide { min-width:100%; } 
.popup .slide-group.slide-type-2.slick-dotted .slick-list .slick-track .slick-slide,
.popup .slide-group.slide-type-2.slick-dotted .slick-list .slick-track .slide-item { width:320px; } 
.popup .slide-group.slide-type-2.slick-dotted .slick-list .slick-track .slide-item .grid-group { width:322px; } 
.slide-group.slide-type-2 .slide-item { max-width:calc(100vw - 36px); } 
.popup .slide-group.slide-type-2 .slide-item { padding:0; } 
.popup .slide-group.slide-type-2:not(.prod-list):not(.slick-dotted) .slide-item { min-width:280px; } 
.slide-group.slide-type-2 .slide-item button { align-items:center; padding:14px; text-align:center; background-color:#ffffff; } 
.slide-group.slide-type-2 .slide-item button:hover { border-color:#0498dc; } 
@media (hover: none) { .slide-group.slide-type-2 .slide-item button:hover { border-color:inherit; } }
.slide-group.slide-type-2 .slide-item button:active { border-color:#0498dc; background-color:#fafbfc; } 
.slide-group.slide-type-2 .slide-item button img { display:block; max-width:100%; /* height:110px; max-height:100%; */ height:100px; margin:0 auto; } 
.slide-group.slide-type-2 .slide-item button span { font-size:0.8571rem; line-height:1.67; display:block; width:100%; margin-top:10px; text-align:center; } 
.popup .prod-list .slick-slide .slide-item { padding:0 4px; } 
.popup .prod-list { } 
.popup .prod-list:not(.slick-dotted) .slick-slide { width:320px; } 
.popup .prod-list .slick-slide > div { margin-right:-4px; margin-left:-4px; text-align:left; } 
.popup .prod-list .slick-slide > div ~ div { margin-top:8px; } 





.slide-group.multi-item { overflow:hidden; } 
.popup .slide-group.multi-item { width:100%; margin:0px auto;/*width:364px; margin:24px auto 0;*/ } 
.slide-group.multi-item .slick-list { width:auto; margin:0 -16px; } 
.popup .slide-group.multi-item .slick-list { min-width:100%; /*margin:0 auto;*/ } 
.popup .slide-group.multi-item:not(.prod-list):not(.slick-dotted) .slick-list .slick-track,
.popup .slide-group.multi-item:not(.prod-list):not(.slick-dotted) .slick-list .slick-track .slick-slide { min-width:100%; } 
.popup .slide-group.multi-item.slick-dotted .slick-list .slick-track .slick-slide,
.popup .slide-group.multi-item.slick-dotted .slick-list .slick-track .slide-item { width:320px;/*width:320px;*/ } 
.popup .slide-group.multi-item.slick-dotted .slick-list .slick-track .slide-item .grid-group { width:322px; } 
.slide-group.multi-item .slide-item { max-width:calc(100vw - 36px); } 
.popup .slide-group.multi-item .slide-item { padding:0}
.popup .slide-group.multi-item:not(.prod-list):not(.slick-dotted) .slide-item { min-width:280px; } 
.slide-group.multi-item .slide-item button { align-items:center; padding:0px 16px 0px 16px; text-align:center; background-color:#ffffff; } 
.slide-group.multi-item .slide-item button:hover { border-color:#0498dc; } 
@media (hover: none) { .slide-group.multi-item .slide-item button:hover { border-color:inherit; } }
.slide-group.multi-item .slide-item button:active { border-color:#0498dc; background-color:#fafbfc; } 
.slide-group.multi-item .slide-item button img { display:block; max-width:100%; /* height:110px; max-height:100%; */ margin:0 auto; } 
.slide-group.multi-item .slide-item button span { font-size:1rem; line-height:1.67; display:block; width:100%; margin:0px; text-align:center; } 




/* slide type 3 - 기본 슬라이드 (1X1) */
.slide-group.slide-type-3 { overflow-x:visible; max-width:340px; padding-bottom:0; } 
.popup .slide-group.slide-type-3 { padding-bottom:36px; } 
.slide-group.slide-type-3.slick-slider { margin-right:-20px; margin-left:-20px; padding-right:20px; padding-bottom:36px; padding-left:20px; } 
.speech-content .slide-group.slide-type-3.slick-slider { margin-right:-1px; margin-left:-1px; padding-right:0; padding-left:0; } 
.speech-content .slide-group.slide-type-3.slick-slider .slick-list { overflow:hidden; margin-right:0; margin-left:0; } 
/* .speech-content .slide-group.slide-type-3.slick-slider { margin-left:0; margin-right:0; } */
.slide-group.slide-type-3 .slick-list { /* padding:0 !important; */
  /* width:calc(100vw - 12px); */
  max-width:none;                          margin-right:-20px; /* margin-left:-50px; margin-right:-20px; padding-right:0 !important; */ margin-left:-20px; padding:0 20px; }
.slide-group.slide-type-3:not(.slick-dotted) { padding-bottom:0; } 
.slide-group.slide-type-3:not(.slick-dotted) .slick-list { height:auto !important; padding-bottom:0; } 
.slide-group.slide-type-3 .slide-item { flex:1; max-width:300px; margin:0 auto; padding:0; } 
.speech-content .slide-group.slide-type-3:not(.slick-dotted) { min-width:268px; margin-right:0; margin-left:-1px; } 
.slide-group.slide-type-3.slick-slider .slide-item { padding:0 3px; } 
.speech-content .slide-group.slide-type-3 .slide-item { display:block !important; max-width:268px; padding:0; } 
/* .popup .slide-group.slide-type-3 .slide-item { max-width:calc(100vw - 40px); } */
.slide-group.slide-type-3 .slick-slide { margin:0; padding:0; } 
.slide-group.slide-type-3 .slide-item .img-wrap { padding:15px; border:1px solid #e4e9f2; border-radius:12px; background-color:#ffffff; } 





.slide-group { overflow-x:visible; max-width:340px; padding-bottom:0; } 
.popup .slide-group { padding-bottom:36px; } 
.slide-group.slick-slider { margin-right:-20px; margin-left:-20px; padding-right:20px; padding-bottom:36px; padding-left:20px; } 
.speech-content .slide-group.slick-slider { margin-right:-1px; margin-left:-1px; padding-right:0; padding-left:0; } 
.speech-content .slide-group.slick-slider .slick-list { overflow:hidden; margin-right:0; margin-left:0; } 
/* .speech-content .slide-group.slide-type-3.slick-slider { margin-left:0; margin-right:0; } */
.slide-group .slick-list { /* padding:0 !important; */
  /* width:calc(100vw - 12px); */
  max-width:none;                          margin-right:-20px; /* margin-left:-50px; margin-right:-20px; padding-right:0 !important; */ margin-left:-20px; padding:0 20px; }

.slide-group.slick-slider .slide-item { padding:0 3px; } 
.speech-content .slide-group .slide-item { display:block !important; max-width:268px; padding:0; } 
/*.slide-group .slick-slide { margin:0; padding:0; } */
.slide-group .slick-slide { margin:0;} 
.slide-group .slide-item .img-wrap { padding:15px; border:1px solid #e4e9f2; border-radius:12px; background-color:#ffffff; margin:2px;} 
.slide-group .slide-item button.btn-sel-model .img-wrap:hover { border-color:#0498dc; } 


.slide-group .slide-item button.btn-sel-model.tile { padding:0px; } 



.speech-content .slide-group.slide-type-3 .slide-item .img-wrap { overflow:hidden; padding:0; } 
.speech-content .slide-group.slide-type-3 .slide-item .img-wrap > button,
.speech-content .slide-group.slide-type-3 .slide-item .img-wrap > button > .img { display:block; } 
.slide-group.slide-type-3 .slide-item .img-wrap img { position:relative; left:50%; display:block; width:auto; min-width:268px; /* margin:0 auto; */ transform:translateX(-50%); } 
@media(max-width:359px) { .slide-group.slide-type-3 .slide-item .img-wrap img { width:100%; max-width:100%; } }
.popup .slide-group.slide-type-3 .slide-item .img-wrap img { max-width:100%; } 
.popup .slide-group.slide-type-3 { overflow:hidden; max-width:360px; margin:0 auto; /* height:368px; */ }
.popup .slide-group.slide-type-3.slick-dotted { margin:0 auto; /* height:405px; */ }
@media(max-width:359px) { .popup .slide-group.slide-type-3.slick-dotted { margin:0 -20px; } }
.popup .slide-group.slide-type-3 .slick-list { overflow:visible; width:100%; margin:0 auto; } 
.popup .slide-group.slide-type-3 .slide-item { max-width:none; padding:0 3px; } 
.popup .slide-group.slide-type-3 .slide-item .img-wrap { overflow:hidden; width:320px; max-width:calc(100vw - 40px); margin:0 auto; } 
/* .popup .slide-group.slide-type-3 .slick-list { max-width:none; width:calc(100% - 40px); margin-left:-20px; margin-right:-20px; } */
/* 슬라이드 네비게이션 */
.slide-group .slick-arrow { font-size:0; position:absolute; z-index:1; bottom:0; overflow:hidden; width:28px; height:28px; transition:0.2s all; color:transparent; /* border:1px solid #333333; */
  /* border-radius:50%; */
  background-size:28px; } 
/* .slide-group .slick-arrow::before { display:inline-block; width:6px; height:6px; content:''; } */
.slide-group .slick-arrow.slick-prev { left:4px; background:url(../images/rolling_arrow_left_nor@3x.png) no-repeat center; background-size:28px; } 
.popup .slide-group .slick-arrow.slick-prev { left:20px; } 
/* .popup .slide-group .slick-arrow.slick-prev { left:0; } */
/* .slide-group .slick-arrow.slick-prev::before { margin-left:1.5px; transform:rotate(45deg); border-bottom:1px solid #333333; border-left:1px solid #333333; } */
.slide-group .slick-arrow.slick-next { right:4px; background:url(../images/rolling_arrow_right_nor@3x.png) no-repeat center; background-size:28px; } 
.popup .slide-group .slick-arrow.slick-next { right:20px; } 
/* .popup .slide-group .slick-arrow.slick-next { right:0; } */
/* .slide-group .slick-arrow.slick-next::before { margin-right:1.5px; transform:rotate(45deg); border-top:1px solid #333333; border-right:1px solid #333333; } */
.slide-group .slick-arrow.slick-prev:hover { background-image:url(../images/rolling_arrow_left_foc@3x.png); } 
@media (hover: none) { .slide-group .slick-arrow.slick-prev:hover { background-image:url(../images/rolling_arrow_left_nor@3x.png); } }
.slide-group .slick-arrow.slick-prev:active { opacity:1; /* background-color:#333333; */ background-image:url(../images/rolling_arrow_left_pre@3x.png); } 
.slide-group .slick-arrow.slick-next:hover { background-image:url(../images/rolling_arrow_right_foc@3x.png); } 
@media (hover: none) { .slide-group .slick-arrow.slick-next:hover { background-image:url(../images/rolling_arrow_right_nor@3x.png); } }
.slide-group .slick-arrow.slick-next:active { opacity:1; /* background-color:#333333; */ background-image:url(../images/rolling_arrow_right_pre@3x.png); } 
.slide-group .slick-arrow.slick-prev.slick-disabled { /* opacity:0.4; */
  pointer-events:none; background-image:url(../images/rolling_arrow_left_dim@3x.png); } 
.slide-group .slick-arrow.slick-next.slick-disabled { /* opacity:0.4; */
  pointer-events:none; background-image:url(../images/rolling_arrow_right_dim@3x.png); } 
.speech-bubble .slide-group.img-slide .slick-arrow.slick-prev { left:0; } 
.speech-bubble .slide-group.img-slide .slick-arrow.slick-next { right:0; } 
.slide-group .slick-dots { position:absolute; z-index:0; right:4px; bottom:0; left:4px; display:flex; align-items:center; justify-content:center; /* width:100%; */ height:28px; margin-bottom:0}
.slide-group .slick-dots li { font-size:0; margin:0 1.5px; } 
.slide-group .slick-dots li button { display:block; overflow:hidden; width:7px; height:7px; text-indent:-9999px; border:1px solid #333333; border-radius:50%; } 
.slide-group .slick-dots li.slick-active button { background-color:#333333; } 
.slide-group + .btn.detail { margin-top:8px; } 
/* 상담종료버튼 */
.btn-end-counseling { position:fixed; bottom:92px; left:50%; height:36px; padding:0 16px; transition:0.25s all; transform:translateX(-50%) translateY(100%); text-align:center; opacity:0; color:#ffffff; border-radius:12px; background-color:#322362; } 
.btn-end-counseling.poped { transform:translateX(-50%) translateY(0); opacity:1; } 
/* test menu */
.test-menu { position:fixed; z-index:2; bottom:90px; left:16px; } 
.test-menu .btn-test-menu { font-size:1.0769rem; font-weight:bold; padding:16px; color:#ffffff; border-radius:12px; background-color:#0498dc; box-shadow:0 0 5px rgba(0, 0, 0, 0.5); } 
.test-menu .test-menu-list { position:absolute; bottom:calc(100% + 8px); display:flex; overflow:hidden; flex-wrap:wrap; justify-content:flex-start; width:calc(100vw - 60px); height:auto; max-height:0; transition:0.2s all; opacity:0; border-radius:12px; } 
.test-menu .test-menu-list.active { overflow-y:auto; max-height:calc(50vh); padding:4px; opacity:1; background-color:#ffffff; box-shadow:0 0 5px rgba(0, 0, 0, 0.5); /* -webkit-overflow-scrolling:touch; */ }
/* .test-menu .test-menu-list li { flex:0 0 33.3333%; max-width:33.3333%; padding:4px; } */
.test-menu .test-menu-list .menu-partition { font-weight:bold; flex:0 0 100%; width:100%; padding:10px; text-align:center; } 
.test-menu .test-menu-list button { font-size:0.8462rem; font-weight:500; flex:0 0/* calc(50% - 8px) */
  50%; max-width:calc(50% - 8px); height:50px; margin:4px; padding:0 10px; word-break:keep-all; color:#333333; border:1px solid #e4e9f2; border-radius:12px; background-color:rgba(4, 152, 220, 0.2); } 
.test-menu .test-menu-list button.block { flex:0 0 100%; max-width:calc(100% - 8px); } 
.test-menu .test-menu-list button:disabled { opacity:0.3; color:#757575; background-color:#f5f5f5; } 
/* 스플래시 */
.splash-wrap { display:flex; align-items:center; flex-direction:column; justify-content:center; width:100vw; height:100%; text-align:center; background-color:#f5f7fa; } 
.splash-wrap .splash-inner { margin:0 auto; /* width:calc(100% - 72px); */ }
.splash-wrap .splash-inner .splash-charactor { position:relative; width:130px; height:130px; background:url(../images/img_splash_sparkling.svg) no-repeat center; } 
.splash-wrap .splash-inner .splash-charactor .face { position:relative; width:130px; height:130px; } 
.splash-wrap .splash-inner .splash-charactor .face .ani-charactor { position:relative; width:108px; height:108px; margin:0 auto; text-align:center;} 
.splash-wrap.loading .splash-inner .splash-charactor { position:relative; align-items:center; width:360px; /* height:236px; */ height:auto; } 
.splash-wrap.loading .splash-inner .splash-charactor .face { align-items:center; width:360px; height:360px; } 
/*.splash-wrap.loading .splash-inner .splash-charactor .face .ani-charactor { position:absolute; top:0; left:0; width:360px; height:360px; }*/
.splash-wrap.loading .splash-inner .splash-charactor .face .ani-charactor { display:block; width:114px; height:114px; }
.splash-wrap .splash-inner .splash-charactor .face .ani-charactor svg { position:relative; display:block; margin:0 auto; text-align:center; /* transform:translateX(-50%) !important; */ }
.splash-wrap .splash-inner .splash-charactor .bubble { position:absolute; bottom:65%; left:50%; display:none; width:250px; padding:8px 18px; transform:translateX(-50%); border:1px solid #e4e9f2; border-radius:12px; background-color:#ffffff; } 
.splash-wrap .splash-inner .splash-charactor .bubble:before { position:absolute; top:100%; left:50%; display:block; content:''; transform:translateX(-50%); border-top:8px solid #e4e9f2; border-right:6px solid transparent; border-left:6px solid transparent; } 
.splash-wrap .splash-inner .splash-charactor .bubble:after { position:absolute; top:100%; left:50%; display:block; content:''; transform:translate(-50%, -2px); border-top:8px solid #ffffff; border-right:6px solid transparent; border-left:6px solid transparent; } 
.splash-wrap .splash-inner .splash-charactor .bubble p { display:block; white-space:nowrap; letter-spacing:-0.075rem; } 
.splash-wrap .splash-inner .splash-charactor .bubble p strong { } 
.splash-wrap .splash-inner .splash-charactor .face { display:flex; align-items:flex-end;} 
.splash-wrap .splash-inner .splash-charactor .face .ani-charactor { display:block; margin:0 auto; text-align:center; } 
.splash-wrap .splash-inner .splash-message { font-size:20px; line-height:1.4; margin-top:20px; } 
.splash-wrap .splash-inner .splash-message p { } 
.splash-wrap .splash-inner .splash-message p br { } 
.splash-wrap .splash-inner .splash-message p strong { } 
.splash-wrap .splash-inner .splash-menu { margin-top:58px; } 
.splash-wrap .splash-inner .splash-menu p { color:#767676; } 
.splash-wrap .splash-inner .splash-menu ul { display:flex; justify-content:center; margin-top:40px; } 
.splash-wrap .splash-inner .splash-menu ul li { flex:0 0 140px; max-width:140px; margin:0 4px; } 
.splash-wrap .splash-inner .splash-menu ul li button { font-weight:bold; display:flex; align-items:center; flex-direction:column; justify-content:center; width:100%; height:180px; padding:30px 15px; border:1px solid #e4e9f2; border-radius:12px; background-color:#ffffff; } 
.splash-wrap .splash-inner .splash-menu ul li button:hover { border-color:#0498dc; } 
@media (hover: none) { .splash-wrap .splash-inner .splash-menu ul li button:hover { border-color:inherit; } }
.splash-wrap .splash-inner .splash-menu ul li button .icon-menu { display:block; margin:0 auto; } 
.splash-wrap .splash-inner .splash-menu ul li button span { font-weight:bold; display:block; text-align:center; } 
.splash-wrap .splash-inner .splash-menu ul li button .icon-menu + span { margin-top:30px; } 
/* 스플래시 - 로딩 */
.splash-wrap.loading .splash-inner .splash-charactor {background:none; } 
.splash-wrap.loading .splash-inner .splash-charactor .bubble { display:block; } 
.splash-wrap.loading .splash-inner .splash-message { display:none; } 
.splash-wrap.loading .splash-inner .splash-menu { display:none; } 
/* 에러 */
.error-wrap { font-size:0.8571rem; font-weight:500; line-height:1.43; position:fixed; display:flex; align-items:center; flex-direction:column; justify-content:center; width:100%; height:100%; text-align:center; background-color:#f5f7fa; } 
.error-wrap strong { font-size:1rem; font-weight:bold; color:#0498dc; } 
.error-wrap .error-img { margin-bottom:24px; } 
.error-wrap .error-img img { width:108px; } 
.error-wrap p { } 
.error-wrap .error-img + p,
.error-wrap p + p { margin-top:16px; } 
/* 팝업 Area */
/* .popup-area {position:fixed; } */
.popup-area .popup { position:fixed; z-index:9999; z-index:-1; top:0; left:0; display:flex; align-items:center; flex-direction:column; justify-content:flex-end; width:100%; height:100%; /* transition:0.35s all; */ transform:translateY(100%); opacity:1; background-color:rgba(0, 0, 0, 0.6); /* touch-action: none; */} 
.popup-area .popup.active { z-index:99; transform:translateY(0); opacity:1; } 
.popup-area .popup .pop-body { display:flex; align-items:stretch; flex-direction:column; width:100%; height:calc(100% - 40px); padding:24px 20px 28px; text-align:center; background-color:#f5f7fa;/* background-color:#fff;*/ } 
.popup-area .popup .pop-body .pop-title { margin-bottom:24px; } 
.popup-area .popup .pop-body .pop-content { position:relative; flex:1 1 100%; text-align: left;} 
.popup-area .popup .pop-body .pop-content.ps { margin:0 -20px; padding:0 20px; } 
/* zoom image */
.popup-area .popup.pop-zoom-img{transition:0.2s all;position:absolute;background-color:rgba(0,0,0,0.6);padding:76px 20px 20px;touch-action: none;}
.popup-area .popup.pop-zoom-img *{/* touch-action: auto; */}
.popup-area .popup.pop-zoom-img.active{position:fixed;}
.popup-area .popup.pop-zoom-img .zoom-area{position:absolute;top:0;left:0;right:0;bottom:0;/* overflow:auto; */}
#zoom-area{position:relative;}
#img-zoom-area{/* overflow:auto !important; */max-width:100vw;max-height:100vh;position:relative;}
.zoom-body img,
#img-zoom-area img{display:block;max-width:100%;}
.popup-area .popup.pop-zoom-img .zoom-area .image-cover{position:absolute;z-index:9;width:100%;height:100%;top:0;left:0;}
.popup-area .popup.pop-zoom-img .zoom-area img{width:100%;display:block;position:relative;/* box-shadow:0 0 20px rgba(0,0,0,0.3); */}
.popup-area .popup.pop-zoom-img .zoom-area .ps__rail-x{left: 20px !important;position:fixed;right:20px !important;bottom:8px !important;}
.popup-area .popup.pop-zoom-img .zoom-area .ps__rail-y{top: 64px !important;position:fixed;bottom:20px !important;right:8px !important;}
/* #popScrollArea2 { min-height:533px; } */
#popScrollArea4 { min-height:553px; } 
#popScrollArea4.ps { min-height:auto; } 
/* 상담사 상담 종료 확인 레이어 팝업 */
.popup.check-end-counseling .pop-body { position:relative; height:auto; padding:30px 20px; background-color:#0b2551; } 
.popup.check-end-counseling .pop-body .charactor-area { position:absolute; top:-38px; left:50%; transform:translateX(-50%); } 
.popup.check-end-counseling .pop-body .charactor-img { } 
.popup.check-end-counseling .pop-body .charactor-img .ani-charactor { width:76px; height:76px; transform:translateX(-50%); } 
.popup.check-end-counseling .pop-body p { font-size:1.2308rem; font-weight:500; line-height:1.25; margin-top:25px; color:#ffffff; } 
.popup.check-end-counseling .pop-body .btn-group { display:flex; flex-direction:row; margin-top:40px; } 
.popup.check-end-counseling .pop-body .btn-group button { font-size:1.0769rem; font-weight:500; line-height:1.43; flex:1; max-width:none; height:40px; border:1px solid #ffffff; border-radius:12px; } 
.popup.check-end-counseling .pop-body .btn-group button ~ button { margin-left:8px; } 
.popup.check-end-counseling .pop-body .btn-group .btn-cancel { color:#ffffff; background-color:#0b2551; } 
.popup.check-end-counseling .pop-body .btn-group .btn-submit { color:#0b2551; background-color:#ffffff; } 
/* 챗봇 종료 팝업 */
/* .popup.check-end-chatbot { } */
.popup.check-end-chatbot .pop-body { position:relative; height:auto; padding:30px 20px; background-color:#0b2551; } 
.popup.check-end-chatbot .pop-body .charactor-area { position:absolute; top:-38px; left:50%; width:100%; transform:translateX(-50%); } 
/* .popup.check-end-chatbot .pop-body .charactor-img .face { transform:rotate(15deg); } */
.popup.check-end-chatbot .pop-body .charactor-area .bubble { position:absolute; top:-40px; left:50%; display:flex; align-items:center; width:auto; min-width:268px; max-width:calc(100% - 40px); min-height:40px; padding:10px 16px; transform:translateX(-50%) translateY(-50%); letter-spacing:-0.05rem; border-radius:12px;; background-color:#ffffff; } 
.popup.check-end-chatbot .pop-body .charactor-area .bubble::before { position:absolute; z-index:0; top:100%; left:50%; display:block; content:''; transform:translateX(-50%); border-top:9px solid #ffffff; border-right:4.5px solid transparent; border-left:4.5px solid transparent; } 
.popup.check-end-chatbot .pop-body .charactor-area .bubble::after { } 
.popup.check-end-chatbot .pop-body .charactor-area .bubble p { font-size:1rem; font-weight:500; width:100%; margin-top:0; text-align:center; white-space:nowrap; color:#333333; } 
.popup.check-end-chatbot .pop-body .charactor-area .face { background:none; } 
.popup.check-end-chatbot .pop-body .charactor-area .face img { position:relative; } 
.popup.check-end-chatbot .pop-body p { font-size:1.1429rem; /* font-weight:500; */ line-height:1.25; margin-top:25px; color:#ffffff; } 
.popup.check-end-chatbot .pop-body .charactor-area + p { margin-top:30px; } 
.popup.check-end-chatbot .pop-body .rating-form { display:flex; flex-wrap:wrap; justify-content:center; margin-top:30px; transition:0.2s all; } 
.popup.check-end-chatbot .pop-body .rating-form button { width:34px; height:34px; margin:0 6px; /* transition:0.2s all; */ background:url(../images/ico_star_nor@3x.png) no-repeat center; background-size:contain; } 
.popup.check-end-chatbot .pop-body .rating-form button.on { background-image:url(../images/icon_star_sel@3x.png); background-size:contain; } 
.popup.check-end-chatbot .pop-body .rating-form .score-label { line-height:1.43; flex:0 0 100%; transition:0.2s all; } 
.popup.check-end-chatbot .pop-body .rating-form .input-group { overflow:hidden; width:100%; max-width:none; height:auto; max-height:0; margin-top:24px; transition:0.2s all; /* transform:translateY(100%); */ opacity:0; } 
.popup.check-end-chatbot .pop-body .rating-form .input-group .input-wrap.text textarea { line-height:1.43; flex:0 100%; white-space:normal; } 
.popup.check-end-chatbot .pop-body .rating-form .input-group .input-wrap.text .text-count { color:#959595; } 
.popup.check-end-chatbot .pop-body .rating-form .input-group .input-wrap.text .text-count strong { color:#ffffff; } 
.popup.check-end-chatbot .pop-body .btn-group { display:flex; flex-direction:row; margin-top:40px; margin-right:-3px; margin-left:-3px; } 
.popup.check-end-chatbot .pop-body .rating-form + .btn-group { margin-top:28px; } 
.popup.check-end-chatbot .pop-body .btn-group button { font-size:1rem; /* font-weight:500; */ line-height:1.43; flex:1; max-width:none; height:40px; margin:0 3px; padding:0 16px; border-radius:12px; } 
/* .popup.check-end-chatbot .pop-body .btn-group button ~ button { margin-left:8px; } */
/* .popup.check-end-chatbot .pop-body .btn-group .btn-cancel { color:#ffffff; background-color:#0b2551; } 
.popup.check-end-chatbot .pop-body .btn-group .btn-submit { color:#0b2551; background-color:#ffffff; } */
.popup.check-end-chatbot .pop-body .rating-form ~ .btn-group .btn-bad { display:none; } 
.popup.check-end-chatbot .charactor-img { width:100%; } 
.popup.check-end-chatbot .charactor-img .face { margin:0 auto; } 
.popup.check-end-chatbot .charactor-img .face .ani-charactor { left:0; width:76px; height:76px; /* transform:translateX(-50%); */ }
.popup.check-end-chatbot .charactor-img .face .ani-charactor svg { position:relative; } 
/* 부정 평가 */
.popup.check-end-chatbot .pop-body .rating-form.bad { margin-top:16px; } 
.popup.check-end-chatbot .pop-body .rating-form.bad button { width:20px; height:20px; margin:0 3px; background-size:20px; } 
.popup.check-end-chatbot .pop-body .rating-form.bad .score-label { font-size:14px; margin-top:8px; } 
.popup.check-end-chatbot .pop-body .rating-form.bad .input-group { max-height:200px; opacity:1; } 
.popup.check-end-chatbot .pop-body .rating-form.bad ~ .btn-group button:not(.btn-bad) { display:none; } 
.popup.check-end-chatbot .pop-body .rating-form.bad ~ .btn-group .btn-bad { display:block; } 
.popup.check-end-chatbot .pop-body .rating-form.bad ~ .btn-group .btn-bad:first-child { margin-left:0; } 
.popup.check-end-chatbot .btn-pop-close { position:absolute; top:15px; right:15px; width:28px; height:28px; } 
.popup.check-end-chatbot .btn-pop-close .icon-close { display:block; width:18px; height:18px; background:url(../images/btn_layer_02_close.svg) no-repeat center; background-size:18px; } 
.popup.check-end-chatbot .btn-pop-close .icon-close::before,
.popup.check-end-chatbot .btn-pop-close .icon-close::after { display:none; } 

/* 별점 컴포넌트 *

 */
.rating-form { /* display:flex;  */ flex-wrap:wrap; justify-content:center; transition:0.2s all; margin-left:auto; margin-right:auto}
.rating-form button { width:34px; height:34px; margin:0 6px; /* transition:0.2s all; */ background:url(../images/ico_star_nor@3x.png) no-repeat center; background-size:contain; } 
.rating-form button.on { background-image:url(../images/icon_star_sel@3x.png); background-size:contain; } 
.rating-form .score-label { padding-top: 5px; text-align: center;line-height:1.43; flex:0 0 100%; transition:0.2s all; }

/*.rating-form.bad { margin-top:16px; } */
.rating-form.bad button { width:25px; height:25px; margin:0 3px; background-size:25px; margin-left:8px} 
.rating-form.bad .score-label { padding-top: 5px;text-align: center;font-size:12px; color:#767676; /* margin-top:8px;*/ } 


/* 제품명확인 실내/실외 */
.popup.check-model-normal { /* display:block; */ }
.popup .slide-blank-wrap { min-height:532px; } 
.popup.check-model-normal .img-search-list { display:block; margin-top:0 !important; /* margin-left:-10px; margin-right:-10px; */ }
.popup.check-model-normal .img-search-list .slick-prev { left:0; } 
.popup.check-model-normal .img-search-list .slick-next { right:0; } 
.popup.check-model-normal .pop-body,
.popup.default .pop-body { position:relative; } 
.popup.check-model-normal .pop-body { display:block; height:auto; max-height:calc(100% - 40px); } 
/* #checkModelImageType1 .pop-body { height:calc(100vh - 40px); } */
.popup.check-model-normal .pop-content { /* min-height:532px; */ }
.popup.check-model-normal .pop-body .pop-title,
.popup.default .pop-body .pop-title { font-size:1.2857rem; font-weight:bold; line-height:1.11; display:flex; align-items:flex-start; justify-content:center; margin-bottom:24px; letter-spacing:-0.0643rem; } 
.popup.check-model-normal .pop-body .pop-comment { font-size:1rem; line-height:1.43; text-align:left; margin-bottom: 10px;} 
.popup.check-model-normal .pop-body .type-info { display:flex; align-items:center; max-width:500px; margin:24px auto 16px; } 
.popup.check-model-normal .pop-body .type-info button { font-size:0.8571rem; display:block; width:auto; min-width:0; height:28px; } 
.popup.check-model-normal .pop-body .type-info .info { flex:1; text-align:right; } 
.popup.check-model-normal .pop-body .pop-content { overflow-x:hidden; overflow-y:auto; /* max-height:calc(100vh - 174px); */ max-height:calc(100vh - 127px); margin-top:24px; text-align: left;/* -webkit-overflow-scrolling:touch; */ }
.popup.check-model-normal .pop-body .pop-tabs { margin-top:24px; } 
.popup.check-model-normal .pop-body .pop-tabs .tabs { display:flex; } 
.popup.check-model-normal .pop-body .pop-tabs .tabs > li { display:flex; align-items:center; height:42px; } 
.popup.check-model-normal .pop-body .pop-tabs .tabs > li:first-child { border-radius:12px 0 0 12px; } 
.popup.check-model-normal .pop-body .pop-tabs .tabs > li:last-child { border-radius:0 12px 12px 0; } 
.popup.check-model-normal .pop-body .btn-pop-close,
.popup.default .pop-body .btn-pop-close { top:20px; right:20px; } 
/* 도움말 팝업 */
.popup.guide-layer { justify-content:flex-end; /* background-color:rgba(0, 0, 0, 1); */ }
.popup.guide-layer .guide-intro { overflow:hidden; width:100vw; height:100vh; transition:0.3s all; background-color:#000000; background-repeat:no-repeat; background-position:center; background-size:contain; } 
.popup.guide-layer.detail .guide-intro { display:none; transform:translateY(100%); } 
.popup.guide-layer .guide-intro .mCustomScrollBox,
.popup.guide-layer .guide-intro .mCSB_container { overflow:hidden; margin:0; padding:0; } 
.popup.guide-layer .guide-intro img { position:absolute; top:50%; left:50%; display:block; /* max-width:100%; */ height:100%; margin:0 auto; transform:translate(-50%, -50%); } 
.popup.guide-layer .guide-intro .btn-detail { font-size:0.8571rem; font-weight:500; line-height:1.5; position:absolute; right:17px; bottom:29px; color:#ffffff; } 
.popup.guide-layer .guide-intro .btn-detail span { border-bottom:1px solid #ffffff; } 
.popup.guide-layer .guide-intro .btn-pop-close { position:absolute; top:10px; right:10px; width:30px; height:30px; } 
.popup.guide-layer .guide-intro .btn-pop-close .icon-close::before,
.popup.guide-layer .guide-intro .btn-pop-close .icon-close::after { width:18px; background-color:#ffffff; } 
.popup.guide-layer .pop-body { position:relative; bottom:0; left:0; display:flex; overflow:hidden; flex-direction:column; justify-content:flex-end; width:100%; height:0; max-height:none; padding:0; transition:0.3s all; /* transform:translateY(100%); */ background-color:#f5f7fa; } 
.popup.guide-layer.detail .pop-body { height:calc(100% - 40px); padding:24px 20px 28px; } 
.popup.guide-layer .pop-body .pop-title { font-size:1.2857rem; font-weight:bold; line-height:1.11; display:flex; align-items:flex-start; justify-content:center; width:100%; letter-spacing:-0.0643rem; } 
.popup.guide-layer .pop-body .pop-content { /* display:flex; */
  position:relative; /* align-items:flex-end; */ flex:1 1 100%; /* width:100%; */ padding:0 20px 28px; } 
.popup.guide-layer .pop-body .slide-group,
.popup.common-guide .pop-body .slide-group { /* width:100%; max-width:100%; */
  overflow:hidden; max-width:340px; margin-right:auto; margin-left:auto; padding-right:20px; padding-left:20px; } 
@media (max-width:360px) { .popup.guide-layer .pop-body .slide-group,
  .popup.common-guide .pop-body .slide-group { /* width:100%; max-width:100%; */
    overflow:hidden; max-width:none; margin-right:-20px; margin-left:-20px; padding-right:20px; padding-left:20px; } }
.popup.guide-layer .pop-body .slide-group .slick-list,
.popup.common-guide .pop-body .slide-group .slick-list { width:100%; max-width:100%; margin:0 auto; } 
/* .popup.guide-layer .pop-body .slide-group .slide-item { max-width:calc(100vw - 40px); } */
/* .popup.guide-layer .pop-body .slide-group .slide-item, */
.popup.guide-layer .pop-body .slide-group .slick-slide,
.popup.common-guide .pop-body .slide-group .slick-slide { /* max-width:300px; */
  margin:0; padding:0; } 
.popup.guide-layer .pop-body .slide-group .slick-list,
.popup.common-guide .pop-body .slide-group .slick-list { overflow:visible; } 
.popup.guide-layer .pop-body .slide-group .slide-item,
.popup.common-guide .pop-body .slide-group .slide-item { padding:0 3px; /* margin:0 3px; */ }
.popup.guide-layer .pop-body .slide-group .slide-item .img-wrap,
.popup.common-guide .pop-body .slide-group .slide-item .img-wrap { overflow:hidden; width:300px; max-width:calc(100vw - 40px); margin:0 auto; padding:0; border:1px solid #eaeaea; border-radius:12px; background-color:#ffffff; } 
.popup.guide-layer .pop-body .slide-group .slide-item .img-wrap img { /* max-height:calc(100vh - 120px - 54px); */ }
.popup.guide-layer .pop-body .slide-group .slide-item img,
.popup.common-guide .pop-body .slide-group .slide-item img { display:block; width:100%; max-width:360px; margin:0 auto; } 
.popup.guide-layer .pop-body .btn-pop-close { display:block; top: 20px; right: 20px;} 
.popup.guide-layer.slide-ended .pop-body .btn-pop-close { display:block; } 
.popup.guide-layer .pop-body .btn-skip { display:none; } 
.popup.guide-layer.slide-ended .pop-body .btn-skip { display:none; } 
.popup.guide-layer .mCustomScrollBox { margin-right:-20px; margin-left:-20px; padding:0 20px; } 
.popup.guide-layer .mCSB_container { margin-right:-20px; margin-left:-20px; padding:0 20px; } 
.popup.guide-layer .slick-arrow.slick-prev,
.popup.common-guide .slick-arrow.slick-prev { left:20px; } 
.popup.guide-layer .slick-arrow.slick-next,
.popup.common-guide .slick-arrow.slick-next { right:20px; } 
.popup.guide-layer .btn-skip { font-size:1rem; position:absolute; top:28px; right:20px; color:#0498dc; } 
/* 주소 찾기 팝업 */
.popup.find-zipcode { justify-content:flex-end; } 
.popup.find-zipcode .pop-body { position:relative; display:flex; align-items:stretch; flex-direction:column; justify-content:flex-start; height:calc(100% - 40px); padding:24px 20px 28px; background-color:rgba(245, 247, 250, 1); } 
.popup.find-zipcode .pop-body .pop-title { font-size:1.2857rem; font-weight:bold; line-height:1.11; display:flex; align-items:flex-start; justify-content:center; width:100%; margin-bottom:24px; letter-spacing:-0.0643rem; } 
.popup.find-zipcode .pop-body .pop-content { position:relative; display:flex; flex:1 1 100%; flex-direction:column; flex-wrap:nowrap; } 
.popup.find-zipcode .search-form { flex:initial; } 
.popup.find-zipcode .pop-body .pop-content .info-text { line-height:1.57; flex:initial; text-align:center; } 
.popup.find-zipcode .input-group { flex:initial; max-width:none; } 
.popup.find-zipcode .info-text + .input-group,
.popup.find-zipcode .info-text + form { margin-top:24px; } 
.popup.find-zipcode .address-tip { flex:initial; margin-top:28px; text-align:left; } 
.popup.find-zipcode .address-tip .tip-title { font-weight:bold; margin-bottom:12px; } 
.popup.find-zipcode .address-tip .tip-title strong { color:#0498dc; } 
.popup.find-zipcode .address-tip ul,
.popup.find-zipcode .address-tip p { font-size:0.8571rem; line-height:1.5; color:#959595; } 
.popup.find-zipcode .address-result { display:block; flex:0 0 100%; flex-direction:column; height:auto; /* overflow:hidden; */ margin-top:28px; margin-right:-16px; margin-left:-16px; padding:0 16px; text-align:left; } 
.popup.find-zipcode .address-result .result-info { flex:initial; margin-bottom:16px; } 
.popup.find-zipcode .address-result .result-info strong { font-weight:bold; color:#0498dc; } 
.popup.find-zipcode .address-result .list { position:relative; flex:1; height:auto; margin-right:-20px; margin-left:-20px; padding:0 20px; } 
.popup.find-zipcode .address-result .list::before { position:absolute; top:0; right:16px; left:16px; display:block; height:1px; content:''; background-color:#333333; } 
.popup.find-zipcode .address-result .list ul { } 
.popup.find-zipcode .address-result .list ul li { border-bottom:1px solid #e5e5e5; } 
.popup.find-zipcode .address-result .list ul li + li { } 
.popup.find-zipcode .address-result .list ul li a { display:flex; align-items:flex-start; padding:14px 16px 16px 4px; transition:0.2s all; } 
.popup.find-zipcode .address-result .list ul li a .icon-map-flag { display:block; flex:0 0 18px; max-width:18px; height:18px; margin-right:2px; background:url(../images/img_add_pin_def.svg) no-repeat center; background-size:18px; } 
.popup.find-zipcode .address-result .list ul li a:hover { background-color:rgba(0, 0, 0, 0.02); } 
@media (hover: none) { .popup.find-zipcode .address-result .list ul li a:hover { background-color:inherit; } }
.popup.find-zipcode .address-result .list ul li a:hover .icon-map-flag { background-image:url(../images/img_add_pin_sel.svg); } 
.popup.find-zipcode .address-result .list ul li a .address-info { } 
.popup.find-zipcode .address-result .list ul li a .address-info .address-new { font-weight:500; line-height:1.29; } 
.popup.find-zipcode .address-result .list ul li a .address-info .address-old { font-size:0.8571rem; line-height:1.5; margin-top:6px; color:#959595; } 
/* .popup.find-zipcode .btn-pop-close .icon-close::before,
.popup.find-zipcode .btn-pop-close .icon-close::after { display:none; } */
/* 하단 토글 메시지 */
.popup.message-dialog { padding-bottom:92px; transition:1s all; background-color:transparent; } 
.popup.message-dialog p { font-size:0.8571rem; font-weight:normal; line-height:1.5; width:200px; padding:12px 0; transition:1s all; transform:translateY(100%); text-align:center; letter-spacing:-0.0429rem; opacity:0; color:#ffffff; border-radius:12px; background-color:rgba(10, 36, 81, 0.8); } 
.popup.message-dialog p.toggle { transform:translateY(0); opacity:1; } 
/* 중앙 확인 팝업 */
.popup.center-dialog { align-items:center; justify-content:center; } 
.popup.center-dialog .pop-body { width:calc(100vw - 60px); max-width:300px; padding:16px; border-radius:12px; background-color:#ffffff; } 
.popup.center-dialog .pop-body .pop-title { font-size:1.1429rem; font-weight:bold; line-height:1.25; padding:8px; } 
.popup.center-dialog .pop-body .pop-content { margin-top:16px; } 
.popup.center-dialog .pop-body .pop-btns { display:flex; margin-top:28px; margin-right:-3px; margin-left:-3px; } 
.popup.center-dialog .pop-body .pop-btns button { flex:1; margin:0 3px; } 
/* 약관 팝업 */
.popup.terms { } 
.popup.terms .pop-body { height:calc(100% - 40px); } 
.popup.terms .pop-content { height:calc(100% - 40px); } 
.popup.terms .terms-area { /* display:flex; */
  width:100%; height:100%; text-align:left; } 
.popup.terms .terms-area h2,
.popup.terms .terms-area h3,
.popup.terms .terms-area h4,
.popup.terms .terms-area h5,
.popup.terms .terms-area h6 { font-weight:bold; line-height:1.43; display:inline; margin-bottom:8px; color:#333333; } 
.popup.terms .terms-area p,
.popup.terms .terms-area ul { line-height:1.43; display:block; color:#767676; } 
.popup.terms .terms-area * ~ p,
.popup.terms .terms-area * ~ ul { margin-top:8px; } 
.popup.terms .terms-area p + h2,
.popup.terms .terms-area p + h3,
.popup.terms .terms-area p + h4,
.popup.terms .terms-area p + h5,
.popup.terms .terms-area p + h6,
.popup.terms .terms-area ul + h2,
.popup.terms .terms-area ul + h3,
.popup.terms .terms-area ul + h4,
.popup.terms .terms-area ul + h5,
.popup.terms .terms-area ul + h6 { margin-top:16px; } 
.popup.terms .terms-area > ul { /* padding-left:0.5em; */
  /* list-style:decimal; */
  /* list-style-position:inside; */ }
.popup.terms .terms-area > ul ul { margin-top:8px; margin-bottom:16px; /* padding-left:0.5em; */ }
.popup.terms .terms-area > ul li { margin-left:0; } 
.popup.terms .terms-area > ul > li { color:#333333; } 
.popup.terms .terms-area > ul > li + li { margin-top:16px; } 
.popup.terms .terms-area > ul > li > ul { /* list-style:decimal; */
  /* list-style-position:inside; */ }
.popup.terms .terms-area > ul > li > ul > li { /* margin-left:20px; */
  color:#767676; } 
/* .popup.terms .terms-area > ul > li > ul > li::before { display:inline-block; content:'-'; text-indent:-0.5em; } */
/* .popup.terms .terms-area > ul > li > ul > li > ul> li::before { content:'●'; text-indent:-1em; display:inline-block; } */
.popup.terms .terms-area > ul > li > ul > li > ul { /* list-style:disc; */ }
.popup.terms .terms-area > ul > li > ul > li + li { margin-top:8px; } 
.popup.terms .terms-area > ul li::before { content:''; } 
/* 주요 기능 가이드 */
.popup.common-guide { } 
.popup.common-guide .pop-body { display:flex; flex-direction:column; height:calc(100% - 40px); } 
.popup.common-guide .pop-body .pop-content { overflow:hidden; flex:1; margin-right:-20px; margin-left:-20px; padding:0 20px; } 
.popup.common-guide .pop-body .pop-content.mCustomScrollbar { margin-right:-20px; margin-left:-20px; padding:0 20px; } 
.popup.common-guide .guide-list li { line-height:1.43; padding:16px; text-align:left; border:1px solid #e4e9f2; border-radius:12px; background-color:#ffffff; } 
.popup.common-guide .guide-list li + li { margin-top:8px; } 
.popup.common-guide .guide-list li .guide-title { font-weight:bold; margin-bottom:8px; } 
.popup.common-guide .guide-list li .guide-text { color:#767676; } 
.popup.common-guide .pop-body .slide-group .slick-slide { margin:0; } 
/* 탭 */
.ui-tabs { position:relative; /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */ padding:0; border:none !important; background:none; } 
.ui-tabs .ui-tabs-nav { display:flex; align-items:center; margin:0; padding:0; border:none; border-radius:0; background:none; } 
.ui-tabs .ui-tabs-nav li { font-size:1rem; font-weight:500; position:relative; top:0; display:flex; float:none; align-items:center; flex:1; justify-content:center; height:42px; margin:0; padding:0; list-style:none; white-space:nowrap; border-width:1px; border-color:#0c2651; background-color:transparent; } 
.ui-tabs .ui-tabs-nav li:first-child { border-radius:12px 0 0 12px; } 
.ui-tabs .ui-tabs-nav li:last-child { border-radius:0 12px 12px 0; }
.ui-tabs .ui-tabs-nav li:not(:last-child) { border-right:0; }
.ui-tabs .ui-tabs-nav .ui-tabs-anchor { float:none; display:block; width:100%; padding:0.5em 1em; text-decoration:none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom:0; padding-bottom:0; color:#ffffff; border-color:#0c2651; background-color:#0c2651; } 
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor:text; }
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor:pointer; } 
.ui-tabs .ui-tabs-panel { display:block; margin-top:20px; padding:0; border-width:0; background:none; width: 100%;}

.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl, .ui-corner-right, .ui-corner-tr, .ui-corner-bottom, .ui-corner-bl, .ui-corner-br {
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -khtml-border-radius:0;
}

/* 드롭다운 메뉴 목록 팝업 */
.dropdown-menu-layer { } 
.dropdown-menu-layer .pop-body { display:flex; flex-direction:column; max-height:43vh; background-color:#f5f7fa; } 
.dropdown-menu-layer .pop-body .pop-title { font-size:16px; font-weight:bold; line-height:1.25; flex:initial; padding:24px; } 
.dropdown-menu-layer .pop-body .dropdown-groups { position:relative; overflow-x:hidden; overflow-y:auto; flex:1; /* -webkit-overflow-scrolling:touch; */ }
.dropdown-menu-layer .pop-body .dropdown-groups .ps__rail-x { display:none !important; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu { position:relative; top:0 !important; left:0 !important; display:none; margin:0; padding:0; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size:1rem; font-weight:bold; line-height:1.5; height:auto; margin:0.5em 0 0 0; padding:2px 0.4em; border:0; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu { font-size:1rem; display:block; overflow:auto; overflow-x:hidden; width:100% !important; margin:0; padding:0 20px 20px; padding-bottom:0; list-style:none; border:none; outline:0; background-color:transparent; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu { position:absolute; text-align:left; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-item { line-height:1.29; margin:0; cursor:pointer; text-align:left; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-item ~ .ui-menu-item { border-top:1px solid #e4e9f2; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-item.ui-state-disabled { display:none; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper { position:relative; display:flex; align-items:center; justify-content:left; height:45px; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active { font-weight:bold; color:#000000; border:none; background:none; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper::before { position:absolute; z-index:0; top:0; right:50%; bottom:0; left:50%; height:100%; content:''; transition:0.25s all; opacity:0; background-color:rgba(4, 152, 220, 0.25); } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-item-wrapper.ui-state-active::before { right:-20px; left:-20px; opacity:1; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-menu-divider { font-size:0; line-height:0; height:0; margin:5px 0; border-width:1px 0 0 0; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-state-focus,
.dropdown-menu-layer .pop-body .ui-selectmenu-menu .ui-menu .ui-state-active { margin:0; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-open { display:block; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-text { display:block; overflow:hidden; margin-right:20px; text-overflow:ellipsis; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-button.ui-button { width:14em; text-align:left; white-space:nowrap; } 
.dropdown-menu-layer .pop-body .ui-selectmenu-icon.ui-icon { float:right; margin-top:0; } 
/* datepicker */
.ui-datepicker { position:fixed !important; z-index:9999 !important; display:none; overflow:hidden; width:280px; padding:0; border:1px solid #0498dc !important; border-radius:12px; background-color:#ffffff; box-shadow:0 0 5px rgba(0, 0, 0, 0.5); } 
.ui-datepicker .ui-datepicker-header { position:relative; padding:8px; color:#ffffff; border:none !important; border-radius:0; background-color:#0498dc; } 
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { position:absolute; top:50%; display:flex; align-items:center; justify-content:center; width:1.8em; height:1.8em; transform:translateY(-50%); background:none; } 
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before { display:block; width:10px; height:10px; content:''; border-top:2px solid #ffffff; border-right:2px solid #ffffff; } 
.ui-datepicker .ui-datepicker-prev::before { transform:rotate(-135deg); } 
.ui-datepicker .ui-datepicker-next::before { transform:rotate(45deg); } 
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover { top:50%; } 
.ui-datepicker .ui-datepicker-prev { left:16px; } 
.ui-datepicker .ui-datepicker-next { right:16px; } 
.ui-datepicker .ui-datepicker-prev-hover { left:16px; } 
.ui-datepicker .ui-datepicker-next-hover { right:16px; } 
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span { position:absolute; top:50%; left:50%; display:none; margin-top:-8px; margin-left:-8px; } 
.ui-datepicker .ui-datepicker-title { font-size:1.1429rem; line-height:1.8em; margin:0 2.3em; text-align:center; } 
.ui-datepicker .ui-datepicker-title select { font-size:1em; margin:1px 0; } 
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year { width:45%; } 
.ui-datepicker table { font-size:1rem; width:calc(100% - 16px); margin:0 auto 8px; border-collapse:collapse; } 
.ui-datepicker th { font-weight:bold; padding:8px 0; text-align:center; border:0; } 
.ui-datepicker td { padding:3px; text-align:center; border:0; } 
.ui-datepicker td span,
.ui-datepicker td a { display:flex; align-items:center; justify-content:center; height:24px; padding:0.2em; text-align:center; text-decoration:none; border-radius:3px; } 
.ui-datepicker td a.ui-state-default { border:none; background:none; } 
.ui-datepicker td a.ui-state-active { border:none; background:#0498dc; } 
.ui-datepicker td a.ui-state-hover { color:#333333; background:#e4e9f2; } 
.ui-datepicker td a.ui-state-highlight { color:#ffffff; border:none; background:rgba(4, 152, 220, 0.5); } 
.ui-datepicker .ui-datepicker-buttonpane { margin:0.7em 0 0 0; padding:0 0.2em; border-right:0; border-bottom:0; border-left:0; background-image:none; } 
.ui-datepicker .ui-datepicker-buttonpane button { float:right; overflow:visible; width:auto; margin:0.5em 0.2em 0.4em; padding:0.2em 0.6em 0.3em 0.6em; cursor:pointer; } 
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float:left; } 
/* timepicker */
.wickedpicker { position:fixed !important; z-index:9999 !important; display:none; overflow:hidden; width:280px; height:auto; padding:0; border:1px solid #0498dc !important; border-radius:12px; box-shadow:0 0 5px rgba(0, 0, 0, 0.5); } 
.wickedpicker .wickedpicker__title { position:relative; display:flex; align-items:center; justify-content:center; height:45px; padding:8px; color:#ffffff; border:none !important; border-radius:0; background-color:#0498dc; } 
.wickedpicker .wickedpicker__controls { padding:16px; } 
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control { }
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control .icon-time-up { } 
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control .wickedpicker__controls__control--hours { } 
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control .wickedpicker__controls__control--minutes { } 
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control .wickedpicker__controls__control--meridiem { } 
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control .icon-time-down { } 
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control--separator { } 
.wickedpicker .wickedpicker__controls .wickedpicker__controls__control--separator .wickedpicker__controls__control--separator-inner { } 

.icon-time-up { position:absolute; top:50%; display:flex; align-items:center; justify-content:center; width:1.8em; height:1.8em; transform:translate(10%, 0%); background:none;} 
.icon-time-down { position:absolute; top:50%; display:flex; align-items:center; justify-content:center; width:1.8em; height:1.8em; transform:translate(10%, 100%); background:none; } 
.icon-time-up::before { display:block; width:10px; height:10px; content:''; border-top:2px solid #000; border-right:2px solid #000; } 
.icon-time-down::after { display:block; width:10px; height:10px; content:''; border-top:2px solid #000; border-right:2px solid #000; } 
.icon-time-up::before { transform:rotate(-45deg); } 
.icon-time-down::after { transform:rotate(135deg); } 
.icon-time-hover-state {cursor : pointer}






/* custom scrollbar */
.mCustomScrollBox { position:relative; overflow:hidden; height:100%; /* max-width: 100%; */ margin-right:-16px; margin-left:-16px; padding-right:16px; padding-left:16px; outline:none; direction:ltr; } 
.mCustomScrollbar.flex .mCustomScrollBox { flex:1; } 
.mCSB_container { overflow-x:hidden; width:auto; height:auto; min-height:100%; } 
.mCustomScrollbar.flex .mCSB_container { display:flex; flex-wrap:wrap; } 
.mCSB_scrollTools { position:absolute; top:0; right:3px; bottom:0; left:auto; width:2px; height:auto; opacity:0.2; } 
.mCSB_scrollTools .mCSB_draggerContainer { position:absolute; top:0; right:0; bottom:0; left:0; height:auto; } 
.mCSB_scrollTools .mCSB_draggerRail { width:2px; height:100%; margin:0 auto; border-radius:16px; background-color:#eeeeee; } 
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { position:relative; width:2px; height:100%; margin:0 auto; text-align:center; border-radius:16px; background-color:#333333; } 
.mCSB_scrollTools:hover { opacity:1; } 
@media (hover: none) { .mCSB_scrollTools:hover { opacity:inherit; } }
.mCSB_scrollTools.mCSB_scrollTools_onDrag { opacity:1; } 
.composer-area .autocomplete-list .mCSB_scrollTools .mCSB_draggerRail,
.guide-intro .mCSB_scrollTools .mCSB_draggerRail { background-color:rgba(0, 0, 0, 0.1); } 
.composer-area .autocomplete-list .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.guide-intro .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar { background-color:#ffffff; } 
/* 반응형 */
/* PC & Tablet */
@media (min-width:720px) { .conversation-area .speech-bubble.bot .speech-content { max-width:500px; } }
/* 낮은 해상도 스마트폰 viewport 360 미만 */
@media (max-width:359px) { html { font-size:13px; }
  .input-group { max-width:256px; }
  .ui-datepicker { top:50% !important; left:50% !important; transform:translate(-50%, -50%) !important; }
  .speech-content,
  .speech-content.input-data-form { /* min-width:calc(100vw - 60px); */
    max-width:288px !important; }
  .speech-content.input-data-form { width:288px; }
  .speech-content { width:288px; max-width:100%; }
  .speech-bubble.user .speech-content { width:auto; }
  .speech-content.text-only { width:auto; max-width:100%; }
  .speech-content > .btn,
  .speech-content > .btn.primary.wide,
  .speech-content > .btn.secondary.wide { width:calc(100vw - 38px - 32px + 6px); }
  .btn.primary.wide,
  .btn.secondary.wide { min-width:256px; }
  .speech-btns { min-width:256px; }
  .speech-content .speech-btns { width:calc(100% + 6px); max-width:calc(100vw - 32px - 32px + 6px); }
  .left-menu .menu-body { width:210px; }
  .splash-wrap.loading .splash-inner .splash-charactor { width:320px; }
  .splash-wrap.loading .splash-inner .splash-charactor .face { width:100%; }
  .splash-wrap.loading .splash-inner .splash-charactor .face .ani-charactor { width:100%; height:320px; }
  .sel-model-type .grid-group li button { height:216px; }
  .popup .slide-group.slide-type-3 .slide-item { width:280px; }
  .speech-content .slide-group.faq-menu .grid-group { width:260px; }
  .speech-content .slide-group.faq-menu .grid-group li { flex:0 0 130px; max-width:50%; }
  .speech-content .grid-group li:nth-child(2n) ~ li { margin-top:6px; }
  /* .onboard .faq-menu { margin-left:-4px !; margin-right:-4px; } */
  .onboard .slide-group.faq-menu .grid-group { width:288px; }
  .onboard .slide-group.faq-menu .slick-list { width:288px; }
  .onboard .slide-group.faq-menu .grid-group li { flex:0 0 50% !important; }
  .slide-group.faq-menu .slide-item button { width:100%; height:130px; }
  .speech-content .slide-group.slide-type-3.slick-slider { left:50%; width:100%; max-width:100%; margin-right:0; margin-left:0; transform:translateX(-50%); }
  .speech-content .slide-group.slide-type-3 .slide-item { max-width:254px; }
  .popup .slide-group.slide-type-2:not(.slick-dotted) .slide-item { min-width:100%; }
  .popup .slide-group.slide-type-2.slick-dotted .slick-list .slick-track .slick-slide,
  .popup .slide-group.slide-type-2.slick-dotted .slick-list .slick-track .slide-item { width:280px; }
  .popup .slide-group.slide-type-2.slick-dotted .slick-list .slick-track .slide-item .grid-group { width:282px; }
  /* */ }
/* .popup .sel-model-type { max-width:320px; margin:0 auto; } */
/* 갤럭시 s10 기준 온보딩 커스터마이징 */
@media (max-width:411px) { .header { flex:0 0 64px; max-height:64px; }
  .conversation-area::before { top:64px; }
  .onboard .onboard-img { }
  .onboard .onboard-title { margin-top:4px !important; }
  .onboard .onboard-sub-title { margin-top:8px !important; }
  .onboard .faq-menu { margin-top:12px !important; } }
/* //갤럭시 s10 기준 온보딩 커스터마이징 */
/* 모바일에서 hover 이펙트 제거 */
/* 애니메이션 키프레임 */
@keyframes charactorBounce { 0% { bottom:0; }
  50% { bottom:15px; }
  100% { bottom:0; } }
@keyframes charactorBounceBubble { 0% { margin-top:0; }
  50% { margin-top:-15px; }
  100% { margin-top:0; } }
@keyframes charactorBounceShadow { 0% { transform:scaleX(0.8); opacity:0.2; }
  50% { transform:scaleX(0.6); opacity:0.1; }
  100% { transform:scaleX(0.8); opacity:0.3; } }
@keyframes headerCharactorBounce { 0% { bottom:0; }
  50% { bottom:10px; }
  100% { bottom:0; } }
@keyframes headerCharactorBounceShadow { 0% { transform:scaleX(0.8); opacity:0.2; }
  50% { transform:scaleX(0.6); opacity:0.1; }
  100% { transform:scaleX(0.8); opacity:0.3; } }
@keyframes survayBounce { 0% { transform:translateY(0); }
  50% { transform:translateY(-5%); }
  100% { transform:translateY(0); } }
@supports (-webkit-overflow-scrolling: touch) { /* CSS specific to iOS devices */
  /* * { -webkit-overflow-scrolling: touch; } */
  /* 
 iOS UI Size
 Status Bar = 44px (overlay)
 Navigation Bar = 97px (relative)
 Bottom Tab Bar = 49px (overlay)
 Home Indicator = 34px (overlay)
 */
  .popup.check-model-normal .pop-body .pop-content { position:relative;max-height:calc(100vh - 44px - 40px - 52px - 43px - 83px); } }
  
/* 기본 스크롤바 스타일*/  
/* width */ 
::-webkit-scrollbar {
    width: 14px;
}

/* Track */ 
::-webkit-scrollbar-track { 
    background: transparent;
	margin-top: 1px;
}

/* Handle */
::-webkit-scrollbar-thumb { 
  background: #D9DFE6;
  background-clip: content-box;
  border: 6px solid transparent;
}
/* Handle on hover */ 
::-webkit-scrollbar-thumb:hover {
  background: #b0b7bf; 
  background-clip: content-box;
  border: 6px solid transparent;
}

/* 퀵메뉴 */
/*.composer-area .input-shortcut .btn-toggle-shortcut2 { display:flex; align-items:center; justify-content:center; width:32px; height:44px; transition:0.15s all; border-radius:50%; background:url(../images/btn_shotcut_foc2.svg) no-repeat center; background-size:32px; } */
/*.composer-area .input-shortcut .btn-toggle-shortcut2 .expanded { background-image:url(../images/btn_shotcut_sel@3x2.png); background-size:32px; } */
/*.composer-area .input-shortcut .btn-toggle-shortcut2.expanded { display:flex; align-items:center; justify-content:center; width:32px; height:44px; transition:0.15s all; border-radius:50%; background:url(../images/btn_shotcut_foc2.svg) no-repeat center; background-size:32px; } 
.composer-area .input-shortcut .btn-toggle-shortcut2 { background-image:url(../images/btn_shotcut_sel@3x2.png); background-size:32px; } 
*/
.quick-menu {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
    margin-top: 12px;
    margin-right: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    width: inherit;
}
.quick-menu.hor .quick-menu-btn,
.quick-menu.hor button { /*flex:0 0 50%;*/ width:auto; /*max-width:calc(50% - 6px);*/ } 
.quick-menu .quick-menu-btn,
.quick-menu button { /*flex:0 0 50%;*/ width:auto; /*max-width:calc(50% - 6px);*/ } 
.quick-menu-btn { padding:0 16px; } 
.quick-menu-btn span { flex:1 1 100%; } 

.quick-menu-btn { 
	font-size:1rem; 
	/* display:flex; */
	align-items:center; 
	justify-content:center; /*width:268px;*/ 
	/* max-width:95%; height:40px; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; */ 
	max-width:95%; height:auto; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; padding:8px; 
    font-weight: 500;
    line-height: 1.43;
    position: relative;
    transition: 0.15s all;
    text-align: left;
    margin: 3px;
} 
.quick-menu-btn:not(:disabled):hover { /* color:#ffffff; */
  background-color:#def5ff; } 
@media (hover: none) { .quick-menu-btn:not(:disabled):hover { /* color:#ffffff; */
    background-color:inherit; } }
.quick-menu-btn:not(:disabled):focus,
.quick-menu-btn:not(:disabled):active,
.quick-menu-btn:not(:disabled).active { color:#ffffff; background-color:#0498dc; } 
.quick-menu-btn:disabled { /* flex:0 0 100%; width:100%; */
  opacity:0.4; } 


.faq-menu {
    max-width: 100%;
    margin-right: 0px;
    margin-bottom: 24px;
    margin-left: 0px;
    width: inherit;
}  

.floating-btn { padding:0 16px; } 
.floating-btn span { flex:1 1 100%; } 
.floating-btn { 
	font-size:1rem; 
	/* display:flex; */
	align-items:center; 
	justify-content:center; /*width:268px;*/ 
	max-width:95%; height:auto; color:#0498dc; border:1px solid #0498dc; border-radius:12px; background-color:#ffffff; padding:3px 5px 3px 5px; 
    font-weight: 500;
    line-height: 1.43;
    position: relative;
    transition: 0.15s all;
    text-align: left;
    margin: 3px;
} 
.floating-btn:not(:disabled):hover { /* color:#ffffff; */ background-color:#def5ff; } 
/* .floating-btn:not(:disabled):focus, */
.floating-btn:not(:disabled):active,
.floating-btn:not(:disabled).active { color:#ffffff; background-color:#0498dc; } 
.floating-btn:disabled { /* flex:0 0 100%; width:100%; */ opacity:0.4; } 



#rotating_img {
    -webkit-animation: rotation 2s infinite linear;
}

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

.loading_text {
  font-family: NotoSansCJKkr;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.43;
  letter-spacing: normal;
  color: rgba(0, 0, 0, 0.6);
}

/* MS adaptive card custom css */
.ac-adaptiveCard:focus { outline:none; }

/* Login */
.login_id {
    height: 45px;
    width: 50%;
    padding: 0 15px;
    color: #333;
    margin-bottom: 10px;
}

.login_pwd {
    height: 45px;
    width: 50%;
    padding: 0 15px;
    color: #333;
}
.login_msg_div {
    height: 30px;
    margin-bottom: 30px;
}
.login_msg {
    width: 50%;
    color: red;
    display: none;
}
.login_btn {
    height: 45px;
    width: 50%;
    padding: 0 15px;
    background: cadetblue;
}
.login_signup_btn {
    height: 45px;
    width: 50%;
    padding: 0 15px;
    background: cadetblue;
    margin-bottom: 10px;
}

.signup { align-items:center; justify-content:center; }
.signup .id {  height: 45px; width: 50%; padding: 0 15px; color: #333; }
.signup .pwd {  height: 45px; width: 50%; padding: 0 15px; color: #333; }
.signup .name {  height: 45px; width: 50%; padding: 0 15px; color: #333; margin-bottom: 10px}
.signup .register {  height: 45px; width: 50%; padding: 0 15px; background: cadetblue; color: #333; margin-bottom: 10px}
.signup .cancel {  height: 45px; width: 50%; padding: 0 15px; background: cadetblue; color: #333; }
.signup .validation {  height: 15px; font-size: 8px; font-family:Tahoma;}
.signup .validation .valid {  height: 15px; font-size: 8px; color:blue; font-family:Tahoma;}
.signup .validation .invalid {  height: 15px; font-size: 8px; color: red; font-family:Tahoma;}