@charset "utf-8";
/* @import url('reset.css'); */
@import url('swiper.css');
/* skip navi */
.skip_navi {position:relative;z-index:1000}
.skip_navi a {display:block;width:1px;height:1px;margin-bottom:-1px;overflow:hidden;text-align:center;color:#000;z-index:1000}
.skip_navi a:focus, .skip_navi a:active {width:auto;height:auto;padding:10px 0;background:#eee;font-size:14px;text-align:center}
/* ------------------------------------------------------------
* TitleBar
* ------------------------------------------------------------*/
body {background:#f2f2f2;}
#wrap {width:100%;}
.header {width:100%;height:92px;position:fixed;top:56px;background:#f2f2f2;z-index:30;}
.contents {width:100%;position:fixed;/*top:147px;*/top:56px;bottom:56px;background:#f2f2f2;overflow-y:scroll;z-index:10;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.header .top {padding:16px 16px 0 16px;position:relative}
.header .btn_info .ico {display:block;width:72px;height:72px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_ent_in.gif') no-repeat 0 0;background-size:100%;transition:background 0.1s;text-indent:-9999px}
/*.header .btn_info .ico:after {display:block;content:'';width:32px;height:32px;position:absolute;left:88px;top:38px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_open.png') no-repeat 0 0;background-size:32px 32px}*/
.header .btn_info .ico.on {background-size:100%;transition:background 0.1s}
/*.header .btn_info .ico.on:after {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close.png') no-repeat 0 0;background-size:100%}*/
.header .btn_close {position:absolute;right:16px;top:32px;display:none}
.header .btn_close .ico {display:block;width:40px;height:40px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close02.png') no-repeat 0 0;background-size:40px 40px;text-indent:-9999px}
.topHead h1{text-align:center;}
.oper_guide {background:#f2f2f2;width:100%;height:100%;position:fixed;left:0;top:147px;display:none;z-index:30}
.oper_guide .accordion:first-child {box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.06) inset, 0 4px 2px 0 rgba(0, 0, 0, 0.06) inset, 0 1px 10px 0 rgba(0, 0, 0, 0.06) inset}
.oper_guide .accordion {display:block;background:#ffcc00;width:100%;height:60px;padding:0 16px;text-align:left;font-size:20px;color:rgba(0, 0, 0, .87);font-weight:normal;cursor:pointer;position:relative;border-bottom: 1px solid #d6ab00;letter-spacing:-0.8px;font-size:16px;box-sizing:border-box;line-height:60px;}
.oper_guide .accordion.on:after {display:block;content:'닫기';width:40px;height:40px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close02.png') no-repeat;background-size:100%;position:absolute;right:16px;top:10px;font-size:1px;color:transparent}
.oper_guide .accordion.on + .panel {display:block;transition:height 0.2s ease-in-out}
.oper_guide .panel {background:#fff;padding:16px;overflow-y:auto;display:none;transition:height 0.2s;-webkit-overflow-scrolling: touch;}
.oper_guide .panel .middle {display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-content:center;align-content:center}
.oper_guide .panel .middle li {width:100%;margin:4% 0;display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center}
.oper_guide .panel .middle li a {display:block;font-size:20px;line-height:28px;color:#60584c;position:relative}
.oper_guide .panel .middle li a:before {display:inline-block;content:'';width:24px;height:24px;position:absolute;left:-24px;top:2px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_txt01.png') no-repeat;background-size:100%}
.oper_guide .panel .middle li a:after {display:inline-block;content:'';width:24px;height:24px;position:absolute;right:-24px;top:2px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_txt02.png') no-repeat;background-size:100%}
.oper_guide .panel .img_area img {display:block;max-width:100%;margin:0 auto}
.tooltip {padding:12px 14px;font-size:14px;line-height:1.3;color:rgba(0, 0, 0, .60);margin-right:16px;position:absolute;left:130px;top:9px;background:#fff;box-sizing:border-box;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.tooltip:before {display:inline-block;content:'';width:15px;height:12px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_bubble.png') no-repeat;background-size:100%;position:absolute;left:-7px;top:14px;transform:rotate(48deg)}
/* ------------------------------------------------------------
* Message input
* ------------------------------------------------------------*/
.inputArea {width:100%;position:fixed;top:auto;bottom:0;background:#fff;z-index:20}
/* .inputArea {width:100%;position:fixed;top:calc(100vh - 56px);background:#fff;z-index:20} */
.inputArea .inHead {position:relative;box-shadow: 16px 0 16px 0 rgba(0,0,0,0.1), 2px 0 16px 6px rgba(0,0,0,0.08);z-index:19}
.inputArea .inHead .message {display:table;width:100%}
.inputArea .inHead .txtArea {display:table-cell;vertical-align:bottom;width:auto;padding:16px 0 16px 0;position:relative;transform:translateZ(0)}
.inputArea .inHead .txtArea textarea {display:block;width:100%;max-height:96px;min-height:24px;padding:0 35px 0 0;font-size:18px;line-height:24px;color:rgba(0, 0, 0, .87);vertical-align:middle;overflow-y:scroll;background:transparent;border:0;outline:0;resize:none}
.inputArea .inHead .txtArea textarea.line1 {height:24px}
.inputArea .inHead .txtArea textarea.line2 {height:48px}
.inputArea .inHead .txtArea textarea.line3 {height:72px}
.inputArea .inHead .txtArea textarea.line4 {height:96px}
.inputArea .inHead .btn_delete {display:block;width:24px;height:24px;position:absolute;right:0;bottom:16px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_delete.png') no-repeat;background-size:100%;text-indent:-9999px}
.inputArea .inHead .btn_send {display:table-cell;vertical-align:bottom;width:40px;height:40px;padding:8px 16px 8px 0}
.inputArea .inHead .btn_send .ico {display:block;width:40px;height:40px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_send_off.png') no-repeat;background-size:100%;color:transparent;font-size:1px;}
.inputArea .inHead .btn_send .ico.active {display:block;width:40px;height:40px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_send.png') no-repeat;background-size:100%;}
.inputArea .inBody {display:inline-block;position:relative;width:100%;height:auto;padding:16px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;z-index:18}
.inputArea .inBody .keyword {overflow:hidden;max-height:90px}
.inputArea .inBody .list {text-align:center}
.inputArea .inBody .list:after {display:block;content:'';clear:both}
.inputArea .inBody .list li:first-child {margin-left:0}
.inputArea .inBody .list li {display:inline-block;border:1px solid #b3b3b3;margin-left:3px;margin-bottom:8px;border-radius: 24px}
.inputArea .inBody .list li a {display:inline-block;line-height:24px;padding:7px 11px;font-size:16px;color:rgba(0, 0, 0, .6)}
.inputArea .inBody .list li a strong {color:#f46600}
.inputArea .inBody .list li a:active {background:#ffcc00}
/* ------------------------------------------------------------
* UI Elements
* ------------------------------------------------------------*/
.hidden {overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;margin:-1px;clip:rect(0 0 0 0)}
.text_underline {display:inline-block;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);text-decoration:underline;margin:8px 19px 0 0}
.text_underline:hover,
.text_underline:focus,
.text_underline:active {text-decoration:underline;color:rgba(0, 0, 0, .87)}
.text_underline.disabled {color:rgba(0, 0, 0, .47);text-decoration:none;background:#fff !important}
.text_underline2 {text-decoration:underline;}
/* 폰트 색상 */
/* 2025.04.17 추가*/
/* 2025.05.12 orange,blue,green 수정*/
.text_gold {color:#b28f59}
.text_blue {/*color:#01a0c7*/color:#0065cb}
.text_orange {/*color:#f46600*/color:#ff6c2f}
.text_orange2 {color:#ff6c2f}
.text_grey {color:rgba(0, 0, 0, .60);font-size:16px}
.text_darkgrey {color:rgba(0, 0, 0, .74);font-size:16px}
.text_navy_blue {color:#0000A0}
.text_congress_blue {color:#004080}
.text_deep_fir {color:#004000}
.text_stratos {color:#000040}
.text_lochmara {color:#0080C0}
.text_oracle {color:#397373}
.text_pigment_indigo {color:#400080}
.text_blackberry {color:#400040}
.text_dove_gray {color:#666666}
.text_olive {color:#6C6C00}
.text_maroon {color:#800000}
.text_razzmatazz {color:#D20069}
.text_turbo {color:#F4F400}
.text_red {color:#FF0000}
.text_flush_orange {color:#FF8000}
.text_hot_pink {color:#FF79BC}
.text_green {/*color:#008040*/color:#007d3e}
.text_white {color:#FFFFFF}
.text_butterfly_bush {color:#5F5694}
.text_medium_red_violet {color:#AE3C90}
.text_cabaret {color:#CD3F6B}
.text_flame_pea {color:#E06038}
.dark .text_green{color:#008040;}
.dark .text_blue {color:#01a0c7}
.dark .text_orange {color:#f46600}
/* 폰트 스타일 */
.text_throught {text-decoration:line-through;color:rgba(0, 0, 0, .47)}
.text_bold {font-weight:bold}
.text_small {font-size:15px}
.text_small1 {font-size:14px}
.text_small2 {font-size:13px}
.text_large {font-size:21px}
/* 약관링크 필수읽기 여부 */
a[mandatory_watched="false"] {color:#01a0c7;} /* .text_blue 와 동일 */
a[mandatory_watched="true"] {color:rgba(0, 0, 0, .60) !important;} /* .text_grey 와 동일. focus일 때, 컬러 블랙으로 나오므로 important 적용 */
/* Bubble */
.chatBox .line_date {position:relative;width:100%;padding:0 10px;height:50px;line-height:50px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.chatBox .line_date .date {display:inline-block;line-height:25px;padding:0 15px;background:#8c949e;font-size:12px;color:#fff;border-radius:50px;}
.txtNode:after {display:block;content:'';clear:both}
.txtNode:first-child {margin-top:0}
.txtNode {margin-bottom:24px;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.txtNode .txt {padding:12px 16px;margin-left:16px;margin-right:16px;font-size:18px;line-height:1.3;color:rgba(0, 0, 0, .87);position:relative;box-shadow: 0 2px 0 0 #ebebeb;box-sizing:border-box;-webkit-tap-highlight-color:rgba(255,255,255,0)}
.txtNode .txt .text_gold {margin-bottom:4px;font-size:16px}
.txtNode .txt .img01 {width:100%; margin-top:10px;}
.txtNode .txt .depTit3 {margin: 10px 0px 10px !important;}
.txtNode .txt .tbsList1 li:last-child {visibility: hidden;height:0;margin:0;padding:0;min-width: 300px;} /* 버블내 목록 최소크기 지정 */
.txtNode .txt .indent1 { display : inline-block; text-indent: -1px; margin-left: 1px;} /* - 항목명 : 내용 패턴 */
.txtNode .txt .indent2 { display : inline-block; text-indent: -2px; margin-left: 2px;}
.txtNode .txt .indent3 { display : inline-block; text-indent: -3px; margin-left: 3px;}
.txtNode .txt .indent4 { display : inline-block; text-indent: -4px; margin-left: 4px;}
.txtNode .txt .indent5 { display : inline-block; text-indent: -5px; margin-left: 5px;}
.txtNode .txt .indent6 { display : inline-block; text-indent: -6px; margin-left: 6px;}
.txtNode .txt .indent7 { display : inline-block; text-indent: -7px; margin-left: 7px;}
.txtNode .txt .indent8 { display : inline-block; text-indent: -8px; margin-left: 8px;}
.txtNode .txt .indent9 { display : inline-block; text-indent: -9px; margin-left: 9px;}
.txtNode .txt .indent10 { display : inline-block; text-indent: -10px; margin-left: 10px;}
.txtNode .txt .indent11 { display : inline-block; text-indent: -11px; margin-left: 11px;}
.txtNode .txt .indent12 { display : inline-block; text-indent: -12px; margin-left: 12px;}
.txtNode .txt .indent13 { display : inline-block; text-indent: -13px; margin-left: 13px;}
.txtNode .txt .indent14 { display : inline-block; text-indent: -14px; margin-left: 14px;}
.txtNode .txt .indent15 { display : inline-block; text-indent: -15px; margin-left: 15px;}
.txtNode .txt .indent16 { display : inline-block; text-indent: -16px; margin-left: 16px;}
.txtNode .txt .indent17 { display : inline-block; text-indent: -17px; margin-left: 17px;}
.txtNode .txt .indent18 { display : inline-block; text-indent: -18px; margin-left: 18px;}
.txtNode .txt .indent19 { display : inline-block; text-indent: -19px; margin-left: 19px;}
.txtNode .txt .indent20 { display : inline-block; text-indent: -20px; margin-left: 20px;}
.txtNode .txt .indent21 { display : inline-block; text-indent: -21px; margin-left: 21px;}
.txtNode .txt .indent22 { display : inline-block; text-indent: -22px; margin-left: 22px;}
.txtNode .txt .indent23 { display : inline-block; text-indent: -23px; margin-left: 23px;}
.txtNode .txt .indent24 { display : inline-block; text-indent: -24px; margin-left: 24px;}
.txtNode .txt .indent25 { display : inline-block; text-indent: -25px; margin-left: 25px;}
.txtNode .txt .indent26 { display : inline-block; text-indent: -26px; margin-left: 26px;}
.txtNode .txt .indent27 { display : inline-block; text-indent: -27px; margin-left: 27px;}
.txtNode .txt .indent28 { display : inline-block; text-indent: -28px; margin-left: 28px;}
.txtNode .txt .indent29 { display : inline-block; text-indent: -29px; margin-left: 29px;}
.txtNode .txt .indent30 { display : inline-block; text-indent: -30px; margin-left: 30px;}
.txtNode .time {clear:both;margin-top:8px;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .6)}
.txtNode .next {clear:both;margin-top:8px}
.txtNode.system .txt {position:relative;float:left;
/*max-width:84%; 2025.04.16 uiux 수정*/
width:308px;border-radius:8px;
background:#fff}
.txtNode.system .time {position:relative;float:left;padding-left:16px}
.txtNode.system .first {margin-top:16px}
.txtNode.system .txt:before{content:'챗봇메시지, ';position:absolute;font-size:1px;width:1px;height:1px;overflow:hidden;color:transparent}
.txtNode.system .time:before{content:'챗봇작성시간, ';position:absolute;font-size:1px;width:1px;height:1px;overflow:hidden;color:transparent}
.txtNode.system .first:before {display:inline-block;content:'';width:15px;height:12px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_bubble.png') no-repeat;background-size:100%;position:absolute;left:32px;top:-12px}
.txtNode.system .txt.first:before{content:'챗봇메시지, ';overflow:hidden;}
.txtNode.user .txt {position:relative;float:right;max-width:75%; background:rgb(96,88,78); color:#fff; word-break:break-all;border-radius:8px;box-shadow:none;}/*2025.04.16 모서리 둥근값 추가*/
.txtNode.user .txt:before{content:'사용자메시지, ';position:absolute;font-size:1px;width:1px;height:1px;overflow:hidden;color:transparent}
.txtNode.user .time {position:relative;float:right;padding-right:32px;text-align:right}
.txtNode.user .time:before{content:'사용자작성시간, ';position:absolute;font-size:1px;width:1px;height:1px;overflow:hidden;color:transparent}
.txtNode.user .txt p {word-break:break-all}
/* Text Button */
.btngroup:after {display:block;content:'';clear:both}
.btngroup {float:left;clear:both;margin:4px 16px 0 16px}
.btngroup .btn:first-child {margin-right:8px}
.btngroup .btn {display:block;float:left;padding:12px 16px;margin-top:8px;line-height:1.3;background:#fff;border:1px solid #f46600;border-radius:24px;font-size:16px;color:#f46600;position:relative}
.btngroup.type1 .btn{width: calc(100% - 30px);max-width: 368px ;box-sizing: border-box;text-align: center;margin-right: 100%;}
.btn.disabled {background:rgba(0, 0, 0, .04);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16)}
/* 아이콘 Button */
.icon_like span {padding-left:31px}
.icon_like span:before {display:inline-block;content:'';width:24px;height:24px;vertical-align:top;margin:-2px 8px 0 0;position:absolute;left:16px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_bg01.png') no-repeat;background-size:100%}
.icon_dislike span {padding-left:31px}
.icon_dislike span:before {display:inline-block;content:'';width:24px;height:24px;vertical-align:top;margin:0 8px 0 0;position:absolute;left:16px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_bg02.png') no-repeat;background-size:100%;margin-top:-2px}
.reset_scenario span {padding-left:31px}
.reset_scenario span:before {display:inline-block;content:'';width:24px;height:24px;vertical-align:top;margin:-3px 8px 0 0;position:absolute;left:16px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_bg03.png') no-repeat;background-size:100%}
.icon_prev_view {display:block;;border:1px solid rgba(0, 0, 0, .16);margin:12px 0 4px;border-radius:5px;text-align:center}
.icon_prev_view span {display:inline-block;line-height:46px;font-size:18px;color:#01a0c7}
.icon_prev_view span:after {display:inline-block;content:'';width:24px;height:24px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_view.png') no-repeat;background-size:100%;position:relative;top:5px;left:6px}
.disabled.icon_like span:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_bg01-1.png') no-repeat;background-size:100%}
.disabled.icon_dislike span:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_bg02-1.png') no-repeat;background-size:100%;margin-top:-2px}
.disabled.reset_scenario span:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_bg03-1.png') no-repeat;background-size:100%;margin-top:-3px}
/* Loading */
.txtNode .loading:after {display:block;content:'';clear:both}
.txtNode .loading {float:left;clear:both;margin:8px 16px 0 16px;background:#fff;padding:12px 16px;position:static !important;margin:0 !important;padding:0 !important}
.txtNode .loading p {display:flex;vertical-align:middle;text-align:center}
.txtNode .loading p .ico {display:inline-block;width:44px;height:14px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/loading.gif') center;background-size:100%;text-indent:-9999px}
.type3 .loading {position:fixed !important;margin:-30px 0 0 -30px;}
.type3 .loading p {display:flex;vertical-align:middle;text-align:center;position:relative}
.type3 .loading p .ico {display:inline-block;width:52px;height:52px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_07.png') center;background-size:100%;text-indent:-9999px}
/* List & swiper */ /* 2020 챗봇 고도화 수정 내역 있음 */
.listBox {clear:both;position:relative;padding-top:12px}
.swiperList {position:relative}
/* .swiper1 .list {background:#ffcc00;border-radius:8px;box-shadow:0 2px 0 0 #ebebeb;margin-bottom:2px;width:144px} */
/* .swiper1 .list img {display:block;max-width:100%} */
/* .swiper1 .list .tit {display:block;background:#fff;padding:8px 0;font-size:18px;line-height:1.3;color:rgba(0, 0, 0, .87);text-align:center;border-radius:0 0 8px 8px;} */
/* .swiper1 .swiper-slide .list:before {display:block;content:'';width:144px;height:100px;border-radius:8px 8px 0 0} */
/* .swiper1 .swiper-slide .list.icon_pay:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu01.png') no-repeat 0 0;background-size:144px 100px} 요금납부(생활대금 자동납부) */
/* .swiper1 .swiper-slide .list.icon_lon:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02.png') no-repeat 0 0;background-size:144px 100px} 카드대출 */
/* .swiper1 .swiper-slide .list.icon_wit:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03.png') no-repeat 0 0;background-size:144px 100px} 바로출금결제 */
/* .swiper1 .swiper-slide .list.icon_rec:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04.png') no-repeat 0 0;background-size:144px 100px} 카드추천 */
/* .swiper1 .swiper-slide .list.icon_cht:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu05.png') no-repeat 0 0;background-size:144px 100px} 전표찾기 */
/* .swiper1 .swiper-slide .list.icon_los:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu06.png') no-repeat 0 0;background-size:144px 100px} 분실신고 */
/* .swiper1 .swiper-slide .list.icon_info:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu07.png') no-repeat 0 0;background-size:144px 100px} 챗봇소개(추가건) */
/* .swiper1 .disabled.swiper-slide .list.icon_pay:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu01-1.png') no-repeat 0 0;background-size:144px 100px} 요금납부(생활대금 자동납부) */
/* .swiper1 .disabled.swiper-slide .list.icon_lon:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02-1.png') no-repeat 0 0;background-size:144px 100px} 카드대출 */
/* .swiper1 .disabled.swiper-slide .list.icon_wit:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03-1.png') no-repeat 0 0;background-size:144px 100px} 바로출금결제 */
/* .swiper1 .disabled.swiper-slide .list.icon_rec:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04-1.png') no-repeat 0 0;background-size:144px 100px} 카드추천 */
/* .swiper1 .disabled.swiper-slide .list.icon_cht:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu05-1.png') no-repeat 0 0;background-size:144px 100px} 전표찾기 */
/* .swiper1 .disabled.swiper-slide .list.icon_los:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu06-1.png') no-repeat 0 0;background-size:144px 100px} 분실신고 */
/* .swiper1 .disabled.swiper-slide .list.icon_info:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu07-1.png') no-repeat 0 0;background-size:144px 100px} 챗봇소개(추가건) */
.swiper1 .disabled.swiper-slide .list {background:rgba(0, 0, 0, .04)}
.swiper1 .disabled.swiper-slide .list .tit {color:rgba(0, 0, 0, .47)}
.swiper2 .btn {display:block;float:left;padding:12px 16px;margin-top:8px;line-height:1.3;background:#fff;border:1px solid #f46600;border-radius:24px;font-size:16px;color:#f46600;position:relative}
.swiper2 .btn.disabled {background:rgba(0, 0, 0, .04);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16)}
.swiper3 .swiper-slide {margin-left:18px}
.swiper3 .swiper-slide:first-child {padding-left:16px}
.swiper3 .swiper-slide:last-child {margin-right:25px !important;padding-right:0}
.swiper3 .swiper-slide.swiper-slide-active .checked {animation: check 1s forwards;opacity:0}
.swiper3 .swiper-slide.swiper-slide-active .checked .check {animation: check 1s forwards;opacity:0}
.swiper3 .swiper-slide.swiper-slide-active .checked.disabled {display:none}
.swiper3 .list {position:relative;width:220px;overflow:hidden}
.swiper3 .list .img {width:220px;padding-top:12px}
.swiper3 .list .img img {display:block;max-width:100%}
.swiper3 .list .img_horizon img {}
.swiper3 .list .img_vertical img {transform:rotate(270deg);-webkit-transform: rotate(270deg);width:139px;height:220px;position: absolute;top: -29px; left: 42px;}
.swiper3 .list .img .img01 {display:block}
.swiper3 .list .img .img02 {display:none}
.swiper3 .list .img.disabled .img01 {display:none}
.swiper3 .list .img.disabled .img02 {display:block}
.swiper3 .list .card_info {margin-top:24px}
.swiper3 .list .card_info p {font-size:18px;line-height:24px;color:rgba(0, 0, 0, .87)}
.swiper3 .list .card_info ul {margin-top:8px}
.swiper3 .list .card_info ul li {font-size:15px;line-height:24px;color:rgba(0, 0, 0, .60); text-align:left;position:relative;padding-left:10px;}
.swiper3 .list .card_info ul li::before {content: "·"; position:absolute; left:0;}
.swiper3 .list .checked {width:43px;height:44px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_check.png') no-repeat 0 0;background-size:43px 44px;position:absolute;left:90px;top:61px}
.swiper3 .list .checked .check {width:17.5px;height:12.5px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_select.png') no-repeat 0 0;background-size:17.5px 12.5px;position:absolute;left:12px;top:13px;text-indent:-9999px}
.swiper3 .list .checked.disabled {display:none}
.swiper3 + .paging3 {position:absolute;top:153px;width:auto;left:0;right:0;margin-left:auto;margin-right:auto}
.swiper4 .list {background:#fff;border-radius:8px;box-shadow:0 2px 0 0 #ebebeb;margin-bottom:2px;width:192px;height:244px;box-sizing:border-box;padding:16px 14px 20px}
.swiper4 .list img {display:block;width:104px;height:104px;margin:12px auto 0}
.swiper4 .list .img01 {display:block}
.swiper4 .list .img02 {display:none}
.swiper4 .list .tit {display:-webkit-box;margin-top:16px;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);max-height:48px;overflow:hidden;vertical-align:middle;text-overflow:ellipsis;word-wrap:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.swiper4 .list .date {display:block;margin-top:8px;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60)}
.swiper4 .swiper-slide.disabled .list {background:rgba(0, 0, 0, .04)}
.swiper4 .swiper-slide.disabled .tit {color:rgba(0, 0, 0, .47)}
.swiper4 .swiper-slide.disabled .img01 {display:none}
.swiper4 .swiper-slide.disabled .img02 {display:block}
/*챗봇가이드 신설*/
.swiper4.chat-guide1 .list{width:232px;height:288px;padding:16px 20px 20px;margin-bottom: 2px}
.swiper4.chat-guide1 .list img{width: 192px;height: 152px;margin-top: 6px}
.swiper4.chat-guide1 .list .tit {text-align: left;font-weight: bold}
.swiper4.chat-guide1 .list .date {display:block;margin-top:8px;font-size:15px;line-height:22px;color:rgba(0, 0, 0, .87);text-align: left}
/*챗봇가이드 다크모드*/
.dark .swiper4.chat-guide1 .list .tit {color : #C6CBD0}
.dark .swiper4.chat-guide1 .list{background:var(--gray030);}
.dark .swiper4.chat-guide1 .list .date{color: #C6CBD0;}
/* non-swiper형식의 버튼 레이아웃*/
.non-swiper {padding-top:4px;padding-left:16px;overflow:hidden;float:left;max-width:308px;clear:both;}
.non-swiper .btn {display:block;float:left;padding:7px 11px;margin-top:8px;line-height:1.3;background:rgba(255,255,255,1);border:1px solid #b3b3b3;border-radius:24px;font-size:16px;color:rgba(0,0,0,0.6);position:relative;margin-right: 8px;}
.non-swiper .btn.disabled {background:rgba(0, 0, 0, .04);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16)}
.non-swiper #goMulti.btn {background:rgba(255,204,0,0.06); border: 1.3px solid #b3b3b3;font-weight: 500;}
.non-swiper .btn.btn_goMulti {background:rgba(255,204,0,0.06); border: 1.3px solid #b3b3b3;font-weight: 500;}
.non-swiper #goMulti.btn.disabled {background:rgba(0, 0, 0, .04);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16);border:1px solid #b3b3b3;}
.non-swiper .btn.btn_goMulti.disabled {background:rgba(0, 0, 0, .04);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16);border:1px solid #b3b3b3;}
.dark .non-swiper .btn {background:rgba(72,75,81,0.4);border:1px solid #6f6f6f;color:#b7b7b7;}
.dark .non-swiper .btn.btn_goMulti {background:rgba(255,204,0,0.15); border: 1.3px solid #6f6f6f;font-weight: 500;}
.dark .non-swiper #goMulti.btn {background:rgba(255,204,0,0.15); border: 1.3px solid #6f6f6f;font-weight: 500;}
.dark .non-swiper .btn.disabled {border:1px solid var(--gray030);background:none;color:#4e4e4e;}
.dark .non-swiper .btn.btn_goMulti.disabled {border:1px solid var(--gray030);background:none;color:#4e4e4e;}
.dark .non-swiper #goMulti.btn.disabled {border:1px solid var(--gray030);background:none;color:#4e4e4e;}
/* 공통(활성화, 비활성화) */
.boxArea [class^="active"] a {color:#f46600 ! important}
.boxArea [class^="active"] a:after {display:block;content:'';position:absolute;left:-1px;top:-1px;width:100%;height:100%;border:1px solid #f46600}
/* boxArea */
.boxArea {clear:both;padding-top:12px;margin:0 16px 2px}
.boxArea .cont {max-width:308px;padding:16px 16px 20px;background:#fff;border-radius:8px;box-shadow: 0 2px 0 0 #ebebeb;box-sizing:border-box}/* 20200625 - 리스트 유형 변경 */
.boxArea .swiperList + .btn_ashgrey {margin:16px 16px 0}
.boxArea .swiper_cont {padding:16px 0;background:#fff;border-radius:8px;box-shadow: 0 2px 0 0 #ebebeb;box-sizing:border-box;
width:308px;/*width:100%;max-width:288px;*/}
.boxArea .btn_grey {display:block;padding:12px 0 11px;line-height:24px;background:rgba(0, 0, 0, .16);border-radius:6px;font-size:16px;color:rgba(0, 0, 0, .47);text-align:center}
.boxArea .btn_grey.active {background:#6b7079;color:#fff}
.boxArea .btn_grey.disabled {background:rgba(0, 0, 0, .16);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16)}
.boxArea .btn_ashgrey {display:block;padding:12px 0 11px;line-height:24px;background:rgba(0,0,0,0.6);border-radius:6px;font-size:16px;color:#fff;text-align:center}
.boxArea .btn_ashgrey.disabled {background:rgba(0, 0, 0, .04);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16)}
.boxArea .option {width:308px;padding:16px;background:#fff;border-radius:8px;box-shadow: 0 2px 0 0 #ebebeb;box-sizing:border-box}
.boxArea .option .btn {display:block;float:left;width:47%;border-radius:5px;text-align:center;/*border:1px solid #f46600;*/border:1px solid #b3b3b3}
.boxArea .option .btn span {display:inline-block;line-height:46px;font-size:16px;margin-right:-5px;/*color:#f46600;*/color:rgba(0,0,0,0.6);}
.boxArea .option .icon_etc {float:right}
.boxArea .option .icon_etc:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:6px;left:7px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup.png') no-repeat 0 0;background-size:24px 24px;
filter:invert(0%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(100%) contrast(0%);}
.dark .boxArea .option .icon_etc:after {filter:invert(88%) sepia(0%) saturate(0%) hue-rotate(180deg) brightness(150%) contrast(85%);}
.boxArea .option:after {display:block;content:'';clear:both}
.boxArea .option .btn.disabled {background:rgba(0, 0, 0, .04);border:1px solid rgba(0, 0, 0, .16);color:rgba(0, 0, 0, .47)}
.boxArea .option .btn.disabled span {color:rgba(0, 0, 0, .47)}
.boxArea .option .disabled.icon_etc:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:6px;left:7px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup05.png') no-repeat 0 0;background-size:24px 24px}
/* 2025.04.10 다크모드 추가*/
.dark .boxArea .option {box-shadow:none;background:var(--gray030);}
.dark .boxArea .option .btn {border:1px solid var(--gray070);}
.dark .boxArea .option .btn span {color:var(--gray070);}
.dark .boxArea .cont {background:var(--gray030);box-shadow:none;}
.dark .boxArea .btn_ashgrey {background:var(--gray030);}
/* 입력폼 */
.formArea {overflow:hidden;position:relative}
.formArea label {display:block;font-size:14px;color:rgba(0, 0, 0, .60)}
.formArea .txt01 {padding:0;border:0;border-bottom:1px solid rgba(0, 0, 0, .16);padding:7px 14px;line-height:24px}
.formArea .txt02 {padding:0;border:0;border-bottom:1px solid rgba(0, 0, 0, .16);padding:7px 14px;line-height:24px;width:100%;text-align:left;background:transparent}
.formArea + .btn {margin:16px 0 0}
.formArea .btn_ashgrey.disabled {background:#87878b}
.formArea button.ico {display:block;width:24px;height:24px;position:absolute;right:0;top:35px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size:24px 24px;text-indent:-9999px}
.formArea .txt_name {position:absolute;right:14px;bottom:12px;z-index:2}
.formArea .money {text-align:right;}
/* 다크모드 추가 2025.04.10 */
.dark .formArea .txt01 {border-bottom:1px solid var(--gray050);}
.cont_list {max-width:308px;padding:8px 16px 20px;background:#fff;border-radius:8px;box-shadow:0 2px 0 0 #ebebeb;box-sizing:border-box} /* 20200625 - 리스트 유형 변경 */
.listArea ul li.disabled .title,
.listArea ul li.disabled .txt_box {color:rgba(0, 0, 0, .47)}
.listArea .check_result li {display:table;width:100%;border-bottom:1px solid rgba(0, 0, 0, .16);box-sizing:border-box}
.listArea .check_result li .title {display:table-cell;width:100px;vertical-align:middle;font-size:16px;line-height:20px;color:rgba(0, 0, 0, .60);/*font-weight:bold;*/padding:12px 14px 12px 0;word-break:break-all;box-sizing:border-box;
position:relative;} /* 20200626 - width 값 수정. 80 -> 85 */
.listArea .check_result li .title:before{content:'';position:absolute;right:8px;top:12px;width:1px;height:calc(100% - 24PX);display:block;background:rgba(0,0,0,.16)}
.listArea .check_result li .txt_box {display:table-cell;width:auto;vertical-align:middle;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);padding:12px 0 12px;box-sizing:border-box;word-break:break-all;word-wrap:break-word}
.listArea .check_result li .txt_box span {cursor:pointer;word-break:break-all;word-wrap:break-word}
.listArea .check_result li .txt_box .text_grey {display:block;font-size:14px;line-height:20px}
.listArea .check_result li .txt_box .ico:after {display:inline-block;content:'';width:24px;height:24px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 -2px;background-size:24px 24px;vertical-align:middle}
.listArea .text_banner li {border-bottom:1px solid rgba(0, 0, 0, .16);padding:16px 0;box-sizing:border-box}
.listArea .text_banner li .info {font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60)}
.listArea .text_banner li .date {font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60)}
.listArea .icon_more {display:block;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);text-align:center;margin:6px 0 0}
.listArea .icon_more:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:6px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_more.png') no-repeat 0 0;background-size:24px 24px}
.listArea .icon_more.disabled {color:rgba(0, 0, 0, .47)}
.listArea .icon_more.disabled:after {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_more02.png') no-repeat 0 0;background-size:24px 24px}
.listArea + .btn {margin-top:12px}
/*.btn_ashgrey + .btn_ashgrey:last-child {margin-top:8px}*/
.btn_ashgrey {margin-top:8px}
.listArea .list_type2 li .title {width:110px}
.listArea .list_type2 li .txt_box {text-align:right}
/* 내역조회, 세부 상품 선택 : 추가 */
.listArea .list_box2 ul {border:1px solid rgba(0, 0, 0, .16);padding:16px 0;margin-top:16px;border-radius:8px}
.listArea .list_box2 li:first-child {padding-top:0}
.listArea .list_box2 li.ico {cursor:pointer}
.listArea .list_box2 li.ico .txt_box:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:-3px;vertical-align:middle;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size: 24px 24px}
.listArea .list_box2 li {display:table;width:100%;padding:8px 8px 0;box-sizing:border-box;position:relative}
.listArea .list_box2 li .title {display:table-cell;width:auto;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);padding-right:14px;box-sizing:border-box}
.listArea .list_box2 li .txt_box {display:table-cell;width:auto;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);text-align:right;box-sizing:border-box}
.listArea .list_box2 li .txt_box .time {position:relative;padding-left:10px}
.listArea .list_box2 li .txt_box .time:before {display:inline-block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:3px}
.listArea .list_box2 .btn.text {margin:8px 16px 0}
.text_btn li {border-bottom:1px solid rgba(0, 0, 0, .16);box-sizing:border-box;position:relative}
.text_btn li a {display:block;padding:16px 0;overflow:hidden}
.text_btn li .div_radiobox + a {padding:16px 0 16px 10px}
.text_btn .type1 a .title {display:block;float:left;width:44%;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box}
.text_btn .type1 a .price {display:block;margin-right:24px;text-align:right;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);word-break:break-all}
.text_btn .type1 a .price span {word-break:break-all}
.text_btn .type1 a .price_cancel {color:rgba(0, 0, 0, .47)}
.text_btn .type1 a .price_cancel .text_throught {font-weight:bold}
.text_btn .type1 a:after {display:inline-block;content:'';width:24px;height:24px;position:absolute;top:16px;right:0;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type1 div:after {display:inline-block;content:'';width:24px;height:24px;position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom:auto;right:0;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type1 div {display:table;width:100%;padding:16px 0;cursor:pointer}
.text_btn .type1 div .title {display:table-cell;width:30%;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);vertical-align:middle;box-sizing:border-box}
.text_btn .type1 div .price {display:table-cell;padding-right:24px;text-align:right;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);vertical-align:middle}
.text_btn .type1 div .name {display:block;font-size:18px;color:rgba(0, 0, 0, .87)}
.text_btn .type1 div .date {display:block;font-size:14px;color:rgba(0, 0, 0, .60)}
.text_btn .type1 div .price1 {display:block;font-size:16px;color:rgba(0, 0, 0, .60)}
.text_btn .type1 div .price2 {display:block;font-size:16px;color:rgba(0, 0, 0, .60)}
.text_btn .type1 div .price3 {display:block;font-size:16px;color:rgba(0, 0, 0, .60)}
.text_btn .type1.disabled a .title,
.text_btn .type1.disabled a .price {color:rgba(0, 0, 0, .47)}
.text_btn .type1.disabled a:after {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup05.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type1.disabled div:after {display:inline-block;content:'';width:24px;height:24px;position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom:auto;right:0;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup05.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type1.disabled div .name {color:rgba(0, 0, 0, .47)}
.text_btn .type1.disabled div .date {color:rgba(0, 0, 0, .47)}
.text_btn .type1.disabled div .price1 {color:rgba(0, 0, 0, .47)}
.text_btn .type1.disabled div .price2 {color:rgba(0, 0, 0, .47)}
.text_btn .type1.disabled div .price3 {color:rgba(0, 0, 0, .47)}
/*다크모드 추가 2025.04.11*/
.dark .text_btn .type1 div:after {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(100%) contrast(100%);}
.text_btn .type2 {display:table;width:100%}
.text_btn .type2 a .date {display:block;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60)}
.text_btn .type2 a .date .date_time {position:relative;padding-left:10px}
.text_btn .type2 a .date .date_time:before {display:block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.text_btn .type2 a .price {display:block;font-size:18px;line-height:24px;color:rgba(0, 0, 0, .87)}
.text_btn .type2 a .price.ico:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:5px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type2 a .state {position:absolute;right:0;top:15px;font-size:14px;line-height:20px;border:1px solid rgba(0, 0, 0, .16);border-radius:24px;padding:0 8px}
.text_btn .type2 a .reserv_transfer {color:#7da100} /* 예약이체 */
.text_btn .type2 a .realtime_transfer {color:#01a0c7} /* 즉시이체 */
.text_btn .type2 a .card_pay {color:#7f6ee3} /* 카드대금 결제 */
.text_btn .type2 a .cash {color:#f46600} /* 현금출금 */
.text_btn .type2 a .reserv_transfer_cancel {color:rgba(0, 0, 0, .60)} /* 에약이체 취소 */
.text_btn .type2 a .title {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60)}
.text_btn .type2 .div_checkbox + a {display:table-cell}
.text_btn .type2.disabled a .date,
.text_btn .type2.disabled a .price {color:rgba(0, 0, 0, .47)}
.text_btn .type2.disabled a:after {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type2.disabled a .state {color:rgba(0, 0, 0, .47)}
.text_btn .type2.disabled a .price.ico:after {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup05.png') no-repeat 0 0;background-size:24px 24px}
/* 2025.04.08 화살표 관련 다크모드 추가 */
.dark .text_btn .type2 a .price.ico:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:5px;background:url('https://img1.kbcard.com/home_re/mo/dark/arr/24/arr-1-right.svg') no-repeat 0 0;background-size:24px 24px}
.text_btn .type3 {border-bottom:0;width:100%;display:table}
.text_btn .type3 .acc {width:100%;display:table;border-bottom:1px solid rgba(0, 0, 0, .16)}
.text_btn .type3 .toggle {position:relative;padding:16px 0;cursor:pointer}
.text_btn .type3 .toggle:before {display:inline-block;content:'';width:24px;height:24px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_open.png') no-repeat 0 0;background-size:24px 24px;position:absolute;right:0;top:0;bottom:0;margin-top:auto;margin-bottom:auto}
.text_btn .type3 .toggle.active {border-bottom:0}
.text_btn .type3 .toggle.active:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type3 .toggle.none:before {background:none !important}
.text_btn .type3 .toggle .ing {display:block;font-size:14px;color:#f46600;line-height:21px}
.text_btn .type3 .toggle .end {display:block;font-size:14px;color:rgba(0, 0, 0, .47);line-height:21px}
.text_btn .type3 .toggle .number {display:block;font-size:14px;color:rgba(0, 0, 0, .60);line-height:21px}
.text_btn .type3 .toggle .title {display:table-cell;font-size:18px;color:rgba(0, 0, 0, .87);line-height:24px;padding-right:30px;word-break:break-all;word-wrap:break-word}
.text_btn .type3 .toggle .title .name {display:block;font-size:14px;color:rgba(0, 0, 0, .60)}
.text_btn .type3 .toggle .title .name .date {position:relative;padding-left:10px}
.text_btn .type3 .toggle .title .name .date:before {display:inline-block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.text_btn .type3 .toggle .title .copy {display:block;font-size:18px;color:rgba(0, 0, 0, 87)}
.text_btn .type3 .toggle .title .rate {font-size:14px;color:rgba(0, 0, 0, .60)}
.text_btn .type3 .textBox {max-height:0;overflow:hidden;margin-top:-1px}
.text_btn .type3 .textBox .group {background:#eef1f2;border:1px solid rgba(0, 0, 0, .16);padding:8px 16px 16px;border-radius:0 0 8px 8px;box-sizing:border-box}
.text_btn .type3 .textBox p {font-size:16px;color:rgba(0, 0, 0, .60);line-height:24px;letter-spacing:-0.5px}
.text_btn .type3 .textBox .comment {padding-top:8px;border-top:1px dotted rgba(0, 0, 0, .16);margin-top:8px;font-size:14px;line-height:1.3}
.text_btn .type3 .textBox.block {max-height:100%;display:block !important}
.text_btn .type3.disabled .toggle:before {display:inline-block;content:'';width:24px;height:24px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_open03.png') no-repeat 0 0;background-size:24px 24px;position:absolute;right:0;top:0;bottom:0;margin-top:auto;margin-bottom:auto}
.text_btn .type3.disabled .toggle p {color:rgba(0, 0, 0, .47)}
.text_btn .type3.disabled .toggle p span {color:rgba(0, 0, 0, .47) !important}
.text_btn .type3.disabled .textBox {display:none}
/*답변내 표 ui 추가*/
.tbsType1.small thead th,
.tbsType1.small tbody th,
.tbsType1.small tbody td{padding: 5px 3px; font-size: 14px !important;}
/* radiobox */
.div_radiobox {position:relative;overflow:hidden;display:table-cell;width:24px;height:24px;vertical-align:middle}
.div_radiobox .css_radiobox {width:24px;margin:0;opacity:0;filter:alpha(opacity=0);-webkit-appearance:none}
.div_radiobox .radiobox_label {display:inline-block;width:100%;cursor:pointer}
.div_radiobox .radiobox_label .ico_chk {display:block;position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom:auto;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_radio.png') no-repeat 0 0;width:24px;height:24px;background-size:24px 24px}
.div_radiobox .css_radiobox.active + .radiobox_label .ico_chk {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_radio02.png') no-repeat 0 0;background-size:24px 24px}
.disabled .div_radiobox .radiobox_label .ico_chk {display:block;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_radio03.png') no-repeat 0 0;width:24px;height:24px;background-size:24px 24px;}
.disabled .div_radiobox .css_radiobox.active + .radiobox_label .ico_chk {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_radio04.png') no-repeat 0 0;background-size:24px 24px;}
.div_radiobox .css_radiobox.hidden + .radiobox_label {display:none}
/* checkbox */
.div_checkbox {position:relative;overflow:hidden;display:table-cell;width:24px;height:24px;vertical-align:middle}
.div_checkbox .css_checkbox {width:24px;margin:0;opacity:0;filter:alpha(opacity=0);-webkit-appearance:none}
.div_checkbox .checkbox_label {display:inline-block;width:100%;cursor:pointer}
.div_checkbox .checkbox_label .ico_chk {display:block;position:absolute;top:0;bottom:0;margin-top:auto;margin-bottom:auto;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_check.png') no-repeat 0 0;width:24px;height:24px;background-size:24px 24px}
.div_checkbox .css_checkbox.active + .checkbox_label .ico_chk {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_check02.png') no-repeat 0 0;background-size:24px 24px}
.div_checkbox .css_checkbox.active.disabled + .checkbox_label .ico_chk {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_check02.png') no-repeat 0 0;background-size:24px 24px}
.div_checkbox .css_checkbox.disabled + .checkbox_label .ico_chk {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_check03.png') no-repeat 0 0;background-size:24px 24px}
.div_checkbox .css_checkbox.hidden + .checkbox_label {display:none}
@keyframes check {from {opacity: 0;}to {opacity: 1;}}
/* dim 배경 : 운영중인 공통 헤더로 인해서 z-index 990보다 높게 잡음 */
.bg_dim {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .25);z-index:999} /* (공통)첫번째 레이어 팝업용 딤 */
.loading_dim {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .25);z-index:1001} /* 로딩용 딤 */
.bg_dim2 {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .25);z-index:1003} /* 레이어위에 레이어 팝업2용 딤 */
.bg_dim_alert {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .25);z-index:1100} /* alert 용 딤 */
/* Layer popup */
.popup_layer {position:fixed;top:0;left:0;width:100%;z-index:1000} /* (공통)첫번째 레이어 팝업용 */
.popup_layer.type3 {position:fixed;top:0;left:0;width:100%;z-index:1002} /* 로딩용 */
.popup_layer.type4 {position:fixed;top:0;left:0;width:100%;z-index:1004} /* 레이어위에 레이어 팝업2용 */
.popup_layer.type1 {position:fixed;top:0;left:0;width:100%;z-index:1110} /* alert */
/* 알럿 공통 */
.popup_layer.type1 .pop_box {width:100%;max-width:310px;margin:0 auto;background:#fff}
.popup_layer.type1 .pop_box .tit_img {margin-bottom:24px}
.popup_layer.type1 .pop_box .tit_img img {display:block;width:96px;height:96px;margin:-49px auto 0}
.popup_layer.type1 .pop_box .group {border:1px solid #fff}
.popup_layer.type1 .btn_close {display:none;position:relative;right:5px;top:55px;float:right;width:24px;height:24px;text-indent:-9999px}
.popup_layer.type1 .btn_close:after {display:block;content:'';position:absolute;right:0;top:0;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close04.png') no-repeat;background-size:100%;width:24px;height:24px}
.popup_layer.type1 .pop_box .group .cont_wrap {padding:0 19px;max-height:300px;margin-bottom:32px;overflow-y:auto}
.popup_layer.type1 .pop_box .group .cont {text-align:center;font-size:18px;line-height:24px;color:rgba(0, 0, 0, .87)}
.popup_layer.type1 .pop_box .btn {display:table;width:100%;height:48px;border-top:1px solid rgba(0, 0, 0, .16)}
.popup_layer.type1 .pop_box .btn a {display:table-cell;width:50%;vertical-align:middle;text-align:center;font-size:16px;color:rgba(0, 0, 0, .87);font-weight:bold;position:relative}
.popup_layer.type1 .pop_box .btn .btn_cancel {border-right:1px solid rgba(0, 0, 0, .16)}
.popup_layer.type1 .pop_box .btn .icon_dislike {border-right:1px solid rgba(0, 0, 0, .16);color:#f46600;font-weight:normal}
.popup_layer.type1 .pop_box .btn .icon_like{color:#f46600;font-weight:normal}
.popup_layer.type1 .pop_box .btn .icon_like span:before {left:35px;margin: 0px 8px 0 0}
.popup_layer.type1 .pop_box .btn .icon_dislike span:before {margin-top:0}
.popup_layer.type1 .pop_box {margin:48px auto 0}
/* 팝업 공통 */
.popup_layer.type2 .pop_box {margin:32px 15px;background:#fff;box-sizing:border-box;position:relative}
.popup_layer.type2 .pop_box .group {margin:32px 0}
.popup_layer.type2 .tit {position:relative;border-bottom:2px solid rgba(0, 0, 0, 87);padding:14px 40px 11px;font-size:18px;color:rgba(0, 0, 0, .87);font-weight:bold;text-align:center}
.popup_layer.type2 .btn_close {display:block;position:absolute;right:12px;top:14px;width:24px;height:24px;text-indent:-9999px}
.popup_layer.type2 .btn_close:after {display:block;content:'';position:absolute;right:0;top:0;background:url('https://img1.kbcard.com/home_re/mo/ico/24/ico-2-close.svg') no-repeat;background-size:100%;width:24px;height:24px}
.popup_layer.type2 .cont_wrap {padding:0 16px 24px;overflow-y:auto}
.popup_layer.type2 .top {overflow:hidden;border-bottom:1px solid rgba(0, 0, 0, .16);margin-top:10px}
.popup_layer.type2 .txt_left {float:left;padding-bottom:8px}
.popup_layer.type2 .txt_left .price {font-weight:bold;padding-left:5px}
.popup_layer.type2 .txt_right {float:right;padding-bottom:16px}
.popup_layer.type2 .txt_right2 {float:right;padding-bottom:8px;font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .txt_center {text-align:center}
.popup_layer.type2 .top_title {margin:24px 0 16px}
.popup_layer.type2 .top_title .title {display:block;font-size:20px;font-weight:bold;line-height:28px;color:rgba(0, 0, 0, .87); word-break: break-all;}
.popup_layer.type2 .top_title .title2 {display:block;font-size:16px;font-weight:bold;line-height:24px;color:rgba(0, 0, 0, .87); word-break: break-all;}
.popup_layer.type2 .top_title .date {display:block;font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .top_title .date .time {position:relative;padding-left:10px}
.popup_layer.type2 .top_title .date .time:before {display:inline-block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.popup_layer.type2 .top_title .price {display:block;font-size:18px;font-weight:bold;line-height:24px;color:rgba(0, 0, 0, .87);margin-top:6px; word-break: break-all;}
.popup_layer.type2 .top_title .price .text_bold {font-size:24px;font-weight:bold;line-height:32px;color:rgba(0, 0, 0, .87); word-break: break-all;}
.popup_layer.type2 .icon_more {display:block;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);text-align:center;margin-top:8px}
.popup_layer.type2 .icon_more:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:6px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_more.png') no-repeat 0 0;background-size:24px 24px}
.popup_layer.type2 .confirm_box {position:absolute;width:100%;bottom:0;z-index:100}
.popup_layer.type2 .confirm_box .text {border-top:1px solid rgba(0, 0, 0, .16);background:#efefef;padding:8px 0 8px;font-size:16px;color:rgba(0, 0, 0, .87);text-align:center}
.popup_layer.type2 .btn_orange {display:block;line-height:56px;background:#f46600;font-size:18px;color:#fff;text-align:center}
.popup_layer.type2 .btn_yellow {display:block;line-height:56px;background:#ffcc00;font-size:18px;color:rgba(0, 0, 0, .87);text-align:center}
.popup_layer.type2 .btn_yellow.disabled {opacity:0.4;}
/*팝업 다크모드*/
.dark .popup_layer.type2 .icon_more {color: var(--gray100);}
.dark .popup_layer.type2 .icon_more:after {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(120%) contrast(100%);}
/* 카드선택 */
.popup_layer.type2 .text_banner {margin-top:24px}
.popup_layer.type2 .text_banner li:first-child {margin-top:0}
.popup_layer.type2 .text_banner li.active {border:2px solid #ffcc00}
.popup_layer.type2 .text_banner li {border:1px solid rgba(0, 0, 0, .16);padding:16px 15px;margin-top:8px;box-sizing:border-box;cursor:pointer}
.popup_layer.type2 .text_banner li .card .card_name1 {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87)}
.popup_layer.type2 .text_banner li .card .card_name2 {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60);position:relative;padding-left:10px}
.popup_layer.type2 .text_banner li .card .card_name2:before {display:block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.popup_layer.type2 .text_banner li .info {font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60)}
/* 상세선택, 지점찾기 */
.popup_layer.type2 .text_check li {width:100%;display:table;padding:16px 0;border-bottom:1px solid rgba(0, 0, 0, .16);box-sizing:border-box;position:relative;cursor:pointer}
.popup_layer.type2 .text_check li .title {display:table-cell;/*width:auto;*/padding-right:22px;word-break:break-all;word-wrap:break-word}
.popup_layer.type2 .text_check li .name {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);word-break:break-all;word-wrap:break-word}
.popup_layer.type2 .text_check li .name span {font-size:14px;margin-left:7px}
.popup_layer.type2 .text_check li .date span {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60);position:relative;padding-left:10px;word-break:break-all}
.popup_layer.type2 .text_check li .date span:before {display:block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.popup_layer.type2 .text_check li .date span:first-child {padding-left:0}
.popup_layer.type2 .text_check li .date span:first-child:before {background:none}
.popup_layer.type2 .text_check li .text {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .text_check li .price {display:table-cell;/*width:35%;*/vertical-align:middle;text-align:right}
.popup_layer.type2 .text_check li .price1 {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .87)}
.popup_layer.type2 .text_check li .price1 span {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);font-weight:bold}
.popup_layer.type2 .text_check li .price2 {font-size:12px;line-height:16px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .text_check li .number {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .text_check li .addr {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60)}
/* 다크모드 색상추가 */
.dark .popup_layer.type2 .text_check li .price1 span {color: var(--gray100);}
.dark .popup_layer.type2 .text_check li .price2 {color: var(--gray100);}
/* 예상이자 조회내역, 대출계좌 상세조회, 내역보기 */
.popup_layer.type2 .top + .check_result {margin-top:0}
.popup_layer.type2 .textBox + .check_result {margin-top:0}
.popup_layer.type2 .check_result {margin-top:24px}
.popup_layer.type2 .check_result li {display:table;width:100%;border-bottom:1px solid rgba(0, 0, 0, .16);box-sizing:border-box}
.popup_layer.type2 .check_result li .title {display:table-cell;width:110px;vertical-align:middle;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);padding:16px 14px 14px 0;box-sizing:border-box}
.popup_layer.type2 .check_result li .txt_box {display:table-cell;width:auto;vertical-align:middle;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);padding:16px 0 14px;box-sizing:border-box}
.popup_layer.type2 .check_result li .txt_box span {display:block;cursor:pointer;word-break: break-all}
.popup_layer.type2 .check_result li .txt_box.align_right {text-align: right;}
.popup_layer.type2 .check_result li .txt_box .text_grey {font-size:14px;line-height:21px}
.popup_layer.type2 .textBox {max-height:100%;overflow:hidden}
.popup_layer.type2 .textBox .group {background:#eef1f2;padding:16px;box-sizing:border-box;text-align:center}
.popup_layer.type2 .textBox .title {font-size:18px;color:rgba(0, 0, 0, .87);line-height:1.3;letter-spacing:-1px}
.popup_layer.type2 .textBox .num {padding-top:10px;border-top:1px dotted #d0d0d0;margin-top:10px;font-size:16px;color:rgba(0, 0, 0, .60)}
/* 매출전표 */
.popup_layer.type2 .bg {padding:0 5px;position:relative;z-index:90}
.popup_layer.type2 .bg:before {display:inline-block;content:'';width:8px;height:94%;position:absolute;left:6px;top:25px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_popup.png') repeat-y 0 0;background-size:8px 16px}
.popup_layer.type2 .bg:after {display:inline-block;content:'';width:8px;height:94%;position:absolute;right:6px;top:25px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_popup.png') repeat-y 0 0;background-size:8px 16px}
.popup_layer.type2 .sales_slip {border:1px solid rgba(0, 0, 0, .16);padding:24px 0}
.popup_layer.type2 .sales_slip li:first-child {padding-top:0}
.popup_layer.type2 .sales_slip li.ico .txt_box:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:-1px;vertical-align:middle;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size: 24px 24px}
.popup_layer.type2 .sales_slip li {display:table;width:100%;padding:8px 10px 0;box-sizing:border-box;position:relative}
.popup_layer.type2 .sales_slip li .title {display:table-cell;width:100px;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);padding-right:14px;box-sizing:border-box}
.popup_layer.type2 .sales_slip li .txt_box {display:table-cell;width:auto;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);text-align:right;box-sizing:border-box; word-break: break-all;}
.popup_layer.type2 .sales_slip li .txt_box .time {position:relative;padding-left:10px}
.popup_layer.type2 .sales_slip li .txt_box .time:before {display:inline-block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:5px}
.popup_layer.type2 .sales_slip.two {border-top:0}
.popup_layer.type2 .sales_slip + .btn.text {margin-top:8px}
.popup_layer.type2 .btn.text {display:block;border:1px solid rgba(0, 0, 0, .16);border-radius:5px;text-align:center;margin-top:16px}
.popup_layer.type2 .btn.text span {display:inline-block;line-height:46px;font-size:16px;color:rgba(0, 0, 0, .87)}
/* 입금내역조회 */
.popup_layer.type2 .tab_cont {display:none}
.popup_layer.type2 .tab_cont.active {display:block}
.popup_layer.type2 .tab_cont li.ico .price:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:-1px;vertical-align:middle;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size: 24px 24px}
.popup_layer.type2 .tab_cont li {width:100%;display:table;padding:16px 0;border-bottom:1px solid rgba(0, 0, 0, .16);box-sizing:border-box;position:relative;cursor:pointer}
.popup_layer.type2 .tab_cont li .title {display:table-cell}
.popup_layer.type2 .tab_cont li .name {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87)}
.popup_layer.type2 .tab_cont li .date span {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60);position:relative;padding-left:10px;word-break: normal;word-wrap: break-word}
.popup_layer.type2 .tab_cont li .date span:before {display:block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.popup_layer.type2 .tab_cont li .date span:first-child {padding-left:0}
.popup_layer.type2 .tab_cont li .date span:first-child:before {background:none}
.popup_layer.type2 .tab_cont li .price {display:table-cell;vertical-align:middle;text-align:right;font-size:14px;line-height:21px;color:rgba(0, 0, 0, .87);width:120px}
.popup_layer.type2 .tab_cont li .price span {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);font-weight:bold}
/* 다크모드 추가 2025.04.11*/
.dark .popup_layer.type2 .tab_cont li.ico .price:after {filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(100%) contrast(100%);}
/* 팝업 탭 */
.popup_layer.type2 .tab1:after {display:block;content:'';clear:both}
.popup_layer.type2 .tab1 {border-top:1px solid #efefef;border-bottom:1px solid #efefef}
.popup_layer.type2 .tab1 li {width:50%;float:left}
.popup_layer.type2 .tab1 li a {display:block;line-height:48px;text-align:center;font-size:16px;font-weight:bold;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .tab1 li.active a {font-weight:bold;color:rgba(0, 0, 0, .87);border-bottom:2px solid rgba(0, 0, 0, .87)}
.popup_layer.type2 .tab2:after {display:block;content:'';clear:both}
.popup_layer.type2 .tab2 {text-align:center;margin:24px 0 36px}
.popup_layer.type2 .tab2 li {display:inline-block;padding:0 16px;position:relative}
.popup_layer.type2 .tab2 li a {display:block;line-height:26px;text-align:center;font-size:18px;font-weight:bold;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .tab2 li.active a {font-weight:bold;color:rgba(0, 0, 0, .87);border-bottom:2px solid #ffcc00}
.popup_layer.type2 .tab2 li:before {display:inline-block;content:'|';position:absolute;left:-4px;top:1px;color:#ccc}
.popup_layer.type2 .tab2 li:first-child:before {content:''}
/* 지점찾기 */
.popup_layer.type2 .search {margin:24px;position:relative}
.popup_layer.type2 .search input {border:0;width:100%;border-bottom:2px solid #222;line-height:43px;font-size:18px;color:rgba(0, 0, 0, .87);padding:0 45px 0 0}
.popup_layer.type2 .search .btn_search {width:35px;height:45px;position:absolute;right:0;top:1px}
.popup_layer.type2 .search .btn_search .ico {display:block;width:24px;height:24px;position:relative;top:10px;right:-10px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_search.png') no-repeat 0 0;background-size:24px 24px;text-indent:-9999px}
.popup_layer.type2 .tab_cont .txt_ser {padding:24px 0 8px;font-size:16px;border-bottom:1px solid rgba(0, 0, 0, .16)}
/* 결제예정금액, 입금내역조회 */
.popup_layer.type2 .list_box .title_number {margin:16px 0 8px}
.popup_layer.type2 .list_box ul {border:1px solid rgba(0, 0, 0, .16);padding:16px 0;border-radius:8px}
.popup_layer.type2 .list_box ul li:first-child {padding-top:0}
.popup_layer.type2 .list_box ul li.ico .txt_box:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:-1px;vertical-align:middle;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size: 24px 24px}
.popup_layer.type2 .list_box ul li {display:table;width:100%;padding:8px 16px 0;box-sizing:border-box;position:relative}
.popup_layer.type2 .list_box ul li .title {display:table-cell;width:140px;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);box-sizing:border-box}
.popup_layer.type2 .list_box ul li .txt_box {display:table-cell;width:auto;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);text-align:right;box-sizing:border-box}
/* 대출내역조회 */
.popup_layer.type2 .list_box2 {border:1px solid rgba(0, 0, 0, .16);padding:16px 0;margin-top:24px;border-radius:8px}
.popup_layer.type2 .list_box2 li:first-child {padding-top:0}
.popup_layer.type2 .list_box2 li.ico .txt_box:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:-3px;vertical-align:middle;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size: 24px 24px}
.popup_layer.type2 .list_box2 li {display:table;width:100%;padding:8px 16px 0;box-sizing:border-box;position:relative}
.popup_layer.type2 .list_box2 li .title {display:table-cell;width:100px;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);padding-right:14px;box-sizing:border-box}
.popup_layer.type2 .list_box2 li .txt_box {display:table-cell;width:auto;vertical-align:top;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);text-align:right;box-sizing:border-box}
.popup_layer.type2 .list_box2 li .txt_box .time {position:relative;padding-left:10px}
.popup_layer.type2 .list_box2 li .txt_box .time:before {display:inline-block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:3px}
.popup_layer.type2 .list_box2 .btn.text {margin:8px 16px 0}
/* 안내,유의사항 */
.popup_layer.type2 .info_comment {margin-top:24px}
.popup_layer.type2 .info_comment strong:first-child {margin-top:0}
.popup_layer.type2 .info_comment strong {display:block;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);margin-top:24px}
.popup_layer.type2 .info_comment p {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);margin-top:8px}
.popup_layer.type2 .info_comment ul li {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);margin-top:8px;padding-left:10px}
.popup_layer.type2 .info_comment ul li:before {display:inline-block;content:'';width:3px;height:3px;background:#222;margin:-4px 7px 0 -10px;vertical-align:middle;border-radius:100%}
.popup_layer.type2 .info_comment ul li span {display:block;/*font-size:14px;*/line-height:21px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .info_comment .txt {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60);margin-top:16px;padding-left:15px}
.popup_layer.type2 .info_comment .txt:before {display:inline-block;content:'※';margin:-2px 5px 0 -17px;vertical-align:middle;font-size:12px}
.popup_layer.type2 .info_comment .ico_type:before {display:inline-block;content:'-';margin:-4px 7px 0 -10px;vertical-align:1px;background:transparent}
.popup_layer.type2 .info_comment .formWrapRadio input[type='radio'] { display:none !important; } /* 팝업 내 radio는 숨기고 (absolute 스크롤 오류 방지) label:before 이미지로 라디오버튼 사용 */
.popup_layer.type2 .info_comment .formWrapRadio input[type='radio']+label { margin:3px 10px 6px; }
.popup_layer.type2 .info_comment .bottom_floating_button {display:block;position:absolute;bottom: 0px;left:0;width: 100%;} /* 팝업 내 하단 floating 버튼. -webkit-overflow-scrolling:auto와 사용 */
/* 약관팝업 스타일 모바일홈과 동일하게 재정의 (info_comment 내 type2)
- 기존 팝업 :
테그가 사라져서 inline개체를 block스타일로 처리하여 무조건 줄바꿈하여 문제 발생
- type2팝업 (재정의팝업)은
테그가 사용 가능한 경우이므로 기본속성으로 변경 */
.popup_layer.type2 .info_comment div.type2 {overflow-x:hidden;-webkit-overflow-scrolling:auto !important;} /* 아이폰에서 팝업 스크롤 최하단 아래로 드래그 시 상단 mandatoryCheckButton이 일시적으로 사라지는 현상 수정 */
.popup_layer.type2 .info_comment div.type2 span {display:inline;}
.popup_layer.type2 .info_comment div.type2 strong {display:inline;margin:auto;}
.popup_layer.type2 .info_comment div.type2 ul li {margin: auto;}
.popup_layer.type2 .info_comment div.type2 ul li:before {content : initial;display:inline;}
.popup_layer.type2 .info_comment div.type2 .listType1 > li:before {content:'-' !important;background:transparent !important;margin: -11px 7px 0 0px !important;} /* overflow-x로 인해 listType1 ::before 헤더 잘림현상 margin left값 변경으로 수정 */
.popup_layer.type2 .info_comment div.type2 .listType3 > li:before{margin: auto !important;}
/* 납부자와의 관계, 은행선택 */
.popup_layer.type2 .option {margin-top:24px}
.popup_layer.type2 .option .option_list:after {display:block;content:'';clear:both}
.popup_layer.type2 .option_list {width:100%;display:table;border-right:1px solid rgba(0, 0, 0, .16);border-bottom:1px solid rgba(0, 0, 0, .16)}
.popup_layer.type2 .option_list li {width:50%;float:left;border-top:1px solid rgba(0, 0, 0, .16);border-left:1px solid rgba(0, 0, 0, .16);box-sizing:border-box;display:inherit;padding:0;border-bottom:0}
.popup_layer.type2 .option_list li a {position:relative;display:table-cell;height:64px;padding:9px 0 7px;font-size:16px;color:rgba(0, 0, 0, .87);vertical-align:middle;text-align:center;box-sizing:border-box}
.popup_layer.type2 .option_list li.empty {background:rgba(0, 0, 0, .08)}
/* 2025.04.10 다크모드 추가*/
.dark .popup_layer.type2 .option_list {border-color:var(--gray030);}
.dark .popup_layer.type2 .option_list li a {color:var(--gray070);}
/* 아파트조회 */
.popup_layer.type2 .txt2 {text-align:center;font-size:16px;color:rgba(0, 0, 0, .87);margin:24px 0 16px}
.popup_layer.type2 .exBox {margin:16px 0 8px}
.popup_layer.type2 .exBox .group {background:#eef1f2;padding:16px;margin:0;box-sizing:border-box;text-align:center}
.popup_layer.type2 .exBox .addr {font-size:14px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .exBox span {color:#f46600}
.popup_layer.type2 .acc {width:100%;display:table;border-bottom:1px solid rgba(0, 0, 0, .16)}
.popup_layer.type2 .toggle {position:relative;padding:16px 0;cursor:pointer}
.popup_layer.type2 .toggle:before {display:inline-block;content:'';width:24px;height:24px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_open.png') no-repeat 0 0;background-size:24px 24px;position:absolute;right:0;top:0;bottom:0;margin-top:auto;margin-bottom:auto}
.popup_layer.type2 .toggle.active {border-bottom:0}
.popup_layer.type2 .toggle.active:before {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close.png') no-repeat 0 0;background-size:24px 24px}
.popup_layer.type2 .toggle.none:before {background:none !important}
.popup_layer.type2 .toggle .title {display:table-cell;font-size:18px;color:rgba(0, 0, 0, .87);line-height:24px;padding-right:30px}
.popup_layer.type2 .toggle .title .name {display:block;font-size:14px;color:rgba(0, 0, 0, .60)}
.popup_layer.type2 .textBox {max-height:0;overflow:hidden;margin-top:-1px}
.popup_layer.type2 .textBox .group {background:#eef1f2;border:1px solid rgba(0, 0, 0, .16);padding:16px;margin:0;border-radius:0 0 8px 8px;box-sizing:border-box}
.popup_layer.type2 .textBox p {font-size:16px;color:rgba(0, 0, 0, .60);line-height:1.3}
.popup_layer.type2 .textBox .comment {padding-top:8px;padding-top:8px;border-top:1px dotted #d0d0d0;margin-top:8px}
.popup_layer.type2 .textBox.block {max-height:100%;display:block !important}
.popup_layer.type2 .detailBox .text_check li {padding:0;border-bottom:0}
.popup_layer.type2 .detailBox .textBox p {font-size:14px;text-align:left}
.popup_layer.type2 .detailBox .formArea {margin-bottom:16px}
.popup_layer.type2 .detailBox .formArea span {display:block;width:50%;float:left}
.popup_layer.type2 .detailBox .formArea span .txt01 {display:inline-block;width:75%;border:0;border-bottom:1px solid #d0d0d0;background:transparent}
.popup_layer.type2 .detailBox .formArea span label {display:inline-block;width:25%;font-size:18px;color:rgba(0, 0, 0, .87)}
/* 달력(공통쪽) - 달력선택(단기카드예약이체) */
.calWrap.formArea {overflow:hidden;position:relative}
.calWrap.formArea .group {float:left;width:44%;position:relative}
.calWrap.formArea .group .tit {font-size:14px;color:rgba(0, 0, 0, .60)}
.calWrap.formArea .calendar .inpTxt1 {padding:0;border:0;border-bottom:1px solid rgba(0, 0, 0, .16);z-index:1}
.calWrap.formArea .calendar .inpTxt1 input {padding:9px 25px 7px 0;text-align:left}
.calWrap.formArea .wave {display:block;float:left;width:12%;text-align:center;margin-top:35px}
.calWrap.formArea .calendar .calBtn {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_calendar.png') no-repeat 0 0;background-size:24px 24px;right:0;z-index:2}
/* 달력(공통쪽) - 12개월 리스트 선택(입금내역조회) */
.calWrap .calendar1 .yearBox{padding:0 40px 0 110px}
.calWrap .calendar1 .yearBox input{text-align:center;color:#666}
.calWrap .calendar1 .calBtn{position:absolute;right:15px;top:50%;width:26px;height:26px;background-size:26px;color:transparent}
.calWrap .calBox{position:absolute;left:0;top:0}
.calWrap.formArea .calendar1 .yearBox {padding:0;border:0;border-bottom:1px solid rgba(0, 0, 0, .16);z-index:1}
.calWrap.formArea .calendar1 .yearBox input {padding:9px 25px 7px 0;text-align:left;border:0;border-bottom:1px solid rgba(0, 0, 0, .16);z-index:1;background:#fff;font-size:15px !important}
.calWrap.formArea .calendar1 .calBtn {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_calendar.png') no-repeat 0 0;background-size:24px 24px;right:0;z-index:2}
/* ------------------------------------------------------------ ----------------
*
공통css 로 인해 영향 받고 있는 css충돌 방지 (common.css, talk.css, jquery-ui.css)
* ---------------------------------------------------------------------------- */
/* 현재 실서버 운영중인 공통 common.css 와 충돌 방지 위한 css */
.inputArea .inHead .txtArea textarea {padding:0 30px 0 0 !important;word-break:break-all}
.boxArea input[type='checkbox']+label:before, .boxArea input[type='radio']+label:before {background:0;vertical-align:initial}
.topHead .btnClose {position:fixed !important}
.topHead .btnRefresh {width:24px; top: 16px;left: 16px;z-index: 100;position:fixed !important;}
.topHead .btnRefresh a{
display: block;
width: 24px;
height: 24px;
background: url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_rewind_24_000.png') no-repeat center center;
background-size: 40px;
transform: scaleX(-1);
color: transparent;
line-height: 0;
}
.dark .topHead .btnRefresh a{
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(300%) contrast(100%);
}
.topHead .btnReview {width:28px; left: 47px; top: 12px; z-index: 100;position:fixed !important;}
.topHead .btnReview a{
color: transparent;
display: block;
width: 28px;
height: 28px;
background: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/review_l.svg) no-repeat center center;
background-size: 28px;
}
.dark .topHead .btnReview a{
background: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/review_l_dark.svg) no-repeat center center;
background-size: 28px;
}
.selectList.col2 li:nth-child(even) {border-right: 1px solid #ccc !important;}
/*input[readonly]{background:#fff !important;}*/
.selectList {border-left:1px solid #ccc;}
.selectList li {border-bottom:1px solid rgba(0,0,0,.16);}
/* 유의사항, 안내사항 국민카드 앱에서 소스 그대로 불러오는 소스 충돌 방지 (챗봇 디자인에 없는...) */
.listType1 li:before {content:'-' !important;background:transparent !important;margin:-11px 7px 0 -3px !important}
.listType1 .listDep2 li:before {margin: -27px 5px 0px -8px !important;} /* "-문자열" 형식 깨짐 수정 */
.listType1 .listDep2 li strong {display:inline !important;}
/* HTML 구조 - 01 */
.listType1 .listNum1 li:before {content:unset !important;}
.listType1 .listNum1 li span {display:inline !important;}
/* 장기카드대출 신청 약관 - 개인(신용)정보 수집·이용 및 고유식별정보 처리 동의 */
/* 장기카드대출 신청 약관 - 개인(신용)정보 위탁에 관한 동의 */
ul.ol_num>li:before {display:unset !important;content: '' !important;}
ul.ol_circle>li:before {display:unset !important;content: '' !important;}
.refer.mt10 li:before {content:'-' !important;background:transparent !important;margin:-3px 7px 0 -2px !important}
.listType2 li:before {content: '' !important;width: 3px !important;height: 3px !important;background: #222 !important;margin: 9px 7px 0 2px !important;vertical-align: middle !important;border-radius: 100% !important;}
.depTit3 {margin-top:20px !important}
.popup_layer.type2 .info_comment .container {padding:0 !important;}
.popup_layer.type2 .info_comment .infoBox p {margin-top:0 !important}
.popup_layer.type2 .info_comment .contArea {padding:0 !important;}
.popup_layer.type2 .info_comment .contArea .depTit2 {text-align:center;margin:24px 0 5px;}
/* 현재 실서버 운영중인 공통 talk.css 와 충돌 방지 위한 css */
.header {padding:0}
/* .swiper3 .list .img {background:0 none;position:static;top:0;letter-spacing:0;height:139px} */ /* 2020-04-08 카드 이미지 사이즈 수정 */
.popup_layer.type2 .text_banner li .info {padding:0 !important;border-bottom:0 !important;font-weight:normal}
/* 달력 ui 깨짐으로 인해 해제 css */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
border-top-left-radius: 0 !important;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
border-top-right-radius: 0 !important;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
border-bottom-left-radius: 0 !important;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
border-bottom-right-radius: 0 !important;
}
.ui-widget-content {
border: 0 !important;
background: 0 none !important;
color: #222222;
}
.ui-datepicker {
width: auto !important;
padding: 0 !important;
}
.ui-datepicker .ui-datepicker-header {
padding: 0 !important;
}
.ui-widget-header {
border: 0 !important;
background: #eef1f2 !important;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
top: 0 !important;
width: 50px !important;
height: 50px !important;
}
.ui-datepicker .ui-datepicker-prev {
left: 0 !important;
}
.ui-datepicker .ui-datepicker-next {
right: 0 !important;
}
.ui-datepicker .ui-datepicker-title {
line-height: 50px !important;
}
.ui-datepicker table {
margin: 0 0 .4em;
}
.ui-datepicker th {
padding: 0 !important;
font-weight: normal !important;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
border: 0 !important;
background: 0 !important;
font-weight: normal !important;
color: rgba(0, 0, 0, .87) !important;
}
.ui-datepicker td {
padding: 0 !important;
}
.ui-datepicker td span,
.ui-datepicker td a {
padding: 0 !important;
text-align: center !important;
}
.ui-datepicker-calendar .ui-state-default.ui-state-highlight{background:#eef1f2 !important}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
width: auto !important;
}
.ui-datepicker-title select+select{margin-left:10px !important}
/* 2019-04-16 추가 */
.oper_guide02 { position:absolute; top:30px; left:92px;}
.oper_guide02 .bt_help {border-radius:24px; border:1px solid rgba(0, 0, 0, .16); display:inline-block; background:#fff; padding:0 24px 0 10px; font-size:15px; line-height:24px;}
.oper_guide02 .bt_help:after {content:''; position:absolute; right:0; top:1px; width:24px; height:24px; display:block; background:url("https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_open_right_off.png"); background-size:100%}
.oper_guide02 .help_layer { position:absolute; background:#fff; display:inline-block; border-radius: 8px; padding:11px 14px 8px 14px; top:0px; left:70px; z-index:100; box-shadow:0 2px 0 rgba(0, 0, 0, 0.06); display:none}
.oper_guide02 .help_layer li a { color:rgba(0, 0, 0, .60); font-size:16px; display:inline-block; padding-bottom:6px; line-height:18px; white-space:nowrap; font-size:15px }
.oper_guide02 .help_layer li a .qd_int {font-size:14px }
.oper_guide .accordion.on span.close {display:block; width:40px;height:40px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close02.png') no-repeat;background-size:100%;position:absolute;right:16px;top:10px}
.oper_guide .accordion.on span.close em { font-size:0; line-height:0; position:absolute; width:0; height:0; text-indent:-9999px; overflow:hidden}
/* 2025.04.17 추가 */
.help-msg-layer {position:absolute; bottom:56px; width:100%; height:180px; background:#fff; padding:8px 0px 8px; display:none;}
.help-msg-layer li a:active {background:#ffcc00}
.help-msg-layer li a strong {color:#f46600}
.help-msg-layer li {display:flex; margin:8px 0px 8px 12px;}
.help-msg-layer li a { display:block; text-align:center;font-size:16px; line-height:1.3; color:rgba(0, 0, 0, 0.6); padding:7px 11px;
border:1px solid #b3b3b3; border-radius:24px; margin-left:8px; background-color:#ffffff}
.help-msg-layer li div {font-weight:bold;color:rgba(0,0,0,0.87);margin-left:12px;}
.dark .help-msg-layer li div {color:#ffffff}
.dark .help-msg-layer li a {border: 1px solid #6f6f6f; background-color:rgba(72,75,81,0.4); color: #b7b7b7}
/*2019-04-17 추가 */
.swiper-button-prev,.swiper-button-next {background:#f2f2f2; width:16px; height:100%; top:27px; opacity:0;display:none !important;}
.swiper-button-next { right:0 }
/*2019-04-18 추가 */
/*2024-02-21 btn_keyword_off > btn_plus2 로 변경*/
.recommend_word {display: table-cell; vertical-align: bottom; width:30px; height:40px; padding: 8px 5px 8px 5px; }
.recommend_word a { display:block; width:40px; height:40px; background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_open_24_b.png');
background-repeat: no-repeat; background-position:6px 8px; background-size:25px 25px;text-indent:-9999px; border-right: 2px solid; border-right-color:#f2f2f2;
}
.recommend_word a.on { background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_keyword_on.png');background-repeat: no-repeat; background-position:6px 8px; background-size:25px 25px;text-indent:-9999px}
/*채팅 상담의 경우 가이드 + 버튼 없애기*/
#talkInput .recommend_word a{background-image: null; width: 10px;}
/* shkim.add. 2020.03.03*/
.slide_div.active{display:block;}
.slide_div.fixed{height:280px;}
.slide_div{display:none; position: absolute;bottom:0;width:calc(100% - 32px);padding:16px 16px 20px;background: #fff;box-shadow: 0 0 1px 0 var(--black-20);border-radius:16px 16px 0 0;z-index:999;}
.slide_div .inner_wrap{height:254px;margin:7px -16px -20px; padding:0;overflow-x:hidden; overflow-y:auto;}
.slide_div .inner_wrap + .breadth_btn{position: absolute;bottom:0;left:0;width:100%;padding:8px 16px 12px;margin:0; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);}
.slide_div .top_txt{margin:5px 16px 0;font-size: 1.063rem;letter-spacing: -0.51px;font-weight:500; text-align: center;}
.slide_div .top_txt.point{ color:#0660ff;}
.slide_div .sub_txt{margin-top:4px;font-size: 0.813rem;letter-spacing: -0.39px; text-align: center; color: #afafaf;}
.slide_div.middle{height:320px;z-index:999;}
.slide_div#dictionaryLayer{z-index:999; box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.16);overflow: hidden;}
.slide_div .iframe_area{height: 250px;margin: 32px -16px -20px;-webkit-overflow-scrolling: touch; }
.slide_div .iframe_area iframe{width:100%; height:100%;}
.slide_div.iframe,
.slide_div.long{position: fixed; height: calc(100% - 180px); -webkit-overflow-scrolling: touch;overflow: hidden;}
.slide_div.iframe h4 + .btn_wrap + .iframe_area{margin-top:12px;}
.slide_div.iframe .iframe_area{position:relative; height: calc(100% - 12px); margin:32px -16px 0;-webkit-overflow-scrolling: touch;overflow:auto;}
.slide_div.iframe .iframe{width:100%; height:100%; }
.slide_div.iframe img{width:100%;}
.slide_div.iframe .btn_wrap{position: absolute;top:8px; right:8px;font-size:0; }
.slide_div.iframe .btn_wrap .user_setting{display: inline-block; float:none;margin:0;}
.slide_div.iframe .btn_wrap .btn_slide_close{position: static;margin-left:4px; vertical-align:middle; }
.slide_div.full{height:100%;padding:0; border-radius: 0; }
.slide_div.full .btn_slide_close{top:4px;right:4px;}
/*
.btn_slide_close{position:absolute;top:8px;right:8px;width:40px;height:40px;text-indent:-9999px;background: url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_close.png') no-repeat 50% 50%; background-size:20px 20px;overflow:hidden;transition:all 0.4s;}
.btn_slide_close:focus{background: url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_close_over.png') no-repeat 50% 50%; background-size:20px 20px;transform:rotate(180deg);}
*/
.btn_slide_close{position:absolute;top:8px;right:8px;width:40px;height:40px;text-indent:-9999px;background: url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close02.png') no-repeat 50% 50%; background-size:30px 30px;overflow:hidden;transition:all 0.4s;}
.btn_slide_close:focus{background: url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_close02.png') no-repeat 50% 50%; background-size:30px 30px;transform:rotate(180deg);}
.dim.active,
.dim.invisible.active{display:block;}
.dim{display:none; position: fixed; top: 0; right:-4px; bottom: 0; left: 0;text-indent: -9999px; opacity: 0.4;background-color: #000;z-index:998;overflow-y: hidden;overscroll-behavior: contain;}
.dim.overlap{z-index:998;}
.dim.invisible{display:none; position: fixed;top:0;bottom:0;width:100%;text-indent: -9999px;background-color:transparent;z-index:998 ;}
/* 스크롤바 */
html{
scrollbar-face-color:#ddd;
scrollbar-3dlight-color:#ddd;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#f5f5f5;
scrollbar-darkshadow-color:#ddd;
scrollbar-arrow-color:#ddd;
scrollbar-track-color:#f5f5f5;
}
::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.1);
border-radius: 10px;
background-color: #f4f4f4;
}
::-webkit-scrollbar{
width: 8px;
background-color: #f4f4f4;
}
::-webkit-scrollbar-thumb{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.1);
background-color: #ddd;
}
.dark ::-webkit-scrollbar-track{
background-color: var(--gray010);
}
.dark ::-webkit-scrollbar{
background-color: var(--gray010);
}
.dark ::-webkit-scrollbar-thumb{
background-color: var(--gray020);
}
/************************************************************************************************************************************************************************************/
/************************************************************************************************************************************************************************************/
/********************************************************** 2020 챗봇 고도화 수정 & 추가 css **************************************************************/
/************************************************************************************************************************************************************************************/
/************************************************************************************************************************************************************************************/
.mr0{margin-right:0px !important}
.mr5{margin-right:5px !important}
.mr8{margin-right:8px !important}
.mr16{margin-right:16px !important}
.mr20{margin-right:20px !important}
#wrap{z-index:991;-webkit-overflow-scrolling:touch;}/* popup 시 topHead위로 dim 올리기 위한 처리 */
.dimm_trs{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .0);z-index:999;}
/* 챗봇 메세지 */
/* 2025.04.18 챗봇 메시지 최대길이 제한*/
.txtNode.system {max-width:500px;}
.txtNode.system .first p{word-break:break-all; word-wrap:break-word;}
.txtNode.system .next p{word-break:break-all; word-wrap:break-word;}
.txtNode.system .next span{word-break:break-all; word-wrap:break-word;}
/*챗봇가이드는 제한없이 풀로 노출*/
.txtNode.system.chatGuideWrap {max-width:none;}
/* 메세지 입력 TIP */
.inputArea{box-shadow:0px 0 3px 0 rgba(0,0,0,0.2);}
.msg--tip{position:relative;max-height:125px;overflow:hidden;}
.msg--tip p{font-size:16px;line-height:24px;position:relative;}
.msg--tip .ttl{display:inline-block;margin-left:0;padding-bottom:5px;font-weight:bold;line-height:1;padding-bottom:15px;}
.msg--tip .tip--today{position:absolute;top:-15px;right:-15px;background:#fff;font-size:14px !important; color:rgba(0, 0, 0, .3);padding:17px 18px 10px 5px;text-decoration:underline;}
.msg--tip .txt_acc{position:relative;display:inline-block;top:-3px;padding-left:16px;font-size:11px;color:#f46600;line-height:11px;}
.msg--tip .txt_acc::before{content:'';position:absolute;left:0;top:0;margin-top:-1px;display:block;width:14px;height:16px;background:url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_send.png) 0 0 no-repeat;background-size:16px;}
.inputArea .inBody .msg--tip .list li a{border-radius:100px;}
.inputArea .inBody .msg--tip .list li a:focus{background:#ffcc00;}
@media screen and (max-width:320px){
.msg--tip p{letter-spacing:-1px;}
.inputArea .inBody .list li a{font-size:14px;}
}
/* slideUp iframe popup */
.iframePop{position:fixed;left:0;bottom:0;width:100%;height:calc(100% - 147px);z-index:997;transform:translate3d(0, 1200px, 0);transition:all 300ms ease 0s;background:rgba(255,255,255,1);-webkit-overflow-scrolling:touch;}
.iframePop.open{transform:translate3d(0, 0px, 0);}
.iframePop .tit{position:relative;width:100%;height:57px;border-bottom:1px solid rgba(0,0,0,.16);border-radius:8px 8px 0 0;background:#fff;font-size:18px;font-weight:bold;text-align:center;line-height:57px;}
.iframePop .tit .closeBtn{position:absolute;top:8px;right:8px;width:40px;height:40px;text-indent:-9999px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_pop_down.png') no-repeat 50% 50%;background-size:24px;border:none;color:transparent;overflow:hidden;}
.iframePop .iframeWrap{width:100%;height:calc(100% - 57px);background:#fff;overflow:auto;-webkit-overflow-scrolling:touch;}
.iframePop .iframeWrap iframe{width:100%;height:100%;border:none;-webkit-overflow-scrolling:touch;}
.iframePop .pop_contents{height:calc(100% - 57px);overflow-y:auto;}
.iframePop .cont_wrap{padding: 0 16px 24px;}
.bg_dim_slide{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, .25);z-index:991;}
.bg_dim_slide.active{display:block !important;}
.iframePop.head_hide .tit{position:absolute;top:0;left:0;right:0;border-radius:0;z-index:991;}
.iframePop.head_hide .iframeWrap{height:100%;}
@media screen and (max-width:320px){
.iframePop .iframeWrap iframe{width:1px;min-width:100%;max-width:100%;height:100%;border:none;-webkit-overflow-scrolling:touch;}
.inputArea .inBody .list li a{font-size:14px;}
}
/* slideUp content popup */
.contentPop{position:fixed;left:0;bottom:0;width:100%;height:calc(100% - 50%);z-index:1000;transform:translate3d(0, 1200px, 0);transition:all 300ms ease 0s;background:rgba(255,255,255,1);-webkit-overflow-scrolling:touch;}
.contentPop.height90 {height: calc(100% - 147px);border-radius: 8px 8px 0 0;}
.contentPop.open{transform:translate3d(0, 0px, 0);transition:all 300ms ease 0s;}
.contentPop .tit{position:relative;width:100%;height:57px;border-bottom:1px solid rgba(0,0,0,.16);border-radius:8px 8px 0 0;background:#fff;font-size:18px;font-weight:bold;text-align:center;line-height:57px;}
.contentPop .tit .closeBtn{position:absolute;top:8px;right:8px;width:40px;height:40px;text-indent:-9999px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_pop_down.png') no-repeat 50% 50%;background-size:24px;border:none;color:transparent;overflow:hidden;}
.contentPop .pop_contents{height:calc(100% - 57px);overflow-y:auto;}
.contentPop .cont_wrap{padding: 0 16px 24px;}
.contentPop .bottom-btn {position:fixed;bottom:0;background-color:#ffcc00;height:56px;width: 100%;display:flex;align-items: center;justify-content: center;font-size:18px;line-height:24px;color:rgba(0,0,0,0.87);cursor: pointer;}
.bg_dim.active{display:block !important;z-index:998;}
/* List & swiper */
.swiper1 .list{background:#ffcc00;border-radius:8px;box-shadow:0 2px 0 0 #ebebeb;margin-bottom:2px;width:120px;}
.swiper1 .list img{display:block;max-width:100%}
.swiper1 .list .tit{display:block;background:#fff;padding:8px 0;font-size:16px;line-height:1.3;color:rgba(0, 0, 0, .87);text-align:center;border-radius:0 0 8px 8px;letter-spacing:-2px;}
.swiper1 .swiper-slide .list:before{display:block;content:'';width:120px;height:80px;border-radius:8px 8px 0 0}
.swiper1 .swiper-slide .list.icon_pay:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu01.png') no-repeat 0 0;background-size:120px 80px} /* 요금납부(생활대금 자동납부) */
.swiper1 .swiper-slide .list.icon_lon:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02.png') no-repeat 0 0;background-size:120px 80px} /* 카드대출 */
.swiper1 .swiper-slide .list.icon_wit:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03.png') no-repeat 0 0;background-size:120px 80px} /* 바로출금결제 */
.swiper1 .swiper-slide .list.icon_rec:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04.png') no-repeat 0 0;background-size:120px 80px} /* 카드추천 */
.swiper1 .swiper-slide .list.icon_fin:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu05.png') no-repeat 0 0;background-size:120px 80px} /* 전표찾기*/
.swiper1 .swiper-slide .list.icon_los:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu06.png') no-repeat 0 0;background-size:120px 80px} /* 분실신고 */
.swiper1 .swiper-slide .list.icon_info:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu07.png') no-repeat 0 0;background-size:120px 80px} /* 챗봇소개(추가건) */
.swiper1 .disabled.swiper-slide .list.icon_pay:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu01-1.png') no-repeat 0 0;background-size:120px 80px} /* 요금납부(생활대금 자동납부) */
.swiper1 .disabled.swiper-slide .list.icon_lon:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02-1.png') no-repeat 0 0;background-size:120px 80px} /* 카드대출 */
.swiper1 .disabled.swiper-slide .list.icon_wit:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03-1.png') no-repeat 0 0;background-size:120px 80px} /* 바로출금결제 */
.swiper1 .disabled.swiper-slide .list.icon_rec:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04-1.png') no-repeat 0 0;background-size:120px 80px} /* 카드추천 */
.swiper1 .disabled.swiper-slide .list.icon_fin:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu05-1.png') no-repeat 0 0;background-size:120px 80px} /* 전표찾기 */
.swiper1 .disabled.swiper-slide .list.icon_los:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu06-1.png') no-repeat 0 0;background-size:120px 80px} /* 분실신고 */
.swiper1 .disabled.swiper-slide .list.icon_info:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu07-1.png') no-repeat 0 0;background-size:120px 80px} /* 챗봇소개(추가건) */
/* 신규추가 */
.swiper1 .swiper-slide .list.icon_sch:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu08.png') no-repeat 0 0;background-size:120px 80px} /* 금융스케쥴러 */
.swiper1 .swiper-slide .list.icon_pnt:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu09.png') no-repeat 0 0;background-size:120px 80px} /* 혜택/포인트 */
.swiper1 .swiper-slide .list.icon_cht:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu10.png') no-repeat 0 0;background-size:120px 80px} /* 카드이용기 */
.swiper1 .swiper-slide .list.icon_rec:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03.png') no-repeat 0 0;background-size:120px 80px} /* 카드 대출 */
.swiper1 .swiper-slide .list.icon_svc:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04.png') no-repeat 0 0;background-size:120px 80px} /* 추천 서비스 */
.swiper1 .swiper-slide.disabled .list.icon_sch:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu08-1.png') no-repeat 0 0;background-size:120px 80px} /* 금융스케쥴러 */
.swiper1 .swiper-slide.disabled .list.icon_pnt:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu09-1.png') no-repeat 0 0;background-size:120px 80px} /* 혜택/포인트 */
.swiper1 .swiper-slide.disabled .list.icon_cht:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu10-1.png') no-repeat 0 0;background-size:120px 80px} /* 카드이용기 */
.swiper1 .swiper-slide.disabled .list.icon_rec:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03-1.png') no-repeat 0 0;background-size:120px 80px} /* 카드 대출 */
.swiper1 .swiper-slide.disabled .list.icon_svc:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04-1.png') no-repeat 0 0;background-size:120px 80px} /* 추천 서비스 */
/* 2024.04.01 신규추가 */
.swiper1 .swiper-slide .list.icon_star:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu11.png') no-repeat 0 0;background-size:120px 80px} /* 기본 이미지 */
.swiper1 .swiper-slide .list.icon_pnt2:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu12.png') no-repeat 0 0;background-size:120px 80px} /* 포인트 */
.swiper1 .swiper-slide .list.icon_svc2:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu13.png') no-repeat 0 0;background-size:120px 80px} /* 추천 서비스 */
.swiper1 .swiper-slide.disabled .list.icon_star:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu11-1.png') no-repeat 0 0;background-size:120px 80px}
.swiper1 .swiper-slide.disabled .list.icon_pnt2:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu12-1.png') no-repeat 0 0;background-size:120px 80px}
.swiper1 .swiper-slide.disabled .list.icon_svc2:before{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu13-1.png') no-repeat 0 0;background-size:120px 80px}
.swiper1 .list{background:#ffcc00;border-radius:8px;box-shadow:0 2px 0 0 #ebebeb;margin-bottom:2px;width:112px}
.swiper1 .swiper-slide .list:before{display:block;content:'';width:120px;height:80px;border-radius:8px 8px 0 0}
.swiper1 .swiper-slide div:before{background-size:112px 80px !important}
/* 해외원화승인 - 조회 */
.listArea .text_banner li .text_small{display:block;font-size:14px;line-height:20px;}
.listArea .text_banner li .text_small.text_grey{color:rgba(0, 0, 0, .47);font-size:14px}
.listArea .text_banner li .card .card_name1{font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87)}
.listArea .text_banner li .card .card_name2{font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60);position:relative;padding-left:10px}
.listArea .text_banner li .card .card_name2:before{display:inline-block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.listArea .text_banner li .info--cstm{word-break:break-all;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .6);}
/*다크모드 추가*/
.dark .listArea .text_banner li .text_small.text_grey{color:#fff;}
.dark .listArea .text_banner li .info--cstm{color: #c6cbd0;}
/* 해외원화승인 - 차단해지*/
.listArea .text_btn .type4{width:100%;display:table}
.listArea .text_btn .type4 .acc{width:100%;display:table;}
.listArea .text_btn li.type4 .foregin--list{position:relative;padding:16px 0;cursor:pointer;}
.listArea .text_btn li.type4 .card .card_name1{font-size:18px;line-height:24px;color:rgba(0, 0, 0, .87);word-wrap:break-word;word-break:break-all;}
.listArea .text_btn li.type4 .card .card_name2{position:relative;padding-left:10px;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60);}
.listArea .text_btn li.type4 .card .card_date{position:relative;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60);}
.listArea .text_btn li.type4 .card .card_name2:before{display:inline-block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.listArea .text_btn li.type4 .info{font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60);}
.listArea .text_btn li.type4.disabled .foregin--list *{color:rgba(0, 0, 0, .47);}
/*다크모드 추가*/
.dark .listArea .text_btn li.type4 .card .card_name1{color: #c6cbd0;}
.dark .listArea .text_btn li.type4 .card .card_name2{color: #c6cbd0;}
.dark .listArea .text_btn li.type4 .card .card_date{color: #c6cbd0;}
.dark .listArea .text_btn li.type4.disabled .foregin--list *{color: #666;}
.dark .listArea .text_btn li.type4.disabled .foregin--list .card_name1*{color: #666;}
.dark .listArea .text_btn li.type4.disabled .foregin--list .card_name2*{color: #666;}
.dark .listArea .text_btn li.type4.disabled .foregin--list .card_date*{color: #666;}
/* Liiv */
.text_btn .type5{border-bottom:0;width:100%;display:table}
.text_btn .type5 .text--link{position:relative;padding-right:20px;padding-left:36px;border-bottom:1px solid rgba(0, 0, 0, .16);}
.text_btn .type5 .text--link:after{position:absolute;display:inline-block;content:'';width:24px;height:24px;top:16px;right:0;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type5 .text--link .bul--link{position:absolute;display:inline-block;left:0;top:50%;margin-top:-12px;width:24px;height:24px;border-radius:100%;background:#ffcc00;text-align:center;line-height:24px;}
.text_btn .type5 .text--link .title{word-break:break-all;}
.text_btn .type5.disabled .text--link .bul--link{background:rgba(0, 0, 0, .16);color:rgba(0, 0, 0, .47);}
.text_btn .type5.disabled .text--link:after{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup05.png') no-repeat 0 0;background-size:24px 24px}
.text_btn .type5 .text--link.disabled-bul .bul--link{background:rgba(0, 0, 0, .16);color:rgba(0, 0, 0, .47);}
.text_btn .type5 .text--link.disabled-bul:after{background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup05.png') no-repeat 0 0;background-size:24px 24px}
/*다크모드 */
.dark .text_btn .type5 .text--link:after{filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(120%) contrast(100%);}
.dark .text_btn .type5 .text--link.disabled-bul .bul--link {color: var(--gray040) !important;}
/* Bubble */
.txtNode.system .txt + .txt{clear:both;margin-top:8px;}
/* 금융스케쥴 */
/* 캐러셀타입01 */
.swiper5 .list{background:#fff;border-radius:8px;padding:16px 16px 20px;box-shadow:0 2px 0 0 #ebebeb;margin-bottom:2px;width:192px;text-align:left;flex-direction: column;min-height: 150px;display: flex;}
.swiper5 .list .tit{position:relative;display:block;height:48px;background:#fff;}
.swiper5 .list .tit:before{position:absolute;left:0;top:0;display:block;content:'';width:48px;height:48px;background-size:48px 48px;background-repeat:no-repeat;background-position:0 0;}
.swiper5 .list .tit.icon_bnf:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_01.png');}
.swiper5 .list .tit.icon_arrs:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_02.png');}
.swiper5 .list .tit.icon_stl:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_03.png');}
.swiper5 .list .tit.icon_lmt:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_04.png');}
.swiper5 .list .tit.icon_vld:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_05.png');}
.swiper5 .list .tit.icon_rcmd:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_06.png');}
.swiper5 .list.disabled .tit.icon_bnf:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_01-1.png');}
.swiper5 .list.disabled .tit.icon_arrs:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_02-1.png');}
.swiper5 .list.disabled .tit.icon_stl:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_03-1.png');}
.swiper5 .list.disabled .tit.icon_lmt:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_04-1.png');}
.swiper5 .list.disabled .tit.icon_vld:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_05-1.png');}
.swiper5 .list.disabled .tit.icon_rcmd:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_banking_06-1.png');}
.swiper5 .list .bank--title{color:#f46600;font-size:32px;font-weight:bold;line-height:40px;}
.swiper5 .list .bank--title .text_small{font-size:26px;}
.swiper5 .list .bank--txt{align-items: center;margin-top:12px;padding-bottom: 8px;flex:1;color:rgba(0, 0, 0, .87);}
.swiper5 .list .bank--center{display:flex;align-items: center;margin-top:12px;padding-bottom: 8px;flex:1;color:rgba(0, 0, 0, .87);}
.swiper5 .list.disabled .bank--title{color:rgba(0, 0, 0, .47)}
.swiper5 .list.disabled .bank--txt{color:rgba(0, 0, 0, .47)}
.swiper5 .list.banner .bank--img{display:block;height:88px;margin:0 auto;}
/*
.swiper5 .list.banner .bank--txt{margin-top:14px;height:48px;text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
발화: 금유스케줄러 화면에서 왼쪽 list.icon 박스와 높이를 맞추기 위해 height:48px; 삭제
*/
.swiper5 .list.banner .bank--txt{margin-top:14px;text-align:center;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.swiper5 .list.banner.disabled .bank--img{-webkit-filter:grayscale(100%);filter:gray;}
.swiper5 .list .btn{display:block;padding:12px 0 11px;line-height:24px;background:#6b7079;border-radius:6px;font-size:16px;color:#fff;text-align:center}
.swiper5 .list.disabled .btn{background:rgba(0, 0, 0, .04);color:rgba(0, 0, 0, .47);border-color:rgba(0, 0, 0, .16)}
.dark .bank--txt strong {color:#000;}
/* 이벤트 응모 내역 */
.listArea .event_banner li{display:table;border-bottom:1px solid rgba(0, 0, 0, .16);padding:16px 0;box-sizing:border-box;width:100%}
.listArea .event_banner li > p{display:table-cell;width:auto;vertical-align:top;word-break:break-all;box-sizing:border-box;}
.listArea .event_banner .ttl{padding-right:16px;}
.listArea .event_banner .ttl span{display:block;}
.listArea .event_banner .ttl .event--ttl__01{height:48px;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.listArea .event_banner .ttl .event--ttl__02{margin-top:8px;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .6);}
.listArea .event_banner p.thumb{width:80px;height:80px;line-height:0;}
.listArea .event_banner p.thumb img{width:80px;height:80px;border-radius:4px;}
.listArea .event_banner li.disabled .event--ttl__01{color:rgba(0, 0, 0, .47);}
.listArea .event_banner li.disabled .event--ttl__02{color:rgba(0, 0, 0, .47);}
.listArea .event_banner li.disabled p.thumb img{-webkit-filter:grayscale(100%);filter:gray;}
/* 카드 사이즈 조정 */
.swiper3 .swiper-slide{margin-left:0px;}
.swiper3 .swiper-slide:first-child{padding-left:0px;margin-left:0px;}
.swiper3 .swiper-slide:last-child{padding-left:10px;}
.swiper3 .swiper-slide.swiper-slide-active:last-child{padding-left:28px;}
.swiper3 .list .img{position:relative;background:none;display:inline-block;height:inherit;left:0;top:0;}
.swiper3 .list .img img{display:inline-block;width:200px;max-width:100%;}
.swiper3 + .paging3{top:145px;}
.swiper3 .swiper-wrapper.single .swiper-slide:first-child{margin-left:25px;} /* 쿼리 적용 안되는 단일 카드 위치 보정용 */
.swiper3 .list .card_info p{word-wrap:break-word;} /* 카드이름 길때 잘리는 현상 해결 */
/* 설문조사 */
.swiper3.survey .swiper-slide:last-child{padding-left:0;}
.swiper3.survey .swiper-slide.swiper-slide-active:last-child{margin-right:12px !important;padding-right:0;margin-left:16px !important;}
.swiper1.survey .list{background:#c5a980;}
.swiper3.survey .swiper-slide .img img{border:2px solid #fff;}
.swiper3.survey .swiper-slide.swiper-slide-active .list .img img{border-radius:10px;border:2px solid #ffcc00;}
.swiper3.survey .list .card_info .txt{max-width:100%;padding:8px 0 0;margin:0 auto;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .6);}
.swiper1.survey .swiper-slide .list img{min-height:75px;}
.swiper1.survey .swiper-slide .list:before{display:none;background-repeat:no-repeat;background-position:0 0;}
.swiper1.survey .swiper-slide .list.icon_mal:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02.png');}
.swiper1.survey .swiper-slide .list.icon_fml:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04.png');}
.swiper1.survey .swiper-slide.disabled .list.icon_mal:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02-1.png');}
.swiper1.survey .swiper-slide.disabled .list.icon_fml:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04-1.png');}
.swiper1.survey .swiper-slide .list.icon_age10:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu01.png');}
.swiper1.survey .swiper-slide .list.icon_age20:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02.png');}
.swiper1.survey .swiper-slide .list.icon_age30:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03.png');}
.swiper1.survey .swiper-slide .list.icon_age40:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04.png');}
.swiper1.survey .swiper-slide .list.icon_age50:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu05.png');}
.swiper1.survey .swiper-slide.disabled .list.icon_age10:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu01-1.png');}
.swiper1.survey .swiper-slide.disabled .list.icon_age20:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu02-1.png');}
.swiper1.survey .swiper-slide.disabled .list.icon_age30:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu03-1.png');}
.swiper1.survey .swiper-slide.disabled .list.icon_age40:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu04-1.png');}
.swiper1.survey .swiper-slide.disabled .list.icon_age50:before{background-image:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_menu05-1.png');}
.swiper1.survey .swiper-slide.disabled .list img{-webkit-filter:grayscale(100%);filter:gray;opacity:0.6;}
.formArea textarea.txtara01{height:180px;border:1px solid rgba(0, 0, 0, .16);font-size:14px;}
.formArea textarea.txtara01:focus{border:2px solid #ffd012;z-index:1}
.formArea .txt--lmt{position:absolute;right:15px;bottom:10px;font-size:14px;line-height:20px;color:rgba(0, 0, 0, .6)}
.formArea .txt--lmt span{color:rgba(0, 0, 0, .87)}
/* 결제계좌 잔액조회 */
.txtNode.system .txt .txt_acc{color:rgba(0, 0, 0, .6);font-size:13px;position:relative;padding-left:20px;}
.txtNode.system .txt .txt_acc:before{content:'';position:absolute;left:0;top:50%;margin-top:-7px;display:block;width:14px;height:14px;background:url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_acc01.png) 0 0 no-repeat;background-size:14px;}
.text_btn .type6{padding:16px 0;}
.text_btn .type6 .card_num{/*font-size:21px;*/font-size:16px;font-weight:bold;color:rgba(0, 0, 0, .87);cursor:pointer;}/* 20200625 - 이준 과장님이 21px로 변경 요청 */
.text_btn .type6 .card_num2{font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60);position:relative;padding-left:10px;font-weight:normal;}
.text_btn .type6 .card_num2:before{display:block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.text_btn .type6 .card_num + .bank--price{margin-top:16px;}
.text_btn .type6 .link--detail{padding-bottom:0;margin-bottom:8px;font-size:16px;display:inline-block;border-bottom:1px solid rgba(0, 0, 0, .87);}
.text_btn .type6 .bank--price{width:100%;display:inline-block;font-size:14px;}
.text_btn .type6 .bank--price .title{color:rgba(0, 0, 0, .6)}
.text_btn .type6 .bank--price .price{float:right;max-width:60%;text-align:right;color:rgba(0, 0, 0, .87);word-break:break-all; word-wrap:break-word;}
.text_btn .type6.disabled .card_num{color:rgba(0, 0, 0, .47)}
.text_btn .type6.disabled .card_num2{color:rgba(0, 0, 0, .47)}
.text_btn .type6.disabled .bank--price .title{color:rgba(0, 0, 0, .47)}
.text_btn .type6.disabled .bank--price .price{color:rgba(0, 0, 0, .47)}
/* 결제계좌 연결 카드 리스트 */
/* 카드선택 */
.card_banner {margin-top:24px}
.card_banner li:first-child {margin-top:0}
.card_banner li.active {border:2px solid #ffcc00;}
.card_banner li {border:1px solid rgba(0, 0, 0, .16);padding:16px 15px;margin-top:8px;box-sizing:border-box;cursor:pointer}
.card_banner li .card .card_name1 {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87)}
.card_banner li .card .card_name2 {font-size:14px;line-height:21px;color:rgba(0, 0, 0, .60);position:relative;padding-left:10px}
.card_banner li .card .card_name2:before {display:block;content:'';width:1px;height:10px;background:#c2c2c2;position:absolute;left:3px;top:4px}
.card_banner li .card--info {font-size:14px;line-height:20px;color:rgba(0, 0, 0, .60)}
/* 결제계좌 잔액조회 이용동의*/
.term_check li{border-bottom:1px solid rgba(0, 0, 0, .16);}
.term_check .box--term{display:table-cell;position:relative;width:calc(100% - 24px);padding:16px 0;padding-right:24px;}
.term_check .open_popup{display:table-cell;position:relative;width:calc(100% - 24px);padding:16px 0;padding-right:24px;}
.term_check .open_popup:after{display:inline-block;content:'';width:24px;height:24px;background:url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png) no-repeat 0 0;background-size:24px 24px;position:absolute;right:0;top:0;bottom:0;margin-top:auto;margin-bottom:auto;}
.term_check .disabled{color:rgba(0,0,0,.47)}
.term_check .disabled .open_popup:after{background-image:url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup05.png);}
/* 2025.04.23 이용한도조회변경 ui 수정 */
.text_banner .type7{padding:16px 0;border-right:none;border-left:none;}
.text_banner .type7:first-child{padding-top:8px;border-top:none;}
.text_banner .type7:last-child{border:none;padding-bottom:0;}
.text_banner .type7 .title{width:160px;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .87);vertical-align:middle;box-sizing:border-box; padding-bottom:8px;
font-weight:bold;} /* border-right 속성 2개 추가*/
.text_banner .type7 .limit{width:calc(100% - 78px);line-height:24px;color:rgba(0, 0, 0, .87);vertical-align:middle;box-sizing:border-box;padding-left:20px;} /* padding-left 속성 추가 */
.text_banner .type7 .limit .lmt--price{display:block; width:200px; padding-left:10px;background:url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_bul_01.png)0 10px no-repeat;background-size:5px 5px;font-size:16px;}
.text_banner .type7 .limit .lmt--price + .lmt--price{margin-top:4px;} /* margin-top 8px 에서 3px로 수정 */
.text_banner .type7.disabled .limit .lmt--price{color:rgba(0,0,0,.47);background-image:url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/icon_bul_01-1.png);}
/* vip쿠폰 */
.swiper3.vip .swiper-slide:last-child{padding-left:0;}
.swiper3.vip .swiper-slide.swiper-slide-active:last-child{margin-right:12px !important;padding-right:0;margin-left:16px !important;}
.swiper3.vip .swiper-slide.swiper-slide-active{width:240px;}
.swiper3.vip .swiper-slide .list{width:240px;}
.swiper3.vip .list .card_info{height:80px;}
.swiper3.vip .list .card_info .card_num{margin-top:8px;font-size:16px;line-height:24px;color:rgba(0,0,0,.6)}
.swiper3.vip .list .vip--data{display:none;padding-top:16px;margin-top:12px;border-top:1px dashed #d6d6d6;}
.swiper3.vip .swiper-slide-active .list .vip--data{display:block;}
.swiper3.vip .list .vip--data span{display:table-cell;font-size:14px;text-align:left;line-height:20px;}
.swiper3.vip .list .vip--data .title{width:90px;padding-left:8px;color:rgba(0,0,0,.42)}
.swiper3.vip .list .vip--data .data{width:auto;color:rgba(0,0,0,.87)}
.swiper3.vip .swiper-wrapper.single .swiper-slide .vip--data{display:block;} /* 카드 항목 단일 일때 */
/* 추천키워드 라운드형 스타일 */
.inputArea .inBody .list.capsule li, .inputArea .inBody .list.capsule li a:active{border-radius:100px;}
/* .inputArea .inBody .list.capsule li:active{border-color:transparent;} */
/* 메세지 입력팁 활성시 헤더보다 위로 오게 정리 */
.inputArea{z-index:31;}
/* 화면 로딩바 */
.slideIframeLoading{position:fixed;top:50%;left:50%;margin:-25px 0 0 -25px;display:inline-block;width:50px;height:50px;border:3px solid rgba(0, 0, 0, .15);border-radius:50%;border-top-color:rgba(255, 204, 0, 1);animation:spin 1s ease-in-out infinite;-webkit-animation:spin 1s ease-in-out infinite;z-index:998;}
@keyframes spin{ to{ -webkit-transform:rotate(360deg);} }
@-webkit-keyframes spin{ to{ -webkit-transform:rotate(360deg);} }
/* SNS 공유하기 */
.popCont.shareSnsWrap {overflow:hidden;padding-bottom:0px;}
.shareSns {overflow-x: auto;}
.shareSns::-webkit-scrollbar{height:0px;}
.shareSns .swiper-slide {width:33%;}
.shareSns .swiper-slide:first-child {padding-left:16px}
.shareSns .swiper-slide:last-child {margin-right:-10px !important;padding-right:0}
.shareSns .swiper-slide.swiper-slide-active .checked {animation: check 1s forwards;opacity:0}
.shareSns .swiper-slide.swiper-slide-active .checked .check {animation: check 1s forwards;opacity:0}
.shareSns .swiper-slide.swiper-slide-active .checked.disabled {display:none}
.shareSns .list {position:relative;width:100%;overflow:hidden}
.shareSns .list .img {width:220px;padding-top:12px}
.shareSns .list .img img {display:block;max-width:100%}
.shareSns .list .img_horizon img {}
.shareSns .list .img_vertical img {transform:rotate(270deg);-webkit-transform: rotate(270deg);width:139px;height:220px;position: absolute;top: -29px; left: 42px;}
.shareSns .list .img .img01 {display:block}
.shareSns .list .img .img02 {display:none}
.shareSns .list .img.disabled .img01 {display:none}
.shareSns .list .img.disabled .img02 {display:block}
.shareSns .list .card_info {margin-top:24px}
.shareSns .list .card_info p {font-size:18px;line-height:24px;color:rgba(0, 0, 0, .87)}
.shareSns .list .card_info ul {margin-top:8px}
.shareSns .list .card_info ul li {font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60)}
.shareSns .list .checked {width:43px;height:44px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_check.png') no-repeat 0 0;background-size:43px 44px;position:absolute;left:90px;top:61px}
.shareSns .list .checked .check {width:17.5px;height:12.5px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/bg_select.png') no-repeat 0 0;background-size:17.5px 12.5px;position:absolute;left:12px;top:13px;text-indent:-9999px}
.shareSns .list .checked.disabled {display:none}
.shareSns {padding:0px 6px 24px;text-align:center}
.shareSns h2{margin-bottom:16px;font-size:1.000rem;line-height:1.500em;text-align:center}
.shareSns .list a{overflow:hidden;display:block;position:relative;width:72px;height:24px;padding:56px 0 8px;background-repeat:no-repeat;background-position:50% 8px;background-size:40px;font-size:16px;line-height:24px}
.shareSns .list a:after{content:'';position:absolute;bottom:0;left:0;height:8px;width:100%;}
.shareSns .facebook a{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/40/app_facebook_40.png')}
.shareSns .kakao a{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/40/app_kakaotalk_40.png')}
.shareSns .band a{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/40/app_band_40.png')}
.shareSns .line a{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/40/app_line_40.png')}
.shareSns .sms a{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/40/app_sms_40.png')}
.shareSns .email a{background-image:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/40/app_email_40.png')}
.shareSns .snsMore a{position:relative;background:none}
.shareSns .snsMore a:after{content:'';position:absolute;top:8px;left:50%;width:40px;height:40px;margin-left:-20px;-webkit-border-radius:20px;border-radius:50%;background:#7f6ee3 url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_more_24_fff.png') no-repeat center;background-size:24px}
.shareSns .urlCopy input{display:none}
.shareSns .urlCopy button{display:block;width:72px;padding:56px 0 8px;background:url('https://img1.kbcard.com/LT/cxh/kbcard_img/common/app/40/ico_sms_40.png') no-repeat 50% 8px;background-size:40px;font-size:16px;line-height:24px}
.popCont.snsShare3, .popCont.snsShare3 li a:after{background-color:#fff}
.comeUp .popCont.snsShare3{padding:16px 12px 24px;}
/* iframe popup용 얼럿 유형 추가 */
.popup_layer.type1 .pop_box.noImg{margin:0 auto;}
.popup_layer.type1 .pop_box.noImg .group .cont_wrap{padding-top:32px;}
/* tooltip box 문구 */
/* 2025.04.17 추가 */
.tooltipbox_comment .tooltip_title {font-weight:bold;font-size: 17px;padding-bottom: 9px;}
.tooltipbox_comment .tooltip_contents {background-color:inherit;}
.tooltipbox_comment .font_red {color:red;font-size: 13px;}
.tooltipbox_comment .font_blue {font-weight:bold;color:#0065cb;}
.tooltipbox_comment .font_italic {font-weight:bold;font-style:italic;color:#2c426b;}
.tooltipbox_comment .font_small {font-size: 13px;}
.PT_INP_04 .txt .depTit3 {margin:17px auto 10px 5px !important;} /* PT_BUB_04 목록 타이틀 */
[id^=sl].layerWrap.comeUp .popCont ul { border-left-color:white; } /* commonJs.select 타입의 스타일 깨짐 수정 */
.cardBox .cardTxt .info_card{ display:inline-block; font-size:0.875rem;line-height:24px; color:rgba(0, 0, 0, .6)} /* .cardBox .cardTxt .info 와 .info 충돌로 복사 */
/* 2025.04.10 다크모드 추가*/
.dark .cardBox .cardTxt .info_card{color:var(--gray070);}
.tagSet{display: flex;position: absolute;left:20px;top:20px;z-index: 2;}
.tagSet * + *{margin-left: 4px;}
.tagSet .tag{display: inline-block;padding:0 5px;background: #333;color: #fff;border-radius: 4px;font-size: 12px;}
/* 별점선택 팝업 관련 - start */
.popup_layer.noBorder .pop_box .group{border:0}
.popup_layer .titleWrap{margin: 15px; font-size: 16px;}
.popup_layer .message{font-size: 13px;color: #666;line-height: 1.4em;margin-top: 15px;}
.popup_layer .btn_cancel.gray{background: #eee;}
.popup_layer .btn_confirm.yellow{background: #fc0;}
.popup_layer .starRating{margin-top:10px}
.starRating{display: flex;flex-direction: row-reverse;justify-content: center;}
.starRating > input{display: none;}
.starRating label{font-size: 0 !important;}
.starRating input[type='radio']+label:before{content: '';display: inline-block;background: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/img_rating02.png) no-repeat 0 0;margin: 0;background-size: 120px 40px;width: 40px;height: 40px;}
.starRating input[type='radio']:checked ~ label::before{background-position-x: -40px;}
/* 별점선택 팝업 관련 - end */
/* 비밀번호 요청 팝업 관련 - start */
/* 20211206. 미사용으로 주석처리 20211206
.popup_layer .head{border-top:4px solid #ffcf00;padding: 15px;font-size: 18px;font-weight: 600;border-bottom: 1px solid #e5e5e5;}
.popup_layer .cont_wrap{padding: 0 !important;}
.popup_layer .pop_box{position: relative;}
.popup_layer .btnWrap{margin-bottom: 20px;}
.popup_layer .btn_close2{position: absolute;right: 10px;top:18px;}
.cardPassInput{display: flex;justify-content: center;align-items: center;letter-spacing: 2px;font-size: 10px;margin: 20px;}
.cardPassInput > input{display: inline-block;width: 55px;height: 36px;border-radius: 4px;margin: 0 2px;}
.cardPassInput > button{height: 36px;margin-left: 5px;background: #f3f3f3;border:1px solid #c2c2c2;padding: 0 10px;font-size: 12px;border-radius: 4px;}
.btnWrap{display: flex;justify-content: center;}
.btn_roundSolid{display: inline-block;height: 38px;line-height: 38px;padding: 0 10px;background: #e8eaef;font-size: 12px;border-radius: 4px;}
.btn_close2{display: inline-block;width: 24px;height: 24px;background: url(https://img1.kbcard.com/LT/cxh/kbcard_img/common/ico/basic/24/ico_close_24_000.png) no-repeat center;background-size: 24px;border: none;color: transparent;text-indent: -10000px;}
*/
/* 비밀번호 요청 팝업 관련 - end */
/* 카드비밀번호 입력 관련 - start */
.cardPassInputSet{border: 1px solid #dfdfdf}
.cardPassInputSet > .cardSelect{background-color:transparent;background:url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/arrowDown.png) no-repeat right 25px center;background-size: 8px auto;width: 100%;text-align: left;border-bottom: 1px solid #dfdfdf;padding: 15px;}
.cardPassInputSet .passWrap{display: flex;}
.cardPassInputSet .passWrap strong{display: flex;border-right:1px solid #dfdfdf;font-size: 16px;min-width:135px;padding: 15px;box-sizing: border-box;font-weight: 500}
.cardPassInputSet .passWrap input{border:0;padding: 15px !important;height:54px}
.cardPassInputSet + .btn{margin-top: 15px;}
/* 카드비밀번호 입력 관련2- end */
/*도난분실해제 카드정보 입력 관련 start*/
.field-mmyy{display: flex;align-items: center;}
.field-mmyy > input{width: 60px;}
.field-mmyy > input::placeholder{font-size:16px}
.PT_INP_07 .field-mmyy > input{width: 37px;}
.PT_INP_07 .field-mmyy > input[name='cardValidityMM'] {margin-right:1px}
.PT_INP_07 .field-mmyy > input[name='cardValidityYY'] {padding-left: 9px;text-align: center;}
.PT_INP_07 .field-mmyy > input[name='cardValidityYY']::placeholder {text-align:left;}
/*도난분실해제 카드정보 입력 관련 end*/
/* 채팅상담 추가 : s */
.old-line {position:relative;margin-bottom:16px;text-align:center;}
.old-line span {display:inline-block;padding:0 16px;background:#f2f2f2;color:rgba(0, 0, 0, .6);}
.old-line:after {content:'';position:absolute;top:50%;left:16px;right:16px;z-index:-1;height:1px;background:rgba(0,0,0,.16);}
.standby {overflow:hidden;margin-top:24px;font-size:16px;}
.standby__li {float:left;position:relative;width:50%;padding-left:40px;box-sizing:border-box;}
.standby__li:first-child {padding-left:36px;}
.standby__li:before {content:'';position:absolute;top:50%;left:4px;width:32px;height:32px;margin-top:-16px;opacity:.6;}
.standby__li:first-child:before{left:0}
.standby__li + .standby__li:after {content:'';position:absolute;top:0;left:-3px;width:1px;height:100%;background:#ccc;}
.standby__li--people:before {background:url('https://img1.kbcard.com/home_re/mo/ico/24/ico-1-mykb.svg') no-repeat center;background-size:32px;}
.standby__li--time:before {background:url('https://img1.kbcard.com/home_re/mo/ico/24/ico-1-time.svg') no-repeat center;background-size:28px;}
.standby__tit {font-size:13px;color:#666;}
.standby__val {margin-top:2px;font-weight:bold;}
/* 채팅상담 추가 : e */
/* 다크모드 */
.dark body,
.dark #contents.contents,
.dark .popup_layer.type1 .pop_box,
.dark .oper_guide .panel,
.dark .contentPop .tit,
.dark .contentPop {
background-color: var(--gray005);
}
.dark .inputArea .inBody,
.dark .text_btn .type3 .textBox .group {
background-color: var(--gray010);
}
.dark .oper_guide02 .help_layer {
background-color: var(--gray020);
}
.dark #contents.contents::-webkit-scrollbar-thumb {
background-color: var(--gray040);
}
.dark #contents.contents::-webkit-scrollbar,
.dark #contents.contents::-webkit-scrollbar-track,
.dark .swiper2 .btn,
.dark .txtNode .loading,
.dark .msg--tip .tip--today {
background: none;
}
.dark .text_underline { text-decoration: underline;}
.dark .text_underline.disabled {
background: none !important;
}
.dark .cont_list,
.dark .text_btn .type5.disabled .text--link .bul--link,
.dark .text_btn .type5 .text--link.disabled-bul .bul--link,
.dark .swiper2 .btn.disabled,
.dark .swiper4 .swiper-slide.disabled .list,
.dark .boxArea .swiper_cont,
.dark .card_banner li,
.dark .boxArea .btn_ashgrey.disabled {
background: none;
box-shadow: none;
border: 1px solid var(--gray030);
}
.dark .swiper4 .list {
box-shadow: none;
}
.dark .txtNode.system .txt,
.dark .swiper1 .list .tit,
.dark .chatBox .line_date .date {
background: var(--gray030);
box-shadow: none;
}
.dark .text_btn .type5 .text--link,
.dark .inputArea .inBody .list li,
.dark .text_btn li,
.dark .text_banner .type7 .title,
.dark .listArea .text_banner li,
.dark .listArea .event_banner li,
.dark .listArea .check_result li,
.dark .text_btn .type3 .acc {
border-color: var(--gray030);
}
/*2025.04.02 border none 제거*/
.dark .popup_layer.type1 .pop_box .group {
/*border: none;*/
border: 1px solid black;
}
.dark .swiper2 .btn {
border-color: var(--yellow020);
color: var(--yellow020);
}
.dark .swiper1 .list .tit,
.dark .oper_guide02 .help_layer li a,
.dark .text_btn .type6 .card_num,
.dark .text_btn .type1 a .title,
.dark .listArea .event_banner .ttl .event--ttl__01,
.dark .listArea .text_banner li .card .card_name1,
.dark .text_btn .type1 div .title,
.dark .text_btn .type1 div .price,
.dark .text_btn .type1 div .name,
.dark .text_btn .type2 a .price,
.dark .text_btn .type3 .toggle .title,
.dark .text_btn .type3 .toggle .title .copy,
.dark .text_underline,
.dark .text_underline:hover,
.dark .text_underline:focus,
.dark .text_underline:active,
.dark .swiper3 .list .card_info p,
.dark .card_banner li .card .card_name1 {
color: var(--gray090);
}
.dark .bot.chatbot,
.dark .txtNode .txt,
.dark .text_grey,
.dark .text_darkgrey,
.dark .listArea .icon_more,
.dark .listArea ul li.disabled .title,
.dark .listArea ul li.disabled .txt_box,
.dark .swiper1 .disabled.swiper-slide .list .tit,
.dark .swiper2 .btn.disabled,
.dark .inputArea .inBody .list li a,
.dark .msg--tip .tip--today,
.dark .txtNode .time,
.dark .popup_layer.type1 .pop_box .group .cont,
.dark .text_btn .type6 .bank--price .title,
.dark .text_btn .type6 .bank--price .price,
.dark .text_banner .type7 .title,
.dark .text_banner .type7 .limit,
.dark .text_btn .type1 a .price,
.dark .listArea .event_banner .ttl .event--ttl__02,
.dark .swiper3.survey .list .card_info .txt,
.dark .formArea .txt--lmt,
.dark .formArea .txt--lmt span,
.dark .txtNode.system .txt .txt_acc,
.dark .text_btn .type6 .card_num2,
.dark .text_btn .type6 .link--detail,
.dark .text_underline,
.dark .listArea .check_result li .title,
.dark .listArea .check_result li .txt_box,
.dark .listArea .text_banner li .card .card_name2,
.dark .listArea .text_banner li .info,
.dark .listArea .text_banner li .date,
.dark .text_btn .type1 div .date,
.dark .text_btn .type1 div .price1,
.dark .text_btn .type1 div .price2,
.dark .text_btn .type1 div .price3,
.dark .text_btn .type2 a .date,
.dark .text_btn .type2 a .title,
.dark .text_btn .type3 .toggle .number,
.dark .text_btn .type3 .textBox p,
.dark .swiper3 .list .card_info ul li,
.dark .card_banner li .card--info,
.dark .text_banner p {
color: var(--gray070);
}
.dark .text_banner .type7 .limit .lmt--price span {
color: var(--gray070) !important;
}
.dark .text_btn .type1 a .price_cancel {
color: var(--gray060);
}
.dark .swiper4 .swiper-slide.disabled .tit,
.dark .swiper4 .swiper-slide.disabled .date,
.dark .boxArea .btn_ashgrey.disabled,
.dark .listArea .event_banner li.disabled .event--ttl__01,
.dark .listArea .event_banner li.disabled .event--ttl__02,
.dark .term_check .disabled,
.dark .text_btn .type6.disabled .card_num,
.dark .text_btn .type6.disabled .card_num2,
.dark .text_btn .type6.disabled .bank--price .title,
.dark .text_btn .type6.disabled .bank--price .price,
.dark .text_throught,
.dark .text_underline.disabled,
.dark .text_btn .type3.disabled .toggle p {
color: var(--gray040);
}
.dark .text_btn .type5.disabled .text--link .bul--link {
color: var(--gray040) !important;
}
/* 2025.04.23 사용자발화 다크모드 수정*/
.dark .oper_guide02 .bt_help,
.dark .inputArea .inHead .txtArea textarea {
color: var(--gray000);
}
.dark .txtNode.user .txt {
/*background: var(--gray030);*/
background: var(--gray080);
color: black;
}
.dark .txtNode.system .first:before {
filter: brightness(30%);
}
.dark .swiper1 .list,
.dark .txtNode .txt,
.dark .infoBox.shadow {
box-shadow: none;
}
.dark .idCard_img img,
.dark .header .btn_info .ico {
border-radius: .5rem;
}
.dark .inputArea .inHead {
background: var(--gray005);
}
.dark .recommend_word a {
border-color: var(--gray060);
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(100%) contrast(100%);
}
.dark .inputArea .inHead .btn_send .ico {
background: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_send.png) no-repeat;
background-size: 100%;
}
.dark .inputArea .inHead .btn_send .ico.active {
background: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_send_off.png) no-repeat;
background-size: 100%;
}
.dark .help-msg-layer {
background: var(--gray010);
}
.dark #header {
background-color: var(--gray005);
}
.dark .text_btn .type1 a:after,
.dark .contentPop .tit .closeBtn,
.dark .text_btn .type3 .toggle:before {
filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(100%) contrast(100%);
}
.dark .boxArea input[type='checkbox']+label:before,
.dark .boxArea input[type='radio']+label:before {
vertical-align: middle;
}
/* 다크모드 오류 수정
.dark .div_radiobox .radiobox_label .ico_chk {
background-image: none;
}
.dark .div_radiobox .css_radiobox.active + .radiobox_label .ico_chk {
background-image: url(https://img1.kbcard.com/home_re/mo/ico/24/ico-radio-on.svg) !important;
}
*/
/* 다크모드일때 배경색, 타이틀 및 내용 컬러 - jms 추가*/
.dark .popup_layer.type2 .pop_box {background: var(--gray010);}
.dark .popup_layer.type2 .tit {color: var(--gray100);}
.dark .popup_layer.type2 .info_comment strong {color: var(--gray080)}
.dark .popup_layer.type2 .info_comment ul li {color: var(--gray060);}
.dark .popup_layer.type2 .info_comment p {color: var(--gray070)}
.dark .popup_layer.type2 .info_comment ul li span {color: var(--gray060);}
.dark .agreeGrade ul li {border-color: var(--gray010);}
.dark .popup_layer.type2 .btn_close:after{filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(286deg) brightness(250%) contrast(100%);}
/* 2024 다크모드 추가 start */
.dark .popup_layer.type2 .pop_contents .title2,
.dark .popup_layer.type2 .pop_contents .price,
.dark .popup_layer.type2 .pop_contents .name,
.dark .popup_layer.type2 .pop_contents .date span {
color: var(--gray100);
}
.dark .popup_layer.type2 .pop_contents li { border-color: var(--gray030); }
.dark .popup_layer.type2 .pop_contents .title,
.dark .popup_layer.type2 .pop_contents .text_bold,
.dark .popup_layer.type2 .pop_contents .txt_box {
color: var(--gray090);
}
.dark .popup_layer.type2 .group { border: 1px solid var(--gray040); }
.dark .popup_layer.type2 .tit { border-bottom-color: var(--gray030); }
.dark .popup_layer.type2 .sales_slip { border-color: var(--gray030); }
.dark .popup_layer.type2 .bg:before,
.dark .popup_layer.type2 .bg:after {
background:url('');
}
/* 2024 다크모드 추가 end */
/* 팝업 검색 공통 - jms 추가*/
.checkUi{position: relative;display: flex}
.checkUi > input + span{position: relative;padding-left: 40px;line-height: 1.4em;}
.checkUi > input + span:before{position: absolute;left:0;content: '';display: inline-block;width: 24px;height: 24px;margin-right: 8px;background: url(https://img1.kbcard.com/cxh/ia_img/common/bg_form.png) no-repeat 0 0;background-size: 60px 300px;vertical-align: middle;}
.checkUi > input + span > em{font-size: 17px; font-weight: bold;}
.checkUi > input + span::before{top: 50%;transform: translateY(-50%);}
.checkUi > input[type = 'checkbox'] + span:before{background-position-y: 0;}
.checkUi > input[type = 'checkbox']:checked + span:before{background-position-y: -30px;}
.checkUi > input[type = 'checkbox']:disabled + span:before{background-position-x: -30px;}
.checkUi > input[type = 'radio'] + span:before{background-position-y: -90px;}
.checkUi > input[type = 'radio']:checked + span:before{background-position-y: -120px;}
.checkUi > input[type = 'radio']:disabled + span:before{background-position-x: -30px;}
.checkGroup + .btn{margin-top: 15px;}
.checkGroup > ul > li{position: relative;display: flex;align-items: center;border-bottom: 1px solid rgba(0, 0, 0, .16);padding: 15px 0;}
.checkGroup .rightArrow{display: inline-block;content: '';width: 24px;height: 24px;background: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_popup02.png) no-repeat 0 0;background-size: 24px 24px;text-indent: -10000px;margin-left: auto;justify-self: flex-end;}
.checkGroup .icon_more {display:block;font-size:16px;line-height:24px;color:rgba(0, 0, 0, .60);text-align:center;margin:6px 0 0}
.checkGroup .icon_more:after {display:inline-block;content:'';width:24px;height:24px;position:relative;top:6px;background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_more.png') no-repeat 0 0;background-size:24px 24px}
.checkGroup .icon_more.disabled {color:rgba(0, 0, 0, .47)}
.checkGroup .icon_more.disabled:after {background:url('https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/btn_more02.png') no-repeat 0 0;background-size:24px 24px}
.checkGroup + .btn {margin-top:12px}
/* 다크모드 추가 2025.04.11 */
.dark .checkGroup > ul > li {border-bottom : 1px solid var(--gray030);}
/* 발화 아이콘 추가 */
.chatBubbleIcon {background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_07.png);width: 52px;height: 52px;background-size: 100%;margin-left: 15px;}
/* 2025.03 이용내역조회 드랍다운 추가 */
.dropdown-container{width:308px;display:flex;/*gap:15px;*/padding:12px 0 0 16px;/*background-color:#f5f5f5;*/flex-wrap:wrap;}
.custom-dropdown{position:relative;width:96px;margin-right:10px;}
/*선택된값표시영역*/
.dropdown-selected {box-sizing:border-box;width:100%;padding:7px 11px 7px 16px;border:1px solid #b3b3b3;border-radius:24px;background-color:white;font-size:16px;color:rgba(0,0,0,0.6);cursor:pointer;display:flex;justify-content:space-between;align-items:center;
line-height:1.3;}
.dropdown-selected::after {content:"▼";font-size:11px;color:rgba(0,0,0,0.6);padding-left:4px;}
.dropdown-selected.disabled::after {color: rgba(0, 0, 0, .47);}
.dropdown-action {/*width:96px;*/box-sizing:border-box;padding:7px 16px;border:1px solid #b3b3b3;border-radius:24px;background-color:white;font-size:16px;color:rgba(0,0,0,0.6);cursor:pointer;display:flex;justify-content:space-between;align-items:center;
margin-top:8px;line-height:1.3;}
.dropdown-action a {width:100%;text-align:center;color:rgba(0,0,0,0.6);}
/*드롭다운메뉴*/
.dropdown-menu {position:absolute;top:100%;left:0;width:100%;border:1px solid #ccc;border-radius:18px;background-color:white;box-shadow:0 2px 0 0 #ebebeb;display:none;z-index:10;max-height:200px;overflow-y:auto;
box-sizing:border-box;}
.custom-dropdown.open .dropdown-menu{display:block;}
.dropdown-item {padding:10px 15px;font-size:15px;color:rgba(0,0,0,0.6);cursor:pointer;line-height:1.3;}
.dropdown-item:hover{background-color:#f0f0f0;}
.dropdown-selected.disabled,
.dropdown-menu.disabled,
.dropdown-action.disabled{
background: rgba(0, 0, 0, .04);
color: rgba(0, 0, 0, .47);
border-color: rgba(0, 0, 0, .16);
}
.dropdown-action.disabled a{
color: rgba(0, 0, 0, .47);
}
.dark .dropdown-selected {background: rgba(72,75,81,0.4);border: 1px solid #6f6f6f;color: #b7b7b7; }
.dark .dropdown-selected::after {color:#b7b7b7;}
.dark .dropdown-action {background: rgba(72,75,81,0.4); border: 1px solid #6f6f6f;}
.dark .dropdown-action a {color: var(--gray070);}
.dark .custom-dropdown.open .dropdown-menu {border:1px solid #797979;box-shadow:none;background-color:#2d2f34;}
.dark .dropdown-item { background: rgba(72,75,81,0.4);color: var(--gray070); }
/* 챗봇 시스템 답변 시 아이콘 추가*/
.chatbotIcon {width: 52px;height: 52px;background: no-repeat 0 0;background-size: 100%; margin: 8px 0 0 8px;border-radius:8px;flex-shrink: 0;}
/*스타프렌즈 7종중 1종 랜덤노출 */
.chatbotIcon.icon1{ background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_01.png);}
.chatbotIcon.icon2{ background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_02.png);}
.chatbotIcon.icon3{ background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_03.png);}
.chatbotIcon.icon4{ background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_04.png);}
.chatbotIcon.icon5{ background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_05.png);}
.chatbotIcon.icon6{ background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_06.png);}
.chatbotIcon.icon7{ background-image: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/starfriends_07.png);}
/* 챗봇답변영역 추가*/
.bot.chatbot {padding-top:1px;}
/* 챗봇 헤더 닫기버튼 */
.topHead .btnClose a {background: url(https://img1.kbcard.com/cxo/images/mtalk/chatbot/images/ico_close_24_000.png) no-repeat center center;
background-size: 40px;}
/* 챗봇 폰트 사이즈 */
.fs13 {font-size:13px;}