@charset "UTF-8";
/*reset*/
html, body {height: 100%}
body {-webkit-backface-visibility: hidden; backface-visibility: hidden; font-size: 1.3rem; background-color: #f2f1f4;}
body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, select, table, td, textarea, th, ul, a, div {margin: 0;padding: 0; box-sizing: border-box; line-height: inherit; word-break: break-word;}
fieldset, img {border: 0}
ol, ul {list-style: none}
address, em {font-style: normal}
a {text-decoration: none}
a:visited{color: inherit;}
iframe {overflow: hidden;margin: 0;padding: 0;border: 0; vertical-align: top; width: 100%;}
input::-ms-clear {display: none}
table{border-collapse:collapse;border-spacing:0; width: 100%; table-layout: fixed;}
:disabled{background-color: inherit;opacity: 1 !important;}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #666}
::-moz-placeholder { /* Firefox 19+ */color: #666}
:-ms-input-placeholder { /* IE 10+ */color: #666}
:-moz-placeholder { /* Firefox 18- */color: #666}
:disabled::-webkit-input-placeholder { /* Chrome/Opera/Safari */color: #888}
:disabled::-moz-placeholder { /* Firefox 19+ */color: #666}
:disabled:-ms-input-placeholder { /* IE 10+ */color: #666}
:disabled:-moz-placeholder { /* Firefox 18- */color: #666}
/* 191015 (컬러명도대비) */
textarea::placeholder {color: #666}

input:-webkit-input-placeholder {color: #666}
input:-moz-placeholder {color: #666}
input:-ms-input-placeholder {color: #666}
input::placeholder {color: #666}

.blind {position: absolute; /* for Internet Explorer */ clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); padding: 0; border: 0; height: 1px; width: 1px; overflow: hidden}
.blind.type2 {display: none; font-size: 0}
/* 191014 MS.K (스크린리더 읽지 않는 문제- display: none, font-size: 0 삭제)  */
legend, caption{overflow:hidden;padding:0;width:1px;height:1px;margin-top:-1px; line-height:0; position:relative; left:0; top:-9999px}

.clfix::after {content:""; display:block; height:0px; clear:both; visibility:hidden; zoom:1;}
.clfix {display:block;zoom:1;}
button {display: inline-block;}

/*버튼 outline 삭제*/
/**:focus { outline: 1px solid #000; }*/

/*color*/
.col1{color: #afacad;}

/* 190828 MS.K */
.wa_color_red {color: #a50034}
.wa_bg_red {background-color: #a50034}

/*layout*/
#wrap {position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden}

#skipNav a{position: absolute; width: 100%; height: 30px; line-height: 30px; background-color: #333; color: #fff; left: 0; top: -30px; z-index: 99999; text-align: center;}
#skipNav a:focus{top: 0;}

/* header */
/* 21-07-14 (21년 챗봇 To-Do List: 대화 상태 알림) */
#header{position: fixed; top: 0; left: 0; width: 100%; height: 60px; background-color: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.15); z-index: 60;}
#header #titleH1{text-align: center; font-size: 16px; color: #333;}
#header #titleH1 > span {
    position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
    display: inline-block;
    background: url("../img/logo_1.png") center no-repeat;
    background-size: auto 33px;
    width: 166px;
    text-indent: -99999em;
	height: 60px;
}

#header #titleH1 span.on {
    top: 13px;
	background: none;
	text-indent: 0em;
	height: auto;
}
#header #titleH1 em {
    position: relative;
    display: block;
    color: #c93050;
    font-size: 13px;
    top: 14px;
    font-weight: 500;
}
#header #titleH1 em::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  background-color: #e497a7;
  border-radius: 100%;
  -webkit-animation: blink-indicator 3s infinite; 
  -moz-animation: blink-indicator 3s infinite; 
  -ms-animation: blink-indicator 3s infinite;
  animation: blink-indicator 3s infinite;
}

@-webkit-keyframes blink-indicator {
    0% {
        transform: scale(0.9, 0.9);
        opacity: 0.2;
    }
    50% {
        transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9, 0.9);
        opacity: 0.2;
    }
}
@keyframes blink-indicator {
    0% {
        transform: scale(0.9, 0.9);
        opacity: 0.2;
    }
    50% {
        transform: scale(1, 1);
        opacity: 1;
    }
    100% {
        transform: scale(0.9, 0.9);
        opacity: 0.2;
    }
}
#header #titleH1 em.prod span {
	display: inline-block;
	background: url(../img/right_arrow_red.png) no-repeat center center;
	width: 15px;
	height: 10px;
	background-size: 100%;
}

/* 21-07-29 (21년 챗봇 To-Do List: 출장 서비스 접수 단계 Flow 보여주기) */
#svcFlow {
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #e5e5e5;
    border-bottom: 1px solid #ccc;
	font-size: 12px;
    line-height: 34px;
    padding: 0 16px;
    /* box-shadow: 0 0 6px rgb(0 0 0 / 15%); */
}
#svcFlow ul {overflow: hidden; text-align: center;}
#svcFlow ul li {float: left; position: relative; color: #666; margin-left: 20px;}
#svcFlow ul li.active {color: #000; font-weight: bold;}
#svcFlow ul li:first-child {margin-left: 0;}
#svcFlow ul li::before {content:''; position: absolute; left: -15px; top: 0; width: 12px; height: 34px; background: url(../img/arrow_flow_white.png) no-repeat center center; background-size: 100%;}
#svcFlow ul li:first-child::before {display: none;}
/* #svcFlow ul li span {background: #aaa; width: 100%; height: 1px; display: inline-block; text-align: center;} */
#svcFlow ul li em {display: inline-block; background: #f7f7f7; font-size: 11px; color: #666; border-radius: 100%; width: 20px; line-height: 20px; text-align: center;}
#svcFlow ul li.active em {color: #000; background: #fff;}



#header #btnX,
#header #btnTerms,
.layerPopup .layerPopupTop .btnLayerx{position: absolute; right: 0; top: 50%; width: 40px; height: 40px; overflow: hidden; text-indent: -10000%; margin-top: -20px; outline-offset: -3px}
#header #btnX,
.layerPopup .layerPopupTop .btnLayerx{background: url(../img/btn_x.png) center no-repeat; background-size: 16px auto}
#header #btnTerms{background: url(../img/btn_ham_2.png) center no-repeat; background-size: 19px auto; right: auto; left: 0;}
#header #btnTerms.active{background-image: url(../img/btn_ham.png);}
#termsListBox{position: absolute; left: -5px; top: 32px; width: 175px; z-index: 101; line-height: 1; display: none;}
#termsListBox .termsListBoxIn{background: url(../img/bg03.png) left top repeat-y; background-size: 100% auto;}
#termsListBox .termsListBoxIn .termsList{padding: 0 13px;}
#termsListBox .termsListBoxIn .termsList>li+li{border-top: 1px solid #e7e6e9;}
#termsListBox .termsListBoxIn .termsList > li button {
    height: 38px;
    line-height: 38px;
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 4px;
    color: #000;
}
/*container*/
#container{padding: 60px 0 0 0; box-sizing: border-box; height: 100%; overflow-y: scroll;-webkit-overflow-scrolling:touch;}
/*#container #msgScrollBox{overflow-x: hidden; overflow-y: auto; height: 100%; position: relative;}*/
/*#container #msgScrollBox.addSuggest{padding-bottom: 42px;}*/


/*footer*/
#footer{position: fixed; bottom: 0; left: 0; width: 100%; /*min-height: 45px;*/ z-index: 50;}
#footer #msgTxtInputBox {padding: 15px 50px 15px 47px/*11px*/; background-color: #fff; box-shadow: 0 0 6px rgba(0,0,0,0.15); position: relative; z-index: 120;}
#footer #msgTxtInputBox.statusDisabled,
#footer #msgTxtInputBox.statusEnd{background-color: #dcd9df; box-shadow: 0 0 6px rgba(0,0,0,0.15) inset; }
#footer #msgTxtInputBox.statusDisabled #btnSend{background-image: url(../img/btn_send_disabled.png); box-shadow: 0 0 6px rgba(0,0,0,0.15);}

/* 190917 MS.K (Message label 추가 스타일 수정) */
#footer #msgTxtInputBox #msgTxtInput{position: relative; width: 100%; box-sizing: border-box; height: 20px; line-height: 20px; padding: 0; border: none; font-size: 13px; resize: none; vertical-align: top; overflow-y: auto; max-height: 80px; color: #333}
#msgTxtInputBox .msg_txt_inp_label {position: absolute; left: 10px; color: #333/* ; font-size: 10px; font-weight: bold */}

#footer #msgTxtInputBox.statusEnd #msgTxtInput{background-color: #dcd9df;}
#footer #msgTxtInputBox #btnSend{position: absolute; right: 10px; bottom: 3px; width: 35px; height: 35px; border: none; border-radius: 35px; background: url(../img/btn_send.png) center no-repeat #847b89 /* #c4c1c9 */; background-size: 20px 20px; overflow: hidden; text-indent: -10000%;}
#footer #msgTxtInputBox #btnSend.on{background-color:#e84472; box-shadow: 0 0 6px rgba(0,0,0,0.15);}

#footer #msgTxtInputBox #btnHome{position: absolute; left: 3px; bottom: 6px; width: 40px; height: 40px; border: none; background: url(../img/btn_home.png) center no-repeat; background-size:40px; overflow: hidden; text-indent: -10000%;}


/* 주소입력  201803*/
.text_one_auto {border-bottom: 1px solid #e2e0e4; width: 100%; padding: 5px 9px; background-color: transparent;}
.text_one_auto textarea { position: relative; width: 100%; box-sizing: border-box; height: 20px; line-height: 20px; 
  padding: 0; border: none; font-size: 13px; resize: none; vertical-align: top; overflow-y: auto; max-height: 80px;color: #333; }