@charset "utf-8";

@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 700;
    src: url('font/NanumGothic-Bold.eot');
    src: url('font/NanumGothic-Bold.eot?#iefix') format('embedded-opentype'),url('font/NanumGothic-Bold.woff') format('woff'),url('font/NanumGothic-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Nanum Gothic';
    font-style: normal;
    font-weight: 400;
    src: url(font/NanumGothic-Regular.eot);
    src: url(font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),url(font/NanumGothic-Regular.woff) format('woff'),url(font/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'NanumSquare';
  font-style: normal;
  font-weight: 400;
  src: url(font/NanumSquareR.eot);
  src: local('Nanum Square Regular'),
       local('NanumSquareR'),
       url(font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
       url(font/NanumSquareR.woff2) format('woff2'),
       url(font/NanumSquareR.woff) format('woff'),
       url(font/NanumSquareR.ttf) format('truetype');
}

@font-face {
  font-family: 'NanumSquare';
  font-style: normal;
  font-weight: 700;
  src: url(font/NanumSquareB.eot);
  src: local('Nanum Square Bold'),
       local('NanumSquareB'),
       url(font/NanumSquareB.eot?#iefix) format('embedded-opentype'),
       url(font/NanumSquareB.woff2) format('woff2'),
       url(font/NanumSquareB.woff) format('woff'),
       url(font/NanumSquareB.ttf) format('truetype');
}
.loanWrap *:focus{outline: 2px dotted #b10e59;}
body  .loanWrap{font-family:'Nanum Gothic','나눔고딕','돋움';font-weight: 400;font-size: 16px;padding-bottom: 30px;color: #3c3c3c;}

 .loanWrap *{padding: 0;margin: 0;list-style: none;}
 .loanWrap input:focus {

  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  padding: 0px;
  margin: 0px;
  border: 1px solid rgba(81, 203, 238, 1);
  }

.skip{position: absolute;top: 0;left: 0;width:100%}
.skip a{position:absolute; display:block; width:100%; left:0; text-align:center; top:-50px;left:0; z-index:999;}
.skip a:hover,
.skip a:focus,
.skip a:active{position: absolute; top: 0;left:0; padding: 5px 0; font-weight:bold; color:#fff; background:#36F;width:100%;}

.loanWrap em{font-style: normal;}
.loanTop .head,
.loanMenu,
.loanCont{margin: 0 auto;width: 1000px;overflow: hidden;}

.loanTop{height: 415px;background:#98d6d3 url(../../common/img/loan/loan.gif) center 0 no-repeat;font-family: 'NanumSquare';}
.loanTop .head{height: 360px;}

.loanTop .head h1{font-weight: bold;font-size: 75px;text-shadow: 1px 1px 1px rgba(255,255,255,0.75);color: #2156af;padding-left: 15px;line-height: 100%;padding-top: 60px;}
.loanTop .head h1 em{color: #73149f;text-shadow: 1px 1px 1px rgba(0,0,0,0.5);}
.loanTop .head h1 span{color: #2e3249;}
.loanTop .head h1 em,
.loanTop .head h1 span{display: block;letter-spacing: 18px;padding-top: 15px;}



.loanMenu a{height: 55px;line-height: 55px;text-align: center;color: #e8e8e8;font-size: 22px;font-weight: normal;background: #383e5a;display: block;float: left;width: 500px;}
.loanMenu a:hover,
.loanMenu a.on{color: #FFF;font-weight: 600;background: #3f67aa;}
/* .loanMenu a.first{width: 499px;margin-left: 0;} */
.loanMenu a:focus{outline-offset: -3px;outline-color: #0c0;}

.loanCont h2{padding-top: 50px;font-family: 'NanumSquare';font-size: 27px;color: #3f67aa;padding-bottom: 16px;line-height: 100%;}
.loanCont .lineBox{border: 1px solid #CCC;background: #fbfbfb;padding: 27px;padding-right: 25px;}
.loanCont .lineBox ul{}
.loanCont .lineBox li{line-height: 220%;position: relative;padding-left: 20px;}
.loanCont .lineBox li em{color: #3f67aa;position: absolute;top: 7px;left: 0;font-family: 'NanumSquare';font-weight: 600;line-height: normal;font-size: 18px;display: block;}
.loanCont .lineBox .lineBox{background-color: #fff;color: #d00;}
.loanCont .blueBox{text-align: center;margin-top: 10px;}
.loanCont .blueBox a{display: block;border: 1px solid #8fb4d9;background: #f7fdff;padding: 27px;}
.loanCont .blueBox a:focus{outline:2px #cc0000 dashed;outline-offset:-2px}
.loanCont .blueBox input{vertical-align: middle;display: inline-block;margin:0 5px 0 0;}


.loanCont .blueBox .later{text-align: center;color: #006eff;font-size: 20px;font-weight: bold;}

.loanCont .formBox{background:#FFF; padding: 0;}
.loanCont .formBox label{padding:0;margin:0;width:auto}



.loanCont .formBox ul{border-top: solid 1px #CCC;}
.loanCont .formBox li{overflow: hidden;height: auto;min-height: 25px;border-bottom: solid 1px #CCC;position: relative;padding-left: 236px;padding-top: 5px;padding-bottom: 5px;line-height: 30px;}
.loanCont .formBox li em{padding-left: 22px;position: absolute;top: 0;left: 0;line-height: 39px;}
.loanCont .formBox li input.inpBox{height: 28px;border: 1px solid #CCC;padding: 0 5px ;width: 214px;background: 0;margin-bottom: 0;}
.loanCont .formBox li input.fileBox{height: 26px;border: 0;padding: 0 0px ;width: 320px;background: 0;vertical-align: top;margin-top:3px;}

.loanCont .alertBox{padding:20px 0 20px 234px ;line-height: 170%;background: #fffbfb url(../../common/img/loan/icon_alert.png)  120px center no-repeat;border-bottom: solid 1px #CCC;}
.loanCont .alertBox p{}
.loanCont .alert{color: #c12a2a;}


.loanCont a.btnDown{display: inline-block;background: #3f67aa;width: 224px;text-align: center;color: #FFF;border: 1px solid #355892;line-height: 28px;}
.loanCont a.btnDown:hover{background: #355892;}
.loanCont a.btnApply{display: block;background: #c75c5c;width: 448px;text-align: center;color: #FFF;height: 56px;line-height: 56px;border: 1px solid #ab4141;font-weight: 600;margin: 40px auto;font-size: 19px;}

.loanCont input.btnApply{display: block;background: #c75c5c url(../../common/img/loan/icon_pen.png)  80px center no-repeat;width: 448px;text-align: center;color: #FFF;height: 56px;line-height: 56px;border: 1px solid #ab4141;font-weight: 600;margin: 40px auto;font-size: 19px;font-family:'Nanum Gothic';text-indent: 29px;cursor: pointer;}
.loanCont input.btnApply:hover{ border:2px solid #000; }

.loanCont input.btnUpdate{display: block;background: #008257 url(../../common/img/loan/icon_check.png)  80px center no-repeat;width: 400px;text-align: center;color: #FFF;height: 56px;line-height: 56px;border: 1px solid #009966;font-weight: 600;margin: 40px auto;font-size: 19px;font-family:'Nanum Gothic';/* text-indent: 29px; */cursor: pointer;}
.loanCont input.btnUpdate:hover{ border:2px solid #000; }

.loanCont input.btnDelete{display: block;background: #c75c5c url(../../common/img/loan/icon_cancel.png)  80px center no-repeat;width: 400px;text-align: center;color: #FFF;height: 56px;line-height: 56px;border: 1px solid #ab4141;font-weight: 600;margin: 40px auto;font-size: 19px;font-family:'Nanum Gothic'/* ;text-indent: 29px */;cursor: pointer;}
.loanCont input.btnDelete:hover{ border:2px solid #000; }


.loanCont a.btnApply:hover{background: #ab4141;}

.loanCont i.down{width: 20px;height: 24px;display: inline-block;background: url(../../common/img/loan/icon_down.png)  center 0 no-repeat;vertical-align: middle;margin-right: 5px;}

.loanCont i.pencil{width: 24px;height: 21px;display: inline-block;background: url(../../common/img/loan/icon_pen.png)  center no-repeat; vertical-align: middle;margin-right: 10px}

.loanCont .sp30{display: inline-block;width: 30px;height: 20px;vertical-align: middle;}

.tableclass { width:100%;font-size:15pt;border-top:1px solid #ccc;border-bottom:1px solid #ccc;}
.tableclass th { padding:12px;background:#f0fff0;border-bottom:1px solid #ccc; }
.tableclass td { padding:12px;text-align:center;border-bottom:1px dotted #ccc; }

.imgclass { font-size:10pt;width:200px; }

.loanCont .inputBtn{border: 1px solid #ccc;background: none;margin: 0;height: 50px;background-color: #f4f3f4;padding: 0;}
.loanCont .inputBtn a{height: 50px;background: none;margin: 0;font-size: 16px;letter-spacing: -1px;line-height: 50px;padding: 0 25px !important;text-indent: 0;text-align: center;position: static;left: auto;font-family: 'NanumSquare'!important;}

.loanCont .article_total{padding: 15px 0;font-size: 12px;margin-top: 20px;}
.loanCont .loanChk{border:0;background: #477cad;padding:  0;text-align: center;margin-top: 20px;overflow: hidden;position: relative;line-height: 73px;}
.loanCont .loanChk p{text-align: left;font-size: 16px;padding-left: 27px;color: #FFF;}
.loanCont .loanChk a{position: absolute;top: 0;bottom: 0;right: 0;width: auto;padding: 0 50px;text-align: center;font-size: 19px;font-weight: bold;background-color: #FFF;display:block;letter-spacing: -1px;color: #3f67aa;margin: 4px;border-radius:8px ;line-height: 65px;}
/*
.loanCont .loanChk{border: 1px solid #8fb4d9;background: #faf8e9;padding:  0;text-align: center;margin-top: 20px;overflow: hidden;position: relative;line-height: 73px;}

.loanCont .loanChk p{text-align: left;font-size: 16px;padding-left: 27px;color: #3f67aa;}
.loanCont .loanChk a{position: absolute;top: 0;bottom: 0;right: 0;width: auto;padding: 0 50px;text-align: center;font-size: 19px;font-weight: bold;background-color: #6899c9;display:block;letter-spacing: -1px;color: #FFF;}
*/
.li2wrap{padding:5px 0 5px 15px;}
p.li2 {padding-left:12px; position:relative; margin-bottom: 10px;line-height: 17pt;padding-right: 30px;}
p.li2:before {content:''; background: #999; width:4px; height:1px; display:block; position:absolute; top:9px; left:4px;}

.loanTop .head, .loanMenu, .loanCont{width: 90%;max-width: 1000px;}
.loanMenu a{width: 50%;}
.loanTop .head h1{color: #0546b4;}
.loanCont .blueBox .later{color: #0967e3;}
@media (max-width: 500px) {
.loanTop{height: 280px;background-size:cover;}
.loanTop .head{height: 250px;}
.loanTop .head h1{padding-left: 0;font-size: 55px;padding-top: 40px;line-height: .8;}
.loanCont h2 span{display: block;}
}
@media (max-width: 1024px) {
.loanCont .loanChk{line-height: 1.1;padding: 25px 0 ;}
.loanCont .loanChk p{text-align: center;padding-left: 0;padding-bottom: 15px;}
.loanCont .loanChk p span{display: block;}
.loanCont .loanChk a{position: static;margin: 0 auto;display: inline-block;}