select {
-webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
    min-width: 100px;
    padding: 10px 50px 8px 17px;
    color: #000;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 18px;
    line-height: 1.8rem;
    border: 1px solid #e9e9e9;
    box-sizing: border-box;
    border-radius: 4px;
    background-color: #fff;
    background-image: url(../img/select_style_0_arrow.png);
    background-repeat: no-repeat;
    background-position: right center;
}

input[type="radio"] {
    filter: alpha(opacity=0);
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    
    background-color: initial;
    cursor: default;
    appearance: radio;
    box-sizing: border-box;
    margin: 0px 3px 0px 5px;
    padding: initial;
    border: initial;
}

input[type="number"] {
border: 1px solid #e9e9e9;
    height: 38px;
    padding: 2px 10px;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 12px;
}

input[type="password"] {
border: 1px solid #e9e9e9;
    height: 38px;
    padding: 2px 10px;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 12px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="file"] {
position: absolute; 
width: 1px; 
height: 1px; 
padding: 0; 
margin: -1px; 
overflow: hidden; 
clip:rect(0,0,0,0); 
border: 0;
}

label {
cursor: pointer;
}

table {
width: 100%;
display: table;
    border-collapse: separate;
    box-sizing: border-box;
    border-spacing: 2px;
    border-color: grey;
}

tbody {
display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

/* 검색바, view 페이지 */
table.table-type4, table.table-type1, table.table-type2 {
width: 100%;
border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-top: 2px solid #c7cfd2;
    border-bottom: 1px solid #e6ecee;
}

/* 시험지 리스트 등등 */
table.table-type3 {
width: 100%;
border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-top: 2px solid #c7cfd2;
    margin-bottom: 5px;
}

table.table-type3 th {
border-top: 1px solid #f0f3f5;
    background-color: #f0f0f0;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 18px;
    line-height: 1.8rem;
    font-weight: 400;
    color: #000;
    min-width: 105px;
    height: 55px;
    box-sizing: border-box;
    vertical-align: middle;
    padding-left: 10px;
}

table.table-type3 td {
    background-color: #fbfcfd; 
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 28px;
    line-height: 2.8rem;
    padding: 6px;
    color: #000;
    text-align: left;
    vertical-align: middle
}

table.table-type3 td>label {
border-bottom: 1px solid #f0f3f5;
}

table.table-type3 td>textarea {
background-color: #fbfcfd;
}


/* 검색창의 리스트 */
table.table-type5 {
width: 100%;
border-collapse: collapse !important;
    border-spacing: 0 !important;
    border-top: 2px solid #c7cfd2;
    border-bottom: 1px solid #e6ecee;
}

table.table-type4 th, table.table-type1 th, table.table-type2 th{
border-top: 1px solid #f0f3f5;
    background-color: #fbfcfd;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 18px;
    line-height: 1.8rem;
    font-weight: 400;
    color: #000;
    min-width: 105px;
    height: 55px;
    box-sizing: border-box;
    vertical-align: middle;
}

table.table-type4 td, table.table-type1 td, table.table-type2 td {
    border-top: 1px solid #f0f3f5;
    background-color: #fbfcfd;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 28px;
    line-height: 2.8rem;
    padding: 6px;
    color: #000;
    text-align: left;
    vertical-align: middle
}

table.table-type5 td {
    height: 50px;
    padding: 8px 5px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 22px;
    line-height: 2.2rem;
    font-weight: 400;
    background-color: #fff;
    border-top: 1px solid #e8eeef;
    border-left: 1px solid #e8eeef;
}

table.table-type5 th {
text-align: center;
    font-size: 12px;
    font-size: 1.2rem;
    line-height: 18px;
    line-height: 1.8rem;
    padding: 16px 5px 12px;
    vertical-align: middle;
    color: #000;
    box-sizing: border-box;
    background-color: #f8f9fb;
    font-weight: 400;
    border-left: 1px solid #e8eeef;
}

table.table-type5 tr td:first-child
{
    border-left: 0px none;
}

table.table-type5 tr td:last-child
{
    border-right: 0px none;
}

/* 고도화2차 수정 */
table.table-type5 td a:not(td a.btn_small, td a.btn) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    color: #000000;
    border-bottom: 1px solid #000000;
    display: inline-block;
    font-weight: bold;
    text-decoration: none !important;
}

/* 고도화2차 수정 */
table.table-type5 td a:not(td a.btn_small, td a.btn):hover {
    color: #2980ff !important;
    border-bottom: 1px solid #2980ff;
}

/* 20230320 수정 */
table.table-type5 td.tl {
    text-align: left;
}
/* // 20230320 수정 */

.title {
vertical-align : middle;
 padding: 16px 0px;
    margin: 0 0 35px 0;
}

.title_top {
font-size: 1.3rem;
    line-height: 1.9rem;
    font-weight: 400;
  color: #666;
  background : none;
  height: 20px;
  border-bottom: 1px solid #ebeff1;
}

.title .page_on {
    color: #07a3ca;
}

