@charset "utf-8";
.hai_banking .blind {position:absolute; overflow:hidden; font-size:0; line-height:0; margin:0; padding:0; text-indent:-99999px;}
.hai_banking .btn_active_st01 {display:inline-block; padding:0 7px; font-size:14px; color:#fff; line-height:31px; background:#27b2a5;}
.hai_banking .btn_active_st01.arrw span {display:block; padding-right:13px; background:url(/cont/comm/img/textbanking/bg_btn_wht_arrw01.png) no-repeat right center; background-size:auto 7px;}

.hai_banking .btn_positive_mid {display:inline-block; height:30px; padding:0 15px; font-size:15px; line-height:28px; text-align:center; color:#2cb4a7; border-radius:20px; background:none; border:1px solid #afe3dd; vertical-align:top;}
.hai_banking .btn_positive_mid.phone {padding:0 30px 0 20px;} /* 2018-03-30추가 */
.hai_banking .btn_positive_mid.phone span {display:inline-block; padding-left:17px; background:url(/cont/comm/img/textbanking/bg_btn_negative_phone.png) no-repeat left 54%; background-size:12px auto;}

.hai_banking .btn_default_mid {display:inline-block; height:26px; padding:0 15px; font-size:14px; line-height:18px; text-align:center; color:#fff; border-radius:20px; background:#637079; vertical-align:top;}
.hai_banking .btn_default_mid.arrw span {display:inline-block; padding-left:10px; background:url(/cont/comm/img/textbanking/bg_btn_wht_arrw02.png) no-repeat left center; background-size:5px auto}

.hai_banking .btn_action_large  {display:table; table-layout:fixed; height:32px; font-size:15px; line-height:20px; text-align:center; color:#fff; border-radius:20px; background:#27b2a5; vertical-align:top;}
.hai_banking .btn_action_large span {display:table-cell; vertical-align: middle;}

.hai_banking .btn_default_large {display:table; table-layout:fixed;  height:32px; font-size:15px; line-height:20px; text-align:center; color:#fff; border-radius:20px; background:#637079; vertical-align:top;}
.hai_banking .btn_default_large span {display:table-cell; vertical-align: middle;}

.hai_banking .ib {display:inline-block !important; float:none !important;}

.wrap.overflow_layout {overflow:hidden;}
.hai_banking .hb_container {padding-bottom:90px;}
.hai_banking .dimm_layer {position:fixed; top:0; left:0; right:0; bottom:0; background:#000; opacity:0.6; z-index:20;}
.hai_banking .hb_section + .hb_section {margin-top:55px;}
.hai_banking .hb_section .section_head {margin-bottom:18px; background:url(/cont/comm/img/textbanking/bg_section_head.gif) repeat-x 25px center; background-size:2px 2px;} /* 2018-03-30 수정 */
.hai_banking .hb_section .section_head .inner {display:inline-block; padding:0 7px 0 25px; background:#fff;}
.hai_banking .hb_section .section_head .section_title {display:inline-block; margin-right:10px; font-size:18px; line-height:26px; color:#000; font-family:'NotoSans-Medium';}
.hai_banking .hb_section .section_cont {padding:0 15px}
.hai_banking .hb_section .section_cont .cont_inner {padding:0 10px}
.hai_banking .cont_img img {width:100%;}
.hai_banking .hb_section .dot_box {padding:14px 20px;
	background-image:url(/cont/comm/img/textbanking/bg_dot_border-h.gif), url(/cont/comm/img/textbanking/bg_dot_border-h.gif), url(/cont/comm/img/textbanking/bg_dot_border-v.gif), url(/cont/comm/img/textbanking/bg_dot_border-v.gif);
	background-position:left top, left bottom, left top, right top;
	background-repeat:repeat-x, repeat-x, repeat-y, repeat-y;
}
.hai_banking .hb_section .txt-post {margin-top:40px; font-size:12px; line-height:17px;}
.hai_banking .hb_section .blt-post {margin-top:25px; padding-left:20px; font-size:12px; line-height:17px;}
.hai_banking .hb_section .blt-post:before {display:inline-block; content:"※"; width:14px; margin-left:-14px;}
.hai_banking .hb_section .dot_box strong {font-size:14px; line-height:18px; font-family:'NotoSans-Bold'; color:#000}
.hai_banking .hb_section .dot_box p {font-size:12px; line-height:16px;}
.hai_banking .hb_section .dot_box p + p {margin-top:10px}

.hai_banking .hb_section .btn_area {margin-top:25px;}
.hai_banking .hb_section .btn_area:after {display:block; content:""; clear:both;}
.hai_banking .hb_section .btn_area a {float:left; width:49%; text-align: center;}
.hai_banking .hb_section .btn_area a + a {margin-left:2%}
.hai_banking .hb_section .btn_area.full * {width:100%;}

.hai_banking .hb_section .btn_area.wide-type {text-align:center;}
.hai_banking .hb_section .btn_area.wide-type a {width:70%}
.hai_banking .hb_section .btn_area.wide-type a + a {margin-top:10px; margin-left:0;}

.hai_banking .hb_section .btn_area.center {text-align: center;} /* 2018-03-30 추가 */

.hai_banking .bottom_btn_area {display:table; width:100%; table-layout:fixed}
.hai_banking .bottom_btn_area.fixed {position:fixed; bottom:0; left:0; right:0;}
.hai_banking .bottom_btn_area > a {display:table-cell; height:50px; padding:0 10px; font-size:18px; line-height:50px; color:#fff; text-align:center; }
.hai_banking .bottom_btn_area .col3-1 {width:30%;}

.hai_banking .bottom_btn_area .btn_bottom_default {background:#637079;}
.hai_banking .bottom_btn_area .btn_bottom_active {background:#27b2a5;}
.hai_banking .bottom_btn_area .btn_bottom_active span {display:block;}
.hai_banking .bottom_btn_area .btn_bottom_active.arrw {padding:0 20px;}
.hai_banking .bottom_btn_area .btn_bottom_active.arrw span {background:url(/cont/comm/img/textbanking/bg_btn_wht_arrw03.png) no-repeat right center; background-size:20px auto}

.hai_banking .hb_info {padding-top:35px}
.hai_banking .hb_info .section_head {height:155px; margin-bottom:0; padding:20px 25px; background:url(/cont/comm/img/textbanking/bg_textbanking_info_head.png) no-repeat right bottom; background-size:128px auto}
.hai_banking .hb_info .sub_title {display:block; margin-bottom:12px; font-size:16px; line-height:20px;}
.hai_banking .hb_info .title {font-size:24px; line-height:32px; font-family:'NotoSans-Medium'}
.hai_banking .hb_info .section_cont {}
.hai_banking .hb_info .section_cont p {color:#222; font-size:16px; line-height:24px; word-break:break-all}
.hai_banking .hb_info .video_box {position:relative; width:100%; height:0; margin-bottom:30px; padding-top:56.0344%; border:1px solid #000}
.hai_banking .hb_info .video_box object, 
.hai_banking .hb_info .video_box iframe {position:absolute; top:0; left:0; width:100%; height:100%;}
.hai_banking .hb_info .section_title {margin-bottom:20px; padding-left:2px; font-size:14px; line-height:18px; color:#222}
.hai_banking .hb_info .section_title strong {vertical-align: top;} /* 2018-03-20 추가 */
.hai_banking .hb_info .text_logo {display:inline-block; width:65px; margin:5px 2px 0 5px;} /* 2018-03-20 수정 */
.hai_banking .hb_info .text_logo img {width:100%;}
.hai_banking .hb_info .logo_side_txt {display:inline-block; margin-top:-3px; font-size:14px;}

.hai_banking .join_howto .dot_box {margin-top:26px;}

.hai_banking .toggle_list {font-size:15px; line-height:20px;}
.hai_banking .toggle_list > li {border-bottom:1px solid #e5e5e5;}
.hai_banking .toggle_list > li .toggle_button {display:block; padding:22px 20px; color:#222; background:url(/cont/comm/img/textbanking/bg_toggle_default.png) no-repeat right 24px; background-size:19px auto;}
.hai_banking .toggle_list > li.active .toggle_button {background:url(/cont/comm/img/textbanking/bg_toggle_active.png) no-repeat right 24px; background-size:19px auto;}
.hai_banking .toggle_list > li:first-child .toggle_button {padding-top:0; background-position:right top}
.hai_banking .toggle_list > li:first-child.active .toggle_button {padding-top:0; background-position:right top}
.hai_banking .toggle_list .toggle_cont {display:none; padding:0 0 22px 20px;}
.hai_banking .toggle_list .toggle_cont a {text-decoration:underline}
.hai_banking .toggle_list .toggle_cont strong {font-family:'NotoSans-Medium'}
.hai_banking .toggle_list .question {display:inline-block; margin-left:-20px; margin-right:5px; color:#009591; font-family:'NotoSans-Medium'; vertical-align: top;}
.hai_banking .toggle_list .answer {display:inline-block; margin-left:-20px; margin-right:5px; color:#ed1260; font-family:'NotoSans-Medium'; vertical-align: top;}

.hai_banking .howto_list_wrap {position:relative;}
.hai_banking .howto_list {display:table; width:100%; table-layout:fixed}
.hai_banking .howto_list > li {display:table-cell; width:50%; padding:0; font-size:14px; color:#222; line-height:20px; text-align: center;}
.hai_banking .howto_list > li:first-child {padding-right:5px;}
.hai_banking .howto_list > li:first-child  + li {padding-left:5px;}
.hai_banking .howto_list > li .inner {border-radius:5px; border:1px solid #e5e5e5}
.hai_banking .howto_list > li .inner > a {display:block;}
.hai_banking .howto_list > li .list_cont {position:relative; padding:10px 5px 53px;}
.hai_banking .howto_list > li .list_cont .list_desc {display:table; width:100%; table-layout:fixed; height:60px; vertical-align: middle;}
.hai_banking .howto_list > li .list_cont .list_desc > p {display:table-cell; vertical-align: middle;}
.hai_banking .howto_list > li .list_img a {display:block;}
.hai_banking .howto_list > li .list_img img {width:100%;}
.hai_banking .howto_list > li .list_cont .btn_area {position:absolute; bottom:13px; left:5px; right:5px; margin:0;}

/*.hai_banking .hb_note {margin-bottom:110px;}*/
.hai_banking .hb_note {}
/* .hai_banking .hb_note:after {display:block; margin-top:60px; content:""; height:50px; width:1px;}  2018-10-24 */
.hai_banking .hb_note .cont_inner p {line-height:1.4}

.hai_banking .popup_wrap {display:none; position:fixed; bottom:0; top:0; left:0; right:0; z-index:10000; background:#fff;}
.hai_banking .popup_wrap.active {display:block;}
.hai_banking .popup_wrap .popup_head {position:relative; margin-top:14px; padding:0 15px;}
.hai_banking .popup_wrap .popup_head .title {font-size:20px; line-height:33px; font-family:'NotoSans-Regular'; color:#000;}
.hai_banking .popup_wrap .popup_head .title span {font-size:18px;}
.hai_banking .popup_wrap .pop_cont {overflow:hidden; overflow-y:auto; position:fixed; top:47px; bottom:50px; left:0; right:0;}
.hai_banking .popup_wrap.head_row2 .popup_head .title {font-size:18px; line-height:24px;}
.hai_banking .popup_wrap.head_row2 .pop_cont {top:89px;}

.hai_banking .popup_wrap .tab_menu > ul {display:table; width:100%; table-layout:fixed; }
.hai_banking .popup_wrap .tab_menu > ul > li {display:table-cell; font-size:10px; ;}
.hai_banking .popup_wrap .tab_menu > ul > li a {display:block; position:relative; height:49px; padding:17px 5px 13px; color:#000; font-size:14px; text-align:center; border-bottom:2px solid #f1f1f1}
.hai_banking .popup_wrap .tab_menu > ul > li.active a {color:#18a494; font-family:'NotoSans-Regular'; border-bottom:2px solid #008485}
.hai_banking .popup_wrap .tab_menu > ul > li a:after {display:block; content:""; position:absolute; top:50%; left:-1px; width:1px; height:13px; margin-top:-6px; background:#bfbfbf;}
.hai_banking .popup_wrap .tab_menu > ul > li:first-child a:after {display:none;}
.hai_banking .popup_wrap .tab_content {display:none}
.hai_banking .popup_wrap .tab_content.active {display:block}

.hai_banking .popup_wrap .bottom_btn_area {position:fixed; bottom:0; left:0; right:0;}
.hai_banking .popup_wrap > .btn_close_popup {position:absolute; top:10px; right:0; width:44px; height:33px; background:url(/cont/comm/img/textbanking/btn_popup_close.png) no-repeat 50% 50%; background-size:14px 14px;}

.hai_banking .message_to {display:table; width:100%; table-layout:fixed;}
.hai_banking .message_to > * {display:table-cell; padding:10px 10px 7px 10px; text-align: left; font-size:13px}
.hai_banking .message_to .to_receive {width:72px; color:#666;}
.hai_banking .message_to .to_number {color:#000}
.hai_banking .message_container {overflow:hidden; position:fixed; top:128px; left:0; right:0; bottom:0; ; background:#fff; border-top:1px solid #f2f2f2}
.hai_banking .message_flow {overflow:hidden; overflow-y:auto; position:absolute; left:0; right:0; top:0; bottom:42px;}
.hai_banking .message_flow .bubble {position:relative; margin:10px 0; padding:0 10px; opacity:0; transition:0.5s all;}
.hai_banking .message_flow .help_text {display:none;}
.hai_banking .message_flow .bubble.active {opacity:1}
.hai_banking .message_flow .bubble .thumb {display:inline-block; position:absolute; top:0; left:1px; width:26px; height:26px; border-radius:30px; vertical-align: top;}
.hai_banking .message_flow .bubble .thumb img {width:100%;}
.hai_banking .message_flow .bubble .bubble_content {display:block; padding:10px 15px; font-size:14px; line-height:18px; ; color:#fff; vertical-align: top;}
.hai_banking .message_flow .bubble.receive {padding-right:16.875%}
.hai_banking .message_flow .bubble.receive .bubble_content {display:inline-block; margin-left:32px; color:#000; background:#e5e5e5; border-radius:0px 10px 10px 10px}
.hai_banking .message_flow .bubble.receive.info .bubble_content {background:#fcf0d0; border-radius:10px}
.hai_banking .message_flow .bubble.receive.join .bubble_content {width:203px; color:#27b2a5; background:#fff;  border-radius:10px; border:1px solid #27b2a5;}
.hai_banking .message_flow .bubble.receive.join .btn_active_st01  {width:100%; margin-top:10px}
.hai_banking .message_flow .bubble.send {text-align:right;}
.hai_banking .message_flow .bubble.send .bubble_content {display:inline-block; padding:10px; border-radius:10px 0px 10px 10px; background:#27b2a5;}

.hai_banking .message_keypad {position:absolute; top:100%; left:0; width:100%; margin-top:-42px; color:#000; background:#d9dbdf; z-index:1;} 
.hai_banking .message_keypad .help_box {position:absolute; bottom:0; left:15px; margin-right:15px; padding:10px 26px; font-size:14px; line-height:1.4; border:1px solid #000; border-radius:20px 20px 20px 0; background:#fff; z-index:1; opacity:0; transition:0.6s all;}
.hai_banking .message_keypad .help_box.active {bottom:100%; opacity:1;}
.hai_banking .message_keypad .help_box:before {display:block; content:""; position:absolute; bottom:100%; left:0; width:72px; height:38px; background:url(/cont/comm/img/textbanking/img_icon_chatbot.png) no-repeat 0 0; background-size:100% auto}
.hai_banking .message_keypad .help_box:after {display:block; content:""; position:absolute; bottom:-12px; left:-1px; width:12px; height:12px; background:url(/cont/comm/img/textbanking/bg_chatbot_bubble.png) no-repeat 0 0; background-size:100% auto}
.hai_banking .message_keypad .help_box span {display:inline-block; color:#009591; font-family:'NotoSans-Regular'; vertical-align:top;}
.hai_banking .message_keypad .input_box {width:100%; height:42px; padding:0 15px; font-size:14px; color:#222; line-height:42px; background:#ecedef;}
.hai_banking .message_keypad .input_box span {color:#c7c7c7}
.hai_banking .message_keypad .keypad {height:173px;}
.hai_banking .message_keypad .keypad > div {display:table; width:100%; table-layout:fixed;}
.hai_banking .message_keypad .keypad > div + div {border-top:3px solid #d9dbdf}
.hai_banking .message_keypad .keypad > div span {display:table-cell; font-size:14px; text-align: center; line-height:36px; background:#fff; border:2px solid #d9dbdf;}
.hai_banking .message_keypad .keypad .row1 {padding:0 5px}
.hai_banking .message_keypad .keypad .row2 {padding:0 16px}
.hai_banking .message_keypad .keypad .row3 {padding:0 5px}
.hai_banking .message_keypad .keypad .row3 .keypad_arrw {width:14%; border-right:5px solid #d9dbdf; background:#fff url(/cont/comm/img/textbanking/bg_keypad_arrw.png) no-repeat center center; background-size:13px auto;}
.hai_banking .message_keypad .keypad .row3 .keypad_backspace {width:14%; border-left:5px solid #d9dbdf; background:#fff url(/cont/comm/img/textbanking/bg_keypad_backspace.png) no-repeat center center; background-size:20px auto;}
.hai_banking .message_keypad .keypad .row4 .keypad_number {width:13%; color:#008485;}
.hai_banking .message_keypad .keypad .row4 .keypad_enter {width:23.125%; color:#fff; background:#008485;}

.hai_banking .event_banner a {display:block;}
.hai_banking .event_banner img {width:100%;}
.hai_banking .ex_slide img {width:100%;}
.hai_banking .list_dot li {position:relative; padding-left:10px; font-size:14px; line-height:24px; color:#000;}
.hai_banking .list_dot li:before {content:""; display:block; position:absolute; top:10px; left:0; width:4px; height:4px; border-radius:50%; background: #555;}

@media screen and (max-width:320px) {
	.hai_banking .hb_info .title {font-size:22px;}
	.hai_banking .hb_section .section_head .section_title {font-size:15px;}
	.hai_banking .btn_default_mid {font-size:12px;}
}