@charset "utf-8";

/* ===============================================
Date : 2016-04-14 ~
Description : 부가서비스
=============================================== */

 /*css import*/
@import url("/resource/css/common.css?v=20240709");
@import url("/resource/css/table.css");
@import url("/resource/css/bhp/ads.css");
@import url("/resource/css/bhp/bki.css?v=20250625");
@import url("/resource/css/bhp/ecs.css?v=20250625");
@import url("/resource/css/bhp/oly.css");
@import url("/resource/css/bhp/pbs.css");
@import url("/resource/css/bhp/pim.css");
@import url("/resource/css/bhp/src.css?v=20230913");
@import url("/resource/css/bhp/csc.css?v=20250825");
@import url("/resource/css/bhp/fis.css");



/*
	custom scroll bar
*/

.mCustomScrollbar{ -ms-touch-action:pinch-zoom; touch-action:pinch-zoom; /* direct pointer events to js */ }
.mCustomScrollbar.mCS_no_scrollbar, .mCustomScrollbar.mCS_touch_action{ -ms-touch-action:auto; touch-action:auto; }
.mCustomScrollBox{ /* contains plugin's markup */ position:relative; overflow:hidden; height:100%; max-width:100%; outline:none; direction:ltr; }
.mCSB_container{ /* contains the original content */ overflow:hidden; width:auto; height:auto; }
/*
------------------------------------------------------------------------------------------------------------------------
2. VERTICAL SCROLLBAR
y-axis
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_inside > .mCSB_container{ margin-right:30px; }
.mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right:0; }
/* non-visible scrollbar */

.mCS-dir-rtl > .mCSB_inside > .mCSB_container{ /* RTL direction/left-side scrollbar */ margin-right:0; margin-left:30px; }
.mCS-dir-rtl > .mCSB_inside > .mCSB_container.mCS_no_scrollbar_y.mCS_y_hidden{ margin-left:0; }
/* RTL direction/left-side scrollbar */

.mCSB_scrollTools{ /* contains scrollbar markup (draggable element, dragger rail, buttons etc.) */ position:absolute; width:16px; height:auto; left:auto; top:0; right:0; bottom:0; }
.mCSB_outside + .mCSB_scrollTools{ right:-26px; }
/* scrollbar position: outside */

.mCS-dir-rtl > .mCSB_inside > .mCSB_scrollTools,
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ /* RTL direction/left-side scrollbar */ right:auto; left:0; }
.mCS-dir-rtl > .mCSB_outside + .mCSB_scrollTools{ left:-26px; }
/* RTL direction/left-side scrollbar (scrollbar position: outside) */

.mCSB_scrollTools .mCSB_draggerContainer{ /* contains the draggable element and dragger rail markup */ position:absolute; top:0; left:0; bottom:0; right:0; height:auto; }
.mCSB_scrollTools a + .mCSB_draggerContainer{ margin:20px 0; }
.mCSB_scrollTools .mCSB_draggerRail{ width:2px; height:100%; margin:0 auto; -webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px; }
.mCSB_scrollTools .mCSB_dragger{ /* the draggable element */ cursor:pointer; width:100%; height:30px; /* minimum dragger height */ z-index:1; }
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ /* the dragger element */ position:relative; width:4px; height:100%; margin:0 auto; -webkit-border-radius:16px; -moz-border-radius:16px; border-radius:16px; text-align:center; }
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ width:12px; /* auto-expanded scrollbar */ }
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ width:8px; /* auto-expanded scrollbar */ }
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown{ display:block; position:absolute; height:20px; width:100%; overflow:hidden; margin:0 auto; cursor:pointer; }
.mCSB_scrollTools .mCSB_buttonDown{ bottom:0; }
/*
------------------------------------------------------------------------------------------------------------------------
3. HORIZONTAL SCROLLBAR
x-axis
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_horizontal.mCSB_inside > .mCSB_container{ margin-right:0; margin-bottom:30px; }
.mCSB_horizontal.mCSB_outside > .mCSB_container{ min-height:100%; }
.mCSB_horizontal > .mCSB_container.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom:0; }
/* non-visible scrollbar */

.mCSB_scrollTools.mCSB_scrollTools_horizontal{ width:auto; height:16px; top:auto; right:0; bottom:0; left:0; }
.mCustomScrollBox + .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCustomScrollBox + .mCSB_scrollTools + .mCSB_scrollTools.mCSB_scrollTools_horizontal{ bottom:-26px; }
/* scrollbar position: outside */