.bullet_clamp {
display: inline-block;
    width: 10px;
    height: 8px;
    margin: 0 5px;
    padding: 0 !important;
    vertical-align: middle;
    margin-top: -3px;
    
background : none;
background-position: right 0px center;
    background-repeat: no-repeat;
    background-image: url(../img/linemap_arrow.png);
    background-size: 6px 9px;
}

.search_form {
padding: 20px 0;
border-top: 1px solid gray;
}

.button_top {
    text-align: center;
    margin: 20px 0 20px 0;
}

.calendar_con {
white-space:nowrap;
}

/* 버튼그룹 */
.btn_Group {
margin-bottom: 10px;
}

.btn_Group th,.btn_Group td{
background:none;
border: none;
}

.pageinfo {
    font-size: 1.4rem;
}

span.section_title {
background-image: url(../img/icon_date_control.png);
    background-repeat: no-repeat;
    background-position: 0px center;
    padding-left: 24px;
    
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 23px;
    line-height: 2.3rem;
    font-weight: 400;
}

span.red {
color: #FF0000;

    font-size: 13px;
    line-height: 19px;
    font-size: 1.3rem;
    line-height: 1.9rem;
}

.right {
text-align: right;
}

/* 페이징 영역 */
.paging_wrap {
text-align: center;
}

.paging {
text-align: center;
padding: 20px 0;
}

.paging a {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 33px;
    text-align: center;
    cursor: pointer;
    white-space : nowrap;
    font-size: 11px;
    font-size: 1.1rem;
    line-height: 34px;
    font-weight: 600;
}

.paging a:hover {
color: #f95188;
}

.paging a.num {
font-weight: 900;
color: #f95188;
}

.paging a img {
display: none;
}

.paging a:first-child {
padding-right: 5px;
}

.paging a:first-child:after {
display: inline;
content: "<<";
    background-position: 0px 12px;
    padding-right: 8px;
    height : 3px;
border-right: 1px solid #c7cdce;
}


.paging a:nth-child(2) {
padding-right: 30px;
}

.paging a:nth-child(2):after {
display: inline;
content: "< PREV";
    background-position: -33px 12px;
}

.paging a:last-child {
padding-left: 5px;
}

.paging a:last-child:before {
display: inline;
content: ">>";
background-position: 0px 12px;
    padding-left: 8px;
    height : 3px;
border-left: 1px solid #c7cdce;
}

.paging a:nth-last-child(2) {
padding-left: 30px;
}

.paging a:nth-last-child(2):after {
display: inline;
content: "NEXT >";
    background-position: -33px 12px;
}

/* 모달 페이징 영역 */
/* .paging_wrap.admin-paging {
text-align: center;
}

.paging_wrap.admin-paging {
text-align: center;
padding: 20px 0;
}

.paging_wrap.admin-paging a {
    position: relative;
    display: inline-block;
    width: 33px;
    height: 33px;
    text-align: center;
    cursor: pointer;
    white-space : nowrap;
    font-size: 11px;
    font-size: 1.1rem;
    line-height: 34px;
    font-weight: 600;
}

.paging_wrap.admin-paging a:hover {
color: #f95188;
}

.paging_wrap a.num {
font-weight: 900;
color: #f95188;
}
.modal-inner .paging_wrap a img {
display: none;
}

.modal-inner .paging_wrap a:first-child {
padding-right: 30px;
}

.modal-inner .paging_wrap a:first-child:after {
display: inline;
content: "< PREV";
    background-position: -33px 12px;
}

.modal-inner .paging_wrap a:last-child {
padding-left: 30px;
}

.modal-inner .paging_wrap a:last-child:after {
display: inline;
content: "NEXT >";
    background-position: -33px 12px;
}

.modal-inner .paging_wrap a.cPage {
font-weight: 900;
color: #f95188;
}
 */


