@charset "utf-8";

/* layer popup */
.pop-header {position:relative; display:block; height:50px; padding-left:27px; background:#0082dd; font-size:20px; color:#fffefe; text-align:left; font-family:'notoR'; font-weight:700; line-height:46px;}
.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-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:#527da9;}
.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:#bbc6d6;}
.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;}

/* 헤더없는 독립페이지 */
.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;}
.in-sec-stick .white-box {border-top:0;}
.inqury-box {padding:30px 0; text-align:center; border:1px solid #dcdcdc; background-color:#fafafa;}
.in-sec.first .white-box {margin-top:0;}
.top-contents-box + .white-box {border-top:0; margin-top:0;} 
.in-sec-stick > .white-box:first-child {margin-top:0;}

.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;}

/* 수표 이미지 박스 */
.cashiers-check {padding:42px 0 36px; text-align:center;}
.cashiers-check .img-wrap {width:544px; height:250px; margin:0 auto;}
.cashiers-check .img-wrap img {vertical-align:top;}
.regular_box {border:1px solid #c2d4ea; border-radius:2px; background-color:#e9f3ff;}
.regular_box2 {border:1px solid #dcdcdc; border-radius:2px; background-color:#fafafa;}
.tbl-wrap + .regular_box.result-data {margin-top:35px;}

/* 해시태그 박스 */
.hashtag-area {overflow:hidden; margin:-10px 0 0 -10px; padding:20px; border-bottom:1px solid #dcdcdc;}
.hashtag-area .hashtag {float:left; height:45px; margin:10px 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;}

/* 완료처리 고객센타용 */
.white-box.result-data-cs {display:table; width:100%; border:none; background-color:#fff; text-align:center; box-sizing:border-box;}
.white-box.result-data-cs .in-box {display:table-cell; padding:17px 0 22px; border:1px solid #c2d4ea; border-radius:2px; background-color:#e9f3ff; vertical-align:middle;}
.white-box.result-data-cs .info {font-family:'notoR'; font-weight:400; font-size:20px; color:#333;}
.white-box.result-data-cs .info em,
.white-box.result-data-cs .info .num-text {color:#004c98;}
.white-box.result-data-cs .sub-info {margin:23px 0 6px; line-height:1.8}
.white-box.result-data-cs .sub-info em {font-weight:bold; color:#333;}
.in-sec.first + .in-sec-stick > .white-box.white-box {margin-top:-1px;}

/* 약관동의 */
.agree-box.type2 .title .btn-area.type2 + .btn-area {top:51%;}

/* 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;}

/* 노티 박스 (notice box) */
.notice-box {overflow:hidden; 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}
.agree-box + .tbl-wrap {margin-top:-1px;}
.tbl-wrap .tbl-focus.bdT0 {border-top:0;}
.tbl-list.type02 tbody .bg {padding-left:15px;}
.tbl-list.type04 .col-blue {color:#5d84e7;}
.tbl-focus th.split-cell {line-height:20px;}
.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;}

.tbl-foot-result {padding:17px 0 18px; text-align:center; border-bottom:1px solid #d5dfea; background-color:#f5f5f5;}
.tbl-foot-result .total {margin:0 25px; font-size:15px; color:#5d84e7; font-weight:bold;}

/* 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 .btns {float:left;}
.page-headnote .btns.sm + p {float:right; margin-top:20px;}

/* hashtag-box */
.hashtag-box {border-radius:2px; border:1px solid #dcdcdc; background:#fff;}
.hashtag-box .title-area {padding:15px; border-bottom:1px solid #dcdcdc;}
.hashtag-box .title-area .title {position:relative; padding-left:32px; font-size:16px; line-height:20px;}
.hashtag-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;}
.hashtag-box {overflow:hidden; border:1px solid #dcdcdc; border-radius:2px;}
.hashtag-box .hashtag-area {overflow:hidden; margin:-10px 0 0 -10px; padding:20px; border-bottom:1px solid #dcdcdc;}
.hashtag-box .hashtag-area .hashtag {float:left; height:45px; margin:10px 0 0 10px; padding:0 15px; border:1px solid #dcdcdc; box-sizing:border-box; border-radius:2px; color:#575757; line-height:43px;}
.hashtag-box .hashtag-area .hashtag.on {border-color:#0082dd; color:#fff; background:#0082dd;}
.hashtag-box .list {padding:28px 20px 25px;}
.hashtag-box .list .item {margin-top:18px; padding-left:13px; color:#575757; font-size:13px; line-height:20px;}
.hashtag-box .list .item:first-child {margin-top:0;}
.hashtag-box .list .item .title {position:relative; margin-left:-14px; padding-left:15px; color:#333; font-size:16px; line-height:22px;}
.hashtag-box .list .item .title:before {content:''; position:absolute; left:0; top:9px; width:4px; height:4px; background-color:#6b6b6b;}
.hashtag-box .list .item ul {margin:8px 0; font-size:14px;}
.hashtag-box .list .item ul li {margin-top:4px; text-indent:-15px; margin-left:15px;}
.hashtag-box .list .item ul li:first-child {margin-top:0;}

.hashtag-box .list .item ul li.in-list {text-indent:0; margin-left:0;}
.hashtag-box .list li .sub-list {margin:8px 0 8px 0;}
.hashtag-box .list .sub-list .item {position:relative; margin-left:0; padding-left:20px; text-indent:0;}
.hashtag-box .list .sub-list .item .order {position:absolute; left:0; top:0;}
.hashtag-box .list .sub-lists li {margin-left:0 !important; text-indent:0 !important;}