@charset "utf-8";

/* ===============================================
Date : 2016-06-13 ~
Description : 인터넷 뱅킹 메인 스타일 정의
=============================================== */


/*
 * @ 마이뱅킹
 * -------------------------------------
 */

#main{ width:980px; margin:0 auto;}
#peb-main .sm-alram {border-top:1px solid #d5d5d5;}
#peb-main .sm-alram ul {overflow:hidden; padding:39px 0 39px 39px;}
#peb-main .sm-alram ul li {float:left; margin-left:110px; padding-left:52px; position:relative;}
#peb-main .sm-alram ul li:first-child {margin-left:0;}
#peb-main .sm-alram ul li:before {content:''; display:block; width:48px; height:48px; position:absolute; left:0; top:0;}
#peb-main .sm-alram ul li.ico01:before {background:url('/resource/img/main/m_ico11.png') no-repeat;}
#peb-main .sm-alram ul li.ico02:before {background:url('/resource/img/main/m_ico12.png') no-repeat;}
#peb-main .sm-alram ul li.ico03 {padding-left:60px;}
#peb-main .sm-alram ul li.ico03:before {background:url('/resource/img/main/m_ico13.png') no-repeat; width:51px; height:51px}
#peb-main .sm-alram ul li > strong  {display: block; font-size:18px; margin-bottom:13px; color:#333333;}
#peb-main .sm-alram ul li > p {margin-bottom:15px;}
#peb-main .sm-alram ul li > p span {font-weight:bold; color:#916744;}
#peb-main .sm-alram ul li > p .bar {color:#cccccc; font-weight:normal;}
#peb-main .sm-alram ul li > .btn-white-s {margin-bottom: 11px}
#peb-main .sm-alram ul li > .alarm-set {margin-top: -8px}
#peb-main .sm-alram ul li > .alarm-set span {line-height: 35px;}

#peb-main .tooltip.on {position:relative; cursor:pointer;}
#peb-main .tooltip.on [data-tooltip]:hover:before{display:block; content:attr(data-tooltip); position:absolute; top:-50px; left:-7px !important; padding:10px 10px 11px 10px; font-size:12px; font-weight:normal; line-height:16px; letter-spacing:-0.5px; border:1px solid #d71921; border-radius:5px; white-space:nowrap; background:#ffffff; text-align:left;}
#peb-main .tooltip.on [data-tooltip]:hover:after{content:''; display:block; position:absolute; top:-12px; left:90px; width:12px; height:8px; background:url('/resource/img/main/tp_arrow.png') 0 0 no-repeat;}