.mCSB_scrollTools.mCSB_scrollTools_horizontal a + .mCSB_draggerContainer{ margin:0 20px; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_draggerRail{ width:100%; height:2px; margin:7px 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger{ width:30px; /* minimum dragger width */ height:100%; left:0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_dragger .mCSB_dragger_bar{ width:100%; height:4px; margin:6px auto; }
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_dragger .mCSB_dragger_bar{ height:12px; /* auto-expanded scrollbar */ margin:2px auto; }
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger.mCSB_dragger_onDrag_expanded + .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerContainer:hover .mCSB_draggerRail{ height:8px; /* auto-expanded scrollbar */ margin:4px 0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft,
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ display:block; position:absolute; width:20px; height:100%; overflow:hidden; margin:0 auto; cursor:pointer; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonLeft{ left:0; }
.mCSB_scrollTools.mCSB_scrollTools_horizontal .mCSB_buttonRight{ right:0; }
/*
------------------------------------------------------------------------------------------------------------------------
4. VERTICAL AND HORIZONTAL SCROLLBARS
yx-axis
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_container_wrapper{ position:absolute; height:auto; width:auto; overflow:hidden; top:0; left:0; right:0; bottom:0; margin-right:30px; margin-bottom:30px; }
.mCSB_container_wrapper > .mCSB_container{ padding-right:30px; padding-bottom:30px; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom:20px; }
.mCSB_vertical_horizontal > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right:20px; }
/* non-visible horizontal scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden + .mCSB_scrollTools.mCSB_scrollTools_vertical{ bottom:0; }
/* non-visible vertical scrollbar/RTL direction/left-side scrollbar */
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal,
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ right:0; }
/* RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left:20px; }
/* non-visible scrollbar/RTL direction/left-side scrollbar */
.mCS-dir-rtl > .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden + .mCSB_scrollTools ~ .mCSB_scrollTools.mCSB_scrollTools_horizontal{ left:0; }
.mCS-dir-rtl > .mCSB_inside > .mCSB_container_wrapper{ /* RTL direction/left-side scrollbar */ margin-right:0; margin-left:30px; }
.mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden > .mCSB_container{ padding-right:0; }
.mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden > .mCSB_container{ padding-bottom:0; }
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_y.mCS_y_hidden{ margin-right:0; /* non-visible scrollbar */ margin-left:0; }
/* non-visible horizontal scrollbar */
.mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden{ margin-bottom:0; }
/*
------------------------------------------------------------------------------------------------------------------------
5. TRANSITIONS
------------------------------------------------------------------------------------------------------------------------
*/

.mCSB_scrollTools,
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar,
.mCSB_scrollTools .mCSB_buttonUp,
.mCSB_scrollTools .mCSB_buttonDown,
.mCSB_scrollTools .mCSB_buttonLeft,
.mCSB_scrollTools .mCSB_buttonRight{
	-webkit-transition:opacity .2s ease-in-out, background-color .2s ease-in-out;
	-moz-transition:opacity .2s ease-in-out, background-color .2s ease-in-out;
	-o-transition:opacity .2s ease-in-out, background-color .2s ease-in-out;
	transition:opacity .2s ease-in-out, background-color .2s ease-in-out;
}
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar, /* auto-expanded scrollbar */
.mCSB_scrollTools_vertical.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_dragger_bar,
.mCSB_scrollTools_horizontal.mCSB_scrollTools_onDrag_expand .mCSB_draggerRail{
	-webkit-transition:width .2s ease-out .2s, height .2s ease-out .2s,
	margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
	margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
	opacity .2s ease-in-out, background-color .2s ease-in-out;
	-moz-transition:width .2s ease-out .2s, height .2s ease-out .2s,
	margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
	margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
	opacity .2s ease-in-out, background-color .2s ease-in-out;
	-o-transition:width .2s ease-out .2s, height .2s ease-out .2s,
	margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
	margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
	opacity .2s ease-in-out, background-color .2s ease-in-out;
	transition:width .2s ease-out .2s, height .2s ease-out .2s,
	margin-left .2s ease-out .2s, margin-right .2s ease-out .2s,
	margin-top .2s ease-out .2s, margin-bottom .2s ease-out .2s,
	opacity .2s ease-in-out, background-color .2s ease-in-out;
}
/*
------------------------------------------------------------------------------------------------------------------------
6. SCROLLBAR COLORS, OPACITY AND BACKGROUNDS
------------------------------------------------------------------------------------------------------------------------
*/

/* theme: "dark" */

/*.mCS-dark.mCSB_scrollTools .mCSB_draggerRail{ background-color:#000; background-color:rgba(0, 0, 0, 0.15); }*/
.mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{ background-color:#cccccc;}
.mCS-dark.mCSB_scrollTools .mCSB_dragger:hover .mCSB_dragger_bar{ background-color:#cccccc;}
.mCS-dark.mCSB_scrollTools .mCSB_dragger:active .mCSB_dragger_bar,
.mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar{ background-color:#cccccc; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonUp{ background-position:-80px 0; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonDown{ background-position:-80px -20px; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonLeft{ background-position:-80px -40px; }
.mCS-dark.mCSB_scrollTools .mCSB_buttonRight{ background-position:-80px -56px; }
/* ---------------------------------------- */


/*금융서비스*/
.national-tex-list li {width:32%; display:inline-block;}
.section-list-04 {margin-bottom:0}
.section-list-04 > li {width:24%; display:inline-block; vertical-align:top}
.lo-justify:after{ display:block; content:''; clear:both;}
.fis-ir {margin-top: 10px;}
.vert [class^="table-"] td {vertical-align: top}
.fis-join+.fis-join {margin-top: 20px}
.fis-dotlist-mg li {margin-bottom: 20px;}
.tabs-cont>h3:first-child {margin-top: 30px !important}
.m-busi-ir {margin-top:20px;}
h3 + .m-busi-ir {margin-top:10px;}




.tel-list {padding-top: 20px}
.tel-list:after {content: ''; display: block; clear: both;}
.tel-list img {float: left; margin-right: 55px}
.tel-list .svc-list li {margin-bottom: 8px;font-size: 14px; font-weight: bold; color:#666;}

.intsbox { background:#f5f5f5; padding:40px 70px; overflow:hidden}
.intsbox .andb { float:left}
.intsbox .iosb { float:right}
.intsbox + .dot { margin-top:30px;}
.dotlist + .dot { margin-top:25px;}
.dot + .intsbox { margin-top:15px;}


/*고객정보 제공내역 조회 */
.termlist2 {margin:10px;}
.termlist2 li{margin-top:10px;color:#666;font-size:13px;line-height:1.6;letter-spacing:-0.3px;}
.termlist2 li:first-child{margin-top:0;}
.info-ntc {color:#666;font-size:13px;line-height:1.6;letter-spacing:-0.3px;}
.info-ntc em{display:block;margin-bottom:10px;color:#333;font-size:17px;}
.cs-info {font-size:13px;}
.cs-info strong + .noti{margin-top:10px;}
.cs-info .noti + .dashlist {margin:5px 0;}
.dotlist + .cs-info {margin-top:20px;}


/*
 * @ 외환
 * -------------------------------------
 */
[class^="step-cont"] { overflow:hidden; }
[class^="step-cont"] > li { float:left; padding-left:73px;  background:url('/resource/img/fpm/icon_arrow.png') no-repeat 30px 50%}
[class^="step-cont"] > li:first-child { padding:0; background:none}
[class^="step-cont"] > li dl { border:1px solid #b79e89; border-radius:3px; width:190px; overflow:hidden }
[class^="step-cont"] > li dl dt { display:block; height:48px; line-height:48px; font-size:16px; text-align:center; background:#efece8; color:#896e4a; font-weight:bold}
[class^="step-cont"] > li dl dd { display:table; width:100%;  height:70px; letter-spacing:-1px; line-height:140% }
[class^="step-cont"] > li dl dd div { display: table-cell; vertical-align: middle; text-align:center }
[class^="step-cont"] > li dl dd div strong { display:block; padding:20px 0 ; color:#000; }
[class^="step-cont"] > li dl dd div b { line-height:160%}
[class^="step-cont"] > li dl dd div strong + span { display:block; padding-bottom:20px;}

[class^="step-cont-num3"] > li { padding-left:82px; background-position: 40px 50%}
[class^="step-cont-num3"] > li dl {width:272px;}
[class^="step-cont-num3"] > li dl div.hig1 { height:110px;}
[class^="step-cont-num3"] > li dl div.hig2 { vertical-align:top; height:150px; padding:15px 20px 0;}
[class^="step-cont-num3"] > li dl div.hig3 { vertical-align:top; height:115px; padding:15px 20px 0;}

[class^="step-cont-num5"] > li { padding-left:38px; background-position: 17px 50%}
[class^="step-cont-num5"] > li dl {width:165px;}
[class^="step-cont-num6"] > li { padding-left:32px; background-position: 12px 50%}
[class^="step-cont-num6"] > li dl {width:136px;}



[class^="bhp-step-"] {margin-top:5px}

.bhp-step-list ul {font-size: 0;}
.bhp-step-list li {position: relative; border: 1px solid #b79e89; display: inline-block; margin:0 28px 20px 0; vertical-align: top; text-align: center;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-ms-border-radius: 2px;
	-o-border-radius: 2px;
	border-radius: 2px;
}
.bhp-step-list li.last {margin-right: 0;}
.bhp-step-list li.last:after {content: none}
.bhp-step-list li:after {content: ''; display: block; width:8px; height: 15px; position: absolute; top:50%; right:-20px; margin-top:-4px; background: url('/resource/img/bhp/ico_arrow04.png') 0 0 no-repeat;}
.bhp-step-list li strong {display: block; height: 38px; font-size: 16px; font-weight: bold; color:#896e4a; border-bottom: 1px solid #d1d2d6; background-color: #efece8; line-height: 2.2em}
.bhp-step-list li p {font-size: 14px; line-height: 1.2em; font-weight: bold; color:#414141; display: table-cell; width:135px; height: 92px;vertical-align: middle}

.bhp-step-detail>ul>li {margin-bottom: 10px;}
.bhp-step-detail>ul>li>strong {display: block;}
.bhp-step-detail .hglist li {padding-left: 20px; text-indent: -18px !important;}
.bhp-step-detail .hglist li .numlist li {padding-left:0;}


/* 장애인고객전자금융이용안내 */
.disabled_box { position:relative; overflow:hidden; min-height:120px; padding-left:110px; padding-bottom:20px; }
.disabled_box:after { position:absolute; top:50%; left:0; content:''; display:inline-block; width:90px; height:90px; margin-top:-45px; }
.disabled_box.icon1:after { background:url('/resource/img/bhp/di_icon01.png') no-repeat 0; }
.disabled_box.icon2:after { background:url('/resource/img/bhp/di_icon02.png') no-repeat 0; }
.disabled_box.icon3:after { background:url('/resource/img/bhp/di_icon03.png') no-repeat 0; }
.disabled_box.icon4:after { background:url('/resource/img/bhp/di_icon04.png') no-repeat 0; }


/* 장애인선수단 */
.player_list { position:relative; padding:55px 55px 55px 450px; min-height:400px; background:#fff; border:1px solid #ddd; margin-top:25px;  }
.player_list .simg { position:absolute; bottom:0; left:50px; display:inline-block; }
.player_list .simg img { width:100%; }
.player_list > ul > li { padding-top:20px; }
.player_list > ul > li:first-child { padding-top:0; }
.player_list dl { overflow:hidden; }
.player_list dl.info dt, .player_list dl.info dd { float:left; display:block; }
.player_list dl.info dt:after { position:absolute; top:0; right:0; content:'|'; color:#000; display:inline-block; }
.player_list dl.info dt { position:relative; width:90px; padding-right:10px; }
.player_list dl.info dd { width:370px; padding-left:10px; }
.player_list dl.info dd > ul { margin-top:-3px; }
.player_list dl.info dd > ul > li { position:relative; padding-left:60px; margin-top:10px; }
.player_list dl.info dd > ul > li:first-child { margin-top:0; }
.player_list dl.info dd > ul > li .t1 { position:absolute; top:3px; left:0; color:#8c8c8c; font-weight:bold; }
.player_list dl.info dd > ul > li .t2 { line-height:1.5; display:block; }
.player_list dl.info .stit { font-size:18px; }
.player_list.newtype dl.info .stit { font-size:16px; }
.player_list.newtype { padding: 30px 60px; min-height:300px; }
.player_list.newtype .simg { position:absolute; bottom:0; left:auto; right:45px; display:inline-block; }
#content .player_list.newtype .tit h3 { font-size:26px; }
#content .player_list.newtype .tit span { margin-top:6px; padding:4px 10px; }
#content .player_list .tit { overflow:hidden; padding:0 0 30px 0; }
#content .player_list .tit h3 { color:#000; font-size:40px; margin:0; padding:0; float:left; }
#content .player_list .tit span { background:#b9b9b9; color:#fff; font-size:12px; float:left; margin-top:17px; margin-left:10px; display:inline-block; padding:4px 15px; border-radius:20px; -webkit-border-radius:20px; }