@charset "utf-8";

/* header */
header {
	z-index:1000;
	height:102px;
	border-bottom:0 none;
}
.header_fixed .gnb {
    box-shadow:0px 10px 15px -6px rgba(0, 0, 0, 0.2);
}
header .gnb {
    position:relative;
    position:fixed;
    left:0;
    top:0;
    z-index:1000;
    width:100%;
    height:102px;
    border-bottom:1px solid #F3F3F3;
    background-color:#FFFFFF;
}
header .gnb .inner {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:1795px;
    height:100%;
    padding:0 15px;
    margin:0 auto;
    box-sizing:border-box;
    background-color:#FFFFFF;
}
header .gnb .inner h1 a {
    display:inline-block;
    width:100%;
    max-width:120px;
    height:100%;
}
header .gnb .inner h1 a img {
    display:block;
}
header .gnb .inner .main_menu {
    width:calc(100% - 335px);
    max-width:1250px;
    height:100%;
}
header .gnb .inner .main_menu .bg_main_menu {
    position:absolute;
    left:0;
    top:-100%;
    z-index:-1;
    width:100%;
    height:100%;
    min-height:0;
    background-color:#F2F6FF;
    opacity:0;
}
header .gnb.on .inner .main_menu .bg_main_menu {
    animation-duration:1s;
    animation-fill-mode:both;
    animation-name:fadeInDown;
    animation-timing-function:ease;
    transition:0.3s all ease-in-out;
}
@keyframes fadeInDown {
    0% {
        opacity: 0;
        top:-100%;
        min-height:0;
    }
    100% {
        opacity: 1;
        top:102px;
        min-height:360px;
    }
}
header .gnb.off .inner .main_menu .bg_main_menu {
    animation-duration:1s;
    animation-fill-mode:both;
    animation-name:fadeInUp;
    animation-timing-function:ease;
    transition:0.5s all ease-in-out;
}
@keyframes fadeInUp {
    0% {
        opacity: 1;
        top:102px;
        min-height:360px;
    }
    100% {
        opacity: 0;
        top:-100%;
        min-height:0;
    }
}
header .gnb .inner .main_menu .flex {
    align-items:center;
    justify-content:center;
    gap:15px;
    width:100%;
    height:100%;
}
header .gnb .inner .flex li {
    position:relative;
    flex:1;
    width:100%;
    height:100%;
    text-align:center;
}
header .gnb .inner .flex > li > a {
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-weight:bold;
    font-size:23px;
    background-color:#FFFFFF;
    overflow:hidden;
}
header .gnb .inner .flex li .sub_menu {
    position:absolute;
    z-index:-1;
    width:100%;
    padding:20px 0;
    overflow:hidden;
    transform: translateY(-100%);
    opacity:0;
}
header .gnb.on .inner .flex li .sub_menu {
    animation-duration:1s;
    animation-fill-mode:both;
    animation-name:fadeInDown2;
    animation-timing-function:ease;
    transition:0.5s all ease-in-out;
}
@keyframes fadeInDown2 {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
header .gnb.off .inner .flex li .sub_menu {
    animation-duration:0.7s;
    animation-fill-mode:both;
    animation-name:fadeInUp2;
    animation-timing-function:ease;
    transition:0.3s all ease-in-out;
}
@keyframes fadeInUp2 {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-100%);
    }
}
header .gnb .inner .flex li .sub_menu li a {
    display:block;
    padding:10px 0;
    text-align:center;
    font-weight:600;
    font-size:16px;
    line-height:1.6;
    letter-spacing:-0.4px;
    color:#2D2D2D;
}
header .gnb .inner .side_menu {
    display:flex;
    gap:25px;
}
header .gnb .inner .side_menu a {
    display:inline-block;
    width:35px;
    height:35px;
}
header .gnb .inner .side_menu a.btn_search {
    background:url(/images/egovframework/skydesign/contents/layout/icon_search.png) no-repeat 50% 50%;
    background-size:100%;
}
header .search_on .inner .side_menu a.btn_search {
    background:url(/images/egovframework/skydesign/contents/layout/icon_close.png) no-repeat 50% 50%;
    background-size:100%;
}
header .gnb .inner .side_menu a.btn_login {
    background:url(/images/egovframework/skydesign/contents/layout/icon_login.png) no-repeat 50% 50%;
    background-size:100%;
}
header .gnb .inner .side_menu a.btn_gnb {
    background:url(/images/egovframework/skydesign/contents/layout/icon_menu.png) no-repeat 50% 50%;
    background-size:100%;
}
header .gnb .header_search .box {
    position:absolute;
    left:0;
    top:calc(0% - 161px);
    z-index:-1;
    width:100%;
    padding:50px 0;
    background-color:#FFFFFF;
}
header .gnb.search_on .header_search .box {
    animation-duration:0.7s;
    animation-fill-mode:both;
    animation-name:fadeInDown3;
    animation-timing-function:ease;
    transition:0.5s all ease-in-out;
}
@keyframes fadeInDown3 {
    0% {
        opacity: 0;
        top:calc(0% - 161px);
    }
    100% {
        opacity: 1;
        top:102px;
    }
}
header .gnb.search_off .header_search .box {
    animation-duration:0.7s;
    animation-fill-mode:both;
    animation-name:fadeInUp3;
    animation-timing-function:ease;
    transition:0.5s all ease-in-out;
}
@keyframes fadeInUp3 {
    0% {
        opacity: 1;
        top:102px;
    }
    100% {
        opacity: 0;
        top:calc(0% - 161px);
    }
}
header .gnb .header_search .box .inner {
    position:relative;
    width:100%;
    max-width:1320px;
    padding:0 15px;
    margin:0 auto;
    box-sizing:border-box;
}
header .gnb .header_search .box .inner input {
    width:100%;
    padding:15px 40px 15px 0;
    border:0 none;
    border-bottom:2px solid #000000;
    border-radius:0;
    font-size:25px;
}
header .gnb .header_search .box .inner input::placeholder {
    font-weight:bold;
    color:#ABABAB;
}
header .gnb .header_search .box .inner button {
    position:absolute;
    right:15px;
    bottom:15px;
    display:block;
    width:40px;
    height:40px;
    background:url(/images/egovframework/skydesign/contents/layout/icon_search2.png) no-repeat 50% 50%;
    background-size:80%;
}
main::before {
    position:absolute;
    left:0;
    top:0;
    z-index:-1;
    content:'';
    width:100%;
    height:100%;
    opacity:0;
    background-color:transparent;
}
main.bg_transparent::before {
    animation-duration:0.7s;
    animation-fill-mode:both;
    animation-name:fadeOut;
    animation-timing-function:ease;
    transition:0.5s all ease-in-out;
}
@keyframes fadeOut {
    0% {
        z-index:10;
        opacity: 1;
        background-color:rgba(0, 0, 0, 0.5);
    }
    100% {
        z-index:-1;
        opacity: 0;
        background-color:transparent;
    }
}
main.bg_black::before {
    animation-duration:0.7s;
    animation-fill-mode:both;
    animation-name:fadeIn;
    animation-timing-function:ease;
    transition:0.5s all ease-in-out;
}
@keyframes fadeIn {
    0% {
        z-index:-1;
        opacity: 0;
        background-color:transparent;
    }
    100% {
        z-index:10;
        opacity: 1;
        background-color:rgba(0, 0, 0, 0.5);
    }
}
#gnb_all {
    display:none;
    position:fixed;
    right:0;
    top:0;
    z-index:1000;
    width:100%;
    min-width:100vw;
    height:100%;
    min-height:100vh;
    background:url(/images/egovframework/skydesign/contents/layout/bg_gnb.png) no-repeat 50% 50%;
    background-size:cover;
    background-color:#FFFFFF;
    overflow:auto;
}
#gnb_all .btn_close {
    position:absolute;
    right:0;
    top:0;
    width:40px;
    height:40px;
    border-radius:0;
    background:url(/images/egovframework/skydesign/contents/layout/icon_close.png) no-repeat 50% 50%;
    background-size:100%;
    background-color:#2D59ED;
}
#gnb_all .flex {
    width:100%;
    height:100%;
}
#gnb_all .flex > li {
    flex:1;
    padding:80px 50px;
    border-right:2px solid #D7DBDF;
    transition:0.7s;
}
#gnb_all .flex > li:last-child {
    border-right:0 none;
}
#gnb_all .flex > li:hover {
    background-color:#F2F6FF;
}
#gnb_all .flex > li > a {
    display:inline-block;
    width:100%;
    margin-bottom:30px;
    font-weight:bold;
    font-size:30px;
}
#gnb_all .flex li .sub_menu li {
    margin-bottom:30px;
}
#gnb_all .flex li .sub_menu li:last-child {
    margin-bottom:0;
}
#gnb_all .flex li .sub_menu li a {
    display:inline-block;
    width:100%;
    height:100%;
    font-weight:600;
    font-size:20px;
    color:#1D1D1D;
    transition:0.3s;
}
#gnb_all .flex li .sub_menu li:hover a {
    text-decoration:underline;
    color:#2D59ED;
}
#gnb_all .flex li .sub_menu .depth_menu {
    display:none;
}

