﻿@charset "utf-8";/* HEADER */
#wrap { position:relative; overflow-y:auto; padding:50px 0 0 250px; min-width:1280px; height:100%; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s }
#wrap.iframe_wrap {overflow: hidden}
#header { position:fixed; top:0; left:0; z-index:101; width:100%; height:50px; background:#fff }
#header:before { display:block; content:""; position:absolute; right:0; bottom:-30px; left:250px; height:30px; box-shadow:inset 0 5px 5px rgba(0,0,0,0.05); transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s }
#header .inner { display:flex; align-items:center; justify-content:flex-start; position:relative; padding-right:20px }
#header .inner h1 { flex-shrink: 0; width:250px; }
#header .inner h1 a { display:flex; align-items:center; justify-content:center; padding: 0 20px; height:50px; }
#header .inner h1 a img { max-width: 90%; max-height:85%; }
#header .inner h1 a:after{
    /* content: "경기극저신용대출 전산시스템";
    font-size: 15px;
    line-height: 1.2;*/
    
    content: "경기금융복지시스템";
    margin-left: 10px;
    font-size: 18px;
    line-height: 1.2;
}
#header .inner .headTab { display:block; position: relative; padding-right: 62px; width: calc(100% - 550px); }
#header .inner .headTab ul li { position: relative; }
#header .inner .headTab ul li a { display:block; align-items: center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:0 30px 0 10px; max-width:130px; font-size:12px; }
#header .inner .headTab ul li .btnDelete { position: absolute; top: 0; right: 0; overflow: hidden; margin-left: 5px; border: 0; width: 30px; height: 100%; text-indent: -9999px; background:url(../images/close.png) no-repeat center / 15px auto; }
#header .inner .headTab .tabItemWrap { overflow: hidden; width: 100%; }
#header .inner .headTab .tabItemWrap ul { display:table; table-layout: fixed; overflow: hidden; }
#header .inner .headTab .tabItemWrap ul li { display: table-cell; vertical-align: middle; }
#header .inner .headTab .tabItemWrap ul li ~ li { padding-left:10px; }
#header .inner .headTab .tabItemWrap ul li a { border:1px solid #ccc; border-radius:5px; height:30px; text-align:center; line-height:28px; }
#header .inner .headTab .tabItemWrap ul li.curr a { border:1px solid #0e7add; color:#0e7add; }
#header .inner .headTab .tabItemAll { position: absolute; top: 0; right: 10px; }
#header .inner .headTab .tabItemAll .btnAdd { display:block; content:""; position:relative; padding:0 30px 0 10px; border:1px solid #ccc; border-radius:5px; height:30px; text-indent:-9999px; line-height:28px; background:url(../images/more.png) no-repeat center/20px; }
#header .inner .headTab .tabItemAll ul { display: none; position: absolute; top: 40px; right: -69px; padding: 10px 0; border: 1px solid #f04e58; border-radius: 10px; width: 180px; background: #fff; box-shadow: 0 10px 10px rgba(0,0,0,0.2); }
#header .inner .headTab .tabItemAll ul li a { justify-content: space-between; max-width: 100%; }
#header .inner .headTab.on .tabItemAll ul { display: block; }
#header .inner .util { margin-left: auto; }
#header .inner .util:after { display:block; content:""; clear:both }
#header .inner .util > ul > * { display:flex; line-height:30px; font-size:13px; font-weight:500; color:#000; float:left }
#header .inner .util > ul > * + * { margin-left:10px }
#header .inner .util i { line-height: 30px; font-size:23px }
#header .inner .util > ul { display: flex; align-items: center; }
#header .inner .util > ul li { position: relative; }
#header .inner .util > ul li .popMenu { display: none; position: absolute; top: 100%; right: 50%; margin-right: -90px; padding: 10px; border-radius: 10px; width: 180px; background: #fff; box-shadow: 0 10px 10px rgba(0,0,0,0.2); }
#header .inner .util > ul li:hover .popMenu { display: block; }
#header .inner .util > ul li span { display:flex; align-items:center; justify-content:center; margin-right:10px; border-radius:50%; width:30px; height:30px; text-align:center }
#header .inner .util > ul li.homeName span { color:#0080c6; background:#e8ecf4 }
#header .inner .util > ul li.homeName p { line-height: 1.4; }
#header .inner .util > ul li.homeName p strong { display: block; font-size: 80%; }
#header .inner .util > ul li.homeName .userName { display: flex; align-items: center; }
#header .inner .util > ul li.homeName .userName span { color:#3f7dbe; background:#eaf1f8 }
#header .inner .util > ul li.homeName .userName em { display:inline-block; margin-left:5px; font-weight:500; color:#666 }
#header .inner .util > ul li.homeName .userName .btnLogout { display:flex; align-items:center; justify-content:center; margin-left:10px; margin-left: auto; border:none; color:#000; background:none; }
#header .inner .util > ul li.headSearch .btnSearch { display:flex; align-items:center; justify-content:center; margin-left:10px; border:none; color:#000; background:none }
#header .inner .util > ul li.headSearch .popMenu { right: 0; margin-right: 0; width: 300px; }
#header .inner .util > ul li.headSearch .searchArea { display: flex; position:relative; z-index:100; background:#fff; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s; }
#header .inner .util > ul li.headSearch .searchArea input { padding:0 60px 0 30px; border:none; border-radius:25px; width:100%; height:50px; font-size:16px; background:#eee; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s }
#header .inner .util > ul li.headSearch .searchArea button { display:flex; align-items:center; justify-content:center; position:absolute; top:0; right:10px; border:none; width:50px; height:50px; font-size:14px; color:#0080c6; background:none; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s }
#header .inner .util > ul li .btnHelpCenter { display:flex; align-items:center; justify-content:center; margin-left:10px; border:none; color:#000; background:none }
#header .inner .util > ul li .btnHelpCenter { display:flex; align-items:center; justify-content:center; margin-left:10px; border:none; color:#000; background:none }
#header .inner .util > ul li .btnSchema { display:flex; align-items:center; justify-content:center; margin-left:10px; border:none; color:#000; background:none }
#header .inner .util > ul li .btnMoreVert { display:flex; align-items:center; justify-content:center; margin-left:10px; border:none; color:#000; background:none }
#header .inner .util .notice { position:relative }
#header .inner .util .notice > a { display:block; position:relative }
#header .inner .util .notice > a i { display:flex; align-items:center; justify-content:center; border-radius:50%; width:30px; height:30px; text-align:center; color:#f04e58; background:#fdf1e5 }
#header .inner .util .notice.on > a:before { display:block; content:""; position:absolute; top:0; right:0; border-radius:50%; width:4px; height:4px; background:#f04e58 }
#header .inner .util .notice ul { display:none; position:absolute; top:40px; right:0; padding:10px; border:1px solid #f04e58; border-radius:10px; width:180px; background:#fff; box-shadow:0 10px 10px rgba(0,0,0,0.2) }
#header .inner .util .notice ul li a { display:block; position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-left:8px; line-height:25px; font-size:12px; color:#666 }
#header .inner .util .notice ul li a:before { display:block; content:""; position:absolute; top:50%; left:0; margin-top:-1px; border-radius:50%; width:2px; height:2px; background:#666 }
#header .inner .util .notice ul li.new a { font-weight:500; color:#000 }
#header .inner .util .notice ul li.new a:before { background:#000 }
#wrap.menuIco #header:before { left:94px }

