@charset "utf-8";
 
/* tit-area */
.tit-area h3 span {display: inline-block;font-weight: normal;font-size: 20px;letter-spacing:-2px;}
.tit-area .add {color:#ea0061;display:block;font-size:13px;padding:5px 0 5px 10px;letter-spacing:-1px;font-weight:bold}

/* tbl작업시 굵은 색상 */
table tbody .add {color:#ea0061;display:block;font-size:13px}

/* 운용수수료 table */
.prd-tbl01 table thead th {text-align:center;font-size:13px;padding:5px 0}
.prd-tbl01 table thead th span{display:block}
.prd-tbl01 table tbody td {font-size:12px;text-align:right;padding-right:8px;*padding-right:5px !important;*padding-left:0}
.prd-tbl01 table tfoot td {font-size:12px;font-weight:bold;text-align:right;padding:15px 8px 15px 0;*padding:15px 8px 15px 0 !important;}
.prd-tbl01 table tfoot td.ct, .prd-tbl01 table tbody td.ct{text-align:center;padding:0;*padding:0 !important}
.prd-tbl01 table tfoot td.ct {font-size:13px}
.prd-tbl01 table tfoot td.ct .add{color:#ea0061;display:block;font-size:14px}

/* 오른쪽 정렬 */
table td .lt{text-align:left;padding-left:5px}

/* btn -오른쪽 정렬*/
.btn-right {text-align:right;margin-bottom:50px;}

/* 테이블 아래 설명 */
ul.scs-step-desc{margin:11px 0}
ul.scs-step-desc li{background: url('../img/common/list-bu01.gif') no-repeat 0px 10px;padding-left:8px;font-size:12px;text-align:left;color:#666;}
ul.scs-step-desc span{display:block}


/* common 추가파일*/
.mg0{margin:0px !important;}
.pt5{padding-top:5px !important;}
.pt15 {padding-top:15px !important;}
.ht200{height:200px!important;;height:202px\9 !important;;*height:202px !important;}
.cont-visual {margin:15px 0 0 -15px !important;}
.lp-1{letter-spacing:-1px !important;}
.lp-2{letter-spacing:-2px !important;}
.lp-01{letter-spacing:-0.1px !important;} /* 2016-10-11 추가  */
div ul li.bg-none, ul li.bg-none {background:none !important}

li.pl{padding-left:18px;text-indent:-16px;} /* 2016-10-11 추가  */
.dt{font-weight:bold !important} /* 2016-10-11 추가  */
.tbl-type4.black table th{color:#333} /* 2016-10-11 추가  */

.tbl-type1 table th{text-align:Center;}
.list-type2 li span{color:#666;font-size:12px;display:block;}
.tbl-type3 td.pr30 {text-align: left;padding: 8px 0 10px 30px}
.tbl-type3 table tbody th{padding:7px 3px 7px 3px;background:#fafafa;font-size:14px; border-bottom:1px solid #dedede;border-right:1px solid #dedede;color:#454545;text-align: center;border-top:none}/*20150407_추가*/
.tbl-type3 table tbody td span{font-size:12px;color:#666}
.tbl-ct table tbody th, .tbl-ct table thead th {text-align:center;padding-left:0}

.tbl-type3 table tbody th.last {border-bottom:none}/*20180413_추가*/

/*테이블 안에 리스트 요소*/
table tbody td ul.list li{float:left;width:176px;height:21px;line-height:22px;text-align:left;}

table tbody td div.p-list,table tbody td div.p-list2{float:left;}

table tbody td div.p-list li{float:left;width:170px;background:url('../img/prd/bg-p-list.gif') no-repeat 95% 50%}
table tbody td div.p-list li.end{width:340px;background:none}
table tbody td div.p-list2 li{float:left;width:170px;background:url('../img/prd/bg-p-list2.gif') no-repeat 95% 50%}
table tbody td div.p-list2 li.end{width:340px;background:none}

/* 리스트 타입 4-5*/
.list-style4 li {padding-left:10px;color: #666;font-size: 13px !important;line-height: 22px;letter-spacing: -1px;background:none}
.list-style4 li ul li{background: url(/img/common/list-bu01.gif) no-repeat 0 10px;}
.list-style5 li {color: #666;font-size: 13px !important;line-height: 20px;padding-left: 20px;text-indent: -18px;letter-spacing: -1px;}

/* top-txt */
.top-txt p.desc {padding-left:15px;}
.top-txt h4{float:left;padding-left: 10px;font-family:hanaUL;font-size: 16px;}
.top-txt .add{color:#ea0061;}

/* 테이블 작업시 가운데 정렬 */
table tbody .ct {text-align:center !important;;padding:0}
table thead .ct {text-align:center;}
table thead .txt-l, table tbody .txt-l{text-align:left !important;}

/* 테이블 작업시 가운데 정렬 font-size:12로 */
table tbody .font-12{font-size:12px !important;color:#666 !important;}
table tbody tr td span.font-12 {display:block;}

/* 특정 color주기*/
table tbody td strong.gold{display:block;color:#937036;font-size:12px;}
table tbody td strong.gold13{color:#937036;}
ul li span.gold{color:#937036;display:inline} 
.gold {color:#937036}
.font-13 {font-size:13px !important; color:#666 !important;;}
.gray-a2{color:#666}
.col-rd {color:#ea0061 !important;}
.col-gr {color:#0b8786 !important;}


/* 테이블 작업시 특정 td에 padding-left:20; padding-left:10주기*/
div table th.pr40, div table td.pr40{padding:10px 5px 10px 40px;text-align:left}
div table th.pr30, div table td.pr30{padding:10px 5px 10px 30px;text-align:left}
div table th.pr20, div table td.pr20{padding:10px 5px 10px 20px;text-align:left}
div table th.pr10, div table td.pr10{padding:10px 5px 10px 10px;text-align:left}

/* 테이블col이 3개 이상일시 보더라이트 주기*/
.prd-tbl02 table thead tr th{border-right:1px solid #e5e5e5}
.prd-tbl02 table tbody tr td{border-right:1px solid #e5e5e5}
.prd-tbl02 table tbody tr td ul.list-type1 li{font-size:12px !important;}

/*테이블안에 특정list font12로 맞추기 */
.tbl-bd-lt table tbody tr td ul.list-type1 li{font-size:12px !important;}


/*테이블 안에 배경이 없는 list*/
table tbody tr td ul.bg-no li {font-size:13px}
table tbody tr td ul.bg-no li span {padding:0 26px}
table tbody tr td ul.bg-no li span.nbsp {padding:0 61px}

/* list-type1에 리스트에 마진 -10*/
ul.list-type1 li ul.md-10 li {margin-left: -10px;}

/* 테이블 밑에 오는 회색박스 */
.box-gray{background:#fcfdfd;border-bottom: 1px solid #dedede;padding:10px;margin:0}
.box-gray ul li{padding-left:15px;font-size:13px;background: url(../img/common/list-bu01.gif) no-repeat 5px 10px;}


/* 테이블 밑에 오는 회색박스 2 */
.gray-bx2 {background:#fafbfc;border:1px solid #e5e5e5;padding:20px 10px;}

/* box text-align:Center; */
.ct-box {text-align:center;}


/* 퇴직연금 - 단계별과제구조 */
.prd-list{border-top:2px solid #3eb8b9;background:url(../img/prd/bg-prg-list.gif) no-repeat  150px 100%}
.prd-list li {width:100%;padding:10px 0;border-bottom:1px solid #e5e5e5}
.prd-list li strong{float:left;width:185px;padding-left:15px;font-size:20px;color:#008485}
.prd-list li strong span{font-size:14px;color:#454545;display:block;}
.prd-list li div{float:right;width:485px;padding-left:35px}
.prd-list li div strong{float:none;padding:0}
.prd-list li div ul li{padding:0 0 0 10px;border-bottom:none}

ul.prd-step01 li{float:left;width:;188px;}

/* 보험상품 step02 */
ul.prd-step02{border:1px solid #dddddd;background:#fafbfc}
ul.prd-step02 li{float:left;width:240px;min-height:120px;padding-left:13px;font-size:13px;background:url('../img/prd/bg-prd-step2.gif') no-repeat 100% 100%}
ul.prd-step02 li.last {width:201px;padding-left:10px;background:none}
ul.prd-step02 li strong{display:block;font-size:15px;color:#cf0056;padding:15px 0 10px 0}
ul.prd-step02 li span{display:block;color:#666;font-size:12px;}

/* 유의사항 - box */
.note-box{border:1px solid #d5dcdc;padding:15px 16px}
.note-box strong {font-size:13px;color:#666;}
.note-box ul {padding-top:8px;}
.note-box ul li{padding-left:13px;font-size:13px;color:#666;background: url(../img/common/list-bu02.gif) no-repeat 5px 10px;}

/* 2016-10-11 유의사항 - box 2    */
.note-box2{border:1px solid #ea0061;padding:15px 16px;letter-spacing:-1px;}
.note-box2 strong {font-size:13px;color:#ea0061;}
.note-box2 ul li{padding-left:18px;text-indent:-16px;font-size:13px;color:#ea0061;padding-top:8px;}


/* 보험상품 혼합형제도의 특징 */
.st-15 strong{font-size:15px;letter-spacing:-1px}
.st-15 strong .gold {font-size:15px;}


/* 보험 가입절차 - 도입효과*/
.prd425 {float:left; width:325px;padding-left:20px;background:url('../img/prd/bg-prd425.gif') no-repeat 0 0}
.prd425 p.title{height:44px;line-height:44px;text-align:center;margin-left:-20px;font-size:16px;font-weight:bold;color:#006d6c;}
.prd425 strong {color:#454545;font-size:13px;}
.prd425 dl {margin-top:12px;padding-bottom:20px;}
.prd425 dl dt {background:url('../img/prd/blt-01.gif') no-repeat 0 9px;font-weight:bold;margin-bottom:-1px}
.prd425 dl dd{margin-bottom:10px}
.prd425 dl dt, .prd425 dl dd{padding-left:10px;font-size:13px;}

/* 팝업3 약관*/
#pop-wrap table tbody td {letter-spacing:0px}
.gray-pop {background:#fafbfc url(../img/popup/bg-p3.gif) no-repeat 20px 16px;padding:15px 15px;border:1px solid #e5e5e5}
.gray-pop strong {display:block;line-height:23px;padding-left:65px;font-size:14px;color:#454545}
.gray-pop p {font-size:12px;}
.personal-info dl.list-pop dt{font-weight:bold;}
.personal-info dl.list-pop dt, .personal-info dl.list-pop dd{font-size:13px;}
.personal-info dl.list-pop dd{margin-bottom:3px;}

.pop03 {border-bottom:1px solid #e5e5e5;}
.pop03 p.pop-tx {float:left;width:390px;padding-bottom:10px;font-size:13px;}
.pop03 p.agree-box {float:left;width:170px;margin:15px 0;}
.pop03 p.agree-box input {margin: 0 10px;}
p.btn-center {text-align:center;margin-top:20px}


/* foot-bx */
.foot-bx {clear:both;border:1px solid #d5dcdc; padding:20px 40px 20px 117px; background: url(../img/common/noti-bg.gif) no-repeat 20px 50%; min-height:85px;}
.foot-bx ul{width:100%}
.foot-bx li{ color:#666; background: url(../img/common/list-bu02.gif) no-repeat 0 10px; padding-left:10px;}

/*prd-step*/
.prd-step {padding-left:5px}
.prd-step li {position:relative;float:left;width:145px;min-height:148px;padding-right:43px;text-align:center;margin-top:17px;background:url('../img/prd/bg-prd-step.png') no-repeat }
.prd-step li.last {padding-right:5px}
.prd-step li.last img {left:35%}
.prd-step li > img {position:absolute;top:30px;left:30%}
.prd-step li span img{padding-top:56px}
.prd-step li.step01 {background-position:0 0}
.prd-step li.step02 {background-position:-188px 0 }
.prd-step li.step03 {background-position:-376px 0}
.prd-step li.step04 {background-position:-564px 0}
.prd-step li.step05 {background-position:-721px 0}
.prd-step li.step07{background-position:-1095px 0}

/*펀드유형*/
.fund-list li{float:left;width:360px;}
.fund-list li img{*width:360px}
.fund-list p.title{padding:7px 0 7px 15px;height:24px;background:#fcfdfd;border-top:1px solid #e5e5e5;border-bottom:1px solid #e5e5e5}
.fund-list p.title strong{float:left;font-size:15px;color:#454545}
.fund-list p.title span{float:right;padding:7px 7px 0 0}
.fund-list ul.depth-3 li{width:240px;}
.fund-list ul.depth-3 li img{*width:240px}

/* 신용섭 그래프 */
.graph-bx {border:1px solid #e5e5e5; margin-top:10px; background: url(../img/prd/graph-dot-line.gif) repeat-y center; }
.graph {}
.graph li:first-child{border-top:0;}
.graph li.top{border-top:0;}
.graph li.bg{background-color:#fcfdfd; margin-right:2px}
.graph li.bg2{background-color:#fcfdfd;}
.graph li.bg3{background-color:#fcfdfd; height:292px}
.graph li.bg4{background-color:#fcfdfd; height:350px;height:352px\9;*height:352px}
.graph li.bg5{background-color:#fcfdfd; height:368px;*height:370px}
.graph li{border-top:1px solid #e5e5e5; width:333px !important; float:left; padding:25px 0 30px 25px; }
.graph li .tit {color:#008485; font-size:13px; letter-spacing:-1px;}
.graph li .tit span{color:#ea0061; font-size:14px; letter-spacing:normal;font-weight:bold}
.graph li .txt {color:#666; font-size:12px; letter-spacing:-1px;}


/* visual */
/*2015-10-02 수정 start*/
.visual {margin:0 0 50px 0;padding-left:10px;height:308px;/*2015-10-02 헤이트갑수정 기본 268px*/border-top:1px solid #e2e2e2;border-bottom:1px solid #b2b2b2; background:url('../img/prd/sub-bg_2.png') no-repeat}/*모델변경 2015-03-17*/
.visual2 {margin:0 0 50px 0; padding: 20px 0 0 10px; height:300px; border-top:1px solid #e2e2e2; border-bottom:1px solid #b2b2b2; background:url('../img/prd/sub-bg_9.png') no-repeat} /* 241202 하나더넥스트 추가 */
/*2015-10-02 수정 end*/
.visual_2{height:344px}/* 2017-07-12 수정(추가)*/
.visual.type3 {height:355px;  background:url('../img/prd/sub-bg_3.png') no-repeat; background-position: 100% 25px;}/* 231027 아파트대출 수정 */
.visual.type4{background:url('../img/prd/sub-bg_5.png') no-repeat; background-position: 100% 0;} /* 240329 수정 */
.visual.type5{background:url('../img/prd/sub-bg_6.jpg') no-repeat; background-position: 100% 0;}/* 240510 추가 */
.visual.type6{background:url('../img/prd/sub-bg_7.png') no-repeat; background-position: 100% 0;}/* 240510 추가 */
.visual.type7{background:url('../img/prd/sub-bg_8.png') no-repeat; background-position: 100% 0;}/* 240927 추가 */
.visual.type8{background:url('../img/prd/sub-bg_10.png') no-repeat; background-position: 100% 0;}/* 250317 추가 */
.visual.type9 {height:308px;  background:url('../img/prd/sub-bg_11.png') no-repeat; background-position: 100% 25px;}/* 250619 내집연금 내용수정 추가 */

.visual p.title1 {padding:29px 0 20px 0;}
.visual p.title2 {padding-top:16px;}
.visual ul.type1 {margin-top:6px;}
.visual ul.type2 {margin-top:15px;}
.visual ul.type3 {margin-top:0;}
.visual ul li {line-height:180%;padding-left:7px;background:url('../img/common/blt-img.gif') no-repeat 0 10px;letter-spacing:-1px;font-size:13px;color:#666}
.visual .btn {margin-top:25px;margin-left:1px}
.visual .btn a{display: inline-block;}
/* 2017-01-06 visual 높이 추가*/
.visual_ht{height:349px;}

.prd-bg-01 {background-position:100% 0 }
.prd-bg-02 {background-position:100% -268px }
.prd-bg-03 {background-position:100% -536px }
.prd-bg-04 {background-position:100% -806px }
.prd-bg-05 {background-position:100% -1074px }
.prd-bg-06 {background-position:100% -1342px }
.prd-bg-07 {background-position:100% -1610px }
.prd-bg-08 {background-position:100% -1878px }
.prd-bg-09 {background-position:100% -2146px }
.prd-bg-10 {background-position:100% -2414px }
.prd-bg-11 {background-position:100% -2682px }
.prd-bg-12 {background-position:100% -2950px; height:228px;  padding-top:40px;}
.prd-bg-13 {background-position:100% -3218px; height:228px;  padding-top:40px;}
.prd-bg-14 {background-position:100% -3487px;}
.prd-bg-15 {background-position:100% -3755px;}
.prd-bg-16 {background-position:100% -4023px;}
.prd-bg-17 {background-position:100% -4291px;}
.prd-bg-18 {background-position:100% -4559px;}
/* 추가 하단 버튼 양승욱 2013-04-19 */

.addbtn { border:1px solid #e2e2e2; padding:14px 18px 11px 25px; margin-top:25px;}
.addbtn .other-ft1	{ background:url('../img/prd/list-bul.gif') no-repeat 0 50%; padding-left:7px; font-size:13px; color:#454545; font-weight:bold; }
.addbtn .other-ft2 {  font-weight:none; font-size:13px; }

/* 2014-05-29 추가 */
.prd-diagram .bx01{background: url(../img/prd/prd_diagram01.gif) no-repeat 0 0; height:406px;}
.prd-diagram .bx01 .tit {text-align:center; padding-top:27px; }
.prd-diagram .bx01 .dia-list {margin-top:125px}
.prd-diagram .bx01 .dia-list li:first-child {width:100px; padding-left:45px;}
.prd-diagram .bx01 .dia-list li {float:left; width:95px; padding-left:95px;}
.prd-diagram .bx02 {background: url(../img/prd/prd_diagram02.gif) no-repeat 0 0; height:236px;}
.prd-diagram .bx02 .tit {text-align:center; padding-top:25px; }
.prd-diagram .bx02 .dia-list {margin-top:100px}
.prd-diagram .bx02 .dia-list li{float:left; width:235px; text-align:center;}
.prd-diagram .bx02 .dia-list li.center{width:250px;}


/* 2014-06-02 추가 */
.prd-diagram02 {background: url(../img/prd/prd_diagram03.gif) no-repeat 0 0; height:809px;}
.prd-diagram02 .tit {text-align:center; padding-top:25px;}
.prd-diagram02 .tit.tit02 {padding-top:165px;}
.prd-diagram02 .tit.tit03 {padding-top:60px;}
.prd-diagram02 .list01 {margin-top:150px;}
.prd-diagram02 .list01 li{float:left; width:240px; text-align:center;}
.prd-diagram02 .list02 {margin-top:37px;}
.prd-diagram02 .list02 li{float:left; width:360px; text-align:center;}
.prd-diagram02 .list02 li strong{display:block; color:#008584; font-size:14px; margin-bottom:30px;}
.prd-diagram02 .list02 li p{color:#333; line-height:18px; height:76px;}
.prd-diagram02 .list03 li:first-child{padding-top:70px}
.prd-diagram02 .list03 li{float:left; width:360px; text-align:center;padding-top:45px; color:#333;}

.prd-diagram02.diagram03{background: url(../img/prd/prd_diagram04.png) no-repeat 0 0; height:578px;}
.prd-diagram02.diagram03 .list01 {margin:0; padding-top:90px;}
.prd-diagram02.diagram03 .list02 {margin-top:157px;}
.prd-diagram02.diagram03 .list03 li:first-child{padding-top:80px}
.prd-diagram02.diagram03 .list03 li{padding-top:55px;}



/*200605추가*/
.green-lilist {font-size:13px; color:#3eb8b9}

/* 231027 아파트대출 추가 */
.qr_box{display:flex; align-items:center; width:410px; height:110px; margin-top:15px; background:#EAF8F8; border-radius:15px; padding:0 15px; box-sizing:border-box; letter-spacing:-1px;}
.qr_box>p{padding-left:15px; font-weight:bold;}
.qr_box>p strong{display:block; color:#008584; font-size:18px;}
/* //231027 아파트대출 추가 */