/* footer */
footer .footer_nav {
    padding:15px 0;
    background-color:#133597;
    color:#FFFFFF;
}
footer .footer_nav .inner {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:0 15px;
    box-sizing:border-box;
}
footer .footer_nav .inner .flex li {
    margin-right:30px;
}
footer .footer_nav .inner .flex li a {
    display:inline-block;
    width:100%;
    height:100%;
    color:#FFFFFF;
    font-size:18px;
    letter-spacing:-0.2px;
}
footer .footer_nav .inner .flex li:last-child a {
    color:#3BEDED
}
footer .footer_nav .inner .family_site {
    position:relative;
    width:100%;
    max-width:240px;
}
footer .footer_nav .inner .family_site p {
    padding:15px;
    border-radius:5px;
    font-size:18px;
    letter-spacing:-0.4px;
    cursor:pointer;
    background-color:#041D45;
    color:#FFFFFF;
}
footer .footer_nav .inner .family_site p::after {
    position:absolute;
    right:15px;
    bottom:26px;
    content:'';
    display:inline-block;
    width:14px;
    height:8px;
    background:url(/images/egovframework/skydesign/contents/layout/icon_up.png) no-repeat 50% 50%;
    background-size:100%;
    transition:0.5s;
}
footer .footer_nav .inner .family_site.on p::after {
    transform:rotate(180deg);
} 
footer .footer_nav .inner .family_site ul {
    display:none;
    position:absolute;
    left:0;
    bottom:100%;
    z-index:10;
    width:100%;
    border:1px solid #404040;
    border-radius:10px;
    background-color:#FFFFFF;
    overflow:hidden;
}
footer .footer_nav .inner .family_site.on ul {
    display:block;
}
footer .footer_nav .inner .family_site ul li a {
    display:inline-block;
    width:100%;
    height:100%;
    padding:12px 15px;
}
footer .footer_nav .inner .family_site ul li:hover a {
    background-color:#F2F6FF;
} 
footer .footer_info {
    padding:30px 0 50px;
}
footer .footer_info .inner {
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    width:100%;
    max-width:1440px;
    margin:0 auto;
    padding:0 15px;
    box-sizing:border-box;
}
footer .footer_info .inner > div {
    width:calc(50% - 15px);
}
footer .footer_info .inner > div > a > img {
    display:block;
    width:auto;
    height:48px;
}
footer .footer_info .inner > div ul {
    display:flex;
    flex-wrap:wrap;
    align-self:center;
    margin:10px 0;
}
footer .footer_info .inner > div ul li {
    margin-right:20px;
    font-weight:bold;
    color:#555555;
}
footer .footer_info .inner > div ul li:last-child {
    margin-right:0;
}
footer .footer_info .inner > div ul li::after {
	display:none;
}
footer .footer_info .inner > div ul li dl {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
}
footer .footer_info .inner > div ul li dl dt {
    margin-right:5px;
    color:#808080;
}
footer .footer_info .inner > div ul li dl dd a {
    color:#555555;
}
footer .footer_info .inner > div .copy {
    color:#808080;
}
@media screen and (max-width:1890px) {
    /* header */
    #gnb_all .flex > li {
        padding:80px 30px;
    }
}
@media screen and (max-width:1600px) {
    /* header */
    #gnb_all .flex > li {
        padding:60px 15px;
    }
}
@media screen and (max-width:1440px) {
    /* header */
    header .gnb .inner .flex > li > a {
        font-size:21px;
    }
    header .gnb .inner .main_menu .flex {
        gap:10px;
    }
    #gnb_all .flex {
        width:100%;
        height:100%;
    }
    #gnb_all .flex > li {
        flex:0 1 calc(100% / 4);
        padding:80px 50px;
        border-bottom:2px solid #D7DBDF;
    }
    #gnb_all .flex > li:last-child {
        border-right:2px solid #D7DBDF;
    }
    #gnb_all .flex > li:nth-child(n+5) {
        border-bottom:0 none;
    }
}
@media screen and (max-width:1200px) {
    /* header */
    header .gnb .inner .main_menu {
        display:none;
    }
    #gnb_all .flex > li {
        padding:50px 30px;
    }
}
@media screen and (max-width:992px) {
    /* header */
    #gnb_all .flex > li {
        padding:30px 15px;
    }
    #gnb_all .flex > li > a {
        margin-bottom:15px;
        font-size:25px;
    }
    #gnb_all .flex li .sub_menu li {
        margin-bottom: 15px;
    }
    #gnb_all .flex li .sub_menu li a {
        font-size: 18px;
    }
    
    /* footer */
    footer .footer_info .inner {
        gap:15px;
    }
    footer .footer_info .inner > div {
        width:calc(50% - 7.5px);
    }
}
@media screen and (max-width:768px) {
    /* header */
	header {
		height:61px;
	}
    header .gnb {
        height:61px;
    }
    header .gnb .inner h1 a {
        max-width:88px;
    }
    header .gnb .inner .side_menu {
        gap:15px;
    }
    header .gnb .inner .side_menu a {
        width:30px;
        height:30px;
    }
    header .gnb .header_search .box {
        top:calc(0% - 100px);
        padding:30px 0;
    }
    header .gnb.search_on .header_search .box {
        animation-duration:0.7s;
        animation-fill-mode:both;
        animation-name:fadeInDown4;
        animation-timing-function:ease;
        transition:0.5s all ease-in-out;
    }
    @keyframes fadeInDown4 {
        0% {
            opacity: 0;
            top:calc(0% - 100px);
        }
        100% {
            opacity: 1;
            top:61px;
        }
    }
    header .gnb.search_off .header_search .box {
        animation-duration:0.7s;
        animation-fill-mode:both;
        animation-name:fadeInUp4;
        animation-timing-function:ease;
        transition:0.5s all ease-in-out;
    }
    @keyframes fadeInUp4 {
        0% {
            opacity: 1;
            top:61px;
        }
        100% {
            opacity: 0;
            top:calc(0% - 100px);
        }
    }
    header .gnb .header_search .box .inner input {
        padding:10px 30px 10px 0;
        font-size:16px;
    }
    header .gnb .header_search .box .inner button {
        bottom:5px;
        width:30px;
        height:30px;
    }
    #gnb_all.gnb_mobile {
        left:0;
        background:none;
        background-color:#FFFFFF;
    }
    #gnb_all.gnb_mobile h2 {
        position:static;
        width:100% !important;
        height:60px;
        line-height:60px;
        clip-path:none;
        text-align:center;
        font-weight:bold;
        font-size:18px;
        background-color:#2D59ED;
        color:#FFFFFF;
    }
    #gnb_all.gnb_mobile .btn_close {
        right:10px;
        top:10px;
    }
    #gnb_all.gnb_mobile .flex {
        display:block;
        width:100%;
        max-width:120px;
        height:calc(100vh - 60px);
        background-color:#F2F2F2;
    }
    #gnb_all.gnb_mobile .flex > li {
        width:100%;
        padding:0;
        border:0 none;
    }
    #gnb_all.gnb_mobile .flex > li:last-child {
        border:0 none;
    }
    #gnb_all.gnb_mobile .flex > li:hover {
        background-color: #F2F2F2;
    }
    #gnb_all.gnb_mobile .flex > li > a {
        display:block;
        padding:15px;
        margin-bottom:0;
        font-weight:normal;
        font-size:16px;
        box-sizing:border-box;
    }
    #gnb_all .flex li .sub_menu li:hover a {
        text-decoration:none;
        color: #1D1D1D;
    }
    #gnb_all.gnb_mobile .flex > li.on > a {
        background-color:#FFFFFF;
        color:#2D59ED;
        font-weight:bold;
    }
    #gnb_all.gnb_mobile .flex li .sub_menu {
        display:none;
        position:absolute;
        left:120px;
        top:60px;
        width:calc(100% - 120px);
        height:calc(100% - 60px);
        padding:0 15px 15px 15px;
        background-color:#FFFFFF;
        box-sizing:border-box;
        overflow:auto;
    }
    #gnb_all.gnb_mobile .flex li.on .sub_menu {
        display:block;
    }
    #gnb_all.gnb_mobile .flex li .sub_menu li {
        margin-bottom:0;
        border-bottom:1px solid #D7DBDF;
    }
    #gnb_all.gnb_mobile .flex li .sub_menu li:last-child {
        border-bottom:0 none;
    }
    #gnb_all.gnb_mobile .flex li .sub_menu li a {
        padding:15px;
        font-weight:normal;
        font-size:15px;
        box-sizing:border-box;
    }
    #gnb_all .flex li .sub_menu .depth_menu {
        display:block;
        border-top:1px solid #D7DBDF;
        background-color:#F2F2F2;
    }
    #gnb_all .flex li .sub_menu .depth_menu li {
        border-bottom:0 none;
    }
    #gnb_all.gnb_mobile .flex li .sub_menu .depth_menu li a {
        padding:10px 30px;
        color:#777777;
    }
    
    /* footer */
    footer .footer_nav .inner .flex li a {
        font-size:13px;
    }
    footer .footer_nav .inner .family_site p {
        padding:10px 15px;
        font-size:13px;
    }
    footer .footer_nav .inner .family_site p::after {
        bottom:18px;
    }
    footer .footer_info .inner {
        display:block;
    }
    footer .footer_info .inner > div {
        width:100%;
    }
    footer .footer_info .inner .molit {
        margin-bottom:30px;
    } 
    footer .footer_info .inner > div > a > img {
        height:28px;
    }
    footer .footer_info .inner > div ul {
        display:block;
    }
    footer .footer_info .inner > div ul li {
        margin-right:0;
        font-size:13px;
        letter-spacing:-0.2px;
    }
    footer .footer_info .inner > div ul li:last-child {
        margin-top:10px;
    }
    footer .footer_info .inner > div .copy {
        font-size:12px;
    }
}
@media (min-width: 0px) and (max-width: 757px) {
    .footer_info div > a {
        display:block;
    }
}
@media screen and (max-width:576px) {
     /* header */
    header .gnb .header_search .box {
        padding:15px 0;
    }
    
    /* footer */
    footer .footer_nav .inner .family_site {
        max-width:100%;
        margin-top:10px;
    }
}