.qk-wrap {margin-bottom:40px; position:relative;}
.qk-wrap .open-bar{display:block !important; width:52px; height:15px; border-bottom:1px solid #c5c5c5; border-left:1px solid #c5c5c5; border-right:1px solid #c5c5c5; position:absolute; bottom:0; left:50%; margin-left:-26px !important; cursor:pointer; background:url('/resource/img/main/qk_arrow.gif') no-repeat 0 0;}
.qk-wrap .open-bar.opened{background-position:0 -14px;}

.qk-wrap > .qk_select { text-align:center; }
.qk-wrap > .qk_select.close{ display:none; }

.qk-wrap > .qk_select > .menu{padding:20px 0; border-bottom:1px solid #c5c5c5;}
.qk-wrap > .qk_select a {margin-left:30px; padding-left:35px; font-size:15px; color:#333333; position:relative; display:inline-block;}
.qk-wrap > .qk_select a:first-child {margin-left:0; }
.qk-wrap > .qk_select a img {position:absolute; left:0; top:-3px; height:26px;}
.qk-wrap > .qk_select a.ico img {height:28px}

.qk-setting { display:none; overflow:hidden;  padding:0 55px 30px 55px; border-left:1px solid #c5c5c5; border-bottom:1px solid #c5c5c5; border-right:1px solid #c5c5c5;}
.qk-setting.open{ display:block;}
.qk-setting .setting-list:after{ content:''; display:block; clear:both;}
.qk-setting .setting-list .setimg {position:relative; display:block; margin:0 auto; margin:0 30px 10px 30px; width:64px; height:64px; border-radius:50%; background:url(/resource/img/main/ico_bg.png);}
.qk-setting .setting-list .setimg img {position:absolute; left:50%; top:50%; margin-left:-21px; margin-top:-18px;}
.qk-setting .setting-list .active .setimg {background:url(/resource/img/main/ico_bg_on.png);}
.qk-setting .setting-list a {float:left; text-align:center; margin:30px 0 0 0; width:124px; font-family:'NanumBarunGothic'; text-decoration:none; padding:0; color:#666666;}
.qk-setting .setting-list a .default {display:block;}
.qk-setting .setting-list a .on {display:none;}
.qk-setting .setting-list a.active .default {display:none;}
.qk-setting .setting-list a.active .on {display:block; }
.qk-setting .btn-wrap {float:right; margin-top:0; margin-right:30px;}
.qk-setting .btn-wrap > span {display:inline-block; float:none; margin-top:20px; margin-right:20px; vertical-align:middle; font-family:MalgunGothic,'맑은 고딕','돋움',Dotum,AppleGothic,Sans-serif,Arial; color:#666666; font-size:13px;}

#peb-main h2 {font-weight:normal; margin-top:55px; font-family:'NanumBarunGothic';}
#peb-main .qk-wrap + h2 {margin-top:0;}
#peb-main h2 .txt {margin-left:20px; font-size:14px; letter-spacing:0; font-family:MalgunGothic,'맑은 고딕','돋움',Dotum,AppleGothic,Sans-serif,Arial;}
#peb-main h2 .txt > strong {font-size:18px; margin-right:9px;}
#peb-main h2 .date {float:right; margin-top:10px; font-size:13px; color:#666; font-family:MalgunGothic,'맑은 고딕','돋움',Dotum,AppleGothic,Sans-serif,Arial;  letter-spacing:0;}
#peb-main h2 .date > span {color:#916744; font-weight:bold;}

#peb-main h2 p {text-align:right}
#peb-main h2 p .date {float:none;}

#peb-main .btn-gray-ss {font-size:12px; font-weight:bold; color:#fff; background:#888888; padding:3px 10px 4px 10px; border-radius:3px; margin-top:2px;}
#peb-main .btn-more {margin-top:20px; font-size:13px; color:#666; position:relative; padding-right:20px;}
#peb-main .btn-more:after {content:''; display:block; width:16px; height:16px; background:url('/resource/img/main/btn_arrow.png') no-repeat; background-size:100% 100%; position:absolute; right:0; top:0;}
#peb-main a, #peb-main p {font-size:14px;}

.my-bmk {border:1px solid #d5d5d5; border-left:none;}
.my-bmk:after {clear:both; content:''; display:block;}
.my-bmk > div {display:inline-block; }
.my-bmk > div + div {border-top:1px solid #d5d5d5;}
.my-bmk .bg-g {background:#f5f5f5;}
.my-bmk [class^="my-"] {float:left; padding:35px; height:205px; border-left:1px solid #d5d5d5; vertical-align:middle;}
.my-bmk [class^="my-"] > strong {display:block; margin-bottom:17px; font-size:18px; font-family:'NanumBarunGothic';}
.my-bmk [class^="my-"] .btn-white-s {margin-top:15px;}
.my-grd {width:200px; text-align:center; }
.my-grd > p {font-size:16px; }
.my-grd > p:before {content:''; margin:0 auto 10px; width:70px; height:65px; display:block; background:url('/resource/img/main/m_grd01.png') no-repeat;}
.my-grd > .ico01:before {background-position:0 0;}
.my-grd > .ico02:before {background-position:-70px 0;}
.my-grd > .ico03:before {background-position:-140px 0;}
.my-grd > .ico04:before {background-position:-210px 0;}
.my-grd > .ico05:before {background-position:-280px 0;}
.my-grd > .ico06:before {background-position:-350px 0;}
.my-grd-e {width:490px; position:relative;}
.my-grd-e > strong {font-family:MalgunGothic,'맑은 고딕','돋움',Dotum,AppleGothic,Sans-serif,Arial !important; line-height:22px;}

.my-grd-e > strong > span {display:inline-block; max-width:320px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.my-grd-e [class^="grd-"] {position:absolute; right:35px; top:38px; padding-left:30px;}
.my-grd-e [class^="grd-"]:before {content:''; display:block; position:absolute; left:0; top:-5px; width:25px; height:25px; background:url('/resource/img/main/m_grd01s.png') no-repeat;}
.my-grd-e .grd-01:before {background-position:0 0; }
.my-grd-e .grd-02:before {background-position:-25px 0; }
.my-grd-e .grd-03:before {background-position:-50px 0; }
.my-grd-e .grd-04:before {background-position:-75px 0; }
.my-grd-e .grd-05:before {background-position:-100px 0; }
.my-grd-e .grd-06:before {background-position:-125px 0; }
.my-grd-e ul li {margin-top:14px;}
.my-grd-e ul li > .txt {float:right; font-size:15px;}
.my-grd-e ul li > .txt > .price {font-weight:bold;}
.my-approve {width:199px; text-align:center;}
.my-approve > span {display:block; margin-top:25px; padding-left:35px; font-size:20px; color:#e32a2a; font-weight:normal; background:url('/resource/img/main/m_ico14.png') no-repeat 0 7px;}
.my-approve .num {font-size:36px; font-weight:bold; color:#e32a2a; margin-right:3px;}
.my-approve > span + .btn-white-s {margin-top:30px !important;}
.my-img {width:290px; }
.my-img > p {font-size:13px; color:#666; line-height:19px !important;}
.my-img .p-img {display:block; margin-top:20px;}
.my-img .p-img img{ vertical-align:middle;}
.my-img .p-img .btn-white-s {margin-top:0; margin-left:13px; vertical-align:middle;}
.my-point {width:489px; }
.my-point .pnt {margin-bottom:22px; font-size:36px; font-weight:bold; color:#e32a2a;}
.my-point .link01 {float:left; width:288px;}
.my-point .link01 span {display:block;}
.my-point .link01 a {margin-right:15px; padding-right:22px; line-height:22px; position:relative; font-weight:bold;}
.my-point .link01 a:after {content:''; display:block;  width:16px; height:16px; background:url('/resource/img/main/btn_arrow.png') no-repeat; position:absolute; right:0; top:3px;}
.my-point .link02 {float:left; margin-top:10px; position:relative;}
.my-point .link02:before {content:''; width:1px; height:93px; background:url('/resource/img/main/dot_line.gif') repeat-y; display:block; position:absolute; left:-34px;}
.my-point .link02 a {display:block; color:#555; padding:15px 0 15px 45px; font-weight:bold; position:relative;}
.my-point .link02 a:before {content:''; display:block; position:absolute; left:0; top:7px; width:30px; height:30px;}
.my-point .link02 a.ico01:before {background:url('/resource/img/main/m_ico09.png') no-repeat;}
.my-point .link02 a.ico02:before {background:url('/resource/img/main/m_ico10.png') no-repeat;}
.etc-box { width:489px; float:left; padding:35px; height:205px; border-left:1px solid #d5d5d5; vertical-align:middle; }
.etc-box ul li { position:relative; padding-top:30px; }
.etc-box ul li:first-child { padding-top:0; }
.etc-box ul li .tit_list { position:relative; padding-left:135px; padding-right:110px; }
.etc-box ul li .tit_list dt { position: absolute; left:0; top:0; font-size:18px; font-family: 'NanumBarunGothic'; font-weight:bold; }
.etc-box ul li .tit_list dd { display:block; font-size:18px; }
.etc-box ul li .tit_list dd + dd { padding-top:6px; }
.etc-box ul li:last-child .btn-white-s { position: absolute; top:27px; right:0; }

.my-product { position: relative; width:490px; }
.my-product li {display:inline-block; text-align:center; margin-left:28px;}
.my-product li:first-child {margin-left:0;}
.my-product li a {display:block; font-size:14px; color:#555555; font-weight:bold;}
.my-product li a:before {content:''; margin:0 auto 12px; width:54px; height:54px; display:block; }
.my-product li a.ico01:before {background:url('/resource/img/main/m_ico01.png') no-repeat;}
.my-product li a.ico02:before {background:url('/resource/img/main/m_ico02.png') no-repeat;}
.my-product li a.ico03:before {background:url('/resource/img/main/m_ico03.png') no-repeat;}
.my-product li a.ico04:before {background:url('/resource/img/main/m_ico04.png') no-repeat;}
.my-product li a.ico05:before {background:url('/resource/img/main/m_ico05.png') no-repeat;}
.my-product li.on a:before {background-position:0 -54px;}
.my-product li a > span {display:block; margin-top:10px; color:#888;}
.my-product li.on a > span {color:#e32a2a;}

.my-product .coupon_state { position:absolute; right:35px; top:27px; display:inline-block; }
.my-product .coupon_state a { position:relative; display:inline-block; background:url('/resource/img/main/couponicon_bg.png') no-repeat 0 100%; width:90px; height:27px; text-align:center; }
.my-product .coupon_state a.on { background-position: 0 0; }
.my-product .coupon_state a .t1 { line-height:27px; display:inline-block; width:100%; }
.my-product .coupon_state a .icon { position:absolute; top:-8px; right:-10px; display:inline-block; width:24px; height:24px; text-align:center; line-height:24px; font-size:10px; color:#fff; background:url('/resource/img/main/couponicon_bg2.png') no-repeat 0 100%; }
.my-product .coupon_state a.on .icon { background-position: 0 0; }



.my-trm {width:290px; }
.my-trm > p {color:#444; line-height:22px !important;}
.my-trm > p > span {color:#e32a2a; font-size:20px;}
.my-trm .no-data:after {content:''; margin:0 auto; margin-top:25px; display:block; background:url('/resource/img/main/no_data.png') no-repeat; width:53px; height:54px; }
.my-list {width:199px; padding:55px 0 !important;}
.my-list li {margin-top:25px; font-size:15px; text-align:center;}
.my-list li:first-child {margin-top:0;}
.my-list li > a {padding-left:28px; position:relative;}
.my-list li > a:before {content:''; width:18px; height:17px; display:block; position:absolute; left:0; top:2px; }
.my-list li.ico01 a:before {background:url('/resource/img/main/m_ico06.png') no-repeat;}
.my-list li.ico02 a:before {background:url('/resource/img/main/m_ico07.png') no-repeat;}
.my-list li.ico03 a:before {background:url('/resource/img/main/m_ico08.png') no-repeat;}

#peb-main .h2-w { overflow:hidden}
#peb-main .h2-w h2 { float:left; margin-top:0 !important;}
#peb-main .h2-w .tab-type01 { float:right; width:650px; margin-right:-4px;}
#peb-main .h2-w .tab-type01 li { width:25%}
#peb-main .h2-w .tab-type01 li.on:after {content: ''; display: block; width: 100%; position: absolute; left: 0; top: 0; border-top: 2px solid #d72228;}
.main-popur{margin-top:55px; position:relative}
.main-popur .h2-w h2 { padding-top:12px; }
.card-set { overflow:hidden; padding:25px 0 30px; margin-bottom:50px;  border:10px solid #f2efeb;}
.card-set.no-data {height:190px; text-align:center;}
.card-set.no-data:before { display:inline-block; vertical-align:middle; content:''; height:100%;}
.card-set .inner-wrap { position:relative; float:left; width:320px; min-height:185px; padding:0 30px ;}
.card-set .inner-wrap .inner { margin-bottom:30px;}
.card-set .inner-wrap:after { content:""; display:block; position:absolute; left:0; top:0; bottom:0; height:100%; width:1px; background:#e5e5e5}
.card-set .inner-wrap:first-child:after { width:0}
.card-set strong { display:block; font-size:20px; line-height:24px; margin-top:25px; margin-bottom:8px; font-weight:bold}
.card-set p.tag + strong {margin-top:0;}
.card-set p { line-height:145%; color:#555; letter-spacing:-0.05em; }
.card-set .perc { margin-top:15px;}
.card-set .perc span { display:block; margin-bottom:3px;}
.card-set .perc strong { font-size:26px; color:#e32a2a; margin-top:0;}
.card-set .btn { position:absolute; right:30px; bottom:0; text-align:right; }
.card-set .tag { height:20px; margin-bottom:6px;}
.card-set .tag span{ display:inline-block; border-radius:36px 36px 0 36px; padding:3px 10px 5px;  font-size:12px; line-height:12px; color:#fff; margin-right:-3px; }
.card-set .tag .new{ padding:2px 10px 3px; vertical-align:middle;  background:#fff; border:1px solid #e32a29; color:#e32a29;border-bottom-right-radius:36px; font-size:13px; line-height:13px; font-weight:bold;}
.card-set .tag .two{ background:#a48164; border-radius:36px 36px 36px 0; }

/* 기준금리 추가 */
.card-set .perc.type2 { overflow:hidden; }
.card-set .perc.type2 .zun { margin:0; display:inline-block; float:left; padding: 3px 0 0 10px; font-size:11px; font-weight:bold; }
.card-set .perc.type2 strong {display:inline-block; float:left;}


.card-set.crd .inner-wrap { position:relative; float:left; width:240px; min-height:285px; padding:0 30px ;}
.card-set.crd .inner > strong { font-size:16px; letter-spacing:-1px; line-height:130%}
.card-set.crd p { line-height:140%; color:#555}
.card-set.crd .tag { margin-top:0 !important; margin-left:-22px; width:218px; text-align:center }
.card-set.crd .crd-img { text-align:center; width:180px; height:102px; margin-bottom:15px }
.card-set.crd .btn {  width:100%; padding-left:50px; text-align:center; }

.card-set.fnd .inner-wrap { position:relative; float:left; min-height:217px; padding:0 30px ;}
.card-set.fnd .inner > strong { font-size:16px; letter-spacing:-1px; line-height:140%}
.card-set.fnd p { line-height:140%; color:#555}
.card-set.fnd .perc {position:absolute; left:30px; bottom:40px;  }
.card-set.fnd .tag { margin-top:0 !important; margin-left:0; width:240px; }

.card-set .tag .one.dpt{ background:#fb5900}
.card-set .tag .one.lon{ background:#1c92e8}
.card-set .tag .one.crd{ background:#72665c}
.card-set .tag .one.tru{ background:#5ca500}
.card-set .tag .one.rtp{ background:#5060ae}
.card-set .tag .one.fnd{ background:#df2824}
.card-set .tag .one.fex{ background:#ec619a}
.card-set .tag .one.ins{ background:#664991}

/*쿠폰함*/
/* sort area */
.sort { text-align:right; margin-bottom:10px; }
.sort .result { float:left; margin-top:10px; }
.coupon-state {margin-bottom:30px; background:#9a7b64;}
.coupon-state:after {content:''; display:block; clear:both;}
.coupon-state .colm {float:left; width:205px; height:50px; padding:3px 33px 0 24px;}
.coupon-state .colm:first-child {background:#77594a;}
.coupon-state .colm + .colm {background:#5f4336;}
.coupon-state .colm span {font-size:14px; font-weight:bold; color:#fff; line-height:42px;}
.coupon-state .colm span > em {font-size:24px; padding-right:2px; line-height:1; vertical-align:sub;}
.coupon-state .colm .num {float:right;}
.coupon-state .inquiry {float:right; padding:11px 28px 0 0;}
.coupon-state select {border:none; min-width:130px; border-radius:3px; color:#666666;}
.coupon-detail {margin-bottom:30px; margin-left:-16px}
.coupon-detail:after {content:''; display:block; clear:both;}
.coupon-detail [class^='coupon-'] {float:left; width:316px; height:257px; margin-left:16px; margin-bottom:20px; position:relative;}
.coupon-detail .coupon-cont {border:2px solid #cfcfcf; }
.coupon-detail .coupon-cont .info {height:189px; background:#faf9f5 url(/resource/img/main/coupon_line.gif) repeat-x 1px bottom; padding:26px 25px 24px 25px;}
.coupon-detail .coupon-cont .info > strong {display:block; font-size:20px; font-weight:bold; color:#444; line-height:23px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.coupon-detail .coupon-cont .info > span {display:block; line-height:18px; margin-top:5px; color:#916744; font-weight:bold; font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.coupon-detail .coupon-cont .info > span:before {content:'- '}
.coupon-detail .coupon-cont .info .date {color:#916744; font-weight:bold; margin-top:10px}
.coupon-detail .coupon-cont .info .mark {display:inline-block; margin-top:7px; padding:0 13px 1px 13px; font-weight:bold; font-size:12px; color:#fff; background:#fa0000; border-radius:50px;}
.coupon-detail .coupon-cont .info .per {padding-top:38px; }
.coupon-detail .coupon-cont .info .mark + .per {padding-top:14px; }
.coupon-detail .coupon-cont .info .per > span {color:#e32a2a; font-size:26px; font-weight:bold;}
.coupon-detail .coupon-cont .btn {text-align:center; padding:19px 0;}
.coupon-detail .coupon-none {border:3px solid #efece8; text-align:center; background:url(/resource/img/main/coupon_logo.gif) no-repeat center bottom;}
.coupon-detail .coupon-none p {color:#777777; font-weight:bold; padding-top:75px;}