@charset "utf-8";
/* font-face */
@font-face {
    font-family: 'BonGothic';
    src: url('/font/NotoSansKR-Regular.woff2') format('woff2'),
          url('/font/NotoSansKR-Regular.woff') format('woff');
    font-style: normal;
}

@font-face {
    font-family: 'BonMyeongjo';
    src: url('/font/NotoSerifKR-Regular.woff2') format('woff2'), 
          url('/font/NotoSerifKR-Regular.woff') format('woff');
    font-style: normal;
}

@font-face {
    font-family: 'NanumGothic';
    src: url('/font/NanumGothic.woff') format('woff');
    font-style: normal;
}

@font-face {
    font-family: 'NanumSquare';
    src: url('/font/NanumSquare.woff') format('woff');
    font-style: normal;
}

html {height:100%;}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, #wrap div.chat_header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
	border:0;
}
h1, h2, h3 {font-weight:600;}
body {height:100%;background:#fff;font-size:14px;font-family:'맑은고딕','Malgun Gothic','돋음','Dotum','sans-serif'!important;line-height:1.5}
blockquote,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,input,li,ol,p,pre,td,textarea,th,ul{font-family:'맑은고딕','Malgun Gothic','돋음','Dotum','sans-serif';}
strong {font-weight:600;}
article,aside,details,figcaption,figure,footer,header,#wrap div.chat_header,hgroup,menu,nav,section {display:block;}
ul,ol{list-style:none} 
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,
q:before, q:after {content:'';content:none;}

/* ####### WebSquare CSS ####### */
.w2group {background:transparent;}

/* ####### common CSS ####### */
.mt5{margin-top:5px!important;}

/* Alink */
a {text-decoration:none; color:#151515;}
a:hover {text-decoration: none; color:#ffffff;}

/* 챗봇 답변에 바로가기 링크 */
a.url-link {text-decoration: underline;}

/*바로가기 링크 밑줄 추가 및 색상변경 */
div .c a.link {text-decoration:underline; color:#FFD966;}
div .c a.link:hover {text-decoration:underline; color:#ffffff;}

/* Basic */
em, address{font-style:normal}
img{border:0; vertical-align:middle;width:100%;height:100%;object-fit:contain;}

/* font*/
.fontSl {font-family:"맑은고딕",'Malgun Gothic';}
.fontF1 {font-family:Dotum;}
.fontF2 {font-family:"바탕체";}
.fontF3 {font-family:"궁서";}
.fontF4 {font-family:"맑은고딕",'Malgun Gothic';}
.fontF5 {font-family:"굴림";}
.fontF6 {font-family:"본고딕","BonGothic";}
.fontF7 {font-family:"본명조","BonMyeongjo";}
.fontF8 {font-family:"나눔고딕","NanumGothic";}
.fontF9 {font-family:"나눔스퀘어","NanumSquare";}
.fw600{font-weight:600 !important;}

/* Display */
.fl{float:left;}
.fr{float:right;}
.clr{clear:both !important;}
.clr:after{content:'';display:block;clear:both}	
.blind{position:absolute;top:-10000em;left:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0}
/* Align */
.alL {text-align:left !important;}
.alC {text-align:center !important;}
.alR {text-align:right !important}
.alT {vertical-align:top !important;}
.alM {vertical-align:middle !important;}
.alB {vertical-align:bottom !important}
/* Form */
input, select {vertical-align:middle;}
legend{display:block;position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0} 
select, textarea, input, label{vertical-align:middle}
textarea {color:#333; border: 1px solid #d0d0d0;font-family:'맑은고딕','Malgun Gothic','돋음','Apple Gothic','Dotum','AppleSDGothicNeo','sans-serif';line-height:1.3}
input[type="text"],
input[type="password"]{background:#fff;padding:3px 5px; border:1px solid #cdcdcd;font-family:'맑은고딕','Malgun Gothic','돋음','Apple Gothic','Dotum','AppleSDGothicNeo','sans-serif';}
input[type="button"] {cursor:pointer;border:0}
select {height:25px;border: 1px solid #d0d0d0;font-family:'맑은고딕','Malgun Gothic','돋음','Apple Gothic','Dotum','AppleSDGothicNeo','sans-serif';line-height:1.3}
button,a {cursor:pointer; }

/* Table */
table {border-collapse:collapse}
table th {font-weight:normal;}
caption {position:absolute;top:-10000em;left:0;width:0;height:0;overflow:hidden;visibility:hidden;font-size:0;line-height:0}

.dn {display:none;}
#wrap {position:relative;min-height:100%;min-width:360px;width:100%}
/* #wrap div.chat_header {position:fixed;top:0;left:0;z-index:10;width:100%;height:65px;background:#6c2dff;min-width:360px;width:100%;} */
#wrap div.chat_header {position:fixed;top:0;left:0;z-index:10;width:100%;height:65px;background:#113B6B;min-width:360px;width:100%;}

/* #wrap div.chat_header h2 {text-align:center;color:#fff;font-size:1.4rem;padding-top:5px;height:30px;overflow:hidden;} */
/* #wrap div.chat_header h2 {text-align:center;color:#fff;font-size:1.4rem;padding-top:18px;height:46px;overflow:hidden;} */
#wrap div.chat_header h2 {text-align:center;color:#fff;font-size:17pt;padding-top:14px;height:50px;overflow:hidden;}
#wrap div.chat_header .notibox {text-align:center;overflow:hidden;height:22px;}
#wrap div.chat_header span {font-size: 0.9rem;display: inline-block;overflow:hidden;height:22px;}
#wrap div.chat_header span.txt {color:#FFF;}
#wrap div.chat_header span.highlight {color:#FFF;font-weight: 600;}
#wrap div.chat_header .headtitle{margin-left: 53px;}
#wrap div.chat_header .tinr {overflow:hidden;padding:0 0;}
#wrap div.chat_header .title {position:absolute;top:11px;left:0;}
#wrap div.chat_header h1.title{display:inline-block;vertical-align:middle;width:113px;height:43px;background:url(/images/chatbot/h1_logo.png) no-repeat 0 0;}
/* 바로가기 리스트 버튼*/
/* #wrap div.chat_header .rbtn span#group_btnDetail  {position:absolute;top:18px;right:70px;height:28px}
#wrap div.chat_header .rbtn input#btnDetail {display:inline-block;vertical-align:middle;width:28px;height:28px;background:url(/images/chatbot/detail_btn.png) no-repeat 0 0;background-size:27px;} */
/* 환경설정 버튼*/
#wrap div.chat_header .rbtn span#group_btnConfig {position:absolute;top:11px;right:18px;height:45px}
#wrap div.chat_header .rbtn input#btnConfig {display:inline-block;vertical-align:middle;width:43px;height:45px;background:url(/images/chatbot/btn_config.png) no-repeat 0 0;}
/*
#wrap div.chat_header .rbtn a.btn {padding:0 20px;background:#5f554d;color:#fff;}
#wrap div.chat_header .rbtn a.btn.on {background:#ff6600;}
#wrap div.chat_header .rbtn a.btn_help {padding:0 20px;background:#5f554d;color:#fff;}
#wrap div.chat_header .rbtn a.btn_help.on {background:#ff6600;}
#wrap div.chat_header .rbtn a.close {width:30px;height:30px;text-align:center;background:#a59481;}
*/
#wrap #ct_msg {position:fixed;left:0;bottom:0;width:100%;height:67px;/*border-top:1px solid #dddddd;*/}
#wrap #ct_msg .tinr {position:relative;padding:9px 18px 10px 18px;}
#wrap #ct_msg .tinr .icon {position:absolute;top:20px;left:10px;}
#wrap #ct_msg .tinr .icon a:first-child {margin-bottom:4px;}
#wrap #ct_msg .tinr .icon a {display:block;overflow:hidden;height:24px;}
#wrap #ct_msg .tinr .icon a.on img {margin-top:-24px;}
#wrap #ct_msg .masbox {display:inline-block}
#wrap #ct_msg .masbox textarea.disable{background:#ffffff!important}
#wrap #ct_msg .masbox textarea {float:left;width:90%;height:33px;padding:5px 10px;border:0;font-size: 14px;border:1px solid #a9a2a2;ime-mode:active;}
#wrap #ct_msg .masbox input {position:absolute;right:10px;width:63px;height:45px;margin-top:5px;text-align:center;border:0;background:#0644f1;color:#fff;line-height:39px;font-size:14px;font-weight:700;
border-radius:6px 6px 6px 6px;
-moz-border-radius:6px 6px 6px 6px;
-webkit-border-radius:6px 6px 6px 6px;
}

/* 챗봇선택 콤보박스 및 버튼 영역 */
#wrap #btnBackground {background: #fff;min-width: 360px;padding: 4px 10px 0 10px;height: 32px;}

/* 챗봇선택 콤보박스 */
#wrap #btnBackground #ct_selectWrap{float: left;}
#wrap #btnBackground #selectboxChatDomain{background: #fff;color:#292929;width:120px;height:28px;font-size:15px;font-weight:700;padding-left: 10px;border: 1px solid #d0d0d0;}

/* 챗봇이동버튼 */
#wrap #btnBackground #chatDomainMove {
    position: absolute;
    width: 58px;
    text-align: center;
    border: 0;
    background: #692bff;
    color: #fff;
    line-height: 26px;
    font-size: 14px;
    font-weight: 700;
    margin-left: 4px;
    border-radius: 20px 20px 20px 20px;
    -moz-border-radius: 20px 20px 20px 20px;
    -webkit-border-radius: 20px 20px 20px 20px;
}

/* 상단 버튼 영역 */
#wrap #btnBackground #topBtnWrap {float: right;}

/* 숏폼영상 버튼*/
#wrap #youtubeBtn {width:110px;text-align:center;border:0;background:#FF6666;color:#fff;line-height:26px;font-size:14px;font-weight:700;margin: 0 4px;border-radius:20px 20px 20px 20px;-moz-border-radius:20px 20px 20px 20px;-webkit-border-radius:20px 20px 20px 20px;}

/* 개선요구 버튼 */
#wrap #reqBtn {width:90px;text-align:center;border:0;background:#692bff;color:#fff;line-height:26px;font-size:14px;font-weight:700;margin: 0 4px;border-radius:20px 20px 20px 20px;-moz-border-radius:20px 20px 20px 20px;-webkit-border-radius:20px 20px 20px 20px;}

/* 설문조사 버튼 */
#wrap #endBtn {width:70px;text-align:center;border:0;background:#692bff;color:#fff;line-height:26px;font-size:14px;font-weight:700;margin-left: 4px;border-radius:20px 20px 20px 20px;-moz-border-radius:20px 20px 20px 20px;-webkit-border-radius:20px 20px 20px 20px;}

.loading {}
.msg_width60 {max-width:60%}
.msg_width74 {max-width:74%}
.msg_width80 {max-width:80%}
.msgBox {position:relative;top:97px;overflow:hidden;overflow-y:auto;}
.msgBox#chatHistory {position:relative;top:97px;overflow:hidden;overflow-y:auto;border-bottom: 1px solid #dddddd;}
.msgBox .c { white-space: pre-line; word-break: keep-all;}
.msgBox .tinr {overflow:hidden;padding:10px 10px;}
.msgBox .botbox {overflow:hidden;padding-bottom:10px;}
.msgBox .botbox .tit {float:left;background:url(/images/chatbot/chatbot2.png) no-repeat 0 0;background-size: contain; width: 55px; height: 55px;}
.msgBox .botbox .tit1 {float:left;background-size: contain; width: 55px; height: 55px;}
.msgBox .botbox .tit img {width:55px;}


/*티봇 인사*/
.msgBox .botbox .tit_hello {float:left;background:url(/images/chatbot/chatbot2.png) no-repeat 0 0;background-size: contain; width: 55px; height: 55px;}
/*티봇 생각(로딩) */
.msgBox .botbox .tit_think {float:left;background:url(/images/chatbot/chatbot2.png) no-repeat 0 0;background-size: contain; width: 55px; height: 55px;}
/*티봇 사과*/
.msgBox .botbox .tit_sorry {float:left;background:url(/images/chatbot/chatbot2.png) no-repeat 0 0;background-size: contain; width: 55px; height: 55px;}

/*인사말 강조색*/
.hello-boldColor{font-weight:700; color: #2B4BBF;}

.msgBox .botbox .msg {float:left;position:relative;padding:10px 14px;background:#EBE7FB;color:#292929;margin-top:4px;margin-left:10px;
border-radius:0 10px 10px 10px;
-moz-border-radius:0 10px 10px 10px;
-webkit-border-radius:0 10px 10px 10px;
}
.msgBox .botbox .msg .ar {position:absolute;top:-1px;left:-19px;width:19px;height:20px;background: #fff url(/images/chatbot/bg_msg_f.png) no-repeat 0 0;}
.msgBox .botbox .msg .date {position:absolute;bottom:4px;right:-90px;}
.msgBox .quBox {overflow:hidden;padding:0 14px 10px 0;}
.msgBox .quBox .msg {position:relative;float:right;max-width:75%;padding:10px 14px;background:#ECECEC;color:#232121;
border-radius:10px 0px 10px 10px;
-moz-border-radius:10px 0px 10px 10px;
-webkit-border-radius:10px 0px 10px 10px;
}
.msgBox .quBox .msg .ar {position:absolute;top:0px;right:-21px;width:21px;height:34px;background: #e8e8e8 url(/images/chatbot/bg_msg_s.png) no-repeat 0 0;}
.msgBox .quBox .msg .date {position:absolute;bottom:4px;left:-80px;color:#151515;}
.bot_btn {padding:10px 0 0 0;text-align:right;}
.btn_t1 {display:inline-block;width:80px;height:38px;text-align:center;background:#ff6600;color:#fff;line-height:38px;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
.btn_t2 {display:inline-block;width:80px;height:38px;text-align:center;background:#5f554d;color:#fff;line-height:38px;
border-radius:4px 4px 4px 4px;
-moz-border-radius:4px 4px 4px 4px;
-webkit-border-radius:4px 4px 4px 4px;
}
.txtarv {width:99%;height:98%;}
@media (max-width:360px){html{font-size:10px;}
	.msgBox .botbox .msg {max-width:50%;}
	.msgBox .botbox .msg .date {right:-59px;}
	.msgBox .quBox .msg .date {left:-58px;}
	.msgBox .quBox .msg {max-width:67%;}
}
@media (min-width:361px) and (max-width:399px){html{font-size:11px;}
	.msgBox .botbox .msg {max-width:50%;}
	.msgBox .botbox .msg .date {right:-64px;}
	.msgBox .quBox .msg .date {left:-64px;}
	.msgBox .quBox .msg {max-width:67%;}
}
@media (min-width:400px) and (max-width:439px){html{font-size:12px;}
	.msgBox .botbox .msg .date {right:-64px;}
	.msgBox .botBox .msg .date {left:-64px;}
	.msgBox .botBox .msg {max-width:67%;}
}
@media (min-width:440px) and (max-width:479px){
	html{font-size:13px;}
	.msgBox .botbox .msg .date {right:-74px;}
	.msgBox .quBox .msg .date {left:-74px;}
}
/* @media (min-width:480px) and (max-width:519px){
	html{font-size:14px;}
	.msgBox .botbox .msg .date {position:absolute;bottom:4px;right:-44px;}
	.msgBox .quBox .msg .date {left:-74px !important;}
	.msgBox .quBox .msg {max-width:70%;}
} */
/* @media (min-width:520px) and (max-width:559px){html{font-size:15px;}} */
/* @media (min-width:560px) and (max-width:599px){html{font-size:16px;}} */
@media (min-width:480px) and (max-width:519px){
	html{font-size:13px;}
	.msgBox .botbox .msg .date {position:absolute;bottom:4px;right:-44px;}
	.msgBox .quBox .msg .date {left:-74px !important;}
	.msgBox .quBox .msg {max-width:70%;}
}
@media (min-width:520px) and (max-width:559px){html{font-size:13px;}}
@media (min-width:560px) and (max-width:599px){html{font-size:13px;}}
/* 대화정렬모드 설정 */
.msgBox .quBox .msg_r {float:left !important;max-width:86%;margin-left:25px;border-radius:0px 10px 10px 10px;-moz-border-radius:0px 10px 10px 10px;-webkit-border-radius:0px 10px 10px 10px;}

.sback {display:none;position:absolute;top:0;left:0;z-index:1000;width:100%;height:100%;background:#000;opacity:0.35}
.submsg {clear:both;margin-top:10px;border:1px solid #dddddd;border-radius:10px;background-color:#fff;overflow:hidden; overflow-y:auto;max-height:190px;width: fit-content;}
.submsg a {display:block;padding:2px 20px 2px 10px;border-top:1px solid #dddddd;color:#0363B3;}
.submsg a.ar {background:url(/images/chatbot/lnk_ar.png) no-repeat right center;}
.submsg a:first-child {border-top:0;}
.submsgFix {clear:both;overflow:hidden; overflow-y:auto;max-height:210px;}

/*밑줄태그*/
.submsgatag {border-bottom:1px solid #000000;color:#000000;}

.btn-link {}
.btn-link:hover {background:url(/images/chatbot/lnk_ar.png) no-repeat right center;}
.btn-link:focus { text-decoration: none;}

.subbtn {clear:both;margin-top:4px;white-space:normal !important;}
/* .subbtn {clear:both;margin-top:2px;white-space:normal !important;} */
.subbtn p {margin-bottom:2px;}
.subbtn a {display: inline-block;background:#905BD3;border:1px solid #905BD3;margin:2px 6px 0 0;border-radius:10px;color:#FFFFFF;padding:0 7px;}
.subbtn a.noreply {background:#FFFFFF;border:1px solid #DFDFDF;color:#333333;}
.subbtn a.noreply b.boldColor {color:#2B4BBF;}
.subbtn a:hover {background:transparent !important;color:#292929 !important;border:1px solid #B1C5D6;}
.subbtn-link {}

/* 링크버튼에 첨부파일 사용하는 버튼*/
.subbtn-link.law {background-color: #fff;border: 1px solid #dddddd;color: #0363B3;}

/* 링크버튼에 바로가기 사용하는 버튼*/
.subbtn-link.url {background-color: #ECECEC;border: 1px solid #ECECEC;color: #292929;}

.submid-link {margin-top: 10px;}

/* 챗봇 답변 라디오버튼*/
.subbtn-radio {
    background: transparent;
    width: auto;
    overflow: hidden;
    padding-top: 8px;	
}
.subbtn-radio .subbtn-radio_item {
    float: left;
    margin-right: 8px;
}
.subbtn-radio .subbtn-radio_input {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
.subbtn-radio .subbtn-radio_label {
    display: inline-block;
    margin-top: 1px;
    margin-left: 5px;
    line-height: 15px;
	font-size: 14px;
	font-weight:700;
    cursor: pointer;
	vertical-align: middle;	
}

/*키워드 링크*/
.keyword-link {border-bottom:1px solid #151515;color:#151515;}
.keyword-link:hover {text-decoration: none;color: #8e5eff;}

/* 설문조사 팝업창 */
.contBox {margin-top:18px;}

.connt {font-size:1.3rem;font-family: '맑은고딕','Malgun Gothic','돋음','Dotum','sans-serif';}

.pop_wrap02 #group3092 input {position:relative;width:110px;margin-top:5px;text-align:center;border:1px solid #bcbfca;background:#fff;color:#000000;line-height:30px;font-size:17px;font-weight:700;font-family:'Noto Sans KR', 'Helvetica', sans-serif;
border-radius:6px 6px 6px 6px;
-moz-border-radius:6px 6px 6px 6px;
-webkit-border-radius:6px 6px 6px 6px;}

.pop_wrap02{width:550px;padding:20px; border:0px solid #7396c1; background:#fff;}

/* 스크롤바 디자인 변경 */
::-webkit-scrollbar{-webkit-appearance:none;width:12px;}
/* ::-webkit-scrollbar:vertical{width:12px;} */
::-webkit-scrollbar-thumb{background-color:#777b7e;border-radius:10px;border:2px solid #ffffff;}
::-webkit-scrollbar-track{border-radius:10px;background-color:#ffffff;}

/* 웨이포인트 */
.submsgWayPoint {border-bottom: 1px solid #CFD1D8;}
.submsgWayPoint a {color:#2B4BBF;font-weight:bold;}
.submsgWayPoint a:hover {color:#000000 !important;}

/* 챗봇 도메인관리 팝업창*/
.pop_domain_wrap {width:550px;padding:20px; border:0px solid #7396c1; background:#fff;}
.pop_domain_wrap .domain_group_layer {width:100%;margin-top: 52px;display:table;}
.pop_domain_wrap .domain_group_inner {display:table-cell; text-align: center;vertical-align: middle;}
.pop_domain_wrap .domain_group_content {display: inline-block;}
.pop_domain_wrap .domain_group_server {float:left;text-align:center;padding: 10px 14px;margin-right: 4px;margin-bottom: 4px;background: #EBE7FB;border: 2px solid #1177d3;border-radius: 10px 10px 10px 10px;-webkit-border-radius: 10px 10px 10px 10px;}

/* 챗봇 도메인관리 server */
.pop_domain_wrap div.chat_server_tit_wrap {border-bottom: 1px solid #000000;padding: 4px 0;}
.pop_domain_wrap div.chat_server_tit_wrap2 {border-bottom: 1px solid #000000;padding: 30px 0 4px 0;}
.pop_domain_wrap span.chat_server_tit {font-size: 15px;font-weight: 800;color: #000000;display: inline-block;vertical-align: middle;/*height: 40px;*/line-height: 20px;margin-left: 10px;margin-right: 10px;text-align: right;}
.pop_domain_wrap span.domain_label {float:left;width: 130px;font-size: 13px;font-weight: 600;color: #686868;display: inline-block;vertical-align: middle;/*height: 40px;*/line-height: 20px;margin-right: 10px;text-align: right;}

/* 챗봇 도메인관리 on/off */
.pop_domain_wrap .wrap_radiocheck  {padding-bottom: 4px !important;margin: 4px 4px 4px 20px !important;width:300px !important;}
.pop_domain_wrap .w2radio_input {width: 16px; height: 16px;}
.pop_domain_wrap .w2radio_label  {font-size: 16px; font-weight: 600;}

/* 웹접근성 컨텐츠 숨기기*/
.web-access-blind{position: absolute;width: 1px;height: 1px;clip: rect(0 0 0 0);overflow: hidden;}