/* GNB */
#gnb { position:fixed; top:-50px; bottom:0; left:0; z-index:100; padding:0 20px 105px; width:250px; background:#fff; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s }
#gnb:before,
#gnb:after { display:block; content:""; position:absolute; top:0; right:-25px; width:25px; height:25px; background:#fff }
#gnb:after { border-radius:25px 0 0 0; background:#eee }
#gnb .copy { position:absolute; right:0; bottom:0; left:0; padding:20px 15px 0; height:105px; text-align:center; line-height:16px; font-size:10px; color:#666 }
#gnb .copy span { display:inline-block }
#gnb .copy em { position:relative; z-index:1 }
#gnb .copy:before { display:block; content:""; position:absolute; bottom:0; left:0; width:100%; height:101px; background:#fff }
#gnb .inner { position:absolute; top:50px; right:0; bottom:0; left:0 }
#gnb .inner:before,
#gnb .inner:after { display:block; content:""; position:absolute; right:0; left:0; z-index:1 }
#gnb .inner:before { top:0; height:20px; background:linear-gradient(#fff, 80%, rgba(0,0,0,0)) }
#gnb .inner:after { bottom:100px; z-index:0; height:20px; background:linear-gradient(rgba(0,0,0,0), 20%, #fff) }
#gnb .inner .depth01 { padding:50px 0 120px }
#gnb .inner .depth01 li.more > a { padding-right:24px !important }
#gnb .inner .depth01 > li + li { border-top:1px solid #ddd }
#gnb .inner .depth01 > li a { display:block; position:relative; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
#gnb .inner .depth01 > li a i:last-child { position:absolute; top:50%; right:0; font-size:22px; color:#f04e58; transform:translate(0, -50%); -webkit-transform:translate(0, -50%); -moz-transform:translate(0, -50%) }
#gnb .inner .depth01 > li > a { display:flex; align-items:center; padding-left:20px; line-height:60px; font-size:15px; color:#000 }
#gnb .inner .depth01 > li > a span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:15px }
#gnb .inner .depth01 > li > a i { font-size:28px }
#gnb .inner .depth01 > li > a i:last-child { right:20px }
#gnb .inner .depth01 > li.more > a { padding-right:40px !important }
#gnb .inner .depth01 > li.curr > a,
#gnb .inner .depth01 > li.on > a { background:#0080c6 }
#gnb .inner .depth01 > li.curr > a span,
#gnb .inner .depth01 > li.on > a span { font-weight:700 }
#gnb .inner .depth01 > li.curr > a *,
#gnb .inner .depth01 > li.on > a * { color:#fff !important }
#gnb .inner .depth01 > li.curr > a i,
#gnb .inner .depth01 > li.on > a i { font-weight:300 !important }
#gnb .inner .depth01 > li ul { display:none }
#gnb .inner .depth02 { padding:10px 0 15px; border-top:1px solid #ddd }
#gnb .inner .depth02 > li { padding:0 20px 0 32px }
#gnb .inner .depth02 > li + li { margin-top:10px }
#gnb .inner .depth02 > li a { position:relative; padding-left:14px !important }
#gnb .inner .depth02 > li > a { line-height:30px; font-size:14px; color:#000 }
#gnb .inner .depth02 > li > a:before { display:block; content:""; position:absolute; top:15px; left:0; border-radius:50%; width:2px; height:2px; background:#000 }
#gnb .inner .depth02 > li > a i:last-child { color:#ccc }
#gnb .inner .depth02 > li.curr > a,
#gnb .inner .depth02 > li.on > a { font-weight:700; color:#0080c6 }
#gnb .inner .depth02 > li.curr > a:before,
#gnb .inner .depth02 > li.on > a:before { background:#0080c6 }
#gnb .inner .depth03 { padding-top:4px }
#gnb .inner .depth03 > li > a { line-height:30px; font-size:14px; color:#000 }
#gnb .inner .depth03 > li > a i:last-child { display:flex; align-items:center; justify-content:center; right:5px; border-radius:50%; width:16px; height:16px; font-size:16px; color:#6a6a6a; background:#ccc }
#gnb .inner .depth03 > li.curr > a,
#gnb .inner .depth03 > li.on > a { text-decoration:underline; font-weight:500; color:#2d71b8 }
#gnb .inner .depth04 { padding:0 14px 10px }
#gnb .inner .depth04 li a { padding:4px 0; line-height:17px; font-size:12px; color:#666 }
#gnb .inner .depth04 li a:before { display:block; content:"-"; position:absolute; top:4px; left:0 }
#gnb .inner .depth04 > li.curr > a,
#gnb .inner .depth04 > li.on > a,
#gnb .inner .depth04 > li > a:hover { font-weight:500; color:#66ae2f }
#gnb .btnMenu { display:flex; align-items:center; justify-content:center; position:absolute; top:200px; right:-15px; z-index:100; border:none; border-radius:50%; width:30px; height:30px; color:#fff; background:#f37774; transition:all 0.2s; -webkit-transition:all 0.2s; -moz-transition:all 0.2s }
#gnb .btnMenu i { font-size:12px }
#wrap.menuIco { padding-left:60px }
#wrap.menuIco #gnb { width:60px }
#wrap.menuIco #gnb .searchArea { width:50px }
#wrap.menuIco #gnb .searchArea input { padding:0 25px; text-indent:-9999px }
#wrap.menuIco #gnb .searchArea button { right:0 }
#wrap.menuIco #gnb .inner .mCustomScrollBox { overflow:inherit }
#wrap.menuIco #gnb .inner .depth01 > li a { overflow:inherit }
#wrap.menuIco #gnb .inner .depth01 > li a i:last-child { display:none !important }
#wrap.menuIco #gnb .inner .depth01 > li ul { display:none !important }
#wrap.menuIco #gnb .inner .depth01 > li > a { padding:0 !important; height:60px; text-align:center }
#wrap.menuIco #gnb .inner .depth01 > li > a i { margin:0 auto }
#wrap.menuIco #gnb .inner .depth01 > li > a:hover { color:#0080c6 }
#wrap.menuIco #gnb .inner .depth01 > li > a span { position:absolute; top:50%; left:70px; z-index:100; white-space:nowrap; margin:-15px 0 0 0; padding:0 18px; border:1px solid #ddd; border-radius:15px; line-height:28px; font-size:12px; color:#666 !important; background:#fff; opacity:0; box-shadow:0 5px 5px rgba(0,0,0,0.05); visibility:hidden }
#wrap.menuIco #gnb .inner .depth01 > li > a:hover span { opacity:1; visibility:inherit; transition:opacity 0.2s; -webkit-transition:opacity 0.2s; -moz-transition:opacity 0.2s }
#wrap.menuIco #gnb .btnMenu { transform:rotate(180deg); -webkit-transform:rotate(180deg); -moz-transform:rotate(180deg) }
#wrap.menuIco #gnb .copy { display: none; }
/* CONTAINER */
#container {
    padding:0 20px 10px;
}
#container .contents { position:relative }
#container .contents h2 { margin-bottom:16px; line-height:25px; font-size:18px; font-weight:700; color:#000 }
#container .contents .location { position:absolute; top:0; right:0 }
#container .contents .location:after { display:block; content:""; clear:both }
#container .contents .location li { line-height:25px; font-size:12px; color:#666; float:left }
#container .contents .location li + li:before { display:inline-block; content:">"; width:45px; text-align:center; vertical-align:top; font-family:Dotum, Arial, sans-serif; color:#aaa }
#container .contents .location li:last-child { font-weight:500; color:#0080c6 }
#container .contents .contWrap { display:flex; flex-direction:row; flex-wrap:wrap; margin: -5px -15px 0 }
#container .contents .contWrap .cont { display:flex; flex-direction:column; flex:1; flex-shrink:1; margin:5px; padding:5px 10px; border-radius:10px; min-width:0; background:#fff; box-shadow:0 0 16px rgba(206, 206, 206, 0.08) }
#container .contents .contWrap .cont.col1 { max-width:calc(37% - 10px); min-width:calc(37% - 10px) }
#container .contents .contWrap .cont.col2 { max-width:calc(63% - 10px); min-width:calc(63% - 10px) }
#container .contents .contWrap .cont.col3 { max-width:calc(100% - 10px); min-width:calc(100% - 10px) }
#container .contents .contWrap + .contWrap { margin-top:15px }