@charset "utf-8";
/* CSS Document */

/* 마우스 오버시 나타나는 메뉴 */
.nav_ov{display:block; position:fixed; left:110px; width:160px; padding:10px 20px 20px 20px; background:#ebebeb; 
	border:2px solid #818181 ;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; 
	text-align:left; overflow:hidden; z-index:1900;}
.nav_ov h2{width:130px; padding:0 0 10px 0; margin:0; 
	font-family:'Nanum Gothic', sans-serif; font-weight:700; font-size:16px; color:#0099cc;}
.nav_ov .mm_in li{width:160px; height:26px; padding:0 10px; margin-bottom:4px; line-height:2.3em; background:#fff; vertical-align:middle;
	-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;}
.btn_close{display:inline-block; position:absolute; top:10px; right:10px; padding:0; margin:0; width:37px; height:20px; z-index:1100;}
.nav_ov .mm_in a:hover{color:#666; font-weight:bold; text-decoration:none;}
.menu_mymenu{top:140px;}
.menu_mypage{top:213px;}
.menu_mymenu h3{margin:14px 0 3px 0;}

/* 네비게이션 */
#nav_area{position:fixed; top:0; left:0; width:110px; height:100%; background:#ebebeb; z-index:1000; vertical-align:top;}
#nav_area ul.nav{width:110px; padding:5px 0 0 0;}
#nav_area ul.nav li.mm{width:110px; height:70px; padding:0; margin:0;}
#nav_area ul.nav li.mm > a{display:block; width:110px; height:70px; padding:0; margin:0; overflow:hidden; text-align:center; background:url(../image/nav_quick.png) no-repeat; text-indent:-99999em;}
#nav_area ul.nav li.nav_favorite > a{background-position:0 0;}
#nav_area ul.nav li.nav_mypage > a{background-position:0 -70px;}
#nav_area ul.nav li.nav_check > a{background-position:0 -140px;}
#nav_area ul.nav li.nav_sms > a{background-position:0 -210px;}
#nav_area ul.nav li.nav_management > a{background-position:0 -280px;}
#nav_area ul.nav li.nav_homepage > a{background-position:0 -350px;}
#nav_area ul.nav li.nav_smartchul > a{background-position:0 -420px;}

#nav_area ul.nav li.nav_favorite > a:hover{background-position:-110px 0;}
#nav_area ul.nav li.nav_mypage > a:hover{background-position:-110px -70px;}
#nav_area ul.nav li.nav_check > a:hover{background-position:-110px -140px;}
#nav_area ul.nav li.nav_sms > a:hover{background-position:-110px -210px;}
#nav_area ul.nav li.nav_management > a:hover{background-position:-110px -280px;}
#nav_area ul.nav li.nav_homepage > a:hover{background-position:-110px -350px;}
#nav_area ul.nav li.nav_smartchul > a:hover{background-position:-110px -420px;}

/* 전체 Layout */
/* 전체영역 */
body{background:url(../image/bg_body.png) repeat-x;}
body.nobg{background:none !important;}
#wrap {width:1090px; min-width:1090px; margin:0 auto; padding:0 0 0 130px; vertical-align:top;}
/* header */
#header{position:relative; width:1080px; padding:0; vertical-align:top;}
.top_area{width:1080px; height:50px; margin:0 0 20px 0;  vertical-align:top;}
.top_area h1{float:left; width:148px; height:48px;}
/* path_nav */
.path_nav{position:absolute; top:0; left:140px; display:block; height:30px; padding:10px 20px; overflow:hidden; z-index:180;}
.path_nav .cate{display:inline-block; vertical-align:top; font-size:12px; line-height:16px; font-family:'맑은 고딕','Gothic', san-serif; padding:7px 0; letter-spacing:-0.01em; color:#999;}
    .path_nav .cate .now {
        color: #2D6EB0;
        font-size: 16px;
        line-height: 16px;
        font-weight: 700;
        vertical-align: top;
    }

/* container */
#container{clear:both; width:1080px; margin:20px 0 0 0; padding:0; vertical-align:top; overflow:hidden;}
/* Footer */
#footer{clear:both; width:1080px; margin:35px 70px 10px 0px; }
.foot_util{background:#e2e2e2; height:20px; border-radius:2px; padding:5px 20px; line-height:10px;}
.foot_util .line{display:inline-block; width:17px; height:20px; background:url(../image/foot_side.png) no-repeat 8px 0;}
.foot_area{padding:17px 20px 10px 19px ;background:#e2e2e2; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; /* border-top: 2px solid #ccc; */  font-size:11px; line-height:1.4em; color:#666;}


/* 학생검색 */
.search_stud{position:absolute; top:55px; right:0; width:800px; border:1px solid #666; background:#eaeaea; overflow:hidden; text-align:center;}
.bg_tb{width:774px; margin:15px auto; background:#fff; text-align:center; overflow:hidden;}

/* 상단 회원-로그인 로그아웃 */
.top_area .member{position:absolute; top:0; right:10px; display:inline-block; width:600px; margin:12px 0; padding:5px 0; vertical-align:top; overflow:hidden; text-align:right; color:#333;}
.top_area .m_wide{width:800px;}
.top_area .member .img_id{display:inline-block; padding:0;}
.top_area .member .img_pw{display:inline-block; padding:0 0 0 7px;}
.top_area .member .m_name{display:inline-block; vertical-align:top; font-weight:bold; padding:0 10px 0 0;}
.top_area .member .message{display:inline-block; height:21px; padding:0 10px 0 19px; background:url(../image/ic_message.png) no-repeat 0 3px; letter-spacing:-0.04em; vertical-align:top;}
.top_area .member a{display:inline-block; vertical-align:top;}
.top_area .member select{display:inline-block; height:19px; padding:0px 2px;}
.top_area .member input{display:inline-block; width:90px; height:17px; padding:0px 2px; margin:0 3px; line-height:1em; border:1px solid #ccc; overflow:hidden; vertical-align:top;}


.btn{ display:inline-block; margin:0 3px; vertical-align:middle;}
.bt_block{display:block; margin:2px auto;}
.btns a{display:inline-block; margin:0 2px; vertical-align:middle;}
.btn_s, a.btn_s{display:inline-block; margin:0 3px; padding:3px 4px 2px 4px; border:1px solid #39f; color:#39f; font-weight:bold; line-height:1em; vertical-align:middle; text-decoration:none;}
.btn_s:hover, a.btn_s:hover{color:#08f;}

.btns select, .idpw_box select, .tb_join select{line-height:1em; border:1px solid #ccc; overflow:hidden; padding:0 0 0 3px; font-size:11px; min-height:19px;}

/* form */
.tb_tra_form select, .tb_st_basic select, .tb_st_h select, .btns select, .idpw_box select, .tb_join select{line-height:1em; border:1px solid #ccc; overflow:hidden; padding:0 0 0 3px; font-size:11px; min-height:19px;}
.f_basic, .tb_tra_form input, .tb_st_basic input, .tb_st_h input, .btns input, .idpw_box input, .tb_join input, .change_pw input, .leave input,  .main_stitle input{line-height:1.2em; border:1px solid #ccc; overflow:hidden; padding:0 2px; font-size:11px;}
.tb_st_basic textarea, .tb_st_h textarea{border:1px solid #ccc;}
.tb_tra_form input, .tb_tra_form select, .main_stitle input{height:18px !important;}

.f_xxs{width:20px; height:17px !important;}
.f_xs{width:40px; height:17px !important;}
.f_s{width:50px; height:17px !important;}
.f_sm{width:70px; height:17px !important;}
.f_m{width:100px; height:17px !important;}
.f_mm{width:140px; height:17px !important;}
.f_ml{width:160px; height:17px !important;}
.f_mml{width:170px; height:17px !important;}
.f_l{width:200px; height:17px !important;}
.f_xl{width:230px; height:17px !important;}
.f_xll{width:300px; height:17px !important;}
.f_ml_p{width:90%; height:17px !important;}
.f_l_p{width:97%; height:17px !important;}
.f_xxl{width:100%;}

.fbox_sl{width:90%;}
.fbox_ml{width:95%;}
.fbox_l{width:97%;}
.fbox_xl{width:98%;}
.fbox_xxl{width:100%;}

.tbox_sm{width:150px;}

.login-box {
    width: 100%;
    min-height: 550px;
    max-height: calc(100% - 181px);
    overflow-y: auto;
    padding: 70px;
    background: url(../images/login_bg.png) right top no-repeat #fff;
    -webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.2);
}

.btn-login {
    width: 400px;
    height: 50px;
    background: #336dcc;
    border-radius: 25px;
    font-size: 18px;
    color: #fff;
}

.join-box {
    background: #fff;
    padding: 50px;
}

.guide-box {
    background: #eef3f6;
    border-radius: 6px;
    padding: 15px;
    font-size: 16px;
    line-height: 1.6;
    margin: 20px 0;
}

.join-input-form .input_chk {
    display: block;
    width: 100px;
    margin-bottom: 10px;
}

policy-wrap {
    color: #000;
    margin-bottom: 30px;
}

.policy-box {
    height: 200px;
    overflow-y: auto;
    border: solid 1px #ddd;
    border-radius: 6px;
    padding: 20px;
    margin: 10px 0;
}

.join-box .btn-box {
    width: 100%;
}

.join-input-form {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .join-input-form dt {
        width: 120px;
    }

    .join-input-form dd {
        width: calc(100% - 120px);
    }

.foot-box p > a {
    display: block;
    line-height: 30px;
    background: #ddd;
    border-radius: 15px;
    font-size: 14px;
    color: #555;
    padding: 0 15px;
    margin: 0 5px;
}

.btn-box {
    width: 400px;
    display: flex;
    justify-content: center;
}

    .btn-box > button + button {
        margin-left: 20px;
    }

.btn-confirm {
    width: 180px;
}

.btn-cancel {
    width: 180px;
    background: #999;
}

login-wrap.join-wrap {
    top: 0;
    transform: translateY(0);
    padding: 50px 0;
}

.login-wrap h1 {
    font-size: 0;
    width: 200px;
    height: 30px;
    background: url(../images/logo.png) no-repeat;
    margin-bottom: 20px;
}

.login-box {
    width: 100%;
    min-height: 550px;
    max-height: calc(100% - 181px);
    overflow-y: auto;
    padding: 70px;
    background: url(../images/login_bg.png) right top no-repeat #fff;
    -webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.2);
    box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.2);
}

.userInfo-box {
    background: url(../images/img-idpw.png) right bottom no-repeat #fff;
}

.foot-box p {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

    .foot-box p > a {
        display: block;
        line-height: 30px;
        background: #ddd;
        border-radius: 15px;
        font-size: 14px;
        color: #555;
        padding: 0 15px;
        margin: 0 5px;
    }

.btn-box {
    width: 400px;
    display: flex;
    justify-content: center;
}

    .btn-box > button + button {
        margin-left: 20px;
    }

.btn-confirm {
    width: 180px;
}

.btn-cancel {
    width: 180px;
    background: #999;
}

.btn-box {
    width: 400px;
    display: flex;
    justify-content: center;
}

    .btn-box > button + button {
        margin-left: 20px;
    }

.btn-confirm {
    width: 180px;
}

.btn-cancel {
    width: 180px;
    background: #999;
}

.input-form p > span.btn-inner {
    right: 6px;
    top: 1px;
    left: unset;
}

.btn-inner button {
    height: 36px;
    background: #fff;
    border: solid 1px #336dcc;
    border-radius: 18px;
    font-size: 14px;
    line-height: 32px;
    color: #336dcc;
    padding: 0 15px;
}

.join-box {
    background: #fff;
    padding: 50px;
}

.guide-box {
    background: #eef3f6;
    border-radius: 6px;
    padding: 15px;
    font-size: 16px;
    line-height: 1.6;
    margin: 20px 0;
}

.policy-wrap {
    color: #000;
    margin-bottom: 30px;
}

.policy-box {
    height: 200px;
    overflow-y: auto;
    border: solid 1px #ddd;
    border-radius: 6px;
    padding: 20px;
    margin: 10px 0;
}

.join-box .btn-box {
    width: 100%;
}

.join-input-form {
    margin-bottom: 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

    .join-input-form dt {
        width: 120px;
    }

    .join-input-form dd {
        width: calc(100% - 120px);
    }

        .join-input-form dd > p + p {
            margin-top: 10px;
        }

    .join-input-form dt > p {
        font-size: 16px;
        font-weight: 500;
        color: #000;
    }

        .join-input-form dt > p:before {
            content: "";
            display: inline-block;
            vertical-align: middle;
            width: 6px;
            height: 6px;
            background: #e27e16;
            border-radius: 100%;
            margin-right: 5px;
        }

    .join-input-form input {
        height: 40px;
        border-radius: 20px;
        margin: 0 10px;
    }
    .join-input-form .input_chk {
        display: block;
        width: 100px;
        margin-bottom: 10px;
    }

.logo-box {
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    border: solid 1px #ddd;
    padding: 10px;
}

.point-title {
    font-size: 16px;
    font-weight: 500;
    color: #336dcc;
    border-bottom: solid 1px #336dcc;
    padding: 20px 0 10px 0;
    margin-bottom: 20px;
}

.login-box h2 {
    color: #000;
    font-size: 30px;
    font-weight: 700;
}

.popup-wrap {
    background: #fff;
    min-height: 100%;
}

.pop-head {
    position: relative;
    background: #336dcc;
    padding: 15px;
}

.pop-cont {
    padding: 20px;
}

    .pop-cont .table-input th {
        background: #f5f5f5;
        border-left: solid 1px #ddd;
        border-right: solid 1px #ddd;
    }

.search-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border: dashed 1px #336dcc;
    border-radius: 8px;
    padding: 5px 10px;
}

.search-box > div {
    margin: 5px 30px 5px 0;
}

.search-box > div > label {
    display: inline-block;
    vertical-align: middle;
    color: #333;
    font-weight: 500;
    padding-right: 10px;
}