@charset "utf-8";

/******************** reset ********************/
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select, tbody { margin: 0; padding: 0; }
/*body, input, textarea, select, button, table { font-family: 'sans-serif'; font-size: 14px; -webkit-font-smoothing: subpixel-antialiased; }
inputbox 크기 조정
*/
body, input, textarea, select, button, table {font-family: 'KBFGText', 'sans-serif';font-size: 16px !important;-webkit-font-smoothing: subpixel-antialiased; color: black;}
table { border-spacing: 0; border-collapse: collapse; }
img, fieldset { border: 0; }
ul, ol { list-style: none; }
em, address { font-style: normal; }
a, a:hover, a:active, a:focus { color: #444; text-decoration: none; }

/* 다크모드 추가 2025.04.11 */
.dark a, .dark a:hover, .dark a:active, .dark a:focus { color: var(--gray070); text-decoration: none; }
.dark a.btnL{color:var(--gray000)}

hr, legend, .blind { visibility: hidden; overflow: hidden; position: absolute; top: 0; left: -9999px; }
caption { visibility: hidden; overflow: hidden; width:0;height: 0; font-size: 0; line-height: 0; }
input[type="text"] { width: 100%; height: auto; line-height: 20px; padding: 15px 17px; font-family: inherit; border: 1px solid #ddd; border-radius: 0; outline-style: none;	-webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
textarea { width: 100%; border: 1px solid #ddd; border-radius: 0; padding: 15px 17px; font-family: inherit; line-height: 20px; resize: none; width: 100%; background-color: #fff; outline-style: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type="checkbox"] { background-color:#666; -webkit-appearance:checkbox; outline-style: none; }
button { border: none; cursor: pointer; }

/******************** layout ********************/
.wrap { position: relative; }
.content { border-bottom: 1px solid #ddd; }
.footer { background: #3c3c3c; }

/******************** content ********************/
/** header **/
.header { position: relative; background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/header_top_bg.png) no-repeat; background-size: auto 40px; background-color: #ffcc00; font-weight: bold; color: #333; padding: 12px; line-height: 20px; }
.header h1 { display: block; text-align: center; font-size: 18px; }
.header .btn-minimize { display: block; position: absolute; top: 8px; right: 60px; width: 30px; height: 30px; background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/btn_minimize.png) no-repeat 2px 20px; background-size: 25px 4px; }
.header .btn-close { display: block; position: absolute; width: 20px; height: 20px; top: 14px; right: 20px;  background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/popup_close.png) no-repeat; background-size: 20px 20px; text-indent: -9999px; }
.header .btn-end { display: block; position: absolute; width: 20px; height: 20px; top: 14px; right: 20px;  background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/popup_close.png) no-repeat; background-size: 20px 20px; text-indent: -9999px; }
.textHide { text-indent: -999px; width: 0; height: 0; line-height: 0; overflow: hidden; }

/** info **/
.info { position: relative; padding: 20px 10px; border-bottom: 1px solid #ddd; font-weight: bold; background-color: #fff;}
.img { position: absolute; display: block; top: 8px; left: 10px; width: 45px; height: 45px; background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/counselor_img.png) no-repeat;  background-size: 45px 45px; }
.info h2 { display: inline-block; font-size: 16px; margin-left: 50px; }
.info a { float: right; margin: -7px 2px 0 0; font-size: 13px; color: #fff; }
.info a:nth-child(2) { margin-right: 0; }


/* chat area */
.chat-scroll { height: 100%; background-color: #f1f0ef; overflow-y: scroll; }
.chat-area { padding: 20px 10px 10px 10px; }
.date-bar { display: block; text-align: center; font-size: 14px; font-family: ngb; background-color: #ddd; padding: 8px 0; }
.chat-list { font-size: 14px; }
.chat-list li { position: relative; margin-top: 12px; }
.chat-list li:first-child { margin-top: 0px;}
.chat-list li:after { display: block; clear: both; content: ''; }
.chat-list .message { position: relative; display: inline-block; max-width: 60%; padding: 12px; border-radius: 6px; line-height: 18px; }
.chat-list .counselor .message { float: left; margin-left: 10px; background-color: #fff; border: 1px solid #bbb; color: #626262; }
.chat-list .customer .message {  float: right; margin-right: 10px; background-color: #ffcc00; color: #333; }
.chat-list .arrow { display: block; position: absolute; top: 15px; width: 11px; height: 11px;  }
.chat-list .counselor .arrow { left: 0; background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/speechBubbleBg_Left.png) no-repeat; background-size: 11px 11px; }
.chat-list .customer .arrow { right: 0; background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/speechBubbleBg_Right.png) no-repeat; background-size: 11px 11px; }
.chat-list .message .chatdateCounselor { position: absolute; display: block; font-size: 12px; color: #999; bottom: 3px; right: -60px }
.chat-list .message .chatdateCustomer  { position: absolute; display: block; font-size: 12px; color: #999; bottom: 3px; left: -60px }

.chat-list .message .sp { display: inline; }
.chat-list .message-text { word-break: break-all; }

.chat-list .systemMessage { display: block; width: 100%; line-height: 20px; text-align: center; margin: 30px 0; color: #333; font-family: ngb; }
.chat-list .systemMessage .chatdateSystem  { display: block; font-size: 12px; color: #777; padding-top: 3px; text-align: center; font-family: ng; }
.chat-list .systemMessage:last-child { margin-top: 0; }

.chat-list .notice { position: relative; display: block; width: 100%; border-radius: 6px; padding: 15px 0px 15px 0px; line-height: 18px; text-align: left; background-color: #FFFFFF; }
.chat-list .notice .noticeMessage { font-size: 12px; color: #767676; }

/* chat text area */
.input_box { position: relative; display: block; width: 100%; height: 40px; border-top: 1px solid #ddd; }
.text_area { padding-right: 80px; height: 35px; }
.text_area textarea { display: block; border-style: none; -webkit-box-sizing: border-box; box-sizing: border-box; resize: none; width: 100%; height: 40px; padding: 10px; line-height: 18px; }


/******************** layer-popup ********************/
.dimmed { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; width: 100%; height: 100%; background: #000; opacity: 0.4; filter: alpha(opacity=40); }
.layer-wrap { position: absolute; top: 20%; left: 5%; z-index: 1100; width: 90%;  background: #fff; display: block; border-top: 4px solid #ffcc02; }
.layer-wrap.v2 { height: 106px; margin-top: -53px; }
.layer-wrap.v3 { height: 164px; margin-top: -82px; }
.layer-wrap h1 { position: relative; font-size: 16px; font-family: ngb; border-bottom: 2px solid #ddd; padding: 15px; letter-spacing: -1.5px;  }
.layer-wrap h2 { padding-bottom: 20px; font-family: ngb; font-size: 16px; color: #333; text-align: center; letter-spacing: -1px; line-height: 22px; }
.layer-content { padding: 15px; }

.layer-wrap.v3 .layer-content { padding: 20px 0; }
.layer-content .text-area { padding: 30px; letter-spacing: -1px;} 
.layer-content .noti p { text-align: center; }
.layer-content .noti p.bold { font-size: 14px; font-family: ngb; padding-bottom: 15px; }
.layer-content .noti p.text { line-height: 20px; }
.layer-content .conbox { width: 250px; margin: 0 auto; text-align: left; padding-bottom: 20px; }
.layer-content .conbox li { padding-bottom: 20px; line-height: 22px; }
.layer-content .conbox .title { display: block; width: 250px; font-size: 15px; font-family: ngb; padding-bottom: 5px;}

.layer-content label { margin: 0 0 0 3px; font-weight: normal; font-size: 12px; margin-right: 10px; }
.layer-content label:first-child { margin-left: 0; }
.layer-content input[type="radio"] { margin-right: 2px; vertical-align: middle; }

.layer-content .layerBtn { display: block; padding-top: 15px; text-align: center; font-family: ngb; }
.layer-content .btn-yes { display: inline-block; background-color: #ffcc00; padding: 7px 17px; border-radius: 5px; }
.layer-content .btn-no { display: inline-block; background-color: #e8eaef; padding: 7px 17px; border-radius: 5px; }

/* shortForm */
.shortForm { position: fixed; left: 0; top: 0; right: 0; bottom: 0; width: 100%; background: #f7f7f7; overflow: scroll; }
.shortForm button { display: block; position: absolute; width: 18px; height: 17px; top: 23px; right: 15px;  background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/popup_close.png) no-repeat; background-size: 17px 17px; text-indent: -9999px; }
.shortForm .shortFormCon { padding: 15px 0; background-color: #f7f7f7; }
.shortForm .container { margin-right: auto; margin-left: auto; padding-right: 10px; padding-left: 10px; }
.shortForm .container h2 { font-size: 16px; }
.shortForm .box { padding-top: 10px; }
.shortForm .clause { height: 70%; }
.shortForm .ClauseDetail { height: 90%; font-size: 14px; padding: 17px 17px; line-height: 1.5; background-color: #fff; margin-top: 15px; color: #5b5b5b; overflow-y: scroll; }
.shortForm .group { display: table; width: 100%; }
.shortForm .form { width: 100%; height: auto; padding: .9em .6em; }
.shortForm .inputList li { position: relative; margin-top: -1px; }
.shortForm .inputList li:first-child { margin-top: 0; }
.shortForm .inputList label, .inputList .label { position: absolute; top: 50%; left: 17px; height: 40px; margin-top: -20px; line-height: 40px; font-size: 1em; color: #a9a9a9; }
.shortForm .inputList .alR { text-align:right; }
.shortForm .inputList .alL { text-align:left; }
.shortForm .inputList input.inpLine:focus { border: 1px solid #ffcc00; }
.shortForm .inputList textarea.inpLine:focus { border: 1px solid #ffcc00; }
.shortForm .consentBox { padding: 15px 0 15px 17px; background: #fff; border: 1px solid #ddd; margin-top: 20px; }
.shortForm .consentBox input.chk { display: block; position: absolute; width: 25px; height: 25px; border: 1px solid #9b9b9b; background: none; -webkit-appearance: none; border-radius: 50%; outline-style: none;  }
.shortForm .consentBox input.chk:checked { border-color: #7081bc; background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/btn_checkbox01.png) no-repeat center; background-size: 14px auto; -webkit-appearance:none; }
.shortForm .consentBox a { display: block; height: auto; line-height: 20px; margin: 0; padding: 0 30px 0 0; background: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/new_arrow_right2.png) no-repeat right center; background-size: auto 12px; }
.shortForm .consentBox .labelWrap { display: table; width: 100%; }
.shortForm .consentBox .labelWrap .label { height: 50px; padding-left: 36px; color: #666; vertical-align: middle; }
.shortForm .consentBox .labelWrap .label .flag { color: #6f81c0; font-size: 1em; }
.shortForm .shortFormBtn { display: block; padding-top: 20px; text-align: center; font-weight: bold; }
.shortForm .shortFormBtn .btn-yes { display: block; background-color: #ffcc00; color: #333; box-sizing: border-box; padding: 15px 0; opacity: 0.5;filter: alpha(opacity=50); }
.shortForm .shortFormBtn .btn-yes-on { display: block; background-color: #ffcc00; color: #333; box-sizing: border-box; padding: 15px 0; }
.shortForm .shortFormBtn .btn-no { display: inline-block; background-color: #e8eaef; padding: 10px 30px; border-radius: 5px; font-size: 16px;  }

/* btn */
.input_box .text_area a.btnSand { position: absolute; display: inline-block; width: 80px; height: 40px; background-color: #ffcc00; text-align: center; top: 0; right: 0; color: #333; font-weight: bold; font-size: 14px; line-height: 40px;  vertical-align: middle; }
.input_box .text_area a.btnSandNo { position: absolute; display: inline-block; width: 80px; height: 40px; background-color: #dddddd; text-align: center; top: 0; right: 0; color: #333; font-family: ngb; font-size: 14px; line-height: 40px; vertical-align: middle; }

.btnbrown { display: block; background-color: #79746f; padding: 8px 15px;  border-radius: 5px; }

.text-decoration-underline { text-decoration: underline; }
.text_area_dimmed { position: absolute; left: 3px; bottom: 3px; width: 77.2%; height: 35px; background: #f5f5f5; opacity: 0.6; filter: alpha(opacity=60); }

/* Satisfaction  */
.layerPopupSatisfaction  { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; width: 300px; height: 196px; z-index: 1200; display: block; background: #fff; border-top: 4px solid #ffcc02; }
.layerPopupSatisfaction .layerContent { padding: 30px; text-align: center; }
.layerPopupSatisfaction .layerContent p.bold { font-size: 16px; font-weight: bold; padding-bottom: 15px; }
.layerPopupSatisfaction .layerContent .star { padding-top: 10px; }
.layerPopupSatisfaction .layerContent .star li { display: inline-block;  }
.layerPopupSatisfaction .layerContent .star li > a:hover { display: block; width: 30px; height: 30px; background-image: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/icon_star_on.png); background-size: 30px 30px; text-indent:-10000px; }
.layerPopupSatisfaction .layerContent .star .starOn { display: block; width: 30px; height: 30px; background-image: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/icon_star_on.png); background-size: 30px 30px; text-indent:-10000px; }
.layerPopupSatisfaction .layerContent .star .starOff { display: block; width: 30px; height: 30px; background-image: url(https://img1.kbcard.com/LT/cxh/images/mblhome/sub/mtalk/icon_star.png); background-size: 30px 30px; text-indent:-10000px;}
.layerConBtn { display: block; padding-top: 20px; text-align: center; font-weight: bold; font-size: 13px; }
.layerConBtn .btn-yes { display: inline-block; background-color: #ffcc00; padding: 10px 20px; border-radius: 5px; }