@charset "utf-8";

/* layer popup */
.pop-header {position:relative; display:block; padding:30px 27px; text-align:left; border:3px solid #0082dd; border-bottom:0;}
.pop-header .pop-tit {font-size:20px; font-family:'notoR'; font-weight:600;} 
.pop-header .btn-close button {position:absolute; top:5px; right:6px; display:block; height:40px; width:40px; box-sizing:border-box; background:transparent;}
.pop-header .btn-close button:before {content:''; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; background:url(https://imgs.kjbank.com/resource//img/common/ico/ico_sprite.png) no-repeat -269px -15px;}
.pop-content {display:block; height:auto; background-color:#fff; border:3px solid #0082dd; border-top:0; box-sizing:border-box;}
.pop-content .btns-wrap {margin:30px 0 0;}
.pop-content .pop-area .tbl-wrap .btns-wrap {margin:30px 0 6px;}
.pop-header .in-sec,
.pop-content .in-sec {width:auto;}

/* popup */
.layer-popup .pop-content {border:none;}

/* window popup */
body {overflow:auto !important;}
#wrap {min-width:1000px;}
#wrap #contents {min-height:auto;}

.wpop-header {position:relative; z-index:2; display:block; height:118px; padding:0 30px; background:#3b7ec2 url(https://imgs.kjbank.com/resource//img/common/popup/wpop_bg_header.png) no-repeat 0 0;}
.wpop-header:after {content:''; clear:both; display:block;}

.wpop-header .btn-close {display:none;}
.wpop-header .btn-close button {position:absolute; top:5px; right:6px; display:block; height:40px; width:40px; box-sizing:border-box; background:transparent;}
.wpop-header .btn-close button:before {content:''; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; background:url(https://imgs.kjbank.com/resource//img/common/ico/ico_sprite.png) no-repeat -269px -15px;}

.wpop-header .wpop-tit {position:absolute; left:30px; top:20px; line-height:1; font-size:18px; font-family:'notoR'; font-weight:normal;}
.wpop-header .wpop-tit .logo {float:left; margin-right:14px; vertical-align:top;}
.wpop-header .wpop-tit strong {float:left; margin-top:5px; color:#fff}
.wpop-header .wpop-tit:after {content:''; clear:both; display:block;}

.wpop-header .wpop-tnb {position:absolute; right:30px; top:22px;}
.wpop-header .wpop-tnb ul li {position:relative; float:left; line-height:1; vertical-align:top; white-space:nowrap;}
.wpop-header .wpop-tnb ul li:before {content:''; position:absolute; left:0; top:3px; display:inline-block; width:1px; height:12px; background-color:#699acb;}
.wpop-header .wpop-tnb ul li:first-child:before{display:none;}
.wpop-header .wpop-tnb ul li a {display:inline-block; padding:0 10px; color:#b9cbe2;}
.wpop-header .wpop-tnb ul li a:hover {text-decoration:none;}
.wpop-header .wpop-tnb ul li.current a {color:#fff; font-weight:bold;}

.wpop-header .wpop-gnb {position:absolute; left:0; top:62px; width:100%;}
.wpop-header .wpop-gnb:before {content:''; display:inline-block; position:absolute; left:0; top:0; z-index:1; right:0; height:55px; background-color:#15508c;}
.wpop-header .wpop-gnb > ul {position:relative; z-index:2; padding:0 0 0 20px;}
.wpop-header .wpop-gnb > ul:after {content:''; clear:both; display:block;}
.wpop-header .wpop-gnb > ul > li {display:inline-block; text-align:center; padding:0 12px;}
.wpop-header .wpop-gnb > ul > li > a {position:relative; display:inline-block; padding:0 10px; line-height:55px; font-size:15px; color:#fff;}
.wpop-header .wpop-gnb > ul > li > a:hover {text-decoration:none;}
.wpop-header .wpop-gnb > ul > li.current > a,
.wpop-header .wpop-gnb > ul > li.active > a {font-weight:700;}
.wpop-header .wpop-gnb > ul > li.current > a:after,
.wpop-header .wpop-gnb > ul > li.active > a:after {content:''; position:absolute; left:0; bottom:-1px; width:100%; height:5px; background-color:#fff;}

.wpop-header .wpop-snb {position:absolute; top:56px; left:0; right:20px; min-height:39px; background-color:#fff;}
.wpop-header .wpop-snb > ul {position:absolute; z-index:2; background-color:#fff;}
/* .wpop-header .wpop-snb > ul:before {content:''; position:absolute; left:50px; top:0; bottom:0; z-index:2; width:2px; background-color:#fff;} */
.wpop-header .wpop-snb > ul:after {content:''; clear:both; display:block;}
.wpop-header .wpop-snb > ul > li {position:relative; float:left; padding:7px 0;}
.wpop-header .wpop-snb > ul > li:before {content:''; position:absolute; left:0; top:50%; margin-top:-6px; display:inline-block; width:1px; height:12px; background-color:#cfd8e2;}
.wpop-header .wpop-snb > ul > li:first-child:before{display:none;}
.wpop-header .wpop-snb > ul > li > a {display:block; padding:2px 14px;}
.wpop-header .wpop-snb > ul > li > a:hover {text-decoration:none;}
.wpop-header .wpop-snb > ul > li > a:hover,
.wpop-header .wpop-snb > ul > li > a:focus,
.wpop-header .wpop-snb > ul > li.current > a {color:#0082dd; font-weight:700;}


.wpop-content {display:block; overflow:auto; height:460px; padding:0 30px 0 30px; background-color:#fff; box-sizing:border-box;} /* 높이 고정 */
.wpop-content {position:absolute; z-index:1; left:0; right:0; top:120px; bottom:0; min-width:940px; height:auto; padding-top:45px;}/* 높이 가변 */
.wpop-content:after {display:block; height:15px; content:'';}
.wpop-content .btns-wrap {margin:30px 0 35px 0;}
.wpop-content .wpop-area .tbl-wrap .btns-wrap {margin:30px 0 6px;}
.wpop-header .in-sec,
.wpop-content .in-sec {width:auto;}
.wpop-content .in-sec.first {margin-bottom:0;}
.wpop-content .in-sec.first + .in-sec {margin-top:20px;}
.wpop-content .title-wrap {padding-bottom:10px; border-bottom:1px solid #dcdcdc;}
.wpop-content .title-wrap .title {font-size:20px; line-height:26px; height:30px;}

/* 헤더없는 독립페이지 */
.wpop-content.noheader {position:static; padding:20px 30px;}

/* window popup state*/
.wpop-gnb > ul > li .wpop-snb,
.wpop-gnb > ul > li.current.hidden .wpop-snb {display:none;} 
.wpop-gnb > ul > li.current .wpop-snb, 
.wpop-gnb > ul > li.active .wpop-snb {display:block;}

/* title-wrap */
.title-wrap:after {content:''; display:block; clear:both;}
.title-wrap .title {float:left; display:inline-block; font-size:22px; font-family:'notoR'; font-weight:400;}
.title-wrap .tit-btns {float:right; text-align:right;}

/* form */
.tf-wrap,.inp-wrap {display:inline-block; vertical-align:middle;}
.tf-wrap + .inp-wrap {margin-left:20px;}
.label-text + .ele-select {margin-left:10px;}
.tbl-date-picker .date .hyphen {height:auto;}
.tbl-date-picker .terms {margin-top:10px;}

/* box type */
.white-box {border-top:1px solid #e5e5e5; border-bottom:1px solid #e5e5e5; margin-top:30px;}
.inqury-box {padding:30px 0; text-align:center; border:1px solid #dcdcdc; background-color:#fafafa;}
.top-contents-box + .white-box {border-top:0; margin-top:0;} 
.top-contents-box.otp-sn {background-image:url(https://imgs.kjbank.com/resource//img/cmm/img-top-otp.png); background-position:30px center; background-repeat:no-repeat;}

.text-box02 {padding:13px 25px 17px; border-radius:2px; border:1px solid #dcdcdc; margin:10px 0;}
.text-box02 .type-arw,
.text-box02 .cs-lists {margin:0; padding:0;}
.text-box02 .cs-lists > li:first-child {margin-top:0;}
.in-sec-stick .text-box02, .in-sec-stick .text-box {margin-top:0; border-top:0;}

/* btn */
.btn-box {padding:0 10px 2px; box-sizing:border-box; border-radius:3px; border:1px solid #b5b5b5; font-size:13px; line-height:20px;}
.btn-box:link,.btn-box:visited {color:#575757;text-decoration:none;}

/* list */
.lists-tit {margin-bottom:5px;}
.c-lists > li {margin-top:20px;}
.c-lists > li:first-child {margin-top:0;}
.c-lists .cs-lists li,
.c-lists p.cs-lists {font-size:14px;}
.c-lists .txt-rig {float:right; color:#575757; font-size:14px;}
.c-lists + .tbl-wrap {margin-top:10px;}
.page-headnote + .c-lists {margin-top:0;}
.type-bsc {margin-top:7px; color:#575757;}
.type-bsc > li {font-size:14px; padding-left:0;}
.type-bsc > li:before,
.lists li .type-bsc > li:before {display:none;}
p.type-bsc {font-size:14px;}

/* 노티 박스 (notice box) */
.notice-box {border-radius:2px; border:1px solid #dcdcdc; border-bottom:0; background:#fff;}
.notice-box .title-area {position:relative; padding:15px; border-bottom:1px solid #dcdcdc;}
.notice-box .title-area .title {position:relative; display:inline-block; padding-left:32px; font-size:16px; line-height:20px;}
.notice-box .title-area .title:before {content:''; position:absolute; left:0; top:50%; margin-top:-10px; width:20px; height:20px; background:url(https://imgs.kjbank.com/resource//img/common/ico/ico_sprite.png) no-repeat -196px 0;}
.notice-box .title-area .notice-aco {position:absolute; top:0; right:15px; height:50px; padding-right:19px; font-size:13px; color:#0082dd; line-height:50px;}
.notice-box .title-area .notice-aco:before {content:''; position:absolute; top:50%; right:0; width:12px; height:8px; margin-top:-3px; background:url(https://imgs.kjbank.com/resource//img/common/ico/ico_sprite.png) no-repeat -63px -84px;}
.notice-box .title-area .notice-aco.on:before {background-position:-77px -84px;}
.notice-box .text-area {display:block; border-bottom:1px solid #dcdcdc;}
.notice-box .text-area > .lists {padding:15px 20px 18px;}

/* table */
.tbl-wrap + .tbl-wrap {margin-top:20px}
.tbl-focus th.split-cell {line-height:20px;}
.tbl-wrap .tbl-text.type02 {position:relative; display:inline-block; padding-left:15px; margin-bottom:15px; line-height:1.1;}
.tbl-wrap .tbl-text.type02:before {content:''; position:absolute; top:5px; left:0; background:#b5b5b5; width:4px; height:4px;}
.tbl-wrap .txt-wrap:after {display:block; clear:both; content:'';}
.tbl-wrap .tbl-headnote:after {content:''; display:block; clear:both;}
.tbl-wrap .tbl-headnote .txt-left {float:left; margin:0 0 5px 0;}
.tbl-wrap .tbl-headnote .txt-right {float:right; margin:0 0 5px 0;}
.tbl-wrap .tbl-headnote .txt-explan {text-align:left; font-size:15px; margin:13px 0;}
.tbl-wrap .tbl-headnote p.c-lists {float:left; line-height:1.3; text-align:left;}
.tbl-wrap .tbl-headnote p.c-lists:before {top:8px;}
.tbl-wrap .tbl-headnote p.c-lists + p {float:right; margin-top:5px;}
.tbl-wrap.type-line {border-top:0px solid #dcdcdc;}
.tbl-wrap.type-line .txt-explan {margin-bottom:0;}
.tbl-wrap.type-line .tbl-focus {border-top:0;}
.tbl-wrap.type-line .txt-explan + .tbl-focus {padding-top:5px;}

/* page headnote */
.page-headnote {font-size:12px; text-align:right; margin-bottom:4px; line-height:1.3}
.page-headnote.type-txt {margin-bottom:10px;}
.page-headnote:after {content:''; clear:both; display:block;}
.page-headnote .txt-explan {text-align:left; font-size:15px; margin:13px 0;}
.page-headnote .btns {float:left;}
.page-headnote .btns.sm + p {float:right; margin-top:20px;}

/* 전자금융이용자10계명 */
.lists-commandment {margin-top:35px;}
.lists-commandment > ul > li {display:table; width:100%; margin-top:30px; padding:22px 20px 25px 103px; border:1px solid #e5e5e5; border-radius:3px; background-repeat:no-repeat; background-position:0 center; box-sizing:border-box;}
.lists-commandment > ul > li:first-child {margin-top:0;}
.lists-commandment > ul > li .lists-in {display:table-cell; vertical-align:top;}
.lists-commandment > ul > li .tit {position:relative; font-size:18px; line-height:24px; color:#4475a3;}
.lists-commandment > ul > li .tit strong {display:block; font-weight:normal;}
.lists-commandment > ul > li .tit .num {position:absolute; top:1px; left:-55px; font-size:24px; line-height:24px; color:#4076ad; font-weight:bold;}
.lists-commandment > ul > li .tit:before {content:''; position:absolute; top:7px; left:-14px; width:1px; height:16px; background-color:#94b8d9;}
.lists-commandment > ul > li .txt {margin-top:6px; line-height:24px; color:#575757;}
.lists-commandment > ul > li .txt + .txt {margin-top:0;}

/* hashtag btn */
.hashtag-area {overflow:hidden; padding:10px 0;}
.hashtag-area .hashtag {float:left; height:45px; margin:0 0 0 10px; padding:0 15px; border:1px solid #dcdcdc; box-sizing:border-box; border-radius:2px; background-color:#fff; color:#575757; line-height:43px;}
.hashtag-area .hashtag.on {border-color:#0082dd; color:#fff; background:#0082dd;}

/* hashtag tab */
.hashtag-tab {overflow:hidden; padding:10px 0;}
.hashtag-tab li {float:left;}
.hashtag-tab li .hashtag {display:inline-block; height:45px; margin:0 10px 0 0; padding:0 15px; border:1px solid #dcdcdc; box-sizing:border-box; border-radius:2px; color:#575757; line-height:43px;}
.hashtag-tab li.active .hashtag {border-color:#0082dd; color:#fff; background:#0082dd;}

/* 환전 */
.exchange-wrap .title-wrap {border-bottom:0;}
.exchange-wrap .in-sec:first-child + .in-sec {margin-top:0;}

/* 절차안내 */
.agree-box .title > strong {font-weight:normal; padding-left:10px;}

/* 금융도우미 약관 */
.pop-provi-box02 .inner-box {padding: 20px; border: 1px solid #dcdcdc; height: 355px; overflow-y: auto;}

	
@page {
	size:A4;
	margin:34px;
}
@media print {
	html, body {width:100%; min-width:1000px;}
	
	/* window popup header */
	header, .wpop-header,
	.tit-btns .btn-print {display:none;}
	
	.wpop-content {top:0 !important; /* min-width:94%; */}	
}	
	