/* 토글 버튼 */
.switch {
  position: relative;
  display: inline-block;
  width: 59px;
  height: 26px;
  margin: 8px 0 8px 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 3px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(31px);
  -ms-transform: translateX(31px);
  transform: translateX(31px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}


/* tab 영역 */
.tab {
  overflow: hidden;
}

.tabcontent {
height: 0px;
overflow: auto;
  border-top: none;
}

/* 모달 영역 */
.modal-inner .button_top {
margin: 10px 0px 10px 0px;
}

.modal-inner table.table-type5 td {
height: 40px;
}

/* scroll 영역 */
.scroll-section {
overflow: auto;
}

/* 캘린더 영역 */
.calendarTitleY {
    TEXT-ALIGN: left; PADDING-LEFT: 10px; FONT-FAMILY: tahoma; COLOR: #666666; FONT-SIZE: 11px; PADDING-TOP: 8px
}
.calendarTitleM {
    TEXT-ALIGN: left; PADDING-LEFT: 5px; FONT-FAMILY: tahoma; COLOR: #78b300; FONT-SIZE: 24px; FONT-WEIGHT: bold
}
.calendarWeekS {
    WIDTH: 30px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 25px; COLOR: #78b300; FONT-SIZE: 9px; PADDING-TOP: 5px
}
.calendarWeekT {
    WIDTH: 30px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 25px; COLOR: #808080; FONT-SIZE: 9px; PADDING-TOP: 5px
}
.calendarWeek {
    WIDTH: 30px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 25px; COLOR: #808080; FONT-SIZE: 9px; PADDING-TOP: 5px
}
.calendarDayS {
    WIDTH: 30px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 25px; COLOR: #78b300; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.calendarDayT {
    WIDTH: 30px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 25px; COLOR: #808080; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.calendarDay {
    WIDTH: 30px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 25px; COLOR: #808080; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.calendarToDay {
    WIDTH: 30px; FONT-FAMILY: tahoma; BACKGROUND: url(/admin/images/icon_calendar_point.gif) no-repeat; FLOAT: left; HEIGHT: 25px; COLOR: #fe5400; FONT-SIZE: 11px; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-TOP: 5px
}
.calendarNoDay {
    WIDTH: 30px; FLOAT: left; HEIGHT: 25px; PADDING-TOP: 5px
}
.calendarNow {
    PADDING-LEFT: 8px; WIDTH: 148px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 20px; COLOR: #333333; FONT-SIZE: 11px; CURSOR: pointer
}
.calendarClose {
    WIDTH: 55px; FONT-FAMILY: tahoma; FLOAT: left; HEIGHT: 20px; COLOR: #333333; FONT-SIZE: 11px; CURSOR: pointer
}
.clearboth {
    CLEAR: both
}
.content_img {
    BACKGROUND: url(/admin/images/sch_bg_gray.gif)
}


#calendar_div {overflow:hidden; margin-bottom:50px; padding-top:20px; position:relative;}
#calendar_div .button {position: absolute; padding-left: 5px; top: 10px;}
#calendar_div > .guide {width:9%; height:408px; display:inline-block; position:absolute; top:50px; right:0;}
#calendar_div > .guide > .check_area {border:1px solid #ddd; margin-bottom:9px;}
#calendar_div > .guide > .check_area > h3 {background-color:#42526e; font-size:12px; color:#fff; font-family:'ng_ex'; text-align:center; padding:15px;}
#calendar_div > .guide > .check_area > ul {background-color:#FFF; padding:20px 0 20px 12px}
#calendar_div > .guide > .check_area > ul > li {list-style:none; margin-bottom:18px;}
#calendar_div > .guide > .check_area > ul > li:last-child {margin-bottom:0;}
#calendar_div > .guide > .check_area > ul > li > input {display:none;}
#calendar_div > .guide > .check_area > ul > li > label > span {display:inline-block; width:12px; height:12px; background:url('/common/images/checkbox_off.png') no-repeat 100%; margin-right:8px; vertical-align:middle;}
#calendar_div > .guide > .check_area > ul > li > label {font-weight:700}
#calendar_div > .guide > .check_area > ul > li:nth-child(2) > label {color:#ffda77;}
#calendar_div > .guide > .check_area > ul > li:nth-child(3) > label {color:#92c66c;}
#calendar_div > .guide > .check_area > ul > li:nth-child(4) > label {color:#74add8;}
#calendar_div > .guide > .check_area > ul > li:nth-child(5) > label {color:#a17db6;}
#calendar_div > .guide > .check_area > ul > li:nth-child(6) > label {color:#ba5252;}
#calendar_div > .guide > .check_area > ul > li > input[type="checkbox"]:checked + label > span {background:url('/common/images/checkbox_on.png') no-repeat 100%;}


/*
오른쪽 표에 등장하는 manager ul > li에 data-manager-idx를 추가해줘야 색깔이 등장함.
또한 각 매니저가 맡는 event-container에  data-manager-idx를 추가해주면 됨.

*/
#calendar_contents_con [data-manager-idx="0"] > span::after{ background-color: #b23fcc; }
#calendar_contents_con .fc-event-container[data-manager-idx="0"] .fc-event { background-color: #b23fcc; }
#calendar_contents_con [data-manager-idx="1"] > span::after{ background-color: #40ab01; }
#calendar_contents_con .fc-event-container[data-manager-idx="1"] .fc-event { background-color: #40ab01; }
#calendar_contents_con [data-manager-idx="2"] > span::after{ background-color: #f37a7b; }
#calendar_contents_con .fc-event-container[data-manager-idx="2"] .fc-event { background-color: #f37a7b; }
#calendar_contents_con [data-manager-idx="3"] > span::after{ background-color: #01b2ac; }
#calendar_contents_con .fc-event-container[data-manager-idx="3"] .fc-event { background-color: #01b2ac; }
#calendar_contents_con [data-manager-idx="4"] > span::after{ background-color: #ee4706; }
#calendar_contents_con .fc-event-container[data-manager-idx="4"] .fc-event { background-color: #ee4706; }
#calendar_contents_con [data-manager-idx="5"] > span::after{ background-color: #3ec3e8; }
#calendar_contents_con .fc-event-container[data-manager-idx="5"] .fc-event { background-color: #3ec3e8; }
#calendar_contents_con [data-manager-idx="6"] > span::after{ background-color: #65855b; }
#calendar_contents_con .fc-event-container[data-manager-idx="6"] .fc-event { background-color: #65855b; }
#calendar_contents_con [data-manager-idx="7"] > span::after{ background-color: #c43f99; }
#calendar_contents_con .fc-event-container[data-manager-idx="7"] .fc-event { background-color: #c43f99; }
#calendar_contents_con [data-manager-idx="8"] > span::after{ background-color: #f89e00; }
#calendar_contents_con .fc-event-container[data-manager-idx="8"] .fc-event { background-color: #f89e00; }
#calendar_contents_con [data-manager-idx="9"] > span::after{ background-color: #7f5df2; }
#calendar_contents_con .fc-event-container[data-manager-idx="9"] .fc-event { background-color: #7f5df2; }

a[style*="background-color:10;border-color:10"] { background-color: #b23fcc; }
a[style*="background-color:1;border-color:1"] { background-color: #40ab01; }
a[style*="background-color:2;border-color:2"] { background-color: #f37a7b; }
a[style*="background-color:3;border-color:3"] { background-color: #01b2ac; }
a[style*="background-color:4;border-color:4"] { background-color: #ee4706; }
a[style*="background-color:5;border-color:5"] { background-color: #3ec3e8; }
a[style*="background-color:6;border-color:6"] { background-color: #65855b; }
a[style*="background-color:7;border-color:7"] { background-color: #c43f99; }
a[style*="background-color:8;border-color:8"] { background-color: #f89e00; }
a[style*="background-color:9;border-color:9"] { background-color: #7f5df2; }

/*교육일정 담당자 리스트*/
#calendar_contents_con .calendar_contents_inner{ width: calc(100% - 181px);}
#calendar_contents_con .edu_manager_con{ width: 181px; padding-left: 48px; padding-right: 21px; padding-top: 84px; }
#calendar_contents_con .edu_manager_con .edu_manager_inner { border: 1px solid #e8eeef; border-radius: 4px; overflow: hidden; }
#calendar_contents_con .edu_manager_con .edu_manager_title { padding: 8px; background-color: #f8f9fb; text-align: center; font-family: 'NanumBarunGothic'; font-size:12px; font-size:1.2rem; line-height:18px; line-height:1.8rem; font-weight: 400; letter-spacing: 0.02em; color: #2d2d2d; }
#calendar_contents_con .edu_manager_con .edu_manager_list_con { padding: 27px 20px 26px 30px; }
#calendar_contents_con .edu_manager_con .edu_manager_list_con > li { display: block; box-sizing: border-box; margin-bottom: 8px; }
#calendar_contents_con .edu_manager_con .edu_manager_list_con > li:last-child { margin-bottom: 0; }
#calendar_contents_con .edu_manager_con .edu_manager_list_con > li > span { padding-left: 19px; display: inline-block; box-sizing: border-box; position: relative; font-family: 'NanumBarunGothic'; font-size:12px; font-size:1.2rem; line-height:18px; line-height:1.8rem; font-weight: 300; letter-spacing: 0.02em; color: #2d2d2d; }
#calendar_contents_con .edu_manager_con .edu_manager_list_con > li > span::after{ content: ''; position: absolute; top: 5px; left: 0; width: 8px; height: 8px; border-radius: 50%; overflow: hidden; }

/* 교육일정 today 리스트*/
.today_edu_list_wrap { width: 100%; display: table; overflow: hidden; border-radius: 5px; border: 1px solid #e8eeef; table-layout: fixed; }
.today_edu_list_wrap > .today_title { width: 162px; display: table-cell; vertical-align: middle; background-color: #f8f9fb; text-align: center; }
.today_edu_list_wrap > .today_title > div.day_of_the_week { font-family: 'NanumBarunGothic'; font-size:12px; font-size:1.2rem; line-height:18px; line-height:1.8rem; font-weight: 400; letter-spacing: 0.02em; color: #2d2d2d; margin-bottom: 1px; }
.today_edu_list_wrap > .today_title > div.date { font-family: 'Roboto'; font-size:28px; font-size:2.8rem; line-height:34px; line-height:3.4rem; font-weight: 400; letter-spacing: 0.02em; color: #353a40; }
.today_edu_list_wrap > .today_edu_list_con { position: relative; box-sizing: border-box; padding: 30px 40px 26px; }
.today_edu_list_wrap > .today_edu_list_con > ul > li { display: block; box-sizing: border-box; position: relative; margin-bottom: 6px; }
.today_edu_list_wrap > .today_edu_list_con > ul > li:last-child { margin-bottom: 0; }
.today_edu_list_wrap > .today_edu_list_con > ul > li > span { padding-left: 19px; display: inline-block; position: relative; box-sizing: border-box; font-family: 'NanumBarunGothic'; font-size:12px; font-size:1.2rem; line-height:18px; line-height:1.8rem; font-weight: 300; letter-spacing: 0.02em; color: #2d2d2d; }
.today_edu_list_wrap > .today_edu_list_con > ul > li > span::after{ content: ''; position: absolute; top: 4px; left: 0; width: 8px; height: 8px; border-radius: 50%; overflow: hidden; }
.today_edu_list_wrap > .today_edu_list_con > ul > li > span .manager_name { font-weight: 700; }

/* 높이 */
.h_500 {
height: 500px;
}
.h_400 {
height: 400px;
}
.h_300 {
height: 300px;
}
.h_200 {
height: 200px;
}
.h_100 {
height: 100px;
}

/* 색 */
.b_gray {
background: #e9e9e9
}


/* percent bar */
.css-progressbar-container {
width: 100%;
    height: 100%;
    background-color: #f8f9fb;
}

.css-progressbar {
    height: 100%;
    background-color: #03cffc;
}


/* percent */
.css-progressbar.per-0 {width: 0%; }
.css-progressbar.per-1 {width: 1%;   animation: progressbar1 1.5s ease-out;}
.css-progressbar.per-2 {width: 2%;   animation: progressbar2 1.5s ease-out;}
.css-progressbar.per-3 {width: 3%;  animation: progressbar3 1.5s ease-out;}
.css-progressbar.per-4 {width: 4%;  animation: progressbar4 1.5s ease-out;}
.css-progressbar.per-5 {width: 5%;  animation: progressbar5 1.5s ease-out;}
.css-progressbar.per-6 {width: 6%;  animation: progressbar6 1.5s ease-out;}
.css-progressbar.per-7 {width: 7%;  animation: progressbar7 1.5s ease-out;}
.css-progressbar.per-8 {width: 8%;  animation: progressbar8 1.5s ease-out;}
.css-progressbar.per-9 {width: 9%;  animation: progressbar9 1.5s ease-out;}
.css-progressbar.per-10 {width: 10%;  animation: progressbar10 1.5s ease-out;}
.css-progressbar.per-11 {width: 11%;  animation: progressbar11 1.5s ease-out;}
.css-progressbar.per-12 {width: 12%;  animation: progressbar12 1.5s ease-out;}
.css-progressbar.per-13 {width: 13%;  animation: progressbar13 1.5s ease-out;}
.css-progressbar.per-14 {width: 14%;  animation: progressbar14 1.5s ease-out;}
.css-progressbar.per-15 {width: 15%;  animation: progressbar15 1.5s ease-out;}
.css-progressbar.per-16 {width: 16%;  animation: progressbar16 1.5s ease-out;}
.css-progressbar.per-17 {width: 17%;  animation: progressbar17 1.5s ease-out;}
.css-progressbar.per-18 {width: 18%;  animation: progressbar18 1.5s ease-out;}
.css-progressbar.per-19 {width: 19%;  animation: progressbar19 1.5s ease-out;}
.css-progressbar.per-20 {width: 20%;  animation: progressbar20 1.5s ease-out;}
.css-progressbar.per-21 {width: 21%;  animation: progressbar21 1.5s ease-out;}
.css-progressbar.per-22 {width: 22%;  animation: progressbar22 1.5s ease-out;}
.css-progressbar.per-23 {width: 23%;  animation: progressbar23 1.5s ease-out;}
.css-progressbar.per-24 {width: 24%;  animation: progressbar24 1.5s ease-out;}
.css-progressbar.per-25 {width: 25%;  animation: progressbar25 1.5s ease-out;}
.css-progressbar.per-26 {width: 26%;  animation: progressbar26 1.5s ease-out;}
.css-progressbar.per-27 {width: 27%;  animation: progressbar27 1.5s ease-out;}
.css-progressbar.per-28 {width: 28%;  animation: progressbar28 1.5s ease-out;}
.css-progressbar.per-29 {width: 29%;  animation: progressbar29 1.5s ease-out;}
.css-progressbar.per-30 {width: 30%;  animation: progressbar30 1.5s ease-out;}
.css-progressbar.per-31 {width: 31%;  animation: progressbar31 1.5s ease-out;}
.css-progressbar.per-32 {width: 32%;  animation: progressbar32 1.5s ease-out;}
.css-progressbar.per-33 {width: 33%;  animation: progressbar33 1.5s ease-out;}
.css-progressbar.per-34 {width: 34%;  animation: progressbar34 1.5s ease-out;}
.css-progressbar.per-35 {width: 35%;  animation: progressbar35 1.5s ease-out;}
.css-progressbar.per-36 {width: 36%;  animation: progressbar36 1.5s ease-out;}
.css-progressbar.per-37 {width: 37%;  animation: progressbar37 1.5s ease-out;}
.css-progressbar.per-38 {width: 38%;  animation: progressbar38 1.5s ease-out;}
.css-progressbar.per-39 {width: 39%;  animation: progressbar39 1.5s ease-out;}
.css-progressbar.per-40 {width: 40%;  animation: progressbar40 1.5s ease-out;}
.css-progressbar.per-41 {width: 41%;  animation: progressbar41 1.5s ease-out;}
.css-progressbar.per-42 {width: 42%;  animation: progressbar42 1.5s ease-out;}
.css-progressbar.per-43 {width: 43%;  animation: progressbar43 1.5s ease-out;}
.css-progressbar.per-44 {width: 44%;  animation: progressbar44 1.5s ease-out;}
.css-progressbar.per-45 {width: 45%;  animation: progressbar45 1.5s ease-out;}
.css-progressbar.per-46 {width: 46%;  animation: progressbar46 1.5s ease-out;}
.css-progressbar.per-47 {width: 47%;  animation: progressbar47 1.5s ease-out;}
.css-progressbar.per-48 {width: 48%;  animation: progressbar48 1.5s ease-out;}
.css-progressbar.per-49 {width: 49%;  animation: progressbar49 1.5s ease-out;}
.css-progressbar.per-50 {width: 50%;  animation: progressbar50 1.5s ease-out;}
.css-progressbar.per-51 {width: 51%;  animation: progressbar51 1.5s ease-out;}
.css-progressbar.per-52 {width: 52%;  animation: progressbar52 1.5s ease-out;}
.css-progressbar.per-53 {width: 53%;  animation: progressbar53 1.5s ease-out;}
.css-progressbar.per-54 {width: 54%;  animation: progressbar54 1.5s ease-out;}
.css-progressbar.per-55 {width: 55%;  animation: progressbar55 1.5s ease-out;}
.css-progressbar.per-56 {width: 56%;  animation: progressbar56 1.5s ease-out;}
.css-progressbar.per-57 {width: 57%;  animation: progressbar57 1.5s ease-out;}
.css-progressbar.per-58 {width: 58%;  animation: progressbar58 1.5s ease-out;}
.css-progressbar.per-59 {width: 59%;  animation: progressbar59 1.5s ease-out;}
.css-progressbar.per-60 {width: 60%;  animation: progressbar60 1.5s ease-out;}
.css-progressbar.per-61 {width: 61%;  animation: progressbar61 1.5s ease-out;}
.css-progressbar.per-62 {width: 62%;  animation: progressbar62 1.5s ease-out;}
.css-progressbar.per-63 {width: 63%;  animation: progressbar63 1.5s ease-out;}
.css-progressbar.per-64 {width: 64%;  animation: progressbar64 1.5s ease-out;}
.css-progressbar.per-65 {width: 65%;  animation: progressbar65 1.5s ease-out;}
.css-progressbar.per-66 {width: 66%;  animation: progressbar66 1.5s ease-out;}
.css-progressbar.per-67 {width: 67%;  animation: progressbar67 1.5s ease-out;}
.css-progressbar.per-68 {width: 68%;  animation: progressbar68 1.5s ease-out;}
.css-progressbar.per-69 {width: 69%;  animation: progressbar69 1.5s ease-out;}
.css-progressbar.per-70 {width: 70%;  animation: progressbar70 1.5s ease-out;}
.css-progressbar.per-71 {width: 71%;  animation: progressbar71 1.5s ease-out;}
.css-progressbar.per-72 {width: 72%;  animation: progressbar72 1.5s ease-out;}
.css-progressbar.per-73 {width: 73%;  animation: progressbar73 1.5s ease-out;}
.css-progressbar.per-74 {width: 74%;  animation: progressbar74 1.5s ease-out;}
.css-progressbar.per-75 {width: 75%;  animation: progressbar75 1.5s ease-out;}
.css-progressbar.per-76 {width: 76%;  animation: progressbar76 1.5s ease-out;}
.css-progressbar.per-77 {width: 77%;  animation: progressbar77 1.5s ease-out;}
.css-progressbar.per-78 {width: 78%;  animation: progressbar78 1.5s ease-out;}
.css-progressbar.per-79 {width: 79%;  animation: progressbar79 1.5s ease-out;}
.css-progressbar.per-80 {width: 80%;  animation: progressbar80 1.5s ease-out;}
.css-progressbar.per-81 {width: 81%;  animation: progressbar81 1.5s ease-out;}
.css-progressbar.per-82 {width: 82%;  animation: progressbar82 1.5s ease-out;}
.css-progressbar.per-83 {width: 83%;  animation: progressbar83 1.5s ease-out;}
.css-progressbar.per-84 {width: 84%;  animation: progressbar84 1.5s ease-out;}
.css-progressbar.per-85 {width: 85%;  animation: progressbar85 1.5s ease-out;}
.css-progressbar.per-86 {width: 86%;  animation: progressbar86 1.5s ease-out;}
.css-progressbar.per-87 {width: 87%;  animation: progressbar87 1.5s ease-out;}
.css-progressbar.per-88 {width: 88%;  animation: progressbar88 1.5s ease-out;}
.css-progressbar.per-89 {width: 89%;  animation: progressbar89 1.5s ease-out;}
.css-progressbar.per-90 {width: 90%;  animation: progressbar90 1.5s ease-out;}
.css-progressbar.per-91 {width: 91%;  animation: progressbar91 1.5s ease-out;}
.css-progressbar.per-92 {width: 92%;  animation: progressbar92 1.5s ease-out;}
.css-progressbar.per-93 {width: 93%;  animation: progressbar93 1.5s ease-out;}
.css-progressbar.per-94 {width: 94%;  animation: progressbar94 1.5s ease-out;}
.css-progressbar.per-95 {width: 95%;  animation: progressbar95 1.5s ease-out;}
.css-progressbar.per-96 {width: 96%;  animation: progressbar96 1.5s ease-out;}
.css-progressbar.per-97 {width: 97%;  animation: progressbar97 1.5s ease-out;}
.css-progressbar.per-98 {width: 98%;  animation: progressbar98 1.5s ease-out;}
.css-progressbar.per-99 {width: 99%;  animation: progressbar99 1.5s ease-out;}
.css-progressbar.per-100 {width: 100%;animation: progressbar100 1.5s ease-out;}


@keyframes progressbar0 {  0%  {width: 0%;} 100% {width: 0%;}}
@keyframes progressbar1 {  0%  {width: 0%;} 100% {width: 1%;}}
@keyframes progressbar2 {  0%  {width: 0%;} 100% {width: 2%;}}
@keyframes progressbar3 {  0%  {width: 0%;} 100% {width: 3%;}}
@keyframes progressbar4 {  0%  {width: 0%;} 100% {width: 4%;}}
@keyframes progressbar5 {  0%  {width: 0%;} 100% {width: 5%;}}
@keyframes progressbar6 {  0%  {width: 0%;} 100% {width: 6%;}}
@keyframes progressbar7 {  0%  {width: 0%;} 100% {width: 7%;}}
@keyframes progressbar8 {  0%  {width: 0%;} 100% {width: 8%;}}
@keyframes progressbar9 {  0%  {width: 0%;} 100% {width: 9%;}}
@keyframes progressbar10 {  0%  {width: 0%;} 100% {width: 10%;}}
@keyframes progressbar11 {  0%  {width: 0%;} 100% {width: 11%;}}
@keyframes progressbar12 {  0%  {width: 0%;} 100% {width: 12%;}}
@keyframes progressbar13 {  0%  {width: 0%;} 100% {width: 13%;}}
@keyframes progressbar14 {  0%  {width: 0%;} 100% {width: 14%;}}
@keyframes progressbar15 {  0%  {width: 0%;} 100% {width: 15%;}}
@keyframes progressbar16 {  0%  {width: 0%;} 100% {width: 16%;}}
@keyframes progressbar17 {  0%  {width: 0%;} 100% {width: 17%;}}
@keyframes progressbar18 {  0%  {width: 0%;} 100% {width: 18%;}}
@keyframes progressbar19 {  0%  {width: 0%;} 100% {width: 19%;}}
@keyframes progressbar20 {  0%  {width: 0%;} 100% {width: 20%;}}
@keyframes progressbar21 {  0%  {width: 0%;} 100% {width: 21%;}}
@keyframes progressbar22 {  0%  {width: 0%;} 100% {width: 22%;}}
@keyframes progressbar23 {  0%  {width: 0%;} 100% {width: 23%;}}
@keyframes progressbar24 {  0%  {width: 0%;} 100% {width: 24%;}}
@keyframes progressbar25 {  0%  {width: 0%;} 100% {width: 25%;}}
@keyframes progressbar26 {  0%  {width: 0%;} 100% {width: 26%;}}
@keyframes progressbar27 {  0%  {width: 0%;} 100% {width: 27%;}}
@keyframes progressbar28 {  0%  {width: 0%;} 100% {width: 28%;}}
@keyframes progressbar29 {  0%  {width: 0%;} 100% {width: 29%;}}
@keyframes progressbar30 {  0%  {width: 0%;} 100% {width: 30%;}}
@keyframes progressbar31 {  0%  {width: 0%;} 100% {width: 31%;}}
@keyframes progressbar32 {  0%  {width: 0%;} 100% {width: 32%;}}
@keyframes progressbar33 {  0%  {width: 0%;} 100% {width: 33%;}}
@keyframes progressbar34 {  0%  {width: 0%;} 100% {width: 34%;}}
@keyframes progressbar35 {  0%  {width: 0%;} 100% {width: 35%;}}
@keyframes progressbar36 {  0%  {width: 0%;} 100% {width: 36%;}}
@keyframes progressbar37 {  0%  {width: 0%;} 100% {width: 37%;}}
@keyframes progressbar38 {  0%  {width: 0%;} 100% {width: 38%;}}
@keyframes progressbar39 {  0%  {width: 0%;} 100% {width: 39%;}}
@keyframes progressbar40 {  0%  {width: 0%;} 100% {width: 40%;}}
@keyframes progressbar41 {  0%  {width: 0%;} 100% {width: 41%;}}
@keyframes progressbar42 {  0%  {width: 0%;} 100% {width: 42%;}}
@keyframes progressbar43 {  0%  {width: 0%;} 100% {width: 43%;}}
@keyframes progressbar44 {  0%  {width: 0%;} 100% {width: 44%;}}
@keyframes progressbar45 {  0%  {width: 0%;} 100% {width: 45%;}}
@keyframes progressbar46 {  0%  {width: 0%;} 100% {width: 46%;}}
@keyframes progressbar47 {  0%  {width: 0%;} 100% {width: 47%;}}
@keyframes progressbar48 {  0%  {width: 0%;} 100% {width: 48%;}}
@keyframes progressbar49 {  0%  {width: 0%;} 100% {width: 49%;}}
@keyframes progressbar50 {  0%  {width: 0%;} 100% {width: 50%;}}
@keyframes progressbar51 {  0%  {width: 0%;} 100% {width: 51%;}}
@keyframes progressbar52 {  0%  {width: 0%;} 100% {width: 52%;}}
@keyframes progressbar53 {  0%  {width: 0%;} 100% {width: 53%;}}
@keyframes progressbar54 {  0%  {width: 0%;} 100% {width: 54%;}}
@keyframes progressbar55 {  0%  {width: 0%;} 100% {width: 55%;}}
@keyframes progressbar56 {  0%  {width: 0%;} 100% {width: 56%;}}
@keyframes progressbar57 {  0%  {width: 0%;} 100% {width: 57%;}}
@keyframes progressbar58 {  0%  {width: 0%;} 100% {width: 58%;}}
@keyframes progressbar59 {  0%  {width: 0%;} 100% {width: 59%;}}
@keyframes progressbar60 {  0%  {width: 0%;} 100% {width: 60%;}}
@keyframes progressbar61 {  0%  {width: 0%;} 100% {width: 61%;}}
@keyframes progressbar62 {  0%  {width: 0%;} 100% {width: 62%;}}
@keyframes progressbar63 {  0%  {width: 0%;} 100% {width: 63%;}}
@keyframes progressbar64 {  0%  {width: 0%;} 100% {width: 64%;}}
@keyframes progressbar65 {  0%  {width: 0%;} 100% {width: 65%;}}
@keyframes progressbar66 {  0%  {width: 0%;} 100% {width: 66%;}}
@keyframes progressbar67 {  0%  {width: 0%;} 100% {width: 67%;}}
@keyframes progressbar68 {  0%  {width: 0%;} 100% {width: 68%;}}
@keyframes progressbar69 {  0%  {width: 0%;} 100% {width: 69%;}}
@keyframes progressbar70 {  0%  {width: 0%;} 100% {width: 70%;}}
@keyframes progressbar71 {  0%  {width: 0%;} 100% {width: 71%;}}
@keyframes progressbar72 {  0%  {width: 0%;} 100% {width: 72%;}}
@keyframes progressbar73 {  0%  {width: 0%;} 100% {width: 73%;}}
@keyframes progressbar74 {  0%  {width: 0%;} 100% {width: 74%;}}
@keyframes progressbar75 {  0%  {width: 0%;} 100% {width: 75%;}}
@keyframes progressbar76 {  0%  {width: 0%;} 100% {width: 76%;}}
@keyframes progressbar77 {  0%  {width: 0%;} 100% {width: 77%;}}
@keyframes progressbar78 {  0%  {width: 0%;} 100% {width: 78%;}}
@keyframes progressbar79 {  0%  {width: 0%;} 100% {width: 79%;}}
@keyframes progressbar80 {  0%  {width: 0%;} 100% {width: 80%;}}
@keyframes progressbar81 {  0%  {width: 0%;} 100% {width: 81%;}}
@keyframes progressbar82 {  0%  {width: 0%;} 100% {width: 82%;}}
@keyframes progressbar83 {  0%  {width: 0%;} 100% {width: 83%;}}
@keyframes progressbar84 {  0%  {width: 0%;} 100% {width: 84%;}}
@keyframes progressbar85 {  0%  {width: 0%;} 100% {width: 85%;}}
@keyframes progressbar86 {  0%  {width: 0%;} 100% {width: 86%;}}
@keyframes progressbar87 {  0%  {width: 0%;} 100% {width: 87%;}}
@keyframes progressbar88 {  0%  {width: 0%;} 100% {width: 88%;}}
@keyframes progressbar89 {  0%  {width: 0%;} 100% {width: 89%;}}
@keyframes progressbar90 {  0%  {width: 0%;} 100% {width: 90%;}}
@keyframes progressbar91 {  0%  {width: 0%;} 100% {width: 91%;}}
@keyframes progressbar92 {  0%  {width: 0%;} 100% {width: 92%;}}
@keyframes progressbar93 {  0%  {width: 0%;} 100% {width: 93%;}}
@keyframes progressbar94 {  0%  {width: 0%;} 100% {width: 94%;}}
@keyframes progressbar95 {  0%  {width: 0%;} 100% {width: 95%;}}
@keyframes progressbar96 {  0%  {width: 0%;} 100% {width: 96%;}}
@keyframes progressbar97 {  0%  {width: 0%;} 100% {width: 97%;}}
@keyframes progressbar98 {  0%  {width: 0%;} 100% {width: 98%;}}
@keyframes progressbar99 {  0%  {width: 0%;} 100% {width: 99%;}}
@keyframes progressbar100 {  0%  {width: 0%;} 100% {width: 100%;}}



/* window wrap css 영역 */
.modal_contents_wrap {
padding: 0px 10px 0px 10px;
}


/* 리스트 원 추가 */
ul.exam-list li::before {
	content: "○ ";
}

ul.exam-list li.black-circle::before {
	content: "● ";
}