@charset "utf-8";

/*스크롤 제어*/
#m-menu .m-menu-tab .btn-tab::-webkit-scrollbar {display:none}
#m-menu .m-menu-tab .btn-tab {-ms-overflow-style:none}
#m-menu .m-menu-tab .m-menu-list::-webkit-scrollbar {display:none}
#m-menu .m-menu-tab .m-menu-list {-ms-overflow-style:none}

html.open {overflow:hidden} /*메뉴 활성화 시 본문 스크롤 비활성화*/

#header .point {position:absolute; right:13px; top:8px; width:10px; height:10px; background:#df4336; border-radius:13px; animation:point 1s ease infinite}
@keyframes point {
    from {opacity:0}
    50% {opacity:.5}
    top {opacity:1}
}

/*헤더 영역*/
#header {position:relative; width:100%; height:44px; text-align:center}
#header h1.logo {display:inline-block; width:78px; height:21px; margin-top:13px; background:url(../img/h1-logo.png)no-repeat center / 78px auto}
#header a.btn-sol-guide {position:absolute; left:0; top:3px; width:38px; height:38px; background:url(../img/btn-solguide.png)no-repeat left / 38px auto}
#header .m-menu-open {position:absolute; right:16px; top:50%; transform:translateY(-50%); width:20px; height:18px; cursor:pointer}
#header .m-menu-open .btn-show {position:absolute; right:0; top:50%; transform:translateY(-50%); width:20px; height:2px; background:#333}
#header .m-menu-open .btn-show:before {content:""; position:absolute; right:0; top:8px; width:20px; height:2px; background:#333}
#header .m-menu-open .btn-show:after {content:""; position:absolute; right:0; bottom:8px; width:20px; height:2px; background:#333}

/*모바일 메뉴 영역*/
#m-menu {width:100%; height:100%; position:fixed; top:0; right:-100%; z-index:10; background:#fff; transition:all .3s ease; z-index:11}
#m-menu.open {right:0}

#m-menu .home-group {position:relative; height:114px; background:#1150c5; text-align:center; font-size:0}
#m-menu .home-group .btn-home {width:21px; height:18px; position:absolute; left:16px; top:10px; z-index:1; background:url(../img/ico-m-menu-home.png)no-repeat center / 21px auto; cursor:pointer}
#m-menu .home-group .btn-hide {width:15px; height:15px; position:absolute; right:16px; top:10px; z-index:1; background:url(../img/ico-m-menu-close.png)no-repeat center / 15px auto; cursor:pointer}
#m-menu .home-group > h2 {padding:37px 0 17px; color:#fff; font-size:12px; font-weight:300; line-height:12px; letter-spacing:-1px; }
#m-menu .home-group > a.btn {display:inline-block; width:calc(33.3333% - 9px); height:25px; margin:0 3px; color:#fff; font-size:11px; font-weight:300; line-height:25px; letter-spacing:-1px; border:1px solid #fff}
#m-menu .home-group span {letter-spacing:0}

#m-menu .m-menu-tab {height:491px; border-bottom:1px solid #dbdbdb; background:#fff}
#m-menu .m-menu-tab .btn-tab {float:left; width:22%; height:inherit; border-right:1px solid #dbdbdb; overflow-y:scroll}
#m-menu .m-menu-tab .btn-tab li:nth-child(1):before {content:""; display:block; height:52px; background:url(../img/ico-btn-tab-off1.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li:nth-child(2):before {content:""; display:block; height:52px; background:url(../img/ico-btn-tab-off2.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li:nth-child(3):before {content:""; display:block; height:52px; background:url(../img/ico-btn-tab-off3.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li:nth-child(4):before {content:""; display:block; height:52px; background:url(../img/ico-btn-tab-off4.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li:nth-child(5):before {content:""; display:block; height:52px; background:url(../img/ico-btn-tab-off5.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li:nth-child(6):before {content:""; display:block; height:52px; background:url(../img/ico-btn-tab-off6.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li:nth-child(7):before {content:""; display:block; height:52px; background:url(../img/ico-btn-tab-off7.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li {height:75px; border-bottom:1px solid rgba(0,0,0,.05); color:#777; font-size:12px; font-weight:400; line-height:12px; letter-spacing:-1px; cursor:pointer}
#m-menu .m-menu-tab .btn-tab li:last-child {border:0}
#m-menu .m-menu-tab .btn-tab li.on {color:#3572c3; font-weight:500; background:#e1f5fe}
#m-menu .m-menu-tab .btn-tab li.on:nth-child(1):before {background:url(../img/ico-btn-tab-on1.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li.on:nth-child(2):before {background:url(../img/ico-btn-tab-on2.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li.on:nth-child(3):before {background:url(../img/ico-btn-tab-on3.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li.on:nth-child(4):before {background:url(../img/ico-btn-tab-on4.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li.on:nth-child(5):before {background:url(../img/ico-btn-tab-on5.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li.on:nth-child(6):before {background:url(../img/ico-btn-tab-on6.png)no-repeat center / 31px auto}
#m-menu .m-menu-tab .btn-tab li.on:nth-child(7):before {background:url(../img/ico-btn-tab-on7.png)no-repeat center / 31px auto}

