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

body {max-width: 640px;margin: 0 auto !important;}
/* ############### header ############### */

header { z-index: 200; width: 100%; height: 170px; transition: 0.3s; background-color:#ffffff; position: absolute; top: 0; left: 0; color: #222222; }
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: #222222; }
header a:hover { color: #222222; }

/* logo */
header .main_logo { width: 160px; position: relative; top: 15px;}
header .main_logo > img { width: 100%; }

/* nav */
header nav { width: 100%; padding-left: 20%; 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; }

  /* ############### header # 1200꺼 위로 꺼내놓음############## */
    header { height: 100px;background: none; max-width: 640px;margin: 0 auto;left:50%;transform:translate(-50%, 0);padding: 0 40px !important;}
    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: 160px; position: relative; top: 5px;}

    /* nav */
    header nav { z-index: 401; opacity: 0; visibility: hidden; transition: 0.5s;  width: 300px; height: 100vh; max-height: 100vh; overflow-y: scroll; padding: 0; background-color: #ffffff; 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 {  align-items: flex-end; flex-wrap: wrap; gap: 10px; justify-content: center;padding: 0 10px;}
    header nav .login_nav_bar ul > li {width: calc((100% - 20px) / 3);}
    header nav .login_nav_bar ul > li > a { padding: 3px 10px; color: #74A4D6; border: 1px solid #74A4D6;border-radius: 50px; display: flex;justify-content: center;}
    header nav .login_nav_bar > ul > li > a::after { display: none; }
    
    /* GNB */
    /* header nav .GNB { flex-direction: column; justify-content: center; } */
    header nav .GNB { flex-direction: column; justify-content: center; }
    header nav .GNB > div { width: 100%; align-items: flex-start;  margin: 0 0 20px 0;}
    header nav .GNB > div .GNB_main { padding: 10px 10px 0 25px; }
    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 0 25px; display: block; }
    header nav .GNB_sub.on { display: block; }
    .LNB {display: none;}
    .mobile_nav_mobal_bak.on {height:100vh}

    
   .SHbtn {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 6;
    -moz-border-radius: 6;
    border-radius: 6px;
    font-family: 'Noto Sans KR', sans-serif;
    color: #ffffff;
    font-size: 10px;
    padding: 5px;
    text-decoration: none;display:block;width:100%;text-align: center;
}



/* ############### 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%; }


.modal_wrap {position:fixed;top:0;left:0;background: rgba(0,0,0,0.4);width: 100%;height:100vh;display: none;z-index: 999999;}
.modal_wrap .modal {width: 640px;max-height:860px;top:50%;left:50%;transform: translate(-50%, -50%);background: #fff;position: absolute;padding:60px 40px;max-height:640px;
    overflow-y: scroll;  max-width: 100%;}
.modal_wrap .modal .modal_close {position: absolute;top:0;right:0;cursor: pointer;}
.modal_wrap .modal .modal_close img {width: 76px;}
.modal_wrap .modal h3.title {margin: 0 0 30px;}
.modal_wrap .modal .flexbox {display: flex; flex-direction: column;}
.modal_wrap .modal .flexbox > div {width: 100%;text-align: justify;word-break: keep-all;font-size: 16px;line-height: 34px;}
.modal_wrap .modal .flexbox > div ul.long {font-size: 15px;}
.modal_wrap .modal .flexbox > div:first-child {padding: 0 40px 0 0;border-right: 1px solid #ddd;box-sizing: border-box;}
.modal_wrap .modal .flexbox > div:last-child {box-sizing: border-box;}
.modal_wrap .modal .session_intro {display: none;}
.modal_wrap .modal .spk {display: none;}
.modal_wrap .modal .spk_img {display: flex;justify-content: center;}
.modal_wrap .modal .spk_img img {max-width: 100%;border-radius: 200px;}
.modal_wrap .modal .spk .flexbox .spk_img {margin: 0 0 20px;}
.modal_wrap .modal .spk .flexbox .spk_cv {}
.modal_wrap .modal .spk .flexbox .spk_cv h5 {font-size: 20px;font-weight: 800;color: #111;margin: 0 0 10px;text-align: left;}
.modal_wrap .modal .spk .flexbox .spk_cv p {font-size: 16px;;height: 1.5;margin: 0;}
.modal_wrap .modal .spk .flexbox .spk_cv ul {padding:0 0 0 20px;margin: 0;}
.modal_wrap .modal .spk .flexbox .spk_cv ul li {list-style: disc;}
.modal_wrap .modal .spk .flexbox .spk_cv .title {background: none;padding: 0;text-align: center;}
.modal_wrap .modal .spk .flexbox .spk_cv .title span {font-size: 18px;color: #9e9e9e;display: block;}
.modal_wrap .modal .spk .flexbox .spk_cv > div {padding: 0 30px;width: 100%;background: #f2f2f2;box-sizing: border-box;}
.modal_wrap .modal .spk .flexbox .spk_cv .cv_box {border-bottom: 1px solid #ddd;padding: 30px 0;}
.modal_wrap .modal .spk .flexbox .spk_cv .cv_box:last-child{border-bottom: none;}
.modal_wrap .modal .spk .flexbox div:first-child {padding: 0;border-right: none;}
.modal_wrap .modal .spk .inner_list {list-style: disc;}



@media all and (max-width:1200px) {
    /* ############### header ############### */
    header { height: 100px;background: none; }
    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: 160px; position: relative; top: 5px;}

    /* nav */
    header nav { z-index: 401; opacity: 0; visibility: hidden; transition: 0.5s;  width: 300px; height: 100vh; max-height: 100vh; overflow-y: scroll; padding: 0; background-color: #ffffff; 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 {  align-items: flex-end; flex-wrap: wrap; gap: 10px; justify-content: center;padding: 0 10px;}
    header nav .login_nav_bar ul > li {width: calc((100% - 20px) / 3);}
    header nav .login_nav_bar ul > li > a { padding: 3px 10px; color: #74A4D6; border: 1px solid #74A4D6;border-radius: 50px; display: flex;justify-content: center;}
    header nav .login_nav_bar > ul > li > a::after { display: none; }
    
    /* GNB */
    /* header nav .GNB { flex-direction: column; justify-content: center; } */
    header nav .GNB { flex-direction: column; justify-content: center; }
    header nav .GNB > div { width: 100%; align-items: flex-start;  margin: 0 0 20px 0;}
    header nav .GNB > div .GNB_main { padding: 10px 10px 0 25px; }
    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 0 25px; display: block; }
    header nav .GNB_sub.on { display: block; }
    .LNB {display: none;}


    /* ############### 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 screen and (max-width:640px) {
    /* ############### header ############### */
    header { height: 90px;  position: absolute; }
    header:hover { height: 90px; }

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

    /* logo */
    header .main_logo { width: 160px; }
    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; }

    .table_wrap {width: 640px; overflow-x: scroll;}





}