@charset "utf-8";
/*
   Root : ITBYY_COM_PT_STATIC_ITB_WBZ
   Date : 2024.12.17
*/
 
/* skipNavi */
#skipNavi a {display:block; position:fixed; top:0; left:0; width:100%; height:0; background-color:#583cc9; color:#fff; font-size:14px; font-weight:bold; line-height:1; text-align:center; overflow:hidden; z-index:9999;}
#skipNavi a:focus, #skipNavi a:active {margin-top:0; height:auto; padding:10px 0px;}

/* ------------------------------------------ Layout ------------------------------------------ */

/* ------------------------------------------ 영문 ------------------------------------------ */
.en body{ font-family:'Roboto Light', 'NotoSans Light', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; }
.en body .bold{font-family:'Roboto Medium', 'NotoSans Medium', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif !important;}


body {
	min-width:1132px; min-height: 100%; line-height: 1.5; font-family:'NotoSans Light', 'Roboto Light', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif; font-size:16px; color:#666; letter-spacing: -0.003em;
	word-break:keep-all; word-wrap:break-word; -webkit-tap-highlight-color: rgba(0,0,0,0); box-sizing: border-box;
}
body.ready {background-color: #fff;}
body:not(.ready) .gnb .subArea {display: none;}
body.sitemapOpen {overflow: hidden;}
/*body.sitemapOpen > * {display: none}*/
body.sitemapOpen > .sitemap {display: block;}

body.windowPop {background: #fff}
html:not(.popFullScroll) body.hasScroll {padding-right: 17px; background: #fff}
html:not(.popFullScroll) body.hasScroll .header.sticky {right: 17px !important;}
html:not(.popFullScroll) body.hasScroll .header.sticky .gradient {overflow: hidden;}
.wrapper {position: relative; width:100%; background: #fff; overflow: hidden;}

body:not(.hScroll) {left: 0 !important; margin-right: 0 !important;}
body.hScroll {position:relative; min-width: 1292px}
body.hScroll.fit {min-width: 1212px}
body.hScroll .gnbArea .blueBar:before {content: none;}
body.hScroll.fit #content section,
body.hScroll.fit .header [class*=Wrap],
body.hScroll.fit .footerWrap {margin-left:0}
body.hScroll.fit .header.sticky .gnbArea {width:1212px;}
body.hScroll.fit .gnbArea .right {right: 73px; margin-right: 0}
body.hScroll.fit .goTop {right:auto; }

#content {position:relative; padding-bottom:160px; min-height:540px;}
#content section {position:relative; width:1132px; margin: 0 auto 50px;}

body.centerOrigin {-ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; background: #fff}
body.centerOrigin #content {min-height: 0;}

#content section > .section {margin-bottom: 50px}
#content section > .section:last-child {margin-bottom: 0}
/*#content:not(.marginSet) section:last-child {margin-bottom: 0}
#content section .section {margin-bottom: 50px}
#content section .section:last-child {margin-bottom: 0}
임시주석처리
*/
#content section.full {width:100%;}
#content section.onlyBtn {margin-top: -20px; margin-bottom: 70px;}

#content section.titArea {position:relative; padding-top:60px; margin-bottom: 40px;}
section.titArea .pageUtil {position: absolute; top:20px; right:0;}
section.titArea .pageUtil > li {float: left; margin-left:4px}
section.titArea .pageUtil > li:first-child {margin-left: 0;}
section.titArea .pageUtil button > span {position: absolute; overflow: hidden; margin: -1px; border: 0; padding: 0; width: 1px; height: 1px; clip: rect(0 0 0 0);}
.pageUtil .dropMenuBox {margin-top: 6px;}
.pageUtil .dropMenuWrap .toggle .on, .pageUtil .dropMenuWrap.on .toggle .off {display: none}
.pageUtil .dropMenuWrap.on .toggle .on {display: block;}

/* 가상계좌 */
#content.virtualAcc{min-height:0; background-color:#f7f7f7}
/* ------------------------------------------ Header ------------------------------------------ */
/* header 기본속성 */
.header {position:relative; z-index: 500; /*opacity: 0; height:153px; z-index: 100; background: url(../img/temp/temp_header.png) no-repeat center 0;*/}
.header.onLoad {opacity: 1;}  
.header a {display: block;}
.header [class*=Wrap] {width:1132px; margin:0 auto;}
.header [class*=Wrap]:after, .header [class*=Wrap]:before {content: ''; display: table}
.header [class*=Wrap]:after {clear: both;}
.header .left {float: left;}
.header .right {float: right;}
.header .left li, .header .right li {float: left;}

/* header sticky */
.header.sticky {position: fixed; left:0; right: 0; top:-34px; z-index: 600}
.header.sticky:not(.notThin) .gnb .kdbLogo {padding-right: 44px;}
.header.sticky:not(.notThin) .gnb .kdbLogo:after {top: 0px; bottom: 16px;}
.header.sticky .gate li.on a:before, .header.sticky .gate li.on a:after {top: 31px; bottom: -31px;}
.header.sticky .topArea {min-height: 36px}
.header.sticky .topArea a {display: none}
.header.sticky .gnbArea .gnbBtnSitemap {display: inline-block;}
.header.sticky:not(.searchOpen) .crumb > li > a, .header.sticky:not(.searchOpen) .crumb > li > span {color:#fff}
.header.sticky:not(.searchOpen) .crumb > li > a:after {background-position: 0 bottom;}
.header.sticky:not(.searchOpen) .crumb > li:before {background-position: 0 -55px;}
.header.sticky:not(.searchOpen) .crumbArea {border-bottom: none}
.header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > a, .header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > strong {color:#fff}
.header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > a, .header.sticky:not(.searchOpen) .crumbArea [class^=gnbBtn] > strong {background-position: 0 bottom;}
.header.sticky:not(.searchOpen) .gradient.gradientOn:before, .header.sticky:not(.searchOpen) .gradient.gradientOn:after {top: 0}
.header.sticky:not(.searchOpen) [class^=gnbBtn] span:after {border-color: #fff}

.header.sticky:not(.notThin) .gnb .menu > li > a {padding-right: 11px; padding-left: 10px;}
.header.sticky.hasCrumb:not(.init) .blueBar {opacity: 0}

/* header Gradient */
.gradient {position:relative;}
.gradient:before {content: ''; position:absolute; top:-100%; left:0; right:0; height:100%; background: -webkit-linear-gradient(to right, #0063cc 0%, #0063cc 49%, #af13c7 51%, #af13c7 100%); background: linear-gradient(to right, #0063cc 0%, #0063cc 49%, #af13c7 51%, #af13c7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0063cc', endColorstr='#af13c7', GradientType=1); transition: top 0.23s ease-in-out; z-index: 0}
.gradient:after {content: ''; position:absolute; width:1920px; height: 100%; left:50%; top:-100%; margin-left:-960px; background: -webkit-linear-gradient(to right, #0063cc 0%, #583cc9 50%, #af13c7 100%); background: linear-gradient(to right, #0063cc 0%, #583cc9 50%, #af13c7 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0063cc', endColorstr='#af13c7', GradientType=1); transition: top 0.23s ease-in-out; z-index: 1}
.gradient > * {position: relative; z-index: 3;}
.ie9 .gradient:before, .ie8 .gradient:before {background:url(../img/common/bg_gradient.png) repeat-y center 0;}
.ie9 .gradient:after, .ie8 .gradient:after {background:url(../img/common/bg_gradient.png) repeat-y center 0;}

/* header topArea */
.header .topArea.gradient:before, .header .topArea.gradient:after {top:0; transition:none}
.header .topWrap {overflow: hidden; min-height: 36px;}
.header .topWrap .logo {float: left; padding: 9px 0 7px; margin-right: 24px; overflow: hidden;}
.header .topWrap .logo a {height: 20px;}
.header .topWrap .left .gate {float: left;}
.header .topWrap .right ul {float: left;}
.header .topWrap li {float: left; color:#fff;}

/* header Gate Button */
.header .gate {margin-top:6px;}
.header .gate li {position:relative; font-size: 13px;}
.header .gate li a {position:relative; height:30px; padding: 5px 19px 5px 27px; text-align: center; transition: color 0.15s ease-in-out; box-sizing: border-box;}
.header .gate li a span {position:relative; z-index: 2}
.header .gate li:first-child:before {content: none} 
.header .gate li:before {content: ''; position:absolute; top:8px; left:-1px; width:8px; height:14px; background: url('../img/common/img_common.png') no-repeat -400px -40px; transition: all 0.15s ease-in-out}

.header .gate li a:before {content: ''; position: absolute; top:31px; bottom:-31px; left: 7px; right:8px; height:30px; background: #fff; border-top-left-radius: 10px; z-index: 1; transition: all 0.15s ease-in-out;}
.header .gate li a:after {content: ''; position: absolute; top:31px; bottom:-31px; right: -11px; width:20px; height: 30px; background: url('../img/common/img_common.png') no-repeat -410px -60px; transition: all 0.15s ease-in-out;}
.header .gate li.on:before, .header .gate li:hover:before, .header .gate li:focus:before {transform: rotate(27deg); opacity:0}
.header .gate li.on a, .header .gate li a:hover, .header .gate li a:focus {color:#333;}
.header .gate li.on a:before, .header .gate li a:hover:before, .header .gate li a:focus:before,
.header .gate li.on a:after, .header .gate li a:hover:after, .header .gate li a:focus:after {top:0px; bottom:0px;} 
.header .gate.banking {background: #002976; border-top-right-radius: 10px; border-top-left-radius: 10px; font-weight: 600; letter-spacing: -0.03em}
.header .gate.banking li:before {left:-5px;} 
.header .gate.banking li a {padding: 3px 14px 5px; text-shadow: none !important; font-size: 15px}
.header .gate.banking li a:before {left:0;} 
.header .gate.banking li.last a:before {right:0; left:10px; border-top-right-radius: 10px; border-top-left-radius: 0px;} 
.header .gate.banking li.last a:after {right:auto; left:-7px; background: url('../img/common/img_common.png') no-repeat -430px -60px}
.header .gate.banking li a span:after {content: ''; position: absolute; bottom:-5px; left:50%; right:50%; border-bottom: 1px solid #004eb8; transition: all 0.15s ease-out;} 
.header .gate.banking li.on a, .header .gate.banking li a:hover, .header .gate.banking li a:focus {color:#1a5bd2;}
.header .gate.banking li.on a span:after, .header .gate.banking li a:hover span:after, .header .gate.banking li a:focus span:after {left:0; right:0;} 

/* header util Button */
.header .util {margin:10px -10px 0 31px;}
.header .util li {position: relative;}
.header .util li:first-child:before {content: none;}
.header .util li a:hover,.header .util li a:focus {text-decoration: underline;}
.header .util li:before {content: ''; position: absolute; top:3px; bottom:2px; left:-11px; border-left: 1px solid rgba(255,255,255,0.25);} 
.header .util li {margin: 0 10px; font-size: 13px;}
.header .util .searchBtn a {position:relative; padding-left: 18px; }
.header .util .searchBtn a:after{position: absolute; top:1px; left:0; width:17px; height:15px; content:''; display:block; background: url('../img/common/img_common.png') no-repeat -465px -20px;}
.header .util .about a {position:relative; padding-right: 12px; background: url('../img/common/ico_gnb_about_arr.png') no-repeat right center; }
.header .util .kdbHome a {position:relative; padding-left: 17px;  } 
.header .util .kdbHome a:after{position: absolute; top:2px; left:0; width:12px; height:13px; content:''; display:block; background: url('../img/common/img_common.png') no-repeat -465px 0;}

.header .util .about {margin-right: 20px;}
.header .util .about + li:before {content: none}
.header .util li.last:after{content: ''; position: absolute; top:3px; bottom:2px; right:-11px; border-left: 1px solid rgba(255,255,255,0.25);}

/* 20.08.13 header Search (정현아) */
.header .utilSearch {float:left; margin:4px 0 0 6px;}
.header .utilSearch input{width:100px; height:25px; line-height:25px; padding:0 8px; margin-left:15px; border-radius:4px; font-size:13px;}
.header .utilSearch .searchBtn{display:inline-block; height:25px; padding:0 6px; margin-left:3px; background-color:#a84dd4; border-radius:4px; }
.header .utilSearch .searchBtn span{font-size: 13px; color:#fff; font-family:'Roboto Light', 'NotoSans Light', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif !important; }
.header .gnbBtnLogout > a.useTxt, .header .gnbBtnLogout > button.useTxt,
.header .gnbBtnLogin > a.useTxt, .header .gnbBtnLogin > button.useTxt {width: auto; margin-left:12px; margin-right:5px; padding-left: 35px; line-height: 33px; font-weight: bold; font-size: 14px; color:#333;}
.enterprise.header .utilSearch .searchBtn{background-color:#3360aa;}

/* GNB */
.gnbArea {position:relative; padding: 0; border-bottom: 1px solid #dedede; box-sizing: border-box;background-color:#fff; box-shadow: 0 4px 8px rgba(0,0,0,0.1); z-index: 3; transition:padding 0.15s ease-in-out;}
.gnbWrap {box-sizing: border-box;}
.gnb .menu {float: left; /* margin-left: -14px; */ transition:padding 0.2s ease-in-out;}
.gnb .menu > li, .gnb .right > li {float: left;}
.hasCrumb .gnbArea {box-shadow:0 3px 8px rgba(0,0,0,0.08);}
.gnb .menu > li > a, .gnb .depth2 > li > a, .header .right .gate li a {font-family: 'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;}

/* 1차메뉴  */
.gnbArea .blueBar {position: absolute; transition: left 0.25s ease-out, width 0.25s ease-in-out;}
.gnbArea .blueBar:before {content:''; position: absolute; margin-left: -50%; width:100%; border-bottom: 5px solid #0063cc; left:auto; right: auto; bottom: -1px;}
.gnb .menu > li > a {position:relative; padding:17px 15px 16px 14px; height: 59px; color:#333; font-size:18px; box-sizing: border-box; transition: all 0.2s ease-in-out; letter-spacing: -0.025em;}
.ng .gnb .menu > li > a {padding-left:11px !important; padding-right:12px !important;} /* 24.12.17 CI 변경에 따른 자간 변경 */

/* 22.07.29 기업뱅킹 메뉴 수정 (정현아)  24.10.25 오픈뱅킹 메뉴 추가되면서 폰트크기, 줄간 수정*/
.header.enterprise .gnb .menu > li > a{padding: 17px 9px 16px 9px;font-size:16px;line-height:26px;}
.header.sticky.enterprise:not(.notThin) .gnb .menu > li > a {padding-right: 7px; padding-left: 6px;}

/*.gnb .menu > li.on > a:after {left:14px; right: 13px;}*/
.gnb .menu > li.on .subArea {display: block;}
.gnb .menu li.on > a, .gnb .menu li > a:hover, .gnb .menu li > a:focus, .gnb .subArea li > a:hover, .gnb .subArea li > a:focus {color:#0063cc;}
.gnb .depthTit {position: absolute; display: none; height:60px; padding: 14px 45px 13px 0; box-sizing: border-box; color:#0063cc; font-size: 20px; letter-spacing: -0.1em;}
.gnb .depthTit:after {content: ''; position:absolute; border-right: 1px solid #ccc; top: 20px; bottom: 20px; right: 24px;}
.gnb .cateTit {position:relative; float:left; height: 53px; padding: 14px 45px 13px 0; box-sizing: border-box; color:#0063cc; font-size: 19px;}
.gnb .cateTit:after {content: ''; position:absolute; border-right: 1px solid #ccc; top: 20px; bottom: 13px; right: 24px;}

/* 2차메뉴 */
.gnb .subArea {position: absolute; top:59px; left:0px; right:0px; display: none; padding-top:20px; padding-bottom:32px; background: #fff; border-top:1px solid #ececec; border-bottom:1px solid #dedede; box-shadow: 0 4px 8px rgba(0,0,0,0.1);}
.gnb .subWrap {width:1132px; margin:0 auto}
.gnb .depth2 {min-height:148px; font-size: 0; margin:0 -14px;}
.gnb .depth2 > li {display:inline-block; width:25%; padding:0 14px; margin-top:7px; box-sizing: border-box; font-size:16px; vertical-align: top;}
.gnb .depth2 > li > a {padding: 8px 10px 7px; margin-bottom:17px; border-bottom: 1px solid #666; color:#333; font-size: 16px;}
/*body:not(.isIE) .gnb .depth2 > li > a {text-shadow: 0px 0px 0px rgba(0,0,0, 1);}*/
/*body:not(.isIE) .gnb  li.on > a, body:not(.isIE) .gnb li > a:hover, body:not(.isIE) li > a:focus {text-shadow: none !important;}*/

/* 3차메뉴 */
.gnb .depth3 li {position: relative; overflow: hidden;}
.gnb .depth3 > li a {display: block; padding: 0 10px 8px 11px; font-size: 15px; color:#666; letter-spacing: -0.045em; line-height: 1.3em}
.gnb .depth3 > li .d4Btn .blind.off, .gnb .depth3 > li.on .d4Btn .blind.on {display: none;}
.gnb .depth3 > li.on .d4Btn .blind.off {display: block;}
.gnb .depth3 a {word-break: break-all;}
.gnb .depth3 a > span, .header [class^=gnbBtn] {position: relative;}
.gnb .depth3 a > span:after, .gnb .depth3 a:before, .header [class^=gnbBtn] span:after {content: ''; position: absolute; width:0; bottom:0px; left:-5px; right:100%; border-bottom: 1px solid #0063cc; transition: all 0.25s ease-out;}
.gnb .depth3 a:before {position:absolute; left:10px; bottom: 28px;}
.gnb .depth3 a:hover > span:after, .gnb .depth3 a:focus > span:after {left:0; right: 0; width:auto}
.gnb .depth3 a:hover:before, .gnb .depth3 a:focus:before {width:auto; left:10px; right:10px;}

/* 4차메뉴 */
.gnb .depth4 {display:none; position: absolute; width:240px; padding-top: 20px; background: url('../img/common/bg_gnb_d4_box.png') no-repeat right 0; box-sizing: border-box; z-index: 50; }
.gnb .depth4.on {display: block;}
.gnb .depth4 > ul {background: #fff; border:1px solid #666; border-top:none; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px}
.gnb .depth3 > li.on {overflow: visible;}
.gnb .depth3 > li.on > a:before, .gnb .depth3 > li.on > a span:after {content: none;}

.gnb .depth4 li {top:-6px;}
.gnb .depth4 li a {padding-left: 19px;} 
.gnb .depth4 li:first-child a {padding-right: 40px}
.gnb .depth4 .close {position: absolute; top:15px; right: 15px; width:20px; height: 20px; }
.gnb .depth4 .close:before {content: ''; position: absolute; top:4px; left:4px; width: 12px; height: 12px; background: url('../img/common/bg_gnb_close.png') no-repeat 0 0; transition:transform 0.2s ease-in-out}
.gnb .depth4 .close:hover:before, .gnb .depth4 .close:focus:before {transform:rotate(-90deg); background-position: 0 bottom;}

.gnb .d4Btn {position:relative; display:inline-block; width:25px; height: 17px; margin-left:7px; box-sizing: border-box; border:4px solid #fff; border-radius:2px; margin-top:-3px; vertical-align: middle; box-shadow: 0 0 0 1px #777 inset; border-top: none; border-bottom: none;}
.gnb .d4Btn:before, .gnb .d4Btn:after {content: ''; position: absolute; top:4px; left:8px; width:1px; height:9px; background-color: #666; transition: transform 0.25s ease-in-out, background-color 0.25s ease-in-out, height 0.3s linear, width 0.3s linear, top 0.3s linear;}
.gnb .d4Btn:after {left:4px; top:8px; width: 9px; height: 1px;}
.gnb .on > a > .d4Btn:before {height: 1px; top:8px}
.gnb .d4Btn:hover, .gnb .d4Btn:focus {box-shadow: 0 0 0 1px #0063cc inset;}
.gnb .d4Btn:hover:before, .gnb .d4Btn:hover:after, .gnb .d4Btn:focus:before, .gnb .d4Btn:focus:after {transform: rotate(180deg); background-color: #0063cc}

/* 20.08.13 gnb+link 추가 - depth3,depth4에만 적용 , 뱅킹홈페이지 및 웹비즈에서만 사용  (정현아)*/
.gnb .link > span {position: relative; z-index: 2;}
.gnb .link > span:before{content:''; position: absolute; width:14px; height:14px; top:1px; left:auto; right:-20px; background: url(../img/common/ico_gnb_link_off.png) no-repeat 0; z-index: 2;}
.gnb .link:hover > span:before, .gnb .link:focus > span:before{background: url(../img/common/ico_gnb_link_on.png) no-repeat 0;}


/* GNB Icon Button */
.gnbArea .right {position:absolute; margin-top:13px; margin-right:-573px; right:50%;}
.gnbArea .right li {position: relative; margin:0 8px;}
.gnbArea .right [class*=Log]:not(.csBtnLogin):before {content: ''; position: absolute; top:5px; left:auto; bottom:6px; right:-9px; border-left: 1px solid #ccc;}
.gnbArea .right [class*=Log].noLine:before {right:0; border-left:0;}
.header [class^=gnbBtn] > a,
.header [class^=gnbBtn] > button,
.header [class^=gnbBtn] > strong {display:block; width: 34px; height: 34px; background: url('../img/common/img_common.png') no-repeat 0 0; white-space: nowrap; transition:all 0.3s ease-in-out}
.header [class^=gnbBtn] > a:hover,
.header [class^=gnbBtn] > button:hover,
.header [class^=gnbBtn] > strong:hover{background-position-y:-34px }
.header:not(.onLoad) .gnbArea .right [class^=gnbBtn] span {color:#fff}
.header .gnbBtnSitemap > a,
.header .gnbBtnSitemap > button {background: url('../img/common/img_common.png') no-repeat -40px 0;}
.header .crumbArea [class^=gnbBtn] > a,
.header .crumbArea [class^=gnbBtn] > button,
.header .crumbArea [class^=gnbBtn] > strong {display:inline-block; width: auto; margin-left:12px; padding-left: 35px; line-height: 33px; font-weight: bold; font-size: 14px; color:#333; transition: color 0.15s linear;}
.header .crumbArea [class^=gnbBtn] > a>span,
.header .crumbArea [class^=gnbBtn] > button>span,
.header .crumbArea [class^=gnbBtn] > strong>span{vertical-align: middle;}
.header .crumbArea [class^=gnbBtn] > a:before,
.header .crumbArea [class^=gnbBtn] > button:before,
.header .crumbArea [class^=gnbBtn] > strong:before{content: '';display: block;width:30px;height:34px; background: url('../img/common/img_common.png') no-repeat -485px 0; position: absolute; left:13px; top:50%; margin-top:-17px;} 
.header .crumbArea .right {margin-top: 3px;}
.header .gnbBtnKDB > a, .header .gnbBtnKDB > button, .header .gnbBtnKDB > strong {background: none;}
.header .gnbBtnKDB > a:before, .header .gnbBtnKDB > button:before, .header .gnbBtnKDB > strong:before{background-position: -560px 0px !important;}
.header .gradientOn .gnbBtnKDB > a:before, .header .gradientOn .gnbBtnKDB > button:before, .header .gradientOn .gnbBtnKDB > strong:before,
.header .gradientOn .gnbBtnKDB > a:hover:before, .header .gradientOn .gnbBtnKDB > button:hover:before, .header .gradientOn .gnbBtnKDB > strong:hover:before{background-position: -560px -68px !important;}
.header .gnbBtnKDB .dropMenu {margin:5px auto auto 17px}
.header .gnbBtnTimer > a, .header .gnbBtnTimer > button {background:none;}
.header .gnbBtnTimer > a:before, .header .gnbBtnTimer > button:before{background-position: -595px -0px !important;}
.header .gradientOn .gnbBtnTimer > a:before, .header .gradientOn .gnbBtnTimer > button:before,
.header .gradientOn .gnbBtnTimer > a:hover:before, .header .gradientOn .gnbBtnTimer > button:hover:before{background-position: -595px -68px !important;}
.header .gnbBtnLogout,
.header .gnbBtnLogin {position: relative; margin-left:25px;}
.header .gnbBtnLogout > a, .header .gnbBtnLogout > button,
.header .gnbBtnLogin > a, .header .gnbBtnLogin > button {background:none;}
/*.header .gnbBtnLogout > a > span{vertical-align: middle;}*/
.header .gnbBtnLogout > a:before, .header .gnbBtnLogout > button:before {content: '';display: block;width:30px;height:34px; background: url('../img/common/img_common.png') no-repeat -485px 0; position: absolute; left:13px; top:50%; margin-top:-17px;}
.header .gradientOn .gnbBtnLogout > a:before, .header .gradientOn .gnbBtnLogout > button:before,
.header .gradientOn .gnbBtnLogout > a:hover:before, .header .gradientOn .gnbBtnLogout > button:hover:before{background-position: -485px -68px !important;}
.header .gnbBtnLogout:before {content: ''; position: absolute; border-left:1px solid #d3d3d3; top:4px; bottom:5px; left:-5px;}
/*로그인 버튼 개선*/
.header .gnbBtnLogin > a:before, .header .gnbBtnLogin > button:before {content:''; display: block; width:30px; height:34px; background: url('../img/common/img_common.png') no-repeat 0 0; position:absolute; left:0; top:50%; margin-top:-17px; transition:all 0.3s ease-in-out}
.header .gnbBtnLogin > .useTxt:before {left:13px;}
.header .gnbBtnLogin > a:hover:before, .header .gnbBtnLogin > button:hover:before{background-position-y: -34px;}
.header .gnbBtnLogin .useTxt:hover span:after, .header .gnbBtnLogin .useTxt:focus span:after, 
.header .gnbBtnLogout .useTxt:hover span:after, .header .gnbBtnLogout .useTxt:focus span:after {right:5px !important;}

.header [class^=gnbBtn] a:hover, .header [class^=gnbBtn] a:focus,
.header [class^=gnbBtn] button:hover, .header [class^=gnbBtn] button:focus {color:#0063cc; }
.header [class^=gnbBtn] a:hover:before, .header [class^=gnbBtn] a:focus:before,
.header [class^=gnbBtn] button:hover:before, .header [class^=gnbBtn] button:focus:before{background-position-y:-34px !important;}
.header [class^=gnbBtn] span:after {left:37px; bottom:7px;}
.header [class^=gnbBtn] a:hover span:after, .header [class^=gnbBtn] a:focus span:after,
.header [class^=gnbBtn] button:hover span:after, .header [class^=gnbBtn] button:focus span:after {left:47px; right: 0; width:auto}
.header .gnbBtnClose > button {background: url('../img/common/btn_pop_service_close.png') no-repeat center center;}
.header .gnbBtnClose > button:hover, .header .gnbBtnClose > button:focus {background-position: center center;}
.header .crumbWrap .gnbBtnLogin > a{background:none; }
.header .crumbWrap .gnbBtnLogin > a:before{content: ''; display: block; position: absolute; left:10px; top:17px; width: 34px;height: 34px;background: url(../img/common/img_common.png) no-repeat 0 0;}
.header .crumbWrap .gnbBtnLogin > a:hover:before{background-position: 0 -34px}
.header .gradientOn .crumbWrap .gnbBtnLogin > a:before,
.header .gradientOn .crumbWrap .gnbBtnLogin > a:hover:before{background-position: 0 -68px !important;}

/* Crumb Area */
.crumbArea {height:40px; border-bottom:1px solid #ececec; background-color: #fafafa; z-index: 2; box-sizing: border-box;}
.crumb > li {float: left; position:relative;}
.crumb > li:first-child > a {padding-left: 10px;}
.crumb > li:first-child:before {content: none;}
.crumb > li:first-child .dropMenu {margin-left: 0}
.crumb > li:before {content: ''; position: absolute; width:13px; height: 40px; left: -13px; background: url('../img/common/bg_gnb_crumb.png') no-repeat 0 -5px; z-index: 0}
.crumb > li > a, .crumb > li > span {position:relative; display: block; height:40px; padding:0 38px 0 19px; line-height: 40px; color:#555; font-size:15px; z-index: 1; transition: color 0.15s linear}
.crumb > li > a .blind.on, .crumb > li > a .blind.off {display: none}
.crumb > li > a .blind.off, .crumb > li.on > a .blind.on {display: block;}
.crumb > li.on > a .blind.off {display: none;}
.crumb > li.on {z-index: 2}
.crumb > li.on > a, .crumb > li > a:hover, .crumb > li > a:focus {color:#0063cc;} 
.crumb > li > a:after {content: ''; position: absolute; top:17px; right:23px; width:7px; height: 4px; background: url('../img/common/bg_gnb_crumb_arr.png') no-repeat 0 0; transition: transform 0.15s ease-in-out;}
.crumb > li.on > a:after, .crumb > li > a:hover:after {background-position: 0 -4px;}
.crumb > li.on > a:after {transform:rotate(180deg);} 
.crumbArea li .dropMenu {position:absolute; display: none; padding:10px 0px; margin:0 auto auto -11px; border:1px solid #d2d2d2; border-radius: 2px; background: #f8f8f8; box-sizing: border-box; min-width: 180px; box-shadow: 0 4px 8px rgba(0,0,0,0.1)}
.crumbArea .dropMenu li {float: none}
.crumbArea li .dropMenu a {padding:5px 18px; white-space: nowrap;}
.crumbArea li .dropMenu a:hover, .crumbArea li .dropMenu a:focus {background: #fff; color:#0063cc;} 
.crumbArea li .dropMenu li.on a {background: #fff; color:#0063cc;}
.crumbWrap {position: relative;}
.crumbWrap .right {position: absolute; right:0; float: none;}

/* 전체메뉴 확장형 GNB */
.header.expand.gnbOpen .gnb .menu {opacity: 0}
.header.expand .gnb .kdbLogo {padding-right: 47px;}
.header.expand .gnb .menu {transition:padding 0.2s ease-in-out, opacity 0.2s ease-in-out, top 0.2s ease-in-out;}
.header.expand .gnb .menu > li > a {padding-right:19px; padding-left:18px;}
.header.expand.gnbOpen .gnbArea {box-shadow: none; border-bottom: none}
.header.expand.gnbOpen .subArea {top: 55px; }
.header.expand.gnbOpen.sticky .gnb .kdbLogo:after {content: none}
.header.expand .subArea {padding-top: 0px; transition: top .2s ease-in-out;}
.gnb.col6 .depth2 {margin:0 -15px}
.gnb.col6 .depth3 > li > a {padding-right: 0 !important}
.gnb.col6 .depth2 > li {padding: 0 15px; width:188px}
.gnb.col5 .depth2 > li {width:20%}
.gnb.col3 .depth2 > li {width:33.3%}
.header.expand .gnbArea .right [class*=Log]:before {content: none}

/* 기업뱅킹 */
.enterprise .gradient {position:relative;}
.enterprise .gradient:before {background: #003895;}
.enterprise .gradient:after {content: none;}

/* 퇴직연금*/
.header.retire .gnb .menu > li > a {padding-left: 10px; padding-right: 10px; font-size: 18px; line-height:26px; letter-spacing: -0.03em}
.header.retire.sticky .gnb .menu > li > a {font-size: 16px;}
 
/* 뱅킹홈 */
.gnb .kdbLogo {position:relative; float: left; margin-top:19px; padding-right: 30px; transition:padding 0.25s ease-in-out;}
.gnb .kdbLogo ~ .menu{float: left}
.gnb .kdbLogo:after {content: ''; position:absolute; border-right: 1px solid #ccc; top: 20%; bottom: 80%; right: 23px; transition:top 0.25s ease-in-out, bottom 0.25s ease-in-out;}
.header.notThin .gnb .kdbLogo:after {content: none !important;}

/* 2024.12.17 서브브랜드 CI 수정 */
.od .gnb .kdbLogo,
.fafl .gnb .kdbLogo,
.ng .gnb .kdbLogo,
.kc .gnb .kdbLogo,
.tm .gnb .kdbLogo,
.ce .gnb .kdbLogo,
.ks .gnb .kdbLogo,
.cp .gnb .kdbLogo,
.ck .gnb .kdbLogo {margin-top:14px;}

/* 관광기금금융자지원시스템 */
.header.se.sticky .gnb .menu > li > a {padding-left: 14px !important; padding-right: 15px !important }

/* 금융대학교 */
.header.cu .gnb .kdbLogo {margin-top: 9px;}
.header.cu .gnb .kdbLogo:after {top: 50%; bottom: 50%;}
.header.sticky.cu .gnb .kdbLogo:after {top: 10px; bottom: 11px;}

/* 넥스트라운드 */
.header.nr .gnb .kdbLogo img {margin-top: -5px;}

/* 유가증권수탁 */
/* .header.cp .gnbArea .right [class*=Log]:before {content: none} 23.12.14 로그인개선 삭제 */

/* 상담용 기업뱅킹 1차메뉴 */
.csMode.enterprise .gnb .menu > li > a {padding-right:6px !important; padding-left:6px !important; font-size:15px;}
.csMode.enterprise.sticky .gnb .menu > li > a {padding-right:4px !important; padding-left:4px !important; line-height: 29px;}
.csMode.enterprise.sticky .gnb .depthTit {line-height:30px; font-size: 18px}
.csMode.enterprise .gnb .menu {margin-left: 0}
.csMode.enterprise .gnb .depthTit {padding-right: 30px;}
.csMode.enterprise .gnb .depthTit:after {right: 10px;}

/* 상담용 레이아웃 */
.csHELPWrap {width:1132px; margin:0 auto; }
.csHeader {position:relative; max-width:1132px; height:70px; padding:22px 20px 0 20px; margin:30px auto 0; background-color:#003895; color:#fff; font-size: 20px; box-sizing: border-box; font-size: 16px}
.csHeader > strong {float: left; font-size: 20px;}
.csHeader .txtItem {float: right; font-size: 16px; color:#eaeaea; margin-top:3px}
.csHeader .txtItem > li:before {top:5px; border-color: rgba(204,204,204,0.4)}
.csHeader:after {content: ''; position: absolute; width:0px; height:0; bottom: 0; left:20px; border:10px solid #fff; border-left-color: rgba(0,0,0,0); border-right-color: rgba(0,0,0,0); border-top: none;}
.csCont {padding: 30px; background-color: #f8f8f8}
.csCont .fileList {padding-left: 0; margin-top: 30px;}
.csCont .commentListWrap {background-color: #fff; margin-top: 20px; border-bottom: none}
.csHELPWrap {display: none}
.csMode .csHELPWrap {display: block; margin-top: 50px}

/*=========================================== quick menu ==============================================*/
.quick{position:absolute; top:175px; right:0; z-index: 400}
.quick .tag{display:inline-block; padding:1px 6px; font-size:11px; color:#fff; text-align:center; vertical-align:middle; border-radius:18px; background-color:#ff4234}
.quick .txtHover{max-width:100%; height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.quick .tip{max-width:100%}
.quick .tipWrap{width:100%}
.quick .tipWrap .help.hasLink{position:relative; width:auto; max-width:100%; background:none}

.quickBar{position:relative; width:70px; border-radius:8px; box-shadow: 5px 5px 5px rgba(0,0,0,0.07); box-sizing: border-box;}
.quickBar li:first-child{padding-top:1px}
.quickBar li > a{position:relative; display:block; text-align:center; padding:45px 0 0; background-color:#6b7596; border-left:1px solid #6b7596; border-right:1px solid #6b7596; z-index:2; transition: background-color 0.2s ease-in-out; outline:rgba(0,0,0,0)}
.quickBar li > a:before{content:""; display:block; position:absolute; top:14px; left:0px; width:68px; height:30px; background: url(../img/common/ico_quick_bar.png) no-repeat 0 0; transition: background-position 0.2s ease-in-out}
.quickBar li:first-child > a{padding-top:54px; border-radius:8px 8px 0 0; border-top:1px solid #6b7596; }
.quickBar li:first-child > a:before {top:24px;}
.quickBar li:last-child > a{padding-bottom:10px; border-radius:0 0 8px 8px; border-bottom:1px solid #6b7596;}
.quickBar li .tip {position:relative; display:block; height:30px; font-size:12px; color:#fff; transition: color 0.2s ease-out }
.quickBar li > a .tag{position:absolute; top:20px; left:38px;}
.quickBar li.over > a, .quickBar li.on > a{background-color:#f1f7fd}
.quickBar li.over > a .tip , .quickBar li.on > a .tip {color:#555}
/* quick bar item */
.quickBar li .itemSmart:before {background-position:0 0}
.quickBar li .itemPay:before {background-position:0 -30px}
.quickBar li .itemMy:before {background-position:0 -60px}
.quickBar li .itemSupport:before {background-position:0 -90px}
.quickBar li .itemMall:before {background-position:0 -120px}
.quickBar li .itemRetire:before {background-position:0 -150px}
.quickBar li .itemCS:before {background-position:0 -180px}
.quickBar li.over .itemSmart:before, .quickBar li.on .itemSmart:before {background-position:right 0;}
.quickBar li.over .itemPay:before, .quickBar li.on .itemPay:before {background-position:right -30px;}
.quickBar li.over .itemMy:before, .quickBar li.on .itemMy:before {background-position:right -60px;}
.quickBar li.over .itemSupport:before, .quickBar li.on .itemSupport:before {background-position: right -90px;}
.quickBar li.over .itemMall:before, .quickBar li.on .itemMall:before {background-position: right -120px;}
.quickBar li.over .itemRetire:before, .quickBar li.on .itemRetire:before {background-position:right -150px;}
.quickBar li.over .itemCS:before, .quickBar li.on .itemCS:before {background-position:right -180px;}

/* quick layer cont */
.quick .quickCont{display:none; position:absolute; top:0; right:80px}
.quick .quickCont.active{display:block}
.quick .quickBox{position:relative; width:258px; border:1px solid #4b4e68; border-radius:8px; box-sizing:border-box; background-color:#fff; box-shadow: 5px 5px 5px rgba(0,0,0,0.07);}
.quick .sec{margin-top:30px;}
.quick .sec:first-child{margin-top:0;}
.quick .sec.line{margin-top:20px;padding-top:15px; border-top:1px solid #e7e7e7}
.quick .sec:last-child {margin-bottom: 30px;}

.quick .quickSmart{min-width:640px; padding:30px 7px 70px 30px}
.quick .bottomArea{position:absolute; bottom:0; left:0; width:100%; padding:15px 30px; vertical-align:middle; box-sizing:border-box; border-top:1px solid #e7e7e7; border-radius:0 0 8px 8px; background-color:#f8f8f8}
.quick .scroll{max-height:400px; padding:0 7px 0px 0; overflow-x:hidden; overflow-y:auto}
.quick .infoBox{margin-bottom:20px; padding:15px 20px;}
.quick .infoBox .topArea:after{content:""; display:block; clear:both}
.quick .infoBox .topArea .fl > em{display:block; padding-bottom:15px; font-size:18px; color:#333}
.quick .infoBox .topArea .fl > .status{display:block; padding-bottom:10px; font-size:14px; color:#333}
.quick .infoBox .topArea .cbtnB{margin-top:10px}
.quick .infoBox .subInfo{padding-top:15px; border-top:1px solid #ccc}
.quick .infoBox .subInfo:after{content:""; display:block; clear:both}
.quick .infoBox .subInfo > li{float:left; margin-left:20px}
.quick .infoBox .subInfo > li:first-child{margin-left:0}
.quick .payList{padding:0 30px 10px; }
.quick .payList > li{position:relative; padding:30px 0 20px; text-align:center; border-top:1px solid #c5d1d8}
.quick .payList > li:before{content:''; position:absolute; top:-1px; left:77px; width:44px; height:13px; background: url(../img/common/bg_step.png) no-repeat 0 bottom;}
.quick .payList > li:first-child{border-top:0}
.quick .payList > li:first-child:before{display:none}
.quick .payList > li .sTit{font-size:16px; color:#555}
.quick .payList > li .sNum{font-size:24px; color:#555}
.quick .payList > li .sNum > em{position:relative; display:inline-block; height:34px; color:#d6006d; border-bottom:1px solid #fff}
.quick .payList > li .sNum:hover > em{content:""; display:inline-block; width:auto; height:34px; border-bottom:1px solid #d6006d}

.quick .linkList > li{padding-top:7px}
.quick .linkList > li:first-child{padding-top:0}
.quick .linkListWrap{padding:10px 0}
.quick .linkListWrap > li{padding:20px 0; border-top:1px solid #ccc}
.quick .linkListWrap > li:first-child{border-top:0}

.quick .quickMy{padding:20px 30px 30px}
.quick .quickMy .linkList > li {position:relative; margin-top:7px; padding-top:0; padding-left:19px; }
.quick .quickMy .linkList > li:before {display:block; content:''; position:absolute; top:12px; left:1px; width: 5px; height: 5px;  border-radius: 1px; transform: rotate(45deg); background: #333;}
.quick .quickMy .linkList > li:first-child{margin-top:0; padding-top:0;}
.quick .quickMy .linkList > li .icoBtnClose {top:17px;}
.quick .quickMy .linkList > li .tip {vertical-align:top;}
.quick .quickMy li .linkLocation:after{content:""; display:inline-block; clear:both}
.quick .quickMy li .linkLocation > span{position:relative; float:left; display:inline-block; padding-left:15px;}
.quick .quickMy li .linkLocation > span:before{content:""; display:block; position:absolute; top:0; left:0; width:15px; height:22px; padding-left:3px; background:url('../img/common/bul_sitemap_arrow.png') no-repeat 3px center;}
.quick .quickMy li .linkLocation > span:first-child{padding-left:0}
.quick .quickMy li .linkLocation > span:first-child:before{display:none}
.quick .quickMy .btnArea button[class^=btn]{width:100%; margin:10px 0 0}
.quick .quickMy .btnArea button[class^=btn]:first-child{margin:0}

.quick .quickSupport,
.quick .quickMall,
.quick .quickRetire {padding:0 30px}
.quick .quickSupport .linkList > li{padding-left:50px}
.quick .icoTitLately,
.quick .icoTitWish{display:inline-block; margin-bottom:15px; padding:2px 0 4px 40px; color:#333;}
.quick .quickTit{display:inline-block; margin-bottom:15px; color:#333;}
.quick .icoTitLately .tag,
.quick .icoTitWish .tag{position:absolute; top:6px; left:100%; margin-left:5px}
.quick .icoTitWish > a:hover,
.quick .icoTitWish > a:focus{color:#0063cc}
/* quick ico */
.quick [class^=icoTit]{position:relative;}
.quick [class^=icoTit]:before{content:""; display:inline-block; position:absolute; top:0; left:0; width:30px; height:30px; background:url(../img/common/ico_quick.png) no-repeat 0 0}
.quick .icoTitDic:before{background-position:0 0}
.quick .icoTitFin:before{background-position:0 -30px}
.quick .icoTitInfo:before{background-position:0 -60px}
.quick .icoTitLately:before{background-position:0 -90px}
.quick .icoTitWish:before{background-position:0 -120px}
.quick .icoTitTel:before {background:url('../img/common/ico_quick_cs_01.png') no-repeat 0 0;}
.quick .icoTitOnline:before {background:url('../img/common/ico_quick_cs_02.png') no-repeat 0 0;}
.quick .icoTitShare:before {background:url('../img/common/ico_quick_cs_03.png') no-repeat 0 0;}
/* quick close */
.quick .quickPopClose{position:absolute; top:10px; right:10px; width:24px; height:24px; background:url(../img/common/btn_quick_close.png) no-repeat center center}

/* quick mini mode */
.quick.mini .quickBar {z-index: 10}
.quick.mini .menu .tip {position: absolute; top:2px; right:40px; transform: scale(0.0, 0.8); transform-origin: 104% 50%; visibility: hidden; padding:0 10px; border:1px solid #666; background-color:#fff; border-radius: 4px; line-height: 30px; color:#333; box-shadow:5px 5px 5px rgba(0,0,0,0.07); transition: transform 0.18s ease-out, right 0.18s ease-out;}
.quick.mini .menu .arrow {position: absolute; top: 6px; right: -9px; width:9px; height:17px; overflow: hidden; z-index: 2}
.quick.mini .menu .arrow:after {content: ''; position: absolute; top: 2px; left: -9px; width:12px; height: 12px; background-color: #fff; border:1px solid #666; transform: rotate(45deg);}
.quick.mini .quickBar li > a {padding-bottom: 10px;}
.quick.mini .quickBar li:first-child .tip {top:12px;}
.quick.mini .quickBar li:last-child > a {padding-bottom: 20px;}
.quick.mini .quickBar li > a:before {margin-top:-1px;}
.quick.mini .menu .over .tip {visibility: visible; right:60px; transform: scale(1); }
.quick.mini .scroll {max-height: 280px;}

.direct_btn_area {display:flex; flex-direction:row; justify-content:space-between; margin-top:20px;}
.direct_btn_area .icoBtn {position:relative; width:93px; height:90px; padding:60px 10px 10px; text-align:center; background:#FFFFFF; font-size:14px; color:#001f5b; font-weight:bold;}
.direct_btn_area .icoBtn::before {content:''; display:block; position:absolute; left:0; top:0; width:100%; height:65px;}
.direct_btn_area .icoBtn:hover,.direct_btn_area .icoBtn:focus {background:#FFFFFF; border-color:#001f5b;}
.direct_btn_area .icoBtn.icoKDB::before {background:url('../img/main/be/ico_direct1.png') no-repeat center;}
.direct_btn_area .icoBtn.icoDeachul::before  {background:url('../img/main/be/ico_direct_daechul.png') no-repeat center;}

/*=========================================== goTop ==============================================*/
/*.goTop {z-index: 480}*/
.goTop:not(.bottom) {position: fixed; right:0; bottom:20px !important; display: none;}
.goTop.comparePage:not(.bottom) {bottom:93px !important;}/*상품비교페이지*/
.goTop.bottom {position: absolute;} 
body.fit .goTop.bottom {left: 1142px !important;} 
.goTop .btnGoTop{width:50px; min-width:0; height:50px; line-height:28px; padding:0; font-size:12px; color:#666; border:1px solid #e0e0e0; background-color:#fff}
.goTop .btnGoTop:hover,
.goTop .btnGoTop:focus{background-color:#f5f5f5}
.goTop .btnGoTop span{position:relative; display:inline-block; padding-top:17px}
.goTop .btnGoTop span:before{content:""; display:inline-block; position:absolute; top:9px; left:50%; margin-left:-8px; width:16px; height:9px; background:url(../img/common/btn_go_top.png) no-repeat center center}

/*=========================================== search ==============================================*/
.autoSearch {position:relative; margin-top:-106px; left:0; right:0; width:100%; min-width:1132px; height:106px; z-index:600; transition: margin 0.25s ease-out;}
.autoSearch.open {margin-top:0}
.autoSearch .gradient{min-height:106px}
.autoSearch .gradient:before,
.autoSearch .gradient:after{top:0; transition:none;}
.autoSearch .searchWrap{position:relative; width:1132px; margin:0 auto}
.autoSearch .searchWrap:after{content:""; display:block; clear:both}
.autoSearch .logo{float:left; display:inline-block; width:288px; padding-top:60px}
.autoSearch .searchArea{position:relative; float:left; width:844px; }
.autoSearch .searchBtnClose{position:absolute; top:50px; right:0; width:38px; height:38px;}
.autoSearch .searchBtnClose:before {content:''; position:absolute; top:0; left:0; width:38px; height:38px; background: url('../img/common/btn_gnb_side_close.png') no-repeat 0 0; transition:transform 0.25s ease-out}
.autoSearch .searchBtnClose:hover:before, .autoSearch .searchBtnClose:focus:before {transform:rotate(90deg)}
.searchOpen .topArea {min-height: 36px;}
.searchOpen .topWrap {display: none}

.autoSearch .searchCont{position:relative; width:556px; margin-top:46px; z-index:3}
.autoSearch .searchCont .ipt {height:50px; line-height:48px; padding-right:55px; border:1px solid #fff; }
.autoSearch .searchCont .ipt:focus{outline:none; box-shadow:none}
.autoSearch .searchCont .icoBtn{position: absolute; top:1px; right: 1px; width:51px; height:48px; background: url('../img/common/btn_search_search.png') no-repeat center; border:none; transition:none;}
.autoSearch .searchCont .layer{display:none}
.autoSearch .searchCont.on{ box-shadow:3px 3px 6px 0px rgba(0,0,0,0.1);}
.autoSearch .searchCont.on .ipt{border-radius:4px 4px 0 0 ; border:1px solid #0068d4}
.autoSearch .searchCont.on .layer{display:block; position:absolute; top:49px; left:0; width:100%; max-height:358px; padding:12px 18px; border:1px solid #0068d4; border-radius:0 0 4px 4px; background-color:#fff; color:#333; box-sizing:border-box; font-size:16px; box-shadow:3px 3px 6px 0px rgba(0,0,0,0.1);overflow:auto; z-index:5}
.autoSearch .searchCont.on .resultList{padding:8px 0 0}
.autoSearch .searchCont.on .resultList > li{padding-bottom:8px}
.autoSearch .searchCont.on .resultList > li .links{display:inline-block; line-height:22px; color:#666; border:0}
.autoSearch .searchCont.on .resultList > li .links.ui-state-active {background-color: #eee !important}
.autoSearch .searchCont.on .resultList > li .links:after{content:""; display:none; clear:both}
.autoSearch .searchCont.on .resultList > li .links:hover{color:#0063cc;}
.autoSearch .searchCont.on .resultList > li .links:hover:after{display:none}
.autoSearch .searchCont.on .resultList > li .links > span{position:relative; float:left; display:inline-block; padding-left:15px; border-bottom:1px solid #fff}
.autoSearch .searchCont.on .resultList > li .links > span:after{display:none}
.autoSearch .searchCont.on .resultList > li .links > span:before{content:""; display:block; position:absolute; top:0; left:0; width:15px; height:22px; padding-left:3px; background:url('../img/common/bul_sitemap_arrow.png') no-repeat 3px center;}
.autoSearch .searchCont.on .resultList > li .links > span:first-child:before{display:none}
.autoSearch .searchCont.on .resultList > li .links > span:first-child{padding-left:0}
.autoSearch .searchCont.on .resultList > li .links:hover > span,
.autoSearch .searchCont.on .resultList > li .links:focus > span{color:#0063cc; border-bottom:1px solid #0063cc;}
.autoSearch .searchCont.on .resultList > li .links:hover > span:before,
.autoSearch .searchCont.on .resultList > li .links:focus > span:before{color:#0063cc; border-bottom:1px solid #0063cc; background:url('../img/common/bul_sitemap_arrow_on.png') no-repeat 3px center;}

/* popularSearch:인기검색어 */
.autoSearch .popularSearch{white-space: nowrap;}
.autoSearch .popularSearch:after{content:""; display:block; clear:both}
.autoSearch .popularCont{display:inline-block}
.autoSearch .popularCont .tit{display:inline-block; margin:16px 2px 0; font-size:16px; color:#fff}
.autoSearch .wordList{display:inline-block; margin-top:16px; }
.autoSearch .wordList:after{content:""; display:block; clear:both}
.autoSearch .wordList > li{display:inline-block;margin-left:10px; text-align: center;}
.autoSearch .itemWord{position:relative; display:block; }
.autoSearch .itemWord span{position:relative; display:block; padding:1px 10px 3px; color:#fff; opacity:1; z-index:2}
.autoSearch .itemWord:before{content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:1px solid #fff; border-radius:3px 3px; opacity:0.4; z-index:1}
.autoSearch .itemWord:hover span, .autoSearch .itemWord:focus span{color:#333}
.autoSearch .itemWord:hover:before, .autoSearch .itemWord:focus:before{background-color:#fff; opacity:0.8; }

/* ------------------------------------------ Footer ------------------------------------------ */
.footer {height:auto; background: #4b4e68; color:#fff}
.footerWrap {width: 1132px; padding: 30px 0 60px; margin:0 auto;}
.footer .topArea {padding-bottom:27px; border-bottom: 1px solid #717386;}
.footer .topArea:after, .footer .topArea:before {content: " "; display: table;}
.footer .topArea:after {clear: both;}
.footer .topArea li {float: left;}
.footer .topArea li a {display: block;}
.footer .topArea li a:hover {text-decoration: underline;}
.footer .topArea .leftArea {float: left;}
.footer .topArea .leftArea li {margin-left: 17px; letter-spacing: -0.015em; font-family:'Roboto Regular', 'NotoSans Regular', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', sans-serif;}
.footer .topArea .leftArea li:first-child {margin-left: 0}
.footer .topArea .rightArea {float: right;}
.footer .topArea .rightArea li {position:relative; margin-left: 20px;}
.footer .topArea .rightArea li:before {content: ''; position: absolute; left: -11px; top: 5px; bottom: 4px; border-left: 1px solid #dedede;}
.footer .topArea .rightArea li:first-child:before {content: none;}

.footer .bottomArea .leftArea {margin-bottom: 10px;}
.footer .bottomArea .leftArea li a {position: relative; font-size: 14px;}
.footer .bottomArea .leftArea li a:after {content: ''; position: absolute; bottom:0px; left:0; right:0; border-bottom: 1px solid rgba(222,222,222,0.4);}
.footer .bottomArea {position:relative; padding-top: 25px; color:#dedede; font-size: 14px}
.footer .bottomArea address {font-style: normal;}
.footer .bottomArea address, .footer .bottomArea .contact {display:inline-block;}
.footer .bottomArea .contact {position:relative; display: block; margin: 4px 0; /*letter-spacing: -0.02em*/}
/*.footer .bottomArea .contact:before {content: ''; position: absolute; left: 7px; top: 6px; bottom: 4px; border-left: 1px solid #dedede;}*/

.footer .shareArea {position: absolute; top:95px; right: 0;}
.footer .shareArea .sns {float:left; display:block; width:30px; height: 30px; margin-left: 15px; overflow: hidden; opacity: 0.65; vertical-align: middle; background: url('../img/common/img_common.png') no-repeat 0 0}
.footer .shareArea .sns:hover,.footer .shareArea .sns:focus {opacity: 0.85}
.footer .shareArea .sns.bl {background-position:-90px 0}
.footer .shareArea .sns.fb {background-position:-121px 0}
.footer .shareArea .sns.yt {background-position:-152px 0}
.footer .waMark {float:left; height:30px; display:block; margin-left: 20px;}/* 인증마크 따면 display:none; 삭제 */
.footer .waMark img {margin-top: -6px;}

.footer .fSite {position: absolute; right:0; bottom:24px; width:240px; min-height:40px; border-radius: 4px; border:1px solid #999; background-color:#4b4e68; color:#fff; line-height: 38px; overflow: hidden; transition: background 0.5s}
.footer .fSiteBtn {position:absolute; bottom:0px; display: block; width:100%; height: 40px; padding-left:20px; background-color:#4b4e68; color:#fff; text-align:left; font-size:16px; box-sizing: border-box; z-index: 3; transition:background-color 0.2s, color 0.2s}
.footer .fSiteBtn:after {content: ''; position:absolute; bottom:16px; right:19px; display: block; width:11px; height: 6px; background: url('../img/common/img_common.png') no-repeat -183px 0; transition: transform 0.5s;}
.footer .fSite.on, .footer .fSiteBtn:focus, .footer .fSiteBtn:hover {background-color: #fff; color:#333; z-index: 1000}
.footer .fSiteList {position: relative; bottom: 0px; height:0; padding-bottom: 0px; transition: all 0.5s; box-sizing: border-box; z-index: 1; visibility: hidden;}
.footer .fSiteList a {display: block; height:40px; padding: 0 20px; line-height: 40px; color:#333; font-size: 16px;}
.footer .fSiteList a:hover,.footer .fSiteList a:focus {background-color: #eee}
.footer .fSite.on .fSiteList {padding-bottom: 40px; visibility: visible;}
.footer .fSite.on .fSiteBtn {background-color:#fff; color:#333;}
.footer .fSite.on .fSiteBtn:after {background: url('../img/common/img_common.png') no-repeat -183px 0; transform: rotate(180deg)}
.footer .fSiteBtn:focus:after, .footer .fSiteBtn:hover:after {background: url('../img/common/img_common.png') no-repeat -183px 0;}
.footer .fSite .focusSet {display: none;}
.footer .fSite.on .focusSet {display: block;}

/* Footer - white version */
.footer.white {min-width:1132px; height:auto; background-color: #fff; color:#666;}
.footer.white .topArea {border-color: #ccc; color:#333}
.footer.white .bottomArea {color: #666}
.footer.white .fSiteBtn {background-color: #fff; color:#333}
.footer.white .fSite {background-color: #fff}
.footer.white .fSite .fSiteBtn:after {background: url('../img/common/img_common.png') no-repeat -183px 0; }
/*.footer.white .footerWrap {padding-bottom: 80px;}*/
.footer.white .topArea .rightArea li:before {border-color:#666}
.footer.white .shareArea .sns.bl {background-position:-90px -30px}
.footer.white .shareArea .sns.fb {background-position:-121px -30px}
.footer.white .shareArea .sns.yt {background-position:-152px -30px}

/* Mini Footer */
#footer.mini {height: auto;}
#footer.mini .footerWrap {padding-bottom: 25px;}
#footer.mini .bottomArea {padding-top: 0}
#footer.mini .waMark img {margin-top:0;}
#footer.noFSite .shareArea {top:35px; right: 0}
#footer.noFSite .bottomArea .contact, #footer.contactInline .bottomArea .contact, .en #footer .bottomArea .contact {display: inline-block; margin:0 0 4px 0; padding-left: 16px;}
#footer.noFSite .bottomArea .contact:before, #footer.contactInline .bottomArea .contact:before, .en #footer .bottomArea .contact:before {content: ''; position: absolute; left: 7px; top: 6px; bottom: 4px; border-left: 1px solid #dedede;}
#footer.contactInline .fSite, .en #footer .fSite {bottom: 0}

/* footer 한줄 추가 */ 
.footer.line3, .footer.line4{height:auto;}
/*.footer.line3 .footerWrap, .footer.line4 .footerWrap{padding-bottom: 35px;}*/
.footer.line3 .fSite, #footer.contactInline.line3 .fSite{bottom:25px !important; }
.footer.line4 .fSite{bottom:50px;}



/* 반응형 처리 - 디바이스 기반 */
.visibleDevice {display: none !important;}
/*.visiblePC {display: block;}*/

/* 혁신성장정책금융센터 2020.03.09(정현아) */
.header.ng .gnb .depth3 > li a{padding: 0 0 8px 11px;}