@charset "utf-8";
/* reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,t
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input,select,section,textarea,button {box-sizing:border-box;margin:0;padding:0;border:0;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display:block;}
dl, ul, ol, menu, li {list-style:none}
canvas, footer, header, hgroup, menu, nav, section {display:block;}
img, input, select, textarea, button, label {vertical-align:middle;}
textarea {resize:vertical;}
img, video {max-width:100%;}
input[type=text]::-ms-clear {display: none;}
select::-ms-expand {display:none;} /* IE 10-11 */
button::-moz-focus-inner {border:0;padding:0;} /* FF */
label, button {background-color:transparent;cursor:pointer}
a {text-decoration:none;}
address, caption, cite, code, dfn, em, i, var {font-style:normal;font-weight:normal}
legend, table caption {position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path: inset(50%);margin:-1px;}
table {width:100%;table-layout:fixed;border-collapse:collapse;}
th, td, textarea {word-wrap:break-word;}
html, body {height:100%;}
body {-webkit-text-size-adjust:none;background-color:#fff;}
body, h1, h2, h3, h4, h5, h6, strong, table, th, td, input, select, textarea, button, a {font-family:'Noto Sans KR', sans-serif;font-weight:400;font-size:13px;color:#666;}


/* root */
:root {
--ColorFont:#666;
--ColorLink:#1890ff;
--ColorFormBorder:#adadad;
--ColorWhite:#fafafa;
--ColorBk:#282828;
--ColorGray:#989898;
--ColorLightGray:#aaa;
--ColorYellow:#F6BB42;
--ColorSky:#3bafda;
--ColorBlue:#40a9ff;
--ColorPurple:#967adc;
--ColorGreen:#37bc9b;
--ColorOrange:#f97907;
--ColorRed:#da4453;
--HoverBk:#000;
--HoverGray:#6a6a6a;
--HoverSky:#27a2cf;
--HoverBlue:#0069d9;
--HoverPurple:#8362d6;
--HoverGreen:#30a487;
--HoverWhite:#ececec;
--HoverTransition:300ms cubic-bezier(0.215,0.61,0.355,1);
}

/* common */
.ac {text-align:center !important;}
.ar {text-align:right !important;}
.al {text-align:left !important;}
a.line {text-decoration:underline;text-underline-position:under;} /* underline */
.ast {color:#f97907;}
.ast_guide {display:inline-block;font-size:15px;font-weight:normal;letter-spacing:var(--LetterSpacing);color:#f97907;} /* asterisk */
.bold {font-weight:500 !important;}
.ds_ib {vertical-align:middle;display:inline-block;}
.els {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;} /* ellipsis */
.els_cl {overflow:hidden;text-overflow:ellipsis;word-wrap:break-word;display:-webkit-box;-webkit-box-orient:vertical;} /* line-clamp */
.fl {float:left;}
.fr {float:right;}
.vspace {display:block;clear:both;height:5px;}
.vspace.db {height:10px;}
.vtop, table.vtop th {vertical-align:top;}
.vmid, table.vmid th {vertical-align:middle;}
.vbot, table.vbot th {vertical-align:bottom;}
.sr_only {position:absolute;white-space:nowrap;width:1px;height:1px;overflow:hidden;border:0;padding:0;clip:rect(0 0 0 0);clip-path: inset(50%);margin:-1px;}
.ml {margin-left:10px;}
.mr {margin-right:10px;}
.mts {margin-top:5px;}
.mt {margin-top:10px;}
.mb {margin-bottom:10px;}

/* color */
.c_red {color:#da4453;}
.c_blue {color:#40a9ff;}

/* layout */
.adm {min-width:1500px;}
#header {position:fixed;z-index:100;display:flex;justify-content:space-between;left:0;top:0;width:100%;height:70px;background-color:#3f628f;} /* box-shadow:0 2px 4px rgba(0, 0, 0, 0.2); */
#header h1 a {display:flex;justify-content:center;align-items:center;width:240px;height:70px;}
#header .global {display:flex;justify-content:space-between;align-items:center;height:100%;padding:0 15px;}
#header .global .info {font-size:14px;color:#fff;}
#header .global .menu {margin-left:20px;}
#container {padding:70px 0 0 240px;}
#content {padding:15px;}

/* login */
.p_login {display:flex;justify-content:center;align-items:center;width:100%;height:100%;}
.p_login .inner {width:440px;margin:0 auto;}
/* .p_login .ct {padding:60px 100px;} */
.p_login .head {text-align:center;}
.p_login .head .guide {padding-top:30px;font-size:20px;font-weight:300;color:#333;}
.p_login .head .guide span {font-weight:500;}
.p_login .form {padding-top:20px;}
.p_login .box {position:relative;}
.p_login .box .m_icon {position:absolute;left:15px;top:50%;height:24px;transform:translateY(-50%);}
.p_login .box input[type="text"], .p_login .box input[type="password"] {width:100%;height:54px;padding:0 20px 0 50px;border:1px solid #d7d7d7;font-size:17px;font-weight:300;}
.p_login .box + .box {margin-top:15px;}
.p_login .enter {text-align:center;display:block;margin-top:15px;height:54px;line-height:54px;font-size:17px;color:#fff;background-color:#3f628f;}
.p_login .save {padding-top:10px;}
.p_login .save label {position:relative;top:-1px;margin-left:5px;font-size:15px;}
.p_login .help {margin-top:20px;padding-top:15px;border-top:1px dashed #ccc;}
.p_login .help ul {display:flex;justify-content:center;}
.p_login .help li + li {position:relative;}
.p_login .help li + li:before {content:" ";position:absolute;left:0;top:6px;width:1px;height:14px;background-color:#c5c5c5;}
.p_login .help a {display:block;padding:0 15px;color:#7c7c7c;}

/* side */
/* scroll */
.mCSB_scrollTools {opacity:0;}
.mCustomScrollBox:hover > .mCSB_scrollTools {opacity:1;}
/* side */
.side_nav .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width:6px;background-color:#807e7d !important;}
.side_nav {position:fixed;left:0;top:70px;z-index:30;width:240px;height:calc(100% - 70px);padding-bottom:100px;background-color:#123746;}
.side_nav .scroll {height:100%;overflow-y:auto;overflow-x:hidden;}
.side_nav .nav a {display:block;position:relative;padding:15px 20px 15px 45px;font-size:14px;font-family:"NotoSR";font-weight:bold;color:#99abb4;}
.side_nav .nav i {position:absolute;left:15px;top:17px;font-size:16px;}
.side_nav .nav .on > a, .side_nav .nav a:hover {color:#fff;}
.side_nav .nav > li > .opener:after {position:absolute;font-family:'Material Icons';color:#99abb4;transition:transform 0.3s ease;}
.side_nav .nav.top ul {background-color:#1e282c;}
.side_nav .nav ul a {font-family:"NotoSL";padding:10px 10px 10px 45px;}
.side_nav .nav.top ul a {font-size:13px;}
.side_nav .nav > li > .opener:after {content:"\e5cf";right:15px;top:16px;font-size:18px;}
.side_nav .nav > .on > .opener:after {color:#fff;transform:rotate(-180deg);}
.side_nav .nav > li > a:hover, .side_nav .nav > li > a:hover:before, .side_nav .nav .opener:hover:after {color:#fff;}
.side_nav .nav > li > a:hover {background-color:#092530;}
/*.side_nav .nav > li li .opener:after {content:"\e409";right:15px;top:13px;font-size:16px;}*/
/*.side_nav .nav > li .on > .opener:after {color:#fff;transform:rotate(-90deg);}*/
.side_nav .nav > li li .on > a:before {color:#fff;}
.side_nav .nav ul {display:none;}
.side_nav .nav ul ul {display:block;}
.side_nav .nav li{position: relative;}
.side_nav .nav > li li li a {padding-left:58px;}
.side_nav .nav .active, .side_nav .nav .on > .active {background:#092530;}
.side_nav .nav .active:before {content:" ";position:absolute;right:0;top:0;width:4px;height:100%;background-color:#1890ff;}
.side_nav .nav .active:after {color:#fff;}
.side_nav .foot {opacity:0.7;height:100px;padding:15px;font-size:12px;color:#99abb4;}
.side_nav .nav .b_blank{position: absolute;top:50%;transform: translateY(-50%); right:10px;vertical-align: middle;display: inline-block;height: 22px;line-height: 20px;padding: 0 4px;border-radius: 2px;font-family: 맑은고딕, "Malgun Gothic", sans-serif;font-size: 10px;letter-spacing: -0.3px;color: #99abb4;border:1px solid #99abb4;}
.side_nav .nav > li > ul > li > .opener:after {position: absolute;top:50%;transform: translateY(-50%); right:10px; content:"\e5cf";right:15px;top:16px;font-size:18px;color:#fff; font-family: 'Material Icons';}
.side_nav .nav > li > ul > li.on > .opener:after {color:#fff;transform:rotate(-180deg);}
.side_nav .favorites {padding:10px;}
.side_nav .favorites h4{color:#fff;text-align: center; font-size:14px; padding:7px; border:1px solid #fff;}
.side_nav .favorites ul{padding:10px;border:1px solid #fff;border-top:0;}
.side_nav .favorites li {position: relative;}
.side_nav .favorites li + li{margin-top:10px;}
.side_nav .favorites li a{display: block; color:#fff;}
.side_nav .favorites .b_del{position: absolute;top:50%;transform: translateY(-50%); right:0;vertical-align: middle;display: inline-block;height: 22px;line-height: 20px;padding: 0 4px;border-radius: 2px;font-family: 맑은고딕, "Malgun Gothic", sans-serif;font-size: 10px;letter-spacing: -0.3px;color: #99abb4;border:1px solid #99abb4;}

.window_open_popup .side_nav{transition: all 0.3s ease-in-out;transform: translateX(-100%);background: rgba(18, 55, 70, 0.93);top: 0px;height: calc(100% - 50px);padding-top: 50px;}
.window_open_popup .side_nav.active{transform: translateX(0%);}

.window_open_popup .side_nav .nav{overflow: hidden; overflow-y: auto; max-height: calc(100vh - 230px); max-height: 100%;}
.window_open_popup .side_nav .nav > li > a {padding-left: 20px;}
.window_open_popup .side_nav h2{ font-size: 16px;color: #fff;padding: 10px;background: #444040;}
.window_open_popup .side_nav h2 i{margin-right: 10px}
.window_open_popup .close_nav{font-size: 20px;color: #fff;position: absolute;top: 10px;right: 10px;}

 /* foreword */
.foreword {display:flex;justify-content:space-between;align-items:center;height:50px;padding:0 15px;border-bottom:1px solid #d5d5d5;background:#f5f5f5;}
.foreword h2 {position: relative; display: flex; align-items: center; font-size:20px;font-family:"NotoSR";font-weight:bold;color:#222;}
.foreword h2 a{display: flex;margin-left:5px;}
.foreword .path span {font-size:14px;}
.foreword .path span + span:before {content:">";margin:0 4px 0 2px;}

/* snippet */
.file_li {position:relative;margin-top:10px;padding:5px;border:1px solid #adadad;background-color:#f6f9fb;}
.file_li li + li {margin-top:5px;}
.file_li .file {vertical-align:middle;display:inline-block;font-size:13px;color:#1890ff;}
.file_li .file:hover {text-decoration:underline;text-underline-position:under;}
.file_li .del {vertical-align:middle;display:inline-block;width:20px;height:20px;margin-left:5px;background:url("../../images/adm/icon/k_icon_del.png") no-repeat 50% 50%;}
.manage_part {display:flex;}
.manage_part .scroll {overflow:scroll;border:2px solid #adadad;padding:5px;}
.manage_part .col + .col {margin-left:10px;}
.manage_part .edit {padding:10px;border:1px solid #adadad;background-color:#f5f5f5;}
.manage_part .edit + .viewer {margin-top:10px;}
.manage_part .row_group {display:flex;justify-content:space-between;}
.manage_part .row_group + .row_group {margin-top:10px;}
.manage_part .row_group .lab {flex-shrink:0;width:80px;font-weight:500;color:#000;}
.manage_part .row_group .ip {flex-grow:1;}
.manage_part .sb {display:flex;justify-content:space-between;}
.sorter_li {vertical-align:middle;display:inline-block;}
.sorter_li li {float:left;}
.sorter_li a {position:relative;display:block;padding:0 10px;}
.sorter_li a:before {content:" ";position:absolute;left:0;top:4px;width:1px;height:12px;background-color:#898989;}
.sorter_li .desc a, .sorter_li .asc a {padding-right:20px;font-weight:500;color:#212112;}
.sorter_li .desc a:after, .sorter_li .asc a:after {content:" ";position:absolute;right:3px;top:50%;width:16px;height:16px;margin-top:-7px;background:url("../../images/adm/icon/ic_form_sprite.png") no-repeat 0 0;}
.sorter_li .desc a:after {background-position:0 -32px;}
.sorter_li li:first-child a:before {display:none;}
.tb_info {margin-bottom:10px;padding:10px 15px;border:2px solid #6fb5cf;background-color:#edf2f7;}
.tb_info ul {display:flex;align-items: center;}
.tb_info li {position:relative;font-family:NotoSL;font-weight:bold;font-size:14px;color:#000;}
.tb_info li + li {margin-left:10px;padding-left:10px;}
.tb_info li + li::before {content:" ";position:absolute;left:0;top:50%;width:1px;height:16px;background-color:#cacaca;transform:translateY(-50%);}

/* title */
.ct_title {position:relative;line-height:1;margin-bottom:15px;padding-left:12px;font-size:16px;font-family:"NotoSL";font-weight:bold;color:#222;}
.ct_title:before {content:" ";position:absolute;left:0;top:6px;width:6px;height:6px;background-color:#6fb5cf;}

/* form */
.ip_gp {vertical-align:middle;display:inline-block;}
textarea {width:100%;height:80px;padding:10px;border:1px solid #adadad;border-radius:0;background-color:#f6f9fb;}
select {height:28px;border:1px solid #adadad;}
input[type="checkbox"] {width:16px;height:16px;}
input[type="text"], input[type="password"] {height:28px;padding:0 10px;border:1px solid #adadad;}
input[type="text"].wide, input[type="password"].wide, select.wide {width:100% !important;max-width:none !important;}
input[readonly] {background-color:#f1f1f1;}
label + input[type="radio"] {margin-left:7px;}

/* form box */
.sch_box {margin-bottom:15px;padding:10px;border:1px solid #d9d9d9;background-color:#edf2f7;}
.sch_box .group + .group {margin-top:5px;}
.sch_box .ip_gp + .ip_gp {margin-left:10px;}
.sch_box .lab {vertical-align:middle;display:inline-block;margin-right:5px;font-weight:500;color:#222;}
.sch_box select {min-width:120px;}
.sch_bar {margin-bottom:15px;}
.sch_bar .inner {display:flex;}
.sch_bar .col + .comb {margin-left:3px;}
.sch_bar .col {flex-shrink:0;width:30%;}
.sch_bar .comb {position:relative;width:100%;padding-right:62px;}
.sch_bar .comb .c_btn {position:absolute;right:0;top:0;}
.sch_bar .comb .key {width:100%;}
.sch_bar .col select {width:100%;}
.cb_bar {display:flex;justify-content:space-between;align-items:flex-end;margin-top:10px; margin-bottom: 10px;}
.cb_bar.right {justify-content:flex-end;}
.cb_bar.top {margin-top:15px;}
.cb_bar .lab {vertical-align:middle;display:inline-block;font-weight:500;margin-right:5px;}
.cb_bar > div a + a{margin-left:5px;}

/* jquery ui */
.ui-dialog-content p {margin:0.7em 0 0 0;}
.ui-bar {display:flex;justify-content:center;margin:10px 0;}
.ui-bar .ui-button {margin:0 3px;}
.ad_datepicker {vertical-align:middle;display:inline-block;position:relative;}
.ad_datepicker .ui-datepicker-trigger {position:absolute;right:1px;top:1px;width:26px;height:26px;border-left:1px solid #adadad;}
.ad_datepicker .ui-datepicker-trigger:before {content:" ";position:absolute;left:50%;top:6px;width:16px;height:16px;margin-left:-8px;background:url("../../images/adm/icon/ic_form_sprite.png") no-repeat -48px -176px;}
.ad_datepicker input {width:115px;padding-right:28px;}
.ui-datepicker .ui-datepicker-title select {height:auto;margin-top:-2px;padding:0;}
.ui-datepicker .ui-datepicker-prev-hover, .ui-datepicker .ui-datepicker-next-hover {top:2px;}
.ui-datepicker .ui-datepicker-next-hover {right:2px;}
/*.c_date {display:inline-block;}
.c_date.k-datepicker {width:auto !important;}
.c_date .k-picker-wrap {width:100px;}
.k-upload-empty .k-button.k-upload-button {margin:0;}*/

/* input, width */
.wd_xs {width:50px;}
.wd_s {width:70px;}
.wd_sm {width:100%;max-width:120px;}
.wd_m {width:100%;max-width:250px;}

/* grade_cell */
.grade_cell .cs_grade{position: relative; padding-top:25px;}
.grade_cell .g_close{vertical-align: middle;display: inline-block;width: 20px;height: 20px;margin-left: 5px;background: url(../../images/adm/icon/k_icon_del.png) no-repeat 50% 50%;position: absolute;right: 5px;top: 0;z-index: 2;}

/* tbl_calenar */
.tbl_calenar .calendar_head .year_mon{font-size:20px;color:#000;margin:0 10px;}
.tbl_calenar th{font-size:16px; height:40px;font-weight: bold; border:1px solid #dfdfdf;}
.tbl_calenar td{ text-align: center;font-size:15px;height: 90px;border:1px solid #dfdfdf;cursor: pointer;}
/* .tbl_calenar td:nth-child(2) a{color:blue;} */
.tbl_calenar .week a,
.tbl_calenar .date a{color:#333;font-size: 16px;}
.tbl_calenar td.date:hover{color:#1e4895; background: #f5f5f5; font-weight: bold;}
.calendar_head{display: flex;justify-content: center;align-items: center;margin-bottom:10px;}
.calendar_head .b_cal{position: relative; border:1px solid #333; width: 22px; height: 22px; border-radius: 50%;opacity: 0.5;}
.calendar_head .b_cal:hover{opacity: 1;}
.calendar_head .b_cal::before{position: absolute; top:50%;  transform: translate(-50%, -50%); display: block; width: 11px;height: 11px;background: url(../../images/adm/icon/ic_form_sprite.png) no-repeat;}
.calendar_head .pre_mon::before{content: ''; background-position: -165px -226px;left:calc(50% + 1px);}
.calendar_head .next_mon::before{content: '';background-position: -160px -194px;left:calc(50% - 2px);}
/* .tbl_calenar .pre_mon::before{content: '\e5de';} */
/* .tbl_calenar .next_mon::before{content: '\e5df';} */
.tbl_calenar .colselect{color:#1e4895;font-weight: bold;background:#fff4b5;}
.tb_bar{position: relative;}
.tb_bar .tit_week{color:#000;text-align: center;font-size:16px;display: inline-block;margin:0 8px;}
.tb_bar .st_bar{position: absolute;top:3px;left:0;padding:2px 10px;background: #ff8c8c;}
.tb_bar .st_bar span{color:#fff;}

/* tbl_cl*/
.tbl_cl .tbl_col td{padding:0;}
.tbl_cl .tbl_col .use_stop{background: #808080;}
.tbl_cl .tbl_col .cl_frame{position: relative;height:100%;}
.tbl_cl .tbl_col .cl_event{position: absolute;}
.tbl_cl .tbl_col .cl_event .cl_bar{display:flex;flex-direction: column; }
.tbl_cl .tbl_col .cl_event .cl_bar a{display: block;height:20px;line-height:20px;font-size:11px; padding:0 4px;border-radius:3px; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;word-break: break-all;z-index: 10;}
.tbl_cl .tbl_col .cl_event .cl_bar a:hover{opacity: 0.7;}
.tbl_cl .td_day{font-size:15px; color:#333; font-weight: bold;text-decoration:underline;}

/* tbl_day */
/* .tbl_day .tbl_col .cl_event{top:50%;transform: translateY(-50%);} */

/* button */
.ad_btn, td .ad_btn, .bt_new, .bt_del, .bt_modify, .bt_detail, .bt_save  {text-decoration:none;text-align:center;vertical-align:middle;display:inline-block;padding:0 10px;height:28px;line-height:28px;border-radius:2px;font-size:13px;color:#fff;}
.ad_badge {vertical-align:middle;display:inline-block;height:20px;line-height:20px;padding:0 4px;border-radius:2px;font-family:맑은고딕, "Malgun Gothic", sans-serif;font-size:12px;letter-spacing:-0.3px;color:#fff;}
.ad_btn.white {line-height:27px;border:1px solid #adadad;color:#666;background-color:#fafafa;}
.ad_btn.l_gray {background-color:#aaa;}
.ad_btn.gray, .ad_badge.gray {background-color:#989898;}
.ad_btn.bk, .ad_badge.bk, .bt_new, .bt_modify, .bt_detail {background-color:#282828;}
.ad_btn.blue, .ad_badge.blue {background-color:#40a9ff;}
.ad_btn.sky, .ad_badge.sky {background-color:#3bafda;}
.ad_btn.purple, .ad_badge.purple {background-color:#967adc;}
.ad_btn.green, .ad_badge.green, .bt_save {background-color:#37bc9b;}
.ad_btn.orange, .ad_badge.orange {background-color:#f97907;}
.ad_btn.red, .ad_badge.red, .bt_del {background-color:#da4453;}
.ad_btn.white:hover {background-color:#ececec;}
.ad_btn.bk:hover {background-color:#000;}
.ad_btn.gray:hover {background-color:#6a6a6a;}
.ad_btn.blue:hover {background-color:#0069d9;}
.ad_btn.sky:hover {background-color:#27a2cf;}
.ad_btn.purple:hover {background-color:#8362d6;}
.ad_btn.green:hover {background-color:#30a487;}
.ad_btn.sm, .bt_new.sm, .bt_del.sm, .bt_modify.sm, .bt_detail.sm, .bt_save.sm {height:24px;line-height:24px;padding:0 5px;font-family:sans-serif;font-size:12px;}
.ad_btn.mid, .bt_new.md, .bt_del.md, .bt_modify.md, .bt_detail.md, .bt_save.md, .ad_btn.md {height:36px;line-height:36px;padding:0 15px;font-size:14px;}

/* button box */
.b_box {display:flex;justify-content:center;padding-top:10px;}
.b_box.right {justify-content:flex-end;}
.b_box.sb {justify-content:space-between;}
.b_box.dtop {padding-top:40px;}
.b_box .ad_btn {margin:2px;}

/* tab menu */
.nav_tabs {margin-bottom:15px;border-bottom:1px solid #cacaca;}
.nav_tabs.top {margin-top:15px;}
.nav_tabs:after {content:" ";clear:both;display:block;}
.nav_tabs > li {text-align:center;position:relative;top:1px;float:left;margin-left:-1px;border:1px solid #fff;border-bottom:0;background-color:#fff;}
.nav_tabs > li:first-child {margin-left:0;}
.nav_tabs > li.on {z-index:10;border-color:#cacaca;border-left:1px solid #cacaca;border-right:1px solid #cacaca;}
.nav_tabs > li > a {display:block;height:36px;line-height:36px;padding:0 15px;font-size:14px;background-color:#f6f6f8;}
.nav_tabs > li.on > a {height:38px;color:#333;font-weight:500;background-color:#fff;}
.nav_link {display:flex;margin-bottom:15px;}
.nav_link > li a {display:block;padding:0 10px;}
.nav_link > .on a {text-decoration:underline;text-underline-position:under;color:#1890ff;}
.tabs_area .side_nav{display: none}
.nav_tabs.nav_transform > li a{padding-right: 37px;}
.nav_tabs.nav_transform > li a + .del {
    vertical-align: middle;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    background: url(../../images/adm/icon/k_icon_del.png) no-repeat 50% 50%;
    position: absolute;
    right: 10px;
    top: 8px;
    z-index: 2;
}
.tabs_area{
    width: calc(100vw - 270px);
    height: calc(100vh - 200px);
}
.nav_tabs.nav_transform > li.tab_add{
   border: none;
}
.nav_tabs.nav_transform > li.tab_add a{
    background: none;
    color:#147ed5;
}
.top_tabs {margin-bottom:10px;padding-bottom:20px;}
.top_tabs.top {margin-top:15px;}
.top_tabs:after {content:" ";clear:both;display:block;}
.top_tabs > li {text-align:center;position:relative;top:1px;float:left;margin-left:-1px;border:1px solid #dfdfdf;background-color:#fff;}
.top_tabs > li + li{margin-left:5px;}
.top_tabs > li:first-child {margin-left:0;}
.top_tabs > li.on {z-index:10;border-color:#cacaca;border-left:1px solid #cacaca;border-right:1px solid #cacaca;}
.top_tabs > li.on::before{position: absolute; left:50%; bottom:-20px; transform: translateX(-50%); content: '';border-top: 20px solid #666666;border-left: 10px solid transparent;border-right: 10px solid transparent;}
.top_tabs > li > a {display:block;height:36px;line-height:36px;padding:0 20px;font-size:16px;background-color:#f6f6f8;}
.top_tabs > li.on > a {height:38px;color:#333;font-weight:500;background-color:#fff;}
.tab_area{padding:20px;border:1px solid #dfdfdf;}

/* table */
.tb_note {position:relative;line-height:1.4;margin-top:10px;font-size:13px;}
.tb_note.blue {color:#40a9ff;}
td a {text-decoration:underline;text-underline-position:under;color:#1890ff;}
tr.high th, tr.high td {background-color:#fefedf;}
/* col */
.tbl_col {border-top:2px solid #6fb5cf;background-color:#fff; table-layout: auto}
.tbl_col thead {background-color:#edf2f7;}
.tbl_col th, .tbl_col td {text-align:center;height:38px;line-height:1.4;padding:8px;border:1px solid #d9d9d9;font-size:13px;}
.tbl_col th {font-weight:500;color:#000;}
.tbl_col tr:nth-child(even) {background-color:#f5f5f5;}
th .sorter {display:inline-block;position:relative;font-weight:500;color:#000;}
th .sorter .arrow {display:none;position:absolute;right:0;top:50%;width:16px;height:16px;margin-top:-8px;}
th .sorter.asc, th .sorter.desc {padding-right:18px;}
th .sorter.asc .arrow, th .sorter.desc .arrow {display:block;background:url("../../images/adm/icon/ic_form_sprite.png") no-repeat 0 0;}
th .sorter.desc .arrow {background-position:0 -32px;}
.tbl_col.description td strong{color:var(--ColorGreen)}
.tbl_col.description td strong.red{color:var(--ColorRed)}
.tbl_col.description td{padding:20px 8px;}
.description-guide{margin-top: 20px;}
.description-guide li{display: block;position: relative;padding-left: 20px;line-height: 20px;margin-bottom: 10px;}
.description-guide li:before{content:'';background: #000;width: 2px;height: 2px;top: 8px;display: block;position: absolute;left: 10px;}
.description-guide li span{}
.overflow-x-auto{overflow-x: auto;}
.overflow-x-auto .tbl_col.tbl_lg{width: 2000px;}

/* row */
.tbl_row {border-top:2px solid #6fb5cf;background-color:#fff;}
.tbl_row th, .tbl_row td {text-align:left;height:45px;padding:8px;font-size:13px;border-bottom:1px solid #d9d9d9;}
.tbl_row th {font-weight:500;color:#000;background-color:#edf2f7;}

/* paginate */
.paginate {text-align:center;padding-top:10px;}
.paginate li {display:inline;}
.paginate .inner {vertical-align:top;display:inline-block;margin-left:1px;}
.paginate .inner a, .paginate .inner span {text-align:center;float:left;width:28px;height:28px;margin-left:-1px;line-height:27px;border:1px solid #adadad;color:#1890ff;font-size:12px;background-color:#fff;}
.paginate .inner a:hover {background-color:#f8f8f8;}
.paginate .inner .on {background-color:#edf2f7;}
.paginate .img img {vertical-align:top;}
.paginate.top {padding-top:0;}
.paginate .img {position:relative;}
.paginate .img img {display:none;}
.paginate .img:before {content:" ";position:absolute;left:50%;top:50%;width:16px;height:16px;background:url("../../images/adm/icon/ic_form_sprite.png") no-repeat 0 0;transform:translate(-50%, -50%);}
.paginate .start:before {background-position:0 -112px;}
.paginate .prev:before {background-position:0 -48px;}
.paginate .next:before {background-position:0 -16px;}
.paginate .end:before {background-position:0 -80px;}
.paginate.info {position:relative;}
.paginate.info .count {position:absolute;left:0;bottom:10px;}
.paginate.info .count > span:not(:last-of-type):after  {content:'∙';margin:0 2px 0 5px;}
.paginate.info .count .current {color:#1890ff;}

/* content */

/* popup content */


/* p_frame */
.page_frame {padding:75px 0 10px 0;}
.page_frame .frm_top {position:fixed;top:0;z-index:100;width:100%;border-bottom:1px solid #ccc;background:#fff;}
.page_frame .frm_top .inner {position:relative;height:70px;padding-right:70px;}
.page_frame .frm_top .head {display:flex;align-items:center;height:100%;}
.page_frame .frm_top h1 {padding:0 20px;font-size:26px;font-weight:500;letter-spacing:-0.5px;color:#212121;}
.page_frame .frm_top .noti {text-align:center;position:absolute;width:100%;}
.page_frame .frm_top .desc {display:inline-block;position:relative;line-height:40px;border:1px solid #e1e1e1;padding:0 15px 0 45px;border-radius:18px;font-size:17px;color:#212121;background-color:#f5f5f5;}
.page_frame .frm_top .desc .time {position:relative;margin-right:10px;font-weight:normal;color:#31a2a3;}
.page_frame .frm_top .noti i {position:absolute;left:15px;top:50%;height:24px;transform:translateY(-50%);}
.page_frame .frm_top .noti i:before {color:#31a2a3;}
.page_frame .frm_top .title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:800px;height:60px;line-height:60px;margin:0 auto;padding:0 20px;font-size:24px;font-weight:500;letter-spacing:-0.5px;color:#212121;}
.page_frame .frm_top .menu {display:flex;align-items:center;position:absolute;right:0;top:0;}
.page_frame .frm_top .menu ul {margin-right:20px;}
.page_frame .frm_top .menu li {float:left;margin-left:5px;}
.page_frame .frm_top .x {text-align:center;display:block;position:relative;width:70px;height:70px;border-left:1px solid #ddd;background-color:#fff;}
/*.page_frame .frm_top .x:hover {background-color:#f8f8f8;}*/
.page_frame .frm_top .clear {position:absolute;left:50%;top:50%;height:24px;transform:translate(-50%, -50%);}
.page_frame .frm_top .clear:before {color:#000;}
.page_frame .frm_ct {max-width:1400px;margin:0 auto;padding:30px 20px;border-radius:4px;background-color:#fff;}
.page_frame .fwd {position:fixed;top:60px;z-index:100;width:100%;height:30px;padding:0 10px;border-bottom:1px solid #ccc;background-color:#f5f5f5;}
.page_frame .fwd ul {overflow-x:auto;white-space:nowrap;max-width:1300px;margin:0 auto;}
.page_frame .fwd ul:after {content:" ";clear:both;display:block;}
.page_frame .fwd li {position:relative;float:left;line-height:29px;padding:0 10px;font-size:13px;color:#212121;}
.page_frame .fwd li:before {content:" ";position:absolute;left:0;top:50%;width:1px;height:10px;margin-top:-5px;background-color:#fff;}
.page_frame .fwd li:first-child:before {display:none;}
.page_frame .fwd .info {display:flex;justify-content:space-between;max-width:1300px;margin:0 auto;}
.page_frame .fwd .info span {display:inline-block;line-height:30px;font-size:13px;font-weight:bold;color:#000;}
.page_frame .fwd span:not(:last-of-type):after {content:'∙';margin:0 0 0 3px;}

/* ct_dialog */
.ct_dialog {position:fixed;left:0;top:0;z-index:110;width:100%;height:100%;background:rgba(0, 0, 0, 0.4);}
.ct_dialog > .tb {display:flex;justify-content:center;align-items:center;width:100%;height:100%;}
.ct_dialog > .tb > .inner {width:100%;padding:10px;}
.ct_dialog .outer {margin:0 auto;}
.ct_dialog .outer > .top {height:46px;background-color:#212121;}
.ct_dialog .outer > .top .bowl {position:relative;height:100%;}
.ct_dialog .outer > .top .title {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;line-height:45px;padding:0 30px 0 15px;font-size:17px;font-family:NotoSL;font-weight:bold;color:#fff;}
.ct_dialog .outer > .top .p_close {position:absolute;right:5px;top:8px;width:30px;height:30px;}
.ct_dialog .outer > .top .p_close:before {content:"\e14c";position:absolute;left:50%;top:50%;line-height:1;font-family:'Material Icons';font-size:24px;color:#fff;transform:translate(-50%, -50%);}
.ct_dialog .outer > .ct {max-height:80vh;overflow-y:auto;padding:15px;background-color:#fff;}
.ct_dialog.alert .outer > .top {height:50px;padding:0 20px;}
.ct_dialog.alert .outer > .top .title {line-height:50px;font-size:20px;}
.ct_dialog.alert .outer > .top .bowl {border-bottom:0;}
.ct_dialog.alert .outer > .ct {padding:0 20px 20px 20px;}
.ct_dialog .at_desc {word-break:keep-all;font-size:15px;}

/* map */
.teacher_qr{padding:10px;}
.teacher_qr .qr_box{text-align: center;margin-top:10px;}
.teacher_qr .qr_box canvas{margin:0 auto;max-width: 203px;max-height: 203px;}
.teacher_qr .b_box + table{margin-top:20px ;}

/* working */
.working {display:flex;flex-direction:column;justify-content:center;align-items:center;height:calc(100vh - 150px);}
.working .guide {margin-top:50px;}
.working .guide h2 {line-height:1;font-size:42px;font-weight:700;color:#002231;}

/* slick */
.slick-slider {position:relative;display:block;box-sizing:border-box;-webkit-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent;}
.slick-list {position:relative;display:block;overflow:hidden;margin:0;padding:0;}
.slick-list:focus {outline:none;}
.slick-list.dragging {cursor:hand;}
.slick-slider .slick-track, .slick-slider .slick-list {-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}
.slick-track {position:relative;top:0;left:0;display:block;}
.slick-track:before, .slick-track:after {display:table;content:'';}
.slick-track:after {clear:both;}
.slick-loading .slick-track {visibility:hidden;}
.slick-slide {display:none;float:left;height:100%;min-height:1px;}
.slick-slide:focus {outline:none;}
[dir='rtl'] .slick-slide {float:right;}
.slick-slide img {display:inline-block;}
.slick-slide.slick-loading img {display:none;}
.slick-slide.dragging img {pointer-events:none;}
.slick-initialized .slick-slide {display:block;}
.slick-loading .slick-slide {visibility:hidden;}
.slick-vertical .slick-slide {display:block;height:auto;border:1px solid transparent;}
.slick-arrow.slick-hidden {display:none;}
.slick-dots {text-align:center;}
.slick-dots li {display:inline-block;}
.slick-dots li button {text-indent:-9999px;overflow:hidden;}
.slick-arrow {text-indent:-9999px;overflow:hidden;z-index:10;}
.slick-prev {left:0;}
.slick-next {right:0;}
.slick-slider {opacity:0;visibility:hidden;transition:opacity 1s ease;}
.slick-slider.slick-initialized {visibility:visible;opacity:1;}

/* ui-dialog */
.ui-dialog .ui-dialog-content {font-size: 16px}
.ui-dialog .ui-dialog-title{font-size: 16px}
.button1, .button2 {text-align:center;display:inline-block;position:relative;padding:0.4em 1em;border:1px solid #c5c5c5;border-radius:3px;background-color:#f6f6f6;}
.button1:hover, .button2:hover {border:1px solid #ccc;color:#2b2b2b;background-color:#ededed;}


/*excel-guide*/
.excel-guide{font-size: 14px;padding-bottom: 10px;}
.excel-guide strong{color: red;font-size: 14px;}
.excel-guide ul{padding: 12px 15px 5px 15px;background: #f5f5f5;border-radius: 10px;margin-top: 10px;font-size: 13px;margin-bottom: 20px;}
.excel-guide ul li{margin-bottom: 10px;position: relative;padding-left: 10px;line-height: 22px;}
.excel-guide ul li:before{content: '';position: absolute;width: 2px;height: 2px;background: #1890ff;top: 9px;border-radius: 50%;left: 0;}

/* dashboard*/
.dash-head{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    background: #fff;
}
.dash-head a{padding:15px ;}
.dash-head i{margin-right: 10px;}
.dash{padding:20px;}
.dash .my_state {margin-top:30px;margin-bottom:80px;}
.dash .my_state .after, .dash .my_state .before {padding-left:25px;}
.dash .my_state .q_link {display:flex;flex-direction:column;}
.dash .my_state .q_link a {height:50%;padding:35px 30px 0 100px;border:1px solid #dbdbdb;}
.dash .my_state .q_link a + a {margin-top:25px;}
.dash .my_state .q_link .lab {font-size:20px;font-weight:700;letter-spacing:-0.5px;color:#222;}
.dash .my_state .q_link p {margin-top:10px;font-size:15px;color:#898989;}
.dash .my_state .q_link .cert {background:url("../../images/www/icon/dash_link_cert.png") no-repeat 30px 50%;}
.dash .my_state .q_link .app {background:url("../../images/www/icon/dash_link_app.png") no-repeat 30px 50%;}
.dash .my_state .tbl {height:100%; position: relative;overflow: hidden;border-radius: 5px;
    -webkit-box-shadow: 0 1px 2.94px 0.06px rgb(4 26 55 / 16%);
    box-shadow: 0 1px 2.94px 0.06px rgb(4 26 55 / 16%);
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}
.dash .my_state .tbl.card-blue .title{
    background: linear-gradient(45deg, #4099ff, #73b4ff);
    color:#fff
}

.dash .my_state .tbl.card-green .title{
    background: linear-gradient(45deg, #2ed8b6, #59e0c5);
    color:#fff
}
.dash .my_state .tbl.card-yellow .title{
    background: linear-gradient(45deg, #FFB64D, #ffcb80);
    color:#fff
}
.dash .my_state .tbl.card-pink .title{
    background: linear-gradient(45deg, #FF5370, #ff869a);
    color:#fff
}

.dash .my_state .tbl .title {line-height:55px;padding:0 25px;font-size:15px;font-weight:500;color:#484848;background-color:#edf2f7;}
.dash .my_state .data {padding:25px 35px;}
.dash .my_state .data .top {display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;padding-bottom:15px;border-bottom:2px solid #333;}
.dash .my_state .data h5 {position:relative;line-height:1;padding-left:10px;font-size:18px;font-weight:700;letter-spacing:var(--LetterSpacing);color:var(--ColorGreen);}
.dash .my_state .data h5:before {content:" ";position:absolute;left:0;top:1px;width:5px;height:17px;background-color:var(--ColorGreen);}
.dash .my_state .data .more {font-size:14px;color:#7a7a7a;}
.dash .my_state .cols {display:flex;}
.dash .my_state .cols .group {width:50%;}
.dash .my_state .cols .group + .group {margin-left:40px;}
.dash .my_state .cell {/*display:flex; */text-align: right}
.dash .my_state .cell .count {font-size: 18px; color:var(--ColorRed);margin-right: 10px}
.dash .my_state .cell .text {font-size: 18px; color:var(--ColorBk);}
.dash .my_state .cell .lab {flex-shrink:0;width:50%;padding:0 0 0 15px;font-size:15px;font-weight:500;color:#535353;}
.dash .my_state .cell .val {text-align:right;position:relative;flex-grow:1;padding:0 15px;font-size:15px;}
.dash .my_state .cell .val:before {content:" ";position:absolute;left:0;top:4px;width:1px;height:14px;background-color:#c5c5c5;}
.dash .my_state .cell + .cell {margin-top:12px;}
.dash .img.icon{position: relative;width: 107px;height: 107px;line-height: 107px;margin: 0 auto;border: 2px solid #67a133;border-radius: 50%;font-size: 24px;font-weight: 700;color: #fff;background-color: #fff;background-repeat: no-repeat;background-position: 50% 50%;}
.dash .icon.icon-edu{background-image: url(../../images/www/icon/step_basic_off.png);}
.dash .icon.icon-exam{background-image: url(../../images/www/icon/step_write_off.png);}
.dash .s_step {justify-content:center;padding:40px 0 30px 0;}
.dash .s_step .group {text-align:center;position:relative;}
.dash .s_step .group:before {content:" ";position:absolute;left:0;top:93px;width:100%;height:1px;background-color:#d8d8d8;}
.dash .s_step .group + .group {padding-left: 15px;}
.dash .my_prog .lab {margin-bottom: 0;font-size: 15px;font-family:NotoSR;font-weight:bold;color:#222;background: #3bafda;color: #fff;padding: 10px;border-radius: 10px 10px 0 0;}
.dash .my_prog .img { min-width: 100px;position:relative;width: 100%;height:107px;line-height:107px;margin:0 auto;border: none;border-radius: 0;font-size: 15px;font-weight:700;color: #393939;background-color: #f6f6f6 !important;background-repeat:no-repeat;background-position:50% 50%;background-image: none !important;}
.dash .my_prog .basic .img {background-image:url("../../images/www/icon/step_basic_off.png");}
.dash .my_prog .write .img {background-image:url("../../images/www/icon/step_write_off.png");}
.dash .my_prog .work .img {background-image:url("../../images/www/icon/step_work_off.png");}
.dash .my_prog .re .img {background-image:url("../../images/www/icon/step_re_off.png");}
.dash .my_prog .bar {margin-top:15px;}
.dash .my_prog .btn {display:inline-block;line-height:40px;padding:0 18px;border:1px solid #c4c4c4;font-size:15px;font-family:NotoSL;font-weight:bold;color:#393939;background-color:#fff;}
.dash .my_prog .btn.disable {border:0;color:#fff;background-color:#d3d3d3;}
.dash .s_step .group.active .img {background-color:#67a133;}
.dash .my_prog .basic.active .img {background-image:url("../../images/www/icon/step_basic_on.png");}
.dash .my_prog .write.active .img {background-image:url("../../images/www/icon/step_write_on.png");}
.dash .my_prog .work.active .img {background-image:url("../../images/www/icon/step_work_on.png");}
.dash .my_prog .re.active .img {background-image:url("../../images/www/icon/step_re_on.png");}
.dash .tbl .ad_btn{position: absolute; top:12px; right:20px}
.dash .my_prog3 .lab{background: none;color: #000;font-weight: bold;margin-bottom: 30px;}
.dash .my_prog3 .img{border-radius: 50%;height: 100px;width: 100px;}
.dash .my_prog3 .group:before{display: none;}

.dash .my_prog4 .lab{background: none;color: #000;font-weight: bold;margin-bottom: 10px;min-height: 70px;}
.dash .my_prog4 .img{border-radius: 50%;height: 100px;width: 100px;background: #bee8c7;}
.dash .my_prog4 .group:before{display: none;}

.resource_area{display: flex}
.resource_area .file_tree{width:40%;}
.resource_area .file_tree .plugin_tree{border:1px solid #eee;min-height: 680px; padding:10px;margin-right: 10px;}
.resource_area .file_cont{width:60%;}
.resource_area .file_info .detail{border-top: 1px solid #eee;border-right: 1px solid #eee;background: #d7e7ef;margin-bottom: 10px;}
.resource_area .file_info .detail > div{width: 100%;justify-content: space-between;align-items: center;display: flex;border-bottom: 1px solid #eee;}
.resource_area .file_info .detail > div .value{width: 80%;padding: 10px;color: #000;background: #fff;}
.resource_area .file_info .detail > div .tit{background: #d7e8ef;width: 20%;display: block;color: #666;padding-left: 10px;}
.resource_area .file_info .upload{border-top: 1px solid #eee;border-right: 1px solid #eee;background: #d7e7ef; width:50%;display: inline-block;float: left;}
.resource_area .file_info .upload > div{width: 100%;justify-content: space-between;align-items: center;display: flex;border-bottom: 1px solid #eee;}
.resource_area .file_info .upload > div .value{width: 80%;padding: 10px;color: #000;background: #fff;border: none;text-align: left;}
.resource_area .file_info .upload > div .tit{background: #d7e8ef;width: 20%;color: #666;display: block;padding-left: 10px;}
.resource_area .file_info .preview {width:100%;overflow: auto;margin-bottom: 10px;}
.resource_area .file_info .upload textarea {height:187px;resize: none;}
.resource_area .plugin_preview {width:50%;display: inline-block;float: left;padding-right: 5px;}
.resource_area .preview.html .plugin_preview{width:100%}
.resource_area .preview.html .plugin_preview textarea{width:100%; height:400px; background: #fff}
.resource_area .preview.html .upload{width:100%}

.survey_result{border: 1px solid #6db5cf;border-bottom: none;}
.survey_result dl{border-bottom: 1px solid #6eb5cf;padding: 10px;line-height: 2;}
.survey_result dt{font-weight: bold;font-size: 13px;color: #000;}
.survey_result dd{padding-left: 20px;}
.survey_result ol{}
.survey_result li{display: flex;justify-content: space-between;min-height: 30px;line-height: 30px;vertical-align: middle;align-items: center;}
.survey_result .progressbar{width: 60%;height: 20px;appearance: none;margin-top: 5px;}
.survey_result .progressbar::-webkit-progress-bar {background:#f0f0f0;border-radius:30px; /*box-shadow: inset 3px 3px 10px #ccc;*/}
.survey_result .progressbar::-webkit-progress-value {border-radius:30px;background: #6eb5cf;/* background: -webkit-linear-gradient(to left, #93F9B9, #1D976C); background: linear-gradient(to left, #93F9B9, #1D976C);*/}
.survey_result li span{width: 20%;vertical-align: top;line-height: 23px;}
.survey_result li span.per{color: #000;padding-left: 20px;}
.survey_result li span.val{text-align: right;color: #000; padding-right: 20px}

#sortable {list-style-type: none;margin: 0;width: auto;padding: 2px;}
#sortable li {margin-bottom: 2px;padding: 0.4em;padding-left: 1.5em;font-size: 15px;min-height: 25px;box-sizing: border-box;vertical-align: top;width: 100%;}
#sortable li span {position: absolute;margin-left: -1.3em;margin-top: 5px;}

.exam .box{display: block;overflow: hidden;border: 1px solid #ddd;border-radius: 5px;margin-bottom: 20px;}
.exam .title{align-items: center; border-bottom: 1px dotted #ddd;background:#edf2f7;font-weight: bold;line-height: 20px;padding: 10px 10px;color: #181818; /* margin-bottom: 10px; */display: flex;justify-content: space-between;}
.exam .title.color{ background: #eee;}
.exam ul{display: block;overflow: auto;}
.exam ul li{border-bottom: 1px solid #edd;padding: 10px 0;position: relative;padding-left: 200px;}
.exam ul li:last-child{border:none}
.exam ul li span{width: 200px;display: inline-block;position: absolute;left: 0;}
.exam .full-width{width:100%}
.exam .attach{padding: 10px;background: #eee;margin-bottom: 10px;}
.exam .action{text-align: center}
.exam .inner{padding: 10px;}

/* 2022-11-10 추가 */
.mt_10{margin-top: 10px;}
.mt_20{margin-top: 20px;}
.mt_30{margin-top: 30px;}
.mt_40{margin-top: 40px;}
.mt_50{margin-top: 50px;}
.exam .title .t_r{display: flex; align-items: center;}
.exam .title .t_r .b_box{padding:0;margin-right:5px;}
.exam .title .t_r .b_box a{height: 24px;line-height: 24px;font-size:12px;}
.exam .q_box{padding:10px;}
.exam .q_box .top{padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid #dfdfdf;}
.exam .q_box .top .tit{font-weight: 500;color:#000;}
.exam .q_box .ex li a{display: flex;}
.exam .ex li {position: relative;}
.exam .ex li + li{margin-top:10px;}
.exam .ex .order {text-align:center;position:absolute;left:0;top:1px;width:20px;height:20px;line-height:20px;border-radius:50%;color:#fff;background-color:#bebebe;}
.exam .ex p {padding-left:25px;}
.exam .correct p span {margin-right:5px;font-weight:500;color:var(--ColorRed);}
.exam .ex .on .order{background-color:var(--HoverBlue);}
.exam .ex .on.correct .order {background-color:var(--ColorRed);}
.exam .subject li{display: flex;border-bottom: 1px solid #dfdfdf;padding-bottom:10px;margin-bottom:10px;}
.exam .subject li span{display: block;width:80px;font-weight: 600;color:#000;}

/* ----------------- */

.upload_guide{display: flex;    justify-content: space-between; margin-bottom: 10px}
.upload_guide strong{color:#003eff}

.attach{display: block;}
.attach .drag_zone{border: 1px dotted #adadad;padding: 20px;margin-bottom: 10px;}
.attach .drag_zone input{display: none}
.attach .drag_zone button{}
.attach .drag_zone span{margin-left: 30px;}
.attach .file_list{}
.attach .file_list li{display: flex;justify-content: space-between;line-height: 30px;vertical-align: middle;align-content: center;}
.attach .file_list li .file_name{}
.attach .file_list li .status{background: #eb6565;color: #fff;padding: 4px 10px;border-radius: 7px;font-size: 11px;text-align: center;display: inline-block;line-height: 1;height: 19px;margin-left: 10px;vertical-align: top;margin-top: 6px;}
.attach .file_list li .progressbar{width: 200px;height: 10px;vertical-align: middle;appearance: none;}
.attach .file_list li .progressbar::-webkit-progress-bar {background:#f0f0f0;border-radius:30px; /*box-shadow: inset 3px 3px 10px #ccc;*/}
.attach .file_list li .progressbar::-webkit-progress-value {border-radius:30px;background: #6eb5cf;/* background: -webkit-linear-gradient(to left, #93F9B9, #1D976C); background: linear-gradient(to left, #93F9B9, #1D976C);*/}
.attach .file_list li .del{vertical-align: middle;display: inline-block;width: 20px;height: 20px;margin-left: 5px;background: url(../../images/adm/icon/k_icon_del.png) no-repeat 50% 50%;}


.drag-over {background-color: #ff0;}

.window_open_popup .resource_preview{position: relative}
.window_open_popup .title{display: flex;justify-content: space-between;align-items: center;height: 50px;padding: 0 15px;border-bottom: 1px solid #d5d5d5;background: #f5f5f5;}
.window_open_popup .top{background: #313131;display: flex;justify-content: space-between;align-items: flex-end;padding: 15px;}
.window_open_popup .top i{margin-right: 6px;vertical-align: top;margin-top: 11px;display: inline-block;}
.window_open_popup .body{display: block}

.window_open_popup .send_sms{position: relative}
.window_open_popup .top.bg_title{border-bottom: 1px solid #d5d5d5;background: #f5f5f5; }
.window_open_popup .send_list{overflow: hidden; overflow-y: auto; max-height: 400px;}
.window_open_popup .send_list table td{text-align: center}
.window_open_popup .send_list table th{text-align: center}
.window_open_popup .form_sms textarea{height:370px;}
.window_open_popup .form_sms .tbl_row td{vertical-align: top}

.tb_bar .tb_left{display: flex;}
.tb_bar .tb_left p{font-size:13px;color:#000;}
.tb_bar .tb_left p + p::before{content: '/';margin:0 5px;}
.tb_bar.mb_5{display: flex;justify-content: space-between; margin-bottom:10px;}
.tb_bar .sty_bar span + span{margin-left:3px;}
.tb_bar .sty_bar span{padding:2px 5px;color:#fff;}
.tb_bar .sty_bar span.gray{background: #939393;}
.tb_bar .sty_bar span.red {background: #ff8c8c;}
.tbl_col td.red{background: #ff8c8c;}
.tbl_col td.gray{background: #939393;}
.tbl_scroll{overflow: auto;width: 100%;height: 300px;}
.tbl_scroll .tbl_col{width: 1500px;}
.tbl_scroll::-webkit-scrollbar {width: 8px;height:8px;background: #f1f1f1;}
.tbl_scroll::-webkit-scrollbar-thumb {border-radius: 30px;margin-left:10px;background-color: #b9b9b9;}
.st_box{margin-top:10px;}
.st_box textarea{resize: none;}

.bg_blue{color:#fff;background: #3f628f;}

/* chart */
.chart_area{display: flex;align-items: flex-end;margin-top:30px;}
.chart_area > div{border-radius: 16px;padding:20px;}
.chart_area > div:nth-child(1){width: calc(50% - 10px);background: #f8fcff;border: 2px solid #77b1e1;}
.chart_area > div:nth-child(2){width: calc(50% - 10px);margin-left:20px;background: #f6f6f6;}
.chart_area canvas{width: 100%;}


@media (min-width: 769px) {
    .row {
        --bs-gutter-x: 1.5rem;
        --bs-gutter-y: 0;
        display: flex;
        flex-wrap: wrap;
        margin-top: calc(var(--bs-gutter-y) * -1);
        margin-right: calc(var(--bs-gutter-x) * -.5);
        margin-left: calc(var(--bs-gutter-x) * -.5);
    }
    .col-mds-1 {
        flex: 0 0 auto;
        width: 8.33333333%;
    }

    .col-mds-2 {
        flex: 0 0 auto;
        width: 16.66666667%;
    }

    .col-mds-3 {
        flex: 0 0 auto;
        width: 25%;
    }

    .col-mds-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .col-mds-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }

    .col-mds-6 {
        flex: 0 0 auto;
        width: 50%;
    }

    .col-mds-7 {
        flex: 0 0 auto;
        width: 58.33333333%;
    }

    .col-mds-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }

    .col-mds-9 {
        flex: 0 0 auto;
        width: 75%;
    }

    .col-mds-10 {
        flex: 0 0 auto;
        width: 83.33333333%;
    }

    .col-mds-11 {
        flex: 0 0 auto;
        width: 91.66666667%;
    }

    .col-mds-12 {
        flex: 0 0 auto;
        width: 100%;
    }
}

@media screen and (max-width:768px) {
    .chart_area{flex-wrap: wrap;}
    .chart_area > div{width: 100% !important;}
    .chart_area > div:nth-child(2){margin:20px 0 0 0;}
}


/* 사물함 도면 테이블 위 공백 및 도면 표시*/

.locker_div {
	margin-top : 40px;
	font-weight: bold;
}
/* 사물함 도면 테이블 스타일 */
.locker_diagram {
    border-collapse: collapse;
    width: auto; /* 자동 크기 조정 */
    margin-top : 20px;
}

/* 개별 사물함 스타일 */
.locker_design {
    width: 60px;
    height: 40px;
    border: 1px solid;
    text-align: center;
    line-height: 20px;
    color: black;
}

/* 사물함 내부 구조 */
.locker_design div {
    width: 100%;
    height: 50%;
}

/* 아래쪽 회색 배경 및 글씨색 */
.locker_design .locker_under {
	height: 50%;
    background-color: #d9d9d9;
    color : red;
    font-weight: bold;
}

.locker_number {
    color: black;
    text-decoration: none;
}

/* 사물함 사용등록 관리 고장,분실,미반납 색 표시 */
.status {
    display: flex;
    align-items: center;
    gap: 5px; /* 박스와 텍스트 사이의 간격 */
}

.status-box {
    width: 20px; /* 작은 크기 */
    height: 20px; /* 작은 크기 */
    border-radius: 5px; /* 둥근 모서리 */
}


.broken {
    background-color: red; /* 고장 -> 빨간색 */
}

.lost {
    background-color: #00AB0E; /* 분실 -> 초록색 */
}

.not-returned {
    background-color: yellow; /* 미반납 -> 노란색 */
}