::-webkit-scrollbar {display: none;}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #f2f2f2 inset; /* 배경 흰색으로 덮기 */
  -webkit-text-fill-color: #000; /* 글자색 지정 */
  transition: background-color 5000s ease-in-out 0s; /* 배경색 깜빡임 방지 */
}


a {text-decoration: none;}
img {border: 0px; padding: 0px; margin: 0px}
body {font-size: 13px; margin: 0px; font-family: 'Noto Sans KR', sans-serif; background-color: white}
.body_red {min-height: 100vh; font-size: 14px; margin: 0px; font-family: 'Noto Sans KR', sans-serif; background-image: linear-gradient(to bottom, #07208d 40%, #e0c5ac); background-size: cover; background-repeat: no-repeat;}

.lef {float: left;}
.rig {float: right}

.bgcover {background-size: cover; background-position: center; background-repeat: no-repeat;}
.bgcontain {background-size: contain; background-position: center; background-repeat: no-repeat;}

.i_cus {cursor: pointer;}
.wrap {width: 100%; max-width: 1280px; margin: 0px auto}
.wrap_pad {width: 100%; max-width: 1280px; margin: 80px auto}
.clear {clear: both}
.no_dis {display: none}
.bg_bk {display: none; position: fixed; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100vh; background-image: url('/garage/images/op70.png'); overflow: hidden;}
.t_red {color: #07208d}

.get_back {width: 70px; height: 38px; line-height: 38px; font-size: 14px; text-align: center; background-color: #07208d; color: white; border-radius: 5px; margin: 20px 0px 0px 0px; cursor: pointer;}

.popup_type_1 {position: relative; width: 500px; height: 500px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px black; margin: calc(50vh - 300px) auto;}
.popup_type_2 {position: relative; width: 500px; height: 700px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px black; margin: calc(50vh - 400px) auto;}
.popup_type_3 {position: relative; width: 1000px; height: 100vh; background-color: white; border-radius: 0px; box-shadow: 0px 0px 10px black; margin: 0px auto;}
.popup_type_4 {position: relative; width: 1000px; height: 80vh; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px black; margin: 5vh auto;}
.popup_type_5 {position: relative; width: 500px; height: 250px; background-color: white; border-radius: 10px; box-shadow: 0px 0px 10px black; margin: calc(50vh - 300px) auto;}

.popup_inner_type_2 {padding: 15px; height: 560px; overflow-y: scroll; border-bottom: 1px solid #dfdfdf;}

.popup_title {height: 44px; line-height: 44px; padding: 0px 15px; color: white; background-color: #07208d; text-align: center; border-top-left-radius: 10px; border-top-right-radius: 10px; font-size: 18px;}
.popup_title_se {height: 30px; line-height: 30px; padding: 0px 15px; color: #553c1e; text-align: center; font-size: 14px; margin: 10px 0px 0px 0px}
.popup_inner {padding: 15px; overflow-y: scroll;}
.popup_bt_cancel {position: absolute; width: 100px; height: 40px; line-height: 40px; background-color: #553c1e; border-radius: 10px; color: white; text-align: center; bottom: 10px; left: 10px; font-size: 16px; cursor: pointer;}
.popup_bt_confirm {position: absolute; width: 100px; height: 40px; line-height: 40px; background-color: #07208d; border-radius: 10px; color: white; text-align: center; bottom: 10px; right: 10px; font-size: 16px; cursor: pointer;}
.popup_bt_confirm:hover {box-shadow: 0px 0px 5px #07208d;}


/* login  */
.login_form {width: 320px; margin: calc(50vh - 400px) auto 0px auto; padding: 30px 0px; background-color: white; border-radius: 20px; text-align: center; box-shadow: 0px 0px 5px #07208d;}
.login_logo {width: 250px; height: 50px; background-image: url('/garage/images/dingdong_logo_black.png'); background-position: center; background-repeat: no-repeat; background-size: 80%; margin: 0px auto; cursor: pointer;}
.login_title {font-size: 24px; line-height: 40px; font-weight: bold; margin: 20px 0px 20px 0px}
.login_title_se {font-size: 18px; line-height: 30px; font-weight: bold; margin: 10px 0px 0px 0px; color: red}

.login_txt {width: 250px; margin: 20px auto 10px auto; font-size: 13px; color: #333; text-align: left;}
.login_ipt {width: 218px; height: 44px; padding: 0px 15px; line-height: 36px; border: 1px solid #dfdfdf; border-radius: 7px; background-color: #f7f7f7; font-size: 14px;}
.login_bt {width: 250px; height: 44px; line-height: 44px; font-size: 16px; background-image: linear-gradient(to right, #07208d, #0e1041); text-align: center; color: white; margin: 30px auto 10px auto; border-radius: 5px; cursor: pointer;}
.login_bt_rfid {width: 250px; height: 44px; line-height: 44px; font-size: 16px;  background-image: linear-gradient(to left, #ac3a62, #590404); text-align: center; color: white; margin: 20px auto; border-radius: 5px; cursor: pointer;}

.login_pass {width: 250px; margin: 20px auto 10px auto; font-size: 11px; color: #333; text-align: right;}
div.login_pass a {color: #333}

.login_footer {width: 500px; color: white; font-size: 12px; line-height: 24px; margin: 50px auto 0px auto; text-align: center;}
div.login_footer span {color: #ffdf00; text-decoration: underline;}
.login_info {margin: 20px 0px 0px 0px; font-size: 11px; color: #553c1e; text-align: center; line-height: 20px}
div.login_info span {text-decoration: underline; font-weight: bold;}

.login_rfid {width: 200px; height: 20px; font-size: 10px; text-align: center; border: 1px solid white; margin: 10px auto 0px auto; color: white}
input.login_rfid:focus {
  outline: none;
  box-shadow: none;
  border: none;
}


/* layout */
.header {position: relative; width: calc(100% - 230px); height: 50px; background-color: white; padding: 10px 10px 10px 220px; font-size: 16px; box-shadow: 0px 0px 10px black; z-index: 1}
.header_school {position: relative; width: 90%; height: 50px; background-color: white; padding: 10px 5%; font-size: 16px; box-shadow: 0px 0px 10px black; z-index: 1}
.sidebar {position: absolute; top: 10px; left: 10px; width: 180px; padding: 0px 10px; min-height: calc(100vh - 20px); background-color: #07208d; border-radius: 10px; color: white; z-index: 2;}
div.sidebar a  {color: white}
.rarea {float: right; width: calc(100% - 280px); min-height: 100vh; position: relative; padding: 30px; background-color: white}
.footer {}


.header_logo {float: left; width: 36px; height: 50px; border-radius: 5px; margin: 0px 5px; background-image: url('/garage/images/dingdong_logo_blue.png'); background-size: contain; background-position: center; background-repeat: no-repeat; cursor: pointer;}
.header_logout {float: right; height: 50px; line-height: 50px;}
div.header_logout a {color: white; font-size: 11px; color: white}
.header_me {float: right; width: 50px; height: 24px; padding: 13px 20px; border-radius: 5px;}
.header_me:hover {box-shadow: 0px 0px 10px #c5c5c5; cursor: pointer;}
.header_me_pic {float: left; width: 24px; height: 24px; border-radius: 50%; background-size: cover; background-position: center; background-repeat: no-repeat;}
.header_me_arw {float: right; width: 12px; height: 12px; margin: 6px 0px; background-image: url('/garage/images/ic_arrow_down.png'); background-size: 10px; background-position: center; background-repeat: no-repeat;}
.header_profile {display: none; position: absolute; background-color: white; width: 200px; right: 10px; top: 65px;  border-radius: 10px; box-shadow: 0px 5px 5px #c5c5c5; font-size: 12px; z-index: 10; box-shadow: 0px 0px 10px gray; font-weight: 400;}
div.header_profile a {color: black}
.header_semester {display: none; position: absolute; background-color: white; width: 300px; left: 130px; top: 65px;  border-radius: 10px; box-shadow: 0px 5px 5px #c5c5c5; font-size: 12px}
.header_semester_m {height: 24px; line-height: 24px;padding: 15px; font-size: 16px}
.header_semester_m:hover {cursor: pointer; background-color: #f8fcff; color: #07208d}

.header_menu_t {position: absolute; width: 500px; left: calc(50% - 250px); top: 18px; height: 34px; line-height: 34px; padding: 0px 20px; background-color: #07208d; color: white; border: 1px solid #07208d; border-radius: 17px; text-align: center;}
div.header_menu_t span {color: #ffdf00}
.header_menu {float: left; height: 24px; line-height: 24px; padding: 0px 10px 0px 10px; margin: 13px 15px}

.header_web_logo {float: left; width: 180px; height: 50px; border-radius: 5px; margin: 0px 100px 0px 0px; background-image: url('/garage/images/dingdong_logo_black.png'); background-position: center; background-repeat: no-repeat; background-size: 80%; cursor: pointer;}
.header_web_menu {float: left; padding: 0px 15px; height: 50px; line-height: 50px; margin: 0px 30px 0px 0px; cursor: pointer;}
.header_web_menu_s {float: left; padding: 0px 15px; height: 40px; line-height: 40px; margin: 5px 30px 0px 0px; background-color: #07208d; color: white; border-radius: 20px;}


.header_logout_bt {float: right; height: 40px; line-height: 40px; background-color: #07208d; padding: 0px 10px; color: white; margin: 5px 20px; cursor: pointer; border-radius: 5px;}
.header_profile_m_t {height: 50px; line-height: 50px; padding: 0px 15px; font-size: 14px; border-bottom: 1px solid #efefef; color: #07208d; cursor: pointer;}
.header_profile_m_b {height: 50px; line-height: 50px; padding: 0px 15px; font-size: 14px; border-top: 1px solid #efefef; cursor: pointer;}
.header_profile_m {height: 50px; line-height: 50px; padding: 0px 15px; font-size: 14px; cursor: pointer;}

.header_profile_m_t:hover {background-color: #07208d; color: white; border-top-right-radius: 10px; border-top-left-radius: 10px;}
.header_profile_m:hover {background-color:#f2f2f2}
.header_profile_m_b:hover {background-color:#07208d; color: white; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px;}

.sidebar_t {line-height: 30px; color: #ffdf00; font-size: 14px; padding: 0px 10px; margin: 30px 0px 0px 0px}
.sidebar_m {padding: 0px 10px; height: 40px; line-height: 40px; cursor: pointer;}
.sidebar_m_s {padding: 0px 10px; height: 40px; line-height: 40px; cursor: pointer; background-color: #ffdf00; color: black; border-radius: 5px;}

.title_wrap {position: relative; }
.title {font-size: 30px; font-weight: bold;}
.title_se {font-size: 24px; margin: 40px 0px 5px 0px}

.sub_title {font-size: 16px; line-height: 22px; margin: 10px 0px}
.title_bt {float: right; font-size: 16px; line-height: 40px; padding: 0px 20px; background-color: #07208d; color: white; cursor: pointer; margin: -60px 0px 0px 0px; border-radius: 10px;}
.title_bt1 {float: right; font-size: 16px; line-height: 40px; padding: 0px 20px; background-color: #36a9c0; color: white; cursor: pointer; margin: -60px 160px 0px 0px; border-radius: 10px;}
.title_bt3 {float: right; font-size: 16px; line-height: 40px; padding: 0px 20px; background-color: #07208d; color: white; cursor: pointer; margin: 0px 0px 0px 0px; border-radius: 10px;}
.title_bt2 {float: right; line-height: 40px; padding: 0px 20px; background-color: #36a9c0; color: white; cursor: pointer; margin: 0px 10px 0px 10px; border-radius: 10px; font-size: 16px}
.title_upper {width: 60px; height: 18px; line-height: 18px; border-radius: 9px; border: 1px solid #07208d; color: #07208d; text-align: center; margin: 0px 0px 10px 0px}

.title_upper_lef {float: left; height: 18px; line-height: 18px; border-radius: 9px; border: 1px solid #07208d; color: #07208d; text-align: center; margin: 0px 10px 10px 0px; padding: 0px 10px;}
.title_upper_rig {float: left; height: 18px; line-height: 18px; border-radius: 9px; border: 1px solid #07208d; color: white; background-color: #07208d; text-align: center; margin: 0px 10px 10px 0px; padding: 0px 10px;}

/* form */

.ipt_title {font-size: 14px; font-weight: bold; margin: 20px 0px 10px 0px;}
.ipt_box {width: calc(100% - 32px); height: 36px; line-height: 36px; border: 1px solid #dfdfdf; border-radius: 10px; padding: 0px 15px;}
.ipt_sel {width: 200px; height: 36px; line-height: 36px; border: 1px solid #dfdfdf; border-radius: 5px; padding: 0px 15px;}


/* table */

.tb_w {margin: 30px 0px; text-align: center; font-size: 14px}
.tb_t {height: 46px; line-height: 46px; background-color: #f2f2f2; border-top: 1px solid #cfcfcf; border-bottom: 1px solid #dfdfdf}
.tb_tr {height: 46px; line-height: 46px; border-bottom: 1px solid #dfdfdf; overflow: hidden;}
.tb_music {height: 46px; line-height: 46px; border-bottom: 1px solid #dfdfdf; text-align: center; color: #07208d}

.td5 {float: left; width: 5%}
.td10 {float: left; width: 10%}
.td15 {float: left; width: 15%}
.td20 {float: left; width: 20%}
.td25 {float: left; width: 25%}
.td30 {float: left; width: 30%}
.td35 {float: left; width: 35%}
.td40 {float: left; width: 40%}
.td50 {float: left; width: 50%}
.td80 {float: left; width: 80%}


div.tb_tr a {color: #07208d; cursor: pointer;}

.search_w {padding: 20px 0px 0px 0px; font-size: 16px; height: 40px;}
.search_bt {float: left; height: 40px; line-height: 40px; padding: 0px 20px; background-color: #07208d; color: white; border-radius: 7px; cursor: pointer; border: 0px}
.search_ipt {float: left; width: 250px; border: 1px solid #dfdfdf; border-radius: 5px; height: 38px; line-height: 38px; padding: 0px 10px; margin: 0px 10px 0px 0px;}
.search_select {float: left; border: 1px solid #dfdfdf; border-radius: 5px; border: 1px solid #dfdfdf; height: 40px; line-height: 40px; padding: 0px 10px; margin: 0px 10px 0px 0px;}

/* pagenate */
.pagena {float: right; position: relative; left: -50%; margin: 10px 0px 0px 0px; font-size: 12px}
.pagena_m {float: left; position: relative; left: 50%; min-width: 18px; height: 28px; line-height: 28px; padding: 0px 5px; margin: 0px 0px 0px 10px; text-align: center; background: #f2f2f2; border-radius: 5px; color: #333}
.pagena_m:hover {cursor: pointer; background: #07208d; color: white;}
.pagena_m_s {float: left; position: relative; left: 50%; min-width: 18px; height: 28px; line-height: 28px; padding: 0px 5px; margin: 0px 0px 0px 10px; text-align: center; background: #07208d; border-radius: 5px; color: white}
div.pagena_m:hover a {color: white}
div.pagena_m a {color: #333}

.pagena_lite {text-align: center; margin: 70px 0px; font-size: 14px}

  
  

/* sheet */
.sheet_t {line-height: 36px; padding: 0px 15px; border-top: 2px solid #07208d; border-bottom: 1px solid #dfdfdf; background-color: #f2f2f2; font-size: 16px; font-weight: bold; margin: 40px 0px 0px 0px;}
.sheet_m {border: 1px solid #dfdfdf; border-radius: 5px; margin: 20px 0px 20px 0px; padding: 0px 0px 20px 0px}
.sheet_mt {float: left; width: 120px; background-color: #f7f7f7; color: #07208d; text-align: center; border-top-left-radius: 5px; border-bottom-left-radius: 5px; font-size: 14px;}
.sheet_mv_s {float: left; width: 50px; height: 50px; background-image: url('/garage/images/ic_youtube_s.png'); background-size: 30px; background-position: center; background-repeat: no-repeat; text-align: center; font-size: 14px; cursor: pointer;}
.sheet_mv {float: left; width: 50px; height: 50px;  background-image: url('/garage/images/ic_youtube.png'); background-size: 30px; background-position: center; background-repeat: no-repeat; color: white; text-align: center; font-size: 14px; cursor: pointer;}
.sheet_mc {}

.sheet_mb {float: left; width: 88px; height: 88px; margin: 20px 0px 0px 20px; background-color: #f2f2f2; border-radius: 5px; cursor: pointer; background-size: cover; background-repeat: no-repeat; background-position: center; border: 1px solid #dfdfdf}
.sheet_mb_add {float: left; width: 90px; height: 90px; line-height: 80px; margin: 20px 0px 0px 20px; background-color: #07208d; border-radius: 5px; cursor: pointer; text-align: center; font-size: 40px; color: white}

.sheet_view {position: absolute; top: 0px; left: 0px; width: 100%; height: 100vh; text-align: center;}
div.sheet_view img {height: 100vh}
.sheet_menu {position: absolute; width: 500px; height: 70px; line-height: 70px; border-radius: 35px; background-image: url('/garage/images/op70.png'); bottom: 50px; left: 300px; text-align: center; color: white; font-size: 20px; font-weight: bold;}
div.sheet_menu a {cursor: pointer;}
div.sheet_menu a:hover {text-decoration: underline;}
.sheet_user_m {float: left; height: 30px; line-height: 30px; border: 1px solid #07208d; color: black; padding: 0px 10px 0px 5px; border-radius: 5px; margin: 10px 10px 0px 0px; background-color: white}

/* user */
.user_tab {float: left; height: 38px; line-height: 38px; padding: 0px 25px; background-color: #efefef; margin: 20px 0px 0px 0px; border-right: 1px solid white;}
.user_tab:hover {cursor: pointer; background-color: #dfdfdf}
.user_tab_s {float: left; height: 38px; line-height: 38px; padding: 0px 25px; background-color: #07208d; color: white; margin: 20px 0px 0px 0px; border-right: 1px solid white;}

/* music */
.music_m {border: 1px solid #dfdfdf; background-color: #f2f2f2; border-radius: 10px; padding: 10px; margin: 0px 0px 15px 0px}
.music_m_chk {float: left; width: 30px; height: 30px;}
.music_m_title {float: left; width: calc(100% - 50px)}
div.music_m_title span {font-weight: bold; font-size: 16px}



/* school */


.idx_lef {float: left; width: 220px; height: 200px; margin: 40px 20px}
.idx_cent {float: left; width: calc(100% - 550px); margin: 40px 10px}
.idx_rig {float: right; width: 250px; height: 200px; margin: 40px 0px}

.idx_info {float: left; width: calc(100% - 315px); padding: 50px 0px 0px 0px}
.idx_rank  {float: right; width: 280px; padding: 50px 0px 0px 0px}


.n_instrument {float: left; height: 24px; line-height: 24px; padding: 0px 15px; border: 1px solid #07208d; color: #07208d; font-size: 12px; border-radius: 5px; margin: 0px 0px 5px 0px;}
.n_title {font-size: 30px; font-weight: bold;}
div.n_title span {color: #07208d}
.n_today {border: 1px solid #07208d; border-radius: 30px; margin: 50px 0px 0px 0px; line-height: 60px }
.n_summary {float: right; background-color: #07208d; padding: 20px; color: white; margin: -70px 0px 0px 0px; border-radius: 15px;}

.n_today_rank {}
.n_today_lef {float: left; width: 8%; text-align: center; font-size: 12px}
.n_today_rig {float: left; width: 8%; color: #07208d; font-size: 40px; font-weight: bold; text-align: center;}
.n_today_rig_lar {float: left; width: 12%; color: #07208d; font-size: 45px; font-weight: bold; text-align: center;}

.n_today_rig_span {color: #553c1e; font-size: 24px; font-weight: normal;}

.song_m {padding: 15px 20px; border-bottom: 1px solid #d1d1d1; margin: 0px 0px 0px 0px}
.song_mt {float: left; line-height: 50px; font-size: 16px;}
.song_mp {float: right; width: 100px; height: 22px; line-height: 22px; margin: 14px 0px}
.song_mpm {float: right; width: 20px; height: 20px; border-radius: 10px; border: 1px solid white; margin: 0px -4px 0px 0px;}
.song_mlv {float: right; height: 24px; margin: 13px 10px;}
.song_mlvm_s {float: left; height: 24px; line-height: 24px; background-color: #07208d; color: white; border: 1px solid #07208d; padding: 0px 10px; border-radius: 5px; margin: 0px 5px; cursor: pointer;}
.song_mlvm_s:hover {box-shadow: 0px 0px 5px #07208d}
.song_mlvm {float: left; height: 24px; line-height: 24px; border: 1px solid #e0c5ac; background-color: #eee4da; color: #8a5a2d; padding: 0px 10px; border-radius: 5px; margin: 0px 5px;}
.song_mexp {float: right; width: 130px; height: 20px; line-height: 20px; margin: 15px 0px 0px 30px}
.song_mexp_lef {float: left; position: relative; width: 100px; height: 12px; margin: 4px 0px; background-color: #efefef; border-radius: 8px;}
.song_mexp_lef_in {position: absolute; top: 0px; left: 0px; height: 12px; width: 70px; background-color: #07208d; border-radius: 8px;}
.song_mexp_rig {float: right; font-size: 12px; font-weight: bold; color: #553c1e}


.student_m {position: relative; float: left; height: 50px; line-height: 50px; padding: 0px 20px 0px 0px; background-color: white; box-shadow: 0px 0px 10px #dfdfdf; border-radius: 25px; margin: 15px 15px 0px 0px;}
.student_m:hover {cursor: pointer; box-shadow: 0px 0px 5px #553c1e;}
.student_mp {float: left; width: 40px; height: 40px; border-radius: 50%; margin: 5px 10px 5px 5px; background-color: #f2f2f2}
.student_mc {float: left; font-size: 16px}
div.student_mc span {font-weight: bold}

.student_menu {display: none; z-index: 10; position: absolute; top: 20px; left: 30px; width: 150px; background-color: #f2f2f2; border: 1px solid #dfdfdf}
.student_menu_m {height: 30px; line-height: 30px; padding: 0px 15px;}
.student_menu_m:hover {cursor: pointer; background-color: #07208d; color: white}

.n_student {color: #07208d; font-size: 14px}


.music_view {position: relative; width: 100%; height: 100vh; background-size: contain; background-position: center; background-repeat: no-repeat;}
.music_summary {position: absolute; top: 20px; left: 20px;}
.music_close {position: absolute; top: 20px; right: 20px; width: 80px; height: 40px; line-height: 40px; background-image: url('/garage/images/op40.png'); background-color: black; color: yellow; text-align: center; border-radius: 10px; cursor: pointer;}
.music_prev {position: absolute; bottom: 20px; left: 20px; width: 80px; height: 40px; line-height: 40px; background-image: url('/garage/images/op40.png'); color: white; text-align: center; border-radius: 10px; cursor: pointer;}
.music_next {position: absolute; bottom: 20px; right: 20px; width: 80px; height: 40px; line-height: 40px; background-image: url('/garage/images/op40.png'); color: white; text-align: center; border-radius: 10px; cursor: pointer;}
.music_print {position: absolute; bottom: 20px; left: calc(50% - 40px); width: 80px; height: 40px; line-height: 40px; background-image: url('/garage/images/op40.png'); background-color: black; color: pink; text-align: center; border-radius: 10px; cursor: pointer;}


/* Semester */
.semester_t {font-weight: bold; font-size: 14px; padding: 5px 5px 10px 5px;}
.semester_m {padding: 5px; line-height: 24px; border: 1px solid #dfdfdf; background-color: #f7f7f7; border: 1px solid #dfdfdf; margin: 0px 0px 10px 0px; border-radius: 5px;}


/* sheet_user */
.usheet_t {font-size: 16px; line-height: 20px; color: white; background-color: #333; padding: 10px 15px; margin: 30px 0px 10px 0px; border-radius: 3px;}
.usheet_m {height: 50px; line-height: 50px; border-bottom: 1px solid #dfdfdf; font-size: 14px; text-align: left; padding: 0px 20px}
.usheet_progress {float: left; width: 20%; height: 20px; margin: 15px; background-color: #f2f2f2; position: relative;}
.usheet_progress_inner {position: absolute; top: 0px; left: 0px; width: 50%; height: 20px; background-image: linear-gradient(to right,  #e0c5ac, #07208d);}
.usheet_view {float: left; padding: 0px 20px; height: 30px; line-height: 30px; margin: 10px 20px; background-color: #07208d; border-radius: 5px; color: white; text-align: center; font-size: 12px; cursor: pointer;}



.idx_se_lef {float: left; width: 70%;}
.idx_se_rig {float: right; width: 25%}

.idx_se_title {line-height: 40px; margin: 0px 20px 0px 0px; font-weight: bold; padding: 0px 0px 10px 0px}
.idx_se_title_lef {float: left; font-size: 24px; margin: 0px 0px 0px 0px; font-weight: bold; }
.idx_se_title_rig {float: right; font-size: 14px; margin: 0px 0px 0px 0px; color: #553c1e}

.rank_user {position: relative; height: 70px; line-height: 70px; padding: 0px 0px; background: #f2f2f2; border-radius: 10px; margin: 0px 0px 10px 0px;}
.rank_user_r {position: absolute; top: 0px; left: 0px; font-size: 14px; font-weight: bold; width: 25px; height: 25px; line-height: 25px; background-color: #07208d; color: white; text-align: center; color: white; border-radius: 10px}
.rank_user_p {float:left; width: 70px; height: 70px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; background-size: cover; background-repeat: no-repeat; background-position: center;}
.rank_user_n {float: left; line-height: 24px; font-size: 16px; font-weight: bold; margin: 11px 10px}
.rank_user_o {float: right; line-height: 70px; font-size: 16px; color: #07208d; margin: 0px 10px 0px 0px}
div.rank_user_n span {font-size: 11px; color: #553c1e; font-weight: normal;}


.cal_month_w {width: 95%; padding: 10px 2.5%; height: 28px; background: white; text-align: center; border-bottom: 1px solid #dfdfdf}
.cal_day_m {float: left; width: 14%; height: 28px; line-height: 28px; font-size: 16px}
.cal_day_m_sat {float: left; width: 15%; height: 28px; line-height: 28px; font-size: 16px; color: #098BE9}
.cal_day_m_sun {float: left; width: 15%; height: 28px; line-height: 28px; font-size: 16px; color: #07208d}


/*
	원래 이거임
.cal_week_w {width: 80%; padding: 12px 10%; height: 48px; box-shadow: 0px 0px 10px #989CA0; background: white; text-align: center; font-weight: 500}
.cal_week_m {float: left; width: 14%; height: 48px; line-height: 24px; font-size: 12px}
.cal_week_m_sat {float: left; width: 15%; height: 48px; line-height: 24px; font-size: 12px; color: #098BE9}
.cal_week_m_sun {float: left; width: 15%; height: 48px; line-height: 24px; font-size: 12px; color: #07208d}
*/

.cal_week_w {width: 100%; padding: 12px 0px; height: 48px; box-shadow: 0px 0px 10px #989CA0; background: white; text-align: center; font-weight: 500}
.cal_week_m {float: left; width: 11%; height: 48px; line-height: 24px; font-size: 12px}
.cal_week_m_sat {float: left; width: 11%; height: 48px; line-height: 24px; font-size: 12px; color: #098BE9}
.cal_week_m_sun {float: left; width: 11%; height: 48px; line-height: 24px; font-size: 12px; color: #c00f09}
.cal_week_prev {float: left; width: 11%; height: 48px; background-image: url('/garage/images/ic_prev_day.svg'); background-size: 20px; background-position: center; background-repeat: no-repeat }
.cal_week_next {float: left; width: 11%; height: 48px; background-image: url('/garage/images/ic_next_day.svg'); background-size: 20px; background-position: center; background-repeat: no-repeat}

.cal_week_allday {background: #fafafa; padding: 2.5% 0px; line-height: 20px; font-size: 10px; position: relative; border-top: 1px solid #e3e3e3}

.cal_week_time {float: left; width: 10%; line-height: 20px; text-align: center}
.cal_week_date {float: left; width: 80%; min-height: 20px}
.cal_week_day_sat {float: left; width: 15%; height: 99px; position: relative}
.cal_week_day_sun {float: left; width: 15%; height: 99px; position: relative}
.cal_week_day_m {float: left; width: 14%; height: 99px; position: relative}

.cal_week_hei {height: 20px; overflow: hidden; z-index: 10}
.cal_week_line {padding: 0px; height: 99px; line-height: 20px; font-size: 10px; border-bottom: 1px solid #e3e3e3}


.sche_each_day {position: absolute; top: 0px; left: 0px}

.calendar {padding: 0px 2.5%;}
.calendar_tr {width: 100%; height: 38px; border-bottom: 1px solid #E8EAF0; text-align: center; overflow: hidden}

.calendar_td_sat {float: left; width: 15%; height: 38px; line-height: 38px; font-size: 16px; color: #098BE9; position: relative}
.calendar_td {float: left; width: 14%; height: 38px; line-height: 38px; font-size: 16px; color: #222222; position: relative}
.calendar_td_sun {float: left; width: 15%; height: 38px; line-height: 38px; font-size: 16px; color: #eb3b35; position: relative}
.calendar_td_this_day {position: absolute; top: 4px; left: calc(50% - 16px); border-radius: 50%; width: 32px; height: 32px; line-height: 32px; background-color: #07208d; color: white; text-align: center}
.calendar_td_view_day {height: calc((100vh - 170px) / 6); overflow: hidden}


/* bbs */
.bbs_t {font-size: 30px; font-weight: bold; margin: 70px 0px 0px 0px}
.bbs_c {padding: 20px; background-color: #07208d; color: white; margin: 20px 0px 0px 0px}
.bbs_ct {font-size: 14px; color: #07208d; margin: 20px 0px 10px 0px}
.bbs_cc {height: 60px;}
.bbs_ipt {width: 700px; height: 40px; line-height: 40px; border: 0px; border: 1px solid #dfdfdf; border-radius: 10px; padding: 0px 15px; font-size: 16px;}
.bbs_submit {width: 200px; height: 60px; line-height: 60px; background-color: #07208d; color: white; font-size: 20px; border-radius: 5px; text-align: center; margin: 50px 0px 200px 0px; cursor: pointer;}

.bbs_info {padding: 10px; border: 1px solid #dfdfdf; border-radius: 10px; margin: 20px 0px}
.bbs_info_l {float: left; width: 250px; line-height: 24px; padding: 10px 10px; font-weight: bold; background-color: #07208d; margin: 0px 0px 2px 0px; color: white}
.bbs_info_r {float: left; width: calc(100% - 300px); line-height: 24px; padding: 10px 10px; margin: 0px 0px 2px 0px; background-color: #F7f7f7}
.bbs_info_r2 {float: left; width: calc(50% - 300px); line-height: 24px; padding: 10px 10px; margin: 0px 0px 2px 0px; background-color: #f7f7f7}


.smr_w {margin: 30px 0px 20px 0px; border-top: 1px solid #07208d; border-bottom: 1px solid #07208d}
.smr_l {float: left; height: 50px; line-height: 50px; padding: 0px 30px; color: white; background-color: #07208d; font-size: 16px}
.smr_r {float: left; height: 50px; line-height: 50px; padding: 0px 50px; color: black; font-weight: bold; font-size: 16px}

.manage_w {float: left; margin: 10px 20px 20px 0px; padding: 10px; width: 300px; height: 70px; border: 1px solid #dfdfdf; border-radius: 20px;}
.manage_p {float: left; width: 70px; height: 70px; border-radius: 50%; background-position: center; background-size: cover; background-color: #f2f2f2;}
.manage_name {float: left; width: 200px; font-size: 20px; line-height: 35px; margin: 0px 15px; text-align: center; font-weight: bold; color: #07208d;}
div.manage_name span {font-size: 18px; color: black; font-weight: normal;}

.view_t {font-size: 16px; font-weight: bold; text-align: left; padding: 0px 20px}
.view_c {margin: 20px 0px; text-align: left; line-height: 40px; background-color: #f7f7f7; padding: 0px 20px}

.user_tab_title {font-size: 16px; margin: 20px 0px; font-weight: bold;}

.user_point_title {float: left; height: 40px; line-height: 40px; font-size: 16px}
.user_point_now {float: left; line-height: 40px; font-size: 16px; margin: 0px 20px}
.user_point_add {float: left; height: 40px; line-height: 40px; margin: 0px 10px;}
.ipt_user_point_add {float: left; width: 200px; height: 36px; line-height: 36px; margin: 1px 10px 1px 0px; border: 1px solid #dfdfdf; border-radius: 7px; text-align: center; font-size: 14px;}
.ipt_user_point_add_lar {float: left; width: 400px; height: 36px; line-height: 36px; margin: 1px; border: 1px solid #dfdfdf; border-radius: 7px; text-align: center; font-size: 14px;}
.user_point_bt {float: left; height: 40px; line-height: 40px; background-color: #553c1e; padding: 0px 20px; border-radius: 5px; color: white; margin: 0px 10px; cursor: pointer;}


/* ranking */
.rank_tab_s {float: left; height: 44px; line-height: 44px; padding: 0px 30px; background-color: #07208d; color: white; font-size: 16px; margin: 0px 1px 0px 0px}
.rank_tab {float: left; height: 44px; line-height: 44px; padding: 0px 30px; background-color: #f2f2f2; color: gray; cursor: pointer; font-size: 16px; margin: 0px 1px 0px 0px}



.dash {background-color: white; box-shadow: 0px 0px 10px #dfdfdf; margin: 20px 0px 0px 0px; padding: 5px 15px; border-radius: 10px;}
.dash_semester {height: 40px; line-height: 40px; font-size: 18px; margin: 0px 0px 15px 0px}
.dash_music {float: left; padding: 5px 20px; background-color: #07208d; line-height: 30px; border-radius: 20px; color: white; margin: 0px 10px 10px 0px; cursor: pointer;}
.dash_music_level {float: left; padding: 0px 15px; background-color: white; line-height: 30px; color: #07208d; border-radius: 15px; margin: 5px 5px 5px 0px}



.ntitle {font-size: 22px; margin: 0px 0px 20px 0px; font-weight: 600}

.ninfo_wrap {width: 1024px; background: white; padding: 20px; margin: 30px auto; border: 1px solid #dfdfdf; border-radius: 10px;  box-shadow: 0px 0px 5px #dfdfdf;}
.ninfo_pic {float: left; width: 100px; height: 100px; position: relative; border-radius: 10px; margin: 0px 0px 20px 0px}
.ninfo_pic_w {position: absolute; top:0px; left: 0px; width: 100px; height: 100px; border-radius: 10px; background-color:#f2f2f2}


.ninfo_body {float: left; margin: 20px 30px 0px 0px; position: relative}
.ninfo_body_title {position: absolute; left: 10px; top: -10px; line-height: 20px; height: 20px; padding: 0px 5px 0px 5px; font-size: 13px; background-color: white; color: gray}
.ninfo_body_input {min-width: 240px; height: 36px; line-height: 36px; padding: 5px 10px 0px 10px; border: 1px solid #dfdfdf; border-radius: 10px; background-color: white; font-size: 16px}

.nbbs_title {font-size: 20px; line-height: 30px; padding: 10px; border-bottom: 1px solid #dfdfdf; margin: 80px 0px 10px 0px;}
.nbbs_date {font-size: 14px; line-height: 30px; text-align:right; color: gray;}
.nbbs_body {min-height: 600px; padding: 50px 10px;}


.rank_tab_s {float: left; height: 40px; line-height: 40px; padding: 0px 15px; border-top-left-radius: 10px; border-top-right-radius: 10px; color: white; font-size: 16px; background-color: #07208d; margin: 0px 0px 10px 0px}
.rank_tab {float: left; height: 40px; line-height: 40px; padding: 0px 15px; border-top-left-radius: 10px; border-top-right-radius: 10px; color: #efefef; font-size: 16px; background-color: gray; margin: 0px 0px 10px 0px}
.rank_w {width: 600px; margin: 0px auto; padding: 50px 0px}

.dialog {display: none; position: fixed; width: 300px; background-color: white; padding: 20px; border-radius: 15px; box-shadow: 0px 0px 10px black; top: calc(50vh - 300px); left: calc(50% - 170px); z-index: 1000}
.dialog_txt {font-size: 16px; margin: 0px 0px 20px 0px; text-align: center;}
.dialog_bt_lef {float: left; width: 145px; height: 30px; line-height: 30px; background-color: #07208d; color:white; text-align: center; font-size: 14px; border-radius: 5px; cursor: pointer;}
.dialog_bt_rig {float: right; width: 145px; height: 30px; line-height: 30px; background-color: #222222; color:white; text-align: center; font-size: 14px; border-radius: 5px; cursor: pointer;}