#m-menu .m-menu-tab .m-menu-list {float:left; width:78%; height:inherit; overflow-y:scroll}
#m-menu .m-menu-tab .m-menu-list .list-tab {display:none}
#m-menu .m-menu-tab .m-menu-list .list-tab.on {display:block}
#m-menu .m-menu-tab .m-menu-list .list-tab {text-align:left; padding-left:20px}
#m-menu .m-menu-tab .m-menu-list .list-tab h3 {padding:15px 0; color:#333; font-size:16px; font-weight:500; line-height:15px; letter-spacing:-1px; border-bottom:1px solid #333}
#m-menu .m-menu-tab .m-menu-list .list-tab > ul > li {border-bottom:1px solid #e9e9e9}
#m-menu .m-menu-tab .m-menu-list .list-tab > ul > li:last-child {border:0}
#m-menu .m-menu-tab .m-menu-list .list-tab > ul > li > a {display:block; position:relative; padding:13px 0; color:#333; font-size:14px; font-weight:300; line-height:15px; letter-spacing:-1px}
#m-menu .m-menu-tab .m-menu-list .list-tab > ul > li > a.active {color:#1150c5; font-weight:500}

#m-menu .m-menu-tab .m-menu-list .list-tab ul ul.sub {display:none; background:#f8f8f8}
#m-menu .m-menu-tab .m-menu-list .list-tab ul ul.sub > li i.xi-minus-min {padding:0 6px}
#m-menu .m-menu-tab .m-menu-list .list-tab ul ul.sub > li > a {display:block; padding:8px 0; font-size:12px; font-weight:200; line-height:12px; letter-spacing:-1px}

#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(1) > ul > li:nth-child(7) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(1) > ul > li:nth-child(7) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(2) > ul > li:nth-child(5) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(2) > ul > li:nth-child(5) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(3) > ul > li:nth-child(2) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(3) > ul > li:nth-child(2) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(2) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(2) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(3) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(3) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(4) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(4) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(5) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(4) > ul > li:nth-child(5) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(2) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(2) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(3) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(3) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(4) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(4) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(5) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(5) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(11) > a:after {content:"\e942"; font-family:"xeicon"; position:absolute; right:16px}
#m-menu .m-menu-tab .m-menu-list .list-tab:nth-child(6) > ul > li:nth-child(11) > a.active:after {content:"\e945"; font-family:"xeicon"; position:absolute; right:16px}

#m-menu .partner-link {height:35px; font-size:0;}
#m-menu .partner-link a {display:inline-block; width:33.3333%}

