.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
.noselect {
  -webkit-user-select: none;
  /* Chrome/Safari */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE10+ */
}
html, body {height:100% !important; margin:0;}
.attendance-wrap { position: relative; height: 100%; background: url('/images/common/attendance/bg_attendance.gif') repeat 0 0; }
#attendance {width:570px;padding: 50px 28px 35px 28px; margin: 0 auto; box-sizing: border-box; }
#attendance * { box-sizing: border-box; }
#attendance .header { position: relative; text-align: center; }
#attendance .header .txt { font-family: 'Noto Sans KR'; position: relative; z-index: 1; font-size: 22px; color: #666; line-height: normal; letter-spacing: -1px; }
#attendance .header .txt strong { color: #000; }
#attendance .header .txt .chk { position: relative; display: inline-block; }
#attendance .header .txt .chk em { position: absolute; top: -14px; left: 50%; margin-left: -6px; width: 15px; height: 12px; display: inline-block; background: url('/images/common/attendance/bull_header_txt.png') no-repeat 50% 50%; }
#attendance .header .tit { font-family: 'Noto Sans KR'; position: relative; z-index: 1; margin-top: -10px; line-height: normal; font-size: 64px; font-weight: bold; letter-spacing: -1px; color: #000; }
#attendance .header .tit span { color: #ff4d83; }
#attendance .header .txt-round { font-family: 'Noto Sans KR'; line-height: normal; position: relative; z-index: 1; margin-top: 10px; display: inline-block; padding: 10px 30px; font-size: 18px; color: #fff; background-color: #ff4d83; border-radius: 23px; }
#attendance .header .txt-round strong { color: #fbffd4; }
#attendance .header .stamp {  position: absolute; right: -20px; top: -35px; display: block; width: 116px; height: 96px; background: url('/images/common/attendance/bull_stamp.png') no-repeat 50% 50%; }
.gauge-wrap { position: relative; margin: 70px 150px; }
.gauge-wrap .gauge-txt { font-size: 24px; font-weight: bold; color: #000; text-align: center; }
.gauge-wrap .gauge-txt strong { font-size: 36px; color: #ff4d83; }
.gauge-wrap .gauge-bar { position: relative; width: 100%; height: 30px; margin-top: 55px; background-color: #dcdcdc; border-radius: 15px; }
.gauge-wrap .gauge-bar .progress { position: relative; width: auto; height: 30px; background-color: #ff4d83; border-radius: 15px; }
.gauge-wrap .gauge-bar .progress .balloon { position: absolute; top: -40px; right: 0; display: inline-block; width: 30px; height: 30px; background: url('/images/common/attendance/bull_balloon.gif') no-repeat 100% 0; }
.gauge-wrap .gauge-per-txts { width: 100%; margin-top: 10px; }
.gauge-wrap .gauge-per-txts span { float: left; text-align: right; display: inline-block; width: 20%; font-size: 16px; color: #aaa; }
.gauge-wrap .gauge-per-txts .txt-0 { width: 0; }
.gauge-wrap .gauge-per-txts .txt-20 {}
.gauge-wrap .gauge-per-txts .txt-40 {}
.gauge-wrap .gauge-per-txts .txt-60 {}
.gauge-wrap .gauge-per-txts .txt-80 {}
.gauge-wrap .gauge-per-txts .txt-100 {}
.calendar { margin-top: 40px; border: 2px solid #a5a5a5; background-color: #fff;font-family:'Malgun Gothic' !important; }
.calendar .clndr .clndr-controls { display: block; width: 100%; position: relative; line-height: 22px; padding: 15px 0; text-align: center; }
.calendar .clndr .clndr-controls .month { display: inline-block; margin: 0 5px; font-size: 22px; font-weight: bold; vertical-align: -5px; }
.calendar .clndr .clndr-controls .clndr-control-button { display: inline-block; }
.calendar .clndr .clndr-controls .clndr-control-button.rightalign { display: inline-block; }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button:hover { /* background: #ddd; */ }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive { opacity: 0.5; }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-next-button.inactive:hover { background: none; cursor: default; }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button:hover { /* background: #ddd; */ }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive { opacity: 0.5; }
.calendar .clndr .clndr-controls .clndr-control-button .clndr-previous-button.inactive:hover { background: none; cursor: default; }
.calendar .clndr .clndr-table { table-layout: fixed; width: 100%; }
.calendar .clndr .clndr-table .header-days { height: 40px; background: #fff; }
.calendar .clndr .clndr-table .header-days .header-day { vertical-align: middle; text-align: center; border-top: 1px solid #e5e5e5; color: #000; font-weight: bold; }
.calendar .clndr .clndr-table .header-days .header-day:last-child {  }
.calendar .clndr .clndr-table .header-days .header-day-dow-0 { color: #ef575a; }
.calendar .clndr .clndr-table .header-days .header-day-dow-6 { color: #2a7cd9; }
.calendar .clndr .clndr-table tr { height: 60px; }
.calendar .clndr .clndr-table tr td { vertical-align: top; }
.calendar .clndr .clndr-table tr .day { border-top: 1px solid #e5e5e5; width: 100%; height: inherit; background-color: #fff; }
.calendar .clndr .clndr-table tr .day:hover { /* background: #eee; */ }
.calendar .clndr .clndr-table tr .day.today,
.calendar .clndr .clndr-table tr .day.my-today { /* background: #9AD6E3; */ }
.calendar .clndr .clndr-table tr .day.today:hover,
.calendar .clndr .clndr-table tr .day.my-today:hover { /* background: #72c6d8; */ }
.calendar .clndr .clndr-table tr .day.today.event,
.calendar .clndr .clndr-table tr .day.my-today.event { /* background: #a7dbc1; */ }
.calendar .clndr .clndr-table tr .day.event,
.calendar .clndr .clndr-table tr .day.my-event { /* background: #B4E09F; */ }
.calendar .clndr .clndr-table tr .day.event:hover,
.calendar .clndr .clndr-table tr .day.my-event:hover { /* background: #96d478; */ }
.calendar .clndr .clndr-table tr .day.inactive,
.calendar .clndr .clndr-table tr .day.my-inactive { background: #ddd; }
.calendar .clndr .clndr-table tr .day:last-child {  }
.calendar .clndr .clndr-table tr .day .day-contents { box-sizing: border-box; padding: 5px; text-align: left; color: #888; font-size:12px; font-family:'Malgun Gothic';}
.calendar .clndr .clndr-table tr .empty,
.calendar .clndr .clndr-table tr .adjacent-month,
.calendar .clndr .clndr-table tr .my-empty,
.calendar .clndr .clndr-table tr .my-adjacent-month { border-top: 1px solid #e5e5e5; width: 100%; height: inherit; background: #f9f9f9; }
.calendar .clndr .clndr-table tr .empty:hover,
.calendar .clndr .clndr-table tr .adjacent-month:hover,
.calendar .clndr .clndr-table tr .my-empty:hover,
.calendar .clndr .clndr-table tr .my-adjacent-month:hover { /* background: #ddd; */ }
.calendar .clndr .clndr-table tr .empty:last-child,
.calendar .clndr .clndr-table tr .adjacent-month:last-child,
.calendar .clndr .clndr-table tr .my-empty:last-child,
.calendar .clndr .clndr-table tr .my-adjacent-month:last-child { border-right: 1px solid #e5e5e5; }
.calendar .clndr .clndr-table tr:last-child .day,
.calendar .clndr .clndr-table tr:last-child .my-day { border-bottom: 1px solid #e5e5e5; }
.calendar .clndr .clndr-table tr:last-child .empty,
.calendar .clndr .clndr-table tr:last-child .my-empty { border-bottom: 1px solid #000; }
.calendar .clndr .clndr-table tr .calendar-dow-0 { background-color: #fff2f2 !important; }
.calendar .clndr .clndr-table tr .calendar-dow-0 .day-contents span { color: #ef575a; }
.calendar .clndr .clndr-table tr .calendar-dow-6 { background-color: #eff6ff !important; }
.calendar .clndr .clndr-table tr .calendar-dow-6 .day-contents span { color: #2a7cd9; }
.calendar .clndr .clndr-table tr .day.today .day-contents span { font-family: 'Malgun Gothic'; margin-top: -3px; margin-left: -3px; display: inline-block; width: 24px; height: 24px; line-height: 23px; text-align: center; color: #fff; border-radius: 50%; background-color: #1a73e8; }
.calendar .clndr .clndr-table tr .day-check { background: #fff url('/images/common/attendance/attendance_check.png') no-repeat 50% 50%; }
.calendar .clndr .clndr-table tr .day-fail { background: #fff url('/images/common/attendance/attendance_fail.png') no-repeat 50% 50%; }
.calendar .clndr .clndr-table tr .day-complete { background: #fff url('/images/common/attendance/attendance_complete.png') no-repeat 50% 50%; }
.clndr-foot { margin-top: 25px; text-align: center; }
.clndr-foot .btn-attendance { font-family: 'Noto Sans KR'; display: inline-block; font-size: 20px; width: 170px; height: 60px; line-height: 60px; text-align: center; color: #fff; background-color: #000; }
.clndr-next-button,
.clndr-previous-button,
.clndr-next-year-button,
.clndr-previous-year-button { display: inline-block; width: 25px; height: 25px; text-indent: -9999px; vertical-align: middle; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }
.clndr-next-button.inactive,
.clndr-previous-button.inactive,
.clndr-next-year-button.inactive,
.clndr-previous-year-button.inactive { opacity: 0.5; cursor: default; }
.clndr-previous-button { background: transparent url('/images/common/attendance/btn_prev_month.gif') no-repeat 50% 50%; }
.clndr-next-button { background: transparent url('/images/common/attendance/btn_next_month.gif') no-repeat 50% 50%; }