@charset "utf-8";
/* header,footer 스타일 */

/* ############### header ############### */
header { z-index: 200; width: 100%; height: 170px; transition: 0.3s; background-color: rgba(9, 10, 125, 0.8); position: fixed; top: 0; left: 0; color: #ffffff; }
header > .center_inner { padding-top: 20px; display: flex; justify-content: space-between; align-items: flex-end; }
header:hover { height: 320px; transition: 0.3s; }

/* mobile */
header .mobile_menu_btn { display: none; }
header .mobile_nav_close_btn { display: none; }

/* text style */
header a { color: #ffffff; }
header a:hover { color: #ffffff; }

/* logo */
header .main_logo { width: 40%; position: relative; top: 15px; display:flex;justify-content: center;align-content: center;}
header .main_logo > a > img { width: 90%; }

/* nav */
header nav { width: 100%; padding-left: 4%; display: flex; flex-direction: column; }

/* login_nav_bar */
header nav .login_nav_bar { margin-bottom: 50px; font-size: 13px; font-weight: 400;}
header nav .login_nav_bar > ul { display: flex; justify-content: flex-end; }
header nav .login_nav_bar > ul > li > a { display: flex; align-items: center; }
header nav .login_nav_bar > ul > li > a::after { content: ""; width: 1px; height: 10px; margin: 0 8px; background-color: #ffffff; }
header nav .login_nav_bar > ul > li:last-child > a::after { display: none; }

/* GNB */
header nav .GNB { display: flex; justify-content: space-between; }
header nav .GNB > div { position: relative; display: flex; flex-direction: column; align-items: center;}
header nav .GNB_main { font-weight: 500; cursor: pointer; }
header nav .GNB_sub { width: 160px; display: none; font-weight: 300; font-size: 14px; text-align: center; position: absolute; top: 180%; left: 50%; transform: translate(-50%,0); }
header:hover .GNB_sub { display: block; }
header nav .GNB_sub > li a { display: block; padding: 5px 10px; }
header nav .GNB_sub > li a:hover { color: #c2c2c2; }



/* ############### footer ############### */
footer { width: 100%; font-size: 14px; color: #ffffff; background-color: #2b2b2b; }
footer > .center_inner { padding: 40px 0 30px 0; display: flex; justify-content: space-between; align-items: center; }

/* f_info_wrap */
footer .f_info_wrap .title { margin-bottom: 15px; font-size: 15px; font-weight: bold; color: #6ab6ed; }
footer .f_info_wrap ul { display: flex; }
footer .f_info_wrap ul > li { margin-right: 10px; }
footer .f_info_wrap .info { margin-bottom: 5px; display: flex; align-items: center; }
footer .f_info_wrap .info img { width: 20px; margin-right: 8px; }
footer .f_info_wrap .info a { display: flex; align-items: center; color: #5fbdef; text-decoration: underline; }
footer .f_info_wrap .copyright { margin-top: 10px; }

/* f_sns_wrap */
footer .f_sns_wrap ul { display: flex; }
footer .f_sns_wrap ul > li { width: 50px; margin: 0 5px; }
footer .f_sns_wrap ul > li img { width: 100%; }



@media all and (max-width:1200px) {
    /* ############### header ############### */
    header { height: 100px; }
    header > .center_inner { height: 100%; padding: 0; align-items: center; }
    header:hover { height: 100px; }
    header:hover .GNB_sub { display: none; }

    /* mobile */
    header .mobile_menu_btn { width: 35px; display: block; cursor: pointer; }
    header .mobile_menu_btn > img { width: 100%; }
    header .mobile_nav_close_btn { width: 25px; margin: 10px; display: block; cursor: pointer; }
    header .mobile_nav_close_btn > img { width: 100%; }

    /* logo */
    header .main_logo { width: 250px; position: relative; top: 5px;}

    /* nav */
    header nav { z-index: 401; opacity: 0; visibility: hidden; transition: 0.5s;  width: 300px; height: 100%; max-height: 100%; overflow-y: scroll; padding: 0; background-color: #1d68c6; position: fixed; top: 0; right: 0; }
    header nav.on { opacity: 1; visibility: inherit; transition: 0.5s; }
    
    /* login_nav_bar */
    header nav .login_nav_bar { margin: 0 0 20px 0; }
    header nav .login_nav_bar ul { flex-direction: column; align-items: flex-end; }
    header nav .login_nav_bar ul > li > a { padding: 3px 20px 3px 20px; }
    header nav .login_nav_bar > ul > li > a::after { display: none; }
    
    /* GNB */
    header nav .GNB { flex-direction: column; justify-content: center; }
    header nav .GNB > div { width: 100%; align-items: flex-start; }
    header nav .GNB > div .GNB_main { padding: 10px 10px; }
    header nav .GNB_sub { display: none; background-color: rgba(255, 255, 255, 0.3); width: 100%; position: relative; top: 0; left: 0; transform: translate(0,0); text-align: left; }
    header nav .GNB_sub li { width: 100%; }
    header nav .GNB_sub li a { width: 100%; padding: 10px 15px; display: block; }
    header nav .GNB_sub.on { display: block; }
    


    /* ############### footer ############### */
    footer { font-size: 13px; }
    footer > .center_inner { flex-direction: column; justify-content: flex-start; align-items: flex-start; }
    
    /* f_info_wrap */
    footer .f_info_wrap { margin-bottom: 20px; }
    footer .f_info_wrap .title { font-size: 13px;}

    /* f_sns_wrap */
    footer .f_sns_wrap ul > li { width: 40px; }

}

@media all and (max-width:620px) {
    /* ############### header ############### */
    header { height: 90px; }
    header:hover { height: 90px; }

    /* mobile */
    header .mobile_menu_btn { width: 28px; }

    /* logo */
    header .main_logo { width: 110px; }
    header .main_logo img { width: 100%; }



    /* ############### footer ############### */
    footer { font-size: 11px; }

    /* f_info_wrap */
    footer .f_info_wrap ul { flex-direction: column; }
    footer .f_info_wrap .copyright { font-size: 10px; }

    /* f_sns_wrap */
    footer .f_sns_wrap ul > li { width: 30px; }

}