html { overscroll-behavior : contain; }
/*UX/UI 개선사항 적용*/
.chat_service_wrap .head { background: #152a8b; color: #fff; position: relative; height: 38px; padding: .4rem 1rem; z-index: 1; }
.chat_service_wrap .head .tit_left ul { float:left; margin-left:0.4rem; display:block; top:0; }
.chat_service_wrap .head .tit_left li {display: inline-block; border: 2px solid #4354a2; font-size: 13px; border-radius: 30px; padding: 0 6px; height: 25px; line-height: 21px;background: #28348a;}
@media(hover:hover){
.chat_service_wrap .head .tit_left li:hover{background: #3a6de8;}
}
.chat_service_wrap .head a:focus{outline:#ddb92d dotted 3px; }
.chat_service_wrap .head .title_right img {width: 15px; }
.chat_service_wrap .head .tit_right{border: 1px solid #8096bf; border-radius: 50px; height: 22px; width: 22px; text-align: center;}
.chat_service_wrap .head .title_right li{ line-height: 16px; border: 1px solid #6d8199; background: #2e3e9d; border-radius: 50px; text-align: center; height: 22px; width: 22px; vertical-align: middle; display: inline-block; margin-left: 0.2rem;}
@media(hover:hover){
.chat_service_wrap .head .title_right li:hover{background: #3a6de8; border: 1px solid #3a6de8;}
}
.before_wrap{margin-bottom: 2px; position: relative;}
.p_m{cursor: pointer; text-align: right; background: #fff; margin-top: 0px; width: 30px; height: 30px; right: 0; position: absolute; z-index: 999; border: 1px solid #d0d0d0; border-radius: 0 10px; -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.08); text-align: center; line-height: 34px; font-size: 18px; font-weight: 600;}
.o_c{height: 23px; margin-bottom: 8px; background: #737373; color: #fff; font-weight: 600; border-radius: 0 0 10px 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; text-align: center; -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08); font-size:13px; margin-top: -5px; line-height: 28px;cursor: pointer;}
.lang_area{position: absolute; left: 470px; top: 27px; z-index: 1; width: 420px; }
.lang_area .lang_c{ width: 50px; height: 25px; padding: 0 5px; line-height: 19px; border: 2px solid #8e8e8e; border-radius: 30px; text-align: left; right: 0; position: absolute; background: url(../../../images/gcc/cbot/lang_arr2.png) right 9px no-repeat; background-position-x: 28px; background-size: 9px; padding-left: 5px; font-size: 16px; color: #152a8b; background-color: #fff; font-weight: 600;cursor: pointer;}
.lang_area button:focus{outline-style:dashed; outline-width:2px;}
.lang_f{ width:22px; height:15px; margin:3px 5px}
.lang_box{position: absolute; top: 32px; right: 0; border: 1px solid #c6d6fc; width: 125px; z-index: 3; border-radius: 6px; vertical-align: middle; background: #152a8b; box-shadow: 0 4px 5px 0 #c6d6fc; display:none}
.lang_box li{ border-bottom:1px solid #4b5ba6; line-height:25px; text-align:center; display: inline-block; width: 100%;}
.lang_box li:last-child{ border-bottom:none; padding-bottom:5px}
.lang_box ul:before{position: relative; display: block; content: ""; width: 10px; height: 6px; background: url(../../../images/ips/cmmn/lang_box.png) no-repeat; transform: translate(-50%,0px); left: 50%; top: -6px; }
.lang_box li a{ display: block; float:left; width: 50%;}
.lang_box .end{font-size: 20px; position: absolute; right: 23px; top: 18px;}
.lang_box .on{ background:#326DF5 }
.lang_box a:focus{outline:#ddb92d dotted 3px !important; }
.butt-send{color: #507dfa; font-size: 25px; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); position: relative;display: block;}
/*질문+공지 롤링*/
.noti_sroll{background: #f5f5f5; border-bottom: 1px solid #d7d7d7; color: #474747; padding: 0 15px; font-size: 13px; height: 30px; line-height: 30px;position: relative; overflow: hidden;}
.noti_sroll .list{position: relative; font-size: 13px; overflow:hidden; height:30px; vertical-align:top; width: calc( 100% - 100px);}
.noti_sroll .butt{ position: absolute; right: 20px; top: 1px; }
.noti_sroll .butt button{ display:inline-block; width:auto; height:auto; }
.noti_sroll .butt button i{display:block; position:relative; font-size: 17px; }
.gubun_q{background: #2c2c2c; color: #fff; border-radius: 20px; padding: 1px 5px;}
.gubun_n{background: #cb3900; color: #fff; border-radius: 20px; padding: 1px 5px;}
/*
.noti_sroll_more{position: absolute;z-index: 9;background:rgba(0,0,0,0.7);border: 4px solid #000;top: 0;width: 100%;height: 100%;bottom: 0;left: 0;text-align: center;color: #fff;font-size: 12px;}
*/
.noti_sroll_more{position: absolute;z-index: 9;background:rgba(0,0,0,0.7);border: 4px solid #000;top: 0;width: 100%;height: 100%;bottom: 0;left: 0;text-align: center;font-size: 12px;}
/*
.noti_sroll_more:before{ content:""; display:inline-block; height:100%; vertical-align:middle;}
*/
.noti_sroll_more:before{ content:""; display:inline-block; vertical-align:middle;}
.noti_sroll_more .close {z-index: 9;text-align: center;background: #FFF;color: #000;border-radius: 50%;height: 70px;width: 70px;position: absolute;bottom: 7px;left: calc(42%);line-height: 35px;font-size: 50px;top:50%;}
.layer_pop_con{z-index:333; background:#fff;display: inline-block; width: 96%; padding: 20px; border-radius: 12px; text-align: left; position: relative; /* top: 205px; */}
.noti_con{ overflow-y: auto; font-size:14px }
.noti_con .list-box_f{background: #f9fbff; border: 1px solid #bbb; border-radius: 5px; padding: 0 10px; margin: 0 0 10px 0; vertical-align: top;}
.noti_con .list-box{background: #f9fbff; border: 1px solid #bbb; border-radius: 5px; padding: 10px 0 0 10px; margin: 0 0 10px 0; vertical-align: top;}
.noti_con .list-box_f li, .noti_con .list-box li{ line-height: 20px; padding: 2px 0; width: calc(99% / 2); display:inline-block; vertical-align: top;}
.noti_con .list-box_f li a, .noti_con .list-box li a { position: relative; line-height: 19px; color: #555;}
.noti_con .list-box_f li a span:before, .noti_con .list-box li a span:before { content: ""; display: inline-block; width: 3px; height: 3px; background: #555; top: 8px; position: absolute; border-radius: 50%; left: 0;}
.noti_con .list-box_f li a span, .noti_con .list-box li a span { margin: 0 5px 0 10px; vertical-align: top; }
.noti_con .list-box_f li i, .noti_con .list-box li i{font-size: 19px; vertical-align: middle; color:#6e81b1}
.noti_con .tit{background: #fff; border: 1px solid #bbb; border-radius: 30px; text-align: center; color: #333; font-size: 15px; height: 25px; line-height: 25px; width: 60%; margin: 0 auto; position: relative; top: 10px;}
.his_chat li{background: #fff; border: 1px solid #bbb; border-radius: 30px; height: 26px;line-height: 26px; vertical-align: middle; display: inline-block; padding: 0 10px; text-align: center; margin: 0 2px 4px 0; color: #333;}
.his_chat .on{ background:#f6f9ff; color:#0f44c3; border:1px solid #0f44c3}
@media(hover:hover){
.his_chat li:hover{ background:#f6f9ff; color:#0f44c3; border:1px solid #0f44c3}
}
.view_tit{ background: #0f44c3; color: #fff; min-height: 30px; padding: 6px 0; border-radius: 10px; text-align: center; margin-bottom: 10px; word-break: keep-all;font-size: 14px;}
.view_txt{color: #555;}
.view_h1{color: #000; font-weight: 600; font-size: 16px; margin-bottom: 10px;}
.noti_con dl{ text-align:center}
.noti_con dd{display: inline-block; color: #555; margin-bottom:10px; min-width:13%; padding:0 10px; vertical-align:top}
.noti_con dd input[type="radio"]{line-height:18px; height:18px }
.noti_con dd label, .noti_con dd span{display:block; }
.noti_con textarea{width: 100%; padding: 10px; color:#555}
.noti_con button{background: #263284; padding: 0 20px; height: 35px; line-height: 35px;font-size: 15px;color: white;}
/* 도움말 */
.help_con .help_tit{ background:#f2f2f2; color:#333; width: 40px; text-align: left; font-weight: 600; display:inline-block}
.help_con .help_sample{margin: 0 auto; text-align: center !important;}
.help_con .help_sample img{ border: 2px solid #ddd; width: 434px; box-sizing: border-box;margin-bottom: 10px;}
.help_con .help li{ padding: 5px 0; vertical-align: top; border-bottom: 1px solid #eee; text-align:left }
.help_con .help .help_top{display: inline-block; border: 2px solid #4354a2; font-size: 13px; border-radius: 30px; padding: 0 6px; height: 25px; line-height: 21px; background: #28348a; color: #fff; text-align: center !important;}
.help_con .help li span:last-child{width: 90%; display: inline-block; vertical-align: middle;}
.help_con .help i{font-size: 20px;}
.help_con .help_num{border-radius: 30px; text-align: center; background: #000; color: #fff; width: 20px; height: 20px; display: inline-block; line-height: 20px; font-weight: 600; margin-right: 10px; vertical-align: top !important;}
/* 분야선택 */
.fld_layer_pop_con{z-index:333; background:#fff;display: inline-block; width: 96%; padding: 20px; border-radius: 12px; text-align: left; position: relative; height: calc( 90% - 27px);}
.fld_con{ overflow-y: auto; font-size:13px }
.fld_con .list-box_f{background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 4px 0 2px 10px; margin: 0 5px 0px 0; vertical-align: top;}
.fld_con .list-box{background: #fff; border: 1px solid #bbb; border-radius: 5px; padding: 11px 0 0 10px; margin: -6px 5px 0px 0; vertical-align: top;}
.fld_con .list-box_f li, .fld_con .list-box li{ line-height: 15px; width: calc(97% / 2); display:inline-block; vertical-align: top;}
.fld_con .list-box_f li a, .fld_con .list-box li a { position: relative; color: #555;}
.fld_con .list-box_f li a span:before, .fld_con .list-box li a span:before { content: ""; display: inline-block; width: 3px; height: 3px; background: #555; top: 7px; position: absolute; border-radius: 50%; left: 3px;}
.fld_con .list-box_f li a span, .fld_con .list-box li a span { margin: 0 1px 0 10px; vertical-align: top; }
.fld_con .list-box_f li i, .fld_con .list-box li i{font-size: 15px;color:#326DF5}
.fld_con .tit{background: whitesmoke; border: 1px solid #bbb; border-radius: 30px; text-align: center; color: #333; font-size: 14px; height: 23px; line-height: 21px; width: 35%; margin: 0 auto; position: relative; top: 5px; margin-bottom: 3px}
/* 도움말 */
.help_layer_pop_con{z-index:333; background:#fff;display: inline-block; width: 96%; padding: 20px; border-radius: 12px; text-align: left; position: relative; height: calc( 90% - 27px);}
.help_con{ overflow-y: auto; font-size:14px }
.help_con .list-box_f{background: #f9fbff; border: 1px solid #bbb; border-radius: 5px; padding: 0 10px; margin: 0 5px 0px 0; vertical-align: top;}
.help_con .list-box{background: #f9fbff; border: 1px solid #bbb; border-radius: 5px; padding: 10px 0 0 10px; margin: 0 5px 0px 0; vertical-align: top;}
.help_con .list-box_f li, .help_con .list-box li{ line-height: 20px; padding: 2px 0; width: calc(97% / 2); display:inline-block; vertical-align: top;}
.help_con .list-box_f li a, .help_con .list-box li a { position: relative; line-height: 19px; color: #555;}
.help_con .list-box_f li a span:before, .help_con .list-box li a span:before { content: ""; display: inline-block; width: 3px; height: 3px; background: #555; top: 8px; position: absolute; border-radius: 50%; left: 0;}
.help_con .list-box_f li a span, .help_con .list-box li a span { margin: 0 5px 0 10px; vertical-align: top; }
.help_con .list-box_f li i, .help_con .list-box li i{font-size: 19px; vertical-align: middle; color:#6e81b1}
.help_con .tit{background: #fff; border: 1px solid #bbb; border-radius: 30px; text-align: center; color: #333; font-size: 15px; height: 25px; line-height: 25px; width: 60%; margin: 0 auto; position: relative; top: 10px;}
/* 상담챗봇 */
.cs_layer_pop_con{z-index:333; background:#fff;display: inline-block; width: 96%; padding: 20px; border-radius: 12px; text-align: left; position: relative;}
.cs_con{ overflow-y: auto; font-size:14px;}
.cs_con .list-box_f{background: #f9fbff; border: 1px solid #bbb; border-radius: 5px; padding: 0 10px; margin: 0 5px 0px 0; vertical-align: top;}
.cs_con .list-box{background: #f9fbff; border: 1px solid #bbb; border-radius: 5px; padding: 10px 0 0 10px; margin: 0 5px 0px 0; vertical-align: top;}
.cs_con .list-box_f li, .cs_con .list-box li{ line-height: 20px; padding: 2px 0; width: calc(97% / 2); display:inline-block; vertical-align: top;}
.cs_con .list-box_f li a, .cs_con .list-box li a { position: relative; line-height: 19px; color: #555;}
.cs_con .list-box_f li a span:before, .cs_con .list-box li a span:before { content: ""; display: inline-block; width: 3px; height: 3px; background: #555; top: 8px; position: absolute; border-radius: 50%; left: 0;}
.cs_con .list-box_f li a span, .cs_con .list-box li a span { margin: 0 5px 0 10px; vertical-align: top; }
.cs_con .list-box_f li i, .cs_con .list-box li i{font-size: 19px; vertical-align: middle; color:#6e81b1}
.cs_con .tit{background: #fff; border: 1px solid #bbb; border-radius: 30px; text-align: center; color: #333; font-size: 15px; height: 25px; line-height: 25px; width: 60%; margin: 0 auto; position: relative; top: 10px;}
/*글자크기 설정*/
.font-size_con{ text-align:center}
.font-size_con .tit{font-size:14px; background: #0f44c3; color: #fff; height: 30px; padding: 6px 0; border-radius: 10px; text-align: center; margin-bottom: 10px;}
.font-size_con li{background: #f2f2f2; border-radius: 50%; color: #000; font-weight: 600; text-align: center; display: inline-block; vertical-align: middle; margin: 1px;}
.fontSize{cursor: pointer;}
.font-size_con .on {background: #0f44c3; color: #fff;}
@media(hover:hover){
.font-size_con li:hover{background: #0f44c3; color: #fff;}
}
.font-size_con li:first-child{width: 50px; height: 50px; line-height: 50px; font-size: 14px; }
.font-size_con li:nth-child(2){ width: 60px; height: 60px; line-height: 60px; font-size: 16px; }
.font-size_con li:nth-child(3){ width: 70px; height: 70px; line-height: 70px; font-size: 18px; }
.font-size_con li:nth-child(4){ width: 80px; height: 80px; line-height: 80px; font-size: 20px; }
.font-size_con li a{ display:block; border-radius: 50%;}
.font-size_con li a:focus{outline:#ddb92d dotted 3px;}
/*질문/공지 상세*/
#ntcSvcList, #faqSvcList{height: 400px; font-size:14px }
#ntcSvcList li, #faqSvcList li{ line-height: 20px; padding: 5px 0; font-size: 14px; border-bottom: 1px solid #a6a6a6; width: 100%;}
#ntcSvcList li a, #faqSvcList li a{ position:relative; line-height:19px; color:#555;}
@media(hover:hover){
#ntcSvcList li a:hover, #faqSvcList li a:hover{color: #0070c0;}
}
#ntcSvcList li a:before, #faqSvcList li a:before{content:""; display: inline-block; width: 3px; height:3px; background:#555; top:8px; position:absolute; border-radius:50%; left:0; }
#ntcSvcList li a span, #faqSvcList li a span{display: inline-block; margin-left: 10px; vertical-align: top; word-break: keep-all;}
.cbot_ntc{display:none; position:absolute; background:#ddd; z-index:3; }
/* pop_tab */
.pop_tab{position:relative; width:100%; margin-bottom:4px; }
.pop_tab li{ display:table-cell; width:1%; background: #fff; text-align: center; z-index: 1; vertical-align: middle; font-size: 15px; border: 1px solid #e0e0e0; color: #666; margin-left: -1px; line-height: 18px; word-break: keep-all; -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08); height:30px; letter-spacing: -1px;}
.pop_tab li a{display: block; text-decoration: none; height: 30px; padding: 6px 0; }
.pop_tab .tabclick{ background:#0f44c3 !important; color:#fff !important; }
.pop_tab li:first-child{border-radius:10px 0 0 10px}
.pop_tab li:last-child{border-radius:0 10px 10px 0}
.pop_close{color: #737373; font-size: 24px; left: calc( 100% - 27px); top: 2px; position: absolute;height: 25px;}
/* 도움말_pop_tab */
.help_pop_tab{position:relative; width:100%; margin-bottom:4px; }
.help_pop_tab li{ display:table-cell; width:1%; background: #fff; text-align: center; z-index: 1; vertical-align: middle; font-size: 15px; border: 1px solid #e0e0e0; color: #666; margin-left: -1px; line-height: 18px; word-break: keep-all; -webkit-box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.08); height:30px; letter-spacing: -1px;}
.help_pop_tab li a{display: block; text-decoration: none; height: 30px; padding: 6px 0; }
.help_pop_tab .help_tabclick{ background:#0f44c3 !important; color:#fff !important; }
.help_pop_close{color: #a0a0a0; font-size: 24px; left: calc( 100% - 27px); top: 2px; position: absolute;height: 25px;}
/*smartCardForm*/
.smartCardForm h1{color:#555; font-size: 17px; line-height: 19px;}
.smartCardForm h2{color:#555; font-size: 16px; line-height: 18px;}
.smartCardForm .widthY{height: 30px; width: 100%; padding: 5px; line-height: 18px; border: 1px solid #d3d3d3; border-radius: 5px; }
.smartCardForm .widthN{height: 30px; padding: 5px; line-height: 18px; border: 1px solid #d3d3d3; border-radius: 5px; }
.smartCardForm select{height: 30px; width: auto; padding: 5px; line-height: 18px; border: 1px solid #d3d3d3; border-radius: 5px; }
.smartCardForm input[type="date"]{height: 30px; width: 110px; padding: 5px; line-height: 18px; border: 1px solid #d3d3d3; border-radius: 5px; font-size: 16px; }
.smartCardForm input[type="number"]{height: 30px; width: 50%; padding: 5px; line-height: 18px; border: 1px solid #d3d3d3; border-radius: 5px; }
.smartCardForm textarea{height: 50px; width: 100%; padding: 5px; line-height: 18px; border: 1px solid #d3d3d3; border-radius: 5px; }
.smartCardForm input[type="radio"], .smartCardForm input[type="checkbox"]{line-height: 22px; height: 22px;margin-right: 5px;}
.smartCardForm select, .smartCardForm input[type="date"], .smartCardForm input[type="number"], .smartCardForm ul{display: block;}
/*
.smartCardForm input[type="button"]{display: inline-block; background: #162a8b; color: #fff; border-radius: 29px; line-height: 30px; height: 30px; min-width: 80px; float: right;vertical-align: top; margin-top:10px}
*/
.smartCardForm input[type="button"]{display: inline-block; background: #162a8b; color: #fff; border-radius: 29px; line-height: 30px; height: 30px; min-width: 80px;vertical-align: top; margin-top:10px;cursor: pointer;}
.smartCardForm .r_100{ width:100%; display:inline-block}
.smartCardForm .r_50{ width:49%; display:inline-block}
.smartCardForm .r_all{ width:auto; display:inline-block; padding-right: 10px;}
.smartCardForm li:before{position: relative; content: ''; top: -4px; display: inline-block; left: 0px; width: 2px; height: 2px; background: #333; margin-right: 5px;}
.smartCardForm .tooltip-element-text { display: none; position: absolute; max-width: 200px; border: 1px solid; border-radius: 7px; font-size: 12px; color: #fff; background: #2e2e2e; text-align: left; padding: 5px 7px; word-break: keep-all;z-index: 99999}
.smartCardForm .tooltip-element-text:before{ position: absolute; content: ''; top: -3px; left: 19px; width: 7px; height: 7px; background: #2e2e2e; z-index: 1; -webkit-transform: skewY(40deg); transform: skewY(40deg);}
.smartCardForm .tit_p{ margin-top:10px; }
/* 챗봇 form select box*/
.cbot_form_select{ position:relative; background:#fff; display:inline-block;}
.cbot_form_select:after{ position:absolute; top:calc(50% + 2px); -webkit-transform:translateY(-50%); transform:translateY(-50%); right:10px; width:0; height:0; content:''; border:4px solid transparent; border-top:5px solid #595959;}
.cbot_form_select select{ background: transparent ; position:relative; z-index:1; padding:0 5px; box-sizing:border-box; height:34px; line-height:34px; border:1px solid #ddd;font-size: 16px;}
sup {
color: #E00000;
}
/** 스크롤바 */
/** 크롬, 엣지, 웨일, 사파리 */
.chat_service_wrap .chat_view .scroll::-webkit-scrollbar { width: 6px; }
.chat_service_wrap .chat_view .scroll::-webkit-scrollbar-track { background-color: #f2f2f2; }
.chat_service_wrap .chat_view .scroll::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #aaa; }
.chat_service_wrap .chat_view .scroll::-webkit-scrollbar-thumb:focus { background-color: gray; }
.chat_service_wrap .chat_view .scroll::-webkit-scrollbar-button { width: 0; height: 0; }
/** 파이어폭스, 익스플로러 */
.chat_service_wrap .chat_view .scroll {
/* 파이어폭스 */ scrollbar-width: thin; scrollbar-color: #aaa #f2f2f2;
}
/** 스크롤바 */
/** 크롬, 엣지, 웨일, 사파리 */
.external_scroll::-webkit-scrollbar { width: 6px; }
.external_scroll::-webkit-scrollbar-track { background-color: #f2f2f2; }
.external_scroll::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #aaa; }
.external_scroll::-webkit-scrollbar-thumb:focus { background-color: gray; }
.external_scroll::-webkit-scrollbar-button { width: 0; height: 0; }
/** 파이어폭스, 익스플로러
.external_scroll {
scrollbar-width: thin; scrollbar-color: #aaa;
scrollbar-face-color : #aaa; scrollbar-track-color : #f2f2f2; scrollbar-arrow-color : #aaa; scrollbar-shadow-color : #f2f2f2;
}
*/
/** 스크롤바 */
/** 크롬, 엣지, 웨일, 사파리 */
.chat_service_wrap .noti_sroll_more .fld_layer_pop_con .fld_con.fld_scroll::-webkit-scrollbar { width: 6px; }
.chat_service_wrap .noti_sroll_more .fld_layer_pop_con .fld_con.fld_scroll::-webkit-scrollbar-track { background-color: #f2f2f2; }
.chat_service_wrap .noti_sroll_more .fld_layer_pop_con .fld_con.fld_scroll::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #aaa; }
.chat_service_wrap .noti_sroll_more .fld_layer_pop_con .fld_con.fld_scroll::-webkit-scrollbar-thumb:focus { background-color: gray; }
.chat_service_wrap .noti_sroll_more .fld_layer_pop_con .fld_con.fld_scroll::-webkit-scrollbar-button { width: 0; height: 0; }
.chat_service_wrap .noti_sroll_more .help_layer_pop_con .help_con.help_scroll::-webkit-scrollbar { width: 6px; }
.chat_service_wrap .noti_sroll_more .help_layer_pop_con .help_con.help_scroll::-webkit-scrollbar-track { background-color: #f2f2f2; }
.chat_service_wrap .noti_sroll_more .help_layer_pop_con .help_con.help_scroll::-webkit-scrollbar-thumb { border-radius: 3px; background-color: #aaa; }
.chat_service_wrap .noti_sroll_more .help_layer_pop_con .help_con.help_scroll::-webkit-scrollbar-thumb:focus { background-color: gray; }
.chat_service_wrap .noti_sroll_more .help_layer_pop_con .help_con.help_scroll::-webkit-scrollbar-button { width: 0; height: 0; }
/** 파이어폭스, 익스플로러 */
.chat_service_wrap .noti_sroll_more .help_layer_pop_con .help_con.help_scroll {
/* 파이어폭스 */ scrollbar-width: thin; scrollbar-color: #aaa #f2f2f2;
}
/** 파이어폭스, 익스플로러 */
.chat_service_wrap .noti_sroll_more .fld_layer_pop_con .fld_con.fld_scroll {
/* 파이어폭스 */ scrollbar-width: thin; scrollbar-color: #aaa #f2f2f2;
}
.chat_service_wrap { position: relative; z-index: 1; width: 511px; background: #fff; border-radius: 10px 10px 0 0; overflow: hidden; -webkit-box-shadow: 5px 7px 12px rgba(0, 0, 0, 0.05); box-shadow: 5px 7px 12px rgba(0, 0, 0, 0.05); }
/** 채팅창 헤더 */
/* .chat_service_wrap .head { background: #152a8b; color: #fff; position: relative; height: 55px; padding: 0 1rem; z-index: 1; } */
.chat_service_wrap .head:after { display: block; clear: both; content: ''; }
/** 분야선택 */
.chat_service_wrap .head .srch_btn { float: left; margin: .95rem 0; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 14px; display: block; padding: 3px 11px; font-size: 0.7rem; -webkit-transition: all 0.2s; transition: all 0.2s; }
.chat_service_wrap .head .srch_btn:focus, .chat_service_wrap .head .srch_btn:focus { background: #fff; color: #323b67; }
/** 챗봇 타이틀 - 미사용 */
.chat_service_wrap .head .title { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 0.9rem; font-weight: 500; line-height: 1; }
/*제목바 왼쪽 버튼*/
.chat_service_wrap .head .tit_left{ float:left;}
/* .chat_service_wrap .head .tit_left > * { float:left; margin-left:0.6rem; display:block; top:0; font-size:1rem; } */
/* .chat_service_wrap .head .tit_left .tts, .chat_service_wrap .head .tit_left .email{ width:30px; height:30px; line-height:25px; position:relative; top:13px; border-radius:50px; border:1px solid #4354a2; text-align:center; z-index:1; } */
.chat_service_wrap .head .tit_left .auto img { width:12px; position: relative; bottom: 2px;}
.chat_service_wrap .head .tit_left .tts img{ width:16px; position: relative;left: -1px; bottom: 1px; }
.chat_service_wrap .head .tit_left .email img{ width:16px; position: relative; bottom: 1px;}
.chat_service_wrap .head .tit_left .help img{ width:8px; position: relative; left: -1px; }
.chat_service_wrap .head .tit_left .on{ background: #326DF5; border: 1px solid #dce3f3;}
.chat_service_wrap .head .tit_left .auto{height:30px; width:auto; line-height:25px; position:relative; top:13px; border-radius:50px; border:1px solid #4354a2; z-index:1;}
.chat_service_wrap .head .tit_left .auto:not(.talk){ display:inline-block; position:relative;}
.chat_service_wrap .head .tit_left .auto:not(.talk) a { width:30px; height:30px; line-height:30px; display:block; text-align: center}
.chat_service_wrap .head .tit_left .auto:not(.talk) em{top: -30px; padding-left: 30px; color: #fff; border-radius: 50px; height: 30px; text-align: left; overflow: hidden; position: relative; font-size: 12px; }
.chat_service_wrap .head .tit_left .auto:not(.talk) span{ display: block; border-radius:50px; width:30px; height:30px; text-align:center; position:relative; }
.chat_service_wrap .head .tit_left .auto:not(.talk) a em{ display:none}
.chat_service_wrap .head .tit_left .auto:not(.talk) a:focus{ width:80px; border-radius:50px; }
.chat_service_wrap .head .tit_left .auto:not(.talk) a:focus em{ display: block}
.chat_service_wrap .head .tit_left .auto:not(.talk) a:hover{ width:80px; border-radius:50px; }
.chat_service_wrap .head .tit_left .auto:not(.talk) a:hover em{ display: block}
.chat_service_wrap .head .tit_left .tts{height:30px; width:auto; line-height:25px; position:relative; top:13px; border-radius:50px; border:1px solid #4354a2; z-index:1;}
.chat_service_wrap .head .tit_left .tts:not(.talk){ display:inline-block; position:relative;}
.chat_service_wrap .head .tit_left .tts:not(.talk) a { width:30px; height:30px; line-height:30px; display:block; text-align: center;top:-1px;}
.chat_service_wrap .head .tit_left .tts:not(.talk) em{top: -30px; padding-left: 28px; color: #fff; border-radius: 50px; height: 30px; text-align: left; overflow: hidden; position: relative; font-size: 12px; }
.chat_service_wrap .head .tit_left .tts:not(.talk) span{ display: block; border-radius:50px; width:30px; height:30px; text-align:center; position:relative;top:-2px;padding-right:1px; }
.chat_service_wrap .head .tit_left .tts:not(.talk) a em{ display:none}
.chat_service_wrap .head .tit_left .tts:not(.talk) a:focus{ width:110px; border-radius:50px; }
.chat_service_wrap .head .tit_left .tts:not(.talk) a:focus em{ display: block}
.chat_service_wrap .head .tit_left .tts:not(.talk) a:hover{ width:110px; border-radius:50px; }
.chat_service_wrap .head .tit_left .tts:not(.talk) a:hover em{ display: block}
.chat_service_wrap .head .tit_left .email{height:30px; width:auto; line-height:25px; position:relative; top:13px; border-radius:50px; border:1px solid #4354a2; z-index:1;}
.chat_service_wrap .head .tit_left .email:not(.talk){ display:inline-block; position:relative;}
.chat_service_wrap .head .tit_left .email:not(.talk) a { width:30px; height:30px; line-height:30px; display:block; text-align: center;top:-1px;}
.chat_service_wrap .head .tit_left .email:not(.talk) em{top: -30px; padding-left: 28px; color: #fff; border-radius: 50px; height: 30px; text-align: left; overflow: hidden; position: relative; font-size: 12px; }
.chat_service_wrap .head .tit_left .email:not(.talk) span{ display: block; border-radius:50px; width:30px; height:30px; text-align:center; position:relative;top:-2px;padding-right:1px; }
.chat_service_wrap .head .tit_left .email:not(.talk) a em{ display:none}
.chat_service_wrap .head .tit_left .email:not(.talk) a:focus{ width:150px; border-radius:50px; }
.chat_service_wrap .head .tit_left .email:not(.talk) a:focus em{ display: block}
.chat_service_wrap .head .tit_left .email:not(.talk) a:hover{ width:150px; border-radius:50px; }
.chat_service_wrap .head .tit_left .email:not(.talk) a:hover em{ display: block}
.chat_service_wrap .head .tit_left .help{height:30px; width:auto; line-height:25px; position:relative; top:13px; border-radius:50px; border:1px solid #4354a2; z-index:1;}
.chat_service_wrap .head .tit_left .help:not(.talk){ display:inline-block; position:relative;}
.chat_service_wrap .head .tit_left .help:not(.talk) a { width:30px; height:30px; line-height:30px; display:block; text-align: center;top:-1px;}
.chat_service_wrap .head .tit_left .help:not(.talk) em{top: -30px; padding-left: 28px; color: #fff; border-radius: 50px; height: 30px; text-align: left; overflow: hidden; position: relative; font-size: 12px; }
.chat_service_wrap .head .tit_left .help:not(.talk) span{ display: block; border-radius:50px; width:30px; height:30px; text-align:center; position:relative;top:-2px;padding-right:1px; }
.chat_service_wrap .head .tit_left .help:not(.talk) a em{ display:none}
.chat_service_wrap .head .tit_left .help:not(.talk) a:focus{ width:100px; border-radius:50px; }
.chat_service_wrap .head .tit_left .help:not(.talk) a:focus em{ display: block}
.chat_service_wrap .head .tit_left .help:not(.talk) a:hover{ width:100px; border-radius:50px; }
.chat_service_wrap .head .tit_left .help:not(.talk) a:hover em{ display: block}
/** 제목바 오른쪽 버튼 */
.chat_service_wrap .head .title_right { float:right; }
.chat_service_wrap .head .title_right > * { float:left; margin-left:0.6rem; display:block; top:0;}
.chat_service_wrap .head .title_right button{position: absolute;top: 13px;right: 51px;height: 30px;width: 50px;border: 1px solid #4a5aa5;text-align:left;border-radius: 20px;background:url(../../../images/ips/cmmn/lang_arr.png) right 13px no-repeat;background-size:6px; background-position-x: 32px; padding-left: 6px; }
.chat_service_wrap .head .title_right .lang_box{position: absolute; top: 51px; right: 0; border: 1px solid #c6d6fc; width: 155px; z-index: 3; border-radius: 6px; vertical-align: middle; background: #152a8b; box-shadow: 0 4px 5px 0 #c6d6fc; display:none}
.chat_service_wrap .head .title_right .lang_box li{ border-bottom:1px solid #4b5ba6; line-height:25px; text-align:center; display: inline-block; }
.chat_service_wrap .head .title_right .lang_box li:last-child{ border-bottom:none; padding-bottom:5px}
.chat_service_wrap .head .title_right ul:before{position: relative; display: block; content: ""; width: 10px; height: 6px; background: url(../../../images/ips/cmmn/lang_box.png) no-repeat; transform: translate(-50%,0px); left: 50%; top: -6px; }
.chat_service_wrap .head .title_right .lang_box li a{ display: block; float:left}
.chat_service_wrap .head .title_right .end{font-size: 20px; position: absolute; right: 23px; top: 18px;}
.chat_service_wrap .head .title_right .lang_box .on{ background:#326DF5 }
.chat_service_wrap .head .title_right .lang{ width:40px; height:13px}
.chat_service_wrap .head .title_right .lang_f{ width:22px; height:15px; margin:3px 5px}
.chat_service_wrap .head .title_right .mltlnDiv:not(.talk) a em{ display:none;height:30px}
/** 다국어 마우스오버 주석처리
.chat_service_wrap .head .title_right .mltlnDiv:not(.talk) em{top: 13px;right: 50px;position: absolute;font-size: 12px; width:100px; background:#326DF5; border-radius:10px; }
.chat_service_wrap .head .title_right .mltlnDiv:not(.talk) a:focus{ width:65px; background:#326DF5; border-radius:50px; }
.chat_service_wrap .head .title_right .mltlnDiv:not(.talk) a:focus em{ display: block}
*/
/* 다국어 선택창 크기 설정 */
.lang_f{max-width:40px}
.lang{max-width:40px}
/** 자동완성 */
.chat_service_wrap .head .auto_complete { margin-top: .77rem; }
.chat_service_wrap .head .auto_complete > * { display: inline-block; vertical-align: middle; }
.chat_service_wrap .head .auto_complete span { font-size: 0.55rem; font-weight:900;color:#333;position:absolute;left:5px;top:3.5px;z-index:1}
.chat_service_wrap .head .auto_complete.on span {right:5px;left:inherit}
.chat_service_wrap .head .auto_complete .check_wrap { position: relative; display: inline-block; width: 67px; height: 24px; background: #fff; border-radius: 16px; overflow: hidden; }
.chat_service_wrap .head .auto_complete .check_wrap label { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 44px; width: 20px; height: 20px; border-radius: 50%; background: #d0d2de; color: #000; -webkit-transition: left .2s; transition: left .2s; cursor: pointer; }
.chat_service_wrap .head .auto_complete .check_wrap label:before { font-family: "xeicon"; content: ''; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.chat_service_wrap .head .auto_complete .check_wrap input { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; opacity: 0; }
.chat_service_wrap .head .auto_complete .check_wrap input:checked ~ label { left: 4px; background: #7e86fa; color: #fff; }
.chat_service_wrap .head .auto_complete .check_wrap input:checked ~ label:before { content: ''; }
.chat_service_wrap .head .auto_complete .check_wrap input:focus ~ label:after {position:absolute;left:0;top:0;content:'';width:100%;height:100%;border:3px solid #000}
/** 처음으로 */
.chat_service_wrap .head .refresh { padding-top: .95rem; }
.chat_service_wrap .head .save { padding-top: .97rem; }
/** 채팅창 확장 */
.chat_service_wrap .head .expand { padding-top: .92rem; }
/** 채팅창 본문 */
.chat_service_wrap .chat_view { padding: .2rem .5rem .5rem .5rem; height: 530px;font-size:14px; /*font-weight: 600;*/}
.chat_service_wrap .chat_view .scroll {height:100%;overflow-y: auto;/* z-index: 999; */}
.chat_service_wrap .chat_view .chat_box { opacity: 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.9, 0.9); transform: scale(0.9, 0.9); -webkit-transition: opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out; transition: opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out; transition: transform 300ms ease-in-out, opacity 300ms ease-in-out, -webkit-transform 300ms ease-in-out; }
.chat_service_wrap .chat_view .chat_box > * { display: inline-block; vertical-align: top; }
.chat_service_wrap .chat_view .chat_box .message_wrap .img { width: 43px; height: 43px; display:inline-block; vertical-align: middle; margin-bottom:10px }
.chat_service_wrap .chat_view .chat_box .message_wrap .img img { max-width:inherit; width:100%; }
.chat_service_wrap .chat_view .chat_box .message{background: #f5f5f5; border-radius: 10px; padding: 12px; display: inherit; position: relative; border: 1px solid #ddd; line-height: 1.3; width: 100%; /* margin-bottom: -3px */}
/*
.chat_service_wrap .chat_view .chat_box .message_wrap .message::before { position: absolute; content: ''; left: 48px; top: -6px; width: 10px; height: 10px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; background: #f5f5f5; z-index: 1; -webkit-transform: skewY(40deg); transform: skewY(40deg);}
*/
.chat_service_wrap .chat_view .chat_box .message_wrap .before_wrap::before { position: absolute; content: ''; left: 49px; top: -5px; width: 10px; height: 10px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; background: #f5f5f5; z-index: 1; -webkit-transform: skewY(40deg); transform: skewY(40deg);}
.chat_service_wrap .chat_view .chat_box .message_wrap .before_wrap.delBefore::before {display: none;}
/** 채팅창 평가하기 버튼 */
.chat_service_wrap .chat_view .chat_box .message_wrap .message .evaluate .btn_wrap .btn img{width: 16px;}
.chat_service_wrap .chat_view .chat_box .message_wrap .message .evaluate .btn_wrap .disabled{filter: grayscale(100%) invert(10%); opacity: 0.6; cursor: not-allowed;}
/** 대화박스 */
.chat_service_wrap .chat_view .chat_box .message_wrap { width:98%; }
.chat_service_wrap .chat_view .chat_box .message_wrap .name { font-weight:500 ; color: #2b2b2b; display: inline-block;font-size: 16px; margin-left: 8px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message { padding: 12px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message + .message { margin-top: 5px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .m_guide li{ display:block; margin:5px 0; padding-left:10px}
.chat_service_wrap .chat_view .chat_box .message_wrap .message .m_guide li:before{ content:""; display:inline-block; position:relative; width:2px; height:2px; background:#757575; top:-5px; left:-5px}
.chat_service_wrap .chat_view .chat_box .message_wrap .m_tel{ background:#f3f7ff; padding:10px 0; color:#2f497d; text-align:center; border-radius: inherit;}
.chat_service_wrap .chat_view .chat_box .message_wrap .message2 { background: #edf2fa; border-radius: 10px; padding: 12px; display: inline-block; position: relative; border: 1px solid #ddd; line-height: 1.3; min-width: 200px; width: 100%; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message2 + .message2 { margin-top: 5px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message2:before { position: absolute; content: ''; left: -6px; top: 10px; width: 10px; height: 10px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; background: #edf2fa; z-index: 1; -webkit-transform: skewX(45deg); transform: skewX(45deg); }
/** 2점 평가 */
.chat_service_wrap .chat_view .chat_box .message_wrap .message .evaluate > * { display: inline-block; vertical-align: middle; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .evaluate .btn_wrap { margin-left: 6px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .evaluate .btn_wrap .btn { border: 1px solid #d8ebfe; background: #fff; padding: 0 10px; border-radius: 23px; margin: 0 0 0 4px; }
/** 5점 평가 */
.evalBtn{display: inline-block; background: #162a8b; color: #fff; border-radius: 29px; line-height: 30px; height: 30px; min-width: 80px; vertical-align: top; margin-top:5px}
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap textarea { resize: none; width: 100%; height: 65px; margin: 5px 0 0; background:#fff; color:#767676; padding:5px 10px; color:#7f7f7f; border:none; border-radius:7px;}
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy { margin: 8px 0 0 -7px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy:after { display: block; clear: both; content: ''; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy li { float: left; margin: 0 0 0 7px; position: relative; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy li label { position: relative; width: 21px; height: 21px; display: block; cursor:pointer; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy li label:before { position: absolute; content: ''; width: 100%; height: 100%; background: url("../../../images/gcc/cbot/star.png") no-repeat center; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy li input { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; opacity: 0; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy li.on label:before { background-image: url("../../../images/gcc/cbot/star_ov.png"); }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy li a:focus { outline:-webkit-focus-ring-color auto 1px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .satisfy_wrap .satisfy li.on a:focus { outline:-webkit-focus-ring-color auto 1px; }
/** 이메일 발송 */
.chat_service_wrap .chat_view .chat_box .message_wrap .message .email_send > * { height:35px; vertical-align:bottom; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .email_send button { padding:0 10px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .email_send input{ background:#fff; padding:0 10px; color:#7f7f7f; border:none; border-radius:7px; font-size: 16px; transform: scale(0.90);}
/** 캐러셀 */
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap { width: 100.1%; position: relative; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap .item > * { display: block; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap .item .tit { font-size: 0.9rem; font-weight: 600; color: #000; margin: 5px 0 2px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap .item .s_img { text-align: center; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap .bx-controls a { position: absolute; top: 4rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; line-height: 1.5rem; background: #fff; text-align: center; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap .bx-controls a.bx-prev { left: -15px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap .bx-controls a.bx-next { right: -15px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .message .slide_wrap .bx-controls a.disabled {display:none}
/** 발화시간 */
.chat_service_wrap .chat_view .chat_box .m_time { display: inline-block; width: 100%; text-align: center; font-size: 13px; padding:0 10px; margin-bottom:5px}
.chat_service_wrap .chat_view .chat_box .m_time:before{ content:""; display:inline-block; position: absolute; height:1px; width:30%; top:10px; background:#cfcfcf; left:0}
.chat_service_wrap .chat_view .chat_box .m_time:after{ content:""; display:inline-block; position: absolute; height:1px; width:30%; top:10px; background:#cfcfcf; right:0}
/** 발화시간 */
.chat_service_wrap .chat_view .chat_box .message_wrap .time { display: block; font-size: 11px; color: #000; margin-bottom: 4px; margin-right: 14px }
.time{font-size:11px }
.cbotMsgtime { display: block; font-size: 11px; color: #000; margin-bottom: 4px; margin-right: 14px }
/** 버튼 */
.chat_service_wrap .chat_view .chat_box .message_wrap .btn_wrap { margin: 0 0 0 -5px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .btn_wrap.row .btn { width: 100%; margin: 0; }
.chat_service_wrap .chat_view .chat_box .message_wrap .btn_wrap.row .col-xs-12 { padding: 5px 0 0 5px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .btn { padding: 5px 10px; min-height: 35px; border: 1px solid; display: inline-block; margin: 5px 0 0 5px; -webkit-transition: all 0.2s; transition: all 0.2s; }
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.round { border-radius: 18px; }
/** 기본 버튼 */
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blueConfirm.round{ border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; width: calc(49% - 2px); margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;vertical-align: top;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blueConfirmOneBtn.round{ border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; width: 100%; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blueConfirm.round:focus, .chat_service_wrap .chat_view .chat_box .message_wrap .btn.blueConfirm.round:focus{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d; text-decoration:underline;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blueConfirm.round.on{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d;}
/** 기본 버튼 */
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue.round{ border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;vertical-align: top;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue.round:focus, .chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue.round:focus{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d; text-decoration:underline;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue.round.on{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d;}
/** 기본 버튼 blue2 */
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue2 { border-color: #326DF5; background: #fff; color: #326DF5; border-radius:7px; text-align:left }
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue2:after{ content:""; position: absolute; display:inline-block; width:6px; height:8px; top: 20px; right: 10px; }
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue2:focus, .chat_service_wrap .chat_view .chat_box .message_wrap .btn.blue2:focus { color: #326DF5; background: #fff; }
/** 짙은색 버튼 */
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.navy { border-color: #6b6b6b; background: #6b6b6b; color: #fff;border-radius:7px }
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.navy:focus, .chat_service_wrap .chat_view .chat_box .message_wrap .btn.navy:focus { background: #fff; color: #000; }
/** 링크 버튼 */
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.linkConfirm{border: 2px solid #323b67; padding: 0 5px; height: 35px; line-height: 15px; width: calc(49% - 2px); margin: 1px 5px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #323b67; color: #fff;vertical-align: top;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.linkConfirmOneBtn{border: 2px solid #323b67; padding: 0 5px; height: 35px; line-height: 15px; width: 100%; margin: 1px 5px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #323b67; color: #fff;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.linkConfirm:focus, .chat_service_wrap .chat_view .chat_box .message_wrap .btn.link:focus{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.linkConfirm.on{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
/** 링크 버튼 */
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.link{border: 1px solid #c7d1e5; padding: 0 5px; height: 35px; line-height: 15px; width: calc(49% - 2px); margin: 1px 5px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #f3f7ff; color: #2f497d;vertical-align: top;}
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.link:focus, .chat_service_wrap .chat_view .chat_box .message_wrap .btn.link:focus{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
/*
.chat_service_wrap .chat_view .chat_box .message_wrap .btn.link.on{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
*/
/** 텍스트 링크 */
.chat_service_wrap .chat_view .chat_box .message_wrap .textLink { display: block; cursor: pointer; font-weight: 600; text-align: left; border: 1px solid #ddd; width: 100%; padding: 2px 10px; background: #fff; border-radius: 10px; margin-bottom: 3px;}
/** 사용자 대화박스 */
.chat_service_wrap .chat_view .chat_box.user { text-align: right; }
/** 2023.10.06 숫자 줄바꿈 적용 */
.chat_service_wrap .chat_view .chat_box.user .message_wrap .message { border-radius: 10px; background: #152a8b; color: #fff; border: 0; margin-right: 15px; max-width: 90%; width: auto; text-align: left; word-break: break-all;}
.chat_service_wrap .chat_view .chat_box.user .message_wrap .message:before { left: inherit; right: -2px;top:11px; background: #152a8b; border: 0; -webkit-transform: skewX(-45deg); transform: skewX(-45deg); z-index: -1; }
/** 대화의 표시 여부 */
.chat_service_wrap .chat_view .chat_box.view { opacity: 1; transform: scale(1, 1); -webkit-transform: scale(1, 1); }
/** 시스템 알림 메시지 */
.chat_service_wrap .chat_view .system_message { background-color: #f2f2f2; padding: 10px; text-align: center; border-radius: 7px; margin: 20px; }
/** 분야 선택 */
.chat_service_wrap .chat_view .area_wrap { width: 98% !important; position: relative; }
/* .cbot_fld{ margin-top: 15px; } */
.chat_service_wrap .chat_view .area_wrap a, .chat_service_wrap .chat_view .area_wrap button { display: block; text-align: center; }
.chat_service_wrap .chat_view .area_wrap a:focus, .chat_service_wrap .chat_view .area_wrap a:focus, .chat_service_wrap .chat_view .area_wrap button:focus, .chat_service_wrap .chat_view .area_wrap button:focus { text-decoration: underline; }
/*
.chat_service_wrap .chat_view .fld_wrap .btn.blue { border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;}
.chat_service_wrap .chat_view .fld_wrap .btn.blue:focus{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d; text-decoration:underline;}
.chat_service_wrap .chat_view .fld_wrap .btn.blue.on{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d;}
.chat_service_wrap .chat_view .fld_wrap .btn.link {border: 2px solid #323b67; padding: 0 5px; height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #323b67;}
.chat_service_wrap .chat_view .fld_wrap .btn.link:focus, .chat_service_wrap .chat_view .slide_btn_wrap .btn.link:focus{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
.chat_service_wrap .chat_view .fld_wrap .btn.link.on{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
*/
/*
.chat_service_wrap .chat_view .area_wrap li { margin-left: -4px; margin-top: -7px; padding: 5px 20px; background: #f5f5f5; margin-right: 10px; }
*/
/*
.chat_service_wrap .chat_view .fld_wrap div button { padding: 0 5px; min-height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5; }
.chat_service_wrap .chat_view .fld_wrap div button.link { background: #f3f7ff; color: #2f497d; border: 1px solid #c7d1e5; }
.chat_service_wrap .chat_view .fld_wrap div button.depth { background: #2f497d; color: #fff; }
.chat_service_wrap .chat_view .cbot_fld div button { padding: 0 5px; min-height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5; }
.chat_service_wrap .chat_view .cbot_fld div button.link { background: #f3f7ff; color: #2f497d; border: 1px solid #c7d1e5; }
.chat_service_wrap .chat_view .cbot_fld div button.depth { background: #2f497d; color: #fff; }
*/
.fld_wrap div button { padding: 0 5px; min-height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5; width: 45.5% }
.fld_wrap div button.link { background: #f3f7ff; color: #2f497d; border: 1px solid #c7d1e5; }
.fld_wrap div button.depth { background: #2f497d; color: #fff; }
.cbot_fld div button { padding: 0 5px; min-height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5; width: 45.5% }
.cbot_fld div button.link { background: #f3f7ff; color: #2f497d; border: 1px solid #c7d1e5; }
.cbot_fld div button.depth { background: #2f497d; color: #fff; }
.chat_service_wrap .chat_view .area_wrap .bx-controls { text-align: center; }
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-controls-direction a { position: absolute; top: 53%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateY(-100%); transform: translateY(-100%); width: 30px; height: 30px; text-align: center; line-height: 30px; }
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-controls-direction a.bx-prev { left: 0; }
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-controls-direction a.bx-next { right: 0; }
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-controls-direction a.disabled {display:none}
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-pager-item {display: inline-block; vertical-align: middle;}
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-pager a { display: inline-block; vertical-align: middle; width: 9px; height: 9px; border-radius: 50%; opacity: .6; text-indent: -9999px; background: #000; }
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-pager a + a { margin-top: 0; margin-left: 10px; }
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-pager-item + .bx-pager-item { margin-top: 0; margin-left: 10px; }
.chat_service_wrap .chat_view .area_wrap .bx-controls .bx-pager a.active { width: 11px; height: 11px; opacity: 1; }
/** 슬라이드버튼 */
.chat_service_wrap .chat_view .slide_btn_wrap { width: 98% !important; position: relative; }
.chat_service_wrap .chat_view .slide_btn_wrap a {display: block;width: 100%;text-align: center;}
/*
.chat_service_wrap .chat_view .slide_btn_wrap button {display: block; width: 100%; border: 1px solid;}
*/
.chat_service_wrap .chat_view .slide_btn_wrap a:focus, .chat_service_wrap .chat_view .slide_btn_wrap a:focus, .chat_service_wrap .chat_view .slide_btn_wrap button:focus, .chat_service_wrap .chat_view .slide_btn_wrap button:focus { text-decoration: underline; }
/*.chat_service_wrap .chat_view .slide_btn_wrap li { margin-left:1px; margin-top: 5px; padding: 5px 10px; background: #f5f5f5; /* margin-right: 10px; */ }*/
.chat_service_wrap .chat_view .slide_btn_wrap li:after { display: block; clear: both; content: ''; }
.chat_service_wrap .chat_view .slide_btn_wrap li a { padding: 0 5px; background: #326DF5; height: 40px; line-height: 15px; float: left; width: calc(49% - 15px); margin: 5px 0 0 5px; color: #fff; border-radius: 7px; word-break:keep-all; }
.chat_service_wrap .chat_view .slide_btn_wrap li a.link, .chat_service_wrap .chat_view .slide_btn_wrap li button.link { padding: 0 5px; height: 40px; line-height: 15px; /* float: left; */ width: calc(48% - 5px); margin: 5px 0 0 5px; color: #fff; border-radius: 7px; word-break: keep-all; text-align:left; background: #323b67; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls { text-align: center; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-controls-direction a { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateY(-100%); transform: translateY(-100%); width: 20px; height: 30px; text-align: center; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-controls-direction a.bx-prev { left: 0; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-controls-direction a.bx-next { right: 0; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-controls-direction a.disabled {display:none}
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-pager-item {display: inline-block; vertical-align: middle;}
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-pager a { display: inline-block; vertical-align: middle; width: 9px; height: 9px; border-radius: 50%; opacity: .6; text-indent: -9999px; background: #000; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-pager a + a { margin-top: 0; margin-left: 10px; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-pager-item + .bx-pager-item { margin-top: 0; margin-left: 10px; }
.chat_service_wrap .chat_view .slide_btn_wrap .bx-controls .bx-pager a.active { width: 11px; height: 11px; opacity: 1; }
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blue { border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;vertical-align: top;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blue:focus{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d; text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blue.on{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.link {border: 2px solid #323b67; padding: 0 5px; height: 35px; line-height: 15px; width: 95%; margin: 1px 5px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #323b67;color: #fff;vertical-align: top;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.link:focus, .chat_service_wrap .chat_view .slide_btn_wrap .btn.link:focus{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.link.on{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blueExternal{ border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; margin: 1px 2px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;vertical-align: top;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blueExternal:focus{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d; text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blueExternal.on{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.linkExternal {border: 2px solid #323b67; padding: 0 5px; height: 35px; line-height: 15px; margin: 1px 2px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #323b67;color: #fff;vertical-align: top;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.linkExternal:focus, .chat_service_wrap .chat_view .slide_btn_wrap .btn.link:focus{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.linkExternal.on{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blueConfirm{ border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; width: calc(49% - 2px); margin: 1px 2px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;vertical-align: top;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blueConfirmOneBtn{ border: 2px solid #326DF5; padding: 0 5px; min-height: 35px; line-height: 15px; width: 100%; margin: 1px 2px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blueConfirm:focus{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d; text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blueConfirm.on{ background-color: #fff; border: 2px solid #326DF5; color:#2f497d;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.linkConfirm{border: 2px solid #323b67; padding: 0 5px; height: 35px; line-height: 15px; width: calc(49% - 2px); margin: 1px 2px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #323b67;color: #fff;vertical-align: top;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.linkConfirmOneBtn{border: 2px solid #323b67; padding: 0 5px; height: 35px; line-height: 15px; width: 100%; margin: 1px 2px; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #323b67;color: #fff;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.linkConfirm:focus, .chat_service_wrap .chat_view .slide_btn_wrap .btn.link:focus{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
.chat_service_wrap .chat_view .slide_btn_wrap .btn.linkConfirm.on{ background-color: #fff; border: 2px solid #323b67; color:#2f497d;text-decoration:underline;}
/*
.chat_service_wrap .chat_view .slide_btn_wrap .btn.blue::after{ content:""; position: absolute; display:inline-block; width:6px; height:8px; top: 20px; right: 10px; background:url(../../../images/gcc/cbot/chat_message_arr.png) right no-repeat; }
*/
/** 자주하는 질문 슬라이드버튼 */
.chat_service_wrap .chat_view .faq_btn_wrap { width: 98% !important; position: relative; margin-top:10px;}
.chat_service_wrap .chat_view .faq_btn_wrap a {display: block;width: 100%;text-align: center;}
/*
.chat_service_wrap .chat_view .faq_btn_wrap button {display: block; width: 100%; border: 1px solid;}
*/
.chat_service_wrap .chat_view .faq_btn_wrap a:focus, .chat_service_wrap .chat_view .faq_btn_wrap a:focus, .chat_service_wrap .chat_view .faq_btn_wrap button:focus, .chat_service_wrap .chat_view .faq_btn_wrap button:focus { text-decoration: underline; }
.chat_service_wrap .chat_view .slide_btn_wrap li {margin-left:1px;margin-top: 5px;/*padding: 5px 10px;*/background: #f5f5f5;text-align: center;}
.chat_service_wrap .chat_view .faq_btn_wrap li:after { display: block; clear: both; content: ''; }
.chat_service_wrap .chat_view .faq_btn_wrap li a { padding: 0 5px; background: #326DF5; height: 40px; line-height: 15px; float: left; width: calc(49% - 15px); margin: 5px 0 0 5px; color: #fff; border-radius: 7px; word-break:keep-all; }
.chat_service_wrap .chat_view .faq_btn_wrap li a.link, .chat_service_wrap .chat_view .faq_btn_wrap li button.link { padding: 0 5px; height: 40px; line-height: 15px; float: left; width: calc(98% - 5px); margin: 5px 0 0 5px; color: #fff; border-radius: 7px; word-break: keep-all; text-align:left; background: #323b67; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls { text-align: center; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-controls-direction a { position: absolute; top: 50%; left: auto; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateY(-100%); transform: translateY(-100%); width: 20px; height: 30px; text-align: center; line-height: 30px; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-controls-direction a.bx-prev { left: 0; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-controls-direction a.bx-next { right: 0; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-controls-direction a.disabled {display:none}
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-pager-item {display: inline-block; vertical-align: middle;}
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-pager a { display: inline-block; vertical-align: middle; width: 9px; height: 9px; border-radius: 50%; opacity: .6; text-indent: -9999px; background: #000; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-pager a + a { margin-top: 0; margin-left: 10px; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-pager-item + .bx-pager-item { margin-top: 0; margin-left: 10px; }
.chat_service_wrap .chat_view .faq_btn_wrap .bx-controls .bx-pager a.active { width: 11px; height: 11px; opacity: 1; }
.chat_service_wrap .chat_view .faq_btn_wrap .btn.blue {display: block; cursor: pointer; font-weight: 600; text-align: left; border: 1px solid #ddd; width: 92%; padding: 2px 10px; background: #fff; border-radius: 10px; margin-bottom: 3px;margin-left: 17px
/* border: 1px solid;padding: 0 5px;height: 40px;line-height: 15px;float: left;width: calc(90% - 8px);margin: 1px 0px 0px 23px;color: #326DF5;border-radius: 7px;word-break: keep-all;text-align:left;background-color: #fff;background-image: url(../../../images/gcc/cbot/chat_message_arr.png);background-repeat: no-repeat;background-position: right; */}
/*
.chat_service_wrap .chat_view .faq_btn_wrap .btn.blue::after{ content:""; position: absolute; display:inline-block; width:6px; height:8px; top: 20px; right: 10px; background:url(../../../images/gcc/cbot/chat_message_arr.png) right no-repeat; }
*/
/* 챗봇 하단 */
.chat_foot{background-color: #f5f5f5;height: 60px;position: absolute;left: 0;bottom: 0;width: 100%;}
.chat_foot_btn{ width: calc(100% + 2rem); margin-left: 50%; text-align:center; font-size: 14px;}
.chat_foot_btn button{ display:inline-block; color:#222; height:26px; }
.chat_foot_faq_btn:before{ content:""; display:inline-block; position:relative; background: url(../../../images/gcc/cbot/chat_foot_faq.png) no-repeat; width:32px; height:16px; background-size:16px; left:10px; top: 2px;}
.chat_foot_srch_btn{ position: absolute; left:13px; top: 8px; }
.chat_foot_srch_btn:before{ content:""; display:inline-block; position:relative; background: url(../../../images/gcc/cbot/chat_foot_srch.png) no-repeat; width: 28px; height:14px; background-size: 14px; left:5px; top: 2px;}
.chat_foot_first_btn{ color: #fff !important; padding: 0 10px; background: #152a8b; box-sizing: border-box; border: 2px solid #fff; border-radius: 50px; height: 28px; -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.25); top: 8px; left: calc(100% - 50%); position: absolute; transform: translate(-50%);}
.chat_foot_first_btn:after{content: ""; display: inline-block; position: relative; background: url(../../../images/gcc/cbot/chat_foot_first.png) no-repeat; width: 12px; height: 12px; background-size: 6px; top: 3px; left: 5px;}
.chat_foot_faq_btn{ position: absolute; right: 10px; top: 8px;}
.chat_foot_faq_btn:before{ content:""; display:inline-block; position:relative; background: url(../../../images/gcc/cbot/chat_foot_faq.png) no-repeat; width:28px; height:14px; background-size:14px; left:5px; top: 2px;}
.chat_foot_more{ position: absolute; right: 15px; top: 3px; font-size:20px; visibility:hidden}
.chat_foot_more_all{/* visibility: hidden;*/ background: #152a8b; color: #fff; padding: 10px; width: calc(100% - 30px); position: absolute; left: 15px; min-height: 80px; bottom: 98px; border-radius: 14px;}
.chat_foot_more_all button{ padding: 5px 10px; width: 100%; text-align: left; line-height: 18px;}
.chat_foot_more_all:before{position: absolute; content: ''; right: 11px; bottom: -4px; width: 20px; height: 20px; background: #152a8b; z-index: 1; -webkit-transform: skewY(40deg); transform: skewY(40deg); }
.chat_foot_more_all button:first-child:before{ content:""; display:inline-block; position:relative; background: url(../../../images/gcc/cbot/chat_foot_srch_w.png) no-repeat; width: 28px; height:14px; background-size: 14px; left:5px; top: 2px;}
.chat_foot_more_all button:last-child:before{ content:""; display:inline-block; position:relative; background: url(../../../images/gcc/cbot/chat_foot_faq_w.png) no-repeat; width:28px; height:14px; background-size:14px; left:5px; top: 2px;}
.chat_foot_faq_btn_hidden{right: 10px; top: 38px;}
.chat_foot_srch_btn_hidden{position: absolute;left:13px;}
.chat_bott{width: calc(100% - 3.5rem); text-align: center; height: 40px; position: relative; margin: 0.65rem 1rem 0 0; vertical-align: top; float: right; border: none; background: #fff; -webkit-box-shadow: 0 3px 3px 0 rgb(0 0 0 / 15%); box-shadow: 0 3px 3px 0 rgb(0 0 0 / 15%); border-radius: 10px 0 10px 10px;}
.chat_bott .font_control{ width:40px; display:inline-block; float:left; text-align:center; height:40px; line-height:40px !important;}
.chat_bott .font_control:after{ height:40px; width:1px; content:""; display:inline-block; background:#dedede; top:-15px; float:right }
.chat_bott input[type="text"] { display: inline-block; border: 1px; height: 40px; float: left; text-align: left; padding: 0 0 0 10px; width: calc(100% - 35px - 35px); font-size: 16px; transform: scale(0.90);}
.chat_send{ width: 17px; position: relative; left: 0.8rem; top:18px}
/** 대화 입력란 */
.chat_service_wrap .chat_input { width: calc(100% - 2rem); height: 55px; padding: 0 1rem 0 0; position: relative; }
.chat_service_wrap .chat_input:after { display: block; clear: both; content: ''; }
/** 폰트크기 조절 */
.chat_foot .chat_input .font_control { float: left; position: relative; width: 57px; text-align: center; background: #fff; height: 100%; }
.chat_foot .chat_input .font_control > button { display: block; width: 100%; height: 100%; }
.chat_foot .chat_input .font_control > button sub { font-size: 0.6rem; }
.chat_foot .chat_input .font_control > button sub2 { font-size: 0.75rem; }
.chat_foot .chat_input .font_control > button strong { font-size: 1rem; }
/** 대화 입력 */
.chat_foot .chat_input > input { background: transparent; border: 0; float: left; font-size: 0.75rem; height: 55px; width: calc(100% - 2.9rem - 57px); padding: 0 1rem; }
.chat_foot .chat_input > input::-webkit-input-placeholder { color: #333; }
.chat_foot .chat_input > input:-ms-input-placeholder { color: #333; }
.chat_foot .chat_input > input::-ms-input-placeholder { color: #333; }
.chat_foot .chat_input > input::placeholder { color: #333; }
.chat_foot .chat_input > button { float: right; display: block; margin: .425rem 0; }
/** 자동완성 */
.chat_bott .related_txt { position: absolute; left: 0; bottom: 42px; width: 100%; padding: 0 1.15rem; min-height: 146px; background: #fff; overflow: hidden; -webkit-box-shadow: 0 -15px 19px rgba(0, 0, 0, 0.03); box-shadow: 0 -15px 19px rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(163, 163, 163, 0.2); height: 0; opacity: 0; visibility: hidden; -webkit-transition: all .2s; transition: all .2s; }
.chat_bott .related_txt button { display: block; width: 100%; text-align: left; font-size: 0.75rem; }
.chat_bott .related_txt button span { vertical-align:top; }
.chat_bott .related_txt button + button { margin-top: 10px; }
.chat_bott .related_txt .scroll { height: 100%; overflow: hidden; }
.chat_bott .related_txt.active { height: auto; opacity: 1; visibility: visible; padding: 0.95rem; }
.chat_bott .related_txt button .query_recomm { color: #fff; background-color:#1A4FAF; border-radius:5px !important; padding:2px 5px 4px 5px !important; margin-right:3px; font-size:9px; height:21px; line-height:15px; display:inline-block;}
.chat_bott .related_txt button .query_user { color: #fff; background-color:#777; border-radius:5px !important; padding:2px 5px 4px 5px !important; margin-right:3px; font-size:9px; height:21px; line-height:15px; display:inline-block; }
.chat_bott .related_txt button .user_input { color: #1a4faf; }
.chat_service_wrap .chat_btn_wrap {background:#EBEAEA;display:block;width:100%;overflow:hidden}
.chat_service_wrap .chat_btn_wrap button, .chat_service_wrap .chat_btn_wrap a {font-size:.65rem;float:left;width:33.333333%;padding:.725rem 0;position:relative;}
.chat_service_wrap .chat_btn_wrap button:before, .chat_service_wrap .chat_btn_wrap a:before {position:absolute;right:0;top:50%;transform:translateY(-50%);content:'';width:1px;height:10px;background:#707070;opacity:.5;}
.chat_service_wrap .chat_btn_wrap button:last-of-type:before, .chat_service_wrap .chat_btn_wrap a:last-of-type:before {display:none}
/* 평가하기 */
.eval_con .satisfy_wrap textarea {resize:none;width:100%;height:65px;margin:5px 0 0;padding:5px; font-size: 16px}
.eval_con .satisfy_wrap .satisfy {margin:8px 0 0 -7px}
.eval_con .satisfy_wrap .satisfy:after {display:block;clear:both;content:''}
.eval_con .satisfy_wrap .satisfy li {float:left;margin:0 0 0 7px;position:relative}
.eval_con .satisfy_wrap .satisfy a:focus { outline: -webkit-focus-ring-color auto 1px;}
.eval_con .satisfy_wrap .satisfy li label {position:relative;width:21px;height:21px;display:block}
.eval_con .satisfy_wrap .satisfy li label:before {position: absolute;content: '';width: 100%;height: 100%;background: url("star.png") no-repeat center;cursor:pointer; font-size: 16px; }
.eval_con .satisfy_wrap .satisfy li input {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 100%;height: 100%;opacity: 0}
.eval_con .satisfy_wrap .satisfy li.on label:before {background-image: url("star_ov.png");cursor:pointer}
.satisfy_wrap .btn_wrap { text-align: center; }
.satisfy_wrap .eval_btn { padding: 0 15px; min-height: 30px; line-height: 15px; margin: 1px 5px; color: #fff; border-radius: 25px; word-break: keep-all; text-align: center; background-color: #326DF5; font-size: 14px }
/** 시범운영 아이콘 */
.cbot_svc_test { margin-left:3px; color: #000; font-size:10px; }
/** 챗봇 답변중 */
.cbot_ing {
display: flex;
justify-content: center;
align-items: center;
margin: 0 -5%;
width: 50px;
height: 20px;
}
.cbot_ing span {
position: relative;
animation-delay: .5s;
width: 5px; height: 5px; border-radius: 5px; background-color: #333; color: #333; animation: dotFlashing 1s infinite linear alternate;
}
.cbot_ing span::before, .cbot_ing span::after {
content: '';
display: inline-block;
top: 0;
position: absolute;
width: 5px; height: 5px; border-radius: 5px; background-color: #333; color: #333; animation: dotFlashing 1s infinite alternate;
}
.cbot_ing span::before { left: -10px; animation-delay: 0s; }
.cbot_ing span::after { left: 10px; animation-delay: 1s; }
@keyframes dotFlashing {
0% { background-color: #333; }
50%, 100% { background-color: #ccc; }
}
@media(max-width:1080px) {
.chat_service_wrap .chat_view .faq_btn_wrap .btn.blue {width: calc(93% - 8px);}
/* .chat_service_wrap .head {height:55px} */
.chat_service_wrap .head .srch_btn {margin-top:.7rem}
.chat_service_wrap .head .refresh {padding-top:.67rem}
.chat_service_wrap .head .save {padding-top:.67rem}
.chat_service_wrap .head .auto_complete {margin-top:.45rem}
.chat_service_wrap .head .auto_complete.active {top:1.8rem}
/* .chat_service_wrap .head .email_wrap { top: 55px; } */
.chat_service_wrap .chat_btn_wrap button, .chat_service_wrap .chat_btn_wrap a {padding:.5rem 0}
.chat_service_wrap .head .expand {display:none;}
.chat_service_wrap .chat_view .scroll {height: calc(89% - 4.5rem);}
.chat_service_wrap .chat_view{height: calc(100% - 5rem);}
footer{display: none;}
.chat_foot{position:fixed}
}
/** 챗봇 대화창 따라다니는 아이콘 **/
#floatMenu {position: absolute; left: 20px; top: 50px; color: #fff; z-index:1;}
.chat_sta_wrap{position:fixed; background:rgba(0,0,0,0.7); top:0; left:0; bottom:0; right:0; text-align:center}
.chat_sta_wrap:before{ content:""; display:inline-block; height:100%; vertical-align:middle;}
.chat_sta{ position:relative; background: #f5f5f5; border-radius: 10px; padding: 20px; display: inline-block; border: 1px solid #ddd; line-height: 1.3; width: 96%;}
.chat_sta p{ font-weight:600; word-break:keep-all; font-size: 16px;}
/** 5점 평가 */
.chat_sta textarea { resize: none; width: 100%; height: 65px; margin: 5px 0 0; padding: 5px; }
.chat_sta .satisfy { margin: 15px 0; }
.chat_sta .satisfy:after { display: block; clear: both; content: ''; }
.chat_sta .satisfy li { display:inline-block; margin: 0 0 0 7px; position: relative; }
.chat_sta .satisfy li label { position: relative; width: 21px; height: 21px; display: block; cursor:pointer; }
.chat_sta .satisfy li label:before { position: absolute; content: ''; width: 100%; height: 100%; background: url("../../../images/gcc/cbot/star.png") no-repeat center; }
.chat_sta .satisfy li input { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; opacity: 0; }
.chat_sta .satisfy li.on label:before { background-image: url("../../../images/gcc/cbot/star_ov.png"); }
.chat_sta .btn_wrap{ text-align:center; margin:20px 0 0 0}
.chat_sta .btn_wrap button{padding: 10px 30px; min-height: 35px; border: 1px solid; display: inline-block; margin: 5px 0 0 5px; -webkit-transition: all 0.2s; transition: all 0.2s; }
.chat_sta .btn_wrap button:first-child{ margin-left:0}
.chat_sta .btn_wrap .btn_blue{border-color: #1a4faf; background: #1a4faf; color: #fff;}
.chat_sta .btn_wrap .btn_navy{border-color: #435174; background: #435174; color: #fff;}
@media( max-width:319px){.chat_sta .btn_wrap button{ width:100%; margin-left:0} }
/** stt 마이크 처리 */
.voice-box{ position:absolute; bottom:55px; left:0; right:0; margin:0 auto; height:200px; border-top:1px solid #DDD; background: #326DF5;width:100%; text-align:center; padding:15px; z-index:3; color: #FFF;}
.m_loading{ position:absolute; text-align:center; left:50%; top:50%; margin-top:-19px; margin-left:-50px; width:90px; height:90px; border-radius:50%; border:15px solid rgba(255, 255, 255, .2); box-shadow:rgba(255, 255, 255, .1) 0 0 0 7px}
.m_loading img{ width:40px; position:absolute; top:50%; margin-top:-20px; left:50%; margin-left:-20px}
.link-btn{ border:0; background:none; padding:0; margin:0; background:none; width:100%; display:block; text-align:left; font-size:15px; cursor:pointer}
.dot div{ position:absolute; left:-33px; right:0; top:0; bottom:0; width:125px; height:125px; margin:auto; border-radius:50%; background:rgba(255, 255, 255, .0); -ms-animation: dot 1s linear infinite; animation: dot 1s linear infinite; animation-delay:-0.5s; }
/**@-ms-keyframes dot{
0%{ transform:scale(1)}
50%{ transform:scale(1); background:rgba(255, 255, 255, .1)}
100%{ transform:scale(1)}
}
@keyframes dot{
0%{ transform:scale(1)}
50%{ transform:scale(1); background:rgba(255, 255, 255, .1)}
100%{ transform:scale(1)}
}*/
/** form 툴팁처리 */
.tooltip-element{color:#fff;background:#000;width:16px;border-radius:8px;display:inline-block;text-align:center;line-height:16px;margin:0 5px;}
.tooltip-element-text{
display: none;
position: absolute;
max-width: 200px;
border: 1px solid;
border-radius: 5px;
font-size: 1em;
color: #fff;
background: #000;
}
.tooltip-element:hover .tooltip-element-text{ display:block;}
.fldLayerPopList{position: absolute; z-index: 9999; background:rgba(0,0,0,0.7); border: 4px solid #000; top: 0; width: 100%; height: 100%; bottom: 0; left: 0; text-align: center; color: #fff; font-size: 12px; }
@media (max-width:1279px) {
.lang_area{width: 55%;}
.lang_area .lang_c{ display:none}
}
@media (max-width: 380px) {
.chat_service_wrap .head .tit_left li { font-size: 13px; letter-spacing: -1px; padding: 0 4px;}
.chat_service_wrap .head .title_right img {width: 11px;}
.chat_service_wrap .head .title_right { padding-top: 2px;}
}
@media (max-width: 364px) {
.noti_con .help li span:last-child{width: 86%;}
}
@media (max-width: 359px) {
.chat_service_wrap .head .tit_left li { font-size: 12px;}
}
@media (max-width: 339px) {
.chat_service_wrap .head .tit_left li { font-size: 11px; padding: 0 2px; letter-spacing: -1px;}
}
/** 공지사항 상세화면 */
.ntc_attach_file {padding: 10px 0 0 0;}
.ntc_attach_file p {font-weight:600; color: #00008b; }
.ntc_attach_file a { display: inline-block; width: 19px; height: 19px; line-height: 19px; text-align: center; border: 1px solid #d1d1d1; margin-left: 4px; }
.ntc_btn_wrap { text-align:center; padding: 10px 0 0 0;}
.ntc_eval { padding:0 15px; min-height: 30px; line-height:15px; margin:1px 5px; color:#fff; border-radius:25px; word-break:keep-all; text-align:center; background-color:#326DF5; font-size:14px !important;}