/*슬라이드 영역*/
#main .visual .swiper-container {font-size:0; text-align:center}
#main .visual .swiper-slide {width:100%; height:100%; flex-shrink:0; position:relative}
#main .visual .swiper-slide img {height:260px}
@media screen and (max-width:320px) { /*iPhone 5/SE*/
    #main .visual .swiper-slide img {height:230px}
}
.swiper-pagination {position:absolute; z-index:10}
.swiper-pagination-bullets {left:29px; bottom:34px; width:100%; text-align:left}
.swiper-pagination-bullet {display:inline-block; margin:0 2px; width:8px; height:8px; border-radius:100%; background:#888; transition:width .3s}
.swiper-pagination-bullet-active {width:18px; border-radius:6px; background:#358adb}

/*탭메뉴 영역*/
#main .tab-menu {height:100%}
#main .tab-menu ul.btn-tab {height:36px; font-size:0; text-align:center; border-bottom:1px solid #dbdbdb}
#main .tab-menu ul.btn-tab li {display:inline-block; width:25%; color:#2a2a2a; font-size:16px; font-weight:400; padding:9px 0 8px 0; line-height:100%; letter-spacing:-1px; cursor:pointer}
#main .tab-menu ul.btn-tab li.on {color:#3789dc; font-weight:500; border-bottom:2px solid #3789dc}

/*탭메뉴->간편뱅킹*/
#main .tab-menu .tab-box {display:none}
#main .tab-menu .tab-box.on {display:block}
#main .tab-menu .tab-box .tab-cont1 {font-size:0; text-align:center; padding-top:20px}
#main .tab-menu .tab-box .tab-cont1 a {display:inline-block; position:relative; width:calc(33.3333% - 10px); margin:3px 3px; padding:12px 0 21px 10px; border:1px solid #d0d5e2; border-radius:3px; text-align:left}
#main .tab-menu .tab-box .tab-cont1 span {display:block; color:#3d3d3d; font-size:13px; font-weight:400; line-height:1.2; letter-spacing:-1px}
#main .tab-menu .tab-box .tab-cont1 a:nth-child(1) span:after {content:""; position:absolute; right:5px; bottom:6px; width:29px; height:27px; background:url(../img/ico_tab1.png)no-repeat center / 29px auto}
#main .tab-menu .tab-box .tab-cont1 a:nth-child(2) span:after {content:""; position:absolute; right:4px; bottom:7px; width:29px; height:26px; background:url(../img/ico_tab2.png)no-repeat center / 29px auto}
#main .tab-menu .tab-box .tab-cont1 a:nth-child(3) span:after {content:""; position:absolute; right:4px; bottom:6px; width:29px; height:27px; background:url(../img/ico_tab3.png)no-repeat center / 29px auto}
#main .tab-menu .tab-box .tab-cont1 a:nth-child(4) span:after {content:""; position:absolute; right:4px; bottom:6px; width:29px; height:29px; background:url(../img/ico_tab4.png)no-repeat center / 29px auto}
#main .tab-menu .tab-box .tab-cont1 a:nth-child(5) span:after {content:""; position:absolute; right:4px; bottom:9px; width:29px; height:23px; background:url(../img/ico_tab5.png)no-repeat center / 29px auto}
#main .tab-menu .tab-box .tab-cont1 a:nth-child(6) span:after {content:""; position:absolute; right:5px; bottom:9px; width:27px; height:26px; background:url(../img/ico_tab6.png)no-repeat center / 27px auto}

/*탭메뉴->유용한 정보*/
#main .tab-menu .tab-box .tab-cont2 {padding-top:20px}
#main .tab-menu .tab-box .tab-cont2 > ul {font-size:0; text-align:center}
#main .tab-menu .tab-box .tab-cont2 > ul > li {display:inline-block; width:calc(100% - 16px); border:1px solid #dbdbdb; text-align:left}
#main .tab-menu .tab-box .tab-cont2 > ul > li:nth-child(2) {border-top:0}
#main .tab-menu .tab-box .tab-cont2 > ul > li:nth-child(3) {border-top:0}
#main .tab-menu .tab-box .tab-cont2 > ul > li > h3 {padding:10px 0 12px 10px; position:relative; color:#333; font-size:13px; font-weight:400; line-height:13px; letter-spacing:-1px; cursor:pointer}
#main .tab-menu .tab-box .tab-cont2 > ul > li > h3.active {color:#1989b2; font-weight:500}
#main .tab-menu .tab-box .tab-cont2 > ul > li > h3:after {content:"\e941"; font-family:"xeicon"; font-size:10px; line-height:10px; position:absolute; right:10px; bottom:12px}
#main .tab-menu .tab-box .tab-cont2 > ul > li > h3.active:after {content:"\e944"}
#main .tab-menu .tab-box .tab-cont2 > ul ul {display:none}
#main .tab-menu .tab-box .tab-cont2 > ul ul > li a {display:block; padding:10px 0 23px 10px; color:#555; font-size:12px; font-weight:300; line-height:1.4; letter-spacing:-1px}
#main .tab-menu .tab-box .tab-cont2 > ul ul.report-1 > li a {background:url(../img/ico-tab7.png)no-repeat 96% 0 / 49px auto}
#main .tab-menu .tab-box .tab-cont2 > ul ul.report-2 > li a {background:url(../img/ico-tab8.png)no-repeat 96% 0 / 50px auto}
#main .tab-menu .tab-box .tab-cont2 > ul ul.report-3 > li a {background:url(../img/ico-tab9.png)no-repeat 96% 0 / 50px auto}

/*탭메뉴->상품몰*/
#main .tab-menu .tab-box .tab-cont3 {font-size:0; text-align:center; padding-top:20px}
#main .tab-menu .tab-box .tab-cont3 a {display:inline-block; width:calc(25% - 10px); margin:3px 3px; padding:25px 0; color:#3d3d3d; font-size:13px; font-weight:400; line-height:13px; letter-spacing:-1px; border:1px solid #d0d5e2; border-radius:3px}

#main .tab-menu .tab-box .tab-cont4 {font-size:0; text-align:center; padding-top:20px}
#main .tab-menu .tab-box .tab-cont4 a {display:inline-block; width:calc(50% - 10px); margin:3px 3px; border:1px solid #d0d5e2; border-radius:3px; text-align:left}
#main .tab-menu .tab-box .tab-cont4 a:nth-child(1) {background:url(../img/ico-tab10.png)no-repeat 98% 54px / 29px auto}
#main .tab-menu .tab-box .tab-cont4 a:nth-child(2) {background:url(../img/ico-tab11.png)no-repeat 98% 55px / 29px auto}
#main .tab-menu .tab-box .tab-cont4 a:nth-child(3) {background:url(../img/ico-tab12.png)no-repeat 98% 28px / 29px auto}
#main .tab-menu .tab-box .tab-cont4 a:nth-child(4) {background:url(../img/ico-tab13.png)no-repeat 98% 28px / 28px auto}

#main .tab-menu .tab-box .tab-cont4 span {display:block; letter-spacing:-1px}
#main .tab-menu .tab-box .tab-cont4 span.txt1 {padding:11px 0 11px 10px; color:#333; font-size:13px; font-weight:400; line-height:1.4}
#main .tab-menu .tab-box .tab-cont4 span.txt2 {padding:0 0 25px 10px; color:#3d3d3d; font-size:12px; font-weight:300; line-height:1.2}
/*공지글(새소식) 영역*/
#main .notice {margin-top:14px; height:22px}
#main .notice ul.notice-list {padding-left:16px; height:inherit; overflow:hidden}
#main .notice ul.notice-list li a:before {content:"새소식"; display:inline-block; margin-right:11px; padding:4px 5px; color:#fff; background:#5fa1e3; font-size:12px; font-weight:300; line-height:12px; letter-spacing:-1px}
#main .notice ul.notice-list li a {display:block; color:#666; font-size:13px; font-weight:300; line-height:22px; letter-spacing:-1px; width:calc(100% - 34px);  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/*푸터 영역*/
#footer {margin-top:20px; background:#434343; text-align:center}

#footer .ft-link-sns {text-align:center; border-bottom:1px solid #363636}
#footer .ft-link-sns a {display:inline-block; padding:0 2px}

#footer .ft-menu {text-align:center; font-size:0}
#footer .ft-menu a {display:inline-block; position:relative; padding:12px 8px; color:#9c9c9c; font-size:12px; font-weight:300; line-height:12px; letter-spacing:-1px}
#footer .ft-menu a:after {content:""; position:absolute; left:0; top:12px; width:1px; height:12px; background:#5d5d5d}
#footer .ft-menu a:nth-child(2) {font-weight:500}
#footer .ft-menu a:first-child:after {display:none}

#footer address {color:#7a7a7a; font-size:11px; font-weight:100; line-height:11px; padding-bottom:8px}
#footer em {display:block; color:#ddd; font-size:12px; font-weight:100; line-height:18px; padding:10px 0 18px}