@charset "utf-8";

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/NotoSansKR-Regular.woff2") format("woff2"),
         url("../fonts/NotoSansKR-Regular.woff") format("woff"),
         url("../fonts/NotoSansKR-Regular.otf") format("opentype");
  }
 
@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 500;
    src: url("../fonts/NotoSansKR-Medium.woff2") format("woff2"),
         url("../fonts/NotoSansKR-Medium.woff") format("woff"),
         url("../fonts/NotoSansKR-Medium.otf") format("opentype");
  }

@font-face {
    font-family: 'Noto Sans KR';
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/NotoSansKR-Bold.woff2") format("woff2"),
         url("../fonts/NotoSansKR-Bold.woff") format("woff"),
         url("../fonts/NotoSansKR-Bold.otf") format("opentype");
  }

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
html{height:100%;font-size:10px}
body{min-width:320px;height:100%;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;-ms-text-size-adjust:none;text-size-adjust:none}
body,th,td,input,select,textarea,button{font-family:'Noto Sans KR','Apple SD Gothic Neo',sans-serif;font-size:1.4rem;color:#333;font-weight:400;line-height:1}
fieldset,img{border:0 none}
dl,ul,ol,menu,li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
input,select,textarea,button{font-size:100%;vertical-align:middle}
input[type='text'],input[type='password'],input[type='submit'],input[type='search']{-webkit-appearance:none;border-radius:0}
input:checked[type='checkbox']{background-color:#666;-webkit-appearance:checkbox}
button,input[type='button'],input[type='submit'],input[type='reset'],input[type='file']{-webkit-appearance:button;border-radius:0}
input[type='search']::-webkit-search-cancel-button{-webkit-appearance:none}
button{border:0 none;background-color:transparent;cursor:pointer}
table{border-collapse:collapse;border-spacing:0}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}
a{text-decoration:none}
a:active,a:hover{text-decoration:none}
mark{background-color:transparent}
/* placeholder 컬러 변경 */
input::-webkit-input-placeholder{color:#999}/* chrome, Edge */
input:-moz-placeholder{color:#999}/* firefox 4 t0 18 */
input::-moz-placeholder{color:#999}/* firefox 19+ */
input:-ms-input-placeholder{color:#999}/* IE 10, 11 */
input::-ms-input-placeholder{color:#999}/* Edge */
input::placeholder{color:#999;opacity:1}/* opacity - 파이어폭스에서 뿌옇게 나오는 현상 방지*/
/* 포커스 시 placeholder 숨기기 - 필요에 따라 사용 */
input:focus::-webkit-input-placeholder{color:transparent}
input:focus:-moz-placeholder{color:transparent}
input:focus::-moz-placeholder{color:transparent}
input:focus:-ms-input-placeholder{color:transparent}
input:focus::-ms-input-placeholder{color:transparent}
input:focus::placeholder{color:transparent}
/* 대체텍스트 숨김 */
.screen_out{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;line-height:0;white-space:normal;word-wrap:break-word;word-break:break-all;clip:rect(0,0,0,0)}
/* Background Image - common 요소 */
.ico_comm{overflow:hidden;display:inline-block;background-repeat:no-repeat;background-size:contain;vertical-align:top;line-height:999px}
.point_txt{color:#3191db}

/* header */
.chat_header{position:relative;height:50px;background-color:#104573;text-align:center}
.chat_header .h_tit{font-size:2rem;color:#fff;padding:10px 40px;font-weight:500;line-height:1.5;letter-spacing:-.6px}
.menu_btn{position:absolute;top:9px;padding:5px}
.btn_home{left:10px}
.btn_home .ico_home{width:24px;height:23px;background-image:url(../images/ico_home.png)}
.btn_help{right:10px}
.btn_help .ico_help{width:23px;height:23px;background-image:url(../images/ico_help.png)}

/* content */
.chat_wrap{height:100%}
.chat_container{overflow-y:auto;position:absolute;left:0;top:50px;right:0;bottom:51px;background-color:#f8f8f8}
.chat_content{height:100%;padding:15px 15px 0 15px;box-sizing:border-box}
.bubble_wrap{padding-bottom:50px}
.category_list{margin-left:-8px;font-size:0}
.category_item{display:inline-block;width:25%;vertical-align:top}
.category_item .category_link{display:block;padding-top:8px;margin:0 0 10px 8px;height:85px;background-color:#fff;border-radius:10px;text-align:center;border:1px solid #ddd;box-sizing:border-box}
.category_link .category_unit{display:inline-block;height:30px;vertical-align:middle}
.category_link .category_txt{display:inline-block;font-size:1.2rem;color:#333;line-height:1;vertical-align:middle}
.category_unit:after{overflow:hidden;display:inline-block;height:100%;vertical-align:middle;content:''}
.category_item .ico_comm{display:block;margin:0 auto 6px;height:35px}
.category_item .ico_menu01{width:37px;background-image:url(../images/ico_menu01.png)}
.category_item .ico_menu02{width:33px;background-image:url(../images/ico_menu02.png)}
.category_item .ico_menu03{width:37px;background-image:url(../images/ico_menu03.png)}
.category_item .ico_menu04{width:35px;background-image:url(../images/ico_menu04.png)}
.category_item .ico_menu05{width:35px;background-image:url(../images/ico_menu05.png)}
.category_item .ico_menu06{width:31px;background-image:url(../images/ico_menu06.png)}
.category_item .ico_menu07{width:38px;background-image:url(../images/ico_menu07.png)}
.category_item .ico_menu08{width:35px;background-image:url(../images/ico_menu08.png)}
.bubble_area{position:relative;padding:5px 0 0 50px}
.bot_box{position:absolute;left:0;top:0}
.bot_box .ico_bot{width:40px;height:40px;background-image:url(../images/ico_chatbot_new.png)}
.bubble_box{position:relative;float:left}
.bubble_unit{position:relative;float:left;padding:10px;font-size:1.5rem;border-radius:0 10px 10px;background-color:#dff6ff;line-height:1.2;word-break:keep-all;clear:both}/* 2020-11-16 수정 */
.bubble_unit:before{position:absolute;top:0;left:-7px;border-right:7px solid #dff6ff;border-bottom:9px solid transparent;content:''}
.bubble_unit+.bubble_unit{margin-top:5px}/* 2020-11-16 추가 */
.bubble_time{display:block;padding-top:5px;font-size:1.2rem;color:#888;line-height:1.5;letter-spacing:-.1px;clear:both}
.bubble_area:after,.user_bubble_area:after,.user_bubble_box:after{display:block;clear:both;content:''}
.bubble_area+.bubble_area{margin-top:10px}
.user_bubble_area{position:relative;padding-right:7px;margin-bottom:20px}
.user_bubble_box{float:right}
.user_bubble_box .bubble_unit{clear:both;float:right;background-color:#ffd856;border-radius:10px 0 10px 10px}
.user_bubble_box .bubble_unit:before{left:auto;right:-7px;border-left:7px solid #ffd856;border-right:0;border-bottom:9px solid transparent}
.user_bubble_box .bubble_time{text-align:right}
.bubble_area+.user_bubble_area{margin-top:20px}
.category_box+.bubble_area{margin-top:2px}
.menu_area{overflow-y:hidden;overflow-x:auto;clear:both;margin:10px -15px 20px 0;font-size:0;white-space:nowrap}
.menu_box{overflow:hidden;display:inline-block;width:206px;border-radius:10px;background-color:#dff6ff;vertical-align:top}
.menu_box+.menu_box{margin-left:10px}
.menu_box .menu_tit{display:block;padding:7px 0;font-size:1.6rem;color:#fff;font-weight:bold;background-color:#3191db;line-height:1.2;text-align:center}
.menu_list{padding:7px 10px 12px}
.menu_list .menu_item{margin-top:6px}
.menu_list .menu_item:first-child{margin-top:0}
.menu_item .menu_link{display:block;padding:9px 7px 7px;height:34px;font-size:1.4rem;color:#333;background-color:#fff;border-radius:5px;text-align:center;line-height:1.2;box-sizing:border-box}
.menu_item .menu_link:hover{color:#fff;background-color:#0165bb}
.link_txt{display:block;padding:7px 0;font-size:1.3rem;color:#333;text-align:center;border-top:1px solid #f2fbff;line-height:1.4;box-sizing:border-box}
.link_txt:after{display:inline-block;margin:6px 0 0 8px;width:9px;height:6px;background-image:url(../images/ico_arrow.png);background-size:contain;vertical-align:top;content:''}
.btn_group{margin:10px 0 0 -10px;font-size:0}
.btn_link{position:relative;display:inline-block;width:100%;vertical-align:top}
.btn_link .btn_label{display:block;padding:8px 15px;margin-left:10px;font-size:1.4rem;color:#333;font-weight:500;line-height:1.3;letter-spacing:-.1px;background-color:#fff;border-radius:18px;text-align:left;box-sizing:border-box}
.btn_group.is_half .btn_link{width:50%}
.btn_group.is_half .btn_label{text-align:center}
.btn_link_type .btn_label{color:#fff;background-color:#3191db}
.ico_arrow{position:absolute;right:10px;top:50%;margin-top:-5px;width:11px;height:10px;background-image:url(../images/ico_arrow2.png)}
.ico_arrow2{position:absolute;right:10px;top:50%;margin-top:-6px;width:7px;height:11px;background-image:url(../images/ico_arrow3.png)}
.ico_download{position:absolute;right:10px;top:50%;margin-top:-6px;width:13px;height:12px;background-image:url(../images/ico_download.png)}
.ico_more{margin:7px 0 0 6px;width:9px;height:6px;background-image:url(../images/ico_arrow.png)}
.btn_group_type{margin:10px 0 0 -10px}
.btn_group_type .btn_label{text-align:left}
.btn_group_type .btn_link+.btn_link{margin-top:5px}
.btn_unit .btn_link{margin-top:5px}
.btn_unit .btn_label{padding:7px 15px;margin-left:0;text-align:center;border:1px solid #3191db}
.img_box{overflow:hidden;margin-top:10px;font-size:0;border-radius:10px}
.img_box img{max-width:100%}

/* bottom */
.chat_bottom{position:absolute;left:0;right:0;bottom:1px;border-top:1px solid #ddd;box-sizing:border-box}/* 2020-11-16 추가 */
.chat_bottom_inner{font-size:0}
.inp_box{position:relative;padding:0 50px}
.inp_box .inp_txt{position:relative;padding:15px 10px;height:50px;font-size:1.6rem;background-color:#fff;border-left:1px solid #ddd;box-sizing:border-box}
.inp_txt .inp{display:block;padding:0;width:100%;height:100%;font-size:1.4rem;border:0 none;background:none;outline:none;text-indent:inherit}
.btn_control{position:absolute;left:0;top:0;padding:8px 9px 9px 8px}
.btn_control .ico_control{width:33px;height:33px;background-image:url(../images/ico_font_control.png)}
.btn_send{position:absolute;right:0;top:0;width:50px;height:50px;background-color:#c1c1c1}
.ico_send{width:23px;height:24px;background-image:url(../images/ico_send.png)}
.btn_send.is_active{background-color:#0165bb}
.font_control{position:absolute;left:0;right:0;bottom:71px;margin:0 37px;height:158px;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.07);border-radius:15px;background-color:#fff}
.font_inner{padding:30px 40px}
.font_inner .box_tit{display:block;font-size:1.5rem;line-height:1.5;font-weight:normal;text-align:center}
.font_bar{position:relative}
.font_level{margin-top:39px;width:100%;font-size:0}
.font_level_type{position:relative;display:inline-block;width:33.3333%;height:2px;background-color:#c3d9f2;vertical-align:top}
.font_level_type:after{position:absolute;top:-6px;right:0;width:12px;height:12px;background-color:#c3d9f2;border-radius:50%;content:''}
.font_level_type:first-child:before{position:absolute;top:-6px;left:0;width:12px;height:12px;background-color:#c3d9f2;border-radius:50%;content:''}
.level_bar{position:absolute;left:0;top:-19px;margin-left:-19px;width:37px;height:37px;text-align:center;background-color:#3191db;border-radius:50%}
.level_bar .bar_txt{display:inline-block;margin-top:11px;font-size:1.5rem;color:#fff;vertical-align:top}
.font_inner .btn_control{top:auto;left:30px;bottom:25px;padding:10px}
.ico_minus{width:15px;height:4px;background-image:url(../images/ico_minus.png)}
.ico_plus{width:13px;height:13px;background-image:url(../images/ico_plus.png)}
.font_inner .btn_zoom{left:auto;bottom:22px;right:28px}

/* 자동완성 */
.relate_search{position:absolute;left:0;right:0;bottom:51px;border-radius:10px;box-shadow:-3px 0 3px 0 rgba(0,0,0,0.1)}
.search_inner{overflow-x:hidden;overflow-y:auto;max-height:161px;background-color:#fff;border-top-left-radius:10px;border-top-right-radius:10px}
.search_item:first-child .search_link{padding-top:7px}
.search_link{overflow:hidden;display:block;padding:6px 15px 7px;max-width:100%;font-size:1.4rem;color:#333;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.1px;box-sizing:border-box}
.search_link:hover{background-color:#ebf8ff}

/* layer */
.dimmed{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:100}
.layer_wrap{display:none;position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;border-radius:15px;z-index:200}
.layer_inner{overflow:hidden;display:inline-block;margin-right:-4px;width:330px;border-radius:15px;vertical-align:middle}
.layer_wrap:after{display:inline-block;height:100%;vertical-align:middle;content:''}
.layer_cont{padding:30px 20px 0;background-color:#fff}
.layer_cont .layer_h_tit{display:block;margin-bottom:21px;font-size:1.8rem;color:#333;line-height:1.5;font-weight:500}
.layer_cont .layer_txt{font-size:1.4rem;color:#666;line-height:1.5}
.btn_area{overflow:hidden;margin:30px -20px 0;font-size:0}
.layer_btn{display:inline-block;width:100%;height:40px;font-size:1.4rem;color:#fff;background-color:#3191db;line-height:1.5;vertical-align:top}
.layer_btn_type{color:#666;background-color:#eee}
.btn_area_half .layer_btn{width:50%}
.notice_box{overflow-x:hidden;overflow-y:auto;max-height:351px}
.notice_box .notice_desc{font-size:1.4rem;color:#666;line-height:1.5;text-align:left;word-break:keep-all}
.notice_desc+.notice_desc{margin-top:15px}
.layer_sub_tit{display:block;font-size:1.4rem;font-weight:normal;line-height:1.5;text-align:left}
.ad_find_area .inp_box{padding:0;margin:5px 0 15px}
.ad_find_area .inp_box .inp_txt{padding:5px 40px 5px 10px;height:30px;border:1px solid #3191db;border-radius:5px}
.btn_search{position:absolute;right:0;top:0;padding:7px;background-color:#3191db;border-top-right-radius:5px;border-bottom-right-radius:5px}
.ico_search{width:16px;height:16px;background-image:url(../images/ico_search.png)}
.result_list_area{overflow-x:hidden;overflow-y:auto;margin-top:5px;max-height:361px}
.result_item{border-bottom:1px solid #fff}
.result_item:last-child{border-bottom:0}
.result_item .result_link{overflow:hidden;position:relative;display:block;display:-webkit-box;padding:6px 25px 5px 10px;max-height:2.9em;font-size:1.3rem;color:#333;background-color:#f1f1f1;line-height:1.5em;text-overflow:ellipsis;text-align:left;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all}/* 2020-11-23 수정 */
.result_item .result_link .ico_open{position:absolute;right:11px;top:50%;margin-top:-3px;width:9px;height:6px;background-image:url(../images/ico_arrow_down.png)}
.result_link.is_selected{color:#fff;background-color:#0165bb}
.result_link.is_selected .ico_open{background-image:url(../images/ico_arrow_up.png)}
.result_link.is_selected+.result_box{display:block}
.result_box{display:none;max-height:315px;border:1px solid #0165bb;border-top:0;text-align:left}
.result_info{padding:10px}
.result_info dt{margin-top:1px;font-size:1.2rem;color:#3191db;line-height:1.5}
.result_info dt:before{display:inline-block;margin:5px 4px 0 0;width:8px;height:9px;background:url(../images/ico_user.png) no-repeat;background-size:contain;vertical-align:top;content:''}
.result_info dd{margin-bottom:5px;font-size:1.3rem;color:#333;line-height:1.5}
.result_info dd:last-of-type{margin-bottom:1px}
.layer_img_box img{max-width:100%}

/* 2020-11-16 추가 시작 */
/* 이용가이드 */
.guide_wrap{overflow-x:hidden;overflow-y:auto;position:fixed;left:0;top:0;width:100%;height:100%;text-align:center;z-index:200}
.guide_img_box{display:inline-block;padding-top:40px;width:332px;vertical-align:middle}
.guide_img_box img{max-width:100%}
.guide_wrap .layer_btn{position:absolute;right:11px;top:7px;width:60px;height:27px;font-size:13px;color:#fff;font-weight:500;background-color:transparent;border:1px solid #fff}
.guide_wrap:after{display:inline-block;height:100%;vertical-align:middle;content:''}

/* loading */
.loading_area{position:relative;min-height:100px}
.loading{position:absolute;left:50%;top:50%;margin:-10px 0 0 -10px;width:20px;height:20px;border:3px solid #fff;border-right-color:#3191db;border-top-color:#3191db;border-radius:50%;-webkit-animation:spin 800ms infinite linear;animation:spin 800ms infinite linear;box-sizing:border-box}

@keyframes spin {
	from{transform:rotate(0deg)}
	to{transform: rotate(360deg)}
}

@-webkit-keyframes spin {
	from{transform:rotate(0deg)}
	to{transform: rotate(360deg)}
}
/* // 2020-11-16 추가 끝 */

@media screen and (max-width:320px) {
  .chat_header .h_tit{padding:12px 40px 11px;font-size:1.8rem}
  .layer_inner{width:300px}
  .result_list_area{max-height:290px}
  .guide_img_box{width:280px}/* 2020-11-16 추가 */
}